/* base.css — fonts, reset, element defaults, language-driven typography, a11y helpers. */ /* ---- Fonts ---- Pyidaungsu ships with Windows Myanmar support, so local() resolves with no download there; the self-hosted woff2 in assets/fonts/ covers every other platform so Myanmar text never falls back to a non-Myanmar-aware font. Public Sans is not a system font; Segoe UI stands in until the woff2 is added. */ @font-face { font-family: "Public Sans"; src: url("../fonts/PublicSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Public Sans"; src: url("../fonts/PublicSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Public Sans"; src: url("../fonts/PublicSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Public Sans"; src: url("../fonts/PublicSans-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Pyidaungsu"; src: local("Pyidaungsu"), url("../fonts/Pyidaungsu-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Pyidaungsu"; src: local("Pyidaungsu Bold"), local("Pyidaungsu"), url("../fonts/Pyidaungsu-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* ---- Language-driven typography ---- data-lang on switches the active families and rhythm. Myanmar runs a touch larger with looser leading so stacked glyphs stay legible. */ :root, :root[data-lang="my"] { --font-body: var(--font-mm); --font-display: var(--font-mm); --lh-body: 1.85; --lh-tight: 1.4; --display-weight: 700; } :root[data-lang="en"] { --font-body: var(--font-en); --font-display: var(--font-en); --lh-body: 1.6; --lh-tight: 1.05; --display-weight: 800; } body { font-family: var(--font-body); font-size: var(--step-0); line-height: var(--lh-body); color: var(--color-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; /* lets the header nav band bleed full-width without a scrollbar */ /* Site-wide backdrop: an optional fixed image plus a faint dot texture that shows through wherever a section is not painting its own background. */ background-color: var(--color-paper); background-image: var(--img-site, none), radial-gradient(circle at 1px 1px, rgba(30, 69, 136, 0.045) 1px, transparent 1.7px); background-size: cover, 46px 46px; background-position: center, 0 0; background-repeat: no-repeat, repeat; } img, svg { display: block; max-width: 100%; } svg { height: auto; } a { color: var(--color-primary); text-underline-offset: 2px; } a:hover { text-decoration: underline; } h1, h2, h3 { line-height: var(--lh-tight); font-weight: var(--display-weight); letter-spacing: -0.01em; text-wrap: balance; } :root[data-lang="my"] h1, :root[data-lang="my"] h2, :root[data-lang="my"] h3 { letter-spacing: 0; } button { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 3px; } #main { scroll-margin-top: calc(var(--header-h) + 12px); } /* In-page anchor targets clear the sticky header. */ :target, #news, #services { scroll-margin-top: 88px; } @media (min-width: 1081px) { :target, #news, #services { scroll-margin-top: 148px; } } /* ---- A11y helpers ---- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: 10px; left: 10px; z-index: 200; background: var(--color-primary); color: #fff; padding: 12px 18px; border-radius: var(--radius-sm); font-weight: 700; text-decoration: none; transform: translateY(-160%); transition: transform 0.18s var(--ease-out); } .skip-link:focus { transform: none; } /* ---- Load reveal (opt-in, motion-safe) ---- .js is set on before paint; .is-ready is set once the DOM is ready. */ @media (prefers-reduced-motion: no-preference) { html.js .reveal { opacity: 0; transform: translateY(16px); } html.js body.is-ready .reveal { opacity: 1; transform: none; transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); } html.js body.is-ready .reveal-2 { transition-delay: 0.08s; } html.js body.is-ready .reveal-3 { transition-delay: 0.16s; } html.js body.is-ready .reveal-4 { transition-delay: 0.24s; } html.js body.is-ready .reveal-5 { transition-delay: 0.32s; } /* Scroll-reveal for the updates block: .in-view is added by an IntersectionObserver. Without JS or with reduced motion, content is visible. */ html.js .animate { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); transition-delay: var(--delay, 0s); } html.js .animate.in-view { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }