/* ==========================================================================
Plastika.me — Custom Styles
==========================================================================
Naming convention: BEM
Block: .section-name (e.g. .hero, .site-header, .site-footer)
Element: .section-name__element (e.g. .hero__title-main, .site-footer__logo)
Modifier: .section-name--mod (e.g. .header-nav--stuck)
State: .is-open, .is-active
========================================================================== */
/* ---------- Design Tokens ---------- */
:root {
/* Colors */
--pm-gold: #9a7d53;
--pm-gold-light: #d3bb99;
--pm-dark: #1e1e1e;
--pm-green: #005d4d;
--pm-green-dark: #004a3d;
--pm-beige: #fbf3e8;
--pm-white: #ffffff;
--pm-gray: #808285;
--pm-muted: #9a9185;
--pm-teal: #88bcb3;
--pm-divider: #aba192;
/* Typography */
--pm-font: 'Roboto Flex', sans-serif;
--pm-fvs: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 712, 'wdth' 100;
/* Spacing scale */
--pm-space-xs: 0.5rem; /* 8px */
--pm-space-sm: 1rem; /* 16px */
--pm-space-md: 1.5rem; /* 24px */
--pm-space-lg: 2rem; /* 32px */
--pm-space-xl: 2.5rem; /* 40px */
--pm-space-2xl: 3rem; /* 48px */
--pm-space-3xl: 4rem; /* 64px */
}
/* ---------- Base typography (inherit everywhere) ---------- */
body {
font-family: var(--pm-font);
font-variation-settings: var(--pm-fvs);
}
button, input, select, textarea {
font-family: inherit;
font-variation-settings: inherit;
}
/* Header — transparent overlay on top of hero */
.site-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
background: transparent;
}
/* Offset for WP Admin Bar when logged in */
.admin-bar .site-header {
top: var(--wp-admin--admin-bar--height, 32px);
}
/* Header constrained override — 1920px instead of global 1415px */
.site-header .top-bar.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.site-header .header-nav.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: 1920px;
}
/* ==========================================================================
TOP BAR
========================================================================== */
.top-bar {
padding: 12px 50px;
}
.top-bar > .wp-block-group {
justify-content: space-between;
}
.top-bar p {
font-weight: 300;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1.1px;
color: var(--pm-dark);
margin: 0;
}
.top-bar__time {
color: var(--pm-muted) !important;
font-size: 12px !important;
letter-spacing: 0.96px !important;
}
.top-bar__metro-icon {
display: inline-block;
vertical-align: middle;
margin-right: 4px;
}
.top-bar__address {
text-align: right;
}
/* ==========================================================================
HEADER NAV (pill)
========================================================================== */
.header-nav {
padding: 0 32px 10px;
margin: 0px;
}
/* Sticky state — added by JS on scroll */
.header-nav--stuck {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
padding-top: 24px;
}
.admin-bar .header-nav--stuck {
top: var(--wp-admin--admin-bar--height, 32px);
}
.header-nav > .wp-block-group.is-layout-flex.wp-block-group-is-layout-flex {
background: var(--pm-white);
border-radius: 50px;
padding: 10px 16px;
align-items: center;
flex-wrap: nowrap;
justify-content: space-between;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
/* Logo area */
.header-nav__logo-img {
flex-shrink: 0;
}
.header-nav__logo-img img {
width: auto !important;
height: 48px !important;
max-width: none !important;
object-fit: contain;
}
/* Navigation menu (wp_nav_menu) */
.header-nav__menu {
display: flex;
align-items: center;
}
.header-nav__menu-list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: clamp(12px, calc((100vw - 1024px) * 0.049), 32px);
flex-wrap: nowrap;
}
.header-nav__menu-list .menu-item a {
font-weight: 400;
font-size: 16px;
text-transform: uppercase;
color: var(--pm-dark);
text-decoration: none;
white-space: nowrap;
}
.header-nav__menu-list .menu-item a:hover {
color: var(--pm-gold);
}
/* Action buttons */
.header-nav__actions.is-layout-flex {
gap: 16px !important;
flex-wrap: nowrap;
}
/* Login button */
.btn-login {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border: 1px solid var(--pm-gold-light);
border-radius: 40px;
background: rgba(247, 245, 242, 0.33);
font-weight: 400;
font-size: 12px;
text-transform: uppercase;
color: var(--pm-gold);
text-decoration: none;
transition: background 0.2s;
}
.btn-login:hover {
background: rgba(154, 125, 83, 0.08);
color: var(--pm-gold);
}
/* Book button (header) */
.btn-book {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
border: 1px solid var(--pm-gold);
border-radius: 40px;
background: rgba(154, 125, 83, 0.08);
font-weight: 400;
font-size: 12px;
text-transform: uppercase;
color: var(--pm-gold);
text-decoration: none;
transition: background 0.2s;
}
.btn-book:hover {
background: rgba(154, 125, 83, 0.16);
color: var(--pm-gold);
}
/* Phone */
.header-nav__phone {
text-align: right;
}
.header-nav__phone-number {
font-family: var(--pm-font) !important;
font-weight: 200 !important;
font-size: 18px !important;
color: var(--pm-dark) !important;
letter-spacing: 0.72px;
margin: 0 !important;
text-decoration: auto;
}
.header-nav__phone-hours {
font-family: var(--pm-font) !important;
font-weight: 300 !important;
font-size: 11px !important;
color: var(--pm-gold) !important;
text-transform: uppercase;
letter-spacing: 1.08px;
margin: 0 !important;
}
/* ==========================================================================
HERO SECTION
========================================================================== */
.hero {
position: relative;
background: var(--pm-beige);
overflow: hidden;
padding: 0;
}
.hero__inner {
position: relative;
max-width: 1415px;
margin: 0 auto;
min-height: 737px;
padding-top: 220px;
}
/* Large gradient title */
.hero__title-main {
font-weight: 700;
font-size: clamp(40px, 13vw, 200px);
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
margin: 0;
position: relative;
z-index: 2;
margin-bottom: -40px;
margin-left: -5px;
}
.hero__title-sub {
font-weight: 200;
font-size: clamp(24px, 2.5vw, 48px);
color: var(--pm-gold);
margin: 0;
z-index: 3;
}
.hero__subtitle {
font-weight: 200;
font-size: clamp(24px, 2.5vw, 48px);
line-height: 52px;
color: var(--pm-gold);
margin: 0;
}
/* Description text */
.hero__description {
font-weight: 200;
font-size: clamp(20px, 1.67vw, 32px);
line-height: 42px;
color: var(--pm-dark);
max-width: 397px;
}
.hero__description em {
color: var(--pm-gold);
font-style: italic;
}
/* CTA button (hero) */
.hero__cta {
display: inline-flex;
align-items: center;
justify-content: center;
width: 329px;
height: 80px;
padding: 0;
background: var(--pm-green);
border: none;
border-bottom: 3px solid var(--pm-gold);
border-radius: 40px;
font-weight: 400;
font-size: 18px;
text-transform: uppercase;
color: var(--pm-white);
text-decoration: none;
transition: background 0.3s;
box-sizing: border-box;
}
.hero__cta:hover {
background: var(--pm-green-dark);
color: var(--pm-white);
}
/* Hero image */
.hero__image {
position: absolute;
top: 231px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
}
.hero__logo-back {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 700px;
height: 700px;
z-index: -1;
pointer-events: none;
display: block;
}
.hero__logo-back svg {
width: 100%;
height: 100%;
}
.hero__logo-back svg path {
opacity: 0;
transform-origin: center;
animation: logo-path-appear 0.8s ease forwards;
}
.hero__logo-back svg path:nth-child(1) { animation-delay: 2.4s; }
.hero__logo-back svg path:nth-child(2) { animation-delay: 2.7s; }
.hero__logo-back svg path:nth-child(3) { animation-delay: 3.0s; }
.hero__logo-back svg path:nth-child(4) { animation-delay: 3.3s; }
@keyframes logo-path-appear {
from {
opacity: 0;
transform: scale(0.92);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* ── Hero entrance animations ── */
.hero__letter {
display: inline-block;
background: linear-gradient(180deg, #9a7d53 0%, #d3bb99 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
opacity: 0;
animation: hero-letter-drop 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes hero-letter-drop {
from { opacity: 0; transform: translateY(-16px); }
to { opacity: 1; transform: translateY(0); }
}
.hero__title-sub {
opacity: 0;
animation: hero-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero__word {
display: inline-block;
opacity: 0;
animation: hero-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes hero-fade-up {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.hero__doctors img {
opacity: 0;
animation: hero-doctor-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes hero-doctor-pop {
from { opacity: 0; transform: scale(0.65); }
to { opacity: 1; transform: scale(1); }
}
.hero__image img {
max-height: 690px;
width: auto;
filter: drop-shadow(37px 15px 70px rgba(154, 125, 83, 0.4));
padding: 40px;
}
/* Rating block */
.hero__rating {
position: relative;
z-index: 4;
}
.hero__rating-score {
font-weight: 200;
font-size: 64px;
line-height: 32px;
color: var(--pm-gold);
margin: 0;
opacity: 0;
}
.hero__rating-text {
font-weight: 200;
font-size: 16px;
line-height: 32px;
color: var(--pm-dark);
text-align: center;
margin: 0px;
}
.hero__doctors {
display: flex;
}
.hero__doctors img {
width: 74px;
height: 74px;
border-radius: 50%;
border: 3px solid var(--pm-white);
object-fit: cover;
}
.hero__doctors img:not(:first-child) {
margin-left: -20px;
}
/* Award block */
.hero__award {
position: relative;
z-index: 4;
border-top: 1px solid rgba(154, 125, 83, 0.16);
padding-top: 24px;
margin-top: 24px;
}
.hero__award-badge {
font-weight: 700;
font-size: 40px;
background: linear-gradient(131deg, #7d5013 16%, #9a7d53 64%, #cc9c3e 108%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero__award-title {
font-weight: 300;
font-size: 16px;
line-height: 22px;
color: var(--pm-gold);
text-transform: uppercase;
margin: 0px;
}
.hero__award-text {
font-weight: 200;
font-size: 16px;
line-height: 18px;
color: var(--pm-dark);
margin: 0px;
}
/* ==========================================================================
HERO LAYOUT (Desktop)
========================================================================== */
.hero__inner {
position: relative;
padding-left: clamp(32px, 4vw, 64px);
padding-right: clamp(32px, 4vw, 64px);
}
.hero__titles {
width: 100%;
}
.hero__title-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 20px;
}
.hero__content {
position: inherit;
padding-top: 80px;
display: flex;
flex-direction: column;
gap: 40px;
align-items: flex-start;
z-index: 5;
max-width: 30%;
}
.hero__sidebar {
position: absolute;
right: clamp(32px, 4vw, 64px);
top: 54%;
display: flex;
flex-direction: column;
align-items: flex-end;
z-index: 5;
width: 315px;
}
.hero__rating {
text-align: left;
width: 315px;
}
.hero__rating-row {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 8px;
}
.hero__rating-header {
display: flex;
align-items: flex-start;
gap: 2px;
}
.hero__rating-star {
color: var(--pm-gold);
font-size: 30px;
line-height: 1;
margin-top: -30px;
}
.hero__award {
display: flex;
gap: 16px;
align-items: center;
width: 315px;
}
.hero__award-left {
flex-shrink: 0;
position: relative;
}
.hero__award-left .hero__award-badge {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hero__award-img {
display: block;
}
/* ==========================================================================
RESPONSIVE HEADER — New elements (hidden by default)
========================================================================== */
/* Top bar: working hours (tablet/mobile only) */
.top-bar .top-bar__hours {
font-weight: 300;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.9px;
color: var(--pm-gold);
margin: 0;
display: none;
}
/* Top bar: phone link (mobile only) */
.top-bar .top-bar__phone-mobile {
font-weight: 300;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.56px;
color: var(--pm-dark);
margin: 0;
text-decoration: none;
display: none;
}
/* Burger menu button */
.header-nav__burger {
display: none;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--pm-gold-light);
background: transparent;
cursor: pointer;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
padding: 0;
flex-shrink: 0;
}
.header-nav__burger span {
display: block;
width: 16px;
height: 1px;
background: var(--pm-gold);
border-radius: 1px;
}
/* ==========================================================================
MOBILE MENU OVERLAY (CSS-only, checkbox toggle)
========================================================================== */
/* Hidden checkbox */
.mobile-menu__checkbox {
position: absolute;
opacity: 0;
pointer-events: none;
}
/* Overlay hidden by default */
.mobile-menu {
display: none;
padding: 24px;
}
/* Show overlay when checked */
.mobile-menu__checkbox:checked ~ .mobile-menu {
display: block;
}
/* Header becomes full-screen fixed overlay */
@media (max-width: 1100px) {
.site-header:has(.mobile-menu__checkbox:checked) {
position: fixed;
width: 100%;
height: 100vh;
background: var(--pm-beige);
overflow-y: auto;
padding-top: 20px;
}
.admin-bar .site-header:has(.mobile-menu__checkbox:checked) {
height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
}
}
/* Lock body scroll — handled by JS (nav.js) to preserve scroll position */
/* Never show on desktop */
@media (min-width: 1101px) {
.mobile-menu {
display: none !important;
}
}
/* Burger → X animation */
.header-nav__burger span {
transition: transform 0.3s ease, opacity 0.2s ease;
}
.mobile-menu__checkbox:checked ~ .header-nav .header-nav__burger {
background: rgba(214, 193, 163, 0.25);
border-color: var(--pm-gold);
}
.mobile-menu__checkbox:checked ~ .header-nav .header-nav__burger span:nth-child(1) {
transform: translateY(6.5px) rotate(45deg);
}
.mobile-menu__checkbox:checked ~ .header-nav .header-nav__burger span:nth-child(2) {
opacity: 0;
}
.mobile-menu__checkbox:checked ~ .header-nav .header-nav__burger span:nth-child(3) {
transform: translateY(-6.5px) rotate(-45deg);
}
/* CTA Buttons row */
.mobile-menu__buttons {
display: flex;
gap: 24px;
margin-bottom: 32px;
}
.mobile-menu__btn {
padding: 0px 5px;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
flex: 1;
height: 50px;
border: 1px solid var(--pm-green);
border-radius: 40px;
background: rgba(255, 255, 255, 0.33);
font-weight: 400;
font-size: 10px;
text-transform: uppercase;
color: var(--pm-green);
text-decoration: none;
transition: background 0.2s;
box-sizing: border-box;
}
.mobile-menu__btn:hover {
background: rgba(0, 93, 77, 0.08);
color: var(--pm-green);
}
.mobile-menu__btn svg {
flex-shrink: 0;
}
/* Divider */
.mobile-menu__divider {
height: 1px;
background: var(--pm-divider);
margin-bottom: 32px;
}
/* Navigation columns */
.mobile-menu__nav {
display: flex;
}
.mobile-menu__col {
flex: 0 0 30%;
}
.mobile-menu__col--services {
flex: 1;
}
.mobile-menu__label {
display: block;
font-weight: 300;
font-size: 16px;
text-transform: uppercase;
color: var(--pm-gold);
line-height: 52px;
}
.mobile-menu__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 27px;
}
.mobile-menu__list a {
font-weight: 200;
font-size: 20px;
color: var(--pm-dark);
text-decoration: none;
transition: color 0.2s;
}
.mobile-menu__list a:hover {
color: var(--pm-gold);
}
/* Services two-column grid */
.mobile-menu__services-grid {
display: flex;
gap: 30px;
}
.mobile-menu__services-grid .mobile-menu__list {
flex: 1;
}
/* ── Mobile menu: service category accordion ── */
.mobile-menu__accordion {
border-top: 1px solid rgba(154, 125, 83, 0.2);
}
.mobile-menu__accordion:last-child {
border-bottom: 1px solid rgba(154, 125, 83, 0.2);
}
.mobile-menu__accordion-label {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
font-weight: 300;
font-size: 18px;
color: var(--pm-dark);
cursor: pointer;
user-select: none;
transition: color 0.2s;
}
.mobile-menu__accordion-label::after {
content: '';
display: inline-block;
width: 8px;
height: 12px;
background: url('../images/polygon-strelka.svg') no-repeat center / contain;
transition: transform 0.3s;
flex-shrink: 0;
margin-left: 12px;
}
.mobile-menu__accordion-label.is-open {
color: var(--pm-gold);
}
.mobile-menu__accordion-label.is-open::after {
transform: rotate(90deg);
}
.mobile-menu__accordion-list {
list-style: none;
margin: 0;
padding: 0 0 0 12px;
display: flex;
flex-direction: column;
gap: 12px;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
padding-bottom: 0;
}
.mobile-menu__accordion-list.is-open {
max-height: 600px;
opacity: 1;
padding-bottom: 14px;
}
.mobile-menu__accordion-list a {
font-weight: 200;
font-size: 16px;
color: var(--pm-dark);
text-decoration: none;
transition: color 0.2s;
}
.mobile-menu__accordion-list a:hover {
color: var(--pm-gold);
}
/* Mobile menu responsive: stack on small screens */
@media (max-width: 767px) {
.mobile-menu__buttons {
gap: 12px;
}
.mobile-menu__nav {
flex-direction: column;
gap: 32px;
}
.mobile-menu__col {
flex: none;
}
.mobile-menu__services-grid {
flex-direction: column;
gap: 0;
}
.mobile-menu__list {
gap: 20px;
}
}
/* ==========================================================================
COMPACT BUTTONS — icon-only (≤1350px)
========================================================================== */
@media (max-width: 1380px) {
.btn-login span,
.btn-book span {
display: none;
}
.btn-login,
.btn-book {
padding: 10px;
width: 40px;
height: 40px;
box-sizing: border-box;
}
}
/* ==========================================================================
TABLET (≤1024px)
========================================================================== */
@media (max-width: 1100px) {
/* Top bar: hide metro, show hours */
.top-bar__metro { display: none !important; }
.top-bar .top-bar__hours { display: block !important; }
.top-bar { padding: 12px 24px; }
.top-bar__address {
font-size: 12px !important;
letter-spacing: 1.14px;
}
/* Nav pill: compact */
.header-nav { padding: 0 24px 10px; }
.header-nav > .wp-block-group.is-layout-flex.wp-block-group-is-layout-flex {
padding: 6px 16px;
}
/* Hide desktop-only nav elements */
.header-nav__menu { display: none !important; }
.btn-login { display: none !important; }
.btn-book { display: none !important; }
/* Show burger */
.header-nav__burger { display: flex !important; }
/* Smaller logo */
.header-nav__logo-img img {
height: 36px !important;
}
/* Smaller phone text in pill */
.header-nav__phone-number {
font-size: 14px !important;
}
.header-nav__phone-hours {
font-size: 9px !important;
letter-spacing: 0.81px;
}
/* ── Hero ── */
.hero__inner {
padding-top: 140px;
min-height: clamp(520px, 57vw, 620px);
}
.hero__title-main {
margin-bottom: -16px;
margin-left: 0;
}
.hero__image {
top: 174px;
}
.hero__image img {
max-height: clamp(480px, 56vw, 590px);
padding: 20px;
}
.hero__logo-back {
width: clamp(420px, 50vw, 560px);
height: clamp(420px, 50vw, 560px);
}
.hero__content {
padding-top: 124px;
gap: 24px;
}
.hero__description {
font-size: clamp(16px, 2.1vw, 24px);
line-height: 1.45;
}
.hero__cta {
width: clamp(230px, 28vw, 300px);
height: auto;
padding: clamp(18px, 2.4vw, 24px) 0;
font-size: 14px;
}
.hero__sidebar {
width: clamp(180px, 25vw, 315px);
top: 46%;
}
.hero__rating,
.hero__award {
width: auto;
}
.hero__doctors img {
width: clamp(48px, 6.5vw, 68px);
height: clamp(48px, 6.5vw, 68px);
}
.hero__rating-text {
font-size: clamp(11px, 1.5vw, 16px);
}
.hero__award-title {
font-size: clamp(11px, 1.4vw, 16px);
line-height: 1.35;
}
.hero__award-text {
font-size: clamp(11px, 1.4vw, 16px);
line-height: 1.2;
}
.hero__rating-row {
align-items: flex-start;
flex-direction: column;
}
.hero__award {
align-items: flex-start;
flex-direction: column;
}
}
/* ==========================================================================
MOBILE (≤767px)
========================================================================== */
@media (max-width: 767px) {
/* Top bar: hide address, show phone */
.top-bar__address { display: none !important; }
.top-bar .top-bar__phone-mobile { display: block !important; }
.top-bar { padding: 12px 16px; }
/* Nav pill: hide phone, compact padding */
.header-nav { padding: 0 16px 10px; }
.header-nav__phone { display: none !important; }
.header-nav--stuck {
top: 20px;
}
/* Smaller logo for mobile */
.header-nav__logo-img img {
height: 32px !important;
}
/* ── Hero ── */
.hero__inner {
display: flex;
flex-direction: column;
padding-top: 120px;
padding-left: 26px;
padding-right: 26px;
}
.hero__titles { order: 1; }
.hero__title-main {
margin-bottom: -8px;
}
.hero__title-row {
flex-direction: row;
justify-content: space-between;
align-items: baseline;
gap: 8px;
}
.hero__subtitle {
line-height: 1;
max-width: 170px;
}
.hero__image {
order: 2;
position: relative;
top: auto;
left: auto;
transform: none;
text-align: center;
margin: -60px auto -160px;
z-index: 2;
}
.hero__image img {
max-height: 420px;
padding: 0;
}
.hero__logo-back {
width: 340px;
height: 340px;
}
.hero__content {
order: 3;
position: relative;
z-index: 5;
max-width: 100%;
padding-top: 0;
gap: 20px;
}
.hero__description {
max-width: 40%;
}
.hero__cta {
width: 100%;
}
.hero__sidebar {
order: 4;
position: relative;
right: auto;
top: auto;
width: 100%;
flex-direction: row;
justify-content: space-between;
gap: 0px;
padding-bottom: 32px;
}
.hero__rating,
.hero__award {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.hero__rating-row {
align-items: flex-end;
}
.hero__award {
border-left: 1px solid rgba(154, 125, 83, 0.16);
border-top: none;
}
}
/* ==========================================================================
ABOUT CLINIC SECTION
========================================================================== */
.about-clinic {
position: relative;
padding: 80px 0 100px;
overflow: hidden;
}
.about-clinic__inner {
max-width: 1415px;
margin: 0 auto;
padding: 0 20px;
}
/* Decorative leaf — top-left corner */
.about-clinic__decor {
position: absolute;
top: 0px;
left: -52px;
width: 200px;
height: auto;
pointer-events: none;
}
.about-clinic__decor svg {
width: 100%;
height: auto;
overflow: visible;
}
.about-clinic__decor path {
transform-box: fill-box;
transform-origin: center center;
transform: scale(0);
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
/* transition-delay set per-path by JS */
}
.about-clinic__decor.is-visible path {
transform: scale(1);
}
/* ---------- Section heading ---------- */
.about-clinic__heading {
text-align: center;
font-size: 52px;
font-weight: 200;
line-height: 56px;
color: var(--pm-dark);
margin: 0 0 60px;
}
.about-clinic__heading span,
.about-clinic__heading strong {
display: block;
}
.about-clinic__heading strong {
font-weight: 500;
}
/* ---------- Stats row ---------- */
.about-clinic__stats {
margin-bottom: 80px;
}
.about-clinic__stats-labels {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-bottom: 20px;
}
.about-clinic__stats-data {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid rgba(154, 125, 83, 0.16);
padding-top: 32px;
}
.about-clinic__stat {
padding-right: 20px;
}
.about-clinic__stat-label {
display: block;
font-weight: 300;
font-size: clamp(13px, 0.83vw, 16px);
line-height: 1.6;
text-transform: uppercase;
color: var(--pm-gold);
}
.about-clinic__stat-label--mobile {
display: none;
}
.about-clinic__stat-figure {
display: flex;
align-items: center;
gap: clamp(6px, 0.7vw, 14px);
margin-bottom: clamp(10px, 0.73vw, 14px);
color: var(--pm-gold);
min-height: 40px;
}
.about-clinic__stat-prefix {
font-size: clamp(14px, 0.83vw, 16px);
font-weight: 200;
line-height: 1.25;
align-self: flex-end;
margin-bottom: 2px;
}
.about-clinic__stat-value {
font-size: clamp(36px, 3.02vw, 58px);
font-weight: 200;
line-height: 0.55;
}
.about-clinic__stat-unit {
font-size: clamp(12px, 0.83vw, 16px);
font-weight: 200;
line-height: 1.25;
}
.about-clinic__stat-desc {
font-size: clamp(12px, 0.94vw, 18px);
font-weight: 200;
line-height: 1.33;
color: var(--pm-dark);
margin: 0;
max-width: 300px;
}
/* ---------- Content: 3-column layout ---------- */
.about-clinic__content {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0;
align-items: start;
}
/* Left column: info */
.about-clinic__info {
padding-right: 20px;
}
.about-clinic__title {
font-size: 52px;
font-weight: 200;
line-height: 56px;
color: var(--pm-dark);
margin: 0 0 40px;
}
.about-clinic__title strong {
font-weight: 500;
}
.about-clinic__text {
font-size: 20px;
font-weight: 200;
line-height: 32px;
color: var(--pm-dark);
margin: 0 0 48px;
}
.about-clinic__buttons {
display: flex;
flex-direction: column;
gap: 16px;
}
.about-clinic__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 280px;
height: 80px;
border-radius: 40px;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
text-decoration: none;
transition: background-color 0.3s, color 0.3s;
}
.about-clinic__btn--filled {
background: var(--pm-green);
color: var(--pm-white);
border: 1px solid var(--pm-green);
}
.about-clinic__btn--filled:hover {
background: var(--pm-green-dark);
border-color: var(--pm-green-dark);
}
.about-clinic__btn--outline {
background: transparent;
color: var(--pm-green);
border: 1px solid var(--pm-green);
}
.about-clinic__btn--outline:hover {
background: var(--pm-green);
color: var(--pm-white);
}
.about-clinic__btn-icon {
flex-shrink: 0;
transition: filter 0.2s;
}
.about-clinic__btn--outline:hover .about-clinic__btn-icon {
filter: brightness(0) invert(1);
}
/* ---------- Slider ---------- */
.about-clinic__slider {
grid-column: 2 / 4;
display: grid;
grid-template-columns: 456px 1fr;
gap: 0;
}
/* Main (center) image */
.about-clinic__slider-main {
position: relative;
min-height: 680px;
}
.about-clinic__slider-bg {
position: absolute;
top: 0;
right: -10px;
width: 327px;
height: 383px;
background: var(--pm-beige);
}
.about-clinic__slider-frame {
position: relative;
z-index: 1;
width: 456px;
height: 673px;
overflow: hidden;
margin-top: 12px;
-webkit-mask-image: url('../images/mask-main.svg');
mask-image: url('../images/mask-main.svg');
-webkit-mask-size: 456px 673px;
mask-size: 456px 673px;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.about-clinic__slider-img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* WebP Express wraps ![]()
in — ensure it fills the container */
.about-clinic__slider-frame picture,
.about-clinic__gallery-wide picture,
.about-clinic__gallery-narrow picture {
display: block;
width: 100%;
height: 100%;
}
/* Right side panel */
.about-clinic__slider-side {
padding-left: 30px;
display: flex;
flex-direction: column;
}
.about-clinic__slider-text {
font-size: 20px;
font-weight: 200;
line-height: 32px;
color: var(--pm-dark);
margin: 0 0 40px;
}
/* Gallery thumbnails */
.about-clinic__gallery {
display: flex;
gap: 10px;
margin-bottom: 24px;
}
.about-clinic__gallery-wide {
position: relative;
flex: 2;
min-width: 0;
height: 283px;
overflow: hidden;
}
.about-clinic__gallery-narrow {
position: relative;
flex: 1;
min-width: 0;
height: 283px;
overflow: hidden;
}
.about-clinic__gallery-img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Pagination */
.about-clinic__pagination {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.about-clinic__pag-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: none;
border: none;
cursor: pointer;
font-family: var(--pm-font);
font-variation-settings: var(--pm-fvs);
font-size: 16px;
font-weight: 200;
color: var(--pm-gold);
padding: 8px 0;
transition: opacity 0.2s;
}
.about-clinic__pag-btn:hover {
opacity: 0.7;
}
.about-clinic__pag-btn svg {
flex-shrink: 0;
}
/* ---------- About-clinic responsive: tablet ---------- */
@media (max-width: 1100px) {
.about-clinic__heading {
font-size: 36px;
line-height: 42px;
}
.about-clinic__stats-labels {
grid-template-columns: repeat(4, 1fr);
}
.about-clinic__stats-data {
grid-template-columns: repeat(4, 1fr);
}
.about-clinic__content {
grid-template-columns: 1fr;
gap: 48px;
}
.about-clinic__buttons {
flex-direction: row;
}
.about-clinic__btn {
height: 50px;
}
.about-clinic__text,
.about-clinic__slider-text {
font-size: 16px;
line-height: 26px;
}
.about-clinic__slider {
grid-column: 1;
grid-template-columns: 1fr 1fr;
}
.about-clinic__slider-frame {
width: 100%;
height: 500px;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.about-clinic__slider-overlay {
width: 100%;
height: 500px;
}
.about-clinic__slider-main {
min-height: 520px;
}
.about-clinic__gallery-wide {
width: 60%;
}
.about-clinic__gallery-narrow {
width: 40%;
}
.about-clinic__title {
font-size: 36px;
line-height: 42px;
}
}
/* ---------- About-clinic responsive: mobile ---------- */
@media (max-width: 767px) {
.about-clinic {
padding: 48px 0 64px;
}
.about-clinic__decor {
width: 240px;
top: -20px;
left: -80px;
}
.about-clinic__heading {
font-size: 26px;
line-height: 32px;
margin-bottom: 32px;
}
.about-clinic__stats {
margin-bottom: 48px;
}
.about-clinic__stats-labels {
display: none;
}
.about-clinic__stat-label--mobile {
display: block;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(154, 125, 83, 0.16);
max-width: 120px;
line-height: 1.2;
}
.about-clinic__stat-unit {
line-height: 1;
}
.about-clinic__stats-data {
grid-template-columns: 1fr 1fr;
gap: 24px 16px;
border-top: none;
padding-top: 0;
}
.about-clinic__content {
grid-template-columns: 1fr;
gap: 32px;
}
.about-clinic__info {
padding-right: 0;
}
.about-clinic__title {
font-size: 28px;
line-height: 34px;
margin-bottom: 24px;
}
.about-clinic__text {
font-size: 16px;
line-height: 26px;
margin-bottom: 32px;
}
.about-clinic__btn {
width: 100%;
height: 60px;
font-size: 14px;
}
.about-clinic__btn-icon {
width: 40px;
padding-left: 10px;
}
.about-clinic__slider {
grid-column: 1;
grid-template-columns: 1fr;
gap: 24px;
}
.about-clinic__slider-main {
min-height: 400px;
}
.about-clinic__slider-frame {
width: 100%;
height: 420px;
}
.about-clinic__slider-overlay {
width: 100%;
height: 420px;
}
.about-clinic__slider-bg {
width: 60%;
height: 240px;
}
.about-clinic__slider-side {
padding-left: 0;
}
.about-clinic__slider-text {
font-size: 16px;
line-height: 26px;
padding-top: 20px;
order: 1;
}
.about-clinic__gallery-wide,
.about-clinic__gallery-narrow {
width: 100%;
height: 200px;
}
.about-clinic__pagination {
justify-content: center;
}
}
/* ==========================================================================
SERVICES SECTION (Наши услуги)
========================================================================== */
.services {
position: relative;
background: #fffbf5;
overflow: hidden;
padding: 80px 0 100px;
}
/* Decorative leaves — both sides, leaf-by-leaf grow animation */
.services__decor {
position: absolute;
pointer-events: none;
z-index: 0;
}
.services__decor svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
/* Leaf-by-leaf grow: paths start scaled to 0, grow on .is-visible */
.services__decor path {
transform-box: fill-box;
transform-origin: center center;
transform: scale(0);
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
/* transition-delay set per-path by JS */
}
.services__decor.is-visible path {
transform: scale(1);
}
/* Right decor — rotated branch */
.services__decor--right {
bottom: -60px;
right: -80px;
width: 200px;
transform: scaleX(-1) rotate(357deg);
transform-origin: center;
}
/* Left decor — reuses about-clinic__decor animation */
.services .about-clinic__decor {
top: 40px;
left: -30px;
width: 220px;
}
.services__inner {
position: relative;
z-index: 1;
max-width: 1415px;
margin: 0 auto;
padding: 0 30px;
}
/* ---------- Heading ---------- */
.services__heading {
font-size: 52px;
font-weight: 200;
line-height: 56px;
color: var(--pm-dark);
text-align: center;
margin: 0 0 60px;
}
.services__heading strong {
font-weight: 500;
}
/* ---------- Card grid ---------- */
.services__grid {
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: center;
}
/* ---------- Service card ---------- */
.services__card {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
width: calc(33.333% - 16px);
min-height: 289px;
padding: 32px;
background: rgba(255, 255, 255, 0.89);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(211, 187, 153, 0.22);
color: inherit;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.services__card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 40px rgba(154, 125, 83, 0.12);
}
/* Card top (icon + title) — link to category */
.services__card-top {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
text-decoration: none;
color: inherit;
}
/* ---------- Icon container ---------- */
.services__icon {
width: 106px;
height: 82px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.services__icon img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.services__icon picture {
display: block;
width: 100%;
height: 100%;
}
.services__icon picture img {
width: 100%;
height: 100%;
object-fit: contain;
}
.services__icon svg {
width: 100%;
height: 100%;
}
.services__icon-placeholder {
display: block;
width: 60px;
height: 60px;
border: 2px solid var(--pm-gold-light);
border-radius: 50%;
opacity: 0.3;
}
/* ---------- Card title ---------- */
.services__title {
font-size: 18px;
font-weight: 400;
line-height: 26px;
letter-spacing: 0.54px;
text-transform: uppercase;
color: var(--pm-dark);
text-align: center;
margin: 0;
}
/* ---------- Sub-service tags ---------- */
.services__tags {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px 8px;
}
a.services__tag,
span.services__tag {
font-size: 16px;
font-weight: 200;
line-height: 20px;
color: var(--pm-gold);
}
a.services__tag {
text-decoration: none;
transition: color 0.25s ease;
position: relative;
}
a.services__tag::after {
content: '';
position: absolute;
left: 0;
bottom: -1px;
width: 0;
height: 1px;
background: var(--pm-green);
transition: width 0.3s ease;
}
a.services__tag:hover {
color: var(--pm-green);
}
a.services__tag:hover::after {
width: 100%;
}
.services__tag--more {
color: var(--pm-divider);
}
a.services__tag--more:hover {
color: var(--pm-gold);
}
a.services__tag--more::after {
background: var(--pm-gold);
}
.services__tag-sep {
display: inline-block;
width: 1px;
height: 12px;
background: var(--pm-gold);
transform: rotate(30deg);
flex-shrink: 0;
}
/* ==========================================================================
SERVICES — Icon Animations (unique per category, SVG-aware)
========================================================================== */
/* Common: smooth transition on icon container */
.services__icon {
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
filter 0.4s ease;
}
.services__icon svg {
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
filter 0.4s ease;
}
.services__icon svg path,
.services__icon svg circle,
.services__icon svg line,
.services__icon svg rect {
transition: fill-opacity 0.5s ease, stroke-opacity 0.5s ease,
transform 0.5s ease, stroke-dashoffset 0.8s ease;
}
/* 1. Пластическая хирургия — teal breast reveal on hover */
/* Hide teal breast by default */
.services__icon--plastic-surgery svg path[fill="#6AA79D"],
.services__icon--plastic-surgery svg path[fill="#6aa79d"],
.services__icon--plastic-surgery svg path[fill="#B8D7D2"],
.services__icon--plastic-surgery svg path[fill="#b8d7d2"],
.services__icon--plastic-surgery svg path[fill="#D3E5E1"],
.services__icon--plastic-surgery svg path[fill="#d3e5e1"] {
opacity: 0;
transform: scale(0.85);
transform-box: fill-box;
transform-origin: center center;
transition: opacity 0.6s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Reveal via JS class .is-breast-visible — persists after mouse leave */
.services__card.is-breast-visible .services__icon--plastic-surgery svg path[fill="#B8D7D2"],
.services__card.is-breast-visible .services__icon--plastic-surgery svg path[fill="#b8d7d2"],
.services__card.is-breast-visible .services__icon--plastic-surgery svg path[fill="#D3E5E1"],
.services__card.is-breast-visible .services__icon--plastic-surgery svg path[fill="#d3e5e1"] {
opacity: 1;
transform: scale(1);
transition-delay: 0s;
}
.services__card.is-breast-visible .services__icon--plastic-surgery svg path[fill="#6AA79D"],
.services__card.is-breast-visible .services__icon--plastic-surgery svg path[fill="#6aa79d"] {
opacity: 1;
transform: scale(1);
}
/* Stagger the small teal dots for a sparkling appear effect */
.services__card.is-breast-visible .services__icon--plastic-surgery svg path[fill="#6AA79D"]:nth-of-type(2n),
.services__card.is-breast-visible .services__icon--plastic-surgery svg path[fill="#6aa79d"]:nth-of-type(2n) {
transition-delay: 0.08s;
}
.services__card.is-breast-visible .services__icon--plastic-surgery svg path[fill="#6AA79D"]:nth-of-type(3n),
.services__card.is-breast-visible .services__icon--plastic-surgery svg path[fill="#6aa79d"]:nth-of-type(3n) {
transition-delay: 0.16s;
}
.services__card.is-breast-visible .services__icon--plastic-surgery svg path[fill="#6AA79D"]:nth-of-type(5n),
.services__card.is-breast-visible .services__icon--plastic-surgery svg path[fill="#6aa79d"]:nth-of-type(5n) {
transition-delay: 0.24s;
}
.services__card.is-breast-visible .services__icon--plastic-surgery svg path[fill="#6AA79D"]:nth-of-type(7n),
.services__card.is-breast-visible .services__icon--plastic-surgery svg path[fill="#6aa79d"]:nth-of-type(7n) {
transition-delay: 0.32s;
}
@keyframes svc-glow-pulse {
0%, 100% { filter: drop-shadow(0 0 0 transparent); }
50% { filter: drop-shadow(0 0 12px rgba(106, 167, 157, 0.4)); }
}
.services__card:hover .services__icon--plastic-surgery {
transform: scale(1.08);
}
.services__card:hover .services__icon--plastic-surgery svg {
animation: svc-glow-pulse 2s ease-in-out 0.3s infinite;
}
/* 2. Косметология — sparkle dots: staggered opacity pulse on dashed/dotted elements */
@keyframes svc-sparkle {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
.services__card:hover .services__icon--cosmetology {
transform: scale(1.08);
}
.services__card:hover .services__icon--cosmetology svg {
filter: drop-shadow(0 0 6px rgba(136, 188, 179, 0.4));
}
/* Teal background paths shimmer */
.services__card:hover .services__icon--cosmetology svg path[fill="#B8D7D2"],
.services__card:hover .services__icon--cosmetology svg path[fill="#b8d7d2"] {
animation: svc-sparkle 1.8s ease-in-out infinite;
animation-delay: 0.2s;
}
/* Stroke circles/dots dance */
.services__card:hover .services__icon--cosmetology svg circle {
animation: svc-sparkle 1.2s ease-in-out infinite;
}
.services__card:hover .services__icon--cosmetology svg circle:nth-child(odd) {
animation-delay: 0.15s;
}
.services__card:hover .services__icon--cosmetology svg circle:nth-child(even) {
animation-delay: 0.45s;
}
/* 3. ЛОР — gentle nod (tilt) + color warm-up on gold area */
@keyframes svc-nod {
0%, 100% { transform: rotate(0) translateY(0); }
20% { transform: rotate(2deg) translateY(-2px); }
50% { transform: rotate(-1.5deg) translateY(1px); }
80% { transform: rotate(0.5deg) translateY(-1px); }
}
.services__card:hover .services__icon--ent svg {
animation: svc-nod 2.5s ease-in-out infinite;
transform-origin: 50% 70%;
}
.services__card:hover .services__icon--ent svg path[fill="#D3BB99"],
.services__card:hover .services__icon--ent svg path[fill="#d3bb99"] {
fill-opacity: 0.6;
}
/* 4. Интимная пластика — float + teal area pulse */
@keyframes svc-float-breathe {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-5px) scale(1.03); }
}
@keyframes svc-teal-pulse {
0%, 100% { fill-opacity: 1; }
50% { fill-opacity: 0.7; }
}
.services__card:hover .services__icon--intimate-plastic svg {
animation: svc-float-breathe 2.4s ease-in-out infinite;
}
.services__card:hover .services__icon--intimate-plastic svg path[fill="#6AA79D"],
.services__card:hover .services__icon--intimate-plastic svg path[fill="#6aa79d"] {
animation: svc-teal-pulse 2s ease-in-out infinite;
}
/* 5. Эстетическая флебология — stroke draw reveal + slight rotate */
@keyframes svc-stroke-draw {
0% { stroke-dashoffset: 300; }
100% { stroke-dashoffset: 0; }
}
@keyframes svc-vein-glow {
0%, 100% { filter: drop-shadow(0 0 0 transparent); }
50% { filter: drop-shadow(0 0 8px rgba(106, 167, 157, 0.4)); }
}
.services__card:hover .services__icon--phlebology {
transform: scale(1.06) rotate(-2deg);
}
.services__card:hover .services__icon--phlebology svg {
animation: svc-vein-glow 2.5s ease-in-out infinite;
}
.services__card:hover .services__icon--phlebology svg path[stroke],
.services__card:hover .services__icon--phlebology svg line[stroke],
.services__card:hover .services__icon--phlebology svg circle[stroke] {
stroke-dasharray: 300;
animation: svc-stroke-draw 1.5s ease-out forwards;
}
/* 6. Программы реабилитации — assemble bounce + glow */
@keyframes svc-assemble {
0% { transform: translateY(4px) scale(0.96); opacity: 0.6; }
40% { transform: translateY(-3px) scale(1.02); opacity: 1; }
60% { transform: translateY(1px) scale(0.99); }
100% { transform: translateY(0) scale(1); opacity: 1; }
}
.services__card:hover .services__icon--rehabilitation {
transform: scale(1.1);
}
.services__card:hover .services__icon--rehabilitation svg {
animation: svc-assemble 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
filter: drop-shadow(0 0 8px rgba(211, 187, 153, 0.35));
}
/* Gold fills glow brighter */
.services__card:hover .services__icon--rehabilitation svg path[fill="#D3BB99"],
.services__card:hover .services__icon--rehabilitation svg path[fill="#d3bb99"] {
fill-opacity: 0.7;
}
/* ---------- Scroll reveal (IntersectionObserver driven) ---------- */
.services__card {
opacity: 0;
transform: translateY(30px);
}
.services__card.is-visible {
opacity: 1;
transform: translateY(0);
transition: opacity 0.6s ease, transform 0.6s ease;
}
/* Staggered delay per card */
.services__card:nth-child(1).is-visible { transition-delay: 0s; }
.services__card:nth-child(2).is-visible { transition-delay: 0.1s; }
.services__card:nth-child(3).is-visible { transition-delay: 0.2s; }
.services__card:nth-child(4).is-visible { transition-delay: 0.3s; }
.services__card:nth-child(5).is-visible { transition-delay: 0.4s; }
.services__card:nth-child(6).is-visible { transition-delay: 0.5s; }
/* ==========================================================================
SERVICES — Tablet (≤1100px)
========================================================================== */
@media (max-width: 1100px) {
.services {
padding: 60px 0 80px;
}
.services__heading {
font-size: 36px;
line-height: 42px;
margin-bottom: 40px;
}
.services__grid {
gap: 20px;
}
.services__card {
width: calc(50% - 10px);
min-height: auto;
box-sizing: border-box;
}
.services__decor--right {
width: 160px;
right: -60px;
bottom: -40px;
}
.services .about-clinic__decor {
width: 160px;
left: -40px;
top: 20px;
}
}
/* ==========================================================================
SERVICES — Mobile (≤767px)
========================================================================== */
@media (max-width: 767px) {
.services {
padding: 48px 0 64px;
}
.services__heading {
font-size: 26px;
line-height: 32px;
margin-bottom: 32px;
}
.services__card {
width: 100%;
min-height: auto;
padding: 24px;
box-sizing: border-box;
}
.services__title {
font-size: 16px;
}
a.services__tag,
span.services__tag {
font-size: 14px;
}
.services__decor,
.services .about-clinic__decor {
display: none;
}
}
/* ==========================================================================
QUIZ SECTION (Калькулятор стоимости)
========================================================================== */
.quiz {
position: relative;
padding: 80px 0 100px;
overflow: hidden;
}
/* Decorative leaf — top-left */
.quiz__decor {
position: absolute;
left: -24px;
width: 140px;
pointer-events: none;
transform: scaleX(-1) rotate(197deg);
}
.quiz__decor svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.quiz__decor path {
transform-box: fill-box;
transform-origin: center center;
transform: scale(0);
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.quiz__decor.is-visible path {
transform: scale(1);
}
/* ---------- Heading ---------- */
.quiz__heading {
font-size: 48px;
font-weight: 200;
line-height: 56px;
color: var(--pm-dark);
text-align: center;
margin: 0 auto 60px;
max-width: 840px;
padding: 0 30px;
}
.quiz__heading strong {
font-weight: 500;
}
/* ---------- Inner layout: main + sidebar ---------- */
.quiz__inner {
display: flex;
gap: 24px;
max-width: 1415px;
margin: 0 auto;
padding: 0 30px;
align-items: stretch;
}
/* ---------- Main quiz area ---------- */
.quiz__main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
/* ---------- Step container ---------- */
.quiz__step {
display: none;
flex-direction: column;
flex: 1;
}
.quiz__step.is-active {
display: flex;
}
/* ---------- Card stagger reveal ---------- */
.quiz__step.is-active .quiz__option {
animation: quizCardIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes quizCardIn {
from { opacity: 0; transform: translateY(20px); }
}
/* ---------- Question header ---------- */
.quiz__question-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 32px;
}
.quiz__badge {
position: relative;
width: 100px;
height: 100px;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Dashed circle border */
.quiz__badge::before {
content: '';
position: absolute;
inset: 0;
border: 2px dashed rgba(154, 125, 83, 0.08);
border-radius: 50%;
}
/* Gold arc indicator — fills proportionally via --badge-arc */
.quiz__badge::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: conic-gradient(
from -90deg,
var(--pm-gold) var(--badge-arc, 72deg),
transparent var(--badge-arc, 72deg)
);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
}
.quiz__badge-num {
font-size: 32px;
font-weight: 200;
line-height: 1;
color: var(--pm-gold);
}
.quiz__badge-total {
position: absolute;
top: 30px;
right: 18px;
font-size: 14px;
font-weight: 200;
color: rgba(154, 125, 83, 0.5);
}
.quiz__badge-label {
font-size: 16px;
font-weight: 200;
line-height: 1;
color: var(--pm-gold);
margin-top: 2px;
}
.quiz__title {
font-size: 32px;
font-weight: 200;
line-height: 1;
color: var(--pm-dark);
margin: 0;
}
/* ---------- Options grid ---------- */
.quiz__options {
display: flex;
gap: 24px;
flex: 1;
}
.quiz__options--gender .quiz__option {
flex: 1;
}
/* ---------- Single option (label wrapping radio) ---------- */
.quiz__option {
display: flex;
flex-direction: column;
cursor: pointer;
position: relative;
}
.quiz__radio {
position: absolute;
opacity: 0;
pointer-events: none;
}
/* ---------- Option image ---------- */
.quiz__option-image {
position: relative;
width: 100%;
aspect-ratio: 497 / 320;
overflow: hidden;
border-radius: 2px;
}
.quiz__option-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.quiz__option:hover .quiz__option-image img {
transform: scale(1.03);
}
/* Selection border overlay */
.quiz__option-border {
position: absolute;
inset: 0;
border: 8px solid transparent;
transition: border-color 0.3s ease;
pointer-events: none;
}
.quiz__radio:checked ~ .quiz__option-image .quiz__option-border {
border-color: var(--pm-green);
}
/* ---------- Age options: 5-column layout ---------- */
.quiz__options--age {
gap: 32px;
}
.quiz__options--age .quiz__option {
flex: 1;
min-width: 0;
}
/* Portrait aspect for age photos */
.quiz__option-image--portrait {
aspect-ratio: 186 / 320;
}
/* Grayscale on unselected age options */
.quiz__options--age .quiz__option-image img {
filter: grayscale(1);
transition: transform 0.4s ease, filter 0.4s ease;
}
.quiz__options--age .quiz__radio:checked ~ .quiz__option-image img {
filter: grayscale(0);
}
/* ---------- Concern options: 4-col wrap, scrollable ---------- */
.quiz__options-wrap {
position: relative;
flex: 1;
min-height: 0;
}
.quiz__options--concern {
flex-wrap: wrap;
max-height: 420px;
overflow-y: auto;
padding-right: 12px;
scrollbar-width: thin;
scrollbar-color: #88bcb3 rgba(158, 166, 179, 0.12);
}
.quiz__options--concern::-webkit-scrollbar {
width: 4px;
}
.quiz__options--concern::-webkit-scrollbar-track {
background: rgba(158, 166, 179, 0.12);
}
.quiz__options--concern::-webkit-scrollbar-thumb {
background: #88bcb3;
border-radius: 2px;
}
.quiz__options--concern .quiz__option {
width: calc(25% - 18px);
}
/* Concern image container */
.quiz__option-image--blob {
aspect-ratio: 240 / 99;
border-radius: 2px;
}
/* Fog gradient at bottom of scrollable area */
.quiz__options-fog {
position: absolute;
bottom: 0;
left: 0;
right: 16px;
height: 75px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--pm-white));
pointer-events: none;
z-index: 1;
transition: opacity 0.3s;
}
.quiz__options-fog.is-hidden {
opacity: 0;
}
/* ---------- Option footer (label + check) ---------- */
.quiz__option-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 4px 10px;
}
.quiz__option-label {
font-size: 20px;
font-weight: 200;
line-height: 32px;
color: var(--pm-dark);
}
/* ---------- Check circle ---------- */
.quiz__check {
width: 32px;
height: 32px;
border-radius: 50%;
position: relative;
background: #9ea6b3;
box-shadow: 0 0 0 9px rgba(158, 166, 179, 0.2);
transition: background 0.3s ease, box-shadow 0.3s ease;
}
.quiz__check::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 8px;
border-left: 2px solid var(--pm-white);
border-bottom: 2px solid var(--pm-white);
transform: translate(-50%, -60%) rotate(-45deg);
opacity: 0.7;
transition: opacity 0.3s ease;
}
.quiz__radio:checked ~ .quiz__option-footer .quiz__check {
background: var(--pm-green);
box-shadow: 0 0 0 9px rgba(0, 93, 77, 0.12);
}
.quiz__radio:checked ~ .quiz__option-footer .quiz__check::after {
opacity: 1;
}
/* ---------- Bottom bar ---------- */
.quiz__bar {
display: flex;
align-items: center;
gap: 24px;
padding-top: 24px;
margin-top: auto;
}
.quiz__bar[hidden] {
display: none;
}
.quiz__bar-line {
flex: 1;
height: 1px;
background: #b8d7d2;
}
.quiz__hint {
font-size: 16px;
font-weight: 200;
line-height: 20px;
color: var(--pm-gray);
flex-shrink: 0;
}
.quiz__hint-bold {
font-weight: 500;
}
.quiz__back {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
height: 58px;
padding: 0 48px;
background: transparent;
color: var(--pm-green);
border: 1px solid var(--pm-green);
border-radius: 30px;
font-size: 16px;
font-weight: 200;
text-transform: uppercase;
cursor: pointer;
transition: background 0.3s ease, color 0.3s ease;
}
.quiz__back:hover {
background: var(--pm-green);
color: var(--pm-white);
}
.quiz__back[hidden] {
display: none;
}
.quiz__next {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
height: 58px;
padding: 0 48px;
background: var(--pm-green);
color: var(--pm-white);
border: none;
border-radius: 30px;
font-size: 16px;
font-weight: 200;
text-transform: uppercase;
cursor: pointer;
transition: background 0.3s ease, opacity 0.3s ease;
}
.quiz__next:hover {
background: var(--pm-green-dark);
}
.quiz__next:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.quiz__next[hidden] {
display: none;
}
/* ---------- Step 4: Contact form ---------- */
.quiz__form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.quiz__form .quiz__privacy {
grid-column: 1 / -1;
}
.quiz__input {
box-sizing: border-box;
width: 100%;
height: 78px;
padding: 0 32px;
background: rgba(211, 187, 153, 0.09);
border: none;
border-bottom: 1px solid var(--pm-gold-light);
border-radius: 60px;
font-size: 20px;
font-weight: 200;
color: var(--pm-dark);
outline: none;
transition: border-color 0.3s;
}
.quiz__input::placeholder {
color: var(--pm-divider);
}
.quiz__input:focus {
border-color: var(--pm-gold);
}
.quiz__field--file {
position: relative;
}
.quiz__file-input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
z-index: 2;
}
.quiz__file-label {
box-sizing: border-box;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
height: 78px;
padding: 0 32px;
background: rgba(211, 187, 153, 0.09);
border-bottom: 1px solid var(--pm-gold-light);
border-radius: 50px;
cursor: pointer;
transition: border-color 0.3s;
}
.quiz__file-label:hover {
border-color: var(--pm-gold);
}
.quiz__file-text {
flex: 1;
font-size: 20px;
font-weight: 200;
color: var(--pm-divider);
}
.quiz__file-label.has-file .quiz__file-text {
color: var(--pm-dark);
}
.quiz__file-btn {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background: var(--pm-gold);
border-radius: 50%;
color: var(--pm-white);
flex-shrink: 0;
}
.quiz__file-btn svg {
width: 24px;
height: 26px;
}
.quiz__submit {
display: block;
box-sizing: border-box;
width: 100%;
height: 78px;
padding: 0 32px;
background: var(--pm-green);
color: var(--pm-white);
border: none;
border-radius: 60px;
font-size: 18px;
font-weight: 200;
text-transform: uppercase;
cursor: pointer;
transition: background 0.3s;
}
.quiz__submit:hover {
background: var(--pm-green-dark);
}
.quiz__privacy {
font-size: 12px;
font-weight: 200;
line-height: 18px;
color: #4b4036;
max-width: 456px;
}
.quiz__privacy a {
color: inherit;
text-decoration: underline;
}
/* ---------- Step 5: Thank you ---------- */
.quiz__thanks-wrap {
position: relative;
}
.quiz__thanks {
display: flex;
flex-direction: column;
gap: 16px;
width: 55%;
padding: 48px 72px;
background: rgba(211, 187, 153, 0.11);
backdrop-filter: blur(6px);
}
.quiz__thanks-img {
position: absolute;
right: -150px;
top: 50%;
transform: translateY(-50%) rotate(4deg);
width: 850px;
max-width: 60%;
height: auto;
filter: drop-shadow(-2px -1px 3px rgba(34, 49, 46, 0.23));
}
.quiz__thanks-title {
font-size: 40px;
font-weight: 500;
line-height: 1.2;
color: var(--pm-gold);
margin: 0;
}
.quiz__thanks-text {
font-size: 36px;
font-weight: 200;
line-height: 1.45;
color: var(--pm-dark);
margin: 0;
}
.quiz__thanks-text strong {
font-weight: 500;
}
/* Confetti */
.quiz__confetti {
position: absolute;
top: 0;
pointer-events: none;
opacity: 0;
z-index: 10;
animation: confettiFall linear forwards;
}
@keyframes confettiFall {
0% {
opacity: 1;
transform: translateY(-20px) translateX(0) rotate(0deg) scale(1);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(350px) translateX(var(--confetti-x)) rotate(720deg) scale(0.4);
}
}
/* ---------- Consultation sidebar ---------- */
.quiz__sidebar {
width: 336px;
flex-shrink: 0;
}
.quiz__consult {
position: relative;
background: var(--pm-green);
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.quiz__consult-content {
padding: 32px 24px 24px;
}
.quiz__consult-title {
font-size: 27px;
font-weight: 200;
line-height: 30px;
letter-spacing: 0.81px;
color: var(--pm-white);
text-align: center;
margin: 0 0 16px;
}
.quiz__consult-title strong {
font-weight: 500;
}
.quiz__consult-text {
font-size: 18px;
font-weight: 200;
line-height: 26px;
letter-spacing: 0.54px;
color: var(--pm-white);
text-align: center;
margin: 0;
}
.quiz__consult-photo {
max-height: 400px;
flex: 1;
position: relative;
overflow: hidden;
}
.quiz__consult-decor {
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%) scaleX(-1);
width: 220px;
opacity: 0.25;
pointer-events: none;
z-index: 0;
}
.quiz__consult-decor svg {
display: block;
width: 100%;
height: auto;
}
.quiz__consult-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: top center;
position: relative;
z-index: 1;
filter: drop-shadow(17px 33px 48px rgba(30, 54, 50, 0.2));
}
.quiz__consult-btn {
display: flex;
align-items: center;
justify-content: center;
height: 58px;
background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(19px);
-webkit-backdrop-filter: blur(19px);
border-top: 1px solid #0b6556;
color: var(--pm-green);
font-size: 16px;
font-weight: 200;
text-transform: uppercase;
line-height: 28px;
text-decoration: none;
flex-shrink: 0;
transition: background 0.3s ease;
margin-top: -60px;
z-index: 1;
}
.quiz__consult-btn:hover {
background: rgba(255, 255, 255, 0.85);
}
/* ==========================================================================
QUIZ — Tablet (≤1100px)
========================================================================== */
@media (max-width: 1100px) {
.quiz {
padding: 60px 0 80px;
}
.quiz__heading {
font-size: 36px;
line-height: 42px;
margin-bottom: 40px;
}
.quiz__inner {
flex-direction: column;
}
.quiz__sidebar {
width: 100%;
}
.quiz__consult {
flex-direction: row;
height: auto;
}
.quiz__consult-content {
flex: 1;
padding: 24px;
}
.quiz__consult-title {
font-size: 22px;
line-height: 26px;
text-align: left;
}
.quiz__consult-text {
font-size: 16px;
line-height: 22px;
text-align: left;
}
.quiz__consult-photo {
width: 200px;
flex: none;
}
.quiz__consult-btn {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.quiz__decor {
width: 200px;
left: -40px;
}
.quiz__options--concern .quiz__option {
width: calc(33.333% - 16px);
}
.quiz__options--concern {
max-height: 380px;
}
}
/* ==========================================================================
QUIZ — Mobile (≤767px)
========================================================================== */
@media (max-width: 767px) {
.quiz {
padding: 48px 0 64px;
}
.quiz__heading {
font-size: 26px;
line-height: 32px;
margin-bottom: 32px;
}
.quiz__question-header {
gap: 12px;
margin-bottom: 24px;
}
.quiz__badge {
width: 72px;
height: 72px;
}
.quiz__badge-num {
font-size: 24px;
}
.quiz__badge-total {
top: 20px;
right: 10px;
font-size: 12px;
}
.quiz__badge-label {
font-size: 13px;
}
.quiz__title {
font-size: 24px;
}
.quiz__options {
flex-direction: column;
gap: 16px;
}
.quiz__options--age {
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
}
.quiz__options--age .quiz__option {
flex: 0 0 calc(50% - 6px);
}
.quiz__options--age .quiz__option:last-child {
flex: 0 0 calc(50% - 6px);
}
.quiz__option-image {
aspect-ratio: 3 / 2;
}
.quiz__option-image--portrait {
aspect-ratio: 186 / 280;
}
.quiz__option-label {
font-size: 18px;
}
.quiz__options--concern {
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
max-height: 340px;
}
.quiz__options--concern .quiz__option {
width: calc(50% - 6px);
}
.quiz__option-image--blob {
aspect-ratio: 240 / 99;
}
.quiz__bar {
flex-wrap: wrap;
gap: 16px;
}
.quiz__bar-line {
display: none;
}
.quiz__hint {
width: 100%;
font-size: 14px;
}
.quiz__back {
flex: 1;
height: 52px;
padding: 0 24px;
}
.quiz__next {
flex: 1;
height: 52px;
}
.quiz__consult {
flex-direction: column;
}
.quiz__consult-content {
padding: 24px 16px 16px;
}
.quiz__consult-photo {
width: 100%;
height: 250px;
}
.quiz__consult-btn {
position: static;
}
.quiz__consult-title {
font-size: 20px;
line-height: 24px;
text-align: center;
}
.quiz__consult-text {
font-size: 15px;
text-align: center;
}
.quiz__form {
grid-template-columns: 1fr;
max-width: 100%;
}
.quiz__form .quiz__privacy {
grid-column: 1;
}
.quiz__input,
.quiz__file-label,
.quiz__submit {
height: 60px;
font-size: 16px;
padding: 0 24px;
}
.quiz__thanks {
width: auto;
padding: 32px 24px;
text-align: center;
}
.quiz__thanks-img {
position: static;
transform: none;
width: 360px;
max-width: 100%;
margin: -46px auto 0;
}
.quiz__thanks-title {
font-size: 28px;
}
.quiz__thanks-text {
font-size: 18px;
}
.quiz__decor {
display: none;
}
}
/* ==========================================================================
ADVANTAGES (Преимущества) — Tabbed section
========================================================================== */
.advantages {
position: relative;
background: #fffbf5;
padding: 80px 0 100px;
overflow: hidden;
}
/* Decorative leaf — right side */
.advantages__decor {
position: absolute;
top: 40px;
right: -10px;
width: 113px;
height: auto;
pointer-events: none;
z-index: 1;
}
.advantages__decor svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.advantages__decor path {
transform-box: fill-box;
transform-origin: center center;
transform: scale(0);
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.advantages__decor.is-visible path {
transform: scale(1);
}
/* Two-column master grid: left=content, right=image (full height) */
.advantages__inner {
max-width: 1415px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: 1fr 580px;
gap: 40px;
align-items: start;
}
/* ---------- Left column ---------- */
.advantages__left {
min-width: 0;
position: relative;
}
/* ---------- Heading ---------- */
.advantages__heading {
font-size: 52px;
font-weight: 200;
line-height: 56px;
color: var(--pm-dark);
margin: 0 0 40px;
}
.advantages__heading strong {
font-weight: 500;
display: block;
}
/* ---------- Tab navigation ---------- */
.advantages__tabs {
display: flex;
gap: 42px;
align-items: center;
border-bottom: 1px solid rgba(154, 125, 83, 0.4);
padding-bottom: 24px;
margin-bottom: 48px;
}
.advantages__tab {
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
color: var(--pm-gray);
background: none;
border: none;
cursor: pointer;
padding: 0;
line-height: 32px;
display: flex;
align-items: center;
gap: 10px;
transition: color 0.3s ease;
}
.advantages__tab::before,
.advantages__tab::after {
content: '';
display: block;
width: 16px;
height: 2px;
background: transparent;
transition: background 0.3s ease, width 0.3s ease;
}
.advantages__tab:hover {
color: var(--pm-gold);
}
.advantages__tab.is-active {
color: var(--pm-gold);
}
.advantages__tab.is-active::before,
.advantages__tab.is-active::after {
background: var(--pm-gold);
}
/* Autoplay: dash fade to gray */
@keyframes advantages-dash-fade {
0% { background: var(--pm-gold); }
100% { background: var(--pm-gray); }
}
.advantages--autoplay .advantages__tab.is-active::before,
.advantages--autoplay .advantages__tab.is-active::after {
animation: advantages-dash-fade 3s linear forwards;
}
/* ---------- Panels ---------- */
.advantages__content {
display: grid;
}
.advantages__panel {
grid-area: 1 / 1;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
pointer-events: none;
}
.advantages__panel.is-active {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.advantages__title {
font-size: 32px;
line-height: 32px;
font-weight: 200;
color: var(--pm-gold);
text-transform: uppercase;
margin: 0 0 24px;
}
.advantages__desc {
font-size: 20px;
line-height: 28px;
letter-spacing: 0.4px;
font-weight: 200;
color: var(--pm-dark);
margin: 0 0 40px;
}
.advantages__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 280px;
height: 80px;
background: var(--pm-green);
color: var(--pm-white);
border: 1px solid var(--pm-green);
border-radius: 40px;
text-transform: uppercase;
font-size: 16px;
font-weight: 300;
text-decoration: none;
transition: background 0.3s ease;
}
.advantages__btn:hover {
background: var(--pm-green-dark);
}
/* ---------- Right column: image (full section height) ---------- */
.advantages__right {
position: relative;
align-self: stretch;
display: grid;
}
.advantages__image {
grid-area: 1 / 1;
position: relative;
height: 100%;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease;
pointer-events: none;
}
.advantages__image.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.advantages__image-border {
position: absolute;
top: 18px;
left: -8px;
width: 100%;
height: calc(100% - 10px);
border-left: 1px solid var(--pm-gold);
border-bottom: 1px solid var(--pm-gold);
background: rgba(154, 125, 83, 0.07);
pointer-events: none;
z-index: 0;
}
.advantages__img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* ==========================================================================
ADVANTAGES — Tablet (≤1100px)
========================================================================== */
@media (max-width: 1100px) {
.advantages {
padding: 60px 0 80px;
}
.advantages__inner {
grid-template-columns: 1fr;
gap: 32px;
}
.advantages__heading {
font-size: 36px;
line-height: 42px;
margin-bottom: 32px;
}
.advantages__tabs {
gap: 28px;
margin-bottom: 36px;
}
.advantages__right {
max-height: 450px;
overflow: hidden;
}
.advantages__image-border {
top: 14px;
left: -6px;
}
.advantages__img {
height: auto;
}
.advantages__title {
font-size: 26px;
line-height: 30px;
}
.advantages__desc {
font-size: 18px;
line-height: 26px;
margin-bottom: 32px;
}
}
/* ==========================================================================
ADVANTAGES — Mobile (≤767px)
========================================================================== */
@media (max-width: 767px) {
.advantages {
padding: 48px 0 64px;
}
.advantages__heading {
font-size: 28px;
line-height: 34px;
margin-bottom: 24px;
text-align: center;
}
.advantages__tabs {
gap: 20px;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 28px;
padding-bottom: 16px;
}
.advantages__tab {
font-size: 14px;
}
.advantages__title {
font-size: 22px;
line-height: 26px;
}
.advantages__desc {
font-size: 16px;
line-height: 24px;
margin-bottom: 24px;
}
.advantages__btn {
width: 100%;
height: 64px;
font-size: 14px;
}
.advantages__left {
display: contents;
}
.advantages__heading {
order: 1;
margin-bottom: 0px;
}
.advantages__tabs {
order: 2;
margin-bottom: 0px;
}
.advantages__right {
order: 3;
display: block;
}
.advantages__image {
height: 0;
overflow: hidden;
opacity: 0;
transition: opacity 0.4s ease;
}
.advantages__image.is-active {
height: auto;
overflow: visible;
opacity: 1;
}
.advantages__img {
height: auto;
}
.advantages__content {
order: 4;
display: block;
}
.advantages__panel {
display: none;
opacity: 1;
visibility: visible;
transform: none;
}
.advantages__panel.is-active {
display: block;
}
.advantages__image-border {
display: none;
}
.advantages__decor {
display: none;
}
}
/* ==========================================================================
FOOTER
========================================================================== */
/* Remove old WP block footer style */
.wp-block-group.has-secondary-background-color {
background-color: var(--pm-dark) !important;
}
/* ── Core layout ── */
.site-footer {
position: relative;
background-color: var(--pm-green);
overflow: hidden;
color: var(--pm-white);
}
/* ── Decorative element (top-right leaf) ── */
.site-footer__decor {
position: absolute;
top: 0;
right: -524px;
pointer-events: none;
transform: scaleY(-1) rotate(175deg);
transform-origin: center;
z-index: 0;
}
.site-footer__decor svg {
display: block;
width: 705px;
height: 603px;
}
.site-footer__decor path {
transform-box: fill-box;
transform-origin: center center;
transform: scale(0);
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.site-footer__decor.is-visible path {
transform: scale(1);
}
/* ── Body: 2-column layout (main + contacts panel) ── */
.site-footer__body {
position: relative;
z-index: 1;
display: flex;
max-width: 1415px;
margin: 0 auto;
padding: 0px 30px;
}
/* Left side: 3 columns stacked above bottom bar */
.site-footer__main {
flex: 1;
display: flex;
flex-direction: column;
}
.site-footer__cols {
display: flex;
align-items: flex-start;
flex: 1;
}
.site-footer__cols > * {
flex: 1 1 0;
}
/* ── Logo column ── */
.site-footer__logo-col {
padding-top: 50px;
padding-bottom: 40px;
padding-right: 20px;
}
.site-footer__logo {
display: inline-block;
text-decoration: none;
margin-bottom: 28px;
}
.site-footer__logo svg {
display: block;
width: 250px;
height: auto;
}
.site-footer__logo-caption {
display: block;
margin-top: 4px;
font-size: 16.856px;
font-weight: 300;
letter-spacing: 0.17px;
color: var(--pm-teal);
text-transform: uppercase;
}
.site-footer__license {
margin-bottom: 24px;
}
.site-footer__company {
font-size: 16px;
font-weight: 200;
line-height: 1.45;
color: var(--pm-white);
}
/* ── Section label (ГЛАВНАЯ / УСЛУГИ / КОЛЛ-ЦЕНТР …) ── */
.site-footer__section-label {
font-size: 14px;
font-weight: 300;
line-height: 1;
color: var(--pm-gold-light);
text-transform: uppercase;
letter-spacing: 0.03em;
margin: 0 0 16px;
}
/* Contacts column labels need less bottom margin */
.site-footer__contacts-col .site-footer__section-label {
margin-bottom: 8px;
}
.site-footer__license-text {
font-size: 16px;
font-weight: 200;
line-height: 1.45;
color: var(--pm-white);
}
/* ── Nav columns ── */
.site-footer__nav-col {
padding-top: 50px;
padding-bottom: 40px;
padding-left: 30px;
}
.site-footer__services-col {
padding-top: 50px;
padding-bottom: 40px;
padding-left: 10px;
}
.site-footer__nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.site-footer__nav-list a {
font-size: 16px;
font-weight: 200;
color: var(--pm-white);
text-decoration: none;
line-height: 1;
transition: color 0.2s;
}
.site-footer__nav-list a:hover {
color: var(--pm-gold-light);
}
/* ── Contacts column (right panel) ── */
.site-footer__contacts-col {
background: rgba(255, 255, 255, 0.07);
padding: 40px 50px 40px 36px;
display: flex;
flex-direction: column;
gap: 24px;
}
/* Call center */
.site-footer__callcenter-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 12px;
}
.site-footer__phone {
font-size: 18px;
font-weight: 200;
color: var(--pm-white);
text-decoration: none;
white-space: nowrap;
transition: color 0.2s;
}
.site-footer__phone:hover { color: var(--pm-gold-light); }
.site-footer__quick-btns {
display: flex;
gap: 8px;
}
/* Social icon buttons (shared for quick-btns and social list) */
.site-footer__social-btn {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50px;
background: rgba(251, 249, 246, 0.12);
text-decoration: none;
flex-shrink: 0;
transition: background 0.2s;
}
.site-footer__social-btn:hover {
background: rgba(251, 249, 246, 0.22);
}
.site-footer__social-btn img {
display: block;
width: 22px;
height: auto;
}
/* Callback button */
.site-footer__callback-btn {
display: block;
border: 1px solid var(--pm-gold-light);
background: rgba(251, 249, 246, 0.09);
color: var(--pm-white);
font-size: 14px;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 14px 40px;
border-radius: 50px;
text-decoration: none;
white-space: nowrap;
text-align: center;
transition: background 0.2s, border-color 0.2s;
}
.site-footer__callback-btn:hover {
background: rgba(251, 249, 246, 0.18);
}
/* Address block */
.site-footer__address-text {
font-size: 16px;
font-weight: 200;
line-height: 1.5;
color: var(--pm-white);
font-style: normal;
}
/* Hours block */
.site-footer__hours-text {
font-size: 16px;
font-weight: 200;
line-height: 1.5;
color: var(--pm-white);
}
/* Social list */
.site-footer__social-list {
display: flex;
gap: 8px;
}
/* ── Bottom bar (inside .site-footer__main, under 3 left columns) ── */
.site-footer__bottom {
display: flex;
align-items: center;
padding: 16px 0 20px;
border-top: 1px solid rgba(154, 125, 83, 0.27);
}
.site-footer__bottom > * {
flex: 1 1 0;
}
.site-footer__copyright {
font-size: 14px;
font-weight: 200;
color: var(--pm-teal);
white-space: nowrap;
margin: 0px;
}
.site-footer__privacy {
font-size: 14px;
font-weight: 200;
color: var(--pm-teal);
text-decoration: none;
transition: color 0.2s;
}
.site-footer__privacy:hover { color: var(--pm-white); }
.site-footer__design-credit {
padding-left: 50px;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 200;
color: var(--pm-teal);
}
.site-footer__design-credit a {
display: flex;
align-items: center;
}
.site-footer__design-credit img {
display: block;
}
/* ==========================================================================
FOOTER — Tablet (≤1100px)
========================================================================== */
@media (max-width: 1100px) {
.site-footer__body {
flex-direction: column;
padding: 0px;
}
/* 3 columns in a row, same as desktop */
.site-footer__cols {
display: flex;
align-items: flex-start;
padding: 0px 30px;
}
.site-footer__logo-col {
padding: 40px 24px 32px;
}
.site-footer__logo svg {
width: 200px;
}
.site-footer__nav-col,
.site-footer__services-col {
padding: 40px 24px;
}
/* Nav lists visible on tablet */
.site-footer__nav-list {
display: flex;
flex-direction: column;
gap: 12px;
padding-bottom: 24px;
}
.site-footer__nav-col .site-footer__section-label,
.site-footer__services-col .site-footer__section-label {
margin: 0;
padding: 16px 0 12px;
font-size: 16px;
}
/* Contacts panel: horizontal bar */
.site-footer__contacts-col {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 24px;
gap: 16px;
}
/* Hide address, hours, socials on tablet */
.site-footer__address-block,
.site-footer__hours-block,
.site-footer__socials-block {
display: none;
}
.site-footer__callcenter {
display: flex;
align-items: center;
gap: 16px;
flex: 1;
justify-content: space-evenly;
}
.site-footer__callcenter-row {
margin-bottom: 0;
}
.site-footer__callback-btn {
white-space: nowrap;
}
/* Bottom bar */
.site-footer__bottom {
padding: 20px 60px;
}
.site-footer__design-credit {
padding-left: 20px;
}
}
/* ==========================================================================
FOOTER — Mobile (≤767px)
========================================================================== */
@media (max-width: 767px) {
.site-footer__body {
flex-direction: column;
}
/* Single column */
.site-footer__cols {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 0px;
}
/* Logo: centered, smaller */
.site-footer__logo-col {
text-align: center;
padding: 32px 16px 24px;
}
.site-footer__logo {
margin-bottom: 20px;
}
.site-footer__logo svg {
width: 160px;
margin: 0 auto;
}
.site-footer__license,
.site-footer__company {
text-align: left;
}
.site-footer__license-text,
.site-footer__company {
font-size: 14px;
}
/* Nav cols: full-width accordion rows */
.site-footer__nav-col,
.site-footer__services-col {
padding: 0 16px;
border-top: 1px solid rgba(154, 125, 83, 0.27);
}
.site-footer__nav-col {
padding-top: 0;
border-bottom: none;
}
.site-footer__services-col {
border-bottom: none;
}
.site-footer__nav-list {
display: flex;
flex-direction: column;
gap: 10px;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
padding-bottom: 0;
}
.site-footer__nav-list.is-open {
max-height: 600px;
opacity: 1;
padding-bottom: 20px;
}
.site-footer__nav-col .site-footer__section-label,
.site-footer__services-col .site-footer__section-label {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
padding: 12px 0;
cursor: pointer;
font-size: 14px;
user-select: none;
}
.site-footer__nav-col .site-footer__section-label::after,
.site-footer__services-col .site-footer__section-label::after {
content: '';
display: inline-block;
width: 8px;
height: 12px;
background: url('../images/polygon-strelka.svg') no-repeat center / contain;
transition: transform 0.3s;
}
.site-footer__section-label.is-open::after {
transform: rotate(90deg);
}
/* Contacts panel: vertical stack */
.site-footer__contacts-col {
flex-direction: column;
padding: 24px 16px;
gap: 16px;
}
/* Hide address, hours, socials on mobile */
.site-footer__address-block,
.site-footer__hours-block,
.site-footer__socials-block {
display: none;
}
.site-footer__callcenter {
width: 100%;
flex-direction: row;
flex-wrap: wrap;
}
.site-footer__callcenter-row {
margin-bottom: 12px;
}
.site-footer__callback-btn {
width: 100%;
}
.site-footer__phone {
font-size: 18px;
}
/* Bottom bar: vertical stack */
.site-footer__bottom {
flex-direction: row;
align-items: flex-start;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
padding: 20px;
}
.site-footer__bottom > * {
flex: none;
}
.site-footer__design-credit {
padding-left: 0;
}
/* Decorative element: adjust or hide */
.site-footer__decor {
display: none;
}
}
/* ==========================================================================
06 WORKS — before/after gallery with tabs
========================================================================== */
.works {
position: relative;
padding: 100px 0 80px;
background: var(--pm-white);
overflow: hidden;
}
.works__decor {
position: absolute;
top: 30px;
left: 30px;
width: 455px;
height: auto;
pointer-events: none;
z-index: 0;
}
.works__decor svg {
width: 100%;
height: auto;
overflow: visible;
}
.works__decor path {
transform-box: fill-box;
transform-origin: center center;
transform: scale(0);
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.works__decor.is-visible path {
transform: scale(1);
}
.works__inner {
position: relative;
z-index: 1;
max-width: 1415px;
margin: 0 auto;
padding: 0 20px;
}
/* ---------- Heading ---------- */
.works__heading {
font-size: 48px;
font-weight: 200;
line-height: 56px;
color: var(--pm-dark);
text-align: center;
margin: 0 0 56px;
}
.works__heading strong {
font-weight: 500;
display: block;
}
.works__heading-dot {
font-weight: 500;
color: var(--pm-gold);
}
/* ---------- Tabs ---------- */
.works__tabs {
display: flex;
align-items: center;
justify-content: center;
gap: 52px;
margin-bottom: 56px;
min-height: 100px;
}
.works__tab {
display: flex;
align-items: center;
gap: 24px;
background: none;
border: none;
cursor: pointer;
padding: 0;
transition: opacity 0.3s;
}
.works__tab:hover {
opacity: 0.8;
}
/* Tab circle — holds ring SVG + photo image */
.works__tab-circle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
flex-shrink: 0;
transition: width 0.4s ease, height 0.4s ease;
}
.works__tab.is-active .works__tab-circle {
width: 100px;
height: 100px;
}
/* SVG ring — thin golden border */
.works__tab-ring {
position: absolute;
inset: -10%;
width: 120%;
height: 120%;
pointer-events: none;
}
.works__tab-ring-bg {
fill: none;
stroke: #F9F9F9;
stroke-width: 10;
opacity: 1;
stroke-dasharray: 100;
stroke-dashoffset: 0;
}
.works__tab-ring-progress {
fill: none;
stroke: #FBF3E8;
stroke-width: 10;
stroke-dasharray: 100;
stroke-dashoffset: 100;
stroke-linecap: round;
transform: rotate(-90deg);
transform-origin: center;
transition: stroke-dashoffset 0s;
}
/* Autoplay: clockwise fill animation on active tab ring */
@keyframes works-ring-fill {
from { stroke-dashoffset: 100; }
to { stroke-dashoffset: 0; }
}
/* Manual click — ring instantly filled */
.works__tab.is-active .works__tab-ring-progress {
stroke-dashoffset: 0;
}
/* Autoplay — animated fill overrides the above */
.works--autoplay .works__tab.is-active .works__tab-ring-progress {
animation: works-ring-fill 3s linear forwards;
}
/* Photo image inside circle — clipped to circle */
.works__tab-icon {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
position: relative;
z-index: 1;
}
/* WebP Express wrapper inside tab circle */
.works__tab-circle picture {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 50%;
position: relative;
z-index: 1;
}
/* Tab label */
.works__tab-label {
font-size: 18px;
font-weight: 200;
color: var(--pm-dark);
white-space: nowrap;
transition: font-size 0.3s, color 0.3s;
}
.works__tab.is-active .works__tab-label {
font-size: 20px;
color: var(--pm-gold);
}
/* ---------- Content (area groups stacked — no jumping) ---------- */
.works__content {
display: grid;
margin-bottom: 48px;
}
.works__group {
grid-area: 1 / 1;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
pointer-events: none;
}
.works__group.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.works__empty {
text-align: center;
color: var(--pm-gray);
font-size: 18px;
font-weight: 200;
padding: 60px 0;
}
/* ---------- Cards row ---------- */
.works__cards {
display: flex;
gap: 15px;
position: relative;
}
.works__card {
flex: 0 0 calc((100% - 30px) / 3);
opacity: 0;
transform: translateX(40px);
visibility: hidden;
position: absolute;
pointer-events: none;
}
.works__card.is-visible {
opacity: 1;
transform: translateX(0);
visibility: visible;
position: relative;
pointer-events: auto;
transition: opacity 0.45s ease, transform 0.45s ease;
}
/* Stagger card entrance */
.works__card.is-visible:nth-child(3n+2) { transition-delay: 0.08s; }
.works__card.is-visible:nth-child(3n+3) { transition-delay: 0.16s; }
/* ---------- Card images (before/after) ---------- */
.works__card-images {
display: flex;
gap: 1px;
margin-bottom: 14px;
}
.works__card-fig {
flex: 1;
position: relative;
margin: 0;
overflow: hidden;
aspect-ratio: 227 / 303;
}
.works__card-fig--before {
border-radius: 4px 0 0 4px;
}
.works__card-fig--after {
border-radius: 0 4px 4px 0;
}
.works__card-fig--combined {
flex: 1;
aspect-ratio: 455 / 303;
background-color: #e5e4e9;
}
.works__card-fig img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.works__card-label {
position: absolute;
bottom: 0;
left: 0;
padding: 10px 24px 12px;
font-size: 16px;
font-weight: 200;
color: var(--pm-dark);
background: rgba(255, 255, 255, 0.44);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* ---------- Card service name ---------- */
.works__card-service {
font-size: 16px;
font-weight: 300;
line-height: 26px;
color: var(--pm-gold);
text-transform: uppercase;
margin: 0 0 4px;
}
/* ---------- Card doctor block ---------- */
.works__card-doctor {
display: flex;
align-items: center;
gap: 12px;
}
.works__card-doctor-photo {
width: 52px;
height: 52px;
object-fit: cover;
flex-shrink: 0;
}
.works__card-doctor-info {
min-width: 0;
flex: 1;
}
.works__card-doctor-name {
font-size: 18px;
font-weight: 200;
line-height: 20px;
color: var(--pm-dark);
margin: 0 0 4px;
}
.works__card-doctor-bottom {
display: flex;
align-items: center;
gap: 12px;
justify-content: space-between;
}
.works__card-doctor-spec {
font-size: 14px;
font-weight: 200;
line-height: 20px;
color: var(--pm-gold);
margin: 0;
}
.works__card-more {
font-size: 12px;
font-weight: 300;
line-height: 26px;
color: var(--pm-gold);
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
transition: color 0.3s;
}
.works__card-more:hover {
color: var(--pm-green);
}
/* ---------- Mobile nav (hidden on desktop) ---------- */
.works__mobile-nav {
display: none;
}
/* ---------- Pagination ---------- */
.works__pagination {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid var(--pm-gold-light);
padding-top: 24px;
}
.works__pag-btn {
display: flex;
align-items: center;
gap: 8px;
background: none;
border: none;
cursor: pointer;
padding: 0;
color: var(--pm-gray);
font-size: 16px;
font-weight: 200;
transition: color 0.3s;
}
.works__pag-btn:hover {
color: var(--pm-gold);
}
.works__pag-btn img {
width: 32px;
height: 32px;
flex-shrink: 0;
}
.works__pag-btn:disabled {
opacity: 0.3;
cursor: default;
}
.works__pag-numbers {
display: flex;
align-items: center;
gap: 10px;
font-weight: 200;
}
.works__pag-num {
font-size: 16px;
color: var(--pm-gray);
cursor: pointer;
background: none;
border: none;
padding: 0;
line-height: 70px;
transition: color 0.3s, font-size 0.3s;
}
.works__pag-num.is-active {
font-size: 24px;
color: var(--pm-gold);
cursor: default;
}
.works__pag-sep {
width: 1px;
height: 17px;
background: var(--pm-gray);
transform: rotate(30deg);
flex-shrink: 0;
}
.works__pag-all {
font-size: 16px;
font-weight: 200;
color: var(--pm-gold);
text-decoration: underline;
text-underline-offset: 3px;
background: none;
border: none;
cursor: pointer;
padding: 0;
line-height: 70px;
}
/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
.works__heading {
font-size: 36px;
line-height: 44px;
}
.works__tabs {
gap: 32px;
min-height: 80px;
}
.works__tab-circle {
width: 50px;
height: 50px;
}
.works__tab.is-active .works__tab-circle {
width: 80px;
height: 80px;
}
.works__card {
flex: 0 0 calc((100% - 15px) / 2);
}
}
@media (max-width: 767px) {
.works {
padding: 60px 0 48px;
}
.works__heading {
font-size: 28px;
line-height: 34px;
margin-bottom: 32px;
}
.works__tabs {
gap: 18px;
flex-wrap: nowrap;
justify-content: center;
margin-bottom: 32px;
min-height: 100px;
}
.works__tab {
flex-direction: column;
gap: 8px;
}
.works__tab-label {
font-size: 13px;
}
.works__tab.is-active .works__tab-label {
font-size: 15px;
}
.works__tab-circle {
width: 58px;
height: 58px;
}
.works__tab.is-active .works__tab-circle {
width: 72px;
height: 72px;
}
.works__card {
flex: 0 0 100%;
}
.works__cards {
gap: 24px;
}
.works__content {
margin-bottom: 32px;
}
/* Hide desktop pagination, show mobile nav */
.works__pagination {
display: none;
}
.works__mobile-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
}
.works__mob-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
padding: 8px 0;
color: var(--pm-gold);
transition: opacity 0.2s;
}
.works__mob-arrow:hover {
opacity: 0.7;
}
.works__mob-arrow:disabled {
opacity: 0.3;
cursor: default;
}
.works__mob-arrow img {
width: 32px;
height: 32px;
}
.works__mob-all {
font-size: 16px;
font-weight: 200;
color: var(--pm-gold);
text-decoration: underline;
text-underline-offset: 3px;
background: none;
border: none;
cursor: pointer;
padding: 8px 0;
}
.works__card-doctor-name {
font-size: 16px;
}
}
/* ==========================================================================
07 DOCTORS — carousel with stacked cards
========================================================================== */
.doctors {
position: relative;
padding: 100px 0 80px;
background: #fffbf5;
overflow: hidden;
}
.doctors__decor {
position: absolute;
top: 50px;
right: -100px;
width: 590px;
height: auto;
pointer-events: none;
z-index: 0;
transform: rotate(-17deg);
}
.doctors__decor svg {
width: 100%;
height: auto;
overflow: visible;
}
.doctors__decor path {
transform-box: fill-box;
transform-origin: center center;
transform: scale(0);
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.doctors__decor.is-visible path {
transform: scale(1);
}
.doctors__inner {
position: relative;
z-index: 1;
max-width: 1415px;
margin: 0 auto;
padding: 0 20px;
}
/* ---------- Heading ---------- */
.doctors__heading {
font-size: 48px;
font-weight: 200;
line-height: 56px;
color: var(--pm-dark);
text-align: center;
margin: 0 0 76px;
}
.doctors__heading strong {
font-weight: 500;
}
.doctors__heading-dot {
font-weight: 500;
color: var(--pm-gold);
}
/* ---------- Body: info + cards ---------- */
.doctors__body {
display: flex;
align-items: flex-start;
gap: 60px;
margin-bottom: 48px;
min-height: 574px;
}
/* ---------- Info panel (left) ---------- */
.doctors__info {
flex: 0 0 424px;
padding-top: 60px;
}
.doctors__name {
font-size: 32px;
line-height: 42px;
color: var(--pm-dark);
margin: 0 0 16px;
}
.doctors__name-surname {
font-weight: 500;
display: block;
}
.doctors__name-rest {
font-weight: 200;
display: block;
}
.doctors__specialty {
font-size: 18px;
font-weight: 200;
line-height: 20px;
color: var(--pm-gold);
margin: 0 0 24px;
}
.doctors__desc {
font-size: 18px;
font-weight: 200;
line-height: 28px;
color: var(--pm-dark);
margin: 0 0 40px;
display: -webkit-box;
-webkit-line-clamp: 7;
-webkit-box-orient: vertical;
overflow: hidden;
height: calc(28px * 7);
}
/* ---------- Buttons ---------- */
.doctors__buttons {
display: flex;
gap: 16px;
}
.doctors__btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 62px;
padding: 0 32px;
border-radius: 30px;
font-size: 14px;
font-weight: 200;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.doctors__btn--primary {
background: var(--pm-green);
color: var(--pm-white);
border: 1px solid var(--pm-green);
}
.doctors__btn--primary:hover {
background: var(--pm-green-dark);
border-color: var(--pm-green-dark);
}
.doctors__btn--outline {
background: transparent;
color: var(--pm-green);
border: 1px solid var(--pm-green);
}
.doctors__btn--outline:hover {
background: var(--pm-green);
color: var(--pm-white);
}
/* ---------- Stacked cards (right) ---------- */
.doctors__cards {
flex: 1;
position: relative;
min-height: 574px;
}
.doctors__card {
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 4px;
overflow: hidden;
transition: left 0.5s ease, width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
opacity: 0;
pointer-events: none;
/* Explicit size prevents flash from natural image dimensions on transition */
width: 464px;
height: 574px;
}
.doctors__card-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.doctors__card-photo {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
display: block;
}
.doctors__card.is-next .doctors__card-photo,
.doctors__card.is-next-2 .doctors__card-photo {
object-position: center center;
}
/* Active card — front, largest */
.doctors__card.is-active {
left: 0;
width: 464px;
height: 574px;
z-index: 3;
opacity: 1;
pointer-events: auto;
box-shadow: 11px 27px 54px 0 rgba(68, 56, 39, 0.17);
}
.doctors__card.is-active .doctors__card-bg {
background: linear-gradient(141deg, #eaf0ef 0%, #74b4aa 100%);
}
/* Next card — behind right, medium */
.doctors__card.is-next {
left: 42%;
width: 382px;
height: 472px;
z-index: 2;
opacity: 1;
pointer-events: none;
}
.doctors__card.is-next .doctors__card-bg {
background: linear-gradient(141deg, #eaf0ef 0%, #b8d7d2 100%);
}
.doctors__card.is-next::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 251, 245, 0.46);
z-index: 2;
}
/* Third card — furthest back, smallest */
.doctors__card.is-next-2 {
left: 66%;
width: 307px;
height: 380px;
z-index: 1;
opacity: 1;
pointer-events: none;
}
.doctors__card.is-next-2 .doctors__card-bg {
background: linear-gradient(141deg, #eaf0ef 0%, #b8d7d2 100%);
}
.doctors__card.is-next-2::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 251, 245, 0.72);
z-index: 2;
}
/* ---------- Play-video button (rotating text) ---------- */
.doctors__play {
position: absolute;
top: 24px;
left: 24px;
width: 102px;
height: 102px;
z-index: 5;
display: block;
background: none;
border: none;
padding: 0;
cursor: pointer;
}
/* Hide on non-active cards */
.doctors__card:not(.is-active) .doctors__play {
opacity: 0;
pointer-events: none;
}
.doctors__play-ring {
display: block;
width: 100%;
height: 100%;
animation: doctorPlaySpin 12s linear infinite;
}
.doctors__play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.25s ease;
}
.doctors__play:hover .doctors__play-btn {
background: var(--pm-green-dark);
}
.doctors__play-btn svg {
transform: rotate(90deg);
width: 16px;
height: 14px;
margin-top: -1px;
}
@keyframes doctorPlaySpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ---------- Video Lightbox ---------- */
.video-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.video-lightbox[hidden] {
display: none;
}
.video-lightbox.is-closing {
pointer-events: none;
}
.video-lightbox__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.85);
animation: lbFadeIn 0.3s ease;
}
.video-lightbox.is-closing .video-lightbox__backdrop {
animation: lbFadeOut 0.25s ease forwards;
}
.video-lightbox__wrap {
position: relative;
width: 90vw;
max-width: 960px;
animation: lbScaleIn 0.3s ease;
}
.video-lightbox.is-closing .video-lightbox__wrap {
animation: lbScaleOut 0.25s ease forwards;
}
.video-lightbox__video {
display: block;
width: 100%;
max-height: 80vh;
border-radius: 8px;
background: #000;
outline: none;
}
.video-lightbox__close {
position: absolute;
top: -44px;
right: 0;
background: none;
border: none;
cursor: pointer;
padding: 8px;
opacity: 0.7;
transition: opacity 0.2s;
}
.video-lightbox__close:hover {
opacity: 1;
}
@keyframes lbFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lbFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes lbScaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes lbScaleOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.92); } }
/* ---------- Pagination (reuse works pattern) ---------- */
.doctors__pagination {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid var(--pm-gold-light);
padding-top: 24px;
}
.doctors__pag-btn {
display: flex;
align-items: center;
gap: 8px;
background: none;
border: none;
cursor: pointer;
padding: 0;
color: var(--pm-gray);
font-size: 16px;
font-weight: 200;
transition: color 0.3s;
}
.doctors__pag-btn:hover {
color: var(--pm-gold);
}
.doctors__pag-btn img {
width: 32px;
height: 32px;
flex-shrink: 0;
}
.doctors__pag-btn:disabled {
opacity: 0.3;
cursor: default;
}
.doctors__pag-numbers {
display: flex;
align-items: center;
gap: 10px;
font-weight: 200;
}
.doctors__pag-num {
font-size: 16px;
color: var(--pm-gray);
cursor: pointer;
background: none;
border: none;
padding: 0;
line-height: 70px;
transition: color 0.3s, font-size 0.3s;
}
.doctors__pag-num.is-active {
font-size: 24px;
color: var(--pm-gold);
cursor: default;
}
.doctors__pag-sep {
width: 1px;
height: 17px;
background: var(--pm-gray);
transform: rotate(30deg);
flex-shrink: 0;
}
.doctors__pag-all {
font-size: 16px;
font-weight: 200;
color: var(--pm-gold);
text-decoration: underline;
text-underline-offset: 3px;
background: none;
border: none;
cursor: pointer;
padding: 0;
line-height: 70px;
}
/* ---------- Responsive ---------- */
/* Tablet — keep row layout, shrink sizes */
@media (max-width: 1100px) {
.doctors__heading {
font-size: 36px;
line-height: 44px;
margin-bottom: 48px;
}
.doctors__info {
flex: 0 0 340px;
padding-top: 40px;
}
.doctors__body {
gap: 40px;
min-height: 480px;
}
.doctors__cards {
min-height: 480px;
}
.doctors__card {
width: 380px;
height: 470px;
}
.doctors__card.is-active {
width: 380px;
height: 470px;
}
.doctors__card.is-next {
left: 42%;
width: 310px;
height: 384px;
}
.doctors__card.is-next-2 {
left: 66%;
width: 250px;
height: 310px;
}
}
/* Mobile — column layout */
@media (max-width: 767px) {
.doctors {
padding: 60px 0 48px;
}
.doctors__heading {
max-width: 320px;
margin: auto;
font-size: 28px;
line-height: 34px;
margin-bottom: 32px;
}
.doctors__body {
flex-direction: column;
align-items: center;
min-height: auto;
gap: 32px;
}
.doctors__info {
flex: none;
width: 100%;
max-width: 500px;
padding-top: 0;
text-align: center;
order: 2;
}
.doctors__buttons {
justify-content: center;
flex-direction: column;
align-items: center;
}
.doctors__btn {
width: 100%;
max-width: 280px;
}
.doctors__name {
font-size: 26px;
line-height: 34px;
}
.doctors__specialty {
font-size: 16px;
}
.doctors__desc {
font-size: 16px;
line-height: 24px;
-webkit-line-clamp: 5;
height: calc(24px * 5);
}
.doctors__cards {
flex: none;
width: 100%;
min-height: 400px;
order: 1;
}
.doctors__card {
width: 300px;
height: 372px;
}
.doctors__card.is-active {
width: 300px;
height: 372px;
}
.doctors__card.is-next {
left: 32%;
width: 240px;
height: 297px;
}
.doctors__card.is-next-2 {
left: 52%;
width: 190px;
height: 235px;
}
.doctors__play {
width: 76px;
height: 76px;
top: 16px;
left: 16px;
}
.doctors__play-btn {
width: 42px;
height: 42px;
}
.doctors__play-btn svg {
width: 12px;
height: 11px;
}
.doctors__pagination {
justify-content: space-between;
}
.doctors__pag-btn span {
display: none;
}
.doctors__pag-numbers .doctors__pag-num,
.doctors__pag-numbers .doctors__pag-sep {
display: none;
}
.doctors__pag-numbers {
gap: 0;
}
.doctors__pag-all {
font-size: 18px;
line-height: normal;
}
}
/* ==========================================================================
08 BOOKING — form + image CTA section (ФОС)
========================================================================== */
.booking {
position: relative;
padding: 50px 0;
background: var(--pm-white);
overflow: hidden;
}
/* ---------- Decorative BG leaves ---------- */
.booking__decor {
position: absolute;
top: 50%;
left: 43%;
transform: translate(-50%, -50%) rotate(88deg);
width: 770px;
height: auto;
pointer-events: none;
z-index: 0;
}
.booking__decor svg {
width: 100%;
height: auto;
overflow: visible;
}
.booking__decor path {
transform-box: fill-box;
transform-origin: center center;
transform: scale(0);
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.booking__decor.is-visible path {
transform: scale(1);
}
/* ---------- Inner container ---------- */
.booking__inner {
position: relative;
z-index: 1;
max-width: 1415px;
margin: 0 auto;
padding: 0 20px;
display: flex;
align-items: center;
gap: 100px;
}
/* ---------- Left: image ---------- */
.booking__image {
flex: 0 0 50%;
position: relative;
}
.booking__photo {
width: 100%;
height: 950px;
object-fit: cover;
}
/* ---------- Right: form + contacts ---------- */
.booking__content {
flex: 1;
max-width: 526px;
}
/* ---------- Heading ---------- */
.booking__heading {
font-size: 52px;
font-weight: 200;
line-height: 56px;
color: var(--pm-dark);
margin: 0 0 50px;
}
.booking__heading strong {
font-weight: 500;
}
/* ---------- Form ---------- */
.booking__fields {
display: flex;
flex-direction: column;
gap: 24px;
margin-bottom: 32px;
}
.booking__field {
box-sizing: border-box;
width: 100%;
height: 78px;
padding: 0 32px;
border: none;
border-bottom: 1px solid var(--pm-gold-light);
border-radius: 50px;
background: rgb(251 249 246);
font-size: 20px;
font-weight: 200;
color: var(--pm-dark);
outline: none;
transition: border-color 0.3s, box-shadow 0.3s;
}
.booking__field::placeholder {
color: var(--pm-divider);
}
.booking__field:focus {
border-color: var(--pm-gold);
box-shadow: 0 2px 0 0 var(--pm-gold);
}
/* ---------- Submit button ---------- */
.booking__submit {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 78px;
padding: 0 32px;
border: none;
border-radius: 40px;
background: var(--pm-green);
color: var(--pm-white);
font-size: 18px;
font-weight: 200;
text-transform: uppercase;
cursor: pointer;
transition: background-color 0.3s;
}
.booking__submit:hover {
background: var(--pm-green-dark);
}
/* ---------- Privacy policy ---------- */
.booking__policy {
margin: 24px 0 0;
font-size: 12px;
font-weight: 200;
line-height: 18px;
color: var(--pm-dark);
}
.booking__policy a {
color: var(--pm-gold);
text-decoration: underline;
text-underline-offset: 2px;
}
.booking__policy a:hover {
color: var(--pm-green);
}
/* ---------- Divider ---------- */
.booking__divider {
border: none;
border-top: 1px solid rgba(171, 161, 146, 0.4);
margin: 32px 0;
}
/* ---------- Contacts ---------- */
.booking__contacts {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
}
.booking__contacts-info {
display: flex;
flex-direction: column;
}
.booking__contacts-label {
font-size: 13px;
font-weight: 200;
color: var(--pm-dark);
margin-bottom: 4px;
}
.booking__phone {
font-size: 38px;
font-weight: 300;
line-height: 1.2;
color: var(--pm-gold);
text-decoration: none;
transition: color 0.3s;
}
.booking__phone:hover {
color: var(--pm-green);
}
/* ---------- WhatsApp button ---------- */
.booking__telegram {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 123px;
height: 54px;
padding: 0 24px;
border: 1px solid var(--pm-green);
border-radius: 40px;
font-size: 14px;
font-weight: 300;
text-transform: uppercase;
color: var(--pm-green);
text-decoration: none;
white-space: nowrap;
transition: background-color 0.3s, color 0.3s;
}
.booking__telegram:hover {
background: var(--pm-green);
color: var(--pm-white);
}
/* ---------- Booking: tablet ---------- */
@media (max-width: 1100px) {
.booking {
padding: 80px 0;
}
.booking__inner {
gap: 40px;
}
.booking__image {
flex: 0 0 400px;
}
.booking__photo {
height: 600px;
}
.booking__heading {
font-size: 40px;
line-height: 46px;
margin-bottom: 36px;
}
.booking__field {
height: 64px;
font-size: 18px;
}
.booking__submit {
height: 64px;
font-size: 16px;
}
.booking__phone {
font-size: 28px;
}
}
/* ---------- Booking: mobile ---------- */
@media (max-width: 767px) {
.booking {
padding: 60px 0;
}
.booking__inner {
flex-direction: column;
gap: 32px;
}
.booking__image {
flex: none;
width: 100%;
}
.booking__photo {
height: 400px;
border-radius: 8px;
}
.booking__content {
max-width: 100%;
padding-top: 0;
}
.booking__heading {
font-size: 32px;
line-height: 38px;
margin-bottom: 28px;
}
.booking__field {
height: 60px;
padding: 0 24px;
font-size: 16px;
border-radius: 40px;
}
.booking__submit {
height: 60px;
font-size: 16px;
border-radius: 30px;
}
.booking__contacts {
gap: 16px;
}
.booking__phone {
font-size: 24px;
}
.booking__decor {
display: none;
}
}
/* ==========================================================================
09 ACHIEVEMENTS — Ratings, Awards, Certificates
========================================================================== */
.achievements {
position: relative;
background: #fffbf5;
padding: 50px 0 80px;
overflow: hidden;
}
.achievements__inner {
gap: 20px;
display: flex;
flex-direction: column;
max-width: 1415px;
margin: 0 auto;
padding: 0 20px;
align-items: center;
}
/* ---------- Section Heading ---------- */
.achievements__heading {
font-size: 48px;
font-weight: 200;
line-height: 56px;
color: var(--pm-dark);
text-align: center;
max-width: 840px;
margin: 0px;
}
.achievements__heading strong {
font-weight: 500;
display: block;
}
/* ---------- Tab Navigation ---------- */
.achievements__tabs {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 0;
margin-bottom: 0;
position: relative;
}
.achievements__tab {
background: none;
border: none;
cursor: pointer;
padding: 0 40px;
text-align: center;
position: relative;
opacity: 0.4;
transition: opacity 0.3s ease;
}
.achievements__tab:hover,
.achievements__tab.is-active {
opacity: 1;
}
.achievements__tab-num {
display: block;
font-size: 32px;
font-weight: 200;
line-height: 32px;
text-transform: uppercase;
color: var(--pm-dark);
margin-bottom: 8px;
transition: color 0.3s ease;
}
.achievements__tab-label {
display: block;
font-size: 32px;
font-weight: 200;
line-height: 32px;
text-transform: uppercase;
color: var(--pm-dark);
transition: color 0.3s ease;
}
.achievements__tab:hover .achievements__tab-num,
.achievements__tab:hover .achievements__tab-label {
color: var(--pm-gold);
}
.achievements__tab.is-active .achievements__tab-num,
.achievements__tab.is-active .achievements__tab-label {
color: var(--pm-gold);
}
/* Autoplay progress underline (desktop only, under label) */
.achievements__tab-label {
position: relative;
}
/* Active tab — static full underline */
.achievements__tab.is-active .achievements__tab-label::after {
content: '';
position: absolute;
left: 0;
bottom: -4px;
height: 1.5px;
width: 100%;
background: var(--pm-gold);
}
/* Autoplay — animated fill overrides static */
@keyframes ach-tab-fill {
from { width: 0; }
to { width: 100%; }
}
.achievements--autoplay .achievements__tab.is-active .achievements__tab-label::after {
width: 0;
animation: ach-tab-fill 3s linear forwards;
}
/* ---------- Tab Panels (Grid stacking) ---------- */
.achievements__content {
display: grid;
min-height: 560px;
}
.achievements__panel {
grid-area: 1 / 1;
min-width: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
pointer-events: none;
}
.achievements__panel.is-active {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
/* ---------- Panel Header (subtitle + description) ---------- */
.achievements__panel-header {
text-align: center;
margin-bottom: 40px;
padding-top: 16px;
}
.achievements__panel-title {
display: none;
}
.achievements__panel-desc {
font-size: 18px;
font-weight: 200;
line-height: 28px;
color: var(--pm-dark);
max-width: 706px;
margin: 0 auto;
}
/* ---------- Ratings Panel ---------- */
.achievements__ratings {
position: relative;
}
.achievements__ratings-decor {
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
z-index: 0;
}
.achievements__star {
position: absolute;
opacity: 0.5;
height: auto;
}
/* Center large star — Figma: 393×382, above + through cards */
.achievements__star--1 {
width: 393px;
top: -26px;
left: 50%;
transform: translateX(-50%);
}
/* Medium star — right flank */
.achievements__star--2 {
width: 239px;
top: 124px;
right: 16%;
}
/* Medium star — left flank */
.achievements__star--3 {
width: 239px;
top: 124px;
left: 15%;
}
/* Small star — far right */
.achievements__star--4 {
width: 155px;
top: 205px;
right: 2%;
}
/* Small star — far left */
.achievements__star--5 {
width: 155px;
top: 205px;
left: 0;
}
/* Rating cards row */
.achievements__ratings-grid {
display: flex;
justify-content: center;
gap: 24px;
position: relative;
z-index: 1;
padding: 0px 20px;
}
/* Individual rating card */
.achievements__rating-card {
flex: 1 1 0;
max-width: 336px;
min-width: 0;
height: 166px;
padding: 36px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
background: rgba(255, 255, 255, 0.37);
border: 0.5px solid rgba(255, 255, 255, 0.58);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 23px 25px rgba(103, 75, 35, 0.17);
}
.achievements__card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.achievements__card-bottom {
display: flex;
align-items: center;
justify-content: space-between;
}
/* Text-based logos */
.achievements__card-logo {
font-size: 24px;
font-weight: 200;
color: var(--pm-gray);
line-height: 1;
letter-spacing: 0.5px;
}
.achievements__card-logo--2gis {
font-size: 28px;
font-weight: 300;
color: #9a9185;
}
.achievements__card-logo--prodoctorov {
font-size: 14px;
font-weight: 400;
line-height: 1.15;
letter-spacing: 2px;
color: #c4b99f;
text-transform: uppercase;
}
/* Image-based logos */
.achievements__card-logo-img {
height: 37px;
width: auto;
max-width: 135px;
}
/* Score */
.achievements__card-score {
display: flex;
align-items: baseline;
gap: 4px;
}
.achievements__card-value {
font-size: 48px;
font-weight: 200;
line-height: 1;
color: #103c35;
}
.achievements__card-max {
font-size: 16px;
font-weight: 200;
color: var(--pm-gold);
}
/* Reviews count */
.achievements__card-reviews {
font-size: 15px;
font-weight: 300;
color: var(--pm-gold);
letter-spacing: 0.45px;
}
/* Star rating bar */
.achievements__card-stars {
height: 29px;
width: auto;
}
/* ---------- Awards Panel ---------- */
.achievements__awards {
position: relative;
min-height: 380px;
}
.achievements__awards-decor {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
display: flex;
align-items: center;
justify-content: center;
}
.achievements__awards-branch {
width: 680px;
opacity: 0.3;
}
.achievements__awards-track {
position: relative;
z-index: 1;
overflow-x: clip;
overflow-y: visible;
max-width: 1300px;
margin: 0 auto;
padding-top: 60px;
}
.achievements__awards-slider {
display: flex;
align-items: flex-end;
gap: 20px;
will-change: transform;
}
.achievements__awards-slider.is-animating {
transition: transform 0.5s ease;
}
.achievements__award {
flex-shrink: 0;
width: 460px;
text-align: center;
transform-origin: bottom center;
}
.achievements__awards-slider.is-animating .achievements__award {
transition: transform 0.5s ease;
}
.achievements__award.is-center {
transform: scale(1.25);
z-index: 2;
}
.achievements__award-img {
display: block;
width: 100%;
height: auto;
position: relative;
left: 55px;
}
/* ---------- Certificates Panel ---------- */
.achievements__certs {
position: relative;
min-height: 380px;
}
.achievements__certs-decor {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.achievements__cert-star {
position: absolute;
opacity: 0.41;
}
.achievements__cert-star--1 {
width: 354px;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.achievements__cert-star--2 {
width: 277px;
bottom: 0;
left: 5%;
}
.achievements__cert-star--3 {
width: 277px;
bottom: 0;
right: 5%;
}
/* Viewport — hides overflow */
.achievements__certs-track {
overflow: hidden;
position: relative;
z-index: 1;
}
/* Sliding flex row — moved via JS translateX */
.achievements__certs-slider {
display: flex;
gap: 26px;
will-change: transform;
}
.achievements__certs-slider.is-animating {
transition: transform 0.5s ease;
}
.achievements__cert-card {
width: 254px;
height: 350px;
flex-shrink: 0;
padding: 12px;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.37);
border: 0.5px solid rgba(255, 255, 255, 0.58);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 23px 25px rgba(103, 75, 35, 0.17);
filter: grayscale(1);
opacity: 0.5;
}
.achievements__certs-slider.is-animating .achievements__cert-card {
transition: filter 0.5s ease, opacity 0.5s ease, transform 0.5s ease;
}
.achievements__cert-card.is-active {
filter: none;
opacity: 1;
transform: scale(1.04);
}
.achievements__cert-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ---------- Pagination ---------- */
.achievements__pagination {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 32px;
}
.achievements__pag-btn {
display: flex;
align-items: center;
gap: 8px;
background: none;
border: none;
cursor: pointer;
font-size: 16px;
font-weight: 200;
color: var(--pm-gray);
padding: 0;
transition: color 0.3s ease;
}
.achievements__pag-btn:hover {
color: var(--pm-gold);
}
.achievements__pag-btn img {
flex-shrink: 0;
width: 32px;
height: auto;
}
/* ---------- Bottom Hint ---------- */
.achievements__hint {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 40px;
}
.achievements__hint svg {
width: 18px;
height: auto;
flex-shrink: 0;
}
.achievements__hint-text {
font-size: 14px;
font-weight: 200;
line-height: 20px;
color: var(--pm-gray);
margin: 0;
}
.achievements__hint-text strong {
font-weight: 500;
}
/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
.achievements__heading {
font-size: 36px;
line-height: 44px;
}
.achievements__tab-label,
.achievements__tab-num {
font-size: 24px;
line-height: 28px;
}
.achievements__ratings-grid {
flex-wrap: wrap;
gap: 16px;
}
.achievements__rating-card {
flex: 0 0 calc(50% - 8px);
max-width: calc(50% - 8px);
}
.achievements__awards-track {
max-width: 960px;
}
.achievements__awards-slider {
gap: 16px;
}
.achievements__award {
width: 340px;
}
.achievements__award.is-center {
transform: scale(1.2);
}
.achievements__certs-slider {
gap: 16px;
}
.achievements__cert-card {
width: 200px;
height: 280px;
}
}
@media (max-width: 767px) {
.achievements {
padding: 60px 0 40px;
}
.achievements__heading {
font-size: 28px;
line-height: 34px;
margin-bottom: 32px;
}
.achievements__tab {
padding: 0 16px;
}
.achievements__tab-label,
.achievements__tab-num {
font-size: 18px;
line-height: 22px;
}
.achievements__content {
min-height: auto;
}
.achievements__awards {
min-height: auto;
}
.achievements__panel:not(.is-active) {
max-height: 0;
}
.achievements__panel-desc {
font-size: 15px;
line-height: 24px;
}
.achievements__ratings-grid {
flex-direction: column;
align-items: center;
padding: 0px 40px 40px 40px;
}
.achievements__rating-card {
width: 100%;
max-width: 336px;
}
.achievements__awards-track {
max-width: 740px;
}
.achievements__awards-slider {
gap: 0;
}
.achievements__award {
width: 280px;
}
.achievements__award.is-center {
transform: scale(1.15);
}
.achievements__certs {
min-height: auto;
padding-bottom: 16px;
}
.achievements__certs-slider {
gap: 12px;
}
.achievements__cert-card {
width: 180px;
height: auto;
box-shadow: 0 10px 15px rgba(103, 75, 35, 0.12);
}
.achievements__star {
display: none;
}
.achievements__cert-star {
display: none;
}
.achievements__awards-branch {
display: none;
}
.achievements__hint {
margin-top: 24px;
}
}
/* ==========================================================================
10. REVIEWS
========================================================================== */
.reviews {
padding: 100px 0 80px;
}
.reviews__inner {
max-width: 1415px;
margin: 0 auto;
padding: 0 20px;
}
/* ── Heading ── */
.reviews__heading {
text-align: center;
font-size: 52px;
font-weight: 200;
line-height: 1.15;
color: var(--pm-dark);
max-width: 840px;
margin: 0 auto 48px;
}
.reviews__heading strong {
font-weight: 500;
}
/* ── Tabs ── */
.reviews__tabs {
display: flex;
justify-content: center;
gap: 72px;
border-bottom: 1px solid var(--pm-gold);
padding-bottom: 24px;
margin-bottom: 48px;
}
.reviews__tab {
display: flex;
align-items: center;
gap: 12px;
background: none;
border: none;
cursor: pointer;
padding: 0;
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--pm-gray);
transition: color 0.3s;
}
.reviews__tab.is-active {
color: var(--pm-gold);
}
.reviews__tab-dash {
display: none;
width: 13px;
height: 1px;
background: var(--pm-gold);
}
.reviews__tab.is-active .reviews__tab-dash {
display: block;
}
/* ── Content panels (grid stacking) ── */
.reviews__content {
display: grid;
}
.reviews__panel {
grid-area: 1 / 1;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity 0.4s, visibility 0.4s, transform 0.4s;
}
.reviews__panel.is-active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.reviews__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
/* ── Card ── */
.reviews__card {
background: #fdfbf7;
padding: 48px 40px 40px;
display: none;
flex-direction: column;
position: relative;
overflow: hidden;
}
.reviews__card-decor {
position: absolute;
bottom: -50px;
right: 80px;
width: 200px;
height: auto;
pointer-events: none;
}
.reviews__card.is-visible {
display: flex;
opacity: 0;
animation: reviewCardIn 0.45s ease forwards;
}
@keyframes reviewCardIn {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.reviews__card-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
position: relative;
z-index: 1;
}
.reviews__card-stars {
width: 141px;
height: 29px;
}
.reviews__card-rating {
font-size: 64px;
font-weight: 300;
color: rgba(154, 125, 83, 0.2);
line-height: 1;
margin-left: auto;
}
.reviews__card-text-wrap {
flex: 1;
margin-bottom: 32px;
position: relative;
z-index: 1;
}
.reviews__card-text {
font-weight: 200;
font-size: 18px;
line-height: 28px;
color: var(--pm-dark);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.reviews__card-text-wrap.is-expanded .reviews__card-text {
-webkit-line-clamp: unset;
display: block;
}
.reviews__card-more {
display: none;
margin-top: 8px;
padding: 0;
border: none;
background: none;
font-size: 16px;
font-weight: 300;
color: var(--pm-gold);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.3s;
}
.reviews__card-more:hover {
color: var(--pm-green);
}
/* Show button only when text is actually clamped */
.reviews__card-more.is-needed {
display: inline-block;
}
.reviews__card-text-wrap.is-expanded .reviews__card-more {
display: none;
}
.reviews__card-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
position: relative;
z-index: 1;
}
.reviews__card-author {
display: flex;
align-items: center;
gap: 16px;
}
.reviews__card-avatar {
width: 84px;
height: 84px;
background: var(--pm-gold);
color: var(--pm-white);
font-size: 36px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.reviews__card-avatar-wrap {
position: relative;
width: 84px;
height: 84px;
flex-shrink: 0;
}
.reviews__card-avatar--photo {
object-fit: cover;
}
.reviews__card-avatar-overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: luminosity;
opacity: 0.45;
pointer-events: none;
}
.reviews__card-info {
display: flex;
flex-direction: column;
gap: 6px;
}
.reviews__card-name {
margin: 0;
font-size: 20px;
font-weight: 400;
text-transform: uppercase;
color: var(--pm-gold);
letter-spacing: 0.02em;
}
.reviews__card-platform {
height: 14px;
width: fit-content;
}
.reviews__card-date {
font-size: 14px;
color: var(--pm-gray);
}
/* ── Empty state ── */
.reviews__empty {
text-align: center;
padding: 80px 20px;
font-size: 18px;
color: var(--pm-gray);
}
/* ── Pagination ── */
.reviews__pagination {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20px;
padding-top: 32px;
border-top: 1px solid var(--pm-gold-light);
}
.reviews__pag-btn {
display: flex;
align-items: center;
gap: 10px;
background: none;
border: none;
cursor: pointer;
font-size: 16px;
color: var(--pm-dark);
padding: 0;
transition: opacity 0.3s;
}
.reviews__pag-btn:disabled {
opacity: 0.3;
cursor: default;
}
.reviews__pag-btn img {
width: 24px;
height: 24px;
}
.reviews__pag-numbers {
display: flex;
align-items: center;
gap: 16px;
}
.reviews__pag-num {
background: none;
border: none;
cursor: pointer;
font-size: 16px;
color: var(--pm-gray);
padding: 0;
transition: color 0.3s, font-size 0.3s;
}
.reviews__pag-num.is-active {
font-size: 24px;
font-weight: 500;
color: var(--pm-gold);
}
.reviews__pag-sep {
width: 1px;
height: 16px;
background: var(--pm-gold-light);
transform: rotate(30deg);
}
.reviews__pag-all {
font-size: 16px;
color: var(--pm-gold);
text-decoration: none;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
/* ── Responsive: tablet ── */
@media (max-width: 1100px) {
.reviews {
padding: 64px 0 56px;
}
.reviews__heading {
font-size: 36px;
margin-bottom: 36px;
}
.reviews__tabs {
gap: 40px;
padding-bottom: 20px;
margin-bottom: 36px;
}
.reviews__tab {
font-size: 14px;
}
.reviews__grid {
gap: 16px;
}
.reviews__card {
padding: 32px 28px 28px;
}
.reviews__card-rating {
font-size: 48px;
}
.reviews__card-text {
font-size: 16px;
line-height: 26px;
}
.reviews__card-avatar-wrap {
width: 64px;
height: 64px;
}
.reviews__card-avatar {
width: 64px;
height: 64px;
font-size: 28px;
}
.reviews__card-decor {
width: 200px;
}
.reviews__card-name {
font-size: 16px;
}
}
/* ── Responsive: mobile ── */
@media (max-width: 767px) {
.reviews {
padding: 48px 0 40px;
}
.reviews__heading {
font-size: 28px;
margin-bottom: 28px;
}
.reviews__tabs {
gap: 24px;
padding-bottom: 16px;
margin-bottom: 28px;
}
.reviews__tab {
font-size: 13px;
}
.reviews__content {
min-height: auto;
}
.reviews__grid {
grid-template-columns: 1fr;
}
.reviews__card {
padding: 28px 20px 24px;
}
.reviews__card-rating {
font-size: 40px;
}
.reviews__card-stars {
width: 110px;
height: 22px;
}
.reviews__card-text {
font-size: 15px;
line-height: 24px;
}
.reviews__card-text-wrap {
margin-bottom: 24px;
}
.reviews__card-footer {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.reviews__card-avatar-wrap {
width: 56px;
height: 56px;
}
.reviews__card-avatar {
width: 56px;
height: 56px;
font-size: 24px;
}
.reviews__card-decor {
width: 160px;
bottom: -30px;
right: -80px;
}
.reviews__card-name {
font-size: 15px;
}
.reviews__pagination {
margin-top: 32px;
padding-top: 24px;
}
.reviews__pag-btn span {
display: none;
}
.reviews__pag-numbers {
gap: 12px;
}
}
/* ==========================================================================
12 CONTACTS — Form, Info, Map (pre-footer)
========================================================================== */
.contacts {
background: #fffbf5;
padding: 80px 0 0;
overflow: hidden;
}
/* ---------- Heading ---------- */
.contacts__heading {
max-width: 1216px;
margin: 0 auto 56px;
padding: 0 20px;
font-size: 48px;
font-weight: 200;
line-height: 56px;
color: var(--pm-dark);
text-align: center;
}
.contacts__heading strong {
font-weight: 500;
}
/* ---------- Form ---------- */
.contacts__form {
max-width: 1415px;
margin: 0 auto 80px;
padding: 0 20px;
}
.contacts__form-row {
display: flex;
gap: 16px;
margin-bottom: 20px;
}
.contacts__field {
box-sizing: border-box;
flex: 1;
height: 78px;
padding: 0 32px;
border: none;
border-bottom: 1px solid var(--pm-gold-light);
border-radius: 50px;
background: rgba(255, 255, 255, 0.9);
font-size: 20px;
font-weight: 200;
color: var(--pm-dark);
outline: none;
transition: border-color 0.3s, box-shadow 0.3s;
}
.contacts__field::placeholder {
color: var(--pm-divider);
}
.contacts__field:focus {
border-color: var(--pm-gold);
box-shadow: 0 2px 0 0 var(--pm-gold);
}
/* Buttons */
.contacts__btn {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 336px;
height: 78px;
padding: 0 32px;
border-radius: 50px;
font-size: 18px;
font-weight: 200;
text-transform: uppercase;
cursor: pointer;
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.contacts__btn--primary {
border: none;
background: var(--pm-green);
color: var(--pm-white);
}
.contacts__btn--primary:hover {
background: var(--pm-green-dark);
}
.contacts__btn--outline {
border: 1px solid var(--pm-green);
background: #fffbf5;
color: var(--pm-green);
}
.contacts__btn--outline:hover {
background: var(--pm-green);
color: var(--pm-white);
}
/* Policy checkbox */
.contacts__policy {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
max-width: 1415px;
margin: 0 auto;
padding-left: 336px; /* offset to align under phone field */
}
.contacts__checkbox {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.contacts__checkmark {
flex-shrink: 0;
width: 18px;
height: 18px;
border: 1px solid var(--pm-gold);
background: var(--pm-white);
position: relative;
}
.contacts__checkbox:checked + .contacts__checkmark::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 10px;
height: 10px;
background: var(--pm-gold);
}
.contacts__policy-text {
font-size: 16px;
font-weight: 200;
color: var(--pm-divider);
letter-spacing: 0.16px;
}
.contacts__policy-text a {
color: var(--pm-gold);
text-decoration: underline;
text-underline-offset: 2px;
}
.contacts__policy-text a:hover {
color: var(--pm-green);
}
/* ---------- Body: info + map ---------- */
.contacts__body {
display: flex;
gap: 60px;
max-width: 1415px;
margin: 0 auto;
padding: 0 20px 80px;
}
/* Left: contact info */
.contacts__info {
flex: 0 0 380px;
display: flex;
flex-direction: column;
gap: 32px;
}
.contacts__block {
display: flex;
flex-direction: column;
}
.contacts__label {
font-size: 24px;
font-weight: 200;
line-height: 52px;
color: var(--pm-gold);
text-transform: uppercase;
margin: 0;
}
.contacts__value {
font-size: 20px;
font-weight: 200;
line-height: 32px;
color: var(--pm-dark);
font-style: normal;
margin: 0;
max-width: 464px;
}
/* Call center row */
.contacts__callcenter {
display: flex;
align-items: center;
gap: 24px;
}
.contacts__phone {
font-size: 20px;
font-weight: 200;
line-height: 52px;
color: var(--pm-dark);
text-decoration: none;
text-transform: uppercase;
transition: color 0.3s;
}
.contacts__phone:hover {
color: var(--pm-gold);
}
/* Messenger buttons */
.contacts__messengers {
display: flex;
gap: 12px;
}
.contacts__messenger-btn {
display: flex;
align-items: center;
justify-content: center;
width: 61px;
height: 61px;
border-radius: 50%;
background: var(--pm-white);
transition: background-color 0.3s;
}
.contacts__messenger-btn svg {
width: 30px;
height: 28px;
}
.contacts__messenger-btn svg {
--fill-0: var(--wp--preset--color--primary);
--stroke-0: var(--pm-dark);
}
.contacts__messenger-btn svg path {
transition: fill 0.3s;
}
.contacts__messenger-btn:hover {
background: var(--pm-green);
}
.contacts__messenger-btn:hover svg {
--fill-0: var(--pm-white);
--stroke-0: var(--pm-white);
}
/* Email link */
.contacts__email {
text-decoration: none;
transition: color 0.3s;
}
.contacts__email:hover {
color: var(--pm-gold);
}
/* Right: map */
.contacts__map {
flex: 1;
min-height: 460px;
position: relative;
overflow: hidden;
background: #f0ebe4;
}
.contacts__map::before {
content: 'Загрузка карты…';
position: absolute;
inset: 0;
z-index: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
letter-spacing: 0.02em;
color: var(--pm-muted);
background: linear-gradient(110deg, #f0ebe4 30%, #f7f2eb 50%, #f0ebe4 70%);
background-size: 200% 100%;
animation: map-shimmer 1.5s ease-in-out infinite;
}
.contacts__map.is-loaded::before {
display: none;
}
@keyframes map-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.contacts__map iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* ---------- Contacts: tablet ---------- */
@media (max-width: 1100px) {
.contacts {
padding: 60px 0 0;
}
.contacts__heading {
font-size: 36px;
line-height: 44px;
margin-bottom: 40px;
}
.contacts__form-row {
flex-wrap: wrap;
}
.contacts__field {
flex: 1 1 calc(50% - 8px);
min-width: 200px;
height: 64px;
font-size: 18px;
}
.contacts__btn {
flex: 1 1 calc(50% - 8px);
min-width: 200px;
height: 64px;
font-size: 16px;
}
.contacts__policy {
padding-left: 0;
}
.contacts__form {
margin-bottom: 56px;
}
.contacts__body {
gap: 32px;
}
.contacts__info {
flex: 0 0 320px;
gap: 24px;
}
.contacts__map {
min-height: 380px;
}
}
/* ---------- Contacts: mobile ---------- */
@media (max-width: 767px) {
.contacts {
padding: 48px 0;
}
.contacts__heading {
font-size: 28px;
line-height: 36px;
margin-bottom: 32px;
}
.contacts__form-row {
flex-direction: column;
}
.contacts__field {
flex: none;
width: 100%;
height: 60px;
padding: 0 24px;
font-size: 16px;
}
.contacts__btn {
flex: none;
width: 100%;
height: 60px;
font-size: 16px;
}
.contacts__policy {
padding-left: 0;
}
.contacts__policy-text {
font-size: 14px;
}
.contacts__form {
margin-bottom: 40px;
}
.contacts__body {
flex-direction: column;
}
.contacts__info {
flex: none;
width: 100%;
gap: 20px;
}
.contacts__body {
padding-bottom: 0;
}
.contacts__label {
font-size: 20px;
line-height: 40px;
}
.contacts__value {
font-size: 16px;
line-height: 26px;
}
.contacts__phone {
font-size: 18px;
line-height: 40px;
}
.contacts__callcenter {
gap: 16px;
}
.contacts__messenger-btn {
width: 48px;
height: 48px;
}
.contacts__messenger-btn svg {
width: 24px;
height: 22px;
}
.contacts__map {
min-height: 300px;
}
}
/* ==========================================================================
PAGE HERO — Archive / inner pages hero section
========================================================================== */
.page-hero {
position: relative;
background: var(--pm-beige);
overflow: hidden;
min-height: 330px;
display: flex;
align-items: flex-end;
padding-bottom: 48px;
}
/* Decorative text "ДОЛГОЛЕТИЕ" — right side */
.page-hero__text-decor {
position: absolute;
right: 24px;
bottom: 20px;
pointer-events: none;
width: 805px;
height: auto;
z-index: 0;
opacity: 0;
transform: translateX(60px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.page-hero__text-decor.is-visible {
opacity: 1;
transform: translateX(0);
}
.page-hero__text-decor svg {
width: 100%;
height: auto;
display: block;
}
/* Animated leaves — extend beyond edges */
.page-hero__leaf {
position: absolute;
width: 200px;
height: auto;
pointer-events: none;
z-index: 0;
}
.page-hero__leaf svg {
width: 100%;
height: auto;
overflow: visible;
}
.page-hero__leaf path {
transform-box: fill-box;
transform-origin: center center;
transform: scale(0);
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.page-hero__leaf.is-visible path {
transform: scale(1);
}
.page-hero__leaf--left {
left: -52px;
bottom: -20px;
}
.page-hero__leaf--right {
right: -52px;
top: -20px;
transform: scaleX(-1);
width: 120px;
}
.page-hero__inner {
position: relative;
z-index: 1;
max-width: 1415px;
width: 100%;
margin: 0 auto;
padding: 0 50px;
}
/* Breadcrumbs */
.page-hero__breadcrumbs {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
}
.page-hero__breadcrumbs a,
.page-hero__breadcrumbs span {
font-size: 14px;
line-height: 26px;
font-variation-settings: 'wght' 200, 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 712, 'wdth' 100;
color: var(--pm-gray);
text-decoration: none;
}
.page-hero__breadcrumbs a:hover {
color: var(--pm-gold);
}
.page-hero__breadcrumbs-sep {
display: block;
width: 24px;
height: 1px;
background: var(--pm-gray);
flex-shrink: 0;
}
/* Title */
.page-hero__title {
font-size: 64px;
line-height: 1;
text-transform: uppercase;
color: #2b2a2a;
margin: 0;
letter-spacing: 0;
}
.page-hero__title-bold {
display: block;
font-variation-settings: 'wght' 600, 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 712, 'wdth' 100;
}
.page-hero__title-light {
display: block;
font-variation-settings: 'wght' 300, 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 712, 'wdth' 100;
}
/* ── Header adaptation for pages with page-hero ── */
.post-type-archive-doctor .site-header .top-bar {
color: var(--pm-gray);
}
/* ── Responsive ── */
@media (max-width: 1100px) {
.page-hero {
min-height: 300px;
padding-bottom: 36px;
}
.page-hero__title {
font-size: 48px;
}
.page-hero__inner {
padding: 0 32px;
}
.page-hero__text-decor {
width: 500px;
}
.page-hero__leaf {
width: 140px;
}
}
@media (max-width: 767px) {
.page-hero {
min-height: 240px;
padding-bottom: 28px;
}
.page-hero__title {
font-size: 30px;
}
.page-hero__inner {
padding: 0 16px;
}
.page-hero__text-decor {
width: 320px;
}
.page-hero__leaf {
width: 100px;
}
.page-hero__leaf--left {
left: -40px;
}
.page-hero__leaf--right {
right: -40px;
}
}
@media (max-width: 440px) {
.page-hero {
min-height: 280px;
}
}
/* ═══════════════════════════════════════════════════
Doctors Archive — Filters
═══════════════════════════════════════════════════ */
.doc-filters {
padding: 32px var(--pm-space-lg) 0;
position: relative;
z-index: 10;
}
.doc-filters__inner {
max-width: 1415px;
margin: 0 auto;
display: flex;
gap: 20px;
}
.doc-filters__field {
flex: 1;
position: relative;
}
/* Shared pill shape */
.doc-filters__select,
.doc-filters__input-wrap {
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
height: 72px;
background: rgba(211, 187, 153, 0.09);
border: 1px solid var(--pm-gold-light);
border-radius: 40px;
padding: 0 8px 0 32px;
cursor: pointer;
position: relative;
}
.doc-filters__select {
font: inherit;
text-align: left;
}
/* Value text */
.doc-filters__value,
.doc-filters__input {
font-size: 18px;
font-variation-settings: 'wght' 200;
color: var(--pm-dark);
flex: 1;
min-width: 0;
}
.doc-filters__input {
border: none;
background: none;
outline: none;
height: 100%;
font: inherit;
font-size: 18px;
font-variation-settings: 'wght' 200;
}
.doc-filters__input::placeholder {
color: var(--pm-muted);
}
/* Right-side label */
.doc-filters__label {
font-size: 14px;
font-variation-settings: 'wght' 200;
text-transform: uppercase;
color: var(--pm-muted);
white-space: nowrap;
margin-right: 12px;
}
/* Icon button */
.doc-filters__icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
border: 1px solid var(--pm-gold-light);
background: none;
color: var(--pm-muted);
flex-shrink: 0;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.doc-filters__icon:hover {
background: var(--pm-gold-light);
color: var(--pm-dark);
}
.doc-filters__icon svg {
width: 20px;
height: auto;
}
/* Arrow rotated down for category dropdown */
.doc-filters__icon--arrow {
transform: rotate(90deg);
transition: background 0.2s, color 0.2s, transform 0.3s;
}
.doc-filters__select[aria-expanded="true"] .doc-filters__icon--arrow {
transform: rotate(-90deg);
}
/* Dropdown */
.doc-filters__dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
background: var(--pm-white);
border-radius: 24px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
padding: 12px 0;
list-style: none;
margin: 0;
z-index: 20;
}
.doc-filters__option {
padding: 12px 32px;
font-size: 16px;
font-variation-settings: 'wght' 300;
color: var(--pm-dark);
cursor: pointer;
transition: background 0.15s;
}
.doc-filters__option:hover {
background: var(--pm-beige);
}
.doc-filters__option.is-active {
color: var(--pm-gold);
font-variation-settings: 'wght' 400;
}
/* ═══════════════════════════════════════════════════
Doctors Archive — Alphabet Filter
═══════════════════════════════════════════════════ */
.doc-alpha {
padding: 28px var(--pm-space-lg) 0;
}
.doc-alpha__inner {
max-width: 1415px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 11px;
flex-wrap: wrap;
}
.doc-alpha__letter {
font-size: 14px;
font-variation-settings: 'wght' 200;
text-transform: uppercase;
color: var(--pm-dark);
background: none;
border: none;
padding: 4px 2px;
cursor: pointer;
line-height: 1;
transition: color 0.2s;
white-space: nowrap;
}
.doc-alpha__letter:hover {
color: var(--pm-gold);
}
.doc-alpha__letter.is-active {
color: var(--pm-gold);
font-variation-settings: 'wght' 400;
}
.doc-alpha__letter.is-disabled {
color: var(--pm-gold-light);
opacity: 0.4;
pointer-events: none;
}
/* ═══════════════════════════════════════════════════
Doctors Archive — Grid
═══════════════════════════════════════════════════ */
/* ═══ Doctors Grid (archive) ═══ */
.doc-grid {
padding: 48px var(--pm-space-lg) 80px;
}
.doc-grid__inner {
max-width: 1415px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.doc-grid__empty {
text-align: center;
font-size: 18px;
font-variation-settings: 'wght' 300;
color: var(--pm-muted);
padding: 60px var(--pm-space-lg);
max-width: 1415px;
margin: 0 auto;
}
/* ── Doctor card (Figma: 472×640) ── */
.doc-card {
display: flex;
flex-direction: column;
justify-content: space-between;
text-decoration: none;
color: inherit;
background: #f7fdfc;
overflow: hidden;
/* Scroll reveal */
opacity: 0;
transform: translateY(30px);
}
.doc-card.is-visible {
opacity: 1;
transform: translateY(0);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.doc-card.is-visible:hover {
transform: translateY(-4px);
}
.doc-card[hidden] {
display: none;
}
/* ── Text content — top of card ── */
.doc-card__info {
position: relative;
z-index: 2;
text-align: center;
padding: 40px 30px 16px;
flex-shrink: 0;
background: #f7fdfc;
}
.doc-card__name {
font-size: 24px;
font-variation-settings: 'wght' 400;
line-height: 1.17;
letter-spacing: 0.96px;
text-transform: uppercase;
margin: 0 auto 14px;
max-width: 300px;
}
.doc-card__specialty {
font-size: 18px;
font-variation-settings: 'wght' 200;
line-height: 1.33;
color: var(--pm-dark);
margin: 0 0 10px;
}
.doc-card__experience {
font-size: 12px;
font-variation-settings: 'wght' 400;
line-height: 1.5;
letter-spacing: 0.96px;
text-transform: uppercase;
color: #6aa79d;
margin: 0;
}
/* ── Photo — fills card bottom ── */
.doc-card__photo-wrap {
position: relative;
inset: unset;
flex: none;
height: 420px;
z-index: 1;
}
.doc-card__photo {
position: absolute;
bottom: 0;
right: 0;
left: unset;
transform: none;
width: 85%;
height: 100%;
object-fit: cover;
object-position: top center;
display: block;
}
/* ── Play-video button (bottom-left) ── */
.doc-card__play {
position: absolute;
bottom: 24px;
left: 24px;
width: 102px;
height: 102px;
z-index: 5;
display: block;
background: none;
border: none;
padding: 0;
cursor: pointer;
}
.doc-card__play-ring {
display: block;
width: 100%;
height: 100%;
animation: doctorPlaySpin 12s linear infinite;
}
.doc-card__play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.25s ease;
}
.doc-card:hover .doc-card__play-btn {
background: var(--pm-green-dark);
}
.doc-card__play-btn svg {
transform: rotate(90deg);
width: 16px;
height: 14px;
margin-top: -1px;
}
/* ═══ Responsive: Doctors Filters + Grid ═══ */
@media (max-width: 900px) {
.doc-filters {
padding-left: 16px;
padding-right: 16px;
}
.doc-filters__inner {
flex-wrap: wrap;
gap: 16px;
}
.doc-filters__field {
flex: 1 1 100%;
}
}
@media (max-width: 1100px) {
.doc-grid__inner {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.doc-card {
aspect-ratio: unset;
display: flex;
flex-direction: column;
}
.doc-card__info {
position: relative;
z-index: 2;
padding: 28px 20px 14px;
flex-shrink: 0;
background: #f7fdfc;
}
.doc-card__photo-wrap {
position: relative;
inset: unset;
flex: none;
height: 360px;
z-index: 1;
}
.doc-card__photo {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
.doc-card__play {
bottom: 20px;
left: 20px;
}
}
@media (max-width: 767px) {
.doc-filters__inner {
flex-direction: column;
gap: 20px;
}
.doc-filters {
padding: 24px 16px 0;
}
.doc-filters__select,
.doc-filters__input-wrap {
height: 56px;
padding: 0 6px 0 20px;
}
.doc-filters__label {
display: none;
}
.doc-filters__icon {
width: 44px;
height: 44px;
}
.doc-alpha {
padding: 20px 16px 0;
}
.doc-alpha__inner {
gap: 6px;
}
.doc-alpha__letter {
font-size: 12px;
padding: 3px 1px;
}
.doc-grid {
padding: 32px 16px 0px;
}
.doc-grid__inner {
grid-template-columns: repeat(2, 1fr);
}
.doc-grid__inner {
gap: 12px;
}
.doc-card {
aspect-ratio: unset;
display: flex;
flex-direction: column;
}
.doc-card__info {
position: relative;
z-index: 2;
padding: 16px 10px 12px;
flex-shrink: 0;
background: #f7fdfc;
}
.doc-card__photo-wrap {
position: relative;
inset: unset;
flex: none;
height: 210px;
z-index: 1;
}
.doc-card__photo {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
.doc-card__name {
font-size: 13px;
letter-spacing: 0.4px;
margin: 0 0 6px;
}
.doc-card__specialty {
font-size: 12px;
margin: 0 0 5px;
}
.doc-card__experience {
font-size: 10px;
}
.doc-card__play {
width: 72px;
height: 72px;
bottom: 12px;
left: 12px;
}
.doc-card__play-btn {
width: 40px;
height: 40px;
}
.doc-card__play-btn svg {
width: 12px;
height: 10px;
}
}
/* ==========================================================================
BANNER — Promotional banner (after Doctors)
========================================================================== */
.banner {
padding: 0 var(--pm-space-lg);
margin-top: var(--pm-space-3xl);
margin-bottom: var(--pm-space-3xl);
}
.banner__inner {
position: relative;
max-width: 1416px;
margin: 0 auto;
border-radius: 20px;
overflow: hidden;
background: radial-gradient(
ellipse at 83% -8%,
rgba(250, 241, 229, 1) 0%,
rgba(238, 223, 201, 1) 77%
);
display: grid;
grid-template-columns: 1fr 600px;
min-height: 460px;
}
/* Decorative leaves overlay — preserves SVG viewBox proportions */
.banner__leaves {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.banner__leaves img {
display: block;
width: 100%;
height: 100%;
}
/* Left content area */
.banner__content {
position: relative;
z-index: 2;
padding: 48px 40px 48px 106px;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
/* Titles */
.banner__titles {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.banner__title-top {
font-size: clamp(40px, 9vw, 128px);
line-height: 0.88;
font-weight: 200;
text-transform: uppercase;
color: var(--pm-gold);
}
.banner__title-bottom {
font-size: clamp(28px, 4vw, 58px);
line-height: 1.1;
font-weight: 600;
text-transform: uppercase;
color: var(--pm-gold);
letter-spacing: 1.74px;
}
/* Description */
.banner__desc {
font-size: 16px;
line-height: 1.5;
font-weight: 200;
color: var(--pm-dark);
max-width: 620px;
margin-bottom: 24px;
}
.banner__desc strong {
font-weight: 500;
}
/* Gold divider */
.banner__divider {
width: 100%;
max-width: 585px;
height: 1px;
background: linear-gradient(
to right,
rgba(154, 125, 83, 0),
var(--pm-gold) 54%,
rgba(154, 125, 83, 0)
);
margin-bottom: 24px;
}
/* Author block */
.banner__author {
display: flex;
align-items: center;
gap: 16px;
}
.banner__author-photo {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.banner__author-text {
font-size: 14px;
line-height: 1.57;
font-weight: 200;
color: var(--pm-dark);
max-width: 496px;
}
.banner__author-text strong {
font-weight: 400;
color: #624c2c;
}
/* Right discount block */
.banner__discount {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 28px;
gap: 16px;
border-radius: 20px;
}
.banner__discount-value {
margin-left: 50px;
display: flex;
align-items: flex-start;
justify-content: center;
}
.banner__discount-number {
width: 160px;
height: auto;
}
.banner__discount-number-text {
display: none;
}
.banner__discount-percent {
font-size: 44px;
line-height: 1;
font-weight: 500;
font-style: italic;
color: var(--pm-white);
margin-left: 2px;
margin-top: 8px;
}
.banner__discount-label {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-size: 18px;
line-height: 1.4;
font-weight: 200;
color: #e9d6bb;
padding: 10px 20px;
border-top: 1px solid rgba(211, 187, 153, 0.3);
border-bottom: 1px solid rgba(211, 187, 153, 0.3);
}
.banner__cta {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
padding: 0 32px;
height: 50px;
background: var(--pm-green);
border-radius: 30px;
color: var(--pm-white);
font-size: 13px;
font-weight: 200;
text-transform: uppercase;
letter-spacing: 0.5px;
text-decoration: none;
transition: background 0.3s ease;
white-space: nowrap;
}
.banner__cta:hover {
background: var(--pm-green-dark);
}
/* ── Banner responsive ── */
/* Tablet — tighter */
@media (max-width: 1200px) {
.banner__inner {
grid-template-columns: 1fr 380px;
}
.banner__content {
padding: 40px 24px 40px 48px;
}
.banner__discount-number {
width: 100px;
}
.banner__discount-percent {
font-size: 36px;
}
.banner__discount-label {
font-size: 16px;
}
}
/* Stack: column layout */
@media (max-width: 900px) {
.banner__inner {
grid-template-columns: 1fr;
min-height: auto;
}
.banner__desc {
max-width: initial;
}
.banner__leaves {
display: none;
}
.banner__leaves img {
object-fit: cover;
object-position: left center;
}
.banner__content {
padding: 36px 28px;
}
.banner__discount {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 16px 24px;
padding: 28px;
border-radius: 14px;
background: linear-gradient(
90deg,
rgba(104, 82, 50, 0) 0%,
rgba(104, 82, 50, 0.85) 15%,
#685232 50%,
rgba(104, 82, 50, 0.85) 85%,
rgba(104, 82, 50, 0) 100%
);
}
.banner__discount-value {
flex-shrink: 0;
}
.banner__discount-label {
border: none;
padding: 0;
text-align: left;
align-items: flex-start;
}
.banner__cta {
flex-basis: 100%;
max-width: 320px;
}
}
/* Mobile */
@media (max-width: 600px) {
.banner {
padding: 0 16px;
}
.banner__inner {
border-radius: 14px;
display: flex;
flex-direction: column;
}
/* Убираем контейнеры из потока — их дети становятся прямыми детьми inner */
.banner__content {
display: contents;
}
.banner__discount {
display: contents;
}
/* Порядок: заголовок → 30% → подпись → описание → кнопка → разделитель → автор */
.banner__titles {
order: 1;
padding: 28px 20px 0;
}
.banner__discount-value {
order: 2;
display: flex;
align-items: flex-start;
justify-content: center;
margin-left: 0;
padding: 0px;
gap: 10px;
}
.banner__discount-label {
order: 3;
border: none;
padding: 0 20px 16px;
text-align: center;
align-items: center;
font-size: 15px;
}
.banner__desc {
order: 4;
padding: 0 20px;
font-size: 14px;
margin-bottom: 20px;
}
.banner__cta {
order: 5;
margin: auto;
width: auto;
padding: 12px 40px;
}
.banner__divider {
order: 6;
margin: 20px 20px;
}
.banner__author {
order: 7;
padding: 0 20px 28px;
}
.banner__author-photo {
width: 52px;
height: 52px;
}
.banner__author-text {
font-size: 13px;
}
.banner__discount-number {
display: none;
}
.banner__discount-number-text {
display: block;
font-size: 80px;
font-weight: 500;
font-style: italic;
line-height: 1;
color: #675130;
}
.banner__discount-percent {
font-size: 32px;
font-style: italic;
color: #675130;
margin-top: 6px;
}
.banner__discount-label {
color: var(--pm-gold);
display: flex;
flex-direction: row;
justify-content: center;
}
.banner__leaves img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left center;
}
}
/* ==========================================================================
PRICE HERO
========================================================================== */
.price-hero {
position: relative;
background: var(--pm-beige);
overflow: hidden;
display: flex;
align-items: flex-end;
padding-bottom: 48px;
}
.price-hero__fon {
position: absolute;
right: -300px;
top: 0;
bottom: 0;
z-index: 0;
pointer-events: none;
}
.price-hero__fon img {
display: block;
height: 100%;
width: auto;
}
.price-hero__bg {
position: absolute;
inset: 0;
background: radial-gradient(
ellipse 60% 130% at 67% 50%,
rgba(251, 243, 232, 0) 26%,
rgba(251, 243, 232, 1) 100%
);
z-index: 1;
pointer-events: none;
}
.price-hero__image {
position: absolute;
right: calc(50% - 430px);
bottom: -472px;
z-index: 1;
pointer-events: none;
transition: bottom 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.price-hero__image.is-visible {
bottom: -120px;
}
.price-hero__image img {
display: block;
width: 235px;
height: auto;
filter: drop-shadow(36px 21px 52px rgba(154, 125, 83, 0.36));
}
.price-hero__inner {
position: relative;
z-index: 2;
max-width: 1415px;
margin: 0 auto;
width: 100%;
padding: 152px 50px 0;
}
.price-hero__breadcrumbs {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
}
.price-hero__breadcrumbs a,
.price-hero__breadcrumbs span {
font-size: 14px;
line-height: 26px;
font-variation-settings: 'wght' 200;
color: var(--pm-gray);
text-decoration: none;
}
.price-hero__breadcrumbs a:hover {
color: var(--pm-gold);
}
.price-hero__breadcrumbs-sep {
display: block;
width: 24px;
height: 1px;
background: var(--pm-gray);
}
.price-hero__title {
font-size: 64px;
line-height: 1;
text-transform: uppercase;
font-variation-settings: 'wght' 600;
color: var(--pm-dark);
margin: 0 0 24px;
}
.price-hero__desc {
font-size: 20px;
line-height: 1.3;
font-variation-settings: 'wght' 200;
color: var(--pm-dark);
max-width: 614px;
margin: 0 0 40px;
}
.price-hero__download {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 22px 32px 22px 22px;
border: 1px solid var(--pm-green);
border-radius: 40px;
text-decoration: none;
color: var(--pm-green);
transition: background 0.25s ease, color 0.25s ease;
}
.price-hero__download:hover {
background: var(--pm-green);
color: var(--pm-white);
}
.price-hero__download-icon img {
transition: filter 0.25s ease;
}
.price-hero__download:hover .price-hero__download-icon img {
filter: brightness(0) invert(1);
}
.price-hero__download-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex-shrink: 0;
margin-bottom: -10px;
}
.price-hero__download-icon svg {
width: 42px;
height: 42px;
}
.price-hero__download-text {
font-size: 18px;
text-transform: uppercase;
font-variation-settings: 'wght' 400;
white-space: nowrap;
}
/* Header adaptation for price archive */
.post-type-archive-price .site-header .top-bar {
color: var(--pm-gray);
}
/* ── Price Hero — tablet ── */
@media (max-width: 1024px) {
.price-hero {
min-height: 420px;
padding-bottom: 36px;
}
.price-hero__inner {
padding: 120px 32px 0;
}
.price-hero__title {
font-size: 48px;
}
.price-hero__desc {
font-size: 18px;
max-width: 480px;
}
.price-hero__image {
right: -20px;
}
.price-hero__image img {
width: 180px;
}
}
/* ── Price Hero — mobile ── */
@media (max-width: 767px) {
.price-hero {
min-height: 360px;
padding-bottom: 28px;
overflow: hidden;
}
.price-hero__inner {
padding: 115px 16px 0;
}
.price-hero__title {
font-size: 30px;
margin-bottom: 16px;
}
.price-hero__desc {
font-size: 16px;
max-width: 100%;
margin-bottom: 24px;
}
.price-hero__image {
display: block;
right: 50%;
transform: translateX(50%);
bottom: -300px;
transition: bottom 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.price-hero__image.is-visible {
bottom: -180px;
}
.price-hero__image img {
width: 200px;
}
.price-hero__fon {
right: 0;
}
.price-hero__download {
padding: 16px 24px 16px 16px;
position: relative;
z-index: 2;
background: var(--pm-beige, #f5efe6);
margin: 0 auto;
display: flex;
justify-content: center;
margin-top: 150px;
}
.price-hero__download-text {
font-size: 14px;
}
.price-hero__download-icon svg {
width: 32px;
height: 32px;
}
}
/* ==========================================================================
PRICE PROMO — banners section
========================================================================== */
.price-promo {
padding: 60px 0 0;
}
.price-promo__inner {
max-width: 1415px;
margin: 0 auto;
padding: 0 50px;
}
.price-promo__title {
font-size: 52px;
line-height: 1.17;
color: var(--pm-dark);
text-align: center;
max-width: 1022px;
margin: 0 auto 40px;
padding: 0;
}
.price-promo__title-medium {
font-variation-settings: 'wght' 500;
}
.price-promo__title-light {
font-variation-settings: 'wght' 200;
}
.price-promo__banners {
display: flex;
gap: 24px;
}
.price-promo__banner {
flex: 1;
border-radius: 20px;
overflow: hidden;
display: block;
transition: transform 0.3s ease;
}
.price-promo__banner:hover {
transform: translateY(-4px);
}
.price-promo__banner img {
display: block;
width: 100%;
height: auto;
}
/* ── Price Promo — tablet ── */
@media (max-width: 1024px) {
.price-promo__inner {
padding: 0 32px;
}
.price-promo__title {
font-size: 36px;
}
.price-promo__banners {
gap: 16px;
}
}
/* ── Price Promo — mobile ── */
@media (max-width: 767px) {
.price-promo {
padding: 40px 0 0;
}
.price-promo__inner {
padding: 0 16px;
}
.price-promo__title {
font-size: 24px;
margin-bottom: 24px;
}
.price-promo__banners {
flex-direction: column;
gap: 16px;
}
}
/* ==========================================================================
PRICE CATALOG — wrapper for all price groups
========================================================================== */
.price-catalog {
padding: 48px 0 0;
}
.price-catalog__inner {
max-width: 1415px;
margin: 0 auto;
padding: 0 50px;
}
/* ==========================================================================
PRICE GROUP — category block with price rows
========================================================================== */
.price-group {
padding: 0 0 48px;
}
.price-group + .price-group:not([hidden]) {
padding-top: 48px;
border-top: 1px solid rgba(154, 125, 83, 0.15);
}
.price-catalog__empty {
text-align: center;
padding: 64px 20px;
font-size: 20px;
color: var(--pm-muted);
}
.price-group[hidden],
.price-row[hidden] {
display: none !important;
}
.price-group__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-bottom: 24px;
}
.price-group__header-text {
display: flex;
align-items: baseline;
gap: 12px;
}
.price-group__title {
font-size: 36px;
line-height: 1;
font-variation-settings: 'wght' 300;
color: var(--pm-dark);
margin: 0;
}
.price-group__desc {
font-size: 20px;
font-variation-settings: 'wght' 300;
color: var(--pm-divider);
}
/* ── Category banner ── */
.price-group__banner {
margin-bottom: 24px;
border-radius: 20px;
overflow: hidden;
}
.price-group__banner img {
display: block;
width: 100%;
height: auto;
border-radius: 20px;
}
.price-group__banner-tab,
.price-group__banner-mob,
picture:has(.price-group__banner-tab),
picture:has(.price-group__banner-mob) {
display: none;
}
@media (max-width: 1024px) {
.price-group__banner-pk,
picture:has(.price-group__banner-pk) { display: none; }
.price-group__banner-tab,
picture:has(.price-group__banner-tab) { display: block; }
}
@media (max-width: 767px) {
.price-group__banner-pk,
.price-group__banner-tab,
picture:has(.price-group__banner-pk),
picture:has(.price-group__banner-tab) { display: none; }
.price-group__banner-mob,
picture:has(.price-group__banner-mob) { display: block; }
}
/* ── Price rows ── */
.price-group__list {
display: flex;
flex-direction: column;
gap: 8px;
}
.price-row {
display: flex;
align-items: center;
gap: 12px;
height: 70px;
padding: 0 24px;
background: #fffbf5;
border-radius: 8px;
transition: background 0.2s ease, box-shadow 0.2s ease;
}
.price-row {
cursor: pointer;
}
.price-row:hover {
background: #f4e8d5;
box-shadow: 0 4px 16px rgba(154, 125, 83, 0.12);
}
.price-row--sale {
position: relative;
}
.price-row__pin {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 32px;
background: var(--pm-green);
border-radius: 0 4px 4px 0;
}
.price-row__name {
font-size: 20px;
font-variation-settings: 'wght' 200;
color: var(--pm-dark);
white-space: nowrap;
flex-shrink: 0;
}
.price-row__badge {
font-size: 16px;
font-variation-settings: 'wght' 200;
color: var(--pm-green);
background: rgba(0, 93, 77, 0.08);
padding: 4px 12px;
border-radius: 20px;
white-space: nowrap;
flex-shrink: 0;
}
.price-row__dots {
display: none;
}
.price-row__price {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
margin-left: auto;
}
.price-row__old {
font-size: 16px;
font-variation-settings: 'wght' 300;
color: var(--pm-divider);
text-decoration: line-through;
white-space: nowrap;
}
.price-row__current {
font-size: 20px;
font-variation-settings: 'wght' 400;
color: var(--pm-dark);
white-space: nowrap;
}
/* ── CTA button ── */
.price-group__cta {
display: inline-flex;
align-items: center;
justify-content: center;
height: 62px;
padding: 0 40px;
background: var(--pm-green);
color: var(--pm-white);
border-radius: 40px;
font-size: 14px;
font-variation-settings: 'wght' 200;
text-transform: uppercase;
text-decoration: none;
transition: background 0.25s ease;
}
.price-group__cta:hover {
background: var(--pm-green-dark);
}
/* ── Price Catalog — tablet ── */
@media (max-width: 1024px) {
.price-catalog__inner {
padding: 0 32px;
}
.price-group__title {
font-size: 28px;
}
.price-row__name {
font-size: 16px;
}
.price-row__current {
font-size: 16px;
}
}
/* ── Price Group — mobile ── */
@media (max-width: 767px) {
.price-catalog__inner {
padding: 0 16px;
}
.price-group {
padding: 0 0 32px;
}
.price-group + .price-group:not([hidden]) {
padding-top: 32px;
}
.price-group__header {
flex-direction: column;
gap: 4px;
}
.price-group__header-text {
flex-direction: column;
align-self: stretch;
align-items: flex-start;
gap: 4px;
margin-bottom: 10px;
}
.price-group__title {
font-size: 24px;
}
.price-group__desc {
font-size: 16px;
}
.price-row {
height: auto;
padding: 12px 16px;
flex-wrap: wrap;
align-items: flex-start;
}
.price-row__name {
font-size: 15px;
white-space: normal;
flex: 1 1 0;
min-width: 0;
}
.price-row__dots {
display: none;
}
.price-row__badge {
font-size: 13px;
flex-shrink: 0;
order: 10;
margin-left: auto;
}
.price-row__price {
flex-shrink: 0;
order: 11;
margin-left: auto;
text-align: right;
flex-basis: auto;
}
.price-row--sale {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto auto;
gap: 2px 12px;
}
.price-row--sale .price-row__pin {
grid-row: 1 / -1;
}
.price-row--sale .price-row__name {
grid-column: 2;
grid-row: 1 / -1;
align-self: center;
}
.price-row--sale .price-row__badge {
grid-column: 3;
grid-row: 1;
margin-left: 0;
justify-self: end;
}
.price-row--sale .price-row__dots {
display: none;
}
.price-row--sale .price-row__price {
grid-column: 3;
grid-row: 2;
margin-left: 0;
justify-self: end;
}
.price-row__current {
font-size: 16px;
}
фон у __old {
font-size: 13px;
}
.price-group__cta {
width: 70%;
}
}