/* ============================================================ Стили лендинга (index.php): херо, карусель цифр, секция Discover, секция «Why Do You Need the Matrix of Destiny?» со списком разделов. Подключается из сразу после output.css — порядок важен: правила ниже рассчитывают, что перебивают Tailwind, но уступают ui.css / page-title.css, которые подключает components/sidebar.php. ============================================================ */ /* Hero: заголовок Bricolage как на /destiny-matrix (.page-h1), приписка, статистика внизу секции */ .home-hero-col { display: flex; flex-direction: column; } /* .home-h1 — общая шкала для всего сайта, см. assets/css/page-title.css (подключается из components/sidebar.php). Здесь не переопределять. */ .home-sub { font-size: 17px; line-height: 1.6; color: #3D5853; margin: 0 0 24px 0; max-width: 560px; } /* Две мелкие карточки, всегда по 2 в ряд. ── Пропорциональность вместо адаптивности ────────────────────────────── Карточка объявлена size-контейнером, и ВСЁ её содержимое задано в cqw — процентах от собственной ширины карточки. Поэтому при любой ширине картинка одна и та же, просто в другом масштабе: брейкпоинты для внутренностей не нужны. Опорный размер — 220px, то есть 1cqw = 2.2px (13px → 5.9cqw и так далее). Собственный padding карточек убран намеренно: cq-единицы в свойствах САМОГО контейнера дают цикл, и Chrome молча откатывается на вьюпорт. Без padding content-box = border-box, и 1cqw честно равен 1% ширины карточки. На вид это ничего не меняет — контент центрирован по обеим осям. */ .home-stats { display: flex; align-items: stretch; gap: 12px; margin-top: auto; padding-top: 36px; flex-wrap: nowrap; } .stat-card { container-type: inline-size; /* радиус как у основной кнопки (.arcana-cta.calc-cta) */ position: relative; border-radius: 18px; corner-shape: superellipse(1.1); display: flex; flex-direction: column; align-items: center; justify-content: center; /* 220 / 152 вместо прежних 5/3: на полной ширине это те же 220px, но высота 132 → 152. Пропорцией, а не фиксированной высотой, чтобы на узких экранах карточки ужимались как раньше. */ flex: 1 1 0; min-width: 0; max-width: 220px; aspect-ratio: 220 / 152; } /* Карточка 1 — Accuracy: тёмный фон, градиент только на цифре */ .stat-card--accuracy { background: #15211F; text-align: center; /* свечение размывается за границы своего круга — рамка карточки его срезает */ overflow: hidden; } /* ── Светящийся шар (порт ai-loader с 21st.dev) ─────────────────────────── Свечение — не градиент, а три вложенные внутренние тени, которые крутятся вокруг центра. Цвета: на кадрах 0/100 блик #FF5A8B, средний слой #FF3881; на середине оборота блик #FF6D77, средний #FF755E; глубина в обоих #77203B. Смещения теней пересчитаны в долях от диаметра: в исходнике они прибиты к 180px. Первой в списке идёт ВНЕШНЯЯ тень (0 -8px 10px, 42625E 80%) — её приходится дублировать в каждом кадре: box-shadow одно свойство, и статичное объявление анимация бы перекрыла. data-no-sq: шар крутится, а squircle.js считает габарит по повёрнутой коробке и наложил бы на круг квадратный клип. */ .stat-orb-glow { --orb: 53.64cqw; /* 118px на карточке 220 */ position: absolute; left: 50%; top: 50%; translate: -50% -50%; /* Шар масштабируется вместе с карточкой: 52.73cqw — это те же 116px на полной ширине, и ровно та же доля на любой другой. */ height: 52.73cqw; aspect-ratio: 1; border-radius: 50%; z-index: 0; /* Размытие вешаем на сам шар, а НЕ слоем с backdrop-filter поверх: тот размывает то, что под ним, а под ним анимированный слой видеокарты — разные браузеры собирают такие слои по-разному, и эффекта не видно. Здесь размывается собственная отрисовка элемента, результат одинаков везде. Поворот на blur не влияет: ядро размытия симметричное. */ filter: blur(2.73cqw); animation: stat-orb-rotate 2s linear infinite; } /* Три отдельных кадра, углы растут непрерывно: 90 → 270 → 450. Если слить первый и последний в «0%, 100%», второй полуоборот пойдёт назад и шар будет качаться влево-вправо вместо вращения. Блик одиночный, меняет оттенок вместе со средним слоем. */ @keyframes stat-orb-rotate { 0% { transform: rotate(90deg); box-shadow: 0 -3.64cqw 4.55cqw rgba(66, 98, 94, 0.8), 0 calc(var(--orb) * 0.055) calc(var(--orb) * 0.11) inset #FF5A8B, 0 calc(var(--orb) * 0.11) calc(var(--orb) * 0.17) inset #FF3881, 0 calc(var(--orb) * 0.33) calc(var(--orb) * 0.33) inset #77203B; } 50% { transform: rotate(270deg); box-shadow: 0 -3.64cqw 4.55cqw rgba(66, 98, 94, 0.8), 0 calc(var(--orb) * 0.055) calc(var(--orb) * 0.11) inset #FF755E, 0 calc(var(--orb) * 0.11) calc(var(--orb) * 0.055) inset #FF6D77, 0 calc(var(--orb) * 0.22) calc(var(--orb) * 0.33) inset #77203B; } 100% { transform: rotate(450deg); box-shadow: 0 -3.64cqw 4.55cqw rgba(66, 98, 94, 0.8), 0 calc(var(--orb) * 0.055) calc(var(--orb) * 0.11) inset #FF5A8B, 0 calc(var(--orb) * 0.11) calc(var(--orb) * 0.17) inset #FF3881, 0 calc(var(--orb) * 0.33) calc(var(--orb) * 0.33) inset #77203B; } } /* top — лёгкий сдвиг текста вниз относительно центра шара */ .stat-orb-content { position: relative; z-index: 2; width: 100%; top: 2.27cqw; } .stat-accuracy-num { font-family: 'Zalando Sans SemiExpanded', 'Inter Tight', sans-serif; font-weight: 700; font-size: 12.27cqw; line-height: 1; /* inline-block, чтобы коробка градиента совпала с самим текстом: у блока на всю ширину карточки текст выхватывал лишь узкий срез из середины, и переход в оранжевый доставался одному знаку процента */ display: inline-block; background: linear-gradient(115deg, #FF6291, #FF755E); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* font-family дублируем на сами span-ы: глобальное `* { font-family: 'Inter Tight' }` попадает прямо в элемент и перебивает унаследованное от .stat-accuracy-num. Знак процента мельче числа, по общей нижней линии — выравнивание по базовой линии у строчных элементов и так по умолчанию. */ .stat-accuracy-val, .stat-accuracy-pct { font-family: 'Zalando Sans SemiExpanded', 'Inter Tight', sans-serif; } .stat-accuracy-pct { font-size: 0.58em; } @media (prefers-reduced-motion: reduce) { .stat-orb-glow { animation: none; box-shadow: 0 -3.64cqw 4.55cqw rgba(66, 98, 94, 0.8), 0 calc(var(--orb) * 0.055) calc(var(--orb) * 0.11) inset #FF5A8B, 0 calc(var(--orb) * 0.11) calc(var(--orb) * 0.17) inset #FF3881, 0 calc(var(--orb) * 0.33) calc(var(--orb) * 0.33) inset #77203B; } } /* Отступ уменьшен ровно на величину сдвига блока вниз, поэтому «Accuracy» осталась на прежнем месте, а вниз уехала одна цифра. Промежуток между ними на эту же величину сократился — иначе цифру не опустить, они в одном потоке. */ .stat-accuracy-label { font-size: 5cqw; color: #92AAA2; margin-top: 0.45cqw; } /* Карточка 2 — Calculations: светлый фон + стеклянная плашка по центру */ .stat-card--calc { background: #9CB5AC; justify-content: center; text-align: center; } /* Вертикальный ритм — марджинами на детях, а НЕ gap'ом на карточке: gap живёт на самом контейнере, а cq-единица там даёт цикл и молча считается от вьюпорта. */ .stat-calc-bottom, .stat-calc-people { margin-top: 4.09cqw; } .stat-calc-bottom { font-size: 5cqw; color: #3D5853; line-height: 1.2; } /* Ряд аватарок + пилюля со счётчиком под подписью */ .stat-calc-people { display: flex; align-items: center; justify-content: center; gap: 4.09cqw; } .stat-calc-avatars { display: inline-flex; } .stat-calc-avatars i { width: 16.36cqw; height: 16.36cqw; border-radius: 50%; background: #ADC5BC; border: 0.68cqw solid #9CB5AC; /* обводка под фон карточки */ overflow: hidden; flex: none; } /* фото 100×100 без обработки, только вписаны в круг */ .stat-calc-avatars img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .stat-calc-avatars i + i { margin-left: -5.91cqw; } /* Пилюля низкая: кегль 14, вертикальный отступ минимальный */ .stat-calc-pill { background: #FF5A8B; color: #061210; border-radius: 999px; padding: 2.27cqw 4.55cqw; font-size: 5.45cqw; font-weight: 700; line-height: 1.15; } .stat-calc-plaque { display: inline-flex; align-items: center; gap: 4.09cqw; align-self: center; padding: 3.64cqw 6.36cqw; border-radius: 5.45cqw; background: rgba(213,228,222,0.30); -webkit-backdrop-filter: blur(2.73cqw); backdrop-filter: blur(2.73cqw); border: 0.32cqw solid rgba(213,228,222,0.30); } /* Кегль совпадает с соседней карточкой: значение = .stat-accuracy-num, суффикс = .stat-accuracy-pct (0.58em). Шрифт задаём на самих span — глобальное правило `* { font-family }` перебивает наследование от родителя. */ .stat-calc-num { font-family: 'Zalando Sans SemiExpanded', 'Inter Tight', sans-serif; font-weight: 700; font-size: 11.36cqw; line-height: 1; color: #062A2C; } .stat-calc-val, .stat-calc-suffix { font-family: 'Zalando Sans SemiExpanded', 'Inter Tight', sans-serif; } .stat-calc-suffix { font-size: 0.58em; } /* Барабан цифр (assets/js/number-roll.js). Разряд — окошко высотой в строку, внутри лента 0…9; ширину держит невидимая копия итоговой цифры, поэтому пропорциональный шрифт не «дышит» во время прокрутки. */ /* Шрифт тянем от родителя явно: глобальное `* { font-family }` матчит эти span напрямую и перебивает наследование — иначе цифры барабана уезжают в Inter Tight. */ .roll, .roll-d, .roll-sizer, .roll-strip, .roll-strip > span, .roll-sep { font-family: inherit; } .roll { display: inline-flex; align-items: flex-end; } .roll-d { position: relative; display: inline-block; overflow: hidden; height: 1em; line-height: 1; } .roll-sizer { visibility: hidden; } .roll-strip { position: absolute; left: 0; top: 0; width: 100%; text-align: center; will-change: transform; } .roll-strip > span { display: block; height: 1em; line-height: 1; } .stat-calc-divider { width: 0.45cqw; height: 8.18cqw; background: rgba(6,42,44,0.22); } .stat-calc-word { font-size: 5.9cqw; font-weight: 500; color: #062A2C; } /* Брейкпоинтов для внутренностей карточек больше нет — всё в cqw и масштабируется само. Осталась только внешняя раскладка: зазор между двумя карточками. Размеры .home-h1 по брейкпоинтам — в assets/css/page-title.css (общие на сайт) */ @media (max-width: 640px) { .home-stats { gap: 10px; } } /* CTA — точная копия кнопки калькулятора (.arcana-cta.calc-cta) */ .arcana-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(to right, #FF6291, #FF755E); color: #000; min-height: 60px; padding: 8px 36px; border-radius: 17px; font-weight: 700; font-size: 16px; line-height: 1.2; border: none; cursor: pointer; text-decoration: none; margin-top: 8px; position: relative; overflow: hidden; transition: color 0.4s ease 0.15s; } .arcana-cta::before { content: ''; position: absolute; left: 80%; top: 50%; width: 67px; height: 65px; background: #051210; clip-path: path('M43.7028 0C36.1296 29.2921 36.9014 30.7618 66.4978 32.1811C35.996 33.6007 34.317 35.153 23.7647 64.4542C31.4198 34.8456 30.5484 33.6639 0 32.2271C31.4373 30.7903 33.0398 29.6086 43.7028 0Z'); transform: translate(-50%, -50%) scale(0); transform-origin: center; transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1); pointer-events: none; } .arcana-cta > * { position: relative; z-index: 1; } .arcana-cta:hover { color: #FF6B7A; } .arcana-cta:hover::before { transform: translate(-50%, -50%) scale(50); } .arcana-cta:hover > span { background: linear-gradient(to right, #FF6291, #FF755E); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .arcana-cta.calc-cta { /* Отступы от надписи одинаковые с обеих сторон — 86px. Бейдж «It's Free» вынесен из потока и лежит поверх правого отступа, на ширину не влияет. */ min-height: 0; padding: 24px 86px; border-radius: 18px; font-weight: 800; font-size: 17px; line-height: 1.3; } /* Портретная мобилка: единственное отличие — кнопка на всю ширину колонки. Всё остальное (отступы, кегль, бейдж) наследуется от общего правила. Запрос обязан идти ПОСЛЕ .arcana-cta.calc-cta: специфичность та же, побеждает объявленное ниже. */ @media (max-width: 640px) and (orientation: portrait) { .arcana-cta.calc-cta { width: 100%; } } /* Free-бейдж внутри кнопки — абсолютный, не меняет высоту */ .free-badge { display: inline-flex; align-items: center; color: #000; font-size: 12px; font-weight: 700; line-height: 1; padding: 6px 12px; border-radius: 999px; letter-spacing: 0.02em; flex-shrink: 0; background: linear-gradient(to right, #B7E4C7, #8FCBA5); } .cta-label { position: relative; } .arcana-cta .cta-free-badge { position: absolute; left: calc(100% + 6px); bottom: 55%; background: #051210; white-space: nowrap; pointer-events: none; opacity: 1; transition: opacity 0.4s ease 0.5s; } .arcana-cta:hover .cta-free-badge { opacity: 0; transition: opacity 0.4s ease 0s; } .arcana-cta .cta-free-badge-text { background: linear-gradient(to right, #FF6291, #FF755E); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Zalando Sans SemiExpanded — цифры секции «The Numbers Behind The Matrix» */ @font-face { font-family: 'Zalando Sans SemiExpanded'; font-style: italic; font-weight: 200 900; font-display: swap; src: url('/assets/fonts/zalando-semiexp-italic.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Zalando Sans SemiExpanded'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('/assets/fonts/zalando-semiexp.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } .hm-numbers { display: flex; align-items: stretch; gap: 0; background: #15211F; border-radius: 23px; corner-shape: superellipse(1.1); padding: 24px 0 24px 32px; margin-bottom: 32px; } .hm-numbers-title { font-family: 'Inter Tight', 'Inter', sans-serif; font-weight: 600; font-size: 17px; line-height: 1.3; color: #D5E4DE; text-align: right; align-self: center; flex-shrink: 0; max-width: 240px; margin: 0; padding-right: 30px; } .hm-numbers-divider { width: 1px; background: rgba(173, 197, 188, 0.3); flex-shrink: 0; align-self: stretch; } /* Карусель: лента едет влево бесконечно, уходя за вертикальную линию; края растворяются в блюре. ВАЖНО: сам .hm-marquee БЕЗ overflow:hidden — иначе backdrop-filter слоёв режется прямоугольником. Бегущую ленту клипает отдельный внутренний .hm-marquee-clip; слои блюра лежат ПОВЕРХ, вне overflow. */ .hm-marquee { position: relative; flex: 1; min-width: 0; min-height: 72px; } .hm-marquee-clip { position: absolute; inset: 0; overflow: hidden; border-radius: 0 23px 23px 0; display: flex; align-items: center; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; } .hm-marquee-clip.is-dragging { cursor: grabbing; } .hm-marquee-track { display: flex; align-items: center; gap: 40px; width: max-content; will-change: transform; -webkit-user-select: none; user-select: none; } /* ProgressiveBlur (motion-primitives): 8 слоёв backdrop-filter blur(0..7px), у каждого своя маска-трапеция 0→1→1→0 со сдвигом на сегмент 1/9 → размытие плавно нарастает к краю без грани. */ /* зона блюра на всю высоту секции (выходит за паддинги 24px в плоский фон) → кромки не режут контент */ .hm-blur { position: absolute; top: -24px; height: calc(100% + 48px); width: 150px; z-index: 3; pointer-events: none; } .hm-blur-left { left: 0; } .hm-blur-right { right: 0; } .hm-blur-layer { position: absolute; inset: 0; } /* мягкое растворение контента в фон у обеих кромок (аналог bg-gradient-to-r из примера) */ .hm-marquee::before, .hm-marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40px; z-index: 4; pointer-events: none; } .hm-marquee::before { left: 0; background: linear-gradient(to right, #15211F, rgba(21,33,31,0)); } .hm-marquee::after { right: 0; background: linear-gradient(to left, #15211F, rgba(21,33,31,0)); } /* Слот по ширине контента (gap считается от самой длинной строки текста; переносы заданы вручную) */ .hm-num-item { display: flex; align-items: center; gap: 10px; text-align: left; flex: 0 0 auto; } .hm-num { font-family: 'Zalando Sans SemiExpanded', 'Inter Tight', sans-serif; font-style: italic; font-weight: 700; font-size: 30px; line-height: 1; color: #ADC5BC; flex-shrink: 0; } .hm-num-text { min-width: 0; } .hm-num-head { font-size: 15px; font-weight: 700; color: #ADC5BC; line-height: 1.2; white-space: nowrap; } .hm-num-sub { font-size: 13px; color: #93A9A2; line-height: 1.35; margin-top: 5px; white-space: nowrap; } /* планшет + горизонтальная мобилка — оставляем 1 ряд, ужимаем заголовок и цифры */ @media (max-width: 1023px) { .hm-numbers { padding: 22px 0 22px 32px; } .hm-numbers-title { font-size: 15px; max-width: 215px; padding-right: 20px; } .hm-num { font-size: 26px; } .hm-num-head { font-size: 14px; } .hm-num-sub { font-size: 12px; } .hm-blur { width: 110px; top: -22px; height: calc(100% + 44px); } } @media (max-width: 767px) { .hm-numbers-title { font-size: 14px; max-width: 200px; padding-right: 16px; } .hm-num { font-size: 24px; } } /* портретная мобилка — колонка, левый паддинг контейнера убран (лента на всю ширину) */ @media (max-width: 640px) { .hm-numbers { flex-direction: column; align-items: stretch; gap: 16px; padding: 22px 0; } .hm-numbers-title { align-self: auto; text-align: left; max-width: none; font-size: 16px; padding: 0 22px; } .hm-numbers-divider { width: auto; height: 1px; align-self: auto; margin: 0 22px; } .hm-num { font-size: 26px; } .hm-blur { width: 70px; } .hm-marquee::before { width: 20px; } } /* ── Четыре типа матриц ──────────────────────────────────────────────────── Ряд из 4 карточек сразу под лентой цифр. Текст прижат к низу карточки: верх оставлен свободным под будущую иллюстрацию. */ .mtx { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 32px; } /* Карточка — ссылка на свой калькулятор. Подъём и тень на наведении такие же, как у плитки арканов (.arc-card в arcana.php), чтобы жест был один и тот же. */ .mtx-card { display: flex; min-width: 0; min-height: 300px; background: #ADC5BC; border-radius: 25px; corner-shape: superellipse(1.1); padding: 28px 24px; text-decoration: none; color: inherit; transition: transform .5s ease, box-shadow .5s ease; } .mtx-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(6, 42, 44, .10); } /* margin-top: auto прижимает текст к низу, оставляя верх карточки пустым */ .mtx-card-body { margin-top: auto; width: 100%; text-align: center; } .mtx-card-title { font-size: 17px; font-weight: 700; line-height: 1.3; color: #052A2C; margin: 0; } /* две строки под приписку резервируем всегда: иначе у карточки с короткой припиской заголовок уезжает ниже остальных и ряд перестаёт быть ровным */ .mtx-card-sub { font-size: 14px; line-height: 1.45; color: #3D5853; margin: 10px 0 0 0; min-height: 2.9em; } .mtx-card-meta { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; line-height: 1.3; color: #3D5853; margin: 8px 0 0 0; } .mtx-card-meta b { font-weight: 700; color: #052A2C; } .mtx-card-sep { width: 1px; height: 14px; background: rgba(61, 88, 83, 0.4); flex: none; } @media (max-width: 1279px) { .mtx { gap: 20px; } .mtx-card { min-height: 260px; padding: 24px 20px; } } @media (max-width: 1023px) { .mtx { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .mtx { grid-template-columns: 1fr; gap: 16px; } .mtx-card { min-height: 200px; } } /* подпись в правом нижнем углу слайда */ .hero-caption { position: absolute; right: 32px; bottom: 32px; z-index: 2; color: rgba(173, 197, 188, 0.7); font-size: 14px; font-weight: 500; letter-spacing: 0.01em; line-height: 1; text-align: right; pointer-events: none; white-space: nowrap; } .hero-caption-dot { margin: 0 9px; } @media (max-width: 640px) { .hero-caption { font-size: 12px; } .hero-caption-dot { margin: 0 6px; } } /* Секция What You'll Discover: контейнер C1D3CD, лево 30% (заголовок) / право 70% (грид 2×5) */ .discover-scroll { position: relative; } .discover { --dsc-pad: 40px; /* боковой padding секции = вылет блера до кромки фрейма */ --dsc-blur: 100px; /* высота зоны прогрессивного блера по кромке */ --dsc-cut-right: 33px; /* насколько блер НЕ доходит до правой кромки фрейма */ --dsc-grid-right: 15px; /* доп. отступ карточек справа (итого с --dsc-pad = 55px до кромки) */ --dsc-card-pad: 36px; /* отступ внутри карточки: от кромки до контента */ display: flex; gap: 36px; align-items: stretch; background: #C1D3CD; border-radius: 25px; corner-shape: superellipse(1.1); padding: 0 var(--dsc-pad); margin-bottom: 32px; overflow: visible; position: sticky; top: 20px; height: calc(100vh - 40px); } .discover-left { flex: 0 0 25%; max-width: 25%; padding-top: 100px; } .discover-title { font-family: 'Bricolage Grotesque', 'Inter Tight', 'Inter', sans-serif; font-weight: 500; font-size: clamp(36px, 4.2vw, 60px); line-height: 0.9; letter-spacing: -0.05em; color: #052A2C; margin: 0; text-align: right; } .discover-viewport { position: relative; flex: 1 1 0; min-width: 0; overflow: visible; } /* Ровно та же схема, что у карусели цифр (.hm-marquee): вьюпорт БЕЗ overflow, контент клипает отдельный внутренний .discover-clip, а слои блера лежат ПОВЕРХ него, вне overflow — иначе backdrop-filter режется прямоугольником. ❗ Клип-обёртки на ВСЮ секцию быть не должно: overflow:hidden поверх всего содержимого убивает плавность прогрессивного блера. */ .discover-clip { position: absolute; inset: 0; overflow: hidden; border-radius: 23px 23px 25px 25px; corner-shape: superellipse(1.1); } /* ❗ НИКАКОГО скрима/заливки поверх блера. Карточки (#ADC5BC) темнее фрейма (#C1D3CD), поэтому градиент цвета фрейма поверх них читается как серый налёт. Блер обязан быть полностью прозрачным — только backdrop-filter, ничем не подкрашенный. */ /* Отступы = ровно высоте блера, без запаса: карточка начинается там, где кончается зона размытия (десктоп 100, планшет 70, мобилка 60). */ .discover-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; will-change: transform; padding-top: var(--dsc-blur); padding-bottom: var(--dsc-blur); padding-right: var(--dsc-grid-right); } /* ProgressiveBlur — один в один как у карусели (.hm-blur): 8 слоёв backdrop-filter blur(0..7px), у каждого маска-трапеция 0→1→1→0 со сдвигом 1/9. Зона блера ВЫХОДИТ за боковые паддинги в плоский фон, чтобы её боковые кромки не резали контент. */ .discover-blur { position: absolute; z-index: 3; pointer-events: none; left: calc(-1 * var(--dsc-pad)); right: calc(var(--dsc-cut-right) - var(--dsc-pad)); height: var(--dsc-blur); } .discover-blur-top { top: 0; } .discover-blur-bottom { bottom: 0; } .discover-blur-layer { position: absolute; inset: 0; } .discover-card { position: relative; aspect-ratio: 5 / 3; background: #ADC5BC; border-radius: 23px; corner-shape: superellipse(1.1); overflow: hidden; } /* Карточки без фото — темнее базового. Ставится классом только там, где фона нет: у карточек с фото он всё равно перекрыт, а у волны из-под неё виден верх, и его трогать не надо. */ .discover-card--plain { background: #9CB5AC; } /* Видеофон карточки — ведёт себя как background-size: cover */ .discover-card-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; } /* --dsc-card-pad: отступ от кромки карточки до контента */ .discover-text { position: absolute; z-index: 1; max-width: 70%; display: flex; flex-direction: column; gap: 8px; } .discover-card-title { font-size: clamp(15px, 1.5vw, 19px); font-weight: 700; color: #263937; line-height: 1.2; } .discover-card-desc { font-size: clamp(11px, 1.15vw, 13.5px); color: #3D5853; line-height: 1.45; } /* Светлая версия текста — для карточек с тёмным фото под текстом. Ставится классом на карточку, размеры и позиция не меняются. */ .discover-card--light .discover-card-title { color: #D5E4DE; } /* описание светлее заголовка — так просила владелица: на фото приписка мельче и первой теряется, поэтому её тянем к самому светлому тону */ .discover-card--light .discover-card-desc { color: #E3ECE9; } /* Ярче светлой — для фото, где фон под надписью сам светлый и обычный светлый текст в нём теряется. Заголовок и описание одним цветом. */ .discover-card--bright .discover-card-title, .discover-card--bright .discover-card-desc { color: #E3ECE9; } /* Глубокая тёмная — для светлых, но насыщенных фонов (розовая волна), где обычного тёмного не хватает по контрасту. */ .discover-card--deep .discover-card-title { color: #061210; } .discover-card--deep .discover-card-desc { color: #263937; } /* позиции текста (цикл из 4) */ .discover-text.pos-tr { top: var(--dsc-card-pad); right: var(--dsc-card-pad); text-align: right; align-items: flex-end; } .discover-text.pos-bl { bottom: var(--dsc-card-pad); left: var(--dsc-card-pad); text-align: left; align-items: flex-start; } .discover-text.pos-tl { top: var(--dsc-card-pad); left: var(--dsc-card-pad); text-align: left; align-items: flex-start; } .discover-text.pos-br { bottom: var(--dsc-card-pad); right: var(--dsc-card-pad); text-align: right; align-items: flex-end; } /* мобилка/планшет: pin работает так же, только колонкой; dvh — чтобы адресная строка не дёргала высоту */ @media (max-width: 1023px) { .discover { --dsc-pad: 24px; --dsc-blur: 70px; --dsc-cut-right: 0px; --dsc-grid-right: 0px; flex-direction: column; gap: 14px; padding: 24px var(--dsc-pad) 0; /* низ 0 — карточки уходят прямо в кромку фрейма, как на десктопе */ height: calc(100vh - 40px); height: calc(100dvh - 40px); } .discover-left { flex: none; max-width: none; padding-top: 6px; } .discover-viewport { flex: 1 1 auto; min-height: 0; } } /* ≤768px меню фиксировано сверху (низ на 90px) → закреп на 20px ниже него */ @media (max-width: 768px) { .discover { top: 110px; height: calc(100vh - 130px); height: calc(100dvh - 130px); } } @media (max-width: 560px) { .discover { --dsc-pad: 20px; --dsc-blur: 60px; padding: 20px var(--dsc-pad) 0; gap: 10px; } .discover-grid { grid-template-columns: 1fr; } .discover { --dsc-card-pad: 28px; } } /* ── Секция «Why Do You Need the Matrix of Destiny?» ───────────────────── */ .why { --al-gap: 48px; /* отступ от списка разделов до текстовой колонки */ display: grid; grid-template-columns: 30% 70%; align-items: stretch; background: #ADC5BC; border-radius: 25px; corner-shape: superellipse(1.1); /* низ 40 = боковым: внизу лежит вложенный блок, отступ вокруг него ровный */ padding: 100px 40px 40px; margin-bottom: 32px; } /* колонка = заголовок сверху + анимация на всю оставшуюся высоту (второй ряд грида) */ .why-left { min-width: 0; display: grid; grid-template-rows: auto 1fr; } .why-left-title { font-size: 17px; font-weight: 700; line-height: 1.2; color: #052A2C; margin: 0 0 20px 0; } .why-right { min-width: 0; } /* ── Анимированный список разделов матрицы (порт animated-list на чистый JS) ── Фазы: стопка → сборка в колонку → прокрутка вниз → пружинный сброс → цикл. Крутится только когда секция в кадре (IntersectionObserver) и вкладка активна. */ /* занимает второй ряд .why-left целиком; margin-right — отступ до текстовой колонки */ /* ❗ Единственный источник правды по числам анимации: JS читает эти переменные через getComputedStyle. Раньше высота карточки жила в трёх местах (.al-card, отрицательный margin у .al-item и шаг колонны в JS) — правка в одном ломала остальные. */ .al { --al-card-h: 60px; /* высота карточки */ --al-col-gap: 76px; /* шаг между карточками в разложенной колонне */ --al-stack-gap: 18px;/* сдвиг карточек в стопке */ --al-col-w: 0.8; /* ширина карточки в колонне, доля от контейнера */ --al-stack-step: 0.05; /* насколько уже каждая следующая карточка вглубь стопки */ --al-visible: 4; /* сколько верхних карточек стопки видно */ --al-blur-h: 70px; /* высота полосы растворения по кромке */ position: relative; overflow: hidden; margin-right: var(--al-gap); min-height: 0; } /* Прогрессивный блер по кромкам — та же схема, что у карусели цифр (.hm-blur): 8 слоёв backdrop-filter blur(0..7px) с масками-трапециями. Маска висит на самих слоях, а не на предке карточек, поэтому backdrop-filter карточек не ломается. */ .al-blur { position: absolute; left: 0; right: 0; height: var(--al-blur-h); z-index: 5; pointer-events: none; } .al-blur-top { top: 0; } .al-blur-bottom { bottom: 0; } .al-blur-layer { position: absolute; inset: 0; } /* без will-change: промотированный слой растрируется один раз и дальше тянется GPU-интерполяцией — на дробных сдвигах даёт мыло и цветную бахрому по краям букв */ .al-track { position: absolute; inset: 0; } /* left/width задаёт JS: в стопке карточки шире, в колонне — уже (см. --al-col-w) */ .al-item { position: absolute; left: 0; top: 50%; margin-top: calc(var(--al-card-h) / -2); } /* ❗ без will-change на карточке: слой растрируется один раз и дальше тянется GPU-масштабом → на scale края рамки и текст мылят. Пусть Chrome перерисовывает каждый кадр. */ .al-card { display: flex; align-items: center; height: var(--al-card-h); padding: 0 22px; background: rgba(255,255,255,0.3); border: 1px solid rgba(255,255,255,0.5); border-radius: 15px; corner-shape: superellipse(1.1); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } /* длинные названия разделов обрезаем многоточием — строка всегда одна */ .al-card-title { font-size: 13px; font-weight: 600; color: #052A2C; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; /* Серое сглаживание: при субпиксельном Chrome не кеширует слой с текстом и перерисовывает буквы каждый кадр — движение начинает дёргаться. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* стрелка как в шапке раздела на /destiny-matrix (.arcana-toggle) */ .al-card-arrow { margin-left: auto; flex-shrink: 0; color: #051210; } /* prefers-reduced-motion обрабатывает JS (движок на rAF, не на transition) */ /* заголовок один в один как .discover-title, только по левому краю */ .why-title { font-family: 'Bricolage Grotesque', 'Inter Tight', 'Inter', sans-serif; font-weight: 500; font-size: clamp(36px, 4.2vw, 60px); line-height: 0.9; letter-spacing: -0.05em; color: #052A2C; margin: 0 0 24px 0; max-width: 70%; /* ограничитель по ширине колонки */ } .why-lead { font-size: 20px; font-weight: 700; line-height: 1.2; color: #052A2C; margin: 0 0 24px 0; } /* нижний блок «You need the Matrix if…» — на всю ширину секции */ .why-need { grid-column: 1 / -1; margin-top: 56px; padding: 40px; background: #C1D3CD; border-radius: 25px; corner-shape: superellipse(1.1); } .why-need-title { font-size: 20px; font-weight: 700; line-height: 1.2; color: #052A2C; margin: 0 0 28px 0; } .why-need-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 40px; } /* CTA в левом нижнем углу блока — базовая кнопка сайта со звездой на ховере */ .why-need-cta { margin-top: 36px; } .why-need-item { font-size: 17px; line-height: 1.6; color: #3D5853; margin: 0; } /* подзаголовок пункта — отдельной строкой, тёмным */ /* подзаголовок слота всегда на два пункта крупнее абзаца: 19/17 на узких, 17/15 на десктопе */ .why-need-item b { display: block; font-size: 19px; font-weight: 700; color: #052A2C; margin-bottom: 6px; } .why-text p { font-size: 17px; line-height: 1.6; color: #3D5853; margin: 0 0 18px 0; } .why-text p:last-child { margin-bottom: 0; } /* На десктопе абзацы мельче на два пункта; на узких экранах размер не трогаем. ❗ Блок должен идти ПОСЛЕ базовых правил .why-text p / .why-need-item — специфичность у них одинаковая, решает порядок. */ @media (min-width: 1024px) { .why-text p, .why-need-item { font-size: 15px; } .why-need-item b { font-size: 17px; } } @media (max-width: 1023px) { .why { grid-template-columns: 1fr; gap: 32px; padding: 40px 24px; } .why-need { margin-top: 8px; padding: 28px 24px; } .why-need-grid { grid-template-columns: 1fr 1fr; gap: 26px 28px; } /* Порядок в одной колонке: текст → список разделов → блок «You need the Matrix if…». ❗ order обязателен и у .why-need: без него у него order:0 и он уезжает наверх, разрывая цепочку повествования. */ .why-right { order: 1; } .why-left { order: 2; height: 480px; } /* выше, чем на десктопе: иначе в фокусе одна строка */ .why-need { order: 3; } .why { --al-gap: 0px; } /* одна колонка — отступ до текста не нужен, иначе блок уезжает влево */ .why-title { max-width: 80%; } } @media (max-width: 560px) { .why { padding: 32px 20px; } .why-lead, .why-need-title { font-size: 18px; } .why-left { height: 420px; } .why-need-grid { grid-template-columns: 1fr; } } /* ── Секция «How Your Destiny Matrix Works» ──────────────────────────────── Три равные колонки: фото с заголовком поверх, шаги, преимущества. Цвета взяты из чёрных блоков /personal-brand-matrix (.understanding-brand): заголовки #D5E4DE, приписки #93A9A2. */ .hw { --hw-pad-y: 60px; /* вертикальный отступ колонок = и вылет разделителя */ display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; background: #15211F; border-radius: 25px; corner-shape: superellipse(1.1); margin-bottom: 32px; overflow: hidden; } /* фото заполняет свою колонку целиком, заголовок лежит поверх в правом нижнем углу */ .hw-photo { position: relative; min-width: 0; } .hw-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .hw-title { position: absolute; right: 40px; bottom: 40px; left: 40px; margin: 0; font-family: 'Bricolage Grotesque', 'Inter Tight', 'Inter', sans-serif; font-weight: 500; font-size: clamp(36px, 4.2vw, 60px); line-height: 0.9; letter-spacing: -0.05em; color: #D5E4DE; text-align: right; } .hw-col { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 40px; padding: var(--hw-pad-y) 40px; } /* Разделитель между 2-й и 3-й колонками. Не border на колонке (тот шёл бы во всю высоту секции), а линия по высоте контентной области — от паддинга до паддинга. */ .hw-col-divided { position: relative; } .hw-col-divided::before { content: ''; position: absolute; left: 0; top: var(--hw-pad-y); bottom: var(--hw-pad-y); width: 0.7px; background: rgba(173,197,188,0.3); } /* шкала как у списка «You need the Matrix if…»: 17/15 на десктопе, 19/17 на узких */ .hw-item-title { font-size: 19px; font-weight: 700; line-height: 1.2; color: #D5E4DE; margin: 0 0 10px 0; } .hw-item-text { font-size: 17px; line-height: 1.6; color: #93A9A2; margin: 0; } @media (min-width: 1024px) { .hw-item-title { font-size: 17px; } .hw-item-text { font-size: 15px; } } @media (max-width: 1023px) { .hw { grid-template-columns: 1fr 1fr; --hw-pad-y: 40px; } .hw-photo { grid-column: 1 / -1; aspect-ratio: 16 / 9; } .hw-col { padding: var(--hw-pad-y) 24px; gap: 32px; } } @media (max-width: 700px) { .hw { grid-template-columns: 1fr; --hw-pad-y: 32px; } .hw-photo { aspect-ratio: 4 / 3; } .hw-title { right: 24px; bottom: 24px; left: 24px; } /* в одну колонку разделитель ложится горизонтально над третьим блоком; сверху нужен воздух, иначе текст липнет к линии */ .hw-col-divided { padding-top: 40px; } .hw-col-divided::before { left: 24px; right: 24px; top: 0; bottom: auto; width: auto; height: 0.7px; } } /* ── Секция «What is The Destiny Matrix» ─────────────────────────────────── Две колонки: текст 60%, заголовок 40%. Шкала текста как в остальных секциях лендинга: 15/17px абзац, 17/19px выделенная первая строка. */ .what { /* ❗ 6fr/4fr, а не 60%/40%: проценты считаются от всей ширины и вместе с gap дают 100% + 40px — правая колонка вылезала за паддинг секции. fr делит остаток после gap. */ display: grid; grid-template-columns: 6fr 4fr; align-items: start; gap: 40px; background: #ADC5BC; border-radius: 25px; corner-shape: superellipse(1.1); padding: 100px 40px; margin-bottom: 32px; } .what-text { min-width: 0; } .what-side { min-width: 0; } .what-title { font-family: 'Bricolage Grotesque', 'Inter Tight', 'Inter', sans-serif; font-weight: 500; font-size: clamp(36px, 4.2vw, 60px); line-height: 0.9; letter-spacing: -0.05em; color: #052A2C; margin: 0; } /* ❗ :not(.what-lead) обязателен — иначе правило для абзацев перебивает лид по специфичности */ .what-lead { font-size: 19px; font-weight: 700; line-height: 1.2; color: #052A2C; margin: 0 0 18px 0; } .what-text p:not(.what-lead) { font-size: 17px; line-height: 1.6; color: #3D5853; margin: 0 0 18px 0; } /* выделения внутри абзаца — только жирностью, без смены цвета */ .what-text p b { font-weight: 700; color: inherit; } /* Сама ссылка со стрелкой — общий .link-arrow из assets/css/ui.css, здесь только посадка в секции. ❗ Селектор с родителем обязателен: ui.css подключается ПОЗЖЕ home.css, и при равной специфичности его color: inherit перебивал бы цвет. */ .what-text .what-cta { margin-top: 18px; font-size: 17px; color: #052A2C; } /* Мини-схема матрицы под заголовком. Геометрия та же, что в блоках трактовок (includes/mini-matrix.php), цвета подобраны под фон секции #ADC5BC: пунктир там задан в цвет фона страницы, здесь он бы исчез. */ /* на широких схема занимает 80% колонки и прижата к её левому краю; от 1200px и ниже колонка сама по себе узкая — возвращаем во всю ширину */ .what-matrix { margin-top: 40px; } @media (min-width: 1201px) { .what-matrix { width: 80%; margin-right: auto; } } /* одноколоночные планшеты и телефон в альбомной ориентации: схема во всю ширину выглядит громоздко — ужимаем до 50% и ставим по центру колонки. Узкие телефоны (≤560) остаются на 100%. */ @media (min-width: 561px) and (max-width: 1023px) { .what-matrix { width: 50%; margin-left: auto; margin-right: auto; } } .lmx { width: 100%; height: auto; display: block; } /* серо-мятные, темнее фона секции (#ADC5BC); пунктирные диагонали в той же гамме */ .lmx .lmx-line { stroke: #7E9A90; stroke-width: 0.7; stroke-opacity: 0.8; fill: none; } /* пунктирные диагонали — темнее сплошных и без прозрачности: штрихи короткие, на 80% и в светлом тоне они пропадали на фоне */ .lmx .lmx-line.is-dashed { stroke: #6F8C82; stroke-dasharray: 5 4; stroke-opacity: 1; } .lmx .lmx-point { fill: #8CA79E; } /* центр и крайние точки горизонтали/вертикали (A, B, C, D, E) — фирменный розовый */ .lmx .lmx-point.is-key { fill: #FF6291; } /* на мятных точках цифра тёмная, на розовых — тоже тёмная, но глубже */ .lmx .lmx-num { fill: #3E5B59; font-weight: 700; pointer-events: none; user-select: none; /* transform-box / transform-origin здесь больше не нужны: появление цифры анимируется кеглем, а не масштабом (см. mini-matrix-decor.js). Раньше стояло fill-box + origin:center, и в Safari цифры вылетали из левого верхнего угла — fill-box на SVG-тексте там считается иначе. */ } .lmx .lmx-num.is-key { fill: #061210; } @media (min-width: 1024px) { .what-lead { font-size: 17px; } .what-text p:not(.what-lead) { font-size: 15px; } .what-text .what-cta { font-size: 15px; } } @media (max-width: 1023px) { /* заголовок первым, текст под ним */ .what { grid-template-columns: 1fr; gap: 28px; padding: 40px 24px; } .what-side { order: 1; } .what-text { order: 2; } } @media (max-width: 560px) { .what { padding: 32px 20px; } } /* ── Секция «The Major Arcana of Tarot» ──────────────────────────────────── Пополам: слева текст, справа колесо карт. Как и в .what — доли через fr, иначе проценты вместе с gap дают перебор. */ .tarot { position: relative; background: #C1D3CD; border-radius: 25px; corner-shape: superellipse(1.1); padding: 100px 40px; margin-bottom: 32px; /* Колесо декоративное и заведомо шире отведённого места: пусть выходит за сетку, но живёт внутри секции — край мятного фрейма его срезает. */ overflow: hidden; } /* Текст держит ровно правую половину, колесо стоит свободно слева и не входит в сетку — крайние карты уходят за колонку и срезаются краем секции. z-index поднимает текст над колесом: половины перекрываются, и карты должны уходить под текст, а не наезжать на него. */ .tarot-text { width: 50%; min-width: 0; margin-left: auto; position: relative; z-index: 2; } .tarot-title { font-family: 'Bricolage Grotesque', 'Inter Tight', 'Inter', sans-serif; font-weight: 500; font-size: clamp(36px, 4.2vw, 60px); line-height: 0.9; letter-spacing: -0.05em; color: #052A2C; margin: 0 0 40px 0; max-width: 80%; /* ограничитель по ширине колонки — заголовок в две строки */ } .tarot-text p { font-size: 17px; line-height: 1.6; color: #3D5853; margin: 0 0 18px 0; } .tarot-text .tarot-cta { margin-top: 18px; font-size: 17px; color: #052A2C; } @media (min-width: 1024px) { .tarot-text p { font-size: 15px; } .tarot-text .tarot-cta { font-size: 15px; } } /* ── Колесо арканов ──────────────────────────────────────────────────────── Геометрия — как в исходнике демо: радиус окружности 250 (на узких экранах 180), он задан в arcana-wheel.js. Композиция собирается в боксе фиксированного размера --tw-ref и целиком масштабируется под ширину блока (--tw-scale задаёт тот же скрипт), поэтому пропорции и траектории одинаковы на любом экране. Карты позиционируются абсолютно от центра сцены, поэтому до старта скрипта лежат ровной стопкой и вёрстка не прыгает. */ .tarot-wheel { --tw-ref: 690px; /* сторона опорного бокса, десктоп */ --tw-scale: 1; /* Свободный декор: вне сетки, прижат к левому краю секции. Дальше влево не уводим — там сразу сайдбар, и карты уезжали бы под чёрное меню. */ position: absolute; top: 50%; left: 0; width: 54%; /* -7% по X — сдвиг всей конструкции влево; крайние карты при этом срезает край секции (у .tarot overflow: hidden), так и задумано */ transform: translate(-7%, -50%); display: flex; align-items: center; justify-content: center; pointer-events: none; } .tw-scene { position: absolute; left: 50%; top: 50%; width: var(--tw-ref); height: var(--tw-ref); margin: calc(var(--tw-ref) / -2) 0 0 calc(var(--tw-ref) / -2); perspective: 1000px; /* --tw-dx/--tw-dy — компенсация смещения кольца, считается в calibrate() */ transform: translate(var(--tw-dx, 0px), var(--tw-dy, 0px)) scale(var(--tw-scale)); } .tw-group { position: absolute; inset: 0; } .tw-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 112px; height: calc(112px * 700 / 409); transform-style: preserve-3d; } /* две грани: разворот на 180° в исходнике показывает изнанку, и без задней грани наши карты читались бы зеркально — у них узнаваемые фигуры и надписи */ .tw-face { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; backface-visibility: hidden; } .tw-face-back { transform: rotateY(180deg); } .tw-card-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Кегль тот же, что у заголовка секции — та же clamp-шкала. Всё внутри задаётся в em от неё, поэтому «22» держит пропорцию к названию на любом экране. Перенос строки жёсткий (
в разметке), а не по ширине: так две строки гарантированы и на мобилке, где по ширине они бы не сложились. */ .tw-label { position: relative; z-index: 10; margin: 0; text-align: center; pointer-events: none; font-family: 'Bricolage Grotesque', 'Inter Tight', 'Inter', sans-serif; font-weight: 500; font-size: clamp(36px, 4.2vw, 60px); /* по разметке это подпись, а не заголовок, но кегль тот же, что у .tarot-title рядом — трекинг равняем по размеру, как и у .rv-title */ letter-spacing: -0.05em; color: #052A2C; } /* font-family дублируем на сами span-ы: в проекте есть глобальное `* { font-family: 'Inter Tight' … }`, а правило, попавшее прямо в элемент, всегда перебивает унаследованное — от родителя шрифт бы не дошёл. */ .tw-label-text { display: block; font-size: 1em; line-height: 0.9; font-family: 'Bricolage Grotesque', 'Inter Tight', 'Inter', sans-serif; } .tw-label-num { /* margin в em считается от СОБСТВЕННОГО кегля «22», а не от кегля названия */ display: block; font-size: 0.62em; line-height: 1.05; margin-top: 0.44em; /* свой трекинг, а не унаследованный: от родителя приходит уже посчитанное значение в px, и на другом кегле доля получилась бы другой */ letter-spacing: -0.05em; font-family: 'Bricolage Grotesque', 'Inter Tight', 'Inter', sans-serif; } /* Ниже 848px (53em, брейкпоинт исходника) окружность там же меньше: 180 вместо 250, карта 5em — поэтому и опорный бокс другой. */ @media (max-width: 847px) { .tarot-wheel { --tw-ref: 520px; } .tw-card { width: 80px; height: calc(80px * 700 / 409); } } /* на одной колонке колесо возвращается в поток над текстом */ @media (max-width: 1023px) { .tarot { padding: 40px 24px; } .tarot-text { width: 100%; margin-left: 0; } .tarot-title { max-width: none; margin-bottom: 28px; } /* Колесо распираем шире секции: 24px гасят её боковые отступы, ещё 16px с каждой стороны — запас, за счёт которого конструкция целиком крупнее. Скрипт всегда вписывает кольцо в ширину блока, поэтому масштабируется всё разом: и карты, и радиус. Края кольца при этом срезает рамка секции. */ /* именно relative, а не static: сцена внутри позиционируется абсолютно и при static цеплялась бы за секцию, уезжая к её центру */ .tarot-wheel { position: relative; top: auto; left: auto; transform: none; width: calc(100% + 80px); margin: 0 -40px 40px; } } @media (max-width: 560px) { .tarot { padding: 32px 20px; } /* 20px гасят отступ секции + 14px запаса с каждой стороны */ .tarot-wheel { width: calc(100% + 68px); margin: 0 -34px 32px; } } /* ── Секция «Why Choose Destiny Guru?» ───────────────────────────────────── Слева заголовок с выключкой вправо, справа сетка 4×2. Цвета текста — как в чёрных блоках: #D5E4DE заголовки, #93A9A2 приписки. */ .wc { display: grid; grid-template-columns: 1fr 3fr; align-items: start; gap: 40px; background: linear-gradient(90deg, #425A57 0%, #556966 100%); border-radius: 25px; corner-shape: superellipse(1.1); padding: 60px 40px; margin-bottom: 32px; } .wc-side { min-width: 0; } .wc-title { font-family: 'Bricolage Grotesque', 'Inter Tight', 'Inter', sans-serif; font-weight: 500; font-size: clamp(36px, 4.2vw, 60px); line-height: 0.9; letter-spacing: -0.05em; color: #D5E4DE; margin: 0; text-align: right; } .wc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 32px; min-width: 0; } .wc-item-title { font-size: 19px; font-weight: 700; line-height: 1.2; color: #D5E4DE; margin: 0 0 10px 0; } .wc-item-text { font-size: 17px; line-height: 1.6; color: #ADC5BC; margin: 0; } @media (min-width: 1024px) { .wc-item-title { font-size: 17px; } .wc-item-text { font-size: 15px; } } @media (max-width: 1023px) { .wc { grid-template-columns: 1fr; gap: 32px; padding: 40px 24px; } .wc-title { text-align: left; } .wc-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; } } @media (max-width: 560px) { .wc { padding: 32px 20px; } .wc-grid { grid-template-columns: 1fr; } } /* ── Секция «What Our Users Say» ─────────────────────────────────────────── Заголовок + плашка со статистикой, под ними бесконечная лента карточек (движок общий с каруселью цифр — assets/js/marquee.js). */ .rv { background: #F2F7F5; border-radius: 25px; corner-shape: superellipse(1.1); padding: 60px 0; margin-bottom: 32px; } .rv-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 40px; margin-bottom: 40px; } /* Оформление как у заголовков секций, только мельче: это подпись к ленте, а не титул раздела (в разметке — h3). */ .rv-title { font-family: 'Bricolage Grotesque', 'Inter Tight', 'Inter', sans-serif; font-weight: 500; font-size: clamp(28px, 2.8vw, 40px); line-height: 0.9; /* в разметке h3, но кегль тот же, что у .faq-title (h2) — трекинг равняем по размеру, а не по тегу, иначе рядом видна разница в 1px. Добавочный -1px тут не ставим: на 40px он уже слишком плотный. */ letter-spacing: -0.05em; color: #052A2C; margin: 0; } /* плашка со статистикой справа от заголовка */ .rv-badge { display: flex; align-items: center; gap: 16px; flex-shrink: 0; background: rgba(201,218,212,0.5); border-radius: 999px; padding: 12px 24px 12px 14px; } .rv-badge-dots { display: inline-flex; } .rv-badge-dots i { width: 42px; height: 42px; border-radius: 50%; background: #ADC5BC; border: 2px solid #E9F0ED; /* обводка под цвет плашки на фоне секции */ overflow: hidden; flex: none; } /* фото 100×100 без обработки, только вписаны в круг */ .rv-badge-dots img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .rv-badge-dots i + i { margin-left: -14px; } .rv-badge-text { font-size: 15px; color: #3D5853; } .rv-badge-text b { font-weight: 700; color: #052A2C; } /* Лента: клипует внутренний слой, слои блера лежат ПОВЕРХ него вне overflow — иначе backdrop-filter режется прямоугольником (та же схема, что у цифр). */ .rv-marquee { position: relative; } .rv-marquee-clip { overflow: hidden; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; } .rv-marquee-clip.is-dragging { cursor: grabbing; } .rv-track { display: flex; gap: 20px; will-change: transform; padding: 0 40px; } .rv-blur { position: absolute; top: 0; bottom: 0; width: 60px; z-index: 3; pointer-events: none; } .rv-blur-left { left: 0; } .rv-blur-right { right: 0; } .rv-blur-layer { position: absolute; inset: 0; } .rv-card { flex: 0 0 340px; background: rgba(201,218,212,0.5); border-radius: 23px; corner-shape: superellipse(1.1); padding: 28px 30px; display: flex; flex-direction: column; } .rv-stars { color: #FF6291; font-size: 17px; letter-spacing: 2px; margin-bottom: 14px; } .rv-text { font-size: 15px; line-height: 1.6; color: #061210; margin: 0; flex: 1; } .rv-author { margin-top: 18px; padding-top: 16px; border-top: 0.7px solid #F2F7F5; font-size: 15px; color: #061210; } /* ссылка со стрелкой — общий .link-arrow из ui.css; здесь только посадка. ❗ Селектор с родителем: ui.css грузится позже и перебил бы display и color. */ .rv .rv-cta { display: block; margin: 40px 40px 0; text-align: left; font-size: 17px; color: #052A2C; } /* на десктопе 15px — как «Dive Deeper» и «Go Deeper» в соседних секциях */ @media (min-width: 1024px) { .rv .rv-cta { font-size: 15px; } } @media (max-width: 1023px) { .rv { padding: 40px 0; } .rv-head { flex-direction: column; align-items: flex-start; gap: 20px; padding: 0 24px; margin-bottom: 28px; } .rv-track { padding: 0 24px; } .rv .rv-cta { margin: 28px 24px 0; } } @media (max-width: 560px) { .rv-card { flex: 0 0 280px; padding: 24px; } .rv-badge { padding: 10px 18px 10px 12px; gap: 12px; } .rv-badge-dots i { width: 34px; height: 34px; } .rv-badge-text { font-size: 13px; } } /* ── Финальный CTA ───────────────────────────────────────────────────────── Розово-оранжевый фон, тёмный текст. Кнопка — инверсия обычной .arcana-cta: чёрный фон с градиентным текстом, а звезда-клякса на ховере разворачивает светлый #D5E4DE и текст становится тёмным. */ .fcta { background: linear-gradient(90deg, #FF6291 0%, #FF755E 100%); border-radius: 25px; corner-shape: superellipse(1.1); padding: 60px 40px; margin-bottom: 32px; text-align: center; /* как у секции выше */ } .fcta-title { font-family: 'Bricolage Grotesque', 'Inter Tight', 'Inter', sans-serif; font-weight: 500; font-size: clamp(36px, 4.2vw, 60px); line-height: 0.9; letter-spacing: -0.05em; color: #061210; margin: 0 auto 20px; max-width: 60%; } .fcta-sub { font-size: 17px; line-height: 1.6; color: #061210; margin: 0 0 36px 0; } .fcta-btn { display: inline-flex; align-items: center; justify-content: center; background: #061210; border-radius: 18px; padding: 24px 42px; font-weight: 800; font-size: 17px; line-height: 1.3; text-decoration: none; position: relative; overflow: hidden; } /* звезда — та же клякса и тайминг, что у .arcana-cta, только светлая */ .fcta-btn::before { content: ''; position: absolute; left: 50%; top: 50%; width: 67px; height: 65px; background: #D5E4DE; clip-path: path('M43.7028 0C36.1296 29.2921 36.9014 30.7618 66.4978 32.1811C35.996 33.6007 34.317 35.153 23.7647 64.4542C31.4198 34.8456 30.5484 33.6639 0 32.2271C31.4373 30.7903 33.0398 29.6086 43.7028 0Z'); transform: translate(-50%, -50%) scale(0); transform-origin: center; transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1); pointer-events: none; } .fcta-btn:hover::before { transform: translate(-50%, -50%) scale(50); } .fcta-btn .cta-label { position: relative; z-index: 1; background: linear-gradient(to right, #FF6291, #FF755E); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; transition: -webkit-text-fill-color 0.4s ease 0.15s, color 0.4s ease 0.15s; } .fcta-btn:hover .cta-label { -webkit-text-fill-color: #061210; color: #061210; } @media (min-width: 1024px) { .fcta-sub { font-size: 15px; } } @media (max-width: 1023px) { .fcta { padding: 48px 24px; } .fcta-title { max-width: none; } .fcta-btn { padding: 20px 28px; font-size: 16px; } } /* ── FAQ ─────────────────────────────────────────────────────────────────── Слева заголовок с припиской (20%), справа вопросы в две колонки (80%). */ .faq { display: grid; grid-template-columns: 1fr 4fr; align-items: start; gap: 40px; background: #C1D3CD; border-radius: 25px; corner-shape: superellipse(1.1); padding: 60px 40px; margin-bottom: 32px; } .faq-side { min-width: 0; } .faq-title { font-family: 'Bricolage Grotesque', 'Inter Tight', 'Inter', sans-serif; font-weight: 500; font-size: clamp(28px, 2.8vw, 40px); line-height: 0.9; /* тот же кегль, что у .rv-title — и трекинг базовый, без добавочного -1px */ letter-spacing: -0.05em; color: #052A2C; margin: 0 0 18px 0; } .faq-sub { font-size: 17px; line-height: 1.6; color: #3D5853; margin: 0; } .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; align-content: start; min-width: 0; } .faq-item { border-bottom: 0.7px solid rgba(6,42,44,0.15); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: 0; cursor: pointer; text-align: left; padding: 20px 0; font: inherit; font-size: 17px; font-weight: 700; line-height: 1.3; color: #052A2C; } /* Плюс ↔ крестик. Поворот на 45° превращает одну иконку в другую, поэтому двух картинок не нужно и переход идёт непрерывно, без подмены. */ .faq-chevron { flex-shrink: 0; color: #051210; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .faq-item.is-open .faq-chevron { transform: rotate(45deg); } /* 0fr → 1fr: переход идёт по реальной высоте контента */ .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .faq-item.is-open .faq-a { grid-template-rows: 1fr; } .faq-a-inner { overflow: hidden; min-height: 0; } .faq-a-inner p { font-size: 15px; line-height: 1.6; color: #3D5853; margin: 0 0 20px 0; } @media (min-width: 1024px) { .faq-sub { font-size: 15px; } .faq-q { font-size: 15px; } } @media (max-width: 1023px) { .faq { grid-template-columns: 1fr; gap: 28px; padding: 40px 24px; } .faq-grid { grid-template-columns: 1fr; gap: 0; } } @media (max-width: 560px) { .faq { padding: 32px 20px; } }