/* BEPANDORA KPI — stylesheet Deep teal accent. Manual light/dark toggle (no OS-preference auto-flip): theme is applied via `data-theme="dark"` on , persisted in localStorage. See base.html for the inline FOUC-free apply script. */ :root { /* LIGHT theme — pure white page, soft-grey grouped cards (Apple/iOS grouped-list style). Cards stand out from the page via a subtle grey tint rather than a heavy shadow, so the eye lands on numbers, not card chrome. */ --bg: #ffffff; /* page bg, pure white */ --bg-alt: #fafafa; /* slight off-white for subtle zones */ --surface: #f5f5f7; /* card surfaces — light grey */ --surface-2: #ebebef; /* nested surfaces / hover */ --border: #e3e3e8; /* hairlines */ --border-soft:#eeeef2; /* even softer hairlines */ --text: #0a0a0c; /* near-black */ --text-soft: #3f3f46; /* secondary text */ --muted: #6b6b75; /* labels / hints */ --accent: #0d9488; /* deep teal — primary brand */ --accent-2: #0f766e; /* deeper teal for hover / chart-2 */ --accent-soft:#ccfbf1; /* tint for active / hover bg */ --accent-rgb: 13, 148, 136; /* same colour as --accent, comma-separated so rgba()/glow shadows can swap with the accent palette automatically. */ --pos: #10b981; /* green deltas */ --neg: #ef4444; /* red deltas */ --warn: #f59e0b; --bad: #ef4444; --shadow-sm: 0 1px 2px rgba(10,10,12,0.04); --shadow: 0 1px 3px rgba(10,10,12,0.06), 0 1px 2px rgba(10,10,12,0.04); --shadow-lg: 0 10px 15px -3px rgba(10,10,12,0.06), 0 4px 6px -4px rgba(10,10,12,0.05); --radius: 12px; --radius-lg: 16px; --radius-sm: 8px; --gap: 14px; --sidebar-w: 240px; --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif; color-scheme: light; } /* DARK theme — applied when is set. Brighter muted/text values than the original auto-dark we shipped, so labels and axis ticks stay readable. Teal accent shifts to a brighter tone that survives a dark background. */ [data-theme="dark"] { --bg: #0a0a0c; /* page bg, very dark */ --bg-alt: #15151a; --surface: #18181b; /* cards lift slightly off the page */ --surface-2: #27272a; /* nested / hover */ --border: #2c2c34; --border-soft:#22222a; --text: #fafafa; /* near-white */ --text-soft: #d4d4d8; --muted: #a1a1aa; /* much brighter than before */ --accent: #2dd4bf; /* brighter teal so it pops on dark */ --accent-2: #14b8a6; --accent-soft:#0f3a36; /* dark teal tint for active bg */ --accent-rgb: 45, 212, 191; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow: 0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.35); --shadow-lg: 0 10px 25px rgba(0,0,0,0.5); color-scheme: dark; } /* PURPLE accent — opted in via . Overrides the teal `--accent*` triplet only; everything else (text, bg, borders) stays whatever the current theme dictates. The `--accent-rgb` variable is what drives the glow-layer shadows, so flipping accent immediately re-tints every glow alongside the active-state colours. */ [data-accent="purple"] { --accent: #6366f1; --accent-2: #4f46e5; --accent-soft: #e0e7ff; --accent-rgb: 99, 102, 241; } /* NOIR accent — "Higgsfield style in black + purple", opted in via . Purple accent triplet only; surfaces stay the NEUTRAL dark palette (none of the purple-vibe background/border tint overrides below apply, since those are gated on [data-accent="purple"]). Result: black app, purple reserved for actions/active states. */ [data-accent="noir"] { --accent: #a78bfa; --accent-2: #8b5cf6; --accent-soft: #e0e7ff; --accent-rgb: 167, 139, 250; } [data-theme="dark"][data-accent="noir"] { --accent-soft: #241b3f; } [data-theme="dark"][data-accent="purple"] { /* Full "purple vibe" mode — tint the background, surfaces, and borders with a violet undertone so the whole app reads as one cohesive atmosphere instead of "teal-dark with purple highlights". Inspired by the AdsByAI / Linear / Vercel dark-purple aesthetic. */ --bg: #0a0714; /* very dark purple-black, not pure black */ --bg-alt: #110a1f; /* slight purple lift */ --surface: #16101f; /* cards, sidebar, panels */ --surface-2: #251a3a; /* hover / nested */ --border: #2a1f44; /* purple-tinted borders */ --border-soft:#1e1532; /* even softer */ --accent: #a78bfa; /* violet-400, brighter on dark */ --accent-2: #8b5cf6; --accent-soft: #2d1f5b; --accent-rgb: 167, 139, 250; } /* Ambient background spotlight — soft violet radial gradient anchored at the top of the viewport so every page has that "light source above the fold" feeling from the inspiration screenshot. Fixed positioning so it stays put as the user scrolls. Pointer-events none so it never blocks clicks. Hidden everywhere except dark+purple. */ [data-theme="dark"][data-accent="purple"] body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(139, 92, 246, 0.22), transparent 60%), radial-gradient(ellipse 60% 50% at 100% 20%, rgba(124, 58, 237, 0.12), transparent 50%), radial-gradient(ellipse 60% 40% at 0% 80%, rgba(99, 102, 241, 0.10), transparent 50%); } /* Make sure the actual page content sits ABOVE the ambient gradient. */ [data-theme="dark"][data-accent="purple"] .app-topbar, [data-theme="dark"][data-accent="purple"] .app-shell { position: relative; z-index: 1; } /* NOIR ambient — same violet spotlight as the full-purple vibe, but it sits on the FLAT black surfaces (noir doesn't tint --bg/surfaces). So you get the purple glow atmosphere without the purple-washed cards: Higgsfield-style black with a purple light source. Slightly tighter + dimmer than full-purple so pure-black surfaces don't muddy. */ [data-theme="dark"][data-accent="noir"] body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 75% 45% at 50% -12%, rgba(139, 92, 246, 0.18), transparent 60%), radial-gradient(ellipse 55% 45% at 100% 18%, rgba(124, 58, 237, 0.10), transparent 50%), radial-gradient(ellipse 55% 40% at 0% 82%, rgba(99, 102, 241, 0.08), transparent 50%); } [data-theme="dark"][data-accent="noir"] .app-topbar, [data-theme="dark"][data-accent="noir"] .app-shell { position: relative; z-index: 1; } /* Cards get a subtle inner purple gradient + stronger border glow in purple mode — same trick the inspiration uses to make cards feel "alive" instead of flat. Targets every common card class so any future page picks it up automatically. */ [data-theme="dark"][data-accent="purple"] .chart-card, [data-theme="dark"][data-accent="purple"] .kpi-tile, [data-theme="dark"][data-accent="purple"] .funnel-card, [data-theme="dark"][data-accent="purple"] .cads-tile, [data-theme="dark"][data-accent="purple"] .cads-chart-card, [data-theme="dark"][data-accent="purple"] .cads-funnel-card, [data-theme="dark"][data-accent="purple"] .hero-strip, [data-theme="dark"][data-accent="purple"] #fb-split-card { background: linear-gradient(180deg, rgba(139, 92, 246, 0.04) 0%, rgba(22, 16, 31, 0) 40%), var(--surface); border-color: rgba(139, 92, 246, 0.18); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(167, 139, 250, 0.06); } /* Sidebar matches the card treatment so the whole frame reads as one. */ /* Chrome (sidebar + topbar) matches Poster OS's flat near-black #0c0f16 — Jannik 2026-07-20 wanted the main nav bar as dark as Poster OS, not purple-tinted. Neutral borders to match. */ [data-theme="dark"][data-accent="purple"] .sidebar { background: #0c0f16; border-right-color: #1c1c26; } [data-theme="dark"][data-accent="purple"] .app-topbar { background: #0c0f16; border-bottom-color: #1c1c26; } /* Primary buttons get a stronger violet-to-indigo gradient in purple mode — same look as the "Launch" buttons in the reference. */ [data-theme="dark"][data-accent="purple"] .btn-primary { background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); border-color: transparent; color: #fff; } /* Tone down the "money green" in purple mode. Big dollar values that were rendered in `--pos` to feel "positive" clash with the violet atmosphere — there's too much green competing with the accent. We switch them to white/text so the eye reads them as data, not as a green delta. Small +/- delta lines stay green because their semantic ("up vs down") is genuinely useful information. */ [data-theme="dark"][data-accent="purple"] .plat-bd-value { color: var(--text); } /* Conversion-ads tiles : "Revenue" tile renders in #10b981 hardcoded too — flip it to text so the layout doesn't read as a wall of green either. */ [data-theme="dark"][data-accent="purple"] .cads-tile.tile-revenue .value { color: var(--text); } /* The "today-line" inside KPI tiles uses --pos green for positive deltas. Keep the SEMANTIC (positive = good) but desaturate the green to a softer mint that doesn't fight with the purple atmosphere. Negatives stay full-strength red — they're a warning signal that should still grab attention. */ [data-theme="dark"][data-accent="purple"] .kpi-tile .today-line .pos, [data-theme="dark"][data-accent="purple"] .kpi-tile .delta.pos, [data-theme="dark"][data-accent="purple"] .kpi-tile .arrow { color: #6ee7b7; /* emerald-300, much softer than --pos */ } /* Tracking-pill dot — still want "all good" to read as good, but the bright green dot competes with purple. Switch to a soft violet indicator since the pill text already says "tracking". */ [data-theme="dark"][data-accent="purple"] .tracking-pill .dot { background: rgba(var(--accent-rgb), 0.9); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18); } /* ────────────────────────────────────────────────────────────────────── GREEN / TEAL ambient mode — same atmospheric treatment as purple but in the brand teal. Purple mode bathes the dark UI in a violet glow ("shining on the black bits"); the default teal accent had only the pop-of-colour active states but no ambient atmosphere, so the dark theme felt flat by comparison. This block mirrors every purple effect below (ambient body gradient, card inner glow + border, sidebar gradient, topbar tint) but tuned to the teal palette. We gate on `:not(purple):not(noir)` so the rules apply only for the default teal accent — noir is deliberately FLAT black (no ambient glow at all), and purple has its own violet block above. ────────────────────────────────────────────────────────────────────── */ [data-theme="dark"]:not([data-accent="purple"]):not([data-accent="noir"]) body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(45, 212, 191, 0.18), transparent 60%), radial-gradient(ellipse 60% 50% at 100% 20%, rgba(20, 184, 166, 0.10), transparent 50%), radial-gradient(ellipse 60% 40% at 0% 80%, rgba(13, 148, 136, 0.09), transparent 50%); } /* Page content sits ABOVE the ambient gradient so it stays interactive and the glow only paints through the page's empty / surface gaps. */ [data-theme="dark"]:not([data-accent="purple"]):not([data-accent="noir"]) .app-topbar, [data-theme="dark"]:not([data-accent="purple"]):not([data-accent="noir"]) .app-shell { position: relative; z-index: 1; } /* The three ambient-glow rules above set position:relative on .app-topbar, which overrode its base position:sticky and made the top bar scroll away. Restore sticky (its z-index already clears the glow). Same specificity as those rules + later in source order, so this wins. */ [data-theme="dark"][data-accent="purple"] .app-topbar, [data-theme="dark"][data-accent="noir"] .app-topbar, [data-theme="dark"]:not([data-accent="purple"]):not([data-accent="noir"]) .app-topbar { position: sticky; top: 0; z-index: 31; } /* Cards pick up a faint teal inner gradient + border glow so they feel "lit from above" against the ambient backdrop — same trick the purple mode uses. The list of selectors matches the purple block exactly so any card class one mode hits the other mode also hits. */ [data-theme="dark"]:not([data-accent="purple"]):not([data-accent="noir"]) .chart-card, [data-theme="dark"]:not([data-accent="purple"]):not([data-accent="noir"]) .kpi-tile, [data-theme="dark"]:not([data-accent="purple"]):not([data-accent="noir"]) .funnel-card, [data-theme="dark"]:not([data-accent="purple"]):not([data-accent="noir"]) .cads-tile, [data-theme="dark"]:not([data-accent="purple"]):not([data-accent="noir"]) .cads-chart-card, [data-theme="dark"]:not([data-accent="purple"]):not([data-accent="noir"]) .cads-funnel-card, [data-theme="dark"]:not([data-accent="purple"]):not([data-accent="noir"]) .hero-strip, [data-theme="dark"]:not([data-accent="purple"]):not([data-accent="noir"]) #fb-split-card { background: linear-gradient(180deg, rgba(45, 212, 191, 0.035) 0%, rgba(13, 17, 23, 0) 40%), var(--surface); border-color: rgba(45, 212, 191, 0.14); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(94, 234, 212, 0.05); } /* Sidebar gets the same lift gradient so the full frame reads as one atmosphere instead of "glowing main, flat side". */ [data-theme="dark"]:not([data-accent="purple"]):not([data-accent="noir"]) .sidebar { background: #0c0f16; border-right-color: #1c1c26; } [data-theme="dark"]:not([data-accent="purple"]):not([data-accent="noir"]) .app-topbar { background: #0c0f16; border-bottom-color: #1c1c26; } /* Noir accent — same flat Poster OS dark for the nav chrome. */ [data-theme="dark"][data-accent="noir"] .sidebar { background: #0c0f16; border-right-color: #1c1c26; } [data-theme="dark"][data-accent="noir"] .app-topbar { background: #0c0f16; border-bottom-color: #1c1c26; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.5; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent-2); } /* ============================================================ APP SHELL : left sidebar + main area ============================================================ */ /* ───── Global top bar — sits above the entire app shell ───── */ .app-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 18px; background: #0a0a0c; color: #e5e5ea; border-bottom: 1px solid #18181b; } .app-topbar-left { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.85); } .app-topbar-left .app-topbar-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 800; font-size: 10px; letter-spacing: 0.02em; } .app-topbar-left .app-topbar-app-name { font-weight: 600; letter-spacing: 0.01em; } .app-topbar-brand { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; } .app-topbar-brand .app-topbar-wm { display: block; } .app-topbar-brand:hover { opacity: 0.9; } .app-topbar-right { display: flex; align-items: center; gap: 8px; } .topbar-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.88); border: 1px solid rgba(255,255,255,0.08); font-size: 12px; font-weight: 500; font-family: inherit; cursor: default; transition: background 0.1s, border-color 0.1s; } /* Buttons in the topbar still cursor:pointer; the timezone pill is now a plain so it stays cursor:default. */ button.topbar-pill { cursor: pointer; } button.topbar-pill:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.14); } .topbar-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); /* green = ok */ box-shadow: 0 0 0 3px rgba(16,185,129,0.18); } .topbar-pill .dot.warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(245,158,11,0.18); } .topbar-pill .dot.bad, .topbar-pill .dot.error, .topbar-pill .dot.critical { background: var(--bad); box-shadow: 0 0 0 3px rgba(239,68,68,0.22); } .topbar-pill svg { opacity: 0.7; } @media (max-width: 720px) { .app-topbar-left .app-topbar-app-name { display: none; } } .app-shell { display: flex; min-height: calc(100vh - 48px); } /* Chromeless variant — used when a page is loaded with ?embedded=1 inside an