/* ==========================================================================
ADA Audit Report — Global Design System
adaauditreport.com
========================================================================== */
/* --- FONTS ---
* Google Fonts loaded via in HTML , NOT via @import here.
* @import in CSS creates a render-blocking chain that hurts Lighthouse performance.
* Every HTML page must include:
*
*
*
*/
/* --- RESET --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* --- DESIGN TOKENS --- */
/*
* WCAG 2.1 AA contrast notes (verified against rendered output):
*
* Text tokens on dark backgrounds (#0C1220 / #0F1826 / #131C2E):
* --color-text-primary #FFFFFF → 18.3:1 ✓ AAA
* --color-text-secondary rgba(255,255,255,.72) ≈ #B8B9BB → 9.2:1 ✓ AAA
* --color-text-muted rgba(255,255,255,.60) ≈ #9B9FA7 → 7.1:1 ✓ AA (was .30 = 2.66:1 — failing)
*
* Accent tokens:
* --color-accent (button fill) #B84616 → white text 5.1:1 ✓ AA (was #E8622A = 3.38:1 — failing)
* --color-accent-hover #9B3810 → white text 6.4:1 ✓ AA
* --color-accent-decorative #E8622A → legacy brand orange for borders/dots ONLY, never holds text
* --color-accent-text #F4924A → on dark bg 7.3:1 ✓ AA
*
* Status colors on dark bg:
* --color-success #3ABC78 → 6.4:1 ✓ AA
* --color-warning #EAC200 → 12.1:1 ✓ AAA
* --color-danger #E87B6E → 5.6:1 ✓ AA (raised from #C0392B which failed on dark)
*/
:root {
/* Backgrounds */
--color-bg: #0C1220;
--color-surface: #131C2E;
--color-surface-alt: #0F1826;
--color-border: rgba(255,255,255,0.08);
/* Accent — button-fill variant (passes white-text contrast) */
--color-accent: #B84616;
--color-accent-hover: #9B3810;
--color-accent-muted: rgba(232,98,42,0.14);
--color-accent-text: #F4924A;
/* Legacy brand orange — decorative use only (borders, dots, badges without text) */
--color-accent-decorative: #E8622A;
/* Text */
--color-text-primary: #FFFFFF;
--color-text-secondary: rgba(255,255,255,0.72);
--color-text-muted: rgba(255,255,255,0.60);
/* Status */
--color-success: #3ABC78;
--color-danger: #C0392B;
--color-warning: #EAC200;
/* Typography */
--font-display: 'DM Serif Display', serif;
--font-body: 'DM Sans', sans-serif;
}
/* --- BASE --- */
body {
font-family: var(--font-body);
color: var(--color-text-secondary);
line-height: 1.65;
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
}
/*
* Links default to NO underline for navigation/CTA contexts (buttons, cards,
* nav items) where the surrounding chrome makes the link affordance obvious.
*
* WCAG 1.4.1 (Use of Color) requires a non-color indicator for links inside
* paragraphs of text. That's handled by the explicit `.article-body a` and
* related prose-context rules below, which re-enable underline.
*
* This is a deliberate pattern: chrome links = no underline, prose links = underlined.
*/
a { color: var(--color-accent-text); text-decoration: none; }
a:hover { color: #fff; text-decoration: underline; }
a:focus-visible { text-decoration: underline; }
/* Prose links — underlined per WCAG 1.4.1 */
.article-body a,
.legal-content a,
.about-content a,
.guide-content a,
p a,
li a {
text-decoration: underline;
text-underline-offset: 2px;
}
/* But nav, footer, buttons, cards — no underline (chrome, not prose) */
.nav-links a,
.footer-list a,
.site-footer a,
.btn-primary,
.btn-secondary,
.btn-text,
.nav-cta,
.blog-card a,
.blog-card h3 a,
.receive-card a,
.who-card a,
.card a,
.card-accent a,
.score-card-footer a,
.stats-source,
.logo,
.logo a,
.footer-brand a {
text-decoration: none;
}
img { max-width: 100%; height: auto; }
/* --- ACCESSIBILITY --- */
.skip-link {
position: absolute;
top: -100%;
left: 16px;
background: var(--color-accent);
color: #fff;
padding: 12px 24px;
border-radius: 0 0 8px 8px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
z-index: 200;
}
.skip-link:focus { top: 0; }
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* --- LAYOUT --- */
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 40px;
}
@media (max-width: 768px) {
.container { padding: 0 16px; }
}
/* --- TYPOGRAPHY --- */
h1, h2, h3, h4 { color: var(--color-text-primary); }
h1 {
font-family: var(--font-display);
font-size: clamp(32px, 5vw, 42px);
font-weight: 400;
line-height: 1.12;
}
h2 {
font-family: var(--font-display);
font-size: clamp(24px, 3.5vw, 32px);
font-weight: 400;
line-height: 1.2;
}
h3 {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
background: var(--color-accent-muted);
border: 0.5px solid rgba(232,98,42,0.28);
border-radius: 100px;
font-size: 11px;
font-weight: 500;
color: var(--color-accent-text);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 20px;
}
.eyebrow-dot {
width: 6px;
height: 6px;
background: var(--color-accent);
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.section-sub {
font-size: 14px;
color: var(--color-text-secondary);
max-width: 560px;
line-height: 1.65;
}
/* --- BUTTONS --- */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--color-accent);
color: #fff;
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
padding: 12px 22px;
border-radius: 8px;
border: none;
cursor: pointer;
text-decoration: none;
transition: background 0.2s;
}
.btn-primary:hover { background: var(--color-accent-hover); color: #fff; }
.btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
color: rgba(255,255,255,0.65);
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
padding: 12px 16px;
border-radius: 8px;
border: 0.5px solid rgba(255,255,255,0.14);
cursor: pointer;
text-decoration: none;
transition: border-color 0.2s, color 0.2s;
}
.btn-secondary:hover { border-color: rgba(255,255,255,0.3); color: #fff; }
.btn-text {
color: var(--color-accent-text);
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: color 0.2s;
}
.btn-text:hover { color: #fff; }
/* --- CARDS --- */
.card {
background: var(--color-surface);
border: 0.5px solid var(--color-border);
border-radius: 10px;
padding: 20px 18px;
}
.card-accent {
border-color: rgba(232,98,42,0.28);
}
/* --- SEVERITY BADGES --- */
.badge {
display: inline-block;
padding: 3px 10px;
border-radius: 100px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
white-space: nowrap;
}
.badge-critical {
background: rgba(192,57,43,0.22);
color: #E87B6E;
border: 0.5px solid rgba(192,57,43,0.38);
}
.badge-serious {
background: rgba(232,98,42,0.18);
color: #F4924A;
border: 0.5px solid rgba(232,98,42,0.32);
}
.badge-moderate {
background: rgba(234,190,0,0.12);
color: #EAC200;
border: 0.5px solid rgba(234,190,0,0.28);
}
/* ==========================================================================
NAVIGATION — Global (all 16 pages)
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--color-bg);
border-bottom: 0.5px solid var(--color-border);
padding: 0 40px;
}
.nav-inner {
max-width: 1100px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
height: 56px;
}
.logo {
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
color: var(--color-text-primary);
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
}
.logo:hover { color: var(--color-text-primary); }
.logo-icon {
width: 28px;
height: 28px;
background: var(--color-accent);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 14px;
font-weight: 800;
}
.nav-links {
display: flex;
align-items: center;
gap: 28px;
list-style: none;
}
.nav-links a {
color: var(--color-text-secondary);
text-decoration: none;
font-size: 13px;
font-weight: 400;
transition: color 0.2s;
}
.nav-links a:hover { color: #fff; }
.nav-links a.active { color: #fff; }
.nav-cta {
background: var(--color-accent);
color: #fff !important;
font-size: 11px !important;
font-weight: 500 !important;
padding: 8px 16px;
border-radius: 6px;
transition: background 0.2s;
}
.nav-cta:hover { background: var(--color-accent-hover); }
@media (max-width: 768px) {
.site-header { padding: 0 16px; }
.nav-links { display: none; }
.nav-mobile-cta { display: inline-flex; }
}
@media (min-width: 769px) {
.nav-mobile-cta { display: none; }
}
/* ==========================================================================
FOOTER — Global (all 16 pages)
========================================================================== */
.site-footer {
background: var(--color-bg);
border-top: 0.5px solid rgba(255,255,255,0.06);
padding: 48px 40px 24px;
}
.footer-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 40px;
}
.footer-brand { max-width: 300px; }
.footer-brand .logo { margin-bottom: 16px; }
.footer-brand p {
font-size: 13px;
color: var(--color-text-muted);
line-height: 1.7;
}
.footer-group h4,
.footer-heading {
font-size: 11px;
font-weight: 600;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 16px;
}
.footer-list {
list-style: none;
}
.footer-list li { margin-bottom: 10px; }
.footer-list a {
font-size: 13px;
color: var(--color-text-muted);
text-decoration: none;
transition: color 0.2s;
}
.footer-list a:hover { color: var(--color-text-primary); }
.footer-bottom {
max-width: 1100px;
margin: 32px auto 0;
padding-top: 20px;
border-top: 0.5px solid rgba(255,255,255,0.06);
font-size: 12px;
color: var(--color-text-muted);
display: flex;
justify-content: space-between;
}
@media (max-width: 768px) {
.site-footer { padding: 32px 16px 20px; }
.footer-inner {
grid-template-columns: 1fr 1fr;
gap: 28px;
}
.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
.footer-inner { grid-template-columns: 1fr; }
}
/* ==========================================================================
SECTION UTILITIES
========================================================================== */
.section {
padding: 56px 0;
}
.section-alt {
background: var(--color-surface-alt);
}
.section-surface {
background: var(--color-surface);
}
.text-center { text-align: center; }
/* ==========================================================================
HOMEPAGE — Hero
========================================================================== */
.hero {
padding: 64px 0 48px;
}
.hero-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 1fr 380px;
gap: 48px;
align-items: start;
}
.hero h1 em {
color: var(--color-accent-text);
font-style: italic;
}
.hero-sub {
font-size: 14px;
color: var(--color-text-secondary);
line-height: 1.7;
margin: 16px 0 24px;
max-width: 480px;
}
.hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 28px;
}
.hero-proof {
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 20px;
}
.hero-proof li {
font-size: 12px;
color: var(--color-text-secondary);
display: flex;
align-items: center;
gap: 8px;
}
.hero-proof li::before {
content: '';
width: 4px;
height: 4px;
background: var(--color-accent);
border-radius: 50%;
flex-shrink: 0;
}
/* Score card (hero right column) */
.score-card {
background: var(--color-surface);
border: 0.5px solid var(--color-border);
border-radius: 10px;
overflow: hidden;
}
.score-card-header {
background: linear-gradient(135deg, #0F1826 0%, #131C2E 100%);
padding: 18px 20px;
border-bottom: 0.5px solid var(--color-border);
}
.score-card-title {
font-size: 12px;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 2px;
}
.score-card-domain {
font-size: 11px;
color: var(--color-text-muted);
}
.score-card-score {
display: flex;
align-items: center;
gap: 12px;
margin-top: 14px;
}
.score-ring {
width: 48px;
height: 48px;
border-radius: 50%;
border: 3px solid var(--color-danger);
display: flex;
align-items: center;
justify-content: center;
color: #E87B6E;
font-size: 18px;
font-weight: 600;
}
.score-card-score-text {
font-size: 11px;
color: #E87B6E;
font-weight: 500;
}
.score-card-body {
padding: 16px 20px;
}
.score-card-finding {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 0;
border-bottom: 0.5px solid var(--color-border);
}
.score-card-finding:last-child { border-bottom: none; }
.score-card-finding-text {
font-size: 12px;
color: var(--color-text-secondary);
line-height: 1.4;
}
.score-card-finding-count {
font-size: 10px;
color: var(--color-text-muted);
margin-top: 2px;
}
.score-card-footer {
padding: 12px 20px;
border-top: 0.5px solid var(--color-border);
text-align: center;
}
.score-card-footer a {
font-size: 12px;
font-weight: 500;
color: var(--color-accent-text);
}
@media (max-width: 768px) {
.hero { padding: 40px 0 32px; }
.hero-inner {
grid-template-columns: 1fr;
padding: 0 16px;
gap: 32px;
}
.hero-proof { grid-template-columns: 1fr; }
.hero-proof li:nth-child(n+4) { display: none; }
}
/* ==========================================================================
HOMEPAGE — Stats Bar
========================================================================== */
.stats-bar {
padding: 28px 0;
border-top: 0.5px solid var(--color-border);
border-bottom: 0.5px solid var(--color-border);
}
.stats-bar-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 40px;
display: flex;
align-items: center;
justify-content: space-between;
}
.stat-cell {
text-align: center;
}
.stat-num {
font-family: var(--font-body);
font-size: 22px;
font-weight: 600;
color: var(--color-text-primary);
line-height: 1;
}
.stat-label {
font-size: 11px;
color: var(--color-text-muted);
margin-top: 4px;
}
.stats-source {
font-size: 11px;
color: var(--color-text-muted);
text-decoration: none;
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.stats-source:hover { color: var(--color-accent-text); }
@media (max-width: 768px) {
.stats-bar-inner {
flex-wrap: wrap;
padding: 0 16px;
gap: 20px;
justify-content: center;
}
.stat-cell { flex: 0 0 calc(50% - 10px); }
.stats-source { flex: 0 0 100%; text-align: center; justify-content: center; margin-top: 4px; }
}
/* ==========================================================================
HOMEPAGE — What You Receive
========================================================================== */
.receive-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 32px;
}
.receive-card {
background: var(--color-surface);
border: 0.5px solid var(--color-border);
border-radius: 10px;
padding: 20px 18px;
}
.receive-card.card-accent { border-color: rgba(232,98,42,0.28); }
.receive-card-icon {
font-size: 18px;
margin-bottom: 12px;
}
.receive-card h3 {
font-size: 13px;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 8px;
}
.receive-card p {
font-size: 13px;
color: var(--color-text-secondary);
line-height: 1.6;
}
.code-snippet {
margin-top: 12px;
background: #0a0f1a;
border: 0.5px solid var(--color-border);
border-radius: 6px;
padding: 12px;
font-family: 'SF Mono', Monaco, Consolas, monospace;
font-size: 11px;
line-height: 1.5;
overflow-x: auto;
}
.code-snippet .code-bad { color: #E87B6E; }
.code-snippet .code-good { color: var(--color-success); }
@media (max-width: 768px) {
.receive-grid { grid-template-columns: 1fr; }
.receive-card-hidden-mobile { display: none; }
}
/* ==========================================================================
HOMEPAGE — Who This Is For
========================================================================== */
.who-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-top: 24px;
}
.who-card {
background: var(--color-surface);
border: 0.5px solid var(--color-border);
border-radius: 10px;
padding: 18px 16px;
text-align: center;
}
.who-card-icon {
font-size: 20px;
margin-bottom: 8px;
}
.who-card h3 {
font-size: 13px;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 4px;
}
.who-card p {
font-size: 12px;
color: var(--color-text-muted);
line-height: 1.5;
}
@media (max-width: 768px) {
.who-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.who-grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
HOMEPAGE — Pricing
========================================================================== */
.pricing-card {
max-width: 440px;
margin: 32px auto 0;
background: var(--color-surface);
border: 0.5px solid rgba(232,98,42,0.28);
border-radius: 12px;
padding: 36px 32px;
text-align: center;
}
.pricing-price {
font-family: var(--font-body);
font-size: 48px;
font-weight: 600;
color: var(--color-text-primary);
line-height: 1;
}
.pricing-sub {
font-size: 13px;
color: var(--color-text-muted);
margin-top: 4px;
}
.pricing-features {
list-style: none;
margin: 24px 0;
text-align: left;
}
.pricing-features li {
padding: 7px 0;
font-size: 13px;
color: var(--color-text-secondary);
display: flex;
align-items: flex-start;
gap: 10px;
}
.pricing-check {
color: var(--color-success);
font-weight: 700;
flex-shrink: 0;
font-size: 14px;
}
/* ==========================================================================
HOMEPAGE — FAQ
========================================================================== */
.faq-list {
max-width: 700px;
margin: 32px auto 0;
}
.faq-item {
border-bottom: 0.5px solid var(--color-border);
}
.faq-q {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
color: var(--color-text-primary);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
width: 100%;
background: none;
border: none;
text-align: left;
padding: 18px 0;
line-height: 1.4;
}
.faq-toggle {
flex-shrink: 0;
font-size: 18px;
color: var(--color-text-muted);
width: 20px;
text-align: center;
transition: transform 0.2s;
}
.faq-a {
font-size: 13px;
color: var(--color-text-secondary);
line-height: 1.7;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-item.open .faq-a {
max-height: 600px;
padding-bottom: 18px;
}
.faq-item.open .faq-toggle {
transform: rotate(45deg);
}
.faq-callout {
margin: 12px 0;
padding: 14px 16px;
border-radius: 8px;
font-size: 13px;
line-height: 1.6;
}
.faq-callout-orange {
background: var(--color-accent-muted);
border-left: 3px solid var(--color-accent);
color: var(--color-accent-text);
}
.faq-callout-green {
background: rgba(58,188,120,0.1);
border-left: 3px solid var(--color-success);
color: var(--color-success);
}
/* ==========================================================================
HOMEPAGE — Founder
========================================================================== */
.founder-card {
display: flex;
gap: 24px;
align-items: center;
max-width: 600px;
margin: 0 auto;
padding: 24px;
background: var(--color-surface);
border: 0.5px solid var(--color-border);
border-radius: 10px;
}
.founder-photo {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.founder-card h3 {
font-size: 15px;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 2px;
}
.founder-role {
font-size: 12px;
color: var(--color-accent-text);
font-weight: 500;
margin-bottom: 8px;
}
.founder-card p {
font-size: 13px;
color: var(--color-text-secondary);
line-height: 1.6;
}
@media (max-width: 640px) {
.founder-card { flex-direction: column; text-align: center; }
}
/* ==========================================================================
SCAN FORM + RESULTS (functional — preserve behavior)
========================================================================== */
.scan-section {
padding: 48px 0;
text-align: center;
}
.scan-form {
max-width: 520px;
margin: 0 auto;
display: flex;
gap: 10px;
}
.scan-form input {
flex: 1;
padding: 12px 16px;
font-size: 14px;
font-family: var(--font-body);
background: var(--color-surface);
border: 0.5px solid var(--color-border);
border-radius: 8px;
color: var(--color-text-primary);
transition: border-color 0.2s;
}
.scan-form input:focus {
border-color: var(--color-accent);
outline: none;
}
.scan-form input::placeholder { color: var(--color-text-muted); }
.scan-btn {
padding: 12px 24px;
background: var(--color-accent);
color: #fff;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
font-family: var(--font-body);
cursor: pointer;
white-space: nowrap;
transition: background 0.2s;
}
.scan-btn:hover { background: var(--color-accent-hover); }
.scan-btn:disabled { background: rgba(255,255,255,0.1); cursor: not-allowed; color: var(--color-text-muted); }
.scan-note {
font-size: 12px;
color: var(--color-text-muted);
margin-top: 10px;
}
.scan-error {
text-align: center;
color: #E87B6E;
font-size: 13px;
margin-top: 12px;
display: none;
}
.scan-results {
max-width: 580px;
margin: 24px auto 0;
display: none;
}
.scan-results.visible { display: block; }
.results-card {
background: var(--color-surface);
border: 0.5px solid var(--color-border);
border-radius: 12px;
padding: 28px;
}
.results-header { text-align: center; margin-bottom: 20px; }
.results-domain {
font-size: 13px;
color: var(--color-text-secondary);
margin-bottom: 8px;
}
.results-score-ring {
width: 100px;
height: 100px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 8px 0;
}
.results-score-ring .score-num {
font-size: 32px;
font-weight: 600;
line-height: 1;
}
.results-score-ring .score-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.score-critical { border: 3px solid var(--color-danger); color: #E87B6E; }
.score-poor { border: 3px solid #ea580c; color: #ea580c; }
.score-fair { border: 3px solid var(--color-warning); color: var(--color-warning); }
.score-good { border: 3px solid var(--color-success); color: var(--color-success); }
.severity-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin: 16px 0;
}
.sev-item {
text-align: center;
padding: 10px 6px;
border-radius: 8px;
background: rgba(255,255,255,0.04);
border: 0.5px solid var(--color-border);
}
.sev-count {
font-size: 20px;
font-weight: 600;
line-height: 1;
}
.sev-label {
font-size: 10px;
color: var(--color-text-muted);
margin-top: 4px;
font-weight: 500;
text-transform: uppercase;
}
.sev-critical .sev-count { color: #E87B6E; }
.sev-serious .sev-count { color: var(--color-accent-text); }
.sev-moderate .sev-count { color: var(--color-warning); }
.sev-minor .sev-count { color: var(--color-text-secondary); }
.top-issues {
margin: 16px 0;
list-style: none;
}
.top-issues li {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 0.5px solid var(--color-border);
font-size: 13px;
color: var(--color-text-secondary);
}
.top-issues li:last-child { border-bottom: none; }
.issue-impact {
font-size: 10px;
font-weight: 600;
padding: 2px 8px;
border-radius: 100px;
}
.impact-critical { background: rgba(192,57,43,0.22); color: #E87B6E; }
.impact-serious { background: rgba(232,98,42,0.18); color: var(--color-accent-text); }
.impact-moderate { background: rgba(234,190,0,0.12); color: var(--color-warning); }
.results-cta {
text-align: center;
margin-top: 20px;
padding-top: 20px;
border-top: 0.5px solid var(--color-border);
}
.results-cta p {
font-size: 13px;
color: var(--color-text-secondary);
margin-bottom: 12px;
}
.buy-btn {
display: inline-block;
padding: 12px 32px;
background: var(--color-accent);
color: #fff;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: background 0.2s;
}
.buy-btn:hover { background: var(--color-accent-hover); color: #fff; }
.scan-loading {
text-align: center;
padding: 32px;
display: none;
}
.scan-loading.visible { display: block; }
.spinner {
width: 32px;
height: 32px;
border: 3px solid rgba(255,255,255,0.1);
border-top-color: var(--color-accent);
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin: 0 auto 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.email-capture {
margin-top: 14px;
padding: 14px 16px;
background: rgba(255,255,255,0.04);
border: 0.5px solid var(--color-border);
border-radius: 8px;
text-align: center;
}
.email-capture p { font-size: 12px; color: var(--color-text-muted); margin-bottom: 8px; }
.email-capture form {
display: flex;
gap: 8px;
max-width: 320px;
margin: 0 auto;
}
.email-capture input {
flex: 1;
padding: 8px 12px;
font-size: 13px;
background: var(--color-surface);
border: 0.5px solid var(--color-border);
border-radius: 6px;
color: var(--color-text-primary);
font-family: var(--font-body);
}
.email-capture button {
padding: 8px 14px;
background: var(--color-accent);
color: #fff;
border: none;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.email-capture button:hover { background: var(--color-accent-hover); }
@media (max-width: 640px) {
.scan-form { flex-direction: column; }
.scan-form input, .scan-btn { width: 100%; }
.severity-grid { grid-template-columns: repeat(2, 1fr); }
.email-capture form { flex-direction: column; }
}
/* ==========================================================================
COMPARISON TABLE
========================================================================== */
.comparison-table {
max-width: 600px;
margin: 32px auto 0;
border-collapse: collapse;
width: 100%;
}
.comparison-table th,
.comparison-table td {
padding: 10px 14px;
text-align: center;
font-size: 13px;
border-bottom: 0.5px solid var(--color-border);
color: var(--color-text-secondary);
}
.comparison-table th {
font-weight: 600;
font-size: 13px;
color: var(--color-text-primary);
padding-bottom: 14px;
border-bottom: 0.5px solid rgba(255,255,255,0.15);
}
.comparison-table th:first-child,
.comparison-table td:first-child {
text-align: left;
}
.comparison-table .check { color: var(--color-success); font-weight: 700; font-size: 16px; }
.comparison-table .cross { color: var(--color-text-muted); font-size: 16px; }
.comparison-table tfoot td {
padding-top: 16px;
border-bottom: none;
font-weight: 600;
color: var(--color-text-primary);
}
/* ==========================================================================
BLOG — Index + Posts
========================================================================== */
.blog-hero {
padding: 48px 0 24px;
text-align: center;
}
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
margin-top: 32px;
}
.blog-card {
background: var(--color-surface);
border: 0.5px solid var(--color-border);
border-radius: 10px;
padding: 24px 20px;
transition: border-color 0.2s;
display: flex;
flex-direction: column;
}
.blog-card:hover { border-color: rgba(232,98,42,0.28); }
.blog-card h3 {
font-size: 15px;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 8px;
line-height: 1.4;
}
.blog-card h3 a { color: inherit; text-decoration: none; }
.blog-card h3 a:hover { color: var(--color-accent-text); }
.blog-card p {
font-size: 13px;
color: var(--color-text-secondary);
line-height: 1.6;
flex: 1;
}
.blog-card-meta {
font-size: 11px;
color: var(--color-text-muted);
margin-top: 12px;
}
/* Blog post article */
.article-header {
padding: 48px 0 24px;
max-width: 720px;
margin: 0 auto;
}
.article-author {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
}
.article-author-photo {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.article-author-name {
font-size: 13px;
font-weight: 600;
color: var(--color-text-primary);
}
.article-author-date {
font-size: 12px;
color: var(--color-text-muted);
}
.article-body {
max-width: 720px;
margin: 0 auto;
padding-bottom: 48px;
}
.article-body h2 {
font-size: 22px;
margin: 32px 0 12px;
}
.article-body h3 {
font-size: 16px;
font-weight: 600;
margin: 24px 0 8px;
}
.article-body p {
margin-bottom: 16px;
line-height: 1.75;
font-size: 14px;
}
.article-body ul, .article-body ol {
margin: 0 0 16px 20px;
font-size: 14px;
color: var(--color-text-secondary);
line-height: 1.75;
}
.article-body a {
color: var(--color-accent-text);
text-decoration: underline;
text-underline-offset: 2px;
}
.article-body strong { color: var(--color-text-primary); }
.article-body blockquote {
margin: 20px 0;
padding: 16px 20px;
border-left: 3px solid var(--color-accent);
background: var(--color-accent-muted);
border-radius: 0 8px 8px 0;
font-size: 14px;
color: var(--color-accent-text);
line-height: 1.6;
}
/* Short-answer callout */
.short-answer {
margin: 20px 0;
padding: 18px 20px;
background: var(--color-surface);
border: 0.5px solid var(--color-border);
border-radius: 10px;
}
.short-answer strong {
display: block;
font-size: 12px;
color: var(--color-accent-text);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.short-answer p { margin-bottom: 0; }
/* End-of-article CTA */
.article-cta {
margin: 32px 0;
padding: 28px 24px;
background: var(--color-surface);
border: 0.5px solid rgba(232,98,42,0.28);
border-radius: 10px;
text-align: center;
}
.article-cta h3 {
font-size: 16px;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 6px;
}
.article-cta p {
font-size: 13px;
color: var(--color-text-secondary);
margin-bottom: 16px;
}
.article-cta-buttons {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
/* Related articles */
.related-articles {
max-width: 720px;
margin: 0 auto;
padding: 32px 0 48px;
border-top: 0.5px solid var(--color-border);
}
.related-articles h3 {
font-size: 14px;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 16px;
}
.related-list {
list-style: none;
}
.related-list li {
margin-bottom: 10px;
}
.related-list a {
font-size: 13px;
color: var(--color-text-secondary);
text-decoration: none;
transition: color 0.2s;
}
.related-list a:hover { color: var(--color-accent-text); }
/* ==========================================================================
ABOUT PAGE
========================================================================== */
.about-content {
max-width: 760px;
margin: 0 auto;
padding: 48px 0 64px;
}
.about-content h1 { margin-bottom: 8px; }
.about-subtitle {
font-size: 14px;
color: var(--color-text-secondary);
margin-bottom: 40px;
}
.about-content h2 {
font-size: 22px;
margin: 36px 0 14px;
}
.about-content p {
margin-bottom: 14px;
font-size: 14px;
line-height: 1.75;
}
.about-founder {
display: flex;
gap: 28px;
align-items: flex-start;
margin: 28px 0 36px;
padding: 28px;
background: var(--color-surface);
border: 0.5px solid var(--color-border);
border-radius: 10px;
}
.about-founder img {
width: 140px;
height: 140px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
}
.about-values {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin: 20px 0;
}
.about-value-card {
padding: 20px;
background: var(--color-surface);
border: 0.5px solid var(--color-border);
border-radius: 10px;
}
.about-value-card h3 {
font-size: 14px;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 6px;
}
.about-value-card p { font-size: 13px; margin-bottom: 0; }
@media (max-width: 640px) {
.about-founder { flex-direction: column; align-items: center; text-align: center; }
.about-founder img { width: 100px; height: 100px; }
}
/* ==========================================================================
GUIDE / SERVICE PAGES
========================================================================== */
.guide-content {
max-width: 760px;
margin: 0 auto;
padding: 48px 0 64px;
}
.guide-content h1 { margin-bottom: 8px; }
.guide-subtitle {
font-size: 14px;
color: var(--color-text-secondary);
margin-bottom: 32px;
}
.guide-content h2 {
font-size: 22px;
margin: 32px 0 12px;
}
.guide-content h3 {
font-size: 16px;
font-weight: 600;
margin: 24px 0 8px;
}
.guide-content p {
margin-bottom: 14px;
font-size: 14px;
line-height: 1.75;
}
.guide-content ul, .guide-content ol {
margin: 0 0 16px 20px;
font-size: 14px;
color: var(--color-text-secondary);
line-height: 1.75;
}
.guide-content strong { color: var(--color-text-primary); }
.guide-cta {
margin: 36px 0;
padding: 28px 24px;
background: var(--color-surface);
border: 0.5px solid rgba(232,98,42,0.28);
border-radius: 10px;
text-align: center;
}
.guide-cta h3 {
font-size: 16px;
color: var(--color-text-primary);
margin-bottom: 6px;
}
.guide-cta p {
font-size: 13px;
color: var(--color-text-secondary);
margin-bottom: 16px;
}
/* ==========================================================================
LEGAL PAGES
========================================================================== */
.legal-content {
max-width: 720px;
margin: 0 auto;
padding: 48px 0 64px;
}
.legal-content h1 { margin-bottom: 32px; }
.legal-content h2 {
font-size: 18px;
font-weight: 600;
font-family: var(--font-body);
margin: 28px 0 10px;
}
.legal-content p {
margin-bottom: 14px;
font-size: 14px;
line-height: 1.75;
}
.legal-content ul {
margin: 0 0 14px 20px;
font-size: 14px;
color: var(--color-text-secondary);
line-height: 1.75;
}
/* ==========================================================================
SOURCES PAGE
========================================================================== */
.sources-content {
max-width: 600px;
margin: 0 auto;
padding: 64px 0;
text-align: center;
}
.sources-content h1 { margin-bottom: 8px; }
.sources-list {
text-align: left;
margin: 36px 0;
}
.source-item {
padding: 20px;
background: var(--color-surface);
border: 0.5px solid var(--color-border);
border-radius: 10px;
margin-bottom: 12px;
}
.source-item h3 {
font-size: 14px;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 4px;
}
.source-item p {
font-size: 13px;
color: var(--color-text-secondary);
margin-bottom: 4px;
}
.source-item a {
font-size: 12px;
color: var(--color-accent-text);
}
/* ==========================================================================
WEBSITE HEALTH AUDIT PAGE
========================================================================== */
.health-hero { padding: 48px 0 32px; text-align: center; }
.health-form { margin-top: 24px; }
.health-results { margin-top: 32px; }
/* ==========================================================================
COOKIE NOTICE
========================================================================== */
.cookie-notice {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--color-surface);
border-top: 0.5px solid var(--color-border);
color: var(--color-text-secondary);
padding: 12px 24px;
font-size: 12px;
z-index: 9999;
text-align: center;
}
.cookie-notice button {
background: var(--color-accent);
color: #fff;
border: none;
padding: 6px 16px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
margin-left: 12px;
}
.cookie-notice button:hover { background: var(--color-accent-hover); }