/* ============================================================ Zharkwave SEO Toolkit — design system Cloudflare-dashboard-inspired: dark sidebar/content, card-based panels, flat buttons, rounded pill badges. Dark mode is the default (matches the reference); a light mode is fully defined below and toggled via [data-theme] on . ============================================================ */ :root { /* ---- Dark mode (default) ---- */ --bg: #151414; --bg-elevated: #101010; --bg-panel: #101010; --bg-panel-2: #201f1f; --bg-hover: #272626; --border: #302f2f; --text: #f7f4ee; --text-dim: #9a9d9f; --text-faint: #6f7274; --brand: #1c46f2; --brand-hover: #3457f5; --brand-text: #ffffff; --pass: #35d399; --warn: #f5b942; --fail: #ef5a6f; --info: #6c8cff; --radius: 10px; --radius-sm: 6px; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4); /* One vertical rhythm for every page. Stacked blocks are spaced by flex `gap` on their container rather than per-element margins — margins were silently doing nothing between a .panel and a plain results
, which is why some pages read as cramped and others didn't. */ --stack-gap: 20px; } :root[data-theme="light"] { --bg: #ffffff; --bg-elevated: #ffffff; --bg-panel: #ffffff; --bg-panel-2: #f5f6f7; --bg-hover: #eef0f2; --border: #e3e5e8; --text: #212427; --text-dim: #6b6e70; --text-faint: #96999b; --brand: #1c46f2; --brand-hover: #1636c9; --brand-text: #ffffff; --pass: #1a9e6c; --warn: #b9790a; --fail: #c23a4c; --info: #3a5bd9; --shadow: 0 1px 2px rgba(33, 36, 39, 0.06); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif; } body { transition: background-color 0.15s ease, color 0.15s ease; } a { color: var(--info); } svg { display: block; } .app-shell { display: flex; min-height: 100vh; } /* ---------- Sidebar ---------- */ .sidebar { width: 240px; flex-shrink: 0; background: var(--bg-elevated); border-right: 1px solid var(--border); padding: 16px 12px; display: flex; flex-direction: column; gap: 6px; } .brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; } .brand .theme-toggle { margin-left: 4px; } .brand-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--brand); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .brand-mark svg { width: 15px; height: 15px; } .brand-name { font-weight: 700; font-size: 16px; letter-spacing: 0.1px; } .brand-sub { font-size: 12.5px; color: var(--text-dim); margin-top: -2px; } .nav-group { display: flex; flex-direction: column; gap: 1px; } .nav-group + .nav-group { margin-top: 14px; } .nav-group-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-faint); padding: 4px 10px 6px; } .nav { display: flex; flex-direction: column; gap: 1px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 14.5px; color: var(--text-dim); cursor: pointer; border: none; background: none; text-align: left; width: 100%; font-family: inherit; } .nav-item-icon { width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; opacity: 0.85; } .nav-item-icon svg { width: 16px; height: 16px; stroke: currentColor; } .nav-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-item:hover { background: var(--bg-hover); color: var(--text); } .nav-item.active { background: var(--bg-hover); color: var(--text); box-shadow: inset 2px 0 0 var(--brand); } .nav-item[disabled] { cursor: not-allowed; opacity: 0.5; } .nav-item[disabled]:hover { background: none; color: var(--text-dim); } .badge-soon { font-size: 11px; padding: 2px 6px; border-radius: 999px; background: var(--bg-panel-2); border: 1px solid var(--border); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.4px; flex-shrink: 0; } .sidebar-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text-dim); padding: 10px 8px 4px; border-top: 1px solid var(--border); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-panel-2); color: var(--text-dim); cursor: pointer; flex-shrink: 0; } .theme-toggle:hover { color: var(--text); border-color: var(--brand); } .theme-toggle svg { width: 15px; height: 15px; } .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: block; } :root[data-theme="light"] .theme-toggle .icon-moon { display: none; } /* ---------- Main ---------- */ .main { flex: 1; min-width: 0; padding: 30px 36px 60px; } /* Every view stacks its blocks with one consistent gap. Empty result containers are hidden so they don't leave a phantom gap before anything has been run. */ .main > section { display: flex; flex-direction: column; gap: var(--stack-gap); } .main > section > :empty { display: none; } /* The gap owns the spacing now — per-element margins would double it. */ .main > section > .panel + .panel { margin-top: 0; } .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .page-title { font-size: 24px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.2px; } .page-desc { color: var(--text-dim); font-size: 15px; margin: 0; max-width: 640px; } .panel { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .panel + .panel { margin-top: var(--stack-gap); } #projectsView, #projectTabBody { display: flex; flex-direction: column; gap: var(--stack-gap); } #projectsView > :empty, #projectTabBody > :empty { display: none; } #projectsView > .panel + .panel, #projectTabBody > .panel + .panel { margin-top: 0; } /* The title block and its tab row read as one unit — full stack spacing between them makes the tabs look detached from the project they belong to. */ #projectsView > .workspace-head + .workspace-tabs { margin-top: -6px; } /* These carry their own margins for use outside a flex stack; inside one the gap already handles it. */ #projectTabBody > .stat-cards { margin-top: 0; } .form-row { display: flex; gap: 10px; row-gap: 14px; flex-wrap: wrap; align-items: flex-end; } .form-row + .form-row { margin-top: 14px; } .field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 220px; } .field label { font-size: 13.5px; color: var(--text-dim); } input[type="text"], input[type="url"], input[type="password"], input[type="number"], input[type="email"], input[type="search"], select, textarea { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; color: var(--text); font-size: 15px; outline: none; font-family: inherit; } input[type="text"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="search"]:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(28, 70, 242, 0.18); } /** * No spinner on number inputs. * * The little up/down stepper is a tiny hit target that appears on hover, * shifts the text as it does, and steps by 1 — useless for a field like * "Max pages" where the useful jumps are 50 at a time. Every number field * here is quicker to type than to click. * * Arrow keys still increment the value: this hides the control, it does not * change the input's behaviour, and the field stays type="number" so mobile * still gets the numeric keypad and the browser still validates it. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; appearance: textfield; } textarea { width: 100%; resize: vertical; line-height: 1.5; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; } select { appearance: none; } .btn { background: var(--brand); color: var(--brand-text); border: none; border-radius: var(--radius-sm); padding: 10px 18px; font-size: 15px; font-weight: 600; cursor: pointer; align-self: flex-end; } .btn:hover { background: var(--brand-hover); } .btn:disabled { opacity: 0.6; cursor: not-allowed; } .btn-secondary { background: var(--bg-panel-2); border: 1px solid var(--border); color: var(--text); } .btn-secondary:hover { background: var(--bg-hover); } .hint { font-size: 13px; color: var(--text-dim); margin-top: 8px; } /* ---------- Score / summary ---------- */ .summary-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .score-circle { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; flex-shrink: 0; border: 4px solid var(--border); } .score-circle.good { border-color: var(--pass); color: var(--pass); } .score-circle.mid { border-color: var(--warn); color: var(--warn); } .score-circle.bad { border-color: var(--fail); color: var(--fail); } .summary-stats { display: flex; gap: 18px; flex-wrap: wrap; } .stat { display: flex; flex-direction: column; gap: 2px; } .stat-value { font-size: 19.5px; font-weight: 700; } .stat-label { font-size: 12.5px; color: var(--text-dim); } /* ---------- Category filter chips ---------- */ .filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-panel-2); font-size: 14px; color: var(--text-dim); cursor: pointer; user-select: none; } .chip input { accent-color: var(--brand); } .chip.active { color: var(--text); border-color: var(--brand); } /* ---------- Checks list ---------- */ .check-group { margin-top: 18px; } .check-group-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-faint); margin: 0 0 8px; } .check-item { display: flex; gap: 12px; padding: 11px 4px; border-top: 1px solid var(--border); } .check-item:first-child { border-top: none; } .check-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; } .check-dot.pass { background: var(--pass); } .check-dot.warn { background: var(--warn); } .check-dot.fail { background: var(--fail); } .check-dot.info { background: var(--info); } .check-body { flex: 1; min-width: 0; } .check-label { font-size: 15px; font-weight: 600; } .check-message { font-size: 14px; color: var(--text-dim); margin-top: 2px; line-height: 1.5; } .check-recommendation { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--bg-panel-2); border: 1px solid var(--border); font-size: 13.5px; color: var(--text-dim); line-height: 1.5; } .check-recommendation strong { color: var(--text); font-weight: 600; } .kw-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .kw-pill { font-size: 13px; padding: 3px 9px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); color: var(--text-dim); } .pill { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--bg-panel-2); border: 1px solid var(--border); color: var(--text-dim); } .empty-state { color: var(--text-dim); font-size: 14.5px; padding: 30px 10px; text-align: center; } .error-box { background: rgba(239, 90, 111, 0.12); border: 1px solid var(--fail); color: var(--fail); padding: 12px 14px; border-radius: var(--radius-sm); font-size: 14.5px; } .demo-banner { background: rgba(245, 185, 66, 0.12); border: 1px solid var(--warn); color: var(--warn); padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 14px; } .coming-soon { text-align: center; padding: 60px 20px; color: var(--text-dim); } .coming-soon h2 { color: var(--text); font-size: 18.5px; } /* ---------- Actions row / sub-panels ---------- */ .actions-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); } .sub-panel { margin-top: 14px; background: var(--bg-panel-2); } /* ---------- Mode toggle (Landing Page: Optimize vs Write new) ---------- */ .mode-toggle { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius); background: var(--bg-panel-2); border: 1px solid var(--border); margin-bottom: 16px; } .mode-toggle-btn { border: none; background: transparent; color: var(--text-dim); font-size: 14.5px; font-weight: 600; padding: 8px 14px; border-radius: 7px; cursor: pointer; } .mode-toggle-btn.active { background: var(--brand); color: var(--brand-text); } /* ---------- Optimization suggestion cards (Landing Page: optimize mode) ---------- */ .opt-area { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); } .opt-area:first-child { margin-top: 0; padding-top: 0; border-top: none; } .opt-area-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .opt-area-title { font-size: 15.5px; font-weight: 700; } .opt-area-reasons { font-size: 14px; color: var(--text-dim); margin-bottom: 10px; line-height: 1.5; } .opt-suggestion { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); background: var(--bg-panel-2); border: 1px solid var(--border); margin-top: 7px; } .opt-suggestion-text { flex: 1; font-size: 14.5px; line-height: 1.5; word-break: break-word; } .opt-suggestion-text .opt-sub { display: block; font-size: 13px; color: var(--text-dim); margin-top: 2px; } .opt-copy-btn { flex-shrink: 0; border: 1px solid var(--border); background: var(--bg); color: var(--text-dim); font-size: 13px; padding: 5px 10px; border-radius: var(--radius-sm); cursor: pointer; } .opt-copy-btn:hover { color: var(--text); border-color: var(--brand); } .opt-copy-btn.copied { color: var(--pass); border-color: var(--pass); } .opt-schema-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; white-space: pre-wrap; word-break: break-word; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 6px; max-height: 260px; overflow-y: auto; } /* ---------- Image picker (Article / Landing generators) ---------- */ .image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 8px; } .image-thumb { display: block; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid var(--border); cursor: pointer; background: var(--bg); } .image-thumb.selected { border-color: var(--brand); } .image-thumb img { display: block; width: 100%; height: 84px; object-fit: cover; } .image-credit { display: block; font-size: 11.5px; color: var(--text-dim); padding: 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- Device tabs (reused: SERP preview, social preview simulator) ---------- */ .device-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius); background: var(--bg-panel-2); border: 1px solid var(--border); margin-bottom: 14px; flex-wrap: wrap; } .device-tab { border: none; background: transparent; color: var(--text-dim); font-size: 14px; font-weight: 600; padding: 7px 13px; border-radius: 7px; cursor: pointer; white-space: nowrap; } .device-tab.active { background: var(--brand); color: var(--brand-text); } /* ---------- Google SERP preview ---------- */ .serp-card { max-width: 600px; font-family: arial, sans-serif; } .serp-card[data-device="mobile"] { max-width: 380px; } .serp-url-row { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; } .serp-favicon { width: 26px; height: 26px; border-radius: 50%; background: var(--bg-panel-2); border: 1px solid var(--border); object-fit: contain; padding: 4px; flex-shrink: 0; } .serp-site-name { font-size: 15.5px; color: var(--text); line-height: 1.3; } .serp-url { font-size: 13.5px; color: var(--text-dim); line-height: 1.3; overflow-wrap: anywhere; } .serp-title { font-size: 22px; color: var(--info); line-height: 1.3; margin-top: 2px; overflow-wrap: break-word; } .serp-card[data-device="mobile"] .serp-title { font-size: 19.5px; } .serp-desc { font-size: 15.5px; color: var(--text-dim); line-height: 1.55; margin-top: 4px; overflow-wrap: break-word; } /* ---------- Generic link preview (OG / Twitter Card unfurl) ---------- */ .link-preview-tabs { display: flex; gap: 8px; margin-bottom: 12px; } .link-preview-card { max-width: 440px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-panel-2); } .link-preview-image { width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; background: var(--bg); display: block; } .link-preview-body { padding: 10px 12px; } .link-preview-domain { font-size: 12.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.4px; } .link-preview-title { font-size: 15.5px; font-weight: 700; margin-top: 3px; line-height: 1.35; } .link-preview-desc { font-size: 14px; color: var(--text-dim); margin-top: 3px; line-height: 1.5; } .link-preview-missing { font-size: 13.5px; color: var(--text-faint); font-style: italic; } /* ---------- Social media preview simulator ---------- */ .social-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; } .social-tab { border: 1px solid var(--border); background: var(--bg-panel-2); color: var(--text-dim); font-size: 13.5px; font-weight: 600; padding: 7px 12px; border-radius: 999px; cursor: pointer; } .social-tab.active { background: var(--brand); border-color: var(--brand); color: var(--brand-text); } .social-card { max-width: 420px; border-radius: 12px; overflow: hidden; background: var(--bg-panel-2); border: 1px solid var(--border); } .social-card-image { width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; background: var(--bg); display: block; } .social-card-body { padding: 10px 12px; } .social-card-domain { font-size: 12.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.3px; } .social-card-title { font-size: 16px; font-weight: 700; margin-top: 4px; line-height: 1.35; } .social-card-desc { font-size: 14px; color: var(--text-dim); margin-top: 4px; line-height: 1.5; } /* WhatsApp: rounded chat-bubble chrome around the card */ .social-card--whatsapp { max-width: 340px; background: var(--bg-hover); border-radius: 4px 14px 14px 14px; padding: 8px; border: none; } .social-card--whatsapp .social-card-image { border-radius: 8px 8px 0 0; aspect-ratio: 1.6 / 1; } .social-card--whatsapp .social-card-body { background: var(--bg-panel); border-radius: 0 0 8px 8px; padding: 8px 10px; } .social-card--whatsapp .social-card-title { font-size: 15px; } .social-card--whatsapp .social-msg { font-size: 14.5px; color: var(--text); padding: 2px 6px 8px; } /* Facebook: square-ish card, domain above title */ .social-card--facebook { border-radius: 8px; } /* Twitter / X: fully rounded corners */ .social-card--twitter { border-radius: 16px; } .social-card--twitter .social-card-image { aspect-ratio: 2 / 1; } /* Threads: minimal, tighter card closer to a chat attachment */ .social-card--threads { max-width: 380px; border-radius: 18px; } .social-card--threads .social-card-image { aspect-ratio: 1 / 1; max-width: 120px; float: left; margin-right: 10px; border-radius: 10px; } .social-card--threads .social-card-body { padding: 10px 12px; overflow: auto; } /* Reddit: horizontal row, small thumbnail on the left */ .social-card--reddit { display: flex; align-items: stretch; max-width: 460px; border-radius: 8px; } .social-card--reddit .social-card-image { width: 96px; height: 96px; flex-shrink: 0; aspect-ratio: auto; border-radius: 8px 0 0 8px; } .social-card--reddit .social-card-body { padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; } .social-card--reddit .social-card-title { font-size: 15px; } /* ---------- Heading outline (proper heading structure) ---------- */ .heading-outline { margin-top: 8px; } .heading-outline-row { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; font-size: 14px; color: var(--text-dim); } .heading-outline-tag { flex-shrink: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 700; color: var(--info); background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; min-width: 26px; text-align: center; } .heading-outline-text { color: var(--text); overflow-wrap: anywhere; } .print-header { display: none; } /* ---------- Print / PDF export ---------- */ @media print { .sidebar, .no-print, #auditForm, .panel > form { display: none !important; } .app-shell { display: block; } .main { padding: 0; } body, .app-shell, .main { background: #ffffff; } .panel { background: #ffffff; border: none; padding: 0; box-shadow: none; } .print-header { display: block; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid #111; } .print-brand { font-size: 17.5px; font-weight: 700; color: #000; } .print-meta { font-size: 12.5px; color: #444; margin-top: 2px; } * { color: #111 !important; } .check-dot.pass { background: #1a9e6c !important; } .check-dot.warn { background: #b9790a !important; } .check-dot.fail { background: #c23a4c !important; } .check-dot.info { background: #3a5bd9 !important; } .check-item, .check-group { break-inside: avoid; } .score-circle { border-color: #111 !important; } } .spinner { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: white; border-radius: 50%; display: inline-block; animation: spin 0.7s linear infinite; vertical-align: -3px; margin-right: 6px; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 760px) { .app-shell { flex-direction: column; } .sidebar { width: 100%; flex-direction: column; } .sidebar-footer { display: flex; } .main { padding: 20px; } } /* ============================================================ v2 components — Cloudflare dashboard conventions ------------------------------------------------------------ Cloudflare's dashboard is data-dense but calm. The patterns applied consistently below: - Severity/status reads as a soft tinted pill (colour-mix against the surface), never a loud solid block. - Tables use small uppercase letter-spaced headers, hairline row separators, right-aligned numerics, and a hover tint. - Cards are flat: 1px border, small radius, no drop shadow. - Colour is reserved for state and the single primary action; everything else is greyscale so the data stands out. - Generous vertical rhythm, restrained type scale. ============================================================ */ /* ---------- Buttons: small + danger variants ---------- */ .btn-sm { padding: 5px 11px; font-size: 13.5px; border-radius: var(--radius-sm); } .btn.danger, .btn-secondary.danger { color: var(--fail); border-color: color-mix(in srgb, var(--fail) 35%, var(--border)); } .btn.danger:hover, .btn-secondary.danger:hover { background: color-mix(in srgb, var(--fail) 12%, transparent); } /* ---------- Loading / empty rows ---------- */ .loading-row { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--text-dim); padding: 6px 0; } /* ---------- Severity pills ---------- Tinted, not solid — Cloudflare uses these to mark state without the badge itself competing with the content for attention. */ .sev-badge { display: inline-block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.045em; padding: 2px 7px; border-radius: 4px; border: 1px solid transparent; white-space: nowrap; } .sev-critical, .sev-high { color: var(--fail); background: color-mix(in srgb, var(--fail) 13%, transparent); border-color: color-mix(in srgb, var(--fail) 28%, transparent); } .sev-medium { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); border-color: color-mix(in srgb, var(--warn) 30%, transparent); } .sev-low { color: var(--text-dim); background: var(--bg-panel-2); border-color: var(--border); } /* ---------- Score pill (compact score in tables/cards) ---------- */ .score-pill { display: inline-block; min-width: 34px; text-align: center; font-size: 13.5px; font-weight: 700; padding: 3px 8px; border-radius: 5px; border: 1px solid transparent; } .score-pill.pass { color: var(--pass); background: color-mix(in srgb, var(--pass) 13%, transparent); border-color: color-mix(in srgb, var(--pass) 28%, transparent); } .score-pill.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); border-color: color-mix(in srgb, var(--warn) 30%, transparent); } .score-pill.fail { color: var(--fail); background: color-mix(in srgb, var(--fail) 13%, transparent); border-color: color-mix(in srgb, var(--fail) 28%, transparent); } /* ---------- Data tables ---------- */ .table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); } .data-table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .data-table thead th { text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--bg-panel-2); white-space: nowrap; position: sticky; top: 0; } .data-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover td { background: var(--bg-hover); } .data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .data-table .truncate { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .data-table .you-col { background: color-mix(in srgb, var(--brand) 7%, transparent); } .data-table td.winner { color: var(--pass); font-weight: 600; } /* ---------- Findings (site audit) ---------- */ .finding { padding: 14px 0; border-bottom: 1px solid var(--border); } .finding:last-of-type { border-bottom: none; } .finding-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .finding-label { font-size: 15px; font-weight: 600; color: var(--text); } .finding-reach { font-size: 13px; color: var(--text-faint); margin-left: auto; white-space: nowrap; } .finding-message { font-size: 14px; color: var(--text-dim); margin: 5px 0 0 21px; line-height: 1.5; } .finding .check-recommendation { margin-left: 21px; } .finding-sample { margin: 8px 0 0 21px; } .finding-sample summary { font-size: 13.5px; color: var(--brand); cursor: pointer; user-select: none; } .finding-sample summary:hover { text-decoration: underline; } .finding-sample ul { margin: 8px 0 0; padding-left: 16px; font-size: 13.5px; color: var(--text-dim); line-height: 1.7; overflow-wrap: anywhere; } /* ---------- Project cards ---------- */ .project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; } .project-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; background: var(--bg-elevated); transition: border-color 0.12s ease; } .project-card:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); } .project-card-head { display: flex; align-items: flex-start; gap: 10px; } .project-card-head > div:first-child { flex: 1; min-width: 0; } /* Compact connection status — a small dot and a label, not a big circle. Matches how Cloudflare marks the state of an integration. */ .status-row { display: flex; align-items: center; gap: 12px; } .status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); } .status-dot.on { background: var(--pass); color: var(--pass); } .status-dot.off { background: var(--text-faint); color: var(--text-faint); } .project-card-name { font-size: 15.5px; font-weight: 600; color: var(--text); } .project-card-url { font-size: 13px; color: var(--text-faint); margin-top: 2px; overflow-wrap: anywhere; } .project-card-meta { font-size: 13px; color: var(--text-dim); margin-top: 10px; } .project-card-actions { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; } /* ---------- Diff (what changed between audits) ---------- */ .diff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 18px; } .diff-row { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--text); padding: 4px 0; line-height: 1.5; } .diff-row .check-dot { margin-top: 5px; flex-shrink: 0; } .diff-meta { color: var(--text-faint); font-size: 13px; } /* ---------- Sparkline ---------- */ .sparkline { width: 100%; height: 90px; display: block; margin-top: 10px; overflow: visible; } /* ---------- Rank movement ---------- */ .rank-up { color: var(--pass); font-weight: 600; } .rank-down { color: var(--fail); font-weight: 600; } /* ---------- Plain lists ---------- */ .plain-list { margin: 10px 0 0; padding-left: 18px; font-size: 14px; color: var(--text-dim); line-height: 1.8; overflow-wrap: anywhere; } .plain-list strong { color: var(--text); } /* ---------- Setup steps (numbered instructions) ---------- */ .setup-steps { margin: 10px 0 0; padding-left: 20px; font-size: 14.5px; color: var(--text-dim); line-height: 1.9; } .setup-steps strong { color: var(--text); } .inline-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; color: var(--text); overflow-wrap: anywhere; } /* ---------- Code output ---------- */ .code-output { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.6; background: var(--bg-panel-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; resize: vertical; margin-top: 10px; } .code-output:focus { outline: none; border-color: var(--brand); } /* ---------- Schema field grid ---------- */ .schema-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; } .schema-grid .span-2 { grid-column: 1 / -1; } /* ---------- Email preview ---------- */ .email-preview { width: 100%; height: 520px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; margin-top: 10px; } /* ---------- Responsive ---------- */ @media (max-width: 720px) { .project-grid { grid-template-columns: 1fr; } .data-table .truncate { max-width: 180px; } .finding-reach { margin-left: 0; width: 100%; } } /* ============================================================ v2.1 — project workspace, charts, and full-detail lists ============================================================ */ /* ---------- Workspace header ---------- */ .workspace-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .btn-back { background: none; border: 1px solid var(--border); color: var(--text-dim); border-radius: var(--radius-sm); padding: 6px 12px; font-size: 14px; cursor: pointer; font-family: inherit; flex-shrink: 0; } .btn-back:hover { color: var(--text); border-color: var(--brand); } .workspace-title { min-width: 0; flex: 1; } .workspace-title h2 { margin: 0; font-size: 20.5px; font-weight: 700; letter-spacing: -0.2px; } .workspace-url { font-size: 14px; color: var(--text-dim); text-decoration: none; overflow-wrap: anywhere; } .workspace-url:hover { color: var(--brand); text-decoration: underline; } .workspace-score { display: flex; align-items: center; gap: 10px; margin-left: auto; } .workspace-score-label { font-size: 12.5px; color: var(--text-faint); line-height: 1.4; } .workspace-score-label span { color: var(--text-dim); } .score-pill.lg { min-width: 52px; font-size: 19.5px; padding: 8px 12px; } /* ---------- Workspace tabs (underline style, like Cloudflare) ---------- */ .workspace-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; } .workspace-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); padding: 11px 14px; font-size: 14.5px; font-weight: 500; cursor: pointer; font-family: inherit; white-space: nowrap; margin-bottom: -1px; } .workspace-tab:hover { color: var(--text); } .workspace-tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; } /* ---------- Stat cards ---------- */ .stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 16px; } .stat-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .stat-card-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); } .stat-card-value { font-size: 29px; font-weight: 700; margin-top: 6px; line-height: 1.1; font-variant-numeric: tabular-nums; } /* An em-dash at 27px reads as a horizontal rule, not as "no data". Shrink and mute it so an empty card looks empty rather than broken. */ .stat-card-value.empty { font-size: 22px; color: var(--text-faint); font-weight: 400; } .stat-card-value.pass { color: var(--pass); } .stat-card-value.warn { color: var(--warn); } .stat-card-value.fail { color: var(--fail); } .stat-card-meta { font-size: 13px; color: var(--text-dim); margin-top: 6px; } /* ---------- "Run something" cards ---------- */ .run-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 12px; } .run-card { text-align: left; background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; cursor: pointer; font-family: inherit; color: var(--text); transition: border-color 0.12s ease, background 0.12s ease; } .run-card:hover:not(:disabled) { border-color: var(--brand); background: var(--bg-hover); } .run-card:disabled { opacity: 0.6; cursor: progress; } .run-card.running { border-color: var(--brand); } .run-card-title { font-size: 15px; font-weight: 600; } .run-card-desc { font-size: 13.5px; color: var(--text-dim); margin-top: 4px; line-height: 1.5; } .inline-result { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-panel-2); border: 1px solid var(--border); font-size: 14px; color: var(--text-dim); } .inline-result strong { color: var(--text); } .inline-result select { padding: 5px 8px; font-size: 14px; } .diff-head { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; } .diff-head.pass { color: var(--pass); } .diff-head.fail { color: var(--fail); } /* ---------- Charts ---------- */ .line-chart { width: 100%; height: 160px; display: block; margin-top: 10px; overflow: visible; } .chart-grid { stroke: var(--border); stroke-width: 1; } .chart-axis { fill: var(--text-faint); font-size: 11.5px; font-family: inherit; } .chart-area { fill: var(--brand); opacity: 0.1; } .chart-line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .chart-dot { fill: var(--brand); } .chart-empty { font-size: 13.5px; color: var(--text-faint); padding: 22px 0; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius-sm); margin-top: 10px; } /* ---------- Per-keyword rank cards ---------- */ .rank-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .period-tabs { display: flex; gap: 4px; flex-wrap: wrap; } .keyword-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; margin-top: 16px; } .keyword-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .keyword-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .keyword-card-title { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; } .keyword-card-stats { display: flex; align-items: center; gap: 10px; flex-shrink: 0; font-size: 14px; } .keyword-pos { font-size: 17.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .keyword-pos.unranked { font-size: 13.5px; font-weight: 500; color: var(--text-faint); } .keyword-card-foot { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-dim); } .keyword-card-foot strong { color: var(--text); font-variant-numeric: tabular-nums; } .keyword-card-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* ---------- Links to real pages ---------- */ .url-link { color: var(--info); text-decoration: none; overflow-wrap: anywhere; } .url-link:hover { text-decoration: underline; } .url-raw { display: block; font-size: 12.5px; color: var(--text-faint); overflow-wrap: anywhere; margin-top: 1px; } /* ---------- Full affected-page lists ---------- These can run to hundreds of rows, so the container scrolls rather than pushing the rest of the report off-screen. Every row is still there. */ .affected-list { margin-top: 10px; max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); } .affected-row { padding: 7px 12px; border-bottom: 1px solid var(--border); font-size: 14px; line-height: 1.5; } .affected-row:last-child { border-bottom: none; } .affected-row .diff-meta { margin-left: 8px; } .broken-row { display: flex; flex-direction: column; gap: 2px; } .broken-row .sev-badge { align-self: flex-start; } /* ---------- Misc ---------- */ .btn-inline { background: none; border: 1px solid var(--border); color: var(--text-dim); border-radius: 4px; padding: 3px 9px; font-size: 13px; cursor: pointer; font-family: inherit; white-space: nowrap; } .btn-inline:hover:not(:disabled) { color: var(--brand); border-color: var(--brand); } .btn-inline:disabled { opacity: 0.55; cursor: default; } .signal-bar { color: var(--brand); letter-spacing: -1px; font-size: 11.5px; } @media (max-width: 720px) { .keyword-charts { grid-template-columns: 1fr; } .stat-cards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .workspace-score { margin-left: 0; } } /* ============================================================ SEMRUSH-STYLE APPLICATION SHELL ------------------------------------------------------------ A two-level navigation: a narrow icon rail for top-level product areas, and a section sidebar listing the tools inside the selected area. This is the shape Semrush uses and the reason it scales — the sidebar never grows past a screenful no matter how many tools ship, because only one area's tools are ever listed at a time. ============================================================ */ :root { --rail-w: 76px; --sidebar-w: 232px; --topbar-h: 56px; /* Globe (landing page). Declared here so both themes get a value and globe.js never has to guess a fallback. */ /* Brand blue is too dark to read against the near-black dark-mode background; the globe uses a lifted tint of it instead. */ --globe-dot: #4d74ff; --globe-grid: rgba(255, 255, 255, 0.13); --globe-marker: #a9bcff; } :root[data-theme="light"] { --globe-dot: #1c46f2; --globe-grid: rgba(33, 36, 39, 0.10); --globe-marker: #1c46f2; } /* ---------- Icon rail ---------- */ .rail { width: var(--rail-w); flex-shrink: 0; background: var(--bg-elevated); border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; padding: 10px 0 14px; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain; } .rail-brand { width: 36px; height: 36px; border-radius: 9px; background: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; flex-shrink: 0; } /* The mark is supplied white-on-transparent, so it sits on the brand tile without a second asset per theme. */ .rail-brand svg { width: 20px; height: 20px; } .rail-brand img { width: 22px; height: 22px; display: block; } /* The wordmark in the topbar. Two files rather than one recoloured by CSS: the mark is multi-tone, so a filter that made the type readable would also flatten the mark. Only one is ever displayed. */ .topbar-brand { display: flex; align-items: center; flex-shrink: 0; margin-right: 4px; } .topbar-wordmark { height: 22px; width: auto; display: block; } .topbar-wordmark.light { display: none; } :root[data-theme="light"] .topbar-wordmark.light { display: block; } :root[data-theme="light"] .topbar-wordmark.dark { display: none; } .rail-item { width: 62px; padding: 8px 2px 6px; border: 0; background: transparent; color: var(--text-dim); border-radius: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; font: inherit; font-size: 12.5px; line-height: 1.25; text-align: center; transition: background-color 0.12s ease, color 0.12s ease; flex-shrink: 0; } .rail-item svg { width: 20px; height: 20px; } .rail-item:hover { background: var(--bg-hover); color: var(--text); } .rail-item.active { background: var(--bg-panel-2); color: var(--text); font-weight: 600; } .rail-item.active svg { color: var(--brand); } .rail-spacer { flex: 1; min-height: 8px; } /* ---------- Section sidebar ---------- */ .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--bg-panel-2); border-right: 1px solid var(--border); padding: 16px 10px 20px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain; } .sidebar-title { font-size: 16.5px; font-weight: 700; color: var(--text); padding: 2px 10px 10px; letter-spacing: -0.01em; } /* Only the nav groups belonging to the selected rail area are shown. */ .nav-group[hidden] { display: none; } .nav-group { display: flex; flex-direction: column; gap: 1px; padding-bottom: 10px; } .nav-group-label { font-size: 13px; font-weight: 600; color: var(--text-faint); padding: 10px 10px 5px; letter-spacing: 0.01em; } .nav-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text-dim); font: inherit; font-size: 15px; text-align: left; cursor: pointer; transition: background-color 0.12s ease, color 0.12s ease; } .nav-item:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); } .nav-item.active { background: var(--bg-hover); color: var(--text); font-weight: 600; } .nav-item:disabled { opacity: 0.5; cursor: not-allowed; } .nav-item-icon { display: flex; flex-shrink: 0; } .nav-item-icon svg { width: 15px; height: 15px; } .nav-item-label { flex: 1; min-width: 0; } .sidebar-footer { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-faint); line-height: 1.5; } /* ---------- Workspace column ---------- */ .workspace { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); } .topbar { height: var(--topbar-h); flex-shrink: 0; border-bottom: 1px solid var(--border); background: var(--bg-elevated); display: flex; align-items: center; gap: 14px; padding: 0 20px; position: sticky; top: 0; z-index: 20; } .tool-search { position: relative; flex: 1; max-width: 420px; } .tool-search input { width: 100%; height: 34px; padding: 0 38px 0 12px; font-size: 15px; } .tool-search-btn { position: absolute; right: 3px; top: 3px; width: 28px; height: 28px; border: 0; border-radius: 5px; background: transparent; color: var(--text-dim); display: flex; align-items: center; justify-content: center; cursor: pointer; } .tool-search-btn:hover { background: var(--bg-hover); color: var(--text); } .tool-search-btn svg { width: 15px; height: 15px; } /* Type-ahead results for the tool search. */ .tool-search-results { position: absolute; top: 40px; left: 0; right: 0; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); padding: 5px; max-height: 340px; overflow-y: auto; z-index: 30; } .tool-search-results:empty { display: none; } .tool-search-result { display: block; width: 100%; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; text-align: left; padding: 7px 10px; border-radius: 6px; cursor: pointer; } .tool-search-result:hover, .tool-search-result.cursor { background: var(--bg-hover); } .tool-search-result .group { color: var(--text-faint); font-size: 13.5px; } .topbar-spacer { flex: 1; } .topbar-link { border: 0; background: transparent; color: var(--text-dim); font: inherit; font-size: 15px; cursor: pointer; padding: 6px 8px; border-radius: 6px; } .topbar-link:hover { background: var(--bg-hover); color: var(--text); } .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; border: 0; font: inherit; font-size: 14.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .main { flex: 1; min-width: 0; padding: 20px 24px 60px; } /* ---------- Breadcrumb + dashboard header ---------- */ .breadcrumb { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--text-faint); margin-bottom: 10px; } .breadcrumb a { color: var(--text-dim); text-decoration: none; } .breadcrumb a:hover { color: var(--text); text-decoration: underline; } .breadcrumb svg { width: 12px; height: 12px; } .dash-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .dash-title { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: -0.015em; } .dash-title .domain { color: var(--brand); } .dash-head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; } /* ---------- Widget cards ---------- */ /* The `min(…, 100%)` is load-bearing, not decoration. A bare `minmax(420px, 1fr)` sets a floor the track cannot go below, so on a viewport narrower than the floor the grid keeps its 420px track and pushes the whole page sideways — found on a 390px phone, where the Pages table sat 30px off the right edge and the body scrolled horizontally. Wrapping the floor in `min()` lets the track shrink to the container on small screens and changes nothing at all above 420px, where `min(420px, 100%)` is just 420px. */ .widget-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; } .widget-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); } .widget { position: relative; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px 18px; min-width: 0; } .widget.span-2 { grid-column: span 2; } @media (max-width: 1100px) { .widget.span-2 { grid-column: span 1; } } .widget-head { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; } .widget-title { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .widget-meta { margin-left: auto; font-size: 13.5px; color: var(--text-faint); display: flex; gap: 10px; align-items: center; } /* The little ⓘ that explains what a metric means. Semrush leans on these heavily and they are the difference between a number and an insight. */ .info-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--text-faint); color: var(--text-faint); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; cursor: help; flex-shrink: 0; font-style: normal; line-height: 1; } .info-dot:hover { border-color: var(--text); color: var(--text); } .widget-dismiss { width: 22px; height: 22px; border: 0; border-radius: 5px; background: transparent; color: var(--text-faint); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .widget-dismiss:hover { background: var(--bg-hover); color: var(--text); } .widget-dismiss svg { width: 13px; height: 13px; } .widget-body { font-size: 15px; color: var(--text-dim); line-height: 1.55; } /* An unconfigured tool: description plus a single call to action. */ .widget.setup { display: flex; flex-direction: column; } .widget.setup .widget-body { flex: 1; margin-bottom: 16px; } /* ---------- KPI band ---------- */ .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px; } .kpi { padding: 2px 18px 2px 0; border-right: 1px solid var(--border); min-width: 0; } .kpi:last-child { border-right: 0; } @media (max-width: 760px) { .kpi { border-right: 0; } } .kpi-label { display: flex; align-items: center; gap: 5px; font-size: 14px; color: var(--text-dim); margin-bottom: 6px; } .kpi-value { display: flex; align-items: baseline; gap: 7px; font-size: 28px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; line-height: 1.15; } .kpi-value.empty { font-size: 20.5px; color: var(--text-faint); font-weight: 600; } .kpi-sub { font-size: 13.5px; color: var(--text-faint); margin-top: 5px; } .delta { font-size: 14px; font-weight: 600; } .delta.up { color: var(--pass); } .delta.down { color: var(--fail); } .delta.flat { color: var(--text-faint); } .kpi-spark { margin-top: 6px; height: 30px; } .kpi-spark svg { width: 100%; height: 30px; overflow: visible; } /* A small circular gauge, the way Semrush renders Authority Score. */ .gauge { display: flex; align-items: center; gap: 9px; } .gauge svg { width: 34px; height: 34px; flex-shrink: 0; } /* ---------- Chart legend ---------- */ .chart-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; } .legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-dim); cursor: pointer; user-select: none; } .legend-swatch { width: 13px; height: 13px; border-radius: 3px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1.5px solid currentColor; } .legend-swatch svg { width: 9px; height: 9px; color: #fff; } .legend-item.off { color: var(--text-faint); } .legend-item.off .legend-swatch { background: transparent !important; } .legend-item.off .legend-swatch svg { display: none; } /* ---------- Horizontal distribution bars ---------- */ .dist-row { display: grid; grid-template-columns: 54px 1fr 56px 42px; align-items: center; gap: 10px; font-size: 14px; color: var(--text-dim); padding: 3px 0; } .dist-track { height: 13px; border-radius: 3px; background: var(--bg-panel-2); overflow: hidden; } .dist-fill { height: 100%; background: var(--brand); border-radius: 3px; } .dist-row .num { text-align: right; color: var(--text); font-weight: 600; } .dist-row .count { text-align: right; color: var(--info); } /* ---------- Empty state ---------- */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 44px 20px; text-align: center; } .empty-state svg { width: 46px; height: 46px; color: var(--text-faint); opacity: 0.7; } .empty-state-title { font-size: 16px; font-weight: 700; color: var(--text); } .empty-state-desc { font-size: 14.5px; color: var(--text-faint); max-width: 280px; line-height: 1.5; } /* ---------- Promo strip ---------- */ .promo { position: relative; border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 28px; background: radial-gradient(720px 240px at 88% 50%, rgba(28, 70, 242, 0.14), transparent 70%), var(--bg-panel); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .promo-copy { flex: 1; min-width: 260px; max-width: 460px; } .promo h2 { margin: 0 0 10px; font-size: 25px; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; color: var(--text); } .promo p { margin: 0 0 18px; font-size: 15px; color: var(--text-dim); line-height: 1.55; } /* ---------- Responsive ---------- */ @media (max-width: 1040px) { .sidebar { position: static; height: auto; } .rail { position: static; height: auto; } } @media (max-width: 860px) { .app-shell { flex-direction: column; } .rail { flex-direction: row; width: 100%; height: auto; border-right: 0; border-bottom: 1px solid var(--border); overflow-x: auto; padding: 8px 10px; } .rail-spacer { display: none; } .sidebar { width: 100%; height: auto; border-right: 0; border-bottom: 1px solid var(--border); } .main { padding: 16px 14px 48px; } .topbar { padding: 0 14px; } } /* ---- Corrections after the first visual pass ---- */ /* Four KPIs in one card wrapped badly at 150px minimum; 118px keeps them on one line at desktop width, and the row-gap makes the wrap readable when they do have to stack. */ .kpi-row { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); row-gap: 18px; column-gap: 2px; } .empty-state { padding: 30px 20px; } /* The theme toggle lives in the icon rail now, so its two icons need the same show/hide rule the old standalone button had. */ #themeToggle .icon-sun { display: none; } :root[data-theme="light"] #themeToggle .icon-sun { display: block; } :root[data-theme="light"] #themeToggle .icon-moon { display: none; } /* Semrush marks the current tool with a soft fill, not a hard accent bar. */ .nav-item.active { box-shadow: none; border-left: 0; } /* Semrush uses sentence case for its section headings; an older rule was upper-casing these and it read as shouting next to the tool names. */ .nav-group-label { text-transform: none; } /* Values must line up even when one label wraps to two lines. */ .kpi-label { align-items: flex-start; min-height: 2.6em; } /* Chrome's native search "×" sat underneath our own search button. */ .tool-search input::-webkit-search-cancel-button { display: none; } /* A is inline, so height:100% collapsed it and the coloured portion of every distribution bar was invisible. */ .dist-fill { display: block; } .dist-track { display: block; } /* ============================================================ DASHBOARD: account KPIs and project cards ============================================================ */ .section-head { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; } .section-head[hidden] { display: none; } .section-head h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); } .section-head-meta { font-size: 14px; color: var(--text-faint); } .plan-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-panel-2); font-size: 14px; color: var(--text-dim); } .plan-chip[hidden] { display: none; } .plan-chip b { color: var(--text); font-weight: 600; } /* A quota bar under a KPI: how much of the plan's allowance is spent. */ .quota-bar { height: 4px; border-radius: 2px; background: var(--bg-panel-2); overflow: hidden; margin-top: 8px; } .quota-bar > span { display: block; height: 100%; background: var(--brand); border-radius: 2px; } .quota-bar.near > span { background: var(--warn); } .quota-bar.full > span { background: var(--fail); } /* ---------- Project cards ---------- */ .project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; } .project-grid:empty { display: none; } .project-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; cursor: pointer; transition: border-color 0.12s ease, box-shadow 0.12s ease; text-align: left; font: inherit; color: inherit; width: 100%; } .project-card:hover { border-color: var(--brand); box-shadow: 0 2px 10px rgba(28, 70, 242, 0.08); } .project-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .project-card-head { display: flex; align-items: flex-start; gap: 12px; } .project-card-name { font-size: 16.5px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; line-height: 1.3; } .project-card-url { font-size: 14px; color: var(--text-faint); margin-top: 2px; word-break: break-all; } .project-card-score { margin-left: auto; flex-shrink: 0; text-align: center; } .project-card-score .gauge { flex-direction: column; gap: 2px; } .project-card-score .gauge svg { width: 44px; height: 44px; } .project-card-score .kpi-value { font-size: 16.5px; } .project-card-score-label { font-size: 12px; color: var(--text-faint); margin-top: 2px; } /* The metric grid inside a card. */ .project-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 10px; padding-top: 14px; border-top: 1px solid var(--border); } .project-stat { min-width: 0; } .project-stat-label { font-size: 12.5px; color: var(--text-faint); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .project-stat-value { font-size: 18.5px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 5px; } .project-stat-value .delta { font-size: 13px; } /* "Never run" must never look like a real measurement of zero. */ .project-stat-value.unset { font-size: 14px; font-weight: 500; color: var(--text-faint); } .project-card-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); } .btn-tiny { padding: 5px 10px; font-size: 13.5px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-panel-2); color: var(--text-dim); cursor: pointer; font-family: inherit; } .btn-tiny:hover { border-color: var(--brand); color: var(--brand); } .btn-tiny.primary { background: var(--brand); border-color: var(--brand); color: #fff; } .btn-tiny.primary:hover { background: var(--brand-hover); color: #fff; } @media (max-width: 420px) { .project-stats { grid-template-columns: repeat(2, 1fr); } } /* "Not run yet" was rendering at full KPI size in a project card's score slot, where it read as a headline rather than an absence. */ .project-card-score .kpi-value.empty { font-size: 14px; font-weight: 500; } .project-card { align-content: start; } /* The divider between KPI cells sat flush against the next cell's label, which read as cramped. Pad both sides and let the grid gap be zero, so the rule always has air either side of it. */ .kpi-row { column-gap: 0; } .kpi { padding: 2px 22px; } .kpi:first-child { padding-left: 0; } .kpi:last-child { padding-right: 0; } @media (max-width: 760px) { .kpi { padding-left: 0; padding-right: 14px; } } /* ============================================================ PROJECT WORKSPACE ============================================================ */ /* The project's own header in the sidebar, above its tabs. Clicking it goes back to the project list, which is the only way out of a project. */ .project-nav-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; margin-bottom: 6px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; } .project-nav-head:hover { border-color: var(--brand); } .project-nav-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .project-nav-switch { font-size: 13px; color: var(--brand); flex-shrink: 0; } /* While a project is open the generic SEO tool groups step aside. */ .nav-group[data-project-hidden="1"] { display: none; } .project-head-url { display: inline-block; margin-top: 4px; font-size: 14.5px; color: var(--text-dim); text-decoration: none; } .project-head-url:hover { color: var(--brand); text-decoration: underline; } /* ---------- Data tables ---------- */ .table-scroll { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .data-table th { text-align: left; font-size: 13px; font-weight: 600; color: var(--text-faint); padding: 0 10px 8px 0; border-bottom: 1px solid var(--border); white-space: nowrap; } .data-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--border); color: var(--text-dim); vertical-align: top; } .data-table tr:last-child td { border-bottom: 0; } .data-table td strong { color: var(--text); font-weight: 600; } .data-table th.num, .data-table td.num { text-align: right; padding-right: 0; } .data-table a { color: var(--info); text-decoration: none; word-break: break-all; } .data-table a:hover { text-decoration: underline; } .sev-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; } /* Period buttons live in the widget meta slot, which is a flex row already. */ .widget-meta .btn-tiny { padding: 3px 9px; font-size: 13px; } /* Inside a project tile the card is only ~300px wide, so the dashboard's 118px KPI minimum forced a second row for the third metric. */ .widget-grid:not(.cols-2) .kpi-row { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); } .widget-grid:not(.cols-2) .kpi { padding: 2px 12px; } .widget-grid:not(.cols-2) .kpi:first-child { padding-left: 0; } .widget-grid:not(.cols-2) .kpi-value { font-size: 24px; } .platform-status { padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--border); } .platform-status.ready { color: var(--pass); border-color: var(--pass); } .platform-status.soon { color: var(--brand); border-color: var(--brand); } /* ============================================================ EMOJI MENUS, PROJECT PICKER, INLINE TOOL FORMS ============================================================ */ /* ---------- Project picker ---------- */ .project-picker { position: relative; margin-bottom: 8px; } .project-nav-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; } .project-nav-head:hover { border-color: var(--brand); } .project-nav-caret { color: var(--text-faint); font-size: 12.5px; flex-shrink: 0; } .project-menu { position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 40; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); padding: 5px; max-height: 340px; overflow-y: auto; } .project-menu[hidden] { display: none; } .project-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; } .project-menu-item:hover { background: var(--bg-hover); } .project-menu-item.current { background: var(--bg-hover); } .project-menu-text { min-width: 0; display: flex; flex-direction: column; } .project-menu-name { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .project-menu-url { font-size: 13px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .project-menu-sep { height: 1px; background: var(--border); margin: 5px 0; } .project-menu-empty { padding: 10px; font-size: 14px; color: var(--text-faint); } /* ---------- Inline tool forms ---------- */ .tool-form .form-row { margin: 0; } .tool-form .hint { margin: 10px 0 0; } /* Expanding the affected pages under a finding, rather than a "…and 9 more". */ .finding-pages { margin-top: 7px; } .finding-pages summary { cursor: pointer; font-size: 13.5px; color: var(--info); list-style: none; } .finding-pages summary::-webkit-details-marker { display: none; } .finding-pages summary::before { content: '▸ '; } .finding-pages[open] summary::before { content: '▾ '; } .finding-pages a { display: block; font-size: 13.5px; padding: 3px 0 3px 14px; word-break: break-all; } .intent-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); font-size: 13px; color: var(--text-dim); white-space: nowrap; } .raw-json { margin: 0; padding: 12px; background: var(--bg-panel-2); border-radius: var(--radius-sm); font-size: 13.5px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; color: var(--text-dim); } /* ---------- Rank refresh mode ---------- */ .refresh-modes { display: flex; flex-direction: column; gap: 10px; } .refresh-mode { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: border-color 0.12s ease, background-color 0.12s ease; } .refresh-mode:hover { border-color: var(--brand); } .refresh-mode.active { border-color: var(--brand); background: var(--bg-panel-2); } .refresh-mode input { margin-top: 3px; flex-shrink: 0; accent-color: var(--brand); } .refresh-mode > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .refresh-mode strong { font-size: 14.5px; color: var(--text); font-weight: 600; } /* ---------- Project history ---------- */ .history-day { margin-bottom: 18px; } .history-day:last-child { margin-bottom: 0; } .history-date { font-size: 13px; font-weight: 600; color: var(--text-faint); padding-bottom: 7px; margin-bottom: 4px; border-bottom: 1px solid var(--border); } .history-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); } .history-item:last-child { border-bottom: 0; } .history-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .history-title { font-size: 15px; font-weight: 600; color: var(--text); } .history-detail { font-size: 14px; color: var(--text-dim); word-break: break-all; } .history-meta { font-size: 13px; color: var(--text-faint); } .history-score { flex-shrink: 0; font-size: 14.5px; font-weight: 700; color: var(--text); min-width: 26px; text-align: right; } .history-time { flex-shrink: 0; font-size: 13px; color: var(--text-faint); min-width: 40px; text-align: right; } /* Filter chips sit in the widget's meta slot and need to wrap on narrow screens. */ .widget-meta { flex-wrap: wrap; justify-content: flex-end; } /* File and range inputs were falling back to the browser default, which is white in dark mode. */ input[type="file"] { width: 100%; padding: 8px 10px; font: inherit; font-size: 14.5px; color: var(--text-dim); background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } input[type="file"]::file-selector-button { margin-right: 10px; padding: 5px 11px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg-panel); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; } input[type="file"]::file-selector-button:hover { border-color: var(--brand); color: var(--brand); } input[type="range"] { width: 100%; accent-color: var(--brand); background: transparent; } /* ============================================================ ICONS ------------------------------------------------------------ Thin-stroke line icons in place of emoji: one visual language across every platform, and they inherit `color`, so an active or hovered item tints its icon for free. ============================================================ */ .icon { display: block; flex-shrink: 0; } .rail-icon, .nav-item-icon, .project-nav-icon, .project-menu-icon, .widget-icon, .history-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-faint); } .rail-icon { color: var(--text-dim); } .rail-item:hover .rail-icon { color: var(--text); } .rail-item.active .rail-icon { color: var(--brand); } .nav-item-icon { width: 16px; color: var(--text-faint); } .nav-item:hover .nav-item-icon { color: var(--text-dim); } .nav-item.active .nav-item-icon { color: var(--brand); } .project-nav-icon { color: var(--text-dim); } .project-menu-icon { color: var(--text-faint); } .project-menu-item.current .project-menu-icon { color: var(--brand); } .widget-icon { color: var(--text-dim); } .history-icon { margin-top: 1px; color: var(--text-faint); } .empty-icon { display: flex; justify-content: center; color: var(--text-faint); opacity: 0.55; } /* Filter chips pair an icon with a label. */ .btn-tiny { display: inline-flex; align-items: center; gap: 5px; } .btn-tiny .icon { width: 13px; height: 13px; } /* The score and time columns had no gap, so "81" and "today" ran together. */ .history-score { min-width: 34px; padding-right: 10px; } .history-time { min-width: 46px; } .history-open { flex-shrink: 0; width: 16px; display: flex; justify-content: flex-end; color: var(--text-faint); opacity: 0; transition: opacity 0.12s ease; } .history-item.openable { cursor: pointer; margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 6px; } .history-item.openable:hover { background: var(--bg-hover); } .history-item.openable:hover .history-open { opacity: 1; } .history-item.openable:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } .history-item.loading { opacity: 0.55; } /* A full tool report is rendered inside a widget, and brings its own panels. */ .report-host > div > .panel:first-child { margin-top: 0; } .report-host .panel { border: 0; padding: 0; background: transparent; } .report-host .panel + .panel { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border); } .widget.report-host { padding-top: 18px; } /* The audit-history table jammed the score against the date. */ .data-table td.num + td { padding-left: 14px; } /* ============================================================ SITE AUDIT SCREEN ============================================================ */ .sa-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: 14px; color: var(--text-dim); margin: -8px 0 16px; } .sa-meta-domain { color: var(--text); font-weight: 600; } .sa-meta strong { color: var(--text); font-weight: 600; } .sa-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 18px; } .sa-tab { border: 0; background: transparent; color: var(--text-dim); font: inherit; font-size: 15px; padding: 9px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } .sa-tab:hover { color: var(--text); } .sa-tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; } /* Two panels sharing one card, as on the reference. */ .sa-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 720px) { .sa-split { grid-template-columns: 1fr; } } .sa-split-col { min-width: 0; } .gauge-half { margin: 4px auto 0; } .gauge-half-label { text-align: center; font-size: 13.5px; color: var(--text-faint); } .sa-gauge-delta { text-align: center; font-size: 13.5px; margin-top: -6px; } .sa-bullets { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; } .sa-bullet { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--text-dim); } .sa-bullet strong { margin-left: auto; color: var(--text); } .sa-bullet-note { font-size: 13.5px; color: var(--text-faint); line-height: 1.5; } .sa-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .sa-bench-toggle { border: 0; background: transparent; color: var(--brand); font: inherit; font-size: 14.5px; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; } .sa-bench-list { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; background: var(--bg-panel-2); } .sa-bench-list[hidden] { display: none; } .sa-bench-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--text-dim); padding: 4px 0; } .sa-bench-row strong { color: var(--text); } .sa-pages-total { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 12px; } .sa-pages-count { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; } .sa-stack { display: flex; height: 12px; border-radius: 3px; overflow: hidden; gap: 2px; } .sa-stack-seg { display: block; height: 100%; } .sa-legend { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; } .sa-legend-row { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--text-dim); } /* The colour that ties a legend row to its slice. Without it the legend is a list of numbers next to a chart nobody can map onto it. */ .sa-legend-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .sa-legend-label { flex: 1; min-width: 0; } .sa-legend-n { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } .sa-legend-pct { color: var(--text-faint); font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; } /* A band with nothing in it still earns its row — "0 pages over 3s" is a result, and hiding it makes the legend look like the chart is incomplete. */ .sa-legend-row.zero { opacity: 0.55; } .sa-legend-row.zero .sa-legend-n { color: var(--text-faint); font-weight: 500; } .sa-count-link { margin-left: auto; border: 0; background: transparent; color: var(--info); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; padding: 0; } .sa-count-link:hover { text-decoration: underline; } .beta-badge { padding: 2px 7px; border-radius: 999px; background: var(--warn); color: #fff; font-size: 11.5px; font-weight: 700; text-transform: lowercase; } .sa-note { margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--warn) 14%, transparent); font-size: 14px; color: var(--text-dim); } .sa-note.pass { background: color-mix(in srgb, var(--pass) 14%, transparent); } .sa-ai-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 14px; } .sa-issue-link { border: 0; background: transparent; color: var(--info); font: inherit; font-size: 14px; cursor: pointer; padding: 0; } .sa-issue-link:hover { text-decoration: underline; } /* Hover explainer, as on the reference. */ /* `.sa-hover` / `.sa-tooltip` lived here: a CSS-only hover box, absolutely positioned and anchored `left: 0` to its trigger with a fixed 330px width. Removed rather than left in place, because the rule encodes a bug. It can only work while its trigger sits on the LEFT of a container wide enough to hold it; a trigger on the right has nowhere to put the box, and both audits grew exactly that — the On Page score headers pushed it off the viewport, and the site audit's AI Search footer laid it over the agent list beside it. A hover box cannot fix that without measuring the viewport and flipping, which is what the JS engine behind `data-tip` already does and which these explainers are far too long for anyway. All four call sites now open a panel on click instead — the same interaction as "How to fix", so there is one way to open an explanation rather than two. See EXPLAINERS in public/project.js. Leaving the dead rule here would have invited the next person to reuse it. */ .sa-bots { display: flex; flex-direction: column; gap: 2px; } .sa-bot-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; } .sa-bot-row:last-child { border-bottom: 0; } .sa-bot-name { color: var(--text); display: flex; align-items: center; gap: 7px; } .sa-bot-purpose { font-size: 12px; color: var(--text-faint); border: 1px solid var(--border); border-radius: 999px; padding: 1px 6px; } .sa-bot-ok { color: var(--pass); font-size: 14px; font-weight: 600; } .sa-bot-blocked { color: var(--fail); font-size: 14px; font-weight: 600; } /* Allowed at the root, blocked from some pages — neither pass nor fail. */ .sa-bot-partial { color: var(--warn); font-size: 14px; font-weight: 600; } .sa-more { margin-top: 8px; border: 0; background: transparent; color: var(--info); font: inherit; font-size: 14px; cursor: pointer; padding: 0; } .sa-big-number { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; margin: 2px 0 6px; } .sa-big-number.fail { color: var(--fail); } .sa-big-number.warn { color: var(--warn); } /* ---- Issue rows ---- */ .sa-issue-list { display: flex; flex-direction: column; } .sa-issue { position: relative; display: flex; align-items: center; gap: 10px; /* Two different edges, deliberately. The MARGIN pulls the row out to the card's padding edge, so the hover highlight and the dividers run the full width the way a table row does. The PADDING then sets the text in further than the card's own padding, so the content is not pressed against the border it now touches. `--issue-inset` is shared with the band header below, or the sticky "Errors" title and the rows beneath it would sit on different verticals. */ padding: var(--s4) var(--issue-inset); margin: 0 calc(var(--card-pad) * -1); border-bottom: 1px solid var(--border); font-size: 14.5px; flex-wrap: wrap; transition: background-color 0.14s ease; } .sa-issue:last-child { border-bottom: 0; } .sa-issue.full { align-items: flex-start; } .sa-issue-sev { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; margin-top: 5px; } .sa-issue-sev.critical { background: var(--fail); } .sa-issue-sev.high { background: #e8743b; } .sa-issue-sev.medium { background: var(--warn); } .sa-issue-sev.low { background: var(--info); } .sa-issue-label { flex: 1; min-width: 180px; color: var(--text); display: flex; flex-direction: column; /* A column flex box stretches its children to full width by default, so the inline "AI Search" pill was being pulled into a full-width blue bar across the row. Children size to their content now. */ align-items: flex-start; gap: 3px; } /* Title and its badges on one line; the explanation sits under both. */ .sa-issue-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; line-height: 1.35; } /* The gap above owns the spacing now — the badge's own margin doubled it. */ .sa-issue-title .ai-badge { margin-left: 0; } .sa-issue-count { color: var(--info); font-weight: 600; white-space: nowrap; } .ai-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); font-size: 12px; font-weight: 700; margin-left: 6px; } .sa-howto { border: 0; background: transparent; color: var(--text-dim); font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .sa-howto:hover { color: var(--brand); } .sa-fix-pop { flex-basis: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 10px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .sa-fix-pop[hidden] { display: none; } @media (max-width: 700px) { .sa-fix-pop { grid-template-columns: 1fr; } } .sa-fix-col { padding: 14px 16px; font-size: 14px; line-height: 1.6; color: var(--text-dim); } .sa-fix-col strong { display: block; color: var(--text); margin-bottom: 6px; } .sa-fix-col p { margin: 0; } .sa-fix-col.fix { background: color-mix(in srgb, var(--pass) 8%, transparent); } .sa-issue-pages { flex-basis: 100%; margin-top: 6px; } /* The affected-URL count, now a way in rather than a list dumped in place. */ .sa-issue-open { border: 1px solid var(--border); background: none; border-radius: 999px; padding: 4px 12px; font-size: var(--fs-sm); font-weight: 550; color: var(--text-dim); cursor: pointer; white-space: nowrap; } .sa-issue-open:hover { border-color: var(--brand); color: var(--brand); } /* Keeps the column from collapsing on rows that have no URLs to show, so the "How to fix" buttons above and below it stay in line. */ .sa-issue-open-placeholder { display: inline-block; min-width: 132px; } /* The "opens elsewhere" mark. Deliberately quiet until hovered: it sits on every row of a long table, and at full strength it reads as a column of decoration. */ .sa-ext-link { display: inline-flex; align-items: center; margin-left: 6px; color: var(--text-faint); vertical-align: -2px; } .sa-ext-link:hover { color: var(--brand); } /* NOT display:flex. A given `display:flex` stops being a table-cell, so it no longer shares the row's baseline or its border box — which is why the row rule under this column broke away from the one under ILR and the two never met. The cell stays a cell; the contents are laid out inline inside it. */ .sa-url-cell { min-width: 0; } .sa-url-cell .sa-url-link { display: inline; overflow-wrap: anywhere; } .sa-url-cell .sa-ext-link { display: inline-flex; vertical-align: -2px; } /* Inline-flex so the mark stays on the URL's last line instead of wrapping onto one of its own under a long address. */ .sa-pp-url a { display: inline-flex; align-items: center; gap: 6px; } .sa-ext-icon { color: var(--text-faint); flex: none; } .sa-pp-url a:hover .sa-ext-icon { color: var(--brand); } /* ---- One issue, every instance of it ---- */ .sa-idt-back { border: 0; background: none; padding: 4px 0; margin-bottom: var(--s3); font: inherit; font-weight: 600; font-size: var(--fs-sm); color: var(--text-dim); cursor: pointer; } .sa-idt-back:hover { color: var(--brand); } .sa-idt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); } .sa-idt-h { margin: 0; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sa-idt-sub { margin: 6px 0 var(--s4); font-size: var(--fs-sm); color: var(--text-dim); } .sa-idt-controls { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); } .sa-idt-controls input { flex: 1; max-width: 340px; } .sa-idt-count { font-size: var(--fs-xs); color: var(--text-faint); } .sa-idt-table { table-layout: auto; } .sa-idt-table th, .sa-idt-table td { padding: 11px 14px; vertical-align: top; } /* Inset from the card edge, matching the compare tables. Content flush against the border is the "mepet" look. */ .sa-idt-table th:first-child, .sa-idt-table td:first-child { padding-left: 18px; } .sa-idt-table th:last-child, .sa-idt-table td:last-child { padding-right: 18px; } .sa-idt-table thead th:first-child { border-top-left-radius: var(--radius-sm); } .sa-idt-table thead th:last-child { border-top-right-radius: var(--radius-sm); } .sa-idt-table thead th { background: var(--bg-panel-2); } .sa-idt-page { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sa-idt-title { font-weight: 550; color: var(--text); } .sa-idt-url { font-size: var(--fs-sm); display: flex; align-items: baseline; min-width: 0; } .sa-idt-note { font-size: var(--fs-xs); color: var(--text-faint); font-style: italic; } .sa-idt-target { font-size: var(--fs-sm); color: var(--text-dim); overflow-wrap: anywhere; } .sa-idt-detail { font-size: var(--fs-sm); color: var(--text-dim); } .sa-idt-pager { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); font-size: var(--fs-sm); color: var(--text-dim); } .sa-idt-pager button[disabled] { opacity: 0.4; cursor: default; } .sa-idt-urls { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-xs); } .sa-idt-urls span { display: flex; align-items: baseline; min-width: 0; } .sa-idt-date { font-size: var(--fs-sm); color: var(--text-dim); white-space: nowrap; } /* Include / exclude conditions on a named column. */ .sa-idt-filters { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--s3); margin-bottom: var(--s3); display: flex; flex-direction: column; gap: var(--s2); } .sa-idt-filter { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; } .sa-idt-filter select { flex: 0 0 auto; } .sa-idt-filter input { flex: 1; min-width: 160px; } .sa-idt-filter-x { border: 0; background: none; color: var(--text-faint); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; } .sa-idt-filter-x:hover { color: var(--fail); } .sa-idt-filter-actions { display: flex; gap: var(--s3); align-items: center; } /* The Errors / Warnings / Notices band headers behave like the ones in Compare Crawls: the band you are inside stays named at the top of the screen, and is pushed out by the next band. Same offset as those, below the audit's own sticky header. */ .sa-issue-band { overflow: visible; } .sa-issue-band .widget-head { position: sticky; top: calc(var(--topbar-h) + var(--sa-sticky-h, 92px)); z-index: 8; background: var(--bg-panel); margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 0; /* Same inset as the rows below it, so the title and the issue names line up. */ padding: var(--s3) var(--issue-inset); border-bottom: 1px solid var(--border); /* The negative margin takes this out to the card's padding edge, which sits just inside the border — so a square background here paints over the inside of the card's rounded corners and the top corners read as missing. One pixel less than the card's radius, because this box starts inside the 1px border. */ border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; } /* ---- The issue row, clickable as a whole ---- */ .sa-issue.openable { cursor: pointer; } /* The same hover the data tables use (`.data-table tbody tr:hover td`), so a row of issues and a row of results feel like the same control. The colour was never the problem here — the geometry was: an inset, rounded highlight sitting beside a straight full-width divider. Square and edge to edge, and the standard token does the rest. */ .sa-issue.openable:hover { background: var(--bg-hover); } @media (prefers-reduced-motion: reduce) { .sa-issue { transition: none; } } .sa-issue-checked { font-size: var(--fs-xs); color: var(--text-faint); white-space: nowrap; min-width: 120px; text-align: right; } /* The severity mark. Shape carries the meaning; colour reinforces it. */ .sa-sev { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; } .sa-sev svg { width: 15px; height: 15px; } .sa-sev.critical, .sa-sev.high { color: var(--fail); } .sa-sev.medium { color: var(--warn); } .sa-sev.low { color: var(--info); } /* The bolt reads better filled; the outlines stay outlines. */ .sa-sev.critical svg, .sa-sev.high svg { fill: currentColor; stroke-width: 0; } /* ---- Page summary: one issue expanded at a time ---- Everything in a row hangs off one left rule: the caret sits at 0, the icon and label follow it, and the expanded table's first column starts at the same place as the label above it. The earlier version indented the table by an arbitrary 26px, so its header sat between the caret and the label and the whole block looked misaligned. */ .sa-acc { display: flex; flex-direction: column; } .sa-acc-item { border-bottom: 1px solid var(--border); } .sa-acc-item:last-child { border-bottom: 0; } .sa-acc-item.open { background: color-mix(in srgb, var(--bg-hover) 45%, transparent); } .sa-acc-head { display: flex; align-items: center; gap: var(--s3); padding: 14px var(--s3); cursor: pointer; font-size: 14.5px; } .sa-acc-head:hover { background: var(--bg-hover); } /* One chevron, turned rather than swapped. A shape that rotates into place says "this opened"; two different glyphs just say "something changed". */ .sa-acc-caret { color: var(--text-faint); width: 14px; height: 14px; flex: none; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.16s ease, color 0.16s ease; } .sa-acc-caret svg { width: 14px; height: 14px; stroke-width: 2.2; } .sa-acc-item.open .sa-acc-caret { color: var(--text); transform: rotate(90deg); } .sa-acc-head:hover .sa-acc-caret { color: var(--text); } @media (prefers-reduced-motion: reduce) { .sa-acc-caret { transition: none; } } .sa-acc-label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .sa-acc-label strong { font-weight: 600; line-height: 1.35; } .sa-acc-label .kpi-sub { line-height: 1.45; } .sa-acc-n { color: var(--info); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; } /* Revealed on hover, the way the reference does it: present when you reach for it, absent from the resting state of a list you are only scanning. */ .sa-acc-all { border: 0; background: none; padding: 0; font: inherit; font-size: var(--fs-sm); color: var(--text-dim); cursor: pointer; opacity: 0; white-space: nowrap; transition: opacity 0.12s ease; } .sa-acc-head:hover .sa-acc-all, .sa-acc-all:focus-visible { opacity: 1; } .sa-acc-all:hover { color: var(--brand); text-decoration: underline; } .sa-acc-item.open .sa-acc-all { opacity: 1; } /* The table's first column starts exactly under the issue label above it. --acc-indent is the sum of the head's leading furniture: its own padding, the caret, the severity icon and the two gaps between them. Written as one number so the two stay in step if any of those change. */ .sa-acc { --acc-indent: 68px; } .sa-acc-table { margin: 0 var(--s3) var(--s4) calc(var(--acc-indent) - 18px); width: calc(100% - var(--acc-indent) - var(--s3) + 18px); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .sa-acc-table th, .sa-acc-table td { padding: 9px 14px; font-size: var(--fs-sm); } .sa-acc-table th:first-child, .sa-acc-table td:first-child { padding-left: 18px; } .sa-acc-table th:last-child, .sa-acc-table td:last-child { padding-right: 18px; } .sa-acc-table thead th { background: var(--bg-panel-2); } .sa-acc-table tbody tr:last-child td { border-bottom: 0; } /* The issue list uses the same rhythm, so the two read as one system. Padding is deliberately NOT set here: it belongs to the base rule, which pairs it with the negative margin that makes the row bleed to the card edge. Re-declaring only the padding here broke that pair. */ .sa-issue { gap: var(--s3); } .sa-issue-label { gap: 5px; } .sa-issue-label strong { font-weight: 600; line-height: 1.35; } .sa-change { font-size: 13px; font-weight: 600; padding: 2px 8px; border-radius: 999px; } .sa-change.worse { color: var(--fail); background: color-mix(in srgb, var(--fail) 14%, transparent); } .sa-change.new { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); } .sa-change.same { color: var(--text-faint); } .sa-change.improved { color: var(--pass); background: color-mix(in srgb, var(--pass) 14%, transparent); } .sa-change.fixed { color: var(--pass); background: color-mix(in srgb, var(--pass) 18%, transparent); } .sa-change.neutral { color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 12%, transparent); } /* ---- Issues tab filters ---- */ .sa-issue-filters { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s4); } .sa-issue-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); } .sa-issue-filter-row .sa-search { flex: 0 0 240px; margin-right: var(--s2); } .sa-issue-filter-row .sa-search input { width: 100%; } .sa-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-panel); color: var(--text-dim); font-size: var(--fs-sm); font-weight: 550; font-family: inherit; cursor: pointer; white-space: nowrap; } .sa-chip:hover { background: var(--bg-hover); color: var(--text); } .sa-chip.active { border-color: var(--brand); color: var(--text); background: color-mix(in srgb, var(--brand) 10%, transparent); } .sa-chip.ai.active { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 16%, transparent); } .sa-chip-n { color: var(--text-faint); font-weight: 500; font-variant-numeric: tabular-nums; } .sa-chip.active .sa-chip-n { color: var(--brand); } .sa-caret { font-size: 10px; color: var(--text-faint); } /* The triggered dropdown already carries margin-left:auto, so anything after it sits on the right without needing its own. */ .sa-chip-x { color: var(--text-faint); font-weight: 600; } .sa-chip.focus:hover .sa-chip-x { color: var(--text); } /* The dropdown is positioned rather than inline so a long menu does not push the list below it around as it opens. */ .sa-triggered { position: relative; margin-left: auto; } .sa-triggered-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; min-width: 210px; padding: var(--s1); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-panel); box-shadow: 0 12px 28px rgb(0 0 0 / 22%); } .sa-triggered-menu button { display: flex; justify-content: space-between; gap: var(--s4); width: 100%; padding: 7px 10px; border: 0; border-radius: 5px; background: none; color: var(--text); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; } .sa-triggered-menu button:hover { background: var(--bg-hover); } /* A check that ran and found nothing, so the list can say so rather than leaving the reader unable to tell it apart from a check we never ran. */ .sa-issue.quiet { opacity: 0.62; } /* Holds the column a "How to fix" button would occupy, so rows with nothing to fix still line up with the ones that do. */ .sa-howto-placeholder { display: inline-block; } .sa-issue.quiet .sa-issue-count { color: var(--text-faint); } .sa-issue-na { font-size: var(--fs-xs); color: var(--text-faint); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; white-space: nowrap; } /* ---- Crawlability report ---- */ .sa-donut-row { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; } .sa-donut-side { flex: 1; min-width: 150px; } .sa-donut-figure { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.1; } .sa-donut-figure.warn { color: var(--warn); } .sa-donut-figure.pass { color: var(--pass); } .sa-waste { display: flex; flex-direction: column; gap: 2px; } .sa-waste-row { display: grid; grid-template-columns: 1fr auto 130px; align-items: center; gap: var(--s3); width: 100%; padding: 5px 6px; border: 0; border-radius: 5px; background: none; color: var(--text-dim); font: inherit; font-size: var(--fs-sm); text-align: left; } .sa-waste-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sa-waste-n { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } .sa-waste-bar { height: 8px; border-radius: 2px; background: var(--bg-panel-2); overflow: hidden; } .sa-waste-bar > span { display: block; height: 100%; } .sa-histogram { display: flex; align-items: flex-end; gap: var(--s2); height: 150px; padding-top: var(--s2); } .sa-histogram-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; padding: 0; border: 0; background: none; font: inherit; } .sa-histogram-bar { width: 100%; max-width: 40px; background: var(--brand); border-radius: 3px 3px 0 0; } .sa-histogram-label { margin-top: 6px; font-size: var(--fs-xs); color: var(--text-faint); } /* Overlapping circles, sized by set — a picture of the relationship rather than a precise Venn, which is why the counts sit beside it in words. */ .sa-venn { position: relative; height: 150px; display: flex; align-items: center; justify-content: center; } .sa-venn-a, .sa-venn-b { position: absolute; border-radius: 50%; } .sa-venn-a { background: color-mix(in srgb, var(--brand) 35%, transparent); transform: translateX(-14px); } .sa-venn-b { background: color-mix(in srgb, var(--pass) 55%, transparent); transform: translateX(18px); } .sa-basis-note { margin-top: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--text-dim); font-size: var(--fs-xs); } /* Anything that answers "which ones?" when you click it. */ .clickable { cursor: pointer; } button.sa-waste-row.clickable:hover, button.sa-legend-row.clickable:hover { background: var(--bg-hover); color: var(--text); } .sa-histogram-col.clickable:hover .sa-histogram-bar { filter: brightness(1.18); } circle.clickable:hover { filter: brightness(1.15); } /* Every legend row, clickable or not. A row with a count of zero is still a