/* ============================================================================ spate.css — one stylesheet, written against the palette tools/palette.mjs solved. Every colour below is a var; none is typed by hand. Two rules this file exists to keep: 1. A DARK BAND OVERRIDES EVERY INK TOKEN IT INHERITS. FIRN shipped a light-surface --ink on a dark band at 1.2:1 with 22 static checks passing, because only `color` had been set and .lede, .btn and the heading accent all still carried tokens solved against the light ground. `.band-deep` below re-points the tokens themselves. 2. NOTHING IS A GRID OR FLEX CONTAINER IF IT CONTAINS INLINE MARKUP. NACRE rendered a list item holding and as four overlapping items, and a button label as "Thefifteenrules", because flex discards whitespace-only text nodes. Markers are ::before, not grid columns. ========================================================================== */ :root { --ground: #EAE0CD; --band: #DDD1BA; --surface: #F0EAE0; --line: #C8BEAA; --ink: #302817; --ink-muted: #60594C; --ink-faint: #5F5A4F; --accent: #745501; /* silt */ --counter: #1D50CC; /* water */ --deep: #281C02; --deep-ink: #F6F1E7; --deep-accent: #6284CB; --positive: #2B6537; --negative: #B5080E; --positive-deep: #51955C; --negative-deep: #C46F65; --glass: rgba(252, 248, 240, 0.62); --glass-line: rgba(48, 40, 23, 0.10); --shadow-sm: 0 1px 2px rgba(40, 28, 2, .05), 0 2px 6px rgba(40, 28, 2, .04); --shadow-md: 0 2px 4px rgba(40, 28, 2, .05), 0 12px 32px rgba(40, 28, 2, .09); --shadow-lg: 0 4px 10px rgba(40, 28, 2, .06), 0 30px 70px rgba(40, 28, 2, .14); --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-full: 999px; /* Didot and Bodoni are the closest thing to the reference's display face that is already on the reader's machine. No web font is loaded: a font request is a third party watching every page view, and this site has none of those anywhere else either. */ --serif: Didot, 'Bodoni MT', 'Hoefler Text', 'Playfair Display', 'Times New Roman', Georgia, serif; --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, system-ui, sans-serif; --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, 'Cascadia Mono', monospace; --pad: clamp(20px, 5vw, 40px); --maxw: 1180px; --narrow: 760px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } img, svg, canvas { max-width: 100%; } a { color: inherit; } /* --- reveal on scroll ----------------------------------------------------- Scoped to .js, which an inline script in sets before any stylesheet is applied. GYRE hid its entire page from anyone without JavaScript by writing this rule unscoped: 37 elements sat at opacity 0 waiting for an IntersectionObserver that never ran. */ .js [data-reveal] { opacity: 0; transform: translateY(14px); } .js [data-reveal].in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } } /* ---------- type ---------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; margin: 0; } h1 { font-size: clamp(42px, 7.4vw, 88px); line-height: 1.02; letter-spacing: -0.028em; } h2 { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.08; letter-spacing: -0.022em; } h3 { font-size: clamp(21px, 2.3vw, 27px); line-height: 1.22; } h4 { font-size: 19px; line-height: 1.3; } /* The reference's signature move: a display heading whose middle clause is italic and coloured. Here the two accents mean something — silt is what is credited, water is what has arrived — so `em` is silt and `.water` water. */ h1 em, h2 em, h3 em { font-style: italic; color: var(--accent); } h1 em.water, h2 em.water, h3 em.water { color: var(--counter); } p { margin: 0 0 1.05em; } .lede { font-size: clamp(17px, 1.55vw, 20px); line-height: 1.6; color: var(--ink-muted); max-width: 62ch; } .small { font-size: 14px; line-height: 1.55; color: var(--ink-muted); } .tiny { font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } .eyebrow { font-size: 11.5px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; font-family: var(--sans); } code, .mono { font-family: var(--mono); font-size: .90em; } :not(pre) > code { background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 6px; padding: .10em .36em; /* an on-chain string can be one long unbroken token; a layout is not allowed to be widened by a value it read from a stranger's contract */ overflow-wrap: anywhere; } pre { background: var(--deep); color: var(--deep-ink); border-radius: var(--r-md); padding: 18px 20px; overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.62; margin: 0 0 20px; } pre code { background: none; border: 0; padding: 0; color: inherit; } /* ---------- layout -------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .narrow { max-width: var(--narrow); margin-inline: auto; } .center { text-align: center; } .center .lede { margin-inline: auto; } section { padding-block: clamp(64px, 9vw, 128px); } .band { background: var(--band); } .band-soft { background: color-mix(in srgb, var(--band) 46%, var(--ground)); } /* THE DARK BAND. Every ink token is re-pointed, not just `color`. */ .band-deep { background: var(--deep); --ink: var(--deep-ink); --ink-muted: color-mix(in srgb, var(--deep-ink) 74%, var(--deep)); --ink-faint: color-mix(in srgb, var(--deep-ink) 62%, var(--deep)); --accent: var(--deep-accent); --counter: var(--deep-accent); --line: color-mix(in srgb, var(--deep-ink) 20%, var(--deep)); --surface: color-mix(in srgb, var(--deep-ink) 7%, var(--deep)); --band: color-mix(in srgb, var(--deep-ink) 4%, var(--deep)); --glass: color-mix(in srgb, var(--deep-ink) 8%, transparent); --glass-line: color-mix(in srgb, var(--deep-ink) 16%, transparent); color: var(--deep-ink); } .head { max-width: 760px; } .head.center { margin-inline: auto; } .head h2 { margin-bottom: 18px; } .grid { display: grid; gap: 20px; } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* min-width:0 at every level, so one long unbreakable string cannot push a track wider than its share — INVAR took a whole document sideways on a 9,575-character ticker before this was here. */ .grid > * { min-width: 0; } @media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: minmax(0,1fr); } } /* ---------- nav ----------------------------------------------------------- */ .nav-outer { position: sticky; top: 0; z-index: 60; padding: 14px var(--pad) 0; } .nav { max-width: var(--maxw); margin-inline: auto; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-radius: var(--r-full); background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow-md); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); } .brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-family: var(--serif); font-size: 21px; letter-spacing: -.01em; } .brand .mark { width: 26px; height: 26px; display: block; flex: 0 0 auto; } .nav-links { display: flex; gap: 2px; margin-left: 10px; flex: 1 1 auto; min-width: 0; } .nav-links a { text-decoration: none; font-size: 14.5px; color: var(--ink-muted); padding: 7px 12px; border-radius: var(--r-full); white-space: nowrap; transition: background .18s, color .18s; } .nav-links a:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); } .nav-links a[aria-current='page'] { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); } .nav-end { display: flex; align-items: center; gap: 8px; } @media (max-width: 900px) { .nav-links { display: none; } .nav { padding-left: 16px; } } /* ---------- buttons ------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 15px; font-weight: 560; padding: 12px 22px; border-radius: var(--r-full); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s, background .16s, opacity .16s; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--deep); color: var(--deep-ink); box-shadow: var(--shadow-sm); } .btn-primary:hover { box-shadow: var(--shadow-md); } .btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); } .btn-ghost:hover { background: color-mix(in srgb, var(--surface) 70%, #fff); } .btn-sm { font-size: 13.5px; padding: 8px 15px; } .btn:disabled, .btn[aria-disabled='true'] { opacity: .45; cursor: not-allowed; transform: none; } /* The nav CTA is ONE class where .nav-links a is two, so the link rule wins on specificity and paints a dark label on a dark pill. FIRN shipped that at 1.3:1. The scoped selector below is what stops it. */ .nav .btn-primary, .nav-links a.btn-primary { color: var(--deep-ink); background: var(--deep); } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line); font-size: 13px; color: var(--ink-muted); white-space: nowrap; } .chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; } .chip .dot.live { background: var(--positive); box-shadow: 0 0 0 3px color-mix(in srgb, var(--positive) 22%, transparent); } .chip-row { display: flex; flex-wrap: wrap; gap: 9px; } .chip-row.center { justify-content: center; } /* ---------- hero ---------------------------------------------------------- */ .hero { position: relative; min-height: min(94vh, 900px); display: grid; place-items: center; padding: 96px 0 72px; isolation: isolate; } .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; } /* A wash that lifts the card off the basin without washing the basin out. */ .hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(130% 82% at 50% 46%, color-mix(in srgb, var(--ground) 44%, transparent) 0%, transparent 66%), linear-gradient(to bottom, color-mix(in srgb, var(--ground) 72%, transparent) 0%, transparent 20%, transparent 66%, var(--ground) 100%); } .hero-card { width: min(880px, calc(100% - 2 * var(--pad))); padding: clamp(34px, 5vw, 62px) clamp(24px, 4.5vw, 62px); border-radius: var(--r-xl); background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow-lg); backdrop-filter: blur(30px) saturate(1.4); -webkit-backdrop-filter: blur(30px) saturate(1.4); text-align: center; } .hero-card h1 { margin: 18px 0 20px; } .hero-card .lede { margin-inline: auto; margin-bottom: 30px; } .hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; } /* ---------- ribbon -------------------------------------------------------- */ .ribbon { background: color-mix(in srgb, var(--band) 70%, var(--ground)); border-block: 1px solid var(--line); padding-block: 17px; } .ribbon-inner { display: flex; flex-wrap: wrap; gap: 10px 30px; justify-content: center; align-items: center; font-size: 14.5px; color: var(--ink-muted); } .ribbon-inner b { color: var(--ink); font-weight: 620; } .ribbon-sep { color: var(--accent); opacity: .55; } @media (max-width: 700px) { .ribbon-sep { display: none; } } /* ---------- cards --------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 2.6vw, 32px); box-shadow: var(--shadow-sm); } .card h3 { margin-bottom: 10px; } .card p:last-child { margin-bottom: 0; } .card-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); margin-bottom: 20px; } .card-icon svg { width: 20px; height: 20px; display: block; } /* Marker lists. ::before, never a grid — see the header of this file. */ .ticks { list-style: none; margin: 18px 0 0; padding: 0; } .ticks li { position: relative; padding-left: 26px; margin-bottom: 10px; font-size: 15px; color: var(--ink-muted); } .ticks li::before { content: ''; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .ticks.check li::before { content: '✓'; width: auto; height: auto; background: none; border-radius: 0; left: 2px; top: 0; color: var(--counter); font-size: 14px; font-weight: 700; } .ticks.cross li::before { content: '×'; width: auto; height: auto; background: none; border-radius: 0; left: 2px; top: -.05em; color: var(--negative); font-size: 17px; font-weight: 700; } .band-deep .ticks.cross li::before { color: var(--negative-deep); } /* ---------- steps --------------------------------------------------------- */ .steps { counter-reset: step; display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0,1fr)); } @media (max-width: 980px) { .steps { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 560px) { .steps { grid-template-columns: minmax(0,1fr); } } .step { position: relative; padding: 26px 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); } .step .n { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--accent); display: block; margin-bottom: 14px; } .step h4 { margin-bottom: 8px; font-family: var(--serif); font-size: 21px; } .step p { margin: 0; font-size: 14.5px; color: var(--ink-muted); } /* ---------- stats --------------------------------------------------------- */ .stats { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .stat { padding: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); } .stat .v { font-family: var(--serif); font-size: clamp(30px, 3.6vw, 44px); line-height: 1.05; display: block; letter-spacing: -.02em; } .stat .v.water { color: var(--counter); } .stat .v.silt { color: var(--accent); } .stat .k { font-size: 13px; color: var(--ink-muted); margin-top: 10px; display: block; } .stat .sub { font-size: 12px; color: var(--ink-faint); margin-top: 5px; display: block; } /* ---------- tables -------------------------------------------------------- */ .tw { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); } /* A scroll container still has a non-zero min-content contribution, so it can widen the page rather than scroll inside itself unless it is told it may shrink. */ .tw { min-width: 0; } table { border-collapse: collapse; width: 100%; font-size: 14px; } th, td { padding: 11px 15px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; } th { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); font-weight: 640; background: color-mix(in srgb, var(--line) 26%, transparent); } tbody tr:last-child td { border-bottom: 0; } td.n, th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; } .ok { color: var(--positive); font-weight: 600; } .bad { color: var(--negative); font-weight: 600; } .band-deep .ok { color: var(--positive-deep); } .band-deep .bad { color: var(--negative-deep); } /* ---------- figures ------------------------------------------------------- */ figure { margin: 0 0 8px; } figure canvas, figure svg { width: 100%; height: auto; display: block; border-radius: var(--r-md); } figcaption { font-size: 13px; color: var(--ink-muted); margin-top: 12px; max-width: 68ch; } .fig-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(18px,2.4vw,28px); } /* ---------- panel / app --------------------------------------------------- */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px,2.6vw,30px); } .field { display: block; margin-bottom: 16px; } .field > span { display: block; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 7px; } input[type=text], input[type=number], select { width: 100%; font: inherit; font-size: 15px; font-family: var(--mono); padding: 11px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 40%, #fff); color: var(--ink); } input:focus-visible, select:focus-visible, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--counter); outline-offset: 2px; } .note { border-left: 3px solid var(--accent); padding: 4px 0 4px 16px; margin: 0 0 18px; font-size: 14.5px; color: var(--ink-muted); } .note.water { border-left-color: var(--counter); } .kv { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 14px; } .kv:last-child { border-bottom: 0; } .kv > span:first-child { color: var(--ink-muted); } .kv > span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; } /* dotted leader, for the survey-sheet register the spec lists use */ .leader { display: flex; align-items: baseline; gap: 8px; font-size: 14.5px; padding: 7px 0; } .leader > span:first-child { color: var(--ink-muted); } .leader .fill { flex: 1 1 auto; border-bottom: 1px dotted var(--line); transform: translateY(-4px); min-width: 12px; } .leader > span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* ---------- footer -------------------------------------------------------- */ footer { background: var(--deep); color: var(--deep-ink); padding-block: 64px 40px; } footer a { color: color-mix(in srgb, var(--deep-ink) 78%, var(--deep)); text-decoration: none; font-size: 14.5px; } footer a:hover { color: var(--deep-ink); text-decoration: underline; } .foot-grid { display: grid; gap: 34px; grid-template-columns: 1.6fr repeat(3, minmax(0,1fr)); } @media (max-width: 860px) { .foot-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 520px) { .foot-grid { grid-template-columns: minmax(0,1fr); } } .foot-col h5 { margin: 0 0 14px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--deep-ink) 58%, var(--deep)); font-weight: 640; font-family: var(--sans); } .foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .foot-note { margin-top: 44px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--deep-ink) 16%, var(--deep)); font-size: 13px; color: color-mix(in srgb, var(--deep-ink) 62%, var(--deep)); display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; } /* ---------- state pills --------------------------------------------------- */ .state { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 640; padding: 4px 10px; border-radius: var(--r-full); border: 1px solid currentColor; } .state-executed { color: var(--positive); } .state-live { color: var(--counter); } .state-computed { color: var(--accent); } .state-none { color: var(--accent); } .band-deep .state-executed { color: var(--positive-deep); } .band-deep .state-live, .band-deep .state-computed, .band-deep .state-none { color: var(--deep-accent); } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: absolute; left: -9999px; } .skip:focus { left: 12px; top: 12px; z-index: 200; background: var(--surface); padding: 10px 16px; border-radius: var(--r-sm); }