/* ============================================================
Marathon Web Theme — Foundation Layer
Shared tokens, reset, typography, buttons, cards, animations
Usage:
TOKEN SOURCE OF TRUTH: shared/document-engine/theme/colors.json
All color values below MUST match colors.json. If tokens change,
update colors.json first, then sync this file.
Override tokens per site by redefining :root vars after this file.
============================================================ */
/* NOTE: Each site loads its own Google Fonts via in .
Outfit is the primary font. Do NOT use @import here — it blocks render. */
/* ============================================================
:root — Design Tokens
============================================================ */
:root {
/* === BACKGROUNDS === */
--bg-primary: #0A0A14;
--bg-secondary: #12121E;
--bg-card: #1A1A28;
--bg-card-alt: #141422;
--bg-dark-chart: #0E0E1A;
--bg-highlight: #1E1E30;
/* === BRAND ACCENTS === */
--magenta: #E84A8A;
--magenta-light: #F06B9E;
--magenta-glow: rgba(232, 74, 138, 0.15);
--gold: #C9A84C;
--gold-dark: #9A803A;
--gold-glow: rgba(201, 168, 76, 0.15);
--teal: #4ECDC4;
--teal-glow: rgba(78, 205, 196, 0.12);
--navy-light: #6B6BCC;
--purple: #9B7FDB;
--purple-glow: rgba(155, 127, 219, 0.12);
/* === TEXT === */
--text-primary: #F0F0F5;
--text-secondary: #AAAABB;
--text-muted: #8282a0;
--text-danger: #F06060;
/* === BORDERS & DIVIDERS === */
--divider: #2A2A3E;
--border: #333348;
/* === TYPOGRAPHY === */
--font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-display: var(--font);
--font-hero: var(--font);
--font-body: var(--font);
--m: 'SF Mono', 'Fira Code', 'Consolas', monospace;
/* === SHORT ALIASES === */
--bg: var(--bg-primary);
--pink: var(--magenta);
--t1: var(--text-primary);
--t2: var(--text-secondary);
--t3: var(--text-muted);
/* === HEADING SCALE (overridable per site) === */
--h1-size: clamp(38px, 4.8vw, 68px);
--h1-weight: 800;
--h2-size: clamp(32px, 4vw, 64px);
--h2-weight: 800;
--h3-size: clamp(18px, 1.8vw, 24px);
--h3-weight: 700;
/* === WEB TYPOGRAPHY SCALE === */
--text-hero: clamp(48px, 6vw, 80px);
--text-h2: clamp(32px, 4vw, 48px);
--text-h3: clamp(22px, 2.5vw, 32px);
--text-body: clamp(15px, 1.2vw, 17px);
--text-sub: clamp(14px, 1.1vw, 16px);
--text-small: 13px;
--text-xs: 11px;
/* === SHADOW === */
--shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}
/* ============================================================
Universal Reset
============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
font-family: var(--font);
background: var(--bg-primary);
color: var(--text-primary);
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
}
body {
background: var(--bg-primary);
line-height: 1.6;
letter-spacing: -0.01em;
overflow-x: clip;
max-width: 100vw;
}
/* ============================================================
Accessibility Utilities
============================================================ */
.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 {
position: absolute;
top: -100%;
left: 16px;
background: var(--magenta);
color: #fff;
padding: 8px 16px;
border-radius: 0 0 8px 8px;
font-weight: 600;
font-size: 14px;
z-index: 1000;
text-decoration: none;
}
.skip-link:focus {
top: 0;
}
*:focus-visible {
outline: 2px solid var(--magenta);
outline-offset: 2px;
}
/* ============================================================
Layout Primitives
============================================================ */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 32px;
}
section {
padding: 120px 0;
position: relative;
}
/* ============================================================
Typography
============================================================ */
h1, h2, h3, h4 {
line-height: 1.15;
font-weight: 700;
margin-bottom: 24px;
letter-spacing: -0.02em;
}
h1 {
font-size: var(--h1-size);
font-weight: var(--h1-weight);
line-height: 1.08;
}
h2 {
font-family: var(--font-display);
font-size: var(--h2-size);
font-weight: var(--h2-weight);
line-height: 1.15;
letter-spacing: -0.02em;
margin-bottom: 32px;
}
h3 {
font-family: var(--font-display);
font-size: var(--h3-size);
font-weight: var(--h3-weight);
line-height: 1.25;
margin-bottom: 12px;
}
p {
margin-bottom: 24px;
color: var(--text-secondary);
}
a {
color: var(--magenta);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Section sub-heading */
.section-sub {
font-size: clamp(16px, 1.3vw, 19px);
line-height: 1.6;
color: var(--text-secondary);
max-width: 680px;
margin-bottom: 56px;
}
/* Color utility classes */
.accent { color: var(--magenta); }
.gold { color: var(--gold); }
.teal { color: var(--teal); }
/* Gradient text */
.gradient-text {
background: linear-gradient(135deg, #ffffff 0%, #a4aed1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
/* ============================================================
Section Labels
============================================================ */
.section-label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
border-radius: 100px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 20px;
/* Frosted-glass pill — works on both engine and marketing site dark backgrounds */
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Animated dot indicator before label text */
.section-label::before {
content: '';
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.section-label.magenta { color: var(--magenta-light, #F06B9E); }
.section-label.magenta::before { background: var(--magenta); box-shadow: 0 0 8px var(--magenta); }
.section-label.gold { color: var(--gold); }
.section-label.gold::before { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.section-label.teal { color: var(--teal); }
.section-label.teal::before { background: var(--teal); box-shadow: 0 0 8px var(--teal); }
/* ============================================================
Buttons
============================================================ */
.cta-button {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 18px 44px;
background: var(--magenta);
color: white;
font-size: 18px;
font-weight: 700;
border-radius: 10px;
text-decoration: none;
transition: all 0.25s ease;
border: none;
cursor: pointer;
}
.cta-button:hover {
background: var(--magenta-light);
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(232, 74, 138, 0.3);
}
.cta-button .arrow { transition: transform 0.2s ease; }
.cta-button:hover .arrow { transform: translateX(4px); }
/* ============================================================
Card Base
============================================================ */
.card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 32px;
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
/* Accent bar pattern — color controlled by --card-accent on parent */
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--card-accent, var(--magenta));
}
/* ============================================================
Scroll Animations
============================================================ */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
/* ============================================================
Responsive Breakpoints
============================================================ */
@media (max-width: 900px) {
section { padding: 80px 0; }
}
@media (max-width: 600px) {
.container { padding: 0 16px; }
}
/* ============================================================
Reduced Motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================
Print
============================================================ */
@media print {
nav,
.scroll-arrow,
.carl-mascot {
display: none;
}
body {
background: white;
color: black;
}
}