/* ========================================================================== Bramcott LLC — design tokens "A Longer View" · pastel editorial identity The single source of truth for colour, type, spacing, layout and motion. site.css and admin.css consume these; nothing downstream hardcodes a value. Palette roles, with the contrast pairs the brief specifies: evergreen / paper 10.52:1 headings, navigation, body, primary actions secondary / paper 5.70:1 body and labels secondary / sage 4.95:1 maintenance panel secondary / mist 5.03:1 research panel secondary / blush 4.81:1 GPU feature panel Bronze is decorative only. It is never a body-text colour, never a primary interaction colour, and never a focus ring. Surfaces stay flat and square: 1px rules, no decorative drop shadows, no glass. Buttons may carry a 0–2px radius; this system uses 2px. ========================================================================== */ :root { color-scheme: light; /* --- Colour: paper, ink and the identity green -------------------------- The ground is the warm white of report paper rather than a tinted field, and the text ink is dark enough to read a long schedule without effort. Evergreen is the one identity colour; everything else is functional. */ --paper: #F8F5EE; /* principal page ground — warm report paper */ --surface: #FDFBF7; /* a hair lighter, for raised panels */ --recessed: #F1EEE5; /* wells, table headers, recessed bands */ --evergreen: #233C35; /* headings, primary actions, identity rules */ --ink: #2C3830; /* body and supporting text — ~11:1 on paper */ --ink-muted: #5A665E; /* secondary labels; still >= 4.5:1 on paper */ --sage: #DCE4D9; /* maintenance ground, oak-study inset */ --mist: #DCE5E8; /* research ground */ --blush: #EADCD6; /* GPU feature ground */ --rule: #C4C9BC; /* fine separators and neutral borders */ --rule-soft: #E2DED3; /* the quietest hairline */ --bronze: #8A7457; /* the emblem and small decorative details */ /* --- Colour: links ------------------------------------------------------ Ordinary hyperlinks are ink blue with a persistent underline and a distinct visited state, so a reader can see what is a reference and what they have already opened. Component links (.btn, .textlink, navigation, footer, tabs) opt out explicitly and keep their own treatment. */ --link: #1D3F73; --link-hover: #14305A; --link-visited: #5C4A72; /* --- Colour: annotation ------------------------------------------------- Oxblood has exactly one meaning on this site: a Bramcott note or a document marker. It is never used for status, and status colours are never used for annotation, so the two cannot be confused. */ --oxblood: #7C2F35; --oxblood-wash: #F4EBEA; /* --- Rules: three weights, each with one job ---------------------------- masthead the strong opening rule under the identity fine between document entries and table rows division a major analytical division, or a total */ --rule-w-masthead: 3px; --rule-w-division: 2px; --rule-w-fine: 1px; /* --- Colour: functional status ----------------------------------------- Kept distinct from the brand pastels so a warning never reads as decoration. Harmonised with the evergreen family. Naming follows the component layer: --warn is the danger colour (brick), --care is amber attention, --ok/--grow is healthy. */ --ok: #3E6F4E; --ok-wash: #E4EDE4; --care: #96601C; --care-wash: #F2E7D3; --warn: #A03A2A; --warn-wash: #F3E2DE; --bad: var(--warn); --bad-wash: var(--warn-wash); --grow: var(--ok); --info: var(--evergreen); --info-wash: #E7EBE6; /* --- Grounds and ink, named by role ------------------------------------ */ --ground-0: var(--paper); --ground-1: var(--surface); --ground-2: var(--recessed); --ink-0: var(--evergreen); --ink-1: var(--ink); --ink-2: var(--ink-muted); /* --- Hairlines ("breath") ---------------------------------------------- */ --breath-1: var(--rule-soft); --breath-2: var(--rule); /* --- Signal ------------------------------------------------------------- Evergreen is the interactive and heading colour. It is scarce: links, primary buttons, the active nav marker and the focus ring. Category surfaces use the pastels instead, so the signal keeps its meaning. */ --signal: var(--evergreen); --signal-soft: color-mix(in srgb, var(--evergreen) 8%, var(--surface)); /* --- Elevation: border first ------------------------------------------- No decorative shadows. A shadow appears only for a genuinely floating surface (a dropdown, a dialog), never to ornament a panel. */ --elev-0-shadow: none; --elev-0-border: 1px solid var(--breath-1); --elev-1-shadow: none; --elev-2-shadow: 0 2px 10px color-mix(in srgb, var(--evergreen) 10%, transparent); --elev-3-shadow: 0 6px 24px color-mix(in srgb, var(--evergreen) 14%, transparent); --scrim: color-mix(in srgb, var(--evergreen) 45%, transparent); /* --- Ink surfaces (the evergreen field) --------------------------------- */ --field: var(--evergreen); --field-ink: var(--paper); --field-muted: color-mix(in srgb, var(--paper) 72%, var(--evergreen)); --field-rule: color-mix(in srgb, var(--paper) 26%, var(--evergreen)); /* --- Type: three voices, one job each ----------------------------------- Tinos reads: headings, body prose and document text. Inter is chrome: navigation, controls, table headers and compact technical labels. JetBrains Mono is reserved for document references and machine identifiers, where a monospace face genuinely aids recognition. Tinos is metric-compatible with Times New Roman and has a smaller x-height than the Source Serif 4 it replaced, so the reading sizes sit at 17–18px rather than 16px. */ --font-serif: 'Tinos', 'Times New Roman', Times, 'Liberation Serif', 'Nimbus Roman No9 L', serif; --font-grotesk: 'Inter', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; --font-heading: var(--font-serif); --font-body: var(--font-serif); --font-ui: var(--font-grotesk); --font-brand: var(--font-serif); /* --- Type scale ---------------------------------------------------------- Display is fluid; a 44px floor applies at the narrowest viewports so the final word of the headline keeps room inside 272px of content. */ --type-display: clamp(2.75rem, 5.55vw, 5rem); --type-display-lh: 0.98; --type-h1: clamp(2rem, 3.2vw, 3.25rem); --type-h1-lh: 1.08; --type-h2: clamp(1.75rem, 2.4vw, 2.5rem); --type-h2-lh: 1.15; --type-h3: clamp(1.5rem, 1.9vw, 2rem); --type-h3-lh: 1.2; --type-lede: 1.125rem; --type-lede-lh: 1.65; --type-body-read: 1.125rem; --type-body-read-lh: 1.65; --type-body-ui: 1rem; --type-body-ui-lh: 1.65; --type-small: 0.875rem; --type-small-lh: 1.55; --type-micro: 0.6875rem; --type-micro-lh: 1.45; --type-data: 0.8125rem; --type-data-lh: 1.5; /* --- Spacing: 4px unit --------------------------------------------------- */ --u: 4px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --section: clamp(4rem, 7.8vw, 7rem); /* 64 mobile -> 112 desktop */ /* --- Radii: flat and square --------------------------------------------- */ --r-1: 2px; --r-2: 2px; --r-3: 2px; --r-4: 2px; --r-5: 2px; --r-card: 2px; --r-panel: 2px; --r-sheet: 2px; --r-full: 999px; /* --- Layout -------------------------------------------------------------- */ --canvas: 1280px; --gutter: clamp(24px, 5.56vw, 80px); --measure: 62ch; --text-column: 680px; --nav-h: 104px; --nav-h-mobile: 64px; --side-nav: 264px; --hero-copy: 656px; --hero-media: 528px; --hero-gap: 96px; /* --- Breakpoints (documented; CSS uses the values inline) ---------------- */ --bp-glance: 600px; --bp-tablet: 768px; --bp-converse: 1024px; --bp-reference: 1200px; --bp-wide: 1440px; /* --- Motion: colour, background, border, opacity; never over 150ms ------ */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 120ms; --duration-base: 150ms; /* --- Focus ---------------------------------------------------------------- 2px evergreen ring with 4px offset on light grounds; paper on evergreen. */ --focus-ring: 2px solid var(--evergreen); --focus-offset: 4px; --focus-ring-on-field: 2px solid var(--paper); /* --- Z order ------------------------------------------------------------- */ --z-base: 0; --z-sticky: 100; --z-nav: 200; --z-overlay: 300; --z-sheet: 400; --z-modal: 500; --z-toast: 600; /* ========================================================================= LEGACY ALIASES Templates written against earlier palettes reference these names inline. Mapping them here keeps every existing page working while the visual result is the new identity. Same technique the previous grammar used. ========================================================================= */ --copper: var(--evergreen); --copper-bright: color-mix(in srgb, var(--evergreen) 82%, var(--paper)); --copper-deep: color-mix(in srgb, var(--evergreen) 88%, #000000); --copper-wash: color-mix(in srgb, var(--evergreen) 7%, var(--surface)); --teal: var(--evergreen); --teal-bright: color-mix(in srgb, var(--evergreen) 80%, var(--paper)); --teal-wash: var(--mist); --line: var(--breath-1); --line-2: var(--breath-2); --text: var(--ink-0); --text-soft: var(--ink-1); --text-faint: var(--ink-2); --on-dark: var(--field-ink); --on-dark-soft: var(--field-muted); --on-dark-faint: color-mix(in srgb, var(--paper) 55%, var(--evergreen)); --ink-900: color-mix(in srgb, var(--evergreen) 88%, #000000); --ink-800: var(--evergreen); --ink-700: color-mix(in srgb, var(--evergreen) 88%, var(--paper)); --ink-600: color-mix(in srgb, var(--evergreen) 78%, var(--paper)); --ink-500: color-mix(in srgb, var(--evergreen) 66%, var(--paper)); --paper-2: var(--ground-0); --paper-3: var(--ground-2); --shadow-sm: var(--elev-0-shadow); --shadow: var(--elev-0-shadow); --shadow-lg: var(--elev-2-shadow); --radius: var(--r-3); --radius-sm: var(--r-1); --radius-lg: var(--r-4); --wrap: var(--canvas); --wrap-narrow: var(--text-column); --font: var(--font-grotesk); --step--1: var(--type-small); --step-0: var(--type-body-ui); --step-1: var(--type-lede); --step-2: var(--type-h3); --step-3: var(--type-h2); --step-4: var(--type-h1); /* --- Pastel washes, named as the component layer expects ----------------- */ --pastel-sage: var(--sage); --pastel-mist: var(--mist); --pastel-blush: var(--blush); --pastel-sky: color-mix(in srgb, var(--mist) 55%, var(--paper)); --pastel-cream: color-mix(in srgb, var(--blush) 45%, var(--paper)); /* --- Ink surfaces used by the console and dark panels -------------------- */ --toast-surface: var(--evergreen); --toast-ink: var(--paper); /* --- Data palette: charts and category marks only, never chrome ---------- Drawn from the brand family so a chart never introduces a foreign hue. */ --data-1: var(--evergreen); --data-2: var(--bronze); --data-3: #5B7A6B; --data-4: var(--warn); --data-5: #7A8B94; --data-6: #9A7A8A; --data-focus: var(--evergreen); --data-context: var(--rule); --data-seq-1: var(--evergreen); --data-seq-2: color-mix(in srgb, var(--evergreen) 78%, var(--paper)); --data-seq-3: color-mix(in srgb, var(--evergreen) 58%, var(--paper)); --data-seq-4: color-mix(in srgb, var(--evergreen) 40%, var(--paper)); --data-seq-5: color-mix(in srgb, var(--evergreen) 24%, var(--paper)); } /* --- Narrow-viewport display exception ------------------------------------ At 359px and below the display size drops to 44px so the final word of the headline keeps room inside the 272px content width at a 320px viewport. */ @media (max-width: 359px) { :root { --type-display: 2.75rem; --type-display-lh: 1.02; } } /* --- Reduced motion: remove every transition ------------------------------ */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; } }