/* ───────────────────────────────────────── OnSiight Design System — Marketing Layer Product UI is dense, calm and flat. Marketing is not the same surface: photography leads, type gets large, cards get rounder, and depth is real. Nothing here changes the palette. Sky is still the only accent, stone is still the page, navy is still chrome. Purple, orange, amber, magenta and yellow remain banned. What loosens is FORM: radius, scale, scrim, glass, layer. Scope: landing pages, one-pagers, decks, social, email. NEVER load this in the product application. ───────────────────────────────────────── */ :root { /* ── Display scale ──────────────────────── Marketing headlines run far past the 22px product ceiling. Archivo only. ALL CAPS is permitted here — the sentence-case rule governs product UI, not marketing display type. */ --mkt-display-sm: 36px; --mkt-display-md: 48px; --mkt-display-lg: 60px; --mkt-display-xl: 72px; --mkt-display-2xl: 96px; --mkt-display-tracking: -0.03em; --mkt-display-line-h: 0.98; /* Body copy sits larger than product body (14px). */ --mkt-body-lead: 20px; --mkt-body: 17px; --mkt-body-line-h: 1.55; /* Ghosted oversize type behind content — ref 06. */ --mkt-type-ghost: var(--color-neutral-150); /* ── Radii ──────────────────────────────── Marketing cards read 12–20px. Controls stay crisp: a 20px card with a 6px button is the intended contrast, not an inconsistency. */ --mkt-radius-card: 16px; --mkt-radius-tile: 20px; --mkt-radius-hero: 24px; --mkt-radius-canvas: 28px; /* inset page canvas — ref 05 */ --mkt-radius-media: 12px; /* ── Photography ────────────────────────── Subject: commercial roofs from the air, RTU banks, warehouse and retail interiors, parking fields at dusk, building exteriors in flat overcast light. Never stock people in hard hats. Never lens flare. Desaturate slightly so sky reads as the only saturated thing on the page. */ --mkt-photo-filter: saturate(0.82) contrast(1.04); --mkt-photo-ratio-hero: 16 / 9; --mkt-photo-ratio-card: 4 / 3; --mkt-photo-ratio-tall: 3 / 4; /* Scrims — text protection over photography. All are blue-950 #0B131D at opacity, so the palette holds. */ --mkt-scrim-bottom: linear-gradient( to top, rgba(11, 19, 29, 0.88) 0%, rgba(11, 19, 29, 0.55) 34%, rgba(11, 19, 29, 0.10) 68%, rgba(11, 19, 29, 0) 100%); --mkt-scrim-left: linear-gradient( to right, rgba(11, 19, 29, 0.86) 0%, rgba(11, 19, 29, 0.42) 46%, rgba(11, 19, 29, 0) 82%); --mkt-scrim-flat: rgba(11, 19, 29, 0.46); /* whole-image wash */ /* Minimum scrim opacity under body copy. Below this, text fails contrast over a bright sky. */ --mkt-scrim-min: 0.55; /* @kind other */ /* ── Glass ──────────────────────────────── Permitted ONLY over photography, and only on marketing surfaces. Glass over a gradient field is still banned — there is no gradient field to sit on. */ --mkt-glass-bg: rgba(243, 241, 236, 0.13); --mkt-glass-bg-dense: rgba(243, 241, 236, 0.20); --mkt-glass-border: 1px solid rgba(255, 255, 255, 0.24); --mkt-glass-blur: blur(20px) saturate(1.15); /* @kind other */ --mkt-glass-blur-sm: blur(12px) saturate(1.1); /* @kind other */ --mkt-glass-shadow: 0 24px 60px -24px rgba(11, 19, 29, 0.62); /* Dark glass — over bright photography. */ --mkt-glass-dark-bg: rgba(11, 19, 29, 0.44); --mkt-glass-dark-border: 1px solid rgba(255, 255, 255, 0.14); /* ── Elevation ──────────────────────────── Wider and softer than product shadows. Depth is a real cast here, not a hairline. */ --mkt-shadow-card: 0 2px 4px rgba(26, 28, 32, 0.04), 0 18px 40px -16px rgba(26, 28, 32, 0.20); --mkt-shadow-card-hover: 0 4px 8px rgba(26, 28, 32, 0.05), 0 32px 64px -20px rgba(26, 28, 32, 0.28); --mkt-shadow-float: 0 40px 90px -32px rgba(11, 19, 29, 0.42), 0 8px 20px -8px rgba(11, 19, 29, 0.18); /* Stacked/overlapping cards — ref 06. Offset, don't rotate. */ --mkt-stack-offset: 10px; /* @kind other */ /* ── Layout ─────────────────────────────── */ --mkt-canvas-inset: 20px; /* page floats inside stone — ref 05 */ --mkt-container: 1240px; --mkt-container-wide: 1440px; --mkt-gutter: 24px; /* bento gutter — on the 4px grid */ --mkt-gutter-sm: 16px; --mkt-section-y: 96px; --mkt-section-y-lg: 128px; /* Hero heights */ --mkt-hero-min: 560px; --mkt-hero-tall: 720px; /* ── Engineering dark ground ────────────── Reference 12. The route that needs no photography: near-navy ground, blueprint grid, ambient accent glow, isometric renders, drawn diagrams. v3's brief already asks for "architectural drawings meet clean data dashboards" — this is that, at marketing scale. */ --mkt-dark-bg: var(--color-blue-950); /* #0B131D — never pure black */ --mkt-dark-raised: var(--color-blue-900); --mkt-dark-ink: var(--color-chrome-ink); --mkt-dark-border: rgba(255, 255, 255, 0.10); --mkt-dark-border-lit: rgba(124, 193, 240, 0.34); /* Blueprint grid — the drawing-paper substrate. */ --mkt-grid-line: rgba(124, 193, 240, 0.07); --mkt-grid-size: 64px; /* @kind other */ --mkt-grid: repeating-linear-gradient(0deg, var(--mkt-grid-line) 0 1px, transparent 1px var(--mkt-grid-size)), repeating-linear-gradient(90deg, var(--mkt-grid-line) 0 1px, transparent 1px var(--mkt-grid-size)); /* @kind other */ /* Ambient glow — MARKETING ONLY, and only on the dark ground. The "no glowing blobs" rule still governs product UI without exception. */ --mkt-glow-ambient: radial-gradient(72% 52% at 50% 4%, rgba(78, 168, 232, 0.26) 0%, rgba(18, 111, 198, 0.11) 42%, rgba(11, 19, 29, 0) 76%); --mkt-glow-edge: 0 0 0 1px rgba(124, 193, 240, .38), 0 0 24px -4px rgba(78, 168, 232, .46); --mkt-glow-panel: 0 0 40px -8px rgba(78, 168, 232, 0.32); /* ── Hero numerals ──────────────────────── One number per cell may go enormous — ref 02, 07. Always IBM Plex Mono, always a real measurement. */ --mkt-numeral-lg: 56px; --mkt-numeral-xl: 76px; --mkt-numeral-2xl: 104px; --mkt-numeral-tracking: -0.04em; } /* ── Reduced motion ───────────────────────── Parallax, autoplaying carousels and card lifts all stop. Glass and scrims stay — they are not motion. */ @media (prefers-reduced-motion: reduce) { :root { --mkt-stack-offset: 0px; /* @kind other */ } }