/* ============================================================================ OUTLEX DESIGN SYSTEM — v3 "Gravity" token layer Additive on top of tokens-v2.css (--ox-*). Nothing removed; v2 semantics stay valid. This layer codifies what v2 lacked: scene staging, machined controls, the color law, life signals, and light-sweep motion. Direction locked from the 6A "Gravity · Warm" mockup, July 2026. ============================================================================ */ :root { /* ---- SCENE (the stage every marketing/hero surface sits on) ---- Not pitch black. Deep slate with a cool drift and a top key-light. */ --ox-scene-bg: radial-gradient(130% 90% at 50% -10%, oklch(0.185 0.008 200deg) 0%, oklch(0.125 0.008 220deg) 48%, oklch(0.085 0.007 250deg) 100%); --ox-scene-keylight: radial-gradient(50% 50% at 50% 50%, rgba(240,237,232,0.06) 0%, transparent 70%); /* Ambient tints — life you feel, not see. Two per scene max, 11s breathe. */ --ox-ambient-sage: radial-gradient(circle, rgba(123,160,129,0.10) 0%, transparent 70%); --ox-ambient-blue: radial-gradient(circle, rgba(48,106,239,0.07) 0%, transparent 70%); --ox-ambient-blur: 110px; --ox-ambient-cycle: 11s; /* Horizon — the section divider of the brand. 1px light + soft under-glow. */ --ox-horizon-line: linear-gradient(90deg, transparent 4%, rgba(235,238,242,0.38) 30%, rgba(245,247,248,0.5) 50%, rgba(235,238,242,0.38) 70%, transparent 96%); --ox-horizon-glow: radial-gradient(55% 60% at 50% 50%, rgba(220,228,236,0.09) 0%, transparent 70%); --ox-horizon-line-light: linear-gradient(90deg, transparent 4%, rgba(35,31,32,0.22) 30%, rgba(35,31,32,0.34) 50%, rgba(35,31,32,0.22) 70%, transparent 96%); /* ---- MACHINED CONTROLS (the 3D grammar) ---- Every raised control = surface gradient + dark seat border + inset top light + inset bottom shade + letterpress text. */ --ox-btn-primary-bg: linear-gradient(180deg,#84AA8B 0%,#5E8065 55%,#527258 100%); --ox-btn-primary-border: rgba(0,0,0,0.5); --ox-btn-primary-fg: #F0EDE8; --ox-btn-letterpress: 0 1px 1px rgba(0,0,0,0.32); --ox-btn-primary-shadow: inset 0 1px 0 rgba(255,255,255,0.42), inset 0 -2px 3px rgba(0,0,0,0.30), 0 1px 1px rgba(0,0,0,0.5), 0 12px 28px -8px rgba(95,130,102,0.55), 0 28px 56px -16px rgba(0,0,0,0.7); --ox-btn-primary-shadow-hover: inset 0 1px 0 rgba(255,255,255,0.48), inset 0 -2px 3px rgba(0,0,0,0.26), 0 2px 2px rgba(0,0,0,0.5), 0 16px 36px -8px rgba(95,130,102,0.65), 0 34px 68px -16px rgba(0,0,0,0.7); /* Press: translateY(1px) + brightness(0.94). Hover: translateY(-2px) + brightness(1.07). */ --ox-btn-glass-bg: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)); --ox-btn-glass-border: rgba(255,255,255,0.14); --ox-btn-glass-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 2px 6px rgba(0,0,0,0.4); --ox-btn-machined-light-bg: linear-gradient(180deg,#FFFFFF,#F4F1EC); --ox-btn-machined-light-border: #DCD5CA; --ox-btn-machined-light-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 2px rgba(45,38,28,0.08), 0 3px 8px rgba(45,38,28,0.07); /* ---- NAV (floating pill bar) ---- */ --ox-nav-bg: rgba(255,255,255,0.045); --ox-nav-border: rgba(255,255,255,0.09); --ox-nav-blur: 14px; --ox-nav-active-bg: rgba(255,255,255,0.10); --ox-nav-radius: 9999px; /* ---- LIFE SIGNALS (the only colour inside monochrome scenes) ---- */ --ox-life-teal: #54D6A4; /* AI pulse dot — always animated when live */ --ox-life-dot: 5px; --ox-dot-high: oklch(0.70 0.15 28deg); --ox-dot-review: oklch(0.78 0.14 75deg); --ox-dot-ready: oklch(0.75 0.09 150deg); /* Ring: gradient #306AEF→#54D6A4 stroke, r42/c264, fill via dashoffset. */ --ox-ring-track-dark: rgba(255,255,255,0.09); --ox-ring-track-light: rgba(35,31,32,0.08); /* ---- SAGE PHRASE (hero italic — one per page) ---- */ --ox-phrase-sage-shine: linear-gradient(105deg, #7FB48A 42%, #C4E3C9 50%, #7FB48A 58%); --ox-phrase-ink-shine: linear-gradient(105deg, #4A4641 42%, #A79E8F 50%, #4A4641 58%); /* background-size: 250% 100%; background-clip: text; animation: ox-shine 7s. */ /* ---- PRODUCT THEATER ---- */ --ox-frame-tilt: perspective(1900px) rotateX(8deg); --ox-frame-tilt-hover: perspective(1900px) rotateX(3deg); --ox-frame-bg: linear-gradient(180deg, oklch(0.155 0.006 290deg / 0.94), oklch(0.11 0.006 290deg / 0.97)); --ox-frame-border: rgba(255,255,255,0.09); --ox-frame-shadow: inset 0 1px 0 rgba(255,255,255,0.11), 0 2px 4px rgba(0,0,0,0.5), 0 24px 60px rgba(0,0,0,0.6), 0 70px 160px rgba(0,0,0,0.55); --ox-frame-floor: radial-gradient(50% 100% at 50% 0%, rgba(0,0,0,0.75) 0%, transparent 75%); --ox-sheen: linear-gradient(90deg, transparent, rgba(255,255,255,0.045) 45%, rgba(255,255,255,0.085) 50%, rgba(255,255,255,0.045) 55%, transparent); /* ---- MOTION ---- */ --ox-shine-cycle: 7s; /* phrase light sweep */ --ox-sheen-cycle: 12s; /* frame specular pass */ --ox-theater-cycle: 18s; /* artifact demo loop */ --ox-breathe-cycle: 4s; /* mark glow */ } /* Canonical keyframes (names are API — do not rename) */ @keyframes ox-shine{0%,55%{background-position:100% 0;}90%,100%{background-position:0% 0;}} @keyframes ox-sheen{0%,58%{transform:translateX(-140%) skewX(-18deg);}78%,100%{transform:translateX(160%) skewX(-18deg);}} @keyframes ox-ambient{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.65;transform:scale(1.07);}} @keyframes ox-horizon{0%,100%{opacity:0.75;}50%{opacity:1;}} @keyframes ox-teal-pulse{0%,100%{opacity:.7;transform:scale(1);}50%{opacity:1;transform:scale(1.25);}} @keyframes ox-caret{0%,45%{opacity:1;}50%,95%{opacity:0;}100%{opacity:1;}} @keyframes ox-breathe{0%,100%{filter:drop-shadow(0 0 32px oklch(0.57 0.15 270deg / 0.6));}50%{filter:drop-shadow(0 0 32px rgba(84,214,164,0.55));}} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;} } /* ============================================================================ THEMED ALIASES + LIGHT "GALLERY" THEME Everything ABOVE this line is verbatim from the locked 6A handoff (July 2026) — do not edit values there. This block is the repo-side extension that wires v3 into v2's [data-theme] mechanism (GRAMMAR-v3 §7: dark is the theater, light is the gallery; every pattern ships in both themes). LOCKED-IDENTICAL in both themes (per GRAMMAR-v3 §7): the sage CTA (--ox-btn-primary-*), the letterpress, and all life signals (--ox-life-teal, --ox-dot-*, ring gradient). DERIVED values below (marked ~) extend the locked direction to light using v2's light-theme ladder (warm cream oklch(0.962 0.010 80deg), ink #231F20, warm rgba(45,38,28,…) shadows). Tune on founder review; keep warm, never cold rgba(0,0,0) on light (GRAMMAR-v3 §8). ============================================================================ */ :root { /* Theme-neutral aliases — consumers use these; themed blocks remap them. */ --ox-ring-track: var(--ox-ring-track-dark); --ox-phrase-shine: var(--ox-phrase-sage-shine); /* dark: sage phrase */ --ox-horizon: var(--ox-horizon-line); --ox-btn-secondary-bg: var(--ox-btn-glass-bg); --ox-btn-secondary-border: var(--ox-btn-glass-border); --ox-btn-secondary-shadow: var(--ox-btn-glass-shadow); --ox-btn-secondary-fg: oklch(0.92 0.004 90deg); } [data-theme="light"] { /* ---- SCENE → GALLERY (~ derived from v2 light surface-0 warm cream) ---- */ --ox-scene-bg: radial-gradient(130% 90% at 50% -10%, oklch(0.976 0.008 85deg) 0%, oklch(0.962 0.010 80deg) 48%, oklch(0.944 0.012 78deg) 100%); --ox-scene-keylight: radial-gradient(50% 50% at 50% 50%, rgba(255,252,244,0.65) 0%, transparent 70%); /* ~ warm sun key */ /* Ambient tints — bumped presence on light (v2 rule: FELT, not absent) ~ */ --ox-ambient-sage: radial-gradient(circle, rgba(123,160,129,0.14) 0%, transparent 70%); --ox-ambient-blue: radial-gradient(circle, rgba(48,106,239,0.09) 0%, transparent 70%); /* Horizon — ink hairline + warm sun under-glow (GRAMMAR-v3 §2) */ --ox-horizon: var(--ox-horizon-line-light); --ox-horizon-glow: radial-gradient(55% 60% at 50% 50%, rgba(214,178,116,0.12) 0%, transparent 70%); /* ~ warm sun glow */ /* Secondary control on light = white machined (GRAMMAR-v3 §3) */ --ox-btn-secondary-bg: var(--ox-btn-machined-light-bg); --ox-btn-secondary-border: var(--ox-btn-machined-light-border); --ox-btn-secondary-shadow: var(--ox-btn-machined-light-shadow); --ox-btn-secondary-fg: #231F20; /* ---- NAV — ink-ghost pill bar on paper (~ derived) ---- */ --ox-nav-bg: rgba(35,31,32,0.035); --ox-nav-border: rgba(35,31,32,0.10); --ox-nav-active-bg: rgba(255,255,255,0.85); /* ---- LIFE SIGNALS — ring track only (dots + teal identical) ---- */ --ox-ring-track: var(--ox-ring-track-light); /* ---- SAGE PHRASE → INK PHRASE on paper (sage lacks contrast on cream) ---- */ --ox-phrase-shine: var(--ox-phrase-ink-shine); /* ---- PRODUCT THEATER — white gallery frame, warm shadows (~ derived) ---- */ --ox-frame-bg: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,247,242,0.98)); --ox-frame-border: #DCD5CA; --ox-frame-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 2px 4px rgba(45,38,28,0.10), 0 24px 60px rgba(45,38,28,0.14), 0 70px 160px rgba(45,38,28,0.10); --ox-frame-floor: radial-gradient(50% 100% at 50% 0%, rgba(45,38,28,0.30) 0%, transparent 75%); --ox-sheen: linear-gradient(90deg, transparent, rgba(255,255,255,0.35) 45%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0.35) 55%, transparent); }