:root { /* ---------- Colours ---------- */ --c-text: #282227; --c-text-muted: rgba(40, 34, 39, 0.6); --c-text-on-dark: #ffffff; --c-text-on-dark-muted: rgba(255, 255, 255, 0.6); --c-magenta: #aa2692; --c-magenta-border: #dd35ff; --c-purple-deep: #160131; --c-violet: #b43ac7; --c-banner: #667df2; --c-pink-soft: #f7eaf5; --c-pink-softer: #fbf3fa; --c-divider-soft: #ecebf9; --c-card-divider: rgba(170, 38, 146, 0.1); /* Tints — повторно используемые полупрозрачные оттенки. -tint-N — N процентов alpha поверх белого фона. */ --c-text-tint-5: rgba(40, 34, 39, 0.05); /* фон input/балансовой плашки в модалках */ --c-text-tint-10: rgba(40, 34, 39, 0.1); /* серый фон icon-btn, view-toggle, balance, secondary btn */ --c-text-tint-18: rgba(40, 34, 39, 0.18); /* hover-state для tint-10 элементов */ --c-text-tint-20: rgba(40, 34, 39, 0.2); /* secondary hover, border на tertiary btn */ --c-text-tint-40: rgba(40, 34, 39, 0.4); /* placeholder в input'ах */ --c-overlay-40: rgba(0, 0, 0, 0.4); /* затемнение поверх изображений и backdrop модалок */ --c-online: #08b866; --c-danger: #e23434; /* destructive (logout, delete и т.п.) */ --c-danger-tint-10: rgba(226, 52, 52, 0.1); /* hover-фон для danger-действий */ --c-magenta-tint-5: rgba(170, 38, 146, 0.05); /* очень светлый magenta fill */ --c-magenta-tint-10: rgba(170, 38, 146, 0.1); /* gift-pill, badge-tint */ --c-magenta-tint-20: rgba(170, 38, 146, 0.2); /* active pill tab */ --c-status-day: #51b4ed; /* badge «Эксперт дня» */ --c-status-new: #2dbd64; /* badge «New» — отличный оттенок от --c-online */ --c-star: #e4a538; --c-gold: #cfa544; --c-hero-bg: #c67070; --c-bg: #ffffff; --c-surface: #ffffff; --c-surface-soft: #faf6fa; /* ---------- Gradients ---------- */ --gradient-primary: linear-gradient(86deg, #160131 21%, #aa2692 99%); --gradient-photo-fallback: linear-gradient(135deg, #c084fc 0%, #f0abfc 50%, #fda4af 100%); /* Палитра 8 градиент-fallback'ов для обложек статей/SEO-страниц блога. Видны, пока реальная картинка не загрузилась (или не указана). */ --gradient-blog-1: linear-gradient(135deg, #f0abfc 0%, #fda4af 100%); --gradient-blog-2: linear-gradient(135deg, #c084fc 0%, #f9a8d4 100%); --gradient-blog-3: linear-gradient(135deg, #fb923c 0%, #fbcfe8 100%); --gradient-blog-4: linear-gradient(135deg, #a78bfa 0%, #f0abfc 100%); --gradient-blog-5: linear-gradient(135deg, #f472b6 0%, #fde68a 100%); --gradient-blog-6: linear-gradient(135deg, #818cf8 0%, #f0abfc 100%); --gradient-blog-7: linear-gradient(135deg, #fb7185 0%, #fda4af 100%); --gradient-blog-8: linear-gradient(135deg, #a855f7 0%, #ec4899 100%); /* ---------- Font families ---------- */ --font-display: 'Philosopher', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* ---------- Font-size scale ---------- FLUID-typescale. Каждый шрифт плавно скейлится от mobile (430px) до desktop (1440px) через clamp(MIN, fluid_formula, MAX). На промежуточных ширинах размер всегда между MIN и MAX, без скачков на брейкпоинтах. Линейная интерполяция: slope = (MAX_px - MIN_px) / (1440 - 430) * 100 (=vw-фактор) intercept = MIN_px - 430 * slope/100 (px-база) clamp(MIN_px, intercept + slope vw, MAX_px) Маленькие размеры (2xs/xs/sm/base) оставлены статичными — для читаемости и плотности UI на mobile они и так оптимальны. Fluid начинается с lg. */ --fs-2xs: 10px; --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: clamp(16px, 15.15px + 0.198vw, 18px); /* 16→18 */ --fs-lg: clamp(18px, 17.15px + 0.198vw, 20px); /* 18→20 */ --fs-xl: clamp(20px, 18.30px + 0.396vw, 24px); /* 20→24 */ --fs-2xl: clamp(24px, 20.59px + 0.792vw, 32px); /* 24→32 */ --fs-3xl: clamp(32px, 25.19px + 1.584vw, 48px); /* 32→48 */ --fs-4xl: clamp(24px, 10.38px + 3.168vw, 56px); /* 24→56 — hero title (mobile 24 = Figma 315:28234) */ /* ---------- Line-height scale (парные к --fs-*) ---------- Для крупных fluid-шрифтов lh тоже fluid. Маленькие — статичны. */ --lh-2xs: 14px; --lh-xs: 16px; --lh-snug: 18px; --lh-sm: 20px; --lh-base: 24px; --lh-md: 20px; --lh-lg: clamp(22px, 19.32px + 0.624vw, 28px); /* 22→28 (под --fs-md/lg) */ --lh-xl: clamp(24px, 18.91px + 1.188vw, 36px); /* 24→36 (под --fs-xl/2xl) */ --lh-2xl: clamp(28px, 19.51px + 1.980vw, 48px); /* 28→48 */ --lh-3xl: clamp(40px, 33.19px + 1.584vw, 56px); /* 40→56 (под --fs-3xl) */ --lh-4xl: clamp(32px, 20.08px + 2.772vw, 60px); /* 32→60 (под --fs-4xl 24→56) */ /* ---------- Font weight scale ---------- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---------- Spacing scale (4-px база) ---------- Использование: gap, padding, margin. Для сетки/контейнера — отдельно --container / --gutter / --section-padding-y. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 56px; --s-9: 64px; /* ---------- Radii ---------- */ --r-xs: 12px; /* checkbox, btn-icon--sm, view-toggle, slot */ --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-xl: 36px; --r-2xl: 48px; --r-pill: 100px; /* ---------- Effects ---------- */ --shadow-btn: 0 4px 8px rgba(0, 0, 0, 0.15); --shadow-card: 0 16px 38px 4px rgba(59, 11, 52, 0.28); --inset-glow: inset 0 0 8px 0 #fff; /* ---------- Layout ---------- */ --container: 1328px; --gutter: 56px; --gap: 24px; --section-padding-y: clamp(32px, 5vw, 96px); /* mobile 32 → desktop 96 */ } /* ============================================================ RESET / BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; } /* Резервируем место под scrollbar всегда — чтобы при открытии модалки (body{overflow:hidden}) страница не «прыгала» на ширину скроллбара. Поддержка: Chrome 94+, Safari 17+, Firefox 97+ (на старых — старое поведение). */ html { scrollbar-gutter: stable; } /* Декоры (фото в spheres / таро-карты в how-it-works) выезжают за пределы секций через translateX/-X. Глобальный clip по горизонтали гарантирует, что за viewport ничего не торчит, без блокировки sticky (overflow:clip vs hidden). */ html, body { overflow-x: clip; } body { min-height: 100dvh; font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.5; color: var(--c-text); background: var(--c-bg); } img, svg, video { display: block; max-width: 100%; height: auto; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, h5, h6, p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } input, textarea, select { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--c-magenta); outline-offset: 2px; border-radius: 4px; /* off-scale 4 — focus ring */ } /* ============================================================ VISUALLY HIDDEN ============================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* ============================================================ TYPOGRAPHY — текстовая система проекта. Содержит: 1) Глобальные текстовые классы (.page-title, .section-title, .section-subtitle, .breadcrumbs) — применяются в HTML напрямую. 2) Композитные токены --t-* — font-shorthand из существующей шкалы tokens.css. Применяются в CSS-компонентах: .my-component { font: var(--t-body-sm); } Это заменяет повторяющиеся блоки из 4 строк (font-family/font-weight/font-size/line-height). ============================================================ СХЕМА ИМЁН ТОКЕНОВ: --t-{family}-{size}[-{weight}][-on-{lh}] {family} body (Inter) | display (Philosopher) {size} ключ из --fs-* в tokens.css: 2xs=10 xs=12 sm=14 base=16 md=18 lg=20 xl=24 2xl=32 3xl=48 4xl=56 {weight} опц.: medium | strong (semibold) | bold (если опущено — Regular 400) -on-{lh} опц. override line-height (ключ из --lh-*): 2xs=14 xs=16 snug=18 sm=20 base=24 lg=28 xl=32 2xl=40 По умолчанию = lh-{size} (или lh-base если такой нет). Примеры: --t-body-sm → Inter Regular 14/20 (default sm/sm) --t-body-sm-strong → Inter Semibold 14/20 --t-body-sm-on-snug → Inter Regular 14/18 --t-body-sm-medium-on-base → Inter Medium 14/24 --t-display-xl-bold → Philosopher Bold 24/32 --t-display-xl-bold-on-base → Philosopher Bold 24/24 Семантические токены (--t-tag, --t-hero-title, --t-modal-amount, --t-article-title и т.д.) — для конкретных мест проекта, имя отражает назначение, а не размер/вес. Что НЕ здесь: — переменные шкалы (--font-*, --fs-*, --lh-*, --fw-*) → tokens.css; — локальные one-off шрифты (clamp на конкретной секции, off-scale значения из Figma) → остаются рядом с компонентом. Каскад: typography.css подключается после base.css, до layout.css. ============================================================ */ :root { /* ============================================================ BODY (Inter) — для основного текста. Дефолтный lh для размера = --lh-{same-key}, или lh-base если такой ключ в шкале --lh-* отсутствует (md, 3xl). ============================================================ */ /* xs = 12 / lh-xs = 16 */ --t-body-xs: var(--fw-regular) var(--fs-xs)/var(--lh-xs) var(--font-body); --t-body-xs-medium: var(--fw-medium) var(--fs-xs)/var(--lh-xs) var(--font-body); --t-body-xs-strong: var(--fw-semibold) var(--fs-xs)/var(--lh-xs) var(--font-body); --t-body-xs-on-snug: var(--fw-regular) var(--fs-xs)/var(--lh-snug) var(--font-body); /* 12/18 — caption tight */ --t-body-xs-on-base: var(--fw-regular) var(--fs-xs)/var(--lh-base) var(--font-body); /* 12/24 — meta под карточкой */ --t-body-xs-medium-on-sm: var(--fw-medium) var(--fs-xs)/var(--lh-sm) var(--font-body); /* 12/20 — booking «Рекомендуют» */ /* sm = 14 / lh-sm = 20 (самый ходовой размер, ~70 случаев) */ --t-body-sm: var(--fw-regular) var(--fs-sm)/var(--lh-sm) var(--font-body); --t-body-sm-medium: var(--fw-medium) var(--fs-sm)/var(--lh-sm) var(--font-body); --t-body-sm-strong: var(--fw-semibold) var(--fs-sm)/var(--lh-sm) var(--font-body); --t-body-sm-bold: var(--fw-bold) var(--fs-sm)/var(--lh-sm) var(--font-body); /* rating-score */ --t-body-sm-on-snug: var(--fw-regular) var(--fs-sm)/var(--lh-snug) var(--font-body); /* 14/18 */ --t-body-sm-medium-on-snug: var(--fw-medium) var(--fs-sm)/var(--lh-snug) var(--font-body); /* 14/18 Medium */ --t-body-sm-on-base: var(--fw-regular) var(--fs-sm)/var(--lh-base) var(--font-body); /* 14/24 — текст карточек */ --t-body-sm-medium-on-base: var(--fw-medium) var(--fs-sm)/var(--lh-base) var(--font-body); /* 14/24 Medium */ --t-body-sm-strong-on-base: var(--fw-semibold) var(--fs-sm)/var(--lh-base) var(--font-body); /* 14/24 Semibold */ /* base = 16 / lh-base = 24 */ --t-body-base: var(--fw-regular) var(--fs-base)/var(--lh-base) var(--font-body); --t-body-base-medium: var(--fw-medium) var(--fs-base)/var(--lh-base) var(--font-body); --t-body-base-strong: var(--fw-semibold) var(--fs-base)/var(--lh-base) var(--font-body); --t-body-base-on-xl: var(--fw-regular) var(--fs-base)/var(--lh-xl) var(--font-body); /* 16/32 — открытый lh */ /* md = 18 / нет lh-md → default lh-base = 24 */ --t-body-md-strong-on-xl: var(--fw-semibold) var(--fs-md)/var(--lh-xl) var(--font-body); /* 18/32 — stories quote */ /* lg = 20 / lh-lg = 28 */ --t-body-lg: var(--fw-regular) var(--fs-lg)/28px var(--font-body); /* лидерское описание (subscribe) */ /* xl = 24 / lh-xl = 32 */ --t-body-xl: var(--fw-regular) var(--fs-xl)/var(--lh-xl) var(--font-body); /* 24/32 */ /* ============================================================ DISPLAY (Philosopher) — для заголовков. ============================================================ */ /* base = 16 */ --t-display-base-on-sm: var(--fw-regular) var(--fs-base)/var(--lh-sm) var(--font-display); /* 16/20 — имя автора в карточке статьи */ --t-display-base-bold-on-sm: var(--fw-bold) var(--fs-base)/var(--lh-sm) var(--font-display); /* 16/20 Bold — FAQ question */ /* lg = 20 / lh-lg = 28 */ --t-display-lg-on-xl: var(--fw-regular) var(--fs-lg)/var(--lh-xl) var(--font-display); /* 20/32 — spheres tab */ --t-display-lg-bold-on-base: var(--fw-bold) var(--fs-lg)/var(--lh-base) var(--font-display); /* 20/24 Bold */ --t-display-lg-bold-on-sm: var(--fw-bold) var(--fs-lg)/var(--lh-sm) var(--font-display); /* 20/20 Bold — tight (tarot-flow/strict) */ /* md = 18 — нет lh-md → используем явные lh */ --t-display-md-bold-on-xl: var(--fw-bold) var(--fs-md)/var(--lh-xl) var(--font-display); /* 18/32 Bold — seo heading */ /* xl = 24 / lh-xl = 32 */ --t-display-xl: var(--fw-regular) var(--fs-xl)/var(--lh-xl) var(--font-display); /* 24/32 */ --t-display-xl-bold: var(--fw-bold) var(--fs-xl)/var(--lh-xl) var(--font-display); /* 24/32 Bold */ --t-display-xl-bold-on-base: var(--fw-bold) var(--fs-xl)/var(--lh-base) var(--font-display); /* 24/24 Bold tight */ /* 2xl = 32 */ --t-display-2xl-on-xl: var(--fw-regular) var(--fs-2xl)/var(--lh-xl) var(--font-display); /* 32/32 — имя эксперта в hero */ /* Off-scale display заголовки страниц */ --t-display-headline: var(--fw-regular) var(--fs-3xl)/56px var(--font-display); /* 48/56 — section title (how-it-works/experts-teaser) */ --t-display-section: var(--fw-regular) 28px/32px var(--font-display); /* 28/32 — section title medium (cta-help/subscribe), 28 off-scale */ /* ============================================================ SEMANTIC TOKENS — для конкретных мест проекта. Имя отражает назначение (не размер). Используются 1-2 раза. ============================================================ */ /* ---------- COMPONENTS ---------- */ --t-tag: var(--fw-medium) var(--fs-2xs)/var(--lh-2xs) var(--font-body); /* 10/14 — pill-бейдж */ --t-tag-strong: var(--fw-semibold) var(--fs-2xs)/var(--lh-2xs) var(--font-body); /* 10/14 Semibold — solid pill в hero */ --t-footer-brand: var(--fw-bold) var(--fs-xl)/48px var(--font-display); /* 24/48 — лого «TAROTO» в футере */ --t-balance-value: var(--fw-semibold) var(--fs-sm)/var(--lh-xs) var(--font-body); /* 14/16 — баланс в header pill */ /* ---------- SECTION HEADINGS (общие, ≥2 use) ---------- */ --t-section-heading-md: var(--fw-bold) var(--fs-md)/var(--lh-base) var(--font-display); /* 18/24 Bold — cookies title, mobile-menu top group */ --t-section-heading-sm: var(--fw-bold) var(--fs-base)/var(--lh-base) var(--font-display); /* 16/24 Bold — mobile-menu subgroup */ /* ---------- CATALOG ---------- */ --t-badge: var(--fw-semibold) var(--fs-2xs)/1 var(--font-body); /* 10/1 — числовой бейдж */ --t-filter-title: var(--fw-semibold) var(--fs-base)/var(--lh-xl) var(--font-body); /* 16/32 — заголовок группы фильтров */ /* ---------- BLOG / ARTICLE ---------- */ --t-article-title: var(--fw-regular) clamp(28px, 2.6vw, 32px)/1.1 var(--font-display); /* fluid 28→32 — H1 статьи */ --t-article-author: var(--fw-regular) var(--fs-md)/var(--lh-base) var(--font-display); /* 18/24 — имя автора статьи */ --t-article-rating-value: var(--fw-regular) clamp(36px, 3.5vw, 48px)/1 var(--font-display); /* fluid 36→48 — оценка статьи */ --t-blog-subtitle: var(--fw-regular) var(--fs-md)/var(--lh-lg) var(--font-body); /* 18/28 — подзаголовок блог-листинга */ --t-review-author: var(--fw-semibold) var(--fs-sm)/16.8px var(--font-body); /* 14/16.8 — автор отзыва (Figma exact) */ /* ---------- LK ---------- */ --t-lk-balance-value: var(--fw-regular) clamp(32px, 3.5vw, 48px)/1.16 var(--font-display); /* fluid 32→48 — крупная сумма */ --t-lk-payment-amount: var(--fw-medium) var(--fs-xl)/var(--lh-base) var(--font-body); /* 24/24 Medium — сумма платежа */ --t-lk-bonus-balance: var(--fw-regular) clamp(28px, 2.5vw, 36px)/1.16 var(--font-display); /* fluid 28→36 — баланс бонусных минут (compact) */ /* ---------- SEO PAGE ---------- */ --t-seo-title: var(--fw-bold) clamp(24px, 2.2vw, 32px)/1.1 var(--font-display); /* fluid 24→32 — H1 SEO */ /* ---------- HERO (главная) ---------- */ --t-hero-title: var(--fw-regular) var(--fs-4xl)/var(--lh-4xl) var(--font-display); /* fluid 24/32 → 56/60 */ --t-hero-prompt: var(--fw-bold) var(--fs-md)/var(--lh-sm) var(--font-display); /* 18/20 mobile */ --t-hero-meta: var(--fw-medium) 9px/var(--lh-xs) var(--font-body); /* 9/16 mobile (9 off-scale) */ --t-hero-photo-role-desktop: var(--fw-regular) var(--fs-xl)/var(--lh-base) var(--font-body); /* 24/24 desktop */ --t-hero-photo-name-desktop: var(--fw-bold) var(--fs-3xl)/48px var(--font-display); /* 48/48 desktop (48 off-scale) */ --t-hero-feature-title: var(--fw-bold) var(--fs-lg)/var(--lh-lg) var(--font-display); /* 20/28 */ --t-hero-feature-desc: var(--fw-regular) clamp(13px, 12.57px + 0.099vw, 15px)/clamp(18px, 17.57px + 0.099vw, 20px) var(--font-body); /* fluid 13→15 / 18→20 */ /* ---------- MODAL ---------- */ --t-modal-amount: var(--fw-medium) var(--fs-2xl)/var(--lh-base) var(--font-body); /* 32/24 — введённая сумма (top-up) */ --t-modal-step-title: var(--fw-semibold) var(--fs-md)/var(--lh-base) var(--font-body); /* 18/24 — заголовок шага */ --t-modal-step-num: var(--fw-regular) var(--fs-xs)/1 var(--font-display); /* 12/1 — порядковый номер */ --t-modal-heading: var(--fw-bold) var(--fs-xl)/1 var(--font-display); /* 24/1 — крупный заголовок */ --t-modal-balance-big: var(--fw-bold) var(--fs-3xl)/1 var(--font-display); /* 48/1 — большой баланс */ --t-modal-number: var(--fw-regular) var(--fs-xl)/1 var(--font-body); /* 24/1 — крупное число */ --t-modal-title-lg: var(--fw-regular) var(--fs-2xl)/var(--lh-2xl) var(--font-display); /* 32/40 — большой заголовок (welcome) */ /* ---------- BOOKING ---------- */ --t-booking-price: var(--fw-semibold) var(--fs-xl)/var(--lh-base) var(--font-body); /* 24/24 — цена в booking */ --t-booking-price-total: var(--fw-semibold) var(--fs-lg)/var(--lh-base) var(--font-body); /* 20/24 — итоговая цена */ /* ---------- STORIES (главная, fluid внутри @container) ---------- */ --t-stories-stat: var(--fw-regular) clamp(14px, 11.2px + 0.39cqi, 18px)/1.33 var(--font-body); /* fluid 14→18 */ --t-stories-text: var(--fw-regular) clamp(14px, 12px + 0.28cqi, 16px)/1.5 var(--font-body); /* fluid 14→16 */ --t-stories-chunk-title-wide: var(--fw-semibold) clamp(16px, 14px + 0.28cqi, 18px)/var(--lh-xl) var(--font-body); /* fluid 16→18 Semibold */ /* ---------- STRICT-SELECTION (главная) ---------- */ --t-strict-card-title: var(--fw-bold) clamp(20px, 14px + 0.556cqi, 22px)/1.2 var(--font-display); /* fluid 20→22 Bold */ /* ---------- FREE-THEMES (главная, fluid по vw) ---------- */ --t-free-themes-num: var(--fw-bold) clamp(48px, 25.14px + 7.143vw, 128px)/1 var(--font-display); /* fluid 48→128 */ --t-free-themes-title: var(--fw-bold) clamp(13px, 11px + 0.625vw, 20px)/1.2 var(--font-display); /* fluid 13→20 */ --t-free-themes-desc: var(--fw-regular) clamp(11px, 10.14px + 0.268vw, 14px)/1.4 var(--font-body); /* fluid 11→14 */ } /* ============================================================ ГЛОБАЛЬНЫЕ ТЕКСТОВЫЕ КЛАССЫ — применяются прямо в HTML. (clamp нельзя засунуть в font shorthand → пишем longhand) ============================================================ */ /* ---------- Breadcrumbs ---------- */ .breadcrumbs { font: var(--t-body-sm); color: var(--c-text-muted); margin-bottom: var(--s-2); } .breadcrumbs a { color: inherit; } .breadcrumbs a:hover { color: var(--c-magenta); } /* ---------- H1 страницы — fluid 32→56 ---------- */ .page-title { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: clamp(32px, 5vw, 56px); line-height: 1.1; color: var(--c-text); } /* ---------- Заголовок секции — fluid 28→48, Philosopher Regular 400 ---------- */ .section-title { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: clamp(28px, 4vw, 48px); line-height: 1.1; color: var(--c-text); } /* ---------- Подзаголовок секции ---------- */ .section-subtitle { font-size: clamp(14px, 1.4vw, 18px); color: var(--c-text-muted); max-width: 720px; } /* ============================================================ LAYOUT UTILITIES ============================================================ */ .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; /* Fluid gutter: 16 на 360 → 56 на 1440. Без media-queries. Линейная интерполяция: a*x+b где x=vw_px, a=40/1080≈0.0370, b≈2.67. */ padding-inline: clamp(16px, 3.7vw + 2.67px, 56px); } .section { padding-block: var(--section-padding-y); } .section--tight { padding-block: clamp(32px, 4vw, 64px); } .section-head { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: clamp(24px, 3vw, 48px); } /* .section-title / .section-subtitle — в src/css/typography.css */ /* ============================================================ CSS — COMPONENTS (переиспользуемые: кнопки, теги, карточки, header, footer) ============================================================ */ /* ============================================================ BUTTONS — Figma system Типы: .btn--primary / .btn--secondary / .btn--tertiary / .btn--text Размер: .btn (= Desktop default), .btn--lg (Hero CTA 300×72) Mobile: автомат через @media (max-width: 430px) — увеличенная тап-зона. Hover: на primary/2Line — gradient «сжимается» до 33.7% + border тёмный ============================================================ */ /* === BASE === */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); border: 0; border-radius: var(--r-pill); cursor: pointer; font: var(--t-body-base-strong); text-align: center; white-space: nowrap; padding: var(--s-2) var(--s-3); min-height: 40px; transition: background-image .25s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, opacity .18s ease; } .btn:disabled { opacity: 0.55; cursor: not-allowed; } /* HTML-атрибут `hidden` должен скрывать кнопку — но `display:inline-flex` выше переопределяет UA `[hidden]{display:none}`. Возвращаем явно. */ .btn[hidden] { display: none; } .btn>svg, .btn>img { display: block; flex-shrink: 0; width: 24px; height: 24px; } @media (max-width: 430px) { .btn { font-size: var(--fs-sm); line-height: var(--lh-sm); min-height: 36px; } .btn>svg, .btn>img { width: var(--s-4); height: var(--s-4); } } /* === PRIMARY (gradient) === Плавность hover-а через ::after: дефолтный градиент на самой кнопке, поверх — ::after с hover-градиентом и opacity:0. На :hover он плавно проявляется (gradient-to-gradient браузеры не интерполируют, поэтому используется fade пары слоёв). Hover-градиент специально мягкий (0%→60% вместо «сжатого» 21.5%→33.7%), чтобы не было резкой полосы перехода. Magenta доминирует, но переход идёт плавно по большей части ширины кнопки. */ .btn--primary { color: #fff; border: 1px solid var(--c-magenta-border); background-image: linear-gradient(86deg, var(--c-purple-deep) 21.5%, var(--c-magenta) 99%); box-shadow: var(--inset-glow); overflow: hidden; /* isolation создаёт собственный stacking context — позволяет ::after с z-index:-1 «спрятаться» под текстом кнопки, но остаться в её рамках. Раньше с дефолтным stacking ::after (positioned) перекрывал текст-ноду (которая inline non-positioned и не реагирует на `> * { z-index }`). */ isolation: isolate; } .btn--primary::after { content: ""; position: absolute; inset: 0; z-index: -1; /* под текстом, но внутри isolation */ border-radius: inherit; background-image: linear-gradient(86deg, var(--c-purple-deep) 0%, var(--c-magenta) 60%); opacity: 0; transition: opacity .4s ease; pointer-events: none; } .btn--primary:hover::after { opacity: 1; } /* === SECONDARY (translucent dark) — bgc анимируется нативно === */ .btn--secondary { color: var(--c-text); background-color: var(--c-text-tint-10); padding: var(--s-3); min-height: 48px; } .btn--secondary:hover { background-color: var(--c-text-tint-20); } @media (max-width: 430px) { .btn--secondary { min-height: 44px; padding: var(--s-3); } } /* === TERTIARY (white pill, border, drop-shadow) — flat bgc для smooth hover === */ .btn--tertiary { color: var(--c-text); background-color: #fff; border: 1px solid var(--c-text-tint-20); filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.15)); /* shadow-elev-1 */ padding: var(--s-3); min-height: 48px; } .btn--tertiary:hover { background-color: #f3f1f3; } @media (max-width: 430px) { .btn--tertiary { min-height: 44px; padding: var(--s-3); } } /* === TEXT (no bg, no border) === */ .btn--text { color: var(--c-magenta); background: none; border: 0; padding: 0; min-height: 24px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.15)); /* shadow-elev-1 */ } .btn--text:hover { color: #e954ce; } /* === SIZE MODIFIERS === */ /* .btn--lg — Hero CTA (300×72) и кнопки-CTA в секциях */ .btn--lg { min-height: 72px; padding: var(--s-4) var(--s-3); width: 300px; max-width: 100%; } @media (max-width: 430px) { .btn--lg { min-height: 56px; width: 100%; padding: var(--s-4) var(--s-3); font-size: var(--fs-base); line-height: var(--lh-base); } } .btn--block { width: 100%; } /* .btn--md — единая высота главных кнопок действия (56). Высота из компонента, а не точечным override в секциях (top-up, каталог/страница услуги и т.п.). */ .btn--md { min-height: 56px; } /* === ICON-ONLY round button (slider arrows, search, etc.) === */ .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--r-md); background: var(--c-pink-soft); color: var(--c-magenta); border: 0; cursor: pointer; transition: background-color .18s ease, transform .12s ease; } .btn-icon:hover { background-color: #efd4ec; } .btn-icon:active { transform: scale(0.97); } .btn-icon--sm { width: 40px; height: 40px; border-radius: var(--r-xs); } .btn-icon svg { width: 24px; height: 24px; } .btn-icon--sm svg { width: 18px; height: 18px; } /* ============================================================ TAGS — pill 4×8, Inter Medium 10/14, радиус pill ============================================================ */ .tag { display: inline-flex; align-items: center; padding: var(--s-1) var(--s-2); font: var(--t-tag); border-radius: var(--r-pill); background: var(--c-violet); color: var(--c-text-on-dark); white-space: nowrap; /* Если .tag — кнопка (открывает «Уровни экспертов»), визуально выглядит так же, но получает указатель и hit-area: */ border: 0; cursor: inherit; } button.tag { cursor: pointer; } button.tag:hover { filter: brightness(0.92); } .tag--gold { background: var(--c-gold); color: var(--c-text); } .tag--exclusive { background: var(--c-violet); color: #fff; } .tag--platinum { background: linear-gradient(135deg, #6b7280, #d1d5db); color: var(--c-text); } .tag--day { background: var(--c-status-day); color: #fff; } .tag--pro { background: var(--c-magenta-tint-10); color: var(--c-magenta); } .tag--new { background: var(--c-status-new); color: #fff; } /* Figma 75:4470 mobile */ /* ============================================================ PHOTO PLACEHOLDER Drops in any . If src is missing/broken, gradient fallback is shown so design doesn't fall apart. ============================================================ */ .photo { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--gradient-photo-fallback); border-radius: inherit; } .photo-frame { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--gradient-photo-fallback); } .photo-frame--circle { border-radius: 50%; } /* ============================================================ RATING / STATUS / USER STACK ============================================================ */ /* Rating: цифра + 5 звёзд */ .rating { display: inline-flex; align-items: center; gap: var(--s-1); } .rating__score { font: var(--t-body-sm-bold); color: var(--c-star); } .rating__stars { display: inline-flex; gap: 2px; color: var(--c-star); /* off-scale — micro-gap */ } .rating__stars svg { width: 12px; height: 12px; } /* ---------- Rating-star (full / half / empty) ---------- Реализация через CSS mask: SVG-path задаёт форму звезды, фон контролирует состояние. Half — linear-gradient gold→empty в 50%. Применяется через JS tplStars(rating). #} ICONS.star в icons.js используется отдельно как иконка-декоратор (1 звезда возле числа рейтинга в expert-hero) — там цвет через currentColor. */ .rating-star { --rating-star-mask: url("data:image/svg+xml;utf8,"); display: inline-block; width: 12px; height: 12px; flex-shrink: 0; background: var(--c-star); /* full — gold */ -webkit-mask: var(--rating-star-mask) no-repeat center / contain; mask: var(--rating-star-mask) no-repeat center / contain; } .rating-star--empty { background: var(--c-text-tint-20); } .rating-star--half { background: linear-gradient(to right, var(--c-star) 50%, var(--c-text-tint-20) 50%); } /* ---------- Статус эксперта (3 состояния по Figma) ---------- */ .status { display: inline-flex; align-items: center; gap: var(--s-1); font: var(--t-body-sm-medium); } .status::before { content: ""; width: 10px; /* off-scale — dot-индикатор */ height: 10px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .status--online { color: var(--c-online); } /* #08b866 — Сейчас онлайн */ .status--busy { color: #b87d08; } /* В разговоре — нет токена (busy-amber) */ .status--offline { color: rgba(40, 34, 39, 0.5); } /* Оффлайн — text @ 50%, нет токена */ /* На mobile/tablet (<960) карточка эксперта использует 12/16 для status — per Figma 75:4470. На desktop (≥960) — 14/20 (Figma 64:1126). */ @media (max-width: 959px) { .expert-card .status { font: var(--t-body-xs-medium); } /* Figma 75:4470 — 12/16 Medium */ .expert-card .status::before { width: 8px; height: 8px; } } /* ---------- Stack из 5 аватаров «Рекомендуют» ---------- */ .user-stack { display: inline-flex; align-items: center; } .user-stack__avatar { width: var(--s-4); height: var(--s-4); border-radius: 50%; border: 1px solid #fff; background: var(--gradient-photo-fallback); margin-right: -4px; /* off-scale — overlap-индентация */ overflow: hidden; } .user-stack__avatar:last-child { margin-right: 0; } .user-stack__avatar img { width: 100%; height: 100%; object-fit: cover; } /* ============================================================ HEADER / BANNER / NAV — Figma node 62:417 (Anon/User × Desktop/Mobile) Поведение (вариант Б из comments.md — header выходит в десктоп-вид от 768, чтобы на iPad/планшете не дублировать кнопки авторизации с tabbar'ом): - Phone (<768): скрыты nav, phone, socials. Логотип 18px слева, справа — login (anon) ИЛИ balance + plus (user). Поиск — только в user-state. - Tablet/Desktop (≥768): полный layout, gap fluid 24-48 от 768→1440. Если nav не помещается — overflow-detector (header-overflow.js) ставит класс .has-burger, nav прячется в dropdown «бургера» в правом краю. Состояние user/anon переключается классом .is-user / .is-anon на
. ============================================================ */ /* ---------- Top banner (Figma 153:16062) ---------- Синий бар: «1-я консультация бесплатно» + white pill-CTA «Подобрать таролога». На mobile: уменьшаем padding по горизонтали и кнопку. */ .top-banner { display: flex; align-items: center; justify-content: center; gap: var(--s-2); /* Figma 153:16152 — gap 8 */ background: var(--c-banner); color: #fff; /* mobile: 4px 8px — узкий padding, чтобы контент влез в 360 viewport одной строкой ("1-я консультация бесплатно" ~170 + gap 8 + button ~164 = 342 ≤ 344). */ padding: var(--s-1) var(--s-2); flex-wrap: nowrap; /* одна строка, без wrap */ text-align: center; } .top-banner__text { font: var(--t-body-xs-strong); color: #fff; white-space: nowrap; } .top-banner__btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 32px; padding: 0 var(--s-4); border: 1px solid var(--c-text-tint-20); border-radius: var(--r-pill); background: #fff; color: var(--c-text); font: var(--t-body-xs-strong); text-decoration: none; white-space: nowrap; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15); /* shadow-elev-1 */ transition: background .15s ease, color .15s ease; } .top-banner__btn:hover { background: var(--c-magenta); color: #fff; } @media (min-width: 768px) { .top-banner { padding: var(--s-1) var(--s-8); } } /* ============================================================ Header shell — единый flex-row. Layout: [logo] [nav | burger] [phone] [right-cluster: socials | state | search | profile] Все блоки flex-shrink: 0 — не сжимаются. Если nav не помещается → JS ставит .has-burger, nav скрывается, появляется бургер с dropdown. ============================================================ */ .site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--c-divider-soft); } .site-header__row { display: flex; align-items: center; gap: var(--s-5); height: var(--s-9); } /* ---------- Logo (SVG из assets/icons/header/taroto-logo.svg) ---------- Уменьшенный размер: 18px mobile / 28px desktop (было 20/32). Меньше визуальной массы, больше места под nav на средних viewport. */ .site-logo { display: inline-flex; align-items: center; height: 18px; /* mobile */ flex-shrink: 0; color: var(--c-text); } .site-logo svg { height: 100%; width: auto; display: block; } /* ---------- NAV ---------- */ .nav { display: none; gap: var(--s-5); align-items: center; flex-shrink: 0; } .nav__item { display: inline-flex; align-items: center; gap: var(--s-1); height: 36px; padding: var(--s-2) 0; /* по Figma — без горизонтального паддинга */ border-radius: 32px; /* off-scale 32 */ font: var(--t-body-sm-medium); color: var(--c-text); cursor: pointer; white-space: nowrap; /* «Доп. услуги», «Сферы жизни» — никаких переносов */ transition: color .15s ease; } .nav__item--active { color: var(--c-magenta); } .nav__item:hover { color: var(--c-magenta); } .nav__item .chevron { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; transition: transform .2s ease; } .nav__item .chevron svg { width: 100%; height: 100%; display: block; } /* Шеврон повёрнут, когда дропдаун открыт (открытие по клику, см. header-mega-menu.js) */ .nav__item[aria-expanded="true"] .chevron { transform: rotate(180deg); } /* ---------- Phone ---------- */ .site-header__phone { display: none; font: var(--t-body-sm-medium); color: var(--c-text); white-space: nowrap; flex-shrink: 0; } /* ---------- Right cluster ---------- */ .site-header__right { display: flex; align-items: center; gap: var(--s-2); /* mobile: 8 (по Figma User-Mobile); desktop переопределяет */ margin-left: auto; flex-shrink: 0; } /* ---------- Socials ---------- */ .socials { display: none; align-items: center; gap: var(--s-2); } .socials__link { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--c-text); flex-shrink: 0; } .socials__link:hover { color: var(--c-magenta); } .socials__link svg { width: 24px; height: 24px; display: block; } /* ============================================================ Anon / User state toggle .header-state — обёртка под состояние. Используем .site-header .header-state в селекторе (specificity 0,2,0), чтобы перекрыть default display у .icon-btn / .btn (specificity 0,1,0) независимо от порядка правил в склеенном bundle. ============================================================ */ .site-header .header-state { display: none; align-items: center; } .header-state--anon { gap: 0; } .header-state--user { gap: var(--s-2); } .site-header.is-anon .header-state--anon, .site-header.is-user .header-state--user { display: inline-flex; } /* Default (если класс is-anon/is-user ещё не выставлен JS-ом) — показываем user */ .site-header:not(.is-user):not(.is-anon) .header-state--user { display: inline-flex; } /* ---------- Login button (anon) ---------- */ .site-header__login { /* Базовая кнопка — наследует .btn .btn--primary, но Figma даёт точные размеры */ padding: var(--s-3) var(--s-5); min-height: auto; font: var(--t-body-base-strong); } /* ---------- Icon buttons (search / profile) — Figma 48×48 ---------- */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: var(--s-3); border-radius: var(--r-pill); background: var(--c-text-tint-10); color: var(--c-text); cursor: pointer; transition: background .15s ease, color .15s ease; flex-shrink: 0; } .icon-btn:hover { background: var(--c-text-tint-18); } .icon-btn svg { width: 24px; height: 24px; display: block; } /* На мобилке поиск виден только в user-state (по Figma) */ .site-header.is-anon .site-header__search { display: none; } /* На phone-mobile (≤767) скрываем кнопки, которые дублируются в bottom tabbar: • profile icon (user-state) — дубль с tabbar tab «Войти/Профиль» (user.svg) • login button (anon-state) — дубль с тем же tabbar tab На tablet/desktop (≥768) header в полном виде, tabbar скрыт (см. tabbar.css). */ @media (max-width: 767px) { .site-header__profile, .site-header__login { display: none !important; } } /* ============================================================ BALANCE PILL (user state) Desktop: «Баланс / 7 000 ₽» + текстовая «Пополнить» Mobile : «7 000 ₽» + кругляш с «+» ============================================================ */ .balance { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3); background: var(--c-text-tint-10); border: 1px solid var(--c-text-tint-10); border-radius: var(--r-pill); } .balance__info { display: flex; flex-direction: column; line-height: 1; /* layout-tweak: убирает UA-lh контейнера, чтобы дети плотно стекались (вертикальный коллапс) */ } .balance__label { display: none; /* mobile — скрыт; desktop включит */ font: var(--t-body-xs-medium); color: var(--c-text-muted); } .balance__value { font: var(--t-balance-value); color: var(--c-text); white-space: nowrap; } /* — текстовая «Пополнить» (desktop) — */ .balance__top-up--text { display: none; padding: var(--s-2) var(--s-3); border-radius: var(--r-pill); border: 1px solid var(--c-magenta-border); background-image: linear-gradient(86deg, var(--c-purple-deep) 21.5%, var(--c-magenta) 99%); box-shadow: var(--inset-glow); color: #fff; font: var(--t-body-sm-strong); white-space: nowrap; flex-shrink: 0; } /* — кругляш «+» (mobile) — */ .balance__top-up--plus { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: var(--s-2); border-radius: 50%; border: 1px solid var(--c-magenta-border); background-image: linear-gradient(86deg, var(--c-purple-deep) 21.5%, var(--c-magenta) 99%); box-shadow: var(--inset-glow); color: #fff; flex-shrink: 0; } .balance__top-up--plus svg { width: 16px; height: 16px; display: block; } /* ============================================================ DESKTOP (≥768px) — full layout (nav + phone + socials + balance label). По варианту Б comments.md header выходит в десктоп-вид от 768 (на 768-1023 nav уплотнён через gap, помещается без переносов). ============================================================ */ @media (min-width: 768px) { /* Фиксированный gap. JS-overflow-detector сам решает, сжать ли nav в бургер. */ .site-header__row { gap: var(--s-5); } .site-logo { height: 28px; } /* desktop — было 32, уменьшено для аккуратности */ .nav { display: inline-flex; } .site-header__phone { display: inline-block; } .socials { display: inline-flex; } .site-header__right { gap: var(--s-3); } /* На десктопе search виден всегда (и в anon, и в user) */ .site-header.is-anon .site-header__search { display: inline-flex; } /* Balance pill — desktop вид: показать «Баланс» + текстовую «Пополнить», спрятать кругляш «+» */ .balance { padding: var(--s-1) var(--s-1) var(--s-1) var(--s-4); } .balance__label { display: inline-block; } .balance__value { font-size: var(--fs-base); line-height: var(--lh-xs); } .balance__top-up--text { display: inline-flex; } .balance__top-up--plus { display: none; } } /* ============================================================ MOBILE (<768px) — кнопка «Войти» уже, текст 14 ============================================================ */ @media (max-width: 767px) { .site-header__login { padding: 10px var(--s-5); font-size: var(--fs-sm); line-height: var(--lh-sm); } } /* ============================================================ BURGER (overflow-fallback). По умолчанию скрыт; JS добавляет .site-header.has-burger когда nav не помещается рядом с другими элементами — тогда nav прячется, бургер появляется. Раскрытие dropdown — по hover/focus на контейнере (без клика). ============================================================ */ .header-burger { position: relative; display: none; /* по умолчанию: nav inline, бургер не нужен */ align-items: center; flex-shrink: 0; } .site-header.has-burger .nav, .site-header.has-burger .site-header__phone { display: none; } .site-header.has-burger .header-burger { display: inline-flex; } /* На phone (<768) header в mobile-режиме без nav и без бургера — навигация через bottom tabbar. */ @media (max-width: 767px) { .site-header.has-burger .header-burger { display: none; } } /* Размер совпадает с .icon-btn (search / profile) — 48×48, padding 12 */ .header-burger__btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: var(--s-3); border: 0; border-radius: var(--r-pill); background: var(--c-text-tint-10); color: var(--c-text); cursor: pointer; transition: background .15s ease, color .15s ease; } .header-burger__btn:hover { background: var(--c-text-tint-18); } .header-burger__btn svg { width: 24px; height: 24px; display: block; } .header-burger__menu { position: absolute; top: calc(100% + var(--s-2)); right: 0; /* выезжает влево от правой кнопки — не за viewport */ min-width: 220px; padding: var(--s-2); background: #fff; border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); /* off-elev — dropdown shadow */ display: flex; flex-direction: column; gap: 2px; /* off-scale — micro-gap */ opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; z-index: 100; } /* Hover-bridge: невидимая область поверх gap между кнопкой и меню, чтобы курсор не «выпадал» при движении вниз. */ .header-burger__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: var(--s-2); } .header-burger:hover .header-burger__menu, .header-burger:focus-within .header-burger__menu { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .15s ease, transform .15s ease, visibility 0s; } .header-burger__link { padding: 10px var(--s-4); /* off-scale 10 — chip-style */ border-radius: var(--r-xs); font: var(--t-body-sm-medium); color: var(--c-text); text-decoration: none; white-space: nowrap; transition: background .12s ease, color .12s ease; } .header-burger__link:hover { background: var(--c-pink-soft); color: var(--c-magenta); } /* Телефон в dropdown — отделён тонкой линией сверху, нумерация bold */ .header-burger__link--phone { margin-top: var(--s-1); padding-top: 14px; /* off-scale 14 */ border-top: 1px solid var(--c-divider-soft); border-radius: 0 0 var(--r-xs) var(--r-xs); font: var(--t-body-sm-strong); /* Semibold-вариант ссылки телефона */ } /* ============================================================ EXPERT CARD — две якорные точки: • Mobile (Figma 75:4470, root w=328) — pixel-perfect на 360. • Desktop (Figma 64:1126, root w=1000) — pixel-perfect на 1440. Между ними — fluid clamp() (photo, name). Структура (TPL.expertCard, FLAT 4 children): .expert-card — grid с двумя layout'ами .expert-card__photo — + .tag + .__experience .expert-card__info (header) — name, title, meta(rating, status) .expert-card__about (p) — описание .expert-card__actions — profile-link + booking (mobile: stack; desktop: row) Layout-переключатель — единственный @media (min-width: 960px). В диапазоне 0-959 — mobile-grid (info|photo / about / actions). В диапазоне 960+ — desktop-grid (photo | info | actions / photo | about). Размеры (photo, name) fluid-скейлятся через clamp() от 360 → 1440. ============================================================ */ /* ---------- Local fluid tokens ---------- Линейная интерполяция 360 → 1440, slope = (MAX-MIN)/(1440-360)*100. --photo-size : 128 (mobile) → 174 (desktop) --name-size : 24 (mobile) → 24 (desktop) — стабильно, без clamp. Если позже захочется крупнее на десктопе — поменять MAX. --pad-y : 16 (Figma фикс на обоих якорях). */ .expert-card { --photo-size: clamp(128px, 112.67px + 4.26vw, 174px); } /* ============================================================ ROOT — mobile base layout (Figma 75:4470). Grid 2 cols (info | photo 128) × 3 rows (info|photo / about / actions). ============================================================ */ .expert-card { display: grid; grid-template-columns: minmax(0, 1fr) var(--photo-size); grid-template-rows: auto auto auto; grid-template-areas: "info photo" "about about" "actions actions"; column-gap: var(--s-4); row-gap: 10px; /* off-scale 10 — Figma exact */ padding-block: var(--s-4); border-bottom: 1px solid var(--c-card-divider); /* container-type для @container ниже — actions раскладывается row-вариантом только когда сама карточка достаточно широкая, без привязки к viewport. */ container-type: inline-size; } .expert-card:last-child { border-bottom: 0; } /* ============================================================ PHOTO — квадратная, на mobile 128, на desktop 174 (fluid между). ============================================================ */ .expert-card__photo { grid-area: photo; position: relative; width: var(--photo-size); height: var(--photo-size); border-radius: var(--r-md); overflow: hidden; background: var(--gradient-photo-fallback); align-self: start; /* не растягиваться на высоту row */ justify-self: end; /* mobile — прижато к правому краю инфо-блока */ } .expert-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .expert-card__photo .tag { position: absolute; top: var(--s-1); left: var(--s-1); } .expert-card__experience { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; display: flex; align-items: flex-end; justify-content: center; padding: var(--s-2); font: var(--t-body-sm-medium-on-base); text-align: center; color: #fff; background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%); pointer-events: none; } /* ============================================================ INFO — name, title, meta (rating, status). Mobile: gap=8 column. На mobile rating и status — на разных строках (через flex-direction:column на .meta), на desktop — в одной (row). ============================================================ */ .expert-card__info { grid-area: info; display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; } .expert-card__name { margin: 0; font: var(--t-display-xl-bold-on-base); color: var(--c-text); word-break: break-word; } /* Имя — ссылка на профиль. На hover любой части карточки или самой ссылки — подсвечиваем magenta-цветом. */ .expert-card__name-link { color: inherit; transition: color 0.15s ease; } .expert-card:hover .expert-card__name-link, .expert-card__name-link:hover { color: var(--c-magenta); } /* Кликабельной становится ВСЯ карточка через overlay-link паттерн: псевдо ::after растягивается до ближайшего positioned-предка = .expert-card. Поэтому .expert-card__name-link сам НЕ должен быть positioned (иначе ::after сядет на размер ссылки = только имя). Интерактивные элементы (booking, tag) поднимаем через position+z-index — они над overlay. */ .expert-card { position: relative; } .expert-card__name-link::after { content: ""; position: absolute; inset: 0; z-index: 0; } .expert-card .booking, .expert-card .booking__btn, .expert-card .tag { position: relative; z-index: 1; } .expert-card__title { font: var(--t-body-xs); color: var(--c-text-muted); } .expert-card__meta { display: flex; flex-direction: column; /* mobile — rating и status на разных строках */ align-items: flex-start; gap: var(--s-2); } .expert-card__meta .rating { gap: var(--s-1); /* Figma 75:4470 — 4 между score и stars */ } /* ============================================================ ABOUT — paragraph под top, full container width ============================================================ */ .expert-card__about { grid-area: about; margin: 0; font: var(--t-body-sm-on-snug); color: var(--c-text); /* Ограничиваем описание 3 строками во всех карточках — у Анастасии about длиннее, иначе карточка вырастает в высоту по сравнению с соседями. */ display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; /* стандарт + префикс для совместимости */ -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================ ACTIONS — profile-link + booking. Mobile: column stack, full-width. Desktop: row, profile-link слева от booking-column. ============================================================ */ .expert-card__actions { grid-area: actions; display: flex; flex-direction: column; align-items: stretch; gap: 10px; /* off-scale 10 — Figma exact */ } .expert-card__profile-link { display: flex; align-items: center; justify-content: center; width: 100%; height: auto; padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); font: var(--t-body-sm-strong); color: var(--c-magenta); background: transparent; text-decoration: none; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.15)); /* shadow-elev-1 */ cursor: pointer; transition: background .15s ease; } .expert-card__profile-link:hover { background: rgba(170, 38, 146, 0.06); /* magenta @ 6% — нет токена */ } /* ============================================================ BOOKING — 2-line button + recommends + free-badge. Mobile: button 56h, gap 8, font 14/24, prices 12/16, icon-bubble 40 (svg 16). Desktop: button 64h, gap 16, font 16/24, prices 14/24, icon-bubble 48 (svg 24). ============================================================ */ .booking { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); width: 100%; container-type: inline-size; container-name: booking-wrap; } .booking__btn { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); /* mobile */ width: 100%; height: 56px; /* mobile (Figma 75:4490) */ padding: var(--s-2); background-image: linear-gradient(86deg, var(--c-purple-deep) 21.5%, var(--c-magenta) 99%); color: #fff; border: 1px solid var(--c-magenta-border); border-radius: var(--r-pill); box-shadow: var(--inset-glow); cursor: pointer; overflow: hidden; isolation: isolate; transition: border-color .25s ease, box-shadow .25s ease; } .booking__btn::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: linear-gradient(86deg, var(--c-purple-deep) 0%, var(--c-magenta) 60%); opacity: 0; transition: opacity .4s ease; pointer-events: none; } .booking__btn:hover::after { opacity: 1; } .booking__icon-bubble { width: 40px; /* mobile */ height: 40px; border-radius: 50%; background: #fff; color: #831c78; /* magenta-deep accent — нет токена */ display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .booking__icon-bubble svg { width: var(--s-4); /* mobile */ height: var(--s-4); transition: transform .35s ease; } .booking__btn:hover .booking__icon-bubble svg { transform: rotate(90deg); } /* ============================================================ Telegram-вариант кнопки записи (см. site.bookingVariant в _data/site.js). Перекрывает gradient и border базового .booking__btn. Иконка телефона заменяется на telegram-paper-plane в шаблоне. ============================================================ */ .booking__btn--telegram { background-image: linear-gradient(86deg, #0088C4 21.5%, #00B6EF 99%); border-color: #00B6EF; } .booking__btn--telegram::after { background-image: linear-gradient(86deg, #0088C4 0%, #00B6EF 60%); } .booking__btn--telegram:hover .booking__icon-bubble svg { transform: none; } /* самолётик не вращаем — выглядит странно */ /* Telegram-bubble: иконка в левом цвете градиента кнопки (#0088C4). Размер иконки и текста — единый на всех брейкпоинтах. */ .booking__btn--telegram .booking__icon-bubble { color: #0088C4; } .booking__btn--telegram .booking__icon-bubble svg { width: 28px; height: 28px; } .booking__btn--telegram .booking__text-main { font: var(--t-body-sm-strong-on-base); } /* 14/24 strong */ /* Ghost-bubble — placeholder для симметрии текста с phone-вариантом. На узкой кнопке (<300px контейнера) скрываем, чтобы текст «Написать в Telegram» помещался. На широкой (>=300px) — возвращаем для visual balance. */ .booking__btn--telegram .booking__icon-bubble--ghost { display: none; } /* Container query: возвращаем ghost-bubble на широких контейнерах (≥300px). Контейнер задаётся на .booking / .expert-cta-mobile__inner / .expert-hero__booking. */ @container booking-wrap (min-width: 300px) { .booking__btn--telegram .booking__icon-bubble--ghost { display: inline-flex; } } .booking__icon-bubble--ghost { background: transparent; visibility: hidden; pointer-events: none; } .booking__text { display: flex; flex-direction: column; align-items: center; line-height: 1; /* layout-tweak: убирает UA-lh контейнера, дети плотно стекаются */ min-width: 0; white-space: nowrap; } .booking__text-main { font: var(--t-body-sm-strong-on-base); white-space: nowrap; } .booking__prices { display: inline-flex; gap: var(--s-2); align-items: baseline; font: var(--t-body-xs); white-space: nowrap; } .booking__prices>.new { color: #fff; } .booking__prices>.old { color: var(--c-text-on-dark-muted); text-decoration: line-through; text-decoration-skip-ink: none; } .booking__recommends { display: none; /* скрыт на mobile (Figma 75:4470) */ gap: var(--s-2); align-items: center; font: var(--t-body-xs-medium-on-sm); color: var(--c-text); } .booking__free { display: inline-flex; gap: 2px; /* off-scale — micro-bullet */ align-items: center; font: var(--t-body-sm-strong); color: var(--c-online); } .booking__free svg { width: 20px; height: 20px; flex-shrink: 0; } /* ============================================================ DESKTOP (≥960) — Figma 64:1126 layout. Grid: photo (174) | info | actions(auto) — row 1 photo | about | about — row 2 actions = row (profile-link слева | booking-column 270 справа), gap=24. ============================================================ */ @media (min-width: 960px) { .expert-card { grid-template-columns: var(--photo-size) minmax(0, 1fr) auto; grid-template-rows: auto auto; grid-template-areas: "photo info actions" "photo about about"; column-gap: 22px; /* off-scale 22 — Figma gap */ row-gap: 10px; /* off-scale 10 */ } .expert-card__photo { justify-self: start; /* desktop — слева, не end */ align-self: start; } .expert-card__experience { font: var(--t-body-base-medium); } /* 16/24 Medium — итог mobile+desktop */ /* .expert-card__name на desktop — те же 24/24 что и mobile (--t-display-bold-lg) */ .expert-card__title { font: var(--t-body-sm-on-snug); } /* Figma 64:930 — 14/18 Regular */ .expert-card__meta { flex-direction: row; /* desktop — rating + status в одной строке */ align-items: center; gap: var(--s-4); } /* Базовый desktop actions — column-reverse (booking сверху, profile-link под). Когда card сама >= ~960px (Figma desktop 1000) — переключаемся на Figma-row через @container ниже. */ .expert-card__actions { flex-direction: column-reverse; align-items: stretch; gap: var(--s-2); } .expert-card__profile-link { width: 100%; /* по ширине booking 270 */ height: var(--s-5); /* Figma 64:1004 — 24h */ padding: 0; font: var(--t-body-base-strong); /* 16/24 Semibold */ white-space: nowrap; border-radius: var(--r-sm); } /* CONTAINER QUERY — когда .expert-card достаточно широкая (>=960px), actions раскладывается по Figma 64:1126: profile-link слева, booking справа. На уже Figma desktop (1000px) — fires; на промежуточных (~880px) — нет, остаётся column-reverse. Имя в info-колонке не коллапсируется. */ @container (min-width: 960px) { .expert-card__actions { flex-direction: row; align-items: flex-start; gap: var(--s-5); } .expert-card__profile-link { width: auto; } } .booking { width: 270px; } /* Figma 64:957 — w=270 */ .booking__btn { gap: var(--s-4); /* Figma 64:1127 — gap 16 */ height: var(--s-9); padding: var(--s-2); } .booking__icon-bubble { width: var(--s-7); height: var(--s-7); } .booking__icon-bubble svg { width: var(--s-5); height: var(--s-5); } .booking__text-main { font: var(--t-body-base-strong); } /* 16/24 Semibold */ .booking__prices { font: var(--t-body-sm-on-base); } /* 14/24 Regular */ .booking__recommends { display: inline-flex; /* desktop — показывается */ } .booking__free { font: var(--t-body-xs-strong); } /* 12/16 Semibold */ } /* ============================================================ EXPERT CARD — VERTICAL (Figma 116:17679) Карточка-эксперт в портретной ориентации, 328×442. Используется на странице каталога (/experts.html, в новом макете) и в скроллерах главной — историях/строгом отборе. Структура: .expert-vcard .expert-vcard__photo (img cover, fills card) .expert-vcard__overlay (white bottom-fade gradient — для читаемости текста снизу) .expert-vcard__inner (content поверх): .expert-vcard__head ─ title (специализация), name, rating, online .expert-vcard__bottom ─ «Об эксперте» → vbooking → «1-я бесплатно» Hover-эффект (desktop): • lift translateY(-6px) • drop-shadow (var(--shadow-card)) transition .35s ease ============================================================ */ .expert-vcard { position: relative; /* Карточка target 328×442 (Figma 116:17679). Fluid от 280×378 на узком mobile до 328×442 на нормальной ширине. width:100% страхует от выпрыгивания за контейнер на 360 viewport (gutter 16 + carcd 328 = 344, влезает, но грид-контекст может быть уже). Соотношение сторон сохранено через aspect-ratio. max-width: 100% защищает от переполнения родителя. */ width: clamp(280px, 91vw, 328px); max-width: 100%; aspect-ratio: 328 / 442; border-radius: var(--r-lg); /* 24 */ overflow: clip; isolation: isolate; /* Базовый gradient — фон под фото (1.25% deep purple → 93% green-teal) */ background: linear-gradient(34.7deg, var(--c-purple-deep) 1.25%, #157560 93.11%); transition: transform .35s ease, box-shadow .35s ease; } .expert-vcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); } /* ---------- Photo (full-card cover) ---------- */ .expert-vcard__photo { position: absolute; inset: 0; z-index: 0; } .expert-vcard__photo-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---------- Overlay — белый fade снизу (≈154px) ---------- */ .expert-vcard__overlay { position: absolute; left: 0; right: 0; bottom: 0; height: 154px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 79.7%); pointer-events: none; z-index: 1; } /* ---------- Inner content ---------- */ .expert-vcard__inner { position: absolute; inset: var(--s-4); display: flex; flex-direction: column; justify-content: space-between; z-index: 2; } /* ---------- HEAD (top) ---------- */ .expert-vcard__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); /* 8 */ } .expert-vcard__title { font: var(--t-body-xs); color: var(--c-text-on-dark-muted); margin: 0; } .expert-vcard__name { font: var(--t-display-xl-bold); color: #fff; margin: 0; max-width: 205px; /* по Figma — для wrap имени */ } /* Имя — ссылка на профиль. Hover на карточке или на ссылке → magenta. */ .expert-vcard__name-link { color: inherit; transition: color 0.15s ease; } .expert-vcard:hover .expert-vcard__name-link, .expert-vcard__name-link:hover { color: var(--c-magenta); } /* Кликабельной становится ВСЯ карточка через overlay-link паттерн. .expert-vcard уже position:relative (см. выше). .expert-vcard__name-link сам НЕ positioned (иначе ::after сядет на размер ссылки). Интерактивные .vbooking и .expert-vcard__about поднимаем через position+z-index. */ .expert-vcard__name-link::after { content: ""; position: absolute; inset: 0; z-index: 0; } .expert-vcard .vbooking, .expert-vcard__about { position: relative; z-index: 1; } .expert-vcard__rating { display: inline-flex; align-items: center; gap: var(--s-1); /* 4 */ } .expert-vcard__rating-num { font: var(--t-body-sm-bold); /* Figma даёт #ffc765 — warm-gold вариант (не --c-star/--c-gold) */ color: #ffc765; } .expert-vcard__stars { display: inline-flex; align-items: center; gap: var(--s-1); /* 4 */ color: #ffc765; /* warm-gold (см. выше) */ } .expert-vcard__stars svg { width: 12px; height: 12px; } .expert-vcard__online { display: inline-flex; align-items: center; gap: var(--s-1); /* 4 */ color: #44e59a; /* online-bright — отличный от --c-online */ font: var(--t-body-xs-medium); } .expert-vcard__dot { width: 10px; /* off-scale 10 — dot-индикатор */ height: 10px; border-radius: 50%; background: #44e59a; /* online-bright (см. выше) */ } /* ---------- BOTTOM block ---------- */ .expert-vcard__bottom { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-1); /* 4 */ container-type: inline-size; container-name: booking-wrap; /* для Telegram-варианта vbooking */ } /* «Об эксперте» — текст-кнопка поверх фото (читается на тёмной части) */ .expert-vcard__about { text-align: center; padding: var(--s-1) var(--s-2); font: var(--t-body-sm-strong); color: #fff; text-decoration: none; border-radius: var(--r-sm); /* 8 */ transition: background .15s ease; } .expert-vcard__about:hover { background: rgba(255, 255, 255, 0.12); /* white @ 12% — нет токена */ } /* «1-я консультация бесплатно» — green badge с подарком */ .expert-vcard__free { display: inline-flex; align-items: center; justify-content: center; gap: 2px; /* off-scale — micro-bullet */ align-self: center; margin-top: 0; font: var(--t-body-sm-strong); color: var(--c-online); } .expert-vcard__free-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--c-online); } .expert-vcard__free-icon svg { width: 100%; height: 100%; } /* ============================================================ VBOOKING — 2-line gradient pill (Figma 64:1127) Используется только в .expert-vcard. Phone-bubble слева, текст-колонка по центру (label «Записаться» + цены). ============================================================ */ .vbooking { position: relative; display: flex; align-items: center; gap: var(--s-4); /* 16 */ padding: var(--s-2); height: var(--s-9); border: 1px solid var(--c-magenta-border); border-radius: var(--r-pill); /* pill */ background: linear-gradient(86.4deg, var(--c-purple-deep) 21.5%, var(--c-magenta) 99%); box-shadow: var(--inset-glow); text-decoration: none; transition: opacity .15s ease, transform .15s ease; } .vbooking:hover { opacity: 0.95; } .vbooking:active { transform: scale(0.99); } /* Telegram-вариант (см. site.bookingVariant в _data/site.js). */ .vbooking--telegram { background: linear-gradient(86.4deg, #0088C4 21.5%, #00B6EF 99%); border-color: #00B6EF; } .vbooking--telegram .vbooking__icon { color: #0088C4; } /* был magenta */ .vbooking--telegram .vbooking__icon svg { width: 28px; height: 28px; } /* единый размер 28 */ .vbooking--telegram .vbooking__label { font: var(--t-body-sm-strong-on-base); } /* 14/24 strong — единый */ /* Ghost-bubble справа — placeholder для visual balance текста. Рендерится только в Telegram-варианте. На узких контейнерах (<300) скрыт, на широких (>=300) — появляется (через @container ниже). */ .vbooking__icon--ghost { visibility: hidden; display: none; } @container booking-wrap (min-width: 300px) { .vbooking--telegram .vbooking__icon--ghost { display: inline-flex; } } .vbooking__icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--c-magenta); border-radius: 50%; flex-shrink: 0; } .vbooking__icon svg { width: 24px; height: 24px; display: block; } .vbooking__text { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; min-width: 0; /* чтобы цены не обрезали flex */ } .vbooking__label { font: var(--t-body-base-strong); } .vbooking__prices { display: inline-flex; align-items: baseline; gap: var(--s-2); /* 8 */ font: var(--t-body-sm-on-base); } .vbooking__price { color: #fff; } .vbooking__price-old { color: var(--c-text-on-dark-muted); text-decoration: line-through; } /* ============================================================ ARTICLE-CARD — карточка статьи в грид-листинге блога. Figma 206:78781 (320×409 на desktop). Структура (flex column, gap 16): .article-card__cover — обложка с overlay + бейджи (likes/views/rating) .article-card__head — title H3 + meta (дата + время чтения) .article-card__author — аватар + имя .article-card__cta — белая pill-кнопка «Читать» (стретчится на ширину) 8 градиент-палитр-fallback'ов (.article-card--g1..g8) — на случай когда обложка ещё не загружена. При появлении файла в assets/images/blog/ градиент остаётся под картинкой как фон (можно и удалить — не критично). ============================================================ */ .article-card { display: flex; flex-direction: column; gap: var(--s-4); /* 16 */ padding: var(--s-4); /* 16 */ background: #fff; border: 1px solid var(--c-text-tint-10); border-radius: var(--r-lg); /* 24 */ overflow: hidden; } /* ---------- Обложка ---------- */ .article-card__cover { position: relative; /* Соотношение 288:161 ≈ 1.79 — точное из Figma. Высота тянется от ширины колонки. */ aspect-ratio: 288 / 161; border-radius: var(--r-md); /* 16 */ overflow: hidden; background: var(--gradient-photo-fallback); /* default-fallback под градиент */ } .article-card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Затемняющий overlay поверх картинки (Figma — bg rgba(0,0,0,0.4)). Видим только когда есть картинка — пустую обложку не затемняем. */ .article-card__cover:has(.article-card__image[src]:not([src=""])) .article-card__overlay { position: absolute; inset: 0; background: var(--c-overlay-40); pointer-events: none; } /* ---------- Бейджи на обложке (likes / views / rating) ---------- */ .article-card__badges { position: absolute; inset: var(--s-2) var(--s-2) auto var(--s-2); /* top-left/right gap 8 */ display: flex; gap: var(--s-2); /* 8 */ flex-wrap: wrap; } .article-card__badge { display: inline-flex; align-items: center; gap: var(--s-1); /* 4 */ padding: var(--s-1) var(--s-2); /* 4 8 */ background: #fff; border-radius: var(--r-md); /* 16 */ font: var(--t-body-xs); color: var(--c-text-muted); } .article-card__badge--rating { background: var(--c-star); /* gold #e4a538 */ color: #fff; } .article-card__badge-icon { display: inline-flex; width: 12px; height: 12px; line-height: 1; font-size: var(--fs-xs); } .article-card__badge-icon--star { color: #fff; } .article-card__badge-icon--star svg { width: 12px; height: 12px; } /* ---------- Заголовок + дата + время чтения ---------- */ .article-card__head { display: flex; flex-direction: column; gap: var(--s-2); /* 8 */ } .article-card__title { font: var(--t-display-xl-bold-on-base); color: var(--c-text); margin: 0; /* Резервируем место под 2 строки заголовка — карточки на листинге выровнены по высоте независимо от длины title. Длиннее 2 строк обрезается с ellipsis (line-clamp). */ min-height: calc(var(--lh-base) * 2); /* 48px */ display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; /* стандарт + префикс для совместимости */ -webkit-box-orient: vertical; overflow: hidden; } .article-card__meta { display: flex; flex-wrap: wrap; gap: var(--s-4); /* 16 */ font: var(--t-body-xs-on-base); color: var(--c-text-muted); } .article-card__read { display: inline-flex; align-items: center; gap: var(--s-1); } .article-card__read-icon { display: inline-flex; width: 16px; height: 16px; color: currentColor; } .article-card__read-icon svg { width: 16px; height: 16px; } /* ---------- Автор ---------- */ .article-card__author { display: inline-flex; align-items: center; gap: var(--s-2); /* 8 */ } .article-card__author-avatar { width: 32px; height: 32px; border-radius: 50%; border: 0.667px solid var(--c-text); overflow: hidden; background: var(--gradient-photo-fallback); /* fallback на случай битого src */ flex-shrink: 0; } .article-card__author-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .article-card__author-name { font: var(--t-display-base-on-sm); color: var(--c-text); } /* ---------- CTA «Читать» — pill, стретч на ширину ---------- */ .article-card__cta { margin-top: auto; /* прибивает CTA к низу карточки если карточки разной высоты */ display: inline-flex; align-items: center; justify-content: center; padding: var(--s-4); /* 16 */ background: #fff; border: 1px solid var(--c-text-tint-20); border-radius: var(--r-pill); box-shadow: var(--shadow-btn); font: var(--t-body-base-strong); color: var(--c-text); transition: background 0.15s ease; } .article-card__cta:hover { background: var(--c-text-tint-10); } /* ---------- Градиент-палитры fallback'ов (.article-card--g1..g8) ---------- Видны под обложкой, если файл assets/images/blog/article-N.jpg отсутствует. Палитра задаётся в tokens.css как --gradient-blog-N — единый источник правды и для .article-card--gN, и для .article-figure--gN (внутри статьи). */ .article-card--g1 .article-card__cover { background: var(--gradient-blog-1); } .article-card--g2 .article-card__cover { background: var(--gradient-blog-2); } .article-card--g3 .article-card__cover { background: var(--gradient-blog-3); } .article-card--g4 .article-card__cover { background: var(--gradient-blog-4); } .article-card--g5 .article-card__cover { background: var(--gradient-blog-5); } .article-card--g6 .article-card__cover { background: var(--gradient-blog-6); } .article-card--g7 .article-card__cover { background: var(--gradient-blog-7); } .article-card--g8 .article-card__cover { background: var(--gradient-blog-8); } /* ============================================================ SERVICE CATALOG CARD — карточка услуги в каталоге /services/. Фото (16:10) + заголовок (2 строки) + excerpt (2 строки) + подвал: цена (old зачёркнут) + кнопка «Заказать». ============================================================ */ .service-cat-card { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-text-tint-10); border-radius: var(--r-lg); overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; } .service-cat-card:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); } .service-cat-card__cover { display: block; aspect-ratio: 16 / 10; overflow: hidden; } .service-cat-card__img { width: 100%; height: 100%; object-fit: cover; display: block; } .service-cat-card__body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); flex: 1; } .service-cat-card__title { margin: 0; font: var(--t-body-base-strong); } .service-cat-card__title a { color: var(--c-text); text-decoration: none; /* clamp 2 строки */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .service-cat-card__title a:hover { color: var(--c-magenta); } .service-cat-card__excerpt { margin: 0; font: var(--t-body-sm-medium); color: var(--c-text-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .service-cat-card__foot { margin-top: auto; padding-top: var(--s-3); } /* Кнопка-CTA на всю ширину: «Заказать · 875 ₽» (цена через интерпункт). */ .service-cat-card__order { width: 100%; gap: var(--s-1); /* высота — из .btn--md (56) */ } .service-cat-card__dot { opacity: .8; } .service-cat-card__order-price { font-weight: var(--fw-semibold); } .service-cat-card__order-old { font-weight: var(--fw-regular); text-decoration: line-through; opacity: .65; } /* ============================================================ CALLOUT — универсальная magenta-плашка с вертикальной линией слева. Figma: 206:77850 / 206:77858 / 206:77861 (цитаты в статье), 206:77865 (CTA-плашка с заголовком), 90:4371 / 90:4865 (цитата эксперта). Структура: .callout .callout__bar (вертикальная линия 4px, magenta, full-height) .callout__content (gap 16; внутри — title опционально, text) .callout__title (Philosopher Regular 24/32, magenta) ← опционально .callout__text (Inter Medium 16/24, magenta) bg rgba(170,38,146,0.1) — magenta tint. padding 16, radius 16. Когда есть title — это CTA. Когда нет — обычная цитата. ============================================================ */ .callout { display: flex; align-items: stretch; /* линия растягивается по высоте */ gap: var(--s-4); /* 16 */ margin: 0; padding: var(--s-4); /* 16 */ border-radius: var(--r-md); /* 16 */ background: var(--c-card-divider); /* magenta tint 10% — общий токен */ } .callout__bar { flex-shrink: 0; width: 4px; background: var(--c-magenta); border-radius: 2px; /* pill для линии 4px-ширины */ } .callout__content { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s-4); /* 16 — между title и text */ justify-content: center; } .callout__title { margin: 0; font: var(--t-display-xl); color: var(--c-magenta); } .callout__text { margin: 0; font: var(--t-body-sm-medium); color: var(--c-magenta); white-space: pre-wrap; /* сохраняем переносы в длинном CTA-тексте */ } @media (min-width: 960px) { .callout__text { font: var(--t-body-base-medium); } /* Figma 90:4372 — 16/24 Medium */ } /* ============================================================ MODAL — универсальный модал (overlay + dialog). Figma 284:21866 — пример (modal «Оставить отзыв»). Структура: .modal — overlay (position:fixed, заполняет viewport) .modal__backdrop — затемнение, клик закрывает .modal__dialog — белая карточка по центру .modal__close — крестик в правом верхнем углу .modal__body — содержимое (может быть несколько с --user/--anon — переключаются JS-ом) data-modal-state="user" / "anon" на .modal — JS-переключатель версии. ============================================================ */ .modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--s-4); /* 16 — отступ дайлога от краёв */ } .modal[hidden] { display: none; } .modal__backdrop { position: absolute; inset: 0; background: var(--c-overlay-40); } .modal__dialog { position: relative; width: 100%; max-width: 520px; /* единая база; варианты переопределяют только при реальной нужде */ background: #fff; border-radius: var(--r-lg); /* 24 */ padding: var(--s-5) var(--s-4); /* 24 16 */ display: flex; flex-direction: column; gap: var(--s-6); /* 32 — между title и блоками */ } .modal__close { position: absolute; top: var(--s-4); /* 16 */ right: var(--s-4); /* 16 */ width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--c-text); background: transparent; border: 0; cursor: pointer; z-index: 1; } .modal__close svg { width: 24px; height: 24px; } .modal__body { display: flex; flex-direction: column; gap: var(--s-6); /* 32 — между title/звёздами/textarea/кнопкой */ align-items: center; } /* Переключатель версий: показываем body, соответствующий текущему data-state. Дефолт (state не выставлен) — показываем USER. */ .modal[data-modal-state="user"] .modal__body--anon, .modal[data-modal-state="anon"] .modal__body--user, .modal:not([data-modal-state="anon"]) .modal__body--anon { display: none; } .modal__title { margin: 0; font: var(--t-display-xl); color: var(--c-text); text-align: center; } .modal__text { margin: 0; font: var(--t-body-base); color: var(--c-text-muted); text-align: center; } .modal__cta { width: 100%; min-height: 56px; /* крупнее дефолтного .btn (40) — для модалок */ padding: var(--s-4); /* 16 */ } /* Стандартный disabled подменяет курсор и opacity — добавляем понятное состояние когда оценка ещё не выбрана. */ .modal__cta:disabled { cursor: not-allowed; opacity: 0.55; } /* Сообщение «Спасибо за оценку!» — показывается после успешной отправки. */ .modal__thanks { margin: 0; padding: var(--s-5) 0; /* 24 */ font: var(--t-display-xl); color: var(--c-magenta); text-align: center; } /* ============================================================ REVIEW MODAL — специфика формы отзыва. ============================================================ */ .review-stars { display: grid; grid-template-columns: repeat(5, 1fr); /* 5 равных слотов на всю ширину */ width: 100%; color: var(--c-text-tint-20); /* по умолчанию все серые */ } .review-stars__btn { width: 100%; /* ячейка-fill — клик попадает в любую точку колонки */ height: 48px; display: inline-flex; align-items: center; justify-content: center; /* svg остаётся 48×48 по центру */ padding: 0; background: transparent; border: 0; cursor: pointer; color: inherit; /* наследует от .review-stars */ } .review-stars__btn svg { width: 48px; height: 48px; } /* Hover-preview: все звёзды до и включая hover'нутую — золотые. */ .review-stars:hover .review-stars__btn { color: var(--c-star); } .review-stars:hover .review-stars__btn:hover~.review-stars__btn { color: var(--c-text-tint-20); } /* После клика — все звёзды от 1-й до выбранной получают .is-filled и горят золотом. */ .review-stars__btn.is-filled { color: var(--c-star); } .review-textarea-wrap { width: 100%; } .review-textarea { width: 100%; height: 152px; /* Figma 284:21874 */ padding: var(--s-3) var(--s-4); /* 12 16 */ border: 1px solid var(--c-text-tint-10); border-radius: var(--r-md); /* 16 */ font: var(--t-body-base); color: var(--c-text); background: #fff; resize: none; transition: border-color 0.15s ease; } .review-textarea::placeholder { color: var(--c-text-tint-40); } .review-textarea:focus { outline: none; border-color: var(--c-magenta); } /* Блокируем прокрутку страницы пока модалка открыта (выставляет JS). Применяется и к html, и к body — в проекте html уже имеет `overflow-x: clip`, и одного только body.overflow:hidden не хватает, потому что прокрутка идёт через html. */ html:has(body.is-modal-open), body.is-modal-open { overflow: hidden; } /* ============================================================ TOP-UP MODAL — «Пополнение баланса» (Figma 97:17128). ============================================================ */ .modal--top-up .modal__dialog { padding: var(--s-7) var(--s-7) var(--s-6); /* 48 48 32 — низ меньше. Ширина наследуется из базы (520). */ gap: var(--s-5); /* 24 — между секциями */ align-items: stretch; } .modal--top-up .modal__close { top: var(--s-5); right: var(--s-5); } .modal--top-up .modal__title { font: var(--t-display-xl); } /* ---------- Серая карточка баланса ---------- */ .top-up__balance { display: flex; flex-direction: column; gap: var(--s-1); /* 4 */ padding: var(--s-4) var(--s-4); /* 16 16 — Figma 97:17609 */ background: var(--c-text-tint-5); border-radius: var(--r-md); /* 16 */ } .top-up__balance-label { font: var(--t-body-xs-medium); color: var(--c-text-muted); } .top-up__balance-value { font: var(--t-modal-amount); color: var(--c-text); } /* ---------- Группа полей (label + input/select) ---------- */ .top-up__group { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); /* 8 */ } .top-up__label { display: block; font: var(--t-modal-step-title); color: var(--c-text); padding: 0; } /* ---------- Сумма: input + ₽ суффикс ---------- */ .top-up__amount { position: relative; display: flex; align-items: center; } .top-up__amount-input { width: 100%; height: 48px; padding: var(--s-3) var(--s-7) var(--s-3) var(--s-4); /* 12 48 12 16 — место под ₽ */ border: 1px solid var(--c-card-divider); border-radius: var(--r-md); /* 16 */ background: #fff; font: var(--t-body-base); color: var(--c-text); appearance: textfield; } .top-up__amount-input::-webkit-outer-spin-button, .top-up__amount-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .top-up__amount-input::placeholder { color: var(--c-text-tint-40); } .top-up__amount-input:focus { outline: none; border-color: var(--c-magenta); } .top-up__amount-suffix { position: absolute; right: var(--s-4); color: var(--c-text-muted); pointer-events: none; } /* ---------- Чипы быстрого выбора ---------- */ .top-up__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); /* 8 */ margin-top: var(--s-2); } .top-up__chip { padding: var(--s-2) var(--s-3); /* 8 12 */ background: var(--c-text-tint-10); border: 0; border-radius: var(--r-pill); font: var(--t-body-sm-medium); color: var(--c-text); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .top-up__chip:hover { background: var(--c-text-tint-18); } .top-up__chip.is-active { background: var(--c-magenta); color: var(--c-text-on-dark); } /* ---------- Info-плашка с правилами ---------- */ .top-up__hint { display: flex; gap: var(--s-2); /* 8 */ margin: var(--s-2) 0 0; font: var(--t-body-sm); color: var(--c-text-muted); } .top-up__hint-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid var(--c-text-muted); border-radius: 50%; font: var(--t-modal-step-num); font-style: italic; } /* ---------- Способ пополнения (custom dropdown) ---------- */ .top-up__select-wrap { position: relative; } .top-up__select { display: flex; align-items: center; gap: var(--s-2); /* 8 */ width: 100%; height: 48px; padding: var(--s-3) var(--s-4); /* 12 16 */ background: #fff; border: 1px solid var(--c-card-divider); border-radius: var(--r-md); /* 16 */ font: var(--t-body-base); color: var(--c-text); cursor: pointer; text-align: left; transition: border-color 0.15s ease; } .top-up__select:hover, .top-up__select[aria-expanded="true"] { border-color: var(--c-magenta); } .top-up__select-icon { font-size: var(--fs-md); color: var(--c-text-muted); } .top-up__select-text { flex: 1; } .top-up__select-chev { display: inline-flex; width: 16px; height: 16px; color: var(--c-text-muted); transition: transform 0.2s ease; } .top-up__select-chev svg { width: 16px; height: 16px; } .top-up__select[aria-expanded="true"] .top-up__select-chev { transform: rotate(180deg); } .top-up__select-menu { position: absolute; top: calc(100% + var(--s-1)); /* 4 — gap под select */ left: 0; right: 0; z-index: 10; margin: 0; padding: var(--s-1); /* 4 */ list-style: none; background: #fff; border: 1px solid var(--c-card-divider); border-radius: var(--r-md); box-shadow: var(--shadow-btn); display: flex; flex-direction: column; gap: 2px; /* визуальный разделитель опций, не из spacing-шкалы */ max-height: 280px; overflow-y: auto; } .top-up__select-menu[hidden] { display: none; } .top-up__select-option { padding: var(--s-3) var(--s-4); /* 12 16 */ border-radius: var(--r-sm); /* 8 */ font: var(--t-body-base); color: var(--c-text); cursor: pointer; transition: background 0.12s ease, color 0.12s ease; outline: none; } .top-up__select-option:hover, .top-up__select-option:focus-visible { background: var(--c-text-tint-10); } .top-up__select-option.is-selected { background: var(--c-pink-soft); color: var(--c-magenta); font: var(--t-body-base-medium); /* Medium-вариант selected */ } /* ---------- Submit-кнопка двухстрочная ---------- */ .top-up__submit { display: flex; flex-direction: column; gap: var(--s-3); /* 12 */ } .top-up__submit-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: 64px; padding: var(--s-2) var(--s-4); /* 8 16 */ line-height: 1.2; /* layout-tweak: компенсация UA-lh для двух flex-строк */ } .top-up__submit-label { font: var(--t-body-base-strong); } /* 16/24 Semibold (от .btn) */ .top-up__submit-amount { font: var(--t-body-sm-strong); opacity: 0.85; } /* 14/20 Semibold */ /* ---------- Custom checkbox (magenta checked) ---------- */ .top-up__save { display: inline-flex; align-items: center; gap: var(--s-2); /* 8 */ cursor: pointer; font: var(--t-body-sm-on-base); color: var(--c-text); } .top-up__save-input { position: absolute; opacity: 0; pointer-events: none; } .top-up__save-box { width: 20px; height: 20px; border: 1px solid var(--c-text-tint-20); border-radius: 4px; /* off-scale — checkbox standard */ flex-shrink: 0; position: relative; background: #fff; transition: background 0.15s ease, border-color 0.15s ease; } .top-up__save-input:checked+.top-up__save-box { background: var(--c-magenta); border-color: var(--c-magenta); } .top-up__save-input:checked+.top-up__save-box::after { content: ""; position: absolute; inset: 0; background: no-repeat center / 12px 12px; background-image: url("data:image/svg+xml;utf8,"); } .top-up__note { margin: 0; font: var(--t-body-sm); color: var(--c-text-muted); text-align: center; } .top-up__legal { margin: 0; font: var(--t-body-xs); color: var(--c-text-muted); text-align: center; } /* ---------- Переключение шагов (data-step="amount|confirm") ---------- */ .top-up__step { display: none; flex-direction: column; gap: var(--s-5); } .modal--top-up[data-step="amount"] .top-up__step--amount, .modal--top-up[data-step="confirm"] .top-up__step--confirm, .modal--top-up[data-step="success"] .top-up__step--success, .modal--top-up[data-step="fail"] .top-up__step--fail { display: flex; } /* Инлайн-ошибка суммы */ .top-up__error { margin: calc(-1 * var(--s-3)) 0 0; font: var(--t-body-sm-medium); color: var(--c-magenta); } /* ---------- Экраны результата (success / fail) ---------- */ .top-up-result { align-items: center; text-align: center; gap: var(--s-2); } .top-up-result__icon-wrap { margin-bottom: var(--s-2); } .top-up-result__actions { margin-top: var(--s-3); } .top-up-result__icon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; animation: top-up-pop .35s ease both; } .top-up-result__icon svg { width: 38px; height: 38px; } /* успех — зелёный, ошибка — мягко-красный (off-scale rgba для tint'ов) */ .top-up-result__icon--ok { background: rgba(8, 184, 102, 0.12); color: var(--c-online); } .top-up-result__icon--fail { background: rgba(229, 72, 77, 0.12); color: #e5484d; } @keyframes top-up-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .top-up-result__icon { animation: none; } } .top-up-result__text { margin: 0; font: var(--t-body-base); color: var(--c-text-muted); } /* Вторичное действие — вид как у .auth-trouble: full-width, bold, тёмный текст. */ .top-up-result__link { display: block; width: 100%; padding: var(--s-3); border: 0; background: transparent; border-radius: var(--r-md); cursor: pointer; font: var(--t-body-base-strong); color: var(--c-text); text-align: center; text-decoration: none; transition: background-color .15s ease; } .top-up-result__link:hover { background: var(--c-text-tint-5); } /* Крупная сумма зачисления */ .top-up-result__amount { margin: 0; font: var(--t-display-2xl-on-xl); /* 32 */ color: var(--c-magenta); } /* Кнопки результата — на всю ширину (высота — из .btn--md). */ .top-up-result__actions { width: 100%; } .top-up-result__actions .btn { width: 100%; justify-content: center; } /* Конфетти на успехе — лёгкий «взрыв» точек вокруг иконки */ .top-up-result__icon-wrap { position: relative; display: inline-flex; } .top-up-confetti { position: absolute; inset: 0; pointer-events: none; } .top-up-confetti i { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 2px; opacity: 0; animation: top-up-burst .65s ease-out .15s both; } .top-up-confetti i:nth-child(1) { --tx: -52px; --ty: -22px; background: var(--c-magenta); } .top-up-confetti i:nth-child(2) { --tx: 48px; --ty: -30px; background: var(--c-star); } .top-up-confetti i:nth-child(3) { --tx: -38px; --ty: 34px; background: var(--c-online); } .top-up-confetti i:nth-child(4) { --tx: 44px; --ty: 28px; background: var(--c-banner); } .top-up-confetti i:nth-child(5) { --tx: -8px; --ty: -54px; background: var(--c-magenta-border, #dd35ff); } .top-up-confetti i:nth-child(6) { --tx: 14px; --ty: 52px; background: var(--c-magenta); } .top-up-confetti i:nth-child(7) { --tx: -56px; --ty: 8px; background: var(--c-star); } .top-up-confetti i:nth-child(8) { --tx: 56px; --ty: -4px; background: var(--c-online); } @keyframes top-up-burst { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 35% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1) rotate(35deg); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .top-up-confetti i { animation: none; opacity: 0; } } /* ============================================================ STEP 2 — таймер + заказ + кнопка «Банковской картой» (Figma 97:17765) ============================================================ */ /* Magenta-плашка с обратным отсчётом (Figma 97:17933). Progress-bar заполняет плашку с 0 до 100% за 10 минут: --top-up-progress = 0 → width 0 (полоса пустая) --top-up-progress = 1 → width 100% (полностью magenta) Иконка фиксирована слева; вторая (белая) копия лежит внутри полосы — она показывается через overflow:hidden ровно тогда, когда magenta до неё дошла. */ .top-up-timer { position: relative; display: flex; align-items: center; padding: var(--s-4); /* 16 */ padding-left: 64px; /* место под иконку слева */ background: var(--c-text-tint-5); border-radius: var(--r-md); /* 16 */ overflow: hidden; min-height: 56px; --top-up-progress: 0; } .top-up-timer__progress { position: absolute; inset: 0 auto 0 0; width: calc(100% * var(--top-up-progress, 0)); background: var(--c-magenta); transition: width 1s linear; pointer-events: none; overflow: hidden; } .top-up-timer__icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; } .top-up-timer__icon svg { width: 24px; height: 24px; } .top-up-timer__icon--dark { color: var(--c-text); z-index: 1; } .top-up-timer__icon--white { color: var(--c-text-on-dark); } .top-up-timer__text { position: relative; z-index: 1; font: var(--t-body-base-strong); color: var(--c-text); } /* Карточка «Услуги сервиса» (Figma 97:17767) */ .top-up-order { display: flex; align-items: center; gap: var(--s-5); /* 24 */ padding: var(--s-4); /* 16 */ background: var(--c-text-tint-5); border: 1px solid var(--c-card-divider); border-radius: var(--r-md); /* 16 */ } .top-up-order__main { flex: 1; display: flex; flex-direction: column; gap: var(--s-2); /* 8 */ } .top-up-order__label { font: var(--t-body-xs-medium); color: var(--c-text-muted); } .top-up-order__value { font: var(--t-body-xl); color: var(--c-text); } .top-up-order__brand { font: var(--t-modal-heading); color: var(--c-text); letter-spacing: 0.04em; } /* Кнопка «Банковской картой» — стандартный primary, без двух строк */ .top-up-pay-btn { width: 100%; /* высота — из .btn--md (56) */ } .top-up__note--left { text-align: left; } /* ---------- Mobile-адаптация ---------- padding-top 48: крестик 24×24 в позиции top 16 + 8px зазор до содержимого. */ @media (max-width: 480px) { .modal--top-up .modal__dialog { padding: var(--s-7) var(--s-4) var(--s-5); } /* 48 16 24 */ .modal--top-up .modal__close { top: var(--s-4); right: var(--s-4); } } /* ============================================================ CATALOG MODAL — full-screen вариант для mobile-фильтров и сортировки (≤959). Sticky-header (title + Сбросить + ✕) и sticky-footer (Применить N экспертов) с прокручиваемой серединой. На ≥960 эти модалки скрыты (триггеры тоже). ============================================================ */ .modal--catalog { padding: 0; } .modal--catalog__dialog { max-width: none; width: 100%; height: 100%; border-radius: 0; padding: 0; gap: 0; display: grid; grid-template-rows: auto 1fr auto; /* head | body | foot */ overflow: hidden; } .modal--catalog__head { display: flex; align-items: center; gap: var(--s-3); /* 12 */ padding: var(--s-4) var(--s-4); /* 16 16 */ border-bottom: 1px solid var(--c-divider-soft); flex-shrink: 0; } .modal--catalog__head .modal__title { text-align: left; flex: 1 1 auto; /* font наследуется от базового .modal__title (--t-display-xl, 24/32) */ } /* Reset-кнопка внутри head — текстовая, magenta. */ .modal--catalog__reset { flex-shrink: 0; padding: 0 var(--s-2); border: 0; background: transparent; font: var(--t-body-sm-medium); color: var(--c-magenta); cursor: pointer; } .modal--catalog__head .modal__close { position: static; /* не абсолютное в head — flex */ flex-shrink: 0; } .modal--catalog__body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--s-4); /* 16 */ display: flex; flex-direction: column; gap: var(--s-5); /* 24 — между filters__group */ } .modal--catalog__foot { flex-shrink: 0; padding: var(--s-4); /* 16 */ border-top: 1px solid var(--c-divider-soft); background: #fff; } .modal--catalog__foot .modal__cta { min-height: 56px; } /* ============================================================ EXPERT-LEVELS MODAL — «Уровни экспертов». Список 5 уровней: слева — бейдж .tag, справа — описание. У текущего уровня (data-level совпадает с триггером) — magenta-bordered подложка. ============================================================ */ .modal--expert-levels .modal__dialog { padding: var(--s-7) var(--s-5) var(--s-5); /* 48 24 24 — место под крестик сверху. Ширина из базы. */ gap: var(--s-5); /* 24 */ align-items: stretch; } .modal--expert-levels .modal__title { text-align: left; } .expert-levels-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); /* 12 */ } .expert-level { display: flex; flex-direction: column; align-items: flex-start; /* pill компактный, не на всю ширину */ gap: var(--s-2); /* 8 — pill → текст */ padding: var(--s-3); /* 12 */ border-radius: var(--r-md); border: 1px solid transparent; transition: border-color .15s ease, background .15s ease; } .expert-level.is-current { border-color: var(--c-magenta); background: var(--c-pink-softer); } .expert-level__desc { margin: 0; font: var(--t-body-sm); color: var(--c-text); } @media (max-width: 480px) { .modal--expert-levels .modal__dialog { padding: var(--s-7) var(--s-4) var(--s-4); } } /* ============================================================ AUTH MODAL — регистрация / вход (Figma 97:11219 / 91:7651 / 91:8457 / 94:9030) 4 шага в одном контейнере, активный — по data-step на .modal. ============================================================ */ .modal--auth .modal__dialog { max-width: 480px; /* Figma */ padding: var(--s-7); /* 48 — Figma */ gap: var(--s-6); /* 32 — Figma */ align-items: stretch; } .modal--auth .modal__title { font: var(--t-display-xl); text-align: center; } /* Видим только активный pane. Управляем через CSS-display, без атрибута hidden на самих pane'ах — иначе он конфликтует со сменой data-step. */ .auth-step { display: none; flex-direction: column; gap: var(--s-4); align-items: stretch; } .modal--auth[data-step="contact"] .auth-step--contact, .modal--auth[data-step="code"] .auth-step--code, .modal--auth[data-step="trouble"] .auth-step--trouble, .modal--auth[data-step="profile"] .auth-step--profile, .modal--auth[data-step="welcome"] .auth-step--welcome { display: flex; } /* Back-arrow — только на шаге code. На остальных скрыт. */ .modal--auth__back { position: absolute; top: var(--s-4); left: var(--s-4); width: 24px; height: 24px; display: none; align-items: center; justify-content: center; color: var(--c-text); background: transparent; border: 0; cursor: pointer; z-index: 1; } .modal--auth[data-step="code"] .modal--auth__back, .modal--auth[data-step="trouble"] .modal--auth__back { display: inline-flex; } .modal--auth__back svg { width: 24px; height: 24px; } /* На welcome шагe — крестик может быть один (нет back). */ .modal--auth .modal__close { top: var(--s-4); right: var(--s-4); } /* ---------- Шаг 1: contact ---------- */ .modal--auth__brand { font: var(--t-modal-balance-big); color: var(--c-text); text-align: center; letter-spacing: 0.04em; } .auth-tabs { display: flex; gap: var(--s-2); /* 8 */ padding: var(--s-1); /* 4 */ border: 1px solid var(--c-card-divider); border-radius: var(--r-md); /* 16 */ } .auth-tab { flex: 1 1 0; min-height: 38px; padding: 10px; /* off-scale 10 — Figma */ border: 0; background: #fff; border-radius: var(--r-xs); /* Figma */ font: var(--t-body-sm-medium-on-snug); color: var(--c-text); cursor: pointer; transition: background .15s ease, color .15s ease; } .auth-tab--active { background: var(--c-magenta-tint-20); color: var(--c-magenta); } /* Inline-input (телефон с RU-префиксом или email solo). */ .auth-field { display: flex; align-items: center; gap: var(--s-2); /* 8 */ padding: var(--s-3) var(--s-4); /* 12 16 */ border: 1px solid var(--c-card-divider); border-radius: var(--r-md); /* 16 */ background: #fff; cursor: text; transition: border-color .15s ease; } .auth-field:focus-within { border-color: var(--c-magenta); } .auth-field[hidden] { display: none; } .auth-field__flag { flex-shrink: 0; display: inline-flex; align-items: center; width: 24px; height: 24px; overflow: hidden; border-radius: 50%; } .auth-field__flag svg { width: 24px; height: 24px; display: block; } .auth-field__prefix { flex-shrink: 0; font: var(--t-body-base); color: var(--c-text); } .auth-field__input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; padding: 0; background: transparent; font: var(--t-body-base); color: var(--c-text); } .auth-field__input::placeholder { color: var(--c-text-tint-40); } .modal--auth .modal__cta { min-height: 56px; } .auth-fine { margin: 0; font: var(--t-body-sm-on-snug); color: var(--c-text-muted); text-align: center; } .auth-fine--left { text-align: left; } .auth-fine__link { color: var(--c-text); text-decoration: underline; } .auth-fine__link--btn { background: transparent; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--c-magenta); text-decoration: underline; } /* ---------- Шаг 2: code (Figma 91:7655 — flex с gap 16, инпуты 64×72) ---------- */ .auth-code { display: flex; gap: var(--s-4); /* 16 — Figma 91:7655 */ justify-content: center; } .auth-code__digit { flex: 0 0 64px; /* фиксированная ширина 64, без сжатия */ width: 64px; height: 72px; padding: 0; text-align: center; font: var(--t-modal-number); color: var(--c-text); background: #fff; border: 1px solid var(--c-card-divider); /* rgba(40,34,39,0.1) */ border-radius: var(--r-md); outline: none; transition: background .15s ease, border-color .15s ease; } .auth-code__digit:focus { border-color: var(--c-magenta); background: #fff; } /* Заполненное состояние (Figma 91:7659): серый фон + текст обычного цвета. */ .auth-code__digit.is-filled { background: var(--c-text-tint-5); } /* Focus важнее filled — синяя/магента-рамка при выделении на заполненной. */ .auth-code__digit.is-filled:focus { background: #fff; border-color: var(--c-magenta); } /* «У меня проблемы со входом» — full-width button, тёмный bold-текст без подчёркивания. Figma 97:15047 — padding 12 со всех сторон, radius 16. */ .auth-trouble { width: 100%; padding: var(--s-3); /* 12 — Figma */ border: 0; background: transparent; border-radius: var(--r-md); /* 16 */ cursor: pointer; font: var(--t-body-base-strong); color: var(--c-text); text-align: center; transition: background .15s ease; } .auth-trouble:hover { background: var(--c-text-tint-5); } /* ---------- Шаг 2b: trouble (помощь со входом) ---------- */ .auth-trouble-list { margin: 0; padding-left: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); font: var(--t-body-sm-medium); color: var(--c-text-muted); } .auth-trouble-contacts { display: flex; flex-direction: column; gap: var(--s-1); padding-top: var(--s-3); border-top: 1px solid var(--c-text-tint-10); text-align: center; } .auth-trouble-contacts__lead { font: var(--t-body-sm-medium); color: var(--c-text-muted); } .auth-trouble-contacts__link { font: var(--t-body-sm-strong); color: var(--c-magenta); text-decoration: none; } .auth-trouble-contacts__link:hover { text-decoration: underline; } /* ---------- Шаг 3: profile ---------- */ .auth-profile__head { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); /* 8 */ } .auth-gift { display: inline-flex; align-items: center; gap: 6px; /* off-scale — micro-gap */ padding: 2px 12px; /* off-scale — pill-tight */ border-radius: var(--r-pill); background: var(--c-card-divider); color: var(--c-magenta); font: var(--t-body-sm-medium); } .auth-gift__icon { font-size: var(--fs-base); line-height: 1; } .auth-form-field { display: flex; flex-direction: column; gap: var(--s-2); /* 8 — label → input */ } .auth-form-field__label { font: var(--t-body-base-medium); color: var(--c-text); } .auth-form-field__input { width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4); /* 12 16 */ border: 1px solid var(--c-card-divider); border-radius: var(--r-md); background: #fff; font: var(--t-body-base); color: var(--c-text); outline: none; transition: border-color .15s ease; display: flex; align-items: center; gap: var(--s-2); /* 8 */ box-sizing: border-box; } .auth-form-field__input:focus, .auth-form-field__input:focus-within { border-color: var(--c-magenta); } .auth-form-field__input::placeholder { color: var(--c-text-tint-40); } /* Phone / date — wrapper-вариант: содержит флаг/префикс/input/suffix. */ .auth-form-field__inner-input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; padding: 0; background: transparent; font: inherit; /* наследует --t-body-md от .auth-form-field__input */ color: var(--c-text); } .auth-form-field__inner-input::placeholder { color: var(--c-text-tint-40); } .auth-form-field__suffix { flex-shrink: 0; color: var(--c-text-tint-40); font: var(--t-body-sm); } .auth-form-field__hint { font: var(--t-body-sm-on-snug); color: var(--c-text-muted); } /* Bullet-список под чекбоксом согласия на шаге profile. */ .auth-bullets { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-1); /* 4 */ } .auth-bullets li { position: relative; padding-left: var(--s-4); /* 16 — место под буллет */ font: var(--t-body-sm-on-snug); color: var(--c-text-muted); } .auth-bullets li::before { content: "•"; position: absolute; left: var(--s-1); color: var(--c-text-muted); } /* Кастомный checkbox согласия (magenta, как в top-up__save). */ .auth-consent { display: flex; gap: var(--s-2); /* 8 */ cursor: pointer; font: var(--t-body-sm-on-snug); color: var(--c-text); } .auth-consent__input { position: absolute; opacity: 0; pointer-events: none; } .auth-consent__box { width: 20px; height: 20px; flex-shrink: 0; border: 1px solid var(--c-text-tint-20); border-radius: 4px; /* off-scale 4 — checkbox */ background: #fff; position: relative; transition: background .15s ease, border-color .15s ease; } .auth-consent__input:checked+.auth-consent__box { background: var(--c-magenta); border-color: var(--c-magenta); } .auth-consent__input:checked+.auth-consent__box::after { content: ""; position: absolute; inset: 0; background: no-repeat center / 12px 12px; background-image: url("data:image/svg+xml;utf8,"); } .auth-consent__text { flex: 1 1 auto; } /* ---------- Шаг 4: welcome ---------- */ .auth-step--welcome { align-items: center; text-align: center; } .auth-welcome__check { width: 80px; height: 80px; border-radius: 50%; background: var(--c-online); /* #08b866 — зелёный */ display: inline-flex; align-items: center; justify-content: center; } /* ---------- Mobile-адаптация ---------- */ @media (max-width: 480px) { .modal--auth .modal__dialog { padding: var(--s-7) var(--s-4) var(--s-5); } .auth-code { gap: var(--s-2); } /* 8 — на узких чтобы 4·56+3·8 = 248 влезало */ .auth-code__digit { flex-basis: 56px; width: 56px; height: 64px; } .modal--auth__brand { font-size: var(--fs-2xl); } /* Welcome — компактная карточка по центру, не full-width (Figma m5). */ .modal--auth[data-step="welcome"] .modal__dialog { max-width: 320px; padding: var(--s-5) var(--s-5) var(--s-5); /* 24 со всех сторон */ gap: var(--s-4); /* 16 — компактнее */ } .auth-welcome__check { width: 64px; height: 64px; } .auth-welcome__check svg { width: 32px; height: 32px; } } /* ============================================================ BOOKING MODAL — «Запись» (user-режим). 2 таба: now / later. ============================================================ */ .modal--booking .modal__dialog { padding: var(--s-7) var(--s-5) var(--s-5); /* 48 24 24 */ gap: var(--s-5); /* 24 */ align-items: stretch; } /* ---------- Header: эксперт-блок ---------- */ .booking-expert { display: flex; align-items: center; gap: var(--s-3); /* 12 */ } .booking-expert__photo { width: 64px; height: 64px; border-radius: 50%; background-color: var(--c-text-tint-10); background-position: center; background-size: cover; flex-shrink: 0; } .booking-expert__info { flex: 1; min-width: 0; } .booking-expert__name { margin: 0; text-align: left; font: var(--t-display-xl); } .booking-expert__meta { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; margin-top: var(--s-1); font: var(--t-body-sm); color: var(--c-text-muted); } .booking-expert__rating { color: var(--c-star); font: var(--t-body-sm-strong); } .booking-expert__status::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: currentColor; vertical-align: middle; } .booking-expert__status[data-status="online"] { color: var(--c-online); } .booking-expert__status[data-status="offline"] { color: var(--c-text-muted); } /* ---------- Pill-табы ---------- */ .booking-tabs { display: flex; gap: var(--s-2); /* 8 */ padding: var(--s-1); /* 4 */ border: 1px solid var(--c-card-divider); border-radius: var(--r-md); } .booking-tab { flex: 1 1 0; min-height: 38px; padding: 10px; /* off-scale 10 — Figma */ border: 0; background: #fff; border-radius: var(--r-xs); font: var(--t-body-sm-medium-on-snug); color: var(--c-text); cursor: pointer; transition: background .15s ease, color .15s ease; } .booking-tab--active { background: var(--c-magenta-tint-20); color: var(--c-magenta); } .booking-tab[disabled] { opacity: 0.4; cursor: not-allowed; } /* ---------- Pane (only active visible) ---------- */ .booking-pane { display: none; flex-direction: column; gap: var(--s-4); } .modal--booking[data-tab="now"] .booking-pane--now, .modal--booking[data-tab="later"] .booking-pane--later, .modal--booking[data-tab="success"] .booking-pane--success { display: flex; } /* На шаге success — скрываем header-эксперта и pill-табы (большой layout success'a). */ .modal--booking[data-tab="success"] .booking-expert, .modal--booking[data-tab="success"] .booking-tabs { display: none; } /* ---------- Section ---------- */ .booking-section { display: flex; flex-direction: column; gap: var(--s-2); /* 8 — label → controls */ } .booking-section__title { font: var(--t-body-sm-medium-on-snug); color: var(--c-text-muted); } /* ---------- Format radio-cards ---------- */ .booking-formats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); /* 8 */ } .booking-format input { position: absolute; opacity: 0; pointer-events: none; } .booking-format__box { display: flex; align-items: center; justify-content: center; gap: var(--s-2); height: 48px; border: 1px solid var(--c-card-divider); border-radius: var(--r-md); cursor: pointer; font: var(--t-body-base-medium); color: var(--c-text); transition: border-color .15s ease, background .15s ease, color .15s ease; } .booking-format input:checked+.booking-format__box { border-color: var(--c-magenta); background: rgba(170, 38, 146, 0.08); /* magenta @ 8% — нет токена */ color: var(--c-magenta); } .booking-format__icon { width: 20px; height: 20px; display: inline-flex; align-items: center; } .booking-format__icon svg { width: 20px; height: 20px; } /* ---------- Price ---------- */ .booking-price { display: flex; align-items: baseline; gap: var(--s-2); } .booking-price__main { font: var(--t-booking-price); /* Semibold 24/24 — большая цена */ color: var(--c-text); } .booking-price__old { font: var(--t-body-sm); color: var(--c-text-muted); text-decoration: line-through; } .booking-price--total { justify-content: space-between; padding: var(--s-3) var(--s-4); background: var(--c-text-tint-5); border-radius: var(--r-md); } .booking-price--total .booking-price__main { font: var(--t-booking-price-total); } /* 20/24 в total */ /* ---------- Gift pill (1-я бесплатно) ---------- */ .booking-gift { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; /* off-scale — micro-gap */ padding: 2px 12px; /* off-scale — pill-tight */ border-radius: var(--r-pill); background: var(--c-card-divider); color: var(--c-magenta); font: var(--t-body-sm-medium); } .booking-gift[hidden] { display: none; } /* ---------- Balance row ---------- */ .booking-balance { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); background: var(--c-text-tint-5); border-radius: var(--r-md); font: var(--t-body-sm); color: var(--c-text-muted); } .booking-balance__value { flex: 1; font: var(--t-body-sm-strong); color: var(--c-text); } .booking-balance__topup { border: 0; background: transparent; color: var(--c-magenta); font: var(--t-body-sm-medium); cursor: pointer; } /* ---------- Days scroller ---------- */ .booking-days { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-1); /* место под scrollbar */ scrollbar-width: thin; } .booking-day { flex: 0 0 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: var(--s-2); border: 1px solid var(--c-card-divider); border-radius: var(--r-md); background: #fff; cursor: pointer; color: var(--c-text); transition: border-color .15s ease, background .15s ease, color .15s ease; } .booking-day__weekday { font: var(--t-body-xs); color: var(--c-text-muted); text-transform: capitalize; } .booking-day__date { font: var(--t-modal-step-title); /* Semibold 18 — крупное число дня */ } .booking-day.is-active { border-color: var(--c-magenta); background: var(--c-magenta); color: #fff; } .booking-day.is-active .booking-day__weekday { color: rgba(255, 255, 255, 0.7); /* white @ 70% — нет токена */ } /* ---------- Duration pills ---------- */ .booking-durations { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); } .booking-duration input { position: absolute; opacity: 0; pointer-events: none; } .booking-duration__box { display: flex; align-items: center; justify-content: center; height: 40px; border: 1px solid var(--c-card-divider); border-radius: var(--r-pill); background: #fff; cursor: pointer; font: var(--t-body-sm-medium); color: var(--c-text); transition: border-color .15s ease, background .15s ease, color .15s ease; } .booking-duration input:checked+.booking-duration__box { border-color: var(--c-magenta); background: var(--c-magenta); color: #fff; } /* ---------- Time slots ---------- */ .booking-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--s-2); } .booking-slot { height: 40px; border: 1px solid var(--c-card-divider); border-radius: var(--r-md); background: #fff; cursor: pointer; font: var(--t-body-sm-medium); color: var(--c-text); transition: border-color .15s ease, background .15s ease, color .15s ease; } .booking-slot:hover { border-color: var(--c-magenta); } .booking-slot.is-active { border-color: var(--c-magenta); background: var(--c-magenta); color: #fff; } .booking-slot[disabled] { opacity: 0.35; cursor: not-allowed; } .booking-slots__empty { grid-column: 1 / -1; padding: var(--s-3) 0; text-align: center; font: var(--t-body-sm); color: var(--c-text-muted); } /* ---------- Success pane ---------- */ .booking-pane--success { align-items: center; text-align: center; gap: var(--s-3); /* 12 */ } .booking-success__photo { width: 128px; height: 128px; border-radius: 50%; background-color: var(--c-text-tint-10); background-position: center; background-size: cover; } .booking-success__name { margin: 0; font: var(--t-modal-title-lg); color: var(--c-text); } .booking-success__title { margin: 0; font: var(--t-body-sm); color: var(--c-text-muted); } .booking-success__status { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); font: var(--t-body-base-medium); background: var(--c-text-tint-5); color: var(--c-text); } .booking-pane--success[data-status="connecting"] .booking-success__status { background: var(--c-card-divider); color: var(--c-magenta); } .booking-pane--success[data-status="scheduled"] .booking-success__status { background: rgba(8, 184, 102, 0.1); /* online @ 10% — нет токена */ color: var(--c-online); } .booking-pane--success[data-status="scheduled"] .booking-success__spinner { display: none; } .booking-success__spinner { width: 18px; height: 18px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: booking-success-spin 0.9s linear infinite; } @keyframes booking-success-spin { to { transform: rotate(360deg); } } .booking-success__detail { margin: 0; font: var(--t-body-sm); color: var(--c-text-muted); max-width: 360px; } .booking-success__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: center; margin-top: var(--s-2); } /* ---------- Mobile ---------- */ @media (max-width: 480px) { .modal--booking .modal__dialog { padding: var(--s-7) var(--s-4) var(--s-4); } .booking-success__photo { width: 96px; height: 96px; } } /* ============================================================ MODAL — Детали заказа (открывается с /lk/orders/) ============================================================ */ .modal--lk-order .modal__dialog { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: var(--s-5); /* 24 */ } .lk-order-modal__head { display: flex; gap: var(--s-4); /* 16 */ align-items: center; } .lk-order-modal__photo { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; background: var(--c-text-tint-10); flex-shrink: 0; } .lk-order-modal__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .lk-order-modal__heading { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; } .lk-order-modal__name { margin: 0; font: var(--t-display-xl); color: var(--c-text); } /* 24/32 Philosopher Regular */ .lk-order-modal__theme { margin: 0; font: var(--t-body-sm); color: var(--c-text-muted); } /* 14/20 */ .lk-order-modal__details { margin: 0; display: flex; flex-direction: column; gap: var(--s-3); /* 12 */ } .lk-order-modal__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); } .lk-order-modal__row dt { margin: 0; font: var(--t-body-sm); color: var(--c-text-muted); } /* 14/20 */ .lk-order-modal__row dd { margin: 0; font: var(--t-body-sm-medium); color: var(--c-text); text-align: right; } /* Статус — цветной пилл */ .lk-order-modal__status { display: inline-flex; align-items: center; gap: var(--s-2); /* 8 */ padding: var(--s-1) var(--s-3); /* 4 12 */ border-radius: var(--r-pill); font: var(--t-body-xs-medium); /* 12/16 Medium */ background: var(--c-text-tint-10); } .lk-order-modal__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .lk-order-modal__status--completed { color: var(--c-online); background: rgba(8, 184, 102, 0.10); } /* online @ 10% */ .lk-order-modal__status--scheduled { color: var(--c-magenta); background: var(--c-magenta-tint-10); } .lk-order-modal__status--in-progress { color: #b87d08; background: rgba(184, 125, 8, 0.10); } /* busy/amber, нет токена */ .lk-order-modal__status--cancelled { color: var(--c-text-muted); background: var(--c-text-tint-10); } .lk-order-modal__actions { display: flex; flex-direction: column; gap: var(--s-2); /* 8 */ margin-top: var(--s-4); /* 16 — отступ от details */ } /* Все кнопки в actions — full-width, одного размера */ .lk-order-modal__actions>.btn { width: 100%; min-height: 48px; } /* Если все кнопки hidden — actions не оставляет визуальный зазор */ .lk-order-modal__actions:not(:has(button:not([hidden]))) { display: none; } /* ============================================================ MODAL — Подтверждение удаления аккаунта ============================================================ */ .modal--delete-account .modal__dialog { display: flex; flex-direction: column; gap: var(--s-3); max-width: 480px; width: 100%; } .delete-account-modal__reasons { margin: 0; padding: var(--s-3) var(--s-5); /* 12 24 */ list-style: disc; background: var(--c-danger-tint-10); border-radius: var(--r-md); display: flex; flex-direction: column; gap: var(--s-2); font: var(--t-body-sm); color: var(--c-text); } .delete-account-modal__reasons li { padding-left: var(--s-1); } .delete-account-modal__actions { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); } .delete-account-modal__cancel { width: 100%; min-height: 48px; } .delete-account-modal__confirm { width: 100%; min-height: 44px; border: 0; background: transparent; font: var(--t-body-sm-medium); color: var(--c-danger); cursor: pointer; } .delete-account-modal__confirm:hover { text-decoration: underline; } /* ============================================================ CARD — общая бордюрная карточка-контейнер. Figma 95:10438 / 95:9852 / 95:10466 / 95:10473 / 95:10551 — все виджеты ЛК используют один и тот же базовый стиль (border + radius 16 + 16/24 padding). Класс задуман как переиспользуемый: всё, что нужно от карточки — это белый фон, тонкий бордер и одинаковые внутренние отступы. Сверху накручиваем модификаторы (.lk-card--balance и т.п.) только для специфичной раскладки содержимого. ============================================================ */ .card-bordered { display: flex; flex-direction: column; gap: var(--s-4); /* 16 */ padding: var(--s-4) var(--s-5); /* 16 24 — Figma */ background: #fff; border: 1px solid var(--c-card-divider); /* rgba(170,38,146,0.1) — общий бордер дизайн-системы */ border-radius: var(--r-md); /* 16 */ } /* ============================================================ LINK-MORE — текстовая «ссылка-кнопка» с chevron справа. Figma 95:10563 / 95:10558 / 95:10475 / 95:10553 (все «Подробнее» на дашборде ЛК). Структура: или