/* ============================================================================ * Woodfine brand token override layer (Phase 3 — merged from theme-woodfine.css) * Loaded after tokens.css, before style.css, when brand="woodfine". * Overrides DTCG semantic variables with Woodfine institutional values. * * Source: Woodfine Management Corp. brand spec (woodfinegroup.com) * Includes: previously separate theme-woodfine.css (deleted — L21 enforcement) * * L3: tokens-woodfine.css is GENERATED from dtcg-bundle.json + Woodfine * brand overrides. This file is the merged canonical output. * L21: exactly 3 CSS files. theme-woodfine.css deleted, content merged here. * ============================================================================ */ :root { /* ---- Surface overrides ---- */ --surface-background: oklch(98.09% 0.0026 229.85); /* #F7F9FA unified canvas */ --surface-layer: oklch(100.0% 0.0001 263.28); /* #FFFFFF raised surfaces */ --surface-layer-accent: oklch(96.21% 0.0097 252.90); /* #EEF3F9 Woodfine-tinted aside */ --surface-layer-hover: oklch(92.58% 0.0128 252.70); --surface-inverse: oklch(21.01% 0.0318 264.67); /* #111827 inverse */ /* ---- Text overrides ---- */ --text-primary: oklch(21.01% 0.0318 264.67); /* #111827 Deep Slate */ --text-secondary: oklch(55.10% 0.0234 264.37); /* #6B7280 muted */ --text-tertiary: oklch(65.00% 0.0180 264.00); --text-placeholder: oklch(72.00% 0.0140 264.00); --text-disabled: oklch(85.97% 0.0107 261.80); /* ---- Interactive — Woodfine Blue replaces IBM Blue ---- */ --interactive-link: oklch(39.06% 0.1005 253.05); /* #164679 */ --interactive-link-visited: oklch(31.42% 0.0790 253.24); /* #0F3258 */ --interactive-link-hover: oklch(48.39% 0.1346 253.65); /* #1A5FA8 */ --interactive-link-redlink: var(--color-link-redlink); /* unchanged */ --interactive-button-primary: oklch(39.06% 0.1005 253.05); /* #164679 */ --interactive-focus-ring: oklch(39.06% 0.1005 253.05); /* #164679 */ /* ---- Border overrides ---- */ --border-interactive: oklch(39.06% 0.1005 253.05); /* #164679 */ /* ---- Engine-level alias overrides (from theme-woodfine.css) ---- */ --bg: #F7F9FA; --bg-chrome: #FFFFFF; --bg-aside: #EEF3F9; --fg: #111827; --fg-muted: #6B7280; --border: rgba(17, 24, 39, 0.20); --link: #164679; --link-visited: #0F3258; --accent: #164679; /* System colour tokens (Tier-2 Semantic, from theme-woodfine.css) */ --sys-canvas: #F7F9FA; --sys-card: #FFFFFF; --sys-text: #111827; --sys-muted: #6B7280; --sys-border: #111827; --sys-hairline: rgba(17, 24, 39, 0.15); --sys-accent: #164679; } /* Dark mode — Woodfine Blue #164679 is 2.9:1 on #0B1220 (AA fail); lighten to 4.7:1 */ html[data-theme="dark"] { --interactive-link: oklch(62% 0.14 250); /* ≈ #4d8fd1 */ --interactive-link-hover: oklch(72% 0.12 250); --interactive-link-visited: oklch(55% 0.13 270); --interactive-button-primary: oklch(62% 0.14 250); --interactive-focus-ring: oklch(62% 0.14 250); --border-interactive: oklch(62% 0.14 250); --link: oklch(62% 0.14 250); --accent: oklch(62% 0.14 250); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --interactive-link: oklch(62% 0.14 250); --interactive-link-hover: oklch(72% 0.12 250); --interactive-link-visited: oklch(55% 0.13 270); --interactive-button-primary: oklch(62% 0.14 250); --interactive-focus-ring: oklch(62% 0.14 250); --border-interactive: oklch(62% 0.14 250); --link: oklch(62% 0.14 250); --accent: oklch(62% 0.14 250); } } /* ============================================================================ * Woodfine institutional chrome — projects + corporate instances only * Applied via [data-instance] attribute set on by the engine. * Targets: projects.woodfinegroup.com (:9093), corporate.woodfinegroup.com (:9095) * ============================================================================ */ /* ── Navigation bar — Woodfine Blue masthead ── */ :is([data-instance="projects"], [data-instance="corporate"]) .topnav { background: #164679; border-bottom: none; box-shadow: 0 1px 4px rgba(0,0,0,0.28); } :is([data-instance="projects"], [data-instance="corporate"]) .topnav .wordmark { color: #fff; } /* Override SVG presentation attribute (lower specificity than CSS property) */ :is([data-instance="projects"], [data-instance="corporate"]) .topnav .wordmark svg text { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; } :is([data-instance="projects"], [data-instance="corporate"]) .topnav .lang-toggle { color: rgba(255,255,255,0.80); border-color: rgba(255,255,255,0.35); } :is([data-instance="projects"], [data-instance="corporate"]) .topnav .lang-toggle:hover { color: #fff; border-color: rgba(255,255,255,0.70); } :is([data-instance="projects"], [data-instance="corporate"]) .topnav-search input { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.30); color: #fff; } :is([data-instance="projects"], [data-instance="corporate"]) .topnav-search input::placeholder { color: rgba(255,255,255,0.55); } :is([data-instance="projects"], [data-instance="corporate"]) .topnav-search-btn { color: rgba(255,255,255,0.80); } /* ── Featured article — editorial weight ── */ :is([data-instance="projects"], [data-instance="corporate"]) .featured { border-top: 3px solid #164679; padding-top: 18px; } :is([data-instance="projects"], [data-instance="corporate"]) .featured__row:first-child { color: #164679; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 10px; } :is([data-instance="projects"], [data-instance="corporate"]) .featured__row:first-child .dot { background: #164679; } :is([data-instance="projects"], [data-instance="corporate"]) .featured__title { font-size: 20px; font-weight: 700; letter-spacing: -0.012em; line-height: 1.3; margin-top: 10px; } /* ── Start-here chips — Woodfine Blue accent ── */ :is([data-instance="projects"], [data-instance="corporate"]) .starthere-chip { border-color: rgba(22,70,121,0.28); } :is([data-instance="projects"], [data-instance="corporate"]) .starthere-chip:hover { border-color: #164679; background: rgba(22,70,121,0.05); } /* ── Home stats bar — subtle institutional treatment ── */ :is([data-instance="projects"], [data-instance="corporate"]) .home-stats-oneliner { color: #164679; font-weight: 500; }