/* TraceLock — Design Tokens (v2 · light-first enterprise) * Marketing pages default to LIGHT. Dark is a variant. * Product app stays dark (separate concern). * * Usage: first stylesheet on every marketing page. * Toggle via [data-theme="dark"] on . */ /* ---------- Fonts ---------- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); /* ---------- Light theme (DEFAULT for marketing) ---------- */ :root { /* Surfaces — warm neutrals, off-white, crisp strokes */ --base: #FAFAF7; /* page background, warm off-white */ --panel: #FFFFFF; /* cards, content surfaces */ --elevate: #F4F4EE; /* inputs, subtle insets */ --sunk: #EEEEE6; /* deepest — code blocks, wells */ --stroke: #DAD8CF; /* borders */ --stroke-soft: #E8E6DC; /* hairlines, dividers */ --stroke-strong:#A8A59A; /* for inputs, chips that need more presence */ /* Text — deep ink, not pure black */ --text: #14171A; --text-soft: #2B3138; --muted: #5B6470; --muted-strong: #3D4450; --muted-subtle: #858E9A; /* Accent — cyan restrained. We also add slate/indigo so cyan isn't alone. */ --accent: #0B7A97; /* primary accent, teal-cyan, deep. WCAG AA on white. */ --accent-bright:#18B4D9; /* bright variant — hovers, active lines */ --accent-ink: #063B49; /* dark text on light cyan backgrounds */ --accent-tint: #E6F5F8; /* tinted panel bg */ --accent-tint-strong:#CDEAF1; --accent-line: rgba(11, 122, 151, 0.35); /* Secondary accent — slate/indigo. For secondary emphasis so cyan doesn't carry everything. */ --ink-accent: #1F2937; --ink-accent-soft: #F1F3F5; --ink-accent-line: rgba(31, 41, 55, 0.18); /* Semantic */ --success: #047857; --success-tint: #E7F5EF; --success-line: rgba(4, 120, 87, 0.35); --warn: #B45309; --warn-tint: #FAF0DF; --warn-line: rgba(180, 83, 9, 0.35); --danger: #B91C1C; --danger-tint: #FDECEC; --danger-line: rgba(185, 28, 28, 0.35); --info: #1E40AF; --info-tint: #E8ECF9; /* Pipeline stage colors — the spine of the product story. Used in hero ribbon, lifecycle section, pipeline mocks. */ --stage-lead: #7C3AED; /* purple */ --stage-quote: #B45309; /* amber/bronze */ --stage-won: #047857; /* green */ --stage-job: #0B7A97; /* cyan */ --stage-field: #1F2937; /* ink */ --stage-done: #5B6470; /* complete/archived grey */ --stage-lead-tint: #F3EAFD; --stage-quote-tint: #FAF0DF; --stage-won-tint: #E7F5EF; --stage-job-tint: #E6F5F8; --stage-field-tint: #EEEFF2; --stage-done-tint: #F1F2F4; /* Overlays */ --tint-8: rgba(11, 122, 151, 0.06); --tint-16: rgba(11, 122, 151, 0.12); /* Shadows — subtle, ink-based, not gray */ --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.04); --shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04); --shadow-md: 0 8px 24px rgba(17, 24, 39, 0.08), 0 2px 6px rgba(17, 24, 39, 0.04); --shadow-lg: 0 24px 48px rgba(17, 24, 39, 0.10), 0 8px 16px rgba(17, 24, 39, 0.05); --shadow-xl: 0 40px 96px rgba(17, 24, 39, 0.14), 0 16px 32px rgba(17, 24, 39, 0.08); --shadow-hero: 0 48px 120px rgba(17, 24, 39, 0.16), 0 20px 40px rgba(17, 24, 39, 0.10); /* Focus ring */ --focus-ring: 0 0 0 3px rgba(11, 122, 151, 0.28); /* Typography */ --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Type scale — display bigger, body calmer */ --fs-display: clamp(2.75rem, 5vw + 1rem, 5rem); /* ~44 → 80 */ --fs-h1: clamp(2rem, 2.5vw + 1rem, 3.25rem); /* ~32 → 52 */ --fs-h2: clamp(1.625rem, 1.5vw + 1rem, 2.5rem);/* ~26 → 40 */ --fs-h3: clamp(1.125rem, 0.5vw + 1rem, 1.5rem);/* ~18 → 24 */ --fs-lead: clamp(1.0625rem, 0.35vw + 1rem, 1.25rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-caption: 0.8125rem; --fs-mono: 0.75rem; --lh-display: 1.02; --lh-h1: 1.1; --lh-h2: 1.15; --lh-h3: 1.3; --lh-body: 1.55; --tr-display: -0.025em; --tr-h1: -0.02em; --tr-h2: -0.015em; --tr-h3: -0.01em; --tr-mono: 0.06em; /* Spacing */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32:128px; --sp-40:160px; /* Radius */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; /* Layout */ --container: 1240px; --container-wide: 1440px; --gutter: 24px; /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 150ms; --dur-med: 220ms; --dur-slow: 320ms; --dur-ribbon: 900ms; /* Legacy aliases — keep older pages (library.html etc.) rendering */ --accent-cyan: var(--accent); --accent-green: var(--success); --accent-amber: var(--warn); --cyan-line: var(--accent-line); --cyan-tint-8: var(--tint-8); --glow-cyan: 0 0 0 3px var(--accent-tint), 0 0 24px rgba(11, 122, 151, 0.15); --r-btn: var(--r-md); --r-chip: var(--r-sm); --r-panel: var(--r-lg); --r-hero: var(--r-xl); } /* ---------- Dark theme (variant) ---------- */ [data-theme="dark"] { --base: #0E1116; --panel: #141922; --elevate: #1A2029; --sunk: #0A0D12; --stroke: #2A323D; --stroke-soft: #1F2630; --stroke-strong:#3A4351; --text: #F3F4F6; --text-soft: #D1D5DB; --muted: #9CA3AF; --muted-strong: #B9C0CA; --muted-subtle: #6B7280; --accent: #38C8EC; --accent-bright: #5FDCFB; --accent-ink: #002B38; --accent-tint: rgba(56, 200, 236, 0.10); --accent-tint-strong:rgba(56, 200, 236, 0.18); --accent-line: rgba(56, 200, 236, 0.38); --ink-accent: #E5E7EB; --ink-accent-soft: rgba(229, 231, 235, 0.08); --ink-accent-line: rgba(229, 231, 235, 0.18); --success: #34D399; --success-tint: rgba(52, 211, 153, 0.10); --success-line: rgba(52, 211, 153, 0.35); --warn: #FBBF24; --warn-tint: rgba(251, 191, 36, 0.10); --warn-line: rgba(251, 191, 36, 0.35); --danger: #F87171; --danger-tint: rgba(248, 113, 113, 0.10); --danger-line: rgba(248, 113, 113, 0.35); --info: #93C5FD; --info-tint: rgba(147, 197, 253, 0.10); --stage-lead: #A78BFA; --stage-lead-tint: rgba(167, 139, 250, 0.12); --stage-quote: #FBBF24; --stage-quote-tint: rgba(251, 191, 36, 0.12); --stage-won: #34D399; --stage-won-tint: rgba(52, 211, 153, 0.12); --stage-job: #38C8EC; --stage-job-tint: rgba(56, 200, 236, 0.12); --stage-field: #D1D5DB; --stage-field-tint: rgba(209, 213, 219, 0.10); --stage-done: #6B7280; --stage-done-tint: rgba(107, 114, 128, 0.10); --tint-8: rgba(56, 200, 236, 0.06); --tint-16: rgba(56, 200, 236, 0.14); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25); --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.5), 0 8px 16px rgba(0, 0, 0, 0.3); --shadow-xl: 0 40px 96px rgba(0, 0, 0, 0.6), 0 16px 32px rgba(0, 0, 0, 0.35); --shadow-hero: 0 48px 120px rgba(0, 0, 0, 0.6), 0 20px 40px rgba(0, 0, 0, 0.4); --focus-ring: 0 0 0 3px rgba(56, 200, 236, 0.30); } /* ---------- Reset + base ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--base); color: var(--text); font-family: var(--font-sans); font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color-scheme: light; text-rendering: optimizeLegibility; } [data-theme="dark"] { color-scheme: dark; } body { font-size: var(--fs-body); line-height: var(--lh-body); background: var(--base); color: var(--text); min-height: 100vh; } /* ---------- Typography ---------- */ h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tr-h2); color: var(--text); } h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); font-weight: 600; } h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); font-weight: 600; } h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); font-weight: 600; } p { margin: 0; color: var(--text); } .display { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); font-weight: 600; color: var(--text); } .lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: var(--tr-mono); color: var(--muted); font-weight: 500; } .eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .eyebrow.eyebrow-plain::before { display: none; } .mono { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono); color: var(--muted); } .mono-num { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-subtle); font-weight: 500; } .muted { color: var(--muted); } .text-accent { color: var(--accent); } .text-ink { color: var(--text); } /* Accent word treatment */ .accent-word { color: var(--accent); font-weight: 600; } /* Focus */ :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; } /* Links */ a { color: inherit; text-decoration: none; } a.link { color: var(--accent); border-bottom: 1px solid transparent; transition: border-color var(--dur-med) var(--ease-out); } a.link:hover { border-bottom-color: var(--accent); } /* ---------- Layout primitives ---------- */ .container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .container-wide { max-width: var(--container-wide); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .section { padding-top: var(--sp-24); padding-bottom: var(--sp-24); } .section-tight { padding-top: var(--sp-16); padding-bottom: var(--sp-16); } @media (max-width: 1023px) { .section { padding-top: var(--sp-16); padding-bottom: var(--sp-16); } } @media (max-width: 639px) { .section { padding-top: var(--sp-12); padding-bottom: var(--sp-12); } } /* Hairline */ .hairline { height: 1px; background: var(--stroke-soft); width: 100%; border: 0; } /* ---------- Reveal on scroll ---------- */ html.js-reveal .reveal { opacity: 0; transform: translateY(10px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); } html.js-reveal .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html.js-reveal .reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ---------- Selection ---------- */ ::selection { background: var(--accent-tint-strong); color: var(--accent-ink); } [data-theme="dark"] ::selection { color: var(--text); } /* ---------- Scrollbar (subtle) ---------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--stroke); border-radius: 10px; border: 2px solid var(--base); } ::-webkit-scrollbar-thumb:hover { background: var(--stroke-strong); } /* ---------- Utility: grain overlay (subtle texture) ---------- */ .grain::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.6; z-index: 1; }