/* ===================================================================== TOGETHER TRACKING — design system tokens --------------------------------------------------------------------- Executive Command: warm-paper canvas, one strong blue, gold accent, restrained dark navy for gravity. Unified with catalyst-together.com. DIN Pro, one family; hierarchy from weight. All color OKLCH. Architecture (what the product app inherits): - Parent tokens live in :root (lifted verbatim from the Catalyst Executive Command palette so the two surfaces are one family). - Components consume CONTEXTUAL tokens (--c-*), remapped by .ctx-paper (the light exec ground, tracker default) and .ctx-sky (the dark navy gravity band). Same widget markup, both worlds. - White-label: a tenant overrides ONLY the small brand set (--brand, --brand-ink, --brand-deep, --brand-tint, --signal, --signal-text, --font-display, --font-body). Structure is inherited. ===================================================================== */ /* ---- DIN Pro (client brand typeface, self-hosted, latin subset woff2). Weight RANGES map every CSS weight to a real cut (no faux bold): 400 Regular · 500/600 Medium · 700/800 Bold · 900 Black. ---- */ @font-face{font-family:"DIN Pro";src:url("../fonts/DINPro-Regular.woff2") format("woff2");font-weight:100 450;font-style:normal;font-display:swap} @font-face{font-family:"DIN Pro";src:url("../fonts/DINPro-Medium.woff2") format("woff2");font-weight:451 650;font-style:normal;font-display:swap} @font-face{font-family:"DIN Pro";src:url("../fonts/DINPro-Bold.woff2") format("woff2");font-weight:651 849;font-style:normal;font-display:swap} @font-face{font-family:"DIN Pro";src:url("../fonts/DINPro-Black.woff2") format("woff2");font-weight:850 1000;font-style:normal;font-display:swap} :root { /* ================= Executive Command palette (parent) ================= */ --ink: oklch(17% 0.015 255); /* near-black text */ --ink-soft: oklch(32% 0.022 250); /* body / secondary */ --paper: oklch(96% 0.013 92); /* warm paper canvas */ --paper-2: oklch(92.5% 0.018 88); /* tinted band */ --card: oklch(98% 0.007 88); /* card / input surface */ --quiet: oklch(51% 0.02 250); /* meta / captions (AA on paper) */ --line: oklch(80% 0.02 86 / 0.6); --line-2: oklch(74% 0.022 86 / 0.7); --blue: oklch(52% 0.21 257); /* fills/buttons: white text clears AA */ --blue-ink: oklch(47% 0.20 257); /* blue TEXT on paper: clears AA 4.5:1 */ --blue-bright:oklch(64% 0.21 256); /* blue text/hover ON dark, or button hover */ --blue-dark: oklch(27% 0.09 258); --gold: oklch(79% 0.17 83); /* accent ticks, timeline years, live-on-dark */ --gold-deep: oklch(70% 0.16 70); /* gold text on paper */ --night: oklch(17% 0.028 255); /* dark navy gravity band */ --night-2: oklch(22% 0.04 256); --night-line: oklch(96% 0.009 88 / 0.18); --whiteish: oklch(96% 0.008 88); /* text on blue / on night */ /* semantic */ --ok: oklch(72% 0.12 150); /* on night */ --ok-deep: oklch(52% 0.11 150); /* on paper */ --warn: oklch(80% 0.14 78); --warn-deep: oklch(60% 0.13 62); --alert: oklch(66% 0.15 25); --alert-deep: oklch(52% 0.16 27); --shadow-soft: 0 24px 70px oklch(14% 0.03 260 / 0.30); --shadow-tight: 0 12px 34px oklch(18% 0.04 260 / 0.20); --shadow-blue: 0 16px 40px oklch(48% 0.2 257 / 0.30); --shadow-1: 0 1px 2px oklch(18% 0.04 260 / 0.10), 0 1px 1px oklch(18% 0.04 260 / 0.06); --shadow-2: var(--shadow-tight); --shadow-3: var(--shadow-soft); --panel-glow: 0 30px 90px oklch(10% 0.02 262 / 0.55); --panel-edge: inset 0 1px 0 oklch(100% 0 0 / 0.06), inset 0 0 0 1px oklch(96% 0.009 88 / 0.10); /* ================= brand set (tenant-overridable) ================= */ --brand: var(--blue); /* primary action surface */ --brand-ink: var(--whiteish); /* text on --brand */ --brand-deep: var(--blue-bright); /* hover / pressed */ --brand-tint: oklch(93% 0.03 255); /* soft brand wash */ --signal: var(--gold); /* accent: ticks, years, live-on-dark */ --signal-text: var(--blue-ink); /* accent as small text on paper */ --font-display: "DIN Pro", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "DIN Pro", system-ui, -apple-system, "Segoe UI", sans-serif; --font-readout: "DIN Pro", system-ui, -apple-system, "Segoe UI", sans-serif; /* ================= data-viz series ================= */ /* restrained: blue + gold lead; supporting hues desaturated so they never out-shout the brand. Deep values for paper; .ctx-sky brightens. */ --series-1: var(--blue); /* primary */ --series-2: var(--gold-deep); /* accent */ --series-3: oklch(55% 0.09 232); /* steel */ --series-4: oklch(56% 0.085 168); /* muted teal */ --series-5: oklch(56% 0.12 34); /* clay */ --series-6: oklch(52% 0.10 300); /* muted iris */ /* ================= type scale ================= */ --text-2xs: 0.72rem; --text-xs: 0.82rem; --text-sm: 0.9rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.55rem); --text-xl: clamp(1.6rem, 1.35rem + 1.1vw, 2.4rem); --text-2xl: clamp(2.2rem, 1.7rem + 2.4vw, 4.2rem); --text-3xl: clamp(2.9rem, 2rem + 4vw, 6.4rem); --text-display: clamp(3.4rem, 2.2rem + 5.6vw, 9.4rem); --leading-tight: 0.9; --leading-snug: 1.02; --leading-body: 1.6; --measure: 62ch; /* ================= spacing ================= */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --w-page: 1220px; --w-hero: 1440px; --gutter: clamp(18px, 5vw, 76px); /* ================= radii ================= */ --r-1: 6px; --r-2: 10px; --r-3: 12px; --r-4: 16px; --r-round: 999px; /* ================= motion (Catalyst easings + durations) ================= */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease2: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: var(--ease); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --d-fast: 220ms; --d-med: 520ms; --d-slow: 900ms; --dur-1: 160ms; --dur-2: var(--d-fast); --dur-3: var(--d-med); --dur-4: var(--d-slow); --dur-draw: 1100ms; /* ================= section flow ================= */ --slant: clamp(24px, 4.2vw, 72px); --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.8' intercept='-0.4'/%3E%3CfeFuncG type='linear' slope='1.8' intercept='-0.4'/%3E%3CfeFuncB type='linear' slope='1.8' intercept='-0.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); } /* ===================================================================== Contexts — components consume ONLY --c-* tokens. .ctx-paper = the light exec ground (tracker default). .ctx-sky = the dark navy gravity band (showcase, footer). Token maps re-apply on themed subtrees so brand-derived --c-* resolve against the TENANT's values; paint stays on the bare context class. ===================================================================== */ .ctx-paper, .ctx-paper [data-theme], .ctx-paper [class*="theme-"] { --c-bg: var(--paper); --c-surface: var(--card); --c-surface-2: oklch(94.5% 0.012 90); --c-surface-3: var(--paper-2); --c-text: var(--ink); --c-text-2: var(--ink-soft); --c-text-3: var(--quiet); --c-line: var(--line); --c-line-strong: var(--line-2); --c-signal-text: var(--signal-text); --c-signal-chart: var(--blue); --c-ok: var(--ok-deep); --c-warn: var(--warn-deep); --c-alert: var(--alert-deep); --c-shadow: var(--shadow-tight); --c-wash: var(--brand-tint); } .ctx-paper { color: var(--c-text); background-color: var(--c-bg); } .ctx-sky, .ctx-sky [data-theme], .ctx-sky [class*="theme-"] { --c-bg: var(--night); --c-surface: var(--night-2); --c-surface-2: oklch(25% 0.035 257); --c-surface-3: oklch(29% 0.038 257); --c-text: var(--whiteish); --c-text-2: oklch(82% 0.016 86); --c-text-3: oklch(70% 0.02 240); --c-line: var(--night-line); --c-line-strong: oklch(96% 0.009 88 / 0.28); --c-signal-text: var(--gold); --c-signal-chart: var(--gold); --c-ok: var(--ok); --c-warn: var(--warn); --c-alert: var(--alert); --c-shadow: var(--panel-glow); --c-wash: oklch(79% 0.17 83 / 0.12); /* brighter series on navy */ --series-1: var(--blue-bright); --series-2: var(--gold); --series-3: oklch(72% 0.10 212); --series-4: oklch(74% 0.09 166); --series-5: oklch(72% 0.12 40); --series-6: oklch(70% 0.11 300); } .ctx-sky { color: var(--c-text); background-color: var(--c-bg); } /* ===================================================================== Base ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-body); color: var(--ink); background: var(--paper); font-size: clamp(1rem, 0.97rem + 0.16vw, 1.08rem); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 0.92; color: var(--ink); } p { margin: 0; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; padding: 0; } ul { list-style: none; padding: 0; } img, svg { display: block; max-width: 100%; } ::selection { background: oklch(58% 0.22 257 / 0.22); } :focus-visible { outline: 2.5px solid var(--blue); outline-offset: 3px; border-radius: 4px; } /* subtle paper grain over the whole canvas */ body::after { content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: 0.045; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* shared text bits */ .eyebrow { margin: 0 0 16px; font-weight: 900; font-size: 0.92rem; letter-spacing: 0.01em; color: var(--c-signal-text, var(--blue-ink)); } .lead { font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.45rem); line-height: 1.65; max-width: 62ch; color: var(--c-text-2, var(--ink-soft)); } .readout-num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .kicker { font-weight: 900; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-signal-text, var(--blue-ink)); }