/* about.small.css — 09 / About below 900px * * TWO BANDS: the designed mobile layout first, then the undesigned tablet * fallback at the end of the file. The tablet block is fenced with * `min-width: 768px`, so it cannot reach into the mobile block and the order * between them carries no meaning. * * From the Achievements Section Redesign mobile handoff (the same bundle as 08). * The inside is rebuilt top-to-bottom: * * metric strip (5 columns) · figure caption · portrait · content * * THE PANEL IS NOT PINNED HERE — see the note on .about-track below. It was: * a 260vh track holding a sticky 100vh panel, with the copy in a fixed 178px * reservation. That reservation was the handoff's "get this right", and it is * exactly what broke — a fixed height for copy that reflows paints over the * signature the moment the text needs one more line, which it does at 360px * wide in English and at 390px in Hungarian. The panel now grows instead, and * every content row is content-sized. The rules are * * content rows content-sized, copy included * THE PORTRAIT IS THE ONLY SIZED ELEMENT — it takes 29vh when there is * room and gives way, down to 70px, when the copy needs it. * * The handoff expresses that as a flex column. This is a grid, because the * five-column strip has to hold the 16+ cell (which lives in the desktop rail) * and the four metric cells (which live in the desktop sidecol) side by side, * and no amount of flex ordering puts items from two subtrees into one row. * The portrait row's minmax() is what reproduces the flex elasticity. */ @media (max-width: 767.98px) { /* Wide/narrow variants, the same pair Services uses. Repeated per section rather than shared because small-screen overrides belong in the section's own *.small.css — see CLAUDE.md. */ .wide-only { display: none; } .narrow-only { display: block; } /* THE PANEL IS NO LONGER PINNED ON PHONES, AND THE TRACK GOES WITH IT. Changed 2026-08-14 on Zsolt's instruction that the section may be taller here. WHAT WAS WRONG. The copy sat in a FIXED 178px row inside a panel locked to height:100vh, and .copystack overflows visible — so when the text needed more than the reservation it did not clip, it drew straight over the signature row. Measured against the live copy: 8px of overlap at 360 wide, 31px at 320, and the squeeze pushed `04 / ABOUT` into the location line as well. WHY NOT A NARROW-SCREEN GUARD. The overflow is driven by where the text wraps, so it moves with the LANGUAGE, not just the width: English clears 375 and 390 but Hungarian overlaps both by 8px. Any width threshold would be tuned to whichever language it was measured in and wrong in the other. A fixed reservation for reflowing copy is the bug; the height had to go. WHY NOT KEEP THE PIN AND FLEX THE ROWS. Tried and measured: with the rows elastic under a hard 100vh it still overlapped by 12px at 360x640 and by 100px at 320x568, because grid will not shrink definite tracks that far. At 320x568 the content simply does not fit one viewport. THIS IS THE THIRD USE OF A PATTERN THIS FILE ALREADY HAS — the tablet band below and the reduced-motion block both unpin this panel for the same reason, and the reduced-motion comment reaches the same conclusion: the slot cannot hold the copy and the panel cannot hold its 100vh. WHAT IT COSTS. There is no 260vh hold any more, so sequence.js's q — which it measures as -aboutTop / (trackHeight - vh) — has almost no runway: the denominator falls from 1350px to 1px at 390x844. The phase swap it drives would complete within a pixel of scroll, so the two copy phases are made consecutive blocks instead, and the line reveals are switched off below. Phones now read this section the way tablets already do. */ .about-track { height: auto; } .about { position: relative; height: auto; padding-bottom: calc(16px + var(--banner-h)); /* OVERFLOW MUST NOT BE HIDDEN HERE OR ROW 1 CANNOT PIN. about.css sets `overflow: hidden` to clip the portrait against a fixed 100vh box. That makes .about the scroll container for anything sticky inside it — and since it no longer scrolls, a sticky child has nothing to stick against and simply rides the page. The panel is content-sized now, so there is no overflow left to clip: the portrait's full bleed is a negative margin out to the panel's own edge, not past it. */ overflow: visible; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); /* EVERY ROW IS AUTO — nothing reserves a height for content it cannot measure. That was the whole bug: a fixed slot for copy that reflows, and a portrait row given in vh, which is a number the photograph knows nothing about. The portrait now carries its own aspect-ratio and this row is simply as tall as that makes it. The old `1fr` slack row is gone with the fixed viewport it was slack against. */ grid-template-rows: auto /* 1 metric strip */ auto /* 2 figure caption */ auto /* 3 portrait */ auto /* 4 eyebrow row */ auto /* 5 h2 */ auto /* 6 copy */ auto; /* 7 signature */ column-gap: 6px; /* THE MENU CLEARANCE MOVED INTO ROW 1 ITSELF — see its padding-top below. It was 30px here, for the same reason .sidecol__head reserves its corner on desktop: the floating MENU is fixed over this panel and the handoff did not know it exists. A pinned element ignores its parent's padding, so once row 1 became sticky that 30px stopped protecting it and the MENU landed on the fifth cell — measured 11px of overlap on `3x CONVERT.`. The clearance has to travel with the row that needs it. */ padding: 0 20px 16px; } /* Scoped to .about — .guides, .railcol and .sidecol are shared with 08, which wants a different treatment in achievements.small.css. */ .about .guides i:nth-child(1) { left: 20px; } .about .guides i:nth-child(2) { left: auto; right: 20px; } .about .guides i:nth-child(3), .about .guides i:nth-child(4) { display: none; } /* The wrappers exist for the desktop's two-column geometry; here their children are placed directly on the panel grid. */ .about .railcol, .about__railtop, .about__cells, .about .sidecol { display: contents; } .about .sidecol__head { display: none; } /* --- row 1 · the five-column metric strip ------------------------------- Column 1 is the 16+ cell out of the desktop rail; columns 2-5 are the four flight destinations. The strip subdivides its four columns on the same 6px gap, so all five read as one even row. */ /* ROW 1 PINS TO THE TOP OF THE PANEL. The four figures fly up out of Achievements and, once the panel stopped being pinned, had nowhere to settle — they scrolled off the top almost as soon as they arrived. Pinning the row they land in gives them a resting place. NO JS AND NO SCROLL LISTENER. Both cells are grid items of .about, so their sticky containing block IS the panel: they pin on arrival and release themselves at the section's bottom edge, which is exactly "hold while About is on screen, then go". BOTH ITEMS, NOT A WRAPPER. .about__railtop, .about__cells and the two columns are display: contents so the five cells from two different subtrees can share one grid row — and an element with no box cannot be sticky. .cell and .about__strip are the only real boxes here. :not(.cell--base) because .cell is reused on row 4 and must not pin. The box-shadow is a background, not a shadow. The portrait below is full bleed (margin: 0 -20px) and would otherwise slide through the 20px gutters either side of the pinned row; a 20px spread of the panel colour covers precisely that strip and nothing else. */ .about .cell:not(.cell--base), .about .about__strip { position: sticky; top: 0; z-index: 4; background: var(--bg-about); } /* The second offset on .cell closes the COLUMN GAP. Row 1 is two separate grid items — .cell in column 1, .about__strip in columns 2/-1 — each carrying its own background, with the grid's 6px column-gap between them. A gap has no background, so the copy scrolling underneath showed through it as a 6px vertical slot between `16+ YEARS` and `46 MARKETS`. 7px, not 6: a fractional grid track can leave a sub-pixel sliver at some widths, and one extra pixel lands under the strip's own background rather than anywhere visible. */ .about .cell:not(.cell--base) { box-shadow: -20px 0 0 var(--bg-about), 7px 0 0 var(--bg-about); } .about .about__strip { box-shadow: 20px 0 0 var(--bg-about); } /* padding-top is 14px of the row's own breathing room PLUS the 30px of MENU clearance moved off .about. Both row-1 items carry it so they stay level, and because it lives on the sticky element it protects the row whether it is at rest or pinned. */ .cell { grid-row: 1; grid-column: 1; align-self: end; min-width: 0; padding: 44px 0 10px; border-top: 0; border-bottom: 1px solid var(--hair-2); } .about__strip { grid-row: 1; grid-column: 2 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 44px 0 10px; } /* 16+ does not fly below 768px, and neither do the captions — only the four numbers do. Everything except those four is simply visible. */ .cell__n16 { visibility: visible; font-size: 18px; } .cell__cap, .strip__cap { visibility: visible; font-size: 9px; letter-spacing: .1em; margin-top: 6px; line-height: 1.4; } .strip__n { font-size: 18px; } /* --- row 2 · figure caption, on the panel and never over the photo ------ */ .about__fig { grid-row: 2; grid-column: 1 / -1; padding-top: 10px; font-size: 10px; letter-spacing: .16em; line-height: 1.5; } /* --- row 3 · portrait, full bleed, whole frame -------------------------- */ /* THE BOX TAKES THE PHOTOGRAPH'S OWN SHAPE, so `cover` has nothing to crop. The row used to be a height (29vh) that had no relation to the picture: at 375 and below that made the box 1.94:1 against the source's 1.56:1 and `object-fit: cover` threw away a fifth of the frame, cutting Zsolt off at the chest. aspect-ratio sizes the row from the width instead, so the whole 1296x832 is in view at every screen size and the row is simply as tall as the picture needs — which the unpinned panel can now afford. */ .about__portrait { position: relative; grid-row: 3; grid-column: 1 / -1; left: auto; top: auto; width: auto; margin: 0 -20px; /* out to the panel edge, past the 20px gutter */ min-height: 0; aspect-ratio: 1296 / 832; } /* The vertical feather is gone and the horizontal one stays. The 180deg mask faded the top 18% and the bottom 22% to nothing, which removed the very part of the figure the crop had already been eating. The 90deg mask is what blends the full-bleed picture into the panel's side edges, so it keeps doing its job. */ .about__portrait img { object-position: 50% 50%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); } /* --- row 4 · eyebrow row ------------------------------------------------ */ /* Both span the whole row and pull to opposite ends, rather than taking two and three columns each: the place name is the longest mono string on the panel and a fixed column split forces it onto a second line. They cannot collide — together they are ~320px of a 350px row. */ .about__eyebrow { grid-row: 4; grid-column: 1 / -1; justify-self: start; align-self: baseline; padding-top: 14px; font-size: 10px; letter-spacing: .18em; } .cell--base { grid-row: 4; grid-column: 1 / -1; align-self: baseline; justify-self: end; text-align: right; white-space: nowrap; padding: 14px 0 0; border: 0; } /* "Base" is a rail label; the mobile row is just the place. */ .cell--base .cell__label { display: none; } .cell__city { font-family: var(--hud); font-weight: 400; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: 0; } /* The note is its own line on desktop, so the copy carries no leading space. */ .cell__city b { display: inline; font-size: 1em; color: inherit; } .cell__city b::before { content: '\00a0'; } /* --- rows 5-7 · heading, copy slot, signature --------------------------- */ .about__h2 { grid-row: 5; grid-column: 1 / -1; margin: 0; padding-top: 14px; font-size: 29px; line-height: 1.02; } .copystack { grid-row: 6; grid-column: 1 / -1; margin: 14px 0 0; min-height: 0; } /* BOTH PHASES ARE IN FLOW, one after the other. Phase 1 used to be an overlay absolutely positioned over phase 2, which is what allowed a single slot to be sized to the taller of the two — and that slot is what overflowed. With the panel unpinned there is no scroll runway left to swap them across, so they are read as two consecutive paragraphs instead of alternating. */ .phase { gap: 12px; } .phase--1 { position: static; pointer-events: auto; } .phase--2 { position: static; pointer-events: auto; margin-top: 12px; } /* THE LINE REVEALS ARE OFF, AND THIS IS LOAD-BEARING, NOT TIDYING. sequence.js still runs on phones — isStatic() covers only the tablet band and reduced motion — and it hides whichever phase is not current by pushing its lines to translateY(115%). With both phases now in flow, the hidden one would hold its space as a blank gap: measured 4 of 4 lines pushed out of phase 1, adding 125px of nothing to the panel. Neutralising the transform is what makes both phases readable. Same rule, same reason, as the tablet band and the reduced-motion block. */ .about .line { transform: none !important; transition: none !important; } /* ALL THREE INTRO PARAGRAPHS SHOW. p2 and p3 were `display: none` here — the copy had to fit a fixed 178px slot, so mobile ran one paragraph where desktop runs three. That slot is gone and the panel grows to its content, so there is nothing left to trim for and the intro reads in full. */ .copystack p { font-size: 14px; line-height: 1.6; } .copystack h3 { font-size: 21px; line-height: 1.15; } .about__sign { grid-row: 7; grid-column: 1 / -1; /* The rule above this row sat hard against the last line of copy. The margin is the gap between the text and the hairline, the padding the gap between the hairline and the signature — the rule needs both or it reads as attached to whichever side it is closer to. */ margin-top: 26px; padding-top: 18px; gap: 12px; } .about__name { font-size: 19px; } .about__role, .about__cta { font-size: 10px; } .about__cta { padding: 12px 0; } /* 44px hit area */ /* --- line reveal -------------------------------------------------------- */ /* 1.05s / 110ms, against desktop's 1.3s / 160ms. The per-line delay is written by sequence.js; this is the slide itself. */ .about .line { transition: transform 1.05s cubic-bezier(.22, .61, .36, 1); } /* --- reduced motion ----------------------------------------------------- With no reveal there is no phase swap, so the two phases have to become consecutive blocks — and once they do, the 178px slot cannot hold them and the panel cannot hold its 100vh. about.css already makes phase 2 static for this case; on mobile phase 1 is the overlay, so it needs the same treatment and the panel has to unpin to fit the pair. */ @media (prefers-reduced-motion: reduce) { .about-track { height: auto; } .about { position: relative; height: auto; grid-template-rows: auto auto minmax(70px, 29vh) auto auto auto auto; padding-bottom: calc(16px + var(--banner-h)); } .phase--1 { position: static; } .phase--2 { margin-top: 12px; } .copystack { grid-row: 6; } } } /* ========================================================================= TABLET FALLBACK — 768 to 900px. Columns stack in reading order and both copy phases become ordinary sequential blocks. Below 768px the mobile handoff's own implementation takes over (about.small.css), so this band is fenced off from it. ========================================================================= */ @media (min-width: 768px) and (max-width: 900px) { .about-track { height: auto; } .about { position: relative; height: auto; padding: 64px 22px calc(48px + var(--banner-h)); } .about__portrait { position: static; width: 100%; height: 62vh; margin-bottom: 34px; opacity: 1 !important; transform: none !important; } .about__fig { margin-top: 26px; } .cell__n16, .cell__cap, .strip__n, .strip__cap { visibility: visible; } .about__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; } .about__h2 { margin-top: 40px; padding-top: 0; } .copystack { margin: 26px 0 0; } /* Nothing pins, so the two phases read as consecutive blocks. */ .phase--2 { position: static; margin-top: 2.6vh; pointer-events: auto; } .line { transform: none !important; transition: none !important; } .about__sign { margin-top: 34px; flex-wrap: wrap; } [data-late] { opacity: 1 !important; transform: none !important; } }