/* ============================================================ AERO NIGHT RUN 2026 — DESIGN TOKENS Tokens for type, color, spacing, radius, shadows, motion. Stage accents are CSS variables on data-stage, so a single data-stage="campinas" on repaints the whole UI. ============================================================ */ /* --- FONTS --- */ @font-face { font-family: "Roboto"; src: url("fonts/Roboto-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto"; src: url("fonts/Roboto-Medium.ttf") format("truetype"); font-weight: 500; } @font-face { font-family: "Roboto"; src: url("fonts/Roboto-Bold.ttf") format("truetype"); font-weight: 700; } @font-face { font-family: "Roboto"; src: url("fonts/Roboto-ExtraBold.ttf") format("truetype"); font-weight: 800; } @font-face { font-family: "Roboto"; src: url("fonts/Roboto-Light.ttf") format("truetype"); font-weight: 300; } @font-face { font-family: "Roboto"; src: url("fonts/Roboto-Thin.ttf") format("truetype"); font-weight: 100; } @font-face { font-family: "LED Dot-Matrix"; src: url("fonts/LED-Dot-Matrix.ttf") format("truetype"); font-display: swap; } :root { /* ---------- COLOR — Night sky frame ---------- */ --night-900: #050a17; /* deepest pre-dawn */ --night-800: #07111e; /* primary canvas */ --night-700: #0c1a30; /* card surface on night */ --night-600: #122541; /* hairline / divider raised */ --night-500: #1c3358; /* secondary fill on dark */ --night-400: #2a4a7a; /* tertiary / placeholder */ /* ---------- COLOR — Light surfaces (rare) ---------- */ --paper-50: #ffffff; /* boarding-pass card */ --paper-100: #f4f6fb; /* secondary paper */ --paper-200: #e3e8f1; /* paper hairline */ /* ---------- COLOR — Foreground ---------- */ --fg-on-night: #ffffff; --fg-on-night-2: rgba(255, 255, 255, 0.72); --fg-on-night-3: rgba(255, 255, 255, 0.48); --fg-on-paper: #07111e; --fg-on-paper-2: rgba(7, 17, 30, 0.68); --line-on-night: rgba(255, 255, 255, 0.10); --line-on-paper: rgba(7, 17, 30, 0.10); /* ---------- COLOR — Heritage anchors ---------- */ --aero-navy: #0e2a5c; /* the 2025 t-shirt blue */ --aero-orange: #ff7a18; /* runway amber, 2025 hot */ --aero-orange-soft: #ffb066; --aero-white: #ffffff; /* ---------- COLOR — Stage accents (defaults) ---------- */ --stage-jundiai: #0e2a5c; /* navy / approach blue */ --stage-jundiai-glow: rgba(58, 110, 220, 0.55); --stage-campinas: #ff7a18; /* runway amber */ --stage-campinas-glow: rgba(255, 122, 24, 0.55); --stage-sorocaba: #1fbf75; /* beacon green */ --stage-sorocaba-glow: rgba(31, 191, 117, 0.55); /* ---------- COLOR — Active stage (defaults to circuit) ---------- */ --accent: var(--aero-orange); --accent-glow: var(--stage-campinas-glow); --accent-ink: var(--night-900); /* text on accent */ /* ---------- COLOR — Semantic ---------- */ --success: #1fbf75; --warning: #ffb800; --danger: #ff5247; --info: #4d8cff; /* ---------- TYPE — Families ---------- */ --font-display: "Roboto", "Helvetica Neue", Arial, sans-serif; --font-body: "Roboto", "Helvetica Neue", Arial, sans-serif; --font-mono: "LED Dot-Matrix", "JetBrains Mono", ui-monospace, monospace; /* ---------- TYPE — Scale ---------- */ --fs-12: 0.75rem; /* metadata */ --fs-14: 0.875rem; /* small */ --fs-16: 1rem; /* body */ --fs-18: 1.125rem; /* lead body */ --fs-22: 1.375rem; /* sub-headline */ --fs-28: 1.75rem; /* h3 */ --fs-36: 2.25rem; /* h2 */ --fs-48: 3rem; /* h1 */ --fs-72: 4.5rem; /* hero */ --fs-120: 7.5rem; /* mega / display */ /* ---------- TYPE — Tracking ---------- */ --tr-tight: -0.02em; --tr-normal: 0; --tr-wide: 0.04em; --tr-wider: 0.12em; /* runway-sign tracking */ --tr-widest: 0.24em; /* eyebrow / kicker */ /* ---------- TYPE — Line height ---------- */ --lh-display: 0.95; --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.55; /* ---------- TYPE — Weights ---------- */ --fw-thin: 100; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-black: 800; /* ---------- SPACING ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* ---------- RADIUS ---------- */ --r-0: 0; --r-sm: 2px; /* default — sharp, technical */ --r-md: 4px; /* photo cards */ --r-lg: 8px; /* rare, used for soft surfaces */ --r-pill: 9999px; /* chips, pills, the only round things */ /* ---------- SHADOWS / ELEVATION ---------- */ --shadow-paper-1: 0 4px 12px rgba(7, 17, 34, 0.10); --shadow-paper-2: 0 8px 24px rgba(7, 17, 34, 0.18); /* etched-into-night: 1px highlight top, 1px shadow bottom */ --etch-night: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.40); --glow-accent-sm: 0 0 12px var(--accent-glow); --glow-accent: 0 0 24px var(--accent-glow); --glow-accent-lg: 0 0 64px var(--accent-glow); /* ---------- MOTION ---------- */ --ease-glide: cubic-bezier(0.22, 1, 0.36, 1); /* default: plane settling */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --dur-fast: 180ms; --dur-base: 400ms; --dur-slow: 600ms; --dur-hero: 1200ms; } /* ============================================================ STAGE THEMES — set on ============================================================ */ [data-stage="jundiai"] { --accent: #3a6edc; --accent-glow: rgba(58, 110, 220, 0.55); --accent-ink: #ffffff; } [data-stage="campinas"] { --accent: var(--stage-campinas); --accent-glow: var(--stage-campinas-glow); --accent-ink: var(--night-900); } [data-stage="sorocaba"] { --accent: var(--stage-sorocaba); --accent-glow: var(--stage-sorocaba-glow); --accent-ink: var(--night-900); } /* ============================================================ SEMANTIC ELEMENTS ============================================================ */ .h-mega { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-120); line-height: var(--lh-display); letter-spacing: var(--tr-tight); text-transform: uppercase; } .h1 { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-72); line-height: var(--lh-display); letter-spacing: var(--tr-tight); text-transform: uppercase; } .h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-48); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); text-transform: uppercase; } .h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-28); line-height: var(--lh-snug); text-transform: uppercase; letter-spacing: var(--tr-wide); } .eyebrow { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-12); line-height: 1; letter-spacing: var(--tr-widest); text-transform: uppercase; color: var(--accent); } .lead { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-22); line-height: var(--lh-snug); color: var(--fg-on-night-2); } .body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-16); line-height: var(--lh-normal); } .meta { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-12); letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--fg-on-night-3); } .led { font-family: var(--font-mono); letter-spacing: 0.05em; color: var(--accent); text-shadow: 0 0 8px var(--accent-glow); } /* ============================================================ PRIMITIVES ============================================================ */ .btn { display: inline-flex; align-items: center; gap: var(--s-2); height: 48px; padding: 0 var(--s-5); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-14); letter-spacing: var(--tr-wider); text-transform: uppercase; border: 0; border-radius: var(--r-pill); cursor: pointer; transition: transform var(--dur-fast) var(--ease-glide), box-shadow var(--dur-fast) var(--ease-glide), background var(--dur-fast) var(--ease-glide); } .btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--glow-accent-sm); } .btn--primary:hover { box-shadow: var(--glow-accent); filter: brightness(1.06); } .btn--primary:active { transform: scale(0.98); box-shadow: none; } .btn--ghost { background: transparent; color: var(--fg-on-night); border: 1px solid var(--line-on-night); } .btn--ghost:hover { background: rgba(255,255,255,0.06); } .runway-dashes { display: flex; gap: 6px; align-items: center; } .runway-dashes::before, .runway-dashes::after { content: ""; flex: 1; height: 2px; background: repeating-linear-gradient( to right, var(--fg-on-night-3) 0 12px, transparent 12px 20px ); } .boarding-card { background: var(--paper-50); color: var(--fg-on-paper); border-radius: var(--r-sm); box-shadow: var(--shadow-paper-2); position: relative; }