/* ========================================================================== Kistal — design tokens Single source of truth. No component should ever hard-code a colour, size, or duration. If a value is needed twice, it belongs here. ========================================================================== */ :root { /* ---------- Brand ------------------------------------------------------ Sampled from the Kistal crown. Blue and red are the logo's own colours; navy is the darkened blue used for large surfaces where full-strength blue would be overwhelming. Nothing here is invented. -------------------------------------------------------------------- */ --c-navy-900: #081633; --c-navy-800: #0B1C42; --c-navy: #0F2557; /* dark surfaces, footer, hero scrims */ --c-navy-600: #163264; --c-blue-800: #1F3D7A; --c-blue-700: #27498B; /* primary hover */ --c-blue: #2E5AAC; /* PRIMARY — from the crown */ --c-blue-400: #5A80C4; --c-blue-200: #A8BEE2; --c-blue-100: #DCE5F5; --c-blue-50: #EEF3FB; --c-red-800: #9E241D; --c-red-700: #B92A22; /* red for SMALL TEXT — 6.1:1 on white */ --c-red: #D8332A; /* CTA fills, logo — 4.6:1 on white */ --c-red-400: #E8695F; --c-red-50: #FDEDEC; /* ---------- Neutrals (steel) ------------------------------------------ */ --c-n-0: #FFFFFF; --c-n-50: #F7F8FA; /* paper — page ground */ --c-n-100: #EEF1F5; --c-n-150: #E7EBF1; /* mist — alternating section ground */ --c-n-200: #DDE3EB; --c-n-300: #C4CDDA; --c-n-400: #9AA7BA; --c-n-500: #7A8798; --c-n-600: #5A6B84; /* steel — secondary text, 5.0:1 on white */ --c-n-700: #414F63; --c-n-800: #2A3444; --c-n-900: #161C26; /* ---------- Semantic --------------------------------------------------- */ --c-success: #1B7F4C; --c-success-bg: #E8F5EE; --c-warning: #9A6510; --c-warning-bg: #FDF3E2; --c-error: #B92A22; --c-error-bg: #FDEDEC; /* ---------- Applied roles --------------------------------------------- Components reference these, not the raw scale above. Retheming the site means editing this block only. -------------------------------------------------------------------- */ --bg-page: var(--c-n-0); --bg-alt: var(--c-n-50); --bg-mist: var(--c-n-150); --bg-dark: var(--c-navy); --bg-dark-deep: var(--c-navy-900); --text-primary: var(--c-n-900); --text-body: var(--c-n-800); --text-secondary: var(--c-n-600); --text-muted: var(--c-n-500); --text-on-dark: var(--c-n-0); --text-on-dark-2: var(--c-blue-200); --link: var(--c-blue-700); --link-hover: var(--c-blue-800); --border: var(--c-n-200); --border-strong: var(--c-n-300); --border-dark: rgba(255, 255, 255, 0.16); --accent: var(--c-red); --accent-hover: var(--c-red-800); --accent-text: var(--c-red-700); --focus-ring: var(--c-blue); --focus-ring-dark: var(--c-n-0); /* ---------- Typography ------------------------------------------------- Barlow Semi Condensed for headings: condensed caps are the strongest available "engineering" signal in type. Inter for everything else. -------------------------------------------------------------------- */ --font-display: 'Barlow Semi Condensed', 'Oswald', 'Arial Narrow', Arial, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --font-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; /* Fluid scale, 320px → 1320px viewport */ --fs-overline: 0.75rem; /* 12px */ --fs-xs: 0.8125rem; /* 13px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-md: clamp(1.0625rem, 0.25vw + 1rem, 1.125rem); /* 17 → 18px */ --fs-lg: clamp(1.125rem, 0.5vw + 1rem, 1.3125rem); /* 18 → 21px */ --fs-xl: clamp(1.375rem, 0.9vw + 1.1rem, 1.75rem); /* 22 → 28px */ --fs-h3: clamp(1.5rem, 1.2vw + 1.15rem, 2rem); /* 24 → 32px */ --fs-h2: clamp(2rem, 2.4vw + 1.35rem, 3rem); /* 32 → 48px */ --fs-h1: clamp(2.5rem, 3.6vw + 1.5rem, 4rem); /* 40 → 64px */ --fs-hero: clamp(2.75rem, 5vw + 1.4rem, 5rem); /* 44 → 80px */ --lh-tight: 1.05; --lh-heading: 1.14; --lh-snug: 1.35; --lh-body: 1.65; --lh-loose: 1.75; --ls-hero: -0.02em; --ls-heading: -0.01em; --ls-normal: 0; --ls-wide: 0.04em; --ls-overline: 0.14em; --measure: 68ch; /* body copy max line length */ --measure-tight: 54ch; /* intros, lead paragraphs */ /* ---------- Spacing (4px base) ----------------------------------------- */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.25rem; /* 20px */ --sp-6: 1.5rem; /* 24px */ --sp-8: 2rem; /* 32px */ --sp-10: 2.5rem; /* 40px */ --sp-12: 3rem; /* 48px */ --sp-16: 4rem; /* 64px */ --sp-20: 5rem; /* 80px */ --sp-24: 6rem; /* 96px */ --sp-32: 8rem; /* 128px */ /* ---------- Layout ------------------------------------------------------ */ --container: 1320px; --container-text: 780px; /* article / prose column */ --gutter: clamp(1.25rem, 4vw, 3rem); --section-y: clamp(3.5rem, 6vw, 7rem); --section-y-lg: clamp(4.5rem, 8vw, 9rem); --header-h: 84px; --header-h-sticky: 66px; --utilitybar-h: 38px; /* ---------- Radii & borders -------------------------------------------- Deliberately small. Industrial equipment is machined, not moulded; large radii read as consumer software. -------------------------------------------------------------------- */ --r-xs: 2px; --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-pill: 999px; --bw: 1px; --bw-thick: 2px; --bw-rule: 3px; /* the accent rule under section overlines */ /* ---------- Elevation (two levels only) --------------------------------- */ --shadow-sm: 0 1px 2px rgba(15, 37, 87, 0.06), 0 2px 8px rgba(15, 37, 87, 0.05); --shadow-md: 0 2px 4px rgba(15, 37, 87, 0.06), 0 12px 28px rgba(15, 37, 87, 0.10); /* ---------- Motion ------------------------------------------------------ */ --dur-fast: 120ms; --dur: 200ms; --dur-slow: 360ms; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ---------- Z-index (named, never magic numbers) ------------------------ */ --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-dropdown: 200; --z-header: 300; --z-overlay: 400; --z-modal: 500; --z-skiplink: 600; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01ms; --dur: 0.01ms; --dur-slow: 0.01ms; } }