/* ============================================================
UBIQUITUS — "SOFT BANKNOTE"
Evergreen paper, rainbow value-ink, engraving printed over color.
Soft corners, no black boxes, sentence-case labels. The dithered
gradient field (banknote-field.js) appears only at money moments:
the home hero, the home closing call to action, the dashboard pool plate.
Spec: docs/superpowers/specs/2026-09-25-soft-banknote-color-design.md
============================================================ */
/* ---------- Fonts (self-hosted, from Google Fonts, SIL OFL) ----------
Cut to what the site sets: Archivo 400-700 roman + italic at its default
width, Spline Sans Mono 400-700, Stack Sans Notch 400. Latin and latin-ext
only; a page downloads latin-ext only if it prints a character from it.
base.html preloads the two faces every page paints first. */
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("fonts/archivo-italic-latin-ext.e7ef669fa33b.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("fonts/archivo-italic-latin.bfdd3eed8569.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/archivo-latin-ext.288d2a1c9f04.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/archivo-latin.92895abae7c5.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Spline Sans Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/spline-sans-mono-latin-ext.b7a3170e5df9.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Spline Sans Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/spline-sans-mono-latin.4ebf124f4aa2.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Stack Sans Notch"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/stack-sans-notch-latin-ext.6a4bd131eeb4.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Stack Sans Notch"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/stack-sans-notch-latin.12ff1ef0e911.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ---------- Tokens ---------- */
:root {
/* PALETTE — green, teal and gold, with a little rose kept to gradient tails */
--evergreen: #0E6B52; /* primary accent, links, main CTA start */
--evergreen-dark: #0A5140; /* hover / pressed */
--evergreen-deep: #0C2E24; /* deepest green, rarely used */
--teal: #1A9C86; /* gradient mid-stop, live dot */
--teal-ink: #0E7A63; /* teal as text (contrast-safe on paper) */
--mint: #7DC7A2; /* gradient light stop, soft fills */
--mint-tint: rgba(125, 199, 162, 0.16);
--mint-wash: rgba(226, 241, 236, 0.75);
--rose: #D98A7A; /* gradient tail only, never solid UI */
--paper: #F3F4EE; /* page ground */
/* BRONZE — the matte value-ink of the instrument. Serials, seals. */
--bronze: #8A6B3E;
--bronze-deep: #6E5530; /* bronze as text: 6:1 on paper */
--bronze-tint: rgba(138, 107, 62, 0.10);
/* GRADIENTS */
--grad-cta: linear-gradient(120deg, #0E6B52 0%, #1A9C86 40%, #7DC7A2 70%, #E0B86A 100%);
/* Text-bearing buttons: same family, weighted dark so light label text
keeps 4.5:1 across the middle where the words sit. */
--grad-btn: linear-gradient(120deg, #0B5A45 0%, #0E6B52 35%, #13806A 65%, #1A9C86 88%, #C9A55A 118%);
/* Text-bearing gradients stay in the green family end to end: a gold or
bronze stop drags the middle through khaki and reads as olive ink. */
--grad-value: linear-gradient(90deg, #0E6B52, #178A74 50%, #0E7A63);
--grad-headline: linear-gradient(100deg, #0E6B52 0%, #13806A 40%, #1A9C86 70%, #0E7A63 100%);
--grad-edge: linear-gradient(140deg, #1A9C86, #7DC7A2 30%, #E0B86A 60%, #D98A7A 85%, #1A9C86);
/* Legacy brand aliases (templates reference these) */
--brand: var(--evergreen);
--brand-deep: var(--evergreen);
--brand-darker: var(--evergreen-dark);
--brand-ink: #F8FFFB;
--brand-glow: var(--teal);
--brand-soft: var(--mint);
--brand-tint: rgba(14, 107, 82, 0.07);
--brand-edge: rgba(14, 107, 82, 0.30);
--brand-2: var(--teal-ink);
--brand-3: var(--evergreen);
--color-primary: var(--evergreen);
--color-primary-dark: var(--evergreen-dark);
--color-primary-light: var(--teal);
--color-accent: var(--evergreen);
--color-accent-dark: var(--evergreen-dark);
--color-accent-light: var(--teal);
--secondary-accent: var(--teal);
/* "Gold" — now a real warm stop. NOT text-safe on paper (1.9:1):
use --gold-deep for gold-colored text. */
--gold: #E0B86A;
--gold-deep: #8A6B3E;
--gold-darker: #6E5530;
--gold-ink: #13241C;
--gold-glow: #E0B86A;
--gold-tint: rgba(224, 184, 106, 0.16);
--gold-edge: rgba(224, 184, 106, 0.55);
/* PAPER — green-biased ground and surfaces */
--ink-0: #E7EBE3; /* page frame */
--ink-1: #F3F4EE; /* canvas */
--ink-2: #FBFCF8; /* surface / card */
--ink-3: #FFFFFF; /* raised surface */
--ink-4: #E8F0EA; /* hover well, mint-tinted */
--paper-0: var(--ink-0);
--paper-1: var(--ink-1);
--paper-2: var(--ink-2);
--paper-3: var(--ink-3);
--paper-4: var(--ink-4);
--surface: rgba(255, 255, 255, 0.62); /* ordinary card fill */
--surface-strong: rgba(255, 255, 252, 0.72); /* money panel fill */
/* LINES — hairlines only. No black structural rules anywhere. */
--line: rgba(19, 36, 28, 0.10);
--line-strong: rgba(19, 36, 28, 0.14); /* legacy name, now a soft hairline */
--line-bronze: rgba(138, 107, 62, 0.35);
--rule: 1px solid var(--line);
--rule-hair: 1px solid var(--line);
/* TEXT — green-biased ink */
--text: #13241C;
--text-1: #2C3D35;
--text-2: #4E5E56;
--text-3: #5E6C65;
--ink: var(--text);
/* Template aliases */
--color-text: var(--text);
--color-text-light: var(--text-1);
--color-text-muted: var(--text-2);
--color-bg: var(--ink-1);
--color-bg-light: var(--ink-2);
--color-bg-dark: var(--ink-3);
--color-border: var(--line);
--color-border-light: var(--line);
/* States */
--success: #0E6B52;
--warning: #8A6A00;
--danger: #A4362F;
--info: #1F6280;
--success-tint: rgba(26, 156, 134, 0.12);
--warning-tint: rgba(224, 184, 106, 0.22);
--danger-tint: rgba(217, 138, 122, 0.18);
--info-tint: rgba(31, 98, 128, 0.09);
/* TYPE — Stack Sans Notch display (single 400 weight: keep font-weight
400, font-synthesis none, non-negative tracking); Archivo body and
labels; mono only for serials, the protocol formula, and code. */
--ff-display: "Stack Sans Notch", "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
--ff-serif: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
--ff-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
--ff-label: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
--ff-mono: "Spline Sans Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
--font-family: var(--ff-sans);
--font-family-mono: var(--ff-mono);
--fraunces-display: normal; /* legacy alias — no longer used */
/* Spacing */
--s-1: 0.25rem;
--s-2: 0.5rem;
--s-3: 0.75rem;
--s-4: 1rem;
--s-5: 1.5rem;
--s-6: 2rem;
--s-7: 3rem;
--s-8: 4rem;
--s-9: 6rem;
--s-10: 8rem;
--spacing-xs: var(--s-2);
--spacing-sm: var(--s-4);
--spacing-md: var(--s-5);
--spacing-lg: var(--s-6);
--spacing-xl: var(--s-7);
--spacing-2xl: var(--s-8);
/* Radii — pill for actions, 24 money panels, 16 tiles, 12 inputs */
--r-pill: 999px;
--r-lg: 24px;
--r-md: 16px;
--r-sm: 12px;
--r-1: 6px;
--r-2: var(--r-sm);
--r-3: var(--r-md);
--r-4: var(--r-lg);
--r-5: var(--r-lg);
--r-full: var(--r-pill);
--radius-sm: var(--r-sm);
--radius-md: var(--r-md);
--radius-lg: var(--r-lg);
--radius-full: var(--r-pill);
/* Shadows — soft, green-tinted */
--shadow-sm: 0 1px 2px rgba(19, 36, 28, 0.04), 0 10px 24px -18px rgba(14, 80, 70, 0.30);
--shadow-md: 0 18px 40px -26px rgba(14, 80, 70, 0.38);
--shadow-lg: 0 30px 60px -30px rgba(14, 80, 70, 0.45);
--shadow-money: var(--shadow-lg);
--shadow-btn: 0 10px 26px -10px rgba(14, 107, 82, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.28);
--glow-brand: none;
--glow-violet: none;
/* The Floor Line — a gradient hairline */
--floor-color: var(--grad-cta);
--floor-weight: 2px;
/* Motion */
--e-out: cubic-bezier(0.2, 0, 0, 1);
--e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--e-set: cubic-bezier(0.2, 0, 0, 1);
--d-fast: 120ms;
--d-base: 220ms;
--d-slow: 420ms;
--d-draw: 700ms;
--transition-fast: var(--d-fast) var(--e-out);
--transition-base: var(--d-base) var(--e-out);
--transition-slow: var(--d-slow) var(--e-out);
/* Legacy grid tokens */
--grid-size: 72px;
--grid-color: transparent;
}
/* Where the browser can interpolate in oklch, the text gradients do, so
evergreen -> teal never dips through a muddy midpoint. */
@supports (background-image: linear-gradient(in oklch 90deg, red, blue)) {
:root {
--grad-value: linear-gradient(in oklch 90deg, #0E6B52, #178A74 50%, #0E7A63);
--grad-headline: linear-gradient(in oklch 100deg, #0E6B52 0%, #13806A 40%, #1A9C86 70%, #0E7A63 100%);
}
}
/* ---------- Reset / base ---------- */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; box-sizing: border-box; }
*:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.skip-link { position: absolute; left: 8px; top: -48px; z-index: 200; background: var(--evergreen); color: #fff; font-family: var(--ff-label); font-size: 0.875rem; font-weight: 600; padding: 0.6rem 1.1rem; border-radius: var(--r-pill); transition: top var(--transition-fast); }
.skip-link:focus { top: 8px; color: #fff; outline: 2px solid var(--teal); outline-offset: 2px; }
html { scroll-behavior: smooth; background: var(--paper); overflow-x: clip; }
body {
font-family: var(--ff-sans);
color: var(--text);
background: var(--paper);
line-height: 1.6;
margin: 0;
padding: 0;
overflow-x: clip;
max-width: 100vw;
}
::selection { background: rgba(125, 199, 162, 0.45); color: var(--text); }
/* ---------- Page wrapper — paper with a faint green wash + film grain ---------- */
.page-wrapper {
min-height: 100vh;
width: 100%;
position: relative;
isolation: isolate;
background: var(--paper);
overflow-x: hidden;
}
/* Wash — real fixed divs at z-index 0: above the wrapper's paper, below all
content (.page-wrapper > * sits at z-index 1). Negative-z pseudos get
painted under the wrapper background in Chrome — don't use them. */
.page-wrapper > .bg-aurora {
position: fixed;
inset: -12vmax;
z-index: 0;
pointer-events: none;
background:
radial-gradient(80vmax 55vmax at 82% 2%, rgba(26, 156, 134, 0.10), transparent 55%),
radial-gradient(72vmax 50vmax at 6% 16%, rgba(14, 107, 82, 0.08), transparent 55%),
radial-gradient(85vmax 58vmax at 94% 94%, rgba(224, 184, 106, 0.12), transparent 56%),
radial-gradient(60vmax 46vmax at 10% 100%, rgba(125, 199, 162, 0.12), transparent 58%);
animation: auroraDrift 48s var(--e-in-out) infinite alternate;
}
@keyframes auroraDrift {
from { transform: translate3d(0, 0, 0) scale(1); }
to { transform: translate3d(-2.5%, 1.5%, 0) scale(1.06); }
}
/* Film grain — SVG turbulence, analog texture over everything */
.page-wrapper > .bg-grain {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.45;
background-image: url("data:image/svg+xml;utf8,");
}
.page-wrapper::before, .page-wrapper::after { content: none; }
.page-wrapper > .grain { display: none; }
.page-wrapper > * { position: relative; z-index: 1; }
/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6, .h5 {
font-family: var(--ff-display);
color: var(--text);
font-weight: 400; /* Stack Sans Notch's only weight */
font-synthesis: none; /* never fake-bold a single-weight face */
letter-spacing: 0; /* negative tracking clips the notches */
line-height: 1.12;
margin: 0 0 var(--s-4);
}
h1 { font-size: clamp(2.375rem, 5vw, 3.875rem); line-height: 1.06; }
h2 { font-size: clamp(1.6875rem, 3vw, 2.375rem); line-height: 1.1; }
h3 { font-size: clamp(1.3125rem, 2vw, 1.625rem); }
h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1.0625rem; }
h6 { font-family: var(--ff-label); font-size: 0.875rem; font-weight: 600; font-synthesis: initial; color: var(--text-2); }
p { color: var(--text-1); font-size: 1rem; line-height: 1.6; margin: 0 0 var(--s-4); }
.lead { color: var(--text-1); font-size: 1.1875rem; font-weight: 400; line-height: 1.5; max-width: min(58ch, 100%); }
a { color: var(--evergreen); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--evergreen-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* A link inside running text can't lean on color alone (WCAG 1.4.1): a quiet underline. */
p a:not(.btn), .accordion-body a:not(.btn), .figure-cite a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
p a:not(.btn):hover, .accordion-body a:not(.btn):hover, .figure-cite a:hover { text-decoration-color: currentColor; }
code { font-family: var(--ff-mono); font-size: 0.85em; color: var(--text); background: var(--mint-tint); padding: 0.12em 0.45em; border-radius: var(--r-1); }
.text-primary { color: var(--evergreen) !important; }
.text-accent { color: var(--evergreen) !important; }
.text-muted { color: var(--text-2) !important; }
.text-dark { color: var(--text) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-white { color: var(--text) !important; }
.text-white-50 { color: var(--text-2) !important; }
.fw-bold { font-weight: 700 !important; }
.fw-semibold { font-weight: 620 !important; }
.fw-medium { font-weight: 520 !important; }
/* Money figures — the display face, tabular, never synthesized bold.
(.mono is the legacy class templates put on figures.) */
.mono, .money, .countdown-timer {
font-family: var(--ff-display);
font-weight: 400;
font-synthesis: none;
letter-spacing: 0;
font-variant-numeric: tabular-nums lining-nums;
}
/* Eyebrow — the live chip: translucent pill with a breathing dot */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
width: fit-content;
font-family: var(--ff-label);
font-size: 0.875rem;
font-weight: 500;
color: var(--text);
padding: 0.45rem 0.9rem 0.45rem 0.7rem;
border-radius: var(--r-pill);
background: rgba(255, 255, 255, 0.66);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 1px 2px rgba(19, 36, 28, 0.04);
}
.eyebrow::before {
content: "";
width: 8px; height: 8px;
border-radius: 50%;
flex-shrink: 0;
background: var(--teal);
animation: livePulse 2.4s ease-out infinite;
}
/* Live signal — a ring that spreads from the dot */
@keyframes livePulse {
0% { box-shadow: 0 0 0 0 rgba(26, 156, 134, 0.55); }
100% { box-shadow: 0 0 0 10px rgba(26, 156, 134, 0); }
}
@media (prefers-reduced-motion: reduce) { .eyebrow::before { animation: none; } }
/* ---------- Navbar — translucent paper, no rule ---------- */
.navbar {
background: rgba(243, 244, 238, 0.72) !important;
backdrop-filter: saturate(140%) blur(14px);
-webkit-backdrop-filter: saturate(140%) blur(14px);
border-bottom: 0;
padding: 0.75rem 0;
position: sticky;
top: 0;
z-index: 50;
}
/* The wordmark is the one place uppercase tracking stays. */
.navbar-brand {
font-family: var(--ff-display);
font-weight: 400;
font-synthesis: none;
font-size: 1.125rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text) !important;
display: flex !important;
align-items: center;
gap: var(--s-3);
text-decoration: none !important;
}
.navbar-toggler {
border: 0;
background: rgba(255, 255, 255, 0.7);
padding: 0.45rem 0.65rem;
border-radius: var(--r-sm);
}
.navbar-toggler:focus { box-shadow: none; outline: 2px solid var(--teal); outline-offset: 2px; }
.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%2313241C' stroke-width='2' stroke-linecap='round' d='M5 8h20M5 15h20M5 22h20'/%3E%3C/svg%3E");
}
.nav-link {
color: var(--text-1) !important;
font-family: var(--ff-label);
font-weight: 500;
font-size: 0.9375rem;
padding: 0.5rem 0.9rem !important;
transition: color var(--transition-fast);
position: relative;
}
.nav-link:hover { color: var(--evergreen) !important; text-decoration: none; }
.nav-link.active { color: var(--evergreen) !important; }
.nav-link.active::after {
content: "";
position: absolute;
left: 0.9rem; right: 0.9rem; bottom: 0.15rem;
height: 2px;
border-radius: var(--r-pill);
background: var(--grad-cta);
}
.navbar .btn { padding: 0.65rem 1.2rem; font-size: 0.9375rem; }
/* ---------- Buttons — gradient pills ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
font-family: var(--ff-label);
font-weight: 600;
font-size: 0.9375rem;
letter-spacing: 0;
padding: 0.85rem 1.5rem;
border-radius: var(--r-pill);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none !important;
transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-fast), background-position var(--d-slow) var(--e-out), color var(--transition-fast);
position: relative;
white-space: nowrap;
line-height: 1.1;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus { outline: none; box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.btn-lg { padding: 1rem 1.75rem; font-size: 1rem; }
/* Primary / gold / success = the gradient pill. Hover slides the gradient. */
.btn-primary, .btn-gold, .btn-success {
background: var(--grad-btn);
background-size: 140% 100%;
background-position: 0% 50%;
color: var(--brand-ink);
border-color: transparent;
box-shadow: var(--shadow-btn);
}
.btn-primary:hover, .btn-gold:hover, .btn-success:hover,
.btn-primary:focus, .btn-gold:focus, .btn-success:focus {
background: var(--grad-btn);
background-size: 140% 100%;
background-position: 100% 50%;
color: var(--brand-ink);
border-color: transparent;
box-shadow: 0 14px 30px -12px rgba(14, 107, 82, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-primary:active, .btn-gold:active, .btn-success:active,
.btn-primary:not(:disabled):not(.disabled):active { background: var(--evergreen-dark); color: var(--brand-ink); border-color: transparent; }
.btn-primary:disabled, .btn-primary.disabled { background: var(--grad-btn); color: var(--brand-ink); opacity: 0.55; border-color: transparent; }
/* Outline = a translucent white pill */
.btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-light {
background: rgba(255, 255, 255, 0.66);
color: var(--text);
border: 1px solid rgba(19, 36, 28, 0.08);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.btn-outline:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-light:hover,
.btn-outline:focus, .btn-outline-primary:focus {
background: #FFFFFF;
border-color: rgba(14, 107, 82, 0.22);
color: var(--evergreen);
box-shadow: var(--shadow-sm);
}
.btn-close {
background: transparent;
border: none;
color: var(--text-2);
width: 28px; height: 28px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
padding: 0;
opacity: 0.75;
cursor: pointer;
}
.btn-close::before { content: "\00D7"; font-size: 1.25rem; line-height: 1; }
.btn-close:hover { color: var(--text); opacity: 1; background: var(--mint-tint); }
/* ---------- Sections ---------- */
.section {
padding: clamp(var(--s-7), 8vw, var(--s-9)) 0;
position: relative;
}
.section-light { position: relative; background: transparent; isolation: isolate; }
/* The light band feathers in and out instead of starting on a hard line. */
.section-light::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: rgba(255, 255, 255, 0.42);
-webkit-mask-image: linear-gradient(180deg, transparent, #000 min(18%, 140px), #000 calc(100% - min(18%, 140px)), transparent);
mask-image: linear-gradient(180deg, transparent, #000 min(18%, 140px), #000 calc(100% - min(18%, 140px)), transparent);
}
.container { max-width: 1200px; width: 100%; padding-left: var(--s-5); padding-right: var(--s-5); box-sizing: border-box; }
.section, .hero-main { overflow: clip; }
@media (max-width: 768px) { .container { padding-left: var(--s-4); padding-right: var(--s-4); } }
/* ---------- Hero ---------- */
.hero-main {
position: relative;
padding: clamp(var(--s-7), 9vw, 7rem) 0 clamp(var(--s-7), 8vw, 6.5rem);
overflow: hidden;
}
.hero-main::before { content: none; }
.hero-main h1 {
font-size: clamp(2rem, 6vw, 4rem);
font-weight: 400;
letter-spacing: 0;
line-height: 1.04;
margin-bottom: var(--s-5);
overflow-wrap: break-word;
font-stretch: 112%;
}
.hero-main .lead { color: var(--text-1); font-size: 1.125rem; max-width: min(54ch, 100%); }
/* Accent words in the headline — printed in the value gradient */
.hero-main h1 .text-primary {
color: var(--evergreen) !important;
background: var(--grad-headline);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
padding-bottom: 0.08em;
}
/* Countdown — a soft tile */
.countdown-box {
display: inline-flex;
align-items: center;
gap: var(--s-3);
padding: 0.8rem 1.2rem;
border-radius: var(--r-md);
background: var(--surface);
position: relative;
}
.countdown-box::before { content: none; }
.countdown-box small { display: block; font-family: var(--ff-label); font-size: 0.8125rem; color: var(--text-2); }
.countdown-timer { font-size: 1.25rem; color: var(--text); }
/* Hero viz column */
.hero-viz-wrapper { position: relative; display: flex; align-items: center; justify-content: center; }
.flow-canvas-wrap {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
max-width: 480px;
border-radius: var(--r-lg);
overflow: hidden;
background: var(--surface);
}
.flow-canvas-wrap canvas { width: 100%; height: 100%; display: block; }
.flow-canvas-ring { position: absolute; inset: 10%; border-radius: 50%; border: 1px solid var(--line); animation: none; }
.flow-canvas-ring.r2 { inset: 22%; }
.flow-canvas-ring.r3 { inset: 34%; }
.flow-core { display: none; }
/* Brand mark — the torc coin */
.brand-mark { width: 30px; height: 30px; display: block; flex-shrink: 0; }
.coin-3d, .coin-layer, .coin-face-front, .coin-face-back, .coin-3d-hero { display: none !important; }
/* ============================================================
MONEY PANEL — the note. Translucent fill, 24px corners, soft green
shadow, and a 1px rainbow edge drawn by a masked ::before. Reserved
for genuine money moments. .instrument-frame is the retired name,
kept as an alias until every template is migrated.
============================================================ */
.money-panel, .instrument-frame {
position: relative;
border-radius: var(--r-lg);
background: var(--surface-strong);
box-shadow: var(--shadow-money);
-webkit-backdrop-filter: blur(18px) saturate(1.2);
backdrop-filter: blur(18px) saturate(1.2);
}
.money-panel::before, .instrument-frame::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
padding: 1px;
pointer-events: none;
background: var(--grad-edge);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Figure cell inside a money panel */
.money-cell {
border-radius: var(--r-md);
padding: 0.875rem 1rem;
background: var(--mint-wash);
}
/* The headline money figure, printed in value-ink */
.money-value {
font-family: var(--ff-display);
font-weight: 400;
font-synthesis: none;
letter-spacing: 0;
font-variant-numeric: tabular-nums lining-nums;
color: var(--evergreen);
background: var(--grad-value);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ---------- Metric cards ---------- */
.metric-card {
position: relative;
padding: var(--s-5);
border-radius: var(--r-md);
background: var(--surface);
border: 0;
transition: background var(--transition-fast), box-shadow var(--transition-base);
}
.metric-card::before, .metric-card::after { content: none; }
.metric-card:hover { background: rgba(255, 255, 255, 0.8); transform: none; }
/* Label — sentence case, normal tracking. Used for every small caption. */
.metric-label, .label {
font-family: var(--ff-label);
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--text-2);
margin-bottom: var(--s-2);
}
.metric-value {
font-family: var(--ff-display);
font-size: clamp(1.75rem, 2.7vw, 2.375rem);
font-weight: 400;
font-synthesis: none;
letter-spacing: 0;
line-height: 1.05;
color: var(--text);
font-variant-numeric: tabular-nums lining-nums;
margin-bottom: var(--s-2);
}
.metric-sub { font-size: 0.875rem; color: var(--text-2); }
/* ---------- Step cards ---------- */
.step-card {
position: relative;
padding: var(--s-6) var(--s-5);
border-radius: var(--r-lg);
background: var(--surface);
border: 0;
transition: box-shadow var(--transition-base);
}
.step-card:hover { box-shadow: var(--shadow-sm); transform: none; }
.step-card::before { content: none; }
.step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
margin-bottom: var(--s-4);
border-radius: 50%;
font-family: var(--ff-display);
font-weight: 400;
font-synthesis: none;
font-size: 1.125rem;
color: var(--brand-ink);
background: var(--grad-btn);
box-shadow: var(--shadow-btn);
position: relative;
}
.step-number::before { content: none; }
/* ---------- Formula display — the protocol line, still mono ---------- */
.formula-display {
display: inline-flex;
align-items: center;
gap: 0.55rem;
flex-wrap: wrap;
justify-content: center;
padding: var(--s-4) var(--s-5);
border-radius: var(--r-md);
background: var(--surface);
font-family: var(--ff-mono);
font-size: 1rem;
}
.formula-payment { color: var(--evergreen); font-weight: 600; }
.formula-operator { color: var(--text-3); }
.formula-value { color: var(--text); font-weight: 500; padding: 0.15em 0.55em; border-radius: var(--r-1); background: var(--mint-tint); }
/* ---------- Trust items — whitespace only ---------- */
.trust-item {
padding: var(--s-5) var(--s-4);
background: transparent;
border: 0;
transition: none;
}
.trust-item:hover { background: transparent; transform: none; }
.trust-item i { color: var(--evergreen) !important; }
.trust-item h5, .trust-item .h5 { color: var(--text) !important; margin-bottom: var(--s-2); }
.trust-item p { color: var(--text-2) !important; }
/* ---------- Cards (Bootstrap override) — light fill, no border ---------- */
.card {
background: var(--surface);
border: 0;
border-radius: var(--r-lg);
box-shadow: 0 1px 2px rgba(19, 36, 28, 0.03);
color: var(--text);
transition: none;
}
.card-body { padding: var(--s-5); color: var(--text-1); }
.card-title { color: var(--text); }
.card-header {
background: transparent;
border-bottom: 1px solid var(--line);
color: var(--text);
padding: var(--s-4) var(--s-5);
border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
font-family: var(--ff-label);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0;
}
.card-text { color: var(--text-1); }
.bg-custom {
background: transparent !important;
color: var(--text);
}
.bg-custom .text-white { color: var(--text) !important; }
.bg-custom .text-white-50 { color: var(--text-2) !important; }
/* ---------- Icon circle ---------- */
.icon-circle {
width: 44px; height: 44px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--mint-tint);
border: 0;
color: var(--evergreen);
font-size: 1.125rem;
flex-shrink: 0;
}
.icon-circle i { color: var(--evergreen) !important; }
/* ---------- Badges — soft pills ---------- */
.badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-family: var(--ff-label);
font-size: 0.75rem !important;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
padding: 0.3rem 0.7rem;
border-radius: var(--r-pill);
border: 0;
background: var(--mint-tint);
color: var(--evergreen);
}
.badge-success, .bg-success { background: var(--success-tint) !important; color: var(--success) !important; border: 0 !important; }
.badge-primary, .bg-primary { background: var(--brand-tint) !important; color: var(--evergreen) !important; border: 0 !important; }
.bg-warning { background: var(--warning-tint) !important; color: var(--warning) !important; border: 0 !important; }
.bg-danger { background: var(--danger-tint) !important; color: var(--danger) !important; border: 0 !important; }
.bg-info { background: var(--info-tint) !important; color: var(--info) !important; border: 0 !important; }
.bg-secondary { background: var(--ink-4) !important; color: var(--text-1) !important; }
.bg-light { background: var(--ink-1) !important; color: var(--text-1) !important; }
.bg-white { background: var(--ink-2) !important; }
.bg-danger-subtle { background: var(--danger-tint) !important; }
/* ---------- Forms — soft fields ---------- */
.form-label {
font-family: var(--ff-label);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--text);
margin-bottom: var(--s-2);
}
.form-control, .form-select, input[type="text"], input[type="email"], input[type="number"], input[type="tel"], textarea, select {
background-color: #FFFFFF !important;
color: var(--text) !important;
border: 1px solid rgba(19, 36, 28, 0.12) !important;
border-radius: var(--r-sm) !important;
padding: 0.75rem 0.95rem !important;
font-size: 0.9375rem !important;
font-family: var(--ff-sans);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}
.form-select { padding-right: 2.5rem !important; }
.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus {
outline: none !important;
border-color: var(--teal) !important;
background-color: #FFFFFF !important;
box-shadow: 0 0 0 4px rgba(26, 156, 134, 0.16) !important;
}
.form-control::placeholder { color: var(--text-3); }
.form-text { color: var(--text-2); font-size: 0.8125rem; }
.form-check-input { border-color: rgba(19, 36, 28, 0.25); }
.form-check-input:checked { background-color: var(--evergreen); border-color: var(--evergreen); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(26, 156, 134, 0.16); border-color: var(--teal); }
.input-group { background: transparent; }
.input-group-text {
background: var(--ink-4);
color: var(--text-1);
border: 1px solid rgba(19, 36, 28, 0.12);
border-right: 0;
border-radius: var(--r-sm) 0 0 var(--r-sm);
font-family: var(--ff-sans);
font-size: 0.9375rem;
padding: 0 0.95rem;
}
.input-group > .input-group-text + .form-control { border-radius: 0 var(--r-sm) var(--r-sm) 0 !important; }
/* ---------- Alerts — tinted, rounded, no rules ---------- */
.alert {
border-radius: var(--r-md);
border: 0;
padding: 0.95rem 1.15rem;
color: var(--text-1);
background: var(--surface);
}
.alert h6, .alert h5, .alert h4 { color: var(--text); margin-bottom: var(--s-2); }
.alert-success { background: var(--success-tint); color: var(--text); }
.alert-info { background: var(--info-tint); color: var(--text); }
.alert-warning { background: var(--warning-tint); color: var(--text); }
.alert-danger, .alert-error { background: var(--danger-tint); color: var(--text); }
.alert-primary { background: var(--brand-tint); color: var(--text); }
.alert-light { background: var(--surface); color: var(--text-1); }
/* ---------- Accordion — separate soft tiles ---------- */
.accordion { background: transparent; border: 0; display: grid; gap: 0.5rem; }
.accordion-item {
background: var(--surface) !important;
border: 0 !important;
border-radius: var(--r-md) !important;
overflow: hidden;
}
.accordion-button {
background: transparent !important;
color: var(--text) !important;
font-family: var(--ff-sans);
font-weight: 560 !important;
font-size: 1rem;
padding: 1.1rem 1.25rem;
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
}
.accordion-button:not(.collapsed) { color: var(--evergreen) !important; background: transparent !important; box-shadow: none !important; }
.accordion-button:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.accordion-button::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230E6B52' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M8 3v10M3 8h10'/%3E%3C/svg%3E");
transition: transform var(--transition-base);
}
.accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230E6B52' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 8h10'/%3E%3C/svg%3E");
transform: none;
}
.accordion-body { color: var(--text-1); padding: 0 1.25rem 1.25rem; font-size: 0.9375rem; line-height: 1.6; }
/* ---------- Lists / Leaderboard ---------- */
.list-group, .list-group-flush { background: transparent; border-radius: 0; }
.list-group-item {
background: transparent !important;
border-color: var(--line) !important;
border-radius: 0 !important;
color: var(--text-1) !important;
padding: 0.85rem 1.1rem;
transition: background var(--transition-fast);
}
.list-group-item:hover { background: rgba(255, 255, 255, 0.5) !important; }
.list-group-item strong { color: var(--text); font-weight: 560; }
.list-group-item .badge.rounded-pill {
background: var(--mint-tint) !important;
color: var(--evergreen) !important;
border: 0;
border-radius: var(--r-pill) !important;
font-family: var(--ff-display);
font-weight: 400;
font-synthesis: none;
font-variant-numeric: tabular-nums;
min-width: 2.5em;
justify-content: center;
}
/* ---------- Tables ---------- */
.table {
color: var(--text-1) !important;
border-color: var(--line) !important;
margin-bottom: 0;
}
.table > :not(caption) > * > * { background: transparent !important; color: inherit; border-bottom-color: var(--line); padding: 0.75rem 0.9rem; }
.table > :not(:first-child) { border-top: 0; }
.table thead th, .table-light {
background: transparent !important;
color: var(--text-2) !important;
font-family: var(--ff-label);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
border-bottom: 1px solid var(--line) !important;
}
.table tbody td { font-variant-numeric: tabular-nums; }
.table-hover tbody tr:hover td { background: rgba(125, 199, 162, 0.10) !important; }
.table-responsive { border-radius: var(--r-md); border: 0; }
/* ---------- Progress ---------- */
.progress { background: var(--mint-tint); border: 0; border-radius: var(--r-pill); overflow: hidden; height: 8px; }
.progress-bar { background: var(--grad-cta); border-radius: var(--r-pill); }
.progress-bar.bg-success { background: var(--teal) !important; border: 0 !important; }
.progress-bar.bg-warning { background: var(--gold) !important; border: 0 !important; }
.progress-bar.bg-secondary { background: var(--text-3) !important; border: 0 !important; }
/* ---------- Modal / dropdown (Bootstrap) ---------- */
.modal-content { border: 0; border-radius: var(--r-lg); background: var(--ink-2); box-shadow: var(--shadow-lg); }
.modal-header, .modal-footer { border-color: var(--line); }
.dropdown-menu { border: 0; border-radius: var(--r-md); background: var(--ink-3); box-shadow: var(--shadow-md); padding: 0.4rem; }
.dropdown-item { border-radius: var(--r-1); color: var(--text-1); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--mint-tint); color: var(--evergreen); }
/* ---------- Ticker — the index strip ---------- */
.ticker {
width: 100%;
overflow: hidden;
background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.5) 30%, rgba(255, 255, 255, 0.5) 70%, transparent);
padding: 1rem 0;
margin-top: var(--s-7);
position: relative;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker::before, .ticker::after { content: none; }
.ticker-track {
display: inline-flex;
white-space: nowrap;
animation: tickerSlide 48s linear infinite;
gap: var(--s-6);
font-family: var(--ff-label);
font-size: 0.875rem;
letter-spacing: 0;
color: var(--text-2);
}
.ticker-track span { display: inline-flex; align-items: center; gap: var(--s-3); }
.ticker-track span::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--teal);
display: inline-block;
}
@keyframes tickerSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ---------- Footer — two tiers: link columns, then the seal line ---------- */
footer {
padding: var(--s-8) var(--s-5) var(--s-6);
color: var(--text-2);
background: linear-gradient(180deg, transparent, rgba(125, 199, 162, 0.12) 60%, rgba(125, 199, 162, 0.18));
}
footer a { color: var(--text-2); }
footer a:hover { color: var(--evergreen); }
.footer-inner { max-width: calc(1200px - 2 * var(--s-5)); margin: 0 auto; }
.footer-top {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
gap: var(--s-7);
padding-bottom: var(--s-6);
}
.footer-wordmark {
font-family: var(--ff-display);
font-weight: 400;
font-synthesis: none;
font-size: 1.5rem;
color: var(--evergreen) !important;
text-decoration: none !important;
}
.footer-tagline { color: var(--text-2); font-size: 0.9375rem; max-width: 34ch; margin: var(--s-3) 0 0; }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.footer-h {
font-family: var(--ff-label);
font-size: 0.875rem;
font-weight: 600;
font-synthesis: initial;
letter-spacing: 0;
color: var(--text);
margin: 0 0 var(--s-3);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.footer-col a { font-size: 0.9375rem; display: inline-flex; align-items: center; gap: 0.55rem; }
.footer-contact i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.72);
color: var(--evergreen);
font-size: 0.8125rem;
transition: background var(--transition-fast), color var(--transition-fast);
}
.footer-contact a:hover i { background: var(--grad-btn); color: var(--brand-ink); }
.footer-bottom {
display: flex;
align-items: center;
gap: var(--s-5);
padding: var(--s-5) var(--s-5);
border-radius: var(--r-lg);
background: rgba(255, 255, 255, 0.5);
}
.footer-bottom .footer-seal { width: 64px; height: 64px; margin: 0; flex-shrink: 0; }
.footer-bottom p { margin: 0; }
.footer-meta { font-family: var(--ff-label); font-size: 0.875rem; color: var(--text-1); }
.disclaimer-text { color: var(--text-3); font-size: 0.8125rem; max-width: 760px; margin: var(--s-2) 0 0; }
.footer-bottom .disclaimer-text { margin-top: var(--s-2); }
@media (max-width: 767.98px) {
footer { padding: var(--s-7) var(--s-4) var(--s-5); }
.footer-top { grid-template-columns: 1fr; gap: var(--s-5); }
.footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-5); }
.footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--s-3); padding: var(--s-4); }
}
/* ---------- Reveal animation — brief, functional ---------- */
[data-reveal] {
opacity: 0;
transform: translateY(8px);
transition: opacity 0.45s var(--e-out), transform 0.45s var(--e-out);
transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].in { opacity: 1; transform: translateY(0); }
[data-aos] { opacity: 1; transform: none; }
/* ---------- The Floor Line — a gradient hairline ---------- */
.floor-line {
display: block;
width: var(--floor-w, 100%);
height: var(--floor-weight);
background: var(--floor-color);
border: 0;
border-radius: var(--r-pill);
margin: 0;
transform-origin: left center;
}
.floor-line--ink { background: var(--evergreen); }
.floor-line--hair { height: 1px; background: var(--line); }
/* The kicker stubs under every section stay retired. */
.floor-line--stub { display: none !important; }
.floor-line--center { margin-left: auto; margin-right: auto; transform-origin: center; }
[data-draw] { animation: floorDraw var(--d-draw) var(--e-out) both; }
@keyframes floorDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Section kicker — engraved fleuron + a sentence-case label. The serial
number the markup still carries is hidden. */
.kicker {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: var(--ff-label);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--evergreen);
}
.kicker::before {
content: "";
width: 22px; height: 22px;
background: url("rosette-corner.617b8893ec12.svg") center / contain no-repeat;
opacity: 0.9;
flex-shrink: 0;
}
.kicker .num { display: none; }
/* Bootstrap's .d-block is !important and would collapse the fleuron row */
.kicker.d-block { display: flex !important; }
/* centered section heads: center the kicker too */
.section-head--center .kicker,
.text-center .kicker { justify-content: center; }
/* Pool field — retired decoration */
.pool-field { display: none; }
/* ============================================================
THE BANKNOTE FIELD — dithered gradient + guilloché, drawn by
static/banknote-field.js into