/* ============================================================================ * geo-visibility-tracker — main stylesheet * * Dark-mode-first design system. Reference points: Linear, Vercel Analytics, * Plausible, Attio. Hand-written (not Tailwind) for control and readability. * * Order: * 1. Font-face (self-hosted Inter Variable + JetBrains Mono) * 2. Design tokens (CSS custom properties) * 3. Reset + base * 4. Typography * 5. Layout primitives (top bar, container, grid) * 6. Components (metric card, delta chip, sparkline, etc.) * 7. Pages * 8. Utilities + responsive * ========================================================================== */ /* ---- 1. Fonts ---- */ @font-face { font-family: 'Inter'; src: url('/assets/fonts/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/InterVariable-Italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/JetBrainsMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* ---- 2. Design tokens ---- */ :root, [data-theme="dark"] { /* Background surfaces */ --bg-0: #09090b; /* page background */ --bg-1: #111113; /* card / section background */ --bg-2: #17171a; /* card hover / elevated */ --bg-3: #1e1e22; /* inset / input */ /* Borders */ --border-subtle: rgba(255, 255, 255, 0.06); --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.14); /* Text */ --fg-0: #f5f5f7; /* primary — headings, big numbers */ --fg-1: #a1a1aa; /* secondary — labels, descriptions */ --fg-2: #71717a; /* muted — captions, timestamps */ --fg-3: #52525b; /* very muted — disabled */ /* Accent — signature electric blue, used sparingly */ --accent: #3b82f6; --accent-fg: #ffffff; --accent-hover: #60a5fa; --accent-bg: rgba(59, 130, 246, 0.10); --accent-border: rgba(59, 130, 246, 0.30); /* Semantic */ --success: #10b981; --success-bg: rgba(16, 185, 129, 0.12); --warning: #f59e0b; --warning-bg: rgba(245, 158, 11, 0.12); --danger: #ef4444; --danger-bg: rgba(239, 68, 68, 0.12); /* Platform categorical palette — one color per AI platform */ --platform-chatgpt: #e5e5e7; /* OpenAI monochrome (light in dark theme) */ --platform-claude: #cc785c; /* Anthropic amber */ --platform-gemini: #4285f4; /* Google blue */ --platform-perplexity: #22d3ee; /* Cyan */ --platform-google-ai-overview: #a855f7; /* Violet */ /* Radii */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.30); /* Type scale */ --fs-xs: 11px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 28px; --fs-3xl: 40px; --fs-4xl: 56px; /* Spacing (4px grid) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; /* Transitions */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --t-fast: 100ms var(--ease-out); --t-med: 180ms var(--ease-out); /* Layout */ --container-max: 1120px; --topbar-h: 52px; --topbar-bg: rgba(9, 9, 11, 0.85); /* Font stacks */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace; } /* Light theme — overrides. Toggled via `data-theme="light"` on . */ [data-theme="light"] { --bg-0: #fafafa; --bg-1: #ffffff; --bg-2: #f4f4f5; --bg-3: #e4e4e7; --border-subtle: rgba(0, 0, 0, 0.05); --border: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.14); --fg-0: #18181b; --fg-1: #3f3f46; --fg-2: #71717a; --fg-3: #a1a1aa; /* ChatGPT brand mark is monochrome — flip to dark in light theme */ --platform-chatgpt: #18181b; --accent-bg: rgba(59, 130, 246, 0.08); --accent-border: rgba(59, 130, 246, 0.25); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06); --topbar-bg: rgba(255, 255, 255, 0.85); } /* Ambient mesh needs a lighter blend in light mode */ [data-theme="light"] body:has(.first-scan-card) { background: radial-gradient(600px circle at 15% 0%, rgba(59, 130, 246, 0.06), transparent 55%), radial-gradient(500px circle at 85% 20%, rgba(168, 85, 247, 0.04), transparent 60%), radial-gradient(700px circle at 50% 110%, rgba(16, 185, 129, 0.03), transparent 55%), var(--bg-0); } /* color-scheme informs native form controls + scrollbars */ [data-theme="dark"] { color-scheme: dark; } [data-theme="light"] { color-scheme: light; } /* ---- 3. Reset + base ---- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background: var(--bg-0); color: var(--fg-0); font-family: var(--font-sans); font-size: var(--fs-md); line-height: 1.5; min-height: 100vh; /* Subtle vignette — makes the dark background feel deliberate, not flat */ background-image: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.04) 0%, transparent 50%), radial-gradient(circle at 100% 100%, rgba(168, 85, 247, 0.03) 0%, transparent 50%); background-attachment: fixed; } a { color: inherit; text-decoration: none; transition: color var(--t-fast); } a:hover { color: var(--accent-hover); } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* ---- 4. Typography ---- */ h1, h2, h3, h4 { margin: 0; color: var(--fg-0); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; } h1 { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -0.03em; } h2 { font-size: var(--fs-2xl); letter-spacing: -0.02em; } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); font-weight: 500; } p { margin: 0; } code, pre, .mono, .tabular { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .eyebrow { display: inline-block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); } .label { font-size: var(--fs-sm); font-weight: 500; color: var(--fg-1); } .muted { color: var(--fg-2); } /* Numbers always tabular for aligned columns */ .num, .metric-value, table td.num, .stat-value { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'ss01' 1; } /* ---- 5. Layout primitives ---- */ .topbar { position: sticky; top: 0; z-index: 40; height: var(--topbar-h); background: var(--topbar-bg); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border-subtle); } .topbar__inner { max-width: var(--container-max); margin: 0 auto; height: 100%; padding: 0 var(--s-6); display: flex; align-items: center; gap: var(--s-6); } .topbar__logo { display: flex; align-items: center; gap: var(--s-2); font-weight: 700; font-size: var(--fs-md); letter-spacing: -0.02em; color: var(--fg-0); } .topbar__logo-mark { width: 22px; height: 22px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%); display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800; } .topbar__logo-suffix { font-weight: 400; color: var(--fg-2); font-size: var(--fs-sm); margin-left: var(--s-1); letter-spacing: 0; } .topbar__nav { display: flex; gap: var(--s-1); align-items: center; margin-left: var(--s-4); } .topbar__nav-link { padding: 6px 10px; font-size: var(--fs-sm); font-weight: 500; color: var(--fg-1); border-radius: var(--radius-md); transition: background var(--t-fast), color var(--t-fast); } .topbar__nav-link:hover { color: var(--fg-0); background: var(--bg-2); } .topbar__nav-link.is-active { color: var(--fg-0); background: var(--bg-2); } .topbar__spacer { flex: 1; } .topbar__right { display: flex; gap: var(--s-3); align-items: center; } .topbar__by { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 10px; font-size: var(--fs-xs); color: var(--fg-1); border-radius: var(--radius-md); transition: background var(--t-fast), color var(--t-fast); } .topbar__by:hover { background: var(--bg-2); color: var(--fg-0); } .topbar__by-label { color: var(--fg-3); font-weight: 400; letter-spacing: 0; } .topbar__by-logo { height: 16px; width: auto; color: var(--fg-1); transition: color var(--t-fast); } .topbar__by:hover .topbar__by-logo { color: var(--fg-0); } @media (max-width: 720px) { .topbar__by-label { display: none; } .topbar__by-logo { height: 14px; } } .container { max-width: var(--container-max); margin: 0 auto; padding: var(--s-8) var(--s-6) var(--s-16); } .page-header { margin-bottom: var(--s-8); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; } .page-header__meta { display: flex; gap: var(--s-4); align-items: center; color: var(--fg-2); font-size: var(--fs-sm); } .section { margin-top: var(--s-8); } .section__header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s-4); } .section__header h2 { font-size: var(--fs-xl); font-weight: 600; color: var(--fg-0); } /* ---- 6. Components ---- */ /* ---- Chips ---- */ .chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; font-size: var(--fs-xs); font-weight: 500; color: var(--fg-1); background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; white-space: nowrap; } .chip--ghost { background: transparent; } .chip--positive { color: var(--success); background: var(--success-bg); border-color: transparent; } .chip--negative { color: var(--danger); background: var(--danger-bg); border-color: transparent; } .chip--neutral { color: var(--fg-2); } .chip .chip__arrow { font-weight: 700; font-size: 11px; line-height: 1; } /* ---- Metric card ---- */ .metric-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); position: relative; transition: border-color var(--t-fast), background var(--t-fast); } .metric-card:hover { border-color: var(--border-strong); background: var(--bg-2); } .metric-card__label { font-size: var(--fs-sm); color: var(--fg-1); font-weight: 500; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); } .metric-card__value-row { display: flex; align-items: baseline; gap: var(--s-3); } .metric-card__value { font-size: var(--fs-4xl); font-weight: 600; color: var(--fg-0); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } .metric-card__value-suffix { font-size: var(--fs-md); color: var(--fg-2); font-weight: 500; } .metric-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: auto; padding-top: var(--s-3); } /* Prominent "hero" variant for domain overview cards */ .metric-card--hero { padding: var(--s-6); gap: var(--s-4); } .metric-card--hero .metric-card__value { font-size: var(--fs-4xl); } /* Grid for metric cards */ .grid-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4); } .grid-metrics--hero { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--s-5); } /* ---- Sparkline ---- */ .sparkline { width: 100%; height: 40px; display: block; overflow: visible; } .sparkline__path { fill: none; stroke: var(--accent); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .sparkline__fill { fill: var(--accent); opacity: 0.10; } .sparkline__dot { fill: var(--accent); } /* Platform-colored sparkline variants */ .sparkline--chatgpt .sparkline__path, .sparkline--chatgpt .sparkline__dot { stroke: var(--platform-chatgpt); fill: var(--platform-chatgpt); } .sparkline--chatgpt .sparkline__fill { fill: var(--platform-chatgpt); } .sparkline--claude .sparkline__path, .sparkline--claude .sparkline__dot { stroke: var(--platform-claude); fill: var(--platform-claude); } .sparkline--claude .sparkline__fill { fill: var(--platform-claude); } .sparkline--gemini .sparkline__path, .sparkline--gemini .sparkline__dot { stroke: var(--platform-gemini); fill: var(--platform-gemini); } .sparkline--gemini .sparkline__fill { fill: var(--platform-gemini); } .sparkline--perplexity .sparkline__path, .sparkline--perplexity .sparkline__dot { stroke: var(--platform-perplexity); fill: var(--platform-perplexity); } .sparkline--perplexity .sparkline__fill { fill: var(--platform-perplexity); } .sparkline--google_ai_overview .sparkline__path, .sparkline--google_ai_overview .sparkline__dot { stroke: var(--platform-google-ai-overview); fill: var(--platform-google-ai-overview); } .sparkline--google_ai_overview .sparkline__fill { fill: var(--platform-google-ai-overview); } /* ---- Platform card (smaller, platform-accented) ---- */ .platform-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s-4); position: relative; display: flex; flex-direction: column; gap: var(--s-3); transition: border-color var(--t-fast), background var(--t-fast); } .platform-card:hover { border-color: var(--border-strong); background: var(--bg-2); } .platform-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); } .platform-card__name { font-size: var(--fs-sm); font-weight: 600; color: var(--fg-0); display: flex; align-items: center; gap: 8px; } .platform-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } .platform-dot--chatgpt { background: var(--platform-chatgpt); } .platform-dot--claude { background: var(--platform-claude); } .platform-dot--gemini { background: var(--platform-gemini); } .platform-dot--perplexity { background: var(--platform-perplexity); } .platform-dot--google_ai_overview { background: var(--platform-google-ai-overview); } .platform-card__value { font-size: var(--fs-2xl); font-weight: 600; color: var(--fg-0); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .platform-card__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-2); font-size: var(--fs-xs); color: var(--fg-2); } .platform-card__stats .k { color: var(--fg-2); } .platform-card__stats .v { color: var(--fg-1); font-weight: 500; font-variant-numeric: tabular-nums; } .grid-platforms { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3); } @media (max-width: 960px) { .grid-platforms { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .grid-platforms { grid-template-columns: 1fr; } } /* ---- Tables ---- */ .table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .table thead th { text-align: left; font-weight: 500; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--fs-xs); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); background: var(--bg-1); } .table tbody td { padding: var(--s-3); border-bottom: 1px solid var(--border-subtle); color: var(--fg-1); vertical-align: middle; } .table tbody tr { transition: background var(--t-fast); } .table tbody tr:hover { background: var(--bg-1); } .table tbody tr.is-clickable { cursor: pointer; } .table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg-0); } .score-cell { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 28px; border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); font-weight: 500; } .score-cell--excellent { background: rgba(16, 185, 129, 0.14); color: #34d399; } .score-cell--good { background: rgba(59, 130, 246, 0.14); color: var(--accent-hover); } .score-cell--fair { background: rgba(245, 158, 11, 0.14); color: #fbbf24; } .score-cell--poor { background: rgba(239, 68, 68, 0.10); color: #f87171; } .score-cell--empty { background: var(--bg-2); color: var(--fg-3); } /* ---- Time-series chart container ---- */ .chart-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s-5); } .chart-card__header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s-4); } .chart-card__title { font-size: var(--fs-md); font-weight: 600; color: var(--fg-0); } .chart-card__legend { display: flex; gap: var(--s-4); flex-wrap: wrap; } .chart-card__legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--fg-2); } .chart-card__body { min-height: 260px; } /* ---- Competitor share-of-voice bar ---- */ .sov-bar { display: flex; flex-direction: column; gap: var(--s-2); } .sov-row { display: grid; grid-template-columns: 180px 1fr 60px; align-items: center; gap: var(--s-3); padding: 6px 0; border-bottom: 1px solid var(--border-subtle); } .sov-row:last-child { border-bottom: 0; } .sov-row__label { font-size: var(--fs-sm); color: var(--fg-1); font-weight: 500; } .sov-row__label--us { color: var(--fg-0); font-weight: 600; } .sov-row__bar { height: 8px; background: var(--bg-3); border-radius: 4px; overflow: hidden; position: relative; } .sov-row__bar-fill { height: 100%; background: var(--fg-3); border-radius: 4px; transition: width var(--t-med); } .sov-row--us .sov-row__bar-fill { background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%); } .sov-row__value { font-size: var(--fs-sm); color: var(--fg-1); text-align: right; font-variant-numeric: tabular-nums; } .sov-row--us .sov-row__value { color: var(--fg-0); font-weight: 600; } /* ---- Answer panel (per-prompt drill-down) ---- */ .answer-grid { display: grid; grid-template-columns: repeat(5, minmax(260px, 1fr)); gap: var(--s-3); overflow-x: auto; } @media (max-width: 1200px) { .answer-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .answer-grid { grid-template-columns: 1fr; } } .answer-panel { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); } .answer-panel__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--s-3); border-bottom: 1px solid var(--border-subtle); } .answer-panel__body { font-size: var(--fs-sm); color: var(--fg-1); line-height: 1.6; max-height: 400px; overflow-y: auto; } .answer-panel__body mark.mention-us { background: rgba(59, 130, 246, 0.25); color: var(--fg-0); padding: 0 2px; border-bottom: 1px solid var(--accent); border-radius: 2px; } .answer-panel__body mark.mention-competitor { background: rgba(255, 255, 255, 0.08); color: var(--fg-0); padding: 0 2px; border-radius: 2px; } .answer-panel__citations { padding-top: var(--s-3); border-top: 1px solid var(--border-subtle); } .citation { display: flex; align-items: flex-start; gap: var(--s-2); padding: 6px 0; font-size: var(--fs-xs); color: var(--fg-2); line-height: 1.4; } .citation__favicon { width: 14px; height: 14px; border-radius: 2px; flex-shrink: 0; margin-top: 2px; background: var(--bg-3); } .citation__body { flex: 1; min-width: 0; } .citation__title { color: var(--fg-1); font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .citation__host { color: var(--fg-3); font-size: 10px; } .citation--ours .citation__title { color: var(--accent-hover); } /* ---- Status strip ---- */ .status-strip { display: flex; gap: var(--s-6); align-items: center; padding: var(--s-3) var(--s-5); background: var(--bg-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); margin-top: var(--s-6); font-size: var(--fs-xs); color: var(--fg-2); flex-wrap: wrap; } .status-strip__item { display: inline-flex; align-items: center; gap: 6px; } .status-strip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); } .status-strip__dot--warn { background: var(--warning); } .status-strip__dot--err { background: var(--danger); } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; font-size: var(--fs-sm); font-weight: 500; color: var(--fg-0); background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); } .btn:hover { background: var(--bg-3); border-color: var(--border-strong); } .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn--sm { height: 26px; padding: 0 10px; font-size: var(--fs-xs); } /* ---- Empty / error states ---- */ .empty { padding: var(--s-10); text-align: center; color: var(--fg-2); } .empty__icon { font-size: 32px; margin-bottom: var(--s-3); opacity: 0.5; } /* ---- 7. Pages ---- */ /* ---- Login ---- */ .login-card { max-width: 380px; margin: 120px auto; padding: var(--s-8); background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); } .login-card h1 { font-size: var(--fs-xl); margin-bottom: var(--s-2); } .login-card p { color: var(--fg-2); font-size: var(--fs-sm); margin-bottom: var(--s-6); } .login-card input { width: 100%; height: 36px; padding: 0 12px; background: var(--bg-3); border: 1px solid var(--border); color: var(--fg-0); border-radius: var(--radius-md); font-family: inherit; font-size: var(--fs-md); margin-bottom: var(--s-3); } .login-card input:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); } .login-card .btn { width: 100%; justify-content: center; margin-top: var(--s-2); } /* ---- Site footer ---- */ .site-footer { margin-top: var(--s-16); border-top: 1px solid var(--border-subtle); } .site-footer__inner { max-width: var(--container-max); margin: 0 auto; padding: var(--s-5) var(--s-6); display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; } .site-footer__copy { color: var(--fg-2); font-size: var(--fs-xs); } .site-footer__nav { display: flex; gap: var(--s-4); flex-wrap: wrap; font-size: var(--fs-xs); } .site-footer__nav a { color: var(--fg-2); text-decoration: none; transition: color var(--t-fast); } .site-footer__nav a:hover { color: var(--fg-0); } /* Status heartbeat — pulsing dot + label, clickable through to /status */ .status-strip { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--fg-2); text-decoration: none; transition: color var(--t-fast); white-space: nowrap; } .status-strip:hover { color: var(--fg-0); } .status-strip__label { letter-spacing: 0.01em; } .status-strip__pulse { position: relative; width: 10px; height: 10px; flex-shrink: 0; } .status-strip__dot { position: absolute; inset: 3px; border-radius: 50%; } .status-strip__ring { position: absolute; inset: 0; border-radius: 50%; opacity: 0; animation: status-pulse 2.4s ease-out infinite; } [data-status-level="ok"] .status-strip__dot { background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,0.6); } [data-status-level="ok"] .status-strip__ring { background: #10b981; } [data-status-level="warn"] .status-strip__dot { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,0.6); } [data-status-level="warn"] .status-strip__ring { background: #f59e0b; } [data-status-level="err"] .status-strip__dot { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.6); } [data-status-level="err"] .status-strip__ring { background: #ef4444; } @keyframes status-pulse { 0% { opacity: 0.6; transform: scale(0.7); } 80% { opacity: 0; transform: scale(1.8); } 100% { opacity: 0; transform: scale(1.8); } } .no-motion .status-strip__ring { animation: none; display: none; } /* Status page hero + component list */ .status-hero { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5) var(--s-6); background: color-mix(in oklab, #10b981 10%, var(--bg-1)); border: 1px solid color-mix(in oklab, #10b981 30%, transparent); border-radius: var(--radius-lg); font-size: var(--fs-md); color: var(--fg-0); } .status-list { list-style: none; padding: 0; margin: 0; background: var(--bg-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; } .status-row { display: grid; grid-template-columns: 24px 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-5); border-top: 1px solid var(--border-subtle); font-size: var(--fs-sm); } .status-row:first-child { border-top: 0; } .status-row__dot { position: relative; width: 10px; height: 10px; } .status-row__dot-inner { position: absolute; inset: 2px; border-radius: 50%; } [data-status-level="ok"] .status-row__dot-inner { background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,0.55); } [data-status-level="warn"] .status-row__dot-inner { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,0.55); } [data-status-level="err"] .status-row__dot-inner { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.55); } .status-row__name { color: var(--fg-0); font-weight: 500; } .status-row__state { color: var(--fg-2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; } /* ============================================================================ Landing page (marketing host) ============================================================================ */ .landing-hero { max-width: 760px; margin: var(--s-12) auto var(--s-16); text-align: center; } .landing-hero__title { font-size: var(--fs-4xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; color: var(--fg-0); margin: var(--s-3) 0 var(--s-5); } .landing-hero__subtitle { font-size: var(--fs-lg); color: var(--fg-1); line-height: 1.55; max-width: 620px; margin: 0 auto var(--s-6); } .landing-hero__ctas { display: flex; gap: var(--s-3); justify-content: center; margin-bottom: var(--s-4); } .landing-hero__trust { font-size: var(--fs-xs); color: var(--fg-2); } @media (max-width: 720px) { .landing-hero__ctas { flex-direction: column; align-items: center; } .landing-hero__ctas .btn { width: 100%; max-width: 280px; } } .how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } @media (max-width: 720px) { .how-steps { grid-template-columns: 1fr; } } .how-step { background: var(--bg-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--s-6); } .how-step__num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); font-weight: 700; font-size: var(--fs-md); margin-bottom: var(--s-3); } .how-step h3 { font-size: var(--fs-md); font-weight: 600; color: var(--fg-0); margin: 0 0 var(--s-2); letter-spacing: -0.005em; } .how-step p { font-size: var(--fs-sm); color: var(--fg-1); line-height: 1.55; margin: 0; } .landing-cta { text-align: center; padding: var(--s-12) var(--s-5); background: radial-gradient(70% 80% at 50% 100%, color-mix(in oklab, var(--accent) 15%, transparent), transparent 70%), var(--bg-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); } .landing-cta h2 { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.01em; color: var(--fg-0); margin: 0 0 var(--s-3); } .landing-cta p { margin: 0 0 var(--s-5); } /* ============================================================================ Pricing grid + monthly/annual toggle (used on /billing) ============================================================================ */ .pricing-toggle { display: inline-flex; align-items: center; padding: 4px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; margin: 0 auto var(--s-6); display: flex; width: fit-content; gap: 2px; } .pricing-toggle__btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; background: transparent; border: 0; border-radius: 999px; color: var(--fg-1); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); } .pricing-toggle__btn:hover { color: var(--fg-0); } .pricing-toggle__btn.is-active { background: var(--bg-1); color: var(--fg-0); box-shadow: var(--shadow-sm); } .pricing-toggle__saving { padding: 2px 8px; background: var(--success-bg); color: #6ee7b7; font-size: 10px; font-weight: 600; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; } .pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); margin-top: var(--s-5); } @media (max-width: 720px) { .pricing-grid { grid-template-columns: 1fr; } } .pricing-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); position: relative; } .pricing-card--featured { border-color: var(--accent-border); box-shadow: 0 0 0 1px var(--accent-border), 0 12px 32px -10px rgba(59, 130, 246, 0.25); } .pricing-card__header { display: flex; flex-direction: column; gap: 4px; } .pricing-card__badge { position: absolute; top: -12px; right: var(--s-5); padding: 4px 10px; background: var(--accent); color: var(--accent-fg); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 999px; } .pricing-card__name { font-size: var(--fs-xl); font-weight: 600; color: var(--fg-0); letter-spacing: -0.01em; } .pricing-card__tagline { font-size: var(--fs-sm); color: var(--fg-2); } .pricing-card__price { display: flex; align-items: baseline; gap: 6px; } .pricing-card__amount { font-size: var(--fs-3xl); font-weight: 700; color: var(--fg-0); letter-spacing: -0.02em; transition: opacity 120ms ease; } .pricing-card__period { font-size: var(--fs-md); color: var(--fg-2); } .pricing-card__secondary { font-size: var(--fs-xs); color: var(--fg-2); min-height: 1em; } .pricing-features { list-style: none; padding: 0; margin: var(--s-2) 0 var(--s-3); display: flex; flex-direction: column; gap: 8px; } .pricing-features li { padding-left: 22px; position: relative; font-size: var(--fs-sm); color: var(--fg-1); line-height: 1.45; } .pricing-features li::before { content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; background: var(--accent-bg); border-radius: 50%; } .pricing-features li::after { content: ""; position: absolute; left: 3px; top: 8px; width: 8px; height: 5px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg); } /* Legal / long-form prose pages */ .legal-prose { max-width: 640px; color: var(--fg-1); font-size: var(--fs-md); line-height: 1.7; } .legal-prose h2 { font-size: var(--fs-md); font-weight: 600; color: var(--fg-0); margin: var(--s-8) 0 var(--s-3); letter-spacing: -0.005em; } .legal-prose h2:first-of-type { margin-top: var(--s-6); } .legal-prose p, .legal-prose ul { margin: 0 0 var(--s-4); } .legal-prose ul { padding-left: var(--s-5); } .legal-prose li { margin-bottom: 6px; } .legal-prose a { color: var(--fg-0); text-decoration: underline; text-underline-offset: 2px; } .legal-prose a:hover { color: var(--accent); } .legal-prose strong { color: var(--fg-0); font-weight: 600; } /* ---- 8. Utilities + responsive ---- */ .stack > * + * { margin-top: var(--s-3); } .hidden { display: none !important; } .mono { font-family: var(--font-mono); } @media (max-width: 720px) { :root { --fs-4xl: 40px; --fs-3xl: 28px; } .topbar__inner { padding: 0 var(--s-4); } .container { padding: var(--s-6) var(--s-4) var(--s-12); } .topbar__nav { display: none; } /* Hide nav text on mobile — rely on container links */ } /* ============================================================================ Auth pages (signup, login, password reset, email verification) ============================================================================ */ .auth-body { background: radial-gradient(ellipse at top, rgba(59, 130, 246, 0.05) 0%, transparent 60%), var(--bg-0); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--s-6); } .auth-shell { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: var(--s-6); } .auth-brand { display: inline-flex; color: var(--fg-0); text-decoration: none; opacity: 0.85; } .auth-brand:hover { opacity: 1; } .auth-brand__logo { height: 24px; width: auto; } .auth-card { width: 100%; padding: var(--s-8); background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); } .auth-card__title { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.01em; color: var(--fg-0); margin: 0 0 var(--s-2); } .auth-card__subtitle { font-size: var(--fs-sm); color: var(--fg-1); margin: 0 0 var(--s-6); line-height: 1.5; } .auth-icon { color: var(--accent); opacity: 0.85; margin-bottom: var(--s-4); } .auth-help { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--border-subtle); font-size: var(--fs-sm); } .auth-help p { margin: 0; } .auth-help ul { font-size: var(--fs-sm); line-height: 1.7; } .auth-footer { font-size: var(--fs-sm); color: var(--fg-2); margin: 0; text-align: center; } .auth-footer a { color: var(--fg-0); text-decoration: none; font-weight: 500; } .auth-footer a:hover { color: var(--accent); } /* Forms */ .form { display: flex; flex-direction: column; gap: var(--s-4); } .form-field { display: flex; flex-direction: column; gap: 6px; } .form-field label { font-size: var(--fs-sm); font-weight: 500; color: var(--fg-0); } .form-field__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); } .form-field__subtle-link { font-size: var(--fs-xs); color: var(--fg-2); text-decoration: none; } .form-field__subtle-link:hover { color: var(--accent); } .form-field input[type="text"], .form-field input[type="email"], .form-field input[type="password"], .form-field input[type="url"], .form-field textarea { width: 100%; height: 40px; padding: 0 12px; background: var(--bg-3); border: 1px solid var(--border); color: var(--fg-0); border-radius: var(--radius-md); font-family: inherit; font-size: var(--fs-md); transition: border-color var(--t-fast), box-shadow var(--t-fast); } .form-field textarea { height: auto; min-height: 80px; padding: 10px 12px; line-height: 1.5; resize: vertical; } .form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); } .form-field.is-error input, .form-field.is-error textarea { border-color: var(--danger); } .form-field.is-error input:focus, .form-field.is-error textarea:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25); } .form-hint { font-size: var(--fs-xs); color: var(--fg-2); } .form-error { font-size: var(--fs-xs); color: var(--danger); line-height: 1.4; } .form-error--general { padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4); background: var(--danger-bg); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: var(--radius-md); font-size: var(--fs-sm); color: #fca5a5; } .btn--full { width: 100%; height: 40px; justify-content: center; font-size: var(--fs-md); margin-top: var(--s-2); } /* Flash messages */ .flash { padding: var(--s-3) var(--s-4); margin-bottom: var(--s-5); border-radius: var(--radius-md); font-size: var(--fs-sm); line-height: 1.5; } .flash--success { background: var(--success-bg); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.25); } .flash--info { background: var(--accent-bg); color: #93c5fd; border: 1px solid var(--accent-border); } .flash--warning { background: var(--warning-bg); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.25); } .flash--error { background: var(--danger-bg); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.25); } /* ============================================================================ Onboarding wizard ============================================================================ */ .onboarding-body { background: radial-gradient(ellipse at top, rgba(59, 130, 246, 0.05) 0%, transparent 60%), var(--bg-0); min-height: 100vh; display: flex; flex-direction: column; } .onboarding-topbar { display: flex; align-items: center; justify-content: space-between; padding: var(--s-5) var(--s-8); border-bottom: 1px solid var(--border-subtle); } .onboarding-topbar__brand { display: inline-flex; color: var(--fg-0); text-decoration: none; opacity: 0.85; } .onboarding-topbar__brand:hover { opacity: 1; } .onboarding-topbar__logo { height: 22px; width: auto; } .onboarding-topbar__exit { font-size: var(--fs-sm); color: var(--fg-2); text-decoration: none; } .onboarding-topbar__exit:hover { color: var(--fg-0); } .onboarding-shell { width: 100%; max-width: 560px; margin: 0 auto; padding: var(--s-10) var(--s-6) var(--s-12); display: flex; flex-direction: column; gap: var(--s-8); } /* Steps indicator */ .onboarding-steps { display: flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s-2); } .onboarding-steps__item { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; } .onboarding-steps__marker { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--border); font-size: var(--fs-xs); font-weight: 600; color: var(--fg-2); transition: all var(--t-fast); } .onboarding-steps__label { font-size: var(--fs-sm); color: var(--fg-2); font-weight: 500; } .onboarding-steps__item.is-current .onboarding-steps__marker { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .onboarding-steps__item.is-current .onboarding-steps__label { color: var(--fg-0); } .onboarding-steps__item.is-complete .onboarding-steps__marker { background: var(--success); border-color: var(--success); color: #0f1a13; } .onboarding-steps__item.is-complete .onboarding-steps__label { color: var(--fg-1); } .onboarding-steps__connector { flex: 1; height: 1px; background: var(--border); margin: 0 var(--s-2); min-width: 16px; } .onboarding-steps__connector.is-complete { background: var(--success); } /* Card */ .onboarding-card { padding: var(--s-8); background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); } .onboarding-card__header { margin-bottom: var(--s-6); } .onboarding-card__header h1 { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.01em; color: var(--fg-0); margin: 0 0 var(--s-2); } .onboarding-card__header p { font-size: var(--fs-sm); color: var(--fg-1); margin: 0; line-height: 1.55; } .onboarding-card__header--centered { text-align: center; } .onboarding-success-check { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--success-bg); color: var(--success); margin: 0 auto var(--s-4); border: 2px solid rgba(16, 185, 129, 0.35); } /* Summary block on done page */ .onboarding-summary { margin-top: var(--s-6); padding: var(--s-5); background: var(--bg-2); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: var(--s-3); } .onboarding-summary__row { display: flex; gap: var(--s-4); align-items: baseline; font-size: var(--fs-sm); } .onboarding-summary__label { min-width: 120px; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-xs); font-weight: 500; } .onboarding-summary__value { color: var(--fg-0); flex: 1; line-height: 1.5; } /* Coming-soon placeholder (Phase 3) */ .coming-soon { padding: var(--s-8); text-align: center; background: var(--bg-2); border: 1px dashed var(--border); border-radius: var(--radius-lg); } .coming-soon__icon { color: var(--accent); opacity: 0.75; margin-bottom: var(--s-3); display: flex; justify-content: center; } .coming-soon h2 { font-size: var(--fs-lg); font-weight: 600; color: var(--fg-0); margin: 0 0 var(--s-2); } .coming-soon p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; } /* Form actions and button variants */ .form-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-top: var(--s-2); } .form-actions--centered { justify-content: center; } .form-field__optional { font-weight: 400; color: var(--fg-2); font-size: var(--fs-xs); margin-left: 4px; } .btn--ghost { background: transparent; border-color: transparent; color: var(--fg-2); } .btn--ghost:hover { background: var(--bg-2); color: var(--fg-0); } .btn--lg { height: 44px; padding: 0 20px; font-size: var(--fs-md); font-weight: 500; } .btn.is-loading { cursor: progress; opacity: 0.85; } /* ---- Prompt generator — intro + review ---- */ .generator-preview { padding: var(--s-5); background: var(--bg-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-5); } .generator-preview__row { display: flex; gap: var(--s-4); align-items: baseline; font-size: var(--fs-sm); } .generator-preview__label { min-width: 80px; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-xs); font-weight: 500; } .generator-preview__value { color: var(--fg-0); flex: 1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .platform-chip--compact { padding: 3px 8px; font-size: var(--fs-xs); } [data-generator-label] { transition: opacity 180ms ease; } .generator-hint { max-width: 340px; margin-left: auto; margin-right: auto; } /* Prompt list */ .prompt-bulk-actions { display: flex; gap: var(--s-2); align-items: center; padding-bottom: var(--s-3); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--s-2); } .prompt-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); } .prompt-row { display: grid; grid-template-columns: 24px 1fr; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--bg-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); transition: border-color var(--t-fast), background var(--t-fast); } .prompt-row:hover { border-color: var(--border); } .prompt-row--consensus { border-color: var(--accent-border); background: linear-gradient(90deg, var(--accent-bg) 0%, var(--bg-2) 30%); } .prompt-row__check { display: flex; align-items: center; justify-content: center; padding-top: 3px; } .prompt-row__check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; } .prompt-row__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .prompt-row__text { color: var(--fg-0); font-size: var(--fs-md); line-height: 1.4; padding: 2px 4px; border-radius: 3px; outline: none; cursor: text; transition: background var(--t-fast); } .prompt-row__text:hover { background: var(--bg-3); } .prompt-row__text:focus { background: var(--bg-3); box-shadow: 0 0 0 2px var(--accent-border); } .prompt-row__meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .prompt-chip { display: inline-flex; align-items: center; padding: 2px 8px; font-size: 10px; font-weight: 500; border-radius: 999px; background: var(--bg-3); color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.05em; } .prompt-chip--consensus { background: var(--accent-bg); color: #93c5fd; border: 1px solid var(--accent-border); } .prompt-chip--source { text-transform: none; letter-spacing: 0; font-weight: 400; } .prompt-chip--comparison { background: rgba(34, 211, 238, 0.1); color: #67e8f9; } .prompt-chip--pricing { background: rgba(16, 185, 129, 0.1); color: #6ee7b7; } .prompt-chip--local { background: rgba(245, 158, 11, 0.1); color: #fcd34d; } .prompt-chip--problem { background: rgba(168, 85, 247, 0.1); color: #d8b4fe; } .prompt-chip--product { background: rgba(244, 114, 182, 0.1); color: #f9a8d4; } /* ============================================================================ First-scan empty state (dashboard before first scan data arrives) ============================================================================ */ .first-scan-card { display: flex; align-items: flex-start; gap: var(--s-5); padding: var(--s-6) var(--s-8); background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); } .first-scan-card__pulse { position: relative; width: 24px; height: 24px; flex-shrink: 0; margin-top: 4px; } .first-scan-card__dot { position: absolute; inset: 6px; background: var(--accent); border-radius: 50%; } .first-scan-card__dot-ring { position: absolute; inset: 0; border: 2px solid var(--accent); border-radius: 50%; opacity: 0.6; animation: pulse-ring 2s ease-out infinite; } @keyframes pulse-ring { 0% { transform: scale(0.6); opacity: 0.7; } 80% { transform: scale(1.4); opacity: 0; } 100% { transform: scale(1.4); opacity: 0; } } .first-scan-card__body h2 { font-size: var(--fs-xl); font-weight: 600; color: var(--fg-0); margin: 0 0 var(--s-3); } .first-scan-card__body p { font-size: var(--fs-sm); color: var(--fg-1); line-height: 1.55; margin: 0 0 var(--s-2); } .first-scan-card__body p:last-child { margin-bottom: 0; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); } @media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } } .clean-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .clean-list code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: var(--fs-sm); color: var(--fg-0); background: var(--bg-3); padding: 2px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); } .measure-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); } @media (max-width: 720px) { .measure-grid { grid-template-columns: 1fr; } } .measure-card { padding: var(--s-5); background: var(--bg-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); } .measure-card__title { font-size: var(--fs-sm); font-weight: 600; color: var(--fg-0); margin-bottom: 6px; } .measure-card__body { font-size: var(--fs-sm); color: var(--fg-1); line-height: 1.5; } .measure-card { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: var(--s-4); row-gap: 2px; align-items: start; align-content: center; } .measure-card__icon { --mc: var(--accent); grid-row: 1 / 3; align-self: center; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: color-mix(in oklab, var(--mc) 15%, transparent); color: var(--mc); border: 1px solid color-mix(in oklab, var(--mc) 25%, transparent); } .measure-card__icon svg { width: 22px; height: 22px; } .measure-card__title { margin-bottom: 0; } /* ---- Social auth buttons ---- */ .btn-social { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 42px; padding: 0 16px; font-size: var(--fs-md); font-weight: 500; border-radius: var(--radius-md); cursor: pointer; text-decoration: none; transition: background var(--t-fast), border-color var(--t-fast); margin-bottom: var(--s-4); } .btn-social--google { background: #ffffff; color: #1f1f1f; border: 1px solid rgba(255, 255, 255, 0.15); } .btn-social--google:hover { background: #f5f5f5; } .btn-social--magic { background: var(--bg-2); color: var(--fg-0); border: 1px solid var(--border); } .btn-social--magic:hover { background: var(--bg-3); border-color: var(--border-strong); } .btn-social--magic svg { color: var(--accent); } .auth-divider { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-4) 0 var(--s-5); color: var(--fg-2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); } /* ---- Advanced accordion (disclosure) ---- */ .form-advanced { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-2); margin: var(--s-2) 0; transition: border-color var(--t-fast); } .form-advanced[open] { border-color: var(--border); } .form-advanced > summary { padding: var(--s-3) var(--s-4); cursor: pointer; list-style: none; position: relative; display: flex; flex-direction: column; gap: 2px; user-select: none; } .form-advanced > summary::-webkit-details-marker { display: none; } .form-advanced > summary::after { content: "+"; position: absolute; right: var(--s-4); top: 50%; transform: translateY(-50%); font-size: 18px; line-height: 1; color: var(--fg-2); font-weight: 400; transition: transform var(--t-fast); } .form-advanced[open] > summary::after { content: "−"; } .form-advanced__title { font-size: var(--fs-sm); font-weight: 500; color: var(--fg-0); } .form-advanced__subtitle { font-size: var(--fs-xs); color: var(--fg-2); } .form-advanced > *:not(summary) { padding: 0 var(--s-4) var(--s-4); } .form-advanced .form-field + .form-field { margin-top: var(--s-4); } .form-advanced code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.85em; background: var(--bg-3); padding: 1px 4px; border-radius: var(--radius-sm); color: var(--fg-1); } /* ============================================================================ Polish pass — ambient background, fade-in stagger, platform chips, keyboard-shortcut modal, settings form container ============================================================================ */ /* Ambient gradient mesh — five soft radial glows for depth. Applied to ALL logged-in pages (via body), not just the dashboard. Slow hue-subtle drift gives the page a pulse without calling attention. */ body { background: radial-gradient(800px circle at 10% -10%, rgba(59, 130, 246, 0.12), transparent 55%), radial-gradient(600px circle at 90% 10%, rgba(168, 85, 247, 0.09), transparent 60%), radial-gradient(700px circle at 50% 100%, rgba(34, 211, 238, 0.06), transparent 55%), radial-gradient(500px circle at 5% 70%, rgba(16, 185, 129, 0.05), transparent 60%), radial-gradient(900px circle at 95% 80%, rgba(244, 114, 182, 0.04), transparent 60%), var(--bg-0); background-attachment: fixed; } /* Fade-in intro (skippable via prefers-reduced-motion). */ .fade-in { opacity: 0; transform: translateY(8px); animation: fade-in-up 520ms cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: calc(var(--stagger, 0) * 80ms); } .no-motion .fade-in { opacity: 1; transform: none; animation: none; } @keyframes fade-in-up { to { opacity: 1; transform: translateY(0); } } /* Narrow container for single-column pages (settings, about). */ .container--narrow { max-width: 640px; } /* Platform chips (row of the 5 AI platforms) */ .platform-row { display: flex; flex-wrap: wrap; gap: var(--s-2); } .platform-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: var(--fs-sm); font-weight: 500; color: var(--fg-0); background: var(--bg-1); border: 1px solid var(--border); border-radius: 999px; transition: transform var(--t-fast), border-color var(--t-fast); } .platform-chip:hover { transform: translateY(-1px); border-color: var(--border-strong); } .platform-chip__dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04); } /* Subtle phase-cycle transition */ .first-scan-card__body p[data-phase-cycle] { color: var(--fg-0); font-weight: 500; min-height: 1.5em; margin-bottom: var(--s-3); } /* Settings page */ .settings-breadcrumb { margin-bottom: var(--s-5); font-size: var(--fs-sm); } .settings-breadcrumb a { color: var(--fg-2); text-decoration: none; transition: color var(--t-fast); } .settings-breadcrumb a:hover { color: var(--fg-0); } .settings-form { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--s-8); } .hero--compact { padding-bottom: var(--s-5); } /* Keyboard shortcut hint (inline kbd) */ .kbd-hint { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; font-weight: 600; color: var(--fg-1); background: var(--bg-2); border: 1px solid var(--border); border-radius: 3px; line-height: 1; margin: 0 2px; } /* Keyboard shortcut modal */ .shortcut-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; animation: fade-in 180ms ease-out; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .shortcut-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .shortcut-modal__card { position: relative; width: 100%; max-width: 380px; margin: 0 var(--s-4); padding: var(--s-6); background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); animation: modal-pop 260ms cubic-bezier(0.16, 1, 0.3, 1); } @keyframes modal-pop { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .shortcut-modal__title { font-size: var(--fs-md); font-weight: 600; color: var(--fg-0); margin-bottom: var(--s-4); } .shortcut-row { display: flex; align-items: center; gap: var(--s-2); padding: 6px 0; font-size: var(--fs-sm); color: var(--fg-1); } .shortcut-row span { margin-left: auto; } .shortcut-row kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 600; color: var(--fg-0); background: var(--bg-3); border: 1px solid var(--border); border-radius: 4px; line-height: 1; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); } /* ============================================================================ Signature moments — wordmark shimmer + scan visualization ============================================================================ */ /* Shimmer sweep across the "Cited" wordmark on page load, once. White streak travels left-to-right across a blue-to-white-to-blue gradient, then settles to solid fg color. Respects reduced-motion. */ .topbar__logo-text { position: relative; } .topbar__logo-shimmer { background: linear-gradient( 90deg, var(--fg-0) 0%, var(--fg-0) 30%, #ffffff 50%, var(--fg-0) 70%, var(--fg-0) 100% ); background-size: 300% 100%; background-position: 120% 0; -webkit-background-clip: text; background-clip: text; color: transparent; animation: wordmark-shimmer 1400ms cubic-bezier(0.16, 1, 0.3, 1) 280ms 1 forwards; } @keyframes wordmark-shimmer { 0% { background-position: 120% 0; } 60% { background-position: -20% 0; } 100% { background-position: -20% 0; color: var(--fg-0); background: none; -webkit-text-fill-color: var(--fg-0); } } .no-motion .topbar__logo-shimmer { animation: none; color: var(--fg-0); background: none; -webkit-text-fill-color: var(--fg-0); } /* Scan visualization — 5 platform dots with animated data streams from the Cited source. Replaces the simple pulse on the first-scan card. */ .scan-viz { width: 220px; height: 150px; flex-shrink: 0; } @media (max-width: 720px) { .scan-viz { width: 180px; height: 124px; } } .scan-viz__path { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; } .scan-viz__source { fill: url(#scan-viz-source-grad); } .scan-viz__source-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; animation: scan-source-glow 2.2s ease-in-out infinite; } @keyframes scan-source-glow { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.08; } } .scan-viz__dot--out { fill: var(--accent); filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.6)); } .scan-viz__dot--cg { fill: var(--platform-chatgpt); filter: drop-shadow(0 0 4px rgba(16, 163, 127, 0.55)); } .scan-viz__dot--cl { fill: var(--platform-claude); filter: drop-shadow(0 0 4px rgba(204, 120, 92, 0.55)); } .scan-viz__dot--ge { fill: var(--platform-gemini); filter: drop-shadow(0 0 4px rgba(66, 133, 244, 0.55)); } .scan-viz__dot--pp { fill: var(--platform-perplexity); filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.55)); } .scan-viz__dot--ao { fill: var(--platform-google-ai-overview); filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.55)); } .scan-viz__target--cg { fill: var(--platform-chatgpt); } .scan-viz__target--cl { fill: var(--platform-claude); } .scan-viz__target--ge { fill: var(--platform-gemini); } .scan-viz__target--pp { fill: var(--platform-perplexity); } .scan-viz__target--ao { fill: var(--platform-google-ai-overview); } .no-motion .scan-viz__source-ring { animation: none; opacity: 0.3; } /* Tracking info card (replaces the 2-column grid) */ .tracking-card { background: var(--bg-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--s-5) var(--s-6); display: flex; flex-direction: column; gap: 0; } .tracking-row { display: grid; grid-template-columns: 220px 1fr; gap: var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--border-subtle); align-items: baseline; } .tracking-row:first-child { border-top: 0; padding-top: 0; } .tracking-row:last-child { padding-bottom: 0; } .tracking-row--wrap { align-items: flex-start; } .tracking-row__label { color: var(--fg-2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; } .tracking-row__value { color: var(--fg-0); font-size: var(--fs-md); line-height: 1.5; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .tracking-row__value a { color: var(--fg-0); text-decoration: none; } .tracking-row__value a:hover { color: var(--accent); } @media (max-width: 720px) { .tracking-row { grid-template-columns: 1fr; gap: 4px; } } .mention-chip { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: var(--fs-xs); color: var(--fg-0); background: var(--bg-3); padding: 3px 9px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); } /* Platform grid (replaces pill row) */ .platform-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3); } @media (max-width: 720px) { .platform-grid { grid-template-columns: repeat(2, 1fr); } } .platform-card { --pc: var(--accent); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: var(--s-5) var(--s-3); background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--fg-1); transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), border-color 240ms, box-shadow 240ms; overflow: hidden; } .platform-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: radial-gradient(80% 80% at 50% 0%, color-mix(in oklab, var(--pc) 30%, transparent), transparent 70%); opacity: 0; transition: opacity 260ms ease; pointer-events: none; } .platform-card:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--pc) 45%, var(--border)); box-shadow: 0 8px 24px -8px color-mix(in oklab, var(--pc) 30%, transparent); } .platform-card:hover::before { opacity: 1; } .platform-card:hover .platform-card__logo { transform: scale(1.08) rotate(-3deg); } .platform-card__logo { width: 28px; height: 28px; color: var(--pc); transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 1; } .platform-card__name { font-size: var(--fs-sm); font-weight: 500; color: var(--fg-0); text-align: center; line-height: 1.2; z-index: 1; } .platform-card__status { position: absolute; top: 10px; right: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 0 color-mix(in oklab, var(--pc) 60%, transparent); animation: platform-status-breathe 2.4s ease-in-out infinite; } @keyframes platform-status-breathe { 0%, 100% { opacity: 0.5; box-shadow: 0 0 0 0 color-mix(in oklab, var(--pc) 50%, transparent); } 50% { opacity: 1; box-shadow: 0 0 0 5px color-mix(in oklab, var(--pc) 0%, transparent); } } .platform-card--chatgpt .platform-card__status { animation-delay: 0s; } .platform-card--claude .platform-card__status { animation-delay: 0.48s; } .platform-card--gemini .platform-card__status { animation-delay: 0.96s; } .platform-card--perplexity .platform-card__status { animation-delay: 1.44s; } .platform-card--google-ai-overview .platform-card__status { animation-delay: 1.92s; } .no-motion .platform-card__status { animation: none; opacity: 0.5; } /* ============================================================================ Topbar utility cluster (Feedback / Help / Docs) ============================================================================ */ .util-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; background: var(--bg-2); border: 1px solid var(--border); color: var(--fg-0); font-size: var(--fs-sm); font-weight: 500; border-radius: var(--radius-md); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); } .util-btn:hover { background: var(--bg-3); border-color: var(--border-strong); } .util-btn__kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: var(--bg-1); color: var(--fg-2); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; font-weight: 600; border-radius: 3px; line-height: 1; } .util-link { font-size: var(--fs-sm); color: var(--fg-2); text-decoration: none; padding: 6px 4px; transition: color var(--t-fast); } .util-link:hover { color: var(--fg-0); } /* ============================================================================ User menu — bottom-left fixed pill + popup ============================================================================ */ .user-menu { position: fixed; bottom: var(--s-4); left: var(--s-4); z-index: 50; } .user-menu__trigger { display: inline-flex; align-items: center; gap: var(--s-2); padding: 6px 12px 6px 6px; max-width: 240px; background: var(--bg-1); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); box-shadow: var(--shadow-sm); } .user-menu__trigger:hover { background: var(--bg-2); border-color: var(--border-strong); box-shadow: var(--shadow-md); } .user-menu.is-open .user-menu__trigger { background: var(--bg-2); border-color: var(--accent-border); } .user-menu__avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%); color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0; } .user-menu__email { font-size: var(--fs-sm); color: var(--fg-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } .user-menu__caret { color: var(--fg-2); flex-shrink: 0; } .user-menu__popup { position: absolute; bottom: calc(100% + 8px); left: 0; min-width: 240px; padding: 6px; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5); animation: user-menu-pop 160ms cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; gap: 2px; } @keyframes user-menu-pop { from { opacity: 0; transform: translateY(4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .user-menu__item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-md); font-size: var(--fs-sm); color: var(--fg-1); background: transparent; border: 0; cursor: pointer; text-decoration: none; text-align: left; transition: background var(--t-fast), color var(--t-fast); } .user-menu__item:hover { background: var(--bg-2); color: var(--fg-0); } .user-menu__item svg { color: var(--fg-2); flex-shrink: 0; } .user-menu__item:hover svg { color: var(--fg-0); } .user-menu__item--destructive:hover { color: #fca5a5; } .user-menu__item--destructive:hover svg { color: #fca5a5; } .user-menu__item span { flex: 1; } .user-menu__kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: var(--bg-3); color: var(--fg-2); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; font-weight: 600; border-radius: 3px; line-height: 1; } .user-menu__divider { height: 1px; background: var(--border-subtle); margin: 4px 6px; } /* Defensive: [hidden] attr must always beat our display rules */ .user-menu__popup[hidden], .feedback-pop[hidden] { display: none; } /* Per-item hover animations — spring ease on the icon */ .user-menu__item svg { transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1); } .user-menu__item--settings:hover svg { transform: rotate(90deg); } .user-menu__item--theme:hover svg { transform: rotate(-18deg) scale(1.1); } .user-menu__item--shortcuts:hover svg { transform: scale(1.12); } .user-menu__item--homepage:hover svg { transform: translate(2px, -2px) scale(1.05); } .user-menu__item--onboarding:hover svg { transform: translateX(2px); } .user-menu__item--logout:hover svg { transform: translateX(3px); } /* ============================================================================ Feedback popover — anchored top-right under the button ============================================================================ */ .feedback-pop { position: fixed; top: calc(var(--topbar-h) + 8px); right: var(--s-5); /* JS overrides this on open to align with the Feedback button */ z-index: 60; opacity: 0; transform: translateY(-6px); transition: opacity 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .feedback-pop.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .feedback-pop__card { width: 380px; max-width: calc(100vw - var(--s-6) * 2); background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55); padding: 0; display: flex; flex-direction: column; overflow: hidden; } .feedback-pop__textarea { width: 100%; padding: 14px 16px; background: var(--bg-3); border: 0; color: var(--fg-0); font-family: inherit; font-size: var(--fs-sm); line-height: 1.55; resize: none; outline: none; } .feedback-pop__textarea::placeholder { color: var(--fg-3); } .feedback-pop__footer { display: flex; align-items: center; gap: var(--s-3); padding: 8px 8px 8px 12px; background: var(--bg-2); border-top: 1px solid var(--border-subtle); } .feedback-pop__help { flex: 1; font-size: var(--fs-xs); color: var(--fg-2); } .feedback-pop__help a { color: #93c5fd; text-decoration: none; } .feedback-pop__help a:hover { color: var(--fg-0); } .feedback-pop__send { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 12px; background: #ffffff; color: #18181b; border: 0; border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; transition: background var(--t-fast); } .feedback-pop__send:hover { background: #f1f1f2; } .feedback-pop__kbd { display: inline-flex; gap: 2px; } .feedback-pop__kbd kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; background: #f1f1f2; color: #71717a; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; font-weight: 600; border-radius: 3px; line-height: 1; border: 1px solid #e4e4e7; } /* Theme toggle button (sun/moon) — shows opposite icon based on active theme */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; margin-left: var(--s-1); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--fg-1); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); } .theme-toggle:hover { background: var(--bg-2); color: var(--fg-0); border-color: var(--border-strong); } .theme-toggle__sun, .theme-toggle__moon { display: none; transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1); } /* Show the icon of the action you'd take, not the state you're in: dark mode → sun (click to go light); light mode → moon (click to go dark). */ [data-theme="dark"] .theme-toggle__sun { display: block; } [data-theme="light"] .theme-toggle__moon { display: block; } /* Hover: quarter-turn wobble + scale-up for personality */ .theme-toggle:hover .theme-toggle__sun { transform: rotate(90deg) scale(1.08); } .theme-toggle:hover .theme-toggle__moon { transform: rotate(-18deg) scale(1.08); } /* Log-out chip: door stays, arrow slides right on hover */ .chip--logout__arrow { transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms; transform-origin: center; } .chip--logout:hover .chip--logout__arrow { transform: translateX(3px); } .chip--logout:hover svg { color: var(--accent); } /* Topbar C-mark: gradient shimmer replays on hover */ .topbar__logo:hover .topbar__logo-mark { animation: topbar-mark-shimmer 700ms cubic-bezier(0.16, 1, 0.3, 1); } @keyframes topbar-mark-shimmer { 0% { filter: brightness(1); transform: scale(1); } 50% { filter: brightness(1.3) saturate(1.2); transform: scale(1.08); } 100% { filter: brightness(1); transform: scale(1); } } /* Nav-link underline grows in from the left on hover */ .topbar__nav-link { position: relative; } .topbar__nav-link::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1); border-radius: 1px; } .topbar__nav-link:hover::after, .topbar__nav-link.is-active::after { transform: scaleX(1); } .topbar__nav-link:hover { background: transparent; } .topbar__nav-link.is-active { background: transparent; }