/* ============================================================ beamLive Canada — Stylesheet v1.0 Single-file CSS. Light + Dark themes via data-theme on . ============================================================ */ /* ----- Fonts ----- */ @import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@500,700,800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); /* ============================================================ 1. THEME TOKENS ============================================================ */ :root { /* Brand — shared between themes (drawn from the logo) */ --brand-violet: #6B2FB0; --brand-azure: #2563EB; --brand-cyan: #14B8A6; --brand-gold: #F59E0B; --brand-leaf: #10B981; --brand-maple: #DC2626; /* Aurora signature gradient */ --aurora-grad: linear-gradient(110deg, #6B2FB0 0%, #2563EB 30%, #14B8A6 60%, #10B981 90%); --aurora-soft: linear-gradient(110deg, rgba(107,47,176,0.18) 0%, rgba(37,99,235,0.14) 30%, rgba(20,184,166,0.16) 60%, rgba(16,185,129,0.12) 90%); /* Type scale */ --fs-display: clamp(2.5rem, 6vw + 0.5rem, 5.25rem); --fs-h1: clamp(2rem, 3.5vw + 0.5rem, 3.5rem); --fs-h2: clamp(1.5rem, 2vw + 0.5rem, 2.25rem); --fs-h3: clamp(1.125rem, 0.75vw + 0.875rem, 1.375rem); --fs-body: 1.0625rem; --fs-small: 0.9375rem; --fs-eyebrow: 0.75rem; /* Spacing scale (8px grid) */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4rem; --sp-7: 6rem; --sp-8: 8rem; /* Layout */ --container-w: 1240px; --container-px: 1.5rem; --radius-sm: 6px; --radius: 12px; --radius-lg: 20px; --border-w: 1px; /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 180ms; --dur-med: 320ms; --dur-slow: 600ms; } /* Light theme (default) */ :root, :root[data-theme="light"] { --paper: #FAFAF7; /* page background */ --paper-elev: #FFFFFF; /* elevated surfaces */ --paper-quiet: #F1F4F2; /* subtle background tint */ --ink: #0B1220; /* primary text */ --ink-soft: #1E293B; /* slightly softened ink */ --graphite: #475569; /* secondary text */ --mist: #94A3B8; /* tertiary text / placeholders */ --frost: #E2E8F0; /* borders */ --frost-strong: #CBD5E1; /* hover borders */ --overlay: rgba(11, 18, 32, 0.04); --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.05), 0 1px 3px rgba(11, 18, 32, 0.06); --shadow: 0 4px 12px rgba(11, 18, 32, 0.06), 0 2px 6px rgba(11, 18, 32, 0.04); --shadow-lg: 0 16px 40px rgba(11, 18, 32, 0.10), 0 4px 12px rgba(11, 18, 32, 0.05); --pattern-dot: rgba(11, 18, 32, 0.075); --pattern-grid: rgba(11, 18, 32, 0.06); --pattern-topo: rgba(107, 47, 176, 0.08); --pattern-stripe: rgba(11, 18, 32, 0.025); } /* Dark theme */ :root[data-theme="dark"] { --paper: #08101E; --paper-elev: #0F1A2E; --paper-quiet: #0C1426; --ink: #F8FAFC; --ink-soft: #E2E8F0; --graphite: #94A3B8; --mist: #64748B; --frost: #1E293B; --frost-strong: #334155; --overlay: rgba(248, 250, 252, 0.04); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3); --shadow: 0 4px 16px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3); --shadow-lg: 0 24px 60px rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.4); --pattern-dot: rgba(248, 250, 252, 0.10); --pattern-grid: rgba(248, 250, 252, 0.075); --pattern-topo: rgba(107, 47, 176, 0.18); --pattern-stripe: rgba(248, 250, 252, 0.04); } /* Auto theme via system preference (when no manual override) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #08101E; --paper-elev: #0F1A2E; --paper-quiet: #0C1426; --ink: #F8FAFC; --ink-soft: #E2E8F0; --graphite: #94A3B8; --mist: #64748B; --frost: #1E293B; --frost-strong: #334155; --overlay: rgba(248, 250, 252, 0.04); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3); --shadow: 0 4px 16px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3); --shadow-lg: 0 24px 60px rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.4); --pattern-dot: rgba(248, 250, 252, 0.10); --pattern-grid: rgba(248, 250, 252, 0.075); --pattern-topo: rgba(107, 47, 176, 0.18); --pattern-stripe: rgba(248, 250, 252, 0.04); } } /* ============================================================ 2. BASE & RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; scroll-padding-top: 80px; } body { margin: 0; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: var(--fs-body); line-height: 1.6; color: var(--ink); background: var(--paper); transition: background-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out); overflow-x: hidden; } img, svg { display: block; max-width: 100%; height: auto; } a { color: var(--brand-azure); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--brand-violet); } button { font-family: inherit; cursor: pointer; } ::selection { background: var(--brand-violet); color: #fff; } /* ============================================================ 3. TYPOGRAPHY ============================================================ */ .display, h1, h2, h3, h4 { font-family: 'Cabinet Grotesk', 'Inter', system-ui, sans-serif; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 var(--sp-3) 0; } .display { font-size: var(--fs-display); letter-spacing: -0.035em; line-height: 0.98; } h1 { font-size: var(--fs-h1); letter-spacing: -0.028em; } h2 { font-size: var(--fs-h2); letter-spacing: -0.022em; } h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.014em; } p { margin: 0 0 var(--sp-2) 0; color: var(--graphite); } p.lead { font-size: 1.1875rem; line-height: 1.55; color: var(--ink-soft); } .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite); margin-bottom: var(--sp-3); } .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--aurora-grad); } .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; } /* Aurora text accent */ .aurora-text { background: var(--aurora-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============================================================ 4. LAYOUT ============================================================ */ .container { width: 100%; max-width: var(--container-w); margin: 0 auto; padding-left: var(--container-px); padding-right: var(--container-px); } section { padding: var(--sp-7) 0; position: relative; } section.section--tight { padding: var(--sp-6) 0; } section.section--quiet { background: var(--paper-quiet); } @media (min-width: 768px) { section { padding: var(--sp-8) 0; } } /* Section dividers — hairline with aurora accent */ .aurora-rule { height: 1px; width: 100%; background: linear-gradient(to right, transparent 0%, var(--frost) 15%, var(--frost) 40%, var(--brand-violet) 50%, var(--brand-cyan) 55%, var(--frost) 65%, var(--frost) 85%, transparent 100%); opacity: 0.5; } .section-header { max-width: 760px; margin-bottom: var(--sp-6); } .section-header--centered { margin-left: auto; margin-right: auto; text-align: center; } .section-header--centered .eyebrow { justify-content: center; } /* ============================================================ 5. BACKGROUND PATTERNS ============================================================ */ .bg-dots { background-image: radial-gradient(var(--pattern-dot) 1px, transparent 1px); background-size: 24px 24px; background-position: 0 0; } .bg-grid { background-image: linear-gradient(to right, var(--pattern-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--pattern-grid) 1px, transparent 1px); background-size: 56px 56px; } .bg-grid-fade { position: relative; } .bg-grid-fade::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, var(--pattern-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--pattern-grid) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%); mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%); pointer-events: none; z-index: 0; } .bg-grid-fade > * { position: relative; z-index: 1; } /* Topographic — concentric contour rings, suggests data/elevation */ .bg-topo { position: relative; isolation: isolate; } .bg-topo::before { content: ""; position: absolute; inset: 0; background-image: repeating-radial-gradient( circle at 20% 30%, transparent 0, transparent 38px, var(--pattern-topo) 38px, var(--pattern-topo) 39px ), repeating-radial-gradient( circle at 80% 70%, transparent 0, transparent 52px, var(--pattern-topo) 52px, var(--pattern-topo) 53px ); -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%); mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%); pointer-events: none; z-index: -1; opacity: 0.85; } /* Diagonal stripes — subtle, ~45deg */ .bg-stripes { background-image: repeating-linear-gradient( 135deg, transparent 0, transparent 12px, var(--pattern-stripe) 12px, var(--pattern-stripe) 13px ); } /* Aurora haze — soft tinted wash for emphasis sections */ .bg-aurora-haze { position: relative; isolation: isolate; } .bg-aurora-haze::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 15% 30%, rgba(107, 47, 176, 0.10), transparent 60%), radial-gradient(ellipse 50% 40% at 85% 70%, rgba(20, 184, 166, 0.08), transparent 60%); pointer-events: none; z-index: -1; } :root[data-theme="dark"] .bg-aurora-haze::before { background: radial-gradient(ellipse 60% 50% at 15% 30%, rgba(107, 47, 176, 0.22), transparent 60%), radial-gradient(ellipse 50% 40% at 85% 70%, rgba(20, 184, 166, 0.16), transparent 60%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bg-aurora-haze::before { background: radial-gradient(ellipse 60% 50% at 15% 30%, rgba(107, 47, 176, 0.22), transparent 60%), radial-gradient(ellipse 50% 40% at 85% 70%, rgba(20, 184, 166, 0.16), transparent 60%); } } /* Mesh — combined dots over subtle grid, for nav-adjacent sections */ .bg-mesh { background-image: radial-gradient(var(--pattern-dot) 1px, transparent 1px), linear-gradient(to right, var(--pattern-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--pattern-grid) 1px, transparent 1px); background-size: 24px 24px, 96px 96px, 96px 96px; } /* ============================================================ 6. NAVIGATION ============================================================ */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--frost); transition: background-color var(--dur-med) var(--ease-out); } .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: var(--sp-3); } .nav__brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--ink); } .nav__brand:hover { color: var(--ink); } .nav__logo { width: 36px; height: 36px; } .nav__brand-text { display: flex; flex-direction: column; line-height: 1.1; } .nav__brand-name { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--ink); } .nav__brand-tag { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); } .nav__links { display: none; align-items: center; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; } .nav__links > li > a { color: var(--ink-soft); font-size: 0.9375rem; font-weight: 500; padding: 0.5rem 0.25rem; position: relative; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; } .nav__links > li > a:hover { color: var(--ink); } .nav__links > li > a::after { content: ""; position: absolute; left: 0.25rem; right: 0.25rem; bottom: 0; height: 2px; background: var(--aurora-grad); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-med) var(--ease-out); } .nav__links > li > a:hover::after, .nav__item--has-dropdown:hover > a::after, .nav__item--has-dropdown:focus-within > a::after { transform: scaleX(1); } /* ----- Dropdown menus (desktop only) ----- */ .nav__item { position: relative; } .nav__chevron { width: 12px; height: 12px; flex-shrink: 0; margin-top: 1px; opacity: 0.65; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .nav__item--has-dropdown:hover .nav__chevron, .nav__item--has-dropdown:focus-within .nav__chevron { transform: rotate(-180deg); opacity: 1; } .nav__dropdown { position: absolute; top: 100%; left: -8px; min-width: 300px; margin-top: 10px; padding: 8px; background: var(--paper-elev); border: 1px solid var(--frost); border-radius: var(--radius); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast) var(--ease-out); z-index: 100; pointer-events: none; } /* Invisible bridge so the mouse can travel from trigger to dropdown without losing hover */ .nav__dropdown::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } /* Aurora accent strip at the top of the dropdown */ .nav__dropdown::after { content: ""; position: absolute; top: 0; left: 16px; width: 32px; height: 2px; background: var(--aurora-grad); border-radius: 2px; opacity: 0.85; } /* Reveal on hover or keyboard focus */ .nav__item--has-dropdown:hover > .nav__dropdown, .nav__item--has-dropdown:focus-within > .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .nav__dropdown-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .nav__dropdown-item:hover, .nav__dropdown-item:focus-visible { background: var(--paper-quiet); color: var(--ink); transform: translateX(2px); } .nav__dropdown-name { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; line-height: 1.3; font-family: 'Inter', sans-serif; } .nav__dropdown-desc { display: block; font-size: 0.75rem; color: var(--graphite); font-weight: 400; line-height: 1.4; margin-top: 1px; } /* Hide dropdowns on mobile (the mobile menu handles those paths) */ @media (max-width: 1023px) { .nav__dropdown { display: none; } .nav__chevron { display: none; } } .nav__cta { display: none; } @media (min-width: 1024px) { .nav__cta { display: inline-flex; } } .nav__actions { display: flex; align-items: center; gap: 0.5rem; } .lang-switch { display: inline-flex; align-items: center; background: var(--paper-elev); border: 1px solid var(--frost); border-radius: 999px; padding: 3px; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; } .lang-switch a { padding: 5px 10px; border-radius: 999px; color: var(--graphite); text-decoration: none; letter-spacing: 0.05em; font-weight: 500; } .lang-switch a.is-active { background: var(--ink); color: var(--paper); } .theme-toggle { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--frost); background: var(--paper-elev); color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; transition: border-color var(--dur-fast), background-color var(--dur-fast); } .theme-toggle:hover { border-color: var(--frost-strong); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } } .nav__mobile-toggle { display: inline-flex; width: 40px; height: 40px; border: 1px solid var(--frost); border-radius: var(--radius-sm); background: var(--paper-elev); color: var(--ink); align-items: center; justify-content: center; } .nav__mobile-toggle svg { width: 18px; height: 18px; } @media (min-width: 1024px) { .nav__links { display: flex; } .nav__mobile-toggle { display: none; } } /* Mobile menu */ .mobile-menu { display: none; background: var(--paper-elev); border-bottom: 1px solid var(--frost); padding: var(--sp-3) var(--container-px); } .mobile-menu.is-open { display: block; } .mobile-menu ul { list-style: none; padding: 0; margin: 0; } .mobile-menu a { display: block; padding: 0.875rem 0; border-bottom: 1px solid var(--frost); color: var(--ink-soft); font-weight: 500; } .mobile-menu a:last-child { border-bottom: none; } @media (min-width: 1024px) { .mobile-menu { display: none !important; } } /* ============================================================ 7. BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.375rem; font-family: 'Inter', sans-serif; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1; border: 1px solid transparent; border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); white-space: nowrap; } .btn svg { width: 16px; height: 16px; } .btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn--primary:hover { background: var(--brand-violet); border-color: var(--brand-violet); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow); } .btn--secondary { background: var(--paper-elev); color: var(--ink); border-color: var(--frost-strong); } .btn--secondary:hover { border-color: var(--ink); color: var(--ink); } .btn--ghost { background: transparent; color: var(--ink); border-color: transparent; padding: 0.5rem 0.75rem; } .btn--ghost:hover { color: var(--brand-violet); } .btn--lg { padding: 0.9375rem 1.75rem; font-size: 1rem; } .link-arrow { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 600; color: var(--ink); text-decoration: none; font-size: 0.9375rem; } .link-arrow:hover { color: var(--brand-violet); } .link-arrow .arrow { transition: transform var(--dur-fast) var(--ease-out); } .link-arrow:hover .arrow { transform: translateX(3px); } /* ============================================================ 8. HERO ============================================================ */ .hero { position: relative; padding: var(--sp-7) 0 var(--sp-8) 0; overflow: hidden; isolation: isolate; } @media (min-width: 768px) { .hero { padding: calc(var(--sp-7) + 1rem) 0 var(--sp-8) 0; } } /* Aurora background — the signature element */ .aurora { position: absolute; inset: -10% -5% auto -5%; height: 120%; z-index: -1; pointer-events: none; filter: blur(60px); opacity: 0.55; background: radial-gradient(ellipse 50% 40% at 20% 30%, rgba(107,47,176,0.7) 0%, transparent 70%), radial-gradient(ellipse 45% 35% at 70% 20%, rgba(37,99,235,0.55) 0%, transparent 70%), radial-gradient(ellipse 60% 45% at 50% 60%, rgba(20,184,166,0.45) 0%, transparent 70%), radial-gradient(ellipse 40% 30% at 85% 70%, rgba(16,185,129,0.40) 0%, transparent 70%); animation: auroraDrift 24s var(--ease-in-out) infinite alternate; } :root[data-theme="dark"] .aurora { opacity: 0.45; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .aurora { opacity: 0.45; } } @keyframes auroraDrift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-3%, 2%) scale(1.06); } 100% { transform: translate(2%, -1%) scale(1.02); } } .hero__grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(to right, var(--pattern-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--pattern-grid) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 40%, transparent 85%); mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 40%, transparent 85%); } .hero__content { max-width: 880px; position: relative; } .hero__eyebrow { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.4375rem 0.875rem; border: 1px solid var(--frost-strong); border-radius: 999px; background: var(--paper-elev); font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ink-soft); margin-bottom: var(--sp-4); } .hero__eyebrow .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-leaf); position: relative; box-shadow: 0 0 0 0 rgba(16,185,129,0.7); animation: pulse 1.8s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.6); } 70% { box-shadow: 0 0 0 8px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } } .hero__title { font-size: var(--fs-display); line-height: 0.96; letter-spacing: -0.04em; font-weight: 800; margin: 0 0 var(--sp-3) 0; } .hero__title .accent { display: inline-block; } .hero__lead { font-size: clamp(1.0625rem, 1vw + 0.875rem, 1.3125rem); line-height: 1.55; color: var(--ink-soft); max-width: 700px; margin: 0 0 var(--sp-2) 0; } .hero__caption { font-family: 'JetBrains Mono', monospace; font-size: 0.875rem; color: var(--graphite); margin: var(--sp-2) 0 var(--sp-4) 0; letter-spacing: 0.02em; } .hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--sp-4); } .hero__meta { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--frost); } .hero__meta-item { display: flex; flex-direction: column; gap: 0.25rem; } .hero__meta-item .num { font-family: 'Cabinet Grotesk', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; } .hero__meta-item .lbl { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--graphite); } /* ============================================================ 9. TRUST BAR ============================================================ */ .trust-bar { padding: var(--sp-5) 0; border-top: 1px solid var(--frost); border-bottom: 1px solid var(--frost); } .trust-bar__label { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); margin-bottom: var(--sp-3); text-align: center; } .trust-bar__logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); align-items: center; justify-items: center; opacity: 0.7; } @media (min-width: 640px) { .trust-bar__logos { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .trust-bar__logos { grid-template-columns: repeat(6, 1fr); } } .trust-bar__logo { height: 28px; display: flex; align-items: center; justify-content: center; font-family: 'Cabinet Grotesk', sans-serif; font-weight: 700; font-size: 0.875rem; letter-spacing: -0.01em; color: var(--graphite); white-space: nowrap; } /* ============================================================ 10. PILLARS (Why beamLive) ============================================================ */ .pillars-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); } @media (min-width: 640px) { .pillars-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .pillars-grid { grid-template-columns: repeat(4, 1fr); } } .pillar { position: relative; padding: var(--sp-3); border: 1px solid var(--frost); border-radius: var(--radius); background: var(--paper-elev); transition: border-color var(--dur-med), transform var(--dur-med); } .pillar:hover { border-color: var(--frost-strong); transform: translateY(-2px); } .pillar__num { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--graphite); margin-bottom: var(--sp-2); } .pillar__icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--aurora-soft); border-radius: var(--radius-sm); margin-bottom: var(--sp-2); color: var(--brand-violet); } .pillar__icon svg { width: 22px; height: 22px; } .pillar h3 { font-size: 1.125rem; margin-bottom: 0.5rem; } .pillar p { font-size: var(--fs-small); margin: 0; color: var(--graphite); } /* ============================================================ 11. INTEGRITY LAYER (3×2 feature grid) ============================================================ */ .integrity-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); } @media (min-width: 640px) { .integrity-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .integrity-grid { grid-template-columns: repeat(3, 1fr); } } .integrity-card { padding: var(--sp-4); border: 1px solid var(--frost); border-radius: var(--radius); background: var(--paper-elev); transition: border-color var(--dur-med); position: relative; overflow: hidden; } .integrity-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--aurora-grad); opacity: 0; transition: opacity var(--dur-med); } .integrity-card:hover { border-color: var(--frost-strong); } .integrity-card:hover::before { opacity: 1; } .integrity-card__num { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite); margin-bottom: var(--sp-2); } .integrity-card__icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--aurora-soft); border-radius: var(--radius-sm); margin-bottom: var(--sp-3); color: var(--brand-violet); } .integrity-card__icon svg { width: 24px; height: 24px; } .integrity-card h3 { font-size: 1.1875rem; margin-bottom: 0.625rem; } .integrity-card p { font-size: var(--fs-small); color: var(--graphite); margin: 0; } /* ============================================================ 12. FLAGSHIP PRODUCT SECTIONS ============================================================ */ .flagship { position: relative; } .flagship__inner { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); align-items: center; } @media (min-width: 960px) { .flagship__inner { grid-template-columns: 1fr 1.1fr; gap: var(--sp-6); } .flagship--reverse .flagship__inner { grid-template-columns: 1.1fr 1fr; } .flagship--reverse .flagship__text { order: 2; } .flagship--reverse .flagship__visual { order: 1; } } .flagship__product-name { font-family: 'Cabinet Grotesk', sans-serif; font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 var(--sp-1) 0; display: inline-flex; align-items: baseline; gap: 0.375rem; } @media (min-width: 768px) { .flagship__product-name { font-size: 3rem; } } .flagship__product-name .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-violet); display: inline-block; margin-left: 0.125rem; transform: translateY(-0.4em); } .flagship__tagline { font-family: 'Cabinet Grotesk', sans-serif; font-size: 1.25rem; font-weight: 500; color: var(--graphite); font-style: italic; margin-bottom: var(--sp-3); } .flagship__lead { font-size: 1.0625rem; line-height: 1.65; color: var(--ink-soft); margin-bottom: var(--sp-4); } .flagship__features { list-style: none; padding: 0; margin: 0 0 var(--sp-4) 0; display: grid; gap: var(--sp-3); } .flagship__feature { display: grid; grid-template-columns: 32px 1fr; gap: var(--sp-2); align-items: start; } .flagship__feature-num { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 500; color: var(--brand-violet); padding-top: 0.25rem; } .flagship__feature h4 { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: -0.005em; margin: 0 0 0.25rem 0; color: var(--ink); } .flagship__feature p { font-size: 0.9375rem; line-height: 1.55; color: var(--graphite); margin: 0; } .flagship__outcomes { padding: var(--sp-3); background: var(--paper-quiet); border-left: 3px solid var(--brand-violet); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: var(--sp-3); } .flagship__outcomes p { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); } /* Visual placeholder — dashboard mockup container */ .flagship__visual { position: relative; } .dashboard { background: var(--paper-elev); border: 1px solid var(--frost); border-radius: var(--radius); padding: var(--sp-3); box-shadow: var(--shadow-lg); overflow: hidden; position: relative; } .dashboard__header { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--frost); margin-bottom: var(--sp-3); } .dashboard__title { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--graphite); letter-spacing: 0.06em; } .dashboard__dots { display: flex; gap: 6px; } .dashboard__dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--frost-strong); } .dashboard__body { position: relative; min-height: 280px; } /* ============================================================ 13. SUITE GRID (smaller product tiles) ============================================================ */ .suite-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); } @media (min-width: 640px) { .suite-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .suite-grid { grid-template-columns: repeat(3, 1fr); } } .suite-tile { padding: var(--sp-3); border: 1px solid var(--frost); border-radius: var(--radius); background: var(--paper-elev); text-decoration: none; color: var(--ink); transition: border-color var(--dur-med), transform var(--dur-med); display: flex; flex-direction: column; gap: var(--sp-1); } .suite-tile:hover { border-color: var(--frost-strong); transform: translateY(-2px); color: var(--ink); } .suite-tile__head { display: flex; align-items: center; justify-content: space-between; } .suite-tile__name { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; } .suite-tile__tag { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; color: var(--graphite); letter-spacing: 0.08em; text-transform: uppercase; } .suite-tile p { font-size: var(--fs-small); color: var(--graphite); margin: 0; } /* ============================================================ 14. INDUSTRIES ============================================================ */ .industries-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); } @media (min-width: 640px) { .industries-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .industries-grid { grid-template-columns: repeat(4, 1fr); } } .industry-card { padding: var(--sp-3); border: 1px solid var(--frost); border-radius: var(--radius); background: var(--paper-elev); transition: border-color var(--dur-med); } .industry-card:hover { border-color: var(--frost-strong); } .industry-card__num { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; letter-spacing: 0.14em; color: var(--graphite); margin-bottom: var(--sp-2); } .industry-card h3 { font-family: 'Cabinet Grotesk', sans-serif; font-size: 1.0625rem; font-weight: 700; margin: 0 0 0.375rem 0; letter-spacing: -0.01em; } .industry-card p { font-size: 0.875rem; color: var(--graphite); margin: 0; } /* ============================================================ 15. PLATFORM / UCoT ============================================================ */ .platform__inner { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); align-items: center; } @media (min-width: 960px) { .platform__inner { grid-template-columns: 1.1fr 1fr; gap: var(--sp-6); } } .platform__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); margin-top: var(--sp-4); } .platform__stat { padding: var(--sp-3); background: var(--paper-quiet); border-radius: var(--radius); } .platform__stat .num { font-family: 'Cabinet Grotesk', sans-serif; font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; background: var(--aurora-grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; margin-bottom: 0.375rem; } .platform__stat .lbl { font-size: 0.8125rem; color: var(--graphite); line-height: 1.45; } /* ============================================================ 16. TRUST & SECURITY ============================================================ */ .trust-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); } @media (min-width: 640px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .trust-grid { grid-template-columns: repeat(3, 1fr); } } .trust-item { padding: var(--sp-3); border: 1px solid var(--frost); border-radius: var(--radius-sm); background: var(--paper-elev); display: flex; gap: 0.75rem; align-items: flex-start; } .trust-item__icon { flex-shrink: 0; width: 24px; height: 24px; color: var(--brand-violet); margin-top: 0.125rem; } .trust-item__icon svg { width: 20px; height: 20px; } .trust-item h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.9375rem; margin: 0 0 0.25rem 0; color: var(--ink); letter-spacing: -0.005em; } .trust-item p { font-size: 0.8125rem; color: var(--graphite); margin: 0; line-height: 1.5; } /* ============================================================ 17. PASSENGER SAFETY ============================================================ */ .safety-band { background: var(--paper-quiet); border-radius: var(--radius-lg); padding: var(--sp-5); position: relative; overflow: hidden; } .safety-band::before { content: ""; position: absolute; top: -20%; right: -10%; width: 60%; height: 140%; background: var(--aurora-soft); filter: blur(80px); pointer-events: none; opacity: 0.5; } .safety-band > * { position: relative; z-index: 1; } .safety-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-top: var(--sp-4); } @media (min-width: 768px) { .safety-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .safety-grid { grid-template-columns: repeat(4, 1fr); } } .safety-item { padding: var(--sp-3); background: var(--paper-elev); border: 1px solid var(--frost); border-radius: var(--radius); } .safety-item__icon { width: 36px; height: 36px; color: var(--brand-maple); margin-bottom: var(--sp-2); } .safety-item h3 { font-family: 'Cabinet Grotesk', sans-serif; font-size: 1rem; font-weight: 700; margin: 0 0 0.375rem 0; letter-spacing: -0.005em; } .safety-item p { font-size: 0.875rem; color: var(--graphite); margin: 0; } /* ============================================================ 18. CTA BAND (final) ============================================================ */ .cta-band { position: relative; border-radius: var(--radius-lg); padding: var(--sp-6) var(--sp-4); background: var(--ink); color: var(--paper); overflow: hidden; text-align: center; } .cta-band::before { content: ""; position: absolute; inset: -10%; background: radial-gradient(ellipse 40% 60% at 20% 30%, rgba(107,47,176,0.45) 0%, transparent 70%), radial-gradient(ellipse 45% 55% at 80% 70%, rgba(20,184,166,0.35) 0%, transparent 70%), radial-gradient(ellipse 50% 50% at 50% 50%, rgba(37,99,235,0.30) 0%, transparent 70%); filter: blur(40px); pointer-events: none; } .cta-band > * { position: relative; z-index: 1; } .cta-band h2 { color: var(--paper); font-size: clamp(1.75rem, 3vw + 1rem, 2.75rem); margin-bottom: var(--sp-2); } .cta-band p { color: rgba(248, 250, 252, 0.75); max-width: 560px; margin: 0 auto var(--sp-4); font-size: 1.0625rem; } .cta-band .btn--primary { background: var(--paper); color: var(--ink); border-color: var(--paper); } .cta-band .btn--primary:hover { background: var(--brand-cyan); border-color: var(--brand-cyan); color: var(--ink); } .cta-band .btn--secondary { background: transparent; color: var(--paper); border-color: rgba(248,250,252,0.3); } .cta-band .btn--secondary:hover { border-color: var(--paper); color: var(--paper); } /* ============================================================ 19. FOOTER ============================================================ */ footer.footer { padding: var(--sp-6) 0 var(--sp-4); border-top: 1px solid var(--frost); } .footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); } @media (min-width: 640px) { .footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); } } @media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.6fr repeat(4, 1fr); } } .footer__brand p { font-size: 0.875rem; color: var(--graphite); max-width: 360px; margin-top: 0.75rem; } .footer__col h6 { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite); margin: 0 0 var(--sp-2) 0; font-weight: 500; } .footer__col ul { list-style: none; padding: 0; margin: 0; } .footer__col li { margin-bottom: 0.625rem; } .footer__col a { color: var(--ink-soft); font-size: 0.875rem; text-decoration: none; } .footer__col a:hover { color: var(--brand-violet); } .footer__bottom { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--frost); display: flex; flex-direction: column; gap: 0.75rem; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--graphite); letter-spacing: 0.02em; } @media (min-width: 640px) { .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; } } .footer__legal-links { display: flex; gap: var(--sp-3); } .footer__legal-links a { color: var(--graphite); } .footer__legal-links a:hover { color: var(--ink); } /* ============================================================ 20. ACCESSIBILITY & MOTION ============================================================ */ :focus-visible { outline: 2px solid var(--brand-violet); outline-offset: 2px; border-radius: var(--radius-sm); } .skip-link { position: absolute; top: -40px; left: 0; background: var(--ink); color: var(--paper); padding: 8px 16px; border-radius: 0 0 var(--radius-sm) 0; z-index: 100; font-size: 0.875rem; } .skip-link:focus { top: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .aurora { animation: none; } .hero__eyebrow .pulse { animation: none; } } /* Reveal-on-scroll utility (very subtle; JS adds .is-visible) */ .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Graceful degradation: if JS never runs, show everything */ .no-js .reveal { opacity: 1; transform: none; }