/* pollard-theme.css — pollard.kobow.games unified shell. Strategy: inherit Kobow Studio dark tokens (kobow-brand.css palette and typography), and add a Pollard client accent (navy/teal) for everything that's specifically Pollard-branded (topbar mark, Council card, featured chips). Burnt-orange stays as the platform/Kobow accent for actions and step status. */ @import url("/gamedev/kobow-brand.css"); :root[data-theme="dark"], :root { /* === Pollard client tokens (additive, layered on top of Kobow dark) === */ --pbc-blue: #3a8fb7; --pbc-blue-deep: #0a1628; --pbc-blue-2: #0f2238; --pbc-blue-soft: rgba(58,143,183,.14); --pbc-blue-surf: rgba(58,143,183,.08); --pbc-gold: #d4af37; /* used sparingly — heritage gold */ /* Force Kobow dark even if the parent didn't set data-theme="dark" */ --kbw-paper: #0a0a0a; --kbw-card: #141414; --kbw-soft: #1a1a1a; --kbw-ink: #eaeaea; --kbw-line: #2a2a2a; --kbw-line-strong: #3a3a3a; --kbw-muted: #8a8a8a; --kbw-muted-2: #b4b4b4; --kbw-accent: #d4500e; --kbw-accent-2: #f97316; --kbw-accent-dim: #c2410c; --kbw-accent-bright: #fb923c; --kbw-accent-soft: rgba(212,80,14,.16); --kbw-accent-surface:rgba(212,80,14,.08); } html, body { background: var(--kbw-paper) !important; color: var(--kbw-ink) !important; font-family: var(--kbw-body), 'Inter', system-ui, sans-serif !important; } /* === Sticky Pollard topbar — same height/structure as INDEX_PIPELINE === */ .pbc-topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 18px; height: 64px; padding: 0 24px; background: var(--kbw-paper); border-bottom: 1px solid var(--kbw-line); } .pbc-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--kbw-ink); font: 700 1.15em/1 var(--kbw-display); } .pbc-brand-mk { width: 32px; height: 32px; border-radius: 7px; background: var(--pbc-blue); color: #0a0a0c; display: grid; place-items: center; font: 700 14px var(--kbw-display); flex: 0 0 auto; } .pbc-brand-text { display: flex; flex-direction: column; gap: 2px; line-height: 1; } .pbc-brand-nm { font: 700 1.05em var(--kbw-display); color: var(--kbw-ink); letter-spacing: -.01em; } .pbc-brand-sub { font: 600 .56em var(--kbw-mono); color: var(--kbw-muted); letter-spacing: .14em; text-transform: uppercase; } .pbc-nav { display: flex; gap: 2px; margin-left: auto; align-items: center; } .pbc-nav a { font: 600 .88em var(--kbw-body); color: var(--kbw-muted); padding: 8px 14px; border-radius: 6px; text-decoration: none; transition: color .15s, background .15s; } .pbc-nav a:hover { color: var(--kbw-ink); background: var(--kbw-soft); } .pbc-nav a.active { color: var(--kbw-ink); background: var(--kbw-card); border: 1px solid var(--kbw-line); padding: 7px 13px; } .pbc-nav a.active.pbc-client { color: var(--pbc-blue); border-color: var(--pbc-blue-soft); background: var(--pbc-blue-surf); } .pbc-nav .pbc-pill { background: var(--pbc-blue-surf); color: var(--pbc-blue); border: 1px solid var(--pbc-blue-soft); } .pbc-nav .pbc-pill:hover { background: var(--pbc-blue-soft); color: var(--pbc-blue); } /* Hide legacy ODD/SlotForge top bars on proxied pages so the Pollard topbar stands alone above the iframe content. */ .odd-top, .odd-footer, .psn { display: none !important; } /* Make any pre-existing topbar/header on proxied pages match our dark surface */ .shell > .top, .stage-top, header, .topbar { background: var(--kbw-paper) !important; border-color: var(--kbw-line) !important; color: var(--kbw-ink) !important; } /* ================================================================= * POLLARD OFFICIAL MODE — light, on-brand Pollard Banknote palette * Toggle by adding `body.pollard-mode`. Persisted in localStorage. * ================================================================= */ body.pollard-mode { --kbw-paper: #0a0a0c !important; --kbw-card: #0a0a0c !important; --kbw-soft: #f6f7f9 !important; --kbw-ink: #e9e9ea !important; --kbw-line: #e5e7ea !important; --kbw-line-strong: #cfd2d6 !important; --kbw-muted: #6e7077 !important; --kbw-muted-2: #4a4d52 !important; /* Replace burnt-orange Kobow with Pollard navy as primary */ --kbw-accent: #233460 !important; --kbw-accent-2: #025182 !important; --kbw-accent-dim: #1a2849 !important; --kbw-accent-bright: #2d4275 !important; --kbw-accent-soft: rgba(35,52,96,0.10) !important; --kbw-accent-surface:rgba(35,52,96,0.04) !important; /* Magenta as the highlight (Pollard's CTA color) */ --pbc-blue: #233460 !important; --pbc-blue-deep: #0a1628 !important; --pbc-blue-2: #f6f7f9 !important; --pbc-blue-soft: rgba(35,52,96,0.10) !important; --pbc-blue-surf: rgba(35,52,96,0.05) !important; --pbc-gold: #cc3366 !important; /* Typography — system humanist sans like Pollard's site */ --kbw-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; --kbw-display: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; --kbw-mono: "SF Mono", "Roboto Mono", "Menlo", monospace !important; background: #0a0a0c !important; color: #e9e9ea !important; font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; } /* Recolor topbar in Pollard mode */ body.pollard-mode .pbc-topbar { background: #0a0a0c !important; border-bottom: 1px solid #e5e7ea !important; } body.pollard-mode .pbc-brand-mk { background: #233460 !important; color: #0a0a0c !important; } body.pollard-mode .pbc-brand-nm { color: #233460 !important; } body.pollard-mode .pbc-brand-sub { color: #6e7077 !important; } body.pollard-mode .pbc-nav a { color: #6e7077 !important; } body.pollard-mode .pbc-nav a:hover { color: #233460 !important; background: #f6f7f9 !important; } body.pollard-mode .pbc-nav a.active{ color: #233460 !important; background: #f0f2f5 !important; border-color: #e5e7ea !important; } body.pollard-mode .pbc-nav .pbc-pill { background: rgba(204,51,102,0.08) !important; color: #cc3366 !important; border-color: rgba(204,51,102,0.20) !important; } body.pollard-mode .pbc-nav .pbc-pill:hover { background: rgba(204,51,102,0.14) !important; color: #cc3366 !important; } /* Living Twin landing — Pollard mode tweaks */ body.pollard-mode .topbar, body.pollard-mode header { background: #0a0a0c !important; border-color: #e5e7ea !important; color: #e9e9ea !important; } body.pollard-mode .accent { color: #cc3366 !important; } body.pollard-mode .pbc { color: #233460 !important; } body.pollard-mode h1, body.pollard-mode h2, body.pollard-mode h3 { color: #233460 !important; } body.pollard-mode .lead, body.pollard-mode p { color: #4a4d52 !important; } body.pollard-mode .section { border-color: #e5e7ea !important; } body.pollard-mode .spec-card { background: #0a0a0c !important; border: 1px solid #e5e7ea !important; } body.pollard-mode .spec-card .name { color: #233460 !important; } body.pollard-mode .spec-card .title { color: #cc3366 !important; } body.pollard-mode .spec-card .desc { color: #555555 !important; } body.pollard-mode .btn-primary { background: #cc3366 !important; color: #0a0a0c !important; border-color: #cc3366 !important; } body.pollard-mode .btn-primary:hover { background: #b32959 !important; } body.pollard-mode .btn-ghost { color: #233460 !important; border-color: #233460 !important; background: transparent !important; } body.pollard-mode .btn-ghost:hover { background: #f0f2f5 !important; } body.pollard-mode .cta { background: #cc3366 !important; color: #0a0a0c !important; } body.pollard-mode .qa-card { background: #0a0a0c !important; border-color: #e5e7ea !important; } body.pollard-mode .qa-card:hover { border-color: #233460 !important; } body.pollard-mode .qa-lead { color: #233460 !important; } body.pollard-mode .qa-lead .dot { color: #cc3366 !important; } body.pollard-mode .qa-cite { background: #f6f7f9 !important; color: #6e7077 !important; border-color: #e5e7ea !important; } body.pollard-mode .qa-q { color: #233460 !important; } body.pollard-mode .qa-a { color: #4a4d52 !important; } body.pollard-mode .qa-a b { color: #cc3366 !important; } body.pollard-mode .feat h3 { color: #233460 !important; } body.pollard-mode .feat .ico { color: #cc3366 !important; } body.pollard-mode .cta-strip { background: #f6f7f9 !important; } body.pollard-mode .cta-strip h2 { color: #233460 !important; } body.pollard-mode .cta-strip p { color: #555555 !important; } body.pollard-mode .footer { color: #6e7077 !important; } body.pollard-mode .footer a { color: #cc3366 !important; } /* iLottery playable CTA in Pollard mode */ body.pollard-mode .playable-cta { background: linear-gradient(135deg,#cc3366 0%, #a82854 100%) !important; color: #0a0a0c !important; } body.pollard-mode .playable-cta .play-btn { background: #0a0a0c !important; color: #cc3366 !important; border-color: #0a0a0c !important; } body.pollard-mode .playable-cta .play-btn:hover { background: #f6f7f9 !important; color: #b32959 !important; } /* === Theme toggle button === */ .pbc-theme-toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 6px 12px; background: transparent; color: var(--kbw-muted); border: 1px solid var(--kbw-line); border-radius: 99px; font: 600 .68em var(--kbw-mono); text-transform: uppercase; letter-spacing: .12em; cursor: pointer; transition: all .15s; white-space: nowrap; } .pbc-theme-toggle:hover { color: var(--kbw-ink); border-color: var(--kbw-line-strong); } body.pollard-mode .pbc-theme-toggle { background: rgba(35,52,96,0.06) !important; color: #233460 !important; border-color: rgba(35,52,96,0.20) !important; } body.pollard-mode .pbc-theme-toggle:hover { background: rgba(35,52,96,0.12) !important; } .pbc-theme-toggle .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }