/* ============================================================================ КАРКАС САЙТА МЕДКЛИНИКИ — дизайн-система (анти-ИИ, §1 плейбука). Golos Text self-host; палитра 2-3 цвета (тёплый off-white + графит + 1 акцент); одна spacing-шкала; один radius-словарь; тонкие тонированные тени (<0.05); анимация только transform/opacity; кастомные easing; БЕЗ indigo-градиента. Палитра/шрифты переопределяются из data/site.yml (брендовые --brand* инлайном в ). ========================================================================== */ @import url('fonts.css'); :root{ /* — палитра: тёплый off-white база + графит-нейтраль + 1 узкий акцент (teal, стомат-вертикаль) — */ --paper:#FAF8F3; /* база: тёплый off-white, НЕ чистый #fff */ --surface:#F1ECE2; /* чередующийся фон секций (.alt), тёплый */ --surface-2:#E8F0EC; /* мягкий sage tint под акцентные блоки */ --ink:#1B2320; /* текст: тёплый графит со сдвигом в бренд-hue, НЕ #000 */ --muted:#586460; /* вторичный текст (контраст ≥4.5:1 на paper) */ --soft:#7E8884; /* третичный/подписи */ --line:#E4DCCE; /* hairline-границы (глубина через border, не тень) */ --line-2:#D6CDBC; --brand:#13716A; /* акцент: глубокий teal */ --brand-d:#0D564F; /* hover/нажатие */ --brand-soft:#E3EFEC; /* tinted поверхность под чипы/иконки */ --ok:#1C7A4B; --err:#B0442C; /* красный/coral ТОЛЬКО ошибка/alert, не декор */ --warn-bg:#FBF3E6; /* — типографика: одна семья Golos Text, display = тяжёлые веса — */ --display:'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif; --body:'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif; /* — spacing: одна шкала, ритм кратен 24px (line-height body 16×1.5) — */ --gap:24px; --wrap:1180px; --wrap-narrow:780px; --sec-y:clamp(56px, 7vw, 112px); /* macro-whitespace между секциями */ /* — радиусы: один словарь — */ --r-s:10px; --r:16px; --r-l:26px; --r-btn:12px; /* — тени: тонкие, диффузные, тонированные в hue бренда, opacity<0.05 — */ --sh-1:0 1px 2px rgba(13,86,79,.04), 0 2px 10px rgba(13,86,79,.04); --sh-2:0 6px 28px rgba(13,86,79,.05); --sh-pop:0 12px 40px rgba(13,86,79,.10); /* — кастомные easing (§1.7) — */ --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1); --ease-drawer:cubic-bezier(.32,.72,0,1); } /* ===== reset / база ===== */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden} /* дефолтный размер inline-иконок (svg.ic без явной ширины не должен растягиваться) */ .ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.16em} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--body);font-size:17px;line-height:1.6; font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; /* лёгкое зерно (§1.7): inline SVG feTurbulence, opacity ~6% — снимает «цифровую стерильность» */ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); } img,video{max-width:100%;height:auto;display:block} a{color:var(--brand);text-decoration:none} a:hover{color:var(--brand-d)} h1,h2,h3,h4{font-family:var(--display);color:var(--ink);margin:0 0 .5em;line-height:1.12;letter-spacing:-.02em;text-wrap:balance} h1{font-size:clamp(2rem,5.2vw,4.4rem);font-weight:700;letter-spacing:-.035em;overflow-wrap:break-word;hyphens:auto} h2{font-size:clamp(1.9rem,3.2vw,2.9rem);font-weight:700} h3{font-size:1.32rem;font-weight:600;letter-spacing:-.01em} h4{font-size:1.08rem;font-weight:600} p{margin:0 0 1rem;max-width:68ch} :focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px} /* ===== layout-примитивы ===== */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} .wrap-narrow{max-width:var(--wrap-narrow);margin:0 auto;padding:0 24px} .sec{padding:var(--sec-y) 0} .sec.alt{background:var(--surface)} .sec.tight{padding:calc(var(--sec-y) * .55) 0} .sec.brand{background:var(--brand);color:#fff} .sec.brand h2,.sec.brand h3{color:#fff} .center{text-align:center} .lead{font-size:1.18rem;color:var(--muted);max-width:60ch} /* eyebrow — максимум ceil(секций/3), НЕ над каждой секцией (анти-ИИ §5 п.14) */ .eyebrow{display:inline-block;font-size:.82rem;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--brand);margin-bottom:.6em} .sec-head{max-width:62ch} .sec-head.center{margin:0 auto 36px} .sec-head p{color:var(--muted)} /* ===== кнопки ===== */ .btn{display:inline-flex;align-items:center;gap:.5em;justify-content:center; min-height:48px;padding:0 22px;border-radius:var(--r-btn);font-family:var(--display); font-size:1rem;font-weight:600;border:1px solid transparent;cursor:pointer; transition:transform .14s var(--ease-out), background-color .18s, box-shadow .18s; text-align:center;line-height:1.1} .btn:active{transform:translateY(1px)} .btn-primary{background:var(--brand);color:#fff} .btn-primary:hover{background:var(--brand-d);color:#fff;box-shadow:var(--sh-2)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)} .btn-ghost:hover{border-color:var(--brand);color:var(--brand)} .btn-tel{background:var(--ink);color:#fff} .btn-tel:hover{background:#0d1310;color:#fff} .btn-block{display:flex;width:100%} .btn-lg{min-height:56px;padding:0 30px;font-size:1.06rem} /* ===== sticky-хедер (§3) ===== */ .nav{position:sticky;top:0;z-index:60;background:rgba(250,248,243,.86); backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line); transition:transform .35s var(--ease-out)} .nav.hide{transform:translateY(-100%)} /* hide-on-scroll-down */ .nav-in{display:flex;align-items:center;gap:18px;height:64px;max-width:var(--wrap);margin:0 auto;padding:0 24px} .nav-logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700; font-size:1.18rem;color:var(--ink);letter-spacing:-.02em} .nav-logo img{height:34px;width:auto} .nav-menu{display:flex;gap:22px;margin-left:auto;align-items:center} .nav-menu a{color:var(--ink);font-size:.96rem;font-weight:500} .nav-menu a:hover{color:var(--brand)} .nav-tel{font-family:var(--display);font-weight:700;color:var(--ink);white-space:nowrap} .nav-cta{margin-left:4px} .nav-burger{display:none;margin-left:auto;width:46px;height:46px;border:1px solid var(--line-2); border-radius:var(--r-s);background:transparent;cursor:pointer;align-items:center;justify-content:center} .nav-burger span,.nav-burger span::before,.nav-burger span::after{content:'';display:block;width:20px;height:2px;background:var(--ink);position:relative;transition:.2s var(--ease-out)} .nav-burger span::before{position:absolute;top:-6px}.nav-burger span::after{position:absolute;top:6px} /* ===== HERO (§2.2) — ≤4 текст-элемента, реальное фото, 1 первичный CTA ===== */ .hero{position:relative;overflow:hidden;background:var(--ink);color:#fff} .hero::after{content:'';position:absolute;inset:0; background:radial-gradient(120% 90% at 78% 18%, rgba(19,113,106,.34), transparent 60%);pointer-events:none} .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:48px; align-items:center;padding:clamp(48px,7vw,92px) 0 clamp(56px,8vw,96px)} .hero-photo{position:absolute;inset:0;z-index:0;opacity:.34;object-fit:cover;width:100%;height:100%} .hero h1{color:#fff;margin-bottom:.35em} .hero-eyebrow{color:#9fe2da;font-weight:600;letter-spacing:.04em;margin-bottom:14px;font-size:.92rem} .hero-sub{color:#d7ddd9;font-size:1.18rem;max-width:46ch;margin-bottom:28px} .hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .hero-mini{margin-top:22px;display:flex;gap:26px;flex-wrap:wrap;color:#aeb8b3;font-size:.9rem} .hero-mini b{color:#fff;font-weight:600;display:block;font-size:1.15rem;font-family:var(--display)} /* ===== дисклеймер + лицензия (сквозной YMYL-блок) ===== */ .disclaimer{background:var(--warn-bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .disclaimer .wrap{display:flex;gap:16px;flex-wrap:wrap;align-items:center; padding-top:12px;padding-bottom:12px;font-size:.86rem;color:var(--muted)} .disclaimer .lic{font-weight:600;color:var(--ink)} .disclaimer .age{background:var(--ink);color:#fff;border-radius:6px;padding:1px 7px;font-weight:600;font-size:.8rem} /* ===== trust-strip (§2.2 секция 3) ===== */ .trust{display:flex;flex-wrap:wrap;gap:14px} .trust-item{flex:1 1 200px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r); padding:22px 24px;box-shadow:var(--sh-1)} .trust-item b{font-family:var(--display);font-size:1.8rem;font-weight:700;color:var(--brand);display:block;line-height:1} .trust-item span{color:var(--muted);font-size:.95rem;display:block;margin-top:6px} /* ===== УСЛУГИ — bento (НЕ три одинаковые карточки, §5 п.4) ===== */ .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px} .svc-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r); padding:26px;display:flex;flex-direction:column;gap:8px;transition:border-color .2s, transform .2s var(--ease-out);grid-column:span 2} .svc-card:hover{border-color:var(--brand);transform:translateY(-2px)} .svc-card.wide{grid-column:span 3} .svc-card.tall{grid-column:span 2;grid-row:span 2} .svc-card .ico{width:40px;height:40px;border-radius:var(--r-s);background:var(--brand-soft); color:var(--brand);display:flex;align-items:center;justify-content:center;margin-bottom:6px} .svc-card .ico svg{width:22px;height:22px} .svc-card h3{margin:0} .svc-card p{color:var(--muted);font-size:.97rem;margin:0} .svc-card .price{margin-top:auto;padding-top:10px;font-weight:600;color:var(--ink)} .svc-card .more{font-weight:600;color:var(--brand);font-size:.95rem;margin-top:6px} /* ===== ВРАЧИ ===== */ .docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,340px));gap:20px;justify-content:center} .doc-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden; box-shadow:var(--sh-1);transition:transform .2s var(--ease-out)} .doc-card:hover{transform:translateY(-3px)} .doc-card img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--surface)} .doc-card .body{padding:18px 20px} .doc-card .name{font-family:var(--display);font-weight:700;font-size:1.12rem} .doc-card .role{color:var(--brand);font-size:.92rem;font-weight:500;margin:2px 0 8px} .doc-card .cred{color:var(--muted);font-size:.9rem} .doc-card .doc-cta{margin-top:14px} /* ===== ДО/ПОСЛЕ слайдер (стоматология/эстетика, §2.5) ===== */ .ba{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);user-select:none;aspect-ratio:3/2;max-width:720px} .ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .ba .after{clip-path:inset(0 0 0 50%)} .ba .handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;cursor:ew-resize;box-shadow:0 0 0 1px rgba(0,0,0,.1)} .ba .handle::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:var(--sh-2)} .ba .tag{position:absolute;bottom:10px;padding:3px 10px;border-radius:6px;background:rgba(27,35,32,.7);color:#fff;font-size:.78rem;font-weight:600} .ba .tag.l{left:10px}.ba .tag.r{right:10px} /* ===== ПРОЦЕСС «как проходит» (зигзаг, ломаем метроном §2.2) ===== */ .flow{display:grid;gap:14px;counter-reset:step} .flow-step{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start; background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px} .flow-step .n{counter-increment:step;font-family:var(--display);font-size:2rem;font-weight:700; color:var(--brand);line-height:1;min-width:54px} .flow-step .n::before{content:counter(step,decimal-leading-zero)} .flow-step h4{margin:0 0 4px}.flow-step p{margin:0;color:var(--muted)} /* ===== ОТЗЫВЫ ===== */ .reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px} .review{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--sh-1)} .review .stars{color:#E0A92E;letter-spacing:2px;margin-bottom:8px} .review p{font-size:1rem;margin:0 0 14px} .review .who{display:flex;align-items:center;gap:10px} .review .who img{width:40px;height:40px;border-radius:50%;object-fit:cover} .review .who b{font-size:.95rem}.review .who span{color:var(--soft);font-size:.82rem;display:block} /* ===== ЦЕНЫ ===== */ .price-note{color:var(--muted);font-size:.95rem;margin-bottom:18px} .ptable{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .ptable th,.ptable td{text-align:left;padding:15px 20px;border-bottom:1px solid var(--line)} .ptable th{background:var(--surface);font-family:var(--display);font-weight:600;font-size:.92rem} .ptable tr:last-child td{border-bottom:none} .ptable .p{font-weight:700;color:var(--brand);white-space:nowrap} .calc{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-top:18px} .calc-row{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0} .calc-opt{border:1px solid var(--line-2);background:var(--paper);border-radius:var(--r-s);padding:10px 16px;cursor:pointer;font-weight:500;transition:.15s} .calc-opt.sel{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-d)} .calc-out{font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--ink)} /* ===== FAQ (answer-first, §2.2 п.10) ===== */ .faq{display:grid;gap:10px} .faq-item{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);overflow:hidden} .faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px; padding:18px 22px;background:none;border:none;cursor:pointer;font-family:var(--display); font-weight:600;font-size:1.05rem;color:var(--ink);text-align:left} .faq-q .arr{transition:transform .2s var(--ease-out);color:var(--brand);flex:none} .faq-item.on .faq-q .arr{transform:rotate(180deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .28s var(--ease-io)} .faq-item.on .faq-a{max-height:480px} .faq-a p{padding:0 22px 20px;margin:0;color:var(--muted)} /* ===== ФОРМА (§3) — 4 поля, чекбокс согласия, honeypot ===== */ .cta-band{background:var(--brand);color:#fff} .cta-grid{display:grid;grid-template-columns:1fr 440px;gap:40px;align-items:center} .cta-grid h2{color:#fff}.cta-grid .lead{color:#d6e9e5} .lead-form{background:var(--paper);border-radius:var(--r-l);padding:28px;box-shadow:var(--sh-pop);color:var(--ink)} .lead-form h3{margin:0 0 4px} .field{margin-bottom:14px} .field label{display:block;font-size:.88rem;font-weight:600;margin-bottom:6px;color:var(--ink)} .field input,.field select{width:100%;min-height:48px;padding:0 14px;border:1px solid var(--line-2); border-radius:var(--r-s);background:#fff;font-family:var(--body);font-size:1rem;color:var(--ink)} .field input:focus,.field select:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-soft)} .field .err-msg{display:none;color:var(--err);font-size:.82rem;margin-top:5px} .field.invalid input{border-color:var(--err)} .field.invalid .err-msg{display:block} .consent{display:flex;gap:10px;align-items:flex-start;font-size:.84rem;color:var(--muted);margin:6px 0 16px} .consent input{margin-top:3px;width:18px;height:18px;min-width:18px;accent-color:var(--brand)} .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} .form-sent{display:none;text-align:center;padding:18px 0} .form-sent.on{display:block} .form-sent .ico{width:54px;height:54px;border-radius:50%;background:var(--brand-soft);color:var(--brand); display:flex;align-items:center;justify-content:center;margin:0 auto 12px} .form-note{font-size:.8rem;color:var(--soft);margin-top:10px;text-align:center} /* ===== ФУТЕР ===== */ .footer{background:var(--ink);color:#c4ccc8;font-size:.92rem} .footer a{color:#c4ccc8}.footer a:hover{color:#fff} .footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:32px;padding:54px 0 36px} .footer h4{color:#fff;font-size:1rem;margin-bottom:14px} .footer-brand b{font-family:var(--display);color:#fff;font-size:1.2rem;display:block;margin-bottom:8px} .footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} .footer-lic{display:flex;gap:14px;align-items:flex-start;margin-top:14px} .footer-lic img{width:78px;height:78px;background:#fff;border-radius:8px;padding:5px;flex:none} .footer-lic small{font-size:.8rem;color:#97a09c;line-height:1.45} .footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;display:flex;gap:16px; flex-wrap:wrap;justify-content:space-between;font-size:.82rem;color:#8c9591} .footer-bottom .legal-links{display:flex;gap:14px;flex-wrap:wrap} .footer-disc{font-size:.82rem;color:#8c9591;padding-bottom:20px;max-width:none} /* ===== cookie-баннер (§8) — fixed, без CLS ===== */ .cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:560px;margin:0 auto; background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--sh-pop); padding:18px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap; transform:translateY(140%);transition:transform .4s var(--ease-drawer)} .cookie.show{transform:translateY(0)} .cookie p{margin:0;font-size:.86rem;color:var(--muted);flex:1 1 280px} .cookie .btn{min-height:42px;padding:0 18px} /* ===== FAB (десктоп) + мобильная нижняя панель (§3) — разные брейкпоинты ===== */ .fab{position:fixed;right:22px;bottom:22px;z-index:80;display:flex;flex-direction:column;gap:10px;align-items:flex-end} .fab a{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 18px;border-radius:var(--r-btn); font-weight:600;font-size:.95rem;box-shadow:var(--sh-2);transition:transform .15s var(--ease-out)} .fab a:hover{transform:translateY(-2px)} .fab .fab-call{background:var(--ink);color:#fff} .fab .fab-msg{background:var(--brand);color:#fff} .fab a svg{width:20px;height:20px;flex:none} .mobilebar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none; grid-template-columns:repeat(3,1fr);background:var(--paper);border-top:1px solid var(--line-2); box-shadow:0 -4px 20px rgba(13,86,79,.08)} .mobilebar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; min-height:60px;font-size:.74rem;font-weight:600;color:var(--ink);border-right:1px solid var(--line)} .mobilebar a:last-child{border-right:none} .mobilebar a.main{background:var(--brand);color:#fff} .mobilebar a svg{width:21px;height:21px} /* ===== exit-intent (десктоп) ===== */ .exit{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:24px; background:rgba(27,35,32,.55)} .exit.show{display:flex} .exit-card{background:var(--paper);border-radius:var(--r-l);max-width:460px;width:100%;padding:32px; box-shadow:var(--sh-pop);position:relative;transform:scale(.95);opacity:0;transition:.25s var(--ease-out)} .exit.show .exit-card{transform:scale(1);opacity:1} .exit-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border:none;background:var(--surface); border-radius:50%;cursor:pointer;font-size:1.1rem;color:var(--muted)} /* ===== утилиты reveal (IntersectionObserver, поверх видимого) ===== Гейт html.js: opacity:0 применяется ТОЛЬКО когда JS активен (класс ставится инлайн в ). Без JS контент виден всегда — никакого «белого экрана» при отключённом JS. */ html.js .reveal{opacity:0;transform:translateY(16px)} html.js .reveal.in{opacity:1;transform:none;transition:opacity .6s var(--ease-out), transform .6s var(--ease-out)} @media (prefers-reduced-motion:reduce){ html.js .reveal,html.js .reveal.in{opacity:1;transform:none;transition:none} .btn,.svc-card,.doc-card,.cookie,.exit-card,.nav{transition:none} } /* ===== .doc — читаемая типографика юр-страниц / контента ===== */ .doc{color:var(--ink)} .doc h2{font-size:1.6rem;margin:1.4em 0 .5em} .doc h2:first-child{margin-top:0} .doc h3{font-size:1.18rem;margin:1.3em 0 .4em} .doc p,.doc li{color:var(--muted);font-size:1.02rem} .doc ul,.doc ol{padding-left:1.3em;margin:0 0 1rem;display:grid;gap:6px} .doc a{text-decoration:underline} .doc table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.95rem} .doc th,.doc td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top} .doc th{background:var(--surface);font-family:var(--display);font-weight:600} .doc .note{background:var(--warn-bg);border:1px solid var(--line);border-radius:var(--r-s);padding:14px 16px;margin:1rem 0;font-size:.92rem} .doc .upd{font-size:.85rem;color:var(--soft);margin-bottom:1.2em} .doc hr{border:none;border-top:1px solid var(--line);margin:1.6em 0} /* breadcrumbs */ .crumbs{font-size:.82rem;color:var(--soft);padding:14px 0 0} .crumbs a{color:var(--soft)}.crumbs a:hover{color:var(--brand)} /* ===== АДАПТИВ ===== */ @media (max-width:900px){ .hero-grid{grid-template-columns:1fr !important;gap:24px} /* инлайновые 2-колоночные сетки (о клинике, до/после, цены, контакты, карточка врача) — в одну колонку */ .mcol{grid-template-columns:1fr !important;gap:28px !important} .mcol>*{min-width:0} .cta-grid{grid-template-columns:1fr;gap:24px} .footer-top{grid-template-columns:1fr 1fr;gap:24px} .bento{grid-template-columns:repeat(2,1fr)} .svc-card,.svc-card.wide,.svc-card.tall{grid-column:span 1;grid-row:auto} .nav-menu{display:none} .nav-burger{display:inline-flex} .nav.open .nav-menu{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column; background:var(--paper);border-bottom:1px solid var(--line);padding:14px 24px;gap:14px} .nav.open .nav-menu a{padding:6px 0} } @media (max-width:680px){ body{font-size:16px} .nav-tel,.nav-cta{display:none} /* на мобиле звонок/запись — в нижней панели, шапку не теснят */ .fab{display:none} /* на мобиле — нижняя панель вместо FAB (§3: одно решение) */ .mobilebar{display:grid} main{padding-bottom:60px} /* место под нижнюю панель */ .footer-top{grid-template-columns:1fr} .bento{grid-template-columns:1fr} .cookie{left:8px;right:8px;bottom:68px} }