/* ========================================================================== 10 — РОДНЫЕ БЛОКИ TILDA ПОД ОБЩИЙ СТИЛЬ Куда: Настройки сайта → Вставка кода → Пользовательские CSS-стили. Это отдельное поле, не то, куда идёт 01-head-code.html. Тег писать не нужно, только содержимое этого файла. Зачем: галереи, «Обо мне» и пакеты цен собираются родными блоками Tilda, чтобы фотографии менялись мышкой. По умолчанию они выглядят «по-тильдовски»: скруглённые углы, свои поля и шрифты. Этот файл приводит их к нашему виду. ЭТОТ ФАЙЛ СОБИРАЕТСЯ. Палитра и тёмная тема берутся из assets/css/style.css при каждой сборке — править их здесь бесполезно, правьте в style.css. ВАЖНО ПРО СЕЛЕКТОРЫ. У Tilda классы отличаются от блока к блоку, и точный набор зависит от того, какие блоки вы выберете. Считайте это заготовкой: если что-то не подхватилось — правый клик по элементу → «Просмотреть код», посмотрите настоящий класс и допишите его сюда рядом через запятую. Чтобы правило подействовало только на один блок, поставьте перед ним его номер: #rec123456789 .t-title { … }. Номер виден в редакторе слева. ========================================================================== */ /* -------------------------------------------------------------------------- 1. ПАЛИТРА НА :root Наши переменные объявлены на .sf-root, а родные блоки лежат снаружи него. -------------------------------------------------------------------------- */ :root { --sf-bg: #faf8f6; --sf-bg-sunk: #f1ece7; --sf-ink: #262320; --sf-ink-soft: #6f6862; --sf-ink-faint: #a39a91; --sf-line: #e2dad1; --sf-line-soft: #ede7e0; --sf-ink-ghost: #b8b0a8; --sf-ink-nav: #55504a; --sf-ink-text: #453f3a; --sf-overlay: rgba(250, 248, 246, 0.93); --sf-overlay-soft: rgba(250, 248, 246, 0.86); --sf-serif: "Cormorant Garamond", Cormorant, Georgia, "Times New Roman", serif; --sf-sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --sf-display: "Jost", -apple-system, Arial, sans-serif; --sf-fs-display: clamp(30px, 5.2vw, 58px); --sf-fs-h2: clamp(24px, 3.6vw, 40px); --sf-fs-h3: clamp(17px, 1.5vw, 21px); --sf-fs-lead: clamp(15px, 1.35vw, 17px); --sf-fs-body: 15px; --sf-fs-nav: 16px; --sf-fs-micro: 11px; --sf-track-wide: 0.18em; --sf-track-logo: 0.26em; --sf-rhythm: 12px; --sf-pad-x: clamp(16px, 4vw, 51px); --sf-sect-y: clamp(64px, 9vw, 132px); --sf-gap: 1px; --sf-row-h: clamp(150px, 23vw, 330px); --sf-header-h: 68px; --sf-ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* Тёмная сторона — те же переменные в других тонах. Включается от настройки телефона или компьютера, как и на остальном сайте. */ @media (prefers-color-scheme: dark) { :root { --sf-bg: #1a1917; --sf-bg-sunk: #232120; --sf-ink: #f4f3f1; --sf-ink-text: #d6d5d3; --sf-ink-nav: #b4b2af; --sf-ink-soft: #999795; --sf-ink-faint: #88857f; --sf-ink-ghost: #6f6c68; --sf-line: #2e2c29; --sf-line-soft: #252321; --sf-overlay: rgba(26, 25, 23, 0.94); --sf-overlay-soft: rgba(26, 25, 23, 0.88); } } /* -------------------------------------------------------------------------- 2. ФОН И НАБОР -------------------------------------------------------------------------- */ body, .t-body, .t-records { background-color: var(--sf-bg); } .t-title { font-family: var(--sf-serif) !important; font-weight: 400 !important; color: var(--sf-ink); letter-spacing: 0.04em; } .t-descr, .t-text, .t-name { font-family: var(--sf-sans) !important; color: var(--sf-ink-text); line-height: 1.8; } /* -------------------------------------------------------------------------- 3. ГАЛЕРЕИ Убираем скругления и тени, сводим зазор к нашему просвету и выводим сетку на те же поля, что и остальной сайт. -------------------------------------------------------------------------- */ .t-gallery__item, .t-slds__item, .t-slds__bgimg, .t-gallery__img, .t-img { border-radius: 0 !important; box-shadow: none !important; } .t-gallery .t-container, .t-gallery .t-container_100, .t-slds .t-container_100 { max-width: 100% !important; padding-left: var(--sf-pad-x) !important; padding-right: var(--sf-pad-x) !important; } /* Приближение по наведению — как в наших галереях. На телефоне наведения нет, поэтому и правила нет: иначе кадр «залипал» бы увеличенным. */ @media (hover: hover) { .t-gallery__item img, .t-slds__item img { transition: transform 1.1s var(--sf-ease); } .t-gallery__item:hover img, .t-slds__item:hover img { transform: scale(1.035); } } /* -------------------------------------------------------------------------- 4. КНОПКИ Своих кнопок у нас нет: всё, что нажимается, — это набранная разрядкой строка. Если родной блок принесёт кнопку, пусть выглядит так же. -------------------------------------------------------------------------- */ .t-btn, .t-btntext { border: 0 !important; border-radius: 0 !important; background-color: transparent !important; color: var(--sf-ink) !important; font-family: var(--sf-sans) !important; font-weight: 300 !important; font-size: 16px !important; letter-spacing: 0.08em !important; text-transform: lowercase !important; padding: 0 !important; transition: letter-spacing .6s var(--sf-ease); } @media (hover: hover) { .t-btn:hover { letter-spacing: 0.12em !important; } } /* -------------------------------------------------------------------------- 5. ОТКРЫВАЛКА КАДРА С родными галереями работает своя, наш лайтбокс не нужен — приводим только подложку к нашей. В тёмной теме она темнеет сама: это та же переменная. -------------------------------------------------------------------------- */ .t-popup__container, .t-slds__wrapper { background-color: var(--sf-overlay) !important; } /* -------------------------------------------------------------------------- 6. ПОРЯДОК СЛОЁВ МЕЖДУ БЛОКАМИ На сайте вся страница лежит в одном корне, и слои внутри него сравниваются между собой: выезжающее меню на 55, шапка на 60, окно записи на 150. В Tilda каждый блок — отдельная запись, и записи друг о друге не знают. Поэтому меню, открытое из шапки, проваливалось под родную галерею: слой 55 действует внутри своей записи, а саму запись ничто не поднимало. Поднять слой у меню бесполезно — проверено, помогает только поднять запись. Порядок сохраняем тот же, что на сайте: запись с окном записи выше записи с шапкой, остальное ниже обеих. -------------------------------------------------------------------------- */ .t-rec:has(.sf-header) { z-index: 600; } .t-rec:has(.sf-reach) { position: relative; z-index: 700; } /* -------------------------------------------------------------------------- 7. ЗАКРЕПЛЁННАЯ ШАПКА На сайте шапка липкая и на прокрутке остаётся у верхнего края: она лежит в одном корне со всей страницей, и ей есть к чему липнуть. В Tilda запись с шапкой высотой ровно в саму шапку, липнуть не к чему — шапка уезжала вверх вместе с первым экраном. Поэтому запись прибиваем к окну, а отступ под неё отдаём общему контейнеру записей: ровно та же высота, что занимала бы шапка в потоке, так что ниже ничего не съезжает. -------------------------------------------------------------------------- */ .t-rec:has(.sf-header) { position: fixed; top: 0; left: 0; right: 0; } #allrecords { padding-top: 68px; } @media (max-width: 980px) { #allrecords { padding-top: 66px; } }