/* ========================================================================== ТЕМА v3 — под знак НРЦХ (графит + красный) ========================================================================== Цвета и шкала — из css/palitra.css, подключать ЕГО ПЕРВЫМ. Здесь только применение: шапка, подвал, типографика, кнопки, карточки, тёмный режим. Приёмы взяты из макета, принятого владельцем 18.08: срез угла вместо скругления (рифма с рублеными буквами знака), чертёжная сетка на фоне, один красный акцент на экран. Тёмный режим — класс `tema-temnaya` на , только для страницы работ (требование 4а.6). Отдельным файлом не заводим: вторая шкала цветов ради одной страницы — та же ошибка, что развалила панель 18.08. ========================================================================== */ *{box-sizing:border-box} html,body{margin:0} /* display у .knopka перебивал [hidden] — кнопка отправки показывалась при пустом поле. Правило общее: скрытое скрыто, что бы ни задавал класс. */ [hidden]{display:none !important} body{ background:var(--bumaga); color:var(--grafit); font-family:var(--font-body); font-size:16px; line-height:1.55; min-height:100dvh; display:flex;flex-direction:column; background-image: linear-gradient(90deg,transparent 39px,rgba(55,55,66,.045) 40px,transparent 41px), linear-gradient(0deg,transparent 39px,rgba(55,55,66,.045) 40px,transparent 41px); background-size:40px 40px; } /* ── Шапка ──────────────────────────────────────────────────────────────── */ .shapka-obertka{ border-bottom:1px solid var(--liniya); background:rgba(255,255,255,.93); backdrop-filter:blur(10px); position:sticky;top:0;z-index:20; } .shapka{ max-width:var(--maxw);margin:0 auto;padding:16px 24px; display:flex;align-items:center;justify-content:space-between;gap:16px; } /* Знак в шапке — квадратный знак + слово шрифтом (решение владельца 19.08, реестр 4а.3): «Ц» с галстуком держит узнаваемость на любой ширине, а слово набирается Unbounded и не мельчит на телефоне. На тёмных страницах знак подменяется светлым файлом в разметке: вариант 12 набран графитом и на графите пропадает целиком. */ /* Цвет задаётся на самой ссылке, а не на вложенном span: пока текста внутри не было, ссылка молча несла браузерный синий — стоит убрать span, и знак станет синим. Приёмка контраста мерит именно ссылку и этот разрыв поймала. */ .znak{ display:inline-flex;align-items:center;gap:10px;text-decoration:none;line-height:0; color:var(--grafit); } .znak img{display:block;height:35px;width:auto} .znak span{font:700 21px/1 var(--font-head);letter-spacing:.02em;color:inherit} .tema-temnaya .znak{color:var(--na-temnom)} .menyu{display:flex;gap:4px;align-items:center} .menyu a{ font:600 14px/1 var(--font-body);color:var(--grafit-2);text-decoration:none; padding:10px 14px;min-height:44px;display:inline-flex;align-items:center; transition:color .15s; } .menyu a:hover{color:var(--grafit)} .menyu a[aria-current="page"]{background:var(--grafit);color:#fff} /* Кнопка возврата в шапке ВНУТРЕННИХ страниц. На главной её нет: там окно заказа перед глазами. Ведёт на #zakaz главной — то же самое окно, а не второй вход (решение владельца 19.08: с внутренних страниц не было выхода назад). */ .knopka-shapka{padding:11px 20px;min-height:42px;font-size:14px;flex:0 0 auto} /* ── Каркас страницы ────────────────────────────────────────────────────── */ [id]{scroll-margin-top:96px} /* требование 1.5: якорь не прячется под липкой шапкой */ .polotno{flex:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:56px 24px 72px} .podval{ border-top:1px solid var(--liniya);margin-top:auto; font-size:13px;color:var(--grafit-dim); } .podval-ryad{ max-width:var(--maxw);margin:0 auto;padding:20px 24px; display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; } .podval a{color:var(--grafit-2)} /* ── Типографика ────────────────────────────────────────────────────────── */ h1,h2,h3{font-family:var(--font-head);font-weight:800;letter-spacing:-.02em;margin:0} h1{font-size:clamp(30px,5vw,56px);line-height:1.04} h2{font-size:clamp(23px,3vw,34px);line-height:1.12;margin-bottom:16px} h3{font-size:18px;font-weight:600;line-height:1.25;margin-bottom:8px} p{margin:0 0 14px} .nadzag{ font:700 12px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase; color:var(--krasnyi-tmn);margin:0 0 14px; } .krasnym{color:var(--krasnyi)} .podzag{font-size:17px;color:var(--grafit-2);max-width:62ch;margin:18px 0 0} .snoska{font-size:13px;color:var(--grafit-dim)} /* ── Кнопки: срез угла, один акцент на экран ────────────────────────────── */ .knopka{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font:700 15px/1 var(--font-body);text-decoration:none;cursor:pointer; padding:16px 26px;min-height:48px;border:0; clip-path:polygon(0 0,100% 0,100% calc(100% - var(--srez)),calc(100% - var(--srez)) 100%,0 100%); transition:transform .12s ease, background .15s; } .knopka:active{transform:translateY(1px)} .knopka-glavnaya{background:var(--krasnyi-zal);color:#fff} .knopka-glavnaya:hover{background:#D01418} .knopka-vtoraya{ background:transparent;color:var(--grafit); box-shadow:inset 0 0 0 2px var(--grafit); clip-path:none; } .knopka-vtoraya:hover{background:var(--bumaga-2)} /* ── Карточка ───────────────────────────────────────────────────────────── */ .kartochka{ background:var(--bumaga);border:1px solid var(--liniya); padding:24px; clip-path:polygon(0 0,100% 0,100% calc(100% - var(--srez)),calc(100% - var(--srez)) 100%,0 100%); } .setka{display:grid;gap:16px} .setka-2{grid-template-columns:repeat(2,minmax(0,1fr))} .setka-3{grid-template-columns:repeat(3,minmax(0,1fr))} /* ── Окно заказа (первый экран главной) ─────────────────────────────────── */ .okno{ display:flex;border:2px solid var(--grafit);background:var(--bumaga); margin:24px 0 0; } .okno textarea{ flex:1;border:0;outline:0;resize:none;background:transparent; font:400 17px/1.5 var(--font-body);color:var(--grafit); padding:20px 22px;min-height:132px; } .okno textarea::placeholder{color:var(--grafit-dim)} .okno-diktovka{ width:112px;flex:0 0 112px;background:var(--krasnyi-zal);color:#fff;border:0;cursor:pointer; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; font:700 11px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase; clip-path:polygon(0 0,100% 0,100% calc(100% - var(--srez)),calc(100% - var(--srez)) 100%,0 100%); } .podskazki{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .podskazki button{ font:600 13px/1 var(--font-body);color:var(--grafit-2);cursor:pointer; background:var(--bumaga-2);border:1px solid var(--liniya); padding:10px 14px;min-height:40px; } .podskazki button:hover{border-color:var(--grafit-2);color:var(--grafit)} /* ── Лента работ ────────────────────────────────────────────────────────── */ /* Колонка задаётся шириной, а не числом. 🔑 Пропорция 2,4:1 — НЕ выбор дизайнера, а замер: 19 из 23 наших работ сняты широким кадром (960×400 и близкие). Плитка 9:16 из первой редакции обрезала бы каждый кадр до середины. Формат ленты идёт от материала, а не наоборот. */ .lenta{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(330px,1fr))} .plitka{ position:relative;aspect-ratio:2.4;background:var(--grafit);overflow:hidden; border:0;padding:0;cursor:pointer;display:block; } /* Обложки маркетплейсов — единственный вертикальный формат, 3:4 (требование площадок) */ .plitka-vert{aspect-ratio:3/4} /* Полноэкранный просмотр. Окно держит пропорцию ролика, а не 16:9: обложки вертикальные 3:4 и в широком окне играли бы марочкой в чёрном поле (требование 2.12 реестра). */ .polnyj-ekran{ position:fixed;inset:0;z-index:60;background:rgba(24,24,30,.94); display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out; } .polnyj-ekran video{max-width:100%;max-height:100%;width:auto;height:auto;display:block} .plitka img,.plitka video{width:100%;height:100%;object-fit:cover;display:block} .plitka-podpis{ position:absolute;left:0;right:0;bottom:0;padding:10px 12px; background:linear-gradient(transparent,rgba(30,30,38,.86)); color:#fff;font:600 13px/1.25 var(--font-body);text-align:left; } /* ── Тёмный режим — только страница работ (4а.6) ────────────────────────── */ body.tema-temnaya{ background:var(--grafit);color:var(--na-temnom); background-image: linear-gradient(90deg,transparent 39px,rgba(255,255,255,.035) 40px,transparent 41px), linear-gradient(0deg,transparent 39px,rgba(255,255,255,.035) 40px,transparent 41px); } .tema-temnaya .shapka-obertka{background:rgba(55,55,66,.92);border-bottom-color:var(--liniya-temn)} .tema-temnaya .menyu a{color:var(--na-temnom-dim)} /* Кнопка в шапке лежит ВНУТРИ nav.menyu, и правило выше перебивало ей белый текст: на тёмной странице «К заказу» выходило серым по красному, контраст 2,06 при норме 4,5 (замер 19.08). Возвращаем белый явно. */ .tema-temnaya .menyu a.knopka-glavnaya{color:#fff} .tema-temnaya .menyu a:hover{color:var(--na-temnom)} .tema-temnaya .menyu a[aria-current="page"]{background:var(--na-temnom);color:var(--grafit)} @media (max-width:520px){.tema-temnaya .menyu{border-top-color:var(--liniya-temn)}} .tema-temnaya .podzag{color:var(--na-temnom-dim)} .tema-temnaya .snoska{color:var(--na-temnom-dim)} /* ⚠️ Здесь стояло «красный на графите даёт 5,0» — цифра была взята из головы, замер показал 2,86. Надзаголовок на тёмном берёт светлый оттенок (4,66). */ .tema-temnaya .nadzag{color:var(--krasnyi-svet)} .tema-temnaya .kartochka{background:#31313B;border-color:var(--liniya-temn)} .tema-temnaya .plitka{background:#2B2B34} .tema-temnaya .podval{border-top-color:var(--liniya-temn);color:var(--na-temnom-dim)} .tema-temnaya .podval a{color:var(--na-temnom-dim)} .tema-temnaya .knopka-vtoraya{color:var(--na-temnom);box-shadow:inset 0 0 0 2px var(--na-temnom)} .tema-temnaya .knopka-vtoraya:hover{background:#41414D} /* ── Лента работ в бою ────────────────────────────────────────────────────── Разметку рисует js/works.js — ЕДИНСТВЕННЫЙ источник описи (требование 5.6). Здесь только вид; классы .work-* приходят оттуда, менять их нельзя. */ .work-item{margin:0} .work{ position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer; aspect-ratio:2.4;background:var(--grafit);overflow:hidden; } .work-poster,.work-loop{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; } .work-loop{opacity:0;transition:opacity .2s} .work:hover .work-loop{opacity:1} .work-meta{ position:absolute;left:0;right:0;bottom:0;padding:10px 12px;text-align:left; background:linear-gradient(transparent,rgba(30,30,38,.86));color:#fff; font:600 13px/1.3 var(--font-body);display:block; } .work-meta i{display:block;font-style:normal;font-weight:400;font-size:12px;opacity:.82} /* ── Подвал с контактами ────────────────────────────────────────────────── */ .podval-znak img{width:104px;height:auto;display:block;opacity:.9} .podval-ssylki{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center} .podval-ssylki a{ color:var(--grafit-2);text-decoration:none;font-size:13px; min-height:44px;display:inline-flex;align-items:center; /* зона нажатия 44px, WCAG 2.5.8 */ } .podval-ssylki a:hover{color:var(--grafit);text-decoration:underline} .tema-temnaya .podval-ssylki a{color:var(--na-temnom-dim)} .tema-temnaya .podval-ssylki a:hover{color:var(--na-temnom)} /* ── Телефон ────────────────────────────────────────────────────────────── */ @media (max-width:900px){ .setka-3,.setka-2{grid-template-columns:1fr} .lenta{grid-template-columns:1fr} .polotno{padding:36px 18px 56px} } @media (max-width:520px){ /* Шапка в две строки. В одну не помещается: 19.08 снимок телефона показал, что четвёртый пункт «О нас» уезжал за край — меню прокручивалось, но человек об этом не знает. Спрятанный пункт меню = пункта нет. */ .shapka{padding:10px 16px 0;gap:8px;flex-direction:row;flex-wrap:wrap;align-items:center} .znak{flex:0 0 auto;order:0} .znak img{height:30px} .znak span{font-size:18px} /* Порядок задаётся order, а не разметкой: кнопка стоит в первой строке рядом со знаком, меню — второй. Без order кнопка уезжала на ТРЕТЬЮ строку и шапка съедала 147px первого экрана (замер 19.08). */ .knopka-shapka{order:1;margin-left:auto;padding:9px 16px;min-height:40px;font-size:13.5px} .menyu{order:2;flex-basis:100%} .menyu{gap:0;justify-content:space-between;border-top:1px solid var(--liniya);margin-top:8px} .menyu a{padding:11px 4px;font-size:12.5px;white-space:nowrap;min-height:42px} .okno{flex-direction:column} .okno textarea{min-height:108px;padding:16px 14px;font-size:16px} .okno-diktovka{width:100%;flex:0 0 auto;flex-direction:row;gap:10px;padding:13px;min-height:50px} .lenta{grid-template-columns:1fr} } /* ── Страница наряда (одно окно, Фаза 1) ──────────────────────────────────── Свою палитру здесь не заводим: цвет и шрифт берутся из css/palitra.css, как на всех страницах темы. Модуль подтверждения почты (contact-verify.js) один на самообслугу и наряд — здесь его вид в тёме v3. */ .naryad{max-width:820px} .naryad-shapka{display:flex;justify-content:space-between;align-items:flex-start; gap:24px;flex-wrap:wrap;margin-top:8px} .naryad-cena-blok{text-align:right;flex:0 0 auto} .naryad-cena{font:800 38px/1 var(--font-head);color:var(--grafit);letter-spacing:-.02em; white-space:nowrap} .naryad-videnie{margin-top:24px} .naryad-videnie p:last-child{margin-bottom:0;font-size:16px;line-height:1.6} .naryad-slova{margin-top:24px} .naryad-slova p:last-child{margin-bottom:0;color:var(--grafit-2)} .naryad-zagolovok{margin-top:36px} .naryad-deistviya{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px;align-items:center} .naryad-deistviya .knopka{margin-left:0} /* Ошибка красным: производный оттенок, не фирменный. Замер 19.08 — фирменный красный на белом даёт 4,10 при норме 4,5 для обычного текста. */ .naryad-oshibka{margin-top:16px;color:var(--krasnyi-tmn);font-size:14px;font-weight:600} .sostav{margin-top:16px;border:1px solid var(--liniya);border-radius:var(--radius); background:var(--bumaga);overflow:hidden} .sostav-stroka{padding:14px 18px;border-bottom:1px solid var(--liniya)} .sostav-stroka:last-child{border-bottom:0} .sostav-stroka.otkryta{background:var(--bumaga-2)} .sostav-verh{display:flex;gap:14px;align-items:baseline} .sostav-k{flex:0 0 148px;color:var(--grafit-2);font-size:14px} .sostav-v{flex:1;font-size:15.5px;color:var(--grafit);min-width:0;overflow-wrap:anywhere} .sostav-v i{color:var(--grafit-dim);font-style:normal} .sostav-menyat{flex:0 0 auto;border:0;background:none;color:var(--grafit-2);font:inherit; font-size:13.5px;text-decoration:underline;cursor:pointer;padding:4px;min-height:24px} .sostav-menyat:hover{color:var(--grafit)} .metka{margin-left:8px;padding:2px 8px;border-radius:99px;background:var(--bumaga-2); border:1px solid var(--liniya);color:var(--grafit-2);font-size:12px;white-space:nowrap} .varianty{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding-left:162px} .variant{padding:9px 14px;border:1px solid var(--liniya);border-radius:99px; background:var(--bumaga);color:var(--grafit-2);font:inherit;font-size:14px; cursor:pointer;min-height:38px} .variant:hover{border-color:var(--grafit-2);color:var(--grafit)} .variant.vybran{background:var(--grafit);border-color:var(--grafit);color:#fff} .pole{flex:1;min-width:220px;padding:10px 12px;border:1px solid var(--liniya); border-radius:10px;font:inherit;font-size:15px;color:var(--grafit);background:var(--bumaga)} .pole:focus{outline:2px solid var(--grafit-2);outline-offset:1px} .pole-podpis{display:block;font-size:13px;color:var(--grafit-2);margin-bottom:6px} .knopka-melkaya{padding:9px 16px;min-height:38px;font-size:14px} .soglasie{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:14px; line-height:1.5;color:var(--grafit-2)} .soglasie input{margin-top:3px;width:18px;height:18px;flex:0 0 auto} .soglasie a{color:var(--krasnyi-tmn)} .naryad-pochta{margin-top:16px} .contact-why{font-size:14px;color:var(--grafit-2);line-height:1.5;margin:0 0 10px} .contact-btn{border:1px solid var(--grafit);background:var(--bumaga);color:var(--grafit); font:inherit;font-size:14px;padding:10px 18px;border-radius:99px;cursor:pointer;min-height:42px} .contact-btn:hover{background:var(--bumaga-2)} .contact-btn:disabled{opacity:.5;cursor:default} .contact-code{display:flex;gap:8px;align-items:center;margin:10px 0} .contact-code input{flex:1;padding:10px 12px;border:1px solid var(--liniya);border-radius:10px; font:inherit;font-size:15px;letter-spacing:.18em;text-align:center} .contact-note{font-size:13.5px;color:var(--grafit-2);margin:10px 0 0;line-height:1.45} .contact-note.bad{color:var(--krasnyi-tmn)} .contact-known{font-size:15px;margin:8px 0} .contact-link{border:0;background:none;color:var(--grafit-2);font:inherit;font-size:14px; text-decoration:underline;cursor:pointer;padding:4px;min-height:24px} .naryad-pochta input[type=email]{width:100%;max-width:360px;padding:10px 12px; border:1px solid var(--liniya);border-radius:10px;font:inherit;font-size:15px; margin-bottom:10px;display:block} @media (max-width:640px){ .naryad-shapka{gap:12px} .naryad-cena-blok{text-align:left} .naryad-cena{font-size:30px} .sostav-verh{flex-wrap:wrap;gap:6px 12px} .sostav-k{flex:0 0 100%} .varianty{padding-left:0} } /* Строка наряда, значение которой ещё собирается: видно, что место занято, но пусто — это не спиннер, а тот же каркас, что через секунду наполнится. */ .sostav-v.zhdem i{color:var(--grafit-dim);animation:nrcx-zhdem 1.2s ease-in-out infinite} @keyframes nrcx-zhdem{0%,100%{opacity:.45}50%{opacity:.9}}