/* ============================================================ Слой правок: подключается ПОСЛЕ темы и переопределяет её. Здесь то, что раньше дописывалось в конец каждого из девяти файлов. Отсюда одна правка вместо девяти: именно на этом я спотыкался — чинил контраст в одном оформлении и забывал в остальных восьми. ============================================================ */ /* ссылка внутри абзаца в блоке призыва: цвет наследуется от подложки */ .cta-box p a{color:inherit;border-bottom:1px solid currentColor;font-weight:600} /* значения из прайса — это числа, а не «пустое поле»: цвет наследуется */ .fill{color:inherit;font-weight:600;border-bottom:1px dotted currentColor;padding:0 2px} /* снимок работы заполняет рамку целиком */ .work h3{font-size:17px} /* Цели на телефоне. Проверка нашла восемь мест мельче 44 px — ссылки в портфолио и в карточках форматов. По ним надо попадать пальцем. */ .work a,.fmt .price a{padding:12px 0;display:inline-block} @media (max-width:720px){ .top nav a,.top nav a.go,.mark{min-height:44px;display:inline-flex;align-items:center} .btn,.chip span,.calc-bar u{min-height:44px} .work a,.fmt .price a{padding:14px 0;min-height:44px;display:flex;align-items:center} /* ссылки в подвале: тоже цели, по ним попадают пальцем */ footer .cols a{min-height:44px;display:flex;align-items:center;padding:4px 0} } /* Служебные классы вместо инлайн-стилей: инлайн побеждает медиазапросы, поэтому по своим же правилам раскладка задаётся классами. */ .отступ-24{margin-top:24px} .строка-с-галочкой{display:grid;grid-template-columns:26px 1fr;gap:12px} .галочка{font-weight:700;color:inherit} /* --red-text есть не во всех темах */ .отступ-12{margin-top:12px} .отступ-14-тихо{margin-top:14px;opacity:.86} .отступ-20{margin-top:20px} .отступ-22{margin-top:22px} .список-проверки{list-style:none;display:grid;gap:14px;margin-top:28px;border-top:2px solid var(--ink);padding-top:22px} .примечание-80{margin-top:24px;max-width:80ch;text-transform:none;letter-spacing:0;font-family:var(--text);font-size:16px;color:var(--ink-2)} .отступ-56{margin-top:56px} .ширина-52{max-width:52ch} .отступ-24-абзац{margin-top:24px;font-size:16.5px;opacity:.9} .отступ-16{margin-top:16px} .отступ-18{margin-top:18px} /* Калькулятор должен жить в том же контейнере, что и секции. У трёх тем он был без ограничения ширины и растягивался на весь экран, пока остальные блоки стояли уже — из-за этого страница «разъезжалась». */ .calc{max-width:var(--wrap);width:100%;margin-left:auto;margin-right:auto} .calc-in,.calc-out{min-width:0} /* Мелочи, которые всплыли при сравнении тем */ .top nav{flex-wrap:nowrap} .top .in{min-width:0} h1,h2,h3,.lead,.card p,.fmt p,.step p,.work p{overflow-wrap:break-word;hyphens:auto} .mock,.cmp-scroll{max-width:100%} /* Общие поля страницы: у тем были разные (16–32), из-за этого заголовок в калькуляторе не совпадал по левому краю с заголовками секций. */ .wrap{padding-left:var(--pad,24px);padding-right:var(--pad,24px)} .calc{padding-left:0;padding-right:0} .calc-in{padding-left:var(--pad,24px)} @media (max-width:720px){ .wrap{padding-left:16px;padding-right:16px} .calc-in{padding-left:16px;padding-right:16px} } /* Вопросы: в «Ретро 95» строки были 40 px — на четыре меньше нормы. Проверка нашла восемь таких. */ summary{min-height:44px} @media (max-width:720px){ /* Меню прокручивается вбок, и было не видно, что справа есть ещё пункты. Затемнение у правого края показывает: там продолжение. */ .top nav{ -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%); padding-right:28px; } /* Поля ввода не мельче 16 px — иначе iOS приближает страницу */ input,textarea,select{font-size:16px} } /* Служебная ссылка «перейти к содержимому»: видна только при фокусе, но и она должна быть удобной. */ .skip{min-height:44px;display:inline-flex;align-items:center;padding:12px 20px} /* --- Работы: без снимков. Скриншоты целых страниц в маленькой рамке читались плохо и выглядели неряшливо — раздел стал текстовым. --- */ .work-num{padding-bottom:9px;margin-bottom:12px;border-bottom:1px solid currentColor; border-color:color-mix(in srgb, currentColor 20%, transparent)} .work h3{font-size:19px} .work .tags{margin-top:2px} /* Мелочи, которые делают страницу собранной */ .total,.calc-bar b{transition:color .18s ease} ::selection{background:rgba(0,0,0,.12)} /* Таблица сравнения на телефоне прокручивается — затемнение показывает, что справа есть ещё */ @media (max-width:720px){ .cmp-scroll{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 40px),transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 40px),transparent 100%)} } /* --- Таблица сравнения на телефоне: карточки вместо прокрутки вбок --- Каждой ячейке подпись столбца подставляет скрипт; здесь она показывается. */ @media (max-width:720px){ .cmp-scroll{overflow:visible;border:none;background:none;box-shadow:none;padding:0; -webkit-mask-image:none;mask-image:none} .cmp{min-width:0;display:block;background:none} .cmp thead{display:none} .cmp tbody{display:grid;gap:14px} .cmp tr{display:grid;gap:8px;border:1px solid currentColor;border-radius:14px; border-color:color-mix(in srgb, currentColor 20%, transparent);padding:16px} .cmp td{border:none;padding:0;display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px; align-items:baseline} .cmp td::before{content:attr(data-подпись);color:var(--dim,currentColor);opacity:.75; font:600 11px/1.5 var(--mono,monospace);text-transform:uppercase;letter-spacing:.08em} .cmp td:first-child{grid-template-columns:1fr;font-weight:700;font-size:16px;margin-bottom:2px} .cmp td:first-child::before{display:none} } /* --- Очень узкие экраны: 320px --- */ @media (max-width:360px){ body{font-size:15px} h1{font-size:clamp(24px,7.4vw,34px)} .chip span,.btn{padding-left:12px;padding-right:12px} .calc-bar{padding:10px 12px} .calc-bar b{font-size:17px} .оформление{left:12px!important;right:12px;padding:6px} .оформление button{padding:9px 9px;font-size:11px} } /* --- Отраслевые кнопки --- */ /* Кнопка-пресет оформлена как чип, но это