/* ============================================================================
Оформление публичного сайта по образцу gov.uz
Файл подключается ПОСЛЕ site.css и ничего из него не удаляет — только
переопределяет значения. Чтобы откатить оформление, достаточно убрать
одну строку из base_site.html: разметка и поведение не зависят
от этого файла.
Палитра, шрифт и геометрия сняты с живого gov.uz замером, а не подобраны
на глаз: синий #013D8C, прямые углы, отсутствие теней, Montserrat.
========================================================================= */
/* --- Montserrat, пятью подмножествами -------------------------------------
Шрифт лежит у нас, не на CDN. Разбиение по unicode-range означает, что
браузер скачает только нужные диапазоны: для русской страницы —
кириллицу, для узбекской латиницы — латиницу, а не всё сразу. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("fonts/Montserrat-cyrillic-ext.woff2") format("woff2");
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("fonts/Montserrat-cyrillic.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("fonts/Montserrat-vietnamese.woff2") format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("fonts/Montserrat-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("fonts/Montserrat-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* --- Палитра gov.uz --------------------------------------------------------
Имена переменных в site.css исторические (--green, --gold), значения в
них давно не зелёные. Переименовывать не стали: это задело бы полсотни
правил без всякой пользы. Меняем только значения. */
:root{
--green: #013D8C; /* основной синий gov.uz */
--green-dark: #01254F; /* тёмный, для наведения */
--green-deep: #01254F; /* глубокие полосы, шапка, футер */
--gold: #024AA8; /* акцент: кнопки, рубрики новостей */
--blue: #024AA8;
--ink: #000000; /* основной текст — чистый чёрный */
--muted: #707070; /* подписи, даты */
--line: #EEEEEE; /* границы */
--bg: #F1F3F5; /* фон страницы — светло-серый */
--card: #FFFFFF; /* карточки поверх фона — белые */
--soft: #F1F3F5; /* мягкие подложки */
--sans: "Montserrat", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
/* Тёмная тема. Блок обязан идти после :root: у обоих селекторов одинаковый
вес, и побеждает тот, что ниже.
Раньше здесь были только акценты, а поверхности (фон, карточки, текст,
границы) считались «своими» из site.css. Но :root этого файла выше заново
задаёт их светлыми — и перекрывает тёмный блок site.css, потому что
подключается позже. В тёмном режиме оставались белая шапка, светлый фон
и белые карточки с чёрным текстом. Поэтому поверхности повторены здесь. */
[data-theme="dark"]{
--green: #5B9BD5;
--green-dark: #3A6FB5;
--green-deep: #01254F;
--gold: #8FB0DA;
--blue: #8FB0DA;
--ink: #E6EEF7;
--muted: #9DB0C4;
--line: #22344A;
--bg: #0D1721;
--card: #14212E;
--soft: #172636;
}
/* Кнопка «Войти» в тёмной теме — светло-голубая (--gold), и белый текст на
ней почти не читается. Текст делаем тёмно-синим. */
[data-theme="dark"] .loginbtn,
[data-theme="dark"] .loginbtn:hover { color: #01254F; }
/* Пункты главного меню красятся в --green-deep. В тёмной теме эта
переменная остаётся тёмно-синей (на ней держатся фон верхней полосы и
подвала), и текст меню сливался с тёмным фоном меню. Даём цвет текста. */
[data-theme="dark"] .mainnav__item > a:not(:hover) { color: var(--ink); }
/* --- Геометрия: прямые углы ------------------------------------------------
На gov.uz скруглений нет вовсе. Перечисляем ровно те селекторы, где они
заданы в site.css, — так не заденем круглые аватары и переключатели,
у которых border-radius:50% и он там осмыслен. */
.topline__social a,
.langpick select,
.loginbtn,
.sitemapbtn,
.sitesearch,
.submenu,
.submenu li a,
.navmap-toggle__tip,
.navburger,
.foot__social a,
.typoreport,
.typoreport__text,
.typoreport__btn,
.printbtn,
.secside,
.stub__box,
.ncard,
.feat3card,
.feat3card__badge,
.nrows,
.catfilter a,
.pager a,
.pager span,
.article__cover,
.article__body img,
.dir,
.wcard,
.ccard,
.bannercard,
.uzmap__mapwrap,
.uzmap__side,
.uzmap__picker,
.regionchip,
.regionchip__n,
.pagebody img,
.pagebody iframe,
.lcard,
.lcard__bio,
.lbio__photo img,
.lbio__photo .lcard__ph,
.skiplink,
.tool,
.orgspanel__close,
.a11ybtn,
.pagebody details,
.pagebody summary,
.pagebody details[open] summary,
.pcard,
.pagebody .people-grid .pcard,
.pagebody .figgrid figure,
.pagebody .figgrid > a,
.article__video,
.videoembed,
.gal__track,
.gal__slide img,
.article__single img,
.article__gallery figure,
.seclist__item,
.emptybox{
border-radius: 0;
}
/* --- Тени убраны -----------------------------------------------------------
Правила [data-a11y="high"] и [data-a11y="high-dark"] намеренно не трогаем:
там тень работает обводкой для слабовидящих, это доступность, а не декор. */
.sitesearch:focus-within,
.submenu,
.typoreport,
.feat3card__badge,
.lcard__photo img,
.lcard__ph,
.orgspanel,
.gal__nav{
box-shadow: none;
}
/* Наведение раньше показывалось тенью. Тень убрали — значит, отклик должен
дать что-то другое, иначе карточки перестанут отзываться на курсор.
Ставим границу цвета бренда: так же делает gov.uz. */
.ncard:hover,
.feat3card:hover,
.dir:hover,
.seclist__item:hover,
.pagebody .figgrid figure:hover,
.pagebody .figgrid > a:hover{
box-shadow: none;
border-color: var(--green);
}
/* Выпадающее меню держалось на тени — без неё нужна граница,
иначе список сольётся со страницей. */
.submenu{
border: 1px solid var(--line);
}
/* --- Мелочи, из которых складывается «государственный» вид ---------------- */
/* Карточки на gov.uz отделены тонкой рамкой, а не воздухом */
.ncard,
.feat3card,
.wcard,
.ccard,
.bannercard,
.seclist__item,
.dir{
border: 1px solid var(--line);
}
/* Заголовки разделов — прописными, с разрядкой и в цвет бренда.
text-transform в site.css уже стоит, добавляем только разрядку и цвет. */
.sec__title{
letter-spacing: .02em;
color: var(--green);
}
/* Кнопки плоские: без скруглений тень и подъём при наведении выглядят
чужеродно, оставляем только смену цвета. */
.loginbtn,
.printbtn,
.typoreport__btn{
box-shadow: none;
}
/* --- Наведение -------------------------------------------------------------
В site.css подсветка при наведении сделана через var(--soft). После смены
палитры --soft стал #F1F3F5 — ровно цветом фона страницы, и подсветка
пропала: кнопка под курсором переставала отличаться от невыделенной.
Разводим две роли, которые раньше совпадали: --soft остаётся цветом
поверхностей (подложки картинок, шапки таблиц, боковые панели), а для
наведения заводим отдельный тон — светло-голубой, как на gov.uz. */
:root{ --hover: #DCE7F5; }
/* В тёмной теме тот же приём: подсветка чуть светлее подложки, а не серее. */
[data-theme="dark"]{ --hover: #1B3350; }
.secside__item:hover,
.sec__morewrap .sec__more:hover,
.pagebody summary:hover{
background: var(--hover);
}
/* --- Панель организаций: как на государственных порталах -------------------
На gov.uz пункт под курсором и раскрытая категория заливаются сплошным
синим с белым текстом, а не подсвечиваются светлым оттенком. Приглушённая
подсветка там оставлена второстепенным элементам; список организаций —
основная навигация, и отклик у неё заметный. */
.orgscat__head:hover,
.orgscat.open > .orgscat__head{
background: var(--green);
color: #fff;
}
.orgscat__head:hover svg,
.orgscat.open > .orgscat__head svg{
color: #fff;
}
/* Организации внутри категории — тот же приём. Отрицательные поля тянут
заливку на всю ширину панели: иначе синяя полоса обрывалась бы по
отступам списка и висела в воздухе. */
.orgscat__body a{
padding: 7px 20px 7px 30px;
margin: 0 -20px 0 -30px;
}
.orgscat__body a:hover{
background: var(--green);
color: #fff;
}
/* Крестик закрытия на образце — сплошной синий квадрат, а не проступающая
при наведении подложка. */
.orgspanel__close{
background: var(--green);
}
/* Кнопка «Войти»: в site.css при наведении зашит коричнево-золотой #9c7423
от самой первой темы сайта. На синем он выглядит случайным пятном. */
.loginbtn:hover{
background: var(--green-dark);
}
/* Крестик закрытия лежит на тёмно-синей шапке панели. Полупрозрачный белый
давал на ней грязно-серый квадрат — заменяем на цвет бренда. */
.orgspanel__close:hover{
background: var(--green);
}
/* Панель выезжала с тенью, отделявшей её от страницы; тень мы убрали,
поэтому границу нужно вернуть явно. */
.orgspanel{
border-right: 1px solid var(--line);
}
/* --- Кнопки без собственного оформления ------------------------------------
Этим четырём