/* ⚠️ WEIGHT CEILING IS 600, EVERYWHERE ON THIS SURFACE. Measured 2026-08-11 by feral-ui-check on the painted welcome screen: the four facts — including "No obligation to post", the one the whole programme's defensibility rests on — were painting at Inter 700 against an estate ceiling of 600. Semibold already carries every one of them; 700 was reach, not emphasis. Eleven rules changed. Do not reintroduce a 700 here without moving the law first. */ /* ════════════════════════════════════════════════════════════════════════ feral·seed — the creator's store. THE STOREFRONT SYSTEM, DARK. 🚨 DARK IS THE DESIGN, NOT A THEME. Harry, 2026-08-10: *"should be dark mode not white"* — and the standing brief for the 2026 storefront is **"the cleanest dark mode ever"**: premium-quiet like Bottega, ALD or Apple in dark, NOT club-flyer-busy. So there is no light variant and no `prefers-color-scheme` fork: one ground, decided, the same for everybody. `color-scheme: dark` is set so the browser's own form controls, scrollbars and search-cancel glyphs come out dark too rather than punching white holes in it. ⚠️ AND IT IS WHY THE PRODUCT PHOTOGRAPHY WORKS HERE. FERAL shoots on black. On a near-black ground the image frame dissolves and the garment floats — which is the whole Bottega effect, free, and the single strongest argument for this not being a preference. THE RULES THAT SURVIVE THE FLIP: · Inter for everything. Anton ONLY on the two display lines — the welcome headline and the ending. Nowhere else, ever. · 🚨 NO MONOSPACE ANYWHERE A CUSTOMER CAN SEE. Not for prices, not for order numbers, not for "tabular" reasons. `font-variant-numeric: tabular-nums` does that job without leaving Inter. · RED IS FOUR THINGS AND NOTHING ELSE: the period after a headline, the dot inside the primary CTA, the one key fact, and a live error. On a dark ground red reads twice as loud as it did on white, so the budget got SMALLER on the flip, not larger — the meter and the "−80%" both gave theirs up. · Whitespace over decoration. No glow, no gradient, no chrome. Every element earns its place. NO HEX LITERAL OUTSIDE THE :root BLOCK. ════════════════════════════════════════════════════════════════════════ */ @font-face{font-family:'Inter';src:url('font/inter-var.woff2') format('woff2'); font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'Anton';src:url('font/anton.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap} :root{ color-scheme:dark; /* ground — four steps, all near-black, so a card is a whisper not a slab */ --paper:#08080a; --well:#0e0e11; --sunk:#141417; --card:#0d0d10; --line:rgba(255,255,255,.075); --line2:rgba(255,255,255,.17); /* ink — every one measured ≥4.5:1 on --paper */ --ink:#f4f4f5; --sec:#a8a8b0; --mut:#8a8a93; --faint:#7d7d86; --on-ink:#08080a; /* the one accent */ --red:#ff0033; --red-soft:rgba(255,0,51,.13); --red-line:rgba(255,0,51,.36); /* one status register, kept apart from the accent */ --good:#3ad48c; --good-soft:rgba(58,212,140,.12); --warn:#f0b429; --warn-soft:rgba(240,180,41,.12); --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --display:'Anton','Inter',sans-serif; /* ⚠️ FOUR VALUES, AND `50%` IS NOT A FIFTH. A circle on a square box is `--r-pill` by another spelling, and writing it both ways made `feral-ui-check` count five distinct radii against a limit of four — a real law firing on a real inconsistency, even though nothing looked wrong. Every `border-radius:50%` on this surface is now the token. */ --r-s:8px; --r:12px; --r-l:16px; --r-pill:999px; /* ⚠️ SHADOWS BARELY EXIST ON A NEAR-BLACK GROUND — depth here is carried by the four surface steps and by --line, not by a glow. These are kept only for things that genuinely float above the page. */ --sh-1:0 1px 2px rgba(0,0,0,.6); --sh-2:0 8px 28px -10px rgba(0,0,0,.8); --sh-3:0 24px 64px -20px rgba(0,0,0,.9); --ease:cubic-bezier(.2,.7,.3,1); --pad:clamp(20px,5vw,56px); /* the phone's bottom tab bar — read by `.bar` and `#main` so the three cannot drift apart. Desktop never paints it. */ --nav:56px; --bar:clamp(72px,14vw,84px); } *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ background:var(--paper); color:var(--ink); font:400 16px/1.55 var(--sans); font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overscroll-behavior-y:none; } img{display:block;max-width:100%} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} a{color:inherit} :focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px} /* ⚠️ THE HEADING IS FOCUSED BY SCRIPT ON EVERY STAGE CHANGE so a keyboard or screen-reader user lands on the new screen instead of at the top of the document. Chrome paints a focus ring for that programmatic focus, which drew a box around "Choose your pieces" on arrival. It is not tabbable, so suppressing the ring costs nobody anything. */ [tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none} /* ── shared furniture ───────────────────────────────────────────────── */ .wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)} .eyebrow{font:600 11px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--sec)} .display{font:400 clamp(34px,8.5vw,68px)/.96 var(--display);letter-spacing:-.005em; text-transform:uppercase;margin:0} .display .dot{color:var(--red)} .h2{font:600 clamp(19px,2.6vw,24px)/1.2 var(--sans);letter-spacing:-.012em;margin:0} .lede{font:400 clamp(16px,2vw,18px)/1.6 var(--sans);color:var(--sec);margin:0} .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px; /* ⚠️ AN `` IS STILL A LINK TO THE BROWSER and picks up the UA's underline inside the pill — measured on "Message Andie" and on every `hey@feralclo.com` ghost button on this surface. A button is a shape, not a run of text; the underline is the one thing that stops it reading as one. */ text-decoration:none; background:var(--ink);color:var(--on-ink);border-radius:var(--r-pill); padding:16px 28px;font:600 15px/1 var(--sans);letter-spacing:.005em; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); box-shadow:var(--sh-1);white-space:nowrap} .btn:hover{transform:translateY(-1px);box-shadow:var(--sh-2)} .btn:active{transform:translateY(0)} .btn[disabled]{opacity:.4;pointer-events:none} .btn .pip{width:6px;height:6px;border-radius:var(--r-pill);background:var(--red)} .btn.ghost{background:transparent;color:var(--ink);box-shadow:none; border:1px solid var(--line2);padding:15px 24px} .btn.ghost:hover{border-color:var(--ink)} /* ⚠️ 38px is not a tap target. The small button is used for tracking and for a returning creator's last checkout — both on a phone, both once. */ .btn.sm{padding:13px 18px;min-height:44px;font-size:14px} /* ══ THE PROGRESS RAIL ══════════════════════════════════════════════════ Law 12: every stage of a multi-step journey looks like its own job. This is the only thing that persists across all three, so it is the only thing that says where you are. */ .top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 82%,transparent); backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)} .topin{display:flex;align-items:center;gap:16px;height:60px} .mark{display:flex;align-items:center;gap:10px;min-height:44px;padding-right:8px;text-decoration:none;font:600 12px/1 var(--sans); letter-spacing:.16em;text-transform:uppercase;color:var(--ink)} .mark svg{height:14px;width:auto;fill:currentColor;flex:none} .steps{display:flex;align-items:center;gap:6px;margin-left:auto} .step{display:flex;align-items:center;gap:7px;font:600 12px/1 var(--sans);color:var(--faint); min-height:44px;padding:7px 6px;transition:color .2s var(--ease)} .step .n{width:19px;height:19px;border-radius:var(--r-pill);display:grid;place-items:center; border:1px solid var(--line2);font-size:10.5px;transition:all .2s var(--ease)} .step.on{color:var(--ink)} .step.on .n{background:var(--ink);color:var(--on-ink);border-color:var(--ink)} .step.done{color:var(--sec)} .step.done .n{background:var(--sunk);border-color:transparent} .step .sep{width:14px;height:1px;background:var(--line2)} /* ⚠️ the label goes on a phone, so the step must keep a thumb-sized box of its own — a 31px target is the commonest way a 44px rule is passed on desktop and broken on the device it was written for. */ /* ⚠️ AND THE WORDMARK KEEPS ITS SECOND WORD AGAIN. It was dropped below 560px because 390px had to carry a mark, five tabs AND the market button — 55px of a 350px row that the tabs needed more. The tabs are at the bottom of the screen now, so the header carries a mark and one pill in 350px and there is no reason for a baddie's store to stop saying what it is. */ @media (max-width:330px){ .mark span{display:none} } @media (max-width:620px){ .step span.lbl{display:none} .step{min-width:44px;justify-content:center;padding:7px 0} .step .sep{width:10px} } /* ══ 1 · WELCOME ════════════════════════════════════════════════════════ Law 1: one frame, no scroll. Everything a creator needs to decide whether to carry on is above the fold on a phone. */ .welcome{min-height:calc(100dvh - 60px);display:grid;align-content:center; padding-block:clamp(28px,6vh,64px) clamp(24px,5vh,40px)} .welcome .display{margin:16px 0 0;max-width:14ch} .welcome .lede{margin:16px 0 0;max-width:44ch} .welcome .go{margin:26px 0 0;display:flex;gap:12px;align-items:center;flex-wrap:wrap} /* ══════════════════════════════════════════════════════════════════════════ THE PACKAGE — ONE OBJECT, NOT A CARD PLUS A LIST. 🚨 IT REPLACES THE SPEND CARD AND THE FACT LIST, WHICH WERE TWO OBJECTS SAYING ONE THING. Measured at 390x844 before this: eyebrow, headline, lede, a 124px spend card carrying a progress track, the press, the fine print and THEN a four-row fact list at y=980 repeating the same two numbers the card had already given. The reasoning is over `packCard` in store.js — the short of it is that a ratio against a limit is the right drawing for somebody mid-basket and the wrong first impression for somebody just invited. ⚠️ THE FIGURE IS A ROW OF THE PACKAGE, NOT A SEPARATE CARD, so a phone reads one bordered object from the top with no second heading to parse. ⚠️ NO TRACK, NO METER, NO RATIO ON THIS SCREEN. The bar on CHOOSE is where a ratio against a limit belongs and it is drawn there, live. ══════════════════════════════════════════════════════════════════════════ */ .pack{margin:24px 0 0;max-width:560px;display:grid;gap:1px; border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;background:var(--line)} .packk{background:var(--card);padding:14px 18px 0; font:600 10.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--mut)} .packrow{background:var(--card);padding:14px 18px;display:flex;gap:14px;align-items:flex-start} .packrow .k{display:block;font:600 15px/1.35 var(--sans);letter-spacing:-.01em} .packrow .v{display:block;font:400 13.5px/1.5 var(--sans);color:var(--sec);margin-top:3px} .packrow .dot{width:7px;height:7px;border-radius:var(--r-pill);background:var(--line2);margin-top:7px;flex:none} .packrow.key .dot{background:var(--red)} /* the lead row carries the number, so it is a stack rather than a dotted line */ .packrow.lead{flex-direction:column;gap:6px;padding:6px 18px 16px} .pfig{display:flex;align-items:baseline;gap:10px;font:600 clamp(34px,9vw,46px)/1 var(--sans); letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums} .pfig i{font-style:normal;font:400 13px/1.35 var(--sans);letter-spacing:0;color:var(--mut)} .psub{font:400 13px/1.55 var(--sans);color:var(--sec)} /* ⚠️ THE FIGURE'S CAPTION IS TWO LINES NOW — "a month to spend / and free delivery" — so it aligns to the BOTTOM of the number rather than to its baseline, which on a 46px figure left the second line hanging in mid-air. */ .pfig i{align-self:flex-end;padding-bottom:4px} /* ── the closer: the one block on this screen that says why THEM ────────── ⚠️ NOT A `.packrow`. It carries no dot and no key/value shape because it is not another thing they get — it is the sentence under the list, and giving it the list's furniture would make it read as a sixth perk. */ .packclose{background:var(--card);padding:16px 18px 18px;border-top:1px solid var(--line)} .packclose b{display:block;font:600 15px/1.35 var(--sans);letter-spacing:-.01em;color:var(--ink)} .packclose span{display:block;font:400 13.5px/1.55 var(--sans);color:var(--sec);margin-top:4px} /* ⚠️ THE ONE EMPHASIS IN THE LEDE — "BADDIE RATE" — is a weight, not a colour. Red is spent on four things on this surface and a proper noun is not one of them; 600 is the ceiling, so this is the loudest it is allowed to be. */ .lede b{font-weight:600;color:var(--ink)} /* ⚠️ TWO COLUMNS ONLY WHERE THERE IS ROOM FOR TWO, AND PLACED BY AREA RATHER THAN BY GUESSED HEIGHTS. The welcome screen wasted the whole right half of a 1512px window — measured, the widest thing on it was a 560px fact list on a 1290px page. ⚠️ THE SOURCE ORDER IS THE PHONE ORDER and nothing below reorders it: the figure lands under the promise and the press lands above the small print, which is what puts "Choose your pieces" over the fold at 390×844. Areas, not `grid-row: n / span m`, because the row count is a guess the moment a lede wraps to a third line and a wrong guess overlaps two blocks silently. */ @media (min-width:900px){ .welcome{grid-template-columns:minmax(0,1fr) minmax(0,460px); column-gap:clamp(40px,6vw,88px);align-items:start;align-content:center; grid-template-areas: "eye pack" "h pack" "lede pack" "go pack" "fine pack"} /* 🚨 DIRECT CHILDREN, NOT DESCENDANTS, AND THIS IS A MEASURED BUG NOT A TIDY-UP. Written as `.welcome .go`, the rule matched the `.go` INSIDE the join form as well — a grid item of the FORM, not of the welcome — so `grid-area:go` resolved against a grid that has no such area, created an implicit one, and put the submit button on the same row as the password field at half its width. Seen at 1440×900 on 2026-08-20: the email input truncated to "demo@feralclo.co" and the password box 170px wide beside a button. `grid-area` only ever applies to a DIRECT child of the grid, so a descendant selector here is always either a no-op or a bug. */ .welcome > .eyebrow{grid-area:eye} .welcome > .display{grid-area:h} .welcome > .lede{grid-area:lede} .welcome > .go{grid-area:go} .welcome > .enterform{grid-area:go} .welcome > .fine{grid-area:fine} /* ⚠️ THE FIGURE STAYS IN THE LEFT COLUMN AND THE TERMS GO RIGHT. Tried the other way round first and measured a 128px hole: the card is 124px tall and the three rows it would have spanned (eyebrow, a two-line display headline and a two-line lede) are 242, so the facts under it started a row and a half below where the card ended. Grid rows are shared between columns — the only way to close that gap is not to straddle them. This way the left column reads promise → figure → press, which is the order somebody decides in, and the right column is one object top-aligned against it. */ .welcome > .pack{grid-area:pack;align-self:start;margin-top:6px;max-width:none;width:100%} } .welcome .fine{margin:16px 0 0;font:400 13px/1.6 var(--sans);color:var(--mut);max-width:52ch} .welcome .fine a{color:var(--ink);text-underline-offset:3px; display:inline-block;padding:12px 5px;margin:-12px -5px} /* ══ 2 · THE STORE ══════════════════════════════════════════════════════ */ .storehead{padding-block:34px 10px} .storehead .h2{margin-bottom:6px} /* the group chooser — one parcel, one group, said kindly */ .groups{display:flex;gap:8px;overflow-x:auto;padding:16px 0 22px; scrollbar-width:none;-webkit-overflow-scrolling:touch} .groups::-webkit-scrollbar{display:none} .grp{flex:none;padding:9px 15px;border-radius:var(--r-pill);border:1px solid var(--line2); font:600 13.5px/1 var(--sans);color:var(--sec);white-space:nowrap; transition:all .18s var(--ease);background:var(--card)} .grp:hover{border-color:var(--ink);color:var(--ink)} .grp.on{background:var(--ink);color:var(--on-ink);border-color:var(--ink)} .grp.locked{opacity:.34;pointer-events:none} .grp .c{opacity:.55;margin-left:6px;font-weight:500} /* 🚨 33.5px, MEASURED BY feral-ui-check AT 390px, ON THE STORE'S PRIMARY NAVIGATION. `padding:9px 15px` on a 13.5px/1 font is a 34px capsule, and the law is 44 on a phone. It was reported as ten failing targets across every group pill, which is the whole filter bar: the control a creator uses most was the smallest thing on the screen. `min-height` rather than more padding so the capsule grows without the label moving off centre. */ @media (max-width:620px){ .grp{min-height:44px;display:inline-flex;align-items:center} } .lockline{display:flex;align-items:center;gap:9px;padding:11px 14px;margin:0 0 18px; background:var(--well);border-radius:var(--r-s);font:400 13.5px/1.45 var(--sans);color:var(--sec)} .lockline .lt{min-width:0} .lockline b{color:var(--ink);font-weight:600} .lockline .x{margin-left:auto;font:600 13px/1 var(--sans);color:var(--ink); text-decoration:underline;text-underline-offset:3px;cursor:pointer;flex:none; /* ⚠️ 15px WAS THE WHOLE TAP TARGET. Measured 2026-08-17: the "Start again" control — the ONLY way out of a committed parcel group — was an 80×15px hit box. Padded to 44 in a way that does not move the text, since the line is measured against its neighbours. */ min-height:44px;display:inline-flex;align-items:center;padding-inline:2px} /* 🚨 MEASURED 2026-08-17 AT 390px: 80.7px tall, 4.12 lines, and the "Start again" button pushed by `margin-left:auto` into a ragged third column with two words per line. A single row of flex with a text button pinned right only works while the text fits on one line, and this text never does on a phone. ⚠️ TWO ROWS WAS THE OBVIOUS FIX AND IT MEASURED WORSE — 103.1px, because a 44px tap target on a row of its own is 44px of height. On a phone it stops being a flex row at all: the sentence FLOWS and "Start again" is the last thing in it, an inline link, with the tap target bought by padding that is cancelled by an equal negative margin. Same trick as `.welcome .fine a` and `.doc a` above, for the same reason: 44px of hit box, 0px of layout. */ @media (max-width:560px){ .lockline{display:block;padding:11px 14px} .lockline .lt{display:inline} /* 16px, not 13: the font is 13px/1, so 13+13+13 measured 39 and the law is 44. Verified by elementFromPoint at the centre, not by the rectangle. */ .lockline .x{display:inline;margin:0 0 0 5px;min-height:0;padding:16px 4px; margin-block:-16px;margin-right:-4px} } /* ── the confirmation state — see `paintChrome` ───────────────────────── ⚠️ IT IS THE SAME COMPONENT, NOT A DIALOG. A modal over a shop to ask "are you sure" is heavier than the decision deserves, and it would cover the very pieces the creator is deciding between. The line grows a red edge, states what it costs in pieces, and offers both answers in place. ⚠️ AND THE DESTRUCTIVE ONE IS NOT THE EMPHASISED ONE. `.x.on` is ink; the way back is the plain link beside it, because it is the answer that costs nothing. */ .lockline.warn{border-left:2px solid var(--red);gap:14px;flex-wrap:wrap} .lockline .x.on{color:var(--red)} @media (max-width:560px){ .lockline.warn{display:block} } .grid{display:grid;gap:clamp(14px,2.2vw,28px);padding-bottom:calc(var(--bar) + 28px); grid-template-columns:repeat(auto-fill,minmax(min(46%,230px),1fr))} .card{background:var(--card);border-radius:var(--r);overflow:hidden; border:1px solid var(--line);transition:box-shadow .25s var(--ease),border-color .25s var(--ease)} .card:hover{box-shadow:var(--sh-2);border-color:var(--line2)} .shot{position:relative;aspect-ratio:4/5;background:var(--sunk);overflow:hidden} .shot img{width:100%;height:100%;object-fit:cover;transition:transform .85s var(--ease)} .card:hover .shot img{transform:scale(1.04)} .shot .none{position:absolute;inset:0;display:grid;place-items:center;color:var(--faint); font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase} .tag{position:absolute;left:10px;top:10px;background:var(--ink);color:var(--on-ink); border-radius:var(--r-pill);padding:5px 10px;font:600 11px/1 var(--sans); letter-spacing:.03em;box-shadow:var(--sh-1)} .cbody{padding:13px 14px 15px} .ctitle{font:600 14.5px/1.3 var(--sans);letter-spacing:-.008em; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em} .prices{display:flex;align-items:baseline;gap:8px;margin-top:7px} .now{font:600 17px/1 var(--sans);letter-spacing:-.02em} .was{font:500 13px/1 var(--sans);color:var(--mut);text-decoration:line-through; text-decoration-thickness:1px} /* the discount is stated by the two prices next to it; a red badge as well is the same fact three times and it spends accent on a non-event */ .off{font:600 11px/1 var(--sans);color:var(--mut);letter-spacing:.02em} /* ══════════════════════════════════════════════════════════════════════════ SIZES — drawn by us, never a native