/* ========================================================================== Buzzeit — App Theme (dark ⇄ light) for the logged-in product pages Path: /home/buzzeit/public_html/assets/css/app-theme.css WHY THIS FILE IS DIFFERENT FROM theme.css ----------------------------------------- theme.css handles the marketing site, which is LIGHT-first and built on Tailwind utility classes. These app pages are the opposite: DARK-first and built on CSS custom properties. So the logic inverts. Marketing CSS keys on `html.dark`; this file keys on `html.light`. Both read the same localStorage key, so a user's choice follows them across the whole site. Because these pages already route their colours through variables, this file mostly just redefines those variables. The blocks after that exist for the places where a raw hex slipped into the stylesheet. SCOPING — READ THIS BEFORE ADDING A PAGE ---------------------------------------- Every variable block below is scoped to a page class on , e.g. html.light.bz-p-calendar body { --bg: #F7F8FA; ... } bz-theme.js derives that class from the URL, so no PHP edit is needed. The scoping is not cosmetic. An earlier version used a bare `html.light body`, which applied to EVERY page that loaded this file — including pages that were never mapped. Those pages inherited whichever variable names happened to match and ignored the rest, producing a half-light, half-dark result. Scoped, an unmapped page gets nothing from this file and renders exactly as it was built. NAMESPACES COVERED page class key variables ------------------ ---------- ------------- A · user/calendar/ .bz-p-calendar --bg --surface --text B · user/generated_posts/ .bz-p-library --bg-base --text-primary C · user/planning/ .bz-p-planner --bg-main --ink D · user/plans/ + user/ .bz-p-plans/-dash --bg-cards --ink-main E · publish-ui.php .bz-p-library --brown --brown-ink F · user/onboard/ .bz-p-onboard --surface-2 --text-dim G · auth/ .bz-p-auth --bg-main --ink-main NOT mapped: anything without a class above. Those pages are untouched. Then H (contrast repairs), I (no-toggle guard), J (print). TO ADD A PAGE ------------- 1. Add its path to PAGE_CLASSES in bz-theme.js 2. Add a scoped variable block here 3. Add contrast repairs under G for any hardcoded colours it uses ========================================================================== */ /* ========================================================================== 0. GLOBAL ========================================================================== */ html.light { color-scheme: light; } html.dark { color-scheme: dark; } /* Smooth flip, suppressed on first paint by .bz-no-transition */ body, body * { transition: background-color .22s ease, border-color .22s ease, color .22s ease; } .bz-no-transition, .bz-no-transition * { transition: none !important; } /* Don't let the blanket transition above fight page animations */ .spinner, .loader-ring, .skeleton, .toast, .fc-event, [class*="animate-"] { transition: none !important; } /* ========================================================================== A. CALENDAR WIZARD — user/calendar/index.php ========================================================================== */ html.light.bz-p-calendar body { --bg: #F7F8FA; --surface: #FFFFFF; --surface2: #F2F4F7; --surface3: #E6E9EF; --border: #DFE3EA; --border-soft: rgba(15,23,42,0.09); --text: #12141A; --muted: #5B6472; --faint: #8B93A4; --gold-dim: rgba(221,42,123,0.08); --gold-glow: rgba(221,42,123,0.20); --gradient-soft: linear-gradient(120deg, rgba(81,91,212,0.09), rgba(221,42,123,0.09), rgba(245,133,41,0.09)); background: radial-gradient(680px 460px at 6% -8%, rgba(129,52,175,0.07), transparent 60%), radial-gradient(680px 520px at 110% 112%, rgba(245,133,41,0.06), transparent 60%), var(--bg); } /* Hardcoded #fff headings need to become dark text */ html.light .brand, html.light .step-header h2, html.light .cal-month, html.light .modal h3, html.light .swal-brand .swal2-title, html.light .empty-state h4 { color: var(--text) !important; } /* Sidebar + panels */ html.light .sidebar { background: var(--surface); border-right-color: var(--border); } html.light .card, html.light .cal-wrap, html.light .agenda-item, html.light .modal { background: var(--surface); border-color: var(--border); } html.light .option-card { background: var(--surface); } html.light .option-card:hover { box-shadow: 0 4px 14px rgba(15,23,42,.07); } /* Calendar cells read better with a faint tint than pure white on white */ html.light .cal-cell { background: #FBFCFD; border-color: var(--border); } html.light .cal-cell.in:hover { border-color: rgba(15,23,42,.18); } /* Inputs sit on white, so give them a light fill instead of --bg */ html.light .input-ctrl, html.light .platform-num { background: #FFFFFF; border-color: var(--border); color: var(--text); } /* Chips keep white text on their colour — leave them alone */ html.light .post-chip { color: #fff; } /* Overlays */ html.light #loadingOverlay { background: rgba(247,248,250,.88); } html.light .modal-backdrop { background: rgba(247,248,250,.80); } /* Scrollbar track was transparent-on-dark */ html.light ::-webkit-scrollbar-thumb { background: #C9CED8; } /* Range slider fill */ html.light .slider-track { background: var(--surface3); } /* Limit popup */ html.light #limitPopup { background: rgba(20,20,25,0.45); } html.light #limitPopup h2 { color: var(--text) !important; } /* ========================================================================== B. CREATIVE LIBRARY — user/generated_posts/index.php ========================================================================== */ html.light.bz-p-library body { --bg-base: #F6F7F9; --bg-surface: #FFFFFF; --bg-card: #FFFFFF; --bg-elevated: #F1F2F5; --bg-hover: #E8E9EE; --border: rgba(10,10,20,0.10); --border-hover: rgba(10,10,20,0.20); --text-primary: #14141C; --text-secondary:#55556A; --text-muted: #8A8A9C; --accent-glow: rgba(182,0,168,0.10); --shadow-card: 0 4px 16px rgba(10,10,20,0.07); --shadow-glow: 0 0 30px rgba(182,0,168,0.07); } html.light .asset-card:hover { box-shadow: 0 12px 28px rgba(10,10,20,.12), 0 0 0 1px rgba(182,0,168,.18), var(--shadow-glow); } html.light .list-card:hover { background: var(--bg-elevated); } /* Backdrops were near-black */ html.light .modal-backdrop { background: rgba(246,247,249,0.92); } html.light .export-overlay { background: rgba(246,247,249,0.88); } html.light .modal-img-pane { background: var(--bg-elevated); } html.light .modal-img { box-shadow: 0 8px 28px rgba(10,10,20,.16); } /* Badges sit on top of photos — keep them dark and legible */ html.light .card-badge, html.light .card-checkbox, html.light .publish-pill { background: rgba(0,0,0,0.55); color: #fff; } html.light .card-actions { background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 100%); } html.light .bulk-bar { box-shadow: 0 8px 30px rgba(10,10,20,0.16); } html.light .toast { box-shadow: 0 8px 20px rgba(10,10,20,0.14); } /* The sort/per-page carets are baked-in SVGs coloured for dark */ html.light .sort-select, html.light .per-page-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a9c' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } html.light input[type="date"]::-webkit-calendar-picker-indicator { filter: none; } /* ========================================================================== C. CONTENT PLANNER — user/planning/index.php ========================================================================== */ html.light.bz-p-planner body { --bg-main: #F7F7F8; --bg-card: #FFFFFF; --bg-panel: linear-gradient(160deg, #FFFFFF 0%, #F4F4F6 100%); --bg-input: #F4F4F6; --bg-hover: #ECECEF; --ink: #16181C; --ink-dim: rgba(22,24,28,0.70); --ink-faint: rgba(22,24,28,0.48); --ink-ghost: rgba(22,24,28,0.26); --border-strong: rgba(22,24,28,0.22); --border-sub: rgba(22,24,28,0.11); --border-faint: rgba(22,24,28,0.06); } /* The film-grain overlay is far too visible on light */ html.light body::before { opacity: 0.10; } html.light .loader-overlay { background: var(--bg-main); } /* FullCalendar */ html.light .fc-daygrid-day.fc-day-today { background: rgba(118,33,176,0.05) !important; } html.light .fc-daygrid-day:hover { background: rgba(22,24,28,0.02) !important; } html.light .fc-button { background: var(--bg-hover) !important; } html.light .calendar-topbar { background: rgba(255,255,255,0.75); } html.light .toast { box-shadow: 0 8px 22px rgba(22,24,28,0.12); } html.light .modal-overlay { background: rgba(22,24,28,0.35); } html.light .modal-card { box-shadow: 0 18px 46px rgba(22,24,28,0.20); } html.light .bulk-actions-bar { box-shadow: 0 10px 30px rgba(22,24,28,0.16); } /* ========================================================================== D. PLANS + DASHBOARD — user/plans/index.php, user/index.php ========================================================================== */ html.light.bz-p-plans body, html.light.bz-p-dash body { --bg-main: #F7F7F8; --bg-cards: rgba(255,255,255,0.86); --bg-panel: rgba(255,255,255,0.92); --bg-panel-start: #FFFFFF; --bg-panel-end: #F4F4F6; --ink-main: #16181C; --ink-dim: rgba(22,24,28,0.68); --ink-faint: rgba(22,24,28,0.46); --line-strong: rgba(22,24,28,0.22); --line-subtle: rgba(22,24,28,0.11); } /* Both pages layer a dark gradient over a stock photo. Invert the overlay so the photo reads as a pale wash instead of a black one. */ html.light.bz-p-plans body, html.light.bz-p-dash body { background-image: linear-gradient(rgba(247,247,248,0.93), rgba(247,247,248,0.985)), var(--bz-page-photo, none) !important; } /* Raw #fff headings */ html.light .page-head h1, html.light .plan-price, html.light .plan-title, html.light .history h2, html.light .card h3, html.light .banner-content h2, html.light .loading-text { color: var(--ink-main) !important; } html.light .navbar { background: rgba(255,255,255,0.72); } html.light table th { background: rgba(22,24,28,0.04); } html.light .plan-card { box-shadow: 0 6px 20px rgba(22,24,28,0.06); } html.light .plan-card:hover { background: #FFFFFF; box-shadow: 0 16px 34px rgba(182,0,168,0.10); } html.light .plan-badge { background: rgba(22,24,28,0.04); } html.light .table-wrap { box-shadow: 0 6px 20px rgba(22,24,28,0.05); } html.light .hero-section{ box-shadow: 0 14px 36px rgba(22,24,28,0.10); } html.light .hero-sidebar{ background: rgba(22,24,28,0.02); } html.light .card:hover { box-shadow: 0 12px 26px rgba(22,24,28,0.10); } /* The banner photo mask assumes a dark backdrop */ html.light .banner-img { opacity: 0.16; } /* Buttons on the gradient keep white text */ html.light .buy-btn, html.light .btn-upgrade, html.light .brand-mark, html.light .user-avatar { color: #fff !important; } html.light .brand, html.light .brand .logo { color: var(--ink-main); } /* ========================================================================== E. PUBLISH DIALOG — user/generated_posts/publish-ui.php ========================================================================== */ html.light.bz-p-library body { --brown-soft: rgba(190,76,0,0.07); --brown-line: rgba(190,76,0,0.26); --brown-ink: #9A5A1F; /* dark enough to read on white */ } html.light .channel-opt.selected { background: #FFFFFF; border-color: rgba(22,24,28,0.20); color: var(--text-primary); box-shadow: inset 0 0 0 1px rgba(22,24,28,0.04); } /* Pills sit over photos — keep the dark plate */ html.light .publish-pill { background: rgba(0,0,0,0.62); } /* ========================================================================== F. ONBOARD — user/onboard/index.php --bg --surface --surface-2 --line --text --text-dim ========================================================================== The whole page flips, including the left brand panel. An earlier version kept that panel dark as a "deliberate split" — it read as a rendering fault instead, so it goes light with everything else. ========================================================================== */ html.light.bz-p-onboard body { --bg: #F7F7FA; --surface: #FFFFFF; --surface-2: #F3F4F8; --surface-3: #E7E9F0; --line: rgba(15,18,40,0.10); --line-soft: rgba(15,18,40,0.05); --text: #12141C; --text-dim: #545C78; --text-faint: #8A93AD; --accent-soft: rgba(124,58,237,0.09); --accent-glow: rgba(219,39,119,0.18); --gradient-soft: linear-gradient(120deg, rgba(79,70,229,0.08), rgba(219,39,119,0.08)); background: radial-gradient(900px 600px at 12% -5%, rgba(129,52,175,0.07), transparent 55%), radial-gradient(800px 600px at 105% 110%, rgba(245,133,41,0.05), transparent 55%), var(--bg); } /* Hardcoded #fff headings on the form side */ html.light .form-side h2, html.light .font-card .fc-heading, html.light .modal h3 { color: var(--text) !important; } /* Panels */ html.light .onboarding-wrapper { background: var(--surface); } html.light .form-side { background: var(--surface); } html.light .modal { background: var(--surface); box-shadow: 0 20px 50px rgba(15,18,40,.16); } /* The floating label sits on the form background — must match it */ html.light .input-group input:focus + label.float, html.light .input-group input:not(:placeholder-shown) + label.float, html.light .input-group textarea:focus + label.float, html.light .input-group textarea:not(:placeholder-shown) + label.float { background: var(--surface); } /* Inputs */ html.light .input-group input, html.light .input-group select, html.light .input-group textarea { background: #FFFFFF; border-color: var(--line); } html.light .input-group input:hover, html.light .input-group textarea:hover { border-color: rgba(15,18,40,.20); } /* Cards + chips */ html.light .chips, html.light .font-card, html.light .palette-box, html.light .file-upload, html.light .review-card, html.light .logo-preview { background: #FFFFFF; } html.light .chip { background: #F3F4F8; border-color: var(--line); color: var(--text-dim); } html.light .chip.selected { color: #fff; } /* gradient fill — keep white */ html.light .btn-secondary { background: #F3F4F8; border-color: var(--line); } html.light .btn-secondary:hover { background: #E7E9F0; } html.light .btn-ghost { color: #6D28D9; } html.light .req-badge.opt { background: rgba(15,18,40,.05); } html.light .checkbox-group label { background: #FFFFFF; border-color: var(--line); } html.light .checkbox-group label:has(input:checked) { color: #fff; } /* Overlays */ html.light .loading-overlay { background: rgba(247,247,250,.86); } html.light .modal-backdrop { background: rgba(15,18,40,.35); } /* Skeleton shimmer was tuned for dark */ html.light .skeleton { background: linear-gradient(90deg, rgba(15,18,40,.04) 25%, rgba(15,18,40,.09) 37%, rgba(15,18,40,.04) 63%); background-size: 400% 100%; } /* Colour swatches need a visible edge on white */ html.light .color-swatch { border-color: rgba(15,18,40,.10); } html.light input[type="color"] { border-color: var(--line); } html.light .toast { box-shadow: 0 10px 28px rgba(15,18,40,.16); } /* ========================================================================== G. AUTH — auth/index.php Shares its variable names with namespace D (--bg-main, --ink-main, --line-subtle), but it's a separate page with its own layout, so it gets its own scope rather than being folded in. ========================================================================== */ html.light.bz-p-auth body { --bg-main: #F4F4F7; --bg-cards: #FFFFFF; --bg-panel-start: #FFFFFF; --bg-panel-end: #F7F7FA; --ink-main: #16181C; --ink-dim: rgba(22,24,28,0.68); --ink-faint: rgba(22,24,28,0.46); --line-strong: rgba(22,24,28,0.20); --line-subtle: rgba(22,24,28,0.10); } /* The body layers a dark gradient over a stock photo — invert the overlay so the photo reads as a pale wash rather than a black one. */ html.light.bz-p-auth body { background-image: linear-gradient(rgba(244,244,247,0.90), rgba(244,244,247,0.96)), url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2000&auto=format&fit=crop') !important; } html.light .auth-wrapper { box-shadow: 0 20px 50px rgba(22,24,28,0.10); } /* The right panel darkens itself with rgba(0,0,0,.2) */ html.light .right-panel { background: rgba(22,24,28,0.025) !important; } /* The magenta bloom behind the left panel is tuned for black */ html.light .left-panel::before { background: radial-gradient(circle at center, rgba(182,0,168,0.04), transparent 40%) !important; } /* `.brand` hardcodes color:white */ html.light .brand { color: #16181C !important; } html.light .brand-mark { color: #fff !important; } /* sits on the gradient */ html.light .feature-icon { background: rgba(22,24,28,0.03) !important; border-color: var(--line-subtle) !important; } html.light .tabs { background: #FFFFFF !important; } html.light .tab-btn.active { background: rgba(182,0,168,0.05) !important; color: #16181C !important; } /* Inputs use --bg-main, which is the page background — too grey on a white panel, so give them their own white fill. */ html.light .input-group input { background: #FFFFFF !important; } html.light .submit-btn { color: #fff !important; } /* ========================================================================== H. CONTRAST REPAIRS Every entry below exists because a colour was written as a literal (color:#fff, background:rgba(20,20,22,.8)) instead of a variable. A literal can't be flipped by the theme, so that one element stays put while the page around it moves. If you hit a new one, this is where it goes. ========================================================================== */ /* -------------------------------------------------------------------------- H1. ONBOARD — the left brand panel goes light too `.brand-side` hardcodes a near-black gradient and white text. Neither can be reached by a variable, so both are overridden here. -------------------------------------------------------------------------- */ html.light .brand-side { background: linear-gradient(160deg, #F4F1FB 0%, #FBFBFD 70%) !important; border-right: 1px solid rgba(15,18,40,.08); } /* The gradient wash over the panel is tuned for a black backdrop */ html.light .brand-side::after { opacity: .05 !important; } html.light .brand-side .logo { color: #12141C !important; } html.light .brand-side .logo span { color: rgba(18,20,28,.55) !important; } html.light .brand-side .logo .mark { color: #fff !important; } /* on gradient */ html.light .brand-side h1 { color: #12141C !important; } html.light .brand-side p { color: #545C78 !important; } html.light .brand-side .features li { color: #12141C !important; } html.light .brand-side .features li i { background: linear-gradient(120deg, rgba(79,70,229,.10), rgba(219,39,119,.10)) !important; border-color: rgba(15,18,40,.10) !important; color: #6D28D9 !important; } html.light .reassure { background: rgba(15,18,40,.025) !important; border-color: rgba(15,18,40,.09) !important; } html.light .reassure span { color: #545C78 !important; } html.light .reassure i { color: #059669 !important; } /* -------------------------------------------------------------------------- H2. ONBOARD — form side The floating label sits ON the form background, so its own background has to match exactly or you get a coloured smear behind the text. -------------------------------------------------------------------------- */ html.light .onboarding-wrapper { background: #FFFFFF; } html.light .form-side { background: #FFFFFF; } /* -------------------------------------------------------------------------- H3. PLANNING SIDEBAR — hardcoded near-black panel backgrounds -------------------------------------------------------------------------- */ html.light .plan-usage { background: #F4F4F6 !important; } html.light .plan-posts { background: #FBFBFC !important; } html.light .plan-header { background: #FFFFFF !important; } html.light .plan-header:hover { background: #F1F1F4 !important; } html.light .post-item:hover { background: rgba(22,24,28,.035) !important; } html.light .post-item.selected { background: rgba(118,33,176,.07) !important; } html.light .usage-bar { background: rgba(22,24,28,.10) !important; } /* Tag pills — the pink one was tuned for a black plate */ html.light .tag-used { color: #9D1191 !important; background: rgba(182,0,168,.09) !important; } html.light .tag-remaining { color: #15803D !important; background: rgba(34,197,94,.10) !important; } html.light .tag-full { color: #B91C1C !important; background: rgba(239,68,68,.10) !important; } html.light .st-pending { color: #A16207 !important; background: rgba(245,158,11,.12) !important; } html.light .st-approved { color: #15803D !important; background: rgba(34,197,94,.12) !important; } html.light .limit-badge { background: rgba(239,68,68,.07) !important; color: #B91C1C !important; } html.light .panel-title-badge { color: #6D28D9 !important; } html.light .empty-icon { background: rgba(118,33,176,.07); } html.light .hint-block { background: rgba(118,33,176,.05); border-color: rgba(118,33,176,.14); } /* -------------------------------------------------------------------------- H4. CALENDAR WIZARD — same class of problem -------------------------------------------------------------------------- */ html.light .quota-box { border-top-color: var(--border); } html.light .stat-pill { background: #F2F4F7 !important; } html.light .view-toggle { background: #F2F4F7 !important; } html.light .view-toggle button.active { color: #fff !important; } /* -------------------------------------------------------------------------- H5. CREATIVE LIBRARY -------------------------------------------------------------------------- */ html.light .filter-tag { color: #9D1191 !important; background: rgba(182,0,168,.07) !important; } html.light .platform-chip.active, html.light .platform-chip:hover { color: #9D1191 !important; } html.light .copy-btn { color: #A16207 !important; background: rgba(234,179,8,.10) !important; } html.light .detail-content.hashtag { color: #1D4ED8 !important; } html.light kbd { background: #E8E9EE !important; color: #14141C !important; } /* -------------------------------------------------------------------------- H6. SAFETY NET Any element still carrying a near-black inline/hardcoded background in light mode will keep dark text unreadable. Rather than chase each one, force readable text on the few structural wrappers that commonly do it. -------------------------------------------------------------------------- */ html.light [style*="background:rgba(20,20,22"], html.light [style*="background:rgba(12,12,12"], html.light [style*="background: rgba(20,20,22"], html.light [style*="background: rgba(12,12,12"] { background: #F4F4F6 !important; color: var(--ink, #16181C) !important; } /* -------------------------------------------------------------------------- H7. DARK MODE — the mirror problem. The marketing pages are light-first, so anything hardcoded near-white there needs the same treatment going the other way. -------------------------------------------------------------------------- */ html.dark [style*="background:#fff"], html.dark [style*="background: #fff"], html.dark [style*="background:#ffffff"], html.dark [style*="background: #ffffff"] { background: #171717 !important; } html.dark [style*="color:#000"], html.dark [style*="color: #000"] { color: #fafafa !important; } /* ========================================================================== I. NO TOGGLE ON PRODUCT PAGES The switch lives in the marketing nav only. bz-theme.js never renders one here, but this is a hard guard in case a cached copy of an older script fires. These pages still theme themselves from the saved preference — they just don't offer a way to change it. ========================================================================== */ .bz-theme-toggle, .bz-toggle-dock, .bz-toggle-slot, .bz-toggle-wrap { display: none !important; } /* ========================================================================== J. PRINT ========================================================================== */ @media print { html.light body, html.dark body { background: #fff !important; color: #000 !important; } }