/** * v108-additions.css — updated for v109 * * 1. WINTER DARK THEME — active Dec 21 through Mar 19 * .cb-winter on /. * v109 improvements: * - Logo text (colombeBlank) uses lighter blue-grey (#8daabf) so it's * visible on the dark gate/page background. * - Face logo + eyes forced to lighter blue-grey via JS palette override * (seasonal-theme.js sets --cb-hamburger-pink and --cb-menu-green). * - Tokens use explicit blue-grey color (no CSS filter trick — actual color). * - Ambient background hidden in winter mode. * - Links: medium blue-grey on black, hover brightens. * - Off-canvas panels: deep black bg, blue-grey text. * * 2. CLOCK — fixed bottom-right, live HH:MM:SS. * * 3. TOKEN OPACITY — no CSS opacity rule; fully owned by JS (v109 fix). */ /* ═══════════════════════════════════════════════════════════════════ 1. WINTER DARK THEME ═══════════════════════════════════════════════════════════════════ */ html.cb-winter, body.cb-winter { /* LIGHT blue-grey accent — used by face logo, eye divs, logo text. Must be bright enough to read on #080b12 background. */ --cb-hamburger-pink: #8daabf !important; --cb-hamburger-pink-hover: #a8c4d8 !important; /* Slightly darker for the secondary (eye) color */ --cb-menu-green: #5a7a96 !important; --cb-menu-green-hover: #6e90aa !important; --cb-back-blue: #3a5570 !important; --cb-back-blue-hover: #4a6882 !important; --cb-left-bg-color: #0d1520 !important; --cb-right-bg-color: #080b12 !important; --cb-left-pill-base: #3a5570 !important; --cb-right-pill-base: #1a2535 !important; --cb-left-link-color: #8daabf !important; --cb-right-link-color: #6a8ca8 !important; --cb-left-hover-bg: #1a2535 !important; --cb-left-hover-text: #c0d8ea !important; --cb-right-hover-bg: #111825 !important; --cb-right-hover-text: #a0c0d8 !important; --cb-color-body: #8daabf !important; --cb-color-heading: #8daabf !important; --cb-color-heading-alt: #6a8ca8 !important; --cb-color-bg: #080b12 !important; --cb-border: #1a2535 !important; --cb-border-soft: #111825 !important; --cb-left-bg-rgb: 13,21,32 !important; --cb-right-bg-rgb: 8,11,18 !important; } /* Page background + text */ body.cb-winter { background: #080b12 !important; color: #8daabf !important; } /* ── Ambient background: HIDDEN in winter ── */ body.cb-winter #cb-ambient-background { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* ── Gate: dark background, light brand text ── */ body.cb-winter #cb-star-gate { background: #080b12 !important; } body.cb-winter .cb-gate-brand { /* Lighter blue-grey — clearly visible on dark gate */ color: #8daabf !important; } /* ── Header logo ── */ body.cb-winter #headerLogoDiv { /* --cb-hamburger-pink is already #8daabf in winter, so this just ensures the transition is suppressed for instant colour swap */ transition: none !important; } /* ── Off-canvas panels ── */ body.cb-winter .cb-offcanvas.cb-left { background: #0d1520 !important; } body.cb-winter .cb-offcanvas.cb-right { background: #080b12 !important; } /* ── Pills / nav buttons ── */ body.cb-winter .menu-button, body.cb-winter .cb-hamburger, body.cb-winter .cb-back-link { background: #1a2535 !important; color: #8daabf !important; border-color: #3a5570 !important; } /* ── Off-canvas links: blue-grey on black ── */ body.cb-winter .cb-nav-link, body.cb-winter .cb-offcanvas a, body.cb-winter .cb-offcanvas li a { color: #8daabf !important; } body.cb-winter .cb-nav-link:hover, body.cb-winter .cb-offcanvas a:hover, body.cb-winter .cb-offcanvas li a:hover { color: #c0d8ea !important; background: #1a2535 !important; } /* ── Tokens: all blue-grey, no filter trick ── */ body.cb-winter .brand-drift-token-v4 { /* JS sets color from --cb-hamburger-pink / --cb-menu-green which are now both blue-grey, so tokens are automatically blue-grey. Remove any filter from previous versions. */ filter: none !important; } /* ── Loader ── */ body.cb-winter #cb-loader { background: #080b12 !important; } body.cb-winter .cb-dot { background: #3a5570 !important; } /* ── Headings, body text, links ── */ body.cb-winter h1, body.cb-winter h2, body.cb-winter h3, body.cb-winter h4, body.cb-winter h5, body.cb-winter h6 { color: #8daabf !important; } body.cb-winter a { color: #8daabf !important; } body.cb-winter a:hover { color: #c0d8ea !important; } /* ── Inputs / forms ── */ body.cb-winter input, body.cb-winter textarea, body.cb-winter select { background: #0d1520 !important; color: #8daabf !important; border-color: #1a2535 !important; } /* ── Product cards ── */ body.cb-winter .cb-hprod-card, body.cb-winter .woocommerce ul.products li.product { border-color: #1a2535 !important; background: #0d1520 !important; } /* ── Horizontal stagger tokens ── */ body.cb-winter .cb-h-token { color: #3a5570 !important; } /* ── Scrollbar ── */ body.cb-winter ::-webkit-scrollbar { width:4px; background:#080b12; } body.cb-winter ::-webkit-scrollbar-thumb { background:#1a2535; border-radius:2px; } /* ═══════════════════════════════════════════════════════════════════ 2. CLOCK ═══════════════════════════════════════════════════════════════════ */ #cb-clock { position: fixed; bottom: 14px; right: 18px; z-index: 19000; font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; font-weight: 400; letter-spacing: 0.06em; line-height: 1; color: var(--cb-hamburger-pink, #ff4fa3); opacity: 0.55; pointer-events: none; user-select: none; transition: color 0.3s ease, opacity 0.3s ease; } #cb-clock:hover { opacity: 0.9; } /* Hide clock on gate (before enter) */ body.cb-not-entered #cb-clock { display: none !important; } /* Winter clock: uses the winter pink variable (already blue-grey) */ body.cb-winter #cb-clock { opacity: 0.5; } /* ═══════════════════════════════════════════════════════════════════ v110: SHOP / STORE PAGE — SILENT (no text) ═══════════════════════════════════════════════════════════════════ */ /* Grid layout matching the front-page grid */ .cb-shop-page .cb-shop-grid, .cb-shop-silent .products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 22vw, 260px), 1fr)) !important; gap: clamp(10px, 2vw, 24px) !important; list-style: none !important; margin: 0 !important; padding: 0 !important; } /* Hide every WooCommerce text element on shop/archive */ .cb-shop-silent .woocommerce-result-count, .cb-shop-silent .woocommerce-ordering, .cb-shop-silent .woocommerce-breadcrumb, .cb-shop-silent .woocommerce-products-header, .cb-shop-silent .woocommerce-products-header__title, .cb-shop-silent .page-title, .cb-shop-silent h1.woocommerce-loop-product__title, .cb-shop-silent .woocommerce-info, .cb-shop-silent .woocommerce-no-products-found, .cb-shop-silent .woocommerce-archive-description, .cb-shop-silent p.woocommerce-result-count, .cb-shop-silent form.woocommerce-ordering, /* The default WC "No products were found matching your selection" */ .cb-shop-silent .woocommerce-info:not(.cb-keep), /* Any stray h1/h2 inside the shop page */ .cb-shop-page > h1, .cb-shop-page > h2, .cb-shop-page > .cb-static-html h1, .cb-shop-page > .cb-static-html h2, .cb-shop-page .cb-fp-empty { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; }