/* ========================================================================== hutorskaya.ru — тема поверх Materialize 2.3.3 Палитра «тёплый нейтральный». В Materialize задаётся через --md-source: #9C4429, ниже — производные токены проекта. Контраст всех пар проверен по WCAG AA. Брейкпоинты те же, что у Materialize: s <= 600, m 601-992, l >= 993. Продакшен-версия исходника redesign/design/src/site.css (дизайн принят заказчиком). Отличия от исходника — только два: 1) добавлен блок @font-face с самостоятельным хостингом шрифтов (в макете шрифты шли с Google Fonts CDN — артефакт не пускает другие внешние хосты, см. design/README.md, раздел 4); 2) в комментариях-заголовках секций добавлены ссылки на номера блоков главной страницы (БЛОК NN · home.*) для быстрой навигации. Правил и селекторов исходник не менял — так же «идёт в бой как есть». ========================================================================== */ /* --- шрифты: самостоятельный хостинг ------------------------------------ Nunito 400/600/700/800 — вариативный файл: Google отдаёт один физический woff2 на трайб (cyrillic/latin/latin-ext), а нужный начерк браузер берёт из вариативных осей файла по объявленному font-weight. Поэтому на 4 начерка нужно всего 3 файла, а не 12. Great Vibes — статический, один начерк. Оставлены только реально нужные юникод-диапазоны: cyrillic — весь русский алфавит (включая ёЁ, U+0400–045F); latin — цифры и базовая пунктуация (U+0000–00FF); latin-ext — знак рубля ₽ живёт именно здесь (U+20AD–20C0), поэтому его нельзя выбрасывать, хотя формально это «расширенная латиница». cyrillic-ext и vietnamese выброшены — в текстах сайта не встречаются. ------------------------------------------------------------------------ */ @font-face{ font-family:'Nunito';font-style:normal;font-weight:400 800;font-display:swap; src:url('fonts/nunito-cyrillic.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face{ font-family:'Nunito';font-style:normal;font-weight:400 800;font-display:swap; src:url('fonts/nunito-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215, U+FEFF,U+FFFD; } @font-face{ font-family:'Nunito';font-style:normal;font-weight:400 800;font-display:swap; src:url('fonts/nunito-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF, U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB, U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Great Vibes';font-style:normal;font-weight:400;font-display:swap; src:url('fonts/great-vibes-cyrillic.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face{ font-family:'Great Vibes';font-style:normal;font-weight:400;font-display:swap; src:url('fonts/great-vibes-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215, U+FEFF,U+FFFD; } :root{ /* Семя динамической M3-палитры Materialize 2.3.3 — терракотовый бренд-цвет. */ --md-source:#9C4429; --hx-bg:#FBF7F2; --hx-surface:#FFFFFF; --hx-surface-2:#F5EDE4; --hx-tint-terra:#F6E7E0; --hx-tint-sage:#E8EEE8; --hx-primary:#9C4429; --hx-primary-press:#86391F; --hx-sage:#4F6355; --hx-sage-ink:#40564A; --hx-text:#2E2723; --hx-muted:#5C534B; --hx-line:#E7DDD2; --hx-radius:22px; --hx-shadow:0 1px 2px rgba(46,39,35,.05), 0 10px 28px -16px rgba(46,39,35,.22); } /* --- совместимость с Materialize 2.3.3 (общее для всех блоков) ---------- Проверка --md-source (чек-лист «боевой вёрстки», design/README.md §3): переменная в скомпилированном materialize.min.css 2.3.3 объявляется один раз в :root и НИКЕМ не читается через var(--md-source) — вся M3-палитра («--md-ref-palette-*», «--md-sys-color-*») запечена в CSS на этапе сборки Materialize под её родной цвет #006495 (проверено прямым поиском по файлу: var(--md-source) не встречается, oklch(from ...) и color-mix(...--md-source) тоже). Переопределить один --md-source в своём файле — не сработает, переопределяем сразу нужные семантические токены --md-sys-color-* терракотовой палитрой проекта (контраст уже проверен для --hx-*, см. §3). Второе несовпадение версий: в 2.1.0 (было на старом сайте) .btn заливался кнопкой-по-умолчанию, в 2.3.3 (M3) заливка требует явного класса .filled — без него .btn/.btn-large/.btn-floating остаются прозрачными. Макет писался под старое поведение и класс .filled нигде не проставлен, а трогать уже утверждённую разметку семи шаблонов ради этого не нужно — восстанавливаем заливку по умолчанию здесь, в CSS. */ :root{ /* Materialize 2.3.3: --btn-height по умолчанию 40px — на 4px меньше правила проекта «тап-цели от 44 px» (design/README.md §6). В канвасе этого не было видно: materialize-subset.css эмулирует .btn высотой 48px намеренно, для показа макета. На проде — реальная зависимая цепочка через переменную: .btn-large пересчитается как 1.5×44=66px (было 60), это не проблема. */ /* --btn-height перенесён в блок «несовместимости 7-9» ниже: 48px по макету */ --md-sys-color-primary:var(--hx-primary); --md-sys-color-on-primary:#fff; --md-sys-color-primary-container:var(--hx-tint-terra); --md-sys-color-on-primary-container:var(--hx-text); --md-sys-color-secondary:var(--hx-sage); --md-sys-color-secondary-container:var(--hx-tint-sage); --md-sys-color-on-secondary-container:var(--hx-sage-ink); --md-sys-color-outline:var(--hx-primary); --md-sys-color-outline-variant:var(--hx-line); --md-sys-color-on-surface-variant:var(--hx-muted); --md-sys-color-on-surface:var(--hx-text); /* .card по умолчанию красится в color-mix(surface, surface-tint 17%) — surface = "--hx-surface" (белые карточки по палитре проекта, а не фон страницы), surface-tint приравнен к нему же, чтобы mix ничего не подкрашивал (иначе карточки получают паразитный синеватый оттенок Materialize по умолчанию — проверено вживую на materialize.min.css). */ --md-sys-color-surface:var(--hx-surface); --md-sys-color-surface-tint:var(--hx-surface); } .btn:not(.outlined):not(.text):not(.tonal):not(.filled), .btn-large:not(.outlined):not(.text):not(.tonal):not(.filled), .btn-small:not(.outlined):not(.text):not(.tonal):not(.filled), .btn-floating:not(.outlined):not(.text):not(.tonal):not(.filled){ color:var(--md-sys-color-on-primary); background-color:var(--md-sys-color-primary); } .btn:not(.outlined):not(.text):not(.tonal):not(.filled):hover, .btn-large:not(.outlined):not(.text):not(.tonal):not(.filled):hover, .btn-small:not(.outlined):not(.text):not(.tonal):not(.filled):hover, .btn-floating:not(.outlined):not(.text):not(.tonal):not(.filled):hover{ background-color:color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 16%); } /* --- база (общее для всех блоков) --------------------------------------- */ *,*::before,*::after{box-sizing:border-box} /* Плавная прокрутка по клику на якорные ссылки (#zapis, #kontakty, оглавления .hx-toc/.hx-aside). #mobile-nav — триггер Materialize-сайднава, а не якорь: его клик-хэндлер вызывает preventDefault() раньше, чем браузер успевает проскроллить, так что это правило на сайднав не влияет. Отключается для пользователей с prefers-reduced-motion — иначе укачивает. */ @media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} } body{margin:0;background-color:var(--hx-bg);color:var(--hx-text); font-family:Nunito,"Segoe UI",system-ui,-apple-system,sans-serif; font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased} a{color:var(--hx-primary);text-decoration:none} a:hover{color:var(--hx-primary-press)} a:focus-visible,button:focus-visible{outline:2px solid var(--hx-primary);outline-offset:2px} h1,h2,h3,h4{margin:0;line-height:1.2;font-weight:700;letter-spacing:-.01em;text-wrap:pretty} p{margin:0} img{max-width:100%} figure{margin:0} fieldset{border:0;margin:0;padding:0} legend{padding:0;font-weight:700;font-size:15px;margin-bottom:8px} code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em} /* overflow-x:clip, а не hidden: hidden делает обёртку прокручиваемым контейнером, и position:sticky внутри неё перестаёт работать — липкое оглавление статьи просто уезжает вверх вместе с текстом. Проверено замером 30.08.2026: hidden и overflow-x:hidden ломают липкость, clip нет. Задача правила прежняя — не пускать страницу вбок. */ .hx-page{position:relative;max-width:100%;overflow-x:clip;background-color:var(--hx-bg)} /* .hx-container сама по себе в разметке нигде не используется — все семь шаблонов набирают секции штатным Materialize class="container". У него свой прогрессивный размер (90% → 85% → 70% ширины экрана, макс. 1280px), и на реальном Materialize 2.3.3 70% на десктопе — это заметно уже, чем задумано: у 1440px-вьюпорта контейнер сжимается до 1008px, и шапка с шестью пунктами меню перестаёт помещаться (бренд-ссылка схлопывается до нулевой ширины — проверено вживую на скомпилированном materialize.min.css). В канвасе этого не было видно: materialize-subset.css эмулирует .container фиксированными 90% без сужения. Правило ниже возвращает .container к значениям .hx-container — контейнер такой же ширины, какой стоял при утверждении макетов. */ .container{width:100%;max-width:1240px;padding:0 20px} .hx-container{width:100%;max-width:1240px;margin:0 auto;padding:0 20px} .hx-section{padding:48px 0} .hx-section--tight{padding-top:24px} .hx-band{background-color:var(--hx-surface-2)} .hx-band--terra{background-color:var(--hx-tint-terra)} /* --- типографика (общее для всех блоков) -------------------------------- */ .hx-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700; letter-spacing:.04em;text-transform:uppercase;color:var(--hx-sage-ink); background-color:var(--hx-tint-sage);border-radius:999px;padding:7px 13px} .hx-band .hx-eyebrow,.hx-band--terra .hx-eyebrow{background-color:var(--hx-surface)} .hx-h1{font-size:32px;margin:14px 0 12px} .hx-h2{font-size:26px;margin:18px 0 16px} .hx-h3{font-size:19px;margin-bottom:12px} .hx-h4{font-size:16px} .hx-lead{color:var(--hx-muted);max-width:70ch;margin-bottom:20px} .hx-small{font-size:15px;line-height:1.55} .hx-xs{font-size:13px;line-height:1.5} .hx-muted{color:var(--hx-muted)} .hx-signature{font-family:"Great Vibes",cursive;font-size:36px;line-height:1; color:var(--hx-primary);margin-bottom:18px} .hx-link-more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700} .hx-stack{display:flex;flex-direction:column;gap:10px} /* --- иконки (общее для всех блоков): цвет наследуется от родителя -------- */ .hx-icon{flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .hx-icon--primary{color:var(--hx-primary)} .hx-icon--sage{color:var(--hx-sage)} .hx-icon--bold{stroke-width:2} /* --- шапка · БЛОК 01 tpl.header ------------------------------------------ */ .hx-header{background-color:var(--hx-bg);border-bottom:1px solid var(--hx-line)} .hx-header__inner{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 0} .hx-header__brand{flex-grow:1;min-width:0} .hx-header__name{font-weight:800;font-size:16px;line-height:1.2;color:var(--hx-text)} .hx-header__role{font-size:13px;line-height:1.4;color:var(--hx-muted)} .hx-header__nav{display:none} .hx-iconbtn{display:flex;align-items:center;justify-content:center;width:44px;height:44px; border:0;padding:0;border-radius:999px;background-color:transparent;color:var(--hx-text)} .hx-iconbtn--call{background-color:var(--hx-tint-terra);color:var(--hx-primary)} .hx-header__phone{display:none;font-weight:800;font-size:17px;color:var(--hx-text)} /* --- первый экран · БЛОК 03 home.hero ------------------------------------ */ .hx-hero{padding:26px 0 30px} .hx-hero__price{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:20px} .hx-hero__photo{display:block;width:100%;height:auto;margin-top:26px; border-radius:var(--hx-radius);object-fit:cover;object-position:50% 22%;aspect-ratio:1/1} /* --- цифры опыта · БЛОК 04 home.stats ------------------------------------ */ .hx-stat{padding:16px} .hx-stat__value{display:block;font-size:26px;font-weight:800;line-height:1.2;color:var(--hx-primary)} .hx-stat__value--text{font-size:15px;padding-top:4px} .hx-stat__label{display:block;font-size:13px;line-height:1.5;color:var(--hx-muted)} /* БЛОК 05 home.honest использует только базовые .card/.hx-h3/.hx-small выше — собственных классов не заводит, отдельной секции нет. */ /* --- карточки-плитки запросов · БЛОК 06 home.problems -------------------- */ .hx-tile{display:block;padding:14px;color:var(--hx-text)} .hx-tile:hover{color:var(--hx-primary)} .hx-tile__title{font-weight:700;font-size:15px;line-height:1.35} .hx-tile--all{display:flex;align-items:center;gap:10px; background-color:var(--hx-primary);color:#fff} .hx-tile--all:hover{background-color:var(--hx-primary-press);color:#fff} /* --- услуги · БЛОК 07 home.services --------------------------------------- */ .hx-service{display:flex;flex-direction:column;height:100%} .hx-service__text{flex-grow:1;margin-bottom:20px} .hx-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:20px} .hx-price__value{font-weight:800;font-size:18px} .hx-price__note{font-size:13px;color:var(--hx-muted)} .hx-callout{background-color:var(--hx-tint-sage);border-radius:var(--hx-radius);padding:20px; color:var(--hx-sage-ink)} .hx-callout__title{color:var(--hx-text)} .hx-callout a{color:var(--hx-sage-ink)} /* --- обо мне · БЛОК 08 home.about ----------------------------------------- */ .hx-about__photo{display:block;width:100%;height:auto;border-radius:var(--hx-radius); object-fit:cover;object-position:50% 30%;aspect-ratio:4/3} .hx-figcaption{margin-top:8px;font-size:13px;line-height:1.5;color:var(--hx-muted)} .hx-fact{display:flex;gap:10px} .hx-fact__icon{margin-top:3px} .hx-facts{display:flex;flex-direction:column;gap:10px;margin-bottom:16px} /* --- шаги · БЛОК 09 home.steps --------------------------------------------- */ .hx-step{display:flex;gap:14px} .hx-step__rail{display:flex;flex-direction:column;align-items:center;flex-shrink:0} .hx-step__num{display:flex;align-items:center;justify-content:center;width:38px;height:38px; border-radius:999px;background-color:var(--hx-primary);color:#fff;font-weight:800} .hx-step__num--last{background-color:var(--hx-sage)} .hx-step__line{width:2px;flex-grow:1;background-color:var(--hx-line)} .hx-step__body{padding-bottom:22px} .hx-step__body--last{padding-bottom:0} /* --- форматы · БЛОК 10 home.formats ---------------------------------------- */ .hx-cabinet__photo{display:block;width:100%;height:auto;border-radius:var(--hx-radius); object-fit:cover;aspect-ratio:800/572} .hx-place{display:flex;gap:10px;margin-bottom:12px} .hx-place__icon{margin-top:3px} .hx-map{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; height:150px;padding:16px;text-align:center;color:#8A7A6B;background-color:var(--hx-surface-2); border:1px dashed #D9C7B4;border-radius:var(--hx-radius)} /* --- отзывы · БЛОК 11 home.reviews ----------------------------------------- */ .hx-reviews__widget{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:8px;min-height:420px;margin-top:18px;padding:20px;text-align:center;color:#8A7A6B; background-color:var(--hx-surface);border:1px dashed #D9C7B4;border-radius:var(--hx-radius)} .hx-reviews__widget>.hx-xs{max-width:70ch} /* --- блог · БЛОК 12 home.blog ----------------------------------------------- */ .hx-post{display:flex;gap:14px;align-items:center;padding:14px;color:var(--hx-text)} .hx-post:hover{color:var(--hx-primary)} .hx-post__thumb{width:64px;height:64px;border-radius:16px;flex-shrink:0; background-color:var(--hx-tint-terra)} .hx-post__thumb--sage{background-color:var(--hx-tint-sage)} .hx-post__title{font-weight:700;font-size:16px;line-height:1.3} .hx-post__meta{margin-top:4px;font-size:13px;color:var(--hx-muted)} /* --- форма · БЛОК 14 home.form (плюс общие поля форм на других страницах) -- */ .hx-form__intro{display:flex;gap:14px;align-items:center;margin-bottom:16px} .hx-avatar{width:64px;height:64px;border-radius:999px;object-fit:cover;flex-shrink:0} .hx-choice{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:10px} .hx-choice label{display:flex;align-items:center;justify-content:center;min-height:48px; padding:0 16px;border:1.5px solid var(--hx-line);border-radius:999px;background-color:#fff; color:var(--hx-muted);font-weight:700;font-size:15px} .hx-choice input{position:absolute;opacity:0;width:0;height:0} .hx-choice input:checked+span{color:var(--hx-primary)} .hx-choice label:has(input:checked){border-color:var(--hx-primary);color:var(--hx-primary)} .hx-consent{display:flex;gap:10px;align-items:flex-start;margin-bottom:16px;font-size:13px;line-height:1.5} .hx-consent input{width:22px;height:22px;flex-shrink:0;margin:2px 0 0;accent-color:var(--hx-primary)} /* Materialize рисует вокруг чекбокса круглое кольцо на :focus (не :focus-visible) — outline:3px solid --md-sys-color-secondary, border-radius:50%, outline-offset:0.5rem (8px на чекбоксе 22px). :focus срабатывает при любом клике мышью, не только с клавиатуры — после клика по чекбоксу согласия вокруг него остаётся крупное чужеродное кольцо чужого цвета (видно на скриншоте формы). Сайт везде показывает фокус только клавиатурным пользователям и своим токеном (см. правило a:focus-visible,button:focus-visible выше и .input-field input:focus) — приводим чекбокс к тому же правилу. Специфичность .hx-consent input[type=checkbox]:focus сознательно выше исходного input[type=checkbox]:focus Materialize, чтобы не зависеть от порядка подключения файлов. */ .hx-consent input[type=checkbox]:focus{outline:none} .hx-consent input[type=checkbox]:focus-visible{outline:2px solid var(--hx-primary);outline-offset:2px} .hx-privacy{display:flex;gap:8px;margin-top:14px;font-size:13px;line-height:1.5;color:var(--hx-muted)} .hx-privacy__icon{margin-top:2px} .hx-btn-block{width:100%} /* --- плашка о границах помощи · БЛОК 15 tpl.safety ------------------------- */ .hx-safety{display:flex;gap:12px;padding:18px;border-radius:var(--hx-radius); background-color:var(--hx-tint-sage);color:var(--hx-sage-ink);font-size:15px;line-height:1.55} .hx-safety a{color:var(--hx-sage-ink);text-decoration:underline} .hx-safety__icon{margin-top:2px} /* --- подвал · БЛОК 16 tpl.footer ------------------------------------------- */ .hx-footer{background-color:var(--hx-surface-2);padding:32px 0 96px} .hx-footer__name{font-weight:800;margin-bottom:4px} .hx-footer__role{font-size:13px;color:var(--hx-muted);margin-bottom:16px} .hx-footer__nav{display:flex;flex-direction:column;gap:2px} .hx-footer__nav a{display:flex;align-items:center;min-height:44px;font-size:15px} .hx-footer__col-title{font-size:13px;text-transform:uppercase;letter-spacing:.07em; font-weight:700;color:var(--hx-muted);margin-bottom:14px} .hx-footer__contacts{display:flex;flex-direction:column;margin-bottom:12px;font-size:13px} .hx-footer__contacts a{display:flex;align-items:center;min-height:44px} .hx-footer__address{font-size:13px;line-height:1.5;color:var(--hx-muted);margin-bottom:6px} .hx-footer__legal{margin-top:16px;font-size:13px;color:var(--hx-muted)} /* БЛОК 17 tpl.fab использует только штатный Materialize .fixed-action-btn — собственных классов не заводит, отдельной секции нет. */ /* ========================================================================== ПЛАНШЕТ И ВЫШЕ (m, >= 601) ========================================================================== */ @media only screen and (min-width:601px){ .hx-choice{max-width:420px} } /* ========================================================================== ДЕСКТОП (l, >= 993) ========================================================================== */ @media only screen and (min-width:993px){ body{font-size:18px} .container{padding:0 40px} .hx-container{padding:0 40px} .hx-section{padding:88px 0} .hx-section--tight{padding-top:40px} .hx-eyebrow{font-size:13px;letter-spacing:.07em;padding:8px 16px} .hx-h1{font-size:58px;margin:22px 0 20px} .hx-h2{font-size:40px;margin:24px 0 22px} .hx-h3{font-size:22px;margin-bottom:16px} .hx-h4{font-size:18px} .hx-lead{max-width:65ch;font-size:18px;margin-bottom:28px} .hx-small{font-size:16px;line-height:1.6} .hx-xs{font-size:14px} .hx-signature{font-size:42px;margin-bottom:26px} .hx-header__inner{min-height:84px;gap:24px} .hx-header__name{font-size:19px} .hx-header__nav{display:flex;align-items:center;gap:22px;flex-grow:1} /* Селектор ограничен прямыми детьми: со вторым уровнем внутри шапки появились ссылки выпадающего списка, а им нужны перенос строки и свои размеры. Пункт первого уровня с подменю — .hx-menu__top, он в этом же правиле, чтобы соседние пункты стояли на одной базовой линии. */ .hx-header__nav>a,.hx-menu__top{display:inline-flex;align-items:center;min-height:44px; white-space:nowrap;font-weight:600;font-size:16px;color:var(--hx-text)} .hx-header__nav>a:hover,.hx-menu__top:hover{color:var(--hx-primary)} .hx-header__brand{flex-grow:0} .hx-header__phone{display:inline-flex;align-items:center;min-height:44px} .hx-hero{padding:64px 0} .hx-hero__price{padding:0;margin-bottom:22px;background-color:transparent;box-shadow:none} .hx-hero__photo{margin-top:0;aspect-ratio:4/5} .hx-hero__lead{font-size:20px} .hx-hero__buttons{display:flex;gap:14px} .hx-stack--row-l{flex-direction:row;gap:14px} .hx-stat{padding:24px} .hx-stat__value{font-size:34px} .hx-stat__value--text{font-size:22px;padding-top:8px} .hx-stat__label{font-size:16px} .hx-tile{padding:22px} .hx-tile__title{font-size:18px} .hx-price__value{font-size:22px} .hx-price__note{font-size:14px} .hx-callout{display:flex;align-items:center;gap:28px;padding:28px} .hx-callout__body{flex-grow:1} .hx-about__photo{aspect-ratio:5/6} .hx-figcaption{font-size:14px;margin-top:10px} .hx-facts{gap:14px;margin-bottom:28px} .hx-step{display:block} .hx-step__rail{flex-direction:row;align-items:center;gap:12px;margin-bottom:14px} .hx-step__num{width:44px;height:44px;font-size:19px} .hx-step__line{width:auto;height:2px;flex-grow:1} .hx-step__body{padding-bottom:0} .hx-place{margin-bottom:16px} .hx-map{height:230px} .hx-reviews__widget{min-height:440px;padding:36px;margin-top:34px} .hx-post{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden} .hx-post__thumb{width:100%;height:180px;border-radius:0} .hx-post__body{padding:24px} .hx-post__title{font-size:20px} .hx-post__meta{margin:0 0 8px;font-size:14px} .hx-form__intro{gap:16px;margin-bottom:20px} .hx-avatar{width:72px;height:72px} .hx-privacy{margin-top:16px;font-size:14px} .hx-safety{padding:24px;font-size:16px} .hx-service__text{margin-bottom:24px} .hx-price{margin-bottom:24px} .hx-footer{padding:56px 0 40px} .hx-footer__name{font-size:19px} .hx-footer__role{font-size:16px;margin-bottom:18px} .hx-footer__nav a{min-height:44px;font-size:16px} .hx-footer__contacts{font-size:16px} .hx-footer__address{font-size:16px} .hx-footer__legal{margin-top:20px;font-size:14px} } /* ========================================================================== ДОПОЛНЕНИЯ К СЕТКЕ И КОМПОНЕНТАМ ВАЖНО (найдено при боевой вёрстке, не было видно в канвасе): в Materialize 2.3.3 .row — это CSS Grid (display:grid;grid-template-columns:repeat(12,1fr); gap:1.5rem), а классы .sN/.mN/.lN задают только grid-column:span N и БОЛЬШЕ НИЧЕГО — никакой запасной ширины в процентах, в отличие от старой float-сетки (2.1.0/materialize-subset.css), на которую рассчитан этот файл. Модификатор .hx-row-flex переводит ряд в display:flex ради карточек одной высоты (.hx-row-flex>.col>.card{height:100%}) — но в display:flex свойство grid-column не действует вовсе, и колонки без явной ширины схлопываются к контенту: сетка карточек полностью ломается. Ниже — классическая процентная 12-колоночная раскладка для .col внутри .hx-row-flex (те же имена классов s/m/l), с гаттером через padding+отрицательный margin — не через flex gap: gap не «ужимает» проценты flex-basis сам по себе (проверено вживую: 3×33.333% + gap:24px переполняют ряд и лишняя колонка переносится на новую строку), а calc() на 36 комбинаций — источник ошибок. ========================================================================== */ /* Materialize 2.3.3: .row (CSS Grid) не задаёт собственный margin-bottom — в materialize-subset.css стояло 20px, и на этом держался свободный интервал после любого ряда без явного отступа у следующего элемента (проверено вживую: «Все статьи» после сетки карточек блога слипался вплотную). Соседние вертикальные margin схлопываются по правилам обычного потока (у .hx-callout{margin-top:28px} и подобных — побеждает больший), поэтому эта строка ничего не задвоит там, где отступ уже задан явно. */ .row{margin-bottom:20px} .hx-row-flex{display:flex;flex-wrap:wrap;align-items:stretch;row-gap:26px;column-gap:0; margin-left:-12px;margin-right:-12px} .hx-row-flex>.col{float:none;padding-left:12px;padding-right:12px} .hx-row-flex>.col.s1{flex:0 0 8.333333%;max-width:8.333333%} .hx-row-flex>.col.s2{flex:0 0 16.666667%;max-width:16.666667%} .hx-row-flex>.col.s3{flex:0 0 25%;max-width:25%} .hx-row-flex>.col.s4{flex:0 0 33.333333%;max-width:33.333333%} .hx-row-flex>.col.s5{flex:0 0 41.666667%;max-width:41.666667%} .hx-row-flex>.col.s6{flex:0 0 50%;max-width:50%} .hx-row-flex>.col.s7{flex:0 0 58.333333%;max-width:58.333333%} .hx-row-flex>.col.s8{flex:0 0 66.666667%;max-width:66.666667%} .hx-row-flex>.col.s9{flex:0 0 75%;max-width:75%} .hx-row-flex>.col.s10{flex:0 0 83.333333%;max-width:83.333333%} .hx-row-flex>.col.s11{flex:0 0 91.666667%;max-width:91.666667%} .hx-row-flex>.col.s12{flex:0 0 100%;max-width:100%} @media only screen and (min-width:601px){ .hx-row-flex>.col.m1{flex:0 0 8.333333%;max-width:8.333333%} .hx-row-flex>.col.m2{flex:0 0 16.666667%;max-width:16.666667%} .hx-row-flex>.col.m3{flex:0 0 25%;max-width:25%} .hx-row-flex>.col.m4{flex:0 0 33.333333%;max-width:33.333333%} .hx-row-flex>.col.m5{flex:0 0 41.666667%;max-width:41.666667%} .hx-row-flex>.col.m6{flex:0 0 50%;max-width:50%} .hx-row-flex>.col.m7{flex:0 0 58.333333%;max-width:58.333333%} .hx-row-flex>.col.m8{flex:0 0 66.666667%;max-width:66.666667%} .hx-row-flex>.col.m9{flex:0 0 75%;max-width:75%} .hx-row-flex>.col.m10{flex:0 0 83.333333%;max-width:83.333333%} .hx-row-flex>.col.m11{flex:0 0 91.666667%;max-width:91.666667%} .hx-row-flex>.col.m12{flex:0 0 100%;max-width:100%} } @media only screen and (min-width:993px){ .hx-row-flex>.col.l1{flex:0 0 8.333333%;max-width:8.333333%} .hx-row-flex>.col.l2{flex:0 0 16.666667%;max-width:16.666667%} .hx-row-flex>.col.l3{flex:0 0 25%;max-width:25%} .hx-row-flex>.col.l4{flex:0 0 33.333333%;max-width:33.333333%} .hx-row-flex>.col.l5{flex:0 0 41.666667%;max-width:41.666667%} .hx-row-flex>.col.l6{flex:0 0 50%;max-width:50%} .hx-row-flex>.col.l7{flex:0 0 58.333333%;max-width:58.333333%} .hx-row-flex>.col.l8{flex:0 0 66.666667%;max-width:66.666667%} .hx-row-flex>.col.l9{flex:0 0 75%;max-width:75%} .hx-row-flex>.col.l10{flex:0 0 83.333333%;max-width:83.333333%} .hx-row-flex>.col.l11{flex:0 0 91.666667%;max-width:91.666667%} .hx-row-flex>.col.l12{flex:0 0 100%;max-width:100%} } .hx-row-top{align-items:flex-start} .hx-row-flex>.col>.card{height:100%} .hx-row-tiles>.col>.card{height:100%} /* Карточка-ячейка сетки: собственный нижний отступ ей не нужен и вредит. При height:100% он не даёт зазора между рядами (замер показывал 0 px) — расстояние между рядами задаёт row-gap на самом ряду. У карточек, которые стоят в колонке рядом с другими элементами (цена в первом экране), отступ остаётся: их отбирает :only-child. */ .hx-row-flex>.col>.card:only-child{margin-bottom:0} /* Список фактов, занимающий колонку целиком, тоже не должен добавлять свой отступ поверх row-gap. */ .hx-row-flex>.col>.hx-facts:last-child{margin-bottom:0} /* Шаги соединены сплошной вертикальной линией — разрыв между рядами её порвёт. */ .hx-row-flex:has(>.col>.hx-step){row-gap:0} .hx-hero .row{align-items:center;row-gap:0} /* --- вертикальный ритм: правила, общие для всех типов страниц ----------- Заголовок и его текст стоят близко, подблоки внутри секции — далеко. Значения ниже задают мобильный шаг, десктопный — в блоке min-width:993px. ------------------------------------------------------------------------ */ /* Лид внутри строки с аватаром — часть flex-строки, отступ снизу ей не нужен: при align-items:center он смещает текст вверх относительно картинки. */ .hx-form__intro .hx-lead{margin-bottom:0} /* Новый подзаголовок после списка фактов начинает новый смысловой кусок. */ .hx-facts+.hx-h3{margin-top:24px} /* Заголовок карточки Materialize: 8px под ним мало для 19px кегля. */ .card .card-content .card-title.hx-h3{margin-bottom:12px} /* Врезка после ряда карточек — отдельный блок, а не продолжение ряда. */ .hx-callout{margin-top:20px} .hx-block{display:block} .hx-normal{font-weight:400} .hx-btn-block{width:100%} .hx-btn-wide{width:100%} .hx-header__brand{display:flex;flex-direction:column;justify-content:center;min-height:44px;color:var(--hx-text)} .hx-header__name,.hx-header__role{display:block} .hx-header__actions{display:flex;align-items:center;gap:8px;flex-shrink:0} .hx-hero__lead{margin-bottom:20px} .hx-hero__buttons{margin-bottom:0} .hx-service{display:flex;flex-direction:column} .hx-service>.card-content{display:flex;flex-direction:column;flex-grow:1} .hx-callout__btn{flex-shrink:0} .hx-fact>.hx-small{display:block} .hx-place{display:flex;gap:10px} .hx-place>span{display:block} .hx-place .hx-h4{margin-bottom:2px} .hx-place .hx-small{display:block} .hx-step__rail{display:flex} .hx-step__body{display:block} .hx-step__body .hx-small{display:block} /* БЛОК 10 home.formats: отступ под вкладками и панелями. */ .hx-tabs{margin-top:16px} .hx-formats__panel{margin-top:20px} .hx-post{overflow:hidden} .hx-post__body{flex-grow:1} .hx-post__title{margin:0} /* БЛОК 13 home.faq: аккордеон вопросов-ответов. */ .hx-faq{margin-bottom:18px} .hx-faq__q{flex-grow:1;font-weight:700;font-size:16px;line-height:1.35;margin:0} /* Состояния аккордеона. В макете эти строки лежали в materialize-subset.css — файле, который на сайт не ставится, поэтому в бою они пропали: открытый и закрытый вопрос выглядели одинаково, а стрелка показывала противоположное состояние, потому что нарисована в разметке и сама не менялась. Проверено вживую 30.08.2026 кликом по FAQ на этой же странице. Во всех шевронах разметки теперь один путь, «вниз», разворот делает CSS по классу active. */ .collapsible>li.active>.collapsible-header{color:var(--hx-primary)} .collapsible .collapsible-header .hx-chevron{margin-left:auto;flex-shrink:0} .collapsible>li.active>.collapsible-header .hx-chevron{transform:rotate(180deg)} /* БЛОК 14 home.form: поля заявки. */ .hx-fieldset{margin-bottom:16px} .hx-messengers{margin-bottom:22px} .hx-form .card-content{padding:20px} /* Materialize 2.3.3: .input-field не задаёт собственный margin-bottom вовсе (в materialize-subset.css, на котором проверялся макет, стояло 18px — этим и держался видимый интервал между полями). Без этой строки поля формы слипаются вплотную друг к другу и к следующему за ними фильдсету или чекбоксу согласия — проверено вживую на реальном Materialize. */ .input-field.outlined{margin-bottom:18px} /* --- выпадающий список в форме ------------------------------------------- */ /* Список нативный: class="browser-default" говорит Materialize не подменять его своим выпадающим меню. Причина — мобильных визитов больше десктопных, а на телефоне системный барабан выбора удобнее нарисованного списка и не требует ни строчки JS. Рамка и высота те же, что у текстовых полей. Стрелка нарисована рамками псевдоэлемента, а не картинкой: так она берёт цвет из токена и не тянет за собой data-URI с зашитым цветом. */ .hx-select{position:relative} .hx-select>select{display:block;width:100%;height:52px;padding:0 42px 0 14px; border:1.5px solid var(--hx-line);border-radius:14px;background-color:#fff; color:var(--hx-text);font-family:inherit;font-size:17px;line-height:normal; -webkit-appearance:none;-moz-appearance:none;appearance:none} .hx-select>select:focus{outline:2px solid var(--hx-primary);outline-offset:2px} .hx-select::after{content:"";position:absolute;right:18px;bottom:21px; width:9px;height:9px;border-right:2px solid var(--hx-muted); border-bottom:2px solid var(--hx-muted);transform:rotate(45deg);pointer-events:none} /* Несовместимость 7 (найдена 30.08.2026 при проверке аккордеона). Materialize 2.3.3 позиционирует подпись поля абсолютно внутрь рамки (position:absolute; top:16px; left:16px) и поднимает её только когда поле в фокусе или заполнено. У нас у полей есть placeholder, поэтому на загрузке подпись ложилась поверх плейсхолдера и читалась как вторая строка под рамкой. В макете подпись стоит НАД полем — так и оставляем: это осознанное решение дизайна, крупная постоянная подпись вместо плавающей. В materialize-subset.css это правило было, но тот файл в бой не идёт. */ .hx-page .input-field.outlined>label{position:static;display:block;transform:none; font-weight:700;font-size:15px;line-height:1.4;margin-bottom:6px;color:var(--hx-text)} /* Materialize 2.3.3: .card .card-content p{margin:0} — специфичность (2 класса + тег) — перебивает margin-bottom/margin-top одного класса у

-компонентов внутри карточек: у .hx-price, .hx-service__text и .hx-privacy это обнуляет запланированный отступ (проверено вживую — первой попытки с одним классом .hx-page не хватило: 2 класса против «2 класса + тег» проигрывают именно на счёте тегов, а не побеждают на счёте классов). Третий класс-квалификатор .card-content в селекторе добавляет специфичности по классам (3 против 2) — этого достаточно независимо от тегов. */ .hx-page .card-content .hx-service__text{margin-bottom:20px} .hx-page .card-content .hx-price{margin-bottom:20px} .hx-page .card-content .hx-privacy{margin-top:14px} @media only screen and (min-width:993px){ .hx-stack--row-l .hx-btn-block{width:auto} .hx-formats__panel{margin-top:24px} .hx-messengers{margin-bottom:26px} .hx-faq{margin-bottom:22px} .hx-faq__q{font-size:18px} /* Эти три правила живут здесь, а не в основном десктопном блоке: их базовые версии объявлены выше в «ДОПОЛНЕНИЯХ», то есть после него, и перебивали бы десктопные значения при равной специфичности. */ /* Ниже — значения, чьи базовые версии объявлены в «ДОПОЛНЕНИЯХ», то есть после основного десктопного блока. Здесь они уже не перебиваются. */ .hx-hero__lead{margin-bottom:28px} .hx-header__actions{gap:12px} .hx-row-flex{row-gap:32px} .hx-facts+.hx-h3{margin-top:32px} .card .card-content .card-title.hx-h3{margin-bottom:14px} .hx-callout{margin-top:28px} .hx-form .card-content{padding:28px} .hx-post__body{flex-grow:0} .hx-page .card-content .hx-service__text{margin-bottom:24px} .hx-page .card-content .hx-price{margin-bottom:24px} .hx-page .card-content .hx-privacy{margin-top:16px} } /* ========================================================================== ШАБЛОН «УСЛУГА» — компоненты, которых не было на главной. Мобильные значения здесь, десктопные — в блоке min-width:993px ниже. ========================================================================== */ /* --- хлебные крошки ----------------------------------------------------- */ .hx-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;list-style:none; margin:0 0 0 -6px;padding:12px 0 0;font-size:14px;line-height:1.4} .hx-crumbs li{display:flex;align-items:center;gap:4px;min-width:0} .hx-crumbs a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px; color:var(--hx-muted)} .hx-crumbs a:hover{color:var(--hx-primary)} .hx-crumbs__sep{color:#C9B9A8} .hx-crumbs__current{display:inline-flex;align-items:center;min-height:44px;padding:0 6px; color:var(--hx-text);font-weight:600} /* --- оглавление длинной страницы: якоря без JS --------------------------- */ .hx-toc{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:16px 0 0;padding:0} .hx-toc a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px; border:1.5px solid var(--hx-line);border-radius:999px;background-color:var(--hx-surface); color:var(--hx-text);font-weight:600;font-size:15px} .hx-toc a:hover{border-color:var(--hx-primary);color:var(--hx-primary)} .hx-section--flush{padding-bottom:24px} /* --- первый экран услуги: над ним хлебные крошки, поэтому отступ меньше --- */ .hx-hero--service{padding-top:10px} /* --- врезки ------------------------------------------------------------- */ .hx-callout--terra{background-color:var(--hx-tint-terra);color:var(--hx-text)} .hx-callout--terra a{color:var(--hx-primary)} .hx-note{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:var(--hx-radius); background-color:var(--hx-tint-sage);color:var(--hx-sage-ink)} /* --- панель неактивной вкладки ----------------------------------------- В артборде вкладки статичны, поэтому вторая панель скрыта классом. На сайте видимостью управляет Materialize: при переключении он выставляет панели инлайновый display, который перекрывает это правило. ------------------------------------------------------------------------ */ .hx-tabpane--hidden{display:none} /* --- кейсы из практики --------------------------------------------------- */ .hx-cases{margin-bottom:18px} .hx-case__head{flex-grow:1;min-width:0} .hx-case__title{font-weight:700;font-size:16px;line-height:1.35;margin:0} .hx-case__lead{display:block;margin-top:4px;font-size:13px;line-height:1.5; font-weight:400;color:var(--hx-muted)} .hx-case .hx-h4{margin-top:20px;margin-bottom:10px} .hx-case .hx-h4:first-child{margin-top:0} .hx-quote{margin-bottom:0;padding:2px 0 2px 14px;border-left:3px solid var(--hx-primary); font-size:15px;line-height:1.55} .hx-case__meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;padding-top:14px; border-top:1px solid var(--hx-line);font-size:13px;color:var(--hx-muted)} .hx-case__meta>span{display:block} /* --- блок цены ----------------------------------------------------------- */ .hx-pricebox{padding:20px} .hx-pricebox__value{display:block;font-size:34px;font-weight:800;line-height:1.1; color:var(--hx-primary)} .hx-pricebox__note{display:block;margin-top:4px;font-size:15px;color:var(--hx-muted)} .hx-pricebox__divider{margin:16px 0} .hx-pricebox .hx-facts{margin-bottom:20px} .hx-price__why{margin-bottom:20px} .hx-row-why{margin-bottom:0} /* --- краткий блок о специалисте ------------------------------------------ */ .hx-bio{padding:20px} .hx-bio__row{margin-bottom:0} .hx-bio__photo{display:block;width:100%;height:auto; border-radius:var(--hx-radius);object-fit:cover;object-position:50% 28%;aspect-ratio:4/3} .hx-bio__lead{margin-bottom:14px} /* ========================================================================== ШАБЛОН «УСЛУГА» — ДЕСКТОП (l, >= 993) ========================================================================== */ @media only screen and (min-width:993px){ .hx-crumbs{font-size:15px;padding-top:18px} .hx-toc{gap:10px;margin-top:20px} .hx-toc a{font-size:16px;padding:0 20px} .hx-section--flush{padding-bottom:40px} .hx-hero--service{padding-top:36px;padding-bottom:56px} .hx-note{padding:20px} .hx-cases{margin-bottom:24px} .hx-case .hx-h4{margin-top:26px;margin-bottom:10px} .hx-case__title{font-size:19px} .hx-case__lead{font-size:14px} .hx-quote{font-size:16px;padding-left:18px} .hx-case__meta{font-size:14px;gap:6px 28px} .hx-pricebox{padding:28px} .hx-pricebox__value{font-size:44px} .hx-pricebox__note{font-size:16px} .hx-pricebox__divider{margin:20px 0} .hx-pricebox .hx-facts{margin-bottom:26px} .hx-price__why{margin-bottom:26px} .hx-bio{padding:28px} .hx-bio__photo{aspect-ratio:1/1} .hx-bio__lead{margin-bottom:18px} /* Длина строки. На главной списки фактов лежали в узких колонках и в ограничении не нуждались. На услуге те же списки стоят в широких колонках, поэтому мера строки задаётся здесь — по тому же принципу, что и .hx-lead. */ .hx-facts{max-width:70ch} .hx-callout__body .hx-small{max-width:74ch} .hx-price__why{max-width:70ch} .hx-cases,.hx-cases__note{max-width:760px} } /* ========================================================================== ШАБЛОН «ЗАПРОС» — компоненты, которых не было на главной и услуге. Мобильные значения здесь, десктопные — в блоке min-width:993px ниже. Блок стоит последним в файле, поэтому базовые правила здесь перебивают одноимённые из ранних медиасекций. Новых селекторов это не касается, а переопределений существующих в блоке нет намеренно. ========================================================================== */ /* --- быстрый переход из первого экрана к техникам самопомощи ------------- Смысловой центр шаблона: человек в остром состоянии получает помощь раньше, чем предложение записаться. Это ссылка, а не кнопка: она никуда не отправляет, а просто прокручивает страницу. ------------------------------------------------------------------------ */ .hx-hero__jump{display:flex;align-items:center;gap:12px;min-height:44px; margin-bottom:20px;padding:14px 16px;border-radius:var(--hx-radius); background-color:var(--hx-tint-sage);color:var(--hx-sage-ink)} .hx-hero__jump:hover{background-color:#DFE8DF;color:var(--hx-sage-ink)} .hx-hero__jump-body{flex-grow:1;min-width:0} .hx-hero__jump-body strong{font-size:16px;line-height:1.35} /* --- карточка с техникой, признаком или примером ------------------------- Один компонент на три блока: техники самопомощи, три слоя признаков, разбор «тревога или интуиция». Отличаются только содержимым. ------------------------------------------------------------------------ */ .hx-tech{height:100%} .hx-tech__icon{display:block;margin-bottom:12px} .hx-tech .hx-facts{margin-bottom:0} .hx-tech .hx-h4{margin-bottom:10px} .card-content>.hx-facts:last-child{margin-bottom:0} /* Найдено при вёрстке страницы запроса: .hx-quote — единственный компонент шаблона, впервые оказавшийся внутри .card-content (карточки «Тревога тормозит» / «Интуиция двигает вперёд» в problem.intuition). .hx-quote несёт собственный margin-bottom:0, а .hx-tech .hx-quote{margin-bottom:16px} (2 класса) проигрывает специфичности Materialize .card .card-content p (2 класса + тег) — тот же капкан, что уже решён для .hx-price/ .hx-service__text/.hx-privacy (см. «ДОПОЛНЕНИЯ» выше), тем же приёмом: добавлен третий класс-квалификатор .hx-page (в разметке .hx-tech — предок .card-content, а не наоборот, поэтому квалификатор добавлен снаружи, а не между ними). Проверено вживую: без этой строки зазор между цитатой и списком фактов — 0px. */ .hx-page .hx-tech .hx-quote{margin-bottom:16px} /* --- абзацы кейса без подзаголовков ------------------------------------- */ .hx-case__text{margin-top:16px} /* --- ритм разделов с чередованием текста, рядов и врезок ----------------- */ .hx-lead+.hx-h3{margin-top:4px} .hx-row-flex+.hx-h3{margin-top:8px} .hx-tile+.hx-note,.row+.hx-note{margin-top:4px} /* ========================================================================== ШАБЛОН «ЗАПРОС» — ДЕСКТОП (l, >= 993) ========================================================================== */ @media only screen and (min-width:993px){ .hx-hero__jump{gap:16px;margin-bottom:28px;padding:18px 22px} .hx-hero__jump-body strong{font-size:18px} .hx-tech__icon{margin-bottom:14px} .hx-page .hx-tech .hx-quote{margin-bottom:20px} .hx-tech .hx-h4{margin-bottom:12px} .hx-case__text{margin-top:20px} .hx-lead+.hx-h3{margin-top:6px} .hx-row-flex+.hx-h3{margin-top:12px} } /* ========================================================================== ШАБЛОН «О СПЕЦИАЛИСТЕ» — компоненты, которых не было раньше. Блок стоит последним в файле: базовые правила здесь перебивают одноимённые из ранних медиасекций. Переопределений существующих селекторов тут нет намеренно, все селекторы новые. Мобильные значения здесь, десктопные — в блоке min-width:993px ниже. ========================================================================== */ /* --- галерея документов -------------------------------------------------- Дипломы разной ориентации: альбомные удостоверения и книжные свидетельства. Поэтому у плитки фиксированная пропорция, а картинка вписывается целиком через object-fit:contain: обрезать документ нельзя, его должно быть видно до нажатия. Белая подложка нужна светлым бланкам, чтобы не сливались с тонированной полосой секции. ------------------------------------------------------------------------ */ .hx-docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px; list-style:none;margin:0;padding:0} .hx-doc{display:flex;flex-direction:column} .hx-doc__img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;padding:6px; background-color:var(--hx-surface);border:1px solid var(--hx-line);border-radius:14px} .hx-doc__caption{display:block;margin-top:8px;font-size:13px;line-height:1.45; color:var(--hx-muted)} .hx-docs__actions{margin-top:22px} /* --- текст карточки и список ссылок под ним ------------------------------ У абзацев глобально margin:0, у .hx-facts только margin-bottom, поэтому между описанием карточки и списком внутри неё зазор выходил нулевым. По правилу отступ задаётся нижнему элементу пары. ------------------------------------------------------------------------ */ .hx-tech .card-content>.hx-small+.hx-facts{margin-top:16px} /* --- ссылка-пункт в списке фактов ---------------------------------------- В блоке направлений пункт списка целиком состоит из ссылки: это отдельная навигационная цель, а не ссылка внутри предложения, поэтому исключение WCAG 2.5.8 на неё не распространяется и нужны честные 44 px. ------------------------------------------------------------------------ */ .hx-fact__link{display:inline-flex;align-items:center;min-height:44px} /* --- абзацы личной истории: подзаголовок и его текст идут парами ---------- */ .hx-story__text{margin-bottom:22px} .hx-story__text:last-of-type{margin-bottom:16px} /* --- подпись под фотографией внутри колонки ------------------------------ */ .hx-about__photo+.hx-figcaption{margin-bottom:0} /* --- сворачиваемый список курсов ---------------------------------------- Тот же компонент, что кейсы на странице услуги, но внутри не абзацы, а список фактов: заголовок аккордеона занимает уровень h4, поэтому внутри подзаголовков уже нет. ------------------------------------------------------------------------ */ .hx-case>.hx-facts{margin-bottom:0} /* ========================================================================== ШАБЛОН «О СПЕЦИАЛИСТЕ» — ДЕСКТОП (l, >= 993) ========================================================================== */ @media only screen and (min-width:993px){ .hx-docs{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 24px} .hx-doc__img{padding:10px;border-radius:16px} .hx-doc__caption{margin-top:12px;font-size:14px} .hx-docs__actions{margin-top:32px} .hx-tech .card-content>.hx-small+.hx-facts{margin-top:20px} .hx-story__text{margin-bottom:26px;max-width:70ch} .hx-story__text:last-of-type{margin-bottom:20px} } /* ========================================================================== ШАБЛОН «ХАБ РАЗДЕЛА» — компоненты, которых не было раньше. Блок стоит последним в файле: базовые правила здесь перебивают одноимённые из ранних медиасекций. Переопределений существующих селекторов тут нет намеренно, все селекторы новые. Мобильные значения здесь, десктопные — в блоке min-width:993px ниже. ========================================================================== */ /* --- развилка «ситуация и подходящая услуга» ------------------------------ Единственный новый компонент шаблона. Строка целиком — одна ссылка, а не ссылка внутри предложения: исключение WCAG 2.5.8 на неё не распространяется, нужны честные 44 px. Вложенных интерактивных элементов внутри нет намеренно. На мобильной ширине ситуация и услуга идут друг под другом, на десктопной становятся двумя колонками: слева строка, в которой человек себя узнаёт, справа название услуги, куда она ведёт. Отступ между строками задаёт gap списка, поэтому собственный margin карточки Materialize обнуляется. ------------------------------------------------------------------------ */ .hx-choose{display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0} .hx-choose__row{display:flex;flex-direction:column;gap:8px;min-height:44px;margin:0; padding:16px 18px;color:var(--hx-text)} .hx-choose__row:hover{background-color:var(--hx-tint-terra)} .hx-choose__q{display:block;font-size:16px;line-height:1.5;color:var(--hx-muted)} .hx-choose__a{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px; line-height:1.35;color:var(--hx-primary)} .hx-choose__row:hover .hx-choose__a{color:var(--hx-primary-press)} .hx-choose__a .hx-icon{flex-shrink:0} /* --- заливная кнопка внутри врезки ---------------------------------------- Правило `.hx-callout a` перекрашивает любую ссылку внутри врезки в цвет её текста, и у заливной кнопки текст сливается с фоном: замер показывал терракоту на терракоте, контраст 1:1, надпись не видно вовсе. Все врезки до хаба обходились кнопками outlined, поэтому дефект не всплывал. Селектор специфичнее `.hx-callout a` и `.hx-callout--terra a`, поэтому перебивает оба и в обычном состоянии, и при наведении. ------------------------------------------------------------------------ */ .hx-callout .btn:not(.outlined), .hx-callout .btn-large:not(.outlined){color:#fff} /* ========================================================================== ШАБЛОН «ХАБ РАЗДЕЛА» — ДЕСКТОП (l, >= 993) ========================================================================== */ @media only screen and (min-width:993px){ .hx-choose{gap:12px} .hx-choose__row{flex-direction:row;align-items:center;gap:28px;padding:20px 26px} .hx-choose__q{flex-grow:1;font-size:17px} .hx-choose__a{flex-shrink:0;width:290px;font-size:17px} } /* ========================================================================== ШАБЛОН «КОНТАКТЫ» — компоненты, которых не было раньше. Блок стоит последним в файле: базовые правила здесь перебивают одноимённые из ранних медиасекций. Переопределений существующих селекторов тут нет намеренно, кроме модификатора карты — он для того и заведён. Мобильные значения здесь, десктопные — в блоке min-width:993px ниже. ========================================================================== */ /* --- канал связи ---------------------------------------------------------- Единственный новый компонент шаблона. Карточка целиком — одна ссылка: это самостоятельная навигационная цель, а не ссылка внутри предложения, исключение WCAG 2.5.8 на неё не распространяется, нужны честные 44 px. Вложенных интерактивных элементов внутри нет намеренно, поэтому весь текст лежит в span, а не в p: p внутри a допустим, но лишний блочный уровень мешает выровнять иконку по центру карточки. Собственный margin карточки Materialize гасится ячейкой сетки (.hx-row-flex>.col>.card:only-child), высоту выравнивает height:100%. ------------------------------------------------------------------------ */ .hx-channel{display:flex;align-items:center;gap:14px;height:100%;min-height:44px; padding:16px 18px;color:var(--hx-text)} .hx-channel:hover{background-color:var(--hx-tint-terra);color:var(--hx-text)} .hx-channel__body{min-width:0} .hx-channel__name{display:block;font-weight:700;font-size:16px;line-height:1.3} .hx-channel__value{display:block;margin-top:4px;font-size:15px;line-height:1.4; font-weight:600;color:var(--hx-primary);overflow-wrap:anywhere} .hx-channel:hover .hx-channel__value{color:var(--hx-primary-press)} .hx-channel__note{display:block;margin-top:6px;font-size:13px;line-height:1.45; color:var(--hx-muted)} /* --- широкая карта -------------------------------------------------------- Модификатор заглушки .hx-map: на контактах карта не подпись под колонкой, а самостоятельный блок во всю ширину. Высота задана жёстко — интерактивная карта грузится асинхронно, без фиксированной высоты подгрузка сдвинет вёрстку и сломает CLS, а он на этом сайте почти нулевой. ------------------------------------------------------------------------ */ .hx-map--wide{height:260px;margin-top:16px} /* --- выравнивание пункта-ссылки ------------------------------------------- Системная правка, а не контактная. У .hx-fact иконка прижата к первой строке (margin-top:3px) — это верно для абзаца, но не для пункта, который целиком состоит из ссылки: .hx-fact__link растягивается до 44 px и центрирует текст внутри, а иконка остаётся наверху. Замер показывал расхождение центров 10 px и на контактах, и на странице «о специалисте», где этот пункт появился впервые. Лечится центрированием строки целиком. Высоту не меняет: строку держит те же 44 px ссылки, а не иконка. ------------------------------------------------------------------------ */ .hx-fact:has(>.hx-small>.hx-fact__link){align-items:center} .hx-fact:has(>.hx-small>.hx-fact__link)>.hx-fact__icon{margin-top:0} /* --- ритм блоков контактов ----------------------------------------------- */ .hx-facts+.hx-xs{margin-top:-4px} /* Фото кабинета в карточке — вертикальный кадр 640x853. Базовое правило .hx-cabinet__photo рассчитано на горизонтальные 800x572 и при cover срезало бы креслам ноги: центр вертикального снимка приходится на стену, а не на мебель. Кадр переведён в 4:3 и смещён вниз по object-position. */ /* НОВОЕ (боевая вёрстка контактов): реальный Materialize оборачивает каждый .materialboxed в свой

при M.AutoInit() — в materialize-subset.css этой обёртки нет, поэтому в макете селектор смежных соседей срабатывал, а на боевой странице между h3 и картинкой встаёт чужой div и margin переставал применяться (зазор схлопывался в 0px, замер на боевом файле). Тот же класс проблем, что уже решён для .hx-quote на запросе: тип селектора не переживает вставку рантайм-обёртки. Правило продублировано на .material-placeholder — так оно верно и с Materialbox, и без него. */ .hx-cabinet .hx-h3+.hx-cabinet__photo, .hx-cabinet .hx-h3+.material-placeholder{margin:14px 0 20px} .hx-cabinet .hx-cabinet__photo{aspect-ratio:4/3;object-position:50% 66%} .hx-cabinet .hx-note{margin-top:16px} /* ========================================================================== ШАБЛОН «КОНТАКТЫ» — ДЕСКТОП (l, >= 993) ========================================================================== */ @media only screen and (min-width:993px){ .hx-channel{gap:16px;padding:24px} .hx-channel__name{font-size:17px} .hx-channel__value{margin-top:6px;font-size:17px} .hx-channel__note{margin-top:8px;font-size:14px} .hx-map--wide{height:400px;margin-top:22px} .hx-cabinet .hx-h3+.hx-cabinet__photo{margin:16px 0 24px} /* Карточки кабинетов выровнены по высоте, но у второй нет фотографии. Врезка прижимается к низу, чтобы пустота читалась как воздух между содержимым и примечанием, а не как обрыв карточки. На узких ширинах карточки не растягиваются, свободного места нет, и auto даёт те же 0, поэтому базовые 16 px остаются в силе. */ .hx-cabinet{display:flex;flex-direction:column;height:100%} .hx-cabinet>.card-content{display:flex;flex-direction:column;flex-grow:1} .hx-cabinet .hx-note{margin-top:auto;padding-top:20px} } /* ========================================================================== ШАБЛОН «ЛЕНТА БЛОГА» — компоненты, которых не было на прежних типах. Мобильные значения здесь, десктопные — в блоке min-width:993px ниже. Два новых компонента: чипы рубрик и пагинация. Карточка материала — это .hx-post с главной, ей добавлен модификатор --feed и абзац-подводка. ========================================================================== */ /* --- первый экран ленты: без фотографии, поэтому уже основного ---------- */ .hx-hero--lenta{padding-bottom:6px} .hx-hero--lenta .hx-hero__lead{margin-bottom:0} /* --- чипы рубрик -------------------------------------------------------- */ /* Визуально то же семейство, что .hx-toc: пилюля, рамка, 44 px по высоте. Отличие одно и осмысленное — активный чип залит терракотой, потому что у фильтра, в отличие от оглавления, есть текущее состояние. */ .hx-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:16px 0 0;padding:0} .hx-chips__item{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px; border:1.5px solid var(--hx-line);border-radius:999px;background-color:var(--hx-surface); color:var(--hx-text);font-weight:600;font-size:15px} a.hx-chips__item:hover{border-color:var(--hx-primary);color:var(--hx-primary)} .hx-chips__count{font-weight:700;font-size:13px;color:var(--hx-muted)} /* Белый счётчик на терракоте даёт 6,42 при пороге 4,5. Приглушать его светлым оттенком нельзя: #F3D9CF роняет контраст до 4,78, а по макету держим не ниже 5,5. Второстепенность передаётся размером, не цветом. */ .hx-chips__item--current{border-color:var(--hx-primary);background-color:var(--hx-primary);color:#fff} .hx-chips__item--current .hx-chips__count{color:#fff} /* --- карточка материала в ленте ----------------------------------------- */ /* Своих иллюстраций у статей нет: на текущем сайте у всех тридцати двух стоит одна и та же фотография Илоны. Поэтому вместо картинки — тонкая цветная полоса-маркер рубрики. Терракота — психология, шалфейный — речь. Смысл продублирован словами в .hx-post__meta, цветом ничего не передаётся. Когда появятся настоящие иллюстрации, модификатор снимается и возвращается штатная картинка на 180 px из основного блока .hx-post. */ .hx-post--feed{flex-direction:column;align-items:stretch;gap:0;padding:0} .hx-post--feed .hx-post__thumb{width:100%;height:6px;border-radius:0; background-color:var(--hx-primary)} .hx-post--feed .hx-post__thumb--sage{background-color:var(--hx-sage)} .hx-post--feed .hx-post__body{padding:18px} /* В базовой карточке .hx-post рубрика и заголовок стоят вплотную: там это компактная строка с картинкой слева, и слипание не читалось. В ленте карточка вертикальная и крупная, поэтому подпись отделяется от заголовка. Правится только модификатор — утверждённая главная не затрагивается. */ .hx-post--feed .hx-post__meta{margin:0 0 8px} .hx-post__excerpt{margin-top:10px;font-size:14px;line-height:1.55;color:var(--hx-muted)} /* --- пагинация ---------------------------------------------------------- */ .hx-pager{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:26px} .hx-pager__page,.hx-pager__current{display:inline-flex;align-items:center;justify-content:center; min-width:44px;min-height:44px;padding:0 12px;border-radius:14px;font-weight:700;font-size:16px} .hx-pager__page{border:1.5px solid var(--hx-line);background-color:var(--hx-surface); color:var(--hx-text)} .hx-pager__page:hover{border-color:var(--hx-primary);color:var(--hx-primary)} .hx-pager__current{background-color:var(--hx-primary);color:#fff} .hx-pager__next{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px; border:1.5px solid var(--hx-line);border-radius:999px;background-color:var(--hx-surface); color:var(--hx-text);font-weight:700;font-size:15px} .hx-pager__next:hover{border-color:var(--hx-primary);color:var(--hx-primary)} .hx-pager__next .hx-icon{flex-shrink:0} .hx-pager__info{width:100%;margin-top:4px;font-size:14px;color:var(--hx-muted)} /* ========================================================================== ШАБЛОН «ЛЕНТА БЛОГА» — ДЕСКТОП (l, >= 993) ========================================================================== */ @media only screen and (min-width:993px){ .hx-hero--lenta{padding-bottom:20px} .hx-chips{gap:10px;margin-top:20px} .hx-chips__item{font-size:16px;padding:0 20px} .hx-chips__count{font-size:14px} .hx-post--feed .hx-post__body{padding:24px} .hx-post__excerpt{margin-top:10px;font-size:15px} .hx-pager{gap:10px;margin-top:34px} .hx-pager__info{width:auto;margin-top:0;margin-left:auto;font-size:15px} } /* ========================================================================== НЕСОВМЕСТИМОСТИ 7-9, найдены 30.08.2026 сплошной сверкой боевой страницы с утверждённым артбордом (9 расхождений из 13 замеренных элементов). Общий корень у всех трёх: оформление лежало в materialize-subset.css — файле, который существует только для показа макета и на сайт не ставится. Всё, что там было дизайном проекта, а не пересказом Materialize, в бою пропадало молча: разметка на месте, классы на месте, вид чужой. ========================================================================== */ /* 7. Поля формы. В 2.3.3 текстовое поле — подчёркнутая строка во всю ширину родителя по контенту: замер давал 266x23 px вместо 560x52, скругление 4 вместо 14, прозрачный фон вместо белого и серую рамку вместо линии темы. Возвращаем оформление макета. Правило textarea оставлено про запас: поле свободного текста из формы убрано, но система полей остаётся целой. */ .hx-page .input-field input[type=text], .hx-page .input-field input[type=tel], .hx-page .input-field input[type=email], .hx-page .input-field textarea{display:block;width:100%;box-sizing:border-box; background-color:#fff;border:1.5px solid var(--hx-line);border-radius:14px; padding:0 14px;height:52px;font-family:inherit;font-size:17px; line-height:normal;color:var(--hx-text);box-shadow:none} .hx-page .input-field textarea{height:auto;min-height:96px;padding:12px 14px; resize:none;line-height:1.5} .hx-page .input-field input:focus, .hx-page .input-field textarea:focus{outline:2px solid var(--hx-primary); outline-offset:1px;border-color:var(--hx-line);box-shadow:none} .hx-page .input-field .supporting-text{display:block;margin-top:6px; font-size:13px;line-height:1.5;color:var(--hx-muted)} /* 8. Скругления. Тема строит форму на двух радиусах: 22 px у крупных поверхностей и 999 px у кнопок. Materialize даёт свои 12 и 4 px, отчего карточки становятся жёстче, а кнопки-пилюли превращаются в прямоугольники. */ .hx-page .card{border-radius:var(--hx-radius)} .hx-page .btn,.hx-page .btn-large,.hx-page .btn-small{border-radius:999px} .hx-page .collapsible{border-radius:var(--hx-radius);overflow:hidden; background-color:var(--hx-surface);box-shadow:var(--hx-shadow)} .hx-page .collapsible .collapsible-header{padding:18px} /* Отступ — только у раскрытого пункта. Закрытое тело Materialize держит как height:0 с overflow:hidden, а overflow обрезает по padding-box: безусловный padding-bottom давал 18 px, в которые проступала первая строка ответа. */ .hx-page .collapsible>li.active>.collapsible-body{padding:0 18px 18px} /* 9. Высоты кнопок. Прежний фикс поднимал --btn-height с 40 до 44 px, чтобы попасть в правило «тап-цели от 44 px», но макет утверждён с 48 px, а .btn-large пересчитывался из токена как 1.5x44=66 вместо 56. Ставим значения макета: 48 и 56, оба выше порога 44. */ :root{--btn-height:48px} .hx-page .btn-large{height:56px} /* 10. Центрирование содержимого растянутых кнопок. В macete materialize-subset.css у .btn/.btn-large/.btn-floating уже был прописан justify-content:center — в канвасе кнопки всегда выглядели центрированными, поэтому проблему не было видно. Настоящий Materialize 2.3.3 центрует .btn/.btn-large только по вертикали (align-items:center), без justify-content: пока кнопка не шире своего содержимого, разница не заметна, но .hx-btn-block/.hx-btn-wide растягивают её на всю ширину контейнера — и надпись прижималась к левому краю вместо центра (замер на `build/text.html`: «Дипломы и сертификаты» leftGap 25px/rightGap 118px вместо 71/71). Аналогично .btn-floating — не flex, а CSS Grid без justify-content, из-за чего иконка в плавающей кнопке (БЛОК 17 tpl.fab) прижималась к левому краю (замер: leftGap 0px/rightGap 30px на кнопке 56×56). Правки — только здесь: сам .btn без модификаторов и так выглядит центрированным, пока не растянут. */ .hx-btn-block,.hx-btn-wide{justify-content:center} .btn-floating{justify-content:center} /* ========================================================================== ШАБЛОН «СТАТЬЯ БЛОГА» — компоненты, которых не было на прежних типах. Мобильные значения здесь, десктопные — в блоке min-width:993px ниже. Новых компонента три: строка автора и даты, каркас «текст плюс липкое оглавление» и .hx-prose — вид содержимого, которое приходит из редактора. ========================================================================== */ /* --- первый экран статьи: без фотографии, как и в ленте ------------------ */ .hx-hero--article{padding-bottom:6px} .hx-hero--article .hx-hero__lead{margin-bottom:0} /* --- строка автора и даты ------------------------------------------------ */ /* Оба значения уходят в разметку Article: автор в author, дата в datePublished. Ссылка на страницу специалиста — сигнал E-E-A-T, поэтому имя автора кликабельно, а не набрано текстом. */ .hx-artmeta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 9px;margin-bottom:16px; font-size:14px;color:var(--hx-muted)} .hx-artmeta a{display:inline-flex;align-items:center;min-height:44px; color:var(--hx-muted);font-weight:700;text-decoration:underline;text-underline-offset:3px} .hx-artmeta a:hover{color:var(--hx-primary)} .hx-artmeta__sep{color:#C9B9A8} /* --- каркас: текст и оглавление ------------------------------------------ */ /* На мобильной ширине это обычный поток: оглавление сверху горизонтальными пилюлями, ровно как .hx-toc на остальных типах страниц. На десктопной превращается в две колонки, и оглавление липнет к верху экрана. Разметка при этом одна, различие только здесь, в CSS. */ .hx-article{display:grid;grid-template-columns:minmax(0,1fr);gap:0} .hx-aside{margin-bottom:26px} .hx-aside .hx-toc{margin-top:12px} /* --- проза: содержимое из поля content ----------------------------------- */ /* Редактор набирает в MODX голые теги без классов, поэтому вид задаётся по тегам, а не по классам, — это единственное место в теме, где так. Мера строки 58ch. Единица ch — ширина знака «0», а он в Nunito заметно шире средней кириллической строчной: замер дал 9,00 px на знак против 10,8 px у нуля. При max-width:68ch в строку вставало 82 знака вместо требуемых ТЗ 65-75. 58ch дают 626 px и ровно 70 знаков. */ .hx-prose{max-width:58ch} .hx-prose>*:first-child{margin-top:0} .hx-prose>*:last-child{margin-bottom:0} .hx-prose p{margin:0 0 18px} .hx-prose ul,.hx-prose ol,.hx-prose figure{margin:0 0 18px} /* Заголовки внутри прозы мельче, чем в полноширинных секциях: 40 px над колонкой в 640 px читаются как плакат и рвут поток чтения. Иерархия при этом сохраняется — h2 заметно крупнее h3, h1 страницы крупнее обоих. */ .hx-prose h2{font-size:24px;margin:34px 0 12px;line-height:1.25; font-weight:700;letter-spacing:-.01em} .hx-prose h3{font-size:19px;margin:26px 0 10px;line-height:1.3;font-weight:700} .hx-prose h4{font-size:17px;margin:22px 0 8px;line-height:1.35;font-weight:700} /* Materialize снимает у списков маркеры и отступ. Возвращаем их своими: точка рисуется псевдоэлементом, поэтому не зависит от шрифта и одинаково выглядит во всех браузерах. */ .hx-prose ul,.hx-prose ol{padding-left:0;list-style:none} .hx-prose li{position:relative;padding-left:26px;margin-bottom:9px} .hx-prose li:last-child{margin-bottom:0} .hx-prose ul>li::before{content:"";position:absolute;left:5px;top:.62em; width:7px;height:7px;border-radius:50%;background-color:var(--hx-primary)} .hx-prose ol{counter-reset:hx-ol} .hx-prose ol>li{padding-left:34px;counter-increment:hx-ol} .hx-prose ol>li::before{content:counter(hx-ol) ".";position:absolute;left:0;top:0; font-weight:700;color:var(--hx-primary)} /* Прямая речь автора: вопрос читателю, на котором стоит остановиться. Та же терракотовая линия слева, что у .hx-quote в кейсах. */ .hx-prose blockquote{margin:0 0 18px;padding:4px 0 4px 16px; border-left:3px solid var(--hx-primary);font-size:17px;line-height:1.55; font-weight:600;color:var(--hx-text)} .hx-prose a{text-decoration:underline;text-underline-offset:3px} .hx-prose strong{font-weight:700} .hx-prose img{display:block;width:100%;height:auto;border-radius:var(--hx-radius)} .hx-prose figcaption{margin-top:10px;font-size:13px;line-height:1.5;color:var(--hx-muted)} /* Врезка внутри текста живёт по мере строки, как и абзацы: вынести её шире нельзя — ширину каптирует сама .hx-prose, а ломать это отрицательными полями в поле, которое правит редактор, слишком хрупко. Своё у врезки только вертикальное поле: она отделяется от текста заметнее абзаца. */ .hx-prose .hx-callout{margin:26px 0} /* ========================================================================== ШАБЛОН «СТАТЬЯ БЛОГА» — ДЕСКТОП (l, >= 993) ========================================================================== */ @media only screen and (min-width:993px){ .hx-hero--article{padding-bottom:20px} .hx-artmeta{gap:2px 12px;margin-bottom:22px;font-size:15px} /* Две колонки. Текст держит меру строки, оглавление занимает поле справа, которое иначе осталось бы пустым, и липнет к верху экрана. Обе колонки стоят в первом ряду, поэтому порядок в разметке (сначала оглавление) на вид не влияет, а для чтения с экрана остаётся правильным. */ .hx-article{grid-template-columns:minmax(0,1fr) 280px;gap:0 60px;align-items:start} .hx-prose{grid-column:1;grid-row:1} .hx-aside{grid-column:2;grid-row:1;position:sticky;top:24px;margin-bottom:0} /* Пилюли разворачиваются в столбец и теряют рамку: в вертикальном списке она превращает оглавление в частокол. Текущий раздел отмечает терракотовая линия слева, её ставит Materialize ScrollSpy классом active. */ .hx-aside .hx-toc{flex-direction:column;gap:0;margin-top:14px} .hx-aside .hx-toc a{width:100%;justify-content:flex-start;padding:9px 0 9px 15px; border:0;border-left:2px solid var(--hx-line);border-radius:0; background-color:transparent;font-size:15px;font-weight:600;line-height:1.35} .hx-aside .hx-toc a:hover{border-left-color:var(--hx-primary);color:var(--hx-primary)} .hx-aside .hx-toc a.active{border-left-color:var(--hx-primary);color:var(--hx-primary)} .hx-prose p{margin:0 0 20px} .hx-prose ul,.hx-prose ol,.hx-prose figure{margin:0 0 20px} .hx-prose h2{font-size:30px;margin:42px 0 14px} .hx-prose h3{font-size:22px;margin:32px 0 12px} .hx-prose h4{font-size:18px;margin:26px 0 10px} .hx-prose li{margin-bottom:10px} .hx-prose blockquote{margin:0 0 20px;padding:4px 0 4px 20px;font-size:18px} .hx-prose figcaption{font-size:14px} .hx-prose .hx-callout{margin:32px 0} } /* ========================================================================== ШАБЛОН «ТЕКСТОВАЯ» — компоненты, которых не было на прежних типах. Блок стоит последним в файле: базовые правила здесь перебивают одноимённые из ранних медиасекций. Переопределений существующих селекторов тут нет намеренно, все селекторы новые. Мобильные значения здесь, десктопные — в блоке min-width:993px ниже. Новых компонента два: таблица и карточка-ссылка внутри прозы. Каркас «текст плюс липкое оглавление» (.hx-article, .hx-aside) и сама .hx-prose взяты у статьи без единой правки. ========================================================================== */ /* --- первый экран текстовой страницы: без фотографии, как у ленты и статьи -- */ .hx-hero--text{padding-bottom:6px} .hx-hero--text .hx-hero__lead{margin-bottom:0} /* --- правка системы: кнопка внутри прозы --------------------------------- Правило .hx-prose a подчёркивает любую ссылку внутри прозы — так и надо для ссылок в предложениях. Но врезка внутри текста несёт кнопку, а кнопка это тоже , и подчёркивание превращало её надпись в ссылку. Найдено при сборке текстовой страницы 30.08.2026; статья блога, нарисованная накануне, болела тем же — она ещё не принята, поэтому правится здесь, в общей теме. Селектор .hx-prose .btn — два класса против класса и тега у .hx-prose a, поэтому перебивает его. -------------------------------------------------------------------------- */ .hx-prose .btn,.hx-prose .btn-large{text-decoration:none} /* --- таблица внутри прозы ------------------------------------------------- Редактор набирает её в MODX голыми тегами, без единого класса, поэтому вид задаётся по тегу — как и у остальной прозы. Линии только горизонтальные: вертикальные превращают короткую таблицу цен в бухгалтерскую сетку. overflow-wrap:break-word страхует от длинного слова в ячейке. Именно break-word, а не anywhere: anywhere меняет и min-content ячейки, из-за чего узкая колонка сжимается до предела и «5 000 ₽» разваливается на две строки даже при неразрывном пробеле. Проверено на этой же таблице. -------------------------------------------------------------------------- */ .hx-prose table{width:100%;margin:0 0 18px;border-collapse:collapse; font-size:15px;line-height:1.5} .hx-prose caption{caption-side:top;padding-bottom:10px;text-align:left; font-size:13px;line-height:1.5;color:var(--hx-muted)} .hx-prose th,.hx-prose td{padding:11px 14px;text-align:left;vertical-align:top; border-bottom:1px solid var(--hx-line);overflow-wrap:break-word} .hx-prose thead th{background-color:var(--hx-surface-2);font-weight:700; color:var(--hx-text);white-space:nowrap} .hx-prose tbody th{font-weight:700;color:var(--hx-text);white-space:nowrap} .hx-prose td{color:var(--hx-muted)} .hx-prose tbody tr:last-child th,.hx-prose tbody tr:last-child td{border-bottom:0} /* Обёртка для широкой таблицы. Ширина прозы 626 px, и таблица из трёх колонок в неё не влезает на мобильной: без обёртки страница поехала бы вбок, а это прямое нарушение требования ТЗ. Внутри рамки таблица скроллится по горизонтали, страница остаётся неподвижной. Обёртку ставит редактор — единственная вольность, которую от него требует шаблон. tabindex="0" в разметке обязателен: прокручиваемая область без него недостижима с клавиатуры (WCAG 2.1.1). Ограничение для редактора: внутри обёртки должна быть КОРОТКОЙ, в одну строку. Её box шириной с таблицу (480 px), а видно только ширину контейнера (349 px на мобильной) — длинная подпись обрежется на середине слова, и добраться до хвоста можно будет только прокруткой. Пояснение к таблице ставится обычным абзацем после неё, а не в подпись. */ .hx-table{margin:0 0 18px;overflow-x:auto;border:1px solid var(--hx-line); border-radius:14px;background-color:var(--hx-surface); /* Тень-подсказка о прокрутке. Без неё таблица просто обрывается на середине слова, и понять, что вбок есть ещё содержимое, неоткуда: на телефоне полоса прокрутки появляется только во время самой прокрутки. Четыре слоя: две «крышки» цветом фона едут вместе с содержимым (background-attachment:local) и закрывают тень, когда прокручивать в эту сторону больше нечего; две тени приколоты к краям (scroll). */ background-image: linear-gradient(to right,var(--hx-surface) 30%,rgba(255,255,255,0)), linear-gradient(to left,var(--hx-surface) 30%,rgba(255,255,255,0)), linear-gradient(to right,rgba(46,39,35,.13),rgba(46,39,35,0)), linear-gradient(to left,rgba(46,39,35,.13),rgba(46,39,35,0)); background-position:left center,right center,left center,right center; background-repeat:no-repeat; background-size:28px 100%,28px 100%,14px 100%,14px 100%; background-attachment:local,local,scroll,scroll} .hx-table>table{margin:0;min-width:480px} .hx-table>table caption{padding:12px 14px 10px} .hx-table>table thead th:first-child,.hx-table>table tbody th{padding-left:14px} .hx-table:focus-visible{outline:2px solid var(--hx-primary);outline-offset:2px} /* --- карточка-ссылка внутри прозы ----------------------------------------- Второй новый компонент. Карточка целиком — одна ссылка, вложенных интерактивных элементов внутри нет, поэтому весь текст лежит в span, а не в p: то же устройство, что у .hx-channel на контактах и .hx-choose на хабе. Исключение WCAG 2.5.8 на такую ссылку не распространяется — это самостоятельная навигационная цель, нужны честные 44 px, и высота карточки их заведомо перекрывает. Один компонент на две страницы: здесь это виды сертификатов, на /materialy/ — десять PDF-чек-листов. Меняются иконка, подпись и href. -------------------------------------------------------------------------- */ .hx-cards{display:grid;grid-template-columns:1fr;gap:12px;margin:0 0 18px} .hx-card{display:flex;gap:14px;padding:18px;border:1.5px solid var(--hx-line); border-radius:var(--hx-radius);background-color:var(--hx-surface); color:var(--hx-text)} /* Правило .hx-prose a подчёркивает любую ссылку внутри прозы — так и должно быть для ссылок в предложениях. Но карточка целиком тоже ссылка, и подчёркивание красит весь её текст, включая цену. Селектор с квалификатором .hx-prose a.hx-card специфичнее (0,2,1 против 0,1,1) и перебивает его. Подчёркивается только заголовок карточки: он и есть та часть, по которой читатель понимает, что это ссылка. */ .hx-prose a.hx-card{text-decoration:none} .hx-prose a.hx-card .hx-card__title{text-decoration:underline;text-underline-offset:3px; text-decoration-color:var(--hx-line)} a.hx-card:hover{border-color:var(--hx-primary)} a.hx-card:hover .hx-card__title{color:var(--hx-primary);text-decoration-color:var(--hx-primary)} .hx-card__icon{flex-shrink:0;margin-top:2px} .hx-card__body{display:flex;flex-direction:column;min-width:0} .hx-card__title{font-weight:700;font-size:17px;line-height:1.3} .hx-card__text{margin-top:12px;font-size:14px;line-height:1.55;color:var(--hx-muted)} /* Цена и подпись под ней — намеренно плотная пара, как в .hx-price на главной: подпись поясняет цифру и читается вместе с ней, а не как отдельная строка. */ .hx-card__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px; margin-top:20px;font-weight:800;font-size:19px;color:var(--hx-primary)} .hx-card__note{font-weight:600;font-size:13px;color:var(--hx-muted)} /* ========================================================================== ШАБЛОН «ТЕКСТОВАЯ» — ДЕСКТОП (l, >= 993) ========================================================================== */ @media only screen and (min-width:993px){ .hx-hero--text{padding-bottom:20px} .hx-prose table{margin:0 0 20px;font-size:16px} .hx-prose th,.hx-prose td{padding:13px 16px} .hx-prose caption{font-size:14px} .hx-table{margin:0 0 20px} .hx-table>table caption{padding:14px 16px 12px} .hx-table>table thead th:first-child,.hx-table>table tbody th{padding-left:16px} /* Две колонки: карточек на странице обычно две-четыре, и в один столбец они растягивают прозу вниз без пользы. Ширина колонки 306 px — тот же порядок, что у карточки услуги в сетке из трёх на десктопе. */ .hx-cards{grid-template-columns:1fr 1fr;gap:14px;margin:0 0 20px} .hx-card{padding:20px} .hx-card__title{font-size:18px} .hx-card__text{margin-top:14px;font-size:15px} .hx-card__price{margin-top:24px;font-size:20px} .hx-card__note{font-size:14px} } /* ========================================================================== ЧАНК «tpl.modal» — быстрая запись поверх страницы (chunks/common/tpl.modal.html) Ни одно из девяти принятых заказчиком боевых полотен (build/*.html) не содержит .modal-элементов, поэтому эти правила не меняют их вид ни на пиксель — они начинают действовать только на новых страницах из chunks/templates/, где вызывается [[$tpl.modal]]. ========================================================================== */ .hx-page .modal.hx-modal{border-radius:var(--hx-radius);max-width:600px;width:90%; box-shadow:var(--hx-shadow)} .hx-page .modal.hx-modal .modal-content{padding:28px 28px 24px} .hx-modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .hx-modal__head .hx-h2{margin:2px 0 0} .hx-modal__close{flex-shrink:0;color:var(--hx-muted);background-color:var(--hx-surface-2)} .hx-modal .hx-messengers{margin:16px 0} .hx-modal .hx-form{margin-top:4px} .hx-modal .input-field.outlined{margin-bottom:14px} /* ========================================================================== ДВУХУРОВНЕВОЕ МЕНЮ ШАПКИ Перенесено из design/src/site.css после приёмки примера на макете главной 31.08.2026 (design/README.md, раздел 7и). Один компонент на обе ширины, механика разная и это осознанно: на десктопе — выпадающая панель под пунктом, на телефоне — раскрывающийся пункт внутри сайднава. Правило содержимого: в списке не больше восьми ссылок; если в разделе страниц больше, девятой идёт «Смотреть все» на хаб раздела. Восемь — не круглое число ради круглого: панель на девять строк по 44 px уже выше 400 px и на ноутбуке с высотой окна 700 px перекрывает первый экран целиком. JS не нужен ни там, ни там: десктоп держится на :hover и :focus-within, телефон — на штатном Materialize .collapsible внутри .sidenav. ========================================================================== */ /* --- телефон и планшет: подменю внутри сайднава -------------------------- */ /* Сам .hx-menu на этих ширинах не виден: его прячет .hx-header__nav{display:none}. Про специфичность. Все правила ниже начинаются с .hx-page — и это не запас «на всякий случай», а необходимость. Materialize описывает пункт сайднава как .sidenav li>a (класс и два тега), вложенный список — как .sidenav .collapsible-body>ul, а этот же файл выше переопределяет заголовок аккордеона селектором .hx-page .collapsible .collapsible-header. Двух классов слева этим правилам проиграешь: замер на боевой странице с настоящим Materialize показал padding 18px вместо заданных 32 и margin 12px, которого без правки нет. .hx-page даёт третий класс и снимает вопрос. Materialize рисует .collapsible как карточку — с фоном, тенью и скруглением, а внутри сайднава это же и сбрасывает. Правило дублирует сброс из materialize-subset.css, который на сайт не ставится. */ .hx-subnav{margin:0;background-color:transparent;box-shadow:none;border-radius:0} .hx-subnav>li+li{border-top:0} /* Materialize вешает на .collapsible-header псевдоэлемент ::after со стрелкой из шрифта Material Symbols. Шрифт на сайте не подключён, а место занимается: замер на боевой странице — 27 px пустоты справа от нашего SVG-шеврона. Правило было адресовано только .hx-subnav (мобильное подменю в шапке), но .collapsible-header используется на каждой странице в блоке FAQ — там артефакт остался: рядом с нашим SVG-шевроном вылезал квадрат-заглушка отсутствующего символа шрифта (виден на скриншоте FAQ на боевой главной). Снимаем псевдоэлемент везде, где стоит .hx-page, а не только в сайдонаве. */ .hx-page .collapsible-header::after{content:none} /* Этот же файл выше задаёт раскрытому телу аккордеона поля 0 18px 18px — это правило для карточек вопросов, где текст ответа не должен липнуть к краю. В сайднаве оно сдвигает весь второй уровень вправо на лишние 18 px (замер на боевой странице: текст подпункта на 62 px вместо 44). Снимаем адресно; четыре класса нужны, чтобы перебить те три. */ .hx-page .collapsible.hx-subnav>li.active>.collapsible-body{padding:0} /* Пункт первого уровня с подменю выглядит ровно как соседние «Услуги» и «Блог»: та же коробка 12/16, та же пилюля, та же высота 48. Отличают его только шеврон справа и цвет в раскрытом состоянии. */ .hx-page .sidenav .hx-subnav .hx-subnav__toggle{display:flex;align-items:center;gap:10px; height:48px;margin:0 12px;padding:0 16px;border:0;border-radius:100px; background-color:transparent;font-weight:600;font-size:inherit;line-height:1.3; color:var(--hx-text)} .hx-page .sidenav .hx-subnav>li.active>.hx-subnav__toggle{color:var(--hx-primary)} .hx-page .sidenav .hx-subnav__list{list-style:none;margin:0;padding:0 0 10px} /* Второй уровень сдвинут на 16 px относительно первого: текст встаёт на 44 px от края сайднава против 28 px у пунктов первого уровня. Поле справа уже (12 против 16) — на 300-пиксельный сайднав под текст остаётся 232 px, и все восемь формулировок влезают в строку, включая самые длинные «Тревога и панические атаки» и «Самооценка и неуверенность» (замер: девять пунктов по 44 px, переносов нет). height:auto всё равно обязателен: у Materialize пункт сайднава описан как .sidenav li>a{height:48px} — высота фиксированная, а не минимальная. Без height:auto пункт, который когда-нибудь всё же перенесётся (формулировка длиннее или узкий телефон), обрежется и наедет на соседний. */ .hx-page .sidenav .hx-subnav__list a{display:flex;align-items:center;gap:8px; height:auto;min-height:44px;margin:0 12px;padding:6px 12px 6px 32px; font-weight:400;font-size:15px;line-height:1.35;color:var(--hx-muted)} .hx-page .sidenav .hx-subnav__list a:hover{color:var(--hx-primary)} .hx-page .sidenav .hx-subnav__all{font-weight:700;color:var(--hx-primary)} /* ========================================================================== ДВУХУРОВНЕВОЕ МЕНЮ — ДЕСКТОП (l, >= 993) ========================================================================== */ @media only screen and (min-width:993px){ .hx-menu{position:relative} .hx-menu__top{gap:6px} .hx-menu:hover .hx-menu__chev, .hx-menu:focus-within .hx-menu__chev{transform:rotate(180deg)} /* Панель начинается вплотную к пункту (top:100%), а видимый зазор делает её собственный padding-top. Если развести их отступом, между пунктом и панелью появится «мёртвая» полоса: курсор пересекает её, hover слетает, и меню закрывается на полпути. 28 px — это 20 px до нижней границы шапки (пункт высотой 44 стоит по центру полосы в 84) плюс 8 px зазора, так что панель встаёт под шапку, а не поверх её линии. Сдвиг влево на 23 px = 1 px рамки + 8 px внутреннего поля списка + 14 px поля ссылки: текст пунктов встаёт ровно под текстом пункта первого уровня, а не с уступом. */ .hx-menu__panel{position:absolute;top:100%;left:-23px;z-index:900; padding-top:28px;visibility:hidden;opacity:0; transition:opacity .14s ease,visibility .14s ease} .hx-menu:hover>.hx-menu__panel, .hx-menu:focus-within>.hx-menu__panel{visibility:visible;opacity:1} .hx-menu__list{list-style:none;margin:0;padding:8px;width:304px; background-color:var(--hx-surface);border:1px solid var(--hx-line); border-radius:18px;box-shadow:var(--hx-shadow)} .hx-menu__list a{display:flex;align-items:center;gap:8px;min-height:44px; padding:8px 14px;border-radius:12px;white-space:normal; font-weight:600;font-size:15px;line-height:1.3;color:var(--hx-text)} .hx-menu__list a:hover{background-color:var(--hx-surface-2);color:var(--hx-primary)} /* Девятый пункт — не такой же запрос, а выход на весь раздел. Отделён линией и цветом, иначе читается как ещё один пункт списка. Линия висит на самом li, а не на ссылке: у ссылки скруглённый фон подсветки, и граница поверх него срезала бы углы. Селектор через :has, а не :last-child, — «Смотреть все» появляется только когда страниц больше восьми, и у коротких разделов лишней черты быть не должно. */ .hx-menu__list li:has(>.hx-menu__all){margin-top:6px;padding-top:6px; border-top:1px solid var(--hx-line)} .hx-menu__list .hx-menu__all{font-weight:700;color:var(--hx-primary)} }