/* ============================================================================ * CB GALAXY DESIGN LANGUAGE — v692 / 2026-05-22 * * Universal premium design language extracted from the Galaxy color theme. * Applies the Galaxy spec to ALL themes (light · dark · ember · pink · cat · * galaxy) using each theme's own palette tokens. Each theme keeps its * personality; the design LANGUAGE becomes consistent. * * What this file ships, theme-agnostic: * 1. Ambient kinetic background — two drifting radial-gradient orbs * tinted in each theme's accent + accent2 colors * 2. Metallic gradient typography on h1 / display headings * 3. Glassmorphism stack on cards (uses existing --glass-* tokens) * 4. Physics-feel hover — 4px lift + 1% scale + accent-tinted shadow * 5. Micro-shimmer sweep across cards on hover (pure CSS, no JS) * 6. Premium CTA buttons with accent gradient + multi-layer glow * 7. Crystal edge specular pseudo-element on glass surfaces * * Loaded AFTER all theme CSS files so this design language wins ties. * Galaxy theme has its own deeper-spec file (cb-theme-galaxy.css) that * supersedes these defaults where they collide. * * Scoped CB Study only — AGENTS.md §3.6 (Business + NPTE unaffected). * ========================================================================== */ /* ────────────────────────────────────────────────────────────────────── * DESIGN TOKENS — each theme provides its own values * ──────────────────────────────────────────────────────────────────── */ :root { /* Sensible fallback values (Light theme defaults) — overridden per theme below */ --galaxy-orb-1: rgba(22, 101, 52, 0.07); --galaxy-orb-2: rgba(132, 204, 22, 0.04); --galaxy-metallic-start: #1c1917; --galaxy-metallic-end: #57534e; --galaxy-accent-glow: rgba(22, 101, 52, 0.18); --galaxy-shimmer: rgba(255, 255, 255, 0.08); --galaxy-ease: cubic-bezier(0.16, 1, 0.3, 1); } html[data-theme="light"] { --galaxy-orb-1: rgba(22, 101, 52, 0.05); --galaxy-orb-2: rgba(132, 204, 22, 0.03); --galaxy-metallic-start: #1c1917; --galaxy-metallic-end: #57534e; --galaxy-accent-glow: rgba(22, 101, 52, 0.16); --galaxy-shimmer: rgba(255, 255, 255, 0.45); /* visible on light bg */ } html[data-theme="dark"] { --galaxy-orb-1: rgba(74, 222, 128, 0.10); --galaxy-orb-2: rgba(34, 211, 238, 0.07); --galaxy-metallic-start: #ffffff; --galaxy-metallic-end: #94a3b8; --galaxy-accent-glow: rgba(74, 222, 128, 0.22); --galaxy-shimmer: rgba(255, 255, 255, 0.08); } html[data-theme="ember"] { --galaxy-orb-1: rgba(255, 77, 21, 0.14); --galaxy-orb-2: rgba(255, 179, 0, 0.08); --galaxy-metallic-start: #ffffff; --galaxy-metallic-end: #ffd7a8; --galaxy-accent-glow: rgba(255, 77, 21, 0.26); --galaxy-shimmer: rgba(255, 215, 168, 0.10); } html[data-theme="pink"] { --galaxy-orb-1: rgba(190, 24, 93, 0.06); --galaxy-orb-2: rgba(244, 114, 182, 0.04); --galaxy-metallic-start: #4a1c2b; --galaxy-metallic-end: #be185d; --galaxy-accent-glow: rgba(190, 24, 93, 0.18); --galaxy-shimmer: rgba(255, 255, 255, 0.35); } html[data-theme="cat"] { --galaxy-orb-1: rgba(194, 65, 12, 0.06); --galaxy-orb-2: rgba(234, 179, 8, 0.04); --galaxy-metallic-start: #3d2b1f; --galaxy-metallic-end: #c2410c; --galaxy-accent-glow: rgba(194, 65, 12, 0.18); --galaxy-shimmer: rgba(255, 255, 255, 0.32); } /* ────────────────────────────────────────────────────────────────────── * 1 · AMBIENT KINETIC BACKGROUND — two drifting orbs * * Galaxy theme already has its own body::before in cb-theme-galaxy.css — * we skip when [data-theme="galaxy"] is active. For all other themes, * we add the same kinetic pattern using their tokens. * * Blend mode: screen on dark themes (adds glow), multiply on light themes * (adds subtle shadow). We default to screen + low opacity which is * universally pleasing. * ──────────────────────────────────────────────────────────────────── */ body::before { content: ''; position: fixed; inset: -10%; pointer-events: none; z-index: 0; background: radial-gradient(circle 42vmin at 15% 22%, var(--galaxy-orb-1) 0%, transparent 70%), radial-gradient(circle 36vmin at 85% 78%, var(--galaxy-orb-2) 0%, transparent 70%); mix-blend-mode: screen; animation: galaxyOrbDrift 42s var(--galaxy-ease) infinite alternate; filter: blur(2px); } /* For light-bg themes, screen blend produces nothing visible. * Switch to multiply so the orbs DARKEN the bg slightly — a soft * vignette effect that adds depth without changing the light feel. */ html[data-theme="light"] body::before, html[data-theme="pink"] body::before, html[data-theme="cat"] body::before { mix-blend-mode: multiply; } @keyframes galaxyOrbDrift { 0% { transform: translate3d(0%, 0%, 0) scale(1); } 33% { transform: translate3d(3%, -2%, 0) scale(1.04); } 66% { transform: translate3d(-2%, 4%, 0) scale(0.98); } 100% { transform: translate3d(2%, 2%, 0) scale(1.02); } } @media (prefers-reduced-motion: reduce) { body::before { animation: none; } } /* ────────────────────────────────────────────────────────────────────── * 2 · METALLIC GRADIENT ON DISPLAY HEADINGS — v717 SCOPED TO GALAXY ONLY * * Was: — broadly applied a metallic * gradient + drop-shadow to .land-hero h1 + .land-stat-num on every * non-galaxy theme. This caused: * (a) weird halo artifacts at end of "smarter."/"faster." on Light * (drop-shadow + transparent text-fill cascade conflict) * (b) competing rules vs cb-glass.css v716 stat-num fix — was loaded * LAST so kept overriding the bar-vs-clipped-text fix despite * !important (same-specificity later cascade win on background * shorthand resetting background-clip). * * Now: /* ────────────────────────────────────────────────────────────────────── * 3 · GLASSMORPHISM ENHANCEMENT (uses existing --glass-* tokens) * * Every theme already defines --glass-tint via cb-glass.css. This block * adds the crystal edge specular highlight + ensures consistent border * radius + isolation context for the micro-shimmer pseudo to work. * ──────────────────────────────────────────────────────────────────── */ .glass, .feat-card, .audience-card, .aud-card, .module-card, .tile, .price-card, .land-pillar, .premium-card { isolation: isolate; overflow: hidden; transition: transform 320ms var(--galaxy-ease), box-shadow 320ms var(--galaxy-ease), border-color 320ms var(--galaxy-ease); } /* Crystal edge — masked specular highlight on top-left of every glass card */ .glass::after, .feat-card::after, .audience-card::after, .module-card::after, .tile::after, .price-card::after, .land-pillar::after, .premium-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 30%, transparent 70%); z-index: 1; } .glass > *, .feat-card > *, .premium-card > * { position: relative; z-index: 2; } /* ────────────────────────────────────────────────────────────────────── * 4 · PHYSICS-FEEL HOVER — 4px lift + 1% scale + accent shadow * ──────────────────────────────────────────────────────────────────── */ .feat-card:hover, .audience-card:hover, .aud-card:hover, .module-card:hover, .tile:hover, .price-card:hover, .land-pillar:hover, .premium-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18), 0 0 40px var(--galaxy-accent-glow), var(--glass-shadow, 0 4px 12px rgba(0, 0, 0, 0.12)); } @media (prefers-reduced-motion: reduce) { .feat-card:hover, .audience-card:hover, .module-card:hover, .tile:hover, .price-card:hover, .land-pillar:hover { transform: none; } } /* ────────────────────────────────────────────────────────────────────── * 5 · MICRO-SHIMMER — diagonal sheen sweeps on hover (pure CSS) * ──────────────────────────────────────────────────────────────────── */ .feat-card::before, .audience-card::before, .module-card::before, .tile::before, .price-card::before, .land-pillar::before, .premium-card::before { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(115deg, transparent 0%, var(--galaxy-shimmer) 50%, transparent 100%); transform: skewX(-18deg); pointer-events: none; z-index: 2; transition: left 420ms var(--galaxy-ease); } .feat-card:hover::before, .audience-card:hover::before, .module-card:hover::before, .tile:hover::before, .price-card:hover::before, .land-pillar:hover::before, .premium-card:hover::before { left: 125%; } /* ────────────────────────────────────────────────────────────────────── * 6 · PREMIUM CTAs — accent gradient + multi-layer glow * * Applied via class hooks. Each theme's --accent / --accent2 supplies * the gradient colors, so the buttons stay on-brand per theme but get * the same premium feel. * ──────────────────────────────────────────────────────────────────── */ .cta-primary, .price-cta { background: linear-gradient(135deg, var(--accent) 0%, var(--accent2, var(--accent)) 100%); color: #ffffff; border: 1px solid var(--accent); border-radius: 12px; font-weight: 700; letter-spacing: -0.005em; cursor: pointer; isolation: isolate; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 18px var(--galaxy-accent-glow), 0 0 24px var(--galaxy-accent-glow); transition: all 320ms var(--galaxy-ease); } .cta-primary:hover, .price-cta:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 14px 40px var(--galaxy-accent-glow), 0 0 56px var(--galaxy-accent-glow); } /* ────────────────────────────────────────────────────────────────────── * 7 · CONTENT SITS ABOVE THE ORB LAYER * * Without this, the body::before kinetic orbs could overlap content in * some stacking situations. Force main content above z-index:0. * ──────────────────────────────────────────────────────────────────── */ main, section, footer, .land-hero, .land-section, .land-stats, .land-ai, .land-cta-strip { position: relative; z-index: 1; } /* ────────────────────────────────────────────────────────────────────── * 8 · SELECTION HIGHLIGHT — matches each theme's accent * ──────────────────────────────────────────────────────────────────── */ html[data-theme="light"] ::selection { background: rgba(22, 101, 52, 0.22); color: #1c1917; } html[data-theme="dark"] ::selection { background: rgba(74, 222, 128, 0.32); color: #ffffff; } html[data-theme="ember"] ::selection { background: rgba(255, 77, 21, 0.35); color: #ffffff; } html[data-theme="pink"] ::selection { background: rgba(190, 24, 93, 0.22); color: #4a1c2b; } html[data-theme="cat"] ::selection { background: rgba(194, 65, 12, 0.22); color: #3d2b1f; }