/* ========================================================================== Norwood Design & Development — brand tokens (site build) Canonical, deployed token file. Derived from the Claude Design deliverable at /brand/tokens.css, which is kept unmodified as the original design artifact. Every addition and deviation is documented in /docs/BRAND-ADDENDUM.md — read that before changing anything here. Rule from BRAND.md still applies: never hard-code a hex, size or spacing value that a token below already carries. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Inter (self-hosted variable, weights 100–900) Self-hosted rather than CDN-loaded: BRAND.md forbids Inter substitutes, and the system-ui fallback silently resolves to Segoe UI on Windows. Also keeps visitor IPs away from a third-party font host (UK/GDPR). Add to so the roman file is fetched before CSS resolves: -------------------------------------------------------------------------- */ @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/InterVariable.woff2") format("woff2"); } @font-face { font-family: Inter; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/fonts/InterVariable-Italic.woff2") format("woff2"); } :root { /* ------------------------------------------------------------------------ 2. Colour — unchanged from the original tokens file ------------------------------------------------------------------------ */ --bg: #161826; --surface: #1e2030; --text: #e9e9ed; --text-muted: #b2b6ca; --border: #3f424d; --accent: #9184d9; --accent-hover: #b5abfc; --accent-press: #796cbf; --accent-tint: #2b2741; --accent-ink: #796cbf; --neutral-100: #f3f5fe; --neutral-200: #e4e7f5; --neutral-300: #cfd3e5; --neutral-400: #b2b6ca; --neutral-500: #9397ab; --neutral-600: #75798c; --neutral-700: #595d6c; --neutral-800: #3f424d; --neutral-900: #292b31; --accent-100: #f5f4ff; --accent-200: #e7e5fe; --accent-300: #d2cefd; --accent-400: #b5abfc; --accent-500: #968ae0; --accent-600: #796cbf; --accent-700: #5d5294; --accent-800: #423a6a; --accent-900: #2b2741; /* ADDED — interactive boundary colour. --border (#3f424d) measures 1.76:1 against --bg, well below the 3:1 that WCAG 1.4.11 requires of non-text UI boundaries. That is fine for a decorative card edge but not for an input outline or a secondary button, where the border IS the control's only affordance. --neutral-600 is the first step up the brand's own ramp that clears the bar (4.08:1 on --bg, 3.73:1 on --surface). No new hue introduced. Use --border for decoration, --border-strong for anything interactive. */ --border-strong: var(--neutral-600); /* ------------------------------------------------------------------------ 3. Spacing, radii, shadows — unchanged ------------------------------------------------------------------------ */ --space-1: 4px; --space-2: 6px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 24px; --space-7: 32px; --space-8: 48px; --space-9: 64px; --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3); --shadow-md: 0 4px 12px rgb(0 0 0 / 0.35); --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.45); --font: Inter, system-ui, -apple-system, sans-serif; /* ------------------------------------------------------------------------ 4. ADDED — type scale as tokens BRAND.md carried the scale as prose only, which left every size, line height and tracking value to be hard-coded at each use site — exactly what the "never hard-code" rule exists to prevent. Display / H1 / H2 are fluid: they interpolate between the brand's stated size at 375px and a larger ceiling at 1440px. The brand's fixed 40px Display is undersized on a desktop monitor, and since the brand forbids gaining emphasis through weight, size is the only lever left. Weights and tracking are unchanged. Section, Body, Small and Label stay fixed — Body at 15px and Small at 13px are stated minimums, not starting points. ------------------------------------------------------------------------ */ /* Ceilings raised from 64/44 after seeing the page on a 2440px display: the old caps left the hero looking timid against that much canvas, and weight is not available as an emphasis lever (BRAND.md 8). Floors unchanged. */ --text-display: clamp(2.5rem, 1.97rem + 2.25vw, 5rem); /* 40 → 80 */ --text-display-lh: 1.1; --text-display-ls: -0.02em; --text-h1: clamp(2rem, 1.74rem + 1.13vw, 3.5rem); /* 32 → 56 */ --text-h1-lh: 1.15; --text-h1-ls: -0.015em; --text-h2: clamp(1.5rem, 1.37rem + 0.56vw, 1.875rem); /* 24 → 30 */ --text-h2-lh: 1.25; --text-h2-ls: -0.01em; --text-section: 20px; --text-section-lh: 1.3; --text-section-ls: -0.01em; --text-body: 15px; --text-body-lh: 1.6; --text-small: 13px; --text-small-lh: 1.5; --text-label: 11px; --text-label-lh: 1.4; --text-label-ls: 0.18em; --weight-body: 400; --weight-heading: 500; /* never raise this — BRAND.md §8 */ /* ------------------------------------------------------------------------ 5. ADDED — layout measures BRAND.md states a ~68ch measure and a left-aligned, asymmetric page in prose. Tokenised so the block grid and templates share one source. ------------------------------------------------------------------------ */ --measure: 68ch; /* max width of a text column */ --container: 1360px; /* outer page width */ --gutter: var(--space-6); /* ------------------------------------------------------------------------ 6. ADDED — motion Not covered by the brand at all. Defined here so transitions are consistent rather than invented per component. Durations stay short: a quiet interface should not animate conspicuously. ------------------------------------------------------------------------ */ --ease: cubic-bezier(0.2, 0, 0, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; } /* -------------------------------------------------------------------------- 7. Base ADDED: color-scheme. Without it the browser renders native form controls, scrollbars, autofill backgrounds and date pickers in their light-mode styling against the dark ground. -------------------------------------------------------------------------- */ :root { color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--text-body); font-weight: var(--weight-body); line-height: var(--text-body-lh); font-optical-sizing: auto; font-feature-settings: "liga" 1, "calt" 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0; font-weight: var(--weight-heading); letter-spacing: var(--text-h2-ls); } h1 { font-size: var(--text-h1); line-height: var(--text-h1-lh); letter-spacing: var(--text-h1-ls); } h2 { font-size: var(--text-h2); line-height: var(--text-h2-lh); } h3 { font-size: var(--text-section); line-height: var(--text-section-lh); letter-spacing: var(--text-section-ls); } p { margin: 0; max-width: var(--measure); } img, svg, video { max-width: 100%; height: auto; } a { color: var(--accent-300); text-decoration: none; transition: color var(--dur-fast) var(--ease); } a:hover { color: var(--accent-hover); text-decoration: underline; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } ::selection { background: var(--accent-tint); color: var(--text); } /* -------------------------------------------------------------------------- 8. Brand utilities -------------------------------------------------------------------------- */ /* Fading horizontal rule (BRAND.md §4). Short marks under ~48px stay solid — use .rule--mark for those. */ .rule { height: 1px; background: linear-gradient(90deg, var(--accent), transparent); border: 0; } .rule--mark { width: var(--space-7); background: var(--accent); } /* Label style: 11px, +18% tracking, uppercase, muted (BRAND.md §3). */ .label { font-size: var(--text-label); line-height: var(--text-label-lh); letter-spacing: var(--text-label-ls); text-transform: uppercase; color: var(--text-muted); } .display { font-size: var(--text-display); line-height: var(--text-display-lh); letter-spacing: var(--text-display-ls); font-weight: var(--weight-heading); } /* Accent text at paragraph size must use --accent-300, not --accent, for contrast (BRAND.md §3). */ .text-accent { color: var(--accent-300); } .text-muted { color: var(--text-muted); } /* -------------------------------------------------------------------------- 9. Reduced motion — honour the OS setting globally (BRAND readme calls for it on the loader; applying it site-wide is the accessible default). -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }