/* src/styles/variables.css */ /* Light Theme */ :root[data-ex-theme="light"] { --ex-bg-body: white; --ex-text-body: black; --ex-nav-link-color: black; --ex-nav-link-color-hover: #1F4277; --ex-heading-text-color: #1F4277; --ex-logo-color: black; --ex-logo-color-hover: #1F4277; --ex-btn-color: #1F4277; --ex-border-color: #1F4277; --ex-gradient-overlay-opaque: rgba(255, 255, 255, 0.95); --ex-gradient-overlay-fade: rgba(255, 255, 255, 0.15); --ex-badge-bg: rgba(0, 0, 0, 0.04); --ex-badge-bg-hover: rgba(0, 0, 0, 0.08); } /* Dark Theme */ :root[data-ex-theme="dark"] { --ex-bg-body: black; --ex-text-body: white; --ex-nav-link-color: white; --ex-nav-link-color-hover: #1F4277; --ex-heading-text-color: #1F4277; --ex-logo-color: white; --ex-logo-color-hover: #1F4277; --ex-btn-color: white; --ex-border-color: white; --ex-gradient-overlay-opaque: rgba(0, 0, 0, 0.95); --ex-gradient-overlay-fade: rgba(0, 0, 0, 0.15); --ex-badge-bg: rgba(255, 255, 255, 0.05); --ex-badge-bg-hover: rgba(255, 255, 255, 0.10); } /* ── Strata component tokens ─────────────────────────────────── */ /* Direct values so strata component classes render in this */ /* project's design language. Override the delta per component. */ :root { --st-primary: #6699CC; --st-primary-hover: #f7d46a; --st-secondary: rgba(255, 255, 255, 0.55); --st-secondary-hover: rgba(255, 255, 255, 0.70); --st-bg: #000000; --st-bg-secondary: rgba(255, 255, 255, 0.05); --st-text: #ffffff; --st-text-muted: rgba(180, 200, 255, 0.38); --st-border: rgba(255, 255, 255, 0.08); --st-light: rgba(255, 255, 255, 0.10); --st-dark: #000000; --st-border-radius: 10px; --st-shadow-sm: none; --st-shadow: none; --st-shadow-lg: none; --st-duration: 300ms; --st-duration-fast: 300ms; --st-duration-slow: 900ms; --st-easing: cubic-bezier(0.4, 0, 0.2, 1); --st-focus-ring: 0 0 0 2px rgba(245, 200, 66, 0.50); --st-font-family: "Exo 2", sans-serif; --st-font-size-base: 14px; --st-font-weight-base: 400; --st-heading-weight: 700; --st-line-height-base: 1.6; } /* Base tokens */ :root { /* color */ --ex-transparent: transparent; /* pure color references */ --ex-color-white: #ffffff; --ex-color-black: #000000; /* color palette */ --ex-color-accent: #6699CC; --ex-color-accent-mid: rgba(245, 200, 66, 0.50); --ex-color-accent-dim: rgba(245, 200, 66, 0.15); --ex-color-overlay: rgba(0, 0, 0, 0.45); --ex-color-border-faint: rgba(255, 255, 255, 0.08); --ex-color-white-mid: rgba(255, 255, 255, 0.55); --ex-color-white-dim: rgba(255, 255, 255, 0.40); --ex-color-white-faint: rgba(255, 255, 255, 0.03); --ex-color-nebula-body: rgba(200, 220, 255, 0.65); --ex-color-nebula-label: rgba(140, 160, 220, 0.70); --ex-color-nebula-muted: rgba(180, 200, 255, 0.38); /* white overlay alpha scale */ --ex-color-white-a04: rgba(255, 255, 255, 0.04); --ex-color-white-a05: rgba(255, 255, 255, 0.05); --ex-color-white-a06: rgba(255, 255, 255, 0.06); --ex-color-white-a10: rgba(255, 255, 255, 0.10); --ex-color-white-a12: rgba(255, 255, 255, 0.12); --ex-color-white-a16: rgba(255, 255, 255, 0.16); --ex-color-white-a24: rgba(255, 255, 255, 0.24); --ex-color-white-a30: rgba(255, 255, 255, 0.30); /* black overlay alpha scale */ --ex-color-black-a20: rgba(0, 0, 0, 0.20); --ex-color-black-a50: rgba(0, 0, 0, 0.50); --ex-color-black-a55: rgba(0, 0, 0, 0.55); --ex-color-black-a85: rgba(0, 0, 0, 0.85); /* footer button */ --ex-color-footer-btn-bg: rgba(8, 6, 2, 0.60); --ex-color-footer-btn-bg-hover: rgba(30, 20, 5, 0.80); /* Article category label colours */ --ex-color-cat-development: #8b5cf6; --ex-color-cat-design: #f59e0b; --ex-color-cat-technology: #3b82f6; --ex-color-cat-life: #10b981; /* planet colors — Sun */ --ex-color-sun-hi: rgba(255, 200, 80, 0.95); --ex-color-sun-lo: rgba(255, 120, 20, 0.95); --ex-color-sun-border: rgba(255, 200, 80, 0.30); --ex-color-sun-border-inner: rgba(255, 200, 80, 0.20); --ex-color-sun-label: rgba(255, 200, 80, 0.65); --ex-color-sun-bg: rgba( 15, 8, 0, 0.65); --ex-color-sun-pill-bg: rgba(255, 200, 80, 0.05); --ex-color-sun-tip-fade: rgba(255, 243, 196, 0.15); --ex-color-sun-tip-fill: rgba(255, 180, 100, 0.95); --ex-color-sun-text-hi: rgba(100, 55, 0, 0.95); --ex-color-sun-text-lo: rgba( 60, 25, 0, 0.95); /* planet colors — Mercury */ --ex-color-mercury-hi: rgba(210, 195, 175, 0.95); --ex-color-mercury-lo: rgba(150, 135, 120, 0.95); --ex-color-mercury-border: rgba(210, 195, 175, 0.30); --ex-color-mercury-border-inner: rgba(210, 195, 175, 0.20); --ex-color-mercury-label: rgba(210, 195, 175, 0.60); --ex-color-mercury-bg: rgba( 8, 8, 10, 0.65); --ex-color-mercury-pill-bg: rgba(210, 195, 175, 0.04); --ex-color-mercury-tip-fade: rgba(160, 140, 120, 0.05); --ex-color-mercury-tip-fill: rgba(140, 120, 100, 0.35); --ex-color-mercury-text-hi: rgba(200, 185, 165, 0.95); --ex-color-mercury-text-lo: rgba(120, 100, 80, 0.95); /* planet colors — Venus */ --ex-color-venus-orange: rgba(255, 140, 40, 0.95); --ex-color-venus-hi: rgba(240, 200, 80, 0.95); --ex-color-venus-lo: rgba(180, 120, 20, 0.95); --ex-color-venus-border: rgba(240, 200, 80, 0.35); --ex-color-venus-border-inner: rgba(240, 200, 80, 0.20); --ex-color-venus-label: rgba(240, 200, 80, 0.70); --ex-color-venus-bg: rgba( 20, 10, 0, 0.60); --ex-color-venus-pill-bg: rgba(240, 200, 80, 0.05); --ex-color-venus-tip-fade: rgba(210, 140, 50, 0.05); --ex-color-venus-tip-fill: rgba(195, 155, 60, 0.35); --ex-color-venus-text-hi: rgba(220, 170, 70, 0.95); --ex-color-venus-text-lo: rgba(160, 110, 35, 0.95); /* planet colors — Earth */ --ex-color-earth-hi: rgba( 80, 200, 255, 0.95); --ex-color-earth-lo: rgba( 20, 100, 200, 0.95); --ex-color-earth-border: rgba( 80, 200, 255, 0.30); --ex-color-earth-border-inner: rgba( 80, 200, 255, 0.20); --ex-color-earth-label: rgba( 80, 200, 255, 0.60); --ex-color-earth-bg: rgba( 0, 5, 15, 0.65); --ex-color-earth-pill-bg: rgba( 80, 200, 255, 0.05); --ex-color-earth-tip-fade: rgba( 30, 100, 180, 0.05); --ex-color-earth-tip-fill: rgba( 20, 140, 80, 0.35); --ex-color-earth-text-hi: rgba( 80, 180, 240, 0.95); --ex-color-earth-text-lo: rgba( 30, 160, 90, 0.95); /* planet colors — Mars */ --ex-color-mars-hi: rgba(230, 100, 50, 0.95); --ex-color-mars-lo: rgba(140, 40, 10, 0.95); --ex-color-mars-border: rgba(230, 100, 50, 0.30); --ex-color-mars-border-inner: rgba(230, 100, 50, 0.20); --ex-color-mars-label: rgba(230, 100, 50, 0.65); --ex-color-mars-bg: rgba( 15, 4, 0, 0.65); --ex-color-mars-pill-bg: rgba(230, 100, 50, 0.05); --ex-color-mars-tip-fade: rgba(180, 60, 20, 0.05); --ex-color-mars-tip-fill: rgba(160, 80, 30, 0.35); /* planet colors — Jupiter */ --ex-color-jupiter-hi: rgba(230, 190, 130, 0.95); --ex-color-jupiter-lo: rgba(160, 100, 50, 0.95); --ex-color-jupiter-border: rgba(230, 190, 130, 0.30); --ex-color-jupiter-border-inner: rgba(230, 190, 130, 0.20); --ex-color-jupiter-label: rgba(230, 190, 130, 0.60); --ex-color-jupiter-bg: rgba( 12, 8, 2, 0.65); --ex-color-jupiter-pill-bg: rgba(230, 190, 130, 0.05); --ex-color-jupiter-tip-fade: rgba(200, 160, 100, 0.05); --ex-color-jupiter-tip-fill: rgba(180, 130, 80, 0.35); /* planet colors — Saturn */ --ex-color-saturn-hi: rgba(230, 210, 140, 0.95); --ex-color-saturn-lo: rgba(160, 130, 60, 0.95); --ex-color-saturn-border: rgba(230, 210, 140, 0.30); --ex-color-saturn-border-inner: rgba(230, 210, 140, 0.20); --ex-color-saturn-label: rgba(230, 210, 140, 0.60); --ex-color-saturn-bg: rgba( 12, 10, 2, 0.65); --ex-color-saturn-pill-bg: rgba(230, 210, 140, 0.05); --ex-color-saturn-tip-fade: rgba(200, 180, 100, 0.05); --ex-color-saturn-tip-fill: rgba(180, 160, 80, 0.35); /* planet colors — Uranus */ --ex-color-uranus-hi: rgba(100, 220, 230, 0.95); --ex-color-uranus-lo: rgba( 30, 140, 150, 0.95); --ex-color-uranus-border: rgba(100, 220, 230, 0.30); --ex-color-uranus-border-inner: rgba(100, 220, 230, 0.20); --ex-color-uranus-label: rgba(100, 220, 230, 0.60); --ex-color-uranus-bg: rgba( 0, 8, 10, 0.65); --ex-color-uranus-pill-bg: rgba(100, 220, 230, 0.05); --ex-color-uranus-tip-fade: rgba( 50, 180, 190, 0.05); --ex-color-uranus-tip-fill: rgba( 40, 160, 170, 0.35); /* planet colors — Neptune */ --ex-color-neptune-hi: rgba( 80, 130, 255, 0.95); --ex-color-neptune-lo: rgba( 20, 50, 180, 0.95); --ex-color-neptune-border: rgba( 80, 130, 255, 0.30); --ex-color-neptune-border-inner: rgba( 80, 130, 255, 0.20); --ex-color-neptune-label: rgba( 80, 130, 255, 0.60); --ex-color-neptune-bg: rgba( 0, 2, 15, 0.65); --ex-color-neptune-pill-bg: rgba( 80, 130, 255, 0.05); --ex-color-neptune-tip-fade: rgba( 20, 60, 200, 0.05); --ex-color-neptune-tip-fill: rgba( 30, 80, 210, 0.35); /* planet glow colors — used for hover box-shadow on explore buttons */ --ex-color-sun-glow: rgba(255, 180, 100, 0.9); --ex-color-mercury-glow: rgba(200, 185, 165, 0.9); --ex-color-venus-glow: rgba(220, 170, 70, 0.9); --ex-color-earth-glow: rgba( 80, 180, 240, 0.9); --ex-color-mars-glow: rgba(230, 100, 50, 0.9); --ex-color-jupiter-glow: rgba(230, 190, 130, 0.9); --ex-color-saturn-glow: rgba(230, 210, 140, 0.9); --ex-color-uranus-glow: rgba(100, 220, 230, 0.9); --ex-color-neptune-glow: rgba( 80, 130, 255, 0.9); /* tooltip gradient color stops */ --ex-color-tooltip-fade: rgba(255, 245, 235, 0.15); --ex-color-tooltip-opaque: rgba(255, 245, 235, 0.95); /* font family */ --ex-font-main: "Exo 2", sans-serif; /* webkit */ --ex--webkit-font-smoothing: antialiased; --ex--webkit-tap-highlight-color: transparent; /* font size scale */ --ex-font-size-xxxs: 10px; --ex-font-size-xxs: 11px; --ex-font-size-xs: 12px; --ex-font-size-sm: 14px; --ex-font-size-default: 14px; --ex-font-size-md: 22px; --ex-font-size-lg: 24px; --ex-font-size-xl: 32px; --ex-font-size-xxl: 48px; --ex-font-size-xxxl: 64px; /* font weight scale — numeric only */ --ex-para-font-weight: 400; --ex-font-weight-medium: 500; --ex-font-weight-semibold: 600; --ex-heading-font-weight: 700; --ex-font-weight-heavy: 800; /* letter spacing scale */ --ex-tracking-tight: -0.02em; --ex-tracking-sm: 0.06em; --ex-tracking-md: 0.12em; --ex-tracking-lg: 0.18em; --ex-tracking-xl: 0.22em; /* opacity scale */ --ex-opacity-faint: 0.50; --ex-opacity-low: 0.55; --ex-opacity-body: 0.80; --ex-opacity-mid: 0.70; --ex-opacity-high: 0.80; /* spacing scale */ --ex-space-xxxs: 2px; --ex-space-xxs: 4px; --ex-space-xs: 8px; --ex-space-sm: 12px; --ex-space-default:16px; --ex-space-md: 24px; --ex-space-lg: 32px; --ex-space-xl: 48px; --ex-space-xxl: 64px; --ex-space-xxxl: 80px; /* fixed size scale — width, height, min-width, min-height, max-width, max-height */ --ex-size-xxxs: 24px; --ex-size-xxs: 48px; --ex-size-xs: 80px; --ex-size-sm: 140px; --ex-size-default: 180px; --ex-size-md: 240px; --ex-size-lg: 300px; --ex-size-xl: 400px; --ex-size-xxl: 520px; --ex-size-xxxl: 740px; /* fixed size scale — specific values (ordinal naming does not scale to these granularities) */ --ex-size-6: 6px; --ex-size-8: 8px; --ex-size-15: 15px; --ex-size-20: 20px; --ex-size-25: 25px; --ex-size-32: 32px; --ex-size-34: 34px; --ex-size-36: 36px; --ex-size-40: 40px; --ex-size-50: 50px; --ex-size-120: 120px; --ex-size-280: 280px; --ex-size-380: 380px; --ex-size-420: 420px; --ex-size-540: 540px; --ex-size-560: 560px; --ex-size-1200: 1200px; --ex-size-1280: 1280px; /* viewport-relative scroll headroom — space past the last scrollable item so scrollIntoView() has room to reach its target position */ --ex-scroll-headroom-sm: 40dvh; --ex-scroll-headroom-lg: 50dvh; /* border radius */ --ex-border-radius-outer: 10px; --ex-border-radius-full: 9999px; --ex-border-radius-round: 50%; /* buttons */ --ex-btn-color-white: white; --ex-btn-color-white-active: blueviolet; /* transition durations — ordinal scale (all ms) */ --ex-duration-xs: 300ms; /* snap — hover colours, scale */ --ex-duration-sm: 400ms; /* slide — panels, header */ --ex-duration-md: 550ms; /* reveal — veil out, overlays */ --ex-duration-lg: 900ms; /* tempo — nav links, shadows */ --ex-duration-xl: 1200ms; /* sweep — scene animations */ /* semantic aliases — point to scale; never use raw values outside this block */ --ex-duration-fast: var(--ex-duration-xs); --ex-duration-mid: var(--ex-duration-lg); --ex-duration-slow: var(--ex-duration-xl); --ex-duration-veil-in: var(--ex-duration-xs); --ex-duration-veil-out: var(--ex-duration-md); --ex-duration-header: var(--ex-duration-sm); --ex-duration-hide: 4000ms; /* JS idle timer — no CSS analogue */ /* z-index scale — fixed UI chrome above canvases/overlays, below the warp veil */ --ex-z-badge: 2; /* easing curves */ --ex-ease-ui: cubic-bezier(0.4, 0, 0.2, 1); /* blur scale */ --ex-blur-glass: 12px; /* shadows */ --ex-drop-shadow: 0 0px 10px rgba(0, 0, 0, 0); --ex-drop-shadow-focus-hover: 0 0 10px rgba(255, 255, 255, 1); /* svg paths */ --ex-path-minus: path("M0,10 L10,10 C12,10 13,10 15,10 S18,10 20,10 S23,10 25,10 S28,10 30,10 L40,10"); --ex-path-wave: path("M0,10 L10,10 C12,10 13,2 15,2 S18,18 20,18 S23,2 25,2 S28,10 30,10 L40,10"); /* css animation */ --ex-wave-speed: 5.5s; --ex-dash-array-gap: 12; --ex-dash-array-straight: 120; }