/* ============================================================================= Design tokens ----------------------------------------------------------------------------- The single place where colours, widths, spacing and type are defined. Never hard-code a colour or a font size anywhere else - add a token here and reference it with var(--...). ============================================================================= */ :root { /* ========================================================================= 1. COLOUR ------------------------------------------------------------------------- The six global brand colours. Individual template parts may introduce their own local colours, but anything site-wide comes from this block. ====================================================================== */ /* --- Raw brand palette -------------------------------------------------- */ --color-blue: #1f3856; /* primary - dark blue */ --color-black: #000000; --color-grey: #f4f3f3; /* light grey surface */ --color-white: #ffffff; --color-blue-light: #6aa8ff; /* accent - light blue */ /* Same colours as RGB channels, so opacity variants can be built with rgba() without introducing a seventh colour. color-mix() would be nicer but is too recent to rely on here. */ --rgb-blue: 31, 56, 86; --rgb-black: 0, 0, 0; --rgb-white: 255, 255, 255; --rgb-blue-light: 106, 168, 255; /* --- Semantic aliases --------------------------------------------------- Use these in stylesheets, not the raw names above. Re-pointing an alias then restyles the whole site from one line. */ --color-primary: var(--color-blue); --color-accent: var(--color-blue-light); --color-text: var(--color-black); --color-text-muted: rgba(var(--rgb-black), 0.64); --color-text-inverse: var(--color-white); --color-heading: var(--color-blue); --color-background: var(--color-white); --color-surface: var(--color-white); --color-surface-alt: var(--color-grey); --color-surface-invert: var(--color-blue); /* The opening band of a Leistungen page. Too light for white text (2.4:1), so what sits on it is --color-heading (4.9:1) - see modules/hero.css. */ --color-surface-accent: var(--color-accent); --color-line: rgba(var(--rgb-blue), 0.18); --color-line-strong: var(--color-blue); /* Hairline on a blue surface - the footer rule. */ --color-line-invert: rgba(var(--rgb-blue-light), 0.45); --color-link: var(--color-blue); --color-link-hover: var(--color-blue-light); --color-focus: var(--color-blue-light); /* Only used for form and template error states. */ --color-error: #b3261e; /* ========================================================================= 2. CONTENT WIDTH ------------------------------------------------------------------------- Three widths for now; more will follow. They are applied through the .container class and its modifiers - see assets/css/base/layout.css. ====================================================================== */ --width-default: 1300px; /* .container - normal content */ --width-slim: 800px; /* .container--slim - long-form text */ --width-wide: 1530px; /* .container--wide - full-bleed rows */ --container-padding: 1.25rem; /* gutter left and right, mobile */ --container-padding-lg: 2rem; /* gutter from 768px up */ /* ========================================================================= 3. TYPOGRAPHY ------------------------------------------------------------------------- One variable font for everything. Sizes are fluid: each clamp() interpolates between its mobile value and its desktop value, so there are no jumps at breakpoints and no media queries for type. Read a clamp as: clamp(MIN, PREFERRED, MAX). ====================================================================== */ --font-sans: 'Google Sans Flex', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --font-body: var(--font-sans); --font-heading: var(--font-sans); /* --- Heading sizes: 32 -> 56, 26 -> 38, 21 -> 28, 18 -> 22 px ----------- */ --font-size-h1: clamp(2rem, 1.45rem + 2.45vw, 3.5rem); --font-size-h2: clamp(1.625rem, 1.35rem + 1.20vw, 2.375rem); --font-size-h3: clamp(1.3125rem, 1.20rem + 0.50vw, 1.75rem); --font-size-h4: clamp(1.125rem, 1.08rem + 0.20vw, 1.375rem); /* --- Body sizes: 16 -> 18 px base --------------------------------------- */ --font-size-lead: clamp(1.125rem, 1.06rem + 0.30vw, 1.375rem); --font-size-base: clamp(1rem, 0.97rem + 0.15vw, 1.125rem); --font-size-sm: 0.9375rem; /* 15px - meta text, captions */ --font-size-xs: 0.8125rem; /* 13px - legal small print */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.15; /* large headings */ --line-height-heading: 1.25; /* small headings */ --line-height-base: 1.65; /* running text */ --letter-spacing-tight: -0.02em; --letter-spacing-base: 0; --letter-spacing-wide: 0.08em; /* Longest comfortable line for running text, used by .prose. */ --measure: 68ch; /* ========================================================================= 4. SPACING ------------------------------------------------------------------------- A single scale. Section padding is fluid so vertical rhythm grows with the viewport just like the type does. ====================================================================== */ --space-3xs: 0.25rem; /* 4px */ --space-2xs: 0.5rem; /* 8px */ --space-xs: 0.75rem; /* 12px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2rem; /* 32px */ --space-xl: 3rem; /* 48px */ --space-2xl: 4.5rem; /* 72px */ --space-3xl: 6rem; /* 96px */ --space-section: clamp(3rem, 2rem + 4vw, 6rem); --space-section-tight: clamp(2rem, 1.5rem + 2vw, 3.5rem); /* ========================================================================= 5. SURFACE AND MOTION ====================================================================== */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 999px; --border-width: 1px; --shadow-sm: 0 1px 2px rgba(var(--rgb-blue), 0.10); --shadow-md: 0 4px 16px rgba(var(--rgb-blue), 0.14); --shadow-lg: 0 12px 32px rgba(var(--rgb-blue), 0.20); --transition-fast: 120ms ease; --transition-base: 220ms ease; /* hover states, small movements */ --transition-slow: 800ms ease; /* scroll-triggered reveals */ /* --- Layout chrome ------------------------------------------------------ The header is fixed, so base/layout.css reserves --header-height as padding on the body. That reservation always uses the TALL value: --header-height-compact only shortens the bar itself once the page has scrolled (SHRINK in assets/js/modules/header.js), and the page must not move when it does. */ --header-height: 4.5rem; /* 72px - the tall header */ --header-height-compact: 3.75rem; /* 60px - once scrolled */ /* The menu panel and the action bar are children of the header, so their stacking order is local to it - one z-index covers the whole chrome. */ --z-header: 100; --z-overlay: 300; } /* --- Breakpoints ------------------------------------------------------------- Custom properties cannot be used in media queries, so the breakpoints are documented here and written literally in the stylesheets. sm >= 480px md >= 768px lg >= 1024px xl >= 1280px -------------------------------------------------------------------------- */ @media (min-width: 768px) { :root { --container-padding: var(--container-padding-lg); --header-height: 6rem; /* 96px */ --header-height-compact: 4.25rem; /* 68px */ } }