/* =========================================================================== THUNDER / driverknowledgetest.com.au - site shell v34 LAYER 1 of 8: design tokens, reset, base typography. WHY TOKENS AND NOT UTILITIES. v27 was SWIFT's Tailwind build with THUNDER's logo dropped in. Three consequences were visible on the served page: - two dark-mode rules had lost their `.dark` prefix, so the breadcrumb bar painted #0B1220 in LIGHT mode and the desktop nav links painted #CBD5E1 on white (unreadable). A token sheet cannot have that defect: the theme changes VALUES, never which rules apply. - 52 classes the renderers actually emit (cr-score-matrix, cr-timeline, cr-topic-grid, cr-verdict, cr-source-strip, goal-*, hero-facts, the practice cards) had no CSS at all, so they fell back to bare HTML. - the utility sheet shipped ~160KB for markup that no longer existed. This sheet defines the palette ONCE and every component reads it, which is also how the two engine surfaces that are NOT ours - quiz_takeover token and the test_list token card block - inherit THUNDER's identity instead of their own fallbacks. Both read named custom properties; both are fed below. =========================================================================== */ :root{ /* ---- type ------------------------------------------------------------ */ --font-display:"Archivo","Segoe UI",system-ui,-apple-system,sans-serif; --font-ui:"Archivo","Segoe UI",system-ui,-apple-system,sans-serif; --font-read:"Literata",Georgia,"Times New Roman",serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* ---- brand ramp: Australian green (the owner's #00843d) --------------- */ --brand-50:#eef6f1; --brand-100:#d8ebdf; --brand-200:#aed7bf; --brand-300:#79bd97; --brand-400:#2f9d66; --brand-500:#00843d; --brand-600:#0a7138; --brand-700:#0b5c30; --brand-800:#0a4927; --brand-900:#0a3a20; /* ---- ink ramp: slate-teal, so the page never reads blue-grey generic -- */ --ink-50:#f5f8f6; --ink-100:#edf1ef; --ink-200:#dde4e0; --ink-300:#c6d0cc; --ink-400:#9aa6a3; --ink-500:#6d7c79; --ink-600:#51605d; --ink-700:#35444a; --ink-800:#1f323a; --ink-900:#14242b; --ink-950:#0b171c; /* ---- signal --------------------------------------------------------- */ --good:#0a7138; --good-soft:#e7f3ec; --good-line:#b9dcc6; --warn:#8a5207; --warn-soft:#fdf4e5; --warn-line:#eed9ac; --bad:#ab2a20; --bad-soft:#fdeeec; --bad-line:#f0c4bf; --info:#1d5b85; --info-soft:#eaf2f8; --info-line:#c2d9e8; --prem:#6245c4; --prem-soft:#f0ecfd; /* ---- THE SHARED SURFACE CONTRACT ------------------------------------- * * quiz-takeover.cfm reads: --bg --surface --border --border-mid --accent * * --cta --h1 --muted --ink --ink-muted --ok --slate-soft --slate-deep * * --wrap. Every one is defined here, so the practice takeover wears * * THUNDER's palette in both themes instead of its own hard fallbacks. */ --bg:#f4f7f5; --surface:#ffffff; --surface-2:#fafcfb; --zone:#eff4f1; --border:#dce4e0; --border-mid:#c5d1cc; --line:#dce4e0; --line-soft:#e7ede9; --h1:#12222a; --ink:#1b2d34; --ink-muted:#4d5c59; --muted:#5b6a70; --accent:#00843d; --accent-ink:#ffffff; --accent-soft:#eef6f1; --accent-deep:#0b5c30; --accent-text:#0a5c30; --cta:#00843d; --cta-ink:#ffffff; --ok:#0a7138; --head:#14242b; --slate-soft:#eff4f1; --slate-deep:#14242b; --wrap:84rem; /* ---- test_list token fallbacks. test-list.cfm sets its own --panel/--accent * * from --tl-* with hard defaults; naming them here is the ONLY lever that * * repaints the picker cards on a public hub page. ---------------------- */ --tl-panel:#ffffff; --tl-zone:#f6f9f7; --tl-ink:#14242b; --tl-ink-2:#35444a; --tl-muted:#65747a; --tl-line:#dce4e0; --tl-line-soft:#e7ede9; --tl-accent:#00843d; --tl-accent-ink:#ffffff; --tl-accent-soft:#eef6f1; --tl-accent-deep:#0b5c30; --tl-good:#0a7138; --tl-good-soft:#e7f3ec; --tl-warn:#8a5207; --tl-warn-soft:#fdf4e5; --tl-bad:#ab2a20; --tl-bad-soft:#fdeeec; --tl-prem:#6245c4; /* ---- geometry + depth ------------------------------------------------ */ --r-xs:6px; --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px; --gut:clamp(1.15rem,4.2vw,2.5rem); --read-w:68ch; --head-h:72px; --sh-1:0 1px 2px rgba(11,23,28,.05); --sh-2:0 1px 2px rgba(11,23,28,.04),0 10px 24px -14px rgba(11,23,28,.18); --sh-3:0 1px 2px rgba(11,23,28,.04),0 24px 54px -24px rgba(11,23,28,.26); --sh-pop:0 24px 48px -24px rgba(11,23,28,.34); --ring:0 0 0 4px rgba(0,132,61,.22); /* ---- vertical rhythm: one scale, used by every section -------------- */ --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem; --s9:5.5rem; color-scheme:light; } html.dark,html[data-theme="dark"]{ --brand-50:#0e241a; --brand-100:#12301f; --brand-200:#1b4a30; --brand-300:#2b7048; --brand-400:#38a068; --brand-500:#3fb173; --brand-600:#6acb95; --brand-700:#8fdcae; --brand-800:#b4e9c8; --brand-900:#d7f4e2; --ink-50:#0d1a1e; --ink-100:#122228; --ink-200:#1b2f35; --ink-300:#2a4047; --ink-400:#607471; --ink-500:#8a9a96; --ink-600:#a7b5b1; --ink-700:#c0ccc8; --ink-800:#dae3df; --ink-900:#eef4f1; --ink-950:#f7faf8; --good:#4cbd80; --good-soft:#102a1e; --good-line:#1e4b33; --warn:#e0ab5c; --warn-soft:#2a2113; --warn-line:#5a4521; --bad:#f08d84; --bad-soft:#2c1715; --bad-line:#5c2a25; --info:#7fb9dd; --info-soft:#12242e; --info-line:#28485c; --prem:#a894f2; --prem-soft:#1d1736; --bg:#0a1417; --surface:#101e22; --surface-2:#13262a; --zone:#0d1b1f; --border:#213439; --border-mid:#2d4349; --line:#213439; --line-soft:#1a2b30; --h1:#eff5f2; --ink:#dde7e3; --ink-muted:#a4b3af; --muted:#92a19d; --accent:#3fb173; --accent-ink:#042312; --accent-soft:#122c20; --accent-deep:#8fdcae; --accent-text:#7fd6a4; --cta:#00843d; --cta-ink:#ffffff; --ok:#4cbd80; --head:#eff5f2; --slate-soft:#16272c; --slate-deep:#060f12; --tl-panel:#101e22; --tl-zone:#0d1b1f; --tl-ink:#eff5f2; --tl-ink-2:#c0ccc8; --tl-muted:#92a19d; --tl-line:#213439; --tl-line-soft:#1a2b30; --tl-accent:#3fb173; --tl-accent-ink:#042312; --tl-accent-soft:#122c20; --tl-accent-deep:#8fdcae; --tl-good:#4cbd80; --tl-good-soft:#102a1e; --tl-warn:#e0ab5c; --tl-warn-soft:#2a2113; --tl-bad:#f08d84; --tl-bad-soft:#2c1715; --tl-prem:#a894f2; --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 1px 2px rgba(0,0,0,.36),0 10px 24px -14px rgba(0,0,0,.6); --sh-3:0 1px 2px rgba(0,0,0,.36),0 24px 54px -24px rgba(0,0,0,.72); --sh-pop:0 24px 48px -24px rgba(0,0,0,.8); --ring:0 0 0 4px rgba(63,177,115,.28); color-scheme:dark; } /* ---- reset ------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} body{margin:0;background:var(--bg);color:var(--ink); font:400 16px/1.6 var(--font-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; text-underline-offset:.18em} img,svg,video,canvas{max-width:100%} img,video{height:auto} [hidden]{display:none!important} hr{height:1px;border:0;background:var(--border);margin:var(--s6) 0} ul,ol{padding-left:1.25rem} a{color:var(--accent-text);text-decoration-thickness:1px} a:hover{color:var(--accent-deep)} button{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs);box-shadow:var(--ring)} ::selection{background:var(--brand-200);color:var(--ink-900)} table{border-collapse:collapse;width:100%} code,kbd,samp{font-family:var(--font-mono);font-size:.92em} /* ---- headings: one display face, one rhythm ---------------------------- */ h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--h1); font-weight:700;letter-spacing:-.022em;line-height:1.14;margin:0} h1{font-size:clamp(2.1rem,1.25rem + 3.1vw,3.6rem);font-weight:800;letter-spacing:-.034em;line-height:1.04} h2{font-size:clamp(1.55rem,1.1rem + 1.5vw,2.25rem);letter-spacing:-.026em} h3{font-size:clamp(1.12rem,1rem + .4vw,1.3rem);letter-spacing:-.016em;line-height:1.3} h4{font-size:1.05rem} p{margin:0} /* a shared label/eyebrow, used by the hero, the shelves and the ad slot */ .eyebrow,.lab,.shelf-sub .lab{display:flex;align-items:center;gap:.6rem;margin:0; font:700 .72rem/1.2 var(--font-display);letter-spacing:.15em;text-transform:uppercase;color:var(--accent-text)} .eyebrow:empty,.lede:empty,.lab:empty{display:none} .eyebrow::before{content:"";width:1.75rem;height:3px;border-radius:3px;background:var(--accent);flex:0 0 auto} .lede{margin:0;font:400 clamp(1.05rem,.98rem + .35vw,1.28rem)/1.62 var(--font-read);color:var(--ink-muted)} /* skip link - the shell had none, and a sticky header plus a drawer makes keyboard entry into body token slow without it */ .skip{position:absolute;left:-9999px;top:0;z-index:200} .skip:focus{left:.75rem;top:.75rem;padding:.7rem 1rem;background:var(--surface); border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--sh-3);font-weight:700} /* =========================================================================== LAYER 2 of 8: the shell - page frame, header, the site_nav token rich menu, breadcrumb bar, buttons, closing CTA band, mega footer. =========================================================================== */ /* ---- the frame. `.wrap` is the layout's own container class (Mother's slotTemplate opens with
), so the width lives here and nowhere else. `.shell` is this file's own outer rail. ------------------- */ .shell{display:flex;flex-direction:column;min-height:100vh;background:var(--bg)} .wrap,.rail{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)} .wrap .wrap{max-width:none;padding-inline:0} #main .qt-takeover{width:calc(100% - 2 * var(--gut));max-width:calc(var(--wrap) - 2 * var(--gut));margin-inline:auto} /* ---- THE HOME HERO, premium pass (Abdul 2026-10-09: "make the home page banner more premium, check the hero trend") ---- */ .content-hero--home,.content-hero--home.content-hero--compact{padding-top:clamp(3rem,6vw,5.5rem);padding-bottom:clamp(2.75rem,5vw,4.75rem); background:radial-gradient(42rem 24rem at 10% -12%,var(--brand-100),transparent 62%),radial-gradient(36rem 22rem at 96% 112%,var(--accent-soft),transparent 60%),linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%)} @media (min-width:901px){.content-hero--home .hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(2rem,5vw,4.5rem)}} .content-hero--home h1,.content-hero--home.content-hero--compact h1{font-size:clamp(2.6rem,1.6rem + 3.6vw,4.5rem);line-height:1;letter-spacing:-.04em;max-width:14ch} .content-hero--home .lede{font-size:clamp(1.12rem,1rem + .5vw,1.4rem);max-width:44ch} .content-hero--home .eyebrow{display:inline-flex;align-items:center;gap:.55rem;padding:.42rem .9rem .42rem .65rem;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--good-line);box-shadow:var(--sh-1);letter-spacing:.1em;font-size:.7rem} .content-hero--home .eyebrow::before{width:.55rem;height:.55rem;border-radius:50%;background:var(--good);animation:hero-pulse 2.2s ease-in-out infinite} @keyframes hero-pulse{0%,100%{box-shadow:0 0 0 .2rem color-mix(in srgb,var(--good) 25%,transparent)}50%{box-shadow:0 0 0 .55rem color-mix(in srgb,var(--good) 6%,transparent)}} @media (prefers-reduced-motion:reduce){.content-hero--home .eyebrow::before{animation:none}} .content-hero--home .hero-cta-wrap{gap:.75rem 1rem} .content-hero--home .hero-cta-wrap .btn-primary{min-height:54px;padding:.9rem 1.5rem;font-size:1.05rem;border-radius:var(--r-sm)} .content-hero--home .hero-cta-wrap>a:not(.btn){min-height:54px;padding:.9rem 1.2rem;border:1px solid var(--border-mid);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-size:.95rem} .content-hero--home .hero-cta-wrap>a:not(.btn):hover{text-decoration:none;border-color:var(--accent);color:var(--accent-text)} .content-hero--home .hero-trust{margin-top:.6rem} .content-hero--home .hero-media-col{position:relative} .content-hero--home .hero-media-col::before{content:"";position:absolute;inset:-8% -6% -10% -6%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 24%,transparent),transparent 72%);filter:blur(14px);z-index:0} .content-hero--home .hero-media-col .pg-hero-media{position:relative;z-index:1;border-radius:var(--r-lg);box-shadow:0 34px 64px -30px rgba(8,38,24,.5),0 14px 30px -18px rgba(8,38,24,.28);transform:rotate(-1.2deg)} .content-hero--home .hero-float{position:absolute;z-index:2;left:-1.25rem;bottom:-1.1rem;display:flex;align-items:center;gap:.7rem;padding:.75rem .95rem .75rem .75rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--sh-3)} .content-hero--home .hero-float-ic{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--good-soft);color:var(--good);flex:0 0 auto} .content-hero--home .hero-float-ic svg{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .content-hero--home .hero-float b{display:block;font:700 .92rem/1.2 var(--font-display);color:var(--ink)} .content-hero--home .hero-float span{display:block;font:500 .78rem/1.3 var(--font-ui);color:var(--muted)} @media (max-width:900px){.content-hero--home .hero-media-col .pg-hero-media{transform:none}.content-hero--home .hero-float{position:static;margin-top:.9rem}.content-hero--home .hero-media-col::before{display:none}.content-hero--home h1{max-width:none}} /* the home hero's stat strip - four verified facts under the buttons (SWIFT's shape) */ .hero-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1rem;margin:.5rem 0 0;padding:0;list-style:none;width:100%} .hero-stats li{display:grid;grid-template-columns:2.2rem minmax(0,1fr);grid-template-rows:auto auto;column-gap:.65rem;align-items:center} .hero-stats .hs-ic{grid-row:1/3;display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent-text)} .hero-stats .hs-ic svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .hero-stats b{font:800 1.08rem/1.1 var(--font-display);color:var(--ink);letter-spacing:-.01em} .hero-stats li>span:last-child{font:500 .78rem/1.3 var(--font-ui);color:var(--muted)} /* on a phone the home hero reads words first, picture after (the shell's default puts the picture first) */ @media (max-width:1023px){.content-hero--home .hero-media-col{order:2;margin-top:1.25rem}} @media (max-width:640px){.content-hero--home .hero-cta-wrap{width:100%}.content-hero--home .hero-cta-wrap>a{width:100%;justify-content:center}} .breadcrumb-inner .wrap{max-width:none;padding-inline:0} #main .qt-takeover .qt-opt[data-state="correct"]{border-color:var(--good);background:var(--good-soft)} #main .qt-takeover .qt-opt[data-state="correct"] .qt-letter{background:var(--good);border-color:var(--good);color:#fff} #main .qt-takeover .qt-opt[data-state="wrong"]{border-color:var(--bad);background:var(--bad-soft)} #main .qt-takeover .qt-opt[data-state="wrong"] .qt-letter{background:var(--bad);border-color:var(--bad);color:#fff} #main .qt-takeover .qt-opt[data-state="wrong"] .qt-otext{text-decoration:line-through;text-decoration-thickness:1px} #main .qt-takeover .qt-opt[data-state="correct"] .qt-letter,#main .qt-takeover .qt-opt[data-state="wrong"] .qt-letter{font-size:0} #main .qt-takeover .qt-opt[data-state="correct"] .qt-letter::before{content:"\2713";font-size:.95rem;font-weight:800} #main .qt-takeover .qt-opt[data-state="wrong"] .qt-letter::before{content:"\2715";font-size:.9rem;font-weight:800} #main .qt-takeover .qt-fb{border-left-color:var(--good);background:var(--good-soft)} #main .qt-takeover .qt-fb .qt-fb-h{color:var(--good)} #main .qt-takeover:has(.qt-opt[data-state="wrong"]) .qt-fb{border-left-color:var(--bad);background:var(--bad-soft)} #main .qt-takeover:has(.qt-opt[data-state="wrong"]) .qt-fb .qt-fb-h{color:var(--bad)} .spine{display:none} main{display:block;flex:1 0 auto} #main,#content,#at-a-glance,#pg-cf-form{scroll-margin-top:calc(var(--head-h) + 1.25rem)} /* ---- buttons: ONE definition. The engine emits `.btn.btn-primary` from slot-mapper (hero.cta-block) and content-blocks (cr-vd-cta), so this is the shared contract, not a shell-only style. ------------------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem; min-height:48px;padding:.78rem 1.3rem;border:1px solid transparent;border-radius:var(--r-sm); font:600 .975rem/1.2 var(--font-display);letter-spacing:-.008em;text-decoration:none; cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform .18s,box-shadow .18s} .btn svg{width:1.1em;height:1.1em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .btn-primary{background:var(--cta);color:var(--cta-ink);border-color:var(--cta); box-shadow:0 8px 20px -10px rgba(0,132,61,.55)} .btn-primary:hover{background:var(--brand-700);border-color:var(--brand-700);color:var(--cta-ink); transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(0,132,61,.6)} html.dark .btn-primary:hover,html[data-theme="dark"] .btn-primary:hover{background:#0a9648;border-color:#0a9648} .btn-ghost,.pg-cta-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.5rem; min-height:48px;padding:.78rem 1.25rem;border:1px solid var(--border-mid);border-radius:var(--r-sm); background:var(--surface);color:var(--h1);font:600 .975rem/1.2 var(--font-display); text-decoration:none;cursor:pointer;transition:border-color .18s,color .18s,background .18s} .btn-ghost:hover,.pg-cta-ghost:hover{border-color:var(--accent);color:var(--accent-text);background:var(--accent-soft)} .btn-lg{min-height:54px;padding:.95rem 1.6rem;font-size:1.03rem} .btn-block{width:100%} .arr,.arw{line-height:1;font-size:1.05em} /* ---- header ------------------------------------------------------------ */ .hdr{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--surface) 88%,transparent); border-bottom:1px solid var(--border);backdrop-filter:saturate(1.3) blur(14px)} @supports not (background:color-mix(in srgb,red 50%,transparent)){.hdr{background:var(--surface)}} .hdr::before{content:"";display:block;height:3px;background: linear-gradient(90deg,var(--brand-500) 0 42%,#f9d43a 42% 68%,#236ab7 68% 100%)} .hdr-in{display:flex;align-items:center;gap:1rem;min-height:var(--head-h)} .brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none;padding:.35rem 0} .brand svg{display:block;width:clamp(168px,17vw,214px);height:auto} /* the logo is supplied artwork: the wordmark paths carry fill="#213141" as a presentation attribute, which any CSS rule outranks. So dark mode and the dark footer recolour the WORDMARK ONLY and the shield keeps its real green/blue/yellow/red marks - no brightness/invert filter, which would have flattened all four. */ html.dark .brand svg path[fill="#213141"],html[data-theme="dark"] .brand svg path[fill="#213141"]{fill:#eff5f2} .hdr-nav{flex:1 1 auto;min-width:0;display:flex;justify-content:flex-end} .hdr-act{display:flex;align-items:center;gap:.4rem;flex:0 0 auto;margin-left:auto} .hdr-link{padding:.6rem .7rem;border-radius:var(--r-xs);font:600 .9rem/1 var(--font-display); color:var(--ink-600);text-decoration:none} .hdr-link:hover{color:var(--h1);background:var(--slate-soft)} .icon-btn{display:inline-grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid transparent; border-radius:var(--r-sm);background:none;color:var(--ink-500);cursor:pointer} .icon-btn:hover{background:var(--slate-soft);color:var(--h1)} .icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .hdr .btn-primary{min-height:42px;padding:.55rem 1rem;font-size:.9rem} .nav-toggle{display:none} .t-sun{display:none} html.dark .t-moon,html[data-theme="dark"] .t-moon{display:none} html.dark .t-sun,html[data-theme="dark"] .t-sun{display:block} /* ---- THE RICH MENU. The engine (site-nav.cfm) prints: aria-expanded is the ONLY state: the cluster shows off that attribute and nothing else, so hover, click and keyboard cannot disagree. ------------ */ .site-nav{min-width:0} .site-nav ul{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0} .site-nav li{position:relative;margin:0} .site-nav a,.site-nav .nav-par{display:flex;align-items:center;gap:.3rem; padding:.56rem .72rem;border:0;border-radius:var(--r-xs);background:none;cursor:pointer; font:600 .9rem/1.2 var(--font-display);color:var(--ink-700);text-decoration:none;white-space:nowrap} .site-nav a:hover,.site-nav .nav-par:hover{color:var(--h1);background:var(--slate-soft)} .site-nav a[aria-current="page"]{color:var(--accent-text);background:var(--accent-soft)} .site-nav li.is-here>.nav-par,.site-nav .nav-par[aria-expanded="true"]{color:var(--accent-text)} .site-nav li.is-here>.nav-par::after{content:"";position:absolute;left:.72rem;right:.72rem;bottom:-1px; height:2px;border-radius:2px;background:var(--accent)} .nav-chev{width:14px;height:14px;flex:0 0 auto;transition:transform .18s;opacity:.65} .nav-par[aria-expanded="true"] .nav-chev{transform:rotate(180deg);opacity:1} .site-nav .nav-sub{display:none;position:absolute;top:100%;left:-.4rem;z-index:70; min-width:17rem;flex-direction:column;align-items:stretch;gap:0;margin:.4rem 0 0;padding:.45rem;list-style:none; background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-pop)} .site-nav .nav-par[aria-expanded="true"]+.nav-sub{display:flex} .site-nav .nav-sub::before{content:"";position:absolute;left:0;right:0;top:-.4rem;height:.4rem} .site-nav .nav-sub a{display:block;padding:.58rem .7rem;border-radius:var(--r-xs); font-weight:500;font-size:.9rem;color:var(--ink-700);white-space:normal} .site-nav .nav-sub a:hover{background:var(--accent-soft);color:var(--accent-text)} .site-nav .nav-sub a[aria-current="page"]{background:var(--accent-soft);color:var(--accent-text);font-weight:600} /* mobile: ONE site_nav token for both breakpoints, so the engine's ids stay unique (v27 printed site_nav token twice and duplicated #site-nav plus every #nav-sub-N, which made the nav-par aria-controls ambiguous). ----------- */ .hdr-navwrap{display:contents} .drawer-act{display:none} @media (max-width:1199px){ .hdr-navwrap{position:absolute;left:0;right:0;top:100%;display:block;max-height:0;overflow:hidden; background:var(--surface);border-bottom:1px solid transparent;transition:max-height .26s ease,border-color .2s} .hdr.nav-open .hdr-navwrap{max-height:min(78vh,760px);overflow:auto;border-bottom-color:var(--border);box-shadow:var(--sh-3)} .hdr-nav{display:block;padding:.5rem var(--gut) 0} .site-nav ul{flex-direction:column;align-items:stretch;gap:0} .site-nav li{position:static} .site-nav a,.site-nav .nav-par{width:100%;justify-content:space-between;padding:.8rem .25rem; font-size:1.02rem;border-bottom:1px solid var(--line-soft);border-radius:0} .site-nav li.is-here>.nav-par::after{display:none} .site-nav a[aria-current="page"]{background:none;box-shadow:inset 3px 0 0 var(--accent);padding-left:.75rem} .site-nav .nav-sub{position:static;min-width:0;margin:0;padding:.1rem 0 .55rem .9rem; border:0;border-radius:0;box-shadow:none;background:none} .site-nav .nav-sub a{border-bottom:0;padding:.55rem .25rem;font-size:.97rem;color:var(--ink-600)} .drawer-act{display:flex;flex-wrap:wrap;gap:.6rem;padding:1rem var(--gut) 1.4rem; margin-top:.6rem;border-top:1px solid var(--line-soft)} .drawer-act .btn{flex:1 1 12rem} .nav-toggle{display:inline-grid;place-items:center;width:42px;height:42px;padding:0; border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);color:var(--h1);cursor:pointer} .nav-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round} .hdr-act .hdr-link,.hdr-act .btn-primary{display:none} .hdr{position:relative} } /* v33 patches, carried: the header collapses below 1200px because the rich menu on this door needs more room than 1024px gives it, and ABOVE 1200 the header row runs the full width of the viewport while every other band keeps the wrap measure - so the brand sits at the screen edge, not 370px inside it on a wide monitor. */ @media (min-width:1200px){ .hdr{position:sticky} .hdr .hdr-in.wrap{max-width:var(--wrap);padding-inline:clamp(1.25rem,2.6vw,2.5rem)} } @media (max-width:460px){.brand svg{width:154px}} /* ---- breadcrumb bar. breadcrumb token is EMPTY on a home page, so the bar must disappear rather than leave a 2.4rem grey stripe under the header. ----- */ .breadcrumb-bar{background:var(--surface);border-bottom:1px solid var(--border)} .breadcrumb-bar:not(:has(a)):not(:has(li)):not(:has(span)){display:none} .breadcrumb-inner{width:100%;max-width:var(--wrap);margin-inline:auto;padding:.62rem var(--gut)} .breadcrumb-inner ol,.breadcrumb-inner ul{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem; list-style:none;margin:0;padding:0} .breadcrumb-inner li{display:flex;align-items:center;margin:0} .breadcrumb-inner li+li::before{content:"/";padding:0 .45rem;color:var(--ink-400)} .breadcrumb-inner a,.breadcrumb-inner span,.pg-breadcrumb a,.pg-breadcrumb span{ font:500 .78rem/1.4 var(--font-ui);color:var(--muted);text-decoration:none} .breadcrumb-inner a:hover,.pg-breadcrumb a:hover{color:var(--accent-text);text-decoration:underline} .breadcrumb-inner [aria-current="page"],.pg-breadcrumb [aria-current="page"]{color:var(--ink-700);font-weight:600} .pg-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem} .pg-breadcrumb-sep{padding:0 .2rem;color:var(--ink-400)} /* ---- the closing CTA band. Sits between body token and the footer on every page: the owner's rule is that no page is a dead end. ----------------- */ .closing{margin-top:var(--s8);background:var(--slate-deep);color:#e4ece9;position:relative;overflow:hidden} .closing::before{content:"";position:absolute;inset:0; background:radial-gradient(60rem 28rem at 82% -10%,rgba(0,132,61,.34),transparent 62%)} .closing-in{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem var(--s6); padding:var(--s7) var(--gut)} .closing-txt{flex:1 1 24rem;min-width:0} .closing h2{color:#fff;font-size:clamp(1.5rem,1.2rem + 1vw,2.05rem);margin:0 0 .45rem} .closing p{margin:0;color:#aebfba;font-size:1rem;max-width:52ch} .closing-act{display:flex;flex-wrap:wrap;gap:.7rem;flex:0 0 auto} .closing .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)} .closing .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff} .closing-fine{flex:1 1 100%;margin:0;padding-top:1rem;border-top:1px solid rgba(255,255,255,.12); color:#8fa39e;font-size:.78rem} /* ---- mega footer ------------------------------------------------------- */ .site-footer{background:var(--ink-950);color:#b4c4bf} html.dark .site-footer,html[data-theme="dark"] .site-footer{background:#050e11} .footer-in{padding:var(--s8) var(--gut) var(--s5)} .footer-grid{display:grid;grid-template-columns:1.6fr repeat(5,minmax(0,1fr));gap:var(--s6) var(--s5); padding-bottom:var(--s7);border-bottom:1px solid rgba(255,255,255,.1)} .footer-brand .brand svg{width:208px} .site-footer .brand svg path[fill="#213141"]{fill:#ffffff} .footer-brand p{margin:1rem 0 0;max-width:34ch;font:400 .86rem/1.65 var(--font-read);color:#8fa39e} .footer-badges{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.1rem 0 0;padding:0;list-style:none} .footer-badges li{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .6rem; border:1px solid rgba(255,255,255,.16);border-radius:var(--r-pill); font:600 .7rem/1.3 var(--font-display);letter-spacing:.04em;text-transform:uppercase;color:#c6d5d0} .footer-badges svg{width:12px;height:12px;fill:none;stroke:var(--brand-300);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .footer-col h2{margin:0 0 .85rem;font:700 .72rem/1.3 var(--font-display); letter-spacing:.13em;text-transform:uppercase;color:#fff} .footer-col ul{margin:0;padding:0;list-style:none} .footer-col li{margin:0 0 .5rem} .footer-col a{font:400 .86rem/1.5 var(--font-ui);color:#a7b9b4;text-decoration:none} .footer-col a:hover{color:#fff;text-decoration:underline} .footer-bottom{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between; padding-top:1.3rem;font-size:.76rem;color:#879a95} .footer-bottom p{margin:0;color:#879a95;max-width:70ch} .footer-bottom a{color:#a7b9b4} @media (max-width:1100px){.footer-grid{grid-template-columns:1.4fr repeat(3,minmax(0,1fr))}} @media (max-width:760px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .footer-brand{grid-column:1 / -1} .footer-in{padding:var(--s7) var(--gut) var(--s4)}} @media (max-width:420px){.footer-grid{grid-template-columns:1fr}} /* =========================================================================== LAYER 3 of 8: the page - hero (every modifier slot-mapper can emit), the licence picker, content sections, prose, FAQ, contact form, ad slot. The markup here is NOT ours: Mother's slotTemplate and lib/slot-mapper.ts decide it. `hero.modifiers` can arrive as "", " content-hero--rule", " content-hero--compact", " content-hero--split" or a pair, so each modifier has to be independently harmless. =========================================================================== */ /* ---- THE BANNER. The three migrated doors each do one half of this well: SWIFT has the pill + split headline + stat row, HAWKEYE the clean stat hero, the owner's saved template the dark ruled band. This is all three: a soft brand wash, an eyebrow, a big display h1, a reading-face lede, two actions, trust ticks, then the licence picker as cards. ---------------- */ .content-hero{position:relative;margin-inline:0;border-radius:var(--r-lg);overflow:hidden;padding:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,3.5vw,3rem) clamp(2rem,4vw,3.25rem); background: radial-gradient(44rem 22rem at 88% -14%,var(--brand-100),transparent 66%), linear-gradient(180deg,var(--brand-50) 0%,var(--surface) 62%,var(--bg) 100%); border-bottom:1px solid var(--border);overflow:hidden} html.dark .content-hero,html[data-theme="dark"] .content-hero{ background:radial-gradient(44rem 22rem at 88% -14%,rgba(0,132,61,.22),transparent 64%), linear-gradient(180deg,#0e2024 0%,var(--bg) 78%)} .content-hero::after{content:"";position:absolute;right:-12rem;top:-16rem;width:34rem;height:34rem; border:1px solid var(--brand-100);border-color:color-mix(in srgb,var(--accent) 16%,transparent);border-radius:50%; box-shadow:0 0 0 3rem rgba(0,132,61,.05);box-shadow:0 0 0 3rem color-mix(in srgb,var(--accent) 5%,transparent);pointer-events:none} .hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(1.75rem,4vw,3.5rem);align-items:center;max-width:var(--wrap);margin-inline:auto} .hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;min-width:0} .content-hero h1{max-width:22ch} .content-hero .lede{max-width:46ch;color:var(--ink-muted)} .hero-media-col{min-width:0} /* no hero image on this page -> the copy takes the full width instead of leaving a 40% hole (the shape v27 left on every page without an asset) */ .hero-grid:has(.hero-media-col:empty){grid-template-columns:minmax(0,1fr)} .hero-grid:has(.hero-media-col:empty) .content-hero h1{max-width:26ch} .hero-grid:has(.hero-media-col:empty) .content-hero .lede{max-width:60ch} .hero-grid:has(.hero-media-col:empty) .hero-media-col{display:none} /* the framed hero asset. Father emits a bare with width/height, so the frame is CSS only and the reserved box never jumps. */ .pg-hero-media,.hero-art{display:block;width:100%;height:auto;border-radius:var(--r-lg)} .hero-media-col .pg-hero-media{box-shadow:var(--sh-3);border:1px solid var(--border); background:var(--surface-2);aspect-ratio:16/9;object-fit:cover} .hero-figure{position:relative;margin:0;padding:0} .hero-figure .hero-art{border:1px solid var(--border);box-shadow:var(--sh-3)} .hero-figure figcaption{margin-top:.6rem;font:400 .8rem/1.5 var(--font-ui);color:var(--muted)} .content-hero--split .hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)} .content-hero--rule{border-top:3px solid var(--accent)} .content-hero--compact{padding-top:clamp(1.9rem,3.4vw,3rem);padding-bottom:clamp(1.5rem,3vw,2.4rem)} .content-hero--compact h1{font-size:clamp(1.95rem,1.3rem + 2.2vw,2.9rem)} .content-hero--plain{background:none;border-bottom:0} /* the hero's action row (slot-mapper: hero.cta-block) + scroll_to_content token */ .hero-cta-wrap,.pg-hero-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem 1.1rem;margin:.35rem 0 0} .hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:.35rem 0 0} /* hero trust row. slot-mapper emits
text…, the DEFAULT package emits .pg-chip/.pg-chip-tick - both are tick pills. */ .hero-trust,.pg-hero-stats{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin:.3rem 0 0;padding:0;list-style:none} .hero-trust .pill,.pg-chip{display:inline-flex;align-items:center;gap:.45rem; padding:.36rem .72rem .36rem .5rem;border:1px solid var(--good-line);border-radius:var(--r-pill); background:var(--good-soft);font:600 .8rem/1.3 var(--font-display);color:var(--good)} .hero-trust .pill i,.pg-chip-tick{position:relative;width:1rem;height:1rem;flex:0 0 auto; border-radius:50%;background:var(--good);display:inline-block} .hero-trust .pill i::after,.pg-chip-tick::after{content:"";position:absolute;left:.26rem;top:.3rem; width:.3rem;height:.16rem;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)} .pg-chip-tick::after{border-color:#fff} /* hero facts / stat tiles - the figure band HAWKEYE gets right. slot-mapper: .hero-facts > .hero-fact > b + span ; DEFAULT package: .pg-hero-stat */ .hero-facts,.pg-hero-stats.is-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr)); gap:0;width:100%;margin:1.1rem 0 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .hero-fact,.pg-hero-stat{padding:1rem 1.1rem 1rem 0;border-right:1px solid var(--border)} .hero-fact:last-child,.pg-hero-stat:last-child{border-right:0} .hero-fact b,.pg-hero-stat b,.pg-hero-stat strong{display:block;font:800 clamp(1.3rem,1.1rem + .6vw,1.65rem)/1.1 var(--font-display); letter-spacing:-.03em;color:var(--h1)} .hero-fact span,.pg-hero-stat span{display:block;margin-top:.2rem;font-size:.82rem;color:var(--muted)} .pg-hero-eyebrow{display:flex;align-items:center;gap:.6rem;margin:0; font:700 .72rem/1.2 var(--font-display);letter-spacing:.15em;text-transform:uppercase;color:var(--accent-text)} .pg-hero-h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.034em;line-height:1.04; font-size:clamp(2.1rem,1.25rem + 3.1vw,3.6rem);color:var(--h1);margin:0} .pg-hero-desc{margin:0;font:400 clamp(1.05rem,.98rem + .35vw,1.28rem)/1.62 var(--font-read);color:var(--ink-muted);max-width:56ch} .pg-hero-italic{margin:.3rem 0 0;font:italic 400 1rem/1.6 var(--font-read);color:var(--muted);max-width:56ch} .pg-verify{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .8rem;border-radius:var(--r-pill); background:var(--info-soft);border:1px solid var(--info-line);color:var(--info);font-size:.8rem;font-weight:600} .pg-verify-label{font:700 .68rem/1.2 var(--font-display);letter-spacing:.12em;text-transform:uppercase} /* ---- THE LICENCE PICKER (Mother's hero `stream-row` nav). Four doors into the product, as cards with real line icons - no emoji, nothing stocky. -- */ .stream-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr));gap:.75rem; width:100%;margin:1.5rem 0 0} .stream-card{display:flex;align-items:flex-start;gap:.8rem;padding:1rem 1.05rem; background:var(--surface);border:1px solid var(--border);border-radius:var(--r); box-shadow:var(--sh-1);text-decoration:none;color:inherit; transition:border-color .18s,box-shadow .18s,transform .18s} .stream-card:hover{border-color:var(--accent);box-shadow:var(--sh-2);transform:translateY(-2px);color:inherit} .stream-ic{display:grid;place-items:center;flex:0 0 auto;width:2.5rem;height:2.5rem;border-radius:var(--r-sm); background:var(--accent-soft);color:var(--accent-deep)} .stream-ic svg{width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .stream-tx{min-width:0} .stream-t{display:block;font:700 .97rem/1.3 var(--font-display);color:var(--h1);letter-spacing:-.014em} .stream-s{display:block;margin-top:.15rem;font-size:.8rem;line-height:1.45;color:var(--muted)} .stream-card--moto .stream-ic{background:#eaf0f7;color:#1e3a5f} .stream-card--truck .stream-ic{background:#f6efe7;color:#8a4b1f} .stream-card--hpt .stream-ic{background:#f1ecfb;color:var(--prem)} html.dark .stream-card--moto .stream-ic,html[data-theme="dark"] .stream-card--moto .stream-ic{background:#13242f;color:#8fbbe2} html.dark .stream-card--truck .stream-ic,html[data-theme="dark"] .stream-card--truck .stream-ic{background:#2a1f14;color:#e0ab72} html.dark .stream-card--hpt .stream-ic,html[data-theme="dark"] .stream-card--hpt .stream-ic{background:#1c1735;color:#a894f2} /* fallback: if a plain list ever reaches this nav, it still reads as a row */ .stream-row>a:not(.stream-card){display:inline-flex;align-items:center;gap:.4rem;padding:.7rem .95rem; background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill); font:600 .9rem/1.2 var(--font-display);color:var(--h1);text-decoration:none} /* ---- the content region + section cards ------------------------------- */ .content-region{padding:clamp(1.75rem,3.5vw,2.75rem) 0 clamp(2.5rem,5vw,4rem)} .content-region>.inner{display:flex;flex-direction:column;gap:clamp(1rem,2vw,1.5rem)} .faq-region{padding-bottom:clamp(2rem,4vw,3rem)} .block:empty{display:none} .pg-section{position:relative} .pg-section--content,.pg-section--faq,.pg-section--contact{ background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg); box-shadow:var(--sh-1);padding:clamp(1.4rem,3vw,2.5rem) clamp(1.25rem,3vw,2.75rem)} .pg-section--content>*+*,.pg-section--faq>*+*,.pg-section--contact>*+*{margin-top:1rem} .pg-section>h2{padding-top:.1rem;max-width:34ch} .pg-section>h2::before{content:none} .content-region .pg-section--content>h2::before{content:counter(sec,decimal-leading-zero);display:block;font:800 .72rem/1 var(--font-display);letter-spacing:.16em;color:var(--accent-text);margin-bottom:.6rem} .pg-section h3{margin-top:1.5rem} .pg-section h3+*{margin-top:.45rem} /* prose: the reading face, a real measure, and links that look like links */ .pg-section--content>p,.pg-section--content ul:not([class])>li,.pg-section--content ol:not([class])>li,.pg-section--faq dd,.pg-section blockquote{ font-family:var(--font-read);font-size:1.0325rem;line-height:1.74;color:var(--ink)} .pg-section--content>p,.pg-section--content>ul:not([class]),.pg-section--content>ol:not([class]),.pg-section--content>blockquote{max-width:var(--read-w)} .pg-section--content>p+p{margin-top:.9rem} .pg-section--content ul:not([class]),.pg-section--content ol:not([class]){margin:1rem 0 0;padding-left:1.35rem} .pg-section--content ul:not([class])>li+li,.pg-section--content ol:not([class])>li+li{margin-top:.4rem} .pg-section--content ul:not([class])>li::marker,.pg-section--content ol:not([class])>li::marker{color:var(--accent)} /* PROSE links only. v27 underlined every in a section, which is how the verdict block's own `.btn.btn-primary` lost its white label and the topic cards grew underlines: a .pg-section--content a rule outranks .btn-primary. So the prose contexts are named, and no component link is touched. */ .pg-section--content>p a,.pg-section--content>ul:not([class]) a, .pg-section--content>ol:not([class]) a,.pg-section--content>blockquote a, .pg-section--content>table a,.pg-faq dd a,.cr-lead a,.cr-step-t p a, .cr-method p a,.cr-card>p a,.cr-callout p a,.cr-def-body a,.cr-tl-card>p a{ color:var(--accent-text);font-weight:500;text-decoration:underline; text-decoration-color:var(--accent);text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)} .pg-section--content>p a:hover,.pg-faq dd a:hover,.cr-lead a:hover, .cr-callout p a:hover,.cr-def-body a:hover{text-decoration-color:var(--accent)} .pg-section--content blockquote{margin:1.25rem 0 0;padding:.25rem 0 .25rem 1.1rem; border-left:3px solid var(--accent);font-style:italic;color:var(--ink-muted)} .pg-section--content strong,.pg-section--content b{font-weight:600;color:var(--h1)} .pg-section--content table{margin:1.25rem 0 0;font-size:.95rem;display:block;overflow-x:auto} .pg-section--content th,.pg-section--content td{padding:.65rem .8rem;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top} .pg-section--content th{font:700 .8rem/1.3 var(--font-display);letter-spacing:.06em;text-transform:uppercase; color:var(--ink-600);background:var(--zone);border-bottom-color:var(--border)} .pg-section--content img{border-radius:var(--r);border:1px solid var(--border)} /* ---- FAQ. The engine prints
/
; the shared JS below promotes it to an accordion (role=button + aria-expanded + hidden), so the closed state must style the dt as a control. ------------------- */ .pg-faq{margin:0} .pg-faq dt{padding:1.05rem 0 .5rem;font:600 1.04rem/1.45 var(--font-display);color:var(--h1); border-top:1px solid var(--line-soft)} .pg-faq dt:first-child{border-top:0} .pg-faq dd{margin:0 0 1rem;max-width:var(--read-w);color:var(--ink-muted)} .pg-faq--acc dt{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem; padding:1.05rem 0;cursor:pointer;list-style:none} .pg-faq--acc dt::after{content:"";flex:0 0 auto;width:.6rem;height:.6rem;margin-top:.45rem; border-right:2px solid var(--accent);border-bottom:2px solid var(--accent); transform:rotate(45deg);transition:transform .2s} .pg-faq--acc dt[aria-expanded="true"]{color:var(--accent-text)} .pg-faq--acc dt[aria-expanded="true"]::after{transform:rotate(-135deg)} .pg-faq--acc dt:hover{color:var(--accent-text)} .pg-faq--acc dd{padding-bottom:.4rem} /* ---- the shared contact form (renderContactForm, one per estate). Styled by element, not by class, so a change in that shared block cannot leave THUNDER with unstyled inputs. ----------------------------------------- */ .pg-section--contact form{display:grid;gap:1rem;max-width:40rem} .pg-section--contact label{display:block;font:600 .85rem/1.4 var(--font-display);color:var(--ink-700);margin-bottom:.35rem} .pg-section--contact input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .pg-section--contact textarea,.pg-section--contact select{ width:100%;padding:.72rem .85rem;background:var(--surface-2);color:var(--ink); border:1px solid var(--border-mid);border-radius:var(--r-sm);font:400 1rem/1.5 var(--font-ui)} .pg-section--contact textarea{min-height:9rem;resize:vertical} .pg-section--contact input:focus,.pg-section--contact textarea:focus,.pg-section--contact select:focus{ border-color:var(--accent);outline:0;box-shadow:var(--ring)} .pg-section--contact button,.pg-section--contact input[type="submit"]{ justify-self:start;display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:.78rem 1.4rem; background:var(--cta);color:var(--cta-ink);border:1px solid var(--cta);border-radius:var(--r-sm); font:600 .975rem/1.2 var(--font-display);cursor:pointer} .pg-section--contact button:hover,.pg-section--contact input[type="submit"]:hover{background:var(--brand-700);border-color:var(--brand-700)} .pg-section--contact small,.pg-section--contact .fine{color:var(--muted);font-size:.8rem} /* ---- the reserved ad slot (AD_REVENUE_POLICY: labelled, height reserved) */ .ad-unit{min-height:112px;margin:var(--s5) 0;padding:.55rem;display:flex;flex-direction:column;gap:.4rem; background:var(--zone);border:1px solid var(--line-soft);border-radius:var(--r)} .ad-unit .lab{justify-content:center;color:var(--muted);font-size:.62rem;letter-spacing:.2em} .ad-unit .lab::before{display:none} .ad-unit ins{flex:1 1 auto;min-height:90px} /* =========================================================================== LAYER 4 of 8: the BLOCK COMPONENTS. Every class lib/content-blocks.ts can emit, in the order that file emits them. The DOM shapes below are quoted from that file - this layer is written against the renderer, not against a mock-up, which is why v27 had 52 of these unstyled: nobody had read it. Icons are the renderer's own inline stroke SVGs (zero emoji, by design). =========================================================================== */ /* shared: every chip icon and every .i / .arr the renderer emits */ .pg-section svg,.cr-card-chip svg,.cr-ss-ic svg,.cr-sm-badge svg,.cr-vd-chip svg,.cr-vd-badge svg,.cr-tl-time svg{ fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .cr-lead{margin:0 0 1.25rem;max-width:var(--read-w); font:400 1.08rem/1.7 var(--font-read);color:var(--ink-muted)} /* ---- stat-band:
*/ .cr-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.75rem;margin:1.25rem 0 0} .cr-stat{padding:1.25rem 1.3rem;background:var(--zone);border:1px solid var(--line-soft); border-radius:var(--r);border-top:3px solid var(--accent)} .cr-stat-v{display:block;font:800 clamp(1.4rem,1.2rem + .7vw,1.85rem)/1.05 var(--font-display); letter-spacing:-.035em;color:var(--h1);font-variant-numeric:tabular-nums} .cr-stat-l{display:block;margin-top:.3rem;font:600 .92rem/1.4 var(--font-display);color:var(--ink-700)} .cr-stat-n{display:block;margin-top:.3rem;font-size:.8rem;line-height:1.5;color:var(--muted)} /* ---- steps, numbered:
  1. n
    */ .cr-steps{display:grid;gap:.7rem;margin:1.25rem 0 0;padding:0;list-style:none;counter-reset:none} .cr-step{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:1rem;align-items:start; padding:1.15rem 1.25rem;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r)} .cr-step-n{display:grid;place-items:center;width:2.35rem;height:2.35rem;border-radius:var(--r-sm); background:var(--accent-soft);color:var(--accent-deep); font:800 1rem/1 var(--font-display);font-variant-numeric:tabular-nums} .cr-step-t{min-width:0} .cr-step-t h3{margin:.15rem 0 .3rem;font-size:1.06rem} .cr-step-t p{margin:0;font-family:var(--font-read);font-size:1rem;line-height:1.68;color:var(--ink-muted)} /* ---- steps WITH icons -> the method list: