/* ==========================================================================
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 15px;
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 15px; } }
.page-banner .container { position: relative; z-index: 1; }
/* .page-banner is only used by the legal/policy pages (Privacy, Terms, Refund,
Disclaimer) — the adjacent-sibling selector keeps this scoped to just the
section immediately following it there, without touching the shared
.section spacing used everywhere else on the site. Combined with the
banner's own 15px bottom padding above, this keeps the total visible gap
at 20px. */
.page-banner + .section { padding-top: 5px; }
.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; }