/* ============================================================================
CircuitLeap — the shared design system.
EVERY page loads this file, and nothing in it belongs to one page. If a
colour, a font, the header, the dividers or the footer has to change, it
changes HERE and the whole site follows. Page-specific rules live in that
page's own stylesheet and are never copied back into this one.
The visual language is written up in full at
brain/user/design/2026-08-25-linear-visual-style-spec.md, and the palette at
brain/k/design/concept/color.md. The three rules that shape most of what
follows: the ground is flat with nothing layered behind it; importance is
shown by how light a grey the text is, not by size; and nothing casts a
shadow, blurs, or lifts on hover.
============================================================================ */
@font-face{font-family:"Space Grotesk";src:url(assets/fonts/SpaceGrotesk-Variable.ttf) format("truetype");font-weight:300 700;font-display:swap;}
@font-face{font-family:"Lexend";src:url(assets/fonts/Lexend-Variable.ttf) format("truetype");font-weight:100 900;font-display:swap;}
@font-face{font-family:"IBM Plex Mono";src:url(assets/fonts/IBMPlexMono-Regular.ttf) format("truetype");font-weight:400;font-display:swap;}
:root{
--cl-bg:#101319; --cl-surface:#101b2e; --cl-border:#1e2d47;
--cl-text:#f1f5f9; --cl-text-muted:#a5b4c8; --cl-text-faint:#64748b;
--cl-accent:#7dd3fc; --cl-accent-strong:#38bdf8;
--font-display:"Space Grotesk","Lexend",ui-sans-serif,system-ui,sans-serif;
--font-text:"Lexend",ui-sans-serif,system-ui,sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
--gutter:clamp(24px,4.2vw,80px); --header-h:72px; --hair:rgba(255,255,255,.08);
/* The hero band's height, named once. The 3D canvas is sized to exactly
this, so the stack is framed against the band the headline lives in
rather than against the window. On a tall monitor those are very
different boxes, and framing against the wrong one left the subject
stranded below the words. */
--hero-h:calc(min(88vh,880px) + 100px);
/* Two content columns, deliberately different widths.
--page-max the hero and the header. Wide, so the headline and the
stack have room, and capped so neither keeps travelling
outwards on a very wide monitor.
--section-max every section below the hero. Narrower ON PURPOSE: the
margin either side is what makes each section read as its
own block. Widening these to match the hero was tried and
removed - it ran the cards almost edge to edge and the
separation between sections went with it. */
--page-max:1720px;
--section-max:1360px;
/* TWO grounds, and only two, picked side by side against four candidates.
The hero is the darker of the pair so the stack has something to sit in;
every section below it shares one lighter, greyer ground. Both sit well
above the brand's #04060a — at that value the whole page read as flat
black rather than as a dark grey page. Alternating a tone section by
section was tried and removed: the engraved dividers separate sections,
and a changing ground made the page look striped. */
--ground-hero:#080b12;
/* The second rank of grey: the large paragraph that sits beside a headline.
The brand canon defines three dark-scheme greys; the design this site
follows uses four, so this is the one the canon does not name. It sits
between --cl-text and --cl-text-muted. */
--cl-text-lead:#c4d0df;
/* One hue per product, straight from the brand canon. Used only on the small
initials tiles in the team list, so colour stays scarce. */
--cl-dias:#a78bfa; --cl-gama:#38bdf8; --cl-magellan:#5eead4;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--cl-bg);}
body{margin:0;background:var(--cl-bg);color:var(--cl-text);font-family:var(--font-text);
font-size:15px;line-height:1.6;letter-spacing:-.011em;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
a{color:inherit;text-decoration:none;}
canvas{display:block;}
img,svg{display:block;max-width:100%;}
.shell{width:100%;max-width:var(--page-max);margin:0 auto;padding:0 var(--gutter);}
/* Sections below the hero sit on a narrower column than the header and hero:
the margin either side is what makes each one read as its own block. */
.shell-narrow{max-width:var(--section-max);}
/* The first thing a keyboard reaches on every page. */
.skip{position:absolute;left:-9999px;top:0;z-index:60;padding:10px 16px;
background:var(--cl-text);color:var(--cl-bg);font-size:13px;}
.skip:focus{left:12px;top:12px;}
:focus-visible{outline:2px solid var(--cl-accent-strong);outline-offset:3px;}
/* ---------------------------------------------------------------- header -- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:30;height:var(--header-h);
border-bottom:1px solid var(--hair);backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);background:color-mix(in srgb,var(--ground-hero) 62%,transparent);}
.hdr-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand svg{width:22px;height:22px;}
.brand-word{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.02em;}
.nav{display:flex;gap:4px;}
.nav a{font-size:13px;color:var(--cl-text-muted);padding:7px 12px;border-radius:9999px;
transition:color .15s ease,background-color .15s ease;}
.nav a:hover{color:var(--cl-text);background:rgba(255,255,255,.04);}
.nav a[aria-current="page"]{color:var(--cl-text);}
.btn{display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:9999px;
font-size:13px;font-weight:500;background:var(--cl-text);color:var(--cl-bg);
border:1px solid transparent;font-family:inherit;cursor:pointer;
transition:background-color .15s ease,color .15s ease,border-color .15s ease;}
.btn:hover{background:#fff;}
.btn-ghost{background:transparent;color:var(--cl-text-muted);border-color:var(--cl-border);}
.btn-ghost:hover{color:var(--cl-text);border-color:var(--cl-text-faint);background:transparent;}
.btn-lg{height:44px;padding:0 22px;font-size:15px;}
/* Full-bleed engraved divider: a black line with a lit one directly beneath.
Read as a groove cut into the page rather than a grey line painted on it.
The lit line is at 10% rather than 8% because at 8% it was too faint to
separate one near-black section from the next. */
.rule{height:1px;background:#000;box-shadow:0 1px 0 rgba(255,255,255,.10);border:0;margin:0;}
/* ------------------------------------------------------- shared furniture -- */
/* The section container. `background` is stated rather than inherited so these
sections stay flat near-black no matter what is pasted above them. There is
no gradient, glow or wash here, and there must never be one. */
/* Every section below the hero shares ONE ground. What separates them is the
engraved divider between them and the space around them, never a change of
colour. */
.band{padding:112px 0;background:var(--cl-bg)}
.cta{background:var(--cl-bg)}
.ftr{background:var(--cl-bg)}
/* Same content column width the products section above already uses, so the
left edge of every headline on the page lines up. */
/* Container: see `.shell` / `.shell-narrow` above. `.shell` was a second
name for the same thing and is gone; only one of the two ever had padding. */
/* The full-bleed engraved divider `
` is NOT defined here.
index.html already owns it, and one rule must have exactly one home. */
/* Divider between columns: 3px of line, then 4px of gap, repeated down the
height of the row. A dashed rule instead of a solid one keeps the column
split legible without adding another hard edge to the page. */
.vrule{width:1px;align-self:stretch;
background-image:repeating-linear-gradient(var(--hair) 0 3px,transparent 3px 7px)}
/* The two-column section head this site uses everywhere: headline hard left,
supporting paragraph starting near the horizontal midpoint, both aligned to
the same top edge. Left-aligned — only the closing call to action is centred. */
.head{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
gap:48px;align-items:start}
/* Weight 510 is barely heavier than body text. These headlines get their
presence from size and from how tightly the lines are packed (line-height 1,
so the lines physically touch), never from being bold. */
.head-title{margin:0;color:var(--cl-text);
font:510 clamp(34px,4.6vw,48px)/1 var(--font-display);letter-spacing:-.022em}
/* Rank 2 grey. Wider than body text but still not white. */
.head-lead{margin:0;max-width:34em;color:var(--cl-text-lead);
font-size:clamp(19px,2vw,24px);line-height:1.33;letter-spacing:-.012em}
/* Rank 3 grey, and the size and line-height body text already has, so only the
spacing needs stating. */
.head-body{margin:20px 0 0;max-width:34em;color:var(--cl-text-muted)}
.head-cta{margin:26px 0 0}
/* ----------------------------------------------------------------- type -- */
/* The small label above a headline. Mono, wide letter-spacing, rank 4 grey:
it announces the section without competing with it. */
.eyebrow{margin:0 0 26px;color:var(--cl-text-faint);
font:11px var(--font-mono);letter-spacing:.18em;text-transform:uppercase}
/* Splits one sentence into two greys: the claim stays lit, the explanation
after it is dimmed. Size and weight do not change — only the colour. This is
the single most recognisable typographic move in the style being copied. */
.dim{color:var(--cl-text-faint)}
/* A text link that ends in an arrow. The arrow, not the link, moves on hover,
which keeps the row itself perfectly still. */
.arrow-link{display:inline-flex;align-items:center;gap:9px;
color:var(--cl-text-muted);font-size:14px;transition:color .15s ease}
.arrow-link:hover{color:var(--cl-accent)}
.arrow-link .ar{transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.arrow-link:hover .ar{transform:translateX(4px)}
/* Small print that sits under a block — the placeholder disclaimer uses it. */
.note{margin:18px 0 0;color:var(--cl-text-faint);font-size:13px}
/* products-clean.css only gives a focus ring to the product cards. Every link
added by these sections needs one too, or the page stops being keyboard
navigable halfway down. */
.band a:focus-visible,
.cta a:focus-visible,
.ftr a:focus-visible{outline:2px solid var(--cl-accent-strong);outline-offset:3px;border-radius:4px}
/* -------------------------------------------------------------- mission -- */
/* One sentence set as a solid block of type. 40ch keeps it to about three
lines on a desktop screen, which is the shape this style wants: a block,
not a paragraph. */
.mission-title{margin:0;max-width:40ch;color:var(--cl-text);
font:510 clamp(32px,4.6vw,48px)/1 var(--font-display);letter-spacing:-.022em}
/* Three equal columns with a 1px dashed rule between them. The rules are real
grid tracks, so the columns stay equal whatever the text does. */
.mission-grid{display:grid;margin-top:72px;
grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr) 1px minmax(0,1fr)}
.mission-col{padding:0 34px}
.mission-col:first-child{padding-left:0}
.mission-col:last-child{padding-right:0}
/* Rank 4 grey. The number is a position marker, not information. */
.mission-index{margin:0;color:var(--cl-text-faint);
font:11px var(--font-mono);letter-spacing:.16em}
/* Column titles sit one rank below the section headline: 590 weight at 20px in
rank 2 grey. Reserving the brightest grey for the headline is what keeps the
page calm. */
.mission-col h3{margin:14px 0 0;color:var(--cl-text-lead);
font:590 20px/1.33 var(--font-display);letter-spacing:-.02em}
/* Matched on "the paragraph that follows the title", not on every in the
column, because the index number above the title is a
as well and must
keep its own, fainter grey. */
.mission-col h3+p{margin:10px 0 0;color:var(--cl-text-muted)}
/* ----------------------------------------------------------------- team -- */
/* Four rows, not four cards: an initials tile, a name and role, and one line
about the person. Rows are separated by hairlines only — no fill, no border
box, no shadow, and nothing that moves when the pointer crosses it. */
.people{margin-top:48px;border-top:1px solid var(--hair)}
.person{display:grid;grid-template-columns:44px 260px minmax(0,1fr);gap:24px;
align-items:center;padding:22px 0;border-bottom:1px solid var(--hair)}
/* 6px radius, at the tight end of the 6-12px the rules allow. Dark text on a
light tile, so the tile reads as a solid chip rather than a glowing dot. */
.person-photo{width:56px;height:56px;border-radius:6px;object-fit:cover;
filter:grayscale(1) contrast(1.04);}
.mono-tile{display:grid;place-items:center;width:44px;height:44px;border-radius:6px;
color:var(--cl-bg);font:700 15px var(--font-display);letter-spacing:-.02em}
.person-name{color:var(--cl-text);font:510 18px var(--font-display);letter-spacing:-.015em}
.person-role{margin-top:5px;font:11px var(--font-mono);letter-spacing:.14em;
text-transform:uppercase}
.person-line{color:var(--cl-text-muted)}
/* One hue per row, naming the product that person leads. Set on the row so the
tile and the role label can never drift apart. */
.person-dias .mono-tile{background:var(--cl-dias)}
.person-dias .person-role{color:var(--cl-dias)}
.person-gama .mono-tile{background:var(--cl-gama)}
.person-gama .person-role{color:var(--cl-gama)}
.person-magellan .mono-tile{background:var(--cl-magellan)}
.person-magellan .person-role{color:var(--cl-magellan)}
.person-accent .mono-tile{background:var(--cl-accent)}
.person-accent .person-role{color:var(--cl-accent)}
/* ------------------------------------------------------------------ cta -- */
/* The one centred block on the whole page, which is why it reads as an ending.
Everything above it is left-aligned. */
.cta{padding:132px 0;background:var(--cl-bg);text-align:center}
.cta h2{margin:0 auto;max-width:18ch;color:var(--cl-text);
font:510 clamp(36px,6vw,72px)/1 var(--font-display);letter-spacing:-.022em}
.cta p{margin:22px auto 0;max-width:46ch;color:var(--cl-text-muted);font-size:17px}
.cta-btns{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:36px}
/* The filled near-white pill from products-clean.css is the page's single
filled button, and this section reuses it as-is. The second action here is an
outline of the same size, so no competing filled colour appears. */
/* .btn-ghost is declared with the rest of the buttons, above. */
/* --------------------------------------------------------------- footer -- */
.ftr{padding:64px 0 56px}
/* The mark column is wider than the link columns so the mark is not crowded. */
/* Tracks: the brand, then one per link column. Counted, not guessed — if a
column is added or removed, this number moves with it. */
.ftr-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}
/* Slightly smaller than the header mark: the footer is the quiet copy of it. */
.ftr .brand svg{display:block;width:20px;height:20px}
/* Column headings are the one place the brightest grey appears below the fold.
They are 13px, so they stay quiet despite the colour. */
.ftr h3{margin:0 0 18px;color:var(--cl-text);
font-size:13px;font-weight:510;letter-spacing:-.011em}
.ftr ul{display:grid;gap:11px;margin:0;padding:0;list-style:none}
/* `overflow-wrap` stops the email address pushing the column wider than its
grid track on a phone. */
.ftr li a{color:var(--cl-text-muted);overflow-wrap:anywhere;transition:color .15s ease}
.ftr li a:hover{color:var(--cl-text)}
.ftr-legal{display:flex;flex-wrap:wrap;align-items:center;gap:22px;
margin-top:64px;padding-top:26px;border-top:1px solid var(--hair);
color:var(--cl-text-faint);font-size:13px}
.ftr-legal a{transition:color .15s ease}
.ftr-legal a:hover{color:var(--cl-text)}
/* ----------------------------------------------------------- responsive -- */
/* Below this width three mission columns leave too little room per column, so
they stack. The dashed rule turns horizontal rather than disappearing, so the
columns are still visibly separated by the same 3-on / 4-off line.
The rule is painted at the top edge of each column, so the margin above it
and the padding below it are equal — otherwise it crowds the paragraph that
just ended above it. */
@media (max-width:1080px){
.band{padding:88px 0}
.mission-grid{grid-template-columns:minmax(0,1fr);margin-top:56px}
.mission-grid>.vrule{display:none}
.mission-col{margin-top:34px;padding:34px 0 0;background-repeat:no-repeat;
background-size:100% 1px;
background-image:repeating-linear-gradient(90deg,var(--hair) 0 3px,transparent 3px 7px)}
.mission-col:first-child{margin-top:0;padding-top:0;background-image:none}
/* Five footer columns leave each link about 120px here, which is narrower
than the email address. The mark takes a row of its own and the four link
columns share the full width instead. */
.ftr-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 30px}
.ftr-grid>:first-child{grid-column:1/-1}
}
@media (max-width:760px){
.band{padding:72px 0}
/* The headline-left / paragraph-right split has no room left, so the
paragraph moves under the headline instead of beside it. */
.head{grid-template-columns:minmax(0,1fr);gap:22px}
/* The person's one-line description drops to its own row under the name,
keeping the tile and name on the first row. */
.person{grid-template-columns:56px minmax(0,1fr);row-gap:10px}
.person-line{grid-column:2}
.ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 26px}
.ftr-legal{margin-top:48px;gap:16px}
.cta{padding:88px 0}
}
@media (max-width:860px){
:root{--gutter:20px;}
.nav{display:none;}
}