/* ============================================================
responsive.css — SINGLE home for the responsive layer.
Loaded LAST so it overrides without editing the 18 base files.
Phase 1: desktop fluid foundation (fixed 1920/1440 → fluid).
Mobile per-section rules are appended below in later steps.
============================================================ */
/* ---- Global safety ---- */
* { box-sizing: border-box; }
img, svg, video, canvas { max-width: 100%; }
html, body { overflow-x: clip !important; max-width: 100% !important; } /* off-screen panels (cart drawer, carousels) never create page h-scroll, ANY width */
/* ---- Full-bleed section wrappers: 1920px → fluid 100% ---- */
.hero,
.problems,
.stages,
.procedures {
width: 100% !important;
max-width: 100% !important;
}
.site-footer {
width: 100% !important;
max-width: 1920px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ---- Centered content containers: 1440px → fluid + padded ---- */
.features__container,
.problems__container,
.stages__container,
.procedures__container,
.team-container,
.academy-container,
.shop-container,
.reviews-container,
.reviews-navigation-wrapper,
.faq-container,
.about-container,
.results-container,
.footer-inner {
width: 100% !important;
max-width: 1440px !important;
margin-left: auto;
margin-right: auto;
padding-left: clamp(16px, 4vw, 40px);
padding-right: clamp(16px, 4vw, 40px);
}
/* results / about / certificate / reviews already use max-width:1920;
just guarantee they never force horizontal scroll */
.results,
.about-section,
.certificate-section,
.reviews-section,
.faq-section,
.team,
.academy,
.shop-section {
width: 100% !important;
max-width: 100% !important;
}
/* ---- Hero polish (all sizes): scrim so text never sits on the
logo/model; fluid padding; readable. Mobile overrides bg below. ---- */
.hero {
position: relative;
height: auto !important;
min-height: 88vh !important;
max-height: 100vh !important;
overflow: hidden !important;
padding: clamp(90px, 9vw, 160px) clamp(20px, 9vw, 220px) clamp(60px, 9vw, 160px) !important;
background-position: center right !important;
background-size: cover !important;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(5,4,9,0.35) 0%, rgba(5,4,9,0.15) 30%, rgba(5,4,9,0) 70%);
z-index: 0;
pointer-events: none;
}
.hero > *:not(.header) { position: relative; z-index: 1; }
.hero__content { width: min(655px, 100%) !important; }
.hero__mobile-banner { display: none; } /* desktop: hidden (bg+scrim used) */
.header__phone { display: none; } /* desktop: hidden (mobile header only) */
.hero__services-star { display: none; } /* desktop: hidden (mobile card only) */
.procedures__nav { display: none; } /* desktop: 4-col grid, no arrows */
/* Carousel arrows — VISIBLE on all screens */
.results-nav,
.team-nav,
.academy-nav,
.shop-nav,
.cert-nav {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 12px !important;
margin-top: 24px !important;
}
.results-nav button,
.team-nav button,
.academy-nav button,
.shop-nav button,
.cert-nav button {
background: none;
border: 1.5px solid var(--accent-gold, #FDC667);
border-radius: 50%;
width: 48px;
height: 48px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.25s, transform 0.15s;
}
.results-nav button:hover,
.team-nav button:hover,
.academy-nav button:hover,
.shop-nav button:hover,
.cert-nav button:hover {
background: var(--accent-gold, #FDC667);
transform: scale(1.08);
}
.results-nav button:hover svg path,
.team-nav button:hover svg path,
.academy-nav button:hover svg path,
.shop-nav button:hover svg path,
.cert-nav button:hover svg path {
stroke: #1C1A29;
}
.results-nav svg,
.team-nav svg,
.academy-nav svg,
.shop-nav svg,
.cert-nav svg {
width: 28px;
height: 14px;
}
/* ---- Stats: never squish/concatenate (wrap + clamp) ---- */
.features__stats {
flex-wrap: wrap !important;
justify-content: center !important;
gap: clamp(20px, 3vw, 48px) clamp(24px, 4vw, 64px) !important;
}
.stat-item { min-width: 130px; }
.stat-item__number { font-size: clamp(34px, 4.2vw, 64px) !important; }
.stat-item__text,
.stat-item--text-only { font-size: clamp(15px, 1.5vw, 22px) !important; }
/* ============================================================
DESKTOP / TABLET HERO+FEATURES — FULLY FLUID (≥769).
The base CSS is fixed-px (hero 1920, content 655, container
1440, cards 420×3, btn 262) — pinning it to Figma-1920
coords broke every other width (overlap on laptop/tablet).
Here EVERYTHING is flex-wrap + clamp → scales cleanly for
ANY monitor/tablet, nothing overlaps, no horizontal scroll.
Header sits 80px from the page top (client requirement).
Side gutter = clamp(24,(100vw-1180)/2,240): 240 @1920,
shrinks below; header uses the SAME value → logo always
aligned with the title. Mobile (@768) untouched. */
@media (min-width: 769px) {
.hero {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: hidden !important;
padding-top: clamp(200px, 18vh, 280px) !important;
padding-bottom: clamp(60px, 8vw, 160px) !important;
padding-left: clamp(24px, calc((100vw - 1180px) / 2), 240px) !important;
padding-right: clamp(24px, calc((100vw - 1180px) / 2), 240px) !important;
gap: 0 !important;
background-color: #1C1A29 !important;
background-image: url('../assets/images/hero-bg.png') !important;
background-repeat: no-repeat !important;
background-position: center 25% !important;
background-size: cover !important;
}
/* Restore position for desktop to prevent being pushed down by hero > * { position: relative } */
.header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
transform: none !important;
width: 100% !important;
max-width: 100% !important;
border-radius: 0 !important;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
padding: 10px max(40px, calc((100vw - 1360px) / 2)) !important;
box-sizing: border-box !important;
z-index: 1001 !important;
transition: background 0.4s ease, backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease, box-shadow 0.4s ease !important;
}
.header.scrolled {
background: rgba(28, 26, 41, 0.95) !important;
backdrop-filter: blur(14px) saturate(120%) !important;
-webkit-backdrop-filter: blur(14px) saturate(120%) !important;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important;
}
.svc-page .header,
.product-details-page .header,
.shop-catalog-page .header,
.article-page-body .header {
background: #1C1A29 !important;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important;
}
/* nav itself fluid → fits mid-width screens without overflow,
stays 20px / gap40 at 1920 (Figma) */
.header__nav ul { gap: clamp(10px, 1.2vw, 24px) !important; }
.header__nav a { font-size: clamp(13px, 0.9vw, 16px) !important; }
/* hero text — fluid, no fixed 655 / no fragile margin pins */
.hero__content {
width: 100% !important;
max-width: 655px !important;
margin-top: 0 !important;
}
.hero__title {
font-size: clamp(30px, 3.4vw, 48px) !important;
line-height: 1.4 !important;
}
.hero__subtitle {
font-size: clamp(16px, 1.5vw, 24px) !important;
line-height: 1.6 !important;
max-width: 548px !important;
}
/* features — every row wraps + scales; no overlap ever */
.features__container {
width: 100% !important;
max-width: 1440px !important;
margin: clamp(56px, 9vw, 140px) auto 0 !important;
gap: clamp(48px, 7vw, 120px) !important;
padding: 0 !important;
}
.features__top {
flex-wrap: wrap !important;
justify-content: center !important;
gap: clamp(16px, 2.2vw, 40px) !important;
}
.btn-secondary {
width: auto !important;
min-width: 220px !important;
flex-shrink: 0 !important;
font-size: clamp(16px, 1.2vw, 20px) !important;
}
.features__services {
flex-wrap: wrap !important;
justify-content: center !important;
gap: clamp(14px, 1.6vw, 32px) !important;
}
.service-tag { font-size: clamp(15px, 1.05vw, 20px) !important; white-space: nowrap !important; }
.features__cards {
flex-wrap: wrap !important;
justify-content: center !important;
gap: clamp(20px, 3vw, 90px) !important;
}
.feature-card {
width: auto !important;
flex: 1 1 300px !important;
max-width: 420px !important;
height: auto !important;
min-height: 110px !important;
padding: 22px !important;
font-size: clamp(16px, 1.2vw, 20px) !important;
}
.features__stats {
flex-wrap: wrap !important;
justify-content: center !important;
gap: clamp(24px, 4vw, 64px) !important;
}
.stat-item__number { font-size: clamp(40px, 4.2vw, 64px) !important; line-height: 1.1 !important; }
.stat-item__text, .stat-item--text-only { font-size: clamp(16px, 1.4vw, 24px) !important; }
/* PROCEDURES grid — base is FIXED repeat(4,350px)=1400px → clipped
on any screen < ~1440 (overflow-x:hidden hid the cut cards).
Fluid auto-fit: cards wrap to available width, ALL visible. */
.procedures { width: 100% !important; max-width: 100% !important; padding: clamp(60px,8vw,160px) 0 !important; }
.procedures__container { width: 100% !important; max-width: 1280px !important; padding: 0 clamp(16px,4vw,40px) !important; }
.procedures__grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)) !important;
gap: clamp(20px, 2.5vw, 40px) !important;
width: 100% !important;
max-width: 100% !important;
justify-content: center !important;
}
.procedure-card {
width: auto !important;
max-width: 360px !important;
margin: 0 auto !important;
padding: clamp(18px, 2vw, 30px) !important;
}
.procedure-card__image {
width: 100% !important;
max-width: 264px !important;
height: auto !important;
aspect-ratio: 1 / 1 !important;
}
.procedure-card__title {
font-size: clamp(20px, 1.6vw, 24px) !important;
min-height: 0 !important;
}
.procedure-card__desc p { font-size: clamp(14px, 1.05vw, 16px) !important; }
.procedure-card__price { font-size: clamp(18px, 1.4vw, 24px) !important; }
}
/* ============================================================
UNIVERSAL ANTI-CLIP for ALL content sections (≥769).
Base CSS is fixed 1440/1920 per-section → on any screen
< ~1440 the right side was clipped (overflow-x:hidden hid
it). Only ≤768 mobile + hero/features/procedures were
fluid. This makes EVERY section's container fluid and EVERY
multi-item row wrap so nothing is ever cut off, any width.
============================================================ */
@media (min-width: 769px) {
/* sections never wider than viewport */
.problems, .stages, .results, .team, .academy, .shop-section,
.certificate-section, .reviews-section, .faq-section,
.about-section {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
}
/* map + footer: full width background */
.map-section, .site-footer {
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
overflow: hidden !important;
}
/* inner containers: fluid, centred, padded */
.problems__container, .stages__container, .results-container,
.team-container, .academy-container, .shop-container,
.certificate-container, .reviews-container, .faq-container,
.about-container {
width: 100% !important;
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: clamp(16px, 4vw, 40px) !important;
padding-right: clamp(16px, 4vw, 40px) !important;
box-sizing: border-box !important;
}
/* NON-carousel rows → wrap + centre */
.problems__tags, .problems__content, .problems__row,
.stages__cards, .academy-features, .academy-features-col,
.certificate-info, .certificate-text,
.about-top, .footer-main {
display: flex !important;
flex-wrap: wrap !important;
max-width: 100% !important;
justify-content: center !important;
gap: clamp(16px, 2vw, 32px) !important;
}
.problems__tags > *, .stages__cards > *,
.academy-features > *, .academy-features-col > *,
.certificate-info > *,
.about-top > *, .footer-main > * {
max-width: 100% !important;
flex-shrink: 1 !important;
box-sizing: border-box !important;
}
/* CAROUSEL rows → single row, overflow hidden, arrow navigation */
.before-after-grid,
.team-grid,
.academy-cards,
.certificate-cards-wrapper,
.reviews-carousel {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
gap: clamp(16px, 2vw, 32px) !important;
max-width: 100% !important;
justify-content: flex-start !important;
padding: 16px !important;
margin-top: -16px !important;
margin-left: -16px !important;
margin-right: -16px !important;
}
.before-after-grid::-webkit-scrollbar,
.team-grid::-webkit-scrollbar,
.academy-cards::-webkit-scrollbar,
.certificate-cards-wrapper::-webkit-scrollbar,
.reviews-carousel::-webkit-scrollbar {
display: none;
}
.ba-card, .team-card, .academy-card,
.cert-card-column {
flex: 0 0 auto !important;
scroll-snap-align: center !important;
box-sizing: border-box !important;
}
.review-card {
flex: 0 0 350px !important;
min-width: 300px !important;
max-width: 400px !important;
scroll-snap-align: center !important;
box-sizing: border-box !important;
}
/* any stray image never forces overflow */
.problems img, .results img, .about-section img,
.certificate-section img, .team img, .academy img,
.shop-section img, .reviews-section img { max-width: 100% !important; height: auto; }
/* hide bottom shop navigation (arrows) on desktop */
.shop-nav {
display: none !important;
}
/* --- Stages visual improvements --- */
.stages__container {
max-width: 1440px !important;
}
.stages__cards {
flex-wrap: nowrap !important;
}
.stages__cards > .stage-card {
flex: 1 1 324px !important;
max-width: 324px !important;
width: 100% !important;
min-width: 0 !important;
}
}
/* ---- Responsive Breakpoints for Carousels ---- */
/* 1. Before-After Cards (fits >= 1320px viewport) */
@media (min-width: 1320px) {
.before-after-grid {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: visible !important;
justify-content: center !important;
gap: clamp(16px, 3.5vw, 40px) !important;
scroll-snap-type: none !important;
}
.results-nav {
display: none !important;
}
.ba-card {
flex: 0 0 406px !important;
width: 406px !important;
}
}
/* 2. Academy Cards (fits >= 1160px viewport) */
@media (min-width: 1160px) {
.academy-cards {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: visible !important;
justify-content: center !important;
gap: 12px !important;
scroll-snap-type: none !important;
}
.academy-nav {
display: none !important;
}
.academy-card {
flex: 0 0 310px !important;
width: 310px !important;
}
}
/* 3. Team Grid (fits >= 1300px viewport with fluid gaps) */
@media (min-width: 1300px) {
.team-grid {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: visible !important;
justify-content: center !important;
gap: clamp(20px, 6vw, 110px) !important;
scroll-snap-type: none !important;
}
.team-nav {
display: none !important;
}
.team-card {
flex: 0 0 406px !important;
width: 406px !important;
}
}
/* 4. Certificates (fits >= 1360px viewport with fluid gaps) */
@media (min-width: 1360px) {
.certificate-cards-wrapper {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: visible !important;
justify-content: center !important;
gap: clamp(12px, 2.2vw, 32px) !important;
scroll-snap-type: none !important;
}
.cert-nav {
display: none !important;
}
.cert-card-column {
flex: 0 0 424px !important;
width: 424px !important;
}
}
/* Container width expansions for wide screens */
@media (min-width: 1440px) {
.certificate-container {
max-width: 1440px !important;
}
}
@media (min-width: 1520px) {
.results-container,
.team-container,
.academy-container,
.shop-container,
.reviews-container,
.reviews-navigation-wrapper {
max-width: 1440px !important;
}
}
/* ---- Off-canvas nav + burger for the whole NON-desktop range ----
The full inline nav (logo+nav+socials ≈1180px min) only fits
≥~1241px. Below that → burger + off-canvas (≤1240) so the nav
never overflows / causes horizontal scroll. JS toggles `.open`. */
@media (max-width: 1240px) {
html, body { overflow-x: clip !important; }
.header__nav {
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: auto !important;
width: 55vw !important;
max-width: 240px !important;
height: 100vh;
transform: none !important;
display: none !important; /* closed: removed from layout (no scroll growth) */
}
.header__nav.open {
display: flex !important;
flex-direction: column !important;
background: var(--bg-dark) !important;
border-left: 1px solid rgba(253, 198, 103, 0.3) !important;
padding: 80px 20px 40px !important;
box-shadow: -5px 0 20px rgba(0,0,0,0.5) !important;
z-index: 1001 !important;
}
.header__nav.open ul {
flex-direction: column !important;
align-items: flex-start !important;
gap: 30px !important;
display: flex !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
.header__nav.open li {
width: 100% !important;
}
.header__nav.open a {
font-size: 18px !important;
line-height: 28px !important;
display: block !important;
width: 100% !important;
text-align: left !important;
}
}
/* ---- Compact header 769–1240 (tablet / narrow desktop):
logo left + burger right, socials hidden, transparent over
hero (scrolled = solid). No desktop hero geometry here
(that is gated to ≥1241). ---- */
@media (min-width: 769px) and (max-width: 1240px) {
.header, .header.scrolled {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
.header__social { display: none !important; }
.header__actions { display: flex !important; gap: 15px !important; align-items: center !important; }
.burger-menu {
display: flex !important;
order: 9 !important;
position: relative !important;
z-index: 1002 !important;
}
.header__logo { order: 1 !important; }
.header__nav { order: 8 !important; }
}
/* ============================================================
PHASE 2 — Mobile (≤768) per Figma "Мобильная" 360px.
Single-column collapse, fluid widths, scaled type.
============================================================ */
@media (max-width: 768px) {
/* ---- Generic: kill fixed inner widths, stack rows ---- */
.hero, .hero__content,
.problems__content, .problems__col, .problems__row,
.stages__cards, .stages__card,
.procedures__grid, .procedure-card, .procedure-card__image,
.results-container, .results-features-line, .feature-item, .feature-text-block,
.before-after-grid,
.team-grid, .academy-cards,
.about-top, .about-images, .about-content,
.footer-main, .footer-inner,
.features__top, .features__services, .features__cards, .features__stats {
width: 100% !important;
max-width: 100% !important;
float: none !important;
}
/* ---- HEADER (Figma mobile: row1 logo|phone|burger, row2 socials) ---- */
.header, .header.scrolled {
position: sticky !important;
top: 0 !important;
left: auto !important;
transform: none !important;
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px 12px !important;
padding: 14px 18px !important;
background: #1C1A29 !important;
box-shadow: none !important;
border-radius: 0 !important;
z-index: 1000 !important;
}
.product-details-page .header,
.shop-catalog-page .header,
.svc-page .header,
.article-page-body .header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
max-width: 100% !important;
border-radius: 0 !important;
background: #1C1A29 !important;
z-index: 1000 !important;
}
.header__logo, .header.scrolled .header__logo {
width: 62px !important;
height: 48px !important;
order: 1;
}
.header__phone {
display: block !important;
order: 2;
color: #FFF8EA !important;
font-family: var(--font-main);
font-size: 15px !important;
text-decoration: none;
white-space: nowrap;
}
.burger-menu {
display: flex !important;
order: 3 !important;
position: relative !important;
z-index: 1005 !important;
}
/* socials → full-width centered row 2 (Figma mobile) */
.header__actions {
order: 4;
width: 100% !important;
margin: 0 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
flex-direction: row !important;
gap: 12px !important;
}
.header__social {
display: flex !important;
justify-content: center !important;
gap: 12px !important;
width: auto !important;
margin: 0 !important;
}
.header__social .social-icon {
width: 34px !important;
height: 34px !important;
}
.header__social .social-icon svg {
width: 17px !important;
height: 17px !important;
}
.header__nav { order: 5; } /* off-canvas (handled ≤992) */
/* ---- HERO (Figma mobile: real ![]()
photo banner, content below) ---- */
.hero {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
background: #1C1A29 !important; /* no bg image on mobile */
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0 !important;
padding: 0 0 80px !important; /* Figma: padding-bottom 80 */
text-align: center;
}
.hero::before { display: none !important; } /* no scrim — image is a clean banner */
/* exact Figma asset (node 5:5921, 360x340) — show full crop, no cover */
.hero__mobile-banner {
display: block !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 360 / 340;
object-fit: cover !important;
object-position: center !important;
margin: 0 !important;
}
/* Figma 5:5920: text block overlaps lower part of banner (gap -140) */
.hero__content {
margin-top: -120px !important;
width: 100% !important;
padding: 0 20px !important;
position: relative;
z-index: 2;
align-items: center !important;
text-align: center !important;
}
/* mobile wraps like Figma 5:5924 (3 lines) — ignore desktop
*/
.hero__title br { display: none !important; }
/* exact Figma 5:5924: Montserrat 400 16/27 UPPER center */
.hero__title {
font-family: 'Montserrat', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 27px !important;
letter-spacing: 0 !important;
text-transform: uppercase !important;
text-align: center !important;
color: #FFF8EA !important;
max-width: 300px !important; /* Figma 5:5924 text box → ~3 lines */
margin: 0 auto 16px auto !important;
}
/* exact Figma 5:5925: Noto Sans 400 14/20 center */
.hero__subtitle {
font-family: 'Noto Sans', sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
text-align: center !important;
color: #FFF8EA !important;
margin: 0 auto 30px !important;
max-width: 100% !important;
}
.btn-primary, .btn-secondary, .about-btn, .btn-results, .shop-footer-btn {
width: 100% !important;
max-width: 320px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ---- FEATURES (Figma mobile: tags list → button → cards → stats) ---- */
.features__container { gap: 36px !important; margin-top: 40px !important; align-items: center; }
/* Figma 5:5927: tags + button inside ONE bordered rounded card */
.features__top {
position: relative !important;
flex-direction: column-reverse !important; /* tags first, button after */
align-items: center !important;
gap: 20px !important;
width: min(340px, 100%) !important;
margin: 0 auto !important;
border: 1px solid var(--accent-gold) !important;
border-radius: 20px !important;
padding: 30px 22px !important;
box-sizing: border-box;
}
/* Figma 5:5945 decorative star at card top-left corner */
.hero__services-star {
display: block !important;
position: absolute !important;
top: 4px !important;
left: 8px !important;
width: 54px !important;
height: 54px !important;
object-fit: contain !important;
pointer-events: none !important;
z-index: 3 !important;
margin: 0 !important;
}
.features__services {
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 10px !important;
width: 100% !important;
}
.service-tag { font-size: 18px !important; }
.features__cards { flex-direction: column !important; gap: 16px !important; align-items: center; }
/* Figma 5:5938/5:5940 — metallic gradient border, blended fill,
Noto Sans 16 line-height normal, 320 wide, pad 30/22 */
.features__cards > .feature-card {
width: 100% !important;
max-width: 320px !important;
height: auto !important;
min-height: 0 !important;
padding: 30px 22px !important;
border: 1px solid transparent !important;
border-radius: 20px !important;
background:
linear-gradient(#1C1A29, #1C1A29) padding-box,
linear-gradient(180deg, #C2C8CA 0%, #D6DEDD 16%, #D7EFEF 27%, #CCD7D5 37%, #C1C8C9 47%, #BECDD0 57%, #DAF1F8 74%, #CCE5EA 89%, #CDD1D2 100%) border-box !important;
box-shadow: none !important;
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: normal !important;
color: #FFF8EA !important;
text-align: center !important;
}
.features__cards > .feature-card::before {
display: none !important;
}
.features__stats {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 28px 16px !important;
text-align: center;
justify-items: center;
}
/* ---- Section vertical rhythm (was 160px) ---- */
.problems, .stages, .procedures, .results, .team, .academy,
.shop-section, .certificate-section, .reviews-section,
.faq-section, .about-section {
padding-top: 56px !important;
padding-bottom: 56px !important;
}
/* ---- Headings scale ---- */
.problems__title, .stages__title, .procedures__title,
.results-title, .results-subtitle, .team-title, .academy-title,
.shop-title, .certificate-title, .reviews-title, .faq-title,
.about-title, .about-tagline, .map-balloon-title {
font-size: clamp(24px, 7vw, 34px) !important;
line-height: 1.25 !important;
}
/* ---- Generic two-column → stacked ---- */
.problems__content, .stages__cards, .about-top, .results-features-line {
flex-direction: column !important;
align-items: center !important;
gap: 28px !important;
}
/* ---- PROCEDURES grid 4col → 1col ---- */
.procedures__grid { grid-template-columns: 1fr !important; gap: 20px !important; }
.procedure-card { max-width: 360px; margin: 0 auto; }
.procedure-card__image { width: 100% !important; height: auto !important; aspect-ratio: 1/1; }
/* ---- BEFORE / AFTER → stacked cards ---- */
.before-after-grid {
flex-direction: column !important;
align-items: center !important;
gap: 24px !important;
}
/* fluid % layout (406x604 coord space → ratios) — fully responsive */
.ba-card {
width: min(340px, 88vw) !important;
height: auto !important;
aspect-ratio: 406 / 604;
transform: none !important;
margin: 0 !important;
flex-shrink: 0 !important;
}
.ba-image-before {
width: 53.2% !important; height: 53.6% !important;
left: 4.9% !important; top: 3.3% !important;
}
.ba-image-after {
width: 53.2% !important; height: 53.6% !important;
left: 41.9% !important; top: 43% !important;
}
.ba-badge {
height: auto !important;
padding: 5px 14px !important;
font-size: clamp(14px, 4.5vw, 20px) !important;
}
.badge-do { left: 54.4% !important; top: 16.2% !important; }
.badge-pislya { left: 5.7% !important; top: 73.7% !important; }
/* ---- TEAM / ACADEMY → single column ---- */
.team-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
.academy-cards { flex-direction: column !important; align-items: center; gap: 20px !important; }
/* ---- ABOUT ---- */
.about-top { flex-direction: column !important; gap: 28px; }
.about-images { height: auto !important; }
/* ---- FOOTER → stacked ---- */
.footer-main { flex-direction: column !important; gap: 28px; text-align: center; }
.footer-top { flex-direction: column !important; gap: 16px; align-items: center; }
.footer-socials { justify-content: center; }
/* ---- MAP ---- */
.map-section { height: auto !important; }
.map-img { width: 100% !important; height: auto !important; }
/* ---- Decorative dot dividers: never overflow ---- */
[class*="__dots"], [class*="-dots"], [class*="__divider"],
.problems__divider, .procedures__dots, .stages__dots,
.team-dots, .academy-dots, .shop-dots, .certificate-dots,
.results-features-line {
max-width: 100% !important;
overflow: hidden !important;
flex-wrap: nowrap !important;
}
/* ---- Fixed-width inner wrappers → fluid + stacked ---- */
.problems__header, .problems__content, .problems__tags,
.problems__col, .problems__row, .problems__text,
.team-header, .team-title-wrapper, .team-subtitle,
.academy-features, .academy-features-col, .academy-feature-item,
.academy-feature-text, .stages__row, .stages__text,
.reviews-header, .faq-header, .certificate-header,
.results-header, .results-subtitle-wrapper {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
/* problems tags wrap, academy two-col → stacked */
.problems__tags { display: flex !important; flex-wrap: wrap !important; justify-content: center; gap: 12px !important; }
.academy-features { flex-direction: column !important; align-items: center; gap: 20px !important; }
.academy-feature-item { flex-direction: row; }
/* shop / reviews carousels: keep swipe, card fits viewport */
.shop-card, .review-card { width: min(300px, 84vw) !important; flex-shrink: 0; }
.shop-card-image-wrap { width: 100% !important; }
/* ============================================================
BLOCK 2 — Проблеми (Figma 5:5961) — 1:1 mobile
============================================================ */
.problems { padding: 60px 0 !important; }
.problems__container { gap: 20px !important; padding: 0 !important; max-width: 100% !important; }
.problems__header { gap: 10px !important; }
.problems__title {
font-family: var(--font-heading), serif !important; /* Playfair */
font-size: 20px !important;
font-weight: 400 !important;
line-height: 28px !important;
text-transform: uppercase !important;
color: #050409 !important;
text-align: center !important;
padding: 0 20px !important;
}
.problems__divider {
gap: 8px !important;
max-width: 320px !important;
overflow: hidden !important;
flex-wrap: nowrap !important;
}
.problems__dot {
width: 6px !important; height: 6px !important;
background: #FDC667 !important;
border: 1px solid #FFDC95 !important;
flex: 0 0 6px !important;
}
.problems__content { gap: 16px !important; width: 100% !important; }
/* image banner ~200px, "Волосся:" overlaid bottom-center */
.problems__image-wrapper {
width: 100% !important;
height: 200px !important;
border-radius: 0 !important;
align-items: flex-end !important;
padding-bottom: 22px !important;
}
.problems__image-text {
font-family: 'Noto Sans', sans-serif !important;
font-size: 20px !important;
font-weight: 400 !important;
line-height: 34px !important;
color: #FFF8EA !important;
}
/* tags: gold-ring bullet, Noto Sans 14 #050409, 2-per-row + last centered */
.problems__tags {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 14px 22px !important;
max-width: 300px !important;
margin: 0 auto !important;
}
.problems__tag-item {
gap: 8px !important;
align-items: center !important;
}
.problems__tag-icon { display: none !important; }
.problems__tag-item::before {
content: "";
width: 16px; height: 16px;
flex: 0 0 16px;
border: 1px solid #FDC667;
border-radius: 50%;
background: radial-gradient(circle, #FDC667 0 4px, transparent 5px);
}
.problems__tag-text {
font-family: 'Noto Sans', sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 19.6px !important;
color: #050409 !important;
}
.problems__footer-text {
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
color: #050409 !important;
max-width: 320px !important;
margin: 0 auto !important;
}
/* ============================================================
BLOCK 3 — Етапи роботи (Figma 5:6017) — 1:1 mobile
============================================================ */
.stages {
position: relative !important;
padding: 80px 0 !important;
}
.stages__container { gap: 20px !important; padding: 0 !important; max-width: 100% !important; }
.stages__icon {
position: absolute !important;
left: -8px !important;
top: -4px !important;
width: 32px !important;
height: 32px !important;
margin: 0 !important;
z-index: 2;
}
.stages__title {
font-family: var(--font-heading), serif !important; /* Playfair */
font-size: 20px !important;
font-weight: 400 !important;
line-height: 28px !important;
text-transform: uppercase !important;
color: #FFF8EA !important;
text-align: center !important;
margin: 0 !important;
display: inline-block !important;
position: relative !important;
padding-left: 25px !important;
}
.stages .stages__cards {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: stretch !important;
gap: 12px 10px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 20px !important;
}
.stages .stage-card {
flex: 0 0 calc((100% - 10px) / 2) !important;
width: calc((100% - 10px) / 2) !important;
max-width: calc((100% - 10px) / 2) !important;
padding: 24px 12px !important;
gap: 20px !important;
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
outline: none !important;
border-radius: 20px !important;
backdrop-filter: blur(15px) !important;
-webkit-backdrop-filter: blur(15px) !important;
}
.stage-card__number-wrapper {
width: 72px !important;
height: 72px !important;
margin-bottom: 0 !important;
}
.stage-card__number {
font-family: var(--font-main), sans-serif !important;
font-size: 40px !important;
font-weight: 500 !important;
line-height: 1 !important;
color: #FFF8EA !important;
}
.stage-card__title {
font-family: var(--font-heading), serif !important; /* Playfair Display */
font-size: 18px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
color: #FFF8EA !important;
margin: 0 !important;
text-align: center !important;
}
.stage-card__title span {
display: block !important;
}
.stage-card__desc {
font-family: 'Noto Sans', sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.4 !important;
color: #FFF8EA !important;
text-align: center !important;
}
.stages__footer {
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
color: #FFF8EA !important;
max-width: 320px !important;
margin: 0 auto !important;
}
/* ============================================================
BLOCK 4 — Підбір процедур (Figma 5:6060) — 1:1 mobile
============================================================ */
.procedures { padding: 60px 0 !important; }
.procedures__container { gap: 20px !important; padding: 0 !important; max-width: 100% !important; }
.procedures__title {
font-family: var(--font-heading), serif !important; /* Playfair */
font-size: 20px !important;
font-weight: 400 !important;
line-height: 28px !important;
text-transform: uppercase !important;
color: #050409 !important;
text-align: center !important;
margin: 0 0 10px 0 !important;
max-width: 320px !important;
}
.procedures__dots { gap: 8px !important; margin: 0 0 8px 0 !important; max-width: 320px !important; overflow: hidden !important; }
.procedures__dot {
width: 6px !important; height: 6px !important;
background: #FDC667 !important;
border: 1px solid #FFDC95 !important;
flex: 0 0 6px !important;
}
/* horizontal swipe carousel */
.procedures__grid {
display: flex !important;
grid-template-columns: none !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
gap: 8px !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: none !important;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none; scrollbar-width: none;
padding: 4px 4px !important;
}
.procedures__grid::-webkit-scrollbar { display: none; }
.procedures__grid > .procedure-card { scroll-snap-align: none !important; }
.procedure-card {
flex: 0 0 290px !important;
width: 290px !important;
max-width: 290px !important;
margin: 0 !important;
scroll-snap-align: center;
background: #1C1A29 !important;
border-radius: 12px !important;
padding: 20px 16px !important;
gap: 8px !important;
box-shadow: none !important;
}
.procedure-card__image {
width: 200px !important;
height: 200px !important;
aspect-ratio: 1 / 1 !important;
border-radius: 16px !important;
border: 1px solid #FDC667 !important;
margin: 0 0 8px 0 !important;
}
.procedure-card__title {
font-family: var(--font-heading), serif !important; /* Playfair */
font-size: 20px !important;
font-weight: 400 !important;
line-height: 28px !important;
text-transform: uppercase !important;
color: #FFF8EA !important;
min-height: 0 !important;
margin: 0 0 4px 0 !important;
}
.procedure-card__desc { display: none !important; }
.procedure-card__badge {
background: none !important;
padding: 0 !important;
margin: 0 0 4px 0 !important;
color: #FDC667 !important;
font-family: 'Noto Sans', sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 17.36px !important;
}
.procedure-card__price {
font-family: 'Noto Sans', sans-serif !important;
font-size: 24px !important;
font-weight: 400 !important;
line-height: 40.8px !important;
color: #FFF8EA !important;
margin: 0 0 8px 0 !important;
}
.procedure-card__btn {
width: auto !important;
min-width: 160px;
height: 44px !important;
padding: 0 24px !important;
border: 2px solid #FDC667 !important;
border-radius: 40px !important;
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
color: #FFF8EA !important;
}
.procedure-card__btn-details {
width: auto !important;
min-width: 160px;
height: 44px !important;
padding: 0 24px !important;
border: 2px solid #FDC667 !important;
border-radius: 40px !important;
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
color: #FFF8EA !important;
margin-top: 8px !important;
}
/* carousel arrows (Figma) */
.procedures__nav {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 8px !important;
margin-top: 12px !important;
}
.procedures__arrow {
width: 60px !important;
height: 30px !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
cursor: pointer;
display: flex !important;
align-items: center;
justify-content: center;
}
.procedures__arrow svg { width: 48px; height: 24px; display: block; }
/* ============================================================
BLOCK 5 — Результат / до-після (Figma 5:6185) — 1:1 mobile
============================================================ */
.results { padding: 80px 0 !important; }
.results-container {
padding: 0 20px !important;
gap: 0 !important;
max-width: 100% !important;
align-items: center !important;
}
/* icon centred above title */
.results-header { display: block !important; width: 100% !important; text-align: center !important; }
.results-title-wrapper {
display: inline-block !important;
position: relative !important;
padding-left: 25px !important;
}
.results-icon {
display: inline-block !important;
position: absolute !important;
left: -8px !important;
top: -4px !important;
width: 32px !important;
height: 32px !important;
z-index: 2 !important;
margin: 0 !important;
}
.results-title {
font-family: var(--font-heading), serif !important; /* Playfair */
font-size: 20px !important;
font-weight: 400 !important;
line-height: 28px !important;
text-transform: uppercase !important;
color: #FFF8EA !important;
text-align: center !important;
max-width: 320px !important;
margin: 0 !important;
}
/* features — 2 columns, gold-ring bullet */
.results-features-wrapper {
width: 100% !important;
display: flex !important;
justify-content: center !important;
margin: 16px 0 0 0 !important;
}
.results-features-line {
width: auto !important;
max-width: 100% !important;
margin: 0 auto !important;
display: flex !important;
flex-flow: column wrap !important; /* 2 колонки: 1,2 → ліва; 3,4 → права */
align-content: center !important; /* групу колонок по центру */
justify-content: flex-start !important;
align-items: flex-start !important;
column-gap: 16px !important;
row-gap: 10px !important;
height: 56px !important; /* рівно під 2 пункти */
position: static !important;
gap: 10px 16px !important;
}
.feature-dots { display: none !important; }
.feature-item {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
width: auto !important;
gap: 8px !important;
margin: 0 !important;
}
.feature-circle {
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
background: transparent !important;
border: 1px solid #FFDC94 !important;
border-radius: 50% !important;
font-size: 0 !important;
color: transparent !important;
box-shadow: none !important;
position: relative !important;
flex-shrink: 0 !important;
padding: 0 !important;
}
.feature-circle::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
margin: auto !important;
width: 9px !important;
height: 9px !important;
border-radius: 50% !important;
background: #FFDC94 !important;
}
.feature-text-block {
width: auto !important;
text-align: left !important;
white-space: nowrap !important;
font-family: 'Noto Sans', sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 19.6px !important;
color: #FFF8EA !important;
margin: 0 !important;
}
/* до / після subtitle */
.results-subtitle-wrapper {
width: 100% !important;
margin: 30px 0 0 0 !important;
gap: 0 !important;
}
.results-subtitle {
font-family: var(--font-heading), serif !important; /* Playfair */
font-size: 20px !important;
font-weight: 400 !important;
line-height: 28px !important;
text-transform: uppercase !important;
color: #FFF8EA !important;
text-align: center !important;
}
.subtitle-dots { display: none !important; }
/* before/after — horizontal carousel */
.before-after-grid {
display: flex !important;
flex-direction: row !important;
align-items: stretch !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
gap: 12px !important;
width: 100% !important;
max-width: 100% !important;
margin: 20px 0 0 0 !important;
padding: 4px 30px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory !important;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.before-after-grid::-webkit-scrollbar { display: none; }
.ba-card {
flex: 0 0 260px !important;
width: 260px !important;
height: 388px !important;
aspect-ratio: auto !important;
background: #3D3C42 !important;
border-radius: 12px !important;
outline: 1px solid #FDC667 !important;
outline-offset: -1px !important;
transform: none !important;
margin: 0 !important;
position: relative !important;
overflow: hidden !important;
scroll-snap-align: center !important;
flex-shrink: 0 !important;
}
.ba-badge {
height: auto !important;
padding: 4px 14px !important;
font-size: 14px !important;
line-height: 20px !important;
border-radius: 8px !important;
}
/* carousel arrows (Figma 5:6224) */
.results-nav {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 0 !important;
margin: 12px 0 0 0 !important;
}
.results-arrow {
width: 60px !important;
height: 30px !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
cursor: pointer;
display: flex !important;
align-items: center;
justify-content: center;
}
.results-arrow svg { width: 48px; height: 24px; display: block; }
.results-arrow:hover svg path,
.results-arrow:active svg path,
.results-arrow:focus svg path {
stroke: var(--accent-gold, #FDC667) !important;
}
/* CTA button */
.results-cta {
width: 100% !important;
margin: 20px 0 0 0 !important;
justify-content: center !important;
}
.btn-results {
width: 100% !important;
max-width: 261px !important;
height: 44px !important;
padding: 0 16px !important;
border-radius: 100px !important;
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 22px !important;
color: #050409 !important;
}
/* ============================================================
BLOCK 6 — Команда (Figma 5:6230) — 1:1 mobile
(картки тягнуться з /api/masters — лише стилі, не хардкод)
============================================================ */
.team {
padding: 60px 0 !important;
background: #F8F5EE !important;
overflow: hidden !important;
max-width: 100% !important;
}
.team-container {
width: 100% !important;
max-width: 100% !important;
gap: 20px !important;
align-items: center !important;
padding: 0 !important;
}
.team-header {
gap: 10px !important;
margin: 0 !important;
padding: 0 20px !important;
}
.team-title-wrapper { gap: 10px !important; }
.team-title {
font-family: var(--font-heading), serif !important; /* Playfair */
font-size: 20px !important;
font-weight: 400 !important;
line-height: 28px !important;
text-transform: uppercase !important;
color: #050409 !important;
text-align: center !important;
}
.team-dots {
gap: 19px !important;
max-width: 100% !important;
overflow: hidden !important;
flex-wrap: nowrap !important;
}
.team-dot {
width: 6px !important;
height: 6px !important;
min-width: 6px !important;
flex: 0 0 6px !important;
background: #FDC667 !important;
border: 1px solid #FFDC95 !important;
border-radius: 50% !important;
}
.team-subtitle {
font-family: 'Noto Sans', sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 19.6px !important;
color: #050409 !important;
text-align: center !important;
max-width: 330px !important;
margin: 0 auto !important;
padding: 0 20px !important;
}
/* horizontal carousel (cards from admin) */
.team-grid {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
align-items: flex-start !important;
gap: 4px !important;
width: 100% !important;
max-width: 100% !important;
grid-template-columns: none !important;
margin: 0 !important;
padding: 4px 30px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory !important;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.team-grid::-webkit-scrollbar { display: none; }
.team-card {
flex: 0 0 260px !important;
width: 260px !important;
height: 388px !important;
border-radius: 12px !important;
overflow: hidden !important;
margin: 0 !important;
scroll-snap-align: center !important;
flex-shrink: 0 !important;
position: relative !important;
}
.team-image {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 12px !important;
}
.team-info-wrapper {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
min-height: 0 !important;
height: auto !important;
padding: 12px 12px 8px 12px !important;
border-top: 1px solid rgba(229, 205, 178, 0.18) !important;
border-radius: 12px !important;
background: rgba(255, 255, 255, 0.05) !important;
box-shadow: 2px 2px 3px rgba(0,0,0,0.40),
40px 0 60px rgba(0,0,0,0.12),
20px 0 40px rgba(132,132,132,0.15),
-6px -6px 20px rgba(255,255,255,0.80) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
}
.team-info {
max-width: 100% !important;
gap: 4px !important;
}
.team-name {
font-family: 'Noto Sans', sans-serif !important;
font-size: 20px !important;
font-weight: 400 !important;
line-height: 34px !important;
color: #FFF8EA !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}
.team-role {
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.3 !important;
color: #FDC667 !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}
.team-exp {
font-family: 'Noto Sans', sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 16.8px !important;
color: rgba(255, 248, 234, 0.8) !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}
.team-info .btn-primary {
width: auto !important;
min-width: 140px;
margin-top: 6px !important;
padding: 8px 18px !important;
font-size: 15px !important;
font-weight: 600 !important;
border-radius: 40px !important;
}
/* carousel arrows (Figma 5:6230) */
.team-nav {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 0 !important;
margin: 12px 0 0 0 !important;
}
.team-arrow {
width: 60px !important;
height: 30px !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
cursor: pointer;
display: flex !important;
align-items: center;
justify-content: center;
}
.team-arrow svg { width: 48px; height: 24px; display: block; }
/* bottom slogan */
.team-bottom {
margin: 20px 0 0 0 !important;
width: 100% !important;
padding: 0 20px !important;
}
.team-bottom-text {
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
text-transform: none !important;
color: #050409 !important;
text-align: center !important;
}
/* ============================================================
BLOCK 7 — Навчання / Academy (Figma 5:6280) — 1:1 mobile
(картки тягнуться з /api/courses — лише стилі, не хардкод)
============================================================ */
.academy {
padding: 80px 0 !important;
background: #1C1A29 !important;
overflow: hidden !important;
max-width: 100% !important;
align-items: center !important;
}
.academy-container {
width: 100% !important;
max-width: 100% !important;
gap: 30px !important;
align-items: center !important;
padding: 0 !important;
}
.academy-icon {
position: absolute !important;
left: -8px !important;
top: -4px !important;
width: 32px !important;
height: 32px !important;
margin: 0 !important;
z-index: 2;
}
.academy-header-dash { display: none !important; }
.academy-header-area {
width: 100% !important;
margin: 0 !important;
gap: 20px !important;
padding: 0 20px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.academy-title {
font-family: var(--font-heading), serif !important; /* Playfair */
font-size: 20px !important;
font-weight: 400 !important;
line-height: 28px !important;
text-transform: uppercase !important;
color: #FFF8EA !important;
text-align: center !important;
margin: 0 0 10px 0 !important;
max-width: 320px !important;
display: inline-block !important;
position: relative !important;
padding-left: 32px !important;
}
.academy-dots {
width: 100% !important;
max-width: 320px !important;
height: 6px !important;
margin: 0 auto !important;
overflow: hidden !important;
}
.academy-features {
width: 100% !important;
max-width: 320px !important;
margin: 20px auto 0 auto !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
}
.academy-features-col { display: contents !important; } /* 2 col → 1 потік 8 */
.academy-feature-item {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
}
.academy-feature-icon {
width: 16px !important;
height: 16px !important;
flex: 0 0 16px !important;
object-fit: contain !important;
}
.academy-feature-text {
width: auto !important;
max-width: 100% !important;
flex: 1 1 0 !important;
font-family: 'Noto Sans', sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 16.8px !important;
color: #FFF8EA !important;
opacity: 0.9 !important;
}
/* horizontal carousel (cards from /api/courses) */
.academy-cards {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
align-items: stretch !important;
gap: 4px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 4px 30px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory !important;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.academy-cards::-webkit-scrollbar { display: none; }
.academy-card {
flex: 0 0 260px !important;
width: 260px !important;
height: auto !important;
padding: 20px 30px !important;
background: #F8F5EE !important;
border-radius: 20px !important;
box-shadow: 4px 8px 20px rgba(0,0,0,0.25) !important;
gap: 8px !important;
margin: 0 !important;
scroll-snap-align: center !important;
flex-shrink: 0 !important;
}
.academy-card-image-wrap {
width: 200px !important;
height: 200px !important;
padding: 0 !important;
background: none !important;
border: 1px solid #FDC667 !important;
border-radius: 16px !important;
margin: 0 0 8px 0 !important;
overflow: hidden !important;
}
.academy-card-image {
width: 100% !important;
height: 100% !important;
border-radius: 16px !important;
}
.academy-card-content { gap: 8px !important; }
.academy-card-title {
font-family: var(--font-heading), serif !important; /* Playfair */
font-size: 20px !important;
font-weight: 400 !important;
line-height: 28px !important;
text-transform: uppercase !important;
color: #050409 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
}
.academy-card-bottom { gap: 8px !important; margin-top: 8px !important; }
.academy-card-price {
font-family: 'Montserrat', sans-serif !important;
font-size: 24px !important;
font-weight: 400 !important;
line-height: 40.8px !important;
text-transform: uppercase !important;
color: #050409 !important;
}
.academy-btn {
width: auto !important;
min-width: 160px;
height: 48px !important;
padding: 0 20px !important;
background: #F8F5EE !important;
border: 2px solid #FDC667 !important;
border-radius: 40px !important;
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
color: #050409 !important;
}
/* carousel arrows (Figma 5:6280) */
.academy-nav {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 0 !important;
margin: 12px 0 0 0 !important;
}
.academy-arrow {
width: 60px !important;
height: 30px !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
cursor: pointer;
display: flex !important;
align-items: center;
justify-content: center;
}
.academy-arrow svg { width: 48px; height: 24px; display: block; }
/* footer slogan */
.academy-footer {
width: 100% !important;
margin: 20px 0 0 0 !important;
gap: 0 !important;
padding: 0 20px !important;
}
.academy-footer-text {
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
text-transform: none !important;
color: #FFF8EA !important;
text-align: center !important;
}
/* ============================================================
BLOCK 8 — Магазин (Figma 5:6432) — 1:1 mobile
(товари тягнуться з /api/products — лише стилі, не хардкод)
============================================================ */
.shop-section {
padding: 60px 0 !important;
background: #F8F5EE !important;
overflow: hidden !important;
}
.shop-container {
width: 100% !important;
max-width: 100% !important;
gap: 30px !important;
align-items: center !important;
padding: 0 !important;
}
.shop-header-area {
width: 100% !important;
margin: 0 !important;
gap: 10px !important;
padding: 0 20px !important;
}
.shop-title {
font-family: var(--font-heading), serif !important; /* Playfair */
font-size: 20px !important;
font-weight: 400 !important;
line-height: 28px !important;
text-transform: uppercase !important;
color: #050409 !important;
text-align: center !important;
margin: 0 !important;
max-width: 320px !important;
}
.shop-dots {
width: 100% !important;
max-width: 320px !important;
height: 6px !important;
margin: 0 auto !important;
overflow: hidden !important;
}
.shop-pagination { display: none !important; } /* немає в моб-Figma */
.shop-carousel-btn { display: none !important; } /* кружки-стрілки → нижні */
.shop-carousel-wrap {
width: 100% !important;
margin: 0 !important;
}
/* horizontal carousel (products from /api/products) */
.shop-cards-container {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
align-items: stretch !important;
gap: 20px !important;
width: 100% !important;
max-width: 100% !important;
padding: 4px 30px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory !important;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.shop-cards-container::-webkit-scrollbar { display: none; }
.shop-card, .review-card { width: 260px !important; }
.shop-card {
flex: 0 0 260px !important;
height: 290px !important;
padding: 12px 16px 12px 16px !important;
background: #FFFFFF !important;
border-radius: 12px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
gap: 8px !important;
margin: 0 !important;
scroll-snap-align: center !important;
flex-shrink: 0 !important;
}
.shop-card-heart {
top: 12px !important;
right: 12px !important;
width: 24px !important;
height: 24px !important;
}
.shop-card-image-wrap {
width: 100% !important;
height: 110px !important;
margin: 0 0 8px 0 !important;
}
.shop-card-image {
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
}
.shop-card-title {
font-family: 'Noto Sans', sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 19.6px !important;
color: #050409 !important;
-webkit-line-clamp: 4 !important;
height: auto !important;
max-height: 78px !important;
margin: 0 !important;
}
.shop-card-rating { gap: 8px !important; margin: 0 !important; }
.shop-card-rating .stars { display: none !important; } /* немає зірок у моб-Figma */
.reviews-count {
font-family: 'Noto Sans', sans-serif !important;
font-size: 14px !important;
line-height: 17.36px !important;
color: #050409 !important;
}
.shop-card-status {
font-family: 'Noto Sans', sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 17.36px !important;
color: #029B52 !important;
margin: 0 !important;
}
.shop-card-bottom {
align-items: flex-end !important;
margin: auto 0 0 0 !important;
gap: 8px !important;
}
.shop-card-old-price {
font-family: 'Noto Sans', sans-serif !important;
font-size: 14px !important;
line-height: 19.6px !important;
color: #494848 !important;
}
.shop-card-price {
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
color: #050409 !important;
}
.shop-card-currency {
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
color: #050409 !important;
}
.shop-card-btn {
height: 40px !important;
padding: 0 12px !important;
border: 2px solid #FDC667 !important;
border-radius: 40px !important;
background: transparent !important;
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
color: #050409 !important;
}
/* carousel arrows (Figma 5:6432) */
.shop-nav {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 0 !important;
margin: 12px 0 0 0 !important;
}
.shop-arrow {
width: 60px !important;
height: 30px !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
cursor: pointer;
display: flex !important;
align-items: center;
justify-content: center;
}
.shop-arrow svg { width: 48px; height: 24px; display: block; }
/* footer */
.shop-footer {
width: 100% !important;
margin: 20px 0 0 0 !important;
gap: 0 !important;
padding: 0 20px !important;
}
.shop-footer-text {
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
text-transform: none !important;
color: #050409 !important;
text-align: center !important;
max-width: 320px !important;
margin: 0 0 30px 0 !important;
}
.shop-footer-btn {
height: 44px !important;
padding: 0 16px !important;
border-radius: 100px !important;
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
text-transform: none !important;
color: #050409 !important;
}
/* ============================================================
BLOCK 9 — Подарунковий сертифікат (Figma 5:6567) — 1:1 mobile
============================================================ */
.certificate-section {
padding: 80px 0 !important;
background: #1C1A29 !important;
overflow: hidden !important;
}
.certificate-container {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
gap: 30px !important;
align-items: center !important;
}
.certificate-star {
position: absolute !important;
left: -8px !important;
top: -4px !important;
width: 32px !important;
height: 32px !important;
margin: 0 !important;
z-index: 2;
}
.certificate-header {
margin: 0 !important;
gap: 10px !important;
padding: 0 20px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.certificate-title {
font-family: 'Playfair Display', serif !important;
font-size: 20px !important;
font-weight: 400 !important;
line-height: 28px !important;
text-transform: uppercase !important;
letter-spacing: normal !important;
color: #FFF8EA !important;
text-align: center !important;
margin: 0 !important;
max-width: 320px !important;
display: inline-block !important;
position: relative !important;
padding-left: 32px !important;
}
.certificate-dots {
gap: 19px !important;
max-width: 320px !important;
overflow: hidden !important;
flex-wrap: nowrap !important;
margin: 0 !important;
}
.certificate-dots .dot {
width: 6px !important;
height: 6px !important;
min-width: 6px !important;
flex: 0 0 6px !important;
background: #FDC667 !important;
border: 1px solid #FDC667 !important;
box-shadow: none !important;
}
/* info: image floats beside first paragraph */
.certificate-info {
display: block !important;
width: 100% !important;
max-width: 320px !important;
margin: 0 auto !important;
padding: 0 20px !important;
}
.certificate-image {
float: left !important;
flex: none !important;
width: 110px !important;
height: 144px !important;
margin: 0 8px 8px 0 !important;
}
.certificate-image img {
width: 110px !important;
height: 144px !important;
border: 1px solid #FDC667 !important;
border-image: none !important;
border-radius: 4px !important;
object-fit: cover !important;
}
.certificate-text {
display: block !important;
gap: 0 !important;
}
.certificate-text p {
font-family: 'Noto Sans', sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 19.6px !important;
color: #FFF8EA !important;
text-align: justify !important;
margin: 0 0 12px 0 !important;
}
.certificate-text p:not(:first-child) { opacity: 0.9 !important; }
.gold-text { color: #FDC667 !important; }
/* cards → horizontal carousel */
.certificate-cards-wrapper {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
align-items: flex-start !important;
gap: 4px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 4px 30px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory !important;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.certificate-cards-wrapper::-webkit-scrollbar { display: none; }
.cert-card-column {
flex: 0 0 260px !important;
width: 260px !important;
gap: 12px !important;
margin: 0 !important;
scroll-snap-align: center !important;
flex-shrink: 0 !important;
}
.cert-card {
width: 260px !important;
max-width: 260px !important;
height: 388px !important;
min-height: 0 !important;
padding: 24px 16px 16px 16px !important;
border: 0 !important;
border-image: none !important;
outline: 1px solid #FDC667 !important;
outline-offset: -1px !important;
border-radius: 12px !important;
margin: 0 !important;
}
.cert-logo {
width: 70px !important;
height: 64px !important;
margin: 0 0 12px 0 !important;
}
.cert-card-content { gap: 12px !important; }
.cert-card-title {
font-family: 'Playfair Display', serif !important;
font-size: 24px !important;
font-weight: 400 !important;
line-height: 1.2 !important;
text-transform: uppercase !important;
}
.cert-card-description {
font-size: 14px !important;
line-height: 1.4 !important;
padding: 8px 0 !important;
}
.cert-card-light .cert-card-description { font-size: 12px !important; }
.cert-card-dark .cert-card-description.text-gold-glow { font-size: 18px !important; }
.cert-card-price-wrapper {
margin: auto 0 12px 0 !important;
padding: 6px 16px !important;
}
.cert-card-price {
font-family: 'Forum', serif !important;
font-size: 22px !important;
font-weight: 400 !important;
line-height: 37.4px !important;
}
.cert-card-dark .cert-card-price { font-family: 'Forum', serif !important; }
.cert-card-ribbon {
width: 70px !important;
height: 92px !important;
}
.cert-ribbon-number {
font-size: 8px !important;
bottom: 18px !important;
right: 14px !important;
}
.btn-cert,
.cert-card-column .btn-cert:first-of-type,
.cert-card-column .btn-cert:last-of-type {
width: auto !important;
min-width: 160px;
height: 44px !important;
padding: 0 20px !important;
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
color: #FFF8EA !important;
border-radius: 40px !important;
}
.btn-cert-outline {
border: 2px solid #FDC667 !important;
background: transparent !important;
}
.btn-cert-outline::before { display: none !important; }
/* carousel arrows (Figma 5:6567) */
.cert-nav {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 0 !important;
margin: 12px 0 0 0 !important;
}
.cert-arrow {
width: 60px !important;
height: 30px !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
cursor: pointer;
display: flex !important;
align-items: center;
justify-content: center;
}
.cert-arrow svg { width: 48px; height: 24px; display: block; }
/* footer slogan */
.certificate-footer-text {
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
color: #FFF8EA !important;
text-align: center !important;
margin: 0 !important;
max-width: 320px !important;
padding: 0 20px !important;
}
/* ============================================================
BLOCK 10 — Відгуки (Figma 5:6747) — 1:1 mobile
(відгуки тягнуться з API — лише стилі, не хардкод)
============================================================ */
.reviews-section {
padding: 60px 0 !important;
background: #F8F5EE !important;
overflow: hidden !important;
}
.reviews-container {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
}
.reviews-header {
order: 1 !important;
margin: 0 0 30px 0 !important;
gap: 10px !important;
padding: 0 20px !important;
}
.reviews-title {
font-family: 'Playfair Display', serif !important;
font-size: 20px !important;
font-weight: 400 !important;
line-height: 28px !important;
text-transform: uppercase !important;
font-style: normal !important;
color: #050409 !important;
margin: 0 !important;
}
.reviews-title i { font-style: normal !important; }
.reviews-dots {
width: auto !important;
max-width: 160px !important;
height: 6px !important;
}
/* carousel (cards from API) */
.reviews-carousel {
order: 2 !important;
width: 100% !important;
max-width: 100% !important;
gap: 4px !important;
margin: 0 !important;
padding: 4px 30px !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
}
.review-card, .shop-card { width: 260px !important; }
.review-card {
flex: 0 0 260px !important;
min-height: 0 !important;
height: auto !important;
padding: 30px 16px !important;
background: #FFFCF7 !important;
border-radius: 12px !important;
outline: 1px solid #FFDC95 !important;
outline-offset: -1px !important;
gap: 20px !important;
margin: 0 !important;
scroll-snap-align: center !important;
}
.review-card::before { background: none !important; padding: 0 !important; }
.review-card-header { gap: 20px !important; align-items: center !important; }
.review-author-info { gap: 4px !important; flex: 1 1 0 !important; }
.review-author-name {
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: normal !important;
color: #050409 !important;
}
.review-meta {
flex-direction: column !important;
align-items: flex-start !important;
gap: 12px !important;
}
.review-date {
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
color: #050409 !important;
}
.review-text {
font-family: 'Noto Sans', sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 17.36px !important;
color: #050409 !important;
overflow: visible !important;
}
/* pagination + arrows BELOW carousel */
.reviews-navigation-wrapper {
order: 3 !important;
width: 100% !important;
justify-content: center !important;
margin: 12px 0 0 0 !important;
padding: 0 !important;
}
.reviews-navigation { gap: 8px !important; }
.reviews-current, .reviews-total, .reviews-slash {
font-family: 'Noto Sans', sans-serif !important;
font-size: 20px !important;
font-weight: 400 !important;
line-height: 34px !important;
letter-spacing: normal !important;
color: #050409 !important;
width: auto !important;
height: auto !important;
}
.reviews-btn { width: 60px !important; height: 30px !important; }
/* footer */
.reviews-footer {
order: 4 !important;
margin: 30px 0 0 0 !important;
width: 100% !important;
padding: 0 20px !important;
}
.reviews-footer-text {
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
color: #050409 !important;
margin: 0 0 30px 0 !important;
}
.reviews-footer .btn-primary, .review-btn {
height: 44px !important;
padding: 0 16px !important;
border-radius: 100px !important;
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
color: #050409 !important;
border: none !important;
outline: none !important;
box-shadow: 0 10px 24px rgba(253, 198, 103, 0.22), 0 4px 10px rgba(0, 0, 0, 0.12) !important;
}
/* ============================================================
BLOCK 11 — FAQ (Figma 5:6777) — 1:1 mobile
============================================================ */
.faq-section {
padding: 80px 0 !important;
background: #1C1A29 !important;
overflow: hidden !important;
}
.faq-star {
position: absolute !important;
left: -8px !important;
top: -4px !important;
width: 32px !important;
height: 32px !important;
margin: 0 !important;
z-index: 2;
}
.faq-container {
width: 100% !important;
max-width: 100% !important;
padding: 0 20px !important;
text-align: center !important;
}
.faq-title {
font-family: 'Playfair Display', serif !important;
font-size: 20px !important;
font-weight: 400 !important;
line-height: 28px !important;
letter-spacing: normal !important;
text-transform: uppercase !important;
color: #FFF8EA !important;
text-align: center !important;
margin: 0 auto 40px auto !important;
max-width: 320px !important;
display: inline-block !important;
position: relative !important;
padding-left: 32px !important;
}
.faq-list { gap: 12px !important; text-align: left !important; }
.faq-item {
border-radius: 8px !important;
outline: 1px solid #FDC667 !important;
outline-offset: -1px !important;
}
.faq-item::before { background: none !important; padding: 0 !important; }
.faq-item-header {
gap: 12px !important;
padding: 16px 20px !important;
align-items: center !important;
}
.faq-bullet { display: none !important; }
.faq-question {
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.3 !important;
color: #FFF8EA !important;
}
.faq-chevron { width: 24px !important; height: 24px !important; }
.faq-chevron svg { width: 16px !important; height: 16px !important; }
.faq-answer { padding: 0 28px 0 28px !important; }
.faq-item.is-open .faq-answer {
padding: 10px 28px 16px 28px !important;
max-height: 500px !important;
}
.faq-answer p {
font-family: 'Noto Sans', sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 17.36px !important;
color: #FFF8EA !important;
}
.faq-footer-text {
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
font-style: normal !important;
color: #FFF8EA !important;
text-align: center !important;
margin: 30px auto 0 auto !important;
max-width: 320px !important;
}
/* ============================================================
BLOCK 12 — Про нас (Figma 5:6805) — 1:1 mobile
============================================================ */
.about-section {
padding: 60px 0 !important;
background: #F8F5EE !important;
overflow: hidden !important;
}
.about-container {
width: 100% !important;
max-width: 100% !important;
padding: 0 20px !important;
}
.about-top {
flex-direction: column !important;
align-items: center !important;
gap: 30px !important;
margin: 0 0 30px 0 !important;
}
/* photo collage 320x320 gold frame */
.about-images {
position: relative !important;
width: 320px !important;
max-width: 320px !important;
height: 320px !important;
flex: none !important;
margin: 0 auto !important;
border-radius: 4px !important;
outline: 2px solid #FDC667 !important;
outline-offset: -2px !important;
}
.about-img-frame { display: none !important; }
.about-script-text { display: none !important; }
.about-img-salon {
position: absolute !important;
width: 188px !important;
height: 273px !important;
left: 109px !important;
top: 23px !important;
border: 1px solid #FDC667 !important;
border-radius: 5px !important;
object-fit: cover !important;
}
.about-img-hair {
position: absolute !important;
width: 120px !important;
height: 200px !important;
left: 24px !important;
top: 60px !important;
border: 1px solid #FDC667 !important;
border-radius: 5px !important;
object-fit: cover !important;
}
.about-content {
width: 320px !important;
max-width: 320px !important;
padding: 0 !important;
gap: 12px !important;
align-items: center !important;
}
.about-title {
font-family: 'Playfair Display', serif !important;
font-size: 20px !important;
font-weight: 400 !important;
line-height: 28px !important;
text-transform: uppercase !important;
color: #050409 !important;
text-align: center !important;
margin: 0 !important;
}
.about-text {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
width: 100% !important;
font-size: 14px !important;
line-height: 17.36px !important;
}
.about-text p {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
margin: 0 !important;
font-family: 'Noto Sans', sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 17.36px !important;
color: #050409 !important;
text-align: justify !important;
}
.about-text p::before {
content: '' !important;
flex: 0 0 16px !important;
width: 16px !important;
height: 16px !important;
border-radius: 50% !important;
border: 1px solid #FFDC95 !important;
background: radial-gradient(circle, #FFDC95 0 4.5px, transparent 4.5px) !important;
}
.about-bottom {
flex-direction: column !important;
align-items: center !important;
gap: 30px !important;
text-align: center !important;
}
.about-tagline {
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
color: #050409 !important;
text-align: center !important;
max-width: 320px !important;
margin: 0 auto !important;
}
.about-btn {
min-width: 0 !important;
width: auto !important;
height: 44px !important;
padding: 0 16px !important;
border-radius: 100px !important;
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: normal !important;
color: #050409 !important;
}
/* ============================================================
BLOCK 12b — Мапа (Figma 5:6862) — 1:1 mobile
(моб-вузол = просто зображення на всю ширину 360x222)
============================================================ */
.map-section {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 360 / 222 !important;
overflow: hidden !important;
}
.map-wrapper,
.map-link {
width: 100% !important;
height: 100% !important;
}
.map-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
.map-balloon-wrap { display: none !important; } /* немає в моб-Figma */
/* шпилька-маркер по центру мапи (Figma Icon 28x33) */
.map-pin {
display: block !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
width: 28px !important;
height: 33px !important;
transform: translate(-50%, -50%) !important;
pointer-events: none !important;
}
/* ============================================================
BLOCK 14 — Footer (Figma 5:6777-footer) — 1:1 mobile
============================================================ */
.site-footer {
width: 100% !important;
max-width: 100% !important;
background: #1C1A29 !important;
overflow: hidden !important;
}
.footer-inner {
width: 100% !important;
max-width: 100% !important;
padding: 60px 40px 20px 40px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 60px !important;
box-sizing: border-box !important;
}
/* top: logo + 2 gold buttons */
.footer-top {
flex-direction: column !important;
align-items: center !important;
height: auto !important;
padding: 0 !important;
gap: 30px !important;
width: 100% !important;
}
.footer-logo img { width: 140px !important; height: auto !important; margin: 0 auto !important; }
.footer-top-btns {
flex-direction: column-reverse !important; /* Figma: Викликати таксі зверху */
align-items: center !important;
gap: 30px !important;
width: 100% !important;
max-width: 320px !important;
padding: 0 !important;
}
.footer-outline-btn, .footer-cta-btn {
width: 100% !important;
max-width: 320px !important;
min-width: 0 !important;
height: 44px !important;
padding: 0 16px !important;
border: none !important;
border-radius: 100px !important;
background:
linear-gradient(0deg,#FDC667 0%,#FDC667 100%),
radial-gradient(ellipse 123.78% 97.9% at 0% -3.37%, #fff 1%, rgba(255,250,250,0) 100%),
linear-gradient(82deg, rgba(193,200,202,.8) 0%, rgba(214,222,221,.8) 16%, rgba(215,239,239,.8) 27%, rgba(204,215,213,.8) 37%, rgba(193,200,201,.8) 47%, rgba(190,205,208,.8) 57%, rgba(218,241,248,.8) 74%, rgba(204,229,234,.8) 89%, rgba(205,209,210,.8) 100%) !important;
background-blend-mode: color, overlay, normal !important;
box-shadow: inset 0 -2px 1.5px rgba(0,0,0,.4), inset 0 2px 1.5px rgba(255,255,255,.4),
inset 0 6px 6px rgba(255,255,255,.25), inset 0 -8px 6px rgba(149,142,142,.2) !important;
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
color: #050409 !important;
}
/* main: contacts (full) → nav1+nav2 (row) → right (full) */
.footer-main {
display: flex !important;
flex-wrap: wrap !important;
flex-direction: row !important;
justify-content: center !important;
align-items: flex-start !important;
gap: 60px 15px !important;
padding: 0 !important;
width: 100% !important;
}
.footer-contacts {
flex: 1 1 100% !important;
min-width: 0 !important;
gap: 30px !important;
width: 100% !important;
}
.footer-contact-row { gap: 20px !important; align-items: center !important; }
.footer-contact-icon { width: 28px !important; height: 28px !important; }
.footer-contact-text,
.footer-contact-text.phone {
font-family: 'Noto Sans', sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 17.36px !important;
color: #FFF8EA !important;
}
.footer-nav {
flex: 1 1 40% !important;
gap: 30px !important;
}
.footer-nav a {
font-family: 'Noto Sans', sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 17.36px !important;
color: #FFF8EA !important;
white-space: normal !important;
}
.footer-right {
flex: 1 1 100% !important;
min-width: 0 !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 40px !important;
}
.footer-socials { gap: 20px !important; margin: 0 !important; justify-content: center !important; }
.footer-social-link {
width: 40px !important;
height: 40px !important;
border: 1px solid #FDC667 !important;
background: #1C1A29 !important;
color: #FDC667 !important;
}
.footer-hours {
font-family: 'Noto Sans', sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 17.36px !important;
color: #FFF8EA !important;
margin: 0 !important;
text-align: center !important;
}
/* back to top — 146x44 dark r8, text only */
.footer-back-top {
justify-content: center !important;
padding: 0 !important;
width: 100% !important;
}
.footer-back-top-btn {
width: 146px !important;
height: 44px !important;
justify-content: center !important;
padding: 0 20px !important;
border-radius: 8px !important;
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
color: #F8F5EE !important;
}
.footer-arrow-up { display: none !important; } /* Figma: лише текст */
/* bottom bar */
.footer-bottom {
border-top: 0 !important;
padding: 0 !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 20px !important;
}
.footer-copy, .footer-policy {
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 400 !important;
color: #FFF8EA !important;
opacity: 1 !important;
}
/* Reset all mobile carousel nav buttons states to prevent borders/backgrounds and disappearing arrows */
.procedures__arrow,
.results-arrow,
.team-arrow,
.academy-arrow,
.shop-arrow,
.cert-arrow {
background: none !important;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.procedures__arrow:hover, .procedures__arrow:active, .procedures__arrow:focus,
.results-arrow:hover, .results-arrow:active, .results-arrow:focus,
.team-arrow:hover, .team-arrow:active, .team-arrow:focus,
.academy-arrow:hover, .academy-arrow:active, .academy-arrow:focus,
.shop-arrow:hover, .shop-arrow:active, .shop-arrow:focus,
.cert-arrow:hover, .cert-arrow:active, .cert-arrow:focus {
background: none !important;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
transform: none !important;
}
.procedures__arrow svg path,
.results-arrow svg path,
.team-arrow svg path,
.academy-arrow svg path,
.shop-arrow svg path,
.cert-arrow svg path {
stroke: var(--accent-gold, #FDC667) !important;
}
/* ---- Floating buttons a touch smaller ---- */
.floating-contact, .floating-cart { transform: scale(0.85); }
/* ==========================================
PRODUCT DETAILS RESPONSIVE FIXES
========================================== */
.product-details-page .container,
.product-details-page .product-detail-main {
width: 100% !important;
max-width: 100% !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
.product-details-page .product-detail-grid {
flex-direction: column !important;
gap: 30px !important;
margin-bottom: 30px !important;
}
.product-details-page .product-gallery-col {
width: 100% !important;
max-width: 480px !important;
margin: 0 auto !important;
flex: none !important;
}
.product-details-page .product-gallery-wrap {
padding: 20px !important;
aspect-ratio: 1 / 1 !important;
}
.product-details-page .product-info-col {
width: 100% !important;
flex: none !important;
}
.product-details-page .product-info-title {
font-size: 22px !important;
margin-bottom: 12px !important;
}
.product-details-page .product-price-wishlist-row {
gap: 16px !important;
margin-bottom: 20px !important;
}
.product-details-page .product-info-price-block {
gap: 6px !important;
}
.product-details-page .product-info-price {
font-size: 28px !important;
}
.product-details-page .product-info-actions-new {
width: 100% !important;
max-width: 100% !important;
gap: 12px !important;
}
.product-details-page .one-click-section-new {
width: 100% !important;
max-width: 100% !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
}
.product-details-page .btn-one-click-new {
width: 100% !important;
flex: none !important;
}
.product-details-page .one-click-phone-wrap {
width: 100% !important;
flex: none !important;
}
.product-details-page .info-banner-new {
padding: 16px !important;
margin: 24px 0 !important;
width: 100% !important;
max-width: 100% !important;
}
.product-details-page .product-tabs-section {
padding-top: 30px !important;
margin-bottom: 40px !important;
}
.product-details-page .tabs-main-heading-new {
font-size: 16px !important;
margin-bottom: 24px !important;
}
.product-details-page .tabs-buttons-bar {
margin-bottom: 24px !important;
}
.product-details-page .tab-panel {
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
.product-details-page .tab-rich-text {
font-size: 13px !important;
}
.product-details-page .specs-table th,
.product-details-page .specs-table td {
font-size: 13px !important;
padding: 10px 0 !important;
}
.product-details-page .recommendations-section {
padding-top: 40px !important;
}
.product-details-page .recommendations-title {
font-size: 20px !important;
}
.product-details-page .bottom-cta-wrap {
margin-top: 30px !important;
}
.product-details-page .bottom-cta-text {
font-size: 14px !important;
margin-bottom: 16px !important;
}
.product-details-page .benefits-grid-new {
flex-direction: column !important;
align-items: flex-start !important;
gap: 20px !important;
max-width: 290px !important;
margin: 0 auto !important;
}
/* Breadcrumbs clearance for fixed mobile header */
.product-details-page .svc-breadcrumb,
.svc-page .svc-breadcrumb,
.article-page-body .article-breadcrumb {
padding-top: 130px !important;
}
}
/* Fine type tuning for very narrow (≤400) */
@media (max-width: 400px) {
.container,
.features__container, .problems__container, .stages__container,
.procedures__container, .team-container, .academy-container,
.shop-container, .reviews-container, .faq-container, .about-container {
padding-left: 14px !important;
padding-right: 14px !important;
}
}
/* ============================================================
ULTRAWIDE (>1920px) - Keep backgrounds full width, content clamped
============================================================ */
@media (min-width: 1921px) {
.hero {
max-width: 100% !important;
padding-left: calc((100vw - 1920px) / 2 + 220px) !important;
padding-right: calc((100vw - 1920px) / 2 + 220px) !important;
background-size: cover !important;
}
}