/* * Shared styling for embedded visualizations. * Single source of truth for brand tokens and embed-mode behavior. * Every file in public/visualizations/ should link this stylesheet. * * Contract: * - Standalone mode (no query string): full chrome (logo, title, footer, own background). * - Embed mode (?embed=1 on the URL OR data-embed="1" on ): * body background transparent, .viz-chrome elements hidden, tighter padding. * - Theme (light/dark) via data-theme on . Defaults to prefers-color-scheme. * Parent page can override via postMessage({type:'viz:theme', theme:'dark'|'light'}). */ :root { /* Brand tokens — mirror /src/styles/global.css @theme */ --viz-brand-dark-teal: #1e3f3e; --viz-brand-teal: #00908d; --viz-brand-sahara: #e6e4d0; --viz-brand-sahara-light: #f0eee0; --viz-brand-redorange: #f54d26; --viz-surface: #ffffff; --viz-surface-alt: var(--viz-brand-sahara-light); --viz-text-primary: var(--viz-brand-dark-teal); --viz-text-secondary: #4a6b6a; --viz-text-muted: #7a9594; --viz-border: rgba(122, 149, 148, 0.25); /* Dense (orange) + MoE (teal) accent pair, reused across vizzes */ --viz-accent-a: var(--viz-brand-redorange); --viz-accent-a-dim: #f5e6e1; --viz-accent-a-glow: rgba(245, 77, 38, 0.5); --viz-accent-b: var(--viz-brand-teal); --viz-accent-b-dim: #dce9e8; --viz-accent-b-glow: rgba(0, 144, 141, 0.5); /* Body background in standalone mode */ --viz-body-bg: var(--viz-brand-sahara); /* Fonts — Inter falls back to system, monospace via stack */ --viz-font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Tahoma, sans-serif; --viz-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; } /* Explicit dark theme (set by parent or prefers-color-scheme fallback below) */ [data-theme="dark"] { --viz-surface: #0f1f1e; --viz-surface-alt: #1a2f2e; --viz-text-primary: #e6e4d0; --viz-text-secondary: #a0b8b7; --viz-text-muted: #6a8a89; --viz-border: rgba(160, 184, 183, 0.2); --viz-body-bg: #0b1716; --viz-accent-a-dim: #3a1a10; --viz-accent-b-dim: #123332; } /* Auto-follow system preference ONLY when no explicit theme is set */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --viz-surface: #0f1f1e; --viz-surface-alt: #1a2f2e; --viz-text-primary: #e6e4d0; --viz-text-secondary: #a0b8b7; --viz-text-muted: #6a8a89; --viz-border: rgba(160, 184, 183, 0.2); --viz-body-bg: #0b1716; --viz-accent-a-dim: #3a1a10; --viz-accent-b-dim: #123332; } } /* Embed mode: body[data-embed="1"] is set by each viz when ?embed=1 is detected. Strips standalone chrome so the animation fills its iframe cleanly. */ body[data-embed="1"] { background: transparent !important; padding: 12px !important; min-height: 0 !important; } body[data-embed="1"] .viz-chrome { display: none !important; } /* Smooth theme transitions */ body { transition: background-color 200ms ease, color 200ms ease; }