/* =========================================================== PEPTHOS — LIGHT THEME (label teal, from the vial stickers) ----------------------------------------------------------- Loaded AFTER styles.css; activates on . Colour is tokenised: teal accents on white/silver holographic surfaces, matching the printed vial labels. Non-destructive: remove the flag + link to revert to dark. =========================================================== */ body[data-theme="light"] { /* accent core — label teal */ --blue: #2e8f96; --blue-bright: #3aa6ad; --cyan: #2e8f96; --blue-dark: #1e6e75; --blue-deep: #14555c; /* text */ --ink: #0f3237; --ink-soft: #46626a; --ink-faint: #789097; /* rgb tokens used inside gradients / rgba() */ --accent-rgb: 58,166,173; /* teal glow — borders, hovers */ --ink-rgb: 15,80,88; /* deep ink — lines, subtle fills */ --shadow-rgb: 18,75,80; /* drop shadows */ --surf-rgb: 223,240,240; /* tinted light surface */ /* neutral surface system */ --bg0: #e9eef4; --bg1: #f2f6fa; --bg2: #ffffff; --card: rgba(255,255,255,.74); --card-solid: #ffffff; --glass: rgba(255,255,255,.7); --line: rgba(var(--ink-rgb),.16); --line-soft: rgba(var(--ink-rgb),.10); --shadow: 0 10px 30px rgba(var(--shadow-rgb),.12); --shadow-lg: 0 24px 60px rgba(var(--shadow-rgb),.16); --glow: 0 0 22px rgba(var(--accent-rgb),.35); color: var(--ink); background: linear-gradient(115deg, rgba(255,180,220,.11), rgba(180,220,255,.13) 32%, rgba(200,255,235,.10) 58%, rgba(220,200,255,.13) 82%), radial-gradient(1200px 720px at 82% -8%, rgba(var(--accent-rgb),.15), transparent 60%), linear-gradient(180deg, #edf3f8, #f5f9fc 50%, #ffffff); background-attachment: fixed; } /* ---------- shared structural rules (all reference tokens) ---------- */ /* soft veil instead of the dark one */ body[data-theme="light"]::before { background: radial-gradient(130% 90% at 50% 0%, transparent 62%, rgba(var(--surf-rgb),.55) 100%); } /* text that was hardcoded white → ink */ body[data-theme="light"] h1, body[data-theme="light"] h2, body[data-theme="light"] h3, body[data-theme="light"] h4, body[data-theme="light"] strong, body[data-theme="light"] .price, body[data-theme="light"] .price-lg, body[data-theme="light"] .ci-price, body[data-theme="light"] .stats .stat .n, body[data-theme="light"] .spec-list strong, body[data-theme="light"] .hero-card h3, body[data-theme="light"] .summary h3, body[data-theme="light"] .summary .line.total, body[data-theme="light"] .cart-item h4, body[data-theme="light"] .faq-item summary, body[data-theme="light"] .trust h4, body[data-theme="light"] .specs-table tr td:last-child { color: var(--ink); } /* gradient headline word — blue→bright (in combo this is blue→teal) */ body[data-theme="light"] .hero h1 span { background: linear-gradient(120deg, var(--blue), var(--blue-bright)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* top compliance bar → brand band */ body[data-theme="light"] .topbar { background: linear-gradient(90deg, var(--blue-dark), var(--blue)); color: #fff; border-bottom-color: rgba(255,255,255,.25); } body[data-theme="light"] .topbar strong { color: #fff; } /* header / footer */ body[data-theme="light"] .site-header { background: rgba(255,255,255,.72); } body[data-theme="light"] .site-header.scrolled { background: rgba(255,255,255,.9); box-shadow: 0 8px 30px rgba(var(--shadow-rgb),.1); } body[data-theme="light"] .brand .logo-img, body[data-theme="light"] .footer-brand .logo-img { filter: none; } body[data-theme="light"] .site-footer { background: rgba(var(--surf-rgb),.55); } /* nav / cart / ghost hover */ body[data-theme="light"] .nav-links a:hover { color: var(--blue-deep); background: rgba(var(--ink-rgb),.06); } body[data-theme="light"] .nav-links a.active { color: var(--blue-deep); background: rgba(var(--accent-rgb),.14); } body[data-theme="light"] .btn--ghost { background: #fff; } body[data-theme="light"] .btn--ghost:hover { color: var(--blue-deep); background: rgba(var(--accent-rgb),.08); } body[data-theme="light"] .cart-btn { background: #fff; } body[data-theme="light"] .cart-btn:hover { color: var(--blue-deep); background: rgba(var(--accent-rgb),.08); } body[data-theme="light"] .cart-count { color: #fff; } /* inputs / chips / qty */ body[data-theme="light"] input, body[data-theme="light"] select, body[data-theme="light"] textarea { background: #fff; color: var(--ink); } /* the dark base sets option text to #fff, which is invisible on the light theme's white option background — every dropdown read as blank */ body[data-theme="light"] select option { background: #fff; color: var(--ink); } body[data-theme="light"] .qty { background: #fff; } body[data-theme="light"] .qty input, body[data-theme="light"] .qty button { color: var(--ink); } body[data-theme="light"] .chip { background: #fff; } body[data-theme="light"] .chip:hover { color: var(--blue-deep); } /* section tint + product thumbs */ body[data-theme="light"] .section--alt { background: linear-gradient(180deg, transparent, rgba(var(--surf-rgb),.6) 12%, rgba(var(--surf-rgb),.6) 88%, transparent); } body[data-theme="light"] .card .thumb, body[data-theme="light"] .pd-media, body[data-theme="light"] .ci-thumb { background: radial-gradient(120% 120% at 70% 0%, rgba(var(--accent-rgb),.16), transparent 60%), linear-gradient(160deg, #ffffff, rgba(var(--surf-rgb),1)); } /* vial photos are shot on white — multiply drops the paper into the tinted thumb gradient so there's no white box around the product */ body[data-theme="light"] .vial-img { mix-blend-mode: multiply; } /* holo-foil accent on the hero badge (shimmer shared, border per-palette) */ body[data-theme="light"] .hero .badge, body[data-theme="light"] .badge { background: linear-gradient(115deg, rgba(255,190,225,.28), rgba(185,225,255,.30) 34%, rgba(200,255,240,.26) 62%, rgba(225,205,255,.30) 88%), rgba(255,255,255,.7); border-color: rgba(var(--accent-rgb),.35); } /* intro overlay (in case it replays this session) */ body[data-theme="light"] #intro { background: radial-gradient(72% 72% at 50% 42%, transparent 0%, rgba(var(--surf-rgb),.6) 68%, #f4f9fc 100%); } body[data-theme="light"] #intro .intro-logo { filter: drop-shadow(0 8px 26px rgba(var(--accent-rgb),.28)); }