/* GruffyGoat SEO Audit design system. Pasture green on warm paper, with a tuned dark counterpart that follows the OS. Crawled content renders inside these components, so nothing here may depend on trusted content (no fixed heights around user text, everything wraps). Fonts are self-hosted from /assets/fonts, no external requests. */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/bricolage-grotesque-600.woff2') format('woff2'); } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/bricolage-grotesque-700.woff2') format('woff2'); } @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/public-sans-400.woff2') format('woff2'); } @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/public-sans-600.woff2') format('woff2'); } @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/public-sans-700.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2'); } :root { color-scheme: light dark; --font-display: 'Bricolage Grotesque', 'Public Sans', system-ui, sans-serif; --font-body: 'Public Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', Consolas, monospace; --radius: 8px; --radius-lg: 12px; --gap: 1rem; /* Light: warm paper, green-tinged ink, moss accent. */ --bg: #f5f4ef; --surface: #fffefb; --surface-2: #edebe3; --ink: #22261f; --ink-muted: #63665a; --ink-faint: #8b8e80; --line: #e0ddd2; --line-strong: #c6c3b5; --brand: #3d7a4e; --brand-strong: #326440; --brand-soft: #e2eee4; --brand-ink: #2c5e3c; --c-fail-text: #8c2f20; --c-fail-bg: #f6e3de; --c-fail-solid: #bc4b38; --c-warn-text: #7a5a14; --c-warn-bg: #f4ead1; --c-warn-solid: #d9a03f; --c-info-text: #38597a; --c-info-bg: #e2eaf2; --c-info-solid: #7291b0; --c-pass-text: #2c5e3c; --c-pass-bg: #e3efe5; --c-pass-solid: #4f8b60; --c-sev-text: #5d5f55; --c-sev-bg: #eae8df; --danger: #a03b2c; --shadow: 0 1px 2px rgba(34, 38, 31, 0.04), 0 2px 6px rgba(34, 38, 31, 0.05); --shadow-lg: 0 1px 2px rgba(34, 38, 31, 0.05), 0 8px 28px rgba(34, 38, 31, 0.07); --focus-ring: color-mix(in srgb, var(--brand) 55%, transparent); } /* Dark theme. Two triggers share one token set: an explicit choice stored by the nav toggle (data-theme on ) always wins; with no explicit choice the OS preference applies. The two blocks below must stay identical. */ :root[data-theme='dark'] { color-scheme: dark; /* Dark: green-tinted graphite, lifted signal colors. */ --bg: #15170f; --surface: #1d201a; --surface-2: #262a21; --ink: #e8e6dc; --ink-muted: #a4a795; --ink-faint: #7d8071; --line: #32362a; --line-strong: #454a3a; --brand: #3d7a4e; --brand-strong: #4e9463; --brand-soft: #24331f; --brand-ink: #8fc49d; --c-fail-text: #ee9c88; --c-fail-bg: #3a231e; --c-fail-solid: #b85543; --c-warn-text: #dfba6e; --c-warn-bg: #37301c; --c-warn-solid: #c4964c; --c-info-text: #9dbbd8; --c-info-bg: #23303d; --c-info-solid: #5f86a8; --c-pass-text: #98c7a4; --c-pass-bg: #223026; --c-pass-solid: #4f8b60; --c-sev-text: #b0b2a4; --c-sev-bg: #2c2f26; --danger: #d97c67; --shadow: none; --shadow-lg: none; } :root[data-theme='light'] { color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; /* Dark: green-tinted graphite, lifted signal colors. */ --bg: #15170f; --surface: #1d201a; --surface-2: #262a21; --ink: #e8e6dc; --ink-muted: #a4a795; --ink-faint: #7d8071; --line: #32362a; --line-strong: #454a3a; --brand: #3d7a4e; --brand-strong: #4e9463; --brand-soft: #24331f; --brand-ink: #8fc49d; --c-fail-text: #ee9c88; --c-fail-bg: #3a231e; --c-fail-solid: #b85543; --c-warn-text: #dfba6e; --c-warn-bg: #37301c; --c-warn-solid: #c4964c; --c-info-text: #9dbbd8; --c-info-bg: #23303d; --c-info-solid: #5f86a8; --c-pass-text: #98c7a4; --c-pass-bg: #223026; --c-pass-solid: #4f8b60; --c-sev-text: #b0b2a4; --c-sev-bg: #2c2f26; --danger: #d97c67; --shadow: none; --shadow-lg: none; } } /* ---------- Base ---------- */ * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.5; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 0.5rem; } h1 { font-size: 1.6rem; font-weight: 700; } h2 { font-size: 1.05rem; font-weight: 600; } a { color: var(--brand-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--brand-strong); } p.muted, .muted { color: var(--ink-muted); } code.inline { font-family: var(--font-mono); font-size: 0.85em; word-break: break-all; } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; } ::selection { background: color-mix(in srgb, var(--brand) 25%, transparent); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ---------- Motion ---------- One orchestrated moment on page load (sections rise in order, the score ring draws, the composition bar sweeps), micro-interactions everywhere else. Keyframes with only a `from` animate to each element's own computed value, so one keyframe serves every ring offset and bar width. The global reduced-motion rule above disables all of it. */ @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes sweep-in { from { transform: scaleX(0); } } @keyframes ring-draw { from { stroke-dashoffset: 339.3; } } @keyframes dash-in { from { stroke-dashoffset: 520; } to { stroke-dashoffset: 0; } } @keyframes pop-in { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } } .rise { animation: rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: var(--rise-delay, 0s); } /* ---------- Shell ---------- */ nav.top { display: flex; align-items: center; gap: 0.35rem; padding: 0.6rem 1.5rem; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); flex-wrap: wrap; position: sticky; top: 0; z-index: 10; } .brand { display: flex; align-items: center; gap: 0.6rem; margin-right: 1.25rem; text-decoration: none; color: var(--ink); } .brand:hover { color: var(--ink); } .brand-mark { width: 1.75rem; height: 1.75rem; border-radius: 7px; background: var(--brand); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; letter-spacing: -0.04em; display: inline-flex; align-items: center; justify-content: center; flex: none; } .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.1; } .brand-sub { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.62rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); } nav.top a.nav-link { text-decoration: none; font-weight: 600; font-size: 0.875rem; color: var(--ink-muted); padding: 0.35rem 0.75rem; border-radius: 999px; } nav.top a.nav-link:hover { color: var(--ink); background: var(--surface-2); } nav.top a.nav-link.active { color: var(--brand-ink); background: var(--brand-soft); } nav.top .spacer { margin-left: auto; } nav.top .who { color: var(--ink-faint); font-size: 0.8rem; margin-right: 0.6rem; } /* The signed-in user is a dropdown trigger: email on the button, Account and Log out inside the panel. */ nav.top .user-menu { margin-left: 0.2rem; } nav.top .user-btn { display: inline-flex; align-items: center; gap: 0.4rem; border: 0; background: transparent; padding: 0.35rem 0.75rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: var(--ink-muted); cursor: pointer; } nav.top .user-btn:hover { background: var(--surface-2); color: var(--ink); } nav.top .user-btn.active { background: var(--brand-soft); color: var(--brand-ink); } main { max-width: 72rem; margin: 0 auto; padding: 1.75rem 1.5rem 5rem; } /* Table-heavy pages (the audits index) get the full screen width. */ main.wide { max-width: 100rem; } /* Page header: eyebrow + title + meta line, actions on the right. */ .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .page-head h1 { margin-bottom: 0.15rem; } .eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-ink); margin: 0 0 0.3rem; } .page-meta { margin: 0; color: var(--ink-muted); font-size: 0.875rem; } .back-link { display: inline-block; font-size: 0.85rem; font-weight: 600; text-decoration: none; color: var(--ink-muted); margin-bottom: 0.75rem; } .back-link:hover { color: var(--brand-ink); } /* ---------- Buttons ---------- */ button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.45rem 1rem; font: inherit; font-size: 0.875rem; font-weight: 600; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; transition: background 0.12s ease, border-color 0.12s ease; } button:hover, .btn:hover { background: var(--surface-2); color: var(--ink); } .btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); } .btn-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; } .btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: transparent; } .btn-danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); } .btn-small { padding: 0.22rem 0.6rem; font-size: 0.8rem; } /* ---------- Dropdown menus ---------- */ .menu { position: relative; display: inline-flex; } .menu-panel { display: none; position: absolute; top: calc(100% + 0.45rem); right: 0; z-index: 40; min-width: 11rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 0.35rem; text-align: left; } .menu.open .menu-panel { display: block; transform-origin: top right; animation: menu-pop 0.14s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes menu-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .menu.open .menu-panel { animation: none; } } .menu-panel form { margin: 0; } .menu-item { display: block; width: 100%; padding: 0.45rem 0.7rem; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink); font-size: 0.875rem; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; } .menu-item:hover { background: var(--surface-2); color: var(--ink); } .menu-item.active { background: var(--brand-soft); color: var(--brand-ink); } .caret { flex: none; opacity: 0.55; transition: transform 0.15s ease; } .menu.open .caret { transform: rotate(180deg); } /* The sharing controls live in a wider dropdown off the results actions row. */ .share-menu .menu-panel { width: min(92vw, 24rem); padding: 0.9rem 1.1rem 1.1rem; } .share-menu .menu-panel h2 { font-size: 1.05rem; margin: 0 0 0.5rem; } .share-menu .kv { grid-template-columns: 5.5rem 1fr; } .share-menu .kv dd:first-of-type { display: flex; gap: 0.35rem; align-items: center; } .share-active-dot { width: 0.45rem; height: 0.45rem; border-radius: 999px; background: var(--c-pass-solid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-pass-solid) 25%, transparent); flex: none; } /* ---------- Forms ---------- */ label { display: block; margin: 1rem 0 0.3rem; font-weight: 600; font-size: 0.85rem; } input:not([type='checkbox']):not([type='radio']), select, textarea { width: 100%; padding: 0.5rem 0.65rem; font: inherit; font-size: 0.9rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus-ring); outline-offset: 0; border-color: var(--brand); } input[type='checkbox'] { width: 1rem; height: 1rem; accent-color: var(--brand); } textarea { min-height: 6rem; resize: vertical; } .field-hint { font-size: 0.8rem; color: var(--ink-faint); margin: 0.25rem 0 0; } .checkline { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.85rem; } .checkline input { width: auto; } .checkline label { margin: 0; font-weight: 400; font-size: 0.9rem; } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gap); } .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 var(--gap); } @media (max-width: 40rem) { .row2, .row3 { grid-template-columns: 1fr; } } /* A form or confirm dialog sits on a card and does not sprawl. */ .sheet { max-width: 42rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.5rem 1.75rem 1.75rem; } /* ---------- Panels, tables, key-value ---------- */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.1rem 1.35rem; margin: 1rem 0; } .panel > h2 { margin: 0 0 0.75rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); } table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } th, td { text-align: left; padding: 0.5rem 0.65rem; border-bottom: 1px solid var(--line); vertical-align: top; } th { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); border-bottom-color: var(--line-strong); } tbody tr:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); } tbody tr:last-child td { border-bottom: none; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } .table-scroll { overflow-x: auto; } /* Roomier index tables: taller rows, a title line with a mono sub-line, and whole-row click targets (tr[data-href], wired in the shared behaviors). */ .table-roomy th, .table-roomy td { padding: 0.75rem 0.8rem; vertical-align: middle; } tbody tr[data-href] { cursor: pointer; } tbody tr[data-href]:hover { background: color-mix(in srgb, var(--brand) 7%, transparent); } .cell-main { min-width: 18rem; } .row-title { display: block; font-weight: 600; color: var(--ink); } .row-sub { display: block; font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-muted); max-width: 44rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kv { display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr; gap: 0.3rem 1rem; font-size: 0.875rem; margin: 0; } .kv dt { color: var(--ink-muted); font-weight: 600; } .kv dd { margin: 0; word-break: break-word; } @media (max-width: 34rem) { .kv { grid-template-columns: 1fr; gap: 0 1rem; } .kv dd { margin-bottom: 0.4rem; } } /* ---------- Badges and count chips ---------- */ .badge { display: inline-block; padding: 0.08rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .badge.pass { color: var(--c-pass-text); background: var(--c-pass-bg); } .badge.warn { color: var(--c-warn-text); background: var(--c-warn-bg); } .badge.fail { color: var(--c-fail-text); background: var(--c-fail-bg); } .badge.info { color: var(--c-info-text); background: var(--c-info-bg); } .badge.sev { color: var(--c-sev-text); background: var(--c-sev-bg); } /* Finding-count chips. Text stays "fail 12" so counts read as one phrase. */ .counts { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } .counts .badge { font-size: 0.78rem; padding: 0.18rem 0.7rem; font-variant-numeric: tabular-nums; } /* ---------- Audit health bar (the signature element) ---------- One strip, segments sized by finding counts: what share of this audit is failing, warning, informational, passing. Reads at a glance. */ .health { display: flex; height: 0.65rem; border-radius: 999px; overflow: hidden; background: var(--surface-2); margin: 0.85rem 0 0.5rem; } /* Optional inner wrapper so the whole strip can sweep in from the left as one unit on page load. Segments work with or without it. */ .health .health-fill { display: flex; width: 100%; transform-origin: left; } .health .health-fill.sweep { animation: sweep-in 1s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.15s; } /* Slimmer strips: area cards and the per-row bars in the URL table. */ .health.slim { height: 0.5rem; margin: 0 0 0.6rem; } .health.mini { height: 0.4rem; margin: 0; min-width: 6rem; } .health.mini .seg { min-width: 2px; } .health .seg { min-width: 3px; } .health .seg.fail { background: var(--c-fail-solid); } .health .seg.warn { background: var(--c-warn-solid); } .health .seg.info { background: var(--c-info-solid); } .health .seg.pass { background: var(--c-pass-solid); } /* ---------- Findings ---------- */ .finding { background: var(--surface); border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--radius); padding: 0.65rem 0.9rem; margin: 0.5rem 0; } .finding[data-status='fail'] { border-left-color: var(--c-fail-solid); } .finding[data-status='warn'] { border-left-color: var(--c-warn-solid); } .finding[data-status='info'] { border-left-color: var(--c-info-solid); } .finding[data-status='pass'] { border-left-color: var(--c-pass-solid); } .finding .head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .finding .head strong { font-size: 0.9rem; } .finding .key { font-size: 0.72rem; color: var(--ink-faint); font-family: var(--font-mono); } .finding .summary { margin: 0.3rem 0 0; font-size: 0.9rem; } .finding .kv { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--line); font-size: 0.82rem; } /* ---------- Notices ---------- */ .notice { border: 1px solid color-mix(in srgb, var(--c-warn-solid) 45%, transparent); background: var(--c-warn-bg); color: var(--c-warn-text); border-radius: var(--radius); padding: 0.7rem 0.95rem; margin: 1rem 0; font-size: 0.9rem; } .notice code.inline { color: inherit; } .error { border: 1px solid color-mix(in srgb, var(--c-fail-solid) 45%, transparent); background: var(--c-fail-bg); color: var(--c-fail-text); border-radius: var(--radius); padding: 0.6rem 0.9rem; font-size: 0.9rem; margin: 1rem 0; } .empty { border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); padding: 2.25rem 1.5rem; text-align: center; color: var(--ink-muted); margin: 1.5rem 0; } .empty a { font-weight: 600; } /* ---------- Toolbar and filter pills ---------- */ .toolbar { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; } .toolbar form { margin: 0; } .toolbar input[type='search'] { max-width: 20rem; } .filter-btns button { border-radius: 999px; } .filter-btns button.on { background: var(--brand-soft); color: var(--brand-ink); border-color: color-mix(in srgb, var(--brand) 45%, transparent); } .actions { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; } .actions form { margin: 0; } /* Inside a table row, action buttons stay one row-aligned table cell: keep cell display (so row borders survive) and inline the buttons. */ td.actions { display: table-cell; white-space: nowrap; } td.actions form { display: inline-flex; } td.actions .btn, td.actions button { margin-right: 0.3rem; } /* ---------- Social preview cards ---------- */ .cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } @media (max-width: 44rem) { .cards { grid-template-columns: 1fr; } } .card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .card .card-img { aspect-ratio: 1200 / 630; background: var(--surface-2); object-fit: cover; width: 100%; display: block; } .card .card-body { padding: 0.75rem 0.9rem; } .card .card-net { color: var(--ink-faint); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .card .card-title { font-weight: 700; margin: 0.2rem 0 0.25rem; font-size: 0.95rem; } .card .card-desc { margin: 0; font-size: 0.85rem; color: var(--ink-muted); } /* ---------- Live progress ---------- */ .phases { display: flex; gap: 0; margin: 0.5rem 0 0.25rem; padding: 0 0 1rem; list-style: none; flex-wrap: wrap; border-bottom: 1px solid var(--line); } .phases li { flex: 1 1 0; min-width: 5.5rem; text-align: center; position: relative; padding-top: 1.45rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); transition: color 0.3s ease; } .phases li::before { content: ''; position: absolute; top: 0.15rem; left: 50%; transform: translateX(-50%); width: 0.95rem; height: 0.95rem; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); display: grid; place-items: center; font-size: 0.52rem; font-weight: 700; line-height: 1; color: #fff; transition: background-color 0.3s ease, border-color 0.3s ease; } .phases li::after { content: ''; position: absolute; top: 0.55rem; left: calc(50% + 0.7rem); right: calc(-50% + 0.7rem); height: 2px; border-radius: 1px; background: var(--line); transition: background-color 0.3s ease; } .phases li:last-child::after { display: none; } .phases li[data-state='done'] { color: var(--ink-muted); } /* A finished stage carries its receipt: the check mark is drawn by the same node, so the stepper reads at a glance without a legend. */ .phases li[data-state='done']::before { content: '\2713'; background: var(--brand); border-color: var(--brand); } .phases li[data-state='done']::after { background: var(--brand); } .phases li[data-state='active'] { color: var(--brand-ink); font-weight: 700; } .phases li[data-state='active']::before { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 25%, transparent); animation: phase-pulse 1.6s ease-in-out infinite; } @keyframes phase-pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 12%, transparent); } } .status-badge { font-size: 0.8rem; padding: 0.25rem 0.75rem; } .connection-note { font-size: 0.82rem; } /* The work zone: what the pipeline is doing right now, said in plain words, with the counters given the same dignity the results hero gives the score. */ .crawl-headrow { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: 1.1rem 0 0.85rem; } .crawl-verb { margin: 0; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--brand-ink); letter-spacing: -0.01em; } .crawl-sub { margin: 0.2rem 0 0; font-size: 0.84rem; color: var(--ink-muted); } .crawl-count { text-align: right; } .crawl-nums { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.85rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); } .crawl-of { font-size: 1.05rem; font-weight: 600; color: var(--ink-faint); } .crawl-count-label { margin: 0.25rem 0 0; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); font-variant-numeric: tabular-nums; } .progress-track { height: 0.7rem; border-radius: 999px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); } .progress-fill { position: relative; height: 100%; width: 0%; background: linear-gradient(90deg, var(--brand), var(--brand-strong)); border-radius: 999px; overflow: hidden; transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); } /* A soft sheen sweeps the fill only while the audit runs: the bar itself says "live" without a caption. Terminal and reduced-motion views hold still. */ .progress-live[data-live='true'] .progress-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.22) 50%, transparent 80%); transform: translateX(-100%); animation: bar-sheen 2.4s ease-in-out infinite; } @keyframes bar-sheen { to { transform: translateX(100%); } } .progress-live[data-outcome='failed'] .progress-fill { background: var(--c-fail-solid); } .progress-live[data-outcome='cancelled'] .progress-fill { background: var(--c-warn-solid); } .crawl-meta { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 0.55rem; } .crawl-meta p { margin: 0; font-size: 0.82rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; } .crawl-meta-right { color: var(--ink-faint); } .crawl-failed.has-failures { color: var(--c-fail-text); font-weight: 600; } /* The crawl ledger: the bot's last few footsteps, newest on top, fading like fresh ink. Paths are attacker-controlled text nodes and simply truncate. */ .crawl-ledger { margin-top: 0.95rem; padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); display: grid; gap: 0.32rem; font-family: var(--font-mono); } .ledger-row { display: flex; align-items: baseline; gap: 0.55rem; min-width: 0; } .ledger-row:nth-child(2) { opacity: 0.72; } .ledger-row:nth-child(3) { opacity: 0.5; } .ledger-row:nth-child(4) { opacity: 0.32; } .ledger-new { animation: ledger-in 0.35s ease; } @keyframes ledger-in { from { opacity: 0; transform: translateY(-4px); } } .ledger-code { flex: none; font-size: 0.68rem; font-weight: 500; padding: 0.05rem 0.4rem; border-radius: 4px; background: var(--c-pass-bg); color: var(--c-pass-text); } .ledger-code.redirect { background: var(--c-info-bg); color: var(--c-info-text); } .ledger-code.err { background: var(--c-fail-bg); color: var(--c-fail-text); } .ledger-url { font-size: 0.78rem; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .section-label { margin: 1.5rem 0 0; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); } .tiles-compact { margin-top: 0.6rem; } .tiles-compact .tile { padding: 0.55rem 0.7rem; } .tiles-compact .tile-num { font-size: 1.35rem; } .tile-num.tick { animation: num-tick 0.45s ease; } @keyframes num-tick { 0% { opacity: 0.35; transform: translateY(-3px); } } /* Narrow screens: the stepper wraps to two rows, where connector lines would dangle toward nodes that moved down a row. Nodes alone read fine. */ @media (max-width: 40rem) { .phases { row-gap: 0.8rem; } .phases li::after { display: none; } .crawl-count { text-align: left; } } @media (prefers-reduced-motion: reduce) { .progress-live[data-live='true'] .progress-fill::after { animation: none; content: none; } .ledger-new, .tile-num.tick { animation: none; } .phases li[data-state='active']::before { animation: none; } } .live-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ink-faint); margin-right: 0.35rem; vertical-align: 0.05em; } .live-dot.on { background: var(--c-pass-solid); animation: phase-pulse 1.6s ease-in-out infinite; } /* ---------- Auth (login / register) ---------- */ body.auth { display: grid; min-height: 100vh; place-items: center; } .auth main { width: 100%; max-width: 26rem; margin: 0; padding: 1.5rem; } .auth-brand { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.25rem; } .auth-brand .brand-mark { width: 2.4rem; height: 2.4rem; border-radius: 9px; font-size: 1.05rem; } .auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.75rem; } .auth-card h2 { margin: 0 0 0.25rem; font-size: 1.2rem; } .auth-card button { width: 100%; margin-top: 1.4rem; } /* ---------- Home ---------- */ .tile-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 1.5rem; } @media (max-width: 44rem) { .tile-links { grid-template-columns: 1fr; } } .tile-links a { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.15rem 1.25rem; text-decoration: none; color: var(--ink); transition: border-color 0.12s ease; } .tile-links a:hover { border-color: var(--brand); color: var(--ink); } .tile-links .tile-title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--brand-ink); display: block; margin-bottom: 0.2rem; } .tile-links .tile-desc { font-size: 0.85rem; color: var(--ink-muted); } /* ---------- Utilities ---------- */ .url-title { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 500; letter-spacing: 0; word-break: break-all; } td.cell-fail { color: var(--c-fail-text); font-weight: 700; } td.cell-warn { color: var(--c-warn-text); font-weight: 700; } .mono { font-family: var(--font-mono); } .nowrap { white-space: nowrap; } ul.plain { margin: 0; padding-left: 1.1rem; } /* ---------- Report nav chips (results page) ---------- */ .report-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; } .report-chips .chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.7rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 0.82rem; font-weight: 600; text-decoration: none; } .report-chips .chip:hover { border-color: var(--brand); color: var(--ink); } .report-chips .chip-count { font-variant-numeric: tabular-nums; background: var(--surface-2); color: var(--ink-muted); border-radius: 999px; padding: 0 0.4rem; font-size: 0.75rem; } .report-chips .chip-count.fail { background: var(--c-fail-bg); color: var(--c-fail-text); } .report-chips .chip-count.warn { background: var(--c-warn-bg); color: var(--c-warn-text); } /* ---------- Report rows (dead links, broken images) ---------- */ .report-row { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.6rem 0.85rem; margin: 0.5rem 0; } .report-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .report-url { font-size: 0.85rem; word-break: break-all; flex: 1 1 15rem; } .report-meta { color: var(--ink-faint); font-size: 0.8rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .report-error { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--c-fail-text); word-break: break-word; } .report-sources { margin-top: 0.4rem; font-size: 0.85rem; } .report-sources > summary { cursor: pointer; color: var(--ink-muted); font-weight: 600; } .report-sources > summary:hover { color: var(--brand-ink); } .report-sources ul { margin: 0.4rem 0 0.2rem; } .report-sources li { margin: 0.2rem 0; word-break: break-all; } /* ---------- PageSpeed panel (URL drilldown) ---------- */ .ps-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 0.6rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--line); } .ps-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } @media (max-width: 44rem) { .ps-cards { grid-template-columns: 1fr; } } .ps-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.75rem 0.9rem; background: var(--surface); } .ps-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; } .ps-scores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; text-align: center; } .ps-score { display: flex; flex-direction: column; gap: 0.15rem; } .ps-num { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1; font-variant-numeric: tabular-nums; } .ps-num.ps-good { color: var(--c-pass-text); } .ps-num.ps-avg { color: var(--c-warn-text); } .ps-num.ps-poor { color: var(--c-fail-text); } .ps-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); } .ps-metrics { margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px dashed var(--line); grid-template-columns: minmax(6rem, 9rem) 1fr; font-size: 0.82rem; } .ps-metrics dd { font-variant-numeric: tabular-nums; } /* ---------- Theme toggle ---------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink-muted); cursor: pointer; margin-right: 0.5rem; } .theme-toggle:hover { color: var(--ink); background: var(--surface-2); } .theme-toggle svg { width: 1.05rem; height: 1.05rem; display: block; } /* Show the icon for the theme a click switches TO: moon in light, sun in dark. Mirrors the token blocks above: explicit choice first, OS fallback. */ .theme-toggle .icon-sun { display: none; } :root[data-theme='dark'] .theme-toggle .icon-moon { display: none; } :root[data-theme='dark'] .theme-toggle .icon-sun { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-toggle .icon-moon { display: none; } :root:not([data-theme]) .theme-toggle .icon-sun { display: block; } } /* On the auth pages the toggle floats in the corner (there is no nav). */ .theme-corner { position: fixed; top: 1rem; right: 1rem; z-index: 30; } /* ---------- Micro labels and section heads ---------- */ .microlabel { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); } .section-head { display: flex; align-items: baseline; gap: 0.6rem; margin: 1.9rem 0 0.9rem; } .section-head h2 { margin: 0; font-size: 1.15rem; font-weight: 700; } .section-head .hint { font-size: 0.82rem; color: var(--ink-faint); } /* ---------- Status pill (a badge with a live dot) ---------- */ .status-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .status-pill .pdot { width: 0.45rem; height: 0.45rem; border-radius: 50%; flex: none; } .status-pill.pass { color: var(--c-pass-text); background: var(--c-pass-bg); } .status-pill.pass .pdot { background: var(--c-pass-solid); } .status-pill.warn { color: var(--c-warn-text); background: var(--c-warn-bg); } .status-pill.warn .pdot { background: var(--c-warn-solid); } .status-pill.fail { color: var(--c-fail-text); background: var(--c-fail-bg); } .status-pill.fail .pdot { background: var(--c-fail-solid); } .status-pill.info { color: var(--c-info-text); background: var(--c-info-bg); } .status-pill.info .pdot { background: var(--c-info-solid); } /* A non-terminal audit's dot breathes. */ .status-pill.live .pdot { animation: phase-pulse 1.6s ease-in-out infinite; } /* ---------- Results hero: score dial + overview ---------- */ .hero-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 1.1rem; margin-bottom: 1.1rem; } @media (max-width: 56rem) { .hero-grid { grid-template-columns: 1fr; } } .hero-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 1.4rem 1.5rem; display: flex; flex-direction: column; } .hero-card.lead { box-shadow: var(--shadow-lg); } .score-row { display: flex; align-items: center; gap: 1.25rem; margin-top: 1rem; } .score-dial { position: relative; width: 132px; height: 132px; flex: none; } .score-dial svg { display: block; transform: rotate(-90deg); } .ring-track { fill: none; stroke: var(--surface-2); stroke-width: 13; } .ring-value { fill: none; stroke-width: 13; stroke-linecap: round; animation: ring-draw 1.3s cubic-bezier(0.16, 1, 0.3, 1) both; } .ring-value.pass { stroke: var(--c-pass-solid); } .ring-value.warn { stroke: var(--c-warn-solid); } .ring-value.fail { stroke: var(--c-fail-solid); } .score-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .score-number { font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .score-denom { font-size: 0.68rem; color: var(--ink-faint); font-weight: 600; letter-spacing: 0.03em; } .score-verdict { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; padding: 0.2rem 0.6rem; border-radius: 7px; margin-bottom: 0.5rem; } .score-verdict.pass { color: var(--c-pass-text); background: var(--c-pass-bg); } .score-verdict.warn { color: var(--c-warn-text); background: var(--c-warn-bg); } .score-verdict.fail { color: var(--c-fail-text); background: var(--c-fail-bg); } .score-note { margin: 0; font-size: 0.82rem; color: var(--ink-muted); line-height: 1.45; } /* Score trend: the client's finished-audit history, drawn on load. */ .trend { margin-top: 1.25rem; padding-top: 1.05rem; border-top: 1px solid var(--line); } .trend-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.5rem; } .trend-delta { font-size: 0.78rem; font-weight: 700; } .trend-delta.up { color: var(--c-pass-text); } .trend-delta.down { color: var(--c-fail-text); } .trend-delta.flat { color: var(--ink-muted); } .trend-line { stroke-dasharray: 520; animation: dash-in 1.4s ease-out both; } .trend-dot { transform-box: fill-box; transform-origin: center; animation: pop-in 0.5s 0.9s both; } .trend-labels { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--ink-faint); margin-top: 0.15rem; } /* Overview card internals. */ .hero-meta { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin-bottom: 1.2rem; } .hero-meta .microlabel { letter-spacing: 0.06em; margin-bottom: 0.2rem; } .hero-meta .v { margin: 0; font-size: 0.92rem; font-weight: 600; word-break: break-word; } .hero-meta .v .sub { color: var(--ink-muted); font-weight: 400; } /* ---------- Stat tiles (fail / warn / info / pass) ---------- */ .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; margin-top: 1.1rem; } @media (max-width: 34rem) { .tiles { grid-template-columns: repeat(2, 1fr); } } .tile { border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.8rem; } .tile .tile-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; } .tile .dot { width: 0.5rem; height: 0.5rem; border-radius: 2px; flex: none; } .tile .tile-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .tile .tile-num { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1; font-variant-numeric: tabular-nums; } .tile.fail { border-color: var(--c-fail-bg); background: color-mix(in srgb, var(--c-fail-bg) 45%, var(--surface)); } .tile.fail .dot { background: var(--c-fail-solid); } .tile.fail .tile-label { color: var(--c-fail-text); } .tile.warn { border-color: var(--c-warn-bg); background: color-mix(in srgb, var(--c-warn-bg) 45%, var(--surface)); } .tile.warn .dot { background: var(--c-warn-solid); } .tile.warn .tile-label { color: var(--c-warn-text); } .tile.info { border-color: var(--c-info-bg); background: color-mix(in srgb, var(--c-info-bg) 45%, var(--surface)); } .tile.info .dot { background: var(--c-info-solid); } .tile.info .tile-label { color: var(--c-info-text); } .tile.pass { border-color: var(--c-pass-bg); background: color-mix(in srgb, var(--c-pass-bg) 45%, var(--surface)); } .tile.pass .dot { background: var(--c-pass-solid); } .tile.pass .tile-label { color: var(--c-pass-text); } /* ---------- Findings by area ---------- */ .areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.9rem; margin-bottom: 0.5rem; } .area-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 1rem 1.1rem 1.05rem; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .area-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); } .area-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.7rem; } .area-name { margin: 0; font-weight: 700; font-size: 0.95rem; } .area-sub { margin: 0.1rem 0 0; font-size: 0.78rem; color: var(--ink-faint); } .area-grade { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; flex: none; } .area-grade.pass { color: var(--c-pass-text); background: var(--c-pass-bg); } .area-grade.info { color: var(--c-info-text); background: var(--c-info-bg); } .area-grade.warn { color: var(--c-warn-text); background: var(--c-warn-bg); } .area-grade.fail { color: var(--c-fail-text); background: var(--c-fail-bg); } .area-stats { display: flex; gap: 0.9rem; font-size: 0.76rem; font-variant-numeric: tabular-nums; } .area-stats .n { font-weight: 700; } .area-stats .n.fail { color: var(--c-fail-text); } .area-stats .n.warn { color: var(--c-warn-text); } .area-stats .n.pass { color: var(--ink-muted); } .area-stats .lbl { color: var(--ink-faint); font-weight: 400; } /* ---------- Priority issues ---------- */ .priority-list { display: flex; flex-direction: column; gap: 0.7rem; } .priority-list .finding { margin: 0; padding: 0.9rem 1.1rem; border-radius: 9px; } .priority-list .affected { margin-left: auto; font-size: 0.76rem; color: var(--ink-muted); font-weight: 600; white-space: nowrap; } /* ---------- Tabs ---------- */ .tabs { margin: 1rem 0 0; } .tab-list { display: flex; gap: 0.25rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); } button.tab { position: relative; border: none; background: none; padding: 0.55rem 0.85rem; font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--ink-muted); cursor: pointer; border-radius: 8px 8px 0 0; transition: color 0.12s ease; } button.tab:hover { color: var(--ink); background: var(--surface-2); } button.tab::after { content: ''; position: absolute; left: 0.55rem; right: 0.55rem; bottom: -1px; height: 2px; border-radius: 2px; background: transparent; transition: background 0.15s ease; } button.tab.on { color: var(--brand-ink); } button.tab.on::after { background: var(--brand); } .tab-count { font-variant-numeric: tabular-nums; font-size: 0.72rem; background: var(--surface-2); color: var(--ink-muted); border-radius: 999px; padding: 0.05rem 0.45rem; margin-left: 0.3rem; } button.tab.on .tab-count { background: var(--brand-soft); color: var(--brand-ink); } .tab-panel { display: none; padding-top: 0.75rem; } .tab-panel.on { display: block; animation: rise 0.35s ease-out both; } /* ---------- Small interaction polish ---------- */ button:active, .btn:active { transform: translateY(1px); } button.tab:active { transform: none; } .tile-links a { transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .tile-links a:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .tile-links .tile-icon { display: inline-flex; width: 2.1rem; height: 2.1rem; align-items: center; justify-content: center; border-radius: 9px; background: var(--brand-soft); color: var(--brand-ink); margin-bottom: 0.6rem; } .tile-links .tile-icon svg { width: 1.15rem; height: 1.15rem; }