/* ===== MARROW LANGUAGE SWITCHER ===== * Shared language picker for the multi-language marketing site. * Reuses the locked design tokens from /css/styles.css. No new tokens. * Injected into the nav by /assets/i18n/i18n.js on every page. */ .lang-switch { position: relative; display: inline-flex; align-items: center; margin-left: 18px; font-family: var(--mono); } .lang-switch-btn { display: inline-flex; align-items: center; gap: 7px; background: transparent; color: inherit; border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; line-height: 1; transition: border-color 140ms ease, background 140ms ease; } .lang-switch-btn:hover, .lang-switch-btn:focus-visible { border-color: var(--marrow-red); } .lang-switch-btn svg { width: 13px; height: 13px; flex-shrink: 0; } .lang-switch-caret { width: 9px; height: 9px; transition: transform 160ms ease; } .lang-switch[data-open="true"] .lang-switch-caret { transform: rotate(180deg); } .lang-switch-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 184px; background: var(--paper-card); border: 1px solid var(--steel-light); border-radius: 8px; box-shadow: none; padding: 6px; list-style: none; margin: 0; display: none; z-index: 200; } .lang-switch[data-open="true"] .lang-switch-menu { display: block; } .lang-switch-menu li { margin: 0; } .lang-switch-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 6px; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--bone-black); text-decoration: none; transition: background 120ms ease; } .lang-switch-link:hover, .lang-switch-link:focus-visible { background: var(--paper-nested); } .lang-switch-link[aria-current="true"] { color: var(--marrow-red); font-weight: 550; } .lang-switch-link .lang-native { display: flex; flex-direction: column; line-height: 1.25; } .lang-switch-link .lang-endonym { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--steel); text-transform: uppercase; } .lang-switch-link[aria-current="true"] .lang-endonym { color: var(--marrow-red); } .lang-switch-check { width: 14px; height: 14px; color: var(--marrow-red); flex-shrink: 0; opacity: 0; } .lang-switch-link[aria-current="true"] .lang-switch-check { opacity: 1; } /* Footer language row. A secondary, always-visible set of links so the * switcher is reachable even if a user does not open the nav menu. */ .lang-footer-row { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 18px; margin-top: 6px; border-top: 1px solid var(--line-dark); } .lang-footer-row a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel-light); text-decoration: none; transition: color 120ms ease; } .lang-footer-row a:hover, .lang-footer-row a:focus-visible { color: var(--bone-cream); } .lang-footer-row a[aria-current="true"] { color: var(--bone-cream); font-weight: 500; } /* On narrow screens the nav links wrap; keep the switcher compact. */ @media (max-width: 860px) { .lang-switch { margin-left: 10px; } .lang-switch-btn { padding: 6px 9px; } } /* TAP FLOOR. Gauntlet's L5_TARGET_SIZE_FLOOR is 44px on both axes under 768 * wide. The button drew at 75.4 by 27 on every locale home, so it was under the * floor on the one axis the row never needed it to be. */ @media (max-width: 767px) { .lang-switch-btn { min-height: 44px; min-width: 44px; justify-content: center; } } /* ===== 374 AND BELOW: THE SWITCHER IS THE GLOBE, AND THE CTA COMES BACK ===== * css/styles.css steps the nav CTA and the insets down at 480, 374 and 360. * This file stopped at 520, so on a phone the switcher kept its full 75.4px and * the row ran past the screen. Measured in a browser before this block, every * locale home: * 320 .nav-left 192.1 .lang-switch 75.4 + 10 margin .nav-cta 44 + 6 * CTA left 323.5, right 367.5, document 369 to 380: wholly off screen. * 361 CTA right 369.5, document 373: still over, so the edge is 374, the * shared ladder's narrow Android rung, and not 360. From 375 up the * row fits (CTA right 371.5 at 375). * The endonym and the caret are the two parts said twice: the globe says * language, the aria-label says "Choose language" in the page's own language, * and the menu names every language. The globe stays and the button keeps its * 44px floor. */ @media (max-width: 374px) { .lang-switch { margin-left: 6px; } .lang-switch-btn { padding: 6px; } .lang-switch-btn > span, .lang-switch-btn .lang-switch-caret { display: none; } } /* THE HOME ROW. The Atelier home nav (English and the five locale homes) is * .nav-left 194.1 with the wordmark, and with the full switcher the row needs * 351.5px before the CTA. "Join now" is 78.5 to 82.1 wide, so below about 432 * the CTA was squeezed to its 44px floor and wrapped onto two lines, and * "Postular" ran out of its pill. The wordmark goes for the reason the 520 * block gives for .nav-wordmark: the mark beside it is the same brand and the * link keeps its aria-label "Marrow home". 440 leaves room on both sides. */ @media (max-width: 440px) { .nav .brand > span { display: none; } } @media (prefers-reduced-motion: reduce) { .lang-switch-caret, .lang-switch-btn, .lang-switch-link { transition: none; } } /* ===== LOCALE PAGES: THE NAV ROW CARRIES ONE MORE ITEM THAN ENGLISH DOES ===== * Every page that loads this file injects .lang-switch as a fifth item into * the shared nav row: brand, menu button, switcher, CTA, plus the absolutely * positioned link panel. The row is flex nowrap and .nav .nav-cta carries * white-space: nowrap from css/styles.css, so the CTA cannot give ground and * the surplus pushes the whole document sideways instead. * * Measured in a browser at a 375 viewport, before this block: * /es/ CTA "Postular" 71.9px right edge 370.5 document 375 * /it/ CTA "Candidati" 74.7px right edge 373.3 document 375 * /ru/ CTA "Podat zayavku" in Cyrillic * 107.2px right edge 405.8 document 406 * /pt/ CTA "Get your Fit Check" 131.0px right edge 429.6 document 430 * Three locale pages fit with under 5px of clearance and two did not fit at * all. The character budget the shared nav guard holds cannot see this: it was * measured on English pages that carry no switcher, and a character is a * different number of pixels in Cyrillic than in Latin. * * The wordmark is the one item in that row that is said twice. The mark beside * it is the same brand, the link keeps its aria-label, so a screen reader still * reads "Marrow home" and a reader still sees the mark. Dropping the repeated * word returns about 89px, which is more than the switcher and a localized * label together need. Nothing is hidden that is not already said. */ /* THE RUNG ENDS AT 520 AND NOT AT 480, BECAUSE 481 WAS NEVER MEASURED. * Everything above was measured at 375 and 390, and 480 is where the shared * .nav .nav-cta rung in css/styles.css stops tightening. One pixel past it the * CTA snaps back to 13px type in 22px of padding and the wordmark returns, all * at once, and the localized row is over again. Measured at a 481 viewport: * /pt/ CTA "Receba seu Fit Check" 183.5 document 484 OVER by 3 * /ru/gyms/ CTA "Записаться на демо" 184.5 document 485 OVER by 4 * Every locale page fits from 482 up, so the need is a handful of pixels in a * band a few pixels wide. The rung runs to 520 rather than to 485 so the edge * is a round width with room on both sides of it rather than a number sitting * on top of the measurement that produced it. * * The band below 480 is untouched: the wordmark still resolves to display none * at every width tests/public-overflow-floor.test.mjs checks. */ @media (max-width: 520px) { .nav-brand .nav-wordmark { display: none; } } /* ===== LOCALE HOME HEROES: THE HEADLINE WAS PINNED WIDER THAN THE PHONE ===== * .hero-headline in css/styles.css is font-size: clamp(64px, 12vw, 168px). * 12vw only reaches the 64px floor at a 533px viewport, so every narrower * screen draws the headline at a flat 64px, and one long localized word is * then wider than the screen. .hero-content is a flex item of section.hero * with min-width: auto, so it cannot shrink below that word, and section.hero * has overflow-x: hidden, so the word is CLIPPED ON BOTH SIDES rather than * scrolled to. A cut headline is worse than a page that scrolls, because the * reader has no way to reach the rest of it. * * Measured in a browser at a 375 viewport, headline min content width against * the 335px the hero has to give, before this block: * /es/ 419.6px over by 84.6 * /fr/ 408.8px over by 73.8 * /it/ 441.0px over by 106.0 * /pt/ 419.6px over by 84.6 * /ru/ 482.5px over by 147.5 * After, with the same measurement at every width this site is tested at, the * worst case is Russian at a 320 viewport with 35.5px of clearance left. * * The rule starts at 533px because that is the exact width where 12vw equals * the 64px floor, so it takes over precisely where the shared rule stops * scaling and never overrides a size the shared rule chose. */ @media (max-width: 533px) { .hero-content { min-width: 0; } .hero-headline { font-size: clamp(30px, 10vw, 64px); } } /* ===== LOCALE SUBPAGE CARD GRIDS: THE TRACK COUNT WAS WRITTEN INTO MARKUP ===== * The coach, gyms and pricing pages in every locale build their card rows with * an inline style attribute: display: grid with a hardcoded two or three column * track list. An inline declaration beats every stylesheet rule short of * !important, so no media query anywhere could reach these and no phone * breakpoint ever applied to them. * * A 1fr track's automatic minimum is the largest min content contribution of * the items in it, and the cards are grid items with min-width: auto, so * neither track could go below its widest card and the grid overflowed itself. * * Measured in a browser at a 375 viewport, before this block. Grid box width * was 335px in every case, which is the container. The scroll width is what * the tracks actually demanded: * /es/coach/ 501 document /es/gyms/ 867 /es/pricing/ 375 * /fr/coach/ 534 /fr/gyms/ 922 /fr/pricing/ 396 * /it/coach/ 506 /it/gyms/ 927 /it/pricing/ 384 * /pt/coach/ 508 /pt/gyms/ 902 /pt/pricing/ 437 * /ru/coach/ 587 /ru/gyms/ 752 /ru/pricing/ 416 * Fourteen of fifteen pages ran off the right edge, and /fr/gyms/ ran two and a * half times the width of the screen it was being read on. * * WHY THE TRACK COUNT IS PRESERVED ABOVE THE BREAKPOINT RATHER THAN MADE FLUID. * repeat(auto-fit, minmax(...)) was the other candidate and it is wrong here. * auto-fit gains and loses columns as the container grows, and no single track * floor keeps a two column grid at two columns across both a 704px tablet * container and a 1216px desktop one. Measured: the desktop grids resolve to * 2 x 600px and 3 x 394.7px today. Changing those counts is a redesign, and the * site's design baseline is locked to incremental repair. * * So the count is kept and the FLOOR is removed instead. minmax(0, 1fr) has no * min content minimum, and min-width: 0 on the cards stops an individual card * pinning its own track open. Below 720 the row stacks, which is the same * breakpoint and the same collapse these pages already use for .tier-stack-row, * .gym-features and .fc-bio-inner. Above 720 nothing moves: the cards measured * 150px to 296px of min content against tracks of 332px and up, so no card was * relying on the floor that was removed. */ .loc-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .loc-card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .loc-card-grid > *, .loc-card-grid-3 > * { min-width: 0; } @media (max-width: 720px) { .loc-card-grid, .loc-card-grid-3 { grid-template-columns: 1fr; } } /* ===== ONE WORD CAN STILL PIN A TRACK THAT HAS NO FLOOR LEFT TO REMOVE ===== * minmax(0, 1fr) and min-width: 0 above take away every floor the TRACK and * the CARD had. They cannot take away the floor a single unbreakable word * plants inside the card, because a word's min content width is the whole word. * * Measured in a browser at a 721 viewport on /ru/gyms/, once the nav stopped * being the widest thing on the page and this became visible: * .loc-card-grid-3 grid box 657 tracks 3 x 208.3 scrollWidth 730 * the card's mono eyebrow, "Индивидуально" box 126 min content 240 * document scrollWidth 762 * Thirteen Cyrillic characters at 11px with 0.22em of tracking demand 240px in * a 126px box. Deleting the tracking outright returns 31px of the 114px gap, so * no spacing or size change on that label closes it, and stacking the row two * breakpoints higher would redraw 45 pages to repair one. * * overflow-wrap: anywhere is the one property that changes the ANSWER rather * than the symptom: it lowers min content to the widest single character, so * the track is free to take the share the grid gives it. break-word is the * wrong half of the pair here and was rejected on that: it wraps the same way * visually but leaves min content at the whole word, so the grid would still * be pinned open and the page would still scroll. * * It only ever permits more shrinking, never less, so it cannot push a page * that fits today over its edge, and it only breaks a word that had no room to * begin with. Verified across 45 locale pages at 8 widths after: no page's * scrollWidth grew anywhere. */ .loc-card-grid > *, .loc-card-grid-3 > * { overflow-wrap: anywhere; } /* ===== LOCALE PAGES: THE DASHBOARD PREVIEW IS A SCREENSHOT, SO IT PANS ===== * The coach and gyms pages carry a mock product window. Inside it the layout is * a single 1fr track below 720, and a 1fr track's automatic minimum is the * largest min content contribution in it. .dash-main sits in that track with * min-width: auto, so the track could not go below what the widest thing inside * .dash-main demanded, and it dragged .dash-sidebar out with it. The sidebar is * the widest painted box and it is NOT the cause: measured at a 320 viewport on * /ru/coach/, .dash-sidebar drew at 341.7px against its own min content width * of 130.1px. * * What actually set the floor, measured at the same viewport: * .dash-metrics 3 tracks, min content 341.7 * .dash-table-row 4 tracks, header min content 312.0 * * STACKING IS THE WRONG REPAIR FOR THIS ONE. .dash-table-row is a four column * data row inside a screenshot of a table. Collapsed to one column it stops * reading as a table, which is a redesign of the thing the picture exists to * show. So the picture keeps its shape and PANS inside the mock window instead, * which is the rule the rest of this pass enforces: content wider than a phone * scrolls inside its own box and the document never does. * * overflow-y is deliberately left alone. .dash-content sets min-height, not * height, so it grows to its content and has nothing to scroll vertically. */ .dash-content, .gym-dash-content { overflow-x: auto; } /* ===== LOCALE PAGES: THREE MORE HEADINGS PINNED WIDER THAN THE PHONE ===== * The same shape as the hero headline above, in three more places. Each is a * clamp whose vw term never reaches its own floor at a phone width, so every * phone drew the flat floor value and one long localized word ran past the box. * * .page-hero-title clamp(40px, 6vw, 80px) 6vw meets 40px at 667 * .section-title clamp(36px, 5vw, 64px) 5vw meets 36px at 720 * .perf-tier-title a flat 40px with no vw term at all * * Measured in a browser at a 320 viewport, min content width against the box: * /ru/coach/ h1.page-hero-title 309 against 280 * /ru/coach/ h2.section-title 319 against 280 * /fr/pricing/ h2.perf-tier-title 252.8 against 184 * /ru/pricing/ h2.perf-tier-title 253.7 against 184 * * Each override starts at the width where the shared clamp stops scaling, so it * takes over exactly where the shared rule goes flat and never overrides a size * the shared rule chose. .perf-tier also stops paying 48px of side padding on a * phone, which is what left its title only 184px to work with. */ @media (max-width: 667px) { .page-hero-title { font-size: clamp(26px, 8vw, 40px); } } @media (max-width: 720px) { .section-title { font-size: clamp(24px, 7.5vw, 36px); } } /* .perf-tier and .perf-tier-title are NOT repaired here. They are declared in * each locale pricing page's own style block at the same specificity, and that * block is written after the link to this file, so a copy here would lose on * source order and sit in the file looking like a repair that is not applying. * The rule lives next to the declaration it modifies instead. */ /* ===== TWO MORE HEADINGS PINNED, THIS TIME FROM INSIDE THE MARKUP ===== * The features and method pages in every locale set their section headings with * an inline style attribute, style="font-size: 36px" and style="font-size: 40px", * 60 of them across 10 pages. An inline declaration beats every stylesheet rule * short of !important, so the .section-title phone floor above never reached one * of them and no phone breakpoint ever applied to these headings at all. Same * shape as the card grids further up: the value was written into the markup, so * the markup is where it had to stop being written. * * Measured in a browser, heading min content width against the box it sits in: * /es/features/ at 320 "La infraestructura que sostiene." 350 against 280 * /fr/features/ at 320 351 against 280 * /it/features/ at 320 352 against 280 * /ru/features/ at 320 348 against 280 * /pt/method/ at 320 307 against 280 * with the computed font size still reading 36px at a 320 viewport, which is * the inline value winning. * * The classes carry the pinned size ABOVE 720 only. Below that they declare * nothing, so the .section-title floor above governs, which is the rule that * was written for exactly this and could not be heard. Desktop is unchanged to * the pixel: 36px and 40px are the same two numbers the attribute held. */ @media (min-width: 721px) { .loc-section-title { font-size: 36px; } .loc-section-title-40 { font-size: 40px; } }