/* AMAI — стили и дизайн-токены. * Токены (цвета/шрифты/радиусы) лежат в :root ниже — меняйте дизайн здесь. * Утилитарные классы Tailwind задаются в разметке; семантические цвета * бренда определены в tailwind.config внутри index.html. * * ТЕМИЗАЦИЯ (Светлая / Тёмная / Розовая / Голубая / Лайм / Белая): * Каждый цвет существует в двух видах: триплет «R G B» (--x-rgb, его читает * tailwind.config для поддержки классов с прозрачностью вроде bg-brand-gold/20) * и готовый цвет (--x) для правил в этом файле. Светлая (бежевая) — :root, * остальные — html[data-theme="…"]. Классы разметки НЕ меняются. */ :root { /* Vitality Lux — светлая палитра (white page bg × champagne × emerald) */ --gold-rgb: 201 162 39; /* champagne gold */ --gold-deep-rgb: 216 180 74; /* luminous gold highlight */ --gold-soft-rgb: 184 168 120; /* приглушённое золото */ --gold-tint-rgb: 245 238 216; /* soft gold background */ --ink-rgb: 23 23 23; /* deep graphite */ --ink-2-rgb: 45 45 45; /* ink hover */ --bg-rgb: 252 251 249; /* warm ivory — softer */ --bg-2-rgb: 250 249 247; /* soft champagne tone — lighter */ --line-rgb: 232 229 220; /* warm borders */ --line-2-rgb: 218 214 203; /* borders stronger */ --line-3-rgb: 200 196 186; /* borders hover */ --muted-rgb: 133 133 133; /* secondary text */ --muted-2-rgb: 102 102 102; /* readable gray */ --faint-rgb: 180 178 172; /* faintest text */ --green-rgb: 15 168 120; /* emerald spark (nav Capital) */ --emerald-rgb: 15 168 120; /* vitality emerald */ --emerald-deep-rgb: 22 168 121; /* emerald accent */ --emerald-tint-rgb: 234 246 241; /* soft emerald wash */ --rose-rgb: 225 29 72; /* danger / warning */ --rose-tint-rgb: 253 236 238; /* pale rose fill */ /* Bio indicator semantic colors — stable across accent themes (pink/blue/lime) */ --bio-dopamine-rgb: 201 162 39; --bio-dopamine-deep-rgb: 216 180 74; --bio-serotonin-rgb: 15 168 120; --bio-serotonin-deep-rgb: 22 168 121; --bio-oxytocin-rgb: 236 72 153; --bio-oxytocin-deep-rgb: 244 114 182; --bio-endorphin-rgb: 37 99 235; --bio-endorphin-deep-rgb: 96 165 250; --bio-melatonin-rgb: 76 29 149; --bio-melatonin-deep-rgb: 124 58 237; --bio-estrogen-rgb: 201 162 39; --bio-estrogen-deep-rgb: 216 180 74; --bio-progesterone-rgb: 15 168 120; --bio-progesterone-deep-rgb: 22 168 121; /* Homeostasis ring semantic colors — stable across accent themes */ --homeo-balance-rgb: 15 168 120; --homeo-balance-deep-rgb: 22 168 121; --homeo-caution-rgb: 201 162 39; --homeo-caution-deep-rgb: 216 180 74; --homeo-alert-rgb: 225 29 72; --homeo-alert-deep-rgb: 190 24 62; --shadow-glow-homeo-balance: 0 0 24px rgba(15, 168, 120, 0.12); /* Balance ring gradient end: gold in light/dark, theme accent in pink/blue/lime */ --homeo-ring-accent-rgb: var(--homeo-caution-rgb); --homeo-ring-accent-deep-rgb: var(--homeo-caution-deep-rgb); /* Macro BJU norm band (80–120%) — stable green across accent themes */ --macro-norm-rgb: 15 168 120; --macro-norm-deep-rgb: 22 168 121; /* Vitality Lux — depth tokens */ --surface-2: #FDFCF9; --surface-elevated: #FFFFFF; --shadow-soft: 0 2px 8px rgba(23, 23, 23, 0.04); --shadow-card: 0 4px 24px rgba(23, 23, 23, 0.06), 0 1px 0 rgba(255, 255, 255, 0.8) inset; --shadow-primary: 0 8px 32px rgba(23, 23, 23, 0.08), 0 1px 0 rgba(255, 255, 255, 0.9) inset; --shadow-glow-emerald: 0 0 24px rgba(15, 168, 120, 0.12); --shadow-glow-gold: 0 0 24px rgba(201, 162, 39, 0.14); --gradient-bg: linear-gradient(165deg, #FCFBF9 0%, #FAF9F7 48%, #FCFBF9 100%); --gradient-energy: linear-gradient(145deg, rgba(245, 238, 216, 0.92) 0%, rgba(252, 248, 235, 0.88) 48%, rgba(255, 253, 248, 0.96) 100%); --gradient-gold-emerald: linear-gradient(135deg, rgb(var(--emerald-rgb)) 0%, rgb(var(--gold-rgb)) 100%); --font-editorial: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif; /* Готовые цвета для правил в этом файле */ --gold: rgb(var(--gold-rgb)); --gold-deep: rgb(var(--gold-deep-rgb)); --gold-soft: rgb(var(--gold-soft-rgb)); --gold-tint: rgb(var(--gold-tint-rgb)); --ink: rgb(var(--ink-rgb)); --ink-2: rgb(var(--ink-2-rgb)); --bg: rgb(var(--bg-rgb)); --bg-2: rgb(var(--bg-2-rgb)); --line: rgb(var(--line-rgb)); --line-2: rgb(var(--line-2-rgb)); --line-3: rgb(var(--line-3-rgb)); --muted: rgb(var(--muted-rgb)); --muted-2: rgb(var(--muted-2-rgb)); --faint: rgb(var(--faint-rgb)); --green: rgb(var(--green-rgb)); --emerald: rgb(var(--emerald-rgb)); --emerald-deep: rgb(var(--emerald-deep-rgb)); --emerald-tint: rgb(var(--emerald-tint-rgb)); --rose: rgb(var(--rose-rgb)); --rose-tint: rgb(var(--rose-tint-rgb)); /* Локальные токены styles.css */ --surface: #FDFCF9; /* card background — warm ivory */ --border: rgba(23, 23, 23, 0.07); /* subtle card border */ --ink-contrast: #FFFFFF; /* текст ПОВЕРХ элементов с фоном var(--ink) */ /* --onyx — старое имя основного чёрного, оставлено как псевдоним */ --onyx: var(--ink); /* Prime Protocol — светлая тема (чёрный текст, крупная типографика) */ --prime-overlay-bg: #f7f5f0; --prime-fg: #000000; --prime-fg-body: #000000; --prime-fg-muted: #000000; --prime-fg-soft: #000000; --prime-fg-dim: #1a1a1a; --prime-glass-bg: #ffffff; --prime-glass-border: rgba(var(--gold-rgb), 0.22); --prime-inner-bg: #ffffff; --prime-inner-border: rgba(var(--gold-rgb), 0.16); --prime-row-border: #eeeeee; --prime-card-shadow: 0 2px 14px rgba(26, 26, 26, 0.06); /* Типографика и ширина каркаса (mobile по умолчанию) */ --font-heading: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --shell-max-width: 28rem; --chef-max-width: 28rem; --menu-panel-width: 82%; --menu-panel-max-width: 300px; --tracking-brand-wide: 0.18em; --tracking-brand: 0.14em; --tracking-brand-tight: 0.1em; --tracking-brand-micro: 0.08em; --text-micro: 8px; --text-caption: 9px; --text-label: 10px; --text-body: 13px; --text-body-lg: 14px; --text-section: 15px; --text-title: 16px; --text-brand-header: 17px; --text-stat: 20px; --text-hero: 24px; --text-nav: 9px; --nav-icon-size: 1.25rem; --nav-icon-brand-size: 1.375rem; --nav-item-width: 2.75rem; --nav-bar-padding-y: 0.625rem; --shell-header-pt: max(2.25rem, env(safe-area-inset-top)); --shell-header-pb: 0.625rem; /* Logo block height — must match .app-brand-title + .app-brand-tagline */ --shell-header-block: 2.75rem; --shell-main-gap: 0.75rem; --shell-main-pt: calc(var(--shell-header-pt) + var(--shell-header-block) + var(--shell-header-pb) + var(--shell-main-gap)); } html[data-display="standalone"] { --shell-main-gap: 1rem; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis: none; min-height: 100%; min-height: -webkit-fill-available; -webkit-text-size-adjust: 100%; } html[data-layout="desktop"] { /* Фиксированная ширина — одинаково в Safari и Chrome (без min/100vw). */ --shell-max-width: 680px; --chef-max-width: 680px; --menu-panel-width: 400px; --menu-panel-max-width: 400px; --tracking-brand-wide: 0.12em; --tracking-brand: 0.09em; --tracking-brand-tight: 0.07em; --tracking-brand-micro: 0.05em; } .font-heading { font-family: var(--font-heading); } /* ==================================================================== * * ТЁМНАЯ ТЕМА — ультра-премиум (глубокий графит, матовое стекло, * благородное матовое золото и изумрудные акценты #059669). * Включается атрибутом data-theme="dark" на ; вся разметка и * Tailwind-классы остаются прежними — меняются только токены и * точечные переопределения ниже. * ==================================================================== */ html[data-theme="dark"] { /* Vitality Lux — cinematic dark (near-black green × champagne) */ --gold-rgb: 212 175 55; /* champagne gold */ --gold-deep-rgb: 225 196 90; /* luminous gold */ --gold-soft-rgb: 178 162 116; --gold-tint-rgb: 28 24 14; /* dark gold wash */ --ink-rgb: 245 241 232; /* warm ivory text */ --ink-2-rgb: 255 252 245; --bg-rgb: 11 13 12; /* deep graphite-green */ --bg-2-rgb: 16 20 18; --line-rgb: 36 42 38; --line-2-rgb: 48 56 50; --line-3-rgb: 64 72 66; --muted-rgb: 155 155 149; --muted-2-rgb: 184 182 176; --faint-rgb: 100 102 98; --green-rgb: 24 168 120; --emerald-rgb: 24 168 120; --emerald-deep-rgb: 34 197 140; --emerald-tint-rgb: 14 28 22; --rose-rgb: 244 63 94; --rose-tint-rgb: 42 17 24; --surface: #141916; --surface-2: #18201C; --surface-elevated: #1C2420; --border: rgba(245, 241, 232, 0.08); --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.35); --shadow-card: 0 8px 28px rgba(0, 0, 0, 0.42), 0 1px 0 rgba(255, 255, 255, 0.04) inset; --shadow-primary: 0 12px 40px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.06) inset; --shadow-glow-emerald: 0 0 28px rgba(24, 168, 120, 0.18); --shadow-glow-gold: 0 0 28px rgba(212, 175, 55, 0.16); --gradient-bg: linear-gradient(165deg, #0B0D0C 0%, #101412 50%, #0B0D0C 100%); --gradient-energy: linear-gradient(145deg, rgba(14, 28, 22, 0.95) 0%, rgba(28, 24, 14, 0.65) 52%, rgba(20, 25, 22, 0.98) 100%); --ink-contrast: #0B0D0C; --prime-overlay-bg: linear-gradient(165deg, #0f1114 0%, #1a1d22 45%, #12151a 100%); --prime-fg: #f5f0e8; --prime-fg-body: rgba(245, 240, 232, 0.88); --prime-fg-muted: rgba(245, 240, 232, 0.72); --prime-fg-soft: rgba(245, 240, 232, 0.82); --prime-fg-dim: rgba(245, 240, 232, 0.58); --prime-glass-bg: rgba(255, 255, 255, 0.04); --prime-glass-border: rgba(var(--gold-rgb), 0.22); --prime-inner-bg: rgba(0, 0, 0, 0.28); --prime-inner-border: rgba(var(--gold-rgb), 0.15); --prime-row-border: rgba(255, 255, 255, 0.06); --prime-card-shadow: none; --bio-melatonin-rgb: 167 139 250; --bio-melatonin-deep-rgb: 196 181 253; --homeo-balance-rgb: 24 168 120; --homeo-balance-deep-rgb: 34 197 140; --homeo-alert-rgb: 244 63 94; --homeo-alert-deep-rgb: 225 29 72; --shadow-glow-homeo-balance: 0 0 28px rgba(24, 168, 120, 0.18); --macro-norm-rgb: 24 168 120; --macro-norm-deep-rgb: 34 197 140; color-scheme: dark; } /* ==================================================================== * * РОЗОВАЯ / ГОЛУБАЯ / ЛАЙМ — только АКЦЕНТНЫЕ зоны (как бежевый в светлой). * Фон страницы и обычные карточки остаются светлыми/белыми (:root canvas). * Меняются: card-energy, gradient-energy, gold-tint, прогресс-бары, кольцо. * ==================================================================== */ html[data-theme="pink"], html[data-theme="blue"], html[data-theme="lime"] { --ink-rgb: 23 23 23; --ink-2-rgb: 45 45 45; --bg-rgb: 252 251 249; --bg-2-rgb: 250 249 247; --line-rgb: 232 229 220; --line-2-rgb: 218 214 203; --line-3-rgb: 200 196 186; --muted-rgb: 133 133 133; --muted-2-rgb: 102 102 102; --faint-rgb: 180 178 172; --rose-rgb: 225 29 72; --rose-tint-rgb: 253 236 238; --surface: #FFFFFF; --surface-2: #FDFCF9; --surface-elevated: #FFFFFF; --border: rgba(23, 23, 23, 0.07); --shadow-soft: 0 2px 8px rgba(23, 23, 23, 0.04); --shadow-card: 0 4px 24px rgba(23, 23, 23, 0.06), 0 1px 0 rgba(255, 255, 255, 0.8) inset; --shadow-primary: 0 8px 32px rgba(23, 23, 23, 0.08), 0 1px 0 rgba(255, 255, 255, 0.9) inset; --gradient-bg: linear-gradient(165deg, #FCFBF9 0%, #FAF9F7 48%, #FCFBF9 100%); color-scheme: light; } html[data-theme="pink"] { /* Barbie pink palette — accent hex: #FF4FA3 (primary), #FF6FB5 (soft), #FF2D8C (deep) */ --gold-rgb: 255 79 163; /* #FF4FA3 — primary accent (text, icons, bars) */ --gold-deep-rgb: 255 45 140; /* #FF2D8C — vivid fuchsia for labels */ --gold-soft-rgb: 255 111 181; /* #FF6FB5 — soft highlight */ --gold-tint-rgb: 255 228 242; /* #FFE4F2 — candy-pink wash */ --green-rgb: 255 79 163; --emerald-rgb: 255 79 163; --emerald-deep-rgb: 255 45 140; --emerald-tint-rgb: 255 240 248; --shadow-glow-emerald: 0 0 24px rgba(255, 79, 163, 0.18); --shadow-glow-gold: 0 0 24px rgba(255, 111, 181, 0.20); --gradient-energy: linear-gradient(145deg, rgba(255, 228, 242, 0.92) 0%, rgba(255, 240, 248, 0.88) 48%, rgba(255, 252, 254, 0.96) 100%); --prime-overlay-bg: #f7f5f0; } /* Homeostasis ring: green → theme accent (same end token as Water bar) */ html[data-theme="pink"], html[data-theme="blue"], html[data-theme="lime"] { --homeo-ring-accent-rgb: var(--emerald-rgb); --homeo-ring-accent-deep-rgb: var(--emerald-deep-rgb); } /* Pink theme — keep accents vivid on pale tints (no dusty color-mix on labels) */ html[data-theme="pink"] .cycle-forecast__label, html[data-theme="pink"] .cycle-forecast__icon, html[data-theme="pink"] .text-brand-gold, html[data-theme="pink"] .nav-active, html[data-theme="pink"] .nav-active-label { color: rgb(var(--gold-deep-rgb)) !important; } html[data-theme="pink"] .cycle-forecast--follicular .cycle-forecast__label, html[data-theme="pink"] .cycle-forecast--follicular .cycle-forecast__icon, html[data-theme="pink"] .cycle-forecast--menstruation .cycle-forecast__label, html[data-theme="pink"] .cycle-forecast--menstruation .cycle-forecast__icon { color: rgb(var(--gold-rgb)) !important; } html[data-theme="pink"] .energy-fill-level { background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.50) 0%, rgba(var(--gold-deep-rgb), 0.58) 52%, rgba(var(--gold-rgb), 0.44) 100%) !important; } html[data-theme="pink"] .energy-fill-level--capped { background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.56) 0%, rgba(var(--gold-deep-rgb), 0.64) 48%, rgba(var(--gold-rgb), 0.50) 100%) !important; } html[data-theme="pink"] .energy-fill-glow { background: radial-gradient(ellipse at center, rgba(var(--gold-rgb), 0.28) 0%, rgba(var(--gold-rgb), 0.14) 42%, transparent 72%); } html[data-theme="blue"] { /* Sky blue palette — iOS-blue hue (#007AFF), lighter joyful sky tones */ --gold-rgb: 77 166 255; /* #4DA6FF — primary accent (text, icons, bars) */ --gold-deep-rgb: 0 122 255; /* #007AFF — iOS system blue for labels */ --gold-soft-rgb: 107 184 255; /* #6BB8FF — soft highlight */ --gold-tint-rgb: 232 244 255; /* #E8F4FF — clean sky wash */ --green-rgb: 77 166 255; --emerald-rgb: 77 166 255; --emerald-deep-rgb: 0 122 255; --emerald-tint-rgb: 240 248 255; --shadow-glow-emerald: 0 0 24px rgba(77, 166, 255, 0.20); --shadow-glow-gold: 0 0 24px rgba(107, 184, 255, 0.22); --gradient-energy: linear-gradient(145deg, rgba(232, 244, 255, 0.92) 0%, rgba(240, 248, 255, 0.88) 48%, rgba(248, 252, 255, 0.96) 100%); --prime-overlay-bg: #f7f5f0; } /* Blue theme — keep accents vivid on pale tints (no dusty color-mix on labels) */ html[data-theme="blue"] .cycle-forecast__label, html[data-theme="blue"] .cycle-forecast__icon, html[data-theme="blue"] .text-brand-gold, html[data-theme="blue"] .nav-active, html[data-theme="blue"] .nav-active-label { color: rgb(var(--gold-deep-rgb)) !important; } html[data-theme="blue"] .cycle-forecast--follicular .cycle-forecast__label, html[data-theme="blue"] .cycle-forecast--follicular .cycle-forecast__icon, html[data-theme="blue"] .cycle-forecast--menstruation .cycle-forecast__label, html[data-theme="blue"] .cycle-forecast--menstruation .cycle-forecast__icon { color: rgb(var(--gold-rgb)) !important; } html[data-theme="blue"] .energy-fill-level { background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.50) 0%, rgba(var(--gold-deep-rgb), 0.58) 52%, rgba(var(--gold-rgb), 0.44) 100%) !important; } html[data-theme="blue"] .energy-fill-level--capped { background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.56) 0%, rgba(var(--gold-deep-rgb), 0.64) 48%, rgba(var(--gold-rgb), 0.50) 100%) !important; } html[data-theme="blue"] .energy-fill-glow { background: radial-gradient(ellipse at center, rgba(var(--gold-rgb), 0.28) 0%, rgba(var(--gold-rgb), 0.14) 42%, transparent 72%); } html[data-theme="lime"] { --gold-rgb: 196 214 0; --gold-deep-rgb: 168 188 0; --gold-soft-rgb: 180 198 40; --gold-tint-rgb: 240 248 200; --green-rgb: 140 188 0; --emerald-rgb: 140 188 0; --emerald-deep-rgb: 158 204 0; --emerald-tint-rgb: 236 248 210; --shadow-glow-emerald: 0 0 24px rgba(140, 188, 0, 0.14); --shadow-glow-gold: 0 0 24px rgba(196, 214, 0, 0.16); --gradient-energy: linear-gradient(145deg, rgba(240, 248, 200, 0.92) 0%, rgba(248, 252, 230, 0.88) 48%, rgba(254, 255, 248, 0.96) 100%); --prime-overlay-bg: #f7f5f0; } /* Белая — как светлая (беж), но без бежевого оттенка: белый / нейтрально-серый фон. */ html[data-theme="white"] { --ink-rgb: 23 23 23; --ink-2-rgb: 45 45 45; --bg-rgb: 255 255 255; --bg-2-rgb: 249 249 249; --line-rgb: 235 235 235; --line-2-rgb: 224 224 224; --line-3-rgb: 210 210 210; --muted-rgb: 133 133 133; --muted-2-rgb: 102 102 102; --faint-rgb: 180 180 180; --gold-rgb: 201 162 39; --gold-deep-rgb: 216 180 74; --gold-soft-rgb: 184 168 120; --gold-tint-rgb: 248 248 248; --green-rgb: 15 168 120; --emerald-rgb: 15 168 120; --emerald-deep-rgb: 22 168 121; --emerald-tint-rgb: 234 246 241; --rose-rgb: 225 29 72; --rose-tint-rgb: 253 236 238; --surface: #FFFFFF; --surface-2: #FFFFFF; --surface-elevated: #FFFFFF; --border: rgba(23, 23, 23, 0.07); --shadow-soft: 0 2px 8px rgba(23, 23, 23, 0.04); --shadow-card: 0 4px 24px rgba(23, 23, 23, 0.06), 0 1px 0 rgba(255, 255, 255, 0.8) inset; --shadow-primary: 0 8px 32px rgba(23, 23, 23, 0.08), 0 1px 0 rgba(255, 255, 255, 0.9) inset; --shadow-glow-emerald: 0 0 24px rgba(15, 168, 120, 0.12); --shadow-glow-gold: 0 0 24px rgba(201, 162, 39, 0.14); --gradient-bg: linear-gradient(165deg, #FFFFFF 0%, #FAFAFA 48%, #FFFFFF 100%); --gradient-energy: linear-gradient(145deg, rgba(250, 250, 250, 0.96) 0%, rgba(255, 255, 255, 0.92) 48%, rgba(255, 255, 255, 0.98) 100%); --prime-overlay-bg: #ffffff; color-scheme: light; } /* Плавная смена темы: цвета фона/границ/текста перетекают мягко. */ body, header, nav, aside, .card, .card-dark, .modal-content, .practice-card, .practice-overlay, .chef-msg-ai, .chef-msg-user, .btn-primary, .rw-entry, .rw-tile, .seg-btn, .sig-chip, .onb-overlay, #splash { transition: background-color .45s ease, border-color .45s ease, color .45s ease, box-shadow .45s ease; } /* --- Тёмные переопределения для «сырых» утилит Tailwind в разметке --- */ html[data-theme="dark"] .bg-white { background-color: var(--surface); } html[data-theme="dark"] .bg-white\/90 { background-color: rgba(13, 12, 9, 0.80); } html[data-theme="dark"] .hover\:bg-gray-50:hover { background-color: var(--bg-2); } html[data-theme="dark"] .border-gray-100, html[data-theme="dark"] .border-gray-50 { border-color: var(--line); } html[data-theme="dark"] .text-gray-300 { color: #57503F; } html[data-theme="dark"] .bg-amber-50\/50 { background-color: rgba(201, 169, 84, 0.07); } html[data-theme="dark"] .bg-emerald-50 { background-color: var(--emerald-tint); } html[data-theme="dark"] .border-emerald-200 { border-color: rgba(16, 185, 129, 0.35); } html[data-theme="dark"] .text-emerald-600 { color: #34D399; } html[data-theme="dark"] .bg-gray-400 { background-color: #6B6355; } /* Кнопки «bg-brand-ink + text-white»: в тёмной теме фон становится светлым (слоновая кость), поэтому текст/иконки на них — тёмные. */ html[data-theme="dark"] .bg-brand-ink.text-white, html[data-theme="dark"] .bg-brand-ink .text-white, html[data-theme="dark"] .bg-brand-ink.text-transparent { color: var(--ink-contrast); } /* Тёмная карточка-акцент («Прогноз тела», Prime Protocol) остаётся благородно-графитовой с золотой окантовкой. */ html[data-theme="dark"] .card-dark { background: linear-gradient(150deg, #18201C 0%, #0B0D0C 100%); border: 1px solid rgba(var(--gold-rgb), 0.25); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55); } /* Prime Protocol («Профиль» → «Путь к цели»): в тёмной теме градиент карточки заканчивался чистым белым (.to-white), и светлый текст (слоновая кость) пропадал на сером фоне. Держим глубокий графит с золотой окантовкой — текст брендовых токенов снова контрастен. */ html[data-theme="dark"] .bg-gradient-to-br.to-white { background: linear-gradient(150deg, #1A1610 0%, #0E0C08 100%); } /* Матовое стекло: шторки, боковое меню и карточки в тёмной теме. */ html[data-theme="dark"] .modal-content { background: rgba(22, 19, 13, 0.88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--line); } html[data-theme="dark"] #app-menu .menu-panel { background: rgba(18, 15, 11, 0.90); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } html[data-theme="dark"] .card { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-card); } html[data-theme="dark"] .glow-gold { box-shadow: 0 0 18px rgba(201, 169, 84, 0.20); } html[data-theme="dark"] .glow-gold-sm { box-shadow: 0 0 15px rgba(201, 169, 84, 0.14); } /* --- Выбор темы (Профиль): горизонтальный ряд свотчей --- */ .theme-swatches { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex: 1 1 auto; min-width: 0; max-width: 58%; } .theme-swatch { width: 22px; height: 22px; padding: 0; border-radius: 9999px; flex-shrink: 0; border: 1.5px solid rgba(0, 0, 0, 0.08); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.06); cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; -webkit-tap-highlight-color: transparent; } .theme-swatch:active { transform: scale(0.94); } .theme-swatch.is-active { transform: scale(1.15); border-color: transparent; z-index: 1; } .theme-swatch.is-active:active { transform: scale(1.08); } .theme-swatch--light { background: #D8C8A8; } .theme-swatch--light.is-active { box-shadow: 0 0 0 4px rgba(216, 200, 168, 0.30), 0 0 12px rgba(216, 200, 168, 0.50); } .theme-swatch--dark { background: #1A1816; border-color: rgba(255, 255, 255, 0.12); } .theme-swatch--dark.is-active { box-shadow: 0 0 0 4px rgba(26, 24, 22, 0.35), 0 0 12px rgba(70, 64, 58, 0.55); } .theme-swatch--pink { background: #FF4FA3; } .theme-swatch--pink.is-active { box-shadow: 0 0 0 4px rgba(255, 79, 163, 0.30), 0 0 12px rgba(255, 79, 163, 0.50); } .theme-swatch--blue { background: #4DA6FF; } .theme-swatch--blue.is-active { box-shadow: 0 0 0 4px rgba(77, 166, 255, 0.30), 0 0 12px rgba(77, 166, 255, 0.50); } .theme-swatch--lime { background: radial-gradient(circle at 35% 32%, #E8F020 0%, #C4D600 52%, #FFD54F 100%); } .theme-swatch--lime.is-active { box-shadow: 0 0 0 4px rgba(196, 214, 0, 0.30), 0 0 12px rgba(232, 240, 32, 0.50); } .theme-swatch--white { background: #FFFFFF; border-color: rgba(0, 0, 0, 0.14); } .theme-swatch--white.is-active { box-shadow: 0 0 0 4px rgba(200, 200, 200, 0.35), 0 0 12px rgba(180, 180, 180, 0.45); } @media (max-width: 360px) { .theme-swatches { gap: 5px; max-width: 58%; } .theme-swatch { width: 20px; height: 20px; } } /* ---- Компонентные классы (одно место правки для повторяющихся элементов) ---- */ /* Главная кнопка: чёрная, во всю ширину. Используется во всех модалках и экранах. Эквивалент прежнего набора: w-full bg-[#111] text-white rounded-xl px-4 py-4 text-[11px] font-heading font-bold uppercase tracking-[0.2em] hover:bg-[#333]. */ .btn-primary { display: block; width: 100%; background: var(--ink); color: var(--ink-contrast); border-radius: 12px; padding: 16px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; text-align: center; cursor: pointer; transition: background-color 0.15s ease; } .btn-primary:hover { background: var(--ink-2); } /* Золотое свечение (рамки-акценты). Цвет = --gold (212,175,55). */ .glow-gold { box-shadow: 0 0 15px rgba(212, 175, 55, 0.15); } .glow-gold-sm { box-shadow: 0 0 15px rgba(212, 175, 55, 0.10); } /* Изумрудное свечение — статус «выполнено» у карточек практик. Цвет = --emerald (16,185,129). */ .glow-emerald { box-shadow: 0 0 18px rgba(16, 185, 129, 0.22); } .glow-emerald-sm { box-shadow: 0 0 15px rgba(16, 185, 129, 0.12); } body { background: var(--gradient-bg); background-color: var(--bg); color: var(--onyx); font-family: var(--font-body); -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; min-height: 100%; min-height: -webkit-fill-available; } /* ---- Vitality Lux: editorial typography ---- */ .type-editorial { font-family: var(--font-editorial); font-weight: 500; letter-spacing: 0.02em; } .type-editorial-emotional { font-family: var(--font-editorial); font-weight: 500; letter-spacing: 0.01em; line-height: 1.15; text-transform: none; } .type-editorial-section { font-family: var(--font-editorial); font-weight: 600; letter-spacing: 0.04em; } /* ---- Vitality Lux: card hierarchy modifiers ---- */ .card-primary { background: var(--surface-elevated); box-shadow: var(--shadow-primary); } .card-secondary { background: var(--surface); box-shadow: var(--shadow-card); } .card-support { background: color-mix(in srgb, var(--surface) 88%, var(--bg-2) 12%); box-shadow: var(--shadow-soft); } html[data-theme="dark"] .card-primary { background: var(--surface-elevated); } html[data-theme="dark"] .card-secondary { background: var(--surface); } html[data-theme="dark"] .card-support { background: color-mix(in srgb, var(--surface) 90%, var(--bg-2) 10%); } /* Каркас приложения: mobile = узкая колонка; desktop = шире, с «рамкой». */ .app-shell-frame { max-width: var(--shell-max-width); } .app-brand-title { font-family: var(--font-editorial); font-size: var(--text-brand-header); font-weight: 600; line-height: 1.1; letter-spacing: 0.14em; } .app-brand-tagline { font-family: var(--font-heading); font-size: var(--text-micro); font-weight: 600; letter-spacing: var(--tracking-brand-micro); } .app-nav-label { font-family: var(--font-heading); font-size: var(--text-nav); font-weight: 600; letter-spacing: 0.05em; } .app-shell-header-inner { padding-top: var(--shell-header-pt); padding-bottom: var(--shell-header-pb); } .app-shell-main { padding-top: var(--shell-main-pt); position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; min-height: -webkit-fill-available; } .app-shell-main > .fade-in > h3:first-child, .app-shell-main > .fade-in > .type-section:first-child { scroll-margin-top: calc(var(--shell-main-pt) + 0.5rem); } .app-shell-nav .app-shell-frame { padding-top: var(--nav-bar-padding-y); padding-bottom: var(--nav-bar-padding-y); } .app-shell-nav-btn { width: var(--nav-item-width); } .app-shell-nav-icon { width: var(--nav-icon-size); height: var(--nav-icon-size); } .app-shell-nav-icon--brand { width: var(--nav-icon-brand-size); height: var(--nav-icon-brand-size); } .type-section { font-family: var(--font-heading); font-size: var(--text-section); font-weight: 700; letter-spacing: var(--tracking-brand-tight); } .type-title { font-family: var(--font-heading); font-size: var(--text-title); font-weight: 700; letter-spacing: var(--tracking-brand-tight); } .type-hero { font-family: var(--font-heading); font-size: var(--text-hero); font-weight: 700; line-height: 1; } .type-stat { font-family: var(--font-heading); font-size: var(--text-stat); font-weight: 700; line-height: 1.1; } html:not([data-theme="dark"]) .app-shell-root { background: transparent; } html[data-layout="desktop"] body { background: color-mix(in srgb, var(--bg-2) 88%, rgb(var(--gold-rgb)) 12%); } html[data-layout="desktop"] .app-shell-root { position: relative; max-width: var(--shell-max-width); margin: 0 auto; min-height: 100vh; min-height: 100dvh; min-height: -webkit-fill-available; background: var(--gradient-bg); box-shadow: 0 0 0 1px var(--line), 0 28px 72px rgba(0, 0, 0, 0.07); } html[data-layout="desktop"] .app-shell-header, html[data-layout="desktop"] .app-shell-nav { left: 0; right: 0; width: 100%; max-width: var(--shell-max-width); margin-left: auto; margin-right: auto; transform: none; } html[data-theme="dark"][data-layout="desktop"] .app-shell-root { box-shadow: 0 0 0 1px var(--line), 0 28px 72px rgba(0, 0, 0, 0.45); } html[data-theme="dark"][data-layout="desktop"] body { background: color-mix(in srgb, var(--bg) 92%, rgb(var(--gold-rgb)) 8%); } /* Safari / desktop pointer: меньше разрежённый капс на мелком кегле (кириллица). */ @media (hover: hover) and (pointer: fine) { :root { --tracking-brand-wide: 0.12em; --tracking-brand: 0.09em; --tracking-brand-tight: 0.07em; --tracking-brand-micro: 0.05em; } .font-heading.tracking-\[0\.2em\], .font-heading.tracking-\[0\.3em\], .font-heading.tracking-wider, .font-heading.tracking-widest, .font-heading.tracking-wide { letter-spacing: var(--tracking-brand-tight) !important; } .font-heading.text-\[8px\], .font-heading.text-\[9px\] { font-size: var(--text-micro) !important; letter-spacing: var(--tracking-brand-micro) !important; } .splash-title { letter-spacing: 0.16em; padding-left: 0.16em; } .splash-sub, .splash-tag { letter-spacing: 0.12em; padding-left: 0.12em; font-size: clamp(10px, 1.1vw, 12px); } } /* Smooth Animations */ .fade-in { animation: fadeIn 0.4s ease-out forwards; } .fade-out { animation: fadeOut 0.4s ease-in forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); } } .accordion-content { transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, margin 0.4s ease-in-out; max-height: 0; opacity: 0; overflow: hidden; } .accordion-content.open { max-height: 2000px; opacity: 1; margin-top: 1rem; } .rotate-180 { transform: rotate(180deg); } .wave-anim { animation: wave-move 4s linear infinite; } @keyframes wave-move { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-card); border: 1px solid var(--border); margin-bottom: 16px; position: relative; } /* Light + accent themes: white cards; only card-energy keeps tinted gradient. */ html:not([data-theme]) .card:not(.card-energy), html[data-theme="white"] .card:not(.card-energy), html[data-theme="pink"] .card:not(.card-energy), html[data-theme="blue"] .card:not(.card-energy), html[data-theme="lime"] .card:not(.card-energy) { background: #FFFFFF; border-color: rgba(23, 23, 23, 0.06); box-shadow: 0 6px 28px rgba(23, 23, 23, 0.07), 0 1px 0 rgba(255, 255, 255, 0.95) inset; } html:not([data-theme]) .card-primary:not(.card-energy), html:not([data-theme]) .card-secondary, html:not([data-theme]) .card-support, html[data-theme="white"] .card-primary:not(.card-energy), html[data-theme="white"] .card-secondary, html[data-theme="white"] .card-support, html[data-theme="pink"] .card-primary:not(.card-energy), html[data-theme="pink"] .card-secondary, html[data-theme="pink"] .card-support, html[data-theme="blue"] .card-primary:not(.card-energy), html[data-theme="blue"] .card-secondary, html[data-theme="blue"] .card-support, html[data-theme="lime"] .card-primary:not(.card-energy), html[data-theme="lime"] .card-secondary, html[data-theme="lime"] .card-support { background: #FFFFFF; } /* Capital metrics: visible gold border (same language as Analytics / Aesthetics) */ .card.capital-metric-card { border: 1px solid rgb(var(--gold-rgb) / 0.32); box-shadow: var(--shadow-card), 0 0 12px rgb(var(--gold-rgb) / 0.06); } html[data-theme="dark"] .card.capital-metric-card { border-color: rgb(var(--gold-rgb) / 0.38); box-shadow: var(--shadow-card), 0 0 14px rgba(201, 169, 84, 0.12); } /* ---- Vitality Lux: Metabolic Capital — Energy Fill ---- */ .card-energy { background: var(--gradient-energy); overflow: hidden; box-shadow: var(--shadow-primary), var(--shadow-glow-gold); } .card-energy::before { content: ''; position: absolute; top: -40%; right: -20%; width: 55%; height: 80%; background: radial-gradient(ellipse, rgba(var(--gold-rgb), 0.14) 0%, transparent 70%); pointer-events: none; } .card-energy::after { content: ''; position: absolute; bottom: -30%; left: -15%; width: 50%; height: 70%; background: radial-gradient(ellipse, rgba(var(--gold-rgb), 0.12) 0%, transparent 68%); pointer-events: none; } .energy-fill-stage { background: linear-gradient(165deg, color-mix(in srgb, var(--gold-tint) 35%, var(--surface-elevated)) 0%, color-mix(in srgb, var(--surface-elevated) 92%, var(--bg-2)) 48%, color-mix(in srgb, var(--bg-2) 25%, var(--surface-elevated)) 100%); border: 1px solid rgba(var(--gold-rgb), 0.16); box-shadow: 0 10px 28px rgba(var(--ink-rgb), 0.06), 0 2px 0 rgba(255, 255, 255, 0.75) inset, 0 -1px 0 rgba(var(--ink-rgb), 0.04) inset; } .energy-fill-stage::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, transparent 38%); pointer-events: none; z-index: 1; } .energy-fill-stage--capped::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 28%); } .energy-fill-glow { position: absolute; inset: 18% 22%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(var(--gold-rgb), 0.16) 0%, rgba(var(--gold-rgb), 0.08) 42%, transparent 72%); pointer-events: none; z-index: 2; } html[data-theme="dark"] .energy-fill-stage { background: linear-gradient(165deg, rgba(var(--emerald-rgb), 0.08) 0%, rgba(0, 0, 0, 0.38) 52%, rgba(var(--gold-rgb), 0.06) 100%); border-color: rgba(var(--gold-rgb), 0.2); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 -1px 0 rgba(0, 0, 0, 0.35) inset; } html[data-theme="dark"] .energy-fill-stage::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 40%); } html[data-theme="dark"] .energy-fill-glow { background: radial-gradient(ellipse at center, rgba(var(--emerald-rgb), 0.22) 0%, rgba(var(--gold-rgb), 0.1) 45%, transparent 72%); } html[data-theme="dark"] .energy-fill-level { background: linear-gradient(180deg, rgba(var(--emerald-rgb), 0.28) 0%, rgba(var(--gold-rgb), 0.2) 100%) !important; } .energy-fill-numbers { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); } html[data-theme="dark"] .energy-fill-numbers { text-shadow: 0 1px 12px rgba(var(--emerald-rgb), 0.18); } .energy-fill-stage .type-hero { color: var(--ink); filter: none; } html[data-theme="dark"] .energy-fill-stage .type-hero { filter: none; } .energy-fill-level { background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.34) 0%, rgba(var(--gold-deep-rgb), 0.42) 52%, rgba(var(--gold-rgb), 0.28) 100%) !important; z-index: 3; } .energy-fill-level--capped { background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.4) 0%, rgba(var(--gold-deep-rgb), 0.5) 48%, rgba(var(--gold-rgb), 0.36) 100%) !important; } html[data-theme="dark"] .energy-fill-level--capped { background: linear-gradient(180deg, rgba(var(--emerald-rgb), 0.34) 0%, rgba(var(--emerald-rgb), 0.42) 45%, rgba(var(--gold-rgb), 0.28) 100%) !important; } .energy-fill-surface { z-index: 4; height: 2rem; transform: translateY(50%); overflow: visible; } .energy-fill-surface .wave-anim { position: absolute; bottom: 0; left: 0; width: 200%; height: 2rem; } .energy-fill-surface .wave-anim { color: rgb(var(--gold-rgb) / 0.42); opacity: 0.48; } .energy-fill-stage--capped .energy-fill-surface .wave-anim { color: rgb(var(--gold-deep-rgb) / 0.48); opacity: 0.55; } html[data-theme="dark"] .energy-fill-surface .wave-anim { color: rgb(var(--gold-rgb) / 0.46); opacity: 0.52; } /* ---- Vitality Lux: macro progress bars (Capital) ---- */ .macro-bar-lux { height: 4px; border-radius: 9999px; background: color-mix(in srgb, var(--bg-2) 42%, transparent); box-shadow: none; overflow: hidden; position: relative; } html[data-theme="dark"] .macro-bar-lux { background: rgba(255, 255, 255, 0.05); box-shadow: none; } .macro-bar-lux .progress-fill { border-radius: 9999px; height: 100%; position: relative; box-shadow: none; } html[data-theme="dark"] .macro-bar-lux .progress-fill { box-shadow: none; } .macro-bar-lux .progress-fill.macro-norm { background: linear-gradient(90deg, rgb(var(--macro-norm-deep-rgb)) 0%, rgb(var(--macro-norm-rgb)) 100%); } /* >120%: theme accent via --gold-rgb (champagne in light/dark, pink/blue/lime in accent themes) */ .macro-bar-lux .progress-fill.gold { background: linear-gradient(90deg, rgb(var(--gold-rgb)) 0%, rgb(var(--gold-deep-rgb)) 100%); box-shadow: none; } .macro-bar-lux .progress-fill.light { background: linear-gradient(90deg, color-mix(in srgb, var(--muted) 70%, var(--bg-2)) 0%, color-mix(in srgb, var(--muted) 45%, var(--bg-2)) 100%); } /* Capital energy card: five macros — equal columns, full-width bars */ .energy-macro-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; gap: 0.375rem; } .energy-macro-grid__col { min-width: 0; display: flex; flex-direction: column; align-items: stretch; } .energy-macro-grid__value { font-size: 0.8125rem; line-height: 1.15; white-space: nowrap; } .energy-macro-grid__unit { font-size: 0.5625rem; margin-left: 0.125rem; font-weight: 700; } .energy-macro-grid .macro-bar-lux { width: 100%; max-width: none; } .energy-macro-grid__label { font-size: 0.4375rem; line-height: 1.2; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .energy-macro-divider { border-top-width: 1px; border-top-color: rgb(var(--line-rgb) / 0.55); } html[data-theme="dark"] .energy-macro-divider { border-top-color: rgba(255, 255, 255, 0.08); } /* ---- Vitality Lux: Bio / Nutrition progress bars ---- */ .progress-bar-lux { border-radius: 9999px; background: color-mix(in srgb, var(--bg-2) 55%, transparent); box-shadow: 0 1px 2px rgba(var(--ink-rgb), 0.05) inset; overflow: visible; position: relative; width: 100%; } html[data-theme="dark"] .progress-bar-lux { background: rgba(255, 255, 255, 0.06); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) inset; } .progress-bar-lux .progress-fill { border-radius: 9999px; height: 100%; position: relative; background: linear-gradient(90deg, var(--ink-2) 0%, color-mix(in srgb, var(--ink-2) 70%, var(--muted)) 100%); box-shadow: 0 1px 3px rgba(var(--ink-rgb), 0.12), 0 1px 0 rgba(255, 255, 255, 0.3) inset; } html[data-theme="dark"] .progress-bar-lux .progress-fill { box-shadow: 0 0 8px rgba(255, 255, 255, 0.06), 0 1px 0 rgba(255, 255, 255, 0.1) inset; } .progress-bar-lux .progress-fill.gold { background: linear-gradient(90deg, rgb(var(--bio-estrogen-rgb)) 0%, rgb(var(--bio-estrogen-deep-rgb)) 78%, color-mix(in srgb, rgb(var(--bio-estrogen-rgb)) 75%, white) 100%); box-shadow: 0 1px 4px rgba(var(--bio-estrogen-rgb), 0.28), 0 0 10px rgba(var(--bio-estrogen-rgb), 0.18), 0 1px 0 rgba(255, 255, 255, 0.35) inset; } html[data-theme="dark"] .progress-bar-lux .progress-fill.gold { box-shadow: 0 0 12px rgba(var(--bio-estrogen-rgb), 0.32), 0 1px 0 rgba(255, 255, 255, 0.12) inset; } .progress-bar-lux .progress-fill.emerald { background: linear-gradient(90deg, rgb(var(--bio-progesterone-deep-rgb)) 0%, rgb(var(--bio-progesterone-rgb)) 72%, color-mix(in srgb, rgb(var(--bio-progesterone-rgb)) 70%, white) 100%); box-shadow: 0 1px 4px rgba(var(--bio-progesterone-rgb), 0.22), 0 0 10px rgba(var(--bio-progesterone-rgb), 0.14), 0 1px 0 rgba(255, 255, 255, 0.3) inset; } html[data-theme="dark"] .progress-bar-lux .progress-fill.emerald { box-shadow: 0 0 12px rgba(var(--bio-progesterone-rgb), 0.28), 0 1px 0 rgba(255, 255, 255, 0.1) inset; } .progress-bar-lux .progress-fill.dark { background: linear-gradient(90deg, var(--ink) 0%, var(--ink-2) 100%); box-shadow: 0 1px 3px rgba(var(--ink-rgb), 0.2) inset; } html[data-theme="dark"] .progress-bar-lux .progress-fill.dark { background: linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.35) 100%); box-shadow: 0 0 8px rgba(255, 255, 255, 0.08); } .progress-bar-lux .progress-fill.rose { background: linear-gradient(90deg, rgb(var(--rose-rgb)) 0%, color-mix(in srgb, rgb(var(--rose-rgb)) 75%, #F472B6) 100%); box-shadow: 0 1px 4px rgba(var(--rose-rgb), 0.28), 0 0 10px rgba(var(--rose-rgb), 0.16); } html[data-theme="dark"] .progress-bar-lux .progress-fill.rose { box-shadow: 0 0 12px rgba(var(--rose-rgb), 0.32); } .progress-bar-lux .progress-fill.light { background: linear-gradient(90deg, var(--muted) 0%, color-mix(in srgb, var(--muted) 55%, var(--bg-2)) 100%); } /* ---- Vitality Lux: Nutrition energy wave line ---- */ .energy-wave-chart { position: relative; } .energy-wave-line { transition: color 0.45s ease; } .energy-wave-line.text-emerald-500 { filter: drop-shadow(0 0 3px rgba(var(--emerald-rgb), 0.28)); } .energy-wave-line.text-brand-gold { filter: drop-shadow(0 0 3px rgba(var(--gold-rgb), 0.26)); } html[data-theme="dark"] .energy-wave-line.text-emerald-500 { filter: drop-shadow(0 0 5px rgba(var(--emerald-rgb), 0.45)); } html[data-theme="dark"] .energy-wave-line.text-brand-gold { filter: drop-shadow(0 0 5px rgba(var(--gold-rgb), 0.42)); } /* Energy Wave card: share + plain meal-time label (no pill border) */ .energy-wave-card { position: relative; padding-top: 20px !important; } .energy-wave-card__share { position: absolute; top: 12px; right: 12px; z-index: 5; color: var(--gold-deep); opacity: 0.92; } .energy-wave-card__share:hover { opacity: 1; } html[data-theme="dark"] .energy-wave-card__share { color: #D4AF37; } .energy-wave-card__main { padding-right: 36px; } .energy-wave-card__meal-time { border: none !important; background: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; } .energy-wave-card__meal-time--with-share { padding-right: 30px !important; max-width: 52%; } /* ---- Vitality Lux: Homeostasis glowing ring ---- */ .card-homeo::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--shadow-glow-homeo-balance); opacity: 0.35; pointer-events: none; } .homeo-ring-wrap--lux { filter: none; } .homeo-ring-aura { position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; animation: homeo-aura-pulse 4.5s ease-in-out infinite; } .homeo-ring-wrap--balance .homeo-ring-aura { background: radial-gradient(circle, rgba(var(--homeo-balance-rgb), 0.18) 0%, rgba(var(--homeo-balance-rgb), 0.06) 52%, transparent 72%); } html[data-theme="dark"] .homeo-ring-wrap--balance .homeo-ring-aura { background: radial-gradient(circle, rgba(var(--homeo-balance-rgb), 0.28) 0%, rgba(var(--homeo-balance-rgb), 0.1) 50%, transparent 72%); } html[data-theme="pink"] .homeo-ring-wrap--balance .homeo-ring-aura, html[data-theme="blue"] .homeo-ring-wrap--balance .homeo-ring-aura, html[data-theme="lime"] .homeo-ring-wrap--balance .homeo-ring-aura { background: radial-gradient(circle, rgba(var(--homeo-balance-rgb), 0.2) 0%, rgba(var(--emerald-rgb), 0.14) 48%, transparent 72%); } .homeo-ring-wrap--caution .homeo-ring-aura { background: radial-gradient(circle, rgba(var(--homeo-caution-rgb), 0.16) 0%, rgba(var(--homeo-caution-rgb), 0.05) 52%, transparent 72%); } .homeo-ring-wrap--alert .homeo-ring-aura { background: radial-gradient(circle, rgba(var(--homeo-alert-rgb), 0.16) 0%, rgba(var(--homeo-alert-rgb), 0.05) 52%, transparent 72%); } .homeo-ring-wrap--muted .homeo-ring-aura { background: radial-gradient(circle, rgba(var(--muted-rgb), 0.12) 0%, rgba(var(--muted-rgb), 0.04) 52%, transparent 72%); animation: none; } @keyframes homeo-aura-pulse { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.03); } } @media (prefers-reduced-motion: reduce) { .homeo-ring-aura { animation: none; } } .homeo-ring-track { color: color-mix(in srgb, var(--line) 85%, transparent); opacity: 0.55; } html[data-theme="dark"] .homeo-ring-track { color: rgba(255, 255, 255, 0.1); } .homeo-ring-progress--emerald { stroke: url(#homeo-grad-emerald); } .homeo-ring-progress--gold { stroke: url(#homeo-grad-gold); } .homeo-ring-progress--rose { stroke: url(#homeo-grad-rose); } .homeo-ring-progress--muted { stroke: url(#homeo-grad-muted); } .homeo-ring-score { font-size: 0.95rem; letter-spacing: -0.02em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); } html[data-theme="dark"] .homeo-ring-wrap--balance .homeo-ring-score { text-shadow: 0 0 12px rgba(var(--homeo-balance-rgb), 0.35); } .homeo-ring-wrap--balance { filter: drop-shadow(0 0 10px rgba(var(--homeo-balance-rgb), 0.2)); } html[data-theme="dark"] .homeo-ring-wrap--balance.homeo-ring-wrap--lux { filter: drop-shadow(0 0 14px rgba(var(--homeo-balance-rgb), 0.32)); } html[data-theme="pink"] .homeo-ring-wrap--balance.homeo-ring-wrap--lux, html[data-theme="blue"] .homeo-ring-wrap--balance.homeo-ring-wrap--lux, html[data-theme="lime"] .homeo-ring-wrap--balance.homeo-ring-wrap--lux { filter: drop-shadow(0 0 12px rgba(var(--homeo-balance-rgb), 0.16)) drop-shadow(0 0 10px rgba(var(--emerald-rgb), 0.2)); } .homeo-ring-wrap--caution { filter: drop-shadow(0 0 10px rgba(var(--homeo-caution-rgb), 0.18)); } .homeo-ring-wrap--alert { filter: drop-shadow(0 0 10px rgba(var(--homeo-alert-rgb), 0.18)); } .homeo-ring-wrap--muted { filter: none; } .homeo-status--balance { color: rgb(var(--homeo-balance-deep-rgb)); } .homeo-status--caution { color: rgb(var(--homeo-caution-rgb)); } .homeo-status--alert { color: rgb(var(--homeo-alert-rgb)); } .homeo-status--muted { color: rgb(var(--muted-rgb)); } .homeo-hint-col { min-width: 0; overflow: visible; } .homeo-hint-label { font-size: 8px; letter-spacing: 0.05em; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; word-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } /* ---- Vitality Lux: Analytics ---- */ .card-analytics::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--gold-rgb) / 0.38), transparent); border-radius: 20px 20px 0 0; pointer-events: none; } /* ---- Vitality Lux: Water bar (Nutrition + Capital) ---- */ .water-progress-lux { --water-pct: 0%; } .water-progress-lux__track { position: relative; height: 5px; border-radius: 9999px; background: color-mix(in srgb, var(--bg-2) 42%, transparent); box-shadow: none; overflow: hidden; } html[data-theme="dark"] .water-progress-lux__track { background: rgba(255, 255, 255, 0.05); box-shadow: none; } .water-progress-lux__fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--water-pct); border-radius: inherit; background: linear-gradient(90deg, rgb(12, 140, 120) 0%, rgb(var(--emerald-rgb)) 100%); box-shadow: none; transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1); } html[data-theme="dark"] .water-progress-lux__fill { background: linear-gradient(90deg, rgb(8, 100, 88) 0%, rgb(var(--emerald-rgb)) 100%); box-shadow: none; } .water-progress-lux__shine { position: absolute; inset: 0; width: var(--water-pct); border-radius: inherit; overflow: hidden; pointer-events: none; } .water-progress-lux__shine::after { content: ''; position: absolute; top: 1px; left: -40%; width: 40%; height: calc(100% - 2px); background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%); animation: water-shimmer 5s ease-in-out infinite; } @keyframes water-shimmer { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: 0.7; } 80% { opacity: 0.5; } 100% { transform: translateX(280%); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .water-progress-lux__shine::after { animation: none; opacity: 0.25; } } /* ---- Vitality Lux: Nutrition search + Chef chrome ---- */ .lux-search-bar { background: color-mix(in srgb, var(--surface-elevated) 90%, rgb(var(--gold-rgb)) 10%); box-shadow: var(--shadow-soft); } html[data-theme="dark"] .lux-search-bar { background: color-mix(in srgb, var(--surface) 88%, rgb(var(--gold-rgb)) 12%); } .chef-input-lux { background: var(--surface-elevated); border: 1px solid rgba(var(--gold-rgb), 0.22); box-shadow: var(--shadow-card); } html[data-theme="dark"] .chef-input-lux { background: var(--surface); } /* Instagram-подобное сжатие: второстепенные иконки плавно уходят, поле растягивается. */ .chef-input-secondary-left, .chef-input-secondary-mic { overflow: hidden; flex-shrink: 0; opacity: 1; max-width: 96px; transform: translateX(0); transition: opacity 0.28s ease, max-width 0.32s cubic-bezier(0.4, 0, 0.2, 1), margin 0.32s cubic-bezier(0.4, 0, 0.2, 1), transform 0.28s ease; } .chef-input-secondary-left { max-width: 104px; } .chef-input-secondary-mic { max-width: 44px; } .chef-input-lux--compact .chef-input-secondary-left { max-width: 0; opacity: 0; margin-inline-end: 0; transform: translateX(-6px); pointer-events: none; } .chef-input-lux--compact .chef-input-secondary-left > * { visibility: hidden; } .chef-input-lux--typing .chef-input-secondary-mic { max-width: 0; opacity: 0; margin-inline-end: 0; padding-inline: 0; border-width: 0; transform: translateX(6px); pointer-events: none; } .chef-text-input { transition: padding 0.32s cubic-bezier(0.4, 0, 0.2, 1); } .chef-send-btn { flex-shrink: 0; opacity: 0.42; transition: opacity 0.22s ease, transform 0.22s ease; } .chef-input-lux--can-send .chef-send-btn { opacity: 1; } @media (prefers-reduced-motion: reduce) { .chef-input-secondary-left, .chef-input-secondary-mic, .chef-text-input, .chef-send-btn { transition: none; } .chef-input-lux--compact .chef-input-secondary-left, .chef-input-lux--typing .chef-input-secondary-mic { transform: none; } } /* ---- Vitality Lux: DOSE section ---- */ .dose-section { border-color: rgba(var(--gold-rgb), 0.12); } .dose-row { padding: 10px 0; border-bottom: 1px solid rgba(var(--line-rgb), 0.6); } .dose-row:last-of-type { border-bottom: none; } .dose-bar-lux { height: 6px; border-radius: 9999px; background: color-mix(in srgb, var(--bg-2) 65%, transparent); overflow: visible; box-shadow: 0 1px 2px rgba(var(--ink-rgb), 0.05) inset; } html[data-theme="dark"] .dose-bar-lux { background: rgba(255, 255, 255, 0.06); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) inset; } .dose-bar-lux .progress-fill { border-radius: 9999px; height: 100%; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset; } .dose-bar-lux .progress-fill.gold { background: linear-gradient(90deg, rgb(var(--bio-dopamine-rgb)), rgb(var(--bio-dopamine-deep-rgb))); box-shadow: 0 1px 4px rgba(var(--bio-dopamine-rgb), 0.25), 0 0 10px rgba(var(--bio-dopamine-rgb), 0.16); } .dose-bar-lux .progress-fill.dose-green { background: linear-gradient(90deg, rgb(var(--bio-serotonin-deep-rgb)), rgb(var(--bio-serotonin-rgb))); box-shadow: 0 1px 4px rgba(var(--bio-serotonin-rgb), 0.22), 0 0 10px rgba(var(--bio-serotonin-rgb), 0.14); } .dose-bar-lux .progress-fill.dose-pink { background: linear-gradient(90deg, rgb(var(--bio-oxytocin-rgb)), rgb(var(--bio-oxytocin-deep-rgb))); } .dose-bar-lux .progress-fill.dose-blue { background: linear-gradient(90deg, rgb(var(--bio-endorphin-rgb)), rgb(var(--bio-endorphin-deep-rgb))); } .dose-bar-lux .progress-fill.dose-black { background: linear-gradient(90deg, rgb(var(--bio-melatonin-rgb)), rgb(var(--bio-melatonin-deep-rgb))); } html[data-theme="dark"] .dose-bar-lux .progress-fill.dose-black { box-shadow: 0 0 10px rgba(var(--bio-melatonin-rgb), 0.28); } html[data-theme="dark"] .dose-bar-lux .progress-fill.gold { box-shadow: 0 0 12px rgba(var(--bio-dopamine-rgb), 0.3), 0 1px 0 rgba(255, 255, 255, 0.1) inset; } html[data-theme="dark"] .dose-bar-lux .progress-fill.dose-green { box-shadow: 0 0 12px rgba(var(--bio-serotonin-rgb), 0.28); } /* ---- Vitality Lux: AMAI Intelligence signature card ---- */ .ai-intelligence-card { margin-top: 1.25rem; padding: 1rem 1.125rem; border-radius: 16px; border: 1px solid rgba(var(--gold-rgb), 0.32); background: linear-gradient(135deg, rgba(var(--gold-tint-rgb), 0.85) 0%, color-mix(in srgb, var(--surface) 92%, rgb(var(--gold-rgb)) 8%) 100%); box-shadow: var(--shadow-glow-gold); position: relative; overflow: hidden; } .ai-intelligence-card::before { content: ''; position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: radial-gradient(circle, rgba(var(--gold-rgb), 0.22) 0%, transparent 70%); pointer-events: none; } .ai-intelligence-card__label { font-family: var(--font-heading); font-size: var(--text-micro); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(var(--gold-rgb)); margin-bottom: 0.5rem; position: relative; z-index: 1; } html[data-theme="dark"] .ai-intelligence-card { background: linear-gradient(135deg, rgba(var(--gold-tint-rgb), 0.55) 0%, rgba(var(--surface-2), 0.95) 100%); border-color: rgba(var(--gold-rgb), 0.28); } /* ---- Vitality Lux: bottom navigation ---- */ .app-shell-nav { background: var(--surface-elevated) !important; border-top: 1px solid var(--border) !important; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.04); z-index: 50; isolation: isolate; } html[data-theme="dark"] .app-shell-nav { background: var(--surface) !important; box-shadow: 0 -4px 28px rgba(0, 0, 0, 0.35); } .nav-active { color: rgb(var(--emerald-rgb)) !important; } .nav-active-label { color: rgb(var(--emerald-deep-rgb)) !important; } html[data-theme="dark"] .nav-active-label { color: rgb(var(--emerald-rgb)) !important; } .nav-inactive { color: rgb(var(--muted-rgb)) !important; opacity: 0.72; } .app-shell-header { background: rgba(255, 255, 255, 0.92) !important; background: color-mix(in srgb, var(--surface-elevated) 92%, transparent) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: var(--border) !important; } html[data-theme="dark"] .app-shell-header { background: rgba(22, 19, 13, 0.92) !important; background: color-mix(in srgb, var(--surface-elevated) 92%, transparent) !important; } /* Nutrition: компактная гидратация */ .hydro-card { padding: 14px 16px !important; margin-bottom: 12px !important; } .hydro-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .hydro-card__value { font-family: var(--font-heading); font-size: var(--text-body-lg); font-weight: 700; line-height: 1; } .hydro-card__actions { display: flex; align-items: center; gap: 6px; margin-top: 10px; } .hydro-card__bar { margin-top: 2px; } .hydro-btn { padding: 8px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; line-height: 1; transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .hydro-btn:active { transform: scale(0.97); } .hydro-btn--minus { width: 2.75rem; flex-shrink: 0; background: var(--surface); border: 1px solid var(--line); color: var(--muted); } .hydro-btn--plus { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line); color: var(--ink); } .card-dark { background: linear-gradient(150deg, color-mix(in srgb, var(--surface-2) 95%, rgb(var(--emerald-rgb)) 5%) 0%, color-mix(in srgb, var(--bg) 90%, rgb(var(--gold-rgb)) 10%) 100%); color: rgb(var(--ink-rgb)); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-primary); border: 1px solid rgba(var(--gold-rgb), 0.18); margin-bottom: 16px; position: relative; overflow: hidden; } html:not([data-theme]) .card-dark:not(.cycle-forecast), html[data-theme="white"] .card-dark:not(.cycle-forecast), html[data-theme="pink"] .card-dark:not(.cycle-forecast), html[data-theme="blue"] .card-dark:not(.cycle-forecast), html[data-theme="lime"] .card-dark:not(.cycle-forecast) { background: #FFFFFF; border-color: rgba(23, 23, 23, 0.06); box-shadow: 0 6px 28px rgba(23, 23, 23, 0.07), 0 1px 0 rgba(255, 255, 255, 0.95) inset; } html:not([data-theme]) .card-dark, html[data-theme="white"] .card-dark, html[data-theme="pink"] .card-dark, html[data-theme="blue"] .card-dark, html[data-theme="lime"] .card-dark { color: var(--ink); } html[data-theme="dark"] .card-dark:not(.cycle-forecast) { background: linear-gradient(150deg, #18201C 0%, #0B0D0C 100%); color: rgb(var(--ink-rgb)); border-color: rgba(var(--gold-rgb), 0.22); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55); } /* ---- Cycle phase accents: Capital body forecast ---- */ .cycle-forecast { transition: background 0.55s ease, border-color 0.55s ease, box-shadow 0.55s ease; } .cycle-forecast::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; } .cycle-forecast::after { content: ''; position: absolute; top: -28%; right: -18%; width: 58%; height: 78%; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(44px); } .cycle-forecast__label, .cycle-forecast__icon { color: rgb(var(--gold-rgb)); transition: color 0.45s ease; } .cycle-forecast--ovulation { background: linear-gradient(152deg, color-mix(in srgb, var(--emerald-tint) 48%, var(--surface-elevated)) 0%, color-mix(in srgb, var(--surface-elevated) 84%, rgb(var(--emerald-rgb)) 16%) 46%, color-mix(in srgb, var(--bg) 78%, rgb(var(--emerald-rgb)) 22%) 100%); border-color: rgba(var(--emerald-rgb), 0.26); box-shadow: var(--shadow-primary), var(--shadow-glow-emerald); } .cycle-forecast--ovulation::before { background: linear-gradient(180deg, rgba(var(--emerald-rgb), 0.14) 0%, transparent 44%); } .cycle-forecast--ovulation::after { background: radial-gradient(circle, rgba(var(--emerald-rgb), 0.24) 0%, transparent 68%); } .cycle-forecast--ovulation .cycle-forecast__label, .cycle-forecast--ovulation .cycle-forecast__icon { color: rgb(var(--emerald-deep-rgb)); } .cycle-forecast--luteal { background: linear-gradient(152deg, color-mix(in srgb, var(--gold-tint) 44%, var(--surface-elevated)) 0%, color-mix(in srgb, var(--surface-elevated) 86%, rgb(var(--gold-rgb)) 14%) 48%, color-mix(in srgb, var(--bg) 82%, rgb(var(--gold-rgb)) 18%) 100%); border-color: rgba(var(--gold-rgb), 0.3); box-shadow: var(--shadow-primary), var(--shadow-glow-gold); } .cycle-forecast--luteal::before { background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.16) 0%, transparent 42%); } .cycle-forecast--luteal::after { background: radial-gradient(circle, rgba(var(--gold-rgb), 0.26) 0%, transparent 68%); } .cycle-forecast--luteal .cycle-forecast__label, .cycle-forecast--luteal .cycle-forecast__icon { color: rgb(var(--gold-deep-rgb)); } .cycle-forecast--follicular, .cycle-forecast--menstruation { background: linear-gradient(152deg, color-mix(in srgb, var(--emerald-tint) 26%, var(--surface-elevated)) 0%, color-mix(in srgb, var(--surface-elevated) 88%, rgb(var(--emerald-rgb)) 6%) 38%, color-mix(in srgb, var(--gold-tint) 32%, var(--surface-elevated)) 72%, color-mix(in srgb, var(--bg) 84%, rgb(var(--gold-rgb)) 16%) 100%); border-color: rgba(var(--gold-rgb), 0.22); box-shadow: var(--shadow-primary), 0 0 20px rgba(var(--emerald-rgb), 0.06), 0 0 20px rgba(var(--gold-rgb), 0.08); } .cycle-forecast--follicular::before, .cycle-forecast--menstruation::before { background: linear-gradient(125deg, rgba(var(--emerald-rgb), 0.1) 0%, transparent 42%, rgba(var(--gold-rgb), 0.12) 100%); } .cycle-forecast--follicular::after, .cycle-forecast--menstruation::after { background: radial-gradient(ellipse at 70% 20%, rgba(var(--gold-rgb), 0.18) 0%, rgba(var(--emerald-rgb), 0.12) 42%, transparent 72%); } .cycle-forecast--follicular .cycle-forecast__label, .cycle-forecast--follicular .cycle-forecast__icon, .cycle-forecast--menstruation .cycle-forecast__label, .cycle-forecast--menstruation .cycle-forecast__icon { color: color-mix(in srgb, rgb(var(--emerald-deep-rgb)) 55%, rgb(var(--gold-rgb)) 45%); } html[data-theme="dark"] .cycle-forecast--luteal .cycle-forecast__body { color: color-mix(in srgb, rgb(var(--ink-rgb)) 72%, rgb(var(--gold-rgb)) 28%); } html[data-theme="dark"] .cycle-forecast--ovulation .cycle-forecast__body { color: color-mix(in srgb, rgb(var(--ink-rgb)) 72%, rgb(var(--emerald-rgb)) 28%); } html[data-theme="dark"] .cycle-forecast--follicular .cycle-forecast__body, html[data-theme="dark"] .cycle-forecast--menstruation .cycle-forecast__body { color: color-mix(in srgb, rgb(var(--ink-rgb)) 80%, rgb(var(--gold-rgb)) 12%); } html[data-theme="dark"] .card-dark.cycle-forecast--ovulation { background: linear-gradient(155deg, rgba(var(--emerald-rgb), 0.32) 0%, rgba(24, 38, 32, 0.97) 40%, rgba(16, 22, 20, 0.99) 100%); border-color: rgba(var(--emerald-rgb), 0.55); box-shadow: 0 0 0 1px rgba(var(--emerald-rgb), 0.14) inset, 0 0 64px rgba(var(--emerald-rgb), 0.32), 0 22px 52px rgba(0, 0, 0, 0.65); } html[data-theme="dark"] .cycle-forecast--ovulation::before { background: linear-gradient(180deg, rgba(var(--emerald-rgb), 0.22) 0%, transparent 50%); } html[data-theme="dark"] .cycle-forecast--ovulation::after { background: radial-gradient(circle, rgba(var(--emerald-rgb), 0.48) 0%, transparent 66%); opacity: 1; filter: blur(52px); } html[data-theme="dark"] .cycle-forecast--ovulation .cycle-forecast__label, html[data-theme="dark"] .cycle-forecast--ovulation .cycle-forecast__icon { color: rgb(var(--emerald-deep-rgb)); filter: drop-shadow(0 0 10px rgba(var(--emerald-rgb), 0.55)); } html[data-theme="dark"] .card-dark.cycle-forecast--luteal { background: linear-gradient(155deg, rgba(var(--gold-rgb), 0.3) 0%, rgba(38, 32, 18, 0.97) 40%, rgba(24, 20, 14, 0.99) 100%); border-color: rgba(var(--gold-rgb), 0.58); box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.12) inset, 0 0 64px rgba(var(--gold-rgb), 0.3), 0 22px 52px rgba(0, 0, 0, 0.65); } html[data-theme="dark"] .cycle-forecast--luteal::before { background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.2) 0%, transparent 48%); } html[data-theme="dark"] .cycle-forecast--luteal::after { background: radial-gradient(circle, rgba(var(--gold-rgb), 0.44) 0%, transparent 66%); opacity: 1; filter: blur(52px); } html[data-theme="dark"] .cycle-forecast--luteal .cycle-forecast__label, html[data-theme="dark"] .cycle-forecast--luteal .cycle-forecast__icon { color: rgb(var(--gold-deep-rgb)); filter: drop-shadow(0 0 10px rgba(var(--gold-rgb), 0.5)); } html[data-theme="dark"] .card-dark.cycle-forecast--follicular, html[data-theme="dark"] .card-dark.cycle-forecast--menstruation { background: linear-gradient(155deg, rgba(var(--emerald-rgb), 0.18) 0%, rgba(26, 30, 26, 0.97) 38%, rgba(34, 28, 18, 0.99) 100%); border-color: rgba(var(--gold-rgb), 0.38); box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.08) inset, 0 0 40px rgba(var(--emerald-rgb), 0.18), 0 0 40px rgba(var(--gold-rgb), 0.2), 0 22px 52px rgba(0, 0, 0, 0.65); } html[data-theme="dark"] .cycle-forecast--follicular::before, html[data-theme="dark"] .cycle-forecast--menstruation::before { background: linear-gradient(125deg, rgba(var(--emerald-rgb), 0.16) 0%, transparent 44%, rgba(var(--gold-rgb), 0.16) 100%); } html[data-theme="dark"] .cycle-forecast--follicular::after, html[data-theme="dark"] .cycle-forecast--menstruation::after { background: radial-gradient(ellipse at 70% 20%, rgba(var(--gold-rgb), 0.34) 0%, rgba(var(--emerald-rgb), 0.24) 42%, transparent 72%); opacity: 1; filter: blur(48px); } html[data-theme="dark"] .cycle-forecast--follicular .cycle-forecast__label, html[data-theme="dark"] .cycle-forecast--follicular .cycle-forecast__icon, html[data-theme="dark"] .cycle-forecast--menstruation .cycle-forecast__label, html[data-theme="dark"] .cycle-forecast--menstruation .cycle-forecast__icon { color: color-mix(in srgb, rgb(var(--emerald-deep-rgb)) 55%, rgb(var(--gold-rgb)) 45%); } /* ---- Cycle phase accents: Bio wave chart ---- */ .cycle-wave-card { position: relative; } .cycle-wave-card__accent { position: absolute; left: 0; top: 12%; bottom: 12%; width: 3px; border-radius: 9999px; background: linear-gradient(180deg, rgba(var(--emerald-rgb), 0.55) 0%, rgba(var(--gold-rgb), 0.65) 100%); opacity: 0.55; pointer-events: none; z-index: 1; } .cycle-wave-line { transition: stroke 0.45s ease; } .cycle-dot { transition: color 0.45s ease; } .cycle-dot__aura { fill-opacity: 0.18; animation: cycle-dot-pulse 3.2s ease-in-out infinite; } @keyframes cycle-dot-pulse { 0%, 100% { fill-opacity: 0.12; } 50% { fill-opacity: 0.28; } } @media (prefers-reduced-motion: reduce) { .cycle-dot__aura { animation: none; fill-opacity: 0.2; } } .cycle-dot--ovulation { color: rgb(var(--emerald-deep-rgb)); } .cycle-dot--luteal { color: rgb(var(--gold-rgb)); } .cycle-dot--follicular { color: color-mix(in srgb, rgb(var(--emerald-rgb)) 52%, rgb(var(--gold-rgb)) 48%); } .cycle-dot--neutral { color: rgb(var(--gold-rgb)); } .cycle-label { color: var(--muted); transition: color 0.45s ease; } .cycle-label--follicular.cycle-label--active { color: color-mix(in srgb, rgb(var(--emerald-deep-rgb)) 50%, rgb(var(--gold-rgb)) 50%); } .cycle-label--ovulation.cycle-label--active { color: rgb(var(--emerald-deep-rgb)); } .cycle-label--luteal.cycle-label--active { color: rgb(var(--gold-rgb)); } html[data-theme="dark"] .cycle-wave-card__accent { opacity: 0.85; box-shadow: 0 0 10px currentColor; } html[data-theme="dark"] .cycle-wave-card--ovulation { border-color: rgba(var(--emerald-rgb), 0.3); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 0 32px rgba(var(--emerald-rgb), 0.18); } html[data-theme="dark"] .cycle-wave-card--luteal { border-color: rgba(var(--gold-rgb), 0.32); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 0 32px rgba(var(--gold-rgb), 0.2); } html[data-theme="dark"] .cycle-wave-card--follicular, html[data-theme="dark"] .cycle-wave-card--menstruation { border-color: rgba(var(--gold-rgb), 0.22); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 0 24px rgba(var(--emerald-rgb), 0.1), 0 0 24px rgba(var(--gold-rgb), 0.12); } html[data-theme="dark"] .cycle-wave-line { filter: drop-shadow(0 0 4px rgba(var(--emerald-rgb), 0.35)) drop-shadow(0 0 6px rgba(var(--gold-rgb), 0.2)); } html[data-theme="dark"] .cycle-dot__aura { fill-opacity: 0.32; } html[data-theme="dark"] .cycle-dot--ovulation { filter: drop-shadow(0 0 6px rgba(var(--emerald-rgb), 0.55)); } html[data-theme="dark"] .cycle-dot--luteal { filter: drop-shadow(0 0 6px rgba(var(--gold-rgb), 0.5)); } html[data-theme="dark"] .cycle-dot--follicular { filter: drop-shadow(0 0 5px rgba(var(--emerald-rgb), 0.28)) drop-shadow(0 0 5px rgba(var(--gold-rgb), 0.22)); } html[data-theme="dark"] .cycle-label--ovulation.cycle-label--active { text-shadow: 0 0 12px rgba(var(--emerald-rgb), 0.45); } html[data-theme="dark"] .cycle-label--luteal.cycle-label--active { text-shadow: 0 0 12px rgba(var(--gold-rgb), 0.42); } html[data-theme="dark"] .cycle-label--follicular.cycle-label--active { text-shadow: 0 0 10px rgba(var(--gold-rgb), 0.28); } .cycle-wave-card--ovulation .cycle-wave-card__accent { background: linear-gradient(180deg, rgba(var(--emerald-deep-rgb), 0.75) 0%, rgba(var(--emerald-rgb), 0.35) 100%); } .cycle-wave-card--luteal .cycle-wave-card__accent { background: linear-gradient(180deg, rgba(var(--gold-deep-rgb), 0.7) 0%, rgba(var(--gold-rgb), 0.4) 100%); } .cycle-wave-card--follicular .cycle-wave-card__accent, .cycle-wave-card--menstruation .cycle-wave-card__accent { background: linear-gradient(180deg, rgba(var(--emerald-rgb), 0.55) 0%, rgba(var(--gold-rgb), 0.65) 100%); } .progress-bg { background: color-mix(in srgb, var(--bg-2) 70%, transparent); height: 6px; border-radius: 9999px; overflow: hidden; width: 100%; } .progress-fill { background: var(--ink-2); height: 100%; border-radius: 9999px; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .progress-fill.gold { background: var(--gold); } .progress-fill.dark { background: var(--ink-2); } .progress-fill.light { background: var(--muted); } .progress-fill.rose { background: var(--rose); } .progress-fill.dose-green { background: rgb(var(--bio-serotonin-rgb)); } .progress-fill.dose-pink { background: rgb(var(--bio-oxytocin-deep-rgb)); } .progress-fill.dose-blue { background: rgb(var(--bio-endorphin-deep-rgb)); } .progress-fill.dose-black { background: rgb(var(--bio-melatonin-deep-rgb)); } html[data-theme="dark"] .progress-fill.dose-black { background: rgb(var(--bio-melatonin-rgb)); } .pb-safe { padding-bottom: calc(88px + env(safe-area-inset-bottom)); } /* Экран Шефа сам занимает высоту до инпута — лишний pb-safe даёт пустой «полэкрана» под лентой при прокрутке страницы. */ .pb-safe:has(.chef-layout) { padding-bottom: 0; } ::-webkit-scrollbar { display: none; } select.ob-select { appearance: none; background-color: transparent; } /* Date/time inputs must keep their native picker. Using appearance:none here strips the calendar/clock button (so on desktop there is no way to open the picker) and breaks the native tap-to-open on mobile. Keep them native and only make the background transparent to match the UI. */ input[type="time"], input[type="date"] { background-color: transparent; } input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { opacity: 1; cursor: pointer; } /* Profile DOB — custom locale calendar (native date picker follows OS locale on iOS). */ .dob-calendar-host { border: 1px solid var(--brand-line, #E8E4DC); border-radius: 1rem; overflow: hidden; background: var(--brand-bg, #FAF9F7); } .cycle-date-display { display: block; width: 100%; min-height: 2.75rem; line-height: 2.75rem; text-align: right; padding-inline: 0.5rem; font-size: 16px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-display="standalone"] .cycle-date-display { min-height: 3rem; line-height: 3rem; padding-inline: 0.75rem; } .cycle-cal-day--disabled { opacity: 0.28; cursor: not-allowed; } /* Homeostasis card — long titles wrap; full-width row (uppercase blocks hyphens). */ .card-homeo .homeo-card-head { min-width: 0; } .card-homeo .homeo-card-title { display: block; margin-top: 0.375rem; overflow-wrap: anywhere; word-wrap: break-word; line-height: 1.3; max-width: 100%; } /* Cycle parameters — strict right-aligned value column, date on one line */ .cycle-settings-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; } .cycle-settings-row__label { flex: 1 1 auto; min-width: 0; max-width: 46%; font-family: var(--font-heading, 'Montserrat', sans-serif); font-size: 12px; font-weight: 400; color: var(--ink-2); } html[data-theme="dark"] .cycle-settings-row__label { color: var(--muted-2); } .cycle-settings-row__value { flex: 0 0 11.5rem; width: 11.5rem; max-width: 54%; display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem; } .cycle-settings-row__unit { flex: 0 0 auto; } .cycle-date-picker-wrap { position: relative; justify-content: flex-end; } .cycle-history-calendar { border: 1px solid var(--brand-line, #E8E4DC); border-radius: 1rem; overflow: hidden; background: var(--brand-bg, #FAF9F7); } .cycle-cal__head { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--brand-line, #E8E4DC); background: #fff; } .cycle-cal__title { font-family: var(--font-heading, 'Montserrat', system-ui, sans-serif); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-ink, #171717); } .cycle-cal__nav { width: 2rem; height: 2rem; border-radius: 999px; border: 1px solid var(--brand-line, #E8E4DC); background: #fff; color: var(--brand-gold, #C9A227); font-size: 1.1rem; line-height: 1; cursor: pointer; } .cycle-cal__weekdays, .cycle-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; padding: 0.75rem 0.85rem; } .cycle-cal__weekdays span { text-align: center; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-muted, #8A8578); } .cycle-cal-day { aspect-ratio: 1; min-width: 0; min-height: 2rem; border: none; border-radius: 0.65rem; background: transparent; font-family: var(--font-heading, 'Montserrat', system-ui, sans-serif); font-size: 0.72rem; font-weight: 600; color: var(--brand-ink, #171717); cursor: pointer; } .cycle-cal-day--empty { pointer-events: none; } .cycle-cal-day--marked { background: rgba(201, 162, 39, 0.14); color: var(--brand-gold, #C9A227); } .cycle-cal-day--current { background: var(--brand-gold, #C9A227); color: #fff; box-shadow: none; font-weight: 700; } .cycle-cal-day--marked.cycle-cal-day--current { background: var(--brand-gold, #C9A227); color: #fff; } .cycle-cal__hint { margin: 0; padding: 0 1rem 0.85rem; font-size: 0.62rem; line-height: 1.45; color: var(--brand-muted, #8A8578); text-align: center; } .compact-input.compact-input--cycle-date-visible { width: 100%; max-width: 100%; min-width: 0; min-height: 2.75rem; text-align: right; padding-inline: 0.5rem; font-size: 16px; font-weight: bold; white-space: nowrap; background: transparent; border: none; outline: none; cursor: pointer; color: rgb(var(--gold-rgb)); -webkit-appearance: none; appearance: auto; } html[data-display="standalone"] .compact-input.compact-input--cycle-date-visible { min-height: 3rem; padding-inline: 0.75rem; } .compact-input.compact-input--cycle-date-visible::-webkit-date-and-time-value { text-align: right; } .compact-input--cycle-num { width: 3.25rem; flex: 0 1 auto; min-width: 0; text-align: right; } /* Compact Profile Inputs */ .compact-input { text-align: right; background: transparent; border: none; outline: none; font-weight: bold; font-size: 16px; color: var(--onyx); width: 80px; } .compact-input::placeholder { color: var(--faint); font-weight: normal; } /* Profile blocks — title (accent) vs field rows (secondary) */ .profile-block-head { font-family: var(--font-heading, 'Montserrat', sans-serif); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); } .profile-block-label { font-family: var(--font-heading, 'Montserrat', sans-serif); font-size: 12px; font-weight: 400; color: var(--ink-2); } .profile-block-hint { font-family: var(--font-heading, 'Montserrat', sans-serif); font-size: 11px; font-weight: 400; color: var(--ink-2); margin-top: 0.25rem; } html[data-theme="dark"] .profile-block-label, html[data-theme="dark"] .profile-block-hint { color: var(--muted-2); } .profile-block-subhead { font-family: var(--font-heading, 'Montserrat', sans-serif); font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 0.5rem; } .profile-block-detail { font-size: 12px; font-weight: 400; line-height: 1.625; color: var(--ink-2); } html[data-theme="dark"] .profile-block-detail { color: var(--muted-2); } .profile-personalization-field { font-family: var(--font-body); } /* Sleep window: dual-handle range (bedtime -> wake). Two overlaid range inputs whose tracks are click-through (pointer-events:none) while their thumbs stay interactive, so each handle can be dragged independently. */ .dual-range { position: relative; height: 40px; margin-top: 6px; } .dual-range .dr-track, .dual-range .dr-fill { position: absolute; border-radius: 3px; pointer-events: none; } .dual-range .dr-track { top: 18px; left: 0; right: 0; height: 4px; background: color-mix(in srgb, var(--line-2) 80%, transparent); box-shadow: 0 1px 2px rgba(var(--ink-rgb), 0.04) inset; border-radius: 9999px; } .dual-range .dr-fill { top: 18px; height: 4px; background: linear-gradient(90deg, var(--ink-2) 0%, var(--ink) 100%); box-shadow: 0 0 8px rgba(var(--ink-rgb), 0.12), 0 1px 0 rgba(255,255,255,0.2) inset; border-radius: 9999px; } html[data-theme="dark"] .dual-range .dr-fill { background: linear-gradient(90deg, rgba(var(--emerald-rgb), 0.55) 0%, rgba(var(--gold-rgb), 0.45) 100%); box-shadow: 0 0 10px rgba(var(--emerald-rgb), 0.22), 0 0 8px rgba(var(--gold-rgb), 0.16); } .dual-range input[type="range"] { position: absolute; top: 0; left: 0; width: 100%; height: 40px; margin: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; } .dual-range input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: transparent; } .dual-range input[type="range"]::-moz-range-track { height: 4px; background: transparent; } .dual-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: var(--surface); border: 3px solid var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,0.25); cursor: pointer; } .dual-range input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 3px solid var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,0.25); cursor: pointer; } /* Modal Overlay */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); z-index: 100; display: flex; justify-content: center; align-items: flex-end; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal-content { background: var(--surface); width: 100%; max-width: 450px; border-radius: 32px 32px 0 0; padding: 32px 24px 40px; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); max-height: 90vh; max-height: 90dvh; overflow-y: auto; } .modal-overlay.active .modal-content { transform: translateY(0); } /* Radio Tabs for Food Configurator */ .radio-tab-group { display: flex; background: var(--bg); border-radius: 12px; padding: 4px; border: 1px solid var(--line); } .radio-tab { flex: 1; text-align: center; padding: 8px 4px; border-radius: 8px; font-size: 11px; font-weight: 700; color: var(--muted); cursor: pointer; transition: all 0.2s; text-transform: uppercase; letter-spacing: 0.05em; } .radio-tab.active { background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,0.05); border: 1px solid var(--line); } /* Food configurator — compact luxury header (title + kcal). Explicit sizes so Tailwind utility classes cannot override the scale. */ .food-cfg-header { /* Title → macros: tighter (was ~mb-4 / 1rem; two steps down ≈ 0.5rem) */ margin-bottom: 0.5rem; } .food-cfg-title { font-family: 'Montserrat', sans-serif; font-size: 1.125rem; /* 18px — matches photo scale */ font-weight: 600; line-height: 1.12; color: var(--ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } .food-cfg-kcal { text-align: right; flex-shrink: 0; opacity: 0.9; } .food-cfg-kcal-value { font-family: 'Montserrat', sans-serif; font-size: 1.375rem; /* 22px — secondary to the title */ font-weight: 600; line-height: 1; color: var(--ink); } .food-cfg-kcal-unit { font-size: 7px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 2px; } #food-modal-content { position: relative; } .food-cfg-close { position: absolute; top: 0; right: 0; z-index: 2; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; transition: transform .12s ease, border-color .2s ease; } .food-cfg-close:hover { border-color: var(--line-3); } .food-cfg-close:active { transform: scale(0.92); } /* Food configurator — macros in one horizontal row (scroll on narrow screens) */ .food-cfg-macros { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .food-cfg-macros::-webkit-scrollbar { display: none; } .food-cfg-macros__item { flex: 1 0 20%; min-width: 3.25rem; text-align: center; } .food-cfg-macros__item + .food-cfg-macros__item { border-left: 1px solid var(--line); } /* Custom Scrollbar for modal */ .modal-content::-webkit-scrollbar { width: 4px; } .modal-content::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; } /* Splash / launch screen (pure CSS animation) */ #splash { position: fixed; inset: 0; z-index: 9999; background: var(--bg); display: flex; align-items: center; justify-content: center; transition: opacity .6s ease; } #splash.splash-out { opacity: 0; pointer-events: none; } .splash-inner { display: flex; flex-direction: column; align-items: center; } .splash-title-row { display: inline-flex; align-items: flex-start; } .splash-title { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--ink); font-size: clamp(40px, 13vw, 62px); letter-spacing: .28em; padding-left: .28em; line-height: 1; opacity: 0; transform: translateY(10px); animation: splashFade .9s ease .25s forwards; } .splash-spark { color: var(--green); /* сама SVG-искра красится через fill="currentColor" */ margin-top: .35em; margin-left: .1em; opacity: 0; transform: scale(.5) rotate(-8deg); animation: splashSpark 1s cubic-bezier(.2,.8,.2,1) .55s forwards; } .splash-sub { font-family: 'Montserrat', sans-serif; font-weight: 600; color: var(--muted); font-size: clamp(8px, 2.7vw, 11px); letter-spacing: .42em; padding-left: .42em; text-transform: uppercase; margin-top: 16px; opacity: 0; transform: translateY(8px); animation: splashFade .9s ease 1.15s forwards; } @keyframes splashFade { to { opacity: 1; transform: translateY(0); } } @keyframes splashSpark { to { opacity: 1; transform: scale(1) rotate(0); } } /* Тэглайн сплэша — тем же приёмом и тем же цветом, что и подпись, чуть позже. */ .splash-tag { font-family: 'Montserrat', sans-serif; font-weight: 600; color: var(--muted); font-size: clamp(8px, 2.7vw, 11px); letter-spacing: .42em; padding-left: .42em; text-transform: uppercase; margin-top: 44px; opacity: 0; transform: translateY(8px); animation: splashFade .9s ease 1.55s forwards; } /* ---- Онбординг: обещание ценности (одноразовый экран) ---------------- */ .onb-overlay { position: fixed; inset: 0; z-index: 9000; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 40px 34px calc(40px + env(safe-area-inset-bottom)); opacity: 0; pointer-events: none; transition: opacity .6s ease; } .onb-overlay.active { opacity: 1; pointer-events: auto; } .onb-inner { max-width: 340px; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; } .onb-line { max-width: 300px; font-family: 'Nunito Sans', sans-serif; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--ink); } .onb-line b { font-weight: 700; color: var(--ink); } /* «Ваше тело — это шедевр»: строго тот же размер шрифта, что и строки обещания (.onb-line) выше — та же гарнитура, кегль и интерлиньяж, выделение только насыщенностью. */ .onb-masterpiece { margin-top: 2px; margin-bottom: 2px; font-family: 'Nunito Sans', sans-serif; font-size: 15px; font-weight: 700; line-height: 1.8; letter-spacing: 0; color: var(--ink); text-align: center; } /* Заголовок экрана-обещания: капслук, НАД строками-обещаниями. Трекинг обычный (неразреженный): на широких экранах — одна строка, на узких перенос после «СЕБЯ» (Искусство чувствовать себя / безупречно). .amai-section-title — тот же кегль для заголовков внутри гостевого превью (Метаболический капитал, Шеф, Волна энергии, DOSE). */ .onb-final, .amai-section-title { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: .02em; line-height: 1.6; text-transform: uppercase; } .onb-final { margin-bottom: 8px; } .onb-btn { margin-top: 16px; cursor: pointer; background: transparent; color: var(--ink); border: 1px solid var(--ink); border-radius: 10px; padding: 12px 44px; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; transition: background .18s ease, color .18s ease, transform .12s ease; } .onb-btn:hover { background: var(--ink); color: var(--ink-contrast); } .onb-btn:active { transform: scale(.98); } /* ---- Шеф M: чат ------------------------------------------------------- * * Фиксируем колонку между шапкой приложения и нижней навигацией. * Строка ввода — В ПОТОКЕ (не position:fixed): иначе на iOS Safari * 100dvh/вычитания дают «пустой полэкрана» под коротким ответом. * ------------------------------------------------------------------------ */ .chef-layout { position: fixed; top: 5.75rem; /* плотнее под fixed-шапкой (pt-12 + лого + pb-4) */ left: 0; right: 0; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); z-index: 30; display: flex; flex-direction: column; width: 100%; max-width: var(--chef-max-width); margin: 0 auto; padding: 0 1.25rem; /* = main px-5 */ box-sizing: border-box; min-height: 0; background: var(--bg); } .chef-layout-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; animation: chefFadeIn 0.4s ease-out forwards; } @keyframes chefFadeIn { from { opacity: 0; } to { opacity: 1; } } .chef-layout-body .chef-header { flex-shrink: 0; margin-bottom: 6px; gap: 1.5rem; } .chef-panel-title { font-family: var(--font-heading); letter-spacing: var(--tracking-brand-tight); } .chef-panel-sub { font-family: var(--font-heading); font-size: var(--text-micro); letter-spacing: var(--tracking-brand-micro); } .chef-inputbar-inner { width: 100%; max-width: 100%; margin: 0 auto; } .chef-thread { flex: 1 1 auto; min-height: 0; height: auto; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; padding: 4px 0 10px; } /* Толкает сообщения к низу, когда диалог короткий — без пустого «полэкрана». */ .chef-thread-spacer { flex: 1 1 auto; min-height: 0; pointer-events: none; } .chef-msg { flex: 0 0 auto; width: auto; max-width: min(88%, 340px); box-sizing: border-box; padding: 12px 16px; font-family: var(--font-body); font-size: 14px; line-height: 1.58; white-space: pre-line; overflow-wrap: anywhere; word-break: break-word; -webkit-hyphens: auto; hyphens: auto; } .chef-thread > .flex { flex: 0 0 auto; } .chef-msg-user { align-self: flex-end; max-width: min(82%, 320px); margin-inline-start: 10%; background: linear-gradient(152deg, color-mix(in srgb, var(--gold-tint) 44%, var(--surface-elevated)) 0%, color-mix(in srgb, var(--surface-elevated) 86%, rgb(var(--gold-rgb)) 14%) 48%, color-mix(in srgb, var(--bg) 82%, rgb(var(--gold-rgb)) 18%) 100%); color: var(--ink); border: 1px solid rgba(var(--gold-rgb), 0.3); border-radius: 18px; border-end-end-radius: 4px; box-shadow: 0 4px 18px rgba(var(--gold-rgb), 0.12); } html[data-theme="dark"] .chef-msg-user { background: linear-gradient(145deg, color-mix(in srgb, rgb(var(--emerald-rgb)) 30%, var(--surface-elevated) 70%) 0%, color-mix(in srgb, rgb(var(--emerald-rgb)) 18%, var(--surface) 82%) 100%); color: var(--ink); border-color: rgba(var(--emerald-rgb), 0.32); box-shadow: 0 4px 20px rgba(var(--emerald-rgb), 0.14); } .chef-msg-ai { align-self: flex-start; max-width: min(90%, 360px); margin-inline-end: 6%; background: var(--surface-elevated); color: var(--ink); border: 1px solid rgba(var(--gold-rgb), 0.14); border-radius: 18px; border-end-start-radius: 4px; box-shadow: var(--shadow-soft), 0 4px 20px rgba(var(--ink-rgb), 0.05); position: relative; white-space: normal; } html[data-theme="dark"] .chef-msg-ai { border-color: rgba(var(--gold-rgb), 0.2); box-shadow: var(--shadow-soft), 0 4px 22px rgba(0, 0, 0, 0.28); } .chef-msg-ai .chef-md { white-space: normal; font-family: var(--font-body); } .chef-md-p { margin: 0 0 0.55em; } .chef-md-p:last-child { margin-bottom: 0; } .chef-md-h { font-family: var(--font-heading); font-weight: 700; color: var(--ink); margin: 0.65em 0 0.35em; letter-spacing: 0.02em; } .chef-md-h1 { font-size: 1.05em; } .chef-md-h2 { font-size: 1em; } .chef-md-h3 { font-size: 0.95em; } .chef-md-ul, .chef-md-ol { margin: 0.35em 0 0.65em; padding-inline-start: 1.25rem; } .chef-md-ul { list-style: disc; } .chef-md-ol { list-style: decimal; } .chef-md-ul li, .chef-md-ol li { margin: 0.2em 0; } .chef-md strong { font-weight: 700; } .chef-md em { font-style: italic; } html[data-layout="desktop"] .chef-msg { font-size: 15px; line-height: 1.62; padding: 14px 18px; } html[data-layout="desktop"] .chef-md-p { margin-bottom: 0.6em; } html[data-layout="desktop"] .chef-md-ul, html[data-layout="desktop"] .chef-md-ol { margin: 0.4em 0 0.7em; padding-inline-start: 1.35rem; } html[data-layout="desktop"] .chef-text-input { font-size: 15px; } .chef-voice-row { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 4px; } .chef-voice-btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 9999px; transition: border-color .2s ease, color .2s ease, background-color .2s ease; width: 28px; height: 28px; padding: 0; } .chef-voice-btn:hover { border-color: var(--gold); color: var(--gold); } .chef-voice-btn.is-playing, .chef-voice-btn.is-loading { border-color: rgba(212, 175, 55, 0.55); color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--bg)); } .concierge-avatar-frame { flex-shrink: 0; position: relative; display: block; border-radius: 16px; border: none; outline: none; box-shadow: none; background-color: var(--bg); box-sizing: border-box; padding: 0; overflow: hidden; } /* Портрет консьержа: чуть крупнее crop, без пустого поля над головой. */ .concierge-avatar-frame--header { width: 68px; height: 102px; min-width: 68px; min-height: 102px; max-width: 68px; max-height: 102px; flex: 0 0 68px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--line) 80%, var(--gold) 20%); } .concierge-avatar-img { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; max-width: none; max-height: none; object-fit: cover; object-position: 50% 14%; transform: scale(1.32); transform-origin: 50% 12%; border: none; outline: none; background: transparent; } html[data-theme="dark"] .concierge-avatar-frame { border: none; outline: none; box-shadow: none; background-color: var(--bg); } /* «Шеф думает»: три золотые точки, мягкая волна. */ .chef-typing { display: inline-flex; align-items: center; gap: 5px; padding: 15px 18px; } .chef-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); opacity: .25; animation: chefDot 1.2s ease-in-out infinite; } .chef-dot:nth-child(2) { animation-delay: .18s; } .chef-dot:nth-child(3) { animation-delay: .36s; } @keyframes chefDot { 0%, 100% { opacity: .25; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } } /* Поле ввода сообщения: высота и шрифт как у пузырей диалога. */ .chef-text-input { min-height: 44px; line-height: 1.58; font-family: var(--font-body); font-size: 14px; font-weight: 400; } /* Строка ввода: в потоке колонки Шефа (над нижней навигацией). */ .chef-inputbar { position: relative; inset-inline: auto; bottom: auto; z-index: 1; flex-shrink: 0; padding: 0 0 8px; background: var(--bg); } /* Микрофон в режиме записи: золотой пульс. */ .chef-mic-live { border-color: var(--gold) !important; color: var(--gold) !important; animation: chefMicPulse 1.4s ease-out infinite; } @keyframes chefMicPulse { 0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, .35); } 100% { box-shadow: 0 0 0 12px rgba(212, 175, 55, 0); } } /* Фото внутри пузыря сообщения. */ .chef-bubble-img { display: block; max-width: 220px; width: 100%; border-radius: 12px; object-fit: cover; } /* Превью прикреплённого, ещё не отправленного фото над строкой ввода. */ .chef-attach-chip { position: relative; display: inline-block; margin: 0 auto 8px; max-width: 96px; } .chef-attach-chip img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 14px; border: 1px solid var(--line-2); box-shadow: 0 4px 20px rgba(0,0,0,0.08); } .chef-attach-x { position: absolute; top: -8px; inset-inline-end: -8px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--ink-contrast); border-radius: 9999px; box-shadow: 0 2px 6px rgba(0,0,0,0.25); } /* Чип PDF/документа (анализ крови) над строкой ввода. */ .chef-attach-file { max-width: min(280px, 100%); } .chef-attach-file-inner { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 600; box-shadow: 0 4px 20px rgba(0,0,0,0.06); } .chef-attach-file-inner span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; } .chef-bubble-file { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(var(--gold-rgb), 0.28); background: rgba(var(--gold-rgb), 0.08); font-size: 11px; font-weight: 600; max-width: 100%; } .chef-bubble-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Подсказки под приветствием (пустой чат). */ .chef-chip { border: 1px solid var(--line-2); background: var(--surface); color: var(--muted-2); border-radius: 9999px; padding: 8px 14px; font-size: 11px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, color .15s ease; } .chef-chip:hover { border-color: var(--gold); color: var(--ink); } /* ------------------------------------------------------------------ * * Выезжающее меню аккаунта (открывается по аватару в шапке). * Позиционирование живёт здесь, а не только в Tailwind-классах, чтобы * оверлей работал и при недоступном CDN Tailwind. * ------------------------------------------------------------------ */ #app-menu { position: fixed; inset: 0; z-index: 50; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .25s ease; } #app-menu.open { visibility: visible; opacity: 1; pointer-events: auto; } #app-menu .menu-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.35); } #app-menu .menu-panel { position: absolute; top: 0; inset-inline-end: 0; height: 100%; width: var(--menu-panel-width); max-width: var(--menu-panel-max-width); background: var(--surface); border-inline-start: 1px solid var(--line); box-shadow: -20px 0 60px -20px rgba(0,0,0,0.45); transform: translateX(100%); transition: transform .3s cubic-bezier(.22,.61,.36,1); } html[data-layout="desktop"] #app-menu .menu-panel { top: 1rem; height: calc(100% - 2rem); inset-inline-end: max(1rem, calc(50% - var(--shell-max-width) / 2)); border-radius: 20px 0 0 20px; box-shadow: -12px 0 48px -12px rgba(0, 0, 0, 0.18); } html[data-layout="desktop"][dir="rtl"] #app-menu .menu-panel { border-radius: 0 20px 20px 0; box-shadow: 12px 0 48px -12px rgba(0, 0, 0, 0.18); } html[data-layout="desktop"] #app-menu .menu-panel .menu-item-label { font-size: 15px; } #app-menu.open .menu-panel { transform: translateX(0); } [dir="rtl"] #app-menu .menu-panel { box-shadow: 20px 0 60px -20px rgba(0,0,0,0.45); transform: translateX(-100%); } [dir="rtl"] #app-menu.open .menu-panel { transform: translateX(0); } @media (prefers-reduced-motion: reduce) { #app-menu, #app-menu .menu-panel { transition: none; } } /* ------------------------------------------------------------------ * * Cookie consent — минималистичный плавающий баннер (Dior / AMAI) * ------------------------------------------------------------------ */ .cookie-banner { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 14px; width: min(520px, calc(100vw - 32px)); padding: 14px 16px 14px 18px; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06); background: rgba(255, 255, 255, 0.94); background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } html[data-theme="dark"] .cookie-banner { background: rgba(22, 19, 13, 0.94); background: color-mix(in srgb, var(--surface) 94%, transparent); } .cookie-banner.hidden { display: none; } .cookie-banner-text { flex: 1; min-width: 0; margin: 0; font-family: 'Nunito Sans', sans-serif; font-size: 11px; font-weight: 500; line-height: 1.45; letter-spacing: 0.01em; color: var(--ink); } .cookie-banner-btn { flex-shrink: 0; border: 1px solid var(--line-2); border-radius: 9999px; padding: 9px 16px; font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; white-space: nowrap; } .cookie-banner-btn:hover { border-color: var(--gold); color: var(--gold-deep); } .cookie-banner-btn:active { transform: scale(0.98); } @media (max-width: 480px) { .cookie-banner { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; } .cookie-banner-btn { width: 100%; text-align: center; } } /* ==================================================================== * * РИТУАЛЫ · ПРАКТИКИ (Циркадное голодание · Вакуум · Перезапись) * Карточки на экране «Ритуалы» + полноэкранные оверлеи практик. * Только добавления; тексты приходят из i18n, здесь лишь оформление. * ==================================================================== */ /* --- Карточка практики в меню --- */ .practice-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 16px 18px; transition: border-color .25s ease, box-shadow .25s ease, transform .12s ease; } .practice-card:hover { border-color: var(--line-3); } .practice-card:active { transform: scale(0.99); } .practice-card .pc-icon { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); transition: background-color .25s ease, border-color .25s ease, color .25s ease; } .practice-card .pc-check { width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid var(--line-2); color: transparent; transition: all .3s ease; } /* Статус «выполнено» — изумрудное свечение. */ .practice-card.is-done { border-color: var(--emerald); background: var(--emerald-tint); } .practice-card.is-done .pc-icon { background: var(--emerald); border-color: var(--emerald); color: #FFFFFF; } .practice-card.is-done .pc-check { background: var(--emerald); border-color: var(--emerald); color: #FFFFFF; transform: scale(1.08); } /* ---- Особые планы питания (Routines) ---- */ .mp-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 16px 18px; transition: border-color .25s ease, box-shadow .25s ease, transform .12s ease; } .mp-card:hover { border-color: rgba(212, 175, 55, 0.45); } .mp-card:active { transform: scale(0.99); } .mp-card--active { border-color: rgba(212, 175, 55, 0.4); box-shadow: 0 0 18px rgba(212, 175, 55, 0.1); } .mp-card-icon { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--bg); border: 1px solid rgba(212, 175, 55, 0.28); color: var(--gold-deep); } .mp-card-body { flex: 1; min-width: 0; } .mp-card-title { display: block; font-weight: 600; font-size: 14px; color: var(--ink); } .mp-card-sub { display: block; font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-top: 4px; } .mp-card-sub--story { font-family: inherit; font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.45; color: var(--muted-2, #8A8680); } .mp-card-chevron { color: var(--muted); flex-shrink: 0; } .mp-card-action { flex-shrink: 0; padding: 8px 14px; border-radius: 12px; background: var(--ink); color: var(--ink-contrast); font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; } /* ---- Музыка (Routines) ---- */ .music-track-list { display: flex; flex-direction: column; gap: 0; } .music-track-item { border-bottom: 1px solid var(--line); } .music-track-item:last-child { border-bottom: none; } .music-track-item .how-calc-note { margin: 0 8px 12px 68px; } .music-track-row { display: flex; align-items: center; gap: 12px; background: transparent; border: none; border-radius: 0; padding: 12px 8px; box-shadow: none; transition: background-color .2s ease; } .music-track-row.is-active { background: var(--gold-tint); box-shadow: none; } .music-track-row.is-locked { opacity: 0.92; } .music-track-cover { width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); position: relative; } .music-track-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .music-track-cover img.is-fallback { display: none; } .music-track-cover-fallback { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: var(--gold-deep); } .music-track-cover img.is-fallback + .music-track-cover-fallback { display: flex; } .music-track-body { flex: 1; min-width: 0; text-align: left; background: none; border: none; padding: 0; cursor: pointer; } .music-track-title { display: block; font-weight: 600; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .music-track-meta { display: block; margin-top: 3px; } .music-track-play { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); transition: background-color .2s ease, border-color .2s ease, transform .12s ease; } .music-track-play:active { transform: scale(0.94); } .music-track-play.is-active { background: var(--emerald); border-color: var(--emerald); color: #fff; } .music-track-play.is-locked { background: transparent; border-color: rgba(212, 175, 55, 0.35); color: var(--gold-deep); } /* ---- Аккордеон «Музыка для практик» ---- */ .music-accordion-card { display: block; padding: 0; overflow: hidden; box-shadow: none; } .music-accordion-card:hover { border-color: var(--line-3); } .music-accordion-header { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; text-align: left; cursor: pointer; background: transparent; border: none; box-shadow: none; -webkit-appearance: none; appearance: none; outline: none; } .music-accordion-header:hover, .music-accordion-header:focus, .music-accordion-header:focus-visible, .music-accordion-header:active { background: transparent; box-shadow: none; outline: none; } .music-accordion-chevron { flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--gold); } .music-accordion-content { box-shadow: none; transition: max-height 0.3s ease, opacity 0.3s ease; max-height: 0; opacity: 0; overflow: hidden; border-top: 1px solid transparent; } .music-accordion-content.open { max-height: 480px; opacity: 1; border-top-color: var(--line); } .music-accordion-content .music-track-list { padding: 0 18px 12px; } /* ---- Мини-плеер (фиксированный, над нижней навигацией) ---- */ body.has-mini-player main { padding-bottom: 7.5rem; } .audio-mini-player { position: fixed; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom)); z-index: 45; max-width: 28rem; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255, 255, 255, 0.94); background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08); } .amp-cover { width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); position: relative; } .amp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .amp-cover img.is-fallback { display: none; } .amp-cover .music-track-cover-fallback { display: none; align-items: center; justify-content: center; color: var(--gold-deep); } .amp-cover img.is-fallback + .music-track-cover-fallback { display: flex; position: absolute; inset: 0; } .amp-main { flex: 1; min-width: 0; } .amp-info { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; } .amp-title { font-weight: 600; font-size: 12px; color: var(--ink); flex: 1; min-width: 0; } .amp-seek { width: 100%; height: 4px; appearance: none; -webkit-appearance: none; background: var(--line); border-radius: 9999px; cursor: pointer; } .amp-seek::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--emerald); border: 2px solid var(--surface); } .amp-seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--emerald); border: 2px solid var(--surface); } .amp-controls { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .amp-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; border: none; background: transparent; color: var(--ink); } .amp-btn-main { width: 40px; height: 40px; background: var(--ink); color: var(--ink-contrast); } .amp-btn-close { width: 32px; height: 32px; color: var(--muted); margin-left: 2px; } .amp-btn:active { transform: scale(0.92); } /* ---- Королевский протокол — модалка ---- */ #royal-protocol-host { position: relative; z-index: 140; } .royal-modal-content { max-height: min(92vh, 760px); max-height: min(92dvh, 760px); overflow-y: auto; } .royal-modal-eyebrow { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 8px; } .royal-timeline { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--bg); } .royal-timeline-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); } .royal-timeline-row:last-child { border-bottom: 0; } .royal-timeline-label { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .royal-timeline-value { font-size: 12px; font-weight: 600; color: var(--ink); text-align: right; } .royal-phases { display: flex; flex-direction: column; gap: 10px; } .royal-phase-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); } .royal-phase-num { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; color: var(--gold-deep); letter-spacing: 0.08em; } .royal-phase-title { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--ink); } .royal-phase-range { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); } .royal-phase-food { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted-2, #8A8680); } .royal-principles { list-style: none; margin: 0; padding: 0; } .royal-principle-item { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.55; color: var(--muted-2, #8A8680); margin-top: 8px; } .royal-principle-dot { width: 6px; height: 6px; margin-top: 7px; flex-shrink: 0; border-radius: 999px; background: var(--gold); } .royal-disclaimer { padding: 12px 14px; border-inline-start: 3px solid var(--emerald); border-radius: 0 12px 12px 0; background: var(--emerald-tint); font-size: 11px; line-height: 1.55; color: var(--muted-2, #8A8680); } .royal-disclaimer p { margin: 0; } .royal-progress { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--emerald-deep); margin: 0 0 14px; } .royal-modal-close { display: block; width: 100%; padding: 12px; background: transparent; border: 0; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); cursor: pointer; } /* ---- GENESIS Protocol ---- */ #genesis-protocol-host { position: relative; z-index: 140; } .genesis-blocks { display: flex; flex-direction: column; gap: 12px; } .genesis-block { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); } .genesis-block-eyebrow { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); } .genesis-block-title { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--ink); } .genesis-block-body { margin: 8px 0 0; font-size: 12px; line-height: 1.55; color: var(--muted-2, #8A8680); } .genesis-disclaimer { padding: 14px 16px; border: 1px solid rgba(16, 185, 129, 0.35); border-inline-start: 4px solid var(--emerald); border-radius: 14px; background: var(--emerald-tint); font-size: 12px; line-height: 1.55; color: var(--ink); } .genesis-disclaimer p { margin: 0; } .genesis-chef-note { padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(212, 175, 55, 0.3); background: linear-gradient(135deg, rgba(212,175,55,0.08), rgba(16,185,129,0.06)); font-size: 12px; line-height: 1.55; color: var(--ink); } .genesis-chef-note p { margin: 0; } .genesis-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); transition: border-color .2s ease, box-shadow .2s ease; } .genesis-toggle-row.is-on { border-color: rgba(16, 185, 129, 0.45); box-shadow: 0 0 18px rgba(16, 185, 129, 0.12); } .genesis-toggle-label { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); } .genesis-toggle-hint { margin: 4px 0 0; font-size: 11px; color: var(--muted); } .genesis-toggle { position: relative; width: 52px; height: 30px; flex-shrink: 0; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg); cursor: pointer; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; } .genesis-toggle.is-on { background: var(--emerald); border-color: var(--emerald); } .genesis-toggle-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.15); transition: transform .2s ease; } .genesis-toggle.is-on .genesis-toggle-knob { transform: translateX(22px); } /* ---- Glow Protocol ---- */ #glow-protocol-host { position: relative; z-index: 140; } .glow-example { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); } /* ---- Neuro-Ignition Protocol ---- */ #neuro-ignition-protocol-host { position: relative; z-index: 140; } /* ---- Anti-Jetlag Protocol ---- */ #anti-jetlag-protocol-host { position: relative; z-index: 140; } #apex-protocol-host { position: relative; z-index: 140; } /* --- Полноэкранный оверлей практики («проваливание») --- */ #practice-host { position: relative; z-index: 150; } .practice-overlay { position: fixed; inset: 0; z-index: 150; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0; transform: scale(1.04) translateY(14px); transition: opacity .42s cubic-bezier(.16,1,.3,1), transform .42s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; } .practice-overlay.open { opacity: 1; transform: scale(1) translateY(0); } /* Во время практики — только оверлей упражнения, без карточек экрана и протоколов сзади */ body.practice-open #app-root, body.practice-open #royal-protocol-host, body.practice-open #genesis-protocol-host, body.practice-open #glow-protocol-host, body.practice-open #neuro-ignition-protocol-host, body.practice-open #anti-jetlag-protocol-host, body.practice-open #apex-protocol-host { visibility: hidden; pointer-events: none; } .practice-shell { max-width: 480px; margin: 0 auto; padding: 0 20px calc(48px + env(safe-area-inset-bottom)); min-height: 100%; } .practice-top { display: flex; align-items: center; justify-content: space-between; padding: calc(18px + env(safe-area-inset-top)) 0 14px; position: -webkit-sticky; position: sticky; top: 0; z-index: 5; background-color: var(--bg); background-image: linear-gradient(var(--bg) 78%, transparent); } .practice-eyebrow { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); } .practice-close { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); cursor: pointer; transition: transform .12s ease, border-color .2s ease; } .practice-close:hover { border-color: var(--line-3); } .practice-close:active { transform: scale(0.92); } .practice-title { font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: .01em; color: var(--ink); font-size: 22px; line-height: 1.25; } .practice-lead { font-size: 13px; line-height: 1.7; color: var(--muted-2); font-weight: 400; } /* Segmented control (уровень/протокол) */ .seg-group { display: flex; gap: 8px; } .seg-btn { flex: 1; padding: 12px 6px; border-radius: 12px; cursor: pointer; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; text-align: center; transition: all .2s ease; line-height: 1.35; } .seg-btn small { display: block; font-size: 8px; font-weight: 600; letter-spacing: .04em; opacity: .75; text-transform: none; margin-top: 3px; } .seg-btn.active { border-color: var(--ink); color: var(--ink); background: var(--bg); box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .seg-btn.active.em { border-color: var(--emerald); color: var(--emerald-deep); background: var(--emerald-tint); } .practice-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; cursor: pointer; border: none; background: var(--ink); color: var(--ink-contrast); border-radius: 14px; padding: 16px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; transition: background-color .15s ease, transform .12s ease; } .practice-cta:hover { background: var(--ink-2); } .practice-cta:active { transform: scale(0.99); } .practice-cta.em { background: linear-gradient(135deg, var(--emerald), var(--emerald-deep)); } .practice-cta:disabled { opacity: .3; pointer-events: none; } .practice-ghost { cursor: pointer; background: transparent; color: var(--muted); border: 1px solid var(--line-2); border-radius: 14px; padding: 15px 18px; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; transition: color .2s ease, border-color .2s ease; } .practice-ghost:hover { color: var(--ink); border-color: var(--line-3); } /* --- Круговой прогресс голодания --- */ .fasting-ring-wrap { position: relative; width: 176px; height: 176px; margin: 0 auto; } .fasting-ring-wrap .fr-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 30px; color: var(--ink); } /* --- DOSE: таймер улыбки --- */ .dose-timer-wrap { position: relative; width: 200px; height: 200px; margin: 0 auto; } .dose-timer-wrap .dose-timer-val { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 42px; letter-spacing: .04em; color: var(--ink); transition: color .4s ease, text-shadow .4s ease; } .dose-timer-wrap.is-active { animation: dose-glow-pulse 2.4s ease-in-out infinite; } .dose-timer-wrap.is-active .dose-timer-val { color: var(--emerald-deep); text-shadow: 0 0 24px rgba(16, 185, 129, 0.35), 0 0 48px rgba(212, 175, 55, 0.12); } .dose-timer-wrap.is-active svg circle:last-child { filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.35)); } @keyframes dose-glow-pulse { 0%, 100% { filter: drop-shadow(0 0 0 rgba(16, 185, 129, 0)); transform: scale(1); } 50% { filter: drop-shadow(0 0 14px rgba(16, 185, 129, 0.28)); transform: scale(1.02); } } /* --- Вакуум: дышащий круг --- */ .vacuum-stage { position: relative; width: 240px; height: 240px; margin: 8px auto 4px; display: flex; align-items: center; justify-content: center; } .vacuum-ring-1 { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--line-2); opacity: .7; } .vacuum-ring-2 { position: absolute; inset: 22px; border-radius: 50%; border: 1px dashed var(--line-3); opacity: .6; } .vacuum-blob { position: absolute; width: 150px; height: 150px; border-radius: 50%; background: var(--emerald-tint); box-shadow: none; transition: all .5s ease-out; } .vacuum-center { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; } .vacuum-center .v-phase { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); } .vacuum-center .v-timer { font-family: 'Montserrat', sans-serif; font-size: 30px; font-weight: 300; color: var(--emerald-deep); min-height: 40px; display: flex; align-items: center; } .vacuum-center .v-cycle { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .vacuum-controls { display: flex; justify-content: center; gap: 20px; margin-top: 8px; } .vacuum-btn { width: 62px; height: 62px; border-radius: 9999px; cursor: pointer; display: flex; align-items: center; justify-content: center; border: 4px solid var(--surface); box-shadow: 0 6px 20px rgba(0,0,0,0.10); transition: transform .12s ease; } .vacuum-btn:active { transform: scale(0.94); } .vacuum-btn.play { background: linear-gradient(135deg, var(--emerald), var(--emerald-deep)); color: #FFFFFF; } .vacuum-btn.stop { background: var(--surface); border-color: var(--bg); color: var(--muted); } .vacuum-btn.stop:hover { color: var(--rose); } /* --- Шаги мастера «Перезапись» --- */ .rw-prog { display: flex; gap: 5px; margin-bottom: 22px; } .rw-prog .s { flex: 1; height: 2px; border-radius: 9999px; background: var(--line); transition: background .3s ease, box-shadow .3s ease; } .rw-prog .s.done { background: var(--gold-soft); } .rw-prog .s.active { background: var(--gold); box-shadow: 0 0 6px rgba(212,175,55,.5); } .rw-step { display: none; } .rw-step.vis { display: block; animation: rwIn .38s cubic-bezier(.16,1,.3,1); } @keyframes rwIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .rw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .rw-tile { padding: 15px 16px; text-align: left; cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; transition: all .18s ease; } .rw-tile:hover { border-color: var(--line-3); } .rw-tile.sel { border-color: var(--gold); background: var(--gold-tint); box-shadow: 0 0 0 1px var(--gold); } .rw-tile .tl { display: block; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); margin-bottom: 3px; } .rw-tile .ts { font-size: 12px; font-weight: 400; color: var(--muted-2); line-height: 1.4; } .rw-tile.btile .tl { font-family: 'Nunito Sans', sans-serif; font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.4; margin-bottom: 0; } .rw-field { width: 100%; background: var(--bg); border: 1px solid var(--line-2); border-radius: 14px; padding: 14px 16px; font-family: 'Nunito Sans', sans-serif; font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--ink); outline: none; resize: none; transition: border-color .2s ease, box-shadow .2s ease; } .rw-field::placeholder { color: var(--faint); } .rw-field:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,.10); } .rw-reveal { display: none; margin-top: 8px; } .rw-reveal.open { display: block; } .rw-or { display: flex; align-items: center; gap: 12px; margin: 14px 0; font-family: 'Montserrat', sans-serif; font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); } .rw-or:before, .rw-or:after { content: ''; flex: 1; height: 1px; background: var(--line); } .rw-pill { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 9px 15px; border-radius: 9px; cursor: pointer; border: 1px solid var(--line-2); color: var(--muted); background: var(--surface); transition: all .16s ease; } .rw-pill:hover { border-color: var(--line-3); color: var(--ink); } .rw-pill.sel { border-color: var(--gold); color: var(--gold-deep); background: var(--gold-tint); } .rw-nav { display: flex; gap: 8px; margin-top: 22px; } .rw-nav .practice-cta { flex: 1; } /* Дыхание (шаг «смена состояния») */ .breath-outer { position: relative; width: 180px; height: 180px; margin: 6px auto; } .breath-outer .b1 { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(16,185,129,.28); } .breath-outer .b2 { position: absolute; inset: 14px; border-radius: 50%; border: 1px solid rgba(16,185,129,.16); } .breath-glow { position: absolute; inset: 20px; border-radius: 50%; background: radial-gradient(circle, rgba(16,185,129,.28) 0%, transparent 70%); transform: scale(.4); opacity: .25; transition: transform 1.2s cubic-bezier(.4,0,.2,1), opacity 1.2s ease; } .breath-glow.exp { transform: scale(1.15); opacity: .9; } .breath-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .breath-phase { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--emerald-deep); min-height: 16px; } .breath-num { font-family: 'Montserrat', sans-serif; font-size: 48px; font-weight: 200; line-height: 1; color: var(--ink); } .breath-hint { font-family: 'Montserrat', sans-serif; font-size: 8px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; min-height: 12px; opacity: 0; transition: opacity .4s ease; } /* «Взгляд» — движение глаз за точкой */ .rw-method-tabs .seg-btn { font-size: 10px; padding: 11px 8px; } .gaze-panel { display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: 100%; max-width: 100%; } .gaze-field { position: relative; width: 100%; max-width: min(100%, 280px); aspect-ratio: 1; margin: 0 auto; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); overflow: hidden; } .gaze-dot { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 45%, transparent); will-change: left, top; } .gaze-dot.is-moving { box-shadow: 0 0 16px color-mix(in srgb, var(--emerald) 40%, transparent); } .gaze-status { text-align: center; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--emerald-deep); min-height: 16px; } .gaze-meta { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .gaze-options { width: 100%; max-width: min(100%, 360px); margin: 0 auto; } .gaze-option-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .gaze-option-label { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); flex-shrink: 0; } @media (min-width: 768px) { .gaze-field { max-width: 300px; } .gaze-dot { width: 20px; height: 20px; } } .cyc-select { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; margin-top: 12px; } .cyc-btn { padding: 5px 12px; border-radius: 9999px; cursor: pointer; border: 1px solid var(--line-2); background: var(--surface); font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--muted); transition: all .16s ease; } .cyc-btn.active { border-color: var(--emerald); color: var(--emerald-deep); background: var(--emerald-tint); } /* Протокол закрепления + нейро-карточка (шаг «интеграция») */ .rw-proto-item { display: flex; gap: 12px; font-size: 13px; font-weight: 400; line-height: 1.6; color: var(--muted-2); } .rw-proto-item b { color: var(--ink); font-weight: 700; } .rw-proto-num { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; border-radius: 50%; border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; color: var(--gold-deep); } .rw-neuro { text-align: center; border-radius: 20px; padding: 22px; background: var(--gold-tint); border: 1px solid rgba(212,175,55,.35); } .rw-neuro .num { font-family: 'Montserrat', sans-serif; font-size: 22px; font-weight: 400; color: var(--gold-deep); line-height: 1.1; } .rw-neuro .txt { font-size: 12px; font-weight: 400; color: var(--muted-2); line-height: 1.6; margin: 8px 0; } .rw-neuro .tags { font-family: 'Montserrat', sans-serif; font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft); } /* Архив кодов (вкладка «Практика») */ .rw-tabs { display: flex; gap: 24px; margin-bottom: 14px; border-bottom: 1px solid var(--line); } .rw-tab { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 6px 0 10px; cursor: pointer; position: relative; } .rw-tab.active { color: var(--ink); } .rw-tab.active:after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold); } .rw-entry { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; margin-bottom: 12px; } .rw-badge { display: inline-flex; align-items: center; gap: 5px; font-family: 'Montserrat', sans-serif; font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--gold-tint); border: 1px solid rgba(212,175,55,.35); color: var(--gold-deep); border-radius: 9999px; padding: 4px 10px; } .rw-tracker { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 12px; } .rw-td { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-size: 7px; color: var(--faint); } .rw-td.done { background: var(--emerald); border-color: var(--emerald); color: #FFFFFF; } .rw-td.today { outline: 2px solid var(--emerald-deep); outline-offset: 1px; } /* ---- «Био»: дневные сигналы (активные кнопки гормонального движка) ---- */ /* Компактная геометрия: блок «Сигналы дня» занимает меньше высоты (уменьшены padding чипов, кегль и зазор), логика кнопок не менялась. */ .sig-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 9999px; cursor: pointer; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted-2); font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: all .18s ease; } .sig-chip:hover { border-color: var(--line-3); color: var(--ink); } .sig-chip:active { transform: scale(.97); } /* Активный сигнал — изумрудное подтверждение действия. */ .sig-chip.active { border-color: var(--emerald); background: var(--emerald-tint); color: var(--emerald-deep); box-shadow: 0 0 12px rgba(16, 185, 129, 0.14); } /* ---- «Био»: единая карточка прогноза (Силуэт + Метаболизм) ---- */ .forecast-glass { background: var(--surface-elevated); box-shadow: var(--shadow-card); border-color: rgba(var(--gold-rgb), 0.12) !important; padding: 1rem 1.25rem; position: relative; overflow: hidden; } .forecast-glass::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--emerald-rgb), 0.35), rgba(var(--gold-rgb), 0.35), transparent); pointer-events: none; } html[data-theme="dark"] .forecast-glass { background: var(--surface-2); box-shadow: var(--shadow-card); } .forecast-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.28), transparent); opacity: 0.85; margin: 0.75rem 0; } /* ---- «Био»: пояснение к гормону (раскрывается тапом по названию) ---- Элегантная заметка «от чего зависит уровень и как влиять»: тонкая золотая грань, бледно-золотая заливка, лёгкий кегль — не перегружает интерфейс и живёт в обеих темах через токены. */ .hx-note { margin-top: 8px; padding: 10px 14px; border-inline-start: 2px solid var(--gold); background: var(--gold-tint); border-radius: 0 14px 14px 0; font-size: 10.5px; line-height: 1.65; color: var(--muted-2); font-weight: 500; } [dir="rtl"] .hx-note { border-radius: 14px 0 0 14px; } @media (prefers-reduced-motion: reduce) { .practice-overlay, .vacuum-blob, .breath-glow { transition: none; } .prime-protocol-overlay, .prime-phases-panel, .prime-day-body, .prime-gold-spinner { transition: none; } } /* ==================================================================== * * AMAI Prime Protocol — VIP лендинг и закрытый экран * ==================================================================== */ #prime-protocol-host { position: relative; z-index: 130; } .prime-protocol-overlay { position: fixed; inset: 0; z-index: 130; background: var(--prime-overlay-bg); color: var(--prime-fg); opacity: 0; transform: scale(1.02) translateY(8px); transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.4, 0, 0.2, 1), background 0.45s ease, color 0.45s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; } .prime-protocol-overlay.open { opacity: 1; transform: scale(1) translateY(0); } .prime-shell { max-width: 480px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top)) 20px calc(48px + env(safe-area-inset-bottom)); min-height: 100%; font-size: 16px; line-height: 1.5; } .prime-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .prime-top .portrait-share-toolbar--inline { opacity: 1; pointer-events: auto; margin: 0; } .prime-close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--prime-glass-border); background: var(--prime-glass-bg); color: var(--gold); display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: pointer; transition: transform 0.2s, border-color 0.2s; } .prime-close:active { transform: scale(0.92); } .prime-eyebrow { font-family: Montserrat, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } .prime-h1 { font-family: Montserrat, sans-serif; font-size: clamp(1.75rem, 6vw, 2.25rem); font-weight: 700; letter-spacing: 0.06em; line-height: 1.15; margin-top: 12px; color: var(--gold); } .prime-h2 { font-family: Montserrat, sans-serif; font-size: 1.375rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.35; color: var(--prime-fg); } .prime-subtitle { font-size: 16px; line-height: 1.5; color: var(--prime-fg-body); margin-top: 10px; font-weight: 400; } .prime-divider { height: 1px; margin: 24px 0; background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb),0.45), transparent); } .prime-body-copy { font-size: 16px; line-height: 1.5; color: var(--prime-fg-body); font-weight: 400; } .prime-editorial { margin-bottom: 28px; } .prime-results-grid { display: grid; gap: 12px; margin-bottom: 28px; } .prime-result-card { position: relative; padding: 16px 18px; border-radius: 18px; background: var(--prime-glass-bg); border: 1px solid var(--prime-glass-border); box-shadow: var(--prime-card-shadow); overflow: hidden; } .prime-result-glow { position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: radial-gradient(circle, rgba(var(--gold-rgb),0.25), transparent 70%); pointer-events: none; } .prime-result-text { position: relative; z-index: 1; font-size: 16px; line-height: 1.5; color: var(--prime-fg-body); font-weight: 400; } .prime-study-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 20px; border-radius: 14px; border: 1px solid rgba(var(--gold-rgb), 0.3); background: rgba(var(--gold-rgb), 0.06); color: var(--gold); font-family: Montserrat, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: background 0.2s, transform 0.15s; } .prime-study-btn:active { transform: scale(0.98); } .prime-study-chevron { transition: transform 0.35s ease; } .prime-study-chevron.is-open { transform: rotate(180deg); } .prime-phases-panel { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, margin 0.35s ease; margin-top: 0; } .prime-phases-panel.is-open { max-height: 900px; opacity: 1; margin-top: 16px; margin-bottom: 20px; } .prime-phases-inner { padding: 18px; border-radius: 18px; background: var(--prime-inner-bg); border: 1px solid var(--prime-inner-border); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .prime-phase-block { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--prime-row-border); } .prime-phase-block:last-child { border-bottom: none; padding-bottom: 0; } .prime-phase-num { font-family: Montserrat, sans-serif; font-size: 14px; font-weight: 700; color: var(--gold); letter-spacing: 0.08em; flex-shrink: 0; padding-top: 2px; } .prime-phase-title { font-family: Montserrat, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--prime-fg); } .prime-phase-text { font-size: 16px; line-height: 1.5; color: var(--prime-fg-body); margin-top: 8px; } .prime-activate-btn { width: 100%; margin-top: 8px; padding: 18px 20px; border: none; border-radius: 16px; background: linear-gradient(135deg, #d4af37, #b8942e, #9a7b24); color: #0f1114; font-family: Montserrat, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; box-shadow: 0 8px 32px rgba(var(--gold-rgb), 0.35); cursor: pointer; transition: transform 0.15s, box-shadow 0.2s; } .prime-activate-btn:active { transform: scale(0.98); } .prime-payment-lock { position: fixed; inset: 0; z-index: 140; background: rgba(8,10,12,0.72); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); display: flex; align-items: center; justify-content: center; } .prime-payment-lock.hidden { display: none; } .prime-payment-lock-inner { text-align: center; padding: 32px; } .prime-gold-spinner { width: 52px; height: 52px; margin: 0 auto 24px; border: 2px solid rgba(var(--gold-rgb), 0.2); border-top-color: var(--gold); border-radius: 50%; animation: prime-spin 0.9s linear infinite; } @keyframes prime-spin { to { transform: rotate(360deg); } } .prime-payment-status { font-family: Montserrat, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); } .prime-payment-sub { font-size: 10px; color: rgba(245,240,232,0.55); margin-top: 8px; letter-spacing: 0.12em; text-transform: uppercase; } .prime-vip-status { padding: 20px; border-radius: 18px; margin-bottom: 20px; background: var(--prime-glass-bg); border: 1px solid var(--prime-glass-border); box-shadow: var(--prime-card-shadow); text-align: center; } /* Высота букв как у логотипа AMAI в шапке: text-xl (1.25rem), обычный межбуквенный интервал */ .prime-course-title { font-family: Montserrat, sans-serif; font-size: 1.25rem; font-weight: 700; letter-spacing: normal; text-transform: uppercase; color: var(--prime-fg); margin: 0; line-height: 1.75rem; text-align: center; } .prime-vip-line { font-size: 16px; line-height: 1.5; margin-top: 10px; color: var(--prime-fg-body); } .prime-vip-line strong { color: var(--gold); font-weight: 700; } .prime-vip-mode { font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--prime-fg-body); margin-top: 12px; line-height: 1.5; } .prime-vip-days { font-size: 15px; color: var(--gold); margin-top: 8px; font-weight: 700; } .prime-recipe-card { padding: 20px; border-radius: 18px; margin-bottom: 20px; background: var(--prime-glass-bg); border: 1px solid var(--prime-glass-border); box-shadow: var(--prime-card-shadow); } .prime-recipe-title { font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: var(--gold); margin: 6px 0 12px; letter-spacing: 0.04em; } .prime-recipe-block { margin-top: 12px; } .prime-recipe-text { font-size: 16px; line-height: 1.5; color: var(--prime-fg-body); margin-top: 4px; } .prime-recipe-note { font-size: 15px; line-height: 1.5; color: var(--prime-fg-body); margin-top: 14px; font-style: italic; } .prime-recipe-herbs { margin: 10px 0 0; padding-left: 18px; list-style: disc; } .prime-recipe-herbs li { font-size: 16px; line-height: 1.5; color: var(--prime-fg-body); margin-bottom: 6px; } .profile-sub-badge { font-family: var(--font-heading); font-size: 10px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; text-align: center; } .profile-sub-badge--free { color: #888; } .profile-sub-badge--pro { color: var(--gold); text-shadow: 0 0 12px rgba(var(--gold-rgb), 0.45), 0 0 24px rgba(var(--gold-rgb), 0.2); } .prime-phase-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .prime-phase-tab { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(var(--gold-rgb), 0.2); color: var(--gold); } .prime-days-list { display: flex; flex-direction: column; gap: 32px; margin-top: 22px; } .prime-phase-section { display: flex; flex-direction: column; gap: 0; } .prime-phase-heading { font-family: Montserrat, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin: 0 0 12px; padding: 0 2px; line-height: 1.4; } .prime-phase-days { display: flex; flex-direction: column; gap: 12px; } .prime-day-card { border-radius: 18px; overflow: hidden; border: 1px solid var(--prime-glass-border); background: var(--prime-glass-bg); box-shadow: var(--prime-card-shadow); } .prime-day-card.is-open { border-color: rgba(var(--gold-rgb), 0.35); } .prime-day-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: transparent; border: none; color: inherit; text-align: left; cursor: pointer; } .prime-day-num { font-family: Montserrat, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--gold); flex-shrink: 0; } .prime-day-num--wide { flex: 1; letter-spacing: 0.04em; text-transform: none; } .prime-day-title { flex: 1; font-size: 15px; font-weight: 700; color: var(--prime-fg); line-height: 1.35; } .prime-day-chevron { flex-shrink: 0; color: var(--gold); transition: transform 0.3s; } .prime-day-chevron.is-open { transform: rotate(180deg); } .prime-day-body { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease; padding: 0 16px; } .prime-day-card.is-open .prime-day-body { max-height: 1800px; opacity: 1; padding: 0 18px 18px; } .prime-day-phase { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--prime-fg-dim); margin-bottom: 14px; line-height: 1.5; font-weight: 600; } .prime-day-intro { font-size: 16px; line-height: 1.5; color: var(--prime-fg-body); margin-bottom: 14px; } .prime-menu-block { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; } .prime-menu-row { font-size: 16px; line-height: 1.5; color: var(--prime-fg-body); display: flex; flex-direction: column; gap: 6px; } .prime-menu-row-herb { padding-left: 10px; font-size: 15px; color: var(--prime-fg-body); line-height: 1.5; } .prime-herb-name { font-weight: 700; color: var(--prime-fg); } .prime-menu-label { font-family: Montserrat, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); } .prime-day-sense { font-size: 16px; line-height: 1.5; color: var(--prime-fg-body); padding-top: 14px; border-top: 1px solid var(--prime-row-border); } .prime-tea-phases .prime-sense-label { display: block; margin-bottom: 10px; } .prime-tea-phase-list { display: flex; flex-direction: column; gap: 14px; } .prime-tea-phase-line { margin: 0; font-size: 16px; line-height: 1.5; color: var(--prime-fg-body); } .prime-tea-phase-name { font-weight: 700; color: var(--prime-fg); } .prime-day-note { border-top: none; padding-top: 10px; font-style: italic; color: var(--prime-fg-body); font-size: 15px; line-height: 1.5; } .prime-sense-label { color: var(--gold); font-weight: 700; } .prime-profile-banner { background: linear-gradient(135deg, rgba(15,17,20,0.04), rgba(var(--gold-rgb),0.06)); transition: background 0.2s; } .prime-profile-banner:active { background: rgba(var(--gold-rgb), 0.1); } .prime-concierge-toast { position: fixed; top: 12%; left: 50%; transform: translateX(-50%); z-index: 200; width: min(92vw, 380px); } .prime-concierge-inner { display: flex; gap: 14px; padding: 20px 22px; border-radius: 20px; background: linear-gradient(145deg, #1a1d22, #12151a); border: 1px solid rgba(var(--gold-rgb), 0.35); box-shadow: 0 20px 60px rgba(0,0,0,0.45); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .prime-concierge-icon { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(var(--gold-rgb), 0.15); color: var(--gold); } .prime-concierge-greeting { font-family: Montserrat, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--gold); } .prime-concierge-body { font-size: 11px; line-height: 1.65; color: rgba(245,240,232,0.82); margin-top: 6px; } .prime-expired { text-align: center; padding: 48px 12px; } /* ==================================================================== * * العربية — Cairo typography + RTL mirroring * Шрифт и зеркалирование включаются только при lang=ar / dir=rtl. * ==================================================================== */ html[lang="ar"] body, html[lang="ar"] .cookie-banner-text, html[lang="ar"] input, html[lang="ar"] textarea, html[lang="ar"] select, html[lang="ar"] button, html[lang="ar"] .chef-msg, html[lang="ar"] .chef-chip { font-family: 'Cairo', 'Nunito Sans', sans-serif; } html[lang="ar"] .font-heading, html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4, html[lang="ar"] .btn-primary, html[lang="ar"] .splash-title, html[lang="ar"] .splash-sub, html[lang="ar"] .splash-tag, html[lang="ar"] .onb-line, html[lang="ar"] .luxury-slide__title, html[lang="ar"] .luxury-slide__desc, html[lang="ar"] .guest-register-prompt { font-family: 'Cairo', 'Montserrat', sans-serif; } html[lang="ar"] body { letter-spacing: 0; } /* 日本語・한국어 — Noto CJK typography */ html[lang="ja"] body, html[lang="ja"] input, html[lang="ja"] textarea, html[lang="ja"] select, html[lang="ja"] button, html[lang="ko"] body, html[lang="ko"] input, html[lang="ko"] textarea, html[lang="ko"] select, html[lang="ko"] button { font-family: 'Noto Sans JP', 'Noto Sans KR', 'Nunito Sans', sans-serif; } html[lang="ja"] .font-heading, html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3, html[lang="ja"] h4, html[lang="ja"] .btn-primary, html[lang="ja"] .splash-title, html[lang="ja"] .splash-sub, html[lang="ja"] .splash-tag, html[lang="ja"] .onb-line, html[lang="ja"] .luxury-slide__title, html[lang="ja"] .luxury-slide__desc { font-family: 'Noto Sans JP', 'Montserrat', sans-serif; } html[lang="ko"] .font-heading, html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3, html[lang="ko"] h4, html[lang="ko"] .btn-primary, html[lang="ko"] .splash-title, html[lang="ko"] .splash-sub, html[lang="ko"] .splash-tag, html[lang="ko"] .onb-line, html[lang="ko"] .luxury-slide__title, html[lang="ko"] .luxury-slide__desc { font-family: 'Noto Sans KR', 'Montserrat', sans-serif; } html[lang="ja"] body, html[lang="ko"] body { letter-spacing: 0; } /* Зеркалирование частых Tailwind-утилит направления (без правки всей разметки). */ [dir="rtl"] .text-left { text-align: right; } [dir="rtl"] .text-right { text-align: left; } [dir="rtl"] .lucide-chevron-right { transform: scaleX(-1); } /* ---- Профиль: статус PRO / триал / базовый доступ ---- */ .access-status-trial { background: rgba(var(--gold-rgb), 0.08); color: var(--gold); text-shadow: 0 0 12px rgba(var(--gold-rgb), 0.35); } html[data-theme="dark"] .access-status-trial { background: rgba(var(--gold-rgb), 0.12); text-shadow: 0 0 16px rgba(var(--gold-rgb), 0.42); } .access-status-basic:active { transform: scale(0.98); } /* ------------------------------------------------------------------ * * Luxury Manifest Slider (guest preview) * ------------------------------------------------------------------ */ .luxury-slider { --lux-graphite: #090806; --lux-ivory: #FDFBF7; --lux-gold: #D4AF37; --lux-emerald: #097969; position: relative; background: var(--gradient-energy); border-radius: 2px; overflow: hidden; box-shadow: 0 24px 64px rgba(9, 8, 6, 0.28); } .luxury-slider__stage { position: relative; width: 100%; min-height: clamp(360px, 65vh, 612px); min-height: clamp(360px, 65dvh, 612px); aspect-ratio: 9 / 14.4; max-height: min(70vh, 648px); max-height: min(70dvh, 648px); outline: none; touch-action: pan-y; } @media (min-width: 768px) { .luxury-slider__stage { aspect-ratio: auto; min-height: 468px; max-height: 558px; } } .luxury-slider__track { position: relative; width: 100%; height: 100%; } .luxury-slide { position: absolute; inset: 0; display: flex; flex-direction: column; /* flex-start + margin:auto у __inner: центр при запасе места; при переполнении контент прилипает к верху (не режется поровну). */ justify-content: flex-start; align-items: center; /* фиксированные отступы — как в app, без раздувания на desktop */ padding: 1.85rem 1.75rem 3.25rem; box-sizing: border-box; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.65s; pointer-events: none; } .luxury-slide.is-active { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; z-index: 2; } .luxury-slide.is-leaving { opacity: 0; transform: translateY(-12px); z-index: 1; } .luxury-slide.is-entering { opacity: 0; transform: translateY(18px); } .luxury-slide__inner { width: 100%; max-width: 22rem; margin-top: auto; margin-bottom: auto; margin-left: auto; margin-right: auto; text-align: center; min-width: 0; } .luxury-slide__title { font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; /* Один масштаб для web и app (без vw-раздувания на широком браузере) */ font-size: 1.28rem; font-weight: 400; line-height: 1.4; letter-spacing: 0.165em; text-transform: uppercase; color: #171717; margin: 0 0 1.25rem; padding-left: 0.165em; text-align: center; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .luxury-slide__desc { font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; font-size: 0.875rem; font-weight: 300; line-height: 1.72; letter-spacing: 0.02em; text-transform: none; color: #454545; margin: 0; } .luxury-slider__dots { position: absolute; left: 0; right: 0; bottom: clamp(1.25rem, 4vw, 1.75rem); display: flex; justify-content: center; align-items: center; gap: 10px; z-index: 5; pointer-events: none; } .luxury-dot { width: 5px; height: 5px; padding: 0; border: 0; border-radius: 9999px; background: rgba(212, 175, 55, 0.45); cursor: pointer; pointer-events: auto; transition: background-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease; } .luxury-dot.is-active { background: var(--lux-gold); box-shadow: 0 0 0 3px rgba(9, 121, 105, 0.35), 0 0 14px 2px rgba(9, 121, 105, 0.55); transform: scale(1.15); } .product-preview-cta--luxury { margin-top: 14px; background: var(--lux-graphite); border-color: rgba(212, 175, 55, 0.35); color: var(--lux-ivory); font-family: 'Inter', system-ui, sans-serif; letter-spacing: 0.08em; } .product-preview-cta--luxury:hover { border-color: var(--lux-gold); background: #12100c; } /* Guest CTA — white face, black type, gold outline (compact) */ .guest-register-prompt { display: block; box-sizing: border-box; width: auto; min-width: 168px; max-width: 220px; margin: 18px auto 32px; padding: 16px 28px; border: 1px solid #C9A961; border-radius: 12px; background: #FFFFFF; box-shadow: none; color: #0A0A0A; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; line-height: 1.2; text-transform: uppercase; text-align: center; cursor: pointer; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; } .guest-register-prompt__label { display: block; pointer-events: none; padding-left: 0.2em; color: inherit; } .guest-register-prompt:hover { background: rgba(201, 169, 97, 0.04); border-color: #C9A961; } .guest-register-prompt:active { background: rgba(201, 169, 97, 0.05); transform: scale(0.985); } .guest-register-prompt:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.28); } #premium-preview-host .guest-register-prompt { margin-bottom: 20px; } #premium-preview-host .luxury-slider__stage { min-height: 400px; max-height: min(70vh, 560px); max-height: min(70dvh, 560px); } #premium-preview-host .product-preview { margin-bottom: 18px; } /* ------------------------------------------------------------------ * * Product preview carousel (legacy helpers) * ------------------------------------------------------------------ */ .product-preview { position: relative; } .preview-example { font-family: 'Montserrat', sans-serif; font-size: 8px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 9999px; padding: 3px 8px; background: var(--bg); } .product-preview-viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: 18px; } .product-preview-viewport::-webkit-scrollbar { display: none; } .product-preview-track { display: flex; gap: 10px; } .preview-slide { flex: 0 0 100%; scroll-snap-align: start; min-width: 100%; } .preview-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 14px 14px 16px; min-height: 168px; } .preview-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .preview-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .preview-metric { display: flex; align-items: flex-start; gap: 8px; padding: 10px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); } .preview-metric-label { font-family: 'Montserrat', sans-serif; font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; } .preview-metric-value { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.2; } .preview-chat { display: flex; flex-direction: column; gap: 8px; } .preview-bubble { max-width: 92%; padding: 10px 12px; border-radius: 14px; font-size: 11px; font-weight: 500; line-height: 1.45; } .preview-bubble-user { align-self: flex-end; background: var(--ink); color: var(--ink-contrast); border-bottom-right-radius: 4px; } .preview-bubble-ai { align-self: flex-start; background: var(--bg); border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 4px; } .preview-chef-name { display: block; font-family: 'Montserrat', sans-serif; font-size: 8px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; } .preview-scan { display: flex; gap: 12px; align-items: stretch; } .preview-scan-frame { position: relative; flex: 0 0 72px; width: 72px; border-radius: 14px; background: var(--ink); display: flex; align-items: center; justify-content: center; overflow: hidden; } .preview-scan-line { position: absolute; left: 10px; right: 10px; height: 1px; background: var(--gold); opacity: 0.85; animation: previewScan 2.2s ease-in-out infinite; } @keyframes previewScan { 0%, 100% { top: 18%; } 50% { top: 78%; } } .preview-scan-result { flex: 1; min-width: 0; } .product-preview-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; } .preview-dot { width: 6px; height: 6px; border-radius: 9999px; border: 0; padding: 0; background: var(--line-2); cursor: pointer; transition: background-color .2s ease, width .2s ease; } .preview-dot.is-active { width: 16px; background: var(--gold); } .product-preview-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-align: center; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .product-preview-cta:hover { border-color: var(--gold); } .product-preview-cta:active { transform: scale(0.99); } /* Premium modal: keep preview light; modal already scrolls */ #premium-preview-host .product-preview { margin-bottom: 18px; } #premium-preview-host .preview-card { min-height: 156px; } #premium-access-anchor { scroll-margin-top: 12px; } /* ------------------------------------------------------------------ * * PWA Add to Home Screen banner * ------------------------------------------------------------------ */ .install-banner { position: fixed; left: 50%; bottom: max(88px, calc(72px + env(safe-area-inset-bottom, 0px))); transform: translateX(-50%) translateY(12px); z-index: 45; width: min(420px, calc(100vw - 28px)); padding: 14px 14px 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08); opacity: 0; pointer-events: none; transition: opacity .28s ease, transform .28s ease; } .install-banner.active { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .install-banner.hidden { display: none; } .install-banner-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .install-banner-title { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin: 0; } .install-banner-x { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; } .install-steps { display: flex; align-items: flex-start; gap: 12px; } .install-icon-wrap { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); display: flex; align-items: center; justify-content: center; } .install-platform-icon { width: 20px; height: 20px; } .install-copy { margin: 0; font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--muted-2); } .install-copy b { color: var(--ink); font-weight: 700; } .install-banner-actions { display: flex; gap: 8px; margin-top: 12px; } .install-banner-actions .btn-primary { margin: 0; padding-top: 12px; padding-bottom: 12px; font-size: 10px; } html[data-theme="dark"] .install-banner { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .preview-card { background: var(--surface); } /* PRO Access block on Capital (after product preview) */ #home-premium-access { scroll-margin-top: 96px; } #home-premium-access .btn-primary { margin-top: 0; } /* Alta-style product showcase (Capital + paywall) */ .product-showcase-intro { padding-top: 4px; } .preview-slide-lead { font-size: 12px; font-weight: 500; line-height: 1.45; color: var(--muted-2); margin: 0 0 12px; } .preview-card--phone { min-height: 220px; padding-top: 12px; background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05); } .preview-phone-chrome { display: flex; justify-content: center; gap: 5px; margin-bottom: 10px; } .preview-phone-chrome span { width: 5px; height: 5px; border-radius: 9999px; background: var(--line-2); } html[data-theme="dark"] .preview-card--phone { background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%); box-shadow: none; } /* Preview carousel: reuse live card/chef styles; compact avatar */ .concierge-avatar-frame--preview { width: 58px; height: 58px; min-width: 58px; min-height: 58px; max-width: 58px; max-height: 58px; flex: 0 0 58px; aspect-ratio: 1 / 1; border-radius: 14px; } .preview-chef-thread { max-height: none; padding-bottom: 0; gap: 8px; } .preview-chef-thread .chef-msg { font-size: 12px; padding: 10px 14px; max-width: 100%; } .product-preview .preview-scan-line { position: absolute; left: 18%; right: 18%; height: 1px; background: var(--gold); opacity: 0.85; animation: previewScan 2.2s ease-in-out infinite; z-index: 5; } /* Tall Capital metrics inside a carousel slide */ .preview-dash-scale { max-height: min(70vh, 640px); max-height: min(70dvh, 640px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; } .preview-dash-scale::-webkit-scrollbar { display: none; } .preview-dash-scale .card { box-shadow: 0 2px 12px rgba(0,0,0,0.03); } .product-preview .preview-slide { min-width: 100%; } .preview-module-divider { height: 1px; margin: 16px 0; background: var(--line); opacity: 0.85; } .how-calc-btn { width: 16px; height: 16px; flex-shrink: 0; border-radius: 9999px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); font-size: 9px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: border-color .2s ease, color .2s ease, background-color .2s ease; } .how-calc-btn:hover, .how-calc-btn.is-open { border-color: var(--gold); color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); } .how-calc-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); font-size: 11px; line-height: 1.55; color: var(--muted-2); font-weight: 500; } .prime-results-head .how-calc-note { text-align: left; margin-bottom: 16px; } /* ------------------------------------------------------------------ * * Биохакинг (Knowledge Base) — независимый оверлей * ------------------------------------------------------------------ */ #knowledge-base-host { position: relative; z-index: 125; } .kb-overlay { position: fixed; inset: 0; z-index: 125; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0; transform: translateX(28px); transition: opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; } .kb-overlay.open { opacity: 1; transform: translateX(0); } [dir="rtl"] .kb-overlay { transform: translateX(-28px); } [dir="rtl"] .kb-overlay.open { transform: translateX(0); } .kb-shell { max-width: 480px; margin: 0 auto; padding: 0 22px calc(48px + env(safe-area-inset-bottom)); min-height: 100%; } .kb-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: calc(18px + env(safe-area-inset-top)) 0 12px; position: -webkit-sticky; position: sticky; top: 0; z-index: 5; background-color: var(--bg); background-image: linear-gradient(var(--bg) 82%, transparent); } .kb-eyebrow { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); display: block; margin-bottom: 6px; } .kb-title { font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); font-size: 20px; line-height: 1.2; } .kb-close { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); cursor: pointer; transition: transform .12s ease, border-color .2s ease; } .kb-close:hover { border-color: var(--line-3); } .kb-close:active { transform: scale(0.92); } .kb-lead { font-size: 13px; line-height: 1.7; color: var(--muted-2); margin: 4px 0 22px; font-weight: 400; } .kb-accordion { display: flex; flex-direction: column; gap: 10px; } .kb-item { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease; } .kb-item.is-open { border-color: rgba(var(--gold-rgb), 0.45); box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.08), 0 10px 28px -18px rgba(0,0,0,0.28); } .kb-item-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; text-align: start; cursor: pointer; background: transparent; border: 0; color: inherit; } .kb-item-title { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); line-height: 1.35; } .kb-item-chevron { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background: var(--bg-2); color: var(--gold-deep); transition: transform .35s cubic-bezier(.16,1,.3,1); } .kb-item.is-open .kb-item-chevron { transform: rotate(180deg); } .kb-item-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.16,1,.3,1); } .kb-item-panel.open { grid-template-rows: 1fr; } .kb-item-panel > .kb-item-body { overflow: hidden; min-height: 0; } .kb-item-body { padding: 0 18px 0; font-size: 14px; line-height: 1.75; font-weight: 400; color: #8A8680; /* светло-серый в светлой теме */ opacity: 0; transition: opacity .35s ease, padding .4s cubic-bezier(.16,1,.3,1); } .kb-item-panel.open .kb-item-body { padding: 0 18px 18px; opacity: 1; } .kb-item-body p + p { margin-top: 0.85em; } .kb-item-body .kb-h { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); margin: 1.15em 0 0.45em; } .kb-item-body .kb-h:first-child { margin-top: 0; } .kb-item-body .kb-list { margin: 0.5em 0 0; padding-inline-start: 1.15em; } .kb-item-body .kb-list li { margin-top: 0.5em; } .kb-item-body .kb-list li::marker { color: var(--gold-deep); } .kb-item-toolbar { display: flex; justify-content: flex-end; margin: 0 0 0.85em; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .kb-item-panel.open .kb-item-toolbar { opacity: 1; pointer-events: auto; } .portrait-share-host { position: relative; } .portrait-share-toolbar { position: absolute; top: 16px; right: 16px; z-index: 3; display: flex; align-items: center; justify-content: center; margin: 0; opacity: 1; pointer-events: auto; } .portrait-share-toolbar--inline { position: static; top: auto; right: auto; flex-shrink: 0; } .portrait-share-btn, .kb-item-share, .bio-card-share, .cycle-forecast-share, .energy-wave-share { color: var(--gold-deep); } html[data-theme="dark"] .portrait-share-btn, html[data-theme="dark"] .kb-item-share, html[data-theme="dark"] .bio-card-share, html[data-theme="dark"] .cycle-forecast-share, html[data-theme="dark"] .energy-wave-share { color: #D4AF37; } .energy-wave-card .portrait-share-toolbar--inline { opacity: 1; pointer-events: auto; margin: 0; } .energy-wave-card .energy-wave-share { opacity: 0.88; } .energy-wave-card .energy-wave-share:hover { opacity: 1; } .kb-item-body.portrait-share-host { padding-top: 48px; } .portrait-share-host:not(.kb-item-body) { padding-top: 40px; } .card.portrait-share-host, .card-dark.portrait-share-host, .ai-intelligence-card.portrait-share-host, .amai-guide-card-panel.portrait-share-host { position: relative; } .protocol-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .protocol-modal-head .portrait-share-toolbar--inline { opacity: 1; pointer-events: auto; margin: 0; flex-shrink: 0; } .kb-item-body strong { color: var(--ink); font-weight: 600; } html[data-theme="dark"] .kb-item-body strong { color: #FFF8EE; } .kb-tip { margin-top: 1.15em; padding: 14px 16px; border-inline-start: 3px solid var(--emerald); border-radius: 0 14px 14px 0; background: var(--emerald-tint); } .kb-tip p { margin: 0; } .kb-tip strong { color: var(--emerald-deep); } html[data-theme="dark"] .kb-tip strong { color: #34D399; } .kb-tip-chef { border-inline-start-color: var(--gold-deep); background: linear-gradient(135deg, rgba(212,175,55,0.08), rgba(16,185,129,0.06)); border: 1px solid rgba(212, 175, 55, 0.22); border-inline-start-width: 3px; border-radius: 14px; } .kb-tip-chef p { display: flex; align-items: flex-start; gap: 10px; } .kb-tip-chef-icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; color: var(--gold-deep); } .kb-tip-chef strong { color: var(--gold-deep); } html[data-theme="dark"] .kb-tip-chef strong { color: #D4AF37; } .kb-disclaimer { margin-top: 1.15em; font-size: 11px; line-height: 1.55; color: var(--muted-2); font-style: italic; } .kb-cta-chef { display: flex; align-items: center; justify-content: center; gap: 8px; } .kb-cta-icon { width: 16px; height: 16px; flex-shrink: 0; } .kb-cta-wrap { margin-top: 1.35em; padding-top: 0.25em; } .kb-cta { display: block; width: 100%; padding: 15px 18px; border-radius: 14px; border: 1px solid rgba(212, 175, 55, 0.35); background: linear-gradient(135deg, var(--ink) 0%, #2A2620 100%); color: var(--ink-contrast); font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; cursor: pointer; box-shadow: 0 8px 22px rgba(26, 23, 20, 0.14), 0 0 0 1px rgba(212, 175, 55, 0.08); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .kb-cta:hover { border-color: rgba(212, 175, 55, 0.55); box-shadow: 0 10px 26px rgba(26, 23, 20, 0.18), 0 0 18px rgba(212, 175, 55, 0.12); } .kb-cta:active { transform: scale(0.985); } html[data-theme="dark"] .kb-cta { background: linear-gradient(135deg, #1A1814 0%, #2E2922 100%); border-color: rgba(212, 175, 55, 0.42); color: #FFF8EE; } .kb-table-wrap { margin-top: 0.65em; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; border: 1px solid var(--line); } .kb-table { width: 100%; min-width: 360px; border-collapse: collapse; table-layout: fixed; font-size: 12px; line-height: 1.45; } .kb-table th, .kb-table td { padding: 10px 12px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line); word-wrap: break-word; overflow-wrap: break-word; } .kb-table th { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); background: var(--bg-2); } .kb-table tr:last-child td { border-bottom: 0; } /* Колонка 1 компактная (+~3 буквы к прежней ширине); 2–3 шире */ .kb-table th:nth-child(1), .kb-table td:nth-child(1) { width: 28%; font-weight: 600; color: var(--ink); white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: manual; } .kb-table th:nth-child(2), .kb-table td:nth-child(2) { width: 36%; } .kb-table th:nth-child(3), .kb-table td:nth-child(3) { width: 36%; } .kb-num { color: var(--gold-deep); font-weight: 700; font-variant-numeric: tabular-nums; } .kb-num-em { color: var(--emerald-deep); font-weight: 700; font-variant-numeric: tabular-nums; } html[data-theme="dark"] .kb-item-body { color: #F5F0E6; /* ivory */ } html[data-theme="dark"] .kb-item-body .kb-h { color: var(--gold); } html[data-theme="dark"] .kb-table th { color: var(--gold); } html[data-theme="dark"] .kb-table td:first-child { color: #F5F0E6; } html[data-theme="dark"] .kb-num { color: var(--gold); } html[data-theme="dark"] .kb-num-em { color: #34D399; } html[data-theme="dark"] .kb-item.is-open { box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.12), 0 12px 32px -16px rgba(0,0,0,0.55); } @media (prefers-reduced-motion: reduce) { .kb-overlay, .kb-item-panel, .kb-item-body, .kb-item-chevron { transition: none; } } /* ---- Светофор ГИ: таблица продуктов (внутри раздела ГИ) ---- */ .kb-gi-traffic { display: flex; flex-direction: column; gap: 10px; margin-top: 0.35em; } .kb-gi-zone { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); } .kb-gi-zone--high { background: #FBEAE8; border-color: rgba(217, 108, 95, 0.28); } .kb-gi-zone--mid { background: var(--gold-tint); border-color: rgba(var(--gold-rgb), 0.28); } .kb-gi-zone--low { background: var(--emerald-tint); border-color: rgba(var(--emerald-rgb), 0.28); } .kb-gi-zone-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border: 0; cursor: pointer; text-align: start; color: #fff; } .kb-gi-zone--high .kb-gi-zone-trigger { background: #D96C5F; } .kb-gi-zone--mid .kb-gi-zone-trigger { background: var(--gold); } .kb-gi-zone--low .kb-gi-zone-trigger { background: var(--emerald); } .kb-gi-zone-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .kb-gi-zone-label { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 1.3; } .kb-gi-zone-range { font-weight: 500; opacity: 0.92; } .kb-gi-zone-note { font-size: 11.5px; font-weight: 400; opacity: 0.9; line-height: 1.35; } .kb-gi-zone-chevron { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background: rgba(255,255,255,0.18); color: #fff; transition: transform .35s cubic-bezier(.16,1,.3,1); } .kb-gi-zone.is-open .kb-gi-zone-chevron { transform: rotate(180deg); } .kb-gi-zone-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.16,1,.3,1); } .kb-gi-zone-panel.open { grid-template-rows: 1fr; } .kb-gi-zone-panel > .kb-gi-zone-body { overflow: hidden; min-height: 0; } .kb-gi-zone-body { padding: 0 14px; display: flex; flex-direction: column; gap: 10px; opacity: 0; transition: opacity .35s ease, padding .4s cubic-bezier(.16,1,.3,1); } .kb-gi-zone-panel.open .kb-gi-zone-body { padding: 10px 14px 16px; opacity: 1; } .kb-gi-row { display: flex; align-items: flex-start; gap: 10px; } .kb-gi-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 13px; flex-shrink: 0; font-variant-numeric: tabular-nums; } .kb-gi-zone--high .kb-gi-badge { background: #D96C5F; } .kb-gi-zone--mid .kb-gi-badge { background: var(--gold); } .kb-gi-zone--low .kb-gi-badge { background: var(--emerald); } .kb-gi-list { margin: 0; padding: 0; list-style: none; font-size: 13.5px; line-height: 1.5; color: #3a352f; } html[data-theme="dark"] .kb-gi-zone--high { background: rgba(217, 108, 95, 0.14); } html[data-theme="dark"] .kb-gi-zone--mid { background: rgba(var(--gold-rgb), 0.14); } html[data-theme="dark"] .kb-gi-zone--low { background: rgba(var(--emerald-rgb), 0.14); } html[data-theme="dark"] .kb-gi-list { color: #F5F0E6; } @media (prefers-reduced-motion: reduce) { .kb-gi-zone-panel, .kb-gi-zone-body, .kb-gi-zone-chevron { transition: none; } } /* ------------------------------------------------------------------ * * Функции AMAI — тематическая панель-гид (аккордеон «книжка») * ------------------------------------------------------------------ */ #amai-guide-host { position: relative; z-index: 130; } .amai-guide-overlay { position: fixed; inset: 0; z-index: 130; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0; transform: translateX(28px); pointer-events: none; transition: opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; } .amai-guide-overlay.open { opacity: 1; transform: translateX(0); pointer-events: auto; } [dir="rtl"] .amai-guide-overlay { transform: translateX(-28px); } [dir="rtl"] .amai-guide-overlay.open { transform: translateX(0); } .amai-guide-shell { max-width: 480px; margin: 0 auto; padding: 0 22px calc(48px + env(safe-area-inset-bottom)); min-height: 100%; } .amai-guide-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: calc(18px + env(safe-area-inset-top)) 0 12px; position: -webkit-sticky; position: sticky; top: 0; z-index: 5; background-color: var(--bg); background-image: linear-gradient(var(--bg) 82%, transparent); } .amai-guide-eyebrow { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); display: block; margin-bottom: 6px; } .amai-guide-title { font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); font-size: 20px; line-height: 1.2; } .amai-guide-close { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); cursor: pointer; transition: transform .12s ease, border-color .2s ease; } .amai-guide-close:hover { border-color: var(--line-3); } .amai-guide-close:active { transform: scale(0.92); } .amai-guide-top-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .amai-guide-lead { font-family: 'Nunito Sans', sans-serif; font-size: 13px; line-height: 1.7; color: var(--muted-2); margin: 4px 0 22px; font-weight: 400; } .amai-guide-accordion { display: flex; flex-direction: column; gap: 10px; } .amai-guide-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease; } .amai-guide-card[open] { border-color: rgba(var(--gold-rgb), 0.45); box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.08), 0 10px 28px -18px rgba(0,0,0,0.28); } .amai-guide-card-trigger { list-style: none; width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px 18px; text-align: start; cursor: pointer; background: transparent; border: 0; color: inherit; } .amai-guide-card-trigger::-webkit-details-marker { display: none; } .amai-guide-card-icon { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); } .amai-guide-card-icon .amai-guide-svg, .amai-guide-card-icon svg.amai-guide-svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.75; fill: none; } .amai-guide-card-title { flex: 1; min-width: 0; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); line-height: 1.35; } .amai-guide-card-chevron { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background: var(--bg-2); color: var(--gold-deep); transition: transform .35s cubic-bezier(.16,1,.3,1); } .amai-guide-card[open] .amai-guide-card-chevron { transform: rotate(180deg); } .amai-guide-card-panel { border-top: 1px solid transparent; transition: border-color .25s ease; } .amai-guide-card[open] .amai-guide-card-panel { border-top-color: var(--line); } .amai-guide-card-panel.portrait-share-host .amai-guide-card-body { margin: 0; padding: 0 18px 18px; font-family: 'Nunito Sans', sans-serif; font-size: 14px; line-height: 1.75; font-weight: 400; color: var(--muted-2); animation: amai-guide-reveal .35s cubic-bezier(.16,1,.3,1); } @keyframes amai-guide-reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .amai-guide-disclaimer { margin: 28px 0 8px; font-family: 'Nunito Sans', sans-serif; font-size: 11px; line-height: 1.55; font-weight: 400; text-align: center; } @media (prefers-reduced-motion: reduce) { .amai-guide-overlay, .amai-guide-card-panel, .amai-guide-card-chevron { transition: none; } .amai-guide-card-body { animation: none; } } /* ---- Body Portrait (Stories 9:16 share card) ---- */ .body-portrait-trigger { display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; padding: 2px; cursor: pointer; color: inherit; opacity: 0.85; transition: opacity 0.2s ease, transform 0.15s ease; } .body-portrait-trigger:hover { opacity: 1; } .body-portrait-trigger:active { transform: scale(0.94); } .bio-card-share { flex-shrink: 0; color: var(--gold-deep); opacity: 0.82; } .bio-card-share:hover { opacity: 1; } .body-portrait-overlay { position: fixed; inset: 0; z-index: 140; display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .body-portrait-overlay.open { opacity: 1; pointer-events: auto; } body.body-portrait-open { overflow: hidden; } .body-portrait-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .body-portrait-panel { position: relative; z-index: 1; width: min(100%, 420px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-primary); overflow: hidden; } .body-portrait-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--line); } .body-portrait-title { font-family: var(--font-heading); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); margin: 0; } .body-portrait-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 9999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: transform .12s ease, border-color .2s ease, background .2s ease; } .body-portrait-close:hover { border-color: var(--line-3); } .body-portrait-close:active { transform: scale(0.92); } .body-portrait-close__glyph { font-family: system-ui, sans-serif; font-size: 18px; font-weight: 500; line-height: 1; } .body-portrait-mode-row { display: grid; gap: 8px; padding: 0 20px 10px; } .body-portrait-mode-row--primary { grid-template-columns: 1fr 1fr 1fr; } .body-portrait-mode-row--photo { grid-template-columns: 1fr 1fr; padding-top: 0; padding-bottom: 12px; } .body-portrait-mode-btn { min-height: 36px; border-radius: 9999px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); font-family: var(--font-heading); font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease; padding: 0 6px; } .body-portrait-mode-btn--action.is-loading { opacity: 0.65; pointer-events: none; } .body-portrait-mode-btn.is-active { border-color: var(--gold); color: var(--ink); background: color-mix(in srgb, var(--gold) 8%, var(--bg)); } .body-portrait-mode-btn:disabled { opacity: 0.45; pointer-events: none; } .body-portrait-mode-btn.is-locked:disabled { cursor: not-allowed; opacity: 0.38; } /* Один ряд компактных pill-кнопок: [Заливка | Отступы] · [4:5 | 9:16 | Reels] */ .body-portrait-mode-row--pills { display: flex; align-items: center; gap: 6px; padding-top: 0; padding-bottom: 12px; } .body-portrait-pill { flex: 1 1 0; min-height: 28px; min-width: 0; padding: 4px 6px; font-size: 7.5px; letter-spacing: 0.08em; white-space: nowrap; } .body-portrait-pill-divider { flex: 0 0 1px; width: 1px; height: 18px; background: var(--line); } .body-portrait-quote-row { padding: 0 20px 12px; } .body-portrait-format-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 20px 8px; } .body-portrait-format-row.hidden { display: none; } .body-portrait-format-btn { min-height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); font-family: var(--font-heading); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .body-portrait-format-btn.is-active { border-color: var(--gold); color: var(--ink); background: color-mix(in srgb, var(--gold) 8%, var(--bg)); } .body-portrait-format-btn:disabled { opacity: 0.45; pointer-events: none; } .body-portrait-format-hint { margin: 0; padding: 0 20px 10px; font-size: 11px; line-height: 1.45; color: var(--muted); } .body-portrait-format-hint.hidden { display: none; } .body-portrait-quote-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 40px; border-radius: 12px; border: 1px dashed var(--line-2); background: var(--bg); color: var(--ink); font-family: var(--font-heading); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; transition: border-color 0.2s ease, opacity 0.2s ease; } .body-portrait-quote-btn:hover:not(:disabled) { border-color: var(--gold); } .body-portrait-quote-btn:disabled { opacity: 0.55; pointer-events: none; } .body-portrait-quote-btn.is-loading .body-portrait-quote-btn__icon { animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .body-portrait-error { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 20px 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(var(--rose-rgb), 0.25); background: rgba(var(--rose-rgb), 0.06); color: var(--ink); font-size: 11px; line-height: 1.45; } .body-portrait-error__text { flex: 1; min-width: 0; } .body-portrait-error.hidden { display: none; } .body-portrait-error-retry { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin: 0; padding: 7px 12px; border-radius: 9999px; border: 1px solid var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--surface)); color: var(--gold-deep); font-family: var(--font-heading); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform .12s ease, border-color .2s ease; } .body-portrait-error-retry:active { transform: scale(0.96); } .body-portrait-preview-wrap { flex: 1; min-height: 0; padding: 16px 20px 8px; display: flex; align-items: center; justify-content: center; } .body-portrait-preview { width: 100%; max-width: 280px; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow-card); display: flex; align-items: center; justify-content: center; } .body-portrait-preview.body-portrait-preview--post { aspect-ratio: 4 / 5; max-width: 260px; } .body-portrait-preview.body-portrait-preview--cycle { cursor: pointer; -webkit-tap-highlight-color: transparent; } .body-portrait-preview.body-portrait-preview--cycle:active { transform: scale(0.99); } .body-portrait-preview-img { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--bg); } .body-portrait-loading { font-family: var(--font-heading); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-align: center; padding: 0 16px; } .body-portrait-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 20px 20px; } .body-portrait-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 14px; font-family: var(--font-heading); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; transition: opacity 0.2s ease, transform 0.15s ease; } .body-portrait-btn:disabled { opacity: 0.45; pointer-events: none; } .body-portrait-btn:active:not(:disabled) { transform: scale(0.98); } .body-portrait-btn--secondary { border: 1px solid var(--line); background: var(--bg); color: var(--ink); } .body-portrait-btn--primary { border: 1px solid transparent; background: var(--ink); color: var(--ink-contrast); } /* Reels 9:16 — кнопка появляется рядом с «Поделиться», когда ролик готов */ .body-portrait-reels-btn { grid-column: 1 / -1; } .body-portrait-reels-btn.hidden { display: none; } .body-portrait-reels-status { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 20px 14px; font-family: var(--font-heading); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-align: center; } .body-portrait-reels-status.hidden { display: none; } .body-portrait-reels-status--error { color: var(--muted); opacity: 0.85; } .body-portrait-reels-spinner { width: 12px; height: 12px; flex-shrink: 0; border-radius: 9999px; border: 1.5px solid var(--line); border-top-color: var(--ink); animation: body-portrait-reels-spin 0.9s linear infinite; } .body-portrait-reels-spinner.hidden { display: none; } @keyframes body-portrait-reels-spin { to { transform: rotate(360deg); } } .body-portrait-social { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 20px 20px; } .body-portrait-social-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 9999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); transition: opacity 0.2s ease, transform 0.15s ease, border-color 0.2s ease; } .body-portrait-social-btn:hover:not(:disabled) { border-color: var(--gold); } .body-portrait-social-btn:active:not(:disabled) { transform: scale(0.94); } .body-portrait-social-btn:disabled { opacity: 0.45; pointer-events: none; } .body-portrait-social-icon { width: 20px; height: 20px; flex-shrink: 0; } /* html2canvas capture nodes (off-screen share cards) */ .body-portrait-capture__brand-header { box-sizing: border-box; } .body-portrait-capture__theme-title { width: 100%; box-sizing: border-box; text-align: center !important; white-space: normal; overflow-wrap: break-word; word-wrap: break-word; } .body-portrait-capture__photo-title.body-portrait-capture__theme-title { text-align: center !important; } .body-portrait-capture--photo.body-portrait-capture--story .body-portrait-capture__brand-header { margin-bottom: 20px; } .body-portrait-capture__body-copy { width: 100%; max-width: 100%; box-sizing: border-box; white-space: normal; overflow-wrap: break-word; word-wrap: break-word; } .body-portrait-capture__text-zone { align-items: stretch !important; } .body-portrait-capture__text-stack { width: 100%; align-self: stretch; box-sizing: border-box; } #body-portrait-capture blockquote.body-portrait-capture__body-copy { display: block; width: 100%; max-width: 100%; box-sizing: border-box; } #energy-wave-portrait-capture .energy-wave-capture__stack { align-items: stretch; } #energy-wave-portrait-capture .energy-wave-capture__eyebrow, #energy-wave-portrait-capture .energy-wave-capture__body { width: 100%; box-sizing: border-box; } #energy-wave-portrait-capture .energy-wave-capture__chart .energy-wave-capture__status { width: auto; } #energy-wave-portrait-capture .energy-wave-capture__chart { align-self: center; } .body-portrait-capture__photo-caption { width: 100%; align-self: stretch; } .body-portrait-capture__photo-caption .body-portrait-capture__quote { width: 100%; max-width: 100%; } .body-portrait-archive-row { display: flex; flex-direction: column; align-items: center; padding: 0 20px 16px; } .body-portrait-archive-link { border: none; background: transparent; color: var(--muted); font-family: var(--font-heading); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; } .share-posts-overlay { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; opacity: 0; transition: opacity 0.25s ease; } .share-posts-overlay.open { pointer-events: auto; opacity: 1; } .share-posts-scrim { position: absolute; inset: 0; background: rgba(10, 10, 10, 0.45); } .share-posts-panel { position: relative; z-index: 2; width: min(100%, 520px); max-height: min(92vh, 920px); max-height: min(92dvh, 920px); background: var(--bg); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12); overflow: hidden; display: flex; flex-direction: column; } .share-posts-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 10px; border-bottom: 1px solid var(--line); } .share-posts-title { margin: 0; font-family: var(--font-heading); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); } .share-posts-close { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 10px; border-radius: 9999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-family: var(--font-heading); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .share-posts-close__glyph { font-size: 14px; line-height: 1; } .share-posts-footer { padding: 8px 20px 20px; border-top: 1px solid var(--line); } .share-posts-close-btn { width: 100%; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-family: var(--font-heading); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .share-posts-hint { margin: 0; padding: 10px 20px 0; font-size: 12px; line-height: 1.45; color: var(--muted); } .share-posts-grid { padding: 16px 20px 24px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .share-posts-empty { grid-column: 1 / -1; margin: 0; padding: 24px 0; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5; } .share-posts-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .share-posts-card__thumb { position: relative; border: none; padding: 0; background: rgba(23, 23, 23, 0.04); border-radius: 14px; overflow: hidden; min-height: 140px; box-shadow: 0 8px 24px rgba(23, 23, 23, 0.08); } .share-posts-card__img { width: 100%; height: auto; min-height: 140px; max-height: 220px; object-fit: contain; display: block; background: rgba(23, 23, 23, 0.03); } video.share-posts-card__img { height: 220px; object-fit: cover; pointer-events: none; } .share-posts-card__video-badge { position: absolute; right: 8px; bottom: 8px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 9px; pointer-events: none; } .share-posts-viewer__img.hidden { display: none; } .share-posts-card__meta { min-width: 0; } .share-posts-card__title { margin: 0; font-size: 11px; font-weight: 600; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .share-posts-card__date { margin: 2px 0 0; font-size: 10px; color: var(--muted); } .share-posts-card__actions { display: flex; gap: 8px; } .share-posts-icon-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; } .share-posts-icon-btn--danger { color: #b45309; } .share-posts-viewer { position: fixed; inset: 0; z-index: 130; background: rgba(10, 10, 10, 0.92); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; } .share-posts-viewer.hidden { display: none; } .share-posts-viewer__close { position: absolute; top: 20px; right: 20px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.35); color: #fff; font-family: var(--font-heading); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .share-posts-viewer__img { max-width: min(100%, 420px); max-height: 72vh; max-height: 72dvh; border-radius: 16px; object-fit: contain; } .share-posts-viewer__caption { margin: 16px 0 0; max-width: 420px; text-align: center; color: rgba(255,255,255,0.82); font-size: 13px; line-height: 1.45; } body.share-posts-open { overflow: hidden; } /* Crawler-visible FAQ (server-filled via /api/shell); hidden from UI layout */ .seo-faq { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .seo-faq details { white-space: normal; }