/* ══════════════════════════════════════════════════════════════════════════════════════════════ pn-wahwahs-gold-20260927.css — THE ONE SHARED GOLD MODULE (CEO 2026-09-27) "This bottom section looks like part of the WahWahs — put all WahWahs content in light/gold modules." Every surface that is genuinely THE WAHWAHS (the entry window, the Season page's WahWahs section) now carries the SAME warm cream-gold material — a printed invitation / awards- night stock, not a light THEME (the light theme was removed game-wide; this is a module material that ships on top of the dark game, the same way the Floor's `.pn-ww-invite` card already does — pn-wahwahs-invite-20260913.css, CEO-approved 2026-09-26. This file reuses that card's exact, already-measured tokens rather than inventing a second gold). TOKENS (measured, WCAG 2.1 relative-luminance, both ≥ AA): ink #1B1A17 on stock #F4EFE4 → 15.18:1 (body/heading text) ink-2 #5E574C on stock #F4EFE4 → 6.22:1 (secondary text, ≥ AA 4.5:1 body) gold-ink #7E5A10 on stock #F4EFE4 → 5.46:1 (mono eyebrows/labels — gold ACCENTS never carry text below this; decorative gold #B8891F/#E0B650 is never used for type) cta white #FFFFFF on #B4380D → 5.98:1 (the one saturated action) SURFACES CARRYING `.pn-ww-gold`: · `#pn-ww-entry .ww-win` (the entry room, pn-wahwahs.js openEntry) — the whole Finder window. · `.pnsp-ww` (the Season page WahWahs section, pn-season-page.js) — wrapped as its own object so the stats row directly below it (`.pnsp-stats`) sits OUTSIDE the module, on the page's own dark ground, per the CEO's second note. · The Floor's `.pn-ww-invite` card is ALREADY this material (pn-wahwahs-invite-20260913.css) — left untouched (out of this file's edit scope) but confirmed to share the same tokens. · The ceremony/results screen is a DELIBERATE, RECORDED dark seam (module header of pn-wahwahs.js: "the ceremony is a full-screen designed dark scene… UX Law 5" — surfaces pinned dark are explicit designed seams, not accidents, and must be recorded to change). Left dark on purpose here; flagged in the handback for Jon/Dave's call rather than silently overridden. Loaded LAST (single line, end of web/play.html) so its ID-qualified selectors win on specificity over the base dark-glass rules in pn-wahwahs-20260815.css, without needing to out-`!important` every one of them (pn-ds.css cascade traps still get `!important` where they would otherwise reach in — the button/select strips, the `[class*="card"]` fill-strip). ══════════════════════════════════════════════════════════════════════════════════════════════ */ .pn-ww-gold{ --wwg-stock:#F4EFE4; --wwg-stock-2:#EDE6D8; --wwg-ink:#1B1A17; --wwg-ink-2:#5E574C; --wwg-gold:#B8891F; --wwg-gold-2:#E0B650; --wwg-gold-ink:#7E5A10; --wwg-cta:#B4380D; --wwg-cta-hover:#C94413; --wwg-hair:rgba(27,26,23,.14); --wwg-hair-2:rgba(27,26,23,.22); } /* ── THE ENTRY WINDOW ─────────────────────────────────────────────────────────────────────────── */ #pn-ww-entry .ww-win.pn-ww-gold{ background-color:var(--wwg-stock) !important; background-image:linear-gradient(168deg,var(--wwg-stock),var(--wwg-stock-2)) !important; border:1px solid var(--wwg-hair) !important; color:var(--wwg-ink) !important; box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 30px 80px -20px rgba(20,14,4,.5), 0 0 0 1px rgba(27,26,23,.10) !important; } /* the gold rule — a printed edge, exactly the invitation card's motif, not a border box */ #pn-ww-entry .ww-win.pn-ww-gold::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; z-index:2; background:linear-gradient(180deg,var(--wwg-gold-2),var(--wwg-gold) 60%,#8C6614); } #pn-ww-entry .ww-win.pn-ww-gold .ww-tb{ background:rgba(27,26,23,.045) !important; border-bottom:1px solid var(--wwg-hair) !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-tt{ color:var(--wwg-ink-2) !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-bd{ color:var(--wwg-ink) !important; } /* the hero — same lock-up, warm light in place of the dark alcove glow; no dark scrim needed since the type is now dark ink on a light ground */ #pn-ww-entry .ww-win.pn-ww-gold .ww-hero{ background:radial-gradient(78% 62% at 74% 46%, rgba(184,137,31,.16) 0%, rgba(184,137,31,.05) 46%, transparent 74%), linear-gradient(178deg, rgba(255,255,255,.5), rgba(255,255,255,0) 70%) !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-hero-tx::before{ content:none !important; } /* ⛔ pn-ds.css's `h1:not(#pn-ds-never), h2:not(#pn-ds-never), h3:not(#pn-ds-never){color:var(--ds-ink) !important}` (an id-level selector via :not(#id)) beats any non-!important override on the h2/h3 headings this room uses (.ww-hero-h is an h2, .ww-state-h an h3) — measured: without !important here these two painted pale dark-theme ink on the cream ground. Matched with !important + more classes than that trap's own specificity, so this wins. */ #pn-ww-entry .ww-win.pn-ww-gold .ww-hero-k{ color:var(--wwg-gold-ink) !important; text-shadow:none !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-hero-h{ color:var(--wwg-ink) !important; text-shadow:none !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-hero-l{ color:var(--wwg-ink-2) !important; text-shadow:none !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-hero-art{ filter:drop-shadow(0 4px 5px rgba(60,40,5,.35)) drop-shadow(0 16px 26px rgba(60,40,5,.28)) !important; } /* the state banner */ #pn-ww-entry .ww-win.pn-ww-gold .ww-state{ border-top-color:var(--wwg-cta) !important; background:linear-gradient(180deg, rgba(180,56,13,.08), rgba(180,56,13,0) 82%) !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-state-k{ color:var(--wwg-gold-ink) !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-state-h{ color:var(--wwg-ink) !important; } /* h3 — see note above */ #pn-ww-entry .ww-win.pn-ww-gold .ww-state-l{ color:var(--wwg-ink-2) !important; } /* the how-it-works disclosure */ #pn-ww-entry .ww-win.pn-ww-gold .ww-how summary{ color:var(--wwg-ink-2) !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-how summary::before{ color:var(--wwg-gold-ink) !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-how ol li{ color:var(--wwg-ink-2) !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-how ol li b{ color:var(--wwg-ink) !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-how ol li::before{ background:rgba(27,26,23,.06) !important; border-color:var(--wwg-hair-2) !important; color:var(--wwg-gold-ink) !important; } /* the currency eyebrow + purse */ #pn-ww-entry .ww-win.pn-ww-gold .ww-eye{ color:var(--wwg-gold-ink) !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-eye i:not(:last-child)::after{ color:var(--wwg-gold) !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-purse{ border-top-color:var(--wwg-hair) !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-purse i{ color:var(--wwg-ink-2) !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-purse b{ color:var(--wwg-ink) !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-ballot-k{ color:var(--wwg-ink-2) !important; } /* the ballot cards */ #pn-ww-entry .ww-win.pn-ww-gold .ww-work{ border-color:var(--wwg-hair-2) !important; border-left-color:rgba(27,26,23,.22) !important; background:rgba(255,255,255,.45) !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-work.is-open{ border-left-color:var(--wwg-cta) !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-brand{ color:var(--wwg-ink) !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-meta{ color:var(--wwg-ink-2) !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-gate{ background:rgba(180,56,13,.09) !important; border-left-color:var(--wwg-cta) !important; color:#7A2410 !important; /* #7A2410 on the ~stock card ground: 6.8:1 */ } #pn-ww-entry .ww-win.pn-ww-gold select.ww-cat{ background:#fff !important; color:var(--wwg-ink) !important; border:1px solid var(--wwg-hair-2) !important; } /* the primary action already IS the shared cta red (#B4380D / white, 5.98:1) — no change needed, it is the one saturated block on this screen (POSITIVE_DESIGN_BRIEF). Disabled + secondary get ink flipped for the light ground. */ #pn-ww-entry .ww-win.pn-ww-gold .ww-btn:disabled, #pn-ww-entry .ww-win.pn-ww-gold .ww-btn[aria-disabled="true"]{ background:transparent !important; color:var(--wwg-ink-2) !important; border:1px dashed var(--wwg-hair-2) !important; box-shadow:none !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-btn--stage:not(:disabled){ background:var(--wwg-ink) !important; color:#fff !important; border:1px solid var(--wwg-ink) !important; /* CEO 2026-09-27 "still not fixed": a text-fill rule elsewhere painted the label in the same ink as the button, so it read as a blank black slab. Fill wins over color, so set both. */ -webkit-text-fill-color:#fff !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-btn--stage:not(:disabled):hover{ background:#302e28 !important; } /* the shared refusal banner + its remedy control */ #pn-ww-entry .ww-win.pn-ww-gold .ww-blocked{ background:rgba(180,56,13,.08) !important; border-color:rgba(180,56,13,.4) !important; border-left-color:var(--wwg-cta) !important; color:var(--wwg-ink) !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-blocked b{ color:var(--wwg-ink) !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-blocked-go{ border-color:rgba(180,56,13,.55) !important; background:var(--wwg-cta) !important; color:#fff !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-blocked-go:hover{ background:var(--wwg-cta-hover) !important; } /* the slate */ #pn-ww-entry .ww-win.pn-ww-gold .ww-slate{ border-top-color:var(--wwg-hair) !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-slate-quiet{ border-top-color:var(--wwg-hair) !important; color:var(--wwg-ink-2) !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-slate-k{ color:var(--wwg-gold-ink) !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-slate-row{ border-bottom-color:var(--wwg-hair) !important; color:var(--wwg-ink) !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-slate-row span:last-child{ color:var(--wwg-ink-2) !important; } #pn-ww-entry .ww-win.pn-ww-gold .ww-empty, #pn-ww-entry .ww-win.pn-ww-gold .ww-slate-none{ border-color:var(--wwg-hair-2) !important; color:var(--wwg-ink-2) !important; } /* close dot stays the same red/amber/green traffic-light regardless of ground */ /* ── THE SEASON PAGE — the WahWahs section is its own gold object ─────────────────────────────── The stats row (`.pnsp-stats`, sibling section) is NOT part of `.pn-ww-gold` and keeps its own dark-ground styling from pn-season-page-20260926.css untouched — it now sits visibly OUTSIDE this module rather than blending into it. */ html body .pnsp.pn-ww-gold, html body .pnsp .pnsp-ww.pn-ww-gold{ background-color:var(--wwg-stock); background-image:linear-gradient(168deg,var(--wwg-stock),var(--wwg-stock-2)); color:var(--wwg-ink); border:1px solid var(--wwg-hair); border-top:1px solid var(--wwg-hair) !important; border-radius:14px; padding:28px 26px !important; margin:20px 0 24px !important; box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -22px rgba(20,14,4,.45); position:relative; overflow:hidden; } html body .pnsp .pnsp-ww.pn-ww-gold::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:linear-gradient(180deg,var(--wwg-gold-2),var(--wwg-gold) 60%,#8C6614) !important; } /* h2.pnsp-h hits the same pn-ds.css `h1:not(#pn-ds-never)...{color:var(--ds-ink)!important}` trap as the entry room's h2/h3. There the entry room's own `#pn-ww-entry` ID ties the trap's id-via-:not() specificity and then wins on class count. This selector has no real ID, so the trap's id-tier specificity beats it outright even with !important + more classes (id count is compared before class count). Same idiom the codebase already uses elsewhere for this exact trap (acct-styles.css): repeat `:not(#pn-ds-never)` to match its id-tier specificity. */ html body .pnsp .pnsp-ww.pn-ww-gold h2.pnsp-h:not(#pn-ds-never), html body .hub-view[data-view] .pnsp .pnsp-ww.pn-ww-gold h2.pnsp-h:not(#pn-ds-never){ color:var(--wwg-ink) !important; } html body .pnsp .pnsp-ww.pn-ww-gold .pnsp-acc{ color:var(--wwg-cta) !important; } html body .pnsp .pnsp-ww.pn-ww-gold p.pnsp-p{ color:var(--wwg-ink-2) !important; } html body .pnsp .pnsp-ww.pn-ww-gold p.pnsp-p b{ color:var(--wwg-ink) !important; } html body .pnsp .pnsp-ww.pn-ww-gold .pnsp-ww-when{ color:var(--wwg-ink-2) !important; } html body .pnsp .pnsp-ww.pn-ww-gold .pnsp-ww-when b{ color:var(--wwg-cta) !important; } html body .pnsp .pnsp-ww.pn-ww-gold .pnsp-ww-nom{ color:var(--wwg-ink) !important; } html body .pnsp .pnsp-ww.pn-ww-gold .pnsp-shelf{ border-top-color:var(--wwg-hair) !important; } html body .pnsp .pnsp-ww.pn-ww-gold .pnsp-shelf-row{ border-bottom-color:var(--wwg-hair-2) !important; } html body .pnsp .pnsp-ww.pn-ww-gold .pnsp-shelf-row b{ color:var(--wwg-ink-2) !important; } html body .pnsp .pnsp-ww.pn-ww-gold .pnsp-shelf-row i{ border-color:var(--wwg-hair-2) !important; } html body .pnsp .pnsp-ww.pn-ww-gold .pnsp-shelf-note{ color:var(--wwg-ink-2) !important; } html body .pnsp .pnsp-ww.pn-ww-gold.is-tonight .pnsp-shelf-note{ color:var(--wwg-ink) !important; } /* the secondary "Enter the WahWahs" button on cream ground: flip to the shared dark-ink outline rather than the dark-theme pale-slate `.pn-btn--secondary` it inherits elsewhere */ html:not(#pn-ds-never) body .pnsp .pnsp-ww.pn-ww-gold .pn-btn--secondary{ background:var(--wwg-ink) !important; color:#fff !important; border:1px solid var(--wwg-ink) !important; } html:not(#pn-ds-never) body .pnsp .pnsp-ww.pn-ww-gold .pn-btn--secondary:hover{ background:#302e28 !important; } @media (max-width:760px){ html body .pnsp .pnsp-ww.pn-ww-gold{ padding:22px 18px 20px !important; border-radius:12px; } }