/* ========================================================================== NAVAL ORIENTATION — Design Tokens The single source of truth. Change a value here, the whole site follows. ========================================================================== */ :root { /* ---------- Brand core ------------------------------------------------ */ --no-primary: #1386B3; /* Signal Blue — primary actions, links */ --no-accent: #6FCFFF; /* Beacon Cyan — highlights, hovers */ --no-ink: #0B1E2C; /* Abyss Navy — surfaces, headings */ --no-white: #FFFFFF; /* ---------- Primary ramp (derived from #1386B3) ----------------------- */ --no-primary-50: #EBF7FC; --no-primary-100: #D2EDF8; --no-primary-200: #A5DBF1; --no-primary-300: #6FC4E4; --no-primary-400: #3AA5CE; --no-primary-500: #1386B3; --no-primary-600: #0F6D93; --no-primary-700: #0C5674; --no-primary-800: #0A4157; --no-primary-900: #082F3F; /* ---------- Ink ramp (derived from #0B1E2C) --------------------------- */ --no-ink-900: #060F17; --no-ink-800: #0B1E2C; --no-ink-700: #12293A; --no-ink-600: #1B384C; --no-ink-500: #294B62; --no-ink-400: #476981; --no-ink-300: #7291A6; --no-ink-200: #A9BECC; --no-ink-100: #D6E1E9; --no-ink-50: #EEF3F7; /* ---------- Semantic surfaces ----------------------------------------- */ --no-bg: #FFFFFF; --no-bg-soft: #F5F9FC; --no-bg-tint: #EBF3F8; --no-bg-deep: var(--no-ink-800); --no-bg-deeper: var(--no-ink-900); --no-text: #16303F; --no-text-muted: #4F6B7A; /* 5.65:1 on white — AA body text */ --no-text-faint: #587585; /* 4.89:1 on white — AA small print */ /* Accessible action colour. Visually identical to the brand blue but reaches WCAG AA (4.58:1) for white-on-blue buttons and blue-on-white link text, which #1386B3 misses at 4.13:1. The brand tokens above stay untouched, so large display graphics still use the exact palette hex. */ --no-primary-action: #127EA9; --no-text-invert: #FFFFFF; --no-text-invert-muted: rgba(255, 255, 255, .72); --no-border: #DCE7EE; --no-border-strong: #C2D4DF; --no-border-invert: rgba(255, 255, 255, .14); --no-success: #16A34A; --no-warning: #D97706; --no-danger: #DC2626; /* ---------- Signature gradients --------------------------------------- */ --no-grad-brand: linear-gradient(120deg, var(--no-primary-700) 0%, var(--no-primary-500) 48%, var(--no-accent) 130%); --no-grad-deep: linear-gradient(165deg, #0B1E2C 0%, #0C2B3D 55%, #0A4157 100%); --no-grad-scrim: linear-gradient(180deg, rgba(11,30,44,.86) 0%, rgba(11,30,44,.55) 42%, rgba(11,30,44,.92) 100%); --no-grad-hairline: linear-gradient(90deg, transparent, var(--no-accent), transparent); --no-grad-sheen: linear-gradient(115deg, transparent 30%, rgba(111,207,255,.22) 50%, transparent 70%); /* ---------- Typography ------------------------------------------------- */ --no-font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif; --no-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --no-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* Fluid type scale — 320px → 1600px viewport */ --no-fs-3xs: 0.6875rem; /* 11px */ --no-fs-2xs: 0.75rem; /* 12px */ --no-fs-xs: 0.8125rem; /* 13px */ --no-fs-sm: 0.875rem; /* 14px */ --no-fs-base: clamp(0.9375rem, 0.90rem + 0.19vw, 1.0625rem); --no-fs-md: clamp(1.0rem, 0.95rem + 0.25vw, 1.1875rem); --no-fs-lg: clamp(1.125rem, 1.05rem + 0.38vw, 1.375rem); --no-fs-xl: clamp(1.375rem, 1.24rem + 0.66vw, 1.875rem); --no-fs-2xl: clamp(1.75rem, 1.52rem + 1.13vw, 2.625rem); --no-fs-3xl: clamp(2.125rem, 1.75rem + 1.88vw, 3.5rem); --no-fs-4xl: clamp(2.5rem, 1.90rem + 3.00vw, 4.5rem); --no-fs-5xl: clamp(3rem, 2.00rem + 5.00vw, 6.5rem); --no-lh-tight: 1.06; --no-lh-snug: 1.22; --no-lh-normal: 1.5; --no-lh-relaxed:1.72; --no-tr-tight: -0.03em; --no-tr-snug: -0.018em; --no-tr-wide: 0.06em; --no-tr-wider: 0.14em; /* ---------- Space scale (8pt base) ------------------------------------ */ --no-s-1: 0.25rem; --no-s-2: 0.5rem; --no-s-3: 0.75rem; --no-s-4: 1rem; --no-s-5: 1.25rem; --no-s-6: 1.5rem; --no-s-8: 2rem; --no-s-10: 2.5rem; --no-s-12: 3rem; --no-s-16: 4rem; --no-s-20: 5rem; --no-s-24: 6rem; /* Fluid section rhythm */ --no-section-y: clamp(3.5rem, 2.2rem + 6.5vw, 7.5rem); --no-section-y-tight:clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem); /* ---------- Layout ----------------------------------------------------- */ --no-container: 1280px; --no-container-wide: 1520px; --no-container-text: 68ch; --no-gutter: clamp(1.125rem, 0.6rem + 2.6vw, 3rem); --no-header-h: 76px; --no-topbar-h: 40px; /* ---------- Radii ------------------------------------------------------ */ --no-r-xs: 4px; --no-r-sm: 8px; --no-r-md: 12px; --no-r-lg: 18px; --no-r-xl: 26px; --no-r-pill: 999px; /* ---------- Elevation --------------------------------------------------- */ --no-sh-xs: 0 1px 2px rgba(11, 30, 44, .06); --no-sh-sm: 0 2px 8px rgba(11, 30, 44, .07), 0 1px 2px rgba(11, 30, 44, .05); --no-sh-md: 0 10px 26px -8px rgba(11, 30, 44, .16), 0 2px 6px rgba(11, 30, 44, .05); --no-sh-lg: 0 26px 56px -18px rgba(11, 30, 44, .26), 0 6px 14px rgba(11, 30, 44, .07); --no-sh-xl: 0 44px 90px -28px rgba(11, 30, 44, .38); --no-sh-glow: 0 0 0 1px rgba(111,207,255,.35), 0 12px 40px -10px rgba(19,134,179,.55); /* ---------- Motion ------------------------------------------------------ */ --no-ease: cubic-bezier(.4, 0, .2, 1); --no-ease-out: cubic-bezier(.16, 1, .3, 1); --no-ease-in-out: cubic-bezier(.65, 0, .35, 1); --no-dur-fast: .18s; --no-dur: .32s; --no-dur-slow: .6s; /* ---------- Z-index scale ----------------------------------------------- */ --no-z-base: 1; --no-z-raised: 10; --no-z-sticky: 100; --no-z-header: 500; --no-z-drawer: 800; --no-z-float: 900; --no-z-modal: 1000; }