/* ========================================================================== 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 close to the brand blue but dark enough for WCAG AA everywhere it is used, not just on pure white: 5.86:1 on #FFFFFF and 5.49:1 on the soft section background, where the previous value fell to 4.32:1 and failed. #1386B3 itself manages only 4.13:1 on white. The brand tokens above stay untouched, so large display graphics still use the exact palette hex. */ --no-primary-action: #0F6D93; --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; /* Card hover accent for image-led cards. */ --no-card-hover: var(--no-primary-300); /* ---------- 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. Deliberately calmer than a typical marketing scale: display sizes were dropped roughly one step so headings stay authoritative without shouting, and every step now starts small enough to sit comfortably at 320px. */ --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.91rem + 0.13vw, 1.0rem); --no-fs-md: clamp(1.0rem, 0.96rem + 0.19vw, 1.125rem); --no-fs-lg: clamp(1.0625rem, 1.01rem + 0.28vw, 1.25rem); --no-fs-xl: clamp(1.25rem, 1.16rem + 0.44vw, 1.5rem); --no-fs-2xl: clamp(1.5rem, 1.34rem + 0.78vw, 2.0rem); --no-fs-3xl: clamp(1.75rem, 1.51rem + 1.19vw, 2.625rem); --no-fs-4xl: clamp(2.0rem, 1.66rem + 1.69vw, 3.25rem); --no-fs-5xl: clamp(2.5rem, 1.90rem + 3.00vw, 4.5rem); /* Looser than before across the board: the brief asked for readability, and Sora/Inter both need a little more air than their metrics suggest. */ --no-lh-tight: 1.14; --no-lh-snug: 1.28; --no-lh-normal: 1.62; --no-lh-relaxed:1.8; /* Softer optical tracking. The old -0.03em on display sizes read as cramped once the sizes came down. */ --no-tr-tight: -0.018em; --no-tr-snug: -0.01em; --no-tr-wide: 0.05em; --no-tr-wider: 0.12em; /* ---------- 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 */ /* * Section rhythm. The previous values put 120px above and below every * section on a desktop, which is 240px of empty space between each block and * added roughly a third to the length of every page. These keep the sections * clearly separated while cutting that dead space by about a quarter. */ --no-section-y: clamp(2.75rem, 1.9rem + 4.2vw, 5.5rem); --no-section-y-tight:clamp(2rem, 1.5rem + 2.4vw, 3.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; } /* * The utility bar is hidden below 1024px (see layout.css), but its height token * stayed at 40px, so every element that offsets itself by * header + topbar: the homepage hero, the page hero, the overlay header, * reserved 40px of empty space on tablet and phone. Collapsing the token here * fixes all of them at once instead of per-component. */ @media (max-width: 1024px) { :root { --no-topbar-h: 0px; } }