/* v112 · Contrast II — доводка №111, который автор выбрал. Отличия: код всегда тёмный (class="dark" на body включает вторую тему подсветки), появились отзывы ОБРАЗЦОМ ВЁРСТКИ и форма обратной связи. №111 оставлен рядом нетронутым как точка отсчёта для сравнения. */ :root{--night:#0b0e12;--paper:#fff;--cream:#f6f3ed;--fg:#f2f4f7;--ink:#12151a; --dim-d:#a8b0bc;--dim-l:#5a6270;--acc:#e0a33e;--acc-ink:#8a6212; --rule-d:rgb(255 255 255/.16);--rule-l:rgb(18 21 26/.13); --ui:Commissioner,system-ui,sans-serif;--mono:"Roboto Mono",ui-monospace,monospace} body{background:var(--night);color:var(--fg);font:16px/1.62 var(--ui);font-weight:300} .wrap{max-width:1180px;margin:0 auto;padding:0 28px} /* Чередование задаётся одним атрибутом на секции — ритм страницы виден в разметке. */ section[data-tone="dark"]{background:var(--night);color:var(--fg)} section[data-tone="light"]{background:var(--paper);color:var(--ink)} section[data-tone="cream"]{background:var(--cream);color:var(--ink)} section{padding:74px 0} section[data-tone="dark"] .kick{color:var(--acc)} section[data-tone="light"] .kick,section[data-tone="cream"] .kick{color:var(--acc-ink)} section[data-tone="dark"] .lead{color:var(--dim-d)} section[data-tone="light"] .lead,section[data-tone="cream"] .lead{color:var(--dim-l)} /* Скип-ссылка: до содержимого пять остановок табуляции. Видима только при фокусе — иначе это лишний элемент для всех остальных. */ .skip{position:absolute;left:-9999px;top:0;z-index:60;padding:12px 18px; background:var(--acc);color:var(--ink);font-weight:600;border-radius:0 0 9px 0} .skip:focus{left:0} /* ---- первый экран ---- */ .shot{position:relative;min-height:min(94svh,800px);display:grid;align-items:end;overflow:hidden} .shot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .shot::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgb(11 14 18/.66) 0%,rgb(11 14 18/.24) 32%,rgb(11 14 18/.94) 100%)} .shot>.wrap,.shot>header{position:relative;z-index:2} /* z-index 3, а не 2. У .cap тоже было 2, и при равном слое побеждает тот, кто позже в разметке, — подпись. На высоком экране она прижата к низу и до шапки не достаёт, а на 320×480 заполняет кадр целиком и накрывает её: шапка видна, но нажатия достаются подписи. Не открывался выбор языка, не работали логотип и кнопка. Видно только на настоящем тапе — замер геометрии такое не ловит, нужен elementFromPoint. */ .shot>header{position:absolute;top:0;left:0;right:0;z-index:3} header .wrap{display:flex;align-items:center;height:70px;gap:20px} /* Логотип: «api» цветом текста, «River» — синим. Тем же, которым в блоке кода набраны имена полей, поэтому вывеска и код держатся одной краской. Флагового сочетания здесь нет: рядом стоят белый и синий, а золото живёт на кнопках и внутри слова не встречается. Синий вынесен в переменную: на светлом фоне #58a6ff даёт около 2.4:1, поэтому там подставляется тёмный #1f6feb. */ :root{--logo-blue:#58a6ff} /* 21px при шапке в 70px. Было 16 — всего в 1.28 раза крупнее навигационных ссылок в 12.5px, то есть вывеска не отличалась от пунктов меню. На узком экране 18px: там логотип делит строку с выбором языка и кнопкой, и 21px не оставляет им места. */ .logo{font-weight:600;letter-spacing:-.025em;font-size:21px;color:var(--fg); text-decoration:none;display:inline-flex;align-items:center;min-height:24px} .logo>span{color:var(--logo-blue)} /* Тот же акцент для отдельных слов в прозе (сейчас — "e-invoice" в заголовке героя, home.js) — одна переменная, а не отдельный оттенок. */ .accent{color:var(--logo-blue)} .accent--whole{white-space:nowrap} section[data-tone="light"] .logo,section[data-tone="cream"] .logo{color:var(--ink);--logo-blue:#1f6feb} nav{margin-left:auto;display:flex;gap:22px;font:12.5px var(--mono);color:#dfe4ea} nav a{text-decoration:none}nav a:hover{color:#fff} .mini{padding:8px 15px;border-radius:8px;background:var(--acc);color:var(--ink)!important;font-weight:500} /* ---- выбор языка ---- Список тот же, что в genguru и 7towers. Названия — эндонимы: человек ищет свой язык на своём языке, а не на текущем языке интерфейса; код рядом — для тех, кто ориентируется по «EN/DE». */ .lang{position:relative;flex:none} .lang__btn{display:inline-flex;align-items:center;gap:6px;min-height:28px; padding:6px 10px;border-radius:8px;border:1px solid rgb(255 255 255/.28); background:rgb(255 255 255/.08);color:#fff;font:500 12px var(--mono); cursor:pointer;backdrop-filter:blur(8px)} .lang__btn:hover{border-color:#fff} .lang__btn svg{width:9px;height:9px;transition:transform .15s} .lang__btn[aria-expanded="true"] svg{transform:rotate(180deg)} /* На узком меню прижимается к правому краю ОКНА, а не кнопки: при ширине 170 px и кнопке у отметки 108 оно уходило на 15 px за левый край экрана. */ .lang__menu{position:absolute;top:calc(100% + 8px);right:0;z-index:40; min-width:170px;margin:0;padding:6px;list-style:none;border-radius:12px; background:var(--night);border:1px solid var(--rule-d); box-shadow:0 24px 50px -18px rgb(0 0 0/.7)} .lang__menu[hidden]{display:none} .lang__menu button{display:flex;width:100%;align-items:baseline;gap:9px; min-height:32px;padding:7px 10px;border:0;border-radius:8px;background:transparent; color:var(--fg);font:400 13px var(--ui);text-align:left;cursor:pointer} .lang__menu button:hover{background:rgb(255 255 255/.09)} .lang__menu button[aria-current="true"]{color:var(--acc)} .lang__note{padding:6px 10px 9px;margin:0 0 4px;border-bottom:1px solid var(--rule-d); font:11px var(--mono);color:var(--dim-d);list-style:none} .lang__menu i{font-style:normal;font:500 10.5px var(--mono);letter-spacing:.08em; color:var(--dim-d);margin-left:auto} .lang__menu button[aria-current="true"] i{color:var(--acc)} /* Узкая шапка: три текстовые ссылки не помещаются рядом с логотипом и кнопкой. Убираем ссылки, а призыв оставляем — он здесь важнее навигации. */ @media(max-width:600px){ .lang{position:static} .lang__menu{right:clamp(8px,3vw,20px);left:auto} header .wrap{height:58px;gap:10px} /* Селекторы по голому тегу здесь опасны: