/* ============================================================================ MCT CHEMICALS — WEBSITE 2.0 FILE 1 of N: DESIGN SYSTEM FOUNDATION ---------------------------------------------------------------------------- The complete token layer. Every colour, type step, space, radius, shadow and motion value the site uses is defined here ONCE and referenced everywhere. No component hardcodes a value that belongs in this file. Inheritance from the Phase 2 Design Bible: - One accent (warm engineering orange). It appears ONLY on primary CTAs, interactive hotspots, and active/selected states. Nothing else earns it. - Desaturated blue-grey engineering neutrals. - Dark cinematic hero, light editorial body, full dark-mode token set. - Motion animates transform/opacity only. Everything respects reduced-motion. ========================================================================== */ /* ---------------------------------------------------------------------------- 1. FONT FACES Prototype uses system-adjacent stacks that mirror the intended families (a wide technical grotesque for display; a neutral screen sans for body). Swap the stacks for the licensed webfonts (e.g. Neue Haas Grotesk Display + Inter) in production — every component reads --font-display / --font-body, so nothing else changes. ---------------------------------------------------------------------------- */ :root { --font-display: "Neue Haas Grotesk Display Pro", "Helvetica Neue", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", "SF Mono", "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, monospace; } /* ---------------------------------------------------------------------------- 2. COLOUR TOKENS — LIGHT MODE (default) Raw palette -> semantic roles. Components use the semantic roles only. ---------------------------------------------------------------------------- */ :root { /* raw palette */ --c-ink-900: #0B1420; /* deepest cinematic base */ --c-ink-800: #0F2A47; /* hero navy */ --c-ink-700: #1A2430; --c-ink-600: #2A3948; --c-slate-500: #4A5766; --c-slate-400: #7A8794; --c-slate-300: #9FB2C4; --c-slate-200: #E2E8EE; --c-slate-100: #EEF2F6; --c-slate-50: #F7F9FB; --c-white: #FFFFFF; --c-accent: #C55A11; /* the one warm accent */ --c-accent-hover: #A8480C; --c-accent-weak: #FBEDE2; --c-verified: #2E7D5B; --c-warning: #B4791A; --c-danger: #B23B3B; /* semantic roles (light) */ --bg-base: var(--c-white); --bg-elevated: var(--c-slate-50); --bg-sunken: var(--c-slate-100); --bg-inverse: var(--c-ink-900); --text-primary: var(--c-ink-700); --text-secondary: var(--c-slate-500); --text-muted: var(--c-slate-400); --text-on-dark: #EAF1F8; --text-on-accent: var(--c-white); --border-hairline: var(--c-slate-200); --border-strong: var(--c-slate-300); --accent: var(--c-accent); --accent-hover: var(--c-accent-hover); --accent-weak: var(--c-accent-weak); --signal-verified: var(--c-verified); --signal-warning: var(--c-warning); --signal-danger: var(--c-danger); /* hero gradient (always dark, both modes) */ --hero-grad: radial-gradient(120% 120% at 70% 20%, #163A5E 0%, #0F2A47 42%, #0B1420 100%); /* glass (overlays only) */ --glass-fill: rgba(255, 255, 255, 0.10); --glass-border: rgba(255, 255, 255, 0.20); --glass-blur: 18px; /* shadows */ --shadow-sm: 0 1px 2px rgba(10, 20, 32, 0.06); --shadow-md: 0 4px 16px rgba(10, 20, 32, 0.08); --shadow-lg: 0 12px 32px rgba(10, 20, 32, 0.12); --shadow-panel: 0 24px 64px rgba(6, 12, 20, 0.28); } /* ---------------------------------------------------------------------------- 2b. COLOUR TOKENS — DARK MODE Applies via system preference OR an explicit [data-theme="dark"] on . The hero is dark in both modes, so hero tokens are unchanged. ---------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-base: #0B1420; --bg-elevated: #111E2E; --bg-sunken: #0A1019; --bg-inverse: #EAF1F8; --text-primary: #EAF1F8; --text-secondary: #9FB2C4; --text-muted: #6E8093; --text-on-dark: #EAF1F8; --border-hairline: #1E2E40; --border-strong: #2A3E56; --accent: #E9721C; --accent-hover: #F5852E; --accent-weak: #2A1B10; --signal-verified: #4FB488; --signal-warning: #E0A63A; --signal-danger: #E06A6A; --glass-fill: rgba(18, 30, 46, 0.55); --glass-border: rgba(255, 255, 255, 0.10); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5); --shadow-panel: 0 24px 64px rgba(0, 0, 0, 0.6); } } /* explicit manual dark toggle */ :root[data-theme="dark"] { --bg-base: #0B1420; --bg-elevated: #111E2E; --bg-sunken: #0A1019; --bg-inverse: #EAF1F8; --text-primary: #EAF1F8; --text-secondary: #9FB2C4; --text-muted: #6E8093; --border-hairline: #1E2E40; --border-strong: #2A3E56; --accent: #E9721C; --accent-hover: #F5852E; --accent-weak: #2A1B10; --signal-verified: #4FB488; --signal-warning: #E0A63A; --signal-danger: #E06A6A; --glass-fill: rgba(18,30,46,0.55); --glass-border: rgba(255,255,255,0.10); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 16px rgba(0,0,0,0.45); --shadow-lg: 0 12px 32px rgba(0,0,0,0.5); --shadow-panel: 0 24px 64px rgba(0,0,0,0.6); } /* ---------------------------------------------------------------------------- 3. TYPOGRAPHY SCALE Fluid where it earns it (display), fixed elsewhere. Tabular figures for data. ---------------------------------------------------------------------------- */ :root { --type-display-xl: clamp(2.5rem, 1.6rem + 3.8vw, 4.5rem); /* 40 -> 72 */ --type-display-l: clamp(2rem, 1.4rem + 2.6vw, 3rem); /* 32 -> 48 */ --type-h2: 1.75rem; /* 28 */ --type-h3: 1.3125rem; /* 21 */ --type-body-l: 1.125rem;/* 18 */ --type-body: 1rem; /* 16 */ --type-small: 0.875rem; /* 14 */ --type-overline: 0.75rem; /* 12 */ --lh-tight: 1.06; --lh-snug: 1.18; --lh-normal: 1.6; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-display: 650; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-overline: 0.12em; } /* ---------------------------------------------------------------------------- 4. SPACING / GRID / RADIUS / LAYOUT ---------------------------------------------------------------------------- */ :root { --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; --content-max: 1440px; --bleed-max: 1920px; --gutter: 24px; --z-base: 1; --z-nav: 100; --z-panel: 200; --z-modal: 300; --z-toast: 400; } @media (max-width: 900px) { :root { --gutter: 20px; } } @media (max-width: 560px) { :root { --gutter: 16px; } } /* ---------------------------------------------------------------------------- 5. MOTION TOKENS ---------------------------------------------------------------------------- */ :root { --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emphasis: cubic-bezier(0.2, 0, 0, 1.08); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --dur-instant: 120ms; --dur-fast: 250ms; --dur-base: 400ms; --dur-slow: 700ms; --dur-ambient: 20000ms; --stagger: 120ms; } /* ============================================================================ 6. RESET + BASE ELEMENTS ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-body); font-size: var(--type-body); line-height: var(--lh-normal); color: var(--text-primary); background: var(--bg-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, picture, svg, video, canvas { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--fw-display); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--text-primary); } /* ---------------------------------------------------------------------------- 7. TYPOGRAPHY UTILITY CLASSES ---------------------------------------------------------------------------- */ .t-display-xl { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--type-display-xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); } .t-display-l { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--type-display-l); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); } .t-h2 { font-size: var(--type-h2); font-weight: var(--fw-semibold); line-height: var(--lh-snug); } .t-h3 { font-size: var(--type-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); } .t-body-l { font-size: var(--type-body-l); line-height: var(--lh-normal); } .t-body { font-size: var(--type-body); line-height: var(--lh-normal); } .t-small { font-size: var(--type-small); line-height: 1.5; } .t-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); } .t-overline { font-size: var(--type-overline); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--accent); } .t-secondary { color: var(--text-secondary); } .t-muted { color: var(--text-muted); } /* ---------------------------------------------------------------------------- 8. LAYOUT PRIMITIVES ---------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); } .container--bleed { max-width: var(--bleed-max); } .section { padding-block: var(--space-9); } @media (max-width: 700px) { .section { padding-block: var(--space-8); } } .grid { display: grid; gap: var(--gutter); } .grid-12 { grid-template-columns: repeat(12, 1fr); } @media (max-width: 900px) { .grid-12 { grid-template-columns: repeat(8, 1fr); } } @media (max-width: 560px) { .grid-12 { grid-template-columns: repeat(4, 1fr); } } .stack > * + * { margin-top: var(--space-4); } .cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } /* ---------------------------------------------------------------------------- 9. BUTTONS (three tiers, all states) ---------------------------------------------------------------------------- */ .btn { --_h: 48px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--_h); padding-inline: var(--space-5); font-family: var(--font-body); font-size: var(--type-body); font-weight: var(--fw-semibold); border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; white-space: nowrap; transition: background var(--dur-instant) var(--ease-standard), border-color var(--dur-instant) var(--ease-standard), transform var(--dur-instant) var(--ease-standard), color var(--dur-instant) var(--ease-standard); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn[disabled] { opacity: 0.4; pointer-events: none; } .btn--primary { background: var(--accent); color: var(--text-on-accent); } .btn--primary:hover { background: var(--accent-hover); transform: translateY(-1px); } .btn--secondary { background: transparent; border-color: var(--border-strong); color: var(--text-primary); } .btn--secondary:hover { background: var(--bg-elevated); border-color: var(--text-primary); } /* on dark hero, secondary needs light borders */ .on-dark .btn--secondary { border-color: rgba(255,255,255,0.35); color: var(--text-on-dark); } .on-dark .btn--secondary:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.6); } .btn--tertiary { background: transparent; padding-inline: var(--space-2); color: inherit; } .btn--tertiary .btn__arrow { transition: transform var(--dur-fast) var(--ease-standard); } .btn--tertiary:hover .btn__arrow { transform: translateX(4px); } /* ---------------------------------------------------------------------------- 10. CARD, BADGE, ALERT ---------------------------------------------------------------------------- */ .card { background: var(--bg-elevated); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); } .card--interactive { cursor: pointer; } .card--interactive:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-2px); } .card--interactive:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-3); font-size: var(--type-small); font-weight: var(--fw-semibold); border-radius: var(--radius-pill); background: var(--bg-sunken); color: var(--text-secondary); } .badge--verified { background: color-mix(in srgb, var(--signal-verified) 14%, transparent); color: var(--signal-verified); } .badge--accent { background: var(--accent-weak); color: var(--accent); } .alert { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--bg-elevated); border-left: 3px solid var(--accent); } .alert--verified { border-left-color: var(--signal-verified); } .alert--warning { border-left-color: var(--signal-warning); } .alert--danger { border-left-color: var(--signal-danger); } /* ---------------------------------------------------------------------------- 11. GLASS SURFACE (overlays only) ---------------------------------------------------------------------------- */ .glass { background: var(--glass-fill); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); } /* ---------------------------------------------------------------------------- 12. ACCESSIBILITY HELPERS ---------------------------------------------------------------------------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: var(--z-toast); background: var(--accent); color: var(--text-on-accent); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); transition: top var(--dur-fast) var(--ease-standard); } .skip-link:focus { top: var(--space-4); } :where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------------------------------------------------------------------------- 13. GLOBAL REDUCED-MOTION GUARD Individual components also guard, but this is the safety net. ---------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---------------------------------------------------------------------------- 14. SCROLL-REVEAL BASE (driven by js/animation observer, file to follow) Elements tagged [data-reveal] start hidden and are revealed when in view. If JS never runs, this rule makes them visible anyway (progressive). ---------------------------------------------------------------------------- */ [data-reveal] { opacity: 1; } /* visible by default (no-JS safe) */ .js [data-reveal] { /* only hide once JS confirms it can reveal */ opacity: 0; transform: translateY(8px); transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); } .js [data-reveal].is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1 !important; transform: none !important; } }