/* ============================================================================ Code + Counsel — core token layer ---------------------------------------------------------------------------- The single source of truth for palette and type across every page. Why this file exists: the nine content pages each carried their own copy of the token block and ~60–100KB of base64 font, so any systemic change meant nine coordinated edits that drifted apart in practice. The page CSS is already token-driven (1,366 var() uses against 75 hardcoded hexes), so repointing the tokens here re-skins the whole site. Palette per the redesign brief §13. Token NAMES are unchanged from the previous petrol/aqua system on purpose — that keeps all 1,366 existing var() references working while the values move underneath them. ========================================================================= */ /* ---------- fonts ---------- Real .woff2 files rather than inlined base64: they cache once and serve every page, instead of re-downloading per document. Brief §17 (limit font files, protect LCP). Gulax is the brand-name face only — never body copy. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; /* variable: one file covers the whole ramp */ font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2"); } /* Shared bot-trap field for public forms. It remains in the submitted form but is kept outside the visual and keyboard flow for real visitors. */ .form-hp { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } @font-face { font-family: "Gulax"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/gulax-subset.woff2") format("woff2"); } /* ---------- light: warm ivory ground ---------- Selector is :root plus :root:not([data-theme]) because the pages' inline #aero block claims the latter (0,2,0). Matching that specificity and loading after the inline styles is what lets this file win. */ :root, :root:not([data-theme]) { --bg: #F1EDE5; /* Warm Ivory — the page ground */ --bg-raise: #FBF9F5; --surface: #DCE7E7; /* Mist */ --ink: #0B1F2A; /* Deep Navy — body copy */ --ink-soft: #4C6068; --brand: #173745; /* Blue Slate — headings, primary marks */ --accent: #1E666B; /* Harbor Teal — THE indicator */ --accent-deep: #185257; /* deepened teal for small text (5.7:1 on ivory) */ --line: #C9D6D6; --btn-bg: #173745; --btn-ink: #F1EDE5; --slab-bg: #0B1F2A; /* inverted slab = deep navy */ --slab-ink: #F1EDE5; --slab-accent: #1E666B; /* Lantair only. Never a general Code + Counsel accent (brief §13). */ --amber: #D59A4E; /* Lantern Amber */ --graphite: #20272B; /* type — Inter carries everything except the brand name itself */ --display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --brandface: "Gulax", var(--display), sans-serif; /* ---- retiring the Y2K neon trio ---- The pages' #aero block defines an accent trio (orange #FF7A1A, lime #86DE45, violet #A45CFF) and paints a violet radial wash across body. The brief rules that out on three counts: §13 (must not feel cyberpunk or futuristic for its own sake), §14 (no purple/blue AI light), and the §20 check for purple/blue AI clichés. De-purpling was also part of the phase-2 work that got reverted. The .spark-* / .glass / .glow-edge classes are dead — defined in CSS, used nowhere in markup — so the only live consumer is the body wash. Repointing the three tokens here neutralises it everywhere at once without editing nine inline style blocks. */ --y2k-orange: #1E666B; /* was #FF7A1A */ --y2k-lime: #1E666B; /* was #86DE45 */ --y2k-violet: #173745; /* was #A45CFF — the purple body wash */ --y2k-orange-soft: transparent; --y2k-lime-soft: transparent; --y2k-violet-soft: transparent; } /* ---------- dark: the same world after dusk, not an inversion ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0B1F2A; --bg-raise: #143040; --surface: #173745; --ink: #DCE7E7; --ink-soft: #93A8AE; --brand: #63B0B4; /* Harbor Teal raised to carry on navy (6.6:1) */ --accent: #63B0B4; --accent-deep: #8FCACD; --line: #24485A; --btn-bg: #63B0B4; --btn-ink: #0B1F2A; --slab-bg: #63B0B4; --slab-ink: #0B1F2A; --slab-accent: #0B1F2A; } } /* Explicit choice wins over the system preference in both directions. */ :root[data-theme="dark"] { --bg: #0B1F2A; --bg-raise: #143040; --surface: #173745; --ink: #DCE7E7; --ink-soft: #93A8AE; --brand: #63B0B4; --accent: #63B0B4; --accent-deep: #8FCACD; --line: #24485A; --btn-bg: #63B0B4; --btn-ink: #0B1F2A; --slab-bg: #63B0B4; --slab-ink: #0B1F2A; --slab-accent: #0B1F2A; } :root[data-theme="light"] { --bg: #F1EDE5; --bg-raise: #FBF9F5; --surface: #DCE7E7; --ink: #0B1F2A; --ink-soft: #4C6068; --brand: #173745; --accent: #1E666B; --accent-deep: #185257; --line: #C9D6D6; --btn-bg: #173745; --btn-ink: #F1EDE5; --slab-bg: #0B1F2A; --slab-ink: #F1EDE5; --slab-accent: #1E666B; } /* ============================================================================ Primary navigation — brief §5 ---------------------------------------------------------------------------- The previous header hid every destination behind a "Menu" button, which §5 rules out for core commercial destinations. Desktop now shows the five primary items plus the branded CTA; the drawer survives for narrow screens only. The #menuBtn / #menuPanel ids and the .menu wrapper are preserved on purpose so the existing per-page nav JS keeps working untouched, and the single #themeToggle now lives in the bar rather than inside the panel so the id stays unique. ========================================================================= */ /* header.site .site-bar (0,2,1) is needed to beat the pages' own .site-bar rule, which sets justify-content: space-between and loads after this file. space-between plus an auto margin distributed the free space twice and let the nav ride back over the wordmark on Lantair. */ header.site .site-bar { display: flex; align-items: center; justify-content: flex-start; gap: 1rem; flex-wrap: nowrap; } /* The bar carries far more than the 62rem text column was sized for, so give it its own wider measure. The brand must not shrink: .brandmark is nowrap, so a squeezed .brand spills the wordmark under the nav instead of wrapping. */ header.site .site-bar { max-width: 80rem; } header.site .site-bar .brand { margin-right: auto; flex: 0 0 auto; } header.site .site-bar .site-nav, header.site .site-bar .bar-actions { flex: 0 0 auto; } .site-nav { display: none; align-items: center; gap: clamp(.9rem, 2vw, 1.7rem); } .site-nav a { font-family: var(--body); font-size: .95rem; letter-spacing: .01em; color: var(--ink-soft); text-decoration: none; padding: .35rem 0; border-bottom: 2px solid transparent; transition: color .18s ease, border-color .18s ease; } .site-nav a:hover { color: var(--brand); } .site-nav a[aria-current="page"] { color: var(--brand); border-bottom-color: var(--accent); } .bar-actions { display: flex; align-items: center; gap: .6rem; } .nav-cta { white-space: nowrap; font-size: .92rem; padding: .55rem 1rem; } .site-bar .site-nav a { white-space: nowrap; } .site-bar { flex-wrap: nowrap; min-width: 0; max-width: 100%; } /* Desktop: primary items inline, drawer retired. */ @media (min-width: 62rem) { .site-nav { display: flex; } .bar-actions .menu { display: none; } /* The wordmark was sized for a bar holding nothing but a Menu button (clamp up to 5rem). With five primary destinations plus the branded CTA alongside it, it has to yield or the CTA is pushed off-canvas. */ .site-bar .brandmark { font-size: clamp(1.2rem, 2vw, 1.85rem); } .site-bar .brand-emblem { width: 2.5rem; height: 2.5rem; flex: 0 0 auto; } } /* Narrow: the CTA keeps its place (§16 — primary action without excessive scrolling); everything else folds into the existing drawer. */ @media (max-width: 30rem) { .nav-cta { display: none; } } .menu-panel a[aria-current="page"] { color: var(--brand); } /* Footer secondary nav — demoted destinations (§5). */ .foot-nav { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 1rem 0; } .foot-nav a { font-size: .9rem; color: var(--ink-soft); text-decoration: none; } .foot-nav a:hover { color: var(--brand); text-decoration: underline; } /* The header's generic link styling was beating .btn on the nav CTA — it rendered as underlined brand-coloured text on the dark button fill. Pin the button's own ink and drop the underline. */ .site-bar a.nav-cta, .site-bar a.nav-cta:hover { color: var(--btn-ink); text-decoration: none; border-bottom: 0; } /* ============================================================================ Homepage section components — brief §6 / §18 ---------------------------------------------------------------------------- Reusable modules rather than one-off layouts, with content limits baked into the type scale so future edits can't quietly turn a concise card into an essay (§18). Section rhythm follows §4: one concept, one CTA per section. ========================================================================= */ /* .wrap sets `padding: 0 `, and it loads after this file, so a bare .sec rule loses its vertical padding entirely and sections collide. Matching .sec.wrap and setting the axes separately keeps both. */ .sec.wrap { padding-top: clamp(3.5rem, 9vh, 6rem); padding-bottom: clamp(3.5rem, 9vh, 6rem); } .final-cta.wrap { padding-top: clamp(4rem, 11vh, 7rem); padding-bottom: clamp(4rem, 11vh, 7rem); } .sec-head { max-width: 46rem; margin: 0 0 clamp(1.8rem, 4vh, 2.6rem); } .sec-head .eyebrow { font-family: var(--mono); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-deep); margin: 0 0 .7rem; } .sec-head h2 { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.12; letter-spacing: -.015em; color: var(--brand); margin: 0 0 .7rem; text-wrap: balance; } .sec-head p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); max-width: 58ch; } /* four-pillar operating model (§6 section 2) */ /* 12rem min lets all four sit in one row inside .wrap (62rem), rather than breaking 3+1 — a four-part model reads badly on an orphaned row. */ .pillars { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } .pillar { padding: 1.5rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raise); } .pillar .n { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; color: var(--accent-deep); } .pillar h3 { font-family: var(--display); font-size: 1.22rem; font-weight: 600; color: var(--brand); margin: .5rem 0 .5rem; } .pillar p { margin: 0; font-size: .97rem; line-height: 1.55; color: var(--ink-soft); } /* audience cards (§6 section 4) */ .aud { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .aud-card { padding: 1.4rem 1.5rem; border-left: 2px solid var(--accent); background: var(--surface); border-radius: 0 8px 8px 0; } .aud-card h3 { font-family: var(--display); font-size: 1.08rem; font-weight: 600; color: var(--brand); margin: 0 0 .4rem; } .aud-card p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ink-soft); } /* evidence + studio (§6 sections 5 and 6) */ .proof { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } .proof-card { padding: 1.5rem; border: 1px solid var(--line); border-radius: 10px; } .proof-card h3 { font-family: var(--display); font-size: 1.05rem; font-weight: 600; color: var(--brand); margin: 0 0 .5rem; } .proof-card p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ink-soft); } .studio { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); } .studio-p { padding: 1.4rem 0; border-top: 2px solid var(--accent); } .studio-p h3 { font-family: var(--display); font-size: 1.15rem; font-weight: 600; color: var(--brand); margin: 0 0 .15rem; } .studio-p .role { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); } .studio-p p { margin: .6rem 0 0; font-size: .97rem; line-height: 1.58; color: var(--ink-soft); } /* final CTA (§6 section 7) — one action, no competition */ .final-cta { text-align: center; padding: clamp(4rem, 11vh, 7rem) 0; border-top: 1px solid var(--line); } .final-cta h2 { font-family: var(--display); font-weight: 600; font-size: clamp(1.7rem, 4vw, 2.6rem); color: var(--brand); margin: 0 0 .8rem; letter-spacing: -.015em; } .final-cta p { margin: 0 auto 1.8rem; max-width: 46ch; color: var(--ink-soft); font-size: 1.05rem; } /* The brand name set in Gulax wherever it appears as the company name (§2). */ .brandname { font-family: var(--brandface); text-transform: uppercase; letter-spacing: .01em; } /* ============================================================================ Button base — brief §18 ---------------------------------------------------------------------------- contact.html, insights.html and intake.html were all generated from the terms.html skeleton, which never carried the base .btn rule — only the #aero gloss layer that decorates it. So their in-page buttons rendered as bare native controls with no padding, radius or type. Defining the component once here fixes all three and stops the next generated page inheriting the gap. Scoped to