/* =========================================================================== NordBus - Design tokens Single source of truth for colors, type, spacing, radii, shadows, motion. Anchored to the 2025 brand identity (Brandbook.pdf, Asteroid studio). =========================================================================== */ /* Fonts -------------------------------------------------------------------- */ /* Brand-supplied TTFs. Funnel Display ships Regular + Bold only - heavier */ /* weights (700/800) map to Bold so display copy still reads emphatic. */ @font-face { font-family: "Funnel Display"; src: url("fonts/FunnelDisplay-Regular.ttf") format("truetype"); font-weight: 400 500; font-style: normal; font-display: swap; } @font-face { font-family: "Funnel Display"; src: url("fonts/FunnelDisplay-Bold.ttf") format("truetype"); font-weight: 600 800; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("fonts/Inter_18pt-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("fonts/Inter_18pt-Regular.ttf") format("truetype"); font-weight: 400 500; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("fonts/Inter_18pt-Bold.ttf") format("truetype"); font-weight: 600 800; font-style: normal; font-display: swap; } :root { /* ── Brand palette ─────────────────────────────────────────────────────── */ /* Two anchors. Both come from the brandbook with Pantone + vinyl + thread refs. */ --nb-violet: #6E2297; /* Cēli violetā · Pantone 520C/2715 · primary accent */ --nb-violet-deep: #290059; /* Purple-blue · dark surface fill (CTA bg, banners) */ --nb-violet-light: #C495E5; /* Brand violet, brightened for on-ink/dark grounds (~8:1 vs ink) */ /* NEW · headline navy ─ the actual color of the wordmark in the logo. Use this for h1/h2/h3 text. The brand "blue" sits much closer to near-black navy than to the violet-deep purple it was paired with. */ --nb-navy: #0E1A33; --nb-navy-soft: #1B264A; /* Neutrals (warm-shifted on purpose) */ --nb-white: #FFFFFF; /* pure white, only used as INVERTED type on dark grounds */ --nb-sugar: #EDEBE0; /* Cukura baltā · canonical brand background */ --nb-sugar-2: #E5E2D5; /* one step deeper for cards on sugar */ --nb-lavender: #C3B2BC; /* secondary in patterns, dividers, ghost type */ --nb-ink: #17121C; /* Soft black · surface dark / inverted ground */ /* Wider editorial palette (use sparingly, one or two at a time) */ --nb-peach: #E2AAAA; --nb-mustard: #E7C472; --nb-mint: #8EE3C2; --nb-wine: #782233; --nb-brown: #7C5927; --nb-forest: #193026; --nb-magenta: #C0426E; --nb-orange: #DB9237; --nb-teal: #35B582; /* ── Semantic colors ───────────────────────────────────────────────────── */ /* Foregrounds */ --fg-1: var(--nb-navy); /* primary text - navy, not purple */ --fg-heading: var(--nb-navy); /* big headlines (h1/h2/h3) */ --fg-2: rgba(23, 18, 28, 0.72); /* secondary text */ --fg-3: rgba(23, 18, 28, 0.50); /* tertiary / hints */ --fg-inverse: var(--nb-white); /* on dark grounds */ --fg-on-violet: var(--nb-sugar); /* on violet ground */ --fg-brand: var(--nb-violet); /* brand accent text */ --fg-link: var(--nb-violet); --fg-link-hover: var(--nb-violet-deep); /* Backgrounds */ --bg-page: var(--nb-sugar); --bg-surface: #FFFFFF; /* a card laid on the sugar page */ --bg-surface-2: var(--nb-sugar-2); --bg-dark: var(--nb-ink); --bg-brand: var(--nb-violet); --bg-brand-deep: var(--nb-violet-deep); /* Borders */ --border-1: rgba(23, 18, 28, 0.10); /* hairline */ --border-2: rgba(23, 18, 28, 0.18); /* inputs, dividers */ --border-brand: rgba(110, 34, 151, 0.30); --border-focus: var(--nb-violet); /* States */ --state-hover-overlay: rgba(23, 18, 28, 0.06); --state-press-overlay: rgba(23, 18, 28, 0.10); --state-success: var(--nb-teal); --state-warning: var(--nb-orange); --state-danger: var(--nb-wine); /* ── Type scale ────────────────────────────────────────────────────────── */ --font-display: "Funnel Display", "Funnel Sans", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, monospace; /* Semantic type roles. Pair font-size with line-height + tracking. */ --type-display-1: 800 96px/1.02 var(--font-display); /* hero */ --type-display-2: 800 72px/1.05 var(--font-display); --type-display-3: 800 56px/1.06 var(--font-display); --type-h1: 700 48px/1.08 var(--font-display); --type-h2: 700 40px/1.10 var(--font-display); --type-h3: 600 32px/1.15 var(--font-display); --type-h4: 600 24px/1.25 var(--font-display); --type-h5: 600 20px/1.30 var(--font-display); --type-eyebrow: 600 13px/1.20 var(--font-body); /* uppercase, tracked */ --type-body-lg: 400 18px/1.55 var(--font-body); --type-body: 400 16px/1.60 var(--font-body); --type-body-sm: 400 14px/1.55 var(--font-body); --type-caption: 500 12px/1.45 var(--font-body); --type-label: 600 14px/1.30 var(--font-body); --type-button: 600 16px/1.20 var(--font-body); --type-watermark: 600 14px/1.00 var(--font-body); /* "N O R D B U S" chrome */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-loose: 0.06em; --tracking-watermark: 0.4em; /* letterspaced wordmark */ /* ── Spacing ───────────────────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --gutter: 32px; --gutter-mobile: 16px; --section-y: 96px; --section-y-mobile: 56px; --container-max: 1280px; /* ── Radii ─────────────────────────────────────────────────────────────── */ --radius-1: 4px; --radius-2: 8px; /* form inputs */ --radius-3: 12px; /* small cards */ --radius-4: 16px; /* cards, panels */ --radius-5: 24px; /* hero modules */ --radius-pill: 999px; /* chips, icon-only */ /* ── Shadows ───────────────────────────────────────────────────────────── */ /* The brand shadow has a hint of violet in the cast. */ --shadow-1: 0 1px 2px rgba(23, 18, 28, 0.06); --shadow-2: 0 2px 8px rgba(23, 18, 28, 0.06), 0 16px 40px -16px rgba(41, 0, 89, 0.18); --shadow-3: 0 4px 16px rgba(23, 18, 28, 0.08), 0 32px 64px -24px rgba(41, 0, 89, 0.28); --shadow-focus: 0 0 0 3px rgba(110, 34, 151, 0.25); /* ── Motion ────────────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-hover: 180ms; --dur-layout: 320ms; --dur-hero: 540ms; } /* ── Base reset + semantic element styles ─────────────────────────────────── */ html { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { margin: 0; font: var(--type-body); color: var(--fg-1); } h1 { font: var(--type-h1); letter-spacing: var(--tracking-tight); margin: 0; } h2 { font: var(--type-h2); letter-spacing: var(--tracking-tight); margin: 0; } h3 { font: var(--type-h3); margin: 0; } h4 { font: var(--type-h4); margin: 0; } h5 { font: var(--type-h5); margin: 0; } p { font: var(--type-body); margin: 0; } small { font: var(--type-caption); color: var(--fg-2); } .eyebrow { font: var(--type-eyebrow); letter-spacing: var(--tracking-loose); text-transform: uppercase; color: var(--fg-brand); } .display-1 { font: var(--type-display-1); letter-spacing: var(--tracking-tight); } .display-2 { font: var(--type-display-2); letter-spacing: var(--tracking-tight); } .display-3 { font: var(--type-display-3); letter-spacing: var(--tracking-tight); } .watermark { font: var(--type-watermark); letter-spacing: var(--tracking-watermark); text-transform: uppercase; color: var(--fg-2); } a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-hover) var(--ease-out); } a:hover { color: var(--fg-link-hover); }