How this site is built

Every route is prerendered, in English, Arabic and Dari. Nothing is rendered on a server at request time — there is no middleware and no function in the deployment, so the whole site is a folder on a content delivery network. Which is why it opens quickly on a phone, on a hotel connection, in a waiting room.

Three languages, one set of URLs. Slugs are shared: /en/treatments/dental-implants and its Arabic and Dari twins differ in the first segment and nothing else. That is what lets the language switcher keep you on the page you were reading instead of dropping you at a home page, and what lets every page declare the other two as hreflang alternates without anybody maintaining a list. A check in the content layer throws in development the moment a slug drifts.

Right-to-left is a typographic change, not a mirror. Arabic script is cursive, so the negative tracking on every display class and the +0.14em on every label go to zero — letter-spacing prises the joins apart and reads as broken rather than as emphasis. Line heights loosen, because Arabic sits on a deeper body. Prices, phone numbers and dates stay left-to-right and isolated, so the bidi algorithm cannot reorder a figure around the word beside it. Layout uses logical properties throughout, so nothing had to be written twice.

Where the images come from. Twenty-six photographs are bundled from Pexels under a licence that needs no attribution; CREDITS.md lists them anyway. Everything else is drawn in code — the glow behind the hero is three layered CSS gradients under a radial mask, and every card falls back to a gradient field generated from a seed string, so the same name always produces the same artwork on the server and in the browser.

Nobody’s face is invented. The four clinicians and the five quoted patients are monograms, never stock portraits. A photograph of a real person under an invented dentist’s name is the one thing on a dental site that would genuinely mislead somebody. Insurer names are set as a monogram and the name in this site’s own type rather than as logos, because an insurer’s mark is theirs to license.

Motion runs at three levels. On a desktop you get smooth scroll, a pinned eighteen-step sequence and line-by-line type. Below 1024px the heavy parts never start and their code is never downloaded. Under prefers-reduced-motion nothing moves at all — and every element is authored in its resting state, so a visitor whose JavaScript never arrives still gets the finished page, including all seven answers in the FAQ.