/* =============================================================================
FADEHAUS — site.css (site-wide design system, ported from the founder-approved
Fortix-style landing: docs/design/fortix-landing-3835/index.html)
ONE stylesheet for every page under apps/web. Link with an ABSOLUTE path so
nested pages resolve it:
Sections:
1. Font (self-hosted Maven Pro — NEVER Google Fonts; CSP blocks it anyway)
2. Tokens (:root custom properties)
3. Base / reset / a11y (skip link, focus, reduced motion)
4. Wordmark
5. Nav
6. Buttons & CTAs (store badge, ghost, barber CTA)
7. Hero (kicker, headline chips, watermark, phone stage)
8. Phone frame + app-screen internals (device recreations)
9. Section scaffolding & headers (rhythm, eyebrow, statement)
10. Reveal-on-scroll
11. Feature grid + ElectricBorder
12. Deep dives (two-col) + gradient wash panels
13. For-barbers dark block + stacked gradient cards
14. Download CTA panel
15. Footer + watermark
16. Placeholders (photography slots, #3818)
17. Prose (legal / long-form pages — layout only, never the words)
18. Consent-banner token bridge
Design DNA (Fortix bones, Fadehaus skin):
- warm-white canvas, never clinical; brand charcoal ink
- Maven Pro display type, tight negative tracking (-4% on headings)
- #FE6C1A orange leads; magenta/red/purple only inside gradients
- one centered 800px content column; sections are pt-240 with NO bottom
padding — the next section's own top padding is the entire gap
============================================================================= */
/* ---------------------------------------------------------------------------
1. FONT — self-hosted Maven Pro variable font (preload it in )
--------------------------------------------------------------------------- */
@font-face{
font-family:"Maven Pro";
/* Latin-subset variable WOFF2 (17KB) with the full TTF as fallback. */
src:url("/fonts/MavenPro.woff2") format("woff2-variations"),
url("/fonts/MavenPro.ttf") format("truetype-variations");
font-weight:400 900;
font-display:swap;
}
/* ---------------------------------------------------------------------------
2. TOKENS
--------------------------------------------------------------------------- */
:root{
/* canvas + ink (light, warm) */
--bg: #FBF9F6; /* warm white, never clinical */
--bg-dim: #F4F0EA;
--ink: #171613; /* brand charcoal */
--ink-dim: #6E675D;
/* --ink-faint is a TEXT token (hints, labels, placeholders, fine print), so it
must clear WCAG AA 4.5:1 on --bg / --bg-dim / white. #98907F was 3.01:1 and
failed; #706A5C is 5.12:1 on --bg and 4.74:1 on --bg-dim. Use --ink-decor
for non-text ornament (hairlines, bullets) where contrast does not apply. */
--ink-faint: #706A5C;
--ink-decor: #98907F;
--line: #E8E2D8;
/* brand + gradient support colors */
--orange: #FE6C1A; /* the brand orange, exact */
--orange-deep: #E4520A;
/* --orange / --orange-deep are FILL + ORNAMENT tokens: correct for backgrounds,
rules, icons, gradients and for text on the dark (--app-bg / --ink) grounds.
They are NOT usable as text on the light canvas — #FE6C1A on --bg is 2.71:1
and on #fff is 2.85:1, both under WCAG AA 4.5:1. Same rule as --ink-faint
vs --ink-decor above. For orange TEXT or LINKS on --bg / --bg-dim / white,
use --orange-text (5.1:1 on --bg, 5.3:1 on #fff) and --orange-text-strong
(7.4:1) for its hover. Both stay in the brand's burnt-orange family.
Labels sitting ON an orange fill use --ink (6.3:1 on --orange, 4.8:1 on
--orange-deep); #fff on --orange is only 2.85:1. Dark-ink-on-orange is
already the approved pattern inside the app screens (.pill.on, .slot.on). */
--orange-text: #B54A05;
--orange-text-strong: #8E3703;
--magenta: #F5308C; /* supporting warm accents (gradients only) */
--red: #F03D1F;
--purple: #5B2EE5;
--cream: #F2EDE6; /* app-screen light ink / on-dark text */
/* app screen (dark charcoal UI, matches the real app tokens) */
--app-bg: #0E0C0A;
--app-raise: #16130F;
--app-card: #1A1712;
--app-line: #2A251E;
--app-ink: #F2EDE6;
--app-dim: #A89F92;
/* type */
--display: "Maven Pro", "Avenir Next", "Futura", system-ui, sans-serif;
--font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* shape + elevation */
--radius: 20px;
--radius-block: 32px; /* big panels: dd-visual, barbers, dl-panel */
--radius-card: 24px; /* feature cards */
--shadow-soft: 0 30px 80px -20px rgba(23,22,19,.18);
--shadow-device: 0 40px 50px rgba(0,0,0,.2);
--shadow-device-sm: 0 4px 20px rgba(0,0,0,.2);
/* section rhythm: Fortix pt-240 scaled down responsively */
--sec-pad: clamp(120px, 16.6vw, 240px);
/* subpage headers: ONE top padding + ONE H1 scale for every non-hero page
(.page-head, .legal-head, .kit-head, standalone .prose). The hero H1
clamp(44px,7.4vw,80px) stays exclusive to / and /for-barbers. */
--pad-head: clamp(72px, 9vw, 120px);
--h1-sub: clamp(40px, 6vw, 64px);
/* consent-banner bridge (css/consent.css reads these; see §18) */
--bg-card: #FFFFFF;
--bg-raise: var(--bg-dim);
}
/* ---------------------------------------------------------------------------
3. BASE / RESET / A11Y
--------------------------------------------------------------------------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:clip; }
[id]{ scroll-margin-top:84px; } /* clear the 72px sticky nav on anchor jumps */
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
*, *::before, *::after{ animation:none !important; transition:none !important; }
.reveal{ opacity:1 !important; transform:none !important; }
}
body{
background:var(--bg);
color:var(--ink);
font-family:var(--font);
font-size:17px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:clip;
}
::selection{ background:var(--orange); color:var(--ink); }
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
outline:2px solid var(--orange); outline-offset:3px; border-radius:6px;
}
img, svg{ max-width:100%; }
/* skip link: visually hidden until keyboard focus lands on it */
.skip-link{
position:absolute; left:-9999px; top:0; z-index:100;
background:var(--orange); color:var(--ink);
padding:10px 18px; border-radius:0 0 8px 0;
font-weight:600; font-size:14px;
}
.skip-link:focus{ left:0; }
/* Fortix layout: ONE centered 800px content column (max-w 800 + 24px gutters) */
.wrap{ max-width:848px; margin:0 auto; padding:0 24px; }
/* wider variant for full-bleed-ish rows (footer, barbers) when needed */
.wrap-wide{ max-width:1180px; margin:0 auto; padding:0 24px; }
/* ---------------------------------------------------------------------------
4. WORDMARK (Maven Pro 600, .14em tracking, orange square stop)
The square IS the period — a drawn rect, never a round glyph.
--------------------------------------------------------------------------- */
.wordmark{
font-family:var(--display);
font-weight:600;
letter-spacing:.14em;
text-transform:uppercase;
font-size:17px;
color:var(--ink);
white-space:nowrap;
}
/* Geometry is NOT hand-picked — it is read straight off the official asset,
brand/assets/fadehaus-wordmark-{light,dark}.svg:
font-size:100 letter-spacing:.14em
so the square is 16/100 = .16em, and its top/bottom (124..140) sit ON the
baseline (140). Measured in Chrome, "FADEHAUS" set at 100px/.14em ends its
advance at x=650.9, i.e. exactly .14em before the rect — which is the ONE
trailing letter-space the .14em tracking above already emits after the S.
So the correct gap is no gap at all: margin-left MUST be 0, or the square
drifts right by however much you add. */
.wordmark .sq{
display:inline-block;
width:.16em; height:.16em;
margin-left:0;
background:var(--orange);
vertical-align:baseline;
}
.wordmark.on-dark{ color:var(--cream); }
/* ---------------------------------------------------------------------------
5. NAV (wordmark hard left, every link + the CTA hard right; sticky, blur,
shadow on scroll — .scrolled is toggled by /js/site.js)
--------------------------------------------------------------------------- */
.nav{
position:sticky; top:0; z-index:60;
/* Over the hero the bar is invisible: no fill, no blur. The glass only
appears once you have scrolled (.scrolled), so the top of the page reads
as one uninterrupted canvas. */
background:transparent;
backdrop-filter:none;
-webkit-backdrop-filter:none;
will-change:transform;
transition:transform .28s ease, background-color .25s ease, box-shadow .25s ease,
backdrop-filter .25s ease, -webkit-backdrop-filter .25s ease;
}
/* scrolled = translucent blurred glass + a hairline. The hairline is a
box-shadow, never a border, so appearing/disappearing costs 0px of layout. */
.nav.scrolled{
background:rgba(251,249,246,.72);
backdrop-filter:blur(18px) saturate(140%);
-webkit-backdrop-filter:blur(18px) saturate(140%);
box-shadow:0 1px 0 var(--line), 0 12px 30px -18px rgba(23,22,19,.15);
}
/* Past the hero the bar slides away and comes straight back on any upward
scroll (.nav-hidden is toggled by /js/site.js). visibility:hidden is what
takes the links out of the keyboard tab order while the bar is off-screen;
it is delayed by the length of the slide so the transform still animates. */
.nav.nav-hidden{
transform:translateY(-100%);
visibility:hidden;
transition:transform .28s ease, visibility 0s linear .28s;
}
@media (prefers-reduced-motion: reduce){
/* no slide at all — the header simply stays put and stays reachable */
.nav{ transition:none; }
.nav.nav-hidden{ transform:none; visibility:visible; transition:none; }
}
.nav-inner{
display:flex; align-items:center; justify-content:space-between;
height:72px; column-gap:52px;
}
/* The nav mark reads as the site's logo, so it runs 20% larger than the base
.wordmark (17px) used in the footer and body copy. Scoped to .nav-inner so
every other wordmark keeps its size. (Still used by /pricing/, which has not
been moved to the SVG mark yet.) */
.nav-inner .wordmark{ font-size:20.4px; }
/* The nav logo is the OFFICIAL asset, not a CSS recreation, so it can never
drift from brand/assets/fadehaus-wordmark-light.svg again.
Sizing: the asset sets font-size:100 inside a 200-unit-tall viewBox, so the
rendered height is exactly 2x the type size. --wm-h:41px therefore reproduces
the 20.4px nav type it replaces.
The asset also carries its own padding (text starts at x=40, the square ends
at x=681 of 730). Those are cancelled below as a fraction of the height —
40/200 = .2 on the left, 49/200 = .245 on the right — so what the flex row
lays out is the INK box, and the mark lands on the same left edge as the
.wrap gutter (and centres honestly when the phone nav centres). */
.wordmark-link{ display:flex; align-items:center; flex:none; }
.wordmark-link img{
--wm-h:41px;
display:block;
height:var(--wm-h); width:auto;
margin-left:calc(var(--wm-h) * -0.2);
margin-right:calc(var(--wm-h) * -0.245);
}
.nav-links{ display:flex; gap:24px; align-items:center; }
.nav-links a{
font-size:16px; font-weight:600; letter-spacing:-.02em;
color:rgba(23,22,19,.65);
padding:4px 0;
transition:color .15s ease;
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a.nav-cta{ color:var(--orange-text); }
.nav-links a.nav-cta:hover{ color:var(--orange-text-strong); }
/* Phones: no hamburger — the links wrap into centered rows under the wordmark
so every destination (incl. the "Get the app" CTA) stays reachable. The
wordmark is already first in source order, so wrapping alone stacks it on
top; nothing needs reordering. */
@media (max-width:760px){
.nav-inner{
flex-wrap:wrap; justify-content:center; column-gap:0;
height:auto; row-gap:8px; padding-top:12px; padding-bottom:12px;
}
/* flex-basis:100% drops the link group onto its own row under the wordmark
(otherwise at ~760px both fit on one line and collide). min-width:0 is
load-bearing too: a flex item defaults to min-width:auto, so without it the
link row refuses to shrink below its max-content width and spills off the
right edge instead of wrapping. */
.nav-links{
flex:1 0 100%; min-width:0;
flex-wrap:wrap; justify-content:center; gap:8px 20px;
}
.nav-links a{ font-size:15px; padding:6px 0; }
.wordmark-link img{ --wm-h:36px; }
}
/* ---------------------------------------------------------------------------
6. BUTTONS & CTAs
--------------------------------------------------------------------------- */
/* App Store badge — 180×60-ish dark pill (placeholder until an ASC app exists) */
.store-badge{
display:inline-flex; align-items:center; gap:11px;
background:var(--ink); color:#fff;
height:60px;
border-radius:12px; padding:0 20px 0 16px;
text-align:left; line-height:1.15;
transition:transform .18s ease, box-shadow .18s ease;
box-shadow:0 10px 26px -12px rgba(23,22,19,.5);
}
.store-badge:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(23,22,19,.55); }
.store-badge svg{ width:26px; height:26px; flex:none; }
.store-badge .small{ display:block; font-size:10.5px; letter-spacing:.04em; opacity:.75; }
.store-badge .big{ display:block; font-size:17px; font-weight:600; font-family:var(--display); }
/* outlined secondary CTA; fills orange on hover */
.ghost-cta{
display:inline-flex; align-items:center; gap:8px;
font-weight:600; font-size:16px; letter-spacing:-.02em;
color:var(--ink);
border:1.5px solid var(--ink);
height:60px; padding:0 22px; border-radius:12px;
transition:background .18s ease, color .18s ease, transform .18s ease;
}
.ghost-cta:hover{ background:var(--orange); border-color:var(--orange); color:var(--ink); transform:translateY(-2px); }
/* cream pill CTA used on dark panels */
.barber-cta{
display:inline-flex; align-items:center; gap:9px;
margin-top:34px;
font-weight:600; font-size:15.5px;
color:var(--ink); background:var(--cream);
padding:13px 24px; border-radius:14px;
transition:background .18s ease, transform .18s ease, color .18s ease;
}
.barber-cta:hover{ background:var(--orange); color:var(--ink); transform:translateY(-2px); }
/* ---------------------------------------------------------------------------
7. HERO
--------------------------------------------------------------------------- */
.hero{
position:relative;
text-align:center;
padding:96px 0 0; /* Fortix hero pt-168 minus the 72px menu bar */
overflow:hidden;
}
/* faint oversized wordmark watermark behind the hero visuals — anchored TOP
LEFT, bleeding off the left edge and the top of the hero. It stays inert:
pointer-events:none + user-select:none + aria-hidden on the element. */
.hero-watermark{
position:absolute; left:0; top:0;
transform:translateY(-.12em);
font-family:var(--display); font-weight:800;
letter-spacing:.06em; text-transform:uppercase;
font-size:clamp(120px, 22vw, 320px);
line-height:1; color:var(--ink);
opacity:.035; user-select:none; pointer-events:none;
white-space:nowrap;
}
.hero-kicker{
display:inline-flex; align-items:center; gap:8px;
font-size:13px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
color:var(--orange-text);
background:rgba(254,108,26,.09);
border:1px solid rgba(254,108,26,.22);
padding:7px 16px; border-radius:999px;
margin-bottom:32px;
}
/* H1: Maven Pro 700, 80 / 0.96 / -4% */
.hero h1{
font-family:var(--display);
font-weight:700;
font-size:clamp(44px, 7.4vw, 80px);
line-height:.96;
letter-spacing:-.04em;
max-width:720px;
margin:0 auto;
}
/* Subpage H1 — the single treatment shared by every non-hero page header.
Do not add a per-page H1 scale; use .page-head (centered), .page-head-doc
(left), .legal-head, .kit-head, or a standalone .prose. */
.page-head h1,
.legal-head h1,
.kit-head h1,
.prose h1{
font-family:var(--display);
font-weight:700;
font-size:var(--h1-sub);
line-height:.98;
letter-spacing:-.04em;
}
/* Fortix signature: gradient icon chips inline with the headline (em-scaled) */
.chip{
display:inline-flex; align-items:center; justify-content:center;
width:.9em; height:.9em;
border-radius:.3em;
border:.0125em solid rgba(255,255,255,.8);
vertical-align:-.14em;
margin:0 .05em;
box-shadow:0 .025em .05em rgba(0,0,0,.2);
}
.chip svg{ width:58%; height:58%; }
.chip-orange{ background:linear-gradient(225deg,#FF9552 0%,var(--orange-deep) 100%); }
.chip-magenta{ background:linear-gradient(225deg,#FF74B4 0%,#D11268 100%); }
.chip-charcoal{ background:linear-gradient(225deg,#4A463E 0%,#000 100%); }
.chip-purple{ background:linear-gradient(225deg,#8B68FF 0%,#4520C0 100%); }
/* Body L subhead: 24 / 1.24 / -2%, dim ink, 640 max, 24px under the H1 */
.hero p.sub{
color:var(--ink-dim);
font-size:clamp(18px, 2.4vw, 24px);
line-height:1.24;
letter-spacing:-.02em;
max-width:640px;
margin:24px auto 0;
}
.hero-actions{
display:flex; gap:8px; justify-content:center; align-items:center;
flex-wrap:wrap; margin-top:32px;
}
/* SPLIT HERO (home page only) — copy on the left, one real app screenshot on
the right. The centered .hero defaults above still serve /for-barbers and
/about, so every override here is scoped to .hero-split / .hero-grid. */
/* the bottom padding is the watermark's band — it is what keeps the whole word
clear of the CTA row instead of running under it */
.hero-split{ padding-bottom:clamp(48px, 9vw, 130px); }
/* The hero rides the SAME .wrap column as the nav and every other section, so
the kicker, headline, lede and CTA row all start on the wordmark's left edge
and the device stops at the nav's right edge. Nothing here bleeds wider. */
.hero-grid{
display:grid;
grid-template-columns:minmax(0, 1fr) clamp(210px, 30vw, 340px);
gap:clamp(20px, 2.4vw, 34px);
align-items:center;
text-align:left;
}
/* hierarchy: one loud headline, one quiet supporting line, one action column.
The lede steps down to body scale here so it reads as support rather than a
second block of display type competing with the H1. */
.hero-copy h1{
margin:0;
max-width:13ch;
font-size:clamp(34px, 3.2vw, 45px);
}
.hero-copy p.sub{
margin:18px 0 0;
max-width:40ch;
font-size:clamp(16px, 1.2vw, 17.5px);
line-height:1.45;
}
/* the two CTAs stack into one column of matched width, primary on top */
.hero-copy .hero-actions{
flex-direction:column;
align-items:stretch;
gap:10px;
width:100%;
max-width:266px;
margin-top:28px;
}
.hero-copy .hero-actions .ghost-cta,
.hero-copy .hero-actions .store-badge{ justify-content:center; }
/* The device shot is a real capture on a transparent canvas with NO shadow
baked in — a baked shadow assumes one background colour and reads as a cool
grey halo on our warm canvas. The elevation is applied here instead, as a
drop-shadow (box-shadow would draw a rectangle around the rounded corners)
in two soft layers tinted with --ink, so it stays in the warm charcoal family
that --shadow-soft / --shadow-device already use. The rgba() line is the
fallback for engines without color-mix(); both are the same colour. */
.hero-shot{ display:flex; justify-content:center; }
.hero-shot img{
display:block;
width:100%;
height:auto;
/* #4123: explicit ratio (matches the 900x1877 intrinsic size) so the space
is reserved before the image decodes — Lighthouse traced the live site's
CLS 0.105 to this exact element shifting #about down on arrival. */
aspect-ratio:900 / 1877;
filter:
drop-shadow(0 14px 18px rgba(23,22,19,.13))
drop-shadow(0 40px 52px rgba(23,22,19,.10));
filter:
drop-shadow(0 14px 18px color-mix(in srgb, var(--ink) 13%, transparent))
drop-shadow(0 40px 52px color-mix(in srgb, var(--ink) 10%, transparent));
}
/* The watermark is anchored top left (#4089) and bleeds off the left edge and
the top of the hero. It is wider than the viewport by design, so it runs off
the right too — that reads as a deliberate bleed rather than a word that ran
out of room. Only the size differs from the centred-hero default. */
.hero-split .hero-watermark{
top:0; bottom:auto; left:0;
transform:translateY(-.12em);
font-size:clamp(88px, 13vw, 196px);
}
@media (max-width:900px){
.hero-grid{ grid-template-columns:minmax(0,1fr); gap:44px; text-align:center; }
.hero-copy h1{ max-width:none; }
.hero-copy p.sub{ margin:20px auto 0; }
.hero-copy .hero-actions{ margin-left:auto; margin-right:auto; }
.hero-shot img{ max-width:min(82vw, 330px); }
}
/* hero phones — straight (no rotation), top-anchored, 560px clip, second phone
dropped 32px, 200px fade to canvas at the bottom */
.hero-stage{
position:relative;
margin-top:96px;
height:clamp(420px, 56vw, 560px);
overflow:hidden;
}
.hero-stage::after{
content:"";
position:absolute; left:0; right:0; bottom:0;
height:200px;
background:linear-gradient(to bottom, rgba(251,249,246,0), var(--bg));
pointer-events:none;
z-index:3;
}
.hero-phones{
position:absolute; left:50%; top:0;
transform:translateX(-50%);
display:flex; align-items:flex-start; gap:clamp(18px,4vw,58px);
}
.hero-phones .phone{ box-shadow:var(--shadow-device); }
.hero-phones .phone:nth-child(2){ transform:translateY(32px); }
@media (max-width:640px){
.hero-phones .phone:nth-child(2){ display:none; }
.hero-stage{ height:clamp(430px, 118vw, 560px); }
}
/* ---------------------------------------------------------------------------
8. PHONE FRAME + APP-SCREEN INTERNALS (CSS device recreations)
--------------------------------------------------------------------------- */
.phone{
width:clamp(240px, 30vw, 295px);
aspect-ratio:310/632;
border-radius:clamp(38px, 5vw, 50px);
background:linear-gradient(150deg,#DDD9D2,#8F8B84 30%,#C9C5BE 55%,#787069 85%);
padding:4px;
box-shadow:var(--shadow-soft), 0 2px 6px rgba(23,22,19,.25);
flex:none;
}
.phone-inner{
position:relative;
width:100%; height:100%;
border-radius:inherit;
background:#000;
padding:8px;
}
.screen{
position:relative;
width:100%; height:100%;
border-radius:calc(clamp(38px,5vw,50px) - 11px);
background:var(--app-bg);
color:var(--app-ink);
overflow:hidden;
font-size:clamp(10.5px, 1.32vw, 13px);
line-height:1.45;
display:flex; flex-direction:column;
}
@media (max-width:640px){ .screen{ font-size:12px; } }
/* dynamic island + status bar */
.statusbar{
display:flex; align-items:center; justify-content:space-between;
padding:10px 18px 4px;
font-size:.86em; font-weight:600;
flex:none;
}
.island{
position:absolute; left:50%; top:10px;
transform:translateX(-50%);
width:34%; height:5.2%;
max-height:26px;
background:#000; border-radius:999px;
z-index:5;
}
.sb-icons{ display:flex; gap:4px; align-items:center; opacity:.9; }
.sb-icons svg{ width:1.1em; height:1.1em; }
/* app screen internals (shared) */
.app-pad{ padding:10px 14px 0; flex:1; display:flex; flex-direction:column; min-height:0; }
.app-h{
font-family:var(--display); font-weight:600;
font-size:1.5em; letter-spacing:-.01em;
margin:6px 0 2px;
}
.app-sub{ color:var(--app-dim); font-size:.92em; }
.pillrow{ display:flex; gap:6px; margin:10px 0 4px; flex-wrap:nowrap; overflow:hidden; }
.pill{
flex:none; font-size:.82em; font-weight:600;
color:var(--app-dim);
background:var(--app-raise);
border:1px solid var(--app-line);
border-radius:999px; padding:4px 10px;
}
.pill.on{ color:#0E0C0A; background:var(--orange); border-color:var(--orange); }
.card{
background:var(--app-card);
border:1px solid var(--app-line);
border-radius:14px;
padding:10px 12px;
margin-top:8px;
}
.rowline{ display:flex; align-items:center; gap:9px; }
.avatar{
flex:none;
width:2.7em; height:2.7em; border-radius:10px;
display:flex; align-items:center; justify-content:center;
font-family:var(--display); font-weight:700; font-size:.95em;
color:#fff;
}
.av-a{ background:linear-gradient(150deg,#FF9552,var(--orange-deep)); }
.av-b{ background:linear-gradient(150deg,#FF74B4,#C4136A); }
.av-c{ background:linear-gradient(150deg,#8B68FF,#4520C0); }
.av-d{ background:linear-gradient(150deg,#4A463E,#171613); color:var(--orange); }
.shop-name{ font-weight:600; font-size:.98em; }
.shop-meta{ color:var(--app-dim); font-size:.82em; }
.shop-meta .star{ color:var(--orange); }
.open-dot{
margin-left:auto; flex:none;
font-size:.72em; font-weight:700; letter-spacing:.02em;
color:#3FCB7E;
background:rgba(63,203,126,.12);
border-radius:999px; padding:3px 8px;
white-space:nowrap;
}
.wait-dot{ color:var(--app-dim); background:var(--app-raise); }
.tabbar{
flex:none;
display:flex; justify-content:space-around; align-items:center;
padding:8px 10px calc(8px + 0.6em);
border-top:1px solid var(--app-line);
background:rgba(22,19,15,.85);
font-size:.7em; font-weight:600; color:var(--app-dim);
}
.tabbar .tab{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.tabbar .tab svg{ width:1.9em; height:1.9em; }
.tabbar .tab.on{ color:var(--orange); }
.homebar{
position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
width:36%; height:4px; border-radius:999px;
background:rgba(242,237,230,.4);
}
/* booking confirm screen bits */
.sum-row{
display:flex; justify-content:space-between; align-items:baseline;
padding:7px 0; font-size:.94em;
border-bottom:1px solid var(--app-line);
}
.sum-row:last-child{ border-bottom:0; }
.sum-row .k{ color:var(--app-dim); }
.sum-row .v{ font-weight:600; }
.total-row{ font-family:var(--display); font-size:1.12em; }
.confirm-btn{
margin-top:auto; margin-bottom:12px;
background:var(--orange); color:#0E0C0A;
font-family:var(--display); font-weight:700; font-size:1.05em;
text-align:center; border-radius:999px;
padding:12px;
}
.slotgrid{ display:flex; gap:6px; margin-top:8px; }
.slot{
flex:1; text-align:center;
font-size:.82em; font-weight:600;
border:1px solid var(--app-line); border-radius:10px;
padding:6px 2px; color:var(--app-dim);
}
.slot.on{ background:var(--orange); border-color:var(--orange); color:#0E0C0A; }
/* Fade chat screen bits */
.bubble{
max-width:82%;
border-radius:16px;
padding:8px 12px;
margin-top:9px;
font-size:.95em;
}
.bubble.user{
margin-left:auto;
background:var(--orange); color:#0E0C0A;
border-bottom-right-radius:5px;
font-weight:500;
}
.bubble.fade{
background:var(--app-card);
border:1px solid var(--app-line);
border-bottom-left-radius:5px;
}
.fade-tag{
display:flex; align-items:center; gap:6px;
margin-top:14px;
font-size:.78em; font-weight:700; letter-spacing:.08em;
color:var(--app-dim); text-transform:uppercase;
}
.fade-tag .fmark{
width:1.7em; height:1.7em; border-radius:7px;
background:linear-gradient(150deg,#FF9552,var(--orange-deep));
display:flex; align-items:center; justify-content:center;
}
.fade-tag .fmark svg{ width:62%; height:62%; }
.chat-book{
margin-top:9px;
border:1px solid rgba(254,108,26,.4);
background:rgba(254,108,26,.08);
border-radius:13px; padding:9px 11px;
font-size:.9em;
}
.chat-book b{ font-family:var(--display); }
.chat-input{
margin-top:auto; margin-bottom:12px;
display:flex; align-items:center; gap:8px;
background:var(--app-raise);
border:1px solid var(--app-line);
border-radius:999px;
padding:9px 14px;
color:var(--app-dim); font-size:.9em;
}
.chat-input .send{
margin-left:auto; flex:none;
width:2em; height:2em; border-radius:50%;
background:var(--orange);
display:flex; align-items:center; justify-content:center;
}
.chat-input .send svg{ width:55%; height:55%; }
/* ---------------------------------------------------------------------------
9. SECTION SCAFFOLDING & HEADERS
Fortix rhythm: every section is pt-240 with NO bottom padding — the next
section's own top padding is the entire gap.
--------------------------------------------------------------------------- */
section{ position:relative; }
.sec{ padding:var(--sec-pad) 0 0; }
/* consecutive sibling blocks inside one topic sit closer (Fortix gap-80) */
.sec-tight{ padding-top:80px; }
.sec-head{ text-align:center; max-width:720px; margin:0 auto 48px; }
.eyebrow{
display:inline-block;
font-size:12.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
color:var(--orange-text);
margin-bottom:16px;
}
/* H2: 48 / 1.04 / -4% */
.sec-head h2, .barber-head h2, .h2{
font-family:var(--display);
font-weight:700;
font-size:clamp(32px, 4.4vw, 48px);
line-height:1.04;
letter-spacing:-.04em;
}
.sec-head p{
color:var(--ink-dim);
font-size:clamp(17px,2.2vw,24px);
line-height:1.24; letter-spacing:-.02em;
margin-top:16px;
}
/* statement (Fortix "About": two-tone giant paragraph) — dim base with
full-ink highlights, ends on the orange square */
.statement{ max-width:720px; }
.statement p{
font-family:var(--display);
font-weight:700;
font-size:clamp(28px, 4.4vw, 48px);
line-height:1.04;
letter-spacing:-.04em;
color:var(--ink-faint);
}
.statement p + p{ margin-top:40px; }
.statement b{ font-weight:700; color:var(--ink); }
.statement .sq{
display:inline-block; width:.16em; height:.16em;
margin-left:.06em;
background:var(--orange);
}
/* ---------------------------------------------------------------------------
10. REVEAL-ON-SCROLL (js/site.js toggles .in; reduced-motion forces visible)
--------------------------------------------------------------------------- */
/* Content is VISIBLE by default. The hidden start state now requires BOTH the
`js` class (head script on ) AND a `will-reveal` class that js/site.js
adds only to elements sitting BELOW the initial viewport (#4123). So:
- JS disabled/blocked/failed -> everything visible, no blank canvas;
- above-the-fold content -> visible on first paint, never animated
(the old `html.js .reveal{opacity:0}` hid it until the observer fired,
which read as an entry loading animation);
- below-the-fold content -> still gets the reveal-on-scroll. */
.reveal{
transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);
}
html.js .reveal.will-reveal{ opacity:0; transform:translateY(26px); }
html.js .reveal.in{ opacity:1; transform:none; }
/* ---------------------------------------------------------------------------
11. FEATURE GRID (Fortix Highlight Blocks: radius 24, padding 24, gap 24)
--------------------------------------------------------------------------- */
.grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:24px;
}
@media (max-width:960px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grid{ grid-template-columns:1fr; } }
.grid-2{ grid-template-columns:repeat(2, 1fr); }
@media (max-width:600px){ .grid-2{ grid-template-columns:1fr; } }
.feature{
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius-card);
padding:24px 24px 20px;
transition:transform .25s ease, box-shadow .25s ease;
}
.feature:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.f-chip{
width:46px; height:46px; border-radius:14px;
border:1px solid rgba(255,255,255,.8);
display:flex; align-items:center; justify-content:center;
margin-bottom:18px;
box-shadow:0 2px 4px rgba(0,0,0,.2);
}
.f-chip svg{ width:24px; height:24px; }
.feature h3{
font-family:var(--display); font-weight:700;
font-size:20px; letter-spacing:-.02em; margin-bottom:8px;
}
.feature p{ color:var(--ink-dim); font-size:16px; line-height:1.4; letter-spacing:-.01em; }
/* ---------- ElectricBorder (React Bits, founder-approved #3837) ----------
Markup contract (js/site.js inits [data-electric-border]):
…card content…
*/
.electric-border {
--electric-border-color: #FE6C1A;
--electric-light-color: #FFA66B; /* fallback for browsers without oklch(from …) */
--electric-light-color: oklch(from var(--electric-border-color) l c h);
position: relative;
border-radius: 16px;
overflow: visible;
isolation: isolate;
}
/* clips the oversized canvas (card + 120px) to card + 48px so the halo can
never widen the page; visible strokes sit within ~4px of the border. */
.eb-clip {
position: absolute;
inset: -24px;
overflow: clip;
pointer-events: none;
z-index: 2;
}
.eb-canvas-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.eb-canvas { display: block; }
.eb-content {
position: relative;
border-radius: inherit;
z-index: 1;
}
.eb-layers {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 0;
}
.eb-glow-1,
.eb-glow-2,
.eb-background-glow {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-sizing: border-box;
}
.eb-glow-1 {
border: 2px solid oklch(from var(--electric-border-color) l c h / 0.6);
filter: blur(1px);
}
.eb-glow-2 {
border: 2px solid var(--electric-light-color);
filter: blur(4px);
}
.eb-background-glow {
z-index: -1;
transform: scale(1.1);
filter: blur(32px);
opacity: 0.3;
background: linear-gradient(-30deg, var(--electric-light-color), transparent, var(--electric-border-color));
}
@supports not (color: oklch(from red l c h)) {
.eb-glow-1 { border-color: rgba(254,108,26,.6); }
}
/* the electric card itself drops the hairline border; the glow IS the border */
.electric-border .feature{ border:0; border-radius:inherit; height:100%; }
/* ---------------------------------------------------------------------------
12. DEEP DIVES (Fortix Experience Blocks) + GRADIENT WASH PANELS
Two equal columns, gap 16; text column carries a 32px inner pad;
H3 36 / 1.04 / -4%; lead capped narrow.
--------------------------------------------------------------------------- */
.dd{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
align-items:center;
}
.dd + .dd, .sec .dd:only-child{ margin-top:0; }
.dd.flip .dd-visual{ order:2; }
.dd-copy{ padding:0 0 0 32px; }
.dd.flip .dd-copy{ padding:0 32px 0 0; }
@media (max-width:880px){
.dd, .dd.flip{ grid-template-columns:1fr; gap:32px; }
.dd.flip .dd-visual{ order:0; }
.dd-copy, .dd.flip .dd-copy{ padding:0; text-align:center; }
.dd-copy ul{ text-align:left; }
.dd-copy p{ margin-inline:auto; }
}
.dd-copy .eyebrow{ margin-bottom:12px; }
.fade-orb{ display:block; width:96px; height:96px; margin:0 0 18px; }
@media (max-width:900px){ .fade-orb{ margin-inline:auto; } }
.dd-copy h2{
font-family:var(--display);
font-weight:700;
font-size:clamp(28px, 3.4vw, 36px);
line-height:1.04;
letter-spacing:-.04em;
}
.dd-copy p.lead{
color:var(--ink-dim);
font-size:clamp(17px,2vw,21px); line-height:1.24; letter-spacing:-.02em;
margin-top:12px; max-width:340px;
}
/* supporting body paragraphs under the lead (long-form deep dives, /about) */
.dd-copy p{
color:var(--ink-dim);
font-size:16px; line-height:1.5;
margin-top:14px; max-width:400px;
}
.dd-copy ul{
list-style:none; margin-top:26px;
display:flex; flex-direction:column; gap:14px;
}
.dd-copy li{
display:flex; gap:12px; align-items:flex-start;
font-size:16px; color:var(--ink);
}
.dd-copy li .tick{
flex:none; margin-top:3px;
width:20px; height:20px; border-radius:7px;
display:flex; align-items:center; justify-content:center;
}
.dd-copy li .tick svg{ width:12px; height:12px; }
.dd-copy li b{ font-weight:600; }
.dd-copy li span{ color:var(--ink-dim); }
/* the wash panel each deep-dive visual sits on — Fortix Device Block:
1:1 square, radius 32, bg ink@5%, pt-32 px-24, phone top-anchored and
CROPPED by the panel bottom; two blurred color circles pool at the
bottom corners. */
.dd-visual{
position:relative;
aspect-ratio:1/1;
border-radius:var(--radius-block);
background:rgba(23,22,19,.05);
padding:32px 24px 0;
display:flex; justify-content:center;
align-items:flex-start;
overflow:hidden;
}
.dd-visual::before, .dd-visual::after{
content:"";
position:absolute; z-index:0;
width:153%; aspect-ratio:1/1; /* 600px circle in a 392px block */
border-radius:50%;
filter:blur(70px);
pointer-events:none;
}
.dd-visual::before{ left:calc(50% + 61%); bottom:-132%; transform:translateX(-50%); }
.dd-visual::after{ left:calc(50% - 51%); bottom:-128%; transform:translateX(-50%); }
.wash-orange::before{ background:radial-gradient(circle, var(--orange) 0%, rgba(254,108,26,0) 70%); }
.wash-orange::after{ background:radial-gradient(circle, var(--magenta) 0%, rgba(245,48,140,0) 70%); }
.wash-ember::before{ background:radial-gradient(circle, var(--purple) 0%, rgba(91,46,229,0) 70%); }
.wash-ember::after{ background:radial-gradient(circle, #FF8A3E 0%, rgba(255,138,62,0) 70%); }
.dd-visual .phone{
position:relative; z-index:2;
width:min(76%, 295px);
box-shadow:var(--shadow-device-sm);
}
/* a photo placeholder can take the phone's slot inside a wash panel */
.dd-visual .ph{
position:relative; z-index:2;
width:min(76%, 295px);
border-color:rgba(23,22,19,.22);
box-shadow:var(--shadow-device-sm);
}
/* faint capsule mark ghosted into the wash */
.wash-mark{
position:absolute; z-index:1;
width:64%; max-width:340px;
right:-14%; bottom:-16%;
opacity:.14;
transform:rotate(-14deg);
pointer-events:none;
}
.dd-visual.flip-mark .wash-mark{ right:auto; left:-14%; transform:rotate(12deg); }
/* ---------------------------------------------------------------------------
13. FOR-BARBERS DARK BLOCK + STACKED GRADIENT CARDS
--------------------------------------------------------------------------- */
.barbers{
background:var(--ink);
color:var(--cream);
border-radius:var(--radius-block);
margin:var(--sec-pad) auto 0;
max-width:1180px;
overflow:hidden;
position:relative;
}
@media (max-width:1220px){ .barbers{ border-radius:0; margin-inline:0; max-width:none; } }
.barbers .sec{ padding:clamp(80px,10vw,120px) 24px; }
.barber-head{ max-width:640px; margin-bottom:60px; }
.barber-head .eyebrow{ color:var(--orange); }
.barber-head p{
color:#B8B0A3; font-size:clamp(16px,2vw,19px); margin-top:16px; max-width:46ch;
}
.barber-cols{
display:grid; grid-template-columns:1.05fr .95fr;
gap:clamp(36px,5vw,80px);
align-items:center;
}
@media (max-width:880px){ .barber-cols{ grid-template-columns:1fr; } }
.barber-list{ list-style:none; display:flex; flex-direction:column; gap:22px; }
.barber-list li{ display:flex; gap:14px; align-items:flex-start; }
.barber-list .tick{
flex:none; margin-top:4px;
width:22px; height:22px; border-radius:8px;
background:linear-gradient(150deg,#FF9552,var(--orange-deep));
display:flex; align-items:center; justify-content:center;
}
.barber-list .tick svg{ width:12px; height:12px; }
.barber-list b{ display:block; font-family:var(--display); font-weight:600; font-size:17.5px; }
.barber-list span{ color:#B8B0A3; font-size:15.5px; }
/* When the dark panel's heading column IS one of the two columns (used by
/for-barbers/: copy + CTA on the left, photo placeholder on the right), the
head's own bottom gap would double the grid gap. */
.barber-cols .barber-head{ margin-bottom:0; }
/* Fortix-style stacked gradient cards */
.stack{
position:relative;
height:clamp(360px, 42vw, 480px);
display:flex; justify-content:center; align-items:center;
}
.stack-card{
position:absolute;
width:clamp(200px, 24vw, 270px);
aspect-ratio:27/34;
border-radius:26px;
padding:22px 22px;
color:#fff;
box-shadow:0 30px 60px -18px rgba(0,0,0,.5);
overflow:hidden;
transition:transform .45s cubic-bezier(.2,.6,.2,1);
}
.stack-card h4{
font-family:var(--display); font-weight:700;
font-size:clamp(19px,2.2vw,25px); line-height:1.14;
max-width:8ch;
}
.stack-card .mini{
position:absolute; top:18px; right:18px;
width:38px; height:38px; border-radius:50%;
background:rgba(255,255,255,.22);
display:flex; align-items:center; justify-content:center;
}
.stack-card .mini svg{ width:19px; height:19px; }
.sc-left{
transform:translateX(-56%) rotate(-8deg) scale(.92);
background:linear-gradient(165deg,#4A463E, #171613 70%);
z-index:1;
}
.sc-right{
transform:translateX(56%) rotate(8deg) scale(.92);
background:linear-gradient(165deg,#FF74B4,#B0246E 75%);
z-index:1;
}
.sc-mid{
transform:translateY(-4%);
background:linear-gradient(165deg,#FF9552 0%, var(--orange) 45%, var(--orange-deep) 100%);
z-index:2;
}
.stack:hover .sc-left{ transform:translateX(-64%) rotate(-10deg) scale(.94); }
.stack:hover .sc-right{ transform:translateX(64%) rotate(10deg) scale(.94); }
.stack:hover .sc-mid{ transform:translateY(-8%); }
/* tiny queue rows inside the middle card */
.q-rows{ margin-top:18px; display:flex; flex-direction:column; gap:8px; }
.q-row{
display:flex; align-items:center; gap:8px;
background:rgba(255,255,255,.16);
border-radius:11px; padding:7px 10px;
font-size:12.5px; font-weight:600;
backdrop-filter:blur(2px);
}
.q-row, .q-row .t{ white-space:nowrap; }
.q-row{ overflow:hidden; }
@media (max-width:640px){ .q-row{ font-size:11px; } }
.q-row .n{
flex:none; width:19px; height:19px; border-radius:6px;
background:rgba(23,22,19,.35);
display:flex; align-items:center; justify-content:center;
font-size:11px;
}
.q-row .t{ margin-left:auto; font-weight:500; opacity:.85; font-size:11.5px; }
/* chart line inside the charcoal card */
.sc-chart{ position:absolute; left:0; right:0; bottom:0; height:46%; opacity:.9; }
/* rating stars inside magenta card */
.sc-stars{ margin-top:16px; font-size:20px; letter-spacing:3px; }
.sc-note{ margin-top:8px; font-size:12.5px; opacity:.85; line-height:1.45; max-width:16ch; }
/* ---------------------------------------------------------------------------
14. DOWNLOAD CTA PANEL
--------------------------------------------------------------------------- */
.dl{ padding:var(--sec-pad) 0 0; }
.dl-panel{
position:relative;
border-radius:var(--radius-block);
overflow:hidden;
text-align:center;
padding:clamp(70px,9vw,110px) 28px;
color:#fff;
background:
radial-gradient(110% 140% at 12% 0%, #FFB37C 0%, transparent 42%),
radial-gradient(120% 130% at 92% 14%, var(--magenta) 0%, transparent 50%),
radial-gradient(150% 120% at 55% 118%, var(--purple) 0%, transparent 58%),
linear-gradient(155deg, #FF8A3E 0%, var(--orange) 34%, var(--red) 72%, #B0246E 100%);
box-shadow:0 40px 90px -30px rgba(240,61,31,.55);
}
.dl-panel::before{
content:"FADEHAUS";
position:absolute; left:50%; bottom:-.28em;
transform:translateX(-50%);
font-family:var(--display); font-weight:800;
letter-spacing:.05em;
font-size:clamp(90px, 16vw, 230px);
line-height:1;
color:rgba(255,255,255,.10);
pointer-events:none; user-select:none;
white-space:nowrap;
}
/* Contrast scrim. White text on the orange stop of this gradient is only
2.85:1, so the copy (and the waitlist error message) would fail WCAG AA.
A soft dark wash centred on the copy column pushes white to >5:1 across
every stop while leaving the panel's edges as vivid as the approved
reference. Panel text sits above it via z-index:2. */
.dl-panel::after{
content:"";
position:absolute; inset:0;
background:radial-gradient(85% 95% at 50% 52%, rgba(23,22,19,.45) 0%, rgba(23,22,19,.30) 45%, transparent 74%);
pointer-events:none;
z-index:1;
}
.dl-mark{
position:relative; z-index:2;
width:76px; height:76px; margin:0 auto 26px;
border-radius:22px;
background:#171613;
display:flex; align-items:center; justify-content:center;
box-shadow:0 18px 40px -12px rgba(23,22,19,.6), inset 0 1px 0 rgba(255,255,255,.12);
}
.dl-mark svg{ width:58%; height:58%; }
/* /join/ is a standalone page, so its panel title is the page h1; on the
landing + for-barbers pages the same panel sits under an existing h1 and
uses an h2. Same type treatment either way. */
.dl-panel h1,
.dl-panel h2{
font-family:var(--display); font-weight:700;
font-size:clamp(32px,4.4vw,48px);
line-height:1.04; letter-spacing:-.04em;
max-width:17ch; margin:0 auto;
text-shadow:0 2px 22px rgba(23,22,19,.18);
position:relative; z-index:2;
}
/* full-strength white: any opacity reduction here drops below AA on the
panel's lighter stops */
.dl-panel p{
font-size:clamp(17px,2.2vw,24px); line-height:1.24; letter-spacing:-.02em;
margin:16px auto 32px; max-width:440px;
position:relative; z-index:2;
}
.dl-actions{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; position:relative; z-index:2; }
.dl-actions .store-badge{ background:#171613; }
.dl-actions .wl{
display:inline-flex; align-items:center; gap:8px;
font-weight:600; font-size:16px; letter-spacing:-.02em;
color:#fff; border:1.5px solid rgba(255,255,255,.75);
height:60px; padding:0 22px; border-radius:12px;
transition:background .18s ease, color .18s ease, transform .18s ease;
}
.dl-actions .wl:hover{ background:#fff; color:var(--ink); transform:translateY(-2px); }
.dl-fine{ margin-top:26px; font-size:13px; position:relative; z-index:2; }
/* ---------------------------------------------------------------------------
15. FOOTER + WATERMARK
Fortix footer: pt-240 pb-64, content = hairline top rule + pt-64,
two halves (brand info | link-column grid), gap 16.
--------------------------------------------------------------------------- */
/* Every page's last section has top-only padding, so without this the content
sits flush against the black footer band. One rule, all pages, all layouts. */
main{ padding-bottom:clamp(64px, 8vw, 128px); }
footer{
background:var(--ink);
color:#B8B0A3;
position:relative;
overflow:hidden;
}
.foot-inner{ padding:var(--sec-pad) 24px 64px; position:relative; z-index:2; max-width:848px; margin:0 auto; }
.foot-top{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
border-top:1px solid rgba(242,237,230,.12);
padding-top:64px;
}
@media (max-width:640px){ .foot-top{ grid-template-columns:1fr; gap:48px; } }
.foot-brand{ display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
.foot-brand p{
margin-top:24px; font-size:16px; letter-spacing:-.02em; line-height:1.24;
max-width:224px;
}
.foot-menu{
display:grid;
grid-template-columns:1fr 1fr;
column-gap:16px; row-gap:40px;
align-content:start;
}
@media (max-width:420px){ .foot-menu{ grid-template-columns:1fr; } }
.foot-col h5{
font-family:var(--font); font-weight:500;
font-size:14px; letter-spacing:-.02em;
color:#8A8175; margin-bottom:16px;
}
.foot-col a{
display:block; font-size:16px; font-weight:600; letter-spacing:-.02em;
padding:4px 0;
color:#B8B0A3; transition:color .15s ease;
}
.foot-col a:hover{ color:var(--orange); }
.foot-legal-links{ display:flex; gap:16px; flex-wrap:wrap; }
.foot-legal-links a{
font-size:14px; font-weight:600; letter-spacing:-.02em;
color:#B8B0A3; padding:4px 0; transition:color .15s ease;
}
.foot-legal-links a:hover{ color:var(--orange); }
.foot-note{ font-size:14px; letter-spacing:-.02em; color:#8A8175; margin-top:8px; max-width:30ch; }
/* the watermark: oversized wordmark bleeding off the footer bottom */
.foot-watermark{
position:relative; z-index:1;
font-family:var(--display); font-weight:800;
letter-spacing:.04em; text-transform:uppercase;
font-size:clamp(80px, 14.5vw, 216px);
line-height:.78;
text-align:center;
color:rgba(242,237,230,.045);
user-select:none; pointer-events:none;
white-space:nowrap;
transform:translateY(.1em);
}
.foot-watermark .sq{
display:inline-block; width:.14em; height:.14em;
background:rgba(254,108,26,.35);
}
/* ---------------------------------------------------------------------------
16. PLACEHOLDERS (#3818 — realistic phone photography direction)
A placeholder is a STYLED BOX, never a hotlinked image. It must carry
data-placeholder="…" and a short visible label of what belongs there.
Give it the aspect ratio of the final asset via --ph-ratio.
Usage:
Photo: barber mid-fade, phone showing Discover
--------------------------------------------------------------------------- */
.ph{
position:relative;
aspect-ratio:var(--ph-ratio, 4/5);
border-radius:var(--radius-card);
border:1.5px dashed rgba(23,22,19,.28);
background:
repeating-linear-gradient(45deg, rgba(23,22,19,.03) 0 14px, transparent 14px 28px),
var(--bg-dim);
display:flex; align-items:center; justify-content:center;
text-align:center;
overflow:hidden;
}
.ph figcaption, .ph .ph-label{
color:var(--ink-dim);
font-size:13.5px; font-weight:600; letter-spacing:-.01em;
max-width:26ch; padding:16px;
}
.ph.on-dark{
border-color:rgba(242,237,230,.3);
background:
repeating-linear-gradient(45deg, rgba(242,237,230,.04) 0 14px, transparent 14px 28px),
rgba(242,237,230,.06);
}
.ph.on-dark figcaption, .ph.on-dark .ph-label{ color:#B8B0A3; }
/* ---------------------------------------------------------------------------
16b. ABOUT PAGE (/about/) — founder-note highlight + company facts card.
Added for the About port; reuses the dark .barbers panel for the note.
--------------------------------------------------------------------------- */
/* orange highlight inside a dark-panel heading (About founder note) */
.barbers h2 em{ font-style:normal; color:var(--orange); }
/* sign-off under the founder note */
.about-sign{ margin-top:28px; font-size:14px; letter-spacing:.02em; color:#8A8175; }
.about-sign b{
display:block;
font-family:var(--display); font-weight:600;
font-size:15px; color:var(--cream);
}
/* key-value facts card (Company / What we make / Status / Contact) */
.facts{
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius-card);
padding:8px 24px;
margin-top:40px;
text-align:left;
}
.facts dl{ margin:0; }
.facts .row{
display:flex; gap:20px; flex-wrap:wrap;
padding:16px 0;
border-bottom:1px solid var(--line);
}
.facts .row:last-child{ border-bottom:0; }
.facts dt{
flex:0 0 132px;
font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
color:var(--ink-faint);
padding-top:3px;
}
.facts dd{ flex:1 1 auto; margin:0; color:var(--ink-dim); font-size:16px; }
.facts dd b, .facts dd strong{ color:var(--ink); font-weight:700; }
.facts a{ color:var(--orange-text); font-weight:600; }
.facts a:hover{ color:var(--orange-text-strong); }
/* centre a block of inline content (the closing ghost CTA). Added for /about/
so the page needs no inline style attribute; reusable anywhere. */
.u-center{ text-align:center; }
/* separate a block from the grid above it inside the same section. Added for
/stripe/return/ so the page needs no inline style attribute; reusable. */
.u-mt-lg{ margin-top:48px; }
/* ---------------------------------------------------------------------------
17. PROSE — long-form / legal pages (privacy, terms, sms, delete-account).
Layout re-skin ONLY: the legal words themselves are lawyer-gated and must
never change. Wrap the existing copy in .
--------------------------------------------------------------------------- */
.prose{ max-width:720px; margin:0 auto; padding:var(--pad-head) 24px var(--sec-pad); }
/* when the prose follows a document header the header already carries the top
padding, so the article tucks up under it */
.legal-head + .prose,
.legal-toc + .prose{ padding-top:24px; }
.prose h1{ margin-bottom:16px; }
.prose h2{
font-family:var(--display); font-weight:700;
font-size:clamp(24px, 3vw, 32px); line-height:1.1; letter-spacing:-.03em;
margin:48px 0 12px;
}
.prose h3{
font-family:var(--display); font-weight:600;
font-size:20px; letter-spacing:-.02em;
margin:32px 0 8px;
}
.prose p, .prose li{ color:var(--ink-dim); font-size:16.5px; line-height:1.65; }
.prose p{ margin:12px 0; }
.prose ul, .prose ol{ padding-left:24px; margin:12px 0; }
.prose a{ color:var(--orange-text); font-weight:600; }
.prose a:hover{ color:var(--orange-text-strong); }
.prose strong, .prose b{ color:var(--ink); }
.prose hr{ border:0; border-top:1px solid var(--line); margin:40px 0; }
.prose table{ width:100%; border-collapse:collapse; font-size:15px; }
.prose th, .prose td{ border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top; }
.prose blockquote{ border-left:3px solid var(--orange); padding-left:16px; color:var(--ink-dim); margin:16px 0; }
/* ---------------------------------------------------------------------------
18. CONSENT-BANNER TOKEN BRIDGE
css/consent.css reads --bg-card, --ink, --orange, --line, --radius, --font
from :root. All six are defined in §2 above so the lawyer-gated banner
automatically tracks this light theme. DO NOT rename these variables.
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
19. SOLID CTA — added for /for-barbers/ (filled orange primary action on the
light canvas; geometry matches .ghost-cta so the pair sits level).
--------------------------------------------------------------------------- */
.solid-cta{
display:inline-flex; align-items:center; gap:8px;
font-weight:600; font-size:16px; letter-spacing:-.02em;
color:var(--ink); background:var(--orange);
border:1.5px solid var(--orange);
height:60px; padding:0 24px; border-radius:12px;
transition:background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
box-shadow:0 14px 30px -14px rgba(254,108,26,.55);
}
.solid-cta:hover{
background:var(--orange-deep); border-color:var(--orange-deep);
transform:translateY(-2px);
box-shadow:0 18px 36px -14px rgba(228,82,10,.6);
}
/* ---------------------------------------------------------------------------
20. WAITLIST FORM — added for /for-barbers/ (light-theme restyle of the
original dark waitlist pill; /join/ may reuse). Class names must stay
exactly as-is: the page's inline waitlist JS queries them.
--------------------------------------------------------------------------- */
.waitlist{ margin:40px auto 0; max-width:460px; }
.waitlist form{
display:flex; gap:8px;
background:#fff;
border:1px solid var(--line);
border-radius:999px;
padding:6px;
box-shadow:0 16px 40px -26px rgba(23,22,19,.35);
transition:border-color .15s ease;
}
.waitlist form:focus-within{ border-color:var(--orange); }
.waitlist input[type="email"]{
flex:1; min-width:0;
background:transparent; border:none;
color:var(--ink);
font:inherit; font-size:16px;
padding:10px 12px 10px 18px;
}
.waitlist input[type="email"]::placeholder{ color:var(--ink-faint); }
.waitlist input[type="email"]:focus{ outline:none; }
/* keyboard focus keeps a real ring (ink reads >3:1 on both the white pill and
the orange download panel; brand orange on white would only be 2.85:1) */
.waitlist input[type="email"]:focus-visible{
outline:2px solid var(--ink); outline-offset:2px; border-radius:999px;
}
.waitlist button{
flex-shrink:0;
background:var(--orange); color:var(--ink);
border:none; cursor:pointer;
font:inherit; font-weight:600; font-size:15px;
padding:12px 24px;
border-radius:999px;
transition:background .15s ease, transform .1s ease, opacity .15s ease;
}
.waitlist button:hover{ background:var(--orange-deep); }
.waitlist button:active{ transform:scale(.98); }
.waitlist button:disabled{ opacity:.55; cursor:default; transform:none; }
.waitlist .hint{
font-size:13px; color:var(--ink-faint);
margin-top:12px; text-align:center;
min-height:20px;
}
.waitlist .hint.err{ color:#C2330F; }
.waitlist .done{
display:none;
background:#fff;
border:1px solid rgba(254,108,26,.5);
border-radius:var(--radius);
padding:20px 24px;
text-align:center;
}
.waitlist .done strong{
display:block;
font-family:var(--display); font-weight:700;
font-size:18px; letter-spacing:-.02em;
}
.waitlist .done span{ color:var(--ink-dim); font-size:14.5px; }
.waitlist.is-done form, .waitlist.is-done .hint, .waitlist.is-done .heard{ display:none; }
.waitlist.is-done .done{ display:block; }
.waitlist .heard{ margin-top:16px; text-align:left; }
.waitlist .heard label{
display:block; font-size:13px; color:var(--ink-faint);
margin:0 0 6px 4px;
}
.waitlist .heard select{
width:100%; font:inherit; font-size:15px;
color:var(--ink); background-color:#fff;
border:1px solid var(--line); border-radius:14px;
padding:11px 40px 11px 14px; cursor:pointer;
appearance:none; -webkit-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2398907F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 14px center;
transition:border-color .15s ease;
}
.waitlist .heard select:focus{ outline:none; border-color:var(--orange); }
.waitlist .heard select:focus-visible{
outline:2px solid var(--ink); outline-offset:2px;
}
.waitlist .heard-other{
width:100%; font:inherit; font-size:16px; margin-top:8px;
color:var(--ink); background:#fff;
border:1px solid var(--line); border-radius:14px;
padding:11px 14px;
transition:border-color .15s ease;
}
.waitlist .heard-other::placeholder{ color:var(--ink-faint); }
.waitlist .heard-other:focus{ outline:none; border-color:var(--orange); }
.waitlist .heard-other:focus-visible{
outline:2px solid var(--ink); outline-offset:2px;
}
@media (max-width:420px){
.waitlist form{ flex-direction:column; border-radius:var(--radius); }
.waitlist button{ width:100%; padding:12px; }
}
/* ---------------------------------------------------------------------------
21. PRESS KIT (needed by /brand/ — asset cards, swatches, usage rules)
--------------------------------------------------------------------------- */
/* doc-style page header — shared subpage padding + H1 scale (see §1) */
.kit-head{ padding:var(--pad-head) 0 0; }
.kit-head h1 .sq{
display:inline-block; width:.16em; height:.16em;
margin-left:.06em;
background:var(--orange);
}
.kit-head .lede{
color:var(--ink-dim);
font-size:clamp(17px, 2.2vw, 21px); line-height:1.35; letter-spacing:-.02em;
max-width:52ch; margin-top:18px;
}
/* kit sections read left-aligned like a document, not centered like the home */
.kit-sec h2{
font-family:var(--display); font-weight:700;
font-size:clamp(24px, 3vw, 32px);
line-height:1.1; letter-spacing:-.03em;
}
.kit-sec .sec-intro{
color:var(--ink-dim); font-size:16.5px; line-height:1.55;
margin-top:10px; max-width:60ch;
}
.kit-sec .sec-intro a{ color:var(--orange-text); font-weight:600; }
.kit-sec .sec-intro a:hover{ color:var(--orange-text-strong); }
/* asset cards: preview stage on the asset's intended ground + meta + downloads */
.kit-grid{
margin-top:28px;
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:24px;
}
@media (max-width:720px){ .kit-grid{ grid-template-columns:1fr; } }
.asset{
min-width:0;
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius-card);
overflow:hidden;
display:flex; flex-direction:column;
}
.stage{
display:flex; align-items:center; justify-content:center;
min-height:220px;
padding:36px;
background:var(--bg-dim);
border-bottom:1px solid var(--line);
}
@media (max-width:720px){ .stage{ min-height:180px; } }
.stage.on-dark{ background:var(--ink); }
.stage img{ display:block; max-width:100%; height:auto; }
/* per-asset preview sizes (mirror each file's natural proportions) */
.stage .img-mark{ width:128px; }
.stage .img-capsule{ width:120px; }
.stage .img-appicon{ width:118px; border-radius:26px; box-shadow:0 10px 30px rgba(23,22,19,.28); }
.stage .img-lockup{ width:320px; }
.stage .img-stacked{ width:190px; }
.stage .img-wordmark{ width:300px; }
.asset-meta{
padding:20px 24px 22px;
display:flex; flex-direction:column; gap:6px;
flex:1;
}
.asset-meta h3{
font-family:var(--display); font-weight:600;
font-size:17px; letter-spacing:-.01em;
}
.asset-meta p{ color:var(--ink-dim); font-size:14.5px; line-height:1.55; }
.dl-row{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.dl-pill{
display:inline-flex; align-items:center; gap:7px;
font-size:12.5px; font-weight:700;
color:var(--orange-text);
border:1.5px solid rgba(254,108,26,.4);
padding:6px 15px; border-radius:999px;
transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.dl-pill:hover{ background:var(--orange); border-color:var(--orange); color:var(--ink); }
.dl-pill:hover svg path{ stroke:#171613; }
.dl-pill svg{ flex-shrink:0; }
.dl-pill svg path{ transition:stroke .15s ease; }
/* color swatches: click to copy the hex */
.swatches{
margin-top:28px;
display:grid;
grid-template-columns:repeat(5, 1fr);
gap:16px;
}
@media (max-width:860px){ .swatches{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:480px){ .swatches{ grid-template-columns:1fr; } }
.swatch{
min-width:0;
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius);
overflow:hidden;
text-align:left;
cursor:pointer;
font:inherit; color:inherit;
padding:0;
transition:border-color .15s ease;
}
.swatch:hover{ border-color:var(--orange); }
.swatch.accent{ border-color:rgba(254,108,26,.5); }
/* the inset ring keeps the near-white Ink chip visible on the white card */
.sw-chip{
display:block; height:88px;
border-bottom:1px solid var(--line);
box-shadow:inset 0 0 0 1px rgba(23,22,19,.06);
}
@media (max-width:480px){ .sw-chip{ height:64px; } }
.swatch-meta{
padding:13px 16px 15px;
display:flex; flex-direction:column; gap:2px;
}
.swatch-meta .role{
font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
color:var(--ink-faint);
}
.swatch.accent .role{ color:var(--orange-text); }
.swatch-meta .name{
font-family:var(--display); font-weight:600; font-size:14.5px;
}
.swatch-meta .hex{
margin-top:5px;
font-size:12.5px; color:var(--ink-dim);
font-variant-numeric:tabular-nums;
letter-spacing:.04em;
}
.swatch.copied .hex{ color:var(--orange-text); font-weight:700; }
.copy-hint{
margin-top:14px;
font-size:13px; color:var(--ink-faint);
min-height:20px;
}
/* usage rules: do / don't columns + the clear-space note */
.kit-rules{
margin-top:28px;
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
}
@media (max-width:720px){ .kit-rules{ grid-template-columns:1fr; } }
.rule-col{
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius-card);
padding:26px 28px 28px;
}
.rule-col .rule-tag{
font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
color:var(--orange-text);
}
.rule-col.dont .rule-tag{ color:var(--ink-faint); }
.rule-col ul{ list-style:none; display:grid; gap:12px; margin-top:16px; padding:0; }
.rule-col li{
color:var(--ink-dim); font-size:15px; line-height:1.55;
padding-left:22px; position:relative;
}
.rule-col li::before{
content:"";
position:absolute; left:2px; top:.55em;
width:6px; height:6px;
background:var(--orange);
}
.rule-col.dont li::before{ background:var(--ink-decor); }
.kit-note{
margin-top:24px;
padding:20px 24px;
background:var(--bg-dim);
border:1px solid var(--line);
border-radius:var(--radius);
color:var(--ink-dim); font-size:15px; line-height:1.6;
}
.kit-note strong{ color:var(--ink); font-weight:600; }
/* press-kit outro line (needed by /brand/): full-width, no 52ch clamp */
.kit-outro{ max-width:none; }
/* screenshot placeholder row (needed by /brand/): phone-shaped press shots */
.kit-shots{
display:grid; gap:20px;
grid-template-columns:repeat(3, 1fr);
margin-top:32px;
}
@media (max-width:860px){ .kit-shots{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){ .kit-shots{ grid-template-columns:1fr; } }
/* ---------------------------------------------------------------------------
22. DOC PAGE HEAD + FAQ / HELP CENTER (first needed by /support/)
Left-aligned doc header, FAQ search field, details/summary accordion,
dark help band, contact-card trust band, quiet help links.
--------------------------------------------------------------------------- */
/* NOTE: `.page-head` itself (and its `.lede` intro) is defined once, in the
SUBPAGE HEADER section below. /support/ opts into the left-aligned variant
with `.page-head-doc`. Nothing to redeclare here. */
.faq-search{ margin-top:36px; }
.faq-search label{
display:block;
font-size:12.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
color:var(--ink-faint);
margin-bottom:10px;
}
/* NOTE (/support/): this wrapper is `.faq-field`, NOT `.field`. The form
`.field` block added later in this file for /contact/ has equal specificity
and would win the cascade, restyling the search input. Keep them separate. */
.faq-search .faq-field{ position:relative; }
.faq-search .faq-field svg{
position:absolute; left:18px; top:50%; transform:translateY(-50%);
width:18px; height:18px; color:var(--ink-faint);
pointer-events:none;
}
.faq-search input{
width:100%;
background:#fff;
border:1px solid var(--line);
border-radius:16px;
color:var(--ink);
font-family:var(--font); font-size:16px;
padding:15px 18px 15px 46px;
transition:border-color .15s ease;
}
.faq-search input::placeholder{ color:var(--ink-faint); }
.faq-search input:focus{ outline:none; border-color:var(--orange); }
.faq-search input:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.faq-track{ padding-top:72px; }
.faq-track > h2{
font-family:var(--display); font-weight:700;
font-size:clamp(24px, 3vw, 30px);
line-height:1.1; letter-spacing:-.03em;
}
.faq-track > .track-sub{ color:var(--ink-dim); font-size:16px; margin-top:6px; }
.faq-track.is-hidden{ display:none; }
.faq-list{ margin-top:20px; display:grid; gap:12px; }
/* accordion item (native details/summary; JS only does search filtering) */
.qa{
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius);
overflow:hidden;
transition:box-shadow .2s ease;
}
.qa[open]{ box-shadow:var(--shadow-soft); }
.qa > summary{
list-style:none;
cursor:pointer;
display:flex; align-items:center; justify-content:space-between; gap:16px;
padding:18px 20px;
font-family:var(--display);
font-size:17px; font-weight:600; letter-spacing:-.02em;
color:var(--ink);
}
.qa > summary::-webkit-details-marker{ display:none; }
.qa > summary:focus-visible{ outline:2px solid var(--orange); outline-offset:-2px; }
.qa > summary .chev{
flex:none;
width:18px; height:18px; color:var(--ink-faint);
transition:transform .18s ease;
}
.qa[open] > summary .chev{ transform:rotate(180deg); color:var(--orange); }
.qa .answer{
padding:0 20px 20px;
color:var(--ink-dim); font-size:16px; line-height:1.6;
}
.qa .answer p{ margin-top:10px; }
.qa .answer p:first-child{ margin-top:0; }
.qa .answer strong{ color:var(--ink); font-weight:700; }
.qa .answer a.inline{
color:var(--orange-text); font-weight:600;
border-bottom:1px solid rgba(254,108,26,.35);
transition:border-color .15s ease;
}
.qa .answer a.inline:hover{ border-color:var(--orange); }
.qa.is-hidden{ display:none; }
.no-results{
display:none;
margin-top:32px;
padding:28px 24px;
text-align:center;
color:var(--ink-dim); font-size:16px;
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius);
}
.no-results.show{ display:block; }
.no-results strong{ color:var(--ink); font-family:var(--display); }
.no-results p{ margin-top:6px; }
.no-results a.inline{ color:var(--orange-text); font-weight:600; }
.no-results a.inline:hover{ color:var(--orange-text-strong); }
/* "Still need help?" — the page's one loud moment: dark band, orange CTA */
.help-band{
margin-top:80px;
padding:32px 30px;
background:var(--ink); color:var(--cream);
border-radius:var(--radius-block);
display:flex; align-items:center; justify-content:space-between;
gap:20px; flex-wrap:wrap;
}
.help-band .band-title{
font-family:var(--display); font-weight:700;
font-size:22px; letter-spacing:-.02em;
}
.help-band .band-copy p{ color:#B8B0A3; font-size:16px; margin-top:4px; }
.help-band .band-cta{
display:inline-flex; align-items:center; gap:9px;
background:var(--orange); color:var(--ink);
font-weight:600; font-size:16px;
padding:14px 24px; border-radius:14px;
transition:background .18s ease, transform .18s ease;
white-space:nowrap;
}
.help-band .band-cta:hover{ background:var(--orange-deep); transform:translateY(-2px); }
/* .card-band (the official contact card / vCard trust band, #3433) is defined
once in section 18 below — it is shared by /support/ and /contact/. */
.help-links{ margin-top:28px; display:flex; gap:24px; flex-wrap:wrap; }
.help-links a{
color:var(--ink-dim); font-size:15px; font-weight:600; letter-spacing:-.01em;
border-bottom:1px solid transparent; padding-bottom:1px;
transition:color .15s ease, border-color .15s ease;
}
.help-links a:hover{ color:var(--ink); border-bottom-color:var(--line); }
/* generic screen-reader-only helper (first needed by the /support/ live
search-result count) */
.visually-hidden{
position:absolute; width:1px; height:1px;
margin:-1px; padding:0; border:0;
overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
white-space:nowrap;
}
/* ---------------------------------------------------------------------------
23. SUBPAGE HEADER + FORM COMPONENTS (added for /contact/; reusable on
/support/ and any other page with a form)
--------------------------------------------------------------------------- */
/* centered page intro for utility subpages (no hero stage) */
.page-head{ padding:var(--pad-head) 0 0; text-align:center; }
/* H1 type comes from the shared subpage H1 rule in §1 */
.page-head .lede,
.page-head .lead{
color:var(--ink-dim);
font-size:clamp(17px,2.2vw,21px); line-height:1.3; letter-spacing:-.02em;
max-width:52ch; margin:18px auto 0;
}
/* left-aligned doc variant of the page header (needed by /support/, which reads
as a document, not a centered utility page). Declared after the centered
.page-head above so it wins the cascade. */
.page-head-doc{ text-align:left; }
.page-head-doc .lede,
.page-head-doc .lead{ margin-left:0; margin-right:0; }
/* narrower column so form lines stay readable inside the 848px wrap */
.form-col{ max-width:640px; margin:0 auto; }
/* center inline children (the audience toggle); cards inside reset to left */
.form-col-center{ text-align:center; }
/* audience toggle (client / shop) */
.aud-toggle{
display:inline-flex; gap:4px;
background:#fff; border:1px solid var(--line);
border-radius:999px; padding:4px;
margin-top:40px;
}
.aud-toggle button{
appearance:none; border:0; cursor:pointer;
background:transparent; color:var(--ink-dim);
font-family:var(--font); font-size:15px; font-weight:600; letter-spacing:-.01em;
padding:10px 22px; border-radius:999px;
transition:background .15s ease, color .15s ease;
}
.aud-toggle button[aria-pressed="true"]{ background:var(--ink); color:var(--cream); }
/* form card + fields */
.form-card{
margin-top:20px; text-align:left;
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius-card);
padding:32px 28px;
}
@media (max-width:600px){ .form-card{ padding:24px 20px; } }
.form-card.is-done{ display:none; }
.field{ margin-top:20px; }
.field:first-child{ margin-top:0; }
.field label{
display:block;
font-size:13.5px; font-weight:600; color:var(--ink);
letter-spacing:-.01em; margin-bottom:8px;
}
.field .req{ color:var(--orange-text); }
.field input,
.field select,
.field textarea{
width:100%;
background:var(--bg);
border:1px solid var(--line);
border-radius:14px;
color:var(--ink);
font-family:var(--font); font-size:16px;
padding:13px 15px;
transition:border-color .15s ease;
}
.field input::placeholder,
.field textarea::placeholder{ color:var(--ink-faint); }
.field input:focus,
.field select:focus,
.field textarea:focus{ border-color:var(--orange); }
.field textarea{ resize:vertical; min-height:140px; line-height:1.55; }
.field select{
appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398907F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 15px center;
padding-right:42px;
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"]{ border-color:var(--red); }
/* honeypot: kept out of sight and out of the tab order */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.submit-row{
margin-top:26px;
display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
/* form submit — same geometry as .solid-cta / .ghost-cta (h60, radius 12,
1.5px border) so the primary action reads identically on every page */
.btn-primary{
appearance:none; cursor:pointer;
display:inline-flex; align-items:center; gap:8px;
background:var(--orange); color:var(--ink);
border:1.5px solid var(--orange);
font-family:var(--font); font-weight:600; font-size:16px; letter-spacing:-.02em;
height:60px; padding:0 24px; border-radius:12px;
transition:background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
box-shadow:0 14px 30px -14px rgba(254,108,26,.55);
}
.btn-primary:hover{
background:var(--orange-deep); border-color:var(--orange-deep);
transform:translateY(-2px);
box-shadow:0 18px 36px -14px rgba(228,82,10,.6);
}
.btn-primary:disabled{ opacity:.6; cursor:default; transform:none; }
.form-note{ font-size:14px; color:var(--ink-faint); }
.form-note.err{ color:var(--red); font-weight:600; }
/* success state */
.form-status{
display:none; text-align:left;
margin-top:20px;
padding:28px 26px;
background:#fff;
border:1px solid rgba(254,108,26,.5);
border-radius:var(--radius-card);
}
.form-status.show{ display:block; }
.form-status .status-title{
font-family:var(--display); font-weight:700;
font-size:20px; letter-spacing:-.02em; color:var(--ink);
}
.form-status p{ color:var(--ink-dim); font-size:16px; margin-top:8px; }
/* direct-contact cards */
.contact-cards{ margin-top:64px; display:grid; gap:16px; text-align:left; }
@media (min-width:560px){ .contact-cards{ grid-template-columns:1fr 1fr; } }
.contact-card{
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius-card);
padding:24px;
}
.contact-card .c-label{
font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
color:var(--ink-faint);
}
.contact-card .c-value{
display:inline-block; margin-top:10px;
color:var(--orange-text); font-size:16.5px; font-weight:600; letter-spacing:-.01em;
transition:color .15s ease;
}
.contact-card .c-value:hover{ color:var(--orange-text-strong); }
.contact-card .c-sub{ color:var(--ink-dim); font-size:15px; margin-top:8px; line-height:1.5; }
/* official contact-card band (#3433 trust anchor — vCard download).
Single definition, used by /contact/ and /support/. */
.card-band{
margin-top:16px; text-align:left;
padding:24px;
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius-card);
display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.card-band .cb-logo{ width:48px; height:48px; border-radius:12px; flex:none; display:block; }
.card-band .cb-copy{ flex:1 1 260px; min-width:0; }
.card-band .cb-title{
font-family:var(--display); font-weight:700;
font-size:17px; letter-spacing:-.02em; color:var(--ink);
}
.card-band .cb-copy p{ color:var(--ink-dim); font-size:15px; line-height:1.5; margin-top:6px; }
.card-band .cb-fine{ color:var(--ink-faint); font-size:13px; margin-top:8px; }
.card-band .cb-cta{
display:inline-flex; align-items:center; gap:8px;
color:var(--ink); background:transparent;
border:1.5px solid var(--ink);
font-weight:600; font-size:15px; letter-spacing:-.01em;
padding:12px 20px; border-radius:12px;
transition:background .18s ease, color .18s ease, border-color .18s ease;
white-space:nowrap; flex:none;
}
.card-band .cb-cta:hover{ background:var(--orange); border-color:var(--orange); color:var(--ink); }
@media (max-width:520px){ .card-band .cb-cta{ width:100%; justify-content:center; } }
/* ---------------------------------------------------------------------------
24. LINKS HUB — needed by /links/ (link-in-bio page).
One centered column on the warm-white canvas: wordmark, tagline, a short
stack of link cards (one filled-orange primary), social circles, fine print.
--------------------------------------------------------------------------- */
.links-hub{
min-height:100vh;
min-height:100svh;
display:flex; flex-direction:column; justify-content:center;
padding:72px 24px 48px;
}
.links-col{
width:100%; max-width:460px; margin:0 auto;
display:flex; flex-direction:column; align-items:center;
}
.links-col .wordmark{ font-size:26px; }
.links-tagline{
margin-top:14px;
font-size:16px; font-weight:400; letter-spacing:-.01em;
color:var(--ink-dim);
text-align:center;
}
.link-stack{
width:100%;
display:flex; flex-direction:column; gap:12px;
margin-top:36px;
}
.lnk{
display:flex; align-items:center; justify-content:center;
min-height:58px; padding:16px 22px;
border-radius:var(--radius);
font-weight:600; font-size:16px; letter-spacing:-.01em;
text-align:center;
background:var(--bg-card);
border:1px solid var(--line);
color:var(--ink);
transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.lnk:hover{
transform:translateY(-2px);
box-shadow:var(--shadow-soft);
border-color:var(--ink-decor);
}
.lnk:active{ transform:translateY(0); }
.lnk-primary{
background:var(--orange);
border-color:var(--orange);
color:var(--ink);
}
.lnk-primary:hover{
background:var(--orange-deep);
border-color:var(--orange-deep);
box-shadow:0 20px 44px -16px rgba(254,108,26,.55);
}
.links-socials{ display:flex; gap:12px; margin-top:34px; }
.links-socials a{
width:46px; height:46px;
display:flex; align-items:center; justify-content:center;
border-radius:50%;
background:var(--bg-card);
border:1px solid var(--line);
color:var(--ink-dim);
transition:color .15s ease, border-color .15s ease, transform .15s ease;
}
.links-socials a:hover{
color:var(--orange);
border-color:var(--orange);
transform:translateY(-2px);
}
.links-foot{
margin-top:40px;
font-size:13px; letter-spacing:-.01em;
color:var(--ink-faint);
text-align:center;
}
/* 19b. Added for the /links/ port: a banner placeholder above the wordmark
(real phone photography later, #3818) and a legal line under the fine print,
since this page has no site footer. */
.links-hero{
width:100%;
margin-bottom:34px;
}
.links-legal{
margin-top:10px;
display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
font-size:13px; letter-spacing:-.01em;
}
.links-legal a{
color:var(--ink-faint);
text-decoration:underline;
text-underline-offset:3px;
text-decoration-color:rgba(23,22,19,.2);
}
.links-legal a:hover{ color:var(--ink); text-decoration-color:currentColor; }
/* ---------------------------------------------------------------------------
25. WAITLIST FORM — needed by index.html (home download panel); /join/ can
reuse it. Behaviour lives in the page's own verbatim [data-waitlist] script.
Default styling assumes the warm-white canvas; `.dl-panel .waitlist`
overrides adapt it to the vivid gradient download panel.
--------------------------------------------------------------------------- */
.waitlist{ margin:32px auto 0; max-width:440px; text-align:left; }
.waitlist form{
display:flex; gap:8px;
background:#fff;
border:1px solid var(--line);
border-radius:999px;
padding:6px;
box-shadow:0 12px 30px -14px rgba(23,22,19,.3);
transition:border-color .15s ease;
}
.waitlist form:focus-within{ border-color:var(--orange); }
.waitlist input[type="email"]{
flex:1; min-width:0;
background:transparent; border:0;
color:var(--ink);
/* 16px minimum: anything smaller makes iOS Safari auto-zoom on focus */
font:inherit; font-size:16px;
padding:10px 12px 10px 18px;
}
.waitlist input[type="email"]::placeholder{ color:var(--ink-faint); }
.waitlist input[type="email"]:focus{ outline:none; }
/* keyboard focus keeps a real ring (ink reads >3:1 on both the white pill and
the orange download panel; brand orange on white would only be 2.85:1) */
.waitlist input[type="email"]:focus-visible{
outline:2px solid var(--ink); outline-offset:2px; border-radius:999px;
}
.waitlist button{
flex:none;
appearance:none; border:0; cursor:pointer;
background:var(--orange); color:var(--ink);
font:inherit; font-weight:600; font-size:15px; letter-spacing:-.01em;
padding:11px 22px;
border-radius:999px;
transition:background .15s ease, transform .1s ease, opacity .15s ease;
}
.waitlist button:hover{ background:var(--orange-deep); }
.waitlist button:active{ transform:scale(.98); }
.waitlist button:disabled{ opacity:.55; cursor:default; transform:none; }
.waitlist .hint{
font-size:13px; color:var(--ink-faint);
margin-top:12px; text-align:center;
min-height:20px;
}
.waitlist .hint.err{ color:var(--red); font-weight:600; }
.waitlist .done{
display:none;
background:#fff;
border:1px solid rgba(254,108,26,.5);
border-radius:var(--radius);
padding:20px 24px;
text-align:center;
color:var(--ink);
}
.waitlist .done strong{
display:block;
font-family:var(--display); font-weight:700;
font-size:18px; letter-spacing:-.02em;
}
.waitlist .done span{ color:var(--ink-dim); font-size:14.5px; }
.waitlist.is-done form, .waitlist.is-done .hint, .waitlist.is-done .heard{ display:none; }
.waitlist.is-done .done{ display:block; }
/* "How did you hear about us?" — constrained picker (select), not free text.
Sits below the email pill; "Other" reveals the one allowed text input. */
.waitlist .heard{ margin-top:14px; }
.waitlist .heard label{
display:block; font-size:13px; color:var(--ink-faint);
margin:0 0 6px 6px;
}
.waitlist .heard select{
width:100%; font:inherit; font-size:15px;
color:var(--ink); background-color:#fff;
border:1px solid var(--line); border-radius:14px;
padding:11px 40px 11px 14px; cursor:pointer;
appearance:none; -webkit-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2398907F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 14px center;
transition:border-color .15s ease;
}
.waitlist .heard select:focus{ outline:none; border-color:var(--orange); }
.waitlist .heard select:focus-visible{
outline:2px solid var(--ink); outline-offset:2px;
}
.waitlist .heard-other{
width:100%; font:inherit; font-size:16px; margin-top:8px;
color:var(--ink); background:#fff;
border:1px solid var(--line); border-radius:14px;
padding:11px 14px;
transition:border-color .15s ease;
}
.waitlist .heard-other::placeholder{ color:var(--ink-faint); }
.waitlist .heard-other:focus{ outline:none; border-color:var(--orange); }
.waitlist .heard-other:focus-visible{
outline:2px solid var(--ink); outline-offset:2px;
}
@media (max-width:420px){
.waitlist form{ flex-direction:column; border-radius:var(--radius); }
.waitlist button{ width:100%; }
}
/* on the vivid gradient download panel */
.dl-panel .waitlist{ position:relative; z-index:2; }
.dl-panel .waitlist form{ border-color:transparent; }
.dl-panel .waitlist form:focus-within{ border-color:var(--ink); }
.dl-panel .waitlist button{ background:var(--ink); }
.dl-panel .waitlist button:hover{ background:#000; }
/* full white, no tint-down: this line also carries the form's error message,
which must stay legible over the gradient (see the .dl-panel::after scrim).
The error is additionally marked by weight, not colour alone. */
.dl-panel .waitlist .hint{ color:#fff; }
.dl-panel .waitlist .hint.err{ color:#fff; font-weight:600; }
.dl-panel .waitlist .heard label{ color:#fff; }
.dl-panel .waitlist .heard select,
.dl-panel .waitlist .heard-other{ border-color:transparent; }
.dl-panel .waitlist .done{ border-color:transparent; }
/* ---------------------------------------------------------------------------
26. FOOTER SOCIAL ROW — needed by index.html (carried over from the live
home footer: Instagram / TikTok / Facebook). Sits in .foot-brand on ink.
--------------------------------------------------------------------------- */
.foot-social{ display:flex; gap:10px; }
.foot-social a{
display:inline-flex; align-items:center; justify-content:center;
width:36px; height:36px; border-radius:10px;
border:1px solid rgba(242,237,230,.18);
color:#B8B0A3;
transition:color .15s ease, border-color .15s ease;
}
.foot-social a:hover{ color:var(--orange); border-color:var(--orange); }
/* ---------------------------------------------------------------------------
27. NOT-FOUND PAGE (needed by /404.html) — the eyebrow reads as a status
code, the feature cards become links, and the actions row centers under
the page head. No new visual language: this is .page-head + .feature.
--------------------------------------------------------------------------- */
/* the "404" eyebrow sits above the h1 with the page-head's centered rhythm */
.nf-code{ display:block; margin-bottom:18px; }
/* linkable variant of the feature card (whole card is the hit area) */
a.feature{ display:block; color:inherit; }
a.feature:hover h3{ color:var(--orange-text); }
a.feature .go{
display:inline-block; margin-top:14px;
font-size:14px; font-weight:600; letter-spacing:-.01em;
color:var(--orange-text);
}
/* centered actions row under the 404 headline */
.nf-actions{
display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
margin-top:40px;
}
/* closing "still stuck" line */
.nf-help{ margin-top:40px; text-align:center; color:var(--ink-dim); font-size:15.5px; }
.nf-help a{ color:var(--orange-text); font-weight:600; }
.nf-help a:hover{ color:var(--orange-text-strong); }
/* ---------------------------------------------------------------------------
28. LEGAL DOCUMENT PAGE — first needed by /privacy-policy/; reusable as-is by
/terms-of-service/, /sms/ and /delete-account/.
Layout only. The words on those pages are lawyer-gated and never change.
Pieces: a document header on the same 720px measure as .prose, the
"short version" summary card, a two-column table of contents, and a scroll
container so the wide data tables can never push the page sideways.
--------------------------------------------------------------------------- */
/* the reading measure shared by the header and .prose below it */
.legal-wrap{ max-width:720px; margin:0 auto; padding:0 24px; }
.legal-head{ padding:var(--pad-head) 0 0; }
/* H1 type comes from the shared subpage H1 rule in §1 */
.legal-head h1{ margin-top:4px; }
.legal-head .lede{
color:var(--ink-dim);
font-size:clamp(17px,2.2vw,21px); line-height:1.35; letter-spacing:-.02em;
max-width:52ch; margin-top:18px;
}
/* NOTE: the updated stamp, the "short version" card and the table of contents
are defined once, in the LEGAL DOC HEADER section below. All four legal pages
(/privacy-policy/, /terms-of-service/, /delete-account/, /sms/) use the same
shell: `.legal-head > .legal-wrap`, then `nav.legal-toc.legal-wrap`, then
`article.prose`. */
/* wide data tables inside legal prose scroll inside their own box */
.prose .table-wrap{
margin:18px 0;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
border:1px solid var(--line);
border-radius:var(--radius);
background:#fff;
}
.prose .table-wrap table{ min-width:520px; border-collapse:collapse; }
.prose .table-wrap th,
.prose .table-wrap td{ border:0; border-bottom:1px solid var(--line); }
.prose .table-wrap thead th{
background:var(--bg-dim);
color:var(--ink);
font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
white-space:nowrap;
}
.prose .table-wrap tbody th{ color:var(--ink); font-weight:700; }
.prose .table-wrap tbody td{ color:var(--ink-dim); }
.prose .table-wrap tr:last-child th,
.prose .table-wrap tr:last-child td{ border-bottom:0; }
/* ---------------------------------------------------------------------------
29. LEGAL DOC HEADER + TABLE OF CONTENTS
Added for /terms-of-service/ (reused by /privacy-policy/, /sms/,
/delete-account/). Layout only — the legal words are lawyer-gated.
Sits inside : eyebrow, h1, updated stamp, plain-English
summary card, then a two-column anchor index.
--------------------------------------------------------------------------- */
.prose .eyebrow{ margin-bottom:12px; }
/* the TOC jumps to h2 anchors; clear the sticky nav (60px) plus breathing room */
.prose h2[id], .prose h3[id]{ scroll-margin-top:88px; }
/* the "Last updated" stamp — a quiet pill, factual, never shouted */
.legal-updated{
display:block; width:fit-content;
margin-top:4px;
font-size:14px; font-weight:600; letter-spacing:-.01em;
color:var(--ink-faint);
background:var(--bg-dim);
border:1px solid var(--line);
border-radius:999px; padding:7px 15px;
}
/* "the short version" card — a plain-language summary above the full policy */
.legal-summary{
margin-top:32px;
padding:24px 26px;
background:#fff;
border:1px solid var(--line);
border-left:3px solid var(--orange);
border-radius:var(--radius);
box-shadow:var(--shadow-soft);
}
.legal-summary-label,
.legal-summary h2{
font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
color:var(--orange-text);
margin:0 0 8px;
}
.legal-summary p{ margin:0; color:var(--ink-dim); font-size:16.5px; line-height:1.6; }
/* table of contents: two columns on desktop, one on phones */
.legal-toc{
margin-top:32px;
padding-bottom:32px;
border-bottom:1px solid var(--line);
}
.legal-toc-label,
.legal-toc h2{
font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
color:var(--ink-faint);
margin:0 0 14px;
}
.legal-toc ol{
list-style:none;
padding:0; margin:0;
display:grid; gap:9px;
}
@media (min-width:620px){
.legal-toc ol{ grid-template-columns:1fr 1fr; column-gap:32px; }
}
.legal-toc li{ font-size:15px; line-height:1.4; }
.legal-toc a{
display:block;
color:var(--ink-dim); font-size:15.5px; font-weight:500; letter-spacing:-.01em;
padding:6px 0;
transition:color .15s ease;
}
.legal-toc a:hover{ color:var(--orange-text); }
.legal-toc + .prose{ padding-top:24px; }
/* the untouched legal copy itself; .prose already styles p/h2/h3/ul/a */
.legal-body{ margin-top:8px; }
/* ---------------------------------------------------------------------------
30. POST-CHECKOUT RETURN (/billing/return/) — a short, centered "where to
look next" column. Narrower than .wrap so the one instruction and the phone
screenshot read as a single calm block.
--------------------------------------------------------------------------- */
.return-col{ max-width:520px; margin:0 auto; text-align:center; }
.return-col .h2{ text-align:center; }
.return-lead{ color:var(--ink-dim); font-size:17px; line-height:1.55; margin-top:12px; }
.return-lead strong{ color:var(--ink); font-weight:700; }
/* phone-shaped screenshot placeholder, capped so it never dominates the page */
.return-shot{ max-width:220px; margin:36px auto 0; }
/* ---------------------------------------------------------------------------
31. DOC SCREENSHOTS + INLINE UI TOKENS
Used by /sms/ (A2P / carrier-compliance evidence) inside .prose. A real
portrait app screenshot in a phone-shaped frame, the Settings navigation
path, and the STOP / HELP keyword pills.
--------------------------------------------------------------------------- */
.prose .shot{ margin:28px 0; }
.shot-phone{
max-width:260px; margin:0 auto;
border-radius:clamp(30px,4vw,40px);
background:linear-gradient(150deg,#DDD9D2,#8F8B84 30%,#C9C5BE 55%,#787069 85%);
padding:4px;
box-shadow:var(--shadow-soft), 0 2px 6px rgba(23,22,19,.25);
}
.shot-phone > span{
display:block;
border-radius:inherit;
background:#000;
padding:6px;
}
.shot-phone img{
display:block; width:100%; height:auto;
border-radius:calc(clamp(30px,4vw,40px) - 9px);
}
.prose .shot figcaption{
margin-top:14px;
color:var(--ink-faint); font-size:14px; line-height:1.5; text-align:center;
}
.prose .shot figcaption strong{ color:var(--ink-dim); }
/* Settings › Notifications › Text messages */
.pathrow{
display:flex; flex-wrap:wrap; align-items:center; gap:8px;
margin:16px 0;
}
.pathrow .step{
background:var(--bg-dim);
border:1px solid var(--line);
border-radius:999px; padding:7px 14px;
color:var(--ink); font-size:14px; font-weight:600; letter-spacing:-.01em;
}
.pathrow .arrow{ color:var(--ink-faint); font-size:15px; }
/* STOP / HELP keywords, called out inline */
.kw{
display:inline-block;
background:rgba(254,108,26,.10);
border:1px solid rgba(254,108,26,.32);
border-radius:8px; padding:1px 8px;
color:var(--orange-text); font-weight:700; letter-spacing:.04em;
}
/* ---------------------------------------------------------------------------
32. GRADIENT CAROUSEL (#4013) — 3D card carousel with a gradient backdrop
that takes its colour from the active card.
Ported by hand from React Bits Pro "Gradient Carousel"
(https://pro.reactbits.dev/docs/components/gradient-carousel), which ships as
React + Tailwind + a motion lib. apps/web has no build step and a self-only
CSP, so this is a plain CSS/JS rebuild of the same behaviour — no dependency,
no CDN, no licence key. Same house rule as the AnimatedList port (#3938).
REFERENCE PARAMETERS (the docs playground's own control labels + the values
the founder set; the component's library defaults differ and are noted where
they do). js/site.js holds the identical numbers as named constants.
Card Layout
Max Rotation ............ 28 deg (library default 28)
Max Depth ............... 200 px (library default 140)
Min Scale ............... 0.8 (library default 0.92)
Card Gap ................ 15 px (library default 28)
Card Aspect Ratio ....... 0.9 (width / height; library default 0.8)
Interaction
Enable Keyboard Nav ..... on (a real prop here, shipped ON)
Friction Factor ......... 0.95 (velocity decay PER FRAME, not an easing)
Wheel Sensitivity ....... 0.75
Drag Sensitivity ........ 1
Initial Index ........... 0
Background & Gradient
Background Blur ......... 24 px
Gradient Size ........... 1 (0-1, radius of the gradient circles)
Gradient Intensity ...... 0.25 (0-1, deliberately a quarter-strength
wash so it sits under the warm canvas)
OURS, NOT THE REFERENCE'S (called out so the port stays auditable):
- perspective 1200px. The docs expose maxDepth but not a perspective value;
1200px is what makes a 200px push-back read as depth at this card size.
- the opacity falloff on off-centre cards (the reference documents scale and
depth only). Kept gentle so nothing reads as disabled.
- prefers-reduced-motion handling and the visible focus ring.
The reference has NO autoplay prop, so this does not autoplay — nothing moves
until someone drags, presses an arrow, or taps a control.
GRADIENT SOURCE: the reference samples dominant colours out of card IMAGES.
Our cards are type, not photos, and pixel-averaging would mean a canvas, a
CORS surface, and main-thread cost for a muddy result. Each card DECLARES its
colour instead (--gc-rgb), so the palette stays art-directed. Every value is
an existing brand token, just written as an RGB triple so rgba() can take it.
--------------------------------------------------------------------------- */
.gcar{
position:relative;
margin-top:56px;
/* set by js/site.js from the active card's declared --gc-rgb */
--gc-tone: 254,108,26;
--gc-blur: 24px; /* Background Blur */
--gc-size: 1; /* Gradient Size */
--gc-alpha: .25; /* Gradient Intensity */
}
/* the wash. Two radial stops in the active card's colour, blurred, sitting
behind the deck. Sized off --gc-size exactly as the reference's radius. */
.gcar-bg{
position:absolute; inset:-4% 0 6%;
border-radius:var(--radius-block);
filter:blur(var(--gc-blur));
opacity:0;
transition:opacity .6s ease, background .6s ease;
background:
radial-gradient(circle at 30% 34%,
rgba(var(--gc-tone), var(--gc-alpha)) 0%,
rgba(var(--gc-tone), 0) calc(58% * var(--gc-size))),
radial-gradient(circle at 72% 66%,
rgba(var(--gc-tone), calc(var(--gc-alpha) * .72)) 0%,
rgba(var(--gc-tone), 0) calc(64% * var(--gc-size)));
}
.gcar.is-ready .gcar-bg{ opacity:1; }
/* the 3D stage. tabindex=0 lives here so arrows work; it never takes focus on
load, only when someone tabs or clicks into it. */
.gcar-stage{
position:relative;
height:clamp(340px, 46vw, 420px);
perspective:1200px;
perspective-origin:50% 50%;
touch-action:pan-y; /* vertical page scroll always wins */
cursor:grab;
outline:none;
border-radius:var(--radius-card);
}
.gcar-stage:focus-visible{ outline:2px solid var(--orange); outline-offset:6px; }
.gcar-stage.is-dragging{ cursor:grabbing; }
.gcar-track{
list-style:none;
position:absolute; inset:0;
transform-style:preserve-3d;
}
.gcar-card{
position:absolute;
top:50%; left:50%;
width:clamp(240px, 30vw, 300px);
aspect-ratio:0.9; /* Card Aspect Ratio (width / height) */
margin:0;
display:flex; flex-direction:column;
padding:26px 24px;
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius-card);
box-shadow:var(--shadow-soft);
transform-origin:50% 50%;
backface-visibility:hidden;
will-change:transform, opacity;
user-select:none;
}
.gcar-card .gc-chip{
width:40px; height:40px; border-radius:12px;
background:rgb(var(--gc-rgb));
margin-bottom:auto;
}
.gcar-card h3{
font-family:var(--display); font-weight:700;
font-size:21px; line-height:1.1; letter-spacing:-.03em;
margin-top:20px;
}
.gcar-card p{
color:var(--ink-dim);
font-size:15px; line-height:1.45; letter-spacing:-.01em;
margin-top:10px;
}
/* controls. Buttons are siblings of each other and of the stage — nothing
interactive is nested inside anything else interactive. */
.gcar-controls{
display:flex; align-items:center; justify-content:center; gap:16px;
margin-top:28px;
}
.gcar-nav{
width:44px; height:44px; border-radius:999px;
display:flex; align-items:center; justify-content:center;
background:#fff; border:1px solid var(--line); color:var(--ink);
cursor:pointer;
transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.gcar-nav:hover{ border-color:var(--ink-decor); transform:translateY(-1px); box-shadow:var(--shadow-soft); }
.gcar-nav svg{ width:18px; height:18px; }
.gcar-dots{ display:flex; align-items:center; gap:8px; }
.gcar-dot{
width:8px; height:8px; padding:0; border-radius:999px;
border:0; background:var(--ink-decor); cursor:pointer;
transition:background .2s ease, width .2s ease;
}
.gcar-dot[aria-current="true"]{ width:22px; background:var(--orange); }
.gcar-hint{
text-align:center; margin-top:14px;
color:var(--ink-faint); font-size:14px; letter-spacing:-.01em;
}
@media (max-width:600px){
.gcar-stage{ height:clamp(320px, 92vw, 380px); }
.gcar-card{ width:min(78vw, 280px); }
}
/* Reduced motion: no momentum, no wash cross-fade, no card transitions. The
global rule in §3 already kills transitions; js/site.js additionally skips
the rAF loop and jumps straight to the target card. */
@media (prefers-reduced-motion: reduce){
.gcar-bg{ opacity:1; }
}
/* ---------------------------------------------------------------------------
33. BARBER LINK PAGE (/b/, #4111) — the web fallback behind every
printed barber QR code, rendered by functions/b/[[path]].js. These are the
ONLY classes that function emits beyond the shared chrome (.nav, .page-head,
.nf-actions, .footer), so the page can never drift from the site.
No new visual language: the card is .feature's paper + border on a narrow
centered measure, and the monogram reuses the app-screen avatar gradient
(§ .av-a) so a barber with no photo still reads as a person, not a gap.
--------------------------------------------------------------------------- */
.bp-card{
max-width:520px; margin:0 auto;
background:var(--bg-card);
border:1px solid var(--line);
border-radius:var(--radius-card);
padding:28px 26px;
text-align:center;
}
/* Photo and monogram share one square. The sits ON TOP and deletes itself
if it cannot load (file gone, offline, or a Content-Security-Policy that
declines the remote host), uncovering the initials underneath. That is why
the initials are always in the markup, not swapped in by script. */
.bp-face{
position:relative;
width:96px; height:96px; margin:0 auto 18px;
border-radius:999px; overflow:hidden;
background:linear-gradient(150deg,#FF9552,var(--orange-deep));
display:flex; align-items:center; justify-content:center;
}
.bp-initials{
font-family:var(--display); font-weight:600; font-size:34px;
color:#171613; letter-spacing:.02em;
}
.bp-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bp-name{
font-family:var(--display); font-weight:600;
font-size:clamp(26px,4vw,32px); line-height:1.05; letter-spacing:-.02em;
color:var(--ink);
}
.bp-shop{ margin-top:8px; color:var(--ink-dim); font-size:16px; letter-spacing:-.01em; }
.bp-rating{ margin-top:10px; color:var(--ink-dim); font-size:15px; }
.bp-rating .bp-star{ color:var(--orange); }
.bp-rating b{ color:var(--ink); font-weight:600; }
.bp-bio{
margin-top:16px; color:var(--ink-dim);
font-size:16px; line-height:1.5; letter-spacing:-.01em;
}
.bp-tags{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:18px; }
.bp-tag{
border:1px solid var(--line); border-radius:999px;
padding:6px 12px; font-size:13.5px; font-weight:600; letter-spacing:-.01em;
color:var(--ink-dim); background:var(--bg-dim);
}
/* the quiet "already have the app" line under the card */
.bp-open{ margin-top:26px; text-align:center; color:var(--ink-dim); font-size:15.5px; }
.bp-open a{ color:var(--orange-text); font-weight:600; }
.bp-open a:hover{ color:var(--orange-text-strong); }