/* ========================================================================== Сайт кандидата Александра Бердникова, округ 208. Фирменный стиль партии «Новые люди»: бирюзовый 0AD1C9 и шрифт New People. Сборки нет: один файл, переменные, никаких зависимостей. Правила формы, соблюдаются по всей странице: кнопки - пилюля (radius 999px) поверхности - 22px поля ввода - 14px Акцент один: бирюзовый. Коралловый появляется ровно в одном месте, на дате выборов, и больше нигде. ========================================================================== */ /* --------------------------------------------------------------- шрифты */ @font-face{font-family:"New People";src:url("/fonts/NewPeople-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"New People";src:url("/fonts/NewPeople-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"New People";src:url("/fonts/NewPeople-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"New People";src:url("/fonts/NewPeople-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"New People";src:url("/fonts/NewPeople-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap} /* --------------------------------------------------------------- токены */ :root{ --paper:#F4F7F7; --surface:#FFFFFF; --surface-2:#E9F5F4; --ink:#101817; --ink-2:#3A4544; --muted:#5C6C6B; --teal:#0AD1C9; --teal-deep:#0BA8A2; --teal-press:#099A95; /* Отдельный цвет для ССЫЛОК на светлом. Фирменный бирюзовый на белом даёт 2.9:1 и для текста не годится, здесь 5.9:1 на белом и 4.9:1 на мятном. Заливки кнопок при этом остаются фирменными. */ --teal-link:#06706C; --on-teal:#06231F; --mint:#D6EEEC; /* Фирменный коралл партии (#EF4056) на светлом фоне даёт 3.2:1 и не проходит по контрасту для мелкого текста. Затемнён до 5.3:1. */ --coral:#C81E36; --line:rgba(16,24,23,.12); --line-strong:rgba(16,24,23,.22); /* Теней на странице нет намеренно. Мягкая тень под скруглённой белой коробкой это самый узнаваемый признак шаблонного лендинга. Разделяем линиями и цветом, а не подъёмом над плоскостью. */ --r-surface:22px; --r-input:14px; --wrap:1240px; /* Сильный ease-out для входа и выхода. */ --ease:cubic-bezier(.16,1,.3,1); /* Для смены цвета при наведении ease-out не нужен: ничего не появляется и не уходит, меняется только заливка. */ --ease-hover:ease; /* Высота липкой шапки. На неё завязан отступ якорей: без него переход по «Буду голосовать» прятал заголовок секции под шапкой, и то же самое происходило с фокусом при ходьбе по табу. */ --nav-h:70px; } @media (prefers-color-scheme:dark){ :root{ --paper:#0C1211; --surface:#141D1C; --surface-2:#182423; --ink:#E9F1F0; --ink-2:#C0CFCD; --muted:#8FA2A0; --teal:#19DED6; --teal-deep:#12C4BD; --teal-press:#0FAFA9; --teal-link:#19DED6; --on-teal:#04201D; --mint:#16302E; --coral:#FF6274; --line:rgba(233,241,240,.14); --line-strong:rgba(233,241,240,.26); } } /* --------------------------------------------------------------- основа */ *{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; background:var(--paper); color:var(--ink); font-family:"New People",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* height:auto обязателен. Без него атрибут height="600" из разметки побеждает вычисленную ширину, и картинка сплющивается. */ img{max-width:100%;display:block;height:auto} a{color:inherit} /* Страховка на весь файл: любой явный display перебивает атрибут hidden, и скрытый блок молча показывается. */ [hidden]{display:none !important} /* Якоря останавливаются ниже липкой шапки. Тот же отступ спасает клавиатурный фокус: браузер подкручивает страницу к элементу, и без запаса элемент оказывается под шапкой. */ :where(section[id], [id]:target){scroll-margin-top:calc(var(--nav-h) + 16px)} :where(a,button,summary,input,label){touch-action:manipulation} .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px} .wrap--narrow{max-width:880px} /* fixed, а не absolute: absolute привязывает ссылку к верху ДОКУМЕНТА, и при табе с прокрученной страницы она всплывала за экраном. z-index выше липкой шапки, иначе шапка её накроет. */ .skip{ position:fixed;left:-9999px;top:0;z-index:100; background:var(--teal);color:var(--on-teal); padding:12px 20px;border-radius:0 0 var(--r-input) 0;font-weight:600; } .skip:focus{left:0} /* Перечисление тегов уже подводило: плеер попадает в обход табом, но в список не входил и оставался без кольца фокуса. Ловим всё, что вообще может получить фокус. */ :where(a[href],button,summary,input,select,textarea,video,audio,[tabindex]):focus-visible{ outline:3px solid var(--teal-deep); outline-offset:3px; border-radius:6px; } /* --------------------------------------------------------------- кнопки */ .btn{ display:inline-flex;align-items:center;justify-content:center; gap:10px;white-space:nowrap; padding:17px 30px; border:1px solid transparent;border-radius:999px; font:inherit;font-weight:700;font-size:17px;line-height:1; letter-spacing:-.01em; cursor:pointer;text-decoration:none; transition:background-color .2s var(--ease-hover),color .2s var(--ease-hover), border-color .2s var(--ease-hover),transform .13s var(--ease); } .btn--primary{background:var(--teal);color:var(--on-teal)} .btn--primary:active{background:var(--teal-press);transform:scale(.97)} .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)} .btn--ghost:active{transform:scale(.97)} /* Даже уменьшенная кнопка держит 44px по высоте: это минимум площади нажатия на телефоне, а «Буду голосовать» в шапке главная кнопка сайта. */ .btn--sm{padding:12px 22px;font-size:15px;min-height:44px} /* Кнопка во всю ширину переносит текст. С nowrap длинная подпись «Буду голосовать за Бердникова» требовала 321px и распирала колонку: на экране 320px страница уезжала вбок. */ .btn--wide{width:100%;white-space:normal;text-wrap:balance;line-height:1.25} .btn[disabled]{opacity:.55;cursor:progress} /* Отметился: не «выключено», а «сделано». Полупрозрачная кнопка читалась как зависшая загрузка. */ .btn--done,.btn--done[disabled]{ background:var(--mint);color:var(--ink); border-color:transparent;opacity:1;cursor:default; } /* --------------------------------------------------------------- шапка */ /* Фон непрозрачный намеренно. Полупрозрачная шапка с backdrop-filter рвала отрисовку при прокрутке: липкий слой с размытием заставляет браузер перерисовывать всё под собой каждый кадр. На слабых телефонах это как раз та полоса мусора вместо страницы. */ .nav{ position:sticky;top:0;z-index:50; background:var(--paper); border-bottom:1px solid var(--line); } .nav__inner{ height:70px;display:flex;align-items:center;gap:28px; } .nav__brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex:0 0 auto;min-height:44px} .nav__logo{width:120px;height:auto} @media (prefers-color-scheme:dark){ .nav__logo{content:url("/img/nl-logo-light.webp")} } .nav__name{ font-weight:900;font-size:19px;letter-spacing:-.02em; padding-left:14px;border-left:1px solid var(--line-strong); } .nav__links{display:flex;gap:26px;margin-left:auto;font-size:16px;font-weight:500} /* Высота 44px: меню видно от 1024px, а это уже планшеты, где по ссылке попадают пальцем. Высота строки текста для пальца мала. */ .nav__links a{ position:relative;text-decoration:none;color:var(--ink-2); display:inline-flex;align-items:center;min-height:44px; transition:color .2s var(--ease-hover); } /* Текущий раздел: цвет плюс подчёркивание. Одним цветом отмечать нельзя, иначе тем, кто не различает бирюзовый, метка не видна вовсе. */ .nav__links a.is-current{color:var(--ink);font-weight:700} .nav__links a.is-current::after{ content:"";position:absolute;left:0;right:0;bottom:6px; height:2px;border-radius:2px;background:var(--teal-deep); } .nav__cta{flex:0 0 auto} @media (max-width:1023px){ :root{--nav-h:64px} .nav__links{display:none} .nav__inner{height:64px;gap:16px;justify-content:space-between} .nav__cta{margin-left:auto} } @media (max-width:519px){ .nav__name{display:none} .nav__logo{width:104px} /* Уже, но не ниже: высота нажатия остаётся 44px. */ .nav__cta{padding:11px 15px;font-size:14px} } /* --------------------------------------------------------------- герой */ /* Низ секции без отступа: снимок должен упираться в бирюзовую полосу. Отступ снизу остаётся только у текстовой колонки. */ /* overflow-x:clip обязателен: мятный круг за фигурой намеренно шире колонки и на узком экране вылезал за поля страницы. clip, а не hidden, чтобы не создавать лишний контейнер прокрутки. */ /* Герой стоит на собственном фоне. Пока он делил серую подложку со следующей секцией, вырезка кандидата обрывалась посреди пустого поля: срез по пояс читался как обрезанная фотография, а не как приём. Теперь низ вырезки совпадает с границей белого поля, и срез выглядит намеренным. Заодно у страницы появляется первая глава. */ .hero{padding:72px 0 0;overflow-x:clip;background:var(--surface)} .hero__grid{ display:grid;grid-template-columns:1.12fr .88fr; gap:48px;align-items:end; } .eyebrow{ margin:0 0 22px;font-size:14px;font-weight:700; letter-spacing:.14em;text-transform:uppercase; color:var(--coral); } /* Кегль подобран так, чтобы заголовок ложился ровно в две строки на десктопе. Меняете текст, проверьте перенос заново. */ .hero__title{ margin:0; font-size:clamp(38px,4.2vw,58px); font-weight:900;line-height:1.04;letter-spacing:-.035em; text-wrap:balance; } .hero__lead{ margin:26px 0 0;max-width:46ch; font-size:clamp(17px,1.5vw,20px);color:var(--ink-2); } .hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px} .hero__text{padding-bottom:84px} /* Исходная фотография обрезана по грудь, поясной кадр из неё не сделать. Поэтому не запираем её в фигуру: кандидат стоит НА бирюзовой полосе счётчика, нижний край снимка совпадает с границей секций. Так срез не читается как обрезка, человек выглядит стоящим за полосой. За ним мятный круг, он только фон и ничего не режет. */ .portrait{ margin:0 auto;position:relative;isolation:isolate;align-self:end; display:flex;justify-content:center; width:100%;max-width:410px; } /* Мятный круг за верхней частью фигуры. Он только фон: ничего не режет и не обрамляет, поэтому снимок не выглядит вставленным в рамку. */ .portrait::before{ content:"";position:absolute;z-index:-1; left:-14%;right:-14%;top:-2%;aspect-ratio:1; border-radius:50%;background:var(--mint); } .portrait img{width:100%;position:relative;display:block} @media (max-width:899px){ .hero{padding:44px 0 0} .hero__text{padding-bottom:0} .hero__grid{grid-template-columns:1fr;gap:36px} .portrait{max-width:310px;margin:0 auto} } /* --------------------------------------------------------------- счётчик */ .pledge{background:var(--teal);color:var(--on-teal);padding:60px 0} .pledge__inner{ display:grid;grid-template-columns:1fr minmax(300px,420px); gap:56px;align-items:center; } .pledge__title{ margin:0;font-size:clamp(28px,3.6vw,44px); font-weight:900;line-height:1.08;letter-spacing:-.03em; /* Ограничение ширины было 15ch, и «Пойдёте голосовать за Бердникова?» ломалось на три строки. Заголовок должен переноситься потому, что он длинный, а не потому, что мы обрезали ему место. */ max-width:20ch;text-wrap:balance; } /* Без opacity: приглушённый текст на бирюзовом выглядел выцветшим, а это важная строчка про то, что мы не собираем персональные данные. */ .pledge__note{margin:16px 0 0;max-width:46ch;font-size:16px;color:var(--on-teal)} /* Белый блок на бирюзовой полосе. Отступы и скругление вернулись: при чистке карточек я снял их заодно отсюда, и кнопка упиралась во все четыре края, а её бирюза сливалась с полосой. Тут белое на бирюзовом это контраст фигуры, а не «карточка с тенью». */ .pledge__panel{ min-width:0; background:var(--surface);color:var(--ink); border-radius:var(--r-surface);padding:28px; display:grid;gap:18px; } .counter{text-align:center;padding:10px 0 4px} .counter__num{ margin:0;font-size:clamp(52px,7vw,76px);font-weight:900; line-height:1;letter-spacing:-.045em; font-variant-numeric:tabular-nums;color:var(--teal-deep); } .counter__label{margin:8px 0 0;font-size:15px;color:var(--muted)} .counter[data-state="loading"] .counter__num{ color:var(--line-strong); background:linear-gradient(90deg,var(--surface-2),var(--mint),var(--surface-2)); background-size:200% 100%; border-radius:12px; animation:shimmer 1.3s linear infinite; min-height:56px; } @keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}} .counter[data-state="empty"] .counter__num{color:var(--ink)} .counter[data-state="off"]{display:none} /* [hidden] прячет через display:none в таблице браузера, и любой явный display его перебивает. Без этой строки блок «Спасибо» показывался до нажатия кнопки. */ .pledge__after{display:grid;gap:14px} .pledge__after[hidden]{display:none} .pledge__thanks{margin:0;font-size:15px;color:var(--muted);text-align:center} @media (max-width:899px){ .pledge{padding:44px 0} .pledge__inner{grid-template-columns:1fr;gap:28px} } @media (max-width:399px){ .pledge__panel{padding:22px 18px} } /* --------------------------------------------------------------- секции */ /* Ритм по иерархии, а не одинаковыми плитами: содержательные разделы дышат шире служебных. Разница небольшая и намеренная. */ .section{padding:88px 0} #video, #kontakty{padding-top:72px;padding-bottom:72px} .section--soft{background:var(--surface-2)} /* Тёмная полоса. Вся страница была в одном холодном оттенке: даже «белый» зеленоватый. Ни один блок не доминировал, и десять экранов подряд читались как одна длинная заливка. Один тёмный участок даёт вес и делит страницу на «до» и «после». Приём применяется РОВНО ОДИН РАЗ: два таких участка снова превратятся в чередование без смысла. */ .section--dark{ background:#0C1211; color:#E9F1F0; --ink:#E9F1F0; --ink-2:#C0CFCD; --muted:#8FA2A0; --surface:#18211F; --line:rgba(233,241,240,.14); --line-strong:rgba(233,241,240,.28); --teal-link:#19DED6; } .section__title{ margin:0;font-size:clamp(30px,4vw,50px); font-weight:900;line-height:1.06;letter-spacing:-.032em; /* Было 16ch: «Что сделаю в районе» и «Написать напрямую» рвались надвое на пустом месте, и секции переставали выглядеть выровненными. */ max-width:22ch;text-wrap:balance; } .section__lead{ margin:20px 0 0;max-width:62ch; font-size:clamp(16px,1.4vw,19px);color:var(--ink-2); } /* Разный ритм у секций. Пять блоков подряд начинались одинаково: заголовок слева, серая подводка под ним. Здесь заголовок и подводка стоят в одну строку, поэтому глаз не считывает повтор шаблона. */ .section__head--row{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px 56px;align-items:end; } .section__head--row .section__title{max-width:18ch} /* Тот же ритм, что и у «Где голосовать»: линейка над всей секцией. */ .section__head--row{padding-top:28px;border-top:2px solid var(--ink)} .section--dark .section__head--row{border-top-color:var(--paper)} .section__head--row .section__lead{margin:0;padding-bottom:.35em} @media (max-width:899px){ .section{padding:60px 0} .section__head--row{grid-template-columns:1fr;gap:16px} .section__head--row .section__lead{padding-bottom:0} } /* -------------------------------------------------------------- программа */ /* Не карточки. Пять одинаковых плиток с номерками это ровно тот вид, который читается как сгенерированный набор. Здесь программа набрана как перечень тезисов: крупный заголовок, короткое пояснение справа, волосяная линейка между пунктами. Нумерацию рисует счётчик списка. */ .plan{ list-style:none;margin:56px 0 0;padding:0; counter-reset:plan; border-top:1px solid var(--line-strong); } .plan__item{ counter-increment:plan; display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr); gap:8px 48px;align-items:start; padding:34px 0; border-bottom:1px solid var(--line); } .plan__item::before{ content:counter(plan,decimal-leading-zero); font-size:15px;font-weight:900;letter-spacing:.06em; color:var(--teal-link);font-variant-numeric:tabular-nums; padding-top:.5em;min-width:2.4em; } .plan__title{ margin:0;font-size:clamp(24px,2.4vw,34px); font-weight:900;letter-spacing:-.03em;line-height:1.1; text-wrap:balance; } .plan__text{margin:0;font-size:17px;color:var(--ink-2);max-width:46ch;padding-top:.35em} /* Наведение подсвечивает строку целиком, чтобы перечень не был мёртвым. */ .plan__item{transition:background-color .2s var(--ease-hover)} @media (max-width:899px){ .plan__item{ grid-template-columns:auto minmax(0,1fr); gap:6px 20px;padding:26px 0; } .plan__text{grid-column:2;max-width:none;font-size:16px} } /* --------------------------------------------------------------- законы */ .laws{margin-top:48px;display:grid;gap:0;border-top:1px solid var(--line)} .law{border-bottom:1px solid var(--line)} .law__head{ display:grid;grid-template-columns:1fr auto; align-items:center;gap:8px 20px; padding:28px 0;cursor:pointer;list-style:none; } .law__head::-webkit-details-marker{display:none} /* Ячейки расставлены явно: иначе кружок занимает первую клетку и выдавливает заголовок в узкую колонку справа. */ .law__name{ grid-column:1;grid-row:1; font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.2; } .law__hint{ grid-column:1;grid-row:2;font-size:15px;color:var(--muted);max-width:56ch; } .law__mark{ grid-column:2;grid-row:1 / span 2;align-self:center; width:34px;height:34px;border-radius:999px; border:1px solid var(--line-strong); position:relative; transition:background-color .2s var(--ease-hover),border-color .2s var(--ease-hover); } .law__mark::before,.law__mark::after{ content:"";position:absolute;left:50%;top:50%; width:13px;height:2px;border-radius:2px;background:var(--ink); transform:translate(-50%,-50%); transition:transform .25s var(--ease),opacity .2s var(--ease); } .law__mark::after{transform:translate(-50%,-50%) rotate(90deg)} .law[open] .law__mark{background:var(--teal);border-color:transparent} .law[open] .law__mark::before,.law[open] .law__mark::after{background:var(--on-teal)} .law[open] .law__mark::after{opacity:0;transform:translate(-50%,-50%) rotate(0)} .law__body{padding:0 0 30px;max-width:68ch;display:grid;gap:14px} .law__body p{margin:0;color:var(--ink-2)} @media (max-width:659px){ .law__head{padding:22px 0} .law__name{font-size:18px} .law__body{padding:0 0 24px} } /* --------------------------------------------------------------- участок */ .precinct__grid{ display:grid;grid-template-columns:1fr minmax(320px,460px); gap:48px 64px;align-items:start; padding-top:28px;border-top:2px solid var(--ink); } /* Три дня голосования. Без заливок и скруглений: это не кнопки и не карточки, а число с подписью. Разделяет их линейка сверху. */ .days{ list-style:none;margin:34px 0 0;padding:0; display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 28px;max-width:520px; } .day{ display:grid;gap:2px;padding:14px 0 0; border-top:2px solid var(--ink); } .day__n{font-size:44px;font-weight:900;line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums} /* Месяц стоит в каждой ячейке, а не подписью под рядом. Отдельная строка «сентября 2026 года» висела сбоку и читалась как сноска, хотя это часть самой даты. Год не пишем: выборы одни, и он есть в шапке страницы. */ .day__d{font-size:13px;font-weight:500;color:var(--muted);line-height:1.35} @media (max-width:519px){ .days{gap:0 16px} .day__n{font-size:34px} .day__d{font-size:12px} } /* Полосой под обеими колонками: это справка ко всей секции. Пока список стоял в левой колонке, она была вдвое длиннее правой и секция сидела криво. */ .precinct__districts{margin:56px 0 0;padding-top:24px;border-top:1px solid var(--line-strong)} .precinct__districts-title{margin:0 0 12px;font-size:16px;color:var(--ink-2)} /* Просто перечень в две колонки. Восемь скруглённых плашек с рамками выглядели как фильтры, хотя нажимать там нечего. */ .districts{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(4,1fr);gap:8px 32px; font-size:16px;color:var(--ink-2); } .districts li{padding:3px 0} @media (max-width:899px){.districts{grid-template-columns:repeat(2,1fr)}} @media (max-width:519px){.districts{gap:6px 20px;font-size:15px}} /* Форма стояла на общем фоне секции и визуально ничем не отличалась от абзацев слева. Это главный инструмент страницы: ради него сюда и приходят. Панель даёт ему собственную площадь. */ .finder__panel{ background:var(--mint);border-radius:var(--r-surface); padding:32px; } .finder{display:grid;gap:18px} /* Поле внутри панели должно отходить от её заливки. На светлом это белое на мятном, на тёмном наоборот: почти чёрное на приглушённо-зелёном. Один общий токен, чтобы не держать два набора правил. */ .finder__panel{--field-bg:var(--surface)} @media (prefers-color-scheme:dark){.finder__panel{--field-bg:var(--paper)}} .finder__panel .field__input{background:var(--field-bg);border-color:transparent} .finder__panel .field__input:focus{border-color:var(--teal-deep)} .finder__panel .finder__result{background:var(--field-bg);border-color:transparent} .finder__panel .finder__result--yes{background:var(--field-bg);border:2px solid var(--teal-deep)} @media (max-width:519px){.finder__panel{padding:24px 20px}} .field{display:grid;gap:8px} .field__label{font-size:15px;font-weight:700} .field__input{ width:100%;padding:16px 18px; border:1px solid var(--line-strong);border-radius:var(--r-input); background:var(--paper);color:var(--ink); font:inherit;font-size:17px; transition:border-color .2s var(--ease),background-color .2s var(--ease); } .field__input::placeholder{color:var(--muted);opacity:1} .field__help{margin:0;font-size:14px;color:var(--muted)} .field__error{margin:0;font-size:14px;font-weight:600;color:var(--coral)} .field--invalid .field__input{border-color:var(--coral)} .finder__result:empty{display:none} .finder__result{ border-radius:var(--r-input);padding:20px; background:var(--surface-2);border:1px solid var(--line); display:grid;gap:10px; } .finder__result h3{margin:0;font-size:19px;font-weight:800;letter-spacing:-.02em} .finder__result p{margin:0;font-size:15px;color:var(--ink-2)} .finder__result a{color:var(--teal-link);font-weight:600} .finder__result--yes{background:var(--mint);border-color:transparent} .finder__uik{ font-size:40px;font-weight:900;letter-spacing:-.04em; color:var(--teal-deep);line-height:1;font-variant-numeric:tabular-nums; } @media (max-width:899px){ .precinct__grid{grid-template-columns:1fr;gap:32px} } /* --------------------------------------------------------------- видео */ .rail{ margin-top:40px;display:flex;gap:18px; overflow-x:auto;scroll-snap-type:x mandatory; padding-bottom:10px; scrollbar-width:thin; } .vcard{ flex:0 0 clamp(230px,26vw,280px); scroll-snap-align:start; aspect-ratio:9 / 16; border-radius:var(--r-surface);overflow:hidden; position:relative;text-decoration:none; background:var(--ink);color:#F4F7F7; display:flex;flex-direction:column;justify-content:flex-end; padding:24px;gap:8px; border:1px solid var(--line); transition:transform .25s var(--ease); } .vcard video,.vcard>img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; } .vcard__kicker{ position:relative;font-size:13px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:var(--teal); } .vcard__title{position:relative;font-size:19px;font-weight:800;line-height:1.2;letter-spacing:-.02em} .vcard__go{position:relative;font-size:15px;font-weight:600;opacity:.8} /* Строка, а не панель. Одна ссылка не нуждается в контейнере. */ .vpanel{ margin-top:36px;display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:20px;text-decoration:none; padding:28px 0;border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); } .vpanel__text{display:grid;gap:6px} .vpanel__title{font-size:23px;font-weight:800;letter-spacing:-.02em;transition:color .2s var(--ease-hover)} .vpanel__meta{font-size:15px;color:var(--muted)} /* --------------------------------------------------------------- контакты */ /* По верху, а не по центру: список вырос с двух ссылок до пяти, и заголовок слева уезжал в середину пустой колонки. */ .contacts__grid{ display:grid;grid-template-columns:1fr minmax(320px,480px); gap:64px;align-items:start; } /* Две одинаковые скруглённые коробки рядом читались как набор плиток. Теперь это перечень: строки, разделённые линейкой. Выделен только первый пункт, и выделен цветом текста, а не заливкой. */ .contacts__links{display:grid;border-top:1px solid var(--line-strong)} .link-card{ display:grid;gap:4px;text-decoration:none; padding:22px 0;border-bottom:1px solid var(--line); transition:opacity .2s var(--ease-hover); } .link-card__name{font-size:21px;font-weight:800;letter-spacing:-.02em;transition:color .2s var(--ease-hover)} .link-card__meta{font-size:15px;color:var(--muted)} /* Подзаголовок внутри перечня. Аккаунты округа ведёт штаб, и без подписи их читают как личные каналы кандидата. */ .link-group{ margin:26px 0 0;padding-bottom:10px; font-size:13px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--muted); } .link-card--accent .link-card__name{color:var(--teal-link)} @media (max-width:899px){ .contacts__grid{grid-template-columns:1fr;gap:32px} } /* --------------------------------------------------------------- подвал */ .foot{background:#0C1211;color:#CFDCDA;padding:56px 0 44px} .foot__grid{display:grid;gap:26px} .foot__brand{display:grid;gap:14px;justify-items:start} .foot__brand img{width:140px;height:auto} .foot__name{margin:0;font-size:16px;font-weight:600;color:#F4F7F7;max-width:40ch} .foot__nav{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:15px;margin:0 -10px} /* Ссылки подвала это единственная навигация по разделам на телефоне, поэтому им нужна полноценная площадь нажатия, а не высота строки. */ .foot__nav a{ color:#CFDCDA;text-decoration:none; display:inline-flex;align-items:center; min-height:44px;padding:0 10px; } .foot__imprint{ margin:0;padding-top:24px;border-top:1px solid rgba(244,247,247,.16); font-size:13px;line-height:1.6;color:#8FA2A0;max-width:80ch; } /* --------------------------------------------------------------- появление */ /* ------------------------------------------------------- наведение мышью */ /* Всё наведение собрано здесь и включается только там, где есть настоящий курсор. На тач-экране тап тоже засчитывается как наведение, и состояние залипает: карточка так и остаётся подсвеченной после касания. */ @media (hover:hover) and (pointer:fine){ .btn--primary:hover{background:var(--teal-deep)} .btn--ghost:hover{border-color:var(--ink);background:var(--surface)} .nav__links a:hover{color:var(--ink)} .plan__item:hover{background:var(--surface)} .law__head:hover .law__mark{border-color:var(--ink)} .field__input:hover{border-color:var(--ink-2)} .vcard:hover{transform:translateY(-4px)} .vpanel:hover .vpanel__title{color:var(--teal-link)} .link-card:hover .link-card__name{color:var(--teal-link)} .foot__nav a:hover{color:#fff} } /* ------------------------------------------------ раскрытие инициативы */ /* Без перехода содержимое выскакивало рывком, и раскрытие читалось как сбой. Анимируем только появление: закрытие должно быть мгновенным, там система отвечает пользователю, а не наоборот. */ .law[open] .law__body{animation:lawIn .22s var(--ease)} @keyframes lawIn{ from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} } .reveal{opacity:0;transform:translateY(20px)} .reveal.is-in{ opacity:1;transform:none; /* 420ms: сложные переходы держим в пределах 400-450мс, на 600 появление начинало читаться как задержка загрузки. */ transition:opacity .3s var(--ease),transform .3s var(--ease); } /* Пониженная подвижность это меньше движения, а не мёртвый интерфейс. Убираем сдвиги и масштаб, переходы цвета оставляем: они помогают понять, что кнопка отреагировала. */ @media (prefers-reduced-motion:reduce){ /* .reveal.is-in задаёт переход и весит больше по специфичности, поэтому перекрывать надо ровно тем же селектором. */ .reveal{transform:none} .reveal.is-in{transform:none;transition:opacity .3s var(--ease)} .btn:active,.btn--primary:active,.btn--ghost:active{transform:none} .vcard:hover{transform:none} .law[open] .law__body{animation:lawFade .2s var(--ease)} @keyframes lawFade{from{opacity:0}to{opacity:1}} .counter[data-state="loading"] .counter__num{animation:none} } /* ------------------------------------------------------- подсказки адреса */ /* Свой список вместо datalist: его нельзя перерисовывать под каждое нажатие и он рисует лишнюю стрелку в поле. */ .combo{position:relative} .combo__list{ position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20; margin:0;padding:6px;list-style:none; max-height:264px;overflow-y:auto; background:var(--surface);border:1px solid var(--line-strong); border-radius:var(--r-input); } .combo__item{ padding:11px 12px;border-radius:9px;cursor:pointer; font-size:16px;line-height:1.3; } .combo__item.is-active{background:var(--mint);color:var(--ink)} @media (hover:hover) and (pointer:fine){ .combo__item:hover{background:var(--surface-2)} } .foot__source{ margin:0;padding-top:20px; font-size:13px;line-height:1.6;color:#8FA2A0;max-width:80ch; } .foot__source a{color:#CFDCDA} /* ------------------------------------------------------------------ видео */ /* Плоский прямоугольник без скруглений: на странице, где всё разделено линейками и нет карточек, скруглённое видео было единственным таким элементом и читалось как чужая вставка. Ширина ограничена, чтобы блок не подминал под себя секцию. */ .video{margin:32px 0 0;max-width:960px} .video__player{ width:100%;height:auto;display:block; background:var(--ink); } /* Запасной текст внутри