/* ============================================================================ About Time — /display A working showing. One year of building, in one massive scroller. Self-contained: native scrolling + IntersectionObserver reveals (the Lenis smooth-scroll library was removed 2026-06-10 — better without). Light + dark, both first-class. ========================================================================== */ /* ---------- fonts ---------- */ /* Fraunces (optical display serif) + Inter, with graceful system fallbacks. */ :root{ /* Display/heading face = Elza (Adobe Fonts). Falls back to Fraunces until the Typekit kit that includes Elza is wired in the (see _template.ts). */ --serif:"omnes-pro",'Fraunces','Hoefler Text',Georgia,'Times New Roman',serif; --sans:"omnes-pro",'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif; --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* Brand/header face = Omnes Pro Bold Italic — the SAME typeface the live app uses for every page-header wordmark (lib/tokens.ts brandFont). Used here only at the marquee moments (the wordmark, the hero + close headlines, the tour cue, the offer line). From the same Typekit kit (fpj2rkm). */ --brand:'omnes-pro',sans-serif; /* accent ramp — shared across both themes (the brand spectrum) */ --lavender:#9D9DE0; --lilac:#B681CA; --rose:#E0859D; --purple:#A78BFA; --pink:#C97A8F; --maxw:1240px; --easing:cubic-bezier(.22,.61,.36,1); --reveal-y:18px; /* gentler reveal travel — the whole motion package dialed a notch calmer (2026-06-06) */ } /* DARK is the default scheme (the app's "midnight" feel). */ html, html[data-mode="dark"]{ --bg:#0A0810; --bg-2:#100D1B; --surface:#171326; --surface-2:#201A33; --surface-3:#2A2342; --text:#ECE7F8; --text-dim:#A89FC4; --text-faint:#7B7398; --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.14); --gold:#E0BE7E; --gold-deep:#C9A86A; --c-yes-bg:rgba(80,190,130,.16); --c-yes-fg:#74D7A2; /* comparison: yes */ --c-mid-bg:rgba(224,190,126,.16); --c-mid-fg:#E6C98A; /* comparison: partial */ --c-no-bg:rgba(225,106,133,.15); --c-no-fg:#EC93A7; /* comparison: no */ --shadow-sm:0 2px 8px rgba(0,0,0,.4); --shadow:0 24px 60px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.45); --shadow-lg:0 50px 120px rgba(0,0,0,.6), 0 10px 30px rgba(0,0,0,.5); --glow-a:rgba(157,157,224,.40); --glow-b:rgba(224,133,157,.30); --glow-c:rgba(167,139,250,.28); --frame-bezel:#06040C; --frame-chrome:#1b1730; --grid-line:rgba(255,255,255,.04); color-scheme:dark; } html[data-mode="light"]{ --bg:#F6F4FB; --bg-2:#FFFFFF; --surface:#FFFFFF; --surface-2:#F2EFF9; --surface-3:#ECE9F4; --text:#2E2640; --text-dim:#615C76; --text-faint:#8A85A0; --line:rgba(46,38,64,.10); --line-2:rgba(46,38,64,.16); --gold:#A9853E; --gold-deep:#8F6F2E; --c-yes-bg:rgba(42,150,90,.13); --c-yes-fg:#247A4A; /* comparison: yes */ --c-mid-bg:rgba(160,120,40,.16); --c-mid-fg:#8A6A1F; /* comparison: partial */ --c-no-bg:rgba(200,70,100,.12); --c-no-fg:#B04A66; /* comparison: no */ --shadow-sm:0 2px 8px rgba(46,38,64,.08); --shadow:0 24px 60px rgba(46,38,64,.16), 0 4px 16px rgba(46,38,64,.08); --shadow-lg:0 50px 120px rgba(46,38,64,.20), 0 10px 30px rgba(46,38,64,.12); --glow-a:rgba(157,157,224,.45); --glow-b:rgba(224,133,157,.32); --glow-c:rgba(167,139,250,.30); --frame-bezel:#E3DEEF; --frame-chrome:#F4F1FA; --grid-line:rgba(46,38,64,.05); color-scheme:light; } *{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; /* stop iOS auto-inflating text → widening the layout viewport */ text-size-adjust:100%; max-width:100%; overflow-x:clip; /* clip (NOT hidden) → sticky-safe; kills residual h-overflow */ overscroll-behavior-x:none; touch-action:pan-x pan-y pinch-zoom; scroll-behavior:auto; /* anchor clicks request smooth explicitly in display.js */ } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; max-width:100%; overflow-x:clip; overscroll-behavior-x:none; transition:background .5s var(--easing), color .5s var(--easing); } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ::selection{background:var(--rose);color:#1a1020} /* page-wide aurora backdrop */ body::before{ content:"";position:fixed;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(60vw 50vh at 12% -8%, var(--glow-a), transparent 60%), radial-gradient(55vw 50vh at 100% 4%, var(--glow-b), transparent 58%), radial-gradient(50vw 60vh at 50% 116%, var(--glow-c), transparent 60%); opacity:.85; transition:opacity .6s var(--easing); } body::after{ /* fine starfield/grain in dark, faint in light */ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background-image:radial-gradient(circle at 50% 50%, var(--grid-line) 1px, transparent 1px); background-size:46px 46px; mask-image:radial-gradient(circle at 50% 35%, #000 30%, transparent 78%); opacity:.6; } .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} .narrow{max-width:840px} .tight{max-width:680px} /* ---------- scroll progress + reading rail ---------- */ .progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:120;background:transparent;pointer-events:none} .progress__bar{height:100%;width:0;background:linear-gradient(90deg,var(--lavender),var(--lilac),var(--rose),var(--gold));box-shadow:0 0 18px var(--glow-b);transform-origin:left} /* ---------- nav ---------- */ .nav{ position:fixed;top:0;left:0;right:0;z-index:100; display:flex;align-items:center;gap:18px; padding:16px clamp(18px,3vw,34px); background:color-mix(in srgb, var(--bg) 60%, transparent); backdrop-filter:saturate(150%) blur(14px); -webkit-backdrop-filter:saturate(150%) blur(14px); border-bottom:1px solid transparent; transition:border-color .4s var(--easing), background .4s var(--easing); } .nav.is-stuck{border-bottom-color:var(--line);background:color-mix(in srgb, var(--bg) 82%, transparent)} .brand{display:flex;align-items:center;gap:11px;font-family:var(--brand);font-style:normal;font-weight:900;font-stretch:semi-condensed;text-transform:none;font-size:clamp(22px,3.8vw,58px);letter-spacing:.01em;color:var(--text)} .sprocket{ width:26px;height:26px;border-radius:8px;flex:none; background:conic-gradient(from 200deg,var(--lavender),var(--lilac),var(--rose),var(--purple),var(--gold),var(--lavender)); box-shadow:0 0 0 1px var(--line-2), 0 6px 18px var(--glow-b); animation:spin 22s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} .nav__links{margin-left:auto;display:flex;gap:4px;align-items:center} .nav__links a{font-size:14px;font-weight:600;color:var(--text-dim);padding:8px 12px;border-radius:10px;transition:.2s} .nav__links a:hover{color:var(--text);background:color-mix(in srgb,var(--text) 8%, transparent)} @media(max-width:880px){.nav__links{display:none}} /* theme toggle */ .toggle{ display:inline-flex;align-items:center;gap:8px;cursor:pointer; border:1px solid var(--line-2);background:color-mix(in srgb,var(--surface) 70%, transparent); color:var(--text);border-radius:999px;padding:7px 8px 7px 14px;font:inherit;font-size:14px;font-weight:700; transition:.25s; } .toggle:hover{border-color:var(--gold)} .toggle__track{position:relative;width:40px;height:22px;border-radius:999px;background:var(--surface-3);border:1px solid var(--line-2);flex:none} .toggle__knob{position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--rose));transition:transform .35s var(--easing);box-shadow:0 2px 6px rgba(0,0,0,.4)} html[data-mode="light"] .toggle__knob{transform:translateX(18px);background:linear-gradient(135deg,var(--lavender),var(--lilac))} .toggle .lbl-d{display:none} html[data-mode="light"] .toggle .lbl-l{display:none} html[data-mode="light"] .toggle .lbl-d{display:inline} /* ---------- type ---------- */ .eyebrow{ display:inline-flex;align-items:center;gap:9px; font-size:14px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase; color:var(--lavender); } .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rose);box-shadow:0 0 12px var(--rose)} .kicker{font-size:14px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;color:var(--lilac);margin:0 0 16px} h1,h2,h3{font-family:var(--serif);font-weight:580;letter-spacing:-.015em;line-height:1.04;margin:0} /* Marquee headline = the brand/header face (Guildhall Extended), all-caps italic — the live app uses this typeface for its page headers, so the hero + close headlines now read in the same voice. Extended caps run wide, so the clamp is trimmed and the tracking opened relative to the old Elza setting. */ .display{font-family:var(--brand);font-style:italic;font-weight:700;text-transform:none;font-size:clamp(34px,6vw,76px);line-height:1.0;letter-spacing:.005em} /* Accent words inside a marquee headline follow the brand face (just recoloured), so the line stays one typeface instead of mixing Guildhall + Elza mid-headline. */ .display em.glow,.display .serif-accent{font-family:inherit;text-transform:inherit} h2.big{font-family:var(--brand);font-style:normal;font-weight:700;text-transform:none;letter-spacing:.005em;font-size:clamp(30px,4.6vw,58px);line-height:1.02} h3{font-size:clamp(21px,2.3vw,29px);font-weight:600;line-height:1.1} .lede{font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:var(--text-dim);font-weight:400} .lede strong, .lede b{color:var(--text);font-weight:600} .serif-accent{font-family:var(--serif);font-style:italic;color:var(--lavender)} em.glow{font-style:italic;color:var(--rose);font-family:var(--serif)} .up{color:var(--text)} /* ---------- buttons / pills / chips ---------- */ .btn{ display:inline-flex;align-items:center;gap:9px;cursor:pointer;font:inherit;font-weight:700;font-size:15px; border-radius:13px;padding:14px 24px;border:1px solid transparent;transition:transform .14s var(--easing), box-shadow .25s, background .3s, border-color .3s; } .btn:hover{transform:translateY(-2px)} .btn--primary{background:linear-gradient(135deg,var(--rose),var(--pink));color:#231018;box-shadow:0 10px 30px var(--glow-b)} .btn--primary:hover{box-shadow:0 18px 44px var(--glow-b)} .btn--ghost{background:color-mix(in srgb,var(--surface) 70%, transparent);color:var(--text);border-color:var(--line-2)} .btn--ghost:hover{border-color:var(--gold)} .btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center} /* "Take the dime tour ↓" — the large, brand-face cue under the hero buttons that invites the reader to scroll into the showing. The arrow bobs to point the way. */ .dime-tour{ display:inline-flex;align-items:center;gap:14px;margin:34px 0 2px; font-family:var(--brand);font-style:italic;font-weight:700;text-transform:none; font-size:clamp(22px,3.4vw,40px);letter-spacing:.02em;line-height:1.05;color:var(--text); transition:color .2s; } .dime-tour:hover{color:var(--gold)} .dime-tour__arrow{ display:inline-grid;place-items:center;width:1.05em;height:1.05em;border-radius:50%; color:var(--lavender);font-style:normal; animation:dimeBob 1.8s var(--easing) infinite; } @keyframes dimeBob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}} @media(prefers-reduced-motion:reduce){.dime-tour__arrow{animation:none}} .pill-row{display:flex;gap:10px;flex-wrap:wrap} .pill{ font-size:14px;font-weight:700;color:var(--text); background:color-mix(in srgb,var(--surface) 72%, transparent); border:1px solid var(--line);border-radius:999px;padding:7px 14px;backdrop-filter:blur(6px); } .pill b{color:var(--lavender)} .chip{ display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:650;color:var(--text); background:color-mix(in srgb,var(--surface) 80%, transparent);border:1px solid var(--line-2); border-radius:999px;padding:9px 15px;box-shadow:var(--shadow-sm); } .chip .d{width:8px;height:8px;border-radius:50%;flex:none} .chip code{font-family:var(--mono);font-size:14px;color:var(--lavender)} /* ---------- reveal system (IntersectionObserver-driven) ---------- */ .reveal{opacity:0;transform:translateY(var(--reveal-y));transition:opacity .7s var(--easing), transform .7s var(--easing)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s} .no-js .reveal{opacity:1;transform:none} /* ---------- sections ---------- */ section{position:relative} .sec{padding:clamp(72px,11vh,150px) 0} .sec-head{max-width:760px;margin-bottom:44px} .sec-head.center{margin-left:auto;margin-right:auto;text-align:center} .dept-stack{display:grid;gap:clamp(80px,12vh,150px)} /* roomier vertical rhythm on DESKTOP only — Doug: "every section a little too close together" */ @media(min-width:900px){ .sec{padding:clamp(150px,19vh,280px) 0} .sec-head{margin-bottom:60px} .dept-stack{gap:clamp(150px,19vh,280px)} } /* ============================================================================ HERO ========================================================================== */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:120px 0 80px;overflow:hidden} /* Top fold is centered (Doug 2026-06-10): eyebrow, headline, lede, buttons, and the tour cue all center over the hero; the scroll cue below is already centered. */ .hero__inner{position:relative;z-index:3;max-width:980px;margin:0 auto;text-align:center} .hero .display{margin:22px 0 0} .hero__lede{margin:26px auto 30px;max-width:60ch} .hero .btn-row{margin-bottom:26px;justify-content:center} /* floating 2.5D product surfaces behind the hero copy */ .hero__field{position:absolute;inset:0;z-index:1;pointer-events:none;perspective:1600px} .float{ position:absolute;border-radius:16px;overflow:hidden;border:1px solid var(--line-2); box-shadow:var(--shadow-lg);background:var(--surface); will-change:transform;opacity:.9; } .float img{width:100%;height:100%;object-fit:cover;object-position:top center} .float--a{width:340px;height:230px;right:-2%;top:14%;transform:rotateY(-16deg) rotateX(6deg) rotate(2deg)} .float--b{width:280px;height:340px;right:20%;bottom:-6%;transform:rotateY(-10deg) rotateX(4deg) rotate(-3deg);opacity:.8} .float--c{width:300px;height:200px;left:-3%;bottom:16%;transform:rotateY(15deg) rotateX(5deg) rotate(-2deg);opacity:.75} @media(max-width:1024px){.hero__field{opacity:.4;filter:blur(1px)}} @media(max-width:680px){.hero__field{display:none}} .hero__cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-faint);font-size:14px;letter-spacing:2px;text-transform:uppercase;font-weight:700} .hero__cue .mouse{width:22px;height:34px;border:2px solid var(--line-2);border-radius:13px;position:relative} .hero__cue .mouse::after{content:"";position:absolute;top:6px;left:50%;width:3px;height:7px;border-radius:2px;background:var(--gold);transform:translateX(-50%);animation:wheel 1.6s infinite} @keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}60%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}} /* ============================================================================ DEVICE FRAME (reusable browser window) ========================================================================== */ .frame{ position:relative;border-radius:18px;overflow:hidden; background:var(--frame-bezel);border:1px solid var(--line-2); box-shadow:var(--shadow-lg); } .frame__chrome{display:flex;align-items:center;gap:7px;padding:11px 15px;background:var(--frame-chrome);border-bottom:1px solid var(--line)} .frame__chrome .dot{width:11px;height:11px;border-radius:50%} .frame__chrome .dot:nth-child(1){background:#ED6A5E} .frame__chrome .dot:nth-child(2){background:#F4BF4F} .frame__chrome .dot:nth-child(3){background:#61C554} .frame__url{margin-left:12px;font-family:var(--mono);font-size:14px;color:var(--text-faint);background:color-mix(in srgb,var(--bg) 60%, transparent);border:1px solid var(--line);padding:3px 12px;border-radius:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%} .frame__screen{position:relative;background:var(--surface);line-height:0} .frame__screen img{width:100%;height:auto;display:block} /* poster variant: tall full-page shot windowed to its top */ .frame--poster .frame__screen{max-height:680px;overflow:hidden} .frame--poster .frame__screen::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(to bottom,transparent,var(--bg));opacity:.0} .frame__glow{position:absolute;inset:-12% -8%;z-index:-1;background:radial-gradient(closest-side,var(--glow-b),transparent);filter:blur(40px);opacity:.7} /* floating UI fragment chips that orbit a frame (parallax) */ .orbit{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:8px; font-size:14px;font-weight:700;color:var(--text); background:color-mix(in srgb,var(--surface) 92%, transparent); border:1px solid var(--line-2);border-radius:12px;padding:9px 13px;box-shadow:var(--shadow); backdrop-filter:blur(8px);will-change:transform} .orbit .ico{width:9px;height:9px;border-radius:50%;flex:none} .orbit small{color:var(--text-dim);font-weight:600} @media(max-width:680px){.orbit{display:none}} /* ---------- screenshot placeholders (TEMPORARY — swap for real shots) ---------- Fills a .frame__screen slot at the right 3:2 proportions and says what screen to capture + the exact target filename. Themes via CSS vars (no data-shot). */ .shot-ph{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center; width:100%;aspect-ratio:3 / 2;min-height:200px;padding:24px 30px; background: repeating-linear-gradient(45deg, transparent, transparent 16px, color-mix(in srgb,var(--text) 4%, transparent) 16px, color-mix(in srgb,var(--text) 4%, transparent) 32px), var(--surface); border:1.5px dashed var(--line-2); } .shot-ph b{font-family:var(--sans);font-weight:800;font-size:14px;letter-spacing:2px;text-transform:uppercase;color:var(--lavender)} .shot-ph .u{font-family:var(--sans);font-size:clamp(14px,1.1cqw,16px);line-height:1.5;color:var(--text);max-width:46ch} .shot-ph .path{font-family:var(--mono);font-size:14px;color:var(--text-faint);word-break:break-all} /* ============================================================================ MERGE SCENE — five tools become one organism ========================================================================== */ .scene{position:relative} .scene--tall{height:360vh} .scene__stage{position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden} .scene__center{position:relative;width:min(92vw,1180px);height:100%;display:flex;align-items:center;justify-content:center} .merge__title{position:absolute;top:8%;left:50%;transform:translateX(-50%);text-align:center;z-index:5;width:min(90vw,820px);will-change:opacity,transform} .merge__cards{position:absolute;inset:0;z-index:2} /* Junk-drawer cards are rendered archetype mocks (theme-swapped via data-shot). */ .tool-card{ position:absolute;left:50%;top:50%;width:340px;border-radius:22px;overflow:hidden; background:transparent;border:none;padding:0; /* transparent floating assets now — the app window carries its own baked shadow, so no card-rectangle box-shadow (it would cast a ghost shadow on the empty bg) */ will-change:transform,opacity; } .tool-card img{display:block;width:100%;height:auto} .merge__core{position:absolute;left:50%;top:45%;width:min(88vw,960px);transform:translate(-50%,-50%) scale(.7);opacity:0;z-index:3;will-change:transform,opacity} .merge__core .frame__screen{max-height:640px} .merge__core .frame__screen::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(to bottom,transparent,var(--frame-bezel));z-index:2} .merge__caption{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);text-align:center;width:min(86vw,600px);z-index:6;opacity:0;will-change:opacity,transform} .merge__caption::before{content:"";position:absolute;z-index:-1;inset:-36px -66px -42px;border-radius:30px;background:color-mix(in srgb,var(--bg) 92%,transparent);filter:blur(28px);pointer-events:none} /* mobile merge: tighter cards, a much bigger dashboard core, title up out of the way */ @media(max-width:680px){ .scene--tall{height:300vh} .merge__title{top:5%;width:92vw} .merge__title h2{font-size:clamp(27px,9.4vw,40px)} .merge__title .lede{font-size:14.5px;max-width:40ch} .tool-card{width:208px;border-radius:15px} .merge__core{width:94vw;top:47%} .merge__core .frame__screen{max-height:58vh} .merge__caption{top:47%;width:92vw} } /* ============================================================================ DAY IN THE LIFE — pinned, cross-fading chapters with a connective thread ========================================================================== */ /* --pad: ~5% of width each side up to 1920px, ramping to ~20% by 4K, so the whole card+text composition is held in the middle and scales (it never elongates) */ .day{height:300vh;position:relative;--pad:max(5vw, calc((100vw - 2133px) * 0.45))} .day__stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;grid-template-columns:1fr;align-items:center} .day__rail{position:absolute;top:0;left:0;right:0;height:100%;pointer-events:none;z-index:1} /* timeline moved to the RIGHT gutter (right of the text), freeing the left for the bigger plate */ .day__clock{position:absolute;right:clamp(16px,2.6vw,46px);left:auto;top:50%;transform:translateY(-50%);z-index:6;font-family:var(--mono);font-size:14px;color:var(--lavender);letter-spacing:1px;writing-mode:vertical-rl;text-orientation:mixed;opacity:.8} .day__progress{position:absolute;right:clamp(46px,4vw,84px);left:auto;top:14%;bottom:14%;width:2px;background:var(--line);z-index:2;border-radius:2px;overflow:hidden} .day__progress i{position:absolute;left:0;top:0;width:100%;height:0;background:linear-gradient(var(--gold),var(--rose));box-shadow:0 0 12px var(--glow-b)} /* the chapter is a centered BAND (width = viewport - 2*--pad); container-type makes the card + text inside it scale together via cqw units (1cqw = 1% of the band width) */ .chapter{position:absolute;top:0;bottom:0;left:var(--pad);right:var(--pad);container-type:inline-size;opacity:0;will-change:opacity,transform} /* the plate: locked to a 3:2 window (no more wide squish), sized as a share of the band but capped by viewport height so it always fits; sits at the band's left edge */ .chapter__media{position:absolute;top:50%;left:0;transform:translateY(-50%);width:min(87cqw, calc(94svh * 3 / 2))} .chapter .frame__screen{aspect-ratio:3 / 2;overflow:hidden} .chapter .frame__screen img{width:100%;height:100%;object-fit:cover;object-position:top center} .chapter .frame__screen::after{content:"";position:absolute;left:0;right:0;bottom:0;height:104px;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--bg) 82%,transparent));pointer-events:none;z-index:1} /* the text block steps onto the plate's empty edge, lifted on a feathered halo of the page bg */ /* text rides from the plate's middle-right edge to the band's right edge; it scales with the band (cqw fonts below), keeping the left edge pinned to the plate's middle-right */ .chapter__copy{position:absolute;top:50%;left:58cqw;right:0;transform:translateY(-50%);z-index:6} /* a tight, soft-edged box that hugs the text block (not a per-letter halo), with a touch more feather downward — a blurred rounded rectangle does the feathering. */ .chapter__copy::before{content:"";position:absolute;z-index:-1;inset:-14px -22px -40px -24px;border-radius:22px;background:color-mix(in srgb,var(--bg) 83%,transparent);filter:blur(16px);pointer-events:none} /* per-chapter plate width — the overlap grows with the plate (copy is right-anchored) */ .chapter--fill{--plate:88%} .chapter--tight{--plate:88%} /* unified zoom — every day-scene plate matches the 8AM treatment */ .chapter--big{--plate:88%} .chapter__step{font-family:var(--sans);font-size:clamp(14px, 1cqw, 18px);letter-spacing:2px;text-transform:uppercase;color:var(--lavender);font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:11px} .chapter__step .n{display:inline-grid;place-items:center;min-width:30px;height:24px;padding:0 11px;border-radius:999px;background:color-mix(in srgb,var(--lavender) 16%, transparent);border:1px solid var(--line-2);font-variant-numeric:tabular-nums;letter-spacing:.4px;white-space:nowrap} .chapter h3{font-size:clamp(26px, 2.2cqw, 48px);margin-bottom:14px} .chapter p{color:var(--text-dim);font-size:clamp(16px, 1.25cqw, 25px);line-height:1.6} .chapter p .up{color:var(--text);font-weight:600} .chapter__tags{margin-top:18px;display:flex;gap:8px;flex-wrap:wrap} .tag-mono{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-weight:650;font-size:14px;color:var(--text-dim);background:color-mix(in srgb,var(--surface) 72%,transparent);border:1px solid var(--line-2);padding:6px 13px;border-radius:999px} .tag-mono::before{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--lavender),var(--rose));flex:none} @media(max-width:860px){ .day{height:260vh} /* shorter cinematic scenes on phones = fewer swipes to cross */ .chapter{display:flex;flex-direction:column;justify-content:center;gap:20px;padding:0 24px} .chapter__media{position:static;transform:none;width:100%;left:auto;order:-1} .chapter__copy{position:static;transform:none;width:100%;left:auto;right:auto} .chapter__copy::before{display:none} .chapter .frame__screen{max-height:46svh} .day__progress,.day__clock{display:none} } /* connective thread between departments */ .thread{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:visible} .thread path{fill:none;stroke:url(#threadgrad);stroke-width:2.5;stroke-linecap:round; stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px var(--glow-b))} .thread .pulse{fill:var(--gold);filter:drop-shadow(0 0 8px var(--gold))} /* ============================================================================ DEPARTMENT SECTIONS (alternating) ========================================================================== */ /* overlapping 12-col layout: the big plate slides UNDER the text on whichever side */ /* align-items:start — both columns pin to the top so the copy never bounces vertically as the 4:3 plate's height changes with viewport width/zoom. */ .dept{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start} .dept__copy,.dept__media{min-width:0} .dept__media{grid-row:1;grid-column:5 / -1;z-index:1} /* big plate, right */ .dept__copy{grid-row:1;grid-column:1 / 5;position:relative;align-self:center;z-index:3} /* copy left — vertically centered on the plate */ .dept.rev .dept__media{grid-column:1 / 9} /* plate left on alternating rows */ .dept.rev .dept__copy{grid-column:9 / -1} .dept__copy::before{content:"";position:absolute;z-index:-1;inset:-16px -26px -38px -28px;border-radius:22px;background:color-mix(in srgb,var(--bg) 83%,transparent);filter:blur(16px);pointer-events:none} /* dept plates: fixed 4:3 ratio — card never distorts as viewport stretches/contracts */ .dept .frame__screen{aspect-ratio:4/3;overflow:hidden} .dept .frame__screen img{width:100%;height:100%;object-fit:cover;object-position:top center} /* .dept--read: a content-dense plate that grows to fill the viewable width and bleeds its empty right edge off-screen with a soft feather (legibility-first) */ .dept--read{position:relative} .dept--read .dept__media{grid-column:3 / -1;margin-right:calc(50% - 50vw);transform:translateX(0.45in)} .dept--read::after{content:"";position:absolute;top:0;bottom:0;right:calc(50% - 50vw);width:96px;background:linear-gradient(to right,transparent,var(--bg) 92%);pointer-events:none;z-index:4} /* rev side (e.g. Field Trips): the big plate bleeds off the LEFT edge instead */ .dept--read.rev .dept__media{grid-column:1 / 10;margin-left:calc(50% - 50vw);margin-right:0;transform:translateX(-0.45in)} .dept--read.rev::after{left:calc(50% - 50vw);right:auto;background:linear-gradient(to left,transparent,var(--bg) 92%)} /* vertical nudge: text down + plate up (~3 lines) — keeps each side's bleed translateX */ .dept--vnudge .dept__copy{transform:translateY(46px)} .dept--read.dept--vnudge .dept__media{transform:translateX(0.45in) translateY(-38px)} /* right-bleed (non-rev) */ .dept--read.rev.dept--vnudge .dept__media{transform:translateX(-0.45in) translateY(-38px)} /* left-bleed (rev) */ .dept__num{font-family:var(--serif);font-size:30px;font-style:italic;color:var(--lavender);font-weight:600;letter-spacing:0;margin-bottom:16px;display:flex;align-items:center;gap:12px} .dept__num::before{content:"";width:34px;height:1px;background:var(--lavender);opacity:.6} .dept__copy h2{margin-bottom:16px} .dept__copy>p{color:var(--text-dim);font-size:18px} .dept__esa-note{color:var(--text-dim);font-size:18px;font-weight:500;margin-top:1.1em} .dept__media{position:relative} .flist{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:13px} .flist li{position:relative;padding-left:30px;color:var(--text);font-size:15.5px;line-height:1.5} .flist li::before{content:"";position:absolute;left:0;top:7px;width:15px;height:15px;border-radius:5px;background:linear-gradient(135deg,var(--lavender),var(--rose));box-shadow:0 2px 8px var(--glow-b)} .flist li b{color:var(--text);font-weight:700} .flist li .vs{display:block;color:var(--text-dim);font-size:14px;margin-top:4px} .flist li code{font-family:var(--mono);font-size:14px;color:var(--lavender);overflow-wrap:anywhere} .tag-mono{overflow-wrap:anywhere} /* Field Trip Finder copy reads wider + a touch smaller (Doug 2026-06-10): the lead line gets one more grid column (8/-1 vs the default 9/-1), stepping onto the plate, and the heading drops 10%. Sits just ABOVE the mobile reset so that reset (equal specificity, later source order) still collapses it to full width on phones. */ .dept--ftf.rev .dept__copy{grid-column:8 / -1} .dept--ftf .dept__copy h2.big{font-size:clamp(27px,4.14vw,52.2px)} /* dept--finder: Curriculum Finder copy — 10% smaller type, column 20% wider. Desktop-only grid overrides (same media guard as dept--wide). */ @media(min-width:861px){ .dept--finder .dept__copy{grid-column:1 / 6} .dept--finder.rev .dept__copy{grid-column:8 / -1} } .dept--finder .dept__num{font-size:27px} .dept--finder .dept__copy h2.big{font-size:clamp(27px,4.14vw,52.2px)} .dept--finder .dept__copy>p{font-size:16.2px} /* dept--wide: a copy column one grid column wider than the default, either side (Planner uses it — its old 4-col column set 14-char lines). Desktop-only via the media guard: the 860px stack reset is lower-specificity for non-rev rows, so an unguarded rule would leak into mobile. The dept__copy::before blur backdrop keeps the overlap onto the plate legible. */ @media(min-width:861px){ .dept--wide .dept__copy{grid-column:1 / 6} .dept--wide.rev .dept__copy{grid-column:8 / -1} } @media(max-width:860px){ .dept{grid-template-columns:minmax(0,1fr);gap:28px} /* Mobile: stack cleanly — plate on top, full-width copy underneath. Reset EVERY desktop read/bleed/vnudge treatment so the copy never collapses to a sliver (an un-reset .dept--read plate spawns implicit columns and crushes the text). */ .dept__media,.dept.rev .dept__media, .dept--read .dept__media,.dept--read.rev .dept__media, .dept--read.dept--vnudge .dept__media,.dept--read.rev.dept--vnudge .dept__media{ grid-column:1/-1;grid-row:auto;order:-1;margin:0;transform:none} .dept__copy,.dept.rev .dept__copy{grid-column:1/-1;grid-row:auto;order:0} .dept--vnudge .dept__copy{transform:none} .dept__copy::before{display:none} .dept--read::after,.dept--read.rev::after{display:none} .dept--read .frame__screen img,.dept--read.rev .frame__screen img{width:100%;max-width:100%;height:100%;object-fit:cover;object-position:top center} } /* ============================================================================ CRAFT LAYER — the parts you only notice when they fail ========================================================================== */ .craft{background: linear-gradient(180deg,transparent, color-mix(in srgb,var(--bg-2) 70%, transparent), transparent)} .craft-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:900px){.craft-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.craft-grid{grid-template-columns:1fr}} .craft-card{ background:color-mix(in srgb,var(--surface) 80%, transparent);border:1px solid var(--line); border-radius:16px;padding:22px;position:relative;overflow:hidden;transition:border-color .3s, transform .3s; } .craft-card:hover{border-color:var(--line-2);transform:translateY(-3px)} .craft-card .tag{font-family:var(--mono);font-size:14px;letter-spacing:1px;text-transform:uppercase;color:var(--lavender);font-weight:700} .craft-card h4{font-family:var(--sans);font-weight:750;font-size:16.5px;margin:10px 0 7px;color:var(--text)} .craft-card p{margin:0;font-size:14px;color:var(--text-dim);line-height:1.5} .craft-card code{font-family:var(--mono);font-size:14px;color:var(--rose)} /* ============================================================================ COMPARISON TABLE — who does what, and who does it all ========================================================================== */ .cmp-swipe{display:none;text-align:right;font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-faint);margin:0 0 8px} .cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:20px;border:1px solid var(--line-2);box-shadow:var(--shadow);background:color-mix(in srgb,var(--surface) 60%,transparent)} .cmp-scroll::-webkit-scrollbar{height:10px} .cmp-scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px} .compare{width:100%;min-width:980px;border-collapse:collapse;font-size:14px} .compare th,.compare td{padding:14px;text-align:center;border-bottom:1px solid var(--line);vertical-align:middle} .compare thead th{background:var(--surface-2);color:var(--text);font-weight:750;font-size:14px;line-height:1.25;letter-spacing:.2px;border-bottom:1px solid var(--line-2)} .compare thead th.cap,.compare tbody th{position:sticky;left:0;background:var(--surface-2);text-align:left;border-right:1px solid var(--line);min-width:212px;z-index:1} .compare thead th.cap{z-index:2} .compare tbody th{font-weight:600;color:var(--text);font-size:14px} .compare tbody tr:last-child td,.compare tbody tr:last-child th{border-bottom:none} /* semantic tinted cells — green = yes, amber = partial, red = no — uniform across every column */ .compare td.y{background:var(--c-yes-bg);color:var(--c-yes-fg);font-weight:750} .compare td.m{background:var(--c-mid-bg);color:var(--c-mid-fg);font-weight:700} .compare td.n{background:var(--c-no-bg);color:var(--c-no-fg);font-weight:650} /* About Time = the centered green spine (structure, no gold) */ .compare td.col-us{box-shadow:inset 1px 0 var(--line-2), inset -1px 0 var(--line-2);font-weight:800} .compare thead th.us{background:var(--surface-3);box-shadow:inset 1px 0 var(--line-2), inset -1px 0 var(--line-2)} /* job classification under each column name */ .lane{display:block;margin-top:6px;font-family:var(--sans);font-size:14px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--text-faint)} .compare thead th.us .lane{color:var(--gold-deep)} .cmp-note{margin:24px auto 0;color:var(--text-dim);font-size:16px;line-height:1.65;max-width:76ch;text-align:center} .cmp-note strong{color:var(--text)} .cmp-note em{color:var(--lavender);font-style:italic} @media(max-width:760px){ .cmp-swipe{display:block} } /* ============================================================================ NUMBERS ========================================================================== */ .numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} @media(max-width:900px){.numbers{grid-template-columns:repeat(2,1fr)}} .stat{ text-align:center;padding:30px 16px;border-radius:18px; background:color-mix(in srgb,var(--surface) 65%, transparent);border:1px solid var(--line); } .stat .n{font-family:var(--serif);font-size:clamp(34px,4.4vw,56px);font-weight:560;line-height:1;color:var(--text);letter-spacing:-.02em} .stat .n .unit{font-size:.5em;color:var(--lavender);margin-left:2px} .stat .k{font-size:14px;color:var(--text-dim);margin-top:10px;font-weight:600;letter-spacing:.2px} /* ============================================================================ QUOTE / PULLS ========================================================================== */ .pull{font-family:var(--serif);font-weight:540;font-size:clamp(26px,3.6vw,44px);line-height:1.16;letter-spacing:-.015em;max-width:20ch} .pull em{font-style:italic;color:var(--lavender)} /* ============================================================================ CLOSE ========================================================================== */ .close{position:relative;text-align:center;padding:clamp(90px,14vh,180px) 0;overflow:hidden} .close__card{position:relative;z-index:2;max-width:880px;margin:0 auto} .close .display{margin-bottom:22px} .offer{ margin-top:40px;display:inline-flex;flex-direction:column;gap:6px;align-items:center; border:1px solid var(--line-2);border-radius:20px;padding:24px 40px; background:color-mix(in srgb,var(--surface) 60%, transparent);backdrop-filter:blur(8px); } .offer .big{font-family:var(--brand);font-style:italic;font-weight:700;text-transform:none;letter-spacing:.01em;font-size:clamp(24px,2.8vw,36px);color:var(--text)} .offer .big b{color:var(--lavender);font-weight:700} .offer small{color:var(--text-dim);font-size:14px} footer{border-top:1px solid var(--line);padding:48px 0 60px;margin-top:40px} footer .wrap{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between} footer .fine{color:var(--text-faint);font-size:14px;max-width:60ch;line-height:1.6} /* ---------- reduced motion ---------- */ @media(prefers-reduced-motion:reduce){ *{scroll-behavior:auto !important} .sprocket{animation:none} .reveal{opacity:1;transform:none;transition:none} .hero__cue .mouse::after{animation:none} .scene--tall{height:auto} .scene__stage{position:relative;height:auto;padding:60px 0} .day{height:auto} .day__stage{position:relative;height:auto;display:block;padding:40px 0} .chapter{position:relative;opacity:1;grid-template-columns:1fr;gap:24px;padding:40px 24px} .merge__core{position:relative;transform:none;opacity:1;left:auto;top:auto} .merge__cards,.merge__title,.merge__caption{position:relative} }