/* ==========================================================================
NG Business — design system stylesheet
Single vendored file, no build step. See DESIGN.md for the spec.
Layer order is declared once here so later chunks slot in without
specificity fights:
tokens — :root custom properties (this chunk)
base — element defaults, reset, a11y floor (this chunk)
components — buttons, forms, chips, tables (chunk 3)
public — the branded client surface (chunk 4)
agent — the neutral staff surface (chunk 5)
auth — login / OTP / password screens (chunk 6)
utilities — single-purpose helpers, always last
========================================================================== */
@layer tokens, base, components, public, agent, auth, utilities;
/* --------------------------------------------------------------------------
Fonts — self-hosted, latin subset. woff2 only (DESIGN.md §1, §3).
url() is relative to this file: /static/common/app.css -> fonts/…
-------------------------------------------------------------------------- */
@font-face {
font-family: "IBM Plex Sans";
src: url("fonts/ibm-plex-sans-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "IBM Plex Sans";
src: url("fonts/ibm-plex-sans-500.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "IBM Plex Mono";
src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "IBM Plex Mono";
src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
/* Landing page faces (mockups money3 / moneyPhone3). Both are variable
fonts, latin subset, SIL OFL — the same files Google Fonts serves, vendored
so the CSP's font-src 'self' holds. Bricolage carries opsz 12–96 + wght
200–800; JetBrains Mono carries wght 400–800. */
@font-face {
font-family: "Bricolage Grotesque";
src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
font-weight: 400 800;
font-style: normal;
font-display: swap;
}
/* Landing type system — Inter, the variable font Google Fonts serves (latin
subset, SIL OFL): wght 100–900 + opsz 14–32, so large sizes pick up its
display cut automatically (font-optical-sizing: auto). Vendored for the
same CSP reason as above. */
@font-face {
font-family: "Inter";
src: url("fonts/inter-latin.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* --------------------------------------------------------------------------
Tokens (DESIGN.md §2–§4). Light values only in this chunk; the dark block
is a second set of values added in chunk 2, not a rewrite.
-------------------------------------------------------------------------- */
@layer tokens {
:root {
/* §2.1 Brand — black on yellow, always. Never white on the yellow. */
--brand: #FFD028; /* NG Business yellow (warmer than WU) */
--brand-ink: #111111; /* text + buttons ON brand — always black */
--brand-deep: #3A2F00; /* muted body copy on brand */
/* §2.2 Neutrals — the agent surface and the light-mode base.
Structure comes from borders, not shadows. */
--paper: #FFFFFF; /* page background */
--surface: #FFFFFF; /* panels, cards */
--surface-alt: #F7F7F8; /* zebra rows, subtle fills */
--ink: #111111; /* primary text */
--ink-muted: #111111; /* secondary text, labels — black, not gray (clashed with brand yellow) */
--line: #111111; /* hairline borders — black, not gray */
--line-strong: #000000; /* emphasized dividers — pure black */
/* §2.3 Status — functional, not decorative. Never colour alone.
Each has a matching tint that carries its text at full contrast. */
/* Chip fg/bg pairs are all >= 4.5:1 in both themes (verified §8). */
--status-new: #B45309; /* CLAIMED — amber = act on me */
--status-new-bg: #FDF6EE;
--status-go: #15803D; /* CONFIRMED — code issued */
--status-go-bg: #EAF7F0;
--status-stop: #B91C1C; /* REJECTED (PaymentClaim) / CANCELLED */
--status-stop-bg: #FBE9E8;
--status-done: #556070; /* PAID_OUT — settled, de-emphasised */
--status-done-bg: #EDF0F3;
--status-quoted: #475569; /* QUOTED — waiting on the client */
--status-quoted-bg: #EBEEF2;
/* §2.4 New-claim highlight — pale brand tint on the newest pending row */
--highlight-new: #FFF8E0;
/* §3 Type */
--font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
/* §4 Spacing — 4px base scale. Use the tokens, don't invent values. */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--radius: 8px; /* controls, inputs, buttons */
--radius-card: 12px; /* cards, panels */
--radius-pill: 999px; /* public CTA buttons only */
/* Non-spec conveniences used by the base frame */
--page-max: 1100px;
--prose-max: 66ch; /* ~70 chars for prose (§3) */
color-scheme: light;
/* --- Public palette (mockups money3/5, moneyPhone3/5) --------------
The redesigned public pages: the homepage and the quote → claim flow.
Light-only, like the brand tokens: these pages have no dark variant,
so none of these are remapped below. */
--pub-lime: #c6e86b; /* primary CTA, logo dot, accents */
--pub-lime-soft: rgba(198, 232, 107, 0.35);
--pub-go: #62941a; /* phone "Commencer" button */
--pub-go-hover: #557f14;
--pub-go-shadow: rgba(98, 148, 26, 0.28);
--pub-go-ring: rgba(98, 148, 26, 0.14); /* focused field */
--pub-lime-dark: #7a9c2e; /* step labels, field icons */
--pub-lime-ring: rgba(198, 232, 107, 0.55); /* active step node */
--pub-lime-wash: rgba(198, 232, 107, 0.38); /* "being verified" card top */
--pub-error: #b91c1c; /* field + form errors (light-only) */
--pub-error-bg: #fbe9e8;
--pub-sun: #ffe27a; /* coins, yellow tile */
--pub-sun-soft: rgba(255, 226, 122, 0.25);
--pub-ink: #10160a; /* text, nav bar, dark card cell */
--pub-card: #f4f6ee; /* page background */
--pub-panel: #eef1e6; /* steps, features, FAQ, inputs */
--pub-line: #e4e8d9; /* input + tile borders */
--pub-line-soft: #e2e6d6; /* secondary button border */
--pub-muted: #6b7462; /* body copy, labels */
--pub-nav-link: #d6dcc9; /* nav links on the ink bar */
--pub-nav-btn: #2a3620; /* "Connexion" pill on the ink bar */
--pub-sky: #cfe4ff; /* card cell */
--pub-coral: #f08a5d; /* illustration figure */
--pub-white: #ffffff;
--pub-clear: rgba(255, 255, 255, 0);
--pub-shine: rgba(255, 255, 255, 0.7);
--pub-panel-shadow: rgba(0, 0, 0, 0.05);
--pub-font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
--pub-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
--pub-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* landing */
--pub-pebble: #868685; /* landing input border (3.6:1 on white) */
/* Landing app mockup (phone screen in the transfer panel) */
--pub-app-edge: #3a4630; /* phone frame highlight */
--pub-app-screen: #0b0f07; /* phone screen */
--pub-app-island: #000000; /* dynamic-island notch */
--pub-app-glow: rgba(198, 232, 107, 0.22);
--pub-app-tint-1: rgba(255, 255, 255, 0.06); /* transaction rows */
--pub-app-tint-2: rgba(255, 255, 255, 0.08); /* row icons, frame edge */
--pub-app-tint-3: rgba(255, 255, 255, 0.1); /* header icon buttons */
--pub-ink-clear: rgba(16, 22, 10, 0); /* --pub-ink at 0 alpha */
/* Landing footer (ink band) */
--pub-foot-dim: #9aa38d; /* small print + sub-labels on ink */
--pub-foot-line: rgba(255, 255, 255, 0.1); /* dividers + outlines on ink */
/* --- Dark palette (DESIGN.md §6) -----------------------------------
Defined once here; the two selectors below only remap the live
tokens to these. Neutrals invert. Status colours SHIFT lighter,
they do not invert — each still has to hold contrast on a dark
surface. Brand tokens are deliberately NOT remapped: the yellow
block has no dark variant. */
--dark-paper: #14161A;
--dark-surface: #1B1E24;
--dark-surface-alt: #23272E;
--dark-ink: #ECEDEE;
--dark-ink-muted: #ECEDEE; /* full-contrast, not muted gray — mirrors light theme */
--dark-line: #2E333B;
--dark-line-strong: #3D444E;
--dark-status-new: #F4B366;
--dark-status-new-bg: #38290F;
--dark-status-go: #5FD08A;
--dark-status-go-bg: #123021;
--dark-status-stop: #F0908A;
--dark-status-stop-bg: #3A1B19;
--dark-status-done: #9AA6B4;
--dark-status-done-bg: #262B32;
--dark-status-quoted: #AEB9C6;
--dark-status-quoted-bg: #22272F;
--dark-highlight-new: #2C2812;
}
/* Follow the OS setting unless the visitor pinned "light" via the toggle. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--paper: var(--dark-paper);
--surface: var(--dark-surface);
--surface-alt: var(--dark-surface-alt);
--ink: var(--dark-ink);
--ink-muted: var(--dark-ink-muted);
--line: var(--dark-line);
--line-strong: var(--dark-line-strong);
--status-new: var(--dark-status-new);
--status-new-bg: var(--dark-status-new-bg);
--status-go: var(--dark-status-go);
--status-go-bg: var(--dark-status-go-bg);
--status-stop: var(--dark-status-stop);
--status-stop-bg: var(--dark-status-stop-bg);
--status-done: var(--dark-status-done);
--status-done-bg: var(--dark-status-done-bg);
--status-quoted: var(--dark-status-quoted);
--status-quoted-bg: var(--dark-status-quoted-bg);
--highlight-new: var(--dark-highlight-new);
}
}
/* Manual override wins in both directions. Same remap as above — the
media query can't be folded into a selector list, so this list is
duplicated on purpose; the values it points at live once, above. */
:root[data-theme="dark"] {
color-scheme: dark;
--paper: var(--dark-paper);
--surface: var(--dark-surface);
--surface-alt: var(--dark-surface-alt);
--ink: var(--dark-ink);
--ink-muted: var(--dark-ink-muted);
--line: var(--dark-line);
--line-strong: var(--dark-line-strong);
--status-new: var(--dark-status-new);
--status-new-bg: var(--dark-status-new-bg);
--status-go: var(--dark-status-go);
--status-go-bg: var(--dark-status-go-bg);
--status-stop: var(--dark-status-stop);
--status-stop-bg: var(--dark-status-stop-bg);
--status-done: var(--dark-status-done);
--status-done-bg: var(--dark-status-done-bg);
--status-quoted: var(--dark-status-quoted);
--status-quoted-bg: var(--dark-status-quoted-bg);
--highlight-new: var(--dark-highlight-new);
}
}
/* --------------------------------------------------------------------------
Base — element defaults and the accessibility floor (DESIGN.md §8).
-------------------------------------------------------------------------- */
@layer base {
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--paper);
color: var(--ink);
font-family: var(--font-sans);
font-size: 16px; /* §3 — min 16px, clients on phones outdoors */
line-height: 1.5;
font-weight: 400;
-webkit-font-smoothing: antialiased;
}
img,
svg {
max-width: 100%;
height: auto;
}
/* Headings — sentence case, weights 400/500 only, nothing heavier (§3). */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 var(--space-3);
font-weight: 500;
line-height: 1.25;
text-wrap: balance;
}
h1 { font-size: 1.625rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }
h4, h5, h6 { font-size: 1rem; }
p {
margin: 0 0 var(--space-4);
max-width: var(--prose-max);
}
a {
color: var(--ink);
text-decoration: underline;
text-decoration-color: var(--brand);
text-decoration-thickness: 2px;
text-underline-offset: 2px;
}
a:hover {
text-decoration-color: var(--ink);
}
/* Visible keyboard focus on every interactive element — never removed
without a replacement (§8). */
:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 2px;
border-radius: 2px;
}
/* Respect users who ask for no motion (§8). */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* --- minimal page frame -------------------------------------------------
Real surface styling (hero, dense agent rows) lands in chunks 4–5.
This is only enough that pages aren't raw while the system is built. */
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--line);
background: var(--surface);
}
.site-header form {
margin: 0;
}
.site-header__actions {
display: flex;
align-items: center;
gap: var(--space-4);
flex-wrap: wrap;
}
/* Server-rendered dark-mode switch (DESIGN.md §6). A plain segmented
control of submit buttons — no JS. */
.theme-form {
display: flex;
align-items: center;
gap: var(--space-1);
}
.theme-form__label {
color: var(--ink-muted);
font-size: 0.8125rem;
margin-right: var(--space-1);
}
.theme-form button {
font: inherit;
font-size: 0.8125rem;
padding: var(--space-1) var(--space-2);
color: var(--ink);
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
cursor: pointer;
}
.theme-form button + button {
margin-left: -1px;
}
.theme-form button[aria-pressed="true"] {
background: var(--ink);
color: var(--surface);
border-color: var(--ink);
}
.site-brand {
font-weight: 500;
text-decoration: none;
color: var(--ink);
white-space: nowrap;
}
.site-brand::before {
content: "";
display: inline-block;
width: 0.75em;
height: 0.75em;
margin-right: 0.5em;
border-radius: 3px;
background: var(--brand);
vertical-align: baseline;
}
.site-main {
flex: 1;
width: 100%;
max-width: var(--page-max);
margin-inline: auto;
padding: var(--space-5) var(--space-4);
}
/* Skip link — visually hidden until focused (§8). Ink ground so it reads
against any surface, brand or neutral. */
.skip-link {
position: absolute;
z-index: 10;
left: var(--space-2);
top: var(--space-2);
padding: var(--space-2) var(--space-3);
background: var(--ink);
color: var(--paper);
border-radius: var(--radius);
text-decoration: none;
transform: translateY(-150%);
}
.skip-link:focus {
transform: translateY(0);
}
/* --- form errors and notices -----------------------------------------
Retires the inline style="color:#b00" spans (DESIGN.md §1). Text
colour is never the only signal — the message itself names the problem
and the field is marked. Fuller form styling is chunk 3. */
.field-error {
display: block;
margin-top: var(--space-1);
color: var(--status-stop);
font-size: 0.875rem;
}
.alert--warning {
margin: 0 0 var(--space-4);
padding: var(--space-3) var(--space-4);
max-width: var(--prose-max);
border-left: 3px solid var(--status-new);
background: var(--status-new-bg);
color: var(--ink);
border-radius: var(--radius);
}
/* django.contrib.messages — rendered once from base.html. */
.messages {
list-style: none;
margin: 0 0 var(--space-4);
padding: 0;
display: grid;
gap: var(--space-2);
}
.notice {
padding: var(--space-3) var(--space-4);
border-left: 3px solid var(--line-strong);
background: var(--surface-alt);
color: var(--ink);
border-radius: var(--radius);
}
.notice--success { border-left-color: var(--status-go); background: var(--status-go-bg); }
.notice--warning { border-left-color: var(--status-new); background: var(--status-new-bg); }
.notice--error { border-left-color: var(--status-stop); background: var(--status-stop-bg); }
}
/* --------------------------------------------------------------------------
Components — buttons, form controls, status chips, tables + card switcher.
Surface-agnostic here; the public/agent layers only re-skin (chunks 4–5).
-------------------------------------------------------------------------- */
@layer components {
/* --- Buttons (DESIGN.md §7.1) --------------------------------------
Default target is 44px (public). Agent rows add .btn--sm (32px).
A destructive action must read as deliberate — never the same weight
as the affirmative button beside it, so .btn--danger is outlined. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 44px;
padding: var(--space-2) var(--space-5);
font: inherit;
font-weight: 500;
line-height: 1.2;
text-align: center;
text-decoration: none;
border: 1px solid transparent;
border-radius: var(--radius);
background: transparent;
color: var(--ink);
cursor: pointer;
}
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
}
.btn--primary {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
.btn--secondary {
background: transparent;
color: var(--ink);
border-color: var(--line-strong);
}
.btn--danger {
background: transparent;
color: var(--status-stop);
border-color: var(--status-stop);
font-weight: 400;
}
/* Black pill on brand — public CTA, one per screen (§5.1). Wired here,
applied to the quote/claim submits in chunk 4. */
.btn--public-primary {
background: var(--brand-ink);
color: var(--brand);
border-color: var(--brand-ink);
border-radius: var(--radius-pill);
padding-inline: var(--space-6);
}
.btn--sm {
min-height: 32px;
padding: var(--space-1) var(--space-3);
font-size: 0.875rem;
}
.btn--block {
display: flex;
width: 100%;
}
/* --- Form controls (DESIGN.md §7.2) ------------------------------------
Scoped to .site-main so Django's class-less widgets pick this up with
no template change, and the header's own controls are untouched. */
.site-main label {
display: block;
font-weight: 500;
margin-bottom: var(--space-1);
}
.site-main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.site-main select,
.site-main textarea {
display: block;
width: 100%;
max-width: 28rem;
min-height: 44px;
padding: var(--space-2) var(--space-3);
font: inherit;
color: var(--ink);
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
}
.site-main input:focus,
.site-main select:focus,
.site-main textarea:focus {
border-color: var(--ink);
}
/* Money amounts, payout/OTP codes and operator references are read
character-by-character — fixed width genuinely helps (§3, §7.2). */
.site-main #id_receiver_amount,
.site-main #id_amount_claimed,
.site-main #id_amount,
.site-main #id_code,
.site-main #id_operator_ref {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
/* Per-field paragraph spacing (templates wrap each field in ). */
.site-main form p {
margin-bottom: var(--space-4);
}
.form-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-5);
}
/* --- Status chips (DESIGN.md §2.3, §7.4) -----------------------------
Tint background + darker text from the same family + the word. Never
colour alone. Two sizes: rows (default) and detail views (.chip--lg). */
.chip {
display: inline-block;
padding: 2px var(--space-2);
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.5;
white-space: nowrap;
border-radius: var(--radius);
}
.chip--lg {
font-size: 0.9375rem;
padding: var(--space-1) var(--space-3);
}
.chip--new { background: var(--status-new-bg); color: var(--status-new); }
.chip--go { background: var(--status-go-bg); color: var(--status-go); }
.chip--stop { background: var(--status-stop-bg); color: var(--status-stop); }
.chip--done { background: var(--status-done-bg); color: var(--status-done); }
.chip--quoted { background: var(--status-quoted-bg); color: var(--status-quoted); }
/* --- Data table (DESIGN.md §7.3) -----------------------------------
One
per list. On wide screens it is a
table; below 640px each becomes a card (label/value pairs from
td[data-label]). One DOM, no JS, no dual render — so an HTMX row swap
(hx-swap="outerHTML" on a
) works at every width. */
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9375rem;
}
.data-table th,
.data-table td {
padding: var(--space-2) var(--space-3);
text-align: left;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.data-table th {
font-weight: 500;
color: var(--ink-muted);
border-bottom-color: var(--line-strong);
}
.data-table--zebra tbody tr:nth-child(even) {
background: var(--surface-alt);
}
.data-table .num {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.data-table .mono {
font-family: var(--font-mono);
}
.data-table tbody tr.is-new {
background: var(--highlight-new);
}
.data-table__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.data-table__empty {
padding: var(--space-4) var(--space-3);
color: var(--ink-muted);
}
/* Primary cell — the operator reference is the row's anchor: the collector
verifies it against their operator account before confirming. Mono and
larger, with the operator name muted directly beneath. */
.data-table__primary .ref {
font-family: var(--font-mono);
font-size: 1rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--ink);
word-break: break-all; /* operator_ref is up to 128 chars */
}
.data-table__sub {
display: block;
margin-top: 2px;
font-size: 0.8125rem;
font-weight: 400;
color: var(--ink-muted);
}
.data-table td.amount {
font-weight: 500;
color: var(--ink);
}
.data-table__meta {
color: var(--ink-muted);
font-size: 0.875rem;
}
/* New pending claims: an amber left rule ("act on me", DESIGN.md §2.3) on
top of the existing --highlight-new row tint. */
.data-table tbody tr.is-new td:first-child {
border-left: 3px solid var(--status-new);
}
@media (max-width: 640px) {
.data-table,
.data-table thead,
.data-table tbody,
.data-table tr,
.data-table td {
display: block;
width: 100%;
}
.data-table thead {
/* header labels move onto each cell via data-label */
position: absolute;
clip: rect(0 0 0 0);
overflow: hidden;
height: 1px;
width: 1px;
}
.data-table tbody tr {
margin-bottom: var(--space-3);
border: 1px solid var(--line);
border-radius: var(--radius-card);
padding: var(--space-2);
background: var(--surface);
}
.data-table tbody tr.is-new {
border-color: var(--status-new);
}
.data-table td {
display: flex;
justify-content: space-between;
gap: var(--space-4);
border: 0;
padding: var(--space-1) var(--space-2);
text-align: right;
}
.data-table td::before {
content: attr(data-label);
color: var(--ink-muted);
text-align: left;
font-weight: 400;
}
.data-table td.num {
text-align: right;
}
/* The operator reference leads the card as a heading, not a label/value row. */
.data-table td.data-table__primary {
display: block;
text-align: left;
padding-bottom: var(--space-2);
}
.data-table td.data-table__primary::before {
display: none;
}
.data-table td.data-table__primary .ref {
font-size: 1.0625rem;
}
.data-table tbody tr.is-new td:first-child {
border-left: 0; /* the card border already carries the new-claim colour */
}
.data-table td:has(.data-table__actions) {
display: block;
}
.data-table td:has(.data-table__actions)::before {
display: none;
}
.data-table__actions {
margin-top: var(--space-2);
}
.data-table__actions .btn {
flex: 1;
}
}
}
/* --------------------------------------------------------------------------
Public — the branded client surface (DESIGN.md §5.1). Bold: a full-bleed
brand hero, black type on it, one black pill CTA, a dark trust strip.
Spend boldness here and in the status system; everything else stays quiet.
-------------------------------------------------------------------------- */
@layer public {
/* Pages opt out of the reading-width and lay out their own bands. */
.site-main--bleed {
max-width: none;
padding: 0;
}
/* Re-introduce the reading width inside a band. */
.wrap {
max-width: var(--page-max);
margin-inline: auto;
padding-inline: var(--space-4);
}
/* The public header flows into the hero — same brand ground, black mark.
Force black on the yellow in both themes (never white on brand, §2.1). */
.page--public .site-header {
background: var(--brand);
border-bottom-color: rgba(0, 0, 0, 0.15);
}
.page--public .site-header .site-brand {
color: var(--brand-ink);
}
.page--public .site-brand::before {
background: var(--brand-ink);
}
/* Hero — full-bleed brand block, black heading, muted-black subtitle.
Stays yellow in dark mode (the brand block has no dark variant, §6). */
.hero {
background: var(--brand);
color: var(--brand-ink);
padding-block: var(--space-7);
}
.hero h1 {
margin: 0;
color: var(--brand-ink);
font-size: 1.875rem;
}
.hero__sub {
margin: var(--space-2) 0 0;
max-width: 46ch;
color: var(--brand-deep);
font-size: 1.0625rem;
}
/* Trust strip — the reassurance a stranger needs, and the agency number a
stuck client must never have to hunt for. Dark in both modes. */
.trust-strip {
background: var(--brand-ink);
color: #f2f2f2;
font-size: 0.9375rem;
}
.trust-strip__inner {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-5);
padding-block: var(--space-3);
}
.trust-strip__item {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.trust-strip a {
color: #fff;
text-decoration-color: var(--brand);
font-weight: 500;
white-space: nowrap;
}
/* Default focus ring is var(--ink) — invisible on the dark strip. */
.trust-strip a:focus-visible {
outline-color: var(--brand);
}
/* Body of a public page — the form, the status detail. Quiet neutral
surface; darkens with the OS in dark mode. */
.public-body {
padding-block: var(--space-6);
}
.public-body > :first-child {
margin-top: 0;
}
.public-body h2 {
margin-top: var(--space-6);
}
/* Space the "back to status" link out from the claim form's submit
button above it — no natural gap between the two otherwise. */
.claim-back {
margin-top: var(--space-5);
}
#quote-preview {
margin-block: var(--space-4);
}
.quote-preview-empty {
margin: 0;
color: var(--ink-muted);
}
.status-line {
display: flex;
align-items: center;
gap: var(--space-2);
font-weight: 500;
}
/* Quote preview — fee and total, money right-aligned and tabular. */
.quote-preview {
margin: var(--space-4) 0;
padding: var(--space-4);
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: var(--surface-alt);
}
.quote-preview > div {
display: flex;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-1) 0;
}
.quote-preview dt {
color: var(--ink-muted);
}
.quote-preview dd {
margin: 0;
font-variant-numeric: tabular-nums;
}
.quote-preview .is-total {
margin-top: var(--space-2);
padding-top: var(--space-2);
border-top: 1px solid var(--line-strong);
font-weight: 500;
}
.quote-preview .is-total dd {
font-size: 1.125rem;
}
/* "Save this reference" — a callout the client should not skim past. */
.callout {
margin: var(--space-4) 0;
padding: var(--space-3) var(--space-4);
border-left: 3px solid var(--brand);
background: var(--highlight-new);
color: var(--ink);
border-radius: var(--radius);
}
/* Payout code / reference — read aloud, character by character (§3). */
.code-block {
margin: var(--space-3) 0;
padding: var(--space-4);
border: 1px dashed var(--line-strong);
border-radius: var(--radius-card);
background: var(--surface-alt);
text-align: center;
}
.code-block__value {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: 1.75rem;
font-weight: 500;
letter-spacing: 0.08em;
word-break: break-all;
}
.code-block__label {
margin: 0 0 var(--space-1);
color: var(--ink-muted);
font-size: 0.875rem;
}
/* Money figure in running text. */
.money {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.pay-list {
margin: var(--space-3) 0;
padding: 0;
list-style: none;
display: grid;
gap: var(--space-2);
}
.pay-list li {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-3);
padding: var(--space-3);
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
}
.pay-list .pay-list__account {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
.copy-btn {
flex-shrink: 0;
}
}
/* --------------------------------------------------------------------------
Landing page (public homepage, templates/common/landing.html).
One DOM, two layouts — structure from the approved mockups:
< 600px moneyPhone3.html — one-screen splash: logo, tile collage,
headline, one "Commencer" button. No scrolling.
≥ 600px money3.html — the page fills the screen, content centred at
1200px: nav bar, hero + transfer panel, steps, features, FAQ,
footer (single column again at ≤ 800px).
Colours are the --pub-* tokens (light-only). The base layer's defaults
(line-height 1.5, p max-width, balanced headings, underlined links) are
reset here.
Type system — Inter everywhere (--pub-sans), "calt" on:
text Inter 400–700. Every size carries its own tracking:
12px −.003em · 14px −.005em · 16px −.006em · 18px −.007em
25px −.009em · 36px −.011em · 61px −.015em
scale: micro 12/1.63 · caption 14/1.55 · body-sm 16/1.5 ·
body 18/1.5 · body-lg 25/1.3 · subheading 36/1.25
display Inter Black 900, −.04em, line-height .85–1: the hero and the
section openers only — the page's one loud voice.
Spacing on a 4px grid: 12px between elements, 24px inside cards, 80px
between sections. Radii: pills (buttons, nav segments) 9999px, cards and
inputs 10px, large cards 28px.
-------------------------------------------------------------------------- */
@layer public {
/* The landing is light-only (no dark variant, like the brand hero §6):
pin the UA to light so form controls and scrollbars don't go dark. */
:root:has(> body.page--landing) {
color-scheme: light;
}
.page--landing {
color-scheme: light;
background: var(--pub-white);
color: var(--pub-ink);
font-family: var(--pub-sans);
font-feature-settings: "calt" 1;
font-weight: 400;
line-height: 1.5;
letter-spacing: -0.006em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.page--landing :focus-visible {
outline-color: var(--pub-ink);
}
/* Zero-specificity resets (:where) — they beat the base layer by layer
order alone, so every landing class below still wins over them. */
:where(.landing) p {
max-width: none;
}
:where(.landing) a {
color: inherit;
text-decoration: none;
}
/* --- Brand mark ---------------------------------------------------------- */
.landing-logo {
display: flex;
align-items: center;
gap: 8px;
font-weight: 900;
line-height: 1;
letter-spacing: -0.02em;
white-space: nowrap;
}
/* NG monogram (from the brand logo): serif "NG" in the text colour, the
swoosh + plane in --logo-accent (lime on the ink nav bar; the deeper
--pub-go on the white phone splash, where lime would wash out). */
.landing-logo {
--logo-accent: var(--pub-lime);
}
.landing-logo__mark {
flex: none;
width: auto;
height: 1.9em;
overflow: visible;
}
.landing-logo__letters {
fill: currentColor;
font-family: "Didot", "Bodoni 72", "Playfair Display", Georgia, "Times New Roman", serif;
font-size: 74px;
font-weight: 700;
letter-spacing: -0.02em;
}
.landing-logo__swoosh {
fill: none;
stroke: var(--logo-accent);
stroke-width: 3.2;
stroke-linecap: round;
}
.landing-logo__plane {
fill: var(--logo-accent);
}
/* NG Transfert logo (templates/common/_brand_logo.html): script "ng" and
TRANSFERT in the text colour, swoosh + plane in --logo-accent. Sized so
the "ng" matches the old serif NG; the g's tail hangs below. */
.brand-logo {
flex: none;
width: auto;
height: 2.6em;
overflow: visible;
}
.brand-logo__letters {
fill: currentColor;
}
.brand-logo__swoosh {
fill: none;
stroke: var(--logo-accent);
stroke-width: 3.2;
stroke-linecap: round;
}
.brand-logo__plane {
fill: var(--logo-accent);
}
/* Phones get the mark alone ("ng" + plane): TRANSFERT is unreadable there. */
.brand-logo--mark {
display: none;
}
@media (max-width: 599.98px) {
.brand-logo--full {
display: none;
}
.brand-logo--mark {
display: block;
}
}
.landing-logo__word {
font-size: 0.72em;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
}
/* --- Nav bar (desktop) ---------------------------------------------------- */
.landing-nav__links ul {
display: flex;
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
}
/* Nav segments: pills that light up under the pointer. */
.landing-nav__links a {
display: block;
padding: 8px 16px;
border-radius: 9999px;
color: var(--pub-nav-link);
font-size: 1rem;
font-weight: 500;
line-height: 1.5;
letter-spacing: -0.006em;
transition: background-color 0.2s ease, color 0.2s ease;
}
.landing-nav__links a:hover {
background-color: rgb(255 255 255 / 0.08);
color: var(--pub-white);
}
.landing-signin {
padding: 12px 24px;
border-radius: 9999px;
background: var(--pub-nav-btn);
color: var(--pub-white);
font-size: 1rem;
font-weight: 600;
line-height: 1.5;
letter-spacing: -0.006em;
white-space: nowrap;
transition: background-color 0.2s ease;
}
.landing-signin:hover {
background: color-mix(in srgb, var(--pub-nav-btn) 82%, var(--pub-white));
}
/* --- Hero ------------------------------------------------------------------ */
/* Display voice: Inter Black. The second line drops to regular weight so
the black line carries the shout alone. */
.landing-hero h1 {
margin: 0;
color: var(--pub-ink);
font-weight: 900;
line-height: 0.85;
letter-spacing: -0.04em;
}
.landing-hero__thin {
display: block;
margin-top: 0.3em;
font-size: 0.5em;
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.011em;
text-wrap: balance;
}
.landing-hero__lede {
max-width: 440px;
margin: 0 0 32px;
color: var(--pub-muted);
font-size: 1.125rem;
line-height: 1.5;
letter-spacing: -0.007em;
}
.landing-hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
/* Buttons — pills. */
.landing-btn {
display: inline-block;
padding: 12px 24px;
border: none;
border-radius: 9999px;
font: inherit;
font-size: 1rem;
font-weight: 600;
line-height: 1.5;
letter-spacing: -0.006em;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.landing-btn:active {
transform: scale(0.98);
}
.landing-btn--primary {
background: var(--pub-lime);
color: var(--pub-ink);
}
.landing-btn--primary:hover {
background: color-mix(in srgb, var(--pub-lime) 88%, var(--pub-ink));
}
.landing-btn--secondary {
padding: 11px 23px;
border: 1px solid var(--pub-line-soft);
background: var(--pub-white);
color: var(--pub-ink);
}
.landing-btn--secondary:hover {
border-color: var(--pub-ink);
}
/* The phone's "Commencer" button. */
.landing-btn--go {
display: block;
width: 100%;
padding: 16px 24px;
background: var(--pub-go);
color: var(--pub-white);
font-size: 1.125rem;
letter-spacing: -0.007em;
box-shadow: 0 10px 24px var(--pub-go-shadow);
}
.landing-btn--go:hover {
background: var(--pub-go-hover);
}
.landing-btn--go:focus-visible {
outline: 3px solid var(--pub-ink);
outline-offset: 3px;
}
.landing-stats {
display: flex;
flex-wrap: wrap;
gap: 24px 40px;
margin: 48px 0 0;
padding: 0;
list-style: none;
}
.landing-stats strong {
display: block;
font-size: 1.5625rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.009em;
}
.landing-stats li {
white-space: nowrap;
}
.landing-stats span {
color: var(--pub-muted);
font-size: 0.875rem;
line-height: 1.55;
letter-spacing: -0.005em;
}
/* --- Card + transfer panel (desktop hero, right column) ------------------- */
.landing-panel {
padding: 24px;
border-radius: 28px;
background: var(--pub-white);
box-shadow: 0 1px 2px var(--pub-panel-shadow), 0 16px 40px var(--pub-panel-shadow);
}
/* App preview (landing panel) — a phone screen in the public
palette: ink screen, lime accents. Decorative only (aria-hidden); the
bottom is cropped and fades out, as if the phone ran off the panel. */
.landing-app {
position: relative;
height: 330px;
overflow: hidden;
padding: 10px 10px 0;
border-radius: 30px 30px 14px 14px;
background: linear-gradient(160deg, var(--pub-app-edge), var(--pub-ink) 45%);
box-shadow: inset 0 0 0 1px var(--pub-app-tint-2);
}
.landing-app::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 64px;
background: linear-gradient(to bottom, var(--pub-ink-clear), var(--pub-ink));
pointer-events: none;
}
.landing-app__screen {
height: 100%;
padding: 10px 14px 0;
border-radius: 22px 22px 0 0;
background:
radial-gradient(120% 60% at 50% 0%, var(--pub-app-glow), transparent 70%),
var(--pub-app-screen);
color: var(--pub-white);
font-size: 0.75rem;
letter-spacing: -0.003em;
}
.landing-app__status {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.6875rem;
font-weight: 600;
}
.landing-app__island {
width: 64px;
height: 16px;
border-radius: 999px;
background: var(--pub-app-island);
}
.landing-app__bars {
display: flex;
gap: 3px;
align-items: flex-end;
}
.landing-app__bars i {
display: block;
width: 3px;
border-radius: 1px;
background: var(--pub-white);
}
.landing-app__bars i:nth-child(1) { height: 4px; }
.landing-app__bars i:nth-child(2) { height: 6px; }
.landing-app__bars i:nth-child(3) { height: 8px; }
.landing-app__bars i:nth-child(4) { height: 10px; }
.landing-app__head {
display: flex;
align-items: center;
gap: 10px;
margin-top: 14px;
}
.landing-app__avatar {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--pub-lime);
color: var(--pub-ink);
font-weight: 800;
}
.landing-app__who strong {
display: block;
font-size: 0.875rem;
font-weight: 700;
line-height: 1.2;
}
.landing-app__who span {
color: var(--pub-nav-link);
font-family: var(--pub-mono);
font-size: 0.625rem;
}
.landing-app__icons {
display: flex;
gap: 6px;
margin-left: auto;
}
.landing-app__icons span {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--pub-app-tint-3);
}
.landing-app__icons svg {
width: 14px;
height: 14px;
}
.landing-app__balance {
margin-top: 16px;
text-align: center;
}
.landing-app__balance small {
display: block;
color: var(--pub-nav-link);
font-size: 0.6875rem;
}
.landing-app__balance strong {
display: block;
font-size: 2rem;
font-weight: 900;
line-height: 1.1;
letter-spacing: -0.04em;
}
.landing-app__balance em {
color: var(--pub-lime);
font-size: 0.6875rem;
font-style: normal;
}
.landing-app__actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 14px;
}
.landing-app__actions span {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 34px;
border-radius: 999px;
background: var(--pub-nav-btn);
font-weight: 600;
}
.landing-app__actions span + span {
background: var(--pub-lime);
color: var(--pub-ink);
}
.landing-app__actions svg {
width: 14px;
height: 14px;
}
.landing-app__label {
margin: 16px 0 8px;
font-size: 0.8125rem;
font-weight: 700;
}
.landing-app__label span {
float: right;
color: var(--pub-nav-link);
font-size: 0.6875rem;
font-weight: 400;
}
.landing-app__row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
padding: 8px 10px;
border-radius: 12px;
background: var(--pub-app-tint-1);
}
.landing-app__row-icon {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 8px;
background: var(--pub-app-tint-2);
}
.landing-app__row-icon svg {
width: 14px;
height: 14px;
}
.landing-app__row b {
display: block;
font-weight: 600;
line-height: 1.2;
}
.landing-app__row small {
color: var(--pub-nav-link);
font-size: 0.625rem;
}
.landing-app__amount {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
font-family: var(--pub-mono);
font-weight: 700;
}
.landing-app__amount::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--pub-lime);
}
.landing-app__amount--out::before {
background: var(--pub-coral);
}
.landing-transfer__title {
margin: 24px 0 0;
font-size: 1.375rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.008em;
text-wrap: wrap;
}
.landing-transfer__fields {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 16px;
}
.landing-transfer__amount {
display: flex;
gap: 8px;
}
/* Inputs: 10px radius, 1px Pebble border, 12/16 padding, Inter 400 16px.
Focus turns the border ink and doubles it (inset shadow) — no glow, no
outline ring, but still an unmistakable 2px edge. */
.landing-transfer input,
.landing-transfer select {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--pub-pebble);
border-radius: 10px;
background: var(--pub-white);
color: var(--pub-ink);
font-family: inherit;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
letter-spacing: -0.006em;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.landing-transfer input::placeholder {
color: var(--pub-muted);
opacity: 1;
}
.landing-transfer input:focus,
.landing-transfer select:focus {
border-color: var(--pub-ink);
outline: none;
box-shadow: inset 0 0 0 1px var(--pub-ink);
}
.landing-transfer__amount input {
flex: 1;
}
.landing-transfer__amount select {
width: 104px;
font-weight: 500;
}
.landing-transfer__submit {
width: 100%;
margin-top: 4px;
}
/* --- Phone tile collage --------------------------------------------------- */
.landing-collage {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(8, 1fr);
gap: 8px;
min-height: 260px;
margin: 4px 0 26px;
}
.landing-tile {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.landing-tile--a {
grid-column: 1;
grid-row: 1 / 5;
margin-left: -20px;
border-radius: 0 22px 22px 0;
background: linear-gradient(155deg, var(--pub-lime) 0%, var(--pub-lime-soft) 55%, var(--pub-clear) 100%);
}
.landing-tile--b {
grid-column: 2;
grid-row: 1 / 5;
}
.landing-tile--c {
grid-column: 1;
grid-row: 5 / 8;
justify-self: end;
aspect-ratio: 1;
height: 100%;
border: 1px solid var(--pub-line);
border-radius: 18px;
background: var(--pub-panel);
}
.landing-tile--d {
grid-column: 2;
grid-row: 5 / 9;
margin-right: -20px;
border-radius: 22px 0 0 22px;
background: linear-gradient(200deg, var(--pub-sun-soft) 0%, var(--pub-sun) 100%);
}
.landing-tile svg {
display: block;
overflow: visible;
color: var(--pub-ink);
}
.landing-tile--b svg {
width: 128px;
animation: landing-float 4s ease-in-out infinite;
}
.landing-tile--c svg {
width: 74%;
animation: landing-fly 3.6s ease-in-out infinite;
}
/* Illustration fills — classes, not SVG hex attributes (tokens only). */
.landing-fill-sun { fill: var(--pub-sun); }
.landing-fill-lime { fill: var(--pub-lime); }
.landing-fill-coral { fill: var(--pub-coral); }
.landing-fill-white { fill: var(--pub-white); }
.landing-glyph {
fill: currentColor;
stroke: none;
font-family: var(--pub-mono);
font-weight: 700;
}
/* The dotted path between the two people flows continuously. */
.landing-orbit {
stroke: var(--pub-muted);
animation: landing-flow 0.9s linear infinite;
}
/* Coins pulse / bob on their own rhythm. */
.landing-coin,
.landing-coin-sm {
transform-box: fill-box;
transform-origin: center;
}
.landing-coin { animation: landing-pulse 2s ease-in-out infinite; }
.landing-coin-sm { animation: landing-bob 1.6s ease-in-out infinite; }
/* The plane's speed lines flicker. */
.landing-trail { animation: landing-trail 0.8s ease-in-out infinite alternate; }
.landing-trail + .landing-trail { animation-delay: -0.4s; }
/* A soft light sweeps across the gradient tiles, then rests. */
.landing-tile--a::after,
.landing-tile--d::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(115deg, transparent 38%, var(--pub-shine) 50%, transparent 62%);
background-size: 250% 100%;
background-repeat: no-repeat;
animation: landing-shine 4.5s ease-in-out infinite;
}
.landing-tile--d::after {
animation-delay: 1.2s;
}
@keyframes landing-float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-14px) rotate(-3deg); }
}
/* The plane drifts up and forward, like it's flying. */
@keyframes landing-fly {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(8px, -12px) rotate(5deg); }
}
@keyframes landing-flow {
to { stroke-dashoffset: -18; }
}
@keyframes landing-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.14); }
}
@keyframes landing-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}
@keyframes landing-trail {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0.15; transform: translateX(-5px); }
}
@keyframes landing-shine {
0% { background-position: 100% 0; }
55%, 100% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
.landing-tile svg,
.landing-orbit,
.landing-coin,
.landing-coin-sm,
.landing-trail {
animation: none;
}
.landing-tile--a::after,
.landing-tile--d::after {
display: none;
}
.landing-btn--go {
transition: none;
}
}
/* --- Sections (desktop): steps, features, FAQ ------------------------------ */
/* 40px top + 40px bottom: consecutive sections sit 80px apart. */
.landing-section {
padding: 40px 32px;
}
.landing-section__head {
max-width: 760px;
margin: 0 auto 48px;
text-align: center;
}
.landing-eyebrow {
color: var(--pub-muted);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.55;
letter-spacing: -0.005em;
}
/* Section openers — the display voice again. */
.landing-section__head h2 {
margin: 12px 0 16px;
font-size: clamp(2.5rem, 5vw, 3.8125rem);
font-weight: 900;
line-height: 1;
letter-spacing: -0.04em;
text-wrap: balance;
}
.landing-section__head p {
margin: 0;
color: var(--pub-muted);
font-size: 1.125rem;
line-height: 1.5;
letter-spacing: -0.007em;
}
.landing-steps,
.landing-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.landing-steps {
margin: 0;
padding: 0;
list-style: none;
}
.landing-step,
.landing-feature {
padding: 24px;
border-radius: 28px;
background: var(--pub-panel);
}
.landing-step__num,
.landing-feature__icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-bottom: 24px;
border-radius: 50%;
}
.landing-step__num {
background: var(--pub-ink);
color: var(--pub-lime);
font-size: 1rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* Line icons (receipt / bolt / shield), drawn in the illustrations' stroke. */
.landing-feature__icon {
background: var(--pub-white);
color: var(--pub-ink);
}
.landing-feature__icon svg {
display: block;
width: 22px;
height: 22px;
}
.landing-step h3,
.landing-feature h3 {
margin: 0 0 8px;
font-size: 1.375rem;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.008em;
text-wrap: balance;
}
.landing-step p,
.landing-feature p {
margin: 0;
color: var(--pub-muted);
font-size: 1rem;
line-height: 1.5;
letter-spacing: -0.006em;
}
.landing-faq {
display: flex;
flex-direction: column;
gap: 8px;
max-width: 720px;
margin: 0 auto;
}
.landing-faq details {
padding: 20px 24px;
border-radius: 10px;
background: var(--pub-panel);
}
.landing-faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
list-style: none;
font-size: 1.125rem;
font-weight: 600;
line-height: 1.44;
letter-spacing: -0.007em;
cursor: pointer;
}
.landing-faq summary::-webkit-details-marker {
display: none;
}
.landing-faq summary::after {
content: "+";
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--pub-ink);
color: var(--pub-lime);
font-size: 1.25rem;
font-weight: 500;
line-height: 1;
transition: transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}
/* .is-closing (common/landing-motion.js): the answer is still folding away
but the "+" already turns back. */
.landing-faq details[open]:not(.is-closing) summary::after {
transform: rotate(45deg);
}
.landing-faq summary:focus-visible {
outline: 2px solid var(--pub-ink);
outline-offset: 4px;
border-radius: 6px;
}
.landing-faq p {
max-width: 60ch;
margin: 12px 0 0;
color: var(--pub-muted);
font-size: 1rem;
line-height: 1.5;
letter-spacing: -0.006em;
}
/* --- Scroll reveal (common/landing-motion.js) ---------------------------- */
/* [data-reveal] rises into place the first time it comes into view: text
32px, cards ("card") 56px and from 96% scale — a long expo ease-out, so
it arrives fast and settles slowly. Hidden only once the script has armed
the page and only until .is-in: no script, no hidden content. The script
staggers what arrives together through --reveal-delay. */
.landing-section__head .landing-eyebrow {
display: block; /* a transform needs a box, not an inline span */
}
.landing.is-armed [data-reveal] {
transition:
opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: var(--reveal-delay, 0ms);
}
.landing.is-armed [data-reveal]:not(.is-in) {
opacity: 0;
transform: translateY(32px);
}
.landing.is-armed [data-reveal="card"]:not(.is-in) {
transform: translateY(56px) scale(0.96);
}
@media print {
.landing.is-armed [data-reveal]:not(.is-in) {
opacity: 1;
transform: none;
}
}
/* ==== Phone: the one-screen splash (moneyPhone3) ========================== */
@media (max-width: 599.98px) {
/* Everything the splash doesn't show. display:none also takes it out of
the accessibility tree, so the phone gets one clean screen. */
.landing-nav__links,
.landing-signin,
.landing-hero__lede,
.landing-hero__actions .landing-btn--primary,
.landing-hero__actions .landing-btn--secondary,
.landing-stats,
.landing-panel,
.landing-section {
display: none;
}
/* The screen: tiles grow to fill, headline + button sit at the bottom. */
.landing {
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100svh;
padding: env(safe-area-inset-top) 20px calc(20px + env(safe-area-inset-bottom));
background: var(--pub-white);
}
.landing-nav {
display: flex;
align-items: center;
height: 56px;
}
.landing-logo {
--logo-accent: var(--pub-go);
font-size: 1.25rem;
}
.landing-main,
.landing-hero {
flex: 1;
display: flex;
flex-direction: column;
}
/* flex-basis 0px, not flex:1's 0%: in a min-height-only column a
percentage basis falls back to the content height, so the collage
could never shrink and short screens (a phone browser with its
toolbars showing) would scroll. 0px lets it shrink to its 260px floor. */
.landing-collage {
order: -1;
flex: 1 1 0px;
}
.landing-hero h1 {
margin-bottom: 24px;
font-size: clamp(2.5rem, 12.5vw, 3.25rem);
text-wrap: balance;
}
.landing-hero__actions {
display: block;
}
}
/* ==== Desktop: full-bleed page, content centred at 1200px (money3) ======== */
@media (min-width: 600px) {
.page--landing {
padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
background: var(--pub-card);
}
.landing-collage,
.landing-btn--go {
display: none;
}
.landing {
width: min(1200px, 100%);
margin: 0 auto;
padding: 16px;
}
/* Sticky nav. At rest it is the rounded ink pill of the mockup; as the
page scrolls its backdrop widens to the full viewport, loses its
corners and turns translucent — progressively: every property below is
a function of --nav-p, 0 (pill) → 1 (full bar, reached halfway down
the page), which common/landing-nav.js eases toward the scroll
position with a little inertia. Only the ::before backdrop morphs — the
bar's own box and content never move, so nothing below reflows.
The bar sticks exactly where it rests (--nav-inset, the .landing
padding above it), so it doesn't budge on the first scroll either; the
backdrop grows up over that gap — and as much down, so the content
stays centred in the full bar — as it grows out to the sides.
Without JavaScript --nav-p stays 0: a sticky pill.
64px tall: the 48px "Connexion" pill sits 8px in from the right end, so
the bar's 32px radius is concentric with the button's (24 + 8). */
.landing-nav {
--nav-inset: 16px; /* = .landing's top padding: where the bar rests */
position: sticky;
top: var(--nav-inset);
z-index: 50;
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 8px 8px 32px;
color: var(--pub-white);
}
.landing-nav::before {
content: "";
position: absolute;
z-index: -1;
/* Up over the gap above the bar (and as much down), out toward the
viewport's edges (the script measures the side gaps — not 100vw,
which would count the scrollbar and overflow). */
top: calc(var(--nav-inset) * -1 * var(--nav-p, 0));
bottom: calc(var(--nav-inset) * -1 * var(--nav-p, 0));
left: calc(var(--nav-gutter-l, 0px) * -1 * var(--nav-p, 0));
right: calc(var(--nav-gutter-r, 0px) * -1 * var(--nav-p, 0));
border-radius: calc(32px * (1 - var(--nav-p, 0)));
background-color: var(--pub-ink);
box-shadow: 0 10px 30px -14px rgb(16 22 10 / calc(0.45 * var(--nav-p, 0)));
-webkit-backdrop-filter: blur(calc(14px * var(--nav-p, 0))) saturate(calc(1 + 0.4 * var(--nav-p, 0)));
backdrop-filter: blur(calc(14px * var(--nav-p, 0))) saturate(calc(1 + 0.4 * var(--nav-p, 0)));
}
/* Ink → 78% ink. Guarded: a var() inside an unsupported color-mix()
would compute to transparent rather than fall back to the ink above. */
@supports (background-color: color-mix(in srgb, red calc(100% - 22% * 1), transparent)) {
.landing-nav::before {
background-color: color-mix(in srgb, var(--pub-ink) calc(100% - 22% * var(--nav-p, 0)), transparent);
}
}
/* Belt and braces: clip any sub-pixel overshoot of the full-width
backdrop. `clip`, not `hidden`: it creates no scroll container, so the
nav stays sticky. */
.page--landing {
overflow-x: clip;
}
/* In-page links (#faq…) land below the full bar (96px), not under it. */
:root:has(> body.page--landing) {
scroll-padding-top: 112px;
}
.landing-nav :focus-visible {
outline-color: var(--pub-lime);
}
.landing-logo {
font-size: 1.25rem;
}
.landing-main > .messages {
margin: 16px 32px 0;
}
/* 5:4 split, the panel capped at 440px: the copy column keeps room for
its buttons and stats down to the 800px single-column switch. */
.landing-hero {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
gap: clamp(40px, 5vw, 64px);
align-items: center;
padding: 80px 32px 40px;
}
.landing-panel {
justify-self: end;
width: 100%;
max-width: 440px;
}
.landing-hero h1 {
margin-bottom: 32px;
font-size: clamp(3.25rem, 7.4vw, 5.5625rem);
text-wrap: wrap;
}
}
@media (min-width: 600px) and (max-width: 800px) {
.landing-nav__links {
display: none;
}
.landing-hero,
.landing-steps,
.landing-features {
grid-template-columns: 1fr;
}
.landing-panel {
justify-self: stretch;
max-width: none;
}
.landing-stats {
flex-wrap: wrap;
gap: 24px;
}
}
}
/* --------------------------------------------------------------------------
Site footer (templates/common/_site_foot.html, on every page) — a dark ink
band that mirrors the nav bar, so the page is framed in ink top and bottom:
brand · Service · Aide (+ security notice) · Contact, then © · legal · top.
Desktop/tablet only (≥ 600px): hidden on phones.
-------------------------------------------------------------------------- */
@layer public {
.site-foot {
margin-top: 96px;
border-radius: 28px 28px 0 0;
background: var(--pub-ink);
color: var(--pub-nav-link);
font-family: var(--pub-sans);
font-size: 0.9375rem;
line-height: 1.55;
letter-spacing: -0.006em;
}
.site-foot a {
color: inherit;
text-decoration: none;
transition: color 0.15s ease;
}
.site-foot a:hover {
color: var(--pub-lime);
}
.site-foot :focus-visible {
outline: 2px solid var(--pub-lime);
outline-offset: 3px;
border-radius: 4px;
}
.site-foot__inner {
max-width: 1200px;
margin: 0 auto;
padding: 64px 32px 28px;
}
/* --- Main grid: brand · 3 link columns · contact ------------------------ */
.site-foot__grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
gap: 40px 32px;
padding: 0 0 48px;
}
.site-foot__brand .landing-logo {
--logo-accent: var(--pub-lime); /* lime on ink, phone too */
color: var(--pub-white);
font-size: 1.25rem;
}
.site-foot__brand p {
margin: 20px 0 24px;
max-width: 30ch;
color: var(--pub-nav-link);
}
.site-foot__corridor {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
border-radius: 999px;
background: var(--pub-app-tint-1);
box-shadow: inset 0 0 0 1px var(--pub-foot-line);
color: var(--pub-white);
font-size: 0.8125rem;
font-weight: 600;
}
.site-foot__corridor svg {
width: 16px;
height: 16px;
color: var(--pub-lime);
}
.site-foot__col h3 {
margin: 0 0 16px;
color: var(--pub-white);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.site-foot__col ul {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.site-foot__contact li {
display: flex;
gap: 12px;
align-items: flex-start;
}
.site-foot__contact svg {
flex: none;
width: 18px;
height: 18px;
margin-top: 2px;
color: var(--pub-lime);
}
.site-foot__col li small {
display: block;
color: var(--pub-foot-dim);
font-size: 0.8125rem;
}
.site-foot__contact small {
display: block;
color: var(--pub-foot-dim);
font-size: 0.8125rem;
}
/* --- Bottom bar -------------------------------------------- */
.site-foot__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px 32px;
flex-wrap: wrap;
padding-top: 24px;
border-top: 1px solid var(--pub-foot-line);
color: var(--pub-foot-dim);
font-size: 0.8125rem;
}
.site-foot__bottom ul {
display: flex;
flex-wrap: wrap;
gap: 8px 24px;
margin: 0;
padding: 0;
list-style: none;
}
.site-foot .site-foot__top-btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 16px;
border: 1px solid var(--pub-foot-line);
border-radius: 999px;
background: transparent;
color: var(--pub-white);
font: inherit;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
}
.site-foot .site-foot__top-btn:hover {
border-color: var(--pub-lime);
color: var(--pub-lime);
}
.site-foot__top-btn svg {
width: 14px;
height: 14px;
}
/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1000px) {
.site-foot__grid {
grid-template-columns: repeat(2, 1fr);
}
.site-foot__brand {
grid-column: 1 / -1;
}
.site-foot__contact {
grid-column: 1 / -1;
}
.site-foot__contact ul {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px 32px;
}
}
/* Phone: no footer — the landing is a one-screen splash, and the other
pages keep the screen for the task at hand. */
@media (max-width: 599.98px) {
.site-foot {
display: none;
}
}
}
/* --------------------------------------------------------------------------
Public flow pages — quote (step 1, money5 / moneyPhone5) and claim
(step 2, money7 / moneyPhone7); templates/transfers/public/. One DOM, two
layouts, same --pub-* palette as the landing:
≥ 720px the desktop mockup as a FULL page — the steps as a full-height
sidebar, the form in a centred column filling the rest (no
floating window, no backdrop).
< 720px the phone mockup — app bar, horizontal stepper, grouped cards,
green button pinned to the bottom.
720px is where the desktop mockups themselves dropped to one column.
Shared includes: _flow_steps.html (variants "side" / "bar"),
_flow_appbar.html, _flow_chips.html. Components are .flow-*; a page's own
bits are .quote-* / .claim-*, and .flow--quote / .flow--claim carry the
few pixel differences between the mockups.
Type, spacing and radii follow the landing's system (see "Landing page"):
Inter with per-size tracking, Inter Black for page titles, a 4px grid,
pills for buttons/tags, 10px for cards and inputs, 28px for the desktop
boxes. Monospace is kept only for what people copy or read out — the
reference, the payout code, account and phone numbers; amounts are Inter
with tabular figures.
-------------------------------------------------------------------------- */
@layer public {
/* Light-only, like the landing: pin the UA so fields don't go dark. */
:root:has(> body.page--flow) {
color-scheme: light;
}
.page--flow {
color-scheme: light;
background: var(--pub-card);
color: var(--pub-ink);
font-family: var(--pub-sans);
font-feature-settings: "calt" 1;
font-weight: 400;
line-height: 1.5;
letter-spacing: -0.006em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.page--flow :focus-visible {
outline-color: var(--pub-ink);
}
/* Zero-specificity resets: beat the base layer by layer order only. */
:where(.flow) p {
max-width: none;
}
:where(.flow) a {
color: inherit;
text-decoration: none;
}
:where(.flow) input,
:where(.flow) button {
font-family: inherit;
}
/* --- Steps list (shared markup, two variants) ------------------------------ */
.flow-steps {
margin: 0;
padding: 0;
list-style: none;
}
/* --- Quote head --------------------------------------------------------------- */
/* Page titles: the display voice (Inter Black). */
.flow-head h1 {
color: var(--pub-ink);
font-size: 2.5rem;
font-weight: 900;
line-height: 1;
letter-spacing: -0.04em;
text-wrap: wrap;
}
.flow-head p {
margin: 0;
color: var(--pub-muted);
}
/* --- Fields --------------------------------------------------------------------- */
.flow-form input,
.flow-form select {
width: 100%;
color: var(--pub-ink);
font-weight: 400;
}
.flow-form input::placeholder {
color: var(--pub-muted);
font-weight: 400;
opacity: 1;
}
/* The amount is a number input (the server wants a decimal): drop the
spinner arrows the mockups never had. */
.flow-form input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
.flow-form input[type="number"]::-webkit-inner-spin-button,
.flow-form input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Phone numbers and amounts: same-width digits, so they don't jiggle. */
.flow-row--mono input,
.quote-amount input {
font-variant-numeric: tabular-nums;
}
.flow .field-error {
margin: 8px 0 0;
color: var(--pub-error);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.55;
letter-spacing: -0.005em;
}
.flow-alert {
margin: 0 0 12px;
padding: 12px 16px;
border-radius: 10px;
background: var(--pub-error-bg);
color: var(--pub-error);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.55;
letter-spacing: -0.005em;
}
/* Live fee preview (HTMX swaps _quote_preview.html into #quote-preview). */
.flow #quote-preview {
margin: 0;
}
.flow-hint {
margin: 12px 0 0;
color: var(--pub-muted);
font-size: 0.875rem;
line-height: 1.55;
letter-spacing: -0.005em;
}
.flow .quote-preview {
margin: 12px 0 0;
padding: 12px 16px;
border: 0;
border-radius: 10px;
background: var(--pub-panel);
font-size: 0.875rem;
line-height: 1.55;
letter-spacing: -0.005em;
}
.flow .quote-preview > div {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 4px 0;
}
.flow .quote-preview dt {
color: var(--pub-muted);
}
.flow .quote-preview dd {
margin: 0;
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.flow .quote-preview .is-total {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--pub-line);
font-weight: 600;
}
.flow .quote-preview .is-total dt {
color: var(--pub-ink);
}
.flow .quote-preview .is-total dd {
font-size: 1.125rem;
font-weight: 700;
letter-spacing: -0.007em;
}
.flow-form .cf-turnstile {
margin-bottom: 12px;
}
.flow-submit {
display: block;
width: 100%;
border: 1px solid transparent;
cursor: pointer;
text-align: center;
}
.flow-note strong,
.flow-fineprint strong {
color: var(--pub-ink);
}
/* ==== Phone: moneyPhone5 ================================================== */
@media (max-width: 719.98px) {
.flow-side,
.flow-close,
.flow-chips,
.flow-box__title,
.flow-desk,
.flow-note {
display: none;
}
/* The amount field's label is the group heading above it; keep the real