/*
* bappy.org landing styles.
* Design direction: Port of Entry.
*
* Light structural ground for information, deep near-black bays for proof and
* portfolio work. One accent, the logo blue, so the mark and the interface read
* as one brand. Condensed display type does the shouting.
*
* Shared across every coded "Port of Entry" template (home, photography,
* videography, formation). Selectors below key off `.pe-template`, a body
* class every one of those templates carries (see bappy_pe_body_class() in
* functions.php), not a specific page-template-* class, so this file stays
* the one component library instead of being duplicated per page.
*/
.pe {
--bg: #F2F4F5;
--surface: #FFFFFF;
--deep: #0C1119;
--deep-surface: #161E2B;
--ink: #12181B;
--ink-inverse: #EDF0F1;
--muted: #5C6B72;
--muted-inverse: #93A3AA;
--rule: #D3DADD;
--rule-inverse: #263243;
--accent: #1955FB;
--accent-press: #1445E9;
--accent-deep: #041447;
--accent-soft: #E3EBFE;
--display: 'Archivo Narrow', 'Archivo', 'Segoe UI', system-ui, sans-serif;
--body: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
--sp-sm: 16px;
--sp-md: 28px;
--sp-lg: 56px;
--sp-xl: 96px;
--radius: 4px;
--pill: 999px;
--wrap: 1200px;
background: var(--bg);
color: var(--ink);
font-family: var(--body);
font-size: 17px;
line-height: 1.6;
overflow-x: clip;
}
/*
* Astra caps page content at 1240px via .ast-container, which stops any section
* reaching the viewport edge. Release it for the CONTENT container only. The
* header and its nav use the same class, so an unscoped rule pushes the logo and
* menu into the screen corners.
*/
.pe-template #content .ast-container {
max-width: none;
width: 100%;
padding-inline: 0;
display: block;
}
.pe-template #primary,
.pe-template #content .site-main {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}
/*
* Astra sets fonts, colors and margins on bare elements with real specificity.
* Neutralising inside :where() keeps that at zero, so component rules below win
* without an !important arms race.
*/
:where(.pe h1, .pe h2, .pe h3, .pe h4, .pe p, .pe ul, .pe li, .pe figure, .pe article, .pe blockquote) {
margin: 0;
padding: 0;
color: inherit;
}
:where(.pe ul) {
list-style: none;
}
/*
* Astra colors headings with real specificity, which beats the zero-specificity
* inherit above, so every heading states its own color.
*/
.pe-hero__title,
.pe-close__title,
.pe-service__name,
.pe-case__title,
.pe-agency .pe-h2,
.pe-services .pe-h2,
.pe-cases .pe-h2,
.pe-quotes .pe-h2,
.pe-page__title {
color: var(--ink);
}
.pe-bay .pe-h2,
.pe-bay .pe-video__title,
.pe-footer__h,
.pe-footer__wordmark {
color: var(--ink-inverse);
}
.pe img {
max-width: 100%;
height: auto;
display: block;
}
.pe-wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: 24px;
}
.pe-microlabel {
font-family: var(--body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
.pe-microlabel--center {
text-align: center;
}
/* ---------------------------------------------------------------- Buttons */
.pe-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 9px;
font-family: var(--body);
font-size: 15px;
font-weight: 600;
line-height: 1;
padding: 17px 30px;
border-radius: var(--pill);
border: 1px solid transparent;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
isolation: isolate;
transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 220ms ease,
color 180ms ease,
border-color 180ms ease;
}
.pe-btn--sm { font-size: 14px; padding: 13px 22px; }
.pe-btn--lg { font-size: 16px; padding: 20px 38px; }
.pe-arrow {
transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pe-btn:hover .pe-arrow,
.pe-btn:focus-visible .pe-arrow {
transform: translateX(5px);
}
/*
* The fill sweeps in from the left on hover rather than swapping color, which
* reads as a deliberate interaction. It is a transform on a pseudo element, so
* nothing lays out again.
*/
.pe-btn::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
transform: scaleX(0);
transform-origin: left center;
transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pe-btn--primary {
background: var(--accent);
color: #FFFFFF;
}
.pe-btn--primary::before {
background: var(--accent-deep);
}
.pe-btn--primary:hover,
.pe-btn--primary:focus-visible {
color: #FFFFFF;
transform: translateY(-2px);
box-shadow: 0 10px 24px -10px rgba(25, 85, 251, 0.65);
}
.pe-btn--primary:hover::before,
.pe-btn--primary:focus-visible::before {
transform: scaleX(1);
}
.pe-btn--ghost {
background: transparent;
color: var(--ink);
border-color: var(--rule);
}
.pe-btn--ghost::before {
background: var(--ink);
}
.pe-btn--ghost:hover,
.pe-btn--ghost:focus-visible {
color: var(--bg);
border-color: var(--ink);
transform: translateY(-2px);
}
.pe-btn--ghost:hover::before,
.pe-btn--ghost:focus-visible::before {
transform: scaleX(1);
}
.pe-btn:active {
transform: translateY(0);
}
.pe :focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
/* ------------------------------------------------------------------- Hero */
.pe-hero {
padding-block: clamp(48px, 6vw, 88px) clamp(40px, 5vw, 64px);
}
.pe-hero__inner {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
/* Badge with a shine sweep. Transform only, and it stops for reduced motion. */
.pe-badge {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
background: var(--accent-soft);
border: 1px solid rgba(25, 85, 251, 0.22);
border-radius: var(--pill);
padding: 9px 20px;
margin-bottom: 26px;
}
.badge-shine::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 45%;
height: 100%;
background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.85) 50%, transparent 100%);
transform: translateX(-160%);
animation: pe-shine 3.6s ease-in-out infinite;
}
@keyframes pe-shine {
0% { transform: translateX(-160%); }
55% { transform: translateX(320%); }
100% { transform: translateX(320%); }
}
.pe-hero__title {
font-family: var(--display);
font-weight: 700;
text-transform: uppercase;
font-size: clamp(34px, 6vw, 88px);
line-height: 0.96;
letter-spacing: -0.012em;
margin-bottom: 28px;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.12em;
/*
* The rotator mask is sized from this element. Left to shrink-to-fit it would
* be exactly as wide as the line above, and any longer capability word would
* be clipped at both ends.
*/
width: 100%;
}
.pe-hero__lead {
display: block;
}
/*
* Static hero title for pages with no rotating word (photography, videography,
* formation). Same scale and treatment as the homepage title so the pages read
* as one family.
*/
.pe-page__title {
font-family: var(--display);
font-weight: 700;
text-transform: uppercase;
font-size: clamp(32px, 5.6vw, 76px);
line-height: 0.98;
letter-spacing: -0.012em;
margin-bottom: 28px;
text-wrap: balance;
}
/*
* Rotating capability line. Each word carries its own accent block, so the
* highlight never has to animate its width. Words are stacked in one grid cell
* and cross-faded with opacity and translate only.
*/
/*
* Masked window. Both words carry a solid accent block, so cross-fading them in
* place showed two overlapping blocks mid-transition. Clipping the container and
* sliding each word through it means only one is ever inside the window.
*/
.pe-rotator {
position: relative;
display: block;
width: 100%;
height: 1.3em;
overflow: hidden;
}
.pe-rotator__item {
position: absolute;
top: 0;
left: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding-inline: 0.34em;
background: transparent;
color: var(--accent-deep);
white-space: nowrap;
opacity: 0;
transform: translate(-50%, 112%);
transition: opacity 520ms cubic-bezier(0.33, 1, 0.68, 1),
transform 640ms cubic-bezier(0.33, 1, 0.68, 1);
}
.pe-rotator__item.is-active {
opacity: 1;
transform: translate(-50%, 0);
}
.pe-rotator__item.is-out {
opacity: 0;
transform: translate(-50%, -112%);
}
/* Without JS every word would stack on top of the others, so show only one. */
html:not(.bappy-js) .pe-rotator__item { opacity: 1; transform: translate(-50%, 0); }
html:not(.bappy-js) .pe-rotator__item:not(:first-child) { display: none; }
.pe-hero__sub {
font-size: clamp(16px, 1.25vw, 18px);
line-height: 1.65;
color: var(--muted);
max-width: 66ch;
margin-bottom: 36px;
}
.pe-hero__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
}
/* ------------------------------------------------------ Proof and marquee */
.pe-proof {
background: var(--deep);
color: var(--ink-inverse);
padding-block: var(--sp-lg);
}
.pe-proof .pe-microlabel {
color: var(--muted-inverse);
margin-bottom: 30px;
}
/*
* Two identical tracks scroll left as one. When the first has travelled its own
* width the animation restarts, and because the second is sitting exactly one
* width behind, the seam is invisible.
*/
.pe-marquee {
display: flex;
width: max-content;
will-change: transform;
animation: pe-scroll 46s linear infinite;
}
.pe-marquee:hover,
.pe-marquee:focus-within {
animation-play-state: paused;
}
@keyframes pe-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/*
* Both tracks carry the same trailing margin, so the distance across the seam
* equals the distance between any two logos. Padding on only the inner side
* left a visibly wider gap where the loop wrapped.
*/
.pe-marquee__track {
display: flex;
align-items: center;
gap: 18px;
margin-right: 18px;
/*
* Astra sets ul padding with real specificity. Left at its default the second
* track began 40px late, which is the wider gap that showed at the loop seam.
*/
padding: 0;
margin-block: 0;
margin-left: 0;
list-style: none;
}
.pe-marquee__item {
flex: 0 0 auto;
width: 188px;
height: 82px;
background: #FFFFFF;
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
padding: 16px 24px;
overflow: hidden;
}
.pe-marquee__item img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.pe-proof__note {
text-align: center;
font-size: 14px;
color: var(--muted-inverse);
margin-top: 30px;
padding-inline: 24px;
}
/* ----------------------------------------------------------- Agency block */
.pe-agency { padding-block: var(--sp-xl); }
.pe-agency__grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: clamp(40px, 6vw, 90px);
align-items: start;
}
.pe-h2 {
font-family: var(--display);
font-weight: 700;
text-transform: uppercase;
font-size: clamp(30px, 4.2vw, 56px);
line-height: 0.98;
letter-spacing: -0.01em;
text-wrap: balance;
}
.pe-agency__body {
font-size: 17px;
line-height: 1.65;
color: var(--muted);
max-width: 54ch;
margin: 22px 0 32px;
}
.pe-metrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px 32px;
}
.pe-metric__n {
display: block;
font-family: var(--display);
font-weight: 700;
font-size: clamp(46px, 5.4vw, 72px);
line-height: 1;
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.pe-metric__l {
display: block;
font-size: 14px;
color: var(--muted);
margin-top: 8px;
}
/* --------------------------------------------------------------- Services */
.pe-services { padding-block: var(--sp-xl); }
.pe-services__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: var(--sp-lg);
}
/*
* Services read as an index, not a card grid. Nine equal boxes is the most
* templated pattern available, and it wastes the display face. Full width rows
* let each service name sit at real scale, keep every description visible in
* the DOM, and give the row a single deliberate hover move.
*/
.pe-services__index {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--rule);
border: 1px solid var(--rule);
}
.pe-row {
position: relative;
display: flex;
flex-direction: column;
background: var(--bg);
padding: 26px 26px 30px;
overflow: hidden;
isolation: isolate;
text-decoration: none;
color: inherit;
}
.pe-row__rule {
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(135deg, rgba(25, 85, 251, 0.09) 0%, rgba(25, 85, 251, 0) 70%);
opacity: 0;
transform: scale(1.04);
transition: opacity 380ms ease, transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pe-row:hover .pe-row__rule,
.pe-row:focus-within .pe-row__rule {
opacity: 1;
transform: none;
}
.pe-row__name {
font-family: var(--display);
font-weight: 700;
text-transform: uppercase;
font-size: 19px;
line-height: 1.08;
letter-spacing: -0.005em;
margin-bottom: 11px;
transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1), color 240ms ease;
}
.pe-row:hover .pe-row__name {
transform: translateX(6px);
color: var(--accent);
}
.pe-row__desc {
font-size: 14.5px;
line-height: 1.58;
color: var(--muted);
}
.pe-row__mark {
position: absolute;
right: 22px;
top: 24px;
font-size: 17px;
line-height: 1;
color: var(--accent);
opacity: 0;
transform: translate(-6px, 6px);
transition: opacity 260ms ease, transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pe-row:hover .pe-row__mark {
opacity: 1;
transform: none;
}
/* --------------------------------------------------------------- Deep bay */
.pe-bay {
background: var(--deep);
color: var(--ink-inverse);
padding-block: var(--sp-xl);
}
.pe-bay__head { margin-bottom: var(--sp-lg); }
.pe-bay__lede {
font-size: 17px;
line-height: 1.6;
color: var(--muted-inverse);
max-width: 56ch;
margin-top: 16px;
}
.pe-work {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-md);
}
/*
* Vertical work gets its own strip. Mixing 16:9 and 3:4 in one grid makes every
* row ragged and lands the captions at different heights.
*/
.pe-shorts__label {
color: var(--muted-inverse);
margin: var(--sp-lg) 0 22px;
}
.pe-shorts {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-md);
}
/* ------------------------------------------------------------ Video cards */
.pe-video__trigger {
position: relative;
display: block;
width: 100%;
padding: 0;
border: 0;
border-radius: 0;
background: var(--deep-surface);
cursor: pointer;
overflow: hidden;
}
.pe-video--wide .pe-video__trigger { aspect-ratio: 16 / 9; }
.pe-video--tall .pe-video__trigger { aspect-ratio: 3 / 4; }
.pe-video__poster {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pe-video__trigger:hover .pe-video__poster,
.pe-video__trigger:focus-visible .pe-video__poster {
transform: scale(1.045);
}
.pe-video__play {
position: absolute;
left: 16px;
bottom: 16px;
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--accent);
color: #FFFFFF;
padding-left: 3px;
transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms ease;
}
.pe-video__trigger:hover .pe-video__play {
transform: scale(1.12);
background: var(--accent-press);
}
.pe-video__title {
font-family: var(--display);
font-weight: 700;
text-transform: uppercase;
font-size: 16px;
margin-top: 14px;
}
.pe-video__meta {
font-size: 14px;
line-height: 1.5;
color: var(--muted-inverse);
margin-top: 5px;
}
/* ------------------------------------------------------------- Lightbox */
.pe-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: grid;
place-items: center;
padding: 24px;
}
.pe-lightbox[hidden] { display: none; }
.pe-lightbox__backdrop {
position: absolute;
inset: 0;
background: rgba(5, 8, 13, 0.95);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border: 0;
opacity: 0;
transition: opacity 240ms ease;
}
.pe-lightbox.is-open .pe-lightbox__backdrop { opacity: 1; }
.pe-lightbox__panel {
position: relative;
width: min(100%, 1100px);
opacity: 0;
transform: translateY(12px) scale(0.985);
transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pe-lightbox.is-open .pe-lightbox__panel {
opacity: 1;
transform: none;
}
.pe-lightbox__frame {
width: 100%;
background: #000000;
}
.pe-lightbox__frame iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.pe-lightbox__frame.is-wide { aspect-ratio: 16 / 9; }
.pe-lightbox__frame.is-tall {
aspect-ratio: 9 / 16;
max-height: 82vh;
width: auto;
margin-inline: auto;
aspect-ratio: 9 / 16;
}
.pe-lightbox__close {
position: fixed;
top: 22px;
right: 24px;
z-index: 2;
width: 44px;
height: 44px;
display: grid;
place-items: center;
font-size: 26px;
line-height: 1;
color: var(--ink-inverse);
background: transparent;
border: 1px solid rgba(237, 240, 241, 0.35);
border-radius: 50%;
cursor: pointer;
transition: background-color 180ms ease, transform 180ms ease;
}
.pe-lightbox__close:hover {
background: rgba(237, 240, 241, 0.14);
transform: scale(1.06);
}
/* ---------------------------------------------------------- Case studies */
.pe-cases { padding-block: var(--sp-xl); }
.pe-cases__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--rule);
border: 1px solid var(--rule);
}
.pe-case {
background: var(--bg);
padding: 32px 30px 34px;
transition: background-color 220ms ease;
}
.pe-case:hover { background: var(--surface); }
.pe-case__cat {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 12px;
}
.pe-case__title {
font-family: var(--display);
font-weight: 700;
text-transform: uppercase;
font-size: 20px;
line-height: 1.12;
margin-bottom: 22px;
min-height: 2.24em;
}
.pe-case__stats {
display: flex;
gap: 32px;
}
.pe-case__stat strong {
display: block;
font-family: var(--display);
font-weight: 700;
font-size: 30px;
line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.pe-case__stat em {
display: block;
font-style: normal;
font-size: 12.5px;
color: var(--muted);
margin-top: 6px;
}
.pe-cases__note {
font-size: 13px;
color: var(--muted);
margin-top: 22px;
}
/* --------------------------------------------------------------- Quotes */
.pe-quotes { padding-block: var(--sp-xl); }
.pe-quotes .pe-h2 { margin-bottom: var(--sp-lg); }
.pe-quotes__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-md);
}
.pe-quote {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--radius);
padding: 30px 28px 26px;
display: flex;
flex-direction: column;
gap: 20px;
transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms ease;
}
.pe-quote:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px -18px rgba(18, 24, 27, 0.4);
}
.pe-quote__text {
font-size: 16px;
line-height: 1.6;
color: var(--ink);
flex: 1 1 auto;
}
.pe-quote__by {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
border-top: 1px solid var(--rule);
padding-top: 16px;
}
.pe-quote__who {
font-size: 13.5px;
font-weight: 600;
color: var(--muted);
}
.pe-quote__rating {
font-size: 12.5px;
font-weight: 600;
color: var(--accent);
white-space: nowrap;
}
/* -------------------------------------------------------------- Close CTA */
.pe-close { padding-block: var(--sp-xl); background: transparent; }
.pe-close__inner {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.pe-close__title {
font-family: var(--display);
font-weight: 700;
text-transform: uppercase;
font-size: clamp(32px, 5vw, 68px);
line-height: 0.98;
margin-bottom: 18px;
}
.pe-close__sub {
font-size: 17px;
color: var(--muted);
max-width: 52ch;
margin-bottom: 34px;
}
/* ---------------------------------------------------------------- Footer */
.pe-footer {
background: var(--deep);
color: var(--ink-inverse);
padding-block: var(--sp-xl) var(--sp-md);
}
.pe-footer__top {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: clamp(32px, 5vw, 64px);
padding-bottom: var(--sp-lg);
border-bottom: 1px solid var(--rule-inverse);
}
/*
* Needs to outrank `.pe img { height: auto }` above, which is (0,1,1) and would
* otherwise win against a single class and render the mark at full size.
*/
.pe .pe-footer__logo {
width: auto;
height: 46px;
margin-bottom: 18px;
/* Renders the blue wordmark white so it reads on the deep footer ground. */
filter: brightness(0) invert(1);
opacity: 0.92;
}
.pe-footer__rated {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--ink-inverse);
font-weight: 600;
}
.pe-stars {
color: var(--accent);
letter-spacing: 0.08em;
font-size: 14px;
}
.pe-footer__pitch {
font-size: 15px;
line-height: 1.6;
color: var(--muted-inverse);
max-width: 34ch;
margin-bottom: 24px;
}
.pe-footer__h {
font-family: var(--body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 18px;
}
/*
* Astra sets list-style with real specificity, so the zero-specificity :where()
* reset above does not remove the markers here.
*/
.pe-footer__col ul,
.pe-footer ul {
list-style: none;
margin: 0;
padding: 0;
}
.pe-footer__col ul {
display: flex;
flex-direction: column;
gap: 11px;
}
/* This template ships its own footer, so the parent theme's is suppressed here. */
.pe-template .site-footer,
.pe-template footer.site-footer {
display: none;
}
.pe-footer__col a {
font-size: 15px;
color: var(--muted-inverse);
text-decoration: none;
transition: color 180ms ease;
}
.pe-footer__col a:hover,
.pe-footer__col a:focus-visible {
color: var(--ink-inverse);
}
.pe-footer__muted {
font-size: 15px;
color: var(--muted-inverse);
}
.pe-footer__bar {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px;
padding-top: var(--sp-md);
font-size: 13px;
color: var(--muted-inverse);
}
/* ------------------------------------------------------- Editor fallthrough */
.pe-editor { padding-bottom: var(--sp-xl); }
.pe-prose { max-width: 68ch; }
/* ---------------------------------------------------------------- Reveals */
.bappy-js .pe-reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.bappy-js .pe-reveal.is-in {
opacity: 1;
transform: none;
}
/* ------------------------------------------------------------- Responsive */
@media (max-width: 1024px) {
.pe-cases__grid,
.pe-quotes__grid {
grid-template-columns: repeat(2, 1fr);
}
.pe-services__index { grid-template-columns: repeat(2, 1fr); }
.pe-work { grid-template-columns: repeat(2, 1fr); }
.pe-shorts { grid-template-columns: repeat(3, 1fr); }
.pe-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
.pe { font-size: 16px; }
.pe-hero { padding-block: 40px 32px; }
.pe-agency { padding-block: 64px; }
.pe-agency__grid { grid-template-columns: 1fr; gap: 44px; }
.pe-services,
.pe-bay,
.pe-cases,
.pe-quotes,
.pe-close { padding-block: 64px; }
.pe-marquee__item { width: 148px; height: 68px; padding: 12px 18px; }
.pe-hero__actions .pe-btn { flex: 1 1 auto; justify-content: center; }
.pe-lightbox__close { top: -42px; }
}
@media (max-width: 560px) {
.pe-cases__grid,
.pe-quotes__grid,
.pe-work {
grid-template-columns: 1fr;
}
.pe-services__index { grid-template-columns: 1fr; }
.pe-shorts { grid-template-columns: repeat(2, 1fr); }
.pe-metrics { gap: 30px 20px; }
.pe-case__title { min-height: 0; }
.pe-footer__top { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.pe *,
.pe *::before,
.pe *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
.bappy-js .pe-reveal { opacity: 1; transform: none; }
.badge-shine::after { display: none; }
.pe-marquee { animation: none; }
}
/* ------------------------------------------------- Rotator highlight bar */
/*
* One bar behind every word, scaled to the active word's width. Because it is
* an empty rectangle, scaleX distorts nothing, and the highlight morphs between
* words instead of jumping size the way a per-word background does.
*/
.pe-rotator__bar {
position: absolute;
top: 0;
left: 50%;
width: 100px;
height: 100%;
/*
* Square cornered on purpose. scaleX stretches a border-radius into an
* ellipse, and this bar scales by up to 9x between the shortest and longest
* capability, so any radius or border would visibly skew. Rakuten's does the
* same for the same reason.
*/
border-radius: 0;
background: rgba(25, 85, 251, 0.34);
-webkit-backdrop-filter: blur(12px) saturate(1.6);
backdrop-filter: blur(12px) saturate(1.6);
transform: translateX(-50%) scaleX(1);
transition: transform 620ms cubic-bezier(0.33, 1, 0.68, 1);
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.pe-rotator__bar { transition: none; }
}
/* ================================================================ Gallery */
.pe-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: var(--sp-lg);
}
.pe-filter {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--body);
font-size: 14px;
font-weight: 600;
line-height: 1;
padding: 13px 20px;
border-radius: var(--pill);
border: 1px solid var(--rule-inverse);
background: transparent;
color: var(--muted-inverse);
cursor: pointer;
transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.pe-filter:hover {
color: var(--ink-inverse);
border-color: var(--muted-inverse);
}
.pe-filter.is-on {
background: var(--accent);
border-color: var(--accent);
color: #FFFFFF;
}
.pe-filter__n {
font-variant-numeric: tabular-nums;
font-size: 12px;
color: inherit;
}
/*
* Twelve column bed with dense packing, so hiding a tile during filtering lets
* the rest close the gap instead of leaving holes in the grid.
*/
.pe-gallery {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-flow: row dense;
gap: var(--sp-md);
}
.pe-tile {
display: flex;
flex-direction: column;
min-width: 0;
}
.pe-tile--wide { grid-column: span 6; }
.pe-tile--square { grid-column: span 3; }
.pe-tile--tall { grid-column: span 3; }
.pe-tile[hidden] { display: none; }
.pe-tile__trigger {
position: relative;
display: block;
width: 100%;
padding: 0;
border: 0;
border-radius: 0;
background: var(--deep-surface);
cursor: pointer;
overflow: hidden;
}
.pe-tile--wide .pe-tile__trigger { aspect-ratio: 16 / 9; }
.pe-tile--square .pe-tile__trigger { aspect-ratio: 1 / 1; }
.pe-tile--tall .pe-tile__trigger { aspect-ratio: 3 / 4; }
.pe-tile__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pe-tile__trigger:hover .pe-tile__img,
.pe-tile__trigger:focus-visible .pe-tile__img {
transform: scale(1.04);
}
.pe-tile__play,
.pe-tile__zoom {
position: absolute;
left: 14px;
bottom: 14px;
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--accent);
color: #FFFFFF;
transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), background-color 220ms ease;
}
.pe-tile__play { padding-left: 3px; }
.pe-tile__trigger:hover .pe-tile__play,
.pe-tile__trigger:hover .pe-tile__zoom {
transform: scale(1.12);
background: var(--accent-press);
}
.pe-tile__title {
font-family: var(--display);
font-weight: 700;
text-transform: uppercase;
font-size: 15.5px;
line-height: 1.15;
margin-top: 14px;
color: var(--ink-inverse);
}
.pe-tile__meta {
font-size: 13.5px;
line-height: 1.5;
color: var(--muted-inverse);
margin-top: 5px;
}
.pe-gallery__note {
font-size: 13px;
color: var(--muted-inverse);
margin-top: var(--sp-md);
}
/* Dashboards are screenshots of wide UI, so they read better uncropped. */
.pe-tile__img[src*="google-ads"],
.pe-tile__img[src*="meta-ads"],
.pe-tile__img[src*="speedtest"] {
object-fit: contain;
background: #FFFFFF;
}
.pe-lightbox__frame.is-image {
aspect-ratio: auto;
background: transparent;
}
.pe-lightbox__frame.is-image img {
display: block;
width: 100%;
height: auto;
max-height: 84vh;
object-fit: contain;
margin-inline: auto;
}
@media (max-width: 1024px) {
.pe-tile--wide { grid-column: span 12; }
.pe-tile--square { grid-column: span 6; }
.pe-tile--tall { grid-column: span 6; }
}
@media (max-width: 560px) {
.pe-tile--wide,
.pe-tile--square,
.pe-tile--tall { grid-column: span 12; }
.pe-filter { padding: 11px 16px; font-size: 13px; }
}
/* ========================================================= Hero backdrop */
/*
* Two layers, both free at runtime: a static dot grid painted by a CSS gradient,
* and one soft accent aura that eases toward the pointer. The aura is a single
* translated element with no blur filter and no repaint, so the whole effect
* costs one transform per frame and nothing at all on load.
*/
.pe-hero {
position: relative;
overflow: hidden;
}
.pe-hero::before {
content: '';
position: absolute;
inset: 0;
z-index: -2;
background-image: radial-gradient(circle, rgba(18, 24, 27, 0.06) 1px, transparent 1px);
background-size: 26px 26px;
-webkit-mask-image: radial-gradient(ellipse 80% 66% at 50% 40%, #000 35%, transparent 100%);
mask-image: radial-gradient(ellipse 80% 66% at 50% 40%, #000 35%, transparent 100%);
pointer-events: none;
}
.pe-aura {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
/*
* Sections paint above the aura. Light sections carry no background of their
* own, so the glow reads through them; the deep bays keep their fill and simply
* cover it, which is what keeps their text legible.
*/
.pe > section,
.pe > footer {
position: relative;
z-index: 1;
}
.pe-aura__blob {
position: absolute;
top: 0;
left: 0;
width: 640px;
height: 640px;
margin: -320px 0 0 -320px;
border-radius: 50%;
background: radial-gradient(circle closest-side,
rgba(25, 85, 251, 0.22) 0%,
rgba(25, 85, 251, 0.1) 42%,
rgba(25, 85, 251, 0) 72%);
transform: translate3d(50vw, 46%, 0);
will-change: transform;
}
/* A second, slower body so the field still breathes when the pointer is idle. */
.pe-aura__blob--drift {
width: 520px;
height: 520px;
margin: -260px 0 0 -260px;
background: radial-gradient(circle closest-side,
rgba(4, 20, 71, 0.14) 0%,
rgba(4, 20, 71, 0.05) 45%,
rgba(4, 20, 71, 0) 72%);
animation: pe-drift 22s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes pe-drift {
from { transform: translate3d(32vw, 30%, 0) scale(1); }
to { transform: translate3d(66vw, 62%, 0) scale(1.16); }
}
@media (prefers-reduced-motion: reduce) {
.pe-aura__blob { transform: translate3d(50vw, 46%, 0) !important; }
.pe-aura__blob--drift { animation: none; }
}
/* ---------------------------------------- Rotator fits the narrow viewport */
@media (max-width: 620px) {
.pe-rotator { font-size: 0.82em; }
}
@media (max-width: 430px) {
.pe-rotator { font-size: 0.68em; }
.pe-hero__title { gap: 0.18em; }
}
/* The aura is sized for a desktop field; scale it to a phone. */
@media (max-width: 620px) {
.pe-aura__blob { width: 380px; height: 380px; margin: -190px 0 0 -190px; }
.pe-aura__blob--drift { width: 320px; height: 320px; margin: -160px 0 0 -160px; }
.pe-gallery { gap: 20px; }
.pe-tile__title { font-size: 15px; }
.pe-lightbox { padding: 14px; }
.pe-lightbox__close { top: 14px; right: 14px; }
}
/* ============================================================= Sub pages */
/*
* Shared treatment for the photography / videography / formation pages: a
* plain, centered hero (no rotating word) that still carries the badge shine
* and pointer aura, then the same .pe-services__index / .pe-bay / .pe-gallery
* components already defined above.
*/
.pe-page-hero {
padding-block: clamp(48px, 6vw, 88px) clamp(40px, 5vw, 64px);
}
.pe-page-hero__inner {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
/*
* Centered prose block, same mechanism as .pe-page-hero__inner above.
*
* The flex + align-items centering is what actually does the work here, not the
* text-align. Body copy like .pe-agency__body carries its own max-width with
* margin-inline: 0, so text-align alone centers the text INSIDE the box while
* leaving the box itself hugging the left edge of a much wider container: the
* section then still reads as left aligned even though it is "centered". Making
* the parent a centered flex column centers the box too.
*/
.pe-prose-center {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.pe-steps {
display: flex;
flex-direction: column;
gap: 1px;
background: var(--rule);
border: 1px solid var(--rule);
max-width: 760px;
}
.pe-step {
background: var(--bg);
padding: 22px 26px;
display: flex;
flex-direction: column;
gap: 6px;
}
.pe-step__name {
font-family: var(--display);
font-weight: 700;
text-transform: uppercase;
font-size: 17px;
color: var(--ink);
}
.pe-step__desc {
font-size: 14.5px;
line-height: 1.55;
color: var(--muted);
}
/*
* Real, uncropped reference screenshots (speed test results, dashboards).
* Deliberately outside the .pe-gallery tile system: those tiles force a fixed
* aspect ratio and crop to fill it, which mangles a screenshot whose own
* aspect ratio carries real information (a wide GTmetrix banner vs a
* near-square PageSpeed widget). Natural aspect ratio, contained, never
* cropped.
*/
.pe-results {
display: flex;
flex-direction: column;
gap: var(--sp-md);
}
.pe-results__wide img,
.pe-results__pair img {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--rule-inverse);
border-radius: var(--radius);
background: #FFFFFF;
}
.pe-results__pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-md);
}
.pe-results__caption {
margin-top: 10px;
font-size: 13px;
color: var(--muted-inverse);
text-align: center;
}
@media (max-width: 700px) {
.pe-results__pair {
grid-template-columns: 1fr;
}
}
/*
* External portfolio links: real past work, hosted on the client's own
* domain rather than a screenshot in our media library, so the card is a
* link out (new tab) rather than a lightbox trigger.
*/
.pe-portfolio {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--rule);
border: 1px solid var(--rule);
}
.pe-portfolio__item {
position: relative;
display: flex;
flex-direction: column;
background: var(--bg);
padding: 26px 26px 30px;
text-decoration: none;
color: inherit;
transition: background-color 220ms ease;
}
.pe-portfolio__item:hover,
.pe-portfolio__item:focus-visible {
background: var(--surface);
}
.pe-portfolio__name {
font-family: var(--display);
font-weight: 700;
text-transform: uppercase;
font-size: 18px;
line-height: 1.1;
color: var(--ink);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.pe-portfolio__mark {
color: var(--accent);
font-size: 15px;
transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pe-portfolio__item:hover .pe-portfolio__mark {
transform: translate(3px, -3px);
}
.pe-portfolio__desc {
font-size: 14px;
line-height: 1.55;
color: var(--muted);
}
@media (max-width: 1024px) {
.pe-portfolio { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.pe-portfolio { grid-template-columns: 1fr; }
}
/* Contact Form 7, restyled to match Port of Entry inside a .pe-form-card. */
.pe-form-card {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--radius);
padding: 34px 32px;
}
.pe-form-card .wpcf7-form label {
display: block;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--ink);
margin-bottom: 20px;
}
.pe-form-card .wpcf7-form input[type="text"],
.pe-form-card .wpcf7-form input[type="email"],
.pe-form-card .wpcf7-form input[type="tel"],
.pe-form-card .wpcf7-form select,
.pe-form-card .wpcf7-form textarea {
display: block;
width: 100%;
box-sizing: border-box;
margin-top: 8px;
padding: 13px 16px;
/*
* Astra's Customizer emits an inline `height: 40px` on every form control.
* With border-box plus 13px vertical padding and a 1px border that leaves a
* 12px content box, which is shorter than the 15px text: an lets the
* text overflow so it still looks fine, but a