/* ============================================================ liczdrav.ru — clone theme (vanilla CSS, реплика темы "luxmed") Источник: clone/DESIGN_SPEC.md. Aqua #2e9dd1 + coral #fc6b4f, Rubik/Roboto/Lora. Fonts подключаются 'ом в (см. base.html.j2). ============================================================ */ :root{ /* Brand */ --brand:#2e9dd1; --brand-dk:#2681ab; --brand-lt:#84caf0; --brand-tint:#ebf4f9; --accent:#fc6b4f; --accent-dk:#d65b42; /* Фон кнопок с белым текстом. Фирменный коралл #fc6b4f даёт 2,86:1 при норме WCAG 4,5:1 — на кнопке «Заказать консультацию» это резало читаемость главного действия. #c94f36 = 4,51:1, тот же тон. */ --accent-btn:#c94f36; --accent-btn-h:#b34329; --brand-btn:#1f6f92; --brand-btn-h:#1a627f; /* Text */ --text:#191919; --body:#353535; --muted:#494949; --soft:#878787; --faint:#9e9e9e; /* Surfaces */ --bg:#ffffff; --bg-alt:#f8fafa; --bg-alt2:#f5f7f7; --dark:#13171a; --dark-2:#1b2024; /* Lines / feedback */ --line:#e5e5e5; --line-2:#ebecec; --success:#599c2a; --success-dk:#437520; /* Footer */ --foot-bg:#15191c; --foot-text:#c3cad0; --foot-head:#ffffff; --foot-line:#2b333a; /* Fonts */ --font:'Rubik',system-ui,-apple-system,'Segoe UI',sans-serif; --head:'Roboto','Rubik',system-ui,sans-serif; --accent-font:'Lora',Georgia,serif; /* Radii / shadow / motion */ --radius:6px; --radius-lg:8px; --radius-pill:50px; --shadow:0 2px 8px rgba(25,25,25,.06); --shadow-h:0 4px 16px rgba(46,157,209,.12); --ease:.25s ease; --wrap:1240px; --head-h:124px; } /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font:400 16px/1.6 var(--font);color:var(--body);background:var(--bg); padding-top:var(--head-h);overflow-x:hidden} img,svg,video{max-width:100%;height:auto;display:block} a{color:var(--brand);text-decoration:none;transition:color var(--ease)} a:hover{color:var(--brand-dk)} ul,ol{margin:0;padding:0;list-style:none} button{font-family:inherit} :focus-visible{outline:2px solid var(--brand-dk);outline-offset:2px} /* ---------- typography ---------- */ h1,h2,h3,h4,h5,h6{margin:0 0 .5em;color:var(--text);font-family:var(--head);line-height:1.2} h1{font:700 clamp(28px,4.4vw,40px)/1.15 var(--head);text-transform:uppercase} h2{font:500 clamp(24px,3.2vw,32px)/1.2 var(--head);text-transform:uppercase} h3{font:700 clamp(20px,2.4vw,28px)/1.25 var(--head)} h4{font:500 clamp(16px,1.6vw,18px)/1.3 var(--head)} h5{font:700 15px/1.4 var(--head)} h6{font:700 13px/1.4 var(--head);text-transform:uppercase;letter-spacing:.5px} p{margin:0 0 1em} small,.small{font-size:13px;line-height:1.5} .lead{font-size:18px;line-height:1.6;color:var(--muted)} blockquote{margin:0;font-family:var(--accent-font);font-size:clamp(16px,2vw,20px);font-style:italic;color:var(--muted)} strong,b{font-weight:600;color:var(--text)} /* ---------- layout ---------- */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} .sec{padding:72px 0} .sec.alt{background:var(--bg-alt)} .sec.alt2{background:var(--bg-alt2)} .sec.dark{background:var(--dark);color:#fff} .sec.dark h1,.sec.dark h2,.sec.dark h3,.sec.dark h4{color:#fff} .sec.dark .sec-title{color:#fff} .sec-head{text-align:center;margin-bottom:36px} .sec-kicker{display:inline-block;font:700 11px/1 var(--head);letter-spacing:1.5px; text-transform:uppercase;color:var(--brand-dk);margin-bottom:10px} .sec.dark .sec-kicker{color:var(--brand-lt)} .sec-title{text-transform:uppercase;margin:0} .sec-rule{width:48px;height:3px;background:var(--brand);margin:14px auto 0;border:0} .sec-sub{max-width:760px;margin:14px auto 0;color:var(--muted)} .sec.dark .sec-sub{color:#c3cad0} .sec-split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center} .sec-split .ph{margin:0} .sec-split .ph img{width:100%;border-radius:8px;object-fit:cover;max-height:440px;box-shadow:var(--shadow)} .sec-split.rev .txt{order:2} @media(max-width:767px){.sec-split{grid-template-columns:1fr;gap:24px}.sec-split.rev .txt{order:0}} .grid{display:grid;gap:24px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; font:500 15px/1.3 var(--font);padding:14px 30px;border-radius:var(--radius); border:0;cursor:pointer;transition:all var(--ease);text-transform:uppercase;letter-spacing:.5px} .btn-primary{background:var(--brand-btn);color:#fff} .btn-primary:hover{background:var(--brand-btn-h);color:#fff} .btn-accent{background:var(--accent-btn);color:#fff} .btn-accent:hover{background:var(--accent-btn-h);color:#fff} .btn-ghost{background:transparent;color:var(--brand);border:1px solid var(--brand)} .btn-ghost:hover{background:var(--brand);color:#fff} .btn-pill{border-radius:var(--radius-pill)} .btn-lg{padding:16px 40px;font-size:16px} /* ============================================================ HEADER (two-row: white top + light menu bar) — реплика luxmed ============================================================ */ .lz-header{position:fixed;top:0;left:0;right:0;z-index:200;background:#fff;box-shadow:var(--shadow)} .lz-head-main{background:#fff} .lz-head-row{display:flex;align-items:center;gap:24px;min-height:72px} .lz-logo{flex:0 0 auto;display:flex;align-items:center} .lz-logo img{height:48px;width:auto} .lz-head-phone{display:flex;flex-direction:column;line-height:1.25;margin-left:8px} .lz-head-phone a{font:600 17px/1.2 var(--head);color:var(--text)} .lz-head-phone a:hover{color:var(--brand)} .lz-head-phone span{font-size:12px;color:var(--soft)} .lz-head-phone .ph-hook{font-size:14px;font-weight:600;color:#1a7a4a} .lz-head-phone .ph-hours{font-size:13px;color:var(--muted)} .lz-head-right{margin-left:auto;display:flex;align-items:center;gap:22px} .lz-head-city{display:flex;flex-direction:column;gap:3px;font-size:13px;text-align:right} .lz-head-city a{color:var(--brand)} .lz-head-city a:hover{color:var(--brand-dk)} .lz-head-social{display:flex;gap:8px} .lz-head-social a{width:32px;height:32px;border-radius:50%;background:var(--text); display:flex;align-items:center;justify-content:center;color:#fff;transition:background var(--ease)} .lz-head-social a:hover{background:var(--brand)} .lz-head-social svg{width:15px;height:15px;fill:currentColor} .lz-head-menu{background:var(--bg-alt);border-top:1px solid var(--line-2)} .lz-menu-row{display:flex;align-items:center;gap:16px;min-height:52px} .lz-menu{display:flex;align-items:center;gap:0;flex-wrap:nowrap} .lz-menu>li{position:relative} .lz-menu>li>a{display:flex;align-items:center;gap:5px;padding:15px 11px;white-space:nowrap; font:500 13.5px/1 var(--font);letter-spacing:.3px;color:var(--text);text-transform:uppercase; border-bottom:3px solid transparent} .lz-menu>li>a:hover,.lz-menu>li.active>a{color:var(--brand);border-bottom-color:var(--brand)} .lz-menu .has>a::after{content:"";width:6px;height:6px;border-right:2px solid currentColor; border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.7} /* dropdowns */ .lz-sub{position:absolute;top:100%;left:0;min-width:280px;background:#fff; box-shadow:var(--shadow-h);border-radius:6px;border-top:3px solid var(--brand); padding:8px 0;opacity:0;visibility:hidden;transform:translateY(8px); transition:all var(--ease);z-index:50} /* focus-within — чтобы выпадашки открывались с клавиатуры: до этого работал только :hover, и до вложенных пунктов было не добраться табом. */ .lz-menu>li:hover>.lz-sub,.lz-menu>li:focus-within>.lz-sub{opacity:1;visibility:visible;transform:translateY(0)} .lz-sub li a{display:block;padding:9px 20px;font-size:14px;color:var(--body)} .lz-sub li a:hover{background:var(--brand-tint);color:var(--brand-dk)} /* Двухколоночная выпадашка — та же, что в кластере /licenzirovanie/. Пункт «Наши услуги» стоит ближе к левому краю, но при 21 пункте в один столбец список уходит под сгиб, поэтому колонки. */ .lz-mega{display:flex;gap:8px;min-width:680px;padding:14px 8px; /* 25 пунктов в две колонки — это ~600px. На ноутбуке 1366x768 низ выпадашки уходил за экран, поэтому ограничиваем высотой окна. */ max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain} .lz-mega>div{min-width:300px;flex:1 1 0} .lz-col-h{font:700 12px/1 var(--head,var(--font));text-transform:uppercase; letter-spacing:.6px;color:var(--brand-dk);padding:6px 16px 8px} .lz-mega ul{list-style:none;margin:0;padding:0} .lz-mega li a{padding:8px 16px} .lz-cta{margin-left:auto;flex:0 0 auto} /* burger */ .lz-burger{display:none;width:44px;height:44px;border:0;background:transparent; cursor:pointer;flex-direction:column;justify-content:center;gap:5px} .lz-burger span{display:block;height:2px;width:26px;background:var(--text);transition:all var(--ease)} .lz-mobile{display:none} /* ============================================================ HERO ============================================================ */ .hero{position:relative;min-height:clamp(420px,60vh,620px);display:flex;align-items:center; background:var(--dark) center/cover no-repeat;color:#fff;text-align:center} .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,23,26,.55),rgba(19,23,26,.72))} .hero .wrap{position:relative;z-index:2} .hero h1{color:#fff;max-width:16ch;margin:0 auto .3em} .hero-sub{font-size:clamp(16px,2.2vw,22px);color:#e8edf0;max-width:44ch;margin:0 auto 1.6em} .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* ============================================================ CARDS & SECTIONS ============================================================ */ /* service / icon card */ .svc-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:24px;transition:border-color var(--ease),box-shadow var(--ease);height:100%} .svc-card:hover{border-color:var(--brand);box-shadow:var(--shadow-h)} .svc-ico{width:56px;height:56px;border-radius:var(--radius);background:var(--brand-tint); color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:14px} .svc-card h4{text-transform:uppercase;font-size:16px;color:var(--text);margin:0 0 8px} .svc-card p{font-size:14px;color:var(--muted);margin:0} .svc-card a.svc-more{display:inline-block;margin-top:12px;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.4px} /* team card */ .team-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;height:100%} .team-photo{aspect-ratio:3/4;overflow:hidden;background:var(--bg-alt)} .team-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 12%} .team-body{padding:14px 16px} .team-name{font:700 16px var(--head);color:var(--text)} .team-role{font-size:13px;color:var(--muted);margin-top:3px} /* testimonial (text) */ .tst{text-align:center;max-width:88%;margin:0 auto} .tst-avatar{width:96px;height:96px;margin:0 auto 16px;position:relative} .tst-avatar img{width:100%;height:100%;object-fit:cover;border:3px solid var(--line);border-radius:50%} .tst-avatar::before{content:"\201C";position:absolute;left:-8px;top:-18px;color:var(--brand); font:700 46px/1 var(--accent-font)} .tst-body p{font-size:14px;line-height:1.7;color:var(--body)} .tst-name{font:500 17px var(--head);color:var(--text);margin-top:.6em} .tst-role{font-size:13px;color:var(--soft);margin-top:.3em} /* video testimonial */ .vid{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;background:#000;cursor:pointer} .vid>img{width:100%;height:100%;object-fit:cover} .vid video{width:100%;height:100%;object-fit:cover;background:#000} .vid::after{content:"";position:absolute;inset:0;background:rgba(19,23,26,.32);transition:opacity var(--ease)} .vid:hover::after{opacity:.6} .vid.playing::after{display:none} .vid-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2; width:64px;height:64px;border-radius:50%;background:var(--brand);color:#fff; display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-h);transition:all var(--ease)} .vid:hover .vid-play{background:var(--accent);transform:translate(-50%,-50%) scale(1.06)} .vid-play::before{content:"";border-left:18px solid #fff;border-top:11px solid transparent; border-bottom:11px solid transparent;margin-left:4px} .vid-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 16px 12px; background:linear-gradient(180deg,transparent,rgba(0,0,0,.7));color:#fff;font-size:14px;font-weight:500} /* Rutube video facades (видеоотзывы) — плеер грузится по клику */ .rvid{display:flex;flex-direction:column;gap:12px;cursor:pointer} .rvid-frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000} .rvid-frame img{width:100%;height:100%;object-fit:cover;display:block} .rvid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .rvid-frame::after{content:"";position:absolute;inset:0;background:rgba(19,23,26,.30);transition:opacity var(--ease)} .rvid:hover .rvid-frame::after{opacity:.55} .rvid.playing .rvid-frame::after{display:none} .rvid-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2; width:64px;height:64px;border-radius:50%;background:var(--brand); display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-h);transition:all var(--ease)} .rvid:hover .rvid-play{background:var(--accent);transform:translate(-50%,-50%) scale(1.06)} .rvid-play::before{content:"";border-left:18px solid #fff;border-top:11px solid transparent; border-bottom:11px solid transparent;margin-left:4px} .rvid.playing .rvid-play{display:none} .rvid:focus-visible{outline:2px solid var(--brand-lt);outline-offset:3px} .rvid-cap{font-size:14px;font-weight:500;line-height:1.4;color:#c3cad0} /* external review badges */ .rev-badges{display:flex;gap:20px;justify-content:center;flex-wrap:wrap} .rev-badge{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line); border-radius:var(--radius);padding:16px 22px;min-width:200px} .rev-badge .rev-star{color:#f5a623;font-size:15px;letter-spacing:1px} .rev-badge .rev-src{font:700 14px var(--head);color:var(--text)} .rev-badge .rev-link{font:700 22px var(--head);color:var(--brand)} /* thank-you letters gallery */ .letters{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .letter{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;cursor:pointer;transition:box-shadow var(--ease)} .letter:hover{box-shadow:var(--shadow-h)} .letter img{width:100%;aspect-ratio:3/4;object-fit:cover} /* counters */ .counters{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center} .count-n{font:700 clamp(34px,5vw,52px)/1 var(--head);color:var(--brand)} .sec.dark .count-n{color:var(--brand-lt)} .count-l{font-size:14px;color:var(--muted);margin-top:6px;text-transform:uppercase;letter-spacing:.5px} .sec.dark .count-l{color:#c3cad0} /* синий бэнд «Нами было выдано» — как в оригинале */ .sec.brand{background:var(--brand);color:#fff} .sec.brand .sec-title,.sec.brand .count-n{color:#fff} .sec.brand .sec-rule{background:#fff} .sec.brand .count-l{color:rgba(255,255,255,.9)} /* цветные плашки под hero (реплика оригинала) */ .hero-stripes{display:grid;grid-template-columns:repeat(4,1fr)} .hstripe{display:flex;align-items:center;justify-content:center;text-align:center;padding:22px 16px;min-height:84px; font:600 15px/1.25 var(--head);text-transform:uppercase;letter-spacing:.3px;color:#fff;transition:filter var(--ease)} .hstripe:hover{filter:brightness(1.07)} .hstripe.s1{background:#3a4550} .hstripe.s2{background:var(--brand)} .hstripe.s3{background:var(--success)} .hstripe.s4{background:#eef1f2;color:var(--text)} @media(max-width:767px){.hero-stripes{grid-template-columns:repeat(2,1fr)}.hstripe{font-size:13px;min-height:66px;padding:16px 10px}} /* ---------- forms ---------- */ .form{max-width:520px;margin:0 auto} .form .row{margin-bottom:14px} .form input,.form select,.form textarea{width:100%;font:400 15px var(--font); padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--text)} /* Обводку фокуса НЕ снимаем: без неё поля заявки недоступны с клавиатуры, а по остальному сайту обводка есть — форма выпадала из общего правила. */ .form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{ outline:2px solid var(--brand);outline-offset:0;border-color:var(--brand)} .form .consent{display:flex;gap:10px;font-size:12px;color:var(--muted);line-height:1.5;margin:6px 0 14px;text-align:left} .form .consent input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--brand)} .form .btn{width:100%} .cta-band{background:linear-gradient(135deg,#2e9dd1,#2681ab);color:#fff} .cta-band .form input{background:rgba(255,255,255,.95)} .cta-band h2,.cta-band .sec-title{color:#fff} /* modal (video / letter lightbox) */ .lz-modal{position:fixed;inset:0;z-index:500;background:rgba(10,12,14,.86);display:none; align-items:center;justify-content:center;padding:24px} .lz-modal.open{display:flex} .lz-modal-inner{max-width:min(920px,92vw);max-height:88vh;width:100%} .lz-modal video,.lz-modal img{width:100%;max-height:88vh;object-fit:contain;border-radius:6px} .lz-modal-close{position:absolute;top:18px;right:24px;width:44px;height:44px;border:0;background:transparent; color:#fff;font-size:34px;line-height:1;cursor:pointer} /* ============================================================ FOOTER ============================================================ */ .lz-footer{background:var(--foot-bg);color:var(--foot-text);font-size:14px;padding:56px 0 0} .lz-footer a{color:var(--foot-text)} /* strong,b выше красятся в --text — в тёмном подвале это давало чёрный телефон на чёрном (контраст 1,1:1, детектор + скриншот). */ .lz-footer b,.lz-footer strong{color:inherit} .lz-footer a:hover{color:#fff} .lz-foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1.6fr;gap:36px} .lz-foot-col h4{color:var(--foot-head);font:700 13px/1.4 var(--head);text-transform:uppercase; letter-spacing:.8px;margin:0 0 16px} .lz-foot-col p{margin:0 0 8px;line-height:1.55} .lz-foot-col li{margin-bottom:8px} .lz-foot-req b{color:#fff;font-weight:600} .lz-foot-cities{columns:2;column-gap:24px;font-size:13px} .lz-foot-cities li{break-inside:avoid;margin-bottom:6px} .lz-social{display:flex;gap:12px;margin-top:16px} .lz-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08); display:flex;align-items:center;justify-content:center;color:#fff;transition:background var(--ease)} .lz-social a:hover{background:var(--brand)} .lz-social svg{width:18px;height:18px;fill:currentColor} .lz-foot-bottom{border-top:1px solid var(--foot-line);margin-top:40px;padding:20px 0; display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--faint)} .lz-foot-bottom a{color:var(--faint)} .lz-foot-note{color:var(--accent)} /* ---------- breadcrumbs ---------- */ .crumbs{font-size:13px;color:var(--soft);padding:16px 0} .crumbs a{color:var(--soft)} .crumbs a:hover{color:var(--brand)} .crumbs span{color:var(--faint)} /* ---------- utilities ---------- */ .page-head{background:var(--bg-alt);padding:36px 0;border-bottom:1px solid var(--line)} .page-head h1{margin:0} .prose{max-width:820px;margin:0 auto} .prose p{color:var(--body)} .prose h2,.prose h3{margin-top:1.4em} .prose img{border-radius:var(--radius);margin:1.2em 0} .prose ul{margin:0 0 1em;padding-left:0} .prose ul li{position:relative;padding-left:26px;margin-bottom:8px} .prose ul li::before{content:"";position:absolute;left:4px;top:9px;width:8px;height:8px;border-radius:50%;background:var(--brand)} .center{text-align:center} .mt24{margin-top:24px}.mt36{margin-top:36px} /* ============================================================ RESPONSIVE (1279 / 1023 / 950 / 767 / 479) ============================================================ */ @media(max-width:1279px){ :root{--wrap:1100px} } @media(max-width:1023px){ .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)} .letters{grid-template-columns:repeat(3,1fr)} .lz-foot-grid{grid-template-columns:1fr 1fr} } /* 1199px: ниже этой ширины меню из 9 пунктов + CTA не помещаются в ряд, и кнопка «Заказать консультацию» уезжала за край экрана. */ @media(max-width:1199px){ :root{--head-h:64px} .lz-head-row{min-height:64px} .lz-head-phone,.lz-head-right,.lz-head-menu{display:none} .lz-burger{display:flex;margin-left:auto} .lz-logo img{height:38px} .lz-mobile{display:block;position:fixed;top:64px;left:0;right:0;bottom:0;z-index:190; background:#fff;overflow-y:auto;padding:12px 0;transform:translateX(-100%); transition:transform var(--ease);box-shadow:var(--shadow)} .lz-mobile.open{transform:translateX(0)} .lz-mobile a{display:block;padding:12px 24px;color:var(--text);font-weight:500;border-bottom:1px solid var(--line-2)} .lz-mobile .m-sub a{padding-left:40px;font-weight:400;font-size:14px;color:var(--muted)} body.menu-open{overflow:hidden} .lz-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .lz-burger.open span:nth-child(2){opacity:0} .lz-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} } @media(max-width:767px){ .sec{padding:48px 0} .wrap{padding:0 16px} .g2,.g3,.g4{grid-template-columns:1fr} .counters{grid-template-columns:1fr;gap:28px} .letters{grid-template-columns:repeat(2,1fr)} .lz-foot-grid{grid-template-columns:1fr} .lz-foot-cities{columns:1} .hero{min-height:420px} } @media(max-width:479px){ .letters{grid-template-columns:1fr 1fr} .rev-badge{min-width:100%} } /* ---------- motion ---------- */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} } /* ============ ПРАВКИ 2026-07-06 (шапка/подвал/слайдеры/подарок) ============ */ /* --- соцсети в фирменных цветах (шапка + подвал) --- */ .soc svg{fill:#fff !important} .soc-youtube{background:#FF0000 !important} .soc-telegram{background:#29A9EB !important} .soc-vk{background:#0077FF !important} .soc-rutube{background:#14191F !important} .soc-dzen{background:#000 !important} .soc:hover{filter:brightness(1.12);transform:translateY(-1px)} .lz-footer .soc{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)} /* --- аватарки-буквы у текстовых отзывов --- */ .tst-letter{width:96px;height:96px;margin:0 auto 16px;border-radius:50%; background:var(--brand-tint);color:var(--brand-dk); display:flex;align-items:center;justify-content:center; font:700 42px/1 var(--head);border:3px solid var(--line)} /* --- подарочная плашка «сайт-визитка» на каждой странице --- */ .gift-strip{display:block;background:var(--brand-tint);border-bottom:1px solid #d5e6f0; color:var(--text);text-align:center;padding:10px 16px;font-size:14px;line-height:1.4} .gift-strip:hover{background:#e2eff7;color:var(--text)} .gift-strip b{color:var(--brand-dk);font-weight:600} .gift-badge{display:inline-block;background:var(--accent);color:#fff;font-weight:700; font-size:11px;padding:2px 8px;border-radius:4px;margin-right:8px; text-transform:uppercase;letter-spacing:.03em;vertical-align:middle} /* --- универсальный слайдер (письма / заслуги) --- */ .slider{position:relative;display:flex;align-items:center;gap:10px} .slider-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;padding:6px 2px;flex:1; scrollbar-width:none;-webkit-overflow-scrolling:touch} .slider-track::-webkit-scrollbar{display:none} .slider-track>*{scroll-snap-align:start;flex:0 0 auto} .slider-arrow{flex:0 0 auto;width:46px;height:46px;border-radius:50%; border:1px solid var(--line);background:#fff;color:var(--text); font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center; justify-content:center;transition:all var(--ease)} .slider-arrow:hover{background:var(--brand);color:#fff;border-color:var(--brand)} .slider-arrow:disabled{opacity:.3;cursor:default;background:#fff;color:var(--text);border-color:var(--line)} /* письма: один ряд, показываем ЦЕЛИКОМ (contain, без обрезки) */ .letters-track .letter{width:232px;height:322px;display:flex;align-items:center; justify-content:center;background:#fff;padding:6px} .letters-track .letter img{width:100%;height:100%;object-fit:contain;aspect-ratio:auto} /* заслуги: фото клиник в ряд-слайдере */ .clients-track .client-slide{width:300px;border-radius:var(--radius);overflow:hidden; border:1px solid var(--line);background:#fff} .clients-track .client-slide img{width:100%;aspect-ratio:500/390;object-fit:cover;display:block} /* --- подвал: «Наши контакты» по центру --- */ .lz-foot-contacts{text-align:center} .lz-foot-contacts .lz-foot-cities{columns:2;column-gap:20px;text-align:left; display:inline-block;margin:8px auto 0} @media (max-width:640px){ .slider-arrow{width:40px;height:40px;font-size:22px} .letters-track .letter{width:200px;height:280px} .clients-track .client-slide{width:260px} .gift-strip{font-size:13px} .lz-foot-contacts .lz-foot-cities{columns:1} } /* --- лайтбокс: стрелки навигации по галерее --- */ .lz-modal-inner{position:relative;display:flex;align-items:center;justify-content:center} .lz-modal-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2; width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.16); color:#fff;font-size:30px;line-height:1;cursor:pointer;display:flex; align-items:center;justify-content:center;transition:background var(--ease)} .lz-modal-nav:hover{background:rgba(255,255,255,.32)} .lz-modal-prev{left:-6px} .lz-modal-next{right:-6px} @media(max-width:640px){.lz-modal-prev{left:4px}.lz-modal-next{right:4px}.lz-modal-nav{width:40px;height:40px;font-size:26px}} /* --- блок «Штрафы для клиник»: таблица (страница услуги) --- */ .fines-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff} .fines-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px} .fines-table th{background:var(--brand-tint);color:var(--brand-dk);text-align:left; font:600 12.5px/1.3 var(--head);text-transform:uppercase;letter-spacing:.03em; padding:14px 18px;border-bottom:2px solid var(--brand)} .fines-table td{padding:15px 18px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.45} .fines-table tbody tr:last-child td{border-bottom:0} .fines-table tbody tr:hover{background:var(--bg-alt)} .fines-table .f-violation{color:var(--text);font-weight:500;max-width:340px} .fines-table .f-amount{font-weight:700;color:var(--accent-dk)} .fines-table .f-article{font-size:12.5px;color:var(--soft);white-space:nowrap} .fines-disclaimer{font-size:12.5px;color:var(--soft);max-width:920px; margin:22px auto 0;text-align:center;line-height:1.5} /* группа-подзаголовок внутри таблицы штрафов */ .fines-table tr.f-group td{background:var(--bg-alt2);color:var(--brand-dk); font:700 12px/1.3 var(--head);text-transform:uppercase;letter-spacing:.04em;padding:12px 18px} /* ===== Вопрос-ответ: нативный аккордеон без JS ===== */ .faq-list{margin:0 0 28px} .faq-item{border:1px solid var(--line,#e3e8ee);border-radius:6px;margin:0 0 8px;background:#fff} .faq-item summary{cursor:pointer;list-style:none;padding:14px 44px 14px 16px;font-weight:600;position:relative;color:var(--navy,#1a435e)} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;margin-top:-6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .18s} .faq-item[open] summary::after{transform:rotate(-135deg);margin-top:-2px} .faq-item summary:hover{color:var(--brand,#2e9dd1)} .faq-item .faq-answer{padding:0 16px 16px} .faq-item .faq-answer>*:first-child{margin-top:0} .faq-item .faq-answer>*:last-child{margin-bottom:0} /* ===== Контакты: карта, офисы, соцсети ===== */ .map-embed{margin:0 0 28px;border-radius:6px;overflow:hidden;border:1px solid var(--line,#e3e8ee)} .map-embed iframe{display:block;width:100%;border:0} .office-list{columns:2 260px;column-gap:32px;margin:0 0 12px;padding-left:18px} .office-list li{break-inside:avoid;margin:0 0 6px} .office-note{color:var(--muted,#6b7a88)} .soc-list{display:flex;flex-wrap:wrap;gap:10px 20px;list-style:none;padding:0;margin:0 0 8px} @media(max-width:640px){.office-list{columns:1}} /* ===== Списки документов на скачивание ===== */ .doc-list{list-style:none;padding:0;margin:6px 0 22px} .doc-list li{margin:0 0 6px} .doc-list a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line,#e3e8ee);border-radius:6px;background:#fff;text-decoration:none;font-size:14px;color:var(--navy,#1a435e);transition:border-color .15s,background .15s} .doc-list a::before{content:"";flex:none;width:14px;height:17px;border:1.5px solid currentColor;border-radius:2px;box-shadow:inset 0 -4px 0 -2px currentColor} .doc-list a:hover{border-color:var(--brand,#2e9dd1);background:var(--bg-blue,#f2f9fd);color:var(--brand,#2e9dd1)} /* ===== Образовательный раздел: таблицы реквизитов и пометки ===== */ .edu-table{width:100%;border-collapse:collapse;margin:0 0 20px} .edu-table td{padding:9px 14px;border:1px solid var(--line,#e3e8ee);font-size:14px;vertical-align:top} .edu-table td:first-child{width:38%;color:var(--muted,#6b7a88);background:var(--bg-blue,#f7fafc)} .edu-owner-note{margin-top:18px;padding:10px 14px;border-left:3px solid var(--brand,#2e9dd1);background:var(--bg-blue,#f2f9fd);color:var(--muted,#5b6b78);font-size:13px} /* ============================================================ ОБЩИЙ СТРАЖ: атрибут hidden должен побеждать любое display. У браузера [hidden]{display:none} задано с нулевой специфичностью, поэтому ЛЮБОЕ наше правило вида .foo{display:flex} его перебивает, и элемент, помеченный hidden, продолжает висеть на экране. На этих граблях мы уже трижды: cookie-баннер, фильтр каталога курсов, окно на выходе. Правило ниже закрывает класс целиком. ============================================================ */ .hero-note{font-size:13.5px;line-height:1.5;color:#dfe7ec;max-width:560px; margin:10px auto 0;opacity:.92} [hidden]{display:none!important} /* ============================================================ Кнопка связи в правом нижнем углу (см. templates/_contact-fab.html.j2). Заменяет снятые виджеты Битрикс24 / Verbox / обратного звонка одним входом. Ничего не всплывает само — раскрытие только по нажатию. z-index 150 выбран между липкой панелью услуги (.svc-bar, 120) и мобильным меню (.lz-mobile, 190): кнопка перекрывает панель снизу, но сама уходит под открытое меню, баннер cookie (400), лайтбокс (500) и окно на выходе (9998). ============================================================ */ /* column-reverse: в разметке кнопка идёт ПЕРЕД панелью (иначе Tab с кнопки уходит мимо панели, и попасть в неё можно только Shift+Tab), а на экране панель должна раскрываться НАД кнопкой. pointer-events на самой рамке выключены навсегда: рамка занимает высоту вместе со свёрнутой панелью, и без этого невидимый прямоугольник ~270x280 перехватывал бы клики по странице в правом нижнем углу. */ .lzc{position:fixed;right:20px;bottom:calc(20px + var(--lzc-lift,0px));z-index:150; display:flex;flex-direction:column-reverse;align-items:flex-end; opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none; transition:opacity .28s var(--ease,ease),transform .28s var(--ease,ease), visibility .28s,bottom .2s ease} .lzc-btn,.lzc-panel{pointer-events:auto} /* класс вешает скрипт после прокрутки первого экрана */ .lzc-on{opacity:1;visibility:visible;transform:none} .lzc-panel{width:292px;max-width:calc(100vw - 40px);margin:0 0 10px;overflow:hidden; background:#fff;border:1px solid var(--line,#e5e5e5);border-radius:3px; box-shadow:0 14px 34px rgba(20,40,60,.16); opacity:0;visibility:hidden;transform:translateY(6px) scale(.98);transform-origin:100% 100%; transition:opacity .18s ease,transform .18s ease,visibility .18s} .lzc-open .lzc-panel{opacity:1;visibility:visible;transform:none} .lzc-cap{margin:0;padding:9px 13px 8px;font-size:12px;line-height:1.35; color:var(--soft,#878787);border-bottom:1px solid var(--line-2,#ebecec)} /* строка панели: одна и та же раскладка у ссылки и у кнопки */ .lzc-item{display:flex;align-items:center;gap:11px;width:100%; padding:11px 13px;border:0;border-radius:0;background:none;cursor:pointer; font-family:inherit;text-align:left;text-decoration:none;color:var(--text,#191919); transition:background .15s ease} .lzc-item+.lzc-item{border-top:1px solid var(--line-2,#ebecec)} .lzc-item svg{flex:none;color:var(--brand,#2e9dd1)} .lzc-item:hover{background:var(--brand-tint,#ebf4f9);color:var(--text,#191919)} .lzc-txt{display:block;min-width:0} /* Раздельные свойства вместо сокращения font: в сокращении подстановка var(--head,inherit) при незаданном --head даёт «font:600 15px/1.25 inherit», а это недопустимая запись — браузер снимает объявление целиком. */ .lzc-txt b{display:block;font-family:var(--head,inherit);font-weight:600; font-size:15px;line-height:1.25;color:inherit} .lzc-txt i{display:block;font-style:normal;font-size:12.5px;line-height:1.35; color:var(--muted,#494949)} /* главное действие панели — заливкой, остальные строки остаются тихими */ .lzc-go{background:var(--accent-btn,#c94f36);color:#fff;border-top:0} .lzc-go svg{color:#fff} .lzc-go .lzc-txt i{color:rgba(255,255,255,.86)} .lzc-go:hover{background:var(--accent-btn-h,#b34329);color:#fff} /* свёрнутое состояние: иконка + одно слово, высота под палец */ /* Цвет заливки: в клоне задан --brand-btn (тёмный аква под белый текст, 5,6:1), в разделе /licenzirovanie/ такой переменной нет — там берётся --brand-dk. */ .lzc-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 15px; border:0;border-radius:3px;cursor:pointer; background:var(--brand-btn,var(--brand-dk,#1f6f92));color:#fff; font-family:var(--head,inherit);font-weight:600;font-size:14px;line-height:1; box-shadow:0 6px 18px rgba(20,40,60,.22); transition:background .2s ease} .lzc-btn:hover{background:var(--brand-btn-h,var(--brand,#1a627f))} .lzc-btn svg{flex:none} @media(max-width:560px){ .lzc{right:12px;bottom:calc(12px + var(--lzc-lift,0px))} .lzc-panel{width:min(292px,calc(100vw - 24px))} } @media(prefers-reduced-motion:reduce){ .lzc,.lzc-panel{transition-duration:.01ms} } /* Пока панель РАСКРЫТА, она поднимается над баннером cookie (400): баннер появляется с задержкой ~0,6 с и накрывал открытую панель на мобильном — человек, уже нажавший «Связаться», терял из виду телефон. В свёрнутом состоянии приоритет прежний (150), и баннер по-прежнему выше кнопки. */ .lzc.lzc-open{z-index:450}