/* ============================================
ScaleVoyager — Design Tokens
Derived from official logo branding.
Always import this first. Never hardcode
colors or fonts inline anywhere.
============================================ */
:root {
/* ── Brand colors (from logo) ─────────────── */
--brand-blue: #5A2BDD; /* primary accent — logo purple */
--brand-blue-dark: #4620B8; /* hover / pressed state */
--brand-blue-light: #EDE8FA; /* tinted backgrounds, badges */
/* ── Neutrals ─────────────────────────────── */
--white: #FFFFFF;
--surface: #DEE2EE; /* page background */
--surface-card: #FFFFFF; /* card / panel background */
--ink: #1E1F24; /* primary text — near-black from dark logo */
--ink-secondary: #5A5C6B; /* secondary / caption text */
--ink-muted: #9496A1; /* placeholders, disabled */
--border: #E2E4EE; /* dividers, card borders */
--border-dark: #2E3040; /* borders on dark sections */
/* ── Dark section (matches dark logo bg) ─── */
--dark-bg: #1C1D22; /* section bg for dark panels */
--dark-surface: #25262D; /* cards inside dark sections */
/* ── Typography ───────────────────────────── */
--font-display: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
--font-body: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
/* Note: logo wordmark uses a geometric sans close to Plus Jakarta Sans.
Load via Google Fonts:
https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap */
/* ── Type scale ───────────────────────────── */
--text-xs: 11px;
--text-sm: 13px;
--text-base: 15px;
--text-md: 17px;
--text-lg: 20px;
--text-xl: 28px;
--text-2xl: 36px;
--text-3xl: 48px;
--text-hero: clamp(40px, 6vw, 68px);
/* ── Spacing ──────────────────────────────── */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* ── Border radius ────────────────────────── */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-pill: 100px;
/* ── Shadows ──────────────────────────────── */
--shadow-sm: 0 1px 4px rgba(30, 31, 36, 0.06);
--shadow-md: 0 4px 16px rgba(30, 31, 36, 0.08);
--shadow-card: 0 8px 32px rgba(30, 31, 36, 0.10);
--shadow-blue: 0 4px 20px rgba(90, 43, 221, 0.22);
--shadow-blue-hover: 0 8px 32px rgba(90, 43, 221, 0.32);
/* ── Transitions ──────────────────────────── */
--ease-fast: 0.15s ease;
--ease-base: 0.22s ease;
--ease-slow: 0.35s ease;
}
/* ============================================
Google Fonts — paste in every HTML
============================================
*/
/* ============================================
Base reset
============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
font-size: var(--text-base);
background: var(--surface);
color: var(--ink);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* ============================================
Logo usage rules
============================================
- Light backgrounds → use assets/images/logo-light.png (dark ink wordmark)
- Dark backgrounds → use assets/images/logo-dark.png (light wordmark)
- Icon only → use assets/images/logo-icon.svg (any size, scales perfectly)
- Minimum width: 120px for full logo, 32px for icon only
- Never recolor or stretch the logo
*/
/* ============================================
Shared UI components
============================================ */
/* Section label */
.label {
display: inline-block;
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--brand-blue);
margin-bottom: var(--space-4);
}
/* Section heading */
.heading {
font-family: var(--font-display);
font-size: clamp(26px, 3.5vw, 40px);
font-weight: 800;
letter-spacing: -0.5px;
line-height: 1.15;
color: var(--ink);
}
.heading-hero {
font-size: var(--text-hero);
font-weight: 800;
letter-spacing: -1.5px;
line-height: 1.06;
}
.heading-light { color: #FFFFFF; }
/* Badge */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: var(--brand-blue-light);
color: var(--brand-blue);
font-size: var(--text-xs);
font-weight: 600;
padding: 5px 12px;
border-radius: var(--radius-pill);
letter-spacing: 0.05em;
text-transform: uppercase;
}
.badge::before {
content: '';
width: 5px; height: 5px;
background: var(--brand-blue);
border-radius: 50%;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 13px 28px;
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: 600;
cursor: pointer;
border: none;
text-decoration: none;
transition: transform var(--ease-fast), background var(--ease-base), box-shadow var(--ease-base);
}
.btn-blue {
background: var(--brand-blue);
color: #fff;
box-shadow: var(--shadow-blue);
}
.btn-blue:hover {
background: var(--brand-blue-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-blue-hover);
}
.btn-dark {
background: var(--ink);
color: #fff;
}
.btn-dark:hover {
background: var(--brand-blue);
transform: translateY(-2px);
}
.btn-outline {
background: transparent;
color: var(--ink);
border: 1.5px solid var(--border);
}
.btn-outline:hover {
border-color: var(--brand-blue);
color: var(--brand-blue);
}
.btn-ghost {
background: transparent;
color: var(--ink-secondary);
padding-left: 0; padding-right: 0;
}
.btn-ghost:hover { color: var(--ink); }
.btn-lg { padding: 16px 36px; font-size: var(--text-md); }
/* Arrow */
.arrow { display: inline-block; transition: transform var(--ease-base); }
.btn:hover .arrow { transform: translateX(4px); }
/* Card */
.card {
background: var(--surface-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-8);
transition: transform var(--ease-base), box-shadow var(--ease-base);
}
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card);
}
.card-dark {
background: var(--dark-surface);
border-color: var(--border-dark);
}
/* ============================================
Nav — shared across all pages
============================================ */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 18px 48px;
background: rgba(222, 226, 238, 0.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border);
}
.nav-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.nav-logo img { height: 36px; width: auto; }
.nav-logo span { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.3px; }
.nav-links { display: flex; align-items: center; gap: var(--space-8); list-style: none; }
.nav-links a {
font-size: var(--text-sm);
font-weight: 500;
color: var(--ink-secondary);
transition: color var(--ease-base);
}
.nav-links a:hover { color: var(--ink); }
/* ============================================
Footer — shared across all pages
============================================ */
.footer {
padding: var(--space-8) var(--space-12);
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: var(--space-4);
background: var(--surface);
}
.footer-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.footer-logo img { height: 28px; width: auto; }
.footer-logo span { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -0.3px; }
.footer p { font-size: var(--text-sm); color: var(--ink-muted); }
/* ============================================
Animations
============================================ */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Usage: animation: fadeUp 0.55s 0.1s ease both; */
/* ============================================
Responsive
============================================ */
@media (max-width: 768px) {
.nav { padding: 16px 20px; }
.nav-links li:not(:last-child) { display: none; }
.footer { padding: var(--space-6) var(--space-5); }
}