/* ========================================================================== EngPulse — сайт (слой поверх лендинга). Токены и база — engpulse-b.css. Новые сущности: карточка продукта, плашки-приглашения, каналы, блог, шапка сайта с активным пунктом, page-hero внутренних страниц, фильтры. ========================================================================== */ /* Токены, которых нет в engpulse-b.css (значения из css/engpulse.css лендинга) */ :root{--sky:#EAF1F8;--sky-soft:#F1F6FB} /* --- Шапка сайта: активный пункт ---------------------------------------- */ .nav__link.is-active{color:var(--navy);font-weight:800} .nav__link.is-active::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;background:var(--coral);border-radius:2px} .nav__link{position:relative} /* Активный пункт (#110, п.2): у десктопного аналога сверху — 800 и планка, у мобильного был только тон. Теперь признаков три: цвет, начертание, геометрия. */ .mobile-menu__link.is-active{color:var(--coral);font-weight:800;position:relative} .mobile-menu__link.is-active::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:4px;height:20px;background:var(--coral);border-radius:2px} /* --- Page-hero внутренних страниц --------------------------------------- */ .page-hero{background:var(--navy);color:#fff;padding:calc(var(--header-h) + clamp(40px,6vw,72px)) 0 clamp(40px,6vw,72px);position:relative;overflow:hidden} .page-hero__inner{max-width:820px} .page-hero h1{margin:14px 0 0} .page-hero__sub{margin:18px 0 0;color:rgba(255,255,255,.82);font-size:clamp(16px,1.5vw,19px);line-height:1.6;max-width:680px} .page-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:18px} .crumbs a{color:rgba(255,255,255,.72)} .crumbs a:hover{color:#fff} /* Разделитель принадлежит СЛЕДУЮЩЕЙ крошке и рисуется её псевдоэлементом. Отдельным он был самостоятельным flex-элементом и переносился сам по себе: строка заканчивалась висячим слешем, а название товара уезжало вниз. Между ::before и текстом нет пробела — значит, нет и места для переноса. */ .crumbs > * + *::before{content:"/";margin-right:8px;opacity:.45} /* Текущую страницу НЕ приглушаем дополнительно. Она и так отличается от ссылок цветом (--ink-50 против --ink-70 на светлых секциях), а лишняя непрозрачность .75 роняла её до 3.13:1 при 8.67:1 у соседних ссылок — то есть единственный неинтерактивный элемент строки становился самым нечитаемым, и это при 12px в верхнем регистре. Замерено в браузере. */ /* --- Карточка продукта (единый компонент на весь сайт) ------------------ */ .pgrid{display:grid;grid-template-columns:1fr;gap:20px} @media (min-width:640px){.pgrid{grid-template-columns:1fr 1fr}} @media (min-width:1000px){.pgrid{grid-template-columns:repeat(3,1fr)}} .pcard{display:flex;flex-direction:column;background:#fff;border:2px solid var(--navy);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:22px;transition:transform .2s var(--ease),box-shadow .2s var(--ease)} .pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .pcard__top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px} .pcard__aud{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-pill);background:var(--sky);color:var(--navy)} .pcard__aud--tutor{background:var(--navy);color:#fff} .pcard__tag{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-50);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 10px} .pcard__title{font-size:clamp(19px,1.7vw,22px);letter-spacing:-.02em} .pcard__benefit{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--ink-70)} /* Короткое «что внутри» карточки (#121). Маркеры задаём явно: в проекте list-style сброшен глобально, без них пункты сливаются с обычным текстом. */ .pcard__inside{margin:12px 0 0} /* Не --ink-50: на 11px эта подпись даёт 4.38:1 — ниже AA. Тон тише пунктов, но читаемый (5.51:1); ниже по иерархии его держат размер и капитель. */ .pcard__inside-t{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5a6a80;margin-bottom:6px} .pcard__ul{margin:0;padding-left:18px;list-style:disc outside;font-size:14px;line-height:1.45;color:var(--ink-70)} .pcard__ul li{margin:0 0 4px;list-style:inherit} .pcard__ul li::marker{color:var(--coral,#ff5b4a)} .pcard__foot{margin-top:auto;padding-top:20px;display:grid;gap:14px} /* Демо-фрагмент пособия (#120): вторичное действие под основной кнопкой — помогает выбрать, но не спорит с «Подробнее». Отдельная строка грида, поэтому от 320px занимает всю ширину карточки и нажимается пальцем. */ .pcard__demo{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;border:1.5px solid var(--c-line-strong,rgba(27,42,73,.18));border-radius:var(--radius-md,14px);color:var(--c-text-secondary,#45556c);font-weight:700;font-size:14px;text-align:center} .pcard__demo:hover{border-color:var(--c-accent,#ff5b4a);color:var(--c-ink,#1b2a49)} .pcard__demo:focus-visible{outline:2px solid var(--c-accent,#ff5b4a);outline-offset:2px} .pcard__meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-top:1.5px dashed var(--line);padding-top:16px} .pcard__price{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--navy)} .pcard__price small{font-size:13px;font-weight:600;color:var(--ink-50);letter-spacing:0;margin-right:4px} .pcard__access{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-50);text-align:right} .pcard--pick{border-color:var(--coral);position:relative} /* left обязан совпадать с внутренним отступом карточки (22px): при 20px плашка стояла левее заголовка и чипов, и колонка выглядела сбитой. */ .pcard--pick::before{content:attr(data-pick);position:absolute;top:-12px;left:22px;background:var(--coral);color:var(--on-accent,#131F36);font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-pill)} .pcard--slot{border-style:dashed;border-color:var(--line);box-shadow:none;background:var(--cream-2)} .pcard--slot:hover{transform:none;box-shadow:none} .pcard--slot .pcard__title{color:var(--ink-50)} .grid-more{display:flex;justify-content:center;margin-top:32px} /* --- Две плашки-приглашения --------------------------------------------- */ .invites{display:grid;grid-template-columns:1fr;gap:20px} @media (min-width:860px){.invites{grid-template-columns:1fr 1fr}} .invite{display:flex;flex-direction:column;gap:14px;padding:clamp(26px,3vw,40px);border-radius:var(--r-xl);border:2px solid var(--navy);background:#fff;position:relative;overflow:hidden} .invite__k{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-600)} .invite__title{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.025em} .invite__text{font-size:16px;line-height:1.6;color:var(--ink-70);max-width:44ch} .invite__list{display:grid;gap:10px;margin:0;padding:0;list-style:none} .invite__list li{position:relative;padding-left:26px;font-size:15px;color:var(--ink-70)} .invite__list li::before{content:"";position:absolute;left:0;top:8px;width:12px;height:2px;background:var(--coral);border-radius:2px} .invite__cta{margin-top:auto;padding-top:8px} .invite--tutor{background:var(--navy);color:#fff;border-color:var(--navy)} .invite--tutor .invite__k{color:var(--coral)} .invite--tutor .invite__text,.invite--tutor .invite__list li{color:rgba(255,255,255,.78)} /* --- Каналы -------------------------------------------------------------- */ .channels{display:grid;grid-template-columns:1fr;gap:18px} @media (min-width:760px){.channels{grid-template-columns:1fr 1fr}} .channel{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:22px;transition:border-color .2s var(--ease),transform .2s var(--ease)} .channel:hover{border-color:var(--navy);transform:translateY(-2px)} .channel__badge{flex:0 0 auto;width:46px;height:46px;border-radius:14px;background:var(--sky);display:grid;place-items:center;font-family:var(--mono);font-size:15px;font-weight:600;color:var(--navy)} .channel__body{display:grid;gap:6px} .channel__name{display:block;font-size:18px;font-weight:800;letter-spacing:-.02em} .channel__text{display:block;margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-70)} .channel__go{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--coral-600)} /* --- Отзывы с меткой автора --------------------------------------------- */ .rev-grid{display:grid;grid-template-columns:1fr;gap:18px} @media (min-width:760px){.rev-grid{grid-template-columns:1fr 1fr}} @media (min-width:1060px){.rev-grid{grid-template-columns:repeat(3,1fr)}} .rev{margin:0;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:16px} .rev__mark{align-self:flex-start;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-pill);background:var(--coral-soft);color:var(--coral-600)} .rev__mark--parent{background:var(--sky);color:var(--navy)} .rev__text{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-70)} .rev__by{margin-top:auto;font-size:13px;font-weight:600;color:var(--ink-50)} /* --- Блог ---------------------------------------------------------------- */ .bgrid{display:grid;grid-template-columns:1fr;gap:20px} @media (min-width:700px){.bgrid{grid-template-columns:1fr 1fr}} @media (min-width:1020px){.bgrid{grid-template-columns:repeat(3,1fr)}} .bcard{display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)} .bcard:hover{border-color:var(--navy);transform:translateY(-3px);box-shadow:var(--shadow-sm)} .bcard__media{aspect-ratio:16/9;background:var(--sky-soft);border-bottom:1.5px solid var(--line)} .bcard__media image-slot,.bcard__media .slot{width:100%;height:100%;display:block} .bcard__body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1} .bcard__rub{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-600)} .bcard__title{font-size:19px;letter-spacing:-.02em;line-height:1.25} .bcard__excerpt{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-70)} .bcard__meta{margin-top:auto;padding-top:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-50)} .bcard--wide{border-color:var(--navy);border-width:2px} @media (min-width:700px){.bcard--wide{grid-column:1/-1;flex-direction:row}.bcard--wide .bcard__media{flex:0 0 46%;aspect-ratio:auto;border-bottom:0;border-right:2px solid var(--navy)}.bcard--wide .bcard__body{padding:clamp(24px,2.6vw,36px);justify-content:center;gap:12px}.bcard--wide .bcard__title{font-size:clamp(22px,2.3vw,29px)}.bcard--wide .bcard__excerpt{font-size:16px;max-width:46ch}.bcard--wide .bcard__meta{margin-top:14px}} .bcard--slot{border-style:dashed;background:var(--cream-2);box-shadow:none} .bcard--slot:hover{transform:none;box-shadow:none;border-color:var(--line)} .bcard--slot .bcard__rub{color:var(--ink-50)} .bcard--slot .bcard__title{color:var(--ink-50)} /* --- Фильтры каталога и рубрик ------------------------------------------ */ .filters{display:grid;gap:18px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:20px;margin-bottom:32px} .frow{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .frow__k{flex:0 0 100%;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-50)} @media (min-width:760px){.frow__k{flex:0 0 132px}} .chip{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:var(--r-pill);border:1.5px solid var(--line);background:#fff;font-size:14px;font-weight:600;color:var(--ink-70);transition:all .16s var(--ease)} .chip:hover{border-color:var(--navy);color:var(--navy)} .chip.is-on{background:var(--navy);border-color:var(--navy);color:#fff} .chip--reset{border-style:dashed;color:var(--ink-50)} .fcount{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-50);margin-bottom:18px} .pcard[hidden],.bcard[hidden]{display:none} .filters--row{gap:0;padding:16px 20px} .eyebrow--light{color:var(--coral)} /* --- Карточка автора в hero главной ------------------------------------- */ .authorcard{background:var(--paper,#fff);border:2px solid var(--navy);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg)} .authorcard__photo{aspect-ratio:4/5;background:var(--sky-soft);border-bottom:2px solid var(--navy)} .authorcard__photo image-slot,.authorcard__photo img{width:100%;height:100%;display:block;object-fit:cover} .authorcard__body{padding:20px 22px;display:grid;gap:12px} .authorcard__name{font-size:19px;font-weight:800;letter-spacing:-.02em} .authorcard__role{font-size:14px;line-height:1.5;color:var(--ink-70)} .authorcard__facts{display:flex;flex-wrap:wrap;gap:8px} .authorcard__facts span{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);background:var(--sky);border-radius:var(--r-pill);padding:5px 10px} /* --- Каталог: сайдбар фильтров ------------------------------------------ */ .catalog{display:grid;grid-template-columns:1fr;gap:28px;align-items:start} @media (min-width:960px){.catalog{grid-template-columns:264px 1fr;gap:36px}} .fside__inner{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:20px;display:grid;gap:20px} @media (min-width:960px){.fside{position:sticky;top:calc(var(--header-h) + 20px)}} .fside__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1.5px dashed var(--line)} .fside__title{font-size:17px;font-weight:800;letter-spacing:-.02em} .fside__head .chip{min-height:32px;padding:0 12px;font-size:12.5px} /* Планшет: фильтры лентой, а не колонкой во всю ширину. Сайдбар включается с 960px, а до этого .fside — блок во всю ширину, где каждая группа занимает свою строку. На 768px это давало панель 724×561 и 1012px прокрутки до первого товара: человек листал экран фильтров, чтобы увидеть, что вообще продаётся. Раскладываем группы в текучую сетку — панель сжимается примерно втрое, а список товаров попадает на первый экран. */ @media (min-width:640px) and (max-width:959.98px) { .fside__inner { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px 22px; padding: 18px; } .fside__head { grid-column: 1 / -1; padding-bottom: 12px; } } .fgroup{display:grid;gap:10px} .fgroup__k{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-50)} .fgroup__chips{display:flex;flex-wrap:wrap;gap:8px} .fgroup__chips .chip{min-height:34px;padding:0 13px;font-size:13.5px} .catalog__main{min-width:0} @media (min-width:960px){.pgrid--catalog{grid-template-columns:1fr 1fr}} @media (min-width:1280px){.pgrid--catalog{grid-template-columns:repeat(3,1fr)}} .pcard__title a{color:inherit} .pcard__title a:hover{color:var(--prose-link-hover, #923026)} /* было --coral-600: 3.35:1, ниже AA */ .cat-note{margin:32px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-50)} /* Выравнивание по левому краю, как и всё остальное на странице: центрированный блок посреди левого текста читается как чужой элемент. */ .fempty{margin-top:8px;padding:clamp(26px,3vw,40px);background:var(--cream-2);border:1.5px dashed var(--line);border-radius:var(--r-lg)} .fempty__title{margin:0;font-size:19px;font-weight:800;letter-spacing:-.02em} .fempty__text{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--ink-70);max-width:44ch} .fempty__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px} .cat-note a{color:var(--coral-600);font-weight:600} /* --- Хиро карточки продукта --------------------------------------------- */ .phero{display:grid;grid-template-columns:1fr;gap:28px;align-items:start} @media (min-width:940px){.phero{grid-template-columns:1.15fr .85fr;gap:44px}} .phero__col h1{margin:16px 0 0} .phero__tags{display:flex;flex-wrap:wrap;gap:8px} .phero__facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px} .phero__facts span{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);border-radius:var(--r-pill);padding:6px 12px} .buybox{background:#fff;border:2px solid var(--navy);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);color:var(--ink)} .buybox__media{aspect-ratio:4/3;background:var(--sky-soft);border-bottom:2px solid var(--navy)} .buybox__media image-slot{width:100%;height:100%;display:block} .buybox__body{padding:22px;display:grid;gap:12px} .buybox__price{font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--navy);display:grid;gap:2px} .buybox__price span{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-50)} .buybox__list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:9px;border-top:1.5px dashed var(--line);padding-top:16px} .buybox__list li{position:relative;padding-left:22px;font-size:14px;line-height:1.5;color:var(--ink-70)} .buybox__list li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:2px;background:var(--coral);border-radius:2px} /* --- Программа продукта -------------------------------------------------- */ .prog{display:grid;grid-template-columns:1fr;gap:16px} @media (min-width:760px){.prog{grid-template-columns:1fr 1fr}} .prog__item{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:22px} .prog__n{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--coral-600);background:var(--coral-tint);border-radius:var(--r-pill);width:42px;height:42px;display:grid;place-items:center} .prog__title{font-size:18px;letter-spacing:-.02em;line-height:1.3} .prog__text{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-70)} .prog__item--slot{border-style:dashed;background:var(--cream-2)} .prog__item--slot .prog__n{background:var(--sky);color:var(--navy)} .prog__item--slot .prog__title{color:var(--ink-50)} .kv--contacts{margin-top:28px} .formwrap{display:grid;grid-template-columns:1fr;gap:28px;align-items:start} @media (min-width:940px){.formwrap{grid-template-columns:1fr 1fr;gap:48px}} .formwrap__intro .section__head,.formwrap__intro .invite__list{margin-top:20px} .cform{background:#fff;border:2px solid var(--navy);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);padding:clamp(22px,2.6vw,32px);display:grid;gap:16px} .cform .field{margin:0} .field__input--area{height:auto;padding:14px 16px;line-height:1.5;resize:vertical} .cform select.field__input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--navy) 50%),linear-gradient(135deg,var(--navy) 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px} .cform__note{margin:0;font-size:13px;line-height:1.55;color:var(--ink-50)} .cform__note a{color:var(--coral-600);font-weight:600} .cform__done{margin:0;padding:14px 16px;border-radius:0 var(--r-md) var(--r-md) 0;border-left:3px solid var(--coral);background:var(--coral-tint);color:var(--ink);font-size:14.5px;font-weight:600;line-height:1.5} /* --- Контакты ------------------------------------------------------------ */ .kv{display:grid;gap:0;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .kv__row{display:grid;grid-template-columns:1fr;gap:4px;padding:18px 22px;border-bottom:1px solid var(--line-soft)} @media (min-width:640px){.kv__row{grid-template-columns:180px 1fr;gap:20px;align-items:baseline}} .kv__row:last-child{border-bottom:0} .kv__k{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-50)} .kv__v{font-size:16px;color:var(--ink)} .kv__v a{color:var(--coral-600);font-weight:600} .kv__v a:hover{text-decoration:underline} a{color:inherit} a:hover{color:var(--coral-600)} .footer__link:hover,.nav__link:hover{color:inherit} /* Эти правила нужны из-за a:hover выше: кнопки часто ссылки, и без них надпись на наведении становилась коралловой. Заливка у всех трёх тёмная, белый на ней и нужен. */ .btn.btn--outline:hover,.btn.btn--navy:hover,.btn.btn--ghost-light:hover{color:#fff} /* Главная кнопка — отдельно: её заливка бренд-коралл, надпись поверх считает тема (--on-accent), а не мы. Зашитый здесь белый этот расчёт перебивал и давал 2.58:1 на тёмной палитре. Наведение теперь СВЕТЛЕЕТ (--coral-hover): надпись тёмная, и темнеющая ей навстречу заливка убила бы и её, и форму. */ .btn.btn--primary:hover{color:var(--on-accent,#131F36)} .btn.btn--white:hover{color:var(--navy)} .article__cta-actions .btn.btn--outline:hover{color:#fff} /* --- Панель-CTA, обложка и карточка автора ------------------------------ Вынесены из дизайнерского блока .article и переименованы: класс .article у нас занят контейнером контентной страницы /p/:slug. Типографика самой статьи живёт в css/prose.css. -------------------------------------- */ .post__cover{margin:0 0 8px;aspect-ratio:16/9;background:var(--sky-soft);border:1.5px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .post__cover image-slot{width:100%;height:100%;display:block} .post__src{margin-top:32px;font-size:14.5px;color:var(--ink-50)} .post__src a{color:var(--coral-600);font-weight:600} .authorbox{display:grid;grid-template-columns:1fr;gap:20px;align-items:start;margin-top:44px;padding:24px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg)} @media (min-width:620px){.authorbox{grid-template-columns:132px 1fr;gap:24px}} .authorbox__photo{aspect-ratio:1/1;max-width:180px;background:var(--sky-soft);border-radius:var(--r-md);overflow:hidden} .authorbox__photo image-slot{width:100%;height:100%;display:block} .authorbox__body{display:grid;gap:10px;justify-items:start} .authorbox__k{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-50)} .authorbox__name{font-size:19px;font-weight:800;letter-spacing:-.02em} .authorbox__text{margin:0;font-size:15px;line-height:1.55;color:var(--ink-70)} .cta-panel{display:grid;gap:22px;margin-top:44px;padding:clamp(26px,3vw,36px);border-radius:var(--r-xl);background:var(--navy);color:#fff} @media (min-width:820px){.cta-panel{grid-template-columns:1.2fr .8fr;gap:32px;align-items:center}} .cta-panel .invite__k{color:var(--coral)} .cta-panel-title{font-size:clamp(22px,2.4vw,29px);letter-spacing:-.025em;margin:10px 0 0} .cta-panel-text{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.78);max-width:44ch} /* Обещание результата перед кнопкой покупки (#121): ярче условий оплаты — это последнее, что читают перед решением, поэтому полный контраст. */ .cta-panel-result{margin:14px 0 0;font-size:16px;line-height:1.55;color:#fff;max-width:46ch} .cta-panel-actions{display:flex;flex-wrap:wrap;gap:12px} /* Та же вторичная кнопка на тёмном, что .btn--ghost-light: держим один вид. */ .cta-panel-actions .btn--outline{background:rgba(255,255,255,.10);border-color:#fff;color:#fff} .cta-panel-actions .btn--outline:hover{background:rgba(255,255,255,.22)} /* ========================================================================== Состояния форм и кнопок. В прототипе .field__input.is-error красился тем же --coral, что и :focus — ошибочное поле выглядело как поле в фокусе. Плюс у кнопок не было ни :disabled, ни состояния загрузки. Разводим: фокус — кольцо, ошибка — другой цвет рамки и подложка, а главное — признак не только цветом (aria-invalid для скринридера и префикс ✕ в тексте сообщения). ========================================================================== */ /* Состояния поля ввода переехали в базовый css/engpulse-b2.css: та же форма оформления заказа живёт на лендинге и на страницах под Директ, а этот слой их не касается — там фокус и ошибка оставались одного цвета (#85). */ /* Сообщение формы: успех — коралловая полоса (как в макете), ошибка — та же раскладка, но контрастным цветом. Текст приходит с префиксом ✓/✕, поэтому состояние читается и без цвета. */ .cform__done--err { border-left-color: var(--prose-link, #c14336); background: color-mix(in srgb, var(--prose-link, #c14336) 8%, #fff); color: var(--ink); } /* Недоступная и «занятая» кнопка. Текст кнопки при отправке меняется на «Отправляю…» — это и есть некрасочный признак состояния. */ /* Отключённая кнопка (#110, п.4). Было opacity:.55 — белая надпись на коралле давала 1.78:1 ровно в ту секунду, когда человек ждёт подтверждения оплаты и читает «Создаём заказ…». Вместо прозрачности — явная пара цветов (6.29:1) и потеря акцентной заливки: недоступность видна и по цвету, и по «выключенному» виду, а не по одной лишь бледности. */ .btn:disabled, .btn[aria-disabled="true"] { background: #e7eaf0; color: #45556c; border-color: #d7dce6; cursor: not-allowed; box-shadow: none; transform: none; } .btn.is-loading { cursor: progress; } /* Перенос длинных надписей на кнопке переехал в базовый engpulse-b.css: тем же дефектом болел лендинг, а держать одно лечение в двух слоях — верный способ починить в одном и забыть про другой (issue #99). */ /* --- Размер зоны нажатия ------------------------------------------------- У ссылок в хлебных крошках не было вертикальных полей: высота 19px при минимуме 24px по WCAG 2.2 (SC 2.5.8) и рекомендуемых ~44px для пальца. Ссылки подвала были 35px. Поднимаем полями, не трогая кегль и ритм. */ .crumbs a { padding: 7px 0; } .footer__link { padding: 10px 0; } /* Выбранный чип: заливка + галочка. Одной инверсией цвета обходиться нельзя — состояние должно читаться и без различения цветов. aria-pressed ставит js/site.js, так что скринридер тоже объявляет «нажато». */ .chip[data-key].is-on::before { content: "✓"; margin-right: 6px; font-size: .95em; line-height: 1; } /* ========================================================================== Контраст: текстовые варианты фирменного коралла. Замер по WCAG показал девять провалов на новых страницах, и восемь из них — один и тот же токен. --coral-600 (#F0473A) задумывался как «коралл потемнее» для текста, но не проходит AA даже на чистом белом (3.71), а на розовых подложках .rev__mark и .prog__n падает до 3.14. Через него красятся eyebrow, номера шагов, плашки отзывов, ключи списков и ссылки каналов — поэтому правится он, а не девять компонентов по отдельности. Граница разделения — НЕ «заливка против текста», а «на светлом против на тёмном». Сам --coral (#FF5B4A) остаётся: как заливка он ни к чему не обязывает, а на navy даёт 4.65 и проходит. Класть --coral-text на тёмный фон нельзя — там он даёт 2.50 (для этого есть .eyebrow--light). Значения подобраны с запасом, а не «в ноль»: ближайший проходящий цвет рассыпается на первой же другой подложке. #C03020 держит 4.83 на худшей из семи подложек сайта. ========================================================================== */ /* Токены --coral-text / --coral-600 / --ink-50, заливка главной кнопки и двухцветное кольцо фокуса переехали в базовый css/engpulse-b.css: тем же болели лендинг, страницы под Директ, оферта, политика, экраны оплаты и админка, а этот слой их не касается. Держать лечение в двух местах — как раз то, из-за чего половину сайта чинят, а про вторую забывают (#85). */ /* Звёздочка обязательного поля и ссылка в cookie-уведомлении красились чистым --coral на белом (3.35 при норме 4.5). Обязательность помечена самим знаком «*», то есть не только цветом, — не хватало именно читаемости. */ .field__label span { color: var(--coral-text); } .cookie__text a { color: var(--coral-text); } /* --- Хлебные крошки на светлом фоне ------------------------------------- .crumbs заданы белым: в макете они всегда лежат в тёмном .page-hero. На светлой секции получается белым по белому — контраст 1:1, крошек просто нет. Привязываем цвет к фону секции, а не к надежде, что автор страницы вспомнит про модификатор: невидимая навигация — не та ошибка, которую стоит ловить глазами на ревью. */ .section--paper .crumbs, .section--cream .crumbs, .section--tint .crumbs { color: var(--ink-50); } .section--paper .crumbs a, .section--cream .crumbs a, .section--tint .crumbs a { color: var(--ink-70); } .section--paper .crumbs a:hover, .section--cream .crumbs a:hover, .section--tint .crumbs a:hover { color: var(--coral-text); } /* Зона нажатия чипов на сенсорных экранах. 32-34px формально проходят минимум WCAG 2.2 (24px), но фильтры — основной способ пользоваться каталогом, и мазать по ним пальцем неудобно. Правим только для касания: на десктопе мышью компактный сайдбар остаётся как задуман. */ @media (pointer: coarse) { .chip, .fgroup__chips .chip, .fside__head .chip { min-height: 44px; } } /* --- Диалог покупки ------------------------------------------------------ Нативный : ловушка фокуса и Escape из коробки. Ширина ограничена не только процентом, но и полями — на 320px диалог во весь экран выглядит как отдельная страница и теряет смысл модальности. */ .buydlg { width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: none; border-radius: var(--r-xl, 22px); background: #fff; color: var(--ink); box-shadow: 0 30px 80px rgba(27, 42, 73, .28); } .buydlg::backdrop { background: rgba(27, 42, 73, .58); } .buydlg__form { display: grid; gap: 14px; padding: clamp(20px, 4vw, 28px); } .buydlg__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .buydlg__title { font-size: clamp(20px, 4vw, 24px); margin: 0; } .buydlg__close { flex: none; width: 44px; height: 44px; /* зона нажатия пальцем */ margin: -8px -8px 0 0; display: grid; place-items: center; font-size: 26px; line-height: 1; color: var(--ink-70); background: transparent; border: none; border-radius: 50%; } .buydlg__close:hover { background: var(--sky-soft, #f1f6fb); color: var(--ink); } .buydlg__item { margin: 0; font-size: 15px; color: var(--ink-70); } .buydlg__agree { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--ink-70); } .buydlg__agree input { flex: none; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--coral-text); } .buydlg__agree a { color: var(--coral-text); text-decoration: underline; } /* Мелкий белый текст на коралловой заливке. Тот же провал, что был у главной кнопки: белый на #FF5B4A даёт 3.07 при норме 4.5, а здесь ещё и кегль 11-13px. Рамку карточки оставляем ярко-коралловой — это декор, к нему требований по контрасту текста нет. */ /* .sticker--coral переехал в базовый слой вместе с цветом надписи. */ .pcard--pick::before { background: var(--coral); color: var(--on-accent, #131F36); } /* .sticker--navy задуман как тёмная плашка с коралловым сдвигом. На тёмной секции её фон И рамка совпадают с фоном: от плашки остаётся белый текст и висящая рядом коралловая дуга — читается как артефакт вёрстки, а не как элемент. Возвращаем форму рамкой; контраст текста при этом не меняется. */ .page-hero .sticker--navy, .section--navy .sticker--navy { background: transparent; border-color: rgba(255, 255, 255, .55); } /* --- Перенос длинных строк ------------------------------------------------ Название товара и заголовок статьи приходят из админки: достаточно одного слова без пробелов, чтобы min-content оказался шире экрана. Замер: такое слово растягивало страницу с 320 до 804px. `anywhere` нужен именно этим элементам, потому что только он уменьшает min-content, а грид-элементы меряются по нему. Но он же разрешает рвать слово в любом месте — и, попав на авторские заголовки, превратил H1 главной в «по английск / ому»: 10 строк и 853px высоты на десктопе. Поэтому список узкий: только то, что (а) приходит из базы и (б) лежит в ячейке грида. Авторским заголовкам и тексту статей достаточно `break-word` — он рвёт слово, лишь когда оно не помещается в строку целиком, и на min-content не влияет. */ .pcard__title, .pcard__benefit, .bcard__title, .bcard__excerpt, .kv__v { overflow-wrap: anywhere; } h1, h2, h3, h4, .invite__text, .invite__list li, .prog__title, .prog__text, .section__lead, .page-hero__sub, .prose p, .prose li, .prose h2, .prose h3 { overflow-wrap: break-word; } /* Подсказка в