/* Martingale — site stylesheet Session 1 skeleton: tokens (§1), typography (§2), quality floor (§9). No JavaScript this session; all content is statically visible. */ @import url("fonts.css"); /* ------------------------------------------------------------------ * * 1. Tokens (martingale-design §1) * ------------------------------------------------------------------ */ :root { /* Color — the entire palette. Never add a color. */ --paper: #F4F2ED; --ink: #141414; --navy: #1F3A5F; --navy-ink: #0F1D30; --moss: #2E4A3D; /* resource thumbnails only */ --indigo: #3A3F6E; /* resource thumbnails only */ --rule: color-mix(in srgb, var(--ink) 15%, transparent); --rule-light: color-mix(in srgb, var(--paper) 20%, transparent); /* Type scale — clamp() for fluid display sizes */ --text-xs: 0.8125rem; --text-s: 0.9375rem; --text-m: 1.125rem; --text-l: clamp(1.4rem, 2.5vw, 1.75rem); --text-xl: clamp(2.2rem, 5vw, 3.5rem); --text-2xl: clamp(3rem, 8vw, 5.5rem); /* Space */ --section-gap: clamp(6rem, 14vh, 11rem); --content-max: 1200px; --prose-max: 34rem; --gutter: clamp(1.25rem, 5vw, 3rem); /* Left rail shared by the nav wordmark + hero text: they break out of the centered 1200 content rail onto this outer-gutter rail so the hero text sits toward the viewport margin (revealing more of the image on the right). BOTH use it, so wordmark left edge = headline left edge at every width/zoom. */ --hero-rail: clamp(1.25rem, 5vw, 3rem); --radius: 0px; --serif: "Source Serif 4", Georgia, "Times New Roman", serif; --sans: "Source Sans 3", system-ui, -apple-system, sans-serif; --mono: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace; --frame-max: 1920px; /* total composition caps here, centered; paper beyond */ } /* ------------------------------------------------------------------ * * Reset * ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } /* Paper fills the whole viewport; the composition itself is a centered 1920px page frame (body). Every full-bleed section (hero image/canvas/wash, navy-ink manifesto + footer) is a child of body, so all bleed only to the frame edges — beyond 1920px both sides get equal paper margins and the whole thing centers as one unit. Content (`.wrap` 1200, `.docs-shell`) still centers within the frame, so the wordmark stays directly above the headline. */ /* Horizontal clip lives on as `clip` (not `hidden`): it stops any full-viewport bleed from spawning a horizontal scrollbar WITHOUT establishing a scroll container, so `position: sticky` inside still works. It must NOT sit on , whose 1920px cap would otherwise clip a 100vw bleed back to the frame. */ html { -webkit-text-size-adjust: 100%; background: var(--paper); overflow-x: clip; } body { max-width: var(--frame-max); margin-inline: auto; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--text-m); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } a { color: inherit; } button { font: inherit; color: inherit; } /* ------------------------------------------------------------------ * * 2. Typography roles (martingale-design §2) * Serif = display only. Sans = body. Mono = everything utility. * ------------------------------------------------------------------ */ .serif { font-family: var(--serif); } .mono { font-family: var(--mono); } /* Display headlines: emphasis phrase carries weight + slope contrast */ .display { font-family: var(--serif); font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; } .display em { font-weight: 600; font-style: italic; } /* Mono utility text */ .kicker { font-family: var(--mono); font-weight: 500; font-size: var(--text-xs); letter-spacing: 0.02em; color: var(--navy); } .eyebrow { color: color-mix(in srgb, var(--ink) 62%, transparent); } .prose { font-family: var(--sans); font-weight: 400; font-size: var(--text-m); line-height: 1.6; max-width: var(--prose-max); } /* ------------------------------------------------------------------ * * Layout helpers * ------------------------------------------------------------------ */ .wrap { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: calc(var(--section-gap) * 0.6); } .section--dark { background: var(--navy-ink); color: var(--paper); } /* Skip link */ .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: var(--text-s); padding: 0.6rem 1rem; z-index: 100; } .skip:focus { left: 0; } /* ------------------------------------------------------------------ * * Buttons & links (mono; hover inverts) * ------------------------------------------------------------------ */ .btn { display: inline-block; font-family: var(--mono); font-weight: 500; font-size: var(--text-s); letter-spacing: 0.01em; text-decoration: none; padding: 0.7rem 1.15rem; border: 1px solid var(--ink); background: transparent; color: var(--ink); border-radius: var(--radius); white-space: nowrap; cursor: pointer; transition: background 150ms ease, color 150ms ease; } .btn:hover { background: var(--ink); color: var(--paper); } .btn--onDark { border-color: var(--paper); color: var(--paper); } .btn--onDark:hover { background: var(--paper); color: var(--navy-ink); } .tlink { font-family: var(--mono); font-size: var(--text-s); text-decoration: none; color: inherit; position: relative; padding-bottom: 2px; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 150ms ease; } .tlink:hover { background-size: 100% 1px; } /* Focus-visible — navy, everywhere (quality floor §9) */ :focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; } .section--dark :focus-visible, .hero :focus-visible { outline-color: var(--paper); } /* ------------------------------------------------------------------ * * Nav * ------------------------------------------------------------------ */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 90%, transparent); border-bottom: 1px solid var(--rule); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; padding-block: 0.75rem; /* off the centered 1200 rail onto the shared --hero-rail (see hero__inner) so the wordmark sits directly above the headline; links go to the right gutter */ max-width: none; margin-inline: 0; padding-inline: var(--hero-rail) var(--gutter); } .wordmark { font-family: var(--mono); font-weight: 500; font-size: var(--text-m); letter-spacing: 0.02em; text-decoration: none; color: var(--ink); } .nav__links { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); } /* ------------------------------------------------------------------ * * Hero (full-bleed dithered background; static this session) * ------------------------------------------------------------------ */ .hero { position: relative; min-height: min(92vh, 820px); display: flex; align-items: center; background-color: var(--navy-ink); background-image: url("../../assets/hero-dither.png"); background-size: cover; background-position: center 30%; overflow: hidden; } /* WebGL2 cursor-resolve canvas (§4). Sits above the static PNG (which is the reduced-motion / no-WebGL2 fallback) and below the wash + text. Inserted by JS only when active, so no canvas paints when JS is off or motion reduced. */ .hero__canvas { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; } /* Localized text-protection wash: the ONE sanctioned exception to the gradient ban (§8). Solid paper behind the text column, fading to transparent just PAST the horizontal centre so the crisp duotone shows on the right. The stops are anchored to `50%` (+ a fixed offset), not a raw viewport %, so they track the centred hero container — the text (in `.wrap`, centred at 1200px) always ends near 50% + a fixed amount, so the wash covers it at every width instead of drifting. z-index keeps it above the canvas, below the text. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; /* Left-anchored to the text rail (not viewport centre): solid paper covers the text column — rail + its max width — then fades, so the crisp duotone shows across the right ~55-60%. Anchoring to --hero-rail + a rem width (not %) keeps the text protected at every viewport instead of drifting. */ background: linear-gradient(90deg, var(--paper) 0, var(--paper) calc(var(--hero-rail) + 29rem), transparent calc(var(--hero-rail) + 37rem)); pointer-events: none; } /* Hero content shares the SAME left rail as the nav wordmark (`--hero-rail`, set on both `.nav__inner` and here), so the wordmark's left edge and the headline's first character sit on one rail at every viewport/zoom. Both break out of the centered 1200 `.wrap` onto the outer-gutter rail — pulling the text toward the margin and freeing the right side for the image. (They must stay in lock-step: change the rail on ONE only and the wordmark drifts off the headline.) */ .hero__inner { position: relative; z-index: 2; padding-block: clamp(5rem, 12vh, 9rem); max-width: none; margin-inline: 0; padding-inline: var(--hero-rail) var(--gutter); } .hero__headline { font-size: var(--text-2xl); max-width: 14ch; } .hero__subhead { font-family: var(--mono); font-size: var(--text-l); line-height: 1.45; /* narrower column than before (was 38ch) — less text width, more image */ max-width: 28rem; margin-top: 1.6rem; color: var(--ink); } .hero__cta { margin-top: 2.4rem; } /* ------------------------------------------------------------------ * * Pipeline (Anchor →(p)→ Express → Warehouse) * A schematic three-stage FLOW, not a row of equal boxes: three framed node * motifs (figure line-work grammar) joined left-to-right by directional * connectors; each stage's title + body sit BENEATH its node. Grid areas lay * out n1 c1 n2 c2 n3 / t1 . t2 . t3 on desktop and reflow to a single * vertical column at ≤768px (connectors flip from → to ↓). See §5/§7 in skill. * ------------------------------------------------------------------ */ .pipeline { --node-h: clamp(94px, 10.5vw, 124px); display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; grid-template-areas: "n1 c1 n2 c2 n3" "t1 . t2 . t3"; column-gap: clamp(0.5rem, 1.4vw, 1rem); row-gap: clamp(1.1rem, 1.8vw, 1.5rem); align-items: start; } .pl-n1 { grid-area: n1; } .pl-n2 { grid-area: n2; } .pl-n3 { grid-area: n3; } .pl-t1 { grid-area: t1; } .pl-t2 { grid-area: t2; } .pl-t3 { grid-area: t3; } .pl-c1 { grid-area: c1; } .pl-c2 { grid-area: c2; } /* Node: a framed box holding the drawn-for-purpose motif (paper bg, 1px rule, square corners — the figure grammar). */ .pipeline__node { height: var(--node-h); border: 1px solid var(--rule); background: var(--paper); padding: clamp(0.5rem, 1vw, 0.9rem); display: flex; } .pipeline__node svg { width: 100%; height: 100%; display: block; } .pipeline__title { font-family: var(--mono); font-weight: 500; font-size: var(--text-m); letter-spacing: 0.02em; margin-bottom: 0.6rem; } .pipeline__body { font-family: var(--sans); font-size: var(--text-s); line-height: 1.55; } .pipeline__body em, .prose em, .manifesto em, .mech__body em { font-style: italic; } /* Connector: a directional flow line drawn with borders (not SVG) so it flips horizontal → vertical for the mobile reflow. Centred on the node band. */ .pipeline__conn { grid-row: 1; position: relative; height: var(--node-h); width: clamp(22px, 4vw, 56px); } .pipeline__conn::before { /* the flow line (horizontal) */ content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px solid var(--navy); transform: translateY(-50%); } .pipeline__conn::after { /* arrowhead → */ content: ""; position: absolute; top: 50%; right: -1px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid var(--navy); transform: translateY(-50%); } .pipeline__plabel { /* the "p" the anchor produces, above the line */ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -155%); font-family: var(--mono); font-style: italic; font-size: var(--text-s); color: var(--navy); background: var(--paper); padding: 0 0.28rem; line-height: 1; } .pipeline__plabel em { font-style: italic; } /* ------------------------------------------------------------------ * * Dark manifesto — sticky text over a scrolling probability field (§5) * ------------------------------------------------------------------ */ /* NB: no overflow:hidden here — it would break `position: sticky` below. The field is inset:0 (never overflows the section), so no clip is needed. */ /* True viewport full-bleed: the navy band must reach the viewport edges at EVERY zoom/width, escaping the 1920px body frame (only the TEXT respects the rail). Left edge lands at viewport 0 regardless of the frame's width; 's overflow-x: clip absorbs the scrollbar-width overshoot of 100vw. */ .manifesto { position: relative; width: 100vw; margin-left: calc(50% - 50vw); } /* faint probability field (2D canvas), inserted by JS — fills the ENTIRE section edge-to-edge (the atmospheric plane behind everything). */ .manifesto__field { position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none; } .manifesto__inner { position: relative; z-index: 1; max-width: 52rem; } /* The effect: a taller-than-viewport section whose text is pinned + centred in a viewport-height frame while the field scrolls (and resolves) behind it. Gated on no-preference so reduced-motion keeps a normal-height section, text in flow, static field. */ @media (prefers-reduced-motion: no-preference) { .manifesto { min-height: 135vh; padding-block: 0; } .manifesto__inner { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; } } .manifesto p { font-family: var(--mono); /* Bumped up so the type is present and commands the pinned frame. Ceiling is held where all three paragraphs still fit inside the 100vh sticky frame at 1440 (measured); the low end keeps them fitting at 390. */ font-size: clamp(1.0625rem, 1.9vw, 1.5rem); line-height: 1.45; color: color-mix(in srgb, var(--paper) 90%, transparent); } .manifesto p + p { margin-top: 1.35rem; } /* selectors carry .manifesto p specificity so they win over the mono base */ .manifesto p.manifesto__turn { font-family: var(--serif); font-weight: 400; font-style: normal; font-size: clamp(1.75rem, 3.2vw, 2.35rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--paper); margin-block: clamp(2rem, 5vh, 3.5rem); } .manifesto p.manifesto__turn em { font-weight: 600; font-style: italic; } .manifesto p.manifesto__coda { font-family: var(--mono); font-size: var(--text-l); color: var(--paper); margin-top: clamp(2rem, 5vh, 3.5rem); } /* ------------------------------------------------------------------ * * Mechanism sections (×4, alternating sides) * ------------------------------------------------------------------ */ .mech { display: grid; grid-template-columns: 1.08fr 0.92fr; align-items: center; gap: clamp(2rem, 6vw, 5rem); } .mech + .mech { margin-top: var(--section-gap); } .mech__text { max-width: 60ch; } /* .mech scope raises specificity above .display so the greedy fill below wins */ .mech .mech__head { /* eased down from --text-xl so long compounds ("manipulation-resistant") stay intact on one line in the half-width column */ font-size: clamp(1.9rem, 3.1vw, 2.7rem); /* greedy fill (not balance/pretty): keeps hyphenated compounds like "manipulation-resistant" whole rather than rebalancing across the hyphen. NB: must be `wrap`, not `normal` — `normal` is not a valid text-wrap value */ text-wrap: wrap; margin-top: 0.9rem; } .mech__body { max-width: var(--prose-max); } .mech__body { font-family: var(--sans); font-size: var(--text-m); line-height: 1.6; margin-top: 1.1rem; } .mech__body .f { font-family: var(--mono); font-size: 0.95em; white-space: nowrap; } /* alternate image to the left on even mechanisms */ .mech--flip .mech__text { order: 2; } .mech--flip .mech__figure { order: 1; } /* Native mechanism figures: SVG line-work (Layers 1/2/4) + one mono ledger (Solvency), rendered inside the design system — paper bg, navy data lines, ink annotations, mono labels, 1px rules, square corners, no gradients. */ .figure { border: 1px solid var(--rule); padding: clamp(0.75rem, 1.4vw, 1.1rem); background: var(--paper); } .fig { display: block; width: 100%; height: auto; } .fig text { font-family: var(--mono); } /* 1px lines that stay 1px at every render size */ .fig-axis { fill: none; stroke: color-mix(in srgb, var(--ink) 42%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; } .fig-grid { fill: none; stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; } .fig-line { fill: none; stroke: var(--navy); stroke-width: 1.75; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; } .fig-line--dot { stroke-width: 1.5; stroke-dasharray: 1 4.5; } .fig-line--dash { stroke-width: 1.5; stroke-dasharray: 8 5; } .fig-line--ghost { stroke-width: 1.4; stroke-dasharray: 3 4; opacity: 0.5; } .fig-line--cand { stroke-width: 1.6; stroke-dasharray: 7 5; opacity: 0.7; } .fig-mark { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 4 3; } .fig-dot { fill: var(--navy); } .fig-tick { fill: color-mix(in srgb, var(--ink) 55%, transparent); font-size: 15px; } .fig-key { fill: var(--navy); font-size: 15.5px; } .fig-anno { fill: var(--ink); font-size: 15.5px; } /* Solvency verification ledger */ .ledger-wrap { width: 100%; } .ledger-title { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: color-mix(in srgb, var(--ink) 55%, transparent); padding-bottom: 0.9rem; border-bottom: 1px solid var(--rule); } .ledger-invariant { font-family: var(--mono); font-size: var(--text-s); line-height: 1.5; color: var(--navy); padding: 1rem 0; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; } .ledger { width: 100%; border-collapse: collapse; } .ledger td { font-family: var(--mono); text-align: left; vertical-align: top; padding: 0.7rem 0; border-bottom: 1px solid var(--rule); } .ledger tr:last-child td { border-bottom: 0; } .ledger .k { font-size: var(--text-xs); color: color-mix(in srgb, var(--ink) 58%, transparent); white-space: nowrap; padding-right: 1.1rem; } .ledger .v { font-size: var(--text-s); color: var(--ink); } .ledger .v b { font-weight: 500; color: var(--navy); } .ledger-note { font-family: var(--mono); font-size: var(--text-xs); color: color-mix(in srgb, var(--ink) 50%, transparent); padding-top: 0.9rem; border-top: 1px solid var(--rule); } .figcaption { font-family: var(--mono); font-size: var(--text-xs); color: color-mix(in srgb, var(--ink) 58%, transparent); margin-top: 0.7rem; } /* ------------------------------------------------------------------ * * Resources grid * ------------------------------------------------------------------ */ .section__head { margin-bottom: clamp(2rem, 5vh, 3.25rem); } .section__title { font-family: var(--serif); font-weight: 400; font-size: var(--text-xl); text-wrap: balance; } .resources { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); } .res { grid-column: span 1; display: flex; flex-direction: column; border: 1px solid var(--rule); text-decoration: none; color: inherit; background: var(--paper); } .res--large { grid-column: span 3; } .res--large .res__thumb { aspect-ratio: 21 / 6; } .res__thumb { aspect-ratio: 4 / 3; background: var(--navy); } .res__thumb--navy { background: var(--navy); } .res__thumb--moss { background: var(--moss); } .res__thumb--indigo { background: var(--indigo); } .res__meta { padding: 1.15rem 1.25rem 1.4rem; } .res__title { font-family: var(--mono); font-weight: 500; font-size: var(--text-s); line-height: 1.4; } .res--large .res__title { font-size: var(--text-m); } .res__byline { font-family: var(--mono); font-size: var(--text-xs); color: color-mix(in srgb, var(--ink) 55%, transparent); margin-top: 0.7rem; } .res:hover .res__title { text-decoration: underline; text-underline-offset: 3px; } /* ------------------------------------------------------------------ * * Footer * ------------------------------------------------------------------ */ .footer { padding-block: calc(var(--section-gap) * 0.55); } .footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem 3rem; } .footer__brand { max-width: 26ch; } .footer__wordmark { font-family: var(--mono); font-weight: 500; font-size: var(--text-l); letter-spacing: 0.02em; } .footer__line { font-family: var(--serif); font-style: italic; font-size: var(--text-l); margin-top: 0.9rem; color: var(--paper); } .footer__cols { display: flex; gap: clamp(2rem, 6vw, 4.5rem); flex-wrap: wrap; } .footer__col h3 { font-family: var(--mono); font-weight: 500; font-size: var(--text-xs); letter-spacing: 0.02em; color: color-mix(in srgb, var(--paper) 60%, transparent); margin-bottom: 1rem; } .footer__col ul { list-style: none; padding: 0; } .footer__col li + li { margin-top: 0.6rem; } /* ------------------------------------------------------------------ * * Responsive (quality floor §9 — down to 360px) * ------------------------------------------------------------------ */ @media (max-width: 900px) { /* text spans more width here — extend the wash so the whole column clears */ .hero::before { background: linear-gradient(90deg, var(--paper) 0%, var(--paper) 64%, transparent 100%); } .mech { grid-template-columns: 1fr; } .mech__text, .mech--flip .mech__text { order: 1; } .mech__figure, .mech--flip .mech__figure { order: 2; } .resources { grid-template-columns: 1fr 1fr; } .res--large { grid-column: span 2; } } /* Pipeline reflow: horizontal flow → vertical flow. Nodes stack, each with its text beneath, and the connectors become downward arrows between stages. */ @media (max-width: 768px) { .pipeline { grid-template-columns: 1fr; grid-template-areas: "n1" "t1" "c1" "n2" "t2" "c2" "n3" "t3"; row-gap: clamp(0.9rem, 3vw, 1.4rem); } .pipeline__conn { /* full-width band holding a ↓ arrow */ grid-row: auto; height: clamp(34px, 9vw, 50px); width: 100%; } .pipeline__conn::before { /* line becomes vertical */ top: 0; bottom: 0; left: 50%; right: auto; border-top: 0; border-left: 1px solid var(--navy); transform: translateX(-50%); } .pipeline__conn::after { /* arrowhead points down */ top: auto; bottom: -1px; left: 50%; right: auto; border-top: 7px solid var(--navy); border-bottom: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; transform: translateX(-50%); } .pipeline__plabel { /* p sits beside the vertical line */ left: 50%; top: 50%; transform: translate(-195%, -50%); } } @media (max-width: 560px) { /* inline nav stays inline (no hamburger) with 3 items — compress to fit 390 */ .nav__links { gap: 0.6rem; } .nav__links .tlink { font-size: var(--text-xs); } .wordmark { font-size: var(--text-xs); } .nav .btn { padding: 0.5rem 0.6rem; font-size: var(--text-xs); } .resources { grid-template-columns: 1fr; } .res, .res--large { grid-column: span 1; } .res--large .res__thumb { aspect-ratio: 16 / 9; } .hero__subhead { font-size: var(--text-m); } .footer__top { flex-direction: column; } } @media (max-width: 400px) { /* nav is only 2 items now (Docs + CTA); keep the FULL gutter so the wordmark stays on the same rail as the hero headline. Only tighten the link gap. */ .nav__links { gap: 0.5rem; } } /* ------------------------------------------------------------------ * * Reduced motion — static already, but honor the contract * ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }