/* ═══════════════════════════════════════════════════════════════════ Local Reef The page is a water column. You start in sunlit shallows and finish on the floor, and the descent is one continuous gradient on rather than a background per section. The one rule borrowed wholesale from the product: scrims are local. Darkening the whole scene so one line of small text is legible is a bad trade. Where type needs separation it gets a scrim of its own, shaped to the block it protects. ═══════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } :root { /* Water, top to bottom. */ --sunlit: oklch(0.52 0.085 198); --shallow: oklch(0.40 0.075 205); --mid: oklch(0.27 0.060 224); --deep: oklch(0.185 0.047 241); --abyss: oklch(0.115 0.030 252); /* Ink. Never pure white: it sits on water, so it carries the hue. */ --foam: oklch(0.965 0.012 200); --ink: oklch(0.945 0.016 202); --ink-2: oklch(0.815 0.023 205); --ink-3: oklch(0.665 0.028 210); --ink-4: oklch(0.545 0.030 214); /* Living colour, sampled off the reef itself. */ --coral: oklch(0.735 0.170 42); --marigold: oklch(0.855 0.135 80); --anemone: oklch(0.705 0.160 8); --seaglass: oklch(0.825 0.095 188); --rule: oklch(0.98 0.02 200 / 0.14); --rule-soft:oklch(0.98 0.02 200 / 0.075); --glass: oklch(0.85 0.04 210 / 0.055); --mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --sans: "Golos Text", ui-sans-serif, -apple-system, system-ui, sans-serif; --disp: "Bricolage Grotesque", var(--sans); --gut: clamp(1.25rem, 5vw, 4.5rem); --max: 1240px; --out: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out-expo-ish */ --out-q: cubic-bezier(0.22, 1, 0.36, 1); } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; position: relative; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.68; color: var(--ink-2); background-color: var(--abyss); background-image: radial-gradient(1500px 720px at 50% -180px, oklch(0.70 0.085 192 / 0.50), transparent 68%), radial-gradient(900px 500px at 88% 320px, oklch(0.62 0.07 200 / 0.22), transparent 70%), linear-gradient(180deg, var(--shallow) 0%, oklch(0.345 0.070 214) 9%, var(--mid) 26%, oklch(0.225 0.053 232) 42%, var(--deep) 60%, oklch(0.150 0.038 248) 82%, var(--abyss) 100%); background-repeat: no-repeat; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { max-width: 100%; } a { color: inherit; } ::selection { background: oklch(0.735 0.170 42 / 0.34); color: var(--foam); } :focus-visible { outline: 2px solid var(--seaglass); outline-offset: 3px; border-radius: 4px; } /* ─────────────────────────────── atmosphere ─────────────────────── */ .water { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* The shallows are a real painting, not a gradient: the same wallpaper the app ships. It is pushed a long way back on purpose. At full strength it competes with the screenshot beside it, which is also a reef, and the plate stops reading as a screen. Heavily defocused and desaturated, it becomes texture and depth instead of a second picture. */ .reefdrop { position: absolute; top: 0; left: 0; right: 0; height: min(1600px, 175vh); background: url("assets/reef.webp") center 22% / cover no-repeat; filter: blur(7px) saturate(0.42) brightness(0.72); opacity: 0.27; transform: scale(1.06); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 94%); mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 94%); } /* Light shafts. Blurred, because hard-edged bands read as stripes painted on the page rather than as light coming through water. */ .shafts { position: absolute; top: -12vh; left: 0; right: 0; height: 190vh; filter: blur(38px); } .shafts span { position: absolute; top: 0; bottom: 0; left: var(--x); width: var(--w); transform: skewX(var(--tilt)); background: linear-gradient(180deg, oklch(0.97 0.05 195 / var(--o)) 0%, oklch(0.94 0.06 190 / calc(var(--o) * 0.45)) 42%, transparent 88%); } /* Marine snow. Two offset dot fields drifting at different rates. */ .snow { position: fixed; inset: -20% -10%; opacity: 0.5; background-image: radial-gradient(1.4px 1.4px at 18px 26px, oklch(0.98 0.02 200 / .5), transparent 100%), radial-gradient(1px 1px at 122px 88px, oklch(0.98 0.02 200 / .38), transparent 100%), radial-gradient(1.7px 1.7px at 210px 168px, oklch(0.98 0.02 200 / .3), transparent 100%); background-size: 260px 240px, 190px 200px, 320px 300px; animation: drift 46s linear infinite; } @keyframes drift { to { transform: translate3d(-40px, 240px, 0); } } .sprites { position: absolute; width: 0; height: 0; } .shoal { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .fish { position: absolute; top: var(--y); left: 0; width: var(--s); height: auto; aspect-ratio: 3 / 2; overflow: visible; opacity: var(--op, 0.42); filter: drop-shadow(0 8px 16px oklch(0.09 0.03 250 / .55)); animation: swim var(--dur) linear infinite; animation-delay: var(--delay); will-change: transform; } /* The sprites are drawn facing left, so the rightward lane mirrors them. */ @keyframes swim { 0% { transform: translate3d(-14vw, 0, 0) scaleX(-1); } 48% { transform: translate3d(52vw, -3.5vh, 0) scaleX(-1); } 100% { transform: translate3d(118vw, 1.5vh, 0) scaleX(-1); } } .fish.rev { animation-name: swim-rev; } @keyframes swim-rev { 0% { transform: translate3d(118vw, 0, 0) scaleX(1); } 48% { transform: translate3d(46vw, 4vh, 0) scaleX(1); } 100% { transform: translate3d(-16vw, -2vh, 0) scaleX(1); } } /* ──────────────────────────────── nav ───────────────────────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem var(--gut); transition: background 400ms var(--out), backdrop-filter 400ms var(--out), border-color 400ms var(--out); border-bottom: 1px solid transparent; } .nav.stuck { background: oklch(0.16 0.04 240 / 0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom-color: var(--rule-soft); } .mark { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; font-family: var(--disp); font-weight: 650; font-size: 1.0625rem; letter-spacing: -0.015em; color: var(--foam); } .mark img { border-radius: 7px; } .nav nav { display: flex; align-items: center; gap: 0.35rem; } .nav nav a { text-decoration: none; font-size: 0.895rem; color: var(--ink-2); padding: 0.42rem 0.75rem; border-radius: 999px; transition: color 220ms, background 220ms; } .nav nav a:hover { color: var(--foam); background: var(--glass); } .nav nav a.ghost { color: var(--foam); border: 1px solid var(--rule); margin-left: 0.35rem; } .nav nav a.ghost:hover { border-color: oklch(0.98 0.02 200 / .32); } @media (max-width: 700px) { .nav nav a:not(.ghost) { display: none; } } /* ────────────────────────────── depth gauge ─────────────────────── */ .gauge { position: fixed; z-index: 55; right: clamp(1rem, 2.2vw, 2rem); top: 50%; transform: translateY(-50%); display: grid; justify-items: center; gap: 0.85rem; /* Hidden over the hero, where the plate runs to the viewport edge and the gauge would sit on top of the screenshot. */ opacity: 0; pointer-events: none; transition: opacity 500ms var(--out); } .gauge.show { opacity: 1; pointer-events: auto; } .gauge-read { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--ink-3); font-variant-numeric: tabular-nums; } .gauge-read b { color: var(--seaglass); font-weight: 500; } .gauge ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; position: relative; } .gauge ol::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; transform: translateX(-50%); background: var(--rule); } .gauge a { display: block; padding: 3px; position: relative; } .gauge i { display: block; width: 9px; height: 1px; background: oklch(0.98 0.02 200 / .3); transition: width 340ms var(--out), background 340ms; } .gauge a:hover i, .gauge a.on i { width: 19px; background: var(--seaglass); } .gauge a::after { content: attr(data-zone); position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(6px); font-family: var(--mono); font-size: 0.66rem; white-space: nowrap; color: var(--ink-3); opacity: 0; pointer-events: none; transition: opacity 260ms var(--out), transform 260ms var(--out); } .gauge a:hover::after, .gauge a.on::after { opacity: 1; transform: translateY(-50%) translateX(0); } @media (max-width: 1180px) { .gauge { display: none; } } /* ─────────────────────────────── layout ─────────────────────────── */ main { position: relative; z-index: 2; } .wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); } section { position: relative; } h1, h2, h3, h4 { font-family: var(--disp); color: var(--foam); margin: 0; font-weight: 620; letter-spacing: -0.025em; line-height: 1.05; font-variation-settings: "wdth" 94; } p { margin: 0 0 1.05em; max-width: 66ch; } p:last-child { margin-bottom: 0; } code { font-family: var(--mono); font-size: 0.88em; letter-spacing: -0.01em; } p code, li code, figcaption code, h3 code, h4 code { color: var(--seaglass); background: oklch(0.82 0.09 188 / 0.10); padding: 0.1em 0.36em; border-radius: 4px; } h3 code, h4 code { background: none; padding: 0; } .section-head { font-size: clamp(2.05rem, 4.6vw, 3.7rem); max-width: 17ch; margin-bottom: 1.1rem; } .section-lede { font-size: clamp(1.05rem, 1.35vw, 1.22rem); color: var(--ink-2); max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); } /* ──────────────────────────────── hero ──────────────────────────── */ /* A full-bleed grid rather than a centred box with negative margins. `calc(-50vw + 50%)` was tried and is wrong here: inside a grid column the 50% resolves against the column, not the container, so the plate overshot the viewport by 300px and the whole page scrolled sideways. */ .hero { padding: clamp(7rem, 13vh, 9rem) 0 clamp(3rem, 6vw, 5.5rem); display: grid; grid-template-columns: [full-start] minmax(var(--gut), 1fr) [content-start] minmax(0, calc(var(--max) / 2 - var(--gut))) [mid] minmax(0, calc(var(--max) / 2 - var(--gut))) [content-end] minmax(var(--gut), 1fr) [full-end]; align-items: center; } .hero-copy { grid-column: content-start / mid; padding-right: clamp(1.5rem, 4vw, 4rem); position: relative; z-index: 1; } /* Local scrim, the app's own rule. Darkening the whole picture so one line of small text is legible is a bad trade: a strip along the top for the nav, and a soft pool under the copy column. */ .hero::before { content: ""; position: absolute; inset: 0 0 -14% 0; z-index: -1; pointer-events: none; background: /* a strip for the nav */ linear-gradient(180deg, oklch(0.13 0.034 246 / 0.66) 0%, transparent 22%), /* a pool under the copy column */ radial-gradient(48% 72% at 24% 56%, oklch(0.12 0.032 246 / 0.76) 0%, oklch(0.12 0.032 246 / 0.46) 46%, transparent 78%), /* and one under the plate's caption, which otherwise sits on the brightest water on the page and lands at 4.2:1 */ radial-gradient(44% 34% at 74% 94%, oklch(0.11 0.030 246 / 0.72) 0%, oklch(0.11 0.030 246 / 0.34) 52%, transparent 78%); /* Without this the scrim rectangle ends in a visible horizontal seam across the page, which is the exact thing scrims exist to avoid. */ -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 90%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 90%, transparent 100%); } h1 { font-size: clamp(2.45rem, 5.1vw, 4.6rem); line-height: 0.96; letter-spacing: -0.042em; font-weight: 640; font-variation-settings: "wdth" 88; margin-bottom: clamp(1.4rem, 2.6vw, 2rem); display: grid; gap: 0.03em; } h1 span { display: block; } h1 .l1 { color: var(--ink); font-weight: 470; } h1 .l2 { color: var(--coral); } h1 .l3 { color: var(--ink-3); font-weight: 470; font-size: 0.66em; margin-top: 0.3em; } h1 code { font-family: var(--mono); font-size: 0.86em; font-weight: 500; letter-spacing: -0.045em; color: var(--coral); } h1 code.dim { color: var(--ink-4); font-size: 0.94em; text-decoration: line-through; text-decoration-color: oklch(0.735 0.170 42 / 0.55); text-decoration-thickness: 2px; } .lede { font-size: clamp(1.09rem, 1.5vw, 1.32rem); line-height: 1.62; color: var(--ink); max-width: 46ch; margin-bottom: 2.1rem; } .actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 1.6rem; } .btn { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--sans); font-size: 0.94rem; font-weight: 500; padding: 0.72rem 1.15rem; border-radius: 11px; border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: transform 320ms var(--out), background 260ms, border-color 260ms, box-shadow 320ms var(--out); } .btn:hover { transform: translateY(-2px); } .btn.primary { background: var(--coral); color: oklch(0.19 0.05 40); font-weight: 600; box-shadow: 0 8px 24px oklch(0.55 0.16 40 / 0.32); } .btn.primary:hover { background: oklch(0.79 0.165 46); box-shadow: 0 14px 34px oklch(0.55 0.16 40 / 0.42); } .btn.copy { background: oklch(0.85 0.04 210 / 0.07); border-color: var(--rule); color: var(--ink); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .btn.copy:hover { border-color: oklch(0.98 0.02 200 / 0.3); } .btn.copy code { color: var(--ink); font-size: 0.83rem; } .copy-state { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.05em; color: var(--ink-4); border-left: 1px solid var(--rule); padding-left: 0.6rem; } .btn.copy.done .copy-state { color: var(--seaglass); } .meta { font-size: 0.85rem; color: var(--ink-3); max-width: 48ch; } /* ─────────────────────────────── plates ─────────────────────────── */ .plate { margin: 0; } .plate-frame { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid oklch(0.98 0.02 200 / 0.16); /* The dark ring matters: without it a screenshot of a painting sits on a page of water and stops reading as a screen. */ box-shadow: 0 2px 0 oklch(0.99 0.01 200 / 0.10) inset, 0 0 0 5px oklch(0.10 0.028 250 / 0.55), 0 40px 90px -28px oklch(0.06 0.025 250 / 0.9), 0 8px 30px -10px oklch(0.06 0.025 250 / 0.6); line-height: 0; } .plate-frame img { width: 100%; height: auto; display: block; } /* A faint sheen so a screenshot reads as an object under water rather than a rectangle pasted over the page. */ .plate-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(158deg, oklch(0.98 0.03 195 / 0.10) 0%, transparent 34%, transparent 76%, oklch(0.10 0.03 250 / 0.20) 100%); } .plate figcaption { margin-top: 0.95rem; padding-top: 0.7rem; border-top: 1px solid var(--rule-soft); font-family: var(--mono); font-size: 0.755rem; line-height: 1.65; letter-spacing: 0.005em; color: var(--ink-2); max-width: 62ch; } .plate figcaption b { color: var(--seaglass); font-weight: 500; } .plate figcaption code { color: var(--ink-2); } /* The plate runs off the right edge of the viewport. A screenshot contained inside the grid reads as a thumbnail; one that leaves the page reads as a window onto something larger. */ .hero-plate { grid-column: mid / full-end; position: relative; z-index: 0; } .hero-plate .plate-frame { border-radius: 16px 0 0 16px; } .hero-plate figcaption { max-width: 46ch; padding-right: var(--gut); } @media (max-width: 1080px) { .hero { grid-template-columns: [full-start] var(--gut) [content-start mid] minmax(0, 1fr) [content-end] var(--gut) [full-end]; row-gap: clamp(2.75rem, 6vw, 4.5rem); } .hero-copy { grid-column: content-start / content-end; padding-right: 0; } .hero-plate { grid-column: content-start / content-end; } .hero-plate .plate-frame { border-radius: 16px; } .hero-plate figcaption { padding-right: 0; } .hero::before { inset: 0; } } /* ───────────────────────────── the problem ──────────────────────── */ .problem { padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(2.5rem, 5vw, 4rem); } .two { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; } .two h2 { font-size: clamp(1.9rem, 4vw, 3.15rem); margin-bottom: 1.2rem; } .two p { color: var(--ink-2); } .two b { color: var(--ink); font-weight: 600; } .resolve { list-style: none; margin: 0.4rem 0 0 auto; padding: 0; display: grid; max-width: 30rem; } .resolve li { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(0.6rem, 1.6vw, 1.4rem); padding: 0.95rem 0; border-bottom: 1px solid var(--rule-soft); } .resolve li:first-child { border-top: 1px solid var(--rule-soft); } .resolve code { font-size: clamp(0.78rem, 1.15vw, 0.95rem); letter-spacing: -0.01em; background: none; /* not a form field; it is a before and after */ padding: 0; } .resolve .from { color: var(--ink-4); text-align: right; transition: color 600ms var(--out), opacity 600ms var(--out); } .resolve .to { color: var(--ink-4); font-weight: 500; opacity: 0.35; transition: color 700ms var(--out), opacity 700ms var(--out); } .resolve i { width: 26px; height: 1px; background: var(--rule); position: relative; transition: background 600ms; } .resolve i::after { content: ""; position: absolute; right: 0; top: -2.5px; border: 3px solid transparent; border-left-color: oklch(0.98 0.02 200 / .3); transition: border-left-color 600ms; } .resolve.lit .from { color: var(--ink-4); opacity: 0.4; text-decoration: line-through; } .resolve.lit .to { color: var(--marigold); opacity: 1; } .resolve.lit i { background: oklch(0.855 0.135 80 / 0.4); } .resolve.lit i::after { border-left-color: var(--marigold); } .resolve li:nth-child(2) .to { transition-delay: 110ms; } .resolve li:nth-child(3) .to { transition-delay: 220ms; } .resolve li:nth-child(4) .to { transition-delay: 330ms; } /* ────────────────────────────── specimens ───────────────────────── */ .apps { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(4rem, 9vw, 7rem); } .apps .section-head { margin-bottom: clamp(1.75rem, 3.5vw, 3rem); } .specimen { display: grid; grid-template-columns: minmax(0, 128px) minmax(0, 1fr); gap: clamp(1.25rem, 3.5vw, 3rem); padding: clamp(2.2rem, 4.5vw, 3.4rem) 0; border-top: 1px solid var(--rule-soft); align-items: start; } .specimen:last-child { border-bottom: 1px solid var(--rule-soft); } .specimen-num { font-family: var(--disp); font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 340; font-variation-settings: "wdth" 84; line-height: 0.8; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; color: oklch(0.775 0.165 44 / 0.9); position: sticky; top: 6rem; } .specimen.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 128px); } .specimen.flip .specimen-num { grid-column: 2; grid-row: 1; text-align: right; } .specimen.flip .specimen-body { grid-column: 1; grid-row: 1; } .specimen h3 { font-size: clamp(1.45rem, 2.5vw, 2.05rem); margin-bottom: 0.85rem; } .specimen p { color: var(--ink-2); max-width: 60ch; } .aside { font-size: 0.93rem; color: var(--ink-3); border-top: 1px solid var(--rule-soft); padding-top: 0.85rem; margin-top: 1.2rem; } @media (max-width: 720px) { .specimen, .specimen.flip { grid-template-columns: 1fr; } .specimen.flip .specimen-num, .specimen.flip .specimen-body { grid-column: 1; grid-row: auto; text-align: left; } .specimen-num { position: static; font-size: 2.4rem; } } /* code blocks */ pre { margin: 1.4rem 0; padding: 1.1rem 1.25rem; border-radius: 12px; border: 1px solid var(--rule-soft); background: oklch(0.13 0.032 248 / 0.66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); overflow-x: auto; font-size: 0.84rem; line-height: 1.75; color: var(--ink-2); max-width: 62ch; } pre code { font-size: inherit; color: inherit; background: none; padding: 0; } pre .k { color: var(--seaglass); } pre .s { color: var(--marigold); } pre .p { color: var(--ink-4); } pre .c { color: var(--ink-4); font-style: italic; } pre .cmd { color: var(--foam); } pre .ok { color: oklch(0.80 0.14 155); } pre.term { background: oklch(0.10 0.028 250 / 0.78); } .infer { margin-top: 1.6rem; max-width: 60ch; } .infer div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.78rem 0; border-top: 1px solid var(--rule-soft); } .infer div:last-child { border-bottom: 1px solid var(--rule-soft); } .infer code { font-size: 0.86rem; color: var(--seaglass); background: oklch(0.82 0.09 188 / 0.10); padding: 0.12em 0.4em; border-radius: 4px; } .infer span { font-size: 0.9rem; color: var(--ink-3); } /* ───────────────────────────── the gateway ──────────────────────── */ .how { padding: clamp(4rem, 9vw, 8rem) 0; } .diagram-plate { margin-bottom: clamp(3rem, 6vw, 5rem); } .diagram { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--rule-soft); background: oklch(0.13 0.033 246 / 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 0.5rem; box-shadow: 0 30px 70px -34px oklch(0.08 0.03 250 / 0.8); } .diagram text { font-family: var(--sans); font-size: 13px; fill: var(--ink-2); } .diagram .mono { font-family: var(--mono); font-size: 12px; } .diagram .tiny { font-size: 10.5px; letter-spacing: 0.02em; } .diagram .dim { fill: var(--ink-4); } .diagram .hl { fill: var(--seaglass); } .diagram .ttl { font-family: var(--disp); font-size: 15px; font-weight: 620; fill: var(--foam); } .diagram rect { fill: oklch(0.98 0.02 200 / 0.035); stroke: var(--rule); stroke-width: 1; } .diagram .d-gate rect { fill: oklch(0.735 0.170 42 / 0.07); stroke: oklch(0.735 0.170 42 / 0.40); } .diagram .d-gate line { stroke: var(--rule); stroke-width: 1; } .diagram .d-links { color: oklch(0.855 0.135 80 / 0.75); } .diagram .d-links path { stroke: oklch(0.855 0.135 80 / 0.55); stroke-width: 1.25; fill: none; } .diagram .d-links text { fill: var(--ink-4); } /* Narrow: the diagram scrolls inside its own box. The page must never scroll sideways, and the caption must not scroll with the drawing. */ .diagram-scroll { overflow-x: auto; } @media (max-width: 780px) { .diagram { min-width: 640px; } } .grid-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1.5rem, 3vw, 2.75rem); margin-bottom: clamp(3.5rem, 7vw, 6rem); } .grid-notes > div { border-top: 1px solid var(--rule); padding-top: 1.1rem; } .grid-notes h3 { font-size: 1.02rem; font-weight: 620; letter-spacing: -0.012em; margin-bottom: 0.6rem; } .grid-notes p { font-size: 0.93rem; color: var(--ink-3); } /* ───────────────────────────── field notes ──────────────────────── */ .notes { padding: clamp(4rem, 9vw, 8rem) 0; } .entries { list-style: none; counter-reset: e; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(1.75rem, 4vw, 3.25rem); } .entries li { counter-increment: e; position: relative; padding-top: 1.5rem; border-top: 1px solid var(--rule); } .entries li::before { content: counter(e, decimal-leading-zero); position: absolute; top: 1.35rem; right: 0; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-4); } .tag { display: inline-block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--coral); margin-bottom: 0.7rem; } .entries h3 { font-size: 1.28rem; margin-bottom: 0.65rem; line-height: 1.22; } .entries p { font-size: 0.955rem; color: var(--ink-3); } .pull { margin: clamp(3.5rem, 7vw, 6rem) 0 0; padding: clamp(2rem, 4vw, 3rem) 0 0; border-top: 1px solid var(--rule); max-width: 44ch; } .pull p { font-family: var(--disp); font-size: clamp(1.5rem, 3.2vw, 2.5rem); font-weight: 500; font-variation-settings: "wdth" 92; line-height: 1.14; letter-spacing: -0.028em; color: var(--marigold); margin-bottom: 1.1rem; max-width: none; } .pull cite { display: block; font-style: normal; font-size: 0.9rem; color: var(--ink-4); line-height: 1.65; } /* ───────────────────────────── contribute ───────────────────────── */ .contribute { padding: clamp(4rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem); } .start { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: clamp(2rem, 5vw, 4.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--rule); } .start h3 { font-size: 1.35rem; margin-bottom: 0.9rem; } .start p { font-size: 0.955rem; color: var(--ink-3); } .start-rules p + p { margin-top: 1rem; } .start-rules b { color: var(--ink); font-weight: 600; } .start pre { max-width: none; } .want-head { font-size: clamp(1.35rem, 2.4vw, 1.85rem); margin: clamp(3rem, 6vw, 4.5rem) 0 1.75rem; } .wants { list-style: none; margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0 clamp(2rem, 4vw, 3.5rem); } .wants li { padding: 1.4rem 0; border-top: 1px solid var(--rule-soft); } .wants h4 { font-size: 1.06rem; font-weight: 620; letter-spacing: -0.014em; line-height: 1.3; margin: 0.55rem 0 0.5rem; } .wants p { font-size: 0.91rem; color: var(--ink-3); } .lvl { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 5px; } .lvl.a { color: oklch(0.84 0.13 158); background: oklch(0.72 0.15 158 / 0.13); } .lvl.b { color: var(--marigold); background: oklch(0.855 0.135 80 / 0.13); } .lvl.c { color: var(--anemone); background: oklch(0.705 0.160 8 / 0.15); } /* An index at the back of the guide, not four more cards. */ .ways { list-style: none; margin: 0; padding: 0; } .ways li { border-top: 1px solid var(--rule-soft); } .ways li:last-child { border-bottom: 1px solid var(--rule-soft); } .ways a { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; align-items: baseline; gap: 0.35rem 1.5rem; padding: 1.05rem 0.25rem 1.15rem 0; text-decoration: none; transition: padding-left 380ms var(--out), color 240ms; } .ways a:hover { padding-left: 0.85rem; } .ways b { font-family: var(--disp); font-size: 1.05rem; font-weight: 620; color: var(--foam); letter-spacing: -0.014em; } .ways span { font-size: 0.92rem; color: var(--ink-3); line-height: 1.55; } .ways a::after { content: "↗"; color: var(--coral); opacity: 0.35; transition: opacity 260ms, transform 380ms var(--out); } .ways a:hover::after { opacity: 1; transform: translate(2px, -2px); } @media (max-width: 640px) { .ways a { grid-template-columns: minmax(0, 1fr) auto; } .ways b { grid-column: 1; } .ways span { grid-column: 1 / -1; } .ways a::after { grid-column: 2; grid-row: 1; } } /* ────────────────────────────── the floor ───────────────────────── */ .floor { position: relative; z-index: 2; padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--rule-soft); /* Something is down here. Two cold lights off the floor, so the bottom of the page is dark rather than empty. */ background: radial-gradient(60% 110% at 50% 132%, oklch(0.34 0.08 218 / 0.42), transparent 68%), radial-gradient(26% 60% at 14% 118%, oklch(0.42 0.09 196 / 0.20), transparent 70%), radial-gradient(22% 50% at 84% 124%, oklch(0.40 0.11 300 / 0.14), transparent 72%); } .floor .wrap { display: grid; gap: 1.75rem; } .floor-mark { display: flex; align-items: center; gap: 0.95rem; } .floor-mark img { border-radius: 12px; } .floor-mark b { display: block; font-family: var(--disp); font-size: 1.1rem; font-weight: 650; color: var(--foam); letter-spacing: -0.015em; } .floor-mark span { font-size: 0.9rem; color: var(--ink-4); } .floor-links { display: flex; flex-wrap: wrap; gap: 1.5rem; } .floor-links a { font-size: 0.9rem; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 240ms, color 240ms; } .floor-links a:hover { color: var(--foam); border-bottom-color: var(--coral); } .floor-note { font-size: 0.845rem; color: var(--ink-3); max-width: 58ch; } .floor-note a { color: var(--ink-3); text-decoration-color: var(--rule); } .floor-note a:hover { color: var(--seaglass); } /* ───────────────────────────── scroll reveal ────────────────────── */ .rise { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 900ms var(--out), transform 900ms var(--out); } .rise.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; transition: none; } .snow, .fish { animation: none; } .fish { opacity: 0.34; } .btn:hover { transform: none; } } /* ─────────────────────────────── narrow ─────────────────────────── */ @media (max-width: 860px) { .two { grid-template-columns: 1fr; } .resolve { margin-top: 0.5rem; } } @media (max-width: 560px) { body { font-size: 1rem; } h1 .l3 { font-size: 0.5em; } .resolve li { grid-template-columns: 1fr auto 1fr; } .actions .btn { width: 100%; justify-content: space-between; } }