89 lines
4.1 KiB
CSS
89 lines
4.1 KiB
CSS
/* utilities + responsive — ported responsive behavior of original */
|
|
.container-narrow{width:90%;margin-inline:auto}
|
|
@media (max-width:1100px){
|
|
.nav{gap:14px}
|
|
.hero-text h1{font-size:32px}
|
|
.brand-cta h2{font-size:34px}
|
|
.track .tcard{flex-basis:48%}
|
|
}
|
|
@media (max-width:900px){
|
|
.hamburger{display:inline-flex}
|
|
.nav{position:fixed;top:0;left:106%;height:100vh;width:39%;min-width:230px;background:#fff;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:14px;gap:26px;z-index:90;border-radius:16px 0 0 16px;transition:left .5s;box-shadow:-10px 0 40px rgba(0,0,0,.2)}
|
|
body.menu-open .nav{left:61%}
|
|
body.menu-open .drawer-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:80}
|
|
.btn-main{min-width:48px;width:48px;height:48px;border-radius:50%;padding:0}
|
|
.btn-main .lbl{display:none}
|
|
.hero{background:#9EB185 url('../assets/images/firsSecBg.png') no-repeat center/cover;border-radius:20px;min-height:0;padding:22px 16px 16px;gap:14px;align-items:flex-start}
|
|
.hero-star{display:none}
|
|
.hero-hand-mobile{display:block;align-self:flex-end;width:38%;max-width:180px}
|
|
.hero-text{width:60%}
|
|
.hero-text h1{font-size:22px;line-height:1.35}
|
|
.hero-text .kicker{font-size:12px;padding:6px 10px}
|
|
.hero-stats{flex-direction:row;width:100%;max-width:none;min-width:0;order:3;gap:8px}
|
|
.hero-stats .stat{flex:1}
|
|
.stat>div{padding:10px 4px}
|
|
.stat b{font-size:18px}
|
|
.stat span{font-size:10px}
|
|
.hero{flex-wrap:wrap}
|
|
.hero-under{flex-wrap:wrap;gap:12px;margin-top:12px}
|
|
.mini-cards{width:100%;flex-direction:row}
|
|
.mini-card h3{font-size:11px}
|
|
.hand{display:none}
|
|
.doctors-card{width:100%}
|
|
.steps{width:100%;gap:14px}
|
|
.steps::before{top:44px;right:12%;left:12%}
|
|
.step .ball{width:84px;height:84px}
|
|
.step h3{font-size:13px;max-width:140px}
|
|
.step p{font-size:11px}
|
|
.steps-bg{padding:24px 14px 28px}
|
|
.search-box,.domains{width:92%;max-width:none}
|
|
.sample-card{width:30%}
|
|
.fac-grid{grid-template-columns:repeat(3,1fr);gap:10px}
|
|
.fac{width:auto;margin-top:0;min-height:120px;padding:14px 8px}
|
|
.fac p{max-width:120px;font-size:12px}
|
|
.facilities{padding:24px 14px 20px;min-height:0;border-radius:20px}
|
|
.fac-head p{font-size:12px}
|
|
.brand-cta{height:170px;border-radius:12px}
|
|
.brand-cta h2{font-size:22px}
|
|
.brand-cta p{font-size:12px}
|
|
.packages{grid-template-columns:1fr;gap:18px}
|
|
.svc{width:100%;max-width:none;position:static}
|
|
.svc-panel{min-height:0}
|
|
.plan{width:100%;max-width:360px;margin-inline:auto}
|
|
.contact-sec,.contact-sec.has-bg{flex-direction:column;background:#9eb18538}
|
|
.contact-text,.form-card{width:100%;max-width:560px}
|
|
.track .tcard{flex-basis:88%}
|
|
.page-hero{flex-direction:column;gap:24px}
|
|
.page-hero .txt,.about-frame,.contact-page .side,.dark-form{width:100%;max-width:none}
|
|
.about-frame{min-height:0;padding-bottom:0}
|
|
.about-frame .main{position:static;width:100%;max-width:420px;margin:0 auto;right:auto;top:auto}
|
|
.contact-page{flex-direction:column;gap:20px;align-items:stretch}
|
|
.foot-panel .lead{width:100%}
|
|
}
|
|
@media (max-width:480px){
|
|
.hero{padding:18px 14px 12px;border-radius:16px}
|
|
.hero-text{width:58%}
|
|
.hero-text h1{font-size:19px}
|
|
.hero-text .kicker{font-size:11px;padding:5px 9px}
|
|
.btn-store{padding:10px 12px;font-size:13px;border-radius:12px}
|
|
.hero-hand-mobile{width:40%}
|
|
.hero-stats{gap:8px}
|
|
.stat>div{padding:10px 4px}
|
|
.stat b{font-size:18px}
|
|
.steps{grid-template-columns:1fr;gap:18px;max-width:320px}
|
|
.steps::before{display:none}
|
|
.step{flex-direction:row;justify-content:flex-start;text-align:right;gap:14px;background:#fff;border-radius:16px;padding:12px;box-shadow:0 10px 24px rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.04)}
|
|
.step .ball{width:72px;height:72px}
|
|
.step h3{font-size:14px}
|
|
.search-box{min-height:56px;padding:4px}
|
|
.search-go{width:46px;height:46px}
|
|
.domain{min-width:64px;padding:8px 12px;font-size:12px}
|
|
.fac-grid{grid-template-columns:repeat(2,1fr);gap:10px}
|
|
.fac{min-height:110px}
|
|
}
|
|
@media (prefers-reduced-motion:reduce){
|
|
html{scroll-behavior:auto}
|
|
.track{scroll-behavior:auto}
|
|
*{animation:none!important;transition:none!important}
|
|
}
|