/* ───────────────────────────────────────────────────────────── skin-site-worlds.css — the fenn.chat homepage, place cut Load order (docs/site-directions.md): tokens.css → foundation.css → this file. tokens.css is read-only (D10). The site is fenn's world rather than a page. Each section is a diorama: a rounded panel of one of the funnel's ten skies, with that sky's own props, its own mascot fenn, one group's moment playing in it, and the outcome pinned like a postcard. Why panels and not one continuous sky (which is site/great-day's answer): these are *places*, and a place wants an edge. The page grey becomes the gallery wall, each world reads as something you are looking into, and — usefully — the ink problem solves itself, because a panel's contents sit on their own surfaces (bubbles, postcards) rather than naked on a gradient. What this file does NOT do (Rail 6): the funnel's fixed #scenes/#fg twins, D59's gutter system and the deck's morph engine stay with the deck. Here every world owns its own sky in normal flow, and one variable per visible world drives its parallax. The floor below the fold marks — nav, thread, footer, fair questions — is the same floor site/great-day uses. Duplicated per branch on purpose: one skin per direction, and directions never merge into each other (FOUNDATIONS.md). What was byte-identical across the copies has been promoted (2026-08-25, S17): the page reset, the shadow ramp, the display/lede scale, the button shell and the prop frame are foundation.css's now, and this file keeps only what is this direction's own. docs/site/components.md is the map. ───────────────────────────────────────────────────────────── */ /* The page reset, .skip and :focus-visible are foundation.css's (S17), behind `` — both pages this skin serves carry that class. The :root block that used to sit here was dead: a duplicate of the live one below, plus --pp/--drift-range/--drift, which no writer on this branch has ever set (that trio is site/great-day's page-progress driver; this direction drives one --wp per visible world instead). */ /* ───────────────────────────────────────────────────────────── 1 · A world Sequential sections, each its own sky. Not the funnel's two fixed full-viewport layers driven by the deck's progress — those exist to serve a horizontal card deck (Rail 6). JS writes one variable per *visible* world, --wp, that world's own progress from 0 as it enters to 1 as it leaves. Everything inside moves off that. ───────────────────────────────────────────────────────────── */ :root { /* The reading column. Wide enough for a thread, never wide enough to read like a document. */ --col: min(calc(100% - 2 * var(--page-pad-x)), 552px); /* --nav-h, the shadow ramp and the display/lede scale are foundation.css's now (S17). --nav-h in particular was measured here and hard-coded in three places before it had a name; the script's own `navEl.offsetHeight` still reads the same 64px at runtime. */ --wtravel: 120px; /* total prop travel across one world */ /* The three plan worlds' sticky hold (§11): --hold-h is the held panel's own constant height (the funnel's "slide is a constant height, the card morphs inside it" rule, transplanted) and --hold-run is the extra runway scrolled through while it plateaus at --t 1. Neither depends on --t. Round 3, R2 — the panel is a framed diorama with EQUAL padding on all four sides, and it fits inside the fold. The old clamp (850/84vh+300/1100) was a free-standing height with no relation to the viewport it had to sit in: at 390×844 it resolved to 1009px in an 844px window, so the panel's bottom edge was 165px past the fold and the four gaps read 120/120/64/−14. One length drives all of it now. --panel-gap is the intended margin, --hold-h is what actually fits, and --panel-top / --panel-gap are the gaps that RESULTS — identical to --panel-gap whenever the cap isn't binding, larger (and still equal on four sides, because the width uses it too) when it is. No vw term anywhere, so a classic scrollbar cannot skew the horizontal gap against the vertical one. The cap only binds above ~1210px of viewport height. */ /* The closing zone's two dissolves (R12). Both are fixed lengths rather than percentages of a box whose height depends on how the footer's links wrap, and both run on an eased alpha ramp rather than a two-stop linear one: a 400px linear fade has a visible start and stop where its derivative jumps, and on a 1440 screen it bands. Nine stops approximating a smoothstep put the derivative at ~0 on both ends and break the ramp into short enough segments that 8-bit rounding has nowhere to stack. */ --ocean-fade: clamp(300px, 48svh, 540px); /* Longer than the 220-380px it was, not shorter (R15). Compressing the black is .get's own bottom padding's job — the darkening runs from .get's bottom edge upward, so its length decides how far up the descent STARTS, not how much flat black sits above the footer. And it had to reach further up, because shortening the zone moved .get-claim from 40% of the deep-ocean ramp to 28% of it, onto the brightest cyan the gradient makes: white on it measured 2.93:1, under the 3:1 that large text needs. R16.4 asked for less black once more, and this time both levers moved together — a tenth off the descent here, a third off the padding below. The pair moves the claim the other way: a shorter pad drops it FURTHER DOWN the darkening, which is the half of the ramp that gets darker, so the measured contrast rose at all four viewports instead of falling (390×844 6.92 → 7.91:1, 375×667 5.79 → 6.62, 800×700 5.37 → 6.11 — the worst of the four — 1440×900 7.08 → 8.21). What came down is the empty run between the badge and the footer: 92.8 → 59.1px at 390 and 99 → 63px at 1440, of which 39 and 41.5px are flat black by pixel decode. S18's second pass adds the Ask fenn field between the claim and the badge, and the +84px it costs (26 of margin, 58 of field) all lands BELOW the claim — so it slid the claim back up the ramp exactly the way R15's shorter zone did, and by almost the same amount. Measured before the retune: 7.91 → 3.70:1 at 390×844, 6.62 → 3.36 at 375×667, 6.11 → 3.17 at 800×700, 8.21 → 3.75 at 1440×900 — still over the 3:1 bar at all four, and with nothing left under it. The fix is the same 84px, added to the descent rather than taken off it: the white band, the lit water and the darkening then keep the lengths R12 and R16.4 tuned them to, and the field is what the section grew by. Written as the old expression plus a constant, because the field's height is a constant and not a fraction of the viewport. After: 5.98 / 5.22 / 4.92 / 6.13:1. One side effect, disclosed rather than hidden. The empty run between the badge and the footer is UNCHANGED — 59.1px at 390, 63 at 1440, the numbers R16.4 landed on — but a longer descent reaches full black further from the bottom, so more of that same run is flat rather than still ramping: 39 → 53.5px at 390 and 41.5 → 56.5 at 1440. The band a reader sees is the same height; what moved is whether its top rows are rgb(0,0,0) or rgb(4,4,4). The other lever for the same contrast is 84px off .get's own top padding, which would keep the descent where it was and spend the white dissolve's runway instead — R12's tuning, so it is Paul's call and not one to make while shipping a field. */ /* A tenth shorter (Paul, 08-27, Bim on the alias: "reduce the amount of the dark blue gradient at the bottom just slightly"): 334/484 → 300/436, the svh term with them. */ --ocean-dark: clamp(300px, calc(30.6svh + 76px), 436px); /* The floor of the deep (S28, Paul 08-26): the closing darkens into the ocean's own navy, not into black. Not a token — tokens.css has no deep-ocean colour; this is the scene gradient's last stop (0,10,153) taken down to where white footer type still clears 17:1. Hand-tuned, and hand-tuned against a palette that is the client's: re-check it on a rebrand — nothing upstream will. */ --ocean-floor: #030b4c; /* How far the closing zone starts UNDER the FAQ (R15). Paul asked for a smaller FAQ and explicitly released the rule that the light page has to contain it: the ocean may begin rising beneath the section's lower part. The fade itself is untouched — R12 tuned its length and its nine stops — so this moves where it STARTS rather than how long it takes, and the last rows get a faint blue wash behind them instead of the section ending on flat grey. It lands in the FAQ's own overlay landing room, which is empty except when an answer is open, and an answer is opaque. */ --ocean-under: clamp(120px, 20vh, 220px); --panel-gap: 22px; /* == --page-pad-x, the page's own gutter */ --hold-h-cap: 1100px; /* The stuck card clears the nav (S28, Paul 08-26: the panel sat 8px UNDER the 64px header at 1440, 42px under it on a phone). The top gap is the nav's height plus a breath of air; the other three gaps stay --panel-gap. --hold-h pays for the difference. */ --nav-air: 8px; --panel-top: calc(var(--nav-h) + var(--nav-air)); /* svh is the toolbar-EXPANDED height; iOS collapses the toolbar on the first scroll down and every hold sits below the masthead, so the panel was ~40-120px short of the fold Safari actually shows (S29, Paul's iPhone 08-27). dvh re-resolves only when a toolbar transition ENDS, and the panel is stuck by its top: it grows or shrinks from its own floor, and --hold-run pays the same delta at .world--hold's own bottom — nothing above the stuck point moves. Rejected: lvh, which would never relayout but would put the panel's floor under the toolbar whenever it is expanded, i.e. on every upward scroll. */ --hold-h: min(var(--hold-h-cap), calc(100dvh - var(--panel-top) - var(--panel-gap))); --hold-run: 90svh; /* The band of sky the card leaves at the top of the panel, and --grow derived from it rather than set as a magic number: the card is exactly as tall as the panel allows at every viewport, which is what retires §13's short-viewport --grow override (the fan no longer overhangs the card, so there is nothing left for a short window to break). There is a head and no foot. The head is sky the world needs — it is where the mascot stands and where the folder's own fan breathes. The foot was 12-24px of it under the card, and the card's bottom edge is the drawn phone's crop line, so that band read as a strip of sky between a cut-off phone and the panel's floor — a rendering fault rather than a screen rising out of the world (Paul, live review, R10). The card's bottom edge IS the panel's floor now. Checked at the tightest viewport it produces: at 375 the screen is 229.6px in a 331px panel, so its bottom corners sit 10.7px inside the panel's own 40px corner arc and never overhang it. */ --card-head: clamp(40px, 9vh, 96px); --card-h0: 132px; /* the filed folder's own height */ /* One cap on top of that, and it is the phone's: the columns stop widening at --wcard's own cap, so past ~720px of card the drawn screen can no longer be tall enough to reach the crop line and floats in the middle of it instead. A 1920×1080 window gets more sky rather than a taller card. */ --card-h1: min(720px, calc(var(--hold-h) - var(--card-head))); --grow: calc(var(--card-h1) - var(--card-h0)); /* How far the folder fans open (the multiplier on its 120px native plate), and how much of the stacked card the phone column takes below the text group. Both are per-surface: a 2.2× fan is 264px of folder, which a 390px phone's card cannot spend and a 1440px one can. S24 removes the cards' own .wcta door and gives the room it freed in .wtextcol back to this instead — 38%→42% here, the default for any viewport this tier's media queries below don't already touch (≥780px tall). Measured: --vis rises 0.577→0.644 at 390×844 and 0.508→0.568 at 430×932, with 85px and 69px of .wtextcol slack (the centred folder/title/desc group's own spare room above the crop line) left over at each — plenty clear of the ≥8px floor. */ --fan-max: 1.6; /* The card's two rows under 900px (S38, the contract's point 1). The text column is sized by its CONTENT and the phone column takes what is left, never under --phone-min — where --phone-band used to be a fixed share of the card with the text group CENTRED inside it, which is what let a two-line title spill out of the band both ways (#42: the description over the phone, the folder above the card's roof). --text-top is the text column's own top pad, and the folder is its first item, so it is also where the folder's roof sits: 4.2cqh of .wcard reads 28.3px at 390×844, which is S36's measured 36.4 less Paul's 8 (#41). It rides the card's own height, so a shorter card gets a shorter pad (21.5px at 375×667) instead of the same one. */ --phone-min: 40%; --text-top: clamp(20px, 4.2cqh, 40px); /* The drawn screen (§11's .mini, R3). --phone-w is in cqw of .wcard so it tracks the card rather than the window; it is also the radius and island's own base, which is why it has to be a length and not a percentage — a percentage border-radius resolves per axis and would draw an ellipse on a 9:16 box. --phone-drop is how far below its rest position the screen starts, --phone-float the extra drift it keeps on through the plateau. --bezel is measured against the mascots' own rendered stroke (see .mini). */ --phone-w: clamp(180px, 80cqw, 330px); --phone-drop: 96px; --phone-float: 26px; --phone-head: 14px; --bezel: clamp(7px, 1.35vw, 9px); } .worlds { position: relative; z-index: 1; } /* No scroll snap on the document. S36 c put a proximity snap here as the "magnet"; it lasted a day. Paul, 08-28 (desktop): "it takes too much scroll to continue to the other world card" — measured with 120px wheel ticks at 1440×900: sixteen ticks in a row stalled at scrollY 1737, the end of brunch's hold, Chrome pulling every one of them back to a snap position, while the same ticks with the snap off advanced 120px each. A wheel ends a scroll at every tick, so a proximity snap turns each tick into a tug-of-war; touch only escaped it on momentum. See .world below. */ .world { position: relative; overflow: hidden; isolation: isolate; /* The nav is sticky, so anything scrolled to lands under it — ?world= jumps included (site/great-day found this with its masthead's ascenders clipped). The 8px is slack on top of the band, not part of it: the band itself is --nav-h now. */ scroll-margin-top: calc(var(--nav-h) + 8px); /* The "magnet" Paul asked for on 08-28 ("we lack smoothness and auto-magnetism") was tried as a proximity snap on the document with each hold as a snap point, and taken out the same day: a scroll that ends near a card settled onto it, but on a wheel EVERY tick ends a scroll, so leaving a card took a dozen tugs (measured — see the note above .world). The roulette deck can snap because its scroller is its own and the gesture is one swipe; a document with sticky holds cannot. What remains of the ask is the 140ms low-pass on --t in index.html: the card glides and settles, the page scrolls natively. */ /* Each world declares its own progress so the props have a value before JS has ever run — a world below the fold that never gets observed still renders at its rest pose. */ --wp: 0.5; /* --wp/--wtravel are this direction's names for the foundation prop frame's --p-progress/--p-travel (S17). --p-travel is bridged on the zone rather than on :root so .closing's own shorter travel resolves against its own --wtravel rather than against the page's. --p-progress is bridged on .wsky (below), since S30: --wp no longer inherits, and the bridge has to sit where the props are. */ --p-travel: var(--wtravel); } /* The four scroll scalars are registered NON-inherited (S30, Paul 08-27: the panels' zoom read laggy on Safari and Chrome). Measured over CDP invalidation tracing at 390×844, one frame of a hold's entry re-styled 189 elements: --t/--t2/--t3 were written on .whold and --wp on .world, and an inherited custom property changing on an ancestor makes the engine re-resolve every descendant — the drawn phone screens, hundreds of elements that never read them, included. Non-inherited, a write touches the element written and nothing below it, so the driver writes each scalar on the handful of elements that read it (index.html's writeT and its .wsky/.mini writes) and the screens sit out the morph. Two consequences to keep in mind: var(--t) on an element now reads that element's OWN value (initial 0), never an ancestor's — so a reader that isn't written is a reader at rest — and the foundation bridge --p-progress lives on .wsky, not on .world, or its own inheritance would carry the change back down the whole zone. --tp and --ta are the same story one level down: derived on .mini / .wtitle and read there, never below. */ @property --t { syntax: ''; inherits: false; initial-value: 0; } @property --t2 { syntax: ''; inherits: false; initial-value: 0; } @property --t3 { syntax: ''; inherits: false; initial-value: 0; } @property --wp { syntax: ''; inherits: false; initial-value: 0.5; } @property --tp { syntax: ''; inherits: false; initial-value: 0; } @property --ta { syntax: ''; inherits: false; initial-value: 0; } /* The prop frame's progress, bridged on the sky (S30): --wp is written here by the driver, and --p-progress inherits from here to the props and no further. */ .wsky { --p-progress: var(--wp); } /* The dioramas: inset, rounded, the page grey showing between them. */ .world--panel { width: var(--col); margin: clamp(18px, 4vw, 34px) auto; /* A diorama is the biggest raised surface on its screen, so it wears the card's clothes: --radius-card — the one non-token radius the system carries — and the card shadow. */ border-radius: var(--radius-card); min-height: clamp(520px, 78vh, 760px); box-shadow: var(--card-shadow); } /* The masthead is edge to edge: an opening should not look like one more card in a stack. Exactly one viewport (Paul, 08-24) — the clamp this carried let a tall phone see a sliver of the first card before any scroll, which is the "one viewport" rule failing by a few dozen pixels. 100svh, the repo's own convention (.whold uses it below) rather than 100vh, so an iOS toolbar showing or hiding cannot change the masthead's height mid-scroll. And it starts at y=0, not y=--nav-h (round 3, R1). The nav is `position: sticky`, so it occupies flow and main.worlds began exactly one nav-height down the page; .wsky is `inset: 0` on this box, so it structurally could not paint above it and the top band of every load was bare body grey. Two consequences of the same bug: 100svh measured from --nav-h also ended one nav-height PAST the fold, so "exactly one viewport" was off by 64px as well. A negative margin (rather than switching the nav to `position: fixed`) is the smaller lever: it moves this one section and everything below it up together, leaves the nav in flow for every other page that shares this skin, and the script's own door-fade/nav-ink machine reads `navEl.offsetHeight` at runtime and is unaffected either way. The stage below pays the height back as padding so nothing lands under the nav. */ .world--open { width: 100%; margin: calc(-1 * var(--nav-h)) 0 0; border-radius: 0; min-height: 100svh; } /* The masthead spends a whole viewport leaving, and no other zone gives its props that much room, so it carries its own --p-travel rather than a diorama's (Paul, 08-25). Its --wp covers 0.5 → 1 over that exit — rest pose at load, as drawn — so the number here is twice the travel any prop actually shows: 170 buys the near hill 81px and the farthest cloud 8.5. Keyed to the homepage's own masthead. fair-questions.html shares .world--open, but its stage is a scrolling list rather than a one-viewport exit, so its props keep the diorama travel. */ .world--open[data-world="clear-sky"] { --p-travel: 170px; } /* The four story worlds: a runway, not a panel. The section itself carries no cosmetics and no --t dependence (the funnel's own load-bearing rule: a morph must never resize the thing scroll is snapping/measuring against) — it is just scroll room. --whold is the sticky panel inside it, and it is what actually wears the diorama's radius and shadow now. */ .world--hold { min-height: calc(var(--hold-h) + var(--hold-run)); isolation: auto; /* The base .world rule's overflow: hidden would make this runway a scroll container of its own — since it never actually scrolls internally, .whold's sticky position would resolve against its static box and never stick at all. Visible, so the containing block .whold sticks against is the real document scroller. */ overflow: visible; /* A real, static gap between runways (Paul, 08-24: two panels could render touching) — margin, not padding, so adjacent .world--hold siblings collapse to one gap rather than stacking two. A card can never render outside its own runway's box (that is what sticky positioning is), so this margin is a hard floor on the on-screen distance between one card's release and the next one's entry — verified by the CDP scroll sweep (tools/cdp-worlds-check.mjs), not just asserted here. */ margin-block: clamp(56px, 9vh, 120px); } /* .whold is now pure geometry — sticky offset, size, nothing else. It carries no cosmetics and, critically, no transform: the --t driver reads this box's own distance from stuck (index.html), so scaling it would feed its own output back into its input. .wpanel inside it is what wears the diorama and what scales. */ .whold { position: sticky; top: var(--panel-top); height: var(--hold-h); width: calc(100% - 2 * var(--panel-gap)); margin-inline: auto; /* Visible, not hidden: a mascot may still break the frame (§10) — only the sky clips. */ overflow: visible; } /* The whole world, minimised → rest → minimised again. Background included: the sky, its props, its mascot and the card are all inside this one wrapper, so the panel enters as a small complete diorama rather than as a frame with things popping inside it. 0.88 is the floor because a deeper zoom starts to read as a slide transition rather than as a world arriving. */ .wpanel { position: absolute; inset: 0; border-radius: var(--radius-card); box-shadow: var(--card-shadow); display: grid; place-items: center; transform: scale(calc(0.88 + 0.12 * var(--t, 0))); /* Its own compositor layer (S30, Paul 08-27: the scale read laggy on Safari and Chrome). Without it the whole diorama — sky, props, mascot, card — was re-rasterised at every step of the 0.88→1 zoom; on its own layer the zoom is compositor work and only what really changes inside is repainted. The sky gets a layer of its own for the same reason, so the card growing on --t never repaints the gradient behind it. Measured over CDP tracing, a 180-frame entry at 390×844, software raster: RasterTask 686ms → 441ms with the three promotions (this, .wsky, .wstack); style and layout cost were unchanged, which is where a phone's remaining work is — the card's height is a size container and every --t step re-resolves .wtitle's container query. */ will-change: transform; } .wpanel .wsky { overflow: hidden; border-radius: inherit; will-change: transform; } /* The sky fills its world and nothing else. Gradients are the funnel's own, negative stop percentages intact (D49). Selectors are keyed to the plan each world now carries (brunch/laser/karaoke), not to the scene name, since a scene can move between plans (D49 still owns the scene itself, in the funnel). */ /* overflow-anchor: none (08-27) — a sky is scenery and must never be the scroll anchor. Its props are lazy images with height: auto, so one that decodes after a jump grows from 0 to its box and Chrome's scroll anchoring "compensates" by moving the page: measured on the closing at 1126×854, a jump to the end landed 160px short of the floor until a second scroll, because the coral loaded on arrival. Excluding the sky leaves the anchoring to the content in front. */ .wsky { position: absolute; inset: 0; z-index: 0; isolation: isolate; overflow-anchor: none; } [data-world="clear-sky"] .wsky { background: linear-gradient(0deg, rgba(242,242,242,0.4) 27.916%, rgba(150,224,255,0.4) 55.994%, rgba(0,180,255,0.4) 107.684%), var(--surface-primary); } [data-world="laser"] .wsky { background: linear-gradient(-0.971deg, rgba(145,167,247,0.9) -4.807%, rgba(190,150,255,0.75) 45%, rgba(236,224,255,0.7) 97.208%), var(--surface-primary); } [data-world="karaoke"] .wsky { background: linear-gradient(-0.971deg, rgba(54,141,255,0.8) -4.807%, rgba(0,43,255,0.8) 31.102%, rgba(0,0,238,0.8) 97.208%), var(--surface-primary); } [data-world="brunch"] .wsky { background: linear-gradient(0deg, rgba(255,241,223,0.5) 20%, rgba(160,179,241,0.55) 62%, rgba(120,150,240,0.6) 105%), var(--surface-primary); } /* The prop frame — the 420×912 artboard the props were drawn in, so --ex/--ey/--ew stay the funnel's own numbers, and the --er rotation R7 needed for the ocean's seaweed and coral — is foundation.css's now (S17). What stays here is the column it sits in: this one is 100% of its own panel where site/great-day's is 100vw of the page, which is the whole difference between a diorama and a full-bleed sky. */ .p-col { position: absolute; inset: 0; margin-inline: auto; width: min(100%, 480px); } /* One fenn per world, and four of the five have never been on a screen before. Sized by --im (ink as a fraction of its own box) and placed by --ic, both measured with tools/measure-mascot.mjs, which reproduces the funnel's own six. Only filter-free exports are used: eight of the twenty carry un-flattened Figma feGaussianBlur drop shadows, and brand.md forbids internal filters on a character because they rasterize soft on device. */ .wsky .fenn { position: absolute; --box: calc(var(--fink) / var(--im)); width: var(--box); left: calc(var(--fx) - 0.5 * var(--box)); top: calc(var(--fy) - var(--ic) * var(--box)); transform: translate3d(0, calc((0.5 - var(--p-progress, 0.5)) * var(--p-travel) * 0.85), 0); } /* ── The living balloon (Paul, 08-27): "the hot-air balloon should be animated — it should float, the eyes following the mouse, moving a bit towards the mouse, a subtle and elegant magnetism; on click or tap it should blink." The masthead's mascot is the one inlined in the row now: after the word, painted in the hue's first stop, blinking on a 1s step; reduced motion keeps it and drops the blink. The ported .typed block above stays verbatim — display, min-height and its own pen are all overridden here on specificity alone. */ .world--open .typed-row { position: relative; display: block; white-space: nowrap; min-height: 1lh; } .world--open .typed-row::before { content: attr(data-text); position: absolute; left: 0; top: 0; white-space: nowrap; color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0.03125em #fff; /* 2 × 3/192: the fill covers the inner half */ -webkit-mask-image: conic-gradient(from 281deg at 50% 50%, rgba(0, 0, 0, 0.2) 0% 41.1%, #000 47%, rgba(0, 0, 0, 0.2) 53.8% 92%, #000 97.4%, rgba(0, 0, 0, 0.2) 100%); mask-image: conic-gradient(from 281deg at 50% 50%, rgba(0, 0, 0, 0.2) 0% 41.1%, #000 47%, rgba(0, 0, 0, 0.2) 53.8% 92%, #000 97.4%, rgba(0, 0, 0, 0.2) 100%); pointer-events: none; } .world--open .typed { display: inline-block; position: relative; z-index: 1; min-height: 0; vertical-align: top; /* A clipped-gradient fill only paints inside the element's own box, and at line-height 1 the box stops at the em: the g of "things" lost its descender flat at the baseline row and the glow ended on a hard right edge (Paul, 08-26). Padding grows the paint box past the descender and the caret; the matching negative margin keeps the layout box — and every gate measurement — where it was. */ padding: 0.1em 0.16em 0.22em 0.06em; margin: -0.1em -0.16em -0.22em -0.06em; background-image: linear-gradient(180deg, var(--w-a) 0%, var(--w-b) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 5px 20px var(--w-glow)); } .world--open .typed::after { content: none; } .world--open .typed[data-phase="hold"]::after { content: none; } .world--open .typed-row[data-w="0"] { --w-a: #6e0040; --w-b: #4d0080; --w-glow: rgba(110, 0, 64, 0.3); } /* cotton-candy */ .world--open .typed-row[data-w="1"] { --w-a: #3d0f8c; --w-b: #1a3aa8; --w-glow: rgba(61, 15, 140, 0.3); } /* sunburst */ .world--open .typed-row[data-w="2"] { --w-a: #002ea8; --w-b: #1c66a8; --w-glow: rgba(0, 46, 168, 0.3); } /* dawn-meadow */ .world--open .typed-row[data-w="3"] { --w-a: #0a4d2b; --w-b: #0f6b52; --w-glow: rgba(10, 77, 43, 0.3); } /* misty-forest */ .world--open .typed-row[data-w="4"] { --w-a: #8f1030; --w-b: #a8440f; --w-glow: rgba(143, 16, 48, 0.3); } /* desert-sunset */ .world--open .typed-caret { display: inline-block; width: 0.07em; height: 0.78em; margin-left: 0.06em; vertical-align: top; margin-top: 0.14em; border-radius: 1px; background: var(--w-a); animation: typed-blink 1s step-end infinite; } /* The tail (S23). "you talk about" is its own row under the slot at every width below 1280: the sentence is prefix / slot / tail, and the slot's width changes on a timer, so the tail must never share its line. */ .world--open .typed-tail { display: block; } @media (min-width: 1280px) { /* Desktop reads "Do the karaoke night|" / "you talk about" (Paul, 08-26): the slot goes inline after the prefix; the tail keeps its own row. MEASURED at 1280 and 1440 (same 96px font-size at both, the clamp's own ceiling): "Do the karaoke night" is the longest line at 879.11px, the other four run 571.23–666.59px, none wraps at either width. (571.23px for "things" — S24 checker re-measurement corrected this from a mismeasured 594.97px; same method, same tier, DOM Range from h1.firstChild through .typed-caret at 1280×800.) A bare max-width is not enough. The masthead's text column is a flex item with align-items:center (:719), which sizes it to its widest child's own preferred width rather than stretching it — so with the row inline, h1's OWN preferred width now varies with the word (it is that widest child), and 22ch measures 1440.5px in this 860-weight display face (its "0" is unusually wide), well past every word's own width, so it never actually caps anything: max-width alone still lets the whole column jog sideways every ~2s as the word cycles — the "h1 box identical for all five words" gate check (typed) caught it. 900px is a fixed width, not a cap: 879.11 + ~21px, comfortably past the longest word with room for the caret, small enough that the column still reads left of centre at both 1280 and 1440. */ .world--open .typed-row { display: inline-block; vertical-align: top; } .world--open .display { width: 900px; max-width: 22ch; } } @keyframes typed-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* And it stops blinking once the masthead has left the viewport (S30): a running CSS animation costs a style pass every frame whether or not anyone can see it, and this one was still ticking under every plan card. .is-off is the observer's own leave signal. */ .world--open.is-off .typed-caret { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .world--open .typed-caret { animation: none; } } /* /SOURCE */ /* SOURCE — the YC credibility mark (S25), a masthead eyebrow above the claim. Non-interactive by decision: it is a
, not an , and carries no .btn — it reads, it does not lead anywhere, so neither the buttons gate nor the 44px touch-target rule applies to it. The pill geometry (34px tall, 999px radius) is this branch's own placeholder, sized to sit comfortably above the h1 until Marc supplies the official mark. */ .credit { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 8px; border-radius: 999px; background: var(--surface-raised); box-shadow: var(--pill-shadow); font-size: var(--body-sm-size); font-weight: 510; color: var(--text-primary); margin-bottom: 16px; } .credit svg { width: 18px; height: 18px; flex: 0 0 18px; } /* /SOURCE */ .lede { margin-top: 18px; font-size: var(--lede-size); line-height: 1.38; font-weight: var(--body-weight); color: var(--ink-support); max-width: 30ch; } .doors { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } /* ───────────────────────────────────────────────────────────── 2 · Nav — both doors, live in the first frame (the LA-38 lesson) Fully transparent now (Paul, 08-24): the funnel's own glass — fill, frost, the bright inset rim — is gone, because a diorama page reads better with nothing framing the top of it. Nothing left to catch a highlight, so the rim went with the frost rather than sitting on its own as a stray line. .nav--on-dark is the one adaptive hook: the script flips it while a dark world's own sky is passing directly behind the nav band. */ .nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--page-pad-x); color: var(--text-primary); transition: color 200ms linear; } /* The lockup is fenn.chat's own (Paul, 08-28, Bim #45: "fenn text and icons are too far from each other — use the already existing logo + fenn text from the current website, and just change the color of the text"). Measured off that site's nav: mark clamp(30px, 3vw, 36px), gap 9px, word clamp(20px, 2.2vw, 24px) at 800 with −0.04em tracking. The mark stays our inline #fennmark (the same character, a vector); only the ink is this page's — it flips with .nav--on-dark like the links. */ /* S42 (Bim #48/#49): the mark is #fennmark-nav on a tight viewBox, so the box IS the ink. Before, the nav
. ───────────────────────────────────────────────────────────── */ .sky--only { opacity: 1; } /* Round 3, R8. The rows were 52.8px closed, had no hover at all, and the only thing that moved when one opened was the chevron: the answer appeared instantly and the row it came out of never acknowledged the click. Bigger rows, a hover, an animated open, and an open row that reads as lifted off the stack. The animation is progressive enhancement rather than a script for everyone. Where the browser can interpolate to `auto` (interpolate-size + ::details-content — Chrome 131+ has both; Safari 26 has the pseudo and not the keyword, see S29) it does the whole thing itself, both directions, including the close that name="" exclusivity fires on a sibling. Everywhere else a twelve-line tween in the page handles the open (see the script); the close stays instant there, and the rows still work with no JS at all, which is why they are
in the first place. */ .qa { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; } /* The rows are a fixed stack. An answer opens as an OVERLAY on top of the rows under it, never by growing the row it came out of (R11): the section's own height is identical open and closed, and the closing beat below it never moves. name="" exclusivity is what makes that safe — one answer is open at a time, so what it covers is only ever hidden while it is being read. The rim went with it. It used to be a 1px inner line on the row's own border box, and the overlay below the summary is a separate box: the two could not be made to line up to the pixel, and the shadow already does the separating (§4 made the same call for the buttons). */ .qa details { position: relative; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: var(--pill-shadow); /* Visible, not hidden: the answer overlay lives outside this box. What clips the animation is the overlay's own overflow. */ overflow: visible; /* ONE curve for the whole open (S38 Part E, Paul 08-28 #36 at 1126×854: "When expanding we can notice the lower part of the row is cut. The transition from a shape to the other one is not smooth."). The lift used to run on --ease-spring while the answer's own height ran on --ease-out over the same 240ms, and recorded at 40ms the two do different things: the height rises monotonically to 82.59px and stops, while the scale goes past its target to 1.0652 at ~167ms and comes back to 1.06 by ~249ms. A panel that grows, overshoots and settles while the answer inside it only grows is two shapes, which is what he is describing. The overshoot was deliberate once (a small spring reads as a response to a click) and it is the thing being asked about, so the transform joins the rest of the list on --ease-out. border-radius rides it too, so the summary's bottom corners square off in step with the answer rather than snapping the moment [open] flips. */ transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-radius var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), background-color var(--dur-fast) linear; } /* What the overlay covers recedes. Without this the row directly under an open answer shows its own bottom third sticking out below the panel — a horizontally sliced question, which reads as a rendering fault rather than as one card in front of another. Everything after the open row dims together, so the panel is plainly the thing in front and the stack behind it is plainly still there. */ .qa li:has(details[open]) ~ li details { opacity: 0.3; } /* Hover only where a pointer can hover (S30, Paul 08-27): on a touch screen :hover sticks to whatever was last tapped, so a tapped row kept the lifted white of a hover after it closed. (hover: hover) is false on iOS and true under the gate's phone emulation, so the faq hover assertion still runs there. */ @media (hover: hover) { .qa details:hover { background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 8px 18px rgba(173, 179, 189, 0.26), 0 26px 30px rgba(173, 179, 189, 0.18); } } /* Open sits on a higher plane than the rows either side of it. 1.06, not the 1.02 it was (R16.2): a 2% lift on a 74px row is under a pixel and a half of growth, which the eye reads as the row settling rather than as it coming forward, and the shadow was doing all the work on its own. 6% is 4.4px of vertical growth and 43px of horizontal at the widest column — plainly in front, and still inside the section's own side padding at every viewport, so nothing clips. The shadow went with it rather than staying put; a card that grows without casting further reads as a scaling bug. */ .qa details[open] { z-index: 1; transform: scale(1.06); background-color: var(--surface-raised); box-shadow: var(--qa-shadow-open); border-end-start-radius: 0; border-end-end-radius: 0; } :root { --qa-shadow-open: 0 14px 30px rgba(173, 179, 189, 0.34), 0 44px 56px rgba(173, 179, 189, 0.26); } .qa summary { display: flex; align-items: center; gap: 12px; /* No grey tap flash on iOS (S30, Paul 08-27): Safari paints its own highlight over anything tappable, and on a row that lifts and opens it read as a grey overlay. The row's own open state is the acknowledgement. Same pair the Ask field already carries. */ -webkit-tap-highlight-color: transparent; touch-action: manipulation; /* 44px was the floor when the row was the target; ~60px is the size the row wants to be next to a 54px button. */ min-height: 56px; padding: 19px 22px; cursor: pointer; list-style: none; font-size: var(--body-md-size); line-height: 1.3; font-weight: 700; } .qa summary::-webkit-details-marker { display: none; } .qa summary::after { content: ""; flex: 0 0 auto; margin-left: auto; width: 11px; height: 11px; border-right: 2.5px solid var(--ink-support); border-bottom: 2.5px solid var(--ink-support); transform: rotate(45deg) translateY(-2px); transition: transform var(--dur-base) var(--ease-out); } .qa details[open] summary::after { transform: rotate(225deg) translateY(-2px); } .qa .a { padding: 0 22px 20px; } /* interpolate-size is scoped to the rows rather than set on :root: it is inherited, ::details-content picks it up from here, and nothing else on the page should quietly gain the ability to animate to a keyword. */ /* The overlay itself, in whichever of the two boxes this browser gives us. It carries the row's own surface so the summary and the answer read as one card, and it is opaque so the rows it covers do not print through. top: 100% is the summary's bottom edge — the row's height IS the summary's, since this box is out of flow. */ .qa details::details-content, .qa details > .a { position: absolute; top: 100%; left: 0; right: 0; background: var(--surface-raised); border-end-start-radius: var(--radius-md); border-end-end-radius: var(--radius-md); box-shadow: var(--qa-shadow-open); overflow: hidden; } /* Two features, two gates (S29, Paul's iPhone 08-27). Safari 26 draws ::details-content but has no interpolate-size, so the two @supports below are NOT one: where the pseudo exists it IS the overlay and the div inside it goes back to being flow content — gated on the selector, because that is the fact it depends on. Gating it on interpolate-size (as it was) left Safari with BOTH boxes absolute: .a at top:100% of an empty overflow-hidden pseudo, clipped to nothing — a lifted row, dimmed rows under it, and no answer. */ @supports selector(::details-content) { .qa details > .a { position: static; background: none; box-shadow: none; overflow: visible; } } /* And only where the browser can interpolate to `auto` does the pseudo animate itself; elsewhere the page's own tween drives .a's height and the pseudo, overflow hidden, grows with it. */ @supports (interpolate-size: allow-keywords) { /* Scoped to the rows rather than set on :root: it is inherited, ::details-content picks it up from here, and nothing else on the page should quietly gain the ability to animate to a keyword. */ .qa details { interpolate-size: allow-keywords; } .qa details::details-content { block-size: 0; transition: block-size var(--dur-base) var(--ease-out), content-visibility var(--dur-base) allow-discrete; } .qa details[open]::details-content { block-size: auto; } } .qa .a p { font-size: var(--body-md-size); line-height: 1.44; font-weight: var(--body-weight); color: var(--ink-support); } .qa .a p + p { margin-top: 10px; } .inline { font-weight: 700; color: #1f5fbf; /* 5.62 on white */ text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } /* ───────────────────────────────────────────────────────────── 7 · The signpost world — fair questions The sub-page is one world rather than a document, so it belongs to the same place as the rest. misty-forest, its own leaves, and the accordion stacked in it. ───────────────────────────────────────────────────────────── */ [data-world="misty-forest"] .wsky { background: linear-gradient(0deg, rgba(242,242,242,0.4) 27.916%, rgba(129,193,127,0.4) 55.994%, rgba(0,213,255,0.4) 107.684%), var(--surface-primary); } .stage--qa { display: block; padding: clamp(30px, 7vw, 56px) clamp(20px, 5vw, 40px) clamp(150px, 20vh, 210px); /* Same nav-band repayment as the masthead's own stage (R1): this page's .world--open is pulled up under the nav too, and unlike the masthead this stage is block-flow, so its first line would land in the band without it. */ padding-top: calc(var(--nav-h) + clamp(30px, 7vw, 56px)); max-width: 640px; margin-inline: auto; } .world--open:has(.stage--qa) { min-height: 100vh; } /* ───────────────────────────────────────────────────────────── 8 · The solve, made visible (the value pass, 08-24) The did chip fenn's result once landed as (channel surface, pill shadow, his own sparkle, D17) moved with the thread it was part of — the wcard apparition (§11) is what makes the outcome visible in the three plan worlds now. ───────────────────────────────────────────────────────────── */ .lede em { font-style: normal; font-weight: var(--h4-heavy-weight); background-image: linear-gradient(96deg, var(--accent) 0%, var(--accent-alt) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 8px rgba(80, 177, 249, 0.25)); } /* ───────────────────────────────────────────────────────────── 10 · Breaking the frame (Paul: push the layout) The mascots stop living inside their panels: a fenn can stand on the panel's edge, half out of the world — the OG cards' own move, where the mascots overlap the type. The panel keeps clipping its sky; only the fenn is freed. ───────────────────────────────────────────────────────────── */ .world--panel { overflow: visible; } .world--panel .wsky { overflow: hidden; border-radius: inherit; } .world--panel { isolation: auto; } .wsky { border-radius: inherit; } /* No .fenn--free any more (08-27): the apple stands in brunch's sky under the same rules as laser's and karaoke's mascots. */ /* The same floor for the mascots that live in a held panel's sky. Theirs is placed as a fraction of the panel (--fy), which used to sit well clear of the nav because .whold's own sticky offset had a hard 64px floor; the panel's gutter is 22–56px now, so 13% of it lands karaoke's northern-lights fenn in the band. Three terms above the band, all measured rather than guessed: ~40px of prop drift still running while --t plateaus (--wtravel × 0.85 × the half-range --wp covers during a hold), ~6px of sticky slop that --t's own 0.999 plateau threshold tolerates, and 10px of margin. */ .world--hold .wsky .fenn { top: max(calc(var(--fy) - var(--ic) * var(--box)), calc(var(--nav-h) + 56px - var(--panel-top))); } /* ───────────────────────────────────────────────────────────── 11 · The apparition Paul's review round (08-24): the single flowing column splits into two — a text column (folder, then title, then a two-line description of the one feature the card is about) and a phone column (one big drawn screen, cropped at the card's own bottom edge), alternating sides card by card. Still the Plans funnel's own single-scalar morph (skin-roulette.css §"The card, morphing on --t"): minimised it is a ~132px folder — the funnel's own plate-back tab, three prints, front pocket (skin-roulette.css: 747-815), verbatim, wrapped in one scale so the whole assembly reads at world scale instead of deck scale. Expanded, the folder fans open at the head of the text group, and the phone column's single screen rises through the card on the other side. --t comes from the sticky hold (§1's .whold), not from an IntersectionObserver "in" class: it is the scroll position itself, continuous, entry and exit the same curve reversed. Both columns are absolutely positioned, like every apparition part before them — .wcard's own height stays a straight function of --t, never of its children's content (the funnel's own rule, transplanted), so a column's content can never resize the thing scroll is measuring against. Round 3, R4: the text column is a vertically centred flex group (folder, then title + description, then the door) rather than a set of boxes pinned to fixed offsets from the card's top. The old `.wtext { top: 78px }` left 294px of dead space under the description at 1440, and the 78px itself only existed to clear a fan that rose 228.8px above the card. The fan is inside the group now, so neither number is needed and the group sits in the middle of its own column at every card height. */ .wcard { position: relative; z-index: 2; width: min(440px, calc(100% - 44px)); height: calc(var(--card-h0) + var(--grow) * var(--t, 0)); /* Anchored to the panel's floor, not centred in it: the phone's crop line is the card's own bottom edge, and it wants to BE the ground rather than to hover above it. It also means the filed folder rises out of the world's floor as --t climbs, which is the deck's own arrival read at world scale. */ align-self: end; contain: layout style; /* A size container, not just layout/style: the @container query on .wtitle below reads .wcard's own height (a pure function of --t, S12) to tell the still-filed range from the huge expanded one (B2 fix). */ container-type: size; container-name: wcard-morph; /* A grid, not two absolute bands (S38). Row 1 is the text column at its content's height, row 2 is the phone column at whatever is left — never under --phone-min. The ≥900px block puts it back to `block` with both columns absolute, because side by side they each want the card's full height. */ display: grid; grid-template-rows: auto minmax(var(--phone-min, 40%), 1fr); } /* The text column: mobile stacks it above the phone column (one column, the funnel's own vertical idiom); ≥900px docks it to one side, .world--mirror flipping which (§5 below). It spans its own region top to bottom and centres its contents in it — the column itself still carries no background, and .wcard's height is still a pure function of --t, so nothing in here can resize what scroll is measuring against. Under 900px it is the grid's first row and its height is its own content's (S38); --phone-band, the fixed share it used to be given with its group centred inside, is gone. */ .wtextcol { position: static; min-height: 0; padding: var(--text-top) 22px 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: clamp(12px, 2vh, 22px); } /* The folder: skin-roulette.css's .stack/.plate-back/.plate/.ph* verbatim (same clip-path, same pile/fan coordinates), wrapped in a scale that ranges 1.1→--fan-max instead of the deck's 0.533→1 — 120px of native plate height reads at 132px filed and world scale expanded, without redrawing a single coordinate. The horizontal travel (30.8px) is the deck's own 14 at 2.2×. .wfolder is the flex item; .wstack floats inside it. The wrapper's height is exactly the scaled plate's (120 × the scale), so the centred group's own height tracks the fan as it opens instead of the fan escaping its layout box. The vertical travel the deck has (−104, −228.8 here) is gone with it: the fan used to rise to clear a top-pinned title, and there is no top-pinned title any more. */ /* PORTED from assets/skin-roulette.css:697-808 — verbatim except s/.stack/.wstack/, s/.plate/.wplate/, s/.ph/.wph/, .wfolder, .wstack. The two named selectors are the whole divergence and both are S6: the fan opens to --fan-max here instead of the deck's fixed 0.533→1, and it needs a flex-item wrapper whose height tracks the scale, so .wstack's left/top/transform are re-derived and .wfolder is new. Every coordinate, the clip-path and the three-layer cool-cast shadow are the funnel's own, unchanged. Divergence is a decision; record it as S-n before you write it. */ .wfolder { position: relative; flex: 0 0 auto; width: 151.3px; height: calc(120px * (1.1 + (var(--fan-max, 1.7) - 1.1) * var(--t, 0))); } .wstack { position: absolute; width: 151.3px; height: 120px; transform-origin: top left; /* The plate sits 15.6px inside the stack and the stack scales from its top-left, so −15.6px × the scale puts the PLATE's left edge on the text column's own at every --t (S38, #41: "drifted on the left by 6px" — measured 12.1px at --t 1). The old −30.8px × --t was the deck's fan-out travel, which is a different job. The ≥900px block restores that travel for the desktop, where the card is two columns and the folder is not standing on a stacked text column's edge. */ left: calc(-15.6px * (1.1 + (var(--fan-max, 1.7) - 1.1) * var(--t, 0))); top: 0; transform: scale(calc(1.1 + (var(--fan-max, 1.7) - 1.1) * var(--t, 0))); } .wplate-back, .wplate { position: absolute; left: 15.6px; width: 130.84px; border-radius: 17.1px; } .wplate { box-shadow: 0 15.5px 31px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -6px 12px -6px rgba(34, 120, 160, 0.18); } .wplate-back { top: 0; height: 120px; /* The folder shape itself, straight off the funnel's own path — a level tab for the first 53px, then an 8px step for the rest. */ clip-path: path('M0 25.04C0 17.68 0 14 1.11 11.07C2.85 6.48 6.48 2.85 11.07 1.11C14 0 17.68 0 25.04 0C27.01 0 27.99 0 28.96 0.11C30.46 0.28 31.94 0.65 33.35 1.21C34.25 1.57 35.12 2.03 36.85 2.96L40.38 4.85C42.64 6.05 43.77 6.66 44.96 7.08C46.02 7.46 47.11 7.74 48.22 7.9C49.47 8.09 50.75 8.09 53.31 8.09L103.42 8.09C113.02 8.09 117.81 8.09 121.48 9.95C124.71 11.6 127.33 14.22 128.97 17.45C130.84 21.11 130.84 25.91 130.84 35.51L130.84 92.58C130.84 102.17 130.84 106.97 128.97 110.64C127.33 113.87 124.71 116.49 121.48 118.13C117.81 120 113.02 120 103.42 120L27.42 120C17.82 120 13.03 120 9.36 118.13C6.13 116.49 3.51 113.87 1.87 110.64C0 106.97 0 102.17 0 92.58L0 25.04Z'); filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.10)) drop-shadow(0 0 0.6px rgba(34, 120, 160, 0.45)); } .wplate { top: 72.8px; height: 47.3px; } .wplate-back { background: linear-gradient(105deg, rgba(255, 255, 255, 0.38) 0 14%, rgba(255, 255, 255, 0) 46%), linear-gradient(180deg, rgba(255, 255, 255, 0.5) -17%, rgba(242, 242, 242, 0.5) 100%); } .wplate { background: linear-gradient(105deg, rgba(255, 255, 255, 0.4) 0 16%, rgba(255, 255, 255, 0) 44%), linear-gradient(0deg, rgba(255, 255, 255, 0.2) 71%, rgba(242, 242, 242, 0.2) 156%); } /* Pile (--px/--py/--pr) to fan (--fx/--fy/--fr), the deck's own numbers, interpolated on the same --t the card morphs on. */ .wph { position: absolute; left: 0; top: 0; border: 5.5px solid var(--brand-white); border-radius: 9.6px; object-fit: cover; background: var(--surface-primary); box-shadow: 0.7px 1.4px 3.4px rgba(34, 120, 160, 0.10), 3.4px 4.8px 5.5px rgba(34, 120, 160, 0.09), 8.2px 10.3px 7.5px rgba(34, 120, 160, 0.05); transform: translate(calc(var(--px) + (var(--fx) - var(--px)) * var(--t, 0)), calc(var(--py) + (var(--fy) - var(--py)) * var(--t, 0))) rotate(calc(var(--pr) + (var(--fr) - var(--pr)) * var(--t, 0))); } .wph-back { width: 71.4px; height: 71.4px; --px: 40px; --py: 19px; --pr: -3deg; --fx: 5px; --fy: 27px; --fr: -19deg; } .wph-mid { width: 84px; height: 84px; --px: 33px; --py: 12px; --pr: 2deg; --fx: 37px; --fy: 0px; --fr: -5deg; } .wph-front { width: 84px; height: 84px; --px: 35px; --py: 14px; --pr: 0deg; --fx: 70px; --fy: 16px; --fr: 2.5deg; } /* /PORTED */ /* The fan's stack on its own layer too (S30) — the block above is ported and stays verbatim, so the promotion sits here beside it: its scale and slide on --t become compositor work, and the two drop-shadows on the clip-path plate under it stop re-rasterising at every frame of the fan. */ .wstack { will-change: transform; } /* Glass, not tint (Paul, 08-27, Bim on the alias: "the folder material should have a glass effect — currently it's just transparent"): the sky and its props blur through the plates, the same recipe as the nav's 14/1.4 at a lighter 10px because the plates scale 1.1→2.2 on --t and the blur scales with them. Beside the ported block, not in it — the block stays verbatim for `ports`. */ .wplate-back, .wplate { -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); } /* The shuffle (Paul, 08-27, Bim on the alias: "add click effect on the folder and same for mobile tap — it should switch the image in front: the third goes into position 1, 1 to 2 and 2 to 3, a smooth animation involving position, rotation and a bit of scale to simulate a z-order effect"). index.html rotates the three .wph-* classes on click; the pile/fan coordinates travel with the class, so each print glides to its next slot. Stacking follows the class too (the ported block relies on DOM order, which no longer says who is in front). The transition is scoped to the ~600ms of a shuffle (.is-shuffling) so the fan's own --t morph stays scroll-driven; the print coming forward lifts on its way (scale, its own shadow deepening) so the swap reads as a card pulled from the back. */ .wstack { cursor: pointer; } .wph-back { z-index: 1; } .wph-mid { z-index: 2; } .wph-front { z-index: 3; } .wplate { z-index: 4; } /* the pocket stays in front of every print (Paul, 08-27, pin 21) */ .wstack.is-shuffling .wph { transition: transform 620ms var(--ease-spring); } .wstack.is-shuffling .wph.is-lifting { animation: wph-lift 620ms var(--ease-out); } @keyframes wph-lift { 0% { scale: 1; filter: drop-shadow(0 0 0 rgba(34, 120, 160, 0)); } 45% { scale: 1.12; filter: drop-shadow(0 10px 12px rgba(34, 120, 160, 0.22)); } 100% { scale: 1; filter: drop-shadow(0 0 0 rgba(34, 120, 160, 0)); } } /* The title and the description, the second item in the centred group. No longer pinned or scaled: the old box carried a crossing lerp and a 0.45→1 scale purely to dodge a fan that swept over the top of it, and both are gone with the fan's own rise. What is left is an arrival — a small rise and a fade, on its own stagger (§16) — which costs no layout and composes with .wpanel's own zoom instead of fighting it as a second, differently-timed scale would. */ .wtext { align-self: stretch; } .wtitle, .wdesc { transform: translateY(calc((1 - var(--ta, 0)) * 14px)); opacity: var(--ta, 0); } /* --t2 is the text's own arrival, eased in JS after its offset rather than remapped off a --t that has already spent half its curve (R6). The description takes one small further step off the same scalar so the line lands under the title rather than with it — one shift on an already-eased curve is a delay, which is all this needs. */ .wtitle { --ta: var(--t2, 0); } .wdesc { --ta: clamp(0, calc(var(--t2, 0) * 1.35 - 0.35), 1); } /* Sized off .wcard's own container box, not the viewport: the column is half the card at ≥900px and the whole of it below, so a vw-based size put a 56px title in a 296px-wide column at the 800×700 corner and wrapped "Bottomless" onto three lines. */ .wtitle { margin: 0; font-size: clamp(28px, 11cqw, 40px); line-height: 1.04; letter-spacing: -0.03em; font-weight: var(--h4-heavy-weight); color: var(--text-primary); text-wrap: balance; } /* Below the title: two lines on the one feature the card is about, fenn's own voice (brand.md). Invisible until the card is mostly open (the same 1.4t-0.4 gate the app surface and the door use), so there is nothing to clip while still filed — only .wtitle needs the ellipsis safety net below. max-width holds the wrap to two lines regardless of column width: greedy-wrapped by hand at a ~28-char line (ch is the "0" advance, close enough to this copy's own average glyph width to trust) each of the three descriptions comes in at 2 lines — "fenn checks afternoons, books the one that works." is the long one, 49 characters over "fenn checks afternoons," (23) then "books the one that works." (25); the other two are shorter still. Verified against the render, not just the count. */ .wdesc { margin: 8px 0 0; max-width: 27ch; font-size: var(--lede-size); line-height: 1.32; font-weight: var(--body-weight); color: var(--ink-support); } /* Filed, the title is the deck's own .ptitle idiom verbatim (skin-roulette.css:812 on): one line, ellipsis a safety net, not a fit guarantee — "titles are written to fit". Expanded, the huge, sometimes-two-line balanced title is a different read entirely and has to survive untouched, so the clip is gated to .wcard's own still-filed range (a size container, above) rather than running always: 200px is comfortably short of either grow target's halfway point and clear of the 292px-wide expanded state that legitimately wraps. .wdesc needs no clip of its own — it is invisible for the whole of that range. */ @container wcard-morph (max-height: 200px) { .wtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } .world--dark .wtitle { color: var(--text-primary-dark-only); } .world--dark .wdesc { color: var(--text-subtle-dark-fixed); } /* The phone column: mobile stacks it below the text column; ≥900px docks it to whichever side .wtextcol is not on. overflow: hidden is scoped to this column alone (never to .wcard, whose fan still overhangs its own gutters), so the one big screen — a size no viewport can fully clear at this size — is "allowed to crop at the card's bottom edge (card clips it)" by design, not by mistake: bottom:0 makes the column's own lower edge the card's own, so the crop point sits exactly there at every value of --t. The stacked split is a fraction of the card, not the old fixed 280px: the card's height is now derived from the panel's (R2), so a px offset that fitted 390×844 left the 375×667 card with almost no phone and the 1920×1080 one with a third of a card of dead space. */ .wphonecol { /* relative, not absolute: it is the grid's second row now, and .mini is still absolutely placed inside it. */ position: relative; min-height: 0; margin: 0 22px; overflow: hidden; } /* The one screen (§12's own map/calendar/chat), big enough to dominate its column and rising through the card as --t climbs (R3). Sized in cqw off .wcard's own container (declared above) rather than vw: the card's width is capped well under the viewport at every tier, so a viewport-relative size once let the screen outgrow a narrow card at the wide end of the mobile range. 9:16, not the 390/844 (0.462) a real iPhone is. The drawn screen is an illustration of a phone, not a spec sheet, and at this size the taller ratio read as a strip: 9:16 keeps the whole thing recognisable at a glance from the crop line up. The bezel is fenn's own pen. --brand-black (#000000, the mark's stroke colour) rather than the #111 it carried, and its thickness is matched to the RENDERED stroke of the mascot standing beside it — every mascot export draws at stroke-width 10 in its own user units, so the on-screen stroke is 10 × rendered-width / viewBox-width. Measured at the plateau: 5.66px (the apple at 390 and 375), 9.56px (the apple at 800 and up), 7.58px and 8.70px (laser's and karaoke's own fenns at 1440). clamp(6.5px, 1.35vw, 8.8px) lands within ±20% of every one of those, and the ramp between the two ends tracks the apple's own 16vw growth over the same range. */ .mini { position: absolute; top: var(--phone-head); left: 50%; width: var(--phone-w); aspect-ratio: 9 / 16; border: var(--bezel) solid var(--brand-black); border-radius: calc(var(--phone-w) * 0.154); background: #ffffff; overflow: hidden; box-shadow: var(--pill-shadow); /* A size container so §12's drawing scales with the screen instead of huddling in its top-left corner at three times the old width. */ container-type: size; container-name: mini; /* Three terms, one transform list. The centring never moves. The drop pushes the screen below the card's own crop line while the card is still filed, so it pokes up from the bottom edge as the card opens rather than fading in where it will end up. The float is the plateau's own drift: --t is flat for the whole hold but --wp keeps evolving, so it is the only driver that can still move anything once the panel is stuck. The float is one-directional — (1 − --wp), never (0.5 − --wp). Centred on the rest pose it swung 22px either way, and the upward half cropped the screen's own top bezel against the column's overflow mid-scroll (Paul, live review, R10). Written this way the term is never negative, so the screen's top never rises past its --phone-head offset: the crop stays at the bottom, where it is the point, and the drift still reads because it is the last thing on the card still moving once --t has flattened. */ transform: translate(-50%, calc( (1 - var(--tp, 0)) * var(--phone-drop) + (1 - var(--wp, 0.5)) * var(--phone-float))); opacity: var(--tp, 0); --tp: var(--t3, 0); /* Always cut by the floor (Paul, 08-27, Bim on the alias at 1126×854: "the cellphone should always be cropped at the bottom, despite the size of the screen"). The screen's width is the column's (46cqw), its height 9:16 of that, but the column's height is the panel's — so a tall, narrow window (1126×854 with Bim's panel docked, an iPad in portrait, 1000×900) leaves a short phone in a tall column, showing whole with its chin on the floor (25px past it at 1126×854, 145px ABOVE it at 1024×1366). S28's rule is ≥40px past the floor at every size; the gate only sampled sizes that happened to comply. The fix keeps 9:16 and keeps --phone-head as the ceiling: when the drawn height cannot reach the floor, the screen sits lower in its column instead, its top at (column − phone + overhang), so it rises out of the floor the way it does on a phone. --phone-over is the corner radius and a little more (0.16 of the width, never under S28's 40px), so the cut lands past the curve and the sides run straight into the ground rather than ending in a tangent. Where the phone already overruns the floor (390, 375, 1440) max() picks --phone-head and nothing moves. */ --phone-over: max(40px, calc(var(--phone-w) * 0.16)); top: max(var(--phone-head), calc(100% - var(--phone-w) * 16 / 9 + var(--phone-over))); } .mini::before { /* the island */ content: ""; position: absolute; left: 50%; top: calc(var(--phone-w) * 0.039); transform: translateX(-50%); width: calc(var(--phone-w) * 0.25); height: calc(var(--phone-w) * 0.056); border-radius: calc(var(--phone-w) * 0.039); background: var(--brand-black); z-index: 2; } /* ───────────────────────────────────────────────────────────── §5 · The two columns, ≥900px Text and phone dock to opposite sides now, rather than one flowing column with the app row shifted to alternate edges. .world--mirror (not :nth-of-type(even) — the masthead throws off the parity a pure sibling count would need) marks the one card that flips: cards 1 and 3 keep text left/phone right, card 2 mirrors. The mirrored-geometry lesson still holds: flipping the anchor alone isn't a mirror, because the pile/fan coordinates keep growing in the same absolute direction and the assembly fans off .whold's far edge instead of toward the card's centre — --px/--fx/--pr/--fr are negated and .wplate-back's own tab shape is scaleX(-1)'d (not a photograph, free to mirror outright) to bring it back to the spine side, exactly as the single-column cut did it. ───────────────────────────────────────────────────────────── */ /* Two columns from 700px (S38 Part C, Paul 08-28 #38 at 768×611: "We need to revise the Ipad format. The UI looks bad in the phone. Maybe we might need to move the cellphone to the right on tablet. This view could be only on mobile."). This block is the shape — text one side, phone the other, the mirror flipping which; the (min-width: 700px) and (max-width: 899px) block further down re-cuts the numbers for a tablet, which has the desktop's layout and nothing like its room. */ @media (min-width: 700px) { /* The card grows with the panel it sits in (R2 widened the panel from a 1200px-capped --card-col to the full width minus the gallery gutter), so the two columns get a real measure instead of 760px of card floating in 1328px of sky. */ .wcard { width: min(1040px, calc(100% - 120px)); } .wtitle { font-size: clamp(36px, 5.4cqw, 60px); } /* Side by side, so both columns span the card's full height and the text group centres against the phone rather than against a stacked band of it. */ /* The base is a grid with two stacked rows (S38); side by side, each column wants the card's full height, so both go back to absolute in a block card and the base's own padding/margin insets give way to this tier's 40px ones. */ .wcard { display: block; } .wtextcol { position: absolute; padding: 0; justify-content: center; top: 0; bottom: 0; left: 40px; right: auto; width: calc(50% - 60px); } .wphonecol { position: absolute; margin: 0; top: 0; bottom: 0; left: auto; right: 40px; width: calc(50% - 60px); } .world--mirror .wtextcol { left: auto; right: 40px; align-items: flex-end; text-align: right; } .world--mirror .wphonecol { right: auto; left: 40px; } .world--mirror .wdesc { margin-left: auto; } .world--mirror .wstack { left: auto; right: calc(0px - 30.8px * var(--t, 0)); transform-origin: top right; } .world--mirror .wplate-back, .world--mirror .wplate { left: auto; right: 15.6px; } .world--mirror .wplate-back { /* Not a photograph — the folder tab's clip-path is free to mirror outright, so the tab lands back on the spine (the anchor) side instead of stranding the flap where the un-mirrored shape put it once the fan itself reversed. */ transform: scaleX(-1); } /* The photographs anchor to the stack's RIGHT edge in the mirror. Negating --px/--fx alone moved them left FROM THE LEFT EDGE, which is a translation and not a reflection: the fan ended up ~71px off its own plate, sitting left of the glass instead of centred on it (Paul, live review, R10). With right:0 the same negated numbers mirror the pile exactly — measured fan-centroid to plate-centroid −3.8px un-mirrored, +3.8px here. */ .world--mirror .wph { left: auto; right: 0; } .world--mirror .wph-back { --px: -40px; --pr: 3deg; --fx: -5px; --fr: 19deg; } .world--mirror .wph-mid { --px: -33px; --pr: -2deg; --fx: -37px; --fr: 5deg; } .world--mirror .wph-front { --px: -35px; --pr: 0deg; --fx: -70px; --fr: -2.5deg; } /* laser's and karaoke's mascots have to live in the gutter between the panel's edge and the card's own column, and round 3 changed the arithmetic of that gutter twice over: the panel grew to the full window minus one gallery gap, and the card grew with it. What is left either side is (panel − card) / 2 + the column's own 40px inset — 184px at 1440, but only ~100px at the 900px floor of this tier, and a 148px mascot fits neither reliably nor at all. So: sized to the gutter rather than to the viewport, and anchored to the panel's own edge in px rather than to a percentage of a panel whose width now varies by a factor of two across this tier. 8.5vw keeps the ink inside the narrowest gutter this tier can produce (77px at 900 wide) and still reads at 122px on a 1440 and the full 148 beyond 1740. !important because these are inline custom properties (the reduced-motion block's own escape hatch, reused for the same reason). Their vertical placement is handled once for every held mascot in §10's own max() floor, not per card here: the previous fix parked them at 12–13% of a panel whose sticky offset used to have a hard 64px floor, and the panel's gutter is 22–56px now. */ [data-world="laser"] .fenn, [data-world="karaoke"] .fenn { --fink: clamp(64px, 8.5vw, 148px) !important; } /* The apple too (Paul, 08-27, Bim: "same size as the other two, inside the world"), on karaoke's side — brunch's phone is on the right. Capped at 120, not 148: picnic-02's viewBox is 113 against laser's 162 and karaoke's 141, so at one ink width its stroke is the heaviest of the three; 120 keeps it inside the ±20% of the bezel the phone gate holds every mascot to (10.6px vs 8.8 at 1440). */ [data-world="brunch"] .fenn { --fink: clamp(64px, 8.5vw, 120px) !important; left: 12px; right: auto; } [data-world="laser"] .fenn { left: auto; right: 12px; } [data-world="karaoke"] .fenn { left: 12px; right: auto; } } /* The desktop keeps the deck's own fan-out travel (S38). Its own block, not the layout block above, because the tablet tier (S38 Part C) lowers that one to 700px and a two-column tablet card still wants the plate on the text column's edge — only the ≥900 desktop, whose numbers this round is required to leave byte-unchanged, keeps −30.8px × --t. */ @media (min-width: 900px) { .wstack { left: calc(0px - 30.8px * var(--t, 0)); } } /* On phones the three stand where the free apple used to (Paul, 08-27: "bring them back in mobile indeed"): the stacked card has no gutter, but its head is the fan on the left and nothing on the right — 13-255 of 346 is the fan at 390, the mascot takes 256-334. The old free apple's own size, 78px at 390. Under 700px only since S38: 700–899 is the tablet tier now, and a two-column card has the desktop's own gutter. */ @media (max-width: 699px) { [data-world="brunch"] .fenn, [data-world="laser"] .fenn, [data-world="karaoke"] .fenn { --fink: clamp(64px, 20vw, 112px) !important; left: auto; right: 12px; } /* Paul's own 08-28 ask on this card — "reduce by 25% the size of the folder, increase by 50% the size of the phone, there's top padding that could be used" — is answered by --fan-max and --phone-w (the band went with S38's grid card). They are NOT declared here: a phone is a width, not a width-and-height, and this block loses to the short-viewport tiers further down. They live in the (max-width: 528px) block after them. */ } /* ───────────────────────────────────────────────────────────── 12 · The three app surfaces — the real screens, staged Map, Organizer and chat, drawn as the app draws them: squircle avatars with their location badges standing on the map's own pin, white cards on --surface-primary, the tab-bar pill, message bubbles with a sender colour, a time and a reactions pill — and fenn's own messages, which are none of those things: plain text on the page grey with the mark at the last paragraph's foot. One self-contained block, depending on nothing but tokens.css and the #fennmark / #i-* symbols in the markup, so a sibling direction can lift it unchanged. ── The unit, and why it is not cqw ── §11's .mini is 9:16 and it is CROPPED at the card's own bottom edge (R10): the phone pokes up out of the card, so only the top of the screen is ever seen. How much differs enormously by tier — 57.6% at 390×844, 91.5% at 1440×900, 46.9% at 800×700, 61.6% at 375×667 — and an app screen has to fill what is VISIBLE, not what is drawn. A single cqw-proportional drawing therefore cannot work: composed for the desktop crop it loses its own bottom half on a phone, composed for the phone it floats in the top third of a desktop card. So the machine measures the crop (index.html's measureCrop) and writes --vis, the visible fraction, on each .mini. --u is a fraction of the PHONE, not of the crop: --u: calc(100cqh / 579) 579 is not a new number. It is 530 / 0.915 — the desktop tier's own unit restated against the whole 9:16 drawing rather than against the part of it that shows. That one substitution is the whole of the 08-25 correction (item 9). Until then --u carried a `var(--vis) *` factor, which tied the drawing's SCALE to how much of the phone the card happened to leave visible: a tier that showed less of the phone drew the app smaller, so the surface rendered at 1.22x the app's own size at 1440 and 0.77x at 390, 0.84x at 375 and 0.64x at 800x700 — the tier with the least room got the smallest type. Measured now, it is 1.20x at every tier, and the body text is 20.25px at 1440, 11.48 at 390, 9.82 at 800x700 and 7.47 at 375. A miniature scales with the phone, not with the window it is seen through. --vis stays: --crop is still built from it, and it is now also what the machine reads to write data-room (below). Two conventions follow, and one invariant went: - VERTICAL positions and every component size are in --u, so a 64 avatar is 64 units wherever it is drawn; - HORIZONTAL positions are in %, because the screen's width in units is what varies (319u at 1440, 318u at 390 — nearly equal now, and that is the point) and a % keeps the margins proportional; - what is GONE is "the visible window is always 530 units tall". It is 579 x --vis now: 530u at 1440, 358u at 375, 334u at 390 and 272u at 800x700. So the three compositions cannot be laid out down one fixed ruler any more — each is a flex column that gives its own middle away first (§12's own "what gives" note per screen), and data-room is the one breakpoint that is measured rather than guessed: the machine writes tight on any .mini showing less than 55% of its phone, which is the only tier where hiding a piece of chrome beats clipping the content. --crop is the strip below the fold, so the bottom chrome (tab bar, composer) anchors just above the crop line rather than at a screen bottom nobody can see. ── The apparition ── Each screen carries data-step, incremented once per entry by the sequencer in index.html when the hold reaches its plateau. Every state below is a [data-step] rule over a transition, so the reduced-motion kill switch resolves the whole sequence to its final frame for free (the machine sets the final step immediately there). It plays once and never loops, which is what keeps it inside brand.md's "nothing loops for decoration": it is the content. ───────────────────────────────────────────────────────────── */ /* SOURCE — this block is this branch's own and self-contained: it depends on nothing but tokens.css and the symbols index.html inlines, which is what makes it liftable. A sibling direction that takes it carries a PORTED header citing site/worlds@:assets/skin-site-worlds.css and the line range this marker and its /SOURCE closer delimit, and its own gate diffs that range back against this file. Keep the two markers around the whole block when you edit inside it. */ /* The fallback is the 390×844 crop, so the surface is already composed correctly before the machine's first write and stays correct with no script at all. The machine writes the measured number as an inline style on .mini, which outranks this. */ .mini { --vis: 0.576; } .scr { position: absolute; inset: 0; --u: calc(100cqh / 579); --crop: calc((1 - var(--vis)) * 100cqh); /* §11's island is sized in fractions of --phone-w, so it is the one thing on the screen that does NOT scale with --u — at 390 it eats 35 units of the visible window and at 1440 only 25. --top is where a header may start: the island's own bottom edge in screen coordinates (0.039 + 0.056 of --phone-w, less the bezel the screen box does not include) plus a little air. The map has no header and runs under it, which is what the app does too. */ --isle: calc(9.5cqw - 0.8 * var(--bezel)); --top: calc(var(--isle) + 6 * var(--u)); font-family: var(--font-sans); font-size: calc(16 * var(--u)); line-height: calc(19 * var(--u)); font-weight: var(--body-weight); letter-spacing: var(--tracking); color: var(--text-primary); background: var(--surface-primary); overflow: hidden; } .scr b, .scr strong { font-weight: var(--body-weight-bold); } .scr i, .scr em, .scr s { font-style: normal; text-decoration: none; } /* ── Avatar (Figma 891:93240) ── 64 square, --radius-avatar-xl (26 of 64 = 0.406 of the box), a 3px white rim, a slight per-avatar tilt so a cluster reads as people and not as a swatch strip. --av is the size in units; --sender fills the initials variant from tokens.css's own 14. */ .scr .av { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: calc(var(--av, 54) * var(--u)); height: calc(var(--av, 54) * var(--u)); border-radius: calc(var(--av, 54) * var(--u) * 0.406); border: calc(3 * var(--u)) solid var(--brand-white); background-color: var(--sender, var(--surface-primary)); /* 110%, not cover. Every assets/faces/*.png is a 200x200 circle on alpha, and this frame is a squircle: at radius 26 of 64 the corner's farthest point is sqrt(2)*(32-26)+26 = 34.49 from centre, a circle of 107.8% of the box, so `cover` left four grey --surface-primary corners around every photograph. 110% clears it with margin; the sources are square, so one value cannot distort them, and an initials tile carries no image for the rule to touch. */ background-size: 110%; background-position: center; color: var(--brand-white); font-size: calc(var(--av, 54) * var(--u) * 0.33); line-height: 1; font-weight: var(--h4-heavy-weight); letter-spacing: 0; rotate: var(--tilt, 0deg); overflow: hidden; } /* The overlapping row. -24 of a 64 avatar is 0.375 of the box; kept as a fraction so it holds at every --av this block uses. */ .scr .stack { display: flex; align-items: center; } .scr .stack .av + .av { margin-left: calc(var(--av, 54) * var(--u) * -0.375); } /* On the map the photograph is whole (Paul, 08-27, Bim on the alias, two pins: "check the crop below the image"): the 110% that clears a squircle's corners also cut a chin off at the tile's flat foot, and under a pin that cut is what the eye lands on. 100% here, and the corners it leaves are the rim's own white. */ .mp-who .av:not(.av--ini) { /* 112%, bottom-aligned (Paul, 08-28, Bim #33/#34: "a cut and a blank space below the profile picture"). The cut was in the FILES: five of the six faces ended at row ~176 of 200 with opaque white under the chin — a padded crop masked to a circle — so at 100% the frame showed the photograph's own white foot, and at the base rule's 110% the calendar showed it too. The PNGs are re-cut now (the largest circle inside each disc that ends where the content ends, ×1.13–1.15), which puts every chin at the circle's edge; bottom-aligned keeps that chin on the frame's foot, 112% takes the crop out of the hair, and the two bottom corners lose only a ~1px sliver (a circle that filled them with the chin at the foot would need 134%). Callie was already clean. */ background-size: 112%; background-position: center 100%; background-repeat: no-repeat; background-clip: padding-box; background-color: var(--brand-white); } /* :not(.av--ini): the first cut of this rule (08-27, earlier) painted Mia's initials tile white — white on white, "we lost the profile picture at the top right". no-repeat + padding-box: at 100% the photograph tiled into the 3u rim, a sliver of its own top edge under the chin — the crop Paul still saw at 16:06. */ /* Location-status badge (bottom-right of an avatar): a white pill, radius 10, the app's own two-part shadow, an activity glyph and an optional label at half opacity. */ .scr .bdg { position: absolute; right: calc(-5 * var(--u)); bottom: calc(-5 * var(--u)); display: grid; place-items: center; min-width: calc(22 * var(--u)); height: calc(22 * var(--u)); padding: 0 calc(4 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--surface-raised); box-shadow: 0 calc(7.5 * var(--u)) calc(15 * var(--u)) rgba(0, 0, 0, 0.05), inset 0 calc(1 * var(--u)) 0 rgba(255, 255, 255, 0.7); font-size: calc(11 * var(--u)); line-height: 1; } /* A white card on the page grey. No shadow: in the app these are flat white on --surface-primary and the separation is the value step. */ .scr .card { background: var(--surface-raised); border-radius: calc(26 * var(--u)); } /* ── The tab bar (Figma 899:100360, and screenshots 25-27) ── A white pill of three 44-wide icon tiles, the active one on a --surface-primary tile, with detached round buttons beside it. It anchors to the CROP line, not to the screen's own foot: the foot is below the card's bottom edge on every tier and a tab bar nobody can see is not chrome. */ .scr .tb { position: absolute; left: 0; right: 0; bottom: calc(var(--crop) + 10 * var(--u)); display: flex; justify-content: center; align-items: center; gap: calc(10 * var(--u)); z-index: 3; } .scr .tb-pill { display: flex; align-items: center; gap: calc(4 * var(--u)); padding: calc(5 * var(--u)); border-radius: calc(26 * var(--u)); background: var(--surface-raised); box-shadow: 0 calc(7.5 * var(--u)) calc(15 * var(--u)) rgba(0, 0, 0, 0.05); } .scr .tb-i { display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(15 * var(--u)); color: var(--brand-black); } .scr .tb-i.is-on { background: var(--surface-primary); } .scr .tb-i svg { width: calc(25 * var(--u)); height: calc(25 * var(--u)); display: block; } /* The centre tab is the mark itself. 6.5 rather than the sheet's 8: the stroke was tuned against a 28px mark and goes heavier than any mascot on the page at this size (brand.md §The character). */ .scr .tb-mark { width: calc(26 * var(--u)); height: auto; aspect-ratio: 61.5 / 66.5; overflow: visible; --mark-fill: #ffffff; --mark-line: var(--brand-black); --mark-stroke: 6.5; } /* No detached round buttons beside the pill any more (Paul, 08-27, Bim: "remove the search button", "remove this button" ×2): the pill stands alone, centred by .tb's own justify-content. */ /* ───────────────────────────────────────────────────────────── Card 1 · the map — fenn finds the fair spot ───────────────────────────────────────────────────────────── */ /* The ground and everyone on it travel together, because a pan is the map moving under the pins and not the pins sliding over it. Oversized on every side so the drag never exposes an edge. */ .mp-pan { /* 56u above and below, not 14 (Paul, 08-27, Bim on the alias: "the upper part of the map looks cut — we can notice the grey background — make sure we have a big map"): the pre-pan pose sits 30u down, so a 14u overhang left 16u of the phone's own grey showing above the ground at step 0/1 (his screenshot). 56u covers the pose and the drag's own 8% reach on top of it (59px at 1440, where 40u was 50). The sides stay at the funnel's 14%: every --x on this surface is a percentage of the pan's width, so widening the sides moved every pin (78% of a 140% pan walked Mia off the phone's edge, Paul's pin of 16:06). 14% covers the 10% drag once the 6.5% pan has landed; during the first 900ms the reach is a few percent short, which is invisible at the speed a first drag happens. Every --y on this surface adds the overhang back (three places below), so the numbers still read off the screen's top edge. */ position: absolute; inset: calc(-56 * var(--u)) -14%; /* --dx/--dy are the drag (index.html), on top of the pan's own pose. */ transform: translate(calc(6.5% + var(--dx, 0px)), calc(30 * var(--u) + var(--dy, 0px))); transition: transform 640ms var(--ease-out); } .mp-pan.is-dragging { transition: none; } .scr--map { touch-action: pan-y; cursor: grab; } .scr--map:has(.is-dragging) { cursor: grabbing; } .scr--map[data-step="2"] .mp-pan, .scr--map[data-step="3"] .mp-pan, .scr--map[data-step="4"] .mp-pan { transform: translate(var(--dx, 0px), var(--dy, 0px)); } .mp-ground { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* A place already on the map: the app's own white chip. */ /* --y is a PERCENT of the visible band now, not a unit offset (item 9). A scatter is a placement, not a component: where a friend stands on the map has to hold whether the card shows 272 units of phone or 530, while the chip they stand under stays 26 units across. The 56u is .mp-pan's own overhang above the screen, added back so the number reads off the screen's top edge like every other --y here. */ .mp-poi { position: absolute; left: var(--x); top: calc(56 * var(--u) + var(--y) / 100 * (100cqh - var(--crop))); translate: -50% -50%; display: grid; place-items: center; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; background: var(--surface-raised); box-shadow: 0 calc(3 * var(--u)) calc(7 * var(--u)) rgba(0, 0, 0, 0.07); font-size: calc(13 * var(--u)); line-height: 1; } /* A person on the map: the avatar sits ON the pin (Figma 2532:44096, "avatar + pin.map"). It used to be a 4x13 black needle, which read as a drop-pin stem rather than as the app's own pin — the sheet draws a 56x33 white teardrop tail hanging at top 51 of the 64 avatar, so the squircle covers its wide end and only the taper shows. Everything below is that ratio against --av. */ .mp-who { position: absolute; left: var(--x); top: calc(56 * var(--u) + var(--y) / 100 * (100cqh - var(--crop))); --av: 50; /* translate and scale as individual properties, never inside one transform list: the property order is translate ∘ rotate ∘ scale, so the centring shift is applied OUTSIDE the pop and a pin at scale .35 still sits on its own coordinate. --y is the tip line. */ translate: -50% -100%; /* The tip, not the old needle's: 51/64 down plus 33/56 of a 56/64 width puts it at 1.3125 of the box. A pin pops out of the ground it is planted in. */ transform-origin: 50% 131%; opacity: 0; scale: 0.35; transition: opacity var(--dur-base) var(--ease-out), scale var(--dur-slow) var(--ease-spring); transition-delay: var(--d, 0ms); } .scr--map:not([data-step="0"]) .mp-who { opacity: 1; scale: 1; } /* 56/64 = 0.875 wide, hung at 51/64 = 0.797 down, centred on the avatar. The viewBox carries the sheet's own ground shadow under the tip; the tail's fill is currentColor, so the pin is the same white as every other piece of furniture on this surface. It is first in the markup, which is what puts it under the face. */ /* The tack (S28), placed the way plans-like places it under its 96px tile: the 141-wide canvas centred, its top at 0.896 of the tile, so the leg's head is behind the squircle and the foot lands ~0.3 of the tile below it. The export carries its own ground shadow, so no CSS shadow on top of it. */ .mp-who .pin-tail { position: absolute; left: 50%; /* 0.786, not the sheet's 0.896 (Paul, 08-27, Bim on the alias at 1126 wide: "moved a bit upward under the pin, like maybe 6px"). Under a round face the leg's head emerges where the squircle curves away, so the join read as a gap; 0.11 of the tile is 6px at his 54.8px tile, 4 at 390, 7 at 1440 — it scales with the face the way everything else on the pin does. The spot's own tail keeps 0.896: a square tile has no curve to clear. */ top: calc(var(--av) * var(--u) * 0.786); width: calc(var(--av) * var(--u) * 1.469); margin-left: calc(var(--av) * var(--u) * -0.7345); height: auto; aspect-ratio: 141 / 82.5; display: block; overflow: visible; /* Wider than the avatar it hangs from, so foundation's svg { max-width: 100% } would cap it at the avatar's width and leave the negative margin pulling a narrower canvas off-centre — measured 14.8px left at 1440 before this line. */ max-width: none; } .mp-spot .pin-tail { position: absolute; left: 50%; z-index: 0; /* The friends' leg, not a bigger one (Paul, 08-27, Bim on the alias: "the pin below the image has the wrong height — consistent with the other pins"): same 0.786 head as .mp-who's tail and the same 50u-based width, only the tile above it is 52u. */ top: calc(52 * var(--u) * 0.786); width: calc(50 * var(--u) * 1.469); margin-left: calc(50 * var(--u) * -0.7345); height: auto; aspect-ratio: 141 / 82.5; display: block; overflow: visible; } /* The chosen spot. .mm-pin keeps its name from round 3 — the gate measures it against the crop line and it is still the same thing: the one place the card is about. */ .mp-spot { position: absolute; left: 0; right: 0; /* Inside .mp-pan since 08-27 (it drags with the ground), so the pan's 56u overhang is added back like the friends' and the chips'. */ top: calc(56 * var(--u) + var(--y) / 100 * (100cqh - var(--crop))); text-align: center; z-index: 2; opacity: 0; translate: 0 calc(-16 * var(--u)); transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-slow) var(--ease-spring); } .scr--map[data-step="3"] .mp-spot, .scr--map[data-step="4"] .mp-spot { opacity: 1; translate: 0 0; } .mm-pin { position: relative; z-index: 1; display: grid; place-items: center; width: calc(52 * var(--u)); height: calc(52 * var(--u)); margin: 0 auto; border-radius: calc(21 * var(--u)); border: calc(3 * var(--u)) solid var(--brand-white); background: var(--gradient-primary); box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.18); font-size: calc(24 * var(--u)); line-height: 1; } /* One pulse, once, on the beat fenn settles — the map's own "here". A single iteration by declaration, so it is a state change and not a loop; reduced motion kills it and the ring simply never paints. */ .mp-ring { position: absolute; left: 50%; top: calc(26 * var(--u)); width: calc(52 * var(--u)); height: calc(52 * var(--u)); margin: calc(-26 * var(--u)) 0 0 calc(-26 * var(--u)); border-radius: 50%; border: calc(3 * var(--u)) solid var(--accent); opacity: 0; } .scr--map[data-step="4"] .mp-ring { animation: mp-pulse 900ms var(--ease-out) 1 both; } @keyframes mp-pulse { from { opacity: 0.55; transform: scale(0.6); } to { opacity: 0; transform: scale(2.6); } } /* The label card under the pin — the Figma pin's own caption card. */ .mp-label { display: block; margin: calc(16 * var(--u)) auto 0; width: max-content; max-width: 92%; padding: calc(7 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--surface-raised); box-shadow: 0 calc(7.5 * var(--u)) calc(15 * var(--u)) rgba(0, 0, 0, 0.08); font-size: calc(14 * var(--u)); line-height: calc(17 * var(--u)); color: var(--text-secondary); white-space: nowrap; } .mp-label b { color: var(--text-primary); } /* After the pin, not with it (Paul, 08-27, Bim on the alias: "the label should have some delay — first we see the pin land, then the label; the appearance could start from a white circle with the text masked inside, expanding to its final state"). The circle is a clip-path on the label's own white; it opens once the pin's spring has landed. */ .mp-label { clip-path: circle(9% at 50% 50%); opacity: 0; transition: clip-path 560ms var(--ease-out) 520ms, opacity 160ms var(--ease-out) 520ms; } .scr--map[data-step="3"] .mp-label, .scr--map[data-step="4"] .mp-label { clip-path: circle(75% at 50% 50%); opacity: 1; } /* ───────────────────────────────────────────────────────────── Card 2 · the Organizer calendar — fenn picks the day ───────────────────────────────────────────────────────────── */ /* What gives, and in what order (item 9). The band runs 272u…530u now, and this composition wants 363: head, segmented control, month card, picked-day label and event row. So it is a column whose MIDDLE is the elastic part — the month card takes what is left and its grid clips from the bottom, which is what a month view you have not scrolled looks like. The label and the row never give: they are the answer the card is about, and the gate holds them above the crop. At the tight tier the head and the segmented control go instead of a third week, because a calendar with no weeks in it is not a calendar. fenn's pick moved to the second row for the same reason — see index.html. */ .scr--cal { display: flex; flex-direction: column; padding: var(--top) 5.5% calc(var(--crop) + 74 * var(--u)); } .scr--cal > * { flex: 0 0 auto; } /* The ladder, and what each rung costs the SCREEN rather than the grid — because a month card with no days in it is not a calendar, and every rung here was measured against that. mid (390, 375) drops the "Organizer" title and the weekday header: the phone already says which app this is, and Sun-Mon-Tue is the one part of a month grid you can read off the numbers. tight cuts the numbers themselves instead — see its own block below. What NEVER goes at any rung is the grid itself, fenn's filled pick, the picked-day label or the event row: those four are the sentence the card is here to say. */ .mini[data-room="mid"] .cl-head, .mini[data-room="mid"] .cl-week, .mini[data-room="tight"] .cl-head, .mini[data-room="tight"] .cl-week { display: none; } /* Every rung keeps every row (Paul, 08-27, Bim on the alias: "the last row should not be hidden — hug the whole container"); the segmented control that used to buy the room is gone at every rung, and the 28u pitch Paul asked for at 1512 gives back what a shorter room can't spend: mid keeps the 22u pitch, tight goes to 16u and the event row's old 8u pad — measured against the event row clearing the tab bar (it was 12-30px under it at 28u, still 2-14 under at 24/20). The month TITLE is not a rung any more (S38, Paul 08-28 #40: "we have to display the title"). mid used to drop it while tight, re-cut below, shows it — an inversion: the smaller room said the month and the larger one did not. It is shown in every room now, at tight's own 12u where the room is short. */ .mini[data-room="mid"] .cl-top, .mini[data-room="tight"] .cl-top { padding-bottom: calc(6 * var(--u)); font-size: calc(12 * var(--u)); } .mini[data-room="mid"] .cl-grid i { height: calc(22 * var(--u)); } .mini[data-room="mid"] .cl-row { padding-block: calc(8 * var(--u)); } /* tight, re-cut for the phone (S38, Paul 08-28 #40 at 375×667: "On mobile the calendar is broken. We need to keep a min gap, surely reduce the size of the numbers. We have to display the title."). Three answers in his own order. The month TITLE comes back — tight used to drop .cl-top, and a month grid with no month over it is a puzzle — at 12u rather than the base 14u; that line sits up with mid's, which shows it now too. The GAP is the thing that never gives now: 3u between rows and 2u between columns, up from 2u and nothing, because a grid whose numbers touch reads as one block of digits rather than as weeks. What pays for both is the NUMBERS: the cell drops 16u → 15u. .cl-row's pad comes in to 6u/8u from 8u/15u for the same reason — the room it gives back is the room the gap and the title take. */ .mini[data-room="tight"] .cl-grid i { height: calc(14 * var(--u)); font-size: calc(14 * var(--u)); } /* The picked day's disc is 28u everywhere else — twice a tight cell, so it sat over its neighbours' rows; 22u here (Paul, 08-28: "the mobile is noticeably too tight" — the air comes from smaller digits and disc, the pitch itself is pinned by the tab bar's 6px floor at 375×667). */ .mini[data-room="tight"] .cl-grid i.pick::before { width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin: calc(-11 * var(--u)) 0 0 calc(-11 * var(--u)); } .mini[data-room="tight"] .cl-row { padding: calc(6 * var(--u)) calc(8 * var(--u)); } .mini[data-room="tight"] .cl-card { margin-top: calc(4 * var(--u)); padding-top: calc(6 * var(--u)); padding-bottom: calc(8 * var(--u)); } .mini[data-room="tight"] .cl-grid { row-gap: calc(5 * var(--u)); column-gap: calc(2 * var(--u)); } .mini[data-room="mid"] .cl-when, .mini[data-room="tight"] .cl-when { margin-top: calc(9 * var(--u)); } /* (The 11u row pad and the 13u PICKED gap Paul asked for at 1512 are wide-room numbers: 430×932 is mid and was 1px under the tab bar with them.) */ .cl-head { text-align: center; font-size: calc(20 * var(--u)); line-height: calc(24 * var(--u)); font-weight: var(--body-weight-bold); } /* No segmented control any more (Paul, 08-27): the month card takes its room. */ .cl-card { /* The elastic middle. min-height: 0 is what lets a flex item shrink below its content at all, and the overflow is what turns that into a clip instead of an overlap. */ /* Hugs its grid since 08-27 (Paul, Bim on the alias: "the last row should not be hidden — let's hug the whole container"): the card was the elastic middle that clipped rows in a short room; now it is as tall as October, and the room ladder above trims the chrome around it instead. */ flex: 0 0 auto; display: flex; flex-direction: column; margin-top: calc(8 * var(--u)); /* 9/14/14, not 8/10/6 (Paul, 08-27, Bim on the alias at 1512: "more padding on the edges and mostly at the bottom — the numbers look too close to the bottom"). The last row's numerals sat 6u off the card's edge with a 26u radius curving in under them. */ padding: calc(9 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); background: var(--surface-raised); border-radius: calc(26 * var(--u)); border: 1px solid var(--surface-primary); } .cl-top, .cl-week { flex: 0 0 auto; } .cl-top { display: flex; align-items: center; justify-content: space-between; padding: 0 calc(4 * var(--u)) calc(8 * var(--u)); border-bottom: 1px solid var(--surface-primary); font-size: calc(14 * var(--u)); /* 19 × 0.75 (Paul, 08-27: "reduce by 25% the size of the month") */ font-weight: var(--body-weight-bold); } .cl-top s { display: block; color: var(--text-tertiary); } .cl-top s svg { display: block; width: calc(17 * var(--u)); height: calc(17 * var(--u)); } .cl-top s + s svg { rotate: 180deg; } .cl-week, .cl-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; } .cl-week { padding: calc(5 * var(--u)) 0 calc(2 * var(--u)); font-size: calc(13 * var(--u)); color: var(--text-tertiary); } .cl-grid { flex: 0 0 auto; row-gap: calc(4 * var(--u)); } /* The rows breathe (Paul, 08-28, on a 1512×862 desktop — a `mid` room, the card is short there: "the calendar is too tight — slightly more gaps between the numbers"): 4u → 9u between rows in mid and wide (7u on the first pass — "a bit more"); tight 3u → 5u, and its cells give a unit (15u → 14u) for it — 6u left 375×667 4px from the tab bar, under the gate's 6px floor. */ .mini[data-room="wide"] .cl-grid, .mini[data-room="mid"] .cl-grid { row-gap: calc(9 * var(--u)); } .cl-grid i { position: relative; display: grid; place-items: center; /* 28u, not 22 (Paul, 08-27, Bim: "4px more gap top and bottom between the numbers" — 3u each way at his 1.3px unit). */ height: calc(28 * var(--u)); font-size: calc(17 * var(--u)); opacity: 0; translate: 0 calc(-4 * var(--u)); transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out); transition-delay: calc((var(--r) - 1) * 62ms); } .cl-grid i.off { color: var(--text-tertiary); } .scr--cal:not([data-step="0"]) .cl-grid i { opacity: 1; translate: 0 0; } /* Event dots — 6px in --sender-12, the app's own event colour. */ .cl-grid i.has::after { content: ""; position: absolute; left: 50%; bottom: calc(-5 * var(--u)); width: calc(6 * var(--u)); height: calc(6 * var(--u)); margin-left: calc(-3 * var(--u)); border-radius: 50%; background: var(--sender-12); opacity: 0; scale: 0.2; transition: opacity var(--dur-fast) var(--ease-out), scale var(--dur-base) var(--ease-spring); transition-delay: var(--d, 0ms); } .scr--cal[data-step="2"] .cl-grid i.has::after, .scr--cal[data-step="3"] .cl-grid i.has::after, .scr--cal[data-step="4"] .cl-grid i.has::after { opacity: 1; scale: 1; } /* Except under the day fenn fills. The pick circle is 28u centred on a 24u cell, so its bottom edge lands at +14u and the dot's own -5u puts its centre INSIDE the fill — a dot swallowed by the gradient it is supposed to sit under. It steps down to -11u for exactly the two beats the fill is painted; every other cell keeps the app's own spacing. */ .scr--cal[data-step="3"] .cl-grid i.pick.has::after, .scr--cal[data-step="4"] .cl-grid i.pick.has::after { bottom: calc(-11 * var(--u)); } /* fenn's pick. The app fills TODAY in iOS red; this is not today, it is the afternoon fenn found, so it wears the brand gradient. */ .cl-grid i.pick::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(28 * var(--u)); height: calc(28 * var(--u)); margin: calc(-14 * var(--u)) 0 0 calc(-14 * var(--u)); border-radius: 50%; background: var(--gradient-primary); opacity: 0; scale: 0.3; transition: opacity var(--dur-fast) var(--ease-out), scale var(--dur-slow) var(--ease-spring); } .scr--cal[data-step="3"] .cl-grid i.pick::before, .scr--cal[data-step="4"] .cl-grid i.pick::before { opacity: 1; scale: 1; } /* The numeral rides above the fill it is dropped into: ::before is a positioned child, so unwrapped text would paint under it. */ .cl-grid i span { position: relative; z-index: 1; transition: color var(--dur-fast) var(--ease-out); } .scr--cal[data-step="3"] .cl-grid i.pick span, .scr--cal[data-step="4"] .cl-grid i.pick span { color: var(--brand-white); } .cl-when { display: flex; align-items: baseline; gap: calc(7 * var(--u)); margin: calc(13 * var(--u)) 0 calc(4 * var(--u)) calc(6 * var(--u)); /* 7u + 6u ≈ 8px at 1512 (Paul, 08-27: "add some gap on top of this container, 8px") */ font-size: calc(14 * var(--u)); line-height: calc(17 * var(--u)); color: var(--text-tertiary); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); } .cl-when b { font-size: calc(13 * var(--u)); letter-spacing: 0.04em; color: var(--accent); } .cl-row { display: flex; align-items: center; gap: calc(11 * var(--u)); /* +3u each way (Paul, 08-27, Bim: "increase paddings here, maybe 4px" — 4px is 3u at his 1512-wide read, where --u is 1.3px). */ padding: calc(11 * var(--u)) calc(15 * var(--u)); opacity: 0; translate: 0 calc(18 * var(--u)); transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-slow) var(--ease-out); } .scr--cal[data-step="4"] .cl-when, .scr--cal[data-step="4"] .cl-row { opacity: 1; } .scr--cal[data-step="4"] .cl-row { translate: 0 0; } .cl-bar { flex: 0 0 auto; width: calc(3 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--sender-12); } .cl-time { flex: 0 0 auto; font-size: calc(17 * var(--u)); line-height: calc(18 * var(--u)); font-weight: var(--body-weight-bold); } .cl-time i { display: block; font-size: calc(13 * var(--u)); line-height: calc(15 * var(--u)); font-weight: var(--body-weight); color: var(--text-secondary); } .cl-what { flex: 1 1 auto; min-width: 0; } .cl-what b { display: block; font-size: calc(17 * var(--u)); line-height: calc(18 * var(--u)); } .cl-what i { display: block; font-size: calc(13 * var(--u)); line-height: calc(15 * var(--u)); color: var(--text-secondary); } .cl-row .stack { --av: 34; } /* The friends accept one by one (Paul, 08-27, Bim on the alias: "animate the appearance of the profile pictures — it should represent the friends accepting the invitation"): each avatar pops in on the row's own step, 320ms apart, left to right, on the spring. Reduced motion resolves to the final frame with everything else. */ .scr--cal .cl-row .av { opacity: 0; scale: 0.4; transition: opacity var(--dur-fast) var(--ease-out), scale var(--dur-slow) var(--ease-spring); } .scr--cal[data-step="4"] .cl-row .av { opacity: 1; scale: 1; } .scr--cal[data-step="4"] .cl-row .av:nth-child(1) { transition-delay: 320ms; } .scr--cal[data-step="4"] .cl-row .av:nth-child(2) { transition-delay: 640ms; } .scr--cal[data-step="4"] .cl-row .av:nth-child(3) { transition-delay: 960ms; } /* ───────────────────────────────────────────────────────────── Card 3 · Today, a tap, and the chat — fenn sends the message ───────────────────────────────────────────────────────────── */ .ph-today, .ph-chat { position: absolute; inset: 0; } /* The iOS push: the outgoing screen drifts a quarter of the way left under the incoming one, which is what makes it read as a stack. */ /* What gives (item 9). Today reads top-down — the header, then the next thing happening, then the threads — so unlike the chat it clips from the BOTTOM: the message list takes what is left and the rows below the fold are simply below the fold, which is what a list on a phone does. The one row that must always render is the karaoke thread, because it is a door; it is first, so it always does. At the tight tier the check-in card goes rather than the list, since a Messages section with no message in it is not a screen. */ .ph-today { display: flex; flex-direction: column; padding: calc(16 * var(--u)) 5.5% calc(var(--crop) + 74 * var(--u)); transition: transform 360ms var(--ease-out), filter 360ms var(--ease-out); } .ph-today > * { flex: 0 0 auto; } .td-list { flex: 0 1 auto; min-height: 0; overflow: hidden; } .mini[data-room="tight"] .td-row { display: none; } .ph-chat { /* A column, not three absolute boxes: the header's own height moves with the island clearance and the thread has to give that room back rather than sit under it. The composer rides the crop line through the padding, so it is still chrome you can see. */ display: flex; flex-direction: column; padding-bottom: calc(var(--crop) + 12 * var(--u)); background: var(--surface-primary); transform: translateX(100%); transition: transform 360ms var(--ease-out); box-shadow: calc(-10 * var(--u)) 0 calc(24 * var(--u)) rgba(0, 0, 0, 0.10); } /* Which screen is on top is data-nav, not the beat (P5). The sequencer writes it at beat 2, and after the sequence has finished the back chevron and the karaoke row write it too — so the push is a transition the visitor owns, not a frame of a film they can only watch. Same 360ms both ways: a pop back IS the push reversed. */ .scr--chat[data-nav="chat"] .ph-chat { transform: translateX(0); } .scr--chat[data-nav="chat"] .ph-today { transform: translateX(-24%); filter: brightness(0.94); } /* One line since 08-25 (P4: the app's Today header is the word and no date), so the account avatar centres on it instead of hanging off a two-line block's top. */ .td-head { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--u)); } .td-head b { display: block; font-size: calc(38 * var(--u)); line-height: calc(40 * var(--u)); font-weight: var(--body-weight-bold); } .td-head .av { --av: 50; } .td-row { display: flex; align-items: center; gap: calc(12 * var(--u)); margin-top: calc(15 * var(--u)); padding: calc(11 * var(--u)) calc(14 * var(--u)); } .td-time { flex: 0 0 auto; font-size: calc(17 * var(--u)); font-weight: var(--body-weight-bold); color: var(--text-secondary); } .td-time i { display: block; font-size: calc(13 * var(--u)); font-weight: var(--body-weight); } .td-what { flex: 1 1 auto; min-width: 0; } /* Truncated, not wrapped: at 1.20x the app's scale (item 9) "Regular check-in" takes two lines on the phone tier, and a two-line title in a one-line list row reads as a bug. The thread rows below already truncate; this is the same rule. */ .td-what b { display: block; font-size: calc(17 * var(--u)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .td-what i { display: block; font-size: calc(13 * var(--u)); color: var(--text-secondary); } .td-row .stack { --av: 34; } .td-lab { margin: calc(16 * var(--u)) 0 calc(9 * var(--u)) calc(4 * var(--u)); font-size: calc(21 * var(--u)); line-height: calc(24 * var(--u)); font-weight: var(--body-weight-bold); } .td-list { padding: 0 calc(14 * var(--u)); } /* The rounded card must keep its corners while its content is cut, so the clip is on the card and the rows run under it. */ .td-msg { position: relative; display: flex; align-items: center; gap: calc(12 * var(--u)); /* The karaoke row is a