/* Сайт №42 (Michael) - ДВЕ ТЕМЫ, СВЕТЛАЯ ПО УМОЛЧАНИЮ. Каталоги, на которые равняемся, все светлые: покупатель сравнивает номера деталей, а это легче на светлом. Тёмная осталась - по выбору. Разведка №42: цвета были НЕ все через переменные. В :root их было семь, а прямо в правилах сидело ещё около двадцати - подложка карточки, плашки галереи, полупрозрачный фон шапки, жёлтая заметка о наличии, тени, белый текст на значке "Sold". Ровно они и не переключались бы вместе с темой, поэтому все переведены в переменные ниже. */ :root { --bg: #ffffff; --bg-elevated: #f5f6f8; --surface-sunken: #e9ebef; --border: #ccd1d9; /* Сайт №42 - у РАМОК ЭЛЕМЕНТОВ УПРАВЛЕНИЯ (поля ввода, выбор валюты, кнопки) отдельный, более тёмный цвет: WCAG 1.4.11 требует для них 3:1 к фону. Разделительная рамка карточки под это требование не подпадает - поверхности и так различаются фоном, а рамка лишь украшение; делать её такой же тёмной значило бы утяжелить сетку без пользы для кого бы то ни было. */ --border-strong: #6b7280; --text: #14161a; --text-muted: #565d66; --accent: #14161a; --on-accent: #ffffff; --card-hover-border: #8b949e; --overlay: rgba(255,255,255,0.86); --overlay-strong: rgba(255,255,255,0.96); --overlay-text: #14161a; --header-bg: rgba(255,255,255,0.94); --lightbox-bg: rgba(16,18,22,0.94); --shadow-soft: rgba(20,22,26,0.14); --shadow-strong: rgba(20,22,26,0.22); --warn-border: #a97b12; --warn-bg: rgba(200, 150, 20, 0.14); --warn-text: #7a5600; --primary-hover: #0a4fae; /* Сайт №28 п.13 - REAL DEFECT found by the axe audit: white text on the original #d9534f only reached 3.96:1 (.badge--sold) - below the 4.5:1 AA floor for normal-size text. Darkened just enough to clear it (5.33:1) while staying visually "red". Сайт №37 - ЭТОТ КОММЕНТАРИЙ БЫЛ НАПИСАН ЧЕРЕЗ // И УХОДИЛ В САМ CSS. Двойная косая - не комментарий CSS: разбор считал строку негодным объявлением и пропускал всё до следующей точки с запятой, то есть вместе с ней съедал и --danger. Переменная не определялась вовсе, background: var(--danger) у значка "Sold" становился недействительным, и значок оставался без фона - белый текст на светлой карточке. То самое место, про которое страница заявления обещала контраст AA. */ --danger: #b3261e; /* Сайт №28 п.9 - dedicated focus-ring color, distinct from --accent/ --text so it's unmistakable against either dark background (8.7:1 on --bg, 7.9:1 on --bg-elevated). */ --focus: #0b5fd0; --radius: 10px; /* Задание Сайт №7 - fallback for browsers with JS disabled/before first paint; site.js overwrites this with the header's REAL measured height on load/resize, so the sticky sidebar's offset stays correct no matter how tall the header renders (long seller name wrapping to two lines, different font metrics, etc.) instead of a guessed magic number. */ --header-h: 60px; color-scheme: light; } /* Тёмная тема - ровно те цвета, что были у сайта до этой задачи. Класс ставится на из site.js и, чтобы не было вспышки чужой темы, ещё раньше - встроенным скриптом в (templates.ts), тем же способом, что и настройки доступности. */ html.theme-dark { --bg: #0b0c0f; --bg-elevated: #17181c; --surface-sunken: #1c1d22; --border: #2a2c33; --border-strong: #767c88; --text: #e8e9ec; --text-muted: #9a9ca6; --accent: #e8e9ec; --on-accent: #06121f; --card-hover-border: #454852; --overlay: rgba(11,12,15,0.65); --overlay-strong: rgba(11,12,15,0.9); --overlay-text: #ffffff; --header-bg: rgba(11,12,15,0.92); --lightbox-bg: rgba(5,5,7,0.94); --shadow-soft: rgba(0,0,0,0.35); --shadow-strong: rgba(0,0,0,0.45); --warn-border: #8a6d1a; --warn-bg: rgba(212, 168, 44, 0.12); --warn-text: #d4a82c; --danger: #c9302c; --focus: #5eb3ff; --primary-hover: #7cc1ff; color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.5; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* Сайт №28 п.9 - visible focus outline on every interactive element, dark-theme-appropriate (default UA outlines are easy to lose against var(--bg)). :focus-visible (not plain :focus) so a mouse click doesn't draw a ring, only real keyboard/AT focus does. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* Сайт №28 п.9 - "ссылка «к содержимому»" - the very first focusable thing on every page (see htmlShell), invisible until it actually receives keyboard focus. */ .skip-link { position: absolute; top: -100px; left: 12px; z-index: 100; background: var(--bg-elevated); color: var(--text); border: 1px solid var(--focus); padding: 10px 16px; border-radius: var(--radius); font-size: 0.9rem; } .skip-link:focus { top: 12px; } /* Задание Сайт №33 п.2 - fixed accessibility icon, present on every page (see templates.ts's htmlShell). Bottom-right, clear of the sticky header (top) and the sticky facet sidebar (which stops short of the viewport's right edge on desktop, and is closed by default on a phone - see .browse__facets/.facets-toggle-wrap) - z-index kept BELOW the lightbox's 200 (see .lightbox above) so an open lightbox correctly covers it like everything else, never floats on top of a full-screen photo. 44x44 - a real touch target, not a decorative sliver, on every screen size including a phone's, without needing its own separate mobile override. */ .a11y-fab { /* Сайт №40 - размер значка постоянный: 21px здесь, а не 1.3rem, иначе на 160% он раздувается вместе с текстом. */ font-size: 21px; position: fixed; right: 16px; bottom: 16px; z-index: 50; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text); text-decoration: none; box-shadow: 0 2px 10px var(--shadow-soft); } .a11y-fab:hover { border-color: var(--focus); text-decoration: none; } /* Сайт №37 (Michael) - ПАНЕЛЬ СРЕДСТВ ДОСТУПНОСТИ. Значок раньше был ссылкой на страницу заявления и не давал человеку ничего; теперь он открывает вот эту панель. Всё состояние держится классами на , поэтому любое средство - это чистый CSS, без пересчёта чего-либо в JS. */ .a11y-panel { /* Сайт №40 (дополнение Michael) - панель НЕ увеличивается вместе с текстом сайта: на 160% она вырастала до 594px и закрывала каталог. Базовый размер задан в пикселях, всё внутри - в em от него, поэтому панель одинакова на всех пяти шагах увеличения. Ограничение по высоте оставлено на случай очень низкого окна. */ font-size: 16px; max-height: calc(100vh - 96px); overflow-y: auto; position: fixed; right: 16px; bottom: 70px; z-index: 60; width: 260px; max-width: calc(100vw - 32px); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; box-shadow: 0 6px 24px var(--shadow-strong); display: flex; flex-direction: column; gap: 6px; } .a11y-panel[hidden] { display: none; } .a11y-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .a11y-panel__head h2 { margin: 0; font-size: 1em; } .a11y-panel__close { background: none; border: none; color: var(--text); font-size: 1.4em; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; } .a11y-panel__group { display: flex; align-items: center; gap: 8px; } .a11y-panel__step { flex: 0 0 auto; min-width: 44px; min-height: 40px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font-size: 1em; cursor: pointer; } .a11y-panel__size { flex: 1 1 auto; text-align: center; color: var(--text-muted); font-size: 0.9em; } .a11y-panel__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 6px 10px; text-align: start; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font-size: 0.92em; cursor: pointer; } .a11y-panel__item[aria-pressed="true"] { border-color: var(--focus); } /* Состояние переключателя видно НЕ ТОЛЬКО цветом рамки - иначе оно пропадает для человека, не различающего цвета (WCAG 1.4.1). */ .a11y-panel__item .a11y-panel__state::after { content: "\2610"; font-size: 1.1em; } .a11y-panel__item[aria-pressed="true"] .a11y-panel__state::after { content: "\2611"; } .a11y-panel__reset, .a11y-panel__statement { min-height: 40px; display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font-size: 0.9em; cursor: pointer; padding: 6px 10px; } .a11y-panel__statement { text-decoration: underline; text-underline-offset: 2px; } .no-js .a11y-fab, .no-js .a11y-panel { display: none; } /* --- сами средства --- */ /* Размер текста: вся типографика сайта в rem, поэтому корневой размер масштабирует именно текст, не ломая раскладку. */ html.a11y-text-1 { font-size: 112.5%; } html.a11y-text-2 { font-size: 125%; } html.a11y-text-3 { font-size: 140%; } html.a11y-text-4 { font-size: 160%; } /* Высокий контраст: переопределяются те же переменные, которыми окрашен весь сайт, поэтому средство действует на каждый элемент разом. */ /* Сайт №42 - высокий контраст теперь есть у ОБЕИХ тем: на светлой это чёрное по белому, на тёмной - белое по чёрному, как было. Раньше он всегда делал тёмный вариант, и на светлом сайте это выглядело бы как самовольное переключение темы. */ html.a11y-contrast { --bg: #ffffff; --bg-elevated: #ffffff; --surface-sunken: #ffffff; --border: #000000; --border-strong: #000000; --text: #000000; --text-muted: #000000; --accent: #000000; --on-accent: #ffffff; --card-hover-border: #000000; --overlay: rgba(255,255,255,0.96); --overlay-strong: #ffffff; --overlay-text: #000000; --header-bg: #ffffff; --warn-border: #000000; --warn-bg: #ffffff; --warn-text: #000000; --danger: #a4000f; --focus: #0000cc; } html.a11y-contrast.theme-dark { --bg: #000000; --bg-elevated: #000000; --surface-sunken: #000000; --border: #ffffff; --border-strong: #ffffff; --text: #ffffff; --text-muted: #ffffff; --accent: #ffffff; --on-accent: #000000; --card-hover-border: #ffffff; --overlay: rgba(0,0,0,0.96); --overlay-strong: #000000; --overlay-text: #ffffff; --header-bg: #000000; --warn-border: #ffffff; --warn-bg: #000000; --warn-text: #ffffff; --danger: #ff4d4d; --focus: #ffff00; } html.a11y-contrast img { filter: contrast(1.15); } html.a11y-contrast .badge, html.a11y-contrast .a11y-panel__item { border: 1px solid var(--border); } html.a11y-underline a { text-decoration: underline !important; } /* Крупный курсор: SVG в data-URI, чтобы не тянуть отдельный файл. */ html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 2 L6 38 L15 30 L21 44 L28 41 L22 27 L34 27 Z' fill='%23ffffff' stroke='%23000000' stroke-width='2'/%3E%3C/svg%3E") 4 2, auto; } html.a11y-cursor a, html.a11y-cursor button, html.a11y-cursor summary, html.a11y-cursor [role="button"] { cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M18 4 a4 4 0 0 1 8 0 v16 h2 a4 4 0 0 1 4-4 h2 a4 4 0 0 1 4 4 v12 a10 10 0 0 1-10 10 h-8 a10 10 0 0 1-10-10 V16 a4 4 0 0 1 8 0 z' fill='%23ffffff' stroke='%23000000' stroke-width='2'/%3E%3C/svg%3E") 14 2, pointer; } /* Остановка движения. На сайте оно одно - поворот шеврона у раскрывающихся фильтров (.facets-toggle__chevron), но правило написано на всё сразу, чтобы любое движение, добавленное позже, тоже подчинялось этой кнопке. */ html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important; } @media (max-width: 520px) { .a11y-panel { right: 8px; left: 8px; width: auto; } } /* Сайт №28 п.7/п.9 - hidden until site.js confirms JS actually runs (see htmlShell's inline no-js-removal script) - a control that does nothing without JS must never be visible without it. */ .no-js .product-gallery__nav, .no-js .product-gallery__zoom, .no-js .share-links__copy { display: none; } /* Сайт №41 (Michael) - ПЛАВАЮЩАЯ КНОПКА СВЯЗИ. Стоит РЯДОМ со значком доступности, а не поверх: доступность остаётся в самом углу (right: 16px), связь - левее ровно на ширину значка плюс отступ (right: 72px). Панели у них общее место над углом, поэтому site.js закрывает одну, когда открывается другая. Размер, как и у панели доступности, задан в пикселях и не растёт вместе с текстом сайта (Сайт №40): это управление, а не содержимое. */ .contact-fab { font-size: 21px; position: fixed; right: 72px; bottom: 16px; z-index: 50; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text); cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.35); } .contact-fab:hover { border-color: var(--focus); } /* Сайт №57 п.1 (Michael) - ПАНЕЛЬ ШИРИНОЙ ПО САМОМУ ДЛИННОМУ ПУНКТУ. Было жёсткие 240px, и подпись "Email in Gmail (opens in browser)" переносилась на вторую строку; по-русски и на иврите подписи ещё длиннее, так что подбирать одно число под все языки - гадание. width: max-content заставляет панель померить собственное содержимое: она вырастает ровно настолько, сколько нужно самому длинному пункту, на любом языке и при любом размере шрифта у человека. Панель приколота справа (right: 16px), поэтому растёт она влево, как и просил Michael. min-width оставляет прежние 240px нижней границей, чтобы короткий список не сжимался в лепесток, а max-width не даёт вылезти за экран. */ .contact-panel { font-size: 16px; position: fixed; right: 16px; bottom: 70px; z-index: 60; width: max-content; min-width: 240px; max-width: calc(100vw - 32px); max-height: calc(100vh - 96px); overflow-y: auto; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; box-shadow: 0 6px 24px rgba(0,0,0,0.45); } .contact-panel[hidden] { display: none; } .contact-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .contact-panel__head h2 { margin: 0; font-size: 1em; } .contact-panel__close { background: none; border: none; color: var(--text); font-size: 1.4em; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; } .contact-panel__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .contact-panel__item { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; /* Сайт №57 - вместе с width: max-content выше это и есть "каждый пункт в одну строку": перенос запрещён, поэтому мерить панели себя приходится по неразрывной подписи. */ white-space: nowrap; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font-size: 0.92em; text-decoration: none; } .contact-panel__item:hover { border-color: var(--focus); text-decoration: none; } /* Значок канала - буква в кружке: без внешних картинок и без выдумывания чужих логотипов, которые нельзя ставить без разрешения правообладателя. */ .contact-panel__icon { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 0.8em; } .contact-panel__icon--whatsapp::after { content: "W"; } .contact-panel__icon--telegram::after { content: "T"; } .contact-panel__icon--viber::after { content: "V"; } .contact-panel__icon--instagram::after { content: "I"; } .contact-panel__icon--messenger::after { content: "M"; } /* Сайт №56 - оба способа письма ведут на один адрес, поэтому значок у них общий; различает их подпись, а не картинка. */ .contact-panel__icon--email-gmail::after, .contact-panel__icon--email-app::after { content: "@"; } .contact-panel__icon--phone::after { content: "\260E"; } .no-js .contact-fab, .no-js .contact-panel { display: none; } @media (max-width: 520px) { .contact-panel { right: 8px; left: 8px; width: auto; } /* Сайт №57 - на узком телефоне панель уже растянута во всю ширину экрана, шире ей стать некуда. Замерено на 320px: самая длинная подпись ("Письмо в Gmail (откроется в браузере)") в одну строку туда физически не влезает, и запрет переноса не выигрывает строку, а ОБРЕЗАЕТ хвост подписи. Поэтому здесь перенос разрешён обратно: на 375px и шире всё равно выходит одна строка (проверено), а на 320px две читаемые строки лучше обрубка. */ .contact-panel__item { white-space: normal; } } /* Задание Сайт №39 (Michael) - ЛЕНТА ПЛИТОК КАТЕГОРИЙ. Прокрутка вбок делается самим контейнером (overflow-x: auto), поэтому палец на телефоне и колесо/трекпад на настольном работают без JS, а фокус клавиатурой браузер подкручивает сам. Кнопки-стрелки - добавка для мыши, они скрыты, пока site.js не увидит, что лента действительно не помещается. */ .tiles-strip { position: relative; margin: 0 0 18px; } .tiles { display: block; list-style: none; margin: 0; padding: 2px 2px 10px; /* Сайт №46 - плитки по центру. Сайт №48 п.2 центрировал их полями auto у внутренней дорожки .tiles__track. Дополнение к Заданию Сайт №82 (Michael) - РЕАЛЬНЫЙ ДЕФЕКТ, найден на iPhone: обещание из №48 ("когда не помещается - поля схлопываются в ноль") не выполняется. Поля auto делят ПЕРЕПОЛНЕНИЕ пополам: дорожка съезжает влево на половину лишней ширины, и эта половина оказывается ЗА нулём прокрутки - прокруткой её не достать. На экране 390 точек первая плитка была наполовину за краем, подпись разрезана. Замерено на живом сайте: дорожка 1223px в окне 359px - левый край дорожки стоял на -432px, то есть первые 432 точки ленты были недостижимы. Здесь центрирование делает уже сама лента, и ключевым словом safe: "по центру, но не в ущерб началу". Если браузер safe не понимает, он отбрасывает объявление целиком и лента встаёт от начала - то есть запасной путь ровно тот, который нужен на телефоне, а не обрезка. */ display: flex; justify-content: safe center; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-behavior: smooth; /* Сайт №39 - лента остаётся прокручиваемой и без анимации: правило html.a11y-motion (Сайт №37) отменяет плавность, а не саму прокрутку. */ -webkit-overflow-scrolling: touch; } .tiles__track { display: flex; gap: 12px; width: max-content; margin: 0; padding: 0; list-style: none; } .tiles__item { flex: 0 0 auto; scroll-snap-align: start; } /* Сайт №40 - ширина плитки в rem: подпись растёт вместе с текстом, и плитка растёт вместе с ней, а не сдавливает её в пять строк. */ /* Сайт №41 (Michael) - ПЛИТКА БОЛЬШЕ НЕ ПОХОЖА НА КАРТОЧКУ ТОВАРА. Была широким прямоугольником с рамкой и фоном - то же самое, что карточка товара, и покупатель их не различал. Стала портретной, заметно меньше, без рамки и подложки: только скруглённое фото, под ним название обычным текстом, под названием - число. В ряд помещается около десяти. Размер по-прежнему в rem (Сайт №40), поэтому растёт вместе с текстом. */ .tile { /* Задание Сайт №60 п.3 (Michael) - ПОДПИСЬ НЕ ДЛИННЕЕ ДВУХ СТРОК. Было 7rem (112px), и подписи ломались на три строки. Ширина взята не под названия Michael'а, а по модулю сетки товаров ниже: minmax(200px, 1fr), то есть карточка ~200px = 12.5rem. Плитка становится с ней в один шаг по ширине, оставаясь другой по форме (рамка 11:6 из №51), и подпись получает вдвое больше места. Единица - rem, как задано в №40: подпись растёт вместе с текстом сайта, и плитка растёт вместе с ней. */ display: block; width: 12.5rem; text-decoration: none; color: var(--text); } /* Сайт №50 - картинка плитки целиком, без обрезки (как на карточках товара в Сайте №48): свои картинки под категории обрезка портит. Сайт №51 (Michael) - РАМКА ПОДОГНАНА ПОД НАСТОЯЩИЕ КАРТИНКИ. Michael сделал свои десять и все они одного размера, 1408x768 - это ровно 11:6 (1.833). В квадратной рамке из Сайта №50 они заполняли 55% площади и висели узкой полосой между пустыми полями. Рамка 11:6 даёт им 100%: ни обрезки, ни пустых полей. Замерено, а не подобрано на глаз: 4:3 дало бы 73%, 3:2 - 82%, 16:9 - 97%, и только точное отношение исходников - 100%. Плата за это - плитка "Всё остальное", у которой картинка берётся из фотографии товара (Сайт №43) и обычно близка к квадрату: в широкой рамке она заполнит около половины. Обрезать её нельзя - это то же правило, что и для остальных, - поэтому она просто стоит по центру с полями по бокам. */ .tile__img { display: block; width: 100%; aspect-ratio: 11 / 6; background: var(--surface-sunken); border-radius: 14px; overflow: hidden; border: 1px solid var(--border); } .tile__img img { display: block; width: 100%; height: 100%; object-fit: contain; } .tile__noimg { display: block; width: 100%; height: 100%; background: var(--surface-sunken); } .tile:hover .tile__img { border-color: var(--focus); } /* Дополнение к Заданию Сайт №82 (Michael) - "плитка текущего раздела должна быть отмечена, чтобы было видно, где человек находится". Отмечена двумя способами сразу, потому что одного мало: рамкой и подписью потемнее - для глаза, атрибутом aria-current="page" в разметке - для программы чтения с экрана. Цветом одним обойтись нельзя: у половины отметок этого сайта уже есть своё значение (красный - продано), да и различать цвета умеют не все. */ .tile--current .tile__img { border-color: var(--focus); border-width: 2px; } .tile--current .tile__label { font-weight: 600; color: var(--text); } .tile__text { display: block; padding: 6px 2px 0; } /* Сайт №60 - ширина сама по себе двух строк не гарантирует: у покупателя шаблона названия будут другой длины, и подгонять ширину под них нельзя. Обрезка по двум строкам - это и есть гарантия, работающая на любых данных. Текст в разметке остаётся целым, прячется только показ, поэтому программа чтения с экрана по-прежнему читает название полностью. */ .tile__label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; /* Задание Сайт №87 - overflow-wrap: anywhere знают Safari с 15.4, Chrome с 80, Firefox с 65. Ниже этих версий объявление отбрасывается, и длинный номер детали снова вылезает за край экрана - тот самый дефект, который чинили в Сайте №83 и №84. Стоящее перед ним break-word знают все с незапамятных времён; оно делает почти то же самое (различие только в том, как считается наименьшая ширина коробки), и на старом браузере спасает именно от вылезания за край. */ font-weight: 400; font-size: 0.82rem; line-height: 1.25; overflow-wrap: break-word; overflow-wrap: anywhere; } .tile__count { display: block; color: var(--text-muted); font-size: 0.72rem; margin-top: 2px; } .tiles-strip__arrow { position: absolute; top: 60px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); font-size: 1.4rem; line-height: 1; cursor: pointer; } /* Задание Сайт №87 - логические свойства знают Safari с 14.1, Chrome с 87, Firefox с 63. Там, где их нет, объявление отбрасывается целиком, и стрелка встаёт не туда, где ей место, а куда придётся. Физическая пара первой строкой - запас для старых: слева-справа как в европейском письме. Новые браузеры возьмут логическую, она ниже; на иврите и арабском там всё останется правильным. */ .tiles-strip__arrow--prev { left: -6px; inset-inline-start: -6px; } .tiles-strip__arrow--next { right: -6px; inset-inline-end: -6px; } .tiles-strip__arrow[hidden] { display: none; } .no-js .tiles-strip__arrow { display: none; } @media (max-width: 700px) { .tile { width: 5.5rem; } .tiles-strip__arrow { display: none; } } /* header */ .site-header { /* Задание Сайт №87 - Safari с 6.1 по 12 знает липкое положение только как -webkit-sticky. Значение, которого браузер не понимает, он отбрасывает целиком, поэтому две строки подряд - обычный приём: старый возьмёт первую, новый вторую. Без неё шапка на старом Safari просто уезжает вверх при прокрутке. */ position: -webkit-sticky; position: sticky; top: 0; z-index: 20; background: var(--header-bg); /* Задание Сайт №87 - Safari до 18-й знает это свойство только с приставкой. Строка стоит первой, чтобы новые браузеры взяли последнюю, обычную. Без неё на Safari 17 и старше размытия нет совсем - фон шапки почти непрозрачный, так что беда невелика, но строка стоит копейки. */ -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .site-header__inner { max-width: none; margin: 0 auto; padding: 12px 19px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } /* Сайт №40 - было white-space: nowrap: при 160% длинное имя продавца выдавливало поиск и вылезало за край шапки. Теперь переносится; высоту шапки site.js меряет сам (syncHeaderHeight), поэтому липкая колонка фильтров остаётся на месте. */ .site-logo { font-weight: 600; font-size: 1.1rem; overflow-wrap: break-word; overflow-wrap: anywhere; } /* Задание Сайт №69 (Michael) - НАЗВАНИЕ И НОМЕР ОДНОЙ ГРУППОЙ СЛЕВА. flex-wrap: wrap внутри самой группы - это и есть ответ на "если не помещаются, перенеси номер на вторую строку": на 360 точках номер уходит под название сам, без отдельного правила под ширину экрана и без единого пикселя наезда. Прятать его нельзя (Сайт №62), и здесь нечему прятаться - перенос ничего не убирает. column-gap меньше row-gap нарочно: в одну строку они читаются как "название, телефон", в две - как две отдельные строки. */ .site-header__brand { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 14px; row-gap: 2px; } /* Задание Сайт №62 (Michael) - ЧИСЛО ПОЗИЦИЙ И НОМЕР ТЕЛЕФОНА В ШАПКЕ. На широком экране блок прижат к правому краю (margin-inline-start: auto). На узком - переносится на вторую строку шапки ЦЕЛИКОМ (flex-basis: 100% ниже), а не ужимается и не прячется: Michael отдельно оговорил, что номер должен быть виден и на телефоне. Родительский .site-header__inner уже flex-wrap: wrap, поэтому перенос ему ничего не ломает, а высоту шапки site.js меряет сам (syncHeaderHeight), и липкая колонка фильтров остаётся на месте. */ .site-header__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-inline-start: auto; font-size: 0.9rem; } /* Задание Сайт №66 - ссылка "О нас" в шапке. Стоит в том же блоке, что число позиций и телефон (Сайт №62), и переносится вместе с ним. Вид - как у телефона: обычная ссылка, не кнопка; главные действия в шапке - поиск и выбор валюты, спорить с ними ей незачем. */ .site-header__about { color: var(--text); white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; } .site-header__about:hover { text-decoration-thickness: 2px; } .site-header__count { color: var(--text-muted); white-space: nowrap; } /* Задание Сайт №74 (Michael) - НОМЕР ЗАМЕТНЕЕ ОБЫЧНОГО ТЕКСТА. Цвет - var(--focus). Это и есть основной цвет сайта: им покрашены .button--primary, то есть «Написать продавцу» и «Запросить счёт». Красный не берём - на этом сайте он значит ошибку (--danger, значок «Продано»), и телефон в нём читался бы как предупреждение. Размер 1.1rem - как у названия сайта рядом; в rem, поэтому растёт вместе с текстом от панели доступности (Сайт №40). Вес 700, а не 600: цвет один делает номер заметным на светлой теме хуже, чем на тёмной, а вес работает одинаково в обеих. */ .site-header__phone { color: var(--focus); font-size: 1.1rem; font-weight: 700; white-space: nowrap; text-decoration: none; } .site-header__phone:hover { text-decoration: underline; } @media (max-width: 720px) { .site-header__meta { flex-basis: 100%; margin-inline-start: 0; justify-content: space-between; } /* Задание Сайт №69 - на узком экране группа названия занимает всю первую строку: иначе поиск (min-width: 180px) втискивался бы рядом и выдавливал номер за край. */ .site-header__brand { flex-basis: 100%; } /* Сайт №105 (Michael) - ПРИЛИПАЕТ ТОЛЬКО ПОИСК. РЕАЛЬНЫЙ ДЕФЕКТ, найден на живом iPhone: к верху приклеивалась вся шапка целиком - название, поиск, валюта, тема, телефон, ссылки, счётчик товаров. Замерено на стенде при ширине 375: высота 214 точек, 26% экрана, и всё это ехало вместе с прокруткой, закрывая содержимое. КАК ЭТО РАБОТАЕТ. Шапка остаётся липкой целиком, но её верхний край уводится ВЫШЕ экрана ровно на ту высоту, что лежит над строкой поиска. Прокрутка утягивает эту часть за верхнюю кромку, а всё, что ниже - строка поиска - остаётся приклеенным. Высоту меряет site.js (syncHeaderStickyOffset) и кладёт в --header-scroll-away: посчитать её в стилях нельзя, она зависит от длины названия магазина, от того, на сколько строк перенёсся номер, и от увеличения текста в панели доступности. ПОЧЕМУ НЕ СДЕЛАТЬ ЛИПКИМ САМ .site-search. Липкий элемент держится только пока в поле зрения его РОДИТЕЛЬ: поиск уехал бы вверх вместе с .site-header__inner, и прилипания не вышло бы вовсе. ПОРЯДОК СТРОК. Приклеенным остаётся то, что НИЖЕ отступа, поэтому поиск должен быть последней строкой. Разметку не трогаем - порядок задан свойством order и только на узком экране; на компьютере строки идут как раньше. Цена решения: на узком экране порядок обхода клавиатурой (название, поиск, валюта...) отличается от того, что видно глазом (название, валюта, ссылки, поиск). Для набора кнопок в шапке это допустимо - смысл не зависит от их порядка. */ .site-header { top: calc(-1 * var(--header-scroll-away, 0px)); } .site-header__brand { order: 1; } .site-currency { order: 2; } .site-theme { order: 3; } .site-header__meta { order: 4; } .site-search { order: 5; flex-basis: 100%; } } /* Задание Сайт №92 (Michael) - "поиск в середину, правый край перестаёт пустовать". Поиск и раньше умел растягиваться, но его основа (260px) была мала, и на широком экране он оставался узкой полоской у левого края, а правый блок уезжал на вторую строку. Основа 22rem вместе с flex-grow: 1 заставляет поиск занять всю середину, а правый блок встаёт к краю первой же строкой. На узком экране ничего не меняется: min-width прежний, и всё так же переносится в столбик. */ .site-search { position: relative; flex: 1 1 22rem; min-width: 180px; } .site-search input { width: 100%; padding: 8px 12px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text); font-size: 0.95rem; } /* Задание Сайт №83 (Michael) - РЕАЛЬНЫЙ ДЕФЕКТ, найден на iPhone: набрал "Hp", выпал список - названия обрезаны справа, список шире экрана, и от касания весь экран ездил вбок. Причина. Строка списка - это flex-коробка "картинка + название", а у элемента flex по умолчанию min-width: auto, то есть он не сжимается уже своего СОДЕРЖИМОГО. Пока название переносится по пробелам, всё хорошо; но в этом каталоге сплошь номера деталей, и неразрывный кусок бывает длиннее всей коробки. Замерено на живом каталоге, окно 390: у названия "Festo MS6-EM1-1/2,MS6-LFR-1/2-D6-E-R-M-AS,MS6-FRM,..." неразрывный кусок в 58 знаков, строка требовала 418 точек в коробке 269 - и переполнение уезжало за край экрана. Что сделано: - min-width: 0 разрешает названию сжиматься до ширины коробки; - overflow-wrap: anywhere разрывает неразрывный номер, когда иначе он не помещается (по пробелам он по-прежнему переносится в первую очередь); - две строки и многоточие: подсказка - это подсказка, а не карточка, и список из восьми названий по четыре строки не помещался бы на экран телефона. Тот же приём, что у названия на карточке товара и у подписи плитки; - overflow-x: hidden на самом списке - страховка: даже если однажды что-то в него попадёт нерастяжимое, вбок не поедет ни список, ни страница за ним. */ .site-search__results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); max-height: 22.5rem; overflow-y: auto; overflow-x: hidden; z-index: 30; } .site-search__results a { display: flex; gap: 10px; padding: 8px 10px; align-items: center; border-bottom: 1px solid var(--border); } .site-search__results a > span { min-width: 0; overflow-wrap: break-word; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .site-search__results a:last-child { border-bottom: none; } /* Сайт №93 - подсветка подсказки, на которой стоят стрелки. Отдельный класс, а не :hover: клавиатура и мышь могут указывать на разные строки, и человеку важно видеть именно ту, которую откроет Enter. Цвет взят тот же, которым выделяются активные элементы в остальной части сайта. */ .site-search__results a.is-active { background: var(--surface-sunken); /* Одной заливки мало: на светлой теме разница между обычной строкой и подсвеченной еле видна (проверено на собранном сайте). Полоса слева тем же цветом, которым сайт показывает фокус, читается сразу и не сдвигает текст - это тень, а не рамка. */ box-shadow: inset 3px 0 0 var(--focus); } .site-search__results a.is-active > span { color: var(--text); } /* Картинка не сжимается вместе с названием: она и так 36x36. */ .site-search__results img { flex: 0 0 auto; width: 36px; height: 36px; object-fit: cover; border-radius: 4px; background: var(--surface-sunken); } .site-search__results .none { padding: 10px; color: var(--text-muted); } /* Сайт №42 - переключатель темы стоит рядом с выбором валюты, как просил Michael. Размер не привязан к увеличению текста не нужно: это обычный элемент шапки, он растёт вместе со всем остальным (Сайт №40). */ .site-theme { min-height: 32px; padding: 4px 10px; border-radius: 8px; background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border-strong); font-size: 0.85rem; cursor: pointer; white-space: nowrap; } .site-theme:hover { border-color: var(--focus); } .no-js .site-theme { display: none; } .site-currency select { padding: 7px 10px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text); } /* Сайт №27 п.4 - small, quiet, non-legal note about converted prices. */ .site-currency-note { max-width: none; margin: 0 auto; padding: 0 19px 8px; color: var(--text-muted); font-size: 0.78rem; } /* stock freshness notice - Задание Сайт №14 п.4, shown site-wide right under the header so a visitor sees it no matter where they land. */ .stock-notice { background: var(--bg-elevated); border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 0.82rem; text-align: center; padding: 6px 16px; } /* layout */ /* Сайт №42 доп. (Michael) - "по краям много пустого места, сократить примерно до половины сантиметра". Полсантиметра - это ~19px, столько и ставим (было 20px по бокам, но пустоту создавали не они, а потолок ширины 1400px: на широком мониторе он оставлял по 500-600px с каждой стороны). Потолок поднят, но не убран: без него каталог растянулся бы на весь экран и строка стала бы нечитаемо длинной. На узком экране поля уменьшаются отдельным правилом ниже. */ /* Задание Сайт №60 (Michael) - КАТАЛОГ ЗАНИМАЕТ ЭКРАН. Замерено на сгенерированном сайте до правки: при окне 2560 потолок 1800 оставлял 373px слева и 388px справа - это по 1.85 ширины карточки товара с каждой стороны, ровно то, на что Michael и жаловался. При 1920 потолок почти не мешал (53px и 68px), поэтому по файлу дефект и не был виден. В Задании Сайт №42 я писал, что без потолка строка каталога станет нечитаемо длинной. На каталоге это неверно, и надо сказать прямо: сетка товаров - repeat(auto-fill, minmax(200px, 1fr)), то есть лишняя ширина уходит в НОВЫЕ КОЛОНКИ, а ширина текста внутри карточки остаётся той же ~200px. Читать длинную строку там просто негде. Довод про длину строки верен для сплошного текста - он и остаётся в силе: страница товара и заявление о доступности сохраняют прежнюю рамку 1800px, разворачиваются только страницы каталога (.site-main--wide, ставится в templates.ts). Поля теперь задаёт только padding: 19px - это и есть те самые полсантиметра (19px при 96 точках на дюйм = 0.50 см), заданные ещё дополнением к №42. */ .site-main { max-width: 1800px; margin: 0 auto; padding: 20px 19px 60px; min-height: 60vh; } .site-main--wide { max-width: none; } /* Задание Сайт №32 ШАГ2 - shown only when the page detects it was opened as a local file:// (see site.js's initFileProtocolWarning) - a real, if uncommon, notice, so it's visually distinct from ordinary muted text but short of --danger's full alarm red (nothing is actually broken on THIS page, search/filters just don't work from file://). */ .file-protocol-warning { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--warn-border); background: var(--warn-bg); color: var(--warn-text); font-size: 0.9rem; } /* Дополнение к Заданию Сайт №83 - в крошках теперь до четырёх уровней, и среди них названия категорий и номера деталей. overflow-wrap: anywhere - та же страховка, что у списка подсказок поиска: длинный неразрывный кусок должен переноситься, а не уезжать за край экрана телефона. */ .breadcrumbs { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 16px; overflow-wrap: break-word; overflow-wrap: anywhere; } /* Задание Сайт №92 - те же четыре места, что нашлись при разборе Сайта №90: крошки, "О нас" и "Отложенное" в шапке, путь категории на странице товара и ссылка на заявление внутри панели доступности. Приём тот же, что в подвале: постоянное подчёркивание, цвет не трогаем - иначе шапка и крошки станут пёстрыми. Последний уровень крошек - это , не ссылка, и он остаётся без подчёркивания: разница между "сюда можно вернуться" и "вы здесь" видна сразу. */ .breadcrumbs a { text-decoration: underline; text-underline-offset: 2px; } .breadcrumbs a:hover { text-decoration-thickness: 2px; } /* Задание Сайт №85 (Michael) - СРОЧНО: "крошки не нажимаются вовсе". Разметка была в порядке - ссылки настоящие, с настоящими адресами (проверено нажатием: переход со страницы категории на страницу группы происходит). Мешало другое, и это два разных дефекта сразу. ПЕРВЫЙ, главный. Уровень пути был обычной строчной ссылкой, а строчная ссылка РАЗРЫВАЕТСЯ по строкам. Замерено на живом сайте, окно 390, страница товара: у уровня "Other Semiconductor & PCB Manufacturing" два отдельных куска - 34 точки в конце одной строки и 225 в начале следующей, - и середина ссылки приходится в пустоту МЕЖДУ ними. document.elementFromPoint в этой середине возвращает не ссылку, а сам