is
present in the DOM only on the home page - no need to hide it
on results pages because it isn't there to begin with. The
`data-route` attribute is still set on by the layout for
any other consumer that wants to query the current route. */
/* Respect reduced-motion preferences - a pulsing gradient is decorative
and can be uncomfortable for motion-sensitive users. Falls back to a
static tint that still reads as a placeholder. */
@media (prefers-reduced-motion: reduce) {
.skel {
animation: none;
background: #e9ecef;
}
}
:root {
--blue: #2356b2;
--blue-dark: #1a3f8a;
--blue-btn: #3565c8;
--blue-link: #1a56b2;
--orange: #d4580e;
--green: #1a9550;
--green-bg: #e8f5ee;
--red: #c0392b;
--red-bg: #fce8e6;
--yellow: #d4820a;
--yellow-bg: #fef3d7;
--text: #1a1a1a;
--text-mid: #444;
--text-light: #5a5a5a; /* was #777 - 4.47:1 on white just failed WCAG AA. #5a5a5a hits 5.93:1. */
--border: #d0d0d0;
--border-lt: #e8e8e8;
--bg-page: #fff;
--bg-page_old: #f1f5f9;
--bg-white: #fff;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.09);
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Clip horizontal overflow at the root so an off-screen element (long
domain, unwrapped URL, the off-canvas mobile nav with translate-x-full,
etc.) can't be dragged into view on iOS Safari.
Two-stage declaration: `hidden` is the universal fallback; `clip` is
the preferred value on browsers that support it (iOS 16+, modern
Chrome/Firefox) because it doesn't establish a scroll container -
that keeps `position: sticky` on the header working. Older iOS
Safari (< 16) doesn't know `clip`, ignores the second declaration,
and falls back to `hidden`. overscroll-behavior-x: contain adds
belt-and-braces protection against rubber-band on any child scroll
container. */
html,
body {
overflow-x: hidden;
overflow-x: clip;
overscroll-behavior-x: contain;
}
body {
font-family: "Roboto", sans-serif;
background: var(--bg-page);
color: var(--text);
font-size: 1rem;
font-weight: 400;
line-height: 1.5rem;
}
/* a { color: var(--blue-link); text-decoration: none; }
a:hover { text-decoration: underline; }*/
/* pcrisk.com wrapper SVGs are inlined into index.html (which we can't
edit) with Tailwind width classes but no width/height HTML attrs,
so the browser can't reserve vertical space until CSS parses -
triggers CLS and Lighthouse's unsized-images audit. Applying
aspect-ratio against the src path reserves the box before the image
network-loads. Ratios match each SVG's intrinsic viewBox. */
img[src*="/joomspirit_70/images/v2/logo.svg"] {
aspect-ratio: 160 / 46;
}
img[src*="/joomspirit_70/images/v2/search.svg"],
img[src*="/joomspirit_70/images/v2/location.svg"],
img[src*="/joomspirit_70/images/v2/socials/"] {
aspect-ratio: 1 / 1;
}
/* ══════════ HEADER ══════════ */
header {
background: #fff;
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 100;
height: 72px;
display: flex;
align-items: center;
}
@media (min-width: 1280px) {
header {
height: 90px;
}
}
.hdr-inner {
max-width: 1440px;
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
padding: 0 16px;
justify-content: space-between;
}
@media (min-width: 1536px) {
.hdr-inner {
justify-content: flex-start;
}
}
.hdr-logo {
display: flex;
align-items: center;
flex-shrink: 0;
cursor: pointer;
margin-right: auto;
text-decoration: none;
}
@media (min-width: 1024px) {
.hdr-logo {
margin-right: 0;
}
}
@media (min-width: 1280px) {
.hdr-logo {
margin-right: 57px;
}
}
.hdr-logo img {
height: auto;
width: 121px;
object-fit: contain;
display: block;
}
@media (min-width: 640px) {
.hdr-logo img {
width: 96px;
}
}
@media (min-width: 1280px) {
.hdr-logo img {
width: 160px;
}
}
.hdr-nav {
display: none;
align-items: center;
justify-content: center;
gap: 32px;
flex-grow: 1;
}
@media (min-width: 1024px) {
.hdr-nav {
display: flex;
}
}
@media (min-width: 1280px) {
.hdr-nav {
margin-right: auto;
}
}
.hdr-nav a {
display: flex;
align-items: center;
color: #262626;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
line-height: 1.25;
white-space: nowrap;
transition: color 0.15s;
text-decoration: none;
}
.hdr-nav a:hover {
color: #1e40af;
text-decoration: none;
}
.hdr-nav a.active {
color: #1e40af;
}
.hdr-search {
display: none;
align-items: center;
gap: 8px;
background: #f5f5f5;
border: 1px solid transparent;
border-radius: 40px;
padding: 0 14px;
height: 44px;
width: 280px;
transition: border-color 0.2s;
}
@media (min-width: 1280px) {
.hdr-search {
display: flex;
}
}
.hdr-search:focus-within {
border-color: #1e40af;
}
.hdr-search input {
border: none;
background: transparent;
outline: none;
font-size: 14px;
color: #262626;
width: 100%;
font-family: "Roboto", sans-serif;
line-height: normal;
}
.hdr-search input::placeholder {
color: #262626;
}
.hdr-search button {
background: none;
border: none;
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.hdr-search svg {
width: 20px;
height: 20px;
flex-shrink: 0;
color: #525252;
}
.hdr-hamburger {
display: none;
background: none;
border: none;
cursor: pointer;
width: 24px;
height: 24px;
padding: 0;
margin-left: 16px;
}
@media (min-width: 640px) and (max-width: 1279px) {
.hdr-hamburger {
display: block;
}
}
.hdr-hamburger svg {
width: 24px;
height: 24px;
color: #262626;
}
.hdr-mobile-search {
display: flex;
align-items: center;
gap: 8px;
}
@media (min-width: 640px) {
.hdr-mobile-search {
display: none;
}
}
.hdr-mobile-search button {
background: none;
border: none;
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
flex-shrink: 0;
}
.hdr-mobile-search svg {
width: 24px;
height: 24px;
color: #525252;
}
/* ══════════ HERO V4 ══════════ */
.v4 {
/*background: #f1f5f9; */
padding: 64px 20px 56px;
position: relative;
}
/*
.v4::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(148,163,184,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.07) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; }
*/
.v4 {
background:
radial-gradient(
ellipse 70% 60% at 50% 30%,
rgba(35, 86, 178, 0.14) 0%,
rgba(35, 86, 178, 0.05) 40%,
transparent 75%
),
linear-gradient(180deg, #e8eef9 0%, #f1f5f9 100%);
}
/* */
/*
.v4 {
background: linear-gradient(180deg, #e8eef9 0%, #f1f5f9 100%);
position: relative;
overflow: hidden;
}
.v4:before {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 1600px;
height: 1600px;
transform: translate(-50%, -50%);
border-radius: 50%;
pointer-events: none;
background:
radial-gradient(circle,
transparent 0,
transparent 198px,
rgba(35,86,178,0.08) 199px,
rgba(35,86,178,0.08) 200px,
transparent 201px,
transparent 318px,
rgba(35,86,178,0.06) 319px,
rgba(35,86,178,0.06) 320px,
transparent 321px,
transparent 438px,
rgba(35,86,178,0.05) 439px,
rgba(35,86,178,0.05) 440px,
transparent 441px,
transparent 558px,
rgba(35,86,178,0.04) 559px,
rgba(35,86,178,0.04) 560px,
transparent 561px);
}
*/
.v4 .inner {
max-width: 960px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.v4 .stat-chips {
display: flex;
gap: 6px;
flex-wrap: wrap;
justify-content: flex-end;
}
.v4 .stat-chip {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 6px 12px;
font-size: 11px;
color: #64748b;
font-weight: 500;
}
.v4 .stat-chip strong {
color: #0f172a;
font-weight: 700;
}
.v4 .main-card {
background: #fff;
border-radius: 16px;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
overflow: hidden;
}
.v4 .card-header {
padding: 32px 36px 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
}
.v4 .card-header-left {
flex: 1;
min-width: 0;
}
.v4 h1 {
font-size: 32px;
font-weight: 800;
color: #0f172a;
margin-bottom: 8px;
}
.v4 .subtitle {
font-size: 15px;
color: #64748b;
line-height: 1.6;
max-width: 520px;
}
.v4 .search-section {
padding: 24px 36px 20px 36px;
}
.v4 .search-bar {
display: flex;
gap: 0;
border: 2px solid #e2e8f0;
border-radius: 12px;
background: #f8fafc;
transition: border-color 0.2s;
}
/* Sync the focus border with the Scan Now button's current colour so the
bar visually "locks in" with whatever state the button is showing -
default enabled, hovered/active, or disabled. :has() lets the child
button's pseudo-state bubble up to the parent. */
.v4 .search-bar:focus-within {
border-color: #1e40af;
background: #fff;
}
.v4 .search-bar:focus-within:has(.scan-btn:hover),
.v4 .search-bar:focus-within:has(.scan-btn:active) {
border-color: #1d4ed8;
}
.v4 .search-bar:focus-within:has(.scan-btn:disabled) {
border-color: #788ccf;
}
.v4 .protocol-tag {
display: flex;
align-items: center;
padding: 0 14px;
font-size: 13px;
font-weight: 600;
color: #94a3b8;
border-right: 1px solid #e2e8f0;
background: #f1f5f9;
white-space: nowrap;
border-radius: 10px 0 0 10px;
}
.v4 input[type="text"] {
flex: 1;
border: none;
outline: none;
background: transparent;
font-size: 15px;
padding: 16px 14px;
color: #1e293b;
font-family: "Roboto Mono", "Roboto", monospace;
}
.v4 input::placeholder {
color: #94a3b8;
font-family: "Roboto", sans-serif;
}
.v4 .scan-btn {
background: #1e40af;
color: #fff;
border: none;
padding: 0 31px;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
cursor: pointer;
transition: background 0.2s;
/* Extend the button across the 2px .search-bar border on three sides
so its blue area reaches the outermost edge of the bar. Without
this, the button looks 4px shorter than the bar's total height
(the 2px top + 2px bottom border steal that space). Matching 12px
radius on the two rounded corners mirrors the bar's outer shape. */
margin: -2px -2px -2px 0;
border-radius: 0 12px 12px 0;
}
.v4 .scan-btn:hover {
background: #1d4ed8;
}
.v4 .scan-btn:disabled {
background-color: #788ccf;
cursor: not-allowed;
}
.v4 .scan-btn svg {
width: 16px;
height: 16px;
}
.v4 .card-footer {
display: flex;
flex-wrap: wrap;
gap: 0;
border-top: 1px solid #f1f5f9;
}
.v4 .check-item {
flex: 1;
min-width: 140px;
padding: 16px 20px;
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: 500;
color: #475569;
border-right: 1px solid #f1f5f9;
}
.v4 .check-item:last-child {
border-right: none;
}
.v4 .check-item .icon-box {
width: 32px;
height: 32px;
border-radius: 8px;
background: #eff6ff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.v4 .check-item .icon-box svg {
width: 16px;
height: 16px;
color: #2563eb;
}
.v4 .bottom-row {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
gap: 12px;
}
.v4 .trust-row {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.v4 .trust-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: #94a3b8;
font-weight: 500;
}
.v4 .trust-item svg {
width: 14px;
height: 14px;
color: #22c55e;
}
.v4 .disclaimer {
font-size: 11px;
color: #94a3b8;
line-height: 1.6;
max-width: 960px;
text-align: center;
}
.v4 .disclaimer strong {
color: #64748b;
}
.v4 .disclaimer a {
color: #2563eb;
text-decoration: none;
}
/* Keep scan-btn globally for other pages */
.scan-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 7px;
background: var(--blue);
border: none;
border-radius: 0px;
color: #fff;
padding: 10px 24px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.scan-btn:hover {
background: var(--blue-dark);
}
.scan-btn:disabled {
cursor: not-allowed;
}
/* Tablet */
@media (max-width: 768px) {
.v4 {
padding: 48px 16px 40px;
}
.v4 .card-header {
flex-direction: column;
gap: 16px;
padding: 24px 24px 0;
}
.v4 .stat-chips {
justify-content: flex-start;
}
.v4 .search-section {
padding: 20px 24px 24px;
}
.v4 .main-scanning-container {
margin-left: 24px;
margin-right: 24px;
}
.v4 .card-footer {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.v4 .check-item {
border-right: none;
border-bottom: 1px solid #f1f5f9;
}
.v4 .check-item:nth-last-child(-n + 2) {
border-bottom: none;
}
.v4 .trust-row {
justify-content: center;
}
}
/* Mobile */
@media (max-width: 480px) {
.v4 {
padding: 32px 12px 32px;
}
.v4 h1 {
font-size: 24px;
}
.v4 .subtitle {
font-size: 14px;
}
.v4 .card-header {
padding: 20px 16px 0;
}
.v4 .search-section {
padding: 16px 16px 20px;
}
.v4 .main-scanning-container {
margin-left: 16px;
margin-right: 16px;
}
.v4 .search-bar {
flex-direction: column;
}
/* Stacked layout - button sits below the input, so the overlap
switches from the right edge to the bottom edge. Horizontal padding
doesn't change the button's actual width here (width:100%), so
vertical padding carries the "wider by ~3px" bump from desktop -
+3px top & bottom matches the visual weight. */
.v4 .scan-btn {
padding: 17px 20px;
justify-content: center;
margin: 0 -2px -2px -2px;
border-radius: 0 0 12px 12px;
}
/* Stacked layout - rounded corners switch from left side to top side. */
.v4 .protocol-tag {
border-right: none;
border-bottom: 1px solid #e2e8f0;
padding: 10px 14px;
border-radius: 10px 10px 0 0;
}
.v4 .card-footer {
display: flex;
flex-direction: column;
}
.v4 .check-item {
border-right: none;
border-bottom: 1px solid #f1f5f9;
}
.v4 .check-item:last-child {
border-bottom: none;
}
.v4 .stat-chips {
gap: 4px;
}
.v4 .stat-chip {
padding: 5px 10px;
font-size: 10px;
}
.v4 .trust-row {
gap: 12px;
justify-content: center;
}
.v4 .trust-item {
font-size: 11px;
}
.v4 .disclaimer {
font-size: 10px;
}
.v4 .bottom-row {
margin-top: 16px;
gap: 10px;
}
}
/* ── LAYOUT ── */
.section {
max-width: 1280px;
margin: 0 auto;
padding: 28px 24px;
}
.rw {
max-width: 1280px;
margin: 12px auto 0px;
padding: 0 24px;
}
.main-layout {
max-width: 1280px;
margin: 24px auto 40px;
padding: 0 24px;
}
.sec-head {
font-size: 18px;
font-weight: 800;
padding-bottom: 10px;
padding-top: 10px;
margin: 0 0 16px;
border-bottom: 2.5px solid var(--blue);
display: flex;
justify-content: space-between;
align-items: baseline;
letter-spacing: -0.2px;
}
.sec-head a {
font-size: 14px;
font-weight: 600;
color: var(--blue-link);
transition:
color 0.15s,
gap 0.15s;
display: inline-flex;
align-items: center;
gap: 3px;
}
.sec-head a:hover {
color: var(--blue);
gap: 6px;
text-decoration: none;
}
.sec-head .sec-head-pages {
font-size: 13px;
font-weight: 400;
color: var(--text-light);
}
@media (max-width: 520px) {
.sec-head {
font-size: 18px;
}
.sec-head .sec-head-pages {
font-size: 12px;
}
}
@media (max-width: 500px) {
.sec-head {
font-size: 18px;
}
.sec-head .sec-head-pages {
font-size: 11px;
}
}
@media (max-width: 480px) {
.sec-head {
font-size: 17px;
}
.sec-head .sec-head-pages {
font-size: 10px;
}
}
@media (max-width: 460px) {
.sec-head {
font-size: 16px;
}
.sec-head .sec-head-pages {
font-size: 9px;
}
}
@media (max-width: 440px) {
.sec-head {
font-size: 15px;
}
.sec-head .sec-head-pages {
font-size: 8px;
}
}
.sec-icon {
display: inline-flex;
align-items: center;
width: 20px;
height: 20px;
flex-shrink: 0;
position: relative;
top: 3px;
margin-right: 7px;
}
.sec-icon svg {
width: 20px;
height: 20px;
stroke: #888;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ── CARDS (Recently Scanned) ── */
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
/* Max-2-rows behaviour is driven by _hideOverflowCards() in app.js, which
counts the actual column count at the current viewport and display:none's
cards beyond cols×2. Driving it from JS avoids the gap-accumulation +
phantom-border issue that `grid-auto-rows: 0 + overflow: hidden` had
with 1- or 2-column layouts. */
.cards-grid-max2rows {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.card {
background: #fff;
border-radius: 10px;
overflow: hidden;
border: 1px solid #eee;
box-shadow: var(--shadow-sm);
transition:
box-shadow 0.2s,
transform 0.2s;
cursor: pointer;
text-decoration: none;
color: inherit;
display: block;
}
.card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
text-decoration: none;
}
/* Skeleton state - same .card outer element, with .skel placeholders
inside instead of real content. Disable interactions so the user
can't click an empty slot, and suppress the hover lift. */
.card.card-loading {
cursor: default;
pointer-events: none;
}
.card.card-loading:hover {
box-shadow: var(--shadow-sm);
transform: none;
}
.card-thumb {
height: 140px;
background: #f1f5f9;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
/* Stack the placeholder SVG (always rendered) and the screenshot img
(rendered when site.screenshot_url is set) on top of each other, both
filling the thumb. The img comes after the SVG in DOM order so it
stacks on top by default - when present it covers the SVG entirely;
when absent the SVG remains visible as the placeholder. */
.card-thumb > svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
/* translateZ pins the thumb bitmap to its own compositor layer.
Without it, hovering one card promotes that card to a new layer and
forces Chromium to re-rasterize sibling cards too; with filter:blur(8px)
on low-trust thumbnails, the re-sample comes out at a slightly different
intensity and the user sees neighbors visibly "shimmer". Pinning each
thumb img to its own layer up front isolates the filter rendering. */
.card-thumb img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: translateZ(0);
}
.card-thumb .placeholder {
color: #94a3b8;
font-size: 32px;
}
.card-body {
padding: 12px 14px;
}
.card-domain {
font-size: 14px;
font-weight: 600;
color: #111827;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-bar {
height: 4px;
background: #eef0f3;
border-radius: 2px;
margin-top: 6px;
overflow: hidden;
}
.card-bar-fill {
height: 100%;
border-radius: 2px;
transition: width 0.6s ease;
}
.card-bar-fill.safe {
background: linear-gradient(90deg, #34d399, #059669);
}
.card-bar-fill.moderate {
background: linear-gradient(90deg, #fbbf24, #d97706);
}
.card-bar-fill.danger {
background: linear-gradient(90deg, #f87171, #dc2626);
}
.card-meta {
display: flex;
align-items: center;
justify-content: space-between;
}
/* ── BADGES ── */
.badge {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
}
.badge-green {
background: #e7f6ed;
color: #136e33;
} /* was #15803d - 4.49 on #e7f6ed just failed */
.badge-amber {
background: #fef6e7;
color: #a16207;
}
.badge-red {
background: #fee2e2;
color: #b91c1c;
}
.badge-score {
font-size: 12px;
font-weight: 700;
padding: 2px 8px;
border-radius: 6px;
}
/* ── TABLE (Popular) ── */
.pop-tbl {
background: #fff;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
margin-bottom: 28px;
}
.pop-row {
display: grid;
grid-template-columns: 36px 60px 1fr 110px 100px 80px 170px;
gap: 12px;
align-items: center;
padding: 11px 18px;
border-bottom: 1px solid #f0f2f5;
cursor: pointer;
transition: background 0.15s ease;
position: relative;
}
a.pop-row {
text-decoration: none;
color: inherit;
}
.pop-row:last-child {
border-bottom: none;
}
.pop-row:hover {
background: #f5f8fc;
}
.pop-row:hover::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--blue);
border-radius: 0 2px 2px 0;
}
.pop-row.th {
background: #f6f8fb;
cursor: default;
font-size: 12px;
font-weight: 700;
color: #8895a7;
text-transform: uppercase;
letter-spacing: 0.6px;
padding: 8px 18px;
border-bottom: 1px solid var(--border);
}
.pop-row.th:hover {
background: #f6f8fb;
}
.pop-row.th:hover::before {
display: none;
}
.p-rank {
text-align: center;
font-size: 14px;
font-weight: 800;
color: #8895a7;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: #f0f2f5;
}
.p-thumb {
width: 48px;
height: 32px;
border: 1px solid #e2e6eb;
border-radius: 4px;
background: linear-gradient(145deg, #f0f4fa, #e4ecf7);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.p-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition:
transform 0.2s ease,
filter 0.35s ease;
filter: saturate(0) contrast(0.82) brightness(1.12);
}
.pop-row:hover .p-thumb img {
transform: scale(1.05);
filter: saturate(1) contrast(1) brightness(1);
}
.p-domain {
font-size: 15px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.1px;
overflow: hidden;
min-width: 0;
}
.p-domain b {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.p-domain small {
font-weight: 400;
color: #8895a7;
font-size: 13px;
display: block;
margin-top: 1px;
}
.p-bl-text {
font-size: 14px;
font-weight: 600;
color: #4b5563;
}
.p-bl-text .bl-count {
font-weight: 800;
}
.p-bl-text.clean .bl-count {
color: #1a9550;
}
.p-bl-text.flagged .bl-count {
color: #c0392b;
}
.p-last {
font-size: 14px;
color: var(--text-mid);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.p-score {
text-align: center;
}
.pop-row > :nth-child(6) {
text-align: center;
}
.sbadge {
display: inline-block;
font-size: 14px;
font-weight: 800;
padding: 4px 12px;
border-radius: 6px;
font-variant-numeric: tabular-nums;
min-width: 38px;
text-align: center;
}
.sbadge.hi {
background: #e7f6ed;
color: #15803d;
}
.sbadge.mo {
background: #fef6e7;
color: #a16207;
}
.sbadge.mi {
background: #fde8d8;
color: #c2410c;
}
.sbadge.lo {
background: #fee2e2;
color: #b91c1c;
}
.p-verd {
font-size: 11.5px;
font-weight: 500;
color: var(--text-mid);
}
@media (max-width: 900px) {
.pop-row {
grid-template-columns: 36px 60px 1fr 100px 80px;
}
.p-last {
display: none;
}
.p-verd {
display: none;
}
.pop-row.th span:nth-child(4),
.pop-row.th span:nth-child(7) {
display: none;
}
}
@media (max-width: 640px) {
.pop-row {
grid-template-columns: 28px 1fr 50px;
gap: 8px;
padding: 9px 12px;
}
.pop-row.th {
padding: 6px 12px;
}
.p-thumb {
display: none;
}
.p-last {
display: none;
}
.p-bl {
display: none;
}
.p-verd {
display: none;
}
.pop-row.th span:nth-child(2),
.pop-row.th span:nth-child(4),
.pop-row.th span:nth-child(5),
.pop-row.th span:nth-child(7) {
display: none;
}
.p-rank {
width: 22px;
height: 22px;
font-size: 11px;
border-radius: 5px;
}
.p-domain {
font-size: 12px;
}
.p-domain small {
font-size: 10px;
}
.sbadge {
font-size: 11px;
padding: 3px 8px;
}
}
/* ══════════ BREADCRUMBS ══════════ */
.bc-bar {
background: transparent;
padding: 10px 24px 0;
max-width: 1280px;
margin: 0 auto;
}
.bc-inner {
font-size: 14px;
color: var(--text-light);
display: flex;
align-items: baseline;
gap: 6px;
min-width: 0;
flex-wrap: wrap;
}
.bc-inner span:last-child {
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
.bc-inner a {
color: var(--blue-link);
text-decoration: none;
}
.bc-inner a:hover {
text-decoration: underline;
}
/* ══════════ COMBO CLEANER CTA ══════════ */
/* Boss-approved design - emerald revision. Three-column grid: icon ·
body (headline + sub + social-proof) · button column. All children
classes scoped under .cc-cta so the short names (.cc-icon, .cc-body,
.cc-btn, .stars, .rec…) can't collide with anything else in the app.
Bricolage Grotesque on the headline is listed for best effort - falls
back to Roboto when the font isn't loaded (index.html is off-limits
to us, so we don't force-load it). */
.cc-cta {
background:
radial-gradient(
circle at 85% 120%,
rgba(34, 197, 94, 0.22) 0%,
transparent 55%
),
linear-gradient(135deg, #052e1b 0%, #0f5132 42%, #1a7a4d 100%);
border-radius: 12px;
padding: 22px 26px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 20px;
align-items: center;
position: relative;
overflow: hidden;
margin-bottom: 16px;
}
.cc-cta::after {
content: "";
position: absolute;
top: -80%;
left: -20%;
width: 500px;
height: 500px;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.06) 0%,
transparent 60%
);
pointer-events: none;
}
.cc-cta .cc-icon {
width: 64px;
height: 64px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.cc-cta .cc-icon svg {
width: 36px;
height: 36px;
color: #fff;
}
.cc-cta .cc-body {
min-width: 0;
position: relative;
z-index: 1;
}
.cc-cta .cc-headline {
font-family:
"Bricolage Grotesque",
"DM Sans",
"Roboto",
-apple-system,
sans-serif;
font-size: 19px;
font-weight: 600;
color: #fff;
line-height: 1.32;
letter-spacing: -0.005em;
font-variation-settings:
"opsz" 24,
"wdth" 100;
text-rendering: optimizeLegibility;
}
.cc-cta .cc-sub {
font-size: 12.5px;
color: rgba(255, 255, 255, 0.72);
margin-top: 4px;
line-height: 1.45;
}
.cc-cta .cc-proof {
display: flex;
align-items: center;
gap: 12px;
margin-top: 10px;
font-size: 11.5px;
color: rgba(255, 255, 255, 0.85);
flex-wrap: wrap;
}
.cc-cta .cc-proof .stars {
color: #ffd76a;
letter-spacing: 1px;
font-size: 12.5px;
}
/* Glass "Recommended" pill - frosted translucent background reads
against the dark emerald gradient without fighting the icons/text. */
.cc-cta .cc-proof .rec {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 9px;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.32);
border-radius: 100px;
color: #ecfdf5;
font-weight: 600;
font-size: 10.5px;
letter-spacing: 0.02em;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.cc-cta .cc-proof .rec svg {
width: 11px;
height: 11px;
}
.cc-cta .cc-btn-col {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 5px;
position: relative;
z-index: 1;
}
.cc-cta .cc-free {
font-size: 10.5px;
color: rgba(255, 255, 255, 0.6);
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* White button with emerald-wipe hover: lifts 2px on a spring ease,
mint wash (#f0fdf4), glow shadow, arrow nudges 2px down. Respects
prefers-reduced-motion (no movement for users who opt out). */
.cc-cta .cc-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 26px;
font-size: 14px;
font-weight: 800;
border-radius: 10px;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
background: #fff;
color: #0f5132;
box-shadow:
0 4px 14px rgba(0, 0, 0, 0.2),
inset 0 -1px 0 rgba(0, 0, 0, 0.08);
border: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
transition:
color 0.25s ease,
background 0.25s ease,
transform 0.3s cubic-bezier(0.34, 1.3, 0.64, 1),
box-shadow 0.3s ease,
border-color 0.25s ease;
}
.cc-cta .cc-btn-label {
display: inline-flex;
align-items: center;
}
.cc-cta .cc-btn-arrow {
display: inline-flex;
align-items: center;
transition: transform 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.cc-cta .cc-btn-arrow svg {
width: 14px;
height: 14px;
}
.cc-cta .cc-btn:hover {
background: #f0fdf4;
color: #052e1b;
transform: translateY(-2px);
border-color: rgba(22, 163, 74, 0.2);
box-shadow:
0 8px 20px -6px rgba(22, 163, 74, 0.4),
0 4px 10px rgba(0, 0, 0, 0.14),
inset 0 -1px 0 rgba(0, 0, 0, 0.08);
text-decoration: none;
}
.cc-cta .cc-btn:hover .cc-btn-arrow {
transform: translateY(2px);
}
.cc-cta .cc-btn:active {
transform: translateY(-1px);
transition-duration: 0.1s;
}
.cc-cta .cc-btn:focus-visible {
outline: 3px solid rgba(34, 197, 94, 0.5);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.cc-cta .cc-btn,
.cc-cta .cc-btn-arrow {
transition:
color 0.2s ease,
background 0.2s ease;
}
.cc-cta .cc-btn:hover,
.cc-cta .cc-btn:hover .cc-btn-arrow {
transform: none;
}
}
@media (max-width: 760px) {
.cc-cta {
grid-template-columns: 1fr;
text-align: center;
gap: 16px;
}
.cc-cta .cc-icon {
justify-self: center;
}
.cc-cta .cc-btn-col {
align-items: center;
}
.cc-cta .cc-proof {
justify-content: center;
}
}
/* Combo Cleaner - disclaimer footer. Spans all columns of the .cc-cta
3-column grid so it lays out as a full-width row beneath icon / body /
button. RCS LT attribution required by PCRisk's parent-company
ownership; link points to /about-us. */
.cc-cta .cc-disclaimer {
grid-column: 1 / -1;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
font-size: 10.5px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.72);
}
.cc-cta .cc-disclaimer a {
color: #ffffff;
text-decoration: underline;
text-underline-offset: 2px;
}
/* ══════════ RESULTS PAGE ══════════ */
/* Generic result card */
.rc {
background: #fff;
border: 1px solid var(--border);
border-radius: 3px;
box-shadow: var(--shadow-sm);
overflow: hidden;
margin-bottom: 10px;
}
.rc-h {
padding: 8px 14px;
border-bottom: 1px solid var(--border-lt);
background: #f8fafe;
font-size: 13px;
font-weight: 700;
color: var(--text);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-width: 0;
}
.rc-h .note {
font-size: 11px;
color: var(--text-light);
font-weight: 400;
}
.rc-h .rc-title {
display: inline-flex;
align-items: center;
gap: 7px;
min-width: 0;
flex: 1;
overflow-wrap: anywhere;
word-break: break-word;
}
.rc-h .rc-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.rc-h .rc-icon svg {
width: 18px;
height: 18px;
}
.rc-b {
padding: 12px 14px;
}
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 10px;
grid-auto-rows: 1fr;
}
.two-col .rc {
margin-bottom: 0 !important;
height: 100%;
display: flex;
flex-direction: column;
}
.two-col .rc .rc-b {
flex: 1;
}
@media (max-width: 768px) {
.two-col {
grid-template-columns: 1fr;
grid-auto-rows: auto;
}
}
/* URL header */
.url-hdr {
background: #fff;
border: 1px solid var(--border);
border-radius: 3px;
padding: 14px 18px;
box-shadow: var(--shadow-sm);
margin-bottom: 10px;
}
.url-top {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.url-fav {
width: 32px;
height: 32px;
background: #e8f0fe;
border: 1px solid var(--border);
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
overflow: hidden;
}
.url-fav img {
display: block;
}
.url-inf {
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
.url-inf h1,
.url-inf h2 {
font-size: 22px;
font-weight: bold;
color: var(--text);
overflow-wrap: anywhere;
word-break: break-word;
}
.url-inf p {
font-size: 12px;
color: var(--text-light);
margin-top: 1px;
}
.url-meta {
margin-left: auto;
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-light);
white-space: nowrap;
flex-wrap: wrap;
justify-content: flex-end;
}
.url-meta strong {
color: var(--text);
font-weight: 700;
}
.url-meta .qs-i {
font-size: 12px;
color: var(--text-light);
}
.url-meta .qs-i strong {
font-size: 12px;
font-weight: 700;
}
.date-sep {
color: #ccc;
}
@media (max-width: 820px) {
.url-meta {
font-size: 11px;
}
}
@media (max-width: 640px) {
.url-meta {
flex-direction: column;
gap: 2px;
align-items: flex-end;
}
.date-sep {
display: none;
}
}
@media (max-width: 550px) {
.url-meta {
display: flex;
margin-left: 0;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
}
}
/* Incomplete scan toast */
/* Incomplete scan banner */
.incomplete-bar {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 18px;
border-radius: 6px;
margin-bottom: 10px;
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
border: 1px solid #93c5fd;
animation: staleSlide 0.35s ease-out;
}
.incomplete-icon {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
background: rgba(59, 130, 246, 0.12);
}
.incomplete-body {
flex: 1;
min-width: 0;
}
.incomplete-title {
font-size: 12.5px;
font-weight: 700;
color: #1e40af;
line-height: 1.3;
}
.incomplete-sub {
font-size: 11px;
color: #3b82f6;
margin-top: 1px;
line-height: 1.35;
}
.incomplete-services {
font-size: 10px;
font-weight: 600;
color: #1e40af;
margin-top: 4px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
/* Stale results banner */
/* The keyframe is shared with .incomplete-bar above (dynamically
* inserted, animation makes sense). The stale-bar used to share it
* back when Alpine flipped x-cloak off post-mount, but the bar is
* now SSR'd - animating it on every initial paint reads as a flash. */
@keyframes staleSlide {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.stale-bar {
display: none;
align-items: center;
gap: 14px;
padding: 12px 18px;
border-radius: 6px;
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
.stale-bar.visible {
display: flex;
}
.stale-bar.warn {
background: linear-gradient(135deg, #fef3e2 0%, #fde9cc 100%);
border: 1px solid #f5c97a;
box-shadow: 0 1px 6px rgba(180, 130, 40, 0.08);
}
.stale-bar.critical {
background: linear-gradient(135deg, #fef0ef 0%, #fde4e1 100%);
border: 1px solid #f5a09a;
box-shadow: 0 1px 6px rgba(180, 50, 40, 0.1);
}
.stale-icon {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.stale-bar.warn .stale-icon {
background: rgba(217, 151, 39, 0.12);
}
.stale-bar.critical .stale-icon {
background: rgba(192, 57, 43, 0.12);
}
.stale-body {
flex: 1;
min-width: 0;
}
.stale-title {
font-size: 12.5px;
font-weight: 700;
line-height: 1.3;
}
.stale-bar.warn .stale-title {
color: #8b6914;
}
.stale-bar.critical .stale-title {
color: #991b1b;
}
.stale-sub {
font-size: 11px;
margin-top: 1px;
line-height: 1.35;
}
.stale-bar.warn .stale-sub {
color: #a07d2e;
}
.stale-bar.critical .stale-sub {
color: #b44a42;
}
.stale-days {
font-weight: 700;
padding: 1px 5px;
border-radius: 3px;
font-size: 11px;
}
.stale-bar.warn .stale-days {
background: rgba(217, 151, 39, 0.12);
color: #8b6914;
}
.stale-bar.critical .stale-days {
background: rgba(192, 57, 43, 0.12);
color: #991b1b;
}
.stale-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 18px;
border-radius: 5px;
border: none;
cursor: pointer;
font-family: "Roboto", sans-serif;
font-size: 12px;
font-weight: 700;
transition:
background 0.15s,
transform 0.1s,
box-shadow 0.15s;
white-space: nowrap;
}
.stale-btn:hover {
transform: translateY(-1px);
}
.stale-bar.warn .stale-btn {
background: #d99727;
color: #fff;
box-shadow: 0 2px 8px rgba(217, 151, 39, 0.25);
}
.stale-bar.warn .stale-btn:hover {
background: #c58820;
}
.stale-bar.critical .stale-btn {
background: #c0392b;
color: #fff;
box-shadow: 0 2px 8px rgba(192, 57, 43, 0.25);
}
.stale-bar.critical .stale-btn:hover {
background: #a93226;
}
.stale-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.stale-btn svg {
width: 13px;
height: 13px;
}
@media (max-width: 640px) {
.stale-bar {
flex-wrap: wrap;
gap: 10px;
}
.stale-btn {
width: 100%;
justify-content: center;
}
}
/* Rescan in progress banner */
/* Rescan progress strip on report page */
.url-hdr + .scan-progress-strip,
.scan-progress-strip + .url-hdr {
margin-bottom: 10px;
}
/* Score card */
.score-card {
padding-top: 12px;
border-top: 1px solid var(--border-lt);
}
.sc-header {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 10px;
}
.sc-big-num {
font-size: 36px;
font-weight: 800;
line-height: 1;
letter-spacing: -1px;
}
.sc-big-den {
font-size: 15px;
font-weight: 600;
color: var(--text-light);
}
.sc-header-right {
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
}
/* ≤550px: drop the verdict badge onto its own row below the big score. */
@media (max-width: 550px) {
.sc-header {
flex-wrap: wrap;
}
.sc-header-right {
margin-left: 0;
width: 100%;
}
}
/* Verdict pill alongside the big score number on the score card.
* Class tier comes from getVerdictClass(score) -> good / mod / bad /
* unknown (was previously named .safe / .moderate / .danger, which did
* not match the template's emitted class names - the pill rendered
* unstyled). Text colour for each tier mirrors getScoreColor() so the
* pill and the .sc-big-num next to it share a hue per score band. */
.vbig {
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 22px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.3px;
white-space: nowrap;
}
.vbig.good {
/* background: #ecfdf5; */
color: #059669;
/* border: 1px solid #a7f3d0; */
}
.vbig.mod {
/* background: #fffbeb; */
color: #d97706;
/* border: 1px solid #fde68a; */
}
.vbig.bad {
/* background: #fef2f2; */
color: #dc2626;
/* border: 1px solid #fca5a5; */
}
.vbig.unknown {
/* background: #f1f5f9; */
color: #94a3b8;
/* border: 1px solid #cbd5e1; */
}
/*
* Trust-score bar (.sc-track + .sc-marker).
*
* The previous implementation grew a coloured fill from the left so
* fill quantity = score. That made the most dangerous sites read the
* calmest (a 5/100 had less red on screen than a 30/100). The fix
* (Option A from the redesign spec): keep the track as a permanent
* red->amber->green gradient and place a marker at the score position.
* Position now tells the story - the marker for a 5/100 sits deeper in
* the red than a 30/100, which matches the underlying risk.
*
* The marker's horizontal position is computed in pure CSS from the
* --score custom property the template sets on .sc-track. calc() keeps
* the marker fully inside the track at the extremes (score 0 and 100)
* so it never overshoots either edge - centre travels from 6px to
* (100% - 6px) for the 12px-wide marker.
*/
/* --score (0..100, set inline on .sc-track) drives BOTH the marker's position
and its colour. Registering it as a real
lets it interpolate, so
the entrance animation can slide + recolour the knob in lockstep. Engines
without @property (older Firefox) just snap to the final value - the knob
still lands in the right place with the right colour. */
@property --score {
syntax: "";
inherits: true;
initial-value: 0;
}
.sc-track {
position: relative;
height: 10px;
border-radius: 5px;
margin-bottom: 6px;
/* Query container so the marker can size its gradient to the track width via
100cqw (see .sc-marker). inline-size containment doesn't clip, so the
taller knob still overflows the track. */
container-type: inline-size;
/* Single source of truth for the gradient - the marker reuses it via
inheritance so the knob colour can never drift from the track. */
--sc-gradient: linear-gradient(
90deg,
#dc2626 0%,
#ef4444 19%,
#f97316 30%,
#f59e0b 45%,
#eab308 60%,
#84cc16 72%,
#22c55e 85%,
#16a34a 100%
);
background: var(--sc-gradient);
/* Animate --score 0 -> its set value a beat after paint, so the knob slides
from the start of the track to the score AND recolours through the
gradient on the way. `both` fill parks it at 0 during the 0.4s delay. */
animation: sc-fill 1.8s cubic-bezier(0, 0.82, 0.49, 0.99) 0.14s both;
/*animation: sc-fill 1.8s cubic-bezier(0, 0.82, 0.49, 0.99) 0.14s both;*/
}
@keyframes sc-fill {
from {
--score: 0;
}
}
.sc-marker {
position: absolute;
top: 50%;
/* centre travels 6px .. (100% - 6px) as --score goes 0 .. 100 so the
12px-wide marker stays fully inside the track at both extremes.
If the marker width changes, bump the two `6px` and the `12px` in
this formula in lockstep (the half-width and full width). */
left: calc(6px + (100% - 12px) * var(--score, 0) / 100);
transform: translate(-50%, -50%);
/* Vertical capsule knob: taller than wide with fully rounded ends. */
box-sizing: border-box;
width: 12px;
height: 24px;
border-radius: 999px;
/* White interior + a border whose colour matches the track gradient at the
knob's position. Two background layers behind a transparent border: white
clipped to the padding box (the interior stays white), and the track
gradient clipped to the border box (visible only under the transparent
border = the coloured ring). The gradient is sized to the track (100cqw)
and shifted to sample the slice under the knob, so the border colour ==
the track colour there, for every --score (and during the slide).
Offset = -((100cqw - 12px) * s / 100). */
border: 3px solid transparent;
background-image: linear-gradient(#fff, #fff), var(--sc-gradient);
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-size:
auto,
100cqw 100%;
background-position:
0 0,
calc((12px - 100cqw) * var(--score, 0) / 100) 0;
background-repeat: no-repeat;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}
@media (prefers-reduced-motion: reduce) {
.sc-track {
animation: none;
}
}
/* The .z-danger/.z-susp/.z-mod/.z-safe tier classes are still emitted on the
marker (hooks / back-compat), but the knob colour now comes from the
gradient sample above, so they no longer paint a border. */
.sc-ticks {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--text-light);
}
.sc-ticks span:first-child {
color: #dc2626;
}
.sc-ticks span:last-child {
color: #047857;
} /* darkened from #059669 - 3.76→5.04 on white */
@keyframes scFadeUp {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes scNumCount {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Quick info panel */
.qi-panel {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
.qi-it {
padding: 9px 14px;
border-right: 1px solid var(--border-lt);
border-bottom: 1px solid var(--border-lt);
}
.qi-it:nth-child(3n) {
border-right: none;
}
.qi-it:nth-child(n + 7) {
border-bottom: none;
}
.qi-it label {
font-size: 9px;
font-weight: 700;
color: var(--text-light);
text-transform: uppercase;
letter-spacing: 0.5px;
display: block;
margin-bottom: 1px;
}
.qi-it span {
font-size: 12px;
font-weight: 500;
color: var(--text);
}
/* var(--green) #1a9550 on white is 3.84:1 - fails WCAG AA for body text.
The qi-it labels are 12px, so use a darker shade here that clears 4.5:1
without changing the brand green used on green backgrounds elsewhere. */
.qi-it span.g {
color: #117a3f;
}
.qi-it span.r {
color: var(--red);
}
.pop-tier {
font-weight: 600 !important;
padding: 2px 8px;
border-radius: 4px;
}
.pop-tier.pop-t1 {
background: #f0fdf4;
}
.pop-tier.pop-t2 {
background: #f0fdf4;
}
.pop-tier.pop-t3 {
background: #f0fdf4;
}
.pop-tier.pop-t4 {
background: #fefce8;
}
.pop-tier.pop-t5 {
background: #fef2f2;
}
.pop-tier.pop-t6 {
background: #fef2f2;
}
.pop-tier.pop-t7 {
background: #fef2f2;
}
.pop-tier.pop-t1 {
color: #16a34a;
}
.pop-tier.pop-t2 {
color: #166534;
}
.pop-tier.pop-t3 {
color: #166534;
}
.pop-tier.pop-t4 {
color: #4d7c0f;
}
.pop-tier.pop-t5 {
color: #991b1b;
}
.pop-tier.pop-t6 {
color: #991b1b;
}
.pop-tier.pop-t7 {
color: #991b1b;
}
.ssl-ok {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--green-bg);
color: #157040;
font-size: 11px;
font-weight: 700;
padding: 2px 7px;
border-radius: 2px;
}
.ssl-bad {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--red-bg);
color: #991b1b;
font-size: 11px;
font-weight: 700;
padding: 2px 7px;
border-radius: 2px;
}
@media (max-width: 820px) {
.qi-panel {
grid-template-columns: repeat(2, 1fr);
}
.qi-it:nth-child(3n) {
border-right: 1px solid var(--border-lt);
}
.qi-it:nth-child(2n) {
border-right: none;
}
}
@media (max-width: 480px) {
.qi-panel {
grid-template-columns: 1fr;
}
.qi-it {
border-right: none !important;
}
}
/* AI overview sections */
.ai-sec {
margin-bottom: 0;
padding: 16px 18px;
border-radius: 6px;
}
.ai-sec + .ai-sec {
margin-top: 10px;
}
.ai-sec h2.ai-heading {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
border: none;
padding: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
.ai-sec h2.ai-heading .ai-ico {
width: 20px;
height: 20px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
}
.ai-sec h2.ai-heading .ai-ico svg {
width: 14px;
height: 14px;
}
.ai-sec p {
font-size: 13px;
color: var(--text-mid);
line-height: 1.7;
margin-bottom: 0;
}
.ai-sec p + p {
margin-top: 10px;
}
.ai-sec.ai-desc {
background: #f8fafe;
border: 1px solid #e8eef6;
}
.ai-sec.ai-desc h5 {
color: #374a6b;
}
.ai-sec.ai-desc h5 .ai-ico {
background: #e0ecf8;
}
.ai-sec.ai-safe {
background: linear-gradient(135deg, #f0faf4 0%, #e6f7ed 100%);
border: 1px solid #b6e2c8;
}
.ai-sec.ai-safe h5 {
color: #166534;
font-size: 14px;
}
.ai-sec.ai-safe h5 .ai-ico {
background: #bbf0d0;
}
.ai-sec.ai-safe p {
color: #1e4030;
}
.ai-sec.ai-danger {
background: linear-gradient(135deg, #fef6f5 0%, #fdecea 100%);
border: 1px solid #f0bcb6;
}
.ai-sec.ai-danger h5 {
color: #991b1b;
font-size: 14px;
}
.ai-sec.ai-danger h5 .ai-ico {
background: #fdd;
color: #dc2626;
}
.ai-sec.ai-danger p {
color: #5c1e1e;
}
.ai-sec.ai-caution {
background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
border: 1px solid #fdba74;
}
.ai-sec.ai-caution h5 {
color: #9a3412;
font-size: 14px;
}
.ai-sec.ai-caution h5 .ai-ico {
background: #fed7aa;
color: #ea580c;
}
.ai-sec.ai-caution p {
color: #7c2d12;
}
.ai-sec.ai-warning {
background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
border: 1px solid #fde047;
}
.ai-sec.ai-warning h5 {
color: #854d0e;
font-size: 14px;
}
.ai-sec.ai-warning h5 .ai-ico {
background: #fef08a;
color: #ca8a04;
}
.ai-sec.ai-warning p {
color: #713f12;
}
.ai-sec.ai-good {
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
border: 1px solid #86efac;
}
.ai-sec.ai-good h5 {
color: #166534;
font-size: 14px;
}
.ai-sec.ai-good h5 .ai-ico {
background: #bbf7d0;
color: #16a34a;
}
.ai-sec.ai-good p {
color: #14532d;
}
.ai-sec.ai-tech {
background: #fafafa;
border: 1px solid #e5e7eb;
}
.ai-sec.ai-tech h5 {
color: #52525b;
}
.ai-sec.ai-tech h5 .ai-ico {
background: #e9e9ec;
}
.ai-sec.ai-tech p {
font-size: 12.5px;
color: #71717a;
line-height: 1.65;
}
/* Screenshot + Quick Info combined card */
.ss-layout {
display: flex;
flex-direction: column;
}
.ss-area {
border-bottom: 1px solid var(--border-lt);
background: linear-gradient(135deg, #edf2fb, #e2ecfb);
min-height: 240px;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 16px;
}
.ss-win {
max-width: 962px;
background: #fff;
width: 100%;
border: 1px solid #bbb;
border-radius: 5px 5px 0 0;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
overflow: hidden;
}
.ss-ch {
height: 26px;
background: #f0f0f0;
display: flex;
align-items: center;
gap: 4px;
padding: 0 10px;
border-bottom: 1px solid #ddd;
}
.ss-d {
width: 7px;
height: 7px;
border-radius: 50%;
}
.ss-adr {
flex: 1;
height: 14px;
background: #fff;
border: 1px solid #ddd;
border-radius: 7px;
margin-left: 5px;
display: flex;
align-items: center;
padding: 0 8px;
font-size: 8.5px;
color: #555;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ss-bd {
position: relative;
overflow: hidden;
/* 16:9 matches the 1920×1080 screenshot the worker captures and keeps
the no-screenshot placeholder the same shape - no layout jump
between the two states. The placeholder + img layers below are both
position:absolute filling .ss-bd, so the box's own flex/centering is
unused - layout is handled per layer. */
aspect-ratio: 16 / 9;
background: #f3f4f6;
}
/* Placeholder text+icon layer: always rendered, always centered. The img
layer below stacks on top via DOM order when present; when absent the
placeholder shows through the (transparent) gap. */
.ss-bd-placeholder {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px;
text-align: center;
}
.ss-blur-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
text-align: center;
padding: 24px;
}
.ss-blur-card {
background: rgba(255, 255, 255, 0.95);
padding: 16px 24px;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
max-width: 320px;
/* Center the title + description text. The icon SVG is centered by
the rule below because Tailwind preflight forces svg{display:block}
globally, which makes text-align ineffective on the icon - we have
to use margin auto on a block element with an explicit width. */
text-align: center;
}
.ss-blur-card svg {
margin-left: auto;
margin-right: auto;
}
.ss-blur-btn {
color: #fff;
border: none;
padding: 6px 16px;
border-radius: 5px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
/* Real screenshot - absolute fill so it sits on top of the placeholder
layer and covers it when present. Object-fit: cover handles any
aspect-ratio drift if the captured image isn't exactly 16:9. */
.screenshot-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* HTML watermark overlay. Sits on top of the baked-in pill that
src/utils/watermark.ts composites into the JPEG. The baked version
becomes pixelated/illegible when the screenshot scales down on mobile
- this CSS pill stays crisp at any size and overlaps the baked one
so the user sees the readable HTML version, not the rasterised
underlying mark. Anchor + size match the baked spec at desktop scale,
then step down via media queries on smaller viewports.
z-index 4 keeps it under .ss-blur-overlay (z:5) and the NSFW badge
(z:6) so risk warnings still take priority. */
.ss-wm {
position: absolute;
left: 1.3%;
bottom: 2.6%;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 12px 7px 10px;
background: rgba(255, 255, 255, 0.97);
border: 1.5px solid rgba(0, 0, 0, 0.22);
border-radius: 999px;
box-sizing: border-box;
pointer-events: none;
white-space: nowrap;
z-index: 4;
opacity: 1;
}
.ss-wm-logo {
height: 18px;
width: auto;
display: block;
flex-shrink: 0;
}
.ss-wm-rule {
display: inline-block;
width: 1px;
height: 12px;
background: rgba(0, 0, 0, 0.16);
flex-shrink: 0;
}
.ss-wm-date {
font-family: ui-monospace, "Courier New", Menlo, Consolas, monospace;
font-size: 10.5px;
font-weight: 700;
color: #1a1a1a;
letter-spacing: 0.02em;
line-height: 1;
}
@media (max-width: 768px) {
.ss-wm {
padding: 5px 10px 5px 8px;
gap: 6px;
left: 1.2%;
bottom: 2.4%;
}
.ss-wm-logo {
height: 14px;
}
.ss-wm-rule {
height: 10px;
}
.ss-wm-date {
font-size: 9px;
}
}
@media (max-width: 480px) {
.ss-wm {
padding: 3px 7px 3px 5px;
gap: 4px;
border-width: 1px;
left: 1.1%;
bottom: 2.2%;
}
.ss-wm-logo {
height: 11px;
}
.ss-wm-rule {
height: 8px;
}
.ss-wm-date {
font-size: 7.5px;
letter-spacing: 0;
}
}
/* Blacklist Status - redesigned */
.bl-summary {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
}
.bl-big-num {
font-size: 36px;
font-weight: 900;
line-height: 1;
}
.bl-big-num.clean {
color: var(--green);
}
.bl-big-num.flagged {
color: var(--red);
}
.bl-meta {
display: flex;
flex-direction: column;
gap: 2px;
}
.bl-meta-line {
font-size: 12px;
color: var(--text-light);
}
.bl-meta-line strong {
color: var(--text);
font-weight: 700;
}
.bl-grid-wrap {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 8px;
padding: 4px 0;
max-width: 654px;
margin-left: auto;
margin-right: auto;
}
.bl-square {
width: 10px;
height: 10px;
border-radius: 2px;
transition: background 0.3s ease;
display: inline-block;
}
.bl-square.clean {
background: #b0dcc0;
}
.bl-square.flagged-low {
background: #e05a4a;
}
.bl-square.flagged-mid {
background: #e05a4a;
}
.bl-square.flagged-high {
background: #d4453a;
}
.bl-grid-note {
font-size: 10.5px;
color: var(--text-light);
}
.bl-legend {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.bl-legend-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 10.5px;
color: var(--text-light);
}
.bl-legend-swatch {
width: 8px;
height: 8px;
border-radius: 1.5px;
flex-shrink: 0;
}
.bl-section-divider {
display: flex;
align-items: center;
gap: 10px;
margin: 18px 0 12px;
font-size: 11px;
font-weight: 600;
color: var(--text-light);
text-transform: uppercase;
letter-spacing: 0.4px;
}
.bl-section-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--border-lt);
}
.bl-sources-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 6px;
}
.bl-src-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: #fafbfc;
border: 1px solid var(--border-lt);
border-radius: 6px;
gap: 8px;
transition: border-color 0.15s;
text-decoration: none;
color: inherit;
}
.bl-src-card:hover {
border-color: var(--border);
text-decoration: none;
}
/* Skeleton placeholder swallows clicks - href="#" satisfies the Lighthouse
crawlable-anchors check but we don't want a stray click during the brief
pre-data window to scroll to the top. */
.bl-src-card-loading {
pointer-events: none;
cursor: default;
}
.bl-src-name {
font-size: 11.5px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bl-src-chip {
font-size: 9.5px;
font-weight: 700;
padding: 2px 8px;
border-radius: 10px;
letter-spacing: 0.3px;
flex-shrink: 0;
}
.bl-src-chip.clean {
background: var(--green-bg);
color: #0f6939;
border: 1px solid #c6e9d4;
} /* was var(--green)=#1a9550 - 3.43 on #e8f5ee fails. #0f6939 hits 5.1 */
.bl-src-chip.flagged {
background: var(--red-bg);
color: var(--red);
border: 1px solid #f5c6c0;
text-transform: uppercase;
}
.bl-vt-link {
display: flex;
align-items: center;
gap: 8px;
margin-top: 16px;
padding: 10px 14px;
background: #f8fafe;
border: 1px solid #d6e4f7;
border-radius: 6px;
font-size: 12px;
color: var(--blue-link);
font-weight: 600;
text-decoration: none;
transition:
background 0.15s,
border-color 0.15s;
}
.bl-vt-link:hover {
background: #eef3fb;
border-color: #b8cee8;
text-decoration: none;
}
.bl-vt-link svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.bl-vt-arrow {
margin-left: auto;
opacity: 0.5;
}
@media (max-width: 640px) {
.bl-sources-grid {
grid-template-columns: 1fr 1fr;
}
.bl-summary {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
@media (max-width: 440px) {
.bl-sources-grid {
grid-template-columns: 1fr;
}
}
/* External links cards */
.el-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.el-card {
background: #f8fafe;
border: 1px solid var(--border-lt);
border-radius: 6px;
padding: 10px 12px;
text-align: center;
}
.el-num {
font-size: 22px;
font-weight: 800;
color: var(--text);
line-height: 1;
}
.el-lbl {
font-size: 9px;
font-weight: 600;
color: var(--text-light);
text-transform: uppercase;
letter-spacing: 0.4px;
margin-top: 3px;
}
.el-status {
display: inline-block;
font-size: 9px;
font-weight: 700;
padding: 1px 6px;
border-radius: 10px;
margin-top: 5px;
}
.el-status.ok {
background: var(--green-bg);
color: #157040;
}
.el-status.bad {
background: var(--red-bg);
color: #991b1b;
}
@media (max-width: 640px) {
.el-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Redirect chain */
.rd-chain-list {
display: flex;
flex-flow: row wrap;
align-items: center;
gap: 6px 10px;
padding: 4px 0;
max-height: 300px;
overflow-y: auto;
}
.rd-step {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
}
.rd-node-url-full {
font-weight: 600;
color: var(--text);
font-size: 11px;
word-break: break-all;
}
.rd-node-code {
font-size: 9px;
font-weight: 700;
padding: 1px 5px;
border-radius: 3px;
flex-shrink: 0;
}
.rd-node-code.c2 {
background: var(--green-bg);
color: #157040;
}
.rd-node-code.c3 {
background: #fef3c7;
color: #92400e;
}
.rd-arrow-right {
color: var(--text-light);
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.rd-none {
font-size: 12px;
color: var(--text-light);
padding: 8px 0;
display: flex;
align-items: center;
gap: 6px;
}
.rd-none .rd-ok {
color: var(--green);
font-weight: 700;
}
/* Disclaimer */
.scan-disclaimer {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 16px;
background: #f8f9fb;
border: 1px solid var(--border-lt);
border-radius: 3px;
margin-bottom: 10px;
}
.scan-disclaimer-icon {
flex-shrink: 0;
width: 16px;
height: 16px;
margin-top: 1px;
color: var(--text-light);
opacity: 0.6;
}
.scan-disclaimer-text {
font-size: 11px;
color: var(--text-light);
line-height: 1.55;
}
/* Underline by default so the link is distinguishable without relying on
colour (WCAG 1.4.1). Hover is the same underline - no flicker. */
.scan-disclaimer-text a {
color: var(--blue-link);
text-decoration: underline;
}
/* ── Inline Scan Progress Strip ── */
@keyframes spsExpand {
from {
opacity: 0;
transform: translateY(-8px);
max-height: 0;
margin-top: 0;
}
to {
opacity: 1;
transform: translateY(0);
max-height: 200px;
margin-top: 16px;
}
}
@keyframes spsShimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(220%);
}
}
@keyframes spsRadar {
0% {
box-shadow:
0 0 0 0 rgba(35, 86, 178, 0.55),
0 0 0 0 rgba(35, 86, 178, 0);
}
70% {
box-shadow:
0 0 0 8px rgba(35, 86, 178, 0),
0 0 0 16px rgba(35, 86, 178, 0);
}
100% {
box-shadow:
0 0 0 0 rgba(35, 86, 178, 0),
0 0 0 0 rgba(35, 86, 178, 0);
}
}
@keyframes spsStepFade {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.main-scanning-container {
margin: 0 36px 20px 36px;
border: 1px solid #dde6f3;
border-radius: 12px;
padding: 0px;
background: linear-gradient(180deg, #f9fbfe 0%, #f3f7fc 100%);
}
.scan-progress-strip {
display: none;
overflow: hidden;
position: relative;
margin: 0px;
margin-top: 0px !important;
padding: 0 18px 0px 18px;
max-height: 0;
opacity: 0;
}
.scan-progress-strip.on {
display: block;
animation: spsExpand 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
padding: 9px 18px;
border-radius: inherit;
}
/* Inline-flow layout. Children are s and flow naturally as
text - the radar dot acts like an inline bullet, label/step/pct
read like one continuous line. When the message overflows the
strip's width (often on phones, occasionally on desktop with long
content) it wraps to multiple lines instead of truncating. The
single-line flex layout with text-overflow: ellipsis was producing
"..." truncation on narrow screens; this version is width-
independent and never hides the message. */
.sps-head {
margin-bottom: 12px;
}
.sps-radar {
display: inline-block;
vertical-align: middle;
width: 9px;
height: 9px;
border-radius: 50%;
background: #2356b2;
margin-right: 8px;
animation: spsRadar 1.6s ease-out infinite;
}
.sps-label {
font-size: 11px;
font-weight: 700;
color: #5b6b85;
text-transform: uppercase;
letter-spacing: 0.7px;
margin-right: 6px;
}
.sps-step {
font-size: 13px;
font-weight: 500;
line-height: 1.4;
color: #1a1a1a;
animation: spsStepFade 0.35s ease both;
}
.sps-step strong {
color: #2356b2;
font-weight: 700;
}
.sps-pct {
font-size: 12px;
font-weight: 800;
color: #2356b2;
font-variant-numeric: tabular-nums;
letter-spacing: -0.2px;
margin-left: 6px;
transition: color 0.5s ease;
}
.sps-track {
position: relative;
height: 6px;
background: #e4ecf7;
border-radius: 999px;
overflow: hidden;
}
.sps-fill {
position: absolute;
inset: 0 auto 0 0;
width: 0%;
background: linear-gradient(90deg, #4d7ec9 0%, #2356b2 60%, #1e3f8a 100%);
border-radius: 999px;
transition:
width 0.55s cubic-bezier(0.4, 0, 0.2, 1),
background 0.6s ease;
}
.scan-progress-strip.finishing .sps-fill {
background: linear-gradient(90deg, #34c66a 0%, #1f9e4f 100%);
}
.scan-progress-strip.finishing .sps-pct {
color: #1f9e4f;
}
.scan-progress-strip.finishing .sps-step strong {
color: #1f9e4f;
}
.sps-fill::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.55) 50%,
rgba(255, 255, 255, 0) 100%
);
animation: spsShimmer 1.4s linear infinite;
}
.sps-pips {
display: flex;
gap: 4px;
margin-top: 10px;
}
.sps-pip {
flex: 1;
height: 3px;
border-radius: 2px;
background: #d8e1f0;
transition: background 0.4s ease;
}
.sps-pip.done {
background: #2356b2;
}
.sps-pip.active {
animation: spsPipPulse 1.5s ease-in-out infinite;
}
.scan-progress-strip.finishing .sps-pip.done {
background: #1f9e4f;
}
@keyframes spsPipPulse {
0%,
100% {
background: #d8e1f0;
}
50% {
background: #a8bde0;
}
}
/* Error state */
.scan-progress-strip.sps-error {
background: linear-gradient(180deg, #fef8f8 0%, #fef2f2 100%);
border-color: #fecaca;
}
.scan-progress-strip.sps-error .sps-label {
color: #991b1b;
}
.scan-progress-strip.sps-error .sps-step {
color: #6b7280;
}
.sps-radar-err {
background: #dc2626;
animation: spsRadar 1.6s ease-out infinite;
}
.sps-fill-err {
background: linear-gradient(90deg, #f87171 0%, #dc2626 100%);
}
/* Warning state */
.scan-progress-strip.sps-warn {
background: linear-gradient(180deg, #fffdf7 0%, #fffbeb 100%);
border-color: #fde68a;
}
.scan-progress-strip.sps-warn .sps-label {
color: #92400e;
}
.scan-progress-strip.sps-warn .sps-step {
color: #6b7280;
}
.sps-radar-warn {
background: #d97706;
animation: spsRadar 1.6s ease-out infinite;
}
/* Info state (not-scanned banner) */
.scan-progress-strip.sps-info {
background: linear-gradient(180deg, #f8fbff 0%, #eff6ff 100%);
border-color: #bfdbfe;
}
.scan-progress-strip.sps-info .sps-label {
color: #1e40af;
}
.scan-progress-strip.sps-info .sps-step {
color: #1e40af;
}
.sps-radar-info {
background: #3b82f6;
animation: spsRadar 1.6s ease-out infinite;
}
.sps-fill-warn {
background: linear-gradient(90deg, #fbbf24 0%, #d97706 100%);
}
/* Multi-line variant - used by the "scan exhausted" state where the message
needs to wrap across multiple lines instead of being truncated. */
.scan-progress-strip.sps-multiline .sps-head {
margin-bottom: 6px;
}
.sps-multiline-msg {
font-size: 13px;
font-weight: 500;
line-height: 1.5;
color: #1a1a1a;
margin: 0;
white-space: normal;
word-wrap: break-word;
}
@media (max-width: 540px) {
/* Two-row layout at narrow widths:
row 1: [radar] LABEL
row 2: step text... 42%
Flexbox has no explicit line-break, so we insert a 100%-basis
zero-height pseudo on .sps-head at order:5 - it sits between the
label (default order 0) and the step (order 10), consumes the rest
of row 1, and forces step + pct down together onto row 2 where
they sit side by side via flex's natural inline-row layout. */
.sps-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: 6px;
row-gap: 0;
}
.sps-head::after {
content: "";
flex-basis: 100%;
height: 0;
order: 5;
}
.sps-step {
order: 10;
margin: 4px 0 0 0;
font-size: 12px;
}
.sps-pct {
order: 11;
margin: 4px 0 0 0;
}
.sps-label {
font-size: 10px;
}
.sps-multiline-msg {
font-size: 12px;
}
}
/* ── FAQ ── */
.faq-list {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Skeleton bar inside the .faq-q button - used by the pre-Alpine FAQ
placeholders so the section reserves vertical space before faq-item
mounts. Width tuned to look like a question line. */
.skel-faq-q-text {
height: 16px;
width: 60%;
border-radius: 4px;
}
.faq-item {
background: #fff;
border: 1px solid #d0d0d0;
border-radius: 8px;
overflow: hidden;
transition:
box-shadow 0.2s,
border-color 0.2s;
}
.faq-item:hover {
border-color: #c6d4e8;
box-shadow: 0 2px 8px rgba(35, 86, 178, 0.06);
}
.faq-item.open {
border-color: #93c5fd;
box-shadow: 0 2px 12px rgba(35, 86, 178, 0.08);
}
.faq-q {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
color: #1f2937;
background: none;
border: none;
width: 100%;
text-align: left;
font-family: inherit;
transition: background 0.15s;
}
.faq-q:hover {
background: #f9fafb;
}
.faq-q-icon {
flex-shrink: 0;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #eff6ff;
color: var(--blue);
transition:
transform 0.3s ease,
background 0.2s;
}
.faq-item.open .faq-q-icon {
transform: rotate(45deg);
background: var(--blue);
color: #fff;
}
.faq-q-text {
flex: 1;
}
.faq-a {
max-height: 0;
overflow: hidden;
transition:
max-height 0.4s ease,
padding 0.25s ease;
}
.faq-item.open .faq-a {
max-height: 800px;
}
.faq-a-inner {
padding: 0 18px 16px 52px;
font-size: 15.5px;
line-height: 1.7;
color: #4b5563;
}
.faq-a-inner p + p {
margin-top: 8px;
}
.faq-a-inner a {
color: var(--blue);
text-decoration: none;
}
.faq-a-inner a:hover {
text-decoration: underline;
}
.faq-a-inner ul {
margin: 6px 0 2px 18px;
}
.faq-a-inner li {
margin-bottom: 3px;
}
@media (max-width: 540px) {
.faq-q {
padding: 12px 14px;
font-size: 15px;
gap: 10px;
}
.faq-a-inner {
padding: 0 14px 14px 46px;
font-size: 15px;
}
}
/* ── PAGINATION ──
SSR'd pages use for nav buttons and
for the inert ends; the legacy SPA used