/* ============================================================ King Skunk — Light theme overrides (shared: index5.php, product5.php) Base (inline) styles are DARK. These rules apply only when . Toggle handled by assets/theme.js ============================================================ */ /* theme toggle icon swap (default = dark → show moon) */ .ks-theme-toggle .ic-sun{display:none} .ks-theme-toggle .ic-moon{display:block} html[data-theme="light"] .ks-theme-toggle .ic-sun{display:block} html[data-theme="light"] .ks-theme-toggle .ic-moon{display:none} /* ---- design tokens ---- */ html[data-theme="light"]{ --bg:#eef2e8; --bg-2:#ffffff; --panel:#ffffff; --panel-2:#f3f7ee; --cream:#16281c; --cream-dim:#41513f; --muted:#6a7a66; --gold:#b8933f; --gold-2:#8a6d23; --gold-soft:rgba(184,147,63,.14); --line:rgba(15,50,25,.16); --line-soft:rgba(15,50,25,.09); --shadow:0 20px 44px rgba(20,40,22,.12); } /* ---- base surfaces ---- */ html[data-theme="light"] body{ background: radial-gradient(1100px 650px at 82% -8%, rgba(184,147,63,.08), transparent 55%), radial-gradient(900px 600px at -10% 8%, rgba(31,107,57,.09), transparent 55%), linear-gradient(180deg,#f2f6ec 0%,#e9efe1 100%); } html[data-theme="light"] .announce{background:linear-gradient(90deg,#e8f1e2,#dcebd3,#e8f1e2);border-bottom-color:var(--line-soft)} html[data-theme="light"] .nav{background:rgba(255,255,255,.9);border-bottom-color:var(--line)} html[data-theme="light"] .feature-band{background:linear-gradient(180deg,#eef3e8,#e7eede);border-bottom-color:var(--line)} html[data-theme="light"] .feature{background:#ffffff} html[data-theme="light"] .quality{background:linear-gradient(180deg,#eaf1e2,#f2f6ec)} html[data-theme="light"] .cta{background:radial-gradient(700px 400px at 80% 0%, rgba(184,147,63,.10), transparent 60%),linear-gradient(180deg,#eaf1e2,#eef2e8)} html[data-theme="light"] .cta-card{background:#ffffff} html[data-theme="light"] .footer{background:#e7eede;border-top-color:var(--line)} html[data-theme="light"] .cart-panel{background:linear-gradient(180deg,#ffffff,#f4f7ef)} html[data-theme="light"] .checkout-dialog{background:linear-gradient(180deg,#ffffff,#f4f7ef)} html[data-theme="light"] .toast{background:linear-gradient(180deg,#ffffff,#eef4e6)} html[data-theme="light"] .qinput, html[data-theme="light"] .field, html[data-theme="light"] .textarea{background:#ffffff} html[data-theme="light"] .shop-closed-box{background:#ffffff} /* ---- chips/tags that sit over dark product photos: keep text light ---- */ html[data-theme="light"] .p-tag{color:#e6ce8f} html[data-theme="light"] .p-fav{color:#efe4bd} html[data-theme="light"] .gallery .glabel{color:#e6ce8f} html[data-theme="light"] .gnav button{color:#f3ecd7} /* ---- hero is a dark photo section in both themes → keep its text light ---- */ html[data-theme="light"] .hero .eyebrow{color:#e6ce8f} html[data-theme="light"] .hero .eyebrow::before{background:#c9a24b} html[data-theme="light"] .hero h1{color:#ffffff} html[data-theme="light"] .hero h1 .accent{background:linear-gradient(90deg,#e6ce8f,#c9a24b);-webkit-background-clip:text;background-clip:text;color:transparent} html[data-theme="light"] .hero p.lead{color:#e9f0e3} html[data-theme="light"] .hero .btn-ghost{color:#ffffff;border-color:rgba(255,255,255,.5)} html[data-theme="light"] .hero-badge{background:rgba(10,26,16,.82);border-color:#c9a24b} html[data-theme="light"] .hero-badge .hb-num{color:#e6ce8f} html[data-theme="light"] .hero-badge .hb-txt{color:#d9cfae} /* ---- product5: quality band + buy tiers + farm photo card ---- */ html[data-theme="light"] .qband{background:linear-gradient(180deg,#eef3e8,#e7eede)} html[data-theme="light"] .tier.active .g{color:#ffffff} html[data-theme="light"] .tier.active .r b{color:#ffffff} html[data-theme="light"] .farm-list li{color:#ffffff} html[data-theme="light"] .farm-list li svg{color:#e6ce8f} /* ---- product5: mode-specific farm/help cards ---- */ .product5-page .ks-theme-toggle{ color:#e6ce8f; border-color:rgba(201,162,75,.32); background:linear-gradient(180deg,rgba(201,162,75,.11),rgba(201,162,75,.03)); box-shadow:0 8px 24px rgba(0,0,0,.16); } .product5-page .ks-theme-toggle:hover{ color:#fff3c7; border-color:#c9a24b; background:rgba(201,162,75,.16); } .product5-page .farm-card, .product5-page .help-card{ box-shadow:0 20px 42px rgba(0,0,0,.24); } .product5-page .help-qr img{ border:1px solid rgba(201,162,75,.34); box-shadow:0 12px 28px rgba(0,0,0,.2); } html[data-theme="light"] .product5-page .ks-theme-toggle{ color:#8a6d23; border-color:rgba(138,109,35,.3); background:linear-gradient(180deg,#fffdf5,#f4ecd3); box-shadow:0 8px 20px rgba(91,73,28,.12); } html[data-theme="light"] .product5-page .ks-theme-toggle:hover{ color:#6f5515; border-color:#b8933f; background:#f5e9c3; } html[data-theme="light"] .product5-page .farm-card{ color:#18351f; border-color:rgba(138,109,35,.28); background:#fbfcf7; box-shadow:0 20px 42px rgba(29,58,34,.12); } html[data-theme="light"] .product5-page .farm-card::before{ background: radial-gradient(circle at 88% 18%,rgba(184,147,63,.22),transparent 34%), radial-gradient(circle at 74% 95%,rgba(62,130,75,.15),transparent 42%), linear-gradient(135deg,#fffdf7,#eef4e7 58%,#e4eddc); } html[data-theme="light"] .product5-page .farm-card::after{ color:#9b7722; opacity:.16; text-shadow:0 0 28px rgba(184,147,63,.2); } html[data-theme="light"] .product5-page .farm-card h3{color:#193c24} html[data-theme="light"] .product5-page .farm-list li{color:#354b38} html[data-theme="light"] .product5-page .farm-list li svg{color:#9a7727} html[data-theme="light"] .product5-page .help-card{ border-color:rgba(138,109,35,.22); background:linear-gradient(145deg,#ffffff,#f6f8f1); box-shadow:0 20px 42px rgba(29,58,34,.1); } html[data-theme="light"] .product5-page .help-qr img{ border-color:rgba(31,107,57,.24); box-shadow:0 12px 26px rgba(31,107,57,.12); } /* keep primary green button readable in light mode */ html[data-theme="light"] .btn-green{color:#ffffff}