/* =================================================================== Archimarc — Marketing Site Stylesheet DESIGN SYSTEM: See marketing/DESIGN.md for full spec. Inter + JetBrains Mono. No starfield. Light/dark theme via [data-theme]. =================================================================== */ /* --- Reset & Base -------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } html[data-theme="dark"] { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--bg-base); color: var(--text-high); line-height: 1.6; overflow-x: hidden; min-height: 100vh; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; font-family: inherit; border: none; background: none; } /* --- Design Tokens ------------------------------------------------- */ :root { /* Backgrounds */ --bg-base: #030b18; --bg-elevated: #07132a; --bg-overlay: #0c1e3e; /* Glass */ --glass-fill: rgba(7, 19, 42, 0.60); --glass-fill-2: rgba(12, 30, 62, 0.55); --glass-panel-bg: rgba(5, 14, 34, 0.75); --glass-border: rgba(0, 229, 255, 0.10); --glass-border-h: rgba(0, 229, 255, 0.32); --glass-border-a: rgba(0, 229, 255, 0.55); --glass-inset: rgba(255, 255, 255, 0.05); /* Brand */ --cyan: #00e5ff; --cyan-dim: #00b8cc; --cyan-glow: rgba(0, 229, 255, 0.18); --cyan-bg: rgba(0, 229, 255, 0.08); --cyan-text: var(--cyan); /* AA-safe variant for small text; darkened in light theme */ /* Semantic status */ --green: #4afe8a; --green-bg: rgba(74, 254, 138, 0.10); --green-text: var(--green); --amber: #f5a623; --amber-bg: rgba(245, 166, 35, 0.12); --amber-text: var(--amber); --red: #ff4757; /* Text */ --text-high: #eaf5ff; --text-med: #7da8c2; --text-low: #3e617a; /* Chrome (nav / hero scrims, form controls) */ --nav-scrolled-bg: rgba(3, 11, 24, 0.88); --mobile-nav-bg: rgba(3, 11, 24, 0.97); --hero-scrim-rgb: 3, 11, 24; --input-bg: rgba(255, 255, 255, 0.04); --select-option-bg: #0c1e3e; --section-alt-bg: rgba(7, 19, 42, 0.50); /* Spacing */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* Radius */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 100px; /* Shadows */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.35); --shadow-md: 0 8px 32px rgba(0,0,0,0.45); --shadow-lg: 0 20px 60px rgba(0,0,0,0.55); /* Layout */ --container-w: 1280px; --container-pad: clamp(20px, 4vw, 48px); --section-gap: clamp(64px, 10vw, 112px); --nav-h: 68px; /* Type */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; /* Transitions */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 350ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* --- Light theme overrides ------------------------------------------ Applied via [data-theme="light"] on (js/main.js sets this, defaulting to the visitor's prefers-color-scheme). Only color-bearing tokens are overridden; spacing/type/layout tokens are theme-agnostic. --------------------------------------------------------------------- */ html[data-theme="light"] { /* Backgrounds */ --bg-base: #f6f9fc; --bg-elevated: #eef3f8; --bg-overlay: #e3ecf3; /* Glass */ --glass-fill: rgba(255, 255, 255, 0.62); --glass-fill-2: rgba(255, 255, 255, 0.80); --glass-panel-bg: rgba(255, 255, 255, 0.80); --glass-border: rgba(6, 30, 54, 0.10); --glass-border-h: rgba(0, 145, 166, 0.35); --glass-border-a: rgba(0, 145, 166, 0.55); --glass-inset: rgba(255, 255, 255, 0.80); /* Brand — same hue, AA-safe text variant darkened for white backgrounds */ --cyan-dim: #0091a6; --cyan-text: #007488; /* Semantic status — AA-safe text variants */ --green-text: #1a8a4e; --amber-text: #a15b00; /* Text */ --text-high: #0a1f33; --text-med: #3f5b70; --text-low: #6d8598; /* Chrome */ --nav-scrolled-bg: rgba(246, 249, 252, 0.88); --mobile-nav-bg: rgba(246, 249, 252, 0.97); --hero-scrim-rgb: 246, 249, 252; --input-bg: rgba(6, 30, 54, 0.035); --select-option-bg: #ffffff; --section-alt-bg: rgba(6, 30, 54, 0.035); } /* --- Dot-grid background ------------------------------------------- */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient( circle, rgba(0,229,255,0.055) 1.5px, transparent 1.5px ); background-size: 28px 28px; } /* Radial glow centres */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 60% 50% at 20% 20%, rgba(0,229,255,0.06) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 80% 80%, rgba(74,254,138,0.04) 0%, transparent 70%); } /* --- Typography ---------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; color: var(--text-high); } h1 { font-size: clamp(2.5rem, 5.5vw, 4.5rem); font-weight: 800; letter-spacing: -0.04em; } h2 { font-size: clamp(1.625rem, 3vw, 2.25rem); letter-spacing: -0.025em; } h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; } p { color: var(--text-med); line-height: 1.7; } .eyebrow { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--cyan-text); display: block; margin-bottom: var(--sp-3); } .gradient-text { background: linear-gradient(95deg, #00e5ff 0%, #7cff4f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* --- Layout -------------------------------------------------------- */ .container { max-width: var(--container-w); margin: 0 auto; padding: 0 var(--container-pad); position: relative; z-index: 1; } .section { padding: var(--section-gap) 0; } .section-alt { background: var(--section-alt-bg); } .section-header { margin-bottom: var(--sp-16); } .section-header--center { text-align: center; } .section-header--center .section-lead { margin-inline: auto; } .section-title { margin-top: var(--sp-3); margin-bottom: var(--sp-4); } .section-lead { font-size: 1.0625rem; color: var(--text-med); line-height: 1.75; max-width: 58ch; } /* --- Glass surface ------------------------------------------------- */ .glass { background: var(--glass-fill); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid var(--glass-border); border-radius: var(--r-lg); box-shadow: 0 4px 32px rgba(0,0,0,0.40), inset 0 1px 0 var(--glass-inset); transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .glass:hover { border-color: var(--glass-border-h); box-shadow: 0 8px 48px rgba(0,0,0,0.50), 0 0 0 1px rgba(0,229,255,0.12), inset 0 1px 0 var(--glass-inset); } .glass--panel { background: var(--glass-panel-bg); backdrop-filter: blur(10px); border: 1px solid rgba(0,229,255,0.14); border-radius: var(--r-md); } .glass--featured { border-color: var(--glass-border-a); box-shadow: 0 0 0 1px rgba(0,229,255,0.20), 0 8px 56px rgba(0,229,255,0.12), 0 4px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(0,229,255,0.10); } /* --- Buttons ------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 13px 28px; border-radius: var(--r-md); font-size: 0.9375rem; font-weight: 600; white-space: nowrap; font-family: var(--font-sans); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; } .btn-primary { background: linear-gradient(135deg, #00e5ff 0%, #00b8cc 100%); color: #020b18; font-weight: 700; box-shadow: 0 4px 20px rgba(0,229,255,0.28); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,229,255,0.42); } .btn-primary:active { transform: translateY(0); } .btn-secondary { /* inherits .glass */ background: var(--glass-fill); color: var(--text-high); border: 1px solid var(--glass-border); backdrop-filter: blur(8px); } .btn-secondary:hover { border-color: var(--glass-border-h); background: var(--glass-fill-2); } .btn-sm { padding: 8px 18px; font-size: 0.875rem; } .btn-lg { padding: 16px 36px; font-size: 1rem; border-radius: var(--r-lg); } /* Text arrow button */ .btn-arrow { color: var(--text-high); font-weight: 600; font-size: 0.9375rem; display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0; border-radius: 0; } .btn-arrow::after { content: '→'; transition: transform var(--dur-fast) var(--ease-out); } .btn-arrow:hover::after { transform: translateX(4px); } /* --- Status Badge -------------------------------------------------- */ .status-badge { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--text-low); text-transform: uppercase; margin-bottom: var(--sp-6); } .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); flex-shrink: 0; animation: pulse-dot 2.5s ease-in-out infinite; } .status-sep { color: var(--glass-border-h); margin: 0 2px; } .status-version { color: var(--cyan-dim); } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* --- Metric Panel -------------------------------------------------- */ .metric-panel { /* inherits .glass--panel */ padding: var(--sp-4) var(--sp-5); min-width: 180px; display: grid; gap: var(--sp-1); } .metric-label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-low); } .metric-value-row { display: flex; align-items: baseline; gap: var(--sp-2); } .metric-number { font-family: var(--font-mono); font-size: 1.625rem; font-weight: 600; color: var(--text-high); line-height: 1; } .metric-unit { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--cyan-dim); letter-spacing: 0.06em; text-transform: uppercase; } .metric-status { display: flex; align-items: center; gap: var(--sp-1); font-family: var(--font-mono); font-size: 0.6875rem; color: var(--green-text); letter-spacing: 0.04em; margin-top: var(--sp-1); } .metric-status::before { content: '●'; font-size: 7px; } /* --- Navigation ---------------------------------------------------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; transition: background var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out); } .nav.scrolled { background: var(--nav-scrolled-bg); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--glass-border); box-shadow: 0 4px 24px rgba(0,0,0,0.30); } .nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--container-w); margin: 0 auto; padding: 0 var(--container-pad); } .nav-logo { display: flex; align-items: center; gap: var(--sp-2); font-size: 1.125rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text-high); } .nav-logo-mark { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--cyan) 0%, #00b8cc 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .nav-center { display: flex; align-items: center; gap: var(--sp-1); } .nav-prefix { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-low); letter-spacing: 0.06em; text-transform: uppercase; margin-right: var(--sp-2); } .nav-links { display: flex; align-items: center; gap: 0; } .nav-links a { font-size: 0.875rem; font-weight: 500; color: var(--text-med); padding: 7px 14px; letter-spacing: 0.01em; border-radius: var(--r-sm); transition: color var(--dur-base), background var(--dur-base); } .nav-links a:hover, .nav-links a.active { color: var(--text-high); background: rgba(0,229,255,0.06); } .nav-actions { display: flex; align-items: center; gap: var(--sp-3); } .nav-login { font-size: 0.875rem; font-weight: 500; color: var(--text-med); padding: 7px 4px; transition: color var(--dur-base); } .nav-login:hover { color: var(--text-high); } /* --- Theme toggle ---------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--text-med); border: 1px solid var(--glass-border); background: var(--glass-fill); flex-shrink: 0; transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); } .theme-toggle:hover { color: var(--text-high); border-color: var(--glass-border-h); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html[data-theme="light"] .theme-toggle .icon-sun { display: block; } html[data-theme="light"] .theme-toggle .icon-moon { display: none; } .mobile-theme-toggle { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: 12px var(--sp-3); border-radius: var(--r-md); font-size: 1rem; font-weight: 500; color: var(--text-med); transition: color var(--dur-base), background var(--dur-base); } .mobile-theme-toggle:hover { color: var(--text-high); background: rgba(0,229,255,0.06); } .mobile-theme-toggle svg { width: 18px; height: 18px; flex-shrink: 0; } .mobile-theme-toggle .icon-sun { display: none; } .mobile-theme-toggle .icon-moon { display: block; } .mobile-theme-toggle .label-dark { display: inline; } .mobile-theme-toggle .label-light { display: none; } html[data-theme="light"] .mobile-theme-toggle .icon-sun { display: block; } html[data-theme="light"] .mobile-theme-toggle .icon-moon { display: none; } html[data-theme="light"] .mobile-theme-toggle .label-dark { display: none; } html[data-theme="light"] .mobile-theme-toggle .label-light { display: inline; } /* --- Mobile Nav ---------------------------------------------------- */ .nav-toggle { display: none; flex-direction: column; gap: 5px; padding: var(--sp-2); color: var(--text-high); } .nav-toggle span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.25s var(--ease-out), opacity 0.2s; } .nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); } .mobile-nav { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; background: var(--mobile-nav-bg); backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); padding: var(--sp-4) var(--container-pad) var(--sp-6); z-index: 99; flex-direction: column; gap: var(--sp-1); } .mobile-nav.open { display: flex; } .mobile-nav a { font-size: 1rem; font-weight: 500; color: var(--text-med); padding: 12px var(--sp-3); border-radius: var(--r-md); transition: color var(--dur-base), background var(--dur-base); } .mobile-nav a:hover { color: var(--text-high); background: rgba(0,229,255,0.06); } .mobile-nav-divider { height: 1px; background: var(--glass-border); margin: var(--sp-3) 0; } .mobile-nav-actions { display: flex; flex-direction: column; gap: var(--sp-2); } .mobile-nav-actions .btn { justify-content: center; } /* --- Hero ---------------------------------------------------------- */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-top: var(--nav-h); overflow: hidden; } /* Graph fills the full hero background */ .hero-graph { position: absolute; inset: 0; z-index: 0; } .hero-graph svg { width: 100%; height: 100%; } /* Scrim over graph bottom-left so text is readable (flips light/dark with theme) */ .hero-graph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(var(--hero-scrim-rgb),0.90) 0%, rgba(var(--hero-scrim-rgb),0.55) 55%, rgba(var(--hero-scrim-rgb),0.10) 100%), linear-gradient(to top, rgba(var(--hero-scrim-rgb),0.85) 0%, rgba(var(--hero-scrim-rgb),0.20) 45%, transparent 100%); } .hero-body { position: relative; z-index: 1; padding: 0 var(--container-pad) var(--sp-20); max-width: var(--container-w); margin: 0 auto; width: 100%; } .hero-content { max-width: 640px; } .hero-title { margin-bottom: var(--sp-5); font-size: clamp(2.75rem, 6vw, 5rem); line-height: 1.0; letter-spacing: -0.04em; } .hero-subtitle { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--text-med); line-height: 1.75; max-width: 52ch; margin-bottom: var(--sp-8); } .hero-actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-10); } .hero-stats { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .hero-stat { display: inline-flex; align-items: center; gap: var(--sp-2); background: rgba(0,229,255,0.07); border: 1px solid rgba(0,229,255,0.15); padding: 6px 14px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 0.8125rem; white-space: nowrap; } .hero-stat strong { color: var(--cyan-text); font-weight: 600; } .hero-stat span { color: var(--text-low); letter-spacing: 0.04em; } /* Metric panels — bottom right of hero */ .hero-panels { position: absolute; bottom: var(--sp-20); right: var(--container-pad); display: flex; flex-direction: column; gap: var(--sp-3); z-index: 1; } /* --- Logo Strip ---------------------------------------------------- */ .logo-strip { padding: var(--sp-12) 0; border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); } .logo-strip-inner { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; } .logo-strip-label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-med); width: 100%; text-align: center; margin-bottom: var(--sp-6); } .logo-pill { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 8px 20px; border: 1px solid rgba(0,229,255,0.18); border-radius: var(--r-pill); font-size: 0.875rem; font-weight: 500; color: var(--text-med); letter-spacing: -0.01em; transition: color var(--dur-base), border-color var(--dur-base), background var(--dur-base); } .logo-pill:hover { color: var(--text-high); border-color: var(--glass-border-h); background: rgba(0,229,255,0.05); } .logo-pill svg { opacity: 0.60; } /* --- Feature Bento Grid -------------------------------------------- */ .bento-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-4); } .bento-card { /* inherits .glass */ position: relative; padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); overflow: hidden; } .bento-card--wide { grid-column: span 8; } .bento-card--md { grid-column: span 4; } .bento-card--full { grid-column: span 12; } .bento-card:hover { transform: translateY(-4px); } .bento-visual { height: 140px; border-radius: var(--r-md); background: rgba(0,229,255,0.04); border: 1px solid var(--glass-border); overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .bento-visual svg { width: 100%; height: 100%; } .bento-badge { display: inline-flex; align-items: baseline; gap: 4px; background: var(--cyan-bg); border: 1px solid rgba(0,229,255,0.2); padding: 3px 10px; border-radius: var(--r-pill); width: fit-content; } .bento-badge-val { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 600; color: var(--cyan-text); } .bento-badge-lbl { font-size: 0.6875rem; color: var(--text-low); text-transform: uppercase; letter-spacing: 0.06em; } .bento-card h3 { font-size: 1rem; color: var(--text-high); } .bento-card p { font-size: 0.9rem; color: var(--text-med); line-height: 1.65; } /* --- How It Works -------------------------------------------------- */ .steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); position: relative; } .steps-row::before { content: ''; position: absolute; top: 28px; left: calc(33.33% / 2); right: calc(33.33% / 2); height: 1px; background: linear-gradient(90deg, transparent, var(--glass-border-h), transparent); } .step-card { /* inherits .glass */ padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); } .step-card:hover { transform: translateY(-4px); } .step-num { font-family: var(--font-mono); font-size: 2rem; font-weight: 600; color: var(--cyan-text); opacity: 0.55; line-height: 1; } .step-tag { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-low); } .step-card h3 { font-size: 1rem; color: var(--text-high); } .step-card p { font-size: 0.9rem; color: var(--text-med); line-height: 1.7; } /* --- CTA Banner ---------------------------------------------------- */ .cta-banner-wrap { /* inherits .glass */ padding: var(--sp-16) var(--sp-12); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); border-left: 3px solid var(--cyan); border-radius: var(--r-xl); } .cta-banner-copy h2 { font-size: clamp(1.375rem, 2.5vw, 1.875rem); margin-bottom: var(--sp-2); } .cta-banner-copy p { font-size: 1rem; color: var(--text-med); } .cta-banner-actions { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; } /* --- Footer -------------------------------------------------------- */ .site-footer { padding: var(--sp-20) 0 var(--sp-8); border-top: 1px solid var(--glass-border); position: relative; z-index: 1; } .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-12); margin-bottom: var(--sp-16); } .footer-brand-mark { display: flex; align-items: center; gap: var(--sp-2); font-size: 1.125rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text-high); margin-bottom: var(--sp-4); } .footer-tagline { font-size: 0.9375rem; color: var(--text-low); line-height: 1.75; max-width: 280px; margin-bottom: var(--sp-6); } .footer-col-title { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-low); margin-bottom: var(--sp-4); } .footer-links { display: flex; flex-direction: column; gap: var(--sp-3); } .footer-links a { font-size: 0.9375rem; color: var(--text-med); transition: color var(--dur-base); } .footer-links a:hover { color: var(--text-high); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--sp-8); border-top: 1px solid var(--glass-border); gap: var(--sp-4); flex-wrap: wrap; } .footer-bottom p, .footer-bottom a { font-size: 0.875rem; color: var(--text-low); } .footer-bottom a:hover { color: var(--text-med); } .footer-legal { display: flex; gap: var(--sp-6); } /* --- Scroll animations --------------------------------------------- */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal[data-delay="1"] { transition-delay: 80ms; } .reveal[data-delay="2"] { transition-delay: 160ms; } .reveal[data-delay="3"] { transition-delay: 240ms; } .reveal[data-delay="4"] { transition-delay: 320ms; } .reveal[data-delay="5"] { transition-delay: 400ms; } .reveal[data-delay="6"] { transition-delay: 480ms; } /* --- Accessibility ------------------------------------------------- */ .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; } :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } } /* --- Responsive ---------------------------------------------------- */ @media (max-width: 1100px) { .bento-card--wide { grid-column: span 12; } .bento-card--md { grid-column: span 6; } } @media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; gap: var(--sp-10); } .steps-row { grid-template-columns: 1fr; } .steps-row::before { display: none; } .hero-panels { display: none; } .cta-banner-wrap { flex-direction: column; text-align: center; padding: var(--sp-10) var(--sp-8); } } @media (max-width: 640px) { .bento-card--md { grid-column: span 12; } .bento-card--wide { grid-column: span 12; } .footer-top { grid-template-columns: 1fr; } .nav-center { display: none; } .nav-toggle { display: flex; } } /* ================================================================ SVG GRAPH THEMING — light mode CSS presentation properties override SVG presentation attributes per spec, so these rules correctly adapt inline graph SVGs for the light theme without touching SVG markup. ================================================================ */ /* -- Hero integration graph — edges ------------------------------ */ html[data-theme="light"] .hero-graph line { stroke: rgba(0, 100, 120, 0.38); } html[data-theme="light"] .hero-graph line[stroke*="245,166,35"] { stroke: rgba(155, 85, 0, 0.55); } /* -- Hero graph — node box / circle backgrounds ------------------ */ html[data-theme="light"] .hero-graph rect[fill*="7,19,42"], html[data-theme="light"] .hero-graph circle[fill*="7,19,42"] { fill: rgba(218, 238, 248, 0.92); } /* -- Hero graph — node borders ----------------------------------- */ html[data-theme="light"] .hero-graph rect[stroke*="0,229,255"], html[data-theme="light"] .hero-graph circle[stroke*="0,229,255"] { stroke: rgba(0, 100, 120, 0.55); } html[data-theme="light"] .hero-graph rect[stroke*="245,166,35"], html[data-theme="light"] .hero-graph circle[stroke*="245,166,35"] { stroke: rgba(155, 85, 0, 0.65); } html[data-theme="light"] .hero-graph circle[stroke*="74,254,138"] { stroke: rgba(20, 125, 60, 0.65); } /* -- Hero graph — node text labels ------------------------------- */ html[data-theme="light"] .hero-graph text { fill: rgba(0, 55, 75, 0.90); } /* -- Hero graph — flow particles --------------------------------- */ html[data-theme="light"] .hero-graph circle[r="3.5"], html[data-theme="light"] .hero-graph circle[r="4"], html[data-theme="light"] .hero-graph circle[r="5"] { fill: rgba(0, 110, 130, 0.90); } /* -- Hero graph — arrowhead markers ------------------------------ */ html[data-theme="light"] .hero-graph polygon { fill: rgba(0, 100, 120, 0.55); } /* -- Bento card SVGs — dark node backgrounds --------------------- */ html[data-theme="light"] .bento-visual rect[fill*="7,19,42"], html[data-theme="light"] .bento-visual circle[fill*="7,19,42"] { fill: rgba(218, 238, 248, 0.88); } /* -- Bento card SVGs — borders ----------------------------------- */ html[data-theme="light"] .bento-visual rect[stroke*="0,229,255"], html[data-theme="light"] .bento-visual circle[stroke*="0,229,255"] { stroke: rgba(0, 100, 120, 0.50); } /* -- Bento card SVGs — lines ------------------------------------- */ html[data-theme="light"] .bento-visual line { stroke: rgba(0, 100, 120, 0.40); } /* -- Bento card SVGs — text -------------------------------------- */ html[data-theme="light"] .bento-visual text { fill: rgba(0, 55, 75, 0.90); } /* -- Bento card SVGs — particles --------------------------------- */ html[data-theme="light"] .bento-visual circle[r="3.5"], html[data-theme="light"] .bento-visual circle[r="4"], html[data-theme="light"] .bento-visual circle[r="5"] { fill: rgba(0, 110, 130, 0.90); }