/**** public/css/main.min.css ***/
body,html {
overflow-x: hidden;
width: 100%;
scroll-behavior: smooth;
-webkit-tap-highlight-color: transparent
}
:root {
--color-primary: #c9a86a;
--color-secondary: #0b0b0b;
--button-height: 48px;
--button-radius: 40px;
--section-gap: 100px;
--image-radius: 28px;
--font-base: "Inter",system-ui,-apple-system,sans-serif;
--black: var(--color-secondary);
--dark: #111;
--gold: var(--color-primary);
--gold-light: #d4b57d;
--gold-dark: #b89a5f;
--white: #fff;
--bg-dark: var(--color-secondary);
--text-light: #f5f5f5;
--card-bg: #1a1a1a;
--shadow: 0 20px 40px rgba(0,0,0,.6);
--shadow-hover: 0 25px 50px hsla(39,47%,60%,.25);
--transition: all 0.4s cubic-bezier(0.2,0.9,0.3,1);
--border-radius-card: var(--image-radius);
--border-radius-btn: var(--button-radius);
--color-accent: #1a5f3e;
--color-muted: #777;
--color-surface-light: #f6f6f6;
--container-max-policy: 1200px;
--content-radius: 20px;
--nav-item-radius: 12px;
--header-gradient-end: #1a3c2d;
--content-padding-y: 80px;
--transition-fast: 0.3s ease;
--price-bg-dark: #0a0a0a;
--bg-card: rgba(26,26,26,.6);
--text-primary: #fff;
--text-secondary: hsla(0,0%,100%,.7);
--text-muted: hsla(0,0%,100%,.5);
--border-light: hsla(39,47%,60%,.2);
--shadow-sm: 0 10px 30px rgba(0,0,0,.3);
--shadow-md: 0 20px 40px rgba(0,0,0,.4);
--shadow-gold: 0 15px 35px hsla(39,47%,60%,.15);
--radius-lg: 28px;
--radius-md: 20px;
--radius-sm: 16px;
--container-max-price: 1400px
}
body {
font-family: var(--font-base);
color: var(--text-light);
background: var(--bg-dark);
line-height: 1.5;
-webkit-font-smoothing: antialiased
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition)
}
img,video {
display: block;
max-width: 100%;
height: auto
}
.container {
width: 92%;
max-width: 1320px;
margin: 0 auto
}
.btn,
.btn-primary {
background: hsla(39,47%,60%,.85);
color: var(--black);
padding: 10px 24px;
border-radius: var(--button-radius);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 10px;
transition: var(--transition);
border: 1px solid hsla(0,0%,100%,.1);
cursor: pointer;
font-size: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,.2);
text-decoration: none;
box-sizing: border-box;
}
.btn:hover,
.btn-primary:hover {
background: var(--gold);
transform: translateY(-2px)
}
.hero {
position: relative;
min-height: 100vh;
min-height: calc(var(--vh,1vh)*100);
height: auto;
overflow: visible;
padding: 0;
background: #0a0a0a
}
.hero video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg,rgba(0,0,0,.95),rgba(0,0,0,.7) 80%);
pointer-events: none
}
.hero-content {
position: relative;
z-index: 2;
min-height: 100vh;
min-height: calc(var(--vh,1vh)*100);
display: flex;
align-items: center;
padding: 120px 0 72px;
box-sizing: border-box
}
.hero h1 {
font-size: clamp(36px,6vw,72px);
line-height: 1.1;
max-width: 1000px;
text-shadow: 0 5px 20px rgba(0,0,0,.5);
margin-bottom: 25px;
font-weight: 800
}
.hero p {
font-size: clamp(16px,2vw,24px);
max-width: 700px;
opacity: .9;
margin-bottom: 35px;
font-weight: 300
}
.blur-in,.fade-in,.fade-up,.rotate-in,.scale-in,.slide-in-left,.slide-in-right {
opacity: 0;
transition: all 1s cubic-bezier(.2,.9,.3,1)
}
.fade-up {
transform: translateY(50px)
}
.slide-in-left {
transform: translateX(-70px)
}
.slide-in-right {
transform: translateX(70px)
}
.scale-in {
transform: scale(.8)
}
.blur-in {
filter: blur(10px);
transform: translateY(20px)
}
.rotate-in {
transform: rotate(-3deg) scale(.95)
}
.fade-in {
opacity: 0
}
.visible {
opacity: 1;
transform: translate(0) scale(1);
filter: blur(0)
}
.delay-1 {
transition-delay: .1s
}
.delay-2 {
transition-delay: .2s
}
.delay-3 {
transition-delay: .3s
}
.notification-toast {
position: fixed;
top: 20px;
right: 20px;
z-index: 16;
max-width: 480px;
width: calc(100% - 40px);
max-height: 80vh;
background: rgba(26,26,26,.55);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: var(--radius-lg);
box-shadow: 0 20px 40px rgba(0,0,0,.5),0 0 0 1px hsla(39,47%,60%,.2);
border: 1px solid hsla(0,0%,100%,.06);
transform: translateX(calc(100% + 40px));
opacity: 0;
transition: transform .5s cubic-bezier(.2,.9,.3,1.2),opacity .4s ease;
overflow: hidden;
padding: 0
}
.notification-toast.show {
transform: translateX(0);
opacity: 1
}
.notification-toast__scroll {
max-height: 80vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 12px 16px 16px
}
.notification-toast__inner {
display: flex;
align-items: center;
gap: 16px;
clear: both
}
.notification-icon {
width: 48px;
height: 48px;
background: linear-gradient(145deg,var(--gold),var(--gold-dark));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--black);
font-size: 24px;
flex-shrink: 0;
border: 1px solid hsla(0,0%,100%,.2);
box-shadow: 0 8px 18px hsla(39,47%,60%,.3)
}
.notification-content {
flex: 1;
min-width: 0
}
.notification-title {
font-weight: 700;
font-size: 16px;
color: var(--gold);
margin-bottom: 4px;
letter-spacing: -.2px
}
.notification-text {
font-weight: 500;
font-size: 15px;
color: var(--text-light);
opacity: .9;
line-height: 1.4
}
.notification-text strong {
color: var(--gold);
font-weight: 700
}
.notification-btn {
background: hsla(39,47%,60%,.85);
color: var(--black);
padding: 8px 18px;
border-radius: 60px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: var(--transition);
border: 1px solid hsla(0,0%,100%,.15);
white-space: nowrap;
flex-shrink: 0
}
.notification-btn:hover {
background: var(--gold);
transform: scale(1.03)
}
.notification-close {
position: sticky;
top: 12px;
float: right;
z-index: 5;
width: 32px;
height: 32px;
min-width: 32px;
background: hsla(0,0%,100%,.15);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
font-size: 16px;
color: var(--gold);
margin-left: 8px;
margin-bottom: -32px
}
.notification-close:hover {
background: var(--gold);
color: var(--black);
transform: rotate(90deg)
}
@media(max-width:768px) {
.notification-toast {
left: 16px;
right: 16px;
width: calc(100% - 32px);
max-width: none;
max-height: 75vh;
margin: 0 auto;
transform: translateY(calc(-100% - 40px))
}
.notification-toast.show {
transform: translateY(0)
}
.notification-toast__scroll {
max-height: 75vh
}
}
.laser-promo-banner {
position: fixed;
bottom: 30px;
left: 20px;
z-index: 16;
max-width: 480px;
width: calc(100% - 40px);
background: hsla(0,0%,8%,.65);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 32px;
overflow: hidden;
box-shadow: 0 25px 50px rgba(0,0,0,.6),0 0 0 1px hsla(39,47%,60%,.2);
border: 1px solid hsla(0,0%,100%,.06);
transform: translateY(150%);
opacity: 0;
transition: transform .6s cubic-bezier(.2,.9,.3,1.2),opacity .5s ease;
display: flex;
flex-direction: column
}
.laser-promo-banner.show {
transform: translateY(0);
opacity: 1
}
.laser-banner-image {
height: 260px;
position: relative
}
.laser-banner-image img {
width: 100%;
height: 100%;
object-fit: cover
}
.laser-banner-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(0deg,rgba(0,0,0,.5),transparent 70%)
}
.laser-banner-content {
padding: 20px;
position: relative
}
.laser-banner-badge {
position: absolute;
top: -20px;
right: 20px;
background: linear-gradient(145deg,var(--gold),var(--gold-dark));
color: var(--black);
font-weight: 800;
font-size: 26px;
padding: 8px 20px;
border-radius: 60px;
border: 2px solid hsla(0,0%,100%,.2);
box-shadow: 0 10px 20px rgba(0,0,0,.3);
z-index: 2
}
.laser-banner-title {
font-size: 22px;
font-weight: 800;
margin-bottom: 8px;
color: var(--gold);
line-height: 1.2;
padding-right: 80px
}
.laser-banner-desc {
font-size: 15px;
opacity: .9;
margin-bottom: 12px;
line-height: 1.5
}
.laser-banner-features {
list-style: none;
margin-bottom: 16px
}
.laser-banner-features li {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
margin-bottom: 8px
}
.laser-banner-features i {
color: var(--gold);
font-size: 16px
}
.laser-banner-actions {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap
}
.laser-banner-btn {
flex: 1;
min-width: 140px;
padding: 10px 14px;
border-radius: 60px;
font-weight: 600;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: var(--transition);
cursor: pointer;
border: none;
background: hsla(0,0%,100%,.05);
backdrop-filter: blur(8px);
border: 1px solid hsla(39,47%,60%,.3);
color: var(--gold)
}
.laser-banner-btn-primary {
background: linear-gradient(145deg,var(--gold),var(--gold-dark));
color: var(--black);
border: 1px solid hsla(0,0%,100%,.2)
}
.laser-banner-btn-primary:hover {
background: linear-gradient(145deg,var(--gold-light),var(--gold));
transform: translateY(-2px)
}
.laser-banner-btn-secondary:hover {
background: hsla(39,47%,60%,.2);
transform: translateY(-2px)
}
.laser-banner-close {
position: absolute;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(0,0,0,.5);
backdrop-filter: blur(8px);
border: 1px solid hsla(0,0%,100%,.2);
color: var(--gold);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
z-index: 4;
font-size: 20px
}
.laser-banner-close:hover {
background: var(--gold);
color: var(--black);
transform: rotate(90deg)
}
.laser-banner-phone {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 12px;
font-size: 15px;
font-weight: 500;
padding-top: 12px;
border-top: 1px solid hsla(39,47%,60%,.2)
}
.laser-banner-phone a {
color: var(--text-light)
}
.laser-banner-phone a:hover {
color: var(--gold)
}
.cookie-modal {
position: fixed;
bottom: 25px;
left: 25px;
right: 25px;
max-width: 480px;
background: rgba(26,26,26,.55);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 30px;
padding: 30px;
box-shadow: 0 30px 60px rgba(0,0,0,.5);
z-index: 15;
border: 1px solid hsla(39,47%,60%,.12);
transform: translateY(150%);
opacity: 0;
transition: .6s cubic-bezier(.2,.9,.3,1.1);
margin: 0 auto
}
.cookie-modal.active {
transform: translateY(0);
opacity: 1
}
.cookie-modal h3 {
color: var(--gold);
margin-bottom: 15px;
font-size: 1.4rem;
font-weight: 700
}
.cookie-modal p {
opacity: .9;
line-height: 1.5;
margin-bottom: 25px
}
.cookie-modal a {
color: var(--gold);
text-decoration: underline
}
.cookie-btn {
background: hsla(39,47%,60%,.85);
backdrop-filter: blur(8px);
color: var(--black);
border: 1px solid hsla(0,0%,100%,.1);
padding: 14px 28px;
border-radius: 60px;
font-weight: 600;
width: 100%;
font-size: 1.1rem;
transition: var(--transition);
cursor: pointer
}
.cookie-btn:hover {
background: var(--gold)
}
.city-bar {
background: rgba(26,26,26,.3);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 6px 0;
font-size: 14px;
border-bottom: 1px solid hsla(39,47%,60%,.08);
position: relative;
z-index: 10
}
.city-bar .container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px
}
.city-switch {
display: flex;
gap: 4px;
background: rgba(0,0,0,.2);
padding: 4px;
border-radius: 60px;
border: 1px solid hsla(39,47%,60%,.12)
}
.city-link {
color: var(--text-light);
font-weight: 500;
padding: 6px 20px;
border-radius: 60px;
transition: var(--transition);
font-size: 14px;
opacity: .8;
letter-spacing: -.01em
}
.city-link:hover {
opacity: 1;
background: hsla(39,47%,60%,.1)
}
.city-link.active {
background: var(--gold);
color: var(--black);
opacity: 1;
font-weight: 600
}
.city-info {
display: flex;
gap: 20px;
color: var(--gold)
}
.city-info span {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
white-space: nowrap
}
.city-info i {
font-size: 12px;
opacity: .9
}
.city-info a {
color: inherit
}
.city-info a:hover {
color: var(--gold-light)
}
.top {
font-size: 13px;
background: rgba(26,26,26,.3);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 8px 0;
border-bottom: 1px solid hsla(39,47%,60%,.08)
}
.top .container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px
}
.top i {
color: var(--gold);
margin-right: 6px
}
.top span {
white-space: nowrap
}
header {
position: sticky;
top: 0;
background: hsla(0,0%,4%,.6);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
z-index: 10;
border-bottom: 1px solid hsla(39,47%,60%,.1)
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0
}
.clinic-name {
font-size: 28px;
font-weight: 800;
letter-spacing: 1px;
line-height: 1;
transition: var(--transition)
}
.clinic-name:hover {
opacity: .8
}
.clinic-name .neo {
color: var(--text-light)
}
.clinic-name .clinic {
color: var(--gold)
}
.desktop-nav {
display: flex;
gap: 8px
}
.desktop-nav a {
font-weight: 500;
padding: 8px 20px;
border-radius: var(--button-radius);
transition: var(--transition);
font-size: 15px;
position: relative;
white-space: nowrap;
background: hsla(0,0%,100%,.02);
backdrop-filter: blur(4px)
}
.desktop-nav a:hover {
background: hsla(39,47%,60%,.12);
color: var(--gold)
}
/* Нижняя навигация ~64px + отступ 15px + зазор 16px → кнопки над ней на одном уровне */
:root {
--float-btn-bottom: calc(95px + env(safe-area-inset-bottom, 0px));
}
@supports (padding: max(0px)) {
:root {
--float-btn-bottom: max(120px, calc(env(safe-area-inset-bottom, 0px) + 110px));
}
.mobile-bottom-nav {
bottom: max(15px, env(safe-area-inset-bottom, 0px) + 10px);
}
}
.floating-appointment-btn {
position: fixed;
bottom: var(--float-btn-bottom);
right: 20px;
z-index: 13;
background: hsla(39,47%,60%,.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--black);
padding: 12px 24px;
border-radius: 60px;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,.3);
border: 1px solid hsla(0,0%,100%,.15);
min-height: var(--button-height);
font-size: 15px;
transition: var(--transition);
cursor: pointer
}
.floating-appointment-btn:hover {
background: var(--gold);
transform: translateY(-3px)
}
.floating-appointment-btn svg,
.scroll-top-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
display: block;
}
.scroll-top-btn {
position: fixed;
bottom: var(--float-btn-bottom);
left: 20px;
z-index: 13;
background: var(--color-primary);
color: #000;
border: none;
border-radius: 60px;
padding: 12px 24px;
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-size: 15px;
cursor: pointer;
box-shadow: 0 10px 30px rgba(0,0,0,.3);
border: 1px solid hsla(0,0%,100%,.15);
transition: opacity .4s ease,visibility .4s ease,transform .4s ease;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
-webkit-tap-highlight-color: transparent
}
.scroll-top-btn.visible {
opacity: 1;
visibility: visible;
transform: translateY(0)
}
.scroll-top-btn,.scroll-top-btn:active,.scroll-top-btn:focus,.scroll-top-btn:focus-visible,.scroll-top-btn:hover,.scroll-top-btn:link,.scroll-top-btn:visited {
background: var(--color-primary)!important;
color: #000!important;
outline: none!important;
box-shadow: none!important;
-webkit-tap-highlight-color: transparent!important
}
.scroll-top-btn.visible:hover {
transform: translateY(-3px)
}
.mobile-bottom-nav {
display: none;
position: fixed;
bottom: 15px;
left: 15px;
right: 15px;
z-index: 14;
background: rgba(26,26,26,.5);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 60px;
padding: 6px 12px;
box-shadow: 0 10px 30px rgba(0,0,0,.5),0 0 0 1px hsla(39,47%,60%,.15);
border: 1px solid hsla(0,0%,100%,.04);
justify-content: space-around;
align-items: center;
gap: 2px;
}
.mobile-nav__item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
min-width: 0;
padding: 6px 2px;
color: var(--text-light);
font-size: 11px;
font-weight: 500;
gap: 4px;
transition: var(--transition);
opacity: .7;
border-radius: 30px;
text-decoration: none;
white-space: nowrap;
}
.mobile-nav__icon {
display: flex;
align-items: center;
justify-content: center;
color: var(--gold);
line-height: 0;
}
.mobile-nav__icon svg {
width: 22px;
height: 22px;
display: block;
}
.mobile-nav__label {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
font-size: 10px;
}
.mobile-nav__item.active,
.mobile-nav__item:hover {
opacity: 1;
color: var(--gold);
background: hsla(39,47%,60%,.08);
}
.inline-icon {
display: inline-block;
vertical-align: -2px;
margin-right: 4px;
}
.mobile-nav-items {
display: flex;
justify-content: space-around;
align-items: center;
list-style: none;
width: 100%;
}
.mobile-nav-items li {
flex: 1;
min-width: 0
}
.mobile-nav-items--5 li {
flex: 1 1 20%;
max-width: 20%
}
.mobile-nav-items a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 6px 2px;
color: var(--text-light);
font-size: 11px;
font-weight: 500;
gap: 4px;
transition: var(--transition);
opacity: .7;
border-radius: 30px;
white-space: nowrap;
text-decoration: none
}
.mobile-nav-items a i,
.mobile-nav-items a svg {
font-size: 20px;
color: var(--gold);
width: 22px;
height: 22px;
}
.mobile-nav-items a span {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis
}
.mobile-nav-items a.active,.mobile-nav-items a:hover {
opacity: 1;
color: var(--gold);
background: hsla(39,47%,60%,.08)
}
section {
padding: var(--section-gap) 0;
overflow: hidden;
position: relative
}
section:nth-child(2n) {
background: linear-gradient(180deg,var(--bg-dark),rgba(26,26,26,.4))
}
h2 {
text-align: center;
font-size: clamp(32px,5vw,52px);
margin-bottom: 60px;
position: relative;
font-weight: 700;
letter-spacing: -.02em
}
h2:after {
content: "";
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 2px;
background: var(--gold);
border-radius: 2px
}
@media(min-width:769px) {
#about .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center
}
}
#about p {
font-size: 1.2rem;
opacity: .9;
line-height: 1.7;
white-space: normal
}
#about img {
border-radius: 30px;
box-shadow: var(--shadow);
width: 100%;
transition: var(--transition)
}
.services-grid {
display: grid;
gap: 24px;
grid-template-columns: repeat(4,1fr)
}
.service-card {
background: rgba(26,26,26,.4);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: var(--border-radius-card);
overflow: hidden;
aspect-ratio: 1/1;
transition: var(--transition);
border: 1px solid hsla(39,47%,60%,.08);
box-shadow: var(--shadow);
position: relative;
display: flex;
flex-direction: column;
cursor: pointer
}
.service-card a {
position: absolute;
inset: 0;
z-index: 3
}
.service-card--icon {
aspect-ratio: auto;
min-height: 280px;
padding: 28px 22px;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
cursor: default;
}
.service-card--icon .service-card__icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
color: var(--gold);
margin-bottom: 8px;
}
.service-card--icon .service-card__icon svg {
width: 36px;
height: 36px;
}
.service-card--icon h3 {
margin: 0;
font-size: 1.25rem;
color: var(--text-light);
}
.service-card--icon p {
margin: 0;
color: #aaa;
font-size: .95rem;
line-height: 1.55;
flex: 1;
}
.service-card--icon .btn-outline {
position: relative;
z-index: 4;
margin-top: 8px;
align-self: flex-start;
}
.service-card--stub {
visibility: hidden;
pointer-events: none;
border: none;
background: transparent;
box-shadow: none;
}
.service-card:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg,transparent,rgba(0,0,0,.8));
z-index: 1;
opacity: 0;
transition: var(--transition)
}
.service-card:hover:before {
opacity: 1
}
.service-card:hover {
transform: translateY(-8px);
border-color: var(--gold);
box-shadow: var(--shadow-hover)
}
.service-card img,.service-card picture img {
width: 100%;
height: 70%;
object-fit: cover;
transition: transform .8s cubic-bezier(.2,.9,.3,1);
background: #333;
flex-shrink: 0;
pointer-events: none
}
.service-card picture {
display: block;
width: 100%;
height: 70%;
flex-shrink: 0;
pointer-events: none
}
.service-card picture img {
height: 100%
}
.service-card:hover img,.service-card:hover picture img {
transform: scale(1.1)
}
.service-card .text {
padding: 20px 10px;
font-weight: 600;
text-align: center;
background: transparent;
font-size: 1.1rem;
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
pointer-events: none;
white-space: normal;
line-height: 1.3;
color: var(--text-light);
backdrop-filter: blur(4px)
}
.why .grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 24px
}
.why .item {
display: flex;
align-items: center;
gap: 16px;
padding: 24px 20px;
background: rgba(26,26,26,.4);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: var(--border-radius-card);
border: 1px solid hsla(39,47%,60%,.08);
transition: var(--transition);
cursor: default
}
.why .item:hover {
border-color: var(--gold);
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
background: rgba(26,26,26,.6)
}
.why .item i,
.why .item .why-icon {
font-size: 36px;
color: var(--gold);
min-width: 50px;
text-align: center;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.why .item .why-icon svg {
width: 32px;
height: 32px;
}
.why .item:hover i,
.why .item:hover .why-icon {
transform: scale(1.1)
}
.why .item span {
font-size: 1rem;
font-weight: 500;
line-height: 1.4;
white-space: normal
}
.prices-section {
background: linear-gradient(145deg,#0c0c0c,#070707);
position: relative;
padding: 80px 0
}
.prices-grid {
display: grid;
gap: 24px;
grid-template-columns: repeat(4,1fr);
margin-top: 50px
}
.price-category-card {
background: rgba(26,26,26,.35);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: var(--border-radius-card);
overflow: hidden;
transition: var(--transition);
display: flex;
flex-direction: column;
border: 1px solid hsla(39,47%,60%,.08);
box-shadow: 0 15px 30px rgba(0,0,0,.4);
height: 100%
}
.price-category-card:hover {
transform: translateY(-6px);
border-color: var(--gold);
box-shadow: 0 25px 40px hsla(39,47%,60%,.12)
}
.price-category-header {
background: hsla(0,0%,6%,.5);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: 24px 20px;
text-align: center;
flex-direction: column;
min-height: 140px;
border-bottom: 1px solid hsla(39,47%,60%,.15)
}
.price-category-header,.price-category-icon {
color: var(--gold);
display: flex;
align-items: center;
justify-content: center
}
.price-category-icon {
width: 56px;
height: 56px;
background: hsla(39,47%,60%,.12);
border-radius: 50%;
font-size: 26px;
margin-bottom: 12px;
transition: var(--transition);
border: 1px solid hsla(39,47%,60%,.2);
backdrop-filter: blur(4px);
color: var(--gold);
}
.price-category-icon svg {
width: 26px;
height: 26px;
display: block;
}
.price-category-card:hover .price-category-icon {
background: var(--gold);
color: var(--black);
border-color: transparent
}
.price-category-title {
font-size: 20px;
font-weight: 700;
margin-bottom: 0;
line-height: 1.3;
color: var(--text-light)
}
.price-category-content {
padding: 20px 20px 10px;
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center
}
.price-category-text {
opacity: .8;
font-size: 14px;
line-height: 1.5;
margin-bottom: 0;
white-space: normal
}
.price-category-footer {
padding: 0 20px 24px;
text-align: center
}
.price-detail-btn {
background: hsla(0,0%,100%,.03);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: var(--gold);
border: 1px solid hsla(39,47%,60%,.25);
padding: 12px 24px;
border-radius: 60px;
font-weight: 500;
transition: var(--transition);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 14px;
min-height: 42px;
width: 100%;
cursor: pointer
}
.price-detail-btn:hover {
background: var(--gold);
color: var(--black);
transform: translateY(-2px);
border-color: transparent
}
.price-detail-btn i {
font-size: 14px;
transition: transform .3s ease
}
.price-detail-btn:hover i {
transform: translateX(4px)
}
.price-note {
text-align: center;
opacity: .7;
font-size: .9rem;
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid hsla(39,47%,60%,.12)
}
.ba-section {
padding: 80px 0
}
.ba-grid {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 24px;
margin-top: 50px
}
.ba-container {
--slider-position: 50%;
position: relative;
width: 100%;
aspect-ratio: .9/1.2;
border-radius: 24px;
overflow: hidden;
box-shadow: var(--shadow);
background: #222;
cursor: col-resize;
transition: var(--transition)
}
.ba-container:hover {
transform: scale(1.02);
box-shadow: var(--shadow-hover)
}
.ba-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
background: #333
}
.ba-before {
z-index: 2;
clip-path: polygon(0 0,var(--slider-position) 0,var(--slider-position) 100%,0 100%)
}
.ba-after {
z-index: 1
}
.ba-slider {
top: 0;
left: var(--slider-position);
width: 3px;
height: 100%;
transform: translateX(-50%);
z-index: 5;
pointer-events: none;
box-shadow: 0 0 10px var(--gold)
}
.ba-slider,.ba-slider:after {
position: absolute;
background: var(--gold)
}
.ba-slider:after {
content: "";
top: 50%;
left: 50%;
width: 32px;
height: 32px;
border-radius: 50%;
transform: translate(-50%,-50%);
box-shadow: 0 0 15px rgba(0,0,0,.5);
border: 2px solid var(--white);
transition: var(--transition)
}
.ba-container:hover .ba-slider:after {
transform: translate(-50%,-50%) scale(1.1)
}
.ba-label {
position: absolute;
top: 15px;
padding: 6px 14px;
background: rgba(0,0,0,.35);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: 60px;
font-weight: 600;
font-size: .8rem;
z-index: 4;
border: 1px solid hsla(39,47%,60%,.15);
color: var(--gold);
white-space: nowrap
}
.ba-before-label {
left: 15px
}
.ba-after-label {
right: 15px
}
.ba-input {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: col-resize;
z-index: 6
}
.doctors-section {
padding: 80px 0
}
.doctors-grid,
.masters-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 24px;
margin-top: 50px
}
@media (max-width: 768px) {
.doctors-grid,
.masters-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.doctors-grid,
.masters-grid {
grid-template-columns: 1fr;
}
}
.doctor-card {
background: rgba(26,26,26,.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: var(--border-radius-card);
overflow: hidden;
border: 1px solid hsla(39,47%,60%,.08);
transition: var(--transition);
display: flex;
flex-direction: column;
height: 100%
}
.doctor-card:hover {
transform: translateY(-6px);
border-color: var(--gold);
box-shadow: 0 20px 40px hsla(39,47%,60%,.08)
}
.doctor-img {
width: 100%;
aspect-ratio: 1/1.2;
object-fit: cover;
filter: grayscale(40%);
transition: var(--transition);
background: #2a2a2a
}
.doctor-card picture {
display: block;
width: 100%;
line-height: 0;
background: #2a2a2a
}
.doctor-card picture .doctor-img {
width: 100%;
height: auto
}
.doctor-card:hover .doctor-img {
filter: grayscale(0) brightness(1.1)
}
.doctor-info {
padding: 24px 16px;
text-align: center;
background: transparent;
flex: 1;
display: flex;
flex-direction: column
}
.doctor-name {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 6px;
color: var(--gold);
white-space: normal;
line-height: 1.3
}
.doctor-specialty {
color: var(--gold-light);
font-weight: 500;
margin-bottom: 12px;
font-size: .85rem;
text-transform: uppercase;
letter-spacing: .3px;
white-space: normal
}
.doctor-exp {
opacity: .8;
margin-bottom: 20px;
flex: 1;
font-size: .9rem;
line-height: 1.4;
white-space: normal
}
.doctor-btn {
background: hsla(0,0%,100%,.03);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: var(--gold);
border: 1px solid hsla(39,47%,60%,.25);
padding: 8px 16px;
border-radius: 60px;
font-weight: 500;
font-size: .9rem;
transition: var(--transition);
display: inline-block;
width: 100%;
cursor: pointer;
white-space: nowrap;
letter-spacing: .3px
}
.doctor-btn:hover {
background: var(--gold);
color: var(--black);
transform: translateY(-2px);
border-color: transparent
}
.doctor-btn i {
margin-right: 6px
}
.license-section {
padding: 80px 0
}
.license-container {
background: rgba(26,26,26,.4);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: var(--button-radius);
padding: 60px;
display: flex;
align-items: center;
gap: 50px;
border: 1px solid hsla(39,47%,60%,.1);
transition: var(--transition)
}
.license-icon {
font-size: 120px;
color: var(--gold);
flex-shrink: 0;
transition: var(--transition);
filter: drop-shadow(0 10px 15px rgba(201,168,106,.15))
}
.license-title {
font-size: clamp(28px,4vw,42px);
margin-bottom: 20px;
font-weight: 700;
white-space: normal
}
.license-text {
font-size: 1.1rem;
opacity: .9;
margin-bottom: 30px;
max-width: 700px;
line-height: 1.6;
white-space: normal
}
.license-number {
background: hsla(0,0%,100%,.03);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: var(--gold);
border: 1px solid hsla(39,47%,60%,.25);
padding: 14px 32px;
border-radius: 60px;
font-weight: 600;
display: inline-block;
font-size: 1rem;
transition: var(--transition)
}
.license-number:hover {
background: var(--gold);
color: var(--black);
transform: translateY(-2px);
border-color: transparent
}
.video-section {
padding: 80px 0
}
.video-container {
position: relative;
border-radius: 30px;
overflow: hidden;
box-shadow: var(--shadow);
max-width: 1200px;
margin: 0 auto;
border: 1px solid hsla(39,47%,60%,.08)
}
.video-container video {
width: 100%;
height: auto;
display: block
}
.video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.25);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity .3s;
backdrop-filter: blur(4px)
}
.video-container:hover .video-overlay {
opacity: 1
}
.video-play-btn {
width: 70px;
height: 70px;
background: hsla(39,47%,60%,.75);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--black);
font-size: 22px;
cursor: pointer;
transition: transform .3s;
border: 2px solid hsla(0,0%,100%,.15)
}
.video-play-btn:hover {
transform: scale(1.1);
background: var(--gold)
}
.map-section {
padding: 80px 0
}
.map-wrap {
border-radius: 30px;
overflow: hidden;
box-shadow: var(--shadow);
border: 1px solid hsla(39,47%,60%,.08);
transition: var(--transition)
}
.map-wrap iframe {
width: 100%;
height: 480px;
display: block;
border: none
}
footer {
background: rgba(26,26,26,.4);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
padding: 70px 0 40px;
border-top: 1px solid hsla(39,47%,60%,.08);
position: relative;
margin-bottom: 0
}
.footer-grid {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 40px;
margin-bottom: 60px
}
.footer-col h3 {
color: var(--gold);
margin-bottom: 20px;
font-size: 1.2rem;
position: relative;
padding-bottom: 8px;
font-weight: 600
}
.footer-col h3:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 2px;
background: var(--gold);
border-radius: 2px
}
.footer-logo {
font-size: 1.8rem;
font-weight: 800;
margin-bottom: 20px
}
.footer-about {
opacity: .7;
line-height: 1.6;
margin-bottom: 20px;
font-size: .9rem
}
.social-icons {
display: flex;
gap: 12px
}
.social-icons a {
width: 42px;
height: 42px;
background: hsla(39,47%,60%,.12);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
color: var(--gold);
transition: var(--transition);
border: 1px solid hsla(39,47%,60%,.15)
}
.social-icons a:hover {
background: var(--gold);
color: var(--black);
transform: translateY(-3px);
border-color: transparent
}
.footer-links {
list-style: none
}
.footer-links li {
margin-bottom: 12px
}
.footer-links a {
display: flex;
align-items: center;
gap: 10px;
opacity: .7;
transition: var(--transition);
font-size: .9rem
}
.footer-links a:hover {
opacity: 1;
color: var(--gold);
transform: translateX(4px)
}
.footer-contact p {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
opacity: .7;
transition: var(--transition);
font-size: .9rem
}
.footer-contact i,
.footer-contact .footer-contact-icon {
color: var(--gold);
width: 18px;
height: 18px;
font-size: .9rem;
flex-shrink: 0;
}
.footer-links .footer-chevron {
color: var(--gold);
flex-shrink: 0;
}
.social-icons a svg {
display: block;
}
.license-icon svg {
width: 1em;
height: 1em;
display: block;
}
.doctor-btn i,
.doctor-btn .inline-icon,
.btn .inline-icon,
.articles-preview-card__btn .inline-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
margin-right: 0.35em;
}
.footer-contact a {
color: inherit
}
.footer-contact a:hover {
color: var(--gold)
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
padding-top: 30px;
border-top: 1px solid hsla(39,47%,60%,.08)
}
.copyright {
opacity: .5;
font-size: .85rem
}
.footer-policy {
display: flex;
gap: 30px;
flex-wrap: wrap
}
.footer-policy a {
opacity: .7;
font-size: .85rem;
transition: var(--transition)
}
.footer-policy a:hover {
opacity: 1;
color: var(--gold)
}
@media(max-width:1200px) {
.ba-grid,.prices-grid,.services-grid {
grid-template-columns: repeat(3,1fr)
}
}
@media(max-width:992px) {
.ba-grid,.footer-grid,.prices-grid,.services-grid,.why .grid {
grid-template-columns: repeat(2,1fr)
}
}
@media(max-width:768px) {
body {
padding-bottom: 80px
}
.desktop-nav,
.header .btn,
.header .btn-primary {
display: none
}
.mobile-bottom-nav {
display: flex
}
.mobile-nav__label {
font-size: 10px
}
.mobile-nav__icon svg {
width: 20px;
height: 20px
}
.mobile-nav-items a {
font-size: 10px;
padding: 5px 1px;
gap: 3px
}
.mobile-nav-items a i {
font-size: 18px
}
.video-section .video-container,.video-section .video-container video {
border-radius: var(--image-radius,16px)!important;
overflow: hidden
}
.city-bar .container {
flex-direction: column;
align-items: stretch
}
.city-info,.city-switch {
justify-content: center
}
.city-info span {
white-space: nowrap
}
section {
padding: 70px 0
}
h2 {
margin-bottom: 40px;
text-align: center
}
#about .container,section .container {
width: 100%;
padding: 0 20px
}
#about .container {
display: flex!important;
flex-direction: column!important;
grid-template-columns: 1fr!important;
gap: 0!important;
text-align: left
}
#about .container>div:first-child {
order: 1;
width: 100%!important;
max-width: 100%!important
}
#about .container>div:last-child {
order: 2;
margin-top: 24px!important
}
#about .container>div:last-child,#about p {
width: 100%!important;
max-width: 100%!important
}
#about p {
font-size: 16px;
text-align: left!important
}
#about img {
float: none!important;
position: relative!important;
width: 100%!important;
max-width: 100%!important;
margin: 0!important;
display: block!important
}
.about-grid {
display: flex!important;
flex-direction: column!important;
grid-template-columns: 1fr!important;
gap: 0!important;
text-align: left;
padding: 0 20px;
width: 100%
}
.about-grid>div:first-child {
order: 1;
width: 100%!important;
max-width: 100%!important
}
.about-grid>div:last-child {
order: 2;
width: 100%!important;
max-width: 100%!important;
margin-top: 24px!important
}
.about-text {
font-size: 16px
}
.about-highlight,.about-text {
text-align: left!important;
width: 100%!important;
max-width: 100%!important
}
.about-features {
justify-content: flex-start;
width: 100%!important
}
.about-image {
float: none!important;
position: relative!important;
width: 100%!important;
max-width: 100%!important;
margin: 0!important;
display: block!important
}
.ba-grid,.prices-grid,.services-grid {
grid-template-columns: repeat(2,1fr);
gap: 16px
}
.why .grid {
grid-template-columns: 1fr;
gap: 16px
}
.why .item {
padding: 20px
}
.why .item span {
font-size: .95rem
}
.service-card .text {
font-size: 1rem;
padding: 15px
}
.price-category-header {
padding: 20px 15px;
min-height: 130px
}
.price-category-icon {
width: 50px;
height: 50px;
font-size: 22px
}
.price-category-title {
font-size: 18px
}
.price-category-text {
font-size: 13px;
margin-bottom: 10px
}
.price-detail-btn {
padding: 10px 20px;
font-size: 13px
}
.doctor-name {
font-size: 1.2rem
}
.doctor-specialty {
font-size: .75rem
}
.doctor-btn,.doctor-exp {
font-size: .85rem
}
.doctor-btn {
padding: 8px
}
.ba-container {
border-radius: 20px
}
.ba-label {
padding: 4px 10px;
font-size: .7rem
}
.ba-slider:after {
width: 28px;
height: 28px
}
.license-container {
flex-direction: column;
text-align: center;
padding: 30px
}
.license-icon {
font-size: 80px
}
.floating-appointment-btn,.scroll-top-btn {
padding: 10px 20px;
min-height: 44px;
font-size: 14px
}
.floating-appointment-btn span,.scroll-top-btn__text {
display: inline-block
}
.hero-content {
text-align: center;
justify-content: center;
padding: 96px 20px 88px;
align-items: center
}
.hero h1 {
font-size: 34px
}
.hero p {
font-size: 16px
}
.map-wrap iframe {
height: 350px
}
}
@media(max-width:576px) {
.footer-grid {
grid-template-columns: 1fr;
text-align: center
}
.footer-col h3:after {
left: 50%;
transform: translateX(-50%)
}
.footer-contact p,.footer-links a,.social-icons {
justify-content: center
}
.footer-bottom {
flex-direction: column;
text-align: center
}
.footer-policy {
justify-content: center
}
footer {
padding-bottom: 50px
}
}
@media(max-width:480px) {
.service-card .text {
font-size: .9rem;
padding: 10px
}
.why .item {
padding: 16px
}
.why .item i {
font-size: 30px;
min-width: 40px
}
.why .item span {
font-size: .9rem
}
.doctor-name {
font-size: 1.1rem
}
.doctor-specialty {
font-size: .7rem
}
.price-category-header {
padding: 18px 10px
}
.price-category-icon {
width: 42px;
height: 42px;
font-size: 20px
}
.price-category-title {
font-size: 16px
}
}
@supports(-webkit-touch-callout:none) {
.hero {
min-height: -webkit-fill-available;
height: auto
}
.hero-content {
min-height: -webkit-fill-available
}
}
.slash-divider {
text-align: center;
font-size: 2rem;
letter-spacing: 15px;
color: var(--gold);
margin: 30px 0 10px;
opacity: .5;
font-weight: 300
}
* {
box-sizing: border-box;
margin: 0;
padding: 0
}
body.page-privacy {
font-family: Inter,sans-serif;
color: var(--black);
background: var(--white);
line-height: 1.6;
min-height: 100vh;
overflow-x: hidden
}
.page-privacy a {
color: var(--color-accent);
text-decoration: none;
transition: color var(--transition-fast)
}
.page-privacy a:hover {
color: var(--black);
text-decoration: underline
}
.page-privacy .container {
width: 100%;
max-width: var(--container-max-policy);
margin: 0 auto;
padding: 0 20px
}
.policy-header {
background: linear-gradient(135deg,var(--color-secondary),var(--header-gradient-end));
color: #fff;
padding: 40px 0;
position: relative;
overflow: hidden
}
@media (min-width:768px) {
.policy-header {
padding: var(--section-gap) 0 60px
}
}
.policy-header:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml;charset=utf-8,')
}
.policy-header .container {
position: relative;
z-index: 2
}
.policy-header h1 {
font-size: 28px;
font-weight: 700;
margin-bottom: 15px;
line-height: 1.3
}
@media (min-width:768px) {
.policy-header h1 {
font-size: 44px;
margin-bottom: 20px
}
}
.policy-header p {
font-size: 16px;
color: hsla(0,0%,100%,.85);
max-width: 100%
}
@media (min-width:768px) {
.policy-header p {
font-size: 18px;
max-width: 700px
}
}
.back-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--gold);
font-weight: 500;
margin-top: 20px;
padding: 8px 16px;
border: 1px solid hsla(39,47%,60%,.3);
border-radius: 25px;
transition: all var(--transition-fast);
font-size: 14px
}
@media (min-width:768px) {
.back-link {
margin-top: 30px;
padding: 10px 20px;
font-size: 16px
}
}
.back-link:hover {
background: hsla(39,47%,60%,.1);
border-color: var(--gold);
transform: translateX(-5px);
text-decoration: none
}
.mobile-nav-toggle {
display: none;
position: fixed;
top: 20px;
right: 20px;
z-index: 12;
background: var(--color-accent);
color: #fff;
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
cursor: pointer;
align-items: center;
justify-content: center;
font-size: 20px;
box-shadow: 0 4px 12px rgba(0,0,0,.2)
}
@media (max-width:991px) {
.mobile-nav-toggle {
display: flex
}
}
.mobile-nav-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.5);
z-index: 10
}
.mobile-nav-overlay.active {
display: block
}
.policy-content {
padding: 40px 0
}
@media (min-width:768px) {
.policy-content {
padding: var(--content-padding-y) 0
}
}
.content-wrapper {
display: block
}
@media (min-width:992px) {
.content-wrapper {
display: grid;
grid-template-columns: 300px 1fr;
gap: 40px
}
}
.section-nav {
background: var(--color-surface-light);
border-radius: var(--content-radius);
padding: 25px;
margin-bottom: 30px;
position: relative
}
@media (min-width:992px) {
.section-nav {
position: sticky;
top: 30px;
align-self: start;
margin-bottom: 0
}
.section-nav.mobile-hidden {
display: block!important
}
}
@media (max-width:991px) {
.section-nav {
position: fixed;
top: 0;
left: -100%;
width: 300px;
height: 100vh;
z-index: 11;
margin: 0;
border-radius: 0;
transition: left var(--transition-fast);
overflow-y: auto
}
.section-nav.active {
left: 0
}
}
.section-nav h3 {
color: var(--black);
margin-bottom: 20px;
font-size: 18px;
display: flex;
align-items: center;
gap: 10px
}
.section-nav h3 i {
color: var(--color-accent)
}
.page-privacy .nav-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px
}
.page-privacy .nav-links a {
color: var(--color-muted);
display: flex;
align-items: center;
gap: 12px;
padding: 12px 15px;
border-radius: var(--nav-item-radius);
transition: all var(--transition-fast)
}
.page-privacy .nav-links a.active,.page-privacy .nav-links a:hover {
background: #fff;
color: var(--color-accent);
text-decoration: none;
box-shadow: 0 5px 15px rgba(0,0,0,.05)
}
.page-privacy .nav-links a i {
font-size: 12px;
opacity: .7;
min-width: 16px
}
.content-section {
background: #fff;
border-radius: var(--content-radius);
padding: 25px 20px;
margin-bottom: 20px;
box-shadow: 0 5px 20px rgba(0,0,0,.05);
border: 1px solid #eee;
scroll-margin-top: 30px
}
@media (min-width:768px) {
.content-section {
padding: 40px;
margin-bottom: 30px
}
}
.content-section h2 {
color: var(--black);
font-size: 22px;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid var(--color-surface-light);
display: flex;
align-items: center;
gap: 15px
}
@media (min-width:768px) {
.content-section h2 {
font-size: 26px;
margin-bottom: 25px
}
}
.content-section h2 i {
color: var(--color-accent);
background: rgba(26,95,62,.1);
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0
}
@media (max-width:767px) {
.content-section h2 i {
width: 40px;
height: 40px;
font-size: 16px
}
}
.content-section h3 {
color: var(--dark);
font-size: 18px;
margin: 20px 0 15px
}
@media (min-width:768px) {
.content-section h3 {
font-size: 20px;
margin: 25px 0 15px
}
}
.content-section p {
margin-bottom: 15px;
color: var(--color-muted)
}
.content-section ol,.content-section ul {
margin: 15px 0 15px 25px;
color: var(--color-muted)
}
.content-section li {
margin-bottom: 10px;
position: relative;
padding-left: 5px
}
.content-section li:before {
content: "•";
color: var(--color-accent);
font-weight: 700;
position: absolute;
left: -15px
}
.highlight-box {
background: rgba(26,95,62,.05);
border-left: 4px solid var(--color-accent);
padding: 20px;
border-radius: 0 12px 12px 0;
margin: 25px 0
}
.legal-entity {
background: var(--color-surface-light);
border-radius: 16px;
padding: 25px 20px;
margin-top: 30px;
border: 1px solid #eaeaea
}
@media (min-width:768px) {
.legal-entity {
padding: 30px;
margin-top: 40px
}
}
.legal-entity h3 {
color: var(--black);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
font-size: 20px
}
.entity-details {
display: grid;
grid-template-columns: 1fr;
gap: 15px
}
@media (min-width:768px) {
.entity-details {
grid-template-columns: repeat(2,1fr)
}
}
.detail-item {
display: flex;
flex-direction: column;
gap: 5px
}
@media (min-width:768px) {
.detail-item {
flex-direction: row;
gap: 10px
}
}
.detail-label {
font-weight: 600;
color: var(--black);
min-width: 180px;
font-size: 14px
}
.detail-value {
color: var(--color-muted);
font-size: 15px;
word-break: break-word
}
.page-privacy .scroll-top-btn {
position: fixed;
bottom: 30px;
right: 20px;
width: 50px;
height: 50px;
background: var(--color-accent);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
cursor: pointer;
z-index: 9;
box-shadow: 0 4px 15px rgba(26,95,62,.3);
transition: all var(--transition-fast);
border: none;
opacity: 0;
transform: translateY(20px);
visibility: hidden
}
.page-privacy .scroll-top-btn.visible {
opacity: 1;
transform: translateY(0);
visibility: visible
}
.scroll-top-btn:hover {
background: var(--black);
transform: scale(1.1) translateY(0)
}
.policy-footer {
background: var(--dark);
color: #fff;
padding: 40px 0 30px;
margin-top: 40px
}
@media (min-width:768px) {
.policy-footer {
padding: var(--content-padding-y) 0 30px;
margin-top: 60px
}
}
.footer-container {
display: flex;
flex-direction: column;
gap: 30px
}
@media (min-width:768px) {
.footer-container {
flex-direction: row;
justify-content: space-between;
align-items: center
}
}
.policy-footer .copyright {
color: hsla(0,0%,100%,.7);
font-size: 14px;
text-align: center
}
@media (min-width:768px) {
.policy-footer .copyright {
text-align: left
}
}
.policy-footer .footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px
}
@media (min-width:768px) {
.policy-footer .footer-links {
justify-content: flex-end
}
}
.policy-footer .footer-links a {
color: hsla(0,0%,100%,.7);
font-size: 14px;
transition: color var(--transition-fast)
}
.policy-footer .footer-links a:hover {
color: var(--gold);
text-decoration: none
}
.page-privacy .fade-up {
opacity: 0;
transform: translateY(30px);
transition: opacity .8s ease,transform .8s ease
}
.page-privacy .fade-up.visible {
opacity: 1;
transform: none
}
.page-privacy .content-section {
opacity: 0;
transform: translateY(20px);
transition: opacity .6s ease,transform .6s ease
}
.page-privacy .content-section.visible {
opacity: 1;
transform: none
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0
}
.text-center {
text-align: center
}
.mt-20 {
margin-top: 20px
}
.mb-20 {
margin-bottom: 20px
}
@media (max-width:767px) {
.hide-on-mobile {
display: none!important
}
}
body.page-privacy,body.page-privacy .content-main,body.page-privacy .content-section,body.page-privacy .content-wrapper,body.page-privacy .policy-content {
background: #fff!important;
color: #0b0b0b!important
}
body.page-privacy .content-section h3,body.page-privacy .content-section li,body.page-privacy .content-section ol,body.page-privacy .content-section p,body.page-privacy .content-section ul,body.page-privacy .detail-value {
background: transparent!important;
color: #777!important
}
body.page-privacy .content-section h2,body.page-privacy .detail-label,body.page-privacy .legal-entity h3,body.page-privacy .section-nav h3 {
color: #0b0b0b!important;
background: transparent!important
}
body.page-privacy .highlight-box,body.page-privacy .legal-entity,body.page-privacy .section-nav {
background: #f6f6f6!important
}
body.page-privacy section.content-section {
border: 1px solid #eee!important;
box-shadow: 0 5px 20px rgba(0,0,0,.05)!important
}
body.page-kursk {
padding-bottom: 0
}
@media (max-width: 768px) {
body.page-kursk {
padding-bottom: 80px
}
}
@media(min-width:769px) {
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center
}
}
.about-text {
font-size: 1.2rem;
opacity: .9;
line-height: 1.7;
margin-bottom: 20px
}
.about-highlight {
color: var(--gold);
font-weight: 600;
font-size: 1.1rem;
margin: 25px 0
}
.about-features {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 25px
}
.about-feature {
display: flex;
align-items: center;
gap: 8px;
background: hsla(39,47%,60%,.1);
padding: 10px 18px;
border-radius: 60px;
font-size: .9rem;
border: 1px solid hsla(39,47%,60%,.2)
}
.about-feature i {
color: var(--gold)
}
.about-image {
border-radius: 30px;
box-shadow: var(--shadow);
width: 100%
}
.why-grid {
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 24px
}
.why-item {
display: flex;
align-items: center;
gap: 16px;
padding: 24px 20px;
background: rgba(26,26,26,.4);
backdrop-filter: blur(6px);
border-radius: var(--border-radius-card);
border: 1px solid hsla(39,47%,60%,.08);
transition: var(--transition)
}
.why-item:hover {
border-color: var(--gold);
transform: translateY(-5px);
box-shadow: var(--shadow-hover)
}
.why-item i {
font-size: 36px;
color: var(--gold);
min-width: 50px;
text-align: center
}
.why-item span {
font-size: 1rem;
font-weight: 500;
line-height: 1.4
}
.address-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: hsla(39,47%,60%,.1);
color: var(--gold);
padding: 12px 24px;
border-radius: 60px;
font-weight: 600;
margin-bottom: 20px;
border: 1px solid hsla(39,47%,60%,.2)
}
.page-kursk .doctors-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
justify-content: center;
gap: 24px
}
.page-kursk .doctor-card {
flex: 0 1 calc(50% - 12px);
max-width: 400px
}
@media(max-width:768px) {
.why-grid {
grid-template-columns: 1fr
}
.page-kursk .doctor-card {
flex: 0 1 calc(50% - 8px);
max-width: calc(50% - 8px)
}
.page-kursk .why h2 {
white-space: nowrap;
font-size: clamp(18px,5vw,28px)
}
}
@media(max-width:390px) {
.page-kursk .why h2 {
font-size: 22px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
}
@media(max-width:576px) {
.page-kursk .doctor-card {
flex: 0 1 100%;
max-width: 100%
}
}
.page-price .price-nav {
background: hsla(0,0%,4%,.95);
border-bottom: 1px solid var(--border-light)
}
.page-price .price-nav__inner {
width: 100%
}
.page-price .price-nav .container {
padding: 0 24px
}
.page-price .price-nav__list {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px 24px;
padding: 12px 0
}
.page-price .price-nav__link {
color: hsla(0,0%,100%,.65);
font-size: 14px;
font-weight: 500;
text-decoration: none;
padding: 6px 4px;
border-bottom: 2px solid transparent;
transition: var(--transition);
white-space: nowrap
}
.page-price .price-nav__link:hover {
color: var(--color-primary)
}
.page-price .price-nav__link.is-active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
font-weight: 600
}
@media(max-width:768px) {
.page-price .price-nav__inner {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none
}
.page-price .price-nav__inner::-webkit-scrollbar {
display: none
}
.page-price .price-nav .container {
padding: 0 16px;
width: max-content;
max-width: none
}
.page-price .price-nav__list {
flex-wrap: nowrap;
justify-content: flex-start;
gap: 0 20px;
padding: 10px 0
}
}
body.page-price section {
padding: 0;
overflow: visible;
background: none!important
}
body.page-price section:nth-child(2n) {
background: none
}
body.page-price header {
position: static;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: none;
z-index: auto
}
body.page-price {
font-family: Inter,sans-serif;
background: var(--price-bg-dark);
color: var(--text-primary);
line-height: 1.5;
overflow-x: hidden
}
body.page-price .header {
display: block;
width: 100%
}
body.page-price .hero {
height: auto;
min-height: 0;
max-height: none
}
body.page-price .hero h1 {
text-shadow: none;
max-width: none;
line-height: 1.2;
font-weight: 700
}
body.page-price .hero p {
opacity: 1;
font-weight: 400
}
body.page-price .container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 24px
}
.page-price .header {
position: sticky;
top: 0;
z-index: 8;
background: hsla(0,0%,4%,.8);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-light)
}
.page-price .header-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0
}
.page-price .logo {
font-size: 28px;
font-weight: 800;
letter-spacing: -.5px;
text-decoration: none
}
.page-price .logo .neo {
color: var(--text-primary)
}
.page-price .logo .clinic {
color: var(--gold)
}
.page-price .nav-links {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
gap: 32px;
align-items: center;
list-style: none
}
.page-price .nav-links a {
color: var(--text-secondary);
text-decoration: none;
font-weight: 500;
transition: var(--transition);
font-size: 15px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0;
border-radius: 0;
background: transparent;
box-shadow: none
}
.page-price .nav-links a:hover {
color: var(--gold)
}
.page-price .nav-links .btn-primary {
background: linear-gradient(135deg,var(--gold),var(--gold-dark));
color: var(--bg-dark);
padding: 10px 24px;
border-radius: 40px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: var(--transition);
border: none;
outline: none
}
.page-price .nav-links .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px hsla(39,47%,60%,.3)
}
.page-price .nav-links .btn-outline {
background: hsla(0,0%,100%,.05);
color: var(--gold);
padding: 10px 24px;
border-radius: 40px;
font-weight: 500;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: var(--transition);
border: 1px solid var(--border-light);
outline: none
}
.page-price .nav-links .btn-outline:hover {
background: hsla(39,47%,60%,.1);
border-color: var(--gold)
}
.page-price .btn-primary {
background: linear-gradient(135deg,var(--gold),var(--gold-dark));
color: var(--bg-dark);
padding: 10px 24px;
border-radius: 40px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: var(--transition);
border: 1px solid hsla(0,0%,100%,.2)
}
.page-price .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px hsla(39,47%,60%,.3)
}
.page-price .btn-outline {
background: hsla(0,0%,100%,.05);
color: var(--gold);
padding: 10px 24px;
border-radius: 40px;
font-weight: 500;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: var(--transition);
border: 1px solid var(--border-light)
}
.page-price .btn-outline:hover {
background: hsla(39,47%,60%,.1);
border-color: var(--gold)
}
.page-price .hero {
position: relative;
padding: 80px 0 60px;
text-align: center;
background: var(--price-bg-dark);
overflow: hidden;
border-bottom: 1px solid var(--border-light);
height: auto;
min-height: 0
}
.page-price .hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: .4;
z-index: 0
}
.page-price .hero .container {
position: relative;
z-index: 2
}
.page-price .hero h1 {
font-size: clamp(36px,5vw,56px);
font-weight: 700;
margin-bottom: 20px;
background: linear-gradient(135deg,var(--text-primary),var(--gold-light));
-webkit-background-clip: text;
background-clip: text;
color: transparent
}
.page-price .hero p {
font-size: 18px;
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto 30px;
line-height: 1.6
}
.page-price .category-tabs {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin: 40px 0 30px
}
.page-price .category-tab {
background: hsla(0,0%,100%,.03);
border: 1px solid var(--border-light);
padding: 12px 28px;
border-radius: 60px;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
color: var(--text-secondary)
}
.page-price .category-tab:hover {
border-color: var(--gold);
color: var(--gold)
}
.page-price .category-tab.active {
background: linear-gradient(135deg,var(--gold),var(--gold-dark));
color: var(--bg-dark);
border-color: transparent
}
.page-price .price-section {
padding: 40px 0 80px
}
.page-price .category-block {
display: none;
animation: a .5s ease
}
.page-price .category-block.active {
display: block
}
@keyframes a {
0% {
opacity: 0;
transform: translateY(20px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.page-price .section-title {
font-size: 28px;
font-weight: 700;
margin-bottom: 30px;
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 15px;
border-bottom: 2px solid var(--border-light)
}
.page-price .section-title i {
color: var(--gold);
font-size: 28px
}
.page-price .price-table-wrapper {
background: var(--bg-card);
backdrop-filter: blur(10px);
border-radius: var(--radius-lg);
border: 1px solid var(--border-light);
overflow-x: auto;
margin-bottom: 30px
}
.page-price .price-table {
width: 100%;
border-collapse: collapse;
min-width: 600px
}
.page-price .price-table th {
text-align: left;
padding: 20px 24px;
background: hsla(39,47%,60%,.1);
font-weight: 600;
color: var(--gold);
border-bottom: 1px solid var(--border-light)
}
.page-price .price-table td {
padding: 16px 24px;
border-bottom: 1px solid var(--border-light);
color: var(--text-secondary)
}
.page-price .price-table tr:last-child td {
border-bottom: none
}
.page-price .price-table tr:hover td {
background: hsla(39,47%,60%,.05)
}
.page-price .price-table .service-name {
color: var(--text-primary);
font-weight: 500
}
.page-price .price-table .service-price {
color: var(--gold);
font-weight: 700;
font-size: 18px;
white-space: nowrap
}
.page-price .price-table .service-duration {
color: var(--text-muted);
font-size: 14px;
white-space: nowrap
}
.page-price .price-grid {
display: none;
grid-template-columns: 1fr;
gap: 16px;
margin-bottom: 40px
}
.page-price .price-card {
background: var(--bg-card);
backdrop-filter: blur(10px);
border-radius: var(--radius-md);
border: 1px solid var(--border-light);
padding: 20px;
transition: var(--transition)
}
.page-price .price-card:hover {
transform: translateY(-4px);
border-color: var(--gold);
box-shadow: var(--shadow-gold)
}
.page-price .price-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
gap: 15px;
flex-wrap: wrap
}
.page-price .price-card-name {
font-weight: 600;
font-size: 16px;
line-height: 1.4;
color: var(--text-primary);
flex: 1
}
.page-price .price-card-price {
font-weight: 700;
font-size: 22px;
color: var(--gold);
white-space: nowrap
}
.page-price .price-card-price small {
font-size: 14px;
font-weight: 500
}
.page-price .price-card-duration {
display: flex;
align-items: center;
gap: 8px;
color: var(--text-muted);
font-size: 13px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border-light)
}
.page-price .price-card-duration i {
color: var(--gold);
font-size: 12px
}
.page-price .info-note {
background: hsla(39,47%,60%,.05);
border-left: 4px solid var(--gold);
border-radius: var(--radius-sm);
padding: 24px;
margin-top: 50px
}
.page-price .info-note h4 {
color: var(--gold);
margin-bottom: 15px;
font-size: 18px
}
.page-price .info-note p {
color: var(--text-secondary);
font-size: 14px;
line-height: 1.6;
margin-bottom: 10px
}
.page-price .info-note ul {
color: var(--text-secondary);
font-size: 14px;
padding-left: 20px;
margin-top: 10px
}
.page-price .info-note li {
margin-bottom: 6px
}
.page-price .floating-btn {
position: fixed;
bottom: 30px;
right: 30px;
background: linear-gradient(135deg,var(--gold),var(--gold-dark));
color: var(--bg-dark);
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
text-decoration: none;
box-shadow: var(--shadow-md);
transition: var(--transition);
z-index: 7
}
.page-price .floating-btn:hover {
transform: scale(1.1);
box-shadow: 0 15px 35px hsla(39,47%,60%,.4)
}
.page-price .mobile-bottom-nav {
display: none;
position: fixed;
bottom: 20px;
left: 20px;
right: 20px;
background: hsla(0,0%,8%,.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 60px;
padding: 10px 16px;
z-index: 8;
border: 1px solid hsla(39,47%,60%,.25);
box-shadow: 0 8px 32px rgba(0,0,0,.3),0 0 0 .5px hsla(39,47%,60%,.15)
}
.page-price .mobile-nav-items {
display: flex;
justify-content: space-around;
align-items: center;
list-style: none
}
.page-price .mobile-nav-items li {
flex: 1;
text-align: center
}
.page-price .mobile-nav-items a {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
color: var(--text-secondary);
text-decoration: none;
font-size: 11px;
font-weight: 500;
transition: var(--transition);
padding: 6px 0;
border-radius: 40px
}
.page-price .mobile-nav-items a i {
font-size: 20px
}
.page-price .mobile-nav-items a.active,.page-price .mobile-nav-items a:hover {
color: var(--gold);
background: hsla(39,47%,60%,.15)
}
@media (max-width:992px) {
.page-price .nav-links {
display: none
}
.page-price .mobile-bottom-nav {
display: block
}
body.page-price {
padding-bottom: 90px
}
.page-price .floating-btn {
bottom: 100px
}
}
@media (max-width:768px) {
body.page-price {
padding-bottom: 90px
}
.page-price .container {
padding: 0 16px
}
.page-price .hero {
padding: 50px 0 40px
}
.page-price .hero h1 {
font-size: 28px
}
.page-price .hero p {
font-size: 15px
}
.page-price .section-title {
font-size: 24px
}
.page-price .category-tab {
padding: 8px 20px;
font-size: 14px
}
.page-price .mobile-bottom-nav {
bottom: 12px;
left: 12px;
right: 12px;
padding: 8px 12px
}
.page-price .mobile-nav-items a {
font-size: 10px
}
.page-price .mobile-nav-items a i {
font-size: 18px
}
}
@media (max-width:768px) {
.page-price .price-table-wrapper {
display: none
}
.page-price .price-grid {
display: grid
}
}
@media (min-width:769px) {
.page-price .price-grid {
display: none
}
.page-price .price-table-wrapper {
display: block
}
}
body.page-price ::-webkit-scrollbar {
width: 8px;
height: 8px
}
body.page-price ::-webkit-scrollbar-track {
background: var(--bg-dark)
}
body.page-price ::-webkit-scrollbar-thumb {
background: var(--gold);
border-radius: 4px
}
body.page-price ::-webkit-scrollbar-thumb:hover {
background: var(--gold-dark)
}
.page-price .expandable-section {
margin: 20px 0 30px
}
.page-price .expand-btn {
background: transparent;
border: 1px solid var(--border-light);
color: var(--gold);
padding: 12px 24px;
border-radius: 40px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
transition: var(--transition);
margin-bottom: 20px
}
.page-price .expand-btn:hover {
background: hsla(39,47%,60%,.1);
border-color: var(--gold)
}
.page-price .expandable-content {
display: none;
animation: a .3s ease
}
.page-price .expandable-content.show {
display: block
}
.page-articles .articles-hero {
padding: 120px 0 60px;
text-align: center;
background: linear-gradient(180deg,hsla(39,47%,60%,.08),transparent)
}
.page-articles .articles-hero h1 {
font-size: clamp(32px,5vw,52px);
font-weight: 800;
margin-bottom: 16px;
color: var(--text-light)
}
.page-articles .articles-hero p {
font-size: 18px;
color: var(--text-secondary);
max-width: 640px;
margin: 0 auto
}
.page-articles .articles-section {
padding: 0 0 var(--section-gap)
}
.page-articles .articles-empty {
text-align: center;
color: var(--text-muted);
font-size: 18px;
padding: 60px 0
}
.page-articles .articles-grid {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(320px,1fr));
gap: 32px
}
.page-articles .article-card {
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: var(--transition);
display: flex;
flex-direction: column
}
.page-articles .article-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-md);
border-color: var(--gold)
}
.page-articles .article-card__image-wrap {
display: block;
aspect-ratio: 16/10;
overflow: hidden
}
.page-articles .article-card__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition)
}
.page-articles .article-card:hover .article-card__image {
transform: scale(1.05)
}
.page-articles .article-card__body {
padding: 24px;
display: flex;
flex-direction: column;
flex: 1;
gap: 12px
}
.page-articles .article-card__date {
font-size: 13px;
color: var(--gold);
font-weight: 500
}
.page-articles .article-card__title {
font-size: 20px;
font-weight: 700;
line-height: 1.35
}
.page-articles .article-card__title a:hover {
color: var(--gold)
}
.page-articles .article-card__excerpt {
color: var(--text-secondary);
font-size: 15px;
line-height: 1.6;
flex: 1
}
.page-articles .article-card__btn {
align-self: flex-start;
margin-top: 8px
}
.page-articles .article-page {
padding: 120px 0 var(--section-gap)
}
.page-articles .article-back {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--gold);
font-weight: 500;
margin-bottom: 24px;
font-size: 15px
}
.page-articles .article-back:hover {
opacity: .85
}
.page-articles .article-page__date {
display: block;
color: var(--gold);
font-size: 14px;
font-weight: 500;
margin-bottom: 12px
}
.page-articles .article-page__title {
font-size: clamp(28px,4vw,44px);
font-weight: 800;
line-height: 1.2;
margin-bottom: 32px;
max-width: 900px
}
.page-articles .article-page__cover {
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: 40px;
box-shadow: var(--shadow-md);
border: 1px solid var(--border-light)
}
.page-articles .article-page__cover img {
width: 100%;
max-height: 480px;
object-fit: cover
}
.page-articles .article-page__content {
max-width: 760px;
color: var(--text-secondary);
font-size: 17px;
line-height: 1.75
}
.page-articles .article-page__content p {
margin-bottom: 20px
}
.page-articles .article-page__content p:last-child {
margin-bottom: 0
}
@media(max-width:768px) {
.page-articles .articles-hero {
padding: 100px 0 40px
}
.page-articles .articles-grid {
grid-template-columns: 1fr;
gap: 24px
}
.page-articles .article-page {
padding: 100px 0 80px
}
}
.articles-preview {
padding: 80px 0;
background: linear-gradient(180deg,rgba(26,26,26,.4),var(--bg-dark))
}
.articles-preview__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-bottom: 40px;
flex-wrap: wrap
}
.articles-preview__header h2 {
text-align: left;
margin-bottom: 0
}
.articles-preview__header h2:after {
left: 0;
transform: none
}
.articles-preview .btn-outline {
background: hsla(0,0%,100%,.03);
color: var(--gold);
border: 1px solid hsla(39,47%,60%,.25);
padding: 10px 24px;
border-radius: var(--button-radius);
font-weight: 500;
font-size: 15px;
white-space: nowrap;
transition: var(--transition);
display: inline-flex;
align-items: center
}
.articles-preview .btn-outline:hover {
background: hsla(39,47%,60%,.1);
border-color: var(--gold)
}
.articles-carousel {
display: flex;
gap: 24px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
cursor: grab;
padding: 4px 4px 16px;
scrollbar-width: thin;
scrollbar-color: var(--gold) transparent
}
.articles-carousel.is-dragging {
cursor: grabbing;
scroll-behavior: auto;
user-select: none
}
.articles-carousel::-webkit-scrollbar {
height: 6px
}
.articles-carousel::-webkit-scrollbar-thumb {
background: var(--gold);
border-radius: 3px
}
.articles-preview-card {
flex: 0 0 calc((100% - 48px) / 3);
scroll-snap-align: start;
background: rgba(26,26,26,.4);
backdrop-filter: blur(6px);
border: 1px solid hsla(39,47%,60%,.08);
border-radius: var(--border-radius-card);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: var(--shadow);
transition: var(--transition)
}
.articles-preview-card:hover {
border-color: var(--gold);
transform: translateY(-4px);
box-shadow: var(--shadow-hover)
}
.articles-preview-card__image-wrap {
display: block;
aspect-ratio: 16/10;
overflow: hidden
}
.articles-preview-card__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition)
}
.articles-preview-card:hover .articles-preview-card__image {
transform: scale(1.05)
}
.articles-preview-card__body {
padding: 20px;
display: flex;
flex-direction: column;
flex: 1;
gap: 12px
}
.articles-preview-card__title {
font-size: 18px;
font-weight: 700;
line-height: 1.35
}
.articles-preview-card__title a:hover {
color: var(--gold)
}
.articles-preview-card__excerpt {
font-size: 14px;
opacity: .8;
line-height: 1.55;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
overflow: hidden
}
.articles-preview-card__btn {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--gold);
font-weight: 600;
font-size: 14px;
margin-top: auto
}
.articles-preview-card__btn:hover {
gap: 12px
}
@media(max-width:992px) {
.articles-preview-card {
flex: 0 0 calc((100% - 24px) / 2)
}
}
@media(max-width:768px) {
.articles-preview {
padding: 60px 0
}
.articles-preview__header h2 {
font-size: clamp(28px,6vw,36px)
}
.articles-preview-card {
flex: 0 0 83.33333%
}
}
.page-404 {
padding: 100px 0 80px;
min-height: 60vh
}
.page-404__header {
text-align: center;
max-width: 720px;
margin: 0 auto 40px
}
.page-404__header h1 {
font-size: clamp(28px,5vw,42px);
margin-bottom: 20px;
color: var(--gold)
}
.page-404__subtitle {
font-size: clamp(16px,2vw,18px);
opacity: .9;
line-height: 1.6;
margin-bottom: 28px
}
.page-404__home-btn {
margin-bottom: 12px
}
.page-404__game-wrap {
position: relative;
max-width: 640px;
margin: 0 auto
}
.page-404__canvas {
display: block;
width: 100%;
max-width: 640px;
height: auto;
aspect-ratio: 640/320;
border-radius: 16px;
border: 1px solid var(--color-primary);
background: #fff;
cursor: pointer;
touch-action: manipulation
}
.game-hint {
color: #888;
font-size: 13px;
text-align: center;
margin-top: 10px;
line-height: 1.7;
max-width: 640px;
margin-left: auto;
margin-right: auto
}
.not-found-nav {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-top: 32px
}
.page-404 .btn-primary {
background: linear-gradient(135deg,var(--gold),var(--gold-dark));
color: var(--bg-dark);
padding: 10px 24px;
border-radius: var(--button-radius);
font-weight: 600;
font-size: 15px;
display: inline-flex;
align-items: center;
gap: 8px;
transition: var(--transition);
border: none;
text-decoration: none
}
.page-404 .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px hsla(39,47%,60%,.3)
}
.page-404 .btn-outline {
background: hsla(0,0%,100%,.05);
color: var(--gold);
padding: 10px 24px;
border-radius: var(--button-radius);
font-weight: 500;
font-size: 15px;
display: inline-flex;
align-items: center;
gap: 8px;
transition: var(--transition);
border: 1px solid var(--border-light);
text-decoration: none
}
.page-404 .btn-outline:hover {
background: hsla(39,47%,60%,.1);
border-color: var(--gold)
}
@media(max-width:768px) {
.page-404 {
padding: 80px 0 60px
}
}
.page-price .price-db-list {
display: flex;
flex-direction: column;
gap: 40px
}
.page-price .price-category {
background: var(--bg-card,rgba(26,26,26,.6));
backdrop-filter: blur(10px);
border-radius: var(--radius-lg,28px);
border: 1px solid var(--border-light,hsla(39,47%,60%,.2));
padding: 28px 24px
}
.page-price .price-category__title {
font-size: 24px;
font-weight: 700;
color: var(--gold,#c9a86a);
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid var(--border-light,hsla(39,47%,60%,.2))
}
.page-price .price-category__rows {
display: flex;
flex-direction: column;
gap: 0
}
.page-price .price-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 16px 24px;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid hsla(0,0%,100%,.06)
}
.page-price .price-row:last-child {
border-bottom: none
}
.page-price .price-name {
font-size: 15px;
color: var(--text-primary,#fff);
line-height: 1.4
}
.page-price .price-duration {
font-size: 13px;
color: var(--text-muted,hsla(0,0%,100%,.5));
white-space: nowrap
}
.page-price .price-value {
font-size: 16px;
font-weight: 700;
color: var(--gold,#c9a86a);
white-space: nowrap;
text-align: right
}
@media(max-width:768px) {
.page-price .price-db-list {
gap: 20px
}
.page-price .price-category {
padding: 16px 12px;
border-radius: 18px
}
.page-price .price-category__title {
font-size: 17px;
margin-bottom: 12px;
padding-bottom: 10px;
line-height: 1.3;
hyphens: none
}
.page-price .price-category__rows {
gap: 8px
}
.page-price .price-row {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px;
margin: 0;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
border-radius: 14px
}
.page-price .price-row:last-child {
border-bottom: none
}
.page-price .price-row__info {
gap: 8px;
width: 100%
}
.page-price .price-name {
font-size: 15px;
line-height: 1.45;
hyphens: none;
word-break: normal;
overflow-wrap: break-word;
text-wrap: pretty
}
.page-price .price-row__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 10px
}
.page-price .price-duration {
font-size: 12px;
white-space: nowrap;
color: hsla(0,0%,100%,.45)
}
.page-price .price-row__right {
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 10px;
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,.06)
}
.page-price .price-value {
text-align: left;
white-space: nowrap;
font-size: 17px;
align-self: flex-start
}
.page-price .price-with-discount {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
align-self: flex-start;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
max-width: 100%
}
.page-price .price-with-discount::-webkit-scrollbar {
display: none
}
.page-price .price-original {
font-size: 12px;
white-space: nowrap;
flex-shrink: 0
}
.page-price .price-discounted {
font-size: 17px;
white-space: nowrap;
flex-shrink: 0
}
.page-price .discount-badge {
font-size: 10px;
white-space: nowrap;
flex-shrink: 0;
padding: 2px 7px
}
.page-price .btn-cart {
width: 100%;
text-align: center;
padding: 10px 16px;
font-size: 14px;
min-height: 40px
}
.page-price .price-description {
padding: 12px 0 0
}
.page-price .price-description p {
font-size: 14px;
line-height: 1.55;
text-wrap: pretty;
padding: 0 2px
}
.page-price .price-section {
padding-bottom: 8px
}
.page-price .hero h1 {
text-wrap: balance;
line-height: 1.2
}
.page-price .hero p {
text-wrap: pretty;
line-height: 1.55
}
.page-price .price-card {
padding: 14px 12px;
border-radius: 14px
}
.page-price .price-card-header {
flex-wrap: nowrap;
align-items: flex-start;
gap: 10px;
margin-bottom: 8px
}
.page-price .price-card-name {
font-size: 15px;
hyphens: none;
overflow-wrap: break-word;
text-wrap: pretty;
line-height: 1.45
}
.page-price .price-card-price {
white-space: nowrap;
flex-shrink: 0;
font-size: 16px
}
.page-price .price-card-duration {
font-size: 12px;
white-space: nowrap
}
.page-price .cert-promo {
margin-top: 32px;
padding: 28px 20px;
border-radius: 20px
}
.page-price .cert-promo__inner {
flex-direction: column;
align-items: stretch;
gap: 20px
}
.page-price .cert-promo__text h3 {
font-size: 20px
}
.page-price .cert-promo__text p {
font-size: 14px;
line-height: 1.55;
text-wrap: pretty
}
.page-price .cert-promo__amounts {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 10px
}
.page-price .cert-promo__btn {
width: 100%;
text-align: center;
padding: 14px 10px;
font-size: 15px;
min-height: 50px;
white-space: nowrap
}
.page-price .cert-promo__link {
grid-column: 1 / -1;
text-align: center;
margin-top: 6px;
padding: 14px 16px;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center
}
}
.cms-popup-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.75);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 14;
opacity: 0;
transition: opacity .25s ease
}
.cms-popup-overlay--visible {
opacity: 1
}
.cms-popup-overlay--visible .cms-popup-box {
transform: translateY(0);
opacity: 1
}
.cms-popup-box {
background: hsla(0,0%,8%,.95);
border-radius: 32px;
overflow: hidden;
max-width: 480px;
width: 100%;
position: relative;
max-height: 90vh;
overflow-y: auto;
color: #f5f5f5;
transform: translateY(20px);
opacity: 0;
transition: transform .3s ease,opacity .3s ease;
box-shadow: 0 25px 50px rgba(0,0,0,.6),0 0 0 1px hsla(39,47%,60%,.2);
border: 1px solid hsla(0,0%,100%,.06)
}
.cms-popup-close {
position: absolute;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(0,0,0,.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid hsla(0,0%,100%,.2);
color: #fff;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 4;
line-height: 1;
transition: background .2s,transform .2s
}
.cms-popup-close:hover {
background: rgba(0,0,0,.8);
transform: rotate(90deg)
}
.cms-popup-box .cms-popup-laser {
display: flex;
flex-direction: column
}
.cms-popup-box .laser-banner-image {
height: 260px;
position: relative;
flex-shrink: 0
}
.cms-popup-box .laser-banner-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block
}
.cms-popup-box .laser-banner-overlay {
position: absolute;
inset: 0;
background: linear-gradient(0deg,rgba(0,0,0,.5),transparent 70%);
pointer-events: none
}
.cms-popup-box .laser-banner-content {
padding: 20px 20px 24px;
position: relative
}
.cms-popup-box .laser-banner-badge {
position: absolute;
top: -20px;
right: 20px;
background: linear-gradient(145deg,var(--gold),var(--gold-dark));
color: var(--black);
font-weight: 800;
font-size: 26px;
padding: 8px 20px;
border-radius: 60px;
border: 2px solid hsla(0,0%,100%,.2);
box-shadow: 0 10px 20px rgba(0,0,0,.3);
z-index: 2
}
.cms-popup-box .laser-banner-title {
font-size: 22px;
font-weight: 800;
margin: 0 0 8px;
color: var(--gold);
line-height: 1.2;
padding-right: 80px
}
.cms-popup-box .laser-banner-desc {
font-size: 15px;
opacity: .9;
margin: 0 0 12px;
line-height: 1.5;
color: hsla(0,0%,100%,.85)
}
.cms-popup-box .laser-banner-features {
list-style: none;
padding: 0;
margin: 0 0 16px
}
.cms-popup-box .laser-banner-features li {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
margin-bottom: 8px;
color: hsla(0,0%,100%,.85)
}
.cms-popup-box .laser-banner-features li:last-child {
margin-bottom: 0
}
.cms-popup-box .laser-banner-features i {
color: var(--gold);
font-size: 16px;
flex-shrink: 0
}
.cms-popup-box .laser-banner-actions {
display: flex;
gap: 10px;
align-items: stretch
}
.cms-popup-box .laser-banner-btn {
flex: 1;
padding: 12px 14px;
border-radius: 60px;
font-weight: 600;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: var(--transition);
cursor: pointer;
text-decoration: none;
background: hsla(0,0%,100%,.05);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid hsla(39,47%,60%,.3);
color: var(--gold)
}
.cms-popup-box .laser-banner-btn-primary {
background: linear-gradient(145deg,var(--gold),var(--gold-dark));
color: var(--black);
border: 1px solid hsla(0,0%,100%,.2)
}
.cms-popup-box .laser-banner-btn-primary:hover {
background: linear-gradient(145deg,var(--gold-light),var(--gold));
transform: translateY(-2px)
}
.cms-popup-box .laser-banner-btn-secondary:hover {
background: hsla(39,47%,60%,.2);
transform: translateY(-2px)
}
.cms-popup-box .laser-banner-phone {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 12px;
font-size: 15px;
font-weight: 500;
padding-top: 12px;
border-top: 1px solid hsla(39,47%,60%,.2)
}
.cms-popup-box .laser-banner-phone i {
color: hsla(0,0%,100%,.6);
font-size: 14px
}
.cms-popup-box .laser-banner-phone a {
color: var(--text-light);
text-decoration: none
}
.cms-popup-box .laser-banner-phone a:hover {
color: var(--gold)
}
@media(max-width:480px) {
.cms-popup-box {
border-radius: 24px;
max-height: 85vh
}
.cms-popup-box .laser-banner-image {
height: 220px
}
.cms-popup-box .laser-banner-content {
padding: 18px 18px 22px
}
.cms-popup-box .laser-banner-actions {
flex-direction: column
}
.cms-popup-box .laser-banner-badge {
font-size: 22px;
padding: 6px 16px;
top: -18px;
right: 16px
}
}
/* ===== SEARCH ===== */
.site-search { position: relative; flex: 1; max-width: 340px; margin: 0 24px; }
.site-search__bar {
display: flex; align-items: center;
height: 38px;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 50px;
padding: 0 14px; gap: 8px;
transition: all 0.2s;
}
.site-search__bar:focus-within {
background: rgba(255,255,255,0.1);
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(201,168,76,0.12);
}
.site-search__bar--page {
max-width: 560px;
margin: 0 auto 24px;
}
.site-search__icon {
width: 14px; height: 14px;
color: rgba(255,255,255,0.4); flex-shrink: 0;
}
.site-search__input {
background: none; border: none; outline: none;
color: #fff; font-size: 13px; width: 100%;
}
.site-search__input::placeholder {
color: rgba(255,255,255,0.33);
}
.site-search__clear {
background: none; border: none;
color: rgba(255,255,255,0.4);
cursor: pointer; font-size: 12px;
display: none; padding: 0; line-height: 1;
}
.site-search__results {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0; right: 0;
min-width: 360px;
max-height: 60vh;
overflow-y: auto;
z-index: 9999;
background: #1a1a1a;
border: 1px solid rgba(201,168,76,0.2);
border-radius: 16px;
box-shadow: 0 12px 40px rgba(0,0,0,0.5);
animation: searchDrop 0.15s ease;
}
@keyframes searchDrop {
from { opacity:0; transform: translateY(-6px) }
to { opacity:1; transform: translateY(0) }
}
.search-result-item {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px; text-decoration: none;
color: inherit; transition: background 0.15s;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.search-result-item:last-child { border-bottom: none }
.search-result-item:hover { background: rgba(255,255,255,0.04) }
.search-result-thumb {
width: 48px; height: 48px;
object-fit: cover; border-radius: 8px; flex-shrink: 0;
}
.search-result-text { flex: 1; min-width: 0; }
.search-result-type {
display: inline-block;
font-size: 10px; padding: 2px 8px;
border-radius: 50px; margin-bottom: 4px;
font-weight: 600; text-transform: uppercase;
letter-spacing: 0.05em;
}
.search-result-type--service {
background: rgba(201,168,76,0.2);
color: var(--color-primary);
}
.search-result-type--price {
background: rgba(255,255,255,0.08);
color: #888;
}
.search-result-type--article {
background: rgba(100,149,237,0.2);
color: #6495ed;
}
.search-result-title {
color: #fff; font-size: 14px;
font-weight: 500; line-height: 1.3;
white-space: nowrap; overflow: hidden;
text-overflow: ellipsis;
}
.search-result-excerpt {
color: #777; font-size: 12px;
margin-top: 2px; line-height: 1.4;
white-space: nowrap; overflow: hidden;
text-overflow: ellipsis;
}
.search-result-price {
color: var(--color-primary);
font-size: 12px; font-weight: 600;
margin-top: 3px;
}
.search-section-title {
padding: 10px 16px 4px;
font-size: 11px; text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255,255,255,0.3);
background: rgba(255,255,255,0.02);
}
.search-footer {
padding: 10px 16px;
font-size: 12px; color: #555; text-align: center;
}
.search-loading {
padding: 20px; text-align: center; color: #666;
}
.search-empty {
padding: 24px 16px; text-align: center;
color: #666; font-size: 14px;
}
.search-empty span {
display: block; font-size: 12px;
color: #444; margin-top: 6px;
}
.site-search--desktop { display: flex }
.site-search--mobile { display: none }
@media (max-width: 768px) {
.site-search--desktop { display: none }
.site-search--mobile {
display: flex;
width: calc(100% - 32px);
margin: 8px 16px;
max-width: none;
position: relative;
}
.site-search--mobile .site-search__bar {
width: 100%;
box-sizing: border-box;
}
.site-search--mobile .site-search__results {
position: absolute;
top: calc(100% + 6px);
left: 0; right: 0;
min-width: 0;
max-height: 55vh;
}
.header__search-mobile,[class*=header__mobile] {
width: 100%!important;
overflow: visible!important;
padding: 0!important;
margin: 0!important
}
.header__mobile-search-wrapper,.header__top,[class*=header] {
overflow: visible!important
}
}
.page-search {
padding: 120px 0 80px;
min-height: 60vh
}
.search-page__title {
font-size: clamp(28px,4vw,36px);
margin-bottom: 20px;
color: var(--gold)
}
.search-page__query {
color: #888;
margin-bottom: 24px
}
.search-page__section {
margin-bottom: 36px
}
.search-page__section h2 {
font-size: 20px;
color: var(--gold);
margin-bottom: 12px
}
.search-page__list {
background: hsla(0,0%,100%,.03);
border: 1px solid hsla(0,0%,100%,.08);
border-radius: 16px;
overflow: hidden
}
.search-page__item {
display: flex
}
.search-page__empty {
text-align: center;
padding: 40px 20px;
background: hsla(0,0%,100%,.03);
border-radius: 16px;
border: 1px solid hsla(0,0%,100%,.08)
}
.search-page__hint {
color: #666;
margin: 8px 0 20px
}
.search-page__links {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap
}
.cart-icon {
position: relative;
color: #fff;
display: flex;
align-items: center;
padding: 8px;
text-decoration: none;
transition: var(--transition)
}
.cart-icon:hover {
color: var(--gold)
}
.cart-badge {
position: absolute;
top: 0;
right: 0;
background: var(--gold);
color: #000;
border-radius: 50%;
width: 18px;
height: 18px;
font-size: 11px;
font-weight: 700;
justify-content: center;
line-height: 1
}
.cart-badge,.cart-toast {
display: flex;
align-items: center
}
.cart-toast {
position: fixed;
bottom: 80px;
right: 20px;
background: #1a1a1a;
border: 1px solid var(--gold);
border-radius: 12px;
padding: 12px 20px;
gap: 10px;
z-index: 100;
transform: translateX(120%);
transition: transform .3s;
color: #fff;
font-size: 14px;
box-shadow: 0 8px 24px rgba(0,0,0,.4)
}
.cart-toast--show {
transform: translateX(0)
}
.cart-toast a {
text-decoration: none;
font-weight: 600
}
.btn-cart,.cart-toast a {
color: var(--gold);
font-size: 13px;
white-space: nowrap
}
.btn-cart {
background: transparent;
border: 1px solid var(--gold);
border-radius: 50px;
padding: 6px 16px;
cursor: pointer;
transition: all .2s;
font-family: inherit
}
.btn-cart.btn--added,.btn-cart:hover {
background: var(--gold);
color: #000
}
.page-price .price-row {
grid-template-columns: 1fr auto;
gap: 16px 20px
}
.page-price .price-row__right {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: nowrap;
justify-content: flex-end
}
.price-with-discount {
display: flex;
flex-direction: column;
gap: 2px;
align-items: flex-end
}
.price-original {
text-decoration: line-through;
color: hsla(0,0%,100%,.4);
font-size: 13px
}
.price-discounted {
color: var(--gold);
font-weight: 700;
font-size: 18px
}
.discount-badge {
background: rgba(201,168,76,.15);
border: 1px solid rgba(201,168,76,.3);
color: var(--gold);
font-size: 11px;
padding: 2px 8px;
border-radius: 50px;
width: fit-content
}
.page-cart {
padding: 120px 0 80px;
min-height: 60vh
}
.page-cart .container {
position: relative
}
.cart-page__title {
font-size: clamp(28px,4vw,40px);
font-weight: 700;
margin-bottom: 0;
color: var(--gold);
border: none;
padding-bottom: 0;
position: relative;
z-index: 2
}
.cart-page__divider {
position: relative;
z-index: 0;
height: 1px;
min-height: 1px;
max-height: 1px;
background: linear-gradient(90deg,var(--gold),transparent);
margin: 12px 0 24px;
display: block;
border: none;
overflow: hidden;
pointer-events: none
}
.cart-divider,.cart-empty__line,.cart-page--empty .cart-page__divider,.cart-page__divider[style*="display: none"] {
display: none!important
}
.cart-empty:after,.cart-empty:before {
display: none!important;
content: none!important
}
.cart-empty h1,.cart-empty h2 {
border: none!important;
border-bottom: none!important;
position: relative;
z-index: 1
}
.cart-empty {
position: relative;
z-index: 1;
text-align: center;
padding: 60px 20px;
margin-top: 24px;
background: var(--bg-card);
border-radius: var(--radius-lg);
border: 1px solid var(--border-light)
}
.cart-empty__icon {
font-size: 48px;
margin-bottom: 16px
}
.cart-empty h2 {
margin-bottom: 8px
}
.cart-empty p {
color: var(--text-muted);
margin-top: 16px;
margin-bottom: 24px;
position: relative;
z-index: 1
}
.cart-layout {
display: grid;
grid-template-columns: 7fr 5fr;
gap: 32px;
align-items: start
}
.cart-items {
background: var(--bg-card);
border-radius: var(--radius-lg);
border: 1px solid var(--border-light);
padding: 8px 20px
}
.cart-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid hsla(0,0%,100%,.06)
}
.cart-item:last-child {
border-bottom: none
}
.cart-item__name {
font-weight: 600;
margin-bottom: 4px
}
.cart-item__price {
color: var(--gold);
font-size: 14px
}
.cart-item__actions {
gap: 12px
}
.cart-item__actions,.cart-qty {
display: flex;
align-items: center
}
.cart-qty {
gap: 8px;
background: hsla(0,0%,100%,.05);
border-radius: 50px;
padding: 4px
}
.cart-qty__btn {
width: 28px;
height: 28px;
border: none;
border-radius: 50%;
background: hsla(39,47%,60%,.15);
color: var(--gold);
cursor: pointer;
font-size: 16px;
line-height: 1
}
.cart-qty__val {
min-width: 20px;
text-align: center;
font-weight: 600
}
.cart-item__remove {
width: 32px;
height: 32px;
border: none;
border-radius: 50%;
background: rgba(255,80,80,.15);
color: #ff6b6b;
cursor: pointer;
font-size: 20px;
line-height: 1
}
.cart-checkout {
background: var(--bg-card);
border-radius: var(--radius-lg);
border: 1px solid var(--border-light);
padding: 24px;
display: flex;
flex-direction: column;
gap: 24px
}
.cart-checkout__block h3 {
font-size: 18px;
margin-bottom: 16px;
color: var(--gold)
}
.cart-field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 12px
}
.cart-field span {
font-size: 13px;
color: var(--text-muted)
}
.cart-field input {
padding: 12px 16px;
border-radius: 12px;
border: 1px solid var(--border-light);
background: hsla(0,0%,100%,.05);
color: #fff;
font-size: 15px;
font-family: inherit
}
.cart-field input:focus {
outline: none;
border-color: var(--gold)
}
.cart-yclients-status {
margin-top: 12px;
color: var(--gold);
font-size: 14px
}
.btn-yclients {
width: 100%;
justify-content: center;
margin-bottom: 8px
}
.btn-yclients--outline {
background: transparent;
border: 1px solid rgba(201,168,76,.45);
color: var(--gold);
}
.cart-booking-actions {
display: flex;
flex-direction: column;
gap: 8px;
}
.cart-booking-hint {
color: #999;
font-size: 13px;
line-height: 1.5;
margin: 0 0 12px;
}
.cart-booking-confirmed .cart-booking-hint {
margin-top: 12px;
margin-bottom: 0;
}
.cart-booking-lookup {
margin-top: 14px;
}
.cart-booking-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.cart-booking-pick {
width: 100%;
text-align: left;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid rgba(201,168,76,.3);
background: rgba(201,168,76,.08);
color: #eee;
cursor: pointer;
font-size: 14px;
}
.cart-booking-pick:hover {
border-color: var(--gold);
color: var(--gold);
}
.cart-item__meta {
margin-top: 4px;
font-size: 12px;
color: var(--gold);
opacity: .85;
}
.selected-time {
display: flex;
gap: 8px;
align-items: center;
background: rgba(201,168,76,.1);
border: 1px solid rgba(201,168,76,.3);
border-radius: 12px;
padding: 12px 16px;
color: var(--gold);
margin-top: 12px
}
.selected-time button {
background: transparent;
border: none;
color: var(--gold);
cursor: pointer;
font-size: 13px;
text-decoration: underline;
margin-left: auto
}
.cart-notice {
margin-top: 24px;
padding: 16px 20px;
background: rgba(255,193,7,.08);
border: 1px solid rgba(255,193,7,.25);
border-radius: 12px;
color: hsla(0,0%,100%,.75);
font-size: 14px;
line-height: 1.5
}
.cart-summary {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px
}
.cart-summary__row {
gap: 12px;
font-size: 14px;
color: var(--text-muted)
}
.cart-summary__row,.cart-summary__total {
display: flex;
justify-content: space-between
}
.cart-summary__total {
align-items: center;
padding-top: 12px;
border-top: 1px solid var(--border-light);
font-size: 18px;
margin-bottom: 16px
}
.cart-summary__total strong {
color: var(--gold);
font-size: 22px
}
.cart-checkout__error {
color: #ff6b6b;
font-size: 13px;
min-height: 18px;
margin-bottom: 8px
}
.cart-pay-btn {
width: 100%;
justify-content: center;
padding: 14px 24px;
font-size: 16px
}
.btn-outline {
background: transparent;
border: 1px solid var(--gold);
color: var(--gold)
}
.btn-outline:hover {
background: hsla(39,47%,60%,.1)
}
.payment-result {
padding: 140px 0 80px;
min-height: 60vh
}
.payment-result__inner {
max-width: 560px;
margin: 0 auto;
text-align: center
}
.payment-result__icon {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
font-weight: 700;
margin: 0 auto 24px
}
.payment-result__icon--success {
background: linear-gradient(135deg,var(--gold),var(--gold-dark));
color: #000
}
.payment-result__icon--fail {
background: rgba(255,80,80,.15);
color: #ff6b6b;
border: 2px solid #ff6b6b
}
.payment-result h1 {
margin-bottom: 16px;
font-size: clamp(24px,4vw,32px)
}
.payment-result__order {
margin-bottom: 24px;
color: var(--text-muted)
}
.payment-result__items {
text-align: left;
background: var(--bg-card);
border-radius: var(--radius-lg);
border: 1px solid var(--border-light);
padding: 20px;
margin-bottom: 24px
}
.payment-result__items h3 {
font-size: 16px;
color: var(--gold);
margin-bottom: 12px
}
.payment-result__items ul {
list-style: none;
padding: 0;
margin: 0
}
.payment-result__items li {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid hsla(0,0%,100%,.06);
font-size: 14px
}
.payment-result__items li:last-child {
border-bottom: none
}
.payment-result__datetime {
margin-bottom: 16px;
color: var(--gold)
}
.payment-result__note {
color: var(--text-muted);
margin-bottom: 24px;
line-height: 1.6
}
.payment-result__phone {
margin-bottom: 24px
}
.payment-result__phone a {
color: var(--gold);
font-size: 18px;
text-decoration: none
}
@media(max-width:768px) {
.cart-layout {
grid-template-columns: 1fr
}
header .cart-icon {
padding: 6px
}
}
.page-certificates {
padding: 120px 0 80px;
min-height: 60vh
}
.certificates-page {
padding: 0
}
.certificates-page .section-title {
font-size: clamp(28px,4vw,40px);
font-weight: 700;
text-align: center;
color: var(--color-primary);
margin-bottom: 12px
}
.certificates-page .section-subtitle {
text-align: center;
color: var(--text-muted);
max-width: 560px;
margin: 0 auto;
line-height: 1.6
}
.cert-cards {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
gap: 24px;
padding: 32px 0
}
.cert-card {
background: #1a1a1a;
border: 1px solid rgba(201,168,76,.2);
border-radius: 20px;
padding: 32px 24px;
text-align: center;
transition: .3s
}
.cert-card:hover {
border-color: var(--color-primary);
box-shadow: 0 8px 32px rgba(201,168,76,.1)
}
.cert-card__icon {
font-size: 40px;
margin-bottom: 16px
}
.cert-card__amount {
font-size: 36px;
font-weight: 900;
color: var(--color-primary);
margin: 16px 0
}
.cert-card__desc {
color: #888;
font-size: 14px;
line-height: 1.6;
margin-bottom: 24px
}
.cert-card__btn {
width: 100%
}
.certificates-page .btn-primary {
background: linear-gradient(145deg,var(--gold),var(--gold-dark));
color: #000;
border: none;
border-radius: 50px;
padding: 12px 24px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: all .2s
}
.certificates-page .btn-primary:hover {
transform: translateY(-2px);
filter: brightness(1.05)
}
.cert-card--custom .cert-custom-input {
display: flex;
align-items: center;
gap: 8px;
margin: 16px 0
}
.cert-amount-input {
background: #222;
border: 1px solid hsla(0,0%,100%,.1);
border-radius: 12px;
padding: 10px 16px;
color: #fff;
font-size: 18px;
width: 100%;
text-align: center;
font-family: inherit
}
.cert-amount-input:focus {
border-color: var(--color-primary);
outline: none
}
.cert-currency {
color: var(--color-primary);
font-size: 18px;
font-weight: 700
}
.page-cart .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 12px
}
.page-cart .form-group {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 12px
}
.page-cart .form-group label {
font-size: 13px;
color: var(--text-muted)
}
.page-cart .form-group input {
padding: 12px 16px;
border-radius: 12px;
border: 1px solid var(--border-light);
background: hsla(0,0%,100%,.05);
color: #fff;
font-size: 15px;
font-family: inherit
}
.page-cart .form-group input:focus {
outline: none;
border-color: var(--gold)
}
.consent-checkbox {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
margin: 16px 0
}
.consent-checkbox input[type=checkbox] {
width: 18px;
height: 18px;
accent-color: var(--color-primary);
flex-shrink: 0;
margin-top: 2px;
cursor: pointer
}
.consent-checkbox span {
font-size: 14px;
color: #aaa;
line-height: 1.5
}
.consent-checkbox a {
color: var(--color-primary)
}
@media(max-width:768px) {
.cert-cards,.page-cart .form-row {
grid-template-columns: 1fr
}
}
.cert-promo {
margin: 56px 0 0;
background: linear-gradient(135deg,#1a1a1a,#222);
border: 1px solid rgba(201,168,76,.25);
border-radius: 24px;
padding: 40px 48px
}
.cert-promo__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap
}
.cert-promo__text h3 {
color: var(--color-primary);
margin: 0 0 12px;
font-size: 24px;
line-height: 1.25
}
.cert-promo__text p {
color: #888;
margin: 0;
font-size: 15px;
line-height: 1.55;
max-width: 420px
}
.cert-promo__amounts {
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap
}
.cert-promo__btn {
background: rgba(201,168,76,.1);
border: 1px solid rgba(201,168,76,.4);
color: var(--color-primary);
border-radius: 50px;
padding: 14px 28px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all .2s;
font-family: inherit;
min-height: 48px;
white-space: nowrap
}
.cert-promo__btn:hover {
background: var(--color-primary);
color: #000
}
.cert-promo__link {
color: hsla(0,0%,100%,.55);
font-size: 15px;
text-decoration: none;
white-space: nowrap;
padding: 12px 16px;
border-radius: 50px;
border: 1px solid rgba(255,255,255,.1);
transition: color .2s,border-color .2s,background .2s
}
.cert-promo__link:hover {
color: var(--color-primary);
border-color: rgba(201,168,76,.35);
background: rgba(201,168,76,.06)
}
.cert-promo__hint {
color: #666;
font-size: 13px
}
.cert-promo--info .cert-promo__amounts {
flex-direction: column;
align-items: flex-start;
gap: 8px
}
@media(max-width:768px) {
.cert-promo {
padding: 28px 22px;
border-radius: 20px;
margin-top: 36px
}
.cert-promo__inner {
flex-direction: column;
align-items: stretch;
gap: 20px
}
.cert-promo__text h3 {
font-size: 20px
}
.cert-promo__text p {
font-size: 14px;
max-width: none
}
.cert-promo__amounts {
width: 100%;
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 10px
}
.cert-promo__btn {
width: 100%;
padding: 14px 10px;
font-size: 15px;
min-height: 50px
}
.cert-promo__link {
grid-column: 1 / -1;
text-align: center;
margin-top: 6px;
padding: 14px 16px;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center
}
}
.cert-info-block {
margin: 48px 0;
padding: 0 0 48px
}
.cert-info-block__inner {
display: flex;
gap: 48px;
align-items: center;
background: #1a1a1a;
border: 1px solid rgba(201,168,76,.25);
border-radius: 24px;
padding: 40px
}
.cert-info-block__text {
flex: 1
}
.cert-info-block__text h3 {
color: var(--color-primary);
font-size: 22px;
margin: 0 0 12px
}
.cert-info-block__text p {
color: #aaa;
font-size: 15px;
margin: 0 0 16px
}
.cert-info-block__list {
list-style: none;
padding: 0;
margin: 0 0 24px
}
.cert-info-block__list li {
color: #888;
font-size: 14px;
padding: 4px 0;
padding-left: 16px;
position: relative
}
.cert-info-block__list li:before {
content: "—";
position: absolute;
left: 0;
color: var(--color-primary)
}
.cert-info-block__cards {
display: flex;
flex-direction: column;
gap: 12px
}
.cert-mini-card {
background: rgba(201,168,76,.08);
border: 1px solid rgba(201,168,76,.3);
border-radius: 14px;
padding: 16px 28px;
text-align: center
}
.cert-mini-card__amount {
font-size: 24px;
font-weight: 800;
color: var(--color-primary)
}
@media(max-width:768px) {
.cert-info-block__inner {
flex-direction: column;
padding: 20px 16px!important
}
.cert-info-block__cards {
display: grid!important;
grid-template-columns: repeat(3,1fr)!important;
gap: 8px!important;
width: 100%!important
}
.cert-mini-card {
padding: 12px 8px!important;
min-width: 0!important;
flex: none
}
.cert-mini-card__amount {
font-size: 16px!important;
white-space: nowrap!important
}
}
.cert-main-block {
padding: 80px 0
}
.cert-main-block__inner {
display: flex;
gap: 64px;
align-items: center;
background: linear-gradient(135deg,#141414,#1e1e1e);
border: 1px solid rgba(201,168,76,.2);
border-radius: 28px;
padding: 56px 48px
}
.cert-main-block__image {
flex: 0 0 360px
}
.cert-main-block__img {
width: 100%;
border-radius: 20px;
object-fit: cover;
aspect-ratio: 4/3
}
.cert-main-block__placeholder {
width: 100%;
aspect-ratio: 4/3;
background: rgba(201,168,76,.06);
border: 2px dashed rgba(201,168,76,.2);
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
font-size: 48px
}
.cert-main-block__placeholder p {
color: #555;
font-size: 14px;
margin: 0
}
.cert-main-block__content {
flex: 1
}
.cert-main-block__label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--color-primary);
opacity: .8
}
.cert-main-block__title {
font-size: 36px;
font-weight: 800;
margin: 12px 0 16px;
line-height: 1.2
}
.cert-main-block__desc {
color: #888;
font-size: 16px;
line-height: 1.7;
margin-bottom: 28px
}
.cert-main-block__amounts {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 32px
}
.cert-amount-badge {
background: rgba(201,168,76,.1);
border: 1px solid rgba(201,168,76,.3);
color: var(--color-primary);
border-radius: 50px;
padding: 8px 18px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
display: inline-block;
transition: all .2s;
cursor: pointer
}
.cert-amount-badge:hover {
background: var(--color-primary);
color: #000;
transform: translateY(-2px)
}
.cert-amount-badge--any {
background: transparent;
border-style: dashed;
color: rgba(201,168,76,.6)
}
.cert-main-block .btn-primary,.cert-main-block__btn.btn-primary {
background: linear-gradient(145deg,var(--gold),var(--gold-dark));
color: #000;
border: none;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
display: inline-block;
transition: all .2s;
cursor: pointer
}
.cert-main-block .btn-primary:hover {
transform: translateY(-2px);
filter: brightness(1.05)
}
.cert-main-block__btn {
font-size: 16px;
padding: 14px 36px
}
@media(max-width:768px) {
.cert-main-block {
padding: 48px 0
}
.cert-main-block__inner {
flex-direction: column;
padding: 32px 24px;
gap: 32px
}
.cert-main-block__image {
flex: none;
width: 100%
}
.cert-main-block__title {
font-size: 26px
}
.cert-main-block__btn {
width: 100%;
text-align: center
}
}
.cert-card__offline {
color: var(--color-primary);
font-size: 14px;
font-weight: 600;
margin: 0;
opacity: .85
}
.cert-kursk-studios {
margin-top: 56px;
padding: 40px;
background: #1a1a1a;
border: 1px solid rgba(201,168,76,.2);
border-radius: 24px
}
.cert-kursk-studios h2 {
font-size: 24px;
margin: 0 0 24px;
color: var(--color-primary)
}
.cert-kursk-studios__grid {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
gap: 24px;
margin-bottom: 32px
}
.cert-kursk-studio h3 {
font-size: 18px;
margin: 0 0 8px
}
.cert-kursk-studio p {
color: #888;
margin: 0 0 6px;
font-size: 15px
}
.cert-kursk-studio a {
color: var(--color-primary);
text-decoration: none
}
.cert-kursk-studio a:hover {
text-decoration: underline
}
.cert-kursk-actions {
display: flex;
flex-wrap: wrap;
gap: 12px
}
@media(max-width:768px) {
.cert-kursk-studios {
padding: 24px 20px
}
.cert-kursk-actions {
flex-direction: column
}
.cert-kursk-actions .btn-outline,.cert-kursk-actions .btn-primary {
width: 100%;
text-align: center
}
}
/* ===== REQUISITES ===== */
.requisites-page{padding:60px 0;max-width:800px;margin:0 auto}
.requisites-table{
background:#1a1a1a;
border-radius:16px;
overflow:hidden;
margin:32px 0;
border:1px solid rgba(255,255,255,0.06);
}
.req-row{
display:flex;
padding:16px 24px;
border-bottom:1px solid rgba(255,255,255,0.05);
gap:24px;
align-items:flex-start;
}
.req-row:last-child{border-bottom:none}
.req-row--section{
border-top:2px solid rgba(201,168,76,0.2);
margin-top:8px;
}
.req-label{color:#888;font-size:14px;min-width:200px;flex-shrink:0}
.req-value{color:#fff;font-size:14px}
.req-value a{color:var(--color-primary);text-decoration:none}
.req-value a:hover{text-decoration:underline}
.requisites-terms{margin-top:48px}
.requisites-terms h2{font-size:24px;margin:0 0 8px}
.terms-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-top:24px;
}
.terms-card{
background:#1a1a1a;
border-radius:14px;
padding:24px;
border:1px solid rgba(255,255,255,0.06);
}
.terms-card h3{color:var(--color-primary);font-size:16px;margin:0 0 10px}
.terms-card p{color:#888;font-size:14px;line-height:1.6;margin:0}
@media(max-width:768px){
.req-row{flex-direction:column;gap:4px}
.req-label{min-width:auto}
.terms-grid{grid-template-columns:1fr}
}
/* ===== TERMS PAGE ===== */
.terms-page{padding:60px 0;max-width:800px;margin:0 auto}
.terms-page__intro{color:#888;font-size:16px;line-height:1.6;margin:16px 0 40px}
.terms-page__section{margin-bottom:36px}
.terms-page__section h2{font-size:20px;color:var(--color-primary);margin:0 0 12px}
.terms-page__section h3{font-size:16px;color:#ddd;margin:20px 0 8px}
.terms-page__section p,.terms-page__section li{color:#ccc;font-size:15px;line-height:1.7}
.terms-page__section ul,.terms-page__section ol{padding-left:20px;margin:12px 0}
.terms-page__section a{color:var(--color-primary)}
.terms-contact{margin-top:24px;padding:16px 18px;border-left:3px solid var(--color-primary);background:rgba(201,168,106,.08);color:#ccc;line-height:1.7}
/* ===== PRICE DESCRIPTION ===== */
.price-description{padding:24px 0 0;text-align:center}
.price-description p{
color:#aaa;
font-size:16px;
line-height:1.7;
max-width:720px;
margin:0 auto;
}
/* ===== SERVICE MODAL ===== */
.service-modal{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
padding:20px;
}
.service-modal__overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,0.8);
}
.service-modal__box{
position:relative;
background:#1a1a1a;
border-radius:20px;
max-width:680px;
width:100%;
max-height:85vh;
overflow-y:auto;
z-index:1;
border:1px solid rgba(255,255,255,0.08);
}
.service-modal__close{
position:sticky;
top:12px;
float:right;
width:36px;
height:36px;
border-radius:50%;
background:rgba(255,255,255,0.1);
border:none;
color:#fff;
cursor:pointer;
font-size:16px;
margin:12px 12px 0 0;
z-index:2;
}
.service-modal__loading,.service-modal__error{padding:48px 24px;text-align:center;color:#888}
.svc-modal__image{width:100%;max-height:240px;object-fit:cover;border-radius:20px 20px 0 0;display:block}
.svc-modal__body{padding:24px 28px 28px}
.svc-modal__title{
font-size:22px;
margin:0 0 20px;
padding-bottom:14px;
color:#fff;
text-align:left;
letter-spacing:normal;
font-weight:700;
position:relative;
}
.svc-modal__title:after{
bottom:0;
left:0;
transform:none;
width:48px;
height:2px;
}
.svc-modal__meta{color:#888;font-size:14px;margin:0 0 16px;line-height:1.5}
.svc-modal__desc{color:#ccc;font-size:15px;line-height:1.7;margin-bottom:20px}
.svc-modal__desc p{margin:0 0 12px}
.svc-modal__section{margin-bottom:18px}
.svc-modal__section h4{font-size:15px;color:var(--color-primary);margin:0 0 8px}
.svc-modal__section p{color:#aaa;font-size:14px;line-height:1.6;margin:0}
.svc-modal__section--warn h4{color:#e57373}
.svc-modal__related{margin:24px 0}
.svc-modal__related h4{font-size:15px;color:#fff;margin:0 0 10px}
.svc-related-list{display:flex;flex-wrap:wrap;gap:8px}
.svc-related-item{
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.1);
color:#fff;
padding:8px 14px;
border-radius:20px;
font-size:13px;
cursor:pointer;
transition:background 0.2s;
}
.svc-related-item:hover{background:rgba(201,168,76,0.15);border-color:rgba(201,168,76,0.3)}
.svc-modal__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.page-price .price-row__info{display:flex;flex-direction:column;gap:6px;min-width:0;align-items:flex-start}
.page-price .price-row__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.page-price .price-row:has(.price-row__info){grid-template-columns:1fr auto}
/* ===== PAYMENT LOGOS ===== */
.payment-security {
background: #1a1a1a;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 20px;
margin-top: 20px;
}
.payment-security__row {
display: flex;
align-items: center;
gap: 8px;
color: rgba(255,255,255,0.6);
font-size: 14px;
margin-bottom: 16px;
}
.payment-security__logos {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.payment-security__text {
color: #555;
font-size: 12px;
}
.pay-logo {
height: 32px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 13px;
letter-spacing: 0.05em;
padding: 0 10px;
min-width: 52px;
}
.pay-logo--visa {
background: #1A1F71;
color: #fff;
font-size: 16px;
font-style: italic;
letter-spacing: 1px;
font-family: 'Arial', sans-serif;
}
.pay-logo--mc {
background: #252525;
border: 1px solid rgba(255,255,255,0.1);
position: relative;
width: 52px;
overflow: visible;
gap: 0;
padding: 0;
}
.mc-left, .mc-right {
display: block;
width: 22px;
height: 22px;
border-radius: 50%;
position: relative;
}
.mc-left { background: #EB001B; margin-left: 4px; }
.mc-right {
background: #F79E1B;
margin-left: -8px;
z-index: 0;
}
.mc-left::after {
content: '';
position: absolute;
top: 0; right: -4px;
width: 8px; height: 22px;
background: #FF5F00;
z-index: 1;
}
.pay-logo--mir {
background: linear-gradient(135deg, #4DB45F, #27AE60);
color: #fff;
}
.pay-logo--alfa {
background: #EF3124;
color: #fff;
font-size: 20px;
font-weight: 900;
}
/* ===== FOOTER LEGAL ===== */
.footer-legal{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:8px 20px;
padding:16px 0 0;
margin-top:16px;
border-top:1px solid rgba(255,255,255,0.06);
font-size:13px;
color:#a8a8a8;
}
.footer-legal a{color:#b3b3b3;text-decoration:none}
.footer-legal a:hover{color:var(--color-primary)}
@media(max-width:768px){
.footer-legal{flex-direction:column;text-align:center;gap:8px}
}
/* ===== SERVICE PAGE ===== */
.page-service{padding-bottom:80px}
.svc-breadcrumbs {
padding: 20px 0 8px;
font-size: 13px;
color: #666;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.svc-breadcrumbs a {
color: #888;
text-decoration: none;
transition: color .2s;
}
.svc-breadcrumbs a:hover { color: var(--color-primary); }
.svc-breadcrumbs span:last-child { color: var(--color-primary); }
.svc-hero {
display: flex;
gap: 56px;
align-items: flex-start;
padding: 40px 0 48px;
}
.svc-hero__img-wrap {
flex: 0 0 480px;
border-radius: 20px;
overflow: hidden;
}
.svc-hero__img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
display: block;
}
.svc-hero__no-img {
width: 100%;
aspect-ratio: 4/3;
background: #1a1a1a;
border: 2px dashed rgba(201,168,76,.2);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #444;
font-size: 14px;
}
.svc-hero__content { flex: 1; padding-top: 8px; }
.svc-hero__title {
font-size: 32px;
font-weight: 800;
color: #fff;
margin: 0 0 16px;
line-height: 1.2;
text-align: left;
}
.svc-hero__title:after { display: none; }
.svc-hero__desc {
color: rgba(255,255,255,.65);
font-size: 16px;
line-height: 1.7;
margin: 0 0 24px;
}
.svc-hero__price {
font-size: 28px;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 12px;
}
.svc-hero__price strong { font-size: 32px; }
.svc-hero__duration {
color: #888;
font-size: 14px;
margin-bottom: 28px;
}
.svc-hero__actions {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 280px;
}
.svc-btn {
width: 100%;
text-align: center;
padding: 14px 24px;
font-size: 15px;
box-sizing: border-box;
}
.svc-body {
padding: 32px 0;
border-top: 1px solid rgba(255,255,255,.06);
color: rgba(255,255,255,.75);
font-size: 16px;
line-height: 1.8;
max-width: 860px;
}
.svc-body p { margin: 0 0 16px; }
.svc-body ul { margin: 0 0 16px; padding-left: 20px; }
.svc-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
padding: 32px 0;
border-top: 1px solid rgba(255,255,255,.06);
}
.svc-detail {
background: #1a1a1a;
border: 1px solid rgba(255,255,255,.07);
border-radius: 16px;
padding: 24px;
}
.svc-detail--warn {
border-color: rgba(255,200,0,.2);
background: rgba(255,200,0,.03);
}
.svc-detail h3 {
color: var(--color-primary);
font-size: 15px;
font-weight: 600;
margin: 0 0 10px;
text-align: left;
}
.svc-detail h3:after { display: none; }
.svc-detail p {
color: #999;
font-size: 14px;
line-height: 1.7;
margin: 0;
}
.svc-related {
padding: 40px 0;
border-top: 1px solid rgba(255,255,255,.06);
}
.svc-section-title {
font-size: 22px;
font-weight: 700;
color: #fff;
margin: 0 0 24px;
text-align: left;
}
.svc-section-title:after {
left: 0;
transform: none;
bottom: -10px;
width: 48px;
}
.svc-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
}
.svc-card {
background: #1a1a1a;
border: 1px solid rgba(255,255,255,.07);
border-radius: 16px;
overflow: hidden;
text-decoration: none;
display: flex;
flex-direction: column;
transition: border-color .2s, transform .2s;
}
.svc-card:hover {
border-color: var(--color-primary);
transform: translateY(-3px);
}
.svc-card__img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
display: block;
}
.svc-card__body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.svc-card__name {
color: #fff;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
}
.svc-card__price {
color: var(--color-primary);
font-size: 13px;
font-weight: 600;
}
.svc-card__link {
color: #666;
font-size: 12px;
margin-top: auto;
}
.svc-card:hover .svc-card__link { color: var(--color-primary); }
.page-price .price-row__link{
display:inline-flex;
align-items:center;
gap:5px;
padding:4px 11px;
border-radius:999px;
border:1px solid rgba(201,168,76,0.35);
background:rgba(201,168,76,0.08);
color:#fff;
font-size:12px;
font-weight:500;
text-decoration:none;
white-space:nowrap;
line-height:1.3;
transition:background .2s,border-color .2s,transform .15s;
-webkit-tap-highlight-color:transparent;
flex-shrink:0;
}
.page-price .price-row__link:hover,
.page-price .price-row__link:focus-visible{
background:rgba(201,168,76,0.18);
border-color:rgba(201,168,76,0.55);
color:#fff;
text-decoration:none;
outline:none;
}
.page-price .price-row__link:active{transform:scale(.97)}
@media (max-width: 768px) {
.svc-hero {
flex-direction: column;
gap: 24px;
padding: 24px 0 32px;
}
.svc-hero__img-wrap { flex: none; width: 100%; }
.svc-hero__title { font-size: 24px; }
.svc-hero__actions { max-width: 100%; }
.svc-details { grid-template-columns: 1fr; }
.svc-grid { grid-template-columns: 1fr 1fr; }
.page-price .price-row__meta { align-items: center; }
.page-price .price-row__link { padding: 6px 12px; font-size: 12px; min-height: 32px; }
}
@media (max-width: 480px) {
.svc-grid { grid-template-columns: 1fr; }
}
/* ===== YCLIENTS MODAL ===== */
html.yc-modal-open {
overflow: hidden !important;
overscroll-behavior: none;
height: 100%;
}
html.yc-modal-open body {
overflow: hidden !important;
overscroll-behavior: none;
/* не даём body стать containing block для fixed-модалки на iOS */
touch-action: none;
}
html.yc-modal-open .mobile-bottom-nav,
html.yc-modal-open .cookie-modal,
html.yc-modal-open .laser-promo-banner,
html.yc-modal-open .cms-popup,
html.yc-modal-open .cms-popup-overlay,
html.yc-modal-open .service-modal,
html.yc-modal-open .floating-appointment-btn,
html.yc-modal-open .scroll-top-btn {
visibility: hidden !important;
pointer-events: none !important;
}
.yc-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 100%;
height: 100%;
height: 100dvh;
z-index: 2147483000;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
background: rgba(0,0,0,0.82);
box-sizing: border-box;
overflow: hidden;
/* modal живёт на html — вне body со scroll-lock */
margin: 0;
}
.yc-modal__box {
position: relative;
background: #111;
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.1);
width: 100%;
max-width: 560px;
height: min(88vh, 820px);
max-height: 88vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 24px 64px rgba(0,0,0,0.7);
}
.yc-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid rgba(255,255,255,0.07);
flex: 0 0 auto;
background: #111;
}
.yc-modal__header-info {
min-width: 0;
flex: 1;
}
.yc-modal__title {
color: #fff;
font-size: 17px;
font-weight: 600;
margin: 0;
line-height: 1.25;
}
.yc-modal__subtitle {
color: #888;
font-size: 13px;
margin: 3px 0 0;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
.yc-modal__close {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255,255,255,0.1);
border: none;
color: #fff;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
}
.yc-modal__services-wrap {
padding: 0 16px 10px;
border-bottom: 1px solid rgba(255,255,255,0.06);
max-height: 100px;
overflow: auto;
flex: 0 0 auto;
background: #111;
}
.yc-modal__body {
position: relative;
flex: 1 1 auto;
min-height: 0;
background: #fff;
}
.yc-modal__loading {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
color: #888;
font-size: 14px;
background: #111;
z-index: 2;
pointer-events: none !important;
}
.yc-modal__loading[hidden],
.yc-modal__loading.is-done {
display: none !important;
}
.yc-modal__spinner {
width: 30px;
height: 30px;
border: 3px solid rgba(201,168,76,0.2);
border-top-color: #c9a84c;
border-radius: 50%;
animation: ycSpin 0.8s linear infinite;
}
@keyframes ycSpin { to { transform: rotate(360deg); } }
.yc-modal__iframe {
display: block;
width: 100%;
height: 100%;
min-height: 480px;
border: 0;
background: #fff;
pointer-events: auto;
}
.yc-modal__footer {
padding: 10px 16px;
border-top: 1px solid rgba(255,255,255,0.05);
flex: 0 0 auto;
background: #111;
}
.yc-modal__hint {
color: #777;
font-size: 12px;
text-align: center;
margin: 0;
}
/* Мобилка: полноэкран, максимум места под iframe, без редиректов */
@media (max-width: 900px) {
.yc-modal,
.yc-modal--mobile {
padding: 0;
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
align-items: stretch;
justify-content: stretch;
background: #111;
}
.yc-modal__box {
border-radius: 0;
border: none;
max-width: none;
width: 100%;
max-height: none;
height: 100%;
min-height: 0;
box-shadow: none;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
overflow: hidden;
}
.yc-modal__box:has(.yc-modal__services-wrap:not([hidden])) {
grid-template-rows: auto auto minmax(0, 1fr);
}
.yc-modal__header {
padding: 8px 8px 8px 12px;
position: relative;
z-index: 2;
flex-shrink: 0;
}
.yc-modal__title { font-size: 13px; font-weight: 700; }
.yc-modal__subtitle { font-size: 11px; -webkit-line-clamp: 2; margin-top: 2px; }
.yc-modal__close {
width: 44px;
height: 44px;
font-size: 20px;
}
.yc-modal__body {
min-height: 0;
height: 100%;
overflow: hidden;
/* отдельный stacking context без transform */
isolation: isolate;
}
.yc-modal__iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 100%;
height: 100%;
min-height: 0;
border: 0;
/* iOS: без этого иногда «немые» тапы */
-webkit-overflow-scrolling: touch;
}
.yc-modal__footer,
.yc-modal__ext,
.yc-modal__mobile-fallback {
display: none !important;
}
}
/* ===== KURSK PRICE RF ===== */
.kursk-price-rf {
padding: 48px 0;
}
.kursk-price-rf__inner {
background: #1a1a1a;
border: 1px solid rgba(201,168,76,0.2);
border-radius: 20px;
padding: 40px;
display: flex;
gap: 40px;
align-items: flex-start;
flex-wrap: wrap;
}
.kursk-price-rf__text {
flex: 1;
min-width: 280px;
}
.kursk-price-rf__text h3 {
color: var(--color-primary);
font-size: 22px;
margin: 0 0 12px;
}
.kursk-price-rf__text p {
color: #aaa;
font-size: 15px;
line-height: 1.6;
margin: 0 0 20px;
}
.kursk-price-rf__list {
list-style: none;
padding: 0;
margin: 0 0 28px;
}
.kursk-price-rf__list li {
color: #ccc;
font-size: 14px;
padding: 6px 0;
padding-left: 18px;
position: relative;
}
.kursk-price-rf__list li::before {
content: '—';
position: absolute;
left: 0;
color: var(--color-primary);
}
.kursk-price-rf__actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
.kursk-price-rf__actions .btn {
text-decoration: none;
}
.kursk-price-rf__actions .btn-outline {
background: transparent;
border: 1px solid var(--color-primary);
color: var(--color-primary);
padding: 10px 24px;
border-radius: var(--button-radius);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 10px;
transition: var(--transition);
font-size: 15px;
box-shadow: none;
text-decoration: none;
cursor: pointer;
}
.kursk-price-rf__actions .btn-outline:hover {
background: var(--color-primary);
color: #000;
transform: translateY(-2px);
}
.kursk-price-rf__note {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 14px;
padding: 20px;
max-width: 260px;
display: flex;
gap: 12px;
align-items: flex-start;
}
.kursk-price-rf__note-icon {
width: 28px;
height: 28px;
background: rgba(201,168,76,0.12);
border: 1px solid rgba(201,168,76,0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
font-size: 14px;
flex-shrink: 0;
}
.kursk-price-rf__note p {
color: #777;
font-size: 13px;
line-height: 1.6;
margin: 0;
}
@media (max-width: 768px) {
.kursk-price-rf__inner {
flex-direction: column;
padding: 24px 20px;
gap: 20px;
}
.kursk-price-rf__note {
max-width: 100%;
}
}
/* ===== CART CONFIRM (no payment) ===== */
.cart-confirm-block {
margin-top: 12px;
}
.cart-confirm-info {
display: flex;
gap: 14px;
align-items: flex-start;
background: rgba(201,168,76,0.06);
border: 1px solid rgba(201,168,76,0.2);
border-radius: 14px;
padding: 16px 20px;
margin-bottom: 16px;
}
.cart-confirm-info__icon {
font-size: 24px;
flex-shrink: 0;
}
.cart-confirm-info strong {
display: block;
color: #fff;
font-size: 15px;
margin-bottom: 4px;
}
.cart-confirm-info p {
color: #888;
font-size: 13px;
line-height: 1.5;
margin: 0;
}
.cart-submit-btn {
width: 100%;
}
/* ===== SUCCESS PAGE ===== */
.success-page {
max-width: 560px;
margin: 60px auto;
text-align: center;
padding: 0 16px;
}
.success-page__icon {
width: 72px;
height: 72px;
background: rgba(201,168,76,0.12);
border: 2px solid var(--color-primary, #c9a84c);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
color: var(--color-primary, #c9a84c);
margin: 0 auto 24px;
}
.success-page h1 {
font-size: 28px;
margin: 0 0 12px;
color: #fff;
}
.success-page__sub {
color: #888;
font-size: 15px;
margin-bottom: 32px;
}
.success-page__card {
background: #1a1a1a;
border: 1px solid rgba(255,255,255,0.07);
border-radius: 16px;
padding: 24px;
margin-bottom: 32px;
text-align: left;
}
.success-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
padding: 12px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
font-size: 14px;
}
.success-row:last-child { border-bottom: none; }
.success-row span { color: #888; }
.success-row strong { color: #fff; }
.success-page__actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 24px;
}
.success-page__hint {
color: #555;
font-size: 13px;
}
.success-page__hint a {
color: var(--color-primary, #c9a84c);
}
.hero{background:#0a0a0a url("/images/hero-poster-mobile.webp") center/cover no-repeat!important}
.footer-legal{color:#a8a8a8!important}.footer-legal a{color:#b3b3b3!important}