/* ========================================================================== base.css — design tokens, reset, typography, buttons, utilities, animations ========================================================================== */ /* Body font (Onest family-нэрээр) — Inter Variable бүх Cyrillic-ыг (Mongolian Ү/Ө багтсан) дэмжинэ. Unbounded display font нь Google Fonts-аас direct ачаална. Mongolian Ү/Ө glyph Unbounded subset-д ороогүй учир font-family chain дотроос Onest (=Inter)-аар автоматаар fallback. */ @font-face{ font-family:'Onest'; src:url('../../assets/fonts/InterVariable.woff2') format('woff2-variations'); font-weight:100 900;font-style:normal;font-display:swap; } :root{ --teal:#124C44; --teal-2:#1E7A6B; --teal-deep:#0C332E; --amber:#E0A12E; --amber-deep:#C7861A; --amber-soft:#F3D9A0; --mist:#F2F6F3; --cream:#FBFAF5; --ink:#10241F; --ink-soft:#52635D; --line:#DCE6E1; --white:#FFFFFF; --whatsapp:#25D366; --shadow:0 18px 40px rgba(16,36,31,.10); --shadow-lg:0 30px 60px rgba(16,36,31,.18); /* per-page accent — defaults to brand teal (Танилцуулга, Аялал) */ --accent:#124C44; --accent-2:#1E7A6B; --accent-deep:#0C332E; --accent-soft:#E3EFEC; --accent-rgb:18,76,68; } /* page theme overrides — set class on */ body.t-school{--accent:#1E40AF;--accent-2:#3B82F6;--accent-deep:#172E73;--accent-soft:#E5ECFB;--accent-rgb:30,64,175} body.t-hosp {--accent:#0E7C86;--accent-2:#15A6B4;--accent-deep:#0A565E;--accent-soft:#E1F2F4;--accent-rgb:14,124,134} body.t-about {--accent:#C7861A;--accent-2:#E0A12E;--accent-deep:#9A660F;--accent-soft:#F7ECD5;--accent-rgb:199,134,26} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:'Onest',system-ui,sans-serif;color:var(--ink);background:var(--mist);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased} h1,h2{font-family:'Onest',system-ui,sans-serif;font-weight:700;line-height:1.1;letter-spacing:-.02em} h3,h4{font-family:'Onest',system-ui,sans-serif;font-weight:700;line-height:1.2;letter-spacing:-.01em} h1 em,h2 em{font-style:normal;font-weight:600;color:var(--accent-2)} img{display:block;max-width:100%} a{text-decoration:none;color:inherit} button{font-family:inherit;cursor:pointer;border:none;background:none} section{position:relative} /* layout utilities */ .wrap{max-width:1240px;margin:0 auto;padding:0 32px} .pad{padding:108px 0} .disp{font-family:'Onest',system-ui,sans-serif} /* section heading bits */ .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--accent-2);font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase} .eyebrow::before{content:"";width:26px;height:2px;background:var(--amber);border-radius:2px} .sec-head{margin-bottom:52px} .sec-head h2{font-size:clamp(32px,4.2vw,50px);color:var(--ink);margin-top:14px} /* buttons */ .btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:40px;font-size:14px;font-weight:700;transition:transform .3s cubic-bezier(.34,1.4,.5,1),box-shadow .3s ease,background .3s ease,color .3s ease} /* гялалзах эффект — hover дээр гэрлийн туяа гүйнэ */ .btn::after{content:"";position:absolute;top:0;left:-140%;width:55%;height:100%;z-index:2;pointer-events:none; background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);transform:skewX(-18deg);transition:left .6s cubic-bezier(.22,.61,.36,1)} .btn:hover::after{left:150%} .btn:active{transform:translateY(0) scale(.97)} .btn-amber{background:var(--amber);color:var(--ink)} .btn-amber:hover{background:var(--amber-deep);box-shadow:0 14px 30px rgba(224,161,46,.45)} .btn-teal{background:var(--teal);color:#fff} .btn-teal:hover{background:var(--teal-deep);box-shadow:0 12px 26px rgba(18,76,68,.34)} .btn-accent{background:var(--accent);color:#fff} .btn-accent:hover{background:var(--accent-deep);box-shadow:0 12px 26px rgba(var(--accent-rgb),.34)} .btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.55);backdrop-filter:blur(6px)} .btn-ghost:hover{background:rgba(255,255,255,.18);border-color:#fff} /* scroll-reveal animations */ .reveal{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s ease} .reveal.in{opacity:1;transform:translateY(0)} .stg>*{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease} .stg.in>*{opacity:1;transform:translateY(0)} .stg.in>*:nth-child(2){transition-delay:.1s} .stg.in>*:nth-child(3){transition-delay:.2s} /* global responsive */ @media(max-width:680px){ .pad{padding:72px 0} .wrap{padding:0 20px} } /* ===== Хуудас хоорондын шилжилт — View Transitions API (MPA) ===== Цэвэр, хурдан opacity cross-fade (blur-гүй). Хуучин хуудас хурдан гарч, шинэ нь зөөлөн орж ирнэ — "хальт/бараан" эффект үүсгэхгүй. */ @view-transition{ navigation: auto } ::view-transition-old(root){ animation:vt-out .22s ease both } ::view-transition-new(root){ animation:vt-in .34s ease both } @keyframes vt-out{ to{ opacity:0 } } @keyframes vt-in{ from{ opacity:0 } } @media(prefers-reduced-motion:reduce){ ::view-transition-old(root),::view-transition-new(root){ animation:none } .reveal,.stg>*{ opacity:1 !important; transform:none !important; transition:none !important } html{ scroll-behavior:auto } }