/* ============================================================================ navi-kit.css - the Navi Founders shared page kit ---------------------------------------------------------------------------- FAITHFUL COPY of the locked system as it lives on the built home page (lab/page/index-03-halftone-firstframe.html). Every token, base rule, shared role, the nav, the footer, the closing band and the [data-halftone] hook are pulled from there verbatim - no color, size, spacing, radius or material is invented here. The home page is NOT wired to this file (it keeps its own inline copy); if this file ever disagrees with the home page, the home page is right and this file is the bug. Load order on every content page, matching the home page's own : fonts.css -> night.css -> material.css -> navi-kit.css then navi-kit.js before . NEW-BUT-SPECCED (built only in existing tokens, nothing off-system): - the mobile hamburger overlay (site-structure.md ch.2 mandates it; the home page never built one). Midnight field, Onest links, 44px targets. - the canonical footer map (Programme / More / Contact). The home footer is an admitted placeholder; this is the real one from the spec. ========================================================================== */ :root{ /* ---- colour, locked (docs/DIRECTION.md color system) ---- */ --m-50:#F3F7FF; --m-100:#E7EFFF; --m-300:#B5CAFA; --m-500:#7796E0; --m-600:#5C7CCC; --m-900:#1C3478; --m-950:#0A1A4E; --s-200:#CAE0FF; --s-500:#5C9DF5; --s-600:#347FE0; --s-700:#1065C9; --c-400:#FF8C73; --c-500:#F2674A; --c-700:#BD2800; --n-0:#FFFFFF; --n-100:#EFF0F3; --n-200:#E2E5EA; --n-300:#C9CED7; --n-600:#697283; --n-700:#525B6C; --n-800:#3B4251; --paper:#F8F9FB; --surface:var(--n-0); --line:var(--n-200); --text-1:var(--m-950); --text-2:var(--n-800); --text-3:var(--n-700); --text-4:var(--n-600); --brand:var(--m-950); --brand-hover:var(--m-900); --fill-brand:var(--m-100); --accent-on-light:var(--s-700); --accent-on-dark:var(--s-500); --accent-highlight:var(--s-200); --cta:var(--c-500); --on-cta:var(--m-950); --focus:var(--s-600); /* ---- type scale: size(n) = 17 * 1.2^n ---- */ --fs-100:11.8px; --fs-200:14.2px; --fs-300:17px; --fs-400:20.4px; --fs-500:24.5px; --fs-600:29.4px; --fs-700:35.3px; --fs-800:42.3px; --fs-900:50.8px; --fs-1000:60.9px; --lh-100:1.70; --lh-200:1.65; --lh-300:1.54; --lh-400:1.45; --lh-500:1.37; --lh-600:1.30; --lh-700:1.25; --lh-800:1.20; --lh-900:1.17; --lh-1000:1.14; --ls-100:0.015em; --ls-200:0.007em; --ls-300:0em; --ls-400:-0.005em; --ls-500:-0.01em; --ls-600:-0.013em; --ls-700:-0.016em; --ls-800:-0.019em; --ls-900:-0.021em; --ls-1000:-0.023em; --wt-100:600; --wt-200:400; --wt-300:400; --wt-400:500; --wt-500:600; --wt-600:700; --wt-700:700; --wt-800:700; --wt-900:700; --wt-1000:700; --wt-button:600; /* ---- spacing: 4px base ---- */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px; --sp-32:128px; /* ---- vertical rhythm roles ("Flow"): every stacked vertical gap uses a role NAME, never a raw --sp value. ~1.55x escalating ladder. ---- */ --flow-tight:12px; /* label -> value; chip rows; tightest intra-component */ --flow-bond:16px; /* eyebrow/kicker -> heading; card heading -> body */ --flow:24px; /* heading -> lede; paragraph -> paragraph (default) */ --flow-loose:40px; /* text block -> CTA; coda strips; divider breaks */ --flow-block:64px; /* section heading-block -> content; text -> media */ --flow-section:96px; /* section top/bottom padding (the page's chapter beat) */ --container:1180px; --gutter:40px; --edge:clamp(40px, 5vw, 104px); /* 18-09: the bar's gutter, full-bleed, the home page's value; his word, left on every page */ /* ---- radius ladder: 12 * 1.44^n ---- */ --r-100:5.8px; --r-200:8.3px; --r-300:12px; --r-400:17.3px; --r-500:24.9px; /* ---- shape constant as a proportion on media ---- */ --portrait:1 / 1.44; /* ---- fixed-nav height, so a page's first section can clear the bar. The nav is sp-5 top+bottom (40) over a 32px brand => ~72px. NOT on the home page (its hero sits under a transparent masthead); content pages need it because the bar is solid from the top. ---- */ --nav-h:72px; } @media (max-width:900px){ :root{ --fs-1000:46.4px; --fs-900:40.4px; --fs-800:35.3px; --fs-700:30.8px; --fs-600:26.8px; --fs-500:23.4px; --flow-tight:8px; --flow-bond:12px; --flow:20px; --flow-loose:32px; --flow-block:48px; --flow-section:64px; --gutter:20px; --edge:20px; } } *{box-sizing:border-box} html,body{margin:0} /* overflow-x:clip, not hidden. Several sections break the 1180 column with width:100vw, which is 100% of the viewport INCLUDING the scrollbar gutter, so on any platform that reserves one (Windows, Linux) they overhang by ~15px and the whole page gains a horizontal scrollbar. clip removes that without making the element a scroll container - hidden would, and that silently kills position:sticky on the rails inside. */ html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h);overflow-x:clip} body{background:var(--paper);color:var(--text-2); font-family:Geist,system-ui,sans-serif;font-size:var(--fs-300); line-height:var(--lh-300);letter-spacing:var(--ls-300);font-weight:var(--wt-300); -webkit-font-smoothing:antialiased} img{display:block;max-width:100%} .site{max-width:var(--container);margin:0 auto;background:var(--paper)} section{scroll-margin-top:var(--sp-16)} /* ---- shared roles ---- */ /* .eye is a role DIRECTION defines and this site does not use. It is kept here so the kit still mirrors the documented system, but nothing may set it: the home page carries no eyebrow above any of its eight headings, and Matt's standing note on the pattern is that an uppercase kicker stacked over a headline is an AI-landing-page tell. The eight content pages had 23 of them, one above every h1 and most h2s; all 23 are gone. If a kicker is carrying real information rather than restating the heading, demote it to a sub-heading or a spec line BELOW the promise (see .phero .spec on /what-you-get) - do not bring this back. */ .eye{font-size:var(--fs-200);line-height:var(--lh-200);letter-spacing:var(--ls-100); font-weight:var(--wt-100);text-transform:uppercase;color:var(--accent-on-light);margin:0 0 var(--flow-bond)} .k{font-size:var(--fs-200);line-height:var(--lh-200);letter-spacing:var(--ls-100); font-weight:var(--wt-100);text-transform:uppercase;color:var(--text-4);margin:0 0 var(--flow-bond)} h1,h2,h3,h4{font-family:Onest,sans-serif;color:var(--text-1);margin:0} h1{font-size:var(--fs-1000);line-height:var(--lh-1000);letter-spacing:var(--ls-1000);font-weight:var(--wt-1000)} h2{font-size:var(--fs-900);line-height:var(--lh-900);letter-spacing:var(--ls-900);font-weight:var(--wt-900)} h3{font-size:var(--fs-600);line-height:var(--lh-600);letter-spacing:var(--ls-600);font-weight:var(--wt-600)} h4{font-size:var(--fs-500);line-height:var(--lh-500);letter-spacing:var(--ls-500);font-weight:var(--wt-500)} p{margin:0} /* figure keeps the UA default margin:1em 40px unless reset. Every page that noticed set margin:0 locally; the three that did not ended up with 40px white gutters inside photo cards. Reset once, here. */ figure{margin:0} .lede{font-size:var(--fs-400);line-height:var(--lh-400);letter-spacing:var(--ls-400); font-weight:var(--wt-400);color:var(--text-3);max-width:46ch} .small{font-size:var(--fs-200);line-height:var(--lh-200);letter-spacing:var(--ls-200);color:var(--text-4)} /* Geist forms "->" into a real arrow as a ligature, and any letter-spacing on the run kills it, so the same link renders "→" in one place and a literal "->" in another. Links inside letter-spaced roles opt back out. */ .small .lnk,.small a,.k .lnk,.k a{letter-spacing:0} .btn{font-family:Geist,sans-serif;font-size:var(--fs-300);font-weight:var(--wt-button); padding:var(--sp-4) var(--sp-6);border-radius:var(--r-200);display:inline-block; background:var(--cta);color:var(--on-cta);text-decoration:none;transition:background .15s;border:0;cursor:pointer} .btn:hover{background:var(--c-400)} .btn-brand{background:var(--brand);color:#fff} .btn-brand:hover{background:var(--brand-hover)} .btn-ghost{background:transparent;color:var(--text-1);box-shadow:inset 0 0 0 1px var(--n-300)} .btn-ghost:hover{background:var(--n-100)} /* An inline link must never resize the sentence it sits in. .lnk used to be a hard fs-300, so "email hello@navifounders.com and ask" rendered the address a full step larger than the help text around it (eight of these across /call, /scholarship and the bands). font-size:inherit makes the link take the size of whatever it is written into; the two standalone secondary links under a CTA ask for body size back explicitly below. letter-spacing is reset for the same reason .small did it: any tracking on the run kills Geist's "->" ligature. */ /* letter-spacing:0 as a LITERAL, not var(--ls-300). night.css re-declares the tracking tokens inside .night to counter optical bloom, so --ls-300 is 0.004em there rather than 0 - which is enough to kill the ligature. That is why the arrow on the closing band read "->" while the identical link on paper read "→". Anything that has to keep the ligature must zero the tracking outright. */ .lnk{font-size:inherit;letter-spacing:0;font-weight:var(--wt-100); color:var(--accent-on-light);text-decoration:none;transition:color .15s} .lnk:hover{color:var(--m-950)} /* the lone link under a closing CTA is its own line, not part of a sentence */ .band .re .lnk,.costs .lnk{font-size:var(--fs-300)} a:focus-visible,.btn:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--r-100)} /* .tbc: an INTERNAL note, addressed to us, never to a reader. It used to be a no-op, which is how fourteen "to be confirmed by Matt" lines shipped as ordinary body copy across four pages. It is now impossible to miss: if you can see this treatment on a page, that text is not finished and must not go live. Fill it from truth or delete the row. */ .tbc{background:repeating-linear-gradient(135deg,#FFF1C2,#FFF1C2 8px,#FFE08A 8px,#FFE08A 16px); color:#5A4200;box-shadow:inset 0 0 0 2px #B8860B;border-radius:var(--r-100); padding:.15em .4em;font-style:italic} .tbc::before{content:"INTERNAL - NOT FOR LAUNCH: ";font-weight:var(--wt-500);font-style:normal} /* ============================ NAV ============================ Content-page variant of the home masthead: the SAME bar, classes and look, but always solid (content pages have no hero to sit transparently over) and dressed from the top. Hides on scroll-down, returns on scroll-up. Kept in lockstep with the home page's .nav so the wordmark, links, dot marker and CTA read identically across the site. */ .nav{position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:1px solid transparent; transition:transform .35s ease,background .3s ease,border-color .3s ease,backdrop-filter .3s ease} .nav-inner{max-width:none;margin:0;padding:var(--sp-5) var(--edge); /* 18-09: full-bleed like the home page, so the logo stops jumping 98px between pages */ display:flex;align-items:center;gap:var(--sp-8)} .nav.is-solid .nav-right{margin-left:auto} .nav.is-hidden{transform:translateY(-100%)} .nav.is-solid{background:rgba(248,249,251,.82);backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom-color:var(--line)} .brand{font-family:Onest,sans-serif;font-weight:var(--wt-600);font-size:var(--fs-500); letter-spacing:var(--ls-400);color:var(--text-1);display:flex;align-items:center; gap:var(--sp-3);text-decoration:none;white-space:nowrap} /* 19-09: the home sheet had this, the kit did not - the wordmark broke to "Navi / Founders" between 901 and ~980px */ .brand .mark{width:32px;height:32px;flex:none} .brand .mark img{width:100%;height:100%;display:block} .nav-right{display:flex;align-items:center;gap:var(--sp-6)} .navlinks{display:flex;align-items:center;gap:var(--sp-6)} .navlinks a{position:relative;font-size:15px;font-weight:var(--wt-400);color:var(--text-2); text-decoration:none;white-space:nowrap;padding-bottom:11px;transition:color .15s} .navlinks a:hover{color:var(--text-1)} .navlinks a::after{content:"";position:absolute;left:50%;bottom:0;width:5px;height:5px; margin-left:-2.5px;border-radius:50%;background:#5C9DF5;opacity:0;transform:scale(.3); transition:opacity .2s ease,transform .2s ease} .navlinks a:hover::after,.navlinks a.is-active::after{opacity:1;transform:none} .navbtn{font-family:Geist,sans-serif;font-size:var(--fs-200);font-weight:var(--wt-button); color:var(--on-cta);background:var(--cta);padding:var(--sp-3) var(--sp-5);border-radius:var(--r-200); /* 18-09 audit: was #fff, 3.08:1 on coral at 14px; navy like every other button, 5.36:1 */ text-decoration:none;white-space:nowrap;opacity:0;transform:translateX(8px);pointer-events:none; transition:background .15s,opacity .3s ease,transform .3s ease} .navbtn:hover{background:var(--c-400)} .nav.has-cta .navbtn{opacity:1;transform:none;pointer-events:auto} @media (prefers-reduced-motion:reduce){ .nav{transition:background .3s ease,border-color .3s ease} } /* Hamburger button - hidden on desktop, shown when the inline links collapse. 44px hit target per the spec. Three bars in the brand ink. */ .nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center; background:transparent;border:0;cursor:pointer;color:var(--text-1);border-radius:var(--r-200);margin:-6px 0} .nav-toggle svg{width:24px;height:24px;display:block} /* Full-screen mobile overlay: a Midnight (.night) field carrying the same grain as the dark chapters, links stacked large in Onest, the CTA at the base. Opened by navi-kit.js (toggles [hidden] + body scroll lock). */ .nav-overlay{position:fixed;inset:0;z-index:60;background:var(--m-950); display:flex;flex-direction:column;padding:var(--sp-20) var(--gutter) var(--sp-16)} .nav-overlay[hidden]{display:none} .nav-overlay .no-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--flow-block)} .nav-overlay .no-brand{font-family:Onest,sans-serif;font-weight:var(--wt-600);font-size:var(--fs-500); letter-spacing:var(--ls-400);color:var(--m-50);display:flex;align-items:center;gap:var(--sp-3);text-decoration:none} .nav-overlay .no-brand .mark{width:32px;height:32px;flex:none} .nav-close{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center; background:transparent;border:0;cursor:pointer;color:var(--m-50);border-radius:var(--r-200)} .nav-close svg{width:26px;height:26px;display:block} .nav-overlay-links{display:flex;flex-direction:column;gap:var(--sp-2)} .nav-overlay-links a{font-family:Onest,sans-serif;font-weight:var(--wt-600); font-size:var(--fs-700);line-height:1.2;letter-spacing:var(--ls-700);color:var(--m-50); text-decoration:none;padding:var(--sp-3) 0;min-height:44px;display:flex;align-items:center} .nav-overlay-links a[aria-current="page"]{color:var(--s-500)} .nav-overlay .no-cta{margin-top:auto;padding-top:var(--flow-loose)} .nav-overlay .no-cta .btn{display:block;width:100%;text-align:center} @media (max-width:900px){ .navlinks{display:none} .nav .navbtn{display:none} .nav-toggle{display:inline-flex} } /* 19-09: the TABLET band. Brand (211) + four links (379) + CTA (234) + the gaps and the 5vw gutters need ~980px, so from 901 to ~980 the bar overflowed the viewport and the CTA was cut off (his report, 19-09). Between the phone gate and 1020px the links go behind the hamburger and the CTA stays: brand, CTA, menu. 1024 (iPad landscape) still gets the full inline bar. */ @media (min-width:901px) and (max-width:1020px){ .navlinks{display:none} .nav-toggle{display:inline-flex} .nav-right{margin-left:auto} } /* ============================ CLOSING BAND ============================ The closer, not a card - now built to the same recipe the home page's #book settled on, because it is the same object doing the same job. IT USED TO BE a rounded inset panel about 500px tall with the copy stacked at its top. That gave the halftone roughly 110px to get from nothing to full coverage, and the field cannot do that: PEAK*GAP is 7.7px on an 11px grid, so the last few rows overlap past GAP/sqrt2 and merge into SOLID sky with navy diamonds punched through it. Every page that closed this way ended in a garish bright-blue bar jammed against a rounded corner. On the home page the identical engine looks deliberate purely because it has ~430px to climb. So: full-bleed, no radius, tall, and the copy centred VERTICALLY in the canvas. The dots then rise as a crescendo that fills the lower field and climbs the side gutters to frame the copy - the same close as home, one notch down in scale because a content page's finale should not out-shout the home page's. */ .band{background:var(--m-950);text-align:center;border-radius:0; width:100vw;margin:var(--flow-block) 0 0; margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); min-height:clamp(520px,78vh,760px); display:flex;flex-direction:column;align-items:center;justify-content:center; padding:var(--flow-section) var(--gutter)} /* the SVG the field engine inserts is position:absolute, so it stays out of the flex flow; everything else is a centred column capped at a reading width */ .band > :not(svg):not(canvas){position:relative;z-index:2;max-width:720px} .band h2{color:var(--m-50);margin:0 0 var(--flow)} .band h2 .dot{color:var(--accent-on-dark)} /* 19-09: the closing headline's full stop in the site's blue (his word; on the navy bands only - on paper the blue is 2.6:1 and the stop goes pale) */ .band p{color:var(--m-300);font-size:var(--fs-400);line-height:var(--lh-400); letter-spacing:var(--ls-400);font-weight:var(--wt-400);margin:0 auto var(--flow-loose);max-width:44ch} .band .re{margin-top:var(--flow);color:var(--m-300);font-size:var(--fs-200);line-height:var(--lh-200)} .band .lnk{color:var(--accent-on-dark)} .band .lnk:hover{color:var(--m-50)} /* 19-09: room for the field to RISE. The dot engine caps the band's reaction at the clearance under the last line (docs/dot-field.md, "the copy is never under dots"); with the copy centred in a 702px band that clearance was 10px on for-parents, 42 on about, 49 on home - a reaction nobody could see, against 105px in for-parents' "Why it works". The copy sits higher: the extra bottom padding is desktop only, the engine draws nothing on phones. */ @media (min-width:901px){ .band{padding-bottom:calc(var(--flow-section) + 16vh)} } @media (max-width:720px){ /* Same two-sided calibration as home: too short and the crescendo collapses back into a thin bottom strip, too tall and the top half is dead navy because a narrow canvas has no side gutters for the field to climb. */ .band{min-height:clamp(460px,68vh,620px)} } /* ---- [data-halftone] hook. The field is a canvas since 18-09-2026 (navi-dots.js); the svg rule stays for any old copy still in a lab file. ---- */ [data-halftone]{position:relative} [data-halftone] > svg.ht-svg, [data-halftone] > canvas.ht-cv{position:absolute;inset:0;width:100%;max-width:none;height:100%;z-index:0;pointer-events:none;display:block} /* Page-wide: suppress the .night glow-bloom, same as the home page - navy surfaces stay FLAT and the dots do all the softening. Grain + night type stay. */ .night::before{display:none} /* ============================ FOOTER ============================ One canonical map (site-structure.md ch.2): Programme / More / Contact. Wraps (never a non-wrapping flex row - the logged overflow bug). The home page's simpler .foot stub is left as-is; this is the real footer. */ .foot{border-top:1px solid var(--line);margin-top:var(--sp-20); padding:var(--sp-16) var(--gutter) var(--sp-12)} .foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-12) var(--sp-16)} .foot .b{font-family:Onest,sans-serif;font-weight:var(--wt-600);font-size:var(--fs-500); letter-spacing:var(--ls-400);color:var(--text-1);display:flex;align-items:center;gap:var(--sp-3);text-decoration:none} .foot .b .mark{width:28px;height:28px;flex:none} .foot .b .mark img{width:100%;height:100%;display:block} .foot-cols{display:flex;flex-wrap:wrap;gap:var(--sp-12) var(--sp-16)} .foot-col{display:flex;flex-direction:column;gap:var(--sp-3);min-width:120px} .foot-col .foot-h{font-size:var(--fs-200);line-height:var(--lh-200);letter-spacing:var(--ls-100); font-weight:var(--wt-100);text-transform:uppercase;color:var(--text-4);margin:0 0 var(--sp-1)} .foot-col a{font-size:var(--fs-300);color:var(--text-3);text-decoration:none;transition:color .15s;min-height:24px} .foot-col a:hover{color:var(--text-1)} .foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center; gap:var(--sp-4);margin-top:var(--sp-16);padding-top:var(--sp-6);border-top:1px solid var(--line)} .foot-base .n{font-size:var(--fs-200);color:var(--text-4)} /* Reduced chrome for conversion pages (/call, /waitlist, /scholarship): minimal header (single "Questions" link, no CTA button, no hamburger), no footer map. The one link stays inline even on mobile (no overlay needed). */ .nav--min .navbtn,.nav--min .nav-toggle{display:none} .foot--min .foot-cols{display:none} @media (max-width:900px){ .nav--min .navlinks{display:flex} } /* ============================ CONTENT-PAGE LAYER ============================ Generic section patterns shared by the non-home pages (for-parents, about, questions, call, waitlist, scholarship, privacy). Token-only; the home page and what-you-get do not use these names, so nothing here can contradict them. Card/Q&A/night recipes mirror the home page's own so the look stays identical. */ /* content hero: clears the fixed nav, text-forward, optional media column */ .chero{padding:calc(var(--nav-h) + var(--flow-block)) var(--gutter) var(--flow-section)} .chero .chero-in{max-width:var(--container);margin:0 auto} .chero.split .chero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-16);align-items:center} .chero h1{font-size:clamp(38px,4.4vw,58px);line-height:1.06;letter-spacing:-.021em;margin:0 0 var(--flow);max-width:18ch} .chero .lede{font-size:var(--fs-500);line-height:1.5;max-width:40ch;margin:0} .chero .cta{margin-top:var(--flow-loose)} .chero-media{border-radius:var(--r-400);overflow:hidden;height:min(52vh,480px);background:var(--m-100)} .chero-media img{width:100%;height:100%;object-fit:cover} /* generic day section */ .sec{padding:var(--flow-section) var(--gutter);border-top:1px solid var(--line)} .sec .head{max-width:60ch;margin:0 0 var(--flow-block)} .sec .head h2{margin:0 0 var(--flow)} /* prose column (letter register - /for-parents) */ .prose{max-width:66ch} .prose h2{margin:0 0 var(--flow)} .prose h3{margin:var(--flow-block) 0 var(--flow)} .prose p{color:var(--text-2);margin:0 0 var(--flow);font-size:var(--fs-400);line-height:var(--lh-400)} .prose p:last-child{margin-bottom:0} .prose .lnk{font-size:var(--fs-400)} /* generic full-bleed night section */ .nightsec{background:var(--m-950);width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); padding:var(--flow-section) 0} /* A night section carrying the dot field needs a FLOOR bought with real section. The engine puts the field's front a fixed fraction above the section's bottom edge, so on a 96px bottom padding the front lands inside the last paragraph: /for-parents had dots running through "We did not invent this" and then jumping to full coverage in ~100px, which is the merge threshold and therefore a hard bright bar rather than a dissolve. /what-you-get's .leave section had already worked this out empirically (clearance under ~0.25 of section height and the field climbs back into the copy) and bought 320px; this is the same trade at the scale a shorter section needs. Only [data-halftone] pays it - a plain .nightsec has no field and would just get dead navy. */ .nightsec[data-halftone]{padding-bottom:calc(var(--sp-32) * 2.5)} @media (max-width:900px){ .nightsec[data-halftone]{padding-bottom:calc(var(--sp-32) * 1.6)} } .nightsec .wrap{position:relative;z-index:2;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)} .nightsec h2{color:var(--m-50);margin:0 0 var(--flow)} .nightsec .lede{color:var(--m-300)} .nightsec p{color:var(--m-300)} /* generic surface card (home .def/.plan recipe) */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-300);padding:var(--sp-8)} .card .n{font-family:Onest,sans-serif;font-size:var(--fs-600);line-height:var(--lh-600);letter-spacing:var(--ls-600); font-weight:var(--wt-600);color:var(--text-1);margin:0 0 var(--flow-bond)} .card p{color:var(--text-3)} /* rounded media */ .media{border-radius:var(--r-400);overflow:hidden;background:var(--m-100)} .media img{width:100%;height:100%;object-fit:cover;display:block} /* Q&A (home .qa recipe) */ .qa{display:flex;flex-direction:column;gap:var(--flow-block)} .qa .q{font-family:Onest,sans-serif;font-size:var(--fs-400);line-height:var(--lh-400);letter-spacing:var(--ls-400); font-weight:var(--wt-500);color:var(--text-1);margin:0 0 var(--flow-tight)} .qa .a{color:var(--text-3);max-width:60ch} .qa .a a{color:var(--accent-on-light);text-decoration:none} .qa .a a:hover{text-decoration:underline} .track-h{margin:0 0 var(--flow-block);padding-bottom:var(--sp-4);border-bottom:2px solid var(--brand)} /* forms (net-new: DIRECTION flags form tokens as "needed for the apply page"; built only from existing tokens - surface fill, n-300 border, r-200, s-600 focus). */ .field{display:flex;flex-direction:column;gap:var(--flow-tight);margin-bottom:var(--flow)} .field label{font-size:var(--fs-200);font-weight:var(--wt-500);color:var(--text-2)} .field .req{color:var(--c-700)} .field input,.field textarea,.field select{font-family:Geist,sans-serif;font-size:var(--fs-300); color:var(--text-1);background:var(--surface);border:1px solid var(--n-300);border-radius:var(--r-200); padding:var(--sp-3) var(--sp-4);width:100%;line-height:var(--lh-300);min-height:44px} .field textarea{min-height:120px;resize:vertical} .field input::placeholder,.field textarea::placeholder{color:var(--text-4)} .field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{ outline:3px solid var(--focus);outline-offset:2px;border-color:var(--focus)} .field .help{font-size:var(--fs-200);color:var(--text-4)} /* error role: never colour alone, so the glyph carries it too. Set aria-invalid on the input and point aria-describedby at the .err node. */ .field .err{display:flex;gap:var(--sp-2);align-items:flex-start;font-size:var(--fs-200); color:var(--c-700);font-weight:var(--wt-500)} .field .err::before{content:"!";flex:none;width:1.05em;height:1.05em;border-radius:50%; background:var(--c-700);color:#fff;font-size:.8em;line-height:1.05em;text-align:center; font-weight:var(--wt-500);margin-top:.15em} .field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--c-700)} .check{display:flex;gap:var(--sp-3);align-items:flex-start;margin-bottom:var(--flow)} /* This used to be a 20px box plus an ::after sized to 44px, on the theory that the pseudo-element enlarged the hit area for free. Browsers do not generate pseudo-elements on replaced elements, so that rule painted nothing and the real target stayed 20x20 - under the 24px floor. The box is now 24px and the label carries its own 44px row, so both halves of the control are reachable. */ .check input{width:24px;height:24px;flex:none;margin-top:1px;accent-color:var(--brand)} .check label{min-height:26px;cursor:pointer} /* checkboxes fell back to the browser's 1px default ring while every other focus stop showed the kit's 3px. */ .check input:focus-visible{outline:3px solid var(--focus);outline-offset:2px} .check label{font-size:var(--fs-300);color:var(--text-2)} @media (max-width:900px){ .chero.split .chero-in{grid-template-columns:1fr;gap:var(--sp-12)} .chero-media{order:-1;height:min(46vh,340px)} }