/** * taro-base.css — общая база для всех /taro/* шаблонов. * * Подключается ПЕРЕД taro-{slug}.css через wp_enqueue_style в inc/taro.php * (taro-base зарегистрирован как зависимость). * * Содержит: * 1. :root переменные (палитра, font-sizing, wrapper-offset) + медиа-точки * 2. Spacing-токены для секций: --taro-section-py / --taro-section-py-m * 3. .bg-shell базовый reset (box-sizing, шрифт, цвет, фон) * 4. .bg-shell элементы: img, a, button * 5. .bg-shell .wrap (контейнер с wrapper-offset) * 6. .bg-shell .section базовый spacing (через токены, без !important) * 7. .bg-shell ~ .footer обнуление margin-top * 8. FAN-блок (.ref-fan, .fan-card.f-5..f5, @keyframes fanTwinkle, mobile @media) * используется на 8 шаблонах (везде кроме vopros). * 9. FAQ core (.faq-orb-section, .faq-layout, .faq-list, .faq-item, .faq-q, .faq-a) * аккардеон-логика, идентичная в 8 шаблонах (везде кроме vopros). * Markup рендерится через template-parts/taro/blocks/faq-block.php. * JS-обработчик клика — assets/js/taro-karta.js → initFAQ(). * * Что НЕ здесь (живёт в taro-{slug}.css): * - Типографика .h1–.h4 / h1–h4 (vopros имеет свой H1, koloda свои селекторы) * - PAGE BG (.bg-shell::before, .bg-glyphs) — у каждой страницы свой декор * - .bg-shell .hero, .crumbs.wrap (структура hero/крошек различна) * - FAQ блок (Этап 2.2) * * При изменении spacing/палитры — правь ОДНО место здесь, и оно применится * ко всем taro-страницам разом. Per-file overrides с !important больше не нужны. */ :root{ --black:#111314; --blue:#2a2b41; --green:#4f725d; --gold:#cca656; --gold-dark:#ba8923; --gold-light:#fbd890; --light-gold:#fcf7ed; --gray-text:#4b4b4b; --gray:#a5a5a5; --gray-light:#f4f4f4; --gray-apple:#e7e8ea; --white:#ffffff; --main-font-size:0.520833vw; --wrapper-offset:8rem; /* Taro spacing tokens — единый источник правды для отступов секций. Раньше каждый taro-*.css имел блок «Меньше пустоты» с !important. Теперь меняешь здесь — меняется везде. */ --taro-section-py: 64px; --taro-section-py-m: 40px; --taro-section-border: 1px solid rgba(204,166,86,0.1); } @media (min-width:1921px){ :root{ --main-font-size:62.5%; } } @media (max-width:1440px){ :root{ --main-font-size:0.572917vw; --wrapper-offset:6rem; } } @media (max-width:1120px){ :root{ --main-font-size:0.625vw; --wrapper-offset:4rem; } } @media (max-width:980px){ :root{ --main-font-size:50%; --wrapper-offset:2rem; } } @media (max-width:580px){ :root{ --main-font-size:62.5%; --wrapper-offset:1.6rem; } } @media (max-width:440px){ :root{ --main-font-size:2.6667vw; } } .bg-shell, .bg-shell *, .bg-shell *::before, .bg-shell *::after{ box-sizing:border-box; } /* Anti-flash: чтобы при momentum-скролле сквозь fixed-фон не светило белым body. */ html:has(.bg-shell), body:has(.bg-shell){ background:#0d1029; } .bg-shell { margin:0; padding:0; font-family:'Manrope',sans-serif; font-size:1.8rem; line-height:1.3; letter-spacing:-0.02em; color:#f4f1e6; background:#0d1029; -webkit-font-smoothing:antialiased; } @media (max-width:1120px){ .bg-shell { font-size:1.6rem; } } @media (max-width:580px){ .bg-shell { font-size:1.4rem; } } .bg-shell img{ max-width:100%; display:block; } .bg-shell a{ text-decoration:none; color:inherit; } .bg-shell button{ font-family:inherit; cursor:pointer; } .bg-shell .wrap{ width:100%; max-width:calc(144rem + 2*var(--wrapper-offset)); margin:0 auto; padding:0 var(--wrapper-offset); } /* ── SECTION (через токены, без !important) ──────────────────────────── Per-file CSS может уточнить .bg-shell .section., но базовый padding и border-top контролируются отсюда. */ .bg-shell .section{ padding-top: var(--taro-section-py); padding-bottom: var(--taro-section-py); position: relative; z-index: 1; border-top: var(--taro-section-border); } @media (max-width:580px){ .bg-shell .section{ padding-top: var(--taro-section-py-m); padding-bottom: var(--taro-section-py-m); } } /* Footer вплотную к .bg-shell — таро-страницы заканчиваются ровно по обрезке, глобальный footer.scss → .footer { margin-top:8rem } здесь обнуляется. */ .bg-shell ~ .footer{ margin-top:0 !important; } /* ══════════════════════════════════════════════════════════════════════════ FAN — развёрнутая колода под справочником Markup: template-parts/taro/ref-sprav-block.php (создаёт .ref-fan-wrap > .ref-fan > .fan-card.f-5..f5) Используется на: home, hub, spravochnik, karta, koloda, zodiak, vremya, tema (на vopros веера нет — там свой .qfan-card). ══════════════════════════════════════════════════════════════════════════ */ .ref-fan-wrap{ margin-top:-40px; margin-bottom:0; padding-bottom:0; position:relative; pointer-events:none; } /* Секция с веером = последняя на странице. Сайт обрывается ровно на нижней границе .ref-fan (где обрезаются карты). */ .bg-shell .section:has(.ref-fan){ padding-bottom:0; } .bg-shell:has(.ref-fan){ min-height:0; } .ref-fan{ position:relative; height:460px; cursor:default; overflow:visible; /* Клипуем только верх/низ, по бокам карты могут выходить за границы */ clip-path:inset(0 -100vw 0 -100vw); margin:0 calc(-1 * var(--wrapper-offset)); } /* 10 карт стоят строго ВЕРТИКАЛЬНО, без поворота. Равный горизонтальный шаг (136px). Y-смещение по параболе: центр выше, края ниже — создаёт купол сверху. */ .fan-card{ position:absolute; left:50%; bottom:0; width:220px; height:336px; margin-left:-110px; border-radius:16px; overflow:hidden; border:1px solid rgba(180,153,232,0.12); background:linear-gradient(160deg, #161936 0%, #11142e 60%, #0d1029 100%); box-shadow: inset 0 0 0 1px rgba(180,153,232,0.05), 0 18px 30px -18px rgba(0,0,0,0.55); } .fan-card svg{ width:100%; height:100%; display:block; opacity:0.6; overflow:visible; } /* 10 позиций. Все карты вертикальные. Шаг по X = 136px → суммарная ширина ~1440px, точно по сетке сайта. Y-смещение параболическое: центр выше, края ниже. */ .fan-card.f-5 { transform:translate(-612px, 160px); z-index:1; } .fan-card.f-4 { transform:translate(-476px, 98px); z-index:2; } .fan-card.f-3 { transform:translate(-340px, 50px); z-index:3; } .fan-card.f-2 { transform:translate(-204px, 18px); z-index:4; } .fan-card.f-1 { transform:translate(-68px, 2px); z-index:6; } .fan-card.f1 { transform:translate(68px, 2px); z-index:6; } .fan-card.f2 { transform:translate(204px, 18px); z-index:4; } .fan-card.f3 { transform:translate(340px, 50px); z-index:3; } .fan-card.f4 { transform:translate(476px, 98px); z-index:2; } .fan-card.f5 { transform:translate(612px, 160px); z-index:1; } /* Сказочное мерцание: разные элементы обложки иногда вспыхивают белым со свечением. Большую часть цикла объект приглушён, кратко загорается ярче — мягко, не навязчиво. PERF: 10 карт × 8 элементов = 80 одновременных infinite-анимаций. Раньше keyframe гонял transform:scale + opacity → 4800 matrix-пересчётов/сек. Теперь только opacity (GPU-композитное свойство, нагрузка ×10 меньше, визуально почти идентично). */ .fan-card .fan-twinkle{ animation:fanTwinkle 7s ease-in-out infinite; will-change:opacity; } .fan-card .fan-twinkle.k1{ animation-delay:-0.4s; animation-duration:7.2s; } .fan-card .fan-twinkle.k2{ animation-delay:-1.6s; animation-duration:8.4s; } .fan-card .fan-twinkle.k3{ animation-delay:-2.9s; animation-duration:6.8s; } .fan-card .fan-twinkle.k4{ animation-delay:-3.7s; animation-duration:9.1s; } .fan-card .fan-twinkle.k5{ animation-delay:-4.5s; animation-duration:7.6s; } .fan-card .fan-twinkle.k6{ animation-delay:-5.3s; animation-duration:8.0s; } .fan-card .fan-twinkle.k7{ animation-delay:-6.1s; animation-duration:9.5s; } .fan-card .fan-twinkle.k8{ animation-delay:-2.2s; animation-duration:8.8s; } @keyframes fanTwinkle{ 0%, 82%, 100% { opacity:0.45; } 88% { opacity:1; } 93% { opacity:1; } 98% { opacity:0.55; } } @media (max-width:980px){ .ref-fan{ height:280px; margin:0 calc(-1 * var(--wrapper-offset)); } .fan-card{ width:120px; height:182px; margin-left:-60px; border-radius:10px; } .fan-card.f-5 { transform:translate(-225px, 90px); } .fan-card.f-4 { transform:translate(-175px, 56px); } .fan-card.f-3 { transform:translate(-125px, 30px); } .fan-card.f-2 { transform:translate(-75px, 12px); } .fan-card.f-1 { transform:translate(-25px, 2px); } .fan-card.f1 { transform:translate(25px, 2px); } .fan-card.f2 { transform:translate(75px, 12px); } .fan-card.f3 { transform:translate(125px, 30px); } .fan-card.f4 { transform:translate(175px, 56px); } .fan-card.f5 { transform:translate(225px, 90px); } } /* ══════════════════════════════════════════════════════════════════════════ FAQ — core accordion (без декоративного орба, который unused в HTML) Markup: template-parts/taro/blocks/faq-block.php JS-обработчик: assets/js/taro-karta.js → initFAQ() Используется на 8 шаблонах (везде кроме vopros — у того .faq-section). ══════════════════════════════════════════════════════════════════════════ */ .faq-orb-section{ position:relative; } .faq-layout{ display:block; } .faq-content{ min-width:0; } .faq-orb-section .h2{ margin-top:0; } .faq-list{ display:flex; flex-direction:column; gap:10px; contain:layout style; } /* Аккардеон: grid-template-rows 0fr→1fr — браузер оптимизирует это нативно, без layout-thrashing main thread'а. Содержимое плавно появляется через GPU-composited opacity+translateY (никакой height/max-height в transition). */ .faq-item{ background:#181c40; border:1px solid rgba(204,166,86,0.2); border-radius:14px; overflow:hidden; transition:border-color .15s ease, background-color .15s ease; contain:layout style; } .faq-item:hover{ background:#21204a; border-color:rgba(204,166,86,0.4); } .faq-item.open{ background:#272249; border-color:rgba(204,166,86,0.55); } .faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:25px 28px; cursor:pointer; text-align:left; background:transparent; border:0; color:#fbf8ec; font-family:inherit; font-size:inherit; line-height:1.4; font-weight:500; transition:color .15s ease; } .faq-item:hover .faq-q{ color:#fff2cc; } .faq-q::after{ content:"+"; flex-shrink:0; font-family:'Forum',serif; font-size:2.8rem; line-height:1; color:var(--gold); transition:transform .3s cubic-bezier(0.4, 0, 0.2, 1), color .15s ease; } .faq-item:hover .faq-q::after{ color:#fbd890; } .faq-item.open .faq-q::after{ transform:rotate(135deg); } /* Аккардеон по образцу product-faq: padding статичный (не анимируется), клиппинг через overflow:hidden на .faq-a + grid-template-rows на .faq-a-wrap. Текст плавно появляется через opacity+transform — это GPU-композит. */ .faq-a-wrap{ display:grid; grid-template-rows:0fr; overflow:hidden; transition:grid-template-rows .32s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .faq-item.open .faq-a-wrap{ grid-template-rows:1fr; } .faq-a{ min-height:0; overflow:hidden; padding:0 28px; line-height:1.7; color:#dadbe0; opacity:0; transform:translateY(-8px); transition: opacity .18s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform .18s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .faq-item.open .faq-a{ opacity:0.9; transform:translateY(0); transition: opacity .22s cubic-bezier(0.25, 0.46, 0.45, 0.94) .08s, transform .22s cubic-bezier(0.25, 0.46, 0.45, 0.94) .08s; } .faq-a p{ margin-bottom:14px; } .faq-a p:last-child{ margin-bottom:24px; } /* ══════════════════════════════════════════════════════════════════════════ PERF — kill-switch декоративных infinite-анимаций на мобиле (≤980px) ────────────────────────────────────────────────────────────────────────── Сужающий список из проверенных селекторов в taro-home/karta/zodiak/tema/ spravochnik/koloda. ВСЕ имена классов конкретные — НЕ используем `[class*=...]` wildcards (они задевали reveal-анимации справочника). prefers-reduced-motion НЕ применяем (ломал animation forwards). Декор не двигается, элементы остаются видимыми, нагрев телефона исчезает. ══════════════════════════════════════════════════════════════════════════ */ @media (max-width:980px){ .bg-shell .fan-twinkle, .bg-shell .birth-promo::before, .bg-shell .birth-promo .tag-plate .ico, .bg-shell .birth-promo .tag-plate .ico svg, .bg-shell .birth-promo .tag-plate .ico::before, .bg-shell .birth-promo .tag-plate .ico::after, .bg-shell .particle, .bg-shell .tema-sway, /* rs-result-summary блок: glow + aurora-blobs + stars + cards-float */ .bg-shell .result-summary, .bg-shell .rs-aurora .blob-1, .bg-shell .rs-aurora .blob-2, .bg-shell .rs-aurora .blob-3, .bg-shell .rs-aurora .blob-4, .bg-shell .rs-stars, .bg-shell .rs-card, .bg-shell .rs-card.rs-card-back, /* snake-orbit */ .bg-shell .snake-star, .bg-shell .snake-star svg, .bg-shell .snake-trail, .bg-shell .snake-trail-1, .bg-shell .snake-trail-2, .bg-shell .snake-trail-3, .bg-shell .snake-trail-4, /* rs-card-art (внутри SVG-логотипа карты) */ .bg-shell .rs-card-art .rays-slow, .bg-shell .rs-card-art .rays-fast, .bg-shell .rs-card-art .ring-dotted, .bg-shell .rs-card-art .ring-dashed, .bg-shell .rs-card-art .pulse-star, .bg-shell .rs-card-art .pulse-core, .bg-shell .rs-card-art .twinkle-1, .bg-shell .rs-card-art .twinkle-2, .bg-shell .rs-card-art .twinkle-3, .bg-shell .rs-card-art .twinkle-4, .bg-shell .rs-card-art .twinkle-5, /* seo-illust */ .bg-shell .seo-illust .twinkle, .bg-shell .seo-illust .rotate-slow, .bg-shell .seo-illust .rotate-rev, .bg-shell .seo-illust .pulse, /* duo-card */ .bg-shell .duo-card .duo-tw, .bg-shell .duo-halo, .bg-shell .duo-ring-outer, .bg-shell .duo-ring-mid, .bg-shell .duo-star, .bg-shell .duo-core, .bg-shell .duo-sway, /* book-promo */ .bg-shell .bk-halo, .bg-shell .bk-orbit, .bg-shell .bk-const, .bg-shell .bk-book, .bg-shell .bk-sheen, .bg-shell .bk-dust, .bg-shell .bk-dust .p, /* arcana-ticker (бегущая строка карт) */ .bg-shell .arcana-ticker-track{ animation: none !important; } } /* ══════════════════════════════════════════════════════════════════════════ Единый шрифт/размер для кнопок раздела /taro/ Manrope 1.6rem (ПК) / 1.4rem (≤580px), как у «Сделать расклад/Перемешать/Сменить колоду». !important нужен, чтобы перебить per-file override в taro-tema.css (одинаковая специфичность 0,2,0). Список селекторов — точный, без wildcard'ов. Исключения (НЕ в списке, остаются со своими размерами): - .ref-card — навигация в блоке «Полезное из справочника» внизу страниц - .ref-fan-wrap * — декоративный веер карт - .tag-cloud a, .arc-tags a — теги/рекомендации ══════════════════════════════════════════════════════════════════════════ */ .bg-shell .hero .pills button, .bg-shell .hero .pills a, .bg-shell .cta-primary, .bg-shell .cta-secondary, .bg-shell .cta-tertiary, .bg-shell .deck-modal .apply, .bg-shell .deck-modal .cancel, .bg-shell .qask-cta, .bg-shell .qask-examples button, .bg-shell .qask-examples a, .bg-shell .qsr-cta, .bg-shell .qsr-cta-btns a, .bg-shell .arc-more-btn, .bg-shell .arc-more-btn--lg, .bg-shell .arc-slide-info .arc-more, .bg-shell .arcana-card .ar-link, .bg-shell .ar-cta, .bg-shell .ar-cta-btn, .bg-shell .arcana-cta, .bg-shell .bk-btn, .bg-shell .bk-cta, .bg-shell .bp-btn, .bg-shell .btn-ghost, .bg-shell .btn-gold, .bg-shell .btn-meaning, .bg-shell .btn-outline, .bg-shell .btn-primary, .bg-shell .btn-primary--lg, .bg-shell .btn-secondary, .bg-shell .card-cta, .bg-shell .cm-cta-primary, .bg-shell .cm-cta-secondary, .bg-shell .love-cta, .bg-shell .mladshie-cta, .bg-shell .time-cta, .bg-shell .time-slider-btn, .bg-shell .mcp-btn, .bg-shell .sprav-all-btn, .bg-shell .sprav-elder-cta-cell, .bg-shell .sprav-pane-cta, .bg-shell .sprav-scroll-btn, .bg-shell .spravochnik-cta, .bg-shell .wk-cta, .bg-shell .wk-cta-inner{ font-family: 'Manrope', sans-serif !important; font-size: 1.6rem !important; } @media (max-width:580px){ .bg-shell .hero .pills button, .bg-shell .hero .pills a, .bg-shell .cta-primary, .bg-shell .cta-secondary, .bg-shell .cta-tertiary, .bg-shell .deck-modal .apply, .bg-shell .deck-modal .cancel, .bg-shell .qask-cta, .bg-shell .qask-examples button, .bg-shell .qask-examples a, .bg-shell .qsr-cta, .bg-shell .qsr-cta-btns a, .bg-shell .arc-more-btn, .bg-shell .arc-more-btn--lg, .bg-shell .arc-slide-info .arc-more, .bg-shell .arcana-card .ar-link, .bg-shell .ar-cta, .bg-shell .ar-cta-btn, .bg-shell .arcana-cta, .bg-shell .bk-btn, .bg-shell .bk-cta, .bg-shell .bp-btn, .bg-shell .btn-ghost, .bg-shell .btn-gold, .bg-shell .btn-meaning, .bg-shell .btn-outline, .bg-shell .btn-primary, .bg-shell .btn-primary--lg, .bg-shell .btn-secondary, .bg-shell .card-cta, .bg-shell .cm-cta-primary, .bg-shell .cm-cta-secondary, .bg-shell .love-cta, .bg-shell .mladshie-cta, .bg-shell .time-cta, .bg-shell .time-slider-btn, .bg-shell .mcp-btn, .bg-shell .sprav-all-btn, .bg-shell .sprav-elder-cta-cell, .bg-shell .sprav-pane-cta, .bg-shell .sprav-scroll-btn, .bg-shell .spravochnik-cta, .bg-shell .wk-cta, .bg-shell .wk-cta-inner{ font-size: 1.4rem !important; } } /* ============================================================================ rs-cards-solo / rs-cards-fan — единый веер карт в блоке «Итог» (раскладов). Используется на: home, zodiak, tema/osebe/dengi, vremya, vopros. Размер карты ОДИНАКОВЫЙ независимо от количества карт. Углы и смещения передаются из JS через CSS-переменные --tx, --ty, --rot. ============================================================================ */ .bg-shell .rs-cards-solo{ display:flex; align-items:center; justify-content:center; min-height:460px; } .bg-shell .rs-cards-solo .rs-actual-card{ width:240px; height:408px; border-radius:14px; background-size:cover; background-position:center; box-shadow:0 6px 18px rgba(0,0,0,0.18), 0 0 22px rgba(204,166,86,0.12); border:1px solid rgba(204,166,86,0.4); } .bg-shell .rs-cards-fan{ position:relative; min-height:340px; } .bg-shell .rs-cards-fan .rs-actual-card{ position:absolute; top:50%; left:50%; width:180px; height:306px; border-radius:12px; background-size:cover; background-position:center; box-shadow:0 4px 14px rgba(0,0,0,0.18), 0 0 14px rgba(204,166,86,0.08); border:1px solid rgba(204,166,86,0.35); transform:translate(-50%, -50%) translate(var(--tx,0), var(--ty,0)) rotate(var(--rot,0)); transition:transform .3s ease; } .bg-shell .rs-cards-fan .rs-actual-card:hover{ transform:translate(-50%, -50%) translate(var(--tx,0), calc(var(--ty,0) - 10px)) rotate(var(--rot,0)); z-index:999 !important; } @media (max-width:1100px){ .bg-shell .rs-cards-solo{ min-height:440px; } .bg-shell .rs-cards-solo .rs-actual-card{ width:230px; height:391px; } .bg-shell .rs-cards-fan{ min-height:300px; } .bg-shell .rs-cards-fan .rs-actual-card{ width:170px; height:289px; } } @media (max-width:580px){ .bg-shell .rs-cards-solo{ min-height:400px; } .bg-shell .rs-cards-solo .rs-actual-card{ width:200px; height:340px; } .bg-shell .rs-cards-fan{ min-height:260px; } .bg-shell .rs-cards-fan .rs-actual-card{ width:150px; height:255px; box-shadow:0 3px 10px rgba(0,0,0,0.15), 0 0 12px rgba(204,166,86,0.06); } /* Большие веера (7+) на мобиле дополнительно −15%, чтобы не были массивными. */ .bg-shell .rs-cards-fan[data-n="7"], .bg-shell .rs-cards-fan[data-n="8"], .bg-shell .rs-cards-fan[data-n="9"], .bg-shell .rs-cards-fan[data-n="10"], .bg-shell .rs-cards-fan[data-n="11"], .bg-shell .rs-cards-fan[data-n="12"]{ transform:scale(0.85); transform-origin:center; min-height:220px; } } /* vopros — обёртка qsr-summary-grid повторяет логику rs-content (текст + веер). */ .bg-shell .qsr-summary-grid{ display:grid; grid-template-columns:1fr 440px; gap:48px; align-items:center; text-align:left; } @media (max-width:1100px){ .bg-shell .qsr-summary-grid{ grid-template-columns:1fr; gap:28px; } .bg-shell .qsr-summary-grid .rs-cards{ order:-1; margin:0 auto; } } /* ============================================================================ DECK ANIMATIONS — мобильный фикс overshoot (≤580px). На десктопе анимации doBurst/doBurstSpread имеют 60%-кадр с overshoot: translate(calc(var(--x) * 1.15), calc(var(--y) - 80px)) scale(1.05) rotate(var(--rot) * 1.8) Это даёт визуальный «широкий веер → сжатие к финальной позиции» — на мобиле выглядит как баг. Здесь переопределяем оба keyframes БЕЗ 60%-кадра, чтобы карты приходили сразу на финальный --x. Применяется ко ВСЕМ таро-страницам, использующим taro-base.css. ============================================================================ */ @media (max-width:580px){ @-webkit-keyframes doBurst{ 0% { -webkit-transform:translate(0,0) rotate(180deg) perspective(1400px) rotateY(0deg) scale(0.3); opacity:0; } 20% { opacity:1; } 100% { -webkit-transform:translate(var(--x),var(--y)) rotate(var(--rot)) perspective(1400px) rotateY(0deg) scale(1); opacity:1; } } @keyframes doBurst{ 0% { transform:translate(0,0) rotate(180deg) perspective(1400px) rotateY(0deg) scale(0.3); opacity:0; } 20% { opacity:1; } 100% { transform:translate(var(--x),var(--y)) rotate(var(--rot)) perspective(1400px) rotateY(0deg) scale(1); opacity:1; } } @-webkit-keyframes doBurstSpread{ 0% { -webkit-transform:translate(0,0) rotate(0deg) perspective(1400px) rotateY(0deg) scale(1); } 100% { -webkit-transform:translate(var(--x),var(--y)) rotate(var(--rot)) perspective(1400px) rotateY(0deg) scale(1); } } @keyframes doBurstSpread{ 0% { transform:translate(0,0) rotate(0deg) perspective(1400px) rotateY(0deg) scale(1); } 100% { transform:translate(var(--x),var(--y)) rotate(var(--rot)) perspective(1400px) rotateY(0deg) scale(1); } } } /* ============================================================================ rs-extra — раскрывающийся блок «Полный разбор» для больших раскладов (6+ карт). По умолчанию виден только заголовок-summary; клик раскрывает остальные позиции. ============================================================================ */ .bg-shell .rs-extra{ margin:14px 0; padding:0; border-top:1px solid rgba(204,166,86,0.22); border-bottom:1px solid rgba(204,166,86,0.22); } .bg-shell .rs-extra > summary{ cursor:pointer; list-style:none; font-family:'Forum',serif; font-size:1.8rem; font-weight:400; color:var(--gold); padding:14px 0; text-align:left; user-select:none; display:flex; align-items:center; justify-content:space-between; letter-spacing:0.01em; } .bg-shell .rs-extra > summary::-webkit-details-marker{ display:none; } .bg-shell .rs-extra > summary::after{ content:'↓'; display:inline-block; font-size:1.6rem; margin-left:12px; transition:transform .25s ease; color:rgba(204,166,86,0.7); } .bg-shell .rs-extra[open] > summary::after{ transform:rotate(180deg); } .bg-shell .rs-extra > summary:hover{ color:#fbf8ec; } .bg-shell .rs-extra-body{ padding:10px 0 16px; } .bg-shell .rs-extra-body > p{ margin:0 0 14px; } .bg-shell .rs-extra-body > p:last-child{ margin-bottom:0; } @media (max-width:580px){ .bg-shell .rs-extra > summary{ font-size:1.6rem; padding:12px 0; } } /* ============ Cursor orb — большой glow за курсором (ПК only) ============ Глубокий фиолетово-синий, mix-blend-mode:screen на тёмном фоне. На touch/мобиле скрыт (perf — feedback_taro_perf_killswitch). */ /* Создаём stacking context на .bg-shell — чтобы orb z-index:-1 ограничился её контекстом (был под детьми bg-shell, но над её фоновым градиентом). */ .bg-shell{ isolation:isolate; } .cursor-orb{ display:none; position:fixed; width:1000px; height:1000px; border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(120,95,235,0.28) 0%, rgba(70,55,170,0.15) 40%, transparent 65%); filter:blur(90px); pointer-events:none; z-index:-1; mix-blend-mode:screen; transform:translate(-50%,-50%); top:40%; left:65%; will-change:transform; opacity:0.75; } @media (hover:hover) and (min-width:980px){ .cursor-orb{ display:block; } } /* ════════════════════════════════════════════════════════════════════════════ LIGHTBOX — единый модал для всех таро-страниц ──────────────────────────────────────────────────────────────────────────── Markup инжектится через wp_footer в inc/taro.php. Источники открытия: 1. taro-karta.js initLightbox() → [data-lightbox-card] (hero/колоды) — кнопка «Подробнее» скрыта (нет slug). 2. Делегация в inc/taro.php → .cell / .rs-actual-card / .card-meaning-card — REST /taro/v1/card?slug=, кнопка ведёт в справочник. ════════════════════════════════════════════════════════════════════════════ */ .lightbox{ position:fixed; inset:0; z-index:1000; display:none; } .lightbox.show{ display:block; } .lb-overlay{ position:absolute; inset:0; background:rgba(8,11,28,0.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; transition:opacity .4s ease; } .lightbox.show .lb-overlay{ opacity:1; } .lb-close, .lb-prev, .lb-next{ position:absolute; z-index:10; width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(204,166,86,0.45); color:var(--gold); font-size:24px; cursor:pointer; display:flex; align-items:center; justify-content:center; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background .2s, transform .2s; } .lb-close:hover, .lb-prev:hover, .lb-next:hover{ background:rgba(204,166,86,0.18); transform:scale(1.05); } .lb-close{ top:30px; right:30px; } .lb-prev{ left:30px; top:50%; transform:translateY(-50%); } .lb-next{ right:30px; top:50%; transform:translateY(-50%); } .lb-prev:hover, .lb-next:hover{ transform:translateY(-50%) scale(1.05); } /* Prev/next скрыты по умолчанию — навигация между картами не реализована; видны только когда у lb явный класс .lightbox--has-nav. */ .lb-prev, .lb-next{ display:none; } .lightbox--has-nav .lb-prev, .lightbox--has-nav .lb-next{ display:flex; } @media (max-width:580px){ .lb-close{ top:16px; right:16px; width:46px; height:46px; } } .lb-content{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; align-items:center; gap:48px; padding:80px 24px 100px; opacity:0; transform:scale(0.92); transform-origin:center top; transition:opacity .45s ease .15s, transform .45s cubic-bezier(.2,.7,.25,1) .15s; } .lightbox.show .lb-content{ opacity:1; transform:scale(1); } .lb-card-wrap{ position:relative; flex-shrink:0; display:inline-flex; justify-content:center; } .lb-card{ height:calc(100vh - 200px); max-height:780px; aspect-ratio:200/340; max-width:calc(100vw - 48px); flex-shrink:0; background-size:cover; background-position:center top; border-radius:16px; box-shadow:0 40px 100px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(204,166,86,0.35); } .lb-info{ max-width:720px; width:100%; color:#f4f1e6; padding:0 16px; text-align:center; } .lb-info .pos{ font-size:1.6rem; text-transform:uppercase; letter-spacing:0.22em; color:var(--gold); margin-bottom:14px; font-weight:600; } .lb-info .lb-name{ font-family:'Forum',serif; font-size:6.2rem; line-height:1; color:#fbf8ec; margin:0 0 28px; } .lb-info p{ font-size:18px; line-height:1.6; color:#dadbe0; margin:0 0 56px; word-break:break-word; } .lb-info .lb-more{ display:inline-flex; align-items:center; gap:10px; padding:14px 28px; border-radius:999px; background:#fbf8ec; color:#1a1518; font-size:1.55rem; font-weight:600; letter-spacing:0.01em; text-decoration:none; transition:transform .15s, box-shadow .15s, background .15s; box-shadow:0 10px 26px rgba(0,0,0,0.4); } .lb-info .lb-more .arr{ transition:transform .25s; } .lb-info .lb-more:hover{ transform:translateY(-1px); box-shadow:0 14px 32px rgba(0,0,0,0.5); background:#fff; } .lb-info .lb-more:hover .arr{ transform:translateX(4px); } /* ── Scroll hint справа от карты (ПК only) ─────────────────────────── */ .lb-scroll-hint{ display:none; position:absolute; top:50%; left:calc(100% + 32px); transform:translateY(-50%); z-index:3; pointer-events:none; flex-direction:column; align-items:center; gap:14px; opacity:1; transition:opacity .35s ease; color:#fbd890; } .lb-scroll-hint.is-hidden{ opacity:0; } .lb-scroll-hint .sh-label{ font-family:'Manrope',sans-serif; font-size:1.5rem; font-weight:600; letter-spacing:0.36em; text-transform:uppercase; color:#fbd890; writing-mode:vertical-rl; transform:rotate(180deg); text-shadow:0 0 14px rgba(0,0,0,0.7); } .lb-scroll-hint .sh-line{ position:relative; width:2px; height:100px; background:linear-gradient(180deg, rgba(251,216,144,0) 0%, rgba(251,216,144,0.75) 30%, rgba(251,216,144,0.75) 70%, rgba(251,216,144,0) 100%); overflow:hidden; border-radius:1px; } .lb-scroll-hint .sh-dot{ position:absolute; left:50%; top:0; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:#fbd890; box-shadow:0 0 16px rgba(251,216,144,1), 0 0 36px rgba(251,216,144,0.6); animation:lbScrollHintFlow 1.8s ease-in-out infinite; } .lb-scroll-hint .sh-arrow{ width:24px; height:24px; color:#fbd890; filter:drop-shadow(0 0 8px rgba(251,216,144,0.7)); animation:lbArrowBob 1.8s ease-in-out infinite; } @keyframes lbScrollHintFlow{ 0% { top:-10px; opacity:0; } 20% { opacity:1; } 80% { opacity:1; } 100% { top:100px; opacity:0; } } @keyframes lbArrowBob{ 0%,100% { transform:translateY(0); opacity:0.85; } 50% { transform:translateY(6px); opacity:1; } } @media (hover:hover) and (min-width:980px){ .lb-scroll-hint{ display:flex; } } /* ── Mobile: компактнее, без горизонтального скролла ─────────────────── */ @media (max-width:580px){ .lb-content{ gap:28px; padding:70px 16px 60px; } .lb-card{ height:calc(100vh - 200px); max-height:540px; } .lb-info{ padding:0 8px; } .lb-info .lb-name{ font-size:4.2rem; margin-bottom:18px; } .lb-info p{ font-size:18px; margin-bottom:40px; } .lb-info .lb-more{ padding:12px 22px; font-size:1.45rem; } } /* Сигнал что карта кликабельна */ .cell, .card-meaning-card, .rs-actual-card, .qfan-card--final{ cursor:pointer; } .cell:hover .cell-img{ transform:translateY(-3px); transition:transform .25s; } /* ════════════════════════════════════════════════════════════════════════════ CS SHEET PICKER — кастомный bottom-sheet для