/* ========================================================================== YummyPenny — Dark theme ("Bold Dark") v3 Additive file. Loads AFTER /static/app.css and overrides the SAME CSS variables app.css already uses, so every existing component inherits the dark palette automatically. Nothing here touches light mode. How theming works site-wide: - A tiny script in base.html sets data-theme="light" | "dark" on BEFORE first paint (no flash), remembering the visitor's choice. - app.css defines the light values in :root. This file redefines them under [data-theme="dark"]. Components only ever read the variables, which is what makes text/background collisions structurally impossible: every text token below was picked against its surface tokens for WCAG AA contrast. v2 (dark polish pass): badge chips that hard-coded light colors, the scan page's red flag chip, and a fix for buttons inside Google-map popups (which always render on white, whatever the site theme). v3: the site footer, which hard-codes a light band in app.css and was left glaring (and unreadable) at the bottom of every dark page. ========================================================================== */ [data-theme="dark"] { /* surfaces */ --bg: #0C110E; /* page background — near-black with a green cast */ --surface: #131A15; /* cards / panels */ --raise: #182019; /* raised wells inside cards */ --line: #242D26; /* hairline borders */ --line-2: #33403A; /* hover borders */ /* text (all AA on the surfaces above) */ --ink: #E9EFEA; --muted: #A3AFA7; --faint: #75817A; /* brand — brightened for dark surfaces so it still reads as "go" */ --save: #34C481; --save-2: #4FD695; --save-soft: rgba(52, 196, 129, .14); --save-ink: #8CE6BC; --low: #E8834E; --low-soft: rgba(232, 131, 78, .13); --discord: #6673F5; --danger: #E4655A; --danger-soft: rgba(228, 101, 90, .14); /* depth reads differently on dark — shadows get deeper, ring brighter */ --shadow: 0 24px 60px -38px rgba(0, 0, 0, .9); --shadow-s: 0 8px 22px -14px rgba(0, 0, 0, .7); --ring: 0 0 0 3px rgba(52, 196, 129, .28); } /* -------------------------------------------------------------------------- Component touch-ups: the few places app.css hard-codes a light color instead of reading a variable. Each rule below only fires in dark mode. -------------------------------------------------------------------------- */ /* Sticky header: light-glass tint becomes dark glass */ [data-theme="dark"] .masthead { background: rgba(12, 17, 14, .82); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); } /* The soft brand wash painted behind the page */ [data-theme="dark"] body::before { background: radial-gradient(50vw 42vh at 88% -8%, rgba(52, 196, 129, .07), transparent 60%), radial-gradient(42vw 36vh at 2% 2%, rgba(232, 131, 78, .05), transparent 58%); } /* Text selection */ [data-theme="dark"] ::selection { background: rgba(52, 196, 129, .28); } /* Skeleton loaders: light-grey shimmer becomes dark shimmer */ [data-theme="dark"] .skel { background: linear-gradient(90deg, #1A231C 25%, #223028 50%, #1A231C 75%); background-size: 200% 100%; } [data-theme="dark"] .skel-card { background: var(--surface); border-color: var(--line); } /* Form controls pick up dark surfaces (native widgets included) */ [data-theme="dark"] { color-scheme: dark; } [data-theme="dark"] .search, [data-theme="dark"] .login-input, [data-theme="dark"] select, [data-theme="dark"] textarea, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="search"] { background: var(--raise); color: var(--ink); border-color: var(--line); } [data-theme="dark"] .search::placeholder, [data-theme="dark"] .login-input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--faint); } /* Payment marks + retailer imagery: keep legible on dark without recoloring brand art — a soft light plate behind them. */ [data-theme="dark"] .pay-marks li { background: #F3F5F2; border-radius: 6px; padding: 3px 6px; } /* Google-map popups render on white; keep their text dark regardless of theme */ [data-theme="dark"] .gm-pop { color: #141712; } [data-theme="dark"] .gm-pop .gm-dist { color: #5C6560; } /* v2 FIX — buttons inside those white popups were reading the dark theme's surface/text tokens (dark text on a dark chip, on a white popup). Pin them to light values so "Save store" / "Filter deals" stay readable. */ [data-theme="dark"] .gm-btn { background: #FFFFFF; border-color: #D6DAD0; color: #141712; } [data-theme="dark"] .gm-btn:hover { background: #F6F7F5; } [data-theme="dark"] .gm-observed { border-top-color: #E7E9E4; } /* -------------------------------------------------------------------------- v2 — provenance/status chips that hard-code light pastels in app.css. Same hue story, rebuilt for dark: tinted glass instead of pastel paper. -------------------------------------------------------------------------- */ [data-theme="dark"] .badge-online { background: rgba(90, 150, 255, .16); color: #9EC1FF; border-color: rgba(120, 170, 255, .35); } [data-theme="dark"] .badge-staff { background: rgba(250, 176, 50, .14); color: #F5C86B; border-color: rgba(250, 176, 50, .32); } [data-theme="dark"] .badge-member { background: rgba(178, 120, 255, .16); color: #CDAAFF; border-color: rgba(178, 120, 255, .35); } /* Scan page: the red "flag" chip hard-codes light red in scan.html's own styles. Attribute selectors outrank it, so this wins only in dark mode. */ [data-theme="dark"] .yp-flag-red { background: rgba(228, 101, 90, .16); color: #F1A9A2; } /* NOTE (deliberate non-overrides): - .yp-bigcode (the full-screen barcode) stays WHITE in dark mode on purpose — register scanners need black bars on a white field. - .penny-thumb / .deal-thumb / .product-hero keep white plates behind product photos: retailer imagery assumes a white background. */ /* -------------------------------------------------------------------------- v3 — site footer. app.css paints it as a light band with faint text tuned for that light band; in dark mode both stayed hard-coded, producing the washed-out grey block. Re-seat the whole footer on dark surfaces — the text tokens then land on backgrounds they were contrast-checked against. -------------------------------------------------------------------------- */ [data-theme="dark"] .site-footer { background: var(--surface); border-top: 1px solid var(--line); } [data-theme="dark"] .foot-base { border-top-color: var(--line); } /* The theme toggle button itself (markup added in base.html) */ .theme-toggle { background: none; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; cursor: pointer; font-size: .85rem; line-height: 1; color: var(--muted); transition: color .15s, border-color .15s, background .15s; } .theme-toggle:hover { color: var(--ink); border-color: var(--line-2); background: var(--surface); } .theme-toggle .when-dark { display: none; } [data-theme="dark"] .theme-toggle .when-dark { display: inline; } [data-theme="dark"] .theme-toggle .when-light { display: none; } /* Respect visitors who turn off animations at the OS level (site-wide win) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- Batch 10 — token layer. --save-line replaces the scattered light-green rgba borders (retailer dropdown open, map toggle pressed, toast action). The light value was nearly invisible on dark surfaces; brightened here. -------------------------------------------------------------------------- */ [data-theme="dark"] { --save-line: rgba(52, 196, 129, .4); }