/* ========================================================================= RECENT WORK OVERLAY. INTRO-1 ONLY. v=6 (2026-09-02) Loaded by index.html only. Isolated: every selector is `.rw-` prefixed, which nothing else on this page has, so this sheet can override nothing. *** THE ABOUT PAGE'S CATEGORIES COMPONENT IS THE SOURCE OF TRUTH, NOT THE COMP. *** Figma 2523:1708 (default) and 2523:1738 (Matey expanded) were read for COMPOSITION AND HIERARCHY ONLY. Where they disagree with css/about.css, the component wins — a standing instruction, and the divergences are these: collapsed label component 100px / 600 comp 140px / Regular 400 row gap component 0 comp 10 row height component derived x150/140 comp 139.777 literal card padding component derived comp 48 panel heading component 16px comp 24px panel body component Inter 16/26 comp Bricolage 24/40 pill digits #FF3567 #ff3567 <- agree THAT CLUSTER IS NOT ARBITRARY. 140 / gap 10 / 139.777 is what the About page STARTED from and moved off for measured reasons: 140 overflowed our container by 16px at the longest label, and gap 0 is what pellmell's own SliceHomeCategories measures. The comp simply predates those findings. Reintroducing them would re-open both. ── DUPLICATION, STATED ──────────────────────────────────────────────────── This is the SECOND LIVE copy of the Categories block — About (css/about.css) and this one. A third was ported to the "This site" screen and REVERTED at 15a0f1a; it survives only in be7bdf3 and is NOT counted here. Ported deliberately, on the isolation contract every screen sheet here runs on. IF THIS OVERLAY SHIPS, that is the moment to lift the block into one shared module — two copies is already past the point where drift is a question of when, and A THIRD COPY IS THE LINE. A CHANGE HERE IS NOT A CHANGE IN css/about.css. ========================================================================= */ .rw-overlay { /* Fixed stage over the whole page. Hidden until opened — `visibility` rather than `display` so the panels keep a measurable height for the row tweens. */ position: fixed; inset: 0; z-index: 400; /* over .hero (100) and the project screens (200) */ background: #ffffff; box-sizing: border-box; /* NEW — nothing in our scale defines an overlay frame. From the comp (2523:1708): flex row, gap 99, padding 48/31. Named as new because it does not derive. */ display: flex; gap: 99px; align-items: flex-start; /* CENTRED because the close and the mark left the flow (see .rw-close). They were the first and last flex children, and the column's placement was a by-product of their widths plus the 99 gaps — which put it at left 170 when centred is 166, so it was 4px off-centre by accident. Centring it now makes it exact, and lands it on the same 166 that .ab-shell uses on the About page. */ justify-content: center; padding: 48px 31px; overflow-y: auto; visibility: hidden; opacity: 0; } .rw-overlay.is-open { visibility: visible; opacity: 1; } /* NO-JS PATH. The caption's anchor is a real fragment, so with scripting off the URL alone opens this. One rule, and it means the link is never dead. With JS on the click is intercepted and the fragment is never set, so this never competes with .is-open. */ .rw-overlay:target { visibility: visible; opacity: 1; clip-path: none; } /* CLOSE CONTROL — 40x40, top left. The comp's asset (2523:1737) is an X inside a circle, confirmed by reading the path before building it as one. Drawn inline so it takes currentColor rather than shipping a fixed-fill asset. */ /* ---- CLOSE + MARK: 14px, MIRRORED, OUT OF THE FLEX FLOW ------------------------ Both were flex children, so their insets were whatever .rw-overlay's padding gave them — close at left 31, mark at right 33.42 (not even mirrored: the mark ended where the flow stopped, not at the padding edge), and both at top 48. THEY ARE NOW ABSOLUTE at the site's 14px mark inset, matching .ab-mark and .hero-mark. Absolute rather than a padding change because changing the padding would have moved the content column, which is not what was asked. The column is held by justify-content above. Both still scroll with the overlay, exactly as they did as flex children. */ .rw-close { appearance: none; -webkit-appearance: none; border: 0; padding: 0; margin: 0; background: none; cursor: pointer; position: absolute; top: 14px; left: 14px; z-index: 1; width: 40px; height: 40px; } /* No colour rule: the asset carries its own black fill with the X knocked out of the disc, so there is nothing for currentColor to drive. */ .rw-close img { display: block; width: 100%; height: 100%; } /* The centred column — 1093, the same width the About shell spends. */ .rw-col { flex: none; width: 1093px; max-width: 100%; display: flex; flex-direction: column; align-items: center; } .rw-inner { display: flex; flex-direction: column; gap: 24px; width: 100%; } /* The SB mark, right. Box is the comp's 29.584 x 54.976 — the same box the About masthead spends, so it is the project's number rather than a transcription. */ .rw-mark { position: absolute; top: 14px; right: 14px; z-index: 1; display: block; width: 29.584px; height: 54.976px; } .rw-mark img { display: block; width: 100%; height: 100%; filter: brightness(0); } /* "Recent work" — Bricolage Bold 32/28, centred. Matches the About page's h2 slot. */ .rw-title-row { display: flex; align-items: center; justify-content: center; padding: 10px; width: 100%; } .rw-title { margin: 0; font-family: 'Bricolage Grotesque', 'Lexend', system-ui, sans-serif; font-variation-settings: "opsz" 14, "wdth" 100; font-weight: 700; font-size: 32px; line-height: 28px; letter-spacing: normal; text-transform: none; color: #141d1f; } /* ---- THE LIST — component values, one free number ------------------------- */ .rw-cats { --rw-cat-size: 100px; --rw-cat-h: calc(var(--rw-cat-size) * 150 / 140); --rw-cat-pad-t: calc(var(--rw-cat-size) * 118 / 140); --rw-cat-pad-x: calc(var(--rw-cat-size) * 110 / 140); --rw-cat-pad-b: calc(var(--rw-cat-size) * 200 / 140); margin: 0; list-style: none; padding: var(--rw-cat-pad-t) var(--rw-cat-pad-x) var(--rw-cat-pad-b); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 100%; box-sizing: border-box; background: #f2f2f2; border-radius: 8px; overflow: hidden; } .rw-cat { position: relative; width: 100%; height: var(--rw-cat-h); contain: layout; will-change: height; } /* ---- INTERACTIVE AFFORDANCE (2026-09-02) --------------------------------------- Opening became click-only, and nothing then said the rows were interactive: the label sat at one flat grey whatever the pointer did. This is the signal. CONTRAST, MEASURED AGAINST THE REAL BACKGROUND. The brief quoted 3.53:1 for #FF3567 on WHITE, but this list is not on white -- it is on #f2f2f2, which is darker, so the true figure is lower: #FF3567 on #ffffff 3.53:1 #FF3567 on #f2f2f2 3.15:1 <- the one that applies WCAG 1.4.3 asks 4.5:1 for normal text and 3:1 for LARGE text (>=24px, or >=18.66px bold). Every size this label takes is large: 100px, and 48px under the 1180 breakpoint. So 3.15:1 PASSES -- but on 5% of headroom, which is why the number is written down rather than left implied. The STYLEGUIDE's passing variant #D92D58 is NOT needed here (it measures 4.20:1 on this same #f2f2f2, so it would not reach 4.5 either -- it only clears normal-text AA on white). FOCUS MATCHES HOVER, and is not carried by colour alone: nothing in this sheet sets `outline`, so the UA focus ring is intact and the pink is an addition to it, not a replacement. :focus-visible rather than :focus so a mouse click does not leave the label stuck pink after the pointer has gone. The transition is a plain colour fade -- 0.2s, FIXED, not derived: a pointer cue has to feel immediate, and the sheet's other durations (0.6s panel) would lag the cursor. The curve is the site's power3.out character as a bezier. THE TOKEN RESOLVES HERE, unlike on About: index.html loads css/pellmell-intro.css, so var(--pi-pink) is live and this sheet already spends it on .rw-cat__num. */ .rw-cat__head { appearance: none; -webkit-appearance: none; border: 0; padding: 0; margin: 0; background: none; cursor: pointer; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; text-align: center; color: #959697; transition: color 0.2s cubic-bezier(0.165, 0.84, 0.44, 1); } .rw-cat__head:hover, .rw-cat__head:focus-visible { color: var(--pi-pink); } @media (prefers-reduced-motion: reduce) { .rw-cat__head { transition: none; } } .rw-cat__label { white-space: nowrap; /* under lh 28 a second line lands ON the first */ font-family: 'Bricolage Grotesque', 'Lexend', system-ui, sans-serif; font-variation-settings: "opsz" 14, "wdth" 100; font-weight: 600; font-size: var(--rw-cat-size); line-height: 28px; color: inherit; } .rw-cat__panel { position: absolute; top: 0; left: 0; width: 100%; /* never inset:0 — height must be content-driven */ box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 24px; background: #191919; border-radius: 8px; clip-path: inset(50% 0 50% 0 round 8px); opacity: 0; transform: scale(0.8); transform-origin: center; pointer-events: none; will-change: clip-path, transform, opacity; } .rw-cat.is-open .rw-cat__panel { pointer-events: auto; } .rw-cat__row { display: flex; align-items: center; gap: 12px; width: 100%; } .rw-cat__title { margin: 0; flex: 1 0 0; min-width: 0; font-family: 'Bricolage Grotesque', 'Lexend', system-ui, sans-serif; font-variation-settings: "opsz" 14, "wdth" 100; font-weight: 700; font-size: 16px; line-height: 24px; color: #ffffff; text-align: right; } .rw-cat__num { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 26.707px; background: #ffffff; border-radius: 48px; font-family: 'Bricolage Grotesque', 'Lexend', system-ui, sans-serif; font-weight: 300; font-size: 12px; line-height: 1; color: var(--pi-pink); /* the token added for the caption arrow */ } .rw-cat__prose { width: 100%; color: #ffffff; font-family: 'Inter', system-ui, sans-serif; } .rw-cat__prose p { margin: 0; font-weight: 300; font-size: 16px; line-height: 26px; color: #ffffff; } .rw-cat__prose p + p { margin-top: 26px; } /* The lead sentence. MEDIUM 500, the component's .ab-lead--strong — NOT the comp's ExtraBold, which has no precedent in our scale. */ .rw-lead--strong { font-weight: 500; } @media (max-width: 1180px) { .rw-overlay { gap: 32px; padding: 32px 20px; } .rw-cats { --rw-cat-size: 48px; } .rw-title { font-size: 24px; } }