/* ============================================================ LIL ZMRS KARTS — Foundations Colors, type, spacing, motion. The whole atomic layer. Aesthetic: dark luxury automotive · editorial · technical. ============================================================ */ /* ---- WEB FONTS — Google substitutions --------------------- The brand reference comp uses Druk-family display faces + a wide grotesk. Substituted with the closest free Google Fonts equivalents (Antonio / Saira Condensed / Manrope / JetBrains Mono / Italianno). Swap for licensed faces when acquired — variable names stay the same. ---------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Antonio:wght@400;500;600;700&family=Saira+Condensed:ital,wght@0,400;0,700;0,900;1,700;1,900&family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Italianno&display=swap'); :root { /* ---- COLOR · CORE ---------------------------------------- Near-black field, off-white type, hairline neutrals. Brand color is dimensional: deep "brake red" warming into "ember amber". Used SPARINGLY — accents only. -------------------------------------------------------- */ /* Surfaces */ --zmrs-ink: #0A0A0A; /* primary background, near-black */ --zmrs-ink-2: #111111; /* elevated surface */ --zmrs-ink-3: #161616; /* card / inset */ --zmrs-ink-4: #1C1C1C; /* hover surface */ --zmrs-carbon: #0E0E10; /* photographic black tint, slight blue */ /* Type */ --zmrs-bone: #F6F4EF; /* primary FG — warm off-white, NOT pure white */ --zmrs-bone-2: #E6E3DC; /* hover / display gradient stop */ --zmrs-steel: #A6A6A6; /* secondary FG — captions, dimmed display */ --zmrs-steel-2: #7A7A7A; /* tertiary, meta */ --zmrs-graphite: #4A4A4A; /* disabled, deepest dim type */ /* Hairlines + dividers */ --zmrs-rule: #262626; /* primary divider */ --zmrs-rule-2: #1F1F1F; /* subtle inset divider */ /* Brand accent — brake light gradient stops */ --zmrs-brake: #E0301E; /* deep brake red — primary accent */ --zmrs-brake-glow: #FF4624; /* lit, hover */ --zmrs-ember: #FF7A1F; /* warm amber, indicator / secondary */ --zmrs-ember-soft: #FFA660; /* amber tint */ /* Signal blue — used at chassis indicators ONLY, sparingly */ --zmrs-signal: #4A9FFF; /* Semantic */ --zmrs-bg: var(--zmrs-ink); --zmrs-bg-elev: var(--zmrs-ink-2); --zmrs-bg-card: var(--zmrs-ink-3); --zmrs-fg: var(--zmrs-bone); --zmrs-fg-dim: var(--zmrs-steel); --zmrs-fg-muted: var(--zmrs-steel-2); --zmrs-divider: var(--zmrs-rule); --zmrs-accent: var(--zmrs-brake); /* ---- TYPE FAMILIES -------------------------------------- 1. Display: Antonio (Druk-substitute) — heavy condensed sans 2. Display-it: Saira Condensed Italic (Druk Italic substitute) 3. Body: Manrope — geometric grotesk 4. Mono: JetBrains Mono — technical readouts, labels 5. Script: Italianno — the "Lil" cursive accent -------------------------------------------------------- */ --zmrs-font-display: "Antonio", "Oswald", "Bebas Neue", Impact, sans-serif; --zmrs-font-italic: "Saira Condensed", "Antonio", Impact, sans-serif; --zmrs-font-body: "Manrope", -apple-system, "Helvetica Neue", Arial, sans-serif; --zmrs-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --zmrs-font-script: "Italianno", "Brush Script MT", cursive; /* ---- TYPE SCALE ----------------------------------------- Editorial automotive — display dominates, labels whisper. -------------------------------------------------------- */ --zmrs-size-display-xl: 144px; /* hero, "GENOS R1" */ --zmrs-size-display-l: 104px; --zmrs-size-display: 72px; /* BESPOKE BY DESIGN. */ --zmrs-size-h1: 56px; --zmrs-size-h2: 40px; --zmrs-size-h3: 28px; --zmrs-size-h4: 20px; --zmrs-size-body-l: 18px; --zmrs-size-body: 16px; --zmrs-size-body-s: 14px; --zmrs-size-label: 12px; /* SPACED CAPS LABELS */ --zmrs-size-caption: 11px; --zmrs-size-micro: 10px; /* Line height — tight on display, generous on body */ --zmrs-lh-display: 0.92; --zmrs-lh-tight: 1.05; --zmrs-lh-snug: 1.25; --zmrs-lh-body: 1.5; --zmrs-lh-loose: 1.7; /* Letter spacing */ --zmrs-track-display: -0.02em; /* tighten heavy display */ --zmrs-track-tight: -0.01em; --zmrs-track-body: 0; --zmrs-track-label: 0.18em; /* SPACED · UPPERCASE · LABELS */ --zmrs-track-caption: 0.24em; --zmrs-track-spec: 0.3em; /* technical readout headers */ /* ---- SPACING (4px base) --------------------------------- */ --zmrs-s-0: 0px; --zmrs-s-1: 4px; --zmrs-s-2: 8px; --zmrs-s-3: 12px; --zmrs-s-4: 16px; --zmrs-s-5: 20px; --zmrs-s-6: 24px; --zmrs-s-8: 32px; --zmrs-s-10: 40px; --zmrs-s-12: 48px; --zmrs-s-16: 64px; --zmrs-s-20: 80px; --zmrs-s-24: 96px; --zmrs-s-32: 128px; --zmrs-s-40: 160px; /* ---- RADII -- minimal, mostly sharp --------------------- Brand reads "engineered". Sharp corners by default. Soft radii only for inputs / pill labels. -------------------------------------------------------- */ --zmrs-r-0: 0px; /* default — sharp */ --zmrs-r-1: 2px; --zmrs-r-2: 4px; /* inputs, small chips */ --zmrs-r-3: 8px; --zmrs-r-pill: 999px; /* indicator pills */ /* ---- BORDERS / RULES ----------------------------------- */ --zmrs-border-hair: 1px solid var(--zmrs-rule); --zmrs-border-faint: 1px solid var(--zmrs-rule-2); --zmrs-border-bone: 1px solid var(--zmrs-bone); --zmrs-border-brake: 1px solid var(--zmrs-brake); /* ---- SHADOWS — minimal. dark luxury doesn't drop shadows. A light interior glow is used sparingly on hover. -------------------------------------------------------- */ --zmrs-shadow-none: none; --zmrs-shadow-card: 0 1px 0 0 rgba(255,255,255,0.03) inset, 0 0 0 1px var(--zmrs-rule); --zmrs-shadow-elev: 0 24px 80px -24px rgba(0,0,0,0.9); --zmrs-shadow-brake: 0 0 0 1px rgba(224,48,30,0.4), 0 0 32px -8px rgba(255,70,36,0.6); /* ---- MOTION -------------------------------------------- */ --zmrs-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* primary easing */ --zmrs-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --zmrs-ease-precise: cubic-bezier(0.4, 0, 0.2, 1); --zmrs-dur-fast: 120ms; --zmrs-dur-base: 220ms; --zmrs-dur-slow: 420ms; --zmrs-dur-cinematic: 900ms; /* ---- LAYOUT -------------------------------------------- */ --zmrs-max-w: 1440px; --zmrs-gutter: 32px; --zmrs-bracket-size: 28px; /* corner bracket motif */ --zmrs-bracket-stroke: 1px; } /* ============================================================ SEMANTIC TYPE CLASSES Apply these directly. They reference the tokens above. ============================================================ */ .zmrs-display-xl, .zmrs-display-l, .zmrs-display, .zmrs-h1, .zmrs-h2, .zmrs-h3, .zmrs-h4 { font-family: var(--zmrs-font-display); font-weight: 700; color: var(--zmrs-fg); line-height: var(--zmrs-lh-display); letter-spacing: var(--zmrs-track-display); text-transform: uppercase; margin: 0; } .zmrs-display-xl { font-size: var(--zmrs-size-display-xl); } .zmrs-display-l { font-size: var(--zmrs-size-display-l); } .zmrs-display { font-size: var(--zmrs-size-display); } .zmrs-h1 { font-size: var(--zmrs-size-h1); line-height: var(--zmrs-lh-tight); } .zmrs-h2 { font-size: var(--zmrs-size-h2); line-height: var(--zmrs-lh-tight); } .zmrs-h3 { font-size: var(--zmrs-size-h3); line-height: var(--zmrs-lh-snug); } .zmrs-h4 { font-size: var(--zmrs-size-h4); line-height: var(--zmrs-lh-snug); } .zmrs-italic { font-family: var(--zmrs-font-italic); font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: var(--zmrs-track-display); } .zmrs-script { font-family: var(--zmrs-font-script); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; } .zmrs-body, p { font-family: var(--zmrs-font-body); font-weight: 400; font-size: var(--zmrs-size-body); line-height: var(--zmrs-lh-body); color: var(--zmrs-fg); margin: 0; } .zmrs-body-l { font-size: var(--zmrs-size-body-l); font-family: var(--zmrs-font-body); line-height: var(--zmrs-lh-body); } .zmrs-body-s { font-size: var(--zmrs-size-body-s); font-family: var(--zmrs-font-body); line-height: var(--zmrs-lh-body); } .zmrs-label { font-family: var(--zmrs-font-mono); font-weight: 500; font-size: var(--zmrs-size-label); letter-spacing: var(--zmrs-track-label); text-transform: uppercase; color: var(--zmrs-fg-dim); line-height: 1; } .zmrs-caption { font-family: var(--zmrs-font-mono); font-weight: 400; font-size: var(--zmrs-size-caption); letter-spacing: var(--zmrs-track-caption); text-transform: uppercase; color: var(--zmrs-fg-muted); line-height: 1.4; } .zmrs-spec { font-family: var(--zmrs-font-mono); font-size: var(--zmrs-size-label); letter-spacing: var(--zmrs-track-spec); text-transform: uppercase; color: var(--zmrs-fg-dim); } .zmrs-mono { font-family: var(--zmrs-font-mono); font-size: var(--zmrs-size-body-s); color: var(--zmrs-fg); } /* ============================================================ PRIMITIVES — corner brackets, rules, dim/lit gradient ============================================================ */ /* Decorative L-bracket — wrap any container in .zmrs-brackets. Pure CSS, prints clean. */ .zmrs-brackets { position: relative; } .zmrs-brackets::before, .zmrs-brackets::after, .zmrs-brackets > .zmrs-bracket-bl, .zmrs-brackets > .zmrs-bracket-br { content: ""; position: absolute; width: var(--zmrs-bracket-size); height: var(--zmrs-bracket-size); border: 0 solid var(--zmrs-fg-dim); pointer-events: none; } .zmrs-brackets::before { top: 0; left: 0; border-top-width: var(--zmrs-bracket-stroke); border-left-width: var(--zmrs-bracket-stroke); } .zmrs-brackets::after { top: 0; right: 0; border-top-width: var(--zmrs-bracket-stroke); border-right-width: var(--zmrs-bracket-stroke); } .zmrs-brackets > .zmrs-bracket-bl { bottom: 0; left: 0; border-bottom-width: var(--zmrs-bracket-stroke); border-left-width: var(--zmrs-bracket-stroke); } .zmrs-brackets > .zmrs-bracket-br { bottom: 0; right: 0; border-bottom-width: var(--zmrs-bracket-stroke); border-right-width: var(--zmrs-bracket-stroke); } /* Hairline section rule */ .zmrs-rule { height: 1px; background: var(--zmrs-rule); border: 0; margin: 0; } /* Display dimmed→lit gradient (used on hero numerals like "GENOS R1") */ .zmrs-gradient-dim-lit { background: linear-gradient(90deg, var(--zmrs-graphite) 0%, var(--zmrs-bone) 80%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Indicator dot — chassis status */ .zmrs-indicator { display: inline-block; width: 8px; height: 8px; border-radius: var(--zmrs-r-pill); background: var(--zmrs-signal); box-shadow: 0 0 0 3px rgba(74,159,255,0.18); vertical-align: middle; } .zmrs-indicator--brake { background: var(--zmrs-brake); box-shadow: 0 0 0 3px rgba(224,48,30,0.18); } .zmrs-indicator--ember { background: var(--zmrs-ember); box-shadow: 0 0 0 3px rgba(255,122,31,0.18); } /* Base / reset for design system surfaces */ .zmrs-surface { background: var(--zmrs-bg); color: var(--zmrs-fg); font-family: var(--zmrs-font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }