/* ============================================================
bundle.css — авто-сгенерированный файл.
Полный CSS сайта. Загружается асинхронно через media-trick.
Дублирует critical.css в части стилей первого экрана — это OK:
правила идентичны, повторное применение не вызывает relayout.
НЕ редактируй вручную. Пересборка: npm run css:bundle
============================================================ */
/* === styles/01-tokens.css === */
:root {
/* Brand */
--pp-red-rgb: 228 27 74;
--pp-red: rgb(var(--pp-red-rgb)); /* #e41b4a */
--pp-red-600: #b00012;
--pp-red-400: #f05070;
--pp-red-50: #fef2f4;
--pp-yellow: #fff200;
--pp-green: #00a651;
--pp-blue: #1f2e5f;
--pp-cyan: #1ec0d2;
--pp-magenta: #e30c89;
--pp-black: #0b0b0c;
/* Neutrals */
--gray-900-rgb: 15 23 42;
--gray-900: rgb(var(--gray-900-rgb));
--gray-700: #374151;
--gray-500: #6b7280;
--gray-300: #d1d5db;
--gray-200: #e5e7eb;
--gray-100: #f1f5f9;
--gray-50: #f8fafc;
--white: #fff;
/* Semantic */
--color-bg: var(--gray-50);
--color-bg-alt: var(--white);
--color-surface: var(--white);
--color-surface-alt: var(--gray-100);
--color-text: var(--gray-900);
--color-text-muted: var(--gray-700);
--color-text-subtle: var(--gray-500);
--color-border: rgb(var(--gray-900-rgb) / 8%);
--color-border-strong: rgb(var(--gray-900-rgb) / 14%);
--color-brand: var(--pp-red);
--color-brand-hover: var(--pp-red-600);
--color-brand-soft: var(--pp-red-50);
--color-brand-ring: rgb(var(--pp-red-rgb) / 25%);
--color-danger: #dc2626;
--color-success: var(--pp-green);
--color-warning: #d97706;
}
:root {
--font-display: 'Cormorant Garamond', georgia, serif;
--font-body: 'Onest', system-ui, -apple-system, segoe ui, roboto, sans-serif;
--font-ui: 'DM Sans', var(--font-body);
--fw-400: 400;
--fw-500: 500;
--fw-600: 600;
--fw-700: 700;
--fw-800: 800;
--fw-900: 900;
/* Размеры (rem от 16px root) */
--fs-2xs: 0.6875rem; /* 11 */
--fs-xxs: 0.625rem; /* 10 */
--fs-xs-plus: 0.7188rem; /* 11.5 */
--fs-ui-md: 1.0625rem; /* 17 */
--fs-hero-stat: 4.5rem; /* 72 */
--fs-display-sm: 1.625rem; /* 26 */
--fs-display-md: 1.875rem; /* 30 */
--fs-icon-lg: 1.75rem; /* 28 */
--fs-xs: 0.75rem; /* 12 */
--fs-sm: 0.8125rem; /* 13 */
--fs-md: 0.875rem; /* 14 */
--fs-base: 0.9375rem; /* 15 */
--fs-lg: 1rem; /* 16 */
--fs-xl: 1.125rem; /* 18 */
--fs-2xl: 1.25rem; /* 20 */
--fs-3xl: 1.375rem; /* 22 */
--fs-4xl: clamp(1.6rem, 2.4vw + 1rem, 2.25rem);
--fs-5xl: clamp(2rem, 3vw + 1rem, 3rem);
/* Line-heights */
--lh-tight: 1.15;
--lh-snug: 1.3;
--lh-normal: 1.5;
--lh-loose: 1.7;
/* Letter-spacing */
--ls-tight: -0.02em;
--ls-normal: 0;
--ls-wide: 0.04em;
}
:root {
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
}
:root {
--radius-xs: 6px;
--radius-sm: 10px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 22px;
--radius-2xl: 28px;
--radius-full: 999px;
}
:root {
--shadow-xs: 0 1px 2px rgb(var(--gray-900-rgb) / 6%);
--shadow-sm: 0 2px 6px rgb(var(--gray-900-rgb) / 8%);
--shadow-md: 0 8px 24px rgb(var(--gray-900-rgb) / 10%);
--shadow-lg: 0 18px 55px rgb(var(--gray-900-rgb) / 14%);
--shadow-xl: 0 24px 80px rgb(var(--gray-900-rgb) / 20%);
--ring-brand: 0 0 0 4px rgb(var(--pp-red-rgb) / 16%);
--ring-focus: 0 0 0 3px rgb(var(--pp-red-rgb) / 40%);
--ring-danger: 0 0 0 3px rgb(220 38 38 / 30%);
}
:root {
--z-below: 0;
--z-base: 1;
--z-elevated: 2;
--z-sticky: 20;
--z-float: 50;
--z-drawer: 60;
--z-fab: 70;
--z-dropdown: 30;
--z-overlay: 90;
--z-modal: 100;
--z-toast: 110;
--z-tooltip: 120;
--z-overlay-high: 999;
--z-skip: 1000;
--z-max: 9999;
}
:root {
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--dur-0: 0ms;
--dur-1: 120ms;
--dur-2: 180ms;
--dur-3: 250ms;
--dur-4: 400ms;
--dur-5: 600ms;
--dur-6: 350ms;
--t-fast: var(--dur-1) var(--ease-out);
--t-normal: var(--dur-2) var(--ease-out);
--t-slow: var(--dur-3) var(--ease-out);
--t-ui: var(--dur-6) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
:root {
--dur-1: 0ms;
--dur-2: 0ms;
--dur-3: 0ms;
--dur-4: 0ms;
--dur-5: 0ms;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
:root[data-theme='dark'] {
--color-bg: #0b0b0c;
--color-surface: #17171a;
--color-surface-alt: #1f1f23;
--color-text: #f5f5f7;
--color-text-muted: #c7c7cc;
--color-text-subtle: #8e8e93;
--color-border: rgb(255 255 255 / 8%);
--color-border-strong: rgb(255 255 255 / 14%);
--color-brand-soft: rgb(var(--pp-red-rgb) / 15%);
--shadow-sm: 0 2px 6px rgb(0 0 0 / 40%);
--shadow-md: 0 10px 28px rgb(0 0 0 / 45%);
--shadow-lg: 0 24px 70px rgb(0 0 0 / 55%);
}
/* === assets/faq-fonts.css === */
/* cyrillic-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("./assets/fonts/faq/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtFmSqn7B6DxjY.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("./assets/fonts/faq/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtMmSqn7B6DxjY.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("./assets/fonts/faq/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtHmSqn7B6DxjY.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("./assets/fonts/faq/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtGmSqn7B6DxjY.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("./assets/fonts/faq/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSqn7B6D.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("./assets/fonts/faq/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtFmSqn7B6DxjY.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("./assets/fonts/faq/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtMmSqn7B6DxjY.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("./assets/fonts/faq/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtHmSqn7B6DxjY.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("./assets/fonts/faq/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtGmSqn7B6DxjY.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("./assets/fonts/faq/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSqn7B6D.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("./assets/fonts/faq/rP2Wp2ywxg089UriCZaSExd86J3t9jz86MvyyKK58UfivUw4aw.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("./assets/fonts/faq/rP2Wp2ywxg089UriCZaSExd86J3t9jz86MvyyKy58UfivUw.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("./assets/fonts/faq/rP2Wp2ywxg089UriCZaSExd86J3t9jz86MvyyKK58UfivUw4aw.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("./assets/fonts/faq/rP2Wp2ywxg089UriCZaSExd86J3t9jz86MvyyKy58UfivUw.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("./assets/fonts/faq/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6z9mXgjU0.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("./assets/fonts/faq/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K6z9mXg.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("./assets/fonts/faq/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6z9mXgjU0.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("./assets/fonts/faq/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K6z9mXg.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: Onest;
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("./assets/fonts/faq/gNMKW3F-SZuj7xmS-HYoEoeyxMI.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: Onest;
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("./assets/fonts/faq/gNMKW3F-SZuj7xmb-HYoEoeyxMI.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: Onest;
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("./assets/fonts/faq/gNMKW3F-SZuj7xmR-HYoEoeyxMI.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: Onest;
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("./assets/fonts/faq/gNMKW3F-SZuj7xmf-HYoEoey.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: Onest;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("./assets/fonts/faq/gNMKW3F-SZuj7xmS-HYoEoeyxMI.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: Onest;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("./assets/fonts/faq/gNMKW3F-SZuj7xmb-HYoEoeyxMI.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: Onest;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("./assets/fonts/faq/gNMKW3F-SZuj7xmR-HYoEoeyxMI.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: Onest;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("./assets/fonts/faq/gNMKW3F-SZuj7xmf-HYoEoey.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: Onest;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("./assets/fonts/faq/gNMKW3F-SZuj7xmS-HYoEoeyxMI.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: Onest;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("./assets/fonts/faq/gNMKW3F-SZuj7xmb-HYoEoeyxMI.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: Onest;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("./assets/fonts/faq/gNMKW3F-SZuj7xmR-HYoEoeyxMI.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: Onest;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("./assets/fonts/faq/gNMKW3F-SZuj7xmf-HYoEoey.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: Onest;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("./assets/fonts/faq/gNMKW3F-SZuj7xmS-HYoEoeyxMI.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: Onest;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("./assets/fonts/faq/gNMKW3F-SZuj7xmb-HYoEoeyxMI.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: Onest;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("./assets/fonts/faq/gNMKW3F-SZuj7xmR-HYoEoeyxMI.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: Onest;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("./assets/fonts/faq/gNMKW3F-SZuj7xmf-HYoEoey.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* === styles/components/button.css === */
.btn {
--btn-bg: var(--color-surface);
--btn-color: var(--color-text);
--btn-border: var(--color-border-strong);
--btn-shadow: var(--shadow-xs);
--btn-pad-y: var(--space-4);
--btn-pad-x: var(--space-5);
--btn-radius: var(--radius-lg);
--btn-fs: var(--fs-base);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--btn-pad-y) var(--btn-pad-x);
background: var(--btn-bg);
color: var(--btn-color);
border: 1px solid var(--btn-border);
border-radius: var(--btn-radius);
font: var(--fw-600) var(--btn-fs) / 1 var(--font-ui);
text-decoration: none;
cursor: pointer;
box-shadow: var(--btn-shadow);
transition:
background-color var(--t-normal),
color var(--t-normal),
border-color var(--t-normal),
box-shadow var(--t-normal),
transform var(--t-fast),
filter var(--t-fast);
position: relative;
overflow: hidden;
isolation: isolate;
}
@media (hover: hover) and (pointer: fine) {
.btn:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
}
.btn:active {
transform: translateY(0);
box-shadow: var(--shadow-xs);
}
.btn:focus-visible {
outline: none;
box-shadow: var(--ring-focus);
}
.btn[disabled],
.btn[aria-disabled='true'] {
opacity: 0.5;
pointer-events: none;
}
.btn--primary {
--btn-bg: linear-gradient(180deg, var(--pp-red) 0%, var(--pp-red-600) 100%);
--btn-color: var(--white);
--btn-border: transparent;
--btn-shadow: 0 10px 26px rgb(var(--pp-red-rgb) / 35%);
}
@media (hover: hover) and (pointer: fine) {
.btn--primary:hover {
transform: translateY(0);
background: rgb(255 255 255 / 96%);
color: rgb(var(--pp-red-rgb) / 98%);
border-color: rgb(var(--pp-red-rgb) / 50%);
box-shadow:
0 0 0 3px rgb(var(--pp-red-rgb) / 14%),
var(--shadow-md);
filter: saturate(1.06);
}
}
.btn--primary:active {
transform: translateY(0);
box-shadow: var(--shadow-sm);
}
.btn--ghost {
--btn-bg: transparent;
--btn-border: var(--color-border);
}
:root[data-theme='dark'] .btn--ghost {
--btn-bg: rgb(255 255 255 / 4%);
--btn-border: var(--stroke);
--btn-color: var(--text);
}
@media (hover: hover) and (pointer: fine) {
:root[data-theme='dark'] .hero__actions .btn--ghost:hover {
transform: translateY(-1px);
background: rgb(255 255 255 / 9%);
border-color: rgb(255 255 255 / 22%);
color: var(--brand-light);
box-shadow: var(--shadow-lg);
}
}
.btn--soft {
--btn-bg: var(--color-brand-soft);
--btn-color: var(--color-brand-hover);
--btn-border: transparent;
}
.btn--link {
--btn-bg: transparent;
--btn-border: transparent;
--btn-shadow: none;
text-decoration: underline;
padding-inline: 0;
}
.btn--sm {
--btn-pad-y: var(--space-2);
--btn-pad-x: var(--space-3);
--btn-fs: var(--fs-sm);
}
.btn--lg {
--btn-pad-y: var(--space-4);
--btn-pad-x: var(--space-6);
--btn-fs: var(--fs-lg);
}
.btn--block {
width: 100%;
}
.btn--icon {
padding-inline: var(--space-3);
}
.btn--pill {
--btn-radius: var(--radius-full);
}
.btn--success .btn__label {
display: inline-flex;
transition:
opacity var(--t-fast),
transform var(--t-fast);
}
.btn--success .btn__check {
position: absolute;
inset: 0;
margin: auto;
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0.3) rotate(-30deg);
transition:
opacity var(--t-fast),
transform var(--t-spring);
pointer-events: none;
}
.btn--success.is-done {
--btn-bg: linear-gradient(180deg, #10b981 0%, #059669 100%);
--btn-shadow: 0 10px 26px rgb(16 185 129 / 35%);
}
.btn--success.is-done .btn__label {
opacity: 0;
transform: translateY(-6px);
}
.btn--success.is-done .btn__check {
opacity: 1;
transform: scale(1) rotate(0);
}
.btn--success.is-done:active {
background: var(--btn-bg);
color: var(--btn-color);
border-color: var(--btn-border);
box-shadow: var(--btn-shadow);
transform: translateY(0);
filter: none;
}
@media (hover: hover) and (pointer: fine) {
.btn--success.is-done:hover {
background: var(--btn-bg);
color: var(--btn-color);
border-color: var(--btn-border);
box-shadow: var(--btn-shadow);
transform: translateY(0);
filter: none;
}
}
.btn--loading.is-loading {
pointer-events: none;
transform: translateY(0);
filter: none;
}
.btn--loading.is-loading .btn__label {
opacity: 0;
}
.btn--loading.is-loading:active {
background: var(--btn-bg);
color: var(--btn-color);
border-color: var(--btn-border);
box-shadow: var(--btn-shadow);
transform: translateY(0);
filter: none;
}
@media (hover: hover) and (pointer: fine) {
.btn--loading.is-loading:hover {
background: var(--btn-bg);
color: var(--btn-color);
border-color: var(--btn-border);
box-shadow: var(--btn-shadow);
transform: translateY(0);
filter: none;
}
}
.btn--loading.is-loading::after {
content: '';
position: absolute;
inset: 0;
margin: auto;
width: 18px;
height: 18px;
border: 2px solid rgb(255 255 255 / 35%);
border-top-color: #fff;
border-radius: 50%;
animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin {
to {
transform: rotate(360deg);
}
}
.btn--shake.is-error {
box-shadow:
0 0 0 3px rgb(220 38 38 / 22%),
var(--shadow-sm);
animation: btn-shake 0.45s var(--ease-out);
}
@keyframes btn-shake {
0%,
100% {
transform: translateX(0);
}
20% {
transform: translateX(-10px);
}
40% {
transform: translateX(10px);
}
60% {
transform: translateX(-8px);
}
80% {
transform: translateX(8px);
}
}
/* === styles/components/field.css === */
.field {
display: grid;
gap: var(--space-2);
}
.field__label {
font: var(--fw-600) var(--fs-sm) / 1.2 var(--font-ui);
color: var(--color-text);
}
.field__hint {
font-size: var(--fs-xs);
color: var(--color-text-subtle);
}
.field__error {
font-size: var(--fs-xs);
color: var(--color-danger);
}
.field__control {
width: 100%;
padding: var(--space-3) var(--space-4);
font: var(--fw-500) var(--fs-base) / 1.3 var(--font-body);
color: var(--color-text);
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.phone-input-wrap {
position: relative;
display: block;
}
.phone-input-wrap .field__control {
padding-left: 52px;
}
.phone-input-flag {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 20px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
line-height: 1;
background: rgb(var(--gray-900-rgb) / 5%);
border: 1px solid rgb(var(--gray-900-rgb) / 10%);
}
.field__control::placeholder {
color: var(--color-text-subtle);
}
@media (hover: hover) and (pointer: fine) {
.field__control:hover {
border-color: rgb(var(--pp-red-rgb) / 40%);
}
}
.field__control:focus-visible {
outline: none;
border-color: var(--color-brand);
box-shadow: var(--ring-focus);
}
.field__control[aria-invalid='true'] {
border-color: var(--color-danger);
box-shadow: var(--ring-danger);
}
.field__control--textarea {
min-height: 96px;
resize: vertical;
}
.field-select {
border-radius: var(--radius-md);
border: 1px solid var(--color-border-strong);
background: var(--color-surface);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field-select:focus-within {
border-color: var(--color-brand);
box-shadow: var(--ring-focus);
}
.field-select:has(select[aria-invalid='true']) {
border-color: var(--color-danger);
box-shadow: var(--ring-danger);
}
.field__control--select {
appearance: none;
border: none;
background-color: transparent;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right var(--space-3) center;
background-size: 16px;
padding-right: var(--space-8);
}
.field-select.field-select--filled .field__control--select {
color: var(--color-text);
-webkit-text-fill-color: var(--color-text);
}
.field__control--select option {
color: var(--color-text);
background: var(--color-bg);
}
.field__control--select option[value=''] {
color: var(--color-text-subtle);
}
.radio-group {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
border: 0;
padding: 0;
margin: 0;
}
.field--contact-pref.radio-group {
flex-wrap: nowrap;
align-items: center;
gap: var(--space-4);
line-height: 1;
}
.field--contact-pref .field__label {
display: inline-flex;
align-items: center;
font-size: var(--fs-sm);
line-height: 1;
margin: 0;
flex-shrink: 0;
align-self: center;
}
.field--contact-pref .radio {
align-items: center;
line-height: 1;
}
.field--contact-pref .radio__label {
line-height: 1;
}
.field--messenger-picker {
border: 0;
padding: 0;
margin: 0;
gap: var(--space-2);
max-height: 0;
opacity: 0;
transform: translateY(-6px);
overflow: hidden;
visibility: hidden;
pointer-events: none;
transition:
max-height var(--dur-3) var(--ease-in-out),
opacity var(--dur-3) var(--ease-in-out),
transform var(--dur-3) var(--ease-in-out),
margin-top var(--dur-3) var(--ease-in-out),
visibility 0s linear var(--dur-3);
}
.field--messenger-picker.is-open {
max-height: 140px;
opacity: 1;
transform: translateY(0);
visibility: visible;
pointer-events: auto;
margin-top: var(--space-1);
overflow: visible;
transition:
max-height var(--dur-3) var(--ease-in-out),
opacity var(--dur-3) var(--ease-in-out),
transform var(--dur-3) var(--ease-in-out),
margin-top var(--dur-3) var(--ease-in-out),
visibility 0s linear 0s;
}
.field--contact-pref:has(input[name='contact_pref'][value='messenger']:checked) + .field--messenger-picker {
max-height: 140px;
opacity: 1;
transform: translateY(0);
visibility: visible;
pointer-events: auto;
margin-top: var(--space-1);
overflow: visible;
transition:
max-height var(--dur-3) var(--ease-in-out),
opacity var(--dur-3) var(--ease-in-out),
transform var(--dur-3) var(--ease-in-out),
margin-top var(--dur-3) var(--ease-in-out),
visibility 0s linear 0s;
}
.messenger-picker__options {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: stretch;
gap: var(--space-2);
}
.messenger-option {
flex: 1 1 0;
cursor: pointer;
}
.messenger-option__input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.messenger-option__chip {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
width: 100%;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-full);
border: 1px solid rgb(var(--gray-900-rgb) / 12%);
background: rgb(255 255 255 / 92%);
font: var(--fw-600) var(--fs-sm) / 1 var(--font-ui);
transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.messenger-option__icon {
width: 20px;
height: 20px;
border-radius: var(--radius-full);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.messenger-option__icon svg {
width: 12px;
height: 12px;
fill: currentcolor;
}
.messenger-option--tg .messenger-option__chip {
color: #0b6ca5;
background: rgb(0 136 204 / 8%);
border-color: rgb(0 136 204 / 24%);
}
.messenger-option--tg .messenger-option__icon {
color: #fff;
background: #229ed9;
}
.messenger-option--wa .messenger-option__chip {
color: #137b46;
background: rgb(37 211 102 / 8%);
border-color: rgb(37 211 102 / 24%);
}
.messenger-option--wa .messenger-option__icon {
color: #fff;
background: #25d366;
}
.messenger-option--viber .messenger-option__chip {
color: #5742b7;
background: rgb(115 96 242 / 8%);
border-color: rgb(115 96 242 / 24%);
}
.messenger-option--viber .messenger-option__icon {
color: #fff;
background: #7360f2;
font-size: 10px;
font-weight: var(--fw-800);
}
.messenger-option__input:checked + .messenger-option__chip {
color: rgb(var(--pp-red-rgb) / 98%);
background: rgb(var(--pp-red-rgb) / 8%);
border-color: rgb(var(--pp-red-rgb) / 52%);
box-shadow:
inset 0 0 0 1px rgb(var(--pp-red-rgb) / 34%),
0 2px 8px rgb(var(--pp-red-rgb) / 16%);
transform: translateY(-1px);
}
.messenger-option__input:checked + .messenger-option__chip .messenger-option__icon {
background: rgb(var(--pp-red-rgb) / 95%);
color: #fff;
}
.messenger-option__input:focus-visible + .messenger-option__chip {
box-shadow: var(--ring-focus);
}
.radio {
display: inline-flex;
align-items: center;
gap: var(--space-2);
cursor: pointer;
}
.radio__input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.radio__indicator {
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid var(--color-border-strong);
background: var(--color-surface);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.radio__input:checked + .radio__indicator {
border-color: var(--color-brand);
box-shadow: inset 0 0 0 4px var(--color-brand);
}
.radio__input:focus-visible + .radio__indicator {
box-shadow: var(--ring-focus);
}
@media (width <= 720px) {
.field--contact-pref.radio-group {
flex-wrap: wrap;
align-items: flex-start;
gap: var(--space-3);
}
.field--contact-pref .field__label {
flex: 0 0 100%;
align-self: flex-start;
margin-bottom: var(--space-1);
}
}
/* === styles/components/card.css === */
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: var(--space-5);
display: grid;
gap: var(--space-3);
}
.card--elevated {
box-shadow: var(--shadow-md);
}
.card--hero {
padding: var(--space-5);
border-radius: var(--radius-xl);
}
.card--service {
padding: var(--space-4);
gap: var(--space-4);
border-radius: var(--radius-lg);
transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
@media (hover: hover) and (pointer: fine) {
.card--service:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--color-border-strong);
}
}
.card--service h3 {
margin: 0 0 var(--space-2);
font-size: var(--fs-lg);
font-weight: var(--fw-800);
}
.card--service p {
margin: 0;
font-size: var(--fs-sm);
font-weight: var(--fw-500);
}
.card--step {
grid-template-columns: auto 1fr;
align-items: start;
gap: var(--space-4);
}
.card__step-number {
font-family: var(--font-ui);
font-weight: var(--fw-800);
font-size: var(--fs-xl);
letter-spacing: 0.04em;
color: rgb(255 255 255 / 98%);
background: var(--color-brand);
border: 1px solid rgb(var(--pp-red-rgb) / 55%);
border-radius: var(--radius-xl);
display: grid;
place-items: center;
height: 56px;
min-width: 64px;
}
.card--quote {
position: relative;
padding: 3rem 2.5rem 2rem;
border-radius: var(--radius-lg);
border: 1px solid rgb(var(--pp-red-rgb) / 70%);
background: linear-gradient(135deg, rgb(var(--pp-red-rgb) / 98%), rgb(176 0 18 / 94%));
box-shadow: var(--shadow-lg);
}
/* === styles/components/dropdown.css === */
.dropdown {
position: relative;
}
.dropdown__menu {
position: absolute;
top: calc(100% + var(--space-2));
right: 0;
z-index: var(--z-dropdown);
display: flex;
gap: var(--space-2);
padding: var(--space-2);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
background: var(--color-surface);
box-shadow: var(--shadow-lg);
}
.dropdown__menu[hidden] {
display: none;
}
.dropdown--header .dropdown__menu[hidden],
.dropdown--mobile .dropdown__menu[hidden] {
display: none;
}
.dropdown--mobile .dropdown__menu {
position: static;
width: 100%;
margin-top: var(--space-2);
box-shadow: none;
justify-content: space-between;
}
.dropdown--suggestions .dropdown__menu {
left: 0;
right: 0;
top: calc(100% + 6px);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
overflow: hidden;
display: block;
padding: 0;
}
.dropdown--header .dropdown__menu .about-contact {
padding: 7px var(--space-3);
}
.dropdown--header .dropdown__menu {
top: calc(100% + var(--space-8));
min-width: 0;
flex-direction: row;
align-items: center;
}
.dropdown--header .dropdown__menu .about-contact {
width: auto;
justify-content: flex-start;
white-space: nowrap;
}
.dropdown--header .dropdown__menu .about-contact__icon {
flex-shrink: 0;
}
.dropdown__menu[data-contact-menu] {
opacity: 0;
transform: translateY(8px) scale(0.98);
pointer-events: none;
transition:
opacity 240ms var(--ease-out),
transform 240ms var(--ease-out);
}
.dropdown__menu[data-contact-menu].is-open {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
/* === styles/components/modal.css === */
html.dialog-scroll-lock {
overflow: hidden;
overscroll-behavior: none;
}
html.dialog-scroll-lock body {
overflow: hidden;
overscroll-behavior: none;
}
.modal {
border: none;
padding: 0;
background: transparent;
width: min(560px, calc(100% - 26px));
}
.modal--wide {
width: min(980px, calc(100% - 26px));
}
.modal::backdrop {
background: rgb(var(--gray-900-rgb) / 55%);
backdrop-filter: blur(4px);
animation: m-fade 520ms var(--ease-out);
}
.modal__dialog,
.modal__card {
border-radius: var(--radius-xl);
background: rgb(255 255 255 / 96%);
border: 1px solid rgb(var(--gray-900-rgb) / 12%);
padding: var(--space-5);
box-shadow: var(--shadow-lg);
}
.modal[open] .modal__dialog,
.modal[open] .modal__card,
.modal[open] .svc-modal {
transform-origin: center top;
animation: m-in 620ms var(--ease-out);
}
.modal__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-2);
}
.modal__head h2 {
margin: 0;
font-size: var(--fs-xl);
font-weight: var(--fw-800);
}
.modal__body {
display: grid;
gap: var(--space-3);
}
.modal__foot,
.modal__menu {
margin-top: var(--space-4);
}
/* Форма записи: скролл только внутри карточки (иначе overscroll-guard блокирует жест). */
#lead-modal [data-modal-card] {
max-height: 90vh;
max-height: 90dvh;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* Модалка уже viewport − 26px: узкие правки нужны раньше глобального @media (380px). */
@media (width <= 395px) {
#lead-modal [data-modal-card] {
padding-inline: var(--space-4);
}
#lead-modal .form-consent {
flex-wrap: wrap;
}
#lead-modal .form-consent__help {
margin-left: auto;
}
#lead-modal .messenger-picker__options {
flex-wrap: wrap;
}
#lead-modal .messenger-option {
flex: 1 1 calc(50% - var(--space-2));
min-width: 0;
}
}
.thank-modal {
position: relative;
max-width: 500px;
margin: 0 auto;
padding: 34px 28px 26px;
text-align: center;
}
.thank-modal__close {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
border: 1px solid rgb(var(--gray-900-rgb) / 14%);
border-radius: 50%;
background: rgb(var(--gray-900-rgb) / 3%);
color: rgb(var(--gray-900-rgb) / 74%);
font-size: 16px;
line-height: 1;
cursor: pointer;
}
.thank-modal__icon {
width: 56px;
height: 56px;
border-radius: 50%;
margin: 0 auto 16px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgb(74 163 82 / 14%);
color: #3d8f45;
}
.thank-modal__icon svg {
width: 24px;
height: 24px;
}
.thank-modal__eyebrow {
margin: 0 0 8px;
font-size: var(--fs-xxs);
font-weight: var(--fw-700);
letter-spacing: 0.08em;
text-transform: uppercase;
color: #3d8f45;
}
.thank-modal__title {
margin: 0 0 10px;
font-size: clamp(1.55rem, 2.2vw, 2rem);
line-height: 1.2;
}
.thank-modal__text {
margin: 0 auto 16px;
max-width: 42ch;
color: var(--muted);
font-size: var(--fs-sm);
line-height: 1.65;
}
.thank-modal__list {
margin: 0 0 20px;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
text-align: left;
}
.thank-modal__row {
display: flex;
align-items: flex-start;
gap: 12px;
color: var(--muted);
font-size: var(--fs-xs);
line-height: 1.55;
}
.thank-modal__row-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 1px;
color: #3d8f45;
}
.thank-modal__row-icon svg {
width: 15px;
height: 15px;
}
@media (hover: hover) and (pointer: fine) {
.thank-modal__close:hover {
background: rgb(var(--gray-900-rgb) / 8%);
color: rgb(var(--gray-900-rgb) / 90%);
}
}
@media (width <= 560px) {
.thank-modal {
padding: 30px 20px 20px;
}
}
:root[data-theme='dark'] .thank-modal__close {
border-color: rgb(255 255 255 / 22%);
background: rgb(255 255 255 / 6%);
color: rgb(255 255 255 / 86%);
}
:root[data-theme='dark'] .thank-modal__icon {
background: rgb(94 170 43 / 20%);
color: #98df71;
}
:root[data-theme='dark'] .thank-modal__eyebrow {
color: #98df71;
}
:root[data-theme='dark'] .thank-modal__text,
:root[data-theme='dark'] .thank-modal__row {
color: rgb(255 255 255 / 84%);
}
:root[data-theme='dark'] .thank-modal__row-icon {
color: #98df71;
}
@media (hover: hover) and (pointer: fine) {
:root[data-theme='dark'] .thank-modal__close:hover {
background: rgb(255 255 255 / 12%);
color: #fff;
}
}
@keyframes m-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes m-in {
from {
opacity: 0;
transform: translateY(12px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* === styles/components/toast.css === */
.toast-stack {
position: fixed;
right: var(--space-4);
bottom: var(--space-4);
z-index: var(--z-toast);
display: grid;
gap: var(--space-2);
width: min(380px, calc(100vw - 2 * var(--space-4)));
pointer-events: none;
}
.toast {
pointer-events: auto;
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
box-shadow: var(--shadow-lg);
padding: var(--space-3) var(--space-4);
font-size: var(--fs-sm);
line-height: 1.45;
}
.toast--success {
border-color: rgb(var(--color-success-rgb) / 45%);
}
.toast--error {
border-color: rgb(var(--color-danger-rgb) / 45%);
}
/* === styles/components/faq.css === */
/* faq component styles (phase 2 placeholder) */
/* === styles/components/section.css === */
.u-container,
.container {
width: 100%;
max-width: 1200px;
margin-inline: auto;
padding-inline: 16px;
box-sizing: border-box;
}
.section__head {
max-width: 70ch;
margin-bottom: var(--space-7);
}
.section__title {
margin: 0 0 var(--space-2);
font-family: var(--font-display);
font-weight: var(--fw-700);
line-height: 1.12;
letter-spacing: -0.01em;
font-size: clamp(var(--fs-3xl), 4vw, var(--fs-hero));
color: var(--color-text);
}
.section__title em {
color: var(--brand2);
font-style: normal;
}
.section__subtitle {
margin: 0;
font-weight: var(--fw-500);
}
/* === styles.css (без 8 первых @import-строк) === */
:root {
--bg: #fff;
--bg-alt: #f8fafc;
--panel: rgb(255 255 255 / 90%);
--panel2: rgb(255 255 255 / 96%);
--text: rgb(17 24 39 / 96%);
--muted: rgb(55 65 81 / 86%);
--muted2: rgb(75 85 99 / 76%);
/* Как у placeholder в полях ввода */
--form-placeholder: rgb(100 116 139 / 88%);
--stroke: rgb(var(--gray-900-rgb) / 12%);
/* POBYT POLSKA GUIDELINE.ai (RGB swatches) */
--pp-red: rgb(var(--pp-red-rgb)); /* 228, 27, 74 (logo/favicon) */
--pp-yellow: #fff200; /* 255, 242, 0 */
--pp-green: var(--color-success); /* 0, 166, 81 */
--pp-cyan: #00aeef; /* 0, 174, 239 */
--pp-blue: #2e3192; /* 46, 49, 146 */
--pp-magenta: #ec008c; /* 236, 0, 140 */
--pp-black: #231f20; /* 35, 31, 32 */
/* Фирменный стиль: красно-белый */
--brand: var(--pp-red);
--brand2: var(--color-brand-hover);
--brand-light: var(--pp-red-400);
--brand-bg: var(--color-brand-soft);
--danger: var(--color-danger);
--shadow: 0 18px 55px rgb(2 6 23 / 14%);
--shadow-floating: 0 14px 34px rgb(2 6 23 / 12%), 0 34px 72px rgb(2 6 23 / 8%);
--radius: 16px;
--radius2: 22px;
--radius-sm: 10px;
--radius-md: 12px;
--radius-lg: 14px;
--container: 1120px;
/* Типографика как в блоке FAQ: Onest — текст, Cormorant italic — акценты/лого, DM Sans — метки и мелочь */
--font-body: 'Onest', system-ui, -apple-system, 'Segoe UI', roboto, arial, sans-serif;
--font-ui: 'DM Sans', system-ui, -apple-system, sans-serif;
--font-display: 'Cormorant Garamond', georgia, 'Times New Roman', serif;
/* Глобальные веса шрифтов */
--fw-400: 400;
--fw-500: 500;
--fw-600: 600;
--fw-700: 700;
--fw-800: 800;
--fw-900: 900;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
height: 100%;
overflow-x: hidden;
scroll-behavior: smooth;
}
html,
body {
scroll-padding-top: var(--header-scroll-offset, 60px);
text-size-adjust: 100%;
}
/* Anchor compensation: section has top padding, so align content tighter to header */
.section[id] {
scroll-margin-top: -64px;
}
@media (prefers-reduced-motion: reduce) {
html,
body {
scroll-behavior: auto;
}
}
body {
margin: 0;
font-family: var(--font-body);
background: radial-gradient(900px 520px at 12% -10%, rgb(var(--pp-red-rgb) / 18%), transparent 70%),
radial-gradient(760px 420px at 92% 0%, rgb(var(--pp-red-rgb) / 10%), transparent 65%),
linear-gradient(180deg, var(--bg) 0%, var(--bg) 55%, var(--bg-alt) 100%);
color: var(--text);
line-height: 1.65;
position: relative;
-webkit-font-smoothing: antialiased;
}
:root[data-theme='dark'] {
--bg: #0d0d0f;
--bg-alt: #121216;
--panel: rgb(26 26 30 / 90%);
--panel2: rgb(22 22 26 / 96%);
--text: rgb(240 240 242 / 96%);
--muted: rgb(138 138 150 / 86%);
--muted2: rgb(110 110 120 / 76%);
--form-placeholder: rgb(80 80 92 / 88%);
--stroke: rgb(255 255 255 / 10%);
--brand: var(--pp-red);
--brand2: var(--color-brand-hover);
--brand-light: var(--pp-red-400);
--brand-bg: rgb(var(--pp-red-rgb) / 10%);
--shadow: 0 20px 55px rgb(0 0 0 / 45%);
--shadow-floating: 0 16px 40px rgb(0 0 0 / 46%), 0 34px 72px rgb(0 0 0 / 38%);
}
:root[data-theme='dark'] body::before {
opacity: 0.035;
}
:root[data-theme='dark'] .header,
:root[data-theme='dark'] .mobile,
:root[data-theme='dark'] .card,
:root[data-theme='dark'] .contacts__card,
:root[data-theme='dark'] .about-proof,
:root[data-theme='dark'] .svc-modal,
:root[data-theme='dark'] .modal__card,
:root[data-theme='dark'] #faq .pp-faq,
:root[data-theme='dark'] #faq .pp-faq__item,
:root[data-theme='dark'] #faq .pp-faq__head,
:root[data-theme='dark'] #faq .pp-faq__search-input,
:root[data-theme='dark'] #faq .dropdown__menu,
:root[data-theme='dark'] #faq .pp-faq__suggestion-item,
:root[data-theme='dark'] .services-all-cta,
:root[data-theme='dark'] .svc-all-list__item,
:root[data-theme='dark'] .svc-all-callout,
:root[data-theme='dark'] .dropdown__menu,
:root[data-theme='dark'] input,
:root[data-theme='dark'] textarea,
:root[data-theme='dark'] select {
background-color: var(--panel2);
border-color: var(--stroke);
color: var(--text);
}
:root[data-theme='dark'] .chip,
:root[data-theme='dark'] .about-contact {
background: rgb(255 255 255 / 4%);
border-color: var(--stroke);
color: var(--text);
}
:root[data-theme='dark'] .about-contact--tg {
color: #7ecfff;
background: rgb(0 136 204 / 14%);
border-color: rgb(0 136 204 / 28%);
}
:root[data-theme='dark'] .about-contact--wa {
color: #8ce9b0;
background: rgb(37 211 102 / 14%);
border-color: rgb(37 211 102 / 28%);
}
:root[data-theme='dark'] .about-contact--viber {
color: #b4a8ff;
background: rgb(115 96 242 / 14%);
border-color: rgb(115 96 242 / 28%);
}
:root[data-theme='dark'] .about-contact--mail {
color: #d6dde8;
background: rgb(148 163 184 / 14%);
border-color: rgb(148 163 184 / 28%);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--bg: #0d0d0f;
--bg-alt: #121216;
--panel: rgb(26 26 30 / 90%);
--panel2: rgb(22 22 26 / 96%);
--text: rgb(240 240 242 / 96%);
--muted: rgb(138 138 150 / 86%);
--muted2: rgb(110 110 120 / 76%);
--form-placeholder: rgb(80 80 92 / 88%);
--stroke: rgb(255 255 255 / 10%);
--brand: var(--pp-red);
--brand2: var(--color-brand-hover);
--brand-light: var(--pp-red-400);
--brand-bg: rgb(var(--pp-red-rgb) / 10%);
--shadow: 0 20px 55px rgb(0 0 0 / 45%);
}
}
/* Подложка «герб польши» на фоне страницы (фиксированная) */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: var(--z-below);
pointer-events: none;
opacity: 0.05;
/* Цвет задаём через background-color, SVG используем как mask */
background-image: none;
background-color: var(--pp-red);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
mask-image: url("./assets/poland-crest.svg");
mask-repeat: no-repeat;
mask-position: center top;
mask-size: contain;
transform: translateY(0%);
/* SVG уже используется как mask */
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
textarea,
select {
font: inherit;
}
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding-inline: 16px;
box-sizing: border-box;
}
#content {
position: relative;
z-index: var(--z-base);
}
/* Абзацы в основном контенте: на шаг жирнее базового 400 */
main#content p {
font-weight: var(--fw-500);
}
main#content .hero p.badge {
font-weight: var(--fw-700);
}
.muted {
color: var(--muted);
}
.fineprint {
font-family: var(--font-ui);
font-size: var(--fs-xs);
color: var(--brand);
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
padding: var(--space-3) var(--space-3);
background: var(--color-surface);
border: 1px solid var(--stroke);
border-radius: var(--radius-sm);
z-index: var(--z-skip);
}
.skip-link:focus {
left: 12px;
top: 12px;
}
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
}
.header {
position: sticky;
top: 0;
z-index: var(--z-float);
backdrop-filter: blur(10px);
background: rgb(255 255 255 / 82%);
border-bottom: 1px solid rgb(var(--gray-900-rgb) / 8%);
}
.header__row {
display: flex;
gap: var(--space-4);
align-items: center;
padding: var(--space-4) 0;
}
.brand {
display: inline-flex;
align-items: center;
gap: var(--space-3);
min-width: 140px;
}
.brand__mark {
width: auto;
height: auto;
border-radius: 0;
display: block;
background: none;
border: none;
box-shadow: none;
}
.brand__logo {
width: auto;
height: 28px;
display: block;
}
.brand__text {
font-weight: var(--fw-900);
letter-spacing: 0.2px;
white-space: nowrap;
}
.brand--footer .brand__mark {
width: 22px;
height: 22px;
border-radius: var(--radius-sm);
}
.nav {
display: flex;
gap: var(--space-2);
flex: 1;
justify-content: center;
margin-left: var(--space-4);
padding-inline: var(--space-4);
}
.nav a {
font-family: var(--font-ui);
font-size: var(--fs-md);
color: var(--pp-black);
font-weight: var(--fw-800);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-sm);
white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
.nav a:hover {
background: rgb(var(--pp-red-rgb) / 6%);
color: var(--pp-black);
}
}
.header__cta {
display: flex;
gap: var(--space-3);
align-items: center;
white-space: nowrap;
position: relative;
}
/* Узкий десктоп (до появления бургера): сжимаем шапку, чтобы пункты меню не наезжали на CTA. */
@media (width <= 1240px) {
.header__row {
gap: var(--space-2);
min-width: 0;
}
.brand {
min-width: 0;
flex-shrink: 1;
}
.brand__text {
font-size: clamp(13px, 1.1vw, 15px);
letter-spacing: 0.03em;
}
.nav {
min-width: 0;
gap: var(--space-1);
margin-left: var(--space-2);
padding-inline: var(--space-2);
}
.nav a {
padding: var(--space-2) var(--space-3);
font-size: clamp(14px, 1.2vw, 15px);
}
.header__cta {
gap: var(--space-2);
flex-shrink: 1;
min-width: 0;
}
.header-write-btn {
padding-inline: var(--space-3);
}
}
.theme-toggle-btn {
min-width: 42px;
width: 42px;
height: 42px;
padding: var(--space-2) var(--space-3);
line-height: 1;
font-size: var(--fs-lg);
border-radius: var(--radius-full);
overflow: hidden;
transition:
background-color var(--t-normal),
color var(--t-normal),
border-color var(--t-normal),
box-shadow var(--t-normal),
transform var(--t-fast);
}
.theme-toggle-btn[data-theme-icon='moon'] {
background: rgb(15 23 42 / 92%);
color: #f8fafc;
border-color: rgb(15 23 42 / 90%);
}
.theme-toggle-btn[data-theme-icon='sun'] {
background: rgb(255 255 255 / 98%);
color: rgb(15 23 42 / 95%);
border-color: rgb(15 23 42 / 16%);
}
@media (hover: hover) and (pointer: fine) {
.theme-toggle-btn[data-theme-icon='moon']:hover,
.theme-toggle-btn[data-theme-icon='sun']:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
}
.theme-toggle-btn__icon {
position: absolute;
display: inline-flex;
align-items: center;
justify-content: center;
inset: 0;
transition: all .3s cubic-bezier(.34,1.56,.64,1);
}
.theme-toggle-btn__icon svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentcolor;
stroke-width: 1.8;
stroke-linecap: round;
}
.theme-toggle-btn__icon--sun {
opacity: 0;
transform: scale(0.5) rotate(90deg);
color: rgb(var(--pp-red-rgb) / 98%);
}
.theme-toggle-btn__icon--moon {
opacity: 1;
transform: scale(1) rotate(0deg);
color: #facc15;
}
.theme-toggle-btn.theme-toggle-btn--dark-mode .theme-toggle-btn__icon--sun {
opacity: 1;
transform: scale(1) rotate(0deg);
}
.theme-toggle-btn.theme-toggle-btn--dark-mode .theme-toggle-btn__icon--moon {
opacity: 0;
transform: scale(0.5) rotate(-90deg);
}
.header-write-btn {
padding-top: var(--space-2);
padding-bottom: var(--space-2);
line-height: 1.2;
}
.chip {
display: inline-flex;
align-items: center;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-full);
background: rgb(var(--pp-red-rgb) / 6%);
border: 1px solid rgb(var(--pp-red-rgb) / 16%);
color: rgb(var(--gray-900-rgb) / 90%);
font-family: var(--font-ui);
font-weight: var(--fw-600);
font-size: var(--fs-sm);
}
.burger {
display: none;
margin-left: auto;
border: 1px solid rgb(var(--gray-900-rgb) / 12%);
background: rgb(255 255 255 / 70%);
border-radius: var(--radius-md);
padding: var(--space-3);
cursor: pointer;
}
.burger span {
display: block;
width: 18px;
height: 2px;
background: rgb(var(--gray-900-rgb) / 86%);
margin: var(--space-1) 0;
border-radius: var(--radius-xs);
transform-origin: center;
transition:
transform 180ms ease,
opacity 140ms ease,
background-color 180ms ease;
}
.burger[aria-expanded='true'] span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.burger[aria-expanded='true'] span:nth-child(2) {
opacity: 0;
}
.burger[aria-expanded='true'] span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
/* Бургер-режим в critical: до async bundle.css иначе кнопка display:none, а нав остаётся в шапке. */
@media (width <= 1024px) {
.nav {
display: none;
}
.burger {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
z-index: 2;
min-width: 44px;
min-height: 44px;
}
.header__cta .header-write-btn,
.header__cta .dropdown--header {
display: none;
}
}
.mobile {
border-top: 1px solid rgb(var(--gray-900-rgb) / 8%);
background: var(--color-surface);
backdrop-filter: blur(10px);
overflow: hidden;
max-height: 0;
opacity: 0;
transform: translateY(-8px);
transition:
max-height 260ms ease,
opacity 220ms ease,
transform 220ms ease;
}
.mobile.is-open {
max-height: calc(100dvh - var(--header-scroll-offset, 72px));
opacity: 1;
transform: translateY(0);
overflow-y: auto;
}
/* Только вертикальные отступы; горизонтальные — у `.container` на том же узле
(раньше padding: … 0 … обнулял боковые поля). Дублируем явно под #mobile-menu на случай конфликтов каскада. */
.mobile__inner {
padding-block: var(--space-4) var(--space-5);
display: grid;
gap: var(--space-3);
}
.header #mobile-menu .container.mobile__inner {
padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
box-sizing: border-box;
}
.mobile__inner > a[data-mobile-link] {
font-family: var(--font-ui);
font-size: var(--fs-md);
padding: var(--space-3) var(--space-3);
border-radius: var(--radius-md);
border: 1px solid rgb(var(--gray-900-rgb) / 8%);
background: rgb(255 255 255 / 70%);
}
.mobile__actions {
display: grid;
gap: var(--space-3);
margin-top: var(--space-2);
}
.hero {
padding: var(--space-12) 0 var(--space-5);
position: relative;
}
.hero__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(440px, 470px);
gap: var(--space-6);
align-items: start;
position: relative;
z-index: var(--z-base);
}
.hero__copy,
.hero__card {
min-width: 0;
}
.hero__card {
width: 100%;
max-width: 470px;
min-width: 440px;
justify-self: end;
}
.hero__card .card--hero {
box-shadow: var(--shadow-floating);
}
/* На первом экране (h1 + форма) герб не должен просвечивать */
.hero::after {
content: '';
position: absolute;
inset: 0;
z-index: var(--z-below);
pointer-events: none;
background: rgb(255 255 255 / 95%);
}
.badge {
display: inline-flex;
gap: var(--space-2);
align-items: center;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-full);
background: rgb(var(--pp-red-rgb) / 6%);
border: 1px solid rgb(var(--pp-red-rgb) / 14%);
font-family: var(--font-ui);
font-weight: var(--fw-600);
letter-spacing: 0.03em;
color: rgb(var(--gray-900-rgb) / 86%);
font-size: var(--fs-sm);
}
.hero h1 {
margin: var(--space-4) 0 var(--space-3);
font-family: var(--font-body);
font-weight: var(--fw-600);
font-size: clamp(22px, 3.6vw, 52px);
line-height: 1.12;
letter-spacing: -0.02em;
/* Резервируем место под заголовок до загрузки шрифта/JS-rebuild через
initAnimatedText. Иначе на boot.h1 кратко схлопывается, тянет за собой
hero__stats и весь hero — это вызывало CLS 0.416 на мобайле. */
min-height: clamp(88px, 14vw, 168px);
}
.hero h1.text-spark {
white-space: pre-wrap;
}
.hero h1 .hero__word {
white-space: nowrap;
display: inline-block;
}
.hero h1 span {
display: inline-block;
}
@keyframes text-spark {
0%,
88%,
100% {
color: var(--text);
text-shadow: none;
}
90%,
94% {
color: rgb(var(--pp-red-rgb) / 50%);
text-shadow: 0 0 4px rgb(var(--pp-red-rgb) / 25%);
}
92% {
color: rgb(var(--pp-red-rgb) / 50%);
text-shadow: 0 0 8px rgb(var(--pp-red-rgb) / 35%);
}
}
.text-spark span {
animation-name: text-spark;
animation-duration: 15s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
.text-spark span {
animation: none;
}
}
.hero__actions {
display: flex;
gap: var(--space-3);
margin-top: var(--space-5);
flex-wrap: wrap;
}
.hero__stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: var(--space-6);
}
.stat {
padding: 14px 16px;
border-radius: 12px;
background: #fff;
border: 1px solid rgb(var(--gray-900-rgb) / 7%);
display: flex;
align-items: center;
gap: var(--space-3);
min-height: 74px;
}
.stat__n {
font-size: 13px;
font-weight: var(--fw-700);
letter-spacing: 0;
line-height: 1.3;
}
.stat__t {
font-family: var(--font-ui);
color: var(--muted2);
font-size: 11px;
margin-top: 2px;
line-height: 1.5;
}
.stat__icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: #fef0f3;
color: var(--brand2);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.stat__icon svg {
width: 16px;
height: 16px;
}
.stat__body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
/* Жёсткие scoped-стили для карточек в hero (как в stat-cards-family.html) */
.hero__copy .hero__stats {
grid-template-columns: repeat(3, 1fr);
gap: 10px;
max-width: 720px;
}
.hero__copy .hero__stats .stat {
background: #fff;
border: 1px solid rgb(0 0 0 / 7%);
border-radius: 12px;
padding: 16px 18px;
min-height: 64px;
align-items: center;
gap: 12px;
}
.hero__copy .hero__stats .stat--cta {
width: 100%;
appearance: none;
font: inherit;
border: 1px solid rgb(0 0 0 / 7%);
cursor: pointer;
text-align: left;
user-select: none;
transition:
border-color 0.2s ease,
transform 0.15s ease,
box-shadow 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.hero__copy .hero__stats .stat--cta:hover {
border-color: rgb(228 27 74 / 30%);
transform: translateY(-1px);
box-shadow: 0 4px 16px rgb(228 27 74 / 8%);
}
.hero__copy .hero__stats .stat--cta:hover .stat__icon {
background: #e41b4a;
color: #fff;
}
.hero__copy .hero__stats .stat--cta:hover .stat__arrow {
color: #e41b4a;
transform: translateX(2px);
}
}
.hero__copy .hero__stats .stat--cta:focus-visible {
outline: none;
box-shadow: var(--ring-focus);
border-color: var(--brand);
}
/* Language switch fade for translatable elements */
[data-i18n],
[data-i18n-html],
[data-i18n-attr] {
transition: opacity 0.25s ease;
}
[data-i18n].lang-switching,
[data-i18n-html].lang-switching,
[data-i18n-attr].lang-switching {
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
[data-i18n],
[data-i18n-html],
[data-i18n-attr] {
transition: none !important;
}
}
.hero__copy .hero__stats .stat__icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: #fef0f3;
color: #e41b4a;
}
.hero__copy .hero__stats .stat__icon svg {
width: 16px;
height: 16px;
}
.hero__copy .hero__stats .stat__n {
font-size: 13px;
font-weight: var(--fw-700);
line-height: 1.3;
}
.hero__copy .hero__stats .stat__title {
font-size: 13px;
font-weight: var(--fw-600);
color: #1a1a1a;
line-height: 1.3;
flex: 1;
}
.hero__copy .hero__stats .stat__arrow {
width: 16px;
height: 16px;
color: #ccc;
flex-shrink: 0;
transition:
color 0.2s ease,
transform 0.2s ease;
}
:root[data-theme='dark'] .hero__copy .hero__stats .stat__title {
color: var(--text);
}
:root[data-theme='dark'] .hero__copy .hero__stats .stat__arrow {
color: var(--muted);
}
@media (width <= 640px) {
.hero__copy .hero__stats {
grid-template-columns: 1fr;
}
}
.card {
border-radius: var(--radius2);
background: linear-gradient(180deg, rgb(255 255 255 / 98%), var(--color-surface-alt));
}
/* Общий каркас «панели» для карточек */
.card {
padding: var(--space-5);
border: 1px solid rgb(var(--gray-900-rgb) / 10%);
box-shadow: var(--shadow-lg);
}
#about .card.card--quote {
background-color: rgb(var(--pp-red-rgb));
background-image: linear-gradient(135deg, rgb(var(--pp-red-rgb) / 98%), rgb(176 0 18 / 94%));
border-color: rgb(var(--pp-red-rgb) / 70%);
}
.card__title {
margin: 0 0 var(--space-2);
font-size: var(--fs-xl);
}
.card__sub {
margin: 0 0 var(--space-4);
color: var(--muted);
font-size: var(--fs-sm);
}
.form {
position: relative;
display: grid;
gap: var(--space-3);
}
/* Поле для автозаполнения города из профиля браузера (address-level2); не отправляется */
.city-autofill-hook {
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
border: 0;
opacity: 0;
pointer-events: none;
overflow: hidden;
}
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
outline: none;
box-shadow: var(--ring-focus);
border-color: var(--color-brand);
}
:where(input, textarea, select)[aria-invalid='true'] {
border-color: var(--color-danger);
box-shadow: var(--ring-danger);
}
.form__ok {
margin: 0;
font-size: var(--fs-sm);
font-weight: var(--fw-600);
color: rgb(176 0 18 / 92%);
}
.form-consent {
display: flex;
align-items: flex-start;
gap: var(--space-2);
margin-block: var(--space-4);
}
.form-consent__label {
display: flex;
align-items: flex-start;
gap: 10px;
flex: 1;
min-width: 0;
margin: 0;
cursor: pointer;
font-size: var(--fs-sm);
font-weight: var(--fw-600);
line-height: 1.35;
color: var(--pp-black, #0f172a);
}
:root[data-theme='dark'] .form-consent__label {
color: var(--text);
}
.form-consent__checkbox {
width: 18px;
height: 18px;
margin: 2px 0 0;
flex-shrink: 0;
border-radius: 4px;
border: 1px solid rgb(var(--gray-900-rgb) / 22%);
accent-color: rgb(var(--pp-red-rgb));
cursor: pointer;
}
.form-consent__help {
flex-shrink: 0;
width: 24px;
height: 24px;
margin: 0;
padding: 0;
border-radius: 50%;
border: 1px solid rgb(var(--gray-900-rgb) / 12%);
background: #c5cad3;
color: #fff;
font-size: 13px;
font-weight: var(--fw-800);
line-height: 1;
cursor: pointer;
display: grid;
place-items: center;
}
:root[data-theme='dark'] .form-consent__help {
border-color: rgb(255 255 255 / 18%);
background: rgb(255 255 255 / 22%);
color: #fff;
}
.section {
padding-block: var(--space-10);
}
@media (width >= 768px) {
.section {
padding-block: var(--space-16);
}
}
.section--alt {
background: rgb(var(--pp-red-rgb) / 3%);
border-top: 1px solid rgb(var(--gray-900-rgb) / 6%);
border-bottom: 1px solid rgb(var(--gray-900-rgb) / 6%);
}
.section__head {
display: grid;
gap: var(--space-2);
margin-bottom: var(--space-5);
}
.section__head h2 {
margin: 0;
font-family: var(--font-body);
font-size: clamp(22px, 3.6vw, 30px);
font-weight: var(--fw-600);
letter-spacing: -0.02em;
line-height: 1.2;
}
.section__head h2 em {
font-family: var(--font-display);
font-style: italic;
font-weight: var(--fw-400);
color: var(--brand);
}
.section__head p {
margin: 0;
font-weight: var(--fw-500);
}
.grid {
display: grid;
gap: var(--space-3);
}
.grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.callout {
display: flex;
gap: var(--space-3);
justify-content: space-between;
align-items: center;
margin-top: var(--space-4);
padding: var(--space-4);
border-radius: var(--radius2);
background: radial-gradient(700px 220px at 10% 0%, rgb(var(--pp-red-rgb) / 16%), transparent 55%),
rgb(255 255 255 / 86%);
border: 1px solid rgb(var(--gray-900-rgb) / 10%);
transition: background var(--t-normal), border-color var(--t-normal);
}
.callout__text {
display: grid;
gap: 3px;
}
/* Эффект «герб сквозь прозрачный блок» */
[data-crest-reveal] {
transition: background-color var(--t-slow);
}
[data-crest-reveal].crest-on {
background: rgb(255 255 255 / 55%);
}
[data-crest-reveal].crest-on .card--service {
background: rgb(255 255 255 / 52%);
border-color: rgb(var(--gray-900-rgb) / 6%);
}
[data-crest-reveal].crest-on .callout {
background: radial-gradient(700px 220px at 10% 0%, rgb(var(--pp-red-rgb) / 12%), transparent 55%),
rgb(255 255 255 / 52%);
border-color: rgb(var(--gray-900-rgb) / 8%);
}
.steps {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: var(--space-3);
}
.card__step-number {
font-family: var(--font-ui);
font-weight: var(--fw-800);
font-size: var(--fs-xl);
letter-spacing: 0.04em;
color: rgb(255 255 255 / 98%);
background: var(--pp-red);
border: 1px solid rgb(var(--pp-red-rgb) / 55%);
border-radius: var(--radius-xl);
display: grid;
place-items: center;
height: 56px;
}
.step__c h3 {
margin: 0 0 var(--space-2);
font-size: var(--fs-lg);
font-weight: var(--fw-800);
}
.step__c p {
margin: 0;
font-size: var(--fs-sm);
font-weight: var(--fw-500);
}
/* FAQ: сплошной фон у всей секции (иначе герб виден в зазорах между карточками) */
section#faq {
background: var(--color-surface);
position: relative;
z-index: var(--z-base);
}
#faq .section__head {
margin-bottom: var(--space-8);
}
#faq .pp-faq__toolbar {
margin-bottom: var(--space-4);
}
#faq .pp-faq__search-wrap {
position: relative;
}
#faq .pp-faq__search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
color: var(--muted2);
pointer-events: none;
transition: color var(--t-normal);
}
#faq .pp-faq__search-wrap:focus-within .pp-faq__search-icon {
color: rgb(var(--pp-red-rgb) / 65%);
}
#faq .pp-faq__search-input {
width: 100%;
margin: 0;
padding: var(--space-4) var(--space-12) var(--space-4) 46px;
font-family: var(--font-body);
font-size: var(--fs-base);
font-weight: var(--fw-500);
color: var(--text);
background: var(--color-surface);
border: 1px solid var(--stroke);
border-radius: var(--radius);
outline: none;
transition: border-color var(--t-normal), box-shadow var(--t-normal);
appearance: none;
}
#faq .pp-faq__search-input::placeholder {
color: var(--form-placeholder);
}
#faq .pp-faq__search-clear {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--color-surface-alt);
border: 1px solid rgb(var(--gray-900-rgb) / 8%);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--muted2);
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
@media (hover: hover) and (pointer: fine) {
#faq .pp-faq__search-clear:hover {
background: rgb(var(--pp-red-rgb) / 6%);
color: var(--brand);
border-color: rgb(var(--pp-red-rgb) / 20%);
}
}
#faq .pp-faq__search-clear:focus-visible {
outline: none;
}
#faq .pp-faq__search-count {
margin: var(--space-2) 0 0;
padding-left: 2px;
min-height: 1.25em;
font-family: var(--font-ui);
font-size: var(--fs-xs);
color: var(--muted2);
transition: color var(--t-normal);
}
#faq .pp-faq__search-count.pp-faq__search-count--active {
color: var(--pp-green);
}
#faq .pp-faq__search-empty {
text-align: center;
padding: var(--space-5) var(--space-4) var(--space-2);
color: var(--muted2);
font-size: var(--fs-md);
line-height: 1.65;
}
#faq .pp-faq__search-empty-icon {
margin: 0 0 var(--space-2);
font-size: var(--fs-icon-lg);
opacity: 0.45;
}
#faq .pp-faq__search-empty-btn {
margin: 0;
padding: 0;
border: none;
background: none;
cursor: pointer;
font: inherit;
color: var(--brand);
text-decoration: underline;
text-underline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
#faq .pp-faq__search-empty-btn:hover {
color: var(--brand2);
}
}
#faq .pp-faq__search-empty-btn:focus-visible {
outline: none;
border-radius: var(--radius-xs);
}
#faq .pp-faq__suggestion-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
cursor: pointer;
transition: background var(--t-fast);
border-bottom: 1px solid var(--stroke);
}
#faq .pp-faq__suggestion-item:last-of-type {
border-bottom: none;
}
#faq .pp-faq__suggestion-item.pp-faq__suggestion-item--active {
background: rgb(var(--pp-red-rgb) / 6%);
}
@media (hover: hover) and (pointer: fine) {
#faq .pp-faq__suggestion-item:hover {
background: rgb(var(--pp-red-rgb) / 6%);
}
}
#faq .pp-faq__sug-col {
flex: 1;
min-width: 0;
}
#faq .pp-faq__sug-text {
font-size: var(--fs-md);
line-height: 1.45;
color: rgb(var(--gray-900-rgb) / 94%);
}
#faq .pp-faq__sug-extra {
color: var(--muted2);
font-size: var(--fs-2xs);
font-weight: var(--fw-500);
}
#faq .pp-faq__sug-text mark {
background: rgb(var(--pp-red-rgb) / 14%);
color: var(--brand);
border-radius: var(--radius-xs);
padding: 0 1px;
font-weight: var(--fw-700);
}
#faq .pp-faq__sug-snippet {
font-size: var(--fs-xs);
color: var(--muted2);
margin-top: 2px;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
#faq .pp-faq__sug-snippet mark {
background: transparent;
color: var(--pp-green);
font-weight: var(--fw-600);
padding: 0;
}
#faq .pp-faq__sug-more {
padding: var(--space-3) var(--space-4);
font-family: var(--font-ui);
font-size: var(--fs-2xs);
color: var(--muted2);
border-top: 1px solid var(--stroke);
background: var(--color-surface-alt);
}
#faq .pp-faq__item.pp-faq__item--hidden-by-search {
display: none;
}
#faq .pp-faq__divider.pp-faq__divider--hidden {
display: none;
}
#faq .pp-faq mark {
background: rgb(var(--pp-red-rgb) / 12%);
color: rgb(176 0 18 / 95%);
border-radius: var(--radius-xs);
padding: 0 2px;
font-style: normal;
}
#faq .pp-faq {
font-family: var(--font-body);
font-size: var(--fs-base);
line-height: 1.65;
color: var(--text);
-webkit-font-smoothing: antialiased;
max-height: min(62vh, 560px);
overflow: hidden auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
padding: var(--space-2) var(--space-3) var(--space-3) var(--space-2);
border: 1px solid var(--stroke);
border-radius: var(--radius);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
}
#faq .pp-faq__divider,
#faq .pp_fag__divider {
display: flex;
align-items: center;
gap: var(--space-4);
margin: var(--space-10) 0 var(--space-5);
}
#faq .pp-faq__divider:first-child,
#faq .pp_fag__divider:first-child {
margin-top: 0;
}
#faq .pp-faq__divider-label {
font-family: var(--font-ui);
font-size: var(--fs-xxs);
font-weight: var(--fw-400);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brand);
white-space: nowrap;
}
#faq .pp-faq__divider::before,
#faq .pp-faq__divider::after,
#faq .pp_fag__divider::before,
#faq .pp_fag__divider::after {
content: '';
height: 1px;
background: rgb(var(--pp-red-rgb) / 45%);
flex: 1;
}
#faq .pp-faq__item {
background: var(--color-surface);
border-radius: var(--radius);
margin-bottom: var(--space-3);
overflow: hidden;
border: 1px solid var(--stroke);
transition: border-color var(--t-normal);
}
@media (hover: hover) and (pointer: fine) {
#faq .pp-faq__item:hover {
border-color: rgb(var(--pp-red-rgb) / 22%);
}
}
#faq .pp-faq__head {
width: 100%;
margin: 0;
padding: var(--space-4) var(--space-4);
display: flex;
gap: var(--space-4);
align-items: flex-start;
text-align: left;
font: inherit;
color: inherit;
cursor: pointer;
user-select: none;
background: var(--color-surface);
border: none;
border-radius: inherit;
transition: background var(--t-normal);
}
@media (hover: hover) and (pointer: fine) {
#faq .pp-faq__head:hover {
background: rgb(var(--pp-red-rgb) / 4%);
}
}
#faq .pp-faq__head:focus {
outline: none;
}
#faq .pp-faq__question {
flex: 1;
font-size: var(--fs-lg);
font-weight: var(--fw-600);
letter-spacing: -0.01em;
line-height: 1.4;
color: rgb(var(--gray-900-rgb) / 94%);
}
#faq .pp-faq__arrow {
width: 20px;
height: 20px;
flex-shrink: 0;
margin-top: 3px;
color: var(--muted2);
transition: transform var(--t-slow), color var(--t-normal);
}
#faq .pp-faq__item--open .pp-faq__arrow {
transform: rotate(180deg);
color: var(--brand);
}
#faq .pp-faq__panel {
display: grid;
grid-template-rows: minmax(0, 0fr);
transition: grid-template-rows var(--dur-3) var(--ease-out);
overflow: hidden;
padding: 0 var(--space-6);
font-size: var(--fs-base);
font-weight: var(--fw-500);
line-height: 1.75;
color: var(--muted);
}
#faq .pp-faq__panel-inner {
min-height: 0;
overflow: hidden;
padding-bottom: var(--space-6);
}
#faq .pp-faq__item--open .pp-faq__panel {
grid-template-rows: minmax(0, 1fr);
}
#faq .pp-faq__panel p {
margin: 0 0 var(--space-3);
}
#faq .pp-faq__panel p:last-child {
margin-bottom: 0;
}
#faq .pp-faq__panel ul {
margin: var(--space-2) 0 var(--space-3);
padding: 0;
list-style: none;
}
#faq .pp-faq__panel ul li {
padding-left: var(--space-4);
position: relative;
margin-bottom: var(--space-2);
}
#faq .pp-faq__panel ul li::before {
content: '—';
position: absolute;
left: 0;
color: rgb(var(--gray-900-rgb) / 28%);
}
#faq .pp-faq__panel strong {
font-weight: var(--fw-700);
color: rgb(var(--gray-900-rgb) / 94%);
}
#faq .pp-faq__panel a {
color: var(--pp-green);
text-decoration: none;
border-bottom: 1px solid rgb(0 166 81 / 28%);
}
@media (hover: hover) and (pointer: fine) {
#faq .pp-faq__panel a:hover {
border-bottom-color: var(--pp-green);
}
}
#faq .pp-faq__panel a.pp-faq__src {
border-bottom: none;
}
#faq .pp-faq__article-open {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: var(--space-2);
border: 1px solid rgb(var(--pp-red-rgb) / 30%);
border-radius: var(--radius-full);
background: rgb(var(--pp-red-rgb) / 8%);
color: var(--brand);
font-size: var(--fs-sm);
font-weight: var(--fw-700);
padding: var(--space-2) var(--space-4);
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
#faq .pp-faq__article-open:hover {
color: var(--brand2);
border-color: rgb(var(--pp-red-rgb) / 45%);
}
}
.pp-faq-article-modal {
width: min(1100px, 96vw);
height: min(88vh, 900px);
height: min(88dvh, 900px);
border: 1px solid var(--stroke);
border-radius: var(--radius);
padding: 0;
background: var(--panel2);
box-shadow: var(--shadow-xl);
}
.pp-faq-article-modal::backdrop {
background: rgb(10 16 28 / 50%);
backdrop-filter: blur(2px);
}
.pp-faq-article-modal__head {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-3);
margin: 0;
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--stroke);
}
.pp-faq-article-modal__title {
margin: 0;
font-size: var(--fs-lg);
font-weight: var(--fw-700);
color: var(--text);
}
.pp-faq-article-modal__close {
border: 0;
background: none;
color: var(--muted);
font-size: var(--fs-lg);
cursor: pointer;
}
.pp-faq-article-modal__frame {
display: block;
width: 100%;
height: calc(100% - 58px);
border: 0;
}
#faq .pp-faq__note {
background: rgb(var(--pp-red-rgb) / 6%);
border-left: 3px solid var(--brand);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
padding: var(--space-3) var(--space-4);
margin: var(--space-3) 0;
font-size: var(--fs-md);
color: rgb(176 0 18 / 95%);
line-height: 1.6;
}
#faq .pp-faq__warn {
background: #faf3e8;
border-left: 3px solid #c8943a;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
padding: var(--space-3) var(--space-4);
margin: var(--space-3) 0;
font-size: var(--fs-md);
color: #8c5a1a;
line-height: 1.6;
}
#faq .pp-faq__fee-table {
width: 100%;
border-collapse: collapse;
margin: var(--space-3) 0;
font-size: var(--fs-md);
}
#faq .pp-faq__fee-table td {
padding: var(--space-2) 0;
border-bottom: 1px solid var(--stroke);
color: var(--muted);
}
#faq .pp-faq__fee-table td:last-child {
text-align: right;
font-weight: var(--fw-700);
color: rgb(var(--gray-900-rgb) / 92%);
font-variant-numeric: tabular-nums;
}
#faq .pp-faq__fee-table tr:last-child td {
border-bottom: none;
}
#faq .pp-faq__sources {
margin-top: var(--space-4);
padding-top: var(--space-3);
border-top: 1px solid var(--stroke);
}
#faq .pp-faq__sources-sum {
font-family: var(--font-ui);
font-size: var(--fs-2xs);
font-weight: var(--fw-500);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted2);
cursor: pointer;
list-style: none;
user-select: none;
}
#faq .pp-faq__sources-sum::-webkit-details-marker {
display: none;
}
#faq .pp-faq__sources-sum::before {
content: '+';
display: inline-block;
width: 1.1em;
font-weight: var(--fw-600);
color: var(--brand);
}
#faq .pp-faq__sources[open] .pp-faq__sources-sum::before {
content: '−';
}
#faq .pp-faq__sources-body {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-3);
}
#faq .pp-faq__src {
font-family: var(--font-ui);
font-size: var(--fs-xs-plus);
background: var(--color-surface-alt);
border: 1px solid rgb(var(--gray-900-rgb) / 10%);
border-radius: var(--radius-xs);
padding: var(--space-1) var(--space-3);
color: var(--pp-green);
text-decoration: none;
border-bottom: none;
}
@media (hover: hover) and (pointer: fine) {
#faq .pp-faq__src:hover {
border-color: rgb(0 166 81 / 45%);
}
}
@media (width >= 768px) {
#faq .pp-faq {
max-height: min(68vh, 720px);
padding: var(--space-3) var(--space-3) var(--space-4) var(--space-3);
}
#faq .pp-faq__panel {
padding-left: 58px;
padding-right: var(--space-6);
}
#faq .pp-faq__head {
padding: var(--space-5) var(--space-6);
}
}
/* Секция квиза — блок PPQ (#ppq-intro / #ppq-body / #ppq-result) */
.section--quiz {
background: var(--bg-alt);
padding-top: var(--space-12);
padding-bottom: var(--space-12);
}
.quiz {
position: relative;
max-width: 520px;
margin: 0 auto;
padding: var(--space-8) var(--space-6);
background: var(--pp-red);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
}
.quiz__logo {
position: absolute;
right: 24px;
bottom: 28px;
width: 36px;
height: 36px;
opacity: 0.9;
}
.quiz__logo img {
width: 100%;
height: 100%;
display: block;
filter: brightness(0) invert(1);
}
.quiz__questions {
display: grid;
gap: var(--space-5);
}
.quiz__q {
padding: var(--space-5);
border-radius: var(--radius2);
background: var(--color-surface);
border: 1px solid rgb(var(--gray-900-rgb) / 8%);
}
.quiz__q-num {
margin: 0 0 var(--space-2);
font-weight: var(--fw-800);
font-size: var(--fs-md);
color: rgb(var(--pp-red-rgb) / 90%);
}
.quiz__q-text {
margin: 0 0 var(--space-3);
font-weight: var(--fw-700);
font-size: var(--fs-base);
color: rgb(var(--gray-900-rgb) / 92%);
}
.quiz__opts {
display: grid;
gap: var(--space-2);
}
.quiz__opt {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-3);
border-radius: var(--radius-md);
border: 1px solid rgb(var(--gray-900-rgb) / 10%);
background: rgb(255 255 255 / 80%);
cursor: pointer;
font-size: var(--fs-md);
color: rgb(var(--gray-900-rgb) / 90%);
transition: border-color var(--t-normal), background var(--t-normal);
}
@media (hover: hover) and (pointer: fine) {
.quiz__opt:hover {
border-color: rgb(var(--pp-red-rgb) / 25%);
background: rgb(var(--pp-red-rgb) / 4%);
}
}
.quiz__opt input {
width: 18px;
height: 18px;
accent-color: var(--pp-red);
outline: none;
box-shadow: none;
}
.quiz__opt input:focus {
border-color: transparent;
box-shadow: none;
}
.quiz__opt:focus-within {
border-color: rgb(var(--pp-red-rgb) / 25%);
background: rgb(var(--pp-red-rgb) / 4%);
}
.quiz__actions {
margin-top: var(--space-5);
}
.quiz__intro-title {
margin: 0 0 var(--space-3);
font-size: var(--fs-2xl);
font-weight: var(--fw-700);
color: rgb(255 255 255 / 98%);
}
.quiz .muted {
color: rgb(255 255 255 / 88%);
}
@keyframes quizBlockFadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.quiz__intro:not([hidden]),
.quiz__body:not([hidden]),
.quiz__result:not([hidden]) {
animation: quizBlockFadeIn 0.35s ease forwards;
}
.quiz__q:not([hidden]) {
animation: quizBlockFadeIn 0.3s ease forwards;
}
.quiz__body {
margin-top: var(--space-2);
}
.quiz__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.quiz__progress {
font-size: var(--fs-xs);
font-weight: var(--fw-700);
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgb(107 114 128 / 90%);
}
.quiz .quiz__progress {
color: rgb(255 255 255 / 90%);
}
.quiz__close {
flex-shrink: 0;
font-size: var(--fs-sm);
}
.quiz__close--icon {
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
font-size: var(--fs-3xl);
line-height: 1;
color: rgb(var(--gray-900-rgb) / 70%);
}
@media (hover: hover) and (pointer: fine) {
.quiz__close--icon:hover {
color: rgb(var(--gray-900-rgb) / 95%);
background: rgb(var(--gray-900-rgb) / 6%);
}
}
.quiz .quiz__close--icon {
color: rgb(255 255 255 / 90%);
background: transparent;
border-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
.quiz .quiz__close--icon:hover {
color: #fff;
background: rgb(255 255 255 / 20%);
border-color: transparent;
}
}
.quiz .quiz__close--icon:focus-visible {
outline: none;
}
.quiz__close--top {
margin-left: auto;
margin-bottom: var(--space-1);
display: block;
}
.quiz__result {
margin-top: var(--space-6);
padding: var(--space-6);
border-radius: var(--radius2);
background: rgb(255 255 255 / 95%);
border: 1px solid rgb(var(--gray-900-rgb) / 10%);
box-shadow: var(--shadow-lg);
}
.quiz__result-inner {
display: grid;
gap: var(--space-3);
}
.quiz__result-title {
margin: 0;
font-size: var(--fs-2xl);
font-weight: var(--fw-800);
color: rgb(var(--gray-900-rgb) / 95%);
}
.quiz__result-title--high {
color: rgb(0 128 80 / 95%);
}
.quiz__result-title--medium {
color: rgb(180 100 0 / 95%);
}
.quiz__result-title--risk {
color: rgb(var(--pp-red-rgb) / 95%);
}
.quiz__result-desc {
margin: 0;
font-size: var(--fs-base);
font-weight: var(--fw-600);
color: rgb(55 65 81 / 90%);
}
.quiz__result-consult {
margin: 0;
font-size: var(--fs-md);
font-weight: var(--fw-600);
color: rgb(55 65 81 / 85%);
line-height: 1.45;
}
:root[data-theme='dark'] .quiz__result-title {
color: #fff;
}
:root[data-theme='dark'] .quiz__result-title--high,
:root[data-theme='dark'] .quiz__result-title--medium,
:root[data-theme='dark'] .quiz__result-title--risk {
color: #fff;
}
:root[data-theme='dark'] .quiz__result-desc {
color: rgb(255 255 255 / 94%);
}
:root[data-theme='dark'] .quiz__result-consult {
color: rgb(255 255 255 / 90%);
}
.contacts {
display: grid;
grid-template-columns: minmax(320px, 0.95fr) minmax(320px, 1.05fr);
grid-template-areas: 'about side';
gap: var(--space-3);
}
.contacts__about {
grid-area: about;
min-width: 0;
overflow: hidden;
}
.contacts__side {
grid-area: side;
display: flex;
flex-direction: column;
gap: var(--space-3);
height: 100%;
}
.contacts__form-card h3 {
margin-top: 0;
font-weight: var(--fw-800);
}
.contacts__form-card {
margin-top: auto;
}
.quote-mark {
display: none;
}
.quote-text {
margin: 0;
font-family: var(--font-body);
font-style: italic;
font-weight: var(--fw-500);
font-size: var(--fs-2xl);
line-height: 1.65;
letter-spacing: -0.01em;
color: rgb(255 255 255 / 98%);
position: relative;
z-index: 1;
}
.quote-attr {
margin: 0.875rem 0 0;
font-family: var(--font-ui);
font-size: var(--fs-xs);
letter-spacing: 0.02em;
color: rgb(255 255 255 / 78%);
position: relative;
z-index: 1;
}
.founder-story {
position: relative;
padding-top: 1.4rem;
}
.founder-story__title {
margin: 0 0 12px;
font-size: clamp(22px, 2.6vw, 28px);
line-height: 1.2;
color: rgb(255 255 255 / 98%);
}
.founder-story__text {
margin: 0 0 10px;
font-size: 15px;
line-height: 1.62;
color: rgb(255 255 255 / 92%);
}
.founder-story__text--strong {
margin-top: 14px;
font-weight: var(--fw-700);
color: rgb(255 255 255 / 98%);
}
.about-photo-wrap {
position: relative;
width: 100%;
max-width: 100%;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid rgb(var(--gray-900-rgb) / 10%);
background: linear-gradient(180deg, rgb(241 245 249 / 88%), var(--color-surface-alt));
min-height: 232px;
}
.about-photo-wrap--portrait {
aspect-ratio: 3 / 4;
min-height: 0;
}
.about-photo-wrap .about-photo-picture {
display: contents;
}
.about-photo {
display: block;
width: 100%;
height: 100%;
min-height: 232px;
object-fit: cover;
object-position: center 10%;
}
.about-photo-wrap--portrait .about-photo {
min-height: 0;
}
.about-photo-placeholder {
display: none;
position: absolute;
inset: 0;
align-items: center;
justify-content: center;
flex-direction: column;
gap: var(--space-2);
color: rgb(71 85 105 / 82%);
background: linear-gradient(180deg, rgb(241 245 249 / 88%), var(--color-surface-alt));
font-size: var(--fs-xs);
font-weight: var(--fw-600);
}
.about-name {
margin: 2px 0 0;
font-size: var(--fs-3xl);
font-weight: var(--fw-800);
}
.about-role {
margin: calc(-1 * var(--space-1)) 0 0;
font-size: var(--fs-md);
font-weight: var(--fw-800);
}
.about-bio {
margin: 0;
max-width: 100%;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
border: 1px solid rgb(var(--gray-900-rgb) / 10%);
background: rgb(255 255 255 / 70%);
font-size: var(--fs-md);
font-weight: var(--fw-600);
line-height: 1.5;
color: rgb(var(--gray-900-rgb) / 90%);
}
.about-tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
max-width: 100%;
}
.about-tag {
display: inline-flex;
align-items: center;
padding: 5px var(--space-3);
border-radius: var(--radius-full);
font-size: var(--fs-xs);
font-weight: var(--fw-600);
color: rgb(var(--gray-900-rgb) / 78%);
border: 1px solid rgb(var(--gray-900-rgb) / 12%);
background: rgb(255 255 255 / 82%);
}
.about-tag--accent {
color: rgb(176 0 18 / 94%);
border-color: rgb(var(--pp-red-rgb) / 35%);
background: rgb(var(--pp-red-rgb) / 10%);
}
.about-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-2);
max-width: 100%;
}
.about-stat {
display: grid;
gap: 2px;
padding: var(--space-3);
border-radius: var(--radius-md);
border: 1px solid rgb(var(--gray-900-rgb) / 10%);
background: rgb(255 255 255 / 78%);
text-align: center;
}
.about-stat__n {
font-size: var(--fs-2xl);
font-weight: var(--fw-900);
color: rgb(var(--pp-red-rgb) / 95%);
line-height: 1.1;
}
.about-stat__t {
font-size: var(--fs-xs);
color: var(--muted2);
}
.about-contacts {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: 2px;
padding-left: 0;
list-style: none;
max-width: 100%;
}
.about-contacts li {
min-width: 0;
max-width: 100%;
}
.about-contact {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
font-size: var(--fs-sm);
font-weight: var(--fw-600);
text-decoration: none;
border: 1px solid rgb(var(--gray-900-rgb) / 14%);
color: rgb(var(--gray-900-rgb) / 90%);
background: rgb(255 255 255 / 90%);
transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
max-width: 100%;
}
.about-contact span:last-child {
min-width: 0;
overflow-wrap: anywhere;
}
@media (hover: hover) and (pointer: fine) {
.about-contact:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
}
.about-contact__icon {
width: 22px;
height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: var(--fs-xs);
}
.about-contact__icon svg {
width: 14px;
height: 14px;
fill: currentcolor;
}
.about-contact--phone {
border-color: rgb(var(--gray-900-rgb) / 15%);
color: rgb(var(--gray-900-rgb) / 90%);
background: var(--color-surface-alt);
}
.about-contact--phone .about-contact__icon {
background: rgb(var(--gray-900-rgb) / 10%);
}
.about-contact--tg {
border-color: rgb(0 136 204 / 35%);
color: #0b6ca5;
background: rgb(0 136 204 / 10%);
}
.about-contact--tg .about-contact__icon {
color: #fff;
background: #229ed9;
}
.about-contact--wa {
border-color: rgb(37 211 102 / 35%);
color: #137b46;
background: rgb(37 211 102 / 10%);
}
.about-contact--wa .about-contact__icon {
color: #fff;
background: #25d366;
}
.about-contact--viber {
border-color: rgb(115 96 242 / 35%);
color: #5742b7;
background: rgb(115 96 242 / 10%);
}
.about-contact--viber .about-contact__icon {
color: #fff;
background: #7360f2;
font-size: var(--fs-2xs);
font-weight: var(--fw-800);
}
.about-contact--mail {
border-color: rgb(15 23 42 / 20%);
color: rgb(15 23 42 / 88%);
background: rgb(15 23 42 / 6%);
}
.about-contact--mail .about-contact__icon {
color: #fff;
background: rgb(15 23 42 / 72%);
}
.about-proof {
padding: var(--space-4) var(--space-4) var(--space-4);
border-radius: var(--radius-xl);
border: 1px solid rgb(var(--gray-900-rgb) / 10%);
background: linear-gradient(180deg, rgb(255 255 255 / 98%), var(--color-surface-alt));
box-shadow: var(--shadow-lg);
}
.about-proof__list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: var(--space-3);
}
.about-proof__list li {
position: relative;
padding-left: var(--space-6);
font-size: var(--fs-base);
line-height: 1.5;
color: rgb(var(--gray-900-rgb) / 92%);
font-weight: var(--fw-600);
}
.about-proof__list li::before {
content: '';
position: absolute;
left: 0;
top: 0.52em;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--pp-red);
}
@media (width <= 980px) {
.contacts {
grid-template-columns: 1fr;
grid-template-areas:
'about'
'side';
}
.about-photo-wrap--portrait {
aspect-ratio: 5 / 4;
}
.about-contacts {
flex-wrap: wrap;
}
}
@media (width <= 720px) {
.card--quote {
padding-top: 2.6rem;
}
.quote-text {
font-size: var(--fs-3xl);
}
.about-stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.list {
margin: 0;
padding-left: var(--space-5);
display: grid;
gap: var(--space-2);
}
.list a {
text-decoration: underline;
text-decoration-color: rgb(255 255 255 / 25%);
}
@media (hover: hover) and (pointer: fine) {
.list a:hover {
text-decoration-color: rgb(255 255 255 / 60%);
}
}
.list.about-contacts {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
padding-left: 0;
list-style: none;
}
/* Фиксируем типографику блока "О нас", чтобы не перебивалась общими правилами */
#about .about-name {
font-size: var(--fs-3xl);
font-weight: var(--fw-800);
}
#about .about-role {
font-size: var(--fs-md);
font-weight: var(--fw-800);
}
#about .about-bio {
font-size: var(--fs-md);
font-weight: var(--fw-600);
line-height: 1.5;
}
#about .about-tag {
font-size: var(--fs-xs);
font-weight: var(--fw-700);
}
#about .about-stat__n {
font-size: var(--fs-2xl);
font-weight: var(--fw-900);
}
#about .about-stat__t {
font-size: var(--fs-xs);
font-weight: var(--fw-600);
}
#about .about-proof__list li {
font-size: var(--fs-base);
font-weight: var(--fw-700);
line-height: 1.5;
}
#about .quote-text {
font-family: var(--font-body);
font-style: italic;
font-weight: var(--fw-500);
font-size: var(--fs-2xl);
line-height: 1.65;
letter-spacing: -0.01em;
}
@media (width <= 720px) {
#about .quote-text {
font-size: var(--fs-3xl);
}
}
.footer {
padding: var(--space-8) 0 var(--space-6);
border-top: 1px solid rgb(var(--gray-900-rgb) / 8%);
background: var(--color-surface-alt);
}
.footer__row {
display: flex;
gap: var(--space-5);
justify-content: space-between;
align-items: start;
}
.footer__links {
display: grid;
gap: var(--space-2);
text-align: right;
}
.footer__links a,
.linklike {
color: rgb(var(--gray-900-rgb) / 76%);
}
@media (hover: hover) and (pointer: fine) {
.footer__links a:hover,
.linklike:hover {
color: rgb(var(--gray-900-rgb) / 92%);
}
}
.linklike {
background: none;
border: none;
padding: 0;
cursor: pointer;
text-align: right;
font-weight: var(--fw-600);
}
.footer__bottom {
margin-top: var(--space-4);
}
/* --- Отзывы (карусель) --- */
.reviews-carousel {
margin-top: var(--space-5);
mask-image: linear-gradient(to right, transparent 0, black 3%, black 97%, transparent 100%);
mask-size: 100% 100%;
}
/* вьюпорт карусели — transform-лента, без нативного scrollLeft */
[data-reviews-viewport] {
overflow: hidden;
cursor: grab;
touch-action: pan-y;
}
[data-reviews-viewport].is-dragging {
cursor: grabbing;
}
.reviews-carousel__loading {
width: 100%;
padding: var(--space-2) 0 var(--space-6);
display: flex;
gap: var(--space-4);
justify-content: center;
}
.reviews-carousel__track {
display: inline-flex;
flex-wrap: nowrap;
width: max-content;
padding: 0 var(--space-3);
box-sizing: border-box;
animation: none;
will-change: transform;
}
.reviews-carousel__track[data-reviews-loaded='0'] {
width: 100%;
justify-content: center;
transform: none;
}
.reviews-carousel__track .review-card {
flex: 0 0 auto !important;
width: min(85vw, 320px);
}
/* Скелетон для отзывов */
.review-card--skeleton {
position: relative;
overflow: hidden;
}
.review-card--skeleton .review-card__stars,
.review-card--skeleton .skeleton-line {
background: #e5e7eb;
}
.review-card--skeleton .review-card__stars {
height: 10px;
border-radius: var(--radius-full);
}
.skeleton-line {
height: 9px;
border-radius: var(--radius-full);
margin-bottom: var(--space-2);
}
.skeleton-line--wide {
width: 90%;
}
.skeleton-line--short {
width: 60%;
}
.skeleton-line--author {
width: 70%;
margin-top: var(--space-1);
}
.review-card--skeleton::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgb(255 255 255 / 60%), transparent);
transform: translateX(-100%);
animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
@media (prefers-reduced-motion: reduce) {
[data-reviews-viewport] {
cursor: default;
}
.reviews-carousel__track[data-reviews-loaded='0'] {
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4);
}
}
.review-card {
flex: 0 0 auto;
min-width: 200px;
max-width: 320px;
padding: var(--space-4) var(--space-3);
margin-right: var(--space-5);
background: var(--panel2);
border: 1px solid var(--stroke);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: var(--space-2);
box-sizing: border-box;
}
.review-card:last-child {
margin-right: 0;
}
.review-card__head {
display: flex;
align-items: flex-start;
gap: var(--space-3);
}
.review-card__avatar {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
position: relative;
background: rgb(var(--gray-900-rgb) / 8%);
}
.review-card__avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.review-card__avatar-fallback {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-ui);
font-size: var(--fs-md);
font-weight: var(--fw-700);
color: rgb(var(--gray-900-rgb) / 72%);
background: rgb(var(--gray-900-rgb) / 10%);
}
.review-card__meta {
min-width: 0;
flex: 1;
}
.review-card__subrow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin-top: 2px;
}
.review-card__stars {
color: #fbbc04;
font-size: var(--fs-xs);
letter-spacing: 0.5px;
line-height: 1;
}
.review-card__time {
font-size: var(--fs-2xs);
color: var(--muted2);
line-height: 1.2;
}
.review-card__text-wrap {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.review-card__text {
margin: 0;
font-size: var(--fs-sm);
font-weight: var(--fw-500);
line-height: 1.45;
color: var(--text);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}
.review-card--expanded .review-card__text {
-webkit-line-clamp: unset;
line-clamp: unset;
overflow: visible;
}
.review-card__expand {
align-self: flex-start;
margin: 0;
padding: 0;
font-size: var(--fs-xs);
font-weight: var(--fw-700);
color: var(--pp-red);
background: none;
border: none;
cursor: pointer;
text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
.review-card__expand:hover {
color: var(--brand2);
}
}
.review-card__author {
margin: 0;
font-weight: var(--fw-600);
font-size: var(--fs-sm);
line-height: 1.25;
color: var(--text);
}
.review-card__source {
margin: 0;
font-size: var(--fs-2xs);
color: var(--muted2);
}
.reviews-carousel__note {
margin-top: var(--space-4);
text-align: center;
font-size: var(--fs-ui-md);
font-weight: var(--fw-600);
}
.reviews-carousel__note a,
.reviews-carousel__note-link {
color: var(--pp-red);
font-weight: var(--fw-700);
}
@media (hover: hover) and (pointer: fine) {
.reviews-carousel__note-link:hover {
color: var(--brand2);
}
}
.map {
margin-top: var(--space-2);
border-radius: var(--radius-xl);
overflow: hidden;
border: 1px solid rgb(var(--gray-900-rgb) / 8%);
box-shadow: var(--shadow-lg);
background: #e5e7eb;
position: relative;
}
.map iframe {
display: block;
width: 100%;
height: 420px;
border: 0;
}
.map__overlay-link {
position: absolute;
inset: 0;
z-index: var(--z-base);
}
.map__loader {
position: absolute;
inset: 0;
z-index: var(--z-elevated);
display: grid;
place-items: center;
background: radial-gradient(circle at 20% 0%, rgb(var(--pp-red-rgb) / 10%), transparent 55%),
var(--color-surface-alt);
}
.map__loader[hidden] {
display: none;
}
.map__logo {
width: 64px;
height: 64px;
border-radius: var(--radius-xl);
background: rgb(var(--pp-red-rgb) / 6%);
border: 1px solid rgb(var(--pp-red-rgb) / 16%);
display: grid;
place-items: center;
box-shadow: var(--shadow-xl);
animation: map-logo-pulse 1.4s ease-in-out infinite;
}
.map__logo img {
width: 32px;
height: 32px;
display: block;
}
.map__text {
margin-top: var(--space-3);
font-size: var(--fs-xs);
font-weight: var(--fw-500);
color: rgb(55 65 81 / 80%);
}
@keyframes map-logo-pulse {
0%,
100% {
transform: translate3d(0, 0, 0) scale(1);
box-shadow: var(--shadow-xl);
}
50% {
transform: translate3d(0, -2px, 0) scale(1.05);
box-shadow: var(--shadow-xl);
}
}
.pageloader {
position: fixed;
inset: 0;
z-index: var(--z-overlay-high);
display: grid;
place-items: center;
background: radial-gradient(circle at 20% 0%, rgb(var(--pp-red-rgb) / 12%), transparent 55%),
radial-gradient(circle at 80% 100%, rgb(var(--gray-900-rgb) / 12%), transparent 55%),
#f9fafb;
}
.pageloader[hidden] {
display: none;
}
.pageloader__inner {
display: grid;
place-items: center;
gap: var(--space-3);
}
.pageloader__logo {
width: 80px;
height: 80px;
border-radius: var(--radius-2xl);
background: rgb(var(--pp-red-rgb) / 6%);
border: 1px solid rgb(var(--pp-red-rgb) / 16%);
display: grid;
place-items: center;
box-shadow: var(--shadow-xl);
animation: map-logo-pulse 1.4s ease-in-out infinite;
}
.pageloader__logo img {
width: 38px;
height: 38px;
display: block;
}
.pageloader__text {
font-family: var(--font-ui);
font-size: var(--fs-sm);
color: rgb(55 65 81 / 90%);
}
.map__actions {
margin-top: var(--space-3);
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
}
.iconbtn {
border-radius: var(--radius-md);
border: 1px solid rgb(var(--gray-900-rgb) / 12%);
background: rgb(var(--gray-900-rgb) / 4%);
padding: var(--space-2) var(--space-3);
color: rgb(var(--gray-900-rgb) / 86%);
cursor: pointer;
}
.modal__menu {
display: flex;
justify-content: flex-end;
padding: 0;
margin: var(--space-4) 0 0;
}
.stat-modal {
position: relative;
width: 100%;
max-width: 460px;
max-height: 90vh;
max-height: 90dvh;
overflow-y: auto;
padding: 28px 28px 24px;
margin: 0 auto;
}
#hero-stat-modal.modal {
width: min(460px, calc(100% - 26px));
}
.stat-modal__close {
position: absolute;
top: 14px;
right: 14px;
width: 32px;
height: 32px;
border-radius: 50%;
background: #f5f4f2;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: #888;
transition: background 0.15s ease, color 0.15s ease;
}
.stat-modal__close svg {
width: 16px;
height: 16px;
}
@media (hover: hover) and (pointer: fine) {
.stat-modal__close:hover {
background: #e8e6e2;
color: #333;
}
}
.stat-modal__head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
padding-right: 32px;
}
.stat-modal__icon {
width: 44px;
height: 44px;
border-radius: 10px;
background: #fef0f3;
color: #e41b4a;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.stat-modal__icon svg {
width: 22px;
height: 22px;
}
.stat-modal__title {
margin: 0;
font-size: 18px;
font-weight: var(--fw-600);
line-height: 1.3;
}
.stat-modal__text {
margin: 0 0 18px;
font-size: 13px;
color: #666;
line-height: 1.65;
}
.stat-modal__list {
display: grid;
gap: 10px;
margin-bottom: 20px;
}
.stat-modal__list-item {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
color: #444;
line-height: 1.55;
}
.stat-modal__list-item::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: #e41b4a;
flex-shrink: 0;
margin-top: 7px;
}
.stat-modal__payments {
display: grid;
gap: 10px;
margin-bottom: 20px;
padding: 16px;
background: #fafaf8;
border-radius: 10px;
}
.stat-modal__payment {
display: flex;
align-items: center;
gap: 12px;
}
.stat-modal__payment-pct {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 28px;
padding: 0 10px;
border-radius: 14px;
background: #e41b4a;
color: #fff;
font-size: 12px;
font-weight: var(--fw-700);
flex-shrink: 0;
}
.stat-modal__payment-label {
font-size: 13px;
color: #444;
line-height: 1.45;
}
.stat-modal__cta-panel {
margin-top: 10px;
border: 1px solid rgb(228 27 74 / 22%);
background: #f7f0f2;
border-radius: 22px;
padding: 18px;
}
.stat-modal__cta-lead {
margin: 0 0 14px;
text-align: center;
font-size: 19px;
line-height: 1.35;
color: #4b4b52;
}
.stat-modal__cta-lead strong {
color: #1f1f24;
}
.stat-modal__actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.stat-modal__cta {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 14px 20px;
background: #e41b4a;
color: #fff;
border: none;
border-radius: 18px;
font-size: 14px;
line-height: 1;
font-weight: var(--fw-600);
cursor: pointer;
transition: background 0.15s ease, transform 0.1s ease;
text-decoration: none;
font-family: inherit;
}
.stat-modal__cta svg {
width: 14px;
height: 14px;
}
@media (hover: hover) and (pointer: fine) {
.stat-modal__cta:hover {
background: #c8102e;
}
}
.stat-modal__cta:active {
transform: scale(0.98);
}
.stat-modal__cta--ghost {
background: #f3eef0;
color: #44454c;
border: 1px solid rgb(0 0 0 / 16%);
}
@media (hover: hover) and (pointer: fine) {
.stat-modal__cta--ghost:hover {
background: #fff;
color: #e41b4a;
border-color: rgb(228 27 74 / 35%);
}
}
:root[data-theme='dark'] .stat-modal__close {
background: rgb(255 255 255 / 6%);
color: var(--muted);
}
:root[data-theme='dark'] .stat-modal__icon {
background: rgb(var(--pp-red-rgb) / 18%);
color: var(--brand-light);
}
:root[data-theme='dark'] .stat-modal__text,
:root[data-theme='dark'] .stat-modal__payment-label,
:root[data-theme='dark'] .stat-modal__list-item {
color: var(--muted);
}
:root[data-theme='dark'] .stat-modal__payments {
background: rgb(255 255 255 / 4%);
border: 1px solid var(--stroke);
}
:root[data-theme='dark'] .stat-modal__cta--ghost {
background: rgb(255 255 255 / 6%);
color: var(--text);
border-color: var(--stroke);
}
@media (hover: hover) and (pointer: fine) {
:root[data-theme='dark'] .stat-modal__cta--ghost:hover {
background: rgb(255 255 255 / 10%);
color: var(--brand-light);
border-color: rgb(255 255 255 / 20%);
}
}
:root[data-theme='dark'] .stat-modal__cta-panel {
background: rgb(255 255 255 / 3%);
border-color: rgb(228 27 74 / 38%);
}
:root[data-theme='dark'] .stat-modal__cta-lead {
color: var(--muted);
}
:root[data-theme='dark'] .stat-modal__cta-lead strong {
color: var(--text);
}
@media (width <= 640px) {
.stat-modal {
padding: 24px 20px 20px;
}
.stat-modal__title {
font-size: 16px;
}
.stat-modal__actions {
grid-template-columns: 1fr;
}
.stat-modal__cta {
font-size: 14px;
}
.stat-modal__cta svg {
width: 14px;
height: 14px;
}
}
.policy p {
margin: 0 0 var(--space-3);
font-size: var(--fs-sm);
font-weight: var(--fw-500);
}
.policy-modal__scroll {
max-height: min(calc(100vh - 200px), 560px);
max-height: min(calc(100dvh - 200px), 560px);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding-right: var(--space-2);
}
.policy-doc h3 {
margin: var(--space-4) 0 var(--space-2);
font-size: var(--fs-md);
font-weight: var(--fw-700);
line-height: 1.25;
color: var(--pp-black, #0f172a);
}
:root[data-theme='dark'] .policy-doc h3 {
color: var(--text);
}
.policy-doc h3:first-child {
margin-top: 0;
}
.policy-doc p {
margin: 0 0 var(--space-3);
font-size: var(--fs-sm);
font-weight: var(--fw-500);
line-height: 1.45;
}
.policy-doc ul {
margin: 0 0 var(--space-3);
padding-left: 1.35rem;
font-size: var(--fs-sm);
line-height: 1.45;
}
.policy-doc li {
margin-bottom: var(--space-2);
}
.policy-doc li:last-child {
margin-bottom: 0;
}
.policy-doc .policy-li-note {
display: block;
margin-top: 2px;
color: var(--muted);
font-size: var(--fs-xs);
font-weight: var(--fw-500);
}
.policy-doc a {
color: rgb(var(--pp-red-rgb));
text-decoration: underline;
text-underline-offset: 2px;
}
.policy-doc .policy-contact {
margin-top: var(--space-4);
padding-top: var(--space-3);
border-top: 1px solid rgb(var(--gray-900-rgb) / 10%);
}
:root[data-theme='dark'] .policy-doc .policy-contact {
border-top-color: rgb(255 255 255 / 10%);
}
.cookie {
position: fixed;
left: 0;
right: 0;
bottom: 0;
border-top: 1px solid rgb(var(--gray-900-rgb) / 12%);
background: var(--color-surface);
backdrop-filter: blur(10px);
z-index: var(--z-fab);
}
.cookie__row {
display: flex;
gap: var(--space-3);
align-items: center;
justify-content: space-between;
padding: var(--space-3) 0;
}
.cookie__text {
margin: 0;
font-size: var(--fs-sm);
font-weight: var(--fw-500);
}
.cookie__actions {
display: flex;
gap: var(--space-3);
align-items: center;
}
@media (width <= 980px) {
.hero__grid {
grid-template-columns: 1fr;
}
.hero__card {
min-width: 0;
max-width: 100%;
width: 100%;
justify-self: stretch;
}
.grid--3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.contacts {
grid-template-columns: 1fr;
}
}
/* Планшет и узкий десктоп: горизонтальное меню не помещается — бургер + выезжающая панель (#mobile-menu). */
@media (width <= 1024px) {
/* Единые боковые поля + safe-area (раньше max() был только в блоке ≤720px — на планшете контент «лип» к краям). */
.container {
padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
}
.header__row {
gap: var(--space-2);
align-items: center;
min-width: 0;
padding-block: var(--space-3);
}
.nav {
display: none;
}
.burger {
display: inline-block;
}
.brand {
min-width: 0;
flex-shrink: 1;
}
.brand__text {
font-size: clamp(12px, 1.8vw, 15px);
letter-spacing: 0.04em;
}
.header__cta {
margin-left: auto;
gap: var(--space-2);
flex-shrink: 1;
min-width: 0;
}
/* Контакты есть в выезжающем #mobile-menu — дублирующую кнопку в шапке убираем. */
.header__cta .header-write-btn,
.header__cta .dropdown--header {
display: none;
}
.theme-toggle-btn {
width: 40px;
height: 40px;
min-width: 40px;
padding: var(--space-2);
}
/* Выпадающие контакты в шапке: на планшете не привязываем к узкой колонке flex — как на телефоне. */
.dropdown--header .dropdown__menu {
position: fixed;
left: max(12px, env(safe-area-inset-left, 0px));
right: max(12px, env(safe-area-inset-right, 0px));
top: calc(var(--header-scroll-offset, 72px) + 4px);
transform: none;
width: auto;
max-width: none;
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-2);
align-items: stretch;
}
.dropdown--header .dropdown__menu .about-contact--phone {
grid-column: 1 / -1;
}
.dropdown--header .dropdown__menu .about-contact {
width: 100%;
min-width: 0;
justify-content: center;
padding: 10px var(--space-3);
}
.dropdown--header .dropdown__menu .about-contact span:last-child {
overflow: hidden;
text-overflow: ellipsis;
}
}
@media (width <= 720px) {
.hero h1 {
font-size: clamp(24px, 6.2vw, 34px);
}
.brand {
flex: 1 1 auto;
}
.brand__text {
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--fs-sm);
}
.about-contacts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-2);
}
.about-contacts li {
min-width: 0;
}
.about-contact {
width: 100%;
justify-content: center;
}
.about-contact--phone {
grid-column: 1 / -1;
}
.mobile__contacts .about-contact--tg {
border-color: rgb(0 136 204 / 35%);
color: #0b6ca5;
background: rgb(0 136 204 / 10%);
}
.mobile__contacts .about-contact--wa {
border-color: rgb(37 211 102 / 35%);
color: #137b46;
background: rgb(37 211 102 / 10%);
}
.mobile__contacts .about-contact--viber {
border-color: rgb(115 96 242 / 35%);
color: #5b46c5;
background: rgb(115 96 242 / 10%);
}
.mobile__contacts .about-contact--mail {
border-color: rgb(71 85 105 / 28%);
color: rgb(var(--gray-900-rgb) / 85%);
background: rgb(71 85 105 / 8%);
}
.grid--3 {
grid-template-columns: 1fr;
}
.grid--2 {
grid-template-columns: 1fr;
}
.hero__stats {
grid-template-columns: 1fr;
}
.footer__row {
flex-direction: column;
align-items: stretch;
}
.footer__links {
text-align: left;
}
.cookie__row {
flex-direction: column;
align-items: stretch;
}
.cookie__actions {
justify-content: flex-end;
}
}
@media (width <= 380px) {
/* iPhone SE (375px): убираем узкие места, которые давали правый оверфлоу в hero/about. */
.hero__card,
.hero__card .card--hero,
.contacts__about,
.contacts__side,
.contacts__form-card {
min-width: 0;
max-width: 100%;
}
.hero__card .card--hero,
.contacts__about,
.contacts__form-card {
padding: var(--space-4);
}
.form-consent {
flex-wrap: wrap;
}
.form-consent__help {
margin-left: auto;
}
.messenger-picker__options {
flex-wrap: wrap;
}
.messenger-option {
flex: 1 1 calc(50% - var(--space-2));
min-width: 0;
}
.about-contacts,
.list.about-contacts {
display: grid;
grid-template-columns: 1fr;
}
.about-contact {
width: 100%;
min-width: 0;
}
.about-contact span:last-child {
min-width: 0;
}
.brand__text {
display: none;
}
}
/* Встроенный квиз: красные акценты поверх устаревшего кэша pobyt-quiz.css (синий #185fa5). */
section#quiz .ppq-bar-inner {
background: var(--color-brand);
}
@media (hover: hover) and (pointer: fine) {
section#quiz .ppq-opt:hover {
border-color: rgb(var(--pp-red-rgb) / 35%);
background: rgb(var(--pp-red-rgb) / 5%);
}
}
section#quiz .ppq-opt.selected {
border-color: var(--color-brand);
background: rgb(var(--pp-red-rgb) / 8%);
}
section#quiz .ppq-opt.selected .ppq-opt-mark {
background: var(--color-brand);
border-color: var(--color-brand);
}
section#quiz .ppq-intro-plank {
background: var(--color-brand);
}
section#quiz .ppq-cta-box {
background: rgb(var(--pp-red-rgb) / 6%);
border: 1px solid rgb(var(--pp-red-rgb) / 22%);
}
/* Блок услуг: кнопка всегда внизу карточки (текст любой длины) */
#services .grid > .card--service {
display: flex;
flex-direction: column;
height: 100%;
box-shadow: var(--shadow-floating);
/* Без «подъёма» и тени при наведении */
transition: border-color var(--t-normal), background var(--t-normal);
}
@media (hover: hover) and (pointer: fine) {
#services .grid > .card--service:hover {
transform: none;
box-shadow: var(--shadow-floating);
}
section#services[data-crest-reveal]:not(.crest-on) .grid > .card--service:hover {
border-color: rgb(var(--gray-900-rgb) / 8%);
}
section#services[data-crest-reveal].crest-on .grid > .card--service:hover {
border-color: rgb(var(--gray-900-rgb) / 6%);
}
}
#services .grid > .card--service > p {
flex-grow: 1;
padding-bottom: var(--space-5);
margin: 0;
}
.services-all-cta {
margin-top: var(--space-4);
display: flex;
gap: var(--space-3);
justify-content: space-between;
align-items: stretch;
flex-direction: column;
padding: var(--space-4);
border-radius: var(--radius2);
background: radial-gradient(700px 220px at 10% 0%, rgb(var(--pp-red-rgb) / 16%), transparent 55%),
#fff;
border: 1px solid rgb(var(--gray-900-rgb) / 10%);
transition: background var(--t-normal), border-color var(--t-normal);
}
.services-all-cta__text {
display: grid;
gap: 3px;
}
.services-all-cta__btn {
flex-shrink: 0;
width: 100%;
justify-content: center;
}
[data-crest-reveal].crest-on .services-all-cta {
background: radial-gradient(700px 220px at 10% 0%, rgb(var(--pp-red-rgb) / 12%), transparent 55%),
#fff;
border-color: rgb(var(--gray-900-rgb) / 8%);
}
.svc-modal {
background: var(--panel2);
border-radius: var(--radius);
border: 1px solid var(--stroke);
width: 100%;
max-width: 500px;
max-height: 88vh;
max-height: 88dvh;
overflow-y: auto;
padding: var(--space-6) var(--space-5) var(--space-5);
position: relative;
box-shadow: var(--shadow-lg);
}
.svc-modal--all {
max-width: 640px;
margin-inline: auto;
display: flex;
flex-direction: column;
overflow: hidden;
}
.svc-modal__close {
position: absolute;
top: 14px;
right: 14px;
background: rgb(var(--gray-900-rgb) / 6%);
border: none;
border-radius: 50%;
width: 34px;
height: 34px;
font-size: var(--fs-lg);
line-height: 1;
cursor: pointer;
color: var(--muted);
display: flex;
align-items: center;
justify-content: center;
transition: background var(--t-fast), color var(--t-fast);
}
@media (hover: hover) and (pointer: fine) {
.svc-modal__close:hover {
background: rgb(var(--pp-red-rgb) / 12%);
color: var(--brand2);
}
}
.svc-modal__badge {
display: inline-block;
font-size: var(--fs-2xs);
font-weight: var(--fw-700);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
background: rgb(var(--pp-red-rgb) / 12%);
color: var(--brand2);
margin-bottom: var(--space-3);
letter-spacing: 0.02em;
}
.svc-modal__title {
font-size: var(--fs-ui-md);
font-weight: var(--fw-800);
color: var(--text);
line-height: 1.3;
margin-bottom: var(--space-2);
}
.svc-modal__sub {
font-size: var(--fs-sm);
font-weight: var(--fw-500);
color: var(--muted);
line-height: 1.65;
margin-bottom: var(--space-5);
}
.svc-modal__section-label {
font-size: var(--fs-2xs);
font-weight: var(--fw-700);
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--muted2);
margin-bottom: var(--space-3);
}
.svc-modal__inc-list {
display: flex;
flex-direction: column;
gap: 9px;
margin-bottom: var(--space-6);
}
.svc-modal__inc-row {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-size: var(--fs-sm);
font-weight: var(--fw-500);
color: rgb(17 24 39 / 88%);
line-height: 1.5;
transition: opacity 0.25s ease, color 0.25s ease;
}
.svc-modal__inc-check {
width: 18px;
height: 18px;
border-radius: 50%;
background: rgb(0 166 81 / 15%);
color: var(--pp-green);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
.svc-modal__inc-row.is-excluded {
opacity: 0.55;
}
.svc-modal__inc-row.is-excluded .svc-modal__inc-text {
opacity: 0.65;
}
.svc-modal__inc-check.is-no {
background: #f0eeea;
color: #9ca3af;
opacity: 0.85;
}
.svc-modal__divider {
height: 1px;
background: var(--stroke);
margin: var(--space-5) 0;
}
.svc-modal__payment {
background: rgb(var(--pp-red-rgb) / 5%);
border: 1px solid rgb(var(--pp-red-rgb) / 12%);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-4);
margin-bottom: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.svc-modal__pay-row {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-size: var(--fs-xs);
font-weight: var(--fw-500);
color: var(--muted);
line-height: 1.5;
}
.svc-modal__pay-badge {
font-size: var(--fs-xxs);
font-weight: var(--fw-800);
background: #fff;
border: 1px solid rgb(var(--pp-red-rgb) / 28%);
border-radius: var(--radius-xs);
padding: 2px 7px;
color: var(--brand2);
flex-shrink: 0;
margin-top: 1px;
}
.svc-modal__guarantee {
background: rgb(0 166 81 / 10%);
border-radius: var(--radius-sm);
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-5);
font-size: var(--fs-xs);
color: #0d5c2e;
line-height: 1.55;
}
.svc-modal__price-row {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: var(--space-4);
}
.svc-modal__price-label {
font-size: var(--fs-sm);
color: var(--muted2);
}
.svc-modal__price-val {
font-size: var(--fs-display-sm);
font-weight: var(--fw-700);
color: var(--text);
line-height: 1;
}
.svc-modal__price-val span {
font-size: var(--fs-md);
font-weight: var(--fw-500);
color: var(--muted2);
}
.svc-modal__family-label {
font-size: var(--fs-2xs);
font-weight: var(--fw-600);
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--muted2);
margin-bottom: var(--space-2);
}
.svc-modal__family-opts {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-bottom: var(--space-2);
}
.svc-modal__family-opt {
padding: 7px var(--space-4);
border-radius: var(--radius-full);
border: 1px solid var(--stroke);
background: rgb(255 255 255 / 55%);
font-size: var(--fs-sm);
color: var(--muted);
cursor: pointer;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
font-family: inherit;
}
@media (hover: hover) and (pointer: fine) {
.svc-modal__family-opt:hover {
border-color: rgb(var(--pp-red-rgb) / 35%);
}
}
.svc-modal__family-opt.active {
background: var(--pp-red);
color: #fff;
border-color: var(--pp-red);
}
.svc-modal__family-note {
font-size: var(--fs-xs);
color: var(--muted2);
margin-bottom: var(--space-5);
}
.svc-modal__switch-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
margin: 4px 0 var(--space-5);
}
.svc-modal__switch-label {
font-size: 11px;
font-weight: var(--fw-500);
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--muted2);
}
.svc-modal__switch {
position: relative;
display: inline-flex;
align-items: center;
padding: 3px;
border-radius: 999px;
background: #f0eeea;
border: 1px solid rgb(var(--gray-900-rgb) / 8%);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%);
}
.svc-modal__switch-pill {
position: absolute;
top: 3px;
left: 3px;
height: calc(100% - 6px);
width: 0;
border-radius: 999px;
background: var(--pp-red);
box-shadow: 0 2px 10px rgb(var(--pp-red-rgb) / 40%);
transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.28s ease;
}
.svc-modal__switch-btn {
position: relative;
z-index: 1;
border: none;
background: transparent;
padding: 9px 20px;
border-radius: 999px;
cursor: pointer;
font-size: var(--fs-sm);
font-weight: var(--fw-600);
color: var(--muted);
white-space: nowrap;
font-family: inherit;
transition: color var(--t-fast), transform var(--t-fast);
}
.svc-modal__switch-btn.active {
color: #fff;
}
.svc-modal__switch-btn:active {
transform: scale(0.98);
}
.svc-modal__switch-save {
font-size: 11px;
font-weight: var(--fw-600);
padding: 3px 10px;
border-radius: 20px;
background: #eaf3de;
color: #3b6d11;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.svc-modal__switch-save.visible {
opacity: 1;
transform: translateY(0);
}
.svc-modal__anim-in {
animation: svcModalFadeIn 0.26s ease both;
}
@keyframes fadeSlideIn {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes svcModalFadeIn {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.svc-modal__pay-badge--partial {
background: #eaf3de;
color: #3b6d11;
border-color: #97c459;
}
.svc-modal__price-val--anim {
animation: svcModalPriceSwap 0.22s ease;
}
@keyframes svcModalPriceSwap {
0% {
opacity: 0;
transform: translateY(-8px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.svc-all-list {
margin-top: var(--space-1);
display: grid;
gap: var(--space-2);
padding-bottom: 0;
margin-bottom: var(--space-3);
overflow-y: auto;
min-height: 0;
position: relative;
}
.svc-all-list::after {
content: '';
position: sticky;
left: 0;
right: 0;
bottom: 0;
height: 22px;
pointer-events: none;
background: linear-gradient(
180deg,
rgb(255 255 255 / 0%) 0%,
rgb(255 255 255 / 35%) 45%,
rgb(255 255 255 / 78%) 100%
);
backdrop-filter: blur(3px);
display: block;
}
.svc-all-list__item {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
gap: var(--space-3);
padding: var(--space-3) var(--space-3);
border: 1px solid rgb(var(--gray-900-rgb) / 8%);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: rgb(var(--gray-900-rgb) / 92%);
font-size: var(--fs-md);
line-height: 1.45;
}
.svc-all-list__title-wrap {
display: flex;
align-items: flex-start;
gap: var(--space-3);
min-width: 0;
flex: 1;
}
.svc-all-list__dot {
margin-top: 7px;
width: 6px;
height: 6px;
border-radius: var(--radius-full);
background: var(--brand);
flex-shrink: 0;
}
.svc-all-list__btn {
margin-left: auto;
align-self: center;
flex-shrink: 0;
min-width: 140px;
width: auto;
justify-content: center;
}
.svc-all-callout {
position: relative;
display: flex;
gap: var(--space-3);
justify-content: space-between;
align-items: stretch;
flex-direction: column;
margin: 0;
padding: var(--space-4) var(--space-4);
border-radius: var(--radius2);
background: radial-gradient(700px 220px at 10% 0%, rgb(var(--pp-red-rgb) / 16%), transparent 55%),
rgb(255 255 255 / 98%);
border: 1px solid rgb(var(--gray-900-rgb) / 10%);
box-shadow: var(--shadow-md);
z-index: var(--z-elevated);
}
.svc-all-callout__text {
display: grid;
gap: 3px;
}
@media (width >= 768px) {
.svc-modal {
padding: var(--space-8) var(--space-8) var(--space-6);
}
.svc-modal--all .svc-all-list {
max-height: min(58vh, 540px);
}
.svc-modal__title {
font-size: var(--fs-2xl);
}
.svc-modal__price-val {
font-size: var(--fs-display-md);
}
.services-all-cta {
flex-direction: row;
align-items: center;
}
.services-all-cta__btn {
width: auto;
}
.svc-all-list__btn {
min-width: 176px;
}
.svc-all-callout {
flex-direction: row;
align-items: center;
}
.svc-all-callout .btn {
width: auto;
justify-content: center;
}
}
/* Финальные оверрайды dark theme для секций/карточек с локальными хардкодами */
:root[data-theme='dark'] .hero::after {
background: rgb(13 13 15 / 84%);
}
:root[data-theme='dark'] .hero .muted,
:root[data-theme='dark'] .section__head p,
:root[data-theme='dark'] .card--service p,
:root[data-theme='dark'] .card__sub,
:root[data-theme='dark'] .about-bio,
:root[data-theme='dark'] .about-stat__t,
:root[data-theme='dark'] .fineprint {
color: var(--muted);
}
:root[data-theme='dark'] .hero .badge,
:root[data-theme='dark'] .stat,
:root[data-theme='dark'] .card--service,
:root[data-theme='dark'] .card,
:root[data-theme='dark'] .card--step,
:root[data-theme='dark'] .callout,
:root[data-theme='dark'] .services-all-cta,
:root[data-theme='dark'] .svc-all-callout,
:root[data-theme='dark'] .contacts__form-card,
:root[data-theme='dark'] .about-proof,
:root[data-theme='dark'] .about-tag,
:root[data-theme='dark'] .about-tag--accent,
:root[data-theme='dark'] .about-stat {
background: var(--panel2);
border-color: var(--stroke);
color: var(--text);
}
:root[data-theme='dark'] .hero .badge {
background: rgb(var(--pp-red-rgb) / 20%);
border-color: rgb(var(--pp-red-rgb) / 45%);
color: rgb(255 232 236 / 98%);
}
:root[data-theme='dark'] .card--quote {
background: linear-gradient(135deg, rgb(var(--pp-red-rgb) / 98%), rgb(176 0 18 / 94%));
border-color: rgb(var(--pp-red-rgb) / 70%);
}
@media (hover: hover) and (pointer: fine) {
:root[data-theme='dark'] .card--service:hover {
box-shadow: var(--shadow-lg);
border-color: rgb(255 255 255 / 16%);
}
}
:root[data-theme='dark'] .section--alt {
background: rgb(255 255 255 / 2%);
border-top-color: var(--stroke);
border-bottom-color: var(--stroke);
}
:root[data-theme='dark'] [data-crest-reveal].crest-on {
background: rgb(255 255 255 / 3%);
}
:root[data-theme='dark'] [data-crest-reveal].crest-on .card--service,
:root[data-theme='dark'] [data-crest-reveal].crest-on .callout {
background: var(--panel);
border-color: var(--stroke);
}
:root[data-theme='dark'] section#faq {
background: transparent;
}
:root[data-theme='dark'] #faq .pp-faq,
:root[data-theme='dark'] #faq .pp-faq__item,
:root[data-theme='dark'] #faq .pp-faq__head,
:root[data-theme='dark'] #faq .pp-faq__panel,
:root[data-theme='dark'] #faq .pp-faq__search-input,
:root[data-theme='dark'] #faq .dropdown__menu,
:root[data-theme='dark'] #faq .pp-faq__suggestion-item {
background: var(--panel2);
border-color: var(--stroke);
color: var(--text);
}
:root[data-theme='dark'] #faq .pp-faq__question,
:root[data-theme='dark'] #faq .pp-faq__sug-text,
:root[data-theme='dark'] #faq .pp-faq__panel strong {
color: var(--text);
}
:root[data-theme='dark'] #faq .pp-faq__panel a,
:root[data-theme='dark'] #faq .pp-faq__src {
color: var(--brand-light);
}
:root[data-theme='dark'] #faq .pp-faq__suggestion-item.pp-faq__suggestion-item--active {
background: rgb(255 255 255 / 5%);
}
@media (hover: hover) and (pointer: fine) {
:root[data-theme='dark'] #faq .pp-faq__head:hover,
:root[data-theme='dark'] #faq .pp-faq__suggestion-item:hover {
background: rgb(255 255 255 / 5%);
}
}
:root[data-theme='dark'] input,
:root[data-theme='dark'] textarea,
:root[data-theme='dark'] .field-select,
:root[data-theme='dark'] .field-select .field__control--select,
:root[data-theme='dark'] .radio__indicator {
background: var(--panel2);
border-color: var(--stroke);
color: var(--text);
}
:root[data-theme='dark'] .field span,
:root[data-theme='dark'] .contacts__form-card .field > span {
color: var(--text);
}
:root[data-theme='dark'] .phone-input-flag {
background: rgb(255 255 255 / 6%);
border-color: var(--stroke);
}
:root[data-theme='dark'] input::placeholder,
:root[data-theme='dark'] textarea::placeholder {
color: var(--form-placeholder);
}
:root[data-theme='dark'] .map-shell,
:root[data-theme='dark'] .map-card {
background: var(--panel2);
border-color: var(--stroke);
}
@media (prefers-reduced-motion: reduce) {
.svc-modal {
transition: none;
}
}
/*
* После закрытия любого