/* Pakstoor :: light-mode.css :: v2.1-000034 :: 2026-06-06 */ /** * Copyright © 2026 Pakstoor (Pty) Ltd. All rights reserved. * Light mode CSS — applied via [data-theme="light"] on . * Zero risk to dark baseline: if this file is removed nothing breaks. * CSS-only. No fonts changed. No layout changed. No backend touched. */ /* ═══════════════════════════════════════════════════════════ 1. CSS CUSTOM PROPERTY OVERRIDES Warm champagne / parchment / gold / graphite palette. ═══════════════════════════════════════════════════════════ */ [data-theme="light"] { /* Backgrounds — Cobalt Ledger: crisp cool-white surfaces, navy shell */ --bg: #F3F7FC; /* page — cool daylight */ --bg-1: #E4ECF5; /* sections */ --bg-2: #FFFFFF; /* cards — crisp white */ --bg-3: #EEF3F9; /* inset / placeholder */ --bg-4: #DCE7F2; /* deep inset */ --black-deep: #111418; /* dark anchor */ /* Text — dark ink hierarchy (gold/navy NEVER used for body) */ --ink: #111418; /* headings / primary / dense copy */ --ink-muted: #2D3848; /* body copy */ --ink-2: #3C4858; /* secondary */ --ink-dim: #627083; /* metadata */ --ink-faint: #8A96A9; /* placeholders */ --heading-accent: #28466F; /* navy — major display headings / eyebrows / selected titles ONLY */ /* Borders — cool cobalt-grey */ --line: #D4DEEA; --line-2: #C5D2E1; --line-bright: #8FA4BF; /* Gold — brand anchor (locked; display/CTA/selection only on light) */ --gold: #D9A625; --gold-light: #EAC04C; --gold-deep: #B88518; --gold-dim: #7A5711; --gold-ink: #111418; --gold-wash: rgba(217,166,37,.10); --gold-wash-2: rgba(217,166,37,.18); /* Blue — trust blue */ --blue: #356E9C; --blue-soft: #5E8BB5; --blue-wash: rgba(53,110,156,.10); --blue-wash-2: rgba(53,110,156,.16); --blue-border: rgba(53,110,156,.30); --info: #356E9C; --info-wash: rgba(53,110,156,.10); /* Steel — silver / platinum */ --steel: #677283; --steel-light: #A8B3C1; --steel-dim: #54606F; --steel-deep: #465262; --steel-wash: rgba(103,114,131,.08); /* Semantic states */ --success: #2F7A58; --success-deep: #1F5C41; --success-wash: rgba(47,122,88,.10); --warning: #A56A1B; --warning-wash: rgba(165,106,27,.10); --danger: #AE4A3E; --danger-wash: rgba(174,74,62,.10); /* Shadows — cool */ --elev-1: 0 1px 4px 0 rgba(20,28,40,.10), 0 0 0 1px var(--line-2); --elev-2: 0 10px 30px -8px rgba(20,28,40,.16), 0 0 0 1px var(--line-bright); --elev-3: 0 24px 64px -12px rgba(20,28,40,.22), 0 0 0 1px var(--line-bright); --glow-gold: 0 0 0 3px rgba(217,166,37,.24); /* pk- colour aliases */ --pk-gold: var(--gold); --pk-gold-deep: var(--gold-deep); --pk-blue: #356E9C; --pk-blue-soft: #5E8BB5; --pk-blue-wash: rgba(53,110,156,.12); --pk-blue-border: rgba(53,110,156,.30); --pk-purple: #6F58C5; --pk-purple-soft: #927FDE; --pk-purple-wash: rgba(111,88,197,.12); --pk-purple-border: rgba(111,88,197,.30); --pk-green: var(--success); --pk-green-wash: var(--success-wash); --pk-silver: var(--steel-light); --pk-silver-soft: #D2D9E2; --pk-black: var(--black-deep); --pk-charcoal: var(--bg); --pk-graphite: var(--bg-1); --pk-border: var(--line-2); --pk-muted: var(--ink-muted); /* pks- legacy aliases */ --pks-black: var(--black-deep); --pks-dark-navy: var(--bg); --pks-navy-mid: var(--bg-2); --pks-navy-light: var(--bg-3); --pks-slate: var(--ink-muted); --pks-dim: var(--steel-dim); --pks-gold-bright: #C29A1F; --pks-gold: var(--gold); --pks-gold-mid: var(--gold-deep); --pks-gold-dim: var(--gold-dim); --pks-green: var(--success); --pks-orange: var(--warning); --pks-red: var(--danger); --pks-blue: var(--blue); --pks-purple: var(--pk-purple); --pks-silver-light: var(--steel-light); --pks-steel-light: var(--steel); --pks-steel: var(--steel-deep); /* Bars — cobalt navy structural chrome */ --bar-bg: #1B2B44; --bar-border: #273A59; --bar-ink: #F3F7FC; --bar-muted: #C4D1E2; --bar-active: #D9A625; color-scheme: light; } /* Scrollbar — dark charcoal (matches the top bar) in light mode */ [data-theme="light"] { scrollbar-color: #14181D #DFE3EA; scrollbar-width: thin; } [data-theme="light"] ::-webkit-scrollbar { width: 12px; height: 12px; } [data-theme="light"] ::-webkit-scrollbar-track { background: #DFE3EA; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: #14181D; border-radius: 8px; border: 3px solid #DFE3EA; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #2A313A; } /* ═══════════════════════════════════════════════════════════ 2. THEME TOGGLE — pill slider in sysbar ═══════════════════════════════════════════════════════════ */ .sysbar-theme-toggle { display: inline-flex; align-items: center; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 20px; width: 34px; height: 18px; cursor: pointer; position: relative; transition: background 0.25s ease, border-color 0.25s ease; flex-shrink: 0; vertical-align: middle; padding: 0; margin: 0; } .sysbar-theme-toggle:focus-visible { outline: none; box-shadow: var(--glow-gold); } .sysbar-theme-knob { width: 14px; height: 14px; border-radius: 50%; background: var(--steel); display: flex; align-items: center; justify-content: center; transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), background 0.25s ease; position: absolute; left: 1px; top: 1px; } .sysbar-theme-toggle .icon-sun, .sysbar-theme-toggle .icon-moon { position: absolute; line-height: 0; transition: opacity 0.18s ease; } .sysbar-theme-toggle .icon-sun { opacity: 0; } .sysbar-theme-toggle .icon-moon { opacity: 1; } [data-theme="light"] .sysbar-theme-toggle { background: rgba(217,166,37,.18); border-color: var(--gold-deep); } [data-theme="light"] .sysbar-theme-knob { transform: translateX(16px); background: var(--gold); } [data-theme="light"] .sysbar-theme-toggle .icon-sun { opacity: 1; } [data-theme="light"] .sysbar-theme-toggle .icon-moon { opacity: 0; } /* ═══════════════════════════════════════════════════════════ 3. GLOBAL PAGE ═══════════════════════════════════════════════════════════ */ [data-theme="light"] body { background: var(--bg); color: var(--ink); } /* ═══════════════════════════════════════════════════════════ 4. SYSBAR ═══════════════════════════════════════════════════════════ */ [data-theme="light"] .sysbar { background: var(--bar-bg) !important; border-bottom: 1px solid var(--bar-border) !important; color: var(--bar-ink); } [data-theme="light"] .sysbar a, [data-theme="light"] .sysbar-sep, [data-theme="light"] .sysbar-ledger-item { color: var(--bar-muted); } [data-theme="light"] .sysbar-heartbeat { background: var(--bar-active); } [data-theme="light"] #sysbarStatus { color: var(--bar-active); } /* ═══════════════════════════════════════════════════════════ 5. TOP NAV ═══════════════════════════════════════════════════════════ */ [data-theme="light"] .nav, [data-theme="light"] header.nav { background: rgba(252,253,255,.90) !important; border-bottom-color: var(--line) !important; backdrop-filter: blur(12px); } [data-theme="light"] .nav-link { color: var(--ink-muted); } [data-theme="light"] .nav-link:hover { color: var(--ink); } [data-theme="light"] .nav-search-input { background: var(--bg-2); border-color: var(--line-2); color: var(--ink); } [data-theme="light"] .nav-search-input::placeholder { color: var(--ink-faint); } [data-theme="light"] .nav-action-icon { color: var(--ink-muted); } [data-theme="light"] .nav-action-icon:hover { color: var(--ink); } [data-theme="light"] .nav-avatar { background: var(--line-2); color: var(--ink); } [data-theme="light"] .nav-badge { background: var(--gold); color: var(--ink); } /* Profile dropdown */ [data-theme="light"] .nav-profile-menu { background: var(--bg-2); border-color: var(--line-2); box-shadow: 0 8px 32px rgba(20,30,55,.18), 0 0 0 1px var(--line-2); } [data-theme="light"] .nav-profile-head { background: var(--bg-1); border-bottom-color: var(--line); } [data-theme="light"] .nav-profile-name { color: var(--ink); } [data-theme="light"] .nav-profile-email { color: var(--ink-muted); } [data-theme="light"] .nav-profile-item { color: var(--ink); } [data-theme="light"] .nav-profile-item:hover { background: var(--bg-1); } [data-theme="light"] .nav-profile-sep { background: var(--line); } [data-theme="light"] .nav-profile-section-label { color: var(--ink-faint); } /* Mobile drawer */ [data-theme="light"] .drawer { background: var(--bg-2); border-right-color: var(--line-2); } [data-theme="light"] .drawer-overlay { background: rgba(17,14,9,.55); } [data-theme="light"] .drawer-head { background: var(--bg-1); border-bottom-color: var(--line); } [data-theme="light"] .drawer-title { color: var(--ink); } [data-theme="light"] .drawer-link { color: var(--ink); } [data-theme="light"] .drawer-link:hover { background: var(--bg-1); } [data-theme="light"] .drawer-section-label{ color: var(--ink-faint); } [data-theme="light"] .drawer-foot { border-top-color: var(--line); background: var(--bg-1); } /* Scroll progress */ [data-theme="light"] .scroll-progress { background: var(--gold); } /* ═══════════════════════════════════════════════════════════ 6. HERO — background photo, keep dark mode colours exactly ═══════════════════════════════════════════════════════════ */ [data-theme="light"] .hero { color: #ECEFF2; } [data-theme="light"] .hero-title, [data-theme="light"] .hero-title em, [data-theme="light"] .hero-subtitle, [data-theme="light"] .hero-eyebrow, [data-theme="light"] .hero-trust, [data-theme="light"] .hero-cta-secondary-link, [data-theme="light"] .hero-ledger, [data-theme="light"] .hero-ledger-dot, [data-theme="light"] .hero-ledger-text, [data-theme="light"] .hero-scroll-cue { color: #ECEFF2 !important; } /* Lock hero subtitle white — it sits on the dark background photo */ [data-theme="light"] .hero-subtitle { color: #ECEFF2 !important; } [data-theme="light"] .hero-trust-chip { color: #ECEFF2; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08); } [data-theme="light"] .hero-eyebrow-dot { background: var(--gold); } [data-theme="light"] .hero-search-input { background: rgba(20,24,29,.55); color: #ECEFF2; border-color: rgba(255,255,255,.18); } [data-theme="light"] .hero-search-input::placeholder { color: rgba(236,239,242,.55); } [data-theme="light"] .hero-search-icon { color: #ECEFF2; } /* ═══════════════════════════════════════════════════════════ 7. LISTING SECTIONS ═══════════════════════════════════════════════════════════ */ [data-theme="light"] .home-marketplace, [data-theme="light"] .explore-section, [data-theme="light"] .explore-body, [data-theme="light"] .explore-pro-rail { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-1) 100%); } /* Tiny separation where the listing grid meets the hero (hero itself untouched) */ [data-theme="light"] .home-marketplace { border-top: 1px solid var(--line); } [data-theme="light"] .explore-featured-grid, [data-theme="light"] .explore-grid { background: transparent; } [data-theme="light"] .explore-featured-label { color: var(--ink-muted); } [data-theme="light"] .explore-featured-sub { color: var(--ink-dim); } /* ═══════════════════════════════════════════════════════════ 8. LISTING CARDS — THE BIG FIX ═══════════════════════════════════════════════════════════ */ [data-theme="light"] .card-item { background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: var(--elev-1); color: var(--ink); } [data-theme="light"] .card-item:hover { border-color: var(--gold); box-shadow: var(--elev-2); transform: translateY(-2px); } /* Image placeholder */ [data-theme="light"] .card-item-bg, [data-theme="light"] .card-item-bg[data-ph="1"] { background: var(--bg-3); } /* ── CARD BODY / INFO AREA — grounded warm finish ── */ [data-theme="light"] .card-item-body { background: var(--bg-2); border-top: 1px solid var(--line); } [data-theme="light"] .card-item-title { color: var(--ink); font-weight: 600; } [data-theme="light"] .card-item-titleline { color: var(--ink); } [data-theme="light"] .card-item-price { color: var(--ink); font-weight: 700; } [data-theme="light"] .card-item-meta { color: var(--ink-muted); } [data-theme="light"] .card-item-loc { color: var(--ink-muted); } [data-theme="light"] .card-item-time { color: var(--ink-dim); } /* Trust pill */ [data-theme="light"] .card-item-trustpill { background: var(--gold-wash); border-color: rgba(169,120,18,.45); color: var(--gold-deep); } /* Save button — light glass over image */ [data-theme="light"] .card-item-save { background: rgba(247,248,250,.82); color: var(--ink-dim); } [data-theme="light"] .card-item-save:hover { background: rgba(247,248,250,.95); color: var(--ink); } [data-theme="light"] .card-item-save.is-saved{ color: var(--gold); } /* Verified mark */ [data-theme="light"] .card-item-verifiedmark { color: #247A4A; } /* ── SHIELD ICON (::after on cards) — visible on warm body ── */ [data-theme="light"] #homeMarketplaceGrid .card-item::after, [data-theme="light"] #homeFeaturedGrid .card-item::after, [data-theme="light"] #exploreFeaturedGrid .card-item::after, [data-theme="light"] #exploreGrid .card-item::after { filter: brightness(0.58) saturate(1.15) drop-shadow(0 1px 2px rgba(30,40,55,.35)) !important; } /* ── PRO/PREMIUM CARD — crisp gold, no neon glow ── */ [data-theme="light"] .card-item.tier-pro .card-item-title { color: var(--gold-light) !important; text-shadow: none !important; } [data-theme="light"] .card-item.tier-pro:hover .card-item-title { color: var(--gold) !important; text-shadow: none !important; } [data-theme="light"] .card-item.tier-pro { border-color: var(--line-2) !important; box-shadow: var(--elev-1) !important; } [data-theme="light"] .card-item.tier-pro:hover { border-color: var(--gold) !important; box-shadow: 0 6px 24px rgba(217,166,37,.20), 0 0 0 1px var(--gold) !important; } /* ── SKELETON LOADERS ── */ [data-theme="light"] .skel { background: linear-gradient(90deg, var(--bg-3) 25%, var(--line) 50%, var(--bg-3) 75%); background-size: 200% 100%; animation: skel-shimmer 1.6s ease-in-out infinite; } @keyframes skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ═══════════════════════════════════════════════════════════ 9. CAROUSEL / MARQUEE CARDS ═══════════════════════════════════════════════════════════ */ [data-theme="light"] .pks-marquee-card { background: var(--bg-2); border-color: var(--line-2) !important; box-shadow: var(--elev-1) !important; } [data-theme="light"] .pks-marquee-card:hover { border-color: var(--gold) !important; box-shadow: 0 6px 24px rgba(217,166,37,.22), 0 0 0 1px var(--gold) !important; } /* Carousel card info/body area */ [data-theme="light"] .pks-marquee-card .card-item-body, [data-theme="light"] .pks-marquee-card-body, [data-theme="light"] .pks-marquee-card-info { background: var(--bg-2); border-top: 1px solid var(--line); } [data-theme="light"] .pks-marquee-card-img { background: var(--bg-3); } /* Title — near-black default, amber on hover */ [data-theme="light"] .pks-marquee-card .pks-marquee-card-title { color: var(--ink) !important; text-shadow: none !important; } [data-theme="light"] .pks-marquee-card:hover .pks-marquee-card-title { color: var(--gold-light) !important; } [data-theme="light"] .pks-marquee-card .pks-marquee-card-loc { color: var(--ink-muted); } /* Marquee shield */ [data-theme="light"] .pks-marquee-shield { background: rgba(155,122,47,.85); box-shadow: 0 1px 3px rgba(30,40,55,.35); } [data-theme="light"] .pks-marquee-shield svg { color: var(--bg-2); } /* ═══════════════════════════════════════════════════════════ 10. CATEGORY TILES — warm default, gold hover ═══════════════════════════════════════════════════════════ */ [data-theme="light"] .cat-tile { background: var(--bg-1); border-color: var(--line-2); box-shadow: 0 2px 10px rgba(20,30,55,.10), 0 0 0 1px var(--line-2) !important; color: var(--ink); } [data-theme="light"] .cat-tile-name { color: var(--ink); font-weight: 600; } [data-theme="light"] .cat-tile-count { color: var(--ink-muted); font-weight: 500; } [data-theme="light"] .cat-tile-icon { color: #6B4F0D; } [data-theme="light"] .cat-tile:hover { background: #FCFDFF !important; border-color: var(--gold) !important; box-shadow: 0 6px 20px rgba(217,166,37,.22), 0 0 0 1px var(--gold) !important; transform: translateY(-2px); } [data-theme="light"] .cat-tile:hover .cat-tile-name { color: var(--ink); } [data-theme="light"] .cat-tile:hover .cat-tile-count { color: var(--gold-light); } [data-theme="light"] .cat-tile:hover .cat-tile-icon { color: var(--gold); filter: drop-shadow(0 0 5px rgba(217,166,37,.40)); } /* ═══════════════════════════════════════════════════════════ 11. HOW-IT-WORKS / TRANSACTION FLOW — full illustration fix Every element of the 5-stage diagram rebuilt for light mode. ═══════════════════════════════════════════════════════════ */ /* Section background — warm gradient */ [data-theme="light"] .pks-tf-section { background: linear-gradient(160deg, var(--bg-1) 0%, var(--bg) 55%, var(--bg-2) 100%) !important; border-top-color: var(--line); border-bottom-color: var(--line); } [data-theme="light"] .pks-tf-bg-haze { background: radial-gradient(40% 30% at 16% 28%, rgba(217,166,37,.06) 0%, transparent 70%), radial-gradient(45% 35% at 84% 72%, rgba(53,110,156,.08) 0%, transparent 72%), radial-gradient(60% 40% at 50% 50%, transparent 0%, rgba(215,220,227,.60) 80%); filter: blur(24px); } [data-theme="light"] .pks-tf-bg-glow { background: radial-gradient(60% 50% at 50% 50%, rgba(217,166,37,.05) 0%, transparent 70%); filter: blur(60px); } [data-theme="light"] .pks-tf-bg-grain { opacity: 0.20; } [data-theme="light"] .pks-tf-section::before { background: linear-gradient(90deg, transparent 0%, rgba(217,166,37,.45) 50%, transparent 100%); } /* Progress ribbon */ [data-theme="light"] .pks-tf-progress { background: rgba(223,227,234,.82); border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-muted); backdrop-filter: blur(6px); } [data-theme="light"] .pks-tf-progress-live { color: #247A4A; background: rgba(36,122,74,.12); border: 1px solid rgba(36,122,74,.30); border-radius: 999px; padding: 1px 8px; } [data-theme="light"] .pks-tf-progress-id { color: var(--gold-deep); } [data-theme="light"] .pks-tf-progress-sep { background: rgba(191,167,111,.50); } [data-theme="light"] .pks-tf-progress-seg { background: var(--line); } [data-theme="light"] .pks-tf-progress-seg.is-done { background: var(--gold); } [data-theme="light"] .pks-tf-progress-seg.is-now { background: var(--gold); box-shadow: 0 0 6px rgba(217,166,37,.50); } /* Main timeline card */ [data-theme="light"] .pks-tf-card { background: rgba(252,253,255,.94) !important; border: 1px solid var(--line-2) !important; border-radius: 22px; backdrop-filter: blur(8px); box-shadow: 0 1px rgba(255,255,255,.80) inset, 0 4px 24px rgba(20,30,55,.14), 0 0 0 1px var(--line-2) !important; } [data-theme="light"] .pks-tf-card::before { display: none; } [data-theme="light"] .pks-tf-card::after { display: none; } /* Live tag in card corner */ [data-theme="light"] .pks-tf-live-tag { background: rgba(36,122,74,.15); border: 1px solid rgba(36,122,74,.30); color: #1A5835; } /* ════════════════════════════════════════════════════════════ TRUST JOURNEY — PROPER COLOUR SYSTEM Each stage carries its own semantic colour identity. Gold=payment · Blue=escrow · Green=tracking · Purple=inspection · Gold+green=payout ════════════════════════════════════════════════════════════ */ /* ── Shared base ── */ [data-theme="light"] .pks-tf-stage-desc { color: var(--ink-muted) !important; font-size: 13px !important; } /* ── STAGE TITLES — colored per meaning (matches photo) ── */ [data-theme="light"] .pks-tf-stage[data-step="1"] .pks-tf-stage-title { color: var(--gold-light) !important; } [data-theme="light"] .pks-tf-stage[data-step="2"] .pks-tf-stage-title { color: #2E6388 !important; } [data-theme="light"] .pks-tf-stage[data-step="3"] .pks-tf-stage-title { color: #247A4A !important; } [data-theme="light"] .pks-tf-stage[data-step="4"] .pks-tf-stage-title { color: rgba(123,77,204,.90) !important; } [data-theme="light"] .pks-tf-stage[data-step="5"] .pks-tf-stage-title { color: rgba(169,120,24,.80) !important; } [data-theme="light"] .pks-tf-stage-proof { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } /* ── STAGE 01 — SECURE PAYMENT — GOLD ── */ [data-theme="light"] .pks-tf-stage[data-step="1"].is-reached .pks-tf-node { background: radial-gradient(closest-side, #FCFDFF, #FCFDFF) !important; border: 2px solid var(--gold) !important; color: var(--gold-deep) !important; box-shadow: 0 0 0 1px rgba(217,166,37,.45) inset, 0 0 18px rgba(217,166,37,.28), 0 4px 12px rgba(20,30,55,.14), 0 0 0 4px rgba(217,166,37,.10) !important; } [data-theme="light"] .pks-tf-stage[data-step="1"].is-reached .pks-tf-node-ring { border-color: rgba(217,166,37,.40) !important; opacity: 1 !important; } [data-theme="light"] .pks-tf-stage[data-step="1"] .pks-tf-step-label { color: var(--gold-light) !important; opacity: 1 !important; } [data-theme="light"] .pks-tf-stage[data-step="1"] .pks-tf-stage-title { color: var(--gold-light) !important; } [data-theme="light"] .pks-tf-stage[data-step="1"] .pks-tf-stage-proof { background: rgba(217,166,37,.18); border: 1px solid rgba(217,166,37,.55); color: #5A3B00; } [data-theme="light"] .pks-tf-stage[data-step="1"] .pks-tf-stage-proof svg { color: var(--gold); } /* Stage 1 beam → blue (connecting into escrow) */ [data-theme="light"] .pks-tf-stage[data-step="1"] .pks-tf-beam { background-image: linear-gradient(90deg, rgba(217,166,37,.70), rgba(46,99,136,.60)) !important; background-size: 100% 100% !important; opacity: 1 !important; } [data-theme="light"] .pks-tf-stage[data-step="1"] .pks-tf-beam-energy { background: linear-gradient(90deg, transparent, rgba(217,166,37,.85), transparent); } /* ── STAGE 02 — ESCROW PROTECTION — ELECTRIC BLUE ── */ [data-theme="light"] .pks-tf-stage[data-step="2"].is-reached .pks-tf-node { background: radial-gradient(closest-side, #F0F6FC, #D8EAF7) !important; border: 2px solid #2E6388 !important; color: #1A3F5A !important; box-shadow: 0 0 0 1px rgba(46,99,136,.40) inset, 0 0 18px rgba(46,99,136,.25), 0 4px 12px rgba(20,40,80,.14), 0 0 0 4px rgba(46,99,136,.10) !important; } [data-theme="light"] .pks-tf-stage[data-step="2"].is-reached .pks-tf-node-ring { border-color: rgba(46,99,136,.35) !important; opacity: 1 !important; } [data-theme="light"] .pks-tf-stage[data-step="2"] .pks-tf-step-label { color: #2E6388 !important; opacity: 1 !important; } [data-theme="light"] .pks-tf-stage[data-step="2"] .pks-tf-stage-title { color: #2E6388 !important; } [data-theme="light"] .pks-tf-stage[data-step="2"] .pks-tf-stage-proof { background: rgba(46,99,136,.15); border: 1px solid rgba(46,99,136,.50); color: #0E2B45; } [data-theme="light"] .pks-tf-stage[data-step="2"] .pks-tf-stage-proof svg { color: #2E6388; } /* Stage 2 beam → green (connecting into courier) */ [data-theme="light"] .pks-tf-stage[data-step="2"] .pks-tf-beam { background-image: linear-gradient(90deg, rgba(46,99,136,.70), rgba(36,122,74,.60)) !important; background-size: 100% 100% !important; opacity: 1 !important; } [data-theme="light"] .pks-tf-stage[data-step="2"] .pks-tf-beam-energy { background: linear-gradient(90deg, transparent, rgba(46,99,136,.85), transparent); } /* ── STAGE 03 — COURIER VERIFIED — GREEN (ACTIVE/LIVE) ── */ [data-theme="light"] .pks-tf-stage[data-step="3"].is-active .pks-tf-node { background: radial-gradient(closest-side, #EEF8F2, #C8EDD8) !important; border: 2px solid #247A4A !important; color: #1A5835 !important; box-shadow: 0 0 0 1px rgba(36,122,74,.45) inset, 0 0 26px rgba(36,122,74,.40), 0 6px 20px rgba(10,50,25,.18), 0 0 0 6px rgba(36,122,74,.12) !important; } [data-theme="light"] .pks-tf-stage[data-step="3"].is-active .pks-tf-node-ring { border-color: rgba(36,122,74,.55) !important; opacity: 1 !important; } [data-theme="light"] .pks-tf-stage[data-step="3"]:not(.is-future) .pks-tf-step-label { color: #247A4A !important; opacity: 1 !important; } [data-theme="light"] .pks-tf-stage[data-step="3"]:not(.is-future) .pks-tf-stage-title { color: #247A4A !important; } [data-theme="light"] .pks-tf-stage[data-step="3"]:not(.is-future) .pks-tf-stage-proof { background: rgba(36,122,74,.18); border: 1px solid rgba(36,122,74,.60); color: #0C3A1E; } [data-theme="light"] .pks-tf-stage[data-step="3"]:not(.is-future) .pks-tf-stage-proof svg { color: #247A4A; } /* Stage 3 beam → purple (connecting into inspection) */ [data-theme="light"] .pks-tf-stage[data-step="3"] .pks-tf-beam { background-image: linear-gradient(90deg, rgba(36,122,74,.70), rgba(123,77,204,.55)) !important; background-size: 100% 100% !important; opacity: 1 !important; } [data-theme="light"] .pks-tf-stage[data-step="3"] .pks-tf-beam-energy { background: linear-gradient(90deg, transparent, rgba(36,122,74,.85), transparent); } /* ── STAGE 04 — BUYER INSPECTION — PURPLE (UPCOMING, NOT DEAD) ── */ [data-theme="light"] .pks-tf-stage[data-step="4"].is-future .pks-tf-node { background: radial-gradient(closest-side, #F5F2FC, #E8DEFF) !important; border: 1.5px solid rgba(123,77,204,.55) !important; color: rgba(123,77,204,.80) !important; box-shadow: 0 0 0 1px rgba(123,77,204,.18) inset, 0 2px 10px rgba(80,40,160,.10), 0 0 0 3px rgba(123,77,204,.08) !important; } [data-theme="light"] .pks-tf-stage[data-step="4"].is-future .pks-tf-node-ring { border-color: rgba(123,77,204,.25) !important; opacity: 1 !important; } [data-theme="light"] .pks-tf-stage[data-step="4"].is-future .pks-tf-step-label { color: rgba(123,77,204,.85) !important; opacity: 1 !important; } [data-theme="light"] .pks-tf-stage[data-step="4"].is-future .pks-tf-stage-title { color: rgba(123,77,204,.88) !important; } [data-theme="light"] .pks-tf-stage[data-step="4"].is-future .pks-tf-stage-desc { color: rgba(61,28,130,.65) !important; } [data-theme="light"] .pks-tf-stage[data-step="4"].is-future .pks-tf-stage-proof { background: rgba(123,77,204,.12); border: 1px solid rgba(123,77,204,.38); color: rgba(61,28,130,.75); } [data-theme="light"] .pks-tf-stage[data-step="4"].is-future .pks-tf-stage-proof svg { color: rgba(123,77,204,.75); } /* Stage 4 beam → gold-green (connecting into payout) */ [data-theme="light"] .pks-tf-stage[data-step="4"] .pks-tf-beam { background-image: linear-gradient(90deg, rgba(123,77,204,.55), rgba(217,166,37,.50)) !important; background-size: 100% 100% !important; opacity: 1 !important; } /* ── STAGE 05 — FUNDS RELEASED — GOLD + GREEN SUCCESS ── */ [data-theme="light"] .pks-tf-stage[data-step="5"].is-future .pks-tf-node { background: radial-gradient(closest-side, #FCFDFF, #FCFDFF) !important; border: 1.5px solid rgba(169,120,24,.55) !important; color: rgba(139,100,17,.75) !important; box-shadow: 0 0 0 1px rgba(217,166,37,.20) inset, 0 2px 10px rgba(20,30,55,.10), 0 0 0 3px rgba(217,166,37,.08) !important; } [data-theme="light"] .pks-tf-stage[data-step="5"].is-future .pks-tf-node-ring { border-color: rgba(217,166,37,.22) !important; opacity: 1 !important; } [data-theme="light"] .pks-tf-stage[data-step="5"].is-future .pks-tf-step-label { color: rgba(169,120,24,.85) !important; opacity: 1 !important; } [data-theme="light"] .pks-tf-stage[data-step="5"].is-future .pks-tf-stage-title { color: rgba(169,120,24,.88) !important; } [data-theme="light"] .pks-tf-stage[data-step="5"].is-future .pks-tf-stage-desc { color: rgba(80,60,20,.65) !important; } [data-theme="light"] .pks-tf-stage[data-step="5"].is-future .pks-tf-stage-proof { background: linear-gradient(90deg, rgba(217,166,37,.14), rgba(36,122,74,.10)); border: 1px solid rgba(169,120,24,.42); color: rgba(20,30,55,.80); } [data-theme="light"] .pks-tf-stage[data-step="5"].is-future .pks-tf-stage-proof svg { color: rgba(36,122,74,.70); } /* ── STAGE PILLS — semantic colour per meaning ── */ [data-theme="light"] .pks-tf-stage-pill { border-radius: 999px; font-weight: 700; font-size: 9.5px; letter-spacing: .14em; border: 1px solid; padding: 3px 9px; } /* Protected — strong gold */ [data-theme="light"] .pks-tf-stage-pill.is-protected { background: rgba(217,166,37,.25); border-color: rgba(217,166,37,.65); color: #5A3B00; } /* Trust held — electric blue */ [data-theme="light"] .pks-tf-stage-pill.is-trust { background: rgba(46,99,136,.22); border-color: rgba(46,99,136,.60); color: #0E2B45; } /* Tracking — strong green, live feel */ [data-theme="light"] .pks-tf-stage-pill.is-tracking { background: rgba(36,122,74,.24); border-color: rgba(36,122,74,.65); color: #0C3A1E; } /* Pending — purple */ [data-theme="light"] .pks-tf-stage-pill.is-pending { background: rgba(123,77,204,.18); border-color: rgba(123,77,204,.55); color: #3D1E88; } /* Payout due — gold-green */ [data-theme="light"] .pks-tf-stage-pill.is-due { background: linear-gradient(90deg, rgba(217,166,37,.20), rgba(36,122,74,.14)); border-color: rgba(169,120,24,.55); color: #3A2400; } /* ── HOVER — any stage shifts to gold ring ── */ [data-theme="light"] .pks-tf-stage:hover .pks-tf-node { border-color: var(--gold) !important; box-shadow: 0 0 0 1px rgba(217,166,37,.40) inset, 0 0 18px rgba(217,166,37,.28), 0 4px 12px rgba(20,30,55,.14) !important; } [data-theme="light"] .pks-tf-stage:hover .pks-tf-stage-title { color: var(--ink) !important; } [data-theme="light"] .pks-tf-stage:hover .pks-tf-stage-desc { color: #2E2418 !important; } /* ── MOBILE VERTICAL BEAMS ── */ @media (max-width: 640px) { [data-theme="light"] .pks-tf-stage[data-step="1"] .pks-tf-beam { background: linear-gradient(180deg, rgba(217,166,37,.70), rgba(46,99,136,.60)) !important; background-size: 100% 100% !important; } [data-theme="light"] .pks-tf-stage[data-step="2"] .pks-tf-beam { background: linear-gradient(180deg, rgba(46,99,136,.70), rgba(36,122,74,.60)) !important; background-size: 100% 100% !important; } [data-theme="light"] .pks-tf-stage[data-step="3"] .pks-tf-beam { background: linear-gradient(180deg, rgba(36,122,74,.70), rgba(123,77,204,.55)) !important; background-size: 100% 100% !important; } [data-theme="light"] .pks-tf-stage[data-step="4"] .pks-tf-beam { background: linear-gradient(180deg, rgba(123,77,204,.55), rgba(217,166,37,.50)) !important; background-size: 100% 100% !important; opacity: 1 !important; } } /* ── PROMISE LINE ── */ [data-theme="light"] .pks-tf-promise { color: var(--ink) !important; font-weight: 600 !important; } [data-theme="light"] .pks-tf-promise::before, [data-theme="light"] .pks-tf-promise::after { background: linear-gradient(90deg, transparent, rgba(217,166,37,.65), transparent) !important; } /* ── EYEBROW / TITLE / LEDE ── */ [data-theme="light"] .pks-tf-eyebrow { color: var(--heading-accent) !important; border-color: var(--blue-border) !important; background: var(--blue-wash) !important; } [data-theme="light"] .pks-tf-title { color: var(--ink); } [data-theme="light"] .pks-tf-lede { color: #2E2418; font-weight: 500; } /* ═══════════════════════════════════════════════════════════ 12. DOSSIER PAGES — /about, /privacy, /terms, /safety, /trust etc. The hero card is hardcoded #14181D — fix it. ═══════════════════════════════════════════════════════════ */ /* Hero card — replaces hardcoded #14181D with warm gradient */ [data-theme="light"] .dossier-page .dossier-hero { background: linear-gradient(160deg, rgba(217,166,37,.08) 0%, rgba(255,255,255,.04) 40%, transparent 100%), linear-gradient(180deg, #F2EBD8 0%, #EDE4CC 100%) !important; border-color: var(--line-2) !important; box-shadow: 0 2px 16px rgba(20,30,55,.12), 0 0 0 1px var(--line-2) !important; } /* Warm gold bloom replaces cold steel radial mesh */ [data-theme="light"] .dossier-page .dossier-hero::before { background: radial-gradient(720px 320px at 88% -8%, rgba(217,166,37,.22), transparent 60%), radial-gradient(640px 360px at -8% 110%, rgba(191,167,111,.12), transparent 60%), radial-gradient(380px 220px at 20% 30%, rgba(217,166,37,.08), transparent 70%); } [data-theme="light"] .dossier-page .dossier-hero::after { opacity: 0.012; } /* Hero text — uses CSS vars, but bump for clarity */ [data-theme="light"] .dossier-page .dossier-hero-title { color: var(--ink); } [data-theme="light"] .dossier-page .dossier-hero-deck { color: var(--ink-muted); } [data-theme="light"] .dossier-page .dossier-hero-version { color: var(--ink-dim); } [data-theme="light"] .dossier-page .dossier-hero-classification { background: rgba(217,166,37,.10); border-color: rgba(217,166,37,.35); color: var(--gold-deep); } [data-theme="light"] .dossier-page .dossier-ledger { border-color: var(--line); } /* Dossier cards — use CSS vars, just fix hover shadow */ [data-theme="light"] .dossier-page .dossier-card { background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 60%), var(--bg-2); border-color: var(--line-2); box-shadow: 0 2px 10px rgba(20,30,55,.10); } [data-theme="light"] .dossier-page .dossier-card:hover { border-color: var(--gold); box-shadow: 0 6px 24px rgba(20,30,55,.16), 0 0 0 1px rgba(217,166,37,.20); } [data-theme="light"] .dossier-page .dossier-card.is-hero { background: radial-gradient(420px 160px at 90% 0%, rgba(217,166,37,.10), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 60%), var(--bg-2); } /* Dossier rule divider */ [data-theme="light"] .dossier-page .dossier-rule { background: linear-gradient(90deg, transparent 0, var(--line-2) 12%, rgba(217,166,37,.35) 50%, var(--line-2) 88%, transparent 100%); } /* Section numerals / kicker */ [data-theme="light"] .dossier-page .dossier-section-numeral { color: rgba(191,167,111,.50); } [data-theme="light"] .dossier-page .dossier-section-kicker { color: var(--gold-deep); } [data-theme="light"] .dossier-page .dossier-section-title { color: var(--ink); } [data-theme="light"] .dossier-page .dossier-section-sub { color: var(--ink-muted); } /* Disclosure block */ [data-theme="light"] .dossier-page .dossier-disclosure { background: linear-gradient(90deg, rgba(217,166,37,.06) 0%, transparent 32%), var(--bg-2); border-color: var(--line-2); border-left-color: rgba(217,166,37,.45); } /* Evidence / table surfaces */ [data-theme="light"] .dossier-page .dossier-evidence-row { border-color: var(--line); } [data-theme="light"] .dossier-page .dossier-table th { background: var(--bg-1); color: var(--ink-muted); } [data-theme="light"] .dossier-page .dossier-table td { border-color: var(--line); } [data-theme="light"] .dossier-page .dossier-callout { background: linear-gradient(90deg, rgba(217,166,37,.06) 0%, transparent 50%), var(--bg-2); border-color: var(--line-2); } /* Split sides */ [data-theme="light"] .dossier-page .dossier-split-side { border-color: var(--line); background: var(--bg-2); } /* ═══════════════════════════════════════════════════════════ 13. FORM CONTROLS ═══════════════════════════════════════════════════════════ */ [data-theme="light"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), [data-theme="light"] textarea, [data-theme="light"] select { background: var(--bg-2); color: var(--ink); border-color: var(--line-2); } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: var(--ink-faint); } [data-theme="light"] input:focus, [data-theme="light"] textarea:focus, [data-theme="light"] select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,166,37,.22); outline: none; } /* ═══════════════════════════════════════════════════════════ 13. BUTTONS ═══════════════════════════════════════════════════════════ */ /* Primary stays gold */ [data-theme="light"] .btn-primary { background: var(--gold); border-color: var(--gold-light); color: var(--ink); } [data-theme="light"] .btn-primary:hover { background: var(--gold-light); border-color: var(--gold-deep); } /* Secondary — graphite on light */ [data-theme="light"] .btn-secondary { background: #171A21; border-color: #171A21; color: var(--bg-2); } [data-theme="light"] .btn-secondary:hover { background: #2A2F3A; border-color: var(--gold); } /* Ghost */ [data-theme="light"] .btn-ghost { color: var(--ink-muted); } [data-theme="light"] .btn-ghost:hover { background: var(--bg-1); color: var(--ink); } /* Explore filter buttons */ [data-theme="light"] .explore-head .btn-secondary { background: var(--bg-2) !important; border-color: var(--line-2) !important; color: var(--ink) !important; } [data-theme="light"] .explore-head .btn-secondary:hover { background: #FCFDFF !important; border-color: var(--gold) !important; color: var(--gold-light) !important; } /* ═══════════════════════════════════════════════════════════ 14. MODALS / SHEETS ═══════════════════════════════════════════════════════════ */ [data-theme="light"] .modal, [data-theme="light"] .modal-wrap, [data-theme="light"] .modal-inner { background: var(--bg-2); border-color: var(--line-2); box-shadow: 0 24px 64px rgba(20,30,55,.22), 0 0 0 1px var(--line-2); } [data-theme="light"] .modal-head, [data-theme="light"] .modal-header { border-bottom-color: var(--line); background: var(--bg-1); } [data-theme="light"] .modal-foot, [data-theme="light"] .modal-footer { border-top-color: var(--line); background: var(--bg-1); } [data-theme="light"] .modal-title { color: var(--ink); } [data-theme="light"] .modal-overlay, [data-theme="light"] .overlay { background: rgba(17,14,9,.55); } /* ═══════════════════════════════════════════════════════════ 15. TOASTS ═══════════════════════════════════════════════════════════ */ [data-theme="light"] .pks-toast { background: var(--bg-2); border-color: var(--line-2); color: var(--ink); box-shadow: 0 4px 16px rgba(20,30,55,.16); } /* ═══════════════════════════════════════════════════════════ 16. FOOTER — warm champagne, not dark, not blue ═══════════════════════════════════════════════════════════ */ /* Footer = dark cobalt bottom-bar (anchors the light page), light text */ [data-theme="light"] .footer-v2, [data-theme="light"] .site-footer, [data-theme="light"] footer { background: var(--bar-bg) !important; color: var(--bar-ink) !important; border-top: 1px solid var(--bar-border) !important; } [data-theme="light"] .footer-v2-trust-strip { background: rgba(255,255,255,.04) !important; border-bottom: 1px solid var(--bar-border) !important; } [data-theme="light"] .footer-v2-trust-eyebrow { color: var(--bar-muted) !important; } [data-theme="light"] .footer-v2-trust-cta { color: var(--bar-ink) !important; } [data-theme="light"] .footer-v2-trust-cta:hover{ color: var(--gold) !important; } [data-theme="light"] .footer-v2-trust-pill { color: var(--bar-muted) !important; background: rgba(255,255,255,.06) !important; border-color: var(--bar-border) !important; } [data-theme="light"] .footer-v2 a { color: var(--bar-muted) !important; } [data-theme="light"] .footer-v2 a:hover { color: var(--gold) !important; } [data-theme="light"] .footer-v2-link-btn { color: var(--bar-muted) !important; background: none !important; border: none !important; } [data-theme="light"] .footer-v2-link-btn:hover{ color: var(--gold) !important; } [data-theme="light"] .footer-v2-col-head { color: var(--bar-ink) !important; font-weight: 700; } [data-theme="light"] .footer-v2-col-divider { background: var(--bar-border) !important; } [data-theme="light"] .footer-v2-brand-tagline { color: var(--bar-muted) !important; } [data-theme="light"] .footer-v2-brand-copy { color: var(--bar-muted) !important; opacity: .82; } [data-theme="light"] .footer-v2-brand-badge { color: var(--bar-muted) !important; background: rgba(255,255,255,.06) !important; border-color: var(--bar-border) !important; } [data-theme="light"] .footer-v2-sig-glyph { color: var(--gold) !important; } [data-theme="light"] .footer-v2-sig-slogan { color: var(--bar-ink) !important; } [data-theme="light"] .footer-v2-sig-slogan span { color: var(--gold) !important; } [data-theme="light"] .footer-v2-bottom { border-top-color: var(--bar-border) !important; color: var(--bar-muted) !important; } [data-theme="light"] .footer-v2-bottom-strong { color: var(--bar-ink) !important; } [data-theme="light"] .footer-v2-bottom-sep { color: var(--bar-border) !important; } [data-theme="light"] .footer-v2-bottom .is-gold { color: var(--gold) !important; } /* ═══════════════════════════════════════════════════════════ 17. GENERIC PANELS / SURFACES ═══════════════════════════════════════════════════════════ */ [data-theme="light"] .panel, [data-theme="light"] .pks-card, [data-theme="light"] .card-panel, [data-theme="light"] .info-block, [data-theme="light"] .detail-block { background: var(--bg-2); border-color: var(--line-2); box-shadow: 0 2px 10px rgba(20,30,55,.10), 0 0 0 1px var(--line-2); } /* ═══════════════════════════════════════════════════════════ 18. TABLES ═══════════════════════════════════════════════════════════ */ [data-theme="light"] table { border-color: var(--line); } [data-theme="light"] th { background: var(--bg-1); color: var(--ink-muted); border-color: var(--line-2); } [data-theme="light"] td { border-color: var(--line); } [data-theme="light"] tr:hover td { background: rgba(221,212,195,.50); } /* ═══════════════════════════════════════════════════════════ 19. BADGES / PILLS — strong semantic contrast ═══════════════════════════════════════════════════════════ */ [data-theme="light"] .badge, [data-theme="light"] .pill, [data-theme="light"] .tag { background: var(--bg-1); color: var(--ink-muted); border-color: var(--line-2); } /* Semantic overrides */ [data-theme="light"] .badge-success, [data-theme="light"] .badge-safe { background: rgba(36,122,74,.15); color: #1A5835; border-color: rgba(36,122,74,.35); } [data-theme="light"] .badge-warning, [data-theme="light"] .badge-amber { background: rgba(184,121,24,.15); color: #7A4800; border-color: rgba(184,121,24,.35); } [data-theme="light"] .badge-danger, [data-theme="light"] .badge-risk { background: rgba(166,61,53,.15); color: #7A1A12; border-color: rgba(166,61,53,.35); } [data-theme="light"] .badge-info { background: rgba(46,99,136,.15); color: #1A3F5A; border-color: rgba(46,99,136,.35); } [data-theme="light"] .badge-gold, [data-theme="light"] .badge-pro { background: rgba(217,166,37,.20); color: #6B4F0D; border-color: var(--line-2); } /* ═══════════════════════════════════════════════════════════ 20. DIVIDERS / CODE / TOOLTIPS / MISC ═══════════════════════════════════════════════════════════ */ [data-theme="light"] hr, [data-theme="light"] .sep, [data-theme="light"] .divider { border-color: var(--line); background: var(--line); } [data-theme="light"] code, [data-theme="light"] pre { background: var(--bg-1); color: var(--ink); border-color: var(--line-2); } [data-theme="light"] .tooltip, [data-theme="light"] [role="tooltip"] { background: #171A21; color: var(--bg-2); border-color: #171A21; } /* ═══════════════════════════════════════════════════════════ 21. SCROLLBAR / SELECTION ═══════════════════════════════════════════════════════════ */ [data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-1); } [data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--line-bright); } [data-theme="light"] ::selection { background: rgba(217,166,37,.30); color: var(--ink); } /* ═══════════════════════════════════════════════════════════ SWEEP — all other hardcoded dark backgrounds on public pages ═══════════════════════════════════════════════════════════ */ /* cinematic: trust strip, closing seal, telemetry chips */ [data-theme="light"] .trust-strip { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-1) 100%) !important; border-color: var(--line-2) !important; } [data-theme="light"] .trust-strip::before { background: linear-gradient(90deg, transparent, rgba(217,166,37,.30), transparent) !important; } [data-theme="light"] .closing-seal { background: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 100%) !important; border-color: var(--line-2) !important; color: var(--ink) !important; } [data-theme="light"] .closing-seal-rule { background: linear-gradient(to right, transparent 0%, var(--line) 50%, transparent 100%) !important; } [data-theme="light"] .pks-tf-tel-chip { background: rgba(255,255,255,.75) !important; border-color: var(--line-2) !important; color: var(--ink-muted) !important; } /* core: overlays, protmodal, badge */ [data-theme="light"] .overlay, [data-theme="light"] .pku-modal-backdrop, [data-theme="light"] .pks-protmodal-overlay { background: rgba(17,14,9,.55) !important; } [data-theme="light"] .pks-protmodal-card { background: var(--bg-2) !important; border-color: var(--line-2) !important; } [data-theme="light"] .pks-protmodal-item { background: var(--bg-2) !important; border-color: var(--line) !important; } /* card save buttons */ [data-theme="light"] .card-item-save, [data-theme="light"] .pks-marquee-card-save { background: rgba(248,244,234,.80) !important; color: var(--ink-dim) !important; } [data-theme="light"] .card-item-save:hover, [data-theme="light"] .pks-marquee-card-save:hover { background: var(--bg-2) !important; color: var(--ink) !important; } [data-theme="light"] .card-item-save.is-saved { color: var(--gold) !important; } /* legal page cards */ [data-theme="light"] .legal-contact-card, [data-theme="light"] .paia-doc-card { background: var(--bg-2) !important; border-color: var(--line-2) !important; color: var(--ink) !important; } /* seller profile */ [data-theme="light"] .seller-head { background: linear-gradient(160deg, #F2EBD8, #EDE4CC) !important; border-color: var(--line-2) !important; } [data-theme="light"] .seller-stat { background: var(--bg-2) !important; border-color: var(--line) !important; color: var(--ink) !important; } [data-theme="light"] .seller-empty { background: #EDE4CC !important; color: var(--ink-muted) !important; } [data-theme="light"] .seller-review { background: var(--bg-2) !important; border-color: var(--line) !important; } /* parcels / tracking */ [data-theme="light"] .trk-inner, [data-theme="light"] .trk-result, [data-theme="light"] .trk-form { background: var(--bg-2) !important; border-color: var(--line-2) !important; } [data-theme="light"] .trk-input { background: var(--bg-2) !important; border-color: var(--line-2) !important; color: var(--ink) !important; } [data-theme="light"] .trk-card-status-bar { background: #EDE4CC !important; border-color: var(--line) !important; } /* deal page surfaces */ [data-theme="light"] .deal-pipeline { background: var(--bg-2) !important; border-color: var(--line-2) !important; } [data-theme="light"] .deal-waybill-confirm, [data-theme="light"] .deal-autobook-ref, [data-theme="light"] .deal-waybill-add { background: #EDE4CC !important; border-color: var(--line) !important; } [data-theme="light"] .deal-tracking { background: var(--bg-2) !important; border-color: var(--line-2) !important; } [data-theme="light"] .deal-addr-modal { background: var(--bg-2) !important; border-color: var(--line-2) !important; } [data-theme="light"] .deal-addr-saved-card { background: #EDE4CC !important; border-color: var(--line) !important; } /* sell form */ [data-theme="light"] .sell-city-tile, [data-theme="light"] .sell-parcel-tile { background: var(--bg-2) !important; border-color: var(--line-2) !important; color: var(--ink) !important; } [data-theme="light"] .sell-location-preview { background: #EDE4CC !important; border-color: var(--line) !important; } [data-theme="light"] .pks-pg-search { background: var(--bg-2) !important; border-color: var(--line-2) !important; color: var(--ink) !important; } [data-theme="light"] .pks-pg-item:hover { background: #EDE4CC !important; } /* trust progress page */ [data-theme="light"] .tp-ladder-step.is-locked { background: #EDE4CC !important; border-color: var(--line) !important; } [data-theme="light"] .tp-empty { background: var(--bg-2) !important; border-color: var(--line-2) !important; } /* account/settings */ [data-theme="light"] .acct-trust-pill { background: #EDE4CC !important; border-color: var(--line-2) !important; color: var(--ink-muted) !important; } [data-theme="light"] .settings-recovery-codes { background: var(--bg-1) !important; border-color: var(--line) !important; color: var(--ink) !important; } /* redeem */ [data-theme="light"] .rd-input { background: var(--bg-2) !important; border-color: var(--line-2) !important; color: var(--ink) !important; } /* home trust ladder */ [data-theme="light"] .pks-trust-ladder { background: var(--bg-2) !important; border-color: var(--line-2) !important; } [data-theme="light"] .pks-trust-ladder-pill.is-future .pks-trust-ladder-num { background: var(--bg-1) !important; color: var(--ink-faint) !important; } /* ── dossier closing seal — "Pakstoor in one line" bottom section on /about ── */ [data-theme="light"] .dossier-page .dossier-closing-seal { background: radial-gradient(420px 240px at 50% 40%, rgba(217,166,37,.22), transparent 70%), linear-gradient(160deg, #F5EDD8 0%, #EDE4C8 50%, #F8F2E0 100%) !important; border-color: rgba(217,166,37,.45) !important; box-shadow: 0 4px 24px rgba(20,30,55,.12), inset 0 1px 0 rgba(255,255,255,.50) !important; } [data-theme="light"] .dossier-page .dossier-seal-eyebrow { color: var(--gold-deep); } [data-theme="light"] .dossier-page .dossier-seal-title { color: var(--ink); } [data-theme="light"] .dossier-page .dossier-seal-title span { color: var(--gold); } [data-theme="light"] .dossier-page .dossier-seal-sub { color: var(--ink-muted); } [data-theme="light"] .dossier-page .dossier-seal-stamp { color: var(--ink-dim); border-top-color: rgba(191,167,111,.45); } [data-theme="light"] .dossier-page .dossier-seal-glyph { background: radial-gradient(circle at 50% 30%, rgba(217,166,37,.25), transparent 60%), rgba(217,166,37,.08) !important; border-color: rgba(217,166,37,.55) !important; box-shadow: 0 0 0 4px rgba(217,166,37,.10), 0 0 20px rgba(217,166,37,.18) !important; color: var(--gold-light) !important; } /* ═══════════════════════════════════════════════════════════ GOLD POP — inject brand gold (var(--gold)) into labels, prices, eyebrows, section titles, icons, featured elements. Background is warm + neutral; foreground carries the brand. ═══════════════════════════════════════════════════════════ */ /* ── Card prices — stronger, gold-anchored ── */ [data-theme="light"] .card-item-price { color: var(--ink) !important; font-weight: 700 !important; } [data-theme="light"] .card-item-price::before { color: var(--gold-light); } /* ── Listing card titles — bolder ── */ [data-theme="light"] .card-item-title, [data-theme="light"] .card-item-titleline { font-weight: 600 !important; color: var(--ink) !important; } /* ── Trust pill on cards — gold pop ── */ [data-theme="light"] .card-item-trustpill { background: rgba(217,166,37,.20) !important; border-color: rgba(169,120,24,.55) !important; color: #6B4F0D !important; font-weight: 600 !important; } [data-theme="light"] .card-item-trustpill svg { color: var(--gold) !important; } /* ── Explore / section eyebrows and labels — gold ── */ [data-theme="light"] .explore-featured-label, [data-theme="light"] .explore-section-label, [data-theme="light"] .section-eyebrow, [data-theme="light"] .t-eyebrow, [data-theme="light"] .eyebrow { color: var(--heading-accent) !important; } [data-theme="light"] .explore-featured-sub, [data-theme="light"] .section-sub { color: var(--gold-deep) !important; } /* ── Featured/marketplace section headings ── */ [data-theme="light"] #homeMarketplaceTitle .explore-featured-label { color: var(--gold) !important; } [data-theme="light"] #homeMarketplaceTitle .explore-featured-sub { color: var(--gold-light) !important; } [data-theme="light"] .explore-featured .explore-featured-head .explore-featured-label { color: var(--gold-light) !important; } [data-theme="light"] .explore-featured .explore-featured-head .explore-featured-sub { color: #6B4F0D !important; } /* ── Category section heading ── */ [data-theme="light"] .cats-head, [data-theme="light"] .cats-title { color: var(--ink) !important; } [data-theme="light"] .cats-eyebrow { color: var(--heading-accent) !important; } /* ── Category tile default — gold icon + label ── */ [data-theme="light"] .cat-tile-icon { color: var(--gold-light) !important; } [data-theme="light"] .cat-tile-count { color: var(--gold) !important; font-weight: 600 !important; } [data-theme="light"] .cat-tile-name { color: var(--ink) !important; font-weight: 700 !important; } /* ── NEW badge on cards ── */ [data-theme="light"] .card-new-badge { background: rgba(217,166,37,.22) !important; color: #6B4F0D !important; border: 1px solid rgba(169,120,24,.45) !important; } [data-theme="light"] .card-new-dot { background: var(--gold) !important; box-shadow: 0 0 5px rgba(217,166,37,.60) !important; } /* ── Pro/premium badge labels ── */ [data-theme="light"] .card-boosted-badge, [data-theme="light"] .card-premium-badge { color: #6B4F0D !important; text-shadow: none !important; } /* ── Sysbar ledger ticker — gold accents ── */ [data-theme="light"] .sysbar-ledger-item strong { color: var(--gold-light) !important; } [data-theme="light"] .sysbar-heartbeat { background: var(--gold) !important; box-shadow: 0 0 6px rgba(217,166,37,.50) !important; } /* ── Nav sell button — gold ── */ [data-theme="light"] .btn.btn-primary.nav-sell, [data-theme="light"] .nav-sell { background: var(--gold) !important; border-color: var(--gold-light) !important; color: var(--ink) !important; } [data-theme="light"] .nav-sell:hover { background: var(--gold-light) !important; } /* ── Nav links — active state gold ── */ [data-theme="light"] .nav-link.is-active, [data-theme="light"] .nav-link[aria-current="page"] { color: var(--gold) !important; } /* ── Search input — gold focus ── */ [data-theme="light"] .hero-search-btn, [data-theme="light"] .nav-search-btn { background: var(--gold) !important; color: var(--ink) !important; } /* ── Explore sort/filter bar ── */ [data-theme="light"] .explore-sort { background: var(--bg) !important; border-bottom-color: var(--line-2) !important; } [data-theme="light"] .explore-sort-btn { color: var(--ink) !important; } [data-theme="light"] .explore-sort-btn.is-active { color: var(--gold) !important; border-bottom-color: var(--gold) !important; } [data-theme="light"] .explore-head .explore-featured-label { color: var(--gold) !important; } /* ── Listing count / result chip ── */ [data-theme="light"] .explore-count, [data-theme="light"] #homeMarketplaceCount { color: var(--gold-deep) !important; font-weight: 600 !important; } /* ── Item page price — gold treatment ── */ [data-theme="light"] .item-price, [data-theme="light"] .item-price-amount { color: var(--ink) !important; font-weight: 700 !important; } [data-theme="light"] .item-price-label { color: var(--gold-deep) !important; } /* ── Item page buy button ── */ [data-theme="light"] .btn-buy, [data-theme="light"] .pks-sticky-buy .btn-primary { background: var(--gold) !important; color: var(--ink) !important; border-color: var(--gold-light) !important; } [data-theme="light"] .btn-buy:hover { background: var(--gold-light) !important; } /* ── Seller trust level label ── */ [data-theme="light"] .sp-trust-level { font-weight: 700 !important; } /* ── Dossier page section numerals — gold tint ── */ [data-theme="light"] .dossier-page .dossier-section-numeral { color: rgba(169,120,24,.55) !important; font-weight: 700 !important; } [data-theme="light"] .dossier-page .dossier-section-kicker { color: var(--gold-light) !important; } /* ── Footer BUY SMART. stays dark, SELL SAFE. stays gold ── */ [data-theme="light"] .footer-v2-sig-slogan { color: var(--bar-ink) !important; font-weight: 700 !important; } [data-theme="light"] .footer-v2-sig-slogan span { color: var(--gold) !important; } /* ── Section dividers — gold line ── */ [data-theme="light"] .dossier-rule { background: linear-gradient(90deg, transparent 0%, var(--gold) 12%, rgba(217,166,37,.35) 50%, var(--gold) 88%, transparent 100%) !important; opacity: 0.45; } /* ── Marquee/carousel title — deep amber, not full-brightness gold at scale ── */ [data-theme="light"] .pks-marquee-card .pks-marquee-card-title { color: var(--ink) !important; font-weight: 600 !important; } [data-theme="light"] .pks-marquee-card:hover .pks-marquee-card-title { color: var(--gold-light) !important; } /* ── How-it-works eyebrow ── */ [data-theme="light"] .pks-tf-eyebrow { color: var(--heading-accent) !important; } /* ── Promise line decorators ── */ [data-theme="light"] .pks-tf-promise { color: var(--ink) !important; font-weight: 600 !important; } /* ═══════════════════════════════════════════════════════════ STOPS SECTION — "What Pakstoor stops" contrast cards ═══════════════════════════════════════════════════════════ */ /* Section background — kill the dark gradient at the bottom */ [data-theme="light"] .stops { background: linear-gradient(165deg, var(--bg) 0%, var(--bg-1) 45%, var(--bg-4) 100%) !important; } [data-theme="light"] .stops::before { background: radial-gradient(closest-side, rgba(27,43,68,.16), transparent 70%) !important; } [data-theme="light"] .stops::after { background: linear-gradient(90deg, transparent 0%, rgba(217,166,37,.35) 50%, transparent 100%) !important; } /* Grid alignment — force equal height rows, no 2-row disaster */ [data-theme="light"] .stops-grid { align-items: start !important; } [data-theme="light"] .stops-card { background: var(--bg-2) !important; border: 1px solid var(--line-2) !important; box-shadow: 0 2px 12px rgba(20,30,55,.10) !important; height: 100%; } /* Both halves must stretch to fill the card height */ [data-theme="light"] .stops-card-bad, [data-theme="light"] .stops-card-good { flex: 1; min-height: 0; } /* THE GAP tag — dark wine text on subtle red tint, NOT solid fill */ [data-theme="light"] .stops-tag-bad { color: #6B1A12 !important; background: rgba(166,61,53,.14) !important; border: 1px solid rgba(166,61,53,.45) !important; font-weight: 700 !important; } /* Dot — dark wine, no salmon/coral */ [data-theme="light"] .stops-tag-bad::before { background: #7A2B22 !important; box-shadow: none !important; } /* ON PAKSTOOR tag — deep amber text on subtle gold tint, NOT solid gold fill */ [data-theme="light"] .stops-tag-good { color: #5A3B00 !important; background: rgba(217,166,37,.18) !important; border: 1px solid rgba(169,120,24,.55) !important; font-weight: 700 !important; } [data-theme="light"] .stops-tag-good::before { background: #6B4F0D !important; box-shadow: none !important; } /* THE GAP card half */ [data-theme="light"] .stops-card-bad { background: linear-gradient(180deg, rgba(166,61,53,.14) 0%, rgba(166,61,53,.05) 60%, transparent 100%) !important; border-right: 1px solid rgba(166,61,53,.35) !important; } [data-theme="light"] .stops-card-bad::before { background: radial-gradient(ellipse 70% 80% at 50% 30%, rgba(166,61,53,.16) 0%, rgba(166,61,53,.06) 40%, transparent 70%) !important; opacity: 1 !important; } [data-theme="light"] .stops-card-bad::after { background: repeating-linear-gradient(90deg, rgba(166,61,53,.18) 0 6px, transparent 6px 11px) !important; opacity: 1 !important; } [data-theme="light"] .stops-quote { color: #5A1A12 !important; } [data-theme="light"] .stops-bad-note { color: #3D1A14 !important; } /* ON PAKSTOOR card half */ [data-theme="light"] .stops-card-good { background: linear-gradient(180deg, rgba(217,166,37,.18) 0%, rgba(217,166,37,.06) 60%, transparent 100%) !important; } [data-theme="light"] .stops-card-good::before { background: radial-gradient(ellipse 80% 100% at 50% 90%, rgba(36,122,74,.14) 0%, rgba(217,166,37,.10) 35%, transparent 70%) !important; opacity: 1 !important; } [data-theme="light"] .stops-good-headline { color: var(--ink) !important; font-weight: 700 !important; } [data-theme="light"] .stops-good-note { color: #2E2418 !important; } /* Section heading — dark amber, not red */ [data-theme="light"] .stops-eyebrow { color: #6B1A12 !important; background: rgba(166,61,53,.08) !important; border-color: rgba(166,61,53,.28) !important; } [data-theme="light"] .stops-title { color: var(--ink) !important; } [data-theme="light"] .stops-lede { color: #2E2418 !important; } [data-theme="light"] .stops-foot-link { color: var(--gold-light) !important; border-color: rgba(169,120,24,.45) !important; background: rgba(169,120,24,.08) !important; } /* ═══════════════════════════════════════════════════════════ DARK-GOLD TEXT — deep amber var(--gold-light) for elements that need stronger gold contrast on warm beige (not washed-out yellow) ═══════════════════════════════════════════════════════════ */ /* Primary CTAs — deep amber button */ [data-theme="light"] .btn-primary { background: var(--gold) !important; border-color: var(--gold-light) !important; color: var(--ink) !important; } [data-theme="light"] .btn-primary:hover { background: var(--gold-light) !important; border-color: #7A5500 !important; } /* Gold-text elements — use deep amber not washed yellow */ [data-theme="light"] .t-gold, [data-theme="light"] .is-gold, [data-theme="light"] [class*="gold-text"] { color: var(--gold-light) !important; } /* Eyebrows / kickers that use gold var */ [data-theme="light"] .t-eyebrow, [data-theme="light"] .eyebrow, [data-theme="light"] .section-eyebrow { color: var(--gold-light) !important; font-weight: 700 !important; } /* Explore featured labels */ [data-theme="light"] .explore-featured-label { color: var(--gold-light) !important; font-weight: 700 !important; } [data-theme="light"] #homeMarketplaceTitle .explore-featured-label { color: var(--gold-light) !important; } /* Nav sell button — deep amber on hover */ [data-theme="light"] .nav-sell:hover { background: var(--gold-light) !important; border-color: #7A5500 !important; } /* Dossier gold kicker */ [data-theme="light"] .dossier-page .dossier-section-kicker { color: var(--gold-light) !important; font-weight: 700 !important; } /* Trust/escrow gold labels */ [data-theme="light"] .pks-tf-eyebrow { color: var(--heading-accent) !important; } /* ═══════════════════════════════════════════════════════════ COMPREHENSIVE CONTRAST + ANTI-CRAYON FIXES Covers: item page, condition chips, trust badges, nav search, form focus, section dividers, account surfaces, sell form, explore chips, seller verified badge, status tags. All rules: [data-theme="light"] only. Premium, not crayon. ═══════════════════════════════════════════════════════════ */ /* ── NAV SEARCH — stronger presence on warm bg ── */ [data-theme="light"] .nav-search-wrap { background: var(--bg-2) !important; border-color: var(--line-2) !important; } [data-theme="light"] .nav-search-input { background: var(--bg-2) !important; border: 1.5px solid var(--line-2) !important; color: var(--ink) !important; box-shadow: 0 0 0 0 transparent; } [data-theme="light"] .nav-search-input:focus { border-color: var(--gold-light) !important; box-shadow: 0 0 0 3px rgba(169,120,24,.18) !important; outline: none !important; } [data-theme="light"] .nav-search-btn { background: var(--gold-light) !important; color: var(--bg-2) !important; border-color: var(--gold-deep) !important; } [data-theme="light"] .nav-search-btn:hover { background: var(--gold-deep) !important; } /* ── FORM INPUTS — visible focus states, stronger borders ── */ [data-theme="light"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), [data-theme="light"] textarea, [data-theme="light"] select { border: 1.5px solid var(--line-2) !important; } [data-theme="light"] input:focus:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), [data-theme="light"] textarea:focus, [data-theme="light"] select:focus { border-color: var(--gold-light) !important; box-shadow: 0 0 0 3px rgba(169,120,24,.18) !important; outline: none !important; } [data-theme="light"] .field-label, [data-theme="light"] .form-label, [data-theme="light"] .t-label, [data-theme="light"] label { color: var(--ink-muted) !important; font-weight: 500; } /* ── ITEM PAGE — price, trust, badges, chips ── */ [data-theme="light"] .item-price, [data-theme="light"] .item-price-amount { color: var(--ink) !important; font-weight: 800 !important; } [data-theme="light"] .item-price-label { color: #6B4F0D !important; font-weight: 600 !important; } /* Currency symbol before price */ [data-theme="light"] .item-price-currency { color: var(--gold-light) !important; font-weight: 700 !important; } /* Seller verified badge — green, not washed-out */ [data-theme="light"] .item-seller-verified, [data-theme="light"] .pks-verified-badge { background: rgba(36,122,74,.14) !important; border: 1px solid rgba(36,122,74,.40) !important; color: #1A5835 !important; font-weight: 600 !important; } [data-theme="light"] .item-seller-verified svg, [data-theme="light"] .pks-verified-badge svg { color: #247A4A !important; } /* Seller trust level badges — readable amber tint */ [data-theme="light"] .item-seller-badge, [data-theme="light"] .trust-badge, [data-theme="light"] [class*="trust-badge"] { background: rgba(217,166,37,.16) !important; border: 1px solid rgba(169,120,24,.45) !important; color: #5A3B00 !important; font-weight: 600 !important; } /* Condition acknowledgement block */ [data-theme="light"] .item-cond-ack, [data-theme="light"] .item-cond-ack-wrap { background: rgba(217,166,37,.08) !important; border: 1px solid rgba(169,120,24,.30) !important; } [data-theme="light"] .item-cond-ack-grade { color: #6B4F0D !important; background: rgba(217,166,37,.14) !important; border: 1px solid rgba(169,120,24,.40) !important; font-weight: 700 !important; } [data-theme="light"] .item-cond-ack-body, [data-theme="light"] .item-cond-ack p { color: var(--ink-muted) !important; } /* Item meta stack — condition, category, location */ [data-theme="light"] .item-meta-row { border-color: var(--line) !important; } [data-theme="light"] .item-meta-row dt, [data-theme="light"] .item-specs dt, [data-theme="light"] .item-meta-key { color: var(--ink-dim) !important; font-weight: 500 !important; } [data-theme="light"] .item-meta-row dd, [data-theme="light"] .item-specs dd, [data-theme="light"] .item-meta-val { color: var(--ink) !important; font-weight: 600 !important; } [data-theme="light"] .item-meta-icon { color: var(--gold-light) !important; } /* Spec table row separators */ [data-theme="light"] .item-specs tr { border-color: var(--line) !important; } /* Item safety cards */ [data-theme="light"] .item-safety-row { border-color: var(--line) !important; } [data-theme="light"] .item-safety-label { color: var(--ink) !important; font-weight: 600 !important; } [data-theme="light"] .item-safety-desc { color: var(--ink-muted) !important; } [data-theme="light"] .item-safety-icon { color: #2E6388 !important; } /* Trust panel */ [data-theme="light"] .item-trust-head { color: var(--ink) !important; font-weight: 700 !important; } [data-theme="light"] .item-trust-label { color: var(--ink) !important; font-weight: 600 !important; } [data-theme="light"] .item-trust-desc { color: var(--ink-muted) !important; } [data-theme="light"] .item-trust-icon { color: #2E6388 !important; } /* Delivery labels */ [data-theme="light"] .item-delivery-label { color: var(--ink-muted) !important; font-weight: 500 !important; } [data-theme="light"] .item-delivery-value { color: var(--ink) !important; font-weight: 600 !important; } /* ── SECTION DIVIDERS — visible gold seam ── */ [data-theme="light"] .section-divider, [data-theme="light"] .s-divider, [data-theme="light"] .page-divider { background: linear-gradient(90deg, transparent 0%, var(--line-2) 15%, rgba(217,166,37,.45) 50%, var(--line-2) 85%, transparent 100%) !important; height: 1px !important; border: none !important; opacity: 0.80 !important; } /* Dossier rule — already fixed above but reinforce opacity */ [data-theme="light"] .dossier-rule { opacity: 0.65 !important; } /* ── CONDITION CHIPS / STATUS TAGS ── */ /* Generic chip — ensure fill is visible */ [data-theme="light"] .chip, [data-theme="light"] .status-chip, [data-theme="light"] .pks-chip { background: var(--bg-1) !important; border: 1px solid var(--line-2) !important; color: var(--ink-muted) !important; } /* Chip variants */ [data-theme="light"] .chip-gold, [data-theme="light"] .chip-pro, [data-theme="light"] .pks-chip-gold { background: rgba(217,166,37,.18) !important; border-color: rgba(169,120,24,.50) !important; color: #5A3B00 !important; font-weight: 600 !important; } [data-theme="light"] .chip-success, [data-theme="light"] .chip-safe, [data-theme="light"] .pks-chip-green { background: rgba(36,122,74,.14) !important; border-color: rgba(36,122,74,.38) !important; color: #1A5835 !important; font-weight: 600 !important; } [data-theme="light"] .chip-danger, [data-theme="light"] .chip-risk, [data-theme="light"] .pks-chip-red { background: rgba(166,61,53,.12) !important; border-color: rgba(166,61,53,.35) !important; color: #6B1A12 !important; font-weight: 600 !important; } [data-theme="light"] .chip-warning, [data-theme="light"] .chip-amber, [data-theme="light"] .pks-chip-amber { background: rgba(184,121,24,.13) !important; border-color: rgba(184,121,24,.38) !important; color: #6B3600 !important; font-weight: 600 !important; } [data-theme="light"] .chip-info, [data-theme="light"] .chip-blue, [data-theme="light"] .pks-chip-blue { background: rgba(46,99,136,.13) !important; border-color: rgba(46,99,136,.38) !important; color: #1A3F5A !important; font-weight: 600 !important; } /* ── ACCOUNT / LISTINGS PAGE SURFACES ── */ [data-theme="light"] .listings-card, [data-theme="light"] .account-card, [data-theme="light"] .acct-card { background: var(--bg-2) !important; border: 1px solid var(--line-2) !important; box-shadow: 0 2px 8px rgba(20,30,55,.08) !important; } [data-theme="light"] .listings-card-status-tag, [data-theme="light"] .acct-status-tag { background: rgba(217,166,37,.16) !important; border: 1px solid rgba(169,120,24,.40) !important; color: #5A3B00 !important; font-weight: 600 !important; } /* Active/live listing status */ [data-theme="light"] .listings-card-status-tag.is-active, [data-theme="light"] .status-tag-active { background: rgba(36,122,74,.14) !important; border-color: rgba(36,122,74,.38) !important; color: #1A5835 !important; } /* Sold status */ [data-theme="light"] .listings-card-status-tag.is-sold, [data-theme="light"] .status-tag-sold { background: rgba(46,99,136,.13) !important; border-color: rgba(46,99,136,.35) !important; color: #1A3F5A !important; } /* Pending status */ [data-theme="light"] .listings-card-status-tag.is-pending, [data-theme="light"] .status-tag-pending { background: rgba(184,121,24,.13) !important; border-color: rgba(184,121,24,.38) !important; color: #6B3600 !important; } /* Boost pill */ [data-theme="light"] .listings-card-boost-pill, [data-theme="light"] .listings-card-pending-boost { background: rgba(217,166,37,.16) !important; border: 1px solid rgba(169,120,24,.45) !important; color: #5A3B00 !important; font-weight: 600 !important; } /* Seller wallet card — no dark gradient on light bg */ [data-theme="light"] .seller-wallet-card, [data-theme="light"] .wallet-card { background: linear-gradient(160deg, #F2EBD8, #EDE4CC) !important; border: 1px solid var(--line-2) !important; color: var(--ink) !important; } [data-theme="light"] .wallet-balance, [data-theme="light"] .seller-wallet-balance { color: var(--ink) !important; font-weight: 700 !important; } [data-theme="light"] .wallet-label, [data-theme="light"] .seller-wallet-label { color: #6B4F0D !important; font-weight: 500 !important; } /* ── SELL FORM SURFACES ── */ [data-theme="light"] .sell-optional-details { border: 1.5px dashed var(--line-2) !important; } [data-theme="light"] .sell-optional-summary { color: #6B4F0D !important; font-weight: 600 !important; } [data-theme="light"] .sell-optional-details[open] > .sell-optional-summary { color: var(--ink) !important; font-weight: 700 !important; } [data-theme="light"] .sell-location-preview { background: var(--bg-1) !important; border: 1px solid var(--line-2) !important; } [data-theme="light"] .sell-location-preview-label { color: #6B4F0D !important; font-weight: 600 !important; } [data-theme="light"] .sell-location-preview-value { color: var(--ink) !important; font-weight: 600 !important; } [data-theme="light"] .sell-field-error { color: #6B1A12 !important; font-weight: 600 !important; } [data-theme="light"] .sell-field-error::before { color: #A63D35 !important; } /* ── EXPLORE PAGE — sort bar, filter pills ── */ [data-theme="light"] .explore-filter-btn, [data-theme="light"] .explore-filter-pill { background: var(--bg-2) !important; border: 1px solid var(--line-2) !important; color: var(--ink-muted) !important; font-weight: 500 !important; } [data-theme="light"] .explore-filter-btn.is-active, [data-theme="light"] .explore-filter-pill.is-active { background: rgba(217,166,37,.20) !important; border-color: rgba(169,120,24,.55) !important; color: #5A3B00 !important; font-weight: 700 !important; } [data-theme="light"] .explore-filter-count { color: #6B4F0D !important; font-weight: 600 !important; } /* Seller meta text — location, date, listing count */ [data-theme="light"] .item-seller-meta, [data-theme="light"] .seller-meta, [data-theme="light"] .sp-meta { color: var(--ink-dim) !important; font-weight: 500 !important; } [data-theme="light"] .item-seller-meta strong, [data-theme="light"] .seller-meta strong { color: var(--ink) !important; font-weight: 600 !important; } /* ── DOSSIER MARKS / SOON / STATUS ── */ [data-theme="light"] .dossier-mark { border: 1.5px solid var(--line-2) !important; color: var(--ink-dim) !important; } [data-theme="light"] .dossier-mark.is-done { background: rgba(36,122,74,.14) !important; border-color: rgba(36,122,74,.50) !important; color: #1A5835 !important; } [data-theme="light"] .dossier-mark.soon { background: rgba(217,166,37,.12) !important; border: 1.5px solid rgba(169,120,24,.50) !important; color: #6B4F0D !important; } /* ── DEAL PAGE ── */ [data-theme="light"] .deal-status-bar, [data-theme="light"] .deal-stage-label { color: var(--ink-muted) !important; font-weight: 600 !important; } [data-theme="light"] .deal-stage-label.is-active { color: var(--gold-light) !important; font-weight: 700 !important; } [data-theme="light"] .deal-pipeline-step.is-done { color: #247A4A !important; } [data-theme="light"] .deal-pipeline-step.is-now { color: var(--gold-light) !important; font-weight: 700 !important; } /* ── ACCOUNT PROFILE CARD ── */ [data-theme="light"] .acct-profile-card, [data-theme="light"] .account-profile-card { background: linear-gradient(160deg, #F2EBD8, #EDE4CC) !important; border: 1px solid var(--line-2) !important; } [data-theme="light"] .acct-username, [data-theme="light"] .profile-name { color: var(--ink) !important; font-weight: 700 !important; } [data-theme="light"] .acct-email, [data-theme="light"] .profile-email { color: var(--ink-muted) !important; font-weight: 500 !important; } /* ── TRUST LEVEL / TIER BADGES (nav avatar rings → flatten on light) ── */ [data-theme="light"] .pks-trust-glow-l1, [data-theme="light"] .pks-trust-glow-l2, [data-theme="light"] .pks-trust-glow-l3 { box-shadow: 0 0 0 2px var(--line-2) !important; filter: none !important; } /* Replace glow rings with simple gold outline */ [data-theme="light"] .nav-avatar.pks-trust-glow-l1 { box-shadow: 0 0 0 2px #247A4A !important; filter: none !important; } [data-theme="light"] .nav-avatar.pks-trust-glow-l2 { box-shadow: 0 0 0 2px #2E6388 !important; filter: none !important; } [data-theme="light"] .nav-avatar.pks-trust-glow-l3 { box-shadow: 0 0 0 2px var(--gold-light) !important; filter: none !important; } /* ── HOME ABOUT / INTRO PANEL ── */ [data-theme="light"] .intro-panel, [data-theme="light"] .home-about-panel { background: var(--bg-2) !important; border: 1px solid var(--line-2) !important; } [data-theme="light"] .home-about-fineprint, [data-theme="light"] .intro-fineprint { color: var(--ink-dim) !important; font-weight: 500 !important; } [data-theme="light"] .home-about-fineprint a, [data-theme="light"] .intro-fineprint a { color: var(--gold-light) !important; text-decoration-color: rgba(169,120,24,.45) !important; } /* ── NUDGE / INFO PANELS ── */ [data-theme="light"] .nudge-panel, [data-theme="light"] .home-nudge { background: var(--bg-2) !important; border: 1px solid var(--line-2) !important; } /* ── TRUST STRIP PILLS — pulse dots on light bg ── */ [data-theme="light"] .hero-ledger-dot, [data-theme="light"] .rightnow-eyebrow::before, [data-theme="light"] .pks-tf-progress-live::before { background: #247A4A !important; box-shadow: 0 0 0 2px rgba(36,122,74,.25) !important; /* Remove the neon glow, keep simple solid dot */ filter: none !important; } /* ── HERO SEARCH INPUT — when on light section (non-hero) ── */ [data-theme="light"] .search-bar, [data-theme="light"] .pks-search-wrap { background: var(--bg-2) !important; border: 1.5px solid var(--line-2) !important; box-shadow: 0 2px 8px rgba(20,30,55,.08) !important; } [data-theme="light"] .pks-search-input { background: transparent !important; color: var(--ink) !important; } [data-theme="light"] .pks-search-input::placeholder { color: var(--ink-faint) !important; } [data-theme="light"] .pks-search-submit { background: var(--gold-light) !important; color: var(--bg-2) !important; border: none !important; } /* ── MESSAGES PAGE ── */ [data-theme="light"] .msg-thread, [data-theme="light"] .messages-thread { background: var(--bg-2) !important; border-color: var(--line-2) !important; } [data-theme="light"] .msg-bubble-in { background: var(--bg-1) !important; color: var(--ink) !important; } [data-theme="light"] .msg-bubble-out { background: rgba(217,166,37,.20) !important; color: var(--ink) !important; border: 1px solid rgba(169,120,24,.30) !important; } /* ── MY DISPUTES / REVIEWS PAGE ── */ [data-theme="light"] .dispute-card, [data-theme="light"] .review-card { background: var(--bg-2) !important; border: 1px solid var(--line-2) !important; } [data-theme="light"] .dispute-status-tag, [data-theme="light"] .review-lane-tag { background: rgba(166,61,53,.12) !important; border: 1px solid rgba(166,61,53,.35) !important; color: #6B1A12 !important; font-weight: 600 !important; } [data-theme="light"] .dispute-status-tag.is-resolved, [data-theme="light"] .review-lane-tag.is-closed { background: rgba(36,122,74,.13) !important; border-color: rgba(36,122,74,.38) !important; color: #1A5835 !important; } /* ── CARD STATUS TAGS — green sold badge was neon #4ade80 ── */ [data-theme="light"] .card-status-tag.is-sold { background: rgba(36,122,74,.16) !important; border: 1px solid rgba(36,122,74,.40) !important; color: #1A5835 !important; font-weight: 700 !important; } [data-theme="light"] .card-status-tag.is-reserved { background: rgba(184,121,24,.14) !important; border: 1px solid rgba(184,121,24,.38) !important; color: #6B3600 !important; font-weight: 700 !important; } /* ── ITEM INFO PANEL — the dark panel on item page ── */ [data-theme="light"] .item-info-inner, [data-theme="light"] .item-info-panel { background: linear-gradient(180deg, #F2EBD8 0%, #EDE4CC 100%) !important; border: 1px solid var(--line-2) !important; box-shadow: 0 4px 18px rgba(20,30,55,.12) !important; } /* ── GALLERY SAVE + NAV ARROWS — no dark scrim on light ── */ [data-theme="light"] .gallery-nav-btn, [data-theme="light"] .item-gallery-prev, [data-theme="light"] .item-gallery-next { background: rgba(248,244,234,.90) !important; border: 1px solid var(--line-2) !important; color: var(--ink) !important; box-shadow: 0 2px 8px rgba(20,30,55,.12) !important; } [data-theme="light"] .gallery-counter, [data-theme="light"] .item-gallery-counter { background: rgba(248,244,234,.92) !important; border: 1px solid var(--line-2) !important; color: var(--ink-muted) !important; } /* ── BTN-ICON — dark square on light bg ── */ [data-theme="light"] .btn-icon { background: var(--bg-1) !important; border: 1px solid var(--line-2) !important; color: var(--ink-muted) !important; } [data-theme="light"] .btn-icon:hover { background: var(--bg-1) !important; border-color: var(--gold-light) !important; color: var(--ink) !important; } /* ── SYSBAR STATUS INDICATORS ── */ [data-theme="light"] .sysbar-label-ok { color: #247A4A !important; font-weight: 600 !important; } [data-theme="light"] .sysbar-label-warn { color: #B87918 !important; font-weight: 600 !important; } [data-theme="light"] .sysbar-label-error { color: #A63D35 !important; font-weight: 600 !important; } /* ── CARD SOLD/STATUS BADGE TONES ── */ [data-theme="light"] .card-item-status { color: var(--ink-muted) !important; } /* ── PRO CARD BADGE — keep hex shape, dull glow ── */ [data-theme="light"] .card-pro-badge { filter: saturate(0.75) brightness(0.92) !important; } [data-theme="light"] .card-pro-badge::after { display: none !important; } /* ── PROTECT MODAL — warm surface ── */ [data-theme="light"] .pku-modal-wrap, [data-theme="light"] .pku-modal-inner { background: var(--bg-2) !important; border-color: var(--line-2) !important; } [data-theme="light"] .pku-modal-btn--danger { background: rgba(166,61,53,.14) !important; border: 1.5px solid rgba(166,61,53,.50) !important; color: #6B1A12 !important; font-weight: 700 !important; } [data-theme="light"] .pku-modal-btn--danger:hover { background: rgba(166,61,53,.22) !important; border-color: rgba(166,61,53,.65) !important; } /* ── INSPECTION WINDOW COUNTDOWN ── */ [data-theme="light"] .inspection-countdown, [data-theme="light"] .window-countdown { background: rgba(217,166,37,.12) !important; border: 1px solid rgba(169,120,24,.38) !important; color: #5A3B00 !important; } [data-theme="light"] .inspection-countdown-val { color: var(--ink) !important; font-weight: 800 !important; } [data-theme="light"] .inspection-countdown-label { color: #6B4F0D !important; font-weight: 500 !important; } /* ── PALETTE SIGN-OFF ── v1.1-000011 The only remaining `.50` on a red is the danger button border on the protect modal — which is correct (a hover-state border on a destructive-action button, not a repeating stripe). No `FFB3AA`, no solid `#A63D35` or solid `var(--gold)` on the stops tags. All clear. The file is complete at `E:\13_pakstoor.com\pakstoor-platform\site\css\light-mode.css` (v1.1-000011, 1905+ lines). Here is a summary of every change made and why: --- CRAYON FIXES (stops section) `.stops-tag-bad` — was solid `#A63D35` background with white text and a `#FFB3AA` salmon/coral dot. Now: dark wine text `#6B1A12` on a tinted `rgba(166,61,53,.14)` background with a `#7A2B22` dot. No solid red fill, no salmon dot. `.stops-tag-good` — was solid `var(--gold)` gold background. Now: deep amber text `#5A3B00` on tinted `rgba(217,166,37,.18)` background. Matches the established `.card-item-trustpill` pattern. Solid gold fill is reserved for action buttons only. `.stops-card-bad::after` stripe — was `rgba(166,61,53,.50)` (50% opacity red stripes, reads like candy tape). Now `rgba(166,61,53,.18)` — faint textural detail, not a dominant red stripe column. `.stops-eyebrow` — was fully saturated `#A63D35` red text. Now `#6B1A12` (dark wine). Red eyebrow text on warm beige looks like an alarm state; this is editorial copy. --- PURPLE LEAK FIX `.explore-featured .explore-featured-head .explore-featured-label` and `.explore-featured-sub` — were `var(--pk-purple)` and `#9B70E0` (saturated purple, totally out of palette). Now `var(--gold-light)` and `#6B4F0D` (amber family, consistent with the rest of the light mode palette). --- MARQUEE TITLE FIX `.pks-marquee-card .pks-marquee-card-title` — was `var(--gold)` bold. Full-brightness gold as a bold title on warm cream reads as auction-site at scale. Now `var(--ink)` (near-black, weight 600) with amber `var(--gold-light)` on hover. --- CONTRAST / BLAND FIXES (comprehensive block) Nav search: 1.5px border, amber focus ring, dark amber search button. Form inputs: 1.5px borders throughout, amber focus ring at `rgba(169,120,24,.18)`. Item page: price at `font-weight: 800`, price label at `#6B4F0D`, verified badge at green `#1A5835` on tinted green, trust badges at amber tint, condition block at amber tint, meta stack dt/dd contrast, trust panel labels near-black, safety icons in `#2E6388`. Chips: full semantic set — gold, success, danger, warning, info — all use tinted backgrounds at 12-18% with dark matching text (no near-transparent washes, no void fills). Account/listings: status tags with semantic tints (active=green, sold=blue, pending=amber), boost pills tinted amber, wallet card replaced dark gradient with warm linen gradient. Sell form: dashed border visible, optional summary deep amber, location preview warm sand, field errors dark wine. Trust/avatar rings: neon glow rings (l1 green, l2 cyan, l3 violet) replaced with simple 2px solid border rings — no cartoon superhero aura on light backgrounds. Card status tags: neon `#4ade80` sold badge replaced with tinted green `rgba(36,122,74,.16)`. Gallery controls: dark scrim buttons replaced with parchment `rgba(248,244,234,.90)` with gold borders. Btn-icon: dark box replaced with warm sand `var(--bg-1)`. Item info panel: dark gradient replaced with warm linen `#F2EBD8→#EDE4CC`. Protect modal danger button: solid red replaced with tinted `rgba(166,61,53,.14)` with dark wine text. Section dividers: gold seam gradient with `0.65` opacity. */ /* ═══════════════════════════════════════════════════════════ HERO SECTION — TOTAL DARK MODE LOCK Light mode hero is identical to dark mode. Background photo, all text, search, trust chips, CTAs — nothing changes. ═══════════════════════════════════════════════════════════ */ [data-theme="light"] .hero, [data-theme="light"] .hero * { color: inherit; } /* Hero section itself */ [data-theme="light"] .hero { color: #ECEFF2 !important; } /* Every text element in the hero stays white/light */ [data-theme="light"] .hero-title { color: #ECEFF2 !important; } [data-theme="light"] .hero-title span { color: #ECEFF2 !important; } [data-theme="light"] .hero-title em { color: var(--gold, var(--gold)) !important; } [data-theme="light"] .hero-subtitle { color: #ECEFF2 !important; } [data-theme="light"] .hero-eyebrow { color: #ECEFF2 !important; font-weight: inherit !important; } [data-theme="light"] .hero-trust { color: #ECEFF2 !important; } [data-theme="light"] .hero-cta-secondary-link { color: #ECEFF2 !important; } [data-theme="light"] .hero-ledger { color: #ECEFF2 !important; } [data-theme="light"] .hero-scroll-cue { color: #ECEFF2 !important; } [data-theme="light"] .hero-eyebrow-dot { background: var(--gold) !important; } /* Trust chips */ [data-theme="light"] .hero-trust-chip { color: #ECEFF2 !important; background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.18) !important; } /* Search stays dark (sits on the dark background photo) */ [data-theme="light"] .hero-search-input { background: rgba(20,24,29,.55) !important; color: #ECEFF2 !important; border-color: rgba(255,255,255,.18) !important; } [data-theme="light"] .hero-search-input::placeholder { color: rgba(236,239,242,.55) !important; } [data-theme="light"] .hero-search-icon { color: #ECEFF2 !important; } /* Ledger ticker */ [data-theme="light"] .hero-ledger-text { color: #ECEFF2 !important; } [data-theme="light"] .hero-ledger-dot { background: var(--gold) !important; } /* Sentinel — no visual, just positional */ [data-theme="light"] .hero-sentinel { background: transparent !important; } /* ═══════════════════════════════════════════════════════════ HEXAGON GRID — dark gunmetal in light mode Default: gold stroke, mix-blend-mode: screen (dark bg only) Light mode: gunmetal stroke, multiply blend (light bg) ═══════════════════════════════════════════════════════════ */ [data-theme="light"] svg.pks-bg-hex { mix-blend-mode: normal !important; /* multiply hid the hover; normal shows the gold light-up */ opacity: 1 !important; /* visibility controlled via stroke/fill alpha below */ } [data-theme="light"] .pks-bg-hex-cell { stroke: rgba(143,164,191,.14) !important; /* faint cool resting grid (subtle) */ fill: transparent !important; stroke-width: 0.7 !important; } [data-theme="light"] .pks-bg-hex-cell:hover { fill: rgba(27,43,68,.18) !important; /* soft cobalt fill only — no hard border (matches dark's soft highlight) */ } /* ── Hex cell hover fix — restore pointer events in all modes ── */ .pks-bg-hex-cell { pointer-events: all !important; } /* ═══════════════════════════════════════════════════════════ MESSAGES PAGE — warm parchment to match landing cards ═══════════════════════════════════════════════════════════ */ [data-theme="light"] .msg-page, [data-theme="light"] .msg-page-inner { background: var(--bg) !important; } [data-theme="light"] .msg-pageheader-title { color: var(--ink) !important; } [data-theme="light"] .msg-pageheader-sub { color: var(--ink-muted) !important; } [data-theme="light"] .msg-pageheader-eyebrow { color: var(--gold-light) !important; } [data-theme="light"] .msg-pageheader-ref-label, [data-theme="light"] .msg-pageheader-ref-val { color: var(--ink-dim) !important; } /* Heading card surface — the dark messages.css background stacks a 50–60% dark linear-gradient over var(--bg-2); on parchment that reads muddy gray. Drop the dark overlay, keep a subtle warm gold + light trust-blue wash on the parchment base, and use the warm light shadow. */ [data-theme="light"] .msg-pageheader { background: radial-gradient(420px 180px at 100% 0%, rgba(217,166,37,.10), transparent 70%), radial-gradient(420px 220px at 0% 100%, rgba(46,99,136,.05), transparent 70%), var(--bg-2) !important; box-shadow: var(--elev-1) !important; } /* Composer "Transaction sealed / read-only" footer — had only a dark base (rgba(20,24,29,.55)) and no light override, so it rendered grey in light. */ [data-theme="light"] .pmc-footer-sealed { background: var(--bg-2) !important; border-color: rgba(47,138,87,.40) !important; } [data-theme="light"] .pmc-footer-sealed-icon { color: var(--success-deep) !important; } [data-theme="light"] .pmc-footer-sealed-body strong { color: var(--ink) !important; } [data-theme="light"] .pmc-footer-sealed-body span { color: var(--ink-muted) !important; } /* "For your safety…" trust strip — readable green on light */ [data-theme="light"] .msg-chat-trust { background: var(--success-wash) !important; color: var(--success-deep) !important; } [data-theme="light"] .msg-chat-trust-icon { color: var(--success-deep) !important; } /* ── RETURN / DELIVERY TRACKING PANEL (pks-message-tracks) ── Base is dark-only (light text on var(--surface,#14181d)) with NO light override → unreadable in light. Re-theme surfaces + text. */ [data-theme="light"] .pmt-card { background: var(--bg-2) !important; border-color: var(--line) !important; } [data-theme="light"] .pmt-card.is-inactive { background: var(--bg-1) !important; border-top-color: var(--line) !important; } [data-theme="light"] .pmt-card-delivery { border-top-color: var(--gold) !important; } [data-theme="light"] .pmt-card-return { border-top-color: var(--blue) !important; } [data-theme="light"] .pmt-card-eyebrow, [data-theme="light"] .pmt-card-note, [data-theme="light"] .pmt-step.is-done .pmt-step-label, [data-theme="light"] .pmt-details-summary, [data-theme="light"] .pmt-details-waybill-label, [data-theme="light"] .pmt-details-event, [data-theme="light"] .pmt-copyrow-label, [data-theme="light"] .pmt-header-code-label { color: var(--ink-muted) !important; } [data-theme="light"] .pmt-step-label, [data-theme="light"] .pmt-details-event-time { color: var(--ink-dim) !important; } [data-theme="light"] .pmt-card-status, [data-theme="light"] .pmt-step.is-current .pmt-step-label { color: var(--ink) !important; } [data-theme="light"] .pmt-card-pill { color: var(--ink-muted) !important; background: rgba(16,19,25,.05) !important; border-color: var(--line) !important; } [data-theme="light"] .pmt-card-delivery .pmt-card-pill { color: var(--gold-deep) !important; background: var(--gold-wash) !important; border-color: rgba(147,106,18,.40) !important; } [data-theme="light"] .pmt-card.is-inactive .pmt-card-pill { color: var(--ink-dim) !important; background: rgba(16,19,25,.04) !important; } [data-theme="light"] .pmt-step::before { background: var(--line) !important; } [data-theme="light"] .pmt-step-dot { background: var(--bg-2) !important; border-color: var(--line-bright) !important; } [data-theme="light"] .pmt-step.is-done .pmt-step-dot { background: var(--success) !important; border-color: var(--success) !important; } [data-theme="light"] .pmt-step.is-done::before { background: rgba(42,126,79,.5) !important; } [data-theme="light"] .pmt-card-delivery .pmt-step.is-current .pmt-step-dot { background: var(--gold) !important; border-color: var(--gold) !important; } [data-theme="light"] .pmt-card-return .pmt-step.is-current .pmt-step-dot { background: var(--blue) !important; border-color: var(--blue) !important; } [data-theme="light"] .pmt-details-waybill { border-bottom-color: var(--line) !important; } [data-theme="light"] .pmt-details-waybill-value, [data-theme="light"] .pmt-header-code-value, [data-theme="light"] .pmt-copyrow-value { color: var(--gold-deep) !important; } [data-theme="light"] .pmt-card-return .pmt-copyrow-value { color: var(--blue) !important; } [data-theme="light"] .pmt-copy { color: var(--ink-muted) !important; background: rgba(16,19,25,.05) !important; border-color: var(--line) !important; } [data-theme="light"] .pmt-copy:hover { background: var(--gold-wash) !important; border-color: var(--gold-deep) !important; color: var(--gold-deep) !important; } /* Conversation list panel = warm card */ [data-theme="light"] .msg-threads { background: var(--bg-2) !important; border: 1px solid var(--line-2) !important; box-shadow: 0 2px 10px rgba(20,30,55,.10) !important; } [data-theme="light"] .msg-threads-count { color: var(--ink-muted) !important; } [data-theme="light"] .msg-threads-empty { color: var(--ink-dim) !important; } [data-theme="light"] .msg-thread-item, [data-theme="light"] .msg-thread { border-bottom-color: var(--line) !important; } [data-theme="light"] .msg-thread-item:hover, [data-theme="light"] .msg-thread:hover { background: var(--bg-3) !important; } [data-theme="light"] .msg-thread-item.is-active, [data-theme="light"] .msg-thread.is-active { background: var(--gold-wash) !important; box-shadow: inset 3px 0 0 var(--gold) !important; } [data-theme="light"] .msg-thread-name { color: var(--ink) !important; } [data-theme="light"] .msg-thread-preview, [data-theme="light"] .msg-thread-side { color: var(--ink-dim) !important; } /* Chat panel = warm card */ [data-theme="light"] .msg-chat { background: var(--bg-2) !important; } [data-theme="light"] .msg-chat-empty { background: var(--bg-2) !important; color: var(--ink-muted) !important; } [data-theme="light"] .msg-chat-head { background: var(--bg-2) !important; border-bottom-color: var(--line) !important; } /* ═══════════════════════════════════════════════════════════ FULL-SITE LIGHT COVERAGE SWEEP (Cobalt Ledger) — 2026-06-06 Centralised overrides for every warm/peach surface + every dark-hardcoded component that had NO light override. Token-first. Locked Pro/Premium/Boosted identity badges intentionally untouched. ═══════════════════════════════════════════════════════════ */ /* ── light-mode.css in-file warm leftovers ── */ [data-theme="light"] .pks-marquee-shield { background: var(--bar-bg) !important; box-shadow: 0 1px 3px rgba(20,28,40,.30) !important; } [data-theme="light"] .pks-tf-progress-sep { background: var(--line-2) !important; } [data-theme="light"] .footer-v2-trust-strip { background: var(--bg-1) !important; } [data-theme="light"] .dossier-page .dossier-hero { background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-3) 100%) !important; } [data-theme="light"] .pks-protmodal-item { background: var(--bg-2) !important; } [data-theme="light"] .seller-head { background: linear-gradient(160deg, var(--bg-2), var(--bg-3)) !important; } [data-theme="light"] .seller-empty, [data-theme="light"] .deal-waybill-add, [data-theme="light"] .deal-addr-saved-card, [data-theme="light"] .sell-location-preview, [data-theme="light"] .acct-trust-pill { background: var(--bg-2) !important; } [data-theme="light"] .trk-card-status-bar, [data-theme="light"] .pks-pg-item:hover, [data-theme="light"] .tp-ladder-step.is-locked { background: var(--bg-3) !important; } [data-theme="light"] .seller-wallet-card, [data-theme="light"] .acct-profile-card { background: linear-gradient(160deg, var(--bg-2), var(--bg-3)) !important; } [data-theme="light"] .item-info-panel { background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-3) 100%) !important; } /* ── pakstoor-cards-restored.css ── */ [data-theme="light"] .explore-head .btn-secondary { background: var(--bg-2) !important; border-color: var(--line-2) !important; color: var(--ink) !important; } [data-theme="light"] .explore-head .btn-secondary:hover { background: var(--bg-1) !important; border-color: var(--gold) !important; color: var(--gold-deep) !important; } [data-theme="light"] .card-item .card-item-media { background: var(--bg-3) !important; } /* ── cinematic.css ── */ [data-theme="light"] .pks-pager-btn { background: var(--bg-2) !important; border: 1px solid var(--line-2) !important; color: var(--ink) !important; } [data-theme="light"] .hero-cat-btn { background: var(--bg-2) !important; border: 1px solid rgba(217,166,37,.28) !important; color: var(--ink) !important; } [data-theme="light"] .pks-marquee-label { background: var(--gold-wash-2) !important; color: var(--gold-deep) !important; } [data-theme="light"] .pks-marquee-hint { background: var(--bg-3) !important; color: var(--ink-muted) !important; } /* ── core.css ── */ [data-theme="light"] .skip-link:focus, [data-theme="light"] .skip-link:focus-visible { outline-color: var(--ink) !important; } [data-theme="light"] .scroll-progress { background: linear-gradient(90deg, var(--gold-deep) 0%, var(--gold) 100%) !important; } [data-theme="light"] .skel, [data-theme="light"] .skel-text, [data-theme="light"] .skel-title, [data-theme="light"] .skel-img { background: linear-gradient(90deg, var(--bg-3) 25%, var(--bg-1) 50%, var(--bg-3) 75%) !important; background-size: 200% 100% !important; } [data-theme="light"] .card-pro-badge:before { background: var(--bg-2) !important; } /* ── account.css (phone banner + wallet) ── */ [data-theme="light"] .acct-phone-banner { background: var(--bg-3) !important; border-color: var(--line-2) !important; color: var(--ink-muted) !important; } [data-theme="light"] .acct-phone-banner-icon { background: var(--line-2) !important; color: var(--ink-muted) !important; } [data-theme="light"] .acct-phone-banner-desc { color: var(--ink-dim) !important; } [data-theme="light"] .acct-phone-banner-input { background: var(--bg-2) !important; border-color: var(--line-2) !important; color: var(--ink) !important; } /* ── login.css / AUTH PAGES (no light styling existed) ── */ [data-theme="light"] .auth-body, [data-theme="light"] .auth-form-wrap { background: var(--bg) !important; } [data-theme="light"] .auth-brand { background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg) 100%) !important; } [data-theme="light"] .auth-tab { background: var(--bg-2) !important; border-color: var(--line-2) !important; color: var(--ink-muted) !important; } [data-theme="light"] .auth-tab.active, [data-theme="light"] .auth-tab.is-active { background: var(--gold) !important; border-color: var(--gold-deep) !important; color: var(--gold-ink) !important; } [data-theme="light"] .auth-back { background: var(--bg-1) !important; border-color: var(--line-2) !important; color: var(--ink) !important; } [data-theme="light"] .form-group input[type="text"], [data-theme="light"] .form-group input[type="email"], [data-theme="light"] .form-group input[type="password"], [data-theme="light"] .form-group input[type="tel"], [data-theme="light"] .form-group input[type="number"], [data-theme="light"] .form-group input[type="date"], [data-theme="light"] .phone-input, [data-theme="light"] .btn-social, [data-theme="light"] .auth-toast, [data-theme="light"] .legal-modal-sheet, [data-theme="light"] .ladder-num, [data-theme="light"] .ladder-marker { background: var(--bg-2) !important; border-color: var(--line-2) !important; color: var(--ink) !important; } [data-theme="light"] .phone-prefix { background: var(--bg-3) !important; color: var(--ink) !important; } [data-theme="light"] .checkbox-box { background: var(--bg-2) !important; border-color: var(--line-2) !important; } [data-theme="light"] .checkbox input:checked + .checkbox-box::after { border-color: var(--ink) !important; } [data-theme="light"] .pks-passkey-btn { background: linear-gradient(rgba(217,166,37,.10), rgba(217,166,37,.10)), var(--bg-2) !important; border-color: var(--gold) !important; } [data-theme="light"] .legal-modal-header { background: var(--bg-1) !important; border-color: var(--line) !important; } [data-theme="light"] .ladder-num { color: var(--gold-deep) !important; } [data-theme="light"] .brand-logo-img { filter: drop-shadow(0 1px 3px rgba(20,28,40,.12)) !important; } [data-theme="light"] .brand-image-img { filter: drop-shadow(0 6px 18px rgba(20,28,40,.16)) !important; } [data-theme="light"] .brand-hex-canvas { filter: drop-shadow(0 6px 14px rgba(20,28,40,.14)) !important; } /* ── dossier.css ── */ [data-theme="light"] .dossier-page .dossier-mark.notyet { background-image: repeating-linear-gradient(135deg, rgba(103,114,131,.25) 0 2px, transparent 2px 4px) !important; border-color: rgba(103,114,131,.40) !important; } [data-theme="light"] .dossier-page .dossier-closing-seal { background: linear-gradient(160deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%) !important; } [data-theme="light"] .dossier-page .tx-flow-wrap { background: linear-gradient(180deg, rgba(20,28,40,.04) 0%, transparent 80%) !important; } /* ── messages.css (dispute notice + neon states) ── */ [data-theme="light"] .msg-deal-dispute-notice-prominent { background: linear-gradient(135deg, rgba(174,74,62,.10), rgba(174,74,62,.04)) !important; border-color: var(--danger) !important; } [data-theme="light"] .msg-deal-dispute-notice-prominent .msg-deal-dispute-body, [data-theme="light"] .msg-deal-dispute-status { color: var(--ink-muted) !important; } [data-theme="light"] .msg-deal-dispute-notice-prominent .msg-deal-dispute-body strong { color: var(--ink) !important; } [data-theme="light"] .msg-deal-dispute-cta { background: var(--danger) !important; color: #FFFFFF !important; border-color: var(--danger) !important; } [data-theme="light"] .msg-deal-dispute-cta:hover { background: #8F362D !important; color: #FFFFFF !important; } [data-theme="light"] .msg-deal-pipeline-fill { background: linear-gradient(90deg, var(--gold-deep) 0%, var(--gold) 100%) !important; } [data-theme="light"] .msg-deal-status.is-delivered, [data-theme="light"] .msg-deal-status.is-completed, [data-theme="light"] .msg-offer-status.is-answered, [data-theme="light"] .msg-order-done, [data-theme="light"] .msg-order-prompt .is-done { color: var(--success) !important; } [data-theme="light"] .msg-deal-status.is-cancelled, [data-theme="light"] .msg-offer-status.is-declined, [data-theme="light"] .msg-tracking-entry-status.is-error, [data-theme="light"] .msg-composer-input.is-blocked { color: var(--danger) !important; } [data-theme="light"] .msg-composer-input.is-blocked { border-color: var(--danger) !important; } [data-theme="light"] .msg-offer-btn.is-ghost:hover { color: var(--danger) !important; border-color: var(--danger) !important; } [data-theme="light"] .msg-modal-btn-danger:hover:not(:disabled) { background: #8F362D !important; border-color: #8F362D !important; } /* ── deal.css ── */ [data-theme="light"] .deal-open-thread-cta { background: var(--gold-wash) !important; color: var(--gold-deep) !important; } [data-theme="light"] .deal-open-thread-cta-icon, [data-theme="light"] .deal-open-thread-cta-arrow, [data-theme="light"] .deal-role-sending { color: var(--gold-deep) !important; } [data-theme="light"] .deal-open-thread-cta-sub { color: var(--ink-muted) !important; } [data-theme="light"] .deal-tracking-degraded, [data-theme="light"] .deal-tracking-event.is-warn .deal-tracking-icon { color: var(--warning) !important; } [data-theme="light"] .deal-tracking-event.is-warn .deal-tracking-icon { background: var(--warning-wash) !important; border-color: rgba(165,106,27,.40) !important; } [data-theme="light"] .deal-support-bubble-image { background: var(--bg-3) !important; } /* ── item.css (mobile buy bar — boost-pill BADGES left locked) ── */ [data-theme="light"] .item-mobile-buybar { background: rgba(255,255,255,.94) !important; border-top-color: var(--line) !important; } /* ── explore.css ── */ [data-theme="light"] .explore-searchbar { background: var(--bg-2) !important; box-shadow: var(--elev-1) !important; } [data-theme="light"] .explore-searchbar:focus-within { box-shadow: var(--glow-gold) !important; } [data-theme="light"] .explore-searchbar-submit { box-shadow: var(--elev-1) !important; } [data-theme="light"] .explore-searchbar-submit:hover { box-shadow: var(--elev-2) !important; } [data-theme="light"] .explore-price-input:focus { box-shadow: var(--glow-gold) !important; } /* ════════════════════════════════════════════════════════════════════════ MESSAGES PAGE — DEEP LIGHT PASS (2026-06-06) Kills the warm/peach + dark-bleed treatment across the whole /messages surface. Source-order-last + higher specificity + !important → wins over both the earlier light overrides above and the dark-hardcoded component CSS. Silver depth ladder (all "darker than the hexagon page bg #F3F7FC"): · OUTER panels (thread list, rails) → #C8D2DF (darker silver) · CONTENT card (chat + chat head) → #DDE4EE (mid silver, not the bar) · INNER cards (deal/system/modals) → #FFFFFF / #EEF3F9 (sit on the silver) · SELECTED thread + OFFER card → #1B2B44 (cobalt bar) + light ink ════════════════════════════════════════════════════════════════════════ */ /* ── Thread sidebar: OUTER panel = darker silver (was white card) ── */ [data-theme="light"] .msg-threads { background: #C8D2DF !important; border: 1px solid #B5C1D0 !important; box-shadow: 0 2px 12px rgba(20,30,55,.12) !important; } [data-theme="light"] .msg-threads-head { background: transparent !important; border-bottom-color: #B5C1D0 !important; } [data-theme="light"] .msg-threads-title { color: var(--ink) !important; } [data-theme="light"] .msg-threads-count { color: var(--ink-muted) !important; } [data-theme="light"] .msg-threads-empty { color: var(--ink-dim) !important; } [data-theme="light"] .msg-thread-item, [data-theme="light"] .msg-thread { border-bottom-color: #B5C1D0 !important; } [data-theme="light"] .msg-thread-item:hover, [data-theme="light"] .msg-thread:hover { background: #BCC8D8 !important; } /* SELECTED thread row → cobalt top-bar colour, light text + light icon, gold strip */ [data-theme="light"] .msg-thread-item.is-active, [data-theme="light"] .msg-thread.is-active { background: var(--bar-bg) !important; box-shadow: inset 3px 0 0 var(--bar-active) !important; } [data-theme="light"] .msg-thread-item.is-active:hover, [data-theme="light"] .msg-thread.is-active:hover { background: #213650 !important; } [data-theme="light"] .msg-thread-item.is-active .msg-thread-name, [data-theme="light"] .msg-thread.is-active .msg-thread-name { color: var(--bar-ink) !important; } [data-theme="light"] .msg-thread-item.is-active .msg-thread-preview, [data-theme="light"] .msg-thread.is-active .msg-thread-preview, [data-theme="light"] .msg-thread-item.is-active .msg-thread-side, [data-theme="light"] .msg-thread.is-active .msg-thread-side { color: var(--bar-muted) !important; } [data-theme="light"] .msg-thread-item.is-active svg, [data-theme="light"] .msg-thread.is-active svg, [data-theme="light"] .msg-thread-item.is-active .msg-thread-avatar, [data-theme="light"] .msg-thread.is-active .msg-thread-avatar { color: var(--bar-ink) !important; } /* idle (non-selected) thread text */ [data-theme="light"] .msg-thread-name { color: var(--ink) !important; } [data-theme="light"] .msg-thread-preview, [data-theme="light"] .msg-thread-side { color: var(--ink-dim) !important; } /* ── Content area: chat + head = mid silver (was peach / white) ── */ [data-theme="light"] .msg-chat { background: #DDE4EE !important; border-color: #C5D2E1 !important; } [data-theme="light"] .msg-chat-empty { background: #DDE4EE !important; color: var(--ink-muted) !important; } [data-theme="light"] .msg-chat-head { background: #DDE4EE !important; border-bottom-color: var(--line) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } [data-theme="light"] .msg-chat-title, [data-theme="light"] .msg-chat-head-title { color: var(--ink) !important; } [data-theme="light"] .msg-chat-sub, [data-theme="light"] .msg-chat-head-sub { color: var(--ink-muted) !important; } /* ── Page header bloom: peach → cool blue (no warm radial) ── */ [data-theme="light"] .msg-pageheader { background: radial-gradient(420px 180px at 100% 0%, rgba(53,110,156,.10), transparent 70%), radial-gradient(420px 220px at 0% 100%, rgba(40,70,111,.06), transparent 70%), #E4ECF5 !important; border-color: var(--line) !important; box-shadow: var(--elev-1) !important; } [data-theme="light"] .msg-pageheader-eyebrow { color: var(--heading-accent) !important; } /* ── Message bubbles: incoming neutral white, outgoing cool blue (was gold) ── */ [data-theme="light"] .msg-bubble-in, [data-theme="light"] .msg-bubble.is-in { background: #FFFFFF !important; color: var(--ink) !important; border: 1px solid var(--line-2) !important; } [data-theme="light"] .msg-bubble-out, [data-theme="light"] .msg-bubble.is-out { background: rgba(53,110,156,.14) !important; color: var(--ink) !important; border: 1px solid rgba(53,110,156,.30) !important; } [data-theme="light"] .msg-bubble-time { color: var(--ink-dim) !important; } /* ── System lines + deal card (inner cards on the silver) ── */ [data-theme="light"] .msg-system { background: var(--bg-3) !important; color: var(--ink-muted) !important; border-color: var(--line) !important; } [data-theme="light"] .msg-deal { background: #EEF3F9 !important; border-color: var(--line-2) !important; } /* ── OFFER card ("Buy at asking price / Accepted / R 100.00") ── User: "the peach must go … make the text light". Translated to a cobalt ledger chip (matches the top bars) with light ink — distinct, readable. */ [data-theme="light"] .msg-offer { background: linear-gradient(180deg, #213650, var(--bar-bg)) !important; border: 1px solid var(--bar-border) !important; box-shadow: 0 2px 8px rgba(20,30,55,.16) !important; } [data-theme="light"] .msg-offer.is-buy { background: linear-gradient(180deg, #1F3D30, #173026) !important; border-color: #2C5A44 !important; } [data-theme="light"] .msg-offer-head-left { color: var(--gold-light) !important; } [data-theme="light"] .msg-offer.is-buy .msg-offer-head-left { color: #7FD9A6 !important; } [data-theme="light"] .msg-offer-amount { color: var(--bar-ink) !important; } [data-theme="light"] .msg-offer-note { color: var(--bar-muted) !important; } [data-theme="light"] .msg-offer-status.is-pending, [data-theme="light"] .msg-offer-status.is-sent { color: var(--bar-muted) !important; background: rgba(255,255,255,.10) !important; } [data-theme="light"] .msg-offer-status.is-accepted { color: #8DE6B4 !important; background: rgba(80,200,120,.18) !important; } [data-theme="light"] .msg-offer-status.is-declined { color: #F2A6A0 !important; background: rgba(248,113,113,.18) !important; } [data-theme="light"] .msg-offer-status.is-countered { color: var(--gold-light) !important; background: rgba(217,166,37,.20) !important; } [data-theme="light"] .msg-offer-time { color: var(--bar-muted) !important; } /* ── Dispute notice: warm → cool danger ── */ [data-theme="light"] .msg-deal-dispute-notice-prominent { background: linear-gradient(135deg, rgba(174,74,62,.09), rgba(174,74,62,.03)) !important; border-color: var(--danger) !important; } [data-theme="light"] .msg-deal-dispute-notice-prominent .msg-deal-dispute-body, [data-theme="light"] .msg-deal-dispute-status { color: var(--ink-muted) !important; } [data-theme="light"] .msg-deal-dispute-notice-prominent .msg-deal-dispute-body strong { color: var(--ink) !important; } /* ════════════ COMPOSER (pks-message-composer.css) — dark+peach → cool ════════════ */ [data-theme="light"] .pmc-footer, [data-theme="light"] .pmc-footer-quick, [data-theme="light"] .pmc-footer-open, [data-theme="light"] .pmc-footer-return, [data-theme="light"] .pmc-footer-custom, [data-theme="light"] .pmc-return-note, [data-theme="light"] .pmc-reason-list, [data-theme="light"] .pmc-return-ticker { background: var(--bg-3) !important; border-color: var(--line) !important; } [data-theme="light"] .pmc-modal-panel { background: var(--bg-2) !important; border-color: var(--line-2) !important; box-shadow: var(--elev-2) !important; } [data-theme="light"] .pmc-modal { background: rgba(20,28,40,.45) !important; } /* composer text: cream/peach → ink ladder */ [data-theme="light"] .pmc-footer-head, [data-theme="light"] .pmc-footer-mode-label, [data-theme="light"] .pmc-modal-title, [data-theme="light"] .pmc-modal-label, [data-theme="light"] .pmc-reason-label, [data-theme="light"] .pmc-footer-custom-label, [data-theme="light"] .pmc-footer-custom-head { color: var(--ink) !important; } [data-theme="light"] .pmc-footer-mode-hint, [data-theme="light"] .pmc-modal-lede, [data-theme="light"] .pmc-modal-body, [data-theme="light"] .pmc-return-body, [data-theme="light"] .pmc-return-body span, [data-theme="light"] .pmc-return-ticker-line, [data-theme="light"] .pmc-footer-custom-count { color: var(--ink-muted) !important; } [data-theme="light"] .pmc-footer-custom-foot, [data-theme="light"] .pmc-return-note-muted .pmc-return-icon { color: var(--ink-dim) !important; } [data-theme="light"] .pmc-modal-err, [data-theme="light"] .pmc-footer-custom-err { color: var(--danger) !important; } /* composer inputs */ [data-theme="light"] .pmc-modal-textarea, [data-theme="light"] .pmc-footer-open-input, [data-theme="light"] .pmc-footer-custom-input, [data-theme="light"] .pmc-quickq-select { background: var(--bg-2) !important; color: var(--ink) !important; border-color: var(--line-2) !important; } [data-theme="light"] .pmc-modal-textarea::placeholder, [data-theme="light"] .pmc-footer-open-input::placeholder, [data-theme="light"] .pmc-footer-custom-input::placeholder { color: var(--ink-faint) !important; } [data-theme="light"] .pmc-quickq-select option { background: var(--bg-2) !important; color: var(--ink) !important; } /* composer controls */ [data-theme="light"] .pmc-reason-item { border-color: var(--line) !important; } [data-theme="light"] .pmc-reason-item:hover { background: var(--bg-1) !important; border-color: var(--line-2) !important; } [data-theme="light"] .pmc-modal-close { color: var(--ink-muted) !important; } [data-theme="light"] .pmc-modal-close:hover { color: var(--ink) !important; } [data-theme="light"] .pmc-modal-btn-ghost, [data-theme="light"] .pmc-return-btn-secondary { border-color: var(--line-2) !important; color: var(--ink) !important; } [data-theme="light"] .pmc-modal-btn-ghost:hover:not(:disabled), [data-theme="light"] .pmc-return-btn-secondary:hover:not(:disabled) { background: var(--bg-3) !important; border-color: var(--line-bright) !important; } [data-theme="light"] .pmc-modal-info svg { color: var(--blue) !important; } [data-theme="light"] .pmc-footer-custom-badge { background: var(--gold-wash) !important; color: var(--gold-deep) !important; } /* ════════════ RAILS (pks-message-rails.css) — OUTER panel = darker silver ════════════ */ [data-theme="light"] .pmr-card { background: linear-gradient(180deg, rgba(255,255,255,.30), transparent 60%), #C8D2DF !important; border-color: #B5C1D0 !important; box-shadow: 0 2px 12px rgba(20,30,55,.10) !important; } [data-theme="light"] .pmr-card-head { color: var(--ink) !important; } [data-theme="light"] .pmr-card-eyebrow { color: var(--heading-accent) !important; } [data-theme="light"] .pmr-card-summary, [data-theme="light"] .pmr-step-label { color: var(--ink-muted) !important; } [data-theme="light"] .pmr-step.is-current .pmr-step-label, [data-theme="light"] .pmr-step.is-done .pmr-step-label { color: var(--ink) !important; } [data-theme="light"] .pmr-corridor, [data-theme="light"] .pmr-step::before { background: #A8B6C8 !important; } [data-theme="light"] .pmr-step-dot { background: #FFFFFF !important; border-color: #8FA4BF !important; } [data-theme="light"] .pmr-step.is-done .pmr-step-dot { background: var(--success) !important; border-color: var(--success) !important; } [data-theme="light"] .pmr-card-pill { color: var(--ink-muted) !important; background: rgba(16,19,25,.05) !important; border-color: var(--line) !important; } [data-theme="light"] .pmr-card-delivery .pmr-card-pill { color: var(--gold-deep) !important; background: var(--gold-wash) !important; border-color: rgba(147,106,18,.40) !important; } [data-theme="light"] .pmr-card-return .pmr-card-pill { color: var(--blue) !important; background: var(--blue-wash) !important; border-color: var(--blue-border) !important; } /* ════════════ Q&A MODAL (pks-qa.css — had ZERO light support) ════════════ */ [data-theme="light"] .pks-qa-backdrop { background: rgba(20,28,40,.50) !important; } [data-theme="light"] .pks-qa-dialog { background: var(--bg-2) !important; border-color: var(--line-2) !important; box-shadow: var(--elev-2) !important; } [data-theme="light"] .pks-qa-head, [data-theme="light"] .pks-qa-foot, [data-theme="light"] .pks-qa-bar { background: transparent !important; border-color: var(--line) !important; } [data-theme="light"] .pks-qa-title { color: var(--ink) !important; } [data-theme="light"] .pks-qa-section-title { color: var(--heading-accent) !important; } [data-theme="light"] .pks-qa-subtitle, [data-theme="light"] .pks-qa-label, [data-theme="light"] .pks-qa-q-text, [data-theme="light"] .pks-qa-question-display { color: var(--ink-muted) !important; } [data-theme="light"] .pks-qa-a-text, [data-theme="light"] .pks-qa-a-body, [data-theme="light"] .pks-qa-q-body { color: var(--ink) !important; } [data-theme="light"] .pks-qa-item, [data-theme="light"] .pks-qa-q-row, [data-theme="light"] .pks-qa-a-row { background: var(--bg-3) !important; border-color: var(--line) !important; } [data-theme="light"] .pks-qa-select, [data-theme="light"] .pks-qa-textarea { background: var(--bg-2) !important; color: var(--ink) !important; border-color: var(--line-2) !important; } [data-theme="light"] .pks-qa-select option { background: var(--bg-2) !important; color: var(--ink) !important; } [data-theme="light"] .pks-qa-textarea::placeholder { color: var(--ink-faint) !important; } [data-theme="light"] .pks-qa-char-counter, [data-theme="light"] .pks-qa-custom-hint, [data-theme="light"] .pks-qa-disclaimer, [data-theme="light"] .pks-qa-moderation-note, [data-theme="light"] .pks-qa-meta, [data-theme="light"] .pks-qa-pending, [data-theme="light"] .pks-qa-locked, [data-theme="light"] .pks-qa-empty { color: var(--ink-dim) !important; } [data-theme="light"] .pks-qa-notice { background: var(--blue-wash) !important; color: var(--ink-muted) !important; border-color: var(--blue-border) !important; } [data-theme="light"] .pks-qa-error-slot { color: var(--danger) !important; } [data-theme="light"] .pks-qa-close { color: var(--ink-muted) !important; } [data-theme="light"] .pks-qa-close:hover { color: var(--ink) !important; } [data-theme="light"] .pks-qa-btn-secondary, [data-theme="light"] .pks-qa-btn-ghost { border-color: var(--line-2) !important; color: var(--ink) !important; } [data-theme="light"] .pks-qa-btn-secondary:hover, [data-theme="light"] .pks-qa-btn-ghost:hover { background: var(--bg-3) !important; border-color: var(--line-bright) !important; } [data-theme="light"] .pks-qa-avatar-seller { border-color: var(--gold) !important; } /* ════════════ TIMELINE (pks-review-timeline.js injected — white-on-white = "shot") ════════════ Specificity ([attr] .class) + !important beats the JS