/* ============================================================================ newschinatech.com · site.css — единая таблица стилей всех типов страниц Кладётся в репозиторий по адресу /assets/site.css ---------------------------------------------------------------------------- Что здесь НЕ лежит: критический CSS первого экрана. Он остаётся инлайном в каждой страницы, иначе (а) первый экран мигает нестилизованным, (б) собранная главная станет легче 15 КБ и гейт сборщика 6791308 отклонит коммит. Инлайн-часть — в index_shell.html и в head-сниппете подстраниц. Токены и шрифтовые стеки объявлены и здесь, и в инлайне — намеренно: значения обязаны совпадать, файл ниже остаётся источником правды. ============================================================================ */ /* ---------------------------------------------------------------- 1. Токены */ :root{ /* поверхности */ --cover:#111111; /* фон страницы */ --card:#1a1a1a; /* карточка */ --panel:#141414; /* лента, тёмные панели */ --card-soon:#161616; /* карточка «скоро» */ --hover:#1c1c1c; /* линии и акцент */ --line:#2a2a2a; --red:#C22000; --red-dark:#a51c00; --amber:#c9a227; /* значок «наш расчёт», предупреждающая врезка */ /* текст. Один набор на все типы страниц — раньше главная и Дракон расходились (--tx:#eeeae4 против #cbc5bd), из-за чего при переходе между страницами менялась яркость текста. */ --head:#ffffff; /* заголовки */ --tx:#e8e3dc; /* интерфейсный текст */ --tx-body:#d8d2ca; /* длинный текст статьи, чуть мягче для чтения */ --tx-soft:#c4beb6; /* деки, подписи */ --tx-dim:#a49d94; /* служебное. Контраст к --cover 6.7:1 — выше порога AA */ /* шрифты. Fallback подобран МЕТРИЧЕСКИ, а не «на глаз»: Caladea выпущен как метрический двойник Cambria, Carlito — Calibri. Georgia и system-ui в этой роли давали сдвиг вёрстки при подмене. */ --font-head:'Caladea',Cambria,'Times New Roman',Georgia,serif; --font-body:'Carlito',Calibri,'Segoe UI',system-ui,-apple-system,sans-serif; --font-cjk:'Noto Serif SC','Songti SC','SimSun','Noto Serif CJK SC',serif; /* геометрия */ --wrap:1180px; --wrap-read:760px; --gutter:24px; --header-h:64px; --rail-w:340px; --hero-h:460px; --radius:6px; } /* --------------------------------------------------- 2. База и типографика */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{ scroll-behavior:smooth; /* высота липкой шапки + 8px воздуха. Раньше стояло 78px при шапке 65px. */ scroll-padding-top:calc(var(--header-h) + 9px); -webkit-text-size-adjust:100%; } @media (max-width:720px){html{scroll-padding-top:126px}} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } body{ font-family:var(--font-body); background:var(--cover); color:var(--tx); line-height:1.6; -webkit-font-smoothing:antialiased; /* text-rendering:optimizeLegibility намеренно НЕ включён: на длинных текстах он откладывает первую отрисовку и на части Android ломает кернинг */ } a{color:inherit} img,svg,video{max-width:100%;height:auto} /* Видимый фокус. Раньше его не было ни на одной странице: на тёмном фоне браузерная обводка по умолчанию почти не читается, и клавиатурная навигация шла вслепую. */ :focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px} :focus:not(:focus-visible){outline:none} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)} .wrap-read{max-width:var(--wrap-read);margin:0 auto;padding:0 var(--gutter)} /* Служебный текст для скринридеров и ИИ-парсеров: в потоке есть, на экране не занимает места. Используется для расшифровки графиков. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* Ссылка «к содержимому» — первый таб-стоп на каждой странице */ .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--red);color:#fff;padding:10px 18px;font-weight:700;text-decoration:none;border-radius:0 0 var(--radius) 0} .skip:focus{left:0} /* ---------------------------------------------------------- 3. Кнопки */ .btn{display:inline-block;text-decoration:none;font-weight:700;font-size:15px;padding:12px 26px;border-radius:4px;transition:background .15s,border-color .15s} .btn-red{background:var(--red);color:#fff} .btn-red:hover{background:var(--red-dark)} .btn-ghost{border:1px solid var(--line);color:var(--tx)} .btn-ghost:hover{border-color:var(--tx-dim)} .btn-mini{display:inline-block;background:var(--red);color:#fff;text-decoration:none;font-weight:700;font-size:13px;padding:8px 16px;border-radius:4px} .btn-mini:hover{background:var(--red-dark)} /* ------------------------------------------------------------- 4. Секции */ section{padding:44px 0;border-bottom:1px solid var(--line)} .sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;gap:16px;flex-wrap:wrap} .sec-head h2{font-family:var(--font-head);font-weight:700;font-size:clamp(24px,4vw,32px);color:var(--head)} .sec-head a.more{color:var(--red);text-decoration:none;font-size:14px;font-weight:700;white-space:nowrap} .sec-head a.more:hover{text-decoration:underline} .sec-sub{color:var(--tx-dim);font-size:14px;margin-bottom:20px;max-width:70ch} /* Сетка карточек. Была жёсткая repeat(3,1fr): четыре отчёта давали осиротевшую карточку в новой строке. auto-fill раскладывает по ширине. */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:18px} @media (max-width:640px){.grid{grid-template-columns:1fr}} .dcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:block;text-decoration:none;transition:border-color .15s,transform .15s} a.dcard:hover{border-color:var(--red);transform:translateY(-2px)} .dcard .title{font-family:var(--font-head);font-size:20px;color:var(--head);line-height:1.2;margin-bottom:8px} .dcard .dek{font-size:14px;color:var(--tx-soft);line-height:1.45;margin-bottom:14px} .dcard .read{font-size:13px;font-weight:700;color:var(--red)} .dcard.report{border-left:3px solid var(--red)} /* «Скоро» — бейджем, а не прозрачностью: opacity уводила контраст ниже AA */ .dcard.soon{background:var(--card-soon);border-style:dashed;cursor:default} .dcard.soon .title{color:#cfc9c1} .dcard.soon .read{color:var(--tx-dim)} .badge-soon{display:inline-block;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--red);border:1px solid rgba(194,32,0,.5);border-radius:3px;padding:2px 8px} .soon-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--tx-dim);border:1px solid var(--line);border-radius:3px;padding:2px 8px} /* ------------------------------------------------------- 5. Полоса Атласа */ .atlas{background:linear-gradient(90deg,#181818,#1e1413)} .atlas .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;text-align:left;padding:40px var(--gutter);flex-wrap:wrap} .atlas h2{font-family:var(--font-head);font-size:clamp(24px,4vw,32px);color:var(--head);margin-bottom:8px} .atlas p{color:var(--tx-soft);max-width:56ch;margin:0;font-size:16px} .atlas .btn{white-space:nowrap} /* ------------------------------------------------------------- 6. Подвал */ footer.site{padding:36px 0 48px;border-top:1px solid var(--line)} footer.site .cta{text-align:center;margin-bottom:32px} footer.site .cta .ji{font-family:var(--font-cjk);color:var(--red);font-size:44px;line-height:1;display:block;margin-bottom:10px;min-height:44px} footer.site .cta h3{font-family:var(--font-head);color:var(--head);font-size:26px;margin-bottom:8px} footer.site .cta p{color:var(--tx-dim);margin-bottom:20px} footer.site .foot-row{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:22px} footer.site .slogan{font-family:var(--font-head);font-size:15px;color:var(--tx-soft)} footer.site .handle{color:var(--red);font-weight:700;text-decoration:none} footer.site .small{flex-basis:100%;font-size:12px;color:var(--tx-dim);margin-top:4px} /* ====================================================================== 7. СТРАНИЦЫ ДРАКОНА И ОТЧЁТА Раньше этот блок жил копией в каждом HTML-файле. Копии успели разойтись: на подстраницах базовый текст был темнее главной, стоял text-rendering:optimizeLegibility, отсутствовал --head. Теперь одна версия. ====================================================================== */ .article-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:#121212} .article-hero .hero-art{position:absolute;inset:0;width:100%;height:100%;z-index:0} .article-hero .hero-tint{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(17,17,17,.35) 0%,rgba(17,17,17,.72) 60%,rgba(17,17,17,.96) 100%)} .article-hero .wrap-read{position:relative;z-index:2;padding-top:28px;padding-bottom:40px} /* Хлебные крошки — списком в