/* ========================================================= CHOCOLATE TRIPZ™ — LIGHT THEME ("super galaxy trippy fun") Activated by . Loads last so it wins. Palette-variable overrides re-colour most text/borders; the rules below flip the hardcoded-dark panels + crank the colour. ========================================================= */ [data-theme="light"] { --ct-black: #F3ECFF; --ct-base: #ffffff; --ct-base-soft: #FBF5FF; --ct-cream: #241542; /* body/heading text -> deep indigo */ --ct-cream-dim: #5B4A80; /* muted text -> soft purple-grey */ --ct-gold: #8A2BE2; /* primary accent -> vivid violet */ --ct-gold-deep: #6D28D9; --ct-gold-warm: #E83E8C; /* hot pink */ --ct-rule: rgba(138,43,226,0.20); --ct-rule-strong: rgba(232,62,140,0.42); --ct-topo: rgba(138,43,226,0.05); --space-base: #F3ECFF; color-scheme: light; } /* Base + galactic layers ------------------------------------------------ */ [data-theme="light"] body { background-color: var(--space-base); color: var(--ct-cream); } [data-theme="light"] body::before { background: radial-gradient(58% 46% at 80% 8%, rgba(255,77,166,0.42), transparent 60%), radial-gradient(60% 55% at 50% -6%, rgba(155,92,255,0.42), transparent 62%), radial-gradient(52% 44% at 10% 30%, rgba(38,214,224,0.34), transparent 60%), radial-gradient(60% 52% at 58% 92%, rgba(120,240,150,0.30), transparent 62%), radial-gradient(46% 40% at 30% 62%, rgba(255,206,69,0.32), transparent 62%), radial-gradient(70% 60% at 90% 70%, rgba(190,120,255,0.38), transparent 60%); } [data-theme="light"] body::after { filter: invert(1); opacity: 0.20; } /* Header / footer ------------------------------------------------------- */ [data-theme="light"] .site-header { background: rgba(255,249,255,0.82); border-bottom-color: var(--ct-rule); } [data-theme="light"] .site-footer { background: linear-gradient(180deg, transparent, rgba(255,240,255,0.75)); } [data-theme="light"] .footer-disclaimer { color: #6a5a86; } /* Mobile dropdown menu — shell.css hardcodes it dark (rgba(10,10,10,.98)); flip to light glass so the open hamburger menu matches the light theme. */ [data-theme="light"] .nav-links.open { background: rgba(255,249,255,0.98); border-color: var(--ct-rule-strong); box-shadow: 0 18px 50px rgba(120,60,180,0.18); } [data-theme="light"] .nav-toggle { border-color: var(--ct-rule-strong); color: var(--ct-cream); } /* Dark-leak fixes — panels with hardcoded literal-dark backgrounds the palette vars don't reach, so they'd stay dark in light mode. Flip them to light. */ [data-theme="light"] .compliance-bar { background: linear-gradient(90deg, rgba(232,62,140,0.09), rgba(138,43,226,0.06), rgba(38,198,230,0.07)); border-top-color: var(--ct-rule); border-bottom-color: var(--ct-rule); } [data-theme="light"] .sticky-buy { background: rgba(255,249,255,0.97); border-top-color: var(--ct-rule-strong); box-shadow: 0 -10px 30px rgba(120,60,180,0.14); } /* Announcement bar (extra candy) ---------------------------------------- */ [data-theme="light"] .announce-bar { background: linear-gradient(90deg,#8A2BE2 0%,#E83E8C 30%,#26C6E6 50%,#E83E8C 70%,#8A2BE2 100%); color: #fff; } /* Panels: flip dark gradients to bright white/lavender ------------------ */ [data-theme="light"] .card, [data-theme="light"] .card-gold-edge, [data-theme="light"] .tile, [data-theme="light"] .step, [data-theme="light"] .case-card, [data-theme="light"] .pillar, [data-theme="light"] .flavor-card, [data-theme="light"] .base-group, [data-theme="light"] .faq-item, [data-theme="light"] .inside-card, [data-theme="light"] .press-card, [data-theme="light"] .newsletter, [data-theme="light"] .cta-strip, [data-theme="light"] .product-card, [data-theme="light"] .reserve-summary, [data-theme="light"] .cart-drawer, [data-theme="light"] .quickview, [data-theme="light"] .age-card, [data-theme="light"] .feature-strip, [data-theme="light"] form.wholesale-form, [data-theme="light"] .byo-item, [data-theme="light"] .dose-meter, [data-theme="light"] .dose-row, [data-theme="light"] .bar-arch-visual, [data-theme="light"] .asset-shot, [data-theme="light"] .media-split-img, [data-theme="light"] .toast { background: linear-gradient(180deg, #ffffff, #F6EEFF) !important; } [data-theme="light"] .faq-item.open { background: linear-gradient(180deg, #FBF3FF, #F1E6FF) !important; } [data-theme="light"] .byo-item[aria-pressed="true"] { background: rgba(232,62,140,0.12) !important; } /* Product-card image well + hero images stay clean white ---------------- */ [data-theme="light"] .pc-media, [data-theme="light"] .hero-visual, [data-theme="light"] .lockup-mountain, [data-theme="light"] .pdp-hero, [data-theme="light"] .pdp-thumb, [data-theme="light"] .gallery-item, [data-theme="light"] .qv-media { background: #ffffff; } /* Colourful value strip ------------------------------------------------- */ [data-theme="light"] .value-strip { background: linear-gradient(90deg, rgba(232,62,140,0.16), rgba(138,43,226,0.14), rgba(38,198,230,0.14), rgba(255,206,69,0.16)); border-color: var(--ct-rule); } [data-theme="light"] .value-strip-inner { color: #6D28D9; } [data-theme="light"] .value-strip-inner span::before { color: var(--ct-gold-warm); } /* Form fields ----------------------------------------------------------- */ [data-theme="light"] .form-field input, [data-theme="light"] .form-field select, [data-theme="light"] .form-field textarea, [data-theme="light"] .newsletter input[type=email], [data-theme="light"] .footer-newsletter input, [data-theme="light"] .qty-input, [data-theme="light"] .shop-sort select { background: #ffffff !important; color: var(--ct-cream); } [data-theme="light"] .form-field select, [data-theme="light"] .shop-sort select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238A2BE2'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; } /* Buttons: vibrant tri-colour ------------------------------------------- */ [data-theme="light"] .btn-primary { background: linear-gradient(135deg,#E83E8C,#8A2BE2,#26C6E6) !important; color:#fff !important; border-color: transparent !important; } [data-theme="light"] .btn-primary:hover { background: linear-gradient(135deg,#8A2BE2,#26C6E6,#E83E8C) !important; color:#fff !important; } [data-theme="light"] .btn:hover { color:#fff; } [data-theme="light"] .chip.is-active { color:#fff; } [data-theme="light"] .nav-cta:hover { color:#fff !important; } /* Badges / pills -------------------------------------------------------- */ [data-theme="light"] .pill { background: rgba(138,43,226,0.08); color: var(--ct-gold-deep); border-color: var(--ct-rule-strong); } [data-theme="light"] .pdp-badge { background: rgba(138,43,226,0.06); color: var(--ct-gold-deep); } [data-theme="light"] .pc-badge { background: rgba(232,62,140,0.92); color:#fff; } [data-theme="light"] .box-badge .ring { background: rgba(138,43,226,0.06); } [data-theme="light"] .badge, .hero-eyebrow-row .badge { background: rgba(138,43,226,0.06); } [data-theme="light"] .bag-count { color:#fff; } /* Hero: lighten the photo overlay so dark text is readable -------------- */ [data-theme="light"] .hero-cosmic .hero-bg img { opacity: 0.5; } [data-theme="light"] .hero-cosmic .hero-bg::after { background: linear-gradient(90deg, rgba(243,236,255,0.86) 0%, rgba(243,236,255,0.5) 55%, rgba(243,236,255,0.25) 100%), linear-gradient(0deg, rgba(243,236,255,0.9) 0%, transparent 45%); } /* Section veils (dark inline gradients) -> soft candy fades -------------- */ [data-theme="light"] [style*="rgba(15,13,11"] { background: linear-gradient(180deg, rgba(232,62,140,0.10), rgba(138,43,226,0.05)) !important; } /* Overlays / modals ----------------------------------------------------- */ [data-theme="light"] .drawer-overlay, [data-theme="light"] .qv-overlay, [data-theme="light"] .lightbox { background: rgba(70,35,110,0.42) !important; } [data-theme="light"] .age-gate { background: radial-gradient(ellipse at center, rgba(243,236,255,0.92), rgba(226,210,255,0.98)); } [data-theme="light"] .cart-note { color: var(--ct-cream-dim); } /* Cosmic text gradient stays vivid on light ----------------------------- */ [data-theme="light"] .text-cosmic { background: linear-gradient(100deg,#E83E8C 0%,#8A2BE2 35%,#26C6E6 68%,#7CF29A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* Theme toggle icon swap ------------------------------------------------ */ .theme-toggle .icon-moon { display: none; } [data-theme="light"] .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-moon { display: inline-block; }