/* ===================================================================== Courtsdesk — Unified Design Tokens (single source of truth) --------------------------------------------------------------------- Every demo module (Crown, Magistrates/news, County, High Court, Xhibit, Reporter) imports THIS file so they read as one product. How the criminal / civil differentiator works ---------------------------------------------- The CHROME is identical everywhere (slate header, neutrals, fonts). Only the ACCENT changes, driven by one attribute on the tag: -> coral accent (Crown, Magistrates, news) -> blue accent (County, High Court) Think of it like a single Excel template where one cell (the accent) is swapped — the layout, header and fonts never move. Derived verbatim from: - news.courtsdesk.co.uk brand (reporter-demo/src/tokens.css) - crown courtsdesk_style_tokens.css - the County Court UI templates (blue + teal civil accents) ===================================================================== */ :root { /* ---- CDS parent brand ------------------------------------------- */ --cds-navy: #1A1A8C; --cds-navy-deep: #15156E; --cds-mint: #2EE39E; --cds-mint-deep: #1FB97D; /* ---- Shared chrome (NEVER changes between modules) -------------- */ --courtsdesk-slate: #1A1F2E; /* dark header / navbar background */ --courtsdesk-slate-soft: #2A3142; /* hover on dark surfaces */ --courtsdesk-cloud: #9FCBE0; /* pale-blue logo cloud */ /* ---- Surfaces & text (shared) ---------------------------------- */ --surface-page: #F3F4F6; --surface-card: #FFFFFF; --surface-card-hover: #F9FAFB; --surface-divider: #E5E7EB; --surface-muted: #E5E7EB; --text-primary: #111827; --text-body: #1F2937; --text-muted: #6B7280; --text-tertiary: #9CA3AF; --text-inverse: #FFFFFF; /* ---- Domain accents (the differentiator) ----------------------- */ /* Criminal — coral, the news.courtsdesk "NEWS" wordmark colour */ --accent-criminal: #E04C5F; --accent-criminal-deep: #B83648; --accent-criminal-tint: #FFE4E6; /* Civil — blue, lifted from the County Court UI */ --accent-civil: #2563EB; --accent-civil-light: #60A5FA; --accent-civil-deep: #1E40AF; --accent-civil-tint: #DBEAFE; /* Active accent — defaults to criminal; overridden by data-domain */ --accent: var(--accent-criminal); --accent-deep: var(--accent-criminal-deep); --accent-tint: var(--accent-criminal-tint); --domain-label: "Criminal"; /* ---- Links (shared neutral blue, independent of accent) -------- */ --link: #2563EB; --link-hover: #1D4ED8; /* ---- Unified header tokens (same on every module) -------------- */ --header-bg: var(--courtsdesk-slate); --header-bg-soft: var(--courtsdesk-slate-soft); --header-text: #FFFFFF; --header-muted: #B7C0D0; --header-accent: var(--accent); /* active-module indicator only */ --header-height: 56px; /* ---- Tag taxonomy (shared across the data platform) ------------ */ --tag-press-bg: #FEE2E2; --tag-press-text: #991B1B; --tag-youth-bg: #FFEDD5; --tag-youth-text: #9A3412; --tag-crowncourt-bg: #EDE9FE; --tag-crowncourt-text: #5B21B6; --tag-caution-bg: #FEF3C7; --tag-caution-text: #92400E; --tag-fraud-bg: #FEE2E2; --tag-fraud-text: #991B1B; --tag-fincrime-bg: #CCFBF1; --tag-fincrime-text: #115E59; --tag-sentencing-bg: #DBEAFE; --tag-sentencing-text: #1E40AF; --tag-restriction-bg: #FFE4E6; --tag-restriction-text: #9F1239; --tag-judgment-bg: #E0E7FF; --tag-judgment-text: #3730A3; /* ---- Typography (shared) --------------------------------------- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; --font-serif: 'Source Serif Pro', 'Tiempos Headline', Charter, Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', Menlo, Monaco, Consolas, 'Courier New', monospace; --type-display: 2.5rem; --type-h1: 1.5rem; --type-h2: 1.25rem; --type-h3: 1.0625rem; --type-body: 0.9375rem; --type-meta: 0.8125rem; --type-eyebrow: 0.6875rem; --type-mono: 0.75rem; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65; --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; /* ---- Spacing & radius (shared) --------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; } /* ---- The one switch: civil flips the accent, nothing else -------- */ [data-domain="civil"] { --accent: var(--accent-civil); --accent-deep: var(--accent-civil-deep); --accent-tint: var(--accent-civil-tint); --domain-label: "Civil"; } [data-domain="criminal"] { --accent: var(--accent-criminal); --accent-deep: var(--accent-criminal-deep); --accent-tint: var(--accent-criminal-tint); --domain-label: "Criminal"; } /* ===================================================================== Shared header — drop this markup in every module so all five tabs share an identical bar; only the accent stripe + domain badge change.
Criminal|Civil
===================================================================== */ .cds-header{ height: var(--header-height); display:flex; align-items:center; gap:1rem; padding:0 1.25rem; background:var(--header-bg); color:var(--header-text); border-bottom:3px solid var(--accent); /* the accent stripe = the differentiator */ font-family:var(--font-sans); } .cds-logo{ font-weight:700; letter-spacing:-.01em; } .cds-logo::after{ content:" NEWS"; color:var(--accent); font-weight:700; } .cds-modnav{ display:flex; gap:.25rem; margin-left:.5rem; } .cds-modnav a{ color:var(--header-muted); text-decoration:none; font-size:var(--type-meta); padding:.35rem .6rem; border-radius:var(--radius-sm); } .cds-modnav a:hover{ background:var(--header-bg-soft); color:var(--header-text); } .cds-modnav a[aria-current="page"]{ color:var(--header-text); box-shadow:inset 0 -2px 0 var(--accent); } .cds-domain-badge{ margin-left:auto; font-size:var(--type-eyebrow); text-transform:uppercase; letter-spacing:.06em; font-weight:700; padding:.2rem .55rem; border-radius:999px; color:var(--accent); background:var(--accent-tint); } .cds-domain-badge::before{ content:var(--domain-label); }