/* ── Переход между страницами раздела ────────────────────────────── Анимируем ТОЛЬКО прозрачность и поворот: обе величины считает видеокарта, без пересчёта раскладки и перерисовки, поэтому на слабом телефоне тоже ровно. Блер сюда намеренно не берём — он перерисовывает всю площадь каждый кадр. */ @view-transition { navigation: auto; } /* Страница только растворяется, на месте и без масштаба. Раньше она уезжала вглубь (Scale down), но рядом с переворотом карты получались два независимых движения в разные стороны — глаз читал их как два несвязанных объекта. Движение теперь одно, карта: страница под ней просто меняется, не перетягивая внимание. Затухание и проявление идут внахлёст — браузер сам смешивает снимки (mix-blend-mode: plus-lighter), поэтому это именно растворение одного в другое, а не «погасло — зажглось» с провалом в пустоту посередине. */ ::view-transition-old(root) { animation: arcPageOut .5s ease both; } ::view-transition-new(root) { animation: arcPageIn .5s ease .16s both; } @keyframes arcPageOut { to { opacity: 0; } } @keyframes arcPageIn { from { opacity: 0; } } /* Панели при переходе между статьями не меняются — закрепляем их: браузер их вообще не анимирует, меняется только область статьи. Меньше площади в анимации = быстрее, и переход перестаёт читаться как перезагрузка страницы. */ .arc-menu { view-transition-name: arcana-menu; } ::view-transition-group(arcana-menu) { animation: none; } ::view-transition-old(arcana-menu) { display: none; } ::view-transition-new(arcana-menu) { animation: none; } /* Карта — общий элемент двух страниц: имя одно и то же, поэтому браузер узнаёт её и не рисует заново, а растворяет старую в новой. ⚠️ Никакого поворота. Переворот здесь не работал: старая и новая — это два отдельных снимка, они не могут быть одним вращающимся телом, и вместо единого оборота получалось наложение — одна крутится, вторая уже стоит. Растворение таким недостатком не страдает: оно по своей природе про два изображения, и переход читается как одно движение. */ .arc-cardpic { view-transition-name: arcana-card; } ::view-transition-group(arcana-card) { animation-duration: .8s; } ::view-transition-old(arcana-card), ::view-transition-new(arcana-card) { animation-duration: .8s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); } /* Приходя с обзорной страницы, где карты нет, растворять не из чего — там она просто появляется, чуть подрастая. */ ::view-transition-new(arcana-card):only-child { animation: arcCardIn .5s ease both; } @keyframes arcCardIn { from { opacity: 0; transform: scale(.94); } } /* Анимации отключаются, если человек попросил их не показывать. */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root), ::view-transition-old(arcana-card), ::view-transition-new(arcana-card) { animation: none; } } /* Меню — ФИКСИРОВАННОЙ ширины, сжимается только правая колонка. 280px посчитаны от самого длинного пункта («2 Arcanum - The High Priestess», 196px текста) плюс отступ 32px, который появляется при наведении, плюс паддинги меню и списка. При процентной ширине пункты переносились на вторую строку, как только окно становилось уже. ⚠️ minmax(0, 1fr), а не 1fr: у 1fr минимум равен min-content, и широкий элемент в статье (длинное слово, таблица) распирал бы колонку. */ .arc-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; } /* Меню липнет к верху и занимает высоту экрана; список внутри прокручивается сам, не утаскивая страницу. 100dvh, а не 100vh: на мобильных браузерах панель адреса съедает часть vh, и низ списка оказывался под ней. */ .arc-menu { position: sticky; top: 20px; align-self: start; height: calc(100dvh - 40px); background: #ADC5BC; border-radius: 25px; corner-shape: superellipse(1.1); padding: 18px 10px 18px 16px; display: flex; flex-direction: column; overflow: hidden; } .arc-menu-title { display: flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; /* Разделителя между заголовком и списком нет — отбивку держит нижний отступ. Список начинается сразу под ним. */ color: #3D5853; margin: 2px 0 10px 6px; flex: 0 0 auto; } .arc-menu-title svg { flex: 0 0 auto; } .arc-menu-list { position: relative; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; flex: 1 1 auto; /* touch-action: pan-y говорит браузеру заранее, что здесь возможна только вертикальная прокрутка. При auto он ждёт, не окажется ли жест масштабированием или двойным тапом, и это ожидание успевает отдать прокрутку всей странице. */ touch-action: pan-y; } /* Бегущая подсветка. Абсолютная внутри прокручиваемого списка — значит едет вместе с содержимым при скролле и не требует пересчёта. Двигаем transform, а не top: он считается композитором, без пересборки раскладки на каждый кадр. */ .arc-hl { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 13px; corner-shape: superellipse(1.1); background: rgba(213,228,222,.3); opacity: 0; pointer-events: none; transition: transform .3s cubic-bezier(.22,1,.36,1), width .3s cubic-bezier(.22,1,.36,1), height .3s cubic-bezier(.22,1,.36,1), opacity .18s ease; } /* Нативную полосу прячем: она забирала ширину у пунктов. Вместо неё — собственный ползунок .arc-sb, лежащий ПОВЕРХ списка (как overlay- скроллбар на тач-устройствах) и всплывающий при заходе курсора. */ .arc-menu-list::-webkit-scrollbar { display: none; } .arc-menu-list { scrollbar-width: none; -ms-overflow-style: none; } .arc-sb { /* right: 10px = ровно внутренний край списка. При 6px ползунок седлал границу: 2px внутри списка, 4px в отступе меню — и читался как приклеенный к краю панели снаружи. */ position: absolute; right: 10px; width: 5px; border-radius: 5px; /* Цвет подсветки меню (#D5E4DE), но плотнее: на полосе в 5px прозрачность .3 визуально сливается с фоном — проверено. */ background: rgba(213,228,222,.55); opacity: 0; pointer-events: none; transition: opacity .25s ease; } /* Виден, пока курсор в меню, и ещё секунду после прокрутки — чтобы положение было понятно и когда листаешь колесом, не наводя мышь. */ .arc-menu:hover .arc-sb, .arc-sb.is-scrolling { opacity: 1; } .arc-link { display: block; padding: 12px; margin-bottom: 2px; border-radius: 13px; corner-shape: superellipse(1.1); color: #061210; text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1.35; transition: background-color .45s ease, color .45s ease, padding-left .25s cubic-bezier(.4, 0, .2, 1); } /* Стрелка и сдвиг текста — тот же приём, что в выпадающем списке точек матрицы (.matrix-points-menu li в destiny-matrix.php): стрелка лежит на месте будущего отступа и проявляется, пока текст отъезжает вправо. */ .arc-link::before { content: '→'; font-family: system-ui, sans-serif; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 400; color: #3D5853; opacity: 0; pointer-events: none; transition: opacity .2s ease; } /* На тёмной плашке #3D5853 почти сливается с фоном — там стрелка берёт тот же цвет, что и номер аркана. */ .arc-link.is-active::before { color: #ADC5BC; } .arc-link:hover, .arc-link.is-active { padding-left: 32px; } .arc-link:hover::before, .arc-link.is-active::before { opacity: 1; } /* Поштучного ховера нет: подсветка одна на весь список и переезжает за курсором (см. .arc-hl и скрипт внизу файла). */ .arc-link { position: relative; z-index: 1; } .arc-link.is-active { background: #15211F; color: #D5E4DE; } /* Номер — светлым, название — тёмным. Раньше номер гасился прозрачностью, но она примешивала фон, и оттенок «плавал» между обычным пунктом, подсветкой и активной плашкой. Теперь цвет задан явно. */ /* Полужирным только название аркана; номер и слово «Arcanum» остаются обычным весом — иначе строка читается как один сплошной заголовок. */ .arc-link .n { color: #3D5853; font-weight: 400; font-variant-numeric: tabular-nums; } .arc-link.is-active .n { color: #ADC5BC; } /* Статья */ .arc-article { /* Единая мера строки — ВСЯ ширина колонки. Все элементы статьи стоят в одной колонке и считаются от одного параметра, поэтому их правые края совпадают на любом экране. ⚠️ Ни ch, ни px здесь не годятся. ch — ширина символа ТЕКУЩЕГО шрифта: 72ch у заголовка в 60px и у текста в 17px дают разную ширину, края расходились на сотню пикселей. Фиксированные px ровняют края, но перестают тянуться за колонкой — на широком мониторе справа зияет пустота, на узком строка не помещается. */ --arc-measure: 100%; background: #F2F7F5; border-radius: 25px; corner-shape: superellipse(1.1); padding: 44px 48px 52px; min-height: calc(100dvh - 40px); /* isolation превращает панель в отдельный слой. Только благодаря этому z-index: -1 у холста означает «над собственным фоном, под текстом», а не «под всей страницей». overflow: clip, а не hidden: hidden сделал бы панель контейнером прокрутки и сломал прилипание правой колонки с картой. */ isolation: isolate; overflow: clip; } /* Капля за курсором (assets/js/arcana-fluid.js). Холст вылезает отрицательными полями под внутренние отступы панели, иначе жидкость обрывалась бы в 48px от края. sticky, а не absolute: статья бывает в несколько экранов, и холст во всю её высоту съел бы память видеокарты. Так он всегда ровно в экран и едет за прокруткой. */ .arc-fluid-zone { position: relative; } /* Холст ровно по зоне плюс вылет под внутренние отступы панели, чтобы жидкость доходила до её краёв. ⚠️ Именно absolute. Был sticky с отрицательными полями — и уезжал далеко ниже зоны: прилипание держит элемент за его ПОЛЯ, а нижнее поле было отрицательным и почти обнуляло высоту, так что удерживать было нечего. Absolute снимает и это, и заодно вопрос со схлопыванием полей, из-за которого заголовок липнул к краю. */ .arc-fluid { position: absolute; z-index: -1; pointer-events: none; display: block; top: -44px; left: -48px; /* ⚠️ Размер задаём явно, а не парой left/right + top/bottom. Canvas — замещаемый элемент: при auto-размерах браузер берёт его собственный размер (300×150) и противоположную привязку просто игнорирует. */ width: calc(100% + 96px); /* Холст продолжается на 240px ниже зоны, и эти 240px плавно сходят на нет маской. Раньше он обрывался ровно по нижней границе калькулятора — жидкость срезало по линейке. Маска непрозрачна ровно до низа зоны: 240px снизу вычитаются из полной высоты холста, а те же 240px к ней прибавлены. */ height: calc(100% + 44px + 240px); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 240px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 240px), transparent 100%); } /* ⚠️ font-weight: 500, а НЕ 700. Bricolage Grotesque подключён единственным начертанием (BricolageGrotesque-500.woff2). При 700 браузер не находит жирный файл и синтезирует толщину сам — буквы «раздуваются» и заметно отличаются от H1 на главной, где вес родной. Трекинг -0.05em — единая шкала сайта (см. assets/css/page-title.css). */ /* Размер тянется от ширины экрана, как у .page-h1 на остальных страницах. Потолок 60px, а не 82px: заголовок аркана длиннее («1 Arcana in the Destiny Matrix — The Magician») и на 82px занимал бы три строки. Межстрочный 0.9 — как у заголовков на главной: заголовок почти всегда переносится на две строки, и при 1.1 они расползались. */ .arc-article h1 { font-family: 'Bricolage Grotesque', 'Inter Tight', sans-serif; font-size: 60px; line-height: 0.9; font-weight: 500; letter-spacing: -0.05em; color: #052A2C; margin: 0 0 18px; /* Заголовок чуть уже колонки: длинная строка в 60px кеглем читается тяжело. Ступени 90 → 95 → 100 %, чтобы переход между размерами экрана не был скачком. */ max-width: 90%; } /* Первый абзац — выделенный блок в том же оформлении, что и заглушка ненаписанной статьи: один визуальный язык на весь раздел. */ .arc-lead { background: #DFE9E5; border-radius: 18px; corner-shape: superellipse(1.1); padding: 26px 28px; margin: 0 0 28px; max-width: var(--arc-measure); font-size: 16px; line-height: 1.6; color: #3D5853; } /* Жирный НЕ перекрашиваем: цвет остаётся общий (#3D5853), как в заглушке. Выделение идёт только насыщенностью — иначе блок распадается на тёмные и светлые куски и перестаёт читаться как единый текст. */ .arc-lead b, .arc-lead strong { font-weight: 700; } .arc-lead p { margin: 0 0 14px; } .arc-lead p:last-child { margin-bottom: 0; } /* Ссылка внутри лида — не выделяется ни цветом, ни жирным: плашка должна читаться единым текстом. Кликабельность держится на одном тонком подчёркивании, как у ссылок в теле статьи. ⚠️ CTA-переход (`p.arc-cta > a`) сюда не попадает: у него своё правило ниже, с более высокой специфичностью. */ .arc-lead a { color: inherit; font-weight: inherit; text-decoration: underline; text-decoration-color: rgba(61,88,83,.35); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .35s ease, text-decoration-color .35s ease; } .arc-lead a:hover { color: #FF6291; text-decoration-color: #FF6291; } /* На обзорной странице лид стоит не плашкой, а обычным текстом под H1 — плашка тут же над сеткой плиток того же цвета выглядела бы как ещё одна плитка. Ширина 70% против 90% у H1: строка в 16px при полной ширине колонки уезжает за комфортные для чтения ~75 знаков. */ .arc-lead--plain { /* ⚠️ Скругление и corner-shape обязательно сбрасывать. Они достались от плашки .arc-lead, и на прозрачном фоне их не видно — но браузер всё равно обрезает содержимое по этой форме. Отступов у абзаца теперь нет, текст стоит вплотную к углам, и у первой буквы первой и последней строк срезало край. Rimma нашла причину. */ background: none; padding: 0; max-width: 70%; border-radius: 0; corner-shape: round; } .arc-body { font-size: 17px; line-height: 1.7; color: #062A2C; max-width: var(--arc-measure); } /* Внутренность статьи: 75 % текст, 25 % колонка с картой и навигацией. Доли, а не пиксели, — иначе на другом экране колонки разъезжаются. Из каждой вычитается половина зазора, иначе сумма превысит 100 %. */ .arc-inner { display: grid; grid-template-columns: calc(75% - 16px) calc(25% - 16px); gap: 32px; align-items: start; } .arc-col { min-width: 0; } /* без этого длинное слово распирает колонку */ /* Правая колонка едет за читателем: карта и оглавление всегда под рукой. 40px от верха — как просила Rimma. */ .arc-aside { position: sticky; top: 40px; } /* Карта — те же файлы и та же подача, что в трактовках на калькуляторе. */ .arc-cardpic { display: block; width: 100%; height: auto; border-radius: 20px; corner-shape: superellipse(1.1); } /* Навигация по статье */ .arc-toc { margin-top: 22px; } .arc-toc-title { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #8FA39D; margin-bottom: 10px; } .arc-toc a { display: block; padding: 7px 0 7px 12px; margin-bottom: 2px; border-left: 2px solid rgba(6,42,44,.12); color: #3D5853; text-decoration: none; font-size: 13px; line-height: 1.35; transition: color .35s ease, border-color .35s ease; } .arc-toc a:hover { color: #062A2C; border-left-color: #6BAB93; } .arc-toc a.is-current { color: #062A2C; border-left-color: #062A2C; font-weight: 600; } /* Переход по якорю не должен прятать заголовок под верхний край. */ .arc-body h2 { scroll-margin-top: 40px; } /* ⚠️ font-weight и line-height задаём ЯВНО: Tailwind (output.css) сбрасывает заголовкам жирность до inherit — из-за этого h2/h3 выглядели тоньше, чем в трактовках, где стоит font-bold. Межстрочный 1.1 — как просила Rimma: при переносе длинного заголовка на две строки зазор был огромным. */ .arc-body h2 { font-size: 24px; font-weight: 700; line-height: 1.1; margin: 40px 0 12px; } /* Главные разделы статьи отбиваются линией — той же, что делит блок калькулятора и общую статью на /arcana. Только H2: подзаголовки внутри раздела резать нельзя, иначе один связный блок рассыпается. */ .arc-body h2 { padding-top: 34px; border-top: 1px solid rgba(6,42,44,.1); } .arc-body h3 { font-size: 19px; font-weight: 700; line-height: 1.1; margin: 26px 0 10px; } /* Блок «читать дальше» в конце статьи: подпись обычным абзацем и список ссылок. Заголовком он быть не должен (не раздел статьи и не место в оглавлении), но отбивку линией сохраняет — иначе список прилипает к последнему ответу FAQ и читается как его продолжение. Ловим по структуре, а не по классу: абзац, за которым идёт последний список статьи. Классов в теле статьи не держим, оформление живёт здесь. */ .arc-body > p:has(+ ul:last-child) { margin-top: 40px; padding-top: 34px; border-top: 1px solid rgba(6,42,44,.1); } .arc-body p { margin: 0 0 16px; } /* Ссылка-переход, стоящая ОТДЕЛЬНЫМ абзацем («Calculate my Destiny Matrix»), оформляется как .link-arrow из assets/css/ui.css — тот же элемент, что «Dive Deeper» на главной: жирная подпись и стрелка глифом в ::after. ⚠️ Класс проставляет arcana_mark_cta() на выводе, в базе разметка чистая. Раньше здесь стоял селектор `p > a:only-child`, и он ловил ЛЮБУЮ ссылку внутри абзаца — :only-child не видит текст вокруг. Ссылка в середине предложения превращалась в кнопку со стрелкой. */ .arc-lead p.arc-cta > a, .arc-body p.arc-cta > a { display: inline-block; font-weight: 700; text-decoration: none; color: inherit; } .arc-lead p.arc-cta > a::after, .arc-body p.arc-cta > a::after { content: '\2192'; font-weight: 300; margin-left: 3px; } .arc-lead p.arc-cta > a:hover, .arc-body p.arc-cta > a:hover { opacity: .7; color: inherit; } /* Ссылки внутри статьи. Без подчёркивания цвет текста и цвет ссылки совпадают, и переход на страницу аркана не читается как кликабельный. */ /* ⚠️ Толщину задаём явно: браузер считает её от начертания, и под жирными названиями арканов линия выходила вдвое толще, чем под обычным текстом. */ .arc-body a { color: #062A2C; text-decoration: underline; text-decoration-color: rgba(6,42,44,.28); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .35s ease, text-decoration-color .35s ease; } .arc-body a:hover { color: #FF6291; text-decoration-color: #FF6291; } /* Сопутствующий блок (пошаговая инструкция) — та же плашка, что у лида под заголовком. Тег