/* ESP v2 design tokens. Warm anthracite surfaces, one colour per data center system, three free typefaces. */ /* ---------- Fonts (self-hosted, SIL OFL 1.1, licences in assets/fonts) ---------- */ @font-face { font-family: "Barlow"; src: url("../assets/fonts/barlow-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Barlow"; src: url("../assets/fonts/barlow-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Barlow"; src: url("../assets/fonts/barlow-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("../assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono"; src: url("../assets/fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono"; src: url("../assets/fonts/jetbrains-mono-greek-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* Local fallback sized like Barlow, so text barely moves when the web font arrives */ @font-face { font-family: "Barlow Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Roboto"); size-adjust: 94.5%; ascent-override: 105.8%; descent-override: 21.2%; line-gap-override: 0%; } @font-face { font-family: "DSEG7 Classic"; src: url("../assets/fonts/dseg7-classic-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* Surfaces: warm anthracite */ --bg-0: #1F1E1D; /* deepest (footer) */ --bg-1: #252423; /* page */ --bg-2: #2A2928; /* surfaces */ --bg-3: #302E2D; /* cards, spec cards */ --bg-4: #353432; /* borders, idle tracks */ --bg-light: #DAD5D0; /* light breathing section */ --bg-light-2: #E7E3DF; /* cards on the light section */ /* Text */ --tx-1: #F6F4F2; --tx-2: #D5D3D1; --tx-3: #B4B1AF; --tx-4: #93908D; --ink-1: #252423; /* text on the light section */ --ink-2: #4B4845; /* Brand: ESP blue */ --brand: #1F6FB5; --brand-hover: #1A5F9C; --brand-light: #7CC0F2; /* One colour per data center system (shade 1 = pure) */ --sys-power: #FF4B4B; --sys-busway: #FF7D36; --sys-ups: #FFA828; --sys-genset: #FFCC2A; --sys-dcim: #00FFAA; --sys-water: #26F2D5; --sys-cooling: #05DBE9; --sys-fire: #A369FF; --sys-telecom: #4D9CFF; /* telecom sites, outside the data center */ /* Shades 2 to 8: progressive mix towards the page background. 1 = active, 3-4 = secondary strokes, 6-8 = idle tracks, borders, halos. */ --sys-power-2: color-mix(in oklab, var(--sys-power) 84%, var(--bg-1)); --sys-power-3: color-mix(in oklab, var(--sys-power) 68%, var(--bg-1)); --sys-power-4: color-mix(in oklab, var(--sys-power) 54%, var(--bg-1)); --sys-power-5: color-mix(in oklab, var(--sys-power) 40%, var(--bg-1)); --sys-power-6: color-mix(in oklab, var(--sys-power) 28%, var(--bg-1)); --sys-power-7: color-mix(in oklab, var(--sys-power) 18%, var(--bg-1)); --sys-power-8: color-mix(in oklab, var(--sys-power) 10%, var(--bg-1)); --sys-busway-2: color-mix(in oklab, var(--sys-busway) 84%, var(--bg-1)); --sys-busway-3: color-mix(in oklab, var(--sys-busway) 68%, var(--bg-1)); --sys-busway-4: color-mix(in oklab, var(--sys-busway) 54%, var(--bg-1)); --sys-busway-5: color-mix(in oklab, var(--sys-busway) 40%, var(--bg-1)); --sys-busway-6: color-mix(in oklab, var(--sys-busway) 28%, var(--bg-1)); --sys-busway-7: color-mix(in oklab, var(--sys-busway) 18%, var(--bg-1)); --sys-busway-8: color-mix(in oklab, var(--sys-busway) 10%, var(--bg-1)); --sys-ups-2: color-mix(in oklab, var(--sys-ups) 84%, var(--bg-1)); --sys-ups-3: color-mix(in oklab, var(--sys-ups) 68%, var(--bg-1)); --sys-ups-4: color-mix(in oklab, var(--sys-ups) 54%, var(--bg-1)); --sys-ups-5: color-mix(in oklab, var(--sys-ups) 40%, var(--bg-1)); --sys-ups-6: color-mix(in oklab, var(--sys-ups) 28%, var(--bg-1)); --sys-ups-7: color-mix(in oklab, var(--sys-ups) 18%, var(--bg-1)); --sys-ups-8: color-mix(in oklab, var(--sys-ups) 10%, var(--bg-1)); --sys-genset-2: color-mix(in oklab, var(--sys-genset) 84%, var(--bg-1)); --sys-genset-3: color-mix(in oklab, var(--sys-genset) 68%, var(--bg-1)); --sys-genset-4: color-mix(in oklab, var(--sys-genset) 54%, var(--bg-1)); --sys-genset-5: color-mix(in oklab, var(--sys-genset) 40%, var(--bg-1)); --sys-genset-6: color-mix(in oklab, var(--sys-genset) 28%, var(--bg-1)); --sys-genset-7: color-mix(in oklab, var(--sys-genset) 18%, var(--bg-1)); --sys-genset-8: color-mix(in oklab, var(--sys-genset) 10%, var(--bg-1)); --sys-dcim-2: color-mix(in oklab, var(--sys-dcim) 84%, var(--bg-1)); --sys-dcim-3: color-mix(in oklab, var(--sys-dcim) 68%, var(--bg-1)); --sys-dcim-4: color-mix(in oklab, var(--sys-dcim) 54%, var(--bg-1)); --sys-dcim-5: color-mix(in oklab, var(--sys-dcim) 40%, var(--bg-1)); --sys-dcim-6: color-mix(in oklab, var(--sys-dcim) 28%, var(--bg-1)); --sys-dcim-7: color-mix(in oklab, var(--sys-dcim) 18%, var(--bg-1)); --sys-dcim-8: color-mix(in oklab, var(--sys-dcim) 10%, var(--bg-1)); --sys-water-2: color-mix(in oklab, var(--sys-water) 84%, var(--bg-1)); --sys-water-3: color-mix(in oklab, var(--sys-water) 68%, var(--bg-1)); --sys-water-4: color-mix(in oklab, var(--sys-water) 54%, var(--bg-1)); --sys-water-5: color-mix(in oklab, var(--sys-water) 40%, var(--bg-1)); --sys-water-6: color-mix(in oklab, var(--sys-water) 28%, var(--bg-1)); --sys-water-7: color-mix(in oklab, var(--sys-water) 18%, var(--bg-1)); --sys-water-8: color-mix(in oklab, var(--sys-water) 10%, var(--bg-1)); --sys-cooling-2: color-mix(in oklab, var(--sys-cooling) 84%, var(--bg-1)); --sys-cooling-3: color-mix(in oklab, var(--sys-cooling) 68%, var(--bg-1)); --sys-cooling-4: color-mix(in oklab, var(--sys-cooling) 54%, var(--bg-1)); --sys-cooling-5: color-mix(in oklab, var(--sys-cooling) 40%, var(--bg-1)); --sys-cooling-6: color-mix(in oklab, var(--sys-cooling) 28%, var(--bg-1)); --sys-cooling-7: color-mix(in oklab, var(--sys-cooling) 18%, var(--bg-1)); --sys-cooling-8: color-mix(in oklab, var(--sys-cooling) 10%, var(--bg-1)); --sys-fire-2: color-mix(in oklab, var(--sys-fire) 84%, var(--bg-1)); --sys-fire-3: color-mix(in oklab, var(--sys-fire) 68%, var(--bg-1)); --sys-fire-4: color-mix(in oklab, var(--sys-fire) 54%, var(--bg-1)); --sys-fire-5: color-mix(in oklab, var(--sys-fire) 40%, var(--bg-1)); --sys-fire-6: color-mix(in oklab, var(--sys-fire) 28%, var(--bg-1)); --sys-fire-7: color-mix(in oklab, var(--sys-fire) 18%, var(--bg-1)); --sys-fire-8: color-mix(in oklab, var(--sys-fire) 10%, var(--bg-1)); --sys-telecom-2: color-mix(in oklab, var(--sys-telecom) 84%, var(--bg-1)); --sys-telecom-3: color-mix(in oklab, var(--sys-telecom) 68%, var(--bg-1)); --sys-telecom-4: color-mix(in oklab, var(--sys-telecom) 54%, var(--bg-1)); --sys-telecom-5: color-mix(in oklab, var(--sys-telecom) 40%, var(--bg-1)); --sys-telecom-6: color-mix(in oklab, var(--sys-telecom) 28%, var(--bg-1)); --sys-telecom-7: color-mix(in oklab, var(--sys-telecom) 18%, var(--bg-1)); --sys-telecom-8: color-mix(in oklab, var(--sys-telecom) 10%, var(--bg-1)); /* Overlay panel over the hero scene */ --panel-bg: rgba(18, 17, 16, 0.78); --panel-hover: #E8E9E9; --rule: rgba(246, 244, 242, 0.1); --rule-ink: rgba(37, 36, 35, 0.18); /* Motion */ --ease-ui: cubic-bezier(.4, 0, .2, 1); --dur-fast: 125ms; --dur-ui: 150ms; --dur-panel: 250ms; --dur-big: 500ms; /* Type */ --font-display: "Barlow", "Barlow Fallback", "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace; --font-digit: "DSEG7 Classic", var(--font-mono); /* Layout */ --gutter: clamp(20px, 5vw, 80px); --header-h: 68px; --maxw: 1440px; /* Stacking */ --z-stage: 1; --z-content: 2; --z-header: 50; --z-skip: 100; color-scheme: dark; } /* Any element tagged with a system gets that system's colour as --sys. --sys-ink is a lighter tint that stays AA-readable for small text. */ [data-sys="power"] { --sys: var(--sys-power); --sys-3: var(--sys-power-3); --sys-6: var(--sys-power-6); --sys-8: var(--sys-power-8); } [data-sys="ups"] { --sys: var(--sys-ups); --sys-3: var(--sys-ups-3); --sys-6: var(--sys-ups-6); --sys-8: var(--sys-ups-8); } [data-sys="genset"] { --sys: var(--sys-genset); --sys-3: var(--sys-genset-3); --sys-6: var(--sys-genset-6); --sys-8: var(--sys-genset-8); } [data-sys="busway"] { --sys: var(--sys-busway); --sys-3: var(--sys-busway-3); --sys-6: var(--sys-busway-6); --sys-8: var(--sys-busway-8); } [data-sys="cooling"] { --sys: var(--sys-cooling); --sys-3: var(--sys-cooling-3); --sys-6: var(--sys-cooling-6); --sys-8: var(--sys-cooling-8); } [data-sys="water"] { --sys: var(--sys-water); --sys-3: var(--sys-water-3); --sys-6: var(--sys-water-6); --sys-8: var(--sys-water-8); } [data-sys="dcim"] { --sys: var(--sys-dcim); --sys-3: var(--sys-dcim-3); --sys-6: var(--sys-dcim-6); --sys-8: var(--sys-dcim-8); } [data-sys="fire"] { --sys: var(--sys-fire); --sys-3: var(--sys-fire-3); --sys-6: var(--sys-fire-6); --sys-8: var(--sys-fire-8); } [data-sys="telecom"] { --sys: var(--sys-telecom); --sys-3: var(--sys-telecom-3); --sys-6: var(--sys-telecom-6); --sys-8: var(--sys-telecom-8); } [data-sys] { --sys-ink: color-mix(in oklab, var(--sys) 70%, #fff); }