/* ═══════════════════════════════════════════════════════════════════════════ * ONLYFLOW — the marketing site. * * The palette is not chosen, it is DERIVED: every value is 255-n applied per * channel to OnlyFans' own verified brand blue (#00AEEF, counted from pixels, * not from memory). OnlyFans is where the money is made — bright, white, soft, * facing the fan. OnlyFlow is where it is settled — hot, black, hard, facing * the business. Their cool gray inverts to a WARM taupe; nobody picked that, * the arithmetic handed it over. * * ⭐ THE ONE HARD RULE: signal (#FF5110) means MONEY or THE NEXT ACTION. * Nothing else. Not headings, not icons, not borders, not "emphasis". * The moment it decorates, it stops meaning anything. * ⭐ Color proportion ≈ 80/15/5 — ground / type / signal. * ⭐ There is no red and no green in this system. A failure is described in * words, not painted. * ═══════════════════════════════════════════════════════════════════════════ */ :root{ --ground:#000000; /* 255-255 */ --raise:#0B0B0B; /* 255-244 */ --rule:#222222; /* 255-221 */ --body:#E1E1E1; /* 255-30 */ --muted:#75695C; /* the warm taupe the maths produced */ --signal:#FF5110; /* 255-0, 255-174, 255-239 */ --signal-press:#FF7330; --shadow:#3A1B0B; /* the cut's dark half */ --them:#00AEEF; /* theirs, used once, deliberately */ /* ── motion: one easing language. `--ease` is a long, settled decel — money arriving, not a UI popping. `--ease-soft` is for things that only fade. */ --ease:cubic-bezier(.22,1,.36,1); --ease-soft:cubic-bezier(.33,1,.68,1); --dur:820ms; /* ── how the page grows past a laptop. One origin, 1400px, for every ramp. ── */ --max:clamp(1180px, calc(1180px + (100vw - 1400px) * 0.42), 1780px); --gut:clamp(20px,5vw,64px); /* One grotesque, two roles. Money is ALWAYS mono and ALWAYS tabular. */ --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; } /* ═══════════════════════════════════════════════════════════════════════════ * ⭐⭐ LARGE SCREENS — THE PAGE IS DESIGNED FOR THEM, NOT CENTERED ON THEM. * * 🩸 MEASURED, ACROSS SEVEN VIEWPORTS. `--max` was a flat 1180px and there was no * media query above 820px anywhere in this file, so: * * 1280px content 1180px 92% of the screen * 1920px content 1180px 61% 370px of empty black each side * 2560px content 1180px 46% 690px each side * 3440px content 1180px 34% 1130px each side * * and `body` was 17px at EVERY width from 390 to 3440. On an ultrawide that is a phone * layout floating in the middle of a very large black rectangle. Operator: "when say i * have a bigger monitor then say normal people the website fills to fit my screen". * * ⭐ THE HEADLINES COME FOR FREE, and that is why this is only a few lines. `.col .display` * is `clamp(38px, 12.4cqw, 88px)` — a CONTAINER query, not a viewport one — so every * display size is already a proportion of the column it sits in. Widen the container and * the type scales with it, in the ratio the design was drawn at. * * ‼️ WHAT DOES NOT SCALE IS READING MEASURE. `.lede` is capped in `ch` and prose columns * stay where they are: a 1,600px line of body text is unreadable however large the screen * is. The container grows; the line length does not. * * ‼️ AND IT IS STEPPED, NOT CONTINUOUS. A pure `vw` container means no two people ever see * the same layout and nothing can be checked against a reference. Three steps can each be * measured, and `tools/verify/vpscale.mjs` measures all of them. * ═══════════════════════════════════════════════════════════════════════════ */ /* ⭐ CONTINUOUS, NOT STEPPED — AND `fluid.mjs` IS WHY. * * The first version of this was four media queries at 1500/1800/2300/3000px. It filled the * screen correctly and `tools/verify/fluid.mjs` failed it immediately: * * terms.html 1480→1500px font 17px → 18.02px * (6%, 5% more than the window moved, after 1160px of stillness) * * which is exactly right. A 6% jump in body type from one pixel of window movement is a * visible pop, and "fills every viewport" has to mean EVERY viewport, not four of them. * * ‼️ THE RAMP IS WRITTEN IN LENGTHS, NOT IN A UNITLESS SCALE. CSS cannot turn a length into * a plain number — `calc((100vw - 1400px) / 1px)` is invalid — so there is no `--scale` * multiplier to be had. Each value carries its own ramp instead, all with the same origin * (1400px, where the design stops being drawn) and the same shape. * * Below 1400px every one of these resolves to its minimum, because the middle term goes * negative and `clamp` returns the floor. Nothing about a laptop or a phone moves. */ *,*::before,*::after{box-sizing:border-box} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} html{background:var(--ground)} body{ margin:0;background:transparent;color:var(--body); /* ‼️ THE RAMP STARTS AT 1400px AND NOT BEFORE. Body copy must not creep up on a laptop: 17px is the design size and stays exactly 17px until the container itself starts to grow. Below 1400px the middle term is negative and clamp returns the floor. */ font-family:var(--sans);font-size:clamp(17px, calc(17px + (100vw - 1400px) * 0.0028), 22px);line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* Every digit on this site aligns on the decimal. Comparing numbers is the only thing anyone actually does here. */ [class*="fig"],table,.mono,.money{font-variant-numeric:tabular-nums} img,svg{max-width:100%;height:auto;display:block} a{color:inherit} /* ── type scale ──────────────────────────────────────────────────────────── */ /* ‼️ A display heading is sized against ITS CONTAINER, not the viewport. Sizing by 8.2vw while the box was capped at 11ch rendered 104px type into a 506px column — "conversation." is 601px wide, so it clipped on EVERY page. `cqw` reads the column; `break-word` is the net so a long word can never overflow even if a container is missing. */ .col{container-type:inline-size} .display{ font-size:clamp(38px, 7.4vw, clamp(88px, calc(88px + (100vw - 1400px) * 0.014), 118px));font-weight:800;line-height:0.94; letter-spacing:-0.045em;color:#fff;margin:0;text-wrap:balance; overflow-wrap:break-word; } .col .display{font-size:clamp(38px, 12.4cqw, clamp(88px, calc(88px + (100vw - 1400px) * 0.014), 118px))} h2{ font-size:clamp(28px, 4.4vw, clamp(52px, calc(52px + (100vw - 1400px) * 0.009), 72px));font-weight:800;line-height:1.04; letter-spacing:-0.038em;color:#fff;margin:0 0 18px;text-wrap:balance; } h3{font-size:20px;font-weight:800;letter-spacing:-0.02em;color:#fff;margin:0 0 8px} p{margin:0 0 16px;max-width:64ch} .lede{font-size:clamp(18px, 2.1vw, clamp(23px, calc(23px + (100vw - 1400px) * 0.0024), 28px));line-height:1.5;color:var(--body);max-width:40ch} .dim{color:var(--muted)} b,strong{color:#fff;font-weight:700} /* 11px mono, uppercase, wide — the label voice throughout the system */ .label{ font-family:var(--mono);font-size:11px;letter-spacing:0.24em; text-transform:uppercase;color:var(--muted);margin:0 0 14px; } .money{font-family:var(--mono);font-weight:700;color:#fff;letter-spacing:-0.02em; overflow-wrap:break-word} /* ── layout ──────────────────────────────────────────────────────────────── */ .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)} section{padding:clamp(72px,11vw,150px) 0;position:relative} .rule{height:1px;background:var(--rule);border:0;margin:0} /* ── THE CUT — one shape does the app icon, the favicon, the wordmark separator and the live gauge. A diagonal already has direction, and unlike a chevron it can hold a fill level. ─────────────────────────────────────── */ .cut{display:inline-block;vertical-align:-0.14em} .cut rect{fill:var(--shadow)} .cut path{fill:var(--signal)} /* ── wordmark: ONLY◤FLOW ─────────────────────────────────────────────────── */ .wm{ font-weight:800;letter-spacing:-0.045em;color:#fff; display:inline-flex;align-items:center;gap:0.1em;text-decoration:none; /* 19px at 640 and below, rising to 21px at 1000 — the two ends the breakpoint used to jump between, with every width in between now on the line joining them. */ font-size:clamp(19px, 0.5556vw + 15.44px, 21px); } .wm .cut{margin:0 0.06em} /* ── THE CUT MAKES ITSELF ───────────────────────────────────────────────── The mark IS a diagonal — a payout arriving whole and being divided. It is the one motion the whole system is built from, and until now it was the only place that motion never happened. On load the slab is whole, then the cut opens through it, once. It plays on arrival and never again; a logo that keeps animating is a logo you stop reading. ‼️ Guarded on `.js` like every other rest state. Without JS the mark is simply finished, which is what it looked like before this existed. */ .js .wm .cut path{clip-path:polygon(0 0,0 0,0 100%,0 100%); transition:clip-path 900ms var(--ease) 260ms} .js.lit .wm .cut path{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)} @media (prefers-reduced-motion:reduce){.js .wm .cut path{clip-path:none;transition:none}} /* ── header ──────────────────────────────────────────────────────────────── */ header{ position:sticky;top:0;z-index:50;background:rgba(0,0,0,0.86); backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--rule); } header .wrap{display:flex;align-items:center;justify-content:space-between; gap:20px;height:66px} nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px)} nav a{ font-size:14px;color:var(--muted);text-decoration:none;font-weight:600; letter-spacing:-0.01em;transition:color .16s; } nav a:hover,nav a:focus-visible{color:#fff} nav a[aria-current="page"]{color:#fff} /* ═══════════════════════════════════════════════════════════════════════════ * THE MENU — one hamburger, every width. * * Operator, 2026-08-22: "the home page and the how it works page i need the * hambruger icon for desktop mobile and tablet". Not a mobile fallback that a * wide screen hides: the same control at 320px and at 2560px. * * ⭐ IT IS A
, NOT A SCRIPT. Open, close, focus, Enter and Space all come * from the browser, so the menu works with JavaScript blocked, on an old phone, and * in a reader — which is the population most likely to be on a locked-down device. * The script adds Escape and click-outside and nothing else. * * ⭐ "GET STARTED" STAYS OUTSIDE IT. The one signal-colored control on the page is * the next action; burying it behind a tap to make the header tidier trades the * thing the page is for against a small amount of symmetry. * ═══════════════════════════════════════════════════════════════════════════ */ header .wrap{position:relative} .hdr-right{display:flex;align-items:center;gap:clamp(10px,1.6vw,18px)} .menu{position:relative} .menu summary{ list-style:none;display:inline-flex;align-items:center;justify-content:center; width:42px;height:38px;cursor:pointer;border:1px solid var(--rule); background:transparent;transition:border-color .16s,background .16s; } .menu summary::-webkit-details-marker{display:none} .menu summary::marker{content:''} .menu summary:hover,.menu summary:focus-visible{border-color:var(--muted);background:var(--raise)} /* three bars, drawn from one element so there is nothing to misalign */ .bars{position:relative;display:block;width:18px;height:2px;background:var(--body); transition:background .18s var(--ease),transform .22s var(--ease)} .bars::before,.bars::after{content:'';position:absolute;left:0;width:18px;height:2px; background:var(--body);transition:transform .24s var(--ease),opacity .16s linear} .bars::before{top:-6px} .bars::after{top:6px} /* open: the middle bar goes, the outer two cross. The icon says what it does. */ .menu[open] .bars{background:transparent} .menu[open] .bars::before{transform:translateY(6px) rotate(45deg)} .menu[open] .bars::after{transform:translateY(-6px) rotate(-45deg)} /* ═══════════════════════════════════════════════════════════════════════════ * 🩸 THE MENU WAS EIGHT IDENTICAL LINKS IN A DARK BOX. * * Operator: "this whole area needs a rework i cant belivlie this got pushed this is th * emot disgutsting ui ux ever ... make the hamburger menu beaitful". * * They were right, and the fault was not the styling — it was that the menu carried NO * INFORMATION. Eight destinations, evenly weighted, in the order they happened to be * written, each one a bare noun. "Compliance" and "Answers" and "Refer" tell somebody * nothing about which one to press, so the menu made every visitor guess and the widest * page on the site opened onto a list. * * ⭐ THREE GROUPS, AND EACH ENTRY SAYS WHAT IS BEHIND IT. The groups are the actual * question a visitor is asking in order — what is it, can I trust it, what do I get — * and the second line is the answer the link would otherwise make them click to find. * That is what turns a list into a menu. * * ⭐ THE ACCENT MARKS ONE THING: where you already are. Everything else is body and * muted, so the eye lands on the page you are on and then reads down. * ═══════════════════════════════════════════════════════════════════════════ */ .menu-panel{ position:absolute;top:calc(100% + 11px);right:0;z-index:60; display:flex;flex-direction:column;align-items:stretch;gap:0; width:min(360px,calc(100vw - 32px));padding:8px 0 10px; background:#0B0B0B;border:1px solid var(--rule); box-shadow:0 30px 80px rgba(0,0,0,.8); } /* the group label — the site's own mono, quiet, and never a link */ .menu-k{ margin:14px 0 2px;padding:0 20px;font-family:var(--mono);font-size:9.5px; letter-spacing:.22em;text-transform:uppercase;color:var(--muted); } .menu-panel > .menu-k:first-child{margin-top:6px} .menu-panel a{ display:block;padding:9px 20px 10px;color:var(--body); border-left:2px solid transparent; transition:background .14s,color .14s,border-color .14s; } .menu-panel a b{ display:block;font-size:15px;font-weight:700;letter-spacing:-.012em;color:#fff; line-height:1.3; } .menu-panel a span{ display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--muted); /* ‼️ THE DESCRIPTION WRAPS. `white-space:nowrap` was on the old links to keep the panel narrow; with a second line that would push the panel past the viewport. */ white-space:normal; } .menu-panel a:hover,.menu-panel a:focus-visible{background:#141414} .menu-panel a:hover span,.menu-panel a:focus-visible span{color:var(--body)} .menu-panel a[aria-current="page"]{border-left-color:var(--signal);background:#121212} .menu-panel a[aria-current="page"] b{color:var(--signal)} .js .menu[open] .menu-panel{animation:menu-in 200ms var(--ease) both} @keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} /* on a narrow screen it spans the gutters instead of hanging off one corner */ /* ON A NARROW SCREEN IT IS A SHEET, EDGE TO EDGE, not a card floating in the corner. 🩸 The first attempt inset it by a gutter on each side and the right edge hung 20px OFF THE SCREEN — measured in a browser at 390px: x=20, width=390, right edge 410. So the side borders come off too: a bordered box clipped by the screen edge reads as broken, and a sheet with a bottom rule reads as intended. */ @media (max-width:560px){.menu{position:static} .menu-panel{left:0;right:0;min-width:0;border-left:0;border-right:0}} @media (prefers-reduced-motion:reduce){.bars,.bars::before,.bars::after{transition:none} .js .menu[open] .menu-panel{animation:none}} /* ═══════════════════════════════════════════════════════════════════════════ * ⭐⭐ THE DESKTOP BAR — 2026-09-06. THE LINKS ARE ON THE HEADER, NOT BEHIND IT. * * 🩸 This REVERSES the 2026-08-22 instruction one block up ("i need the hambruger * icon for desktop mobile and tablet"). Operator, 2026-09-06, with a 1997px * screenshot: "On desktop the navbar needs to be fixed. It is currently a 3 line * drop down menu with the items contained in it, as if it's mobile but this is how * it is on desktop. They need to be on the navbar." Read the two together before * changing this again — the hamburger at every width was DELIBERATE and it is being * deliberately undone, not fixed by accident. * * ⭐ ONE CONTROL PER WIDTH, NEVER BOTH. Below 900px the bar is gone and the * hamburger is the nav, exactly as it was. At 900px and up the hamburger is gone and * the bar is the nav. A header carrying both is a header that has not decided, and a * visitor who can reach the same four links two ways reads the second way as a bug. * * ⭐ 900px IS WHERE THE ROW STOPS FITTING, not a round number borrowed from a * framework. Measured: wordmark 128 + four links 254 + their gaps 72 + Sign in 47 + * Get started 112 = 613px of content, and at 900px the gutters leave 810px. The * gutter ramp (`--gut`, 5vw) takes MORE of the screen as it narrows, so the margin * closes from both ends at once — 900 keeps roughly 200px of air at the tightest * point rather than the 30px a 768 breakpoint would have left. * * ⭐ WHERE YOU ARE IS MARKED THE WAY THE PANEL ALREADY MARKS IT. The open menu * paints a 2px signal border down the left of the current page; the bar paints the * same 2px signal rule under it, sitting ON the header's bottom border rather than * floating above it. Same gesture, rotated — the system reuses shapes, it does not * invent a second vocabulary for the same fact. Nothing else here is signal: the * links are muted, they go white on hover, and the only orange control in the header * is still the one that means the next action. * * ‼️ THE LINKS ARE DUPLICATED IN THE DOM — once here, once inside the
. * That is a real cost and it is paid on purpose: reflowing the SAME
into a * row means overriding a UA rule that hides a closed details' children, which older * WebKit does not let you override, and the failure mode there is a desktop header * with NO navigation at all. `.dev/verify-hdr-nav.mjs` fails the build if the two * lists ever disagree, on any page, so the duplication cannot drift in silence. * ═══════════════════════════════════════════════════════════════════════════ */ .hdr-nav{display:none} .hdr-signin{display:none} @media (min-width:900px){ /* the hamburger is not "hidden on desktop" — at this width it is not the nav */ .menu{display:none} /* ⭐ `margin-left:auto` and NOT a wrapper div. The header is `justify-content:space-between` with the wordmark and the action cluster as its two ends; an auto margin on the middle child beats space-between, and putting it on the LEFT collapses all the slack there — so the wordmark holds the far left on its own and the four links sit hard against Sign in and Get started. Operator, 2026-09-06: "have those four items on the left placed to the left of the sign in and get started buttons". No markup nesting, and it still unwinds to exactly the old two-child header the moment `display:none` comes back below 900px. ⭐ `margin-right` IS THE SEPARATION AND IT IS NOT DECORATION. Reading right to left the header now runs orange button, Sign in, then four muted links with nothing but whitespace between the groups. At the header's own 20px gap the last link would sit closer to Sign in than Sign in sits to Get started, which reads as five items in one row rather than navigation next to actions. This puts the biggest gap in the row at that seam — the only thing separating them, so it has to be the largest. */ .hdr-nav{ display:flex;align-self:stretch;align-items:stretch; margin-left:auto;margin-right:clamp(10px,1.6vw,24px); gap:clamp(6px,1.4vw,16px); } /* full-height hit targets: the whole 66px band is the link, so the current-page rule can sit on the header's own border instead of hovering near it */ .hdr-nav a{ position:relative;display:inline-flex;align-items:center;padding:0 8px; font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--muted); text-decoration:none;transition:color .16s;white-space:nowrap; } .hdr-nav a:hover,.hdr-nav a:focus-visible{color:#fff} /* ‼️ THE RING GOES INSIDE. Global focus is outline-offset:3px, and on a link that is the full 66px of the header that pushes the top edge of the ring off the top of the viewport — a focus indicator clipped by the window is the one state where "nearly visible" is worth nothing. The 8px of horizontal padding is what gives a NEGATIVE offset somewhere to sit without biting into the first and last letter. */ .hdr-nav a:focus-visible{outline-offset:-4px} .hdr-nav a[aria-current="page"]{color:#fff} .hdr-nav a[aria-current="page"]::after{ /* inset by the padding so the rule is the width of the WORD, not of the hit target — the mark says which page, and a rule wider than its label reads as a button that failed to draw its box. */ content:'';position:absolute;left:8px;right:8px;bottom:-1px;height:2px; background:var(--signal); } /* Sign in is an ACTION, so it sits in the action cluster — but it is the quiet one. Body white against the muted links, and it never competes with the orange. */ .hdr-signin{ display:inline-flex;align-items:center; font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--body); text-decoration:none;transition:color .16s;white-space:nowrap; } .hdr-signin:hover,.hdr-signin:focus-visible{color:#fff} } /* The only signal-colored control on the page: it is the NEXT ACTION. */ .cta{ display:inline-flex;align-items:center;gap:10px; background:var(--signal);color:#000;font-weight:800;letter-spacing:-0.015em; padding:13px 22px;border-radius:0;text-decoration:none;font-size:15px; border:0;cursor:pointer;transition:background .16s; } .cta:hover,.cta:focus-visible{background:var(--signal-press)} .cta.sm{padding:9px 16px;font-size:14px} .cta.ghost{background:transparent;color:#fff;border:1px solid var(--rule)} .cta.ghost:hover{border-color:var(--signal);background:transparent} /* ── THE CUT, ON THE BUTTON ─────────────────────────────────────────────── The mark is a diagonal opening through a solid slab. The primary action is the only other place on the site where a solid orange slab exists, so the same gesture belongs on it: on hover the cut sweeps through, up and to the right, once. It is the brand's single motion, reused rather than invented. ‼️ On the ghost button there is no slab to cut, so it does not get one — a gesture that means "dividing a payment" is not decoration to sprinkle. */ .cta{position:relative;overflow:hidden;isolation:isolate} .cta::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--shadow); clip-path:polygon(-30% 100%, -12% 100%, 30% 0, 12% 0); transform:translateX(-40%);opacity:0; transition:transform 620ms var(--ease),opacity 260ms linear} .cta:hover::before,.cta:focus-visible::before{transform:translateX(420%);opacity:.55} .cta.ghost::before{display:none} @media (prefers-reduced-motion:reduce){.cta::before{display:none}} :focus-visible{outline:2px solid var(--signal);outline-offset:3px} /* ═══ HERO ═══ asymmetric. The claim sits left; the gauge occupies the right and is the only thing that moves on the whole page. ─────────────────────── */ .hero{padding-top:clamp(56px,9vw,110px);padding-bottom:clamp(56px,9vw,110px);overflow:hidden} /* ⭐ THE CREDENTIALS CARD, no longer a grid child of the how-it-works hero — it moved down to sit with the argument it belongs to. `.nolog` carries `margin-left:auto` because in the hero it hugged the right of its column; here the column IS the page, so that pushes it into the middle of nothing. It lines up with the paragraph above it instead, which is what it is evidence for. */ /* ═══════════════════════════════════════════════════════════════════════════════ 🩸 `.link` WAS USED ON EVERY BLOG POST AND DEFINED IN NO STYLESHEET THE SITE LOADS. Two text links in the closing panel of all twelve posts — "See how it works" and "What it costs" — rendered as body copy with no color and no rule under them, beside a "Get started" that had the same problem. Both were invisible to the markup guard, which read only the ten top-level pages and never descended into `site/blog/`. ⭐ THE SAME RULE THE PRODUCT USES (app/src/brand.mjs), so a reader moving between the blog and the app sees one vocabulary. The accent is the site's signal orange, and these links ARE the next action, which is what that color is reserved for. ═══════════════════════════════════════════════════════════════════════════════ */ .link{color:var(--signal);border-bottom:1px solid var(--signal);font-size:14px; text-decoration:none;padding-bottom:1px} .link:hover,.link:focus-visible{color:#fff;border-bottom-color:#fff} .nolog-wrap{margin-top:clamp(18px,2.4vw,26px)} .nolog-wrap .nolog{margin-left:0} .hero-grid{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,1fr); gap:clamp(28px,5vw,72px);align-items:center} .hero .display em{font-style:normal;color:var(--signal)} .hero .lede{margin-top:22px} .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} /* ⛔ THE GAUGE AND THE RUN WERE REMOVED HERE, 2026-08-21. Both were complete components that NO page rendered, and both were still named in every page's IntersectionObserver — dead CSS keeping dead JS alive. ‼️ The gauge in particular must not live in the MARKETING stylesheet: the brand book is explicit that it is in-product only, because a mark that reports a number it cannot know is worse than one that says nothing. The product's own sequence component is `.rung`, in the product stylesheet. */ /* ═══ THE LEDGER ═══ the problem, set like a bank statement ────────────────── */ .ledger{background:var(--raise);border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)} .ledger-rows{margin-top:34px;border-top:1px solid var(--rule)} .lrow{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(12px,3vw,32px); align-items:baseline;padding:17px 0;border-bottom:1px solid var(--rule)} .lrow .t{font-family:var(--mono);font-size:12px;color:var(--muted)} .lrow .d{color:var(--body)} .lrow .v{font-family:var(--mono);font-size:14px;color:var(--muted); text-align:right} .lrow.tot{border-bottom:3px double var(--rule);border-top:1px solid var(--rule)} .lrow.tot .d,.lrow.tot .v{color:#fff;font-weight:700} /* ═══ DIRECTIONS ═══ two mirrored flows ───────────────────────────────────── */ .dirs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule); margin-top:40px;border:1px solid var(--rule)} .dir{background:var(--ground);padding:clamp(22px,3.4vw,38px)} .dir h3{display:flex;align-items:center;gap:10px} .flowline{margin:20px 0 0;font-family:var(--mono);font-size:13px;line-height:2.1; color:var(--body)} .flowline span{color:var(--muted)} .flowline b{color:#fff} .flowline .amt{color:var(--signal)} /* ═══ THE PROMISE ═══ full-bleed signal. This is the 5%. ──────────────────── */ .promise{background:var(--signal);color:#000} .promise h2,.promise b,.promise strong{color:#000} .promise .lede{color:#000;max-width:52ch;opacity:.86} .promise .big{font-size:clamp(30px, 5.4vw, clamp(64px, calc(64px + (100vw - 1400px) * 0.011), 84px));font-weight:800;letter-spacing:-0.04em; line-height:1.02;margin:0;color:#000;text-wrap:balance} .promise-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px); align-items:end;margin-top:34px} /* ═══ PRICE TABLE ═══ */ /* wide content scrolls INSIDE its own box — the page body never moves sideways */ .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:30px} .ptable{width:100%;min-width:440px;border-collapse:collapse;font-size:15px} .ptable th{font-family:var(--mono);font-size:11px;letter-spacing:0.18em; text-transform:uppercase;color:var(--muted);font-weight:400;text-align:left; padding:0 14px 12px 0;border-bottom:1px solid var(--rule)} .ptable td{padding:15px 14px 15px 0;border-bottom:1px solid var(--rule); vertical-align:top} .ptable td.n,.ptable th.n{text-align:right;font-family:var(--mono);padding-right:22px} .ptable td.n:last-child,.ptable th.n:last-child{padding-right:0} .ptable th{white-space:nowrap} .ptable tr.tot td{border-bottom:3px double var(--rule);border-top:1px solid var(--rule); color:#fff;font-weight:700} .ptable .sub{display:block;color:var(--muted);font-size:13px;margin-top:3px} /* ═══ CLOCKS ═══ horizontal stepper ───────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════════ * THE FLOW — four moments, and a pulse that only arrives at the last one. * * 🩸 THIS WAS `.clocks`: four dark rectangles in a row, one slightly lighter, holding the * most important sequence on the page. Operator: "this is just creepy ... add somehtign * similiar t compliace ina mch better visual". * * ⭐ THE COMPLIANCE WALL IS THE REFERENCE, and what works about it is that it NEVER STOPS. * A light travels its grid for ever, so the page is making its argument whenever anybody * happens to look — rather than once, on scroll, to whoever was watching. * * ⭐ HERE THE MOTION IS THE ARGUMENT. The pulse crosses 01, 02 and 03 without stopping and * LANDS on 04, because the first three are time passing and only the fourth is money. A * viewer who reads nothing still sees which one counts. * * ‼️ CSS ONLY. No script, so it runs with JavaScript blocked; and every step is plain * readable text if nothing animates at all. * ═══════════════════════════════════════════════════════════════════════════ */ /* ‼️ NO TOP PADDING. The grid's own `background:var(--rule)` is what draws the hairlines BETWEEN cells, so padding above the first row shows that grey as a solid empty bar across the whole component — measured at 34px of dead strip. The pulse rides on the border itself and needs no room of its own. */ .flow{ list-style:none;margin:clamp(30px,4vw,44px) 0 0;padding:0; display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:var(--rule);border:1px solid var(--rule);position:relative; } /* ‼️ THE PULSE IS A BACKGROUND, NOT AN ELEMENT. A moving element would need a width the grid does not know; a gradient the width of one column, translated across the whole rail, lands on each node by arithmetic rather than by a magic number. */ .flow::after{ content:'';position:absolute;left:0;top:-2px;height:3px;width:25%;pointer-events:none; background:linear-gradient(90deg,transparent,var(--signal) 46%,#fff 50%, var(--signal) 54%,transparent); animation:flow-pulse 5.2s cubic-bezier(.42,0,.30,1) infinite; will-change:transform; } @keyframes flow-pulse{ /* crosses the first three without pausing … */ 0% { transform:translateX(0); opacity:0 } 6% { opacity:1 } 62% { transform:translateX(300%); opacity:1 } /* … and stays on the fourth, which is the whole point */ 86% { transform:translateX(300%); opacity:1 } 100% { transform:translateX(300%); opacity:0 } } .flow-step{ background:var(--ground);padding:clamp(20px,2.3vw,26px) clamp(16px,1.8vw,21px); position:relative; } .flow-n{ display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em; color:var(--muted); } .flow-n em{ display:block;margin-top:5px;font-style:normal;font-size:10px;letter-spacing:.16em; color:#4E4E4E; } .flow-step h3{margin:13px 0 6px;font-size:clamp(16px,1.5vw,18px);letter-spacing:-.015em} .flow-step p{font-size:14px;margin:0;color:var(--muted);max-width:none} /* the one that is money: lit, and it stays lit */ .flow-step.is-money{background:var(--raise)} .flow-step.is-money .flow-n{color:var(--signal)} .flow-step.is-money .flow-n em{color:var(--signal);opacity:.72} .flow-step.is-money p{color:var(--body)} /* ⭐ a standing mark on the money step, so the sequence still reads when the pulse is elsewhere in its loop or when motion is switched off entirely */ .flow-step.is-money::before{ content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--signal); } @media (max-width:820px){.flow{grid-template-columns:repeat(2,1fr)} /* ‼️ THE PULSE IS ARITHMETIC, so a different column count needs a different distance — two columns means it travels 100%, not 300%. Left unadjusted it would run off. */ .flow::after{width:50%;animation-name:flow-pulse-2} @keyframes flow-pulse-2{ 0%{transform:translateX(0);opacity:0} 6%{opacity:1} 62%{transform:translateX(100%);opacity:1} 86%{transform:translateX(100%);opacity:1} 100%{transform:translateX(100%);opacity:0} }} @media (max-width:520px){.flow{grid-template-columns:1fr} /* one column: the rail has nowhere to travel, so it simply is not there */ .flow::after{display:none}} @media (prefers-reduced-motion:reduce){.flow::after{animation:none;transform:translateX(300%);opacity:1}} /* ═══ GUARDS ═══ dense mono grid ──────────────────────────────────────────── */ /* 🩸 The hairlines used to come from the CONTAINER's background showing through * 1px gaps. With `auto-fill` the last row rarely fills, so the EMPTY TRACKS showed * that background too — a bare grey rectangle at the end of the grid that reads as * a rendering fault. Twenty-eight items over any column count will almost always * leave a gap, so this was visible at nearly every width. * * ⭐ The rule now belongs to each CELL, as a 1px ring. Adjacent rings meet inside * the 1px gap so the seam still reads as one hairline, and a track with no cell in * it draws nothing at all. */ /* 🩸 `auto-fill` RESOLVED TO THREE AND FIVE COLUMNS FOR TWENTY-EIGHT ITEMS, so the last row was short and the 1px grid gaps drew a hole in the wall. The wall being solid IS the argument of this section — a gap in it is the opposite of the claim. 28 = 4 × 7, so the column count is chosen from its divisors and never guessed. tools/verify/gridgaps.mjs measures this at nine viewports. */ .guards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;background:transparent;border:1px solid var(--rule);margin-top:36px} @media (max-width:1000px){.guards{grid-template-columns:repeat(2,minmax(0,1fr))}} /* 🩸 SAME HOLE AS `.wall`, ON THE OTHER PAGE THAT PRINTS THE SAME LIST. 29 is prime, so four columns leave three empty tracks on the last row and two leave one — and an empty grid cell on this background renders as a grey box, which the operator has already sent a screenshot of once. The list moved to /compliance and got the fix there; how-it-works keeps its own copy and did not. `gridgaps.mjs` found both. ‼️ LAST-CHILD, NOT :nth-child(29) — the count comes from INV.GUARD_CODES and the thirtieth guard would silently reopen the hole. */ .guards div:last-child{grid-column:1/-1} .guards div{background:var(--ground);padding:12px 14px;font-family:var(--mono); font-size:11.5px;color:var(--muted);letter-spacing:0.01em; box-shadow:0 0 0 1px var(--rule)} /* ⭐ On a phone `minmax(196px,1fr)` gives ONE column, so twenty-eight refusals became twenty-eight full-width rows — a list you scroll past instead of a wall you take in. The count IS the argument here, so keep two columns and shrink the type to fit the longest code (INV-DOWNSTREAM-COVERAGE, 24 characters). */ @media (max-width:560px){.guards{grid-template-columns:repeat(2,minmax(0,1fr))} /* ‼️ THE TYPE SCALES, THE PADDING STEPS. 11.5px → 9px at exactly 560 was a 28% jump in twenty-nine chips at once — the loudest lurch on the site. The endpoints are the same as the breakpoint's were: 9px at 320 where the longest code (INV-DOWNSTREAM-COVERAGE, 24 characters) has to fit two to a row, 11.5px at 560 where it meets the size outside this block. */ .guards div{padding:9px 8px;font-size:clamp(9px, 1.0417vw + 5.667px, 11.5px); letter-spacing:0;overflow-wrap:anywhere}} /* ═══ STATUS ═══ */ /* 🩸 THREE CARDS IN auto-fit GAVE TWO COLUMNS at mid widths, leaving one alone on its own row looking like a card that failed to load. Three is prime: it is three across or one down, never two. */ .status{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.6vw,30px);margin-top:36px} @media (max-width:900px){.status{grid-template-columns:1fr}} .scard{border:1px solid var(--rule);padding:24px;background:var(--raise)} .scard .k{font-family:var(--mono);font-size:11px;letter-spacing:0.2em; text-transform:uppercase;color:var(--muted);margin-bottom:12px} .scard p{font-size:14.5px;margin:0;color:var(--body)} .scard p+p{margin-top:10px} /* ═══ FOOTER ═══ */ footer{border-top:1px solid var(--rule);padding:52px 0 64px;color:var(--muted); font-size:14px} .foot-grid{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between; align-items:flex-start} footer a{color:var(--muted);text-decoration:none} footer a:hover{color:#fff} .foot-links{display:flex;gap:22px;flex-wrap:wrap} /* ── responsive ──────────────────────────────────────────────────────────── */ @media (max-width:900px){.hero-grid,.promise-grid{grid-template-columns:1fr} /* ‼️ THE SPLIT HAS TO COME BACK INSIDE THE GUTTER. `.stage` is margin-left:auto so * it hugs the right edge of its column — which is the whole page once the grid * collapses, so at 390px it ran off both sides and "THEY KEEP" sat over the bleed. * `.split-grid` on the home page has carried this rule since the phone mock landed; * how-it-works grew a stage on 2026-08-23 and needed the same one. */ /* ‼️ AND IT HAS TO LEAVE ROOM FOR ITS OWN TRANSFORM. The two slabs translate ±32px * on X in the settled state, so a stage sized to the full column runs 32px past the * gutter on both sides — which is what put "THEY KEEP" over the bleed at 390px. The * home page hides this with `.split-hero{overflow:hidden}`; clipping is the wrong * tool on a page whose hero has no such box, so the box is simply sized for what it * contains. */ .hero-grid .stage{margin-left:auto;margin-right:auto;max-width:min(430px,calc(100% - 76px))} .dirs{grid-template-columns:1fr}} @media (max-width:640px){.lrow{grid-template-columns:1fr auto;row-gap:2px} .lrow .t{grid-column:1/-1} /* The nav wrapped inside a fixed-height bar and the links stacked into two cramped lines. Give the header two honest rows instead of pretending it fits. ‼️ `header .wrap > nav`, not `nav` — the menu panel is a