Crocs and Clicks — Full Site Audit :root { /* Surface hierarchy — cool neutral darks so pink & blue pop */ --bg-primary: #0f1117; --bg-secondary: #161821; --bg-tertiary: #1e2030; --bg-card: #1a1c2b; --bg-elevated: #252838; --bg-input: #13151e; /* Accent pink — matches the croc logo */ --accent-pink: #F472B6; --accent-light: #FBCFE8; --accent-hot: #EC4899; --accent-glow: rgba(244,114,182,0.18); --accent-subtle: rgba(244,114,182,0.08); /* Blue accent — matches logo sparkles */ --accent-blue: #60A5FA; --accent-blue-deep: #3B82F6; --blue-glow: rgba(96,165,250,0.15); --blue-subtle: rgba(96,165,250,0.08); /* Text hierarchy — bright whites on cool darks */ --text-primary: #F8FAFC; --text-secondary: #B8C0CC; --text-muted: #6B7280; /* Borders — cool gray */ --border-color: #2D3348; --border-hover: #3D4560; --border-input: #353B52; /* Semantic colors */ --success: #22c55e; --success-bg: rgba(34,197,94,0.12); --warning: #f59e0b; --warning-bg: rgba(245,158,11,0.12); --danger: #ef4444; --danger-bg: rgba(239,68,68,0.12); --info: #60A5FA; --info-bg: rgba(96,165,250,0.12); /* Focus ring */ --focus-ring: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent-pink); } * { margin:0; padding:0; box-sizing:border-box; } body { font-family:'Outfit',sans-serif; background:var(--bg-primary); color:var(--text-primary); min-height:100vh; overflow-x:hidden; } /* Text-based status indicators — 2026 best practice: color + text, no icons */ .sev-indicator { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:0.35rem; flex-shrink:0; } .sev-critical { background:var(--danger); } .sev-warning { background:var(--warning); } .sev-notice { background:var(--info); } .trend-up { color:var(--success); font-weight:700; font-size:0.75em; } .trend-down { color:var(--danger); font-weight:700; font-size:0.75em; } .trend-new { color:var(--info); font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; padding:0.1rem 0.3rem; background:var(--info-bg); border-radius:3px; } .trend-lost { color:var(--danger); font-weight:700; font-size:0.75em; } .ai-badge { font-size:0.6rem; font-weight:700; padding:0.12rem 0.35rem; border-radius:3px; letter-spacing:0.03em; } .ai-badge.ai-yes { background:rgba(59,130,246,0.15); color:var(--info); } /* Header */ .header { background:var(--bg-secondary); border-bottom:none; display:flex; align-items:center; justify-content:space-between; padding:0 2rem; height:62px; position:sticky; top:0; z-index:100; } .header::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg, var(--accent-pink), var(--accent-blue)); } .logo { display:flex; align-items:center; gap:0.6rem; font-size:1.1rem; font-weight:700; } .logo-icon { width:36px; height:36px; border-radius:6px; overflow:hidden; flex-shrink:0; } .logo-icon img { width:100%; height:100%; object-fit:contain; } .logo-badge { font-size:0.6rem; color:var(--accent-blue); font-weight:500; background:var(--blue-subtle); padding:0.15rem 0.45rem; border-radius:4px; } .header-actions { display:flex; gap:0.6rem; align-items:center; } /* Ghost/tertiary header button — minimal, understated */ .header-btn { background:transparent; border:1px solid var(--border-color); color:var(--text-secondary); padding:0.5rem 0.9rem; border-radius:8px; cursor:pointer; font-size:0.82rem; display:flex; align-items:center; gap:0.4rem; transition:all 0.2s; font-family:inherit; font-weight:500; } .header-btn:hover { border-color:var(--border-hover); color:var(--text-primary); background:var(--accent-subtle); } .header-btn:focus-visible { outline:none; box-shadow:var(--focus-ring); } /* Primary header button — filled accent, clear CTA */ .header-btn-primary { background:var(--accent-hot); border:1px solid var(--accent-hot); color:white; padding:0.55rem 1.15rem; border-radius:8px; cursor:pointer; font-size:0.82rem; display:flex; align-items:center; gap:0.4rem; transition:all 0.2s; font-family:inherit; font-weight:600; letter-spacing:0.01em; } .header-btn-primary:hover { background:var(--accent-pink); border-color:var(--accent-pink); box-shadow:0 2px 14px rgba(236,72,153,0.35); } .header-btn-primary:focus-visible { outline:none; box-shadow:var(--focus-ring); } /* Input Section */ .scan-hero { max-width:720px; margin:0 auto; padding:4rem 1.5rem 2.5rem; text-align:center; } .scan-hero h1 { font-family:'Fraunces',serif; font-size:2.4rem; font-weight:800; background:linear-gradient(135deg,var(--accent-light),var(--accent-pink),var(--accent-blue)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:0.6rem; } .scan-hero p { color:var(--text-secondary); font-size:0.95rem; margin-bottom:2.5rem; line-height:1.7; max-width:560px; margin-left:auto; margin-right:auto; } .scan-input-row { display:flex; gap:0.65rem; max-width:640px; margin:0 auto; } .scan-input-row input { flex:1; background:var(--bg-input); border:2px solid var(--border-input); color:var(--text-primary); padding:1.05rem 1.2rem; border-radius:12px; font-size:1.05rem; font-family:inherit; transition:all 0.2s; } .scan-input-row input::placeholder { color:var(--text-muted); } .scan-input-row input:focus { outline:none; border-color:var(--accent-pink); box-shadow:0 0 0 4px var(--accent-glow); background:var(--bg-primary); } /* Primary CTA button — large, prominent, the single most important action */ .btn { padding:1.05rem 1.85rem; border-radius:12px; font-weight:600; cursor:pointer; transition:all 0.2s; font-size:0.95rem; border:none; display:flex; align-items:center; justify-content:center; gap:0.5rem; white-space:nowrap; font-family:inherit; } .btn:focus-visible { outline:none; box-shadow:var(--focus-ring); } .btn-primary { background:linear-gradient(135deg,var(--accent-pink),var(--accent-hot)); color:white; min-width:170px; font-size:1.02rem; font-weight:700; letter-spacing:0.015em; box-shadow:0 2px 12px rgba(236,72,153,0.2); } .btn-primary:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 6px 28px rgba(236,72,153,0.45); } .btn-primary:active:not(:disabled) { transform:translateY(0); box-shadow:0 2px 8px rgba(236,72,153,0.3); } .btn-primary:disabled { opacity:0.5; cursor:not-allowed; box-shadow:none; } /* Secondary button — outlined, clearly subordinate */ .btn-secondary { background:transparent; border:1px solid var(--border-color); color:var(--text-secondary); } .btn-secondary:hover { border-color:var(--border-hover); color:var(--text-primary); background:var(--accent-subtle); } /* Small button variant */ .btn-sm { padding:0.55rem 1rem; font-size:0.82rem; border-radius:8px; min-width:auto; box-shadow:none; } .error-msg { font-size:0.8rem; color:var(--danger); margin-top:0.65rem; text-align:left; max-width:640px; margin-left:auto; margin-right:auto; } /* Progress Section */ .progress-container { max-width:700px; margin:0 auto; padding:2rem 1.5rem; text-align:center; display:none; } .progress-container.active { display:block; } .progress-title { font-family:'Fraunces',serif; font-size:1.4rem; color:var(--accent-pink); margin-bottom:0.5rem; } .progress-domain { font-size:0.9rem; color:var(--text-secondary); margin-bottom:1.5rem; } .progress-bar-wrap { background:var(--bg-tertiary); border:1px solid var(--border-color); border-radius:10px; overflow:hidden; height:28px; margin-bottom:1rem; position:relative; } .progress-bar-fill { height:100%; background:linear-gradient(90deg,var(--accent-pink),var(--accent-blue)); transition:width 0.5s ease; border-radius:10px; min-width:2%; } .progress-bar-text { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:600; font-family:'Space Mono',monospace; } .progress-stats { display:flex; gap:2rem; justify-content:center; margin-bottom:1.5rem; flex-wrap:wrap; } .progress-stat { text-align:center; } .progress-stat .val { font-family:'Space Mono',monospace; font-size:1.3rem; font-weight:700; color:var(--accent-pink); } .progress-stat .lbl { font-size:0.7rem; color:var(--text-muted); } .progress-log { background:var(--bg-tertiary); border:1px solid var(--border-color); border-radius:8px; padding:0.75rem; max-height:180px; overflow-y:auto; text-align:left; margin-bottom:1rem; } .log-line { font-size:0.75rem; color:var(--text-secondary); font-family:'Space Mono',monospace; margin-bottom:0.25rem; line-height:1.4; } .log-line.success { color:var(--success); } .log-line.error { color:var(--danger); } .log-line.warning { color:var(--warning); } .progress-actions { display:flex; gap:0.5rem; justify-content:center; } /* Resume Banner */ .resume-banner { max-width:600px; margin:0 auto 1rem; background:var(--bg-tertiary); border:1px solid var(--accent-pink); border-radius:10px; padding:0.85rem 1rem; display:none; align-items:center; gap:0.75rem; } .resume-banner.active { display:flex; } .resume-banner-text { flex:1; font-size:0.85rem; color:var(--text-secondary); } .resume-banner-text strong { color:var(--accent-pink); } /* Dashboard */ .dashboard { display:none; max-width:1200px; margin:0 auto; padding:1.25rem 1.75rem 3rem; } .dashboard.active { display:block; } .dash-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; flex-wrap:wrap; gap:1rem; padding-bottom:1.25rem; border-bottom:1px solid var(--border-color); } .dash-domain { font-family:'Fraunces',serif; font-size:1.7rem; background:linear-gradient(135deg,var(--accent-pink),var(--accent-blue)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } .dash-meta { font-size:0.82rem; color:var(--text-muted); margin-top:0.25rem; } /* Score Ring */ .score-overview { display:flex; gap:2rem; align-items:center; margin-bottom:2rem; flex-wrap:wrap; } .score-ring-wrap { position:relative; width:160px; height:160px; flex-shrink:0; } .score-ring-bg { fill:none; stroke:var(--border-color); stroke-width:8; } .score-ring-fg { fill:none; stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset 1s ease, stroke 0.3s; transform:rotate(-90deg); transform-origin:center; } .score-ring-text { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; } .score-ring-num { font-family:'Space Mono',monospace; font-size:2.4rem; font-weight:700; } .score-ring-lbl { font-size:0.7rem; color:var(--text-muted); } .score-cards { flex:1; display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:0.65rem; } .score-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:10px; padding:0.8rem 0.9rem; cursor:pointer; transition:all 0.2s; } .score-card:hover { border-color:var(--border-hover); transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.2); } .score-card:focus-visible { outline:none; box-shadow:var(--focus-ring); } .score-card.active { border-color:var(--accent-pink); background:var(--accent-subtle); } .score-card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.45rem; } .score-card-val { font-family:'Space Mono',monospace; font-size:1.2rem; font-weight:700; } .score-card-name { font-size:0.78rem; color:var(--text-secondary); font-weight:500; } .score-card-bar { height:3px; background:var(--border-color); border-radius:2px; margin-top:0.45rem; overflow:hidden; } .score-card-bar-fill { height:100%; border-radius:2px; transition:width 0.5s; } /* Tabs — readable inactive state, clear active indicator */ .tabs { display:flex; gap:0.15rem; border-bottom:1px solid var(--border-color); margin-bottom:1.75rem; overflow-x:auto; flex-wrap:nowrap; padding-bottom:0; } .tab { padding:0.75rem 1.15rem; font-size:0.85rem; font-weight:500; color:var(--text-secondary); cursor:pointer; border-bottom:2px solid transparent; transition:all 0.2s; white-space:nowrap; flex-shrink:0; border-radius:6px 6px 0 0; } .tab:hover { color:var(--text-primary); background:var(--accent-subtle); } .tab:focus-visible { outline:none; box-shadow:var(--focus-ring); } .tab.active { color:var(--accent-pink); border-bottom-color:var(--accent-pink); font-weight:600; background:rgba(244,114,182,0.05); } .tab .badge { font-size:0.65rem; background:var(--danger-bg); color:var(--danger); padding:0.12rem 0.4rem; border-radius:4px; margin-left:0.35rem; font-family:'Space Mono',monospace; font-weight:600; } .tab-content { display:none; } .tab-content.active { display:block; } /* Tables — clear headers, generous padding, visible hover */ .data-table { width:100%; border-collapse:collapse; font-size:0.82rem; } .data-table th { text-align:left; padding:0.7rem 0.85rem; color:var(--text-muted); font-weight:600; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; border-bottom:2px solid var(--border-color); cursor:pointer; user-select:none; white-space:nowrap; } .data-table th:hover { color:var(--accent-pink); } .data-table th .sort-icon { opacity:0.4; margin-left:0.2rem; } .data-table th.sorted .sort-icon { opacity:1; color:var(--accent-pink); } .data-table td { padding:0.65rem 0.85rem; border-bottom:1px solid rgba(61,50,57,0.5); color:var(--text-secondary); vertical-align:top; } .data-table tr:hover td { background:rgba(244,114,182,0.04); } .data-table .url-cell { max-width:350px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-primary); font-family:'Space Mono',monospace; font-size:0.74rem; } .data-table .url-cell a { color:var(--accent-pink); text-decoration:none; } .data-table .url-cell a:hover { text-decoration:underline; } .status-pill { display:inline-block; padding:0.18rem 0.5rem; border-radius:4px; font-size:0.72rem; font-weight:600; font-family:'Space Mono',monospace; } .status-200 { background:var(--success-bg); color:var(--success); } .status-301, .status-302 { background:var(--warning-bg); color:var(--warning); } .status-404, .status-500, .status-err { background:var(--danger-bg); color:var(--danger); } .issue-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:0.3rem; } /* Stat Grids — neutral values by default, color only for semantic meaning */ .stat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:0.85rem; margin-bottom:1.75rem; } .stat-box { background:var(--bg-card); border:1px solid var(--border-color); border-radius:10px; padding:1rem 1.1rem; } .stat-box-val { font-family:'Space Mono',monospace; font-size:1.5rem; font-weight:700; color:var(--text-primary); } .stat-box-val.val-warn { color:var(--danger); } .stat-box-val.val-accent { color:var(--accent-pink); } .stat-box-lbl { font-size:0.78rem; color:var(--text-muted); margin-top:0.2rem; } .stat-box-sub { font-size:0.74rem; color:var(--text-secondary); margin-top:0.35rem; } /* Issue Cards — overview tab */ .issue-list { display:flex; flex-direction:column; gap:0.6rem; margin-bottom:1.75rem; } .issue-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:10px; padding:0.85rem 1.1rem; display:flex; gap:0.85rem; align-items:flex-start; } .issue-sev { width:4px; border-radius:2px; min-height:100%; flex-shrink:0; align-self:stretch; } .issue-sev.high { background:var(--danger); } .issue-sev.medium { background:var(--warning); } .issue-sev.low { background:var(--info); } .issue-body { flex:1; } .issue-title { font-size:0.88rem; font-weight:600; margin-bottom:0.25rem; } .issue-desc { font-size:0.78rem; color:var(--text-secondary); line-height:1.45; } .issue-count { font-family:'Space Mono',monospace; font-size:0.92rem; font-weight:700; color:var(--text-muted); flex-shrink:0; } /* Issues Tab — Full Priority Board */ .issues-summary-bar { display:flex; gap:0.5rem; margin-bottom:1.25rem; flex-wrap:wrap; } .issues-sev-pill { display:flex; align-items:center; gap:0.45rem; padding:0.55rem 1rem; background:var(--bg-card); border:2px solid var(--border-color); border-radius:10px; cursor:pointer; transition:all 0.2s; user-select:none; flex:1; min-width:120px; } .issues-sev-pill:hover { border-color:var(--border-hover); } .issues-sev-pill.active { border-color:var(--accent-pink); background:rgba(244,114,182,0.06); } .issues-sev-pill.active.sev-critical { border-color:var(--danger); background:var(--danger-bg); } .issues-sev-pill.active.sev-warning { border-color:var(--warning); background:var(--warning-bg); } .issues-sev-pill.active.sev-notice { border-color:var(--info); background:var(--info-bg); } .issues-sev-pill .pill-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; } .issues-sev-pill .pill-count { font-family:'Space Mono',monospace; font-size:1.2rem; font-weight:700; } .issues-sev-pill .pill-label { font-size:0.72rem; color:var(--text-muted); } .issues-sev-pill.sev-critical .pill-dot { background:var(--danger); } .issues-sev-pill.sev-critical .pill-count { color:var(--danger); } .issues-sev-pill.sev-warning .pill-dot { background:var(--warning); } .issues-sev-pill.sev-warning .pill-count { color:var(--warning); } .issues-sev-pill.sev-notice .pill-dot { background:var(--info); } .issues-sev-pill.sev-notice .pill-count { color:var(--info); } .issues-sev-pill.sev-all .pill-dot { background:var(--accent-pink); } .issues-sev-pill.sev-all .pill-count { color:var(--accent-pink); } .issues-cat-filters { display:flex; gap:0.4rem; flex-wrap:wrap; margin-bottom:1.1rem; } .issues-cat-chip { padding:0.35rem 0.75rem; border:1px solid var(--border-color); border-radius:20px; font-size:0.74rem; cursor:pointer; color:var(--text-muted); background:transparent; transition:all 0.2s; font-family:inherit; } .issues-cat-chip:hover { border-color:var(--border-hover); color:var(--text-primary); background:var(--accent-subtle); } .issues-cat-chip:focus-visible { outline:none; box-shadow:var(--focus-ring); } .issues-cat-chip.active { border-color:var(--accent-pink); background:rgba(244,114,182,0.1); color:var(--accent-pink); } .ix-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:10px; margin-bottom:0.5rem; overflow:hidden; transition:border-color 0.2s; } .ix-card:hover { border-color:var(--border-hover); } .ix-card.expanded { border-color:var(--accent-pink); } .ix-head { display:flex; gap:0.75rem; align-items:center; padding:0.85rem 1rem; cursor:pointer; user-select:none; } .ix-sev-badge { padding:0.2rem 0.55rem; border-radius:5px; font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; flex-shrink:0; font-family:'Space Mono',monospace; } .ix-sev-badge.critical { background:var(--danger-bg); color:var(--danger); border:1px solid rgba(239,68,68,0.3); } .ix-sev-badge.warning { background:var(--warning-bg); color:var(--warning); border:1px solid rgba(245,158,11,0.3); } .ix-sev-badge.notice { background:var(--info-bg); color:var(--info); border:1px solid rgba(59,130,246,0.3); } .ix-info { flex:1; min-width:0; } .ix-title { font-size:0.88rem; font-weight:600; margin-bottom:0.15rem; } .ix-subtitle { font-size:0.72rem; color:var(--text-muted); display:flex; gap:0.75rem; flex-wrap:wrap; align-items:center; } .ix-tag { font-size:0.62rem; padding:0.1rem 0.4rem; border-radius:3px; background:var(--bg-tertiary); border:1px solid var(--border-color); color:var(--text-muted); } .ix-tag.effort-easy { color:var(--success); border-color:rgba(34,197,94,0.3); } .ix-tag.effort-medium { color:var(--warning); border-color:rgba(245,158,11,0.3); } .ix-tag.effort-hard { color:var(--danger); border-color:rgba(239,68,68,0.3); } .ix-impact { display:flex; gap:2px; align-items:center; } .ix-impact-dot { width:6px; height:6px; border-radius:50%; background:var(--border-color); } .ix-impact-dot.filled { background:var(--accent-pink); } .ix-count-badge { font-family:'Space Mono',monospace; font-size:0.9rem; font-weight:700; flex-shrink:0; min-width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:var(--bg-tertiary); border:1px solid var(--border-color); } .ix-count-badge.high-count { color:var(--danger); border-color:rgba(239,68,68,0.3); } .ix-count-badge.med-count { color:var(--warning); border-color:rgba(245,158,11,0.3); } .ix-count-badge.low-count { color:var(--text-muted); } .ix-chevron { transition:transform 0.2s; color:var(--text-muted); font-size:0.8rem; flex-shrink:0; } .ix-card.expanded .ix-chevron { transform:rotate(90deg); color:var(--accent-pink); } .ix-detail { display:none; padding:0 1rem 1rem; border-top:1px solid var(--border-color); } .ix-card.expanded .ix-detail { display:block; } .ix-detail-section { margin-top:0.85rem; } .ix-detail-label { font-size:0.7rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.4rem; } .ix-why { font-size:0.8rem; color:var(--text-secondary); line-height:1.55; } .ix-fix { font-size:0.8rem; color:var(--text-primary); line-height:1.55; background:rgba(34,197,94,0.05); border:1px solid rgba(34,197,94,0.15); border-radius:8px; padding:0.75rem; } .ix-fix strong { color:var(--success); } .ix-affected-list { max-height:200px; overflow-y:auto; } .ix-affected-url { display:flex; align-items:center; gap:0.5rem; padding:0.35rem 0.5rem; font-size:0.72rem; font-family:'Space Mono',monospace; color:var(--text-secondary); border-bottom:1px solid rgba(53,42,51,0.3); } .ix-affected-url:last-child { border-bottom:none; } .ix-affected-url a { color:var(--accent-pink); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ix-affected-url a:hover { text-decoration:underline; } .ix-affected-url .af-status { font-size:0.65rem; padding:0.1rem 0.3rem; border-radius:3px; flex-shrink:0; } .ix-no-issues { text-align:center; padding:3rem 1rem; color:var(--text-muted); } .ix-no-issues .ni-icon { font-size:2.5rem; margin-bottom:0.5rem; } .ix-no-issues .ni-title { font-size:1.1rem; font-weight:600; color:var(--success); } /* Table Controls — search, filters, pagination */ .table-controls { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.85rem; flex-wrap:wrap; gap:0.6rem; } .table-search { background:var(--bg-input); border:1px solid var(--border-input); color:var(--text-primary); padding:0.5rem 0.85rem; border-radius:8px; font-size:0.82rem; font-family:inherit; min-width:220px; transition:all 0.2s; } .table-search:focus { outline:none; border-color:var(--accent-pink); box-shadow:0 0 0 3px var(--accent-glow); } .table-filter { display:flex; gap:0.4rem; } .filter-chip { background:transparent; border:1px solid var(--border-color); color:var(--text-muted); padding:0.35rem 0.7rem; border-radius:6px; font-size:0.74rem; cursor:pointer; transition:all 0.2s; font-family:inherit; } .filter-chip:hover { border-color:var(--border-hover); color:var(--text-primary); background:var(--accent-subtle); } .filter-chip:focus-visible { outline:none; box-shadow:var(--focus-ring); } .filter-chip.active { border-color:var(--accent-pink); background:rgba(244,114,182,0.1); color:var(--accent-pink); } .pagination { display:flex; gap:0.3rem; align-items:center; justify-content:center; margin-top:1.25rem; } .page-btn { background:transparent; border:1px solid var(--border-color); color:var(--text-muted); padding:0.4rem 0.65rem; border-radius:6px; font-size:0.78rem; cursor:pointer; font-family:inherit; transition:all 0.2s; } .page-btn:hover { border-color:var(--border-hover); color:var(--text-primary); } .page-btn:focus-visible { outline:none; box-shadow:var(--focus-ring); } .page-btn.active { background:var(--accent-pink); color:white; border-color:var(--accent-pink); } .page-info { font-size:0.78rem; color:var(--text-muted); } /* Section headers — clear visual anchor */ .section-hdr { font-size:1.05rem; font-weight:600; margin-bottom:1.1rem; padding-left:0.75rem; border-left:3px solid var(--accent-pink); color:var(--text-primary); } .section-sub { font-size:0.82rem; color:var(--text-secondary); margin-bottom:1.35rem; line-height:1.55; } /* Toast */ .toast { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(100px); background:var(--bg-secondary); border:1px solid var(--border-color); padding:0.75rem 1.25rem; border-radius:8px; font-size:0.85rem; z-index:1001; opacity:0; transition:all 0.3s; } .toast.show { transform:translateX(-50%) translateY(0); opacity:1; } .toast.success { border-color:var(--success); } .toast.error { border-color:var(--danger); } /* Responsive */ @media(max-width:768px) { .scan-input-row { flex-direction:column; } .scan-input-row .btn { min-width:100%; } .score-overview { flex-direction:column; align-items:center; } .stat-grid { grid-template-columns:repeat(2,1fr); } .data-table { font-size:0.74rem; } .tabs { gap:0; } .tab { padding:0.6rem 0.75rem; font-size:0.78rem; } .header { padding:0 1rem; height:56px; } .dashboard { padding:1rem 1rem 3rem; } .dash-header { padding-bottom:1rem; } } /* Scrollbar */ ::-webkit-scrollbar { width:6px; height:6px; } ::-webkit-scrollbar-track { background:var(--bg-primary); } ::-webkit-scrollbar-thumb { background:var(--border-color); border-radius:3px; } ::-webkit-scrollbar-thumb:hover { background:var(--accent-pink); } /* Quick Wins Board */ .qw-board { margin-bottom:2rem; } .qw-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; } .qw-title { font-family:'Fraunces',serif; font-size:1.2rem; color:var(--success); display:flex; align-items:center; gap:0.5rem; } .qw-subtitle { font-size:0.75rem; color:var(--text-muted); } .qw-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:0.5rem; } .qw-card { background:var(--bg-card); border:1px solid rgba(34,197,94,0.25); border-radius:10px; padding:0.85rem; display:flex; gap:0.65rem; align-items:flex-start; transition:all 0.2s; cursor:pointer; } .qw-card:hover { border-color:var(--success); transform:translateY(-1px); } .qw-card.done { opacity:0.45; border-color:var(--border-color); } .qw-card.done .qw-card-title { text-decoration:line-through; } .qw-check { width:20px; height:20px; border:2px solid var(--success); border-radius:5px; flex-shrink:0; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.15s; margin-top:1px; } .qw-check.checked { background:var(--success); color:white; font-size:0.7rem; font-weight:700; } .qw-card-body { flex:1; min-width:0; } .qw-card-title { font-size:0.85rem; font-weight:600; margin-bottom:0.25rem; } .qw-card-meta { display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; } .qw-card-time { font-size:0.68rem; color:var(--text-muted); display:flex; align-items:center; gap:0.2rem; } .qw-card-impact { font-size:0.68rem; padding:0.1rem 0.4rem; border-radius:4px; font-weight:600; } .qw-card-impact.high-roi { background:rgba(34,197,94,0.15); color:var(--success); } .qw-card-pages { font-family:'Space Mono',monospace; font-size:0.85rem; font-weight:700; color:var(--accent-pink); flex-shrink:0; } /* Priority Score Badge */ .priority-score { display:inline-flex; align-items:center; gap:0.2rem; font-family:'Space Mono',monospace; font-size:0.65rem; padding:0.1rem 0.4rem; border-radius:4px; font-weight:700; } .priority-score.p-high { background:rgba(239,68,68,0.15); color:var(--danger); } .priority-score.p-med { background:rgba(245,158,11,0.15); color:var(--warning); } .priority-score.p-low { background:rgba(59,130,246,0.15); color:var(--info); } /* Time Estimate */ .time-est { font-size:0.65rem; color:var(--text-muted); display:flex; align-items:center; gap:0.2rem; } /* Task completion checkbox in issue cards */ .ix-check { width:18px; height:18px; border:2px solid var(--border-hover); border-radius:4px; flex-shrink:0; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.15s; } .ix-check:hover { border-color:var(--success); } .ix-check.checked { background:var(--success); border-color:var(--success); color:white; font-size:0.65rem; font-weight:700; } .ix-card.task-done { opacity:0.4; } .ix-card.task-done .ix-title { text-decoration:line-through; color:var(--text-muted); } /* Task Progress Bar */ .task-progress { background:var(--bg-card); border:1px solid var(--border-color); border-radius:10px; padding:0.85rem 1rem; margin-bottom:1.25rem; display:flex; align-items:center; gap:1rem; } .task-progress-bar { flex:1; height:8px; background:var(--bg-primary); border-radius:4px; overflow:hidden; } .task-progress-fill { height:100%; background:linear-gradient(90deg,var(--success),#34d399); border-radius:4px; transition:width 0.5s; } .task-progress-text { font-family:'Space Mono',monospace; font-size:0.85rem; font-weight:600; color:var(--success); white-space:nowrap; } .task-progress-label { font-size:0.78rem; color:var(--text-secondary); white-space:nowrap; } /* Task Group Headers */ .task-group { margin-bottom:1.5rem; } .task-group-header { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.65rem; padding-bottom:0.4rem; border-bottom:1px solid var(--border-color); } .task-group-title { font-size:0.92rem; font-weight:700; } .task-group-count { font-family:'Space Mono',monospace; font-size:0.75rem; color:var(--text-muted); } .task-group-time { font-size:0.72rem; color:var(--text-muted); margin-left:auto; display:flex; align-items:center; gap:0.3rem; } /* Icon System */ .ic-lg { width:1.25em; height:1.25em; } .ic-xl { width:1.5em; height:1.5em; } .ic-filled svg { fill:currentColor; stroke:none; } /* Severity shapes — shape+color, never color alone */ .sev-indicator { display:inline-flex; align-items:center; gap:0.35rem; } .sev-shape { width:10px; height:10px; flex-shrink:0; } .sev-shape.critical { background:var(--danger); clip-path:polygon(50% 0%, 0% 100%, 100% 100%); transform:rotate(180deg); } .sev-shape.warning { background:var(--warning); clip-path:polygon(50% 0%, 0% 100%, 100% 100%); } .sev-shape.notice { background:var(--info); border-radius:50%; } .sev-shape.success { background:var(--success); border-radius:50%; } /* Inline SVG icon system — 2026 best practice: scalable, accessible, theme-aware */ .ic { display:inline-flex; align-items:center; justify-content:center; width:1em; height:1em; vertical-align:-0.125em; flex-shrink:0; } .ic svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .ic-sm { width:0.8em; height:0.8em; } .ic-lg { width:1.25em; height:1.25em; } .ic-check svg { stroke:var(--success); } .ic-chevron { transition:transform 0.2s; } .ic-chevron.open { transform:rotate(90deg); } .ic-down { transition:transform 0.2s; } /* Accessible severity shapes — never rely on color alone */ .sev-shape { display:inline-flex; align-items:center; justify-content:center; width:10px; height:10px; flex-shrink:0; } .sev-shape.crit { clip-path:polygon(50% 0%,0% 100%,100% 100%); background:var(--danger); } .sev-shape.warn { clip-path:polygon(50% 0%,0% 100%,100% 100%); background:var(--warning); transform:rotate(180deg); } .sev-shape.info { border-radius:50%; background:var(--info); } .sev-shape.ok { clip-path:polygon(20% 50%,45% 75%,80% 25%,90% 35%,45% 90%,10% 55%); background:var(--success); width:12px; height:12px; } .hidden { display:none !important; } /* Market Chips */ .market-tag { display:inline-block; padding:0.08rem 0.35rem; border-radius:3px; font-size:0.6rem; font-weight:600; background:rgba(232,123,164,0.1); border:1px solid rgba(232,123,164,0.2); color:var(--accent-pink); margin-left:0.3rem; white-space:nowrap; } /* Location autocomplete dropdown */ .loc-loading { padding:0.75rem; text-align:center; font-size:0.78rem; color:var(--text-muted); } .loc-empty { padding:0.75rem; text-align:center; font-size:0.78rem; color:var(--text-muted); } /* Keyword Intelligence Tab */ .kw-hero-stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:0.75rem; margin-bottom:1.5rem; } .kw-hero-stat { background:var(--bg-card); border:1px solid var(--border-color); border-radius:10px; padding:1rem; text-align:center; } .kw-hero-stat .khs-val { font-family:'Space Mono',monospace; font-size:1.8rem; font-weight:700; } .kw-hero-stat .khs-lbl { font-size:0.72rem; color:var(--text-muted); margin-top:0.15rem; } .kw-hero-stat .khs-sub { font-size:0.7rem; color:var(--text-secondary); margin-top:0.35rem; } .kw-hero-stat.khs-money .khs-val { color:var(--success); } /* Ranking Distribution */ .rank-dist { display:flex; gap:0.35rem; align-items:flex-end; height:120px; margin-bottom:1rem; padding:0 0.5rem; } .rank-bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; } .rank-bar { width:100%; border-radius:4px 4px 0 0; min-height:4px; transition:height 0.5s; position:relative; } .rank-bar .rb-count { position:absolute; top:-18px; left:50%; transform:translateX(-50%); font-family:'Space Mono',monospace; font-size:0.65rem; font-weight:700; white-space:nowrap; } .rank-bar-lbl { font-size:0.62rem; color:var(--text-muted); margin-top:0.3rem; text-align:center; white-space:nowrap; } /* Cannibalization */ .cannibal-cluster { background:var(--bg-card); border:1px solid var(--border-color); border-radius:10px; margin-bottom:0.5rem; overflow:hidden; } .cannibal-head { display:flex; gap:0.75rem; align-items:center; padding:0.85rem 1rem; cursor:pointer; user-select:none; } .cannibal-head:hover { background:rgba(244,114,182,0.03); } .cannibal-kw { flex:1; font-size:0.85rem; font-weight:600; } .cannibal-risk { padding:0.2rem 0.55rem; border-radius:5px; font-size:0.65rem; font-weight:700; text-transform:uppercase; font-family:'Space Mono',monospace; } .cannibal-risk.risk-high { background:var(--danger-bg); color:var(--danger); border:1px solid rgba(239,68,68,0.3); } .cannibal-risk.risk-medium { background:var(--warning-bg); color:var(--warning); border:1px solid rgba(245,158,11,0.3); } .cannibal-risk.risk-low { background:var(--info-bg); color:var(--info); border:1px solid rgba(59,130,246,0.3); } .cannibal-detail { display:none; padding:0 1rem 1rem; border-top:1px solid var(--border-color); } .cannibal-cluster.expanded .cannibal-detail { display:block; } .cannibal-page { display:flex; gap:0.75rem; align-items:center; padding:0.5rem 0.5rem; border-bottom:1px solid rgba(53,42,51,0.3); font-size:0.78rem; } .cannibal-page:last-child { border-bottom:none; } .cannibal-page .cp-url { flex:1; font-family:'Space Mono',monospace; font-size:0.7rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cannibal-page .cp-url a { color:var(--accent-pink); text-decoration:none; } .cannibal-page .cp-pos { font-family:'Space Mono',monospace; font-weight:700; min-width:40px; text-align:center; } .cannibal-page .cp-traffic { font-family:'Space Mono',monospace; font-size:0.7rem; color:var(--text-muted); min-width:60px; text-align:right; } .cannibal-page .cp-vol { font-size:0.7rem; color:var(--text-muted); min-width:55px; text-align:right; } .cannibal-chevron { transition:transform 0.2s; color:var(--text-muted); font-size:0.8rem; } .cannibal-cluster.expanded .cannibal-chevron { transform:rotate(90deg); color:var(--accent-pink); } /* Opportunity cards */ .opp-table-highlight { background:rgba(34,197,94,0.04); } .opp-gain { color:var(--success); font-family:'Space Mono',monospace; font-weight:700; font-size:0.78rem; } /* AI Overview badge */ .ai-badge { display:inline-flex; align-items:center; gap:0.3rem; padding:0.15rem 0.5rem; border-radius:4px; font-size:0.65rem; font-weight:600; } .ai-badge.ai-yes { background:rgba(139,92,246,0.15); color:#a78bfa; border:1px solid rgba(139,92,246,0.3); } .ai-badge.ai-no { background:var(--bg-tertiary); color:var(--text-muted); border:1px solid var(--border-color); } /* Keyword subtabs */ .kw-subtabs { display:flex; gap:0.25rem; margin-bottom:1.25rem; border-bottom:1px solid var(--border-color); } .kw-subtab { padding:0.55rem 0.85rem; font-size:0.78rem; font-weight:500; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; transition:all 0.2s; white-space:nowrap; } .kw-subtab:hover { color:var(--text-secondary); } .kw-subtab.active { color:var(--accent-pink); border-bottom-color:var(--accent-pink); } .kw-subtab .kw-sub-badge { font-size:0.6rem; background:var(--danger-bg); color:var(--danger); padding:0.08rem 0.3rem; border-radius:3px; margin-left:0.25rem; font-family:'Space Mono',monospace; } .kw-subcontent { display:none; } .kw-subcontent.active { display:block; } /* Trend arrows */ .trend-up { color:var(--success); } .trend-down { color:var(--danger); } .trend-new { color:var(--info); } .trend-lost { color:var(--danger); font-weight:700; } /* Page Health Tab */ .ph-page-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:10px; margin-bottom:0.5rem; overflow:hidden; transition:border-color 0.2s; } .ph-page-card:hover { border-color:var(--border-hover); } .ph-page-card.expanded { border-color:var(--accent-pink); } .ph-head { display:flex; gap:0.65rem; align-items:center; padding:0.75rem 1rem; cursor:pointer; user-select:none; } .ph-score-badge { width:42px; height:42px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-family:'Space Mono',monospace; font-size:0.95rem; font-weight:700; flex-shrink:0; border:2px solid; } .ph-score-good { color:var(--success); border-color:var(--success); background:var(--success-bg); } .ph-score-warn { color:var(--warning); border-color:var(--warning); background:var(--warning-bg); } .ph-score-bad { color:var(--danger); border-color:var(--danger); background:var(--danger-bg); } .ph-info { flex:1; min-width:0; } .ph-url { font-family:'Space Mono',monospace; font-size:0.78rem; color:var(--accent-pink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ph-url a { color:var(--accent-pink); text-decoration:none; } .ph-url a:hover { text-decoration:underline; } .ph-meta-row { display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:0.25rem; } .ph-tag { font-size:0.65rem; padding:0.1rem 0.4rem; border-radius:3px; background:var(--bg-tertiary); border:1px solid var(--border-color); color:var(--text-muted); } .ph-tag.issue-tag { color:var(--danger); border-color:rgba(239,68,68,0.3); } .ph-tag.ok-tag { color:var(--success); border-color:rgba(34,197,94,0.3); } .ph-tag.warn-tag { color:var(--warning); border-color:rgba(245,158,11,0.3); } .ph-issue-count { font-family:'Space Mono',monospace; font-size:0.75rem; color:var(--text-muted); flex-shrink:0; } .ph-chevron { transition:transform 0.2s; color:var(--text-muted); font-size:0.8rem; flex-shrink:0; } .ph-page-card.expanded .ph-chevron { transform:rotate(90deg); color:var(--accent-pink); } .ph-detail { display:none; padding:0 1rem 1rem; border-top:1px solid var(--border-color); } .ph-page-card.expanded .ph-detail { display:block; } .ph-issue-item { display:flex; align-items:center; gap:0.5rem; padding:0.45rem 0.5rem; border-bottom:1px solid rgba(53,42,51,0.3); font-size:0.78rem; } .ph-issue-item:last-child { border-bottom:none; } .ph-issue-sev { width:8px; height:8px; border-radius:50%; flex-shrink:0; } .ph-issue-sev.crit { background:var(--danger); } .ph-issue-sev.warn { background:var(--warning); } .ph-issue-sev.note { background:var(--info); } .ph-timing { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:0.4rem; margin-top:0.65rem; } .ph-timing-box { background:var(--bg-tertiary); border:1px solid var(--border-color); border-radius:6px; padding:0.45rem 0.6rem; } .ph-timing-val { font-family:'Space Mono',monospace; font-size:0.95rem; font-weight:700; } .ph-timing-lbl { font-size:0.65rem; color:var(--text-muted); } .ph-sort-bar { display:flex; gap:0.35rem; margin-bottom:1rem; flex-wrap:wrap; align-items:center; } .ph-sort-btn { padding:0.35rem 0.65rem; border:1px solid var(--border-color); border-radius:6px; font-size:0.72rem; cursor:pointer; color:var(--text-muted); background:transparent; transition:all 0.2s; font-family:inherit; } .ph-sort-btn:hover { border-color:var(--accent-pink); color:var(--text-secondary); } .ph-sort-btn.active { border-color:var(--accent-pink); background:rgba(244,114,182,0.1); color:var(--accent-pink); } .ix-copy-btn { font-size:0.65rem; padding:0.25rem 0.55rem; border-radius:5px; border:1px solid var(--border-color); background:var(--bg-tertiary); color:var(--text-muted); cursor:pointer; transition:all 0.2s; font-family:inherit; white-space:nowrap; flex-shrink:0; } .ix-copy-btn:hover { border-color:var(--accent-pink); color:var(--accent-pink); } .ix-copy-btn.copied { border-color:var(--success); color:var(--success); background:var(--success-bg); } .score-impact { font-size:0.65rem; padding:0.15rem 0.45rem; border-radius:4px; background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.2); color:var(--success); font-family:'Space Mono',monospace; white-space:nowrap; } .score-impact.high-impact { background:rgba(34,197,94,0.15); border-color:rgba(34,197,94,0.35); } .score-proj { background:var(--bg-card); border:1px solid var(--border-color); border-radius:10px; padding:1rem 1.25rem; margin-bottom:1.25rem; } .score-proj-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.75rem; flex-wrap:wrap; gap:0.5rem; } .score-proj-title { font-size:0.92rem; font-weight:600; display:flex; align-items:center; gap:0.4rem; } .score-proj-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:0.5rem; } .score-proj-item { text-align:center; padding:0.5rem; border-radius:6px; background:var(--bg-tertiary); border:1px solid var(--border-color); } .score-proj-current { font-family:'Space Mono',monospace; font-size:1rem; font-weight:700; } .score-proj-arrow { color:var(--success); font-size:0.8rem; margin:0.15rem 0; } .score-proj-target { font-family:'Space Mono',monospace; font-size:1.1rem; font-weight:700; color:var(--success); } .score-proj-label { font-size:0.65rem; color:var(--text-muted); } .cb-bar { display:flex; height:28px; border-radius:8px; overflow:hidden; border:1px solid var(--border-color); margin-bottom:0.75rem; } .cb-segment { display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:600; overflow:hidden; white-space:nowrap; } .cb-segment.healthy { background:rgba(34,197,94,0.25); color:var(--success); } .cb-segment.redirects { background:rgba(245,158,11,0.25); color:var(--warning); } .cb-segment.errors { background:rgba(239,68,68,0.25); color:var(--danger); } .cb-segment.blocked { background:rgba(59,130,246,0.25); color:var(--info); } .cb-legend { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; } .cb-legend-item { display:flex; align-items:center; gap:0.3rem; font-size:0.75rem; color:var(--text-secondary); } .cb-legend-dot { width:10px; height:10px; border-radius:3px; } .depth-chart { display:flex; gap:0.25rem; align-items:flex-end; height:140px; margin-bottom:1rem; padding:0.5rem 0; } .depth-bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; } .depth-bar { width:100%; max-width:60px; border-radius:4px 4px 0 0; min-height:2px; } .depth-bar-label { font-size:0.65rem; color:var(--text-muted); margin-top:0.3rem; text-align:center; font-family:'Space Mono',monospace; } .depth-bar-count { font-size:0.7rem; font-weight:600; margin-bottom:0.2rem; font-family:'Space Mono',monospace; } .export-all-btn { padding:0.5rem 1rem; border-radius:8px; border:1px solid var(--accent-pink); background:rgba(244,114,182,0.1); color:var(--accent-pink); cursor:pointer; font-size:0.8rem; font-weight:600; font-family:inherit; transition:all 0.2s; display:flex; align-items:center; gap:0.4rem; } .export-all-btn:hover { background:rgba(244,114,182,0.2); transform:translateY(-1px); }

Full Site Audit

Crawl your entire website. Every page analyzed for SEO issues, broken links, duplicate content, performance problems, and more.

Crawling...

Starting...

Pages Crawled

In Queue

0:00

Elapsed

Pending

Status