/* --- 05-components.css --- */
/* Tech Spec — component layer.
Six people styled nine areas of this site in parallel from the same token
brief. Tokens answer "which colour"; they do not answer "what is a service
label" or "what is a panel", so every area rebuilt those from the prose
description and they drifted: the checkout ended up in a monospace stack
while every other page used Manrope, the error state got three different
reds, and the same 10px label appeared with five different trackings.
This file is the canon. It loads first (parts/ is enqueued in name order),
declares the component-level tokens, and page files consume them instead of
literals. tools/lint-tokens.mjs fails the build when a page file writes a
literal radius, tracking or font stack, so this does not depend on anyone
remembering.
Values are taken from the reference implementations rather than invented:
the plate from 20-product.css, the heading from 10-home.css, the chrome
from 30-shell-fixes.css. */
body.iq-variant-techspec {
/* --- Service label -----------------------------------------------------
The small tracked caption that carries article numbers, timings and sheet
references. One definition; page files use the four tokens together. */
--iq-label-font: var(--iq-font);
--iq-label-size: 10px;
--iq-label-weight: 600;
--iq-label-leading: 1.3;
--iq-label-tracking: .16em;
/* A second, wider tracking for standalone rules and breadcrumb-like rows,
where the label has room and reads better spread out. */
--iq-label-tracking-wide: .18em;
/* Figures, currency suffixes and index numbers set at reading size. They are
neither captions nor headings: the caption tracking detaches a ₽ from its
number, and the heading's negative tracking crowds tabular digits. */
--iq-numeric-tracking: .02em;
/* --- Headings ---------------------------------------------------------- */
--iq-heading-font: var(--iq-display);
--iq-heading-weight: 700;
--iq-heading-tracking: -.02em;
--iq-heading-leading: .98;
/* --- Plate -------------------------------------------------------------
The bordered sheet used for cards, panels and side rails. */
--iq-panel-bg: var(--iq-bg-surface);
--iq-panel-border: 1px solid var(--iq-hair-strong);
--iq-panel-radius: var(--iq-radius-panel);
--iq-panel-pad: 20px;
--iq-panel-pad-tight: 14px;
/* What sits behind a cover, a player or a thumbnail before the media loads.
The same literal had been written independently in four files. */
--iq-media-bg: #0e1013;
/* Seam between adjacent cells. Draw it as a cell border, not as a plate
showing through a 1px gap — a track the content does not fill paints that
plate as a grey block, which has been the cause of four defects here. */
--iq-seam: 1px solid var(--iq-hair);
/* --- Fields and controls -----------------------------------------------
44px is the minimum touch target; fields sit slightly above it. */
--iq-field-h: 46px;
--iq-control-h: 44px;
--iq-field-bg: var(--iq-input-bg);
--iq-field-border: 1px solid var(--iq-hair-strong);
--iq-field-radius: var(--iq-radius-input);
--iq-field-pad: 0 14px;
/* --- Button ------------------------------------------------------------
Кнопка — самый заметный контрол, и до сих пор её в слое не было: чекаут,
корзина и главная брали пилюлю базовой темы (радиус 20px, бордюр 2px,
Open Sans). Один набор токенов, две роли: заливка — основное действие,
контур — всё остальное. */
/* Отступ, а не высота: кнопка не задаёт себе `display`, поэтому центрируется
полями, а не флексом. Почему — в 06-controls.css. 15px сверху и снизу при
кегле 12/1.2 дают 44px цели. */
--iq-btn-pad: 15px 22px;
--iq-btn-radius: var(--iq-field-radius);
--iq-btn-border-width: 1px;
/* --- Semantic state ----------------------------------------------------
One red. --iq-color-danger already existed in the theme primitives; the
other two values in circulation were invented locally. */
--iq-danger: var(--iq-color-danger, #ff5a67);
--iq-danger-bg: color-mix(in srgb, var(--iq-danger) 12%, transparent);
--iq-success: #6ee0a8;
/* --- Rhythm ------------------------------------------------------------
A 4px scale. Page files pick from it rather than inventing a gap. */
--iq-gap-1: 4px;
--iq-gap-2: 8px;
--iq-gap-3: 12px;
--iq-gap-4: 18px;
--iq-gap-5: 26px;
--iq-gap-6: 40px;
/* --- Motion ------------------------------------------------------------
Exit is shorter than enter so interfaces feel responsive. */
--iq-dur-in: 220ms;
--iq-dur-out: 150ms;
--iq-ease: cubic-bezier(.22, .61, .36, 1);
}
/* Focus is a single treatment everywhere. Never removed, always the accent. */
body.iq-variant-techspec :focus-visible {
outline: 2px solid var(--iq-action-primary);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
body.iq-variant-techspec {
--iq-dur-in: 0ms;
--iq-dur-out: 0ms;
}
}
/* --- 06-controls.css --- */
/* Tech Spec — кнопки, общие для всего сайта.
Базовая тема даёт `.btn` радиусом 20px, бордюром 2px и Open Sans — пилюлю,
которая не имеет отношения к чертёжной системе. Ни один файл её не
переопределял, поэтому одна и та же кнопка «Оформить заказ» выглядела
пилюлей и в корзине, и в чекауте, и на главной, пока всё вокруг было
набрано по слою компонентов. Здесь она приводится к системе один раз.
Ролей две, и они читаются из класса разметки, а не из места на странице:
`.btn--contrast` — основное действие (заливка), всё остальное — контур.
На экране должно быть ровно одно основное действие; если их окажется два,
это дефект разметки, а не стилей. */
/* `display` здесь не задаётся намеренно. Общее правило на `.btn` весит больше
одноклассовых правил темы, и `display: inline-flex` перебивал пять живых
`display: none`: «Регистрация» в мобильной шапке, кнопка выхода, слово
«промокод» на узких экранах и кнопка промо-попапа до согласия на cookie —
всё это молча появлялось на экране. Высота набирается полями, а не флексом. */
body.iq-variant-techspec .btn {
padding: var(--iq-btn-pad);
border: var(--iq-btn-border-width) solid var(--iq-hair-strong);
border-radius: var(--iq-btn-radius);
background: transparent;
color: var(--iq-fg-primary);
font: var(--iq-label-weight) 12px/1.2 var(--iq-label-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
text-align: center;
transition: border-color var(--iq-dur-in) var(--iq-ease),
color var(--iq-dur-in) var(--iq-ease),
background-color var(--iq-dur-in) var(--iq-ease);
}
body.iq-variant-techspec .btn:hover,
body.iq-variant-techspec .btn:focus-visible {
border-color: var(--iq-action-primary);
color: var(--iq-action-primary);
}
/* Основное действие. При наведении меняется местами с фоном, а не тускнеет:
заливка остаётся отличимой от контурных соседей в любом состоянии. */
body.iq-variant-techspec .btn--contrast {
border-color: var(--iq-action-primary);
background: var(--iq-action-primary);
color: var(--iq-button-primary-fg);
}
body.iq-variant-techspec .btn--contrast:hover,
body.iq-variant-techspec .btn--contrast:focus-visible {
background: transparent;
color: var(--iq-action-primary);
}
/* Цветные варианты базовой темы (сиреневый, синий, белый) в чертеже роли не
несут — это остатки прежней палитры. Приводим к контуру, чтобы «синяя» и
«сиреневая» кнопки рядом не читались как два разных по важности действия. */
body.iq-variant-techspec .btn--light-violet,
body.iq-variant-techspec .btn--blue,
body.iq-variant-techspec .btn--white,
body.iq-variant-techspec .btn--cashback {
border-color: var(--iq-hair-strong);
background: transparent;
color: var(--iq-fg-primary);
}
body.iq-variant-techspec .btn[disabled],
body.iq-variant-techspec .btn:disabled {
opacity: .45;
cursor: not-allowed;
}
body.iq-variant-techspec .btn[disabled]:hover,
body.iq-variant-techspec .btn:disabled:hover {
border-color: var(--iq-hair-strong);
color: var(--iq-fg-primary);
}
/* Кнопка со значком. Значок в базовой теме позиционируется абсолютно у правого
края, а место под него держит `padding-right: 45px` — который затирался
шорткодом `padding` выше, и значок ложился на последние буквы подписи.
Заодно он был прибит к `top: 8px`, что мимо середины сорокачетырёхпиксельной
кнопки. Место возвращаем, значок центрируем по вертикали. */
body.iq-variant-techspec .btn--svg-icon {
padding-right: 46px;
}
body.iq-variant-techspec .btn--svg-icon > svg {
top: 50%;
right: 16px;
transform: translateY(-50%);
}
/* --- 10-home.css --- */
/* ==========================================================================
10-home.css — главная страница в теме «Tech Spec»
--------------------------------------------------------------------------
Область: только главная (`body.home`, шаблон page-main.php) и только вариант
techspec. КАЖДЫЙ селектор начинается с `body.iq-variant-techspec` — editorial
остаётся боевым видом сайта, любая протечка ломает прод. Дополнительный
`.home` в связке отсекает служебные страницы (корзина, чекаут, ЛК, вход):
они никогда не несут класс home.
Переменные варианта (--iq-hair, --iq-card-bg-hover и т.д.) уже объявлены в
iq-visual.css на `body.iq-variant-techspec`. Здесь новых токенов на :root не
объявляется намеренно: var() внутри кастомного свойства резолвится на том
элементе, где свойство объявлено, а темы переопределяют токены на body —
производный токен с :root замёрз бы на базовой (фиолетовой) палитре.
Идея страницы: обложка технической документации. Крупный Unbounded,
служебные моно-подписи 10px/.16em, хайрлайны и прямые углы вместо теней и
скруглений, данные и номера как часть композиции.
========================================================================== */
/* --------------------------------------------------------------------------
1. ЛИСТ
Координатная сетка и изолинии живут на самом body: фон не создаёт нового
контекста наложения и не может перекрыть шапку или будущий WebGL-канвас.
-------------------------------------------------------------------------- */
body.iq-variant-techspec.home {
background-color: var(--iq-bg-canvas);
background-image:
repeating-radial-gradient(circle at 22% 12%, transparent 0 13px, rgba(184, 192, 204, .05) 13px 14px),
repeating-radial-gradient(circle at 80% 46%, transparent 0 17px, rgba(184, 192, 204, .04) 17px 18px),
repeating-linear-gradient(90deg, rgba(232, 236, 240, .028) 0 1px, transparent 1px 96px),
repeating-linear-gradient(0deg, rgba(232, 236, 240, .028) 0 1px, transparent 1px 96px);
background-attachment: fixed;
}
/* Периметр листа с угловыми маркерами. Псевдоэлемент main, а не отдельный
узел: разметку трогать нельзя. z-index держим ниже шапки (у неё 1000). */
body.iq-variant-techspec.home .home-main {
position: relative;
}
body.iq-variant-techspec.home .home-main::before {
content: '';
position: fixed;
z-index: 2;
inset: 10px;
pointer-events: none;
border: 1px solid var(--iq-hair);
}
/* Секции листа: между блоками — шов, а не воздух. */
body.iq-variant-techspec.home .home-news,
body.iq-variant-techspec.home .trust,
body.iq-variant-techspec.home .why-us,
body.iq-variant-techspec.home .faq,
body.iq-variant-techspec.home .simple-text {
border-top: 1px solid var(--iq-hair);
background: var(--iq-bg-canvas);
}
/* --------------------------------------------------------------------------
2. ГЛАВНЫЙ БАННЕР (.main-banner--iq)
Титульный лист спецификации: графит, прямые углы, крупный Unbounded.
Слой WebGL-канваса делает другой разработчик — здесь ничего абсолютно
позиционированного поверх всего баннера не добавляется, кроме угловых
реперов на самой секции.
-------------------------------------------------------------------------- */
body.iq-variant-techspec.home .main-banner--iq {
max-width: 1440px;
margin: 0 auto 0;
border-radius: 0;
border-bottom: 1px solid var(--iq-hair);
background:
linear-gradient(180deg, rgba(19, 21, 25, .92) 0%, rgba(11, 12, 14, .92) 100%);
}
/* Затемняющая шторка исходной темы гасила бы канвас — оставляем ровный лист. */
body.iq-variant-techspec.home .main-banner--iq::before {
background: linear-gradient(90deg, rgba(11, 12, 14, .82) 0%, rgba(11, 12, 14, .42) 58%, rgba(11, 12, 14, .12) 100%);
}
/* Угловые реперы титульного листа. */
body.iq-variant-techspec.home .main-banner--iq::after {
content: '';
position: absolute;
z-index: 4;
inset: 18px;
pointer-events: none;
opacity: .55;
background:
linear-gradient(var(--iq-action-signal), var(--iq-action-signal)) 0 0 / 22px 1px no-repeat,
linear-gradient(var(--iq-action-signal), var(--iq-action-signal)) 0 0 / 1px 22px no-repeat,
linear-gradient(var(--iq-action-signal), var(--iq-action-signal)) 100% 0 / 22px 1px no-repeat,
linear-gradient(var(--iq-action-signal), var(--iq-action-signal)) 100% 0 / 1px 22px no-repeat,
linear-gradient(var(--iq-action-signal), var(--iq-action-signal)) 0 100% / 22px 1px no-repeat,
linear-gradient(var(--iq-action-signal), var(--iq-action-signal)) 0 100% / 1px 22px no-repeat,
linear-gradient(var(--iq-action-signal), var(--iq-action-signal)) 100% 100% / 22px 1px no-repeat,
linear-gradient(var(--iq-action-signal), var(--iq-action-signal)) 100% 100% / 1px 22px no-repeat;
}
/* Служебная строка над заголовком: подпись + пунктир-выноска. */
body.iq-variant-techspec.home .main-banner__eyebrow {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 22px;
padding-bottom: 12px;
border-bottom: 1px solid var(--iq-hair);
color: var(--iq-fg-muted);
font: 600 10px/1 var(--iq-font);
font-variant-numeric: tabular-nums;
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
}
body.iq-variant-techspec.home .main-banner__eyebrow::before {
content: '';
flex: 0 0 auto;
width: 6px;
height: 6px;
background: var(--iq-action-primary);
box-shadow: 0 0 0 3px rgba(110, 231, 255, .14);
}
body.iq-variant-techspec.home .main-banner__eyebrow::after {
content: '';
flex: 1 1 auto;
min-width: 12px;
height: 1px;
opacity: .45;
background-image: linear-gradient(90deg, var(--iq-fg-muted) 0 3px, transparent 3px 7px);
background-size: 7px 1px;
}
body.iq-variant-techspec.home .main-banner--iq .main-banner__title {
color: var(--iq-fg-primary);
font: 700 clamp(38px, 5.6vw, 78px)/.95 var(--iq-display);
letter-spacing: var(--iq-heading-tracking);
text-transform: uppercase;
}
/* Вторая строка — контур, как индекс листа в референсе. */
body.iq-variant-techspec.home .main-banner--iq .main-banner__title b {
margin-top: 6px;
color: transparent;
-webkit-text-stroke: 1px var(--iq-action-signal);
opacity: .78;
font-size: .62em;
letter-spacing: 0;
}
body.iq-variant-techspec.home .main-banner__description {
max-width: 46ch;
color: var(--iq-fg-muted);
font: 400 14px/1.55 var(--iq-font);
}
/* Переключатель темпа — вкладки прибора: 1px швы, прямые углы. */
body.iq-variant-techspec.home .main-banner__tempo-switch {
gap: 1px;
/* The strip is drawn as a plate showing through 1px gaps, so any width the
tabs do not fill is painted as a grey block. Shrink it to the tabs. */
width: fit-content;
max-width: 100%;
margin-top: 26px;
border: 1px solid var(--iq-border-subtle);
border-radius: var(--iq-radius-panel);
background: var(--iq-border-subtle);
overflow: hidden;
}
body.iq-variant-techspec.home .main-banner__tempo-button {
border: 0;
border-radius: 0;
padding: 0 18px;
background: var(--iq-bg-surface);
color: var(--iq-fg-muted);
font: 600 11px/1 var(--iq-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
}
body.iq-variant-techspec.home .main-banner__tempo-button:hover,
body.iq-variant-techspec.home .main-banner__tempo-button:focus-visible {
transform: none;
border: 0;
background: var(--iq-card-bg-hover);
color: var(--iq-fg-primary);
}
body.iq-variant-techspec.home .main-banner__tempo-button.is-active {
border: 0;
background: var(--iq-action-primary);
color: var(--iq-bg-canvas);
}
/* CTA: залитый блок и хайрлайн-дублёр. Ни скруглений, ни подпрыгиваний. */
body.iq-variant-techspec.home .main-banner__cta,
body.iq-variant-techspec.home .main-banner__secondary {
border-radius: var(--iq-radius-media);
font: 700 12px/1 var(--iq-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
body.iq-variant-techspec.home .main-banner__cta {
background: var(--iq-action-primary);
color: var(--iq-bg-canvas);
}
body.iq-variant-techspec.home .main-banner__secondary {
border: 1px solid var(--iq-hair-strong);
color: var(--iq-fg-primary);
}
body.iq-variant-techspec.home .main-banner__cta:hover,
body.iq-variant-techspec.home .main-banner__cta:focus-visible {
transform: none;
background: var(--iq-fg-primary);
color: var(--iq-bg-canvas);
}
body.iq-variant-techspec.home .main-banner__secondary:hover,
body.iq-variant-techspec.home .main-banner__secondary:focus-visible {
transform: none;
border-color: var(--iq-action-primary);
color: var(--iq-action-primary);
}
body.iq-variant-techspec.home .main-banner__delivery-note {
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--iq-hair);
color: var(--iq-fg-muted);
font: 600 10px/1.4 var(--iq-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
}
/* Приборная панель темпа — плита, а не стеклянная карточка. */
body.iq-variant-techspec.home .main-banner__tempo-desk {
border: 1px solid var(--iq-hair);
border-radius: var(--iq-radius-panel);
background: rgba(19, 21, 25, .58);
box-shadow: none;
backdrop-filter: none;
}
body.iq-variant-techspec.home .main-banner__tempo-track { stroke: rgba(232, 236, 240, .16); }
body.iq-variant-techspec.home .main-banner__tempo-wave { stroke: var(--iq-action-primary); }
body.iq-variant-techspec.home .main-banner__tempo-core {
fill: rgba(110, 231, 255, .07);
stroke: var(--iq-action-signal);
}
/* --------------------------------------------------------------------------
3. РЕЙЛ НАПРАВЛЕНИЙ (.iq-feature-rail)
В iq-visual.css он оформлен только под editorial — в techspec приходит
голым списком ссылок. Здесь он собран заново: четыре ячейки, швы 1px.
-------------------------------------------------------------------------- */
body.iq-variant-techspec.home .iq-feature-rail {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
max-width: 1440px;
margin: 0 auto;
border-top: 1px solid var(--iq-border-subtle);
border-bottom: 1px solid var(--iq-border-subtle);
background: var(--iq-border-subtle);
}
body.iq-variant-techspec.home .iq-feature-rail__item {
position: relative;
display: grid;
align-content: space-between;
gap: 26px;
min-height: 190px;
padding: 16px 18px 18px;
overflow: hidden;
background: var(--iq-card-bg);
color: var(--iq-fg-primary);
text-decoration: none;
transition: background-color .2s ease;
}
body.iq-variant-techspec.home .iq-feature-rail__item:hover,
body.iq-variant-techspec.home .iq-feature-rail__item:focus-visible {
background: var(--iq-card-bg-hover);
}
/* Угловые реперы ячейки — те же, что у плиты каталога. */
body.iq-variant-techspec.home .iq-feature-rail__item::before,
body.iq-variant-techspec.home .iq-feature-rail__item::after {
content: '';
position: absolute;
width: 9px;
height: 9px;
pointer-events: none;
border: 1px solid var(--iq-fg-muted);
opacity: .45;
transition: border-color .2s ease, opacity .2s ease;
}
body.iq-variant-techspec.home .iq-feature-rail__item::before {
top: 5px; left: 5px;
border-right: 0;
border-bottom: 0;
}
body.iq-variant-techspec.home .iq-feature-rail__item::after {
right: 5px; bottom: 5px;
border-left: 0;
border-top: 0;
}
body.iq-variant-techspec.home .iq-feature-rail__item:hover::before,
body.iq-variant-techspec.home .iq-feature-rail__item:hover::after,
body.iq-variant-techspec.home .iq-feature-rail__item:focus-visible::before,
body.iq-variant-techspec.home .iq-feature-rail__item:focus-visible::after {
border-color: var(--iq-action-primary);
opacity: 1;
}
body.iq-variant-techspec.home .iq-feature-rail__index {
position: relative;
z-index: 2;
color: var(--iq-action-signal);
font: 700 13px/1 var(--iq-display);
font-variant-numeric: tabular-nums;
letter-spacing: var(--iq-numeric-tracking);
}
body.iq-variant-techspec.home .iq-feature-rail__copy {
position: relative;
z-index: 2;
display: grid;
gap: 7px;
align-self: end;
padding-top: 12px;
border-top: 1px solid var(--iq-hair);
}
body.iq-variant-techspec.home .iq-feature-rail__copy b {
font: 700 17px/1.05 var(--iq-display);
letter-spacing: var(--iq-heading-tracking);
text-transform: uppercase;
}
body.iq-variant-techspec.home .iq-feature-rail__copy small {
color: var(--iq-fg-muted);
font: 600 10px/1.35 var(--iq-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
}
body.iq-variant-techspec.home .iq-feature-rail__arrow {
position: absolute;
z-index: 2;
top: 14px;
right: 16px;
color: var(--iq-fg-muted);
font-size: 15px;
transition: color .2s ease;
}
body.iq-variant-techspec.home .iq-feature-rail__item:hover .iq-feature-rail__arrow {
color: var(--iq-action-primary);
}
/* Декоративный слой — чертёжная штриховка, не цветные пятна. */
body.iq-variant-techspec.home .iq-feature-rail__visual {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: .3;
}
body.iq-variant-techspec.home .iq-feature-rail__visual--orbit {
background: repeating-radial-gradient(circle at 74% 34%, transparent 0 15px, rgba(110, 231, 255, .35) 15px 16px);
}
body.iq-variant-techspec.home .iq-feature-rail__visual--grid {
background: repeating-linear-gradient(90deg, transparent 0 11px, rgba(232, 236, 240, .3) 11px 12px),
repeating-linear-gradient(0deg, transparent 0 11px, rgba(232, 236, 240, .18) 11px 12px);
}
body.iq-variant-techspec.home .iq-feature-rail__visual--signal {
background: repeating-linear-gradient(115deg, transparent 0 7px, rgba(184, 192, 204, .34) 7px 8px);
}
body.iq-variant-techspec.home .iq-feature-rail__visual--rings {
background: repeating-radial-gradient(circle at 24% 78%, transparent 0 21px, rgba(184, 192, 204, .3) 21px 22px);
}
/* --------------------------------------------------------------------------
4. КАТАЛОГ НА ГЛАВНОЙ
Разметка отличается от архива: обложка — тег от WooCommerce, а не
CSS-фон, и на карточках НЕТ data-iq-* (их проставляет шаблон архива).
Поэтому унаследованные из iq-visual.css надписи, собранные через attr(),
здесь печатали бы «01 · REL · MIN» и пустую строку темпа — они гасятся.
-------------------------------------------------------------------------- */
body.iq-variant-techspec.home .main-catalog {
padding-top: 8px;
}
body.iq-variant-techspec.home .main-catalog__inner {
gap: 42px;
width: 100%;
max-width: 1440px;
padding: 46px var(--iq-space-5, 24px) 70px;
}
body.iq-variant-techspec.home .main-catalog__sidebar-wrapper {
width: 216px;
margin-right: 0;
}
/* Боковое меню — оглавление спецификации. */
body.iq-variant-techspec.home .sidebar {
padding: 14px 16px 18px;
border: 1px solid var(--iq-border-subtle);
border-radius: var(--iq-radius-panel);
background: var(--iq-bg-surface);
}
body.iq-variant-techspec.home .sidebar__link,
body.iq-variant-techspec.home .sidebar__menu > li > a {
color: var(--iq-fg-primary);
font: 600 11px/1.25 var(--iq-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
}
body.iq-variant-techspec.home .sidebar__link {
border-bottom-color: var(--iq-hair);
}
body.iq-variant-techspec.home .sidebar__menu > li > ul > li a {
border-radius: var(--iq-radius-media);
color: var(--iq-fg-muted);
font-size: 11px;
}
body.iq-variant-techspec.home .sidebar__menu > li > ul > li a::before {
border-radius: 0;
background: var(--iq-fg-muted);
}
body.iq-variant-techspec.home .sidebar__menu > li:hover > a,
body.iq-variant-techspec.home .sidebar__menu .current-menu-item a {
color: var(--iq-action-primary);
}
body.iq-variant-techspec.home .sidebar__menu > li > ul > li a:hover,
body.iq-variant-techspec.home .sidebar__menu > li > ul > li a:focus,
body.iq-variant-techspec.home .sidebar__menu > li > ul > li.current-menu-item a {
border-radius: var(--iq-radius-media);
background: var(--iq-card-bg-hover);
background-image: none;
box-shadow: none;
color: var(--iq-action-primary);
}
/* Заголовок секции каталога: подпись листа + крупный Unbounded. */
body.iq-variant-techspec.home .main-catalog__title {
grid-column: 1 / -1;
margin-bottom: 0;
padding-bottom: 22px;
background: var(--iq-bg-canvas);
color: var(--iq-fg-primary);
font: 700 clamp(26px, 3.4vw, 42px)/1 var(--iq-display);
letter-spacing: var(--iq-heading-tracking);
text-transform: uppercase;
}
body.iq-variant-techspec.home .main-catalog__title::before {
content: 'Fig. 01 — Product plates';
display: block;
margin-bottom: 14px;
padding-bottom: 11px;
border-bottom: 1px solid var(--iq-hair);
color: var(--iq-fg-muted);
font: 600 10px/1 var(--iq-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
}
/* Сетка плит: швы в 1px вместо отступов. */
body.iq-variant-techspec.home .main-catalog__list {
counter-reset: iq-plate;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
gap: 1px;
width: 100%;
border: 1px solid var(--iq-border-subtle);
border-radius: var(--iq-radius-panel);
background: var(--iq-border-subtle);
overflow: hidden;
}
body.iq-variant-techspec.home .main-catalog__list > .main-catalog__title,
body.iq-variant-techspec.home .main-catalog__list > .pagin {
background: var(--iq-bg-canvas);
}
body.iq-variant-techspec.home .main-catalog__list > .main-catalog__title {
padding: 20px 20px 22px;
}
body.iq-variant-techspec.home .main-catalog__list > .pagin {
grid-column: 1 / -1;
padding: 18px 20px;
}
/* --- плита --- */
body.iq-variant-techspec.home .catalog-item {
width: auto;
margin: 0;
padding: 12px 14px 14px;
}
/* Индексная строка. Без data-iq-* остаётся только порядковый номер листа. */
body.iq-variant-techspec.home .catalog-item::before {
content: counter(iq-plate, decimal-leading-zero) ' · IQ MUSIC';
}
/* Крупная цифра темпа на главной не из чего собраться: на этих карточках нет
data-iq-bpm. Блок гасится целиком, иначе остаётся пустая строка с отступом. */
body.iq-variant-techspec.home .catalog-item::after {
content: '';
display: none;
}
/* Обложка: здесь это , а не фон — плите нужен квадрат и своя рамка. */
body.iq-variant-techspec.home .catalog-item__image {
order: 2;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
margin: 0;
border: 1px solid var(--iq-hair);
border-radius: var(--iq-radius-media);
background-color: var(--iq-bg-canvas);
box-shadow: none;
}
body.iq-variant-techspec.home .catalog-item:hover .catalog-item__image {
box-shadow: none;
}
body.iq-variant-techspec.home .catalog-item__image img {
width: 100%;
height: 100%;
border-radius: 0;
box-shadow: none;
filter: saturate(.9) contrast(1.03);
transition: transform .35s ease, filter .35s ease;
}
body.iq-variant-techspec.home .catalog-item:hover .catalog-item__image img,
body.iq-variant-techspec.home .catalog-item:focus-within .catalog-item__image img {
transform: scale(1.03);
filter: saturate(1) contrast(1.06);
}
/* Метки new/top/sale — штампы направления. */
body.iq-variant-techspec .catalog-item__label-wrap {
top: 8px;
right: 8px;
}
body.iq-variant-techspec .catalog-item__label {
margin-right: 0;
padding: 3px 7px;
border: 1px solid rgba(232, 236, 240, .28);
border-radius: 0;
background: rgba(11, 12, 14, .72);
color: var(--iq-action-signal);
font: 700 9px/1 var(--iq-font);
letter-spacing: var(--iq-label-tracking);
}
body.iq-variant-techspec .catalog-item__label--new {
background: rgba(11, 12, 14, .72);
color: var(--iq-action-primary);
border-color: rgba(110, 231, 255, .4);
}
/* Слой действий — нижняя планка на обложке, как кнопка покупки в эталоне.
Цена живёт только внутри него, поэтому планка обязана быть читаемой. */
body.iq-variant-techspec.home .catalog-item__actions {
top: auto;
bottom: 0;
left: 0;
right: 0;
width: auto;
height: auto;
flex-direction: row;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: 0;
border-top: 1px solid var(--iq-hair-strong);
background: rgba(11, 12, 14, .9);
transform: translateY(10px);
opacity: 0;
transition: opacity .2s ease, transform .2s ease;
}
body.iq-variant-techspec.home .catalog-item:hover .catalog-item__actions,
body.iq-variant-techspec.home .catalog-item:focus-within .catalog-item__actions {
visibility: visible;
transform: translateY(0);
opacity: 1;
}
body.iq-variant-techspec.home .catalog-item__play {
margin: 0;
border-radius: var(--iq-radius-media);
}
body.iq-variant-techspec.home .catalog-item__play svg {
fill: var(--iq-action-signal);
}
body.iq-variant-techspec.home .catalog-item__real-price,
body.iq-variant-techspec.home .catalog-item__old-price {
width: auto;
text-align: left;
font-family: var(--iq-display);
font-variant-numeric: tabular-nums;
letter-spacing: var(--iq-heading-tracking);
}
body.iq-variant-techspec.home .catalog-item__real-price {
color: var(--iq-fg-primary);
font-size: 15px;
}
body.iq-variant-techspec.home .catalog-item__old-price {
color: var(--iq-fg-muted);
font-size: 12px;
text-decoration: line-through;
}
body.iq-variant-techspec.home .catalog-item__buttons-wrap {
width: auto;
margin: 0 0 0 auto;
padding: 0;
border-top: 0;
gap: 6px;
}
body.iq-variant-techspec.home .catalog-item__like,
body.iq-variant-techspec.home .catalog-item__cart {
border-radius: var(--iq-radius-media);
}
body.iq-variant-techspec.home .catalog-item__cart {
padding: 3px 6px;
background: var(--iq-action-primary);
}
body.iq-variant-techspec.home .catalog-item__cart svg {
fill: var(--iq-bg-canvas);
}
/* Название и автор. Порядок: обложка → название → автор. */
body.iq-variant-techspec.home .catalog-item__name {
order: 3;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--iq-hair);
color: var(--iq-fg-primary);
font: 600 14px/1.32 var(--iq-font);
letter-spacing: var(--iq-heading-tracking);
}
/* Подпись автора: на главной здесь нет ни темпа, ни шкалы — служебные
надписи и линейка, унаследованные от каталога, снимаются. */
body.iq-variant-techspec.home .catalog-item__description {
order: 4;
margin-top: 6px;
color: var(--iq-fg-muted);
font: 600 10px/1.4 var(--iq-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
}
body.iq-variant-techspec.home .catalog-item__description::before,
body.iq-variant-techspec.home .catalog-item__description::after {
content: none;
display: none;
}
/* Пагинация. */
body.iq-variant-techspec.home .pagin a,
body.iq-variant-techspec.home .pagin span {
border-radius: var(--iq-radius-media);
font-variant-numeric: tabular-nums;
}
/* --------------------------------------------------------------------------
5. НОВОСТИ, УСЛОВИЯ, ПРЕИМУЩЕСТВА, FAQ, SEO-текст
Один приём на все: служебная подпись над заголовком, хайрлайн-плиты,
прямые углы, ноль теней.
-------------------------------------------------------------------------- */
body.iq-variant-techspec.home .home-news__title,
body.iq-variant-techspec.home .trust__title,
body.iq-variant-techspec.home .why-us__title,
body.iq-variant-techspec.home .faq__title,
body.iq-variant-techspec.home .simple-text__title {
color: var(--iq-fg-primary);
font-family: var(--iq-display);
font-weight: 700;
font-size: clamp(24px, 2.9vw, 36px);
line-height: 1.02;
letter-spacing: var(--iq-heading-tracking);
text-transform: uppercase;
text-align: left;
}
body.iq-variant-techspec.home .home-news__title::before,
body.iq-variant-techspec.home .trust__title::before,
body.iq-variant-techspec.home .why-us__title::before,
body.iq-variant-techspec.home .faq__title::before,
body.iq-variant-techspec.home .simple-text__title::before {
display: block;
margin-bottom: 14px;
padding-bottom: 11px;
border-bottom: 1px solid var(--iq-hair);
color: var(--iq-fg-muted);
font: 600 10px/1 var(--iq-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
}
body.iq-variant-techspec.home .home-news__title::before { content: 'Sec. 04 — Журнал'; }
body.iq-variant-techspec.home .trust__title::before { content: 'Sec. 05 — Условия'; }
body.iq-variant-techspec.home .why-us__title::before { content: 'Sec. 06 — Обоснование'; }
body.iq-variant-techspec.home .faq__title::before { content: 'Sec. 07 — Вопросы'; }
body.iq-variant-techspec.home .simple-text__title::before { content: 'Sec. 08 — Описание'; }
body.iq-variant-techspec.home .home-news__title b { color: var(--iq-action-primary); }
body.iq-variant-techspec.home .home-news__inner,
body.iq-variant-techspec.home .why-us__inner {
align-items: stretch;
}
body.iq-variant-techspec.home .home-news__list {
gap: 1px;
border: 1px solid var(--iq-border-subtle);
border-radius: var(--iq-radius-panel);
background: var(--iq-border-subtle);
overflow: hidden;
}
body.iq-variant-techspec.home .news-preview {
/* Шов в 1px съедает половину пикселя у каждой из двух колонок. */
width: calc(50% - .5px);
margin-bottom: 0;
border: 0;
border-radius: 0;
background: var(--iq-card-bg);
box-shadow: none;
transition: background-color .2s ease;
}
body.iq-variant-techspec.home .news-preview:hover,
body.iq-variant-techspec.home .news-preview:focus {
background: var(--iq-card-bg-hover);
box-shadow: none;
}
body.iq-variant-techspec.home .news-preview__image {
border-radius: 0;
filter: saturate(.85) contrast(1.05);
}
body.iq-variant-techspec.home .news-preview__wrap {
background: none;
}
body.iq-variant-techspec.home .news-preview__title {
font: 700 16px/1.25 var(--iq-display);
letter-spacing: var(--iq-heading-tracking);
}
body.iq-variant-techspec.home .news-preview__title::after {
background: var(--iq-action-primary);
height: 1px;
}
body.iq-variant-techspec.home .news-preview__text {
color: var(--iq-fg-muted);
font-size: 13px;
}
body.iq-variant-techspec.home .home-news .btn--contrast {
align-self: flex-start;
margin-top: 26px;
border: 0;
border-radius: var(--iq-radius-media);
background: var(--iq-action-primary);
color: var(--iq-bg-canvas);
font: 700 11px/1 var(--iq-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
}
body.iq-variant-techspec.home .home-news .btn--contrast:hover,
body.iq-variant-techspec.home .home-news .btn--contrast:focus-visible {
background: var(--iq-fg-primary);
color: var(--iq-bg-canvas);
}
body.iq-variant-techspec.home .trust__text,
body.iq-variant-techspec.home .why-us__item,
body.iq-variant-techspec.home .faq__item {
border: 1px solid var(--iq-border-subtle);
border-radius: var(--iq-radius-panel);
background: var(--iq-bg-surface);
color: var(--iq-fg-muted);
}
body.iq-variant-techspec.home .trust__text {
font: 400 14px/1.6 var(--iq-font);
}
body.iq-variant-techspec.home .why-us__inner {
text-align: left;
}
body.iq-variant-techspec.home .why-us__list {
gap: 1px;
border: 1px solid var(--iq-border-subtle);
border-radius: var(--iq-radius-panel);
background: var(--iq-border-subtle);
overflow: hidden;
}
body.iq-variant-techspec.home .why-us__item {
counter-increment: iq-why;
position: relative;
max-width: none;
border: 0;
border-radius: 0;
padding: 22px 24px 22px 58px;
color: var(--iq-fg-primary);
font: 400 14px/1.5 var(--iq-font);
}
/* Номер пункта вместо буллета — как позиция в спецификации. */
body.iq-variant-techspec.home .why-us__item::before {
content: counter(iq-why, decimal-leading-zero);
position: absolute;
top: 22px;
left: 22px;
width: auto;
height: auto;
border-radius: 0;
background: none;
color: var(--iq-action-signal);
font: 700 12px/1 var(--iq-display);
font-variant-numeric: tabular-nums;
}
body.iq-variant-techspec.home .why-us__list {
counter-reset: iq-why;
}
body.iq-variant-techspec.home .faq__list {
gap: 1px;
border: 1px solid var(--iq-border-subtle);
border-radius: var(--iq-radius-panel);
background: var(--iq-border-subtle);
overflow: hidden;
}
body.iq-variant-techspec.home .faq__item {
margin-bottom: 0;
border: 0;
border-radius: 0;
background: var(--iq-bg-surface);
}
body.iq-variant-techspec.home .faq__question {
color: var(--iq-fg-primary);
font: 600 14px/1.4 var(--iq-font);
}
body.iq-variant-techspec.home .faq__question::after {
color: var(--iq-action-primary);
}
body.iq-variant-techspec.home .faq__answer {
border-top: 1px solid var(--iq-hair);
color: var(--iq-fg-muted);
font: 400 14px/1.6 var(--iq-font);
}
body.iq-variant-techspec.home .simple-text__inner {
align-items: stretch;
}
body.iq-variant-techspec.home .simple-text p {
max-width: 78ch;
color: var(--iq-fg-muted);
font: 400 14px/1.65 var(--iq-font);
}
body.iq-variant-techspec.home .simple-text a,
body.iq-variant-techspec.home .trust__text a,
body.iq-variant-techspec.home .faq__answer a {
color: var(--iq-action-primary);
}
/* --------------------------------------------------------------------------
6. АДАПТИВ (контрольные ширины 1440 / 1100 / 760 / 390)
-------------------------------------------------------------------------- */
@media (max-width: 1440px) {
body.iq-variant-techspec.home .main-catalog__inner { padding-inline: 20px; }
body.iq-variant-techspec.home .iq-feature-rail__item { min-height: 172px; }
}
@media (max-width: 1100px) {
body.iq-variant-techspec.home .iq-feature-rail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.iq-variant-techspec.home .main-catalog__inner {
flex-direction: column;
gap: 26px;
}
body.iq-variant-techspec.home .main-catalog__sidebar-wrapper { width: 100%; }
body.iq-variant-techspec.home .main-catalog__list {
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
body.iq-variant-techspec.home .main-banner__tempo-desk {
border-radius: var(--iq-radius-panel);
}
}
@media (max-width: 760px) {
body.iq-variant-techspec.home .home-main::before { inset: 6px; }
body.iq-variant-techspec.home .main-banner--iq::after { inset: 12px; }
body.iq-variant-techspec.home .main-banner__eyebrow { gap: 10px; }
body.iq-variant-techspec.home .iq-feature-rail__item { min-height: 152px; gap: 18px; }
body.iq-variant-techspec.home .main-catalog__list {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
/* Наведения на тач-устройствах нет — планка с ценой всегда открыта. */
body.iq-variant-techspec.home .catalog-item__actions {
visibility: visible;
transform: none;
opacity: 1;
}
body.iq-variant-techspec.home .news-preview {
width: 100%;
flex-direction: column;
}
body.iq-variant-techspec.home .news-preview__image {
width: 100%;
min-height: 180px;
}
body.iq-variant-techspec.home .why-us__list {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 430px) {
body.iq-variant-techspec.home .iq-feature-rail {
grid-template-columns: minmax(0, 1fr);
}
body.iq-variant-techspec.home .main-catalog__list {
grid-template-columns: minmax(0, 1fr);
}
body.iq-variant-techspec.home .main-catalog__list > .main-catalog__title {
padding: 16px 14px 18px;
}
body.iq-variant-techspec.home .catalog-item { padding: 10px 12px 12px; }
body.iq-variant-techspec.home .main-banner__tempo-switch { width: 100%; }
body.iq-variant-techspec.home .main-banner__tempo-button { flex: 1 1 auto; padding: 0 10px; }
}
/* Планка с ценой не должна прятаться там, где нет курсора. */
@media (hover: none) {
body.iq-variant-techspec.home .catalog-item__actions {
visibility: visible;
transform: none;
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
body.iq-variant-techspec.home .catalog-item__image img,
body.iq-variant-techspec.home .catalog-item__actions,
body.iq-variant-techspec.home .iq-feature-rail__item,
body.iq-variant-techspec.home .main-banner__cta,
body.iq-variant-techspec.home .main-banner__secondary {
transition: none;
}
body.iq-variant-techspec.home .catalog-item:hover .catalog-item__image img {
transform: none;
}
body.iq-variant-techspec.home .catalog-item__actions {
visibility: visible;
transform: none;
opacity: 1;
}
}
/* Кнопка «Послушать» в геро.
---------------------------------------------------------------------------
Разметка уходит в обе версии — прячем по умолчанию и включаем только в
techspec: editorial это рабочий вид сайта, он не должен поехать из-за
строящейся версии. Форма третья по счёту в ряду и намеренно самая тихая:
контур без заливки, чтобы не спорить с основным действием. */
.main-banner__preview {
display: none;
}
body.iq-variant-techspec.home .main-banner__preview {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: var(--iq-control-h);
padding: 0 18px;
border: 1px solid var(--iq-hair-strong);
border-radius: var(--iq-radius-media);
background: transparent;
color: var(--iq-fg-primary);
font: 700 12px/1 var(--iq-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
cursor: pointer;
transition: border-color .2s ease, color .2s ease;
}
body.iq-variant-techspec.home .main-banner__preview:hover,
body.iq-variant-techspec.home .main-banner__preview:focus-visible {
border-color: var(--iq-action-primary);
color: var(--iq-action-primary);
}
/* Значок отвечает за состояние: пока трек играет, треугольник меняется на паузу
средствами плеера, а сама кнопка подсвечивается. */
body.iq-variant-techspec.home .main-banner__preview-icon {
font-size: 10px;
line-height: 1;
}
body.iq-variant-techspec.home .main-banner__preview.is-playing {
border-color: var(--iq-action-primary);
color: var(--iq-action-primary);
}
/* --- 20-product.css --- */
/* ==========================================================================
20-product.css — страница товара в теме «Tech Spec»
--------------------------------------------------------------------------
Лист технической документации: рамка с угловыми реперами, служебные подписи
моно 10px/.16em, крупный Unbounded в заголовке, данные товара поданы как
измерения (сетка ячеек с 1px швами), прямые углы.
ВАЖНО: каждое правило начинается с body.iq-variant-techspec. Тема editorial —
боевой вид сайта, любая протечка ломает прод. Переменные на :root не
объявляются: var() в объявлении кастомного свойства резолвится относительно
элемента объявления, а темы переопределяют токены на body — производный токен
на :root замёрзнет на базовой палитре.
Файл грузится functions.php из assets/css/parts/ ПОСЛЕ iq-visual.css,
поэтому веса `body.iq-variant-techspec.single-product .x` хватает, чтобы
перебить базовые `body.single-product .x`.
========================================================================== */
/* --- 1. Лист: рамка чертежа вокруг карточки товара ------------------------ */
body.iq-variant-techspec.single-product .product { background: transparent; }
body.iq-variant-techspec.single-product .product__inner {
max-width: 1320px;
margin-inline: auto;
}
body.iq-variant-techspec.single-product .product__info-wrap {
position: relative;
align-items: flex-start;
gap: clamp(20px, 3vw, 54px);
margin-bottom: 0;
padding: 30px 30px 34px;
border: 1px solid var(--iq-border-subtle);
border-radius: var(--iq-radius-panel);
background: var(--iq-bg-surface);
box-shadow: none;
}
/* Угловые реперы листа. Псевдоэлемент вынут из потока (position: absolute),
иначе он стал бы flex-элементом контейнера и сдвинул колонки. */
body.iq-variant-techspec.single-product .product__info-wrap::before {
content: '';
position: absolute;
inset: 8px;
pointer-events: none;
border: 0;
background:
linear-gradient(var(--iq-action-signal), var(--iq-action-signal)) 0 0 / 16px 1px no-repeat,
linear-gradient(var(--iq-action-signal), var(--iq-action-signal)) 0 0 / 1px 16px no-repeat,
linear-gradient(var(--iq-action-signal), var(--iq-action-signal)) 100% 100% / 16px 1px no-repeat,
linear-gradient(var(--iq-action-signal), var(--iq-action-signal)) 100% 100% / 1px 16px no-repeat;
opacity: .5;
}
/* Подпись листа, врезанная в верхнюю кромку рамки. */
body.iq-variant-techspec.single-product .product__info-wrap::after {
content: 'Product spec sheet · rev 02';
position: absolute;
top: -7px;
left: 22px;
padding: 0 8px;
background: var(--iq-bg-canvas);
color: var(--iq-fg-muted);
font: 600 10px/1.3 var(--iq-font);
font-variant-numeric: tabular-nums;
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
pointer-events: none;
}
/* --- 2. Хлебные крошки: служебная строка листа ----------------------------
Базовая типографика крошек для techspec уже задана в iq-visual.css,
здесь только выравнивание по ширине листа товара. */
body.iq-variant-techspec.single-product .breadcrumbs {
max-width: 1320px;
margin-inline: auto;
padding: 18px 0 10px;
}
body.iq-variant-techspec.single-product .breadcrumb__list {
align-items: center;
gap: 0;
}
/* --- 3. Изображение товара: главное фото, чертёж только по краю ----------- */
body.iq-variant-techspec.single-product .product__info-wrap > .product__img {
position: sticky;
top: 20px;
flex-shrink: 0;
width: clamp(220px, 30vw, 360px);
max-width: none;
margin: 0;
padding: 0;
overflow: visible;
border: 1px solid var(--iq-hair);
border-radius: var(--iq-radius-media);
background: var(--iq-bg-canvas);
}
body.iq-variant-techspec.single-product .product__img img {
display: block;
width: 100%;
height: auto;
border-radius: 0;
filter: saturate(.94) contrast(1.03);
}
/* Реперные метки по углам снимка — тонкие, картинку не перекрывают. */
body.iq-variant-techspec.single-product .product__info-wrap > .product__img::before {
content: '';
position: absolute;
inset: 6px;
pointer-events: none;
background:
linear-gradient(var(--iq-action-signal), var(--iq-action-signal)) 0 0 / 10px 1px no-repeat,
linear-gradient(var(--iq-action-signal), var(--iq-action-signal)) 0 0 / 1px 10px no-repeat,
linear-gradient(var(--iq-action-signal), var(--iq-action-signal)) 100% 100% / 10px 1px no-repeat,
linear-gradient(var(--iq-action-signal), var(--iq-action-signal)) 100% 100% / 1px 10px no-repeat;
opacity: .55;
}
body.iq-variant-techspec.single-product .product__info-wrap > .product__img::after {
content: 'Fig. 01 — изображение товара';
position: absolute;
left: 0;
bottom: -20px;
color: var(--iq-fg-muted);
font: 600 10px/1.3 var(--iq-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
white-space: nowrap;
}
/* --- 4. Колонка данных ----------------------------------------------------- */
body.iq-variant-techspec.single-product .product__info {
min-width: 0;
padding: 0;
}
/* Кикер листа: служебная подпись над заголовком, слева — точка-репер 6px
(как .head__strip .dot в стайлфрейме, нарисована фоном, не бордюром).
Псевдоэлемент оставлен в потоке — .product__info это flex-колонка,
и ::before встаёт первой строкой на всю ширину. */
body.iq-variant-techspec.single-product .product__info::before {
content: 'Спецификация товара';
display: block;
margin: 0 0 16px;
padding: 0 0 10px 16px;
background: linear-gradient(var(--iq-action-primary), var(--iq-action-primary)) 0 4px / 6px 6px no-repeat;
border-bottom: 1px solid var(--iq-hair);
color: var(--iq-fg-muted);
font: 600 10px/1.6 var(--iq-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
}
body.iq-variant-techspec.single-product .product__purchase-count {
margin: 0 0 10px;
color: var(--iq-action-signal);
font: 600 10px/1.3 var(--iq-font);
font-variant-numeric: tabular-nums;
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
}
body.iq-variant-techspec.single-product .product__title {
margin: 0;
color: var(--iq-fg-primary);
font-family: var(--iq-display);
font-weight: 700;
font-size: clamp(24px, 3.2vw, 42px);
line-height: 1.04;
letter-spacing: var(--iq-heading-tracking);
text-transform: uppercase;
}
/* --- 5. Цена ------------------------------------------------------------- */
body.iq-variant-techspec.single-product .product__actions {
flex-wrap: wrap;
align-items: center;
margin: 26px 0 0;
}
body.iq-variant-techspec.single-product .product__actions-row {
flex-wrap: wrap;
margin-top: 0;
}
body.iq-variant-techspec.single-product .product__price {
margin-right: 24px;
color: var(--iq-fg-primary);
font-family: var(--iq-display);
font-weight: 700;
font-size: clamp(28px, 3.6vw, 42px);
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: var(--iq-heading-tracking);
text-transform: none;
}
/* Базовая тема дописывает « Р» кириллицей — на чертеже нужен знак рубля. */
body.iq-variant-techspec.single-product .product__price::after {
content: ' ₽';
/* .46em при кегле 42px давало 19px — знак валюты выглядел сноской рядом с
числом, а не его частью. Тише числа, но одного с ним порядка. */
font-size: .6em;
font-weight: 600;
letter-spacing: var(--iq-numeric-tracking);
color: var(--iq-fg-muted);
}
body.iq-variant-techspec.single-product .product__price--old {
margin-right: 14px;
color: var(--iq-fg-muted);
font-size: 16px;
text-decoration: line-through;
}
body.iq-variant-techspec.single-product .product__price--old::after { font-size: .7em; }
/* Обратный отсчёт распродажи — приборная плашка, а не рекламный баннер. */
body.iq-variant-techspec.single-product .countdown__inner {
border-radius: var(--iq-radius-panel);
border: 1px solid var(--iq-border-subtle);
background: var(--iq-bg-canvas);
}
body.iq-variant-techspec.single-product .countdown__discount {
color: var(--iq-action-primary);
font-family: var(--iq-display);
font-weight: 700;
letter-spacing: var(--iq-heading-tracking);
text-transform: uppercase;
}
body.iq-variant-techspec.single-product .countdown__description,
body.iq-variant-techspec.single-product .countdown__time-item {
color: var(--iq-fg-muted);
font: 600 10px/1.4 var(--iq-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
}
body.iq-variant-techspec.single-product .countdown__time-bg {
border-radius: var(--iq-radius-media);
background: var(--iq-bg-surface);
color: var(--iq-fg-primary);
font-variant-numeric: tabular-nums;
}
/* --- 6. Характеристики: список условий превращён в блок измерений ---------
Базовая тема прячет его на десктопе (display: none) и рисует галочками на
мобильном. На чертеже это главный носитель данных, поэтому он виден всегда. */
body.iq-variant-techspec.single-product .product__purchase-conditions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
/* Seams are cell borders rather than a plate showing through a 1px gap:
the row rarely divides evenly, and the leftover track painted the plate
colour as a grey block next to the last measurement. */
gap: 0;
width: 100%;
margin: 24px 0 0;
padding: 0;
list-style: none;
border: 1px solid var(--iq-border-subtle);
border-radius: var(--iq-radius-panel);
background: var(--iq-bg-surface);
overflow: hidden;
counter-reset: iq-spec;
}
body.iq-variant-techspec.single-product .product__purchase-conditions::before {
content: 'Параметры поставки';
grid-column: 1 / -1;
padding: 11px 14px;
background: var(--iq-bg-canvas);
color: var(--iq-fg-muted);
font: 600 10px/1.3 var(--iq-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
}
body.iq-variant-techspec.single-product .product__purchase-conditions li {
counter-increment: iq-spec;
margin: 0;
padding: 13px 14px 14px;
border-right: 1px solid var(--iq-border-subtle);
background: var(--iq-bg-surface);
color: var(--iq-fg-primary);
font: 500 13px/1.45 var(--iq-font);
}
/* У цифрового товара измерений три, а дорожек на широком экране четыре, и
правая граница последнего пункта висела чертой посреди пустого места —
ячейка читалась как незаполненная. Границы между пунктами хватает. */
body.iq-variant-techspec.single-product .product__purchase-conditions li:last-child {
border-right: 0;
}
/* Галочка базовой темы заменена на порядковый номер измерения. */
body.iq-variant-techspec.single-product .product__purchase-conditions li::before {
content: counter(iq-spec, decimal-leading-zero);
position: static;
display: block;
margin-bottom: 6px;
color: var(--iq-action-signal);
font: 600 10px/1 var(--iq-font);
font-variant-numeric: tabular-nums;
letter-spacing: var(--iq-label-tracking);
}
/* --- 7. Покупка ----------------------------------------------------------- */
body.iq-variant-techspec.single-product .counter {
width: 100%;
margin: 22px 0 0;
}
body.iq-variant-techspec.single-product .product__form {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
body.iq-variant-techspec.single-product .product__form .quantity .qty {
min-height: 46px;
border: 1px solid var(--iq-border-subtle);
border-radius: var(--iq-radius-input);
background: var(--iq-input-bg);
color: var(--iq-fg-primary);
font-family: var(--iq-font);
font-weight: 600;
font-variant-numeric: tabular-nums;
text-align: center;
}
body.iq-variant-techspec.single-product .product__size-label {
color: var(--iq-fg-muted);
font: 600 10px/1.3 var(--iq-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
}
body.iq-variant-techspec.single-product .product__size-select {
min-height: 46px;
padding: 0 12px;
border: 1px solid var(--iq-border-subtle);
border-radius: var(--iq-radius-input);
background: var(--iq-input-bg);
color: var(--iq-fg-primary);
font-family: var(--iq-font);
font-weight: 600;
}
/* Оформление кнопок целиком в 06-controls.css. Здесь раньше лежал его дубликат,
написанный до появления компонента: он задавал заливку, кегль и высоту 46px,
но не центрировал текст по вертикали и не оставлял места под значок, который
базовая тема кладёт абсолютно у правого края. Отсюда наезд значка на подпись
и обрезанное «Добавить в» вместо «Добавить в избранное».
Роли читаются из разметки: у корзины btn--contrast, у избранного и
«вернуться к покупкам» — контур. Здесь остаётся только то, чего компонент
знать не может: цвет значка и перебивание стилей плагина избранного. */
/* iq-visual.css ставит этим кнопкам пилюлю (`border-radius: 999px`) и ширину
214px правилом, общему для обоих вариантов и более весомому, чем компонент.
Editorial на пилюлях и построен, поэтому правило не трогаем — возвращаем
форму токеном только здесь. Ширину отпускаем: подпись бывает разной длины. */
body.iq-variant-techspec.single-product .product__actions > .btn,
body.iq-variant-techspec.single-product .product__form .simplefavorite-button,
body.iq-variant-techspec.single-product .product__form .btn--light-violet {
border-radius: var(--iq-btn-radius);
min-width: 0;
}
body.iq-variant-techspec.single-product .product__add-to-cart svg { fill: var(--iq-button-primary-fg); }
body.iq-variant-techspec.single-product .product__actions .simplefavorite-button {
border-color: var(--iq-hair-strong) !important;
color: var(--iq-fg-primary) !important;
}
body.iq-variant-techspec.single-product .product__actions .simplefavorite-button:hover,
body.iq-variant-techspec.single-product .product__actions .simplefavorite-button:focus-visible {
border-color: var(--iq-action-primary) !important;
color: var(--iq-action-primary) !important;
}
body.iq-variant-techspec.single-product .product__actions .simplefavorite-button svg { fill: currentColor; }
/* --- 8. Аудио-сэмплы: строки протокола, а не карточки --------------------- */
body.iq-variant-techspec.single-product .product__list:not(:empty) {
margin: 34px 0 0;
padding: 0;
}
body.iq-variant-techspec.single-product .player-controls {
margin: 0 0 14px;
padding: 10px 12px;
border: 1px solid var(--iq-border-subtle);
border-radius: var(--iq-radius-panel);
background: var(--iq-bg-canvas);
}
body.iq-variant-techspec.single-product .player-controls .player__btn,
body.iq-variant-techspec.single-product .player__btn {
border: 1px solid var(--iq-border-subtle);
border-radius: var(--iq-radius-media);
background: transparent;
color: var(--iq-fg-primary);
}
body.iq-variant-techspec.single-product .player-controls .player__btn:hover,
body.iq-variant-techspec.single-product .player__btn:hover,
body.iq-variant-techspec.single-product .player__btn:focus-visible {
border-color: var(--iq-action-primary);
color: var(--iq-action-primary);
}
body.iq-variant-techspec.single-product .player {
border: 0;
border-bottom: 1px solid var(--iq-hair);
border-radius: 0;
background: transparent;
color: var(--iq-fg-primary);
transition: background .18s ease;
}
body.iq-variant-techspec.single-product .player:hover { background: var(--iq-card-bg-hover); }
body.iq-variant-techspec.single-product .player__cover img {
border-radius: var(--iq-radius-media);
border: 1px solid var(--iq-hair);
}
body.iq-variant-techspec.single-product .player__singer {
color: var(--iq-fg-muted);
font: 600 10px/1.4 var(--iq-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
}
body.iq-variant-techspec.single-product .player__song {
color: var(--iq-fg-primary);
font: 600 14px/1.35 var(--iq-font);
letter-spacing: var(--iq-heading-tracking);
}
body.iq-variant-techspec.single-product .player__progress {
border-radius: 0;
background: var(--iq-hair-strong);
}
body.iq-variant-techspec.single-product .player__progress::-webkit-progress-bar {
border-radius: 0;
background: var(--iq-hair-strong);
}
body.iq-variant-techspec.single-product .player__progress::-webkit-progress-value {
border-radius: 0;
background: var(--iq-action-primary);
}
body.iq-variant-techspec.single-product .player__progress::-moz-progress-bar {
border-radius: 0;
background: var(--iq-action-primary);
}
body.iq-variant-techspec.single-product .player__progress-separator { background: var(--iq-action-primary); }
body.iq-variant-techspec.single-product .player__current,
body.iq-variant-techspec.single-product .player__total {
color: var(--iq-fg-muted);
font-family: var(--iq-font);
font-size: 11px;
font-variant-numeric: tabular-nums;
letter-spacing: var(--iq-label-tracking);
}
/* Видео-сэмпл (товары с превью-роликом) */
body.iq-variant-techspec.single-product .product__video-preview {
border: 1px solid var(--iq-hair);
border-radius: var(--iq-radius-media);
}
/* --- 9. Описание: текстовый блок спецификации ----------------------------- */
body.iq-variant-techspec.single-product .product__description {
margin: 30px 0 0;
padding: 0;
}
body.iq-variant-techspec.single-product .product__description::before {
content: 'Описание';
display: block;
margin: 0 0 14px;
padding: 0 0 9px;
border-bottom: 1px solid var(--iq-hair);
color: var(--iq-fg-muted);
font: 600 10px/1.3 var(--iq-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
}
body.iq-variant-techspec.single-product .product__description-content,
body.iq-variant-techspec.single-product .product__description-content p,
body.iq-variant-techspec.single-product .product__description-content div,
body.iq-variant-techspec.single-product .product__description-content span,
body.iq-variant-techspec.single-product .product__description-content li {
color: var(--iq-fg-muted) !important;
font-family: var(--iq-font);
font-size: 14px;
line-height: 1.62;
}
body.iq-variant-techspec.single-product .product__description-content strong,
body.iq-variant-techspec.single-product .product__description-content b {
color: var(--iq-fg-primary) !important;
font-weight: 700;
}
body.iq-variant-techspec.single-product .product__description-content a {
color: var(--iq-action-primary) !important;
text-decoration: none;
border-bottom: 1px solid rgba(110, 231, 255, .35);
}
body.iq-variant-techspec.single-product .product__description-content a:hover,
body.iq-variant-techspec.single-product .product__description-content a:focus-visible {
border-bottom-color: var(--iq-action-primary);
}
body.iq-variant-techspec.single-product .product__description-content hr {
height: 1px;
margin: 18px 0;
border: 0;
background: var(--iq-hair);
}
body.iq-variant-techspec.single-product .product__description-content ul { padding-left: 18px; }
body.iq-variant-techspec.single-product .product__description-content li { margin: 0 0 6px; }
/* --- 10. Отзывы: отдельный лист приложения -------------------------------- */
body.iq-variant-techspec.single-product .product__reviews {
max-width: 1320px;
margin: 30px auto 0;
}
body.iq-variant-techspec.single-product .product__reviews-inner {
padding: 26px 28px;
border: 1px solid var(--iq-border-subtle);
border-radius: var(--iq-radius-panel);
background: var(--iq-bg-surface);
box-shadow: none;
}
body.iq-variant-techspec.single-product .product__reviews .woocommerce-Reviews-title,
body.iq-variant-techspec.single-product .product__reviews #reply-title {
color: var(--iq-fg-primary);
font-family: var(--iq-display);
font-weight: 700;
font-size: clamp(18px, 2vw, 26px);
line-height: 1.1;
letter-spacing: var(--iq-heading-tracking);
text-transform: uppercase;
}
body.iq-variant-techspec.single-product .product__reviews .woocommerce-noreviews {
color: var(--iq-fg-muted);
font: 500 13px/1.5 var(--iq-font);
}
body.iq-variant-techspec.single-product .product__reviews .woocommerce-verification-required {
border: 1px solid var(--iq-border-subtle);
border-radius: var(--iq-radius-media);
background: transparent;
color: var(--iq-action-signal);
font: 600 10px/1.5 var(--iq-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
}
body.iq-variant-techspec.single-product .product__reviews .comment_container {
border: 1px solid var(--iq-hair);
border-radius: var(--iq-radius-media);
background: var(--iq-bg-canvas);
}
body.iq-variant-techspec.single-product .product__reviews .comment-form-comment textarea,
body.iq-variant-techspec.single-product .product__reviews .comment-form input:not([type='submit']) {
border: 1px solid var(--iq-border-subtle);
border-radius: var(--iq-radius-input);
background: var(--iq-input-bg);
color: var(--iq-fg-primary);
font-family: var(--iq-font);
}
body.iq-variant-techspec.single-product .product__reviews .comment-form input[type='submit'] {
border: 0;
border-radius: var(--iq-radius-media);
background: var(--iq-action-primary);
color: var(--iq-button-primary-fg);
font-family: var(--iq-font);
font-weight: 700;
font-size: 12px;
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
}
/* --- 11. SEO-блок под товаром: служебная полоса листа --------------------- */
body.iq-variant-techspec.single-product .simple-text {
min-height: 0;
padding: 0;
background: var(--iq-bg-canvas);
}
body.iq-variant-techspec.single-product .simple-text__inner {
max-width: 1320px;
margin: 26px auto 0;
padding: 22px 24px 24px;
border: 1px solid var(--iq-border-subtle);
border-radius: var(--iq-radius-panel);
background: var(--iq-bg-surface);
color: var(--iq-fg-muted);
font-family: var(--iq-font);
font-size: 13px;
line-height: 1.6;
}
body.iq-variant-techspec.single-product .simple-text__title {
margin: 0 0 12px;
color: var(--iq-fg-primary);
font-family: var(--iq-display);
font-weight: 700;
font-size: clamp(16px, 1.8vw, 22px);
letter-spacing: var(--iq-heading-tracking);
text-transform: uppercase;
}
body.iq-variant-techspec.single-product .simple-text a { color: var(--iq-action-primary); }
/* --- 12. Похожие товары ---------------------------------------------------
Шаблон single-product.php этой темы блок не выводит. Правила оставлены на
случай, если WooCommerce вернёт стандартную секцию: плиты те же, что в
каталоге, — 1px швы и прямые углы. */
body.iq-variant-techspec.single-product .related.products,
body.iq-variant-techspec.single-product .upsells.products {
max-width: 1320px;
margin: 30px auto 0;
}
body.iq-variant-techspec.single-product .related.products > h2,
body.iq-variant-techspec.single-product .upsells.products > h2 {
margin: 0 0 14px;
padding: 0 0 10px;
border-bottom: 1px solid var(--iq-hair);
color: var(--iq-fg-muted);
font: 600 10px/1.3 var(--iq-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
}
body.iq-variant-techspec.single-product .related.products .catalog-item,
body.iq-variant-techspec.single-product .upsells.products .catalog-item {
border-radius: 0;
box-shadow: none;
}
/* --- 13. Адаптив ---------------------------------------------------------- */
@media (max-width: 1024px) {
body.iq-variant-techspec.single-product .product__info-wrap { padding: 24px 22px 28px; }
body.iq-variant-techspec.single-product .product__info-wrap > .product__img { width: clamp(180px, 28vw, 280px); }
}
@media (max-width: 767px) {
body.iq-variant-techspec.single-product .product__info-wrap {
padding: 20px 16px 24px;
}
body.iq-variant-techspec.single-product .product__info-wrap::after {
left: 14px;
font-size: 9px;
letter-spacing: var(--iq-label-tracking);
}
/* Снимок в колонке скрыт базовой темой, дублёр живёт в описании. */
body.iq-variant-techspec.single-product .product__img--mobile {
display: block;
margin: 0 0 16px;
border: 1px solid var(--iq-hair);
border-radius: var(--iq-radius-media);
}
body.iq-variant-techspec.single-product .product__price--mobile { display: block; margin: 0 0 14px; }
body.iq-variant-techspec.single-product .product__purchase-conditions {
grid-template-columns: 1fr;
}
body.iq-variant-techspec.single-product .product__form { gap: 8px; }
body.iq-variant-techspec.single-product .product__add-to-cart,
body.iq-variant-techspec.single-product .product__actions > .btn:not(.product__add-to-cart) {
flex: 1 1 100%;
justify-content: center;
}
body.iq-variant-techspec.single-product .product__reviews-inner { padding: 20px 16px; }
body.iq-variant-techspec.single-product .simple-text__inner { padding: 18px 16px 20px; }
}
@media (max-width: 480px) {
body.iq-variant-techspec.single-product .product__title { font-size: 22px; line-height: 1.1; }
body.iq-variant-techspec.single-product .product__price { font-size: 26px; }
}
/* --- 14. Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
body.iq-variant-techspec.single-product .product__add-to-cart,
body.iq-variant-techspec.single-product .player { transition: none; }
body.iq-variant-techspec.single-product .product__info-wrap > .product__img { position: static; }
}
/* --- 25-catalog.css --- */
/* Tech Spec — каталог на узких экранах.
Каталог был доведён на 1440 и там держится, а на 390 разъезжался: карточка
складывалась поверх обложки, быстрые направления накладывались друг на друга,
между блоками стояли серые полосы. Каждый из трёх дефектов — оттого, что
editorial получил мобильные правила отдельным блоком, а techspec нет. */
/* Пагинация — полноширинный ряд. Общее правило спана целит в `.pagin`, а
WooCommerce отдаёт `ul.page-numbers`, поэтому она занимала одну колонку из
трёх, а две пустые дорожки плита красила серым. Тот же дефект плиты, пятый
раз: незаполненный ряд всегда виден. */
body.iq-variant-techspec.post-type-archive-product .main-catalog__list > ul.page-numbers,
body.iq-variant-techspec.tax-product_cat .main-catalog__list > ul.page-numbers {
grid-column: 1 / -1;
/* Внешний отступ в клетке сетки фона не несёт, поэтому его 34px тоже
красились плитой — узкой серой полосой над номерами страниц. Отступ
переезжает в поля: они внутри элемента и закрашены им. */
margin: 0;
padding-top: 50px;
}
@media (max-width: 760px) {
/* Шов между карточками рисуется плитой, просвечивающей сквозь зазор 1px.
На одной колонке эта плита не рисует ничего, зато красит серым любой ряд,
который контент не заполнил, — заголовок с внешним отступом, полосу
фильтров, пагинацию. Тот же дефект, что четырежды до этого; на мобильном
он лечится в корне — шов становится бордюром карточки. */
body.iq-variant-techspec.post-type-archive-product .main-catalog__list,
body.iq-variant-techspec.tax-product_cat .main-catalog__list {
gap: 0;
border: 0;
background: transparent;
overflow: visible;
}
body.iq-variant-techspec.post-type-archive-product .main-catalog__list > .catalog-item,
body.iq-variant-techspec.tax-product_cat .main-catalog__list > .catalog-item {
border-top: var(--iq-seam);
}
/* Заголовок листа больше не обязан нести собственный фон: под ним нет плиты. */
body.iq-variant-techspec.post-type-archive-product .main-catalog__list > .main-catalog__title,
body.iq-variant-techspec.tax-product_cat .main-catalog__list > .main-catalog__title {
background: none;
border-bottom: var(--iq-seam);
padding-bottom: 18px;
}
/* Быстрые направления. Базовая тема кладёт подпись, название и стрелку в один
флексовый ряд — на 390 подпись наезжает на название, а название уезжает за
край карточки. Editorial чинит это сеткой; techspec повторяет её структуру
своими токенами. */
body.iq-variant-techspec .main-catalog__quick-group {
display: grid;
gap: var(--iq-gap-2);
}
body.iq-variant-techspec .main-catalog__quick-group-label {
display: block;
font: var(--iq-label-weight) var(--iq-label-size)/var(--iq-label-leading) var(--iq-label-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
color: var(--iq-fg-muted);
}
body.iq-variant-techspec .main-catalog__quick-category {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto;
align-content: center;
column-gap: var(--iq-gap-3);
padding: var(--iq-panel-pad-tight);
}
body.iq-variant-techspec .main-catalog__quick-category-kicker {
grid-column: 1;
min-width: 0;
color: var(--iq-fg-muted);
font: var(--iq-label-weight) var(--iq-label-size)/var(--iq-label-leading) var(--iq-label-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
}
body.iq-variant-techspec .main-catalog__quick-category-title {
grid-column: 1;
min-width: 0;
}
body.iq-variant-techspec .main-catalog__quick-category-arrow {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
}
}
@media (max-width: 520px) {
/* «КАТАЛОГ ТОВАРОВ» в Unbounded 700 шире 332px даже на нижней ступени clamp —
слово рвалось посреди себя. Заголовок листа должен читаться целиком.
Карточка при этом остаётся вертикальной. Editorial на узком экране кладёт
её горизонтально, обложка слева; у techspec карточка построена иначе —
номер, обложка с ценой поверх, отбивка, подписи, — и переверстать её в две
колонки значит сломать замысел ради чужого. */
body.iq-variant-techspec.post-type-archive-product .main-catalog__list > .main-catalog__title,
body.iq-variant-techspec.tax-product_cat .main-catalog__list > .main-catalog__title {
font-size: clamp(20px, 5.6vw, 26px);
}
}
/* --------------------------------------------------------------------------
Вводный текст категории (04.08.2026)
Ставится между заголовком и сеткой товаров. Ширина ограничена по мере
чтения, а не по ширине сетки: строка в 120 символов на широком экране
не читается, сколько бы места ни было.
-------------------------------------------------------------------------- */
body.iq-variant-techspec .main-catalog__intro {
max-width: 70ch;
margin: 14px 0 26px;
color: var(--iq-fg-muted);
font-size: 15px;
line-height: 1.6;
}
body.iq-variant-techspec .main-catalog__intro p { margin: 0 0 10px; }
body.iq-variant-techspec .main-catalog__intro p:last-child { margin-bottom: 0; }
body.iq-variant-techspec .main-catalog__intro ul {
margin: 10px 0;
padding-left: 18px;
list-style: disc;
}
body.iq-variant-techspec .main-catalog__intro strong { color: var(--iq-fg-primary); }
/* --- 26-gauges.css --- */
/* Приборы карточки каталога: шкала темпа и дуга длительности.
=========================================================================
До этого файла темп и длительность были числами. Линейка темпа под ними
уже рисовалась (iq-visual.css, .catalog-item__description::after), но без
подписей: метка стояла где-то на голой полоске и ничего не сообщала.
Длительность вообще пряталась в служебной строке «04 · REL 67081 · 61 MIN».
Здесь появляются две вещи, обе — разметкой из woocommerce/archive-product.php:
1. подписи 88 / 120 / 148 с крупными засечками, чтобы метка читалась как
значение на шкале;
2. дуга длительности — кольцо, закрашенное на долю от 90 минут.
Только techspec. В editorial карточка другая, и блок там не рисуется. */
/* Разметка приборов уходит в обе версии страницы, а стили — только в techspec.
В editorial блок без стилей печатался строкой «88120148 61 мин» под именем
автора. Класс собственный, не темы, поэтому display здесь безопасен: он ничего
чужого не перебивает. */
.catalog-item__gauges { display: none; }
/* Служебная строка больше не печатает длительность: она ушла в дугу, а строка
дублировала её мелким шрифтом. Правило повторяет исходное из iq-visual.css
без хвоста ' · NN MIN' и перебивает его как более поздний файл. */
body.iq-variant-techspec .catalog-item::before {
content: counter(iq-plate, decimal-leading-zero) ' · REL ' attr(data-iq-release);
}
/* Карточки без темпа (абонементы, сборники «different bpm») печатали на месте
числа длинное тире. В display-начертании 700 на 38 px оно выглядело белым
бруском — читалось как дефект вёрстки, а не как «значения нет». Приглушённое
тире осталось серым бруском, поэтому знака нет вовсе: про отсутствие темпа
уже сказано подписью «Темп не задан» прямо под ним. */
body.iq-variant-techspec .catalog-item[data-iq-bpm='0']::after {
content: '';
margin: 0;
}
/* order 4 — тот же, что у .catalog-item__description. Внутри одного порядка
flex сохраняет порядок разметки, поэтому блок встаёт сразу за линейкой. */
body.iq-variant-techspec .catalog-item__gauges {
order: 4;
display: block;
margin-top: 2px;
}
/* --- шкала темпа ---------------------------------------------------------
Подписи расставлены абсолютно, а не через space-between: 120 лежит на
(120 − 88) / (148 − 88) = 53.333 % шкалы, а не в её середине, и flex
поставил бы подпись мимо собственной засечки. */
body.iq-variant-techspec .catalog-item__scale {
position: relative;
display: block;
height: 18px;
color: var(--iq-fg-muted);
font: 600 9px/1 var(--iq-font);
font-variant-numeric: tabular-nums;
letter-spacing: var(--iq-label-tracking);
}
/* Крупные засечки на границах и на отметке 120 — верхние 5 px строки, вплотную
к мелким делениям линейки, которая заканчивается ровно над этим блоком. */
body.iq-variant-techspec .catalog-item__scale::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
height: 5px;
background:
linear-gradient(var(--iq-fg-muted), var(--iq-fg-muted)) 0 0 / 1px 5px no-repeat,
linear-gradient(var(--iq-fg-muted), var(--iq-fg-muted)) 53.333% 0 / 1px 5px no-repeat,
linear-gradient(var(--iq-fg-muted), var(--iq-fg-muted)) 100% 0 / 1px 5px no-repeat;
}
body.iq-variant-techspec .catalog-item__scale i {
position: absolute;
top: 9px;
font-style: normal;
}
body.iq-variant-techspec .catalog-item__scale i:nth-child(1) { left: 0; }
body.iq-variant-techspec .catalog-item__scale i:nth-child(2) {
left: 53.333%;
transform: translateX(-50%);
}
body.iq-variant-techspec .catalog-item__scale i:nth-child(3) { right: 0; }
/* --- дуга длительности ---------------------------------------------------
Кольцо, а не полоска: рядом уже есть линейка темпа, и вторая горизонталь
читалась бы как её продолжение. --iq-dial задаётся в разметке долей от 90
минут; отсчёт от −90deg, чтобы дуга начиналась сверху. */
body.iq-variant-techspec .catalog-item__dial {
display: flex;
align-items: center;
gap: 8px;
margin-top: 11px;
color: var(--iq-fg-muted);
font: 600 10px/1 var(--iq-font);
font-variant-numeric: tabular-nums;
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
}
body.iq-variant-techspec .catalog-item__dial b {
display: block;
flex: 0 0 20px;
width: 20px;
height: 20px;
border-radius: 50%;
background: conic-gradient(
from -90deg,
var(--iq-action-primary) calc(var(--iq-dial, 0) * 360deg),
var(--iq-hair-strong) 0
);
/* Кольцо, а не диск: серединка вырезается маской, чтобы дуга читалась как
прибор, а не как заливка. */
-webkit-mask: radial-gradient(closest-side, transparent 68%, currentColor 69%);
mask: radial-gradient(closest-side, transparent 68%, currentColor 69%);
}
body.iq-variant-techspec .catalog-item__dial em { font-style: normal; }
/* На узких экранах карточка выравнивает содержимое по центру, и блок получает
ширину по своему тексту («ИЮЛЬ 2026»). Линейка темпа — фон этого же блока,
поэтому она сжималась примерно до 220 px, а подписи 120 и 148 сходились
вплотную. Приборам нужна вся ширина карточки. */
@media (max-width: 760px) {
body.iq-variant-techspec .catalog-item__description,
body.iq-variant-techspec .catalog-item__gauges {
align-self: stretch;
}
/* Подписи блока стояли по центру только потому, что он был шириной по
тексту. Растянув его, центрирование нужно вернуть явно — иначе «BPM ·
ТЕМП» уезжает влево, а всё вокруг остаётся по центру. */
body.iq-variant-techspec .catalog-item__description {
text-align: center;
}
body.iq-variant-techspec .catalog-item__dial {
justify-content: center;
}
}
/* --- 27-player.css --- */
/* Плеер превью каталога — версия techspec.
=========================================================================
Кнопка ▶ на карточке была живой только на странице IQ Music: сам плеер
выводился под условием `$is_iq_music`, а обработчик в
assets/js/iq-catalog-experience.js выходит первой же строкой, если плеера на
странице нет. В общем каталоге десять карточек показывали кнопку, которая
ничего не делала. Условие вывода теперь — наличие превью
(woocommerce/archive-product.php), и плеер приезжает на любой архив.
Оформление плеера осталось от базовой темы: радиус 18px, лаймовая круглая
кнопка, размытие фона. В чертёжной системе это чужая деталь — здесь она
сводится к той же плите, что и остальные панели.
`display` не задаётся ни в одном правиле: базовая тема прячет плеер через
`[hidden]`, и общее правило на класс перебило бы её. */
body.iq-variant-techspec .iq-sticky-player {
right: var(--iq-gap-4);
bottom: var(--iq-gap-4);
gap: var(--iq-gap-3);
padding: var(--iq-panel-pad-tight);
border: var(--iq-panel-border);
border-radius: var(--iq-panel-radius);
background: var(--iq-panel-bg);
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* Метка «LIVE PREVIEW» приходит пилюлей из iq-visual.css. */
body.iq-variant-techspec .iq-motion-player {
border-color: var(--iq-hair-strong);
box-shadow: none;
}
body.iq-variant-techspec .iq-motion-player::before {
border: 1px solid var(--iq-hair-strong);
border-radius: 0;
letter-spacing: var(--iq-label-tracking);
}
/* Столбики уровня — засечки прибора, а не капсулы. */
body.iq-variant-techspec .iq-sticky-player__pulse {
border: var(--iq-panel-border);
border-radius: 0;
background: transparent;
}
body.iq-variant-techspec .iq-sticky-player__pulse i {
border-radius: 0;
background: var(--iq-action-primary);
}
body.iq-variant-techspec .iq-sticky-player__eyebrow {
color: var(--iq-fg-muted);
font: var(--iq-label-weight) 9px/1 var(--iq-label-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
}
body.iq-variant-techspec .iq-sticky-player__track strong {
color: var(--iq-fg-primary);
font: 600 12px/1.25 var(--iq-font);
}
/* Все кнопки — одна геометрия и цель в 44px: круглая лаймовая пуговица рядом
с квадратными контролами каталога читалась как элемент другого сайта. */
body.iq-variant-techspec .iq-sticky-player__toggle,
body.iq-variant-techspec .iq-sticky-player__nav,
body.iq-variant-techspec .iq-sticky-player__close {
width: var(--iq-control-h);
height: var(--iq-control-h);
border-radius: var(--iq-btn-radius);
}
/* Prev/next — тот же контур, что у close, но без крестика: второстепенное
действие, не должно спорить взглядом с play/pause. Дизейблится, когда в
плейлисте меньше двух треков (один трек на направление на главной). */
body.iq-variant-techspec .iq-sticky-player__nav {
border: var(--iq-btn-border-width) solid var(--iq-hair-strong);
color: var(--iq-fg-muted);
font-size: 16px;
}
body.iq-variant-techspec .iq-sticky-player__nav:hover:not(:disabled) {
border-color: var(--iq-action-primary);
color: var(--iq-fg-primary);
}
body.iq-variant-techspec .iq-sticky-player__nav:disabled {
opacity: .32;
cursor: default;
}
body.iq-variant-techspec .iq-sticky-player__toggle {
background: var(--iq-action-primary);
color: var(--iq-button-primary-fg);
font-size: 13px;
}
body.iq-variant-techspec .iq-sticky-player__close {
border: var(--iq-btn-border-width) solid var(--iq-hair-strong);
color: var(--iq-fg-muted);
font-size: 18px;
}
body.iq-variant-techspec .iq-sticky-player__close:hover {
border-color: var(--iq-action-primary);
color: var(--iq-fg-primary);
}
/* Кнопка промокода живёт в том же нижнем правом углу (right/bottom 18px) и
пряталась под плеером. Пока плеер открыт, она поднимается над ним.
Обе версии страницы, а не только techspec: перекрытие есть и в editorial. */
body:has(.iq-sticky-player:not([hidden])) .open-promo-popup-btn {
bottom: 112px;
}
/* --- 28-hero-object.css --- */
/* Место для объёмного объекта в геро главной.
=========================================================================
Сцена встаёт поверх нарисованной орбиты — в тот же контейнер
`.main-banner__tempo-orbit`, у которого уже есть `position: relative` и
`aspect-ratio`, то есть готовая рамка нужной формы.
Класс `is-iq-hero-object` вешает на контейнер сама сцена, и только после того, как
она поднялась. Поэтому SVG-орбита и хромовая волна гаснут не «на всякий
случай», а ровно тогда, когда есть чем их заменить: без WebGL, на узком
экране, при экономии трафика или при `prefers-reduced-motion` бандл сцены
даже не загружается, и в шапке остаётся ровно то, что было. */
/* Квадрат по ширине контейнера, по центру, а не `inset: 0`. Контейнер орбиты
выше самого баннера (797px против 670px) и вылезает за него сверху и снизу:
растянутая по нему сцена обрезалась бы краем секции. Квадрат 622×622 в
центре укладывается в видимую часть целиком. */
body.iq-variant-techspec .main-banner__tempo-orbit .iq-hero-object-canvas {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
transform: translate(-50%, -50%);
/* Курсор ведёт ленту, но не должен перехватывать клики по шапке. */
pointer-events: none;
}
/* Контейнер слушает курсор сам — событие приходит на него, а не на canvas. */
body.iq-variant-techspec .main-banner__tempo-orbit.is-iq-hero-object {
pointer-events: auto;
}
/* Рисованная орбита уходит мягко: сцена появляется не мгновенно, и резкая
подмена читалась бы как ошибка загрузки. */
body.iq-variant-techspec .main-banner__tempo-orbit svg,
body.iq-variant-techspec .main-banner__chrome-wave {
transition: opacity var(--iq-dur-in) var(--iq-ease);
}
body.iq-variant-techspec .main-banner__tempo-orbit.is-iq-hero-object svg,
body.iq-variant-techspec .main-banner__tempo-orbit.is-iq-hero-object .main-banner__chrome-wave {
opacity: 0;
}
/* Объект — украшение. Если человек попросил меньше движения, а сцена уже стоит
на странице, она снимается скриптом; это правило страхует тот кадр, пока
скрипт до неё не дошёл. */
@media (prefers-reduced-motion: reduce) {
body.iq-variant-techspec .main-banner__tempo-orbit .iq-hero-object-canvas { display: none; }
body.iq-variant-techspec .main-banner__tempo-orbit.is-iq-hero-object svg,
body.iq-variant-techspec .main-banner__tempo-orbit.is-iq-hero-object .main-banner__chrome-wave {
opacity: 1;
}
}
/* --- 29-seals.css --- */
/* Печати статуса и обмерная рамка карточки.
Печати нарисованы 500×500 и держатся на тонком штрихе и мелких делениях.
В метке каталога такой значок живёт 14–16 пикселей, где деления исчезают
физически, — поэтому печать здесь работает ИКОНКОЙ рядом со словом, а не
вместо него. Слово остаётся: его читает скринридер и индексирует поиск,
и именно на нём держится смысл метки. Крупно, во весь рисунок, печати
выводятся ниже — в личном кабинете, где под них есть 72 пикселя.
Рамка сканирования вешается на `::before` обложки: `::after` там уже занят
подсветкой в iq-visual.css. */
body.iq-variant-techspec .catalog-item__label {
display: inline-flex;
align-items: center;
gap: 4px;
}
body.iq-variant-techspec .catalog-item__label::before {
content: "";
width: 18px;
height: 18px;
flex: none;
background: center / contain no-repeat;
opacity: .9;
}
body.iq-variant-techspec .catalog-item__label--new::before {
background-image: url(https://iqfitness.ru/wp-content/themes/flagstudio/assets/css/parts/../../img/seals/seal-new.svg);
}
body.iq-variant-techspec .catalog-item__label--verified::before {
background-image: url(https://iqfitness.ru/wp-content/themes/flagstudio/assets/css/parts/../../img/seals/seal-verified.svg);
}
body.iq-variant-techspec .catalog-item__label--sale::before {
background-image: url(https://iqfitness.ru/wp-content/themes/flagstudio/assets/css/parts/../../img/seals/seal-limited.svg);
}
/* Обмерная рамка поверх обложки товара. Появляется по наведению и фокусу —
постоянная рамка спорила бы с самой фотографией. Кликам не мешает. */
body.iq-variant-techspec .catalog-item__image {
position: relative;
}
body.iq-variant-techspec .catalog-item__image::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: center / 100% 100% no-repeat url(https://iqfitness.ru/wp-content/themes/flagstudio/assets/css/parts/../../img/covers/product-scan-overlay.svg);
opacity: 0;
transition: opacity .18s ease-out;
}
@media (hover: hover) {
body.iq-variant-techspec .catalog-item:hover .catalog-item__image::before {
opacity: .7;
}
}
body.iq-variant-techspec .catalog-item:focus-within .catalog-item__image::before {
opacity: .7;
}
@media (prefers-reduced-motion: reduce) {
body.iq-variant-techspec .catalog-item__image::before {
transition: none;
}
}
/* Крупные печати — там, где на них есть место: подтверждение оплаты,
доступ к файлу, активация подписки. */
body.iq-variant-techspec .iq-seal {
display: block;
width: 72px;
height: 72px;
background: center / contain no-repeat;
}
body.iq-variant-techspec .iq-seal--payment { background-image: url(https://iqfitness.ru/wp-content/themes/flagstudio/assets/css/parts/../../img/seals/seal-payment.svg); }
body.iq-variant-techspec .iq-seal--file { background-image: url(https://iqfitness.ru/wp-content/themes/flagstudio/assets/css/parts/../../img/seals/seal-file.svg); }
body.iq-variant-techspec .iq-seal--access { background-image: url(https://iqfitness.ru/wp-content/themes/flagstudio/assets/css/parts/../../img/seals/seal-access.svg); }
/* Пустые состояния: файлы комплекта 600×600, у прежних было 400×400,
поэтому размер задаём стилем, а не полагаемся на атрибуты. */
body.iq-variant-techspec .iq-empty-icon,
body.iq-variant-techspec .personal__orders-empty-icon {
max-width: 220px;
height: auto;
}
/* --- 30-shell-fixes.css --- */
/* ==========================================================================
TECH SPEC — shell fixes. Cleanup pass for old-theme remnants left visible
in the graphite/chertyozh variant. Every rule is scoped to
body.iq-variant-techspec so the editorial default is untouched.
Loaded after iq-visual.css (assets/css/parts/*.css is enqueued last), so
equal-specificity rules here win without needing !important, except where
noted below.
========================================================================== */
/* --- 1. Sidebar "IQ Music" row: old palette pink (#e5c4ff) + colourful note
icon leak into the catalog filter sidebar and the mobile catalog menu.
iq-visual.css only recolours this item inside the header dropdown
(.main-nav__column-submenu), not here — so the base plugin/theme pink
background and sprite icon still show through in techspec. Neutralise the
row background and desaturate the icon instead of fighting the sprite. --- */
body.iq-variant-techspec .main-catalog__sidebar-wrapper .sidebar__menu > li.menu-music,
body.iq-variant-techspec .mobile-menu__catalog li.menu-music {
background: transparent;
}
body.iq-variant-techspec .main-catalog__sidebar-wrapper .sidebar__menu > li.menu-music::before,
body.iq-variant-techspec .mobile-menu__catalog li.menu-music::before,
body.iq-variant-techspec .main-catalog__sidebar-wrapper .sidebar__menu > li.menu-music > a::before,
body.iq-variant-techspec .mobile-menu__catalog li.menu-music > a::before {
filter: grayscale(1) brightness(1.6) opacity(.8);
}
/* --- 2. Purple radial glow behind the catalog content. iq-visual.css paints
this on every theme's (body.post-type-archive-product main /
body.tax-product_cat main, unscoped to a variant) — on the graphite sheet
it reads as a stray colour cast that has no place in the drafting look.
Flatten back to the plain canvas token for techspec only. --- */
body.iq-variant-techspec.post-type-archive-product main,
body.iq-variant-techspec.tax-product_cat main {
background: var(--iq-bg-canvas);
}
/* --- 3. Mobile catalog filters (.main-catalog__sidebar-wrapper /
.js-catalog-filters, toggled by .js-catalog-filters-toggle): checked at
760px and 390px against the generic (non-editorial, non-techspec) rules in
iq-visual.css lines ~713-729 and style.min.css — those already key every
dimension off var(--iq-radius-media)/var(--iq-card-border), which techspec
redefines in its own token block, so the collapse/expand layout inherits
correctly with no editorial-only breakpoint required. No fix needed here;
left as a documented false alarm rather than a silent no-op. --- */
/* --- 4. Promo popup modal (.popup__window--promo and its form): iq-visual.css
only themes this for body.iq-variant-editorial — techspec has zero
coverage, so opening the popup on the techspec variant falls back to the
plugin/base rounded, off-palette card. Bring it into the drafting system
with square corners and the techspec tokens. --- */
body.iq-variant-techspec .popup {
background: rgba(3, 4, 5, .84);
backdrop-filter: blur(10px);
}
body.iq-variant-techspec .popup__window--promo {
width: min(760px, calc(100% - 32px));
height: auto;
max-height: calc(100% - 40px);
padding: 54px 64px 64px;
overflow-y: auto;
border: 1px solid var(--iq-hair-strong);
border-radius: 0;
/* style.min.css sets the indigo gradient with !important, so nothing short
of !important removes it. Same reason as the search field below. */
background: var(--iq-bg-surface) !important;
box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
}
body.iq-variant-techspec .popup__window--promo::before {
content: 'IQ FITNESS / SPEC SHEET';
display: block;
margin-bottom: 34px;
color: var(--iq-action-primary);
font: 700 10px/1 var(--iq-font);
letter-spacing: var(--iq-label-tracking);
}
body.iq-variant-techspec .popup__close { color: var(--iq-fg-primary); }
body.iq-variant-techspec .popup__close svg { fill: currentColor; }
body.iq-variant-techspec .popup__title,
body.iq-variant-techspec .popup__subtitle,
body.iq-variant-techspec .popup-form__input-title { color: var(--iq-fg-primary); }
body.iq-variant-techspec .popup__title {
font: 700 clamp(30px, 4vw, 52px)/.98 var(--iq-display);
letter-spacing: var(--iq-heading-tracking);
text-transform: uppercase;
}
body.iq-variant-techspec .popup__subtitle {
max-width: 560px;
margin: 18px auto 0;
font: 400 15px/1.35 var(--iq-font);
}
body.iq-variant-techspec .popup-form__input-title {
margin-top: 54px;
font: 600 11px/1.2 var(--iq-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
text-align: left;
}
body.iq-variant-techspec .popup-form__input {
height: 52px;
padding: 0 16px;
border: 1px solid var(--iq-hair-strong);
border-radius: 0;
background: var(--iq-input-bg);
color: var(--iq-fg-primary);
font: 400 16px/1 var(--iq-font);
}
body.iq-variant-techspec .popup-form__input:focus {
border-color: var(--iq-action-primary);
outline: 1px solid var(--iq-action-primary);
outline-offset: 2px;
}
body.iq-variant-techspec .popup-form__submit {
width: 100%;
height: 54px;
margin-top: 28px;
border: 1px solid var(--iq-action-primary);
border-radius: 0;
background: var(--iq-action-primary);
color: var(--iq-bg-canvas);
font: 700 12px/1 var(--iq-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
}
body.iq-variant-techspec .popup-form__submit:hover,
body.iq-variant-techspec .popup-form__submit:focus-visible {
background: var(--iq-bg-canvas);
color: var(--iq-action-primary);
outline: 2px solid var(--iq-action-primary);
outline-offset: 2px;
}
body.iq-variant-techspec .popup .checkbox,
body.iq-variant-techspec .popup .checkbox__text { color: var(--iq-fg-muted); }
@media (max-width: 601px) {
body.iq-variant-techspec .popup__window--promo { padding: 42px 20px 28px; }
body.iq-variant-techspec .popup__title { font-size: 28px; }
body.iq-variant-techspec .popup__subtitle { font-size: 14px; }
body.iq-variant-techspec .popup-form__input-title { margin-top: 34px; }
}
/* --- 5/6. Header search field (Ajax Search Lite, .help-block__search-wrap):
iq-visual.css only gives this an underline and readable text colour for
body.iq-variant-editorial, inside the same min-width:992px block that
promotes .help-block into a persistent desktop bar. Without a techspec
equivalent the input has no visible affordance (fully transparent probox,
default black-on-transparent text) and no focus state. The plugin's own
inline styles (.probox svg fill, .asl_m/.probox background) ship with
!important, so matching overrides need it too — documented, not decorative. */
@media (min-width: 992px) {
body.iq-variant-techspec .help-block__search-wrap .probox {
height: 30px !important;
border-bottom: 1px solid var(--iq-hair-strong) !important;
}
body.iq-variant-techspec .help-block__search-wrap .proinput input {
height: 30px !important;
color: var(--iq-fg-primary) !important;
font-size: 12px !important;
}
body.iq-variant-techspec .help-block__search-wrap .proinput input::placeholder {
color: var(--iq-fg-muted) !important;
}
}
body.iq-variant-techspec .help-block__search-wrap:focus-within .probox {
border-bottom-color: var(--iq-action-primary) !important;
box-shadow: 0 1px 0 var(--iq-action-primary);
}
body.iq-variant-techspec .help-block__search-wrap .promagnifier .innericon svg,
body.iq-variant-techspec .help-block__search-wrap .prosettings .innericon svg {
fill: var(--iq-fg-muted);
}
body.iq-variant-techspec .help-block__search-wrap:focus-within .promagnifier .innericon svg {
fill: var(--iq-action-primary);
}
/* --- 6. Results dropdown (.asl_r) intentionally left untouched: it keeps the
plugin's default white card with dark blue links, same as editorial. That
panel floats over the page rather than sitting on the graphite canvas, so
parity with editorial (which also does not restyle it) keeps its own
internal contrast correct instead of putting light techspec text on a
white background. Catalog-item, sidebar and pagination hover/focus states
already have their own techspec-scoped rules in iq-visual.css; no gap
found there beyond what is fixed above. */
/* --- 7. Нижняя строка подвала переносится.
Ряд стоял без переноса, а techspec набирает правовые ссылки капителью с
разрядкой — они шире, чем в editorial, и вылезали за правый край на 241px:
главная, каталог, новости, 404 (поймано `npm run fingerprint`).
Лечится переносом, а не подрезкой на body: `overflow-x: clip` спрятал бы
ссылки вместо того, чтобы их показать, и заодно ослепил бы саму пробу. */
body.iq-variant-techspec .footer__bottom {
flex-wrap: wrap;
gap: var(--iq-gap-3) var(--iq-gap-5);
}
/* --- 8. Cookie-баннер.
editorial получил компактную карточку в углу, techspec — нет, поэтому на
каждой странице внизу лежала чёрная полоса во всю ширину из базовой темы,
перекрывавшая контент. Та же карточка, набранная чертёжными токенами. */
body.iq-variant-techspec .personal-warning {
left: 18px;
right: auto;
bottom: 18px;
width: min(520px, calc(100vw - 36px));
padding: var(--iq-panel-pad-tight);
border: var(--iq-panel-border);
border-radius: var(--iq-panel-radius);
background: color-mix(in srgb, var(--iq-bg-surface) 94%, transparent);
box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
body.iq-variant-techspec .personal-warning__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--iq-gap-4);
width: 100%;
padding: 0;
}
body.iq-variant-techspec .personal-warning__text {
min-width: 0;
padding: 0;
color: var(--iq-fg-muted);
font: 400 12px/1.45 var(--iq-font);
}
body.iq-variant-techspec .personal-warning__link {
border-bottom-color: var(--iq-hair-strong);
color: var(--iq-fg-primary);
}
body.iq-variant-techspec .personal-warning__link:hover,
body.iq-variant-techspec .personal-warning__link:focus-visible {
border-bottom-color: var(--iq-action-primary);
color: var(--iq-action-primary);
}
/* Согласие — не основное действие страницы, поэтому контур, а не заливка. */
body.iq-variant-techspec .personal-warning__btn {
min-width: 72px;
min-height: var(--iq-control-h);
margin: 0;
padding: 0 18px;
border: 1px solid var(--iq-hair-strong);
border-radius: var(--iq-field-radius);
background: transparent;
color: var(--iq-fg-primary);
font: var(--iq-label-weight) var(--iq-label-size)/1 var(--iq-label-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
}
body.iq-variant-techspec .personal-warning__btn:hover,
body.iq-variant-techspec .personal-warning__btn:focus-visible {
border-color: var(--iq-action-primary);
color: var(--iq-action-primary);
}
@media (max-width: 601px) {
body.iq-variant-techspec .personal-warning {
left: 12px;
right: 12px;
bottom: 12px;
width: auto;
}
}
/* --- 9. Земля страницы.
`body` в базовой теме белый; тёмным сайт делают фоны секций. Там, где секции
не хватает — зазор между концом контента и подвалом, — просвечивает белая
полоса во всю ширину. То же самое воспроизводится в editorial, то есть это
боевой дефект, а не последствие варианта; здесь он закрыт только для
techspec, чтобы не менять боевой вид без отдельного решения. */
body.iq-variant-techspec {
background-color: var(--iq-bg-canvas);
}
/* --- 10. Текущий раздел в шапке.
Правила под `.current-menu-item` в теме были, но красить им было нечего:
WordPress ставит этот класс только пунктам, привязанным к записи, а верхнее
меню собрано из произвольных ссылок. Пометка теперь идёт атрибутом
`aria-current="page"` (см. iq_mark_current_menu_link в functions.php), и она
работает и для глаза, и для скринридера.
Отличие — цветом и подчерком сразу: одного цвета мало, если человек не
различает акцент. */
body.iq-variant-techspec .main-nav > li > a[aria-current='page'],
body.iq-variant-techspec .main-nav > li > a[aria-current='page']:hover {
color: var(--iq-action-primary);
}
body.iq-variant-techspec .main-nav > li > a[aria-current='page']::after {
transform: scaleX(1);
transform-origin: left;
background: var(--iq-action-primary);
}
/* --- 31-nav-consistency.css --- */
/* ==========================================================================
NAV CONSISTENCY — каталожное меню в сайдбаре и в подвале.
Три дефекта, найденные на живом сайте 03.08.2026:
1. Значок есть только у «IQ Music». Разметка резервирует место под иконку
у ВСЕХ пунктов (a::before со спрайтом, padding-left: 30px), но ширина
псевдоэлемента задана лишь для .menu-music — у остальных 0px. Отсюда
«у IQ Music значок есть, у IQ Library нет» при одинаковом отступе.
Спрайт старой темы цветной и в чертёжный вид не ложится, поэтому
иконки заданы масками: цвет берётся из currentColor и меняется вместе
с текстом при наведении, перекрыть подсветкой её нельзя.
2. Линия под пунктом сайдбара — это border-bottom на самой ссылке, а
ссылка inline-block, то есть шириной по тексту. Линии получались
разной длины (85–132 px) и обрывались посреди колонки.
3. Подвальный каталог свёрстан жёсткой сеткой из двух колонок по 110 px.
Разделы с 9 и 11 подпунктами и разделы без подпунктов сыпались в неё
подряд, заголовок раздела ничем не отличался от своих же пунктов —
получалась сплошная стена слов с провалом пустоты справа.
Пункты меню адресуются по ID (меню «Каталог», theme_location=catalog):
64238 HOT IRON · 57883 Новинки · 67 IQ Music · 54308 Оборудование ·
49945 Одежда · 49954 IQ Library. Меню редактируется в админке — при
пересоздании пункта ID сменится и иконка пропадёт, текст при этом
остаётся читаемым.
========================================================================== */
/* --- 1. Линия под пунктом — во всю ширину колонки, а не по ширине слова --- */
.main-catalog__sidebar-wrapper .sidebar__menu > li > a {
display: block;
}
/* --- 2. Иконки разделов -------------------------------------------------- */
.main-catalog__sidebar-wrapper .sidebar__menu > li > a::before,
.footer-nav__column-submenu > li > a::before {
width: 14px;
height: 14px;
background-color: currentColor;
background-image: none;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
opacity: .65;
transition: opacity .2s ease;
}
.main-catalog__sidebar-wrapper .sidebar__menu > li > a:hover::before,
.footer-nav__column-submenu > li > a:hover::before {
opacity: 1;
}
/* HOT IRON — штанга */
.sidebar__menu > li.menu-item-64238 > a::before,
.footer-nav__column-submenu > li.menu-item-64238 > a::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 9v6M7 6v12M17 6v12M21 9v6M7 12h10'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 9v6M7 6v12M17 6v12M21 9v6M7 12h10'/%3E%3C/svg%3E");
}
/* Новинки — вспышка */
.sidebar__menu > li.menu-item-57883 > a::before,
.footer-nav__column-submenu > li.menu-item-57883 > a::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3v18M3 12h18M5.6 5.6l12.8 12.8M18.4 5.6 5.6 18.4'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3v18M3 12h18M5.6 5.6l12.8 12.8M18.4 5.6 5.6 18.4'/%3E%3C/svg%3E");
}
/* IQ Music — нота */
.sidebar__menu > li.menu-item-67 > a::before,
.footer-nav__column-submenu > li.menu-item-67 > a::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 18V4l11-2v14'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='17' cy='16' r='3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 18V4l11-2v14'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='17' cy='16' r='3'/%3E%3C/svg%3E");
}
/* Оборудование — гиря */
.sidebar__menu > li.menu-item-54308 > a::before,
.footer-nav__column-submenu > li.menu-item-54308 > a::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3Cpath d='M7 8h10l2 13H5z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3Cpath d='M7 8h10l2 13H5z'/%3E%3C/svg%3E");
}
/* Одежда — футболка */
.sidebar__menu > li.menu-item-49945 > a::before,
.footer-nav__column-submenu > li.menu-item-49945 > a::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='m8 3-5 3 2.5 4L8 8.5V21h8V8.5L18.5 10 21 6l-5-3-2 2h-4z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='m8 3-5 3 2.5 4L8 8.5V21h8V8.5L18.5 10 21 6l-5-3-2 2h-4z'/%3E%3C/svg%3E");
}
/* IQ Library — разворот книги */
.sidebar__menu > li.menu-item-49954 > a::before,
.footer-nav__column-submenu > li.menu-item-49954 > a::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 6.5C10.5 5 8.2 4.2 3 4.5v14c5.2-.3 7.5.5 9 2 1.5-1.5 3.8-2.3 9-2v-14c-5.2-.3-7.5.5-9 2z'/%3E%3Cpath d='M12 6.5V20.5'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 6.5C10.5 5 8.2 4.2 3 4.5v14c5.2-.3 7.5.5 9 2 1.5-1.5 3.8-2.3 9-2v-14c-5.2-.3-7.5.5-9 2z'/%3E%3Cpath d='M12 6.5V20.5'/%3E%3C/svg%3E");
}
/* Старая розовая заливка строки IQ Music из style.min.css: под иконку-маску
она больше не нужна и в тёмной теме читается как случайное пятно. */
.sidebar__menu > li.menu-music,
.footer-nav__column-submenu > li.menu-music {
background: transparent;
}
/* --- 3. Подвальный каталог: разделы как отдельные группы -----------------
Колонка каталога в сетке подвала была уже своих же названий: две колонки
по 110 px при словах «Миофасциальные роллы и мячики» и «Функциональный
тренинг». Текст вылезал за колонку и налезал на вертикальный разделитель —
отсюда «линия делит слова пополам». Отдаём каталогу долю ширины по факту
содержимого, за счёт промо-блока IQ Music, которому столько не нужно. */
/* Только для широкого экрана. Файл грузится ПОСЛЕ iq-visual.css, поэтому
безусловное правило перебило бы её мобильные медиазапросы (там подвал
схлопывается в одну колонку на 760 px) — и на телефоне четыре колонки
уезжали бы за экран горизонтальным скроллом. Проверено на 390 px. */
@media (min-width: 1101px) {
body.iq-variant-editorial .footer__content,
body.iq-variant-techspec .footer__content {
grid-template-columns:
minmax(180px, .8fr)
minmax(190px, .95fr)
minmax(330px, 1.7fr)
minmax(150px, .7fr);
}
}
/* Потоковые колонки, а не сетка: разделы разной высоты (11 подпунктов против
нуля) в сетке выравниваются по строкам и оставляют провал пустоты в полколонки.
Многоколоночный поток укладывает их подряд и сам выравнивает высоту. */
body.iq-variant-editorial .footer-nav__column-submenu,
body.iq-variant-techspec .footer-nav__column-submenu {
display: block;
columns: 2;
column-gap: 24px;
}
/* На телефоне две колонки по ~160 px рвут длинные названия разделов. */
@media (max-width: 560px) {
body.iq-variant-editorial .footer-nav__column-submenu,
body.iq-variant-techspec .footer-nav__column-submenu {
columns: 1;
}
}
.footer-nav__column-submenu > li {
break-inside: avoid;
display: block;
margin-bottom: 26px;
}
.footer-nav__column-submenu > li:last-child {
margin-bottom: 0;
}
/* Заголовок раздела: светлее и с воздухом под ним, чтобы отделиться от
собственных подпунктов. Иконке нужно место — отступ такой же, как в
сайдбаре. */
.footer-nav__column-submenu > li > a {
position: relative;
display: block;
padding-left: 22px;
color: #e8ecf0;
letter-spacing: .08em;
}
.footer-nav__column-submenu > li > a::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.footer-nav__column-submenu > li > ul {
margin-top: 10px;
padding-left: 22px;
display: grid;
gap: 7px;
}
.footer-nav__column-submenu > li > ul a {
color: #7d8794;
font-weight: 400;
letter-spacing: .04em;
transition: color .2s ease;
}
.footer-nav__column-submenu > li > ul a:hover {
color: #e8ecf0;
}
/* Разделы без подпунктов не должны занимать целую ячейку сетки наравне с
разделом из одиннадцати ссылок — сажаем их в общий ряд. */
@media (min-width: 1024px) {
.footer-nav__column-submenu {
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
}
/* --- 32-news-cards.css --- */
/* ==========================================================================
NEWS CARDS — обложки в ленте новостей.
Карточка в ленте выстроена колонкой (обложка сверху, текст под ней), а
ширина обложки осталась от старой горизонтальной карточки: width: 50%,
height: 300px (style.min.css). В колонке это давало картинку в половину
ширины карточки с жёсткой обрезкой по краям — «внутри картинки обрезаны».
Отдаём обложке всю ширину карточки и фиксируем пропорцию вместо высоты,
чтобы кадрирование было предсказуемым на любой ширине колонки.
========================================================================== */
body.post-type-archive-news .news-preview__image,
body.single-news .news-preview__image {
width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 16 / 10;
border-radius: 0;
/* Плашка под обложку: у части новостей миниатюры нет, и пустой блок
читался как дыра в вёрстке, а не как карточка без картинки. */
background-color: var(--iq-bg-surface-raised);
}
@media (max-width: 760px) {
body.post-type-archive-news .news-preview__image,
body.single-news .news-preview__image {
aspect-ratio: 3 / 2;
}
}
/* --- 33-product-description.css --- */
/* ==========================================================================
PRODUCT DESCRIPTION — воздух между абзацами.
Описание товара выводится через wpautop, но у
внутри карточки нулевые
отступы, и три абзаца читались как один сплошной текст в семь строк.
========================================================================== */
.product__description-content p {
margin: 0 0 1em;
max-width: 68ch; /* длинная строка на широком экране теряет место возврата глаза */
}
.product__description-content p:last-child {
margin-bottom: 0;
}
.product__description-content ul,
.product__description-content ol {
margin: 0 0 1em;
padding-left: 1.2em;
}
.product__description-content li {
margin-bottom: .35em;
}
/* --- 34-footer-band.css --- */
/* ==========================================================================
FOOTER BAND — блок «IQ Music» полосой во всю ширину подвала.
Баннер (assets/img/brand/iq-music-band.png, 1600×500) нарисован так, что
эмблема стоит справа, а левая половина оставлена пустой под живой текст.
В колонке шириной 246 px он бы не работал вовсе, поэтому блок вынесен в
отдельный первый ряд сетки подвала, а остальные три колонки встают под ним.
Эмблема — единственное цветное пятно в подвале, поэтому всё остальное
оформление блока намеренно сдержанное: без рамок и подложек.
========================================================================== */
@media (min-width: 1101px) {
body.iq-variant-editorial .footer__content,
body.iq-variant-techspec .footer__content {
/* Три колонки для второго ряда: бренд, каталог, личные разделы. */
grid-template-columns:
minmax(200px, .9fr)
minmax(340px, 1.85fr)
minmax(160px, .75fr);
}
body.iq-variant-editorial .footer__library,
body.iq-variant-techspec .footer__library {
grid-column: 1 / -1;
grid-row: 1;
position: relative;
min-height: 260px;
padding: 38px 42px;
display: flex;
flex-direction: column;
justify-content: center;
/* Две строки подряд намеренно: браузер, который не понимает image-set,
отбрасывает второе объявление и остаётся на PNG. 474 КБ → 25 КБ (AVIF).
Баннер грузится на каждой странице, поэтому экономия здесь идёт не
одной главной, а всему сайту. 04.08.2026 */
background-image: url("https://iqfitness.ru/wp-content/themes/flagstudio/assets/css/parts/../../img/brand/iq-music-band.png");
background-image: image-set(
url("https://iqfitness.ru/wp-content/themes/flagstudio/assets/css/parts/../../img/brand/iq-music-band.avif") type("image/avif"),
url("https://iqfitness.ru/wp-content/themes/flagstudio/assets/css/parts/../../img/brand/iq-music-band.webp") type("image/webp"),
url("https://iqfitness.ru/wp-content/themes/flagstudio/assets/css/parts/../../img/brand/iq-music-band.png") type("image/png")
);
background-repeat: no-repeat;
background-position: right center;
background-size: auto 100%;
background-color: #000;
border: 1px solid var(--iq-hair-strong, rgba(232, 236, 240, .12));
}
/* Текст держим в левой половине — там, где картинка пустая. */
body.iq-variant-editorial .footer__library > *,
body.iq-variant-techspec .footer__library > * {
position: relative;
max-width: 46%;
}
}
/* На узком экране эмблема уходит фоном за текст: полоса 3.2:1 при ширине
360 px даёт высоту 112 px, в которую сам блок не помещается. */
@media (max-width: 1100px) {
body.iq-variant-editorial .footer__library,
body.iq-variant-techspec .footer__library {
position: relative;
padding: 26px 24px;
background-image: url("https://iqfitness.ru/wp-content/themes/flagstudio/assets/css/parts/../../img/brand/iq-music-band.png");
background-image: image-set(
url("https://iqfitness.ru/wp-content/themes/flagstudio/assets/css/parts/../../img/brand/iq-music-band.avif") type("image/avif"),
url("https://iqfitness.ru/wp-content/themes/flagstudio/assets/css/parts/../../img/brand/iq-music-band.webp") type("image/webp"),
url("https://iqfitness.ru/wp-content/themes/flagstudio/assets/css/parts/../../img/brand/iq-music-band.png") type("image/png")
);
background-repeat: no-repeat;
/* Мельче высоты блока: при 100% эмблема доезжает до середины и заголовок
ложится прямо на хромированные рёбра. При 220% она вовсе обрезалась до
неузнаваемого фрагмента и читалась как случайная текстура. */
background-position: right -8px center;
background-size: auto 72%;
background-color: #000;
border: 1px solid var(--iq-hair-strong, rgba(232, 236, 240, .12));
}
body.iq-variant-editorial .footer__library::after,
body.iq-variant-techspec .footer__library::after {
/* Затемнение, чтобы текст читался поверх эмблемы. */
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, #000 46%, rgba(0, 0, 0, .45) 82%, rgba(0, 0, 0, 0) 100%);
}
body.iq-variant-editorial .footer__library > *,
body.iq-variant-techspec .footer__library > * {
position: relative;
z-index: 1;
}
}
/* --- 40-motion.css --- */
/* Motion layer support styles — techspec variant only.
Everything here is scoped to body.iq-variant-techspec so the editorial
variant, which is the production look of the site, is untouched. The JS that
drives these lives in src/motion/ and is bundled into assets/dist/iq-motion.js.
Nothing in this file animates on its own: it only creates the surfaces and
the resting states that the motion layer manipulates. If the bundle fails to
load, every selector below degrades to the plain layout. */
/* ---------------------------------------------------------------- hero field */
/* .iq-motion-surface (iq-visual.css) gives the whole page main another
isolation:isolate with no z-index of its own — it wraps .main-banner, so
the section's own z-index:13 below is trapped a level too deep and the
fixed "Горячая линия" pill (z-index:12) still wins at the body level.
Lift this outer context too, same value, so both actually clear it. */
body.iq-variant-techspec .iq-motion-surface {
z-index: 13;
}
/* The banner becomes the positioning context for the WebGL canvas. The class
is added by JS only after a WebGL2 context was actually acquired, so on
machines without it nothing about the banner changes. */
body.iq-variant-techspec .main-banner.iq-hero-has-canvas {
position: relative;
isolation: isolate;
/* isolation:isolate traps every z-index inside this stacking context —
needs to exceed the fixed "Горячая линия" pill's z-index:12 (see
iq-visual.css), otherwise that pill sits on top of the whole hero
regardless of z-index set on children like .main-banner__preview. */
z-index: 13;
background-color: var(--iq-bg-canvas);
}
body.iq-variant-techspec .main-banner .iq-hero-canvas {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
border-radius: inherit;
pointer-events: none;
/* The field is a backdrop, not a subject: it must never fight the headline. */
opacity: .82;
}
/* Everything the banner already drew stays on top of the field. */
body.iq-variant-techspec .main-banner.iq-hero-has-canvas > *:not(.iq-hero-canvas) {
position: relative;
z-index: 1;
}
/* --------------------------------------------------------- tempo ruler draw */
/* The ruler is data (plotted by plotTempoPositions, which runs even under
reduced motion). This only masks it while the card is arriving; the default
of 1 means "fully drawn", so a card the motion layer never touched looks
exactly as it did before. */
body.iq-variant-techspec .catalog-item[data-iq-bpm-plotted] .catalog-item__description::after {
clip-path: inset(0 calc((1 - var(--iq-bpm-draw, 1)) * 100%) 0 0);
}
/* ------------------------------------------------------------ typed heading */
body.iq-variant-techspec .main-catalog__title.iq-typed .iq-type-char {
display: inline-block;
white-space: pre;
will-change: transform, opacity;
}
/* -------------------------------------------------------- magnetic buy button */
body.iq-variant-techspec .catalog-item__buy,
body.iq-variant-techspec .catalog-item__cart {
will-change: transform;
}
body.iq-variant-techspec .catalog-item__buy.is-magnetic,
body.iq-variant-techspec .catalog-item__cart.is-magnetic {
/* A hint that the pull is intentional rather than a rendering glitch. */
box-shadow: 0 0 0 1px color-mix(in srgb, var(--iq-action-primary) 55%, transparent);
}
/* ------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
body.iq-variant-techspec .main-catalog__title.iq-typed .iq-type-char {
will-change: auto;
}
body.iq-variant-techspec .catalog-item[data-iq-bpm-plotted] .catalog-item__description::after {
clip-path: none;
}
body.iq-variant-techspec .catalog-item__buy,
body.iq-variant-techspec .catalog-item__cart {
will-change: auto;
transform: none !important;
}
}
/* ==========================================================================
Pass 2 — shell and purchase micro-interactions.
Same contract as everything above: every selector starts with
body.iq-variant-techspec, every animated property is transform or opacity,
and every surface degrades to the plain layout if the bundle never runs.
The one rule that cannot live here is @view-transition: it has no selector,
so it cannot be scoped to a body class. It is injected from JS instead
(src/motion/view-transitions.js) and only into documents that already pass
the techspec / utility-page / reduced-motion guards, so an editorial
document never receives it.
========================================================================== */
/* ------------------------------------------------------- 1. sticky header */
/* The class is added by JS only after the header was measured and a spacer of
the SAME height was put in its place, so taking the header out of the flow
costs no layout shift. */
body.iq-variant-techspec.iq-header-sticky .header {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 80;
/* The paint moves to the band below, which is what scales. */
background: transparent;
border-bottom-color: transparent;
}
/* Админ-панель WordPress висит fixed с z-index 99999 и перекрывает
прилипшую шапку: обычный отступ html{margin-top:32px} двигает только
поток, а fixed-шапка садится на самый верх окна — вместе с полем поиска. */
body.admin-bar.iq-variant-techspec.iq-header-sticky .header {
top: 32px;
}
@media screen and (max-width: 782px) {
body.admin-bar.iq-variant-techspec.iq-header-sticky .header {
top: 46px;
}
}
body.iq-variant-techspec .iq-header-band {
display: none;
}
body.iq-variant-techspec.iq-header-sticky .iq-header-band {
display: block;
position: absolute;
inset: 0;
z-index: 0;
transform-origin: top center;
background: var(--iq-bg-canvas);
border-bottom: 1px solid var(--iq-hair-strong);
pointer-events: none;
will-change: transform;
}
/* Everything the header already drew stays above the band. */
body.iq-variant-techspec.iq-header-sticky .header > *:not(.iq-header-band) {
position: relative;
z-index: 1;
}
body.iq-variant-techspec.iq-header-sticky .header__inner {
will-change: transform;
}
body.iq-variant-techspec.iq-header-sticky .header__logo {
transform-origin: left center;
will-change: transform;
}
/* Reserves the height the header used to occupy. Set once in px by JS and
never animated — this is the element that keeps the page from jumping. */
body.iq-variant-techspec .iq-header-spacer {
display: none;
}
body.iq-variant-techspec.iq-header-sticky .iq-header-spacer {
display: block;
flex: none;
pointer-events: none;
}
/* -------------------------------------------------- 2. reading progress rail */
body.iq-variant-techspec .iq-read-progress {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 120;
height: 2px;
opacity: 0;
transition: opacity 180ms ease-out;
pointer-events: none;
}
body.iq-variant-techspec .iq-read-progress.is-active {
opacity: 1;
}
body.iq-variant-techspec .iq-read-progress__fill {
display: block;
width: 100%;
height: 100%;
transform: scaleX(0);
transform-origin: left center;
background: var(--iq-action-primary);
will-change: transform;
}
/* ----------------------------------------------------- 3. sticky buy dock */
body.iq-variant-techspec .iq-buy-dock {
display: none;
}
@media (max-width: 900px) {
body.iq-variant-techspec .iq-buy-dock {
display: flex;
align-items: center;
gap: 12px;
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 110;
padding: 10px 16px;
/* The bar sits on the home-indicator edge, so the safe area is padding,
not margin: the background must still reach the physical edge. */
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
background: var(--iq-bg-surface);
border-top: 1px solid var(--iq-hair-strong);
transform: translate3d(0, 100%, 0);
opacity: 0;
/* Leaving is faster than arriving: the dock gets out of the way the moment
the real button is back on screen. */
transition: transform 160ms cubic-bezier(.4, 0, 1, 1), opacity 120ms linear;
will-change: transform;
}
body.iq-variant-techspec .iq-buy-dock.is-visible {
transform: translate3d(0, 0, 0);
opacity: 1;
transition: transform 260ms cubic-bezier(.22, 1, .36, 1), opacity 200ms ease-out;
}
body.iq-variant-techspec .iq-buy-dock__price {
flex: 0 0 auto;
font-weight: 700;
white-space: nowrap;
}
body.iq-variant-techspec .iq-buy-dock__button {
flex: 1 1 auto;
min-height: 48px;
border: 0;
color: var(--iq-bg-canvas);
background: var(--iq-action-primary);
font-family: var(--iq-label-font);
font-size: inherit;
line-height: inherit;
font-weight: 700;
text-transform: uppercase;
}
/* Constant reserve, added once when the dock exists, so the dock can never
cover the last line of the page. It does not change while the dock
animates — nothing shifts. */
body.iq-variant-techspec.iq-has-buy-dock .product {
padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
}
/* ------------------------------------------------------ 4. cart badge pulse */
@keyframes iq-cart-pulse {
0% { transform: scale(1); }
45% { transform: scale(1.32); }
100% { transform: scale(1); }
}
body.iq-variant-techspec .header__count.iq-cart-pulse {
animation: iq-cart-pulse 260ms cubic-bezier(.22, 1, .36, 1);
transform-origin: center;
will-change: transform;
}
/* --------------------------------------------------------- 5. skeletons */
@keyframes iq-skeleton-sheen {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
body.iq-variant-techspec .iq-skeleton {
position: absolute;
inset: 0;
z-index: 2;
overflow: hidden;
background: var(--iq-bg-surface);
pointer-events: none;
}
body.iq-variant-techspec .iq-skeleton::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
transparent,
color-mix(in srgb, var(--iq-ink) 10%, transparent),
transparent
);
transform: translateX(-100%);
animation: iq-skeleton-sheen 1.1s ease-in-out infinite;
}
/* The catalog plate is already a positioned frame in the theme; the product
image link is not, so it is made one only while a skeleton is inside it. */
body.iq-variant-techspec .product__img.is-iq-loading,
body.iq-variant-techspec .catalog-item__image.is-iq-loading {
position: relative;
overflow: hidden;
}
/* A submitted purchase button: the label stays (so nothing jumps) and the
surface takes on the same waiting texture as a skeleton. */
body.iq-variant-techspec .is-iq-pending {
position: relative;
overflow: hidden;
pointer-events: none;
}
body.iq-variant-techspec .is-iq-pending::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
transparent,
color-mix(in srgb, var(--iq-ink) 22%, transparent),
transparent
);
transform: translateX(-100%);
animation: iq-skeleton-sheen 1.1s ease-in-out infinite;
pointer-events: none;
}
/* ---------------------------------------------------- 6. cover parallax */
body.iq-variant-techspec .catalog-item__image[data-iq-parallax] {
position: relative;
overflow: hidden;
}
body.iq-variant-techspec .iq-cover-layer {
position: absolute;
/* Taller than the frame so the layer has room to travel without ever
uncovering an edge. Matches OVERSHOOT in cover-parallax.js. */
top: -7%;
right: 0;
bottom: -7%;
left: 0;
z-index: 0;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
pointer-events: none;
will-change: transform;
}
/* Anything the theme draws on the plate stays above the moving layer. */
body.iq-variant-techspec .catalog-item__image[data-iq-parallax] > *:not(.iq-cover-layer) {
position: relative;
z-index: 1;
}
/* ------------------------------------------ reduced motion — pass 2 additions */
@media (prefers-reduced-motion: reduce) {
/* The header stays where the page put it: no fixed positioning, no band. */
body.iq-variant-techspec.iq-header-sticky .header {
position: static;
background: var(--iq-bg-canvas);
border-bottom-color: var(--iq-hair-strong);
}
body.iq-variant-techspec .iq-header-band,
body.iq-variant-techspec .iq-header-spacer,
body.iq-variant-techspec .iq-read-progress {
display: none !important;
}
body.iq-variant-techspec .iq-buy-dock {
transition: none;
}
body.iq-variant-techspec .header__count.iq-cart-pulse {
animation: none;
}
/* The skeleton stays — it is status. Only the sheen goes. */
body.iq-variant-techspec .iq-skeleton::after,
body.iq-variant-techspec .is-iq-pending::after {
animation: none;
opacity: .35;
transform: none;
}
body.iq-variant-techspec .iq-cover-layer {
top: 0;
bottom: 0;
transform: none !important;
will-change: auto;
}
}
/* --- 45-cart.css --- */
/* Tech Spec — корзина.
До этого файла у корзины не было ни одного правила в techspec: она собиралась
из общих правил `body.page-template-page-cart` в iq-visual.css, написанных под
прежнюю палитру, и из базовой темы. Отсюда и ощущение «страницы разные».
Корзина и чекаут — одна и та же таблица товаров в двух шагах, поэтому набор
здесь тот же, что в 50-checkout.css: подпись — компонент подписи, цифры —
числовая разрядка, плита — токены плиты. */
/* --- Плита и заголовок ---------------------------------------------------- */
body.iq-variant-techspec .cart__inner {
background: var(--iq-panel-bg);
border: var(--iq-panel-border);
border-radius: var(--iq-panel-radius);
}
body.iq-variant-techspec .cart__title {
font-family: var(--iq-heading-font);
font-weight: var(--iq-heading-weight);
letter-spacing: var(--iq-heading-tracking);
text-transform: uppercase;
}
/* --- Таблица товаров ------------------------------------------------------ */
body.iq-variant-techspec .cart__table-header {
font: var(--iq-label-weight) var(--iq-label-size)/var(--iq-label-leading) var(--iq-label-font);
letter-spacing: var(--iq-label-tracking);
color: var(--iq-fg-muted);
text-transform: uppercase;
}
/* Шов рисуется бордюром ячейки, а не плитой, просвечивающей сквозь зазор:
незаполненная колонка иначе красится серым блоком. */
body.iq-variant-techspec .cart__row + .cart__row td {
border-top: var(--iq-seam);
}
body.iq-variant-techspec .cart__name-link {
color: var(--iq-fg-primary);
font-family: var(--iq-font);
/* Названия у музыки длинные и содержат цену («…1 МЕСЯЦ 299 ₽»), из-за чего на
последнюю строку падал одинокий знак валюты. */
text-wrap: pretty;
}
body.iq-variant-techspec .cart__name-link:hover,
body.iq-variant-techspec .cart__name-link:focus-visible {
color: var(--iq-action-primary);
}
/* Цена. Базовая тема добавляет « Р» псевдоэлементом и красит его сиреневым
#5a2785 — на графитовом листе знак валюты пропадал. Он остаётся тише числа,
но читаемым, и держится к нему вплотную: разрядка подписи его отрывала. */
body.iq-variant-techspec .cart__price b {
color: var(--iq-fg-primary);
font-family: var(--iq-font);
font-variant-numeric: tabular-nums;
letter-spacing: var(--iq-numeric-tracking);
}
body.iq-variant-techspec .cart__price b::after {
color: var(--iq-fg-muted);
font-family: var(--iq-font);
letter-spacing: var(--iq-numeric-tracking);
}
body.iq-variant-techspec .cart__old-price {
color: var(--iq-fg-muted);
text-decoration: line-through;
}
/* Количество. У цифрового товара его менять нельзя, поэтому в одной строке
стоит поле, а в соседней — просто число; раньше они выглядели как два разных
элемента (обведённое поле против голой синей цифры). Теперь у обоих одна
геометрия, а разница читается как «поле можно править, число — нет». */
body.iq-variant-techspec .cart__quantity .qty,
body.iq-variant-techspec .cart__quantity .input-text {
width: 72px;
height: var(--iq-field-h);
padding: var(--iq-field-pad);
border: var(--iq-field-border);
border-radius: var(--iq-field-radius);
background: var(--iq-field-bg);
color: var(--iq-fg-primary);
font-variant-numeric: tabular-nums;
letter-spacing: var(--iq-numeric-tracking);
text-align: center;
}
body.iq-variant-techspec .cart__quantity .counter__total {
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: var(--iq-field-h);
border: 1px solid transparent;
color: var(--iq-fg-muted);
font-family: var(--iq-font);
font-variant-numeric: tabular-nums;
letter-spacing: var(--iq-numeric-tracking);
}
/* Удаление. Базовая тема рисует крестик двумя полосками цвета #252525 — почти
чёрным по графиту, то есть невидимым. Плюс цель 40px при минимуме 44px. */
body.iq-variant-techspec .cart__delete-btn {
width: var(--iq-control-h);
height: var(--iq-control-h);
border-radius: var(--iq-field-radius);
}
body.iq-variant-techspec .cart__delete-btn::before,
body.iq-variant-techspec .cart__delete-btn::after {
top: 50%;
left: 22%;
width: 56%;
height: 1px;
border-radius: 0;
background: var(--iq-fg-muted);
transition: background-color var(--iq-dur-in) var(--iq-ease);
}
body.iq-variant-techspec .cart__delete-btn:hover::before,
body.iq-variant-techspec .cart__delete-btn:hover::after,
body.iq-variant-techspec .cart__delete-btn:focus-visible::before,
body.iq-variant-techspec .cart__delete-btn:focus-visible::after {
background: var(--iq-danger);
}
/* --- Итог, промокод, действия --------------------------------------------- */
body.iq-variant-techspec .cart__result-wrap {
font: var(--iq-label-weight) var(--iq-label-size)/var(--iq-label-leading) var(--iq-label-font);
letter-spacing: var(--iq-label-tracking);
color: var(--iq-fg-muted);
text-transform: uppercase;
}
body.iq-variant-techspec .cart__result {
color: var(--iq-fg-primary);
font-family: var(--iq-heading-font);
font-variant-numeric: tabular-nums;
letter-spacing: var(--iq-numeric-tracking);
}
/* Свой знак валюты у итога — отдельным правилом, цвет #272e85 из базовой темы
на графите не читается. */
body.iq-variant-techspec .cart__result::after {
color: var(--iq-fg-muted);
font-family: var(--iq-heading-font);
letter-spacing: var(--iq-numeric-tracking);
}
body.iq-variant-techspec .cart__promo {
height: var(--iq-field-h);
padding: var(--iq-field-pad);
border: var(--iq-field-border);
border-radius: var(--iq-field-radius);
background: var(--iq-field-bg);
color: var(--iq-fg-primary);
}
body.iq-variant-techspec .cart__promo::placeholder {
color: var(--iq-fg-muted);
}
/* На экране одно основное действие — «Оформить заказ». Промокод размечен тем же
`btn--contrast`, из-за чего рядом стояли две одинаково громкие заливки и
выбор между ними приходилось делать глазами. Промокод уходит в контур. */
body.iq-variant-techspec .cart__promo-btn {
border-color: var(--iq-hair-strong);
background: transparent;
color: var(--iq-fg-primary);
gap: 4px;
}
body.iq-variant-techspec .cart__promo-btn:hover,
body.iq-variant-techspec .cart__promo-btn:focus-visible {
border-color: var(--iq-action-primary);
color: var(--iq-action-primary);
}
/* В разметке слово «промокод» лежит в отдельном span без пробела вокруг —
получалось «ПРИМЕНИТЬПРОМОКОД». Разделяет флексовый зазор кнопки, а не
вставленный в CSS пробел, который выделяется вместе с текстом. */
body.iq-variant-techspec .cart__promo-btn > span {
display: inline-block;
}
body.iq-variant-techspec .cart__info-cashback,
body.iq-variant-techspec .cart-info__cashback-description {
color: var(--iq-fg-muted);
font-size: 13px;
}
/* Приписка про бонус относится к кнопке, под которой стоит, поэтому равняется
по её краю, а не по правому краю плиты рваной строкой. */
body.iq-variant-techspec .cart__info-cashback {
margin-top: var(--iq-gap-3);
text-align: center;
}
/* Сумма бонуса внутри приписки — та же числовая набранность, что у цен, и
акцентный цвет вместо сиреневого из прежней палитры. */
body.iq-variant-techspec .cart__info-cashback b,
body.iq-variant-techspec .cart__info-cashback b::after {
color: var(--iq-action-primary);
font-family: var(--iq-font);
font-variant-numeric: tabular-nums;
letter-spacing: var(--iq-numeric-tracking);
}
/* --- Пустая корзина -------------------------------------------------------- */
body.iq-variant-techspec .cart__empty p {
color: var(--iq-fg-muted);
}
body.iq-variant-techspec .cart__empty-action {
justify-self: start;
}
/* --- 50-checkout.css --- */
/* ==========================================================================
50-checkout.css — checkout usability work for the Tech Spec variant.
Every rule is scoped to body.iq-variant-techspec, including the ones inside
@media wrappers. Editorial is the live site look and must not move by a
pixel. No custom properties are declared on :root here: the theme tokens
are redefined on body, so a derived token declared on :root would resolve
against the base palette and freeze there. Everything below reads the
tokens at use time instead.
========================================================================== */
/* --- Layout: form on the left, order summary sticky on the right ---------- */
body.iq-variant-techspec .checkout__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
grid-auto-flow: row dense;
gap: 24px 32px;
align-items: start;
}
body.iq-variant-techspec .checkout__title,
body.iq-variant-techspec .checkout__notice,
body.iq-variant-techspec .checkout_wait,
body.iq-variant-techspec .iq-checkout-done,
body.iq-variant-techspec .iq-checkout-steps {
grid-column: 1 / -1;
}
body.iq-variant-techspec .checkout__form {
grid-column: 1;
margin: 0;
}
body.iq-variant-techspec .iq-checkout-summary {
grid-column: 2;
position: sticky;
top: 24px;
background: var(--iq-bg-surface);
border: 1px solid var(--iq-hair-strong);
border-radius: var(--iq-radius-panel);
padding: 16px;
max-height: calc(100vh - 48px);
overflow-y: auto;
}
body.iq-variant-techspec .iq-checkout-summary:empty {
display: none;
}
body.iq-variant-techspec .iq-checkout-summary .cart__table--checkout {
width: 100%;
margin: 0;
/* Auto layout let the four headings claim their intrinsic widths and pushed
СТОИМОСТЬ past the edge of a 340px rail. Fixed widths give the slack to
the product name, which is the only column that can absorb it. */
table-layout: fixed;
}
body.iq-variant-techspec .iq-checkout-summary .cart__table--checkout th:first-child,
body.iq-variant-techspec .iq-checkout-summary .cart__table--checkout td:first-child { width: 44%; }
body.iq-variant-techspec .iq-checkout-summary .cart__table--checkout th:nth-child(2),
body.iq-variant-techspec .iq-checkout-summary .cart__table--checkout td:nth-child(2) { width: 20%; }
body.iq-variant-techspec .iq-checkout-summary .cart__table--checkout th:nth-child(3),
body.iq-variant-techspec .iq-checkout-summary .cart__table--checkout td:nth-child(3) { width: 16%; }
/* Число и знак валюты — одна единица; перенос между ними («299 ⏎ ₽») читается
как обрыв суммы. Переносится только название товара. */
body.iq-variant-techspec .iq-checkout-summary .cart__row td:not(:first-child) {
white-space: nowrap;
}
body.iq-variant-techspec .iq-checkout-summary .cart__table-header {
font: var(--iq-label-weight) var(--iq-label-size)/var(--iq-label-leading) var(--iq-label-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
color: var(--iq-fg-muted);
font-weight: 400;
/* The base rule leaves no horizontal padding, so in this narrow column the
four headings ran together into ТОВАРЦЕНАКОЛИЧЕСТВОСТОИМОСТЬ. */
padding: 0 6px 8px;
border-bottom: 1px solid var(--iq-hair);
/* Не `anywhere`: он рвал «Количество» на «КОЛ ИЧЕ СТВО». Заголовок, который не
влезает, надо сократить в разметке, а не крошить по буквам. */
overflow-wrap: normal;
}
/* Numeric columns read as a column only when they line up on the right. */
body.iq-variant-techspec .iq-checkout-summary .cart__table-header:not(:first-child),
body.iq-variant-techspec .iq-checkout-summary .cart__row td:not(:first-child) {
text-align: right;
font-variant-numeric: tabular-nums;
}
body.iq-variant-techspec .iq-checkout-summary .cart__row td {
padding: 10px 8px;
border-bottom: 1px solid var(--iq-hair);
vertical-align: top;
}
body.iq-variant-techspec .iq-checkout-summary .cart__bottom--checkout {
margin: 12px 0 0;
padding-top: 12px;
border-top: 1px solid var(--iq-hair-strong);
}
body.iq-variant-techspec .iq-checkout-summary .cart__result {
color: var(--iq-action-primary);
}
/* The only h1 on the site left without the heading tracking — the cross-page
comparison had it at `normal` while every other page sat on the token. */
body.iq-variant-techspec .checkout__title {
font-family: var(--iq-heading-font);
letter-spacing: var(--iq-heading-tracking);
text-transform: uppercase;
}
/* --- Step indicator: cart -> details -> payment --------------------------- */
body.iq-variant-techspec .iq-checkout-steps {
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
margin: 0 0 8px;
padding: 0;
counter-reset: none;
}
body.iq-variant-techspec .iq-checkout-steps__item {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 160px;
min-height: 44px;
padding: 8px 12px;
border: 1px solid var(--iq-hair);
border-radius: var(--iq-radius-panel);
color: var(--iq-fg-muted);
background: transparent;
}
body.iq-variant-techspec .iq-checkout-steps__item.is-done {
color: var(--iq-fg-primary);
border-color: var(--iq-hair-strong);
}
body.iq-variant-techspec .iq-checkout-steps__item.is-current {
color: var(--iq-fg-primary);
border-color: var(--iq-action-primary);
background: var(--iq-bg-surface);
}
body.iq-variant-techspec .iq-checkout-steps__link {
display: flex;
align-items: center;
gap: 8px;
color: inherit;
text-decoration: none;
width: 100%;
min-height: 28px;
}
body.iq-variant-techspec .iq-checkout-steps__link:hover,
body.iq-variant-techspec .iq-checkout-steps__link:focus-visible {
color: var(--iq-action-primary);
}
body.iq-variant-techspec .iq-checkout-steps__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
flex: 0 0 24px;
border: 1px solid currentColor;
border-radius: var(--iq-radius-media);
font-family: var(--iq-label-font);
font-size: 11px;
}
body.iq-variant-techspec .iq-checkout-steps__item.is-current .iq-checkout-steps__num {
background: var(--iq-action-primary);
color: var(--iq-button-primary-fg);
border-color: var(--iq-action-primary);
}
body.iq-variant-techspec .iq-checkout-steps__label {
font: var(--iq-label-weight) var(--iq-label-size)/var(--iq-label-leading) var(--iq-label-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
}
/* --- Fields: visible label, 44px target, error under the field ------------ */
body.iq-variant-techspec .iq-field {
display: block;
margin: 0 0 18px;
}
body.iq-variant-techspec .iq-field__label {
display: block;
margin: 0 0 6px;
font: var(--iq-label-weight) var(--iq-label-size)/var(--iq-label-leading) var(--iq-label-font);
letter-spacing: var(--iq-label-tracking);
text-transform: uppercase;
color: var(--iq-fg-muted);
}
body.iq-variant-techspec .iq-field__req {
color: var(--iq-action-primary);
}
body.iq-variant-techspec .iq-field__input {
display: block;
width: 100%;
min-height: 44px;
padding: 10px 12px;
background: var(--iq-input-bg);
border: 1px solid var(--iq-hair-strong);
border-radius: var(--iq-radius-input);
color: var(--iq-fg-primary);
}
body.iq-variant-techspec .iq-field__input::placeholder {
color: var(--iq-fg-muted);
}
body.iq-variant-techspec .iq-field__input:focus-visible,
body.iq-variant-techspec .iq-delivery__radio:focus-visible + .iq-delivery__body,
body.iq-variant-techspec .checkout__form a:focus-visible,
body.iq-variant-techspec .iq-checkout-steps__link:focus-visible {
outline: 2px solid var(--iq-action-primary);
outline-offset: 2px;
}
body.iq-variant-techspec .iq-field__input[disabled] {
color: var(--iq-fg-muted);
border-style: dashed;
}
body.iq-variant-techspec .iq-field__hint {
margin: 6px 0 0;
font-size: 12px;
line-height: 1.4;
color: var(--iq-fg-muted);
}
body.iq-variant-techspec .iq-field__error {
margin: 6px 0 0;
font-size: 13px;
line-height: 1.4;
color: var(--iq-danger);
}
body.iq-variant-techspec .iq-field__error:empty {
display: none;
}
body.iq-variant-techspec .iq-field__input[aria-invalid='true'] {
border-color: var(--iq-danger);
}
/* --- Delivery: three-column tiles instead of a