/* ============================================================================ * radar-white.css — Radar "WHITE" theme (professional white/ink/gold) * ---------------------------------------------------------------------------- * A NEW, opt-in, sibling theme to radar-dark.css. Every rule is scoped under * `html[data-theme="white"]` so this sheet is purely additive and NEVER touches * or depends on the dark theme. The base light (cream) theme provides layout; * this sheet re-skins it to a clean, flat, airy white/ink look. * * DESIGN TARGET (measured from greatplacetowork.com — the reference for * "professional"): pure white surfaces, ONE near-black ink for nearly all text, * a single restrained gold accent used only as tiny marks, big headings with * TIGHT (negative) letter-spacing, small UPPERCASE wide-tracked "eyebrow" * section labels, and generous whitespace. * * RULES: * - Square, flat, airy, minimal. One ink, one grey, gold only as seasoning. * - NO round corners on cards / panels / results / sidebar (border-radius:0). * KEEP pills / chips / avatars / score-rings rounded. * - Gold is a MARK only: active-tab underline, focus ring, thin top/side rule, * link hover, score-ring stroke, eyebrow tick. NEVER gold text on white, * NEVER gold fills for primary buttons. * - Primary buttons = ink fill, white text. Secondary = white, 1px border. * - !important is used only where overriding the base light theme's inline / * !important rules (search.php result-card base rule, inline cream hexes, * Tailwind arbitrary utilities). This sheet must load AFTER the page CSS. * * SCOPE GUARANTEE: mirror radar-dark.css §-by-§ so coverage matches 1:1. * ========================================================================== */ /* ============================================================================ * 1. DESIGN TOKENS (prefixed --w-, scoped to ) * ========================================================================== */ html[data-theme="white"] { /* ---- Surfaces / backgrounds ---- */ --w-bg: #ffffff; /* app background */ --w-bg-alt: #f7f7f7; /* secondary bands / sidebar / nested tiles */ --w-surface: #ffffff; /* cards / panels */ --w-surface-hover: #fbfbfb; /* card hover */ --w-surface-lower: #eeeff1; /* nested-tile hover (was referenced but undefined) */ --w-chip-bg: #f3f3f3; /* meta chips / neutral pills */ /* ---- Borders / dividers ---- */ --w-border: #e6e8eb; /* 1px dividers / card borders */ --w-border-strong: #d8dbdf; /* hover / stronger dividers */ /* ---- Ink / text ---- */ --w-ink: #11131c; /* headings AND primary body text (cool near-black) */ --w-text-2: #4b5158; /* secondary body */ --w-muted: #898989; /* meta / labels / placeholder */ /* ---- Accent (GOLD — marks ONLY) ---- */ /* MONOCHROME: accent is now ink/grey (NO yellow). Marks = ink, washes = faint grey. */ --w-accent: #11131c; /* marks: active underline, score-ring, ticks */ --w-accent-rgb: 17, 19, 28; --w-accent-ring: rgba(17,19,28,0.20); /* focus ring (subtle dark) */ --w-accent-soft: rgba(17,19,28,0.05); /* faint grey chip / wash */ --w-accent-sel: rgba(17,19,28,0.12); /* ::selection bg */ /* ---- Buttons ---- */ --w-btn: #11131c; /* primary fill */ --w-btn-hover: #2b2f36; /* primary hover */ --w-btn-text: #ffffff; /* ---- Status / sentiment (kept semantic, muted for white) ---- */ --w-pos: #2f7d4f; --w-pos-bg: #eef6f0; --w-warn: #9a6b00; --w-warn-bg: #faf4e3; --w-neg: #b54032; --w-neg-bg: #fbeeec; --w-tertiary: #2f6db0; /* ---- Effects ---- */ --w-shadow-card: 0 1px 2px rgba(16,19,28,.04), 0 4px 14px rgba(16,19,28,.06); --w-shadow-card-hover: 0 2px 4px rgba(16,19,28,.06), 0 8px 24px rgba(16,19,28,.10); --w-shadow-btn: 0 1px 2px rgba(16,19,28,.10); --w-radius-pill: 999px; --w-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --w-font-display: 'Manrope', sans-serif; /* ---- Company-page (--r-*) token rebind: re-tints the company-inline cascade automatically. White surface, ink text, ink as the "primary" (NO gold fills); gold used only via targeted overrides below for marks. ---- */ --r-primary: #11131c; /* was warm gold — now ink so fills/labels read */ --r-primary-soft: #2b2f36; --r-primary-container: #2b2f36; --r-surface: #ffffff; --r-surface-low: #f7f7f7; --r-surface-lower: #eeeff1; --r-on-surface: #11131c; --r-on-surface-muted: #4b5158; --r-tertiary: #2f6db0; --r-card-shadow: 0 1px 2px rgba(16,19,28,.04), 0 4px 14px rgba(16,19,28,.06); --r-card-shadow-hover: 0 2px 4px rgba(16,19,28,.06), 0 8px 24px rgba(16,19,28,.10); } /* ============================================================================ * 2. FOUNDATION — body, scrollbars, selection, fonts, links * Clean / flat — NO dot texture (the dark theme's signature does not apply). * ========================================================================== */ html[data-theme="white"] body { background: var(--w-bg) !important; color: var(--w-ink); font-family: var(--w-font); } /* Scrollbars — neutral grey thumb (NOT gold for the white theme) */ html[data-theme="white"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme="white"] ::-webkit-scrollbar-track { background: transparent; } html[data-theme="white"] ::-webkit-scrollbar-thumb { background: var(--w-border-strong); border-radius: 5px; } html[data-theme="white"] ::-webkit-scrollbar-thumb:hover { background: #c2c5ca; } html[data-theme="white"] * { scrollbar-color: var(--w-border-strong) transparent; scrollbar-width: thin; } /* Text selection — gold wash, ink text */ html[data-theme="white"] ::selection { background: var(--w-accent-sel); color: var(--w-ink); } /* Generic link tint — ink, gold-ish only via a subtle hover underline */ html[data-theme="white"] a { color: var(--w-ink); } html[data-theme="white"] a:hover { color: var(--w-ink); text-decoration-color: var(--w-accent); } /* ============================================================================ * 3. TYPOGRAPHY — the professional signature lives here. * Tight-tracked Manrope headings + small UPPERCASE wide-tracked eyebrows. * ========================================================================== */ html[data-theme="white"] h1, html[data-theme="white"] h2, html[data-theme="white"] h3, html[data-theme="white"] .font-display, html[data-theme="white"] .font-\[\'Manrope\'\] { font-family: var(--w-font-display); color: var(--w-ink); } html[data-theme="white"] h1 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; } html[data-theme="white"] h2 { font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; } html[data-theme="white"] h3 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; } /* Body defaults */ html[data-theme="white"] body, html[data-theme="white"] p { font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--w-ink); } /* Eyebrow / section-label vocabulary — small, uppercase, wide-tracked, muted */ html[data-theme="white"] .sb-section-label, html[data-theme="white"] .sb-sub-label, html[data-theme="white"] .r-card h4, html[data-theme="white"] .r-fact-label, html[data-theme="white"] .r-intel-readiness-label, html[data-theme="white"] .r-earning-hero-eyebrow, html[data-theme="white"] .r-earning-headline-eyebrow, html[data-theme="white"] .r-earning-hero-spark-label, html[data-theme="white"] .r-earning-stat-label, html[data-theme="white"] .r-earning-snapshot-label, html[data-theme="white"] .r-mkt-tile-label, html[data-theme="white"] .r-mkt-section-label, html[data-theme="white"] .r-mkt-dstat-label, html[data-theme="white"] .r-tracker-form label, html[data-theme="white"] .section-sub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--w-muted); } /* Stronger eyebrow variant (ink) for headline kickers */ html[data-theme="white"] .r-earning-hero-eyebrow { color: var(--w-ink); } /* The sidebar "Filters" sticky header uses .sb-section-label with an inline font-size:16px/normal-case/ink override — leave that inline intact; the eyebrow rule above is overridden by its own inline style. */ /* Generic reusable typography helpers used by JS-rendered nodes (.d-* parity) */ html[data-theme="white"] .d-title { font-family: var(--w-font-display); font-weight: 700; font-size: 38px; color: var(--w-ink); letter-spacing: -0.02em; line-height: 1.1; text-shadow: none; } html[data-theme="white"] .d-eyebrow { font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--w-muted); opacity: 1; } @media (max-width: 760px) { html[data-theme="white"] .d-title { font-size: 28px; } } /* ---------------------------------------------------------------------------- * Reusable gold-mark signature (white parity of dark's .d-hairline). On white * the "signature" is a thin gold TOP rule (1px gold->transparent), shown only * on hover via the per-component ::before rules. The host helper exposes it for * JS-rendered nodes that opt in with .d-hairline-host / .d-hairline. * -------------------------------------------------------------------------- */ html[data-theme="white"] .d-hairline-host { position: relative; } html[data-theme="white"] .d-hairline-host::before, html[data-theme="white"] .d-hairline::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, var(--w-accent), transparent); opacity: 0; transition: opacity .2s ease; } html[data-theme="white"] .d-hairline-host:hover::before, html[data-theme="white"] .d-hairline:hover::before { opacity: .9; } /* Responsive card grid (parity of dark .d-grid) */ html[data-theme="white"] .d-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 20px; margin-top: 26px; } @media (max-width: 760px) { html[data-theme="white"] .d-grid { grid-template-columns: 1fr; gap: 14px; } } @keyframes ht-rise-w { to { opacity: 1; transform: translateY(0); } } @keyframes ht-fill-w { to { width: var(--w,100%); } } /* ============================================================================ * 4. GENERIC COMPONENT VOCABULARY (.d-*) — Wire phase + JS-rendered nodes * ========================================================================== */ /* ---- Card / panel — white, square, subtle shadow, thin gold top rule ---- */ html[data-theme="white"] .d-card { position: relative; background: var(--w-surface); border: 1px solid var(--w-border); border-radius: 0; padding: 22px 22px 18px; box-shadow: var(--w-shadow-card); backdrop-filter: none; -webkit-backdrop-filter: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } html[data-theme="white"] .d-card:hover { border-color: var(--w-border-strong); box-shadow: var(--w-shadow-card-hover); transform: translateY(-1px); } html[data-theme="white"] .d-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--w-accent), transparent); opacity: 0; transition: opacity .2s ease; pointer-events: none; } html[data-theme="white"] .d-card:hover::before { opacity: .9; } html[data-theme="white"] .d-panel { position: relative; max-width: 720px; margin: 0 auto; background: var(--w-surface); border: 1px solid var(--w-border); border-radius: 0; padding: 26px 28px 22px; box-shadow: var(--w-shadow-card); backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-theme="white"] .d-panel::before { content: none; } html[data-theme="white"] .card, html[data-theme="white"] .d-card-flat { background-color: var(--w-surface); border: 1px solid var(--w-border); border-radius: 0; color: var(--w-ink); } html[data-theme="white"] .chart-container, html[data-theme="white"] .r-chart-wrap canvas { background-color: var(--w-surface); } /* ---- Buttons ---- */ html[data-theme="white"] .d-btn { background: var(--w-btn); color: var(--w-btn-text); font-family: var(--w-font); font-weight: 700; font-size: 14px; padding: 12px 22px; border: 0; border-radius: 0; cursor: pointer; letter-spacing: 0.2px; box-shadow: var(--w-shadow-btn); transition: background .15s ease; } html[data-theme="white"] .d-btn:hover { background: var(--w-btn-hover); } html[data-theme="white"] .d-btn:disabled { opacity: .45; cursor: not-allowed; } html[data-theme="white"] .d-btn-pill { background: var(--w-btn); color: var(--w-btn-text); font-weight: 700; font-size: 13px; padding: 7px 14px; border: 0; border-radius: var(--w-radius-pill); box-shadow: var(--w-shadow-btn); cursor: pointer; } html[data-theme="white"] .d-btn-ghost { position: relative; z-index: 0; overflow: hidden; cursor: pointer; background: #fff; color: var(--w-ink); border: 1px solid var(--w-border); border-radius: 0; padding: 12px 26px; font-family: var(--w-font); font-size: 13px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; transition: background .2s, border-color .2s; } html[data-theme="white"] .d-btn-ghost:hover { background: var(--w-bg-alt); border-color: var(--w-border-strong); } html[data-theme="white"] .d-btn-ghost::before { content: none; } html[data-theme="white"] .d-btn-ghost::after { content: none; } html[data-theme="white"] .d-btn-ghost.is-running { border-color: var(--w-accent); box-shadow: 0 0 0 2px var(--w-accent-ring); } /* ---- Tabs + window chips ---- */ html[data-theme="white"] .d-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--w-bg-alt); border: 1px solid var(--w-border); border-radius: 0; } html[data-theme="white"] .d-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 18px; min-width: 110px; background: transparent; border: 0; cursor: pointer; border-radius: 0; color: var(--w-text-2); font-family: var(--w-font); transition: all .15s ease; border-bottom: 2px solid transparent; } html[data-theme="white"] .d-tab:hover:not(.is-active) { color: var(--w-ink); background: #fff; } html[data-theme="white"] .d-tab.is-active { background: #fff; color: var(--w-ink); box-shadow: none; border-bottom-color: var(--w-accent); } html[data-theme="white"] .d-tab.is-disabled { opacity: .35; cursor: not-allowed; } html[data-theme="white"] .d-wins { display: inline-flex; gap: 2px; padding: 3px; background: var(--w-bg-alt); border: 1px solid var(--w-border); border-radius: 0; } html[data-theme="white"] .d-win { background: transparent; border: 0; cursor: pointer; padding: 6px 12px; border-radius: 0; font-family: var(--w-font); font-weight: 600; font-size: 12px; letter-spacing: .3px; color: var(--w-muted); transition: all .15s ease; border-bottom: 2px solid transparent; } html[data-theme="white"] .d-win:hover:not(.is-active) { color: var(--w-text-2); background: #fff; } html[data-theme="white"] .d-win.is-active { color: var(--w-ink); background: #fff; box-shadow: none; border-bottom-color: var(--w-accent); } /* ---- Inputs / selects ---- */ html[data-theme="white"] .d-input, html[data-theme="white"] input[type="text"], html[data-theme="white"] input[type="search"], html[data-theme="white"] input[type="number"], html[data-theme="white"] input[type="email"], html[data-theme="white"] textarea { background: #fff; color: var(--w-ink); border: 1px solid var(--w-border); border-radius: 0; font-family: var(--w-font); transition: border-color .15s ease, box-shadow .15s ease; } html[data-theme="white"] .d-input { width: 100%; padding: 14px 16px; font-size: 15px; } html[data-theme="white"] .d-input:focus, html[data-theme="white"] input[type="text"]:focus, html[data-theme="white"] input[type="search"]:focus, html[data-theme="white"] input[type="number"]:focus, html[data-theme="white"] input[type="email"]:focus, html[data-theme="white"] textarea:focus { outline: 0; border-color: var(--w-border-strong); box-shadow: 0 0 0 2px var(--w-accent-ring); } html[data-theme="white"] input::placeholder, html[data-theme="white"] textarea::placeholder { color: var(--w-muted); } html[data-theme="white"] .d-select, html[data-theme="white"] select { padding: 9px 12px; background-color: #fff; color: var(--w-ink); border: 1px solid var(--w-border); border-radius: 0; font-family: var(--w-font); font-size: 13.5px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; padding-right: 30px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } html[data-theme="white"] select option { background: #fff; color: var(--w-ink); } /* ---- Status dots + heat bar ---- */ html[data-theme="white"] .d-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } html[data-theme="white"] .d-dot.neutral { background: var(--w-border-strong); } html[data-theme="white"] .d-dot.negative { background: var(--w-warn); } html[data-theme="white"] .d-dot.critical { background: var(--w-neg); } html[data-theme="white"] .d-heat-rail { height: 6px; width: 100%; background: var(--w-bg-alt); border-radius: 3px; overflow: hidden; } html[data-theme="white"] .d-heat-bar { height: 100%; width: var(--w,100%); background: var(--w-ink); border-radius: 3px; } /* ---- Effects ---- */ html[data-theme="white"] .d-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--w-accent); animation: ht-pulse-w 2.2s infinite cubic-bezier(.4,0,.6,1); } @keyframes ht-pulse-w { 0% { box-shadow: 0 0 0 0 rgba(17,19,28,.40); } 70% { box-shadow: 0 0 0 10px rgba(17,19,28,0); } 100% { box-shadow: 0 0 0 0 rgba(17,19,28,0); } } html[data-theme="white"] .d-skel-line { height: 12px; border-radius: 4px; margin: 10px 0; background: linear-gradient(90deg, #ececec, #f5f5f5, #ececec); background-size: 200% 100%; animation: ht-shimmer-w 1.5s infinite linear; } @keyframes ht-shimmer-w { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================================================ * 5. SHARED NAV (src/php/shared-nav.php) — restyle, NOT invert. * nav.fixed is Tailwind arbitrary-class based; the html[data-theme] prefix + * loading-after-page wins. White bg + blur, ink logo/links, gold active * underline, ink-fill CTAs. * ========================================================================== */ html[data-theme="white"] nav.fixed, html[data-theme="white"] nav.top_nav, html[data-theme="white"] .topnav { background: rgba(255,255,255,0.92) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border-bottom: 1px solid var(--w-border) !important; } /* Brand: "Companies" overline + "RADAR" plaque */ html[data-theme="white"] nav.fixed .rdr-brand-over { color: var(--w-muted) !important; } html[data-theme="white"] nav.fixed .rdr-brand-mark { background: var(--w-ink) !important; color: #fff !important; } /* Brand square mark — ink fill, white glyph */ html[data-theme="white"] nav.fixed a > div.bg-\[\#705d00\] { background: var(--w-ink) !important; } html[data-theme="white"] nav.fixed a > div.bg-\[\#705d00\] .material-symbols-outlined { color: #fff !important; } /* "Intelligence" overline */ html[data-theme="white"] nav.fixed .text-\[\#705d00\] { color: var(--w-muted) !important; } /* Nav tab links (inactive + active) */ html[data-theme="white"] nav.fixed a { color: var(--w-text-2) !important; } html[data-theme="white"] nav.fixed a:hover { color: var(--w-ink) !important; } html[data-theme="white"] nav.fixed a.border-\[\#705d00\], html[data-theme="white"] nav.fixed a.text-\[\#705d00\] { color: var(--w-ink) !important; border-bottom-color: var(--w-accent) !important; } /* Sign In ghost link */ html[data-theme="white"] nav.fixed a#nav-signin { color: var(--w-text-2) !important; } html[data-theme="white"] nav.fixed a#nav-signin:hover { color: var(--w-ink) !important; } /* "Get Pro" gradient CTA -> ink fill, white text */ html[data-theme="white"] nav.fixed a#nav-get-pro { background: var(--w-btn) !important; background-image: none !important; color: #fff !important; box-shadow: var(--w-shadow-btn) !important; } html[data-theme="white"] nav.fixed a#nav-get-pro:hover { background: var(--w-btn-hover) !important; } /* Dashboard CTA — white pill w/ border, ink text */ html[data-theme="white"] nav.fixed a#nav-dashboard-cta { background: #fff !important; color: var(--w-ink) !important; box-shadow: inset 0 0 0 1px var(--w-border) !important; } html[data-theme="white"] nav.fixed a#nav-dashboard-cta:hover { background: var(--w-bg-alt) !important; } /* Theme-toggle button (optional, injected by Wire phase) */ html[data-theme="white"] nav.fixed .radar-theme-toggle { background: #fff; color: var(--w-text-2); border: 1px solid var(--w-border); border-radius: var(--w-radius-pill); padding: 6px; cursor: pointer; display: inline-flex; align-items: center; } html[data-theme="white"] nav.fixed .radar-theme-toggle:hover { color: var(--w-ink); border-color: var(--w-border-strong); } /* ============================================================================ * 6. SEARCH PAGE — sidebar (.sb-*), result cards, smart box * ========================================================================== */ /* ---- Sidebar shell ---- */ html[data-theme="white"] aside#filteration_panel_company { background: var(--w-bg) !important; border-right: 1px solid var(--w-border) !important; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--w-text-2); } html[data-theme="white"] #filteration_panel_company::-webkit-scrollbar-thumb { background: var(--w-border-strong); } /* Breathing room above the Entity Type box (first filter under sticky header) */ html[data-theme="white"] #sb_entity_type_section { margin-top: 14px !important; } /* ---- Sidebar labels / reset ---- */ html[data-theme="white"] .sb-section-label, html[data-theme="white"] .sb-sub-label { color: var(--w-muted); } html[data-theme="white"] .sb-reset-btn { color: var(--w-muted); } html[data-theme="white"] .sb-reset-btn:hover { color: var(--w-ink); text-decoration-color: var(--w-accent); } /* ---- Sidebar search input ---- */ html[data-theme="white"] .sb-search-wrap { background: #fff; border: 1px solid var(--w-border); border-radius: 0; } html[data-theme="white"] .sb-search-input, html[data-theme="white"] .sb-input { color: var(--w-ink); background: #fff; } html[data-theme="white"] .sb-search-input::placeholder, html[data-theme="white"] .sb-input::placeholder { color: var(--w-muted); opacity: 1; } html[data-theme="white"] .sb-search-icon { color: var(--w-muted); } /* ---- Sidebar results dropdown ---- */ html[data-theme="white"] .sb-results-drop { background: #fff; border: 1px solid var(--w-border); border-top: none; color: var(--w-text-2); box-shadow: var(--w-shadow-card); } html[data-theme="white"] .sb-results-drop .btn, html[data-theme="white"] .sb-results-drop > button, html[data-theme="white"] .sb-results-drop > a, html[data-theme="white"] .sb-results-drop > div { color: var(--w-text-2); } html[data-theme="white"] .sb-results-drop .btn:hover, html[data-theme="white"] .sb-results-drop > button:hover, html[data-theme="white"] .sb-results-drop > a:hover, html[data-theme="white"] .sb-results-drop > div:hover { background: var(--w-bg-alt); } /* ---- Applied note ---- */ html[data-theme="white"] .sb-applied-note { color: var(--w-text-2); } /* ---- Pills (KEEP pill radius) ---- */ html[data-theme="white"] .sb-pill { background: var(--w-chip-bg); color: var(--w-text-2); border: 1px solid var(--w-border); } html[data-theme="white"] .sb-pill:hover { background: #ececec; } html[data-theme="white"] .sb-pill.sb-pill-active { background: var(--w-ink); color: #fff; box-shadow: none; border-color: var(--w-ink); } /* Added (selected) chips -> ink fill */ html[data-theme="white"] .sb-added-chips .btn { background: var(--w-ink) !important; color: #fff !important; } /* ---- Accordion ---- */ html[data-theme="white"] .sb-acc-wrap { border-top: 1px solid var(--w-border); } html[data-theme="white"] .sb-acc-head { color: var(--w-text-2); } html[data-theme="white"] .sb-acc-head:hover { color: var(--w-ink); } html[data-theme="white"] .sb-acc-icon { color: var(--w-muted); } /* ---- Year / number inputs, checkbox rows ---- */ html[data-theme="white"] .sb-year-input, html[data-theme="white"] .ps-num-input { background: #fff; color: var(--w-ink); border: 1px solid var(--w-border); } html[data-theme="white"] .sb-year-input:focus, html[data-theme="white"] .ps-num-input:focus { box-shadow: 0 0 0 2px var(--w-accent-ring); border-color: var(--w-border-strong); } html[data-theme="white"] .sb-check-row { color: var(--w-text-2); } html[data-theme="white"] .sb-check-row:hover span { color: var(--w-ink); } html[data-theme="white"] .sb-check-row input[type=checkbox] { accent-color: var(--w-ink); } /* ---- PRO badge — ink fill ---- */ html[data-theme="white"] .sb-pro-badge { background: var(--w-ink); color: #fff; } /* ---- Select-as-filter (ink chevron) ---- */ html[data-theme="white"] .sb-select, html[data-theme="white"] #entity-type-select, html[data-theme="white"] #filteration_panel_company select, html[data-theme="white"] select.sb-select { background-color: #fff; color: var(--w-ink); border: 1px solid var(--w-border); border-radius: 0; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; padding-right: 30px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } html[data-theme="white"] .sb-select:focus, html[data-theme="white"] #entity-type-select:focus { box-shadow: 0 0 0 2px var(--w-accent-ring); border-color: var(--w-border-strong); } html[data-theme="white"] .sb-select option, html[data-theme="white"] #entity-type-select option { background: #fff; color: var(--w-ink); } /* ---- Apply / Near Me buttons ---- */ html[data-theme="white"] .sb-apply-btn { background: var(--w-btn) !important; color: #fff !important; border: 0; border-radius: 0; } html[data-theme="white"] .sb-apply-btn:hover { background: var(--w-btn-hover) !important; } html[data-theme="white"] .sb-near-btn { background: #fff; color: var(--w-ink); border: 1px solid var(--w-border); border-radius: 0; } html[data-theme="white"] .sb-near-btn:hover { background: var(--w-bg-alt); border-color: var(--w-border-strong); } /* ---- #ps-sort-select (people toolbar; lives on search too) ---- */ html[data-theme="white"] #ps-sort-select { background-color: #fff; color: var(--w-ink); border: 1px solid var(--w-border); border-radius: 0; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; padding-right: 30px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } html[data-theme="white"] #ps-sort-select option { background: #fff; color: var(--w-ink); } /* ---- Result cards (.result_boxes_companies + .radar-card-*) ---- */ html[data-theme="white"] .result_boxes_companies { position: relative; background: var(--w-surface) !important; border: 1px solid var(--w-border) !important; border-radius: 0 !important; box-shadow: var(--w-shadow-card) !important; backdrop-filter: none; -webkit-backdrop-filter: none; margin: 0 0 18px 0 !important; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important; } html[data-theme="white"] .result_boxes_companies::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--w-accent), transparent); opacity: 0; transition: opacity .2s ease; pointer-events: none; z-index: 2; } html[data-theme="white"] .result_boxes_companies:hover { border-color: var(--w-border-strong) !important; background: var(--w-surface-hover) !important; box-shadow: var(--w-shadow-card-hover) !important; transform: translateY(-1px) !important; } html[data-theme="white"] .result_boxes_companies:hover::before { opacity: .9; } html[data-theme="white"] .result_boxes_companies .professional_heading, html[data-theme="white"] .radar-card-name, html[data-theme="white"] .professional_heading { color: var(--w-ink) !important; font-family: var(--w-font-display); font-weight: 600; letter-spacing: -0.01em; } html[data-theme="white"] .result_boxes_companies .jost, html[data-theme="white"] .radar-card-body { color: var(--w-text-2) !important; } html[data-theme="white"] .result_boxes_companies .jost[style*="10bdb5"] { color: var(--w-ink) !important; } html[data-theme="white"] .result_boxes_companies .gradient_border { border: 1px solid var(--w-border) !important; background: var(--w-chip-bg) !important; } /* Meta chips on result cards */ html[data-theme="white"] .result_boxes_companies .jost.hover { background: var(--w-chip-bg) !important; color: var(--w-ink) !important; border: 1px solid var(--w-border) !important; } /* ---- Result-card CTAs (.radar-cta / .radar-cta-primary / .radar-cta-active) ---- */ html[data-theme="white"] .result_boxes_companies .radar-card-actions .radar-cta { background: #fff !important; color: var(--w-ink) !important; border: 1px solid var(--w-border) !important; border-radius: 0 !important; } html[data-theme="white"] .result_boxes_companies .radar-card-actions .radar-cta:hover { background: var(--w-bg-alt) !important; border-color: var(--w-border-strong) !important; } html[data-theme="white"] .result_boxes_companies .radar-card-actions .radar-cta-primary { background: var(--w-btn) !important; color: #fff !important; border-color: var(--w-btn) !important; } html[data-theme="white"] .result_boxes_companies .radar-card-actions .radar-cta-primary:hover { background: var(--w-btn-hover) !important; border-color: var(--w-btn-hover) !important; } html[data-theme="white"] .result_boxes_companies .radar-card-actions .radar-cta-active { background: var(--w-ink) !important; color: #fff !important; border-color: var(--w-ink) !important; } /* ---- Smart search box (#nav_smart_box / #smart_query_box / #smart_submit_btn) ---- */ html[data-theme="white"] #nav_smart_box #smart_query_box { background: #fff !important; color: var(--w-ink) !important; border: 1px solid var(--w-border) !important; border-radius: 0 !important; } html[data-theme="white"] #nav_smart_box #smart_query_box::placeholder { color: var(--w-muted) !important; } html[data-theme="white"] #nav_smart_box #smart_query_box:focus { border-color: var(--w-border-strong) !important; box-shadow: 0 0 0 2px var(--w-accent-ring) !important; } html[data-theme="white"] #nav_smart_box #smart_submit_btn { background: var(--w-btn) !important; color: #fff !important; background-image: none !important; } html[data-theme="white"] #nav_smart_box #smart_submit_btn:hover { background: var(--w-btn-hover) !important; } html[data-theme="white"] .smart-input-box { background: #fff; color: var(--w-ink); border: 1px solid var(--w-border); border-radius: 0; } html[data-theme="white"] .smart-input-box:focus { box-shadow: 0 0 0 2px var(--w-accent-ring); border-color: var(--w-border-strong); } html[data-theme="white"] .smart-greeting { color: var(--w-ink); } html[data-theme="white"] .smart-greeting-sub { color: var(--w-text-2); } html[data-theme="white"] .smart-greeting-sub em { color: var(--w-ink); font-style: normal; border-bottom: 2px solid var(--w-accent); } /* ---- Smart filter chips (.smart-chip*) — KEEP pill radius ---- */ html[data-theme="white"] .smart-chip-bar .smart-chip { background: var(--w-chip-bg); color: var(--w-text-2); border: 1px solid var(--w-border); } html[data-theme="white"] .smart-chip-bar .smart-chip:hover { background: #ececec; } html[data-theme="white"] .smart-chip-bar .smart-chip-label { color: var(--w-text-2); } html[data-theme="white"] .smart-chip-bar .smart-chip-tag { color: var(--w-muted); } html[data-theme="white"] .smart-chip-bar .smart-chip-x { color: var(--w-muted); } html[data-theme="white"] .smart-chip-bar .smart-chip-sem { background: #fff; color: var(--w-ink); border-color: var(--w-border-strong); box-shadow: inset 0 -2px 0 var(--w-accent); } html[data-theme="white"] .smart-chip-bar .smart-chip-sem .smart-chip-tag, html[data-theme="white"] .smart-chip-bar .smart-chip-sem .smart-chip-x { color: var(--w-ink); } html[data-theme="white"] .smart-chip-bar .smart-chip-clear:hover { background: var(--w-neg-bg); color: var(--w-neg); } html[data-theme="white"] .smart-sim-badge { background: var(--w-chip-bg); color: var(--w-ink); } html[data-theme="white"] .smart-product-tag { background: var(--w-chip-bg); color: var(--w-text-2); } html[data-theme="white"] .smart-profile-link { color: var(--w-ink); text-decoration-color: var(--w-accent); } html[data-theme="white"] .smart-filter-hint { background: var(--w-surface); border: 1px solid var(--w-border); color: var(--w-text-2); } /* ---- Stage / insight / refine chips (search.php inline) — KEEP pill radius ---- */ html[data-theme="white"] .stage-pill { background: #fff; color: var(--w-text-2); border: 1px solid var(--w-border); } html[data-theme="white"] .stage-pill:hover:not(.active) { border-color: var(--w-border-strong); color: var(--w-ink); } html[data-theme="white"] .stage-pill.active { background: var(--w-ink); color: #fff; border-color: var(--w-ink); } html[data-theme="white"] .insight-chip { background: var(--w-chip-bg); color: var(--w-text-2); border: 1px solid var(--w-border); } html[data-theme="white"] .insight-chip:hover { background: var(--w-ink); color: #fff; border-color: var(--w-ink); } html[data-theme="white"] .insight-chip .count { opacity: 0.6; font-weight: 400; } html[data-theme="white"] .refine-chip { background: #fff; color: var(--w-text-2); border: 1px solid var(--w-border); } html[data-theme="white"] .refine-chip:hover { background: var(--w-bg-alt); border-color: var(--w-border-strong); color: var(--w-ink); } html[data-theme="white"] .refine-chip-active { background: var(--w-ink); color: #fff; border-color: var(--w-ink); } html[data-theme="white"] .refine-chip-active:hover { background: var(--w-btn-hover); } html[data-theme="white"] .refine-chip-active .refine-x { color: #fff; } /* ---- Empty state ---- */ html[data-theme="white"] #empty-state .bg-\[\#f0ede8\] { background-color: var(--w-chip-bg) !important; } html[data-theme="white"] #empty-state .text-\[\#705d00\] { color: var(--w-ink) !important; } html[data-theme="white"] #empty-state h2 { color: var(--w-ink) !important; } html[data-theme="white"] #empty-state p { color: var(--w-text-2) !important; } /* ---- Results toolbar / bulk-actions bar (inline cream backgrounds) ---- */ html[data-theme="white"] #bulk-actions-bar { background: var(--w-bg-alt) !important; border-color: var(--w-border) !important; } /* ---- Pagination strip (.bottom_nav) ---- */ html[data-theme="white"] .bottom_nav .btn, html[data-theme="white"] .bottom_nav .action_button { background: #fff !important; color: var(--w-ink) !important; border: 1px solid var(--w-border) !important; border-radius: 0 !important; } html[data-theme="white"] .bottom_nav .btn-primary, html[data-theme="white"] .bottom_nav .btn.btn-primary { background: var(--w-btn) !important; color: #fff !important; border-color: var(--w-btn) !important; } html[data-theme="white"] .bottom_nav .btn-primary:hover { background: var(--w-btn-hover) !important; } html[data-theme="white"] .bottom_nav .btn-secondary, html[data-theme="white"] .bottom_nav .btn.btn-secondary { background: #fff !important; color: var(--w-ink) !important; border: 1px solid var(--w-border) !important; } html[data-theme="white"] .bottom_nav .btn-secondary:hover { background: var(--w-bg-alt) !important; } /* ============================================================================ * 7. PEOPLE PAGE — person cards (.ps-*) + toolbar + drawer * ========================================================================== */ /* ---- Toolbar / counts ---- */ html[data-theme="white"] .ps-results-count { color: var(--w-ink); } html[data-theme="white"] .ps-sort-wrap label { color: var(--w-muted); } html[data-theme="white"] .ps-variant-tag { background: var(--w-chip-bg); color: var(--w-text-2); } /* ---- Entitlement notice (ID rule beats .hidden — preserve the trap) ---- */ html[data-theme="white"] #ps-entitlement-notice { background: var(--w-accent-soft); border: 1px solid var(--w-border-strong); color: var(--w-text-2); } html[data-theme="white"] #ps-entitlement-notice .material-symbols-outlined { color: var(--w-ink); } html[data-theme="white"] #ps-entitlement-notice a { color: var(--w-ink); text-decoration-color: var(--w-accent); } html[data-theme="white"] #ps-entitlement-notice .ps-ent-close { color: var(--w-muted); } html[data-theme="white"] #ps-entitlement-notice.hidden { display: none !important; } /* ---- State cards ---- */ html[data-theme="white"] .ps-state-card { background: var(--w-surface); border: 1px dashed var(--w-border-strong); border-radius: 0; } html[data-theme="white"] .ps-state-title { color: var(--w-ink); } html[data-theme="white"] .ps-state-sub { color: var(--w-text-2); } /* ---- Loading spinner (preserve ID+class hide trap) ---- */ html[data-theme="white"] #ps-loading { color: var(--w-ink); } html[data-theme="white"] #ps-loading.hidden { display: none !important; } /* ---- Filter autocomplete dropdown ---- */ html[data-theme="white"] .ps-ac-drop { background: #fff; border: 1px solid var(--w-border); border-top: none; box-shadow: var(--w-shadow-card); } html[data-theme="white"] .ps-ac-item { color: var(--w-text-2); border-bottom: 1px solid var(--w-border); } html[data-theme="white"] .ps-ac-item:hover { background: var(--w-bg-alt); } html[data-theme="white"] .ps-ac-item .material-symbols-outlined { color: var(--w-muted); } /* ---- Person card (white, square, thin gold top rule on hover) ---- */ html[data-theme="white"] .ps-card, html[data-theme="white"] .ps-card-compact { position: relative; background: var(--w-surface); border: 1px solid var(--w-border); border-radius: 0; box-shadow: var(--w-shadow-card); backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--w-text-2); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } html[data-theme="white"] .ps-card::before, html[data-theme="white"] .ps-card-compact::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--w-accent), transparent); opacity: 0; transition: opacity .2s ease; pointer-events: none; z-index: 2; } html[data-theme="white"] .ps-card:hover, html[data-theme="white"] .ps-card-compact:hover { border-color: var(--w-border-strong); background: var(--w-surface-hover); box-shadow: var(--w-shadow-card-hover); transform: translateY(-1px); } html[data-theme="white"] .ps-card:hover::before, html[data-theme="white"] .ps-card-compact:hover::before { opacity: .9; } /* Bulk-select: selected-card ring (beats the generic .ps-card border) */ html[data-theme="white"] .ps-card.ps-card-selected { border-color: var(--w-ink) !important; box-shadow: inset 0 0 0 1.5px var(--w-ink) !important; } /* Avatars KEEP their rounding */ html[data-theme="white"] .ps-avatar { background: var(--w-chip-bg); border: 2px solid var(--w-border); } html[data-theme="white"] .ps-avatar-initials { border: 2px solid var(--w-border); color: var(--w-ink); } html[data-theme="white"] .ps-name { color: var(--w-ink); font-family: var(--w-font-display); font-weight: 600; letter-spacing: -0.01em; } html[data-theme="white"] .ps-headline { color: var(--w-text-2); } html[data-theme="white"] .ps-loc { color: var(--w-muted); } html[data-theme="white"] .ps-loc .material-symbols-outlined { color: var(--w-muted); } html[data-theme="white"] .ps-summary { color: var(--w-text-2); } /* Role badges — neutral chip base; muted semantic tints */ html[data-theme="white"] .ps-role-badge { background: var(--w-chip-bg); color: var(--w-text-2); } html[data-theme="white"] .ps-role-founder { background: var(--w-warn-bg); color: var(--w-warn); } html[data-theme="white"] .ps-role-executive { background: var(--w-pos-bg); color: var(--w-pos); } html[data-theme="white"] .ps-role-investor { background: var(--w-pos-bg); color: var(--w-pos); } html[data-theme="white"] .ps-role-board { background: var(--w-chip-bg); color: var(--w-text-2); } /* Score badge -> ink fill (rounded by its own rule) */ html[data-theme="white"] .ps-score-badge { background: var(--w-ink); color: #fff; } html[data-theme="white"] .ps-score-label { color: #fff; opacity: 0.7; } /* Skills / stats / credentials */ html[data-theme="white"] .ps-skill-chip { background: var(--w-chip-bg); color: var(--w-text-2); } html[data-theme="white"] .ps-stat { background: var(--w-bg-alt); border: 1px solid var(--w-border); color: var(--w-text-2); } html[data-theme="white"] .ps-stat b { color: var(--w-ink); } html[data-theme="white"] .ps-edu, html[data-theme="white"] .ps-exp-row { color: var(--w-text-2); } html[data-theme="white"] .ps-edu .material-symbols-outlined, html[data-theme="white"] .ps-exp-row .material-symbols-outlined { color: var(--w-muted); } html[data-theme="white"] .ps-edu-yr { color: var(--w-muted); } /* Card actions / CTAs */ html[data-theme="white"] .ps-cta { background: #fff; color: var(--w-ink); border: 1px solid var(--w-border); } html[data-theme="white"] .ps-cta:hover { background: var(--w-bg-alt); border-color: var(--w-border-strong); } html[data-theme="white"] .ps-cta-reveal { background: var(--w-ink); border-color: var(--w-ink); color: #fff; } html[data-theme="white"] .ps-cta-reveal:hover { background: var(--w-btn-hover); color: #fff; } html[data-theme="white"] .ps-cta-active { background: var(--w-ink) !important; border-color: var(--w-ink) !important; color: #fff !important; box-shadow: none; } /* Pagination */ html[data-theme="white"] #ps-pagination { border-top: 1px solid var(--w-border); } html[data-theme="white"] .ps-page-btn { background: #fff; color: var(--w-ink); border: 1px solid var(--w-border); } html[data-theme="white"] .ps-page-btn:hover:not(:disabled) { background: var(--w-bg-alt); border-color: var(--w-border-strong); } html[data-theme="white"] .ps-page-info { color: var(--w-text-2); } html[data-theme="white"] #ps-filter-counter { background: var(--w-ink); color: #fff; } /* Shortlist drawer */ html[data-theme="white"] #ps-shortlist-overlay { background: rgba(16,19,28,0.32); } html[data-theme="white"] #ps-shortlist-drawer { background: #fff; color: var(--w-text-2); box-shadow: -12px 0 40px rgba(16,19,28,0.18); } html[data-theme="white"] .ps-sl-head { border-bottom: 1px solid var(--w-border); } html[data-theme="white"] .ps-sl-head h2 { color: var(--w-ink); } html[data-theme="white"] #ps-shortlist-count { color: var(--w-text-2); } html[data-theme="white"] #ps-shortlist-close { color: var(--w-muted); } html[data-theme="white"] #ps-shortlist-close:hover { color: var(--w-ink); } html[data-theme="white"] .ps-sl-loading { color: var(--w-ink); } html[data-theme="white"] .ps-sl-row { background: var(--w-surface); border: 1px solid var(--w-border); border-radius: 0; } html[data-theme="white"] .ps-sl-name { color: var(--w-ink); } html[data-theme="white"] .ps-sl-chip { background: var(--w-chip-bg); color: var(--w-ink); } html[data-theme="white"] .ps-sl-chip:hover { background: #ececec; } html[data-theme="white"] .ps-sl-nocontact { color: var(--w-muted); } html[data-theme="white"] .ps-sl-foot { border-top: 1px solid var(--w-border); } html[data-theme="white"] #ps-bulk-reveal-btn { background: var(--w-ink); color: #fff; } html[data-theme="white"] #ps-bulk-reveal-btn:hover:not(:disabled) { background: var(--w-btn-hover); } html[data-theme="white"] .ps-sl-foot-note { color: var(--w-muted); } /* ============================================================================ * 8. COMPANY PAGE — hero, tabs, cards, intel, earnings, market signals * --r-* tokens already rebound in §1; targeted overrides here for marks, * white card surfaces, gold underlines, square corners. * ========================================================================== */ /* company-inline sets html,body bg to var(--r-surface)=white now; force flat white. */ html[data-theme="white"] body { background: var(--w-bg) !important; } /* Hero */ html[data-theme="white"] .r-hero { background: var(--w-bg-alt); border-bottom: 1px solid var(--w-border); } html[data-theme="white"] .r-hero-name { color: var(--w-ink); font-family: var(--w-font-display); font-weight: 700; letter-spacing: -0.02em; } html[data-theme="white"] .r-hero-tagline, html[data-theme="white"] .r-hero-meta { color: var(--w-text-2); } html[data-theme="white"] .r-hero-logo { background: #fff; border: 1px solid var(--w-border); box-shadow: var(--w-shadow-card); } html[data-theme="white"] .r-hero-cta-primary { background: var(--w-btn); background-image: none; color: #fff; box-shadow: var(--w-shadow-btn); } html[data-theme="white"] .r-hero-cta-primary:hover { background: var(--w-btn-hover); box-shadow: var(--w-shadow-card-hover); } html[data-theme="white"] .r-hero-cta-ghost { background: #fff; color: var(--w-ink); border: 1px solid var(--w-border); } html[data-theme="white"] .r-hero-cta-ghost:hover { background: var(--w-bg-alt); border-color: var(--w-border-strong); } html[data-theme="white"] .r-hero-flag { background: #fff; color: var(--w-ink); box-shadow: none; border: 1px solid var(--w-border); } html[data-theme="white"] .r-hero-flag .material-symbols-outlined { color: var(--w-muted); } html[data-theme="white"] .r-plan-badge { background: var(--w-chip-bg); color: var(--w-text-2); } html[data-theme="white"] .r-plan-badge.pro { background: var(--w-ink); color: #fff; } html[data-theme="white"] .r-plan-badge.business { background: var(--w-ink); color: #fff; } /* Tab bar (sticky) */ html[data-theme="white"] .r-tabs-bar { background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--w-border); } html[data-theme="white"] .r-tab { color: var(--w-muted); border-bottom: 2px solid transparent; } html[data-theme="white"] .r-tab:hover { color: var(--w-ink); } html[data-theme="white"] .r-tab.active { color: var(--w-ink); border-bottom-color: var(--w-accent); } html[data-theme="white"] .r-tab-lock { opacity: 0.7; } /* Tab panel shells — flat white canvas behind cards */ html[data-theme="white"] .r-panel-wrap, html[data-theme="white"] .r-panel { background: transparent; color: var(--w-text-2); } /* Section cards — white, square, subtle shadow + gold top rule on hover */ html[data-theme="white"] .r-card, html[data-theme="white"] .r-intel-card, html[data-theme="white"] .r-earning-stat-tile, html[data-theme="white"] .r-pulse-strip, html[data-theme="white"] .r-mkt-drawer { position: relative; background: var(--w-surface); border: 1px solid var(--w-border); border-radius: 0; box-shadow: var(--w-shadow-card); backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--w-text-2); } html[data-theme="white"] .r-card::before, html[data-theme="white"] .r-intel-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--w-accent), transparent); opacity: 0; transition: opacity .2s ease; pointer-events: none; } html[data-theme="white"] .r-card:hover::before, html[data-theme="white"] .r-intel-card:hover::before { opacity: .85; } html[data-theme="white"] .r-card h3, html[data-theme="white"] .r-intel-title, html[data-theme="white"] .r-fact-value, html[data-theme="white"] .r-mini-name, html[data-theme="white"] .r-comp-card-name { color: var(--w-ink); } html[data-theme="white"] .r-card h3, html[data-theme="white"] .r-intel-title { font-family: var(--w-font-display); letter-spacing: -0.01em; } html[data-theme="white"] .r-card h4 { color: var(--w-muted); } html[data-theme="white"] .r-intel-narrative { color: var(--w-ink); } html[data-theme="white"] .r-intel-stats { color: var(--w-text-2); } html[data-theme="white"] .r-intel-stats strong { color: var(--w-ink); } /* Facts / pills / mini cards — nested tiles = alt bg, square */ html[data-theme="white"] .r-fact, html[data-theme="white"] .r-mini, html[data-theme="white"] .r-comp-card, html[data-theme="white"] .r-mkt-tile { background: var(--w-bg-alt); color: var(--w-text-2); border-radius: 0; } html[data-theme="white"] .r-pill { background: var(--w-chip-bg); color: var(--w-text-2); } html[data-theme="white"] .r-mini:hover { background: var(--w-surface-lower); } html[data-theme="white"] .r-comp-card { border: 1px solid var(--w-border); } html[data-theme="white"] .r-comp-card:hover { background: #fff; box-shadow: var(--w-shadow-card-hover); border-color: var(--w-border-strong); } html[data-theme="white"] .r-pill.gold { background: var(--w-ink); color: #fff; } html[data-theme="white"] .r-pill.muted { background: transparent; color: var(--w-muted); border: 1px solid var(--w-border); } html[data-theme="white"] .r-mini-logo, html[data-theme="white"] .r-comp-card-head .r-mini-logo { background: #fff; border: 1px solid var(--w-border); } html[data-theme="white"] .r-mini-logo-letters, html[data-theme="white"] .r-comp-card-launch { color: var(--w-muted); } html[data-theme="white"] .r-comp-card:hover .r-comp-card-launch { color: var(--w-ink); } html[data-theme="white"] .r-comp-card-desc, html[data-theme="white"] .r-comp-card-meta, html[data-theme="white"] .r-comp-card-domain { color: var(--w-text-2); } /* Drilldown bar / pill */ html[data-theme="white"] .r-drill-bar { background: var(--w-bg-alt); color: var(--w-text-2); } html[data-theme="white"] .r-drill-pill { background: var(--w-ink); color: #fff; } html[data-theme="white"] .r-drill-pill button { background: rgba(255,255,255,0.25); color: #fff; } /* Intel icon / scores */ html[data-theme="white"] .r-intel-icon { background: var(--w-accent-soft); } html[data-theme="white"] .r-intel-icon .material-symbols-outlined { color: var(--w-ink); } html[data-theme="white"] .r-intel-icon.risk { background: var(--w-neg-bg); } html[data-theme="white"] .r-intel-icon.risk .material-symbols-outlined { color: var(--w-neg); } html[data-theme="white"] .r-intel-score-num, html[data-theme="white"] .r-intel-readiness-num { color: var(--w-ink); } html[data-theme="white"] .r-intel-score-num.high { color: var(--w-pos); } html[data-theme="white"] .r-intel-score-num.med { color: var(--w-ink); } html[data-theme="white"] .r-intel-score-num.low { color: var(--w-warn); } html[data-theme="white"] .r-intel-score-num.risk { color: var(--w-neg); } html[data-theme="white"] .r-intel-bar { background: var(--w-bg-alt); } html[data-theme="white"] .r-intel-bar-fill { background: var(--w-ink); } html[data-theme="white"] .r-intel-bar-fill.high { background: var(--w-pos); } html[data-theme="white"] .r-intel-bar-fill.low { background: var(--w-warn); } html[data-theme="white"] .r-intel-bar-fill.risk { background: var(--w-neg); } html[data-theme="white"] .r-intel-card.composite { background: var(--w-bg-alt); } html[data-theme="white"] .r-intel-readiness-tile { background: #fff; border: 1px solid var(--w-border); box-shadow: none; border-radius: 0; } html[data-theme="white"] .r-intel-warn { background: var(--w-neg-bg); color: var(--w-neg); } /* Pulse strip — donut ring uses gold as the score-ring stroke (kept rounded) */ html[data-theme="white"] .r-pulse-ring-bg { stroke: var(--w-border); } html[data-theme="white"] .r-pulse-ring-fg { stroke: var(--w-accent); } html[data-theme="white"] .r-pulse-ring-num, html[data-theme="white"] .r-pulse-label.normal { color: var(--w-ink); } html[data-theme="white"] .r-pulse-label.high { color: var(--w-pos); } html[data-theme="white"] .r-pulse-label.active { color: var(--w-ink); } html[data-theme="white"] .r-pulse-label.quiet, html[data-theme="white"] .r-pulse-label.dormant { color: var(--w-muted); } html[data-theme="white"] .r-pulse-label.mixed { color: var(--w-warn); } html[data-theme="white"] .r-pulse-label.risk { color: var(--w-neg); } html[data-theme="white"] .r-pulse-meta, html[data-theme="white"] .r-pulse-drivers { color: var(--w-text-2); } html[data-theme="white"] .r-pulse-meta-item strong, html[data-theme="white"] .r-pulse-drivers strong { color: var(--w-ink); } html[data-theme="white"] .r-pulse-meta-item.up strong { color: var(--w-pos); } html[data-theme="white"] .r-pulse-meta-item.down strong { color: var(--w-neg); } html[data-theme="white"] .r-pulse-badge { background: var(--w-chip-bg); color: var(--w-ink); } html[data-theme="white"] .r-pulse-badge .material-symbols-outlined { color: var(--w-muted); } html[data-theme="white"] .r-pulse-badge.risk { background: var(--w-neg-bg); color: var(--w-neg); } html[data-theme="white"] .r-pulse-badge.risk .material-symbols-outlined { color: var(--w-neg); } html[data-theme="white"] .r-pulse-fresh { border-top: 1px solid var(--w-border); color: var(--w-muted); } html[data-theme="white"] .r-pulse-fresh-warn { color: var(--w-warn); } /* Upgrade banner / lock card — flat alt-bg, ink CTA, gold underline accent */ html[data-theme="white"] .r-upgrade { background: var(--w-bg-alt); border: 1px solid var(--w-border); box-shadow: none; } html[data-theme="white"] .r-upgrade-icon { background: #fff; border: 1px solid var(--w-border); color: var(--w-ink); } html[data-theme="white"] .r-upgrade-title { color: var(--w-ink); } html[data-theme="white"] .r-upgrade-sub { color: var(--w-text-2); } html[data-theme="white"] .r-upgrade-cta { background: var(--w-btn); color: #fff; } html[data-theme="white"] .r-upgrade-cta:hover { background: var(--w-btn-hover); color: #fff; } html[data-theme="white"] .r-lock-pill { background: var(--w-chip-bg); color: var(--w-text-2); } html[data-theme="white"] .r-locked > .r-locked-overlay { background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.75)); color: var(--w-ink); } /* Event timeline */ html[data-theme="white"] .r-event { border-bottom: 1px solid var(--w-border); } html[data-theme="white"] .r-event-date { color: var(--w-ink); } html[data-theme="white"] .r-event-label { background: var(--w-chip-bg); color: var(--w-text-2); } html[data-theme="white"] .r-event-label.funding { background: var(--w-chip-bg); color: var(--w-ink); } html[data-theme="white"] .r-event-label.layoffs { background: var(--w-neg-bg); color: var(--w-neg); } html[data-theme="white"] .r-event-label.earnings { background: #eaf1f8; color: var(--w-tertiary); } html[data-theme="white"] .r-event-label.key_people { background: var(--w-pos-bg); color: var(--w-pos); } html[data-theme="white"] .r-event-headline { color: var(--w-ink); } html[data-theme="white"] .r-event.retro::after { color: var(--w-warn); } /* Tracker form */ html[data-theme="white"] .r-tracker-form label { color: var(--w-muted); } html[data-theme="white"] .r-tracker-form input, html[data-theme="white"] .r-tracker-form select { background: #fff; color: var(--w-ink); border: 1px solid var(--w-border); border-radius: 0; } html[data-theme="white"] .r-tracker-form input:focus, html[data-theme="white"] .r-tracker-form select:focus { border-color: var(--w-border-strong); box-shadow: 0 0 0 2px var(--w-accent-ring); } html[data-theme="white"] .r-tracker-form button { background: var(--w-btn); color: #fff; border-radius: 0; } html[data-theme="white"] .r-tracker-form button:hover { background: var(--w-btn-hover); } /* Quota strip + toast */ html[data-theme="white"] .r-quota-strip { background: #fff; color: var(--w-text-2); box-shadow: var(--w-shadow-card); border: 1px solid var(--w-border); border-radius: 0; } html[data-theme="white"] .r-quota-strip strong { color: var(--w-ink); } html[data-theme="white"] .r-toast { background: var(--w-ink); color: #fff; border-radius: 0; } /* Skeleton */ html[data-theme="white"] .r-skel { background: linear-gradient(90deg, #ececec, #f5f5f5, #ececec); background-size: 200% 100%; } /* Earnings hero + tab */ html[data-theme="white"] .r-earning-hero { background: var(--w-bg-alt); border: 1px solid var(--w-border); border-radius: 0; box-shadow: var(--w-shadow-card); } html[data-theme="white"] .r-earning-hero::before { background: radial-gradient(circle at center, var(--w-accent-soft), transparent 65%); } html[data-theme="white"] .r-earning-hero-figure-num, html[data-theme="white"] .r-earning-stat-value, html[data-theme="white"] .r-earning-headline-score, html[data-theme="white"] .r-earning-snapshot-num { color: var(--w-ink); } html[data-theme="white"] .r-earning-hero-figure-num { font-family: var(--w-font-display); letter-spacing: -0.025em; } html[data-theme="white"] .r-earning-hero-period, html[data-theme="white"] .r-earning-hero-aux, html[data-theme="white"] .r-earning-hero-aux-meta { color: var(--w-text-2); } html[data-theme="white"] .r-earning-hero-period strong { color: var(--w-ink); } html[data-theme="white"] .r-earning-hero-yoy.up { background: var(--w-ink); background-image: none; color: #fff; box-shadow: var(--w-shadow-btn); } html[data-theme="white"] .r-earning-hero-yoy.down { background: var(--w-neg-bg); background-image: none; color: var(--w-neg); box-shadow: none; } html[data-theme="white"] .r-earning-hero-aux-pill { background: var(--w-chip-bg); color: var(--w-text-2); } html[data-theme="white"] .r-earning-hero-aux-pill.good { background: var(--w-chip-bg); color: var(--w-ink); } html[data-theme="white"] .r-earning-hero-aux-pill.bad { background: var(--w-neg-bg); color: var(--w-neg); } html[data-theme="white"] .r-earning-quality-pill.pos { background: var(--w-chip-bg); color: var(--w-ink); } html[data-theme="white"] .r-earning-quality-pill.neg { background: var(--w-neg-bg); color: var(--w-neg); } html[data-theme="white"] .r-earning-headline-score.high { color: var(--w-ink); } html[data-theme="white"] .r-earning-headline-score.low { color: var(--w-warn); } html[data-theme="white"] .r-earning-headline-score.risk { color: var(--w-neg); } html[data-theme="white"] .r-earning-headline-yoy strong.up { color: var(--w-pos); } html[data-theme="white"] .r-earning-headline-yoy strong.down { color: var(--w-neg); } html[data-theme="white"] .r-earning-headline-decision { color: var(--w-ink); } html[data-theme="white"] .r-earning-headline-rationale { color: var(--w-text-2); } html[data-theme="white"] .r-earning-snapshot-sub { color: var(--w-text-2); } /* Earnings table */ html[data-theme="white"] .r-earning-table thead th { color: var(--w-muted); background: var(--w-bg-alt); border-bottom: 1px solid var(--w-border); } html[data-theme="white"] .r-earning-table tbody td { border-bottom: 1px solid var(--w-border); color: var(--w-ink); } html[data-theme="white"] .r-earning-table tbody tr:hover { background: var(--w-bg-alt); } html[data-theme="white"] .r-earning-table tbody td strong { color: var(--w-ink); } html[data-theme="white"] .r-earning-table-locked-note { color: var(--w-text-2); } html[data-theme="white"] .r-earning-table-locked-note a { color: var(--w-ink); text-decoration-color: var(--w-accent); } html[data-theme="white"] .r-earning-narrative { background: var(--w-bg-alt); color: var(--w-text-2); } html[data-theme="white"] .r-earning-narrative .material-symbols-outlined { color: var(--w-muted); } /* Source provenance badges — official = subtle gold-tint chip, bi = grey chip */ html[data-theme="white"] .r-src-badge.official { background: var(--w-accent-soft); color: var(--w-text-2); border: 1px solid var(--w-border-strong); } html[data-theme="white"] .r-src-badge.bi { background: var(--w-chip-bg); color: var(--w-text-2); border: 1px solid var(--w-border); } html[data-theme="white"] .r-src-fx { color: var(--w-muted); } html[data-theme="white"] .r-provenance { background: var(--w-bg-alt); border: 1px solid var(--w-border); border-radius: 0; } html[data-theme="white"] .r-provenance > .material-symbols-outlined { color: var(--w-muted); } html[data-theme="white"] .r-provenance-main { color: var(--w-ink); } html[data-theme="white"] .r-provenance-main strong { color: var(--w-ink); } html[data-theme="white"] .r-provenance-sub, html[data-theme="white"] .r-bs-asof { color: var(--w-text-2); } /* Market signals tab */ html[data-theme="white"] .r-mkt-via { color: var(--w-muted); } html[data-theme="white"] .r-mkt-tile-value { color: var(--w-ink); font-family: var(--w-font-display); letter-spacing: -0.02em; } html[data-theme="white"] .r-mkt-tile-value.gold { color: var(--w-ink); } html[data-theme="white"] .r-mkt-tile-value.risk { color: var(--w-neg); } html[data-theme="white"] .r-mkt-tile-value.pos { color: var(--w-pos); } html[data-theme="white"] .r-mkt-tile-value.hot { color: var(--w-warn); } html[data-theme="white"] .r-mkt-tile-value.tech { color: var(--w-tertiary); } html[data-theme="white"] .r-mkt-tile-sub, html[data-theme="white"] .r-mkt-intro, html[data-theme="white"] .r-mkt-chart-axis { color: var(--w-text-2); } html[data-theme="white"] .r-mkt-theme:hover, html[data-theme="white"] .r-mkt-theme.open { background: var(--w-bg-alt); } html[data-theme="white"] .r-mkt-theme-name { color: var(--w-ink); } html[data-theme="white"] .r-mkt-theme-count { color: var(--w-text-2); } html[data-theme="white"] .r-mkt-bar, html[data-theme="white"] .r-mkt-split { background: var(--w-bg-alt); } html[data-theme="white"] .r-mkt-dstat-value { color: var(--w-ink); } html[data-theme="white"] .r-mkt-tagcloud .r-mkt-tagitem { background: var(--w-chip-bg); color: var(--w-text-2); } html[data-theme="white"] .r-mkt-tagitem b { color: var(--w-muted); } html[data-theme="white"] .r-mkt-banner { background: var(--w-bg-alt); border: 1px solid var(--w-border); box-shadow: none; } html[data-theme="white"] .r-mkt-banner.slim { background: var(--w-bg-alt); } html[data-theme="white"] .r-mkt-banner-icon { background: #fff; border: 1px solid var(--w-border); } html[data-theme="white"] .r-mkt-banner-icon .material-symbols-outlined { color: var(--w-ink); } html[data-theme="white"] .r-mkt-banner-title { color: var(--w-ink); } html[data-theme="white"] .r-mkt-banner-sub { color: var(--w-text-2); } html[data-theme="white"] .r-mkt-banner-cta { background: var(--w-btn); color: #fff; } html[data-theme="white"] .r-mkt-banner-cta:hover { background: var(--w-btn-hover); } html[data-theme="white"] .r-mkt-status { color: var(--w-text-2); } html[data-theme="white"] .r-mkt-status a { color: var(--w-ink); text-decoration-color: var(--w-accent); } /* company-inline hides legacy fliar topbar; keep that working */ html[data-theme="white"] body > .top_nav, html[data-theme="white"] body > .topnav, html[data-theme="white"] body > .mobile_menu { display: none !important; } /* ============================================================================ * 9. DASHBOARD PAGE — sidebar, stat cards, ri-cards, toggles, plan table * Selectors enumerated from dashboard-dark.css. * ========================================================================== */ html[data-theme="white"] #dash-main, html[data-theme="white"] aside { background: var(--w-bg); color: var(--w-ink); } html[data-theme="white"] aside.bg-\[\#1c1c19\] { background: var(--w-bg-alt) !important; color: var(--w-ink) !important; } html[data-theme="white"] .section-title, html[data-theme="white"] .sl-hd h1, html[data-theme="white"] .ri-hd h1 { color: var(--w-ink); } html[data-theme="white"] .section-sub { color: var(--w-muted); } /* Nav items */ html[data-theme="white"] .nav-item { color: var(--w-text-2); border-radius: 0; } html[data-theme="white"] .nav-item:hover { background: var(--w-bg-alt); color: var(--w-ink); } html[data-theme="white"] .nav-item.active-nav { background: var(--w-bg-alt); color: var(--w-ink); box-shadow: inset 2px 0 0 var(--w-accent); } /* Radar / Market.ai workspace toggle (ws-pill) — white pill, ink active + gold underline */ html[data-theme="white"] .ws-pill { background: transparent; color: var(--w-muted); border-bottom: 2px solid transparent; } html[data-theme="white"] .ws-pill:hover { color: var(--w-ink); } html[data-theme="white"] .ws-pill.ws-active { color: var(--w-ink); background: #fff; border-bottom-color: var(--w-accent); } /* Plan badges */ html[data-theme="white"] .plan-free { background: var(--w-chip-bg); color: var(--w-text-2); } html[data-theme="white"] .plan-pro { background: var(--w-ink); color: #fff; } html[data-theme="white"] .plan-business { background: var(--w-ink); color: #fff; } /* Stat cards — white, square */ html[data-theme="white"] .stat-card { position: relative; background: var(--w-surface); border: 1px solid var(--w-border); border-radius: 0; box-shadow: var(--w-shadow-card); color: var(--w-ink); } html[data-theme="white"] .stat-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--w-accent), transparent); opacity: 0; transition: opacity .2s ease; pointer-events: none; } html[data-theme="white"] .stat-card:hover { border-color: var(--w-border-strong); box-shadow: var(--w-shadow-card-hover); } html[data-theme="white"] .stat-card:hover::before { opacity: .85; } /* Progress bars */ html[data-theme="white"] .progress-track { background: var(--w-bg-alt); } html[data-theme="white"] #searches-progress, html[data-theme="white"] [id$="-bar"].bg-\[\#705d00\] { background: var(--w-ink) !important; } /* Skeleton / spinner */ html[data-theme="white"] .skeleton { background: linear-gradient(90deg, #ececec, #f5f5f5, #ececec); background-size: 200% 100%; } html[data-theme="white"] .spinner { border-color: var(--w-border); border-top-color: var(--w-ink); } /* Plan comparison table */ html[data-theme="white"] .plan-table th, html[data-theme="white"] .plan-table td { border-color: var(--w-border); color: var(--w-ink); } html[data-theme="white"] .plan-table th { color: var(--w-muted); background: var(--w-bg-alt); } html[data-theme="white"] .plan-check { color: var(--w-pos); } html[data-theme="white"] .plan-cross { color: var(--w-muted); } /* Upgrade CTA / ri-upsell — ink fill, white text, gold underline accent */ html[data-theme="white"] .upgrade-cta, html[data-theme="white"] .ri-upsell { position: relative; background: var(--w-ink); color: #fff; border: 1px solid var(--w-ink); border-radius: 0; } html[data-theme="white"] .upgrade-cta::before, html[data-theme="white"] .ri-upsell::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--w-accent); pointer-events: none; } html[data-theme="white"] .btn-upgrade-sm, html[data-theme="white"] .ri-upsell a.cta { background: #fff; color: var(--w-ink); border: 0; border-radius: 0; } html[data-theme="white"] .btn-upgrade-sm:hover { background: var(--w-bg-alt); } /* Recent intelligence cards (ri-card) — white, square */ html[data-theme="white"] .ri-card { background: var(--w-surface); border: 1px solid var(--w-border); border-radius: 0; box-shadow: var(--w-shadow-card); color: var(--w-ink); } html[data-theme="white"] .ri-card:hover { border-color: var(--w-border-strong); box-shadow: var(--w-shadow-card-hover); } /* Integration status dot */ html[data-theme="white"] .ri-status .dot { background: var(--w-border-strong); } html[data-theme="white"] .ri-status.connected .dot { background: var(--w-pos); } /* Shortlist header / buttons (dashboard saved-lists) */ html[data-theme="white"] .sl-hd p { color: var(--w-text-2); } html[data-theme="white"] .sl-hd .sl-count { color: var(--w-muted); } html[data-theme="white"] .sl-btn { background: #fff; color: var(--w-ink); border: 1px solid var(--w-border); border-radius: 0; } html[data-theme="white"] .sl-btn:hover { background: var(--w-bg-alt); border-color: var(--w-border-strong); } html[data-theme="white"] .sl-btn[disabled]:hover { background: #fff; } html[data-theme="white"] .sl-btn.sl-primary { background: var(--w-btn); color: #fff; border-color: var(--w-btn); } html[data-theme="white"] .sl-btn.sl-primary:hover { background: var(--w-btn-hover); } /* ============================================================================ * 10. MODALS / OVERLAYS — forgot-modal, Radar Copilot (#rcp-panel) * White panels, square, subtle shadow, ink text. * ========================================================================== */ html[data-theme="white"] #forgot-modal, html[data-theme="white"] .modal-panel, html[data-theme="white"] .auth-modal { background: #fff; color: var(--w-ink); border: 1px solid var(--w-border); border-radius: 0; box-shadow: var(--w-shadow-card); } html[data-theme="white"] #rcp-panel { background: #fff !important; color: var(--w-ink) !important; border: 1px solid var(--w-border) !important; border-radius: 0 !important; box-shadow: var(--w-shadow-card) !important; } html[data-theme="white"] #rcp-head, html[data-theme="white"] #rcp-input-wrap { background: var(--w-bg-alt) !important; color: var(--w-ink) !important; border-color: var(--w-border) !important; } html[data-theme="white"] #rcp-panel input, html[data-theme="white"] #rcp-panel textarea, html[data-theme="white"] #rcp-panel select { background: #fff !important; color: var(--w-ink) !important; border: 1px solid var(--w-border) !important; border-radius: 0 !important; } html[data-theme="white"] #rcp-panel .rcp-msg, html[data-theme="white"] #rcp-panel [class*="bubble"] { color: var(--w-text-2) !important; } /* …but NOT the user's own bubble: its background is the brand brown (#705d00), so the blanket ink color above made the user's typed text unreadable (dark-on-dark-brown). Higher specificity + later in file wins. */ html[data-theme="white"] #rcp-panel .rcp-msg.user { background: #705d00 !important; color: #fff !important; } html[data-theme="white"] #rcp-panel .rcp-msg.user a { color: #fff !important; } /* ============================================================================ * 11. TILE PRELOADER (.preloader-overlay / .tile-loader / .tile) * Light tiles on white — #ececec shimmering to a faint gold. Keep subtle. * ========================================================================== */ html[data-theme="white"] .preloader-overlay { background: rgba(255,255,255,0.85); } html[data-theme="white"] .tile { background: linear-gradient(45deg, #ececec, var(--w-accent)); animation: moveTiles-w 0.8s linear infinite; } @keyframes moveTiles-w { 0% { background: linear-gradient(45deg, #ececec, #e2e2e2); transform: scale(0.8); opacity: 0.6; } 25% { background: linear-gradient(45deg, #e2e2e2, #d8d8d8); transform: scale(1); opacity: 0.8; } 50% { background: linear-gradient(45deg, #d8d8d8, #eef0c5); transform: scale(1.2); opacity: 1; } 75% { background: linear-gradient(45deg, #eef0c5, var(--w-accent)); transform: scale(1); opacity: 0.85; } 100% { background: linear-gradient(45deg, var(--w-accent), #ececec); transform: scale(0.8); opacity: 0.6; } } html[data-theme="white"] .loading-text { color: var(--w-muted); text-shadow: none; } @media (prefers-reduced-motion: reduce) { html[data-theme="white"] .tile { animation: none; background: linear-gradient(45deg, #ececec, var(--w-accent)); } } /* ============================================================================ * 12. TAILWIND BODY-UTILITY OVERRIDES + RESIDUAL LIGHT * The base pages use Tailwind arbitrary utilities for cream surfaces/ink text. * Remap them to clean white/alt + ink. * ========================================================================== */ html[data-theme="white"] body.bg-\[\#fcf9f4\] { background: var(--w-bg) !important; } html[data-theme="white"] body.text-\[\#1c1c19\] { color: var(--w-ink) !important; } /* Cream surface utilities -> white (top-level) / alt (nested) */ html[data-theme="white"] .bg-white, html[data-theme="white"] .bg-\[\#fff\], html[data-theme="white"] .bg-\[\#ffffff\], html[data-theme="white"] .bg-\[\#fcf9f4\] { background-color: #fff !important; } html[data-theme="white"] .bg-\[\#f6f3ee\], html[data-theme="white"] .bg-\[\#faf8f4\], html[data-theme="white"] .bg-\[\#f0ede8\], html[data-theme="white"] .bg-\[\#ebe8e3\], html[data-theme="white"] .bg-\[\#e5e2dd\], html[data-theme="white"] .bg-gray-50, html[data-theme="white"] .bg-gray-100, html[data-theme="white"] .bg-neutral-50, html[data-theme="white"] .bg-neutral-100, html[data-theme="white"] .bg-slate-50, html[data-theme="white"] .bg-slate-100, html[data-theme="white"] .bg-stone-50, html[data-theme="white"] .bg-stone-100 { background-color: var(--w-bg-alt) !important; } /* Nav segment-switcher (Radar / Market.ai pill switcher in shared-nav). Track = cream bg-[#f0ede8] -> alt with a hairline border; the ACTIVE pill is a Tailwind bg-white element — on white it would vanish (white-on-white), so give it a bordered white pill + ink text + a gold underline mark. */ html[data-theme="white"] nav.fixed .bg-\[\#f0ede8\] { background-color: var(--w-bg-alt) !important; border: 1px solid var(--w-border) !important; } html[data-theme="white"] nav.fixed a.bg-white, html[data-theme="white"] nav.fixed button.bg-white, html[data-theme="white"] nav.fixed [data-tab].bg-white, html[data-theme="white"] nav.fixed .seg-active.bg-white { background-color: #fff !important; color: var(--w-ink) !important; box-shadow: inset 0 0 0 1px var(--w-border), inset 0 -2px 0 var(--w-accent) !important; } /* Brown / cream borders -> neutral border */ html[data-theme="white"] [class*="border-\[\#d0c6ab\]"], html[data-theme="white"] [class*="border-\[\#f0ede8\]"], html[data-theme="white"] [class*="border-\[\#705d00\]"] { border-color: var(--w-border) !important; } /* Brown / cream ink text utilities -> ink / secondary / muted */ html[data-theme="white"] [class*="text-\[\#1c1c19\]"] { color: var(--w-ink) !important; } html[data-theme="white"] [class*="text-\[\#1c1c19\]\/30"], html[data-theme="white"] [class*="text-\[\#1c1c19\]\/35"], html[data-theme="white"] [class*="text-\[\#1c1c19\]\/40"] { color: var(--w-muted) !important; } html[data-theme="white"] [class*="text-\[\#1c1c19\]\/50"], html[data-theme="white"] [class*="text-\[\#1c1c19\]\/60"], html[data-theme="white"] [class*="text-\[\#1c1c19\]\/70"] { color: var(--w-text-2) !important; } html[data-theme="white"] [class*="text-\[\#4d4732\]"] { color: var(--w-text-2) !important; } html[data-theme="white"] [class*="text-\[\#4d4732\]\/30"], html[data-theme="white"] [class*="text-\[\#4d4732\]\/40"], html[data-theme="white"] [class*="text-\[\#4d4732\]\/50"], html[data-theme="white"] [class*="text-\[\#4d4732\]\/55"], html[data-theme="white"] [class*="text-\[\#4d4732\]\/60"] { color: var(--w-muted) !important; } html[data-theme="white"] [class*="text-\[\#705d00\]"] { color: var(--w-ink) !important; } /* Brown CTA fill (bg-[#705d00]) -> ink fill */ html[data-theme="white"] .bg-\[\#705d00\] { background-color: var(--w-ink) !important; } html[data-theme="white"] .bg-\[\#705d00\] .material-symbols-outlined, html[data-theme="white"] .bg-\[\#705d00\] span { color: #fff !important; } html[data-theme="white"] .hover\:bg-\[\#5a4b00\]:hover, html[data-theme="white"] .hover\:bg-\[\#5a4a00\]:hover { background-color: var(--w-btn-hover) !important; } /* Soft tinted utility washes -> neutral alt */ html[data-theme="white"] .bg-blue-50, html[data-theme="white"] .bg-purple-50, html[data-theme="white"] .bg-green-50, html[data-theme="white"] .bg-\[\#ffd700\]\/15 { background-color: var(--w-bg-alt) !important; } html[data-theme="white"] .hover\:bg-\[\#fcf9f4\]:hover, html[data-theme="white"] .hover\:bg-\[\#faf8f4\]:hover { background-color: var(--w-bg-alt) !important; } /* Login page ink opacities */ html[data-theme="white"] .text-\[\#1c1c19\]\/50 { color: var(--w-muted) !important; } html[data-theme="white"] .text-\[\#1c1c19\]\/70 { color: var(--w-text-2) !important; } html[data-theme="white"] .hover\:text-\[\#1c1c19\]:hover { color: var(--w-ink) !important; } /* ============================================================================ * 13. INLINE LIGHT-HEX BACKSTOP * The pages hardcode cream/brown inline style="" values. Map cream backgrounds * to white/alt and brown text/borders to ink/grey. (#1c1c19 ≈ ink — leave.) * ========================================================================== */ /* Cream/off-white backgrounds -> white */ html[data-theme="white"] [style*="#fcf9f4"], html[data-theme="white"] [style*="#f9f6f1"], html[data-theme="white"] [style*="#f0ede8"], html[data-theme="white"] [style*="#faf8f1"], html[data-theme="white"] [style*="#f6f3ee"], html[data-theme="white"] [style*="#f4f1e7"] { background: #ffffff !important; } /* Cream / sand borders -> neutral border */ html[data-theme="white"] [style*="#ede9e0"], html[data-theme="white"] [style*="#e5e2dd"], html[data-theme="white"] [style*="#d0c6ab"], html[data-theme="white"] [style*="#efe9dc"] { border-color: var(--w-border) !important; } /* Brown ink text -> readable secondary / ink */ html[data-theme="white"] [style*="#4d4732"], html[data-theme="white"] [style*="#705d00"], html[data-theme="white"] [style*="#6b5d00"], html[data-theme="white"] [style*="#5a4b00"], html[data-theme="white"] [style*="#8a7f6a"] { color: var(--w-text-2) !important; } /* Pale-yellow inline hint/badges (#fff8d6 etc.) -> faint gold-tint chip */ html[data-theme="white"] [style*="#fff8d6"], html[data-theme="white"] [style*="#fff7cc"], html[data-theme="white"] [style*="#fff8d8"], html[data-theme="white"] [style*="#ffe98f"] { background: var(--w-accent-soft) !important; color: var(--w-ink) !important; } /* Pale status washes inline (peach / pink / blue) -> neutral alt */ html[data-theme="white"] [style*="#fff5ec"], html[data-theme="white"] [style*="#fef3f3"], html[data-theme="white"] [style*="#eaf6fc"] { background: var(--w-bg-alt) !important; color: var(--w-text-2) !important; } /* search.php sticky "Filters / RESET" sidebar header (inline cream bg) */ html[data-theme="white"] #filteration_panel_company > div[style*="sticky"], html[data-theme="white"] aside[id*="filteration"] > div[style*="sticky"] { background: #ffffff !important; color: var(--w-ink) !important; border-color: var(--w-border) !important; } /* "Filters" heading inline color:#1c1c19 — already ink; ensure ink under white */ html[data-theme="white"] #filteration_panel_company [style*="#1c1c19"], html[data-theme="white"] #filteration_panel_company [style*="#1C1C19"] { color: var(--w-ink) !important; } /* #et_active_hint entity-type active hint (inline pale-yellow #fff8d6) */ html[data-theme="white"] #et_active_hint { background: var(--w-accent-soft) !important; color: var(--w-ink) !important; border: 1px solid var(--w-border-strong) !important; } /* Legacy inline white profile tiles (single-company.js) */ html[data-theme="white"] .shadowx[style*="background:white"], html[data-theme="white"] .shadowx[style*="background: white"] { background: #fff !important; border: 1px solid var(--w-border) !important; color: var(--w-ink) !important; } /* Legacy footer / col light backgrounds */ html[data-theme="white"] .col-sm-5[style*="lightgrey"], html[data-theme="white"] .col-sm-5[style*="light grey"] { background: var(--w-bg-alt) !important; color: var(--w-ink) !important; } html[data-theme="white"] .footer_main [style*="#e5e5e5"], html[data-theme="white"] [style*="background:#e5e5e5"], html[data-theme="white"] [style*="background: #e5e5e5"] { background: var(--w-bg-alt) !important; color: var(--w-text-2) !important; } /* ============================================================================ * 14. LEGACY SEARCH-INLINE RESIDUE (search-inline.css / new_css.css) * ========================================================================== */ html[data-theme="white"] .searchbox_div { background: #fff !important; border: 1px solid var(--w-border) !important; border-radius: 0 !important; } html[data-theme="white"] .searchbox_div select, html[data-theme="white"] .searchbox_div input { color: var(--w-ink) !important; } html[data-theme="white"] .searchbox_div input::placeholder { color: var(--w-muted); } html[data-theme="white"] .filter_box { background: var(--w-chip-bg); border: 1px solid var(--w-border) !important; color: var(--w-text-2); } html[data-theme="white"] .button-cloud-white, html[data-theme="white"] .jost.hover.hiring_invoke_buttons { background: var(--w-chip-bg) !important; color: var(--w-ink) !important; border: 1px solid var(--w-border) !important; } html[data-theme="white"] .professional_heading { color: var(--w-ink); } /* Dual-range slider widget */ html[data-theme="white"] .range-slider_thumb { background-color: #fff !important; color: var(--w-ink) !important; border: 2px solid var(--w-border-strong) !important; } html[data-theme="white"] .range-slider_line { background-color: var(--w-bg-alt) !important; } html[data-theme="white"] .range-slider_line-fill { background-color: var(--w-ink) !important; } /* Toggle-switch knob */ html[data-theme="white"] .slider:before { background-color: #fff; } html[data-theme="white"] .slide_text_wrapper { border-bottom: 1px solid var(--w-border); } /* ============================================================================ * 15. SQUARE-CORNER NORMALIZATION (belt-and-suspenders) * Cards / panels / results / sidebar stay square. Pills / chips / avatars / * score-rings keep their own radii. * ========================================================================== */ html[data-theme="white"] .result_boxes_companies, html[data-theme="white"] #company_filter_search_results .result_boxes_companies, html[data-theme="white"] .d-card, html[data-theme="white"] .d-panel, html[data-theme="white"] .ps-card, html[data-theme="white"] .ps-card-compact, html[data-theme="white"] .ps-state-card, html[data-theme="white"] .ps-sl-row, html[data-theme="white"] .r-card, html[data-theme="white"] .r-intel-card, html[data-theme="white"] .r-comp-card, html[data-theme="white"] .r-earning-hero, html[data-theme="white"] .r-earning-stat-tile, html[data-theme="white"] .r-pulse-strip, html[data-theme="white"] .stat-card, html[data-theme="white"] .ri-card, html[data-theme="white"] #filteration_panel_company, html[data-theme="white"] #people_results .ps-card { border-radius: 0 !important; } /* ============================================================================ * 16. REDUCED MOTION * ========================================================================== */ @media (prefers-reduced-motion: reduce) { html[data-theme="white"] .d-pulse, html[data-theme="white"] .d-skel-line, html[data-theme="white"] .r-skel, html[data-theme="white"] .skeleton { animation: none !important; } } /* ============================================================================ * WHITE POLISH ROUND 2 (2026-06-02) — direct user feedback: * P1 filters/refine panel -> soft gray with a faint gray "paper" texture * P2 ink-on-paper typography: THICK headings + THIN display, more tracking * P3 black->grey gradient depth on the dark/ink elements * P4 results toolbar (sort / export / columns / view / page-size) polish * + kill the base-theme brown (#705d00) leaks on active states * ========================================================================== */ /* ---- P1 — Filters / refine panel: soft gray paper + faint gray dot texture ---- */ html[data-theme="white"] aside#filteration_panel_company, html[data-theme="white"] #filteration_panel_company { background-color: #f4f5f6 !important; background-image: radial-gradient(rgba(17,19,28,0.032) 1px, transparent 1.6px) !important; background-size: 18px 18px !important; border-right: 1px solid var(--w-border) !important; } /* the sticky "Filters" header sits on the gray panel — match + divider */ html[data-theme="white"] #filteration_panel_company > div[style*="sticky"] { background: #f4f5f6 !important; border-bottom: 1px solid var(--w-border) !important; } /* filter fields stay crisp WHITE so they read as inputs on the gray panel */ html[data-theme="white"] #filteration_panel_company .sb-search-input, html[data-theme="white"] #filteration_panel_company input[type="text"], html[data-theme="white"] #filteration_panel_company .sb-select { background-color: #ffffff !important; } /* ---- P2 — Ink-on-paper typography (weight contrast: thick + thin) ---- */ /* THICK: page / card / person / company headings */ html[data-theme="white"] h1, html[data-theme="white"] h2, html[data-theme="white"] .professional_heading, html[data-theme="white"] .ps-name, html[data-theme="white"] .r-hero-name, html[data-theme="white"] .d-card-title { font-weight: 800 !important; letter-spacing: -0.022em !important; color: var(--w-ink) !important; } /* THIN: large display numbers / counts read airy + elegant (ink on paper) */ html[data-theme="white"] .ht-count, html[data-theme="white"] .stat-num, html[data-theme="white"] .stat-card .num, html[data-theme="white"] .r-score-num, html[data-theme="white"] .ps-rank-num { font-weight: 300 !important; letter-spacing: -0.01em !important; color: var(--w-ink) !important; } /* AIRY body: descriptions in a calmer grey weight (the "paper" feel) */ html[data-theme="white"] .jost, html[data-theme="white"] .ps-bio, html[data-theme="white"] .r-card p, html[data-theme="white"] .d-card p { font-weight: 400 !important; color: var(--w-text-2) !important; } /* ---- P3 — black->grey gradient depth on the dark/ink elements ---- */ html[data-theme="white"] .sb-apply-btn, html[data-theme="white"] .radar-cta-primary, html[data-theme="white"] .d-btn, html[data-theme="white"] .d-btn-pill, html[data-theme="white"] .btn-primary, html[data-theme="white"] .bottom_nav .btn-primary, html[data-theme="white"] nav.fixed a#nav-get-pro, html[data-theme="white"] .ri-upsell a.cta { background-image: linear-gradient(180deg, #262a34 0%, #11131c 100%) !important; background-color: #11131c !important; color: #ffffff !important; } html[data-theme="white"] .sb-apply-btn:hover, html[data-theme="white"] .radar-cta-primary:hover, html[data-theme="white"] .d-btn:hover, html[data-theme="white"] .btn-primary:hover, html[data-theme="white"] .bottom_nav .btn-primary:hover, html[data-theme="white"] nav.fixed a#nav-get-pro:hover, html[data-theme="white"] .ri-upsell a.cta:hover { background-image: linear-gradient(180deg, #323743 0%, #1b1e29 100%) !important; } /* ---- P4 — Results toolbar: sort / export / columns / view / page-size ---- */ /* view-mode segmented control (was leaking brand brown #705d00) */ html[data-theme="white"] .view-mode-btn { background: transparent !important; color: var(--w-muted) !important; border-color: var(--w-border) !important; } html[data-theme="white"] .view-mode-btn:hover { color: var(--w-ink) !important; background: var(--w-bg-alt) !important; } html[data-theme="white"] .view-mode-btn.view-mode-active { background-image: linear-gradient(180deg, #262a34 0%, #11131c 100%) !important; background-color: #11131c !important; color: #ffffff !important; border-color: #11131c !important; } /* icons inside the toggles follow the button color (grey idle, white when active) */ html[data-theme="white"] .view-mode-btn .material-symbols-outlined, html[data-theme="white"] .view-mode-btn span { color: inherit !important; } html[data-theme="white"] .view-mode-btn.view-mode-active .material-symbols-outlined, html[data-theme="white"] .view-mode-btn.view-mode-active span { color: #ffffff !important; } /* page-size buttons (10 / 20 / 40 / 100) — active was brown */ html[data-theme="white"] .rpp-btn { color: var(--w-muted) !important; } html[data-theme="white"] .rpp-btn:hover { color: var(--w-ink) !important; } html[data-theme="white"] .rpp-btn.active { background-image: linear-gradient(180deg, #262a34 0%, #11131c 100%) !important; background-color: #11131c !important; color: #ffffff !important; } /* mode + sort selects — ink text, never brown */ html[data-theme="white"] .nss-mode-select, html[data-theme="white"] .nss-mode-select option, html[data-theme="white"] .results-toolbar select, html[data-theme="white"] #results_chrome select { color: var(--w-ink) !important; } /* Columns / Export action buttons (Tailwind bg-[#f0ede8]) — grey border not black */ html[data-theme="white"] .bg-\[\#f0ede8\] { border-color: var(--w-border) !important; color: var(--w-ink) !important; } html[data-theme="white"] .bg-\[\#f0ede8\]:hover { background-color: #ececee !important; border-color: var(--w-border-strong) !important; } /* ============================================================================ * WHITE POLISH ROUND 3 (2026-06-02) — user feedback: * - dropdowns (entity/sort/mode) look like the filter boxes * - filter boxes bigger, dark hairline border, larger text; dark dropdown text * - kill the remaining yellowish (hint box etc.) -> grey/ink * - toolbar buttons all same height/order/text size; modernize Columns/Export * - FLAT everywhere (remove all rounded corners on boxes/buttons/chips/menus) * ========================================================================== */ :root { --w-field-border: #c4c7cc; /* the "dark hairline" for fields/buttons */ --w-field-h: 42px; /* filter field height */ --w-tool-h: 34px; /* toolbar control height */ } /* ---- Unified FIELD look: filter boxes + every select share one box ---- */ html[data-theme="white"] .sb-search-wrap, html[data-theme="white"] .sb-select, html[data-theme="white"] #entity-type-select, html[data-theme="white"] #sort-select, html[data-theme="white"] .nss-mode-select { background-color: #ffffff !important; border: 1px solid var(--w-field-border) !important; border-radius: 0 !important; color: var(--w-ink) !important; } html[data-theme="white"] .sb-search-wrap { min-height: var(--w-field-h) !important; display: flex !important; align-items: center !important; overflow: visible !important; } /* bigger, darker text in the filter inputs (was 12px tiny) */ html[data-theme="white"] .sb-search-input { font-size: 13.5px !important; color: var(--w-ink) !important; font-weight: 500 !important; padding-top: 12px !important; padding-bottom: 12px !important; } html[data-theme="white"] .sb-search-input::placeholder { color: var(--w-muted) !important; } html[data-theme="white"] .sb-search-icon { color: var(--w-muted) !important; } /* selects: same box, bigger text, INK chevron, flat */ html[data-theme="white"] .sb-select, html[data-theme="white"] #entity-type-select { min-height: var(--w-field-h) !important; padding: 11px 34px 11px 14px !important; font-size: 13.5px !important; font-weight: 500 !important; background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 12px !important; appearance: none !important; -webkit-appearance: none !important; } /* focus = dark border + subtle grey ring (no gold) */ html[data-theme="white"] .sb-search-wrap:focus-within, html[data-theme="white"] .sb-select:focus, html[data-theme="white"] #entity-type-select:focus, html[data-theme="white"] #sort-select:focus { border-color: var(--w-ink) !important; box-shadow: 0 0 0 2px var(--w-accent-ring) !important; } /* ---- Autocomplete dropdown: dark text, dark hairline, flat ---- */ html[data-theme="white"] .sb-results-drop { background: #ffffff !important; border: 1px solid var(--w-field-border) !important; border-radius: 0 !important; font-size: 13px !important; color: var(--w-ink) !important; } html[data-theme="white"] .sb-results-drop .btn, html[data-theme="white"] .sb-results-drop > button, html[data-theme="white"] .sb-results-drop > a, html[data-theme="white"] .sb-results-drop > div { color: var(--w-ink) !important; font-size: 13px !important; } html[data-theme="white"] .sb-results-drop .btn:hover, html[data-theme="white"] .sb-results-drop > button:hover, html[data-theme="white"] .sb-results-drop > a:hover, html[data-theme="white"] .sb-results-drop > div:hover { background: var(--w-bg-alt) !important; } /* ---- Kill remaining yellowish: entity-type "active" hint -> grey, bigger ---- */ html[data-theme="white"] #et_active_hint { background: var(--w-bg-alt) !important; color: var(--w-text-2) !important; border: 1px solid var(--w-border) !important; border-radius: 0 !important; font-size: 12.5px !important; } /* ---- Toolbar: ONE height, ONE text size, flat, modernized ---- */ html[data-theme="white"] .view-mode-btn, html[data-theme="white"] .rpp-btn, html[data-theme="white"] #cols-menu-btn, html[data-theme="white"] #export-btn, html[data-theme="white"] #sort-select { height: var(--w-tool-h) !important; min-height: var(--w-tool-h) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 12px !important; font-weight: 600 !important; border-radius: 0 !important; box-sizing: border-box !important; line-height: 1 !important; } html[data-theme="white"] #sort-select { padding: 0 32px 0 12px !important; min-height: var(--w-tool-h) !important; } html[data-theme="white"] .view-mode-btn, html[data-theme="white"] .rpp-btn { padding: 0 11px !important; } html[data-theme="white"] #cols-menu-btn, html[data-theme="white"] #export-btn { padding: 0 14px !important; gap: 6px !important; } /* Columns + Export: white box, dark hairline, ink text (modernized, not raw HTML) */ html[data-theme="white"] #cols-menu-btn, html[data-theme="white"] #export-btn { background: #ffffff !important; border: 1px solid var(--w-field-border) !important; color: var(--w-ink) !important; } html[data-theme="white"] #cols-menu-btn:hover, html[data-theme="white"] #export-btn:hover { background: var(--w-bg-alt) !important; border-color: var(--w-border-strong) !important; } /* segmented groups (view + page-size): share a clean outer hairline, flat */ html[data-theme="white"] .view-mode-btn { border: 1px solid var(--w-field-border) !important; border-right: none !important; } html[data-theme="white"] .view-mode-btn:last-child { border-right: 1px solid var(--w-field-border) !important; } html[data-theme="white"] .rpp-btn { border: 1px solid var(--w-field-border) !important; border-right: none !important; } html[data-theme="white"] .rpp-btn:last-child { border-right: 1px solid var(--w-field-border) !important; } /* ---- FLAT EVERYWHERE: square every box/button/chip/menu/modal (avatars stay round) ---- */ html[data-theme="white"] .sb-pill, html[data-theme="white"] .sb-near-btn, html[data-theme="white"] .sb-apply-btn, html[data-theme="white"] .sb-added-chips .btn, html[data-theme="white"] .insight-chip, html[data-theme="white"] .stage-pill, html[data-theme="white"] .refine-chip, html[data-theme="white"] .smart-chip, html[data-theme="white"] .ps-chip, html[data-theme="white"] .ps-skill, html[data-theme="white"] .r-pill, html[data-theme="white"] .r-chip, html[data-theme="white"] .radar-cta, html[data-theme="white"] .bottom_nav .btn, html[data-theme="white"] .cols-menu-head, html[data-theme="white"] #cols-menu-panel, html[data-theme="white"] .radar-export-modal, html[data-theme="white"] .radar-export-card, html[data-theme="white"] #forgot-modal > div, html[data-theme="white"] #rcp-panel, html[data-theme="white"] .ht-mom, html[data-theme="white"] [class*="rounded-md"], html[data-theme="white"] [class*="rounded-lg"], html[data-theme="white"] [class*="rounded-xl"], html[data-theme="white"] [class*="rounded-2xl"], html[data-theme="white"] .rounded { border-radius: 0 !important; } /* ---- Export modal + checkboxes: monochrome (no blue, no brown), flat ---- */ html[data-theme="white"] input[type="checkbox"], html[data-theme="white"] input[type="radio"] { accent-color: var(--w-ink) !important; } html[data-theme="white"] .radar-export-card, html[data-theme="white"] [id^="export-modal"], html[data-theme="white"] .radar-export-modal { background: #ffffff !important; color: var(--w-ink) !important; border-radius: 0 !important; } /* any inline brand-brown inside the modal -> ink */ html[data-theme="white"] .radar-export-card [style*="#705d00"], html[data-theme="white"] .radar-export-card [style*="705d00"], html[data-theme="white"] [id^="export-modal"] [style*="705d00"] { color: var(--w-ink) !important; } /* confirm = ink fill, cancel = outline, both flat */ html[data-theme="white"] .radar-export-confirm, html[data-theme="white"] #export-modal-go { background-image: linear-gradient(180deg, #262a34 0%, #11131c 100%) !important; background-color: #11131c !important; color: #fff !important; border: 0 !important; border-radius: 0 !important; } html[data-theme="white"] .radar-export-cancel { background: #ffffff !important; color: var(--w-ink) !important; border: 1px solid var(--w-field-border) !important; border-radius: 0 !important; } /* full modal re-skin (its class CSS is cream/brown/yellow by default) */ html[data-theme="white"] .radar-export-overlay { background: rgba(16,19,28,0.45) !important; } html[data-theme="white"] .radar-export-modal { background: #ffffff !important; border: 1px solid var(--w-field-border) !important; border-radius: 0 !important; box-shadow: 0 18px 60px rgba(16,19,28,0.18) !important; } html[data-theme="white"] .radar-export-head { border-bottom: 1px solid var(--w-border) !important; } html[data-theme="white"] .radar-export-head h3 { color: var(--w-ink) !important; } html[data-theme="white"] .radar-export-head .close-x { color: var(--w-muted) !important; } html[data-theme="white"] .radar-export-section h4 { color: var(--w-muted) !important; } html[data-theme="white"] .radar-export-colgrid, html[data-theme="white"] .radar-export-colgrid label, html[data-theme="white"] .radar-export-contact-row { color: var(--w-ink) !important; } html[data-theme="white"] .radar-export-radios label { border: 1px solid var(--w-field-border) !important; border-radius: 0 !important; background: #ffffff !important; color: var(--w-text-2) !important; } html[data-theme="white"] .radar-export-radios label.active { background: var(--w-ink) !important; border-color: var(--w-ink) !important; color: #ffffff !important; } html[data-theme="white"] .radar-export-contact-row { border: 1px solid var(--w-field-border) !important; border-radius: 0 !important; background: #ffffff !important; } html[data-theme="white"] .radar-export-cost { background: var(--w-bg-alt) !important; border: 1px solid var(--w-border) !important; border-radius: 0 !important; color: var(--w-ink) !important; } html[data-theme="white"] .radar-export-cost.insufficient { background: #fbeaea !important; border-color: #e3b4b4 !important; color: #7a1a1a !important; } html[data-theme="white"] .radar-export-foot { border-top: 1px solid var(--w-border) !important; background: var(--w-bg-alt) !important; border-radius: 0 !important; } html[data-theme="white"] .radar-export-foot button { border-radius: 0 !important; } /* ============================================================================ * WHITE POLISH ROUND 4 (2026-06-02) — user feedback (again): * - the "Refine results" facet strip (#refine-strip-wrap, shown between the * toolbar and the cards when a search has facets) was STILL the old cream/ * brown design — restyle to the new white/ink/grey look, flat. * - results still look rounded because the LOGO image + inner bits are rounded * even though the card is square — square them too (truly flat results). * ========================================================================== */ /* ---- Refine-results facet strip — new design (gray panel, ink, flat) ---- */ html[data-theme="white"] #refine-strip-wrap { background: var(--w-bg-alt) !important; border: 1px solid var(--w-field-border) !important; border-radius: 0 !important; box-shadow: none !important; } html[data-theme="white"] #refine-strip-wrap:not(.refine-collapsed) .refine-strip-header { border-bottom-color: var(--w-border) !important; } html[data-theme="white"] .refine-strip-header:hover { background: rgba(17,19,28,0.03) !important; } html[data-theme="white"] .refine-strip-title { color: var(--w-ink) !important; font-size: 13px !important; } html[data-theme="white"] .refine-strip-title-applied { color: var(--w-muted) !important; } html[data-theme="white"] .refine-strip-toggle { color: var(--w-ink) !important; border-radius: 0 !important; } html[data-theme="white"] .refine-strip-header:hover .refine-strip-toggle { background: rgba(17,19,28,0.06) !important; } html[data-theme="white"] .refine-strip-label { color: var(--w-muted) !important; font-size: 10.5px !important; } html[data-theme="white"] .refine-strip-chips::-webkit-scrollbar-thumb { background: var(--w-border-strong) !important; } html[data-theme="white"] .refine-chip { background: #ffffff !important; border: 1px solid var(--w-field-border) !important; color: var(--w-ink) !important; border-radius: 0 !important; font-size: 12px !important; } html[data-theme="white"] .refine-chip:hover { background: var(--w-bg-alt) !important; border-color: var(--w-border-strong) !important; color: var(--w-ink) !important; box-shadow: none !important; transform: none !important; } html[data-theme="white"] .refine-chip-active { background: var(--w-ink) !important; border-color: var(--w-ink) !important; color: #ffffff !important; } html[data-theme="white"] .refine-chip-active:hover { background: #2b2f36 !important; border-color: #2b2f36 !important; } /* ---- Results truly flat: square the card (bulletproof, id-scoped) + the logo + inner bits ---- */ html[data-theme="white"] #company_filter_search_results .result_boxes_companies, html[data-theme="white"] #company_filter_search_results.grid-view .result_boxes_companies, html[data-theme="white"] #company_filter_search_results.list-view .result_boxes_companies, html[data-theme="white"] #company_filter_search_results.table-view .result_boxes_companies, /* logo + inner bits — id-scoped so they beat the table/grid id rules (e.g. the 8px logo at search.php:1146) */ html[data-theme="white"] #company_filter_search_results .result_boxes_companies .gradient_border, html[data-theme="white"] #company_filter_search_results .result_boxes_companies img.gradient_border, html[data-theme="white"] #company_filter_search_results.table-view .radar-card-header img.gradient_border, html[data-theme="white"] #company_filter_search_results .result_boxes_companies .radar-card-header img, html[data-theme="white"] #company_filter_search_results .result_boxes_companies img, html[data-theme="white"] #company_filter_search_results .result_boxes_companies .radar-card-bulksel, html[data-theme="white"] #company_filter_search_results .result_boxes_companies .jost.hover { border-radius: 0 !important; }