/* Правки поверх экспорта Tilda: личный бренд. */ /* Шрифт Manrope вместо TildaSans/Arial (подключается в ) */ :root { --t-text-font: 'Manrope'; --t-headline-font: 'Manrope'; } body, .t-body, .t-records, .tn-atom, .t-title, .t-descr, .t-text, .t-name, .t-uptitle, .t-menu__link-item, .t-input, .t-input-title, .t-submit, .t-btn, .t-btnflex, input, textarea, button, select { font-family: 'Manrope', Arial, sans-serif !important; } /* Первый экран (RU — rec4796354201, EN — rec4796382101): имя всегда в одну строку, сноска «*коробка» не нужна */ :is(#rec4796354201, #rec4796382101) .tn-elem[data-elem-id="1607345913666"] .tn-atom { white-space: nowrap !important; } :is(#rec4796354201, #rec4796382101) .tn-elem[data-elem-id="1733246934172"] { display: none !important; } @media screen and (max-width: 479px) { :is(#rec4796354201, #rec4796382101) .tn-elem[data-elem-id="1607345913666"] .tn-atom { font-size: 42px !important; } } /* Manrope шире TildaSans: на телефоне «Фоновая музыка» должна остаться в одну строку */ @media screen and (max-width: 479px) { #rec4796357101 .tn-elem[data-elem-id="1607345913666"] .tn-atom { font-size: 39px !important; white-space: nowrap !important; } } /* Ссылки: вместо оранжевого Tilda по умолчанию — цвет окружающего текста. :where() даёт нулевую специфичность, как у правила Tilda, так что меню и кнопки не задеваются */ :where(.t-records) a, :where(.t-records) .tn-nested-link { color: inherit; transition: opacity .2s; } :where(.t-records) .tn-atom a:hover { opacity: .6; } /* Светлый фон у самой страницы, чтобы до отрисовки блоков не просвечивал фон браузера */ html, body { background-color: #15181d; color: #e6e9ee; } /* Лайм — фирменный акцент: кнопки, выделение текста */ .t-submit, .t-btnflex_type_submit, .t-btn { background-color: #c9f03a !important; color: #15181d !important; } /* Меню: при наведении — тонкое подчёркивание, без цветной плашки. «Приколы» (6-й пункт) — исключение: у них свой эффект из кода страницы (градиент, увеличение с поворотом). */ .t-menu__link-item:not([data-menu-item-number="6"]) { text-decoration-line: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 6px; text-decoration-color: transparent !important; transition: text-decoration-color .2s; } .t-menu__link-item:not([data-menu-item-number="6"]):hover, .t-menu__link-item:not([data-menu-item-number="6"]):focus-visible { text-decoration-color: #e6e9ee !important; } ::selection { background: #c9f03a; color: #15181d; } /* «Почему я?»: на лаймовом кружке при наведении плюсик тёмный */ .t668__icon-hover g[stroke] { stroke: #15181d !important; } /* Рилсы: все вертикальные видео в ряд от левого края текста; на узких экранах — свайп */ .ts-reels { background: #15181d; padding: 40px 0 70px; } .ts-reels__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 16px; max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: none; } .ts-reels__track::-webkit-scrollbar { display: none; } .ts-reel { position: relative; margin: 0; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #1e232a; scroll-snap-align: start; cursor: pointer; } .ts-reel video { display: block; width: 100%; height: 100%; object-fit: cover; } .ts-reel::after { content: ""; position: absolute; inset: 55% 0 0; pointer-events: none; background: linear-gradient(to bottom, rgba(21,24,29,0), rgba(21,24,29,.85)); } .ts-reel figcaption { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; pointer-events: none; color: #e6e9ee; font-family: 'Manrope', Arial, sans-serif; font-size: 17px; font-weight: 400; line-height: 1.3; } .ts-reel__play { position: absolute; left: 50%; top: 50%; z-index: 1; width: 64px; height: 64px; padding: 0; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: #c9f03a !important; cursor: pointer; transition: transform .2s, opacity .2s; } .ts-reel__play svg { width: 28px; height: 28px; fill: #15181d; } .ts-reel:hover .ts-reel__play { transform: translate(-50%, -50%) scale(1.08); } .ts-reel.is-playing .ts-reel__play { opacity: 0; } .ts-reel.is-loading .ts-reel__play { animation: ts-pulse 1s ease-in-out infinite; } @keyframes ts-pulse { 50% { opacity: .45; } } @media (max-width: 1100px) { .ts-reels__track { grid-auto-columns: 220px; } } @media (max-width: 640px) { .ts-reels__track { grid-auto-columns: 64vw; gap: 12px; padding: 0 16px; scroll-padding: 0 16px; } } /* «Дичь и эксперименты»: лаймовая шапка перетекает в «кислотную комнату» без чёрной полосы */ .crazy-room-wrapper { border-top: 0 !important; } /* Тонкий текст: начертания, которые Tilda задаёт классами, а не в самих блоках */ strong, b, .t-card__link, .t-card__title, .t-name, .t-title, .t-heading { font-weight: 400 !important; } .crazy-quote { font-weight: 500 !important; } /* «…и куча проектов попроще» под кейсами — была чёрной на тёмном */ .t046__text { color: #9aa3b0 !important; } /* Тонкие крупные заголовки: имя и названия разделов (h2 в zero-блоках) */ .t396 h1.tn-atom, .t396 h2.tn-atom, .t396 h2.tn-atom * { font-weight: 200 !important; letter-spacing: -0.02em !important; } /* macOS (особенно Safari) утолщает светлый текст на тёмном фоне — отключаем */ html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Крутящийся знак в шапке: исходник — чёрный контур, на тёмном фоне делаем его светлым */ .t456__imglogo { filter: invert(1) brightness(0.92); } /* «Моя миссия»: заголовки пунктов чуть плотнее основного текста */ .t668__title, .t668__title span { font-weight: 400 !important; } /* Подписи над заголовками («Привет, я», «Для ясности»…) — ближе к заголовку. Сдвиги замерены по реальному верху букв заголовка (Manrope) для каждой ширины Tilda; заданы в CSS, чтобы подписи стояли на месте с первой отрисовки, без прыжка. */ @media screen and (min-width:1200px) { #rec4796354201 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(18px); } #rec4796354201 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(18px); } #rec4796356401 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(36px); } #rec4796356401 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(35px); } #rec4796356801 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(36px); } #rec4796356801 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(36px); } #rec4796357101 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(36px); } #rec4796357101 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(36px); } #rec4796357401 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(36px); } #rec4796357401 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(36px); } #rec4796382101 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(18px); } #rec4796382101 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(18px); } #rec4796384701 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(36px); } #rec4796384701 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(35px); } #rec4796385001 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(34px); } #rec4796385001 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(34px); } #rec4796385401 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(36px); } #rec4796385401 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(36px); } #rec4796385701 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(34px); } #rec4796385701 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(34px); } } @media screen and (min-width:960px) and (max-width:1199px) { #rec4796354201 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(23px); } #rec4796354201 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(23px); } #rec4796356401 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(28px); } #rec4796356401 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(27px); } #rec4796356801 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(28px); } #rec4796356801 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(28px); } #rec4796357101 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(28px); } #rec4796357101 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(28px); } #rec4796357401 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(28px); } #rec4796357401 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(28px); } #rec4796382101 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(23px); } #rec4796382101 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(23px); } #rec4796384701 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(28px); } #rec4796384701 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(27px); } #rec4796385001 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(27px); } #rec4796385001 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(27px); } #rec4796385401 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(28px); } #rec4796385401 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(28px); } #rec4796385701 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(27px); } #rec4796385701 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(27px); } } @media screen and (min-width:640px) and (max-width:959px) { #rec4796354201 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(2px); } #rec4796354201 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(2px); } #rec4796356401 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(18px); } #rec4796356401 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(17px); } #rec4796356801 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(18px); } #rec4796356801 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(18px); } #rec4796357101 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(18px); } #rec4796357101 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(18px); } #rec4796357401 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(18px); } #rec4796357401 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(18px); } #rec4796382101 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(5px); } #rec4796382101 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(5px); } #rec4796384701 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(20px); } #rec4796384701 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(19px); } #rec4796385001 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(19px); } #rec4796385001 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(19px); } #rec4796385401 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(20px); } #rec4796385401 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(20px); } #rec4796385701 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(19px); } #rec4796385701 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(19px); } } @media screen and (min-width:480px) and (max-width:639px) { #rec4796354201 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(10px); } #rec4796354201 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(10px); } #rec4796356401 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(27px); } #rec4796356401 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(25px); } #rec4796356801 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(27px); } #rec4796356801 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(27px); } #rec4796357101 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(27px); } #rec4796357101 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(27px); } #rec4796357401 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(27px); } #rec4796357401 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(27px); } #rec4796382101 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(10px); } #rec4796382101 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(10px); } #rec4796384701 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(27px); } #rec4796384701 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(25px); } #rec4796385001 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(26px); } #rec4796385001 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(26px); } #rec4796385401 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(27px); } #rec4796385401 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(27px); } #rec4796385701 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(26px); } #rec4796385701 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(26px); } } @media screen and (max-width:479px) { #rec4796354201 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(17px); } #rec4796354201 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(17px); } #rec4796356401 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(26px); } #rec4796356401 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(24px); } #rec4796356801 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(26px); } #rec4796356801 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(26px); } #rec4796357101 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(25px); } #rec4796357101 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(25px); } #rec4796357401 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(26px); } #rec4796357401 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(26px); } #rec4796382101 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(17px); } #rec4796382101 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(17px); } #rec4796384701 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(26px); } #rec4796384701 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(24px); } #rec4796385001 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(25px); } #rec4796385001 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(25px); } #rec4796385401 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(26px); } #rec4796385401 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(4px); } #rec4796385701 .tn-elem[data-elem-id="1607345913693"] { transform: translateY(25px); } #rec4796385701 .tn-elem[data-elem-id="1607345913707"] { transform: translateY(25px); } } /* Мобильная шапка: у меню Tilda (t456) нет бургера — на телефоне все пункты шли столбиком на полэкрана. Делаем компактную липкую полосу: знак слева, пункты в строку со свайпом. */ @media screen and (max-width: 980px) { #allrecords { overflow: clip !important; } /* hidden ломает sticky; clip так же режет по краям, но не мешает */ .t-rec[data-record-type="456"] { position: sticky; top: 0; z-index: 990; } .t456 { position: relative !important; height: auto !important; background: rgba(21,24,29,.92) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .t456__maincontainer { display: flex !important; align-items: center; height: 56px !important; padding: 0 0 0 12px; } .t456__leftwrapper { width: auto !important; min-width: 0 !important; flex: none; padding: 0 !important; } .t456__logowrapper a { display: block; } .t456__imglogo { width: 36px !important; max-width: 36px !important; height: 36px; padding: 0 !important; } .t456__rightwrapper { flex: 1; min-width: 0; padding: 0 !important; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%); } .t456__rightwrapper::-webkit-scrollbar { display: none; } .t456__list { display: flex !important; flex-wrap: nowrap; height: 56px; align-items: center; padding: 0 16px 0 10px !important; margin: 0 !important; } .t456__list_item { display: block !important; flex: none; width: auto !important; padding: 0 10px !important; white-space: nowrap; } .t456__list_item .t-menu__link-item { white-space: nowrap !important; display: inline !important; } .t456__list_item .t-menu__link-item[data-menu-item-number="6"] { display: inline-block !important; } /* иначе не работают увеличение и поворот */ .t456__list_item .t-menu__link-item { font-size: 15px !important; line-height: 56px !important; padding: 0 !important; } } /* Шапка на десктопе: подложка, чтобы при прокрутке текст не просвечивал под меню */ @media screen and (min-width: 981px) { .t456 { background: rgba(21,24,29,.92) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } }