/* ==========================================================================
Campaign hero — the default landing view of the homepage.
A single full-bleed photograph with the copy laid over it. The E-COMMERCE
hero (.hp-*) is the other view; both stay mounted and `html[data-home-view]`
decides which one is displayed.
All selectors are prefixed .cmp-* (or .view-toggle) so they cannot collide
with styles.css or hero-preview.css — same convention hero-preview.css
states for itself.
========================================================================== */
/* ── View switching ───────────────────────────────────────────────────────
`display: none` rather than `visibility: hidden` so the inactive hero is
out of the accessibility tree AND out of tab order. It also keeps
nav-theme.js correct for free: a display:none element reports an all-zero
getBoundingClientRect(), so its `r.bottom > 0` test fails and a hidden
[data-theme="light"] hero stops driving the sidebar colour.
The attribute is set by an inline script before first paint, so a
returning visitor never sees the wrong hero flash.
Campaign is the CSS default rather than an attribute-gated state, so a
visitor whose JavaScript never runs still gets one coherent hero instead of
both stacked. The attribute only ever has to override in one direction. */
.hp-root { display: none; }
html[data-home-view="ecommerce"] .hp-root { display: block; }
html[data-home-view="ecommerce"] .cmp-root { display: none; }
/* ── Root ────────────────────────────────────────────────────────────────── */
.cmp-root {
position: relative;
width: 100%;
height: 100vh;
height: 100svh; /* svh so the iOS URL bar doesn't crop the frame */
overflow: hidden;
background-color: #0d0d0d; /* shows while the photo decodes */
font-family: 'Inter', sans-serif;
color: #fff;
}
/* ── The photograph ──────────────────────────────────────────────────────── */
.cmp-media,
.cmp-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.cmp-media img {
object-fit: cover;
/* Anchor near the BOTTOM of the frame. The look-book sells the outfit, and
the shoes sit at the bottom edge of the 1920x1280 renders — at 42% a
1920x1030 window cropped them clean off (founder report, 2026-08-27).
85% keeps the shoes and the pavement while the cap still clears the top
at that viewport; the dead rows above the menu board absorb the crop.
Mobile is unaffected: the 900x1200 portrait crop overflows horizontally,
never vertically, so the Y value is inert there. */
object-position: center 85%;
display: block;
}
/* Scrim. A flat overlay either kills the photograph or leaves the CTA
unreadable, because the frame is dark at the bottom left and bright in the
shop window. Gradient up from the corner the copy occupies instead. */
.cmp-scrim {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.34) 42%, rgba(0, 0, 0, 0) 74%),
linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 58%);
pointer-events: none;
}
/* ── Overlay copy ────────────────────────────────────────────────────────── */
.cmp-overlay {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 0 48px 88px;
}
.cmp-eyebrow {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
margin: 0 0 18px;
}
.cmp-headline {
font-family: 'Archivo Black', sans-serif;
font-size: clamp(34px, 5.4vw, 76px);
line-height: 0.98;
letter-spacing: -0.02em;
text-transform: uppercase;
margin: 0 0 20px;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
/* Wide enough that the copy breaks only at its own , not mid-phrase.
The measure is set per-element rather than on .cmp-overlay so the body
copy can keep a readable 42ch while the display type runs long. */
max-width: 20ch;
}
.cmp-sub {
font-size: clamp(15px, 1.15vw, 18px);
line-height: 1.55;
color: rgba(255, 255, 255, 0.86);
margin: 0 0 30px;
max-width: 42ch;
}
.cmp-cta {
display: inline-flex;
align-items: center;
gap: 10px;
align-self: flex-start;
padding: 15px 28px;
border-radius: 9999px;
background: #fff;
color: #0d0d0d;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
transition: background 0.25s ease, transform 0.25s ease;
}
.cmp-cta:hover { background: rgba(255, 255, 255, 0.86); transform: translateY(-1px); }
.cmp-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* ── Hero wrapper ─────────────────────────────────────────────────────────
Positioning context for the view toggle only. Deliberately NO overflow,
transform, filter or z-index: the e-commerce hero's mobile bleed
(margin-bottom:-50px into the stats strip) needs an unclipped ancestor, and
its fixed video modal must not gain a transformed containing block. */
.home-hero { position: relative; }
/* ── CAMPAIGN | E-COMMERCE toggle ─────────────────────────────────────────
Absolute inside .home-hero, not fixed — it belongs to the hero and scrolls
away with it instead of floating over pricing and the footer. Top-centre on
desktop: the logo owns the top left (.hp-header), the burger + socials own
the top right (.social-sidebar). z-index below the sidebar (200) and far
below #fullscreenMenu (500). */
.view-toggle {
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 190;
display: flex;
gap: 4px;
padding: 4px;
border-radius: 9999px;
background: rgba(20, 20, 20, 0.42);
border: 1px solid rgba(255, 255, 255, 0.16);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.view-toggle-btn {
appearance: none;
border: 0;
cursor: pointer;
padding: 9px 20px;
border-radius: 9999px;
background: transparent;
color: rgba(255, 255, 255, 0.68);
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
white-space: nowrap; /* "E-COMMERCE" must not break inside the pill */
transition: background 0.25s ease, color 0.25s ease;
}
.view-toggle-btn:hover { color: #fff; }
.view-toggle-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.view-toggle-btn[aria-pressed="true"] { background: #fff; color: #0d0d0d; }
/* On the e-commerce view the page behind the toggle is a light cream hero, so
the dark glass pill has to invert or it reads as a smudge. Driven by the
same root attribute rather than a scroll listener — the hero below is always
light, so there is nothing to detect. */
html[data-home-view="ecommerce"] .view-toggle {
background: rgba(255, 255, 255, 0.62);
border-color: rgba(0, 0, 0, 0.10);
}
html[data-home-view="ecommerce"] .view-toggle-btn { color: rgba(0, 0, 0, 0.55); }
html[data-home-view="ecommerce"] .view-toggle-btn:hover { color: #0d0d0d; }
html[data-home-view="ecommerce"] .view-toggle-btn[aria-pressed="true"] { background: #0d0d0d; color: #fff; }
/* ── Look-book rail ──────────────────────────────────────────────────────
5 slots x 2 garment swatches, bottom-right over the photo — the overlay
copy owns the bottom-left. Clicking a swatch swaps the hero to the
pre-rendered combination (lookbook.js). */
.cmp-rail {
position: absolute;
right: 40px;
bottom: 72px;
z-index: 2;
padding: 14px 16px;
border-radius: 16px;
background: rgba(15, 15, 15, 0.46);
border: 1px solid rgba(255, 255, 255, 0.14);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
/* A