/* === css/normalize.css === */
/*!
* normalize.css v8.0.1
* ❌ WARNING: DO NOT MODIFY THIS FILE
* This file is managed by scripts/download-normalize.sh
*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
/* === css/base.css === */
/* ==========================================================================
Base CSS - CSS Custom Properties + Global Styles
========================================================================== */
/* CSS Custom Properties */
:root {
/* Editorial palette (світла тема) */
--ink: #1A1A1A;
--ink-light: #3A3A3A;
--amber: #E5231B;
--amber-dark: #B81810;
--paper: #F4F4F2;
--paper-card: #FFFFFF;
--graphite: #1A1A1A;
--graphite-soft: #6B6B6B;
--mint: #E5231B;
--border: #DADADA;
--radius: 10px;
--font-head: 'Source Serif 4', Georgia, 'Times New Roman', 'Noto Serif', serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
/* Colors - червоний акцент */
--color-primary: var(--amber);
--color-primary-hover: var(--amber-dark);
--color-primary-light: rgba(229, 35, 27, 0.08);
--color-secondary: #6c757d;
--color-success: #28a745;
--color-error: #dc2626;
--color-warning: #ffc107;
--color-info: #6c757d;
/* Чорно-білі: */
--color-white: #FFFFFF;
--color-black: #000000;
--color-text: var(--ink);
--color-text-muted: var(--graphite-soft);
--color-border: var(--border);
--color-border-light: var(--border);
--color-bg: var(--paper);
--color-bg-dark: #F5F5F3;
--color-bg-secondary: #F5F5F3;
--color-bg-parallax: var(--paper);
/* Glassmorphism: */
--glass-white: rgba(255, 255, 255, 0.1);
--glass-black: rgba(0, 0, 0, 0.1);
--glass-blur: blur(10px);
/* Glassmorphism colors (iOS 18+ стиль) */
--glass-bg-light: rgba(255, 255, 255, 0.7);
--glass-bg-dark: rgba(0, 0, 0, 0.5);
--glass-border: rgba(255, 255, 255, 0.2);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
/* Gradient overlays (замість blur для великих елементів) */
--glass-gradient-light: linear-gradient(
135deg,
rgba(255, 255, 255, 0.8) 0%,
rgba(255, 255, 255, 0.6) 100%
);
--glass-gradient-dark: linear-gradient(
135deg,
rgba(0, 0, 0, 0.6) 0%,
rgba(0, 0, 0, 0.4) 100%
);
/* Gray light для меню */
--color-gray-light: #F5F5F3;
/* Spacing */
--spacing-xs: clamp(8px, 1vw, 12px);
--spacing-sm: clamp(16px, 2vw, 24px);
--spacing-md: clamp(24px, 4vw, 32px);
--spacing-lg: 1.5rem; /* 24px */
--spacing-xl: 2rem; /* 32px */
--spacing-xxl: 3rem; /* 48px */
/* Menu scale factor (1/1.5 = 0.6667) */
--menu-scale: 0.6667;
/* Масштабовані spacing для меню */
--menu-spacing-xs: calc(clamp(8px, 1vw, 12px) * var(--menu-scale));
--menu-spacing-sm: calc(clamp(16px, 2vw, 24px) * var(--menu-scale));
--menu-spacing-md: calc(clamp(24px, 4vw, 32px) * var(--menu-scale));
--menu-spacing-lg: calc(1.5rem * var(--menu-scale));
/* Масштабовані font-size для меню */
--menu-font-xs: calc(13px * var(--menu-scale));
--menu-font-sm: calc(14px * var(--menu-scale));
--menu-font-base: calc(1rem * var(--menu-scale));
--menu-font-lg: calc(1.25rem * var(--menu-scale));
--menu-font-xl: calc(1.5rem * var(--menu-scale));
/* Масштабовані розміри */
--menu-size-xs: calc(8px * var(--menu-scale));
--menu-size-sm: calc(12px * var(--menu-scale));
--menu-size-md: calc(16px * var(--menu-scale));
--menu-size-lg: calc(44px * var(--menu-scale));
--menu-size-xl: calc(48px * var(--menu-scale));
/* Масштабовані border */
--menu-border-sm: calc(1px * var(--menu-scale));
--menu-border-md: calc(2px * var(--menu-scale));
/* Масштабовані border-radius */
--menu-radius-sm: calc(0.25rem * var(--menu-scale));
--menu-radius-md: calc(0.5rem * var(--menu-scale));
--menu-radius-lg: calc(1.5rem * var(--menu-scale));
/* Border radius */
--radius-sm: 0.25rem; /* 4px */
--radius-md: 0.5rem; /* 8px */
--radius-lg: 1.5rem; /* 24px */
--radius-pill: 999px;
--radius-full: 9999px;
/* Typography */
--font-family-heading: var(--font-head);
--font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.25rem; /* 20px */
--font-size-2xl: 1.5rem; /* 24px */
--font-size-3xl: 2rem; /* 32px */
/* Line heights */
--line-height-body: 1.7;
--line-height-heading: 1.3;
/* Additional text colors */
--color-text-light: var(--ink-light);
/* Code block colors */
--color-code-bg: rgba(0, 0, 0, 0.5);
--color-code-text: #e0e0e0;
--color-code-inline-bg: #F5F5F3;
--color-code-inline-text: var(--amber-dark);
/* Additional border radius */
--radius-xs: 0.125rem; /* 2px */
/* Primary color in RGB format (for rgba usage) */
--color-primary-rgb: 229, 35, 27;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
/* Z-index */
--z-parallax-container: -1; /* Паралакс-контейнер (за контентом) */
--z-content: 1; /* Контент */
--z-section-content: 2; /* Вище за hero-content (1) */
--z-running-line: 998;
--z-menu-overlay: 999;
--z-menu: 1000;
--z-menu-button: 1001;
--z-dropdown: 1002;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-popover: 1060;
--z-tooltip: 1070;
/* Fixed menu heights */
--header-height: 80px; /* Desktop header */
--nav-height: 70px; /* Mobile navigation */
--z-header: 1000; /* Top header */
--z-nav: 1000; /* Bottom navigation */
/* Transitions */
--transition-fast: 0.2s ease;
--transition-normal: 0.3s ease;
--transition-base: 250ms ease-in-out;
--transition-slow: 350ms ease-in-out;
/* Content width constraints */
--content-width-desktop: 70vw;
--content-width-mobile: 85vw;
--content-max-width: 1200px;
/* Enhanced spacing for sections */
--section-spacing-desktop: 4rem; /* 64px */
--section-spacing-mobile: 3rem; /* 48px */
--section-padding-desktop: 3rem; /* 48px */
--section-padding-mobile: 2rem; /* 32px */
/* Redesign tokens */
--section-bg-contrast: #F5F5F3;
--card-bg-light: var(--paper-card);
--font-size-display: clamp(2.5rem, 6vw, 5rem);
--font-size-hero-sub: clamp(1rem, 2vw, 1.25rem);
--advantage-card-radius: 20px;
--section-gap: clamp(4rem, 8vw, 8rem);
/* Enhanced glassmorphism */
--glass-bg-elevated: rgba(255, 255, 255, 0.85);
--glass-border-elevated: rgba(255, 255, 255, 0.3);
--glass-shadow-elevated:
0 8px 32px rgba(0, 0, 0, 0.08),
0 16px 64px rgba(0, 0, 0, 0.12),
0 24px 96px rgba(0, 0, 0, 0.15);
/* Button enhancements */
--button-padding-v: 1rem; /* 16px */
--button-padding-h: 2rem; /* 32px */
--button-shadow: none;
--button-shadow-hover: none;
/* Form contrast */
--input-bg: var(--color-white);
--input-border: var(--color-border);
/* Input styling variables */
--input-border-width: 1.5px;
--input-border-radius: var(--radius-sm);
--input-padding: var(--spacing-sm);
--input-font-size: var(--font-size-base);
--input-transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
--input-focus-shadow: 0 0 0 2px var(--color-primary-light);
--input-placeholder-color: rgba(0, 0, 0, 0.5);
}
/* ==========================================================================
Global Styles with Cross-Platform Rules
========================================================================== */
html {
/* Rule 44: text-size-adjust */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
/* Rule 41: color-scheme */
color-scheme: light;
/* Smooth scroll для якорних посилань */
scroll-behavior: smooth;
/* Base font size for rem calculations */
font-size: 16px;
/* Критично: запобігає горизонтальному скролу */
overflow-x: hidden;
width: 100%;
box-sizing: border-box;
/* Запобігає зайвому скролу через fixed елементи */
height: auto;
min-height: 100vh;
min-height: 100dvh;
/* EMERGENCY FIX: Force vertical scroll */
overflow-y: scroll;
background-color: var(--color-bg);
}
img,
picture,
video {
max-width: 100%;
height: auto;
}
body {
margin: 0;
padding: 0;
font-family: var(--font-family-base);
font-size: var(--font-size-base);
line-height: 1.5;
color: var(--color-text);
background-color: var(--paper);
/* Rule 32: overscroll-behavior - REMOVED to fix stuck scroll */
/* overscroll-behavior: none; */
/* Rule 42: font-smoothing */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Rule 45: scrollbar-gutter */
scrollbar-gutter: stable;
/* Safe area padding for notched devices */
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
/* Критично: запобігає горизонтальному скролу */
overflow-x: hidden;
width: 100%;
box-sizing: border-box;
/* Запобігає зайвому скролу через fixed елементи */
min-height: 100vh;
min-height: 100dvh; /* Ensure body takes full height */
height: auto;
/* EMERGENCY FIX: Ensure body allows scroll */
overflow-y: visible !important;
}
/* На мобільних робимо body прозорим, щоб фонове зображення було видиме */
@media (width <= 767px) {
body {
background-color: var(--paper);
}
}
/* Rule 33: touch-action для інтерактивних елементів */
button,
a,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"],
[tabindex] {
touch-action: manipulation;
}
/* Rule 34: -webkit-overflow-scrolling (deprecated але залишаємо для старих iOS) */
.scrollable {
-webkit-overflow-scrolling: touch;
}
/* Rule 111: Touch targets minimum 44px */
button,
a,
input,
select,
textarea {
min-height: 2rem;
min-width: 2rem;
}
/* Rule 40: accent-color для inputs */
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
accent-color: var(--color-primary);
}
/* Rule 50: input autofill styling - MOVED TO components/form.css */
/* Autofill стилі тепер в form.css для кращого контролю */
/* Rule 113: Focus indicators */
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Видалити outline для мишки, але залишити для клавіатури */
:focus:not(:focus-visible) {
outline: none;
}
/* Rule 58: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms;
animation-iteration-count: 1;
transition-duration: 0.01ms;
scroll-behavior: auto;
}
}
/* Rule 31: Hover effects тільки для пристроїв з hover */
@media (hover: hover) and (pointer: fine) {
/* Забезпечуємо, що кнопки не мають підкреслення при hover */
.button:hover,
a.button:hover,
[class*="button"]:hover {
text-decoration: none;
}
/* Тільки для голих кнопок без власного класу */
button:not([class]):hover {
opacity: 0.9;
}
}
/* Rule 35: backdrop-filter з -webkit- prefix */
.modal-backdrop,
.overlay {
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
/* Rule 43: text-wrap balance для заголовків */
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
color: var(--color-text);
}
h1, h2, h3 {
font-family: var(--font-family-heading);
}
h1 {
font-weight: 700;
letter-spacing: -0.02em;
}
h2 {
font-weight: 600;
letter-spacing: -0.015em;
}
h3 {
font-weight: 600;
letter-spacing: -0.01em;
}
/* HTMX Indicator - прихований за замовчуванням */
.htmx-indicator {
display: none;
}
/* Показується коли є HTMX запит */
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
display: block;
}
/* Загальний стиль для заголовків секцій (як h1 в hero) */
.section-title {
font-family: var(--font-family-heading);
font-size: clamp(2rem, 4.5vw, 3.25rem);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.1;
text-align: center;
color: var(--color-text);
margin-bottom: 2rem;
}
/* Декоративна лінія-акцент під заголовком */
.section-title--decorated::after {
content: '';
display: block;
width: 48px;
height: 3px;
background: var(--color-primary);
border-radius: 2px;
margin: 12px auto 0;
}
/* Eyebrow - мітка над заголовком секції з декоративними лініями */
.section-eyebrow {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 12px;
}
.section-eyebrow::before,
.section-eyebrow::after {
content: '';
flex: 0 0 28px;
height: 1px;
background: var(--color-primary);
}
/* ==========================================================================
Scroll Reveal - fade-up при появі в viewport
========================================================================== */
.reveal {
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: var(--reveal-delay, 0ms);
}
.reveal--scale {
transform: scale(0.96);
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.reveal {
opacity: 1;
transform: none;
transition: none;
}
}
/* ==========================================================================
Utility Classes
========================================================================== */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.container {
width: 100%;
max-width: var(--content-max-width);
margin-left: auto;
margin-right: auto;
padding-left: var(--spacing-md);
padding-right: var(--spacing-md);
}
/* Rule 27: 100vh з fallback на 100dvh */
.full-height {
height: 100vh; /* Fallback */
height: 100dvh;
}
/* Content width constraint utility */
.content-constrained {
width: 100%;
max-width: min(var(--content-width-desktop), var(--content-max-width));
margin-left: auto;
margin-right: auto;
padding-left: var(--spacing-md);
padding-right: var(--spacing-md);
}
@media (width <= 767px) {
.content-constrained {
max-width: var(--content-width-mobile);
}
}
/* Large desktop (1920px+) */
@media (width >= 1920px) {
:root {
--content-max-width: 1600px;
}
.container {
max-width: 1600px;
}
}
/* 2K monitors (2560px+) */
@media (width >= 2560px) {
:root {
--content-max-width: 2000px;
}
.container {
max-width: 2000px;
}
}
/* 4K monitors (3840px+) */
@media (width >= 3840px) {
:root {
--content-max-width: 2800px;
}
.container {
max-width: 2800px;
}
}
/* Fixed menu offset utility */
.fixed-menu-offset {
padding-top: var(--header-height, 80px);
padding-bottom: var(--nav-height, 70px);
}
/* Main content offset for fixed menus */
.main-content {
/* Desktop: top padding for header, bottom for nav */
padding-top: calc(var(--header-height, 80px) + env(safe-area-inset-top, 0px));
padding-bottom: calc(var(--nav-height, 70px) + env(safe-area-inset-bottom, 0px));
}
/* Прибрати padding-bottom, якщо після main-content йде footer */
.main-content:has(+ .footer) {
padding-bottom: 0;
}
@media (width <= 767px) {
.main-content {
/* Mobile: top padding for header, bottom for nav */
padding-top: calc(var(--header-height, 80px) + env(safe-area-inset-top, 0px));
padding-bottom: calc(var(--nav-height, 70px) + env(safe-area-inset-bottom, 0px));
}
.main-content:has(+ .footer) {
padding-bottom: 0;
}
/* Додати margin-bottom для останньої секції перед footer, щоб навігація не перекривала контент */
.main-content:has(+ .footer) > *:last-child > section:last-child,
.main-content:has(+ .footer) section:last-child,
.main-content:has(+ .footer) .glass-section:last-child {
margin-bottom: calc(var(--nav-height, 70px) + env(safe-area-inset-bottom, 0px) + 20px);
scroll-margin-bottom: calc(var(--nav-height, 70px) + env(safe-area-inset-bottom, 0px) + 20px);
}
}
/* Прибрати margin-bottom у останньої секції перед footer */
/* Загальні правила для всіх секцій */
.main-content > *:last-child > section:last-child,
.main-content section:last-child,
.main-content .glass-section:last-child {
margin-bottom: 0;
}
/* Додати scroll-margin-bottom для останніх секцій на мобільних, щоб навігація не перекривала контент */
@media (width <= 767px) {
.main-content > *:last-child > section:last-child,
.main-content section:last-child,
.main-content .glass-section:last-child {
scroll-margin-bottom: calc(var(--nav-height, 70px) + env(safe-area-inset-bottom, 0px) + 20px);
}
/* Додати scroll-margin-top для перших секцій, щоб контент не обрізався зверху */
.main-content > *:first-child > section:first-child,
.main-content section:first-child,
.main-content .glass-section:first-child {
scroll-margin-top: calc(var(--header-height, 80px) + env(safe-area-inset-top, 0px) + 20px);
}
/* Додати додатковий padding-top для першої секції, якщо вона може бути обрізана */
.main-content > *:first-child > section:first-child,
.main-content section:first-child {
padding-top: max(20px, env(safe-area-inset-top, 20px));
}
}
/* Стилі для сторінки "Про нас" - світла тема */
.about-page .glass-section p {
color: var(--ink-light);
line-height: 1.7;
}
.about-page .glass-section p:not(.about-hero__subtitle) {
color: var(--ink-light);
}
.about-page .glass-section h2 {
color: var(--ink);
}
.about-page .glass-section ul li {
color: var(--ink-light);
line-height: 1.7;
}
.about-page .glass-section strong {
color: var(--ink);
font-weight: 700;
}
/* Специфічно для hero-content (головна сторінка) - 4rem відстань перед footer */
.hero-content > section:last-child,
.hero-content .glass-section:last-child,
.hero-content > section.consultation-section:last-child {
margin-bottom: 4rem;
}
/* Специфічні правила для різних типів секцій */
.main-content .consultation-section:last-child,
.hero-content .consultation-section:last-child,
.main-content .testimonials-section:last-child,
.hero-content .testimonials-section:last-child,
.main-content .achievements:last-child,
.hero-content .achievements:last-child,
.main-content .advantages-carousel:last-child,
.hero-content .advantages-carousel:last-child,
.main-content .courses-section:last-child,
.hero-content .courses-section:last-child,
.main-content .pricing-section:last-child,
.hero-content .pricing-section:last-child {
margin-bottom: 0;
}
/* Перевизначення для hero-content - завжди 4rem для останньої секції */
.hero-content .consultation-section:last-child,
.hero-content .testimonials-section:last-child,
.hero-content .achievements:last-child,
.hero-content .advantages-carousel:last-child,
.hero-content .courses-section:last-child,
.hero-content .pricing-section:last-child {
margin-bottom: 4rem;
}
/* ==========================================================================
Error pages (404, 500)
========================================================================== */
.error-page {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: var(--color-bg-dark);
color: var(--color-text);
text-align: center;
padding: 2rem;
}
.error-page__container {
max-width: 480px;
}
.error-page__code {
font-size: clamp(5rem, 15vw, 10rem);
font-weight: 700;
line-height: 1;
color: var(--color-primary);
margin: 0 0 1rem;
}
.error-page__message {
font-size: 1.125rem;
color: var(--color-text-muted);
margin: 0 0 2rem;
line-height: 1.6;
}
.error-page__link {
display: inline-block;
padding: 0.875rem 2rem;
background: var(--color-primary);
color: var(--color-white);
text-decoration: none;
border-radius: var(--radius-md, 8px);
font-weight: 600;
transition: background 0.2s ease;
}
.error-page__link:hover {
background: var(--color-primary-hover);
}
/* GTM noscript fallback iframe - прихований, не впливає на layout */
.gtm-noscript {
display: none;
visibility: hidden;
}
/* === css/utilities/glassmorphism.css === */
/* ==========================================================================
Surface Utilities - світлі картки з тонкою рамкою
Назви класів .glass-* збережено для сумісності з шаблонами та JS
========================================================================== */
/* ВЕЛИКІ елементи (секції) */
.glass-section {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: none;
}
/* ДРІБНІ елементи (картки) */
.glass-card {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: none;
}
.glass-card--dark {
background: var(--color-bg-secondary);
}
.glass-card--animating {
will-change: transform, opacity;
}
/* === css/components/button.css === */
/* ==========================================================================
Button Component (BEM)
========================================================================== */
.button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--button-padding-v) var(--button-padding-h);
min-height: 44px;
min-width: 44px;
font-family: var(--font-family-base);
font-size: var(--font-size-base);
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.4;
text-align: center;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
border: none;
border-radius: var(--radius);
background: var(--color-primary);
color: #ffffff;
box-shadow: none;
transition:
background-color 200ms ease,
border-color 200ms ease,
color 200ms ease,
opacity 200ms ease;
touch-action: manipulation;
}
.button:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.button:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
.button:hover:not(:disabled) {
background: var(--color-primary-hover);
}
}
.button:active:not(:disabled) {
opacity: 0.9;
}
/* ========== Variants ========== */
.button--primary {
background: var(--color-primary);
border: none;
color: var(--color-white);
box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
.button--primary:hover:not(:disabled) {
background: var(--color-primary-hover);
text-decoration: none;
}
}
.button--secondary {
background: var(--color-white);
border: 1px solid var(--color-text);
box-shadow: none;
color: var(--color-text);
}
@media (hover: hover) and (pointer: fine) {
.button--secondary:hover:not(:disabled) {
background: var(--color-text);
color: var(--color-white);
}
}
.button--success {
background: var(--color-success);
}
.button--error {
background: var(--color-error);
}
.button--outline {
background: transparent;
border: 1px solid var(--color-text);
color: var(--color-text);
box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
.button--outline:hover:not(:disabled) {
background: var(--color-text);
color: var(--color-white);
}
}
/* ========== Sizes ========== */
.button--sm {
padding: 10px 20px;
font-size: var(--font-size-sm);
min-height: 36px;
}
.button--lg {
padding: 16px 36px;
font-size: var(--font-size-lg);
font-weight: 700;
min-height: 52px;
}
.button--full {
width: 100%;
}
/* === css/components/header-base.css === */
/* ==========================================================================
Header Base - базовий хедер (200 рядків)
КРИТИЧНИЙ файл - завжди завантажується першим
========================================================================== */
/* ===== ХЕДЕР (БАЗОВА СТРУКТУРА) ===== */
.header-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--z-header);
display: flex;
justify-content: center;
align-items: center;
gap: var(--spacing-md);
width: 100%;
padding: 0 var(--spacing-md);
padding-top: max(10px, env(safe-area-inset-top, 10px));
padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
box-sizing: border-box;
background: var(--color-white);
border-bottom: 1px solid var(--border);
transition: box-shadow var(--transition-base), background-color var(--transition-base);
}
.header {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-md) var(--spacing-lg);
box-sizing: border-box;
box-shadow: none;
}
.header__logo {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: inherit;
}
.header__logo-image {
display: block;
height: auto;
width: auto;
max-width: 100%;
object-fit: contain;
}
.header__menu--top .header__logo {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
height: auto;
align-self: center;
}
.header__menu--top .header__logo-image {
height: 7vh;
height: 7dvh;
width: auto;
object-fit: contain;
}
@media (hover: hover) {
.header__logo:hover {
opacity: 0.9;
transition: opacity var(--transition-fast);
}
}
.header__logo:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* Невидимі секції для балансування */
.header__spacer--left,
.header__spacer--right {
flex: 1 1 0;
min-width: 0;
visibility: hidden;
pointer-events: none;
}
/* Кругла кнопка Student Zone */
.header__student-zone {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: clamp(3.5rem, 5vw, 5rem);
aspect-ratio: 1 / 1;
border-radius: 50%;
background: var(--color-primary);
border: none;
box-shadow: none;
padding: 5px;
cursor: pointer;
transition: all var(--transition-fast);
box-sizing: border-box;
color: var(--color-white);
font-family: var(--font-family-base);
text-decoration: none;
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
/* Fallback для старих браузерів без підтримки aspect-ratio (iOS Safari < 15) */
@supports not (aspect-ratio: 1 / 1) {
.header__student-zone {
height: clamp(3.5rem, 5vw, 5rem);
}
}
@media (hover: hover) {
.header__student-zone:hover {
opacity: 0.9;
transform: scale(1.05);
text-decoration: none;
}
}
.header__student-zone:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.header__student-zone-text {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 1;
font-size: clamp(0.5rem, 1.2vw, 0.875rem);
font-weight: 700;
text-align: center;
white-space: nowrap;
}
.header__student-zone-text span {
display: block;
line-height: 1;
}
.header__student-zone-text span:nth-child(2) {
color: var(--color-white);
}
/* Форма в хедері (десктоп) */
.trial-form--desktop {
display: flex;
gap: var(--spacing-sm);
flex: 1 0 0;
align-items: center;
min-width: 0;
box-sizing: border-box;
}
.trial-form--desktop .form-group {
margin: 0;
flex: 1 0 0;
min-width: 0;
box-sizing: border-box;
}
.header__menu--top .trial-form--desktop {
display: flex;
gap: var(--menu-spacing-xs);
flex: 1 0 0;
align-items: center;
min-width: 0;
box-sizing: border-box;
}
.header__menu--top .trial-form--desktop .form-group {
margin: 0;
flex: 1 0 0;
min-width: 0;
box-sizing: border-box;
}
.trial-form--desktop .form-group__input {
border: 1px solid var(--color-border);
background-color: var(--color-white);
color: var(--color-black);
}
.header__menu--top .trial-form--desktop .form-group__input {
background-color: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--menu-radius-md);
padding: calc(0.875rem * var(--menu-scale)) calc(1rem * var(--menu-scale));
font-size: var(--menu-font-base);
font-family: var(--font-family-base);
color: var(--color-black);
min-height: var(--menu-size-lg);
width: 100%;
transition: all 0.2s ease;
box-sizing: border-box;
}
.header__menu--top .trial-form--desktop .form-group__input:focus {
border-color: var(--color-text);
background-color: var(--color-white);
box-shadow: none;
outline: none;
}
.header__menu--top .trial-form--desktop .form-group__input::placeholder {
color: var(--input-placeholder-color);
opacity: 1;
}
.trial-form--desktop .button--primary {
flex-shrink: 0;
}
.header__menu--top .trial-form--desktop .button--primary {
flex-shrink: 0;
min-height: var(--menu-size-lg);
padding: calc(0.875rem * var(--menu-scale)) calc(1.5rem * var(--menu-scale));
font-size: var(--menu-font-base);
border-radius: var(--menu-radius-lg);
}
/* Кнопка запису з телефоном (круглая) */
.header__expand-btn,
.header__phone-btn {
flex-shrink: 0;
width: 7vh;
width: 7dvh;
height: 7vh;
height: 7dvh;
aspect-ratio: 1 / 1;
padding: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.header__expand-btn svg,
.header__phone-btn svg {
width: 100%;
height: 100%;
max-width: 24px;
max-height: 24px;
}
/* Кнопка на мобільних */
.trial-form__trigger--mobile {
display: none;
}
@media (width >= 768px) {
.header-wrapper {
align-items: center;
}
.header {
max-width: 900px;
margin: 0 auto;
padding: var(--spacing-md) var(--spacing-lg);
box-shadow: none;
}
.header__student-zone {
align-self: center;
width: 56px;
height: 56px;
}
.header__student-zone-text {
font-size: 9px;
}
/* Fallback для старих браузерів */
@supports not (aspect-ratio: 1 / 1) {
.header__student-zone {
height: clamp(4rem, 8.2%, 6rem);
}
}
}
/* Мобільна версія */
@media (width <= 767px) {
/* Десктоп форма ховається */
.trial-form--desktop {
display: none;
}
/* Кнопка запису показується на мобільних */
.header__expand-btn,
.header__phone-btn {
display: flex;
order: -1;
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
aspect-ratio: 1 / 1;
padding: 0;
border-radius: 50%;
margin-left: 0;
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.header__expand-btn svg,
.header__phone-btn svg {
max-width: 16px;
max-height: 16px;
}
/* Мобільна кнопка прихована */
.trial-form__trigger--mobile {
display: none;
}
.header-wrapper {
padding-left: max(10px, env(safe-area-inset-left, 10px));
padding-right: max(10px, env(safe-area-inset-right, 10px));
padding-top: max(10px, env(safe-area-inset-top, 10px));
padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
z-index: var(--z-header);
position: fixed;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: var(--menu-spacing-xs);
height: auto;
min-height: 60px;
}
/* Приховати спейсери на мобільних */
.header__spacer--left,
.header__spacer--right {
display: none;
}
/* Виключити логотип з потоку flex на мобільних */
.header__logo,
.header__logo-image {
position: absolute;
left: -9999px;
width: 0;
height: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* Мобільна темна капсула (бігуча стрічка + кнопка телефону) має займати весь вільний простір */
.header-wrapper .header__nav--top {
flex: 1 1 0;
min-width: 0;
width: auto;
}
.header {
flex-direction: column;
position: static;
width: 100%;
max-width: 100%;
min-width: 0;
overflow: visible;
margin: 0;
padding: var(--spacing-sm) var(--spacing-md);
box-shadow: none;
border-radius: var(--radius-md);
}
.mobile-nav-container .header {
padding-left: 0;
padding-right: 0;
}
.header__menu--top {
overflow: visible;
}
/* Прибрати padding-right зі внутрішнього меню верхнього бару, щоб кнопка телефону стояла у самій правій частині капсули */
.header-wrapper .header__nav--top .header__menu--top {
padding-right: 0;
}
/* Кнопка Student Zone на мобільних */
.header-wrapper .header__student-zone {
display: flex;
flex-shrink: 0;
align-self: center;
width: 48px;
height: 48px;
padding: 4px;
box-sizing: border-box;
}
.header-wrapper .header__student-zone-text {
font-size: 8px;
}
/* Fallback для старих браузерів */
@supports not (aspect-ratio: 1 / 1) {
.header-wrapper .header__student-zone {
height: 60px;
}
}
}
/* ==========================================================================
Header Phone Hint - підказка біля кнопки телефону
========================================================================== */
.header__phone-btn-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
z-index: 2;
}
.header__phone-hint {
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
background: var(--color-text);
color: var(--color-white);
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
box-shadow: none;
z-index: var(--z-tooltip);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* Стрілка (псевдо-елемент) */
.header__phone-hint::before {
content: '';
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid var(--color-text);
}
/* Видима підказка */
.header__phone-hint--visible {
opacity: 1;
visibility: visible;
}
/* Мобільна версія - підказка ЗНИЗУ як на десктопі */
@media (width <= 767px) {
.header__phone-hint {
/* Позиціонування ЗНИЗУ як на десктопі */
bottom: -50px;
left: 50%;
right: auto;
transform: translateX(-50%) translateZ(0);
/* Менший шрифт для мобільних */
font-size: 0.75rem;
padding: 0.4rem 0.75rem;
/* iOS Safari фікси */
-webkit-transform: translateX(-50%) translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
/* Запобігти обрізанню на краях екрана */
max-width: calc(100vw - 32px);
/* Додаткові iOS фікси */
will-change: opacity, visibility;
}
/* Стрілка вказує ВГОРУ на кнопку */
.header__phone-hint::before {
/* Стрілка ВГОРУ (як на десктопі) */
top: -6px;
left: 50%;
right: auto;
transform: translateX(-50%);
/* Напрямок стрілки - вгору */
border-top: 0;
border-bottom: 6px solid var(--color-text);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
}
/* Забезпечити, що wrapper кнопки не обрізає підказку */
.header__phone-btn-wrap {
overflow: visible;
position: relative;
z-index: 2;
}
}
/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 2px;
background: var(--color-primary);
z-index: calc(var(--z-header) + 1);
transition: width 0.1s linear;
pointer-events: none;
transform-origin: left center;
}
@media (prefers-reduced-motion: reduce) {
.scroll-progress {
transition: none;
}
}
/* ===== Шапка як у speak-up.pl: пігулка зверху, без меню знизу ===== */
:root {
--header-height: 28px;
}
.main-content {
padding-top: 4.75rem;
}
.header-wrapper {
background: transparent;
border-bottom: none;
padding-top: max(12px, env(safe-area-inset-top, 12px));
padding-bottom: 12px;
pointer-events: none;
}
.header__nav--top {
pointer-events: auto;
width: min(1120px, calc(100% - 1.5rem));
max-width: min(1120px, calc(100% - 1.5rem));
min-width: 0;
margin: 0 auto;
padding: 0.35rem 0.45rem 0.35rem 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.65);
border-radius: 28px;
box-shadow: 0 10px 30px rgba(26, 26, 26, 0.08);
}
.header-wrapper .header__nav--top {
background: rgba(255, 255, 255, 0.78);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
backdrop-filter: blur(16px) saturate(1.4);
}
.header__menu--top {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
}
.header__menu--top .header__logo-image {
height: 52px;
width: 52px;
object-fit: contain;
}
.header__links {
display: flex;
align-items: center;
gap: 0.15rem;
margin: 0 auto 0 0.25rem;
padding: 0;
list-style: none;
min-width: 0;
}
.header__links-drop {
position: relative;
}
.header__links-item {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.4rem 0.45rem;
border: 0;
background: transparent;
color: var(--ink);
font: inherit;
font-size: 1.05rem;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
border-radius: 999px;
}
.header__links-item--drop span {
font-size: 0.6rem;
}
.header__links-drop .header__dropdown {
top: calc(100% + 10px);
bottom: auto;
}
.header__links-item.header__link--active {
background: var(--color-primary);
color: #fff;
}
.header-wrapper .header__student-zone {
margin-left: auto;
width: 52px;
height: 52px;
aspect-ratio: 1 / 1;
flex-shrink: 0;
overflow: hidden;
padding: 5px;
}
.header-wrapper .header__student-zone-text {
font-size: 9px;
line-height: 1.05;
letter-spacing: -0.02em;
white-space: normal;
}
.header__phone-btn-wrap,
.trial-form__trigger--mobile {
display: none;
}
.header__burger {
display: none;
margin-left: 0.35rem;
}
button.burger-menu__link {
width: 100%;
border: 0;
background: transparent;
font-family: inherit;
font-size: 1.125rem;
font-weight: 500;
text-align: center;
cursor: pointer;
}
@media (width <= 767px) {
.header__menu--top .header__logo,
.header__menu--top .header__logo-image {
position: static;
left: auto;
width: 44px;
height: 44px;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.header-wrapper .header__student-zone {
width: 44px;
height: 44px;
padding: 4px;
}
}
.mobile-nav-container {
display: none !important;
}
@media (width <= 760px) {
.header__links {
display: none;
}
.header__burger {
display: inline-flex;
}
.header__static-cta-text--desktop {
display: none;
}
}
/* === css/components/navigation.css === */
/* ==========================================================================
Navigation - Bottom Navigation Bar (300 рядків)
========================================================================== */
/* ===== TELEGRAM-STYLE NAVIGATION (знизу) ===== */
/* Десктоп (≥768px) */
@media (width >= 768px) {
.header__nav {
max-width: 900px;
padding: 0 var(--menu-spacing-sm);
box-shadow: none;
}
.header__nav--top {
max-width: 900px;
width: 100%;
margin: 0 auto;
box-sizing: border-box;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.header__menu--top {
max-width: 100%;
min-width: 0;
width: 100%;
padding-top: 0;
padding-bottom: 0;
box-sizing: border-box;
}
}
.mobile-nav-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: var(--z-nav);
display: block;
width: 100%;
padding: 0 var(--spacing-md);
padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
box-sizing: border-box;
box-shadow: none;
pointer-events: none;
}
/* Прямі дочірні елементи теж прозорі для кліків (header має великий padding) */
.mobile-nav-container > * {
pointer-events: none;
}
/* Клікабельність тільки на видимих інтерактивних елементах */
.mobile-nav-container .header__nav {
pointer-events: auto;
}
.mobile-nav-container .burger-menu {
pointer-events: auto;
}
@media (width >= 768px) {
.mobile-nav-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: var(--z-nav);
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 0 var(--spacing-md);
padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
box-sizing: border-box;
pointer-events: none;
}
.mobile-nav-container .header {
max-width: 900px;
width: auto;
flex: 0 1 auto;
}
/* Гарантуємо, що бургер-меню не впливає на центрування на десктопі */
.mobile-nav-container .burger-menu {
display: none;
}
/* Виправлення відступу праворуч */
.mobile-nav-container .header__nav {
width: 100%;
max-width: 100%;
padding-left: var(--menu-spacing-lg);
padding-right: var(--menu-spacing-lg);
box-sizing: border-box;
}
}
.header__nav {
position: relative;
background: var(--color-white);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
padding: var(--menu-spacing-sm) var(--menu-spacing-lg);
box-sizing: border-box;
box-shadow: none;
}
/* Слайдер (червоний вовчок) - позиціонується відносно .header__nav */
.header__menu-slider {
position: absolute;
top: var(--menu-spacing-sm);
left: var(--menu-spacing-sm);
width: 0;
background: var(--color-primary);
border-radius: var(--radius-pill);
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 0.3s ease;
pointer-events: none;
z-index: 1;
opacity: 0;
}
/* Показуємо слайдер коли є активна кнопка */
.header__nav:has(.header__link--active) .header__menu-slider {
opacity: 1;
}
/* Верхнє меню (як нижнє) */
.header__nav--top {
position: relative;
background: transparent;
border: none;
border-radius: 0;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
padding-left: var(--menu-spacing-lg);
padding-right: var(--menu-spacing-lg);
box-sizing: border-box;
box-shadow: none;
width: 100%;
/* max-width буде перевизначено в media query для >= 768px */
}
.header__menu {
display: flex;
align-items: center;
justify-content: center;
gap: var(--menu-spacing-xs);
list-style: none;
background: transparent;
border-radius: var(--radius-pill);
border: none;
outline: none;
box-shadow: none;
background-clip: padding-box;
margin: 0;
padding-left: 0;
padding-inline-start: 0;
}
.header__menu::marker {
display: none;
content: '';
}
.header__menu li::marker {
display: none;
content: '';
}
.header__menu--top {
display: flex;
align-items: center;
justify-content: center;
gap: var(--menu-spacing-xs);
list-style: none;
background: transparent;
border-radius: var(--radius-pill);
border: none;
outline: none;
box-shadow: none;
background-clip: padding-box;
margin: 0;
}
.header__link {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
padding: var(--menu-spacing-xs) var(--menu-spacing-sm);
color: var(--color-text);
text-decoration: none;
font-size: var(--menu-font-lg);
font-weight: 600;
border-radius: var(--radius-pill);
transition: all var(--transition-fast);
white-space: nowrap;
touch-action: manipulation;
background: transparent;
border: none;
}
/* Reset для button елементів з класом .header__link */
button.header__link {
/* Прибрати стандартні стилі браузера для button */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Гарантувати ті ж стилі що й для */
font-family: inherit;
font-size: var(--menu-font-lg);
font-weight: 600;
line-height: inherit;
text-transform: none;
letter-spacing: inherit;
/* Прибрати всі можливі browser defaults */
margin: 0;
padding: var(--menu-spacing-xs) var(--menu-spacing-sm);
border: none;
background: transparent;
color: var(--color-text);
/* iOS Safari фікси */
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
user-select: none;
}
.header__link-text {
position: relative;
z-index: 1;
}
.header__link--active {
background: var(--color-primary);
border: none;
color: var(--color-white);
}
@media (hover: hover) and (pointer: fine) {
.header__link:hover,
button.header__link:hover {
background: transparent;
border: none;
color: var(--color-primary);
text-decoration: none;
}
.header__link--active:hover,
button.header__link--active:hover {
background: var(--color-primary);
color: var(--color-white);
}
}
/* Active стан для button */
button.header__link--active {
background: var(--color-primary);
border: none;
color: var(--color-white);
}
/* Focus стан для button */
button.header__link:focus-visible {
border: none;
color: var(--color-primary);
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Мобільна версія */
@media (width <= 767px) {
.header__nav {
padding: 0;
max-width: 100%;
width: 100%;
margin: 0;
position: static;
box-shadow: none;
}
.header__nav--top {
flex: 1 0 0;
min-width: 0;
height: 4rem;
background: transparent;
border: none;
border-radius: 0;
padding-top: var(--menu-spacing-sm);
padding-bottom: var(--menu-spacing-sm);
padding-left: var(--menu-spacing-sm);
padding-right: var(--menu-spacing-sm);
box-sizing: border-box;
box-shadow: none;
}
.header__menu {
gap: var(--menu-size-xs);
padding: var(--menu-size-xs) var(--menu-size-md);
overflow-x: auto;
justify-content: center;
min-width: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow-wrap: break-word;
scrollbar-width: none;
-ms-overflow-style: none;
}
/* Виправлення асиметрії */
.mobile-nav-container .header__menu {
gap: 4px;
padding: 4px 0;
padding-inline-start: 0;
padding-inline-end: 0;
margin-left: 0;
}
/* Повне прибирання резервованого місця під маркери списку */
.mobile-nav-container .header__menu::marker {
display: none;
content: '';
}
.mobile-nav-container .header__menu li::marker {
display: none;
content: '';
}
.header__menu::-webkit-scrollbar {
display: none;
}
.header__link {
padding: 4px 6px;
font-size: 11px;
}
/* Мобільні стилі для button.header__link */
button.header__link {
padding: 4px 6px;
font-size: 11px;
/* Гарантувати що розміри співпадають з */
}
/* Слайдер на мобільних */
.header__menu-slider {
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Ховаємо деякі пункти на мобільних */
.header__menu-item--mobile-hidden {
display: none;
}
/* Мобільна версія: grid layout */
.mobile-nav-container {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
justify-content: space-between;
gap: 8px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: var(--z-menu-button);
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding-left: max(10px, env(safe-area-inset-left, 10px));
padding-right: max(10px, env(safe-area-inset-right, 10px));
padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
overflow-x: hidden;
pointer-events: none;
}
.header__menu--top {
flex-wrap: nowrap;
gap: 0;
background: transparent;
border-radius: var(--radius-pill);
padding-top: var(--menu-spacing-xs);
padding-bottom: var(--menu-spacing-xs);
padding-left: var(--menu-spacing-xs);
padding-right: var(--menu-spacing-xs);
box-sizing: border-box;
}
.header__menu--top .trial-form--desktop {
display: none;
}
}
/* iOS Safari фікси */
@supports (-webkit-touch-callout: none) {
@media (width <= 767px) {
.header__nav {
-webkit-overflow-scrolling: touch;
}
}
/* iOS Safari фікси для button.header__link */
button.header__link {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
}
/* === css/components/navigation-dropdown.css === */
/* ==========================================================================
Navigation Dropdown - Випадаючий список для кнопки "Програми"
========================================================================== */
/* ===== КОНТЕЙНЕР З DROPDOWN (LI) ===== */
.header__menu-item--has-dropdown {
position: relative; /* Для абсолютного позиціонування dropdown відносно кнопки */
}
/* ===== КНОПКА З DROPDOWN ===== */
/* .header__link--dropdown наслідує базові стилі від .header__link з navigation.css */
.header__link--dropdown:focus-visible {
color: var(--color-primary);
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* ===== СТРІЛКА-ІНДИКАТОР ===== */
.header__link-arrow {
display: inline-block;
margin-left: 4px;
font-size: 0.7em;
transition: transform 0.25s ease;
}
.header__link--dropdown[aria-expanded="true"] .header__link-arrow {
transform: rotate(180deg);
}
/* ===== DROPDOWN КОНТЕЙНЕР ===== */
.header__dropdown {
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(10px);
z-index: var(--z-dropdown);
min-width: 200px;
white-space: nowrap;
background: var(--color-white);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 10px;
display: none;
opacity: 0;
pointer-events: none;
visibility: hidden;
transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
visibility 0.25s;
}
/* Відкритий стан (через атрибут aria-hidden) */
.header__dropdown[aria-hidden="false"] {
display: block;
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
visibility: visible;
}
/* ===== СПИСОК ПУНКТІВ ===== */
.header__dropdown-list {
list-style: none;
margin: 0;
padding: 0;
}
.header__dropdown-list li {
list-style: none;
}
/* ===== ПОСИЛАННЯ В DROPDOWN ===== */
.header__dropdown-link {
display: flex;
align-items: center;
justify-content: center;
padding: calc(var(--menu-spacing-md) * 0.7);
color: var(--color-text);
text-decoration: none;
font-size: calc(18px * var(--menu-scale));
font-weight: 500;
border-radius: var(--radius-md);
transition: all var(--transition-fast);
white-space: nowrap;
touch-action: manipulation;
}
.header__dropdown-link:focus-visible {
color: var(--color-primary);
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.header__dropdown-link:hover {
background: var(--color-bg-secondary);
color: var(--color-primary);
text-decoration: none;
}
}
/* Premium пункт - опціональний спеціальний стиль */
/* Наразі стилі такі ж як для інших пунктів */
/* ===== АДАПТИВНІСТЬ - МОБІЛЬНІ ===== */
@media (width <= 767px) {
.header__dropdown-link {
/* Мінімальна висота для touch targets */
min-height: 40px;
padding: 8px 12px;
}
}
/* ===== iOS Safari ФІКСИ ===== */
@supports (-webkit-touch-callout: none) {
.header__dropdown {
-webkit-overflow-scrolling: touch;
}
/* iOS Safari: покращена видимість на мобільній при dropdown відкритому */
@media (width <= 767px) {
.header__dropdown[aria-hidden="false"] {
/* Гарантуємо що dropdown видимий над іншим контентом на iOS */
position: absolute;
z-index: 1002;
/* Коректна робота з high zoom level на iOS Safari */
-webkit-user-select: none;
user-select: none;
}
}
}
/* ===== МОБІЛЬНІ - FIX ДЛЯ OVERFLOW CLIPPING ===== */
/* Коли dropdown відкритий на мобільній, тимчасово вимикаємо overflow обрізання */
@media (width <= 767px) {
body.programs-dropdown-open .mobile-nav-container {
overflow: visible;
}
body.programs-dropdown-open .mobile-nav-container .header__nav {
overflow: visible;
}
body.programs-dropdown-open .mobile-nav-container .header__menu {
overflow: visible;
}
}
/* === css/components/burger-menu.css === */
/* ==========================================================================
Burger Menu - Мобільне меню (250 рядків)
========================================================================== */
/* ===== БУРГЕР-МЕНЮ ===== */
/* Бургер-меню (кнопка) */
.burger-menu {
z-index: 1001;
width: var(--menu-size-xl);
height: var(--menu-size-xl);
min-width: var(--menu-size-xl);
max-width: var(--menu-size-xl);
padding: 0;
background: var(--color-gray-light);
border-radius: var(--radius-pill);
display: none;
align-items: center;
justify-content: center;
flex-shrink: 0;
flex-grow: 0;
transition: all var(--transition-fast);
border: none;
cursor: pointer;
color: var(--color-text);
touch-action: manipulation;
box-shadow: none;
}
.burger-menu__icon {
display: flex;
flex-direction: column;
gap: calc(5px * var(--menu-scale));
width: calc(22px * var(--menu-scale));
height: calc(18px * var(--menu-scale));
justify-content: space-between;
position: relative;
}
.burger-menu__line {
width: 100%;
height: var(--menu-border-md);
background: var(--color-text);
border-radius: calc(2px * var(--menu-scale));
transition: all var(--transition-fast);
}
/* Анімація перетворення в X */
.burger-menu[aria-expanded="true"] .burger-menu__icon {
gap: 0;
}
.burger-menu[aria-expanded="true"] .burger-menu__line:nth-child(1) {
position: absolute;
top: 50%;
left: 50%;
width: calc(22px * var(--menu-scale));
transform: translate(-50%, -50%) rotate(45deg);
transform-origin: center;
}
.burger-menu[aria-expanded="true"] .burger-menu__line:nth-child(2) {
opacity: 0;
}
.burger-menu[aria-expanded="true"] .burger-menu__line:nth-child(3) {
position: absolute;
top: 50%;
left: 50%;
width: calc(22px * var(--menu-scale));
transform: translate(-50%, -50%) rotate(-45deg);
transform-origin: center;
}
/* Overlay */
.burger-menu__overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: var(--z-menu-overlay);
background: rgba(26, 26, 26, 0.3);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-normal), visibility var(--transition-normal);
}
.burger-menu__overlay[aria-hidden="false"] {
opacity: 1;
visibility: visible;
}
/* Dropdown меню */
.burger-menu__dropdown {
position: fixed;
top: 84px;
bottom: auto;
left: max(10px, env(safe-area-inset-left, 10px));
right: max(10px, env(safe-area-inset-right, 10px));
z-index: 1000;
background: var(--color-white);
border-radius: var(--radius);
padding: 10px;
display: none;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: transform var(--transition-normal),
opacity var(--transition-normal),
visibility var(--transition-normal);
max-height: 80vh;
overflow-y: auto;
box-sizing: border-box;
max-width: 100%;
scrollbar-width: none;
-ms-overflow-style: none;
transform: translateY(-12px);
-webkit-transform: translateY(-12px);
-webkit-overflow-scrolling: touch;
border: 1px solid var(--border);
}
.burger-menu__dropdown[aria-hidden="false"] {
display: block;
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateY(0);
-webkit-transform: translateY(0);
}
.burger-menu__dropdown::-webkit-scrollbar {
display: none;
}
.burger-menu__list {
list-style: none;
margin: 0;
padding: 0;
}
.burger-menu__link {
display: block;
padding: var(--menu-spacing-md);
color: var(--color-text);
text-decoration: none;
font-size: 1.125rem;
font-weight: 500;
border-radius: var(--radius-md);
transition: all var(--transition-fast);
text-align: center;
touch-action: manipulation;
}
.burger-menu__link:focus-visible {
color: var(--color-primary);
outline: 2px solid var(--color-primary);
}
@media (hover: hover) {
.burger-menu__link:hover {
background: var(--color-bg-secondary);
color: var(--color-primary);
text-decoration: none;
}
}
@media (width <= 760px) {
.header__burger.burger-menu {
display: inline-flex;
width: 44px;
height: 44px;
min-width: 44px;
max-width: 44px;
background: transparent;
}
}
/* Мобільна версія */
@media (width <= 767px) {
/* Бургер з'являється */
.mobile-nav-container .burger-menu {
display: flex;
width: var(--menu-size-xl);
height: auto;
min-width: 3.7rem;
max-width: 3.7rem;
min-height: 3.7rem;
max-height: 3.7rem;
padding: var(--menu-size-xs) 0;
position: static;
align-self: center;
flex-shrink: 0;
flex-grow: 0;
background: var(--color-white);
border: 1px solid var(--border);
box-sizing: border-box;
}
.burger-menu__dropdown {
bottom: max(70px, calc(70px + env(safe-area-inset-bottom, 0px)));
}
}
/* iOS Safari фікси */
@supports (-webkit-touch-callout: none) {
.burger-menu__dropdown {
max-height: 80dvh;
}
@media (width <= 767px) {
.burger-menu__dropdown {
bottom: max(70px, calc(70px + env(safe-area-inset-bottom, 0px)));
max-height: calc(100dvh - 70px - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px));
-webkit-overflow-scrolling: touch;
}
@supports (height: 100dvh) {
.burger-menu__dropdown {
max-height: calc(100dvh - 70px - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px));
}
}
}
}
/* === css/components/header-dynamic-form.css === */
/* ==========================================================================
Header Dynamic Form - Динамічна форма в хедері (200 рядків)
========================================================================== */
/* ===== ДИНАМІЧНА ФОРМА В ХЕДЕРІ ===== */
/* Базові стилі для динамічних елементів */
.header__dynamic-element {
transition: opacity 0.3s ease,
visibility 0.3s ease,
max-width 0.3s ease,
transform 0.3s ease;
}
/* Приховані елементи */
.header__dynamic-element:not(.header__dynamic-element--visible) {
opacity: 0;
visibility: hidden;
pointer-events: none;
max-width: 0;
overflow: hidden;
transform: scale(0.95);
display: none;
}
/* Видимі елементи */
.header__dynamic-element--visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
max-width: 100%;
transform: scale(1);
}
/* Специфічні display для різних типів елементів */
.header__dynamic-element--visible[data-header-running-line],
.header__dynamic-element--visible[data-header-success] {
display: flex;
}
.header__dynamic-element--visible[data-header-dynamic-form] {
display: flex;
}
/* Статична кнопка CTA замість бігучої строки */
.header__static-cta {
flex: 1 0 0;
min-width: 0;
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: transparent;
border: none;
cursor: pointer;
padding: 0.5rem 1rem;
transition: opacity 0.2s ease;
}
.header__static-cta:hover {
opacity: 0.85;
}
.header__static-cta-text {
font-size: calc(var(--menu-font-base) * 1.7);
font-weight: 600;
color: var(--color-text);
white-space: nowrap;
}
/* Десктоп: тільки текст з "безкоштовний" */
.header__static-cta-text--mobile {
display: inline;
}
.header__static-cta-text--desktop {
display: none;
}
@media (width >= 768px) {
.header__static-cta-text--mobile {
display: none;
}
.header__static-cta-text--desktop {
display: inline;
}
}
.header__static-cta-arrow {
flex-shrink: 0;
color: var(--color-primary);
}
/* Success повідомлення */
[data-header-success] {
flex: 1 0 0;
min-width: 0;
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 1rem;
font-size: calc(var(--menu-font-base) * 0.95);
font-weight: 500;
color: var(--color-success);
animation: success-pulse 0.5s ease-out forwards;
box-sizing: border-box;
}
@keyframes success-pulse {
0% {
opacity: 0;
transform: scale(0.9);
}
50% {
transform: scale(1.05);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* Expand button - больше не используется, кнопка теперь использует data-trial-modal-trigger */
/* Динамічна форма в хедері */
[data-header-dynamic-form] {
flex: 1 0 0;
min-width: 0;
max-width: 100%;
display: flex;
gap: var(--menu-spacing-xs);
align-items: center;
box-sizing: border-box;
}
[data-header-dynamic-form] .form-group {
flex: 1 0 0;
min-width: 0;
margin: 0;
position: relative;
padding-bottom: calc(1.5rem * var(--menu-scale));
}
[data-header-dynamic-form] .form-group__input {
min-height: var(--menu-size-lg);
padding: calc(0.875rem * var(--menu-scale)) calc(1rem * var(--menu-scale));
font-size: var(--menu-font-base);
border-radius: var(--menu-radius-md);
box-sizing: border-box;
}
[data-header-dynamic-form] .button--primary {
flex-shrink: 0;
min-height: var(--menu-size-lg);
padding: calc(0.875rem * var(--menu-scale)) calc(1.5rem * var(--menu-scale));
font-size: var(--menu-font-base);
border-radius: var(--menu-radius-md);
white-space: nowrap;
}
/* Стилі для помилок валідації в динамічній формі */
[data-header-dynamic-form] .form-error {
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-top: 0;
color: var(--color-error);
font-size: calc(var(--menu-font-sm) * 0.9);
line-height: 1.4;
background-color: transparent;
padding: 0;
white-space: nowrap;
overflow: visible;
text-overflow: ellipsis;
z-index: 10;
}
/* Стилі для поля з помилкою */
[data-header-dynamic-form] .form-group__input.field-error {
border-color: var(--color-error);
background-color: var(--color-white);
}
[data-header-dynamic-form] .form-group__input.field-error:focus {
border-color: var(--color-error);
box-shadow: 0 0 0 calc(4px * var(--menu-scale)) rgba(231, 30, 20, 0.2);
}
/* Мобільна версія */
@media (width <=767px) {
/* Мобільні стилі для динамічних елементів */
[data-header-dynamic] {
display: flex;
align-items: center;
gap: var(--menu-spacing-xs);
flex: 1 0 0;
min-width: 0;
max-height: 2.5rem;
width: 100%;
overflow: visible;
}
/* Статична кнопка CTA на мобільних */
.header__static-cta-text {
font-size: calc(var(--menu-font-sm) * 1.5);
}
.header__static-cta-arrow {
width: 1.5rem;
height: 1.5rem;
}
/* Форма на мобільних */
.header-wrapper [data-header-dynamic-form],
.header__dynamic-element--visible[data-header-dynamic-form] {
display: flex;
flex: 1 0 0;
gap: var(--menu-spacing-xs);
align-items: center;
min-width: 0;
}
[data-header-dynamic-form] .form-group {
flex: 1 0 0;
min-width: 0;
margin: 0;
position: relative;
padding-bottom: calc(1.5rem * var(--menu-scale));
}
[data-header-dynamic-form] .form-group__input {
min-height: var(--menu-size-lg);
padding: calc(0.875rem * var(--menu-scale)) calc(1rem * var(--menu-scale));
font-size: var(--menu-font-base);
border-radius: var(--menu-radius-md);
box-sizing: border-box;
}
[data-header-dynamic-form] .button--primary {
flex-shrink: 0;
min-height: var(--menu-size-lg);
padding: calc(0.875rem * var(--menu-scale)) calc(1.5rem * var(--menu-scale));
font-size: var(--menu-font-base);
border-radius: var(--menu-radius-md);
white-space: nowrap;
}
}
/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
.header__dynamic-element {
transition: none;
}
[data-header-running-line] .running-line__content {
animation: none;
}
[data-header-success] {
animation: none;
}
}
.header__static-cta {
flex: 0 0 auto;
background: var(--color-primary);
color: #fff;
border-radius: 999px;
padding: 0.75rem 1.15rem;
}
.header__static-cta-text {
font-size: 0.95rem;
color: #fff;
}
.header__static-cta-arrow {
color: #fff;
}
/* === css/components/ua-switch.css === */
.ua-switch {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 900;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 14px 10px 10px;
border: 1px solid rgba(255, 255, 255, 0.75);
border-radius: 16px;
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 8px 28px rgba(26, 26, 26, 0.08);
color: #1a1a1a;
text-decoration: none;
font-family: var(--font-body, Inter, sans-serif);
font-size: 0.95rem;
line-height: 1;
}
.ua-switch:hover {
background: rgba(255, 255, 255, 0.82);
color: #1a1a1a;
}
.ua-switch__flag {
width: 22px;
height: 16px;
border-radius: 3px;
overflow: hidden;
flex: none;
box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.08);
}
.ua-switch__flag span {
display: block;
height: 50%;
}
.ua-switch__flag span:first-child {
background: #0057b8;
}
.ua-switch__flag span:last-child {
background: #ffd700;
}
@media (max-width: 640px) {
.ua-switch {
right: 12px;
bottom: 12px;
padding: 8px 12px 8px 8px;
font-size: 0.875rem;
}
}
/* === css/components/ios-safe.css === */
/* Safe area insets для iOS */
:root {
--safe-area-top: env(safe-area-inset-top, 0px);
--safe-area-bottom: env(safe-area-inset-bottom, 0px);
--safe-area-left: env(safe-area-inset-left, 0px);
--safe-area-right: env(safe-area-inset-right, 0px);
}
/* === css/utilities/text.css === */
/* ==========================================================================
Text Utilities
========================================================================== */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }
.text-muted { color: var(--color-text-muted); }
/* Акцентний червоний колір (як у hero-section__price-accent) */
.text-accent {
display: inline-block;
color: var(--color-primary);
font-weight: 700;
background-color: var(--color-white);
padding: 0.25em 0.5em;
border-radius: var(--radius-md);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Альтернативний варіант без font-weight */
.text-accent-color {
color: var(--color-primary);
}
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* === css/utilities/layout.css === */
/* ==========================================================================
Layout Utilities
========================================================================== */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.flex-1 { flex: 1 0 0; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }
.grid { display: grid; }
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }
/* === css/utilities/spacing.css === */
/* ==========================================================================
Spacing Utilities
========================================================================== */
/* Margin utilities */
.m-0 { margin: 0; }
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }
.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.ml-0 { margin-left: 0; }
.ml-xs { margin-left: var(--spacing-xs); }
.ml-sm { margin-left: var(--spacing-sm); }
.ml-md { margin-left: var(--spacing-md); }
.ml-lg { margin-left: var(--spacing-lg); }
.ml-xl { margin-left: var(--spacing-xl); }
.mr-0 { margin-right: 0; }
.mr-xs { margin-right: var(--spacing-xs); }
.mr-sm { margin-right: var(--spacing-sm); }
.mr-md { margin-right: var(--spacing-md); }
.mr-lg { margin-right: var(--spacing-lg); }
.mr-xl { margin-right: var(--spacing-xl); }
/* Padding utilities */
.p-0 { padding: 0; }
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
.pt-0 { padding-top: 0; }
.pt-xs { padding-top: var(--spacing-xs); }
.pt-sm { padding-top: var(--spacing-sm); }
.pt-md { padding-top: var(--spacing-md); }
.pt-lg { padding-top: var(--spacing-lg); }
.pt-xl { padding-top: var(--spacing-xl); }
.pb-0 { padding-bottom: 0; }
.pb-xs { padding-bottom: var(--spacing-xs); }
.pb-sm { padding-bottom: var(--spacing-sm); }
.pb-md { padding-bottom: var(--spacing-md); }
.pb-lg { padding-bottom: var(--spacing-lg); }
.pb-xl { padding-bottom: var(--spacing-xl); }
.pl-0 { padding-left: 0; }
.pl-xs { padding-left: var(--spacing-xs); }
.pl-sm { padding-left: var(--spacing-sm); }
.pl-md { padding-left: var(--spacing-md); }
.pl-lg { padding-left: var(--spacing-lg); }
.pl-xl { padding-left: var(--spacing-xl); }
.pr-0 { padding-right: 0; }
.pr-xs { padding-right: var(--spacing-xs); }
.pr-sm { padding-right: var(--spacing-sm); }
.pr-md { padding-right: var(--spacing-md); }
.pr-lg { padding-right: var(--spacing-lg); }
.pr-xl { padding-right: var(--spacing-xl); }
/* === css/components/tab-slider.css === */
/* ==========================================================================
Tab Slider - Tab Slider Animation (171 рядків)
========================================================================== */
/* ===== TAB SLIDER ANIMATION ===== */
/* Слайдер позиціонується абсолютно відносно .header__nav */
.header__menu-slider {
position: absolute;
top: var(--menu-spacing-sm);
left: var(--menu-spacing-sm);
width: 0;
background: var(--color-primary);
border-radius: var(--radius-pill);
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 0.3s ease;
pointer-events: none;
z-index: 1;
opacity: 0;
}
/* Показуємо слайдер коли є активна кнопка */
.header__nav:has(.header__link--active) .header__menu-slider {
opacity: 1;
}
/* Active стан */
.header__link--active {
position: relative;
z-index: 2;
color: var(--color-white);
}
/* Desktop hover effects */
@media (hover: hover) and (pointer: fine) {
.header__link:hover {
position: relative;
z-index: 2;
}
/* Слайдер йде за курсором на desktop */
.header__nav .header__menu-slider {
will-change: transform, width;
}
}
/* Mobile optimizations */
@media (width <= 767px) {
.header__menu-slider {
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* На мобільних слайдер менше анімується */
.header__nav .header__menu-slider {
will-change: auto;
}
}
/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
.header__menu-slider {
transition: none;
}
}
/* High contrast mode */
@media (prefers-contrast: more) {
.header__menu-slider {
box-shadow: inset 0 0 0 2px var(--color-white);
}
}
/* Placeholder для майбутніх розширень */
/* .header__menu-slider--smooth { ... } */
/* === css/components/form.css === */
/* ==========================================================================
Form Component (BEM)
========================================================================== */
/* ==========================================================================
Autofill Detection Animations
========================================================================== */
/* Animation для детекції autofill (Chrome, Safari, Edge) */
@keyframes onAutoFillStart {
from { opacity: 0.99; }
to { opacity: 1; }
}
@keyframes onAutoFillCancel {
from { opacity: 1; }
to { opacity: 0.99; }
}
/* Тригер animation при autofill */
input:-webkit-autofill {
animation-name: onAutoFillStart;
animation-duration: 0.001s;
}
/* Тригер animation при скасуванні autofill */
input:not(:-webkit-autofill) {
animation-name: onAutoFillCancel;
animation-duration: 0.001s;
}
/* ==========================================================================
Form Groups
========================================================================== */
.form-group {
margin-bottom: var(--spacing-md);
}
.form-group label {
display: block;
margin-bottom: var(--spacing-xs);
font-weight: 500;
color: var(--color-white);
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: var(--input-padding);
border: var(--input-border-width) solid var(--input-border);
border-radius: var(--input-border-radius);
font-size: var(--input-font-size);
font-family: var(--font-family-base);
min-height: 44px;
background-color: var(--input-bg);
color: var(--color-black);
transition: var(--input-transition);
}
.form-group input::placeholder,
.form-group select::placeholder,
.form-group textarea::placeholder {
color: var(--input-placeholder-color);
opacity: 1;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 2px var(--color-primary-light);
}
/* Autofill стилі - посилені з !important для пріоритету над браузерними */
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus,
.form-group select:-webkit-autofill,
.form-group select:-webkit-autofill:hover,
.form-group select:-webkit-autofill:focus,
input[type="text"]:-webkit-autofill,
input[type="tel"]:-webkit-autofill,
input[type="email"]:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
-webkit-text-fill-color: var(--color-black) !important;
color: var(--color-black) !important;
font-family: inherit !important;
border-color: var(--input-border) !important;
transition: background-color 5000s ease-in-out 0s !important;
}
.form-group input.error,
.form-group select.error,
.form-group textarea.error {
border-color: var(--color-white);
background-color: var(--color-white);
}
/* Unified error class for all form fields */
.form-group input.field-error,
.form-group select.field-error,
.form-group textarea.field-error {
border-color: var(--color-error);
background-color: var(--color-white);
}
.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled {
opacity: 0.6;
cursor: not-allowed;
background-color: var(--color-bg-secondary);
}
.form-error {
display: block;
margin-top: var(--spacing-xs);
color: var(--color-error);
font-size: var(--font-size-sm);
}
.form-help {
display: block;
margin-top: var(--spacing-xs);
color: var(--color-white);
font-size: var(--font-size-sm);
}
/* Checkbox and Radio */
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
width: auto;
min-width: 44px;
min-height: 44px;
margin-right: var(--spacing-xs);
accent-color: var(--color-primary);
}
/* File input */
.form-group input[type="file"] {
padding: var(--spacing-xs);
min-height: 44px;
}
/* Textarea */
.form-group textarea {
min-height: 120px;
resize: vertical;
}
/* Hidden input fields */
.form-group__input--hidden {
display: none;
}
/* Honeypot поле - приховане від користувачів
Назва "contact_me_by_fax_only" - незвична щоб браузер НЕ автозаповнював
Multiple layers of hiding для різних браузерів */
.form-group--honeypot {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
overflow: hidden !important;
z-index: -1 !important;
}
.form-group__input--honeypot {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
z-index: -1 !important;
}
/* === css/components/modal.css === */
/* ==========================================================================
Modal Component (BEM)
========================================================================== */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-base), visibility var(--transition-base);
}
/* Десктоп - симетричний padding */
@media (width > 767px) {
.modal {
padding: var(--spacing-md);
}
}
.modal--active {
opacity: 1;
visibility: visible;
}
.modal__backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(0 0 0 / 0.5);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
z-index: var(--z-modal-backdrop);
}
.modal__content {
position: relative;
z-index: var(--z-modal);
width: 100%;
max-width: 600px;
max-height: fit-content;
overflow: hidden;
background: var(--paper-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: var(--spacing-lg);
transform: scale(0.95);
transition: transform var(--transition-base);
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.modal--active .modal__content {
transform: scale(1);
}
@media (width <= 767px) {
.modal {
padding-top: var(--spacing-md);
padding-bottom: var(--spacing-md);
padding-left: max(var(--spacing-md), env(safe-area-inset-left, 0px));
padding-right: max(var(--spacing-md), env(safe-area-inset-right, 0px));
display: flex;
align-items: center;
justify-content: center;
}
.modal__content {
width: 100%;
max-width: none;
max-height: fit-content;
overflow: hidden;
padding: var(--spacing-lg);
}
.modal__header {
position: relative;
margin-bottom: var(--spacing-sm);
}
.modal__header-content {
text-align: center;
width: calc(100% - 44px);
}
.modal__title {
font-size: var(--font-size-lg);
}
.modal__close {
min-width: 40px;
min-height: 40px;
font-size: var(--font-size-xl);
}
}
.modal__header {
position: relative;
margin-bottom: var(--spacing-md);
padding-bottom: 0;
border-bottom: none;
}
.modal__header-content {
text-align: center;
width: 100%;
padding-right: var(--spacing-lg);
}
.modal__title {
margin: 0;
font-size: var(--font-size-xl);
font-weight: 600;
color: var(--ink);
text-align: center;
}
.modal__subtitle {
margin: var(--spacing-xs) 0 0 0;
font-size: var(--font-size-sm);
font-weight: 400;
color: var(--ink-light);
text-align: center;
line-height: 1.4;
}
.modal__close {
position: absolute;
top: var(--spacing-lg);
right: var(--spacing-lg);
background: none;
border: none;
padding: var(--spacing-xs);
min-width: 44px;
min-height: 44px;
cursor: pointer;
color: var(--graphite-soft);
font-size: var(--font-size-2xl);
line-height: 1;
transition: color var(--transition-base);
touch-action: manipulation;
z-index: calc(var(--z-modal) + 1);
}
.modal__close:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.modal__close:hover {
color: var(--ink);
}
}
.modal__body {
overflow: visible;
margin-bottom: 0;
}
.modal__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--spacing-sm);
padding-top: var(--spacing-md);
border-top: 1px solid var(--color-border);
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.modal,
.modal__content {
transition: none;
}
}
/* === css/components/trial-form.css === */
/* Модальна форма на мобільних (використовує .modal з modal.css) */
.trial-form__modal {
/* Наслідує .modal з modal.css */
}
.trial-form__modal .modal__content {
background: var(--paper-card);
border: 1px solid var(--border);
}
.trial-form__modal .modal__title {
color: var(--ink);
}
/* Стилі для форми в модальному вікні (header-mobile) */
.trial-form__callback {
margin-top: 1.35rem;
padding-top: 1.15rem;
border-top: 1px solid var(--border);
}
.trial-form__callback-label {
margin: 0 0 0.9rem;
color: var(--ink);
font-size: 0.95rem;
font-weight: 600;
line-height: 1.4;
text-align: center;
}
.trial-form--header-mobile { display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.trial-form--header-mobile .form-group {
margin-bottom: 0;
}
.trial-form--header-mobile .form-group__input,
.trial-form--header-mobile input[type="text"],
.trial-form--header-mobile input[type="tel"],
.trial-form--header-mobile .form-group input {
padding: 0.75rem 1rem;
font-size: 1rem;
min-height: 44px;
width: 100%;
box-sizing: border-box;
background-color: var(--color-white);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--color-black);
transition: all 0.2s ease;
}
.trial-form--header-mobile .form-group input:focus,
.trial-form--header-mobile input[type="text"]:focus,
.trial-form--header-mobile input[type="tel"]:focus {
border-color: var(--color-white);
background-color: var(--color-white);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
outline: none;
}
.trial-form--header-mobile .form-group input::placeholder {
color: var(--input-placeholder-color);
opacity: 1;
}
/* Autofill стилі для header-mobile форми */
.trial-form--header-mobile .form-group__input:-webkit-autofill,
.trial-form--header-mobile input[type="text"]:-webkit-autofill,
.trial-form--header-mobile input[type="tel"]:-webkit-autofill,
.trial-form--header-mobile .form-group input:-webkit-autofill,
.trial-form--header-mobile .form-group__input:-webkit-autofill:hover,
.trial-form--header-mobile input[type="text"]:-webkit-autofill:hover,
.trial-form--header-mobile input[type="tel"]:-webkit-autofill:hover,
.trial-form--header-mobile .form-group input:-webkit-autofill:hover,
.trial-form--header-mobile .form-group__input:-webkit-autofill:focus,
.trial-form--header-mobile input[type="text"]:-webkit-autofill:focus,
.trial-form--header-mobile input[type="tel"]:-webkit-autofill:focus,
.trial-form--header-mobile .form-group input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px var(--color-white) inset !important;
-webkit-text-fill-color: var(--color-black) !important;
color: var(--color-black) !important;
font-family: inherit !important;
border-color: var(--color-white) !important;
transition: background-color 5000s ease-in-out 0s !important;
}
.trial-form--header-mobile .button--primary {
min-height: 44px;
padding: 0.75rem 1.5rem;
font-size: 0.9375rem;
margin-top: var(--spacing-xs);
width: 100%;
box-sizing: border-box;
}
/* Специфічні стилі для форми в хедері (десктоп) */
.trial-form--desktop .form-group {
margin-bottom: 0;
}
/* Повністю переписані стилі для Hero форми */
.trial-form--hero {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}
.trial-form--hero .form-group {
position: relative;
margin-bottom: 1rem;
display: flex;
flex-direction: column;
}
.trial-form--hero .form-group:last-of-type {
margin-bottom: 1.5rem;
}
.trial-form--hero .form-group input,
.trial-form--hero .form-group input[type="text"],
.trial-form--hero .form-group input[type="tel"],
.trial-form--hero .form-group input.form-group__input {
background-color: rgba(255, 255, 255, 0.75);
border: 2px solid rgba(255, 255, 255, 1);
border-radius: 0.5rem;
padding: 0.75rem 0.875rem;
font-size: 0.9375rem;
font-family: var(--font-family-base);
color: var(--color-black);
min-height: 48px;
width: 100%;
transition: all 0.2s ease;
box-sizing: border-box;
}
.trial-form--hero .form-group input:hover {
border-color: rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 0.8);
}
.trial-form--hero .form-group input:focus,
.trial-form--hero .form-group input[type="text"]:focus,
.trial-form--hero .form-group input[type="tel"]:focus,
.trial-form--hero .form-group input.form-group__input:focus {
border-color: rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
outline: none;
}
.trial-form--hero .form-group input::placeholder {
color: var(--input-placeholder-color);
opacity: 1;
}
/* Autofill стилі для hero форми */
.trial-form--hero .form-group input:-webkit-autofill,
.trial-form--hero .form-group input[type="text"]:-webkit-autofill,
.trial-form--hero .form-group input[type="tel"]:-webkit-autofill,
.trial-form--hero .form-group input.form-group__input:-webkit-autofill,
.trial-form--hero .form-group input:-webkit-autofill:hover,
.trial-form--hero .form-group input[type="text"]:-webkit-autofill:hover,
.trial-form--hero .form-group input[type="tel"]:-webkit-autofill:hover,
.trial-form--hero .form-group input.form-group__input:-webkit-autofill:hover,
.trial-form--hero .form-group input:-webkit-autofill:focus,
.trial-form--hero .form-group input[type="text"]:-webkit-autofill:focus,
.trial-form--hero .form-group input[type="tel"]:-webkit-autofill:focus,
.trial-form--hero .form-group input.form-group__input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.9) inset !important;
-webkit-text-fill-color: var(--color-black) !important;
color: var(--color-black) !important;
font-family: inherit !important;
border-color: rgba(255, 255, 255, 0.5) !important;
transition: background-color 5000s ease-in-out 0s !important;
}
.trial-form--hero .button {
min-height: 48px;
font-weight: 700;
font-size: 0.9375rem;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 0.5rem;
padding: 0.75rem 1.5rem;
box-shadow: 0 4px 12px rgba(231, 30, 20, 0.3);
transition: all 0.2s ease;
display: block;
box-sizing: border-box;
}
@media (hover: hover) and (pointer: fine) {
.trial-form--hero .button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(231, 30, 20, 0.4);
}
}
.trial-form--hero .form-error {
display: block;
margin-top: var(--spacing-xs);
color: var(--color-error);
font-size: var(--font-size-sm);
font-weight: 500;
position: relative;
z-index: 1;
}
/* ===== VARIANT: adults-advantages (форма в блоці переваг дорослих) ===== */
.trial-form--adults-advantages {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}
.trial-form--adults-advantages .form-group {
position: relative;
margin-bottom: 1rem;
display: flex;
flex-direction: column;
}
.trial-form--adults-advantages .form-group:last-of-type {
margin-bottom: 1.75rem;
}
.trial-form--adults-advantages .form-group input,
.trial-form--adults-advantages .form-group input[type="text"],
.trial-form--adults-advantages .form-group input[type="tel"],
.trial-form--adults-advantages .form-group input.form-group__input {
background-color: rgba(255, 255, 255, 0.75);
border: 2px solid rgba(255, 255, 255, 1);
border-radius: 0.5rem;
padding: 0.875rem 1rem;
font-size: 1rem;
font-family: var(--font-family-base);
color: var(--color-black);
min-height: 52px;
width: 100%;
transition: all 0.2s ease;
box-sizing: border-box;
}
.trial-form--adults-advantages .form-group input:hover {
border-color: rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 0.8);
}
.trial-form--adults-advantages .form-group input:focus,
.trial-form--adults-advantages .form-group input[type="text"]:focus,
.trial-form--adults-advantages .form-group input[type="tel"]:focus,
.trial-form--adults-advantages .form-group input.form-group__input:focus {
border-color: rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
outline: none;
}
.trial-form--adults-advantages .form-group input::placeholder {
color: var(--input-placeholder-color);
opacity: 1;
}
/* Autofill стилі для adults-advantages форми */
.trial-form--adults-advantages .form-group input:-webkit-autofill,
.trial-form--adults-advantages .form-group input[type="text"]:-webkit-autofill,
.trial-form--adults-advantages .form-group input[type="tel"]:-webkit-autofill,
.trial-form--adults-advantages .form-group input.form-group__input:-webkit-autofill,
.trial-form--adults-advantages .form-group input:-webkit-autofill:hover,
.trial-form--adults-advantages .form-group input[type="text"]:-webkit-autofill:hover,
.trial-form--adults-advantages .form-group input[type="tel"]:-webkit-autofill:hover,
.trial-form--adults-advantages .form-group input.form-group__input:-webkit-autofill:hover,
.trial-form--adults-advantages .form-group input:-webkit-autofill:focus,
.trial-form--adults-advantages .form-group input[type="text"]:-webkit-autofill:focus,
.trial-form--adults-advantages .form-group input[type="tel"]:-webkit-autofill:focus,
.trial-form--adults-advantages .form-group input.form-group__input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.9) inset !important;
-webkit-text-fill-color: var(--color-black) !important;
color: var(--color-black) !important;
font-family: inherit !important;
border-color: rgba(255, 255, 255, 0.5) !important;
transition: background-color 5000s ease-in-out 0s !important;
}
.trial-form--adults-advantages .button {
min-height: 52px;
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 0.5rem;
padding: 0.875rem 2rem;
box-shadow: 0 4px 12px rgba(231, 30, 20, 0.3);
transition: all 0.2s ease;
display: block;
box-sizing: border-box;
}
@media (hover: hover) and (pointer: fine) {
.trial-form--adults-advantages .button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(231, 30, 20, 0.4);
}
}
/* Помилки валідації для adults-advantages форми */
.trial-form--adults-advantages .form-error {
display: block;
margin-top: var(--spacing-xs);
color: var(--color-error);
font-size: var(--font-size-sm);
font-weight: 500;
position: relative;
z-index: 1;
}
/* Мобільна оптимізація adults-advantages форми */
@media (width <= 767px) {
.trial-form--adults-advantages {
width: 100%;
max-width: 100%;
}
.trial-form--adults-advantages .form-group {
margin-bottom: clamp(0.75rem, 2vw, 1rem);
}
.trial-form--adults-advantages .form-group:last-of-type {
margin-bottom: clamp(1rem, 3vw, 1.5rem);
}
.trial-form--adults-advantages .form-group input,
.trial-form--adults-advantages .form-group input[type="text"],
.trial-form--adults-advantages .form-group input[type="tel"],
.trial-form--adults-advantages .form-group input.form-group__input {
padding: clamp(0.75rem, 2vw, 0.875rem) clamp(0.875rem, 3vw, 1rem);
font-size: clamp(0.9375rem, 3vw, 1rem);
min-height: clamp(48px, 12vw, 52px);
}
.trial-form--adults-advantages .button {
min-height: clamp(48px, 12vw, 52px);
font-size: clamp(0.875rem, 3vw, 1rem);
padding: clamp(0.75rem, 2vw, 0.875rem) clamp(1.5rem, 5vw, 2rem);
width: 100%;
display: block;
box-sizing: border-box;
}
.trial-form--adults-advantages .form-error {
font-size: clamp(0.875rem, 3vw, 1rem);
padding-left: clamp(0.875rem, 3vw, 1rem);
}
}
/* Мобільна оптимізація hero форми */
@media (width <= 767px) {
.trial-form--hero {
width: 100%;
max-width: 100%;
}
.trial-form--hero .form-group {
margin-bottom: clamp(0.75rem, 2vw, 1rem);
}
.trial-form--hero .form-group:last-of-type {
margin-bottom: clamp(1rem, 3vw, 1.5rem);
}
.trial-form--hero .form-group input,
.trial-form--hero .form-group input[type="text"],
.trial-form--hero .form-group input[type="tel"],
.trial-form--hero .form-group input.form-group__input {
/* Адаптивні розміри для мобільних */
padding: clamp(0.75rem, 2vw, 0.875rem) clamp(0.875rem, 3vw, 1rem);
font-size: clamp(0.9375rem, 3vw, 1rem); /* 15-16px */
min-height: clamp(48px, 12vw, 52px);
}
.trial-form--hero .button {
/* Адаптивні розміри кнопки */
min-height: clamp(48px, 12vw, 52px);
font-size: clamp(0.875rem, 3vw, 1rem);
padding: clamp(0.75rem, 2vw, 0.875rem) clamp(1.5rem, 5vw, 2rem);
width: 100%;
/* Переконаємося, що кнопка завжди видима */
display: block;
box-sizing: border-box;
}
.trial-form--hero .form-error {
font-size: clamp(0.875rem, 3vw, 1rem);
padding-left: clamp(0.875rem, 3vw, 1rem);
}
/* Мобільна оптимізація header-mobile форми */
.trial-form--header-mobile .form-group input,
.trial-form--header-mobile input[type="text"],
.trial-form--header-mobile input[type="tel"] {
padding: 0.625rem 0.875rem;
font-size: 1rem;
min-height: 40px;
}
.trial-form--header-mobile .button--primary {
min-height: 40px;
padding: 0.625rem 1.25rem;
font-size: 0.875rem;
}
}
.modal.trial-form__modal .modal__title {
color: var(--ink);
}
.modal.trial-form__modal .modal__close {
color: var(--graphite-soft);
}
/* === css/components/contact-block.css === */
/* ==========================================================================
Contact Block - Швидкий контакт з телефоном і месенджерами
========================================================================== */
.contact-block {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
width: 100%;
margin-bottom: var(--spacing-sm);
}
/* Заголовок блоку - приховане або видалене */
.contact-block__title {
display: none;
}
/* Секція телефону */
.contact-block__phone-section {
padding: 0;
}
.contact-block__phone-label {
margin: 0;
font-size: var(--font-size-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ink);
}
/* Блок з номером і кнопкою */
.contact-block__phone-block {
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.contact-block__phone-link {
flex: 1;
display: flex;
align-items: center;
text-decoration: none;
color: inherit;
cursor: pointer;
transition: all var(--transition-base);
border-radius: var(--radius-sm);
padding: var(--spacing-xs);
margin: calc(var(--spacing-xs) * -1);
}
.contact-block__phone-link:hover {
opacity: 0.8;
background-color: var(--paper);
}
.contact-block__phone-link:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.contact-block__phone-link:active {
opacity: 0.6;
}
.contact-block__phone-text {
flex: 1;
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--ink);
letter-spacing: 0.5px;
}
.contact-block__email-link {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--ink);
word-break: break-all;
}
/* Кнопка копіювання */
.contact-block__copy-btn {
background: var(--color-primary);
color: var(--color-white);
border: none;
padding: var(--spacing-xs) var(--spacing-md);
border-radius: var(--radius-sm);
cursor: pointer;
display: flex;
align-items: center;
gap: var(--spacing-xs);
font-size: var(--font-size-sm);
font-weight: 600;
font-family: inherit;
transition: all var(--transition-base);
flex-shrink: 0;
min-height: 44px;
white-space: nowrap;
}
.contact-block__copy-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(231, 30, 20, 0.25);
}
.contact-block__copy-btn:active {
transform: scale(0.98);
}
.contact-block__copy-btn.copied {
background: #10b981;
}
.contact-block__copy-btn svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.contact-block__copy-text {
display: inline;
}
/* Секція месенджерів */
.contact-block__social-section {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.contact-block__social-title {
margin: 0;
font-size: var(--font-size-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ink);
}
.contact-block__social-buttons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-xs);
}
/* Кнопка месенджера */
.contact-block__social-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--spacing-xs);
padding: var(--spacing-xs);
background: transparent;
border: none;
cursor: pointer;
text-decoration: none;
color: var(--ink);
transition: all var(--transition-base);
font-size: var(--font-size-sm);
font-weight: 600;
font-family: inherit;
}
.contact-block__social-btn:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.contact-block__social-btn svg {
width: 28px;
height: 28px;
transition: transform var(--transition-base);
}
/* Варіанти мессенджерів */
.contact-block__social-btn--telegram {
color: var(--ink);
}
.contact-block__social-btn--telegram:hover {
opacity: 0.8;
transform: translateY(-2px);
}
.contact-block__social-btn--instagram {
color: var(--ink);
}
.contact-block__social-btn--instagram:hover {
opacity: 0.8;
transform: translateY(-2px);
}
.contact-block__social-btn--facebook {
color: var(--ink);
}
.contact-block__social-btn--facebook:hover {
opacity: 0.8;
transform: translateY(-2px);
}
@media (hover: hover) and (pointer: fine) {
.contact-block__social-btn:hover svg {
transform: scale(1.1);
}
}
.contact-block__social-btn:active {
transform: translateY(0) scale(1);
}
.contact-block__social-btn:active svg {
transform: scale(1);
}
/* Мобільна версія */
@media (width <= 767px) {
.contact-block {
gap: var(--spacing-xs);
margin-bottom: var(--spacing-xs);
}
.contact-block__phone-section {
padding: 0;
}
.contact-block__phone-block {
flex-wrap: nowrap;
gap: var(--spacing-xs);
}
.contact-block__phone-text {
flex: 1 1 auto;
min-width: 0;
font-size: var(--font-size-base);
text-align: left;
}
.contact-block__copy-btn {
min-height: 40px;
padding: var(--spacing-xs) var(--spacing-sm);
font-size: var(--font-size-sm);
}
.contact-block__social-buttons {
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-xs);
}
.contact-block__social-btn {
padding: var(--spacing-xs);
}
.contact-block__social-btn svg {
width: 24px;
height: 24px;
}
.contact-block__copy-text {
display: none;
}
.contact-block__social-btn span {
font-size: 0.75rem;
text-align: center;
}
}
/* === css/components/message.css === */
/* ==========================================================================
Message Component (BEM) - Toast notifications
========================================================================== */
.message {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-md);
margin-bottom: var(--spacing-sm);
border-radius: var(--radius-md);
background-color: var(--color-bg-secondary);
border-left: 4px solid var(--color-primary);
animation: slide-in var(--transition-base);
}
.message--success {
border-left-color: var(--color-success);
background-color: rgb(40 167 69 / 0.1);
}
.message--error {
border-left-color: var(--color-error);
background-color: rgb(220 53 69 / 0.1);
}
.message--warning {
border-left-color: var(--color-warning);
background-color: rgb(255 193 7 / 0.1);
}
.message--info {
border-left-color: var(--color-info);
background-color: rgb(23 162 184 / 0.1);
}
.message__text {
flex: 1 0 0;
margin: 0;
color: var(--color-white);
font-size: var(--font-size-base);
}
.message__close {
background: none;
border: none;
padding: var(--spacing-xs);
min-width: 44px;
min-height: 44px;
margin-left: var(--spacing-sm);
cursor: pointer;
color: var(--color-white);
font-size: var(--font-size-xl);
line-height: 1;
transition: color var(--transition-base);
touch-action: manipulation;
}
.message__close:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.message__close:hover {
color: var(--color-white);
}
}
@keyframes slide-in {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.message {
animation: none;
}
}
/* === css/components/footer.css === */
/* ==========================================================================
Footer Component (BEM)
========================================================================== */
.footer {
width: 100%;
margin-top: var(--section-spacing-desktop);
padding-top: var(--section-padding-desktop);
padding-bottom: calc(var(--nav-height, 70px) + var(--section-spacing-desktop) + env(safe-area-inset-bottom, 0px));
box-sizing: border-box;
background-color: var(--color-white);
border-top: 1px solid var(--border);
color: var(--graphite-soft);
position: relative;
z-index: 100;
}
.footer__container {
width: 100%;
max-width: var(--content-max-width);
margin: 0 auto;
padding-left: var(--spacing-md);
padding-right: var(--spacing-md);
box-sizing: border-box;
}
.footer__content {
display: flex;
flex-direction: row;
gap: clamp(var(--spacing-md), 4vw, var(--spacing-xxl));
align-items: flex-start;
text-align: left;
margin-bottom: var(--spacing-sm);
}
/* ========== БРЕНД СЕКЦІЯ (Лівий стовпчик) ========== */
.footer__brand-section {
display: flex;
flex-direction: column;
gap: 15px;
flex: 0 0 30%;
min-width: 0;
}
.footer__brand {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.footer__logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
transition: opacity var(--transition-fast);
flex-shrink: 0;
}
.footer__logo:hover {
opacity: 0.85;
}
.footer__logo:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.footer__logo-image {
max-width: 131px;
height: auto;
max-height: 60px;
display: block;
object-fit: contain;
}
.footer__tagline {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
line-height: 1.5;
margin: 0;
padding: 0;
}
/* Соціальні мережі */
.footer__social {
display: flex;
gap: var(--spacing-sm);
align-items: center;
flex-wrap: wrap;
}
.footer__social-link {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-md);
background: var(--color-white);
border: 1px solid var(--border);
color: var(--ink);
text-decoration: none;
transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
touch-action: manipulation;
}
.footer__social-link:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.footer__social-link:hover {
background: var(--ink);
border-color: var(--ink);
color: var(--color-white);
}
}
/* Договори */
.footer__contracts {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}
.footer__contract-link {
color: var(--graphite-soft);
text-decoration: none;
font-size: var(--font-size-sm);
font-weight: 400;
padding: 0;
border: none;
background: transparent;
transition: color var(--transition-fast);
touch-action: manipulation;
display: inline;
}
.footer__contract-link:hover {
color: var(--ink);
}
.footer__contract-link:focus-visible {
color: var(--ink);
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.footer__contract-link:hover {
color: var(--ink);
}
}
/* ========== НАВІГАЦІЯ СЕКЦІЯ (Центральний стовпчик) ========== */
.footer__nav-section {
display: flex;
flex: 1 0 0;
min-width: 0;
}
.footer__nav-list {
display: flex;
flex-direction: column;
gap: 10px;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.footer__nav-item {
margin: 0;
}
.footer__nav-link {
color: var(--graphite-soft);
text-decoration: none;
font-size: var(--font-size-base);
font-weight: 400;
padding: 4px 0;
border-radius: var(--radius-sm);
transition: color var(--transition-fast);
touch-action: manipulation;
display: block;
line-height: 1.5;
}
.footer__nav-link:hover {
color: var(--ink);
}
.footer__nav-link:focus-visible {
color: var(--ink);
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.footer__nav-link:hover {
color: var(--ink);
}
}
/* ========== ПРОГРАМИ СЕКЦІЯ (Правий стовпчик) ========== */
.footer__programs-section {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
flex: 0 0 30%;
min-width: 0;
}
.footer__programs-title {
font-family: var(--font-body);
color: var(--color-text-muted);
font-size: var(--font-size-sm);
font-weight: 400;
line-height: 1.5;
margin: 0;
padding: 0;
display: none;
}
.footer__programs-toggle {
display: none;
background: transparent;
border: none;
color: var(--ink);
cursor: pointer;
padding: 0;
font-size: var(--font-size-base);
font-weight: 500;
align-items: center;
gap: var(--spacing-xs);
transition: color var(--transition-fast);
touch-action: manipulation;
text-align: left;
}
.footer__programs-toggle:hover {
color: var(--ink);
}
.footer__programs-toggle:focus-visible {
color: var(--ink);
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.footer__programs-toggle-text {
display: block;
}
.footer__programs-toggle-icon {
display: inline-block;
transition: transform var(--transition-fast);
}
.footer__programs-list {
display: flex;
flex-direction: column;
gap: 10px;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.footer__programs-item {
margin: 0;
}
.footer__programs-link {
color: var(--graphite-soft);
text-decoration: none;
font-size: var(--font-size-base);
font-weight: 400;
padding: 4px 0;
border-radius: var(--radius-sm);
transition: color var(--transition-fast);
touch-action: manipulation;
display: block;
line-height: 1.5;
}
.footer__programs-link:hover {
color: var(--ink);
}
.footer__programs-link:focus-visible {
color: var(--ink);
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* ========== НИЖНІЙ БЛОК (Копірайт) ========== */
.footer__bottom {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding-top: var(--spacing-md);
border-top: 1px solid var(--border);
flex-basis: 100%;
}
.footer__copyright {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--spacing-sm);
text-align: center;
}
.footer__copyright-text {
margin: 0;
padding: 0;
}
/* ========== ДЕСКТОПНА ВЕРСІЯ (≥768px) ========== */
@media (width >= 768px) {
.footer {
margin-top: var(--section-spacing-desktop);
padding-top: var(--section-padding-desktop);
}
.footer__content {
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
text-align: left;
gap: var(--spacing-xl);
}
.footer__brand-section {
flex: 0 0 30%;
}
.footer__nav-section {
flex: 0 0 30%;
}
.footer__programs-section {
flex: 0 0 30%;
}
.footer__programs-title {
display: block;
}
.footer__programs-toggle {
display: none;
}
.footer__programs-list {
opacity: 1;
visibility: visible;
max-height: none;
}
}
/* ========== МОБІЛЬНА ВЕРСІЯ (≤767px) ========== */
@media (width <= 767px) {
.footer {
margin-top: var(--section-spacing-mobile);
padding-top: calc(var(--section-padding-mobile) + 20px);
padding-bottom: calc(var(--nav-height, 70px) + var(--section-spacing-mobile) + env(safe-area-inset-bottom, 0px));
}
.footer__content {
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--spacing-sm);
}
.footer__brand-section {
flex: 0 0 auto;
width: 100%;
align-items: center;
}
.footer__brand {
align-items: center;
}
.footer__social {
justify-content: center;
width: 100%;
}
.footer__contracts {
width: 100%;
gap: 6px;
}
.footer__contract-link {
display: inline;
width: auto;
}
.footer__nav-section {
flex: 0 0 auto;
width: 100%;
}
.footer__nav-list {
gap: var(--spacing-xs);
}
.footer__nav-link {
text-align: center;
width: 100%;
padding: 6px 0;
}
.footer__programs-section {
flex: 0 0 auto;
width: 100%;
}
.footer__programs-title {
display: none;
}
.footer__programs-toggle {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border: none;
border-radius: var(--radius-sm);
background: transparent;
}
.footer__programs-toggle:hover,
.footer__programs-toggle:focus-visible {
background: transparent;
}
.footer__programs-toggle-icon {
transition: transform var(--transition-fast);
}
/* Акордеон закритий за замовчуванням */
.footer__programs-list {
max-height: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
transition: max-height var(--transition-fast), opacity var(--transition-fast), visibility var(--transition-fast);
gap: 0;
}
/* Акордеон розкритий */
.footer__programs-list--expanded {
max-height: 500px;
opacity: 1;
visibility: visible;
gap: var(--spacing-xs);
margin-top: var(--spacing-sm);
}
/* Повертаємо іконку */
.footer__programs-section[data-expanded="true"] .footer__programs-toggle-icon {
transform: rotate(180deg);
}
.footer__programs-link {
text-align: center;
width: 100%;
padding: 6px 0;
}
.footer__bottom {
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer__copyright {
gap: var(--spacing-sm);
}
}
.footer {
margin-top: 3rem;
padding-top: 1.75rem;
padding-bottom: 1.5rem;
}
.footer__content {
margin-bottom: 0;
}
.footer__brand-section {
flex: 1 1 auto;
width: 100%;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem 2rem;
}
.footer__brand {
flex-direction: row;
align-items: center;
gap: 0.85rem;
}
.footer__logo-image {
max-width: 148px;
max-height: 48px;
}
.footer__contracts {
flex-direction: row;
flex-wrap: wrap;
width: auto;
gap: 0.5rem 1.25rem;
}
.footer__bottom {
margin-top: 1.15rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
text-align: center;
}
/* === css/utilities/carousel.css === */
/* ==========================================================================
Carousel Utilities - Базові стилі для всіх каруселей
========================================================================== */
.carousel-container {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
/* Touch-friendly: дозволяємо обидва напрямки скролу для коректної роботи на iOS Safari */
touch-action: pan-x pan-y;
}
.carousel-container::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
.carousel-item {
flex: 0 0 auto;
scroll-snap-align: center;
scroll-snap-stop: always;
min-width: 0; /* Критично: дозволяє flex елементам стискатися */
}
/* Accessibility */
.carousel-container:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Disabled state для кнопок */
.carousel-button:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* === css/utilities/counter-animation.css === */
/* ==========================================================================
Counter Animation - CSS Native Animation + JS Fallback
Оптимізація: замість JavaScript reflows, використовуємо CSS @property
========================================================================== */
/* CSS Counter Property вимкнено - використовується JavaScript анімація */
/* JavaScript тепер повністю керує форматуванням чисел та суфіксів */
@supports (counter-reset: name var(--value)) {
/* Вимикаємо CSS counter та псевдоелементи, щоб уникнути конфліктів з JS */
.achievement-card__number::before {
content: none;
}
.achievement-card__number::after {
content: none;
}
}
/* Fallback для браузерів без @property підтримки */
@supports not (counter-reset: name var(--value)) {
/* Використовується JS анімація (оригінальна реалізація) */
.achievement-card__number {
font-variant-numeric: tabular-nums; /* Стабілізувати ширину цифр */
}
}
/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
@supports (counter-reset: name var(--value)) {
.achievement-card.animating .achievement-card__number {
animation: none;
--achievement-counter: var(--achievement-target);
}
}
}
/* High contrast mode */
@media (prefers-contrast: more) {
.achievement-card__number {
font-weight: 700;
text-shadow: 0 0 0 1px currentColor;
}
}