/* ============================================================ EPGB Theme System — assets/theme.css Palette A · Day = warm cream + carmine | Night = near-black + deep red Fonts: Karantina (display/headings) + Heebo (body) 3 font sizes: regular 18px / large 21px / huge 23px (default) Toggle: floating ⛙ FAB (bottom-left) + font-size cycler, localStorage FOUC: relies on the inline pre-paint snippet in each page's (sets data-theme / data-fs before first paint) + color-scheme metas ------------------------------------------------------------ How pages consume this: Pages keep their own color-named vars (--cream / --red / --brown ...) but ALIAS them onto these semantic tokens in their local :root, and use rgba(var(--fg-rgb), a) / rgba(var(--accent-rgb), a) instead of raw rgba literals so every surface/border flips with the theme automatically. ============================================================ */ /* ---------- Fonts (families only; lives in page ) ---------- */ :root { --font-display: 'Karantina', 'Heebo', system-ui, sans-serif; --font-body: 'Heebo', system-ui, -apple-system, sans-serif; } /* ---------- Font-size scale (--fs-base drives html font-size → rem) ------ */ :root { --fs-base: 23px; } /* default = huge */ :root[data-fs="regular"] { --fs-base: 18px; } :root[data-fs="large"] { --fs-base: 21px; } :root[data-fs="huge"] { --fs-base: 23px; } html { font-size: var(--fs-base); } /* ============================================================ NIGHT (default) — the bar is dark, no light backgrounds ============================================================ */ :root { color-scheme: dark; --bg: #0a0a0a; --bg-rgb: 10, 10, 10; --fg: #f4e8d0; --fg-rgb: 244, 232, 208; /* "cream" text */ --accent: #c41818; --accent-rgb: 196, 24, 24; /* "red" — decorative: bg / borders / large headings (≥24px) only */ --accent-bright: #e8231f; --accent-bright-rgb: 232, 35, 31; /* "red-glow" */ --accent-text: #ff6b6b; --accent-text-rgb: 255, 107, 107; /* AA-safe red for SMALL/normal text on THEMED surfaces (flips to deep carmine in day). NOT for large grunge headings. */ --accent-text-ondark: #ff6b6b; /* AA-safe red for small text on ALWAYS-dark surfaces (topbars, overlays, dark cards) — does NOT flip in day */ --brown-fg: #8b6f47; --brown-rgb: 139, 111, 71; --green: #4ade80; --green-rgb: 74, 222, 128; --pink: #f0a5d6; --pink-rgb: 240, 165, 214; --blue: #7ab8f5; --blue-rgb: 122, 184, 245; --amber-rgb: 245, 158, 11; --input-bg: #0a0807; --input-bg-focus: #100c08; --hero-1: #1a1612; --hero-2: #0a0807; --disabled-bg: #3a2222; } /* ============================================================ DAY — warm cream + carmine, light & readable in bright light ============================================================ */ :root[data-theme="day"] { color-scheme: light; --bg: #f4e8d0; --bg-rgb: 244, 232, 208; /* cream page */ --fg: #1f1813; --fg-rgb: 31, 24, 19; /* warm near-black text */ --accent: #a3121a; --accent-rgb: 163, 18, 26; /* deep carmine */ --accent-bright: #c41818; --accent-bright-rgb: 196, 24, 24; --accent-text: #a3121a; --accent-text-rgb: 163, 18, 26; /* deep carmine already ≥4.5:1 on light cream — reuse for small text */ --brown-fg: #6b5028; --brown-rgb: 107, 80, 40; --green: #1f8a4c; --green-rgb: 31, 138, 76; --pink: #b8478f; --pink-rgb: 184, 71, 143; --blue: #2f6fb0; --blue-rgb: 47, 111, 176; --amber-rgb: 176, 110, 8; --input-bg: #fffdf6; --input-bg-focus: #ffffff; --hero-1: #efe0c2; --hero-2: #e4d2ac; --disabled-bg: #d8c7a4; } /* ============================================================ Floating control — ⛙ theme toggle + font-size cycler bottom-left, persists via theme.js + localStorage ============================================================ */ #epgb-theme-fab { position: fixed; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 10000; /* above the grain overlay */ display: flex; flex-direction: column; gap: 8px; pointer-events: none; /* container ignores; buttons re-enable */ transition: opacity .3s ease, transform .3s ease; /* auto-hide fade/shrink */ } #epgb-theme-fab button { pointer-events: auto; width: 46px; height: 46px; border-radius: 50%; background: var(--bg); color: var(--fg); border: 2px solid var(--accent); box-shadow: 0 3px 10px rgba(0, 0, 0, .45), 0 0 0 1px rgba(var(--fg-rgb), .08); font-family: var(--font-display); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease; -webkit-tap-highlight-color: transparent; } #epgb-theme-fab button:hover { transform: translateY(-2px); background: var(--accent); color: var(--bg); border-color: var(--accent-bright); } #epgb-theme-fab button:active { transform: translateY(0) scale(.94); } #epgb-theme-btn { font-size: 24px; } #epgb-fs-btn { font-size: 17px; font-weight: 700; letter-spacing: -1px; } /* index/home page: FAB on the right so it clears the bottom-left staff badge */ body[data-page="home"] #epgb-theme-fab { left: auto; right: 14px; } /* Layer 2 — minimized state after idle (theme.js toggles .epgb-fab-idle) */ #epgb-theme-fab.epgb-fab-idle { opacity: .2; transform: scale(.7); } /* Layer 1 — pages with a sticky bottom pay bar/button: lift the FAB above it (76px ≈ 60px button height + 16px padding). Covers event.html (.checkout-bar) and drinks.html (#btnPay). */ body:has(.checkout-bar) #epgb-theme-fab, body:has(#btnPay) #epgb-theme-fab { bottom: calc(76px + env(safe-area-inset-bottom)); } @media (prefers-reduced-motion: reduce) { #epgb-theme-fab, #epgb-theme-fab button { transition: none; } } /* ============================================================ Skip-to-content link (a11y B6) — first focusable element per page. Off-screen until keyboard focus, then drops in at top-right (RTL). ============================================================ */ .skip-link { position: absolute; top: -200px; right: 8px; z-index: 10002; /* above grain overlay (9999) + theme FAB (10000) */ background: var(--bg); color: var(--fg); border: 2px solid var(--accent); padding: 10px 16px; font-family: var(--font-body, system-ui, sans-serif); font-size: 1rem; line-height: 1; text-decoration: none; border-radius: 4px; } .skip-link:focus { top: 8px; } /* === Mobile fixes: prevent horizontal scroll + header overflow === */ html, body { overflow-x: hidden; } @media (max-width: 600px) { .header { padding: 0.6rem 0.7rem; gap: 0.3rem; } .header > div:first-child { min-width: 0; } .header-logo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .btn-back { padding: 0.35rem 0.5rem; font-size: 0.7rem; } .header > div:last-child { min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } }