:root { --brand-1: #2a5f96; --brand-2: #56b8e9; --accent: #f6d957; --accent-soft: #f7b284; --brand-ink: #1d4d7f; --surface: rgba(255, 255, 255, 0.92); --surface-border: rgba(148, 163, 184, 0.25); /* Two font roles, overridden per language further down. A script the Latin faces cannot draw has to substitute both -- swap only the body face and every heading still falls through to whatever the OS happens to have, so the page renders in two unrelated typefaces. */ --font-body: "Nunito", "Segoe UI", sans-serif; --font-display: "Baloo 2", "Nunito", sans-serif; } * { box-sizing: border-box; } /* ── Smooth scrolling ────────────────────────────────────────────────── Animates every scroll the *page* makes on its own rather than jumping: the in-page anchors (`#about`, `#partners`, `#app`, `#reach-us`, `#offer`, `#features`), a "back to top", and anything that calls `scrollIntoView`. Wrapped in `no-preference` rather than paired with a `reduce` override, because that is the direction that fails safe: a visitor who has asked their OS for less motion never gets the rule at all, instead of getting it and relying on a second rule to take it back. Vestibular disorders make a long animated scroll genuinely unpleasant, and this is one of the few animations that moves the entire viewport. On `html` only, and `scroll-behavior` is not inherited — so the nested scrollers (the language panel, the program switcher, the rail strip, the store chips) keep their instant `auto`. That is deliberate: the rail strip positions itself by assigning `scrollLeft` on load, and animating that would be a visible slide on every portal page. The one viewport scroll that must *stay* instant is the one `ajax_region.js` does to put an admin back where they were after an in-place save; it asks for `behavior: 'instant'` explicitly. Anything else added later that restores a remembered position has to do the same. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Lenis adds `.lenis` to when it takes over, and from then on it is animating `window.scrollTo` itself on every frame. Leaving the rule above in force would have the browser animate each of those frames too — two easings on one scroll, which reads as a scroll that will not settle. So the CSS rule is the fallback for exactly the cases Lenis is not running: the portal, reduced-motion, and a browser that did not load the script. No `!important`: `html.lenis` already outranks the bare `html` above it on specificity, and wrapping that one in a media query does not change its specificity. Worth stating because the `!important` that used to be here claimed the media query was the reason it won, which would have had the next override reach for `!important` instead of counting selectors. */ html.lenis { scroll-behavior: auto; } body { font-family: var(--font-body); background: radial-gradient(circle at 0% 0%, rgba(86, 184, 233, 0.22), transparent 36%), radial-gradient(circle at 100% 15%, rgba(246, 217, 87, 0.22), transparent 34%), #f8fafc; } img, video { max-width: 100%; height: auto; } /* The `hidden` attribute must actually hide. Tailwind's preflight says `[hidden]:where(:not([hidden=until-found])){display:none}`, which is specificity 0,1,0 — the same as `.flex`, `.grid` and every other display utility, and declared *earlier* in tailwind.css. So markup like `