/* ============================================================ HL MANDO RUSSIA — BRAND LAYER v1.0 (Phase 1) Загружается ПОСЛЕ всех стилей Tilda и переопределяет их. Токены соответствуют HL Mando Aftermarket Corporate Identity Graphic Standards (стр. 03 — Color System, стр. 05 — Typeface). ============================================================ */ /* ---------- 1. TOKENS ---------- */ :root { /* Primary (brandbook) */ --hl-blue: #00B4ED; /* HL Sky Blue, PANTONE 299C */ --hl-black: #020A0A; /* HL Black, PANTONE Black 6C */ /* Secondary (brandbook) */ --hl-white: #FFFFFF; /* HL White */ --hl-navy: #002B68; /* HL Navy, PANTONE 281C */ /* Metallic (brandbook) */ --hl-gold: #C09A5D; --hl-silver: #B2B2B2; /* Производные оттенки для экрана (не заменяют брендовые цвета) */ --hl-blue-ink: #0077A8; /* синий для текста на светлом фоне (AA) */ --hl-blue-hover: #33C6F1; --hl-surface: #0C1315; /* карточка на тёмном */ --hl-surface-2: #131C1F; /* hover */ --hl-line: rgba(255,255,255,.12); --hl-line-strong: rgba(255,255,255,.26); --hl-line-dark: rgba(2,10,10,.14); --hl-text: #FAFAFA; /* 18.5:1 на HL Black */ --hl-text-2: #A7B0B4; /* 8.9:1 на HL Black */ --hl-text-3: #778285; /* 4.8:1 на HL Black — только для меток */ --hl-ink-2: #3A4245; /* вторичный текст на белом */ /* Шкала отступов */ --hl-s1:4px; --hl-s2:8px; --hl-s3:12px; --hl-s4:16px; --hl-s5:24px; --hl-s6:32px; --hl-s7:48px; --hl-s8:64px; --hl-s9:96px; --hl-s10:128px; --hl-radius: 2px; } /* ---------- 2. TYPEFACE: Roboto (brandbook, стр. 05) ---------- */ #allrecords .r, body { --t-headline-font:'Roboto',Arial,sans-serif; --t-text-font:'Roboto',Arial,sans-serif; } .t-text, .t-name, .t-heading, .t-title, .t-descr, .t-btn, .t-btnflex, .t-submit, .t-menu-base .t-menu-base__list-item, .t-menu-base__langs-item a, .t-card__title, .t-card__descr, .t-section__title, .t-section__descr { font-family:'Roboto', Arial, sans-serif; } /* ---------- 3. ТИПОГРАФИКА: единая шкала ---------- !important нужен потому, что Tilda пишет размеры через #recXXXXXX-селекторы и inline-стили. */ .t-section__title { font-size: clamp(28px, 3.2vw, 38px) !important; line-height: 1.15 !important; letter-spacing: -.015em; font-weight: 700 !important; color: var(--hl-text); } .t-section__descr { font-size: 18px !important; line-height: 1.6 !important; color: var(--hl-text-2) !important; font-weight: 400; } .t-section__descr span { color: inherit !important; font-size: inherit !important; line-height: inherit !important; } .t-card__title, .t-card__title a { font-size: 19px !important; line-height: 1.32 !important; font-weight: 600 !important; letter-spacing: -.005em; } .t-card__descr { font-size: 15px !important; line-height: 1.62 !important; } .t-card__descr span { font-size: inherit !important; line-height: inherit !important; } .t-text { font-size: 17px !important; line-height: 1.62 !important; } .t-descr { line-height: 1.6 !important; } /* Заголовки карточек на БЕЛОМ фоне: было #00B4ED = 2.4:1 → HL Black */ #rec1811013871 .t-card__title a, #rec1814255801 .t-card__title a { color: var(--hl-black) !important; } #rec1811013871 .t-card__title a:hover, #rec1814255801 .t-card__title a:hover { color: var(--hl-blue-ink) !important; } #rec1811013871 .t-card__descr, #rec1814255801 .t-card__descr { color: var(--hl-ink-2) !important; } /* ---------- 4. ЗАГОЛОВОК СТРАНИЦЫ (h1–h3 наследуют стили Tilda) ---------- */ #allrecords h1, #allrecords h2, #allrecords h3 { margin: 0; font-weight: inherit; } /* ---------- 5. ШАПКА ---------- */ #rec1810885961 .t-menu-base { border-bottom: 1px solid var(--hl-line); } #rec1810885961 a.t-menu__link-item { font-size: 15px; letter-spacing: .005em; } #rec1810885961 .t-menu-base__list { gap: 40px !important; } @media screen and (max-width:1200px){ #rec1810885961 .t-menu-base__list { gap: 28px !important; } } .t-menu-base__logo a { display: block; line-height: 0; } /* ---------- 6. HERO ---------- */ .hl-hero { position: relative; display: flex; align-items: flex-end; width: 100%; min-height: 600px; height: min(100svh, 820px); box-sizing: border-box; overflow: hidden; } .hl-hero__media { position: absolute; inset: 0; background-size: cover; background-position: center 30%; } .hl-hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(2,10,10,.96) 0%, rgba(2,10,10,.72) 34%, rgba(2,10,10,.18) 70%, rgba(2,10,10,.42) 100%), linear-gradient(to right, rgba(2,10,10,.86) 0%, rgba(2,10,10,.30) 58%, rgba(2,10,10,.10) 100%); } .hl-hero__inner { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 40px var(--hl-s9); box-sizing: border-box; } .hl-hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hl-blue); margin-bottom: var(--hl-s5); } .hl-hero__eyebrow::before { content:""; width: 28px; height: 2px; background: var(--hl-blue); } .hl-hero__title { font-size: clamp(36px, 5.4vw, 68px); line-height: 1.04; letter-spacing: -.025em; font-weight: 700; color: var(--hl-white); margin: 0 0 var(--hl-s5); max-width: 16ch; } .hl-hero__sub { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--hl-text-2); max-width: 58ch; margin: 0 0 var(--hl-s7); } .hl-hero__actions { display: flex; flex-wrap: wrap; gap: var(--hl-s3); } /* ---------- 7. КНОПКИ ---------- */ .hl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; box-sizing: border-box; border: 1px solid transparent; border-radius: var(--hl-radius); font-family:'Roboto',Arial,sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .hl-btn--primary { background: var(--hl-blue); color: var(--hl-black) !important; } .hl-btn--primary:hover { background: var(--hl-blue-hover); } .hl-btn--ghost { background: transparent; color: var(--hl-white) !important; border-color: var(--hl-line-strong); } .hl-btn--ghost:hover { border-color: var(--hl-white); background: rgba(255,255,255,.06); } /* Кнопки Tilda — брендовая геометрия */ .t-btnflex.t-btnflex_type_button { border-radius: var(--hl-radius) !important; font-weight: 700 !important; } /* Главный CTA: было #002B68 на #020A0A = 1.45:1 (кнопка сливалась с фоном) */ #rec1811911551 .t-btnflex.t-btnflex_type_button { background-color: var(--hl-blue) !important; color: var(--hl-black) !important; } #rec1811911551 .t-btnflex.t-btnflex_type_button:hover { background-color: var(--hl-blue-hover) !important; } /* ---------- 8. СТАТУС-ЧИП (заменил кнопки «Семинар прошёл») ---------- */ .hl-status { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--hl-radius); box-sizing: border-box; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; } .hl-status::before { content:""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .hl-status--archive { color: #6B7679; box-shadow: inset 0 0 0 1px var(--hl-line-dark); } .hl-status--upcoming { color: var(--hl-black); background: var(--hl-blue); } .hl-status--live { color: var(--hl-black); background: var(--hl-gold); } .hl-status--dark.hl-status--archive { color: var(--hl-text-3); box-shadow: inset 0 0 0 1px var(--hl-line); } /* ---------- 9. ФАКТ-СТРИП ПОД HERO ---------- */ .hl-facts { background: var(--hl-black); border-bottom: 1px solid var(--hl-line); } .hl-facts__inner { max-width: 1200px; margin: 0 auto; padding: var(--hl-s7) 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hl-s6); box-sizing: border-box; } .hl-fact__k { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hl-blue); margin-bottom: 10px; } .hl-fact__v { font-size: 15px; line-height: 1.5; color: var(--hl-text-2); } /* ---------- 10. ДИСТРИБЬЮТОРЫ ---------- */ .hl-dist { max-width: 1200px; margin: 0 auto; padding: 0 40px; box-sizing: border-box; } .hl-dist__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hl-s5); margin: 0; padding: 0; list-style: none; } .hl-dist__item { margin: 0; } .hl-dist__tile { display: flex; align-items: center; justify-content: center; height: 112px; padding: 20px 24px; box-sizing: border-box; background: var(--hl-white); border-radius: var(--hl-radius); } .hl-dist__tile img { max-height: 44px; max-width: 100%; width: auto; height: auto; display: block; } .hl-dist__name { margin-top: 12px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hl-text-2); } /* ---------- 11. КОНТАКТЫ ---------- */ .hl-contacts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--hl-s6); } .hl-contact__k { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hl-text-3); margin-bottom: 10px; } .hl-contact__v { font-size: 19px; line-height: 1.45; color: var(--hl-text); } .hl-contact__v a { color: var(--hl-text) !important; text-decoration: none; border-bottom: 1px solid var(--hl-line-strong); transition: color .18s ease, border-color .18s ease; } .hl-contact__v a:hover { color: var(--hl-blue) !important; border-color: var(--hl-blue); } .hl-contact__note { font-size: 15px; line-height: 1.6; color: var(--hl-text-2); } /* ---------- 12. ФУТЕР ---------- */ #rec1811450231 .t463__copyright { color: var(--hl-text-3) !important; font-size: 13px !important; line-height: 1.6; } #rec1811450231 { border-top: 1px solid var(--hl-line); } /* ---------- 13. ТОЧЕЧНЫЕ ПРАВКИ БЛОКОВ ---------- */ /* Краснодар (t764) и Санкт-Петербург (t1148): убираем серый #666 (3.4:1) */ #rec2195894611 .t764__descr, #rec2195894611 .t764__descr span { color: var(--hl-text-2) !important; } #rec2195894611 .t764__title { color: var(--hl-text) !important; } #rec2195894611 .t764__title span, #rec2040475431 .t-section__title span, #rec2040475431 .t-section__descr span { line-height: inherit !important; } /* Разделительная метка «— Как это было» */ .hl-kicker { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hl-blue); margin-bottom: 14px; } .hl-meta { display: block; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--hl-text-3); margin-top: 12px; } /* Партнёры и дистрибьюторы: одинаковая оптическая высота логотипов */ #rec1942150261 .t594__img { max-height: 48px; width: auto !important; } /* ---------- 14. ФОКУС / ДОСТУПНОСТЬ ---------- */ #allrecords a:focus-visible, #allrecords button:focus-visible, .hl-btn:focus-visible { outline: 2px solid var(--hl-blue) !important; outline-offset: 3px !important; } /* ---------- 15. ADAPTIVE ---------- */ @media screen and (max-width:1200px){ .hl-hero__inner, .hl-facts__inner, .hl-dist { padding-left: 32px; padding-right: 32px; } .hl-facts__inner { grid-template-columns: repeat(2, 1fr); } .hl-dist__grid { grid-template-columns: repeat(3, 1fr); } } @media screen and (max-width:960px){ .hl-contacts { grid-template-columns: 1fr; gap: var(--hl-s5); } .t-section__descr { font-size: 17px !important; } } @media screen and (max-width:640px){ .hl-hero { height: auto; min-height: 0; padding-top: 128px; } .hl-hero__inner { padding: 0 20px var(--hl-s8); } .hl-hero__title { max-width: none; } .hl-hero__sub { margin-bottom: var(--hl-s6); } .hl-hero__actions { flex-direction: column; align-items: stretch; } .hl-btn { width: 100%; } .hl-facts__inner { grid-template-columns: 1fr; gap: var(--hl-s5); padding: var(--hl-s7) 20px; } .hl-dist { padding: 0 20px; } .hl-dist__grid { grid-template-columns: repeat(2, 1fr); gap: var(--hl-s4); } .hl-dist__tile { height: 88px; padding: 14px 16px; } .hl-dist__tile img { max-height: 32px; } .hl-dist__name { font-size: 11px; } } /* МОБИЛЬНЫЙ МИНИМУМ: Tilda опускала текст до 10px — запрещаем */ @media screen and (max-width:480px), (orientation:landscape) and (max-height:480px){ .t-section__title { font-size: 26px !important; line-height: 1.2 !important; } .t-section__descr { font-size: 16px !important; } .t-card__title, .t-card__title a { font-size: 18px !important; } .t-card__descr { font-size: 15px !important; } .t-text { font-size: 16px !important; } .t-descr_xs, .t-descr_xxs, .t-descr_xl { font-size: 16px !important; } .t-name_xs { font-size: 13px !important; } .hl-contact__v { font-size: 18px; } } /* ---------- 16. СЛУЖЕБНОЕ ---------- */ .hl-visually-hidden { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } /* ---------- 17. ДОБАВЛЕНО: заголовки внутри блоков-отчётов ---------- */ .hl-h2 { font-size: clamp(24px, 2.7vw, 34px) !important; line-height: 1.16 !important; letter-spacing: -.02em; font-weight: 700 !important; color: var(--hl-text) !important; margin: 0 0 6px !important; } /* ---------- 18. ДОБАВЛЕНО: карточки вебинаров (t902) ---------- Кегль вырос с 10–14px до 15–19px, поэтому фиксированные height:400px и колонка изображения 240px больше не подходят. */ #rec1811013871 .t902__wrap { height: auto !important; min-height: 380px; } #rec1811013871 .t902__bgwrapper { width: 260px; } #rec1811013871 .t902__content { padding: 32px 32px 32px; } #rec1811013871 .t902__inner-col { border-radius: var(--hl-radius); } #rec1811013871 .t-card__descr { margin-top: 14px; } @media screen and (max-width:960px){ #rec1811013871 .t902__bgwrapper { width: 100% !important; } #rec1811013871 .t902__content { padding: 24px 20px; } } /* ---------- 19. ДОБАВЛЕНО: карточки мероприятий (t774) ---------- */ #rec1814255801 .t774__wrapper { border-radius: var(--hl-radius); } #rec1814255801 .t774__content { padding: 28px 28px 32px; } #rec1814255801 .t-card__descr p { margin: 0 0 10px; } #rec1814255801 .t-card__descr p:last-child { margin-bottom: 0; } #rec1814255801 .t-card__btn-wrapper { margin-top: 20px; } #rec2195894611 .t764__descr p { margin: 0 0 14px; } #rec2195894611 .t764__descr p:last-child { margin-bottom: 0; } /* ---------- 20. ДОБАВЛЕНО: fallback для svh ---------- */ @supports not (height: 100svh) { .hl-hero { height: min(100vh, 820px); } }