/* Pep IQ — static light theme (promoted from a11y v165, byte-identical base). * Loaded by default in ; applies when . * Dark is opt-in via the Aa toggle (sets data-pepiq-theme="dark", these rules stop matching). */ :root html[data-pepiq-theme="light"], html[data-pepiq-theme="light"]:root, html[data-pepiq-theme="light"] { --bg: #f7f3ec !important; --surface: #fdfaf3 !important; --surface2: #f1ece1 !important; --surface3: #e8e2d3 !important; --border: #d8d0bd !important; --border-soft: #e3dccb !important; --text: #2a2a2a !important; --muted: #5a5547 !important; --dim: #8a8470 !important; --text-muted: #5a5547 !important; --text-dim: #8a8470 !important; --gold: #a07c20 !important; --gold-light: #c9a84c !important; --gold-dim: rgba(160,124,32,.25) !important; --gold-border: rgba(160,124,32,.45) !important; --green: #2e7a4a !important; --teal: #1e7090 !important; --purple: #6a4ea8 !important; --violet: #6a4ea8 !important; --red: #a83838 !important; --amber: #b8761e !important; --blue: #1e7090 !important; --acc: #a07c20 !important; --accent: #a07c20 !important; --blue-bg: rgba(30,112,144,.07) !important; --blue-border: rgba(30,112,144,.25) !important; --green-bg: rgba(46,122,74,.07) !important; --green-border: rgba(46,122,74,.25) !important; --amber-bg: rgba(184,118,30,.08) !important; --amber-border: rgba(184,118,30,.3) !important; --red-bg: rgba(168,56,56,.07) !important; --red-border: rgba(168,56,56,.25) !important; } html[data-pepiq-theme="light"] body { background: #f7f3ec !important; color: #2a2a2a !important; } html[data-pepiq-theme="light"] p, html[data-pepiq-theme="light"] li, html[data-pepiq-theme="light"] td, html[data-pepiq-theme="light"] dd, html[data-pepiq-theme="light"] dt { color: #2a2a2a !important; } html[data-pepiq-theme="light"] h1, html[data-pepiq-theme="light"] h2, html[data-pepiq-theme="light"] h3, html[data-pepiq-theme="light"] h4, html[data-pepiq-theme="light"] h5 { color: #1a1a1a !important; } html[data-pepiq-theme="light"] body::before { opacity: .04 !important; } html[data-pepiq-theme="light"] img { filter: brightness(.95); } html[data-pepiq-theme="light"] .pepiq-pep { color: #2a2a2a !important; } html[data-pepiq-theme="light"] .pepiq-nav-wordmark strong { color: #2a2a2a !important; } html[data-pepiq-theme="light"] .pepiq-nav-wordmark { color: #5a5547 !important; } html[data-pepiq-theme="light"] .prose p,html[data-pepiq-theme="light"] .prose li,html[data-pepiq-theme="light"] .warning-item,html[data-pepiq-theme="light"] .green-box,html[data-pepiq-theme="light"] .green-box .gbox-text,html[data-pepiq-theme="light"] .red-box,html[data-pepiq-theme="light"] .red-box p,html[data-pepiq-theme="light"] .red-box li,html[data-pepiq-theme="light"] .amber-box,html[data-pepiq-theme="light"] .amber-box p,html[data-pepiq-theme="light"] .amber-box li,html[data-pepiq-theme="light"] .acc-box,html[data-pepiq-theme="light"] .acc-box p,html[data-pepiq-theme="light"] .acc-box li,html[data-pepiq-theme="light"] .info-box,html[data-pepiq-theme="light"] .info-box p,html[data-pepiq-theme="light"] .info-box li,html[data-pepiq-theme="light"] .info-card,html[data-pepiq-theme="light"] .ic-text,html[data-pepiq-theme="light"] .recon-step,html[data-pepiq-theme="light"] .rs-text,html[data-pepiq-theme="light"] .mech-text,html[data-pepiq-theme="light"] .mech-step,html[data-pepiq-theme="light"] .verdict-text,html[data-pepiq-theme="light"] .safety-banner-text,html[data-pepiq-theme="light"] .syn-intro,html[data-pepiq-theme="light"] .hero-sub,html[data-pepiq-theme="light"] .entry-logline,html[data-pepiq-theme="light"] .rule-box,html[data-pepiq-theme="light"] .rule-box p,html[data-pepiq-theme="light"] .step-text,html[data-pepiq-theme="light"] .needle-use,html[data-pepiq-theme="light"] .site-detail,html[data-pepiq-theme="light"] .benefit-desc,html[data-pepiq-theme="light"] .benefit-title,html[data-pepiq-theme="light"] .ri-why,html[data-pepiq-theme="light"] .qs-value,html[data-pepiq-theme="light"] .calc-result-sub,html[data-pepiq-theme="light"] .calc-note,html[data-pepiq-theme="light"] .calc-ref-table td,html[data-pepiq-theme="light"] .storage-table td,html[data-pepiq-theme="light"] .risk-text,html[data-pepiq-theme="light"] .ff-val,html[data-pepiq-theme="light"] .sf-disc-text,html[data-pepiq-theme="light"] .check-label,html[data-pepiq-theme="light"] .check-label strong,html[data-pepiq-theme="light"] .check-reason,html[data-pepiq-theme="light"] .sdc-text,html[data-pepiq-theme="light"] .sdc-text strong,html[data-pepiq-theme="light"] .sdc-tip span,html[data-pepiq-theme="light"] .dose-table,html[data-pepiq-theme="light"] .compare-text,html[data-pepiq-theme="light"] .rationale-text,html[data-pepiq-theme="light"] .protocol-header-body,html[data-pepiq-theme="light"] .po-text,html[data-pepiq-theme="light"] .si-text,html[data-pepiq-theme="light"] .section,html[data-pepiq-theme="light"] .cal-desc { color: #2a2a2a !important; } html[data-pepiq-theme="light"] .section-eyebrow,html[data-pepiq-theme="light"] .page-eyebrow,html[data-pepiq-theme="light"] .calc-label,html[data-pepiq-theme="light"] .calc-result-label,html[data-pepiq-theme="light"] .calc-preset-detail,html[data-pepiq-theme="light"] .calc-ref-table th,html[data-pepiq-theme="light"] .storage-table th,html[data-pepiq-theme="light"] .fl,html[data-pepiq-theme="light"] .cs-title,html[data-pepiq-theme="light"] .ev-label,html[data-pepiq-theme="light"] .em-label,html[data-pepiq-theme="light"] .qs-label,html[data-pepiq-theme="light"] .psum-label,html[data-pepiq-theme="light"] .entry-tag,html[data-pepiq-theme="light"] .meta-pill,html[data-pepiq-theme="light"] .sidebar-label,html[data-pepiq-theme="light"] .breadcrumb-sep,html[data-pepiq-theme="light"] .cal-month-head,html[data-pepiq-theme="light"] .nav-wm,html[data-pepiq-theme="light"] .pepiq-wordmark,html[data-pepiq-theme="light"] .sdc-tip,html[data-pepiq-theme="light"] .sdc-badge,html[data-pepiq-theme="light"] .calc-preset-name { color: #5a5547 !important; } html[data-pepiq-theme="light"] [style*="color:#ede8e0"],html[data-pepiq-theme="light"] [style*="color: #ede8e0"],html[data-pepiq-theme="light"] [style*="color:#e8e3d8"],html[data-pepiq-theme="light"] [style*="color: #e8e3d8"],html[data-pepiq-theme="light"] [style*="color:#e8e3d5"],html[data-pepiq-theme="light"] [style*="color: #e8e3d5"],html[data-pepiq-theme="light"] [style*="color:#d4cfc0"],html[data-pepiq-theme="light"] [style*="color: #d4cfc0"],html[data-pepiq-theme="light"] [style*="color:#c8c3b8"],html[data-pepiq-theme="light"] [style*="color: #c8c3b8"],html[data-pepiq-theme="light"] [style*="color:#c8c4bc"],html[data-pepiq-theme="light"] [style*="color: #c8c4bc"],html[data-pepiq-theme="light"] [style*="color:#c0bbd0"],html[data-pepiq-theme="light"] [style*="color: #c0bbd0"],html[data-pepiq-theme="light"] [style*="color:#cfcadc"],html[data-pepiq-theme="light"] [style*="color: #cfcadc"],html[data-pepiq-theme="light"] [style*="color:#b0aac0"],html[data-pepiq-theme="light"] [style*="color: #b0aac0"],html[data-pepiq-theme="light"] [style*="color:#b8b3c8"],html[data-pepiq-theme="light"] [style*="color: #b8b3c8"],html[data-pepiq-theme="light"] [style*="color:#c4bfd4"],html[data-pepiq-theme="light"] [style*="color: #c4bfd4"] { color: #2a2a2a !important; } html[data-pepiq-theme="light"] [style*="color:#9a9ab8"],html[data-pepiq-theme="light"] [style*="color: #9a9ab8"],html[data-pepiq-theme="light"] [style*="color:#9b97a8"],html[data-pepiq-theme="light"] [style*="color: #9b97a8"],html[data-pepiq-theme="light"] [style*="color:#9a96b0"],html[data-pepiq-theme="light"] [style*="color: #9a96b0"],html[data-pepiq-theme="light"] [style*="color:#9090b0"],html[data-pepiq-theme="light"] [style*="color: #9090b0"],html[data-pepiq-theme="light"] [style*="color:#9090a8"],html[data-pepiq-theme="light"] [style*="color: #9090a8"],html[data-pepiq-theme="light"] [style*="color:#8888a8"],html[data-pepiq-theme="light"] [style*="color: #8888a8"],html[data-pepiq-theme="light"] [style*="color:#9a96b0"],html[data-pepiq-theme="light"] [style*="color: #9a96b0"],html[data-pepiq-theme="light"] [style*="color:#7a6dd4"],html[data-pepiq-theme="light"] [style*="color: #7a6dd4"],html[data-pepiq-theme="light"] [style*="color:#6e6a82"],html[data-pepiq-theme="light"] [style*="color: #6e6a82"],html[data-pepiq-theme="light"] [style*="color:#5a5470"],html[data-pepiq-theme="light"] [style*="color: #5a5470"],html[data-pepiq-theme="light"] [style*="color:#4e6a7a"],html[data-pepiq-theme="light"] [style*="color: #4e6a7a"],html[data-pepiq-theme="light"] [style*="color:#a0a0b8"],html[data-pepiq-theme="light"] [style*="color: #a0a0b8"] { color: #5a5547 !important; } html[data-pepiq-theme="light"] [style*="color:#6e6a82"],html[data-pepiq-theme="light"] [style*="color: #6e6a82"],html[data-pepiq-theme="light"] [style*="color:#32304a"],html[data-pepiq-theme="light"] [style*="color: #32304a"],html[data-pepiq-theme="light"] [style*="color:#2a2a3a"],html[data-pepiq-theme="light"] [style*="color: #2a2a3a"],html[data-pepiq-theme="light"] [style*="color:#1a1a2e"],html[data-pepiq-theme="light"] [style*="color: #1a1a2e"] { color: #8a8470 !important; } html[data-pepiq-theme="light"] [style*="color:#c9a84c"],html[data-pepiq-theme="light"] [style*="color: #c9a84c"],html[data-pepiq-theme="light"] [style*="color:#d4a030"],html[data-pepiq-theme="light"] [style*="color: #d4a030"],html[data-pepiq-theme="light"] [style*="color:#e8c97a"],html[data-pepiq-theme="light"] [style*="color: #e8c97a"],html[data-pepiq-theme="light"] [style*="color:#d4a86a"],html[data-pepiq-theme="light"] [style*="color: #d4a86a"],html[data-pepiq-theme="light"] [style*="color:#c0a870"],html[data-pepiq-theme="light"] [style*="color: #c0a870"] { color: #a07c20 !important; } html[data-pepiq-theme="light"] [style*="rgba(232,227,216"] { color: #2a2a2a !important; } html[data-pepiq-theme="light"] [style*="rgba(192,187,208"] { color: #2a2a2a !important; } html[data-pepiq-theme="light"] [style*="rgba(176,170,192"] { color: #5a5547 !important; } html[data-pepiq-theme="light"] .community-quote { color: #6a4f10 !important; border-left-color: rgba(160,124,32,.5) !important; } html[data-pepiq-theme="light"] .entry-hero::after { color: rgba(160,124,32,.06) !important; } html[data-pepiq-theme="light"] .pepiq-hero::after { color: rgba(160,124,32,.08) !important; } html[data-pepiq-theme="light"] footer { background: #ebe5d6 !important; border-top-color: #d8d0bd !important; } html[data-pepiq-theme="light"] footer * { color: #5a5547 !important; } html[data-pepiq-theme="light"] footer a:hover { color: #a07c20 !important; } html[data-pepiq-theme="light"] .cal-header { background: #f1ece1 !important; border-bottom-color: #d8d0bd !important; } html[data-pepiq-theme="light"] .addon-card { background: #fdfaf3 !important; border-color: #d8d0bd !important; } html[data-pepiq-theme="light"] .addons-both-note { background: #f1ece1 !important; } html[data-pepiq-theme="light"] .dp-row { background: #f1ece1 !important; border-color: #d8d0bd !important; } html[data-pepiq-theme="light"] .bw-tooltip { background: #2a2a2a !important; color: #f7f3ec !important; border-color: rgba(160,124,32,.5) !important; } html[data-pepiq-theme="light"] [style*="rgba(8,8,12,.85)"], html[data-pepiq-theme="light"] [style*="rgba(8, 8, 12, .85)"], html[data-pepiq-theme="light"] [style*="rgba(8,8,12,0.85)"] { background: rgba(247,243,236,.92) !important; } html[data-pepiq-theme="light"] [style*="filter:blur"] [style*="color:#9090b0"], html[data-pepiq-theme="light"] [style*="filter: blur"] [style*="color:#9090b0"] { color: #5a5547 !important; } html[data-pepiq-theme="light"] #calc-summary, html[data-pepiq-theme="light"] #calc-summary strong, html[data-pepiq-theme="light"] #calc-stats, html[data-pepiq-theme="light"] #calc-stats strong { color: #2a2a2a !important; } html[data-pepiq-theme="light"] #calc-summary span { color: #5a5547 !important; } html[data-pepiq-theme="light"] .calc-result-unit, html[data-pepiq-theme="light"] .calc-step-hint { color: #5a5547 !important; } html[data-pepiq-theme="light"] .calc-chip { color: #2a2a2a !important; } html[data-pepiq-theme="light"] .calc-chip.on { color: #2e7a4a !important; background: rgba(46,122,74,.12) !important; border-color: #2e7a4a !important; } html[data-pepiq-theme="light"] .calc-result-value { color: #2e7a4a; text-shadow: none; } html[data-pepiq-theme="light"] #calc-summary [style*="#5db882"], html[data-pepiq-theme="light"] #calc-summary [style*="93,184,130"], html[data-pepiq-theme="light"] #calc-summary [style*="93, 184, 130"] { color: #2e7a4a !important; } html[data-pepiq-theme="light"] #calc-summary [style*="#e06f6f"], html[data-pepiq-theme="light"] #calc-summary [style*="224,80,80"], html[data-pepiq-theme="light"] #calc-summary [style*="224, 80, 80"] { color: #a83838 !important; } html[data-pepiq-theme="light"] .nav { background: #fdfaf3 !important; border-bottom-color: #d8d0bd !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-pepiq-theme="light"] .nav-link { color: #a07c20 !important; background: rgba(160,124,32,.04) !important; border-color: rgba(160,124,32,.30) !important; } html[data-pepiq-theme="light"] .nav-link:hover { color: #6a4f10 !important; background: rgba(160,124,32,.12) !important; } html[data-pepiq-theme="light"] .nav-brand, html[data-pepiq-theme="light"] .nav-brand span { color: #5a5547 !important; } html[data-pepiq-theme="light"] .nav-brand strong { color: #a07c20 !important; } /* ============================================================ GAP-FIX LAYER (promote v1) — components the a11y remap never reached, confirmed from the screenshots. Same light gate. ============================================================ */ /* Homepage / content header uses class .header (not .nav) — stayed dark. */ html[data-pepiq-theme="light"] .header{ background:#fdfaf3 !important; border-bottom-color:#d8d0bd !important; -webkit-backdrop-filter:saturate(120%) blur(8px) !important; backdrop-filter:saturate(120%) blur(8px) !important; } html[data-pepiq-theme="light"] .logo-wm{ color:#5a5547 !important; } html[data-pepiq-theme="light"] .logo-wm strong{ color:#a07c20 !important; } html[data-pepiq-theme="light"] .nav-content-links a{ color:#5a5547 !important; } /* PeptideWorld banner — its inline gradient has a dark stop (rgba(15,15,22,.6)) that rendered as a grey island. Re-ground on cream + deepen the periwinkle. */ html[data-pepiq-theme="light"] [style*="rgba(15,15,22,.6)"]{ background:linear-gradient(135deg,rgba(160,124,32,.06),rgba(253,250,243,.92)) !important; border-color:rgba(160,124,32,.25) !important; } html[data-pepiq-theme="light"] [style*="color:#6b7fe0"], html[data-pepiq-theme="light"] [style*="color: #6b7fe0"]{ color:#4a44a8 !important; } html[data-pepiq-theme="light"] [style*="rgba(107,127,224,.10)"]{ background:rgba(74,68,168,.09) !important; } html[data-pepiq-theme="light"] [style*="rgba(107,127,224,.32)"]{ border-color:rgba(74,68,168,.34) !important; } /* Read-page audio pill (pepiq-audio.js: #piq-bar / #piq-fab) — dark → light. */ html[data-pepiq-theme="light"] #piq-bar{ background:#fdfaf3 !important; border-color:#d8d0bd !important; box-shadow:0 6px 20px -8px rgba(80,60,30,.3) !important; } html[data-pepiq-theme="light"] #piq-fab{ background:#fdfaf3 !important; border-color:#d8d0bd !important; color:#a07c20 !important; } html[data-pepiq-theme="light"] .piq-title{ color:#5a5547 !important; } html[data-pepiq-theme="light"] .piq-title b{ color:#a07c20 !important; } html[data-pepiq-theme="light"] .piq-btn{ color:#2a2a2a !important; } html[data-pepiq-theme="light"] .piq-btn.hi{ color:#6a4ea8 !important; } html[data-pepiq-theme="light"] .piq-prog{ background:#e8e2d3 !important; } /* ============================================================ HOMEPAGE (#pq-hero) — full-bleed dark wrappers that paint their own #08080c / var(--panel) / var(--cream) instead of routing through --bg. The theme couldn't reach these, so the homepage stayed dark while every var(--bg) page went cream. Fix in place. The embedded tracker device mockup (.live/.device/.titlebar/.mini) is left dark ON PURPOSE — it's a preview of the dark tracker app. ============================================================ */ html[data-pepiq-theme="light"] #pq-hero .frame{ background:#fdfaf3 !important; } html[data-pepiq-theme="light"] #pq-hero .tile{ background:#fbf9f3 !important; } html[data-pepiq-theme="light"] #pq-hero .tile .tname{ color:#1a1a1a !important; } html[data-pepiq-theme="light"] #pq-hero .tile .tbul li{ color:#5a5547 !important; } html[data-pepiq-theme="light"] #pq-hero .hero-sub{ color:#5a5547 !important; } /* ============================================================ VERSION A SHARPEN (build 222) — homepage + platform. Scoped overrides, light-gated, reversible. No markup changes. ============================================================ */ /* ---- deepened accent set (used by tiles, part-nav, section accents) ---- */ /* bright dark-theme accents -> ink-grade values that hold contrast on cream */ html[data-pepiq-theme="light"] .nav-p1{ color:#0E6E7C !important; border-color:rgba(14,110,124,.32) !important; } /* was teal #4ab5d4 */ html[data-pepiq-theme="light"] .nav-p2{ color:#B26B12 !important; border-color:rgba(178,107,18,.32) !important; } html[data-pepiq-theme="light"] .nav-p3{ color:#0F7A55 !important; border-color:rgba(15,122,85,.32) !important; } html[data-pepiq-theme="light"] .nav-p4{ color:#5A43A8 !important; border-color:rgba(90,67,168,.32) !important; } html[data-pepiq-theme="light"] .nav-p5{ color:#A8395F !important; border-color:rgba(168,57,95,.32) !important; } html[data-pepiq-theme="light"] .nav-p6{ color:#BC4636 !important; border-color:rgba(188,70,54,.32) !important; } html[data-pepiq-theme="light"] .nav-p7{ color:#2C6CA8 !important; border-color:rgba(44,108,168,.32) !important; } html[data-pepiq-theme="light"] .nav-p8{ color:#6A4AB0 !important; border-color:rgba(106,74,176,.32) !important; } /* ---- HOMEPAGE: six tiles -> accent-edge cards, deepened ---- */ html[data-pepiq-theme="light"] .t1{ --c:#B6841C !important; } html[data-pepiq-theme="light"] .t2{ --c:#0E6E7C !important; } html[data-pepiq-theme="light"] .t3{ --c:#5A43A8 !important; } html[data-pepiq-theme="light"] .t4{ --c:#B26B12 !important; } html[data-pepiq-theme="light"] .t5{ --c:#0F7A55 !important; } html[data-pepiq-theme="light"] .t6{ --c:#A8395F !important; } html[data-pepiq-theme="light"] #pq-hero .tile{ border-left:3px solid var(--c) !important; } html[data-pepiq-theme="light"] #pq-hero .tile .tnum{ color:var(--c) !important; } /* ---- HOMEPAGE: dark tracker showcase — keep dark, relight text (the bug) ---- */ /* .showcase has a hardcoded dark gradient bg; the light theme was darkening its inner text to ink, making it invisible. Force inner copy back to light. */ html[data-pepiq-theme="light"] .showcase .sc-copy h3{ color:#f5f0e6 !important; } html[data-pepiq-theme="light"] .showcase .sc-copy li{ color:#d6d0c2 !important; } html[data-pepiq-theme="light"] .showcase .cmpd, html[data-pepiq-theme="light"] .showcase .mv, html[data-pepiq-theme="light"] .showcase .tb-label{ color:#f0ebdd !important; } html[data-pepiq-theme="light"] .showcase .live-label, html[data-pepiq-theme="light"] .showcase .live-meta, html[data-pepiq-theme="light"] .showcase .mc, html[data-pepiq-theme="light"] .showcase .ml, html[data-pepiq-theme="light"] .showcase .sc-copy .price{ color:#a8a090 !important; } /* ---- PLATFORM: stat row -> equal boxes ---- */ html[data-pepiq-theme="light"] .pepiq-hero-stats{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(72px,1fr)) !important; gap:8px !important; overflow:visible !important; } html[data-pepiq-theme="light"] .pepiq-stat{ background:#fdfaf3 !important; border:1px solid #d8d0bd !important; border-radius:11px !important; padding:13px 6px !important; min-width:0 !important; align-items:center !important; box-shadow:0 12px 30px -16px rgba(60,48,20,.2) !important; } html[data-pepiq-theme="light"] .pepiq-stat-num{ color:#B6841C !important; } html[data-pepiq-theme="light"] .pepiq-stat-label{ color:#8a8470 !important; opacity:1 !important; } /* ---- PLATFORM: part-nav -> wrapping grid (kills the sideways task-bar) ---- */ html[data-pepiq-theme="light"] .part-nav-bar{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(92px,1fr)) !important; gap:7px !important; overflow:visible !important; min-height:0 !important; } html[data-pepiq-theme="light"] .pn-btn{ justify-content:center !important; text-align:center !important; border:1px solid currentColor !important; border-radius:999px !important; padding:9px 6px !important; white-space:nowrap !important; } /* ============================================================ VERSION A — sharpened homepage + platform (deepened accents, dark-showcase text fix, boxed platform stats). Light-gated. Part-nav grid held for its own drop (scroll container). ============================================================ */ /* ---- HOMEPAGE tiles: deepen the 3 accents the base palette doesn't cover ---- */ html[data-pepiq-theme="light"] #pq-hero{ --cyan:#0E6E7C !important; --tan:#B26B12 !important; --rose:#A8395F !important; } /* ---- HOMEPAGE dark tracker showcase: stays dark on purpose, but the theme's li/h2/p -> ink rules bled in and killed the text. Restore light-on-dark. ---- */ html[data-pepiq-theme="light"] .reveal .reyebrow{ color:#c9a84c !important; } html[data-pepiq-theme="light"] .reveal h2{ color:#f4efe7 !important; } html[data-pepiq-theme="light"] .reveal .sub{ color:#cfc9ba !important; } html[data-pepiq-theme="light"] .sc-copy h3{ color:#f4efe7 !important; } html[data-pepiq-theme="light"] .sc-copy li{ color:#d8d3c6 !important; } html[data-pepiq-theme="light"] .live-label, html[data-pepiq-theme="light"] .tb-label{ color:#cfc9ba !important; } html[data-pepiq-theme="light"] .cmpd, html[data-pepiq-theme="light"] .mv{ color:#f4efe7 !important; } html[data-pepiq-theme="light"] .pct{ color:#5fd39a !important; } html[data-pepiq-theme="light"] .live-meta, html[data-pepiq-theme="light"] .mc, html[data-pepiq-theme="light"] .price{ color:#9a9486 !important; } html[data-pepiq-theme="light"] .ml{ color:#c9a84c !important; } html[data-pepiq-theme="light"] .foot{ color:#8a8470 !important; } /* ---- PLATFORM stats: box them, and kill the mobile sideways-scroll ---- */ html[data-pepiq-theme="light"] .pepiq-hero-stats{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(72px,1fr)) !important; gap:8px !important; overflow:visible !important; flex-wrap:wrap !important; } html[data-pepiq-theme="light"] .pepiq-stat{ background:#fdfaf3 !important; border:1px solid #d8d0bd !important; border-radius:11px !important; padding:13px 6px !important; min-width:0 !important; box-shadow:0 1px 2px rgba(60,48,20,.05), 0 12px 30px -16px rgba(60,48,20,.20) !important; } /* ============================================================ PLATFORM BAND FIX (priority) — the part-nav pills were collapsing to ovals, colliding with search, and using the bright old-theme colours; the tool-tile row scrolled sideways. Force a clean stacked, equal-grid layout on mobile + deepen the 8 part accents for cream. Light-gated. ============================================================ */ @media (max-width:900px){ /* the whole band stacks; drop the heavy dark shadow */ html[data-pepiq-theme="light"] .part-nav-bar{ display:flex !important; flex-direction:column !important; gap:8px !important; padding:10px 12px !important; box-shadow:none !important; overflow:visible !important; } /* part pills: even 2-col grid, no sideways scroll, no clipping */ html[data-pepiq-theme="light"] .part-nav-parts{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:7px !important; width:100% !important; overflow:visible !important; padding:0 !important; -webkit-mask-image:none !important; mask-image:none !important; } html[data-pepiq-theme="light"] .pn-btn{ display:flex !important; align-items:center; justify-content:center; height:auto !important; min-height:38px; padding:8px 10px !important; border:1.5px solid currentColor !important; border-bottom:1.5px solid currentColor !important; border-radius:10px !important; background:color-mix(in srgb,currentColor 7%,transparent) !important; white-space:normal !important; text-align:center; line-height:1.15; font-size:9px !important; } /* tool tiles: even 2-col grid instead of sideways scroll */ html[data-pepiq-theme="light"] .tn-bar{ display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:8px !important; overflow:visible !important; flex-wrap:wrap !important; padding:10px 12px !important; -webkit-mask-image:none !important; mask-image:none !important; } html[data-pepiq-theme="light"] .part-nav-search{ width:100% !important; } } /* deepen the 8 part accents (bright -> cream-legible ink versions) */ html[data-pepiq-theme="light"] .pn-btn.nav-p1{ color:#0E6E7C !important; } html[data-pepiq-theme="light"] .pn-btn.nav-p2{ color:#B26B12 !important; } html[data-pepiq-theme="light"] .pn-btn.nav-p3{ color:#0F7A55 !important; } html[data-pepiq-theme="light"] .pn-btn.nav-p4{ color:#5A43A8 !important; } html[data-pepiq-theme="light"] .pn-btn.nav-p5{ color:#A8395F !important; } html[data-pepiq-theme="light"] .pn-btn.nav-p6{ color:#BC4636 !important; } html[data-pepiq-theme="light"] .pn-btn.nav-p7{ color:#2C5FA8 !important; } html[data-pepiq-theme="light"] .pn-btn.nav-p8{ color:#6A4AB0 !important; }