/* ============================================================================ ADMIRAL TECH SERVICES: DESIGN TOKENS (assets/css/tokens.css) ---------------------------------------------------------------------------- Every colour, font, size, radius, shadow and timing value used on the site lives here as a CSS custom property ("variable"). Change it here and it changes everywhere. RULES (from the brand brief): - Colours come from the logo only. Do not add new hues (no purple, teal, neon green). Darker navies are deepened versions of #2C347C / #134B93. - Gold is the accent + call-to-action colour. Blue carries structure. - Signal red-orange (#E93E3A) is for alerts and focus accents only. - Gold must NEVER be used as text on white/light backgrounds: it fails contrast (1.6:1). On light sections, gold appears only as a button fill with ink text on top (12.3:1). Contrast checks (WCAG AA needs 4.5:1 for body text, 3:1 for large text / UI parts). Measured values: white on navy-950 ........ 19.7 muted text on navy-800 ... 10.1 gold on navy-800 ........ 11.0 blue-400 on navy-800 ...... 5.0 blue-300 on navy-800 ...... 6.9 ink on gold button ....... 12.3 ink on orange end of btn .. 8.8 ink on light bg .......... 18.0 slate on light bg ......... 8.2 link blue on white ........ 8.6 signal on white ........... 4.0 (borders/icons only, not small text) ========================================================================== */ /* --------------------------------------------------------------------------- FONTS (self-hosted, Latin subset, from Fontsource / SIL Open Font Licence) font-display: swap shows a fallback font instantly, then swaps in. --------------------------------------------------------------------------- */ @font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-900-italic.woff2") format("woff2"); font-weight: 900; font-style: italic; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-800-italic.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } :root { /* ---------- Brand colours, straight from the logo ---------- */ --admiral-blue-1: #3E92CF; /* ADMIRAL letters, gradient start */ --admiral-blue-2: #2C347C; /* ADMIRAL letters, gradient end */ --jacket-1: #4E8ECB; --jacket-2: #2967B1; --jacket-3: #1D6BB5; --jacket-4: #134B93; --gold-1: #FFF33B; /* TECH SERVICES gradient: light */ --gold-2: #FEC529; /* middle */ --gold-3: #F6991E; /* deep */ --brass: #EFC01B; --signal: #E93E3A; /* ADMIRAL outline: alerts/focus accents only */ --ink: #0B0D0D; --white: #FFFFFF; /* ---------- Derived navies (deepened #2C347C / #134B93) ---------- */ --navy-950: #060A1C; /* deepest page background */ --navy-900: #08102A; --navy-850: #0A1435; --navy-800: #0B1640; /* standard dark section */ --navy-700: #13205A; /* raised / highlight */ /* ---------- Derived light tones (blue-tinted, not a new hue) ---------- */ --blue-300: #6FA8DA; /* light blue for text accents on navy */ --mist: #B9C6DE; /* muted body text on navy */ --light-50: #F3F6FB; /* light section background */ --light-100:#E4EBF5; /* light section borders/cards */ --slate: #3D4A63; /* secondary text on light */ /* ---------- Semantic roles (use these in components) ---------- */ --bg-dark: var(--navy-950); --bg-dark-alt: var(--navy-800); --bg-light: var(--light-50); --text-on-dark: var(--white); --muted-on-dark: var(--mist); --accent-on-dark: var(--gold-2); --text-on-light: var(--ink); --muted-on-light: var(--slate); --link-on-light: var(--jacket-4); --focus: var(--gold-2); /* ---------- Gradients ---------- */ --grad-admiral: linear-gradient(135deg, var(--admiral-blue-1), var(--admiral-blue-2)); --grad-gold: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 45%, var(--gold-3) 100%); --grad-border: linear-gradient(135deg, rgba(78,142,203,.75), rgba(78,142,203,.15) 45%, rgba(254,197,41,.55)); --grad-trace: linear-gradient(90deg, var(--gold-3), var(--gold-2), var(--gold-1)); /* ---------- Glass panels ---------- */ --glass-bg: rgba(11, 22, 64, .55); --glass-bg-2: rgba(19, 32, 90, .35); --glass-blur: 14px; --glass-glow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 40px rgba(62,146,207,.08); /* ---------- Type ---------- */ --font-display: "Montserrat", "Arial Black", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; /* Fluid type scale: min size at 360px wide → max size at 1440px wide */ --step--1: clamp(.8125rem, .78rem + .15vw, .875rem); --step-0: clamp(1rem, .96rem + .2vw, 1.125rem); --step-1: clamp(1.2rem, 1.1rem + .45vw, 1.45rem); --step-2: clamp(1.45rem, 1.25rem + .9vw, 2rem); --step-3: clamp(1.8rem, 1.45rem + 1.6vw, 2.9rem); --step-4: clamp(2.2rem, 1.6rem + 2.8vw, 4.1rem); /* ---------- Spacing / layout ---------- */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --section-pad: clamp(4rem, 3rem + 5vw, 8rem); --container: 1200px; --gutter: clamp(1rem, .5rem + 2.5vw, 2.5rem); --header-h: 76px; --header-h-condensed: 60px; /* ---------- Shape ---------- */ --radius-sm: 6px; --radius: 14px; --radius-lg: 22px; --shadow-card: 0 20px 50px -20px rgba(0,0,0,.6); --shadow-gold: 0 10px 30px -10px rgba(246,153,30,.55); /* ---------- Motion (short + smooth, 200–600ms) ---------- */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --dur-1: 200ms; --dur-2: 350ms; --dur-3: 600ms; }