/* ========================================================================== Public site theme — light/dark tokens for the customer-facing pages. Theme is driven by [data-bs-theme] on , stamped server-side by pages/weekly-pull/partials/customerNav.php from the `wpl-theme` cookie, so there is no flash on load and Bootstrap 5.3 components follow along. DARK IS THE DEFAULT. The toggle only renders for signed-in visitors, so a guest always gets dark; the cookie is only honoured when signed in. OPT-IN. A page joins the theme by setting `$wpl_themed = true;` before it includes customerNav.php — only then is [data-bs-theme] emitted and the body repainted. Pages that have not been redesigned for dark yet (lcs-stores, product-page, the weekly listings) render exactly as they did before, rather than half-converting into dark Bootstrap cards on a light page. The bare :root block below is therefore the LIGHT palette: it is what those pages see, and it keeps the shared footer sane on them. Dark is layered on top of it. Namespacing note: --pub-* here, --wpl-* is the header (scoped to .wpl-header), --sp-* is the store portal. Keep them separate. ========================================================================== */ /* Light is the :root fallback so an un-opted-in page still resolves every token. Dark overrides it and MUST come second: both selectors carry the same specificity, so on — which matches :root as well — source order is the only tie-breaker. An explicit data-bs-theme="light" needs no block of its own; it simply fails to match the dark selector and falls through to :root. */ :root { --pub-page: #f4f7fa; --pub-page-2: #eaf0f6; --pub-surface: #ffffff; --pub-surface-2: #eef3f8; --pub-raised: #ffffff; --pub-ink: #142433; --pub-ink-2: #45596e; --pub-muted: #74879c; --pub-border: #e0e7ef; --pub-border-soft: rgba(20, 36, 51, 0.08); --pub-brand: #235789; --pub-accent: #235789; --pub-accent-2: #388ad6; --pub-accent-soft: rgba(56, 138, 214, 0.12); --pub-on-accent: #ffffff; --pub-hot: #c0392b; --pub-hot-soft: rgba(192, 57, 43, 0.1); --pub-good: #2e7d32; --pub-good-soft: rgba(46, 125, 50, 0.12); --pub-shadow: 0 1px 3px rgba(20, 36, 51, 0.06), 0 8px 24px rgba(20, 36, 51, 0.07); --pub-shadow-lift: 0 14px 34px rgba(20, 36, 51, 0.16); } [data-bs-theme="dark"] { --pub-page: #0b1622; --pub-page-2: #0e1b29; --pub-surface: #142132; --pub-surface-2: #1b2b3f; --pub-raised: #1f3145; --pub-ink: #e9f0f8; --pub-ink-2: #a9bacd; --pub-muted: #7a8da3; --pub-border: #24354a; --pub-border-soft: rgba(255, 255, 255, 0.07); --pub-brand: #388ad6; --pub-accent: #5598e7; --pub-accent-2: #7cb5f0; --pub-accent-soft: rgba(85, 152, 231, 0.16); --pub-on-accent: #08131f; --pub-hot: #ef8a80; --pub-hot-soft: rgba(239, 138, 128, 0.15); --pub-good: #6fbf73; --pub-good-soft: rgba(111, 191, 115, 0.15); --pub-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.32); --pub-shadow-lift: 0 12px 34px rgba(0, 0, 0, 0.5); } /* Painting the page is gated on the opt-in attribute — without it an unmigrated page would get a dark body under its own light-designed content. */ html[data-bs-theme] { background-color: var(--pub-page); } html[data-bs-theme] body { background-color: var(--pub-page); color: var(--pub-ink); } /* Only the surfaces animate on toggle — transitioning `color` on every element makes large pages stutter. */ body, .pub-section, .pub-card, .pub-step, .pub-footer { transition: background-color 0.25s ease, border-color 0.25s ease; } @media (prefers-reduced-motion: reduce) { body, .pub-section, .pub-card, .pub-step, .pub-footer { transition: none; } } /* -------------------------------------------------------------------------- Header, tuned per theme. The bar stays in the navy family in both modes (same call the store portal makes) — in dark it flattens toward the page so it does not glow. -------------------------------------------------------------------------- */ [data-bs-theme="dark"] .wpl-header { --wpl-ink: #08111c; --wpl-navy: #0f1f30; --wpl-navy-2: #17293e; --wpl-sky: #5598e7; border-bottom: 1px solid var(--pub-border); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); } [data-bs-theme="dark"] .wpl-header #searchResults, [data-bs-theme="dark"] .wpl-header .wpl-menu-list { border-color: var(--pub-border); background: var(--pub-surface); box-shadow: var(--pub-shadow-lift); } [data-bs-theme="dark"] .wpl-header #searchResults div.wpl-sr-row { color: var(--pub-ink); } [data-bs-theme="dark"] .wpl-header #searchResults div.wpl-sr-row:hover { background: var(--pub-surface-2); color: var(--pub-ink); } [data-bs-theme="dark"] .wpl-header #searchResults div.wpl-sr-thumb { background: var(--pub-surface-2); } [data-bs-theme="dark"] .wpl-header #searchResults .wpl-sr-sub, [data-bs-theme="dark"] .wpl-header #searchResults div.wpl-sr-empty { color: var(--pub-muted); } [data-bs-theme="dark"] .wpl-header .wpl-menu-head { border-bottom-color: var(--pub-border); } [data-bs-theme="dark"] .wpl-header .wpl-menu-head strong { color: var(--pub-ink); } [data-bs-theme="dark"] .wpl-header .wpl-menu-head span { color: var(--pub-muted); } [data-bs-theme="dark"] .wpl-header .wpl-menu-list a { color: var(--pub-ink-2); } [data-bs-theme="dark"] .wpl-header .wpl-menu-list a i { color: var(--pub-accent); } [data-bs-theme="dark"] .wpl-header .wpl-menu-list a:hover, [data-bs-theme="dark"] .wpl-header .wpl-menu-list a:focus-visible { background: var(--pub-surface-2); color: var(--pub-ink); } [data-bs-theme="dark"] .wpl-header .wpl-menu-sep { background: var(--pub-border); } [data-bs-theme="dark"] .wpl-header .wpl-menu-list a.wpl-logout, [data-bs-theme="dark"] .wpl-header .wpl-menu-list a.wpl-logout i { color: var(--pub-hot); } [data-bs-theme="dark"] .wpl-header .wpl-menu-list a.wpl-logout:hover { background: var(--pub-hot-soft); } /* -------------------------------------------------------------------------- Theme toggle — pill track with a sliding thumb, same control as the store portal so the two halves of the product feel like one. -------------------------------------------------------------------------- */ .wpl-header .wpl-theme-toggle { position: relative; display: inline-flex; align-items: center; width: 62px; height: 32px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: rgba(9, 22, 36, 0.45); cursor: pointer; flex-shrink: 0; transition: border-color 0.2s ease, background-color 0.2s ease; } .wpl-header .wpl-theme-toggle:hover { border-color: rgba(255, 255, 255, 0.35); } .wpl-header .wpl-theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 0.2rem rgba(85, 152, 231, 0.4); } .wpl-header .wpl-theme-opt { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; color: rgba(255, 255, 255, 0.45); transition: color 0.25s ease; } .wpl-header .wpl-theme-toggle:not(.is-dark) .wpl-theme-sun { color: #ffdd88; } .wpl-header .wpl-theme-toggle.is-dark .wpl-theme-moon { color: #e8f1fb; } .wpl-header .wpl-theme-thumb { position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(145deg, var(--wpl-sky), var(--wpl-navy-2)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 1px 4px rgba(0, 0, 0, 0.3); transition: transform 0.25s ease; } .wpl-header .wpl-theme-toggle.is-dark .wpl-theme-thumb { transform: translateX(30px); } @media (prefers-reduced-motion: reduce) { .wpl-header .wpl-theme-thumb { transition: none; } } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .pub-footer { margin-top: 0; padding: 2.6rem 0 1.6rem; background: var(--pub-page-2); border-top: 1px solid var(--pub-border); color: var(--pub-ink-2); } .pub-footer-inner { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 0.75rem; } .pub-footer-top { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: flex-start; justify-content: space-between; } .pub-footer-brand { display: flex; align-items: center; gap: 0.65rem; color: var(--pub-ink); text-decoration: none; } .pub-footer-mark { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(145deg, var(--pub-accent), var(--pub-brand)); color: #fff; flex-shrink: 0; } .pub-footer-name { display: block; font-family: 'Playfair Display', Lora, Georgia, serif; font-size: 1.05rem; font-weight: 700; line-height: 1.15; } .pub-footer-tag { display: block; font-size: 0.78rem; color: var(--pub-muted); } .pub-footer-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; } .pub-footer-links a { color: var(--pub-ink-2); font-size: 0.86rem; text-decoration: none; transition: color 0.2s ease; } .pub-footer-links a:hover { color: var(--pub-accent-2); } .pub-footer-bottom { margin-top: 1.8rem; padding-top: 1.1rem; border-top: 1px solid var(--pub-border); font-size: 0.8rem; color: var(--pub-muted); } @media (max-width: 575.98px) { .pub-footer-links { gap: 0.5rem 1.2rem; } }