/* ===== MediBloom — спільні стилі лендінгів послуг (.lp-*) ===== Підключається в . Унікальні перевизначення — у самих лендінгах. */ .lp-service { --mb-deep:#4a6169; --mb-cream:#F6F1ED; --mb-line:#e3d9cf; --mb-accent:#b98a6d; --mb-text:#3d454a; } .lp-service { color: var(--mb-text); padding-bottom: 60px; } .lp-service .lp-wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; } .lp-service .lp-eyebrow { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--mb-accent); font-weight: 700; margin-bottom: 14px; } .lp-service h1 { font-size: 34px; line-height: 1.25; font-weight: 700; color: var(--mb-deep); margin: 0 0 18px; } .lp-service h2 { font-size: 26px; line-height: 1.3; font-weight: 700; color: var(--mb-deep); margin: 0 0 20px; } .lp-service h3 { font-size: 19px; font-weight: 700; color: var(--mb-deep); margin: 0 0 8px; } .lp-service p { font-size: 17px; line-height: 1.75; margin: 0 0 16px; } /* Hero */ .lp-hero { background: var(--mb-cream); border-radius: 14px; padding: 46px 44px; margin-top: 30px; } .lp-hero .lp-lead { font-size: 18px; max-width: 760px; } .lp-hero .lp-badges { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 30px; } .lp-hero .lp-badge { background:#fff; border:1px solid var(--mb-line); border-radius: 40px; padding: 9px 18px; font-size: 14.5px; font-weight: 600; color: var(--mb-deep); } .lp-cta-row { display:flex; flex-wrap:wrap; gap:14px; align-items:center; } .lp-btn { display:inline-block; background: var(--mb-deep); color:#fff; text-decoration:none; font-weight:700; font-size:16px; padding:15px 30px; border-radius:10px; transition:opacity .2s; } .lp-btn:hover { opacity:.9; } .lp-btn--ghost { background:#fff; color:var(--mb-deep); border:1.5px solid var(--mb-deep); } .lp-phone-inline { font-size:16px; font-weight:700; color:var(--mb-deep); text-decoration:none; } /* --- Контекстні посилання в тексті: фірмові, а не дефолтні браузерні --- */ .lp-service p a, .lp-service .lp-list a, .lp-service .lp-card p a, .lp-service .lp-price-note a { color: var(--mb-deep); font-weight: 600; text-decoration: none; background-image: linear-gradient(var(--mb-accent), var(--mb-accent)); background-repeat: no-repeat; background-size: 100% 1px; background-position: 0 100%; padding-bottom: 1px; transition: background-size .22s ease, color .22s ease; } .lp-service p a:hover, .lp-service .lp-list a:hover, .lp-service .lp-card p a:hover, .lp-service .lp-price-note a:hover { color: var(--mb-accent); background-size: 100% 2px; } .lp-service p a:visited, .lp-service .lp-list a:visited, .lp-service .lp-price-note a:visited { color: var(--mb-deep); } .lp-service p a[href^="tel:"], .lp-service .lp-price-note a[href^="tel:"] { background-image: none; color: var(--mb-deep); font-weight: 700; white-space: nowrap; border-bottom: 1px dashed rgba(185,138,109,.55); } .lp-service p a[href^="tel:"]:hover, .lp-service .lp-price-note a[href^="tel:"]:hover { color: var(--mb-accent); border-bottom-color: var(--mb-accent); } /* Секції */ .lp-section { padding: 46px 0; } .lp-section--tint { background: var(--mb-cream); border-radius:14px; padding:44px; margin-top: 30px; } /* Дворядкова сітка */ .lp-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:26px; } .lp-card { background:#fff; border:1px solid var(--mb-line); border-top:3px solid var(--mb-accent); border-radius:12px; padding:24px 26px; box-shadow: 0 2px 10px rgba(74,97,105,.06); transition: box-shadow .22s ease, transform .22s ease; } .lp-card:hover { box-shadow: 0 8px 24px rgba(74,97,105,.12); transform: translateY(-2px); } .lp-card.tint { background:#fff; border:1px solid var(--mb-line); border-top:3px solid var(--mb-accent); } .lp-card h3 { padding-bottom:10px; border-bottom:1px solid var(--mb-line); margin-bottom:12px; } .lp-card p:last-child { margin-bottom:0; } /* Списки */ .lp-list { list-style:none; padding:0; margin:0; } .lp-list li { position:relative; padding:0 0 12px 30px; font-size:16.5px; line-height:1.6; } .lp-list li::before { content:""; position:absolute; left:6px; top:9px; width:8px; height:8px; border-radius:50%; background:var(--mb-accent); } /* Етапи (нумеровані — це справжня послідовність прийому) */ .lp-steps { counter-reset: step; display:grid; grid-template-columns:1fr 1fr; gap:22px; } .lp-step { position:relative; padding:22px 24px 22px 66px; background:#fff; border:1px solid var(--mb-line); border-radius:12px; box-shadow: 0 2px 10px rgba(74,97,105,.06); } .lp-step::before { counter-increment: step; content: counter(step); position:absolute; left:22px; top:22px; width:34px; height:34px; border-radius:50%; background:var(--mb-deep); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:16px; } /* Прайс */ .lp-price-table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--mb-line); border-radius:12px; overflow:hidden; } .lp-price-table th { background:var(--mb-deep); color:#fff; text-align:left; padding:16px 22px; font-size:15px; font-weight:700; } .lp-price-table td { padding:15px 22px; border-top:1px solid var(--mb-line); font-size:16px; } .lp-price-table td.price { text-align:right; font-weight:700; color:var(--mb-deep); white-space:nowrap; } .lp-price-table td a { color:#b98a6d; font-weight:600; text-decoration:none; border-bottom:1px solid rgba(185,138,109,.35); transition:color .2s ease, border-color .2s ease; } .lp-price-table td a:hover { color:#4a6169; border-bottom-color:#4a6169; } .lp-price-note { font-size:14px; color:#7a7168; margin-top:12px; } /* Лікарі */ .lp-docs { display:grid; grid-template-columns:1fr 1fr; gap:24px; } .lp-doc { display:flex; gap:18px; background:#fff; border:1px solid var(--mb-line); border-radius:12px; padding:22px; align-items:flex-start; } .lp-doc picture { flex-shrink:0; line-height:0; } .lp-doc img { width:96px; height:96px; object-fit:cover; border-radius:10px; flex-shrink:0; display:block; } .lp-doc .lp-doc-role { font-size:14px; color:var(--mb-accent); font-weight:600; margin:4px 0 8px; } .lp-doc a.lp-doc-link { font-weight:700; color:var(--mb-deep); text-decoration:none; font-size:14.5px; } /* FAQ */ .lp-faq details { background:#fff; border:1px solid var(--mb-line); border-radius:10px; margin-bottom:12px; padding:0 22px; } .lp-faq summary { cursor:pointer; padding:18px 0; font-weight:700; color:var(--mb-deep); font-size:17px; list-style:none; position:relative; padding-right:30px; } .lp-faq summary::-webkit-details-marker { display:none; } .lp-faq summary::after { content:"+"; position:absolute; right:2px; top:16px; font-size:22px; color:var(--mb-accent); font-weight:400; } .lp-faq details[open] summary::after { content:"–"; } .lp-faq details > p { padding:0 0 18px; margin:0; font-size:16px; } /* CTA-блок */ .lp-final { background: var(--mb-deep); color:#fff; border-radius:14px; padding:46px 44px; margin-top:30px; text-align:center; } .lp-final h2 { color:#fff; } .lp-final p { color:#e8eef0; max-width:640px; margin:0 auto 26px; } .lp-final .lp-btn { background:#fff; color:var(--mb-deep); } .lp-final .lp-final-contacts { margin-top:24px; font-size:15px; color:#d6e0e3; } .lp-final .lp-final-contacts a { color:#fff; text-decoration:none; font-weight:700; } /* Перелінковка */ .lp-related { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .lp-related a { display:block; background:#fff; border:1px solid var(--mb-line); border-left:4px solid var(--mb-accent); border-radius:8px; padding:16px 20px; text-decoration:none; color:var(--mb-deep); font-weight:600; font-size:16px; transition:background .2s; } .lp-related a:hover { background:var(--mb-cream); } /* Хлібні крихти */ .lp-breadcrumbs { font-size:14px; color:#8a8178; padding:22px 0 0; } .lp-breadcrumbs a { color:#8a8178; text-decoration:none; } .lp-breadcrumbs a:hover { text-decoration:underline; } /* Схожі послуги (перехресна перелінковка) */ .lp-similar { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:8px; } .lp-similar a { display:block; background:#fff; border:1px solid var(--mb-line); border-left:4px solid var(--mb-accent); border-radius:10px; padding:18px 22px; text-decoration:none; transition:background .2s; } .lp-similar a:hover { background:var(--mb-cream); } .lp-similar .ls-name { font-weight:700; color:var(--mb-deep); font-size:16.5px; margin-bottom:4px; } .lp-similar .ls-desc { font-size:14px; color:#7a7168; } @media (max-width: 820px) { .lp-similar { grid-template-columns:1fr; } } @media (max-width: 820px) { .lp-service h1 { font-size: 27px; } .lp-service h2 { font-size: 22px; } .lp-hero, .lp-section--tint, .lp-final { padding: 30px 22px; } .lp-grid2, .lp-steps, .lp-docs, .lp-related { grid-template-columns: 1fr; } .lp-doc { flex-direction: column; } /* Прайс-таблиця на мобільному: горизонтальний скрол, щоб широкі колонки (напр. довгі посилання) не обрізалися й не ламали макет сторінки. */ .lp-price-table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .lp-price-table thead, .lp-price-table tbody, .lp-price-table tr { display: table; width: 100%; table-layout: fixed; } .lp-price-table th, .lp-price-table td { padding: 12px 14px; font-size: 14px; } /* Ціна вужча, назва отримує більше місця */ .lp-price-table td.price, .lp-price-table th:last-child { width: 34%; } /* Довгі посилання переносяться, а не вилазять за екран */ .lp-price-table td a { word-break: break-word; overflow-wrap: anywhere; border-bottom: none; } } /* Блок-примітка замість таблиці прайсу (використовується не на всіх лендінгах) */ .lp-price-note-box { background:#fff; border:1px solid var(--mb-line); border-radius:12px; padding:28px 30px; } .lp-price-note-box h3 { margin-bottom:10px; } /* ========================================================================== ХАБИ НАПРЯМКІВ: картки послуг (внутрішня перелінковка хаб -> лендінг) Статичний HTML, без JS — щоб Googlebot бачив ці посилання в розмітці. ========================================================================== */ .svc-hub { max-width: 1160px; margin: 40px auto 0; padding: 0 20px; } .svc-hub h2 { font-size: 24px; font-weight: 700; color: #4a6169; margin: 0 0 8px; } .svc-hub .svc-sub { font-size: 16px; color: #7a7168; margin: 0 0 22px; } .svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .svc-card { display: block; background: #fff; border: 1px solid #e3d9cf; border-left: 4px solid #b98a6d; border-radius: 10px; padding: 20px 24px; text-decoration: none; color: #3d454a; transition: box-shadow .2s, transform .2s; } .svc-card:hover { box-shadow: 0 8px 22px rgba(74,97,105,.12); transform: translateY(-2px); } .svc-card .svc-name { font-size: 17.5px; font-weight: 700; color: #4a6169; margin-bottom: 6px; } .svc-card .svc-desc { font-size: 14.5px; line-height: 1.55; color: #7a7168; margin-bottom: 10px; } .svc-card .svc-more { font-size: 14px; font-weight: 700; color: #b98a6d; } .svc-card .svc-more::after { content: " \2192"; } @media (max-width: 820px) { .svc-grid { grid-template-columns: 1fr; } } /* ========================================================================== Карусель послуг напрямку -------------------------------------------------------------------------- Власна реалізація, БЕЗ slick (див. коментар у main.js). Класи навішує JS автоматично, лише коли карток > 4. Хаби з 1-4 картками лишаються звичайною сіткою — правила нижче на них не діють. ========================================================================== */ .svc-slider { position: relative; padding: 0 52px; } /* Сітка лишається сіткою — гортання ховає зайві картки, а не рухає трек */ .svc-grid--slider { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .svc-grid--slider .svc-card.is-hidden { display: none; } /* Однакова висота карток у ряду */ .svc-grid--slider .svc-card { display: flex; flex-direction: column; } .svc-grid--slider .svc-card .svc-more { margin-top: auto; } /* --- Стрілки --- */ .svc-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 19px; line-height: 1; color: #4a6169; background: #fff; border: 1px solid #e3d9cf; border-radius: 50%; cursor: pointer; box-shadow: 0 2px 8px rgba(74,97,105,.08); transition: background .2s, border-color .2s, color .2s, opacity .2s; z-index: 2; } .svc-arrow:hover:not(:disabled) { background: #4a6169; border-color: #4a6169; color: #fff; } .svc-arrow:disabled { opacity: .35; cursor: default; } .svc-arrow--prev { left: 0; } .svc-arrow--next { right: 0; } /* --- Точки --- */ .svc-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; } .svc-dot { width: 10px; height: 10px; padding: 0; border: none; border-radius: 50%; background: #e3d9cf; cursor: pointer; transition: background .2s, transform .2s; } .svc-dot:hover { background: #cbbcae; } .svc-dot.is-active { background: #b98a6d; transform: scale(1.15); } /* --- Мобільний: 1 колонка, 2 картки на сторінку. Стрілки ховаємо (тісно), лишаємо точки — вони і показують позицію, і гортають. --- */ @media (max-width: 820px) { .svc-slider { padding: 0; } .svc-grid--slider { grid-template-columns: 1fr; } .svc-arrow { display: none; } .svc-dots { margin-top: 18px; gap: 10px; } .svc-dot { width: 12px; height: 12px; } }