/*
Theme Name: GTKHouse
Theme URI: https://gtkhouse.com
Description: Дочірня тема Astra для GTK House — гранітні вироби за стандартними та
індивідуальними розмірами. Уся дизайн-система реалізована власним CSS,
щоб сайт не залежав від чинної річної ліцензії Astra Pro.
Author: GTK House
Template: astra
Version: 0.5.0
Text Domain: gtkhouse
*/
/* ===========================================================================
ДИЗАЙН-СИСТЕМА GTK HOUSE
---------------------------------------------------------------------------
Єдине джерело правди для кольору, шрифту, відступів, кнопок, карток і форм.
Усі наступні сторінки сайту використовують ці ж змінні — нічого не задаємо
кольором або розміром «на місці». Якщо потрібен новий відтінок чи розмір —
він додається сюди, а не в конкретний блок.
=========================================================================== */
:root {
/* --- Колір -----------------------------------------------------------
Палітра з макета: тепле піщане тло, чорнило, бронза як штрих.
Кольору на сторінці рівно стільки, скільки дає камінь на фотографії;
інтерфейс навколо нього мовчить. */
--gtk-bronze: #A87444; /* бронза: контури, лінії, декор */
--gtk-ink: #2B2B2B; /* чорнило: заголовки, темні секції */
--gtk-text: #5A5A5A; /* основний текст */
--gtk-cream: #F2E6D9; /* секція-акцент, світлий текст на темному */
--gtk-sand: #FFFFFF; /* тло всієї сторінки */
--gtk-mat-dark: #3A3634; /* «паспарту» на темних секціях */
--gtk-white: #FFFFFF;
/*
* «Паспарту» стало темнішим за тло, а не світлішим.
*
* Поки сторінка була піщаною, рамка кольору паперу #FCF7EF читалася бо
* була світлішою за фон. На білому тлі світліше за фон не буває: рамка
* зникла б цілком, і фотографія лишилася б голою в порожнечі. Тому
* напрямок контрасту перевернуто — рамка тепер легкий теплий сірий, і
* кадр знову виглядає вклеєним у сторінку.
*/
--gtk-paper: #EFECE8; /* «паспарту» навколо фото на світлому */
/*
* Бронза текстом — темніша за бронзу лінією, і це не помилка.
*
* #A87444 на піщаному тлі дає 3.7:1. Для рамки й лінії цього досить
* (нетекстовим елементам потрібно 3:1), а для кікера 12.5px — ні:
* дрібний текст вимагає 4.5:1. Тому в системі два бронзові токени:
* світліший малює контури, темніший — літери. Відтінок той самий.
*/
--gtk-bronze-text: #8A5D36; /* бронза для тексту: кікери, лінки */
/*
* Третій відтінок — для тексту на чорнилі.
*
* На світлому тлі бронзу треба темнити, на темному — навпаки. #A87444 на
* #2B2B2B дає 3.54:1, а дрібним літерам потрібно 4.5:1; світліший тон дає
* 5.55:1. Це стосується підписів у підвалі, кікерів у темних секціях і
* зірочки обов’язкового поля — усе це текст 10–11px.
*/
--gtk-bronze-on-ink: #C79A63;
--gtk-line: rgba(43, 43, 43, 0.14); /* тонкі лінії */
--gtk-line-strong: rgba(43, 43, 43, 0.2); /* лінії списків */
--gtk-line-inv: rgba(242, 230, 217, 0.18);
--gtk-text-inv: rgba(242, 230, 217, 0.72);
/*
* Текст на фотографії, а не на суцільному чорнилі.
*
* Кремовий #F2E6D9 побудований під рівне темне тло і там працює. На
* затемненій фотографії його теплий рожевий підтон збігається з рижавим
* кольором цеху, і літери перестають відділятись від фону. #EFEAE3 на півтону
* холодніший — це й тримає його поверх знімка.
*
* Бронза тут ще світліша за --gtk-bronze-on-ink: під нею не гарантоване
* чисте #2B2B2B, а затемнене фото, яке місцями світліше.
*
* Із тієї самої причини --gtk-on-dark-mid майже суцільний, а не .78,
* як --gtk-text-inv на рівному чорнилі. Напівпрозорий текст підмішує
* до себе те, що під ним: над світлою плямою фото він сам світлішає
* разом із фоном, і різниця між ними не росте, а падає. На цьому
* знімку .78 давало 2.6:1 там, де суцільний колір давав 3.3:1.
*/
--gtk-on-dark: #EFEAE3;
--gtk-on-dark-mid: rgba(239, 234, 227, 0.92);
--gtk-line-dark: rgba(239, 234, 227, 0.22);
--gtk-bronze-soft: #C9A57C;
/*
* Аліаси попередньої системи.
*
* На ці імена посилаються product.css, page.css, home.css і editor.css.
* Перейменувати їх скрізь означало б переписати чотири файли заради
* косметики; натомість старі імена вказують на нові значення, і вся
* тема перефарбовується з одного місця.
*/
--gtk-brand: var(--gtk-bronze-text);
--gtk-brand-dark: #6F4926;
--gtk-heading: var(--gtk-ink);
--gtk-heading-soft: var(--gtk-ink);
--gtk-bg-warm: var(--gtk-cream);
--gtk-bg-warm-soft: var(--gtk-sand);
--gtk-milk: var(--gtk-sand);
--gtk-bone: var(--gtk-cream);
--gtk-border: var(--gtk-line);
--gtk-decor: var(--gtk-line-strong);
--gtk-brand-tint: rgba(168, 116, 68, 0.12);
/*
* Службовий сірий — суцільний колір, а не прозоре чорнило.
*
* rgba(43,43,43,0.55) на білому давало 3.45:1. Ним набрані заголовки
* фільтрів, кількість результатів і підписи одиниць — тобто саме той
* текст, який читають побіжно й дрібним кеглем. Для дрібного тексту
* потрібно 4.5:1; #707070 дає 4.95:1.
*
* Прозорість замінена суцільним кольором свідомо: під напівпрозорим
* сірим контраст залежав би від того, що саме опинилося ззаду.
*/
--gtk-text-muted: #707070;
--gtk-overlay: rgba(43, 43, 43, 0.55);
/* --- Типографіка -----------------------------------------------------
Дві серифні гарнітури й жодного гротеску на сторінці. Cormorant
Garamond тримає заголовки, цифри й кнопки; Lora — весь читабельний
текст. Шкала на clamp(), тому окремих медіазапитів під розміри
більше немає: заголовок росте плавно від телефона до монітора. */
--gtk-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--gtk-font-body: 'Lora', Georgia, 'Times New Roman', serif;
--gtk-font: var(--gtk-font-body); /* аліас для старих правил */
--gtk-h1: clamp(46px, 7.6vw, 100px);
--gtk-h2: clamp(34px, 4.4vw, 64px);
--gtk-h3: clamp(21px, 1.9vw, 26px);
/*
* Основний кегль виріс із 16 до 18px.
*
* Lora — серифна гарнітура з невеликим очком: на тому самому числі вона
* читається дрібнішою за звичний гротеск. Шістнадцять пікселів, які
* виглядали нормально в Manrope, у Lora змушують придивлятися. Дрібні
* підписи підняті пропорційно.
*/
--gtk-body: 18px;
--gtk-small: 15px;
--gtk-lh-h1: 1.04;
--gtk-lh-h2: 1.1;
--gtk-lh-h3: 1.28;
--gtk-lh-body: 1.7;
--gtk-lh-small: 1.6;
--gtk-weight-display: 500;
--gtk-track-display: -0.015em;
--gtk-track-kicker: 0.22em;
--gtk-track-eyebrow: var(--gtk-track-kicker); /* аліас */
/* --- Сітка ---------------------------------------------------------- */
--gtk-maxw: 1560px;
--gtk-gutter: clamp(20px, 4.6vw, 72px);
/*
* Відступ згори й знизу секції — один на весь сайт.
*
* Зменшували двічі. Спершу було clamp(88px, 11vw, 160px): на широкому
* моніторі це давало між сусідніми секціями триста двадцять пікселів.
* Потім clamp(64px, 7vw, 104px) — двісті. Обидва рази здавалося, що
* досить, і обидва рази на живій сторінці пауза читалася не як пауза, а
* як «блок не завантажився»: на 1440 між останнім рядком вступу й
* заголовком «Портфоліо» лишалося рівно 202 порожні пікселі.
*
* Тепер множник vw утричі менший за початковий: розрив між секціями —
* близько ста тридцяти пікселів на моніторі й вісімдесяти на телефоні.
* Головне тут не саме число, а те, що воно одне: головна, внутрішні
* сторінки й посадкові дихають однаково.
*/
--gtk-section-gap: clamp(40px, 4.4vw, 72px);
/* Стара назва: на неї посилаються home.css, page.css і product.css. */
--gtk-section-y: var(--gtk-section-gap);
/*
* Від заголовка секції до її вмісту.
*
* Було clamp(44px, 6vw, 88px) — майже стільки ж, скільки між самими
* секціями, і заголовок повисав однаково далеко від свого вмісту й від
* чужого. Тепер він явно ближчий до того, що пояснює.
*/
--gtk-head-gap: clamp(24px, 2.6vw, 40px);
--gtk-col-gap: clamp(16px, 2.4vw, 40px);
/*
* Висота шапки.
*
* Шапка липка, тож секція «на весь екран» мусить віднімати її висоту:
* інакше нижні 77 пікселів такої секції завжди залишаються під згином.
* На посадковій туди потрапляли підпис під заголовком і кнопка
* прокрутки — тобто саме те, заради чого низ першого екрана й існує.
*
* Значення живе змінною, а не переписаним числом у кожному місці: рядок
* шапки колись стане вищим, і розкладка не має розходитися з розміткою.
*/
--gtk-header-h: 77px;
/* --- Форма -----------------------------------------------------------
Кути нульові всюди, тіней немає: глибину дають фотографії й лінії. */
--gtk-radius-card: 0;
--gtk-radius-img: 0;
--gtk-radius-btn: 0;
--gtk-radius-input: 0;
--gtk-btn-h: 54px;
--gtk-btn-px: 34px;
/* Змінні тіней лишені, щоб вимикати їх в одному рядку, а не в двадцяти. */
--gtk-shadow-sm: none;
--gtk-shadow-md: none;
/* Повільна крива з макета: рух має читатися як гортання альбому. */
--gtk-ease: cubic-bezier(0.22, 1, 0.36, 1);
/*
* Дві тривалості на весь сайт, а не десяток.
*
* --gtk-transition — реакція на дію: наведення, фокус, зміна кольору.
* Тут важлива миттєвість: усе, що довше за двісті мілісекунд, читається
* як затримка інтерфейсу, а не як плавність.
*
* --gtk-motion — поява декору: секції, картки, зсув фотографії. Тут
* навпаки потрібен помітний, але короткий рух.
*
* Було: 350 на реакції, 450 на кнопках, 500 і 1000 на появі, 1.6 секунди
* на зумі фото. Разом це читалося як різні швидкості на одній сторінці.
*/
--gtk-transition: 180ms var(--gtk-ease);
--gtk-motion: 320ms var(--gtk-ease);
/* --- Прокидання в Astra ---------------------------------------------
Astra малює шапку, підвал і WooCommerce своїми змінними. Замість
боротьби через !important підміняємо самі змінні — тоді батьківська
тема сама малює в нашій палітрі. */
--ast-global-color-0: var(--gtk-brand);
--ast-global-color-1: var(--gtk-brand-dark);
--ast-global-color-2: var(--gtk-heading);
--ast-global-color-3: var(--gtk-text);
/*
* Четвертий колір Astra — це тло сторінки.
*
* Astra друкує інлайновим стилем правило
* `.ast-plain-container, .ast-page-builder-template { background: var(--ast-global-color-4) }`,
* і воно б'є наш `body { background: … }` вищою специфічністю класу.
* Замість того щоб перебивати його своїм селектором, підміняємо саме
* значення: тоді Astra власним правилом малює молочний фон.
*/
--ast-global-color-4: var(--gtk-sand);
--ast-global-color-5: var(--gtk-cream);
--ast-global-color-6: var(--gtk-line);
--ast-global-color-7: var(--gtk-ink);
--ast-global-color-8: var(--gtk-bronze);
--ast-border-color: var(--gtk-line);
--ast-comment-inputs-background: var(--gtk-white);
}
/* На телефоні базовий кегль на пункт менший: Lora при 16px у вузькій
колонці дає задовгий рядок, і абзац із justify починає «рвати» слова. */
@media (max-width: 600px) {
:root { --gtk-body: 17px; }
}
/* ===========================================================================
БАЗА
=========================================================================== */
html { scroll-behavior: smooth; }
body,
button,
input,
select,
optgroup,
textarea,
.ast-container,
.site-title,
.site-description {
font-family: var(--gtk-font);
}
body {
font-size: var(--gtk-body);
line-height: var(--gtk-lh-body);
font-weight: 400;
color: var(--gtk-text);
/* Молочне тло, а не біле: біле під теплою палітрою читається як папір
для друку, молочне — як тиньк у інтер'єрі. */
background: var(--gtk-milk);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* Жодна секція не має права породжувати горизонтальний скрол. */
overflow-x: hidden;
}
/* ===========================================================================
ТИПОГРАФІКА
Один H1 на сторінку, H2 — назви секцій, H3 — назви карток.
=========================================================================== */
h1, h2, h3, h4, h5, h6,
.gtk-h1, .gtk-h2, .gtk-h3,
.gtk-serif,
.entry-title,
.woocommerce-products-header__title {
font-family: var(--gtk-font-display);
color: var(--gtk-ink);
margin: 0 0 0.5em;
font-weight: var(--gtk-weight-display);
letter-spacing: var(--gtk-track-display);
/* Українські заголовки довгі — переноси мають бути акуратні. */
text-wrap: balance;
overflow-wrap: break-word;
}
h1, .gtk-h1, .entry-title {
font-size: var(--gtk-h1);
line-height: var(--gtk-lh-h1);
}
h2, .gtk-h2,
.woocommerce-products-header__title {
font-size: var(--gtk-h2);
line-height: var(--gtk-lh-h2);
}
h3, .gtk-h3 {
font-size: var(--gtk-h3);
line-height: var(--gtk-lh-h3);
font-weight: 600;
}
h4 { font-size: calc(var(--gtk-h3) - 2px); font-weight: 600; line-height: 1.35; }
/*
* Виділений фрагмент заголовка — кольором, не нахилом.
*
* У макеті це був курсив: «Основні вироби», «Камінь
* українських родовищ». Прийом розбивав фразу на два регістри, але
* замовникові нахилений шрифт не подобається, і це його сайт. Тому слово
* лишається виділеним, а виділяє його бронза — інтонація зберігається, нахил
* зникає.
*
* font-style: normal тут обов'язковий, а не про всяк випадок: нахилений
* за замовчуванням у самому браузері.
*/
em, i,
h1 em, h2 em, h3 em,
h1 i, h2 i, h3 i,
.gtk-h1 em, .gtk-h2 em, .gtk-h3 em {
font-style: normal;
font-weight: inherit;
}
/* У заголовку виділене слово ще й бронзове — там воно несе інтонацію. У
звичайному тексті досить того, що нахил зник. */
h1 em, h2 em, h3 em,
h1 i, h2 i, h3 i,
.gtk-h1 em, .gtk-h2 em, .gtk-h3 em {
color: var(--gtk-bronze-text);
}
/* На світлому курсив підсвічуємо бронзою, на темному — теплішим тоном:
на чорнильному тлі темна бронза просто зникає. */
.gtk-section--ink h2 em,
.gtk-section--ink h2 i { color: #C79A63; }
/*
* Довгі абзаци вирівнюються за обома краями.
*
* Це прийом книжкової верстки, і саме він дає сторінці відчуття розвороту
* альбому. Працює тільки разом із hyphens: auto й атрибутом lang="uk" на
* — без переносів justify роздирає рядки величезними пробілами.
* Короткі підписи цим класом не позначаємо: на двох рядках вирівнювання
* шкодить більше, ніж допомагає.
*/
.gtk-just {
text-align: justify;
hyphens: auto;
}
@media (max-width: 600px) {
/* У вузькій колонці навіть із переносами justify лишає діри. */
.gtk-just { text-align: left; }
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
/* Довгий текст читається краще у вужчій колонці. */
.gtk-lead {
font-size: calc(var(--gtk-body) + 2px);
line-height: 1.55;
color: var(--gtk-text);
max-width: 62ch;
}
.gtk-small,
small {
font-size: var(--gtk-small);
line-height: var(--gtk-lh-small);
}
.gtk-muted { color: var(--gtk-text-muted); }
a {
color: var(--gtk-ink);
text-decoration: none;
transition: color var(--gtk-transition), opacity var(--gtk-transition);
}
a:hover,
a:focus { color: var(--gtk-brand); }
/*
* Кікер — надпис над заголовком секції, з наскрізним номером: «01 — Про нас».
*
* Нумерація 01–08 робить сторінку схожою на зміст альбому: відвідувач бачить,
* що розділів скінченна кількість, і розуміє, де він зараз. tnum вирівнює
* цифри по ширині, щоб «01» і «08» не стрибали відносно тире.
*/
.gtk-eyebrow,
.gtk-kicker {
display: block;
font-family: var(--gtk-font-body);
font-size: 12.5px;
font-weight: 500;
letter-spacing: var(--gtk-track-kicker);
text-transform: uppercase;
color: var(--gtk-bronze-text);
font-feature-settings: 'tnum';
margin-bottom: 16px;
}
/* ===========================================================================
СІТКА ТА СЕКЦІЇ
=========================================================================== */
.gtk-container,
.ast-container,
.site-content .ast-container {
width: 100%;
max-width: calc(var(--gtk-maxw) + var(--gtk-gutter) * 2);
margin-inline: auto;
padding-inline: var(--gtk-gutter);
}
/* Вужчий варіант для суцільного тексту та форм. */
.gtk-container--narrow {
max-width: calc(860px + var(--gtk-gutter) * 2);
}
.gtk-section {
padding-block: var(--gtk-section-y);
}
.gtk-section--tight { padding-block: calc(var(--gtk-section-y) * 0.62); }
/*
* Фони секцій.
*
* Тонів три, і кожен має свою роль: піщаний — полотно сторінки, кремовий
* виділяє одну секцію (проєкти), чорнильний — дві темні (виробництво й
* прорахунок). Світлі секції розділяє не зміна фону, а тонка лінія по низу:
* так у книжці розділяють розділи.
*/
.gtk-section--warm { background: var(--gtk-cream); }
.gtk-section--soft { background: var(--gtk-sand); }
.gtk-section--white { background: var(--gtk-sand); }
.gtk-section--cream { background: var(--gtk-cream); }
/* Лінія по низу світлої секції замість зміни фону. */
.gtk-section--hairline { border-bottom: 1px solid var(--gtk-line); }
/* Темні секції: виробництво з відео та прорахунок вартості. */
.gtk-section--ink {
position: relative;
overflow: hidden;
background: var(--gtk-ink);
color: var(--gtk-text-inv);
}
.gtk-section--ink h1,
.gtk-section--ink h2,
.gtk-section--ink h3 { color: var(--gtk-cream); }
.gtk-section--ink .gtk-eyebrow,
.gtk-section--ink .gtk-kicker { color: var(--gtk-bronze-on-ink); }
/*
* Примарна цифра розділу.
*
* Величезний номер у куті темної секції ледь проступає з фону. Це не
* декорація заради декорації: він тримає нумерацію розділів там, де кікер
* на темному вже не має ваги, і задає масштаб, від якого секція здається
* більшою за екран.
*/
.gtk-ghost-num {
position: absolute;
top: clamp(24px, 4vw, 64px);
right: var(--gtk-gutter);
z-index: 0;
font-family: var(--gtk-font-display);
font-size: clamp(120px, 17vw, 240px);
line-height: 1;
color: rgba(168, 116, 68, 0.13);
font-feature-settings: 'tnum';
user-select: none;
pointer-events: none;
}
.gtk-section--ink > .gtk-container { position: relative; z-index: 1; }
/* Шапка секції: кікер + H2 ліворуч, пояснювальний абзац праворуч. */
.gtk-section__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 28px;
flex-wrap: wrap;
margin-bottom: var(--gtk-head-gap);
}
.gtk-section__head > div { max-width: 40ch; }
.gtk-section__head h2 { margin: 0; max-width: 16ch; }
/*
* Тільки прямий нащадок.
*
* Кікер лежить усередині лівої колонки, поруч із заголовком, а пояснювальний
* абзац — прямо в шапці. Селектор без «>» чіпляв обидва й перефарбовував
* бронзовий кікер у сірий: два класи проти одного, специфічність вирішила
* не на нашу користь.
*/
.gtk-section__head > p,
.gtk-section__head > .gtk-side {
max-width: 360px;
padding-bottom: 8px;
margin-bottom: 0;
color: var(--gtk-text);
}
.gtk-section--ink .gtk-section__head > p { color: var(--gtk-text-inv); }
.gtk-section__head--center {
flex-direction: column;
align-items: center;
text-align: center;
}
.gtk-section__head--center h2 { max-width: 20ch; }
/* Шапка з посиланням праворуч — той самий флекс, інший правий елемент. */
.gtk-section__bar {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 28px;
margin-bottom: var(--gtk-head-gap);
}
.gtk-section__bar > div { max-width: 40ch; }
.gtk-section__bar h2 { margin: 0; max-width: 16ch; }
.gtk-section__bar p { max-width: 360px; margin-bottom: 0; }
@media (max-width: 600px) {
.gtk-section__head,
.gtk-section__bar {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
}
/*
* Дванадцятиколонкова сітка.
*
* Асиметрія в макеті будується саме на ній: плитки каталогу займають
* різні діапазони колонок і зсуваються по вертикалі. Автосітка з
* minmax() такого не вміє — вона робить усі колонки рівними.
*/
.gtk-grid12 {
display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: var(--gtk-col-gap);
}
/* Універсальна автосітка лишається для каталогу товарів і схожих сторінок,
де рівні колонки — саме те, що потрібно. */
.gtk-grid {
display: grid;
gap: clamp(28px, 3.2vw, 56px);
grid-template-columns: repeat(auto-fill, minmax(var(--gtk-col, 260px), 1fr));
}
.gtk-grid--2 { --gtk-col: 420px; }
.gtk-grid--3 { --gtk-col: 320px; }
.gtk-grid--4 { --gtk-col: 250px; }
/* ===========================================================================
КНОПКИ
=========================================================================== */
/*
* Кнопки лише контурні — жодної заливки.
*
* Суцільний прямокутник кольору притягує око сильніше за фотографію поруч,
* і сторінка одразу починає читатися як магазин. Контур робить те саме
* навігаційно, але лишає головним героєм камінь. На наведенні з'являється
* не суцільний фон, а ледь помітна тонована заливка — рівно стільки, щоб
* відчути реакцію.
*
* Набірна кнопка — Cormorant 600 у капітель: серифні великі літери з
* широким трекінгом виглядають як напис на титулі, а не як елемент форми.
*/
.gtk-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: var(--gtk-btn-h);
padding: 15px var(--gtk-btn-px);
border: 1px solid var(--gtk-bronze);
border-radius: var(--gtk-radius-btn);
font-family: var(--gtk-font-display);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
background: transparent;
color: var(--gtk-bronze-text);
transition: background-color var(--gtk-transition), border-color var(--gtk-transition), color var(--gtk-transition);
}
/*
* Кнопка не ширша за колонку, у якій стоїть.
*
* Напис усередині може бути будь-якої довжини — «Розрахувати за розмірами»,
* «Рассчитать по размерам», — а inline-flex рахує ширину за вмістом і про
* батька не питає. Один рядок тут рятує від вильоту скрізь, де кнопка
* потрапляє у вузьку колонку.
*/
.gtk-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wp-block-button__link { max-width: 100%; }
.gtk-btn:hover,
.gtk-btn:focus,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wp-block-button__link:hover {
background: var(--gtk-brand-tint);
border-color: var(--gtk-bronze);
color: var(--gtk-brand-dark);
}
/* Кремова — для темних секцій і фотографій. */
.gtk-btn--cream,
.gtk-btn--onlight {
border-color: rgba(242, 230, 217, 0.75);
color: var(--gtk-cream);
background: transparent;
}
.gtk-btn--cream:hover,
.gtk-btn--cream:focus,
.gtk-btn--onlight:hover,
.gtk-btn--onlight:focus {
background: rgba(242, 230, 217, 0.14);
border-color: rgba(242, 230, 217, 0.9);
color: var(--gtk-white);
}
/* Чорнильна — для кремової секції, де бронза на бежевому втрачає силу. */
.gtk-btn--ink,
.gtk-btn--secondary {
border-color: var(--gtk-ink);
color: var(--gtk-ink);
background: transparent;
}
.gtk-btn--ink:hover,
.gtk-btn--ink:focus,
.gtk-btn--secondary:hover,
.gtk-btn--secondary:focus {
background: rgba(43, 43, 43, 0.08);
border-color: var(--gtk-ink);
color: var(--gtk-ink);
}
.gtk-btn--sm {
min-height: 0;
padding: 11px 22px;
font-size: 12.5px;
}
/*
* Кнопка без рамки — друга дія там, де дії рівноправні.
*
* Кегль, капітель і розрядка ті самі, що в сусідньої кнопки: дві дії одного
* розміру читаються як вибір із двох, а не як кнопка з приміткою. Різницю
* показує рамка, і тільки вона. Підкреслення з'являється під наведенням —
* інакше елемент без жодної межі не схожий на те, що можна натиснути.
*/
.gtk-btn--bare {
border-color: transparent;
background: transparent;
padding-inline: 0;
text-decoration-thickness: 1px;
text-underline-offset: 6px;
}
.gtk-btn--bare:hover,
.gtk-btn--bare:focus-visible {
background: transparent;
border-color: transparent;
text-decoration: underline;
}
.gtk-btn--block { width: 100%; }
/*
* Лінк-стрілка: мікролейбл і лінія, що росте.
*
* Основний спосіб вести далі там, де кнопка була б надто гучною. Лінія
* 44px із засічкою-стрілкою на кінці витягується до 64px на наведенні —
* рух, якого досить, щоб елемент прочитався як інтерактивний, і замало,
* щоб він відволікав під час читання.
*/
.gtk-link-arrow {
position: relative;
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--gtk-font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gtk-ink);
white-space: nowrap;
padding: 0;
border-bottom: 0;
transition: color var(--gtk-transition);
}
/* Сама лінія. Вона остання в рядку, тому її правий край збігається з правим
краєм посилання — на цьому й тримається позиція вістря нижче. */
.gtk-link-arrow::after {
content: '';
display: inline-block;
width: 44px;
height: 1px;
background: currentColor;
transition: width var(--gtk-transition);
}
/* Вістря — квадрат із двома бордюрами, повернутий на 45°. Без SVG і без
зайвого елемента в розмітці. */
.gtk-link-arrow::before {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 8px;
height: 8px;
margin-top: -4px;
border-top: 1px solid currentColor;
border-right: 1px solid currentColor;
transform: rotate(45deg) scale(0.8);
transform-origin: center;
pointer-events: none;
}
.gtk-link-arrow:hover { color: var(--gtk-bronze-text); }
.gtk-link-arrow:hover::after { width: 64px; }
/* На темному й на фото — кремовий варіант. */
.gtk-link-arrow--inv { color: var(--gtk-cream); }
.gtk-link-arrow--inv:hover { color: var(--gtk-bronze); }
/* Стрілку в розмітці лишили як SVG у частині блоків — ховаємо її, щоб не
дублювати ту, яку малює псевдоелемент. */
.gtk-link-arrow svg { display: none; }
/* ===========================================================================
ФОТО
---------------------------------------------------------------------------
Рамок навколо знімків немає. Спершу кожне фото сиділо в «паспарту» —
рамці кольору паперу з тонкою зовнішньою лінією, як репродукція в альбомі.
Прийом гарний сам собою, але він робив однакову оправу всьому: і кадру
з об'єкта, і фактурі каменю, і кресленню. Сторінка починала виглядати як
стенд із однаковими рамками, а не як добірка знімків.
Лишився тільки теплий фільтр — він не обрамлює, а зводить знімки з різних
джерел до одного тону.
=========================================================================== */
.gtk-plate {
position: relative;
overflow: hidden;
background: none;
border: 0;
outline: 0;
}
/*
* Знімаємо заглушку розміру від WordPress.
*
* Починаючи з 6.7 ядро додає відкладеним зображенням `sizes="auto"` і разом
* із ним друкує в правило:
*
* img:is([sizes="auto" i], [sizes^="auto," i]) {
* contain: size; contain-intrinsic-size: 3000px 1500px;
* }
*
* Задум добрий — зарезервувати місце до завантаження й не смикати розкладку.
* Але `contain: size` означає «не дивитися на вміст узагалі»: браузер
* перестає бачити справжні пропорції знімка й малює його в коробці 3000×1500.
* Поки кожне фото сиділо в комірці з жорстким співвідношенням, цього не було
* видно. Щойно висота пішла за самим кадром — усі знімки стали однакової
* висоти в 1500px і обрізалися по центру.
*
* Зсув розкладки від цього не повернеться: WordPress і далі пише в тег
* width і height, а з них браузер сам виводить співвідношення.
*/
.gtk-plate img {
contain: none;
contain-intrinsic-size: auto;
}
.gtk-plate img,
.gtk-plate video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/*
* Фотографії показуються такими, як зняті.
*
* Тут була легка сепія — вона зводила до одного тону знімки з цеху, з
* об'єкта й на білому тлі. Замовник побачив у ній жовтизну на камені, і
* це важливіше за спільний тон: колір граніту — те, за чим його
* вибирають, і підфарбовувати його не можна. Різнобій світла тепер
* вирівнюємо не фільтром, а самими знімками.
*/
transition: transform var(--gtk-motion);
}
/*
* Фото цілком, а не його частина.
*
* object-fit: cover обрізає все, що не влізло в задане співвідношення, — і
* на вертикальному знімку в горизонтальній комірці зникає половина кадру.
* Там, де форма комірки задана сіткою, вписуємо знімок повністю: на білому
* тлі поля з боків не видно, а виріб видно весь.
*/
.gtk-plate--fit img {
object-fit: contain;
background: var(--gtk-white);
}
/*
* Природні пропорції: висота йде за самим знімком, нічого не обрізається.
*
* Селектор навмисно з двома класами, а `height` з !important — і те, й те
* тут не косметика. Базове правило дає знімкові `height: 100%`, і в
* колонковій кладці ці сто відсотків рахуються не від картки, а від висоти
* самої колонки: вона там визначена. Через це всі фото ставали однакової
* висоти в півтори тисячі пікселів і обрізалися по центру — рівно те, чого
* ми позбувалися. Перебиваємо явно, разом з object-fit: без нього браузер
* і далі кадрував би зображення в отриману коробку.
*/
.gtk-plate.gtk-plate--auto {
height: auto !important;
aspect-ratio: auto !important;
}
/*
* Пропорцію самого знімка не чіпаємо.
*
* Раніше тут теж стояло aspect-ratio: auto !important — і воно стирало те
* співвідношення, яке браузер виводить з атрибутів width/height. Поки файл
* не завантажений, іншого джерела розмірів у нього немає: картинка сідала
* в нуль висоти, не потрапляла в поле зору спостерігача і не вантажилася
* взагалі. Тепер пропорцію дописує PHP окремим стилем — див.
* gtkhouse_block_plate().
*/
.gtk-plate.gtk-plate--auto img {
height: auto !important;
}
.gtk-plate.gtk-plate--auto img {
object-fit: fill;
max-width: 100%;
}
a:hover .gtk-plate img,
.gtk-hoverable:hover .gtk-plate img { transform: scale(1.04); }
/* Група кнопок. На вузьких екранах головні дії йдуть на всю ширину —
палець не має цілитися в короткий прямокутник. */
.gtk-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
@media (max-width: 575px) {
.gtk-actions { flex-direction: column; }
.gtk-actions > .gtk-btn { width: 100%; }
}
/* ===========================================================================
КАРТКИ
=========================================================================== */
/*
* Картка без картки.
*
* Була рамка, тінь, білий прямокутник і заокруглення — чотири способи сказати
* «це віджет». У референсів картки товару немає взагалі: є фотографія, під нею
* назва й ціна, і все. Межі малює сітка й повітря між колонками, а не лінія.
*/
.gtk-card {
position: relative;
display: flex;
flex-direction: column;
background: none;
border: 0;
border-radius: 0;
transition: none;
}
.gtk-card:hover {
border-color: transparent;
box-shadow: none;
}
/*
* Медіа картки каталогу.
*
* Рамки немає, але комірка лишається одного розміру: у сітці з двадцяти
* чотирьох товарів рвана висота перетворює каталог на звалище. Форму задає
* співвідношення 4:3, а знімок кропиться під нього.
*
* Кроп тут свідомий, а не вимушений. Вихідні фото мають двадцять одне різне
* співвідношення сторін; без нього плитка стрибала б на кожному рядку й
* псувала CLS. Раніше над цим правилом стояло ще одне, з object-fit: contain
* і обіцянкою, що «жоден виріб не обрізаний», — воно нічого не робило, бо
* наступний же блок перебивав його на cover. Прибрано разом з обіцянкою.
*/
.gtk-card__media {
position: relative;
display: block;
overflow: hidden;
background: var(--gtk-white);
border: 0;
outline: 0;
}
.gtk-card__media img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
background: var(--gtk-white);
transition: transform 400ms ease;
}
.gtk-card:hover .gtk-card__media img { transform: scale(1.035); }
.gtk-card__body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
gap: 8px;
padding: 20px 0 0;
}
/*
* Назви товарів у вивантаженні бувають дуже довгі — трапляються описи на
* сім рядків. Без обмеження одна така картка витягує весь ряд і сітка
* розсипається. Три рядки вистачає, щоб зрозуміти виріб; повна назва є
* на сторінці товару й лишається в розмітці для пошукових систем.
*/
.gtk-card__title {
font-family: var(--gtk-font-display);
font-size: clamp(20px, 1.7vw, 24px);
font-weight: 600;
line-height: 1.28;
letter-spacing: var(--gtk-track-display);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gtk-card__title a { color: var(--gtk-heading); }
.gtk-card__title a:hover { color: var(--gtk-brand); }
.gtk-card__meta {
font-family: var(--gtk-font-body);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gtk-brand-dark);
margin: 0;
}
/*
* Ціна й кнопка стоять у рядок, доки цей рядок вміщається.
*
* Раніше стояли завжди: flex без wrap. У товарів без ціни замість суми йде
* кнопка «Розрахувати за розмірами» — сама по собі ширша за 260px, — і
* рядок «ціна + кнопка» не лишав їй місця. Кнопка вилазила за картку, за
* контейнер і за екран: 28 сторінок каталогу, категорій і товарів давали
* горизонтальну прокрутку до 37px на 360, 390, 1024 і 1280.
*
* Саме на 1280 це видно найкраще: сітка там на чотири колонки, і колонка
* вужча, ніж на планшеті. Ширина екрана тут ні до чого — важлива ширина
* колонки, тож і ліки мають бути в компоненті, а не в медіазапиті.
*
* Перенос нічого не змінює там, де рядок і так вміщався: wrap спрацьовує
* лише тоді, коли інакше був би виліт.
*/
.gtk-card__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 10px;
}
/*
* Там, де замість суми стоїть речення, відступ над ним зайвий.
*
* Десять пікселів відділяють число від характеристик: ціна набрана окремим
* накресленням і має триматися осібно. «Розрахунок за вашими розмірами» —
* той самий основний текст, що й рядок розміру над ним, і та сама відбивка
* читається як порожній рядок посеред картки.
*/
.gtk-card__foot:has(.gtk-price--on-request) { padding-top: 0; }
/* Ні ціна, ні кнопка не мають права розсунути картку ширше за себе. */
.gtk-card__foot > * { min-width: 0; max-width: 100%; }
/* Уся картка клікабельна, але посилання лишається справжнім —
так працює середня кнопка миші, «відкрити в новій вкладці» й скрінрідери. */
.gtk-card__link::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
}
.gtk-card__foot > * { position: relative; z-index: 2; }
/* --- Картка категорії ----------------------------------------------------
Підпис переїхав з-під градієнта вниз, під фотографію.
Темна плашка поверх каменю з'їдала якраз ту частину знімка, заради якої його
й роблять, а сама категорія читалася як банер. Тепер фотографія лишається
недоторканою, а назва стоїть під нею окремим рядком — так подають категорії
Boffi та Vipp. Кадр видовжений: вертикальний прямокутник тримає композицію
краще за 4:3, надто коли поруч стоять три такі блоки. */
.gtk-cat-card {
position: relative;
display: flex;
flex-direction: column;
border-radius: 0;
background: none;
color: var(--gtk-ink);
/* Кадрує наближення фотографії. Обгортки навколо ![]()
в розмітці немає,
тож межу кадру тримає сама картка. */
overflow: hidden;
}
.gtk-cat-card img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
background: var(--gtk-bone);
transition: transform 600ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.gtk-cat-card:hover img { transform: scale(1.035); }
.gtk-cat-card__body {
position: static;
padding: 18px 0 0;
color: inherit;
display: flex;
flex-direction: column;
gap: 4px;
}
.gtk-cat-card__body h3 {
color: var(--gtk-ink);
margin: 0;
font-size: calc(var(--gtk-body) + 2px);
font-weight: 500;
transition: color var(--gtk-transition);
}
.gtk-cat-card:hover .gtk-cat-card__body h3 { color: var(--gtk-brand); }
.gtk-cat-card__count {
font-size: 11px;
font-weight: 500;
letter-spacing: var(--gtk-track-eyebrow);
text-transform: uppercase;
color: var(--gtk-text-muted);
}
/* ===========================================================================
ЦІНА
У каталозі є позиції за штуку, за кв.м і за пог.м. Без явної одиниці
покупець читає ціну як «за виріб», а на дзвінку виявляється інше —
це найдорожча помилка довіри, яку може зробити каталог.
=========================================================================== */
.gtk-price,
.woocommerce .price {
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
gap: 5px;
font-size: calc(var(--gtk-body) + 1px);
font-weight: 500;
color: var(--gtk-ink);
}
/*
* Текст лише для читалки екрана.
*
* Свій клас, а не .screen-reader-text: той малює видимим Astra, і підпис
* діапазону цін виходив другим рядком під самою ціною.
*/
.gtk-sr {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.gtk-price__value { font-weight: 500; }
.gtk-price__unit {
font-size: var(--gtk-small);
font-weight: 400;
color: var(--gtk-text-muted);
}
.gtk-price--on-request {
font-size: var(--gtk-small);
font-weight: 500;
color: var(--gtk-text-muted);
line-height: 1.35;
}
/* Позначка «від» для товарів із вибором товщини. */
.gtk-price-from {
font-size: var(--gtk-small);
font-weight: 400;
color: var(--gtk-text-muted);
}
/* ===========================================================================
ФОРМИ
=========================================================================== */
.gtk-field { display: flex; flex-direction: column; gap: 6px; }
.gtk-label,
.gtk-form label {
font-size: 11px;
font-weight: 500;
letter-spacing: var(--gtk-track-eyebrow);
text-transform: uppercase;
color: var(--gtk-text-muted);
}
.gtk-label__req { color: var(--gtk-brand); }
/* Зірочка на чорнилі: та сама причина, що й у кікерів вище. */
.gtk-section--ink .gtk-label__req,
.gtk-form--compact .gtk-label__req { color: var(--gtk-bronze-on-ink); }
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
select,
textarea {
width: 100%;
min-height: var(--gtk-btn-h);
padding: 14px 16px;
font-family: var(--gtk-font);
font-size: 16px; /* нижче 16px iOS Safari зумить сторінку при фокусі */
line-height: 1.4;
color: var(--gtk-heading);
background: var(--gtk-white);
border: 1px solid var(--gtk-border);
border-radius: var(--gtk-radius-input);
transition: border-color var(--gtk-transition), box-shadow var(--gtk-transition);
appearance: none;
}
textarea {
min-height: 128px;
padding-block: 14px;
resize: vertical;
}
input::placeholder,
textarea::placeholder { color: var(--gtk-text-muted); opacity: 1; }
/* Фокус — суцільна чорнильна межа без світіння. Кольорове коло навколо поля
було останнім місцем, де інтерфейс перебивав фотографію. */
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--gtk-ink);
box-shadow: none;
}
select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235A5A5A' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 42px;
}
.gtk-hint {
font-size: 13px;
line-height: 1.45;
color: var(--gtk-text-muted);
}
/*
* min() у minmax обов'язковий. Без нього колонка не може стати вужчою за
* 220px навіть на екрані 320px, і форма починає вилазити за межі сторінки.
*/
.gtk-form__row {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
/*
* Елементи сітки та флексу за замовчуванням мають min-width: auto й не
* стискаються вужче за свій вміст. Один нестискуваний нащадок — і вся
* сторінка отримує горизонтальний скрол. Дозволяємо стискатися явно.
*/
.gtk-form__row > *,
.gtk-field,
.gtk-grid > * {
min-width: 0;
}
/* Приманка для ботів. Ховаємо від очей, але не через display:none —
частина спам-скриптів такі поля пропускає. */
.gtk-hp {
position: absolute !important;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* ===========================================================================
ЕЛЕМЕНТИ, ЩО ПОВТОРЮЮТЬСЯ
=========================================================================== */
/* Плашка-теґ: родовище, обробка, статус. Пігулка стала прямокутником із
хайрлайном — та сама інформація, на порядок менше галасу. */
.gtk-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.3;
color: var(--gtk-text);
background: transparent;
border: 1px solid var(--gtk-border);
border-radius: 0;
transition: border-color var(--gtk-transition), color var(--gtk-transition);
}
a.gtk-chip:hover {
background: transparent;
border-color: var(--gtk-ink);
color: var(--gtk-ink);
}
.gtk-chip--brand {
background: var(--gtk-ink);
border-color: var(--gtk-ink);
color: var(--gtk-white);
}
/*
* Іконка переваги чи кроку.
*
* Був бежевий квадрат 52×52 із заокругленням — тобто ще один прямокутник на
* сторінці, де їх і так вистачає. Лишилася сама іконка: тонка, чорнильна,
* без підкладки. Розмір поля збережено, щоб сітка не поїхала.
*/
.gtk-icon-badge {
display: inline-flex;
align-items: center;
justify-content: flex-start;
flex: 0 0 auto;
width: 28px;
height: 28px;
border-radius: 0;
background: none;
color: var(--gtk-ink);
}
.gtk-icon-badge svg { width: 24px; height: 24px; stroke-width: 1.1; }
.gtk-section--warm .gtk-icon-badge,
.gtk-section--soft .gtk-icon-badge { background: none; }
.gtk-divider {
height: 1px;
border: 0;
background: var(--gtk-border);
margin: 0;
}
/* Телефон. Колтрекінг підмінює п'ять номерів через JS, тому кожен номер
на сайті виводиться одним хелпером з однаковою розміткою — інакше
скрипт замінить не всі входження. */
.gtk-phone { white-space: nowrap; unicode-bidi: plaintext; }
/* ===========================================================================
ДОСТУПНІСТЬ
=========================================================================== */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--gtk-ink);
outline-offset: 3px;
border-radius: 0;
}
.gtk-skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 9999;
padding: 14px 20px;
background: var(--gtk-ink);
color: var(--gtk-white);
border-radius: 0;
}
.gtk-skip-link:focus {
left: 0;
color: var(--gtk-white);
}
/* ===========================================================================
АНІМАЦІЯ
Лише м'яка поява. Жодного паралаксу та різких рухів — вони заважають
читати й псують INP на слабких телефонах.
=========================================================================== */
/*
* Усе, що чекає на появу, ховає клас .gtk-js на .
*
* Клас ставить однорядковий скрипт у (gtkhouse_js_flag,
* inc/contact-fab.php). Поки його не було, прихований стан висів на самому
* лише [data-reveal], і з вимкненим JavaScript сайт приходив порожнім:
* показати секції нікому, а стартова прозорість — нуль. На головній так
* зникав 21 блок із 22, на лендінгу плитки — усі 13, у каталозі — усі 11.
*
* Показувати їх скриптом «на всяк випадок» — не те саме. Клас із
* стоїть на місці ще до того, як браузер почне малювати , тож
* сторінка без JavaScript ніколи не буває прихованою навіть на кадр.
*/
@media (prefers-reduced-motion: no-preference) {
.gtk-js .gtk-reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity var(--gtk-motion), transform var(--gtk-motion);
}
.gtk-js .gtk-reveal.is-visible {
opacity: 1;
transform: none;
}
/*
* Поява секцій із трохи більшим зсувом, ніж у старої .gtk-reveal.
*
* Затримка береться зі змінної --d прямо в розмітці: так сусідні картки
* з'являються сходинкою, і для цього не потрібен ані клас на кожну, ані
* рядок JavaScript.
*/
.gtk-js [data-reveal] {
opacity: 0;
transform: translateY(28px);
transition: opacity var(--gtk-motion), transform var(--gtk-motion);
transition-delay: var(--d, 0s);
}
.gtk-js [data-reveal].is-in {
opacity: 1;
transform: none;
}
/* Фото «в'їжджає» в паспарту: стартує трохи більшим і сідає на місце
разом із появою самої картки. Без класу знімок одразу на місці —
інакше він лишився б збільшеним назавжди. */
.gtk-js [data-reveal] .gtk-plate img { transform: scale(1.06); }
.gtk-js [data-reveal].is-in .gtk-plate img { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
/*
* Стандартне глушіння анімацій — але не поголовне.
*
* Виняток [data-gtk-motion] свідомий. Стрічка робіт і плавні наведення
* на фото — не декорація: замовник просив саме такої поведінки, а без
* руху карусель перетворюється на статичний ряд, де сорок робіт просто
* не видно. Решта — появи, паралакс, дрібні переходи — вимикається, як
* і має.
*/
*:not([data-gtk-motion]):not([data-gtk-motion] *),
*:not([data-gtk-motion]):not([data-gtk-motion] *)::before,
*:not([data-gtk-motion]):not([data-gtk-motion] *)::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* Без цього блоки, що чекають на появу, лишилися б невидимими назавжди:
спостерігач їх покаже, але анімації вимкнені, а стартовий стан — нуль. */
[data-reveal] { opacity: 1; transform: none; }
[data-reveal] .gtk-plate img { transform: none; }
}
/* ===========================================================================
УЗГОДЖЕННЯ З ASTRA ТА WOOCOMMERCE
Батьківська тема має власні відступи й рамки. Тут ми не перебиваємо її
силою, а лише вирівнюємо те, що інакше вибивається з системи.
=========================================================================== */
/* margin-bottom тут більше немає: доки картка мала внутрішні поля, відступ під
фотографією був потрібен. Тепер підпис відбиває власний padding-top, а зайві
12px лишали під кожним знімком смужку фону — на сітці з 24 товарів це читалося
як обрізане зображення. */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--gtk-radius-img);
/*
* Біле, а не кремове.
*
* Фото товарів зняті на білому тлі, і кремова підкладка просвічувала
* по краях кадру й під час завантаження — картка читалася як брудна.
* Цей селектор WooCommerce сильніший за .gtk-card__media img, тож біле
* тло з картки до самого знімка не доходило.
*/
background: var(--gtk-white);
margin-bottom: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: calc(var(--gtk-body) + 1px);
font-weight: 500;
color: var(--gtk-ink);
line-height: 1.35;
}
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
background: var(--gtk-ink);
color: var(--gtk-white);
border-radius: 0;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
min-height: 0;
min-width: 0;
padding: 6px 12px;
line-height: 1.3;
}
/* Порожній стан каталогу не має виглядати як помилка сайту. */
.woocommerce-info,
.woocommerce-message {
border-top-color: var(--gtk-ink);
background: var(--gtk-bone);
border-radius: 0;
}
.woocommerce-info::before,
.woocommerce-message::before { color: var(--gtk-ink); }
/* ===========================================================================
ВЕРХНІЙ КОНТАКТНИЙ РЯДОК
Клієнт каже, що більшість заявок приходить телефоном. Тому номер стоїть
найвище на сторінці й видимий одразу, без прокручування.
=========================================================================== */
/*
* Верхнього контактного рядка в макеті немає.
*
* Його роль забрала сама шапка: телефон стоїть у ній праворуч, за пунктами
* меню. Дві смуги одна над одною з'їдали 46px першого екрана заради
* інформації, яка й так є рядком вище.
*
* Розмітку рядка лишили в темі — вона може знадобитися під акційний банер, —
* але за замовчуванням він схований. Достатньо зняти display:none.
*/
.gtk-topbar { display: none; }
.gtk-topbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 46px;
padding-block: 8px;
}
.gtk-topbar__note,
.gtk-topbar__hours {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0;
}
.gtk-topbar svg { flex: 0 0 auto; opacity: 0.7; }
.gtk-topbar__side {
display: flex;
align-items: center;
gap: 20px;
margin-left: auto;
}
.gtk-topbar__link,
.gtk-topbar__phone {
color: var(--gtk-ink);
font-weight: 500;
letter-spacing: 0.04em;
}
.gtk-topbar__link:hover,
.gtk-topbar__phone:hover { color: var(--gtk-brand); }
.gtk-lang { display: inline-flex; gap: 10px; }
.gtk-lang__item {
padding: 0;
border-radius: 0;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
color: var(--gtk-text-muted);
}
.gtk-lang__item:hover { color: var(--gtk-ink); }
.gtk-lang__item.is-active {
background: none;
color: var(--gtk-ink);
text-decoration: underline;
text-underline-offset: 4px;
}
/* На вузьких екранах у рядку лишається тільки те, що справді потрібне:
телефон і мова. Розташування виробництва повторюється в підвалі. */
@media (max-width: 991px) {
.gtk-topbar__note,
.gtk-topbar__hours { display: none; }
.gtk-topbar__inner { justify-content: flex-end; }
}
/* ===========================================================================
ШАПКА
---------------------------------------------------------------------------
Шапку тепер малює тема, а не конструктор Astra.
Astra Pro зібрала б схожу налаштуваннями, але саме цього ми уникаємо:
ліцензія річна, а двоколірний логотип, підкреслення, що виростає під
пунктом меню, і повноекранне меню на чорнильному тлі мають пережити її
завершення. Розмітку віддає inc/site-chrome.php.
=========================================================================== */
.gtk-header {
position: sticky;
top: 0;
z-index: 60;
background: var(--gtk-sand);
border-bottom: 1px solid var(--gtk-line);
}
.gtk-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
/* Разом із рискою знизу рядок дає --gtk-header-h — рівно стільки
віднімають від себе секції на весь екран. */
height: calc(var(--gtk-header-h) - 1px);
}
/* Логотип: «GTK» чорнилом, «House» бронзою. Нахил у знято навмисно —
тег узятий заради семантики виділення, а не заради курсиву. */
.gtk-logo {
font-family: var(--gtk-font-display);
font-weight: 600;
font-size: 25px;
letter-spacing: 0.04em;
color: var(--gtk-ink);
white-space: nowrap;
z-index: 75;
}
.gtk-logo em {
font-style: normal;
color: var(--gtk-bronze-text);
}
.gtk-nav {
display: flex;
align-items: center;
gap: clamp(16px, 2.3vw, 34px);
}
.gtk-nav a {
position: relative;
font-size: 12.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gtk-text);
padding: 6px 0;
transition: color var(--gtk-transition);
}
/* Підкреслення виростає зліва направо — той самий жест, що й у лінк-стрілки. */
.gtk-nav a::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 0;
background: var(--gtk-bronze);
transition: width 400ms var(--gtk-ease);
}
.gtk-nav a:hover { color: var(--gtk-ink); }
.gtk-nav a:hover::after,
.gtk-nav .current-menu-item > a::after,
.gtk-nav .current_page_item > a::after { width: 100%; }
/* ---------------------------------------------------------------------------
Перелік розділів під «Каталогом»
---------------------------------------------------------------------------
Дев'ять розділів у стовпчик дали б колонку майже на пів екрана. У два
стовпчики перелік читається одним поглядом і не тягне око вниз.
Розкривається наведенням і фокусом з клавіатури. Тільки наведення тут не
годиться: з клавіатури до пунктів було б не дістатися взагалі, а на
сенсорі жест «навести» відсутній — там лишається сам пункт «Каталог»,
який веде на сторінку з тими самими розділами плитками.
--------------------------------------------------------------------------- */
.gtk-nav__group {
position: relative;
display: inline-flex;
align-items: center;
}
.gtk-nav__panel {
position: absolute;
top: 100%;
left: 50%;
z-index: 70;
/* Смуга над панеллю ловить курсор на шляху від пункта меню до списку:
без неї список закривався, щойно миша йшла через проміжок. */
padding-top: 26px;
transform: translateX(-50%) translateY(6px);
opacity: 0;
visibility: hidden;
transition: opacity 0.22s var(--gtk-ease), transform 0.22s var(--gtk-ease), visibility 0.22s;
}
.gtk-nav__group:hover .gtk-nav__panel,
.gtk-nav__group:focus-within .gtk-nav__panel {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.gtk-nav__panel-inner {
display: block;
width: max-content;
max-width: min(92vw, 620px);
padding: 26px 30px 22px;
background: var(--gtk-sand);
border: 1px solid var(--gtk-line);
box-shadow: 0 24px 60px rgba(43, 43, 43, 0.1);
}
.gtk-nav__panel-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 40px;
}
/*
* Селектор із .gtk-nav a — не зайва вага.
*
* Пункти основного меню задані як `.gtk-nav a`: великі літери, розріджений
* трекінг, 12.5px. У панелі це список назв, а не навігація, і без рівної
* ваги селектора «Плитка гранітна» виводилася як «ПЛИТКА ГРАНІТНА».
*/
.gtk-nav a.gtk-nav__panel-item {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
/* Рядок нижчий за 44px, але це список у випадній панелі, а не основна
навігація: пальцем сюди не потрапляють — панель відкривається лише
наведенням або з клавіатури. */
padding: 9px 0;
font-family: var(--gtk-font-body);
font-size: 14.5px;
letter-spacing: 0;
text-transform: none;
color: var(--gtk-text);
border-bottom: 1px solid var(--gtk-line);
}
/* Підкреслення з ::after тут зайве: у панелі є справжні лінії між рядками. */
.gtk-nav a.gtk-nav__panel-item::after { content: none; }
.gtk-nav a.gtk-nav__panel-item:hover,
.gtk-nav a.gtk-nav__panel-item:focus-visible { color: var(--gtk-bronze-text); }
.gtk-nav__panel-count {
flex: none;
font-size: 12px;
color: var(--gtk-text-muted);
font-feature-settings: 'tnum';
}
.gtk-nav a.gtk-nav__panel-all {
display: inline-block;
margin-top: 18px;
font-size: 10px;
letter-spacing: 0.26em;
color: var(--gtk-bronze-text);
}
.gtk-nav a.gtk-nav__panel-all::after {
content: '';
display: block;
width: 0;
height: 1px;
margin-top: 4px;
background: var(--gtk-bronze);
transition: width 400ms var(--gtk-ease);
position: static;
}
.gtk-nav a.gtk-nav__panel-all:hover::after { width: 100%; }
@media (max-width: 1024px) {
.gtk-nav__panel { display: none; }
}
/*
* Права частина шапки: телефон, перемикач мов, бургер.
*
* Телефон і мова показуються на десктопі, бургер — на вузькому екрані, тож
* блок ніколи не буває порожнім, але й ніколи не тримає все одразу. Він же
* урівноважує логотип ліворуч: без нього меню притискалося б до правого
* краю й рядок ставав несиметричним.
*/
.gtk-header__right {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 22px;
min-width: 44px;
}
.gtk-header__phone {
/* Номер ніде на сайті не дрібніший за 16px: по ньому дзвонять. */
font-size: 16px;
letter-spacing: 0.05em;
color: var(--gtk-ink);
white-space: nowrap;
transition: color var(--gtk-transition);
}
.gtk-header__phone:hover { color: var(--gtk-bronze-text); }
/* --- Перехід у калькулятор із каталогу -------------------------------
Без рамок і тла: це додатковий шлях, а не друга кнопка поруч
із «У кошик». Стиль той самий, що в калькуляторі. */
.gtk-calc-link { margin-top: 18px; }
.gtk-calc-link__note {
margin: 0 0 6px;
font-family: "Lora", Georgia, serif;
font-size: 13px;
line-height: 1.6;
color: var(--gtk-text-muted);
}
.gtk-calc-link__a {
display: inline-block;
font-family: "Lora", Georgia, serif;
font-size: 14px;
line-height: 1.5;
color: var(--gtk-ink);
border-bottom: 1px solid var(--gtk-ink);
text-decoration: none;
transition: color var(--gtk-transition), border-color var(--gtk-transition);
}
.gtk-calc-link__a:hover,
.gtk-calc-link__a:focus-visible {
color: var(--gtk-bronze-text);
border-color: var(--gtk-bronze-text);
}
/* Товар без ціни: калькулятор тут головна дія, тож це кнопка. */
.gtk-calc-link__btn {
display: inline-block;
padding: 19px 30px;
font: 500 12px/1 "Lora", Georgia, serif;
letter-spacing: 0.24em;
text-transform: uppercase;
text-decoration: none;
border: 1px solid var(--gtk-ink);
background: var(--gtk-ink);
color: var(--gtk-cream);
transition: background var(--gtk-transition), border-color var(--gtk-transition), color var(--gtk-transition);
}
.gtk-calc-link__btn:hover,
.gtk-calc-link__btn:focus-visible {
background: var(--gtk-bronze);
border-color: var(--gtk-bronze);
color: var(--gtk-white);
}
/* У картці каталогу посилання дрібніше й без підкреслення: там
головне — назва й ціна, а це третій рядок за вагою. */
.gtk-calc-link--loop { margin-top: 10px; }
.gtk-calc-link--loop .gtk-calc-link__a {
font-size: 12px;
letter-spacing: 0.04em;
color: var(--gtk-text-muted);
border-bottom-color: transparent;
}
.gtk-calc-link--loop .gtk-calc-link__a:hover,
.gtk-calc-link--loop .gtk-calc-link__a:focus-visible {
color: var(--gtk-bronze-text);
border-bottom-color: var(--gtk-bronze-text);
}
.gtk-calc-link--inline { margin: 22px 0; }
@media (max-width: 767px) {
.gtk-calc-link__btn { display: block; text-align: center; }
}
/* Підказка під полем міста в калькуляторі доставки: пояснює, чому тут
немає суми, а не лишає людину гадати. */
.gtk-ship-note {
margin: -6px 0 14px;
font-size: 13px;
line-height: 1.6;
color: var(--gtk-text-muted);
}
/* --- Кошик у шапці -------------------------------------------------------
З'являється лише коли в кошику щось є: порожній стан ховається атрибутом
hidden просто в розмітці, тож жодного стрибка верстки при завантаженні
немає. Лічильник — бронзовий кружечок, бо це стан, а не заклик до дії:
він має бути помітним, але не сперечатися з кнопками. */
.gtk-cart {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
/* Без flex:0 0 auto кошик стискається сусідами по шапці до ширини самої
іконки, і на телефоні в нього стає важко влучити пальцем. */
flex: 0 0 auto;
width: 44px;
height: 44px;
margin-right: -10px;
color: var(--gtk-ink);
transition: color var(--gtk-transition);
}
.gtk-cart[hidden] { display: none; }
.gtk-cart:hover,
.gtk-cart:focus-visible { color: var(--gtk-bronze-text); }
.gtk-cart:focus-visible {
outline: 2px solid var(--gtk-bronze-text);
outline-offset: 2px;
}
.gtk-cart__count {
position: absolute;
top: 4px;
right: 2px;
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: 9px;
background: var(--gtk-bronze);
color: var(--gtk-white);
font-size: 11px;
font-weight: 600;
line-height: 17px;
text-align: center;
font-variant-numeric: tabular-nums;
}
/* У мобільному меню кошик стає звичайним рядком із підписом: іконка сама
по собі там загубилася б серед великих пунктів. */
.gtk-cart--mobile {
width: auto;
height: auto;
margin: 26px 0 0;
gap: 10px;
justify-content: flex-start;
font-size: 17px;
letter-spacing: 0.04em;
}
.gtk-cart--mobile .gtk-cart__count {
position: static;
margin-left: 2px;
}
.gtk-cart--mobile .screen-reader-text {
position: static !important;
width: auto !important;
height: auto !important;
clip: auto !important;
clip-path: none !important;
white-space: normal !important;
}
/* --- Бургер і повноекранне меню ----------------------------------------- */
.gtk-burger {
display: none;
position: relative;
z-index: 75;
width: 44px;
height: 44px;
background: none;
border: 0;
cursor: pointer;
}
.gtk-burger span {
position: absolute;
left: 10px;
right: 10px;
height: 2px;
background: var(--gtk-ink);
transition: all var(--gtk-transition);
}
.gtk-burger span:nth-child(1) { top: 16px; }
.gtk-burger span:nth-child(2) { top: 23px; }
.gtk-burger span:nth-child(3) { top: 30px; }
.gtk-menu-open .gtk-burger span { background: var(--gtk-cream); }
.gtk-menu-open .gtk-burger span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.gtk-menu-open .gtk-burger span:nth-child(2) { opacity: 0; }
.gtk-menu-open .gtk-burger span:nth-child(3) { top: 23px; transform: rotate(-45deg); }
.gtk-mobile-menu {
position: fixed;
inset: 0;
z-index: 70;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 var(--gtk-gutter);
background: var(--gtk-ink);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--gtk-motion), visibility 320ms;
}
.gtk-menu-open .gtk-mobile-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.gtk-mobile-menu a {
font-family: var(--gtk-font-display);
font-size: clamp(30px, 7vw, 44px);
color: var(--gtk-cream);
padding: 10px 0;
border-bottom: 1px solid var(--gtk-line-inv);
opacity: 0;
transform: translateY(22px);
transition: opacity 600ms var(--gtk-ease), transform 600ms var(--gtk-ease), color var(--gtk-transition);
}
.gtk-mobile-menu a:hover { color: var(--gtk-bronze); }
.gtk-menu-open .gtk-mobile-menu a { opacity: 1; transform: none; }
.gtk-mobile-menu__contact {
margin-top: 34px;
font-size: 14px;
letter-spacing: 0.06em;
color: var(--gtk-text-inv);
opacity: 0;
transition: opacity 600ms 350ms ease;
}
.gtk-mobile-menu__contact a { color: var(--gtk-cream); }
/* Пошта й телефон у вузькій шухляді переносяться, а не ріжуться. */
.gtk-mobile-menu__contact { min-width: 0; overflow-wrap: anywhere; }
.gtk-menu-open .gtk-mobile-menu__contact { opacity: 1; }
.gtk-menu-open { overflow: hidden; }
/*
* Хрестик закриття.
*
* Дві смужки під кутом замість символу ×: гліф у Cormorant вузький і на
* темному тлі читається як розділовий знак, а не як кнопка.
*
* Ціль 44×44 — рівно стільки, скільки всюди на сайті. Сам хрестик у ній
* удвічі менший: росте зона, а не малюнок.
*/
.gtk-mobile-menu__close {
position: absolute;
top: max(12px, env(safe-area-inset-top, 0px));
right: calc(var(--gtk-gutter) - 10px);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: transparent;
color: var(--gtk-cream);
cursor: pointer;
opacity: 0;
transition: opacity 400ms 200ms ease, color var(--gtk-transition);
}
.gtk-menu-open .gtk-mobile-menu__close { opacity: 1; }
.gtk-mobile-menu__close:hover,
.gtk-mobile-menu__close:focus-visible { color: var(--gtk-bronze); }
.gtk-mobile-menu__close span {
position: absolute;
width: 22px;
height: 1px;
background: currentColor;
}
.gtk-mobile-menu__close span:first-child { transform: rotate(45deg); }
.gtk-mobile-menu__close span:last-child { transform: rotate(-45deg); }
/*
* Поки шухляда відкрита, плаваючих кнопок немає.
*
* Меню перекриває всю сторінку, а кругла кнопка зв'язку й смуга дзвінка
* лежать вище за z-index і лишалися висіти поверх нього: на телефоні це
* читалося як три різні меню одночасно.
*/
.gtk-menu-open .gtk-fab { display: none; }
@media (max-width: 1160px) {
.gtk-nav,
.gtk-header__right .gtk-header__phone,
.gtk-header__right .gtk-btn { display: none; }
.gtk-burger { display: block; }
}
/* Шапку Astra ховаємо повністю: свою ми вже намалювали. Прибираємо саме
обгортки, а не окремі елементи — інакше плагіни, що доважують у шапку
свої кнопки, лишили б їх висіти в порожнечі. */
.ast-primary-header-wrap,
.ast-above-header-wrap,
.ast-below-header-wrap,
.site-header .main-header-bar-wrap { display: none; }
/* ===========================================================================
ПІДВАЛ
=========================================================================== */
.gtk-footer {
background: var(--gtk-ink);
color: var(--gtk-text-inv);
border-top: 1px solid var(--gtk-line-inv);
padding-block: clamp(52px, 6.5vw, 84px) 0;
font-size: var(--gtk-small);
}
.gtk-footer__grid {
display: grid;
gap: 48px clamp(32px, 5vw, 72px);
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
padding-bottom: clamp(48px, 6vw, 80px);
}
/*
* Колонка з описом більше не наполягає на своїй ширині.
*
* Тут стояло min-width: 240px — щоб абзац під назвою не перетворився на
* стовпчик по два слова. Але min-width на елементі сітки не змушує доріжку
* розсунутися: доріжку рахує auto-fit за minmax(190px, 1fr), а елемент
* просто вилазить за неї. У діапазоні 480–768px доріжка виходила 192–231px,
* колонка лишалася 240px — і опис заповзав на сусідній «Каталог»: на 480
* колонки перекривалися на 7px, на 700 — на 16px, а текст видимо обрізався.
*
* Діапазон випав з перевірок не випадково: аудит ходив по 430 і 768, а між
* ними якраз і живе цей стан. Тепер проміжні ширини в списку.
*
* Ширину віддаємо сітці, а читабельність абзацу тримає max-width: 42ch
* у .gtk-footer__about — це обмеження зверху, воно доріжку не ламає.
*/
.gtk-footer__col--about { grid-column: span 1; min-width: 0; }
/* Довга адреса пошти не розсуває колонку. */
.gtk-footer__col { min-width: 0; overflow-wrap: anywhere; }
/*
* До 560px — один стовпчик.
*
* Дві колонки по 200px дають рядки в три слова: читати такий підвал
* незручно навіть тоді, коли нічого не перекривається.
*/
@media (max-width: 560px) {
.gtk-footer__grid { grid-template-columns: minmax(0, 1fr); }
}
/*
* Від 561 до 991 px — дві колонки, текст над ними на всю ширину.
*
* Колонок лишилося три, і auto-fit розкладав би їх на цих ширинах у ряд
* по 190 px: назви розділів ламалися б на два рядки, а опис майстерні
* стискався в стовпчик по два слова. Опису потрібна вся ширина, а двом
* коротким спискам вистачає половини кожному.
*/
@media (min-width: 561px) and (max-width: 991px) {
.gtk-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gtk-footer__col--about { grid-column: 1 / -1; }
}
/*
* Від 992 px — три колонки: опис, «Каталог», «Інформація».
*
* Колонка «Родовища» пішла разом із архівами атрибутів, куди вона вела.
* Опису лишається більша частка: у ньому суцільний абзац, а в сусідів —
* короткі рядки списку.
*/
@media (min-width: 992px) {
.gtk-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.gtk-footer__brand {
font-family: var(--gtk-font-display);
font-size: 24px;
font-weight: 600;
color: var(--gtk-cream);
letter-spacing: 0.04em;
margin: 0 0 18px;
}
.gtk-footer__brand em { font-style: normal; color: var(--gtk-bronze); }
.gtk-footer__about {
max-width: 42ch;
line-height: 1.6;
margin-bottom: 20px;
}
.gtk-footer__title {
font-family: var(--gtk-font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gtk-bronze-on-ink);
margin: 0 0 18px;
}
.gtk-footer__list,
.gtk-footer__contacts {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.gtk-footer__contacts { margin-bottom: 20px; }
.gtk-footer__contacts li {
display: flex;
align-items: center;
gap: 10px;
}
.gtk-footer__contacts svg { flex: 0 0 auto; color: var(--gtk-decor); }
/* Підвал набраний на 15px, але номер із цього правила виходить: 16 — його
мінімум скрізь, і поруч із поштою він тепер трохи більший, а не рівний. */
.gtk-footer__contacts .gtk-phone { font-size: 16px; }
.gtk-footer a { color: rgba(255, 255, 255, 0.7); }
.gtk-footer a:hover { color: var(--gtk-white); }
.gtk-footer .gtk-btn--secondary {
background: transparent;
border-color: rgba(255, 255, 255, 0.24);
color: var(--gtk-white);
}
.gtk-footer .gtk-btn--secondary:hover {
background: transparent;
border-color: var(--gtk-white);
color: var(--gtk-white);
}
.gtk-footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-block: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
font-size: 13px;
color: rgba(255, 255, 255, 0.55);
}
.gtk-footer__bottom p { margin: 0; }
/* ===========================================================================
НИЖНЯ ПАНЕЛЬ ЗВ'ЯЗКУ (< 1024px)
Дві дії на всю ширину: прорахунок і зв'язок. Месенджери й номер живуть
у шторці за другою кнопкою — на смузі завширшки з долоню їм не місце.
Панель біла з однією лінією згори: вона стоїть над будь-якою секцією,
зокрема над темною, і мусить читатися як край екрана, а не як частина
сторінки. Розмиття тла тут немає навмисно — воно коштує кадр на кожній
прокрутці й на середньому телефоні це видно.
=========================================================================== */
.gtk-callbar { display: none; }
@media (max-width: 1023px) {
.gtk-callbar {
position: fixed;
inset-inline: 0;
bottom: 0;
z-index: 90;
display: block;
transition: transform 250ms var(--gtk-ease);
}
/*
* Зрушення описане лише в схованому стані.
*
* transform: translateY(0) у звичайному стані — не те саме, що його
* відсутність: будь-який transform, крім none, робить елемент точкою
* відліку для position: fixed усередині, і затемнення переставало
* накривати екран, лишаючись розміром із саму панель.
*/
/*
* Панель їде вниз, коли вона зайва або заважає: форма заявки вже на
* екрані, відкрите меню, піднялася клавіатура. Клас ставить скрипт.
*/
.gtk-callbar[data-hidden] { transform: translateY(100%); }
.gtk-callbar__row-main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--gtk-line);
border-top: 1px solid var(--gtk-line);
/* Домашня смуга iPhone не має накривати кнопки. */
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.gtk-callbar__btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 0;
height: 56px;
margin: 0;
padding: 0 10px;
border: 0;
border-radius: 0;
font-family: var(--gtk-font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
line-height: 1.1;
text-align: center;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.gtk-callbar__btn:focus-visible {
outline: 2px solid var(--gtk-bronze-text);
outline-offset: -4px;
}
/*
* Головна дія залита бронзою.
*
* Заливка саме --gtk-bronze-text, а не --gtk-bronze: світлий текст на
* #A87444 дає 4.0:1, а капітель 12 пікселів за нормою потребує 4.5:1.
* Темніший бронзовий токен теми дає 5.7:1 і лишається тією ж бронзою.
*/
.gtk-callbar__btn--quote {
background: var(--gtk-bronze-text);
color: var(--gtk-white);
}
.gtk-callbar__btn--quote:hover,
.gtk-callbar__btn--quote:active,
.gtk-callbar__btn--quote:focus {
background: var(--gtk-brand-dark);
color: var(--gtk-white);
}
/* Вторинна — біла з обводкою, тією самою лінією, що й верх панелі. */
.gtk-callbar__btn--link {
background: var(--gtk-white);
color: var(--gtk-ink);
box-shadow: inset 0 0 0 1px var(--gtk-line);
}
.gtk-callbar__btn--link:hover,
.gtk-callbar__btn--link:active,
.gtk-callbar__btn--link:focus { background: var(--gtk-white); color: var(--gtk-ink); }
/* --- Шторка «Зв'язок» ------------------------------------------------- */
.gtk-callbar__scrim {
position: fixed;
inset: 0;
z-index: -1;
background: rgba(43, 43, 43, 0.4);
}
.gtk-callbar__sheet {
background: var(--gtk-white);
border-top: 1px solid var(--gtk-line);
padding: 18px var(--gtk-gutter) 8px;
}
.gtk-callbar__sheet-title {
margin: 0 0 12px;
font-family: var(--gtk-font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
line-height: 1.1;
text-transform: uppercase;
color: var(--gtk-text-muted);
}
.gtk-callbar__row {
display: flex;
align-items: center;
gap: 14px;
min-height: 52px;
border-top: 1px solid var(--gtk-line);
color: var(--gtk-ink);
font-size: 15px;
line-height: 1.3;
text-decoration: none;
}
.gtk-callbar__row:first-of-type { border-top: 0; }
.gtk-callbar__row:focus-visible {
outline: 2px solid var(--gtk-bronze-text);
outline-offset: -2px;
}
.gtk-callbar__row-ico { display: flex; flex: none; color: var(--gtk-bronze-text); }
.gtk-callbar__row-name { flex: none; }
/*
* Номер відсунутий праворуч і приглушений: у рядку два різні за вагою
* слова — що це за канал і як він виглядає. Друге читають, лише коли
* шукають очима саме номер.
*/
.gtk-callbar__row-val {
margin-inline-start: auto;
color: var(--gtk-text-muted);
/* Приглушений — так, дрібний — ні: це той самий номер, по якому
дзвонять, і чотирнадцять пікселів на телефоні його ховали. */
font-size: 16px;
white-space: nowrap;
}
/*
* Поки шторка відкрита, під нею нічого не має бути видно, крім самої
* панелі: затемнення накриває сторінку, а панель лишається на місці —
* тим самим тапом на «Зв'язок» шторка й закривається.
*/
.gtk-callbar__sheet[hidden],
.gtk-callbar__scrim[hidden] { display: none; }
}
/*
* Місце під панеллю — в тіла, а не в підвалі.
*
* Панель лежить fixed і накриває низ екрана. Раніше відступ стояв на
* .gtk-footer__bottom — тобто рятував рівно один рядок підвала. Кнопка
* відправки форми, якщо форма в кінці сторінки, лишалась під панеллю.
*
* Клас ставиться на сервері рівно там, де панель справді є: на кошику й
* оформленні її немає, і порожнього поля внизу там не з'являється.
*/
@media (max-width: 1023px) {
.gtk-has-callbar body {
padding-bottom: calc(57px + env(safe-area-inset-bottom, 0px));
}
}
/* Рух вимкнено — панель просто з'являється й зникає. */
@media (prefers-reduced-motion: reduce) {
.gtk-callbar { transition: none; }
}
/* ===========================================================================
ПЛАВАЮЧА КНОПКА ЗВ'ЯЗКУ
Внизу справа, поверх усього. На телефоні сідає над смугою дзвінка, а не
замість неї: смуга веде на дзвінок і прорахунок, кнопка — у месенджери.
Без JS список просто розкритий, а сама кнопка-перемикач зникає: клас
.gtk-js на ставить однорядковий скрипт у .
=========================================================================== */
.gtk-fab {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 95;
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
gap: 12px;
/* Порожнє місце навколо кнопки не має перехоплювати кліки по сторінці. */
pointer-events: none;
}
.gtk-fab > * { pointer-events: auto; }
/* Без JS перемикати нічого не треба: список і так видно. */
html:not(.gtk-js) .gtk-fab__toggle { display: none; }
.gtk-fab__toggle {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--gtk-ink);
color: var(--gtk-cream);
cursor: pointer;
box-shadow: 0 6px 20px rgba(43, 43, 43, 0.18);
transition: background 0.2s ease, transform 0.2s ease;
}
/* Колір на ховері заданий явно: Astra фарбує будь-яку