/* Brand 2 (rebrand, Step 1 of design_handoff_ardent_rebrand/MIGRATION.md): tokens + fonts. TOKEN LEVEL ONLY. This file defines the new tokens and repoints the site's EXISTING tokens at them. It does not touch markup, and it does not reach the ~11,000 old colours typed inline in the page files (#F97316 / #1D3557 / #555); those move template by template in Steps 2-4. Loaded last in by views/layouts/base.ejs. On localhost, ?brand=1 renders any page without this file (and with the old font preloads) for side-by-side comparison. CACHE: /_astro/ is served immutable for a year. Bump the ?v= in base.ejs on EVERY edit to this file, or production visitors keep the old copy. Unlayered on purpose: the compiled Tailwind in DrURY_bQ.css declares its tokens inside @layer theme, and an unlayered declaration beats a layered one regardless of order. */ /* Self-hosted Google Fonts (OFL), latin subset, variable. One file per family covers every weight used: Newsreader 400-500 (with optical sizing), Hanken Grotesk 400-600. */ @font-face{font-family:"Newsreader";src:url(/fonts/Newsreader-latin-var.woff2) format("woff2"); font-weight:400 500;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:"Hanken Grotesk";src:url(/fonts/HankenGrotesk-latin-var.woff2) format("woff2"); font-weight:400 600;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} :root{ /* ---- New tokens, verbatim from design_handoff_ardent_rebrand/tokens.css ---- */ --ardent-navy:#0A1A30; --ardent-sovereign:#13315E; --ardent-blue:#2563D9; --ardent-blue-hover:#1D52B8; --ardent-glass:#D6E4F8; --ardent-mist:#EEF3F9; --ardent-line:#C9D8EE; --ardent-track:#E3EAF3; --ardent-paper:#F8F7F3; --ardent-white:#FFFFFF; --ardent-slate:#4A5A70; --ardent-steel:#A9BAD3; --ardent-sunlight:#FFD166; /* eyebrows/labels on navy only, never text on white */ --ardent-success:#22A45D; --ardent-online:#22C55E; --ardent-star:#F5B301; --font-display:"Newsreader",Georgia,serif; --font-body:"Hanken Grotesk",system-ui,sans-serif; --h1:clamp(42px,5.9vw,60px); --h2:clamp(33px,4.7vw,48px); --h3-card:23px; --body:16px; --body-lg:18px; --small:14px; --eyebrow:12px; --lh-heading:1.04; --lh-body:1.65; --tracking-heading:-0.02em; --r-sm:3px; --r-md:6px; --r-lg:8px; --r-xl:10px; --r-pill:999px; --shadow-card:0 12px 32px rgba(10,26,48,.12); --shadow-float:0 30px 80px rgba(10,26,48,.35); --shadow-menu:0 30px 80px rgba(5,14,28,.35),0 0 0 1px rgba(10,26,48,.06); --text-shadow-hero:0 2px 6px rgba(5,14,28,.55),0 4px 32px rgba(5,14,28,.75); --glass-bg:rgba(214,228,248,.10); --glass-border:1px solid rgba(214,228,248,.30); --glass-blur:blur(20px); --overlay-hero:linear-gradient(90deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.5) 30%,rgba(0,0,0,.18) 60%,rgba(0,0,0,0) 100%); --overlay-hero-mobile:rgba(0,0,0,.52); --overlay-home-mobile:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.46) 14%,rgba(0,0,0,.32) 30%,rgba(0,0,0,.24) 50%,rgba(0,0,0,.32) 70%,rgba(0,0,0,.48) 86%,rgba(0,0,0,.62) 100%); --grid-navy:linear-gradient(rgba(214,228,248,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(214,228,248,.06) 1px,transparent 1px); --container:1280px; --gutter:clamp(24px,5vw,72px); --section-y:120px; /* ---- The site's existing tokens, repointed ---- */ /* Families. --font-display is shared by name with tokens.css, so it is set above. --font-mono (Fragment Mono, ~1,200 uses: eyebrows and labels) goes to Hanken Grotesk too: the brand has no mono face. */ --font-sans:var(--font-body); --font-mono:var(--font-body); /* Tailwind semantic colours (compiled into DrURY_bQ.css as neutral oklch values). */ --color-bg:var(--ardent-paper); --color-bg-alt:var(--ardent-mist); --color-surface:var(--ardent-track); --color-text:var(--ardent-navy); --color-text-muted:var(--ardent-slate); --color-text-subtle:var(--ardent-slate); --color-border-strong:var(--ardent-line); } /* Lead modal tokens (declared on .lm-root in base.ejs , so this needs the higher specificity rather than source order). Primary action -> Clarence Blue. The modal's green step buttons and progress styling are rebuilt in Step 3, not here. */ html .lm-root{ --lm-accent:var(--ardent-blue); --lm-accent-hover:var(--ardent-blue-hover); --lm-accent-soft:rgba(37,99,217,.10); --lm-dark:var(--ardent-navy); --lm-title:var(--ardent-navy); --lm-body:var(--ardent-slate); } /* Heading type from the brand: Newsreader 400 for H1/H2, 500 for H3; tight tracking. !important because page bodies set font-weight inline on headings. Sizes are NOT applied here; they move with each template, so a long H1 is never forced to 60px in a narrow column it was not designed for. */ h1,h2,.heading-1,.heading-2{font-family:var(--font-display);font-weight:400 !important;letter-spacing:var(--tracking-heading);} h3,.heading-3{font-family:var(--font-display);font-weight:500 !important;} body{font-family:var(--font-body);} /* ====================================================================================== STEP 2: SHARED LAYOUT (nav bar, mega menus, mobile menu, bottom CTA, breadcrumb, footer) Reference: design_handoff_ardent_rebrand/designs/Ardent Nav.dc.html + README "Global". CSS ONLY for the chrome. The nav, mega-menu and footer markup is duplicated into every .body.html and is maintained by tools/sync_template_chrome.py and the gen_*_nav.py generators, which anchor on its exact structure. So no class, id or START/END marker changes; everything below restyles what is there. Specificity: base.ejs and the per-page nav CSS load AFTER this file (they sit in ), so chrome rules here are prefixed `html body` to outrank them. !important appears only where the page markup has an inline style or an !important rule to beat. ====================================================================================== */ /* ---------- Nav bar ---------- */ /* Default (pages without a dark hero): solid Harbour Navy. */ /* [data-scrolled] and .bg-bg\/50 are listed to reach (1,1,2): base.ejs acg-nav-solid-css sets #main-header[data-scrolled="true"] and #main-header.bg-bg\/50 white with !important at (1,1,0). */ html body #main-header,html body #main-header[data-scrolled],html body #main-header.bg-bg\/50{background:var(--ardent-navy) !important;border-bottom:1px solid rgba(214,228,248,.14) !important; backdrop-filter:none !important;-webkit-backdrop-filter:none !important;} /* Transparent over a dark hero until the page scrolls: the v2 service hero (.cc-hero) and the six overlay pages (homepage, about, contact, resources, glossary, ai). */ html body:has(.cc-hero) #main-header[data-scrolled="false"], html body #main-header[data-overlay="true"][data-scrolled="false"]{background:transparent !important;} /* Scrolled: navy glass. */ html body #main-header[data-scrolled="true"]{background:rgba(10,26,48,.92) !important; backdrop-filter:blur(14px) !important;-webkit-backdrop-filter:blur(14px) !important;} /* The service hero slides up under the transparent bar. The sticky wrapper keeps its place in the flow and the hero is pulled up by the bar's height (4rem = h-16). */ html body:has(.cc-hero) .sticky.top-0.z-50{margin-bottom:-4rem;} /* base.ejs sets .cc-hero.hv3{padding:0} (0,2,0), so the hv3 hero needs its own selector. */ html body .cc-hero,html body .cc-hero.hv3{padding-top:4rem;} /* White logo everywhere. The page bodies force the dark one with an !important