/* i18n.css — the language switcher, the suggestion banner, and the TEXT-EXPANSION tolerances the funnel needs once its copy is French or Spanish. LOADED ONLY FROM I18n::headTags(), which returns the empty string on English. So this file is never referenced by an English page, and English cannot be affected by anything in it. That is also why the expansion fixes live HERE rather than in assets/rova.css: rova.css is a build target behind tools/build-assets.ps1, it is heavily contended, and editing it would change the content hash baked into EVERY English page by View::asset(). A funnel-only, locale-only override file costs English nothing and costs the build pipeline nothing. THE EXPANSION PROBLEM, MEASURED RATHER THAN GUESSED. French and Spanish run 15-25% longer than English. rova.css carries 120 `white-space: nowrap` rules, 74 `text-overflow: ellipsis` and 462 fixed pixel widths, and the funnel sits on top of several of them. The rules below are scoped to the funnel's own surfaces and fix the LAYOUT rather than shortening the copy -- shortening the copy is how you end up with a French page that says less than the English one. Every expansion rule is scoped by :root:not([lang="en"]) so it cannot leak onto English even if this file is ever loaded somewhere it should not be -- and so that it covers any locale added later without naming one. See the note above the rules for why that matters. */ /* ---- the switcher -------------------------------------------------------------------- */ /* DELIBERATELY NOT HERE. The switcher renders on English pages too, and this file is loaded only on localized ones -- so its rules live inline in I18n::SWITCH_CSS, emitted into the of any page that renders the nav. Duplicating them here would give the same component two sources of truth that drift, and the one that drifts is the one nobody is looking at. See the note on I18n::SWITCH_CSS for why inline beat both stylesheet options. */ /* ---- the suggestion banner ------------------------------------------------------------ */ .i18n-offer { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--card, #16150f); border-bottom: 1px solid var(--stroke); font-size: 13.5px; } .i18n-offer-go { color: var(--accent); text-decoration: underline; flex: 1 1 auto; min-width: 0; } .i18n-offer-x { flex: 0 0 auto; background: none; border: 0; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; /* 44px is the real tap target even though the glyph is small -- this bar is the first thing a member touches and a 12px × is a miss. */ min-width: 44px; min-height: 44px; } .i18n-offer-x:hover { color: var(--text); } /* ---- text expansion, funnel surfaces only --------------------------------------------- WRITTEN OUT LONGHAND, NOT WITH CSS NESTING. Native `&` nesting needs Safari 16.5+, and the proof matrix this funnel is judged by includes webkit -- a nested block that silently fails to parse there would drop every expansion fix on exactly the engine most likely to need them, and it would fail SILENTLY, which is the same class of false-clean this whole pass is built to avoid. Verbose and universally parsed beats terse and conditional. */ /* SCOPED :root:not([lang="en"]), NOT :root[lang="fr"], :root[lang="es"]. This file originally enumerated the two languages by name in every selector. That works, and it quietly makes the central claim of this architecture FALSE: "adding a third language is a content exercise" is only true if nothing outside lib/i18n.php and lib/lang/ knows which languages exist. Twenty selectors naming fr and es are twenty edits somebody has to remember on the day German lands, and the failure mode if they forget is not an error -- it is a German page silently laid out with English width assumptions. Negating the DEFAULT instead of listing the alternates inverts that: every locale that will ever exist is covered the moment it is added, and English is excluded by construction. */ /* .btn carries FOUR nowrap rules in rova.css. "Démarrer l'essai gratuit" and "Empezar prueba gratuita" are both ~40% longer than "Start free trial", and at 390px a nowrap button either overflows its card or forces a horizontal scrollbar on the whole page. Full-width funnel buttons (.block) are allowed to take a second line and grow with it: a two-line CTA is strictly better than a clipped one. */ :root:not([lang="en"]) .auth-wrap .btn.block, :root:not([lang="en"]) .card .btn.block, :root:not([lang="en"]) .cta .btn { white-space: normal; line-height: 1.25; height: auto; min-height: 44px; padding-top: 10px; padding-bottom: 10px; } /* THE GUEST TOPBAR CTAs. The structural half of this fix is in assets/rova.css: the brand is rigid now and the nav is the elastic item, so a longer label can no longer eat the wordmark. What is left is a budget question, and it is only ever tight on a phone: 320px, French: mark 40 + bar gap 10 + nav 256.22 = 306.22 into 300px of content box. Six pixels. Without them the bar's `flex-wrap` safety net fires and the header goes to two rows -- 133px of sticky chrome on a 320px phone, which is a real cost for a real reason but not one worth paying over six pixels. `.btn.sm` carries 13px of side padding and `.btn.primary.sm` 15px; taking both to 8 below 440px returns 24px to the row, which clears 320 and leaves 390 with room to spare in both languages. PADDING, NOT COPY, AND NOT FONT SIZE. The labels are translations somebody wrote on purpose; shortening them to fit a layout bug is the wrong trade and the next language breaks it again anyway. The type stays 13.5/12.5px and the pill stays 44px+ tall in every localized render (they are two-line at these widths), so nothing here touches readability or the tap target. Scoped `:root:not([lang="en"])` like everything else in this file: English keeps its 13/15px padding untouched -- and it never needed the room, because "Log in" and "Start free" leave the English row slack at every width. */ @media (max-width: 439.98px) { :root:not([lang="en"]) .topbar .btn.sm { padding-left: 8px; padding-right: 8px; } } /* The hero feature chips are a tight row in English. "De vrais messages privés" and "Mensajes directos de verdad" are each nearly double their English source, so the row must reflow rather than clip. */ :root:not([lang="en"]) .hero-feats { flex-wrap: wrap; } :root:not([lang="en"]) .hero-feat { white-space: normal; } /* The onboarding checklist. Each row is [tick][body][chevron]; the body holds a title and a muted sub-line, and rova.css lets the body shrink. A shrink FACTOR times a long basis is what drove names to zero width earlier this week, so the body gets a real minimum and the two fixed-size ends are told not to shrink at all. NOTE: /onboarding is behind auth AND Disallow'd in robots.txt, so these four rules are the only ones in this file that have NOT been measured on a real render. They are written from the markup, not from a screenshot. */ :root:not([lang="en"]) .setup-body { min-width: 0; flex: 1 1 auto; } :root:not([lang="en"]) .setup-body strong { white-space: normal; overflow-wrap: anywhere; } :root:not([lang="en"]) .setup-body .muted, :root:not([lang="en"]) .setup-body .hint { white-space: normal; } :root:not([lang="en"]) .setup-check, :root:not([lang="en"]) .setup-cta { flex: 0 0 auto; } /* Field labels and hints: "Nombre de usuario o correo" is a full line at 390px. Never ellipsis a form label -- a truncated label is a field nobody can fill in correctly. */ :root:not([lang="en"]) .field label { white-space: normal; } :root:not([lang="en"]) .field .hint { white-space: normal; overflow: visible; text-overflow: clip; } /* The step counter sits inside the h2/h3 beside a heading that has itself grown. Let it sit as its own inline block rather than squeezing the heading. */ :root:not([lang="en"]) #chk-count { display: inline-block; margin-left: 6px; } /* 390px is the width the funnel is actually judged at: the narrowest device in the zz-gold-diff matrix, and what a signup link opened from a DM lands on. */ @media (max-width: 430px) { /* The promo pill and the trailing legal line are the two longest single runs on /signup. */ :root:not([lang="en"]) .promo-landing-pill, :root:not([lang="en"]) .hint.center { white-space: normal; overflow-wrap: anywhere; } :root:not([lang="en"]) .lang-switch { margin-top: 14px; } /* An

sized for English at 390px overflows once the sentence grows a clause. */ :root:not([lang="en"]) .home-hero h1 { overflow-wrap: break-word; hyphens: auto; } }