/* =========================================================================== CLARA MARITIME — TOKEN LAYER --------------------------------------------------------------------------- Single source of truth for the design system, extracted verbatim from the approved prototypes in /var/www/clara-design/ (the "DESIGN TOKENS — developer handoff" comment block at the head of home.dc.html, cross-checked against why-licensing / how-clara-works / legal-basis). Nothing in this file paints anything. It only declares values. Component CSS (clara.css, pages.css) and the templates consume these and never hard-code a hex, a font stack, or a section rhythm. Load order: tokens.css -> clara.css -> pages.css =========================================================================== */ :root { /* --------------------------------------------------------------------- 1. BRAND COLOUR Unchanged from the previous design system — the prototypes kept the palette exactly. Only --blue-hover and --on-navy are new. --------------------------------------------------------------------- */ --offwhite: #f5f4f0; /* page background */ --white: #ffffff; /* cards, panels, scene panels */ --navy: #0f1923; /* dark bands, footer, body on light */ --navy-soft: #182332; /* secondary dark surface */ --blue: #1b5a96; /* primary CTA, links, key accents */ --blue-hover: #154a7d; /* CTA hover / pressed */ --blue-mid: #8aaec8; /* technical + territorial layer */ --blue-pale: #dde6f0; /* alternating bands, fills */ --accent: #5aaae0; /* link hover + focus ring ONLY, never used as a fill */ /* --------------------------------------------------------------------- 2. SUPPORT INK + RULES --------------------------------------------------------------------- */ --ink: #0f1923; --ink-muted: #4a5563; /* standard body copy on light */ --ink-soft: #6c7684; /* captions, meta, optional markers */ --on-navy: #e8edf3; /* body text inside navy bands */ --rule: rgba(15, 25, 35, 0.12); --rule-strong: rgba(15, 25, 35, 0.22); --rule-light: rgba(255, 255, 255, 0.14); /* Header glass (sticky bar over the offwhite page). */ --header-bg: rgba(246, 244, 238, 0.94); /* --------------------------------------------------------------------- 3. SPECTRUM MARK The seven-bar CLARA icon. Declared as tokens so the SVG helper and any future chart element stay in step. --------------------------------------------------------------------- */ --spectrum-1: #cdd8e8; --spectrum-2: #8aaec8; --spectrum-3: #1b5a96; --spectrum-4: #dde6f0; --spectrum-hi: #5aaae0; /* --------------------------------------------------------------------- 4. TYPEFACES display = Lora 400/500/600 (headings, pull quotes, wordmark-adj) text/UI = Public Sans 400/500/600 (body, nav, forms, labels) --------------------------------------------------------------------- */ --font-display: Lora, Georgia, 'Times New Roman', serif; --font-text: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* real weight, not synthesised - see fonts.css */ /* --------------------------------------------------------------------- 5. TYPE SCALE (fluid) Each size ships with its own line-height and tracking token so a heading can never be half-applied. --------------------------------------------------------------------- */ /* Home hero */ --fs-h1: clamp(2.3rem, 4.4vw, 3.5rem); --lh-h1: 1.08; --ls-h1: -0.015em; /* Interior page title (why-licensing, how-clara-works, legal-basis) */ --fs-h1-page: clamp(2.2rem, 4vw, 3.3rem); --lh-h1-page: 1.1; /* Section heading — the workhorse h2 */ --fs-h2: clamp(1.7rem, 2.5vw, 2.35rem); --lh-h2: 1.18; --ls-h2: -0.01em; /* Scene heading (why-licensing narrative scenes) */ --fs-h2-scene: clamp(1.5rem, 2.1vw, 1.95rem); --lh-h2-scene: 1.2; /* Stage heading (how-clara-works stages) */ --fs-h2-stage: clamp(1.6rem, 2.3vw, 2.1rem); /* Group heading (legal-basis reference groups) */ --fs-h2-group: clamp(1.3rem, 1.9vw, 1.6rem); /* Closing CTA heading — the largest h2 on any page */ --fs-h2-cta: clamp(1.9rem, 3vw, 2.7rem); --lh-h2-cta: 1.14; /* Sub-heads */ --fs-h3: 1.22rem; --fs-h3-sm: 1.05rem; /* storyline strip card */ --fs-h3-card: 1.18rem; /* sector card, legal sub-section */ --fs-h3-lg: 1.32rem; /* navy pillar, report sub-head */ --fs-h3-form: 1.45rem; /* intake form heading */ --lh-h3: 1.3; /* Body */ --fs-body: 1.0625rem; --lh-body: 1.72; --fs-body-lg: 1.125rem; /* page intro, emphasis paragraph */ --lh-body-lg: 1.78; --fs-body-sm: 1rem; --fs-small: 0.875rem; --lh-small: 1.62; --fs-card: 0.94rem; /* sector + strip card copy */ --fs-ui: 0.95rem; /* buttons, inline links, controls */ --fs-nav: 0.875rem; /* Eyebrow / section index — caps, tracked, brand blue */ --fs-eyebrow: 0.72rem; --ls-eyebrow: 0.16em; --ls-eyebrow-tight: 0.14em; /* strip card index */ /* Wordmark */ --ls-wordmark: 0.28em; /* Measure — prose never runs wider than this */ --measure: 62ch; --measure-tight: 54ch; --measure-wide: 70ch; /* --------------------------------------------------------------------- 6. SPACING — 4px base --------------------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-11: 44px; --sp-12: 48px; --sp-13: 52px; --sp-16: 64px; --sp-18: 72px; /* --------------------------------------------------------------------- 7. LAYOUT --------------------------------------------------------------------- */ --container: 1160px; /* standard page container */ --container-narrow: 1000px; /* legal-basis reference document */ --gutter: 24px; /* Vertical rhythm — one token per band type, as the prototypes specify. */ --section-y: clamp(72px, 9vw, 132px); /* full section (spec) */ --band-y: clamp(64px, 8vw, 116px); /* alternating content band */ --scene-y: clamp(56px, 7vw, 104px); /* narrative scene */ --stage-y: clamp(56px, 7vw, 100px); /* how-clara-works stage */ --group-y: clamp(48px, 6vw, 88px); /* legal-basis group */ --cta-y: clamp(72px, 9vw, 124px); /* closing CTA band */ --hero-y-top: clamp(56px, 7vw, 104px); --hero-y-bottom: clamp(48px, 6vw, 88px); /* Vertical gap when a figure stacks between a heading and its copy on a narrow screen. Deliberately larger than the desktop row gap: a full-width illustration needs air above and below it to read as its own element rather than as part of the text block. */ --gap-stack-figure: clamp(40px, 9vw, 56px); /* Horizontal gaps between the two columns of a split section. */ --gap-split: clamp(32px, 5vw, 72px); --gap-split-wide: clamp(32px, 6vw, 88px); --gap-stack: clamp(28px, 4vw, 56px); /* --------------------------------------------------------------------- 8. COMPONENT METRICS --------------------------------------------------------------------- */ --btn-pad: 15px 24px; /* primary CTA */ --btn-pad-sm: 11px 18px; /* header CTA */ --btn-pad-lg: 16px 26px; /* form submit */ --field-h: 48px; --sticky-offset: 96px; /* sticky column top offset */ --panel-pad: clamp(28px, 4vw, 44px); /* --------------------------------------------------------------------- 9. DIAGRAM CONVENTIONS Applied to inline SVG. Rights layer = --blue, technical/territorial layer = --blue-mid, dash 5 4 = signal / not-yet-cleared. --------------------------------------------------------------------- */ --dia-stroke: 1.5; --dia-rights: var(--blue); --dia-technical: var(--blue-mid); --dia-dash: 5 4; --dia-label: 10.5px; /* --------------------------------------------------------------------- 10. MOTION Restrained by brand rule: state changes only, never decoration. --------------------------------------------------------------------- */ --t-fast: 160ms; --t-base: 240ms; --t-slow: 500ms; /* storyline strip tint crossfade */ --ease: cubic-bezier(0.4, 0, 0.2, 1); /* --------------------------------------------------------------------- 11. STATE Not brand colours -- the one place the palette needs a warning register. --------------------------------------------------------------------- */ --error-bg: #fdecea; --error-rule: #b3261e; --error-ink: #5f1a15; /* Tabular figures for the report/reference tables. */ --tab: tabular-nums; } /* Narrow screens get a wider gutter. This is the shared --gutter, so the header lockup and every band below it move together - padding the header alone would leave the logo out of line with the copy beneath it. */ @media (max-width: 600px) { :root { --gutter: 28px; } } /* Motion is opt-out for anyone who asks the OS to reduce it. */ @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; } }