/* ============================================================
AVDH — Адвокатське бюро Вікторії Сікори
Робочий макет хедера v1 (HTML2)
Методологія: BEM. Виняток — внутрішня розмітка меню, де
класи (.menu, .sub-menu, .menu-item, .menu-item-has-children)
жорстко прив'язані до того, як WordPress генерує wp_nav_menu().
Це навмисно — щоб у майбутньому верстка лягла у WP без змін.
Правила:
· ЖОДНИХ скруглень.
· Розміри — у rem/em. 1rem = 16px. Всі px-еквіваленти парні.
· 1px — тільки для hairline-бордерів.
============================================================ */
/* -------- Fonts -------- */
@font-face{
font-family:"BalticaC";
src:url("../../Resources/Logo%20Style/Font/BalticaC/BalticaC.otf") format("opentype");
font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
font-family:"BalticaC";
src:url("../../Resources/Logo%20Style/Font/BalticaC/BalticaC_Bold.otf") format("opentype");
font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
font-family:"Involve";
src:url("../../Resources/Logo%20Style/Font/Involve/Involve-Regular.ttf") format("truetype");
font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
font-family:"Involve";
src:url("../../Resources/Logo%20Style/Font/Involve/Involve-Medium.ttf") format("truetype");
font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
font-family:"Involve";
src:url("../../Resources/Logo%20Style/Font/Involve/Involve-SemiBold.ttf") format("truetype");
font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
font-family:"Involve";
src:url("../../Resources/Logo%20Style/Font/Involve/Involve-Bold.ttf") format("truetype");
font-weight:700; font-style:normal; font-display:swap;
}
/* ============================================================
Tokens
============================================================ */
:root{
--color-green: #101F19;
--color-green-2: #14261F;
--color-green-3: #1A3027;
--color-green-4: #25382C;
--color-sage: #5A6960;
--color-beige: #CFBFB1;
--color-beige-2: #E7DCD0;
--color-cream: #F4EDE4;
--color-gold: #BA942D;
--color-gold-2: #D7B65C;
--color-line: rgba(207, 191, 177, 0.18);
--color-line-soft: rgba(207, 191, 177, 0.10);
--color-line-strong: rgba(207, 191, 177, 0.32);
/* Glass-фон для скляних поверхонь */
--glass-bg: rgba(16, 31, 25, 0.62);
--glass-bg-strong: rgba(16, 31, 25, 0.78);
--glass-bg-mobile: rgba(16, 31, 25, 0.86);
--glass-blur: blur(1rem) saturate(140%);
--glass-blur-strong: blur(1.5rem) saturate(140%);
--font-display: "BalticaC", Georgia, serif;
--font-sans: "Involve", "Helvetica Neue", Arial, sans-serif;
/* .container ширина = зовнішня ширина острівного хедера */
--container-max: 86.25rem; /* 1380px — як --header-max */
--container-pad: 1rem; /* 16px — як --header-side */
--header-max: 86.25rem;
--header-pad: 1.25rem;
--header-height: 5.375rem;
/* Острівний хедер v2: відступ від верху і боків вьюпорта */
--header-top: 1rem; /* 16px зверху */
--header-side: 1rem; /* 16px з кожного боку */
--header-mega-gap: 0.5rem; /* 8px між хедером і mega-панеллю */
--z-header: 40;
--z-mega: 39;
--z-mobile-menu: 50;
--z-skip: 60;
--ease: cubic-bezier(.4, 0, .2, 1);
}
/* ============================================================
Reset / base
============================================================ */
*, *::before, *::after{ box-sizing:border-box; }
html{
font-size:100%;
scroll-behavior:smooth;
-webkit-text-size-adjust:100%;
}
body, .page{
margin:0;
font-family:var(--font-sans);
color:var(--color-beige);
background:
linear-gradient(180deg,
#0D1B16 0%,
#101F19 22%,
#14261F 58%,
#101F19 86%,
#0C1813 100%
);
min-height:100vh;
line-height:1.55;
overflow-x:hidden;
font-weight:400;
}
body.is-menu-open{ overflow:hidden; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button, input, textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; padding:0; }
ul{ margin:0; padding:0; list-style:none; }
code{
font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
font-size:0.875em;
color:var(--color-gold-2);
background:rgba(186, 148, 45, 0.08);
padding:0.125rem 0.375rem;
}
::selection{ background:rgba(186, 148, 45, 0.42); color:var(--color-cream); }
:focus-visible{
outline:2px solid var(--color-gold-2);
outline-offset:0.25rem;
}
/* ============================================================
Utilities
============================================================ */
.container{
width:min(var(--container-max), calc(100% - var(--container-pad) * 2));
margin:0 auto;
}
.skip-link{
position:absolute;
top:0.875rem; left:0.875rem;
z-index:var(--z-skip);
transform:translateY(-200%);
padding:0.625rem 0.875rem;
background:var(--color-gold);
color:var(--color-green);
font-weight:700;
}
.skip-link:focus{ transform:translateY(0); }
.kicker{
margin:0 0 1rem;
color:var(--color-gold);
font-size:0.75rem;
letter-spacing:0.28em;
text-transform:uppercase;
font-weight:600;
}
/* ============================================================
BLOCK: header — ОСТРІВЕЦЬ (v2)
Хедер плаває як окрема плашка: відсунутий від верху і боків
вьюпорта, обведений з усіх боків, з вічно-увімкненим glass.
============================================================ */
.header{
position:fixed;
top:var(--header-top);
left:50%;
transform:translateX(-50%);
width:min(var(--header-max), calc(100% - var(--header-side) * 2));
z-index:var(--z-header);
color:var(--color-cream);
background:var(--glass-bg);
backdrop-filter:var(--glass-blur);
-webkit-backdrop-filter:var(--glass-blur);
border:1px solid var(--color-line-soft);
box-shadow:0 1rem 2rem rgba(0, 0, 0, 0.22);
transition:background 220ms var(--ease), border-color 220ms var(--ease);
}
/* При скролі трохи затемнюємо для більшої щільності */
.header.is-scrolled{
background:var(--glass-bg-strong);
}
.header__inner{
width:100%;
min-height:var(--header-height);
padding:0 var(--header-pad);
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:2rem;
}
/* -- header__brand -- */
.header__brand{
display:inline-flex;
align-items:center;
gap:0.25rem;
min-width:0;
}
.header__brand-logo{
width:2.5rem;
height:2.5rem;
flex:none;
}
.header__brand-text{
display:block;
font-size:0.875rem;
line-height:1.2;
color:var(--color-beige-2);
letter-spacing:0.01em;
}
.header__brand-name{
display:block;
font-family:var(--font-display);
font-size:1.25rem;
font-weight:400;
line-height:1.05;
color:var(--color-cream);
letter-spacing:0.005em;
}
/* -- header__nav (контейнер) -- */
.header__nav{
align-self:stretch; /* розтягуємо на повну висоту хедера */
display:flex;
align-items:stretch;
justify-content:center;
}
/* -- header__actions -- */
.header__actions{
display:flex;
justify-content:flex-end;
align-items:center;
gap:0.625rem;
}
/* -- header__burger -- */
.header__burger{
display:none;
width:2.625rem;
height:2.625rem;
border:1px solid var(--color-line);
background:rgba(16, 31, 25, 0.6);
color:var(--color-cream);
align-items:center;
justify-content:center;
flex-direction:column;
gap:0.25rem;
}
.header__burger-bar{
display:block;
width:1.125rem;
height:1px;
background:var(--color-cream);
}
/* ============================================================
MENU (WordPress-сумісна розмітка)
.menu / .sub-menu / .menu-item / .menu-item-has-children
============================================================ */
/* ---- Рівень 1 — горизонтальне меню в хедері ----
.menu і .menu-item розтягуються на повну висоту хедера, щоб
між і dropdown-панеллю не було мертвої зони, де ховер злітає. */
.header__nav > .menu{
display:flex;
align-items:stretch;
gap:0.25rem;
height:100%;
}
.header__nav > .menu > .menu-item{
position:relative;
display:flex;
align-items:stretch;
}
.header__nav > .menu > .menu-item > a{
position:relative;
align-self:center; /* не розтягується — лише */
display:inline-flex;
align-items:center;
gap:0.375rem;
padding:0.625rem 0.875rem;
color:rgba(244, 237, 228, 0.78);
font-size:0.875rem;
line-height:1;
letter-spacing:0.02em;
transition:color 180ms var(--ease);
}
.header__nav > .menu > .menu-item > a::after{
content:"";
position:absolute;
left:0.875rem; right:0.875rem;
bottom:0.25rem;
height:1px;
background:var(--color-gold);
transform:scaleX(0);
transform-origin:left center;
transition:transform 260ms var(--ease);
}
.header__nav > .menu > .menu-item:hover > a,
.header__nav > .menu > .menu-item:focus-within > a{
color:var(--color-cream);
}
.header__nav > .menu > .menu-item:hover > a::after,
.header__nav > .menu > .menu-item:focus-within > a::after{
transform:scaleX(1);
}
/* Шеврон біля пунктів з дітьми (інжектується через JS — клас .menu-item__chevron) */
.menu-item__chevron{
width:0.75rem;
height:0.75rem;
flex:none;
transition:transform 220ms var(--ease);
}
.header__nav > .menu > .menu-item-has-children.is-open > a .menu-item__chevron{
transform:rotate(-180deg);
}
/* ---- DROPDOWN для .menu-item-has-children:not(.mega) ----
(Про нас, Вартість) Залишаються у . У v2 без backdrop-filter:
хедер уже сам має backdrop-filter, який створює containing block
для своїх descendants — отже власний blur тут не спрацює. Тому
solid-ish заливка без блюру; візуально все одно щільно та цілісно
завдяки glass-фону хедера за ними. */
.header__nav > .menu > .menu-item-has-children:not(.mega) > .sub-menu{
position:absolute;
top:100%;
left:0;
min-width:14rem;
padding:0.75rem;
background:rgba(16, 31, 25, 0.94);
border:1px solid var(--color-line-soft);
border-top:1px solid rgba(186, 148, 45, 0.4);
box-shadow:0 1.5rem 2.5rem rgba(0, 0, 0, 0.4);
display:flex;
flex-direction:column;
gap:0.125rem;
opacity:0;
visibility:hidden;
transform:translateY(-0.5rem);
pointer-events:none;
transition:opacity 220ms var(--ease), transform 220ms var(--ease), visibility 220ms var(--ease);
z-index:var(--z-mega);
}
.header__nav > .menu > .menu-item-has-children:not(.mega).is-open > .sub-menu{
opacity:1;
visibility:visible;
transform:translateY(0);
pointer-events:auto;
}
.header__nav > .menu > .menu-item-has-children:not(.mega) > .sub-menu .menu-item > a{
display:block;
padding:0.625rem 0.875rem;
color:rgba(244, 237, 228, 0.86);
font-size:0.875rem;
line-height:1.2;
letter-spacing:0.01em;
transition:color 180ms var(--ease), background-color 180ms var(--ease);
}
.header__nav > .menu > .menu-item-has-children:not(.mega) > .sub-menu .menu-item > a:hover{
color:var(--color-cream);
background:rgba(207, 191, 177, 0.06);
}
/* ---- MEGA-MENU (Послуги) — портується у body через JS ----
У хедері залишається лише з ; JS переносить
у .mega-portal у , щоб backdrop-filter хедера не створював
containing-block для mega-panel. */
.header__nav > .menu > .menu-item.mega{
position:static;
}
/* ============================================================
BLOCK: mega-portal (v2) — теж острівець, тієї ж ширини, що хедер
============================================================ */
.mega-portal{
position:fixed;
top:calc(var(--header-top) + var(--header-height) + var(--header-mega-gap));
left:50%;
transform:translateX(-50%);
width:min(var(--header-max), calc(100% - var(--header-side) * 2));
z-index:var(--z-mega);
pointer-events:none;
}
/* після переносу — і є mega-панель */
.mega-portal > .sub-menu{
width:100%;
margin:0;
padding:2.5rem; /* рівномірний внутрішній padding */
background:var(--glass-bg-strong);
backdrop-filter:var(--glass-blur-strong);
-webkit-backdrop-filter:var(--glass-blur-strong);
border:1px solid var(--color-line-soft);
border-top:1px solid rgba(186, 148, 45, 0.4);
box-shadow:0 1rem 2rem rgba(0, 0, 0, 0.22);
display:grid;
grid-template-columns:repeat(4, 1fr);
column-gap:2rem;
row-gap:2rem;
opacity:0;
visibility:hidden;
transform:translateY(-0.5rem);
pointer-events:none;
transition:opacity 240ms var(--ease), transform 240ms var(--ease), visibility 240ms var(--ease);
list-style:none;
}
.mega-portal > .sub-menu.is-open{
opacity:1;
visibility:visible;
transform:translateY(0);
pointer-events:auto;
}
/* Рівень 2 — заголовки колонок */
.mega-portal > .sub-menu > .menu-item > a{
display:block;
padding:0 0 0.75rem;
margin-bottom:0.75rem;
border-bottom:1px solid var(--color-line-soft);
font-family:var(--font-display);
font-size:1.125rem;
font-weight:400;
color:var(--color-cream);
letter-spacing:0.005em;
transition:color 180ms var(--ease), border-color 180ms var(--ease);
}
.mega-portal > .sub-menu > .menu-item > a:hover{
color:var(--color-gold-2);
border-bottom-color:var(--color-gold);
}
/* Рівень 3 — вкладений .sub-menu всередині колонки */
.mega-portal > .sub-menu .sub-menu{
display:flex;
flex-direction:column;
gap:0.375rem;
list-style:none;
margin:0;
padding:0;
}
.mega-portal > .sub-menu .sub-menu .menu-item > a{
display:inline-block;
padding:0.25rem 0;
color:rgba(244, 237, 228, 0.72);
font-size:0.875rem;
line-height:1.4;
letter-spacing:0.005em;
transition:color 180ms var(--ease), transform 180ms var(--ease);
}
.mega-portal > .sub-menu .sub-menu .menu-item > a:hover{
color:var(--color-cream);
transform:translateX(0.25rem);
}
/* На рівні 2 mega-меню шеврон не потрібен */
.mega-portal .menu-item__chevron{ display:none; }
/* ============================================================
BLOCK: mobile-menu
============================================================ */
.mobile-menu{
position:fixed;
inset:0;
z-index:var(--z-mobile-menu);
visibility:hidden;
pointer-events:none;
/* Затримка visibility = тривалості анімації панелі.
Так контейнер залишається visible поки панель і бекдроп
плавно «їдуть» назад, і лише потім зникає. */
transition:visibility 0s 360ms;
}
.mobile-menu.is-open{
visibility:visible;
pointer-events:auto;
transition:visibility 0s 0s;
}
.mobile-menu__backdrop{
position:absolute;
inset:0;
background:rgba(0, 0, 0, 0.5);
opacity:0;
transition:opacity 320ms var(--ease);
cursor:pointer;
}
.mobile-menu.is-open .mobile-menu__backdrop{ opacity:1; }
.mobile-menu__panel{
position:absolute;
top:0; right:0; bottom:0;
width:min(26rem, 100%);
background:var(--glass-bg-mobile);
backdrop-filter:var(--glass-blur-strong);
-webkit-backdrop-filter:var(--glass-blur-strong);
border-left:1px solid var(--color-line-soft);
box-shadow:-1.5rem 0 3rem rgba(0, 0, 0, 0.5);
transform:translateX(100%);
transition:transform 360ms var(--ease);
display:flex;
flex-direction:column;
overflow:hidden;
}
.mobile-menu.is-open .mobile-menu__panel{ transform:translateX(0); }
.mobile-menu__head{
flex:none;
display:flex;
align-items:center;
justify-content:space-between;
gap:0.5rem;
min-height:var(--header-height);
padding:0 var(--header-pad);
border-bottom:1px solid var(--color-line-soft);
}
.mobile-menu__brand{
display:inline-flex;
align-items:center;
gap:0.25rem;
color:var(--color-cream);
}
.mobile-menu__brand-logo{
width:2.25rem;
height:2.25rem;
flex:none;
}
.mobile-menu__brand-text{
display:block;
font-size:0.75rem;
line-height:1.2;
color:var(--color-beige-2);
}
.mobile-menu__brand-name{
display:block;
font-family:var(--font-display);
font-size:1rem;
font-weight:700;
line-height:1.05;
color:var(--color-cream);
}
.mobile-menu__close{
width:2.625rem; /* 42px — як кнопка телефону та бургер */
height:2.625rem;
border:1px solid var(--color-line);
color:var(--color-cream);
display:inline-flex;
align-items:center;
justify-content:center;
transition:border-color 180ms var(--ease), background-color 180ms var(--ease);
}
.mobile-menu__close svg{ width:1.25rem; height:1.25rem; }
.mobile-menu__close:hover{
border-color:var(--color-gold);
background:rgba(186, 148, 45, 0.08);
}
.mobile-menu__nav{
flex:1 1 auto;
overflow-y:auto;
overscroll-behavior:contain;
}
.mobile-menu__foot{
flex:none;
display:flex;
flex-direction:column;
gap:0.625rem;
padding:1.25rem 1.5rem;
border-top:1px solid var(--color-line-soft);
background:rgba(16, 31, 25, 0.4);
}
.mobile-menu__foot .button{ width:100%; }
/* ---- Меню всередині mobile-menu ---- */
.mobile-menu .menu{
display:flex;
flex-direction:column;
}
/* .menu-item на мобільному — flex-wrap, щоб і toggle йшли рядком,
а переносилась на новий рядок 100% ширини */
.mobile-menu .menu-item{
display:flex;
flex-wrap:wrap;
align-items:stretch;
border-bottom:1px solid var(--color-line-soft);
}
.mobile-menu .menu-item:last-child{ border-bottom:0; }
.mobile-menu .menu-item > a{
flex:1 1 auto;
display:flex;
align-items:center;
padding:1rem 1.5rem;
color:var(--color-cream);
font-size:1rem;
line-height:1.3;
letter-spacing:0.005em;
transition:color 180ms var(--ease), background-color 180ms var(--ease);
}
.mobile-menu .menu-item > a:hover{
color:var(--color-gold-2);
background:rgba(207, 191, 177, 0.04);
}
/* Toggle-кнопка стрілки — інжектується JS, сидить поряд з */
.mobile-menu .menu-item__toggle{
flex:none;
width:3.5rem;
align-self:stretch;
display:inline-flex;
align-items:center;
justify-content:center;
color:var(--color-beige-2);
border-left:1px solid var(--color-line-soft);
transition:color 180ms var(--ease), background-color 180ms var(--ease);
}
.mobile-menu .menu-item__toggle svg{
width:1rem;
height:1rem;
transition:transform 240ms var(--ease);
}
.mobile-menu .menu-item__toggle:hover{
color:var(--color-gold-2);
background:rgba(186, 148, 45, 0.06);
}
.mobile-menu .menu-item.is-open > .menu-item__toggle svg{
transform:rotate(-180deg);
}
/* Вкладений sub-menu — займає 100% ширини під рядком, акордеон */
.mobile-menu .sub-menu{
flex:1 0 100%;
display:none;
flex-direction:column;
background:rgba(0, 0, 0, 0.18);
border-top:1px solid var(--color-line-soft);
}
.mobile-menu .menu-item.is-open > .sub-menu{ display:flex; }
/* Рівень 2 — менший шрифт, більший лівий відступ */
.mobile-menu .sub-menu .menu-item > a{
padding:0.875rem 1.5rem 0.875rem 2.5rem;
font-size:0.875rem;
}
/* Рівень 3 — ще більший лівий відступ і приглушений колір */
.mobile-menu .sub-menu .sub-menu .menu-item > a{
padding-left:3.5rem;
color:rgba(244, 237, 228, 0.78);
}
/* ============================================================
BLOCK: button (реюзний)
============================================================ */
.button{
--button-h: 2.75rem;
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:var(--button-h);
padding:0 1.125rem;
border:0;
background:transparent;
color:var(--color-cream);
font-family:var(--font-sans);
font-size:0.875rem;
font-weight:600;
line-height:1;
letter-spacing:0.04em;
text-transform:uppercase;
white-space:nowrap;
cursor:pointer;
transition:color 220ms var(--ease), background-color 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease);
user-select:none;
}
.button__icon{
width:1rem; height:1rem;
flex:none;
margin-right:0.5rem;
}
.button__label{ display:inline-block; }
.button--phone{ letter-spacing:0.06em; }
.button--primary{
background:var(--color-gold);
color:var(--color-green);
border:1px solid var(--color-gold);
}
.button--primary:hover{
background:var(--color-gold-2);
border-color:var(--color-gold-2);
}
.button--primary:active{ transform:translateY(1px); }
.button--ghost{
border:1px solid var(--color-line-strong);
background:rgba(16, 31, 25, 0.32);
color:var(--color-cream);
}
.button--ghost:hover{
border-color:var(--color-beige);
background:rgba(207, 191, 177, 0.08);
}
.button--ghost:active{ transform:translateY(1px); }
/* ============================================================
КНОПКИ — ВАРІАНТИ ЗАЛИВКИ (fill)
Спільна механіка: шар .button__fill «заливає» кнопку при ховері.
Напрям задає -h (горизонт.) / -v (вертик.) / -c (з центру),
роль і кольори — -cta (золота) / -ghost (контурна).
Відтінок заливки CTA — is-deep (глибокий green-4) або зелений.
============================================================ */
.button--fill{ overflow:hidden; padding:0; border:1px solid transparent; }
.button__fill{
position:absolute; inset:0; z-index:0;
transition:transform 420ms cubic-bezier(.6,.05,.2,1);
will-change:transform;
}
.button--fill .button__content{
position:relative; z-index:1;
display:inline-flex; align-items:center;
padding:0 1.25rem; min-height:var(--button-h);
transition:color 300ms var(--ease);
}
/* --- напрями заливки --- */
.button--fill-h .button__fill{ transform:translateX(-101%); }
.button--fill-h:hover .button__fill,
.button--fill-h:focus-visible .button__fill{ transform:translateX(0); }
.button--fill-v .button__fill{ transform:translateY(101%); }
.button--fill-v:hover .button__fill,
.button--fill-v:focus-visible .button__fill{ transform:translateY(0); }
.button--fill-c .button__fill{ transform:scaleX(0); transform-origin:center; }
.button--fill-c:hover .button__fill,
.button--fill-c:focus-visible .button__fill{ transform:scaleX(1); }
/* --- CTA: суцільне золото у спокої, заливка іншим кольором --- */
.button--fill-cta{
background:var(--color-gold);
color:var(--color-green);
border-color:var(--color-gold);
}
.button--fill-cta .button__fill{ background:var(--color-green); }
.button--fill-cta:hover{ color:var(--color-gold-2); }
.button--fill-cta.is-deep .button__fill{ background:var(--color-green-4); }
/* --- Ghost (контурна, як «телефон») --- */
.button--fill-ghost{
background:rgba(16, 31, 25, 0.32);
color:var(--color-beige);
border-color:var(--color-line-strong);
}
.button--fill-ghost .button__fill{ background:var(--color-beige); }
.button--fill-ghost:hover{ color:var(--color-green); border-color:var(--color-beige); }
.button--fill:active{ transform:translateY(1px); }
@media (prefers-reduced-motion: reduce){
.button__fill{ transition:none; }
}
/* ============================================================
BLOCK: hero (загальні стилі)
============================================================ */
.hero{
position:relative;
overflow:hidden;
padding:calc(var(--header-top) + var(--header-height) + 5rem) 0 5rem;
background:transparent;
color:var(--color-cream);
}
.hero__bg{
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
/* Fade зверху і знизу — секційні абстракції щезають на стиках,
тому body-gradient проходить наскрізь без видимих швів. */
-webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 14%, black 80%, transparent 100%);
mask-image:linear-gradient(to bottom, transparent 0%, black 14%, black 80%, transparent 100%);
}
.hero__bg::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(ellipse at 85% 12%, rgba(186, 148, 45, 0.14) 0%, transparent 45%),
radial-gradient(ellipse at 8% 92%, rgba(90, 105, 96, 0.20) 0%, transparent 55%);
}
.hero__bg::after{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(207, 191, 177, 0.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(207, 191, 177, 0.028) 1px, transparent 1px);
background-size:4rem 4rem;
}
.hero__container{
position:relative;
z-index:1;
}
.hero__eyebrow{
margin:0 0 1.5rem;
color:var(--color-gold);
font-size:0.75rem;
letter-spacing:0.3em;
text-transform:uppercase;
font-weight:600;
}
.hero__title{
margin:0 0 1.5rem;
font-family:var(--font-display);
font-weight:400;
color:var(--color-cream);
font-size:clamp(2.5rem, 5.5vw, 4.5rem);
line-height:1.06;
letter-spacing:-0.005em;
text-wrap:balance;
}
.hero__title-accent{ color:var(--color-gold); }
.hero__lead{
margin:0 0 2.5rem;
max-width:54ch;
font-size:1.125rem;
line-height:1.6;
color:rgba(244, 237, 228, 0.78);
}
.hero__actions{
display:flex;
flex-wrap:wrap;
gap:0.75rem;
}
.hero__markers{
list-style:none;
margin:5rem 0 0;
padding:0;
}
.hero-marker__num{
display:inline-flex;
align-items:baseline;
font-family:var(--font-display);
font-weight:400;
color:var(--color-gold);
font-size:clamp(2rem, 4vw, 3.5rem);
line-height:1;
letter-spacing:-0.01em;
}
/* Odometer — переписуємо стилі бібліотеки під наш бренд (BalticaC, золотий).
Theme-minimal задає Helvetica і line-height:1.1em — нам це не треба. */
.hero-marker__num .odometer{
font-family:var(--font-display);
line-height:1;
}
.hero-marker__suffix{
font-family:var(--font-display);
color:inherit;
}
.hero-marker__label{
display:block;
margin-top:0.75rem;
font-size:0.75rem;
letter-spacing:0.16em;
text-transform:uppercase;
color:rgba(244, 237, 228, 0.66);
line-height:1.4;
}
/* ============================================================
BLOCK: hero — модифікатор .hero--alt
Альтернативна композиція: той самий theater, але текст ліворуч,
watermark зміщений у праву половину секції (того ж розміру/прозорості).
============================================================ */
.hero--alt{
/* У v3 alt — єдина і перша секція під хедером:
враховуємо висоту острівного хедера + великі відступи для повітря */
padding-top:calc(var(--header-top) + var(--header-height) + 7rem);
padding-bottom:8rem;
}
/* Перевизначаємо центрування theater на ліве вирівнювання */
.hero--theater.hero--alt{ text-align:left; }
.hero--theater.hero--alt .hero__container{
align-items:stretch;
}
/* Title — широкий, інший контент тримаємо вужче, щоб не лізли на watermark */
.hero--theater.hero--alt .hero__title{
max-width:64rem; /* 1024px */
}
.hero--theater.hero--alt .hero__eyebrow,
.hero--theater.hero--alt .hero__lead,
.hero--theater.hero--alt .hero__actions{
max-width:38rem; /* 608px */
}
.hero--theater.hero--alt .hero__lead{ text-align:left; }
.hero--theater.hero--alt .hero__actions{ justify-content:flex-start; }
/* Watermark — той самий розмір і прозорість, тільки зміщений праворуч */
.hero--theater.hero--alt .hero__watermark{
left:75%;
top:50%;
transform:translate(-50%, -50%);
}
/* ============================================================
BLOCK: hero — модифікатор theater (v2)
Центрований текст, монограм як watermark, маркери в glass-панелі
з вертикальними розділювачами.
============================================================ */
.hero--theater{ text-align:center; }
.hero--theater .hero__container{
display:flex;
flex-direction:column;
align-items:center;
}
.hero--theater .hero__title{
max-width:24ch;
font-size:clamp(2.5rem, 6vw, 5rem); /* 40-80px */
}
.hero--theater .hero__lead{
max-width:58ch;
text-align:center;
}
.hero--theater .hero__actions{
justify-content:center;
}
/* Watermark — монограм за текстом, дуже приглушено */
.hero--theater .hero__watermark{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:clamp(20rem, 60vw, 48rem);
height:auto;
opacity:0.045;
pointer-events:none;
}
/* Маркери — у скляній панелі з вертикальними розділювачами */
.hero--theater .hero__markers{
width:100%;
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:0;
padding:2rem 1rem;
background:rgba(20, 38, 31, 0.55);
border:1px solid var(--color-line-soft);
backdrop-filter:blur(0.5rem);
-webkit-backdrop-filter:blur(0.5rem);
}
.hero--theater .hero-marker{
position:relative;
padding:0 1rem;
text-align:center;
}
.hero--theater .hero-marker + .hero-marker::before{
content:"";
position:absolute;
left:0;
top:0.5rem;
bottom:0.5rem;
width:1px;
background:var(--color-line-soft);
}
/* ============================================================
BLOCK: intro (заглушка під хедером)
============================================================ */
.intro{
padding:calc(var(--header-top) + var(--header-height) + 4.5rem) 0 3.5rem;
border-bottom:1px solid var(--color-line-soft);
}
.intro__title{
margin:0 0 1.125rem;
font-family:var(--font-display);
font-weight:400;
color:var(--color-cream);
font-size:clamp(2rem, 4vw, 3.25rem);
line-height:1.08;
letter-spacing:-0.005em;
max-width:22ch;
}
.intro__lead{
margin:0;
max-width:62ch;
color:rgba(244, 237, 228, 0.74);
font-size:1rem;
line-height:1.6;
}
/* ============================================================
BLOCK: about — cinematic strip + ledger (v3)
------------------------------------------------------------
Композиція повністю відрізняється від v1:
· landscape-photo strip на повну ширину контейнера зверху,
не портрет в asymmetric grid;
· під фото — рядок з 3 ledger-колонок (label + текст), зведений
вертикальними хейрлайнами;
· CTA «Читати більше» сидить ПОСЕРЕДИНІ нижнього розділювача,
з двома золотими тонкими лініями, що тягнуться до країв;
· фонова абстракція — dot-grid + м'який золотий стовп світла
по центру + дуже приглушений S-монограм у правому-верхньому
куті (різні від діагональних штрихів v1).
============================================================ */
.about{
position:relative;
overflow:hidden;
padding:7rem 0 7rem;
color:var(--color-cream);
}
/* Background abstraction — fade-маска на стиках з hero/showcase */
.about__bg{
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
-webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 18%, black 80%, transparent 100%);
mask-image:linear-gradient(to bottom, transparent 0%, black 18%, black 80%, transparent 100%);
}
/* Dot-grid (замість штрихів v1) + центральний амбер-стовп світла */
.about__bg::before{
content:"";
position:absolute;
inset:0;
background-image:radial-gradient(rgba(207, 191, 177, 0.06) 1px, transparent 1px);
background-size:1.5rem 1.5rem; /* 24px */
background-position:0 0;
opacity:0.7;
}
.about__bg::after{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(ellipse 38% 70% at 50% 50%, rgba(186, 148, 45, 0.09) 0%, transparent 65%),
radial-gradient(ellipse 30% 40% at 6% 12%, rgba(90, 105, 96, 0.10) 0%, transparent 65%);
}
/* Великий S-монограм у правому-верхньому куті, дуже приглушено */
.about__bg-monogram{
position:absolute;
top:-2rem;
right:-1.5rem;
font-family:var(--font-display);
font-weight:400;
font-size:32rem; /* 512px */
line-height:0.8;
color:transparent;
-webkit-text-stroke:1px rgba(186, 148, 45, 0.10);
user-select:none;
pointer-events:none;
}
.about__container{
position:relative;
z-index:1;
}
/* Head row: eyebrow ────────── since (Est. 2016)
Замість editorial page-marker з v1 — горизонтальна шапка з лінією-золотом
між eyebrow і датою заснування. */
.about__head{
display:flex;
align-items:center;
gap:1.5rem;
margin:0 0 2.5rem;
}
.about__eyebrow{
margin:0;
color:var(--color-gold);
font-size:0.75rem;
letter-spacing:0.3em;
text-transform:uppercase;
font-weight:600;
flex:none;
}
.about__head-rule{
flex:1 1 auto;
height:1px;
background:linear-gradient(90deg,
rgba(186, 148, 45, 0.55) 0%,
rgba(186, 148, 45, 0.15) 50%,
rgba(186, 148, 45, 0.55) 100%
);
}
.about__since{
margin:0;
font-family:var(--font-display);
font-size:0.875rem; /* 14px */
font-weight:400;
color:var(--color-beige-2);
letter-spacing:0.18em;
text-transform:uppercase;
flex:none;
}
/* Cinematic landscape photo strip — повна ширина контейнера, з тонкими
золотими хейрлайнами зверху і знизу, з кутовими маркерами. */
.about__media{
position:relative;
margin:0 0 3.5rem;
}
.about__media-img{
display:block;
width:100%;
height:auto;
/* Subtle vignette зверху для змʼякшення стику з шапкою */
filter:brightness(0.96);
}
.about__media-rule{
position:absolute;
left:0; right:0;
height:1px;
background:rgba(186, 148, 45, 0.5);
pointer-events:none;
}
.about__media-rule--top{ top:-0.625rem; } /* 10px над фото */
.about__media-rule--bottom{ bottom:-0.625rem; }
/* Кутові маркери — тонкі брекети 1px біля кожного кута фото */
.about__media-corner{
position:absolute;
width:0.75rem;
height:0.75rem;
pointer-events:none;
border-color:var(--color-gold);
}
.about__media-corner--tl{ top:-0.625rem; left:-0.25rem; border-top:1px solid var(--color-gold); border-left:1px solid var(--color-gold); }
.about__media-corner--tr{ top:-0.625rem; right:-0.25rem; border-top:1px solid var(--color-gold); border-right:1px solid var(--color-gold); }
.about__media-corner--bl{ bottom:-0.625rem; left:-0.25rem; border-bottom:1px solid var(--color-gold); border-left:1px solid var(--color-gold); }
.about__media-corner--br{ bottom:-0.625rem; right:-0.25rem; border-bottom:1px solid var(--color-gold); border-right:1px solid var(--color-gold); }
/* Title — центрований display, велике-зачірне-але-стримане */
.about__title{
margin:0 0 3rem;
max-width:48rem; /* 768px */
margin-left:auto;
margin-right:auto;
text-align:center;
font-family:var(--font-display);
font-weight:400;
color:var(--color-cream);
font-size:clamp(1.875rem, 3.2vw, 2.875rem); /* 30-46px */
line-height:1.15;
letter-spacing:-0.005em;
text-wrap:balance;
}
.about__title-accent{ color:var(--color-gold); }
/* Ledger — рядок з трьох колонок, розділених вертикальними хейрлайнами.
Кожна колонка має невеличкий label-кепс + параграф тексту. */
.about__ledger{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:0;
border-top:1px solid var(--color-line-soft);
border-bottom:1px solid var(--color-line-soft);
}
.about__ledger-col{
padding:2rem 2rem;
position:relative;
}
.about__ledger-col + .about__ledger-col{
border-left:1px solid var(--color-line-soft);
}
.about__ledger-label{
display:block;
margin-bottom:1rem;
font-size:0.75rem; /* 12px */
letter-spacing:0.24em;
text-transform:uppercase;
font-weight:600;
color:var(--color-gold);
}
.about__ledger-text{
margin:0;
font-size:0.875rem; /* 14px */
line-height:1.65;
color:rgba(244, 237, 228, 0.74);
}
/* Divider with CTA в центрі — два thin gold rules тягнуться L/R,
readmore-link сидить між ними з квадратними дужками. */
.about__divider{
margin-top:3.5rem;
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:1.5rem;
}
.about__divider-line{
height:1px;
background:linear-gradient(90deg,
transparent 0%,
rgba(186, 148, 45, 0.55) 100%
);
}
.about__divider-line--right{
background:linear-gradient(90deg,
rgba(186, 148, 45, 0.55) 0%,
transparent 100%
);
}
.about__readmore{
display:inline-flex;
align-items:center;
gap:0.75rem;
padding:0.5rem 0.25rem;
font-family:var(--font-sans);
font-size:0.875rem; /* 14px */
font-weight:600;
letter-spacing:0.22em;
text-transform:uppercase;
color:var(--color-gold);
transition:gap 280ms var(--ease), color 280ms var(--ease);
}
.about__readmore-bracket{
font-family:var(--font-display);
font-size:1.125rem; /* 18px */
line-height:1;
color:var(--color-gold-2);
transition:transform 280ms var(--ease), color 280ms var(--ease);
}
.about__readmore-bracket--left{
transform-origin:right center;
}
.about__readmore-bracket--right{
transform-origin:left center;
}
.about__readmore:hover,
.about__readmore:focus-visible{
gap:1.25rem;
color:var(--color-gold-2);
}
.about__readmore:hover .about__readmore-bracket--left,
.about__readmore:focus-visible .about__readmore-bracket--left{
transform:translateX(-0.25rem);
color:var(--color-cream);
}
.about__readmore:hover .about__readmore-bracket--right,
.about__readmore:focus-visible .about__readmore-bracket--right{
transform:translateX(0.25rem);
color:var(--color-cream);
}
/* ============================================================
BLOCK: vtesti — «Відео відгуки» (v3)
------------------------------------------------------------
Swiper-слайдер вертикальних карток-постерів (2:3, 3 в ряд) з круглою
золотою play-кнопкою у центрі. Плеєр відкривається у лайтбоксі Fancybox.
Hover: легкий ліфт + наближення фото + золота рамка/play.
============================================================ */
.vtesti{
position:relative;
overflow:hidden;
padding:5rem 0;
color:var(--color-cream);
}
.vtesti__bg{
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
-webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 16%, black 82%, transparent 100%);
mask-image:linear-gradient(to bottom, transparent 0%, black 16%, black 82%, transparent 100%);
}
.vtesti__bg::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(ellipse 40% 60% at 92% 8%, rgba(186, 148, 45, 0.08) 0%, transparent 62%),
radial-gradient(ellipse 36% 50% at 4% 96%, rgba(90, 105, 96, 0.12) 0%, transparent 62%);
}
.vtesti__bg-monogram{
position:absolute;
bottom:-4rem;
left:-2rem;
font-family:var(--font-display);
font-weight:400;
font-size:28rem; /* 448px */
line-height:0.8;
color:transparent;
-webkit-text-stroke:1px rgba(186, 148, 45, 0.08);
user-select:none;
pointer-events:none;
}
.vtesti__container{
position:relative;
z-index:1;
}
/* Head — центрований, як about__title; eyebrow золотом */
.vtesti__topbar{
display:flex;
align-items:flex-end; /* лічильник по низу шапки */
justify-content:space-between;
gap:2rem;
margin:0 0 4rem;
}
.vtesti__head{
max-width:46rem;
margin:0;
}
.vtesti__eyebrow{
margin:0 0 1.5rem;
display:inline-flex;
align-items:baseline;
gap:0.75rem;
color:var(--color-gold);
font-size:0.75rem;
letter-spacing:0.28em;
text-transform:uppercase;
font-weight:600;
}
.vtesti__kicker-mark{
font-family:var(--font-display);
font-size:1.5rem;
line-height:1;
color:var(--color-gold-2);
letter-spacing:0;
}
.vtesti__title{
margin:0 0 1.25rem;
font-family:var(--font-display);
font-weight:400;
color:var(--color-cream);
font-size:clamp(1.875rem, 3.2vw, 2.875rem); /* 30-46px */
line-height:1.12;
letter-spacing:-0.005em;
text-wrap:balance;
}
.vtesti__title-accent{ color:var(--color-gold); }
.vtesti__lead{
margin:0;
font-size:1rem;
line-height:1.6;
color:rgba(244, 237, 228, 0.74);
}
/* Slider (Swiper) — 3 картки в ряд на десктопі */
.vtesti__slider{
position:relative;
z-index:1;
overflow:hidden;
/* вертикальний запас, щоб ховер-ліфт картки не обрізався клипом */
padding-block:1.25rem;
margin-block:-1.25rem;
}
.vtesti__slider .swiper-wrapper{ align-items:stretch; }
.swiper-slide.vtesti-card{
height:auto;
display:flex;
}
/* Trigger — уся картка */
.vtesti-card__trigger{
display:flex;
flex-direction:column;
width:100%;
text-align:left;
color:var(--color-cream);
transition:transform 360ms var(--ease);
}
.vtesti-card__trigger:hover{ transform:translateY(-0.375rem); }
.vtesti-card__trigger:focus-visible{ outline:2px solid var(--color-gold-2); outline-offset:0.375rem; }
/* Media — постер 2:3, золота хейрлайн-рамка */
.vtesti-card__media{
position:relative;
display:block;
aspect-ratio:3 / 4;
overflow:hidden;
border:1px solid var(--color-line-soft);
background:var(--color-green-2);
transition:border-color 360ms var(--ease);
}
.vtesti-card__trigger:hover .vtesti-card__media,
.vtesti-card__trigger:focus-visible .vtesti-card__media{ border-color:var(--color-gold); }
.vtesti-card__img{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
filter:grayscale(0.32) brightness(0.86);
transform:scale(1.01);
transition:transform 720ms var(--ease), filter 480ms var(--ease);
}
.vtesti-card__trigger:hover .vtesti-card__img,
.vtesti-card__trigger:focus-visible .vtesti-card__img{
transform:scale(1.06);
filter:grayscale(0) brightness(0.96);
}
.vtesti-card__scrim{
position:absolute; inset:0;
pointer-events:none;
background:linear-gradient(180deg,
rgba(12, 24, 19, 0.10) 0%, rgba(12, 24, 19, 0.02) 38%, rgba(12, 24, 19, 0.55) 100%);
transition:background 480ms var(--ease);
}
.vtesti-card__trigger:hover .vtesti-card__scrim{
background:linear-gradient(180deg,
rgba(186, 148, 45, 0.10) 0%, rgba(12, 24, 19, 0.10) 42%, rgba(12, 24, 19, 0.58) 100%);
}
/* Play — кругле золоте кільце (SVG circle, без CSS-скруглень) */
.vtesti-card__play{
position:absolute;
top:50%; left:50%;
width:3.5rem; height:3.5rem; /* 56px */
transform:translate(-50%, -50%);
display:inline-flex;
align-items:center; justify-content:center;
color:var(--color-gold-2);
transition:color 360ms var(--ease), transform 480ms var(--ease);
}
.vtesti-card__play-ring{
position:absolute; inset:0;
width:100%; height:100%;
color:var(--color-gold);
transition:color 360ms var(--ease);
}
.vtesti-card__play-icon{
position:relative;
width:1.125rem; height:1.125rem; /* 18px */
transform:translateX(0.0625rem); /* оптичне центрування трикутника */
}
.vtesti-card__trigger:hover .vtesti-card__play,
.vtesti-card__trigger:focus-visible .vtesti-card__play{
transform:translate(-50%, -50%) scale(1.08);
}
.vtesti-card__trigger:hover .vtesti-card__play-ring,
.vtesti-card__trigger:focus-visible .vtesti-card__play-ring{ color:var(--color-gold-2); }
/* Caption — ім'я (display) + роль (caps) під постером */
.vtesti-card__caption{ display:block; padding:1rem 0.25rem 0; }
.vtesti-card__name{
display:block;
font-family:var(--font-display);
font-size:1.125rem; /* 18px */
font-weight:400;
line-height:1.2;
color:var(--color-cream);
transition:color 220ms var(--ease);
}
.vtesti-card__trigger:hover .vtesti-card__name{ color:var(--color-gold-2); }
.vtesti-card__role{
display:block;
margin-top:0.375rem;
font-size:0.75rem; /* 12px */
letter-spacing:0.16em;
text-transform:uppercase;
color:rgba(244, 237, 228, 0.62);
line-height:1.4;
}
/* Controls — стрілки навігації */
/* Лічильник відгуків — по низу шапки, праворуч */
.vtesti__count{
flex:0 0 auto;
margin:0;
display:inline-flex;
align-items:baseline;
gap:0.5rem;
font-family:var(--font-display);
line-height:1;
white-space:nowrap;
}
.vtesti__count-cur{ font-size:2.75rem; color:var(--color-gold); } /* 44px */
.vtesti__count-sep{ font-size:1.75rem; color:rgba(244, 237, 228, 0.4); }
.vtesti__count-total{ font-size:1.75rem; color:rgba(244, 237, 228, 0.62); }
/* Стрілки — по вертикальному центру слайдів (overlay на краях) */
.vtesti__arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
z-index:3;
width:3.25rem; height:3.25rem; /* 52px */
display:inline-flex;
align-items:center; justify-content:center;
background:rgba(16, 31, 25, 0.55);
backdrop-filter:blur(0.5rem);
-webkit-backdrop-filter:blur(0.5rem);
border:1px solid var(--color-line-strong);
color:var(--color-cream);
cursor:pointer;
transition:border-color 220ms var(--ease), background-color 220ms var(--ease), color 220ms var(--ease), opacity 220ms var(--ease);
}
.vtesti__arrow--prev{ left:1rem; }
.vtesti__arrow--next{ right:1rem; }
.vtesti__arrow svg{ width:1.25rem; height:1.25rem; }
.vtesti__arrow:hover{
border-color:var(--color-gold);
background:var(--color-gold);
color:var(--color-green);
}
.vtesti__arrow.swiper-button-disabled{ opacity:0; pointer-events:none; }
/* Pagination — квадратні поділки (без скруглень) */
.vtesti__pagination{
position:static;
display:flex;
justify-content:center;
gap:0.5rem;
margin-top:1.75rem;
}
.vtesti__pagination .swiper-pagination-bullet{
width:0.5rem; height:0.5rem; /* 8px */
border-radius:0;
background:var(--color-line-strong);
opacity:1;
transition:background-color 220ms var(--ease), width 220ms var(--ease);
}
.vtesti__pagination .swiper-pagination-bullet-active{
width:1.5rem;
background:var(--color-gold);
}
@media (prefers-reduced-motion: reduce){
.vtesti-card__trigger,
.vtesti-card__img,
.vtesti-card__play{ transition:none; }
}
/* ============================================================
BLOCK: filler
============================================================ */
.filler{
padding:7.5rem 0 12.5rem;
color:rgba(244, 237, 228, 0.5);
border-top:1px solid var(--color-line-soft);
}
/* ============================================================
RESPONSIVE
============================================================ */
/* Між 1024 і 1180 — стискаємо горизонтальне меню */
@media (max-width:73.75rem){ /* 1180px */
.header__inner{ gap:1.25rem; }
.header__nav > .menu > .menu-item > a{
padding:0.625rem 0.625rem;
font-size:0.75rem;
}
.button{ padding:0 0.875rem; font-size:0.75rem; }
/* mega-portal у 3 колонки */
.mega-portal > .sub-menu{
grid-template-columns:repeat(3, 1fr);
}
}
/* Ховаємо desktop-меню, показуємо бургер */
@media (max-width:56.25rem){ /* 900px */
:root{
--header-height: 4.25rem; /* 68px */
--header-top: 0.5rem; /* 8px */
--header-side: 0.5rem; /* 8px */
--container-pad: 0.5rem; /* синхронно з --header-side */
}
.header__inner{ gap:0.5rem; }
.header__nav{ display:none; }
/* Лого + текст залишаємо, але зменшуємо */
.header__brand{ gap:0.25rem; } /* 4px */
.header__brand-logo{
width:2.25rem; /* 36px */
height:2.25rem;
}
/* Текст біля логотипу — рівно як у .mobile-menu__brand-* */
.header__brand-text{
display:block;
font-size:0.75rem; /* 12px */
line-height:1.2;
letter-spacing:0;
}
.header__brand-name{
font-size:1rem; /* 16px */
line-height:1.05;
letter-spacing:0;
font-weight:700;
}
/* Всі кнопки в actions — однієї висоти 42px (як бургер) */
.header__actions .button{ --button-h:2.625rem; }
.header__actions .button--phone,
.header__actions .button--phone .button__content{ padding:0 0.75rem; }
.header__actions .button--phone .button__label{ display:none; }
.header__actions .button--phone .button__icon{ margin-right:0; }
.header__actions .header__cta{ font-size:0.75rem; }
.header__actions .header__cta .button__content{ padding:0 0.875rem; }
.header__burger{
display:inline-flex;
margin-left:0.25rem;
}
}
@media (max-width:35rem){ /* 560px */
:root{
--header-pad: 1rem;
/* --container-pad успадковує 0.5rem з @900 — синхронно з --header-side */
}
.header__actions .header__cta{ display:none; }
.intro{ padding-top:calc(var(--header-top) + var(--header-height) + 3rem); }
.hero{ padding:calc(var(--header-top) + var(--header-height) + 3rem) 0 3rem; }
.hero--alt{
padding-top:calc(var(--header-top) + var(--header-height) + 3rem);
padding-bottom:3rem;
}
.hero__markers{ margin-top:3rem; }
}
/* About responsive — ledger у 1 колонку, монограм меншає */
@media (max-width:56.25rem){ /* 900px */
.about{ padding:4.5rem 0 5rem; }
.about__head{ flex-wrap:wrap; gap:1rem; }
.about__head-rule{ flex-basis:100%; order:3; }
.about__media{ margin-bottom:2.5rem; }
.about__title{ margin-bottom:2rem; }
.about__ledger{
grid-template-columns:1fr;
}
.about__ledger-col{
padding:1.5rem 0;
}
.about__ledger-col + .about__ledger-col{
border-left:0;
border-top:1px solid var(--color-line-soft);
}
.about__divider{
margin-top:2.5rem;
grid-template-columns:1fr;
gap:1rem;
text-align:center;
justify-items:center;
}
.about__divider-line{ width:60%; }
.about__bg-monogram{
font-size:18rem; /* 288px */
top:-1rem;
right:-1rem;
}
}
/* Vtesti responsive — кількість слайдів задає Swiper (breakpoints у JS) */
@media (max-width:56.25rem){ /* 900px */
.vtesti{ padding:3rem 0; }
.vtesti__head{ margin-bottom:2.5rem; }
.vtesti__bg-monogram{ font-size:16rem; }
}
@media (max-width:35rem){ /* 560px */
.vtesti-card__name{ font-size:1rem; }
}
/* Hero responsive ─ стек і маркери у 2 колонки */
@media (max-width:56.25rem){ /* 900px */
.hero{ padding:calc(var(--header-top) + var(--header-height) + 4rem) 0 4rem; }
.hero--alt{
padding-top:calc(var(--header-top) + var(--header-height) + 4rem);
padding-bottom:4rem;
}
/* Theater маркери: 2 колонки */
.hero--theater .hero__markers{
grid-template-columns:repeat(2, 1fr);
gap:1.5rem 0;
padding:2rem 0.5rem;
}
.hero--theater .hero-marker:nth-child(odd) + .hero-marker::before{
top:0.5rem; bottom:0.5rem;
}
.hero--theater .hero-marker:nth-child(even) + .hero-marker::before{
display:none;
}
/* Alt-композиція на мобільному: знімаємо обмеження ширини
тексту, watermark повертається до центру (як у головного theater) */
.hero--theater.hero--alt .hero__eyebrow,
.hero--theater.hero--alt .hero__title,
.hero--theater.hero--alt .hero__lead,
.hero--theater.hero--alt .hero__actions{
max-width:none;
}
.hero--theater.hero--alt .hero__watermark{
left:50%;
}
}
/* Користувач воліє менш агресивну анімацію */
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
transition-duration:0.01ms !important;
animation-duration:0.01ms !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
ЄДИНИЙ РИТМ МІЖ БЛОКАМИ — 160px ПК / 96px моб.
Кожна секція дає 80px (моб 48px) зверху й знизу → кожен стик = сума 160/96.
(hero.top лишається з офсетом хедера; filler.bottom — кінець сторінки.)
═══════════════════════════════════════════════════════════════════════ */
.hero{ padding-bottom:5rem; }
.about{ padding-top:5rem; padding-bottom:5rem; }
.vtesti{ padding-top:5rem; padding-bottom:5rem; }
.filler{ padding-top:5rem; }
@media (max-width:56.25rem){ /* 900px */
.hero{ padding-bottom:3rem; }
.about{ padding-top:3rem; padding-bottom:3rem; }
.vtesti{ padding-top:3rem; padding-bottom:3rem; }
.filler{ padding-top:3rem; }
}
/* ============================================================
BLOCK: location — «Локація» (v3)
------------------------------------------------------------
Диптих на темному тлі: ліва тактильна cream-картка (офіс,
абстрактна SVG-мапа + пульсуючий золотий маркер) і права
скляна green-картка (онлайн, концентричні меридіани).
Між ними — вертикальний розділювач із золотою рискою.
Глибина: (1) tile-фон/тінь, (2) SVG-декор-шар, (3) контент.
============================================================ */
.location{
position:relative;
overflow:hidden;
padding:5rem 0;
color:var(--color-cream);
}
/* Шар 1 — атмосферне тло секції */
.location__bg{
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
}
.location__bg-glow{
position:absolute;
inset:0;
background:
radial-gradient(ellipse 44% 56% at 82% 6%, rgba(186, 148, 45, 0.07) 0%, transparent 60%),
radial-gradient(ellipse 40% 52% at 6% 94%, rgba(90, 105, 96, 0.12) 0%, transparent 62%);
}
.location__container{
position:relative;
z-index:1;
}
/* Head — у стилі секцій v3 */
.location__head{
max-width:50rem;
margin:0 0 3.5rem;
}
.location__eyebrow{
margin:0 0 1.5rem;
display:inline-flex;
align-items:baseline;
gap:0.75rem;
color:var(--color-gold);
font-size:0.75rem; /* 12px */
letter-spacing:0.28em;
text-transform:uppercase;
font-weight:600;
}
.location__kicker-mark{
font-family:var(--font-display);
font-size:1.5rem; /* 24px */
line-height:1;
color:var(--color-gold-2);
letter-spacing:0;
}
.location__title{
margin:0 0 1.25rem;
font-family:var(--font-display);
font-weight:400;
color:var(--color-cream);
font-size:clamp(1.875rem, 3.2vw, 2.875rem); /* 30-46px */
line-height:1.12;
letter-spacing:-0.005em;
text-wrap:balance;
}
.location__title-accent{ color:var(--color-gold); }
.location__lead{
margin:0;
font-size:1rem;
line-height:1.6;
color:rgba(244, 237, 228, 0.74);
max-width:42rem;
}
/* Диптих */
.location__grid{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:stretch;
gap:0;
}
/* Картка */
.location__tile{
position:relative;
overflow:hidden;
display:flex;
flex-direction:column;
min-height:26rem; /* 416px */
padding:2.5rem;
border:1px solid var(--color-line);
}
.location__tile--office{
background:linear-gradient(160deg, var(--color-cream) 0%, var(--color-beige-2) 100%);
color:var(--color-green);
box-shadow:0 1.5rem 3.5rem rgba(16, 31, 25, 0.32);
}
.location__tile--online{
background:var(--glass-bg-strong);
-webkit-backdrop-filter:var(--glass-blur);
backdrop-filter:var(--glass-blur);
border-color:var(--color-line-strong);
color:var(--color-cream);
}
/* Шар 2 — SVG-декор у верхній зоні картки */
.location__map,
.location__orbit{
position:absolute;
top:0; left:0; right:0;
height:13rem; /* 208px */
z-index:0;
pointer-events:none;
-webkit-mask-image:linear-gradient(to bottom, black 0%, black 52%, transparent 100%);
mask-image:linear-gradient(to bottom, black 0%, black 52%, transparent 100%);
}
.location__map-svg,
.location__orbit-svg{
width:100%;
height:100%;
display:block;
}
.location__map{ color:rgba(16, 31, 25, 0.16); }
.location__map-river{ color:rgba(186, 148, 45, 0.5); }
.location__orbit{ color:rgba(207, 191, 177, 0.22); }
.location__orbit-meridian{ opacity:0.7; }
/* Маркер офісу — пульс */
.location__marker-pulse{
transform-box:fill-box;
transform-origin:center;
animation:locPulse 3s var(--ease) infinite;
}
@keyframes locPulse{
0% { transform:scale(1); opacity:0.9; }
70% { transform:scale(2.4); opacity:0; }
100% { transform:scale(2.4); opacity:0; }
}
/* Орбітальні вузли — м'яке мерехтіння */
.location__orbit-node{
transform-box:fill-box;
transform-origin:center;
animation:locTwinkle 4s ease-in-out infinite;
}
.location__orbit-node--b{ animation-delay:1.3s; }
.location__orbit-node--c{ animation-delay:2.6s; }
@keyframes locTwinkle{
0%, 100% { opacity:0.35; }
50% { opacity:1; }
}
/* Шар 3 — контент картки */
.location__tile-body{
position:relative;
z-index:1;
margin-top:auto; /* контент притиснутий до низу під декором */
}
.location__tile-tag{
margin:0 0 0.875rem;
font-size:0.75rem; /* 12px */
letter-spacing:0.26em;
text-transform:uppercase;
font-weight:600;
color:var(--color-gold);
}
.location__tile-title{
margin:0 0 0.75rem;
font-family:var(--font-display);
font-weight:400;
font-size:clamp(1.5rem, 2.4vw, 1.875rem); /* 24-30px */
line-height:1.16;
}
.location__tile-text{
margin:0 0 1.75rem;
font-size:0.875rem; /* 14px */
line-height:1.62;
max-width:30rem;
}
.location__tile--office .location__tile-text{ color:var(--color-sage); }
.location__tile--online .location__tile-text{ color:rgba(244, 237, 228, 0.72); }
/* Факти */
.location__facts{
margin:0 0 2rem;
display:grid;
gap:1rem;
}
.location__fact{ margin:0; }
.location__fact-label{
display:block;
margin:0 0 0.25rem;
font-size:0.75rem; /* 12px */
letter-spacing:0.18em;
text-transform:uppercase;
font-weight:600;
}
.location__tile--office .location__fact-label{ color:rgba(16, 31, 25, 0.5); }
.location__tile--online .location__fact-label{ color:rgba(244, 237, 228, 0.5); }
.location__fact-value{
margin:0;
font-size:1rem;
line-height:1.5;
font-weight:500;
}
.location__sep{ opacity:0.5; padding:0 0.375rem; }
.location__link{
color:inherit;
text-decoration:none;
border-bottom:1px solid var(--color-line-strong);
transition:color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.location__link:hover{
color:var(--color-gold-2);
border-color:var(--color-gold);
}
.location__link:focus-visible{
outline:2px solid var(--color-gold-2);
outline-offset:0.25rem;
}
.location__cta{ align-self:flex-start; }
/* Розділювач */
.location__divider{
display:flex;
flex-direction:column;
align-items:center;
gap:1rem;
padding:0 2rem;
}
.location__divider-line{
flex:1;
width:1px;
background:linear-gradient(to bottom, transparent, var(--color-line-strong), transparent);
}
.location__divider-tick{
font-family:var(--font-display);
font-size:1.5rem; /* 24px */
line-height:1;
color:var(--color-gold);
}
/* ---- Адаптив ---- */
@media (max-width:56.25rem){ /* 900px */
.location{ padding:3rem 0; }
.location__head{ margin-bottom:2.5rem; }
.location__grid{
grid-template-columns:1fr;
gap:1.5rem;
}
.location__tile{
min-height:0;
padding:2.25rem 1.75rem;
}
.location__map,
.location__orbit{ height:11rem; }
/* горизонтальний розділювач між картками */
.location__divider{
flex-direction:row;
padding:0;
gap:0.875rem;
}
.location__divider-line{
width:auto;
height:1px;
background:linear-gradient(to right, transparent, var(--color-line-strong), transparent);
}
}
@media (max-width:35rem){ /* 560px */
.location__tile{ padding:2rem 1.25rem; }
.location__map,
.location__orbit{ height:9rem; }
.location__facts{ gap:0.875rem; }
.location__cta{ align-self:stretch; }
.location__sep{ display:none; }
.location__fact-value .location__link{ display:inline-block; margin-top:0.25rem; }
}
/* Доступність — вимикаємо рух */
@media (prefers-reduced-motion: reduce){
.location__marker-pulse,
.location__orbit-node{ animation:none; }
.location__marker-pulse{ opacity:0; }
.location__orbit-node{ opacity:0.7; }
}
/* ============================================================
Prices — прозоре ціноутворення + програма лояльності (2.7)
Тема: «реєстр» / документ-кошторис. Ліва колонка — оферта,
права — пронумерований реєстр принципів, знизу — нота лояльності.
Глибина: (1) радіальне світло + dot-grid, (2) великий символ ₴
водяним знаком, (3) контент із hairline-роздільниками.
============================================================ */
.prices{
position:relative;
overflow:hidden;
padding:5rem 0;
color:var(--color-cream);
}
/* Шар 1+2 — фон */
.prices__bg{
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
-webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 14%, black 84%, transparent 100%);
mask-image:linear-gradient(to bottom, transparent 0%, black 14%, black 84%, transparent 100%);
}
.prices__bg::before{
content:"";
position:absolute;
inset:0;
background-image:radial-gradient(rgba(207, 191, 177, 0.05) 1px, transparent 1px);
background-size:1.5rem 1.5rem; /* 24px */
opacity:0.6;
}
.prices__bg::after{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(ellipse 34% 56% at 18% 10%, rgba(186, 148, 45, 0.10) 0%, transparent 64%),
radial-gradient(ellipse 40% 60% at 96% 92%, rgba(90, 105, 96, 0.12) 0%, transparent 62%);
}
.prices__bg-index{
position:absolute;
right:-1rem;
top:-3rem;
font-family:var(--font-display);
font-weight:700;
font-size:30rem; /* 480px */
line-height:0.8;
color:transparent;
-webkit-text-stroke:1px rgba(186, 148, 45, 0.09);
user-select:none;
}
/* Поле-маржа: тонкий вертикальний штрих, як у краю аркуша-документа */
.prices__margin-rule{
position:absolute;
top:10%;
bottom:10%;
left:50%;
width:1px;
background:linear-gradient(180deg,
transparent 0%,
rgba(186, 148, 45, 0.16) 18%,
rgba(207, 191, 177, 0.08) 50%,
rgba(186, 148, 45, 0.16) 82%,
transparent 100%
);
opacity:0.7;
}
@media (max-width: 64rem){ /* 1024px — маржа лиш на широких */
.prices__margin-rule{ display:none; }
}
.prices__container{
position:relative;
z-index:1;
}
/* Шапка — eyebrow ──────── note */
.prices__head{
display:flex;
align-items:center;
gap:1.5rem;
margin:0 0 3rem;
}
.prices__eyebrow{
margin:0;
display:inline-flex;
align-items:baseline;
gap:0.75rem;
color:var(--color-gold);
font-size:0.75rem;
letter-spacing:0.28em;
text-transform:uppercase;
font-weight:600;
flex:none;
}
.prices__eyebrow-text{ display:inline-block; }
.prices__kicker-mark{
font-family:var(--font-display);
font-size:1.5rem;
line-height:1;
color:var(--color-gold-2);
letter-spacing:0;
}
.prices__head-rule{
flex:1 1 auto;
height:1px;
background:linear-gradient(90deg,
rgba(186, 148, 45, 0.55) 0%,
rgba(186, 148, 45, 0.14) 50%,
rgba(186, 148, 45, 0.55) 100%
);
}
.prices__head-note{
margin:0;
flex:none;
font-family:var(--font-display);
font-size:0.875rem; /* 14px */
color:var(--color-beige-2);
letter-spacing:0.14em;
text-transform:uppercase;
}
/* Дві колонки: оферта | реєстр */
.prices__layout{
display:grid;
grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.1fr);
gap:4rem;
align-items:start;
}
.prices__intro{
position:relative;
max-width:34rem;
padding-left:1.5rem; /* місце під вертикальний штрих */
}
.prices__intro::before{ /* короткий золотий штрих-індекс зліва */
content:"";
position:absolute;
left:0;
top:0.5rem;
width:2px;
height:2.5rem; /* 40px */
background:linear-gradient(180deg, var(--color-gold) 0%, rgba(186, 148, 45, 0) 100%);
}
.prices__intro-label{
display:block;
margin:0 0 0.75rem;
font-family:var(--font-sans);
font-size:0.75rem; /* 12px */
letter-spacing:0.32em;
text-transform:uppercase;
color:var(--color-sage);
}
.prices__title{
margin:0 0 1.25rem;
font-family:var(--font-display);
font-weight:400;
color:var(--color-cream);
font-size:clamp(1.875rem, 3.2vw, 2.875rem); /* 30-46px */
line-height:1.12;
letter-spacing:-0.005em;
text-wrap:balance;
}
.prices__title-accent{
font-style:italic;
color:var(--color-gold);
}
.prices__lead{
margin:0 0 2.25rem;
font-size:1rem;
line-height:1.6;
color:rgba(244, 237, 228, 0.74);
}
.prices__actions{
display:flex;
flex-wrap:wrap;
gap:1rem;
}
/* Реєстр принципів — кожен рядок як запис у документі, з'єднаний меридіаном */
.prices__ledger{
position:relative;
list-style:none;
margin:0;
padding:0 0 0 3.5rem; /* 56px — місце під меридіан і номери */
}
/* Меридіан — золота нитка, що зшиває три принципи; заповнюється при скролі */
.prices__meridian{
position:absolute;
left:0.875rem; /* 14px — центр під номерами */
top:1.75rem;
bottom:1.75rem;
width:1px;
background:var(--color-line);
}
.prices__meridian-fill{
position:absolute;
inset:0 0 auto 0;
height:0;
width:1px;
background:linear-gradient(180deg, var(--color-gold-2) 0%, var(--color-gold) 100%);
box-shadow:0 0 8px rgba(186, 148, 45, 0.45);
transition:height 900ms var(--ease);
}
.prices--sheet.is-threaded .prices__meridian-fill{ height:100%; }
.prices__row{
position:relative;
display:flex;
gap:1.5rem;
padding:1.75rem 0;
border-top:1px solid var(--color-line);
transition:padding-left 360ms var(--ease);
}
.prices__row:last-child{ border-bottom:1px solid var(--color-line); }
/* Вузол меридіана навпроти кожного номера */
.prices__row-node{
position:absolute;
left:-2.625rem; /* -42px → на лінії меридіана */
top:2.25rem; /* 36px — рівень номера */
width:0.5rem; /* 8px */
height:0.5rem;
margin:-0.25rem 0 0 -0.25rem;
background:var(--color-green);
border:1px solid var(--color-gold);
transform:rotate(45deg) scale(0.7);
opacity:0.55;
transition:transform 420ms var(--ease), opacity 420ms var(--ease), background 420ms var(--ease);
}
.prices__row.is-revealed .prices__row-node{
transform:rotate(45deg) scale(1);
opacity:1;
}
.prices__row-num{
position:absolute;
left:-3.5rem; /* над меридіаном, велика editorial-цифра */
top:1.5rem;
flex:none;
font-family:var(--font-display);
font-size:1.625rem; /* 26px */
line-height:1;
color:var(--color-gold);
letter-spacing:0.02em;
}
.prices__row-num::after{ /* тонке золоте підкреслення, що «креслиться» */
content:"";
position:absolute;
left:0;
right:0;
bottom:-0.5rem;
height:1px;
background:var(--color-gold);
transform:scaleX(0);
transform-origin:left center;
transition:transform 640ms var(--ease) 120ms;
}
.prices__row.is-revealed .prices__row-num::after{ transform:scaleX(1); }
.prices__row-body{ display:block; }
.prices__row-title{
display:block;
margin:0 0 0.5rem;
font-family:var(--font-display);
font-size:1.25rem; /* 20px */
font-weight:400;
color:var(--color-cream);
letter-spacing:0.005em;
transition:color 280ms var(--ease);
}
.prices__row-text{
display:block;
font-size:0.875rem; /* 14px */
line-height:1.6;
color:rgba(244, 237, 228, 0.66);
}
/* Шар 3 — нота лояльності як тиха «печатка» */
.prices__loyalty{
position:relative;
overflow:hidden;
display:flex;
align-items:center;
gap:2rem;
margin:4rem 0 0;
padding:2rem 2.25rem;
background:
radial-gradient(ellipse 30% 120% at 0% 50%, rgba(186, 148, 45, 0.10) 0%, transparent 70%),
var(--color-line-soft);
border:1px solid var(--color-line);
border-left:2px solid var(--color-gold);
transition:border-color 320ms var(--ease), background 320ms var(--ease);
}
.prices__loyalty-mark{
position:relative;
flex:none;
display:block;
width:4rem; /* 64px */
height:4rem;
color:var(--color-gold);
}
.prices__loyalty-mark svg{ display:block; width:100%; height:100%; }
.prices__seal-ring{ opacity:0.75; }
.prices__seal-ring--inner{ opacity:0.45; }
.prices__seal-tick{ stroke-linecap:round; stroke-linejoin:round; }
.prices__seal-rays{ opacity:0.5; transition:opacity 480ms var(--ease); }
/* Печатка повільно обертається на reveal — кінетика лишається стриманою */
.prices__loyalty .prices__loyalty-mark svg{
transition:transform 1200ms var(--ease);
transform:rotate(-12deg);
}
.prices__loyalty.is-revealed .prices__loyalty-mark svg{ transform:rotate(0deg); }
.prices__loyalty-label{
display:block;
margin:0 0 0.5rem;
font-family:var(--font-sans);
font-size:0.75rem; /* 12px */
letter-spacing:0.3em;
text-transform:uppercase;
color:var(--color-gold-2);
}
.prices__loyalty-title{
margin:0 0 0.375rem;
font-family:var(--font-display);
font-size:1.25rem; /* 20px */
font-weight:400;
color:var(--color-cream);
letter-spacing:0.01em;
}
.prices__loyalty-text{
margin:0;
font-size:0.875rem; /* 14px */
line-height:1.6;
color:rgba(244, 237, 228, 0.7);
max-width:48rem;
}
/* Тихий кутовий штрих — натяк на загнутий ріг документа */
.prices__loyalty-corner{
position:absolute;
top:0;
right:0;
width:1.5rem; /* 24px */
height:1.5rem;
border-top:1px solid rgba(186, 148, 45, 0.4);
border-right:1px solid rgba(186, 148, 45, 0.4);
pointer-events:none;
}
/* ---- Адаптив ---- */
@media (max-width: 64rem){ /* 1024px */
.prices__layout{
grid-template-columns:1fr;
gap:2.5rem;
}
.prices__intro{ max-width:none; }
}
@media (max-width: 56.25rem){ /* 900px — ритм секції */
.prices{ padding:3rem 0; }
.prices__head{ margin:0 0 2rem; }
.prices__bg-index{ font-size:20rem; top:-1.5rem; }
}
@media (max-width: 36rem){ /* 576px */
.prices__head{
flex-wrap:wrap;
gap:0.875rem;
}
.prices__head-rule{ order:3; flex-basis:100%; }
.prices__actions .button{ flex:1 1 100%; }
/* На вузьких — меридіан вужчий, номери компактніші */
.prices__ledger{ padding-left:2.5rem; } /* 40px */
.prices__meridian{ left:0.5rem; } /* 8px */
.prices__row-node{ left:-2rem; } /* -32px */
.prices__row-num{
left:-2.5rem; /* -40px */
font-size:1.25rem; /* 20px */
}
.prices__row{
gap:1rem;
padding:1.5rem 0;
}
.prices__loyalty{
flex-direction:column;
align-items:flex-start;
gap:1.25rem;
padding:1.75rem 1.25rem;
}
}
/* ============================================================
2.8 — Форма запиту (.contact)
Тема v3: «офіційне досьє» — поля-рядки з hairline-підкресленням,
ліва колонка-запевнення, тло з великим знаком §.
============================================================ */
.contact{
position:relative;
overflow:hidden;
padding:5rem 0;
color:var(--color-cream);
}
/* Шар 1 — тло */
.contact__bg{
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
}
.contact__bg-glow{
position:absolute;
inset:0;
background:
radial-gradient(ellipse 46% 58% at 14% 4%, rgba(186, 148, 45, 0.08) 0%, transparent 60%),
radial-gradient(ellipse 42% 54% at 92% 96%, rgba(90, 105, 96, 0.14) 0%, transparent 62%);
}
.contact__bg-index{
position:absolute;
right:-2rem;
bottom:-4rem;
font-family:var(--font-display);
font-size:28rem; /* 448px */
line-height:1;
color:rgba(207, 191, 177, 0.04);
user-select:none;
}
/* Шар 2 — лінатура офіційного бланка */
.contact__ledger{
position:absolute;
inset:0;
width:100%;
height:100%;
color:rgba(207, 191, 177, 0.06);
}
.contact__ledger-margin{
color:rgba(186, 148, 45, 0.16);
}
.contact__container{
position:relative;
z-index:1;
}
/* Сітка — диптих */
.contact__layout{
display:grid;
grid-template-columns:1fr 1fr;
gap:4rem;
align-items:start;
}
/* ---- Ліва колонка ---- */
.contact__eyebrow{
margin:0 0 1.5rem;
display:inline-flex;
align-items:baseline;
gap:0.75rem;
color:var(--color-gold);
font-size:0.75rem; /* 12px */
letter-spacing:0.28em;
text-transform:uppercase;
font-weight:600;
}
.contact__kicker-mark{
font-family:var(--font-display);
font-size:1.5rem; /* 24px */
line-height:1;
color:var(--color-gold-2);
letter-spacing:0;
}
.contact__title{
margin:0 0 1.25rem;
font-family:var(--font-display);
font-weight:400;
color:var(--color-cream);
font-size:clamp(1.875rem, 3.2vw, 2.875rem); /* 30-46px */
line-height:1.12;
letter-spacing:-0.005em;
text-wrap:balance;
}
.contact__title-accent{ color:var(--color-gold); }
.contact__lead{
margin:0 0 2rem;
font-size:1rem;
line-height:1.6;
color:rgba(244, 237, 228, 0.74);
max-width:34rem;
}
/* Шар 3 — реєстраційний рядок «справи» */
.contact__registry{
display:flex;
align-items:center;
gap:1rem;
margin:0 0 2.5rem;
}
.contact__registry-line{
flex:0 0 auto;
width:2.5rem; /* 40px */
height:1px;
background:var(--color-gold);
}
.contact__registry-text{
font-size:0.75rem; /* 12px */
letter-spacing:0.22em;
text-transform:uppercase;
color:rgba(207, 191, 177, 0.5);
}
/* Запевнення */
.contact__assurances{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:1.5rem;
}
.contact__assurance{
display:flex;
gap:1rem;
padding-top:1.5rem;
border-top:1px solid var(--color-line-soft);
}
.contact__assurance:first-child{
padding-top:0;
border-top:none;
}
.contact__assurance-mark{
flex:0 0 auto;
width:2.5rem; /* 40px */
height:2.5rem;
color:var(--color-gold);
}
.contact__assurance-mark svg{
display:block;
width:100%;
height:100%;
}
.contact__assurance-title{
display:block;
margin:0 0 0.375rem;
font-family:var(--font-display);
font-size:1.125rem; /* 18px */
line-height:1.2;
color:var(--color-cream);
}
.contact__assurance-text{
display:block;
font-size:0.875rem; /* 14px */
line-height:1.6;
color:rgba(244, 237, 228, 0.68);
}
/* ---- Права колонка: панель форми ---- */
.contact__panel{
position:relative;
padding:2.5rem;
background:rgba(20, 38, 31, 0.42); /* приглушений green-2 */
border:1px solid var(--color-line);
}
.contact__panel-edge{
position:absolute;
left:0;
top:0;
bottom:0;
width:2px;
background:var(--color-gold);
}
.contact__form{ position:relative; }
.contact__form-note{
display:flex;
align-items:baseline;
flex-wrap:wrap;
gap:0.5rem 0.75rem;
margin:0 0 2rem;
font-size:0.75rem; /* 12px */
letter-spacing:0.04em;
color:rgba(244, 237, 228, 0.56);
}
.contact__form-note-tag{
font-size:0.625rem; /* 10px */
letter-spacing:0.22em;
text-transform:uppercase;
font-weight:600;
color:var(--color-gold);
padding:0.25rem 0.5rem;
border:1px solid var(--color-line);
}
.contact__req-key,
.contact__req{ color:var(--color-gold-2); }
/* Поле — рядок з hairline-підкресленням + нумерація бланка */
.contact__field{
position:relative;
margin:0 0 1.75rem;
padding-left:2.5rem; /* місце під індекс 40px */
}
.contact__field-index{
position:absolute;
left:0;
top:0.125rem; /* 2px — вирівняти з лейблом */
font-family:var(--font-display);
font-size:0.875rem; /* 14px */
letter-spacing:0.04em;
color:rgba(207, 191, 177, 0.34);
transition:color 240ms var(--ease), transform 240ms var(--ease);
}
.contact__label{
display:block;
margin:0 0 0.5rem;
font-size:0.75rem; /* 12px */
letter-spacing:0.16em;
text-transform:uppercase;
font-weight:600;
color:var(--color-beige);
transition:color 200ms var(--ease);
}
.contact__input{
display:block;
width:100%;
padding:0.75rem 0;
background:transparent;
border:none;
border-bottom:1px solid var(--color-line-strong);
font-family:var(--font-sans);
font-size:1rem;
line-height:1.5;
color:var(--color-cream);
transition:border-color 200ms var(--ease);
}
.contact__input--area{
min-height:6rem; /* 96px */
resize:vertical;
}
.contact__input::placeholder{
color:rgba(244, 237, 228, 0.34);
}
.contact__input:hover{
border-bottom-color:var(--color-beige);
}
.contact__input:focus{
outline:none;
border-bottom-color:var(--color-line-strong);
}
.contact__input:focus-visible{
outline:none;
border-bottom-color:var(--color-line-strong);
}
/* Шар: золота каретка — малюється зліва-направо під активним полем */
.contact__rule{
position:absolute;
left:2.5rem; /* під полем, після індексу */
right:0;
bottom:0;
height:2px;
background:var(--color-gold);
transform:scaleX(0);
transform-origin:left center;
transition:transform 360ms var(--ease);
pointer-events:none;
}
.contact__input:focus ~ .contact__rule{
transform:scaleX(1);
}
/* Активне поле підсвічує власний номер і лейбл */
.contact__field:focus-within .contact__field-index{
color:var(--color-gold);
transform:translateY(-0.125rem); /* -2px */
}
.contact__field:focus-within .contact__label{
color:var(--color-cream);
}
/* meta-рядок: помилка + лічильник символів */
.contact__meta{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:1rem;
margin-top:0.5rem;
}
.contact__count{
flex:0 0 auto;
font-size:0.75rem; /* 12px */
letter-spacing:0.04em;
color:rgba(244, 237, 228, 0.4);
font-variant-numeric:tabular-nums;
transition:color 200ms var(--ease);
}
.contact__count.is-near{ color:var(--color-gold-2); }
/* Стан помилки — кілька рухомих елементів */
.contact__field.is-invalid .contact__input{
border-bottom-color:var(--color-gold);
}
.contact__field.is-invalid .contact__field-index{
color:var(--color-gold);
}
.contact__field.is-invalid .contact__label{
color:var(--color-beige-2);
}
.contact__field.is-invalid .contact__rule{
background:var(--color-gold);
transform:scaleX(1);
animation:contact-rule-flick 420ms var(--ease) both;
}
.contact__error{
display:block;
min-height:1rem;
margin-top:0.5rem;
font-size:0.75rem; /* 12px */
line-height:1.3;
color:var(--color-gold-2);
}
.contact__error:not(:empty){
animation:contact-error-in 320ms var(--ease) both;
}
/* У полі з meta error не має власного top-margin */
.contact__meta .contact__error{ margin-top:0; }
@keyframes contact-rule-flick{
0% { transform:scaleX(0); }
100% { transform:scaleX(1); }
}
@keyframes contact-error-in{
0% { opacity:0; transform:translateY(0.25rem); }
100% { opacity:1; transform:translateY(0); }
}
/* Сабміт */
.contact__submit{
margin-top:2rem;
}
.contact__submit .button{
width:100%;
}
/* Повідомлення-подяка — реєстраційна печатка */
.contact__success{
position:relative;
display:flex;
gap:1.25rem;
align-items:flex-start;
margin:2rem 0 0;
padding:1.75rem 1.5rem;
border:1px solid var(--color-line);
background:rgba(16, 31, 25, 0.5);
overflow:hidden;
animation:contact-success-in 520ms var(--ease) both;
}
.contact__success::before{ /* золотий край-маркер, як у панелі */
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:2px;
background:var(--color-gold);
}
.contact__success[hidden]{ display:none; }
.contact__success-mark{
flex:0 0 auto;
width:3rem; /* 48px */
height:3rem;
color:var(--color-gold);
}
.contact__success-mark svg{
display:block;
width:100%;
height:100%;
}
.contact__seal-ring{
transform-origin:28px 28px;
animation:contact-seal-ring 600ms var(--ease) both;
}
.contact__seal-ring--inner{ animation-delay:120ms; }
.contact__seal-check{
stroke-dasharray:48;
stroke-dashoffset:48;
animation:contact-seal-check 520ms var(--ease) 320ms both;
}
.contact__success-title{
display:block;
margin:0 0 0.375rem;
font-family:var(--font-display);
font-size:1.125rem; /* 18px */
color:var(--color-cream);
}
.contact__success-text{
display:block;
font-size:0.875rem; /* 14px */
line-height:1.6;
color:rgba(244, 237, 228, 0.68);
}
.contact__success-stamp{
display:inline-block;
margin-top:0.75rem;
font-size:0.625rem; /* 10px */
letter-spacing:0.22em;
text-transform:uppercase;
color:var(--color-gold-2);
}
@keyframes contact-success-in{
0% { opacity:0; transform:translateY(0.75rem); }
100% { opacity:1; transform:translateY(0); }
}
@keyframes contact-seal-ring{
0% { opacity:0; transform:scale(0.7) rotate(-12deg); }
100% { opacity:1; transform:scale(1) rotate(0); }
}
@keyframes contact-seal-check{
0% { stroke-dashoffset:48; }
100% { stroke-dashoffset:0; }
}
/* ---- Адаптив ---- */
@media (max-width: 56.25rem){ /* 900px — одна колонка */
.contact{ padding:3rem 0; }
.contact__layout{
grid-template-columns:1fr;
gap:2.5rem;
}
.contact__lead{ max-width:none; }
.contact__bg-index{ font-size:18rem; right:-1.5rem; }
}
@media (max-width: 35rem){ /* 560px */
.contact__panel{ padding:1.75rem 1.25rem; }
.contact__assurance{ gap:0.75rem; }
.contact__field{ padding-left:2rem; } /* 32px — тісніше на малих екранах */
.contact__field-index{ font-size:0.75rem; } /* 12px */
.contact__rule{ left:2rem; }
.contact__meta{ flex-direction:column; gap:0.25rem; }
}
@media (prefers-reduced-motion: reduce){
.contact__input{ transition:none; }
.contact__field-index,
.contact__label,
.contact__count{ transition:none; }
.contact__rule{
transition:none;
transform:scaleX(1);
opacity:0;
}
.contact__input:focus ~ .contact__rule{ opacity:1; }
.contact__field.is-invalid .contact__rule{ animation:none; opacity:1; }
.contact__error:not(:empty){ animation:none; }
.contact__success,
.contact__seal-ring,
.contact__seal-check{ animation:none; }
.contact__seal-check{ stroke-dashoffset:0; }
}
/* ============================================================
FAQ (2.9) — вертикальний «реєстр питань» з нативним акордеоном
============================================================ */
.faq{
position:relative;
padding:5rem 0;
overflow:hidden;
}
/* Шар 1 — глибина: промінь, гравірований стовпчик-rule, дрейфуючий ¶, «?» */
.faq__bg{
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
}
.faq__bg-beam{
position:absolute;
top:0; bottom:0;
left:50%;
width:24rem;
transform:translateX(-50%);
background:radial-gradient(60% 50% at 50% 30%,
rgba(186, 148, 45, 0.10) 0%,
rgba(186, 148, 45, 0) 70%
);
}
/* Гравірована стовпчикова сітка — ледь помітні вертикалі */
.faq__bg-grid{
position:absolute;
inset:0;
width:100%;
height:100%;
opacity:0.5;
}
.faq__bg-grid line{
stroke:var(--color-line-soft);
stroke-width:1;
vector-effect:non-scaling-stroke;
}
/* Дрейфуючий параграф-знак — рухається на скролі (data-faq-drift) */
.faq__bg-mark{
position:absolute;
top:14%;
left:8%;
font-family:var(--font-display);
font-size:9rem;
line-height:1;
color:rgba(207, 191, 177, 0.05);
user-select:none;
will-change:transform;
transition:transform 0.6s var(--ease);
}
.faq__bg-index{
position:absolute;
top:50%;
right:-1rem;
transform:translateY(-50%);
font-family:var(--font-display);
font-size:26rem;
line-height:1;
color:var(--color-line-soft);
user-select:none;
}
.faq__container{
position:relative;
z-index:1;
}
/* Шапка секції — у ритмі prices/contact */
.faq__head{
display:flex;
align-items:center;
gap:1.5rem;
margin-bottom:2.5rem;
}
.faq__eyebrow{
margin:0;
display:inline-flex;
align-items:baseline;
gap:0.75rem;
color:var(--color-gold);
font-size:0.75rem;
letter-spacing:0.28em;
text-transform:uppercase;
font-weight:600;
flex:none;
min-width:0;
}
.faq__eyebrow-text{
display:inline-block;
min-width:0;
}
.faq__kicker-mark{
font-family:var(--font-display);
font-size:1.5rem;
line-height:1;
color:var(--color-gold-2);
letter-spacing:0;
}
.faq__head-rule{
flex:1 1 auto;
height:1px;
background:linear-gradient(90deg,
rgba(186, 148, 45, 0.55) 0%,
rgba(186, 148, 45, 0.14) 50%,
rgba(186, 148, 45, 0.55) 100%
);
}
.faq__head-note{
margin:0;
flex:none;
font-family:var(--font-display);
font-size:0.875rem;
color:var(--color-beige-2);
letter-spacing:0.14em;
text-transform:uppercase;
}
/* Дві колонки: вступ (sticky) | список */
.faq__layout{
display:grid;
grid-template-columns:minmax(0, 0.85fr) minmax(0, 1.15fr);
gap:4rem;
align-items:start;
}
/* Ліва колонка */
.faq__intro{
position:sticky;
top:7.5rem;
max-width:30rem;
}
/* Кастомний знак «відкритий діалог» — дві репліки лініями */
.faq__intro-mark{
display:block;
width:3rem;
height:3rem;
margin-bottom:1.5rem;
}
.faq__intro-mark svg{
width:100%;
height:100%;
overflow:visible;
}
.faq__intro-mark path{
fill:none;
stroke-width:1.25;
vector-effect:non-scaling-stroke;
}
.faq__intro-mark-a{
stroke:var(--color-beige);
opacity:0.55;
}
.faq__intro-mark-b{
stroke:var(--color-gold-2);
transform:translate(0, 0);
transition:transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.faq__intro:hover .faq__intro-mark-b{
transform:translate(-1px, -1px);
}
.faq__title{
margin:0 0 1.25rem;
font-family:var(--font-display);
font-weight:400;
color:var(--color-cream);
font-size:clamp(1.875rem, 3.2vw, 2.875rem);
line-height:1.12;
letter-spacing:-0.005em;
text-wrap:balance;
}
.faq__title-accent{ color:var(--color-gold); }
.faq__lead{
margin:0 0 2rem;
font-size:1rem;
line-height:1.7;
color:rgba(244, 237, 228, 0.74);
max-width:26rem;
}
.faq__count{
margin:0;
display:flex;
align-items:baseline;
gap:0.75rem;
padding-top:1.5rem;
border-top:1px solid var(--color-line);
}
.faq__count-num{
font-family:var(--font-display);
font-size:2rem;
line-height:1;
color:var(--color-gold);
}
.faq__count-text{
font-size:0.75rem;
letter-spacing:0.24em;
text-transform:uppercase;
color:var(--color-sage);
}
/* Підпис-«фірмовий знак» унизу вступу */
.faq__sign{
margin:1.5rem 0 0;
display:flex;
align-items:center;
gap:0.75rem;
}
.faq__sign-line{
width:2rem;
height:1px;
background:var(--color-gold);
flex:none;
}
.faq__sign-text{
font-family:var(--font-display);
font-size:0.875rem;
letter-spacing:0.04em;
color:var(--color-sage);
}
/* Права колонка: акордеон */
.faq__list{
border-top:1px solid var(--color-line);
}
.faq__item{
position:relative;
border-bottom:1px solid var(--color-line);
}
/* Ліва прогрес-нитка пункту: тонка лінія, що «наливається» золотом */
.faq__item-rail{
position:absolute;
left:0;
top:0;
bottom:0;
width:1px;
transform:scaleY(0);
transform-origin:top center;
background:linear-gradient(180deg,
var(--color-gold) 0%,
var(--color-gold-2) 100%);
transition:transform 0.5s var(--ease);
pointer-events:none;
}
.faq__item:hover > .faq__item-rail{ transform:scaleY(0.18); }
.faq__item[open] > .faq__item-rail{ transform:scaleY(1); }
/* Summary — рядок-тригер */
.faq__summary{
position:relative;
list-style:none;
cursor:pointer;
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:1.25rem;
padding:1.5rem 0.25rem 1.5rem 1.5rem;
color:var(--color-cream);
transition:color 0.3s var(--ease), padding-left 0.4s var(--ease);
}
/* Сяйво-підкладка рядка при ховері */
.faq__summary::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,
rgba(186, 148, 45, 0.06) 0%,
rgba(186, 148, 45, 0) 60%);
opacity:0;
transition:opacity 0.35s var(--ease);
pointer-events:none;
}
.faq__summary:hover::before{ opacity:1; }
.faq__item:hover > .faq__summary{ padding-left:1.75rem; }
.faq__item[open] > .faq__summary{ padding-left:1.75rem; }
/* Прибрати дефолтні маркери */
.faq__summary::-webkit-details-marker{ display:none; }
.faq__summary::marker{ content:""; }
.faq__summary:hover{ color:var(--color-gold-2); }
.faq__summary:focus-visible{
outline:2px solid var(--color-gold);
outline-offset:4px;
}
.faq__num{
font-family:var(--font-display);
font-size:0.875rem;
line-height:1;
color:var(--color-gold);
letter-spacing:0.06em;
min-width:1.5rem;
transition:color 0.3s var(--ease), transform 0.4s var(--ease);
}
.faq__item:hover > .faq__summary .faq__num,
.faq__item[open] > .faq__summary .faq__num{
transform:translateY(-2px);
}
.faq__q{
font-family:var(--font-display);
font-size:clamp(1.125rem, 1.6vw, 1.25rem);
line-height:1.3;
color:inherit;
}
/* Кастомний індикатор: коло + хрест, що стає мінусом у [open] */
.faq__icon{
flex:none;
width:2.5rem;
height:2.5rem;
display:inline-flex;
align-items:center;
justify-content:center;
color:var(--color-beige);
border:1px solid var(--color-line-strong);
transition:border-color 0.3s var(--ease), color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.faq__icon svg{
width:1.25rem;
height:1.25rem;
overflow:visible;
}
.faq__icon-v{
transform-origin:center;
transition:transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.faq__icon-h{
transform-origin:center;
transition:transform 0.4s var(--ease);
}
.faq__summary:hover .faq__icon{
border-color:var(--color-gold);
color:var(--color-gold-2);
}
/* Стан розгорнутого пункту */
.faq__item[open] > .faq__summary{ color:var(--color-gold-2); }
.faq__item[open] .faq__num{ color:var(--color-gold-2); }
.faq__item[open] .faq__icon{
background:rgba(186, 148, 45, 0.12);
border-color:var(--color-gold);
color:var(--color-gold-2);
}
.faq__item[open] .faq__icon-v{
transform:rotate(90deg);
opacity:0;
}
/* Відповідь */
.faq__answer{
position:relative;
padding:0.5rem 4rem 1.75rem calc(1.5rem + 1.5rem + 1.5rem);
animation:faq-reveal 0.45s var(--ease) both;
}
/* Кастомний кутовий кронштейн перед відповіддю */
.faq__answer-mark{
position:absolute;
left:1.5rem;
top:0.625rem;
width:1rem;
height:1rem;
color:var(--color-gold);
animation:faq-mark 0.55s var(--ease) 0.08s both;
}
.faq__answer-mark svg{
width:100%;
height:100%;
overflow:visible;
}
.faq__answer-mark path{
fill:none;
stroke:currentColor;
stroke-width:1.25;
vector-effect:non-scaling-stroke;
}
.faq__answer p{
margin:0;
font-size:1rem;
line-height:1.75;
color:rgba(244, 237, 228, 0.72);
max-width:42rem;
}
@keyframes faq-reveal{
from{ opacity:0; transform:translateY(-0.5rem); }
to{ opacity:1; transform:translateY(0); }
}
@keyframes faq-mark{
from{ opacity:0; transform:translate(4px, 0); }
to{ opacity:1; transform:translate(0, 0); }
}
/* Низ секції — перехід на повну сторінку FAQ */
.faq__footer{
margin-top:3rem;
padding-top:2rem;
border-top:1px solid var(--color-line);
display:flex;
align-items:center;
justify-content:space-between;
gap:1.5rem;
flex-wrap:wrap;
}
.faq__footer-text{
margin:0;
font-family:var(--font-display);
font-size:1.125rem;
color:var(--color-beige-2);
}
/* ---- Адаптив ---- */
@media (max-width: 56.25rem){ /* 900px — одна колонка */
.faq{ padding:3rem 0; }
.faq__layout{
grid-template-columns:1fr;
gap:2rem;
}
.faq__intro{
position:static;
max-width:none;
}
.faq__bg-index{ font-size:18rem; right:-1.5rem; }
.faq__bg-mark{ font-size:6rem; }
.faq__answer{ padding-right:1.5rem; }
}
@media (max-width: 35rem){ /* 560px */
.faq__head{ gap:1rem; }
.faq__head-note{ display:none; }
.faq__eyebrow{ font-size:0.625rem; letter-spacing:0.2em; }
.faq__bg-mark{ display:none; }
.faq__intro-mark{ width:2.5rem; height:2.5rem; margin-bottom:1.25rem; }
.faq__summary{
gap:1rem;
padding:1.25rem 0 1.25rem 1rem;
}
.faq__item:hover > .faq__summary,
.faq__item[open] > .faq__summary{ padding-left:1rem; }
.faq__icon{ width:2rem; height:2rem; }
.faq__answer{ padding-left:calc(1rem + 1rem + 1.25rem); }
.faq__answer-mark{ left:1rem; }
.faq__footer{ justify-content:flex-start; }
}
@media (prefers-reduced-motion: reduce){
.faq__summary,
.faq__num,
.faq__icon,
.faq__icon-v,
.faq__icon-h,
.faq__item-rail,
.faq__intro-mark-b,
.faq__bg-mark{ transition:none; }
.faq__answer,
.faq__answer-mark{ animation:none; }
.faq__bg-mark{ transform:none !important; }
}
/* ============================================================
НАШІ КЛІЄНТИ (2.10) — v3 «реєстр довіри»
============================================================ */
.clients{
position:relative;
padding:5rem 0;
overflow:hidden;
}
/* Шар 1 — тло: світіння, гербова печатка, індекс «№» */
.clients__bg{
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
}
.clients__bg-glow{
position:absolute;
top:-6rem; left:50%;
width:48rem; height:48rem;
transform:translateX(-50%);
background:radial-gradient(circle,
rgba(186, 148, 45, 0.10) 0%,
rgba(186, 148, 45, 0) 60%);
filter:blur(1.5rem);
}
.clients__bg-seal{
position:absolute;
top:50%; left:50%;
width:50rem; height:50rem; /* 800px */
transform:translate(-50%, -50%);
color:var(--color-line-soft);
opacity:0.6;
}
.clients__bg-rays{
transform-origin:300px 300px;
transition:transform 1.4s var(--ease);
}
.clients:has(.is-revealed) .clients__bg-rays{
transform:rotate(8deg);
}
.clients__bg-index{
position:absolute;
right:-1rem; bottom:-3rem;
font-family:var(--font-display);
font-size:24rem;
line-height:1;
color:var(--color-line-soft);
user-select:none;
}
.clients__container{
position:relative;
z-index:1;
}
/* Шапка */
.clients__head{
max-width:46rem;
margin:0 0 3rem;
}
.clients__eyebrow{
margin:0 0 1.5rem;
display:inline-flex;
align-items:center;
gap:0.75rem;
max-width:100%;
color:var(--color-gold);
font-size:0.75rem; /* 12px */
letter-spacing:0.28em;
text-transform:uppercase;
font-weight:600;
}
.clients__eyebrow-mark{
flex:0 0 auto;
width:1.25rem; height:1.25rem; /* 20px */
color:var(--color-gold-2);
}
.clients__eyebrow-mark svg{ width:100%; height:100%; display:block; }
.clients__eyebrow-text{ white-space:nowrap; }
.clients__title{
margin:0 0 1.25rem;
font-family:var(--font-display);
font-weight:400;
color:var(--color-cream);
font-size:clamp(1.875rem, 3.2vw, 2.875rem); /* 30-46px */
line-height:1.12;
letter-spacing:-0.005em;
text-wrap:balance;
}
.clients__title-accent{ color:var(--color-gold); }
.clients__lead{
margin:0;
font-size:1rem;
line-height:1.6;
color:rgba(244, 237, 228, 0.74);
max-width:38rem;
}
/* Шар 2 — реєстр цифр довіри (count-up) */
.clients__ledger{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:0;
margin:0 0 3rem;
border-top:1px solid var(--color-line-strong);
border-bottom:1px solid var(--color-line);
}
.clients__stat{
position:relative;
padding:1.75rem 1.5rem 1.5rem;
border-right:1px solid var(--color-line);
}
.clients__stat:last-child{ border-right:0; }
.clients__stat::before{
content:"";
position:absolute;
top:-1px; left:0;
width:0; height:2px;
background:var(--color-gold);
transition:width 1.2s var(--ease);
}
.clients__stat.is-revealed::before{ width:2.5rem; } /* 40px */
.clients__stat-num{
display:flex;
align-items:baseline;
gap:0.125rem;
margin:0 0 0.625rem;
font-family:var(--font-display);
font-weight:400;
color:var(--color-cream);
font-size:clamp(2.25rem, 4vw, 3.25rem); /* 36-52px */
line-height:1;
letter-spacing:-0.01em;
font-variant-numeric:tabular-nums;
}
.clients__stat-plus{ color:var(--color-gold); }
.clients__stat-label{
margin:0;
font-size:0.875rem; /* 14px */
line-height:1.5;
color:var(--color-sage);
max-width:14rem;
}
/* Шар 3 — категорії довірителів як аркуш реєстру */
.clients__segments{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:0;
margin:0 0 3rem;
border-top:1px solid var(--color-line);
border-left:1px solid var(--color-line);
}
.clients__segment{
position:relative;
display:flex;
align-items:center;
gap:1rem;
padding:1.5rem 1.5rem;
border-right:1px solid var(--color-line);
border-bottom:1px solid var(--color-line);
overflow:hidden;
transition:background-color .4s var(--ease);
}
.clients__segment::after{
content:"";
position:absolute;
left:0; bottom:0;
width:100%; height:1px;
background:var(--color-gold);
transform:scaleX(0);
transform-origin:left;
transition:transform .5s var(--ease);
}
.clients__segment:hover{ background:rgba(186, 148, 45, 0.06); }
.clients__segment:hover::after{ transform:scaleX(1); }
.clients__segment-no{
flex:0 0 auto;
font-family:var(--font-display);
font-size:0.75rem; /* 12px */
color:var(--color-sage);
letter-spacing:0.04em;
transition:color .4s var(--ease);
}
.clients__segment:hover .clients__segment-no{ color:var(--color-gold-2); }
.clients__segment-mark{
flex:0 0 auto;
width:1.75rem; height:1.75rem; /* 28px */
color:var(--color-beige);
transition:color .4s var(--ease);
}
.clients__segment:hover .clients__segment-mark{ color:var(--color-gold-2); }
.clients__segment-mark svg{ width:100%; height:100%; display:block; }
.clients__segment-body{
display:flex;
flex-direction:column;
gap:0.25rem;
min-width:0;
}
.clients__segment-name{
color:rgba(244, 237, 228, 0.92);
font-size:0.875rem; /* 14px */
line-height:1.35;
letter-spacing:0.01em;
transition:color .4s var(--ease);
}
.clients__segment:hover .clients__segment-name{ color:var(--color-cream); }
.clients__segment-note{
color:var(--color-sage);
font-size:0.75rem; /* 12px */
line-height:1.3;
letter-spacing:0.02em;
}
/* Шар 4 — стрічка монограм-печаток (CSS marquee) */
.clients__wall{
position:relative;
margin:0 0 3rem;
padding:1.5rem 0 0.5rem;
border-top:1px solid var(--color-line);
border-bottom:1px solid var(--color-line);
}
.clients__wall-cap{
margin:0 0 1.25rem;
font-size:0.625rem; /* 10px */
letter-spacing:0.3em;
text-transform:uppercase;
color:var(--color-sage);
}
.clients__marquee{
display:flex;
width:max-content;
will-change:transform;
animation:clients-scroll 44s linear infinite;
-webkit-mask-image:linear-gradient(90deg,
transparent 0, #000 8%, #000 92%, transparent 100%);
mask-image:linear-gradient(90deg,
transparent 0, #000 8%, #000 92%, transparent 100%);
}
.clients__wall:hover .clients__marquee{ animation-play-state:paused; }
.clients__track{
display:flex;
flex:0 0 auto;
}
.clients__seal{
flex:0 0 auto;
display:flex;
align-items:center;
justify-content:center;
padding:0 1.75rem;
}
.clients__seal-svg{
width:5rem; /* 80px */
height:5rem;
color:var(--color-sage);
opacity:0.5;
transition:color .4s var(--ease),
opacity .4s var(--ease),
transform .4s var(--ease);
}
.clients__seal:hover .clients__seal-svg{
color:var(--color-gold-2);
opacity:1;
transform:scale(1.06);
}
.clients__seal-text{
fill:currentColor;
font-family:var(--font-display);
font-size:18px;
font-weight:400;
letter-spacing:1px;
}
@keyframes clients-scroll{
from{ transform:translateX(0); }
to{ transform:translateX(-50%); }
}
/* CTA */
.clients__cta{
display:flex;
flex-direction:column;
align-items:center;
gap:1.25rem;
text-align:center;
}
.clients__cta-note{
margin:0;
max-width:34rem;
font-size:0.875rem; /* 14px */
line-height:1.6;
color:var(--color-sage);
}
/* Адаптив */
@media (max-width:56.25rem){ /* 900px */
.clients{ padding:3rem 0; }
.clients__head{ margin-bottom:2rem; }
.clients__ledger{ grid-template-columns:repeat(2, 1fr); }
.clients__stat{ border-bottom:1px solid var(--color-line); }
.clients__stat:nth-child(2n){ border-right:0; }
.clients__stat:nth-last-child(-n+2){ border-bottom:0; }
.clients__segments{ grid-template-columns:1fr; }
.clients__bg-seal{ width:34rem; height:34rem; }
.clients__bg-index{ font-size:14rem; }
.clients__seal-svg{ width:4.25rem; height:4.25rem; } /* 68px */
.clients__seal{ padding:0 1.25rem; }
}
@media (prefers-reduced-motion:reduce){
/* Без авто-скролу: смугу можна гортати вручну. */
.clients__wall{ overflow-x:auto; }
.clients__marquee{
animation:none;
-webkit-mask-image:none;
mask-image:none;
}
.clients__bg-rays{ transition:none; }
.clients:has(.is-revealed) .clients__bg-rays{ transform:none; }
.clients__stat::before{ transition:none; }
.clients__segment,
.clients__segment::after,
.clients__segment-mark,
.clients__segment-no,
.clients__segment-name,
.clients__seal-svg{ transition:none; }
}
/* ============================================================
Site footer — v3 (колофон / фінальний акорд)
Концепт: монументальна темно-зелена основа у три шари —
1) фон: градієнт + custom-SVG «компас точності» (мотив
погляду наперед) + золота межа-волосина зверху;
2) кінетичний водяний знак «СІКОРА», що дрейфує при скролі;
3) контент: фінальний заклик (kinetic display), редакційна
сітка з анімованими підкресленнями, нижній рядок.
Палітра й типографіка — лише існуючі бренд-змінні.
============================================================ */
.site-footer{
position:relative;
isolation:isolate;
overflow:hidden; /* стримує водяний знак / компас на мобільному */
margin-top:6rem; /* 96px */
padding:4rem 0 2rem; /* 64 / 32 */
background:
radial-gradient(120% 90% at 82% 0%,
var(--color-green-3) 0%,
rgba(26, 48, 39, 0) 52%),
linear-gradient(180deg,
rgba(12, 24, 19, 0) 0%,
var(--color-green) 14%,
#0C1813 100%);
color:var(--color-beige);
border-top:1px solid var(--color-line);
}
/* Золота волосина-межа зверху */
.site-footer::before{
content:"";
position:absolute;
top:-1px; left:50%;
width:7rem; height:2px; /* 112 / 2 */
transform:translateX(-50%);
background:linear-gradient(90deg,
rgba(186, 148, 45, 0) 0%,
var(--color-gold) 28%,
var(--color-gold-2) 50%,
var(--color-gold) 72%,
rgba(186, 148, 45, 0) 100%);
z-index:2;
}
/* -------- Шар 1: фон + компас -------- */
.site-footer__backdrop{
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
overflow:hidden;
}
.site-footer__compass{
position:absolute;
top:2.5rem; right:-4rem; /* частково за краєм — surprise */
width:24rem; height:24rem; /* 384px */
color:var(--color-gold-2);
opacity:0.10;
}
.site-footer__compass-needle{
transform-box:fill-box;
transform-origin:center;
animation:footer-compass 26s linear infinite;
}
@keyframes footer-compass{
from{ transform:rotate(0deg); }
to{ transform:rotate(360deg); }
}
/* -------- Шар 2: кінетичний водяний знак -------- */
.site-footer__watermark{
position:absolute;
left:0; right:0; bottom:-1.5rem;
z-index:0;
pointer-events:none;
overflow:hidden;
line-height:0.78;
text-align:center;
}
.site-footer__watermark-word{
display:inline-block;
font-family:var(--font-display);
font-size:clamp(5rem, 22vw, 18rem);
letter-spacing:0.04em;
white-space:nowrap;
color:transparent;
-webkit-text-stroke:1px rgba(207, 191, 177, 0.10);
background:linear-gradient(180deg,
rgba(207, 191, 177, 0.08) 0%,
rgba(207, 191, 177, 0) 78%);
-webkit-background-clip:text;
background-clip:text;
transform:translate3d(0, 0, 0);
transition:transform 120ms linear;
will-change:transform;
}
.site-footer__container{ position:relative; z-index:1; }
/* -------- Шар 3.1: фінальний заклик -------- */
.site-footer__prologue{
padding-bottom:3rem; /* 48px */
border-bottom:1px solid var(--color-line);
}
.site-footer__eyebrow{
display:inline-flex;
align-items:center;
gap:0.75rem;
margin:0 0 1.5rem;
font-size:0.75rem; /* 12px */
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--color-sage);
}
.site-footer__eyebrow-mark{
display:inline-block;
width:2rem; height:1px;
background:var(--color-gold);
}
.site-footer__call{
margin:0;
font-family:var(--font-display);
font-weight:400;
font-size:clamp(2rem, 5.5vw, 4rem);
line-height:1.04;
letter-spacing:-0.01em;
color:var(--color-cream);
}
.site-footer__call-line{
display:block;
overflow:hidden;
}
/* Kinetic typography: рядки виїжджають знизу при reveal */
.site-footer__call-line > br{ display:none; }
.reveal .site-footer__call-line{
transform:translateY(110%);
transition:transform 800ms var(--ease);
}
.reveal.is-revealed .site-footer__call-line{ transform:translateY(0); }
.reveal.is-revealed .site-footer__call-line--accent{ transition-delay:120ms; }
.site-footer__call-line--accent{
font-style:italic;
color:var(--color-gold-2);
}
.site-footer__prologue-action{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:1.5rem 2rem;
margin-top:2rem; /* 32px */
}
.site-footer__call-note{
margin:0;
max-width:26rem;
font-size:1rem;
line-height:1.5;
color:var(--color-beige);
}
.site-footer__cta{ flex:0 0 auto; }
/* -------- Шар 3.2: основна сітка -------- */
.site-footer__grid{
display:grid;
grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr);
gap:3rem 2.5rem; /* 48 / 40 */
padding:3rem 0; /* 48px */
}
.site-footer__col{ min-width:0; }
.site-footer__heading{
margin:0 0 1.5rem;
font-family:var(--font-sans);
font-weight:600;
font-size:0.75rem; /* 12px */
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--color-gold);
}
/* Бренд-колонка */
.site-footer__logo{
display:inline-block;
transition:opacity 0.3s var(--ease);
}
.site-footer__logo:hover{ opacity:0.82; }
.site-footer__logo img{
width:13.75rem; /* 220px */
max-width:100%;
height:auto;
}
.site-footer__slogan{
margin:1.25rem 0 0;
max-width:24rem;
font-family:var(--font-display);
font-size:1.25rem; /* 20px */
line-height:1.4;
color:var(--color-cream);
}
/* Соцмережі — квадрати з золотим кутовим маркером */
.site-footer__social{
display:flex;
flex-wrap:wrap;
gap:0.75rem;
margin:2rem 0 0;
padding:0;
list-style:none;
}
.site-footer__social-link{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
width:2.75rem; height:2.75rem; /* 44px — touch target */
color:var(--color-beige);
border:1px solid var(--color-line);
overflow:hidden;
transition:color 0.4s var(--ease), border-color 0.4s var(--ease);
}
/* Золота заливка від кута (scale-in), без border-radius */
.site-footer__social-corner{
position:absolute;
inset:0;
background:var(--color-gold);
transform:scale(0);
transform-origin:bottom right;
transition:transform 0.4s var(--ease);
z-index:0;
}
.site-footer__social-icon{
position:relative;
z-index:1;
width:1.25rem; height:1.25rem; /* 20px */
display:block;
transition:transform 0.4s var(--ease);
}
.site-footer__social-link:hover{
color:var(--color-green);
border-color:var(--color-gold);
}
.site-footer__social-link:hover .site-footer__social-corner{ transform:scale(1); }
.site-footer__social-link:hover .site-footer__social-icon{ transform:translateY(-2px); }
/* Контакти — рядки-лінки з підкресленням значення */
.site-footer__contacts{
font-style:normal;
display:grid;
gap:1.25rem;
}
.site-footer__contact-item{
display:grid;
gap:0.25rem;
margin:0;
}
.site-footer__contact-label{
font-size:0.75rem; /* 12px */
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--color-sage);
}
.site-footer__contact-value{
position:relative;
display:inline;
font-size:1rem; /* 16px */
line-height:1.5;
color:var(--color-cream);
background-image:linear-gradient(var(--color-gold-2), var(--color-gold-2));
background-repeat:no-repeat;
background-position:0 100%;
background-size:0 1px;
transition:background-size 0.4s var(--ease), color 0.3s var(--ease);
}
.site-footer__contact-item:hover .site-footer__contact-value,
.site-footer__contact-item:focus-visible .site-footer__contact-value{
color:var(--color-gold-2);
background-size:100% 1px;
}
/* Графік прийому — leader-dots між днем і часом */
.site-footer__hours{
display:grid;
gap:0.75rem;
margin:0;
padding:0;
list-style:none;
}
.site-footer__hours-row{
display:flex;
align-items:baseline;
gap:0.5rem;
font-size:1rem; /* 16px */
color:var(--color-cream);
}
.site-footer__hours-day{ flex:0 0 auto; }
.site-footer__hours-dots{
flex:1 1 auto;
align-self:center;
height:1px;
min-width:1rem;
border-bottom:1px dotted var(--color-line-strong);
transform:translateY(2px);
}
.site-footer__hours-time{
flex:0 0 auto;
color:var(--color-beige);
text-align:right;
}
.site-footer__hours-row--muted{ color:var(--color-sage); }
.site-footer__hours-row--muted .site-footer__hours-time{ color:var(--color-sage); }
.site-footer__hours-note{
margin:1.25rem 0 0;
font-size:0.875rem; /* 14px */
line-height:1.5;
color:var(--color-sage);
}
/* Навігація — анімований underline + зсув тексту */
.site-footer__menu{
display:grid;
gap:0.75rem;
margin:0;
padding:0;
list-style:none;
}
.site-footer__link{
position:relative;
display:inline-flex;
align-items:center;
font-size:1rem; /* 16px */
color:var(--color-beige);
}
.site-footer__link-text{
position:relative;
display:inline-block;
transition:transform 0.35s var(--ease), color 0.3s var(--ease);
}
.site-footer__link-text::after{
content:"";
position:absolute;
left:0; bottom:-2px;
width:0; height:1px;
background:var(--color-gold);
transition:width 0.35s var(--ease);
}
.site-footer__link:hover .site-footer__link-text,
.site-footer__link:focus-visible .site-footer__link-text{
transform:translateX(0.625rem); /* 10px */
color:var(--color-cream);
}
.site-footer__link:hover .site-footer__link-text::after,
.site-footer__link:focus-visible .site-footer__link-text::after{ width:100%; }
/* -------- Нижній рядок -------- */
.site-footer__base{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:1rem 1.5rem;
padding-top:2rem; /* 32px */
border-top:1px solid var(--color-line);
}
.site-footer__copy{
margin:0;
font-size:0.875rem; /* 14px */
color:var(--color-sage);
}
.site-footer__legal{
display:flex;
flex-wrap:wrap;
gap:1.5rem;
margin:0;
padding:0;
list-style:none;
}
.site-footer__legal-link{
font-size:0.875rem; /* 14px */
color:var(--color-sage);
transition:color 0.3s var(--ease);
}
.site-footer__legal-link:hover{ color:var(--color-beige); }
/* Кнопка «нагору» — лейбл + квадратна іконка з рухом */
.site-footer__top{
display:inline-flex;
align-items:center;
gap:0.75rem;
font-size:0.75rem; /* 12px */
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--color-sage);
transition:color 0.3s var(--ease);
}
.site-footer__top-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:2.25rem; height:2.25rem; /* 36px */
color:var(--color-beige);
border:1px solid var(--color-line);
overflow:hidden;
transition:border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.site-footer__top-icon svg{
width:1.25rem; height:1.25rem;
transition:transform 0.4s var(--ease);
}
.site-footer__top:hover{ color:var(--color-gold-2); }
.site-footer__top:hover .site-footer__top-icon{ border-color:var(--color-gold); color:var(--color-gold-2); }
.site-footer__top:hover .site-footer__top-icon svg{ transform:translateY(-0.375rem); } /* 6px */
/* -------- Focus / motion -------- */
.site-footer a:focus-visible,
.site-footer .button:focus-visible{
outline:2px solid var(--color-gold-2);
outline-offset:3px;
}
/* -------- Адаптив -------- */
@media (max-width:1080px){
.site-footer__grid{
grid-template-columns:1fr 1fr;
gap:3rem 2.5rem;
}
.site-footer__col--brand{ grid-column:1 / -1; }
}
@media (max-width:900px){
.site-footer{ margin-top:4rem; padding-top:3rem; }
.site-footer__prologue-action{
flex-direction:column;
align-items:flex-start;
}
.site-footer__compass{ width:18rem; height:18rem; right:-5rem; }
}
@media (max-width:560px){
.site-footer{ padding-top:2.5rem; }
.site-footer__grid{
grid-template-columns:1fr;
gap:2.5rem;
padding:2.5rem 0;
}
.site-footer__logo img{ width:11.25rem; } /* 180px */
.site-footer__slogan{ font-size:1.125rem; } /* 18px */
.site-footer__compass{
width:14rem; height:14rem;
top:auto; bottom:6rem; right:-6rem;
}
.site-footer__base{
flex-direction:column;
align-items:flex-start;
gap:1rem;
}
.site-footer__legal{ gap:0.75rem 1.5rem; }
}
@media (prefers-reduced-motion:reduce){
.site-footer__compass-needle{ animation:none; }
.site-footer__watermark-word{ transition:none; transform:none !important; }
.reveal .site-footer__call-line{ transform:none; transition:none; }
.site-footer__logo,
.site-footer__social-link,
.site-footer__social-corner,
.site-footer__social-icon,
.site-footer__contact-value,
.site-footer__link-text,
.site-footer__link-text::after,
.site-footer__top,
.site-footer__top-icon,
.site-footer__top-icon svg,
.site-footer__legal-link{ transition:none; }
}
/* ============================================================
SCROLL-REVEAL — стримана cinematic-поява секцій
Елемент із класом .reveal стартує приглушеним і трохи нижче;
JS (IntersectionObserver) додає .is-revealed, коли елемент
входить у viewport. Лише transform/opacity — GPU-friendly.
Стаггер задається модифікаторами .reveal--dN на дочірніх
елементах (картки, рядки, колонки, лого).
============================================================ */
.reveal{
opacity:0;
transform:translateY(1.5rem); /* 24px */
transition:opacity 700ms var(--ease),
transform 700ms var(--ease);
will-change:opacity, transform;
}
.reveal.is-revealed{
opacity:1;
transform:none;
/* Знімаємо will-change після появи: інакше воно тримає containing
block і ламає position:sticky (напр. .faq__intro). */
will-change:auto;
}
/* Затримки стаггеру (кратні 80ms) — застосовуються до transition,
щоб елементи однієї групи з'являлися каскадом. */
.reveal--d1{ transition-delay:80ms; }
.reveal--d2{ transition-delay:160ms; }
.reveal--d3{ transition-delay:240ms; }
.reveal--d4{ transition-delay:320ms; }
.reveal--d5{ transition-delay:400ms; }
/* М'якший варіант появи — лише opacity, без зсуву (для широких
медіа-смуг, де translateY виглядав би заважко). */
.reveal--soft{
transform:none;
transition:opacity 900ms var(--ease);
}
/* ------------------------------------------------------------
Посилені мікровзаємодії (стримано, преміально) — лише там, де
hover/focus раніше був без руху. Усе на transform.
------------------------------------------------------------ */
/* Картки локації — ледь помітний підйом при наведенні */
.location__tile{
transition:transform 360ms var(--ease);
}
@media (hover:hover){
.location__tile:hover{ transform:translateY(-0.375rem); } /* -6px */
}
/* Рядки реєстру ціноутворення — кілька елементів рухаються разом */
@media (hover:hover){
.prices__row:hover{ padding-left:0.75rem; } /* 12px зсув запису */
.prices__row:hover .prices__row-num{ transform:translateY(-0.25rem); } /* -4px */
.prices__row:hover .prices__row-title{ color:var(--color-gold-2); }
.prices__row:hover .prices__row-node{
transform:rotate(45deg) scale(1.25);
background:var(--color-gold);
}
.prices__loyalty:hover{
border-color:rgba(186, 148, 45, 0.5);
background:
radial-gradient(ellipse 36% 130% at 0% 50%, rgba(186, 148, 45, 0.16) 0%, transparent 72%),
var(--color-line-soft);
}
.prices__loyalty:hover .prices__seal-rays{ opacity:0.9; }
}
.prices__row-num{
transition:transform 320ms var(--ease);
}
/* Сегменти клієнтів — маркер ледь масштабується при наведенні */
.clients__segment-mark{
transition:color .4s var(--ease), transform 300ms var(--ease);
}
@media (hover:hover){
.clients__segment:hover .clients__segment-mark{ transform:scale(1.1); }
}
/* Запевнення у контактах — мітка-знак ледь підіймається */
.contact__assurance-mark{
transition:transform 320ms var(--ease);
}
@media (hover:hover){
.contact__assurance:hover .contact__assurance-mark{ transform:translateY(-0.25rem); } /* -4px */
}
@media (prefers-reduced-motion:reduce){
/* Reveal-елементи одразу видимі — без появи й затримок. */
.reveal,
.reveal--soft{
opacity:1;
transform:none;
transition:none;
will-change:auto;
}
/* Посилені мікровзаємодії вимкнені. */
.location__tile,
.prices__row-num,
.clients__segment-mark,
.contact__assurance-mark{ transition:none; }
.location__tile:hover,
.prices__row:hover .prices__row-num,
.clients__segment:hover .clients__segment-mark,
.contact__assurance:hover .contact__assurance-mark{ transform:none; }
/* Блок «Ціни» — кінетика меридіана, печатки й підкреслень нейтралізована. */
.prices__meridian-fill{ transition:none; height:100%; }
.prices__row-node{
transition:none;
transform:rotate(45deg) scale(1);
opacity:1;
}
.prices__row-num::after{ transition:none; transform:scaleX(1); }
.prices__row{ transition:none; }
.prices__loyalty,
.prices__loyalty .prices__loyalty-mark svg,
.prices__seal-rays{ transition:none; }
.prices__loyalty .prices__loyalty-mark svg{ transform:none; }
}