/* ========================================================================== academy.css · Академия спортивной психологии «Психея Чемпиона» Единая дизайн-система публичного сайта champion-academy.ru Версия 1.0 · 15.09.2026 · Claude (локальный прототип, не опубликован) Правила: - все классы с префиксом pc-; - глобального reset нет: базовые стили действуют только внутри .pc-page; - все цвета, шрифты, радиусы, тени, ширины и отступы - в токенах ниже; - страничные стили допустимы только для уникального содержимого страницы. Оглавление 01 Токены 09 Карточки и статусы 02 Основа страницы 10 Плашки и уведомления 03 Типографика 11 Формы 04 Контейнеры и сетки 12 Отзывы, факты, этапы, вопросы 05 Секции 13 Финальный призыв и подвал 06 Кнопки 14 Окна и просмотр документов 07 Шапка и меню 15 Служебные состояния 08 Первый экран 16 Длинные документы и служебные страницы 17 Утилиты, движение, печать ========================================================================== */ /* 01 · ТОКЕНЫ ------------------------------------------------------------- */ :root { /* Палитра Indigo Noir */ --pc-indigo-900: #1A1235; --pc-indigo-700: #2B1F52; --pc-indigo-500: #3D2E72; --pc-indigo-300: #6B5FA0; --pc-gold: #C9A46A; --pc-gold-light: #E8D4A8; --pc-gold-dark: #A8865A; --pc-gold-ink: #7E6035; /* золото для мелкого текста на светлом фоне, контраст 5.4:1 */ --pc-paper: #FAF6EE; /* светлый бежевый, основной фон */ --pc-beige: #F4EEE3; /* тёплый беж, чередование секций */ --pc-lavender: #EDEAF5; --pc-white: #FFFFFF; /* Текст */ --pc-ink: #1E1835; --pc-ink-soft: #3F3A55; --pc-muted: #5E5873; --pc-on-dark: #FFFFFF; --pc-on-dark-soft: rgba(255, 255, 255, 0.74); --pc-on-dark-muted: rgba(255, 255, 255, 0.56); /* Линии */ --pc-line: rgba(43, 31, 82, 0.12); --pc-line-strong: rgba(43, 31, 82, 0.22); --pc-line-dark: rgba(232, 212, 168, 0.18); /* Смысловые цвета */ --pc-success: #2F6F52; --pc-success-bg: #E7F2EC; --pc-warning: #8A5A12; --pc-warning-bg: #FBF0DC; --pc-danger: #A6402F; --pc-danger-bg: #FBEAE6; --pc-info: var(--pc-indigo-500); --pc-info-bg: var(--pc-lavender); /* Шрифты */ --pc-font-head: 'Geologica', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --pc-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --pc-font-accent: 'Lora', Georgia, 'Times New Roman', serif; /* Размеры текста: телефон -> широкий экран */ --pc-fs-hero: clamp(2.35rem, 1.2rem + 4.6vw, 4.5rem); --pc-fs-h1: clamp(2rem, 1.25rem + 3vw, 3.5rem); --pc-fs-h2: clamp(1.7rem, 1.2rem + 2vw, 2.75rem); --pc-fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); --pc-fs-h4: 1.0625rem; --pc-fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); --pc-fs-body: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem); --pc-fs-small: 0.9375rem; --pc-fs-caption: 0.8125rem; --pc-fs-eyebrow: 0.75rem; --pc-lh-tight: 1.1; --pc-lh-head: 1.18; --pc-lh-body: 1.62; /* Отступы */ --pc-space-1: 4px; --pc-space-2: 8px; --pc-space-3: 12px; --pc-space-4: 16px; --pc-space-5: 24px; --pc-space-6: 32px; --pc-space-7: 48px; --pc-space-8: 64px; --pc-section-y: clamp(48px, 2.5rem + 3vw, 96px); --pc-section-y-sm: clamp(32px, 1.5rem + 2vw, 56px); --pc-gutter: clamp(16px, 4vw, 48px); --pc-grid-gap: clamp(16px, 1rem + 1vw, 28px); /* Ширины */ --pc-w-page: 1200px; --pc-w-wide: 1320px; --pc-w-text: 760px; --pc-w-doc: 820px; --pc-w-narrow: 620px; --pc-header-h: 68px; /* Радиусы */ --pc-r-xs: 6px; --pc-r-sm: 10px; --pc-r-md: 16px; --pc-r-lg: 24px; --pc-r-xl: 32px; --pc-r-pill: 999px; /* Тени на основе индиго */ --pc-shadow-sm: 0 1px 2px rgba(26, 18, 53, 0.06); --pc-shadow-md: 0 2px 6px rgba(26, 18, 53, 0.05), 0 10px 24px rgba(26, 18, 53, 0.07); --pc-shadow-lg: 0 6px 14px rgba(26, 18, 53, 0.08), 0 24px 56px rgba(26, 18, 53, 0.12); --pc-shadow-gold: 0 8px 24px rgba(201, 164, 106, 0.28); --pc-focus: 0 0 0 3px var(--pc-paper), 0 0 0 5px var(--pc-gold-dark); /* Движение */ --pc-ease: cubic-bezier(0.16, 1, 0.3, 1); --pc-dur: 0.22s; /* Слои */ --pc-z-header: 50; --pc-z-modal: 1000; } /* 02 · ОСНОВА СТРАНИЦЫ --------------------------------------------------- */ body.pc-page { margin: 0; background: var(--pc-paper); color: var(--pc-ink); font-family: var(--pc-font-body); font-size: var(--pc-fs-body); line-height: var(--pc-lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; hyphens: none; overflow-wrap: normal; word-break: normal; } .pc-page, .pc-page *, .pc-page *::before, .pc-page *::after { box-sizing: border-box; } html:has(body.pc-page) { scroll-behavior: smooth; scroll-padding-top: calc(var(--pc-header-h) + 12px); overflow-x: clip; } :where(.pc-page) img { max-width: 100%; height: auto; display: block; } :where(.pc-page) a { color: inherit; } .pc-page :focus-visible { outline: none; box-shadow: var(--pc-focus); border-radius: var(--pc-r-xs); } .pc-page ::selection { background: var(--pc-gold-light); color: var(--pc-indigo-900); } .pc-main { display: block; } .pc-skip { position: absolute; left: 12px; top: -60px; z-index: calc(var(--pc-z-header) + 1); padding: 10px 16px; border-radius: var(--pc-r-sm); background: var(--pc-gold); color: var(--pc-indigo-900); font: 600 0.9375rem/1 var(--pc-font-head); text-decoration: none; } .pc-skip:focus { top: 12px; } .pc-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* 03 · ТИПОГРАФИКА ------------------------------------------------------- */ .pc-h-hero, .pc-h1, .pc-h2, .pc-h3, .pc-h4, .pc-lead, .pc-caption { font-family: var(--pc-font-head); color: var(--pc-indigo-700); margin: 0; text-wrap: balance; } .pc-page p, .pc-page li { text-wrap: pretty; } .pc-page h1, .pc-page h2, .pc-page h3, .pc-page h4, .pc-page .pc-lead, .pc-page .pc-caption { text-wrap: balance; } .pc-h-hero { font-size: var(--pc-fs-hero); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; } .pc-h1 { font-size: var(--pc-fs-h1); font-weight: 800; line-height: var(--pc-lh-tight); letter-spacing: -0.025em; } .pc-h2 { font-size: var(--pc-fs-h2); font-weight: 700; line-height: var(--pc-lh-head); letter-spacing: -0.02em; } .pc-h3 { font-size: var(--pc-fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; } .pc-h4 { font-size: var(--pc-fs-h4); font-weight: 600; line-height: 1.3; } .pc-h2 + .pc-lead, .pc-h1 + .pc-lead { margin-top: var(--pc-space-4); } .pc-accent { /* Lora только для эмоционального акцента */ font-family: var(--pc-font-accent); font-style: italic; font-weight: 500; letter-spacing: -0.005em; color: var(--pc-gold-dark); } .pc-on-dark .pc-accent, .pc-accent--light { color: var(--pc-gold-light); } .pc-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 var(--pc-space-4); font: 600 var(--pc-fs-eyebrow)/1.3 var(--pc-font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--pc-gold-ink); } .pc-eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; flex: none; } .pc-eyebrow--center { justify-content: center; } .pc-on-dark .pc-eyebrow { color: var(--pc-gold); } .pc-lead { font-size: var(--pc-fs-lead); line-height: 1.55; color: var(--pc-ink-soft); margin: 0; max-width: 62ch; } .pc-text { margin: 0 0 var(--pc-space-4); max-width: 68ch; } .pc-text:last-child { margin-bottom: 0; } .pc-text--justify { text-align: justify; text-align-last: left; hyphens: none; } .pc-small { font-size: var(--pc-fs-small); } .pc-caption { font-size: var(--pc-fs-caption); line-height: 1.45; color: var(--pc-muted); } .pc-muted { color: var(--pc-muted); } .pc-strong { font-weight: 600; color: var(--pc-indigo-700); } .pc-nowrap { white-space: nowrap; } .pc-on-dark { color: var(--pc-on-dark-soft); } .pc-on-dark .pc-h-hero, .pc-on-dark .pc-h1, .pc-on-dark .pc-h2, .pc-on-dark .pc-h3, .pc-on-dark .pc-h4, .pc-on-dark .pc-strong { color: var(--pc-on-dark); } .pc-on-dark .pc-lead { color: var(--pc-on-dark-soft); } .pc-on-dark .pc-caption, .pc-on-dark .pc-muted { color: var(--pc-on-dark-muted); } .pc-test-page .pc-caption, .pc-test-page .pc-small { font-size: max(0.9375rem, 15px); } .pc-test-page .pc-on-dark .pc-caption, .pc-test-page .pc-on-dark .pc-muted { color: var(--pc-on-dark-soft); } .pc-quote { margin: 0; padding: 0; font-family: var(--pc-font-accent); font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.45; color: var(--pc-indigo-700); text-wrap: balance; } .pc-on-dark .pc-quote { color: var(--pc-gold-light); } .pc-quote__by { display: block; margin-top: var(--pc-space-4); font: 500 var(--pc-fs-small)/1.4 var(--pc-font-body); font-style: normal; color: var(--pc-muted); } .pc-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--pc-space-3); } .pc-list > li { position: relative; padding-left: 28px; } .pc-list > li::before { content: ""; position: absolute; left: 2px; top: 0.55em; width: 14px; height: 8px; border-left: 2px solid var(--pc-gold-dark); border-bottom: 2px solid var(--pc-gold-dark); transform: rotate(-45deg) translateY(-3px); } .pc-list--dot > li::before { width: 7px; height: 7px; border: 0; border-radius: 50%; background: var(--pc-gold); transform: none; top: 0.62em; } .pc-on-dark .pc-list > li::before { border-color: var(--pc-gold); } .pc-divider { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--pc-gold), transparent); opacity: 0.7; } /* 04 · КОНТЕЙНЕРЫ И СЕТКИ ------------------------------------------------ */ .pc-container { width: 100%; max-width: calc(var(--pc-w-page) + var(--pc-gutter) * 2); margin-inline: auto; padding-inline: var(--pc-gutter); } .pc-container--wide { max-width: calc(var(--pc-w-wide) + var(--pc-gutter) * 2); } .pc-container--text { max-width: calc(var(--pc-w-text) + var(--pc-gutter) * 2); } .pc-container--doc { max-width: calc(var(--pc-w-doc) + var(--pc-gutter) * 2); } .pc-container--narrow { max-width: calc(var(--pc-w-narrow) + var(--pc-gutter) * 2); } .pc-grid { display: grid; gap: var(--pc-grid-gap); grid-template-columns: minmax(0, 1fr); } @media (min-width: 700px) { .pc-grid--2, .pc-grid--3, .pc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .pc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .pc-split { display: grid; gap: clamp(28px, 4vw, 72px); align-items: center; grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .pc-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } .pc-split--reverse > :first-child { order: 2; } .pc-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pc-split--top { align-items: start; } } .pc-stack > * + * { margin-top: var(--pc-space-4); } .pc-stack--lg > * + * { margin-top: var(--pc-space-6); } .pc-row { display: flex; flex-wrap: wrap; gap: var(--pc-space-3); align-items: center; } .pc-row--center { justify-content: center; } /* Горизонтальная лента на телефоне вместо длинной колонки одинаковых карточек */ .pc-rail { display: grid; gap: var(--pc-grid-gap); } @media (max-width: 699px) { .pc-rail { grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: calc(var(--pc-gutter) * -1); padding: 4px var(--pc-gutter) 16px; scrollbar-width: none; } .pc-rail::-webkit-scrollbar { display: none; } .pc-rail > * { scroll-snap-align: start; } } @media (min-width: 700px) { .pc-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .pc-rail--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1000px) { .pc-rail--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1200px) { .pc-rail--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .pc-rail-hint { display: none; margin-top: 4px; font-size: var(--pc-fs-caption); color: var(--pc-muted); } @media (max-width: 699px) { .pc-rail-hint { display: block; } } /* 05 · СЕКЦИИ ------------------------------------------------------------ */ .pc-section { padding-block: var(--pc-section-y); position: relative; } .pc-section--sm { padding-block: var(--pc-section-y-sm); } .pc-section--paper { background: var(--pc-paper); } .pc-section--beige { background: var(--pc-beige); } .pc-section--white { background: var(--pc-white); } .pc-section--lavender { background: var(--pc-lavender); } .pc-section--dark { background: radial-gradient(90% 70% at 85% 0%, rgba(61, 46, 114, 0.9) 0%, rgba(61, 46, 114, 0) 60%), var(--pc-indigo-900); color: var(--pc-on-dark-soft); } .pc-section--indigo { background: var(--pc-indigo-700); color: var(--pc-on-dark-soft); } .pc-section--paper + .pc-section--paper, .pc-section--beige + .pc-section--beige, .pc-section--white + .pc-section--white, .pc-section--lavender + .pc-section--lavender, .pc-section--dark + .pc-section--dark, .pc-section--indigo + .pc-section--indigo { padding-top: var(--pc-section-y-sm); } .pc-section--flush-top { padding-top: 0 !important; } .pc-section-head { margin-bottom: clamp(28px, 3vw, 40px); max-width: 780px; } .pc-section-head--center { margin-inline: auto; text-align: center; } .pc-section-head--center .pc-lead { margin-inline: auto; } .pc-section-head--row { max-width: none; display: flex; flex-wrap: wrap; gap: var(--pc-space-4) var(--pc-space-6); align-items: end; justify-content: space-between; } .pc-section-head--row > :first-child { flex: 1 1 420px; max-width: 720px; } .pc-section-head--row > :last-child:not(:first-child) { flex: 0 1 44ch; } /* 06 · КНОПКИ ------------------------------------------------------------ */ .pc-btn { --pc-btn-bg: var(--pc-indigo-700); --pc-btn-fg: var(--pc-white); --pc-btn-bd: transparent; --pc-btn-bg-h: var(--pc-indigo-900); --pc-btn-fg-h: var(--pc-white); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 26px; border: 1.5px solid var(--pc-btn-bd); border-radius: var(--pc-r-sm); background: var(--pc-btn-bg); color: var(--pc-btn-fg); font: 600 1rem/1.2 var(--pc-font-head); letter-spacing: 0.005em; max-width: 100%; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; transition: background-color var(--pc-dur) var(--pc-ease), color var(--pc-dur) var(--pc-ease), border-color var(--pc-dur) var(--pc-ease), box-shadow var(--pc-dur) var(--pc-ease), transform var(--pc-dur) var(--pc-ease); -webkit-appearance: none; appearance: none; } .pc-btn:hover { background: var(--pc-btn-bg-h); color: var(--pc-btn-fg-h); transform: translateY(-1px); box-shadow: var(--pc-shadow-md); } .pc-btn:active { transform: translateY(0); box-shadow: none; } .pc-btn:focus-visible { box-shadow: var(--pc-focus); border-radius: var(--pc-r-sm); } .pc-btn svg { width: 18px; height: 18px; flex: none; } .pc-btn--gold { --pc-btn-bg: var(--pc-gold); --pc-btn-fg: var(--pc-indigo-900); --pc-btn-bg-h: var(--pc-gold-light); --pc-btn-fg-h: var(--pc-indigo-900); } .pc-btn--gold:hover { box-shadow: var(--pc-shadow-gold); } .pc-btn--indigo { /* значения по умолчанию */ } .pc-btn--outline { --pc-btn-bg: transparent; --pc-btn-fg: var(--pc-indigo-700); --pc-btn-bd: var(--pc-line-strong); --pc-btn-bg-h: var(--pc-white); --pc-btn-fg-h: var(--pc-indigo-700); } .pc-btn--outline:hover { border-color: var(--pc-indigo-700); } .pc-btn--outline-light { --pc-btn-bg: transparent; --pc-btn-fg: var(--pc-white); --pc-btn-bd: rgba(255, 255, 255, 0.38); --pc-btn-bg-h: rgba(255, 255, 255, 0.08); --pc-btn-fg-h: var(--pc-white); } .pc-btn--outline-light:hover { border-color: var(--pc-gold-light); } .pc-btn--soft { --pc-btn-bg: var(--pc-lavender); --pc-btn-fg: var(--pc-indigo-700); --pc-btn-bg-h: #E2DDF0; --pc-btn-fg-h: var(--pc-indigo-700); } .pc-btn--sm { min-height: 42px; padding: 10px 20px; font-size: 0.9375rem; } .pc-btn--lg { min-height: 58px; padding: 16px 32px; font-size: 1.0625rem; } .pc-btn--block { display: flex; width: 100%; } .pc-btn--2l { flex-direction: column; gap: 1px; min-height: 64px; line-height: 1.15; } .pc-btn--2l .pc-btn__main, .pc-btn--2l .pc-btn__sub { display: block; max-width: 100%; white-space: nowrap; } .pc-btn--2l .pc-btn__sub { font-size: 0.875em; opacity: 0.85; } .pc-btn[disabled], .pc-btn[aria-disabled="true"], .pc-btn.is-disabled { --pc-btn-bg: #E3DFEA; --pc-btn-fg: #8C869D; --pc-btn-bd: transparent; --pc-btn-bg-h: #E3DFEA; --pc-btn-fg-h: #8C869D; cursor: not-allowed; transform: none; box-shadow: none; } .pc-on-dark .pc-btn[aria-disabled="true"] { --pc-btn-bg: rgba(255,255,255,.08); --pc-btn-fg: rgba(255,255,255,.55); --pc-btn-bg-h: rgba(255,255,255,.08); --pc-btn-fg-h: rgba(255,255,255,.55); } .pc-btn.is-loading { position: relative; color: transparent; pointer-events: none; } .pc-btn.is-loading::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--pc-btn-fg); border-right-color: transparent; animation: pc-spin 0.8s linear infinite; } .pc-link { /* текстовая кнопка */ display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; border: 0; background: none; cursor: pointer; font: 600 1rem/1.3 var(--pc-font-head); color: var(--pc-indigo-700); text-decoration: underline; text-decoration-color: var(--pc-gold); text-decoration-thickness: 1.5px; text-underline-offset: 5px; transition: color var(--pc-dur) var(--pc-ease), text-underline-offset var(--pc-dur) var(--pc-ease); } .pc-link:hover { color: var(--pc-gold-ink); text-underline-offset: 7px; } .pc-on-dark .pc-link { color: var(--pc-gold-light); } .pc-on-dark .pc-link:hover { color: var(--pc-white); } .pc-link[aria-disabled="true"] { color: var(--pc-muted); text-decoration: none; cursor: default; } .pc-link svg { width: 16px; height: 16px; } .pc-inline-link { color: var(--pc-indigo-500); text-decoration: underline; text-decoration-color: rgba(107, 95, 160, 0.45); text-underline-offset: 3px; } .pc-inline-link:hover { color: var(--pc-indigo-700); text-decoration-color: var(--pc-gold); } .pc-on-dark .pc-inline-link { color: var(--pc-gold-light); } .pc-actions { display: flex; flex-wrap: wrap; gap: var(--pc-space-3); align-items: center; margin-top: var(--pc-space-6); } @media (max-width: 520px) { .pc-actions--stack { flex-direction: column; align-items: stretch; } .pc-actions--stack .pc-btn { width: 100%; } } @media (max-width: 700px) { .pc-path__answer, .pc-text--justify { text-align: left; } } .pc-msg-btn { gap: 10px; } .pc-msg-btn img, .pc-msg-btn .pc-icon { width: 22px; height: 22px; border-radius: 6px; flex: none; } .pc-msg-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--pc-space-3); align-items: stretch; } .pc-msg-pair .pc-btn { width: 100%; } .pc-msg-pair--compact { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); width: min(100%, 520px); } @media (max-width: 520px) { .pc-msg-pair { grid-template-columns: minmax(0, 1fr); } } /* 07 · ШАПКА И МЕНЮ ------------------------------------------------------ */ .pc-header { position: sticky; top: 0; z-index: var(--pc-z-header); background: rgba(26, 18, 53, 0.94); -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--pc-line-dark); color: var(--pc-white); } .pc-header__inner { display: flex; align-items: center; gap: var(--pc-space-5); min-height: var(--pc-header-h); } .pc-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 0; } .pc-brand__mark { width: 40px; height: 40px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(232, 212, 168, 0.35); background: var(--pc-indigo-700); object-fit: cover; } .pc-brand__text { display: flex; flex-direction: column; min-width: 0; } .pc-brand__kicker { font: 500 0.625rem/1.2 var(--pc-font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--pc-gold); white-space: nowrap; } .pc-brand__name { font: 700 1.0625rem/1.2 var(--pc-font-head); letter-spacing: -0.01em; color: var(--pc-white); white-space: nowrap; } .pc-nav { margin-left: auto; } .pc-nav__list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; } .pc-nav__link { display: inline-block; padding: 8px 12px; border-radius: var(--pc-r-xs); font: 500 0.9375rem/1.2 var(--pc-font-body); color: rgba(255, 255, 255, 0.78); text-decoration: none; transition: color var(--pc-dur) var(--pc-ease), background-color var(--pc-dur) var(--pc-ease); } .pc-nav__link:hover { color: var(--pc-white); background: rgba(255, 255, 255, 0.06); } .pc-nav__link[aria-current="page"], .pc-nav__link.is-current { color: var(--pc-gold-light); } .pc-nav__programs { position: relative; } .pc-nav__dropdown { position: absolute; z-index: 2; left: 0; top: calc(100% + 10px); width: max-content; min-width: 310px; margin: 0; padding: 8px; list-style: none; visibility: hidden; opacity: 0; pointer-events: none; border: 1px solid var(--pc-line-dark); border-radius: var(--pc-r-md); background: var(--pc-indigo-900); box-shadow: var(--pc-shadow-lg); transform: translateY(-4px); transition: opacity var(--pc-dur) var(--pc-ease), transform var(--pc-dur) var(--pc-ease), visibility var(--pc-dur); } .pc-nav__dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } .pc-nav__dropdown a { display: block; padding: 11px 12px; border-radius: var(--pc-r-xs); color: rgba(255, 255, 255, 0.82); font: 500 0.9rem/1.3 var(--pc-font-body); text-decoration: none; } .pc-nav__dropdown a:hover, .pc-nav__dropdown a:focus-visible { color: var(--pc-white); background: rgba(255, 255, 255, 0.08); } .pc-nav__dropdown a[aria-current="page"] { color: var(--pc-gold-light); } .pc-nav__programs:hover .pc-nav__dropdown, .pc-nav__programs:focus-within .pc-nav__dropdown, .pc-nav__programs.is-open .pc-nav__dropdown { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); } .pc-nav__programs.is-keyboard-closed .pc-nav__dropdown { visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: none; } .pc-nav__programs.is-open > .pc-nav__link { color: var(--pc-white); background: rgba(255, 255, 255, 0.06); } .pc-header__cta { flex: none; } /* Мобильное меню на
: работает без JavaScript */ .pc-menu { display: none; margin-left: auto; position: static; } .pc-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: var(--pc-r-sm); border: 1px solid rgba(255, 255, 255, 0.24); cursor: pointer; font: 600 0.9375rem/1 var(--pc-font-head); color: var(--pc-white); } .pc-menu > summary::-webkit-details-marker { display: none; } .pc-menu__icon { width: 18px; height: 12px; position: relative; } .pc-menu__icon::before, .pc-menu__icon::after, .pc-menu__icon i { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--pc-dur) var(--pc-ease), opacity var(--pc-dur) var(--pc-ease); } .pc-menu__icon::before { top: 0; } .pc-menu__icon i { top: 5px; } .pc-menu__icon::after { bottom: 0; } .pc-menu[open] .pc-menu__icon::before { transform: translateY(5px) rotate(45deg); } .pc-menu[open] .pc-menu__icon i { opacity: 0; } .pc-menu[open] .pc-menu__icon::after { transform: translateY(-5px) rotate(-45deg); } .pc-menu__panel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100dvh - var(--pc-header-h)); overflow-y: auto; background: var(--pc-indigo-900); border-bottom: 1px solid var(--pc-line-dark); padding: 12px var(--pc-gutter) 24px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35); } .pc-menu:not([open]) .pc-menu__panel { display: none; } .pc-menu__list { list-style: none; margin: 0; padding: 0; } .pc-menu__list a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--pc-line-dark); font: 500 1.125rem/1.3 var(--pc-font-head); color: var(--pc-white); text-decoration: none; } .pc-menu__list a:hover { color: var(--pc-gold-light); } .pc-menu__sublist { margin: 0; padding: 4px 0 10px 20px; list-style: none; border-bottom: 1px solid var(--pc-line-dark); } .pc-menu__sublist a { padding: 10px 4px; border-bottom: 0; font-size: 0.9375rem; color: var(--pc-on-dark-soft); } .pc-menu__programs > a { border-bottom: 0; color: var(--pc-gold-light); } .pc-menu__panel .pc-btn { margin-top: 20px; } .pc-menu__note { margin: 14px 0 0; font-size: var(--pc-fs-caption); color: var(--pc-on-dark-muted); } @media (max-width: 1079px) { .pc-nav, .pc-header__cta { display: none; } .pc-menu { display: block; } .pc-header__inner { position: relative; } } @media (max-width: 420px) { .pc-brand__kicker { font-size: 0.5625rem; letter-spacing: 0.1em; } .pc-brand__name { font-size: 1rem; } .pc-brand__mark { width: 36px; height: 36px; } .pc-menu > summary .pc-menu__label { display: none; } } /* Упрощённая шапка служебных страниц */ .pc-header--compact .pc-header__inner { min-height: 60px; } .pc-header--compact .pc-header__side { margin-left: auto; display: flex; align-items: center; gap: 8px; } @media (max-width: 520px) { .pc-header--compact .pc-header__side .pc-btn--outline-light { display: none; } } /* Хлебная крошка / возврат */ .pc-back { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--pc-fs-small)/1.3 var(--pc-font-body); color: var(--pc-muted); text-decoration: none; } .pc-back:hover { color: var(--pc-indigo-700); } .pc-on-dark .pc-back { color: var(--pc-on-dark-muted); } .pc-on-dark .pc-back:hover { color: var(--pc-white); } /* 08 · ПЕРВЫЙ ЭКРАН ------------------------------------------------------ */ .pc-hero { position: relative; overflow: hidden; padding-block: clamp(40px, 2rem + 5vw, 112px) clamp(48px, 2rem + 5vw, 120px); background: radial-gradient(70% 60% at 100% 0%, rgba(61, 46, 114, 0.95) 0%, rgba(61, 46, 114, 0) 70%), radial-gradient(60% 50% at 0% 100%, rgba(201, 164, 106, 0.10) 0%, rgba(201, 164, 106, 0) 70%), var(--pc-indigo-900); color: var(--pc-on-dark-soft); } .pc-hero::before, .pc-hero::after { /* декоративные круги из брендбука */ content: ""; position: absolute; border-radius: 50%; pointer-events: none; border: 1px solid rgba(201, 164, 106, 0.13); } .pc-hero::before { width: 620px; height: 620px; right: -180px; top: -240px; } .pc-hero::after { width: 420px; height: 420px; left: -220px; bottom: -260px; } .pc-hero > .pc-container { position: relative; z-index: 1; } .pc-hero__grid { display: grid; gap: clamp(32px, 4vw, 64px); align-items: center; grid-template-columns: minmax(0, 1fr); } @media (min-width: 960px) { .pc-hero__grid { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); } .pc-hero__copy { grid-column: 2; grid-row: 1; } .pc-hero__portrait { grid-column: 1; grid-row: 1; } .pc-hero__portrait::before { inset: 18px 18px -18px -18px; } } .pc-hero__title { margin-top: var(--pc-space-2); } .pc-h-hero .pc-accent { display: block; } .pc-hero__lead { margin-top: var(--pc-space-5); max-width: 36em; } .pc-hero__meta { margin-top: var(--pc-space-6); display: flex; flex-wrap: wrap; gap: 8px; } @media (min-width: 1280px) { .pc-hero__meta { flex-wrap: nowrap; gap: 6px; } .pc-hero__meta .pc-badge { padding-inline: 8px; font-size: 0.6875rem; white-space: nowrap; } } .pc-home-hero__actions { align-items: stretch; } @media (min-width: 960px) { .pc-hero__copy { text-align: right; } .pc-hero__copy .pc-eyebrow { justify-content: flex-end; } .pc-hero__copy .pc-hero__title { font-size: clamp(2.35rem, 3.9vw, 4rem); letter-spacing: -0.03em; } .pc-hero__copy .pc-hero__title .pc-accent { white-space: nowrap; } .pc-hero__copy .pc-hero__lead { width: min(100%, 56ch); margin-left: auto; text-align: justify; text-align-last: right; text-wrap: pretty; } .pc-home-hero__actions { display: flex; justify-content: flex-end; } .pc-home-hero__actions .pc-btn { width: auto; padding: 16px 32px; } } @media (max-width: 959px) { .pc-home-hero__actions { display: grid; grid-template-columns: minmax(0, 1fr); } .pc-home-hero__actions .pc-btn { width: 100%; } } @media (max-width: 520px) { .pc-home-hero__actions .pc-btn { padding-inline: 20px; } } .pc-portrait { position: relative; margin: 0; max-width: 440px; justify-self: center; width: 100%; } .pc-portrait img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--pc-r-lg); box-shadow: var(--pc-shadow-lg); } .pc-portrait::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border-radius: var(--pc-r-lg); border: 1px solid rgba(201, 164, 106, 0.45); z-index: -1; } .pc-portrait__card { position: absolute; left: -12px; bottom: 22px; max-width: 78%; padding: 14px 16px; border-radius: var(--pc-r-md); background: rgba(255, 255, 255, 0.96); color: var(--pc-ink); box-shadow: var(--pc-shadow-lg); } .pc-portrait__name { display: block; font: 700 1rem/1.2 var(--pc-font-head); color: var(--pc-indigo-700); } .pc-portrait__quote { display: block; font: italic 500 1rem/1.4 var(--pc-font-accent); color: var(--pc-indigo-700); } .pc-portrait__role { display: block; margin-top: 2px; font-size: var(--pc-fs-caption); line-height: 1.35; color: var(--pc-muted); } @media (max-width: 959px) { .pc-portrait { max-width: 360px; justify-self: start; } .pc-portrait img { aspect-ratio: 4 / 4.4; } } @media (max-width: 520px) { .pc-portrait { max-width: none; } .pc-portrait::before { display: none; } .pc-portrait img { aspect-ratio: 4 / 3.6; object-position: 50% 22%; } .pc-portrait__card { left: 12px; bottom: 12px; } } /* Малый первый экран продуктовых и служебных страниц */ .pc-hero--product { padding-block: clamp(36px, 2rem + 4vw, 96px); } .pc-hero--result { padding-block: clamp(40px, 2rem + 4vw, 88px); text-align: left; } /* Герой продуктовых лендингов: текст слева, крупный кадр справа (задание 07, 18.09.2026). Правая граница кадра читается чётко, верх, левый край и низ растворяются в фоне. Слот работает и без картинки (плейсхолдер). */ .pc-hero--landing .pc-hero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; } .pc-hero__landing-copy { min-width: 0; position: relative; z-index: 2; } .pc-hero-figure { --pc-hero-focus: 50% 18%; position: relative; z-index: 1; width: 100%; margin: 0; min-width: 0; justify-self: end; } .pc-hero-figure__media { display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 20%, #000 42%, #000 100%), linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 18%, #000 66%, rgba(0,0,0,0) 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 20%, #000 42%, #000 100%), linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 18%, #000 66%, rgba(0,0,0,0) 100%); mask-composite: intersect; } .pc-hero-figure__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pc-hero-focus); } .pc-hero-figure[data-hero-slot="ustoychivost"] { --pc-hero-focus: 62% 14%; } .pc-hero-figure__placeholder { position: relative; background: radial-gradient(circle at 72% 24%, rgba(232,212,168,.18), transparent 18%), radial-gradient(circle at 68% 44%, rgba(107,95,160,.48), transparent 30%), linear-gradient(145deg, #1A1235 8%, #3D2E72 62%, #211640 100%); } .pc-hero-figure__placeholder::before { content: ""; position: absolute; width: 76%; aspect-ratio: 1; right: -18%; top: 8%; border: 1px solid rgba(201,164,106,.48); border-radius: 50%; } .pc-hero-figure__placeholder::after { content: ""; position: absolute; width: 54%; aspect-ratio: 1; right: 4%; bottom: 10%; border: 1px solid rgba(232,212,168,.2); border-radius: 50%; } .pc-hero-figure__placeholder > span { position: absolute; right: 8%; bottom: 8%; color: rgba(244,238,227,.12); font: 800 clamp(7rem, 16vw, 13rem)/.8 var(--pc-font-head); letter-spacing: -.08em; } /* Плашка факта лежит в растворённой нижней части кадра и не закрывает фигуру */ .pc-hero-figure__fact { position: absolute; right: 0; bottom: clamp(12px, 2vw, 28px); width: min(76%, 360px); display: grid; gap: 5px; padding: 16px 18px; border: 1px solid rgba(232,212,168,.3); background: rgba(26,18,53,.88); color: var(--pc-on-dark-soft); box-shadow: var(--pc-shadow-lg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .pc-hero-figure__fact strong { color: var(--pc-gold-light); font: 700 1.2rem/1.15 var(--pc-font-head); } .pc-hero-figure__fact span { font-size: var(--pc-fs-caption); line-height: 1.4; } /* Факты в текстовой колонке (курс «Уверенность»): сетка 2 x 2 под заголовком */ .pc-hero__landing-copy .pc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; } .pc-test-hero__actions { align-items: stretch; } /* Стопка кнопок в герое: все кнопки одной ширины, по самой длинной надписи */ @media (min-width: 521px) { .pc-hero__landing-copy .pc-actions--stack { display: inline-grid; grid-auto-columns: minmax(0, 1fr); } .pc-hero__landing-copy .pc-actions--stack .pc-btn { width: 100%; } } @media (min-width: 1024px) { .pc-hero--landing .pc-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(16px, 2.5vw, 40px); } .pc-hero-figure { max-width: 620px; margin-top: calc(var(--pc-space-4) * -1); } .pc-hero--center .pc-hero__landing-copy { align-self: center; } } @media (min-width: 769px) { .pc-test-hero__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 250px)); } .pc-test-hero__actions .pc-btn { width: 100%; } } @media (min-width: 769px) and (max-width: 1079px) { .pc-test-hero__actions { display: flex; } .pc-test-hero__actions .pc-btn { width: auto; } } @media (max-width: 1023px) { .pc-hero-figure { max-width: 560px; justify-self: start; } } @media (max-width: 768px) { .pc-hero-figure { max-width: 480px; } .pc-hero-figure__media { -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 100%), linear-gradient(to bottom, transparent 0%, #000 12%, #000 76%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 100%), linear-gradient(to bottom, transparent 0%, #000 12%, #000 76%, transparent 100%); } .pc-hero-figure__fact { position: relative; left: auto; bottom: auto; width: auto; margin-top: -56px; margin-inline: auto 0; width: min(88%, 360px); } .pc-hero-figure--nofact { margin-bottom: calc(var(--pc-space-6) * -1); } .pc-test-hero__actions { display: grid; grid-template-columns: minmax(0, 1fr); } .pc-test-hero__actions .pc-btn { width: 100%; } } /* Правая колонка героя: кадр и под ним уведомление (ЭУ, правка 06б) */ .pc-hero__aside { display: grid; justify-items: end; align-content: start; min-width: 0; } .pc-hero__aside .pc-hero-figure { justify-self: end; } .pc-hero__aside .pc-hero-figure__fact { position: relative; right: auto; bottom: auto; width: min(100%, 380px); margin: -190px 0 0 auto; border-radius: var(--pc-r-md); } .pc-hero__aside .pc-hero__aside-note { width: min(100%, 380px); margin-top: var(--pc-space-3); position: relative; z-index: 2; padding: 16px 18px; } .pc-hero__aside .pc-hero__aside-note p { font-size: var(--pc-fs-caption); } .pc-hero__aside .pc-hero__aside-note .pc-notice__title { font-size: 1rem; } /* Кнопки героя ЭУ: основная сверху, пара Telegram / MAX одной строкой, обычный размер */ .pc-hero__pair { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); width: min(100%, 620px); margin-top: var(--pc-space-3); } /* Следующий блок после героя отделён линией и воздухом («Уверенность», правка 06б) */ .pc-hero__next-title { margin-top: clamp(48px, 6vw, 96px); padding-top: clamp(32px, 3vw, 48px); border-top: 1px solid rgba(232,212,168,.18); } @media (max-width: 1023px) { .pc-hero__aside { justify-items: start; } .pc-hero__aside .pc-hero-figure { justify-self: start; } .pc-hero__aside .pc-hero-figure__fact { margin-top: -56px; width: min(88%, 380px); } .pc-hero__aside .pc-hero__aside-note { width: min(100%, 480px); margin-top: var(--pc-space-3); } } .pc-facts { display: grid; gap: 1px; margin-top: var(--pc-space-6); border-radius: var(--pc-r-md); overflow: hidden; background: var(--pc-line-dark); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 900px) { .pc-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .pc-facts__item { padding: 16px 18px; background: rgba(26, 18, 53, 0.72); } .pc-facts__value { display: block; font: 700 1.125rem/1.2 var(--pc-font-head); color: var(--pc-white); } .pc-facts__label { display: block; margin-top: 4px; font-size: var(--pc-fs-caption); line-height: 1.35; color: var(--pc-on-dark-muted); } .pc-facts--light { background: var(--pc-line); } .pc-facts--light .pc-facts__item { background: var(--pc-white); } .pc-facts--light .pc-facts__value { color: var(--pc-indigo-700); } .pc-facts--light .pc-facts__label { color: var(--pc-muted); } /* 09 · КАРТОЧКИ И СТАТУСЫ ------------------------------------------------ */ .pc-card { position: relative; display: flex; flex-direction: column; padding: clamp(20px, 1rem + 1vw, 32px); border: 1px solid var(--pc-line); border-radius: var(--pc-r-md); background: var(--pc-white); box-shadow: var(--pc-shadow-sm); transition: box-shadow var(--pc-dur) var(--pc-ease), transform var(--pc-dur) var(--pc-ease), border-color var(--pc-dur) var(--pc-ease); } .pc-card > * { margin-top: 0; } .pc-card > * + * { margin-top: var(--pc-space-3); } .pc-card--link:hover, .pc-card--hover:hover { box-shadow: var(--pc-shadow-lg); transform: translateY(-3px); border-color: var(--pc-line-strong); } .pc-card--flat { box-shadow: none; } .pc-card--beige { background: var(--pc-paper); } .pc-card--lavender { background: var(--pc-lavender); border-color: transparent; } .pc-card--accent { border-left: 3px solid var(--pc-gold); } .pc-card--dark { background: rgba(255, 255, 255, 0.04); border-color: var(--pc-line-dark); color: var(--pc-on-dark-soft); box-shadow: none; } .pc-card--dark .pc-h3, .pc-card--dark .pc-h4 { color: var(--pc-white); } .pc-card__num { font: 800 2.25rem/1 var(--pc-font-head); color: var(--pc-gold); letter-spacing: -0.02em; } .pc-card__kicker { font: 600 0.75rem/1.2 var(--pc-font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--pc-gold-ink); } .pc-card__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--pc-lavender); color: var(--pc-indigo-700); } .pc-card__icon svg { width: 22px; height: 22px; } .pc-card--dark .pc-card__kicker { font: 600 0.75rem/1.2 var(--pc-font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--pc-gold-ink); } .pc-card__icon { background: rgba(232, 212, 168, 0.12); color: var(--pc-gold-light); } .pc-card__foot { margin-top: auto; padding-top: var(--pc-space-5); } .pc-card__stretched::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* Статус набора: одна пилюля на шесть состояний */ .pc-status { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 6px 12px; border-radius: var(--pc-r-pill); font: 600 0.75rem/1.2 var(--pc-font-body); letter-spacing: 0.02em; background: var(--pc-lavender); color: var(--pc-indigo-700); } .pc-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .pc-status--open { background: var(--pc-success-bg); color: var(--pc-success); } /* доступно постоянно */ .pc-status--closed { background: #ECE9F1; color: #5B5670; } /* набор закрыт */ .pc-status--next { background: var(--pc-warning-bg); color: var(--pc-warning); } /* следующий набор */ .pc-status--soon { background: var(--pc-lavender); color: var(--pc-indigo-500); } /* скоро */ .pc-status--waitlist { background: #F6EBD6; color: var(--pc-gold-ink); } /* лист ожидания */ .pc-status--hidden { background: #F1F1F1; color: #6B6B6B; } /* скрыто, видно только в макете */ .pc-status--hidden::before { background: transparent; border: 1.5px dashed currentColor; width: 8px; height: 8px; } .pc-status--open::before { box-shadow: 0 0 0 3px rgba(47, 111, 82, 0.15); } .pc-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--pc-r-pill); background: var(--pc-lavender); color: var(--pc-indigo-700); font: 500 var(--pc-fs-caption)/1.2 var(--pc-font-body); } .pc-badge--gold { background: rgba(201, 164, 106, 0.16); color: var(--pc-gold-ink); } .pc-badge--dark { background: rgba(255, 255, 255, 0.08); color: var(--pc-gold-light); border: 1px solid var(--pc-line-dark); } /* Карточка продукта */ .pc-product { padding: 0; overflow: hidden; } .pc-product > * + * { margin-top: 0; } .pc-product__head { padding: 22px 24px 0; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; } .pc-product__level { font: 600 0.6875rem/1.2 var(--pc-font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--pc-muted); } .pc-product__body { padding: 16px 24px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .pc-product__title { font: 700 clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem)/1.15 var(--pc-font-head); color: var(--pc-indigo-700); letter-spacing: -0.015em; margin: 0; } .pc-product__type { font-size: var(--pc-fs-small); color: var(--pc-gold-ink); font-weight: 600; margin: 0; } .pc-product__purpose { margin: 0; color: var(--pc-ink-soft); } .pc-product__meta { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .pc-product__meta li { padding: 5px 10px; border-radius: var(--pc-r-xs); background: var(--pc-paper); font-size: var(--pc-fs-caption); color: var(--pc-ink-soft); } .pc-product__foot { margin-top: auto; padding: 18px 24px 24px; display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; border-top: 1px solid var(--pc-line); } .pc-product__price { font: 700 1.25rem/1.1 var(--pc-font-head); color: var(--pc-indigo-700); } .pc-product__price small { display: block; margin-top: 3px; font: 400 var(--pc-fs-caption)/1.3 var(--pc-font-body); color: var(--pc-muted); } .pc-product__foot > .pc-btn--block { flex: 1 1 100%; width: auto; min-width: 0; } .pc-product__foot > .pc-msg-btn { flex: 1 1 220px; } .pc-product__note { flex-basis: 100%; margin: 0; font-size: var(--pc-fs-caption); color: var(--pc-muted); } .pc-product-grid--equal { align-items: stretch; } .pc-product-grid--equal .pc-product__title { min-height: 2.3em; font-size: clamp(1.15rem, 0.8rem + 0.65vw, 1.55rem); } .pc-product-grid--equal .pc-product__foot { min-height: 0; } .pc-product__foot--stacked { flex-direction: column; align-items: stretch; justify-content: flex-start; } .pc-product__foot--stacked > .pc-btn, .pc-product__foot--stacked > .pc-btn--block { flex: 0 0 auto; margin-top: auto; width: 100%; } .pc-product__foot--stacked .pc-product__note { flex-basis: auto; } .pc-product--featured { border-color: rgba(201, 164, 106, 0.55); box-shadow: 0 0 0 1px rgba(201, 164, 106, 0.35), var(--pc-shadow-md); } .pc-product--featured .pc-product__head { background: none; } .pc-product--wide { } @media (min-width: 1000px) { .pc-product--wide { flex-direction: row; } .pc-product--wide .pc-product__main { flex: 1; display: flex; flex-direction: column; } .pc-product--wide .pc-product__foot > .pc-btn--block { flex: none; width: 100%; } .pc-product--wide .pc-product__foot { margin-top: 0; flex-direction: column; align-items: flex-start; justify-content: center; border-top: 0; border-left: 1px solid var(--pc-line); width: 300px; padding: 24px; } } /* Закрытый набор: карточка приглушена, покупка недоступна */ .pc-product[data-state="closed"] .pc-product__price, .pc-product[data-state="next"] .pc-product__price { color: var(--pc-muted); } .pc-product[data-state="closed"], .pc-product[data-state="next"] { background: linear-gradient(180deg, #FFFFFF 0%, #FBF9F5 100%); } .pc-product[data-state="hidden"] { border-style: dashed; } .pc-product--clickable { position: relative; } .pc-product__cover-link { color: inherit; text-decoration: none; } .pc-product__cover-link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .pc-product__cover-link:focus-visible { outline: none; } .pc-product--clickable:has(.pc-product__cover-link:focus-visible) { box-shadow: var(--pc-focus), var(--pc-shadow-md); } .pc-product--clickable .pc-product__foot a { position: relative; z-index: 2; } .pc-soon-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: center; padding: 20px 24px; border: 1px solid rgba(201, 164, 106, 0.72); border-radius: var(--pc-r-md); background: linear-gradient(90deg, var(--pc-white), var(--pc-paper)); } .pc-soon-strip__copy { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; align-items: center; } .pc-soon-strip__copy .pc-status { grid-row: 1 / span 2; } .pc-soon-strip__copy .pc-h4, .pc-soon-strip__copy .pc-text { margin: 0; } .pc-soon-strip__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } @media (max-width: 820px) { .pc-soon-strip { grid-template-columns: minmax(0, 1fr); } .pc-soon-strip__actions { justify-content: flex-start; } } @media (max-width: 520px) { .pc-soon-strip { padding: 18px; } .pc-soon-strip__copy { grid-template-columns: minmax(0, 1fr); } .pc-soon-strip__copy .pc-status { grid-row: auto; } .pc-soon-strip__actions { display: grid; grid-template-columns: minmax(0, 1fr); } .pc-soon-strip__actions .pc-btn { width: 100%; } } .pc-card-link { display: block; color: inherit; text-decoration: none; } .pc-card-link:hover { border-color: var(--pc-gold); box-shadow: var(--pc-shadow-md); } .pc-card-link:focus-visible { outline: none; box-shadow: var(--pc-focus); } .pc-hero-stat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; align-items: center; } .pc-hero-stat .pc-stat__value { grid-row: 1 / span 2; line-height: 1; } .pc-hero-stat .pc-h3, .pc-hero-stat .pc-text { margin: 0; } @media (max-width: 520px) { .pc-checkup-scales__accent { display: block; margin-top: 0.12em; } } @media (max-width: 420px) { .pc-hero-stat { grid-template-columns: minmax(0, 1fr); } .pc-hero-stat .pc-stat__value { grid-row: auto; } } /* Уровень пути семьи */ .pc-path { counter-reset: pc-path; display: grid; gap: 12px; } .pc-path__item { counter-increment: pc-path; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; align-items: start; padding: 18px 20px; border-radius: var(--pc-r-md); background: var(--pc-white); border: 1px solid var(--pc-line); text-decoration: none; color: inherit; transition: border-color var(--pc-dur) var(--pc-ease), box-shadow var(--pc-dur) var(--pc-ease), transform var(--pc-dur) var(--pc-ease); } a.pc-path__item:hover { border-color: var(--pc-gold); box-shadow: var(--pc-shadow-md); transform: translateY(-2px); } .pc-path__item::before { content: counter(pc-path, decimal-leading-zero); grid-row: span 3; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--pc-indigo-700); color: var(--pc-gold-light); font: 700 0.9375rem/1 var(--pc-font-head); } .pc-path__item--plain::before { display: none; } .pc-path__item--first::before { background: var(--pc-gold); color: var(--pc-indigo-900); } .pc-path__ask { font: 600 1.0625rem/1.35 var(--pc-font-head); color: var(--pc-indigo-700); margin: 0; } .pc-path__answer { margin: 0; color: var(--pc-ink-soft); font-size: var(--pc-fs-small); text-align: justify; text-align-last: left; hyphens: none; } .pc-path__go { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font: 600 var(--pc-fs-small)/1.2 var(--pc-font-head); color: var(--pc-gold-ink); } .pc-path__go svg { width: 14px; height: 14px; transition: transform var(--pc-dur) var(--pc-ease); } a.pc-path__item:hover .pc-path__go svg { transform: translateX(3px); } @media (min-width: 900px) { .pc-path--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Чипы ситуаций */ .pc-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .pc-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--pc-r-pill); background: var(--pc-white); border: 1px solid var(--pc-line); color: var(--pc-indigo-700); font: 500 var(--pc-fs-small)/1.3 var(--pc-font-body); } .pc-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pc-gold); flex: none; } /* Ситуация: цитата родителя + что за ней стоит */ .pc-situation { padding: 22px; border-radius: var(--pc-r-md); background: var(--pc-white); border: 1px solid var(--pc-line); } .pc-situation__say { margin: 0 0 10px; font: italic 500 1.0625rem/1.45 var(--pc-font-accent); color: var(--pc-indigo-700); } .pc-situation__tag { display: inline-block; margin-bottom: 8px; font: 600 0.6875rem/1.2 var(--pc-font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pc-gold-ink); } .pc-situation__text { margin: 0; font-size: var(--pc-fs-small); color: var(--pc-muted); } /* 10 · ПЛАШКИ И УВЕДОМЛЕНИЯ ---------------------------------------------- */ .pc-notice { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 0 12px; align-items: start; padding: 16px 18px; border-radius: var(--pc-r-md); background: var(--pc-info-bg); color: var(--pc-ink); border: 1px solid rgba(61, 46, 114, 0.12); font-size: var(--pc-fs-small); line-height: 1.55; } .pc-notice::before { content: "i"; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--pc-info); color: var(--pc-white); font: 700 0.8125rem/1 var(--pc-font-head); } .pc-notice > * { margin: 0; grid-column: 2; } .pc-notice::before { grid-column: 1; grid-row: 1 / span 6; } .pc-notice--plain > * { grid-column: 1; } .pc-notice > * + * { margin-top: 6px; } .pc-notice__title { font: 600 1rem/1.3 var(--pc-font-head); color: var(--pc-indigo-700); } .pc-notice--success { background: var(--pc-success-bg); border-color: rgba(47, 111, 82, 0.2); } .pc-notice--success::before { content: "✓"; background: var(--pc-success); } .pc-notice--warning { background: var(--pc-warning-bg); border-color: rgba(138, 90, 18, 0.2); } .pc-notice--warning::before { content: "!"; background: var(--pc-warning); } .pc-notice--error { background: var(--pc-danger-bg); border-color: rgba(166, 64, 47, 0.22); } .pc-notice--error::before { content: "!"; background: var(--pc-danger); } .pc-notice--gold { background: #F7EEDC; border-color: rgba(201, 164, 106, 0.4); } .pc-notice--gold::before { content: "★"; background: var(--pc-gold); color: var(--pc-indigo-900); font-size: 0.75rem; } .pc-notice--dark { background: rgba(255, 255, 255, 0.05); border-color: var(--pc-line-dark); color: var(--pc-on-dark-soft); } .pc-notice--dark .pc-notice__title { color: var(--pc-white); } .pc-notice--dark::before { background: var(--pc-gold); color: var(--pc-indigo-900); } .pc-notice--plain { grid-template-columns: minmax(0, 1fr); } .pc-notice--plain::before { display: none; } .pc-disclaimer { margin: 0; font-size: var(--pc-fs-caption); line-height: 1.5; color: var(--pc-muted); max-width: 72ch; } .pc-on-dark .pc-disclaimer { color: var(--pc-on-dark-muted); } /* 11 · ФОРМЫ ------------------------------------------------------------- */ .pc-form { display: grid; gap: var(--pc-space-4); } .pc-field { display: grid; gap: 6px; } .pc-label { font: 600 var(--pc-fs-small)/1.3 var(--pc-font-body); color: var(--pc-indigo-700); } .pc-label__req { color: var(--pc-danger); margin-left: 2px; } .pc-input, .pc-select, .pc-textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--pc-line-strong); border-radius: var(--pc-r-sm); background: var(--pc-white); color: var(--pc-ink); font: 400 1rem/1.4 var(--pc-font-body); transition: border-color var(--pc-dur) var(--pc-ease), box-shadow var(--pc-dur) var(--pc-ease); -webkit-appearance: none; appearance: none; } .pc-textarea { min-height: 120px; resize: vertical; } .pc-select { background-image: linear-gradient(45deg, transparent 50%, var(--pc-indigo-700) 50%), linear-gradient(135deg, var(--pc-indigo-700) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; } .pc-input::placeholder, .pc-textarea::placeholder { color: #9993A8; } .pc-input:hover, .pc-select:hover, .pc-textarea:hover { border-color: var(--pc-indigo-300); } .pc-input:focus, .pc-select:focus, .pc-textarea:focus { outline: none; border-color: var(--pc-indigo-500); box-shadow: 0 0 0 3px rgba(61, 46, 114, 0.14); } .pc-input[disabled], .pc-select[disabled], .pc-textarea[disabled] { background: #F3F1F6; color: #8C869D; cursor: not-allowed; } .pc-help { margin: 0; font-size: var(--pc-fs-caption); color: var(--pc-muted); } .pc-field-error { margin: 0; font-size: var(--pc-fs-caption); color: var(--pc-danger); font-weight: 500; } .pc-field--error .pc-input, .pc-field--error .pc-select, .pc-field--error .pc-textarea { border-color: var(--pc-danger); background: #FFFCFB; } .pc-field--error .pc-input:focus { box-shadow: 0 0 0 3px rgba(166, 64, 47, 0.15); } .pc-field--success .pc-input { border-color: var(--pc-success); } .pc-check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: var(--pc-fs-small); line-height: 1.5; color: var(--pc-ink-soft); cursor: pointer; } .pc-check input { -webkit-appearance: none; appearance: none; margin: 1px 0 0; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--pc-line-strong); background: var(--pc-white); cursor: pointer; display: grid; place-items: center; transition: background-color var(--pc-dur) var(--pc-ease), border-color var(--pc-dur) var(--pc-ease); } .pc-check input::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--pc-white); border-bottom: 2px solid var(--pc-white); transform: rotate(-45deg) translate(1px, -1px); opacity: 0; } .pc-check input:checked { background: var(--pc-indigo-700); border-color: var(--pc-indigo-700); } .pc-check input:checked::after { opacity: 1; } .pc-check input:focus-visible { box-shadow: var(--pc-focus); } .pc-check--error input { border-color: var(--pc-danger); } .pc-check a { color: var(--pc-indigo-500); } .pc-form-message { padding: 14px 16px; border-radius: var(--pc-r-sm); font-size: var(--pc-fs-small); } .pc-form-message--success { background: var(--pc-success-bg); color: var(--pc-success); } .pc-form-message--error { background: var(--pc-danger-bg); color: var(--pc-danger); } /* Оформление встроенных форм GetCourse (lite-формы) внутри контейнера .pc-gc-form. Селекторы ограничены контейнером, системная логика формы не меняется. */ .pc-gc-form { font-family: var(--pc-font-body); color: var(--pc-ink); } .pc-gc-form form { margin: 0; } .pc-gc-form input[type="text"], .pc-gc-form input[type="email"], .pc-gc-form input[type="tel"], .pc-gc-form input[type="number"], .pc-gc-form select, .pc-gc-form textarea { width: 100%; min-height: 50px; padding: 12px 14px; margin: 0 0 12px; border: 1.5px solid var(--pc-line-strong); border-radius: var(--pc-r-sm); background: var(--pc-white); color: var(--pc-ink); font: 400 1rem/1.4 var(--pc-font-body); box-shadow: none; } .pc-gc-form input:focus, .pc-gc-form select:focus, .pc-gc-form textarea:focus { outline: none; border-color: var(--pc-indigo-500); box-shadow: 0 0 0 3px rgba(61, 46, 114, 0.14); } .pc-gc-form button, .pc-gc-form .btn, .pc-gc-form input[type="submit"] { min-height: 52px; width: 100%; padding: 14px 24px; border: 0; border-radius: var(--pc-r-sm); background: var(--pc-gold); color: var(--pc-indigo-900); font: 600 1rem/1.2 var(--pc-font-head); cursor: pointer; } .pc-gc-form button:hover, .pc-gc-form .btn:hover { background: var(--pc-gold-light); } .pc-gc-form label { font-size: var(--pc-fs-small); color: var(--pc-ink-soft); } .pc-gc-form a { color: var(--pc-indigo-500); } .pc-gc-form .error, .pc-gc-form .help-block-error { color: var(--pc-danger); font-size: var(--pc-fs-caption); } /* 12 · ОТЗЫВЫ, ФАКТЫ, ЭТАПЫ, ВОПРОСЫ ------------------------------------- */ .pc-review { margin: 0; display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--pc-r-md); background: var(--pc-white); border: 1px solid var(--pc-line); height: 100%; } .pc-review::before { content: "“"; font: 700 3rem/0.6 var(--pc-font-accent); color: var(--pc-gold); height: 18px; } .pc-review__text { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--pc-ink); } .pc-review__who { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: var(--pc-fs-small); color: var(--pc-muted); } .pc-review__who::before { content: ""; width: 20px; height: 1px; background: var(--pc-gold); } .pc-stat { display: flex; flex-direction: column; gap: 4px; } .pc-stat__value { font: 800 clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem)/1 var(--pc-font-head); color: var(--pc-indigo-700); letter-spacing: -0.02em; } .pc-stat__label { font-size: var(--pc-fs-small); color: var(--pc-muted); } .pc-on-dark .pc-stat__value { color: var(--pc-gold-light); } .pc-about__title .pc-accent { display: block; margin-top: 0.16em; } .pc-about-stats { align-items: stretch; } .pc-about-stats > .pc-stat { min-width: 0; height: 100%; padding: 18px 20px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; border: 1px solid var(--pc-line); border-radius: var(--pc-r-md); background: var(--pc-white); } .pc-about-stats .pc-stat__value { font-size: clamp(1.35rem, 1.05rem + 0.8vw, 1.85rem); line-height: 1.08; white-space: nowrap; } .pc-about-stats .pc-stat__label { line-height: 1.4; } @media (max-width: 699px) { .pc-about-stats > .pc-stat { padding: 16px 18px; gap: 14px; } .pc-about-stats .pc-stat__value { font-size: clamp(1.25rem, 4.5vw, 1.6rem); } } .pc-footnote { max-width: 78ch; margin: 20px 0 0; font-style: italic; } /* Этапы: горизонтально на широком экране, вертикальная линия на телефоне */ .pc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: pc-step; } .pc-step { counter-increment: pc-step; position: relative; padding: 0 0 28px 64px; } .pc-step::before { content: counter(pc-step); position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--pc-white); border: 1.5px solid var(--pc-gold); font: 700 1rem/1 var(--pc-font-head); color: var(--pc-indigo-700); } .pc-step::after { content: ""; position: absolute; left: 21px; top: 48px; bottom: 4px; width: 1.5px; background: linear-gradient(var(--pc-gold), rgba(201, 164, 106, 0.1)); } .pc-step:last-child { padding-bottom: 0; } .pc-step:last-child::after { display: none; } .pc-step__title { margin: 8px 0 6px; font: 600 1.125rem/1.3 var(--pc-font-head); color: var(--pc-indigo-700); } .pc-step__text { margin: 0; color: var(--pc-ink-soft); font-size: var(--pc-fs-small); } .pc-steps--plain .pc-step__text { padding-top: 10px; font-size: 1rem; color: var(--pc-ink); } .pc-step__tag { display: inline-block; margin-top: 8px; } .pc-on-dark .pc-step::before { background: var(--pc-indigo-900); color: var(--pc-gold-light); } .pc-on-dark .pc-step__title { color: var(--pc-white); } .pc-on-dark .pc-step__text { color: var(--pc-on-dark-soft); } @media (min-width: 1000px) { .pc-steps--row { grid-template-columns: repeat(var(--pc-steps, 5), minmax(0, 1fr)); gap: 24px; } .pc-steps--row .pc-step { padding: 64px 0 0; } .pc-steps--row .pc-step::after { left: 52px; right: -20px; top: 21px; bottom: auto; width: auto; height: 1.5px; background: linear-gradient(90deg, var(--pc-gold), rgba(201, 164, 106, 0.15)); } .pc-steps--row .pc-step:last-child::after { display: none; } } /* Вопросы и ответы на
: без JavaScript */ .pc-faq { display: grid; gap: 10px; } .pc-faq__item { border: 1px solid var(--pc-line); border-radius: var(--pc-r-md); background: var(--pc-white); transition: border-color var(--pc-dur) var(--pc-ease); } .pc-faq__item[open] { border-color: rgba(201, 164, 106, 0.6); } .pc-faq__q { list-style: none; cursor: pointer; display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 18px 20px; font: 600 1.0625rem/1.35 var(--pc-font-head); color: var(--pc-indigo-700); } .pc-faq__q::-webkit-details-marker { display: none; } .pc-faq__q::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--pc-lavender) no-repeat center / 12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%232B1F52' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); transition: transform var(--pc-dur) var(--pc-ease); } .pc-faq__item[open] .pc-faq__q::after { transform: rotate(45deg); } .pc-faq__a { padding: 0 20px 20px; color: var(--pc-ink-soft); } .pc-faq__a > * { margin: 0 0 10px; } .pc-faq__a > :last-child { margin-bottom: 0; } .pc-faq__a ol, .pc-faq__a ul { padding-left: 1.2em; } /* Галерея документов */ .pc-doc { display: flex; flex-direction: column; gap: 8px; } .pc-doc__kind { font: 600 0.6875rem/1.2 var(--pc-font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pc-gold-ink); } .pc-doc__title { margin: 0; font: 600 1.0625rem/1.3 var(--pc-font-head); color: var(--pc-indigo-700); } .pc-doc__org { margin: 0; font-size: var(--pc-fs-small); color: var(--pc-muted); } .pc-doc__open { margin-top: auto; padding-top: 8px; } /* Сравнение форматов */ .pc-compare { width: 100%; border-collapse: collapse; font-size: var(--pc-fs-small); background: var(--pc-white); border-radius: var(--pc-r-md); overflow: hidden; } .pc-compare th, .pc-compare td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--pc-line); } .pc-compare th { font: 600 var(--pc-fs-small)/1.3 var(--pc-font-head); color: var(--pc-indigo-700); background: var(--pc-lavender); } .pc-compare tr:last-child td { border-bottom: 0; } @media (max-width: 520px) { .pc-compare { table-layout: fixed; font-size: var(--pc-fs-caption); } .pc-compare th, .pc-compare td { padding: 10px 8px; overflow-wrap: normal; } .pc-compare th:first-child { width: 27%; } } /* Цена */ .pc-price-card { padding: clamp(24px, 1rem + 2vw, 40px); border-radius: var(--pc-r-lg); background: var(--pc-white); border: 1px solid rgba(201, 164, 106, 0.5); box-shadow: var(--pc-shadow-md); } .pc-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; } .pc-price__value { font: 800 clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem)/1 var(--pc-font-head); color: var(--pc-indigo-700); letter-spacing: -0.02em; } .pc-price__value--muted { color: var(--pc-muted); } .pc-price__note { font-size: var(--pc-fs-small); color: var(--pc-muted); } /* Выбор возраста */ .pc-age { display: flex; flex-direction: column; gap: 12px; } .pc-age__range { font: 800 clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem)/1 var(--pc-font-head); color: var(--pc-indigo-700); letter-spacing: -0.02em; } .pc-on-dark .pc-age__range, .pc-card--dark .pc-age__range { color: var(--pc-gold-light); } /* 13 · ФИНАЛЬНЫЙ ПРИЗЫВ И ПОДВАЛ ----------------------------------------- */ .pc-final { position: relative; overflow: hidden; border-radius: var(--pc-r-xl); padding: clamp(32px, 2rem + 3vw, 72px); background: radial-gradient(80% 90% at 100% 0%, rgba(61, 46, 114, 1) 0%, rgba(43, 31, 82, 1) 55%, rgba(26, 18, 53, 1) 100%); color: var(--pc-on-dark-soft); } .pc-final::after { content: ""; position: absolute; width: 380px; height: 380px; right: -120px; bottom: -200px; border-radius: 50%; border: 1px solid rgba(201, 164, 106, 0.2); pointer-events: none; } .pc-final__grid { position: relative; z-index: 1; display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: center; } @media (min-width: 960px) { .pc-final__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } } .pc-choice { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .pc-choice a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-radius: var(--pc-r-md); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--pc-line-dark); color: var(--pc-white); text-decoration: none; font: 600 1.0625rem/1.3 var(--pc-font-head); transition: background-color var(--pc-dur) var(--pc-ease), border-color var(--pc-dur) var(--pc-ease); } .pc-choice a small { display: block; margin-top: 3px; font: 400 var(--pc-fs-caption)/1.35 var(--pc-font-body); color: var(--pc-on-dark-muted); } .pc-choice a:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--pc-gold); } .pc-choice a svg { width: 18px; height: 18px; flex: none; color: var(--pc-gold); } .pc-choice--primary a { background: var(--pc-gold); color: var(--pc-indigo-900); border-color: var(--pc-gold); } .pc-choice--primary a small { color: rgba(26, 18, 53, 0.72); } .pc-choice--primary a svg { color: var(--pc-indigo-900); } .pc-choice--primary a:hover { background: var(--pc-gold-light); } .pc-footer { background: var(--pc-indigo-900); color: var(--pc-on-dark-soft); padding: clamp(48px, 3rem + 2vw, 80px) 0 28px; font-size: var(--pc-fs-small); } .pc-footer__grid { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 700px) { .pc-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .pc-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } .pc-footer__motto { margin: 16px 0 0; font: italic 400 1.0625rem/1.45 var(--pc-font-accent); color: var(--pc-gold-light); max-width: 30ch; } .pc-footer__title { margin: 0 0 14px; font: 600 0.75rem/1.2 var(--pc-font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--pc-gold); } .pc-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .pc-footer__list a { color: rgba(255, 255, 255, 0.78); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; } .pc-footer__list a:hover { color: var(--pc-white); text-decoration: underline; text-decoration-color: var(--pc-gold); text-underline-offset: 4px; } .pc-footer__list img, .pc-footer__list .pc-icon { width: 20px; height: 20px; border-radius: 5px; flex: none; } .pc-footer__contact { gap: 11px; } .pc-footer__contact-icon { display: block; width: 21px; height: 21px; flex: none; color: var(--pc-gold); } .pc-footer__contact-icon--max { width: 23px; height: 23px; } .pc-footer__contact:hover .pc-footer__contact-icon { color: var(--pc-gold-light); } .pc-footer__socials { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; } .pc-footer__social { display: grid; width: 44px; height: 44px; place-items: center; text-decoration: none; } .pc-footer__social img { display: block; width: 30px; height: 30px; object-fit: contain; filter: brightness(0) saturate(100%) invert(68%) sepia(26%) saturate(786%) hue-rotate(357deg) brightness(90%) contrast(84%); } .pc-footer__social--max img { width: 34px; height: 34px; } .pc-footer__social:hover { text-decoration: none; } .pc-footer__social:hover img { filter: brightness(0) saturate(100%) invert(83%) sepia(24%) saturate(589%) hue-rotate(359deg) brightness(96%) contrast(88%); } .pc-footer__support { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--pc-line-dark); color: var(--pc-on-dark-muted); font-size: var(--pc-fs-caption); line-height: 1.7; } .pc-footer__support strong { color: var(--pc-gold-light); } .pc-footer__support a { color: rgba(255,255,255,.78); } .pc-footer__support .pc-icon { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; } .pc-footer__bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--pc-line-dark); display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; font-size: var(--pc-fs-caption); color: var(--pc-on-dark-muted); } .pc-footer__bottom p { margin: 0; max-width: 72ch; } .pc-footer .pc-inline-link { color: var(--pc-gold-light); } .pc-icon { display: inline-block; flex: none; } .pc-icon--tg, .pc-icon--max { width: 20px; height: 20px; } .pc-icon--max { width: 22px; height: 22px; } /* 14 · ОКНА И ПРОСМОТР ДОКУМЕНТОВ ---------------------------------------- */ .pc-modal { position: fixed; inset: 0; z-index: var(--pc-z-modal); display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 10, 32, 0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .pc-modal.is-open, .pc-modal:target, .pc-modal.uv-active { display: flex; } .pc-modal__box { position: relative; width: 100%; max-width: 500px; max-height: calc(100dvh - 32px); background: var(--pc-white); border-radius: var(--pc-r-lg); box-shadow: var(--pc-shadow-lg); overflow: hidden; display: flex; flex-direction: column; animation: pc-rise 0.28s var(--pc-ease); } .pc-modal__head { padding: 18px 60px 14px 22px; border-bottom: 1px solid var(--pc-line); } .pc-modal__title { margin: 0; font: 700 1.125rem/1.3 var(--pc-font-head); color: var(--pc-indigo-700); } .pc-modal__sub { margin: 2px 0 0; font-size: var(--pc-fs-caption); color: var(--pc-muted); } .pc-modal__body { overflow: auto; -webkit-overflow-scrolling: touch; } .pc-modal__body iframe { display: block; width: 100%; height: min(640px, calc(100dvh - 120px)); border: 0; } .pc-modal__body { overscroll-behavior: contain; } /* Окно формы GetCourse (виджеты 1620707 / 1620710 / 1620711, только /monthly). Виджет отдаёт html{overflow:hidden!important} и сам не прокручивается (вниз работал только Tab), поэтому iframe даётся в полную высоту виджета, а листает окно .pc-modal__body. 21.09 в самих виджетах GetCourse: отступ блока сверху и снизу 75px -> 15px, «Заголовок формы» очищен (пустой элемент высотой 0). Незалогиненному посетителю GetCourse добавляет под кнопку три согласия (оферта, персональные данные, рассылки), их текст переносится по-разному в зависимости от ширины, поэтому высота подобрана ступенями. Замер высоты виджета у гостя: ширина 468+ - 806px, 460 - 828, 430 - 828, 390 - 850, 340 и 320 - 893, 280 - 936; в ступенях +15-20px запаса. Если снова поменять вёрстку виджета в GetCourse, числа пересчитать (замер: гостевой HTML виджета в iframe нужной ширины). */ .pc-modal__body iframe[src*="/pl/lite/widget/"], .pc-modal__body iframe[data-src*="/pl/lite/widget/"] { height: 825px; margin: 0; } @media (max-width: 499px) { .pc-modal__body iframe[src*="/pl/lite/widget/"], .pc-modal__body iframe[data-src*="/pl/lite/widget/"] { height: 870px; } } @media (max-width: 419px) { .pc-modal__body iframe[src*="/pl/lite/widget/"], .pc-modal__body iframe[data-src*="/pl/lite/widget/"] { height: 910px; } } @media (max-width: 359px) { .pc-modal__body iframe[src*="/pl/lite/widget/"], .pc-modal__body iframe[data-src*="/pl/lite/widget/"] { height: 955px; } } /* Форма оплаты консультации (виджет 1658815, только /individual): четыре поля (почта, имя, телефон, имя спортсмена), на 170px ниже виджетов «Уверенность». Замер у гостя: ширина 468+ - 636px, 430 - 658, 390 - 680, 340 и 320 - 723, 280 - 766. */ .pc-modal__body iframe[src*="widget?id=1658815"], .pc-modal__body iframe[data-src*="widget?id=1658815"] { height: 655px; } @media (max-width: 499px) { .pc-modal__body iframe[src*="widget?id=1658815"], .pc-modal__body iframe[data-src*="widget?id=1658815"] { height: 700px; } } @media (max-width: 419px) { .pc-modal__body iframe[src*="widget?id=1658815"], .pc-modal__body iframe[data-src*="widget?id=1658815"] { height: 740px; } } @media (max-width: 359px) { .pc-modal__body iframe[src*="widget?id=1658815"], .pc-modal__body iframe[data-src*="widget?id=1658815"] { height: 785px; } } /* Компактная шапка окна: название и возраст с ценой в одну строку (на узком экране переносятся) */ .pc-modal:not(.pc-modal--doc) .pc-modal__head { display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; column-gap: 10px; row-gap: 0; min-height: 56px; padding: 8px 60px 8px 20px; } .pc-modal:not(.pc-modal--doc) .pc-modal__title { font-size: 1rem; } .pc-modal:not(.pc-modal--doc) .pc-modal__sub { margin: 0; } .pc-modal__body--pad { padding: 22px; } .pc-modal__close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 0; background: var(--pc-lavender); color: var(--pc-indigo-700); font: 400 1.5rem/1 var(--pc-font-body); cursor: pointer; text-decoration: none; } .pc-modal__close:hover { background: #E0DBEF; } .pc-modal--doc .pc-modal__box { max-width: 980px; background: var(--pc-indigo-900); } .pc-modal--doc .pc-modal__head { border-color: var(--pc-line-dark); } .pc-modal--doc .pc-modal__title { color: var(--pc-white); } .pc-modal--doc img { width: 100%; max-height: calc(100dvh - 120px); object-fit: contain; } body.pc-lock { overflow: hidden; } /* 15 · СЛУЖЕБНЫЕ СОСТОЯНИЯ ----------------------------------------------- */ .pc-skeleton { position: relative; overflow: hidden; background: #ECE8F2; border-radius: var(--pc-r-sm); min-height: 16px; } .pc-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent); animation: pc-shimmer 1.4s infinite; } .pc-loading { display: flex; align-items: center; gap: 12px; color: var(--pc-muted); font-size: var(--pc-fs-small); } .pc-loading::before { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--pc-gold); border-right-color: transparent; animation: pc-spin 0.8s linear infinite; } .pc-state { text-align: center; padding: clamp(28px, 2rem + 2vw, 56px) 20px; border-radius: var(--pc-r-lg); border: 1px dashed var(--pc-line-strong); background: var(--pc-white); } .pc-state__icon { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: var(--pc-lavender); color: var(--pc-indigo-700); font: 700 1.5rem/1 var(--pc-font-head); } .pc-state--error .pc-state__icon { background: var(--pc-danger-bg); color: var(--pc-danger); } .pc-state__title { margin: 0 0 8px; font: 700 1.25rem/1.3 var(--pc-font-head); color: var(--pc-indigo-700); } .pc-state__text { margin: 0 auto; max-width: 46ch; color: var(--pc-muted); font-size: var(--pc-fs-small); } .pc-state .pc-actions { justify-content: center; margin-top: 20px; } /* Скрытые продуктовые блоки: