/* ========================================================= BordaXpress Design System — Colors & Type --------------------------------------------------------- The brand expresses two distinct visual modes: 1. Light/commerce surface — used on the marketing site and catalog. Off-white backgrounds with subtle blue tint, deep-navy display type, navy CTAs. 2. Dark/brand surface — used on social feeds, hero banners, payment cards. Saturated navy with curved lighter-blue ribbon gradients, white type. Both modes share the same navy primary and Bebas-style condensed display face derived from the wordmark. ========================================================= */ :root { /* ---------- Primary navy (from logo, ~#1A2A5E) ---------- */ --bx-navy-950: #0a1230; /* Backgrounds — darkest curve in feed */ --bx-navy-900: #0f1a3f; /* Default dark surface */ --bx-navy-800: #14245a; /* Logo body */ --bx-navy-700: #1a2a5e; /* PRIMARY — wordmark, CTA fill */ --bx-navy-600: #243a78; /* Hover on primary */ --bx-navy-500: #2f4a92; /* Mid accent, ribbon highlights */ --bx-navy-400: #4a66b0; /* Disabled / quiet accent */ /* ---------- Brand blue accents ---------- */ --bx-blue-500: #2a6cf0; /* Subtle ribbon glow on dark surface */ --bx-blue-300: #6a8fd6; /* Soft links / secondary text on dark */ /* ---------- Off-white / surface tints ---------- */ --bx-bg-tint: #eef1fa; /* Hero pale-blue wash on light pages */ --bx-bg: #f6f7fb; /* Default light surface */ --bx-paper: #ffffff; /* Cards / paper */ --bx-line: #e3e6ef; /* 1px hairline borders */ --bx-line-2: #c9cfe0; /* Stronger divider */ /* ---------- Neutrals (cool-tinted, never warm) ---------- */ --bx-ink-1: #0d1430; /* Primary text on light */ --bx-ink-2: #2b3454; /* Body text on light */ --bx-ink-3: #5a6486; /* Muted / metadata */ --bx-ink-4: #8b93ad; /* Placeholder / disabled */ --bx-ink-5: #b9bfd0; /* Iconography quiet */ /* ---------- On-dark text ---------- */ --bx-on-dark-1: #ffffff; --bx-on-dark-2: #cdd5ee; --bx-on-dark-3: #8a96bf; /* ---------- Semantic ---------- */ --bx-success: #2a8a5f; --bx-warning: #c98415; --bx-danger: #c0392b; --bx-info: var(--bx-navy-700); /* Brand gradient (used sparingly — feed banners) */ --bx-gradient-ribbon: radial-gradient(120% 80% at 100% 0%, #1f3a8a 0%, transparent 55%), radial-gradient(120% 80% at 0% 100%, #14245a 0%, transparent 55%), linear-gradient(135deg, #0a1230 0%, #14245a 50%, #1a2a5e 100%); /* ---------- Type families ---------- */ /* Display: condensed industrial sans, all-caps, used for the wordmark "BORDAXPRESS" and feed headlines. Source font appears custom-drawn; we approximate with Bebas Neue (Google Fonts) — flag for replacement. */ --bx-font-display: "Bebas Neue", "Oswald", "Impact", system-ui, sans-serif; /* Headlines on the marketing site read as a humanist geometric sans (close to Manrope / Lexend / Inter Tight, ExtraBold). Manrope is the closest free match. */ --bx-font-heading: "Manrope", "Inter Tight", system-ui, -apple-system, sans-serif; /* Body / UI — clean neutral sans */ --bx-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Mono for SKUs, amounts, technical data */ --bx-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---------- Type scale (rem at 16px base) ---------- */ --bx-fs-display-xl: 4.5rem; /* 72 — feed banner headlines */ --bx-fs-display-l: 3.5rem; /* 56 — hero h1 */ --bx-fs-display-m: 2.75rem; /* 44 */ --bx-fs-h1: 2.25rem; /* 36 */ --bx-fs-h2: 1.75rem; /* 28 */ --bx-fs-h3: 1.375rem; /* 22 */ --bx-fs-h4: 1.125rem; /* 18 */ --bx-fs-body: 1rem; /* 16 */ --bx-fs-sm: 0.875rem; /* 14 */ --bx-fs-xs: 0.75rem; /* 12 */ --bx-fs-eyebrow: 0.75rem; /* 12 — letter-spaced, all-caps */ /* ---------- Type tokens ---------- */ --bx-lh-tight: 1.05; --bx-lh-snug: 1.2; --bx-lh-body: 1.55; --bx-lh-loose: 1.75; --bx-tracking-eyebrow: 0.18em; --bx-tracking-display: 0.02em; /* ---------- Spacing ---------- */ --bx-sp-1: 4px; --bx-sp-2: 8px; --bx-sp-3: 12px; --bx-sp-4: 16px; --bx-sp-5: 20px; --bx-sp-6: 24px; --bx-sp-8: 32px; --bx-sp-10: 40px; --bx-sp-12: 48px; --bx-sp-16: 64px; --bx-sp-20: 80px; --bx-sp-24: 96px; /* ---------- Radii ---------- */ --bx-r-sm: 6px; /* small chips, inputs */ --bx-r-md: 10px; /* cards default */ --bx-r-lg: 14px; /* surfaces, modal */ --bx-r-xl: 20px; /* hero card */ --bx-r-pill: 999px; /* tag pills, capsules */ /* ---------- Shadow / elevation ---------- */ --bx-shadow-1: 0 1px 2px rgba(13, 20, 48, 0.05), 0 1px 1px rgba(13, 20, 48, 0.04); --bx-shadow-2: 0 4px 14px -4px rgba(13, 20, 48, 0.10), 0 2px 4px rgba(13, 20, 48, 0.05); --bx-shadow-3: 0 18px 40px -16px rgba(13, 20, 48, 0.22), 0 6px 12px -6px rgba(13, 20, 48, 0.10); --bx-shadow-glow: 0 0 0 4px rgba(26, 42, 94, 0.12); /* ---------- Motion ---------- */ --bx-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); --bx-ease-emph: cubic-bezier(0.16, 1, 0.3, 1); --bx-dur-fast: 120ms; --bx-dur-medium: 220ms; --bx-dur-slow: 360ms; } /* ========================================================= Dark mode overrides — toggled via .dark on ========================================================= */ html.dark { --bx-bg: #0a1230; --bx-bg-tint: #14245a; --bx-paper: #0f1a3f; --bx-line: #1f2a52; --bx-line-2: #2c3868; --bx-ink-1: #f1f4ff; --bx-ink-2: #cdd5ee; --bx-ink-3: #8a96bf; --bx-ink-4: #5a6486; --bx-ink-5: #3e4870; --bx-navy-700: #4a66b0; --bx-navy-800: #6a8fd6; --bx-success: #5fd49a; --bx-danger: #e68f86; --bx-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.25); --bx-shadow-2: 0 4px 14px -4px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3); --bx-shadow-3: 0 18px 40px -16px rgba(0, 0, 0, 0.6), 0 6px 12px -6px rgba(0, 0, 0, 0.3); } /* ========================================================= Semantic element styles (apply with `bx-` class or reset on raw elements when using this stylesheet). ========================================================= */ .bx-eyebrow { font-family: var(--bx-font-body); font-size: var(--bx-fs-eyebrow); letter-spacing: var(--bx-tracking-eyebrow); text-transform: uppercase; color: var(--bx-ink-3); font-weight: 600; } .bx-display-xl, .bx-display-l, .bx-display-m { font-family: var(--bx-font-display); letter-spacing: var(--bx-tracking-display); text-transform: uppercase; line-height: var(--bx-lh-tight); color: var(--bx-ink-1); font-weight: 400; /* Bebas-style is naturally heavy */ } .bx-display-xl { font-size: var(--bx-fs-display-xl); } .bx-display-l { font-size: var(--bx-fs-display-l); } .bx-display-m { font-size: var(--bx-fs-display-m); } .bx-h1, .bx-h2, .bx-h3, .bx-h4 { font-family: var(--bx-font-heading); color: var(--bx-ink-1); line-height: var(--bx-lh-snug); letter-spacing: -0.01em; text-wrap: pretty; } .bx-h1 { font-size: var(--bx-fs-h1); font-weight: 800; } .bx-h2 { font-size: var(--bx-fs-h2); font-weight: 800; } .bx-h3 { font-size: var(--bx-fs-h3); font-weight: 700; } .bx-h4 { font-size: var(--bx-fs-h4); font-weight: 700; } .bx-body { font-family: var(--bx-font-body); font-size: var(--bx-fs-body); line-height: var(--bx-lh-body); color: var(--bx-ink-2); } .bx-body-sm { font-size: var(--bx-fs-sm); line-height: var(--bx-lh-body); color: var(--bx-ink-2); } .bx-meta { font-size: var(--bx-fs-sm); color: var(--bx-ink-3); } .bx-mono { font-family: var(--bx-font-mono); font-feature-settings: "tnum"; } /* On-dark variants */ .bx-on-dark .bx-display-xl, .bx-on-dark .bx-display-l, .bx-on-dark .bx-display-m, .bx-on-dark .bx-h1, .bx-on-dark .bx-h2, .bx-on-dark .bx-h3, .bx-on-dark .bx-h4 { color: var(--bx-on-dark-1); } .bx-on-dark .bx-body, .bx-on-dark .bx-body-sm { color: var(--bx-on-dark-2); } .bx-on-dark .bx-meta, .bx-on-dark .bx-eyebrow { color: var(--bx-on-dark-3); }