/* ============================================================ FREEBOARD — cream glass over a hull at its waterline. One photograph runs behind every page, fixed, so the same region sits behind every section. Bands are thin; every word sits on a surface of its own (card, sheet, well, chip) and never on the bare photograph — which is the pattern that is neither flat nor illegible, and the thing that went wrong on the sibling this is measured against. Colours come from css/tokens.css, which is GENERATED by tools/palette.mjs out of this photograph's own hues, with 43 pairs proved. Nothing here invents a colour. If a value in tokens.css looks wrong, re-run the solver; editing it makes the proof a proof about something else. Measured against usevynex.org in the same browser run by tools/shots.mjs (painted pixels: flat%, chroma, busy) and by tools/contrast.mjs (every text node, with a planted control that must fail). THE DIVISION OF SURFACES, which the palette proof depends on: .sheet (s-1, 0.72) display type and graphics ONLY .card (s-2, 0.90) body text .slab (s-3, 0.96) dense figures and tables .well (s-sink) inset inside a card, amber A body paragraph on .sheet is a contrast failure waiting to happen, and tools/contrast.mjs will find it. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } :root { --r: 26px; --r-sm: 16px; --r-xs: 10px; --maxw: 1180px; --pad: 26px; --serif: "Fraunces", "Iowan Old Style", Georgia, serif; --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace; --blur: saturate(190%) blur(9px); --blur-lite: saturate(170%) blur(6px); /* --shadow-sm / --shadow / --shadow-lg are in css/tokens.css: they carry the ground's own colour and are solved, not typed. */ } html { scroll-behavior: smooth; } body { margin: 0; font: 400 16.5px/1.62 var(--sans); color: var(--ink); background: var(--ground); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---- the ground ------------------------------------------------------- FIXED, and painted on its own element rather than on . A `background-attachment: fixed` on body is re-rasterised on every scroll frame on iOS and simply does not stick; a fixed child does. */ .ground { position: fixed; inset: 0; z-index: -2; background: var(--ground) url(/img/ground.jpg) center 42% / cover no-repeat; } /* A second, near-invisible layer: a vertical gradient of the ground's own colour, deepest at the very top and the very bottom, so the nav pill and the footer have something to sit against without a scrim over the middle of the photograph. 0.34 at the edges and ZERO across the whole centre. */ .ground::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in oklab, var(--ground-2) 34%, transparent) 0, transparent 18%), linear-gradient(to top, color-mix(in oklab, var(--ground-2) 30%, transparent) 0, transparent 22%); } @media (max-width: 860px) { .ground { background-image: url(/img/ground-sm.jpg); } } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } /* ---- surfaces --------------------------------------------------------- No borders anywhere. The reference has none either: its cards are held by a soft shadow and a 1px inset highlight, which is what makes them read as glass rather than as boxes. */ .sheet, .card, .slab { border-radius: var(--r); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .5); } .sheet { background: var(--s-1); } .card { background: var(--s-2); } .slab { background: var(--s-3); } .well { background: var(--s-sink); border-radius: var(--r-sm); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px color-mix(in oklab, var(--rust-ink) 12%, transparent); } /* ---- type ------------------------------------------------------------- */ h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.06; letter-spacing: -.012em; } h1 { font-size: clamp(44px, 7.4vw, 88px); } h2 { font-size: clamp(30px, 4.3vw, 52px); line-height: 1.08; } h3 { font-size: clamp(21px, 2.1vw, 27px); line-height: 1.16; } h4 { font-size: 18px; line-height: 1.24; } em, .it { font-style: italic; color: var(--rust-ink); } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: var(--rust-ink); text-underline-offset: .18em; text-decoration-thickness: from-font; } a:hover { color: var(--hull); } strong, b { font-weight: 700; } .lead { font-size: clamp(17px, 1.5vw, 20.5px); line-height: 1.55; color: var(--ink-2); } .small { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); } /* ink-2, not ink-3. An eyebrow is 11.5 px bold — small text by every definition — and ink-3 is solved for LARGE text only: the contrast audit caught it at 3.56:1 on the thin sheet. */ .eyebrow { font: 700 11.5px/1 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--ink-2); } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } /* ---- nav -------------------------------------------------------------- */ .nav-holder { position: fixed; inset: 0 0 auto 0; z-index: 40; padding: 14px 22px; pointer-events: none; } .nav { pointer-events: auto; /* Aligned with .wrap, which is var(--maxw) INCLUDING its own 22px padding. Without the subtraction the pill sits 22px wider than every card on the page at both ends, which reads as a mistake rather than as a choice. */ max-width: calc(var(--maxw) - 44px); margin: 0 auto; display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 16px; border-radius: 99px; background: var(--s-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .55); } .brand { display: flex; align-items: center; gap: 9px; text-decoration: none; margin-right: 10px; } .brand svg { display: block; width: 27px; height: 27px; flex: none; } .brand b { font: 400 25px/1 var(--serif); color: var(--hull); letter-spacing: -.015em; } .nav nav { display: flex; align-items: center; gap: 2px; margin-left: auto; } .nav nav a { font: 600 14px/1 var(--sans); color: var(--ink-2); text-decoration: none; padding: 9px 11px; border-radius: 99px; } .nav nav a:hover { color: var(--hull); background: var(--wash); } .nav .cta { margin-left: 8px; } /* The X link. An icon and not a word, because the nav is already at its width on a laptop; and `rel="me"` so the profile can verify the site back. Its href and its title come from js/config.js through the build — there is ONE definition of the handle, js/site.js rewrites any link that disagrees with it at load, and tools/validate.mjs fails the build if a shipped link names anything else. A crawler never runs the script, so the static HTML has to be right on its own. */ .nav-x { display: grid; place-items: center; width: 34px; height: 34px; margin-left: 6px; border-radius: 99px; color: var(--ink-2); flex: none; } .nav-x svg { width: 15px; height: 15px; display: block; } .nav-x:hover { color: var(--hull); background: var(--wash); } @media (max-width: 900px) { .nav nav a.hide-sm { display: none; } } /* BELOW 760 THE LINKS GO. They overflowed the pill and landed on the bare photograph, where the contrast audit measured "Docs" at 1.53:1 — an overflow that looks like a layout quirk and is a legibility failure. The brand and the one action that matters stay. */ @media (max-width: 760px) { .nav nav { display: none; } } @media (max-width: 620px) { .brand b { font-size: 22px; } .nav { padding-left: 13px; } } /* ---- buttons ---------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 9px; font: 700 15px/1 var(--sans); padding: 14px 20px; border-radius: 99px; border: 0; cursor: pointer; text-decoration: none; background: var(--hull); color: var(--s-3-solid); box-shadow: var(--shadow-sm); transition: transform .12s ease, background .12s ease; } .btn:hover { background: var(--hull-2); color: var(--s-3-solid); transform: translateY(-1px); } .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; } .btn .arrow { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 99px; background: rgba(255, 255, 255, .17); font-size: 11px; } .btn.ghost { background: var(--s-3); color: var(--hull); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line-2); } .btn.ghost:hover { background: var(--s-3-solid); color: var(--hull); } .btn.warn { background: var(--rust-ink); } .btn.warn:hover { background: var(--rust); } .btn.sm { font-size: 13.5px; padding: 10px 15px; } .chip { display: inline-flex; align-items: center; gap: 7px; font: 600 13px/1 var(--sans); color: var(--ink-2); padding: 9px 13px; border-radius: 99px; background: var(--s-2); backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .45); } .chip .dot { width: 7px; height: 7px; border-radius: 99px; background: var(--safe); flex: none; } .chip.warn .dot { background: var(--danger); } /* A block of running text that is NOT inside a card needs a surface of its own, because there is a photograph behind it. Used by the docs pages, where the first build put h2 and .lead straight onto the ground and the audit measured 1.47:1. */ .head-block { padding: 26px 30px; border-radius: var(--r); background: var(--s-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .5); margin-bottom: 26px; } .head-block h2 { margin-bottom: 10px; } /* ---- sections --------------------------------------------------------- */ section { position: relative; padding: 92px 0; } .sec-head { max-width: 760px; margin: 0 auto 50px; text-align: center; } .sec-head .eyebrow { margin-bottom: 14px; display: block; } /* The head sits on a sheet of its own: a 52 px serif over the bare photograph measured 1.37:1 on a sibling and nothing in design review noticed, because the eye forgives display type and a contrast audit does not. */ .sec-head-wrap { display: inline-block; padding: 26px 34px; border-radius: var(--r); background: var(--s-1); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .5); } .sec-head p { margin-top: 14px; } .grid { display: grid; gap: 24px; } .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)); } @media (max-width: 980px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } } .card, .slab, .sheet { padding: var(--pad); } .card h3, .slab h3 { margin-bottom: 10px; } .card ul, .slab ul { margin: 14px 0 0; padding: 0; list-style: none; } .card li, .slab li { position: relative; padding-left: 16px; margin-bottom: 8px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); } .card li::before, .slab li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 99px; background: var(--rust-ink); } .icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--wash); margin-bottom: 16px; } .icon svg { width: 21px; height: 21px; } /* ---- the hero --------------------------------------------------------- */ .hero { padding: 112px 0 64px; } .hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 20px; align-items: start; } @media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; } } .hero-card { padding: 38px 36px 34px; } .hero h1 { margin: 20px 0 0; color: var(--hull); } .hero h1 .it { display: block; } .hero .lead { margin-top: 18px; max-width: 46ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 26px; } .hero-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; } .wordmark { display: flex; align-items: center; gap: 14px; } .wordmark svg { width: 56px; height: 56px; flex: none; } /* ---- the gauge: the one drawing only this site has -------------------- A vertical scale. Today's price at the top of the water, the liquidation price below it, and the freeboard between them, drawn to scale. */ .gauge { padding: 28px 26px 24px; } .gauge-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .gauge-body { position: relative; height: 258px; margin: 0 4px; } /* The hull, with its plate seams. A plain dark rectangle is a dark rectangle; the seams are what make it read as the side of a ship, and they also give the largest flat area on the page some structure — which the flat% statistic notices and so does the eye. */ .g-hull { position: absolute; inset: 0 0 auto 0; overflow: hidden; border-radius: var(--r-xs) var(--r-xs) 0 0; background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .05) 0, rgba(255, 255, 255, .05) 1px, transparent 1px, transparent 26px), repeating-linear-gradient(to right, rgba(0, 0, 0, .10) 0, rgba(0, 0, 0, .10) 1px, transparent 1px, transparent 74px), linear-gradient(to bottom, var(--hull-2), var(--hull)); } .g-hull::after { content: ""; position: absolute; inset: auto 0 0 0; height: 7px; background: var(--rust); } .g-water { position: absolute; inset: auto 0 0 0; overflow: hidden; border-radius: 0 0 var(--r-xs) var(--r-xs); background: linear-gradient(to bottom, color-mix(in oklab, var(--ground) 72%, transparent), color-mix(in oklab, var(--ground-2) 84%, transparent)); } .g-water::before { /* the waterline itself: a bright hairline, because it is the number */ content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--band-ink); } .g-tick { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 8px; pointer-events: none; } .g-tick i { flex: 1; height: 1px; background: color-mix(in oklab, var(--band-ink) 42%, transparent); } .g-tick span { font: 700 11px/1 var(--mono); letter-spacing: .02em; white-space: nowrap; padding: 4px 7px; border-radius: 6px; background: var(--s-3); color: var(--ink); box-shadow: var(--shadow-sm); } .g-gap { position: absolute; left: 50%; transform: translateX(-50%); display: grid; place-items: center; gap: 2px; font: 800 13px/1 var(--mono); color: var(--band-ink); text-shadow: 0 1px 8px rgba(var(--shadow-rgb), .7); } .g-gap .bar { width: 1px; background: color-mix(in oklab, var(--band-ink) 60%, transparent); } .gauge-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; } .gauge-foot > div { text-align: center; } .gauge-foot .k { font: 700 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); } .gauge-foot .v { font: 700 17px/1.2 var(--mono); color: var(--ink); margin-top: 6px; } /* ---- stat rows -------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-2); border-radius: var(--r-sm); overflow: hidden; } .stats > div { background: var(--s-3); padding: 18px 16px; } .stats .k { font: 700 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); } .stats .v { font: 700 clamp(19px, 2vw, 25px)/1.15 var(--mono); color: var(--ink); margin-top: 8px; } .stats .n { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; line-height: 1.35; } @media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } } /* ---- the dark band ---------------------------------------------------- */ /* THIN. At 88% with a 3 px blur under it the whole section composited to one colour — 72.3% flat and a `busy` of 0.00, where the reference's flattest frame is 16.6%. The glass is 58% now and there is no blur: the photograph is visible through the band, and every word in it sits on a card or on the head's own near-opaque sheet, because the bare band clears only 4.45:1 over the brightest pixel the ground contains (tools/palette.mjs proves both numbers, and the 4.45 one is asserted to be UNDER the threshold). */ .band { position: relative; background: var(--band-glass); backdrop-filter: saturate(150%); -webkit-backdrop-filter: saturate(150%); color: var(--band-ink); padding: 88px 0; /* Feathered at both ends so it reads as weather over the photograph rather than as a box laid on it. */ mask-image: linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%); } .band h2, .band h3 { color: var(--band-ink); } .band .eyebrow { color: var(--band-ink-2); } .band .em, .band em, .band .it { color: var(--rust-band); } /* A head in a band gets its OWN sheet, near-opaque, for the reason measured above — not "for legibility" in the abstract. */ .band .sec-head-wrap { background: var(--band-head); backdrop-filter: saturate(150%); -webkit-backdrop-filter: saturate(150%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09); } .band .lead { color: var(--band-ink-2); } /* Text in a band sits on the CARD in the band, and the palette proof solves the ink against that composite and not against the band. */ .band-card { background: var(--band-card); border-radius: var(--r); padding: var(--pad); backdrop-filter: saturate(140%) blur(2px); -webkit-backdrop-filter: saturate(140%) blur(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); } .band-card h3 { margin-bottom: 10px; } .band-card p, .band-card li { color: var(--band-ink-2); font-size: 14.5px; line-height: 1.55; } .band-card ul { margin: 12px 0 0; padding: 0; list-style: none; } .band-card li { position: relative; padding-left: 16px; margin-bottom: 7px; } .band-card li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 99px; background: var(--rust-soft); } .band-card em, .band-card .it { color: var(--rust-band); } /* ---- steps ------------------------------------------------------------ */ .steps { counter-reset: s; } .step .no { font: 700 11.5px/1 var(--mono); letter-spacing: .14em; color: var(--rust-ink); margin-bottom: 12px; display: block; } .band .step .no { color: var(--rust-band); } /* ---- tables ----------------------------------------------------------- A table is dense small figures, so it belongs on a body surface. The wrapper sets its own s-3 ground for exactly that reason: wherever a table is put, the cells sit on the most opaque surface the palette has, and `--rust-ink` and `--danger` in them are proved at 4.5:1 there. */ .tbl-wrap { overflow-x: auto; border-radius: var(--r-sm); background: var(--s-3); padding: 2px 6px; } table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; } th { text-align: right; padding: 11px 12px; font: 700 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--line); white-space: nowrap; } th:first-child, td:first-child { text-align: left; } td { padding: 12px; text-align: right; border-bottom: 1px solid var(--line-2); font-family: var(--mono); font-variant-numeric: tabular-nums; } td:first-child { font-family: var(--sans); font-weight: 700; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: var(--wash); } .t-safe { color: var(--safe); font-weight: 700; } .t-warn { color: var(--rust-ink); font-weight: 700; } .t-danger { color: var(--danger); font-weight: 700; } /* ---- the badge that says how much room is left ------------------------ */ .fb-badge { display: inline-flex; align-items: baseline; gap: 7px; font: 800 13px/1 var(--mono); padding: 7px 11px; border-radius: 99px; background: color-mix(in oklab, var(--safe) 14%, transparent); color: var(--safe); } .fb-badge.thin { background: color-mix(in oklab, var(--rust-ink) 14%, transparent); color: var(--rust-ink); } .fb-badge.danger { background: color-mix(in oklab, var(--danger) 15%, transparent); color: var(--danger); } /* ---- the app ---------------------------------------------------------- */ .app { padding: 104px 0 60px; } .app-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; align-items: start; } @media (max-width: 1000px) { .app-grid { grid-template-columns: 1fr; } } .tabs { display: flex; gap: 6px; margin-bottom: 18px; } .tabs button { font: 700 14px/1 var(--sans); padding: 11px 16px; border: 0; cursor: pointer; border-radius: 99px; background: var(--s-2); color: var(--ink-2); backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite); box-shadow: var(--shadow-sm); } .tabs button[aria-selected="true"] { background: var(--hull); color: var(--s-3-solid); } .field { margin-bottom: 16px; } .field label { display: block; font: 700 11.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; } .field input, .field select { width: 100%; font: 700 16px/1 var(--mono); color: var(--ink); padding: 13px 14px; border-radius: var(--r-xs); border: 1px solid var(--line); background: var(--s-3); } .field input:focus, .field select:focus { outline: 2px solid var(--rust-ink); outline-offset: 1px; } .field .hint { font-size: 12.5px; color: var(--ink-3); margin-top: 7px; line-height: 1.4; } .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 14.5px; } .row:last-child { border-bottom: 0; } .row .k { color: var(--ink-2); } .row .v { font-family: var(--mono); font-weight: 700; color: var(--ink); text-align: right; } .note { font-size: 13.5px; line-height: 1.5; color: var(--rust-ink); background: color-mix(in oklab, var(--rust-ink) 8%, transparent); padding: 12px 14px; border-radius: var(--r-xs); margin-top: 14px; } .note.bad { color: var(--danger); background: color-mix(in oklab, var(--danger) 9%, transparent); } .note.good { color: var(--safe); background: color-mix(in oklab, var(--safe) 10%, transparent); } /* ---- footer ----------------------------------------------------------- THE WHOLE FOOTER IS A SURFACE. On the first build of this page the footer's three columns sat on the bare photograph, over the brightest part of it, and were close to unreadable — the same failure a sibling shipped and the same one a contrast audit catches while design review does not. Every word on this site sits on a surface of its own. */ /* A DARK band, not a cream one. A cream footer sheet fixed the contrast and broke the picture: it covered the last viewport in near-white and measured 23.8% flat where the reference's flattest frame is 16.6%. Dark glass over the photograph reads as weather closing in, holds its ink at 11:1, and is the register the reference closes on too. */ footer { padding: 70px 0 54px; background: var(--band-glass); backdrop-filter: saturate(150%); -webkit-backdrop-filter: saturate(150%); color: var(--band-ink); mask-image: linear-gradient(to bottom, transparent 0, #000 30px, #000 100%); } /* ON THE CARD, NOT ON THE BAND. tools/palette.mjs measures band ink on the bare thin band at 3.44:1 over the brightest pixel the ground contains — under the 4.5:1 that 14 px links need. The footer looked fine because the water behind it happens to be mid-toned where the columns fall; that is luck, not a design. */ .foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; background: var(--band-card); border-radius: var(--r); padding: 28px 30px; backdrop-filter: saturate(140%) blur(2px); -webkit-backdrop-filter: saturate(140%) blur(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); } .foot .small, .foot p { color: var(--band-ink-2); } @media (max-width: 760px) { .foot { grid-template-columns: 1fr 1fr; padding: 24px 22px; } } .foot h5 { margin: 0 0 12px; font: 700 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--band-ink-2); } .foot a { display: block; font-size: 14px; color: var(--band-ink); text-decoration: none; margin-bottom: 8px; } .foot a:hover { color: var(--rust-band); } /* The fine print sits on the CARD in the band, not on the band: a dark band has two surfaces and the palette solves this ink against the lighter one. */ .foot-fine { margin-top: 26px; padding: 16px 20px; border-radius: var(--r-sm); background: var(--band-card); backdrop-filter: saturate(140%) blur(2px); -webkit-backdrop-filter: saturate(140%) blur(2px); font-size: 12.5px; line-height: 1.6; color: var(--band-ink-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); } .foot-fine a { display: inline; color: var(--rust-band); } .foot-fine .num { color: var(--band-ink); } .skip { position: absolute; left: -9999px; } .skip:focus { left: 16px; top: 16px; z-index: 99; padding: 10px 14px; background: var(--s-3-solid); border-radius: 8px; } [hidden] { display: none !important; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }