/* BridgeLink Design Tokens v3
* ────────────────────────────────────────────────────────────────────────────
* AESTHETIC: Navigation Bridge.
* Marine tech with radar atmosphere. Navy-tinted, NOT dark — confident,
* clean, ambient. Single typeface (Inter) with mono accents. No italic
* serif. Refined elevation. Radar/sonar concentric ambient layered behind
* content (see radar-atmosphere.css).
*
* Reference points: Flexport, Maersk, DNV, Starlink — confident maritime
* tech that is not nostalgic, not gimmicky.
*
* USAGE: Each page's local :root remaps page-specific names to --bl-* tokens.
*/
:root {
/* ─── Type families: ONE workhorse + mono ───────────────────────────── */
/* No more italic serif. No more font soup. */
--bl-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
--bl-font-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
--bl-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
/* ─── Type scale ────────────────────────────────────────────────────── */
--bl-type-display: clamp(2.75rem, 6vw, 5rem);
--bl-type-h1: clamp(2rem, 3.4vw, 2.875rem);
--bl-type-h2: clamp(1.5rem, 2.4vw, 2rem);
--bl-type-h3: 1.25rem;
--bl-type-body-lg: 1.0625rem;
--bl-type-body: 0.9375rem;
--bl-type-body-sm: 0.8125rem;
--bl-type-caption: 0.75rem;
--bl-type-eyebrow: 0.6875rem;
--bl-type-micro: 0.625rem;
--bl-type-leading-tight: 1.12;
--bl-type-leading-base: 1.55;
--bl-type-leading-loose: 1.7;
--bl-type-tracking-eyebrow: 0.16em;
--bl-type-tracking-micro: 0.12em;
--bl-type-tracking-display: -0.025em;
--bl-type-tracking-h: -0.018em;
--bl-type-tracking-body: -0.005em;
/* ─── Surface — light navy-tinted, never warm cream, never grey ─────── */
/* Backgrounds carry a faint blue cast (1-2% saturation toward navy)
so the whole product reads "marine tech" before any element loads. */
--bl-surface-100: #fafbfd; /* primary bg, cool near-white */
--bl-surface-200: #eef2f8; /* recessed surface */
--bl-surface-300: #dde4ee; /* deeper recess */
--bl-canvas: #ffffff; /* card / max elevation */
--bl-canvas-tint: #f7faff; /* card with subtle tint */
/* ─── Ink — deep navy text family ───────────────────────────────────── */
/* All values verified against WCAG AA on surface-100 + canvas: */
/* ink-900 16.5 / 15.9 ink-700 12.7 ink-500 7.1 / 6.8 */
/* ink-400 5.5 / 5.3 ink-300 3.4 (AA Large only — labels) */
--bl-ink-900: #0b1f3a; /* primary text */
--bl-ink-700: #1a3055; /* heavy text */
--bl-ink-500: #475977; /* secondary, navy-slate */
--bl-ink-400: #566a89; /* tertiary, small labels */
--bl-ink-300: #788aa6; /* big labels only, AA Large */
/* ─── Rules (hairlines) ─────────────────────────────────────────────── */
--bl-rule: rgba(11, 31, 58, .08);
--bl-rule-strong: rgba(11, 31, 58, .14);
--bl-rule-faint: rgba(11, 31, 58, .04);
/* ─── Brand: confident navy as primary, signal-blue as accent ───────── */
/* Navy is the body color of the brand. Signal-blue is for activation
and important moments only — not splashed everywhere. */
--bl-navy-900: #061229; /* deepest navy, almost black */
--bl-navy-700: #102a52; /* deep navy, dark surfaces */
--bl-navy-500: #1b3d6b; /* primary accent / chrome */
--bl-navy-400: #2c5089; /* hover lighter navy */
--bl-navy-300: #5d7eaa; /* mid, hover on dark surfaces */
--bl-navy-200: #7d99c7; /* AA Normal on navy-700 (4.7:1) */
--bl-navy-100: #a4b8d6; /* labels on navy-700 */
--bl-signal-100: #2d7ce0; /* bright signal blue, sparingly */
--bl-signal-200: #7eb1ef; /* lighter signal — 6.4:1 on navy-700 */
--bl-signal-tint: rgba(45, 124, 224, .10);
/* ─── Radar phosphor green — classic sonar/PPI signal color ─────────── */
/* Military instrument display tradition. Used SPARINGLY: sweep beams,
active blips, "live" indicators. Never as body chrome. */
--bl-radar-900: #0a3d1c; /* deepest, near-bg */
--bl-radar-700: #157a3d; /* mid, hover */
--bl-radar-500: #2bbd6c; /* primary phosphor (4.4:1 navy) */
--bl-radar-300: #5cd99a; /* bright phosphor */
--bl-radar-100: #9be8bd; /* hottest sweep tip (8:1 navy) */
--bl-radar-tint: rgba(43, 189, 108, .14);
--bl-radar-glow: rgba(92, 217, 154, .35);
--bl-navy-tint: rgba(27, 61, 107, .08);
--bl-navy-tint-medium: rgba(27, 61, 107, .14);
/* ─── Premium gold (sparingly) ──────────────────────────────────────── */
--bl-gold-700: #6b5024;
--bl-gold-500: #8b6c3a;
--bl-gold-300: #b89456;
/* ─── Functional ────────────────────────────────────────────────────── */
--bl-ok: #0f7c4d;
--bl-warn: #b15c0a;
--bl-err: #b22d2d;
/* ─── Spacing ───────────────────────────────────────────────────────── */
--bl-space-1: 4px;
--bl-space-2: 8px;
--bl-space-3: 12px;
--bl-space-4: 16px;
--bl-space-5: 20px;
--bl-space-6: 24px;
--bl-space-8: 32px;
--bl-space-10: 40px;
--bl-space-12: 48px;
--bl-space-16: 64px;
--bl-space-20: 80px;
--bl-space-24: 96px;
/* ─── Radii (modern, considered) ────────────────────────────────────── */
--bl-radius-xs: 4px;
--bl-radius-sm: 6px;
--bl-radius-md: 10px;
--bl-radius-lg: 14px;
--bl-radius-xl: 20px;
--bl-radius-pill: 999px;
/* ─── Motion ────────────────────────────────────────────────────────── */
--bl-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--bl-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--bl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--bl-duration-fast: 150ms;
--bl-duration-base: 240ms;
--bl-duration-slow: 480ms;
/* ─── Shadows (refined, not flat) ───────────────────────────────────── */
--bl-shadow-1: 0 1px 2px rgba(11,31,58,.05), 0 1px 3px rgba(11,31,58,.03);
--bl-shadow-2: 0 4px 8px rgba(11,31,58,.05), 0 12px 24px rgba(11,31,58,.06);
--bl-shadow-3: 0 8px 16px rgba(11,31,58,.06), 0 24px 48px rgba(11,31,58,.08);
--bl-shadow-press: 0 1px 1px rgba(11,31,58,.06) inset;
--bl-shadow-focus: 0 0 0 3px var(--bl-signal-tint);
/* ─── Layout ────────────────────────────────────────────────────────── */
--bl-layout-narrow: 720px;
--bl-layout-default: 1180px;
--bl-layout-wide: 1440px;
}
/* ─── Typographic discipline (apply globally) ─────────────────────────── */
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
font-feature-settings: "kern", "liga", "ss01", "cv11";
font-variant-numeric: lining-nums proportional-nums;
}
.bl-tabular,
[data-tabular="true"] {
font-variant-numeric: tabular-nums slashed-zero;
}
/* ─── Eyebrow with hairline rules (shared atom) ───────────────────────── */
.bl-eyebrow {
font-family: var(--bl-font-mono);
font-size: var(--bl-type-eyebrow);
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--bl-type-tracking-eyebrow);
display: inline-flex;
align-items: center;
gap: var(--bl-space-3);
color: var(--bl-ink-500);
}
.bl-eyebrow::before,
.bl-eyebrow::after {
content: '';
width: 24px;
height: 1px;
background: currentColor;
opacity: 0.4;
}
.bl-eyebrow.bl-eyebrow--start::before { display: none; }
.bl-eyebrow.bl-eyebrow--end::after { display: none; }
/* ─── Radar text utility ──────────────────────────────────────────────
* Navy text with a soft radiant halo — reads like a backlit instrument
* panel display. Use on elements that need to "lock readable" against
* busy or unpredictable backgrounds, or to give important moments
* (status badges, KPIs, beacons) a maritime-instrument feel.
*
* Usage:
* Connected
* subtle variant
* on navy hero
*
* The effect is mathematically tuned: a thin 0.5px sharp edge at high
* opacity for legibility, plus two larger soft halos at low opacity for
* the radiant feel. NOT a glow gimmick — present, not loud.
*/
.bl-text-radar {
color: var(--bl-navy-500);
text-shadow:
0 0 1px rgba(27, 61, 107, 0.30),
0 0 8px rgba(45, 124, 224, 0.22),
0 0 18px rgba(45, 124, 224, 0.10);
font-weight: 600;
letter-spacing: -0.005em;
}
.bl-text-radar--soft {
text-shadow:
0 0 1px rgba(27, 61, 107, 0.20),
0 0 6px rgba(45, 124, 224, 0.12);
font-weight: 500;
}
.bl-text-radar--on-dark {
color: #a8c5ee;
text-shadow:
0 0 1px rgba(126, 177, 239, 0.55),
0 0 10px rgba(45, 124, 224, 0.38),
0 0 22px rgba(45, 124, 224, 0.20);
}
/* Companion class for surfaces that hold radar-text — adds a hairline
left rule like a navigation chart annotation. */
.bl-text-radar--marked {
position: relative;
padding-left: 14px;
}
.bl-text-radar--marked::before {
content: '';
position: absolute;
left: 0;
top: 0.15em;
bottom: 0.15em;
width: 2px;
background: var(--bl-signal-100);
box-shadow: 0 0 6px rgba(45, 124, 224, 0.5);
}
/* ─── Unified radar logo mark ─────────────────────────────────────────
* Inline SVG `bl-radar-logo` rendered identically in web nav, panel
* topbar, portal, automation studio. Animated sweep + pulsing core in
* radar phosphor green. Currentcolor on rim/rings = adapts to surface.
*
* Usage:
*
*
* The actual SVG markup is duplicated inline in each page so the
* stylesheet load order doesn't break the visual on first paint.
*/
.bl-radar-logo {
display: block;
flex-shrink: 0;
color: var(--bl-navy-500); /* used by rim/ring/crosshair via currentColor */
}
.bl-radar-logo .sweep {
transform-origin: 16px 16px;
animation: bl-logo-sweep 3.6s linear infinite;
}
.bl-radar-logo .core {
transform-origin: 16px 16px;
transform-box: fill-box;
animation: bl-logo-core 1.8s ease-in-out infinite;
filter: drop-shadow(0 0 4px var(--bl-radar-glow));
}
.bl-radar-logo.on-dark { color: rgba(255, 255, 255, 0.55); }
.bl-radar-logo.on-light { color: var(--bl-navy-500); }
@keyframes bl-logo-sweep {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes bl-logo-core {
0%, 100% { opacity: 0.95; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.7); }
}
/* ─── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.bl-radar-logo .sweep,
.bl-radar-logo .core { animation: none; }
}