/* Wellplanner marketing site, v2.
Spec: docs/design/WEBSITE_SPEC.md, design: "Wellplanner Website v2.dc.html".
The design file wins where the two disagree.
The whole visual system is one rule at three scales: the mark is a disc cut
by a wave, so section edges are wave cuts, giant discs sit behind heroes, and
the lifecycle is drawn on the wave itself. Nothing else decorates this site -
no gradients, patterns, textures or photography.
Marketing runs dark by default, which is the inverse of the product. */
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap;
src: url("fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 600; font-display: swap;
src: url("fonts/space-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap;
src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap;
src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap;
src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap;
src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap;
src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
:root {
/* Three darks and one white. There is no accent colour: status hues appear
only inside product screenshots, where they carry real meaning. */
--page: #08222a;
--raised: #0b2b34;
--footer: #061a20;
--tint: #f6f8f8;
/* Glacier. The palette is one deep, one surface, one ramp - this is the
surface. Brand Profile §04: "a surface for large areas and chart fills,
never text." So it never carries a letter, never signals status and never
colours the mark, which stays navy on light and white on dark. Fathom 500
on Glacier is 3.90:1 and fails, so anything sitting on it takes ink or
ink-body, both of which clear AA. */
--glacier: #c3dce3;
--line: #ebefef;
--on-dark-lede: rgba(255, 255, 255, 0.78);
--on-dark-soft: rgba(255, 255, 255, 0.65);
--on-dark-faint: rgba(255, 255, 255, 0.5);
--ink: #0b2b34;
--ink-body: #3d4747;
--ink-meta: #5f6a6a;
--rule-light: #d8dede;
--display: "Space Grotesk", system-ui, sans-serif;
--sans: "IBM Plex Sans", system-ui, sans-serif;
--mono: "IBM Plex Mono", ui-monospace, monospace;
--maxw: 1340px;
--pad: clamp(20px, 4vw, 56px);
--section-y: clamp(48px, 6vw, 112px);
}
/* Before anything else. Without it every authored min-height lands on the
content box and the padding adds on top, which is how a 46px field comes
out at 74px. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--sans);
font-size: 16px;
line-height: 1.7;
color: #fff;
background: var(--page);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
::selection { background: #fff; color: var(--page); }
h1, h2, h3 { font-family: var(--display); margin: 0; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
/* ── Type ────────────────────────────────────────────────────────────────
The headline is the design. At full size it is the largest element on the
page by a wide margin, and everything else stays quiet around it.
Measure caps live on the heading itself, never on a wrapper: ch resolves
against the element's own font size, so a 19ch cap on a 16px wrapper would
produce a 170px column. */
.h-hero {
font-weight: 500;
font-size: clamp(48px, 8.4vw, 118px);
line-height: 0.94;
letter-spacing: -0.042em;
max-width: 14ch;
}
.h-page {
font-weight: 500;
font-size: clamp(38px, 6vw, 82px);
line-height: 0.98;
letter-spacing: -0.038em;
max-width: 20ch;
}
.h-section {
font-weight: 500;
font-size: clamp(30px, 4vw, 56px);
line-height: 1.04;
letter-spacing: -0.03em;
max-width: 22ch;
}
/* The closing call to action: larger than a section head, smaller than a hero,
because it is the last thing read rather than the first. */
.h-cta {
font-weight: 500;
font-size: clamp(34px, 5.2vw, 72px);
line-height: 1;
letter-spacing: -0.035em;
max-width: 16ch;
}
.h-card { font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.25; }
.eyebrow {
font-family: var(--mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--on-dark-faint);
margin: 0;
}
.lede {
font-size: clamp(17px, 1.4vw, 20px);
line-height: 1.65;
color: var(--on-dark-lede);
margin: 0;
max-width: 52ch;
text-wrap: pretty;
}
.body { font-size: 16px; line-height: 1.7; color: var(--on-dark-soft); margin: 0; max-width: 58ch; }
.mono { font-family: var(--mono); }
.vh {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.note {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
margin: 0;
}
/* On a white band the same roles take ink values. */
.band-white { background: #fff; color: var(--ink-body); }
.band-white h1, .band-white h2, .band-white h3 { color: var(--ink); }
.band-white .eyebrow, .band-white .note { color: var(--ink-meta); }
.band-white .lede, .band-white .body { color: var(--ink-body); }
/* ── Bands and wave edges ────────────────────────────────────────────────
Every transition between a dark and a light band is a wave cut, alternating
direction so one silhouette does not repeat down the page. */
.band { padding: var(--section-y) var(--pad); }
.band-page { background: var(--page); }
.band-raised { background: var(--raised); }
/* The tint step is what separates two light sections. They were one long band
originally and are held apart by the step, not by a rule. */
.band-tint { background: var(--tint); color: var(--ink-body); }
.band-tint h1, .band-tint h2, .band-tint h3 { color: var(--ink); }
.band-tint .eyebrow, .band-tint .note { color: var(--ink-meta); }
.band-tint .lede, .band-tint .body { color: var(--ink-body); }
.wave { line-height: 0; }
.wave svg { display: block; width: 100%; height: clamp(38px, 4.6vw, 78px); }
.wave-flip svg { transform: scaleX(-1); }
/* A short wave rule above a column: the same figure at small scale. */
.wave-rule { position: absolute; top: 0; left: 0; width: 100%; height: 8px; }
/* ── Header ──────────────────────────────────────────────────────────────
Full bleed and sticky, the same colour as the page so it dissolves into it. */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--page); }
.nav {
display: flex; align-items: center; justify-content: space-between;
gap: 24px; padding: 0 var(--pad); flex-wrap: wrap;
}
/* The mark is bare at 44px and the wordmark sits beside it at 25px. Both
together are the home link. The wordmark hides below 1100px, which is the
one breakpoint on this site. */
.brand { display: flex; align-items: center; gap: 15px; padding: 18px 0; }
.brand img { width: 44px; height: 44px; }
.wordmark {
font-family: var(--display); font-weight: 600; font-size: 25px;
letter-spacing: 0.1em; text-transform: uppercase; color: #fff;
}
@media (max-width: 1100px) { .brand .wordmark { display: none; } }
.nav-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* The padding scales with the viewport rather than through a breakpoint: at
full width it sets the bar height, and on a phone the row wraps to two
compact lines instead of three tall ones. 44px stays the floor. */
.nav-links a {
display: inline-flex; align-items: center; min-height: 44px;
/* 16px rather than the design file's 14px: the owner asked for a larger
menu. Deliberate override, not drift - do not "correct" it back. */
font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, 0.7);
padding: clamp(11px, 2.4vw, 26px) clamp(9px, 1vw, 14px);
transition: color 160ms ease-out;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: #fff; }
/* Every call to action is a real control, so it carries a pointer and a
hover state whether it is a link or a button. */
.nav-links a, .btn { cursor: pointer; }
/* ── Buttons ─────────────────────────────────────────────────────────────
Never transition background and colour together: the crossfade passes
through a midpoint where the label is invisible against its own fill. */
.btn {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--sans); font-size: 15px; font-weight: 600;
border: 1px solid transparent; border-radius: 8px; padding: 17px 30px;
cursor: pointer; transition: background 160ms ease-out, border-color 160ms ease-out;
}
.btn-primary { background: #fff; color: var(--page); }
.btn-primary:hover { background: #e3e9e9; }
.btn-ghost {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.28); color: #fff;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.16); }
/* On any white surface the primary inverts; the ghost becomes a bordered
white button. The form card is a white surface inside a dark band. */
.band-white .btn-primary, .band-tint .btn-primary, .form-card .btn-primary { background: var(--ink); color: #fff; }
.band-white .btn-primary:hover, .band-tint .btn-primary:hover, .form-card .btn-primary:hover { background: #12414d; }
.band-white .btn-ghost, .band-tint .btn-ghost { background: #fff; border-color: var(--rule-light); color: var(--ink); }
.band-white .btn-ghost:hover, .band-tint .btn-ghost:hover { background: #ebefef; }
/* ── The menu button ─────────────────────────────────────────────────────
Hidden above 700px, where every link is already in the bar. The bars are
one element and two pseudo-elements, which is what lets them become a
cross without a second icon. */
.nav-toggle {
display: none; width: 48px; height: 48px; margin-right: -12px;
align-items: center; justify-content: center;
background: none; border: 0; padding: 0; cursor: pointer; color: #fff;
}
.nav-bars { position: relative; display: block; width: 22px; height: 2px; background: currentColor; }
.nav-bars::before, .nav-bars::after {
content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor;
transition: transform 160ms ease-out;
}
.nav-bars::before { top: -7px; }
.nav-bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-bars::after { transform: translateY(-7px) rotate(-45deg); }
.site-header-light .nav-toggle { color: var(--ink); }
/* Written against .nav-links a so it outranks the plain link colour above. */
.nav-links a.nav-cta {
font-size: 16px; font-weight: 600; padding: 12px 22px; border-radius: 6px;
margin-left: 12px; background: #fff; color: var(--page);
transition: background 160ms ease-out;
}
.nav-links a.nav-cta:hover { background: #e3e9e9; color: var(--page); }
/* ── Discs ───────────────────────────────────────────────────────────────
Sized in vw so they scale with the viewport, absolutely placed inside a
section that clips them, and never interactive. */
.has-disc { position: relative; overflow: hidden; }
.has-disc > .container, .has-disc > .band-inner { position: relative; }
.disc { position: absolute; pointer-events: none; width: var(--s); height: var(--s); }
/* Sized in vw so the disc scales with the viewport, but capped at the size it
has at 1440: past that the decoration would keep growing until it was the
dominant field on the page rather than an arc behind the headline. The
offsets are a fraction of the size, so the framing holds at every width.
A disc must also fit inside the section that clips it. Where it does not,
the band boundary saws it off in a straight line - which is what a giant
disc behind a short hero looks like. */
.disc-hero { --s: min(74vw, 1060px); top: calc(var(--s) * -0.19); right: calc(var(--s) * -0.27); }
.disc-hero-sm { --s: min(58vw, 560px); top: calc(var(--s) * -0.30); right: calc(var(--s) * -0.34); }
.disc-top-left { --s: min(58vw, 560px); top: calc(var(--s) * -0.34); left: calc(var(--s) * -0.32); }
.disc-left { --s: min(46vw, 620px); bottom: calc(var(--s) * -0.52); left: calc(var(--s) * -0.30); }
.disc-bottom-right { --s: min(46vw, 620px); bottom: calc(var(--s) * -0.52); right: calc(var(--s) * -0.26); }
.disc-card { --s: 190px; right: -56px; bottom: -56px; }
/* A wave that closes a section carrying a disc belongs inside it, not between
two sections: as a sibling its own background is an opaque strip that cuts
the disc off square. Inside, the section's colour shows through the
transparent half and the disc is cut by the wave itself - which is the
whole idea of the mark. */
.wave-bottom { position: absolute; left: 0; right: 0; bottom: 0; background: none; }
.has-wave-bottom { padding-bottom: calc(var(--section-y) + clamp(38px, 4.6vw, 78px)); }
/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { background: var(--footer); padding: clamp(52px, 6vw, 80px) var(--pad) 34px; }
.footer-inner { max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; gap: 44px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 32px; }
/* The mark is large here and carries the wordmark with it. */
.footer-lockup { display: flex; align-items: center; gap: 15px; }
.footer-lockup img { width: 40px; height: 40px; }
.footer-lockup .wordmark { font-size: 22px; }
/* Every low-alpha white label on the #061A20 footer is 0.62, not 0.4: below
that it does not clear 4.5:1 on this ground. */
.footer-col h4 {
margin: 0 0 12px; font-family: var(--mono); font-size: 11px; font-weight: 400;
letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62);
}
.footer-col a, .footer-col span {
display: block; font-size: 14px; color: rgba(255, 255, 255, 0.8); margin-bottom: 8px;
}
.footer-col a:hover { color: #fff; }
/* Documentation, API and the legal pages are not written yet. They sat in
the footer styled exactly like links, which is how a reader ends up
clicking one and finding nothing - the fault that Status was reported for.
Until each has a page, it reads as a plain word rather than as a link. */
.footer-col span { color: rgba(255, 255, 255, 0.34); cursor: default; }
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 22px;
display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.footer-bottom span { font-family: var(--mono); font-size: 11px; color: rgba(255, 255, 255, 0.62); }
.footer-bottom a { color: rgba(255, 255, 255, 0.62); }
.footer-bottom a:hover { color: #fff; }
/* ══ PRODUCT SCREENSHOTS ═════════════════════════════════════════════════
Five shots, built as live DOM rather than images: job list, mapping,
workshop, finance and the rig app. They share one chrome - navy bar,
wordmark, tenant name, four nav items with the active one white - so the
chrome is defined once here and each shot writes only its own body.
These are real interface, not illustrations. Every column, pill and figure
is what the product shows, and the figures agree with each other: planned
>= actual >= invoiced >= paid, and no percentage contradicts the figure
beside it. The data is fictional but realistic, with Norwegian well and
company names long enough to prove the layout survives real content.
Status hues live only in here, where they carry meaning. Nothing outside a
screenshot on this site is coloured. */
/* A screenshot of a desktop application cannot reflow into a phone: squeezing
it turns every well name into an ellipsis, which destroys the one thing the
shot is there to prove. So the shot keeps its true proportions and scrolls
sideways inside its own frame instead. On a wide screen the minimum is never
reached and nothing changes. */
.shot { background: #fff; overflow: auto hidden; min-width: 0; overscroll-behavior-x: contain; }
.shot-chrome, .shot-body { min-width: 760px; }
/* The hero shot runs up out of the section and into the wave edge below it. */
.shot-hero { border-radius: 16px 16px 0 0; box-shadow: 0 -30px 80px -20px rgba(0, 0, 0, 0.6); }
/* On a dark band the shot carries its own shadow; on white it takes a hairline. */
.shot-framed { border-radius: 16px; box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.55); }
.shot-outlined { border-radius: 16px; border: 1px solid #ebefef; }
/* Every variable-width cell truncates rather than pushing the grid open. */
.shot .cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* ── The shared chrome ─────────────────────────────────────────────────── */
.shot-chrome {
background: var(--raised); padding: 13px 20px;
display: flex; align-items: center; gap: clamp(10px, 1.4vw, 18px);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.shot-chrome .wordmark { font-size: 12px; flex-shrink: 0; }
.shot-chrome .sep { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.22); flex-shrink: 0; }
/* On a narrow screen the tenant name gives way first: the nav is the part
that has to stay readable, because it is what the shot is showing. */
.shot-tenant {
font-size: 12px; color: rgba(255, 255, 255, 0.7);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.shot-nav { display: flex; gap: clamp(9px, 1.2vw, 16px); margin-left: auto; flex-shrink: 0; }
.shot-nav span { font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.shot-nav .is-active { color: #fff; }
.shot-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
/* ── The page header inside a shot ─────────────────────────────────────── */
.shot-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.shot-head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.shot-eyebrow {
font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--ink-meta);
}
.shot-title { font-family: var(--display); font-size: 24px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.shot-action {
font-size: 12px; font-weight: 600; color: #fff; background: var(--ink);
border-radius: 5px; padding: 10px 16px; white-space: nowrap; flex-shrink: 0;
}
/* ── Status pills ──────────────────────────────────────────────────────────
A pill is the hue at 15 per cent behind a darkened version of the same hue,
because no single label colour clears 4.5:1 on eleven status backgrounds. */
.pill {
font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
padding: 4px 9px; border-radius: 999px; display: inline-block; white-space: nowrap;
justify-self: start;
}
.pill-execute { background: #3f8f7326; color: #235f52; }
.pill-design { background: #a8863a26; color: #7e6224; }
.pill-prepare { background: #7e622426; color: #5e4a1b; }
.pill-close { background: #235f5226; color: #235f52; }
.pill-p100 { background: #1e587626; color: #1e5876; }
.pill-p90 { background: #35708f26; color: #2a5d77; }
.pill-received { background: #5c8ca626; color: #486d81; }
.pill-qa { background: #a8863a26; color: #7e6224; }
.pill-ready { background: #2e7d6b26; color: #235f52; }
/* ── 1. Job list ───────────────────────────────────────────────────────── */
.shot-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.kpi {
border-radius: 9px; padding: 13px 15px; border: 1px solid #ebefef;
display: flex; flex-direction: column;
}
.kpi-on { background: var(--ink); border-color: var(--ink); }
.kpi span {
font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--ink-meta);
}
.kpi b { font-family: var(--display); font-size: 22px; font-weight: 500; color: var(--ink); }
.kpi-on span { color: rgba(255, 255, 255, 0.65); }
.kpi-on b { color: #fff; }
.shot-table { border: 1px solid #ebefef; border-radius: 10px; overflow: hidden; }
.jobs-row {
display: grid; grid-template-columns: minmax(0, 1.4fr) 108px minmax(0, 1.05fr) minmax(0, 0.75fr);
gap: 12px; padding: 11px 16px; border-bottom: 1px solid #f2f5f5; align-items: center;
}
.jobs-row:last-child { border-bottom: none; }
.jobs-head { padding: 9px 16px; background: #f6f8f8; border-bottom: 1px solid #ebefef; }
.jobs-head span {
font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--ink-meta);
}
.jobs-row .well { font-size: 12px; color: #1a2224; }
.jobs-row .meta { font-size: 12px; color: var(--ink-body); }
.jobs-row .pill { font-size: 8px; }
/* ── 2. Mapping ────────────────────────────────────────────────────────── */
.map-row { display: grid; grid-template-columns: 210px minmax(0, 1fr); border-bottom: 1px solid #f2f5f5; }
.map-row:last-child { border-bottom: none; }
.map-head { background: #f6f8f8; border-bottom: 1px solid #ebefef; }
.map-label {
padding: 13px 16px; font-size: 12px; color: #1a2224; border-right: 1px solid #ebefef;
}
.map-head .map-label {
padding: 10px 16px; font-family: var(--mono); font-size: 8px;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-meta);
}
.map-months, .map-track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.map-months span {
padding: 10px 8px; font-family: var(--mono); font-size: 9px;
color: var(--ink-meta); border-right: 1px solid #ebefef;
}
.map-track { align-items: center; padding: 7px 0; }
/* Each bar states its own start month, length and status hue as data. */
.map-bar {
grid-column: var(--col) / span var(--span); background: var(--hue);
height: 22px; margin: 0 5px; border-radius: 4px; overflow: hidden;
display: flex; align-items: center; padding: 0 5px;
}
/* The label carries its own surface: no single colour clears 4.5:1 on every bar. */
.map-bar span {
font-family: var(--mono); font-size: 8px; letter-spacing: 0.06em; text-transform: uppercase;
padding: 2px 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.94); color: var(--ink);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ── 3. Workshop ───────────────────────────────────────────────────────── */
.shot-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
padding: 6px 11px; border-radius: 999px; white-space: nowrap;
}
.chip-inbound { background: #5c8ca61f; color: #486d81; }
.chip-qa { background: #7e62241f; color: #7e6224; }
.chip-ready { background: #235f521f; color: #235f52; }
.shot-rows { display: flex; flex-direction: column; gap: 8px; }
.tool-row {
border: 1px solid #ebefef; border-radius: 8px; padding: 12px 14px;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.tool-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tool-id b { font-size: 13px; font-weight: 600; color: #1a2224; }
.tool-id span { font-family: var(--mono); font-size: 10px; color: var(--ink-meta); }
.tool-act { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.tool-act .shot-action { font-size: 11px; padding: 8px 13px; }
/* ── 4. Finance ────────────────────────────────────────────────────────────
The figure and the bar read the same two custom properties, so a percentage
cannot drift away from the amount beside it. */
.fin-planned { --hue: #1e5876; --pct: 100%; }
.fin-actual { --hue: #3f8f73; --pct: 38%; }
.fin-invoiced { --hue: #35708f; --pct: 15%; }
.fin-paid { --hue: #2e7d6b; --pct: 13%; }
.fin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.fin-stat { border: 1px solid #ebefef; border-radius: 9px; padding: 13px 15px; display: flex; flex-direction: column; }
.fin-stat span {
font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--ink-meta);
}
.fin-stat b { font-family: var(--display); font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--hue); }
.fin-bars { border: 1px solid #ebefef; border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 11px; }
.fin-bar { display: grid; grid-template-columns: 82px minmax(0, 1fr) 42px; gap: 12px; align-items: center; }
.fin-bar > span { font-size: 12px; color: var(--ink-body); }
/* The unfilled part of the bar is a chart fill, which is what Glacier is
for. The filled part keeps its status hue, because colour is reserved
for data. */
.fin-bar > i { height: 12px; border-radius: 3px; background: var(--glacier); display: block; }
.fin-bar > i::after { content: ""; display: block; height: 100%; width: var(--pct); border-radius: 3px; background: var(--hue); }
.fin-bar > b {
font-family: var(--mono); font-size: 10px; font-weight: 400;
font-variant-numeric: tabular-nums; color: var(--ink-body); text-align: right;
}
/* A missing figure is named as a gap, never rendered as a zero. */
.fin-gap { border: 1px solid #ebefef; border-radius: 8px; padding: 12px 15px; display: flex; flex-direction: column; gap: 3px; }
.fin-gap b { font-size: 13px; font-weight: 600; color: var(--ink); }
.fin-gap span { font-size: 12px; line-height: 1.55; color: var(--ink-body); }
/* ── 5. Rig app ────────────────────────────────────────────────────────────
Dark by default, every control at least 48 px, and offline is a state with
a queue count rather than a blocked action. */
.rig-shot {
background: var(--page); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 16px;
overflow: hidden; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.6);
}
.rig-head {
padding: 16px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.rig-head b { font-size: 15px; font-weight: 600; color: #fff; }
.rig-badge {
font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
padding: 5px 11px; border-radius: 999px; background: rgba(79, 203, 232, 0.19);
color: #4fcbe8; white-space: nowrap;
}
.rig-row {
padding: 15px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.07);
display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.rig-tool { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rig-tool b { font-size: 14px; font-weight: 600; color: #fff; }
.rig-tool span { font-family: var(--mono); font-size: 11px; color: rgba(255, 255, 255, 0.6); }
.rig-btn {
font-size: 13px; font-weight: 600; color: #fff; border-radius: 7px;
padding: 11px 17px; white-space: nowrap; flex-shrink: 0;
}
.rig-start { background: #2e7d6b; }
.rig-end { background: #b23b2e; }
.rig-offline { padding: 15px 20px; display: flex; align-items: center; gap: 11px; }
.rig-offline span { width: 7px; height: 7px; border-radius: 999px; background: #fff; flex-shrink: 0; }
.rig-offline b { font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, 0.7); }
/* ══ PAGE FURNITURE ══════════════════════════════════════════════════════ */
.band-inner { max-width: var(--maxw); margin: 0 auto; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.stack-sm { gap: 12px; }
.stack-md { gap: 26px; }
.stack-lg { gap: 34px; }
.stack-xl { gap: 46px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
/* Two columns that collapse without a breakpoint: headline left, copy right. */
.two-col {
display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: clamp(32px, 5vw, 72px); align-items: start;
}
.two-col-mid { align-items: center; }
.two-col-tight { gap: clamp(28px, 4vw, 60px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.col-offset { padding-top: 8px; }
.bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.bullets li {
position: relative; padding-left: 17px; font-size: 15px; line-height: 1.6;
color: rgba(255, 255, 255, 0.82);
}
.bullets li::before {
content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px;
border-radius: 999px; background: rgba(255, 255, 255, 0.5);
}
/* Both light grounds take the ink values, not just the white one. The dot is
a plain 6px #A3ADAD: the mark is not a list bullet - it has a 20px floor
and only two sanctioned uses inside the UI. */
.band-white .bullets li, .band-tint .bullets li { color: var(--ink-body); }
.band-white .bullets li::before, .band-tint .bullets li::before { background: #a3adad; }
/* ── Wave edges ────────────────────────────────────────────────────────────
The fill is the colour of the band below; the background is the colour of
the band above, so the cut reads as one band biting into the other. */
.wave-raised path { fill: var(--raised); }
.wave-white path { fill: #fff; }
.wave-page path { fill: var(--page); }
.wave-on-page { background: var(--page); }
.wave-on-raised { background: var(--raised); }
.wave-on-white { background: #fff; }
.wave-rule path { fill: none; stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.4; }
.band-white .wave-rule path { stroke: #a3adad; }
/* ── Discs ───────────────────────────────────────────────────────────────
One mask definition per page; every disc is that mask over a circle. */
.mask-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.disc svg { width: 100%; height: 100%; }
.disc-raised circle { fill: var(--raised); }
.disc-deep circle { fill: #0f3038; }
.disc-faint circle { fill: rgba(255, 255, 255, 0.045); }
.disc-top-left { top: -20vw; left: -18vw; width: 62vw; height: 62vw; }
.disc-bottom-right { bottom: -20vw; right: -14vw; width: 52vw; height: 52vw; }
/* ── Hero ────────────────────────────────────────────────────────────────
The headline is the design: nothing else in a hero competes with it. */
.hero { position: relative; overflow: hidden; background: var(--page); padding: clamp(64px, 8vw, 118px) 0 0; }
.hero-inner { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.hero-copy { display: flex; flex-direction: column; gap: 26px; max-width: 46ch; margin-top: 38px; }
.hero-shot { position: relative; max-width: var(--maxw); margin: 56px auto 0; padding: 0 var(--pad); }
.hero-shot + .wave { margin-top: -1px; }
/* A page hero without a screenshot under it. */
.hero-plain { padding: clamp(56px, 7vw, 96px) var(--pad) clamp(48px, 6vw, 84px); }
.hero-plain .hero-inner { padding: 0; }
/* ── One data model, and the About principles ────────────────────────────
A column under a small wave rule: the mark's figure at text scale. */
.rule-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; }
.rule-col { position: relative; padding-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.noun {
font-family: var(--display); font-weight: 500; font-size: clamp(26px, 2.6vw, 36px);
letter-spacing: -0.02em; line-height: 1.05;
}
.rule-col p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--on-dark-soft); }
.band-white .rule-col p { color: var(--ink-body); }
/* ── The lifecycle thread ──────────────────────────────────────────────────
The five stage markers sit at the computed y of the wave path itself, so
the thread and the mark are one figure rather than dots near a line. The
svg keeps a fixed 96px height, so those y values hold at any width. */
/* Same rule as the screenshots: five stage labels in 59px each is not a
smaller version of this figure, it is a broken one. */
.scroll-x { overflow: auto hidden; overscroll-behavior-x: contain; }
.thread { position: relative; width: 100%; min-width: 620px; }
.thread > svg { display: block; width: 100%; height: 96px; }
.thread > svg path { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 2; }
.thread-dots, .thread-labels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.thread-dots { position: absolute; inset: 0; }
.thread-dots div { position: relative; }
.thread-dots span {
position: absolute; top: var(--top); left: 50%; margin-left: -7.5px;
width: 15px; height: 15px; border-radius: 999px;
background: var(--hue); box-shadow: 0 0 0 5px var(--raised);
}
.thread-labels { gap: 10px; margin-top: 8px; }
.thread-labels div { display: flex; flex-direction: column; gap: 5px; align-items: center; text-align: center; }
.thread-labels b {
font-family: var(--mono); font-size: 12px; font-weight: 500;
letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
}
.thread-labels span { font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.55); }
/* ── Surface cards ───────────────────────────────────────────────────────
Each carries a faint disc in its corner and leads to its own page. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.card {
position: relative; overflow: hidden; background: var(--raised); border-radius: 16px;
padding: 28px; display: flex; flex-direction: column; gap: 14px;
transition: background 160ms ease-out;
}
.card:hover { background: #12414d; }
.card > *:not(.disc) { position: relative; }
.card-icon {
width: 42px; height: 42px; border-radius: 10px; background: rgba(255, 255, 255, 0.1);
display: flex; align-items: center; justify-content: center;
}
.card-icon svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { font-family: var(--display); font-size: 20px; font-weight: 600; }
.card p { margin: 0; font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, 0.68); }
.card-more {
margin-top: auto; padding-top: 4px; font-family: var(--mono); font-size: 11px;
letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6);
}
/* ── Also included, and the About facts ──────────────────────────────────── */
.extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; }
.extra { display: flex; flex-direction: column; gap: 7px; border-top: 2px solid var(--ink); padding-top: 15px; }
.extra b { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--ink); }
.extra span { font-size: 14px; line-height: 1.65; color: var(--ink-body); }
.band-page .extra, .band-raised .extra { border-top-color: rgba(255, 255, 255, 0.35); }
.band-page .extra b, .band-raised .extra b { color: #fff; }
.band-page .extra span, .band-raised .extra span { color: var(--on-dark-soft); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; }
.fact { display: flex; flex-direction: column; gap: 5px; }
.fact dt {
font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
text-transform: uppercase; color: rgba(255, 255, 255, 0.45);
}
.fact dd { margin: 0; font-size: 15px; color: #fff; }
/* ── Numbered surface sections on the Product page ───────────────────────── */
.surface-shot { margin-top: 36px; }
/* ── Contact ─────────────────────────────────────────────────────────────
Minimum 44px on every control, 48px on inputs, and the segment question is
buttons rather than a dropdown because it has four options. */
.contact-block { display: flex; flex-direction: column; gap: 18px; border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 26px; }
.contact-block > .note { font-size: 10px; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.62); }
/* Written after the dark rule above, and at the same specificity, so the
light ground wins on order rather than by accident. */
.band-white .contact-block > .note { color: var(--ink-meta); }
.note-sm { font-size: 10px; letter-spacing: 0.18em; }
/* Contact now sits on a white page rather than in a dark hole, so the key,
the value and the rule above "what to bring" all take ink values. */
.band-white .contact-block { border-top-color: var(--line); }
.band-white .contact-row dt { color: var(--ink-meta); }
.band-white .contact-row dd { color: #1a2224; }
.contact-rows { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.contact-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: baseline; }
.contact-row dt { font-size: 14px; color: rgba(255, 255, 255, 0.55); }
.contact-row dd { margin: 0; font-size: 15px; color: #fff; }
.contact-row a:hover { text-decoration: underline; }
/* The form sits on a page rather than floating in a hole: a tinted card with
a hairline border and no shadow. */
.form-card {
background: var(--tint); color: var(--ink-body); border: 1px solid var(--line);
border-radius: 16px; padding: clamp(28px, 3vw, 40px);
display: flex; flex-direction: column; gap: 18px;
}
.form-card h2 { font-family: var(--display); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.form-card .meta { font-size: 14px; line-height: 1.6; color: var(--ink-meta); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > label, .field > span { font-size: 13px; font-weight: 500; color: var(--ink-body); }
.field-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
/* 46px, which is the authored height and is what it measures now that the
reset puts padding inside the box. */
.form-card input, .form-card textarea {
font-family: var(--sans); font-size: 15px; color: #1a2224; background: #fff;
border: 1px solid var(--rule-light); border-radius: 10px; padding: 13px 15px;
min-height: 46px; width: 100%; outline: none;
transition: border-color 160ms ease-out;
}
.form-card textarea { min-height: 96px; resize: vertical; }
.form-card input:focus, .form-card textarea:focus { border-color: var(--ink); }
.form-card input::placeholder, .form-card textarea::placeholder { color: #a3adad; }
.segments { display: flex; gap: 8px; flex-wrap: wrap; }
.segment {
font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer;
border-radius: 8px; padding: 12px 18px; min-height: 44px;
background: #fff; border: 1px solid var(--rule-light); color: var(--ink);
transition: background 160ms ease-out, border-color 160ms ease-out;
}
.segment:hover { background: #f6f8f8; }
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment:has(input:checked) { background: var(--ink); border-color: var(--ink); color: #fff; }
.segment:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.form-send { min-height: 52px; padding: 16px; width: 100%; }
.form-note { font-size: 13px; line-height: 1.6; color: var(--ink-meta); }
/* ══ WEBSITE C COMPONENTS ════════════════════════════════════════════════ */
/* The lead hero on Home: taller than a page hero, and the only place the
headline runs to 118px. */
.hero-lead {
position: relative; overflow: hidden; background: var(--page);
padding: clamp(72px, 9vw, 132px) var(--pad) clamp(80px, 10vw, 140px);
}
.hero-lead .hero-inner { padding: 0; }
.lede-lg {
font-size: clamp(18px, 1.5vw, 22px); line-height: 1.6; margin: 0;
color: rgba(255, 255, 255, 0.8); max-width: 54ch; text-wrap: pretty;
}
/* A statement heading: larger than a section head, smaller than a hero. */
.h-statement {
font-family: var(--display); font-weight: 500; margin: 0;
font-size: clamp(32px, 4.8vw, 64px); line-height: 1; letter-spacing: -0.035em;
max-width: 17ch;
}
.btn-sm { padding: 15px 26px; }
.disc-visibility { --s: min(58vw, 835px); bottom: calc(var(--s) * -0.41); left: calc(var(--s) * -0.34); }
.figures-tight { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 28px; }
/* Swell sits where a hero disc would, capped at its size at 1440 so it stays
an arc on a large display rather than becoming the field. */
.swell {
--s: min(56vw, 806px); position: absolute; pointer-events: none;
width: var(--s); height: var(--s);
top: calc(var(--s) * -0.32); right: calc(var(--s) * -0.25);
}
.swell svg { width: 100%; height: 100%; }
/* ── The cut disc, set as a figure ───────────────────────────────────────
One disc, cut by the wave. No satellites: a plain circle is not part of
this system, and the mark only ever appears as the disc and the wave. */
/* An ![]()
rather than an inline masked