/* ============================================================ Brand Digital — base.css Design tokens, @font-face, minimal reset, base typography. Identity v1 (July 2026): monochrome-first. Black canvas, white type, square corners, one accent — Signal Green #0CCE6B, the Lighthouse "pass" green. Display face: Anton. ============================================================ */ /* ---------- Design tokens ---------- */ :root { /* Colour — core */ --bd-black: #000000; /* canvas — the brand colour */ --bd-white: #ffffff; --bd-green: #0cce6b; /* Signal Green — THE accent */ --bd-green-dark: #0aa757; /* hover/active for green elements */ --bd-green-deep: #0a8a4c; /* accent on LIGHT surfaces (contrast-safe, large text only) */ --bd-carbon: #131313; /* raised surfaces / cards on black */ --bd-carbon-2: #1c1c1c; /* hover state for carbon surfaces */ --bd-grey-300: #a3a8b0; /* muted text on dark */ --bd-grey-600: #52525b; /* muted text on light */ --bd-silver: #f4f5f6; /* Soft Silver — light section backgrounds */ --bd-ink-on-light: #0a0a0a; /* Semantic roles (respond to light-section scoping below) */ --c-ink: var(--bd-white); /* primary text on current surface */ --c-text-secondary: var(--bd-grey-300); --c-text-secondary-dark: var(--bd-grey-300); --c-eyebrow: var(--bd-green); --c-line: rgba(255, 255, 255, 0.14); /* rules/borders on dark */ --c-line-light: rgba(0, 0, 0, 0.12); /* Legacy aliases — keep old names working with new values */ --c-graphite: var(--bd-carbon); /* dark SURFACES only; text uses --c-ink */ --c-electric-blue: var(--bd-green); /* the accent, everywhere */ --c-cyan: var(--bd-green); --c-soft-silver: var(--bd-silver); /* light BACKGROUNDS only; borders use --c-line */ --c-white: #ffffff; /* Type families */ --ff-display: "Anton", "Arial Narrow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ff-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Type scale — Anton is condensed, so display sizes run larger */ --fs-display: clamp(3rem, 8vw, 6rem); --fs-h1: clamp(2.25rem, 4.5vw, 3.5rem); --fs-h2: clamp(1.75rem, 3vw, 2.5rem); --fs-h3: 1.5rem; --fs-body: 1rem; --fs-small: 0.875rem; --fs-eyebrow: 0.8rem; /* Tracking */ --tracking-display: 0.005em; /* Anton: near-zero, slightly open */ --tracking-monogram: 0.005em; --tracking-eyebrow: 0.16em; --tracking-btn: 0.08em; /* Spacing — 8px base */ --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 40px; --s-6: 48px; --s-7: 56px; --s-8: 64px; --s-9: 72px; --s-10: 80px; --s-11: 88px; --s-12: 96px; /* Radius — the brand is square. Kept as tokens so nothing invents one. */ --r-sm: 0px; --r-md: 0px; --r-lg: 0px; --r-pill: 0px; } /* ---------- Light-section scoping ---------- Any Soft Silver section flips its local text roles. Headings inherit, so they go dark automatically. */ .principles, .cs-stats, .cs-quote, .service-outcome, .about-values, .contact-body__details { --c-ink: var(--bd-ink-on-light); --c-text-secondary: var(--bd-grey-600); --c-text-secondary-dark: var(--bd-grey-600); --c-eyebrow: var(--bd-ink-on-light); --c-line: var(--c-line-light); --c-electric-blue: var(--bd-green-deep); /* accent survives contrast on silver (large elements only) */ color: var(--c-ink); } /* ---------- Fonts (self-hosted woff2) ---------- */ @font-face { font-family: "Anton"; src: url("../fonts/Anton-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; /* Preloaded in ; `optional` keeps the fallback if the LCP window is missed, eliminating swap-induced CLS. */ font-display: optional; } @font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, h4, h5, h6, p { margin: 0; } img, picture, svg { display: block; max-width: 100%; } body { line-height: 1.6; } :focus-visible { outline: 2px solid var(--bd-green); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---------- Base typography ---------- */ body { font-family: var(--ff-body); font-size: var(--fs-body); font-weight: 400; color: var(--c-ink); background-color: var(--bd-black); } h1, h2, h3 { font-family: var(--ff-display); font-weight: 400; text-transform: uppercase; line-height: 0.98; letter-spacing: var(--tracking-display); color: inherit; } h4, h5, h6 { font-family: var(--ff-body); font-weight: 700; line-height: 1.2; color: inherit; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } a { color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--bd-green); text-underline-offset: 0.18em; text-decoration-thickness: 2px; } a:hover, a:focus-visible { color: var(--c-electric-blue); } /* The brand full stop — end key headlines with . */ .dot { color: var(--bd-green); }