/* ============================================================ ORSEL v8 — TOKEN LAYER (round 5) Single source of truth for elevation, gradient, type, space, radius and motion. Mechanics ported from Stripe's measured system (popular-web-designs/templates/stripe.md §§2,3,5,6), re-tinted to the Orsel palette. No colour identity borrowed. LIGHT SOURCE LAW: one light, directly above and slightly front. Every cast shadow has a POSITIVE y-offset. The only zero/negative y values permitted are (a) tier 0, which is fully transparent, and (b) deliberate `inset` top highlights, which are where that same overhead light lands on an upward-facing edge. Load order: FIRST, before style.css. Zero external requests. ============================================================ */ :root{ /* ---- 1. SHADOW TINT ------------------------------------ Stripe tints shadows with its navy (rgba(50,50,93,…)) so elevation reads as brand atmosphere, not grey dirt. Orsel equivalent: the deep teal-navy under our cyan accent. */ --shadow-hue: 22, 58, 77; /* #163A4D — Orsel deep teal-navy */ --shadow-hue-warm: 62, 30, 58; /* #3E1E3A — magenta-side undertone */ /* ---- 1b. ELEVATION RAMP -------------------------------- Each tier = contact + mid diffuse + wide ambient. Stripe mechanic: far branded layer + near neutral layer with negative spread, so elevation stays vertical and controlled. */ /* tier 0 — explicitly on the page plane. Not `none`: a real ramp step at zero alpha, so overrides stay inside the system. */ --shadow-0: 0 0 0 0 rgba(var(--shadow-hue), 0); /* tier 1 — rest. Cards, inputs, list surfaces. */ --shadow-sm: 0 1px 2px rgba(var(--shadow-hue), .07), 0 4px 8px -2px rgba(var(--shadow-hue), .09), 0 10px 20px -8px rgba(var(--shadow-hue), .10); /* tier 2 — raised. Service cards, panels, dropdowns. */ --shadow-md: 0 2px 4px rgba(var(--shadow-hue), .07), 0 8px 16px -4px rgba(var(--shadow-hue), .12), 0 24px 40px -16px rgba(var(--shadow-hue), .16); /* tier 3 — hover / active lift. Pairs with --lift-md. */ --shadow-lg: 0 3px 6px rgba(var(--shadow-hue), .08), 0 14px 28px -6px rgba(var(--shadow-hue), .14), 0 40px 64px -24px rgba(var(--shadow-hue), .22); /* tier 4 — focal / modal. One element per page, at most. */ --shadow-xl: 0 4px 8px rgba(var(--shadow-hue), .10), 0 20px 40px -8px rgba(var(--shadow-hue), .16), 0 56px 88px -32px rgba(var(--shadow-hue), .26); /* hairlines and rings — still downward-lit */ --shadow-hairline: 0 1px 0 rgba(var(--shadow-hue), .10); --shadow-inset-top: inset 0 1px 0 rgba(255,255,255,.72); /* overhead light on top edge */ --shadow-ring: 0 0 0 3px rgba(158,232,245,.55); /* cyan focus ring */ --shadow-ring-strong: 0 0 0 3px rgba(35,89,105,.85); /* ---- 2. GRADIENT RECIPE -------------------------------- Stripe mechanic: flat-tinted surfaces + one saturated decorative gradient, never rainbow. Orsel accents only: cyan #9ee8f5 / magenta #f3a6dc. Alphas stay <= .30 so body ink keeps AA contrast over every stop. */ --grad-surface: linear-gradient(180deg, #ffffff 0%, #f3fbff 100%); --grad-surface-raised: linear-gradient(180deg, #ffffff 0%, #eef8fd 100%); --grad-surface-sunk: linear-gradient(180deg, #eef7fb 0%, #f7fcff 100%); --grad-section: linear-gradient(135deg, #f6fbff 0%, #eaf8fb 62%, #f8edf6 100%); --grad-accent-wash: radial-gradient(ellipse 70% 55% at 50% 12%, rgba(158,232,245,.30) 0%, rgba(158,232,245,0) 70%), radial-gradient(ellipse 55% 45% at 82% 68%, rgba(243,166,220,.18) 0%, rgba(243,166,220,0) 72%); --grad-accent-edge: linear-gradient(90deg, #9ee8f5 0%, #f3a6dc 100%); --grad-ink: linear-gradient(160deg, #16222c 0%, #101720 100%); /* ---- 3. TYPE SCALE ------------------------------------- Stripe mechanic: light weight at display sizes, tracking that tightens with size, tight display leading / relaxed body leading. Faces are Orsel's own: Fraunces (display) + Source Sans 3. */ --font-display: Fraunces, Georgia, 'Times New Roman', serif; --font-text: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif; /* step: numeral — >=72px, for Process 01–04 */ --fs-numeral: clamp(4.5rem, 8vw, 7rem); /* 72 → 112px */ --fw-numeral: 300; --lh-numeral: 1.00; --ls-numeral: -.045em; --fs-display: clamp(3.25rem, 6.4vw, 5rem); /* 52 → 80px */ --fw-display: 300; --lh-display: 1.04; --ls-display: -.038em; --fs-h1: clamp(2.75rem, 5.2vw, 4rem); /* 44 → 64px */ --fw-h1: 300; --lh-h1: 1.06; --ls-h1: -.035em; --fs-h2: clamp(2rem, 3.6vw, 3rem); /* 32 → 48px */ --fw-h2: 300; --lh-h2: 1.12; --ls-h2: -.028em; --fs-h3: 1.625rem; /* 26px */ --fw-h3: 400; --lh-h3: 1.18; --ls-h3: -.018em; --fs-h4: 1.25rem; /* 20px */ --fw-h4: 500; --lh-h4: 1.25; --ls-h4: -.010em; --fs-lede: 1.25rem; /* 20px */ --fw-lede: 300; --lh-lede: 1.50; --ls-lede: -.005em; --fs-body: 1.0625rem; /* 17px */ --fw-body: 400; --lh-body: 1.60; --ls-body: 0; --fs-sm: .9375rem; /* 15px */ --fw-sm: 400; --lh-sm: 1.55; --ls-sm: 0; --fs-xs: .8125rem; /* 13px */ --fw-xs: 500; --lh-xs: 1.45; --ls-xs: .010em; --fs-eyebrow: .6875rem; /* 11px */ --fw-eyebrow: 600; --lh-eyebrow: 1.30; --ls-eyebrow: .16em; --fs-numeric: 1.0625rem; /* tabular figures */ --ff-numeric: "tnum" 1, "lnum" 1; /* ---- 4. SPACING RHYTHM + RADIUS ------------------------ Stripe mechanic: 8px base, dense at the small end for data chrome, generous at the section end. Orsel base = 4px so the dense end has one more rung. */ --space-unit: 4px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 192px; --space-section-tight: var(--space-7); /* 48px */ --space-section: var(--space-9); /* 96px */ --space-section-wide: var(--space-11); /* 192px — 4:1 vs tight */ --radius-1: 2px; --radius-2: 4px; --radius-3: 8px; --radius-card: 12px; --radius-card-lg: 16px; --radius-panel: 24px; --radius-pill: 999px; /* ---- 5. MOTION ----------------------------------------- Stripe mechanic: short, decelerating, never bouncy on chrome. */ --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 340ms; --dur-reveal: 520ms; --ease-out: cubic-bezier(.2, .7, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --ease-entry: cubic-bezier(.16, 1, .3, 1); --lift-sm: -2px; /* links, pills */ --lift-md: -6px; /* cards — pairs --shadow-md → --shadow-lg */ --lift-lg: -10px; /* focal panel */ --press: 1px; /* :active downward nudge */ --transition-card: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); --transition-ui: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } /* ============================================================ DARK MODE — same light source, same geometry, deeper alphas. A dark page swallows diffuse shadow, so the ramp adds a top inset highlight (overhead light on the upward-facing edge) and a faint cyan rim to keep tiers legible. Gradient stops re-based on the dark surfaces; every stop keeps #eeeeee body ink above 4.5:1. ============================================================ */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --shadow-hue: 0, 0, 0; --shadow-0: 0 0 0 0 rgba(0,0,0,0); --shadow-sm: 0 1px 2px rgba(0,0,0,.40), 0 4px 8px -2px rgba(0,0,0,.34), 0 10px 20px -8px rgba(0,0,0,.30); --shadow-md: 0 2px 4px rgba(0,0,0,.46), 0 8px 16px -4px rgba(0,0,0,.40), 0 24px 40px -16px rgba(0,0,0,.44); --shadow-lg: 0 3px 6px rgba(0,0,0,.50), 0 14px 28px -6px rgba(0,0,0,.46), 0 40px 64px -24px rgba(0,0,0,.56); --shadow-xl: 0 4px 8px rgba(0,0,0,.54), 0 20px 40px -8px rgba(0,0,0,.50), 0 56px 88px -32px rgba(0,0,0,.64); --shadow-hairline: 0 1px 0 rgba(0,0,0,.55); --shadow-inset-top: inset 0 1px 0 rgba(158,232,245,.14); --shadow-ring: 0 0 0 3px rgba(158,232,245,.45); --shadow-ring-strong: 0 0 0 3px rgba(169,236,246,.90); --grad-surface: linear-gradient(180deg, #202735 0%, #1a212c 100%); --grad-surface-raised: linear-gradient(180deg, #242c3b 0%, #1c2431 100%); --grad-surface-sunk: linear-gradient(180deg, #151b24 0%, #1a2029 100%); --grad-section: linear-gradient(135deg, #1c2c39 0%, #16242e 62%, #282332 100%); --grad-accent-wash: radial-gradient(ellipse 70% 55% at 50% 12%, rgba(158,232,245,.12) 0%, rgba(158,232,245,0) 70%), radial-gradient(ellipse 55% 45% at 82% 68%, rgba(243,166,220,.09) 0%, rgba(243,166,220,0) 72%); --grad-ink: linear-gradient(160deg, #0e141b 0%, #0a0f15 100%); } } :root[data-theme="dark"]{ --shadow-hue: 0, 0, 0; --shadow-0: 0 0 0 0 rgba(0,0,0,0); --shadow-sm: 0 1px 2px rgba(0,0,0,.40), 0 4px 8px -2px rgba(0,0,0,.34), 0 10px 20px -8px rgba(0,0,0,.30); --shadow-md: 0 2px 4px rgba(0,0,0,.46), 0 8px 16px -4px rgba(0,0,0,.40), 0 24px 40px -16px rgba(0,0,0,.44); --shadow-lg: 0 3px 6px rgba(0,0,0,.50), 0 14px 28px -6px rgba(0,0,0,.46), 0 40px 64px -24px rgba(0,0,0,.56); --shadow-xl: 0 4px 8px rgba(0,0,0,.54), 0 20px 40px -8px rgba(0,0,0,.50), 0 56px 88px -32px rgba(0,0,0,.64); --shadow-hairline: 0 1px 0 rgba(0,0,0,.55); --shadow-inset-top: inset 0 1px 0 rgba(158,232,245,.14); --shadow-ring: 0 0 0 3px rgba(158,232,245,.45); --shadow-ring-strong: 0 0 0 3px rgba(169,236,246,.90); --grad-surface: linear-gradient(180deg, #202735 0%, #1a212c 100%); --grad-surface-raised: linear-gradient(180deg, #242c3b 0%, #1c2431 100%); --grad-surface-sunk: linear-gradient(180deg, #151b24 0%, #1a2029 100%); --grad-section: linear-gradient(135deg, #1c2c39 0%, #16242e 62%, #282332 100%); --grad-accent-wash: radial-gradient(ellipse 70% 55% at 50% 12%, rgba(158,232,245,.12) 0%, rgba(158,232,245,0) 70%), radial-gradient(ellipse 55% 45% at 82% 68%, rgba(243,166,220,.09) 0%, rgba(243,166,220,0) 72%); --grad-ink: linear-gradient(160deg, #0e141b 0%, #0a0f15 100%); } :root[data-theme="light"]{ --shadow-hue: 22, 58, 77; --shadow-inset-top: inset 0 1px 0 rgba(255,255,255,.72); --grad-surface: linear-gradient(180deg, #ffffff 0%, #f3fbff 100%); --grad-surface-raised: linear-gradient(180deg, #ffffff 0%, #eef8fd 100%); --grad-surface-sunk: linear-gradient(180deg, #eef7fb 0%, #f7fcff 100%); --grad-section: linear-gradient(135deg, #f6fbff 0%, #eaf8fb 62%, #f8edf6 100%); --grad-accent-wash: radial-gradient(ellipse 70% 55% at 50% 12%, rgba(158,232,245,.30) 0%, rgba(158,232,245,0) 70%), radial-gradient(ellipse 55% 45% at 82% 68%, rgba(243,166,220,.18) 0%, rgba(243,166,220,0) 72%); --grad-ink: linear-gradient(160deg, #16222c 0%, #101720 100%); } /* ============================================================ LEGACY ALIASES — every pre-existing shadow name resolves into the ramp above, so the token layer is the single source even for rules written in earlier rounds. Defined here and re-asserted at the end of mechanics.css (last sheet wins). ============================================================ */ :root{ --shadow: var(--shadow-sm); --elev-1: var(--shadow-sm); --elev-2: var(--shadow-md); --elev-3: var(--shadow-lg); --e1: var(--shadow-sm); --e2: var(--shadow-md); --e3: var(--shadow-lg); --object-shadow: var(--shadow-md); --v8-shadow: var(--shadow-md); --service-shadow: var(--shadow-md); } @media (prefers-reduced-motion: reduce){ :root{ --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-reveal: 0ms; --lift-sm: 0px; --lift-md: 0px; --lift-lg: 0px; --press: 0px; } }