/* ========================================================================== Design tokens — the single source of truth for the look. Light theme only. No dark mode. Palette is violet-led, sampled from the Orion Digital logo. Layout rhythm (tight negative heading tracking) follows seomontreal.io — on a wider 1400px container, inverted from their dark kit to light surfaces. ========================================================================== */ :root { /* --- Brand ----------------------------------------------------------- */ --od-primary: #4E12F0; /* logo violet — CTAs, active states */ --od-primary-600: #3D0BC9; /* hover/active, and inline link text */ --od-primary-700: #2F089B; /* pressed */ --od-primary-100: #EFE9FE; /* tint fills, badges, icon plates */ --od-primary-50: #F7F4FF; /* faintest wash */ /* --- Ink & text ------------------------------------------------------ */ --od-ink: #14142B; /* headings, dark section backgrounds */ --od-ink-2: #1E1E3F; /* elevated dark surface */ --od-body: #4A4A5E; /* body copy on light */ /* Darkened from #7A7A8C, which failed WCAG AA at small sizes on both --od-surface and --od-alt. This clears 4.5:1 on each. */ --od-muted: #5D5D70; /* meta, captions, labels */ /* --- Surfaces -------------------------------------------------------- */ --od-surface: #FFFFFF; /* cards, default page */ --od-alt: #F7F6FC; /* alternating band — violet-tinted, not grey */ --od-alt-2: #EFEDF9; /* deeper wash, chips */ --od-line: #E4E2EF; /* borders, dividers */ --od-line-strong: #CFCBE4; /* On dark sections */ --od-on-ink: #F5F4FB; --od-on-ink-muted: #A9A7C4; --od-on-ink-line: rgba(255, 255, 255, 0.14); /* --- Evidence green -------------------------------------------------- A deliberate second accent, used ONLY where the page asserts a fact or a positive outcome: proof ticks, credibility marks, growth numbers, reassurances, form success. Violet stays for brand and for anything clickable — so colour tells the visitor "this is true" apart from "this does something". Never use green for a button or a link. -------------------------------------------------------------------- */ --od-green: #17A67C; /* icons and large numbers (3:1, graphics) */ --od-green-600: #0E7A5C; /* small green TEXT — clears AA on white */ --od-green-100: #E4F6EF; /* tint plates behind green marks */ --od-green-light: #4ADE9E; /* on --od-ink sections */ /* --- Surface devices -------------------------------------------------- Washes and grain give a flat light page depth without imagery. Grain is one inline fractalNoise data URI — no file, no request, no build step — and is applied ONLY on ink bands at <= 4% opacity. Above that it measurably degrades text contrast. -------------------------------------------------------------------- */ --od-ink-3: #0C0C1C; /* deeper than --od-ink, so ink can layer */ --od-line-hair: #EEECF6; /* internal rules, lighter than --od-line */ --od-rule: 2px; --od-rule-strong: 3px; --od-star: #F5A524; /* rating glyphs — outside the two accents */ --od-wash-violet: radial-gradient(72ch 48ch at 92% -12%, var(--od-primary-50), transparent 68%); --od-wash-ink: radial-gradient(64ch 46ch at 6% -8%, rgba(78, 18, 240, 0.30), transparent 64%); --od-wash-violet-card: linear-gradient(180deg, var(--od-primary-100) 0%, var(--od-surface) 28%); /* Blueprint grid. 72px cell — an architectural rule rather than graph paper. Fewer, larger squares read as deliberate structure; a tight mesh reads as noise and fights the cards sitting on it. The line colour is the load-bearing value: on --od-alt anything under ~0.07 alpha disappears completely, because the band is already tinted. */ --od-grid-cell: 72px; --od-grid-line: rgba(20, 20, 43, 0.09); --od-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); /* --- Status ---------------------------------------------------------- */ --od-success: var(--od-green); --od-error: #C0322B; --od-focus: #4E12F0; /* --- Typography ------------------------------------------------------ */ --od-font-head: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif; --od-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* * Fluid scale. Decompressed from the original: the old scale ran * h3 1.5 → h4 1.125 → lead 1.25, so h4 was SMALLER than lead and nothing * between body and h3 was distinguishable. Adjacent ratios now run * 1.06 / 1.31 / 1.30 / 1.60 / 1.83 instead of a flat 1.11–1.20. */ --od-fs-display: clamp(2.75rem, 1.15rem + 6.8vw, 5.5rem); --od-fs-h1: clamp(2.375rem, 1.35rem + 4.4vw, 4rem); --od-fs-h2: clamp(1.875rem, 1.15rem + 3.1vw, 3rem); --od-fs-h3: clamp(1.375rem, 1.12rem + 1.1vw, 1.875rem); --od-fs-h4: clamp(1.1875rem, 1.06rem + 0.55vw, 1.4375rem); --od-fs-lead: clamp(1.125rem, 1.03rem + 0.5vw, 1.375rem); --od-fs-body: 1.0625rem; /* 17px — Inter needs it in a 1400px field */ --od-fs-sm: 0.9375rem; --od-fs-xs: 0.8125rem; --od-fs-eyebrow: 0.75rem; --od-fs-metric: clamp(3rem, 1.4rem + 6.4vw, 6rem); /* The two editorial scale devices. */ --od-fs-numeral: clamp(4.5rem, 1.5rem + 12vw, 12rem); /* ghost numerals */ --od-fs-quote: clamp(1.5rem, 1.05rem + 2vw, 2.375rem); /* lede paragraphs */ /* * Weights. Rubik is loaded as a 400–800 variable face, so a light display * weight costs nothing. Setting 800 black beside 400 violet at the same * size in the same family is the page's contrast device — it does the job * a second typeface would, without a second font request. */ /* * 700, not 800. At the sizes this scale reaches — a 96px metric, a 5.5rem * display headline — 800 stops reading as emphasis and just reads as heavy. * 700 holds the same authority with far less shouting, and matches the * weight the violet accent carries, so the whole page agrees on what "bold" * means. Anything that needs to be heavier should get bigger, not fatter. */ --od-fw-display: 700; --od-fw-display-alt: 400; --od-fw-head: 700; --od-fw-mid: 600; --od-lh-display: 0.94; /* 1.1 at 88px is loose and reads flat */ --od-lh-tight: 1.06; --od-lh-head: 1.15; --od-lh-body: 1.6; --od-ls-display: -0.038em; --od-ls-tight: -0.024em; /* h1/h2 — mirrors their -1.3px */ --od-ls-h3: -0.016em; --od-ls-numeral: -0.055em; --od-ls-eyebrow: 0.14em; --od-measure: 68ch; /* prose max width */ --od-measure-lead: 52ch; /* --- Spacing (8px base) ---------------------------------------------- */ --od-s-1: 4px; --od-s-2: 8px; --od-s-3: 12px; --od-s-4: 16px; --od-s-5: 24px; --od-s-6: 32px; --od-s-7: 48px; --od-s-8: 64px; --od-s-9: 96px; --od-s-10: 128px; --od-s-11: 176px; /* --- Layout ---------------------------------------------------------- */ /* * Wide layout, matching vojtechb69.sg-host.com rather than seomontreal's * 1140px. The gutter grows with the viewport so the extra width shows up as * content, not as a wall-to-wall stretch on very large screens. */ --od-container: 1400px; --od-container-narrow: 900px; --od-container-wide: 1560px; --od-gutter: clamp(20px, 4vw, 48px); --od-header-h: 76px; /* * Section rhythm. Four heights, not three — when every section is the same * height none of them is a landmark, which was a large part of why the page * read flat. */ --od-section-y: clamp(64px, 5vw + 32px, 120px); --od-section-y-lg: clamp(88px, 8vw + 40px, 176px); --od-section-y-xl: clamp(104px, 10vw + 44px, 208px); /* hero, final CTA */ --od-section-y-tight: clamp(36px, 2vw + 22px, 64px); --od-gap-header: clamp(32px, 3vw + 16px, 64px); /* section head -> content */ --od-gap-grid: clamp(16px, 1.5vw + 8px, 28px); /* card gutters */ --od-gap-grid-lg: clamp(28px, 3.5vw + 8px, 72px); /* editorial two-ups */ --od-col-offset: clamp(0px, 5vw, 88px); /* zig-zag card offsets */ --od-container-text: 720px; /* left-aligned headers */ /* --- Radii — differentiated by object weight ------------------------- One radius on everything gave every object the same weight. Chips are light, form cards are heavy, and the radius should say so. */ --od-r-xs: 6px; /* chips, inline marks */ --od-r-sm: 10px; /* inputs, small plates */ --od-r: 16px; /* standard cards */ --od-r-lg: 24px; /* feature cards, frames */ --od-r-xl: 32px; /* form cards, ink plates */ --od-r-pill: 999px; /* --- Shadows — five, all neutral ink. Still no glows. ----------------- shadow-0 is the RESTING state of a card: previously cards had no shadow at all until hover, so a static page had literally no depth. */ --od-shadow-0: 0 1px 0 rgba(20, 20, 43, 0.045); --od-shadow-1: 0 1px 2px rgba(20, 20, 43, 0.05), 0 2px 6px rgba(20, 20, 43, 0.05); --od-shadow-2: 0 2px 4px rgba(20, 20, 43, 0.06), 0 10px 24px rgba(20, 20, 43, 0.08); --od-shadow-3: 0 4px 10px rgba(20, 20, 43, 0.07), 0 28px 60px rgba(20, 20, 43, 0.13); --od-shadow-ink: 0 28px 72px rgba(8, 8, 22, 0.45); /* white card on ink */ /* --- Motion ---------------------------------------------------------- */ --od-ease: cubic-bezier(0.22, 1, 0.36, 1); --od-dur: 220ms; /* --- Z-index --------------------------------------------------------- */ --od-z-header: 100; --od-z-drawer: 200; --od-z-overlay: 190; } /* Breakpoints used throughout (min-width, mobile-first). Custom properties cannot be used in media queries, so these are documentation, not tokens: 600px two-column grids begin 900px hero splits, nav goes horizontal, carousels become grids 1200px three/four-column grids, full type scale 1440px container caps; no new layouts beyond this */