/* ===================================================================== TT-NDT · TOKENS · v1 --------------------------------------------------------------------- КУДА КЛАСТЬ assets/css/tokens.css. Подключается первым в каждой страницы, до стилей блоков. ЧТО ЭТО ДАЁТ Все цвета, шрифты, длительности и координаты сетки живут в одном месте. Блоки перестают возить копии значений и расходиться. МИГРАЦИЯ БЕЗ ПОЛОМОК Внизу файла — раздел «мост совместимости». Он раздаёт старые имена переменных (--paper, --ink, --cold, --accent, --line ...) из новых токенов. Блокам достаточно получить один атрибут: data-tt-theme="dark" тёмные блоки, фон #3B3B3B data-tt-theme="paper" светлые блоки, фон #C9C9C9 После этого локальный :root внутри блока можно удалить — старые var(--paper) и var(--ink) продолжат работать. Переписывать 18 блоков на новые имена не обязательно и не срочно. ПРИНЯТЫЕ РЕШЕНИЯ · акцент — #FF5C17. #FF5A00 в hero главной и #FF5A14 заменить. · текст поверх оранжевой заливки — #333333. В 27 местах стоит #000, заменить на #333333 или на var(--tt-on-accent). · светлый текст — #DCDCDC. Блок наборов на #E5E5E5, заменить. Через мост это чинится само: --title и --btn берут #DCDCDC. · фон светлых блоков — #DCDCDC вместо #C9C9C9. Стал светлее. · текст на светлом — #333333 вместо #2D2D2D. Тот же, что на акценте. · приглушённый пункт меню — #6A6A6A вместо #5B5B5B. Тот же, что линии. · #343434 убран: это была заглушка под фотографии, а не цвет системы. · сила линий — .18 на тёмном, .09 на светлом. Раньше было .5/.18 вперемешку и заметно ярче. Линии — фон, а не элемент кадра. · Для service-строк используется Manrope; сторонние гарнитуры не нужны. · Manrope 700 убран, сведён к 800 — 9 мест. · Space Mono 400 убран, сведён к 700 — 5 мест. · один кегль заголовка — 80. Было четыре: 80, 74, 65.009 и 58. Исключение одно: название услуги на её странице остаётся 32, иначе строка не влезает в поля холста. · кегль 17 у кнопки отправки сведён к 16. Соседние ступени в шкале не нужны, а текст в кнопке центрован — ширина не поедет. · мобильная версия — следующий этап, блоки пока жёстко 1200. ПОРЯДОК ЗАГРУЗКИ Шрифты объявлены ниже через @font-face, файлы свои. Google Fonts больше не используется — из блоков подключения убраны. ===================================================================== */ /* ===================================================================== ШРИФТЫ · свои файлы, не Google --------------------------------------------------------------------- Файлы лежат в assets/fonts/. Имена ниже совпадают с тем, как их отдаёт google-webfonts-helper, — переименовывать ничего не нужно. Нужны четыре файла: manrope-v20-latin-regular.woff2 400 manrope-v20-latin-800.woff2 800 space-mono-v17-latin-700.woff2 700 dotgothic16-v21-latin-regular.woff2 400 Если у вас .ttf вместо .woff2 — работать будет, но файлы тяжелее в три-четыре раза. Тогда поменяйте расширение в url() и format("woff2") на format("truetype"). font-display: swap означает, что текст покажется сразу системным шрифтом и подменится, когда свой догрузится. Без этого страница пару секунд стоит пустой. ===================================================================== */ @font-face { font-family: "Manrope"; src: url("../fonts/manrope-v20-latin-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Manrope"; src: url("../fonts/manrope-v20-latin-800.woff2") format("woff2"); font-weight:800; font-style: normal; font-display: swap; } @font-face { font-family: "Space Mono"; src: url("../fonts/space-mono-v17-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "DotGothic16"; src: url("../fonts/dotgothic16-v21-latin-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* ============================================================ ЦВЕТ · сырые значения Единственное место, где вообще встречается hex. ============================================================ */ /* ------------------------------------------------------------ Шесть значений на весь сайт. После слияний одно и то же число часто играет две роли — это нормально и намеренно: #DCDCDC текст на тёмном И фон светлых блоков #333333 текст на светлом И текст поверх оранжевой заливки #6A6A6A линии сетки И невыбранный пункт меню ------------------------------------------------------------ */ --tt-c-graphite: #3b3b3b; /* фон тёмных блоков */ --tt-c-chalk: #dcdcdc; /* светлое: текст и фон светлых блоков */ --tt-c-chalk-dim: #afafaf; /* вторичный текст на тёмном */ --tt-c-ink: #333333; /* тёмное: текст на светлом и на акценте */ --tt-c-line: #6a6a6a; /* линии и приглушённый пункт списка */ --tt-c-orange: #ff5c17; /* акцент */ /* производные прозрачности. Проценты от #DCDCDC и #333333 — отдельных hex под них не заводим */ --tt-c-chalk-mute: rgba(220, 220, 220, .58); --tt-c-ink-dim: rgba(51, 51, 51, .55); /* подписи на светлом */ --tt-c-ink-off: rgba(51, 51, 51, .52); /* неактивный пункт */ --tt-c-ink-tag: rgba(51, 51, 51, .83); /* теги под фото */ /* ============================================================ ЦВЕТ · семантика В блоках использовать эти, а не сырые. Значения переопределяются темой ниже. ============================================================ */ --tt-surface: var(--tt-c-graphite); --tt-text: var(--tt-c-chalk); --tt-text-dim: var(--tt-c-chalk-dim); --tt-text-mute: var(--tt-c-chalk-mute); --tt-accent: var(--tt-c-orange); --tt-on-accent: var(--tt-c-ink); /* ============================================================ ЛИНИИ Вертикали и разделители. Толщина 0.5px даёт на ретине честный волосок; на 1x браузер округляет вверх, это ожидаемо. Сила линий зависит от темы и задаётся ровно в двух местах — в блоках [data-tt-theme] ниже. тёмный .18 линии присутствуют, но не спорят с контентом светлый .09 линии на пределе видимости: на #C9C9C9 серый контраст выше, и текст поверх линии должен читаться без помех Менять только эти два числа. Внутри блоков --tt-line-op не переопределять — иначе всё вернётся к прежнему разбросу. ============================================================ */ --tt-line: var(--tt-c-line); --tt-line-op: .18; /* дефолт, если тема не задана */ --tt-line-w: .5px; /* разделитель строк реестра. Border не берёт opacity, поэтому прозрачность зашита в само значение */ --tt-rule: rgba(106, 106, 106, .18); /* ============================================================ ШРИФТ Три гарнитуры, три роли, больше не заводить. Space Mono моноширинный — на нём держатся все заголовки с побуквенной расшифровкой: строка не дышит при переборе. Глиф Space Mono = 0.612em. Ширина строки = знаки × кегль × 0.612. Отсюда все магические 480.07 и 48.007 в блоках. ============================================================ */ --tt-font-display: "Space Mono", monospace; /* заголовки, кнопки, почта */ --tt-font-body: "Manrope", sans-serif; /* абзацы, списки, поля */ --tt-font-tech: "DotGothic16", sans-serif; /* подписи, нумерация, теги */ --tt-glyph-mono: .612; /* ширина знака Space Mono. Измерено по самому файлу шрифта: 612 единиц при upem 1000. Раньше в вёрстке стояло .60009 — ошибка 2%, на строке в 14 знаков это 13px. */ /* ------------------------------------------------------------ КЕГЛИ. Размер и начертание — разные токены. Один кегль может обслуживать две роли с разным весом, это нормально: --tt-size-l 16 работает и в полях формы (400), и в списке приборов (700). ------------------------------------------------------------ */ /* заголовки */ --tt-size-hero: 80px; /* витринный заголовок в одно-два слова: [NDT], [SERVICES], RENT EQUIPMENT, SERVICE REQUEST. Всегда Space Mono 700. Раньше здесь было четыре кегля — 80, 74, 65.009 и 58. Теперь один. */ --tt-size-title: 32px; /* полное название услуги на её странице. Не 80: строка в 25 знаков при 80 даёт 1200px и вылезает за поля холста. */ /* текст */ --tt-size-l: 16px; /* список приборов (800), поля формы (400), кнопка отправки (700) */ --tt-size-m: 14px; /* название услуги в списке на главной */ --tt-size-s: 12px; /* рабочий кегль, самый частый на сайте */ --tt-size-xs: 12px; /* политика, сноски */ --tt-size-2xs: 10px; /* подписи DotGothic, нумерация, теги */ --tt-lh-tight: 1; /* заголовки, кнопки */ --tt-lh-snug: 1.2; --tt-lh-text: 1.25; /* абзацы */ --tt-lh-list: 25px; /* строка списка приборов: ритм, а не типографика — поэтому в px */ /* Начертания. Задаются отдельно от кегля, но не свободно: каждая гарнитура имеет ровно свой набор весов. */ --tt-w-regular: 400; /* только Manrope: абзацы, поля формы */ --tt-w-bold: 700; /* только Space Mono: заголовки, кнопки, почта, навигация */ --tt-w-black: 800; /* только Manrope: подзаголовки, список приборов, вопросы FAQ, активный пункт */ /* ============================================================ ДВИЖЕНИЕ Два вида ускорения. Первое — рабочее, на всех наведениях и раскрытиях. Второе — только на въезде скобок в hero: оно длиннее по хвосту и заметно на 2.2s, на 0.2s разницы нет. ============================================================ */ --tt-ease: cubic-bezier(.2, 1, .2, 1); --tt-ease-entry: cubic-bezier(.22, 1, .36, 1); --tt-dur-snap: .16s; /* подмена подписи на кнопке */ --tt-dur-tint: .18s; /* смена цвета, появление */ --tt-dur-hue: .22s; /* цвет текста ссылки */ --tt-dur-shift: .24s; /* сдвиг стрелки, подъём подписи */ --tt-dur-fill: .34s; /* рост оранжевой полосы до заливки */ --tt-dur-entry: 2.2s; /* въезд скобок заголовка */ /* побуквенная расшифровка заголовков, читается из JS */ --tt-scramble-ms: 580; --tt-scramble-tick: 45; /* ============================================================ ГЕОМЕТРИЯ Zero Block, autoscale ON. Холст всегда 1200 по ширине, высота своя у каждого блока. ============================================================ */ --tt-canvas: 1200px; --tt-gutter: 20px; /* левое и правое поле, по логотипу */ --tt-content: 1160px; /* 1200 − 20 − 20 */ /* вертикали сетки. Одинаковы во всех блоках — на стыке двух блоков сетка обязана продолжаться без сдвига */ --tt-grid-1: 300px; --tt-grid-2: 310px; --tt-grid-3: 600px; --tt-grid-4: 610px; --tt-grid-5: 900px; --tt-grid-6: 910px; /* высота стандартной кнопки-строки */ --tt-btn-h: 20px; /* отступ подписи от края оранжевой заливки. Без него текст упирается в кромку и кнопка читается как обрезанная */ --tt-cta-pad: 10px; } /* ===================================================================== TYPOGRAPHY HIERARCHY · service pages Six sizes, two weights. Fonts keep their existing semantic roles: Space Mono = navigation and headings; Manrope = reading text. ===================================================================== */ html body { --tt-type-display: clamp(40px, calc(4.7619vw + 22.8571px), 80px); --tt-type-page-title: 32px; --tt-type-section-title: 16px; --tt-type-service-list: 15px; --tt-type-subtitle: 16px; --tt-type-body: 12px; --tt-type-item-title: 12px; --tt-type-utility: 12px; --tt-type-meta: 10px; --tt-weight-regular: 400; --tt-weight-strong: 800; } /* Utility navigation must remain quieter than the page subtitle. */ html body #tt-services-page-hero[id] .tt-services-page-hero__menu a, html body #tt-services-page-hero[id] .tt-services-page-hero__mail { font-size: var(--tt-type-utility) !important; font-weight: var(--tt-weight-strong) !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__title { font-size: var(--tt-type-display) !important; font-weight: var(--tt-weight-strong) !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service { font-size: var(--tt-type-service-list) !important; font-weight: var(--tt-weight-regular) !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service.is-active { font-weight: var(--tt-weight-strong) !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service.is-active > span { font-weight: var(--tt-weight-strong) !important; } /* ===================================================================== SERVICES HERO · four-column menu anchored to the bottom of the hero. The title/header keep their existing coordinates. Links flow top-to- bottom in four rows, then continue in the next column. ===================================================================== */ html body #tt-services-page-hero[id] { height: 576px !important; min-height: 576px !important; max-height: 576px !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__grid { height: 576px !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__services { inset: auto 0 18px 0 !important; height: 92px !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: repeat(4, 17px) !important; grid-auto-flow: row !important; column-gap: 0 !important; row-gap: 8px !important; align-content: end !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__col { position: static !important; display: contents !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service { min-width: 0 !important; padding-left: 20px !important; padding-right: 20px !important; font-size: 14px !important; line-height: 17px !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service > span { left: 20px !important; line-height: 17px !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__col--1 .tt-services-page-hero__service:nth-child(1) { grid-column: 1; grid-row: 1; } html body #tt-services-page-hero[id] .tt-services-page-hero__col--1 .tt-services-page-hero__service:nth-child(2) { grid-column: 1; grid-row: 2; } html body #tt-services-page-hero[id] .tt-services-page-hero__col--1 .tt-services-page-hero__service:nth-child(3) { grid-column: 1; grid-row: 3; } html body #tt-services-page-hero[id] .tt-services-page-hero__col--1 .tt-services-page-hero__service:nth-child(4) { grid-column: 2; grid-row: 1; } html body #tt-services-page-hero[id] .tt-services-page-hero__col--1 .tt-services-page-hero__service:nth-child(5) { grid-column: 2; grid-row: 2; } html body #tt-services-page-hero[id] .tt-services-page-hero__col--1 .tt-services-page-hero__service:nth-child(6) { grid-column: 2; grid-row: 3; } html body #tt-services-page-hero[id] .tt-services-page-hero__col--2 .tt-services-page-hero__service:nth-child(1) { grid-column: 3; grid-row: 1; } html body #tt-services-page-hero[id] .tt-services-page-hero__col--2 .tt-services-page-hero__service:nth-child(2) { grid-column: 3; grid-row: 2; } html body #tt-services-page-hero[id] .tt-services-page-hero__col--2 .tt-services-page-hero__service:nth-child(3) { grid-column: 3; grid-row: 3; } html body #tt-services-page-hero[id] .tt-services-page-hero__col--2 .tt-services-page-hero__service:nth-child(4) { grid-column: 3; grid-row: 4; } html body #tt-services-page-hero[id] .tt-services-page-hero__col--3 .tt-services-page-hero__service:nth-child(1) { grid-column: 4; grid-row: 1; } html body #tt-services-page-hero[id] .tt-services-page-hero__col--3 .tt-services-page-hero__service:nth-child(2) { grid-column: 4; grid-row: 2; } html body #tt-services-page-hero[id] .tt-services-page-hero__col--3 .tt-services-page-hero__service:nth-child(3) { grid-column: 4; grid-row: 3; } html body #tt-services-page-hero[id] .tt-services-page-hero__col--3 .tt-services-page-hero__service:nth-child(4) { grid-column: 4; grid-row: 4; } /* No left marker. The only marker lives on the right and turns on hover. */ html body #tt-services-page-hero[id] .tt-services-page-hero__service > span::before { display: none !important; content: none !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service::after { content: "\203A" !important; display: block !important; font-size: 14px !important; line-height: 17px !important; opacity: 0 !important; transform: rotate(0deg) !important; transform-origin: 50% 50% !important; transition: transform .34s cubic-bezier(.2, 1, .2, 1), color .18s ease !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service:hover::after, html body #tt-services-page-hero[id] .tt-services-page-hero__service:focus-visible::after { content: "\203A" !important; opacity: 1 !important; transform: rotate(180deg) !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service.is-active::after { content: "\203A" !important; opacity: 1 !important; transform: rotate(0deg) !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service.is-active:hover::after, html body #tt-services-page-hero[id] .tt-services-page-hero__service.is-active:focus-visible::after { transform: rotate(180deg) !important; } html body #tt-svc-intro[id] .tt-svc-intro__title { font-size: var(--tt-type-page-title) !important; font-weight: var(--tt-weight-strong) !important; } html body #tt-svc-intro[id] .tt-svc-intro__sub { font-size: var(--tt-type-subtitle) !important; font-weight: var(--tt-weight-strong) !important; } html body #tt-svc-intro[id] .tt-svc-intro__p, html body #tt-ut-what[id] .tt-ut-what__copy p, html body #tt-ut-why[id] .tt-ut-why__copy p, html body #tt-ut-process[id] .tt-ut-process__item p, html body #tt-ut-applications[id] .tt-ut-applications__copy p, html body #tt-vt-receive[id] p, html body #tt-vt-choose[id] p, html body #tt-bp-faq[id] p { font-size: var(--tt-type-body) !important; font-weight: var(--tt-weight-regular) !important; } /* Every major section heading is one level and one visual treatment. */ html body #tt-ut-what[id] .tt-ut-what__label, html body #tt-ut-why[id] .tt-ut-why__title, html body #tt-ut-process[id] .tt-ut-process__title, html body #tt-ut-applications[id] .tt-ut-applications__title, html body #tt-ut-related[id] .tt-ut-related__title, html body #tt-vt-receive[id] .tt-vt-receive__title, html body #tt-vt-choose[id] .tt-vt-choose__title, html body #tt-vt-choose[id] .tt-vt-choose__label, html body #tt-bp-faq[id] .tt-bp-faq__title { font-family: "Space Mono", monospace !important; font-size: var(--tt-type-section-title) !important; font-weight: var(--tt-weight-strong) !important; line-height: 1.15 !important; } /* Step names are deliberately smaller than the section heading above them. */ html body #tt-ut-process[id] .tt-ut-process__item h3 { font-size: var(--tt-type-item-title) !important; font-weight: var(--tt-weight-strong) !important; } html body #tt-ut-why[id] .tt-ut-why__copy h3, html body #tt-ut-applications[id] .tt-ut-applications__copy h3 { font-size: var(--tt-type-body) !important; font-weight: var(--tt-weight-strong) !important; } html body #tt-svc-intro[id] .tt-svc-intro__tags, html body #tt-ut-what[id] .tt-ut-what__tag, html body #tt-vt-receive[id] .tt-vt-receive__caption, html body #tt-vt-receive[id] .tt-vt-receive__num { font-size: var(--tt-type-meta) !important; font-weight: var(--tt-weight-regular) !important; } /* ===================================================================== ТЕМЫ Вешаются на корневой элемент блока:
===================================================================== */ [data-tt-theme="dark"] { --tt-surface: var(--tt-c-graphite); --tt-text: var(--tt-c-chalk); --tt-text-dim: var(--tt-c-chalk-dim); --tt-text-mute: var(--tt-c-chalk-mute); --tt-line-op: .18; } [data-tt-theme="paper"] { --tt-surface: var(--tt-c-chalk); --tt-text: var(--tt-c-ink); --tt-text-dim: var(--tt-c-ink-dim); --tt-text-mute: var(--tt-c-ink-dim); --tt-line-op: .09; } /* ===================================================================== МОСТ СОВМЕСТИМОСТИ Старые имена из существующих блоков. Держать, пока блоки не переписаны на --tt-*. Удалять по одному, когда блок мигрирован. Это единственный способ убрать локальные :root, не трогая остальные полторы тысячи строк внутри каждого блока. ===================================================================== */ [data-tt-theme] { --accent: var(--tt-accent); --line: var(--tt-line); --line-op: var(--tt-line-op); --rule: var(--tt-rule); --ease: var(--tt-ease); --muted: var(--tt-text-mute); } [data-tt-theme="dark"] { --bg: var(--tt-surface); --fg: var(--tt-text); --cold: var(--tt-text); --title: var(--tt-text); --body: var(--tt-text-dim); --btn: var(--tt-text); --hot: var(--tt-on-accent); /* #333333 */ } [data-tt-theme="paper"] { --paper: var(--tt-surface); --ink: var(--tt-text); --idle: var(--tt-c-line); --inactive: var(--tt-c-ink-off); --tag: var(--tt-c-ink-tag); } /* ===================================================================== БАЗА ДЛЯ КОРНЯ БЛОКА Повторяется в каждом блоке почти дословно. Класс вешается рядом с id:
Ширину задаёт токен, высоту блок ставит сам. ===================================================================== */ .tt-block { position: relative; display: block; width: var(--tt-canvas); min-width: var(--tt-canvas); max-width: var(--tt-canvas); margin: 0; padding: 0; overflow: hidden; isolation: isolate; box-sizing: border-box; background: var(--tt-surface); color: var(--tt-text); font-family: var(--tt-font-body); -webkit-font-smoothing: antialiased; } .tt-block *, .tt-block *::before, .tt-block *::after { box-sizing: border-box; } .tt-block h1, .tt-block h2, .tt-block h3, .tt-block p, .tt-block ul, .tt-block li { margin: 0; padding: 0; } .tt-block ul { list-style: none; } .tt-block a { text-decoration: none; color: inherit; } .tt-block button { -webkit-appearance: none; appearance: none; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; } /* ===================================================================== ВЕРТИКАЛИ СЕТКИ Разметка: Заменяет шесть повторяющихся :nth-child в каждом блоке. ===================================================================== */ .tt-grid { position: absolute; z-index: 1; inset: 0; pointer-events: none; } .tt-grid span { position: absolute; top: 0; width: var(--tt-line-w); height: 100%; background: var(--tt-line); opacity: var(--tt-line-op); } .tt-grid span:nth-child(1) { left: var(--tt-grid-1); } .tt-grid span:nth-child(2) { left: var(--tt-grid-2); } .tt-grid span:nth-child(3) { left: var(--tt-grid-3); } .tt-grid span:nth-child(4) { left: var(--tt-grid-4); } .tt-grid span:nth-child(5) { left: var(--tt-grid-5); } .tt-grid span:nth-child(6) { left: var(--tt-grid-6); } /* Светлые секции раньше создавали отдельный compositing layer через isolation:isolate. При дробном масштабировании холста границы слоёв превращались в серые горизонтальные швы. Общий stacking context убирает эти артефакты, не затрагивая настоящие светлые линии сетки. */ html body #tt-services-page-hero[id], html body #tt-svc-intro[id], html body #tt-ut-what[id], html body #tt-ut-why[id], html body #tt-ut-process[id], html body #tt-ut-applications[id], html body #tt-ut-related[id], html body #tt-ut-asme-kit[id], html body #tt-vt-receive[id], html body #tt-vt-choose[id], html body #tt-bp-faq[id] { isolation: auto !important; } /* Перекрываем соседние светлые секции на один пиксель. Это устраняет тёмные raster seams, которые появляются между одинаковыми фонами при масштабировании всего 1200-px холста на дробный коэффициент. */ html body #tt-svc-intro[id], html body #tt-ut-what[id], html body #tt-ut-why[id], html body #tt-ut-process[id], html body #tt-ut-applications[id], html body #tt-ut-related[id], html body #tt-ut-asme-kit[id], html body #tt-vt-receive[id], html body #tt-vt-choose[id], html body #tt-bp-faq[id] { margin-top: -1px !important; } /* ================================================================ SERVICE · WHAT IS… · единый вертикальный ритм Основной контент участвует в потоке; абсолютными остаются только декоративные подписи и линии сетки. Значения меняются здесь сразу для всех страниц услуг. ================================================================ */ html body #tt-ut-what[id] { --tt-major-section-gap: 180px; --tt-section-space-top: var(--tt-major-section-gap); --tt-section-space-bottom: var(--tt-major-section-gap); --tt-media-title-gap: 26px; --tt-title-copy-gap: 18px; display: grid !important; grid-template-columns: 1fr !important; justify-items: center !important; align-content: start !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: var(--tt-section-space-top) 0 var(--tt-section-space-bottom) !important; } /* One owner per major gap: the following section owns all 180px. Remove the unused tail of the fixed intro so the interval is not counted twice. */ html body #tt-svc-intro[id] { height: 282px !important; min-height: 282px !important; max-height: 282px !important; } /* Longer service introductions keep their full copy instead of clipping it. */ html body #tt-svc-intro[id].tt-svc-intro--long { height: 320px !important; min-height: 320px !important; max-height: 320px !important; } html body #tt-ut-what[id] .tt-ut-what__grid { inset: 0 !important; width: 100% !important; height: 100% !important; } html body #tt-ut-what[id] .tt-ut-what__media { position: relative !important; left: auto !important; top: auto !important; grid-column: 1 !important; grid-row: 1 !important; margin: 0 !important; } html body #tt-ut-what[id] .tt-ut-what__label { position: relative !important; left: auto !important; top: auto !important; grid-column: 1 !important; grid-row: 2 !important; margin: var(--tt-media-title-gap) 0 0 !important; width: 100% !important; text-align: center !important; z-index: 10 !important; height: auto !important; transform: none !important; white-space: normal !important; opacity: 1 !important; } /* SERVICE LIST → INTRO Keep the original hero height so the service title remains visible in the first viewport. Only the divider moves; it does not enlarge either block. */ html body #tt-services-page-hero[id] { height: 436px !important; min-height: 436px !important; max-height: 436px !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__grid { height: 436px !important; } html body #tt-svc-intro[id]::before { top: 0 !important; } html body #tt-svc-intro[id] .tt-svc-intro__title { top: 30px !important; align-items: flex-start !important; } html body #tt-svc-intro[id] .tt-svc-intro__col { top: 85px !important; } html body #tt-svc-intro[id] .tt-svc-intro__shot { top: 85px !important; } html body #tt-svc-intro[id] .tt-svc-intro__tags { top: 272px !important; } html body #tt-ut-what[id] .tt-ut-what__copy { position: relative !important; left: auto !important; top: auto !important; grid-column: 1 !important; grid-row: 3 !important; margin: var(--tt-title-copy-gap) 0 0 !important; } /* Keep the lower pair of technical tags on one baseline even when the central copy changes the section height. */ html body #tt-ut-what[id] .tt-ut-what__tag--sound { top: auto !important; bottom: 134px !important; } /* Заголовки секций услуг. Старые локальные правила местами повреждены комментариями, поэтому геометрию и типографику фиксируем централизованно. */ html body #tt-ut-why[id] .tt-ut-why__title, html body #tt-ut-process[id] .tt-ut-process__title, html body #tt-ut-applications[id] .tt-ut-applications__title, html body #tt-ut-related[id] .tt-ut-related__title, html body #tt-vt-receive[id] .tt-vt-receive__title, html body #tt-vt-choose[id] .tt-vt-choose__title, html body #tt-bp-faq[id] .tt-bp-faq__title { z-index: 10 !important; margin: 0 !important; padding: 0 !important; color: #333333 !important; font-family: "Space Mono", monospace !important; font-size: var(--tt-type-section-title) !important; font-weight: var(--tt-weight-strong) !important; line-height: 1.15 !important; letter-spacing: 0 !important; text-align: left !important; transition: none !important; text-transform: none !important; } html body #tt-ut-why[id] .tt-ut-why__title { position: absolute !important; left: 20px !important; top: 151px !important; width: 540px !important; } /* The preceding content block owns the complete inter-section interval. Its vertical grid therefore continues through all 180px of whitespace. */ html body #tt-ut-why[id] { padding-bottom: 180px !important; } html body #tt-ut-why[id] .tt-ut-why__button { bottom: 180px !important; } html body #tt-ut-why[id] .tt-ut-why__image { top: 0 !important; } html body #tt-ut-why[id] .tt-ut-why__title { top: 151px !important; } html body #tt-ut-why[id] .tt-ut-why__line { top: 185px !important; } html body #tt-ut-why[id] .tt-ut-why__copies { margin-top: 204px !important; } /* Penetrant types: transfer the 180px section gap from below to above. */ html body #tt-ut-why[id].tt-ut-why--gap-before { padding-bottom: 0 !important; } html body #tt-ut-why[id].tt-ut-why--gap-before .tt-ut-why__image { top: 180px !important; } html body #tt-ut-why[id].tt-ut-why--gap-before .tt-ut-why__title { top: 331px !important; } html body #tt-ut-why[id].tt-ut-why--gap-before .tt-ut-why__line { top: 365px !important; } html body #tt-ut-why[id].tt-ut-why--gap-before .tt-ut-why__copies { margin-top: 384px !important; } html body #tt-ut-why[id].tt-ut-why--gap-before .tt-ut-why__button { bottom: 0 !important; } html body #tt-ut-process[id] .tt-ut-process__title { position: relative !important; left: 20px !important; top: 5px !important; width: 540px !important; height: 30px !important; } html body #tt-ut-process[id] { padding-top: 0 !important; height: 750px !important; min-height: 750px !important; max-height: 750px !important; } /* Three-step process sections do not need the fourth 176px row. */ html body #tt-ut-process[id]:has( > .tt-ut-process__list > .tt-ut-process__item:nth-child(3):last-child ) { height: 564px !important; min-height: 564px !important; max-height: 564px !important; } /* Penetrant testing has six animated steps and must retain all six rows. */ html body #tt-ut-process[id]:has( > .tt-ut-process__list > .tt-ut-process__item:nth-child(6):last-child ) { height: 1092px !important; min-height: 1092px !important; max-height: 1092px !important; } /* The divider now starts the process itself; the gap belongs to the block above. */ html body #tt-ut-process[id]::before { display: block !important; top: 0 !important; } /* Process sections end with one rule: the list's duplicate rule stays off. */ html body #tt-ut-process[id]::after { display: block !important; } html body #tt-ut-process[id] .tt-ut-process__list { border-bottom: 0 !important; } /* Draw step separators above animated media so the rule never breaks. */ html body #tt-ut-process[id] .tt-ut-process__item { border-top: 0 !important; } html body #tt-ut-process[id] .tt-ut-process__item::before { content: "" !important; position: absolute !important; z-index: 20 !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 1px !important; background: var(--rule) !important; pointer-events: none !important; } /* Prevent a one-pixel dark edge while an animated image is parked at -100%. */ html body #tt-ut-process[id] .tt-ut-process__item figure img { top: -1px !important; bottom: auto !important; height: calc(100% + 2px) !important; } /* Process steps: align the image with the 300px grid axis and leave a 28px gutter before the text. The animated image itself is untouched. */ html body #tt-ut-process[id] .tt-ut-process__item figure { left: 300px !important; } /* Align every step name with the visible bottom edge of its text. */ html body #tt-ut-process[id] .tt-ut-process__item h3, html body #tt-ut-process[id] .tt-ut-process__item p { top: auto !important; bottom: 30px !important; } /* Long final process steps use the two available text columns. */ html body #tt-ut-process[id] .tt-ut-process__item[data-index="3"] p:first-of-type { left: 620px !important; width: 270px !important; } html body #tt-ut-process[id] .tt-ut-process__item[data-index="3"] p:nth-of-type(2) { left: 920px !important; width: 260px !important; } html body #tt-ut-applications[id] .tt-ut-applications__title { position: absolute !important; left: 20px !important; top: 331px !important; width: 540px !important; } /* The next section starts after a real 120px interval. Its title remains optically aligned with the lower edge of the 165px image. */ html body #tt-ut-applications[id] .tt-ut-applications__image { top: 180px !important; } html body #tt-ut-applications[id] .tt-ut-applications__line { top: 365px !important; } html body #tt-ut-applications[id] .tt-ut-applications__copies { margin-top: 384px !important; } html body #tt-vt-receive[id] .tt-vt-receive__title { position: absolute !important; left: 20px !important; top: 80px !important; width: 540px !important; } /* Keep the related-methods heading visually attached to its divider. */ html body #tt-ut-related[id] .tt-ut-related__title { position: absolute !important; left: 20px !important; top: 151px !important; width: 880px !important; } html body #tt-vt-choose[id] .tt-vt-choose__title, html body #tt-bp-faq[id] .tt-bp-faq__title { position: absolute !important; left: 20px !important; width: 540px !important; } html body #tt-bp-faq[id] .tt-bp-faq__title { top: 111px !important; } /* ===================================================================== SERVICE REQUEST · light service-page theme Repairs the damaged local title selector and replaces the placeholder with the already supplied local staircase image. ===================================================================== */ html body:has(#tt-services-page-hero) #tt-request-block[id] { --cold: #333333 !important; --muted: rgba(51, 51, 51, .58) !important; --line: #e3e3e3 !important; --line-op: 1 !important; background: #dcdcdc !important; color: #333333 !important; } /* Shared form geometry. Light and dark variants differ only in palette. */ html body #tt-request-block[id] .tt-request-stage { left: 0 !important; margin-left: 0 !important; transform-origin: top left !important; } html body #tt-request-block[id] .tt-request-title { left: 68px !important; top: 24px !important; width: 520px !important; height: 492px !important; margin: 0 !important; padding: 0 !important; font-size: 80px !important; line-height: 1.02 !important; } html body #tt-request-block[id] .tt-request-word--service { left: 0 !important; top: 0 !important; } html body #tt-request-block[id] .tt-request-word--request { left: 0 !important; top: 82px !important; transform: none !important; } html body #tt-request-block[id] .tt-request-diagram { left: 68px !important; top: 118px !important; width: 385px !important; height: 250px !important; overflow: visible !important; } /* The frame crosses the optical centre of REQUEST without moving the image. */ html body #tt-request-block[id] .tt-request-diagram::before { inset: 30px 0 0 !important; } /* Technical DotGothic captions sit in the lower-right frame corner. */ html body #tt-request-block[id] .tt-request-diagram-meta { left: auto !important; top: auto !important; right: 8px !important; bottom: 8px !important; } html body #tt-request-block[id] .tt-request-diagram img { left: -22px !important; top: -2px !important; width: 425px !important; height: 278px !important; object-fit: contain !important; } html body:has(#tt-services-page-hero) #tt-request-block[id] .tt-request-title { position: absolute !important; z-index: 3 !important; left: 68px !important; top: 24px !important; width: 520px !important; height: 492px !important; margin: 0 !important; padding: 0 !important; font-family: "Space Mono", monospace !important; font-size: 80px !important; font-weight: 700 !important; line-height: 1.02 !important; letter-spacing: 0 !important; color: #333333 !important; text-transform: uppercase !important; pointer-events: none !important; } html body:has(#tt-services-page-hero) #tt-request-block[id] .tt-request-word--service { left: 0 !important; top: 0 !important; } html body:has(#tt-services-page-hero) #tt-request-block[id] .tt-request-word--request { left: 0 !important; top: 82px !important; transform: none !important; } html body:has(#tt-services-page-hero) #tt-request-block[id] .tt-request-diagram { left: 68px !important; top: 118px !important; width: 385px !important; height: 250px !important; overflow: visible !important; background: transparent !important; } html body:has(#tt-services-page-hero) #tt-request-block[id] .tt-request-diagram::before { border-color: rgba(51, 51, 51, .28) !important; } html body:has(#tt-services-page-hero) #tt-request-block[id] .tt-request-diagram img { content: url("../img/service-request-steps.webp") !important; left: -22px !important; top: -2px !important; width: 425px !important; height: 278px !important; object-fit: contain !important; } html body:has(#tt-services-page-hero) #tt-request-block[id] .tt-request-diagram-meta, html body:has(#tt-services-page-hero) #tt-request-block[id] .tt-request-ui, html body:has(#tt-services-page-hero) #tt-request-block[id] .tt-request-ui label span, html body:has(#tt-services-page-hero) #tt-request-block[id] .tt-request-ui input, html body:has(#tt-services-page-hero) #tt-request-block[id] .tt-request-ui textarea, html body:has(#tt-services-page-hero) #tt-request-block[id] .tt-request-submit { color: #333333 !important; -webkit-text-fill-color: #333333 !important; } /* Space Mono sits optically low inside the 32px submit control. */ #tt-request-block .tt-request-submit > span { top: -2px; } html body:has(#tt-services-page-hero) #tt-request-block[id] .tt-request-ui input, html body:has(#tt-services-page-hero) #tt-request-block[id] .tt-request-ui textarea { border-bottom-color: rgba(51, 51, 51, .46) !important; } html body:has(#tt-services-page-hero) #tt-request-block[id] .tt-request-privacy { color: rgba(51, 51, 51, .58) !important; } html body:has(#tt-services-page-hero) #tt-request-block[id] .tt-request-privacy a { color: rgba(51, 51, 51, .7) !important; -webkit-text-fill-color: rgba(51, 51, 51, .7) !important; border-bottom-color: rgba(51, 51, 51, .28) !important; } /* SERVICE PAGES · footer palette inverted from the dark home-page footer. */ html body:has(#tt-services-page-hero) #tt-footer-simple.tt-footer-simple { --cold: #333333 !important; --line: #e3e3e3 !important; --line-op: 1 !important; --tt-footer-mobile-line: rgba(48, 48, 48, .08) !important; background: #dcdcdc !important; color: #333333 !important; } html body:has(#tt-services-page-hero) #tt-footer-simple .tt-footer-simple__col, html body:has(#tt-services-page-hero) #tt-footer-simple .tt-footer-simple__col a, html body:has(#tt-services-page-hero) #tt-footer-simple .tt-footer-simple__label, html body:has(#tt-services-page-hero) #tt-footer-simple .tt-footer-simple__mail { color: #333333 !important; -webkit-text-fill-color: #333333 !important; } /* Remove the two residual horizontal seams around the request section. */ html body:has(#tt-services-page-hero) #tt-bp-faq .tt-bp-faq__row:last-child .tt-bp-faq__rule, html body:has(#tt-services-page-hero) #tt-bp-faq .tt-bp-faq__row:last-of-type > .tt-bp-faq__rule, html body:has(#tt-services-page-hero) #tt-bp-faq .tt-bp-faq__list > .tt-bp-faq__row:last-of-type > .tt-bp-faq__rule { display: none !important; background: transparent !important; opacity: 0 !important; } /* Lower centered “Why choose…” blocks continue the page without a top rule. */ html body #tt-vt-choose[id]::before { display: none !important; } /* A true 180px visual interval before lower centered “Why choose…” blocks. */ html body #tt-vt-choose[id] .tt-vt-choose__media { top: 99px !important; } html body #tt-vt-choose[id] .tt-vt-choose__label { top: 285px !important; font-size: 18px !important; } html body #tt-vt-choose[id] .tt-vt-choose__copy { margin-top: 319px !important; } /* Context tags move here from the upper "What is" block. The script assigns each row the real top of paragraph one or two; these rules only define the two side columns and retain the original tag typography. */ html body #tt-vt-choose[id] .tt-vt-choose__tag { position: absolute !important; z-index: 3 !important; width: 290px !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: var(--ink, #333333) !important; font-family: var(--tt-font-tech, "DotGothic16", sans-serif) !important; font-size: 10px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0 !important; text-align: center !important; text-transform: uppercase !important; white-space: nowrap !important; pointer-events: none !important; } html body #tt-vt-choose[id] .tt-vt-choose__tag--left { left: 5px !important; right: auto !important; } html body #tt-vt-choose[id] .tt-vt-choose__tag--right { left: 905px !important; right: auto !important; } html body #tt-vt-choose[id] .tt-vt-choose__grid { height: auto !important; top: 0 !important; bottom: 0 !important; } /* Dynamic text can increase these sections. Their paired vertical grid lines must follow the real section height instead of an old fixed value. */ html body #tt-ut-why[id] .tt-ut-why__grid, html body #tt-ut-applications[id] .tt-ut-applications__grid, html body #tt-vt-choose[id] .tt-vt-choose__grid { height: 10000px !important; top: 0 !important; bottom: auto !important; } html body #tt-ut-why[id] .tt-ut-why__grid span, html body #tt-ut-applications[id] .tt-ut-applications__grid span, html body #tt-vt-choose[id] .tt-vt-choose__grid span { height: 10000px !important; } /* Keep the complete request canvas light on service pages, including the one-pixel boundaries exposed after removing page-local double scaling. */ html body:has(#tt-services-page-hero) #tt-request-block[id], html body:has(#tt-services-page-hero) #tt-request-block[id] .tt-request-stage { background-color: #dcdcdc !important; } /* Cover the sub-pixel seam where a light service section meets its request form. The overlap is intentionally shared by every service page so dynamic FAQ/content heights cannot expose a one-pixel horizontal strip. */ html body:has(#tt-services-page-hero) #tt-request-block[id] { position: relative !important; z-index: 5 !important; margin-top: -2px !important; } html body:has(#tt-services-page-hero) #tt-request-block, html body:has(#tt-services-page-hero) #tt-footer-simple { border-top: 0 !important; border-bottom: 0 !important; box-shadow: none !important; } html body:has(#tt-services-page-hero) #tt-footer-simple { margin-top: -1px !important; } /* ===================================================================== КНОПКА-СТРОКА · фирменный элемент Оранжевая полоса растёт от осевой линии, подпись подменяется, стрелка уезжает вправо. Повторяется в почте, в кнопках наборов, в отправке формы, в футере — везде одинаково, но написана заново в каждом блоке. Разметка: EMAIL US WRITE → ===================================================================== */ .tt-cta { position: relative; display: block; height: var(--tt-btn-h); overflow: hidden; font-family: var(--tt-font-display); font-size: var(--tt-size-2xs); font-weight: var(--tt-w-bold); line-height: var(--tt-lh-tight); letter-spacing: .5px; text-transform: uppercase; color: var(--tt-text); -webkit-text-fill-color: var(--tt-text); transition: color var(--tt-dur-hue) ease, -webkit-text-fill-color var(--tt-dur-hue) ease; } .tt-cta::before { content: ""; position: absolute; z-index: 1; left: 0; top: 50%; width: 100%; height: 1px; background: var(--tt-accent); opacity: 0; transform: translateY(-50%); transition: height var(--tt-dur-fill) var(--tt-ease), opacity var(--tt-dur-tint) ease; } .tt-cta:hover::before, .tt-cta:focus-visible::before, .tt-cta[data-state="cta"]::before { height: 100%; opacity: 1; } .tt-cta__face { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity var(--tt-dur-snap) ease, transform var(--tt-dur-shift) var(--tt-ease); } .tt-cta__face--cta { padding-left: var(--tt-cta-pad); color: var(--tt-on-accent); -webkit-text-fill-color: var(--tt-on-accent); } .tt-cta[data-state="rest"] .tt-cta__face--rest, .tt-cta[data-state="cta"] .tt-cta__face--cta { opacity: 1; transform: translateY(0); } .tt-cta[data-state="cta"] .tt-cta__face--rest { transform: translateY(-4px); } .tt-cta__arrow { position: absolute; z-index: 3; top: 50%; width: 12px; height: 12px; color: var(--tt-on-accent); opacity: 0; transform: translate(0, -50%); transition: opacity var(--tt-dur-snap) ease, transform var(--tt-dur-fill) var(--tt-ease); } .tt-cta[data-state="cta"] .tt-cta__arrow { opacity: 1; transform: translate(14px, -50%); } .tt-cta:focus-visible { outline: 1px solid var(--tt-accent); outline-offset: 3px; } /* ===================================================================== ДОСТУПНОСТЬ Один блок на сайт вместо копии в каждом. ===================================================================== */ @media (prefers-reduced-motion: reduce) { .tt-block *, .tt-block *::before, .tt-block *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ===================================================================== BACK TO TOP · fixed left control; the right corner stays free for chat. ===================================================================== */ .tt-back-to-top { position: fixed; z-index: 10000; left: 20px; bottom: 20px; width: 44px; height: 44px; margin: 0; padding: 0; display: grid; place-items: center; border: 1px solid rgba(220, 220, 220, .42); border-radius: 50%; background: rgba(59, 59, 59, .94); color: #dcdcdc; -webkit-text-fill-color: #dcdcdc; font-family: "Space Mono", monospace; font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .22s ease, transform .28s cubic-bezier(.2, 1, .2, 1), visibility 0s linear .28s, border-color .22s ease; } .tt-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; } .tt-back-to-top:hover, .tt-back-to-top:focus-visible { border-color: #ff5c17; outline: none; } .tt-back-to-top:focus-visible { box-shadow: 0 0 0 2px rgba(255, 92, 23, .28); } @media (max-width: 600px) { .tt-back-to-top { left: 14px; bottom: 14px; width: 40px; height: 40px; } } @media (prefers-reduced-motion: reduce) { .tt-back-to-top { transition: none; } } /* Optical alignment for bracketed page titles. Space Mono leaves visible side-bearing before "["; compensate it so the bracket itself, not its text box, starts on the same 20 px axis as the logo. */ html body #tt-services-page-hero.tt-services-page-hero .tt-services-page-hero__title, html body .tt1700-rent .tt1700-rent__title { margin-left: -0.236em !important; } /* Final services-hero composition. The catalogue stays at the bottom of the first laptop viewport, while the following service section begins below it. Source links are regrouped into four visual columns without duplicating or reordering the HTML. */ html body #tt-services-page-hero[id] { height: 576px !important; min-height: 576px !important; max-height: 576px !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__grid { height: 576px !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__services { inset: auto 0 18px 0 !important; height: 86px !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: repeat(4, 16px) !important; row-gap: 7px !important; align-content: end !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service { padding-inline: 20px !important; font-size: 12px !important; line-height: 16px !important; white-space: nowrap !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service > span, html body #tt-services-page-hero[id] .tt-services-page-hero__service::after { line-height: 16px !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service::after { font-size: 12px !important; } /* Service-menu marker: one fixed column to the left of every label. */ html body #tt-services-page-hero[id] .tt-services-page-hero__service > span::before { content: "\2039" !important; display: block !important; position: absolute !important; left: -15px !important; top: 0 !important; width: 10px !important; font-family: "Manrope", sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 16px !important; text-align: left !important; opacity: 0 !important; transform: rotate(0deg) !important; transform-origin: 50% 50% !important; transition: opacity .18s ease, transform .34s cubic-bezier(.2, 1, .2, 1) !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service:hover > span::before, html body #tt-services-page-hero[id] .tt-services-page-hero__service:focus-visible > span::before, html body #tt-services-page-hero[id] .tt-services-page-hero__service.is-active > span::before { opacity: 1 !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service:hover > span::before, html body #tt-services-page-hero[id] .tt-services-page-hero__service:focus-visible > span::before { transform: rotate(180deg) !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service::after { content: none !important; display: none !important; } /* Bottom-align all four service-menu columns. */ html body #tt-services-page-hero[id] .tt-services-page-hero__col--1 .tt-services-page-hero__service:nth-child(1) { grid-column: 1; grid-row: 2; } html body #tt-services-page-hero[id] .tt-services-page-hero__col--1 .tt-services-page-hero__service:nth-child(2) { grid-column: 1; grid-row: 3; } html body #tt-services-page-hero[id] .tt-services-page-hero__col--1 .tt-services-page-hero__service:nth-child(3) { grid-column: 1; grid-row: 4; } html body #tt-services-page-hero[id] .tt-services-page-hero__col--1 .tt-services-page-hero__service:nth-child(4) { grid-column: 2; grid-row: 2; } html body #tt-services-page-hero[id] .tt-services-page-hero__col--1 .tt-services-page-hero__service:nth-child(5) { grid-column: 2; grid-row: 3; } html body #tt-services-page-hero[id] .tt-services-page-hero__col--1 .tt-services-page-hero__service:nth-child(6) { grid-column: 2; grid-row: 4; } /* Markers: selected = > label <, hover = label >. */ html body #tt-services-page-hero[id] .tt-services-page-hero__service > span::before, html body #tt-services-page-hero[id] .tt-services-page-hero__service > span::after { display: block !important; position: absolute !important; top: 50% !important; width: auto !important; font-family: "Manrope", sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1 !important; opacity: 0 !important; transform: translateY(-50%) !important; transition: opacity .18s ease, transform .24s cubic-bezier(.2, 1, .2, 1) !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service > span::before { content: "\203A" !important; left: auto !important; right: calc(100% + 5px) !important; transform: translate(-3px, -50%) !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service > span::after { content: "\203A" !important; left: calc(100% + 5px) !important; right: auto !important; transform: translate(3px, -50%) !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service.is-active > span::after { content: "\2039" !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service:hover > span::after, html body #tt-services-page-hero[id] .tt-services-page-hero__service:focus-visible > span::after, html body #tt-services-page-hero[id] .tt-services-page-hero__service.is-active > span::before, html body #tt-services-page-hero[id] .tt-services-page-hero__service.is-active > span::after { opacity: 1 !important; transform: translate(0, -50%) !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service:hover > span::before, html body #tt-services-page-hero[id] .tt-services-page-hero__service:focus-visible > span::before { opacity: 0 !important; transform: translate(-3px, -50%) !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service.is-active:hover > span::before, html body #tt-services-page-hero[id] .tt-services-page-hero__service.is-active:focus-visible > span::before { opacity: 1 !important; transform: translate(0, -50%) !important; } /* SERVICE PAGES · single-column catalogue with adjacent service context. */ html body #tt-services-page-hero.tt-services-page-hero[id] { height: 490px !important; min-height: 490px !important; max-height: 490px !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__grid { height: 490px !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__services { position: absolute !important; z-index: 4 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; inset: 200px auto auto 20px !important; width: 281px !important; height: auto !important; margin: 0 !important; padding: 0 !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__col { display: contents !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service { position: relative !important; display: block !important; flex: 0 0 auto !important; width: 281px !important; min-width: 281px !important; height: 14px !important; min-height: 14px !important; max-height: 14px !important; margin: 0 !important; padding: 0 !important; color: #333333 !important; font-family: "Manrope", sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 14px !important; letter-spacing: .12px !important; white-space: nowrap !important; text-align: left !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service > span { position: relative !important; display: inline-block !important; left: 0 !important; top: 0 !important; width: auto !important; margin: 0 !important; padding: 0 !important; transform: none !important; font: inherit !important; height: 14px !important; line-height: 14px !important; white-space: nowrap !important; transition: none !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service.is-active, html body #tt-services-page-hero[id] .tt-services-page-hero__service.is-active > span { height: 15px !important; min-height: 15px !important; max-height: 15px !important; font-size: 12px !important; font-family: "Manrope", sans-serif !important; font-weight:800 !important; line-height: 15px !important; letter-spacing: .13px !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service > span::before { content: ">" !important; position: absolute !important; left: -8px !important; right: auto !important; top: 50% !important; opacity: 0 !important; transform: translateY(-50%) !important; font-family: "Manrope", sans-serif !important; font-size: 12px !important; font-weight:800 !important; line-height: 1 !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service > span::after { content: "<" !important; position: absolute !important; left: calc(100% + 5px) !important; right: auto !important; top: 50% !important; opacity: 0 !important; transform: translateY(-50%) !important; font-family: "Manrope", sans-serif !important; font-size: 12px !important; font-weight:800 !important; line-height: 1 !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service:hover > span::before, html body #tt-services-page-hero[id] .tt-services-page-hero__service:focus-visible > span::before, html body #tt-services-page-hero[id] .tt-services-page-hero__service.is-active > span::before, html body #tt-services-page-hero[id] .tt-services-page-hero__service.is-active > span::after { opacity: 1 !important; transform: translateY(-50%) !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__service:hover > span::after, html body #tt-services-page-hero[id] .tt-services-page-hero__service:focus-visible > span::after { opacity: 1 !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__intro { position: absolute !important; z-index: 4 !important; left: 316px !important; top: 200px !important; width: 278px !important; margin: 0 !important; padding: 0 !important; color: #333333 !important; font-family: "Manrope", sans-serif !important; text-align: left !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__intro .tt-svc-intro__sub { position: static !important; display: block !important; width: 278px !important; height: auto !important; margin: 0 0 20px !important; padding: 0 !important; color: #333333 !important; font-family: "Manrope", sans-serif !important; font-size: var(--tt-type-subtitle) !important; font-weight:800 !important; line-height: normal !important; letter-spacing: .12px !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__intro .tt-svc-intro__p { position: static !important; display: block !important; width: 278px !important; height: auto !important; margin: 0 0 20px !important; padding: 0 !important; color: #333333 !important; font-family: "Manrope", sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: normal !important; letter-spacing: .12px !important; text-align: left !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__intro .tt-svc-intro__p:last-child { margin-bottom: 0 !important; } html body #tt-services-page-hero[id] .tt-services-page-hero__image { position: absolute !important; z-index: 3 !important; left: 620px !important; top: 88px !important; width: 560px !important; height: calc(100% - 108px) !important; display: block !important; object-fit: contain !important; object-position: center center !important; margin: 0 !important; padding: 18px !important; box-sizing: border-box !important; pointer-events: none !important; } html body #tt-services-page-hero.tt-services-page-hero[id] nav.tt-services-page-hero__services a.tt-services-page-hero__service > span { position: absolute !important; inset: 0 auto auto 0 !important; transform: none !important; font-weight: 400 !important; transition: none !important; } html body #tt-services-page-hero.tt-services-page-hero[id] nav.tt-services-page-hero__services a.tt-services-page-hero__service.is-active > span { font-size: 12px !important; font-weight:800 !important; } /* Lower service-page headings match the compact Manrope heading treatment established on the Blasting and Painting page. */ html body #tt-vt-choose[id] .tt-vt-choose__label, html body #tt-vt-choose[id] .tt-vt-choose__title, html body #tt-bp-faq[id] .tt-bp-faq__title { font-family: "Manrope", sans-serif !important; font-size: 12px !important; font-weight:800 !important; line-height: normal !important; letter-spacing: .13px !important; } /* ===================================================================== RESPONSIVE FOOTER Four information groups form a true 2 x 2 composition: legal / address, phone contacts / email. ===================================================================== */ @media (max-width: 1199.98px) { html body #tt-footer-simple.tt-footer-simple[id] { --tt-footer-mobile-line: rgba(220, 220, 220, .06); position: relative !important; display: block !important; width: 100% !important; height: auto !important; min-width: 0 !important; min-height: 340px !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__grid { position: absolute !important; z-index: 1 !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; pointer-events: none !important; background: linear-gradient(90deg, transparent calc(33.333% - .5px), var(--tt-footer-mobile-line) calc(33.333% - .5px), var(--tt-footer-mobile-line) calc(33.333% + .5px), transparent calc(33.333% + .5px)), linear-gradient(90deg, transparent calc(33.333% + 7.5px), var(--tt-footer-mobile-line) calc(33.333% + 7.5px), var(--tt-footer-mobile-line) calc(33.333% + 8.5px), transparent calc(33.333% + 8.5px)), linear-gradient(90deg, transparent calc(66.666% - .5px), var(--tt-footer-mobile-line) calc(66.666% - .5px), var(--tt-footer-mobile-line) calc(66.666% + .5px), transparent calc(66.666% + .5px)), linear-gradient(90deg, transparent calc(66.666% + 7.5px), var(--tt-footer-mobile-line) calc(66.666% + 7.5px), var(--tt-footer-mobile-line) calc(66.666% + 8.5px), transparent calc(66.666% + 8.5px)) !important; opacity: 1 !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__grid span { display: none !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns { position: relative !important; z-index: 2 !important; left: auto !important; top: auto !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, minmax(130px, 1fr)) !important; column-gap: 0 !important; row-gap: 0 !important; width: 100% !important; min-height: 340px !important; margin: 0 !important; padding: 40px 20px !important; box-sizing: border-box !important; align-items: stretch !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__col { min-width: 0 !important; box-sizing: border-box !important; font-size: clamp(12px, 1.35vw, 15px) !important; line-height: 1.4 !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__col:nth-child(odd) { padding: 0 28px 24px 0 !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__col:nth-child(even) { padding: 0 0 24px 24px !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__col:nth-child(n + 3) { padding-top: 36px !important; padding-bottom: 0 !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__col--mail { grid-column: 2 !important; grid-row: 2 !important; display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__label { font-size: clamp(12px, 1.2vw, 13px) !important; line-height: 1.25 !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__mail { width: min(100%, 150px) !important; height: 24px !important; font-size: clamp(12px, 1.35vw, 15px) !important; text-align: left !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__mail-text { left: 0 !important; right: auto !important; justify-content: flex-start !important; } } @media (max-width: 420px) { html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__grid { background: linear-gradient(90deg, transparent calc(33.333% - 2px), var(--tt-footer-mobile-line) calc(33.333% - 2px), var(--tt-footer-mobile-line) calc(33.333% + 2px), transparent calc(33.333% + 2px)), linear-gradient(90deg, transparent calc(33.333% + 28px), var(--tt-footer-mobile-line) calc(33.333% + 28px), var(--tt-footer-mobile-line) calc(33.333% + 32px), transparent calc(33.333% + 32px)), linear-gradient(90deg, transparent calc(66.666% - 2px), var(--tt-footer-mobile-line) calc(66.666% - 2px), var(--tt-footer-mobile-line) calc(66.666% + 2px), transparent calc(66.666% + 2px)), linear-gradient(90deg, transparent calc(66.666% + 28px), var(--tt-footer-mobile-line) calc(66.666% + 28px), var(--tt-footer-mobile-line) calc(66.666% + 32px), transparent calc(66.666% + 32px)) !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns { grid-template-rows: 300px 320px !important; min-height: 920px !important; padding: 60px 60px 240px !important; align-content: start !important; } html body #tt-footer-simple.tt-footer-simple[id] { min-height: 920px !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__col, html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__col a, html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__privacy, html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__privacy a, html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__privacy button { font-size: 45px !important; line-height: 1.35 !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__label { font-size: 38px !important; line-height: 1.25 !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__col:nth-child(odd) { padding-right: 60px !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__col:nth-child(even) { padding-left: 60px !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__col:nth-child(n + 3) { padding-top: 10px !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__col:nth-child(3), html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__col:nth-child(3) a, html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__col:nth-child(3) .tt-footer-simple__label { line-height: 1.18 !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__mail { width: min(100%, 520px) !important; height: 72px !important; font-size: 45px !important; } } /* The footer still sits inside the scaled 1200px canvas above 420px. Compensate progressively so its visual type and spacing stay readable all the way to the desktop breakpoint. */ @media (min-width: 421px) and (max-width: 600px) { html body #tt-footer-simple.tt-footer-simple[id] { --tt-footer-responsive-font: calc(55.84px - 5.14vw); --tt-footer-responsive-label: calc(47.46px - 4.37vw); --tt-footer-responsive-height: calc(951px - 69.1vw); } } @media (min-width: 600.01px) and (max-width: 768px) { html body #tt-footer-simple.tt-footer-simple[id] { --tt-footer-responsive-font: calc(41.8px - 2.8vw); --tt-footer-responsive-label: calc(35.53px - 2.38vw); --tt-footer-responsive-height: calc(951px - 69.1vw); } } @media (min-width: 768.01px) and (max-width: 960px) { html body #tt-footer-simple.tt-footer-simple[id] { --tt-footer-responsive-font: calc(31.52px - 1.46vw); --tt-footer-responsive-label: calc(26.79px - 1.24vw); --tt-footer-responsive-height: calc(740px - 41.67vw); } } @media (min-width: 960.01px) and (max-width: 1199.98px) { html body #tt-footer-simple.tt-footer-simple[id] { --tt-footer-responsive-font: calc(27.6px - 1.05vw); --tt-footer-responsive-label: calc(23.46px - .89vw); --tt-footer-responsive-height: 340px; } } @media (min-width: 421px) and (max-width: 1199.98px) { html body #tt-footer-simple.tt-footer-simple[id] { min-height: var(--tt-footer-responsive-height) !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns { grid-template-rows: repeat(2, minmax(0, 1fr)) !important; min-height: var(--tt-footer-responsive-height) !important; padding: 1.5em 1.4em 4.5em !important; font-size: var(--tt-footer-responsive-font) !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__col, html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__col a, html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__privacy, html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__privacy a, html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__privacy button { font-size: var(--tt-footer-responsive-font) !important; line-height: 1.28 !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__label { font-size: var(--tt-footer-responsive-label) !important; line-height: 1.2 !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__col:nth-child(odd) { padding-right: 1.4em !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__col:nth-child(even) { padding-left: 1.4em !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__col:nth-child(n + 3) { padding-top: .3em !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__col:nth-child(3), html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__col:nth-child(3) a, html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__col:nth-child(3) .tt-footer-simple__label { line-height: 1.15 !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__col:nth-child(3) br + br { display: none !important; } html body #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__mail { width: min(100%, 11em) !important; height: 2em !important; font-size: var(--tt-footer-responsive-font) !important; } } /* Keep all interactive button labels legible on tablet and mobile layouts. */ @media (max-width: 1199.98px) { html body button, html body input[type="submit"], html body input[type="button"], html body [role="button"], html body .btn, html body .rent-button, html body .tt-cta, html body .tt-ut-why__button, html body .tt-mobile-equipment__button, html body .tt-mobile-service-card__cta, html body .tt-mobile-report-system__actions a, html body .tt-kits__btn { font-size: 16px !important; } }