и оставить только нужный data-variant
на
.
============================================================ */
.tt-nav {
--tt-ink: #0E0E10;
--tt-ink-2: #1A1A1D;
--tt-spark: #FF6A1A;
--tt-spark-deep: #E04E00;
--tt-paper: #FAF7F2;
--tt-bark: #6B5E4F;
--tt-line: #E5DFD3;
--tt-font-display: 'Oswald', 'Inter', system-ui, sans-serif;
--tt-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
font-family: var(--tt-font-body);
transition: background .3s ease, border-color .3s ease, color .3s ease,
backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease;
}
.tt-nav *, .tt-nav *::before, .tt-nav *::after { box-sizing: border-box; }
.tt-nav-inner {
max-width: 1240px;
margin: 0 auto;
padding: 0 clamp(20px, 4vw, 48px);
height: 88px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: clamp(20px, 3vw, 48px);
}
/* Логотип — единая версия, видна на любой подложке */
.tt-nav-logo {
display: inline-flex;
align-items: center;
height: 54px;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.tt-nav-logo { position: relative; display: inline-block; }
.tt-nav-logo .tt-nav-logo-img {
transition: opacity 0.3s ease;
}
/* Тёмная картинка лежит поверх светлой, переключается через opacity */
.tt-nav-logo .tt-nav-logo-img--dark {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
}
[data-theme="dark"] .tt-nav-logo .tt-nav-logo-img--light { opacity: 0; }
[data-theme="dark"] .tt-nav-logo .tt-nav-logo-img--dark { opacity: 1; }
.tt-nav-logo img {
display: block;
height: 54px;
width: auto;
}
/* Список ссылок */
.tt-nav-links {
list-style: none;
margin: 0; padding: 0;
display: flex;
justify-content: center;
gap: clamp(20px, 2.6vw, 36px);
}
.tt-nav-links a {
display: inline-flex; align-items: center;
height: 88px;
font-family: var(--tt-font-body);
font-weight: 500;
font-size: 18px;
letter-spacing: 0.005em;
color: inherit;
text-decoration: none;
position: relative;
transition: color .18s ease;
-webkit-tap-highlight-color: transparent;
}
.tt-nav-links a::after {
content: ""; position: absolute;
left: 0; right: 0; bottom: 30px;
height: 2px;
background: var(--tt-spark);
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform .22s cubic-bezier(.2,.7,.2,1);
}
.tt-nav-links a:hover::after { transform: scaleX(1); }
.tt-nav-links a:hover { color: var(--tt-spark); }
/* CTA — в тоже стилистике, что и hero-кнопка «Обсудить курс» */
.tt-nav-cta {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--tt-font-body);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.01em;
color: #FFFFFF;
background: var(--tt-spark);
border: 1.5px solid var(--tt-spark);
border-radius: 4px;
padding: 11px 18px;
min-height: 42px;
text-decoration: none;
cursor: pointer;
box-shadow: 0 2px 0 var(--tt-spark-deep);
transition:
transform .15s cubic-bezier(.2,.7,.2,1),
box-shadow .15s cubic-bezier(.2,.7,.2,1),
background .15s ease, border-color .15s ease, color .15s ease;
-webkit-tap-highlight-color: transparent;
white-space: nowrap;
}
.tt-nav-cta .tt-nav-arr { transition: transform .2s cubic-bezier(.2,.7,.2,1); }
.tt-nav-cta:hover {
background: var(--tt-spark-deep);
border-color: var(--tt-spark-deep);
color: #FFFFFF;
transform: translateY(1px);
box-shadow: 0 1px 0 var(--tt-spark-deep);
}
.tt-nav-cta:hover .tt-nav-arr { transform: translateX(3px); }
.tt-nav-cta:active { transform: translateY(2px); box-shadow: 0 0 0 var(--tt-spark-deep); }
/* Бургер */
.tt-nav-burger {
display: none;
width: 40px; height: 40px;
border: none; background: transparent; padding: 0;
cursor: pointer;
position: relative;
}
.tt-nav-burger span {
position: absolute;
left: 8px; right: 8px;
height: 2px; background: currentColor;
transition: transform .22s ease, opacity .15s ease, top .22s ease;
}
.tt-nav-burger span:nth-child(1) { top: 13px; }
.tt-nav-burger span:nth-child(2) { top: 19px; }
.tt-nav-burger span:nth-child(3) { top: 25px; }
.tt-nav-burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.tt-nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.tt-nav-burger[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: rotate(-45deg); }
/* Мобильный drawer */
.tt-nav-drawer {
display: none;
position: absolute; left: 0; right: 0; top: 100%;
background: inherit;
border-top: 1px solid currentColor;
border-top-color: inherit;
padding: 16px clamp(20px, 4vw, 48px) 24px;
}
.tt-nav-drawer .tt-nav-links {
flex-direction: column;
gap: 4px;
align-items: flex-start;
}
.tt-nav-drawer .tt-nav-links a {
height: 48px;
font-size: 18px;
}
.tt-nav-drawer .tt-nav-cta {
margin-top: 16px;
width: 100%;
justify-content: center;
min-height: 48px;
font-size: 15px;
}
/* ============================================================
Оформление: прозрачное на герое (белый текст) →
при скролле превращается в бумажную плашку с blur.
CTA сохраняет оранжевую заливку (см. .tt-nav-cta).
============================================================ */
.tt-nav {
background: transparent;
color: var(--tt-paper);
border-bottom: 1px solid transparent;
/* blur(0) вместо none — чтобы blur плавно интерполировался до 12px */
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
}
.tt-nav.is-scrolled {
background: rgba(250,247,242,0.96);
color: var(--tt-ink);
border-bottom-color: var(--tt-line);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* CTA в меню появляется только когда подложка проявилась — на герое
уже есть точно такая же кнопка, дублировать незачем. */
.tt-nav-inner > .tt-nav-cta {
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
pointer-events: none;
transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.tt-nav.is-scrolled .tt-nav-inner > .tt-nav-cta {
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
}
/* ---- Адаптив ---- */
@media (max-width: 880px) {
.tt-nav-inner { grid-template-columns: auto 1fr; height: 64px; }
.tt-nav-links,
.tt-nav-inner > .tt-nav-cta,
.tt-nav-burger,
.tt-nav-drawer { display: none !important; }
.tt-nav-logo, .tt-nav-logo img { height: 40px; }
/* На мобиле при скролле меню — не сплошная подложка во всю ширину,
а «висящая» карточка-прямоугольник с закруглением как у кнопки
темы (кнопка 36px → радиус 18px). Подложку с самого .tt-nav снимаем
и переносим на .tt-nav-inner. */
.tt-nav.is-scrolled {
background: transparent;
border-bottom-color: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.tt-nav-inner {
margin: calc(8px + env(safe-area-inset-top)) 12px 8px;
padding: 0 14px;
border: 1px solid transparent;
border-radius: 36px;
transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tt-nav.is-scrolled .tt-nav-inner {
background: rgba(250,247,242,0.5);
border-color: var(--tt-line);
box-shadow: 0 8px 24px rgba(14,14,16,0.12);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
}
/* ============================================================
ТОЧИМ ТОПОРЫ — Hero «Больше работы за то же время»
Самостоятельный блок для Тильды (T123 «Свой HTML-код»).
Префикс .tt-hero-* — изолирован от других блоков.
Перед публикацией:
1) Замени src в