/* ============================================================ WWA 03 · Who We Are — opener (the thesis / ladder). Built from Board Specs/wwa-01-opener.md: pinned; missing rungs are added one at a time, each hand enters horizontally 1:1 with scroll, places its rung between the fixed rails. Rails, existing rungs, copy and climber stay fixed. Scrolling back reverses the sequence exactly. The spec's "then retracts" is implemented as drawn (Julian, 24 Aug 2026): each window is enter → place → retract. At the placement frame (a cut, §4.2) the fixed rung appears and the hand's drawn rung is clipped out of its image, so an empty hand travels back out the way it came. Fully reversible. ============================================================ */ #wwa-opener-act{height:400vh} #wwa-opener{--chapter-bg:var(--moss);color:var(--cream)} /* moss ground, paper type (Maddie's pairings, Julian's pick, 10 Sep 2026; ink from 5 Sep, gum for a day before that) */ /* the 1440×900 frame IS the viewport — the header band is drawn inside its top 120px, so it renders full-width from the top-left and the real nav rides over the band (Julian, 25 Aug 2026) */ #wwa-opener .board{position:absolute;left:50%;top:0;transform:translateX(-50%); width:100vw;aspect-ratio:1440/900;overflow:hidden; container-type:size;container-name:b} #wwa-opener .board > *{position:absolute} /* the words' layer: the board's geometry, so nothing moved when the copy left the board (Julian, 6 Sep 2026); .copy dissolves here */ #wwa-opener .text{position:absolute;left:50%;top:0;transform:translateX(-50%); width:100vw;aspect-ratio:1440/900;pointer-events:none; container-type:size;container-name:b;z-index:3} /* the copy is one block, vertically centred in the frame (Fred, 9 Sep 2026 — the board pinned the eyebrow at 26% and the headline at 32% for a three-line deck headline; the display headline is shorter and left the frame top-heavy, with the block ending in empty air). Its measure is 43% (619 at 1440), the body at 84% of that (520, the board's). */ #wwa-opener .copy{display:flex;flex-direction:column;align-items:flex-start; position:absolute;left:6.944%;top:50%;transform:translateY(-50%);width:43%} #wwa-opener .text > .copy > *{position:static} /* type: the landing page's Problem sections' (07-problem-1.css) — the eyebrow in mono; the headline in the deck face, Semibold, 5cqw = 72px at 1440 on 68 (.9444em), -.02em — "Our work has always focused on what comes next." breaks in three on the 43% measure; the body two paragraphs with a blank line between, Deck Medium at the body-large size, 1.9444cqw = 28px on 34, +.015em. Forma for titles, the display face only for the big display moments (Fred, 9 Sep 2026 — the headline was display 900 at 3.2cqw for a few hours that day). The block's right edge (~50%) stays left of the h2 hand's curtain at 52.1cqw. Re-measure if the copy changes. */ #wwa-opener .eyebrow{font-family:var(--mono); font-size:1.111cqw;letter-spacing:.08em;text-transform:uppercase; color:inherit} /* cream on the moss — the brand book's pairing (acid for an hour on 10 Sep 2026; cobalt on ink before) */ #wwa-opener h1{margin-top:1.6667cqw;width:100%; font-family:var(--deck-display);font-weight:500; font-size:5cqw;line-height:.9444em;letter-spacing:-.02em} /* 5cqw of the 1440-wide board = 72px, Forma's Display optical size, not Deck (19 Sep 2026) */ #wwa-opener .body{margin-top:1.6667cqw;width:84%; font-size:1.9444cqw;line-height:1.2143em;letter-spacing:.015em;font-weight:400} /* board body is Deck Medium */ /* own layer — pinned-text wobble, see 02-hero.css */ #wwa-opener .eyebrow,#wwa-opener h1,#wwa-opener .body{will-change:transform} /* ladder sized and placed per the comp (wwa-01-opener.jpg, 24 Aug 2026): top at 16.5% — it stops well below the header — width 9.1%, running off the bottom of the frame. It is layered ABOVE the placed rungs (9 Sep 2026, Fred, review DEV 06): the gap between its rails is transparent, so a rung behind it shows through the gap and its ends pass behind the opaque rails — seated in the holes, not laid on top. */ /* left rail at 68% (was the board's 75% — Fred, 9 Sep 2026: with the shorter copy the frame read as a column, a gap, and a ladder pinned to the edge; at 68% the ladder sits on the frame's right third with air on both sides, the hands' stage). Every x below and the hands' `to` values in the JS moved by the same 7cqw. */ #wwa-opener .ladder{left:68%;top:16.5%;width:9.1%;z-index:2} #wwa-opener .ladder img{display:block;width:100%} /* the three placed rungs — crops of the ladder's own artwork, behind the ladder (z 1). The bar inside the 127px crop is centred on row 55 (rows 36–74, measured 9 Sep 2026), 12.49 board px at 1440; each top is its slot centre — the stud markers on the rails, 459/955/1700 of the 3417px ladder → 28.08/40.60/59.40% board — minus that. (The 24 Aug tops used 61 as the bar centre and sat the seated bar 1.4px above the slot while the carried bar sat 0.9px below it: the "shift up" at the cut, DEV 06.) */ #wwa-opener .rung{width:9.1%;visibility:hidden;z-index:1} #wwa-opener .rung img{display:block;width:100%} #wwa-opener .r1{left:68%;top:26.69%} #wwa-opener .r2{left:68%;top:39.21%} #wwa-opener .r3{left:68%;top:58.01%} #wwa-opener .placed .rung{visibility:visible} #wwa-opener .rung.placed{visibility:visible} /* hands above the ladder (z 3). Each top puts its carried bar's centreline exactly on its slot centre: the bar inside each image is centred on row 121 of 301 (h1), 60.5 of 574 (h2), 57 of 585 (h3) — measured 9 Sep 2026 — so top = slot centre − that row × the image's board scale (14.83% / 13.48% / 12.13% of 1440 over its pixel width). Two images per hand: .full carries the bar, .empty is the same drawing with the bar erased; .placed swaps them in one frame. */ #wwa-opener .hand{visibility:hidden;will-change:transform;z-index:4} #wwa-opener .hand img{display:block;width:100%} #wwa-opener .hand .empty{position:absolute;left:0;top:0} #wwa-opener .hand.placed .full{visibility:hidden} #wwa-opener .hand:not(.placed) .empty{visibility:hidden} /* the carried bar is trimmed at its leading tip (9 Sep 2026, Fred): as drawn it reaches the far rail's OUTER edge at placement, a bar longer than the one that ends up seated between the rails. Each .full image loses 8.6 board px at the tip so the bar stops a third of the way into the far rail — in the hole — in the image's own pixels (h3 48px of 973, h1 56px of 1384, h2 51px of 1155). */ #wwa-opener .h3 .full{clip-path:inset(0 0 0 5.8%)} #wwa-opener .h1 .full{clip-path:inset(0 0 0 4.3%)} #wwa-opener .h2 .full{clip-path:inset(0 4.7% 0 0)} /* the holes close once a rung is in (9 Sep 2026, Fred): each .plug is a band of the ladder's own rails, 56 rows tall, cut from 70 rows ABOVE its slot (rows 361–417, 856–912 and 1602–1658 — rail only, no stud, no rung) and laid over the slot's stud markers (rows 446–473, 940–969, ~1686–1714) above the ladder (z 3) — the gap between the rails is transparent in the source, so only the rails are painted. Sizes in cqw so the band scales with the ladder (9.1cqw wide, 577px source): one source row = 0.015772cqw; the ladder's top is 16.5% × 900 = 10.3125cqw. */ #wwa-opener .plug{left:68%;width:9.1%;height:0.883cqw;visibility:hidden;z-index:3; background:url(/assets/img/whoweare/wwa-ladder.webp) 0 var(--py) / 100% auto no-repeat} #wwa-opener .p1{top:17.118cqw;--py:-5.702cqw} #wwa-opener .p2{top:24.925cqw;--py:-13.509cqw} #wwa-opener .p3{top:36.683cqw;--py:-25.267cqw} #wwa-opener .h1{width:14.83%;top:26.00%} #wwa-opener .h2{width:13.48%;top:39.47%} #wwa-opener .h3{width:12.13%;top:58.26%} /* reduced motion: the completed ladder, all rungs installed (spec) */ @media(prefers-reduced-motion:reduce),(pointer:fine) and (max-width:760px),(pointer:fine) and (max-height:560px){ #wwa-opener-act{height:auto !important} #wwa-opener .rung,#wwa-opener .plug{visibility:visible} #wwa-opener .hand{visibility:hidden !important} } /* the chapter is one viewport tall and the frame fits inside it: full-width down to a 16:10 window, height-fit and centred on shorter, wider ones (laptops) — the chapter ground makes the gutters seamless (Fred, 28 Aug 2026; supersedes the 62.5vw frame, Julian, 25 Aug 2026). The clip goes vertical-only: the ladder still cuts at the frame's foot, but the hands enter horizontally from the REAL screen edge (the chapter clips the sides), not the inset board edge. */ @media(min-width:761px) and (not ((pointer:fine) and (max-height:560px))){ #wwa-opener .board{width:min(100vw,160svh); overflow:visible;clip-path:inset(0 -50vw)} #wwa-opener .text{width:min(100vw,160svh)} } /* ---- mobile (§3 stacked flow; Julian, 6 Sep 2026; re-laid 9 Sep 2026, Fred, review DEV 06) ---- The 1440×900 board goes as the frame. The phone follows §3's stacked flow like every other section: the copy — eyebrow, headline, body — at the top inside --m on one rhythm, and the artwork centred beneath. The scene IS the board, scaled and placed by the JS (--bs, --bx, --by): the ladder centred, as large as the room allows, its foot on the chapter's foot, its top a clear 28px under the copy (an ink panel the hands pass beneath), the climber whole. The hands enter from both REAL screen edges (the JS's fromR / fromL; h2's curtain is off here) and meet at the ladder in the middle — the empty ink either side of it is the stage they cross, symmetric by design. The rungs' and hands' positions stay in board units. The board's clip is released so the hands are not cut at its box. Type carries the board's height ratios (the mobile type rule): the headline block ≤ 21.5% of the screen, the body at its ratio with a 17px floor — set by fitMobile() in the JS. Runway 300vh (desktop 400). */ @media(max-width:760px),(pointer:fine) and (max-height:560px){ #wwa-opener-act{height:300vh} #wwa-opener{padding:max(96px,11svh) 0 0} #wwa-opener .text{display:contents} #wwa-opener .copy{display:block;position:relative;top:auto;left:auto;transform:none;width:auto;margin:0; padding:0 var(--m) 0;background:var(--chapter-bg);z-index:3} /* a panel in the chapter's ground (moss since 10 Sep 2026; it was hard-coded ink): the scene passes under it */ #wwa-opener .text > .copy > *{position:static;width:auto} #wwa-opener .eyebrow{font-size:12px;line-height:1} #wwa-opener h1{margin-top:12px;font-family:var(--deck);font-size:clamp(30px,8.7vw,44px);line-height:1} /* size: the JS's; the §3 phone headline on the Problems' line-height. font-family: phone size drops under Display's 48px floor — back to Deck (19 Sep 2026) */ #wwa-opener .body{margin-top:12px;width:auto;font-size:17px;line-height:1.35;max-width:30em} /* the §3 phone body, as the Problems' */ #wwa-opener .board{position:absolute;left:0;top:0; width:1440px;height:900px;overflow:visible;transform-origin:0 0; transform:translate(var(--bx,0px),var(--by,0px)) scale(var(--bs,.4))} } @media(max-width:760px) and (max-height:760px),(pointer:fine) and (max-height:560px){ #wwa-opener{padding-top:max(84px,10svh)} } /* a \n in a copy string forces a line break here (Julian, 5 Sep 2026 — copy.js, LINE BREAKS) */ #wwa-opener h1,#wwa-opener .body{white-space:pre-line} /* ZOOMED (WCAG 1.4.4 — the zoom pass, Julian, 25 Sep 2026): on a computer at a narrow or short window — where 200% browser zoom lands — this section is in its stacked, still layout, and its type is set at the size the board draws it, in rem, so zoom enlarges it (the phone sizes above are fitted to the screen and would cancel the zoom). !important beats the sizes the js writes inline; utils.js zoomFit() then eases back any line whose longest word would run past the edge. */ @media(pointer:fine) and (max-width:760px),(pointer:fine) and (max-height:560px){ #wwa-opener .eyebrow{font-size:1rem!important;line-height:1.3!important} #wwa-opener h1{font-size:4.5rem!important;line-height:1.02!important} #wwa-opener .body{font-size:1.75rem!important;line-height:1.3!important} #wwa-opener .board{display:none!important} /* the ladder and hands: too faint to read at this size (Julian, 25 Sep 2026) */ #wwa-opener{padding-bottom:5rem!important} /* room between the opener's words and the next section (Julian, 25 Sep 2026) */ }