/* Self-hosted fonts (Sept 27, 2026): the same Inter + Fraunces files Google Fonts served, latin and latin-ext only.
Loading them from fonts.googleapis.com cost the mobile Lighthouse run ~1.2s of render-blocking plus a second
hop to fonts.gstatic.com. index.html preloads the two latin files used above the fold. */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url(fonts/fraunces-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url(fonts/fraunces-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url(fonts/fraunces-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url(fonts/fraunces-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url(fonts/fraunces-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url(fonts/fraunces-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/inter-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/inter-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(fonts/inter-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(fonts/inter-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(fonts/inter-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(fonts/inter-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(fonts/inter-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(fonts/inter-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(fonts/inter-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(fonts/inter-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==================================================================
ACCESSRANK FOR LIBRARIES — STYLES
==================================================================
Sister site of Accessrank. Built for public libraries.
Palette: LIBRARY STONE (cool grey-taupe + deep teal accent)
Sections (Cmd/Ctrl+F to jump):
1. DESIGN TOKENS — colors, type, spacing
2. RESET / BASE
3. NAV + MOBILE MENU
4. HERO
5. AUDIT CARD (live audit widget)
6. MARQUEE (scrolling library platform list)
7. STAKES STRIP ("Why this matters")
8. WCAG 2.2 EXPLAINER
9. OVERLAY WARNING
10. FEATURES ("How it works")
11. STATS STRIP
12. TESTIMONIAL (head librarian)
13. PRICING (tiered by collection size)
14. FOOTER
15. RESPONSIVE
16. SCROLL-TRIGGERED FADE-IN
17. LOGO MARK ANIMATION (3-state diagonal sweep)
================================================================== */
/* ──────────────────────────────────────────────────────────────────
1. DESIGN TOKENS
────────────────────────────────────────────────────────────────── */
:root {
/* Brand colors */
--brand: #FFD23F; /* Brand yellow — logo, CTAs, accents (shared with main Accessrank) */
--brand-soft: rgba(255, 210, 63, 0.18);
--brand-border: rgba(255, 210, 63, 0.45);
/* Library Stone neutrals (the major change vs. main Accessrank) */
--bg: #E5E0D6; /* Page background — cool grey-taupe, like Carnegie library walls */
--surface: #F1ECE2; /* Cards, audit widget — slightly lighter than bg */
--surface-2: #DCD6C9; /* Subtle wells/strips */
/* Civic/institutional accent */
--teal: #1F4E5F; /* Deep teal — stakes accent, primary CTA, headline accents */
--teal-soft: rgba(31, 78, 95, 0.10);
--teal-border: rgba(31, 78, 95, 0.25);
/* Text on light surface */
--text: #2C2A26; /* Primary text */
--text-soft: #5A554B; /* Body copy */
--text-faint: #625C51; /* Meta / captions — darkened Sept 2026 to pass 4.5:1 */
--text-fainter: #A89E8B; /* Borders, dividers */
/* Semantic */
--warning-red: #B5443A; /* Earthy red, less neon than main site — for the warning icon only */
/* Hairlines on light bg need to be darker, not brighter */
--hairline: rgba(44, 42, 38, 0.08);
--hairline-strong: rgba(44, 42, 38, 0.14);
/* Typography scales */
--h1-size: 48px;
--h2-size: 34px;
--body-size: 16px;
/* Easing */
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
/* ──────────────────────────────────────────────────────────────────
2. RESET / BASE
────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background-color: var(--bg);
/* Cloth-bound book texture — Option D: anisotropic SVG turbulence
simulates directional bookcloth (Buckram) thread structure, plus
two faint age-mottling washes. Pure CSS / inline SVG — no image
files, no extra HTTP requests. */
background-image:
url("data:image/svg+xml;utf8,"),
radial-gradient(ellipse 700px 500px at 30% 40%,
rgba(31, 78, 95, 0.04) 0%, transparent 60%),
radial-gradient(ellipse 600px 400px at 75% 80%,
rgba(120, 80, 50, 0.04) 0%, transparent 60%);
background-attachment: scroll, fixed, fixed;
color: var(--text-soft);
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.5;
}
a { text-decoration: none; color: inherit; }
button {
font-family: inherit;
cursor: pointer;
border: none;
background: transparent;
}
input { font-family: inherit; }
img { max-width: 100%; display: block; }
.container { max-width: 1180px; margin: 0 auto; }
/* Visually hidden — for skip links and screen-reader-only labels */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* ──────────────────────────────────────────────────────────────────
3. NAV + MOBILE MENU
────────────────────────────────────────────────────────────────── */
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 28px;
border-bottom: 1px solid var(--hairline);
max-width: 1180px;
margin: 0 auto;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
font-weight: 800;
font-size: 21px;
letter-spacing: -0.4px;
color: var(--text);
}
/* "for Libraries" sub-brand qualifier in the lockup.
Fraunces italic in deep teal — gives the library variant its own
editorial voice while the parent "Accessrank" stays in Inter 800.
The 2px left margin is intentionally tight; italic letterforms
lean left and create their own visual breathing room. */
.logo-suffix {
font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
font-weight: 600;
font-style: italic;
color: var(--teal);
letter-spacing: -0.3px;
margin-left: -1px;
font-variation-settings: "opsz" 144;
}
.nav-right {
display: flex;
gap: 22px;
align-items: center;
font-size: 13px;
}
.nav-right a:not(.cta-nav) { color: var(--text-soft); }
.nav-right a:not(.cta-nav):hover { color: var(--text); }
.cta-nav {
background: var(--teal);
color: #FFFFFF;
padding: 8px 14px;
border-radius: 6px;
font-weight: 500;
font-size: 12px;
transition: opacity 0.15s ease;
}
.cta-nav:hover { opacity: 0.9; }
/* Hamburger — hidden on desktop, shown on mobile */
.hamburger {
display: none;
width: 36px; height: 36px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
background: transparent;
border: 1px solid var(--hairline-strong);
border-radius: 8px;
}
.ham-line {
width: 16px; height: 2px;
background: var(--text);
transition: transform 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
}
.hamburger[aria-expanded="true"] .ham-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] .ham-line:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] .ham-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* ──────────────────────────────────────────────────────────────────
4. HERO
────────────────────────────────────────────────────────────────── */
.hero {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 40px;
padding: 64px 28px 56px;
align-items: center;
max-width: 1180px;
margin: 0 auto;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
letter-spacing: 3px;
color: var(--teal);
font-weight: 600;
margin-bottom: 22px;
}
.pulse-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--teal);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.hero h1 {
font-size: var(--h1-size);
line-height: 1.02;
letter-spacing: -1.8px;
font-weight: 800;
margin: 0 0 22px;
color: var(--text);
}
.hero h1 .accent { color: var(--teal); }
.sub {
font-size: var(--body-size);
line-height: 1.55;
color: var(--text-soft);
max-width: 460px;
margin: 0 0 22px;
}
.sub .highlight { color: var(--text); font-weight: 600; }
.section-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: var(--teal-soft);
color: var(--teal);
border: 1px solid var(--teal-border);
border-radius: 100px;
font-size: 12px;
font-weight: 500;
margin-bottom: 24px;
transition: background 0.15s ease;
}
.section-link:hover { background: rgba(31, 78, 95, 0.16); }
.info-circle {
width: 14px; height: 14px;
border-radius: 50%;
border: 1.5px solid currentColor;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 700;
line-height: 1;
}
.cta-row {
display: flex;
gap: 10px;
align-items: center;
margin-top: 16px;
}
.btn-primary {
background: #FFFFFF;
color: var(--teal);
padding: 13px 22px;
border-radius: 8px;
font-weight: 600;
font-size: 13px;
transition: opacity 0.15s ease;
}
.btn-primary:hover { opacity: 0.9; }
.btn-secondary {
background: transparent;
color: var(--text);
padding: 13px 22px;
border-radius: 8px;
font-weight: 500;
font-size: 13px;
border: 1px solid rgba(44, 42, 38, 0.25);
transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-secondary:hover {
background: rgba(44, 42, 38, 0.05);
border-color: rgba(44, 42, 38, 0.4);
}
/* ──────────────────────────────────────────────────────────────────
5. AUDIT CARD (live audit widget)
────────────────────────────────────────────────────────────────── */
.audit-card {
background: var(--surface);
border-radius: 14px;
padding: 22px;
border: 1px solid var(--hairline-strong);
box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 12px 28px rgba(44,42,38,0.06);
}
.audit-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.audit-title {
font-size: 11px;
letter-spacing: 3px;
color: var(--teal);
font-weight: 600;
}
.audit-meta {
font-size: 11px;
color: var(--text-faint);
}
.url-form {
display: flex;
gap: 8px;
margin-bottom: 14px;
}
.url-input {
flex: 1;
background: var(--bg);
border: 1px solid var(--hairline-strong);
color: var(--text);
padding: 11px 14px;
border-radius: 8px;
font-size: 13px;
outline: none;
transition: border-color 0.15s ease;
}
.url-input::placeholder { color: var(--text-fainter); }
.url-input:focus { border-color: var(--teal); }
.scan-btn {
background: var(--teal);
color: #FFFFFF;
padding: 11px 16px;
border-radius: 8px;
font-weight: 500;
font-size: 13px;
white-space: nowrap;
}
.scan-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.scan-status {
font-size: 11px;
color: var(--text-faint);
margin-bottom: 10px;
min-height: 14px;
display: flex;
align-items: center;
gap: 6px;
}
.scan-status.active { color: var(--teal); }
.scan-spinner {
width: 10px; height: 10px;
border: 1.5px solid rgba(31, 78, 95, 0.3);
border-top-color: var(--teal);
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.audit-rows { display: flex; flex-direction: column; }
.audit-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--hairline);
font-size: 13px;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.audit-row.visible { opacity: 1; transform: translateY(0); }
.audit-row:last-child { border-bottom: none; }
.check-circle {
width: 22px; height: 22px;
border-radius: 50%;
background: var(--teal);
color: #FFFFFF;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.row-label { color: var(--text); flex: 1; }
.row-meta { color: var(--teal); font-size: 12px; font-weight: 600; }
.empty-state {
padding: 24px 12px;
text-align: center;
color: var(--text-faint);
font-size: 13px;
}
.report-cta {
margin-top: 16px;
padding: 14px;
background: var(--text);
color: var(--surface);
border-radius: 10px;
text-align: center;
font-weight: 500;
font-size: 14px;
width: 100%;
transition: background 0.18s ease, color 0.18s ease;
}
.report-cta:hover, .report-cta:focus-visible {
background: var(--brand);
color: var(--text);
}
.report-cta-sub {
display: block;
font-size: 11px;
color: rgba(241, 236, 226, 0.7);
margin-top: 3px;
font-weight: 400;
}
.report-cta:hover .report-cta-sub,
.report-cta:focus-visible .report-cta-sub {
color: rgba(44, 42, 38, 0.7);
}
.check-anim {
stroke-dasharray: 16;
stroke-dashoffset: 16;
animation: draw 0.6s var(--ease-out) forwards;
}
@keyframes draw { 0% { stroke-dashoffset: 16; } 60%, 100% { stroke-dashoffset: 0; } }
/* ──────────────────────────────────────────────────────────────────
6. MARQUEE
Library platforms (Bibliocommons, Polaris, Sierra, OverDrive, Libby).
Quieter than the ecommerce site's blue gradient — uses the deep teal.
────────────────────────────────────────────────────────────────── */
.marquee {
background: var(--teal);
color: var(--brand);
padding: 10px 0;
overflow: hidden;
}
.marquee-track {
display: flex;
gap: 56px;
animation: marquee 32s linear infinite;
white-space: nowrap;
width: max-content;
}
.marquee-track .item {
font-size: 12px;
font-weight: 700;
letter-spacing: 4px;
display: inline-flex;
align-items: center;
gap: 56px;
}
.marquee-track .sep {
color: rgba(255, 210, 63, 0.50);
font-size: 10px;
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ──────────────────────────────────────────────────────────────────
7. STAKES STRIP ("Why this matters")
Reframed for libraries — federal funding, ADA Title II, not lawsuits.
────────────────────────────────────────────────────────────────── */
/* DARK PHOTO BAND
────────────────────────────────────────────────────────────────────
Wraps hero + marquee + stakes-strip. The library photo runs as the
single background image for this whole section, from just below the
navbar down through the stat cards.
Photo treatment notes:
- Image is used AS-IS — no CSS overlay, no darken, no blend mode.
- The source file (library-bg.jpg) is already pre-edited to be
dark/moody enough to support white text on top.
- Place the file at the same level as index.html.
- background-size: cover keeps the photo filling the section at
any viewport width without distortion.
- background-attachment: scroll (no parallax) — simpler, faster,
avoids iOS rendering issues, and respects users with motion
sensitivities.
*/
.dark-photo-band {
background-color: #1A1411; /* fallback while image loads */
background-image: url('library-bg.jpg');
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
background-attachment: scroll;
}
/* Inside the dark band, .stakes-strip just controls padding + text alignment */
.stakes-strip {
padding: 64px 28px 96px;
text-align: center;
}
/* Inner wrapper centers stakes content at the standard max-width */
.stakes-strip-inner {
max-width: 1080px;
margin: 0 auto;
}
/* ──────────────────────────────────────────────────────────────────
DARK PHOTO BAND — scoped readability overrides
──────────────────────────────────────────────────────────────────
The hero, marquee, and stakes-strip all live inside .dark-photo-band.
Anything that was tuned for the light taupe page bg needs adjusting
to read on the dark photo. Each rule below scopes to .dark-photo-band
so it only applies inside the band — the rest of the page stays as-is.
*/
/* Hero eyebrow — was teal on taupe; now light teal on dark */
.dark-photo-band .eyebrow {
color: #FFFFFF; /* white text on dark photo */
}
.dark-photo-band .pulse-dot {
background: #6FB8CC; /* keep teal accent dot */
}
/* Hero headline — white with brand-yellow accent */
.dark-photo-band .hero h1 {
color: #FFFFFF;
}
.dark-photo-band .hero h1 .accent {
color: var(--brand); /* yellow pops on dark */
}
/* Hero sub copy — soft cream, easy to read on dark photo */
.dark-photo-band .hero .sub {
color: #E8E2D5;
}
.dark-photo-band .hero .sub .highlight {
color: #FFFFFF;
}
/* WCAG link pill — needs more presence on dark bg */
.dark-photo-band .section-link {
background: var(--teal);
color: #FFFFFF;
border-color: #FFFFFF;
}
.dark-photo-band .section-link:hover {
background: rgba(31, 78, 95, 0.85);
}
/* Hero buttons — primary teal stays, secondary needs lighter outline */
.dark-photo-band .btn-secondary {
background: var(--teal);
color: #FFFFFF;
border-color: #FFFFFF;
}
.dark-photo-band .btn-secondary:hover {
background: rgba(31, 78, 95, 0.85);
border-color: rgba(255, 255, 255, 0.85);
}
/* Audit card — drop more shadow so it lifts off the photo */
.dark-photo-band .audit-card {
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.4) inset,
0 20px 50px rgba(0, 0, 0, 0.35);
}
/* Stakes section — headline white, "everyone" yellow accent */
.dark-photo-band .stakes-title {
color: #FFFFFF;
}
.dark-photo-band .stakes-title .accent {
color: var(--brand);
}
/* Stat cards on dark photo — clean light surface, stronger shadow */
.dark-photo-band .stakes-card {
background: rgba(241, 236, 226, 0.97);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
text-align: left;
}
/* The marquee already has its own teal background, no change needed */
/* Section labels — small "WHY THIS MATTERS" / "WCAG 2.2 EXPLAINED" chips.
Rendered as inline-block yellow pills with dark text inside, NOT as
raw yellow text (which fails contrast on the taupe background).
The wrapping div is centered with text-align:center on the parent. */
.stakes-eyebrow,
.section-eyebrow {
display: inline-block;
font-size: 11px;
letter-spacing: 3px;
color: #FFFFFF; /* white text */
background: var(--teal); /* dark teal chip */
font-weight: 700;
padding: 4px 10px;
border-radius: 4px;
margin-bottom: 14px;
}
/* Stakes eyebrow lives on the dark photo band — flip to yellow chip
with dark teal text for a brighter, higher-contrast accent there. */
.stakes-eyebrow {
color: var(--teal);
background: var(--brand);
}
/* Container that centers the chip on its line */
.stakes-strip,
.wcag-section,
.features,
.testimonial,
.pricing {
text-align: center;
}
/* But reset text-align on children that need to be left-aligned */
.stakes-strip .stakes-grid,
.wcag-section .wcag-grid,
.features .feature-grid,
.testimonial .quote-card,
.pricing .pricing-grid {
text-align: left;
}
.stakes-title {
font-size: 38px;
line-height: 1.1;
letter-spacing: -1px;
font-weight: 800;
margin: 0 auto 36px;
color: #FFFFFF; /* light text on dark photo */
text-align: center;
max-width: 720px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* a hair of legibility insurance */
}
.stakes-title .accent { color: var(--brand); } /* yellow accent pops on the dark photo */
.stakes-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
max-width: 1080px;
margin: 0 auto;
}
.stakes-card {
padding: 24px;
background: rgba(241, 236, 226, 0.96); /* near-opaque light surface, slight transparency picks up photo warmth */
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.18);
backdrop-filter: blur(6px); /* progressive enhancement — frosts the photo behind */
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
text-align: left;
}
.stakes-num {
font-size: 38px;
font-weight: 800;
letter-spacing: -1.5px;
color: var(--text);
line-height: 1;
margin-bottom: 8px;
}
.stakes-num .small { font-size: 18px; color: var(--text-faint); font-weight: 500; }
.stakes-label {
font-size: 12px;
color: var(--text-soft);
line-height: 1.45;
margin-bottom: 8px;
}
.stakes-source {
font-size: 10px;
color: var(--text-faint);
letter-spacing: 1px;
text-transform: uppercase;
}
/* ──────────────────────────────────────────────────────────────────
8. WCAG 2.2 EXPLAINER
────────────────────────────────────────────────────────────────── */
.wcag-section {
padding: 72px 28px 36px;
max-width: 1180px;
margin: 0 auto;
border-top: 1px solid var(--hairline);
}
h2 {
font-size: var(--h2-size);
line-height: 1.1;
letter-spacing: -0.8px;
font-weight: 800;
margin: 0 0 14px;
color: var(--text);
text-align: center;
}
.section-sub {
font-size: 15px;
color: var(--text-soft);
text-align: center;
max-width: 540px;
margin: 0 auto 40px;
line-height: 1.55;
}
.wcag-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 44px;
align-items: start;
}
.wcag-lede {
font-size: 16px;
line-height: 1.55;
color: var(--text-soft);
margin: 0 0 24px;
}
.wcag-lede strong { color: var(--text); font-weight: 600; }
.pour {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-bottom: 20px;
}
.pour-item {
padding: 14px 16px;
background: var(--surface);
border-radius: 10px;
border: 1px solid var(--hairline);
}
.pour-letter {
font-size: 22px;
font-weight: 800;
color: var(--teal);
letter-spacing: -1px;
line-height: 1;
margin-bottom: 4px;
}
.pour-name {
font-size: 13px;
font-weight: 600;
color: var(--text);
margin-bottom: 2px;
}
.pour-desc {
font-size: 11px;
color: var(--text-faint);
line-height: 1.4;
}
.wcag-meta-row {
display: flex;
gap: 12px;
padding: 14px 16px;
background: var(--brand-soft);
border: 1px solid var(--brand-border);
border-radius: 10px;
}
.icon-box {
width: 28px; height: 28px;
background: var(--brand);
color: var(--text);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 13px;
flex-shrink: 0;
}
.wcag-meta-text { font-size: 12px; color: var(--text); line-height: 1.4; }
.wcag-meta-text strong { color: var(--text); font-weight: 700; }
.criteria-list { display: flex; flex-direction: column; gap: 8px; }
.criteria-head {
font-size: 15px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--teal);
font-weight: 700;
margin-bottom: 20px;
}
.criteria-row {
display: grid;
grid-template-columns: 80px 1fr 70px;
gap: 12px;
padding: 12px 14px;
background: var(--surface);
border-radius: 8px;
border: 1px solid var(--hairline);
align-items: center;
}
.criteria-id {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
color: var(--teal);
font-weight: 600;
}
.criteria-body { font-size: 13px; color: var(--text); line-height: 1.4; }
.criteria-body .desc { display: block; font-size: 11px; color: var(--text-faint); margin-top: 2px; font-weight: 400; }
.criteria-freq {
font-size: 12px;
color: var(--warning-red);
font-weight: 700;
text-align: right;
}
.criteria-freq .small {
font-size: 9px;
color: var(--text-fainter);
display: block;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 500;
}
/* ──────────────────────────────────────────────────────────────────
8a. SEO / AI SEARCH — discovery services
Light variant of the parent site's seo-strip pattern.
Cream surface with teal accents instead of dark + yellow.
────────────────────────────────────────────────────────────────── */
.seo-strip {
padding: 36px 28px 40px;
max-width: 1180px;
margin: 0 auto;
}
.seo-eyebrow {
font-size: 11px;
letter-spacing: 3px;
color: var(--teal);
font-weight: 500;
margin-bottom: 12px;
text-align: center;
text-transform: uppercase;
}
.seo-title {
font-size: 40px;
line-height: 1.1;
letter-spacing: -1px;
font-weight: 800;
margin: 0 auto 18px;
color: var(--text);
text-align: center;
max-width: 760px;
}
.seo-title .accent { color: var(--teal); }
.seo-title .dark { color: var(--text); }
.seo-title .teal { color: var(--teal); }
.seo-sub {
font-size: 16px;
line-height: 1.55;
color: var(--text-soft);
text-align: center;
max-width: 720px;
margin: 0 auto 40px;
}
.seo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
max-width: 980px;
margin: 0 auto;
}
.seo-card {
padding: 26px 24px;
background: var(--surface);
border-radius: 12px;
border: 1px solid var(--text-fainter);
display: flex;
flex-direction: column;
}
.seo-card-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--teal-soft);
border: 1px solid rgba(31, 78, 95, 0.18);
display: flex;
align-items: center;
justify-content: center;
color: var(--teal);
font-size: 14px;
font-weight: 700;
margin-bottom: 14px;
}
.seo-card-title {
font-size: 17px;
font-weight: 700;
color: var(--text);
margin: 0 0 8px;
letter-spacing: -0.3px;
}
.seo-card-body {
font-size: 13.5px;
line-height: 1.5;
color: var(--text-soft);
margin: 0 0 14px;
flex: 1;
}
.seo-card-tier {
font-size: 10px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--text-faint);
font-weight: 500;
padding-top: 12px;
border-top: 1px solid var(--text-fainter);
}
.seo-card-tier .tier-label { color: var(--teal); }
.seo-closer {
text-align: center;
font-weight: 700;
font-size: 36px;
letter-spacing: -0.8px;
line-height: 1.2;
color: var(--text);
max-width: 760px;
margin: 0 auto;
}
.seo-closer .dark { color: var(--text); }
.seo-closer .teal { color: var(--teal); }
@media (max-width: 768px) {
.seo-grid { grid-template-columns: 1fr; }
.seo-title { font-size: 30px; }
.seo-closer { font-size: 26px; }
.seo-strip { padding: 32px 20px 56px; }
}
/* ──────────────────────────────────────────────────────────────────
8b. COMPLIANCE FRAMEWORKS
Three-up reference card: ADA Title II, Section 508, WCAG 2.2.
Same column structure as features grid for visual consistency.
────────────────────────────────────────────────────────────────── */
.frameworks {
padding: 36px 28px 72px;
max-width: 1180px;
margin: 0 auto;
text-align: center;
}
.frameworks-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-bottom: 28px;
text-align: left;
}
.framework-card {
background: var(--surface);
border-radius: 12px;
padding: 28px;
border: 1px solid var(--hairline);
display: flex;
flex-direction: column;
}
/* Section 508 is the middle/featured card — slightly stronger border to anchor it */
.framework-card-featured {
border: 2px solid var(--teal);
padding: 27px; /* compensate for 1px-thicker border */
}
.framework-tag {
font-size: 9px;
letter-spacing: 2px;
color: var(--text-faint);
font-weight: 700;
text-transform: uppercase;
margin-bottom: 12px;
}
.framework-title {
font-size: 26px;
font-weight: 800;
letter-spacing: -0.8px;
color: var(--text);
margin: 0 0 10px;
}
.framework-applies {
font-size: 13px;
color: var(--text-soft);
line-height: 1.5;
margin: 0 0 14px;
}
.framework-applies strong {
color: var(--text);
font-weight: 600;
}
.framework-body {
font-size: 13px;
color: var(--text-soft);
line-height: 1.55;
margin: 0 0 18px;
flex-grow: 1; /* pushes the target chip to the bottom */
}
/* "Target standard" chip at the bottom of each card */
.framework-target {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: var(--teal-soft);
border: 1px solid var(--teal-border);
border-radius: 8px;
}
.framework-target-label {
font-size: 10px;
letter-spacing: 1.5px;
color: var(--text-faint);
font-weight: 600;
text-transform: uppercase;
}
.framework-target-value {
font-size: 13px;
color: var(--teal);
font-weight: 700;
letter-spacing: -0.2px;
}
.frameworks-footnote {
font-size: 13px;
color: var(--text-soft);
line-height: 1.55;
max-width: 580px;
margin: 0 auto;
padding: 14px 18px;
background: var(--brand-soft);
border: 1px solid var(--brand-border);
border-radius: 8px;
}
.frameworks-footnote strong {
color: var(--text);
font-weight: 700;
}
/* ──────────────────────────────────────────────────────────────────
9. OVERLAY WARNING (caution-tape strip — adapted for taupe bg)
────────────────────────────────────────────────────────────────── */
.overlay-warning {
padding: 40px 28px;
background:
repeating-linear-gradient(
135deg,
#D8CFBE 0 24px,
#CEC4B0 24px 48px
);
border-top: 2px solid var(--brand);
border-bottom: 2px solid var(--brand);
}
.overlay-card {
max-width: 760px;
margin: 0 auto;
display: flex;
gap: 18px;
align-items: flex-start;
}
.overlay-icon {
width: 36px; height: 36px;
background: var(--warning-red);
color: #FFFFFF;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 18px;
flex-shrink: 0;
}
.overlay-content h3 {
font-size: 16px;
font-weight: 700;
color: var(--text);
margin: 0 0 6px;
}
.overlay-content p {
font-size: 13px;
color: var(--text-soft);
line-height: 1.55;
margin: 0;
}
.overlay-content p strong {
color: var(--text);
font-weight: 700;
background: rgba(255, 210, 63, 0.35);
padding: 1px 5px;
border-radius: 3px;
}
/* ──────────────────────────────────────────────────────────────────
10. FEATURES ("How it works")
────────────────────────────────────────────────────────────────── */
.features {
padding: 72px 28px;
max-width: 1180px;
margin: 0 auto;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.feature-card {
background: var(--surface);
border-radius: 12px;
padding: 24px;
border: 1px solid var(--hairline);
}
.feature-icon {
width: 40px; height: 40px;
border-radius: 8px;
background: var(--teal-soft);
color: var(--teal);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
}
.feature-title {
font-size: 15px;
font-weight: 600;
color: var(--text);
margin: 0 0 6px;
}
.feature-desc {
font-size: 13px;
color: var(--text-soft);
line-height: 1.55;
margin: 0;
}
/* ──────────────────────────────────────────────────────────────────
11. STATS STRIP
────────────────────────────────────────────────────────────────── */
.stats-strip {
padding: 44px 28px;
background: var(--teal);
}
.stats-strip-inner {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px; /* matches .feature-grid */
}
.stat { text-align: center; }
.stat-num {
font-size: 38px;
font-weight: 800;
letter-spacing: -1.5px;
color: #FFFFFF;
line-height: 1;
margin-bottom: 6px;
}
.stat-label { font-size: 12px; color: rgba(255, 255, 255, 0.75); }
/* ──────────────────────────────────────────────────────────────────
12. TESTIMONIAL
────────────────────────────────────────────────────────────────── */
.testimonial {
padding: 72px 28px 36px;
max-width: 1180px;
margin: 0 auto;
}
.accent-teal { color: var(--teal); }
.accent-brand { color: var(--brand); background: var(--text); padding: 0 6px; border-radius: 4px; }
.quote-card {
background: var(--surface);
border-radius: 14px;
padding: 36px;
border: 1px solid var(--hairline);
max-width: 600px;
margin: 36px auto 0; /* extra standoff above the quote box */
position: relative;
}
/* Pull the testimonial headline a bit further from the quote card below it */
.testimonial h2 {
margin-bottom: 28px;
}
.quote-mark {
position: absolute;
top: 14px; left: 22px;
font-size: 60px;
font-family: Georgia, 'Times New Roman', serif;
line-height: 1;
color: var(--teal);
opacity: 0.2;
}
.quote-text {
font-size: 19px;
line-height: 1.5;
color: var(--text);
font-weight: 500;
letter-spacing: -0.2px;
margin: 0 0 22px;
position: relative;
}
.quote-text .y { color: var(--teal); font-weight: 700; }
.quote-attr {
display: flex;
align-items: center;
gap: 12px;
}
.avatar {
width: 38px; height: 38px;
border-radius: 50%;
background: var(--teal);
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 13px;
}
.quote-name { font-size: 13px; color: var(--text); font-weight: 600; }
.quote-role { font-size: 12px; color: var(--text-faint); }
/* ──────────────────────────────────────────────────────────────────
13. PRICING (tiered by collection size)
────────────────────────────────────────────────────────────────── */
.pricing {
padding: 36px 28px 72px;
max-width: 1180px;
margin: 0 auto;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.price-card {
background: var(--surface);
border-radius: 12px;
padding: 26px;
border: 1px solid var(--hairline);
}
.price-card.featured { border: 2px solid var(--teal); position: relative; }
.price-tier {
font-size: 11px;
letter-spacing: 2px;
color: var(--text-faint);
font-weight: 600;
margin-bottom: 8px;
}
.price-tier.featured-tier { color: var(--teal); }
.price-amount {
font-size: 32px;
font-weight: 800;
color: var(--text);
letter-spacing: -1px;
line-height: 1;
margin-bottom: 4px;
}
.price-amount .per { font-size: 13px; color: var(--text-faint); font-weight: 400; margin-left: 5px; }
.price-desc {
font-size: 12px;
color: var(--text-soft);
margin-bottom: 16px;
line-height: 1.5;
}
.price-features {
list-style: none;
padding: 0;
margin: 0 0 18px;
}
.price-features li {
font-size: 12px;
color: var(--text-soft);
padding: 5px 0 5px 20px;
position: relative;
line-height: 1.4;
}
.price-features li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--teal);
font-weight: 600;
}
.price-cta {
background: transparent;
color: var(--text);
padding: 11px;
border-radius: 8px;
font-weight: 500;
font-size: 13px;
border: 1px solid rgba(44, 42, 38, 0.25);
width: 100%;
transition: background 0.15s ease;
}
.price-cta:hover { background: rgba(44, 42, 38, 0.05); }
.price-cta.featured-cta {
background: var(--teal);
color: #FFFFFF;
border: none;
}
.price-cta.featured-cta:hover { background: var(--teal); opacity: 0.9; }
/* ──────────────────────────────────────────────────────────────────
14. FOOTER
────────────────────────────────────────────────────────────────── */
.footer {
padding: 40px 28px 28px;
border-top: 1px solid var(--hairline);
max-width: 1180px;
margin: 0 auto;
}
.footer-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 28px;
gap: 36px;
}
.footer-cols {
display: flex;
gap: 44px;
font-size: 12px;
}
.footer-col h4 {
font-size: 11px;
letter-spacing: 2px;
color: var(--text-faint);
font-weight: 600;
margin: 0 0 10px;
}
.footer-col a {
display: block;
color: var(--text-soft);
padding: 4px 0;
}
.footer-col a:hover { color: var(--text); }
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 16px;
border-top: 1px solid var(--hairline);
font-size: 11px;
color: var(--text-faint);
}
/* ──────────────────────────────────────────────────────────────────
15. RESPONSIVE
────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
:root { --h1-size: 36px; --h2-size: 26px; }
.hero { grid-template-columns: 1fr; gap: 32px; padding: 36px 20px 24px; }
.hero h1 { letter-spacing: -1px; }
.nav-right { display: none; }
.hamburger { display: flex; }
.nav { position: relative; }
.stakes-strip, .wcag-section, .frameworks, .features, .testimonial, .pricing, .footer {
padding-left: 20px; padding-right: 20px;
}
.stakes-grid { grid-template-columns: repeat(2, 1fr); }
.wcag-grid { grid-template-columns: 1fr; gap: 32px; }
.feature-grid, .pricing-grid, .frameworks-grid { grid-template-columns: 1fr; }
.stats-strip { grid-template-columns: 1fr; padding: 32px 20px; }
.footer-top { flex-direction: column; gap: 28px; }
.footer-cols { gap: 28px; flex-wrap: wrap; }
}
@media (max-width: 520px) {
.stakes-grid { grid-template-columns: 1fr; }
.pour { grid-template-columns: 1fr; }
}
/* ──────────────────────────────────────────────────────────────────
16. SCROLL-TRIGGERED FADE-IN
Elements with data-animate slide-fade up when they enter the viewport.
The .in-view class is added by the IntersectionObserver in script.js.
────────────────────────────────────────────────────────────────── */
body.animations-ready [data-animate] {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
body.animations-ready [data-animate].in-view {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
body.animations-ready [data-animate] {
opacity: 1;
transform: none;
transition: none;
}
}
/* ──────────────────────────────────────────────────────────────────
17. LOGO MARK ANIMATION
Same 3-state diagonal sweep as main Accessrank.
Yellow ✓ → Red ! → Green ✓ (with stamp pulse) → Yellow ✓ (rests).
Plays once on load over 5s.
────────────────────────────────────────────────────────────────── */
.logo-mark {
width: 28px; height: 28px;
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
background: var(--brand);
flex-shrink: 0;
}
.logo-mark .layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.logo-mark .layer-red { background: #E0432B; transform: translate(-110%, 110%); animation: arLogoWipeRed 5s ease-in-out 1 forwards; }
.logo-mark .layer-green { background: #4ADE80; transform: translate(110%, -110%); animation: arLogoWipeGreen 5s ease-in-out 1 forwards; }
.logo-mark .layer-yellow { background: var(--brand); transform: translate(-110%, 110%); animation: arLogoWipeYellowReturn 5s ease-in-out 1 forwards; }
.logo-mark .icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; pointer-events: none; }
.logo-mark .icon svg { width: 58%; height: 58%; display: block; }
.logo-mark .icon-yellow { animation: arLogoIconYellow 5s ease-in-out 1 forwards; }
.logo-mark .icon-red { opacity: 0; animation: arLogoIconRed 5s ease-in-out 1 forwards; }
.logo-mark .icon-green { opacity: 0; animation: arLogoIconGreen 5s ease-in-out 1 forwards; transform-origin: 50% 50%; }
.logo-mark .swipe { position: absolute; top: -50%; left: -150%; width: 200%; height: 200%; pointer-events: none; z-index: 4; filter: blur(0.5px); opacity: 0; }
.logo-mark .swipe-1, .logo-mark .swipe-3 { background: linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, 0.85) 50%, transparent 55%); }
.logo-mark .swipe-2 { background: linear-gradient(-45deg, transparent 45%, rgba(255, 255, 255, 0.85) 50%, transparent 55%); }
.logo-mark .swipe-1 { animation: arLogoSwipe1 5s ease-in-out 1 forwards; }
.logo-mark .swipe-2 { animation: arLogoSwipe2 5s ease-in-out 1 forwards; }
.logo-mark .swipe-3 { animation: arLogoSwipe3 5s ease-in-out 1 forwards; }
@keyframes arLogoWipeRed {
0%, 13% { transform: translate(-110%, 110%); }
22%, 40% { transform: translate(0, 0); }
48%, 100% { transform: translate(110%, -110%); }
}
@keyframes arLogoWipeGreen {
0%, 38% { transform: translate(110%, -110%); }
47%, 70% { transform: translate(0, 0); }
77%, 100% { transform: translate(-110%, 110%); }
}
@keyframes arLogoWipeYellowReturn {
0%, 68% { transform: translate(-110%, 110%); }
77%, 100% { transform: translate(0, 0); }
}
@keyframes arLogoIconYellow {
0%, 18% { opacity: 1; }
22%, 72% { opacity: 0; }
82%, 100% { opacity: 1; }
}
@keyframes arLogoIconRed {
0%, 18% { opacity: 0; }
25%, 38% { opacity: 1; }
44%, 100% { opacity: 0; }
}
@keyframes arLogoIconGreen {
0%, 43% { opacity: 0; transform: scale(1); }
50% { opacity: 1; transform: scale(1); }
56% { opacity: 1; transform: scale(1); }
63% { opacity: 1; transform: scale(1.42); }
68% { opacity: 1; transform: scale(0.96); }
72% { opacity: 1; transform: scale(1); }
78%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes arLogoSwipe1 {
0%, 11% { transform: translate(-50%, 50%); opacity: 0; }
13% { transform: translate(-50%, 50%); opacity: 1; }
21% { transform: translate(50%, -50%); opacity: 1; }
23%, 100% { opacity: 0; }
}
@keyframes arLogoSwipe2 {
0%, 38% { transform: translate(50%, -50%); opacity: 0; }
40% { transform: translate(50%, -50%); opacity: 1; }
46% { transform: translate(-50%, 50%); opacity: 1; }
48%, 100% { opacity: 0; }
}
@keyframes arLogoSwipe3 {
0%, 68% { transform: translate(-50%, 50%); opacity: 0; }
70% { transform: translate(-50%, 50%); opacity: 1; }
76% { transform: translate(50%, -50%); opacity: 1; }
78%, 100% { opacity: 0; }
}
/* ──────────────────────────────────────────────────────────────────
18. SEPTEMBER 2026 UPDATES
Accuracy + accessibility pass: request-audit form, deadline finder,
"Tested with" marquee controls, sourced failure list, timeline,
Founding Library Program, pricing extras, Buying Accessrank,
footer disclaimer, visible focus, skip link, form labels.
────────────────────────────────────────────────────────────────── */
/* Skip link + visible keyboard focus everywhere */
.skip-link {
position: absolute;
left: 12px; top: -60px;
z-index: 100;
background: var(--teal);
color: #FFFFFF;
padding: 10px 16px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
}
.skip-link:focus { top: 12px; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex="-1"]:focus-visible {
outline: 3px solid var(--teal);
outline-offset: 2px;
}
.dark-photo-band a:focus-visible,
.dark-photo-band button:focus-visible,
.marquee button:focus-visible,
.timeline-band a:focus-visible {
outline-color: var(--brand);
}
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
/* In-page link targets clear the top of the viewport */
section[id], #audit-card { scroll-margin-top: 16px; }
/* Buttons that are now links */
a.btn-primary, a.btn-secondary { display: inline-block; }
a.price-cta { display: block; text-align: center; }
/* Mobile menu (replaces inline styles set from JS) */
@media (max-width: 900px) {
.nav-right.open {
display: flex;
flex-direction: column;
align-items: flex-start;
position: absolute;
top: 100%; left: 0; right: 0;
background: var(--surface);
padding: 20px;
border-bottom: 1px solid var(--hairline-strong);
z-index: 20;
}
}
/* Stakes: a date needs a smaller size than a percentage */
.stakes-card { display: flex; flex-direction: column; }
.stakes-label { flex: 1; }
.stakes-source { margin-top: 4px; }
/* ── "Tested with" marquee: fixed label, scrolling list, pause button ── */
.marquee {
display: flex;
align-items: center;
gap: 16px;
padding: 10px 16px 10px 28px;
}
.marquee-label {
flex-shrink: 0;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
color: #FFFFFF;
}
.marquee-window { flex: 1; overflow: hidden; min-width: 0; }
.marquee.paused .marquee-track { animation-play-state: paused; }
.marquee-track .sep { color: var(--brand); }
.marquee-toggle {
flex-shrink: 0;
background: transparent;
color: #FFFFFF;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 6px;
padding: 4px 10px;
font-size: 12px;
font-weight: 600;
}
.marquee-toggle:hover { background: rgba(255, 255, 255, 0.12); }
@media (prefers-reduced-motion: reduce) {
.marquee-track { animation: none; }
.marquee-toggle { display: none; }
.pulse-dot { animation: none; }
}
/* ── Title II deadline finder (hero, on the photo) ── */
.deadline-finder {
margin-top: 28px;
max-width: 460px;
background: rgba(20, 16, 13, 0.72);
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 12px;
padding: 16px 18px;
color: #FFFFFF;
}
.dark-photo-band .deadline-title,
.deadline-title {
font-size: 15px;
font-weight: 700;
letter-spacing: 0;
text-align: left;
color: #FFFFFF;
margin: 0 0 10px;
}
.deadline-list { margin: 0 0 10px; }
.deadline-list div {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 6px 0;
border-top: 1px solid rgba(255, 255, 255, 0.2);
font-size: 14px;
}
.deadline-list dt { color: #E8E2D5; }
.deadline-list dd { margin: 0; font-weight: 700; color: var(--brand); white-space: nowrap; }
.deadline-note { font-size: 13px; color: #E8E2D5; margin: 0; }
.deadline-note a { color: #FFFFFF; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* ── Request-a-free-audit card ── */
.audit-card .audit-form-title {
font-size: 22px;
letter-spacing: -0.4px;
text-align: left;
margin: 0 0 6px;
}
.audit-form-sub {
font-size: 13px;
line-height: 1.5;
color: var(--text-soft);
margin: 0 0 16px;
}
/* Shared form fields (hero audit form + about contact form) */
.lead-form .field { margin-bottom: 12px; }
.lead-form label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--text);
margin-bottom: 5px;
}
.lead-form .optional { font-weight: 400; color: var(--text-soft); }
.lead-form .field-hint { font-size: 12px; color: var(--text-soft); margin: -2px 0 6px; }
.lead-form input,
.lead-form select,
.lead-form textarea {
width: 100%;
box-sizing: border-box;
background: #FFFFFF;
border: 1px solid #7A7366;
color: var(--text);
padding: 11px 14px;
border-radius: 8px;
font-size: 14px;
font-family: inherit;
}
.lead-form input::placeholder { color: #6B655A; }
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
border-color: var(--teal);
box-shadow: 0 0 0 3px rgba(31, 78, 95, 0.18);
}
.lead-form [aria-invalid="true"] { border-color: var(--warning-red); border-width: 2px; }
.form-error {
font-size: 13px;
font-weight: 600;
color: #9A3329;
margin: 4px 0 8px;
}
.form-status { font-size: 13px; color: var(--text); margin: 10px 0 0; line-height: 1.5; }
.form-status:empty { display: none; }
.form-status a { color: var(--teal); font-weight: 600; text-decoration: underline; }
.audit-card .report-cta { margin-top: 6px; }
/* ── Six common failures (sourced) ── */
.criteria-head {
font-size: 15px;
letter-spacing: 0;
text-transform: none;
color: var(--text);
line-height: 1.45;
font-weight: 600;
text-align: left;
margin: 0 0 16px;
}
ol.criteria-list { list-style: none; margin: 0; padding: 0; }
.criteria-row { grid-template-columns: 76px 1fr 84px; }
.criteria-freq .small { font-size: 10px; color: var(--text-soft); font-weight: 500; }
.criteria-note {
font-size: 13px;
color: var(--text-soft);
line-height: 1.55;
margin: 16px 0 6px;
text-align: left;
}
.criteria-source { font-size: 11px; color: var(--text-soft); margin: 0; text-align: left; }
/* Headings that changed element (div/h3/h4 → h2/h3) keep their old look */
.overlay-content h2.overlay-title {
font-size: 16px;
font-weight: 700;
letter-spacing: 0;
text-align: left;
color: var(--text);
margin: 0 0 6px;
}
h3.seo-card-title, h3.price-tier { margin-top: 0; }
.footer-col .footer-heading {
font-size: 11px;
letter-spacing: 2px;
color: var(--text-soft);
font-weight: 600;
text-align: left;
margin: 0 0 10px;
}
.about-section h2.about-section-eyebrow {
font-size: 11px;
letter-spacing: 3px;
font-weight: 700;
margin: 0;
}
/* ── What happens after you sign up ── */
.timeline-band { background: var(--teal); padding: 56px 28px; color: #FFFFFF; }
.timeline-inner { max-width: 1180px; margin: 0 auto; }
.timeline-band .timeline-title { color: #FFFFFF; margin-bottom: 28px; }
.timeline {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
counter-reset: none;
}
.timeline-step {
border-top: 3px solid var(--brand);
padding-top: 16px;
}
.timeline-when {
display: block;
font-size: 13px;
font-weight: 700;
color: var(--brand);
margin-bottom: 4px;
}
.timeline-name { font-size: 19px; font-weight: 700; margin: 0 0 8px; color: #FFFFFF; }
.timeline-step p { font-size: 14px; line-height: 1.55; color: #E8EEF0; margin: 0; }
.timeline-note { font-size: 13px; color: #E8EEF0; text-align: center; margin: 28px 0 0; }
/* ── Founding Library Program ── */
.founding { padding: 72px 28px 36px; max-width: 1180px; margin: 0 auto; }
.founding-card {
max-width: 680px;
margin: 0 auto;
background: var(--surface);
border: 2px solid var(--teal);
border-radius: 14px;
padding: 40px 36px;
text-align: center;
}
.founding-card h2 { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 600; }
.founding-body {
font-size: 16px;
line-height: 1.6;
color: var(--text-soft);
margin: 0 auto 24px;
max-width: 560px;
}
.founding-body strong { color: var(--text); }
.btn-teal {
display: inline-block;
background: var(--teal);
color: #FFFFFF;
padding: 13px 22px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
}
.btn-teal:hover { background: #2a6478; }
/* ── Pricing extras ── */
.pricing-extras {
max-width: 1180px;
margin: 18px auto 0;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 14px;
text-align: left;
}
.pricing-consortium,
.pricing-addons {
margin: 0;
background: var(--surface);
border: 1px solid var(--hairline-strong);
border-radius: 12px;
padding: 18px 20px;
font-size: 14px;
line-height: 1.55;
color: var(--text-soft);
}
.pricing-consortium strong { color: var(--text); }
.pricing-consortium a { color: var(--teal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.addons-title { font-size: 14px; font-weight: 700; color: var(--text); margin: 0 0 6px; text-align: left; letter-spacing: 0; }
.addons-list { list-style: none; margin: 0; padding: 0; }
.addons-list li { padding: 3px 0; }
.addons-list strong { color: var(--text); }
/* ── Buying Accessrank ── */
.buying {
padding: 36px 28px 72px;
max-width: 1180px;
margin: 0 auto;
text-align: center;
border-top: 1px solid var(--hairline);
}
.buying .section-sub { margin-bottom: 24px; }
.buying-list {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 760px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
text-align: left;
}
.buying-list li {
background: var(--surface);
border: 1px solid var(--hairline-strong);
border-radius: 8px;
padding: 12px 14px 12px 38px;
font-size: 14px;
color: var(--text);
position: relative;
}
.buying-list li::before {
content: "";
position: absolute;
left: 14px; top: 16px;
width: 10px; height: 6px;
border-left: 2px solid var(--teal);
border-bottom: 2px solid var(--teal);
transform: rotate(-45deg);
}
.buying-cta { margin: 20px 0 0; }
.buying-cta a { color: var(--teal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* ── Footer disclaimer ── */
.footer-bottom { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 24px; color: var(--text-soft); }
.footer-bottom p { margin: 0; }
.footer-disclaimer { white-space: nowrap; }
.footer-copy { white-space: nowrap; }
@media (max-width: 1100px) {
.footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
.footer-disclaimer { white-space: normal; }
}
/* ── Accessibility statement page ── */
.statement {
max-width: 720px;
margin: 0 auto;
padding: 64px 28px 72px;
}
.statement h1 {
font-size: var(--h1-size);
line-height: 1.05;
letter-spacing: -1.4px;
font-weight: 800;
margin: 0 0 16px;
color: var(--text);
}
.statement h2 { text-align: left; font-size: 24px; margin: 36px 0 10px; }
.statement p, .statement li { font-size: 16px; line-height: 1.65; color: var(--text-soft); }
.statement ul { padding-left: 22px; }
.statement a { color: var(--teal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.statement .updated { font-size: 14px; color: var(--text-soft); }
@media (max-width: 900px) {
.timeline, .pricing-extras, .buying-list { grid-template-columns: 1fr; }
.founding, .buying, .timeline-band, .statement { padding-left: 20px; padding-right: 20px; }
.marquee { padding-left: 20px; }
}
@media (max-width: 520px) {
.criteria-row { grid-template-columns: 1fr auto; }
.criteria-id { grid-column: 1 / -1; }
.deadline-list div { flex-direction: column; gap: 2px; }
}
/* Accessibility audit fixes (Sept 23, 2026) */
.dark-photo-band .eyebrow {
background: rgba(20, 16, 13, 0.72);
padding: 6px 12px;
border-radius: 100px;
}
.pulse-dot { animation-iteration-count: 3; }
.nav-right a:not(.cta-nav) { padding: 4px 0; }
/* Top headline sized to match the hero h1 (Sept 24, 2026) */
.stakes-title {
font-size: var(--h1-size); /* matches "Every patron welcome." */
line-height: 1.02;
letter-spacing: -1.8px;
max-width: 1080px;
margin-bottom: 40px;
}
@media (max-width: 900px) { .stakes-title { letter-spacing: -1px; } }
/* ══════════════════════════════════════════════════════════════════
TEST LAYOUT (Sept 26, 2026) — split hero with photo. Not deployed.
══════════════════════════════════════════════════════════════════ */
.v2-hero {
max-width: 1180px;
margin: 0 auto;
padding: 64px 28px 48px;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 56px;
align-items: center;
}
.v2-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 18px;
}
.v2-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px rgba(31, 78, 95, 0.18); }
.v2-hero h1 {
font-size: clamp(38px, 4.8vw, 62px);
line-height: 1.02;
letter-spacing: -2px;
font-weight: 800;
color: var(--text);
margin: 0 0 22px;
}
.v2-hero h1 .accent { color: var(--teal); }
.v2-sub {
font-size: 18px;
line-height: 1.6;
color: var(--text-soft);
max-width: 520px;
margin: 0 0 28px;
}
.v2-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.v2-btn {
display: inline-block;
padding: 14px 22px;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
border: 2px solid transparent;
cursor: pointer;
font-family: inherit;
line-height: 1.2;
}
.v2-btn-primary { background: var(--teal); color: #FFFFFF; }
.v2-btn-primary:hover { background: #2a6478; }
.v2-btn-ghost { background: transparent; color: var(--text); border-color: var(--text); }
.v2-btn-ghost:hover { background: var(--text); color: #FFFFFF; }
.v2-btn-yellow { background: var(--brand); color: #14100D; }
.v2-btn-yellow:hover { background: #F2C21F; }
.v2-textlink {
font-size: 14px;
font-weight: 600;
color: var(--teal);
text-decoration: underline;
text-underline-offset: 4px;
}
/* Photo: half-page design element, with the deadline card overlapping it */
.v2-photo { position: relative; margin: 0; }
.v2-photo img {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
max-height: 600px;
object-fit: cover;
object-position: 44% 62%;
border-radius: 20px;
box-shadow: 0 24px 48px -24px rgba(20, 16, 13, 0.45);
}
.v2-deadline {
position: absolute;
left: -32px;
bottom: 28px;
width: min(330px, 84%);
background: var(--surface);
border: 1px solid var(--hairline-strong);
border-radius: 14px;
padding: 16px 18px;
box-shadow: 0 18px 36px -18px rgba(20, 16, 13, 0.45);
}
.v2-deadline-title {
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
text-align: left;
color: var(--teal);
margin: 0 0 8px;
}
.v2-deadline-list { margin: 0 0 8px; }
.v2-deadline-list div {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 6px 0;
border-top: 1px solid var(--hairline);
font-size: 14px;
}
.v2-deadline-list dt { color: var(--text-soft); }
.v2-deadline-list dd { margin: 0; font-weight: 700; color: var(--text); white-space: nowrap; }
.v2-deadline-note { font-size: 12px; color: var(--text-soft); margin: 0; }
/* Tested with: static row, no motion */
.v2-tested {
max-width: 1180px;
margin: 0 auto;
padding: 18px 28px;
display: flex;
align-items: center;
gap: 24px;
border-top: 1px solid var(--hairline-strong);
border-bottom: 1px solid var(--hairline-strong);
}
.v2-tested-label {
flex-shrink: 0;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--text-soft);
}
.v2-tested-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 8px 22px;
flex: 1;
}
.v2-tested-list li { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.2px; }
/* Stats */
.v2-stakes { max-width: 1180px; margin: 0 auto; padding: 72px 28px 64px; }
.v2-stakes-title {
font-size: var(--h1-size);
line-height: 1.04;
letter-spacing: -1.6px;
text-align: left;
margin: 0 0 36px;
color: var(--text);
}
.v2-stakes-title .accent { color: var(--teal); }
.v2-stakes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--text); }
.v2-stat { padding: 22px 22px 4px 0; display: flex; flex-direction: column; }
.v2-stat + .v2-stat { padding-left: 22px; border-left: 1px solid var(--hairline-strong); }
.v2-stat-num { font-size: 44px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; color: var(--text); margin-bottom: 12px; }
.v2-stat-label { font-size: 14px; line-height: 1.5; color: var(--text-soft); margin: 0 0 12px; flex: 1; }
.v2-stat-source { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-soft); margin: 0; }
/* Audit request band */
.v2-audit { background: var(--teal); color: #FFFFFF; }
.v2-audit-inner {
max-width: 1180px;
margin: 0 auto;
padding: 48px 28px;
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 48px;
align-items: center;
}
.v2-audit h2 { color: #FFFFFF; text-align: left; margin: 0 0 10px; }
.v2-audit-intro p { font-size: 15px; line-height: 1.6; color: #E8EEF0; margin: 0; }
.v2-audit-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.v2-audit-form label { color: #FFFFFF; }
.v2-audit-form input { border-color: transparent; }
.v2-audit-form .form-error,
.v2-audit-form .form-status,
.v2-audit-form .v2-btn { grid-column: 1 / -1; }
.v2-audit-form .form-error { color: #FFE9A3; }
.v2-audit-form .form-status { color: #FFFFFF; }
.v2-audit-form .form-status a { color: #FFFFFF; }
.v2-audit-form .v2-btn { justify-self: start; margin-top: 4px; }
.v2-audit a:focus-visible, .v2-audit button:focus-visible, .v2-audit input:focus-visible { outline-color: var(--brand); }
@media (max-width: 900px) {
.v2-hero { grid-template-columns: 1fr; gap: 40px; padding: 40px 20px 36px; }
.v2-photo img { aspect-ratio: 4 / 3; }
.v2-deadline { position: relative; left: auto; bottom: auto; width: auto; margin-top: -40px; margin-left: 16px; margin-right: 16px; }
.v2-hero h1 { letter-spacing: -1.5px; }
.v2-tested { flex-direction: column; align-items: flex-start; padding: 16px 20px; gap: 10px; }
.v2-tested-list { justify-content: flex-start; }
.v2-stakes { padding: 48px 20px; }
.v2-stakes-grid { grid-template-columns: 1fr 1fr; }
.v2-stat:nth-child(3) { padding-left: 0; border-left: 0; }
.v2-stat:nth-child(n+3) { border-top: 1px solid var(--hairline-strong); }
.v2-audit-inner { grid-template-columns: 1fr; gap: 24px; padding: 40px 20px; }
}
@media (max-width: 520px) {
.v2-audit-form { grid-template-columns: 1fr; }
.v2-stakes-grid { grid-template-columns: 1fr; }
.v2-stat, .v2-stat + .v2-stat { padding-left: 0; border-left: 0; }
.v2-stat + .v2-stat { border-top: 1px solid var(--hairline-strong); }
}
/* ── Free scanner band (AudioEye-style, light site colors) ── */
.v2-scan { max-width: 1180px; margin: 0 auto; padding: 40px 28px; }
.v2-scan-card {
background: var(--surface);
border: 1px solid var(--hairline-strong);
border-radius: 20px;
padding: 44px 56px;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 48px;
align-items: center;
color: var(--text);
box-shadow: 0 18px 40px -28px rgba(20, 16, 13, 0.35);
}
.v2-scan-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--teal);
margin: 0 0 12px;
}
.v2-scan-eyebrow::before {
content: "";
width: 8px; height: 8px;
border-radius: 50%;
background: var(--brand);
box-shadow: 0 0 0 3px rgba(31, 78, 95, 0.18);
}
.v2-scan-card h2 {
text-align: left;
color: var(--text);
font-size: clamp(26px, 3vw, 36px);
line-height: 1.15;
letter-spacing: -0.8px;
margin: 0 0 14px;
}
.v2-scan-sub { font-size: 16px; line-height: 1.6; color: var(--text-soft); margin: 0; max-width: 520px; }
.v2-scan-box {
background: #FFFFFF;
border: 1px solid var(--hairline-strong);
border-radius: 14px;
padding: 22px 24px 16px;
}
.v2-scan-box label { display: block; font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 12px; }
.v2-scan-row {
display: flex;
border: 1px solid #7A7366;
border-radius: 10px;
overflow: hidden;
background: #FFFFFF;
}
.v2-scan-row:focus-within { outline: 3px solid var(--teal); outline-offset: 2px; }
.v2-scan-row input {
flex: 1;
min-width: 0;
background: transparent;
border: 0;
color: var(--text);
font: inherit;
font-size: 15px;
padding: 13px 14px;
}
.v2-scan-row input::placeholder { color: #6B655A; }
.v2-scan-row input:focus { outline: none; }
.v2-scan-row input[aria-invalid="true"] { background: #FBEDEA; }
.v2-scan-btn {
flex-shrink: 0;
background: var(--teal);
color: #FFFFFF;
border: 0;
font: inherit;
font-size: 15px;
font-weight: 700;
padding: 0 22px;
cursor: pointer;
}
.v2-scan-btn:hover { background: #2a6478; }
.v2-scan-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.v2-scan-error { min-height: 20px; margin: 8px 0 0; font-size: 13px; font-weight: 600; color: #9A3329; }
/* ── Results dialog ── */
.scan-dialog {
width: min(640px, calc(100vw - 32px));
max-height: calc(100vh - 48px);
overflow-y: auto;
overscroll-behavior: contain;
padding: 0;
border: 0;
border-radius: 18px;
background: var(--surface);
color: var(--text);
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5);
}
.scan-dialog::backdrop { background: rgba(14, 22, 26, 0.72); }
.scan-dialog-inner { position: relative; padding: 32px 32px 24px; }
.scan-close {
position: absolute; top: 14px; right: 14px;
width: 40px; height: 40px;
border-radius: 50%;
border: 1px solid var(--hairline-strong);
background: transparent;
font-size: 24px; line-height: 1;
color: var(--text);
cursor: pointer;
}
.scan-close:hover { background: var(--bg); }
.scan-dialog-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--teal); margin: 0 0 6px; }
.scan-dialog-title { text-align: left; font-size: 26px; letter-spacing: -0.6px; margin: 0 0 4px; padding-right: 44px; }
.scan-dialog-title:focus { outline: none; }
.scan-dialog-url { font-size: 14px; color: var(--text-soft); margin: 0 0 22px; word-break: break-all; }
.scan-loading { text-align: center; padding: 28px 0 36px; }
.scan-loading p { margin: 14px 0 0; font-size: 16px; font-weight: 600; }
.scan-loading .scan-note { font-size: 13px; font-weight: 400; color: var(--text-soft); margin-top: 6px; }
.scan-spinner {
display: inline-block; width: 44px; height: 44px;
border-radius: 50%;
border: 4px solid var(--hairline-strong);
border-top-color: var(--teal);
animation: scan-spin 0.9s linear infinite;
}
@keyframes scan-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .scan-spinner { animation-duration: 3s; } }
.scan-sample {
font-size: 13px; font-weight: 600;
background: #FFF3C4; color: #5A4500;
border-radius: 8px; padding: 8px 12px; margin: 0 0 16px;
}
.scan-summary { display: flex; align-items: center; gap: 22px; margin-bottom: 22px; }
.scan-ring { position: relative; width: 112px; height: 112px; flex-shrink: 0; }
.scan-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.scan-ring circle { fill: none; stroke-width: 10; }
.scan-ring-track { stroke: var(--hairline-strong); }
.scan-ring-value { stroke: var(--teal); stroke-linecap: round; transition: stroke-dashoffset 0.8s ease; }
.scan-ring.good .scan-ring-value { stroke: #2E7D4F; }
.scan-ring.fair .scan-ring-value { stroke: #B7791F; }
.scan-ring.poor .scan-ring-value { stroke: #B5443A; }
.scan-ring-num {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 34px; font-weight: 800; letter-spacing: -1px;
}
.scan-verdict { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.scan-counts { font-size: 14px; color: var(--text-soft); margin: 0; line-height: 1.5; }
.scan-issues-title { text-align: left; font-size: 15px; letter-spacing: 0; margin: 0 0 8px; }
.scan-issues { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--hairline-strong); }
.scan-issues li {
display: flex; justify-content: space-between; gap: 16px;
padding: 10px 0;
border-bottom: 1px solid var(--hairline);
font-size: 14px; line-height: 1.45;
}
.scan-issue-count { flex-shrink: 0; font-weight: 700; color: #9A3329; white-space: nowrap; }
.scan-caveat { font-size: 13px; line-height: 1.55; color: var(--text-soft); margin: 0 0 20px; }
.scan-cta { background: var(--bg); border-radius: 12px; padding: 18px 18px 8px; margin-bottom: 14px; }
.scan-cta-title { text-align: left; font-size: 17px; letter-spacing: 0; margin: 0 0 12px; }
.scan-lead .v2-btn { margin: 4px 0 10px; }
.scan-source { font-size: 11px; color: var(--text-soft); margin: 0; }
.scan-failed { padding: 10px 0 12px; }
.scan-failed p { font-size: 15px; line-height: 1.6; margin: 0 0 18px; }
@media (max-width: 900px) {
.v2-scan { padding: 32px 20px; }
.v2-scan-card { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; }
}
@media (max-width: 520px) {
.v2-scan-row { flex-direction: column; }
.v2-scan-btn { padding: 13px; }
.scan-dialog-inner { padding: 26px 20px 20px; }
.scan-summary { flex-direction: column; align-items: flex-start; }
}
/* ── Test: slightly off-white page (Sept 26, 2026) ── */
:root {
--bg: #FAF8F4; /* off-white page */
--surface: #FFFFFF; /* cards sit a shade brighter than the page */
--surface-2: #F1EDE6; /* wells, strips */
}
html, body { background-image: none; }
.v2-scan-box { background: var(--bg); }
/* Stats follow the scanner directly: no headline, no top rule */
.v2-stakes { padding-top: 8px; padding-bottom: 56px; }
.v2-stakes-grid { border-top: 0; }
.v2-stat { padding-top: 12px; }
@media (max-width: 900px) { .v2-stakes { padding-top: 0; } }
/* Slightly darker hairlines on the off-white page */
:root {
--hairline: rgba(44, 42, 38, 0.13);
--hairline-strong: rgba(44, 42, 38, 0.22);
}
/* Equal space above and below the hero */
.v2-hero { padding-top: 48px; padding-bottom: 48px; }
@media (max-width: 900px) { .v2-hero { padding-top: 32px; padding-bottom: 32px; } }
/* Hero photo: height follows the copy column; image nudged up 10% to show less ceiling */
.v2-hero { align-items: stretch; }
.v2-hero-copy { align-self: center; }
.v2-hero-copy .v2-sub { margin-bottom: 20px; }
.v2-photo { min-height: 360px; }
.v2-photo-frame {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 24px 48px -24px rgba(20, 16, 13, 0.45);
}
.v2-photo-frame img {
width: 100%;
height: 112%;
max-height: none;
aspect-ratio: auto;
object-fit: cover;
object-position: 44% 55%;
border-radius: 0;
box-shadow: none;
transform: translateY(-10%);
}
@media (max-width: 900px) {
.v2-photo { min-height: 0; }
.v2-photo-frame { position: relative; aspect-ratio: 4 / 3; }
.v2-photo-frame img { position: absolute; top: 0; left: 0; }
}
/* Demo option inside the scan results */
.scan-demo {
border-top: 1px solid var(--hairline-strong);
margin-top: 6px;
padding: 16px 0 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.scan-demo p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-soft); }
.scan-demo strong { color: var(--text); }
.scan-demo .v2-btn { flex-shrink: 0; }
.scan-failed-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 520px) { .scan-demo { flex-direction: column; align-items: flex-start; } }
/* ══ Scan results: two-column dialog (contact left, details right) ══ */
.scan-dialog { width: min(1040px, calc(100vw - 32px)); padding: 0; background: var(--surface); }
.scan-dialog:not(.is-results) { width: min(560px, calc(100vw - 32px)); }
.scan-close { position: absolute; top: 14px; right: 14px; z-index: 2; background: var(--surface); }
.scan-state { padding: 40px 36px 36px; }
.scan-state.scan-loading { text-align: center; }
.scan-state-title { text-align: center; font-size: 22px; letter-spacing: -0.4px; margin: 16px 0 4px; }
.scan-state-title:focus, .scan-headline:focus { outline: none; }
.scan-failed .scan-state-title { text-align: left; margin-top: 0; padding-right: 40px; }
.scan-failed p { font-size: 15px; line-height: 1.6; margin: 10px 0 18px; }
.scan-layout { display: grid; grid-template-columns: 1fr 1.05fr; }
.scan-lead-panel { padding: 40px 36px 28px; }
.scan-detail-panel {
background: var(--bg);
border-left: 1px solid var(--hairline-strong);
padding: 40px 36px 28px;
border-radius: 0 18px 18px 0;
}
.scan-pill {
display: inline-block;
background: #FBE3DF; color: #8E2F26;
font-size: 13px; font-weight: 600;
border-radius: 999px; padding: 5px 12px; margin: 0 0 14px;
}
.scan-headline {
text-align: left;
font-size: clamp(26px, 3vw, 34px);
line-height: 1.12;
letter-spacing: -0.8px;
margin: 0 0 12px;
color: var(--text);
}
.scan-hot { color: #A63D33; }
.scan-lead-sub { font-size: 15px; line-height: 1.55; color: var(--text-soft); margin: 0 0 22px; }
.scan-form-title { text-align: left; font-size: 18px; letter-spacing: -0.2px; margin: 0 0 4px; }
.scan-required { font-size: 12px; color: var(--text-soft); margin: 0 0 14px; }
.scan-required span, .lead-form .req { color: #A63D33; font-weight: 700; }
.scan-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.scan-submit { width: 100%; margin-top: 4px; }
.scan-privacy { font-size: 12px; color: var(--text-soft); margin: 10px 0 0; }
.scan-lead-panel .scan-demo { margin-top: 18px; padding-bottom: 0; }
.scan-site { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--teal); margin: 0 0 14px; }
.scan-summary { margin-bottom: 18px; }
.scan-ring { width: 104px; height: 104px; }
.scan-ring-num { flex-direction: column; font-size: 32px; line-height: 1; }
.scan-ring-num small { font-size: 12px; font-weight: 600; color: var(--text-soft); letter-spacing: 0; margin-top: 2px; }
.scan-verdict { font-size: 20px; margin-bottom: 4px; }
.scan-meta { font-size: 13px; color: var(--text-soft); margin: 0; line-height: 1.5; }
.scan-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.scan-bar { background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 12px; padding: 12px 14px 14px; }
.scan-bar-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--text-soft); margin-bottom: 10px; }
.scan-bar-head strong { font-size: 22px; color: var(--text); letter-spacing: -0.5px; }
.scan-bar-track { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.scan-bar-track span { display: block; height: 100%; width: 0; background: var(--teal); border-radius: 999px; transition: width 0.8s ease; }
.scan-issues-title { font-size: 14px; margin: 0 0 6px; }
.scan-issues li { justify-content: flex-start; align-items: flex-start; gap: 12px; padding: 12px 0; }
.scan-issues li > div { flex: 1; }
.scan-sev {
flex-shrink: 0;
font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
border-radius: 6px; padding: 3px 8px; margin-top: 1px;
}
.scan-sev.serious { background: #FBE3DF; color: #8E2F26; }
.scan-sev.moderate { background: #FCEFCB; color: #6E4F00; }
.scan-sev.minor { background: var(--surface-2); color: var(--text-soft); }
.scan-issue-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.4; }
.scan-issue-meta { margin: 3px 0 0; font-size: 12px; color: var(--text-soft); }
.scan-detail-panel .scan-caveat { font-size: 12px; margin: 14px 0 8px; }
.scan-detail-panel .scan-sample { margin-bottom: 14px; }
@media (max-width: 860px) {
.scan-layout { grid-template-columns: 1fr; }
.scan-detail-panel { border-left: 0; border-top: 1px solid var(--hairline-strong); border-radius: 0 0 18px 18px; padding: 26px 22px 22px; }
.scan-lead-panel { padding-top: 36px; }
.scan-lead-panel { padding: 26px 22px 22px; }
.scan-state { padding: 36px 22px 26px; }
}
@media (max-width: 420px) {
.scan-name-row, .scan-bars { grid-template-columns: 1fr; }
}
/* Close button stays reachable while the results scroll */
.scan-dialog .scan-close {
position: sticky;
top: 12px; right: auto;
display: block;
margin: 12px 12px -52px auto;
}
.scan-detail-panel .scan-sample { margin-right: 36px; }
/* No rule between the stats and the WCAG section; tighter gap */
.v2-stakes { padding-bottom: 16px; }
.wcag-section { border-top: 0; padding-top: 40px; }
/* "Preview scan results" button: pinned bottom-right on the home page */
.sample-results-btn {
position: fixed;
right: 20px;
bottom: calc(20px + env(safe-area-inset-bottom, 0px));
z-index: 50;
background: var(--text);
color: #FFFFFF;
border: 0;
border-radius: 999px;
padding: 12px 18px;
font: 600 14px/1.2 'Inter', system-ui, sans-serif;
box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.45);
cursor: pointer;
}
.sample-results-btn:hover { background: var(--teal); }
.sample-results-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
@media (max-width: 520px) {
.sample-results-btn { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 10px 14px; font-size: 13px; }
}
/* ══ Results on the left, contact form on the right ══ */
.scan-layout { grid-template-columns: 1.15fr 0.85fr; }
.scan-detail-panel {
border-left: 0;
border-right: 1px solid var(--hairline-strong);
border-radius: 18px 0 0 18px;
}
.scan-detail-panel .scan-headline { padding-right: 0; }
.scan-lead-panel { padding-top: 64px; }
.scan-form-sub { font-size: 14px; line-height: 1.5; color: var(--text-soft); margin: 0 0 10px; }
.scan-detail-panel .scan-lead-sub { margin-bottom: 20px; }
.scan-bars { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.scan-bar-head { flex-direction: column; align-items: flex-start; gap: 2px; min-height: 52px; }
.scan-bar-head strong { font-size: 24px; }
/* AI agent readiness checklist */
.scan-agent-title { margin-top: 22px; }
.scan-agent-intro { font-size: 13px; line-height: 1.5; color: var(--text-soft); margin: 0 0 8px; }
.scan-agent-list { list-style: none; margin: 0 0 8px; padding: 0; border-top: 1px solid var(--hairline-strong); }
.scan-agent-list li {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 0;
border-bottom: 1px solid var(--hairline);
font-size: 14px;
color: var(--text);
}
.scan-agent-icon {
flex-shrink: 0;
width: 22px; height: 22px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 800;
}
.scan-agent-list .pass .scan-agent-icon { background: #DDF0E4; color: #1E6A3F; }
.scan-agent-list .fail .scan-agent-icon { background: #FCEFCB; color: #6E4F00; }
.scan-agent-text { flex: 1; line-height: 1.4; }
.scan-agent-status { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--text-soft); }
.scan-agent-list .fail .scan-agent-status { color: #6E4F00; }
@media (max-width: 860px) {
.scan-detail-panel { border-right: 0; border-top: 0; border-bottom: 1px solid var(--hairline-strong); border-radius: 18px 18px 0 0; padding: 36px 22px 22px; }
.scan-lead-panel { padding-top: 26px; }
}
@media (max-width: 520px) {
.scan-bars { grid-template-columns: 1fr; }
.scan-bar-head { flex-direction: row; justify-content: space-between; align-items: baseline; min-height: 0; }
}
/* Keep the contact form in view while the results scroll (desktop) */
@media (min-width: 861px) {
.scan-lead-panel { position: sticky; top: 0; align-self: start; }
}
/* Results overlay spans the same width as the site's content column */
.scan-dialog.is-results {
width: min(1124px, calc(100vw - 56px));
max-width: none;
}
@media (max-width: 900px) {
.scan-dialog.is-results { width: calc(100vw - 40px); }
}
/* ══ Scan dialog — final layout (Sept 27, 2026; same pattern as accessrank.ai/home) ══
One place that decides the dialog's layout. Earlier layers above kept overriding each other:
the two-column rule added with AI agent readiness came after the 860px stacking rule and
cancelled it (phones got two crushed columns), and `.scan-layout { display: grid }` beat the
[hidden] attribute, so the empty results showed under the loading spinner. */
.scan-dialog [hidden] { display: none !important; }
/* Same width from the first second to the results: nothing jumps when they arrive. */
.scan-dialog, .scan-dialog:not(.is-results), .scan-dialog.is-results { width: min(1124px, calc(100vw - 56px)); max-width: none; }
/* Progress */
.scan-state.scan-loading, .scan-state.scan-failed {
display: flex; flex-direction: column; justify-content: center;
min-height: 440px; padding: 56px 64px 48px; text-align: left;
}
.scan-progress-eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--teal); }
.scan-progress-eyebrow--warn { color: #A63D33; }
.scan-loading .scan-state-title, .scan-failed .scan-state-title {
text-align: left; margin: 0 0 26px; padding-right: 48px;
font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.8px; line-height: 1.15; overflow-wrap: anywhere;
}
.scan-progress-bar { height: 6px; margin: 0 0 26px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.scan-progress-bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--teal); transition: width 2.4s cubic-bezier(0.23, 1, 0.32, 1); }
.scan-steps { list-style: none; margin: 0; padding: 0; display: grid; row-gap: 14px; }
.scan-steps li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.4; color: var(--text-faint); }
.scan-steps li::before {
content: ''; flex: none; box-sizing: border-box; width: 20px; height: 20px; border-radius: 50%;
border: 2px solid var(--text-fainter); display: grid; place-items: center;
font-size: 11px; font-weight: 800; line-height: 1;
}
.scan-steps li[data-step="done"] { color: var(--text-soft); }
.scan-steps li[data-step="done"]::before { content: '\2713'; background: var(--teal); border-color: var(--teal); color: #FFFFFF; }
.scan-steps li[data-step="now"] { color: var(--text); font-weight: 600; }
.scan-steps li[data-step="now"]::before { border-color: var(--teal); border-top-color: transparent; animation: scan-spin 0.8s linear infinite; }
.scan-loading .scan-note { margin: 28px 0 0; font-size: 13px; font-weight: 400; color: var(--text-soft); }
.scan-failed #scan-failed-msg { max-width: 60ch; margin: 0 0 22px; }
@media (prefers-reduced-motion: reduce) {
.scan-progress-bar span { transition: none; }
.scan-steps li[data-step="now"]::before { animation: none; border-top-color: var(--teal); }
}
/* "View your results" under the scan form, for a result that finished after the dialog was closed */
.scan-card-status:empty { display: none; }
.scan-card-status { margin: 10px 0 0; font-size: 14px; color: var(--text-soft); }
.scan-view-btn { margin-top: 10px; }
/* Results stack above the form below 860px (must come after every two-column rule above) */
@media (max-width: 860px) {
.scan-layout { grid-template-columns: 1fr; }
.scan-lead-panel { position: static; }
}
/* Phones: a full-screen sheet, like accessrank.ai */
@media (max-width: 640px) {
.scan-dialog, .scan-dialog:not(.is-results), .scan-dialog.is-results {
width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; inset: 0; border-radius: 0;
}
.scan-state.scan-loading, .scan-state.scan-failed { min-height: 0; justify-content: flex-start; padding: 76px 22px 32px; }
.scan-detail-panel { border-radius: 0; }
}
/* Hero photo is a (responsive AVIF/WebP): the wrapper must not become the box the img's % sizes resolve against */
.v2-photo-frame picture { display: contents; }