/* Ekal public website: the pages' own styles (2026-10-28, the approved design; docs/WEBSITE.md) — the home page, and what the four audience pages share with it (they add ek-site-aud.css). The shell (tokens, buttons, header, panels, phone sheet, footer) is ek-site.css. Ported from the design preview (~/ekal-local/website-design/src/site.css) without the preview's own notes and without the certificate graphic (Ekal gives no certificates). Every rule applies under body.ek-site (the pages that link this file set it). Content is never hidden waiting for a script or a scroll: motion is CSS scroll-driven animation under @supports, the motion graphics are rendered at their final step, and nothing moves under prefers-reduced-motion. Like ek-site.css this is linked in , after tailwind.css. */ @media (prefers-reduced-motion: no-preference) { html:has(> body.ek-site) { scroll-behavior: smooth; } /* the audience switch's pill travels between the pages (cross-document view transition) */ @view-transition { navigation: auto; } } body.ek-site { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); background: radial-gradient(620px 520px at 104% 18%, rgba(99, 112, 255, .22) 0%, transparent 70%), radial-gradient(520px 420px at -6% 46%, rgba(236, 72, 153, .08) 0%, transparent 70%), radial-gradient(1100px 640px at 100% 0%, #e2e6ff 0%, transparent 60%), radial-gradient(900px 620px at 0% 100%, #ece4ff 0%, transparent 58%), linear-gradient(180deg, #f6f7fd, #eef1f9); background-attachment: fixed; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .ek-site main :is(img, video, svg) { display: block; max-width: 100%; } /* base.html keeps `nav { min-height: 4rem }` for the old pages' own