/* ==========================================================================
BASE — fonts, color tokens (light + dark theme), reset, type scale,
container/grid utilities, section spacing. Every other CSS file in this
project depends on the custom properties defined here.
========================================================================== */
/* Font is loaded via + tags
in each page's , not @import here — @import serializes the request
behind this stylesheet's own download instead of letting the browser's
preload scanner fetch it in parallel. */
:root {
/* ---- Brand / raw color scale (does not change between themes) ---- */
--red-50: #fef2f2;
--red-100: #fee2e2;
--red-500: #ef4444;
--red-600: #dc2626;
--red-700: #b91c1c;
--rose-500: #f43f5e;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
--gray-950: #030712;
--zinc-700: #3f3f46;
--zinc-800: #27272a;
--zinc-850: #202023;
--zinc-900: #18181b;
--zinc-950: #09090b;
--blue-50: #eff6ff;
--blue-100: #dbeafe;
--blue-200: #bfdbfe;
--blue-glow: rgba(59, 130, 246, 0.16);
--green-100: #dcfce7;
--green-500: #22c55e;
--green-600: #16a34a;
--emerald-500: #10b981;
--emerald-600: #059669;
--amber-400: #fbbf24;
--amber-500: #f59e0b;
/* ---- Typography ---- */
--font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
--font-display: "Manrope", sans-serif;
/* ---- Elevation / radius tokens ---- */
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-2xl: 1.25rem;
--radius-3xl: 1.5rem;
--max-width: 1280px;
/* ---- Semantic tokens: LIGHT theme (default) ---- */
--bg: #ffffff;
--surface: var(--gray-50);
--surface-alt: #ffffff;
--surface-raised: #ffffff;
--text: var(--gray-800);
--text-strong: var(--gray-950);
--text-muted: var(--gray-500);
--text-faint: var(--gray-400);
--border: var(--gray-200);
--border-soft: rgba(229, 231, 235, 0.7);
--header-bg: rgba(255, 255, 255, 0.92);
--header-bg-scrolled: rgba(255, 255, 255, 0.7);
--header-border: rgba(229, 231, 235, 0.8);
/* Footer is intentionally dark in both themes (a deliberately different
surface from the rest of the light-theme page, not a light/dark
variant) — not redefined in the dark theme block below. */
--footer-bg: var(--zinc-950);
--footer-border: rgba(239, 68, 68, 0.18);
--footer-text: #a1a1aa;
--shadow-sm: 0 1px 2px 0 rgba(17, 24, 39, 0.05);
--shadow-md: 0 6px 16px -6px rgba(17, 24, 39, 0.12);
--shadow-lg: 0 10px 25px -5px rgba(17, 24, 39, 0.12), 0 8px 10px -6px rgba(17, 24, 39, 0.08);
--shadow-xl: 0 20px 25px -5px rgba(17, 24, 39, 0.12), 0 8px 10px -6px rgba(17, 24, 39, 0.08);
--grid-line: rgba(239, 68, 68, 0.05);
color-scheme: light;
}
/* ---- Semantic tokens: DARK theme ----
Toggled by , set via inline head script + js/theme-toggle.js */
html[data-theme="dark"] {
--bg: var(--zinc-950);
--surface: var(--zinc-900);
--surface-alt: var(--zinc-850);
--surface-raised: var(--zinc-850);
--text: var(--gray-200);
--text-strong: #ffffff;
--text-muted: #a1a1aa;
--text-faint: #71717a;
--border: var(--zinc-800);
--border-soft: rgba(255, 255, 255, 0.08);
--header-bg: rgba(9, 9, 11, 0.85);
--header-bg-scrolled: rgba(9, 9, 11, 0.62);
--header-border: rgba(255, 255, 255, 0.08);
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
--shadow-md: 0 6px 18px -6px rgba(0, 0, 0, 0.55);
--shadow-lg: 0 12px 28px -6px rgba(0, 0, 0, 0.55);
--shadow-xl: 0 24px 32px -8px rgba(0, 0, 0, 0.6);
--grid-line: rgba(239, 68, 68, 0.08);
color-scheme: dark;
}
/* If JS hasn't run yet and the user has no saved preference, still honor OS setting */
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]):not([data-theme="dark"]) {
color-scheme: dark;
}
}
/* ---- Reset ---- */
* { box-sizing: border-box; }
/* overflow-x: clip (not hidden) on purpose — per spec, "hidden" on only one
axis silently flips the OTHER axis's computed overflow to "auto", which
creates a scroll container on html/body and breaks position: sticky on
the header (its containing block is no longer the real viewport). "clip"
clips the same way without establishing that scroll container. */
html { scroll-behavior: smooth; overflow-x: clip; }
body {
margin: 0;
font-family: var(--font-sans);
color: var(--text);
background: var(--bg);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
transition: background-color 0.25s ease, color 0.25s ease;
/* Safety net, not a layout fix: [data-reveal] elements (animations.css)
sit translateX(±32px)/translateY(±28px) off their final position until
scrolled into view, and offscreen marquees/tickers rely on overflow
clipping. Transformed/offscreen elements still count toward the page's
scrollable area even while invisible, which can open up a few pixels of
horizontal rubber-band scroll on mobile. Nothing on this site is meant
to scroll horizontally, so clipping at the body is the correct fix. */
overflow-x: clip;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
input, select, textarea { font-family: inherit; }
::selection { background: var(--red-500); color: #fff; }
/* Visible keyboard-focus ring on every interactive element (form fields keep
their own custom focus treatment defined in forms.css/header-footer.css,
so they're excluded here to avoid a doubled-up ring). */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--red-500);
outline-offset: 2px;
border-radius: 2px;
}
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Skip link for keyboard/screen-reader users */
.skip-link {
position: absolute;
left: 1rem; top: -3rem;
background: var(--red-600); color: #fff;
padding: 0.6rem 1rem; border-radius: var(--radius-lg);
font-weight: 700; font-size: 0.85rem;
z-index: 100;
transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }
/* ---- Layout ---- */
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 1rem;
}
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }
/* Longhand top/bottom only (not the `padding` shorthand) — .section is
routinely combined with .container on the same element
(class="container section"), and since both classes share the same
specificity, a shorthand here would win the cascade tiebreak by source
order and silently zero out .container's left/right padding. */
.section { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.section-tight { padding-top: 2.75rem; padding-bottom: 2.75rem; }
@media (min-width: 768px) { .section { padding-top: 6rem; padding-bottom: 6rem; } }
/* ---- About page overrides (body.page-about, see about.html) ----
Tighter vertical rhythm: the animated section dividers now carry the
separation, so the hero and sections shed most of their own padding. */
body.page-about .page-hero { padding-bottom: 0; }
body.page-about .page-hero-rotate { margin-bottom: 0; }
body.page-about main .section { padding: 30px 0; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.hidden { display: none !important; }
/* Eyebrow / badge label above section headings */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--red-700);
background: var(--red-50);
border: 1px solid rgba(239, 68, 68, 0.15);
padding: 0.35rem 0.9rem;
border-radius: 999px;
}
html[data-theme="dark"] .eyebrow { background: rgba(239, 68, 68, 0.12); color: #fca5a5; }
.section-heading { max-width: 640px; margin: 0 auto 2.75rem; }
.section-heading h2 {
font-family: var(--font-display);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--text-strong);
font-size: 1.875rem;
margin-top: 0.75rem;
}
.section-heading p { margin-top: 0.75rem; color: var(--text-muted); font-size: 0.98rem; }
@media (min-width: 640px) { .section-heading h2 { font-size: 2.25rem; } }
/* Shared grids */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.grid-4 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
/* Page banner (used at the top of every inner page) */
.page-banner {
position: relative;
padding: 1.75rem 0 2.75rem;
text-align: center;
background: #ffffff;
border-bottom: 1px solid var(--border-soft);
overflow: hidden;
}
html[data-theme="dark"] .page-banner { background: var(--surface-raised); }
@media (min-width: 640px) { .page-banner { padding: 2.5rem 0 3.25rem; } }
.page-banner .container { position: relative; z-index: 1; }
.page-banner h1 {
font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
color: var(--text-strong); font-size: 2.25rem; margin-top: 0.75rem;
}
@media (min-width: 640px) { .page-banner h1 { font-size: 2.75rem; } }
.page-banner p { max-width: 42rem; margin: 0.9rem auto 0; color: var(--text-muted); }
/* Legal/policy document prose (Privacy Policy, Terms, Refund Policy, Disclaimer) */
.legal-content { max-width: 46rem; margin: 0 auto; color: var(--text); line-height: 1.75; }
.legal-content .legal-updated { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 2rem; }
.legal-content h2 {
font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em;
color: var(--text-strong); font-size: 1.3rem; margin: 2.25rem 0 0.85rem;
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h3 { font-weight: 800; color: var(--text-strong); font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }
.legal-content p { margin: 0 0 1rem; color: var(--text-muted); }
.legal-content ul { margin: 0 0 1.25rem; padding-left: 1.25rem; list-style: disc; color: var(--text-muted); }
.legal-content li { margin-bottom: 0.5rem; line-height: 1.65; }
.legal-content strong { color: var(--text-strong); font-weight: 800; }
.legal-content a { color: var(--red-600); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
html[data-theme="dark"] .legal-content a { color: #fca5a5; }
.legal-content .legal-note {
background: var(--red-50); border: 1px solid rgba(239,68,68,0.15); border-radius: var(--radius-xl);
padding: 1rem 1.25rem; font-size: 0.88rem; color: var(--text); margin: 1.5rem 0;
}
html[data-theme="dark"] .legal-content .legal-note { background: rgba(239,68,68,0.1); }
/* Breadcrumb (service pages, support, industries) */
.breadcrumb {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 0.4rem; font-size: 0.8rem; color: var(--text-muted); margin-top: 1rem;
}
.breadcrumb a { font-weight: 700; color: var(--text); }
.breadcrumb a:hover { color: var(--red-600); }
.breadcrumb .sep { opacity: 0.5; }
.breadcrumb .current { color: var(--red-700); font-weight: 700; }
/* Dark theme's breadcrumb pill sits on a dark red-tinted background, where
red-700 still falls short of 4.5:1 — needs a much lighter red instead. */
html[data-theme="dark"] .breadcrumb .current { color: #fca5a5; }