/* ========================================================================== hospitals.css — "Хамтрагч эмнэлгүүд" (medical tourism · South Korea) Clean clinical-premium aesthetic. Cyan accent via . Brand fonts only: Unbounded (headings) + Onest (body). NO icons. GSAP drives reveals (no .reveal class); everything degrades visible. ========================================================================== */ /* ---- type: brand fonts only — Unbounded display, Onest body ---- */ .t-hosp h1,.t-hosp h2{font-family:'Onest',system-ui,sans-serif;font-weight:700;letter-spacing:-.022em} .t-hosp h3,.t-hosp h4{font-family:'Onest',system-ui,sans-serif;font-weight:600;letter-spacing:-.012em} .t-hosp,.t-hosp p,.t-hosp a,.t-hosp span,.t-hosp li{font-family:'Onest',system-ui,sans-serif} .t-hosp .disp{font-family:'Onest',system-ui,sans-serif} /* ---- page-scoped tokens / surfaces ---- */ .t-hosp{ --hx:#0E7C86; /* deep cyan */ --hx2:#15A6B4; /* bright cyan */ --hx-deep:#0A565E; --hx-soft:#E1F2F4; --hx-rgb:14,124,134; --paper:#F6FBFC; /* clinical off-white */ --paper-2:#EEF6F7; --hline:#D6E7E9; --ink:#0C2A2D; --ink-soft:#456066; background:var(--paper); } .t-hosp section{background:var(--paper)} /* shared eyebrow tuned to cyan, with a clinical cyan tick instead of amber bar */ .t-hosp .eyebrow{color:var(--hx);letter-spacing:3.4px;font-weight:700} .t-hosp .eyebrow::before{background:var(--hx2);width:22px;height:2px;border-radius:0} .t-hosp .sec-head h2{color:var(--ink)} .t-hosp h1 em,.t-hosp h2 em{color:var(--hx2);font-weight:600} /* ========================================================================= HERO — VIDEO bg (markup kept exactly). Reuses hero.css frame; we only retint the shared amber accents to cyan and set the clinical poster image. ========================================================================= */ .t-hosp .hero{min-height:100svh;background:#06343a url('../../images/hospital-severance.jpg') center/cover no-repeat} .t-hosp .hero-cover{background:#06343a url('../../images/hospital-severance.jpg') center/cover no-repeat} /* cooler, clinical gradient over the video */ .t-hosp .hero-ov{background:linear-gradient(180deg,rgba(4,28,32,.50) 0%,rgba(4,28,32,.26) 38%,rgba(6,42,46,.74) 74%,rgba(6,42,46,1) 92%)} /* cyan-tint the shared hero type (hero.css defaults these to amber) */ .t-hosp .hero-eyebrow{color:#bdeef2} .t-hosp .hero-eyebrow::before{background:var(--hx2)} .t-hosp .hero-title em{color:#7fe3ec} .t-hosp .hero-sub{color:rgba(233,248,249,.9)} .t-hosp .scroll-cue .mouse::after{background:var(--hx2)} /* ========================================================================= INTRO — asymmetric split: statement + image w/ floating trust badge ========================================================================= */ .hosp-intro{padding:104px 0} .intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center} .intro-copy h2{font-size:clamp(28px,3.8vw,46px);color:var(--ink);margin:14px 0 20px;line-height:1.1} .intro-copy p{color:var(--ink-soft);font-size:16.5px;max-width:46ch;margin-bottom:14px} .intro-stats{display:flex;gap:38px;margin-top:34px;flex-wrap:wrap} .intro-stats .is .n{font-family:'Onest',system-ui,sans-serif;font-weight:700;font-size:clamp(30px,4vw,44px);color:var(--hx);line-height:1;display:inline-flex;align-items:flex-start} .intro-stats .is .n .sup{color:var(--hx2);font-size:.5em;margin-left:.06em;margin-top:.2em} .intro-stats .is .l{display:block;margin-top:8px;font-size:13px;color:var(--ink-soft);font-weight:600;letter-spacing:.3px} .intro-media{position:relative} .intro-media .frame{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 30px 70px rgba(10,86,94,.22);aspect-ratio:4/5} .intro-media .frame img{width:100%;height:100%;object-fit:cover} .intro-media .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,transparent 55%,rgba(10,86,94,.4))} .intro-badge{position:absolute;left:-26px;bottom:34px;background:#fff;border-radius:18px;padding:18px 22px;box-shadow:0 22px 44px rgba(10,86,94,.2);display:flex;align-items:center;gap:16px;border:1px solid var(--hline)} .intro-badge .ib-rule{width:3px;align-self:stretch;border-radius:2px;background:linear-gradient(180deg,var(--hx2),var(--hx));flex:none} .intro-badge b{display:block;font-family:'Onest',system-ui,sans-serif;font-weight:600;font-size:15px;color:var(--ink);letter-spacing:-.01em} .intro-badge span{font-size:12.5px;color:var(--ink-soft)} /* ========================================================================= HOSPITAL HOVER CARDS — the key feature. At rest: image + name + primary specialty. On hover: cyan overlay slides up revealing location, specialty tags, description and a "Дэлгэрэнгүй" link. ========================================================================= */ .hosp-grid-sec{padding:30px 0 104px} .hg-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:42px} .hg-head p{color:var(--ink-soft);max-width:42ch;font-size:15.5px;margin-top:10px} .hosp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .hcard{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:3/4;background:#06343a; box-shadow:0 12px 30px rgba(10,86,94,.12);transform:translateZ(0); transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease} .hcard:hover{box-shadow:0 30px 60px rgba(10,86,94,.32)} .hcard__img{position:absolute;inset:0} .hcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)} .hcard:hover .hcard__img img{transform:scale(1.08)} /* permanent legibility scrim at rest */ .hcard__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,42,46,.05) 0%,rgba(6,42,46,.12) 45%,rgba(6,42,46,.86) 100%);transition:opacity .5s ease} .hcard:hover .hcard__scrim{opacity:0} /* rest-state label (name + primary specialty) */ .hcard__rest{position:absolute;left:0;right:0;bottom:0;padding:22px 20px;z-index:2;transition:opacity .35s ease,transform .45s ease} .hcard:hover .hcard__rest{opacity:0;transform:translateY(10px)} .hcard__rest .tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#0a565e;background:rgba(159,240,248,.92);padding:5px 11px;border-radius:30px;margin-bottom:11px} .hcard__rest h3{color:#fff;font-size:19px;line-height:1.2;font-weight:600} .hcard__rest .city{display:block;color:rgba(233,248,249,.82);font-size:12.5px;margin-top:8px;letter-spacing:.4px;font-weight:500} /* hover overlay — cyan glass panel slides up */ .hcard__over{position:absolute;inset:0;z-index:3;padding:26px 22px;display:flex;flex-direction:column; background:linear-gradient(165deg,rgba(14,124,134,.96),rgba(10,86,94,.97)); color:#fff;opacity:0;transform:translateY(14%); transition:opacity .45s ease,transform .55s cubic-bezier(.2,.7,.2,1)} .hcard:hover .hcard__over,.hcard:focus-within .hcard__over{opacity:1;transform:translateY(0)} .hcard__over .o-city{display:block;font-size:11px;color:#c8f3f7;font-weight:600;letter-spacing:1.8px;text-transform:uppercase} .hcard__over h3{font-size:21px;line-height:1.18;margin:10px 0 13px;color:#fff;font-weight:600} .hcard__over .o-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px} .hcard__over .o-tags span{font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:30px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28)} .hcard__over .o-desc{font-size:13.6px;line-height:1.6;color:rgba(255,255,255,.92);flex:1} .hcard__over .o-link{display:inline-flex;align-items:center;gap:9px;margin-top:16px;font-weight:700;font-size:14px;color:#fff;align-self:flex-start;padding-bottom:3px;border-bottom:1.5px solid rgba(255,255,255,.45);transition:border-color .3s ease} .hcard__over .o-link .arr{font-size:17px;line-height:1;transition:transform .3s ease} .hcard__over .o-link:hover{border-color:#fff} .hcard__over .o-link:hover .arr{transform:translateX(5px)} /* ========================================================================= TREATMENT AREAS — numbered typographic cards (no icons) ========================================================================= */ .treat{padding:104px 0;background:var(--paper-2)} .treat .sec-head{margin-bottom:48px} .treat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .tcard{background:#fff;border:1px solid var(--hline);border-radius:16px;padding:30px 26px 28px;position:relative;overflow:hidden; transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,border-color .4s ease} .tcard::before{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:var(--hx2);transform:scaleY(0);transform-origin:bottom;transition:transform .45s ease} .tcard:hover{box-shadow:0 22px 44px rgba(10,86,94,.14);border-color:transparent} .tcard:hover::before{transform:scaleY(1)} /* the index number replaces the old icon — Unbounded, hairline, accent on hover */ .tcard .t-no{display:block;font-family:'Onest',system-ui,sans-serif;font-weight:600;font-size:15px;letter-spacing:.06em;color:var(--hx2);margin-bottom:14px} .tcard .t-no::after{content:"";display:block;width:26px;height:2px;background:var(--hline);margin-top:13px;border-radius:2px;transition:width .4s ease,background .4s ease} .tcard:hover .t-no::after{width:44px;background:var(--hx2)} .tcard h3{font-size:18px;font-weight:600;color:var(--ink);margin-bottom:9px;letter-spacing:-.01em} .tcard p{font-size:14px;color:var(--ink-soft);line-height:1.62} /* ========================================================================= PROCESS — vertical numbered rail with connecting line, alternating sides ========================================================================= */ .proc{padding:104px 0} .proc .sec-head{text-align:center} .proc .sec-head .eyebrow{justify-content:center} .proc-rail{position:relative;max-width:880px;margin:0 auto;padding:8px 0} .proc-rail::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%); background:var(--hline)} /* GSAP-scaled progress fill drawn over the static track */ .proc-prog{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%) scaleY(0);transform-origin:top center; background:linear-gradient(180deg,var(--hx2),var(--hx));z-index:1} .pstep{position:relative;display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;margin-bottom:30px} .pstep:last-child{margin-bottom:0} .pstep .node{grid-column:2;justify-self:center;width:56px;height:56px;border-radius:50%;background:#fff;border:2px solid var(--hx2); display:flex;align-items:center;justify-content:center;font-family:'Onest',system-ui,sans-serif;font-weight:600;color:var(--hx);font-size:18px;z-index:2; box-shadow:0 0 0 6px var(--paper)} .pstep .pbody{background:#fff;border:1px solid var(--hline);border-radius:16px;padding:22px 24px;box-shadow:0 14px 30px rgba(10,86,94,.08);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease} .pstep .pbody:hover{box-shadow:0 22px 44px rgba(10,86,94,.16)} .pstep .pbody h3{font-size:17px;font-weight:600;color:var(--ink);margin-bottom:7px;letter-spacing:-.01em} .pstep .pbody p{font-size:14px;color:var(--ink-soft);line-height:1.6} /* odd steps: body left, even: body right */ .pstep:nth-child(odd) .pbody{grid-column:1;text-align:right} .pstep:nth-child(odd) .pbody h3{justify-content:flex-end} .pstep:nth-child(even) .pbody{grid-column:3} .pstep:nth-child(even) .spacer{grid-column:1} .pstep:nth-child(odd) .spacer{grid-column:3} /* ========================================================================= CTA + CONTACT — recolor shared components to cyan for this page ========================================================================= */ .t-hosp .cta{background:var(--paper-2)} .t-hosp .cta-box{background:linear-gradient(125deg,var(--hx-deep) 0%,var(--hx) 60%,var(--hx2) 100%)} .t-hosp .cta-box::before{background:radial-gradient(circle at 82% 18%,rgba(127,227,236,.32),transparent 52%)} .t-hosp .cta-box h2 em{color:#bdf1f6} .t-hosp .cta-box .btn-light{background:#fff;color:var(--hx-deep)} .t-hosp .cta-box .btn-light:hover{box-shadow:0 14px 30px rgba(0,0,0,.25)} .t-hosp .contact{background:var(--paper)} .t-hosp .field input,.t-hosp .field select,.t-hosp .field textarea{background:#fff;border-color:var(--hline);color:var(--ink)} .t-hosp .field input:focus,.t-hosp .field select:focus,.t-hosp .field textarea:focus{border-color:var(--hx2);box-shadow:0 0 0 3px rgba(var(--hx-rgb),.16)} .t-hosp .contact-side{background:#fff;border-color:var(--hline)} .t-hosp .contact-info .ci{border-left-color:var(--hx2)} .t-hosp .form-ok{background:var(--paper-2)} .t-hosp .form-ok .ok{background:var(--hx)} .t-hosp .btn-hx{background:var(--hx);color:#fff} .t-hosp .btn-hx:hover{background:var(--hx-deep);box-shadow:0 12px 26px rgba(var(--hx-rgb),.34)} /* ========================================================================= RESPONSIVE ========================================================================= */ @media(max-width:1080px){ .hosp-grid{grid-template-columns:repeat(2,1fr)} .treat-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:920px){ .intro-grid{grid-template-columns:1fr;gap:40px} .intro-media{order:-1} .intro-media .frame{aspect-ratio:16/11} /* process collapses to a single left rail */ .proc-rail::before,.proc-prog{left:27px} .pstep{grid-template-columns:54px 1fr;gap:8px} .pstep .node{grid-column:1;justify-self:center} .pstep .spacer{display:none} .pstep:nth-child(odd) .pbody,.pstep:nth-child(even) .pbody{grid-column:2;text-align:left} .pstep:nth-child(odd) .pbody h3{justify-content:flex-start} } @media(max-width:680px){ .hosp-intro,.treat,.proc{padding:72px 0} .hosp-grid-sec{padding:20px 0 72px} .hosp-grid{grid-template-columns:1fr;gap:18px} .treat-grid{grid-template-columns:1fr} .intro-badge{left:14px;right:14px;bottom:14px} /* on touch: reveal overlay since hover is unavailable */ .hcard{aspect-ratio:auto;display:flex;flex-direction:column} .hcard__img{position:relative;height:210px} .hcard__scrim,.hcard__rest{display:none} .hcard__over{position:relative;opacity:1;transform:none;background:#fff;color:var(--ink)} .hcard__over .o-city{color:var(--hx)} .hcard__over h3{color:var(--ink)} .hcard__over .o-tags span{background:var(--hx-soft);border-color:var(--hline);color:var(--hx-deep)} .hcard__over .o-desc{color:var(--ink-soft)} .hcard__over .o-link{color:var(--hx);border-color:rgba(var(--hx-rgb),.4)} }