/* CSS-BUNDLE-MANIFEST
*
* Файл собран скриптом scripts/build-css-bundle.py — РУКАМИ НЕ ПРАВИТЬ.
* Правка уедет при следующей пересборке. Менять нужно исходники ниже,
* затем пересобрать: python3 scripts/build-css-bundle.py --apply
*
* Состав и контрольные суммы (порядок = порядок каскада):
* 9bdb6e40b6b5297f 24741 design-system/colors_and_type.css
* 755b91e4d9ce49c0 12831 approach.css
* 834b64d9a1d4c5fe 6246 science.css
* 80abc1b504f2ca3a 8744 boundaries.css
* a74869731bcfe484 7100 certs.css
* 130f6452ebc7360d 4989 certs-tabs.css
* dd9f9abd1c886abb 4958 author-methods.css
* dec3983560bfeccb 4674 supervision.css
* 4bb23889a9e922da 7262 edu.css
* 8df256fda1d114e6 11230 cases.css
* 2988ef5dc8a69318 11575 pricing.css
* f6887d63ad202057 3545 finale.css
* 52d734aaccf4c013 5788 support.css
* 4d2c666bd5b0bff1 12784 booking-modal.css
* 2ee2b94c016969e7 5441 pdf-doc.css
* 6efe5790ed8acab3 5244 diag.css
* d49f70addf6aaa6c 3342 faq.css
* f583536000127fc2 5786 testimonials.css
* 6d01ffb773092587 4683 about-me.css
* 367d7043f8a5fc64 5511 book.css
* f890b5c2e26e0fd3 5314 articles.css
* 30450b1feb92ef82 9015 footer.css
* 748520c44faf608a 3190 final-cta.css
* da2bac38a8707819 9637 lead-magnet.css
* 1d77cda0e450b3f6 2359 mobile-overrides.css
*/
/* ═══ design-system/colors_and_type.css ═══ */
/* =====================================================
alexlisovoy.ru · Brand & Design System · Tokens v2.1
Colors + Typography master file
Import from any HTML in the project.
===================================================== */
/* ─── Self-hosted Cormorant + Montserrat (РФ-надёжность; было Google Fonts ) ─── */
/* ── Фолбэк-метрики: убирают сдвиг вёрстки при подмене шрифта (Транш 3, блок A) ──
До загрузки наших гарнитур браузер рисует текст системным шрифтом. Он шире (Arial
0.592 em на символ против 0.473 у Fira Sans Compressed), поэтому при подмене строки
меняли ширину и высоту — это давало 94 сдвига из 97 по замерам аудита.
size-adjust и *-override подогнаны по метрикам самих файлов так, чтобы запасной
шрифт занимал ровно то же место. Гарнитуры и их облик не меняются. */
@font-face {
font-family: 'Fira Fallback';
src: local('Arial'), local('Helvetica Neue'), local('Roboto'), local('Liberation Sans');
size-adjust: 84.08%;
ascent-override: 111.20%;
descent-override: 31.52%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Cormorant Fallback';
src: local('Georgia'), local('Times New Roman'), local('Noto Serif'), local('Liberation Serif');
size-adjust: 86.87%;
ascent-override: 106.37%;
descent-override: 33.04%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Montserrat Fallback';
src: local('Arial'), local('Helvetica Neue'), local('Roboto'), local('Liberation Sans');
size-adjust: 92.04%;
ascent-override: 105.17%;
descent-override: 27.27%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Bebas Fallback';
src: local('Impact'), local('Arial Narrow Bold'), local('Arial'), local('Roboto Condensed');
size-adjust: 76.51%;
ascent-override: 98.03%;
descent-override: 32.68%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Cormorant Fallback';
font-style: italic;
src: local('Georgia Italic'), local('Times New Roman Italic'), local('Noto Serif Italic');
size-adjust: 78.18%;
ascent-override: 118.19%;
descent-override: 36.71%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Fira Fallback';
font-style: italic;
src: local('Arial Italic'), local('Helvetica Neue Italic'), local('Roboto Italic');
size-adjust: 82.80%;
ascent-override: 112.92%;
descent-override: 32.00%;
line-gap-override: 0%;
}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:400;font-display:swap;src:url('/design-system/fonts/cormorant-400i-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:400;font-display:swap;src:url('/design-system/fonts/cormorant-400i-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:400;font-display:swap;src:url('/design-system/fonts/cormorant-400i-latin-ext.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}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:400;font-display:swap;src:url('/design-system/fonts/cormorant-400i-latin.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}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:500;font-display:swap;src:url('/design-system/fonts/cormorant-500i-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:500;font-display:swap;src:url('/design-system/fonts/cormorant-500i-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:500;font-display:swap;src:url('/design-system/fonts/cormorant-500i-latin-ext.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}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:500;font-display:swap;src:url('/design-system/fonts/cormorant-500i-latin.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}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:600;font-display:swap;src:url('/design-system/fonts/cormorant-600i-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:600;font-display:swap;src:url('/design-system/fonts/cormorant-600i-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:600;font-display:swap;src:url('/design-system/fonts/cormorant-600i-latin-ext.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}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:600;font-display:swap;src:url('/design-system/fonts/cormorant-600i-latin.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}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:400;font-display:swap;src:url('/design-system/fonts/cormorant-400-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:400;font-display:swap;src:url('/design-system/fonts/cormorant-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:400;font-display:swap;src:url('/design-system/fonts/cormorant-400-latin-ext.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}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:400;font-display:swap;src:url('/design-system/fonts/cormorant-400-latin.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}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:500;font-display:swap;src:url('/design-system/fonts/cormorant-500-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:500;font-display:swap;src:url('/design-system/fonts/cormorant-500-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:500;font-display:swap;src:url('/design-system/fonts/cormorant-500-latin-ext.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}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:500;font-display:swap;src:url('/design-system/fonts/cormorant-500-latin.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}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:600;font-display:swap;src:url('/design-system/fonts/cormorant-600-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:600;font-display:swap;src:url('/design-system/fonts/cormorant-600-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:600;font-display:swap;src:url('/design-system/fonts/cormorant-600-latin-ext.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}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:600;font-display:swap;src:url('/design-system/fonts/cormorant-600-latin.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}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/design-system/fonts/montserrat-700-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/design-system/fonts/montserrat-700-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/design-system/fonts/montserrat-700-latin-ext.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}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/design-system/fonts/montserrat-700-latin.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}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('/design-system/fonts/montserrat-800-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('/design-system/fonts/montserrat-800-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('/design-system/fonts/montserrat-800-latin-ext.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}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('/design-system/fonts/montserrat-800-latin.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}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:900;font-display:swap;src:url('/design-system/fonts/montserrat-900-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:900;font-display:swap;src:url('/design-system/fonts/montserrat-900-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:900;font-display:swap;src:url('/design-system/fonts/montserrat-900-latin-ext.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}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:900;font-display:swap;src:url('/design-system/fonts/montserrat-900-latin.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}
/* Знак рубля отдельным файлом: ₽ (U+20BD) попадает в поднабор latin-ext,
и ради двух символов на /olt/ браузер тянул 69 КБ. Эти объявления идут ПОСЛЕ
latin-ext — при равном покрытии выигрывает последний подходящий @font-face. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/design-system/fonts/montserrat-700-rub.woff2') format('woff2');unicode-range:U+20BD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('/design-system/fonts/montserrat-800-rub.woff2') format('woff2');unicode-range:U+20BD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:900;font-display:swap;src:url('/design-system/fonts/montserrat-900-rub.woff2') format('woff2');unicode-range:U+20BD}
/* ─── Local fonts: Fira Sans Compressed + Bebas Neue ─ */
@font-face {
font-family: 'Fira Sans Compressed';
src: url('/design-system/fonts/FiraSansCompressed-Book.woff2') format('woff2');
font-weight: 350; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Fira Sans Compressed';
src: url('/design-system/fonts/FiraSansCompressed-BookItalic.woff2') format('woff2');
font-weight: 350; font-style: italic; font-display: swap;
}
@font-face {
font-family: 'Fira Sans Compressed';
src: url('/design-system/fonts/FiraSansCompressed-Regular-s1.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Fira Sans Compressed';
src: url('/design-system/fonts/FiraSansCompressed-Medium-s1.woff2') format('woff2');
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Fira Sans Compressed';
src: url('/design-system/fonts/FiraSansCompressed-MediumItalic-s1.woff2') format('woff2');
font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
font-family: 'Fira Sans Compressed';
src: url('/design-system/fonts/FiraSansCompressed-BoldItalic.woff2') format('woff2');
font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
font-family: 'Fira Sans Compressed';
src: url('/design-system/fonts/FiraSansCompressed-HeavyItalic.woff2') format('woff2');
font-weight: 900; font-style: italic; font-display: swap;
}
@font-face {
font-family: 'Bebas Neue';
src: url('/design-system/fonts/BebasNeue-Regular.woff2') format('woff2');
font-weight: 400; font-display: swap;
}
@font-face {
font-family: 'Bebas Neue';
src: url('/design-system/fonts/BebasNeue-Bold-s1.woff2') format('woff2');
font-weight: 700; font-display: swap;
}
:root {
/* ─── Surfaces ─── */
--bg-warm: #F5F1EC; /* primary page bg */
--bg-cream: #FAF6F0; /* alternating bg */
--surface: #FFFFFF; /* cards "sheet of paper" */
--bg-dark: #2A2520; /* dark "islands" */
--bg-dark-deep: #1F1B17; /* footer */
/* ─── Accent (ochre — the only "speaking" colour) ─── */
--accent: #C8792A;
--accent-dark: #A66220;
--accent-soft: rgba(200, 121, 42, 0.08);
--accent-glow: rgba(245, 179, 106, 0.18);
--accent-line: rgba(200, 121, 42, 0.20);
--border-accent: rgba(200, 121, 42, 0.20);
/* ─── Text ─── */
--text-dark: #2C2C2A;
--text-muted: #8A8880;
--text-light: #F5F1EC;
--text-muted-dark: #B4B2A9;
/* ─── Lines ─── */
--border: #E8E4DF;
/* ─── Semantic ─── */
--danger: #8B2E1F;
--dont-red: #B85446;
--do-green: #5A9A6E;
--success: #5A9A6E;
--warning: #C8792A;
/* ─── Aliases (fg/bg short names) ─── */
--fg1: var(--text-dark);
--fg2: var(--text-muted);
--bg1: var(--bg-warm);
--bg2: var(--bg-cream);
--line: var(--border);
--brand: var(--accent);
/* ─── Font families ─── */
--font-serif: 'Cormorant', 'Cormorant Fallback', Georgia, 'Times New Roman', serif;
--font-body: 'Fira Sans Compressed', 'Fira Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI Condensed', sans-serif;
--font-heading: 'Bebas Neue', 'Bebas Fallback', 'Impact', sans-serif;
--font-number: 'Montserrat', 'Montserrat Fallback', 'Arial Black', sans-serif;
--font-mono: 'Courier New', ui-monospace, monospace;
/* ─── Type scale ─── */
--text-display: 700 104px/0.92 var(--font-body);
--text-hero-serif: 500 88px/1.0 var(--font-serif);
--text-hero-caps: 700 88px/0.95 var(--font-body);
--text-section: 500 52px/1.1 var(--font-serif);
--text-h1: 500 36px/1.15 var(--font-serif);
--text-h2-italic: 500 italic 32px/1.3 var(--font-serif);
--text-h3: 500 26px/1.3 var(--font-serif);
--text-h4: 500 20px/1.3 var(--font-body);
--text-lead: 400 21px/1.55 var(--font-body);
--text-body-lg: 400 19px/1.65 var(--font-body);
--text-body: 400 17px/1.65 var(--font-body);
--text-body-sm: 400 15px/1.55 var(--font-body);
--text-caption: 400 13px/1.5 var(--font-body);
--text-overline: 500 13px/1.3 var(--font-body);
--text-label-caps: 700 14px/1.3 var(--font-heading);
--text-num-hero: 900 96px/0.9 var(--font-number);
--text-num-meta: 900 44px/1 var(--font-number);
--text-num-small: 900 14px/1 var(--font-number);
--text-quote-lg: 500 italic 32px/1.4 var(--font-serif);
--text-quote-md: 500 italic 26px/1.45 var(--font-serif);
/* ─── Letter-spacing ─── */
--ls-display: -2.5px;
--ls-tight: -1.5px;
--ls-h2: -0.5px;
--ls-default: 0;
--ls-overline: 2.5px;
--ls-uppercase: 2px;
--ls-label-caps: 3px;
/* ─── Spacing scale (×4) ─── */
--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;
--space-30: 120px;
/* ─── Radii ─── */
--radius-xs: 3px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-pill: 999px; /* avatars, code-badges only */
/* ─── Border widths ─── */
--bw: 1px;
--bw-accent: 3px;
--bw-cta: 4px;
/* ─── Shadows (used sparingly) ─── */
--shadow-photo: 0 20px 60px rgba(42, 37, 32, 0.15), 0 8px 24px rgba(42, 37, 32, 0.08);
--shadow-hover: 0 4px 16px rgba(42, 37, 32, 0.06);
--shadow-card: 0 2px 12px rgba(42, 37, 32, 0.06);
--shadow-faint: 0 1px 2px rgba(42, 37, 32, 0.04);
--shadow-book: 0 40px 80px rgba(0, 0, 0, 0.55), 0 0 80px rgba(200, 121, 42, 0.15);
/* ─── Motion ─── */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease: ease;
--dur-fast: 0.15s;
--dur: 0.2s;
--dur-med: 0.32s;
--dur-slow: 0.6s;
/* ─── Layout ─── */
--container: 1240px;
--container-narrow: 820px;
--container-text: 720px;
--gutter: 32px;
--gutter-mobile: 20px;
}
/* ═══════════════════════════════════════════════════
SEMANTIC ELEMENT DEFAULTS
═══════════════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
background: var(--bg-warm);
color: var(--text-dark);
font: var(--text-body);
font-family: var(--font-body);
}
img, video { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
h1 { font: var(--text-h1); color: var(--text-dark); text-wrap: pretty; }
h2 { font: var(--text-section); color: var(--text-dark); letter-spacing: var(--ls-h2); text-wrap: pretty; }
h3 { font: var(--text-h3); color: var(--text-dark); text-wrap: pretty; }
h4 {
font: var(--text-overline);
color: var(--text-muted);
letter-spacing: var(--ls-overline);
text-transform: uppercase;
}
em { font-style: italic; color: var(--accent); font-weight: 500; }
p { margin: 0 0 1em; text-wrap: pretty; }
a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-color: var(--accent-line);
text-decoration-thickness: 1px;
transition: color var(--dur) var(--ease),
text-decoration-color var(--dur) var(--ease);
}
a:hover { color: var(--accent-dark); text-decoration-color: var(--accent); }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }
blockquote {
font: var(--text-quote-md);
color: var(--text-dark);
border-left: var(--bw-accent) solid var(--accent);
padding: var(--space-6) 0 var(--space-6) 28px;
max-width: 720px;
}
blockquote::before { content: '«'; color: var(--accent); margin-right: 4px; }
blockquote::after { content: '»'; color: var(--accent); margin-left: 4px; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-12) 0; }
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ═══════════════════════════════════════════════════
UTILITY CLASSES
═══════════════════════════════════════════════════ */
.eyebrow,
.overline {
font: var(--text-overline);
letter-spacing: var(--ls-overline);
text-transform: uppercase;
color: var(--accent);
display: block;
}
.overline-muted { color: var(--text-muted); }
.label-caps {
font: var(--text-label-caps);
letter-spacing: var(--ls-label-caps);
text-transform: uppercase;
color: var(--accent);
}
.section-title {
font: var(--text-section);
letter-spacing: var(--ls-h2);
color: var(--text-dark);
text-wrap: pretty;
}
.muted { color: var(--text-muted); }
.lead {
font: var(--text-lead);
color: var(--text-muted);
max-width: 640px;
text-wrap: pretty;
}
.display-caps {
font: var(--text-display);
letter-spacing: var(--ls-display);
text-transform: uppercase;
}
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); position: relative; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.container-text { max-width: var(--container-text); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 767px) {
.container, .container-narrow, .container-text { padding: 0 var(--gutter-mobile); }
}
.bg-warm { background: var(--bg-warm); }
.bg-cream { background: var(--bg-cream); }
.bg-surface { background: var(--surface); }
.bg-dark { background: var(--bg-dark); color: var(--text-light); }
.bg-dark-deep { background: var(--bg-dark-deep); color: var(--text-muted-dark); }
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-lg { padding: 120px 0; }
@media (max-width: 860px) {
.section { padding: 64px 0; }
.section-sm { padding: 48px 0; }
.section-lg { padding: 80px 0; }
}
@media (max-width: 767px) {
.section, .section-lg { padding: 48px 0; }
.section-sm { padding: 36px 0; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
html { scroll-behavior: auto; }
}
/* ═══ approach.css ═══ */
/* ════════════════════════════════════════════════════
Approach section
Часть 1: eyebrow · h2 · transition · список 2 кол · pull-quote
Мост: eyebrow по центру с охряными штрихами
Часть 2: сетка 3×2 принципов работы
Tokens: design-system/colors_and_type.css
════════════════════════════════════════════════════ */
.approach {
border-top: 1px solid var(--border);
padding: clamp(72px, 9vw, 120px) 0 clamp(96px, 11vw, 128px);
position: relative;
color: var(--text-dark);
}
.approach__container {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
width: 100%;
}
/* ─── Eyebrow в начале секции ─── */
.approach__eyebrow {
font: 500 13px/1.3 var(--font-body);
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 24px;
display: inline-flex;
align-items: center;
gap: 16px;
}
.approach__eyebrow::before,
.approach__eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background: var(--accent);
}
/* ─── Заголовок ─── */
.approach__h2 {
font: 500 clamp(30px, 3.4vw, 44px)/1.2 var(--font-serif);
letter-spacing: -0.4px;
color: var(--text-dark);
margin: 0 0 40px;
max-width: 1080px;
text-wrap: pretty;
}
.approach__h2 em {
color: var(--accent);
font-style: italic;
font-weight: 500;
}
.approach__transition {
font: 500 italic clamp(20px, 1.7vw, 24px)/1.45 var(--font-serif);
color: var(--text-dark);
margin: 0 0 28px;
}
/* ─── Интро на полную ширину (v2.2 — фото переехало в practice) ─── */
.approach__intro {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.approach__intro .approach__h2 {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.approach__intro .approach__lead-intro {
text-align: left;
max-width: 720px;
margin: 0 auto 22px;
}
.approach__intro .approach__transition {
text-align: left;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.approach__intro .approach__list {
text-align: left;
max-width: 720px;
margin: 0 auto;
}
/* ─── split: текст + фото с цитатой (LEGACY — больше не используется) ─── */
.approach__split {
display: grid;
grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr);
gap: clamp(40px, 5vw, 72px);
align-items: start;
}
.approach__split-text { min-width: 0; }
.approach__right {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
max-width: 320px;
margin-left: auto;
}
/* ─── Список (одна колонка) ─── */
.approach__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.approach__list-item {
display: grid;
grid-template-columns: 18px 1fr;
gap: 16px;
align-items: baseline;
}
.approach__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
display: block;
margin-top: 9px;
margin-left: 5px;
}
.approach__list-body {
font: 400 clamp(17px, 1.3vw, 19px)/1.6 var(--font-body);
color: var(--text-dark);
}
.approach__list-body strong {
font-weight: 500;
color: var(--text-dark);
}
/* ─── Лёгкий hover на пунктах списка ─── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.approach__list--dots .approach__list-item {
transition: transform 0.28s ease;
}
.approach__list--dots .approach__dot {
transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.approach__list--dots .approach__list-item:hover {
transform: translateX(6px);
}
.approach__list--dots .approach__list-item:hover .approach__dot {
transform: scale(1.4);
box-shadow: 0 0 0 4px rgba(200, 121, 42, 0.16);
}
}
/* ─── Фото + цитата под фото в правой колонке ─── */
.approach__photo-frame {
margin: 0;
display: block;
flex: 0 0 auto;
width: 100%;
height: clamp(260px, 22vw, 320px);
border-radius: 6px;
overflow: hidden;
box-shadow: var(--shadow-photo);
}
.approach__photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 22%;
display: block;
filter: saturate(0.92) contrast(1.02);
}
.approach__quote-aside {
margin: 0;
padding: 4px 2px 0;
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
align-items: start;
}
.approach__quote-aside-mark {
font: 500 italic 36px/0.7 var(--font-serif);
color: var(--accent);
display: block;
margin-top: 2px;
}
.approach__quote-aside-text {
font: 500 italic 14px/1.5 var(--font-serif);
color: var(--text-dark);
margin: 0;
grid-column: 2;
text-wrap: pretty;
}
.approach__quote-aside-attr {
font: 500 10px/1.4 var(--font-body);
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--accent);
margin: 6px 0 0;
grid-column: 2;
}
/* ─── Лёгкий hover на цитате под фото ─── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.approach__quote-aside {
transition: transform 0.28s ease;
}
.approach__quote-aside-mark {
transition: transform 0.28s ease;
transform-origin: left top;
}
.approach__quote-aside:hover {
transform: translateY(-2px);
}
.approach__quote-aside:hover .approach__quote-aside-mark {
transform: scale(1.18);
}
}
/* ─── Мост-eyebrow + заголовок между частями ─── */
.approach__bridge {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
margin: 80px 0 48px;
text-align: center;
}
.approach__bridge-eyebrow {
display: inline-flex;
align-items: center;
gap: 16px;
font: 500 13px/1 var(--font-body);
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--accent);
}
.approach__bridge-eyebrow::before,
.approach__bridge-eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background: var(--accent);
}
.approach__bridge-title {
font: 500 clamp(30px, 3.4vw, 44px)/1.15 var(--font-serif);
letter-spacing: -0.4px;
color: var(--text-dark);
margin: 0;
max-width: 880px;
text-wrap: pretty;
}
.approach__bridge-title em {
font-style: italic;
color: var(--accent);
font-weight: 500;
}
/* ═══════════════════════════════════════════════
Сетка 6 принципов работы
═══════════════════════════════════════════════ */
.principles-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.principle-card {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 36px 32px 32px;
transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.principle-card:hover {
border-color: var(--accent);
transform: translateY(-2px);
}
.principle-card__num {
position: absolute;
top: 24px;
right: 28px;
font-family: var(--font-number);
font-weight: 900;
font-size: 14px;
color: var(--accent);
letter-spacing: 0.5px;
line-height: 1;
}
.principle-card__title {
font-family: var(--font-serif);
font-weight: 500;
font-size: 22px;
line-height: 1.25;
color: var(--text-dark);
margin: 0 36px 16px 0;
text-wrap: pretty;
}
.principle-card__title em {
font-style: italic;
color: var(--accent);
font-weight: 500;
}
.principle-card__desc {
font-family: var(--font-body);
font-weight: 400;
font-size: 15px;
line-height: 1.55;
color: var(--text-muted, rgba(60, 50, 40, 0.7));
margin: 0;
}
/* ─── Responsive ─── */
@media (max-width: 860px) {
.approach__split {
grid-template-columns: 1fr;
gap: 32px;
}
.approach__right { max-width: 360px; margin-left: 0; }
.approach__photo-frame { height: 320px; }
}
@media (max-width: 860px) {
.principles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.approach__h2 { font-size: 28px; margin-bottom: 32px; }
.approach__transition { font-size: 18px; margin-bottom: 24px; }
.approach__pullquote { padding: 32px 28px; }
.approach__pullquote-text { font-size: 19px; }
.approach__pullquote-mark { font-size: 48px; }
.approach__bridge { margin: 56px 0 32px; gap: 14px; }
.approach__bridge-title { font-size: 26px; }
.principle-card { padding: 28px 24px 24px; }
.principle-card__title { font-size: 20px; }
.principle-card__desc { font-size: 14px; }
}
@media (max-width: 600px) {
.principles-grid { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════
Манифест + плашки (v2.0)
Заменяет сетку 3×2 принципов. Структура:
.practice
└─ .practice__manifesto
│ └─ .practice__paragraph × 3 (Cormorant, italic-em охрой)
└─ .practice__notes
└─ .practice__note × 4 (sans-serif, hairline-разделёные)
══════════════════════════════════════ */
.practice {
display: flex;
flex-direction: column;
gap: 64px;
}
/* ── Верхний слой: прозовый манифест ── */
.practice__manifesto {
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 28px;
}
/* ── v2.2: split — манифест слева, фото с цитатой справа ── */
.practice__split {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 72px;
align-items: start;
justify-content: center;
}
.practice__split .practice__manifesto {
max-width: 720px;
margin: 0;
}
.practice__aside {
display: flex;
flex-direction: column;
gap: 20px;
margin: 0;
}
.practice__paragraph {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(20px, 1.55vw, 22px);
line-height: 1.55;
letter-spacing: -0.1px;
color: var(--text-dark);
margin: 0;
text-wrap: pretty;
}
.practice__paragraph em {
font-style: italic;
font-weight: 500;
color: var(--accent);
}
/* ── Нижний слой: 4 surface-карточки с italic-кикером охрой ── */
.practice__notes {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.practice__note {
display: flex;
flex-direction: column;
gap: 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 4px;
padding: 28px 26px 24px;
transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.practice__note:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(42,37,32,0.06);
}
.practice__note-kicker {
display: inline-flex;
align-items: center;
gap: 12px;
font: 500 italic clamp(21px, 1.7vw, 25px)/1.15 var(--font-serif);
color: var(--accent);
letter-spacing: -0.2px;
}
.practice__note-kicker::after {
content: '';
flex: 1;
height: 1px;
background: var(--accent-line, rgba(200, 121, 42, 0.2));
}
.practice__note-text {
font: 400 17px/1.6 var(--font-body);
color: var(--text-dark);
margin: 0;
text-wrap: pretty;
}
@media (max-width: 860px) {
.practice { gap: 48px; }
.practice__split { grid-template-columns: 1fr; gap: 32px; }
.practice__aside { max-width: 360px; }
.practice__notes { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 600px) {
.practice__paragraph { font-size: 18px; line-height: 1.6; }
.practice__notes { grid-template-columns: 1fr; gap: 10px; }
.practice__note { padding: 24px 22px 22px; }
.practice__note-kicker { font-size: 20px; }
}
/* ─── Лид-интро «Особенностей» (опыт предыдущей терапии) ─── */
.approach__lead-intro {
font: 500 clamp(19px, 1.6vw, 23px)/1.5 var(--font-serif); /* прямое — не сливается с курсивным «Чаще всего…» */
color: var(--text-dark);
padding-left: 20px;
border-left: 3px solid var(--accent); /* та же охряная черта, что у addendum в Hero */
max-width: 720px;
margin: 0 0 22px;
text-wrap: pretty;
}
/* ═══ science.css ═══ */
/* ════════════════════════════════════════════════════
Science — «Научная опора» (тёмный остров, редизайн ТЗ 21.07.2026)
Явно «научная» композиция: сетка-миллиметровка на фоне,
слева — тезис + подпись-метод, справа — вертикальный
степпер (кольца-узлы + пунктирная линия процесса) с
замыкающим узлом-циклом (итеративность).
Светлый исходник: архив/science-светлый.css
Tokens: design-system/colors_and_type.css
════════════════════════════════════════════════════ */
.science{position:relative;background:var(--bg-dark);padding:clamp(56px,6vw,84px) 0;overflow:hidden}
/* Сетка-миллиметровка — «лабораторный» подтекст, тускнеет к краям */
.science::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(245,241,236,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(245,241,236,.05) 1px,transparent 1px);background-size:34px 34px;-webkit-mask-image:radial-gradient(125% 105% at 72% 38%,#000 34%,transparent 100%);mask-image:radial-gradient(125% 105% at 72% 38%,#000 34%,transparent 100%)}
.science__container{position:relative;z-index:1;width:min(1120px,100% - 64px);margin:0 auto;display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:clamp(36px,5vw,80px);align-items:start}
/* ── Штамп-печать «научный подход» ── */
.science__stamp{position:absolute;z-index:3;top:clamp(14px,1.6vw,22px);right:clamp(10px,2.6vw,30px);width:clamp(116px,12vw,150px);color:var(--accent);transform:rotate(-9deg);opacity:.92;pointer-events:none;filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))}
.science__stamp svg{width:100%;height:auto;display:block}
/* штамп занимает верх-правый угол — освобождаем место у первого пункта */
.science__points--stamped .science__point:first-child h3,.science__points--stamped .science__point:first-child p{padding-right:clamp(0px,10vw,150px)}
@media (max-width:880px){.science__points--stamped .science__point:first-child h3,.science__points--stamped .science__point:first-child p{padding-right:0}}
/* ── Левая колонка: тезис + метод ── */
.science__eyebrow{display:inline-flex;align-items:center;gap:12px;font:500 12px/1 var(--font-body);letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.science__eyebrow::before{content:'';width:30px;height:1px;background:var(--accent)}
.science__h2{font:500 clamp(26px,2.6vw,34px)/1.22 var(--font-serif);letter-spacing:-.4px;color:#F5F1EC;margin:0 0 16px;text-wrap:balance}
.science__h2 em{font-style:italic;color:var(--accent)}
.science__lead{font:400 15.5px/1.62 var(--font-body);color:rgba(245,241,236,.84);margin:0;text-wrap:pretty}
/* Подпись-метод — компактная «формула» научного цикла */
.science__method{display:flex;flex-wrap:wrap;align-items:center;gap:13px 11px;margin:clamp(22px,2.6vw,30px) 0 0;padding-top:clamp(18px,2vw,22px);border-top:1px solid rgba(245,241,236,.12)}
.science__method-cap{font:500 11px/1 var(--font-body);letter-spacing:2px;text-transform:uppercase;color:rgba(245,241,236,.58);margin-right:2px}
.science__method span{display:inline-flex;align-items:center;gap:11px;font:700 11.5px/1 var(--font-body);letter-spacing:1.6px;text-transform:uppercase;color:var(--accent)}
.science__method span:not(.science__method-cap):not(:nth-of-type(1))::before{content:'→';color:rgba(245,241,236,.4);font-weight:400}
/* ── Правая колонка: степпер процесса ── */
.science__flow-label{display:flex;align-items:center;gap:14px;font:500 11.5px/1 var(--font-body);letter-spacing:2px;text-transform:uppercase;color:rgba(245,241,236,.58);margin:0 0 clamp(20px,2.4vw,28px)}
.science__flow-label::after{content:'';flex:1;height:1px;background:rgba(245,241,236,.14)}
.science__points{list-style:none;margin:0;padding:0;position:relative}
/* Линия процесса — охряной пунктир от первого узла к циклу */
.science__points::before{content:'';position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:repeating-linear-gradient(rgba(200,121,42,.85) 0 5px,transparent 5px 11px)}
.science__point{position:relative;display:grid;grid-template-columns:44px 1fr;column-gap:22px;padding:0 0 clamp(24px,2.8vw,34px);align-items:start}
.science__point:last-child{padding-bottom:0}
.science__num{grid-row:1;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--accent);background:var(--bg-dark);display:flex;align-items:center;justify-content:center;font:900 15px/1 var(--font-number);color:var(--accent);position:relative;z-index:1}
.science__point>div{padding-top:8px}
.science__point h3{font:700 clamp(17px,1.4vw,19px)/1.3 var(--font-serif);color:#F5F1EC;margin:0 0 5px;text-wrap:pretty}
.science__point p{font:400 14.5px/1.55 var(--font-body);color:rgba(245,241,236,.82);margin:0;text-wrap:pretty}
/* Замыкающий узел — цикл */
.science__num--loop{border-style:dashed;font:400 20px/1 var(--font-body);color:var(--accent)}
.science__point--loop>div{padding-top:11px}
.science__point--loop p{font:500 13.5px/1.5 var(--font-body);color:rgba(245,241,236,.72)}
.science__point--loop em{font-style:normal;color:var(--accent);font-weight:700}
@media (max-width:880px){
.science__container{grid-template-columns:1fr;gap:clamp(30px,5vw,40px)}
.science__stamp{width:clamp(104px,15vw,128px);top:clamp(-14px,-1vw,-8px);right:clamp(8px,2vw,20px)}
}
@media (max-width:600px){
.science{padding:52px 0}
.science__container{width:min(1120px,100% - 40px)}
.science__point{column-gap:16px}
.science__stamp{position:static;transform:rotate(-6deg);width:100px;margin:0 4px 22px auto;filter:none}
}
/* ═══ boundaries.css ═══ */
/* ════════════════════════════════════════════════
Boundaries — «Мои границы» (v2 — переработка контраста)
ТЗ: TZ-moi-granitsy.md
v2 changes (доработка контраста):
— Lead: text-muted → text-dark с opacity 0.78, лучшая читаемость
— Section background: bg-cream (тонкая дифференциация от bg-warm соседей)
— Promises: 2 раздельные surface-карточки (#FFFFFF) с hairline + shadow,
вместо одного cream-блока на cream-фоне
— «Не обещаю» текст: text-dark italic вместо text-muted, видимый
— Транзишн-фраза остаётся охрой italic Cormorant — это якорь смены регистра
════════════════════════════════════════════════ */
.boundaries {
padding: clamp(80px, 10vw, 120px) 0;
background: var(--bg-cream);
}
.boundaries__container {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
}
/* ─── Intro: centered eyebrow + h2 + lead ─── */
.boundaries__intro {
max-width: 820px;
margin: 0 auto 72px;
text-align: center;
}
.boundaries__eyebrow {
font: 500 13px/1.3 var(--font-body);
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 24px;
display: inline-flex;
align-items: center;
gap: 16px;
}
.boundaries__eyebrow::before,
.boundaries__eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background: var(--accent);
}
.boundaries__title {
font: 500 clamp(30px, 3.4vw, 44px)/1.2 var(--font-serif);
letter-spacing: -0.4px;
color: var(--text-dark);
margin: 0 0 24px;
text-wrap: pretty;
}
.boundaries__title em {
color: var(--accent);
font-style: italic;
font-weight: 500;
}
.boundaries__lead {
font: 500 clamp(19px, 1.6vw, 23px)/1.5 var(--font-serif); /* как .approach__lead-intro */
color: var(--text-dark);
margin: 0 auto;
max-width: 720px;
text-align: left;
padding-left: 20px;
border-left: 3px solid var(--accent);
text-wrap: pretty;
}
.boundaries__lead strong {
font-weight: 600;
color: var(--text-dark);
}
.boundaries__lead em {
color: var(--accent);
font-style: italic;
font-weight: 500;
}
/* ─── Split: photo aside (left) + theses (right) ─── */
.boundaries__split {
display: grid;
grid-template-columns: 360px minmax(0, 1fr);
gap: 72px;
align-items: start;
justify-content: center;
max-width: 1180px;
margin: 0 auto;
}
.boundaries__photo-aside {
position: sticky;
top: 96px;
}
.boundaries__photo-frame {
margin: 0;
width: 100%;
aspect-ratio: 4 / 5;
border-radius: 6px;
overflow: hidden;
box-shadow: var(--shadow-photo);
}
.boundaries__photo-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.92) contrast(1.02);
}
/* ─── Цитата под фото — тот же паттерн, что в .approach__quote-aside ─── */
.boundaries__photo-quote {
margin: 18px 0 0;
padding: 4px 2px 0;
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
align-items: start;
}
.boundaries__photo-quote-mark {
font: 500 italic 36px/0.7 var(--font-serif);
color: var(--accent);
display: block;
margin-top: 2px;
}
.boundaries__photo-quote-text {
grid-column: 2;
font: 500 italic 15px/1.5 var(--font-serif);
color: var(--text-dark);
margin: 0 0 8px;
text-wrap: pretty;
}
.boundaries__photo-quote-attr {
grid-column: 2;
font: 500 10px/1.4 var(--font-body);
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--accent);
margin: 0;
}
/* ─── Лёгкий hover на цитате под фото ─── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.boundaries__photo-quote {
transition: transform 0.28s ease;
}
.boundaries__photo-quote-mark {
transition: transform 0.28s ease;
transform-origin: left top;
}
.boundaries__photo-quote:hover {
transform: translateY(-2px);
}
.boundaries__photo-quote:hover .boundaries__photo-quote-mark {
transform: scale(1.18);
}
}
/* ─── Six theses (text list) ─── */
.boundaries__theses {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 36px;
max-width: 640px;
counter-reset: thesis;
}
.boundaries__thesis {
position: relative;
padding-left: 56px;
font: 400 clamp(17px, 1.3vw, 19px)/1.65 var(--font-body);
color: var(--text-dark);
text-wrap: pretty;
counter-increment: thesis;
}
.boundaries__thesis::before {
content: counter(thesis, decimal-leading-zero);
position: absolute;
left: 0;
top: 2px;
font: 500 13px/1 var(--font-body);
letter-spacing: 1.5px;
color: var(--accent);
}
.boundaries__thesis strong {
display: block;
margin-bottom: 10px;
font: 500 clamp(21px, 1.8vw, 25px)/1.3 var(--font-serif);
color: var(--text-dark);
letter-spacing: -0.3px;
}
.boundaries__thesis em {
color: var(--accent);
font-style: italic;
font-weight: 500;
}
/* ─── Лёгкий hover на тезисах ─── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.boundaries__thesis {
transition: transform 0.28s ease;
}
.boundaries__thesis::before {
transition: transform 0.28s ease;
}
.boundaries__thesis:hover {
transform: translateX(6px);
}
.boundaries__thesis:hover::before {
transform: scale(1.15);
}
}
/* ─── Transition: italic Cormorant centered with hairlines ─── */
.boundaries__transition {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 28px;
max-width: 760px;
margin: 96px auto 56px;
}
.boundaries__transition::before,
.boundaries__transition::after {
content: '';
height: 1px;
background: var(--border);
}
.boundaries__transition-text {
font: 500 italic clamp(24px, 2.1vw, 32px)/1.4 var(--font-serif);
color: var(--accent);
text-align: center;
text-wrap: pretty;
}
/* ─── Three promise pairs: separate white surface cards ─── */
.boundaries__promises {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1180px;
margin: 0 auto;
}
.boundaries__pair {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 36px 36px 40px;
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
gap: 24px;
}
.boundaries__pair-not {
position: relative;
padding-left: 16px;
font: 400 italic clamp(15px, 1.2vw, 17px)/1.6 var(--font-body);
color: var(--text-dark);
opacity: 0.62;
margin: 0;
text-wrap: pretty;
}
.boundaries__pair-not::before {
content: '';
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 2px;
background: var(--text-muted);
opacity: 0.4;
}
.boundaries__pair-do {
position: relative;
margin: 0;
padding: 24px 0 0;
font: 500 clamp(18px, 1.5vw, 21px)/1.55 var(--font-serif);
color: var(--text-dark);
text-wrap: pretty;
border-top: 1px solid var(--border);
}
.boundaries__pair-kicker {
display: block;
font: 500 12px/1 var(--font-body);
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 12px;
}
.boundaries__pair-do em {
color: var(--accent);
font-style: italic;
font-weight: 600;
}
/* ─── Лёгкий hover на карточках «Не обещаю / Обещаю» ─── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.boundaries__pair {
transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.boundaries__pair:hover {
transform: translateY(-4px);
box-shadow: 0 10px 28px rgba(42, 37, 32, 0.1);
}
}
/* ─── Responsive ─── */
@media (max-width: 980px) {
.boundaries__split {
grid-template-columns: 300px minmax(0, 1fr);
gap: 48px;
}
.boundaries__promises { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.boundaries__split {
grid-template-columns: 1fr;
gap: 40px;
}
.boundaries__photo-aside {
position: static;
max-width: 340px;
margin: 0 auto;
}
.boundaries__theses { max-width: none; margin: 0 auto; }
.boundaries__intro { margin-bottom: 56px; }
.boundaries__transition {
margin: 72px auto 40px;
grid-template-columns: 1fr;
}
.boundaries__transition::before,
.boundaries__transition::after { display: none; }
.boundaries__pair { padding: 28px 24px 32px; }
}
/* ═══ certs.css ═══ */
/* ════════════════════════════════════════════════════
Certifications section
Eyebrow · h2 · lead · grid 4 cards · lightbox
На мобильном — горизонтальный свайп-слайдер с точками
Tokens: design-system/colors_and_type.css
════════════════════════════════════════════════════ */
.certs {
border-top: 1px solid var(--border);
padding: clamp(72px, 9vw, 112px) 0 clamp(80px, 9vw, 112px);
color: var(--text-dark);
}
.certs__container {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
width: 100%;
}
/* ─── Header (центрированный) ─── */
.certs__eyebrow {
font: 500 13px/1.3 var(--font-body);
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--accent);
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
text-align: center;
}
.certs__eyebrow::before,
.certs__eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background: var(--accent);
}
.certs__h2 {
font: 500 clamp(30px, 3.4vw, 44px)/1.2 var(--font-serif);
letter-spacing: -0.4px;
color: var(--text-dark);
margin: 0 auto 20px;
max-width: 920px;
text-align: center;
text-wrap: pretty;
}
.certs__h2 em {
color: var(--accent);
font-style: italic;
font-weight: 500;
}
.certs__lead {
font: 400 italic clamp(17px, 1.4vw, 20px)/1.55 var(--font-serif);
color: rgba(60, 50, 40, 0.85); /* единый вид с .cases-bridge__lead */
margin: 0 auto clamp(48px, 5vw, 64px);
max-width: 640px;
text-align: center;
text-wrap: pretty;
}
/* ─── Grid 4 cols ─── */
.certs-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
max-width: 1240px;
margin: 0 auto;
}
/* ─── Card ─── */
.cert-card {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 16px;
cursor: zoom-in;
transition: border-color var(--dur, 0.2s) var(--ease-out, ease-out),
transform var(--dur, 0.2s) var(--ease-out, ease-out);
display: flex;
flex-direction: column;
gap: 14px;
}
.cert-card:hover {
border-color: var(--accent);
transform: translateY(-2px);
}
.cert-card:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.cert-card__image {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: contain;
background: var(--bg-cream, #FAF6F0);
border-radius: 4px;
display: block;
}
.cert-card__image--placeholder {
display: grid;
place-items: center;
color: var(--text-muted, rgba(60, 50, 40, 0.55));
font: 500 11px/1.4 var(--font-body);
letter-spacing: 1.5px;
padding: 24px;
text-align: center;
}
.cert-card__caption {
font: 400 13px/1.45 var(--font-body);
letter-spacing: 0.2px;
color: var(--text-muted, rgba(60, 50, 40, 0.7));
}
.cert-card__caption b {
display: block;
color: var(--text-dark);
font-weight: 500;
margin-bottom: 4px;
letter-spacing: 0.1px;
}
/* ─── Primary cert highlighting ─── */
.cert-card--primary {
border-color: var(--accent);
}
.cert-card--primary::before {
content: 'ОСНОВНАЯ АККРЕДИТАЦИЯ';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--accent);
color: #fff;
padding: 5px 12px;
border-radius: 3px;
font: 500 10px/1 var(--font-body);
letter-spacing: 1.5px;
white-space: nowrap;
z-index: 2;
}
/* ─── Mobile dots indicator (default hidden) ─── */
.certs-dots {
display: none;
justify-content: center;
gap: 8px;
margin-top: 16px;
}
.certs-dots__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--border);
transition: background var(--dur, 0.2s), width var(--dur, 0.2s);
}
.certs-dots__dot--active {
background: var(--accent);
width: 20px;
border-radius: 3px;
}
/* ════════════════════════════════════════════════
Lightbox
════════════════════════════════════════════════ */
.lightbox-backdrop {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(31, 27, 23, 0.88);
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
cursor: zoom-out;
animation: lightbox-fade 0.2s ease;
}
.lightbox-backdrop[hidden] { display: none; }
@keyframes lightbox-fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox {
max-width: 90vw;
max-height: 90vh;
position: relative;
cursor: default;
}
.lightbox__image {
max-width: 100%;
max-height: 80vh;
width: auto;
height: auto;
border-radius: 4px;
display: block;
margin: 0 auto;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
background: #fff;
}
.lightbox__caption {
margin: 16px 0 0;
text-align: center;
font: 400 13px/1.5 var(--font-body);
letter-spacing: 0.3px;
color: rgba(245, 241, 236, 0.85);
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.lightbox__counter {
display: block;
margin: 10px auto 0;
font: 500 12px/1 var(--font-body);
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--accent);
text-align: center;
font-variant-numeric: tabular-nums;
}
.lightbox__counter:empty { display: none; }
.lightbox__close,
.lightbox__nav {
position: absolute;
background: transparent;
border: 0;
color: rgba(245, 241, 236, 0.75);
cursor: pointer;
font: 500 24px/1 var(--font-body);
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 50%;
transition: color 0.15s, background 0.15s;
}
.lightbox__close:hover,
.lightbox__nav:hover {
color: #fff;
background: rgba(245, 241, 236, 0.08);
}
.lightbox__close {
top: -48px;
right: 0;
font-size: 28px;
}
.lightbox__nav {
top: 50%;
transform: translateY(-50%);
font-size: 22px;
}
.lightbox__nav--prev { left: -56px; }
.lightbox__nav--next { right: -56px; }
/* ─── Responsive ─── */
@media (max-width: 1200px) {
.certs-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (max-width: 860px) {
.certs {
padding: 64px 0;
}
.certs-grid {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 16px;
padding: 16px 20px 20px;
margin: 0 -20px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.certs-grid::-webkit-scrollbar { display: none; }
.cert-card {
flex: 0 0 280px;
scroll-snap-align: start;
}
.certs-dots { display: flex; }
.lightbox__nav--prev { left: 8px; }
.lightbox__nav--next { right: 8px; }
.lightbox__close { top: -44px; }
}
@media (max-width: 600px) {
.certs__h2 { font-size: 26px; }
.certs__lead { font-size: 15px; }
}
/* ═══ certs-tabs.css ═══ */
/* ════════════════════════════════════════════════════
Аккредитации — preview + tabs (на основе V5)
════════════════════════════════════════════════════ */
.certs-tabs__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 40px;
align-items: start;
margin-top: 40px;
}
/* ─── Preview ─── */
.certs-tabs__preview {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 20px;
cursor: zoom-in;
transition: border-color 0.25s, transform 0.25s;
}
.certs-tabs__preview:hover { transform: translateY(-2px); }
.certs-tabs__preview--primary { border-color: var(--accent); }
.certs-tabs__preview-img {
width: 100%;
aspect-ratio: 3 / 4;
max-height: 620px;
object-fit: contain;
background: var(--bg-cream);
border-radius: 4px;
display: block;
}
.certs-tabs__primary-badge {
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
background: var(--accent);
color: #fff;
padding: 5px 12px;
border-radius: 3px;
font: 500 10px/1 var(--font-body);
letter-spacing: 1.5px;
white-space: nowrap;
z-index: 2;
}
.certs-tabs__zoom-hint {
position: absolute;
bottom: 14px;
right: 14px;
background: rgba(255,255,255,0.92);
border: 1px solid var(--border);
color: var(--text-muted);
font: 500 11px/1 var(--font-body);
letter-spacing: 0.5px;
padding: 6px 10px;
border-radius: 3px;
display: flex;
align-items: center;
gap: 6px;
pointer-events: none;
}
/* ─── Tabs list ─── */
.certs-tabs__list {
display: flex;
flex-direction: column;
gap: 8px;
}
.certs-tabs__tab {
position: relative;
background: transparent;
border: 0;
border-left: 2px solid var(--border);
padding: 18px 22px;
text-align: left;
cursor: pointer;
font: inherit;
color: var(--text-muted);
transition: all 0.2s;
display: grid;
grid-template-columns: auto 1fr;
gap: 16px;
align-items: baseline;
width: 100%;
}
.certs-tabs__tab:hover {
color: var(--text-dark);
border-left-color: var(--accent-line, var(--accent));
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.certs-tabs__tab:hover {
transform: translateX(4px);
}
.certs-tabs__tab--active:hover {
transform: none;
}
}
.certs-tabs__tab--active {
border-left-color: var(--accent);
background: var(--accent-soft);
color: var(--text-dark);
}
.certs-tabs__num {
font: 900 12px/1 var(--font-number);
color: var(--accent);
letter-spacing: 1px;
align-self: center;
}
.certs-tabs__title {
font: 500 17px/1.35 var(--font-serif);
color: var(--text-dark);
margin: 0;
text-wrap: pretty;
}
.certs-tabs__primary-tag {
display: inline-block;
background: var(--accent);
color: #fff;
font: 500 9px/1 var(--font-body);
letter-spacing: 1.2px;
padding: 3px 7px;
border-radius: 2px;
margin-left: 8px;
vertical-align: middle;
}
/* ─── Responsive ─── */
@media (max-width: 900px) {
.certs-tabs__layout {
grid-template-columns: 1fr;
gap: 24px;
}
.certs-tabs__preview-img { max-height: 460px; }
.certs-tabs__tab {
padding: 14px 16px;
gap: 12px;
}
.certs-tabs__title { font-size: 15px; }
}
@media (max-width: 600px) {
/* Уменьшаем превью документа, чтобы под ним помещалось больше пунктов-переключателей */
.certs-tabs__preview-img { max-height: 300px; }
.certs-tabs__preview { padding: 10px; }
.certs-tabs__tab {
padding: 11px 14px;
gap: 10px;
}
.certs-tabs__title { font-size: 14px; }
}
/* ─── 05: авторские методики — пункт-ссылка на блок методик ─── */
.certs-tabs__tab--link {
text-decoration: none;
cursor: default;
}
.certs-tabs__tab--link:hover {
text-decoration: none;
}
.certs-tabs__link-cta:hover {
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.certs-tabs__link-cta {
display: block;
margin-top: 6px;
font: 600 12px/1.3 var(--font-body);
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--accent);
}
.certs-tabs__tab--link:hover .certs-tabs__link-cta {
text-decoration: underline;
text-underline-offset: 3px;
}
.certs-tabs__text {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.certs-tabs__sublist {
margin: 0;
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 5px;
font: 400 14px/1.5 var(--font-body);
color: var(--text-muted);
}
.certs-tabs__sublist li::marker {
color: var(--accent);
font-weight: 600;
}
.certs-tabs__subnote {
margin: 0;
font: italic 400 13.5px/1.5 var(--font-serif);
color: var(--text-muted);
}
/* ═══ author-methods.css ═══ */
/* ════════════════════════════════════════════════════
Авторские психотерапевтические методики
(после «Аккредитаций», продолжение квалификационного
кластера: документы → методики → супервизия)
════════════════════════════════════════════════════ */
.author-methods {
scroll-margin-top: 72px;
border-top: 1px solid var(--border);
padding: clamp(72px, 9vw, 112px) 0 clamp(80px, 9vw, 112px);
}
.author-methods__container {
max-width: 1060px;
margin: 0 auto;
padding: 0 var(--gutter, 40px);
}
/* ─── Header (центрированный, как в «Аккредитациях») ─── */
.author-methods__eyebrow {
font: 500 13px/1.3 var(--font-body);
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin: 0 0 18px;
text-align: center;
}
.author-methods__eyebrow::before,
.author-methods__eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background: var(--accent);
}
.author-methods__h2 {
font: 600 clamp(30px, 3.2vw, 42px)/1.15 var(--font-serif);
letter-spacing: -0.5px;
color: var(--text-dark);
text-align: center;
margin: 0 auto 18px;
max-width: 720px;
text-wrap: balance;
}
.author-methods__h2 em {
font-style: italic;
color: var(--accent);
}
.author-methods__lead {
font: 400 17px/1.6 var(--font-body);
color: var(--text-muted);
text-align: center;
margin: 0 auto;
max-width: 640px;
text-wrap: pretty;
}
/* ─── Карточки ─── */
.author-methods__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: clamp(36px, 4vw, 48px);
}
.author-method-card {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 32px 34px 30px;
text-decoration: none;
overflow: hidden;
transition: border-color var(--dur) var(--ease-out),
transform var(--dur) var(--ease-out),
box-shadow var(--dur) var(--ease-out);
}
.author-method-card:hover {
border-color: var(--accent);
transform: translateY(-3px);
box-shadow: var(--shadow-hover, 0 14px 40px rgba(42, 37, 32, 0.12));
text-decoration: none;
}
.author-method-card__top {
display: flex;
align-items: center;
gap: 14px;
}
.author-method-card__num {
/* крупный номер-водяной знак в углу */
position: absolute;
top: 18px;
right: 24px;
font: 800 54px/1 var(--font-number, var(--font-body));
color: rgba(200, 121, 42, 0.14);
letter-spacing: -1px;
transition: color var(--dur) var(--ease-out);
pointer-events: none;
}
.author-method-card:hover .author-method-card__num {
color: rgba(200, 121, 42, 0.26);
}
.author-method-card__badge {
padding: 6px 12px;
border: 1px solid var(--border-accent, rgba(200, 121, 42, 0.35));
border-radius: 4px;
background: var(--accent-soft, rgba(200, 121, 42, 0.08));
color: var(--accent);
font: 700 12px/1 var(--font-body);
letter-spacing: 1.5px;
text-transform: uppercase;
}
.author-method-card__title {
margin: 0;
font: 500 clamp(19px, 1.7vw, 22px)/1.4 var(--font-serif);
color: var(--text-dark);
text-wrap: pretty;
}
.author-method-card__link {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--accent-dark, var(--accent));
font: 700 13px/1 var(--font-body);
letter-spacing: 1.5px;
text-transform: uppercase;
}
.author-method-card__arrow {
transition: transform var(--dur) var(--ease-out);
}
.author-method-card:hover .author-method-card__arrow {
transform: translateX(3px);
}
/* ─── Примечание ─── */
.author-methods__note {
margin: 32px auto 0;
padding: 4px 0 4px 20px;
border-left: 3px solid var(--accent);
font: 500 16px/1.55 var(--font-body);
color: var(--text-dark);
max-width: 660px;
text-wrap: pretty;
}
.author-methods__note strong {
font-weight: 700;
color: var(--accent-dark, var(--accent));
}
/* ─── Адаптив ─── */
@media (max-width: 830px) {
.author-methods {
padding: 64px 0;
}
.author-methods__grid {
grid-template-columns: 1fr;
gap: 14px;
}
.author-method-card {
padding: 24px 22px 22px;
}
}
/* ─── Строка экспертизы под лидом ─── */
.author-methods__proof {
font: 600 13px/1.5 var(--font-body);
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--accent);
text-align: center;
margin: 16px auto 0;
}
/* ═══ supervision.css ═══ */
/* ════════════════════════════════════════════════════
Супервизия — отдельный блок после Аккредитаций
Tokens: design-system/colors_and_type.css
════════════════════════════════════════════════════ */
.supervision {
background: var(--bg-cream);
padding: 56px 0;
border-top: 1px solid var(--border);
color: var(--text-dark);
}
.supervision__container {
max-width: var(--container, 1240px);
margin: 0 auto;
padding: 0 32px;
}
/* eyebrow */
.supervision__eyebrow {
font: 500 13px/1.3 var(--font-body);
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 18px;
display: inline-flex;
align-items: center;
gap: 16px;
}
.supervision__eyebrow::before,
.supervision__eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background: var(--accent);
}
/* ─── Заголовок + lead — компактно ─── */
.supervision-content { margin-bottom: 32px; max-width: 880px; }
.supervision-title {
font-family: var(--font-serif);
font-weight: 500;
font-size: clamp(30px, 3.4vw, 44px);
line-height: 1.2;
letter-spacing: -0.4px;
color: var(--text-dark);
margin: 0 0 14px;
text-wrap: pretty;
}
.supervision-title em {
font-style: italic;
font-weight: 500;
color: var(--accent);
}
.supervision-lead {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: 17px;
line-height: 1.55;
color: var(--text-muted);
max-width: 720px;
margin: 0;
text-wrap: pretty;
}
/* ─── Нижняя часть: benefits сверху, certs снизу — единый блок ─── */
.supervision-bottom {
display: flex;
flex-direction: column;
gap: 36px;
}
/* ─── Benefits: 3 колонки ─── */
.supervision-benefits__title {
font-family: var(--font-serif);
font-weight: 500;
font-style: italic;
font-size: 22px;
line-height: 1.25;
color: var(--text-dark);
margin: 0 0 18px;
}
.supervision-benefits {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.supervision-benefit {
display: block;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
color: var(--text-muted);
padding-top: 14px;
border-top: 2px solid var(--accent);
position: relative;
}
.supervision-benefit::before { display: none; }
.supervision-benefit__key {
font-weight: 600;
color: var(--text-dark);
display: block;
margin-bottom: 4px;
font-size: 16px;
}
.supervision-benefit__text { display: inline; }
/* ─── Лёгкий hover на преимуществах ─── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.supervision-benefit {
transition: transform 0.28s ease;
}
.supervision-benefit:hover {
transform: translateY(-3px);
}
}
/* ─── Сертификаты: 4 миниатюры в одну строку ─── */
.supervision-certs-col {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 8px;
}
.supervision-certs-label {
font-family: var(--font-body);
font-weight: 500;
font-size: 11px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--text-muted);
margin: 0;
}
.supervision-certs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.supervision-cert {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 4px;
padding: 11px;
cursor: zoom-in;
transition: border-color 0.2s, transform 0.2s;
width: 100%;
aspect-ratio: 1904 / 1356;
height: auto;
}
.supervision-cert:hover {
border-color: var(--accent);
transform: translateY(-2px);
}
.supervision-cert img {
width: 100%;
height: 100%;
object-fit: contain;
background: var(--bg-cream);
border-radius: 2px;
display: block;
}
/* ─── Stat-блок (deprecated) ─── */
.supervision-stat { display: none; }
/* ─── Адаптив ─── */
@media (max-width: 860px) {
.supervision { padding: 46px 0; }
.supervision__container { padding: 0 20px; }
.supervision-content { margin-bottom: 28px; }
.supervision-bottom { gap: 32px; }
.supervision-benefits {
grid-template-columns: 1fr;
gap: 18px;
}
.supervision-certs {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
}
@media (max-width: 520px) {
.supervision-certs { grid-template-columns: 1fr; }
}
/* ═══ edu.css ═══ */
/* ════════════════════════════════════════════════════
Education — V3.2: 2-column grid внутри подразделов, компактные строки
Tokens: design-system/colors_and_type.css
════════════════════════════════════════════════════ */
.edu {
background: var(--bg-warm);
padding: 64px 0 56px;
border-top: 1px solid var(--border);
color: var(--text-dark);
}
.edu__container {
max-width: var(--container, 1240px);
margin: 0 auto;
padding: 0 32px;
}
/* ─── Общие токены текста ─── */
.edu__eyebrow {
font: 500 13px/1.3 var(--font-body);
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 14px;
display: inline-flex;
align-items: center;
gap: 16px;
}
.edu__eyebrow::before,
.edu__eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background: var(--accent);
}
.edu__title {
font-family: var(--font-serif);
font-weight: 500;
font-size: clamp(30px, 3.4vw, 44px);
line-height: 1.2;
letter-spacing: -0.4px;
color: var(--text-dark);
margin: 0 0 12px;
text-wrap: pretty;
}
.edu__title em {
font-style: italic;
font-weight: 500;
color: var(--accent);
}
.edu__lead {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: var(--text-muted);
max-width: 680px;
margin: 0;
text-wrap: pretty;
}
/* ─── Stat block ─── */
.edu__stat {
display: flex;
flex-direction: column;
align-items: flex-start;
white-space: nowrap;
}
.edu__stat-num {
font-family: var(--font-number, 'Montserrat', sans-serif);
font-weight: 900;
font-size: clamp(64px, 8vw, 96px);
line-height: 1;
letter-spacing: -2.5px;
color: var(--accent);
margin-bottom: 8px;
}
.edu__stat-label {
font-family: var(--font-body);
font-weight: 500;
font-size: 11px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--text-dark);
text-align: left;
line-height: 1.4;
}
.edu__stat-meta {
font-weight: 400;
letter-spacing: 1px;
font-size: 11px;
font-family: var(--font-body);
color: var(--text-muted);
text-transform: uppercase;
margin-top: 4px;
}
/* ─── Header ─── */
.edu-v2__header {
display: grid;
grid-template-columns: auto 1fr;
gap: 56px;
align-items: end;
padding-bottom: 24px;
margin-bottom: 24px;
border-bottom: 1px solid var(--border);
}
.edu-v2__header .edu__stat { padding-top: 4px; }
.edu-v2__header-text { min-width: 0; }
.edu-v2__header-text .edu__title { margin-bottom: 12px; }
.edu-v2__header-text .edu__lead { margin: 0; }
/* ─── Subheading подразделов ─── */
.edu-v3__subheading {
display: block;
font: 500 11px/1.4 var(--font-body);
letter-spacing: 2px;
text-transform: uppercase;
color: var(--accent);
margin: 32px 0 0;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.edu-v3__subheading:first-child { margin-top: 8px; }
/* ─── 2-column grid ─── */
.edu-v3__list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 56px;
row-gap: 0;
}
/* ─── Компактная строка программы ─── */
.edu-v3__row {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: center;
padding: 14px 0;
border-top: 1px solid var(--border);
transition: background 0.15s;
}
.edu-v3__row:first-child { border-top: 0; }
/* В 2-колоночной сетке: первая строка каждой колонки без верхней рамки */
.edu-v3__list .edu-v3__row:nth-child(2) { border-top: 0; }
.edu-v3__row:hover {
background: rgba(184, 122, 67, 0.03);
}
.edu-v3__row-main {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.edu-v3__title {
font-family: var(--font-body);
font-weight: 500;
font-size: 15px;
line-height: 1.35;
color: var(--text-dark);
margin: 0;
text-wrap: pretty;
}
.edu-v3__hours {
display: inline-block;
font-family: var(--font-number, 'Montserrat', sans-serif);
font-weight: 700;
font-size: 12.5px;
color: var(--accent);
letter-spacing: 0.3px;
font-variant-numeric: tabular-nums;
margin: 0;
}
.edu-v3__link {
font-family: var(--font-body);
font-size: 12.5px;
font-weight: 500;
color: var(--accent);
text-decoration: none;
letter-spacing: 0.3px;
border: 0;
background: transparent;
cursor: zoom-in;
padding: 4px 0;
white-space: nowrap;
align-self: center;
transition: color 0.15s;
}
.edu-v3__link:hover { text-decoration: underline; }
/* ─── Toggle visibility ─── */
.edu-v3__row--hidden { display: none; }
.edu-v2.is-expanded .edu-v3__row--hidden { display: grid; }
/* ─── Toggle button ─── */
.edu-v2__toggle-wrap {
display: flex;
justify-content: center;
margin-top: 32px;
}
.edu-v2__toggle {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-body);
font-weight: 500;
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-dark);
background: transparent;
border: 1px solid var(--border);
border-radius: 4px;
padding: 12px 28px;
cursor: pointer;
transition: border-color 0.2s, color 0.2s;
}
.edu-v2__toggle:hover { border-color: var(--accent); color: var(--accent); }
.edu-v2__toggle-arrow { transition: transform 0.2s; display: inline-block; }
/* ─── Адаптив ─── */
@media (max-width: 860px) {
.edu { padding: 46px 0; }
.edu__container { padding: 0 20px; }
.edu-v2__header {
grid-template-columns: 1fr;
gap: 24px;
padding-bottom: 20px;
margin-bottom: 16px;
}
.edu__stat-num { letter-spacing: -2px; }
.edu-v3__list {
grid-template-columns: 1fr;
column-gap: 0;
}
/* В 1-колонке возвращаем border-top на все, кроме первой строки */
.edu-v3__list .edu-v3__row:nth-child(2) { border-top: 1px solid var(--border); }
.edu-v3__list .edu-v3__row:first-child { border-top: 0; }
.edu-v3__subheading { margin-top: 28px; font-size: 11px; }
.edu-v3__row { padding: 14px 0; gap: 14px; }
.edu-v3__title { font-size: 16px; line-height: 1.4; }
.edu-v3__link { font-size: 14px; padding: 10px 0; }
}
/* ─── Два стата в шапке: акцент на часах сессий, обучение — вторично ─── */
.edu-v2__stats {
display: flex;
flex-direction: column;
gap: 28px;
padding-top: 4px;
}
.edu-v2__stats .edu__stat-label { max-width: 200px; }
.edu__stat--secondary .edu__stat-num {
font-size: clamp(34px, 4vw, 44px);
font-weight: 800;
letter-spacing: -1px;
color: var(--text-muted, rgba(60, 50, 40, 0.65));
margin-bottom: 5px;
}
.edu__stat--secondary .edu__stat-label {
color: var(--text-muted, rgba(60, 50, 40, 0.65));
}
@media (max-width: 860px) {
.edu-v2__stats { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 24px 48px; margin-bottom: 16px; }
}
/* ═══ cases.css ═══ */
/* ════════════════════════════════════════════════════
Cases — «С чем работаю»
Eyebrow · h2 · lead · табы · 3 панели с сетками карточек
Tokens: design-system/colors_and_type.css
════════════════════════════════════════════════════ */
.cases {
background: var(--bg-warm);
border-top: 1px solid var(--border);
padding: 72px 0;
color: var(--text-dark);
}
.cases__container {
max-width: var(--container, 1240px);
margin: 0 auto;
padding: 0 32px;
}
/* ─── Header (центрированный — стиль «Аккредитаций») ─── */
.cases__eyebrow {
font: 500 13px/1.3 var(--font-body);
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--accent);
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
text-align: center;
}
.cases__eyebrow::before,
.cases__eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background: var(--accent);
}
.cases__h2 {
font: 500 clamp(30px, 3.4vw, 44px)/1.2 var(--font-serif);
letter-spacing: -0.4px;
color: var(--text-dark);
margin: 0 auto 16px;
max-width: 920px;
text-align: center;
text-wrap: pretty;
}
.cases__h2 em {
color: var(--accent);
font-style: italic;
font-weight: 500;
}
.cases__lead {
font: 400 italic clamp(17px, 1.4vw, 20px)/1.55 var(--font-serif);
color: rgba(60, 50, 40, 0.85); /* единый вид с .cases-bridge__lead */
margin: 0 auto;
max-width: 640px;
text-align: center;
text-wrap: pretty;
}
/* ─── Табы ─── */
.cases-tabs {
display: flex;
justify-content: center;
gap: 64px;
margin: 40px 0 48px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
position: relative;
}
.cases-tab {
background: transparent;
border: 0;
padding: 16px 4px;
position: relative;
cursor: pointer;
font-family: var(--font-body);
font-weight: 500;
font-size: 20px;
letter-spacing: 0.3px;
color: var(--text-muted);
transition: color 0.2s var(--ease-out, ease-out);
}
.cases-tab:hover {
color: var(--text-dark);
}
.cases-tab.is-active {
color: var(--accent);
}
.cases-tab.is-active::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -17px;
height: 3px;
background: var(--accent);
}
.cases-tab__count {
display: inline-block;
margin-left: 6px;
font-size: 12px;
font-weight: 400;
color: var(--text-muted);
vertical-align: middle;
}
.cases-tab.is-active .cases-tab__count {
color: var(--accent);
}
/* ─── Панели + сетка ─── */
.cases-panels {
/* desktop: переключение через .is-active. Mobile (см. адаптив) — flex со scroll-snap. */
}
.cases-panel {
display: none;
}
.cases-panel.is-active {
display: block;
}
.cases-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* ─── Карточка ─── */
.case-card {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 36px 32px 32px;
display: flex;
flex-direction: column;
height: 100%;
transition: border-color 0.2s var(--ease-out, ease-out),
transform 0.2s var(--ease-out, ease-out);
}
.case-card__num {
position: absolute;
top: 24px;
right: 28px;
font-family: var(--font-num, var(--font-number, var(--font-body)));
font-weight: 900;
font-size: 14px;
color: var(--accent);
letter-spacing: 0.5px;
line-height: 1;
}
/* Тёмный тик над заголовком: перекличка с карточками карусели */
.case-card__title::before {
content: '';
display: block;
width: 24px;
height: 2px;
background: var(--text-dark, #2A2520);
margin-bottom: 14px;
}
.case-card:hover {
border-color: var(--accent);
transform: translateY(-2px);
}
.case-card__title {
font-family: var(--font-serif);
font-weight: 500;
font-size: 22px;
line-height: 1.25;
color: var(--text-dark);
margin: 0 36px 16px 0;
text-wrap: pretty;
}
.case-card__title em {
font-style: italic;
color: var(--accent);
font-weight: 500;
}
.case-card__desc {
font-family: var(--font-body);
font-weight: 400;
font-size: 15px;
line-height: 1.55;
color: var(--text-muted);
margin: 0;
text-wrap: pretty;
}
/* ─── Адаптив ─── */
@media (max-width: 1100px) {
.cases-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.cases { padding: 56px 0; }
.cases__container { padding: 0 20px; }
/* Табы по центру, скролл только если действительно не помещаются */
.cases-tabs {
gap: 24px;
margin: 28px 0 24px;
overflow-x: auto;
justify-content: center;
padding-bottom: 12px;
-webkit-overflow-scrolling: touch;
}
.cases-tabs::-webkit-scrollbar { display: none; }
.cases-tab {
flex: 0 0 auto;
font-size: 17px;
padding: 14px 4px;
}
.cases-tab.is-active::after { bottom: -13px; }
/* Свайп между панелями (Я чувствую → Я хочу → Мне трудно) */
.cases-panels {
display: flex;
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
margin: 0 -20px; /* hug viewport edges для естественного свайпа */
padding: 0 20px;
gap: 20px;
}
.cases-panels::-webkit-scrollbar { display: none; }
/* На мобильном все 3 панели всегда видны (свайп между ними) —
перебиваем desktop-правила .is-active / hidden */
.cases-panel,
.cases-panel.is-active,
.cases-panel[hidden] {
display: block !important;
flex: 0 0 100%;
min-width: 0;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.cases-grid { grid-template-columns: 1fr; gap: 16px; }
.case-card { padding: 28px 24px 24px; }
.case-card__title { font-size: 20px; }
.case-card__desc { font-size: 14px; }
}
/* ════════════════════════════════════════════════════
Deep — «Отдельный фокус»: карусель глубоких тем
Тёмные карточки, scroll-snap, peek ~15%, стрелки
════════════════════════════════════════════════════ */
.cases-deep {
margin: clamp(32px, 4vw, 44px) 0 0;
}
.cases-deep__label {
font: 500 13px/1.4 var(--font-body);
letter-spacing: 2px;
text-transform: uppercase;
color: var(--accent);
text-align: center;
margin: 0 0 20px;
}
.cases-deep__carousel {
position: relative;
}
.cases-deep__track {
display: flex;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
cursor: grab;
}
.cases-deep__track::-webkit-scrollbar { display: none; }
.cases-deep__track.is-dragging {
cursor: grabbing;
scroll-snap-type: none;
user-select: none;
}
.cases-deep__card {
flex: 0 0 calc((100% - 3 * 14px) / 4.15);
scroll-snap-align: start;
background: var(--text-dark, #2A2520);
border-radius: 6px;
padding: 22px 22px 20px;
}
.cases-deep__title {
font: 600 19px/1.3 var(--font-serif);
color: #F5F1EC;
margin: 0 0 10px;
text-wrap: pretty;
}
.cases-deep__title::before {
content: '';
display: block;
width: 24px;
height: 2px;
background: var(--accent);
margin-bottom: 14px;
}
.cases-deep__desc {
font: 400 15px/1.6 var(--font-body);
color: rgba(245, 241, 236, 0.76);
margin: 0;
text-wrap: pretty;
}
/* Стрелки */
.cases-deep__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--surface);
color: var(--accent-dark, var(--accent));
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 16px rgba(42, 37, 32, 0.18);
transition: color var(--dur, 0.25s) var(--ease-out, ease), border-color var(--dur, 0.25s) var(--ease-out, ease);
}
.cases-deep__arrow svg { width: 20px; height: 20px; }
.cases-deep__arrow:hover { color: var(--accent); border-color: var(--accent); }
.cases-deep__arrow--prev { left: -14px; }
.cases-deep__arrow--next { right: -14px; }
.cases-deep__arrow[hidden] { display: none; }
/* ─── Мост к повседневным запросам ─── */
.cases-bridge {
margin: clamp(34px, 4.5vw, 48px) 0 4px;
text-align: center;
}
.cases-bridge__kicker {
font: 500 13px/1.4 var(--font-body);
letter-spacing: 2px;
text-transform: uppercase;
color: var(--accent);
margin: 0;
}
.cases-bridge__lead {
font: 400 italic clamp(17px, 1.4vw, 20px)/1.55 var(--font-serif);
color: rgba(60, 50, 40, 0.85);
max-width: 640px;
margin: 14px auto 0;
text-wrap: pretty;
}
/* ─── Дисклеймер внизу секции ─── */
.cases__lead--bottom {
margin: clamp(36px, 4.5vw, 48px) auto 0;
/* вид как у .approach__lead-intro: прямой serif + охряная черта */
font: 500 clamp(19px, 1.6vw, 23px)/1.5 var(--font-serif);
color: var(--text-dark);
text-align: left;
max-width: 720px;
padding-left: 20px;
border-left: 3px solid var(--accent);
}
/* ─── Адаптив карусели ─── */
@media (max-width: 1100px) {
.cases-deep__card { flex-basis: calc((100% - 2 * 14px) / 3.15); }
}
@media (max-width: 830px) {
.cases-deep__card { flex-basis: calc((100% - 14px) / 2.15); }
.cases-deep__arrow { display: none; }
}
@media (max-width: 560px) {
.cases-deep__card { flex-basis: calc(100% / 1.18); padding: 18px 18px 16px; }
}
/* ─── Интро под заголовком секции ─── */
.cases__lead--intro {
margin: 0 auto;
max-width: 680px;
}
/* Фокус-обводка карусели при управлении с клавиатуры */
.cases-deep__track:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 6px;
border-radius: 6px;
}
/* ─── CTA после секции ─── */
.cases__cta {
display: flex;
justify-content: center;
margin-top: 28px;
}
.cases__cta-btn {
display: inline-block;
padding: 16px 32px;
background: var(--accent);
border: 0;
border-radius: 4px;
color: #fff;
font: 500 15px/1 var(--font-body);
letter-spacing: 0.3px;
text-decoration: none;
transition: background 0.2s var(--ease-out, ease), transform 0.2s var(--ease-out, ease);
}
.cases__cta-btn:hover {
background: var(--accent-dark, #b56a2c);
color: #fff; /* перебиваем глобальный a:hover */
transform: translateY(-2px);
text-decoration: none;
}
/* ═══ pricing.css ═══ */
/* ════════════════════════════════════════════════════
PRICING — Цена и форматы
Вариант 3: двухколоночная горизонтальная карточка
Слева: идентификация + цена + CTA
Справа: 2 подколонки — «Для кого / Важно знать» + «Что получите»
════════════════════════════════════════════════════ */
.pricing {
background: var(--bg-cream);
padding: 80px 0;
border-top: 1px solid var(--border);
}
.pricing__container {
width: min(1280px, 100% - 64px);
margin: 0 auto;
}
/* ─── Шапка ─── */
.pricing__header {
text-align: center;
margin-bottom: 56px;
}
.pricing__lead {
font: 400 16px/1.6 var(--font-body);
color: rgba(44, 44, 42, 0.75);
max-width: 680px;
margin: 16px auto 0;
text-wrap: pretty;
}
.pricing__eyebrow {
display: inline-flex;
align-items: center;
gap: 16px;
font: 500 13px/1.3 var(--font-body);
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 18px;
}
.pricing__eyebrow::before,
.pricing__eyebrow::after {
content: '';
width: 32px;
height: 1px;
background: var(--accent);
}
.pricing__title {
font: 500 clamp(30px, 3.4vw, 44px)/1.2 var(--font-serif);
letter-spacing: -0.4px;
color: var(--text-dark);
margin: 0;
}
.pricing__title em {
font-style: italic;
color: var(--accent);
}
/* ─── Карточка ─── */
.pricing-card {
display: grid;
grid-template-columns: minmax(300px, 32%) 1fr;
gap: 56px;
padding: 44px 48px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 28px;
align-items: stretch;
}
.pricing-card--flagship {
border-color: var(--accent);
border-width: 1.5px;
position: relative;
}
.pricing-card--couple {
margin-top: 64px;
margin-bottom: 0;
}
/* ─── Бейдж «Рекомендую» ─── */
.pricing-badge {
display: inline-block;
background: var(--accent);
color: #fff;
font: 500 11px/1 var(--font-body);
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 7px 14px;
border-radius: 4px;
margin-bottom: 18px;
align-self: flex-start;
}
/* ─── Левая колонка ─── */
.pricing-card__main {
display: flex;
flex-direction: column;
}
.pricing-card__eyebrow {
display: block;
font: 500 12px var(--font-body);
letter-spacing: 2px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 14px;
}
.pricing-card__title {
font: 500 clamp(26px, 2.4vw, 32px)/1.2 var(--font-serif);
letter-spacing: -0.4px;
color: var(--text-dark);
margin: 0 0 14px;
}
.pricing-card__title--accent {
color: var(--accent);
}
.pricing-card__lead {
font: italic 400 15px/1.5 var(--font-serif);
color: var(--text-muted);
margin: 0 0 22px;
}
.pricing-card__lead strong {
font-weight: 600;
color: var(--text-dark);
}
.pricing-card__format {
background: var(--bg-warm);
padding: 14px 18px;
border-radius: 6px;
font: 400 14px/1.5 var(--font-body);
color: var(--text-dark);
margin-bottom: 24px;
}
.pricing-card__format-label {
color: var(--accent);
font-weight: 600;
margin-right: 4px;
}
.pricing-card__format strong {
font-weight: 600;
color: var(--text-dark);
}
.pricing-card__divider {
height: 1px;
background: var(--border);
margin: 4px 0 22px;
}
.pricing-card__price {
font: 900 56px/1 var(--font-num, var(--font-body));
color: var(--text-dark);
letter-spacing: -2px;
margin: 0;
}
.pricing-card__price-currency {
font-size: 28px;
color: var(--accent);
margin-left: 4px;
vertical-align: top;
position: relative;
top: 12px;
letter-spacing: 0;
}
.pricing-card__price-note {
font: 400 13px/1.4 var(--font-body);
color: var(--text-muted);
margin: 8px 0 0;
}
.pricing-card__price-extra {
display: flex;
gap: 7px;
font: 400 12.5px/1.45 var(--font-body);
color: var(--text-muted);
margin: 10px 0 0;
padding-left: 9px;
border-left: 1.5px solid rgba(200, 121, 42, 0.35);
}
.pricing-card__price-note-italic {
font: italic 400 12px/1.4 var(--font-body);
color: var(--text-muted);
margin: 6px 0 0;
}
.pricing-card__cta {
display: block;
width: 100%;
padding: 14px 24px;
background: var(--accent);
color: #fff;
text-align: center;
border-radius: 4px;
text-decoration: none;
font: 500 15px/1 var(--font-body);
letter-spacing: 0.3px;
margin-top: 24px;
transition: background 0.2s var(--ease-out, ease-out);
}
.pricing-card__cta:hover {
background: var(--accent-dark, #b56a2c);
color: #fff; /* перебиваем глобальный a:hover (красит текст в цвет фона — текст «исчезал») */
}
/* ─── Правая зона: 2 подколонки ─── */
.pricing-card__split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: 48px;
align-content: start;
}
/* Парная — длинные «Важно знать», левая подколонка шире */
.pricing-card--couple .pricing-card__split {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
.pricing-card__subheading {
display: flex;
align-items: center;
gap: 12px;
font: 500 12px/1 var(--font-body);
letter-spacing: 2px;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 16px;
}
.pricing-card__subheading::before {
content: '';
width: 24px;
height: 1px;
background: var(--accent);
flex-shrink: 0;
}
.pricing-card__subheading + .pricing-card__subheading,
.pricing-card__list + .pricing-card__subheading {
margin-top: 28px;
}
/* ─── Тире-список ─── */
.pricing-card__list {
list-style: none;
padding: 0;
margin: 0;
}
.pricing-card__list li {
display: grid;
grid-template-columns: 14px 1fr;
gap: 12px;
align-items: start;
font: 400 15px/1.55 var(--font-body);
color: var(--text-dark);
margin-bottom: 12px;
}
.pricing-card__list li:last-child {
margin-bottom: 0;
}
.pricing-card__list li::before {
content: '—';
color: var(--accent);
font-weight: 500;
line-height: 1.55;
}
/* Парная — «Важно знать» абзацами */
.pricing-card__paragraphs {
margin: 0;
padding: 0;
list-style: none;
}
.pricing-card__paragraphs li {
font: 400 15px/1.55 var(--font-body);
color: var(--text-dark);
margin-bottom: 14px;
padding-left: 14px;
border-left: 1px solid var(--border);
}
.pricing-card__paragraphs li:last-child {
margin-bottom: 0;
}
/* ─── Нумерованный список ─── */
.pricing-card__numbered {
list-style: none;
padding: 0;
margin: 0;
counter-reset: pricing-list;
}
.pricing-card__numbered li {
display: grid;
grid-template-columns: 32px 1fr;
gap: 14px;
align-items: start;
font: 400 15px/1.55 var(--font-body);
color: var(--text-dark);
margin-bottom: 14px;
counter-increment: pricing-list;
}
.pricing-card__numbered li:last-child {
margin-bottom: 0;
}
.pricing-card__numbered li::before {
content: counter(pricing-list, decimal-leading-zero);
font: 900 14px/1.55 var(--font-num, var(--font-body));
color: var(--accent);
letter-spacing: 0.5px;
}
.pricing-card__numbered li b,
.pricing-card__numbered li strong {
font-weight: 600;
color: var(--text-dark);
}
/* ─── Адаптив ─── */
@media (max-width: 1100px) {
.pricing-card {
grid-template-columns: 1fr;
gap: 36px;
padding: 36px 32px;
}
.pricing-card__split {
grid-template-columns: 1fr;
gap: 32px;
}
.pricing-card--couple .pricing-card__split {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.pricing { padding: 56px 0; }
.pricing__container { width: min(1280px, 100% - 32px); }
.pricing-card {
padding: 28px 22px;
gap: 28px;
margin-bottom: 20px;
}
.pricing-card--couple { margin-top: 36px; }
.pricing-card__price { font-size: 44px; }
.pricing-card__price-currency { font-size: 22px; top: 8px; }
.pricing-card__cta { padding: 16px 24px; font-size: 15px; }
}
/* ─── «Как выбрать» — правило одной строкой перед карточками ─── */
.pricing-choose {
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
margin: 0 0 clamp(32px, 4vw, 44px);
padding: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
}
.pricing-choose__item {
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px 24px;
}
.pricing-choose__item + .pricing-choose__item {
border-left: 1px solid var(--border);
}
.pricing-choose__cond {
font: 400 15px/1.45 var(--font-body);
color: var(--text-muted);
text-wrap: pretty;
}
.pricing-choose__cond::after { content: ' →'; color: var(--accent); }
.pricing-choose__target {
font: 600 16px/1.3 var(--font-body);
color: var(--accent-dark, var(--accent));
text-decoration: none;
}
.pricing-choose__target:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.pricing-card[id] { scroll-margin-top: 90px; }
@media (max-width: 830px) {
.pricing-choose { grid-template-columns: 1fr; }
.pricing-choose__item + .pricing-choose__item { border-left: 0; border-top: 1px solid var(--border); }
}
/* ─── Подводка выбора формата ─── */
.pricing__hint {
font: 400 italic clamp(16px, 1.3vw, 18px)/1.55 var(--font-serif);
color: var(--text-muted, rgba(60, 50, 40, 0.7));
margin: 14px 0 0;
text-wrap: pretty;
}
.pricing__hint a {
color: var(--accent-dark, #A85E1E);
text-decoration: underline;
text-underline-offset: 3px;
}
.pricing__hint a:hover { color: var(--accent); }
/* ─── Строка про Карту сессии (между индивидуальными и парной) ─── */
.pricing__map-note {
font: 400 15px/1.5 var(--font-body);
color: var(--text-muted, rgba(60, 50, 40, 0.7));
text-align: center;
margin: -8px 0 0;
}
.pricing__map-note a {
color: var(--accent-dark, #A85E1E);
text-decoration: underline;
text-underline-offset: 3px;
}
.pricing__map-note a:hover { color: var(--accent); }
/* ─── Пакетная цена глубинной: расшифровка + экономия ─── */
.pricing-card__price-per {
font: 400 15px/1 var(--font-body);
color: var(--text-muted, rgba(60, 50, 40, 0.65));
margin-left: 10px;
letter-spacing: 0;
}
.pricing-card__pkg {
display: flex;
flex-direction: column;
gap: 7px;
margin: 8px 0 0;
}
.pricing-card__pkg-row {
font: 400 14.5px/1.45 var(--font-body);
color: var(--text-muted, rgba(60, 50, 40, 0.65));
}
.pricing-card__pkg-row strong {
font-weight: 600;
color: var(--text-dark);
}
.pricing-card__pkg-save {
align-self: flex-start;
padding: 5px 10px 6px;
border-radius: 3px;
background: rgba(200, 121, 42, 0.12);
color: var(--accent-dark, #A85E1E);
font: 600 13px/1.25 var(--font-body);
}
/* ─── Звёздочка-сноска у пакетной цены ─── */
.pricing-card__price-star {
color: var(--accent);
font: 700 0.5em/1 var(--font-body);
vertical-align: 0.6em;
margin-left: 2px;
}
.pricing-card__pkg-star {
color: var(--accent);
font-weight: 700;
margin-right: 4px;
}
/* ═══ finale.css ═══ */
/* ════════════════════════════════════════════════════
Finale — «Терапия с финалом»
Тёмная полоса между прайсингом и диагностикой:
как ставится цель, как сверяемся, как завершаем.
Tokens: design-system/colors_and_type.css
════════════════════════════════════════════════════ */
.finale {
background: var(--text-dark, #2A2520);
padding: clamp(72px, 8vw, 104px) 0;
}
.finale__container {
max-width: 1060px;
margin: 0 auto;
padding: 0 var(--gutter, 40px);
}
/* ─── Header ─── */
.finale__eyebrow {
font: 500 13px/1.3 var(--font-body);
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin: 0 0 18px;
text-align: center;
}
.finale__eyebrow::before,
.finale__eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background: var(--accent);
}
.finale__title {
font: 600 clamp(30px, 3.2vw, 42px)/1.15 var(--font-serif);
letter-spacing: -0.5px;
color: #F5F1EC;
text-align: center;
margin: 0 auto 18px;
max-width: 760px;
text-wrap: balance;
}
.finale__title em {
font-style: italic;
color: var(--accent);
}
.finale__lead {
font: 400 italic clamp(18px, 1.5vw, 21px)/1.65 var(--font-serif);
color: rgba(245, 241, 236, 0.84);
text-align: center;
margin: 0 auto;
max-width: 640px;
text-wrap: pretty;
}
/* ─── Три шага ─── */
.finale__steps {
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(24px, 3vw, 40px);
margin: clamp(40px, 5vw, 56px) 0 0;
padding: 0;
}
.finale__step {
border-top: 1px solid rgba(245, 241, 236, 0.18);
padding-top: 22px;
}
/* ─── Лёгкий hover на шагах ─── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.finale__step {
transition: transform 0.28s ease, border-top-color 0.28s ease;
}
.finale__step:hover {
transform: translateY(-3px);
border-top-color: rgba(200, 121, 42, 0.6);
}
}
.finale__step-num {
display: block;
font: 700 15px/1 var(--font-num, var(--font-body));
color: var(--accent);
letter-spacing: 1px;
margin-bottom: 14px;
}
.finale__step-title {
font: 600 clamp(19px, 1.7vw, 22px)/1.3 var(--font-serif);
color: #F5F1EC;
margin: 0 0 10px;
text-wrap: pretty;
}
.finale__step-text {
font: 400 15px/1.6 var(--font-body);
color: rgba(245, 241, 236, 0.78);
margin: 0;
text-wrap: pretty;
}
/* ─── Сроки ─── */
.finale__note {
font: 400 15px/1.6 var(--font-body);
color: rgba(245, 241, 236, 0.78);
text-align: left;
margin: clamp(36px, 4.5vw, 48px) auto 0;
max-width: 680px;
padding-left: 20px;
border-left: 2px solid var(--accent);
text-wrap: pretty;
}
.finale__note strong {
font-weight: 600;
color: #F5F1EC;
}
.finale__note a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 3px;
transition: color var(--dur, 0.25s) var(--ease-out, ease);
}
.finale__note a:hover {
color: #F5B36A;
}
/* ─── Адаптив ─── */
@media (max-width: 830px) {
.finale {
padding: 64px 0;
}
.finale__steps {
grid-template-columns: 1fr;
gap: 32px;
}
}
/* ═══ support.css ═══ */
/* ────────────────────────────────────────────────────
Support — «Поддерживающая работа»
Смысловая вставка после «Терапии с финалом», перед первой сессией.
Вид «Линии»: тонкие охряные правила, центрированная композиция,
тёмный «остров»-нота в финале (перекликается с #finale).
Tokens: design-system/colors_and_type.css
Хардкод rgba(200,121,42/44,44,42)/#F5F1EC — осознанные производные палитры ДС с альфой.
──────────────────────────────────────────────────── */
.support-block{background:var(--bg-warm);padding:clamp(48px,6vw,80px) 0}
.support-block__container{width:min(1120px,100% - 64px);margin:0 auto}
.support{position:relative;background:transparent;border-top:1px solid rgba(200,121,42,.30);border-bottom:1px solid rgba(200,121,42,.30);padding:clamp(40px,4.5vw,64px) clamp(16px,4vw,40px);text-align:center}
/* Верх — кикер, заголовок, вводные абзацы по центру */
.support__kicker{display:inline-flex;align-items:center;gap:14px;font:500 12px/1 var(--font-body);letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);margin:0 0 22px}
.support__kicker::before,.support__kicker::after{content:'';width:30px;height:1px;background:var(--accent)}
.support__title{font:500 clamp(30px,4vw,48px)/1.1 var(--font-serif);letter-spacing:-.6px;color:var(--text-dark);margin:0 auto 22px;max-width:16ch;text-wrap:balance}
.support__title em{font-style:italic;color:var(--accent)}
.support__intro{margin:0 auto;max-width:660px}
.support__intro p:first-child{font:500 clamp(18px,1.5vw,21px)/1.5 var(--font-serif);color:var(--text-dark);margin:0 0 12px;text-wrap:pretty}
.support__intro p:last-child{font:400 15.5px/1.62 var(--font-body);color:rgba(44,44,42,.74);margin:16px auto 0;max-width:560px;text-align:left;border-left:2px solid var(--accent);padding-left:18px;text-wrap:pretty}
.support__intro .u-accent{color:var(--accent)}
/* Метка-разделитель перед пунктами */
.support__mid{display:flex;flex-direction:column;align-items:center;gap:12px;margin:clamp(32px,4vw,46px) 0 0}
.support__mid::before{content:'';width:44px;height:1px;background:var(--accent)}
.support__mid span{font:500 12px/1 var(--font-body);letter-spacing:2.5px;text-transform:uppercase;color:var(--accent)}
/* Пункты — компактный ряд из трёх колонок с крупными номерами */
.support__points{list-style:none;margin:clamp(20px,2.5vw,28px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.support__point{padding:clamp(6px,1.4vw,12px) clamp(18px,2.4vw,32px);text-align:center}
.support__point+.support__point{border-left:1px solid rgba(200,121,42,.20)}
.support__num{display:block;font:900 clamp(30px,3.2vw,42px)/1 var(--font-number);color:var(--accent);letter-spacing:-1px;margin:0 0 10px}
.support__point h3{font:700 clamp(18px,1.5vw,21px)/1.3 var(--font-serif);color:var(--text-dark);margin:0 0 7px;text-wrap:pretty}
.support__point p{font:400 14.5px/1.55 var(--font-body);color:rgba(44,44,42,.8);margin:0;text-wrap:pretty}
/* Финальный блок — тёмная «примиряющая» нота */
.support__footer{position:relative;margin:clamp(36px,4vw,54px) auto 0;padding:clamp(32px,3.6vw,48px) clamp(28px,4vw,52px);background:var(--bg-dark);border-radius:14px;max-width:940px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,56px);align-items:start;text-align:left}
.support__footer-lead{font:500 clamp(27px,2.9vw,36px)/1.18 var(--font-serif);color:#F5F1EC;margin:0;text-wrap:balance}
.support__footer-lead em{font-style:italic;color:var(--accent)}
.support__footer-sub{font:400 clamp(16px,1.3vw,17px)/1.62 var(--font-body);color:rgba(245,241,236,.82);margin:0;text-wrap:pretty}
.support__outcomes-label{font:500 12px/1 var(--font-body);letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);margin:20px 0 0}
.support__outcomes{list-style:none;display:flex;flex-direction:column;gap:10px;margin:14px 0 0;padding:0}
.support__outcome{position:relative;padding-left:22px;font:500 clamp(16px,1.3vw,17px)/1.35 var(--font-body);color:#F5F1EC}
.support__outcome::before{content:'';position:absolute;left:0;top:.62em;transform:translateY(-50%) rotate(45deg);width:8px;height:8px;background:var(--accent)}
/* Строка-мост к форматам индивидуальной работы (ТЗ 20.07.2026) */
.support__bridge{border-top:1px solid rgba(200,121,42,.30);margin:clamp(28px,3.5vw,40px) 0 0;padding-top:clamp(20px,2.5vw,28px);font:400 15.5px/1.62 var(--font-body);color:rgba(44,44,42,.8);text-align:left;text-wrap:pretty}
.support__bridge strong{color:var(--text-dark)}
/* ─── Адаптив ─── */
@media (max-width:720px){
.support__points{grid-template-columns:1fr}
.support__point{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:6px;align-items:center;text-align:left;padding:18px 0}
.support__point+.support__point{border-left:0;border-top:1px solid rgba(200,121,42,.18)}
.support__num{margin:0;font-size:clamp(28px,9vw,34px)}
.support__point h3{margin:0;align-self:center}
.support__point p{grid-column:1 / -1;margin:0}
.support__footer{grid-template-columns:1fr;gap:16px}
}
@media (max-width:600px){
.support-block{padding:44px 0}
.support{padding:40px 6px}
.support__footer{padding:26px 22px}
}
/* ═══ booking-modal.css ═══ */
/* ════════════════════════════════════════════════════
Booking modal — единая форма записи на сессию
════════════════════════════════════════════════════ */
.booking-modal {
position: fixed;
inset: 0;
z-index: 1100;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(20, 16, 12, 0.68);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
animation: bookingFadeIn 0.24s var(--ease-out);
}
.booking-modal[data-open="true"] {
display: flex;
}
@keyframes bookingFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes bookingCardIn {
from { opacity: 0; transform: translateY(12px) scale(0.985); }
to { opacity: 1; transform: none; }
}
.booking-modal__card {
position: relative;
width: 100%;
max-width: 520px;
max-height: calc(100vh - 48px);
overflow-y: auto;
background: var(--surface);
border-radius: var(--radius-md);
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.18);
padding: 36px 36px 32px;
animation: bookingCardIn 0.28s var(--ease-out);
}
.booking-modal__close {
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
border: 0;
background: transparent;
border-radius: 50%;
color: var(--text-muted);
cursor: pointer;
display: grid;
place-items: center;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
z-index: 1;
}
.booking-modal__close:hover {
background: var(--bg-cream);
color: var(--text-dark);
}
.booking-modal__close svg { width: 16px; height: 16px; }
/* ── Header ──────────────────────────────────────── */
.booking-modal__title {
font: 500 28px/1.2 var(--font-serif);
letter-spacing: -0.4px;
color: var(--text-dark);
margin: 0 0 10px;
padding-right: 32px;
}
.booking-modal__lead {
font: 400 14.5px/1.55 var(--font-body);
color: var(--text-muted);
margin: 0 0 28px;
}
/* ── Form fields ─────────────────────────────────── */
.booking-form {
display: flex;
flex-direction: column;
gap: 22px;
}
.booking-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.booking-label {
font: 500 13px/1.3 var(--font-body);
letter-spacing: 0.3px;
color: var(--text-dark);
}
.booking-label-hint {
font: italic 400 12px/1.4 var(--font-body);
color: var(--text-muted);
margin-top: -3px;
}
.booking-input,
.booking-textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: #fff;
color: var(--text-dark);
font: 400 15px/1.5 var(--font-body);
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.booking-input::placeholder,
.booking-textarea::placeholder { color: rgba(60, 50, 40, 0.4); }
.booking-input:focus,
.booking-textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(200, 121, 42, 0.12);
}
.booking-textarea {
min-height: 110px;
resize: vertical;
font-family: var(--font-body);
}
.booking-input[aria-invalid="true"],
.booking-textarea[aria-invalid="true"] {
border-color: var(--danger);
}
/* Inline-ошибка под полем «Контакт» — показывается при невалидном формате
для выбранного канала. Скрыта по умолчанию, видна при data-visible="true". */
.booking-field-error {
display: none;
margin: 6px 0 0;
font: 400 13px/1.4 var(--font-body);
color: var(--danger);
}
.booking-field-error[data-visible="true"] { display: block; }
/* ── Messenger picker ────────────────────────────── */
.booking-messengers {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.booking-messenger {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 12px 6px 10px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
cursor: pointer;
transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.booking-messenger input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.booking-messenger:hover {
border-color: rgba(200, 121, 42, 0.4);
}
.booking-messenger[data-active="true"] {
border-color: var(--accent);
background: var(--accent-soft);
}
.booking-messenger__icon {
width: 26px;
height: 26px;
display: grid;
place-items: center;
}
.booking-messenger__icon svg {
width: 100%;
height: 100%;
display: block;
}
.booking-messenger__label {
font: 500 12px/1 var(--font-body);
color: var(--text-dark);
letter-spacing: 0.2px;
}
/* ── Consent checkbox ────────────────────────────── */
.booking-consent {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
font: 400 13.5px/1.5 var(--font-body);
color: var(--text-muted);
}
.booking-consent input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.booking-consent__box {
flex-shrink: 0;
width: 18px;
height: 18px;
border: 1.5px solid var(--border);
border-radius: 3px;
background: #fff;
display: grid;
place-items: center;
margin-top: 1px;
transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.booking-consent__box svg {
width: 12px;
height: 12px;
stroke: #fff;
stroke-width: 2.6;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0;
transition: opacity var(--dur) var(--ease);
}
.booking-consent input:checked ~ .booking-consent__box {
background: var(--accent);
border-color: var(--accent);
}
.booking-consent input:checked ~ .booking-consent__box svg { opacity: 1; }
.booking-consent input:focus-visible ~ .booking-consent__box {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.booking-consent a {
color: var(--accent);
text-decoration: underline;
text-decoration-color: var(--accent-line);
text-underline-offset: 2px;
}
.booking-consent a:hover { color: var(--accent-dark); }
/* ── Видимая SmartCaptcha (чекбокс «Я не робот») ───── */
.booking-captcha {
margin: var(--space-2) 0 var(--space-5);
max-width: 100%;
}
/* Пока виджет не отрендерен (грузится / скрипт заблокирован) — не оставляем пустой отступ */
.booking-captcha:empty {
margin: 0;
}
/* ── Submit ──────────────────────────────────────── */
.booking-submit {
width: 100%;
padding: 16px 24px;
border: 0;
border-radius: var(--radius-sm);
background: var(--accent);
color: #fff;
font: 500 15px/1 var(--font-body);
letter-spacing: 0.3px;
cursor: pointer;
transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease);
}
.booking-submit:hover:not(:disabled) {
background: var(--accent-dark);
transform: translateY(-1px);
}
.booking-submit:disabled {
opacity: 0.45;
cursor: not-allowed;
transform: none;
}
.booking-submit-note {
font: italic 400 12.5px/1.5 var(--font-body);
color: var(--text-muted);
margin: 0;
text-align: center;
}
.booking-error {
margin: 0;
padding: 12px 14px;
background: rgba(139, 46, 31, 0.08);
border-left: 3px solid var(--danger);
color: var(--danger);
font: 500 13px/1.5 var(--font-body);
border-radius: 2px;
display: none;
}
.booking-error[data-visible="true"] { display: block; }
/* ── Success state ───────────────────────────────── */
.booking-success {
display: none;
text-align: center;
padding: 24px 8px 4px;
}
.booking-success[data-visible="true"] { display: block; }
.booking-success__icon {
width: 64px;
height: 64px;
margin: 0 auto 20px;
border-radius: 50%;
background: var(--accent-soft);
display: grid;
place-items: center;
color: var(--accent);
}
.booking-success__icon svg {
width: 30px;
height: 30px;
stroke: currentColor;
stroke-width: 2.4;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.booking-success__title {
font: 500 26px/1.2 var(--font-serif);
letter-spacing: -0.3px;
color: var(--text-dark);
margin: 0 0 12px;
}
.booking-success__text {
font: 400 15px/1.6 var(--font-body);
color: var(--text-muted);
margin: 0 0 28px;
max-width: 420px;
margin-left: auto;
margin-right: auto;
}
/* Action buttons row */
.booking-success__actions {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0 0 22px;
}
.booking-success__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 14px 24px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
font: 500 14.5px/1 var(--font-body);
letter-spacing: 0.3px;
text-decoration: none;
cursor: pointer;
transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.booking-success__btn--primary {
background: var(--accent);
color: #fff;
}
.booking-success__btn--primary:hover {
background: var(--accent-dark);
color: #fff;
text-decoration: none;
transform: translateY(-1px);
}
.booking-success__btn--secondary {
background: transparent;
color: var(--text-dark);
border-color: var(--border);
}
.booking-success__btn--secondary:hover {
border-color: var(--accent);
color: var(--text-dark);
text-decoration: none;
transform: translateY(-1px);
}
.booking-success__btn-icon {
width: 22px;
height: 22px;
display: inline-grid;
place-items: center;
flex-shrink: 0;
}
.booking-success__btn-icon svg {
width: 100%;
height: 100%;
display: block;
}
.booking-success__close {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 20px;
border: 0;
background: transparent;
color: var(--text-muted);
font: 500 13px/1 var(--font-body);
letter-spacing: 0.3px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: color var(--dur) var(--ease);
}
.booking-success__close:hover { color: var(--text-dark); }
/* ── Responsive ──────────────────────────────────── */
@media (max-width: 560px) {
.booking-modal { padding: 12px; }
.booking-modal__card {
padding: 16px 18px 18px;
max-height: calc(100svh - 24px);
max-height: calc(100dvh - 24px);
border-radius: var(--radius-md);
}
.booking-modal__close { top: 8px; right: 8px; width: 32px; height: 32px; }
.booking-modal__close svg { width: 14px; height: 14px; }
/* Заголовок — компактнее, без лида */
.booking-modal__title {
font-size: 22px;
line-height: 1.18;
margin: 0 0 4px;
padding-right: 32px;
}
/* Форма — плотнее */
.booking-form { gap: 12px; }
.booking-field { gap: 4px; }
.booking-label { font-size: 12.5px; }
.booking-label-hint { font-size: 11.5px; margin-top: -2px; }
.booking-input,
.booking-textarea {
padding: 10px 12px;
font-size: 14.5px;
border-radius: var(--radius-sm);
}
.booking-textarea { min-height: 72px; }
/* Мессенджеры — 4 в ряд, компактнее */
.booking-messengers {
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.booking-messenger {
padding: 8px 4px 6px;
gap: 4px;
}
.booking-messenger__icon { width: 22px; height: 22px; }
.booking-messenger__label { font-size: 11px; }
/* Inline-input под мессенджерами — без лишнего отступа */
#bookingContact { margin-top: 6px !important; }
/* Согласие */
.booking-consent {
gap: 10px;
font-size: 12.5px;
line-height: 1.45;
}
.booking-consent__box { width: 17px; height: 17px; }
/* Кнопка отправки */
.booking-submit {
padding: 13px 20px;
font-size: 14.5px;
}
.booking-submit-note {
font-size: 12px;
line-height: 1.45;
}
/* Inline-стиль с margin-top:12px на note внутри HTML — перебиваем */
.booking-submit-note[style] { margin-top: 8px !important; }
}
/* ═══ pdf-doc.css ═══ */
/* ════════════════════════════════════════════════════
PDF после сессии — двухколоночный блок с превью документа
════════════════════════════════════════════════════ */
.pdf-doc {
background: var(--bg-warm);
padding: 56px 0 64px;
border-top: 1px solid var(--border);
}
.pdf-doc__container {
width: min(1240px, 92vw);
margin: 0 auto;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 64px;
align-items: start;
}
/* ── Левая колонка ── */
.pdf-doc__text {
max-width: 540px;
}
.pdf-doc__eyebrow {
display: inline-flex;
align-items: center;
gap: 16px;
font: 500 13px/1.3 var(--font-body);
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 22px;
}
.pdf-doc__eyebrow::before,
.pdf-doc__eyebrow::after {
content: '';
width: 32px;
height: 1px;
background: var(--accent);
}
.pdf-doc__title {
font: 500 clamp(30px, 3.4vw, 44px)/1.15 var(--font-serif);
letter-spacing: -0.4px;
color: var(--text-dark);
margin: 0 0 18px;
text-wrap: pretty;
}
.pdf-doc__title em {
font-style: italic;
color: var(--accent);
font-weight: 500;
}
.pdf-doc__lead {
font: italic 500 18px/1.4 var(--font-serif);
color: var(--accent);
margin: 0 0 28px;
letter-spacing: -0.2px;
}
.pdf-doc__body {
font: 400 16px/1.6 var(--font-body);
color: var(--text-dark);
margin: 0 0 14px;
}
.pdf-doc__body:last-of-type {
margin-bottom: 32px;
}
.pdf-doc__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 26px;
background: transparent;
border: 1px solid var(--accent);
border-radius: 4px;
color: var(--accent);
font: 500 13px/1 var(--font-body);
letter-spacing: 1.5px;
text-transform: uppercase;
cursor: pointer;
transition: background 0.2s var(--ease-out, ease-out),
color 0.2s var(--ease-out, ease-out);
}
.pdf-doc__cta:hover {
background: var(--accent);
color: #fff;
}
.pdf-doc__cta-arrow {
font-size: 14px;
transition: transform 0.2s var(--ease-out, ease-out);
}
.pdf-doc__cta:hover .pdf-doc__cta-arrow {
transform: translateX(3px);
}
/* ── Правая колонка: превью документа ── */
.pdf-doc__preview {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
.pdf-doc__frame {
position: relative;
width: 100%;
max-width: 360px;
aspect-ratio: 1 / 1.414; /* A4 */
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
background: #fff;
box-shadow: 0 14px 40px -22px rgba(20, 18, 14, 0.35);
cursor: zoom-in;
transition: box-shadow 0.25s var(--ease-out, ease-out);
}
.pdf-doc__frame:hover {
box-shadow: 0 22px 56px -22px rgba(20, 18, 14, 0.5);
}
.pdf-doc__page {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
display: block;
user-select: none;
pointer-events: none;
}
.pdf-doc__hint {
position: absolute;
bottom: 12px;
right: 12px;
background: rgba(20, 18, 14, 0.78);
color: #fff;
font: 500 11px/1 var(--font-body);
letter-spacing: 1px;
text-transform: uppercase;
padding: 7px 10px;
border-radius: 3px;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s var(--ease-out, ease-out);
}
.pdf-doc__frame:hover .pdf-doc__hint {
opacity: 1;
}
/* ── Навигация под превью ── */
.pdf-doc__nav {
display: flex;
align-items: center;
gap: 18px;
font: 500 13px/1 var(--font-body);
color: var(--text-muted);
letter-spacing: 0.5px;
}
.pdf-doc__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
background: transparent;
border: 1px solid var(--border);
border-radius: 4px;
color: var(--text-dark);
cursor: pointer;
font-size: 16px;
line-height: 1;
transition: border-color 0.2s var(--ease-out, ease-out),
color 0.2s var(--ease-out, ease-out),
background 0.2s var(--ease-out, ease-out);
}
.pdf-doc__arrow:hover:not(:disabled) {
border-color: var(--accent);
color: var(--accent);
}
.pdf-doc__arrow:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.pdf-doc__counter {
min-width: 56px;
text-align: center;
font-variant-numeric: tabular-nums;
letter-spacing: 1px;
}
.pdf-doc__counter strong {
color: var(--accent);
font-weight: 600;
}
/* ── Адаптив ── */
@media (max-width: 960px) {
.pdf-doc__container {
grid-template-columns: 1fr;
gap: 48px;
}
.pdf-doc__text {
max-width: none;
}
.pdf-doc__preview {
order: 2;
}
}
@media (max-width: 600px) {
.pdf-doc {
padding: 56px 0 64px;
}
.pdf-doc__title {
font-size: clamp(26px, 6.5vw, 32px);
}
.pdf-doc__lead {
font-size: 16px;
}
.pdf-doc__body {
font-size: 15.5px;
}
.pdf-doc__frame {
max-width: 320px;
}
.pdf-doc__arrow {
width: 44px;
height: 44px;
}
}
/* ─── Примечание о добровольности и конфиденциальности ─── */
.pdf-doc__smallnote {
font: 400 13.5px/1.55 var(--font-body);
color: var(--text-muted, rgba(60, 50, 40, 0.62));
margin: 14px 0 0;
text-wrap: pretty;
}
/* ═══ diag.css ═══ */
/* ════════════════════════════════════════════════════
Диагностическая сессия — низкобарьерный CTA-блок
════════════════════════════════════════════════════ */
.diag {
background: var(--bg-cream);
padding: 80px 0 88px;
border-top: 1px solid var(--border);
}
.diag__container {
width: min(1180px, 92vw);
margin: 0 auto;
display: grid;
grid-template-columns: 0.32fr 1fr;
gap: 64px;
align-items: start;
}
/* ── Фото слева ── */
.diag__photo {
width: 100%;
max-width: 300px;
aspect-ratio: 4 / 5;
border-radius: 6px;
overflow: hidden;
background: var(--bg-warm);
position: sticky;
top: 96px;
}
.diag__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 25%;
display: block;
}
/* ── Контент справа ── */
.diag__content {
max-width: 580px;
}
.diag__eyebrow {
display: inline-flex;
align-items: center;
gap: 16px;
font: 500 13px/1.3 var(--font-body);
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 22px;
}
.diag__eyebrow::before,
.diag__eyebrow::after {
content: '';
width: 32px;
height: 1px;
background: var(--accent);
}
.diag__title {
font: 500 clamp(36px, 4.2vw, 46px)/1.1 var(--font-serif); /* 46px: «Начать можно с одной сессии» помещается в одну строку в 580px */
letter-spacing: -0.5px;
text-wrap: balance;
color: var(--text-dark);
margin: 0 0 16px;
text-wrap: pretty;
}
.diag__title em {
font-style: italic;
color: var(--accent);
font-weight: 500;
}
.diag__lead {
font: italic 500 24px/1.35 var(--font-serif);
color: var(--accent);
margin: 0 0 28px;
letter-spacing: -0.3px;
}
/* ── Группы списков ── */
.diag__group {
margin: 0 0 22px;
}
.diag__group-title {
font: 600 15px/1.4 var(--font-body);
color: var(--text-dark);
margin: 0 0 10px;
letter-spacing: 0.1px;
}
.diag__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.diag__list li {
position: relative;
padding-left: 18px;
font: 400 15.5px/1.55 var(--font-body);
color: var(--text-dark);
}
.diag__list li::before {
content: '';
position: absolute;
left: 0;
top: 11px;
width: 8px;
height: 1px;
background: var(--accent);
}
.diag__list li em {
color: var(--text-muted);
font-style: normal;
}
/* ── Плашка с форматом и ценой ── */
.diag__price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 14px;
margin: 28px 0 24px;
padding: 18px 24px;
background: var(--accent-soft);
border-left: 3px solid var(--accent);
border-radius: 0 4px 4px 0;
}
.diag__price-duration {
font: 500 14px/1 var(--font-body);
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-dark);
}
.diag__price-divider {
color: var(--accent);
font-weight: 400;
opacity: 0.6;
}
.diag__price-amount {
font: 600 22px/1 var(--font-body);
color: var(--accent);
letter-spacing: -0.2px;
font-variant-numeric: tabular-nums;
}
/* ── CTA-кнопка ── */
.diag__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 32px;
background: var(--accent);
border: 1px solid var(--accent);
border-radius: 4px;
color: #fff;
font: 500 13px/1 var(--font-body);
letter-spacing: 1.5px;
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
transition: background 0.2s var(--ease-out, ease-out),
border-color 0.2s var(--ease-out, ease-out),
transform 0.2s var(--ease-out, ease-out);
}
.diag__cta:hover {
background: var(--accent-dark, #a8721c);
border-color: var(--accent-dark, #a8721c);
color: #fff; /* перебиваем глобальный a:hover, который красит текст в --accent-dark = цвет фона */
transform: translateY(-1px);
}
.diag__cta-arrow {
transition: transform 0.2s var(--ease-out, ease-out);
}
.diag__cta:hover .diag__cta-arrow {
transform: translateX(3px);
}
/* ── Адаптив ── */
@media (max-width: 960px) {
.diag__container {
grid-template-columns: 1fr;
gap: 28px;
}
.diag__photo {
position: static;
max-width: 220px;
margin: 0 auto;
aspect-ratio: 4 / 5;
}
.diag__content {
max-width: none;
}
}
@media (max-width: 600px) {
.diag {
padding: 56px 0 64px;
}
.diag__photo {
max-width: 200px;
}
.diag__title {
font-size: clamp(28px, 7vw, 36px);
}
.diag__lead {
font-size: 19px;
}
.diag__list li {
font-size: 15px;
}
.diag__price {
padding: 14px 18px;
gap: 10px;
}
.diag__price-amount {
font-size: 20px;
}
/* Кнопка во всю ширину на мобильном, текст и стрелка по центру */
.diag__cta {
display: flex;
width: 100%;
justify-content: center;
padding: 18px 24px;
}
}
/* ═══ faq.css ═══ */
/* ════════════════════════════════════════════════════
FAQ — частые вопросы перед записью
════════════════════════════════════════════════════ */
.faq {
background: var(--bg-cream);
padding: 80px 0 96px;
border-top: 1px solid var(--border);
}
.faq__container {
width: min(780px, 92vw);
margin: 0 auto;
}
/* ── Шапка ── */
.faq__header {
text-align: center;
margin: 0 0 48px;
}
.faq__eyebrow {
display: inline-flex;
align-items: center;
gap: 16px;
font: 500 13px/1.3 var(--font-body);
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 22px;
}
.faq__eyebrow::before,
.faq__eyebrow::after {
content: '';
width: 32px;
height: 1px;
background: var(--accent);
}
.faq__title {
font: 500 clamp(30px, 3.4vw, 44px)/1.15 var(--font-serif);
letter-spacing: -0.4px;
color: var(--text-dark);
margin: 0;
text-wrap: pretty;
}
/* ── Список ── */
.faq__list {
border-top: 1px solid var(--border);
}
.faq__item {
border-bottom: 1px solid var(--border);
}
.faq__question {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
background: transparent;
border: 0;
padding: 22px 0;
text-align: left;
cursor: pointer;
font: 500 17px/1.45 var(--font-body);
color: var(--text-dark);
letter-spacing: -0.1px;
transition: color 0.2s var(--ease-out, ease-out);
}
.faq__question:hover {
color: var(--accent);
}
.faq__item.is-open .faq__question {
color: var(--accent);
}
.faq__q-text {
flex: 1;
text-wrap: pretty;
}
.faq__icon {
flex: 0 0 auto;
position: relative;
width: 18px;
height: 18px;
margin-top: 4px;
}
.faq__icon::before,
.faq__icon::after {
content: '';
position: absolute;
background: currentColor;
transition: transform 0.25s var(--ease-out, ease-out),
opacity 0.25s var(--ease-out, ease-out);
}
.faq__icon::before {
left: 0;
right: 0;
top: 50%;
height: 1.5px;
transform: translateY(-50%);
}
.faq__icon::after {
top: 0;
bottom: 0;
left: 50%;
width: 1.5px;
transform: translateX(-50%);
}
.faq__item.is-open .faq__icon::after {
transform: translateX(-50%) rotate(90deg);
opacity: 0;
}
/* ── Ответ ── */
.faq__answer {
overflow: hidden;
max-height: 0;
transition: max-height 0.32s var(--ease-out, ease-out),
opacity 0.25s var(--ease-out, ease-out),
padding-bottom 0.32s var(--ease-out, ease-out);
opacity: 0;
}
.faq__item.is-open .faq__answer {
opacity: 1;
padding-bottom: 24px;
}
.faq__answer-inner {
padding: 4px 0 0;
max-width: 680px;
}
.faq__answer p {
font: 400 15.5px/1.65 var(--font-body);
color: var(--text-dark);
margin: 0 0 14px;
}
.faq__answer p:last-child {
margin-bottom: 0;
}
/* ── Адаптив ── */
@media (max-width: 600px) {
.faq {
padding: 56px 0 64px;
}
.faq__header {
margin-bottom: 36px;
}
.faq__question {
font-size: 16px;
padding: 18px 0;
gap: 16px;
}
.faq__answer p {
font-size: 15px;
line-height: 1.6;
}
}
/* ═══ testimonials.css ═══ */
/* ════════════════════════════════════════════════════
Testimonials — горизонтальная карусель реальных отзывов
════════════════════════════════════════════════════ */
.testimonials {
background: var(--bg-warm);
padding: 80px 0 96px;
border-top: 1px solid var(--border);
overflow: hidden;
}
/* ── Шапка ── */
.testimonials__header {
width: min(820px, 92vw);
margin: 0 auto 48px;
text-align: center;
}
.testimonials__eyebrow {
display: inline-flex;
align-items: center;
gap: 16px;
font: 500 13px/1.3 var(--font-body);
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 22px;
}
.testimonials__eyebrow::before,
.testimonials__eyebrow::after {
content: '';
width: 32px;
height: 1px;
background: var(--accent);
}
.testimonials__title {
font: 500 clamp(30px, 3.4vw, 44px)/1.15 var(--font-serif);
letter-spacing: -0.4px;
color: var(--text-dark);
margin: 0 0 16px;
text-wrap: pretty;
}
.testimonials__title em {
font-style: italic;
color: var(--accent);
font-weight: 500;
}
.testimonials__lead {
font: italic 400 17px/1.5 var(--font-serif);
color: var(--text-muted);
margin: 0;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
/* ── Карусель ── */
.testimonials__carousel {
position: relative;
width: min(1180px, 92vw);
margin: 0 auto;
/* мягкое затухание справа — обрез карточки читается как продолжение ленты */
-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 64px), transparent 100%);
mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 64px), transparent 100%);
}
.testimonials__track {
display: flex;
gap: 24px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
padding: 4px 4px 28px;
/* hide scrollbar */
scrollbar-width: none;
align-items: flex-start; /* карточки по высоте своего текста, без пустоты */
}
.testimonials__track::-webkit-scrollbar { display: none; }
.testimonials__track { cursor: grab; }
.testimonials__track.is-dragging {
cursor: grabbing;
scroll-snap-type: none;
scroll-behavior: auto;
user-select: none;
}
/* ── Карточка ── */
.testimonial-card {
flex: 0 0 clamp(320px, 28vw, 400px);
scroll-snap-align: start;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 32px 28px 24px;
display: flex;
flex-direction: column;
transition: border-color 0.22s ease-out,
box-shadow 0.22s ease-out,
transform 0.22s ease-out;
}
.testimonial-card:hover {
border-color: var(--accent);
box-shadow: 0 8px 24px -16px rgba(166, 124, 82, 0.35);
}
.testimonial-card__quote-mark {
font: italic 500 56px/0.6 var(--font-serif);
color: var(--accent);
opacity: 0.5;
margin: 0 0 12px;
height: 22px;
user-select: none;
}
.testimonial-card__body {
flex: 1;
font: 400 15px/1.6 var(--font-body);
color: var(--text-dark);
margin: 0 0 24px;
text-wrap: pretty;
}
.testimonial-card__body p {
margin: 0 0 12px;
}
.testimonial-card__body p:last-child {
margin-bottom: 0;
}
.testimonial-card__link {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
border: 0;
padding: 8px 0;
margin-top: auto;
color: var(--accent);
font: 500 13px/1.2 var(--font-body);
letter-spacing: 1.4px;
text-transform: uppercase;
cursor: pointer;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease-out, gap 0.2s ease-out;
}
.testimonial-card__link::after {
content: '→';
font-size: 15px;
letter-spacing: 0;
transition: transform 0.2s ease-out;
}
.testimonial-card__link:hover {
border-bottom-color: var(--accent);
gap: 12px;
}
.testimonial-card__link:hover::after {
transform: translateX(2px);
}
/* ── Управление: стрелки + счётчик ── */
.testimonials__controls {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-top: 28px;
}
.testimonials__arrow {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-dark);
font-size: 18px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: border-color 0.22s ease-out,
color 0.22s ease-out,
background 0.22s ease-out;
}
.testimonials__arrow:hover:not(:disabled) {
border-color: var(--accent);
color: var(--accent);
}
.testimonials__arrow:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.testimonials__counter {
font: 500 14px/1 var(--font-body);
color: var(--text-muted);
letter-spacing: 1.5px;
min-width: 60px;
text-align: center;
}
.testimonials__counter b {
font-weight: 600;
color: var(--text-dark);
}
/* ── Адаптив ── */
@media (max-width: 960px) {
.testimonials {
padding: 56px 0 64px;
}
.testimonials__header {
margin-bottom: 36px;
}
.testimonial-card {
flex-basis: clamp(280px, 80vw, 360px);
padding: 28px 24px 22px;
}
.testimonials__track {
padding-bottom: 20px;
}
}
@media (max-width: 600px) {
.testimonial-card {
flex-basis: 84vw;
}
.testimonials__arrow {
width: 42px;
height: 42px;
}
.testimonial-card__link {
padding: 12px 0;
font-size: 14px;
}
}
/* ═══ about-me.css ═══ */
/* ════════════════════════════════════════════════════
About me — личная история автора
════════════════════════════════════════════════════ */
.about-me {
background: var(--bg-cream, #faf7f2);
padding: 80px 0 88px;
border-top: 1px solid var(--border);
}
.about-me__container {
max-width: 1180px;
margin: 0 auto;
padding: 0 48px;
}
/* ── Header — sits at top of right column, aligned to photo top ── */
.about-me__header {
margin: 0 0 32px;
}
.about-me__eyebrow {
display: inline-flex;
align-items: center;
gap: 16px;
font: 500 13px/1.3 var(--font-body);
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 18px;
}
.about-me__eyebrow::before,
.about-me__eyebrow::after {
content: '';
width: 32px;
height: 1px;
background: var(--accent);
}
.about-me__title {
font: 500 clamp(30px, 3.4vw, 44px)/1.15 var(--font-serif);
letter-spacing: -0.4px;
color: var(--text-dark);
margin: 0 0 16px;
text-wrap: pretty;
}
.about-me__title em {
font-style: italic;
color: var(--accent);
font-weight: 500;
}
.about-me__lead {
font: italic 400 17px/1.5 var(--font-serif);
color: var(--text-medium, #4a4640);
margin: 0;
text-wrap: pretty;
}
/* ── Grid: media column + content column ───────────── */
.about-me__grid {
display: grid;
grid-template-columns: minmax(240px, 320px) 1fr;
gap: clamp(36px, 5vw, 64px);
align-items: stretch;
}
.about-me__media {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 0;
height: 100%;
}
.about-me__photo-wrap {
flex: 1 1 auto;
min-height: 280px;
overflow: hidden;
background: var(--surface);
border: 1px solid var(--border);
}
.about-me__photo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: grayscale(8%) contrast(0.98);
transition: filter 0.5s ease;
}
.about-me__photo:hover {
filter: grayscale(0%) contrast(1);
}
/* ── Essay ─────────────────────────────────────────── */
.about-me__content {
display: flex;
flex-direction: column;
}
.about-me__essay {
font: 400 16px/1.65 var(--font-body);
color: var(--text-medium, #4a4640);
}
.about-me__essay p {
margin: 0 0 14px;
text-wrap: pretty;
}
.about-me__essay p:last-child {
margin-bottom: 0;
}
.about-me__essay strong {
font-weight: 500;
color: var(--text-dark);
}
.about-me__pull {
margin: 18px 0 18px !important;
padding: 4px 0 4px 22px;
border-left: 2px solid var(--accent);
font: italic 400 18px/1.5 var(--font-serif) !important;
color: var(--text-dark);
}
/* ── Thumbs — under main photo in left column ──────── */
.about-me__thumbs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.about-me__thumb {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
border: 1px solid var(--border);
background: var(--surface);
padding: 0;
cursor: pointer;
transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.about-me__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: grayscale(20%);
transition: filter 0.4s ease, transform 0.5s ease;
}
.about-me__thumb:hover {
border-color: var(--accent);
box-shadow: 0 12px 28px -18px rgba(166, 124, 82, 0.45);
transform: translateY(-2px);
z-index: 1;
}
.about-me__thumb:hover img {
filter: grayscale(0%);
transform: scale(1.05);
}
.about-me__thumb:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ── Responsive ────────────────────────────────────── */
@media (max-width: 960px) {
.about-me {
padding: 64px 0 72px;
}
.about-me__container {
padding: 0 28px;
}
.about-me__grid {
grid-template-columns: 1fr;
gap: 32px;
align-items: start;
}
.about-me__media {
max-width: 420px;
margin: 0 auto;
width: 100%;
height: auto;
}
.about-me__photo-wrap {
flex: 0 0 auto;
aspect-ratio: 3 / 4;
min-height: 0;
}
.about-me__thumbs {
grid-template-columns: repeat(8, 1fr);
}
}
@media (max-width: 520px) {
.about-me__thumbs {
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.about-me__pull {
font-size: 16px !important;
padding-left: 16px;
}
}
/* ═══ book.css ═══ */
/* ════════════════════════════════════════════════════
Книга — кросс-промо на book.alexlisovoy.ru
Тёмный остров с фоновой фотографией (backlay.webp),
текст слева, книга в фоне справа.
════════════════════════════════════════════════════ */
.book-promo {
position: relative;
background: var(--bg-dark) url('assets/book/backlay.webp') center right / cover no-repeat;
color: var(--text-light);
overflow: hidden;
isolation: isolate;
min-height: clamp(560px, 60vw, 760px);
display: flex;
align-items: center;
padding: clamp(72px, 8vw, 112px) 0;
}
/* Subtle left-side gradient → guarantees text contrast over the photo */
.book-promo::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background:
linear-gradient(
90deg,
rgba(20, 16, 12, 0.92) 0%,
rgba(20, 16, 12, 0.82) 30%,
rgba(20, 16, 12, 0.45) 55%,
rgba(20, 16, 12, 0) 78%
);
pointer-events: none;
}
.book-promo__container {
position: relative;
z-index: 1;
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
width: 100%;
}
.book-promo__content {
max-width: 540px;
}
/* ── Eyebrow ──────────────────────────────────────── */
.book-promo__eyebrow {
display: inline-flex;
align-items: center;
gap: 16px;
font: 500 13px/1.3 var(--font-body);
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 22px;
}
.book-promo__eyebrow::before,
.book-promo__eyebrow::after {
content: '';
width: 32px;
height: 1px;
background: var(--accent);
}
/* ── Title ────────────────────────────────────────── */
.book-promo__title {
font: 500 clamp(30px, 3.4vw, 44px)/1.15 var(--font-serif);
letter-spacing: -0.4px;
color: var(--text-light);
margin: 0 0 18px;
text-wrap: pretty;
}
.book-promo__title em {
font-style: italic;
color: var(--accent);
font-weight: 500;
}
.book-promo__subtitle {
font: italic 400 18px/1.5 var(--font-serif);
color: rgba(245, 241, 236, 0.78);
margin: 0 0 32px;
text-wrap: pretty;
}
/* ── Stats strip ──────────────────────────────────── */
.book-promo__stats {
display: grid;
grid-template-columns: repeat(3, auto);
gap: clamp(20px, 2.5vw, 36px);
padding: 22px 0;
margin: 0 0 32px;
border-top: 1px solid rgba(245, 241, 236, 0.14);
border-bottom: 1px solid rgba(245, 241, 236, 0.14);
list-style: none;
}
.book-promo__stat {
display: flex;
align-items: baseline;
gap: 10px;
min-width: 0;
}
.book-promo__stat-num {
font: 900 clamp(28px, 2.8vw, 36px)/1 var(--font-number);
color: var(--accent);
letter-spacing: -0.5px;
flex-shrink: 0;
}
.book-promo__stat-label {
font: 400 12px/1.3 var(--font-body);
letter-spacing: 0.3px;
color: rgba(245, 241, 236, 0.78);
text-transform: none;
}
/* ── Description ──────────────────────────────────── */
.book-promo__desc {
font: 400 clamp(15px, 1.1vw, 17px)/1.65 var(--font-body);
color: rgba(245, 241, 236, 0.86);
margin: 0 0 32px;
max-width: 480px;
}
/* ── CTA ──────────────────────────────────────────── */
.book-promo__cta {
display: inline-flex;
align-items: center;
gap: 12px;
background: var(--accent);
color: #fff;
padding: 16px 28px;
border-radius: var(--radius-sm);
font: 500 15px/1 var(--font-body);
letter-spacing: 0.3px;
text-decoration: none;
transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.book-promo__cta:hover {
background: var(--accent-dark);
color: #fff;
transform: translateY(-2px);
text-decoration: none;
}
.book-promo__cta-arrow {
display: inline-block;
transition: transform var(--dur) var(--ease-out);
}
.book-promo__cta:hover .book-promo__cta-arrow {
transform: translateX(4px);
}
/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1100px) {
.book-promo {
background-position: 70% center;
}
}
@media (max-width: 860px) {
.book-promo {
min-height: 0;
padding: 56px 0 64px;
background-image: url('assets/book/book-mob.jpeg');
background-size: cover;
background-position: center bottom;
}
/* Mobile: книги видны снизу, текст сверху — притеняем верх, отпускаем низ */
.book-promo::before {
background:
linear-gradient(
180deg,
rgba(20, 16, 12, 0.92) 0%,
rgba(20, 16, 12, 0.85) 30%,
rgba(20, 16, 12, 0.55) 55%,
rgba(20, 16, 12, 0.25) 75%,
rgba(20, 16, 12, 0.10) 100%
);
}
.book-promo__content {
max-width: 100%;
}
}
@media (max-width: 520px) {
.book-promo__stats {
grid-template-columns: 1fr;
gap: 14px;
}
.book-promo__cta {
width: 100%;
justify-content: center;
}
}
/* ═══ articles.css ═══ */
/* ════════════════════════════════════════════════════
Articles — превью статей блога
════════════════════════════════════════════════════ */
.articles {
background: var(--bg-cream);
padding: clamp(72px, 8vw, 112px) 0;
border-top: 1px solid var(--border);
}
.articles__container {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
}
.articles__header {
max-width: 720px;
margin: 0 0 48px;
}
.articles__eyebrow {
display: inline-flex;
align-items: center;
gap: 16px;
font: 500 13px/1.3 var(--font-body);
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 20px;
}
.articles__eyebrow::before,
.articles__eyebrow::after {
content: '';
width: 32px; height: 1px;
background: var(--accent);
}
.articles__title {
font: 500 clamp(30px, 3.4vw, 44px)/1.15 var(--font-serif);
letter-spacing: -0.4px;
color: var(--text-dark);
margin: 0 0 18px;
text-wrap: pretty;
}
.articles__title em { font-style: italic; color: var(--accent); font-weight: 500; }
.articles__lead {
font: italic 400 18px/1.5 var(--font-serif);
color: var(--text-muted);
margin: 0;
max-width: 620px;
text-wrap: pretty;
}
/* ── Grid → горизонтальная лента с drag-скроллом ─── */
.articles__grid {
display: flex;
gap: 28px;
margin: 0 -4px 40px;
padding: 4px 4px 16px;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
cursor: grab;
}
.articles__grid::-webkit-scrollbar { display: none; }
.articles__grid.is-dragging {
cursor: grabbing;
scroll-snap-type: none;
user-select: none;
}
.article-card {
flex: 0 0 clamp(320px, 30vw, 380px);
scroll-snap-align: start;
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
text-decoration: none;
color: var(--text-dark);
overflow: hidden;
transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.article-card:hover {
border-color: var(--accent);
transform: translateY(-3px);
box-shadow: var(--shadow-card);
text-decoration: none;
color: var(--text-dark);
}
.article-card__media {
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--bg-warm);
position: relative;
}
.article-card__media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s var(--ease-out);
}
.article-card:hover .article-card__media img {
transform: scale(1.04);
}
/* Placeholder when no image */
.article-card__placeholder {
position: absolute; inset: 0;
display: grid; place-items: center;
background:
linear-gradient(135deg, rgba(200, 121, 42, 0.08) 0%, rgba(200, 121, 42, 0.02) 100%),
var(--bg-warm);
color: var(--accent);
font: 500 italic 14px/1 var(--font-serif);
letter-spacing: 0.5px;
border-bottom: 1px solid var(--border);
}
.article-card__body {
padding: 24px 24px 22px;
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.article-card__title {
font: 500 20px/1.3 var(--font-serif);
color: var(--text-dark);
letter-spacing: -0.2px;
margin: 0;
text-wrap: pretty;
}
.article-card__desc {
font: 400 14px/1.6 var(--font-body);
color: var(--text-muted);
margin: 0;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.article-card__cta {
font: 500 14px/1 var(--font-body);
letter-spacing: 0.3px;
color: var(--accent);
margin-top: 4px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.article-card__cta::after {
content: '→';
transition: transform var(--dur) var(--ease-out);
}
.article-card:hover .article-card__cta::after { transform: translateX(4px); }
/* ── All articles button ───────────────────────────── */
.articles__all-wrap { display: flex; justify-content: center; }
.articles__all {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
border: 1px solid var(--accent);
border-radius: var(--radius-sm);
background: transparent;
color: var(--accent);
font: 500 14px/1 var(--font-body);
letter-spacing: 0.3px;
text-decoration: none;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.articles__all:hover { background: var(--accent); color: #fff; text-decoration: none; }
.articles__all::after { content: '→'; transition: transform var(--dur) var(--ease-out); }
.articles__all:hover::after { transform: translateX(4px); }
/* ── Responsive ────────────────────────────────────── */
@media (max-width: 960px) {
.articles__grid { gap: 22px; }
.article-card { flex-basis: clamp(300px, 44vw, 360px); }
}
@media (max-width: 640px) {
.articles__grid { gap: 18px; }
.article-card { flex-basis: min(84vw, 340px); }
.articles__header { margin-bottom: 32px; }
}
/* ═══ footer.css ═══ */
/* ════════════════════════════════════════════════════
Footer — тёмное закрытие лендинга
════════════════════════════════════════════════════ */
.site-footer {
background: var(--bg-dark);
color: var(--text-muted-dark);
padding: clamp(18px, 1.8vw, 24px) 0 0;
}
.site-footer__container {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
}
/* ─── Top zone: 3 columns ───────────────────────── */
.site-footer__grid {
display: grid;
grid-template-columns: 0.9fr 1.9fr 1fr;
gap: clamp(28px, 4vw, 56px);
padding-bottom: clamp(12px, 1.6vw, 18px);
align-items: start;
}
/* ── Column: brand ───────────────────────────────── */
.site-footer__brand {
max-width: 360px;
}
/* Выделенная карточка ОЛТ под подписью автора */
.site-footer__brand-olt {
margin-top: 22px;
}
/* Мини-ссылка (тест субличностей) под карточкой ОЛТ */
.site-footer__mini-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 10px;
padding: 2px 2px 2px 12px;
border-left: 2px solid rgba(200, 121, 42, 0.55);
color: rgba(245, 241, 236, 0.6);
font: 500 12px/1.35 var(--font-body);
text-decoration: none;
transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-footer__mini-link:hover {
color: var(--accent);
border-left-color: var(--accent);
text-decoration: none;
}
.site-footer__mini-link-arrow { font-size: 12px; color: var(--accent); }
.site-footer__sig {
display: flex;
align-items: center;
gap: 12px;
color: var(--text-light);
text-decoration: none;
margin-bottom: 10px;
}
.site-footer__sig:hover { color: var(--text-light); text-decoration: none; }
.site-footer__sig-mark {
width: 42px; height: 42px;
border: 1px solid rgba(245, 241, 236, 0.45);
border-radius: 50%;
display: grid; place-items: center;
font: 500 italic 18px/1 var(--font-serif);
color: var(--text-light);
letter-spacing: 1px;
flex-shrink: 0;
}
.site-footer__sig-text {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.1;
}
.site-footer__sig-name {
font: 500 15px/1.2 var(--font-body);
color: var(--text-light);
letter-spacing: 0.2px;
}
.site-footer__sig-role {
font: 500 11px/1.3 var(--font-body);
color: rgba(245, 241, 236, 0.62);
letter-spacing: 2.4px;
text-transform: uppercase;
}
.site-footer__about {
font: italic 400 14px/1.55 var(--font-serif);
color: rgba(245, 241, 236, 0.7);
margin: 0;
text-wrap: pretty;
}
/* ── Column heading (eyebrow) ────────────────────── */
.site-footer__heading {
display: inline-flex;
align-items: center;
gap: 12px;
font: 500 11px/1.3 var(--font-body);
letter-spacing: 2.2px;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 10px;
}
.site-footer__heading::before {
content: '';
width: 20px; height: 1px;
background: var(--accent);
}
/* ── Lists ───────────────────────────────────────── */
.site-footer__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.site-footer__list a,
.site-footer__contact-text {
font: 400 14px/1.45 var(--font-body);
color: rgba(245, 241, 236, 0.78);
text-decoration: none;
transition: color var(--dur) var(--ease);
display: inline-flex;
align-items: center;
gap: 10px;
}
.site-footer__list a:hover {
color: var(--accent);
text-decoration: none;
}
.site-footer__contact-text { color: rgba(245, 241, 236, 0.6); }
.site-footer__contact-label {
font: 400 13px/1.5 var(--font-body);
color: rgba(245, 241, 236, 0.4);
margin-right: 4px;
letter-spacing: 0.3px;
}
.site-footer__icon {
width: 16px; height: 16px;
color: var(--accent);
flex-shrink: 0;
display: inline-block;
}
.site-footer__icon svg {
width: 100%; height: 100%;
display: block;
fill: currentColor;
}
/* ─── Socials row (content channels) ────────────── */
.site-footer__socials {
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid rgba(245, 241, 236, 0.08);
}
.site-footer__socials-label {
font: 500 11px/1.3 var(--font-body);
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(245, 241, 236, 0.4);
margin: 0 0 8px;
}
.site-footer__socials-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.site-footer__social {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 12px 6px 9px;
border: 1px solid rgba(245, 241, 236, 0.16);
border-radius: 999px;
color: rgba(245, 241, 236, 0.82);
font: 500 12.5px/1 var(--font-body);
letter-spacing: 0.2px;
text-decoration: none;
transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-footer__social svg {
width: 16px;
height: 16px;
fill: var(--accent);
flex-shrink: 0;
}
.site-footer__social:hover {
border-color: var(--accent);
color: var(--text-light);
background: rgba(200, 121, 42, 0.08);
text-decoration: none;
}
/* ─── Bottom zone: legal strip ──────────────────── */
.site-footer__legal {
border-top: 1px solid rgba(245, 241, 236, 0.1);
padding: 10px 0 12px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.site-footer__copyright {
font: 400 12.5px/1.55 var(--font-body);
color: rgba(245, 241, 236, 0.45);
margin: 0;
max-width: 640px;
}
.site-footer__legal-links {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
font: 400 12.5px/1.5 var(--font-body);
}
.site-footer__legal-links a {
color: rgba(245, 241, 236, 0.55);
text-decoration: none;
transition: color var(--dur) var(--ease);
}
.site-footer__legal-links a:hover { color: var(--accent); }
.site-footer__legal-sep {
color: rgba(245, 241, 236, 0.22);
}
.site-footer__legal-note {
color: rgba(245, 241, 236, 0.4);
}
/* ─── Column: projects (related sites) ──────────── */
.site-footer__projects-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.site-footer__project {
position: relative;
display: block;
padding: 9px 34px 10px 12px;
border: 1px solid rgba(245, 241, 236, 0.16);
border-radius: 10px;
text-decoration: none;
transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-footer__project:hover {
border-color: var(--accent);
background: rgba(200, 121, 42, 0.08);
text-decoration: none;
}
.site-footer__project-title {
display: block;
font: 500 13.5px/1.3 var(--font-body);
color: var(--text-light);
letter-spacing: 0.2px;
}
.site-footer__project-sub {
display: block;
margin-top: 2px;
font: 400 11.5px/1.4 var(--font-body);
color: rgba(245, 241, 236, 0.55);
text-wrap: pretty;
}
.site-footer__project-arrow {
position: absolute;
top: 10px;
right: 12px;
font-size: 14px;
line-height: 1;
color: var(--accent);
transition: transform var(--dur) var(--ease);
}
.site-footer__project:hover .site-footer__project-arrow {
transform: translate(2px, -2px);
}
/* ─── Выделенная карточка (для коллег · ОЛТ) ─────── */
.site-footer__project--featured {
border-color: rgba(200, 121, 42, 0.55);
background: rgba(200, 121, 42, 0.10);
}
.site-footer__project--featured::before {
content: "Для специалистов";
display: inline-block;
margin-bottom: 5px;
font: 600 9px/1 var(--font-body);
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--accent);
}
.site-footer__project--featured .site-footer__project-title { color: var(--accent); }
.site-footer__project--featured:hover {
border-color: var(--accent);
background: rgba(200, 121, 42, 0.16);
}
/* ─── Responsive ────────────────────────────────── */
@media (max-width: 860px) {
.site-footer__grid {
grid-template-columns: 1fr;
gap: 22px;
}
.site-footer__brand {
max-width: 540px;
}
}
@media (max-width: 520px) {
.site-footer__projects-list {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.site-footer__grid {
gap: 32px;
}
.site-footer__legal {
flex-direction: column;
align-items: flex-start;
gap: 14px;
padding: 20px 0 24px;
}
.site-footer__copyright,
.site-footer__legal-links {
font-size: 13px;
}
}
/* ═══ final-cta.css ═══ */
/* ════════════════════════════════════════════════════
Final CTA — тёмный остров, охряное свечение, один CTA
════════════════════════════════════════════════════ */
.final-cta {
position: relative;
background: var(--bg-dark);
color: var(--text-light);
padding: clamp(80px, 9vw, 128px) 0;
overflow: hidden;
isolation: isolate;
}
/* Компактная версия для середины лендинга */
.final-cta--compact {
padding: clamp(52px, 6vw, 80px) 0;
}
/* Радиальное охряное свечение из центра */
.final-cta::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 760px;
height: 760px;
transform: translate(-50%, -50%);
background: radial-gradient(
circle,
rgba(200, 121, 42, 0.32) 0%,
rgba(200, 121, 42, 0.15) 28%,
rgba(200, 121, 42, 0.06) 52%,
rgba(200, 121, 42, 0) 72%
);
filter: blur(20px);
z-index: 0;
pointer-events: none;
}
.final-cta__container {
position: relative;
z-index: 1;
max-width: 720px;
margin: 0 auto;
padding: 0 var(--gutter);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
.final-cta__eyebrow {
display: inline-flex;
align-items: center;
gap: 16px;
font: 500 13px/1.3 var(--font-body);
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 24px;
}
.final-cta__eyebrow::before,
.final-cta__eyebrow::after {
content: '';
width: 32px; height: 1px;
background: var(--accent);
}
.final-cta__title {
font: 500 clamp(30px, 4vw, 48px)/1.15 var(--font-serif);
letter-spacing: -0.5px;
color: var(--text-light);
margin: 0 0 22px;
text-wrap: balance;
max-width: 640px;
}
.final-cta__title em {
font-style: italic;
color: var(--accent);
font-weight: 500;
}
.final-cta__lead {
font: italic 400 clamp(17px, 1.5vw, 19px)/1.55 var(--font-serif);
color: rgba(245, 241, 236, 0.78);
margin: 0 0 40px;
max-width: 540px;
text-wrap: pretty;
}
.final-cta__btn {
display: inline-block;
background: var(--accent);
color: #fff;
padding: 18px 36px;
border: 0;
border-radius: var(--radius-sm);
font: 500 16px/1 var(--font-body);
letter-spacing: 0.3px;
text-decoration: none;
cursor: pointer;
transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
box-shadow: 0 18px 40px -16px rgba(200, 121, 42, 0.6);
}
.final-cta__btn:hover {
background: var(--accent-dark);
color: #fff;
transform: translateY(-2px);
text-decoration: none;
box-shadow: 0 24px 50px -16px rgba(200, 121, 42, 0.7);
}
.final-cta__note {
font: italic 400 13px/1.5 var(--font-body);
color: rgba(245, 241, 236, 0.58);
margin: 18px 0 0;
}
@media (max-width: 720px) {
.final-cta { padding: 64px 0 72px; }
.final-cta::before { width: 480px; height: 480px; }
.final-cta__btn { padding: 16px 28px; }
}
/* ═══ lead-magnet.css ═══ */
/* ════════════════════════════════════════════════════
Lead Magnet — exit-intent попап с главой книги
ТЗ: спокойный регистр, без давления, в стилистике лендинга
════════════════════════════════════════════════════ */
.lead-magnet {
position: fixed;
inset: 0;
z-index: 200;
display: grid;
place-items: center;
padding: 24px;
pointer-events: none;
opacity: 0;
transition: opacity 0.32s var(--ease-out);
}
.lead-magnet[data-open="true"] {
opacity: 1;
pointer-events: auto;
}
.lead-magnet__overlay {
position: absolute;
inset: 0;
background: rgba(20, 16, 12, 0.62);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* ─── Card ────────────────────────────────────────── */
.lead-magnet__card {
position: relative;
background: var(--bg-cream);
border: 1px solid var(--border);
border-radius: 6px;
box-shadow: 0 28px 80px -16px rgba(20, 16, 12, 0.5), 0 8px 24px rgba(20, 16, 12, 0.15);
width: min(560px, 100%);
max-height: calc(100vh - 48px);
overflow-y: auto;
padding: 40px 44px 36px;
display: flex;
flex-direction: column;
gap: 20px;
transform: translateY(16px);
transition: transform 0.32s var(--ease-out);
}
.lead-magnet[data-open="true"] .lead-magnet__card {
transform: translateY(0);
}
.lead-magnet__close {
position: absolute;
top: 14px;
right: 14px;
width: 32px;
height: 32px;
border: 0;
background: transparent;
color: var(--text-muted);
display: grid;
place-items: center;
cursor: pointer;
border-radius: 50%;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lead-magnet__close:hover {
background: rgba(20, 16, 12, 0.06);
color: var(--text-dark);
}
.lead-magnet__close svg {
width: 14px;
height: 14px;
}
/* ─── Header ──────────────────────────────────────── */
.lead-magnet__header {
display: grid;
grid-template-columns: 110px 1fr;
gap: 24px;
align-items: center;
}
.lead-magnet__cover {
position: relative;
width: 110px;
aspect-ratio: 3 / 4;
border-radius: 4px;
overflow: hidden;
background: #1f1b17;
box-shadow: 0 8px 22px -6px rgba(20, 16, 12, 0.32), 0 2px 6px rgba(20, 16, 12, 0.1);
flex-shrink: 0;
}
.lead-magnet__cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.lead-magnet__header-text {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.lead-magnet__eyebrow {
font: 500 11px/1.3 var(--font-body);
letter-spacing: 2.2px;
text-transform: uppercase;
color: var(--accent);
margin: 0;
display: inline-flex;
align-items: center;
gap: 10px;
}
.lead-magnet__eyebrow::before {
content: '';
width: 20px;
height: 1px;
background: var(--accent);
}
.lead-magnet__title {
font: 500 clamp(22px, 2.4vw, 28px)/1.2 var(--font-serif);
letter-spacing: -0.3px;
color: var(--text-dark);
margin: 0;
text-wrap: pretty;
}
.lead-magnet__title em {
color: var(--accent);
font-style: italic;
font-weight: 500;
}
/* ─── Description ────────────────────────────────── */
.lead-magnet__desc {
font: 400 15px/1.55 var(--font-body);
color: var(--text-dark);
margin: 0;
text-wrap: pretty;
}
.lead-magnet__desc em {
color: var(--accent);
font-style: italic;
font-weight: 500;
}
/* ─── Form ───────────────────────────────────────── */
.lead-magnet__form {
display: flex;
flex-direction: column;
gap: 14px;
}
.lead-magnet__field {
display: flex;
flex-direction: column;
gap: 6px;
}
.lead-magnet__input {
width: 100%;
padding: 14px 16px;
border: 1px solid var(--border);
border-radius: 4px;
background: #FFFFFF;
font: 400 15px/1.4 var(--font-body);
color: var(--text-dark);
transition: border-color var(--dur) var(--ease);
}
.lead-magnet__input::placeholder {
color: var(--text-muted);
}
.lead-magnet__input:focus {
outline: none;
border-color: var(--accent);
}
.lead-magnet__input[aria-invalid="true"] {
border-color: var(--accent);
}
.lead-magnet__error {
font: 400 13px/1.45 var(--font-body);
color: var(--accent);
margin: 0;
min-height: 1px;
}
.lead-magnet__error[data-visible="false"] {
display: none;
}
/* ─── Consent checkbox ───────────────────────────── */
.lead-magnet__consent {
display: grid;
grid-template-columns: 18px 1fr;
gap: 10px;
align-items: flex-start;
cursor: pointer;
font: 400 13px/1.5 var(--font-body);
color: var(--text-dark);
user-select: none;
}
.lead-magnet__consent input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.lead-magnet__consent-box {
width: 18px;
height: 18px;
border: 1px solid var(--border);
border-radius: 3px;
background: #FFFFFF;
margin-top: 1px;
display: grid;
place-items: center;
transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.lead-magnet__consent-box svg {
width: 10px;
height: 10px;
stroke: #FFFFFF;
stroke-width: 2.4;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0;
transition: opacity var(--dur) var(--ease);
}
.lead-magnet__consent input:checked + .lead-magnet__consent-box {
background: var(--accent);
border-color: var(--accent);
}
.lead-magnet__consent input:checked + .lead-magnet__consent-box svg {
opacity: 1;
}
.lead-magnet__consent input:focus-visible + .lead-magnet__consent-box {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.lead-magnet__consent a {
color: var(--accent);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.lead-magnet__consent a:hover {
text-decoration: none;
}
/* ─── Submit ─────────────────────────────────────── */
.lead-magnet__submit {
background: var(--accent);
color: #FFFFFF;
border: 0;
border-radius: 4px;
padding: 16px 24px;
font: 500 15px/1 var(--font-body);
letter-spacing: 0.2px;
cursor: pointer;
transition: background var(--dur) var(--ease-out);
margin-top: 2px;
}
.lead-magnet__submit:hover:not(:disabled) {
background: var(--accent-dark);
color: #FFFFFF; /* перебиваем глобальный a:hover: #lmDownload — , текст «сливался» с фоном */
}
.lead-magnet__submit:disabled {
background: rgba(200, 121, 42, 0.4);
cursor: not-allowed;
}
.lead-magnet__submit[data-loading="true"] {
opacity: 0.85;
cursor: progress;
position: relative;
color: transparent;
}
.lead-magnet__submit[data-loading="true"]::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-top-color: #FFFFFF;
border-radius: 50%;
animation: lm-spin 0.8s linear infinite;
}
@keyframes lm-spin {
to { transform: rotate(360deg); }
}
.lead-magnet__note {
font: italic 400 12.5px/1.5 var(--font-serif);
color: var(--text-muted);
margin: 4px 0 0;
text-wrap: pretty;
}
/* ─── Success state ──────────────────────────────── */
.lead-magnet__success {
display: flex;
flex-direction: column;
gap: 18px;
align-items: flex-start;
padding: 8px 0;
}
.lead-magnet__success-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(200, 121, 42, 0.12);
display: grid;
place-items: center;
color: var(--accent);
}
.lead-magnet__success-icon svg {
width: 22px;
height: 22px;
stroke: currentColor;
stroke-width: 2.4;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.lead-magnet__success-title {
font: 500 clamp(24px, 2.5vw, 30px)/1.2 var(--font-serif);
color: var(--text-dark);
margin: 0;
letter-spacing: -0.3px;
}
.lead-magnet__success-text {
font: 400 15px/1.55 var(--font-body);
color: var(--text-dark);
margin: 0;
text-wrap: pretty;
}
.lead-magnet__success-close {
margin-top: 4px;
background: transparent;
border: 1px solid var(--border);
border-radius: 4px;
padding: 12px 22px;
font: 500 14px/1 var(--font-body);
color: var(--text-dark);
cursor: pointer;
transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lead-magnet__success-close:hover {
border-color: var(--accent);
color: var(--accent);
}
[data-state-active="form"] .lead-magnet__success,
[data-state-active="success"] .lead-magnet__header,
[data-state-active="success"] .lead-magnet__desc,
[data-state-active="success"] .lead-magnet__form {
display: none;
}
/* ─── Responsive ─────────────────────────────────── */
@media (max-width: 560px) {
.lead-magnet { padding: 16px; }
.lead-magnet__card { padding: 32px 22px 28px; gap: 18px; }
.lead-magnet__header {
grid-template-columns: 88px 1fr;
gap: 18px;
}
.lead-magnet__cover { width: 88px; }
.lead-magnet__close { width: 44px; height: 44px; top: 8px; right: 8px; }
}
/* ═══ mobile-overrides.css ═══ */
/* ════════════════════════════════════════════════════
Mobile overrides — block headers centered
На мобильном (≤860px) eyebrow + title + lead каждой
секции центрируются. Карточки внутри секций не трогаем.
════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* ── EYEBROW (inline-flex с декоративными линиями)
Переключаем на block flex + fit-content + margin auto,
чтобы декоративные ::before/::after линии остались по бокам
от текста, а сам блок встал по центру строки. */
.diag__eyebrow,
.boundaries__eyebrow,
.approach__eyebrow,
.edu__eyebrow,
.certs__eyebrow,
.cases__eyebrow,
.supervision__eyebrow,
.lead-magnet__eyebrow,
.final-cta__eyebrow,
.blog-header__eyebrow,
.blog-cta__eyebrow,
.articles__eyebrow,
.related-articles__eyebrow,
.social-channels__eyebrow,
.pricing__eyebrow,
.testimonials__eyebrow,
.about-me__eyebrow,
.faq__eyebrow,
.pdf-doc__eyebrow,
.book-promo__eyebrow {
display: flex;
width: -moz-fit-content;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
/* ── TITLE — просто text-align: center на самом заголовке */
.diag__title,
.boundaries__title,
.approach__title,
.edu__title,
.certs__title,
.cases__title,
.final-cta__title,
.blog-header__title,
.blog-cta__title,
.articles__title,
.related-articles__title,
.social-channels__title,
.pricing__title,
.testimonials__title,
.about-me__title,
.faq__title,
.pdf-doc__title,
.book-promo__title {
text-align: center;
}
/* ── LEAD / SUBTITLE — выравнивание под title */
.diag__lead,
.approach__lead,
.edu__lead,
.pricing__lead,
.final-cta__lead,
.articles__lead,
.pdf-doc__lead,
.book-promo__subtitle,
.testimonials__lead,
.about-me__lead,
.blog-cta__lead,
.faq__lead,
.boundaries__lead,
.cases__lead {
text-align: center;
}
}