Crocs and Clicks — Full Site Audit :root { /* Light surface hierarchy */ --bg-primary: #f8f9fb; --bg-secondary: #ffffff; --bg-tertiary: #f3f4f6; --bg-card: #ffffff; --bg-elevated: #f9fafb; --bg-input: #f3f4f6; /* Brand pink */ --accent-pink: #EC4899; --accent-light: #FCE7F3; --accent-hot: #DB2777; --accent-glow: rgba(236,72,153,0.14); --accent-subtle: rgba(236,72,153,0.06); /* Blue accent */ --accent-blue: #3B82F6; --accent-blue-deep: #2563EB; --blue-glow: rgba(59,130,246,0.10); --blue-subtle: rgba(59,130,246,0.06); /* Text hierarchy */ --text-primary: #111827; --text-secondary: #4B5563; --text-muted: #9CA3AF; /* Borders */ --border-color: #E5E7EB; --border-hover: #D1D5DB; --border-input: #D1D5DB; /* Semantic colors */ --success: #16A34A; --success-bg: rgba(22,163,74,0.08); --warning: #D97706; --warning-bg: rgba(217,119,6,0.08); --danger: #DC2626; --danger-bg: rgba(220,38,38,0.08); --info: #2563EB; --info-bg: rgba(37,99,235,0.08); /* 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; } .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 { 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; box-shadow:0 1px 0 var(--border-color),0 2px 8px rgba(0,0,0,0.04); } .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:44px; height:44px; border-radius:8px; 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; } .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(--accent-pink); color:var(--accent-pink); background:var(--accent-subtle); } .header-btn:focus-visible { outline:none; box-shadow:var(--focus-ring); } .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); } .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-hot),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:#ffffff; 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; box-shadow:0 1px 4px rgba(0,0,0,0.06); } .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); } .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.25); } .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; } .btn-secondary { background:transparent; border:1px solid var(--border-color); color:var(--text-secondary); } .btn-secondary:hover { border-color:var(--accent-pink); color:var(--accent-pink); background:var(--accent-subtle); } .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-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; box-shadow:inset 0 1px 3px rgba(0,0,0,0.06); } .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; color:var(--text-primary); } .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:#ffffff; border:1px solid var(--border-color); border-radius:8px; padding:0.75rem; max-height:180px; overflow-y:auto; text-align:left; margin-bottom:1rem; box-shadow:inset 0 1px 3px rgba(0,0,0,0.03); } .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 { max-width:600px; margin:0 auto 1rem; background:rgba(236,72,153,0.04); border:1px solid var(--accent-pink); border-radius:10px; padding:0.85rem 1rem; display:none; align-items:center; gap:0.75rem; box-shadow:0 2px 8px rgba(236,72,153,0.10); } .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 { 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:2px 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-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; box-shadow:0 1px 4px rgba(0,0,0,0.05); } .score-card:hover { border-color:var(--accent-pink); transform:translateY(-1px); box-shadow:0 4px 12px rgba(236,72,153,0.12); } .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 { display:flex; gap:0.15rem; border-bottom:2px 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; margin-bottom:-2px; transition:all 0.2s; white-space:nowrap; flex-shrink:0; border-radius:6px 6px 0 0; } .tab:hover { color:var(--accent-pink); 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(236,72,153,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; } .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); background:var(--bg-tertiary); 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(229,231,235,0.9); color:var(--text-secondary); vertical-align:top; } .data-table tr:hover td { background:rgba(236,72,153,0.03); } .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-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; box-shadow:0 1px 4px rgba(0,0,0,0.05); } .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-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; box-shadow:0 1px 3px rgba(0,0,0,0.04); } .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-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; box-shadow:0 1px 3px rgba(0,0,0,0.04); } .issues-sev-pill:hover { border-color:var(--border-hover); } .issues-sev-pill.active { border-color:var(--accent-pink); background:rgba(236,72,153,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(--accent-pink); color:var(--accent-pink); 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(236,72,153,0.08); 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:all 0.2s; box-shadow:0 1px 3px rgba(0,0,0,0.04); } .ix-card:hover { border-color:var(--border-hover); box-shadow:0 2px 8px rgba(0,0,0,0.07); } .ix-card.expanded { border-color:var(--accent-pink); box-shadow:0 2px 12px rgba(236,72,153,0.10); } .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(220,38,38,0.3); } .ix-sev-badge.warning { background:var(--warning-bg); color:var(--warning); border:1px solid rgba(217,119,6,0.3); } .ix-sev-badge.notice { background:var(--info-bg); color:var(--info); border:1px solid rgba(37,99,235,0.3); } .ix-info { flex:1; min-width:0; } .ix-title { font-size:0.88rem; font-weight:600; margin-bottom:0.15rem; color:var(--text-primary); } .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(22,163,74,0.3); } .ix-tag.effort-medium { color:var(--warning); border-color:rgba(217,119,6,0.3); } .ix-tag.effort-hard { color:var(--danger); border-color:rgba(220,38,38,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(220,38,38,0.3); } .ix-count-badge.med-count { color:var(--warning); border-color:rgba(217,119,6,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(22,163,74,0.05); border:1px solid rgba(22,163,74,0.18); 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(229,231,235,0.7); } .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 { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.85rem; flex-wrap:wrap; gap:0.6rem; } .table-search { background:#ffffff; 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; box-shadow:0 1px 2px rgba(0,0,0,0.04); } .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(--accent-pink); color:var(--accent-pink); 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(236,72,153,0.08); 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(--accent-pink); color:var(--accent-pink); } .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-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 { 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; box-shadow:0 4px 20px rgba(0,0,0,0.12); } .toast.show { transform:translateX(-50%) translateY(0); opacity:1; } .toast.success { border-color:var(--success); } .toast.error { border-color:var(--danger); } @media(max-width:768px) { /* ── Layout ── */ .header { padding:0 1rem; height:54px; } .logo span[style*="Fraunces"] { font-size:0.95rem; } .logo-badge { display:none; } .header-actions .header-btn { display:none; } .header-btn-primary { padding:0.45rem 0.85rem; font-size:0.78rem; } .dashboard { padding:0.85rem 0.85rem 4rem; } .scan-hero { padding:2.5rem 1rem 2rem; } .scan-hero h1 { font-size:1.75rem; } .scan-hero p { font-size:0.87rem; margin-bottom:1.75rem; } /* ── Input ── */ .scan-input-row { flex-direction:column; gap:0.5rem; } .scan-input-row .btn { min-width:100%; padding:0.95rem; } .scan-input-row input { padding:0.9rem 1rem; font-size:0.95rem; } /* ── Dashboard header ── */ .dash-header { flex-direction:column; align-items:flex-start; padding-bottom:1rem; gap:0.5rem; } .dash-header .header-actions { width:100%; } .dash-header .header-actions button { flex:1; justify-content:center; } .dash-domain { font-size:1.3rem; } /* ── Score overview ── */ .score-overview { flex-direction:column; align-items:center; gap:1rem; } .score-ring-wrap { width:130px; height:130px; } .score-ring-num { font-size:2rem; } .score-cards { grid-template-columns:repeat(3,1fr); gap:0.5rem; width:100%; } .score-card { padding:0.65rem 0.75rem; } .score-card-val { font-size:1rem; } .score-card-name { font-size:0.7rem; } /* ── Tabs ── */ .tabs { gap:0; padding-bottom:0; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; } .tab { padding:0.6rem 0.85rem; font-size:0.78rem; flex-shrink:0; scroll-snap-align:start; white-space:nowrap; } .tab .badge { font-size:0.6rem; padding:0.08rem 0.3rem; } /* ── Stat grids ── */ .stat-grid { grid-template-columns:repeat(2,1fr); gap:0.6rem; } .stat-box { padding:0.75rem 0.85rem; } .stat-box-val { font-size:1.2rem; } /* ── Tables ── */ .data-table { font-size:0.74rem; } .data-table th { padding:0.55rem 0.6rem; font-size:0.65rem; } .data-table td { padding:0.5rem 0.6rem; } .data-table .url-cell { max-width:160px; font-size:0.68rem; } .table-controls { flex-direction:column; align-items:flex-start; } .table-search { min-width:100%; } /* ── Issue cards ── */ .ix-head { padding:0.7rem 0.75rem; gap:0.5rem; } .ix-title { font-size:0.82rem; } .ix-subtitle { gap:0.4rem; font-size:0.65rem; } .ix-tag { font-size:0.58rem; padding:0.08rem 0.3rem; } .ix-count-badge { min-width:30px; height:30px; font-size:0.8rem; } .ix-copy-btn { display:none; } .ix-detail { padding:0 0.75rem 0.85rem; } .ix-why, .ix-fix { font-size:0.76rem; } .ix-affected-url { font-size:0.68rem; } /* ── Quick wins ── */ .qw-grid { grid-template-columns:1fr; } .qw-card { padding:0.75rem; } .issues-summary-bar { gap:0.4rem; } .issues-sev-pill { padding:0.45rem 0.65rem; min-width:0; flex:1; } .pill-count { font-size:1rem; } .pill-label { font-size:0.62rem; } .issues-cat-filters { gap:0.3rem; } .issues-cat-chip { font-size:0.68rem; padding:0.28rem 0.55rem; } .task-group-header { flex-wrap:wrap; gap:0.3rem; } /* ── Keyword Intelligence ── */ .kw-hero-stats { grid-template-columns:repeat(2,1fr); gap:0.6rem; } .kw-hero-stat { padding:0.75rem; } .kw-hero-stat .khs-val { font-size:1.5rem; } .kw-subtabs { gap:0; overflow-x:auto; -webkit-overflow-scrolling:touch; } .kw-subtab { padding:0.5rem 0.75rem; font-size:0.74rem; flex-shrink:0; } .cannibal-head { padding:0.7rem 0.75rem; gap:0.5rem; flex-wrap:wrap; } .cannibal-kw { font-size:0.8rem; min-width:100%; } /* ── Page Health ── */ .ph-head { padding:0.65rem 0.75rem; gap:0.5rem; } .ph-score-badge { width:36px; height:36px; font-size:0.85rem; } .ph-url { font-size:0.72rem; } .ph-timing { grid-template-columns:repeat(2,1fr); gap:0.3rem; } .ph-sort-bar { gap:0.3rem; } .ph-sort-btn { font-size:0.68rem; padding:0.3rem 0.55rem; } /* ── Progress ── */ .progress-container { padding:1.5rem 1rem; } .progress-stats { gap:1.25rem; } .progress-stat .val { font-size:1.1rem; } .progress-log { max-height:130px; } /* ── Score projection ── */ .score-proj-grid { grid-template-columns:repeat(3,1fr); gap:0.4rem; } .score-proj-item { padding:0.4rem; } .score-proj-current, .score-proj-target { font-size:0.9rem; } .score-proj-label { font-size:0.6rem; } .score-proj-header { flex-direction:column; align-items:flex-start; gap:0.5rem; } .export-all-btn { width:100%; justify-content:center; } /* ── Structure/depth charts ── */ .depth-chart { height:110px; } .depth-bar-count { font-size:0.6rem; } .depth-bar-label { font-size:0.58rem; } .cb-bar { height:24px; font-size:0.65rem; } /* ── Page speed ── */ .rank-dist { height:90px; } /* ── Resume banner ── */ .resume-banner { flex-direction:column; text-align:center; } .resume-banner .btn { width:100%; } } @media(max-width:420px) { .score-cards { grid-template-columns:repeat(2,1fr); } .kw-hero-stats { grid-template-columns:repeat(2,1fr); } .stat-grid { grid-template-columns:1fr 1fr; } .scan-hero h1 { font-size:1.5rem; } .issues-summary-bar { flex-wrap:wrap; } .issues-sev-pill { min-width:calc(50% - 0.2rem); } } ::-webkit-scrollbar { width:6px; height:6px; } ::-webkit-scrollbar-track { background:var(--bg-tertiary); } ::-webkit-scrollbar-thumb { background:var(--border-color); border-radius:3px; } ::-webkit-scrollbar-thumb:hover { background:var(--accent-pink); } .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(22,163,74,0.25); border-radius:10px; padding:0.85rem; display:flex; gap:0.65rem; align-items:flex-start; transition:all 0.2s; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,0.04); } .qw-card:hover { border-color:var(--success); transform:translateY(-1px); box-shadow:0 4px 12px rgba(22,163,74,0.12); } .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(22,163,74,0.10); 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 { 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(220,38,38,0.10); color:var(--danger); } .priority-score.p-med { background:rgba(217,119,6,0.10); color:var(--warning); } .priority-score.p-low { background:rgba(37,99,235,0.10); color:var(--info); } .time-est { font-size:0.65rem; color:var(--text-muted); display:flex; align-items:center; gap:0.2rem; } .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 { 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; box-shadow:0 1px 4px rgba(0,0,0,0.05); } .task-progress-bar { flex:1; height:8px; background:var(--bg-tertiary); border-radius:4px; overflow:hidden; } .task-progress-fill { height:100%; background:linear-gradient(90deg,var(--success),#4ade80); 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 { 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; } .ic-lg { width:1.25em; height:1.25em; } .ic-xl { width:1.5em; height:1.5em; } .ic-filled svg { fill:currentColor; stroke:none; } .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%; } .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; } .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-tag { display:inline-block; padding:0.08rem 0.35rem; border-radius:3px; font-size:0.6rem; font-weight:600; background:rgba(236,72,153,0.08); border:1px solid rgba(236,72,153,0.2); color:var(--accent-pink); margin-left:0.3rem; white-space:nowrap; } .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); } .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; box-shadow:0 1px 4px rgba(0,0,0,0.05); } .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); } .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; } .cannibal-cluster { background:var(--bg-card); border:1px solid var(--border-color); border-radius:10px; margin-bottom:0.5rem; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.04); } .cannibal-head { display:flex; gap:0.75rem; align-items:center; padding:0.85rem 1rem; cursor:pointer; user-select:none; } .cannibal-head:hover { background:rgba(236,72,153,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(220,38,38,0.3); } .cannibal-risk.risk-medium { background:var(--warning-bg); color:var(--warning); border:1px solid rgba(217,119,6,0.3); } .cannibal-risk.risk-low { background:var(--info-bg); color:var(--info); border:1px solid rgba(37,99,235,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(229,231,235,0.7); 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); } .opp-table-highlight { background:rgba(22,163,74,0.04); } .opp-gain { color:var(--success); font-family:'Space Mono',monospace; font-weight:700; font-size:0.78rem; } .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.12); color:#7c3aed; 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); } .kw-subtabs { display:flex; gap:0.25rem; margin-bottom:1.25rem; border-bottom:2px 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; margin-bottom:-2px; 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-up { color:var(--success); } .trend-down { color:var(--danger); } .trend-new { color:var(--info); } .trend-lost { color:var(--danger); font-weight:700; } .ph-page-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:10px; margin-bottom:0.5rem; overflow:hidden; transition:all 0.2s; box-shadow:0 1px 3px rgba(0,0,0,0.04); } .ph-page-card:hover { border-color:var(--border-hover); box-shadow:0 2px 8px rgba(0,0,0,0.07); } .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(220,38,38,0.3); } .ph-tag.ok-tag { color:var(--success); border-color:rgba(22,163,74,0.3); } .ph-tag.warn-tag { color:var(--warning); border-color:rgba(217,119,6,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(229,231,235,0.7); 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(--accent-pink); } .ph-sort-btn.active { border-color:var(--accent-pink); background:rgba(236,72,153,0.08); 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(22,163,74,0.06); border:1px solid rgba(22,163,74,0.18); color:var(--success); font-family:'Space Mono',monospace; white-space:nowrap; } .score-impact.high-impact { background:rgba(22,163,74,0.12); border-color:rgba(22,163,74,0.30); } .score-proj { background:var(--bg-card); border:1px solid var(--border-color); border-radius:10px; padding:1rem 1.25rem; margin-bottom:1.25rem; box-shadow:0 1px 4px rgba(0,0,0,0.05); } .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(22,163,74,0.20); color:var(--success); } .cb-segment.redirects { background:rgba(217,119,6,0.20); color:var(--warning); } .cb-segment.errors { background:rgba(220,38,38,0.20); color:var(--danger); } .cb-segment.blocked { background:rgba(37,99,235,0.20); 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(236,72,153,0.08); 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(236,72,153,0.15); transform:translateY(-1px); }
Crocs and Clicks
Croc's and Clicks Full Site Audit

Full Site Audit

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

Helps find your Google Business Profile
You have a crawl in progress for
Crawling...
Starting...
0
Pages Crawled
0
In Queue
0:00
Elapsed
Pending
Status