/*=============================================================== LUNEXO — DESIGN TOKENS (single source of truth for colors) --------------------------------------------------------------- This file is loaded LAST on every page so it overrides the legacy :root values in style.css/header.css/etc. • :root → DARK theme (default) • [data-theme=light] → LIGHT theme overrides • js/theme.js sets + persists it RULE: never hardcode a color anywhere else. Add it here as a --token and reference it with var(--token). One place to see every color the site uses. ================================================================*/ :root { /*========== BRAND / ACCENT ==========*/ --accent-h: 355; --accent-s: 70%; --accent-l: 58%; --first-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); --first-color-alt: hsl(var(--accent-h), 66%, 54%); --first-color-light: hsl(var(--accent-h), 62%, 62%); --first-color-lighten: hsl(var(--accent-h), 100%, 97%); --accent-rgb: 212, 64, 80; /* rgb of --first-color, for rgba() glows */ --accent-soft: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.12); /* secondary accent (cool) — used by AI / web surfaces & gradients */ --second-color: hsl(212, 85%, 58%); --second-rgb: 40, 130, 235; /*========== SURFACES ==========*/ --body-color: hsl(228, 4%, 8%); /* page background */ --body-color-2: hsl(228, 5%, 11%); /* alt section bg */ --container-color: hsl(228, 4%, 15%); /* cards / panels */ --container-color-2: hsl(228, 5%, 18%); /* raised surface */ --elevated-color: hsl(228, 6%, 21%); /*========== TEXT ==========*/ --title-color: hsl(228, 8%, 98%); --text-color: hsl(228, 8%, 72%); --text-color-light: hsl(228, 6%, 55%); --text-on-accent: hsl(0, 0%, 100%); /*========== LINES / BORDERS ==========*/ --border-color: hsl(228, 4%, 25%); --border-soft: hsla(0, 0%, 100%, 0.10); --border-faint: hsla(0, 0%, 100%, 0.06); /*========== GLASS / OVERLAY ==========*/ --glass-bg: hsla(228, 4%, 15%, 0.30); --glass-bg-strong: hsla(228, 6%, 10%, 0.80); --glass-border: hsla(0, 0%, 100%, 0.10); --overlay-dark: hsla(228, 10%, 4%, 0.55); /* media scrims */ --overlay-grad: linear-gradient(180deg, transparent 0%, hsla(228,10%,4%,0.85) 100%); --hairline: hsla(0, 0%, 100%, 0.08); /*========== MEDIA (text & scrims over photos / video — dark in BOTH themes) ==========*/ --text-on-media: hsl(0, 0%, 100%); --text-on-media-soft: hsla(0, 0%, 100%, 0.82); /* body copy on a dark scrim (both themes) */ --media-scrim-strong: hsla(0, 0%, 0%, 0.80); --media-scrim-mid: hsla(0, 0%, 0%, 0.55); --media-scrim-soft: hsla(0, 0%, 0%, 0.30); /*========== SHIMMER HEADING GRADIENT (clipped to text) ==========*/ --text-gradient-bg: linear-gradient(to right, #e0e0e0, #d6d6d6, #bfbfbf, #a8a8a8, #d6d6d6, #e0e0e0); /*========== CINEMATIC SHOWCASE (portfolio gallery — dark in BOTH themes) ==========*/ --cine-bg: #000; --cine-surface: #0a0a0c; --cine-surface-2: #16161a; --cine-surface-3: #1d1d22; --cine-text: hsl(0, 0%, 100%); --cine-grid: rgba(255, 255, 255, 0.03); --cine-glass: rgba(8, 8, 12, 0.72); --cine-border: rgba(255, 255, 255, 0.12); --cine-border-soft: rgba(255, 255, 255, 0.07); --cine-glass-soft: rgba(255, 255, 255, 0.04); --cine-text-grad: linear-gradient(to right, #fff, #bbb); /* light heading on dark */ --cine-text-dim: rgba(255, 255, 255, 0.60); /* Shop / product (Lunexo Ring page — theme-invariant) */ --brand-amazon: #ff9900; --brand-amazon-alt: #e68a00; --metal-grad: linear-gradient(135deg, #b0b8c1, #e8e8e8); --metal-grad-hover: linear-gradient(135deg, #c8d0d8, #f0f0f0); /* Category accents (automation/tutorials agent types — theme-invariant) */ --c-purple: #a78bfa; --c-purple-rgb: 167, 139, 250; --c-purple-light: #c4b5fd; --c-violet: #7c3aed; --c-violet-rgb: 139, 92, 246; --c-green: #86efac; --c-green-rgb: 134, 239, 172; --c-blue: #63b3ed; --c-blue-rgb: 99, 179, 237; --c-emerald-rgb: 34, 197, 94; --c-red-rgb: 255, 51, 51; --c-red400: #f87171; --c-red400-rgb: 248, 113, 113; --c-red500-rgb: 239, 68, 68; --c-darkred-rgb: 180, 0, 0; --c-pink400: #f472b6; --c-teal-rgb: 99, 202, 183; /* Social brand colors (channel cards — theme-invariant) */ --brand-ig-rgb: 228, 64, 95; --brand-ig-purple-rgb: 149, 52, 161; --brand-yt-rgb: 255, 0, 0; --brand-yt: #ff0000; /* Service-tier accents + terminal (openclaw page — theme-invariant) */ --oc-blue-h: 220; --oc-blue-s: 80%; --oc-green-h: 145; --oc-green-s: 60%; --term-green: #28c840; --term-green-soft: #7ec8a0; /*========== SHADOWS ==========*/ --shadow-sm: 0 4px 14px hsla(0, 0%, 0%, 0.30); --shadow-md: 0 10px 30px hsla(0, 0%, 0%, 0.35); --shadow-lg: 0 20px 60px hsla(0, 0%, 0%, 0.55); --shadow-accent: 0 8px 30px hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.35); /*========== GRADIENTS (decorative) ==========*/ --grad-hero: radial-gradient(ellipse at 20% 10%, var(--accent-soft) 0%, transparent 55%), radial-gradient(ellipse at 85% 90%, hsla(212,85%,58%,0.08) 0%, transparent 55%); /*========== MOTION ==========*/ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --t-fast: 0.18s; --t-base: 0.32s; --t-slow: 0.55s; /*========== RADii / SPACING (componentization) ==========*/ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px; /* Spacing scale — use these for gaps/padding in new/edited components */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem; color-scheme: dark; } /*=============================================================== LIGHT THEME ================================================================*/ [data-theme="light"] { --accent-l: 52%; /* slightly deeper red for contrast on white */ --first-color-lighten: hsl(var(--accent-h), 90%, 96%); --accent-soft: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.10); --second-color: hsl(212, 80%, 48%); --body-color: hsl(228, 20%, 98%); --body-color-2: hsl(228, 24%, 95%); --container-color: hsl(0, 0%, 100%); --container-color-2: hsl(228, 24%, 97%); --elevated-color: hsl(0, 0%, 100%); --title-color: hsl(228, 30%, 12%); --text-color: hsl(228, 18%, 24%); /* darker body text → stronger contrast on light sections */ --text-color-light: hsl(228, 13%, 37%); /* darker muted text so captions/meta stay legible */ --text-on-accent: hsl(0, 0%, 100%); --border-color: hsl(228, 16%, 82%); --border-soft: hsla(228, 30%, 12%, 0.10); --border-faint: hsla(228, 30%, 12%, 0.06); --glass-bg: hsla(0, 0%, 100%, 0.55); --glass-bg-strong: hsla(0, 0%, 100%, 0.85); --glass-border: hsla(228, 30%, 12%, 0.10); --overlay-dark: hsla(228, 20%, 10%, 0.45); --overlay-grad: linear-gradient(180deg, transparent 0%, hsla(228,20%,8%,0.70) 100%); --hairline: hsla(228, 30%, 12%, 0.08); /* media text/scrims stay dark-on-media in light theme too; only the clipped shimmer heading needs a dark gradient so it shows on white */ --text-gradient-bg: linear-gradient(to right, #3a3a42, #26262d, #131319, #26262d, #3a3a42); --shadow-sm: 0 4px 14px hsla(228, 30%, 30%, 0.10); --shadow-md: 0 10px 30px hsla(228, 30%, 30%, 0.14); --shadow-lg: 0 20px 60px hsla(228, 30%, 30%, 0.18); --shadow-accent: 0 8px 30px hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.25); --grad-hero: radial-gradient(ellipse at 20% 10%, var(--accent-soft) 0%, transparent 55%), radial-gradient(ellipse at 85% 90%, hsla(212,80%,55%,0.07) 0%, transparent 55%); color-scheme: light; } /* Smooth light/dark crossfade — enabled ONLY for ~0.5s while toggling (js/theme.js adds .theme-anim to ), so every surface, text, icon, border and shadow eases together instead of half-snapping. It is removed right after, so it never slows hovers or other interactions. */ html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color 0.5s var(--ease-in-out), background-image 0.5s var(--ease-in-out), color 0.5s var(--ease-in-out), border-color 0.5s var(--ease-in-out), fill 0.5s var(--ease-in-out), stroke 0.5s var(--ease-in-out), box-shadow 0.5s var(--ease-in-out), opacity 0.5s var(--ease-in-out), filter 0.5s var(--ease-in-out) !important; transition-delay: 0s !important; } /* Theme-aware media swap (video/img light↔dark): brief opacity crossfade instead of a hard cut. js/scroll-fx.js toggles .media-swapping. Scoped to the hero videos + about image (the only media with light variants) so it doesn't clobber the .card/.digital-section video hover transitions. */ .hero-panel video { transition: opacity 0.4s var(--ease-out), filter 0.5s var(--ease-out); } img[data-src-dark] { transition: opacity 0.4s var(--ease-out); } .media-swapping { opacity: 0 !important; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation-duration: 0.001ms !important; } } /* Body background driven by token (overrides hardcoded #000 in style.css) */ body { background-color: var(--body-color); } /*=============================================================== LIGHT-MODE VIDEO TREATMENT Until per-clip light variants exist (Higgsfield, swapped in by js/scroll-fx.js via data-src-light), brighten/soften the dark source footage so it reads as "light mode". A real light .mp4 on a