/* iViu 3.0 — LIGHT theme overrides — PARTNER-ALIGNED Activated by `data-theme="light"` on . Loaded after site.css. Color palette mirrors the partner portal (partner-dev.iviuinsights.com): surface #f8fafc · card #ffffff · brand-blue #2189D0 · accent-orange #F57F20 When the attribute is absent, this file has no effect (dark default). */ [data-theme="light"]{ /* ── Surfaces: softly tinted page, off-white cards, clear elevation steps ── */ --bg: #e8eef8; /* page base — richer blue-grey, less stark */ --bg-1: #f0f5fc; /* card / elevated panels — off-white with blue tint */ --bg-2: #d8e4f2; /* hover state / secondary areas — clearly colored */ --bg-3: #c6d5e9; /* inset / chip backgrounds — deeper cool blue */ /* ── Borders: light, crisp — matches partner input-border approach ── */ --line: rgba(15, 23, 42, 0.07); --line-strong: rgba(15, 23, 42, 0.15); /* ── Typography: Slate scale — matches partner --ink / --ink-muted ── */ --ink: #0f172a; /* Slate-900 — primary text */ --ink-2: #1e293b; /* Slate-800 — body / lead text (was #3c4456, too light) */ --ink-3: #475569; /* Slate-600 — muted text (was #67708a, too light) */ --ink-4: #94a3b8; /* Slate-400 — very muted / timestamps */ /* ── Brand: partner brand-blue + iViu orange accent ── */ --blue: #2189D0; /* partner --brand (was #1d4ed8, unrelated blue) */ --blue-2: #1a72b8; /* partner --brand-dark */ --cyan: #F57F20; /* iViu orange — matches partner --accent #F07F21 */ --cyan-2: #c2410c; /* deep orange hover */ --signal: #F57F20; --alert: #b45309; --hot: #b91c1c; --ok: #047857; } /* ── Body ────────────────────────────────────────────────────────────── */ html[data-theme="light"], html[data-theme="light"] body{ /* Richer radial — stronger blue wash at top, warm grey base */ background: radial-gradient(1200px 600px at 15% 0%, #bdd6f7 0%, #e8eef8 52%, #e4eaf5 100%); color: var(--ink); } /* Once any scroll section covers the hero, fall back to flat surface */ html[data-theme="light"] body.scrolled{ background: var(--bg) } html[data-theme="light"] ::selection{ background: var(--cyan); color:#fff } /* ── Header — frosted near-white, clean border ───────────────────────── */ [data-theme="light"] .hdr{ background: rgba(248,250,252,0.88); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid var(--line-strong); } [data-theme="light"] .brand-word{ color: var(--ink) } [data-theme="light"] .nav a{ color: var(--ink-3) } [data-theme="light"] .nav a:hover{ color: var(--ink); background: var(--bg-2) } [data-theme="light"] .nav a.active{ color: var(--cyan) } [data-theme="light"] .hdr .brand-mark::after{ border-color:#F57F20; opacity: 0.45 } [data-theme="light"] .banner{ color: var(--ink-3); border-bottom-color: var(--line) } [data-theme="light"] .banner-msg{ color: var(--ink-3) } /* ── Dropdown nav — light mode ───────────────────────────────────────── */ [data-theme="light"] .nav-trigger{ color: var(--ink-3); } [data-theme="light"] .nav-trigger:hover, [data-theme="light"] .nav-group.open .nav-trigger{ color: var(--ink); background: var(--bg-2); } [data-theme="light"] .nav-trigger.active{ color: var(--cyan) } [data-theme="light"] .nav-direct{ color: var(--ink-3); border-left-color: var(--line-strong); } [data-theme="light"] .nav-direct:hover{ color: var(--ink); background: var(--bg-2) } [data-theme="light"] .nav-drop{ background: rgba(248,250,252,0.98); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border: 1px solid var(--line-strong); box-shadow: 0 8px 32px rgba(15,23,42,0.12); } [data-theme="light"] .nav-drop a{ color: var(--ink-3); } [data-theme="light"] .nav-drop a:hover{ color: var(--ink); background: var(--bg-2); } [data-theme="light"] .nav-drop a.active{ color: var(--cyan) } [data-theme="light"] .nav-drop-divider{ background: var(--line-strong) } /* ── CTAs ────────────────────────────────────────────────────────────── */ [data-theme="light"] .btn.primary{ background: var(--cyan); color:#ffffff; } [data-theme="light"] .btn.primary:hover{ background: var(--cyan-2); box-shadow: 0 6px 24px rgba(245,127,32,0.28); } [data-theme="light"] .btn.ghost{ border-color: var(--line-strong); color: var(--ink); } [data-theme="light"] .btn.ghost:hover{ border-color: var(--cyan); color: var(--cyan); } [data-theme="light"] .btn.solid{ background:#ffffff; border-color: var(--line-strong); color: var(--ink); box-shadow: 0 1px 3px rgba(15,23,42,0.08); } [data-theme="light"] .btn.solid:hover{ background: var(--bg-2); border-color: var(--cyan); } /* ── Background grid ─────────────────────────────────────────────────── */ [data-theme="light"] .grid-bg{ background-image: linear-gradient(rgba(15,23,42,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,0.04) 1px, transparent 1px); opacity: 1; } /* ── Hero scan grid + scan line ──────────────────────────────────────── */ [data-theme="light"] .hero .scan-grid{ background-image: linear-gradient(rgba(245,127,32,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(245,127,32,0.06) 1px, transparent 1px); } [data-theme="light"] .hero .scan-line{ background: linear-gradient(90deg, transparent, var(--cyan) 50%, transparent); opacity: 0.45; } /* ── Viz panels — white card with brand-blue radial + orange frame ───── */ [data-theme="light"] .viz-panel, [data-theme="light"] .idtag-viz{ background: radial-gradient(ellipse at center, rgba(33,137,208,0.10), transparent 62%), linear-gradient(180deg, var(--bg-1), #e8eef8); border-color: rgba(245,127,32,0.5); border-width: 1px; box-shadow: 0 0 0 1px rgba(245,127,32,0.14), 0 0 18px rgba(245,127,32,0.08), 0 1px 0 rgba(255,255,255,0.9) inset, 0 8px 28px rgba(15,23,42,0.07); } [data-theme="light"] .perimeter-viz{ background: linear-gradient(180deg, var(--bg-1), #e8eef8); border-color: rgba(245,127,32,0.5); border-width: 1px; box-shadow: 0 0 0 1px rgba(245,127,32,0.14), 0 0 18px rgba(245,127,32,0.08), 0 1px 0 rgba(255,255,255,0.9) inset, 0 8px 28px rgba(15,23,42,0.07); } /* ── Grids — cells sit slightly below page, lift to white on hover ───── */ [data-theme="light"] .pillar{ background: var(--bg-2) } [data-theme="light"] .pillar:hover{ background: var(--bg-1); box-shadow: 0 4px 16px rgba(15,23,42,0.09) } [data-theme="light"] .chip{ background: var(--bg-2) } [data-theme="light"] .chip:hover{ background: var(--bg-1) } [data-theme="light"] .panel{ background: var(--bg-1) } [data-theme="light"] .dash > div{ background: var(--bg-1) } [data-theme="light"] .step{ background: var(--bg-1); box-shadow: 0 1px 4px rgba(15,23,42,0.06); } [data-theme="light"] .stat-strip{ background: var(--bg-1) } [data-theme="light"] .spec-grid{ background: var(--bg-1) } [data-theme="light"] .heatmap, [data-theme="light"] .heatmap-grid{ background: var(--bg-1) } [data-theme="light"] .arch-card{ background: var(--bg-1) } [data-theme="light"] .arch-card-hd{ background: var(--bg-2) } /* ── Arch-num badge (dark-glass in dark mode) ── bright in light mode ── */ [data-theme="light"] .arch-num{ background: rgba(255,255,255,0.92); border-color: rgba(245,127,32,0.45); color: var(--cyan); } /* ── Industry chips with images — reduce dark overlay weight ─────────── */ [data-theme="light"] .chips.with-images .chip-img::after{ background: linear-gradient(180deg, transparent 55%, rgba(15,23,42,0.22) 100%); } [data-theme="light"] .chips.with-images .chip-img img{ filter: saturate(0.95) brightness(0.97); } /* ── Status dots ─────────────────────────────────────────────────────── */ [data-theme="light"] .eyebrow::before{ box-shadow: 0 0 5px var(--cyan) } [data-theme="light"] .live::before, [data-theme="light"] .banner .dot, [data-theme="light"] .stat .d{ box-shadow: 0 0 4px var(--ok) } /* ── Form fields — matches partner input-bg / input-border ──────────── */ [data-theme="light"] .field input, [data-theme="light"] .field textarea, [data-theme="light"] .field select{ background: var(--bg-1); border-color: rgba(15,23,42,0.18); color: var(--ink); } [data-theme="light"] .field input:focus, [data-theme="light"] .field textarea:focus{ border-color: var(--cyan); background: var(--bg-1); box-shadow: 0 0 0 3px rgba(245,127,32,0.12); } [data-theme="light"] .check{ background: var(--bg-1) } [data-theme="light"] .check:hover{ border-color: var(--line-strong); background: var(--bg-2) } [data-theme="light"] .check.on{ background: rgba(245,127,32,0.07); color: var(--cyan) } [data-theme="light"] .check.on .box::after{ border-color:#ffffff } /* ── Tags ────────────────────────────────────────────────────────────── */ [data-theme="light"] .tag{ background: var(--bg-1); border-color: var(--line-strong); color: var(--ink-3); } [data-theme="light"] .tag.cyan{ background: rgba(245,127,32,0.07); border-color: rgba(245,127,32,0.35); color: var(--cyan); } /* ── Marquee / tech strip ────────────────────────────────────────────── */ [data-theme="light"] .marquee{ background: var(--bg-2); border-top-color: var(--line-strong); border-bottom-color: var(--line-strong); } /* ── DDPR rule line ──────────────────────────────────────────────────── */ [data-theme="light"] .ddpr-rule{ background: linear-gradient(90deg, rgba(245,127,32,0.3), transparent); } /* ── Detection feed state colours ───────────────────────────────────── */ [data-theme="light"] .df-tracking{ color: var(--cyan) !important } [data-theme="light"] .df-alert { color: #b45309 !important } [data-theme="light"] .df-lost { color: var(--ink-4) !important } /* ── Footer ──────────────────────────────────────────────────────────── */ [data-theme="light"] .ftr{ border-top-color: var(--line-strong); background: var(--bg-2); } /* ── Tweaks trigger — light glass ────────────────────────────────────── */ [data-theme="light"] button[title="Open Tweaks panel"]{ background: rgba(255,255,255,0.92) !important; border-color: rgba(245,127,32,0.45) !important; color: var(--cyan) !important; box-shadow: 0 4px 18px rgba(15,23,42,0.10) !important; } /* ── Theme toggle button (sits in header) ────────────────────────────── */ .theme-toggle{ width: 34px; height: 34px; display: inline-grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 2px; background: transparent; color: var(--ink-2); cursor: pointer; transition: all 0.15s; flex-shrink: 0; } .theme-toggle:hover{ border-color: var(--cyan); color: var(--cyan); } .theme-toggle svg{ width: 16px; height: 16px; display: block } /* Show sun in light mode, moon in dark — hide the other */ .theme-toggle .sun{ display: none } .theme-toggle .moon{ display: block } [data-theme="light"] .theme-toggle .sun{ display: block } [data-theme="light"] .theme-toggle .moon{ display: none } /* ── Chip icon images: invert(1) is for dark mode; restore in light ─── */ [data-theme="light"] .chip > img{ filter: none !important; opacity: 0.75 !important; } /* ── Smooth color transition when toggling ───────────────────────────── */ html, body, .hdr, .panel, .pillar, .chip, .step, .panel-hd, .stat-strip, .spec-grid, .heatmap, .heatmap-grid, .marquee, .viz-panel, .idtag-viz, .perimeter-viz, .field input, .field textarea, .field select, .check, .tag, .dash > div, .btn, .arch-card, .ftr{ transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }