@charset "UTF-8"; /* ════════════════════════════════════════════════════════════════════════════ POP — BunnySplit candy Gen-Z + космос · ФИНАЛЬНЫЙ ВИЗУАЛЬНЫЙ ЯЗЫК natal-chart ──────────────────────────────────────────────────────────────────────────── Источник истины стиля (1:1 перенос токенов/приёмов): print-split/frontend/pop.css — candy-токены, .sticker, spring print-split/frontend/landing/landing-pop.css — .lp-grad, маркер-герой, reveal print-split/frontend/brandbook/index.html — Unbounded+Inter, палитра Слой ПОВЕРХ cosmos.css. Грузится ПОСЛЕДНИМ → выигрывает каскад. Стратегия — НЕ переписывать 1157 строк cosmos.css, а: 1) переопределить токены (ink, canvas, act, glow) на СВЕТЛЫЕ candy-значения — и весь существующий каркас (glass, cta, year-card, rs, num, power-card) автоматически «переворачивается» в светлый; 2) докрутить характерные BunnySplit-приёмы (кремовый холст + candy-блобы, белые sticker-карты, маркер за словом, градиент-пилюли, конфетные планеты). Инженерия styles.css (themeParams, safe-area, нативные кнопки) НЕ трогается. Тон (product-philosophy): candy живёт в ПОДАЧЕ, не в смысле. ════════════════════════════════════════════════════════════════════════════ */ /* Шрифты Unbounded+Inter грузятся через в (index.html + превью) — надёжнее @import (не блокирует парс CSS, как в BunnySplit brandbook). */ /* ── 1. CANDY-ТОКЕНЫ (канон BunnySplit) ──────────────────────────────────── */ :root { /* поверхности */ --cream: #FFFDF7; /* тёплый почти-белый холст (канон --bg) */ --cream-2: #F6F2EA; /* секция/трек */ --paper: #FFFFFF; /* карты */ /* candy-палитра */ --coral: #FF5E7E; --violet: #7C5CFF; --blue: #2E6BFF; --lime: #C6F24E; --sun: #FFC53D; /* AA-safe чернила candy-оттенков для МЕЛКОГО текста на креме (≥4.5:1) */ --violet-ink: #6438E6; --coral-ink: #D83A5C; --ok-ink: #0E9E5C; /* candy-градиенты */ --grad-hero: linear-gradient(135deg, #FF5E7E 0%, #7C5CFF 100%); --grad-2: linear-gradient(120deg, #2E6BFF, #7C5CFF); --grad-sun: linear-gradient(120deg, var(--lime), var(--sun)); /* радиусы (крупные, чанковые) */ --r-pop: 22px; --r-pop-lg: 32px; /* тени candy */ --pop-shadow: 0 8px 30px rgba(20,20,20,.07); --pop-shadow-lg: 0 20px 50px -20px rgba(124,92,255,.35); /* шрифты BunnySplit: Unbounded (display/чанк) + Inter (текст). Системный фолбэк держит первый кадр без FOIT (font-display:swap). */ --font-display: 'Unbounded', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* ── 2. ПЕРЕВОРОТ body.cosmos В СВЕТЛЫЙ CANDY-ХОЛСТ ────────────────────────── Главное действие. Перебиваем тёмную ауру-ассет на кремовый фон с мягкими candy-подсветками коралл/фиолет (1:1 lp-body из landing-pop.css). И ремапим ВСЕ тёмные токены cosmos.css на светлые — каркас флипается без правок cosmos. */ body.cosmos { background: radial-gradient(1100px 520px at 12% -8%, rgba(124,92,255,.12), transparent 60%), radial-gradient(900px 480px at 96% 4%, rgba(255,94,126,.12), transparent 55%), radial-gradient(800px 600px at 50% 108%, rgba(46,107,255,.08), transparent 60%), var(--cream) !important; background-attachment: fixed; color: #141414; font-family: var(--font-body); /* — Ремап «чернил» cosmos.css на ТЁМНЫЕ (теперь фон светлый) — */ --ink-100: #141414; /* основной текст */ --ink-300: #43404D; /* вторичный (≥7:1 на креме) */ --ink-500: #6B6770; /* подписи/хинты (≥4.5:1 на креме) */ /* — Акценты: candy-значения вместо тёмно-космо — */ --violet-300: #b9a6ff; --violet-400: #9a7dff; --violet-500: #7C5CFF; --violet-600: #6438E6; --gold-300: #E0920C; /* тёплое золото читаемо на светлом */ --gold-500: #C9810A; --nebula-400: #ec6fa9; --nebula-500: #D8488E; /* — Стекло/вуаль → БЕЛАЯ карта-наклейка (BunnySplit .pp-card) — */ --canvas-veil: #FFFFFF; --canvas-veil-strong: #FFFFFF; --glass-fill: #FFFFFF; --glass-border: 1px solid rgba(20,20,20,.07); /* — Тени вместо glow (на светлом тень видна, glow — нет) — */ --glow-violet: var(--pop-shadow); --glow-gold: 0 8px 26px -10px rgba(255,197,61,.55); --glow-coral: 0 8px 26px -10px rgba(255,94,126,.55); --glow-lime: 0 8px 22px -10px rgba(198,242,78,.6); --glow-soft: var(--pop-shadow); --shadow-card: var(--pop-shadow); /* — ЕДИНАЯ кнопка-действие: candy градиент-пилюля coral→violet — */ --act-bg: var(--grad-hero); --act-ink: #FFFFFF; --act-bg-soft: rgba(124,92,255,.10); /* — Базовые токены styles.css → светлые — */ --bg: transparent; --text: #141414; --hint: #6B6770; --card: #FFFFFF; --accent: var(--violet); --accent-text: #FFFFFF; --border: rgba(20,20,20,.08); --border-strong: rgba(20,20,20,.16); --destructive: #E5384D; /* poп-токены остаются звонкими */ --pop-coral: var(--coral); --pop-violet: var(--violet); --pop-blue: var(--blue); --pop-lime: var(--lime); --pop-sun: var(--sun); --pop-cta: var(--grad-hero); --pop-ink: #141414; } /* На светлом холсте тёмная аура-подложка не нужна — гасим dark-ассет слои. */ body.cosmos .cosmos-bg { mix-blend-mode: normal; opacity: .9; } .cosmos-bg .blob-1 { background: radial-gradient(circle, rgba(124,92,255,.5), transparent 70%); opacity:.22; mix-blend-mode: normal; } .cosmos-bg .blob-2 { background: radial-gradient(circle, rgba(255,94,126,.5), transparent 70%); opacity:.20; mix-blend-mode: normal; } .cosmos-bg .blob-3 { background: radial-gradient(circle, rgba(46,107,255,.4), transparent 70%); opacity:.16; mix-blend-mode: normal; } /* Орбиты — тёмные пунктиры по светлому (на свету белые невидимы). */ .cosmos-sky .orbit { border-color: rgba(124,92,255,.16) !important; } .cosmos-sky .orbit-2 { border-color: rgba(255,94,126,.16) !important; } /* Искры на светлом — фиолетовые точки (белые сливаются с кремом). */ .cosmos-sky .spark { background: radial-gradient(circle, var(--violet) 1.6px, transparent 2.2px) !important; } /* ════════════════════════════════════════════════════════════════════════════ 3. ТИПОГРАФИКА — чанковый Unbounded на заголовках ════════════════════════════════════════════════════════════════════════════ */ .display, .pop-display, .me-name, .home-title, .power-title, .rs-hero-title, .rs-sec-title, .num-lines-title, .num-detail-name, .state-title, .loading-title, .onb-title, .lp-h1, .lp-h2 { font-family: var(--font-display) !important; letter-spacing: -0.03em; } /* Весь интерфейс — Inter (перебиваем системный стек cosmos.css/styles.css). Без этого длинный текст разбора падал в системный serif при гонке загрузки. */ body.cosmos, body.cosmos * { font-family: var(--font-body); } .lede, .hint-text, .reading, .reading p, .reading li, .power-sub, .yc-sub, .rs-hero-verdict, .rs-lead, .rs-sec-body, .onb-list li, p, span, li, label, input, select, button, textarea { font-family: var(--font-body); } /* цифры — Inter tabular (чанковый Unbounded для крупных значений) */ .num { font-family: var(--font-body); font-variant-numeric: tabular-nums; } .yc-year.num, .num-glyph.num, .num-working-vals.num, .num-detail-glyph.num { font-family: var(--font-display); font-variant-numeric: tabular-nums; } /* ── 4. CANDY-АКЦЕНТ-ТЕКСТ (gradient-ink, 1:1 lp-grad) ────────────────────── Ключевые слова-«герои» окрашиваются candy-градиентом coral→violet. */ .pop-accent, .accent, .display .accent { background: var(--grad-hero) !important; -webkit-background-clip: text; background-clip: text; color: transparent !important; } .pop-kicker, .rs-hero-kicker, .rs-sec-eyebrow { color: var(--violet-ink) !important; } /* ── 5. МАРКЕР ЗА СЛОВОМ (фирменное выделение-подложка) ────────────────────── Главный заказанный приём: цветная «маркерная» подложка за словом со скруглением и лёгким наклоном — как фломастером. coral/violet/lime/sun. Анимация «прорисовки» (mark-draw) при появлении. */ .mark { position: relative; z-index: 0; display: inline-block; padding: 0 .12em; color: var(--paper); font-weight: 800; white-space: nowrap; } .mark::before { content: ""; position: absolute; z-index: -1; left: -.06em; right: -.06em; top: .04em; bottom: .04em; background: var(--coral); border-radius: .42em .5em .4em .55em; transform: rotate(-1.6deg) scaleX(1); transform-origin: left center; box-shadow: 0 3px 10px -3px rgba(255,94,126,.55); } .mark--violet::before { background: var(--violet); box-shadow: 0 3px 10px -3px rgba(124,92,255,.55); } .mark--blue::before { background: var(--blue); box-shadow: 0 3px 10px -3px rgba(46,107,255,.55); } .mark--sun::before { background: var(--sun); box-shadow: 0 3px 10px -3px rgba(255,197,61,.55); } .mark--sun { color: #141414; } .mark--lime::before { background: var(--lime); box-shadow: 0 3px 10px -3px rgba(198,242,78,.6); } .mark--lime { color: #141414; } /* «прорисовка» при появлении */ @keyframes mark-draw { from { transform: rotate(-1.6deg) scaleX(0); } to { transform: rotate(-1.6deg) scaleX(1); } } .enter .mark::before, .enter-stagger .mark::before, .pop-display .mark::before { animation: mark-draw .5s cubic-bezier(.34,1.56,.64,1) .15s both; } /* ════════════════════════════════════════════════════════════════════════════ 6. БЕЛАЯ КАРТА-НАКЛЕЙКА + spring (BunnySplit .pp-card / .pp-spring) .glass теперь = чистая белая candy-карта с мягкой тенью (через ремап токенов выше backdrop-filter на белом не нужен — гасим, чтобы не мутить). ════════════════════════════════════════════════════════════════════════════ */ .glass { background: var(--paper) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1px solid rgba(20,20,20,.06) !important; box-shadow: var(--pop-shadow) !important; border-radius: var(--r-pop) !important; } /* spring-отклик на тап/hover для карт (cubic-bezier пружина из канона) */ .tap { transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, border-color .18s !important; } .year-card.tap:active, .power-card.tap:active { transform: scale(.985); } @media (hover:hover) { .year-card.tap:hover, .power-card.tap:hover { transform: translateY(-2px); box-shadow: var(--pop-shadow-lg) !important; } } /* ════════════════════════════════════════════════════════════════════════════ 7. ЕДИНАЯ CTA — candy градиент-пилюля (BunnySplit .pp-btn-primary) ════════════════════════════════════════════════════════════════════════════ */ .cta, .btn-primary { background: var(--grad-hero) !important; color: #fff !important; border-radius: 999px !important; font-family: var(--font-body) !important; font-weight: 800 !important; box-shadow: 0 12px 28px -10px rgba(124,92,255,.6) !important; transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, filter .15s !important; } @media (hover:hover) { .cta:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -10px rgba(124,92,255,.8) !important; } } .cta:active { transform: translateY(0) scale(.99); } .cta.is-pop { background: var(--grad-hero) !important; } /* вторичная — белая пилюля с candy-обводкой */ .cta-ghost { background: var(--paper) !important; color: #141414 !important; border: 1.5px solid rgba(20,20,20,.14) !important; border-radius: 999px !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } @media (hover:hover) { .cta-ghost:hover { border-color: var(--violet) !important; color: var(--violet-ink) !important; } } /* единая плашка-действие в строках (year/power) — candy градиент-пилюля. Делаем заметной: насыщенный градиент, белый текст, мягкая тень, чуть крупнее. */ .yc-action, .power-action { background: var(--grad-hero) !important; color: #fff !important; box-shadow: 0 6px 16px -6px rgba(255,94,126,.7) !important; font-family: var(--font-body) !important; font-weight: 800 !important; padding: 8px 14px !important; font-size: 13.5px !important; } /* у локов/генерации — спокойная мягкая (не кричит) */ .year-card.is-locked .yc-action, .year-card.is-generating .yc-action { background: var(--act-bg-soft) !important; color: var(--violet-ink) !important; box-shadow: none !important; } /* ════════════════════════════════════════════════════════════════════════════ 8. КОНФЕТНЫЕ 3D-ПЛАНЕТЫ-ОРБЫ (Gemini-ассет → CSS-фолбэк) Орбы состояний/профиля = глянцевые candy-сферы. Если PNG сгенерился — он подставится через .planet/.yc-orb (ниже); если нет — candy-radial CSS-фолбэк. ════════════════════════════════════════════════════════════════════════════ */ /* фоновые плавающие планеты в небе — candy PNG (fail-soft: CSS-круг если нет файла) */ .cosmos-sky .planet-1 { background-image: url("../assets/candy/planet-sun.png"), radial-gradient(circle at 32% 28%, #ffe39a, var(--sun)); filter: drop-shadow(0 8px 18px rgba(255,197,61,.5)) !important; } .cosmos-sky .planet-2 { background-image: url("../assets/candy/planet-violet.png"), radial-gradient(circle at 32% 28%, #cdb8ff, var(--violet)); filter: drop-shadow(0 8px 18px rgba(124,92,255,.5)) !important; } .cosmos-sky .planet-3 { background-image: url("../assets/candy/planet-coral.png"), radial-gradient(circle at 32% 28%, #ffb3c4, var(--coral)); filter: drop-shadow(0 8px 18px rgba(255,94,126,.5)) !important; border-radius:50%; } /* профиль-орб «Я» — конфетная фиолетовая планета */ .me-orb { background: url("../assets/candy/planet-violet.png") center/contain no-repeat, radial-gradient(circle at 32% 28%, #cdb8ff, var(--violet)) !important; border-radius: 50%; filter: drop-shadow(0 8px 18px rgba(124,92,255,.45)) !important; } /* орбы в строках-годах: глянцевые candy-планеты (PNG поверх, CSS-сфера под) */ .year-card .yc-orb { background: url("../assets/candy/planet-violet.png") center/contain no-repeat, radial-gradient(circle at 32% 28%, #cdb8ff, var(--violet)) !important; box-shadow: 0 4px 12px -4px rgba(124,92,255,.5) !important; filter: none !important; } /* внутренний SVG-глиф звезды убираем — глянцевая планета говорит сама за себя */ .year-card .yc-orb svg, .power-orb svg, .num-orb svg, .me-orb svg { display: none !important; } .year-card.is-ready .yc-orb { background: url("../assets/candy/planet-sun.png") center/contain no-repeat, radial-gradient(circle at 32% 28%, #ffe39a, var(--sun)) !important; box-shadow: 0 4px 14px -4px rgba(255,197,61,.6) !important; } .year-card.is-generating .yc-orb { background: url("../assets/candy/planet-blue.png") center/contain no-repeat, radial-gradient(circle at 32% 28%, #9fb8ff, var(--blue)) !important; box-shadow: 0 4px 14px -4px rgba(46,107,255,.55) !important; } .power-orb { background: url("../assets/candy/planet-sun.png") center/contain no-repeat, radial-gradient(circle at 32% 28%, #ffe39a, var(--sun)) !important; box-shadow: inset 0 2px 6px rgba(255,255,255,.55), 0 5px 14px -5px rgba(255,197,61,.6) !important; filter: none !important; } .num-orb { background: url("../assets/candy/planet-blue.png") center/contain no-repeat, radial-gradient(circle at 32% 28%, #9fb8ff, var(--blue)) !important; box-shadow: inset 0 2px 6px rgba(255,255,255,.45), 0 5px 14px -5px rgba(46,107,255,.6) !important; filter: none !important; } /* глифы внутри орбов на светлой сфере — тёмные (контраст) уже #1a1330 в svg */ /* ════════════════════════════════════════════════════════════════════════════ 9. КАРТОЧКИ СОСТОЯНИЙ ГОДА — candy-светлые (форма+орб+текст различают, не цвет) ════════════════════════════════════════════════════════════════════════════ */ .year-card.is-ready { background: linear-gradient(135deg, rgba(255,197,61,.16), #fff 70%) !important; border: 1.5px solid rgba(255,197,61,.5) !important; box-shadow: var(--pop-shadow) !important; } .year-card.is-generating { background: linear-gradient(135deg, rgba(124,92,255,.14), #fff 70%) !important; border: 1.5px solid rgba(124,92,255,.4) !important; } .year-card.is-locked { background: var(--cream-2) !important; border: 1.5px dashed rgba(20,20,20,.16) !important; opacity: 1 !important; } .year-card.is-locked .yc-orb { background: var(--cream-2) !important; border: 1.5px dashed rgba(124,92,255,.35) !important; box-shadow:none !important; } .yc-now { color: var(--coral-ink) !important; } /* ── 10. ПИЛЮЛИ-ТАБЫ / ЧИПЫ candy ──────────────────────────────────────────── */ .pill-tabs .t { background: var(--paper) !important; color: var(--ink-500) !important; border: 1.5px solid rgba(20,20,20,.1) !important; font-family: var(--font-body) !important; } .pill-tabs .t.on { background: var(--grad-hero) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 6px 16px -7px rgba(124,92,255,.6) !important; } .chip { background: var(--paper) !important; color: var(--ink-500) !important; border: 1.5px solid rgba(20,20,20,.12) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; font-family: var(--font-body) !important; } .chip.chip-free { background: var(--lime) !important; color: #1f2d05 !important; border-color: transparent !important; font-weight: 800 !important; box-shadow: 0 0 0 2.5px #fff, 0 4px 12px -3px rgba(198,242,78,.7) !important; transform: rotate(-2deg); } /* ── 11. СТИКЕР-НАКЛЕЙКА (1:1 .sticker из pop.css) ──────────────────────────── */ .sticker { font-family: var(--font-display) !important; font-weight: 800; box-shadow: 0 0 0 2.5px #fff, 0 4px 12px rgba(20,20,20,.18) !important; background: var(--sun); color: #141414; } .sticker--coral { background: var(--coral) !important; color:#fff !important; } .sticker--violet { background: var(--violet) !important; color:#fff !important; } .sticker--blue { background: var(--blue) !important; color:#fff !important; } .sticker--lime { background: var(--lime) !important; color:#1f2d05 !important; } .sticker--sun { background: var(--sun) !important; color:#141414 !important; } /* ════════════════════════════════════════════════════════════════════════════ 12. РАЗБОР (reading) — candy-светлый HERO + белые секции-карты ════════════════════════════════════════════════════════════════════════════ */ .rs-hero { background: linear-gradient(160deg, rgba(255,197,61,.18), rgba(124,92,255,.14) 55%, rgba(255,94,126,.16)) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1.5px solid rgba(124,92,255,.22) !important; box-shadow: var(--pop-shadow) !important; border-radius: var(--r-pop-lg) !important; } .rs-hero-title { font-family: var(--font-display) !important; font-weight: 800; letter-spacing: -.03em; } .rs-hero-verdict { color: var(--ink-300) !important; } .rs-sec, .num-full-item, .num-cell, .num-detail { background: var(--paper) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1px solid rgba(20,20,20,.06) !important; box-shadow: var(--pop-shadow) !important; border-radius: var(--r-pop) !important; } .reading strong, .reading em { color: #141414 !important; } .reading li::before { color: var(--coral) !important; } .reading h4 { color: var(--violet-ink) !important; font-family: var(--font-body) !important; } /* инсайт-блок (доказательство точности) — candy lime-карта */ .rs-insight { background: linear-gradient(135deg, rgba(198,242,78,.22), #fff 70%) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1.5px solid rgba(198,242,78,.6) !important; border-left: 4px solid var(--lime) !important; box-shadow: var(--pop-shadow) !important; } .rs-insight-ic { color: var(--coral-ink) !important; } .rs-insight p { color: #141414 !important; } /* шеринг-мостик — candy градиент-карта + reel-кольцо остаётся */ .rs-share { background: linear-gradient(160deg, rgba(124,92,255,.18), rgba(255,94,126,.16)) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1.5px solid rgba(124,92,255,.24) !important; border-radius: var(--r-pop-lg) !important; } .rs-share-title { font-family: var(--font-display) !important; font-weight: 800; } .rs-share .cta { background: var(--grad-hero) !important; } .rs-divider span:nth-child(odd) { color: var(--coral) !important; } /* ── 12b. ТИПЫ СЕКЦИЙ candy — ритм/иерархия (ломаем «стену белых коробок») ────── База типов в cosmos.css; здесь candy-перекрытия (светлый холст, выигрывают). */ /* ИНСАЙТ-секция (итог/главное) — ЯРКАЯ candy-карта lime→белый, доминанта ритма. */ .rs-sec--insight { background: linear-gradient(135deg, rgba(198,242,78,.26), #fff 72%) !important; border: 1.5px solid rgba(198,242,78,.65) !important; border-left: 5px solid var(--lime) !important; box-shadow: 0 12px 30px -16px rgba(124,92,255,.4) !important; } .rs-sec--insight .rs-sec-body p { color: #141414 !important; font-weight: 600; font-size: 18px; } /* PLAIN-секция (второстепенная справка) — БЕЗ карты, тонкая линия сверху. */ .rs-sec--plain { background: transparent !important; border: 0 !important; border-top: 1px solid rgba(20,20,20,.10) !important; border-radius: 0 !important; box-shadow: none !important; } .rs-sec--plain .rs-orb { background: transparent !important; border: 0 !important; box-shadow: none !important; } .rs-sec--plain .rs-sec-title { color: var(--ink-300) !important; } /* ЧЕК-ЛИСТ — пункты candy-чек-таблетки (coral-чек), не сплошной список. */ .rs-check li { background: rgba(124,92,255,.07) !important; border: 1.5px solid rgba(124,92,255,.16) !important; } .rs-check-mk { color: #fff !important; background: var(--grad-hero) !important; border: 0 !important; box-shadow: 0 4px 10px -4px rgba(255,94,126,.6) !important; } /* Заголовки секций candy: Unbounded (наследуют .rs-sec-title из §3 уже), цвет ink. */ .rs-sec-title { color: #141414 !important; } .rs-sec--insight .rs-sec-title { color: #141414 !important; } /* маркер за словом в заголовке — текст БЕЛЫЙ на цветной подложке (перебиваем title-ink) */ .rs-sec-title .mark { color: var(--paper) !important; } .rs-sec-title .mark--lime, .rs-sec-title .mark--sun { color: #141414 !important; } /* ── 13. КВАДРАТ ПИФАГОРА candy ─────────────────────────────────────────────── */ .num-cell.is-dominant { background: linear-gradient(160deg, rgba(124,92,255,.18), #fff 70%) !important; border-color: rgba(124,92,255,.5) !important; } .num-glyph { color: #141414 !important; } .num-working { background: rgba(124,92,255,.07) !important; border:1px solid rgba(124,92,255,.18) !important; } .num-working-vals { color: var(--violet-ink) !important; } .num-detail-glyph { background: var(--grad-hero) !important; color:#fff !important; box-shadow: 0 6px 16px -7px rgba(124,92,255,.6) !important; } .num-disclaimer { background: var(--cream-2) !important; border-left: 3px solid var(--violet) !important; color: var(--ink-500) !important; } /* ── 14. ФОРМА / ОНБОРДИНГ / СОСТОЯНИЯ candy ────────────────────────────────── */ .cosmos .form input, .cosmos .form select, .cosmos #time, input, select { background: var(--paper) !important; color: #141414 !important; border: 1.5px solid rgba(20,20,20,.12) !important; border-radius: 14px !important; } .cosmos .form input:focus-visible, .cosmos .form select:focus-visible, input:focus-visible, select:focus-visible { border-color: var(--violet) !important; box-shadow: 0 0 0 3px rgba(124,92,255,.18) !important; } label, .cosmos .form label { color: var(--ink-500) !important; } .me-edit { background: var(--paper) !important; border:1.5px solid rgba(20,20,20,.1) !important; color: var(--coral) !important; } .topnav { background: var(--paper) !important; border:1.5px solid rgba(20,20,20,.1) !important; color:#141414 !important; } .topnav span { color: var(--coral) !important; } .onb-list li::before { color: var(--coral) !important; } .onb-foot, .hint-text { color: var(--ink-500) !important; } .state-card.glass .state-emoji { color: var(--coral) !important; } .more-year select { background: var(--paper) !important; border:1.5px solid rgba(20,20,20,.1) !important; color:#141414 !important; } /* ── 15. ПЛАВАЮЩИЙ СТИКЕР У ЗАГОЛОВКА «Год силы» (BunnySplit lp-stickerfloat) ── Маленькая candy-наклейка-«НОВОЕ»/«✦» на power-card — энергия и движение. */ .power-card { position: relative; } .power-card.is-ready::after { content: "готово ✦"; position: absolute; top: -10px; right: 14px; font: 800 11px var(--font-display); letter-spacing: -.01em; background: var(--lime); color:#1f2d05; padding: 4px 10px; border-radius: 999px; box-shadow: 0 0 0 2.5px #fff, 0 4px 10px rgba(20,20,20,.16); transform: rotate(4deg); animation: sticker-pop .5s cubic-bezier(.34,1.56,.64,1) both; } @keyframes sticker-pop { 0%{transform:scale(.5) rotate(4deg);opacity:0;} 60%{transform:scale(1.12) rotate(2deg);} 100%{transform:scale(1) rotate(4deg);opacity:1;} } /* ── 16. ПЛАВАЮЩИЕ ПЛАНЕТЫ + ДВИЖЕНИЕ (усиливаем «жизнь» по просьбе владельца) ── Декор-планеты держим по КРАЯМ/НИЗУ, чтобы не наезжать на шапку/табы/CTA. */ @keyframes pop-float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-9px) } } .cosmos-sky .planet-1 { left: 82vw !important; top: 7vh !important; width:52px !important; height:52px !important; animation: pop-float 5.5s ease-in-out infinite !important; } .cosmos-sky .planet-2 { left: 4vw !important; top: 46vh !important; width:40px !important; height:40px !important; animation: pop-float 7s ease-in-out infinite !important; } .cosmos-sky .planet-3 { left: 86vw !important; top: 78vh !important; width:46px !important; height:46px !important; animation: pop-float 6s ease-in-out infinite .6s !important; } /* ── 17. ДОСТУПНОСТЬ / REDUCED MOTION ───────────────────────────────────────── */ .cta:focus-visible, .cta-ghost:focus-visible { outline: none !important; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--violet) !important; } @media (prefers-reduced-motion: reduce) { .cosmos-sky .planet-1, .cosmos-sky .planet-2, .cosmos-sky .planet-3 { animation: none !important; } .mark::before { animation: none !important; transform: rotate(-1.6deg) scaleX(1) !important; } .power-card.is-ready::after { animation: none !important; } }