/* ==========================================================================
SoloPayLink UI — the one design system (Phase F)
--------------------------------------------------------------------------
Loaded LAST on every page, after premium.css. premium.css keeps the colour
identity (--p-* palette); this file owns typography, the type scale, spacing,
radii, motion, focus and every shared component with all of its states.
Rules for this file
- Tokens first. Pages use tokens and .spl-* components, never raw values.
- Components never change behaviour: no display/position changes to any
element a script measures, except the new .spl-* components themselves.
- Every interactive component has default, hover, focus, pressed, disabled,
loading and (where it applies) success / warning / error states.
- Nothing under 13px. Controls are at least 44px tall.
- Motion is short and optional (prefers-reduced-motion switches it off).
========================================================================== */
/* ---- Typeface: Geist (SIL OFL 1.1, /fonts/GEIST-OFL.txt), one variable file ---- */
@font-face {
font-family: "Geist";
src: url("/fonts/geist-latin-wght.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched fallback (computed with Capsize from the Geist file): text laid
out in the fallback occupies the same lines, so the font swap does not shift layout. */
@font-face {
font-family: "Geist Fallback";
src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto Regular"), local("Roboto-Regular");
ascent-override: 95.94%;
descent-override: 28.16%;
line-gap-override: 0%;
size-adjust: 104.76%;
}
:root {
/* ---- font stacks ---- */
--spl-font: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--spl-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
/* Every older stack now points at the one family. */
--p-display: var(--spl-font);
--p-body: var(--spl-font);
--p-mono: var(--spl-font-mono);
--font-sans: var(--spl-font);
/* ---- type scale (fluid 360 → 1440px; minimums are hard floors) ---- */
--spl-t-display: clamp(2.25rem, 1.5rem + 3.333vw, 3.75rem); /* 36 → 60 */
--spl-t-h1: clamp(1.75rem, 1.5rem + 1.111vw, 2.5rem); /* 28 → 40 */
--spl-t-h2: clamp(1.375rem, 1.25rem + 0.556vw, 1.75rem); /* 22 → 28 */
--spl-t-h3: clamp(1.125rem, 1.083rem + 0.185vw, 1.25rem);/* 18 → 20 */
--spl-t-body-lg: 1.125rem; /* 18 */
--spl-t-body: clamp(1rem, 0.979rem + 0.093vw, 1.0625rem); /* 16 → 17 */
--spl-t-label: 0.9375rem; /* 15 */
--spl-t-helper: 0.875rem; /* 14 */
--spl-t-caption: 0.8125rem; /* 13 — the floor */
--spl-t-button: 1rem; /* 16 */
--spl-t-nav: 0.8125rem; /* 13 bottom bar; rail uses label */
/* The older scale follows the new one. */
--p-t-hero: var(--spl-t-display);
--p-t-h1: var(--spl-t-h1);
--p-t-h2: var(--spl-t-h2);
--p-t-h3: var(--spl-t-h3);
--p-t-body: var(--spl-t-body);
--p-t-small: var(--spl-t-helper);
--p-t-cap: var(--spl-t-caption);
--font-size-xs: var(--spl-t-caption);
--font-size-sm: var(--spl-t-helper);
/* ---- spacing (4px grid) ---- */
--spl-s-1: 4px; --spl-s-2: 8px; --spl-s-3: 12px; --spl-s-4: 16px;
--spl-s-5: 20px; --spl-s-6: 24px; --spl-s-7: 32px; --spl-s-8: 40px;
--spl-s-9: 48px; --spl-s-10: 64px;
--spl-gutter: clamp(16px, 3.2vw, 32px); /* page side padding: 16px on phones */
--spl-container: 1120px;
--spl-container-narrow: 680px;
/* ---- radii ---- */
--spl-r-sm: 10px; --spl-r: 14px; --spl-r-lg: 20px; --spl-r-xl: 28px; --spl-r-pill: 999px;
/* ---- surfaces & borders (identity colours live in premium.css) ---- */
--spl-surface: var(--p-card, #fff);
--spl-surface-sunken: var(--p-paper-2, #efece6);
--spl-ground: var(--p-paper, #f7f5f1);
--spl-border: var(--p-line, #e6e0d7);
--spl-border-strong: var(--p-line-2, #d6cec1);
--spl-ink-1: var(--p-ink, #101c2e);
--spl-ink-2: var(--p-ink-2, #2b3a52);
--spl-ink-3: var(--p-ink-3, #47566c);
--spl-placeholder: #6b778a; /* 4.6:1 on white */
--spl-accent: var(--p-accent, #1657d0);
--spl-accent-strong: var(--p-accent-2, #0e3e9a);
--spl-accent-wash: var(--p-accent-wash, #ecf1fd);
--spl-money: var(--p-money, #0b6b52);
--spl-money-wash: var(--p-money-wash, #e7f3ee);
--spl-warn: var(--p-warn, #92600c);
--spl-warn-wash: var(--p-warn-wash, #fbf1de);
--spl-danger: var(--p-danger, #a8271b);
--spl-danger-strong: #85200f;
--spl-danger-wash: var(--p-danger-wash, #fbebe8);
/* ---- elevation ---- */
--spl-e-1: 0 1px 2px rgba(16, 28, 46, .05);
--spl-e-2: 0 1px 2px rgba(16, 28, 46, .05), 0 8px 20px -10px rgba(16, 28, 46, .14);
--spl-e-3: 0 1px 3px rgba(16, 28, 46, .06), 0 18px 40px -18px rgba(16, 28, 46, .22);
--spl-e-overlay: 0 24px 64px -24px rgba(16, 28, 46, .38);
/* ---- focus ---- */
--spl-focus: 0 0 0 3px var(--spl-surface), 0 0 0 5px var(--spl-accent);
/* ---- motion ---- */
--spl-ease: cubic-bezier(.2, .8, .2, 1);
--spl-fast: 120ms;
--spl-base: 180ms;
/* ---- layers ---- */
--spl-z-nav: 40; --spl-z-sheet: 60; --spl-z-toast: 80;
/* ---- sizes ---- */
--spl-control: 48px; /* default control height */
--spl-control-sm: 40px; /* dense rows only (desktop tables) */
--spl-control-lg: 56px; /* primary actions on phones */
--spl-nav-h: 64px; /* bottom bar */
--spl-rail-w: 248px; /* side rail on desktop */
}
/* ==========================================================================
Base
========================================================================== */
html { font-family: var(--spl-font); }
body { font-family: var(--spl-font); font-size: var(--spl-t-body); font-optical-sizing: auto; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: var(--spl-font); }
h1 { letter-spacing: -0.025em; }
h2 { letter-spacing: -0.02em; font-weight: 650; }
code, kbd, pre, samp, .mono { font-family: var(--spl-font-mono); }
input::placeholder, textarea::placeholder { color: var(--spl-placeholder); opacity: 1; }
:focus-visible { outline: 2px solid var(--spl-accent); outline-offset: 2px; }
::selection { background: var(--spl-accent-wash); color: var(--spl-ink-1); }
/* Components set display; the hidden attribute must still win on them. */
:is([class*="spl-"], [class*="bk-"])[hidden] { display: none; }
* { -webkit-tap-highlight-color: rgba(22, 87, 208, .12); }
/* Form labels read as labels, not shouted captions (premium.css styled them as eyebrows). */
.form-label, label.form-label { font-size: var(--spl-t-label); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--spl-ink-1); line-height: 1.35; }
/* Tabular figures wherever numbers are compared. */
.spl-num, .amount, .price, .money, time { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 1ms !important; animation-iteration-count: 1 !important;
transition-duration: 1ms !important; scroll-behavior: auto !important;
}
}
/* ==========================================================================
Layout primitives
========================================================================== */
.spl-container { width: 100%; max-width: var(--spl-container); margin-inline: auto; padding-inline: var(--spl-gutter); }
.spl-container--narrow { max-width: calc(var(--spl-container-narrow) + 2 * var(--spl-gutter)); }
.spl-stack { display: flex; flex-direction: column; gap: var(--spl-stack-gap, var(--spl-s-4)); }
.spl-stack--sm { --spl-stack-gap: var(--spl-s-2); }
.spl-stack--lg { --spl-stack-gap: var(--spl-s-6); }
.spl-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spl-cluster-gap, var(--spl-s-3)); }
.spl-grid { display: grid; gap: var(--spl-s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--spl-grid-min, 260px)), 1fr)); }
.spl-split { display: grid; gap: var(--spl-s-6); }
@media (min-width: 1024px) { .spl-split { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); align-items: start; } }
.spl-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ==========================================================================
Text
========================================================================== */
.spl-display { font-size: var(--spl-t-display); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; color: var(--spl-ink-1); text-wrap: balance; margin: 0; }
.spl-h1 { font-size: var(--spl-t-h1); font-weight: 700; line-height: 1.12; letter-spacing: -0.025em; color: var(--spl-ink-1); text-wrap: balance; margin: 0; }
.spl-h2 { font-size: var(--spl-t-h2); font-weight: 650; line-height: 1.2; letter-spacing: -0.02em; color: var(--spl-ink-1); text-wrap: balance; margin: 0; }
.spl-h3 { font-size: var(--spl-t-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; color: var(--spl-ink-1); margin: 0; }
.spl-lead { font-size: var(--spl-t-body-lg); line-height: 1.55; color: var(--spl-ink-2); margin: 0; max-width: 60ch; }
.spl-body { font-size: var(--spl-t-body); line-height: 1.55; color: var(--spl-ink-2); margin: 0; }
.spl-label { font-size: var(--spl-t-label); font-weight: 600; line-height: 1.35; color: var(--spl-ink-1); }
.spl-helper { font-size: var(--spl-t-helper); line-height: 1.45; color: var(--spl-ink-3); margin: 0; }
.spl-caption { font-size: var(--spl-t-caption); font-weight: 500; line-height: 1.4; color: var(--spl-ink-3); }
.spl-overline { font-size: var(--spl-t-caption); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--spl-accent); margin: 0; }
.spl-money { color: var(--spl-money); font-weight: 600; font-variant-numeric: tabular-nums; }
.spl-link { color: var(--spl-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.spl-link:hover { color: var(--spl-accent-strong); text-decoration-thickness: 2px; }
/* ==========================================================================
Icons
========================================================================== */
.spl-icon { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: -0.2em; stroke-width: 2; }
.spl-icon--lg { width: 24px; height: 24px; }
.spl-icon--sm { width: 16px; height: 16px; }
/* ==========================================================================
Buttons .spl-btn [--primary|--secondary|--ghost|--danger|--quiet-danger] [--lg|--sm|--block]
========================================================================== */
.spl-btn {
--btn-bg: var(--spl-surface); --btn-ink: var(--spl-ink-1); --btn-border: var(--spl-border-strong); --btn-hover: var(--spl-ground);
position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--spl-s-2);
min-height: var(--spl-control); padding: 0 var(--spl-s-5); border-radius: var(--spl-r);
font: 600 var(--spl-t-button)/1.2 var(--spl-font); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
color: var(--btn-ink); background: var(--btn-bg); border: 1px solid var(--btn-border); box-shadow: var(--spl-e-1);
cursor: pointer; user-select: none; -webkit-user-select: none;
transition: background-color var(--spl-fast) var(--spl-ease), border-color var(--spl-fast) var(--spl-ease), box-shadow var(--spl-fast) var(--spl-ease), transform var(--spl-fast) var(--spl-ease);
}
.spl-btn:hover { background: var(--btn-hover); }
.spl-btn:focus-visible { outline: none; box-shadow: var(--spl-focus); }
.spl-btn:active { transform: translateY(1px); box-shadow: none; }
.spl-btn--primary { --btn-bg: var(--spl-accent); --btn-ink: #fff; --btn-border: var(--spl-accent-strong); --btn-hover: var(--spl-accent-strong); box-shadow: 0 8px 20px -12px rgba(22, 87, 208, .7); }
.spl-btn--secondary { --btn-bg: var(--spl-surface); }
.spl-btn--ghost { --btn-bg: transparent; --btn-border: transparent; --btn-hover: var(--spl-accent-wash); --btn-ink: var(--spl-accent); box-shadow: none; }
.spl-btn--danger { --btn-bg: var(--spl-danger); --btn-ink: #fff; --btn-border: var(--spl-danger-strong); --btn-hover: var(--spl-danger-strong); }
.spl-btn--quiet-danger { --btn-ink: var(--spl-danger); --btn-border: #e7b8b1; --btn-hover: var(--spl-danger-wash); }
.spl-btn--lg { min-height: var(--spl-control-lg); padding: 0 var(--spl-s-6); font-size: 1.0625rem; border-radius: var(--spl-r-lg); }
.spl-btn--sm { min-height: var(--spl-control-sm); padding: 0 var(--spl-s-4); font-size: var(--spl-t-helper); }
.spl-btn--block { display: flex; width: 100%; }
.spl-btn--icon { width: var(--spl-control); padding: 0; }
.spl-btn--icon.spl-btn--sm { width: var(--spl-control-sm); }
/* Disabled: visibly unavailable, never silently clickable. */
.spl-btn:disabled, .spl-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.spl-btn:disabled:hover, .spl-btn[aria-disabled="true"]:hover { background: var(--btn-bg); }
/* Loading: the label stays in the layout (no size jump) and a ring replaces it. */
.spl-btn[aria-busy="true"] { color: transparent !important; cursor: progress; pointer-events: none; }
.spl-btn[aria-busy="true"] > * { visibility: hidden; }
.spl-btn[aria-busy="true"]::after {
content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%;
border: 2px solid currentColor; border-color: var(--btn-ink) var(--btn-ink) transparent transparent; opacity: .9;
animation: spl-spin .7s linear infinite;
}
/* Success: a short confirmation state set by the page after the server confirms. */
.spl-btn.is-success { --btn-bg: var(--spl-money); --btn-border: var(--spl-money); --btn-ink: #fff; --btn-hover: var(--spl-money); }
@keyframes spl-spin { to { transform: rotate(360deg); } }
/* ==========================================================================
Fields .spl-field > .spl-label + .spl-input + .spl-helper | .spl-field__error
========================================================================== */
.spl-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.spl-field .spl-label { display: block; }
.spl-input, .spl-select, .spl-textarea {
width: 100%; min-height: var(--spl-control); padding: 12px 14px; border-radius: var(--spl-r);
font: 400 1rem/1.4 var(--spl-font); color: var(--spl-ink-1); background: var(--spl-surface);
border: 1.5px solid var(--spl-border-strong); box-shadow: none; appearance: none; -webkit-appearance: none;
transition: border-color var(--spl-fast) var(--spl-ease), box-shadow var(--spl-fast) var(--spl-ease);
}
.spl-textarea { min-height: 112px; resize: vertical; line-height: 1.55; }
.spl-select {
padding-right: 44px; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2347566c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center;
}
.spl-input:hover, .spl-select:hover, .spl-textarea:hover { border-color: var(--spl-ink-3); }
.spl-input:focus, .spl-select:focus, .spl-textarea:focus { outline: none; border-color: var(--spl-accent); box-shadow: 0 0 0 4px var(--spl-accent-wash); }
.spl-input[aria-invalid="true"], .spl-select[aria-invalid="true"], .spl-textarea[aria-invalid="true"] { border-color: var(--spl-danger); box-shadow: 0 0 0 4px var(--spl-danger-wash); }
.spl-input:disabled, .spl-select:disabled, .spl-textarea:disabled, .spl-input[readonly] { background: var(--spl-surface-sunken); color: var(--spl-ink-3); cursor: not-allowed; }
.spl-field__error { display: flex; gap: 6px; align-items: flex-start; font-size: var(--spl-t-helper); line-height: 1.4; color: var(--spl-danger); font-weight: 500; }
.spl-field__error:empty { display: none; }
.spl-input-group { display: flex; gap: var(--spl-s-2); align-items: stretch; }
.spl-input-group > .spl-input { flex: 1; min-width: 0; }
@media (max-width: 479px) { .spl-input-group--stack { flex-direction: column; } }
/* Checkbox / switch rows: the whole row is the target. */
.spl-check { display: flex; gap: var(--spl-s-3); align-items: flex-start; min-height: 44px; padding: 10px 0; cursor: pointer; font-size: var(--spl-t-body); line-height: 1.45; color: var(--spl-ink-2); }
.spl-check input[type="checkbox"], .spl-check input[type="radio"] { width: 22px; height: 22px; min-height: 0; margin: 1px 0 0; flex: none; accent-color: var(--spl-accent); }
/* ==========================================================================
Cards
========================================================================== */
.spl-card { background: var(--spl-surface); border: 1px solid var(--spl-border); border-radius: var(--spl-r-lg); box-shadow: var(--spl-e-1); padding: var(--spl-s-5); min-width: 0; }
@media (min-width: 768px) { .spl-card { padding: var(--spl-s-6); } }
.spl-card--flat { box-shadow: none; }
.spl-card--sunken { background: var(--spl-surface-sunken); box-shadow: none; border-color: transparent; }
.spl-card--hero { border-radius: var(--spl-r-xl); box-shadow: var(--spl-e-2); }
.spl-card--interactive { cursor: pointer; transition: box-shadow var(--spl-base) var(--spl-ease), border-color var(--spl-base) var(--spl-ease), transform var(--spl-base) var(--spl-ease); }
.spl-card--interactive:hover { box-shadow: var(--spl-e-2); border-color: var(--spl-border-strong); }
.spl-card--interactive:active { transform: translateY(1px); }
.spl-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--spl-s-3); margin-bottom: var(--spl-s-4); }
.spl-card__head .spl-h3, .spl-card__head .spl-overline { margin: 0; }
/* A list of rows inside a card (bookings, settings, links). Every row is ≥ 56px. */
.spl-list { list-style: none; margin: 0; padding: 0; }
.spl-list > li + li, .spl-list > a + a, .spl-list > div + div { border-top: 1px solid var(--spl-border); }
.spl-row { display: flex; align-items: center; gap: var(--spl-s-3); min-height: 56px; padding: var(--spl-s-3) 0; color: inherit; text-decoration: none; }
a.spl-row:hover, button.spl-row:hover { background: linear-gradient(90deg, transparent, var(--spl-ground) 12%, var(--spl-ground) 88%, transparent); }
.spl-row__main { flex: 1; min-width: 0; }
.spl-row__title { font-size: var(--spl-t-label); font-weight: 600; color: var(--spl-ink-1); overflow-wrap: anywhere; }
.spl-row__meta { font-size: var(--spl-t-helper); color: var(--spl-ink-3); }
/* ==========================================================================
Badges
========================================================================== */
.spl-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 10px; border-radius: var(--spl-r-pill); font: 600 var(--spl-t-caption)/1.2 var(--spl-font); letter-spacing: .01em; color: var(--spl-ink-2); background: var(--spl-surface-sunken); border: 1px solid transparent; white-space: nowrap; }
.spl-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.spl-badge--plain::before { display: none; }
.spl-badge--accent { color: var(--spl-accent-strong); background: var(--spl-accent-wash); }
.spl-badge--money { color: var(--spl-money); background: var(--spl-money-wash); }
.spl-badge--warn { color: var(--spl-warn); background: var(--spl-warn-wash); }
.spl-badge--danger { color: var(--spl-danger); background: var(--spl-danger-wash); }
/* ==========================================================================
Alerts (inline messages) role="status" for info/success, role="alert" for errors
========================================================================== */
.spl-alert { display: flex; gap: var(--spl-s-3); align-items: flex-start; padding: var(--spl-s-4); border-radius: var(--spl-r); border: 1px solid var(--spl-border); background: var(--spl-surface); color: var(--spl-ink-2); font-size: var(--spl-t-helper); line-height: 1.5; }
.spl-alert__title { display: block; font-size: var(--spl-t-label); font-weight: 600; color: var(--spl-ink-1); margin-bottom: 2px; }
.spl-alert > .spl-icon { margin-top: 1px; }
.spl-alert--info { background: var(--spl-accent-wash); border-color: #c9d9f8; }
.spl-alert--info > .spl-icon { color: var(--spl-accent); }
.spl-alert--success { background: var(--spl-money-wash); border-color: #bfe0d3; }
.spl-alert--success > .spl-icon { color: var(--spl-money); }
.spl-alert--warn { background: var(--spl-warn-wash); border-color: #efd9ad; }
.spl-alert--warn > .spl-icon { color: var(--spl-warn); }
.spl-alert--error { background: var(--spl-danger-wash); border-color: #f0c4bd; }
.spl-alert--error > .spl-icon { color: var(--spl-danger); }
/* ==========================================================================
Toast
========================================================================== */
.spl-toast-region { position: fixed; z-index: var(--spl-z-toast); left: 50%; transform: translateX(-50%); bottom: calc(var(--spl-s-4) + env(safe-area-inset-bottom)); width: min(480px, calc(100vw - 2 * var(--spl-s-4))); display: flex; flex-direction: column; gap: var(--spl-s-2); pointer-events: none; }
.spl-has-bottom-nav .spl-toast-region { bottom: calc(var(--spl-nav-h) + var(--spl-s-3) + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .spl-has-bottom-nav .spl-toast-region { bottom: var(--spl-s-6); } }
.spl-toast { pointer-events: auto; display: flex; gap: var(--spl-s-3); align-items: center; min-height: 52px; padding: 12px 16px; border-radius: var(--spl-r); background: var(--spl-ink-1); color: #fff; box-shadow: var(--spl-e-overlay); font-size: var(--spl-t-helper); font-weight: 500; line-height: 1.4; animation: spl-rise var(--spl-base) var(--spl-ease); }
.spl-toast--error { background: var(--spl-danger-strong); }
.spl-toast--success { background: #084f3c; }
@keyframes spl-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* ==========================================================================
Sheet / dialog