/* SellerLens by TVD — Main stylesheet */ /* Self-hosted fonts (latin) — replaces render-blocking Google Fonts */ @font-face{font-family:'Fraunces';font-style:italic;font-weight:500;font-display:optional;src:url('/assets/fonts/fraunces-500-italic.woff2') format('woff2')} @font-face{font-family:'Fraunces';font-style:normal;font-weight:900;font-display:optional;src:url('/assets/fonts/fraunces-900.woff2') format('woff2')} @font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:optional;src:url('/assets/fonts/geist-400.woff2') format('woff2')} @font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:optional;src:url('/assets/fonts/geist-500.woff2') format('woff2')} @font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:optional;src:url('/assets/fonts/geist-600.woff2') format('woff2')} @font-face{font-family:'Geist';font-style:normal;font-weight:700;font-display:optional;src:url('/assets/fonts/geist-700.woff2') format('woff2')} @font-face{font-family:'Geist';font-style:normal;font-weight:800;font-display:optional;src:url('/assets/fonts/geist-800.woff2') format('woff2')} @font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:optional;src:url('/assets/fonts/geist-mono-400.woff2') format('woff2')} @font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:optional;src:url('/assets/fonts/geist-mono-500.woff2') format('woff2')} @font-face{font-family:'Geist Mono';font-style:normal;font-weight:600;font-display:optional;src:url('/assets/fonts/geist-mono-600.woff2') format('woff2')} :root { --bg: #0d0e11; --bg-2: #14161b; --panel: #1a1d24; --panel-2: #20242d; --line: #2a2f3a; --line-2: #353b48; --ink: #f4f3ee; --ink-2: #b8b6ae; --muted: #7d7d75; --accent: #ffb627; --accent-2: #f25c54; --good: #5dd39e; --bad: #f25c54; --warn: #ffb627; --info: #7aa2f7; --pending: #c4a5ff; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --r-card:14px; --r-ctrl:9px; } /* Light theme — applied via class on . Cool, clean neutrals aligned with the marketing site (white cards on a soft blue-gray canvas) — replaces the old muddy beige/khaki palette. */ html.light { --bg: #f4f6f9; --bg-2: #e9edf3; --panel: #ffffff; --panel-2: #f4f6f9; --line: #e4e8ef; --line-2: #cfd6e0; --ink: #14171f; --ink-2: #454c59; --muted: #7d8494; --accent: #c98a00; --accent-2: #d94040; --good: #157a45; --bad: #c93838; --warn: #b97b00; --info: #2458c5; --pending: #6d3fc0; } /* Light mode: give cards real elevation so the UI reads as a product, not a table dump */ html.light .panel, html.light .kpi, html.light .status-card, html.light .chart-wrap { box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 16px rgba(16, 24, 40, .05); } html.light .subtab.active { box-shadow: 0 1px 3px rgba(16, 24, 40, .12); } /* Smooth theme transition — only on color properties, not layout */ *, *::before, *::after { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } /* But don't animate things that would feel laggy */ input, select, button, canvas, .chart-wrap, .bar-mini span { transition: none; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--bg); color: var(--ink); font-family: 'Geist', system-ui, sans-serif; -webkit-font-smoothing: antialiased; letter-spacing: -0.005em; } body { background: radial-gradient(1200px 600px at 110% -10%, rgba(255,182,39,.06), transparent 60%), radial-gradient(900px 500px at -10% 20%, rgba(242,92,84,.05), transparent 60%), var(--bg); min-height: 100vh; padding: 24px 36px 60px; } html.light body { background: radial-gradient(1200px 600px at 110% -10%, rgba(201,138,0,.05), transparent 60%), radial-gradient(900px 500px at -10% 20%, rgba(36,88,197,.03), transparent 60%), var(--bg); } .display { font-family: 'Fraunces', serif; font-weight: 900; letter-spacing: -0.02em; } .mono { font-family: 'Geist Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; } /* Header */ header { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 20px; flex-wrap: wrap; gap: 16px; } .brand { display: flex; align-items: center; gap: 14px; } .logo { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; font-family: 'Fraunces', serif; font-weight: 900; color: #1a1a1a; font-size: 16px; letter-spacing: -0.5px; box-shadow: 0 6px 20px rgba(255,182,39,.25); } h1.display, .brand-title { font-size: 28px; line-height: 1; } h1.display em, .brand-title em { font-style: italic; color: var(--accent); font-weight: 500; } .sub { color: var(--ink-2); font-size: 12px; margin-top: 4px; } /* Date range + ingest controls */ .global-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .date-range { display: flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; } .date-range label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; } .date-range input { background: transparent; border: none; color: var(--ink); font-size: 12px; font-family: 'Geist Mono'; padding: 4px 6px; width: 110px; } .date-range input::-webkit-calendar-picker-indicator { filter: invert(0.7); } .date-presets { display: flex; gap: 4px; } .preset-btn { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font-size: 11px; color: var(--ink-2); cursor: pointer; font-family: inherit; transition: all .15s; } .preset-btn:hover { border-color: var(--accent); color: var(--accent); } .preset-btn.active { background: rgba(255,182,39,.10); border-color: var(--accent); color: var(--accent); } .ingest-btn { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; color: var(--ink); font-size: 12px; cursor: pointer; font-weight: 500; transition: all .15s; display: flex; align-items: center; gap: 6px; } .ingest-btn:hover { border-color: var(--accent); color: var(--accent); } /* Tabs */ .tabs { display: flex; gap: 2px; margin-bottom: 22px; border-bottom: 1px solid var(--line); overflow-x: auto; } .tab { padding: 12px 16px; font-size: 12px; font-weight: 500; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; transition: all .2s ease; white-space: nowrap; letter-spacing: 0.02em; background: none; border-top: none; border-left: none; border-right: none; font-family: inherit; } .tab:hover { color: var(--ink-2); } .tab.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; } .tab .count { margin-left: 6px; font-size: 10px; padding: 2px 6px; border-radius: 999px; background: var(--panel); color: var(--muted); font-family: 'Geist Mono'; font-weight: 600; } .tab.active .count { background: rgba(255,182,39,.15); color: var(--accent); } .tab-content { display: none; } .tab-content.active { display: block; animation: fadein .2s ease; } /* Sub-tab navigation — used inside merged top-level tabs */ .subtab-nav { display: inline-flex; gap: 2px; margin-bottom: 20px; padding: 3px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; flex-wrap: wrap; } .subtab { background: transparent; border: none; border-radius: 7px; color: var(--ink-2); padding: 7px 13px; font-size: 12px; font-family: inherit; cursor: pointer; letter-spacing: 0; text-transform: none; transition: all 0.15s; } .subtab:hover { color: var(--ink); } .subtab.active { color: var(--ink); background: var(--panel); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.2); } .subtab-content { display: none; } .subtab-content.active { display: block; animation: fadein .15s ease; } @keyframes fadein { from { opacity: 0; transform: translateY(3px);} to {opacity:1;transform:none;} } /* Section heads */ .section-title { display: flex; align-items: baseline; gap: 12px; margin: 24px 0 14px; padding-bottom: 0; flex-wrap: wrap; } .section-title h2 { font-family: 'Geist', sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; } .section-title h2 em { color: var(--ink); font-style: normal; font-weight: 700; } .section-title .hint { color: var(--muted); font-size: 11px; } /* KPIs */ .kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; } .kpi-row.cols-3 { grid-template-columns: repeat(3, 1fr); } .kpi-row.cols-5 { grid-template-columns: repeat(5, 1fr); } .kpi-row.cols-6 { grid-template-columns: repeat(6, 1fr); } .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 16px 16px 18px; position: relative; overflow: hidden; transition: border-color .2s ease; } .kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--info); } .kpi.good::before { background: var(--good); } .kpi.bad::before { background: var(--bad); } .kpi.warn::before { background: var(--warn); } .kpi.hero::before { background: var(--accent); } .kpi:hover { border-color: var(--line-2); } .kpi .label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.10em; color: var(--muted); margin-bottom: 8px; } .kpi .value { font-family: 'Geist Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 25px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); } .kpi .value.sm { font-size: 20px; } .kpi.hero .value { color: var(--accent); } .kpi.good .value, .kpi.bad .value, .kpi.warn .value, .kpi.info .value { color: var(--ink); } .kpi .delta { margin-top: 8px; font-size: 11px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; } .kpi .corner { display: none; } .pill { display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:20px; font-variant-numeric:tabular-nums; } .pill.up { background: rgba(93,211,158,.14); color: var(--good); } .pill.down { background: rgba(242,92,84,.14); color: var(--bad); } .pill.flat { background: rgba(125,125,117,.14); color: var(--muted); } /* Panels */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } .grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-bottom: 12px; } .grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; margin-bottom: 12px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; position: relative; } .panel h3 { font-family: 'Geist', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: -0.01em; margin-bottom: 4px; } .panel .desc { color: var(--muted); font-size: 11px; margin-bottom: 12px; } .panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin: -2px 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .panel-head h3 { margin: 0; } .panel-head a { font-size: 11px; color: var(--info); text-decoration: none; white-space: nowrap; } .chart-wrap { position: relative; height: 280px; } .chart-wrap.tall { height: 340px; } .chart-wrap.short { height: 200px; } .chart-wrap.xtall { height: 400px; } /* Tables */ .table-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid var(--line); max-height: 600px; overflow-y: auto; } table { width: 100%; border-collapse: collapse; font-size: 12px; } th { background: var(--panel); color: var(--muted); text-align: left; padding: 11px 12px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; cursor: pointer; user-select: none; } th:hover { color: var(--ink-2); } th.sorted-asc::after { content: ' ▲'; color: var(--accent); font-size: 9px; } th.sorted-desc::after { content: ' ▼'; color: var(--accent); font-size: 9px; } td { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--ink-2); } td.name, td b { color: var(--ink); } tr:last-child td { border-bottom: none; } tr:hover td { background: rgba(255,255,255,0.02); } td.num { font-family: 'Geist Mono', monospace; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); } .badge { display: inline-block; padding: 3px 7px; border-radius: 5px; font-size: 10px; font-weight: 600; font-family: 'Geist Mono'; } .badge.good { background: rgba(93,211,158,0.12); color: var(--good); } .badge.bad { background: rgba(242,92,84,0.12); color: var(--bad); } .badge.info { background: rgba(122,162,247,0.12); color: var(--info); } .badge.warn { background: rgba(255,182,39,0.12); color: var(--warn); } .badge.muted { background: rgba(125,125,117,0.12); color: var(--muted); } /* Bar mini */ .bar-mini { display: inline-block; width: 50px; height: 5px; background: var(--bg-2); border-radius: 3px; overflow: hidden; vertical-align: middle; margin-right: 8px; } .bar-mini > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); } .bar-good { background: linear-gradient(90deg, var(--good), #a3e7c2) !important; } .bar-bad { background: linear-gradient(90deg, var(--bad), #f4978d) !important; } /* Upload zone */ .upload-zone { border: 2px dashed var(--line-2); border-radius: 12px; padding: 22px; text-align: center; cursor: pointer; transition: all .2s; background: var(--panel); } .upload-zone:hover, .upload-zone.dragover { border-color: var(--accent); background: rgba(255,182,39,0.04); } .upload-zone .icon { font-size: 24px; margin-bottom: 6px; } .upload-zone .label { font-size: 13px; color: var(--ink-2); font-weight: 500; } .upload-zone .hint { font-size: 11px; color: var(--muted); margin-top: 4px; } .upload-zone input { display: none; } /* File status pills */ .file-status-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-top: 12px; } .file-status { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 11px; } .file-status .name { color: var(--ink-2); font-weight: 500; margin-bottom: 4px; } .file-status .info { color: var(--muted); font-family: 'Geist Mono'; font-size: 10px; } .file-status.loaded { border-color: var(--good); } .file-status.loaded .name { color: var(--good); } .file-status.empty .name { color: var(--muted); } /* Notif */ .notif { position: fixed; top: 20px; right: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; font-size: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 1000; opacity: 0; transform: translateX(20px); transition: all .25s ease; pointer-events: none; max-width: 360px; } .notif.show { opacity: 1; transform: none; pointer-events: auto; } .notif.good { border-color: var(--good); } .notif.bad { border-color: var(--bad); } /* Empty state */ .empty-state { text-align: center; padding: 60px 24px; color: var(--muted); border: 1px dashed var(--line-2); border-radius: 14px; } .empty-state h4 { font-family: 'Fraunces', serif; font-size: 22px; color: var(--ink); margin-bottom: 8px; } .empty-state p { font-size: 13px; line-height: 1.5; max-width: 480px; margin: 0 auto; } .empty-state .icon { font-size: 38px; margin-bottom: 12px; opacity: 0.5; } /* Status row */ .status-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 14px; } .status-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; } .status-card .top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .status-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 10px currentColor; } .status-card .label { font-size: 11px; color: var(--ink-2); } .status-card .count { font-family: 'Fraunces', serif; font-weight: 900; font-size: 22px; line-height: 1; } .status-card .rev { font-size: 10px; color: var(--muted); margin-top: 4px; font-family: 'Geist Mono'; } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-2); } ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); } footer { text-align: center; color: var(--muted); font-size: 10px; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); letter-spacing: 0.04em; } /* Responsive */ @media (max-width: 1100px) { .kpi-row, .kpi-row.cols-5, .kpi-row.cols-6 { grid-template-columns: repeat(2, 1fr); } .status-row { grid-template-columns: repeat(3, 1fr); } .grid-2, .grid-2-1, .grid-1-2, .grid-3 { grid-template-columns: 1fr; } } @media (max-width: 640px) { body { padding: 16px 14px; } h1.display, .brand-title { font-size: 22px; } .kpi-row, .kpi-row.cols-5, .kpi-row.cols-6 { grid-template-columns: 1fr 1fr; } .status-row { grid-template-columns: 1fr 1fr; } } /* New Products + Strategy specific */ .np-mode-content { animation: fadein .15s ease; } #strategyBigPicture li { font-size: 12px; color: var(--ink-2); padding-left: 18px; position: relative; line-height: 1.5; } #strategyBigPicture li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 700; } #strategyBigPicture li b { color: var(--ink); font-weight: 600; } .strategy-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; border-left: 3px solid var(--accent); } .strategy-card.good { border-left-color: var(--good); } .strategy-card.bad { border-left-color: var(--bad); } .strategy-card.warn { border-left-color: var(--warn); } .strategy-card h4 { font-family: Fraunces, serif; font-size: 14px; margin-bottom: 6px; } .strategy-card p { font-size: 12px; color: var(--ink-2); line-height: 1.5; margin: 0; } .strategy-card .impact { font-size: 11px; color: var(--accent); margin-top: 8px; font-weight: 600; } /* ---- Tooltip ---- */ #tip { position: fixed; z-index: 9999; background: #1a1d24; border: 1px solid #353b48; border-radius: 8px; padding: 9px 13px; max-width: 300px; font-size: 11px; line-height: 1.55; color: #b8b6ae; pointer-events: none; box-shadow: 0 8px 28px rgba(0,0,0,.55); display: none; white-space: normal; } #tip b { color: #f4f3ee; font-weight: 600; } #tip .calc { color: #7aa2f7; font-size: 10px; margin-top: 5px; font-family: 'Geist Mono'; display: block; } [data-tip] { cursor: help; } .kpi[data-tip], th[data-tip] { cursor: pointer; } /* New Products track cards */ .np-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 12px; } .np-card .head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px dashed var(--line); padding-bottom: 8px; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; } .np-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; margin-left: 6px; } .np-tag.planned { background: rgba(196,165,255,0.15); color: var(--pending); } .np-tag.live { background: rgba(93,211,158,0.15); color: var(--good); } .np-tag.reconciled { background: rgba(122,162,247,0.15); color: var(--info); } .np-progress { height: 5px; background: var(--bg-2); border-radius: 3px; overflow: hidden; margin-top: 6px; } .np-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); } /* ── Layout/text utilities (replace one-off inline styles) ── */ .u-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .u-row.between { justify-content:space-between; } .u-stack { display:flex; flex-direction:column; gap:8px; } .u-muted { color: var(--muted); } .u-ink2 { color: var(--ink-2); } .u-sm { font-size:11px; } .u-right { text-align:right; } .u-mono { font-family:'Geist Mono',monospace; font-variant-numeric:tabular-nums; } .u-mt2 { margin-top:8px; } .u-mt4 { margin-top:16px; } .u-mb2 { margin-bottom:8px; } .mh-220 { max-height:220px; } .mh-300 { max-height:300px; } .mh-400 { max-height:400px; } .mh-520 { max-height:520px; } .mh-none { max-height:none; } .btn { background: linear-gradient(135deg,var(--accent),var(--accent-2)); color:#1a1a1a; font-weight:700; border:none; border-radius:10px; padding:10px 16px; font-size:13px; cursor:pointer; font-family:inherit; } .btn.ghost { background:transparent; color:var(--ink); border:1px solid var(--line); } /* ── Overview hero (answer-first) ── */ .ov-hero { display:grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap:14px; margin-bottom:12px; } .ov-hero .kpi .value { font-size: 24px; } .ov-hero .kpi.headline { padding: 20px 22px 20px 24px; } .ov-hero .kpi.headline .value { font-size: 36px; letter-spacing:-.6px; } .ov-hero .kpi.headline.bad { background: linear-gradient(135deg, rgba(242,92,84,.10), transparent); border-color: rgba(242,92,84,.35); } .ov-hero .kpi.headline.bad .value { color: var(--bad); } .ov-hero .kpi.headline.good { background: linear-gradient(135deg, rgba(93,211,158,.08), transparent); border-color: rgba(93,211,158,.30); } .ov-hero .kpi.headline.good .value { color: var(--good); } .headline-note { font-size: 12px; color: var(--ink-2); margin-top: 10px; } @media (max-width: 1100px) { .ov-hero { grid-template-columns: 1fr 1fr; } } /* ── Overview restructure: compact secondary KPI rows + "more" disclosure ── */ .ov-secondary .kpi, #overviewFinKpi .kpi { padding: 11px 12px 11px 14px; } .ov-secondary .kpi .value, #overviewFinKpi .kpi .value { font-size: 17px; } .ov-secondary .kpi .label, #overviewFinKpi .kpi .label { margin-bottom: 5px; } #overviewFinKpi { margin-top: 0 !important; } details.ov-more { border:1px solid var(--line); border-radius:12px; background:var(--panel); margin-top:16px; } details.ov-more > summary { padding:14px 16px; cursor:pointer; font-size:13px; font-weight:600; color:var(--ink-2); list-style:none; } details.ov-more > summary::-webkit-details-marker { display:none; } details.ov-more > summary::after { content:"▾"; color:var(--muted); float:right; transition:transform .15s; } details.ov-more[open] > summary { color:var(--ink); border-bottom:1px solid var(--line); } details.ov-more[open] > summary::after { transform:rotate(180deg); } details.ov-more > summary:hover { color:var(--ink); } details.ov-more .ov-more-body { padding: 14px 16px 16px; } /* ── TVD funnel (Phase 4) ── */ #tvdRecoverable:empty, #tvdNudgeAds:empty, #tvdNudgeSku:empty, #tvdNudgeSpf:empty, #tvdFooter:empty { display:none; } .tvd-hero{position:relative;margin:0 0 16px;border-radius:14px;padding:20px 22px; background:linear-gradient(135deg,rgba(255,182,39,.12),rgba(245,166,35,.04));border:1px solid rgba(255,182,39,.35)} .tvd-ey{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--accent);font-weight:700} .tvd-big{font-size:28px;font-weight:800;margin:8px 0 2px;letter-spacing:-.4px;color:var(--ink)} .tvd-big span{color:var(--accent)} .tvd-sub{font-size:12px;color:var(--ink-2);margin-bottom:4px} .tvd-parts{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 16px} .tvd-part{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-size:12px} .tvd-part span{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:3px} .tvd-part b{font-size:15px;color:var(--ink)} .tvd-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .tvd-ask{font-size:13px;color:var(--ink-2)} .tvd-wa{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#06310f;font-weight:700;font-size:13px;border-radius:10px;padding:10px 16px;text-decoration:none} .tvd-wa-sm{display:inline-flex;align-items:center;gap:6px;background:transparent;color:#25D366;border:1px solid rgba(37,211,102,.4);border-radius:8px;padding:6px 11px;font-size:12px;text-decoration:none;white-space:nowrap} .tvd-x{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--muted);font-size:15px;cursor:pointer} .tvd-x:hover,.tvd-min:hover{color:var(--ink)} .tvd-min{position:absolute;top:10px;right:40px;background:none;border:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:0} .tvd-hero.tvd-mini{display:flex;align-items:center;gap:14px;padding:12px 18px} .tvd-mini .tvd-x{position:static;margin-left:auto} .tvd-mini-txt{font-size:13px;color:var(--ink-2)} .tvd-mini-txt b{color:var(--accent);font-weight:700} .tvd-mini-expand{background:rgba(255,182,39,.10);border:1px solid var(--accent);color:var(--accent);border-radius:8px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit} .tvd-mini-expand:hover{background:rgba(255,182,39,.18)} .tvd-nudge{position:relative;display:flex;align-items:center;gap:12px;margin:0 0 14px; background:rgba(255,182,39,.06);border:1px solid rgba(255,182,39,.22);border-radius:10px;padding:11px 14px} .tvd-nudge .tvd-ic{font-size:18px} .tvd-nudge .tvd-tx{flex:1;font-size:13px;color:var(--ink)} .tvd-nudge .tvd-tx b{color:var(--accent)} .tvd-nudge .tvd-x{position:static} .tvd-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px; margin-top:24px;padding:14px 2px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)} .tvd-footer b{color:var(--ink-2)} .tvd-email{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)} .tvd-email-l{font-size:12px;color:var(--ink-2)} .tvd-email-in{background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:8px 11px;color:var(--ink);font-size:13px;font-family:inherit;min-width:200px} .tvd-email-btn{background:var(--accent);color:#1a1a1a;font-weight:700;border:none;border-radius:8px;padding:8px 14px;font-size:12px;cursor:pointer;font-family:inherit} .tvd-email-msg{font-size:11px;color:var(--bad)} .tvd-email-note{flex-basis:100%;font-size:10px;color:var(--muted)} .tvd-email.done{color:var(--good);font-size:12px} /* ── Header / nav redesign (2026-06) ───────────────────────────── */ .global-controls { gap: 12px; } /* Upload = primary action */ .ingest-btn.primary { background: var(--accent); border-color: var(--accent); color: #1a1a1a; font-weight: 800; font-size: 13px; padding: 10px 18px; box-shadow: 0 6px 18px rgba(255,182,39,.28); } .ingest-btn.primary:hover { filter: brightness(1.05); border-color: var(--accent); color: #1a1a1a; } /* Icon buttons: splitter / theme / gear */ .hdr-icons { display: flex; align-items: center; gap: 8px; } .iconbtn { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; color: var(--ink-2); font-size: 15px; cursor: pointer; text-decoration: none; font-family: inherit; transition: all .15s; } .iconbtn:hover { border-color: var(--line-2); color: var(--ink); } /* Period pill + popover */ .period-wrap { position: relative; } .period-pill { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 13px; color: var(--ink); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .period-pill:hover { border-color: var(--accent); } .period-pill .period-sub { color: var(--muted); font-weight: 400; font-size: 11px; font-family: 'Geist Mono'; } .period-pill .caret { font-size: 9px; opacity: .6; } .period-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; padding: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.55); display: none; flex-direction: column; gap: 12px; min-width: 280px; } .period-wrap.open .period-pop { display: flex; } .period-pop .date-presets { flex-wrap: wrap; } .period-pop .date-range { background: var(--bg-2); } /* Gear (Setup) menu */ .gear-wrap { position: relative; } .gear-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 210px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; padding: 7px; box-shadow: 0 18px 40px rgba(0,0,0,.55); display: none; flex-direction: column; } .gear-wrap.open .gear-menu { display: flex; } .gear-menu .gm-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); padding: 6px 10px 7px; font-weight: 600; } .gear-menu .tab { text-align: left; padding: 9px 12px; border-radius: 8px; border-bottom: none; font-size: 13px; white-space: nowrap; color: var(--ink-2); } .gear-menu .tab:hover { background: var(--bg-2); color: var(--ink); } .gear-menu .tab.active { background: rgba(255,182,39,.12); color: var(--accent); } #gearBtn.on { border-color: var(--accent); color: var(--accent); } /* Group nav (row 1) */ .groupnav { display: flex; gap: 4px; align-items: center; border-bottom: 1px solid var(--line); margin-bottom: 0; overflow-x: auto; } .group { background: none; border: none; border-bottom: 2px solid transparent; color: var(--ink-2); font-family: inherit; font-size: 14px; font-weight: 600; padding: 14px 16px; cursor: pointer; transition: all .15s; white-space: nowrap; } .group:hover { color: var(--ink); } .group.active { color: var(--ink); border-bottom-color: var(--accent); } /* Contextual child row (row 2): pills; show only the active group's tabs */ #tabs { display: flex; gap: 7px; padding: 11px 0; margin-bottom: 20px; border-bottom: 1px solid var(--line); overflow-x: auto; } #tabs .tab { display: none; border: 1px solid var(--line); border-radius: 9px; padding: 8px 13px; font-size: 12.5px; color: var(--ink-2); border-bottom: 1px solid var(--line); } #tabs .tab:hover { color: var(--ink); border-color: var(--line-2); } #tabs .tab.active { border-color: var(--accent); color: var(--ink); background: rgba(255,182,39,.08); font-weight: 600; } #tabs[data-active-group="overview"], #tabs[data-active-group="setup"] { display: none; } #tabs[data-active-group="sales"] .tab[data-group="sales"], #tabs[data-active-group="catalog"] .tab[data-group="catalog"], #tabs[data-active-group="growth"] .tab[data-group="growth"] { display: inline-block; } /* ── SEO content section on the calculator page ─────────────────── */ .seo-content { max-width: 980px; margin: 56px auto 0; padding-top: 34px; border-top: 1px solid var(--line); } .seo-content h1 { font-size: 26px; letter-spacing: -0.4px; margin-bottom: 10px; } .seo-content h2 { font-size: 20px; margin: 34px 0 14px; } .seo-content .sc-lead { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); max-width: 800px; } .seo-content .sc-lead em { color: var(--accent); font-style: normal; font-weight: 600; } .sc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; } .sc-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; } .sc-card h3 { font-size: 13.5px; margin-bottom: 6px; color: var(--ink); } .sc-card p { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); } .sc-steps { list-style: none; counter-reset: scs; display: grid; gap: 10px; } .sc-steps li { position: relative; padding: 12px 14px 12px 50px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); } .sc-steps li strong { color: var(--ink); } .sc-steps li::before { counter-increment: scs; content: counter(scs); position: absolute; left: 13px; top: 12px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: var(--accent); color: #1a1a1a; font-weight: 800; font-size: 13px; } .sc-privacy { margin-top: 22px; padding: 14px 16px; background: rgba(93,211,158,.07); border: 1px solid rgba(93,211,158,.25); border-radius: 10px; font-size: 13px; line-height: 1.6; color: var(--ink-2); } .sc-privacy strong { color: var(--good); } .sc-faq { display: grid; gap: 10px; } .sc-faq article { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; } .sc-faq h3 { font-size: 13.5px; margin-bottom: 6px; color: var(--ink); } .sc-faq p { font-size: 12.5px; line-height: 1.65; color: var(--ink-2); } .sc-guides { display: flex; flex-direction: column; gap: 8px; } .sc-guides a { font-size: 13.5px; color: var(--accent); text-decoration: none; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; } .sc-guides a:hover { border-color: var(--accent); } @media (max-width: 860px) { .sc-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .sc-grid { grid-template-columns: 1fr; } } /* ── Demo mode ──────────────────────────────────────────────────── */ #demoBanner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 16px; background: rgba(122,162,247,.08); border: 1px solid rgba(122,162,247,.35); border-radius: 10px; font-size: 12.5px; color: var(--ink-2); } #demoBanner b { color: var(--info); } #demoBanner button { margin-left: auto; background: var(--panel); border: 1px solid var(--line-2); color: var(--ink); border-radius: 8px; padding: 7px 12px; font-size: 12px; cursor: pointer; font-family: inherit; } #demoBanner button:hover { border-color: var(--accent); color: var(--accent); } .empty-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; } .btn-demo { background: var(--accent); color: #1a1a1a; border: none; border-radius: 10px; padding: 11px 20px; font-weight: 800; font-size: 13px; cursor: pointer; font-family: inherit; } .btn-demo:hover { filter: brightness(1.06); } .btn-upload-alt { background: var(--panel); border: 1px solid var(--line-2); color: var(--ink); border-radius: 10px; padding: 11px 20px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; } .btn-upload-alt:hover { border-color: var(--accent); color: var(--accent); } .empty-trust { margin-top: 14px; font-size: 11px; color: var(--muted); } .demo-link-btn { background: transparent; border: 1px dashed var(--line-2); color: var(--ink-2); border-radius: 10px; padding: 9px 16px; font-size: 12px; cursor: pointer; font-family: inherit; } .demo-link-btn:hover { border-color: var(--accent); color: var(--accent); } /* Share menu items (inside .gear-menu container) */ .gear-menu .share-item { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; border: none; background: none; font-size: 13px; color: var(--ink-2); text-decoration: none; cursor: pointer; font-family: inherit; white-space: nowrap; } .gear-menu .share-item:hover { background: var(--bg-2); color: var(--ink); }