/* ============================================= DESIGN TOKENS ============================================= */ :root { --color-primary: #1a294d; --color-primary-hover: #253a6e; --color-bg: #f8fafc; --color-bg-white: #ffffff; --color-text: #0f172a; --color-text-secondary: #4b5563; --color-text-muted: #6b7280; --color-border: #e2e8f0; --font-primary: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-heading: 'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --container-width: 1500px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 6px; /* Note: was 9999px (round). Theme-wide button & pill unification — all action buttons, badges, category pills are now square-ish (6px). */ --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow-card: 0 10px 25px -5px rgba(45,75,142,.15), 0 8px 10px -6px rgba(45,75,142,.1); --shadow-header: 0 4px 6px -1px rgba(0,0,0,.05), 0 2px 4px -1px rgba(0,0,0,.03); --header-height: 76px; } /* ============================================= BASE RESET ============================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* No overflow on the root or body — both `overflow: hidden` and `overflow-x: clip` break either programmatic scroll, position: sticky, or both, depending on which element they sit on. Sideways bleed should be solved at the offending section, not at the page root. */ html { scroll-behavior: smooth; /* Убираем системную синюю подсветку при тапе на ссылках/кнопках (iOS Safari, Android Chrome). По умолчанию браузер рисует полупрозрачный синий квадрат под пальцем — на наших красных карточках/ссылках это смотрится как дешёвый артефакт. Свой :active / :focus-visible стиль у компонентов остаётся. */ -webkit-tap-highlight-color: transparent; } /* Дублируем на всех интерактивных элементах — iOS в редких случаях игнорирует наследование `-webkit-tap-highlight-color` от (например, на элементах с собственным touch-action или внутри transformed-родителя). */ a, button, input, select, textarea, label, summary, [role="button"], [tabindex] { -webkit-tap-highlight-color: transparent; } body { font-family: var(--font-primary); color: var(--color-text); background-color: var(--color-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; } body.home:not(.blog) { padding-top: 0; } body:not(.home), body.blog { padding-top: var(--header-height); } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); text-decoration: none; transition: color .2s; } ul { list-style: none; } h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; color: var(--color-text); } /* ============================================= CONTAINER ============================================= */ .container { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: 32px; } /* ============================================= SITE HEADER ============================================= */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; } /* Internal (blog, single, pages) */ .site-header--internal { background: var(--color-bg-white); border-bottom: 1px solid var(--color-border); } /* Front page: frosted glass full-width bar (v2 design) */ .site-header--front { position: fixed; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04); border-bottom: 1px solid rgba(0,0,0,.06); } .site-header__shell { position: relative; } /* Internal: full-width shell */ .site-header--internal .site-header__shell { max-width: 100%; } /* Front: standard container, no extra top padding */ .site-header--front .site-header__shell { max-width: var(--container-width); margin-inline: auto; padding-inline: 32px; padding-top: 0; } .site-header__panel { display: flex; align-items: center; } .site-header--internal .site-header__panel { background: transparent; max-width: var(--container-width); margin-inline: auto; padding-inline: 32px; height: var(--header-height); } .site-header--front .site-header__panel { background: transparent; border-radius: 0; box-shadow: none; padding-inline: 0; height: var(--header-height); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 0; } /* Logo */ .site-logo { display: flex; align-items: center; flex-shrink: 0; line-height: 1; /* The wordmark glyph "L" has ~10px of optical sidebearing built into the image; pull the whole logo left so its visible left edge lines up with the container's 32px padding line (and with the breadcrumbs below). */ transform: translateX(-10px); } .site-logo__img, .mmenu__brand-img { display: block; width: 140px; height: auto; /* Перекраска чёрного wordmark'а в brand-red #790000 — chain отсюда: https://codepen.io/sosuke/pen/Pjoqqp Здесь это базовое состояние. */ filter: brightness(0) saturate(100%) invert(11%) sepia(69%) saturate(6081%) hue-rotate(356deg) brightness(96%) contrast(85%); /* Плавный переход к hover-tint'у. Filter chain интерполируется покомпонентно — меняя только brightness(), мы получаем плавное потемнение без скачков. */ transition: filter .25s ease; } /* Hover-цвет логотипа = hover-цвет primary-кнопок. Кнопки на :hover уходят в `linear-gradient(135deg, #5c0000 0%, #790000 100%)` — то есть темнеют. Мы повторяем тот же сдвиг на логотипе, снижая последний brightness() в filter-chain с 96% до 72% — на выходе получается тот же тёмно-красный (~#5c0000). */ .site-logo:hover .site-logo__img, .site-logo:focus-visible .site-logo__img, .mmenu__brand:hover .mmenu__brand-img, .mmenu__brand:focus-visible .mmenu__brand-img { filter: brightness(0) saturate(100%) invert(11%) sepia(69%) saturate(6081%) hue-rotate(356deg) brightness(72%) contrast(85%); opacity: 1; } /* Nav */ .site-navigation { flex: 1; display: flex; justify-content: center; } .site-nav-list { display: flex; align-items: center; gap: 0; list-style: none; } .site-nav-link { display: flex; align-items: center; gap: 4px; padding: 0 16px; font-size: 14px; font-weight: 500; color: #475569; white-space: nowrap; line-height: 20px; } .site-nav-link:hover { color: #790000; } .site-nav-item.is-active .site-nav-link { color: #790000; font-weight: 700; border-bottom: 2px solid #790000; padding-bottom: 2px; } .site-nav-link__icon { display: flex; align-items: center; width: 16px; height: 16px; color: #374151; transition: transform .2s ease; } @media (max-width: 1024px) { .site-nav-link__icon { width: 36px; height: 36px; } } .site-nav-link__icon svg { width: 100%; height: 100%; } /* Desktop dropdown */ .site-nav-item.has-dropdown { position: relative; } .site-nav-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-4px); min-width: 240px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 14px 0 6px; /* 14px top = visual 8px gap via padding, no real gap */ list-style: none; margin: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 1000; } .site-nav-item.has-dropdown:hover .site-nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } /* Invisible bridge: keeps hover alive between link and dropdown */ .site-nav-item.has-dropdown::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 14px; display: none; } .site-nav-item.has-dropdown:hover::after { display: block; } .site-nav-item.has-dropdown:hover .site-nav-link__icon { transform: rotate(180deg); } .site-nav-dropdown li a { display: block; padding: 9px 18px; font-size: 14px; color: #374151; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; } .site-nav-dropdown li a:hover { background: #f3f4f6; color: #790000; } /* CTA button */ .site-header__actions { flex-shrink: 0; /* Pill (.lv-header__awards) + кнопка «GET STARTED» — по вертикальной оси выравниваются по центру друг друга. inline-flex здесь иначе раскладывает их по baseline'у, и pill визуально оказывается выше чем CTA. align-items: center убирает разницу. */ display: inline-flex; align-items: center; gap: 14px; } .site-cta-button { display: inline-flex; align-items: center; padding: 8px 24px; background: linear-gradient(135deg, #790000, #a50000); color: #fff !important; font-size: 14px; font-weight: 600; white-space: nowrap; transition: opacity .2s; } .site-cta-button:hover { opacity: 0.88; } .site-cta-button--pill { border-radius: 6px; } .site-cta-button--square { border-radius: var(--radius-sm); } /* Burger (mobile) */ .burger-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; } .burger-toggle span { display: block; width: 22px; height: 2px; background: var(--color-primary); border-radius: 2px; transition: transform .2s, opacity .2s; } /* Scroll lock when mobile menu is open */ html.body-locked, html.body-locked body { overflow: hidden; } /* ================================================================= Mobile menu — «Editorial Light» (.mmenu) ------------------------------------------------------------------ Раскладка строго лево-выровненная, как в редакционных журналах: логотип + крестик в баре, eyebrow «— Menu», список секций крупным typesetting'ом, sub-меню раскрывается ниже строки. Внизу — наша стандартная красная кнопка с бордером + email / phone / address. Совместимость: - id #mobile-nav-overlay, #mobile-nav-close + классы .mobile-nav-link, .mobile-nav-row, .mobile-dropdown-toggle, .mobile-nav-dropdown остались как hook'и для assets/js/main.js (open / close, dropdown toggle, leaf-link closes overlay). - Все визуальные правила висят на новых классах .mmenu__*, чтобы блок легко перекидывался в style-guide и не пересекался ни с desktop'ской .site-navigation, ни со старым CSS. - Overlay скрывается по умолчанию через opacity/visibility, на десктопе burger в принципе невидим (см. burger-toggle media-query ниже в этом файле), поэтому overlay никогда не открывается на ширинах ≥ 769px и desktop-menu остаётся нетронутым. ================================================================= */ .mobile-nav-overlay { display: flex; flex-direction: column; position: fixed; inset: 0; background: #ffffff; color: var(--color-text); z-index: 200; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Hidden state */ opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s ease, visibility .28s ease; height: 100dvh; } .mobile-nav-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; } .mmenu__inner { display: flex; flex-direction: column; width: 100%; min-height: 100%; padding: 8px 20px 28px; gap: 24px; } /* Top bar — logo (left) + close (right). Высота согласована с обычным site-header__panel, чтобы при открытии не было «прыжка». */ .mmenu__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; } .mmenu__brand { display: inline-flex; align-items: center; text-decoration: none; /* Компенсация боковой пустоты в wordmark'е — «L» съезжает вправо от левого края контейнера, тянем логотип чуть-чуть левее. */ transform: translateX(-14px); } .mmenu__brand-img { display: block; /* Размер logo в мобильном меню — компактнее, чем в основной шапке (там 140px ширина), но цвет (filter) должен совпадать байт-в-байт. Filter уже задан в общем правиле .site-logo__img, .mmenu__brand-img выше — дублируем сюда явно, чтобы поздний блок с собственными width/height не сбивал визуальный эквивалент с основным логотипом. */ width: auto; height: 37.5px; filter: brightness(0) saturate(100%) invert(11%) sepia(69%) saturate(6081%) hue-rotate(356deg) brightness(96%) contrast(85%); transition: filter .25s ease; } .mmenu__close { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--color-border, rgba(25, 28, 29, 0.12)); border-radius: 999px; color: var(--color-text); cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; } .mmenu__close:hover, .mmenu__close:focus-visible { color: var(--lv-primary, #790000); border-color: var(--lv-primary, #790000); } /* Eyebrow — маленький em-dash + капс, отделяет навигацию от бара. */ .mmenu__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(25, 28, 29, 0.55); margin-top: 4px; } /* Список разделов */ .mmenu__nav { width: 100%; } .mmenu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } /* Каждая строка с тонкой нижней линейкой — editorial style. */ .mmenu__row { border-bottom: 1px solid rgba(25, 28, 29, 0.08); /* Staggered fade-in нужен только пока меню открыто. */ opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; } .mmenu__row:first-child { border-top: 1px solid rgba(25, 28, 29, 0.08); } .mobile-nav-overlay.active .mmenu__row { opacity: 1; transform: none; } .mobile-nav-overlay.active .mmenu__row:nth-child(1) { transition-delay: .05s; } .mobile-nav-overlay.active .mmenu__row:nth-child(2) { transition-delay: .10s; } .mobile-nav-overlay.active .mmenu__row:nth-child(3) { transition-delay: .15s; } .mobile-nav-overlay.active .mmenu__row:nth-child(4) { transition-delay: .20s; } .mobile-nav-overlay.active .mmenu__row:nth-child(5) { transition-delay: .25s; } .mobile-nav-overlay.active .mmenu__row:nth-child(6) { transition-delay: .30s; } .mobile-nav-overlay.active .mmenu__row:nth-child(7) { transition-delay: .35s; } .mmenu__rowinner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; } .mmenu__link { flex: 1 1 auto; display: flex; align-items: center; padding: 14px 0; color: var(--color-text); text-decoration: none; transition: color .15s ease; } .mmenu__link:hover, .mmenu__link:focus-visible { color: var(--lv-primary, #790000); } .mmenu__label { /* Space Grotesk используется в editorial-блоках темы (.single-post-main, .blog-page-main) — берём его и здесь для согласованного тона. */ font-family: var(--lv-font-headline, 'Space Grotesk', ui-sans-serif, system-ui, sans-serif); font-size: 28px; line-height: 1.05; letter-spacing: -0.01em; font-weight: 600; } /* Chevron — отдельная нажимная зона, открывает sub-меню. */ .mmenu__chev { flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: rgba(25, 28, 29, 0.6); cursor: pointer; transition: color .15s ease, transform .25s ease; } .mmenu__chev:hover { color: var(--lv-primary, #790000); } .mmenu__chev svg { transition: transform .25s ease; } .mmenu__chev[aria-expanded="true"] svg { transform: rotate(180deg); } /* Sub-menu — раскрывается под строкой. Тонкая левая полоса, лесенка опс-сов. .mobile-nav-dropdown.is-open ставится из main.js. */ .mmenu__sub { display: none; list-style: none; margin: 0 0 12px; padding: 4px 0 14px 18px; border-left: 2px solid rgba(121, 0, 0, 0.18); flex-direction: column; gap: 0; } .mmenu__sub.is-open { display: flex; } .mmenu__sub-link { display: block; padding: 10px 0; color: rgba(25, 28, 29, 0.78); text-decoration: none; font-size: 16px; font-weight: 500; letter-spacing: -0.005em; transition: color .15s ease; } .mmenu__sub-link:hover, .mmenu__sub-link:focus-visible { color: var(--lv-primary, #790000); } /* Footer — CTA + контакты. margin-top: auto прижимает блок к низу overlay, так что email/phone/address всегда видны над home-bar. */ .mmenu__foot { margin-top: auto; display: flex; flex-direction: column; gap: 22px; padding-top: 8px; opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease; } .mobile-nav-overlay.active .mmenu__foot { opacity: 1; transform: none; transition-delay: .42s; } /* CTA — наша стандартная primary-кнопка. Класс .site-cta-button--pill уже наследует красный градиент / border / radius — мы только делаем её full-width внутри foot'а. */ .mmenu__cta { width: 100%; justify-content: center; } /* Email / Phone / Address — каждая строка как пара label + value. */ .mmenu__contacts { display: flex; flex-direction: column; gap: 10px; } .mmenu__contact { display: grid; grid-template-columns: 72px 1fr; column-gap: 16px; align-items: baseline; padding: 10px 0; border-top: 1px solid rgba(25, 28, 29, 0.08); color: var(--color-text); text-decoration: none; transition: color .15s ease; } .mmenu__contact:first-child { border-top: 0; } .mmenu__contact:hover, .mmenu__contact:focus-visible { color: var(--lv-primary, #790000); } .mmenu__contact-key { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(25, 28, 29, 0.55); } .mmenu__contact-val { font-size: 15px; font-weight: 500; line-height: 1.4; color: inherit; word-break: break-word; } /* Address — многострочный nl2br, разрешаем перенос. */ .mmenu__contact--pin .mmenu__contact-val { white-space: normal; } /* Reduced-motion — выключаем staggered transitions. */ @media (prefers-reduced-motion: reduce) { .mobile-nav-overlay, .mmenu__row, .mmenu__foot, .mmenu__chev svg { transition: none !important; } } /* ============================================= SITE FOOTER — shared ============================================= */ .site-footer { padding: 38px 0; } .site-footer__card { background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 41px 32px; max-width: var(--container-width); margin-inline: auto; } .site-footer__grid { display: grid; grid-template-columns: 1.1fr 1.1fr 1.4fr 1fr 1.2fr; gap: 32px; } .site-footer__title a { color: inherit; text-decoration: none; transition: color .15s ease; } .site-footer__title a:hover { color: var(--lv-primary, #790000); text-decoration: underline; } .site-footer__title { font-size: 14px; font-weight: 700; color: var(--color-primary); letter-spacing: .7px; text-transform: uppercase; margin-bottom: 16px; line-height: 1.43; } .site-footer__contact-list { display: flex; flex-direction: column; gap: 12px; list-style: none; } .site-footer__contact-item { display: flex; align-items: flex-start; gap: 8px; } .site-footer__icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--color-text-secondary); display: flex; align-items: flex-start; } .site-footer__icon svg { width: 100%; height: 100%; } .site-footer__contact-item a, .site-footer__contact-item span { font-size: 14px; color: var(--color-text-secondary); line-height: 1.43; } .site-footer__contact-item a:hover { color: var(--color-primary); } .site-footer__links { list-style: none; display: flex; flex-direction: column; gap: 25px; } .site-footer__links li a { font-size: 14px; color: #fff; line-height: 1.43; display: block; text-decoration: none; } .site-footer__links li a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .site-footer__newsletter-copy { font-size: 12px; color: var(--color-text-secondary); line-height: 1.33; margin-bottom: 12px; } .site-footer__newsletter-form { display: flex; gap: 8px; flex-wrap: wrap; } .site-footer__newsletter-form input { flex: 1; min-width: 0; padding: 9px 16px; border: none; border-radius: var(--radius-sm); background: #f0f4f8; font-size: 14px; color: var(--color-text); font-family: var(--font-primary); outline: none; } .site-footer__newsletter-form input::placeholder { color: #9ca3af; } .site-footer__newsletter-form input:focus { outline: 2px solid var(--color-primary); } .site-footer__newsletter-form button { padding: 8px 16px; background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--font-primary); white-space: nowrap; } .site-footer__newsletter-form button:hover { background: var(--color-primary-hover); } /* Footer newsletter inline validation message — `.newsletter-msg` is shared with the rail-card form on single-post pages; both forms use the same JS handler in main.js. */ .site-footer__newsletter-form { position: relative; } .site-footer__newsletter-msg { flex: 1 0 100%; margin: 6px 0 0; font-size: 12px; line-height: 1.4; min-height: 1em; color: #c9ccd0; } .site-footer__newsletter-msg.is-error { color: #ffb4a8; } .site-footer__newsletter-msg.is-success { color: #86efac; } .site-footer__bottom { border-top: 1px solid var(--color-border); margin-top: 32px; padding-top: 24px; padding-bottom: 8px; display: flex; flex-direction: column; align-items: center; gap: 12px; } /* Visual order in the footer-bottom strip (top → bottom): 1. social icons 2. legal nav (Cookies / Privacy / Terms) 3. copyright (always at the very bottom) The PHP markup keeps copyright first (semantic / SEO reading order), CSS `order` rearranges only the visual layout. */ .site-footer__social { order: 1; } .site-footer__links--legal { order: 2; } .site-footer__copyright { order: 3; font-size: 14px; color: #9ca3af; text-align: center; } .site-footer__social { display: flex; gap: 16px; align-items: center; } .site-footer__social a { display: flex; width: 20px; height: 20px; color: var(--color-text-secondary); } .site-footer__social a svg { width: 100%; height: 100%; } .site-footer__social a:hover { color: var(--color-primary); } /* ============================================= SITE FOOTER — dark variant (single post) ============================================= */ .site-footer--dark { background: #111827; } .site-footer--dark .site-footer__card { background: transparent; border-color: #1f2937; border-radius: var(--radius-lg); box-shadow: none; padding: 49px 32px 10px; max-width: var(--container-width); } .site-footer--dark .site-footer__title { color: #fff; letter-spacing: .35px; } /* Footer link policy — every inside the footer is always white, underline appears only on hover. Applies to contact list, link groups, title-anchors, legal row, copyright row, and social labels. */ .site-footer--dark .site-footer__contact-item a, .site-footer--dark .site-footer__contact-item span, .site-footer--dark .site-footer__contact-list a { color: #fff; text-decoration: none; } .site-footer--dark .site-footer__icon { color: #fff; } .site-footer--dark .site-footer__contact-item a:hover, .site-footer--dark .site-footer__contact-list a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .site-footer--dark .site-footer__links li a { color: #fff; text-decoration: none; } .site-footer--dark .site-footer__links li a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } /* Title-anchors (Services / Blog / Contact Us / Resources) — always white. */ .site-footer--dark .site-footer__title, .site-footer--dark .site-footer__title a { color: #fff; text-decoration: none; } .site-footer--dark .site-footer__title a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .site-footer__links--legal { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 24px; } .site-footer--dark .site-footer__links--legal a { color: #fff; font-size: 14px; text-decoration: none; text-underline-offset: 3px; white-space: nowrap; } .site-footer--dark .site-footer__links--legal a:hover { color: #fff; text-decoration: underline; } /* WCAG AAA: #9ca3af on #111827 = ~6.95:1 (just below 7:1 for 12px small text). #cbd5e1 (slate-300) on #111827 = ~10:1 → AAA solid pass. */ .site-footer--dark .site-footer__newsletter-copy { color: #cbd5e1; } .site-footer--dark .site-footer__newsletter-form input { background: #1f2937; border: 1px solid #374151; color: #fff; } .site-footer--dark .site-footer__newsletter-form input::placeholder { color: #6b7280; } .site-footer--dark .site-footer__newsletter-form button { background: #4b5563; } .site-footer--dark .site-footer__newsletter-form button:hover { background: #6b7280; } .site-footer--dark .site-footer__bottom { border-top-color: #1f2937; } .site-footer--dark .site-footer__social a { color: #fff; } .site-footer--dark .site-footer__social a:hover { color: #fff; opacity: 0.8; } .site-footer--dark .site-footer__copyright { color: #fff; } .site-footer--dark .site-footer__copyright a { color: #fff; text-decoration: none; } .site-footer--dark .site-footer__copyright a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } /* ============================================= HOME PAGE ============================================= */ .front-page-main { background: var(--color-bg); overflow-x: hidden; } /* --- Hero --- */ .home-hero { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 128px; gap: 40px; } .home-hero__container { display: flex; flex-direction: column; align-items: center; gap: 40px; } .home-hero__art { position: relative; width: 512px; height: 512px; flex-shrink: 0; } .home-hero__line { position: absolute; top: 50%; width: 160px; height: 1px; border-top: 1.5px dashed rgba(26,41,77,.2); } .home-hero__line--left { right: calc(100% + 16px); } .home-hero__line--right { left: calc(100% + 16px); } .home-hero__visual { width: 100%; height: 100%; } .home-hero__image { width: 512px; height: 512px; object-fit: contain; } .home-hero__headline { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; color: #fff; } .home-hero__headline span { display: block; font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: -.02em; text-shadow: 0 2px 2px rgba(0,0,0,.06), 0 4px 3px rgba(0,0,0,.07); } .home-hero__copy { text-align: center; max-width: 450px; } .home-hero__copy p { font-size: 18px; font-weight: 500; color: #4b5563; line-height: 1.56; } /* --- Services sections --- */ .home-services { width: 100%; } .home-services__container { display: flex; flex-direction: column; gap: 24px; padding-bottom: 80px; padding-top: 64px; } /* 3-column grid */ .home-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .service-card { background: #f0f4f8; border: 1px solid rgba(226,232,240,.5); border-radius: var(--radius-lg); padding: 33px; display: flex; flex-direction: column; box-shadow: var(--shadow-card); } .service-card__heading h2 { font-size: 20px; font-weight: 800; color: var(--color-primary); letter-spacing: -.6px; line-height: 1.33; margin-bottom: 24px; text-transform: uppercase; text-align: center; } .service-card__media { display: flex; align-items: center; justify-content: center; min-height: 200px; margin-bottom: 24px; } .service-card__media img { width: 200px; height: 200px; object-fit: cover; box-shadow: 0 4px 3px rgba(0,0,0,.1), 0 10px 8px rgba(0,0,0,.04); border-radius: 4px; } .service-card__body { flex: 1; } .service-card__body p { font-size: 14px; color: #334155; line-height: 1.625; margin-bottom: 8px; } .service-card__button { display: inline-flex; padding: 10px 24px; border-radius: var(--radius-pill); background: var(--color-primary); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; margin-top: 12px; margin-right: auto; margin-left: 0; } .service-card__button:hover { background: var(--color-primary-hover); color: #fff; } /* 2-column feature cards */ .home-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .feature-card { position: relative; border-radius: var(--radius-lg); padding: 31px 32px 32px; overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; min-height: 280px; } .feature-card--soft { background: #d5def2; } .feature-card--light-gray { background: #e2e8f0; } .feature-card--light-navy { background: #d1daeb; } .feature-card--dark { background: var(--color-primary); } .feature-card--soft::before, .feature-card--light-navy::before { content: ''; position: absolute; inset: 0; pointer-events: none; } .feature-card--soft::before { background: linear-gradient(-51deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 100%); } .feature-card--light-navy::before { background: linear-gradient(149deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 100%); } .feature-card--dark::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 100%); pointer-events: none; } .feature-card__content { position: relative; z-index: 1; max-width: 60%; display: flex; flex-direction: column; gap: 12px; flex: 1; } .feature-card__content h2 { font-size: 30px; font-weight: 800; letter-spacing: -.75px; line-height: 1.25; color: var(--color-primary); text-transform: uppercase; } .feature-card--dark .feature-card__content h2 { color: #fff; } .feature-card__content p { font-size: 12px; color: rgba(26,41,77,.8); line-height: 1.625; } .feature-card--dark .feature-card__content p { color: #d1d5db; } .feature-card__button { display: inline-flex; align-self: flex-start; padding: 8px 20px; border-radius: var(--radius-pill); background: var(--color-primary); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; margin-top: auto; } .feature-card__button:hover { background: var(--color-primary-hover); color: #fff; } .feature-card--dark .feature-card__button { background: #fff; color: var(--color-primary); } .feature-card--dark .feature-card__button:hover { background: #f0f4f8; } /* Feature card image */ .feature-card__media { position: absolute; bottom: 16px; right: 16px; z-index: 0; } .feature-card__media img { width: 160px; height: 160px; object-fit: contain; box-shadow: 0 8px 5px rgba(0,0,0,.08), 0 20px 13px rgba(0,0,0,.03); } /* ============================================= RESPONSIVE — shared / header / footer / home ============================================= */ /* ---- Header collapses at 1024px ---- */ @media (max-width: 1024px) { .site-navigation, .site-header__actions { display: none; } .burger-toggle { display: flex; } .site-header--internal .site-header__panel { padding-inline: 20px; } } @media (max-width: 768px) { .site-header--front .site-header__shell { padding-inline: 16px; } .site-header--front .site-header__panel { height: var(--header-height); padding-inline: 0; } /* Padding inside the panel is 0 on mobile — the logo's translateX(-10px) already compensates for the wordmark sidebearing, and content blocks below add their own 16px padding via the central mobile media query. This lets the logo visually share the same left edge as full-width cards on /blog/ and other listing pages. */ .site-header--internal .site-header__panel { padding-inline: 0; } :root { --header-height: 60px; } } /* ---- Footer ---- */ @media (max-width: 1024px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } } @media (max-width: 640px) { .site-footer__card { padding: 28px 20px; } .site-footer__grid { grid-template-columns: 1fr; gap: 50px; } .site-footer__newsletter-form { flex-direction: column; } .site-footer__newsletter-form button { width: 100%; padding: 11px; } .site-footer--dark .site-footer__card { padding: 32px 20px; } } /* ---- Home hero ---- */ @media (max-width: 1024px) { .home-hero__line { display: none; } .home-hero__art { width: 380px; height: 380px; } .home-hero__image { width: 380px; height: 380px; } } @media (max-width: 768px) { .home-hero { padding-top: 72px; } .home-hero__art { width: 280px; height: 280px; } .home-hero__image { width: 280px; height: 280px; } .home-hero__headline span { font-size: 30px; } .home-hero__copy p { font-size: 16px; } } @media (max-width: 480px) { .home-hero { padding-top: 56px; gap: 24px; } .home-hero__art { width: 220px; height: 220px; } .home-hero__image { width: 220px; height: 220px; } .home-hero__headline span { font-size: 22px; } } /* ---- Service cards ---- */ @media (max-width: 1024px) { .home-services__grid { grid-template-columns: repeat(2, 1fr); } .home-feature-grid { grid-template-columns: 1fr; } .feature-card__media { bottom: 12px; right: 12px; } .feature-card__media img { width: 120px; height: 120px; } } @media (max-width: 640px) { .home-services__grid { grid-template-columns: 1fr; } .home-services__container { padding-top: 40px; padding-bottom: 48px; } .service-card { padding: 24px; } .service-card__media { min-height: 160px; } .service-card__media img { width: 160px; height: 160px; } .feature-card { min-height: 200px; padding: 24px; } .feature-card__content { max-width: 70%; } .feature-card__content h2 { font-size: 22px; } .feature-card__media img { width: 96px; height: 96px; } } @media (max-width: 480px) { .feature-card__content { max-width: 100%; } .feature-card__media { display: none; } /* too cramped on small phones */ } /* ============================================= SCROLL ANIMATIONS ============================================= */ [data-animate] { opacity: 0; transform: translateY(22px); transition: opacity 1.1s cubic-bezier(.16, 1, .3, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--animate-delay, 0ms); } [data-animate].is-visible { opacity: 1; transform: none; } /* Respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { [data-animate] { opacity: 1; transform: none; transition: none; } } /* ============================================= BREADCRUMBS — global .pg-crumbs (overridden by .blog-page-main / .single-post-main scopes) ============================================= */ .pg-crumbs { max-width: 1500px; margin: 0 auto; /* Inline padding 32px matches .site-header__panel padding-inline so the first breadcrumb sits on the same vertical line as the logo above. */ padding: 22px 32px 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--lv-ink-muted, #6b7280); } .pg-crumbs a { color: var(--lv-ink-muted, #6b7280); text-decoration: none; transition: color .15s ease; } .pg-crumbs a:hover { color: var(--lv-primary, #790000); } .pg-crumbs .sep { color: var(--lv-ink-faint, #9aa1ab); opacity: 0.6; } .pg-crumbs .current { color: var(--lv-ink, #191c1d); font-weight: 500; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 640px) { .pg-crumbs { padding: 14px 16px 0; font-size: 12px; } .pg-crumbs .current { max-width: 160px; } } /* ============================================= DEFAULT PAGE (Terms, Privacy, etc.) ============================================= */ .page-default-main { padding-bottom: 100px; } .page-default-container { max-width: 760px; } .page-default-header { padding: 40px 0 32px; border-bottom: 1px solid var(--color-border); margin-bottom: 40px; } .page-default-title { font-size: 40px; font-weight: 800; color: var(--color-text); letter-spacing: -.03em; line-height: 1.15; margin-bottom: 12px; } .page-default-updated { font-size: 13px; color: var(--color-text-muted, #6b7280); } /* Prose styles for wp editor content */ .text-content { font-size: 16px; line-height: 1.75; color: var(--color-text); } .text-content h2 { font-size: 24px; font-weight: 700; color: var(--color-text); letter-spacing: -.02em; margin: 2em 0 .75em; line-height: 1.3; } .text-content h3 { font-size: 19px; font-weight: 700; color: var(--color-text); margin: 1.75em 0 .6em; line-height: 1.35; } .text-content h4 { font-size: 16px; font-weight: 700; color: var(--color-text); margin: 1.5em 0 .5em; } .text-content p { margin-bottom: 1.25em; } .text-content a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; } .text-content a:hover { opacity: .75; } .text-content ul, .text-content ol { padding-left: 1.5em; margin-bottom: 1.25em; } .text-content ul { list-style: disc; } .text-content ol { list-style: decimal; } .text-content li { margin-bottom: .4em; } .text-content blockquote { border-left: 3px solid var(--color-primary); margin: 1.5em 0; padding: .75em 1.25em; background: var(--color-bg-white); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--color-text-muted, #6b7280); font-style: italic; } .text-content hr { border: none; border-top: 1px solid var(--color-border); margin: 2em 0; } .text-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5em; font-size: 14px; } .text-content th, .text-content td { padding: 10px 14px; border: 1px solid var(--color-border); text-align: left; } .text-content th { background: var(--color-bg-white); font-weight: 600; } .text-content strong { font-weight: 700; } .text-content em { font-style: italic; } .text-content code { font-family: 'Courier New', monospace; font-size: .875em; background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: 3px; padding: .15em .4em; } .text-content pre { background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1.25em; overflow-x: auto; margin-bottom: 1.5em; } .text-content pre code { background: none; border: none; padding: 0; font-size: 13px; } /* First heading after header needs less top margin */ .text-content > h2:first-child, .text-content > h3:first-child { margin-top: 0; } @media (max-width: 768px) { .page-default-title { font-size: 30px; } .page-default-header { padding: 28px 0 24px; margin-bottom: 28px; } .text-content { font-size: 15px; } } @media (max-width: 480px) { .page-default-title { font-size: 24px; } .text-content h2 { font-size: 20px; } .text-content h3 { font-size: 17px; } } /* .cmplz-subtitle — Complianz sub-heading inside .text-content */ .text-content .cmplz-subtitle { font-weight: 700; color: var(--color-text); margin-top: 1.25em; margin-bottom: .4em; font-style: normal; } /* ============================================= FRONT PAGE (fp-v2) ============================================= */ .fp-v2 { font-family: var(--font-primary); color: #191c1d; } .fp-v2 *::selection { background: #a50000; color: #fff; } .isometric-card { transition: box-shadow 0.4s ease; } .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* ============================================= ACCESSIBILITY ============================================= */ /* Screen-reader-only utility Visually hidden but readable by assistive technology */ .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .screen-reader-text:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; } /* Skip-to-content link Invisible until focused via keyboard — then appears at top-left */ .skip-link { position: fixed; top: -100%; left: 16px; z-index: 99999; padding: 12px 24px; background: var(--color-primary); color: #fff !important; font-size: 14px; font-weight: 700; border-radius: 0 0 var(--radius-sm) var(--radius-sm); text-decoration: none; transition: top .15s ease; outline: none; } .skip-link:focus { top: 0; outline: 3px solid #fff; outline-offset: -3px; } /* ── Focus-visible: universal rule ─────────────── */ /* Remove default outline only when :focus-visible is supported. Browsers that don't support :focus-visible keep the default. */ :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; border-radius: 2px; } /* ── Interactive element overrides ──────────────── */ /* Buttons */ button:focus-visible, [type="button"]:focus-visible, [type="reset"]:focus-visible, [type="submit"]:focus-visible, .site-cta-button:focus-visible, .burger-toggle:focus-visible, .mobile-nav-close:focus-visible, .blog-page-cat-pill:focus-visible, .single-post-share-btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; } /* Links */ a:focus-visible, .site-nav-link:focus-visible, .mobile-nav-link:focus-visible, .site-logo:focus-visible, .blog-page-card-title a:focus-visible, .blog-page-card-category:focus-visible, .pg-crumbs a:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; border-radius: 2px; } /* Inputs & textareas */ input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 0; border-color: var(--color-primary); } /* Override the old outline:none on newsletter input */ .site-footer__newsletter-form input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 0; } /* CTA button on dark background (CTA section, footer) — white outline */ .bg-on-surface a:focus-visible, .site-footer .site-cta-button:focus-visible { outline-color: #fff; } /* ── Reduced motion ─────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } /* Keep VanillaTilt static */ .isometric-card { transform: none !important; transition: none !important; } /* Keep fade-up elements visible immediately */ [data-animate] { opacity: 1 !important; transform: none !important; } } /* ============================================= TABLET/MOBILE — unify horizontal padding of EVERY page-level container with `.site-header__panel` so the logo lines up with the content below. Header uses 20px (≤1024px) and 16px (≤768px) — content must match. ============================================= */ @media (max-width: 1024px) { .container, .ssv2-container, .svc-k__container, .pg-shell, .blog-page-main .pg-shell, .pg-crumbs, .blog-page-main .pg-crumbs, .single-post-main .pg-crumbs, .single-post-main .article-shell, .lv-about .about-hero__inner, .fp-hero-v2__container, .cta-band, .cta-band__inner, .contacts-v4__crumbs-inner, .contacts-v4__hero, .contacts-v4__grid, .contacts-v4__faq, .faq-page-main .faq-page__hero, .faq-page-main .faq-page__layout, .legal-page-main .legal-shell { padding-left: 20px !important; padding-right: 20px !important; } .ssv2-container { padding: 0 20px !important; } } @media (max-width: 768px) { .container, .ssv2-container, .svc-k__container, .pg-shell, .blog-page-main .pg-shell, .pg-crumbs, .blog-page-main .pg-crumbs, .single-post-main .pg-crumbs, .single-post-main .article-shell, .fp-hero-v2__container, .cta-band, .cta-band__inner, .contacts-v4__crumbs-inner, .contacts-v4__hero, .contacts-v4__grid, .contacts-v4__faq, .faq-page-main .faq-page__hero, .faq-page-main .faq-page__layout, .legal-page-main .legal-shell { padding-left: 16px !important; padding-right: 16px !important; } .ssv2-container { padding: 0 16px !important; } /* About hero content runs edge-to-edge on mobile — the section has a coloured background, so we want the eyebrow + headline to align with the wordmark logo (which sits at viewport edge 0 on mobile via `.site-header__panel { padding-inline: 0 }`). */ .lv-about .about-hero__inner { padding-left: 0 !important; padding-right: 0 !important; } /* Logo wordmark compensation (translateX(-10px)) works the same way on mobile as on desktop — it shifts the box so the visible "L" glyph lines up with the container padding edge (16px on mobile). Don't remove it here. */ } /* ================================================================= Disable scroll-reveal / fade-up animations globally. These reveal helpers ship with `opacity: 0` + `transform: translateY(...)` and only become visible once IntersectionObserver in their accompanying JS (about-page.js, service-single.js, main.js) adds `.is-in` / `.is-visible`. We want all content visible immediately, so force the "revealed" state regardless of the toggle class. We keep this isolated to the reveal hooks themselves — hover/active effects on buttons (e.g. `transform: translateY(-1px)`) and the decorative @keyframes on hero blobs are not matched here. ================================================================= */ .about-reveal, .ssv2-reveal, [data-animate] { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } /* ================================================================= EYEBROW DOT PULSE — unified gentle ring pulse on every red eyebrow pip across the theme. about-page.css and blog-page.css define their own keyframes (lv-about-pulse / lv-pulse-dot) which keep working; this block adds the same effect to the dots that didn't have one (home hero "INTELLIGENT INFRASTRUCTURE", service-single eyebrow). ================================================================= */ @keyframes lev-pulse-dot { 0%, 100% { box-shadow: 0 0 0 3px rgba(121, 0, 0, 0.16); } 50% { box-shadow: 0 0 0 6px rgba(121, 0, 0, 0.05); } } .fp-hero-v2__eyebrow-dot, .ssv2-eyebrow__dot { animation: lev-pulse-dot 2.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .fp-hero-v2__eyebrow-dot, .ssv2-eyebrow__dot { animation: none; } } /* ================================================================= UNIFIED BUTTON STYLES — single visual language across the theme. Only base appearance is unified here (red gradient/color, border-radius, hover transform/shadow). Padding, font-size and font-weight are left per-context because button sizes intentionally differ between header CTA, hero, card actions and form submits. Dark-on-dark buttons (`.cta-section__btn-*` inside the dark single-post CTA, `.fp-hero-cf__btn--*` inside the dark home-confident hero) are EXCLUDED — their backgrounds need different contrast. ================================================================= */ /* ---- Primary (filled red) ----------------------------------------- */ .site-cta-button, .fp-hero-v2__btn--primary, .blog-about__cta-btn--primary, .rail-newsletter__cta, .faq-page__cta-btn, .author-bio__btn--primary, .cta-services__btn-primary, .svc-k__cta-button, .ssv2-btn--primary, .cta-band__btn-primary, .cta-section__btn-primary, .legal-accept__btn--primary, .contacts-v4__send, .contacts-v4__form-card .wpcf7-submit, .contacts-v4__form-card input[type="submit"], .ssv2-cta__form .wpcf7-submit, .ssv2-cta__form input[type="submit"] { background: linear-gradient(135deg, #790000 0%, #a50000 100%) !important; color: #ffffff !important; border: 1px solid transparent !important; border-radius: 6px !important; text-decoration: none !important; transition: background-color .2s ease, transform .2s ease, box-shadow .25s ease, opacity .2s ease !important; } .site-cta-button:hover, .fp-hero-v2__btn--primary:hover, .blog-about__cta-btn--primary:hover, .rail-newsletter__cta:hover, .faq-page__cta-btn:hover, .author-bio__btn--primary:hover, .cta-services__btn-primary:hover, .svc-k__cta-button:hover, .ssv2-btn--primary:hover, .cta-band__btn-primary:hover, .cta-section__btn-primary:hover, .legal-accept__btn--primary:hover, .contacts-v4__send:hover, .contacts-v4__form-card .wpcf7-submit:hover, .contacts-v4__form-card input[type="submit"]:hover, .ssv2-cta__form .wpcf7-submit:hover, .ssv2-cta__form input[type="submit"]:hover { background: linear-gradient(135deg, #5c0000 0%, #790000 100%) !important; color: #ffffff !important; transform: translateY(-1px); box-shadow: 0 14px 20px -5px rgba(121, 0, 0, 0.28), 0 6px 8px -4px rgba(121, 0, 0, 0.22) !important; opacity: 1 !important; } .site-cta-button:focus-visible, .fp-hero-v2__btn--primary:focus-visible, .blog-about__cta-btn--primary:focus-visible, .rail-newsletter__cta:focus-visible, .faq-page__cta-btn:focus-visible, .author-bio__btn--primary:focus-visible, .cta-services__btn-primary:focus-visible, .svc-k__cta-button:focus-visible, .ssv2-btn--primary:focus-visible, .cta-band__btn-primary:focus-visible, .cta-section__btn-primary:focus-visible, .legal-accept__btn--primary:focus-visible, .contacts-v4__send:focus-visible, .contacts-v4__form-card .wpcf7-submit:focus-visible, .contacts-v4__form-card input[type="submit"]:focus-visible, .ssv2-cta__form .wpcf7-submit:focus-visible, .ssv2-cta__form input[type="submit"]:focus-visible { outline: 2px solid #790000 !important; outline-offset: 3px !important; } /* ---- Ghost (transparent, outlined) — light context ---------------- */ .fp-hero-v2__btn--ghost, .blog-about__cta-btn--ghost, .ssv2-btn--ghost, .cta-band__btn-ghost { background: transparent !important; color: #09090b !important; border: 1px solid #e4e4e7 !important; border-radius: 6px !important; transition: background-color .2s ease, border-color .2s ease, color .2s ease !important; } .fp-hero-v2__btn--ghost:hover, .blog-about__cta-btn--ghost:hover, .ssv2-btn--ghost:hover, .cta-band__btn-ghost:hover { background: #fafafa !important; border-color: #d4d4d8 !important; color: #09090b !important; } .fp-hero-v2__btn--ghost:focus-visible, .blog-about__cta-btn--ghost:focus-visible, .ssv2-btn--ghost:focus-visible, .cta-band__btn-ghost:focus-visible { outline: 2px solid #790000 !important; outline-offset: 3px !important; }