/* =========================================================================
nusoft.com.co — design system
Built from the one thing the brand actually owns: the isotype. It is three
straight-edged shapes whose every edge is vertical, horizontal or at exactly
45 degrees, in a single deep petrol. So the site is built on the same three
facts —
the diagonal every accent runs at 45deg: the beams behind the hero, the
sweep across a card on hover, the cut corner of a panel,
the rule that closes a section. Nothing on this site is
decorated with a curve the mark would not have drawn.
the lattice the mark is a figure on a 5x5 grid, so the page has a grid
under it too (data-texture), and the hero is a lattice of
nodes and links — a nucleus, which is what "núcleo" means.
one signal petrol is the ground, and exactly one bright colour is
allowed to mean something on it. Which one is an axis
(data-accent), because it is the cheapest way to show a
client four different companies in four seconds.
THE RULE OF THIS FILE. Nothing below the token block contains a raw colour.
Everything is a custom property, so a theme is one block of redefinitions
and the twenty-odd other axes compose freely with it — any theme, any
accent, any corner shape, any typeface, all at once, all from one attribute
each on . What the axes are, and what the site opens as, is NOT
written here: assets/config/appearance.json is the single source.
========================================================================= */
/* ---------------------------------------------------------------- fonts ---- */
/* Self-hosted, every one of them: the site loads no font from a CDN. Two
subsets each with the ranges Google publishes, so a Latin page never fetches
the extended cut. */
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url('../fonts/figtree-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Newsreader';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url('../fonts/newsreader-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Newsreader';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url('../fonts/newsreader-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Instrument Serif';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/instrumentserif-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Instrument Serif';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/instrumentserif-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Prata';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/prata-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'EB Garamond';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('../fonts/ebgaramond-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'EB Garamond';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('../fonts/ebgaramond-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* --------------------------------------------------------------- palette --- */
:root {
/* PETROL — the trademark colour and the ramp built around it. #00232f is
the client value; everything else is that hue opened up and darkened so
a theme can be built without ever inventing a colour. */
--petrol-50: #eef6f8;
--petrol-100: #d6e8ed;
--petrol-200: #a9ccd7;
--petrol-300: #6ea3b4;
--petrol-400: #3d7488;
--petrol-500: #1f5468;
--petrol-600: #0f3d4e;
--petrol-700: #062f3d;
--petrol-800: #00232f; /* client value — the trademark */
--petrol-900: #001820;
--petrol-950: #000f14;
/* SOLAR — the company's secondary, inherited from the educa.city brand.
#F7AC11 is the client value; the rest is that hue opened and deepened so
the `solar` theme and the `amber` accent can both be built from it
without anyone inventing a second yellow. */
--solar-100: #fdf0d2;
--solar-200: #fbdc98;
--solar-300: #f9c452;
--solar-400: #f7ac11; /* client value — the secondary */
--solar-500: #d18d05;
--solar-600: #a06b00;
--solar-700: #6d4900;
/* SLATE — the neutral. Deliberately cool, so it sits under petrol rather
than beside it. */
--slate-50: #f4f6f9;
--slate-100: #e6eaf1;
--slate-200: #ccd4e0;
--slate-300: #a2aebf;
--slate-400: #6e7c92;
--slate-500: #566379;
--slate-600: #414d60;
--slate-700: #2f3948;
--slate-800: #1f2733;
--slate-900: #141a23;
/* type + shape, theme-independent.
The site's own faces are subset to latin and latin-ext, so the languages
it ships in do not all fit in them. Font fallback is per glyph: Latin
copy still renders in Figtree while other scripts fall through to the
reader's system faces — named here rather than left to chance, because
the default for a missing script is usually the worst face installed. */
--stack-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Helvetica, Arial,
'Yu Gothic UI', 'Hiragino Sans', Meiryo, /* ja */
'Microsoft YaHei', 'PingFang SC', 'Noto Sans CJK SC', /* zh */
'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', /* ko */
'Nirmala UI', 'Kohinoor Devanagari', 'Noto Sans Devanagari', /* hi */
sans-serif;
--serif-tail: Georgia, 'Times New Roman',
'Yu Mincho', 'Hiragino Mincho ProN', /* ja */
'Songti SC', SimSun, 'Noto Serif CJK SC', /* zh */
Batang, 'Apple SD Gothic Neo', 'Noto Serif KR', /* ko */
'Noto Serif Devanagari', Kokila, 'Nirmala UI', /* hi */
serif;
--stack-serif: 'Newsreader', var(--serif-tail);
--stack-instrument: 'Instrument Serif', var(--serif-tail);
--stack-prata: 'Prata', var(--serif-tail);
--stack-garamond: 'EB Garamond', var(--serif-tail);
--sans: var(--stack-sans);
/* The technical voice: version numbers, stack names, endpoint samples, the
figures in a statistic. System faces only — a mono web font would be a
fourth download for text measured in dozens of characters. */
--mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', 'Cascadia Mono',
Menlo, Consolas, 'Liberation Mono', monospace;
/* --surface-3 is dark in every theme, so what sits on it is always light.
That is not a per-theme decision, so it does not live in a theme. */
--on-dark: #ffffff;
--radius: 14px;
--radius-sm: 9px;
--radius-lg: 22px;
/* Pictures round on their own axis: a client may want square photographs
inside rounded panels, or the reverse. Its own token, deliberately —
deriving it from --radius means squaring the cards squares the pictures
with them, and the two axes stop being independent. */
--radius-img: 14px;
--radius-card: 14px;
--wrap: 1240px;
--wrap-narrow: 760px;
--ease: cubic-bezier(.22,.61,.36,1);
--ease-out: cubic-bezier(.16,1,.3,1);
/* vertical rhythm — the density axis moves both */
--sec-pad: 104px;
--sec-gap: 34px;
/* the mark's own angle, used by every diagonal in the site */
--tilt: 45deg;
/* paper grain — one inline turbulence tile, reused by the noise texture */
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
/* ---------------------------------------------------------------- accent ---
The one bright colour on the page. Each option publishes two values — one
that works on a light ground and one that works on a dark one — and the
theme decides which of the two --accent resolves to. That is what lets the
two axes compose: four accents times seven themes is twenty-eight looks, and
not one of them needs a rule of its own.
`--a-on` is what goes ON the accent when it is used as a fill, and it is
never white for the light accents — amber with white text is the single most
common contrast failure in this kind of palette.
Each `--a-deep` is dark enough to clear 4.5:1 against the lightest and the
softest grounds any light theme uses. That is a real constraint, not a
nicety: these colours carry the eyebrows, which are small, uppercase and
tracked out — the least legible text on the site. */
[data-accent='cyan'] {
--a-bright: #2ad2e8;
--a-deep: #076576;
--a-soft-l: #e4f7fb;
--a-soft-d: rgba(42,210,232,.13);
--a-on: #00232f;
--a-glow: rgba(42,210,232,.35);
}
[data-accent='violet'] {
--a-bright: #a99bff;
--a-deep: #5238c9;
--a-soft-l: #efedff;
--a-soft-d: rgba(169,155,255,.15);
--a-on: #16113a;
--a-glow: rgba(169,155,255,.34);
}
/* the company's own secondary, straight from the brand files */
[data-accent='amber'] {
--a-bright: var(--solar-400);
--a-deep: #7d5300;
--a-soft-l: #fdf0d2;
--a-soft-d: rgba(247,172,17,.16);
--a-on: #2a1c00;
--a-glow: rgba(247,172,17,.34);
}
[data-accent='lime'] {
--a-bright: #8ee86a;
--a-deep: #35691c;
--a-soft-l: #eefbe6;
--a-soft-d: rgba(142,232,106,.14);
--a-on: #10240a;
--a-glow: rgba(142,232,106,.30);
}
/* ============================== THEMES ====================================
Seven grounds. Three are light and four are dark, and the difference between
those two families is the only thing a component ever needs to know — which
is why --accent, --scrim, --on-accent and the --on-media-* set are declared
per theme, and nothing else in this file ever asks "is it dark?".
THE --on-media-* SET is the ink the see-through header wears while it floats
over the hero. A light theme draws a light hero, so there it is the theme's
own ink; a dark theme draws a dark one, so there it is white. Getting this
wrong is invisible in the theme you are working in and total in the other. */
:root {
/* the light-theme answer, and the default: the hero is the page */
--on-media: var(--ink);
--on-media-2: var(--ink-2);
--on-media-muted: var(--muted);
--on-media-line: var(--line);
--on-media-line-2: var(--line-strong);
--on-media-surface: var(--surface-2);
}
[data-theme='deep'],
[data-theme='core'],
[data-theme='solar'],
[data-theme='black'] {
--on-media: var(--on-dark);
--on-media-2: rgba(255,255,255,.86);
--on-media-muted: rgba(255,255,255,.66);
--on-media-line: rgba(255,255,255,.24);
--on-media-line-2: rgba(255,255,255,.42);
--on-media-surface: rgba(255,255,255,.12);
}
/* ------------------------------------------------------------- theme: ice -- */
:root,
[data-theme='ice'] {
--bg: #f6fafb;
--bg-2: #eaf1f4;
--surface: #ffffff;
--surface-2: #f1f6f8;
--surface-3: var(--petrol-800);
--ink: #062431;
--ink-2: var(--petrol-600);
--muted: #4e6270;
--line: #dde7ec;
--line-strong: #c2d3da;
--brand: var(--petrol-800);
--brand-strong: var(--petrol-900);
--brand-soft: var(--petrol-50);
--on-brand: #ffffff;
--accent: var(--a-deep);
--accent-lit: var(--a-bright); /* the same colour where it may glow */
--accent-soft: var(--a-soft-l);
--on-accent: #ffffff;
--glow: var(--a-glow);
--code: var(--petrol-600);
--scrim: linear-gradient(180deg, rgba(0,20,27,.72) 0%, rgba(0,20,27,.42) 46%, rgba(0,20,27,.84) 100%);
--shadow: 0 26px 60px -30px rgba(0,35,47,.36);
--shadow-sm: 0 10px 26px -16px rgba(0,35,47,.34);
--texture-op: .05;
--grain-op: .022;
color-scheme: light;
}
/* ----------------------------------------------------------- theme: paper -- */
[data-theme='paper'] {
--bg: #f8f6f1;
--bg-2: #efebe3;
--surface: #fffefb;
--surface-2: #f3efe8;
--surface-3: var(--petrol-800);
--ink: #1c2429;
--ink-2: #3d4b52;
--muted: #5f6569;
--line: #e5ded3;
--line-strong: #cfc5b6;
--brand: var(--petrol-800);
--brand-strong: var(--petrol-900);
--brand-soft: #eef2f1;
--on-brand: #ffffff;
--accent: var(--a-deep);
--accent-lit: var(--a-bright);
--accent-soft: var(--a-soft-l);
--on-accent: #ffffff;
--glow: var(--a-glow);
--code: var(--petrol-600);
--scrim: linear-gradient(180deg, rgba(24,20,14,.70) 0%, rgba(24,20,14,.40) 46%, rgba(24,20,14,.84) 100%);
--shadow: 0 26px 60px -30px rgba(38,32,22,.30);
--shadow-sm: 0 10px 26px -16px rgba(38,32,22,.28);
--texture-op: .05;
--grain-op: .04;
color-scheme: light;
}
/* ----------------------------------------------------------- theme: steel -- */
[data-theme='steel'] {
--bg: #eef2f7;
--bg-2: #e3e9f1;
--surface: #ffffff;
--surface-2: #e9eef5;
--surface-3: var(--slate-800);
--ink: #1b2431;
--ink-2: var(--slate-600);
--muted: #596475;
--line: #d8e0ea;
--line-strong: #bcc7d6;
--brand: var(--slate-700);
--brand-strong: var(--slate-800);
--brand-soft: var(--slate-50);
--on-brand: #ffffff;
--accent: var(--a-deep);
--accent-lit: var(--a-bright);
--accent-soft: var(--a-soft-l);
--on-accent: #ffffff;
--glow: var(--a-glow);
--code: var(--slate-600);
--scrim: linear-gradient(180deg, rgba(15,20,28,.70) 0%, rgba(15,20,28,.40) 46%, rgba(15,20,28,.84) 100%);
--shadow: 0 26px 60px -30px rgba(20,26,35,.32);
--shadow-sm: 0 10px 26px -16px rgba(20,26,35,.30);
--texture-op: .06;
--grain-op: .02;
color-scheme: light;
}
/* ------------------------------------------------------------ theme: deep --
The trademark colour as the ground. This is what the site opens as: the mark
was drawn for this, and a company that builds systems people run their
operation on should not look like a brochure. */
[data-theme='deep'] {
--bg: #00232f;
--bg-2: #001b25;
--surface: #04303e;
--surface-2: #073c4d;
--surface-3: #001820;
--ink: #e8f3f6;
--ink-2: #b4ccd4;
--muted: #7b9aa5;
--line: rgba(255,255,255,.11);
--line-strong: rgba(255,255,255,.22);
--brand: var(--petrol-100);
--brand-strong: #ffffff;
--brand-soft: rgba(214,232,237,.10);
--on-brand: var(--petrol-900);
--accent: var(--a-bright);
--accent-lit: var(--a-bright);
--accent-soft: var(--a-soft-d);
--on-accent: var(--a-on);
--glow: var(--a-glow);
--code: var(--petrol-200);
--scrim: linear-gradient(180deg, rgba(0,12,17,.58) 0%, rgba(0,12,17,.30) 46%, rgba(0,12,17,.88) 100%);
--shadow: 0 30px 70px -34px rgba(0,0,0,.8);
--shadow-sm: 0 12px 30px -18px rgba(0,0,0,.72);
--texture-op: .07;
--grain-op: .05;
color-scheme: dark;
}
/* ------------------------------------------------------------ theme: core --
The trademark colour taken down as far as it goes and still be a colour:
every ground here is a shade of #00232f rather than a neutral. Where `deep`
is the brand at working strength, this is the brand at rest — the darkest
the site gets without turning to black, which is what `black` is for. */
[data-theme='core'] {
--bg: #00141b;
--bg-2: #000d12;
--surface: #001e28;
--surface-2: #002a37;
--surface-3: #00080b;
--ink: #dcecf1;
--ink-2: #9fc0ca;
--muted: #6b8d99;
--line: rgba(146,201,216,.13);
--line-strong: rgba(146,201,216,.26);
--brand: var(--petrol-200);
--brand-strong: #ffffff;
--brand-soft: rgba(169,204,215,.10);
--on-brand: var(--petrol-950);
--accent: var(--a-bright);
--accent-lit: var(--a-bright);
--accent-soft: var(--a-soft-d);
--on-accent: var(--a-on);
--glow: var(--a-glow);
--code: var(--petrol-300);
--scrim: linear-gradient(180deg, rgba(0,8,11,.62) 0%, rgba(0,8,11,.32) 46%, rgba(0,8,11,.90) 100%);
--shadow: 0 30px 70px -34px rgba(0,0,0,.85);
--shadow-sm: 0 12px 30px -18px rgba(0,0,0,.78);
--texture-op: .09;
--grain-op: .05;
color-scheme: dark;
}
/* ----------------------------------------------------------- theme: solar --
Petrol warmed through, built around #F7AC11 — the secondary that comes from
the educa.city brand. The grounds carry a little of it, the inks are warm
rather than cool, and --brand IS the amber, so the theme reads as itself
even under another accent. Its intended pairing is the `amber` accent, which
is that exact colour; the other three still compose with it. */
[data-theme='solar'] {
--bg: #06212b;
--bg-2: #04191f;
--surface: #0b2d39;
--surface-2: #123a48;
--surface-3: #030f14;
--ink: #fcf4e6;
--ink-2: #e2cfae;
--muted: #a2907a;
--line: rgba(247,172,17,.16);
--line-strong: rgba(247,172,17,.34);
--brand: var(--solar-400);
--brand-strong: var(--solar-300);
--brand-soft: rgba(247,172,17,.12);
--on-brand: #2a1c00;
--accent: var(--a-bright);
--accent-lit: var(--a-bright);
--accent-soft: var(--a-soft-d);
--on-accent: var(--a-on);
--glow: var(--a-glow);
--code: var(--solar-300);
--scrim: linear-gradient(180deg, rgba(6,20,26,.62) 0%, rgba(6,20,26,.32) 46%, rgba(6,20,26,.90) 100%);
--shadow: 0 30px 70px -34px rgba(0,0,0,.8);
--shadow-sm: 0 12px 30px -18px rgba(0,0,0,.72);
--texture-op: .08;
--grain-op: .05;
color-scheme: dark;
}
/* ----------------------------------------------------------- theme: black -- */
[data-theme='black'] {
--bg: #07090b;
--bg-2: #030405;
--surface: #101418;
--surface-2: #171d23;
--surface-3: #000000;
--ink: #edf1f3;
--ink-2: #bcc6cd;
--muted: #7d878f;
--line: rgba(255,255,255,.10);
--line-strong: rgba(255,255,255,.20);
--brand: #ffffff;
--brand-strong: #ffffff;
--brand-soft: rgba(255,255,255,.07);
--on-brand: #07090b;
--accent: var(--a-bright);
--accent-lit: var(--a-bright);
--accent-soft: var(--a-soft-d);
--on-accent: var(--a-on);
--glow: var(--a-glow);
--code: #9aa6ae;
--scrim: linear-gradient(180deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.32) 46%, rgba(0,0,0,.90) 100%);
--shadow: 0 30px 70px -34px rgba(0,0,0,.9);
--shadow-sm: 0 12px 30px -18px rgba(0,0,0,.8);
--texture-op: .08;
--grain-op: .06;
color-scheme: dark;
}
/* Copies of the theme's own colours, taken where nothing has shadowed them
yet. The see-through header redefines --ink and friends ON ITSELF so its
children follow with no extra rules — but its dropdown panels are solid, not
see-through, and need the theme back. These let them ask for it. They
resolve per theme because the substitution happens on :root. */
:root {
--ink-root: var(--ink);
--ink-2-root: var(--ink-2);
--muted-root: var(--muted);
--surface-root: var(--surface);
--surface-2-root: var(--surface-2);
--line-root: var(--line);
--accent-root: var(--accent);
--accent-soft-root: var(--accent-soft);
--on-accent-root: var(--on-accent);
}
/* ============================ COMPOSABLE AXES ============================= */
/* ------------------------------------------------------------ data-font ---- */
[data-font='sans'] { --sans: var(--stack-sans); --head: var(--stack-sans); }
[data-font='serif'] { --sans: var(--stack-sans); --head: var(--stack-serif); }
[data-font='instrument'] { --sans: var(--stack-sans); --head: var(--stack-instrument); }
[data-font='prata'] { --sans: var(--stack-sans); --head: var(--stack-prata); }
[data-font='garamond'] { --sans: var(--stack-sans); --head: var(--stack-garamond); }
:root { --head: var(--stack-sans); }
/* The display faces carry their weight in their drawing, not in a bold, and
they set tighter than a grotesque of the same size. */
[data-font='instrument'] h1, [data-font='instrument'] h2,
[data-font='prata'] h1, [data-font='prata'] h2 { font-weight: 400; letter-spacing: -.01em; }
[data-font='serif'] h1, [data-font='serif'] h2,
[data-font='garamond'] h1, [data-font='garamond'] h2 { letter-spacing: -.012em; }
/* ----------------------------------------------------------- data-shape ---- */
[data-shape='pill'] { --radius: 999px; --radius-sm: 999px; --radius-lg: 999px; }
[data-shape='soft'] { --radius: 14px; --radius-sm: 9px; --radius-lg: 22px; }
[data-shape='square'] { --radius: 0px; --radius-sm: 0px; --radius-lg: 0px; }
[data-card='card-round'] { --radius-card: 14px; }
[data-card='card-sharp'] { --radius-card: 0px; }
[data-pic='pic-round'] { --radius-img: 14px; }
[data-pic='pic-sharp'] { --radius-img: 0px; }
/* ----------------------------------------------------------- data-photo ----
Colour photography, or greyscale that comes back to colour on hover. The
team portraits on #/about carry that treatment as their own baseline rather
than as an option — see `.person-pic` — so this axis reaches the product
screenshots, which are still marked placeholders, and anything else that
arrives later. */
[data-photo='mono'] img,
[data-photo='mono'] .photo,
[data-photo='mono'] .ph {
filter: grayscale(1);
transition: filter .45s var(--ease);
}
[data-photo='mono'] img:hover,
[data-photo='mono'] .photo:hover,
[data-photo='mono'] .ph:hover { filter: grayscale(0); }
/* ------------------------------------------------------------- data-pad ---- */
[data-pad='normal'] { --btn-pad: 13px 24px; --btn-pad-sm: 9px 17px; }
[data-pad='small'] { --btn-pad: 10px 19px; --btn-pad-sm: 7px 14px; }
[data-pad='xs'] { --btn-pad: 8px 15px; --btn-pad-sm: 6px 12px; }
/* --------------------------------------------------------- data-density ---- */
[data-density='roomy'] { --sec-pad: 104px; --sec-gap: 34px; }
[data-density='tight'] { --sec-pad: 62px; --sec-gap: 22px; }
/* ------------------------------------------------------------ data-rule ---- */
/* A hairline closing every section — at the mark's angle, so even the divider
is the logo. */
[data-rule='line'] .band + .band::before,
[data-rule='line'] section + section::before {
content: '';
position: absolute;
inset: 0 auto auto 0;
width: 100%;
height: 1px;
background: repeating-linear-gradient(var(--tilt),
var(--line) 0 6px, transparent 6px 12px);
}
[data-rule='line'] section { position: relative; }
/* --------------------------------------------------------- data-headw ------ */
[data-headw='narrow'] .section-head { max-width: 660px; }
[data-headw='wide'] .section-head { max-width: none; }
/* ------------------------------------------------------------- data-num ---- */
[data-num='hide'] .step-n,
[data-num='hide'] .cap-n { display: none; }
/* .step is a two-column grid with the number in the first track. Take the
number out and the body would drop into that 92px track and wrap one word
at a time, so the track goes with it. */
[data-num='hide'] .step { grid-template-columns: minmax(0, 1fr); }
/* ============================== BASE ====================================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--sans);
font-size: 17px;
line-height: 1.62;
font-synthesis-weight: none;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* ---------------------------------------------------------- data-texture ---
The ground the whole site stands on. One fixed layer behind everything, at
the mark's own angle for `grid` — so scrolling the page moves the content
across a lattice that stays put, which is the quietest way to say
"engineered" without printing a circuit board on the background. */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: var(--texture-op);
}
[data-texture='flat'] body::before { display: none; }
[data-texture='grid'] body::before {
background-image:
repeating-linear-gradient(var(--tilt), var(--ink) 0 1px, transparent 1px 46px),
repeating-linear-gradient(calc(var(--tilt) * -1), var(--ink) 0 1px, transparent 1px 46px);
}
[data-texture='dots'] body::before {
background-image: radial-gradient(var(--ink) .8px, transparent .9px);
background-size: 22px 22px;
}
[data-texture='noise'] body::before {
background-image: var(--grain);
opacity: var(--grain-op);
}
h1, h2, h3, h4 {
font-family: var(--head);
margin: 0 0 .5em;
line-height: 1.08;
letter-spacing: -.022em;
font-weight: 800;
text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 5.4vw, 4.15rem); }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.85rem); }
h3 { font-size: 1.24rem; letter-spacing: -.012em; }
h4 { font-size: .95rem; letter-spacing: -.006em; }
p { margin: 0 0 1em; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }
img, svg, video { max-width: 100%; }
img { height: auto; border-radius: var(--radius-img); }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 3px;
}
hr { border: 0; height: 1px; background: var(--line); margin: 40px 0; }
code, .mono, kbd {
font-family: var(--mono);
font-size: .88em;
letter-spacing: -.01em;
}
.wrap {
width: min(var(--wrap), 100% - 44px);
margin-inline: auto;
position: relative;
z-index: 1;
}
.narrow { max-width: var(--wrap-narrow); }
main { position: relative; z-index: 1; }
section { padding: var(--sec-pad) 0; position: relative; }
section[hidden] { display: none; }
/* the two ground shifts a section may ask for */
.band-soft { background: var(--bg-2); }
.band-dark {
background: var(--surface-3);
--ink: var(--on-dark);
--ink-2: rgba(255,255,255,.80);
--muted: rgba(255,255,255,.60);
--line: rgba(255,255,255,.13);
--line-strong: rgba(255,255,255,.24);
--surface: rgba(255,255,255,.05);
--surface-2: rgba(255,255,255,.08);
--accent: var(--a-bright);
--on-accent: var(--a-on);
--accent-soft: var(--a-soft-d);
--brand: #ffffff;
--on-brand: var(--petrol-900);
color: var(--ink);
}
.eyebrow {
font-family: var(--sans);
font-size: .74rem;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 16px;
display: flex;
align-items: center;
gap: 11px;
}
/* the diagonal tick that opens every eyebrow — a single stroke of the mark */
.eyebrow::before {
content: '';
width: 16px;
height: 16px;
flex: none;
background: currentColor;
clip-path: polygon(0 100%, 72% 0, 100% 0, 28% 100%);
}
.section-head { margin-bottom: 48px; }
.section-head .lead { max-width: 62ch; }
.section-head.center { text-align: center; margin-inline: auto; max-width: 780px; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .lead { margin-inline: auto; }
.lead {
font-size: 1.14rem;
line-height: 1.62;
color: var(--ink-2);
}
.muted { color: var(--muted); }
.small { font-size: .9rem; }
/* the band that splits into a heading column and a content column */
.band-split {
display: grid;
grid-template-columns: minmax(260px, 1fr) minmax(0, 1.35fr);
gap: 56px var(--sec-gap);
align-items: start;
}
.band-split .band-head { margin: 0; position: sticky; top: 108px; }
/* ============================== BUTTONS =================================== */
.btn {
--b-bg: transparent;
--b-ink: var(--ink);
--b-line: var(--line-strong);
display: inline-flex;
align-items: center;
gap: 10px;
padding: var(--btn-pad, 13px 24px);
border-radius: var(--radius);
border: 1px solid var(--b-line);
background: var(--b-bg);
color: var(--b-ink);
font: inherit;
font-size: .95rem;
font-weight: 650;
letter-spacing: -.005em;
text-decoration: none;
cursor: pointer;
position: relative;
overflow: hidden;
transition: transform .28s var(--ease), box-shadow .28s var(--ease),
background-color .2s linear, color .2s linear, border-color .2s linear;
}
.btn-sm { padding: var(--btn-pad-sm, 9px 17px); font-size: .87rem; }
/* the sweep: a band of light crossing at the mark's angle, once, on hover.
Not a glow and not a colour change — the logo's own diagonal, moving. */
.btn::after {
content: '';
position: absolute;
inset: -60% -120%;
background: linear-gradient(var(--tilt), transparent 42%,
rgba(255,255,255,.34) 50%, transparent 58%);
transform: translateX(-120%);
transition: transform .62s var(--ease-out);
pointer-events: none;
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0); }
.btn-primary { --b-bg: var(--accent); --b-ink: var(--on-accent); --b-line: var(--accent); }
.btn-primary:hover { box-shadow: 0 12px 34px -14px var(--glow); }
.btn-dark { --b-bg: var(--surface-3); --b-ink: var(--on-dark); --b-line: var(--surface-3); }
.btn-brand { --b-bg: var(--brand); --b-ink: var(--on-brand); --b-line: var(--brand); }
.btn-ghost { --b-bg: transparent; --b-ink: var(--ink); --b-line: var(--line-strong); }
.btn-ghost:hover { --b-line: var(--accent); --b-ink: var(--accent); }
.btn-on-photo {
--b-bg: rgba(255,255,255,.10);
--b-ink: var(--on-dark);
--b-line: rgba(255,255,255,.42);
backdrop-filter: blur(6px);
}
.btn-on-photo:hover { --b-bg: rgba(255,255,255,.18); }
/* -------------------------------------------------------------- data-fill --
Hollow turns every filled button into an outline of itself. It has to reach
the modifiers, not just .btn, or the primary button stays filled. */
[data-fill='hollow'] .btn-primary,
[data-fill='hollow'] .btn-dark,
[data-fill='hollow'] .btn-brand { background: transparent; }
[data-fill='hollow'] .btn-primary { color: var(--accent); }
[data-fill='hollow'] .btn-dark,
[data-fill='hollow'] .btn-brand { color: var(--ink); border-color: var(--line-strong); }
[data-fill='hollow'] .btn::after { background: linear-gradient(var(--tilt),
transparent 42%, var(--accent-soft) 50%, transparent 58%); }
/* ----------------------------------------------------------- data-border ---
A rule under the control instead of an outline around it. */
[data-border='underline'] .btn {
border-width: 0 0 2px;
border-radius: 0;
padding-inline: 4px;
}
[data-border='underline'] .btn-primary { color: var(--accent); background: transparent; }
[data-border='underline'] .btn-dark,
[data-border='underline'] .btn-brand { color: var(--ink); background: transparent; }
[data-border='underline'] .btn:hover { transform: none; border-color: var(--accent); }
.ico { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; flex: none; }
.btn .ico { transition: transform .3s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }
/* =========================== SITE HEADER ================================== */
.site-header {
position: sticky;
top: 0;
z-index: 60;
background: color-mix(in srgb, var(--bg) 86%, transparent);
backdrop-filter: blur(14px) saturate(1.3);
border-bottom: 1px solid transparent;
transition: background-color .3s linear, border-color .3s linear;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.header-inner {
display: flex;
align-items: center;
gap: 22px;
height: 74px;
}
/* ------------------------------------------------------------- the lockup --
The official artwork, out of the sprite so it inherits `color` — which is
what makes data-logo-color an axis over the real trademark rather than over
a lookalike. Two symbols, one shown at a time:
.brand-full #i-logotype, isotype + wordmark, aspect 4.1393 (measured
from the brand file by tools/build_logotype.py)
.brand-mark #i-iso, the mark alone, square
Sizing is by HEIGHT in both cases, so switching lockup changes the width the
logo occupies and never its optical size. */
.brand {
display: inline-flex;
align-items: center;
text-decoration: none;
color: var(--ink);
flex: none;
--logo-h: 38px;
line-height: 0;
}
[data-logo-size='sm'] .brand { --logo-h: 30px; }
[data-logo-size='md'] .brand { --logo-h: 38px; }
[data-logo-size='lg'] .brand { --logo-h: 46px; }
/* --logo-h is the height of the MARK, in both lockups — not the height of the
artwork. The full lockup's box is taller than its mark, because the acute on
the Ú rises above it (87.65 units of box for 74 of mark, both measured from
the brand file). Sizing by the box instead would shrink the mark by 16% the
moment the wordmark was switched on, and the two lockups would no longer
look like the same logo at the same size. */
.brand-full,
.brand-mark {
display: block;
fill: currentColor;
stroke: none;
}
.brand-full {
height: calc(var(--logo-h) * 1.1845); /* 87.65 / 74 */
width: calc(var(--logo-h) * 1.1845 * 4.1393);
}
.brand-mark { height: var(--logo-h); width: var(--logo-h); }
/* exactly one of the two, decided by the axis */
[data-logo-lock='lock-full'] .brand-mark,
[data-logo-lock='lock-mark'] .brand-full { display: none; }
[data-logo-color='ink'] .brand { color: var(--ink); }
[data-logo-color='brand'] .brand { color: var(--brand); }
[data-logo-color='accent'] .brand { color: var(--accent); }
[data-logo-color='contrast'] .brand { color: var(--ink); }
[data-logo-color='contrast'][data-theme='ice'] .brand,
[data-logo-color='contrast'][data-theme='paper'] .brand,
[data-logo-color='contrast'][data-theme='steel'] .brand { color: var(--petrol-800); }
/* the three shapes assemble on first paint, each from its own direction —
which is how the mark is actually drawn: two counters and a bar */
@keyframes mark-in {
from { opacity: 0; transform: translate(-14%, 14%) rotate(-6deg); }
to { opacity: 1; transform: none; }
}
[data-anim='motion'] .brand-full,
[data-anim='motion'] .brand-mark { animation: mark-in .7s var(--ease-out) both; }
.site-nav {
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
}
/* `:not(.btn)` throughout. The contact tab is an and a filled button at the
same time, and `.site-nav a` (one class, one type) outranks `.btn` (one
class) — so without the exclusion these rules paint the button's label with
the menu's ink instead of the ink chosen to sit on the accent fill. On the
pale accents that is white on amber at 1.5:1. A button carries its own
colours; the menu must not reach inside it. */
.site-nav a:not(.btn) {
padding: 9px 13px;
border-radius: var(--radius-sm);
text-decoration: none;
font-size: .93rem;
font-weight: 550;
color: var(--ink-2);
position: relative;
transition: color .18s linear, background-color .18s linear;
}
.site-nav a:not(.btn):hover { color: var(--ink); background: var(--surface-2); }
.site-nav a:not(.btn).active { color: var(--ink); }
.site-nav a.active:not(.nav-cta)::after {
content: '';
position: absolute;
left: 13px;
right: 13px;
bottom: 3px;
height: 2px;
background: var(--accent);
}
.nav-cta { margin-left: 8px; }
.nav-cta.active::after { display: none; }
[data-navcta='plain'] .nav-cta {
background: transparent;
border-color: transparent;
color: var(--ink-2);
font-weight: 550;
padding: 9px 13px;
}
[data-navcta='plain'] .nav-cta .ico { display: none; }
.header-tools { display: flex; align-items: center; gap: 6px; }
.tool { position: relative; }
.tool-btn {
display: inline-flex;
align-items: center;
gap: 7px;
height: 38px;
padding: 0 11px;
border: 1px solid var(--line);
background: transparent;
color: var(--ink-2);
border-radius: var(--radius-sm);
font: inherit;
font-size: .82rem;
font-weight: 650;
letter-spacing: .04em;
cursor: pointer;
transition: color .18s linear, border-color .18s linear, background-color .18s linear;
}
.tool-btn:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface-2); }
.tool-btn .ico { width: 17px; height: 17px; }
.tool-menu {
position: absolute;
top: calc(100% + 9px);
right: 0;
min-width: 210px;
max-height: min(74vh, 640px);
overflow: auto;
overscroll-behavior: contain;
padding: 10px;
background: var(--surface-root);
color: var(--ink-root);
border: 1px solid var(--line-root);
border-radius: var(--radius-sm);
box-shadow: var(--shadow);
display: none;
z-index: 70;
}
.tool-menu[data-open='1'] { display: block; }
/* Four columns for the twenty-odd groups of a design review. With one group the
panel should look like what it is: a small dropdown under its button.
GRID, NOT `columns`. Multi-column laid out inside a box with a max-height
does not wrap to a scrollbar — it opens a FIFTH column to the side, and a
container that only scrolls vertically simply clips it. The panel looked
complete and was quietly hiding its last eight axes. A grid overflows
downwards, which is the direction the scrollbar is on. */
/* The grid is described on the class; only the OPEN state is allowed to say
`display`. Saying it on the class as well would beat `.tool-menu`'s
`display: none` — same one-class specificity, later in the file — and the
panel would hang open on every page load. Keeping the two apart also lets
the media queries below stay at one class and simply win by source order. */
.tool-menu-wide {
min-width: min(94vw, 1060px);
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
gap: 4px 22px;
}
.tool-menu-wide[data-open='1'] { display: grid; }
@media (min-width: 900px) {
.tool-menu-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
.tool-menu-wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tool-block { margin-bottom: 14px; min-width: 0; }
.tool-block-full {
grid-column: 1 / -1;
border-top: 1px solid var(--line-root);
padding-top: 12px;
}
/* the twelve section checkboxes read badly in one narrow column */
.tool-block-full { display: grid; grid-template-columns: 1fr; }
.tool-block-full .tool-group { grid-column: 1 / -1; }
@media (min-width: 900px) {
.tool-block-full { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tool-group {
margin: 0 0 5px;
padding: 0 8px;
font-size: .66rem;
font-weight: 750;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--muted-root);
}
.tool-menu button {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 7px 9px;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: inherit;
font: inherit;
font-size: .87rem;
text-align: left;
cursor: pointer;
}
.tool-menu button:hover { background: var(--surface-2-root); }
.tool-menu button[aria-checked='true'] { color: var(--accent-root); font-weight: 650; }
.tool-block-full button { columns: initial; }
.swatch {
width: 15px;
height: 15px;
flex: none;
border-radius: 4px;
border: 1px solid var(--line-root);
background: var(--surface-2-root);
position: relative;
}
button[aria-checked='true'] > .swatch { box-shadow: 0 0 0 2px var(--accent-root); }
/* the themes show themselves */
.swatch-ice { background: #f6fafb; }
.swatch-paper { background: #f8f6f1; }
.swatch-steel { background: #eef2f7; }
.swatch-deep { background: #00232f; }
.swatch-core { background: #00141b; }
.swatch-solar { background: linear-gradient(135deg, #06212b 52%, #f7ac11 52%); }
.swatch-black { background: #07090b; }
.swatch-cyan { background: #2ad2e8; }
.swatch-violet { background: #a99bff; }
.swatch-amber { background: #f7ac11; }
.swatch-lime { background: #8ee86a; }
.swatch-on { background: var(--accent-root); border-color: var(--accent-root); }
.swatch-off { background: transparent; }
.nav-toggle {
display: none;
width: 40px;
height: 38px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: transparent;
cursor: pointer;
padding: 10px 9px;
flex-direction: column;
justify-content: space-between;
}
.nav-toggle span { display: block; height: 2px; background: var(--ink-2); }
/* -------------------------------------------------- the see-through header --
Over the hero the bar has no ground of its own, so it redefines the ink
tokens ON ITSELF and every child follows with no further rules. Its dropdown
panels take the theme's colours back from the *-root copies, because they
are solid panels that merely hang off a see-through bar.
WHICH INK, THOUGH. The obvious version of this rule forces white — and that
is right only if whatever is behind the bar is dark. Here the hero is DRAWN,
in the theme's own colours, so on `ice`, `paper` and `steel` its ground is
very nearly white and a white wordmark and white menu vanish completely
(measured: 1.05:1, against a 4.5 minimum). So the ink over media is a token
the theme sets, and only the themes whose hero really is dark set it to
white. The one case that is dark in every theme is a film, which carries its
own scrim — that is the override at the bottom. */
.has-immersive .site-header { position: fixed; left: 0; right: 0; }
.site-header.over-media {
background: transparent;
backdrop-filter: none;
border-bottom-color: transparent;
--ink: var(--on-media);
--ink-2: var(--on-media-2);
--muted: var(--on-media-muted);
--line: var(--on-media-line);
--line-strong: var(--on-media-line-2);
--surface-2: var(--on-media-surface);
color: var(--ink);
}
/* `:not(.btn)` matters. The contact tab in the menu is an AND a filled
button, so a blanket rule on `.site-nav a` outranks `.btn-primary`'s own ink
and paints the label with the header's colour instead of the one chosen to
sit on the accent — white on amber, or dark ink on violet. Measured at
1.6:1. The button brings its own ink; leave it alone. */
.site-header.over-media .brand,
.site-header.over-media .site-nav a:not(.btn) { color: var(--ink); }
.site-header.over-media .tool-btn { color: var(--ink-2); }
/* A film is dark under every theme — it is the one hero that brings its own
ground with it, so the bar over it is white whatever the theme says. */
[data-hero='video'] .site-header.over-media {
--ink: var(--on-dark);
--ink-2: rgba(255,255,255,.86);
--muted: rgba(255,255,255,.66);
--line: rgba(255,255,255,.24);
--line-strong: rgba(255,255,255,.42);
--surface-2: rgba(255,255,255,.12);
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 200;
padding: 12px 20px;
background: var(--accent);
color: var(--on-accent);
border-radius: 0 0 var(--radius-sm) 0;
text-decoration: none;
font-weight: 650;
}
.skip-link:focus { left: 0; }
/* ================================ HERO ==================================== */
.hero {
position: relative;
isolation: isolate;
min-height: min(94vh, 900px);
display: flex;
align-items: center;
padding: calc(var(--sec-pad) + 30px) 0 var(--sec-pad);
overflow: hidden;
background: var(--bg);
}
.hero.under-header { padding-top: calc(var(--sec-pad) + 74px); }
.hero-inner { max-width: 900px; }
.hero h1 { margin-bottom: .34em; }
/* 56ch, not 62: the lattice's core mark sits in the right third of the band,
and a longer measure runs the lead underneath it. */
.hero .lead { font-size: clamp(1.08rem, 1.5vw, 1.3rem); max-width: 56ch; }
/* the appearance menu can take any of the three lines away */
[data-hero-eyebrow='off'] .hero .eyebrow,
[data-hero-title='off'] .hero h1,
[data-hero-lead='off'] .hero .lead { display: none; }
/* The accent half of the hero title. A block, not a nowrap inline: the break
between the white line and the amber one is a composition decision and
belongs in the layout, and nowrap was making the phrase run off the right
edge of a phone instead of wrapping. */
.hl {
display: block;
color: var(--accent);
position: relative;
}
.hero-cta {
display: flex;
flex-wrap: wrap;
gap: 13px;
margin-top: 34px;
}
/* A grid rather than a wrapping flex row. With flex, the fourth figure drops
to a second line on a narrow-ish window and sits alone under the first,
which reads as a mistake; a four-column grid that collapses to two keeps
them in a block at every width. */
.hero-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 26px 30px;
margin-top: 58px;
padding-top: 30px;
border-top: 1px solid var(--line);
max-width: 880px;
}
@media (max-width: 760px) {
.hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hero-stat b {
display: block;
font-family: var(--head);
font-size: 2.15rem;
font-weight: 800;
line-height: 1;
letter-spacing: -.03em;
font-variant-numeric: tabular-nums;
}
.hero-stat span {
display: block;
margin-top: 7px;
font-size: .8rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
}
/* --------------------------------------------------------------- hero art --
Three treatments, one axis (data-hero). All of them are drawn, none of them
is a photograph: a software company photographing an open-plan office is
what every one of its competitors does, and the mark is more interesting
than the office. */
.hero-art {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
overflow: hidden;
}
.hero-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* which of the drawn scenes is shown is decided further down, once all of
them have been described */
[data-hero='video'] .hero-art { background: var(--surface-3); }
.hero-video {
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
display: none;
}
[data-hero='video'] .hero-video { display: block; }
[data-hero='video'] .hero::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: var(--scrim);
}
/* over film the hero is white-on-image in every theme */
[data-hero='video'] .hero {
--ink: var(--on-dark);
--ink-2: rgba(255,255,255,.84);
--muted: rgba(255,255,255,.64);
--line: rgba(255,255,255,.22);
color: var(--ink);
}
/* THE LATTICE — a nucleus. A core at the mark's own angle, rings of nodes
around it, and links between them. Everything here is drawn by app.js into
an SVG; this file only says how it moves. */
.hero-lattice .node { fill: var(--accent); }
.hero-lattice .link { stroke: var(--ink); stroke-width: 1; fill: none; opacity: .13; }
.hero-lattice .ring { stroke: var(--ink); fill: none; opacity: .09; stroke-dasharray: 3 9; }
.hero-lattice .halo { fill: var(--accent); opacity: .06; }
/* The mark is a