/* ========================================================================== ИСЦ «Сентябрь» — версия для слабовидящих Работает через переопределение переменных из style.css. Состояние хранится в localStorage (ключ isc-a11y) и восстанавливается до отрисовки — небольшой inline-скрипт в ставит data-атрибуты на , поэтому «мигания» темы нет. ========================================================================== */ /* --- 1. Размер шрифта --------------------------------------------------- */ html[data-font="md"]{ font-size:115%; } html[data-font="lg"]{ font-size:130%; } html[data-font="xl"]{ font-size:145%; } /* При крупном кегле сетка должна перестраиваться раньше */ html[data-font="lg"] .grid--2, html[data-font="xl"] .grid--2, html[data-font="lg"] .grid--3, html[data-font="xl"] .grid--3, html[data-font="lg"] .footer-grid, html[data-font="xl"] .footer-grid{ grid-template-columns:1fr; } /* --- 2. Чёрным по белому ------------------------------------------------ */ html[data-contrast="bw"]{ --bg:#FFFFFF; --surface:#FFFFFF; --ink:#000000; --muted:#1A1A1A; --line:#000000; --purple:#000000; --purple-deep:#000000; --brown:#000000; --bronze:#000000; --gold:#000000; --gold-light:#000000; --focus:#000000; --purple-soft:#FFFFFF; --azure-soft:#FFFFFF; --azure-light:#FFFFFF; --azure:#000000; } html[data-contrast="bw"] body{ background:#fff; color:#000; } /* --- 3. Белым по чёрному ------------------------------------------------ */ html[data-contrast="wb"]{ --bg:#000000; --surface:#000000; --ink:#FFFFFF; --muted:#E6E6E6; --line:#FFFFFF; --purple:#FFFFFF; --purple-deep:#FFFFFF; --brown:#FFFFFF; --bronze:#FFFFFF; --gold:#FFFFFF; --gold-light:#FFFFFF; --focus:#FFFF00; --purple-soft:#000000; --azure-soft:#000000; --azure-light:#FFFFFF; --azure:#FFFFFF; --shadow:none; } html[data-contrast="wb"] body{ background:#000; color:#fff; } /* --- 4. Сепия ----------------------------------------------------------- */ html[data-contrast="sepia"]{ --bg:#F7EFDD; --surface:#FFF9EC; --ink:#2A2118; --muted:#4E4335; --line:#BFAE8E; --purple:#4A2472; --purple-deep:#3A1A5E; --brown:#3B2A15; --bronze:#6E4A21; --gold:#8A6B14; --gold-light:#A98A2B; --focus:#6E4A21; --purple-soft:#EDE3D2; --azure-soft:#E8E2D0; --azure-light:#C3B79A; --azure:#2F6480; } html[data-contrast="sepia"] body{ background:var(--bg); color:var(--ink); } /* --- 5. Общее для всех высококонтрастных схем --------------------------- */ html[data-contrast="bw"] .card, html[data-contrast="bw"] .contact-card, html[data-contrast="wb"] .card, html[data-contrast="wb"] .contact-card{ border-width:3px; } html[data-contrast="bw"] .lead-card, html[data-contrast="wb"] .lead-card{ border:3px solid currentColor; border-radius:0; box-shadow:none; } html[data-contrast="bw"] .notice, html[data-contrast="wb"] .notice, html[data-contrast="bw"] .disclaimer, html[data-contrast="wb"] .disclaimer{ border:3px solid currentColor; } /* Градиентный герой превращаем в плоскую заливку */ html[data-contrast="bw"] .hero, html[data-contrast="wb"] .hero, html[data-contrast="sepia"] .hero{ background:var(--surface); color:var(--ink); border-bottom:3px solid currentColor; } html[data-contrast="bw"] .hero h1, html[data-contrast="bw"] .hero p, html[data-contrast="bw"] .hero__facts li, html[data-contrast="bw"] .hero__facts strong, html[data-contrast="bw"] .hero__slogan, html[data-contrast="wb"] .hero h1, html[data-contrast="wb"] .hero p, html[data-contrast="wb"] .hero__facts li, html[data-contrast="wb"] .hero__facts strong, html[data-contrast="wb"] .hero__slogan{ color:var(--ink) !important; } html[data-contrast="bw"] .hero__media img, html[data-contrast="wb"] .hero__media img{ border:3px solid currentColor; box-shadow:none; } html[data-contrast="bw"] .section--dark, html[data-contrast="wb"] .section--dark{ background:var(--surface); color:var(--ink); } html[data-contrast="bw"] .section--dark h1, html[data-contrast="bw"] .section--dark h2, html[data-contrast="bw"] .section--dark h3, html[data-contrast="wb"] .section--dark h1, html[data-contrast="wb"] .section--dark h2, html[data-contrast="wb"] .section--dark h3{ color:var(--ink); } html[data-contrast="bw"] .section--dark a, html[data-contrast="wb"] .section--dark a{ color:var(--ink); } html[data-contrast="bw"] .site-footer, html[data-contrast="wb"] .site-footer{ background:var(--surface); color:var(--ink); border-top:3px solid currentColor; } html[data-contrast="bw"] .site-footer a, html[data-contrast="wb"] .site-footer a{ color:var(--ink); } html[data-contrast="bw"] .footer-brand, html[data-contrast="wb"] .footer-brand, html[data-contrast="bw"] .footer-title, html[data-contrast="wb"] .footer-title, html[data-contrast="bw"] .footer-label, html[data-contrast="wb"] .footer-label, html[data-contrast="bw"] .footer-list, html[data-contrast="wb"] .footer-list, html[data-contrast="bw"] .footer-requisites, html[data-contrast="wb"] .footer-requisites, html[data-contrast="bw"] .footer-bottom, html[data-contrast="wb"] .footer-bottom{ color:var(--ink); } html[data-contrast="bw"] .footer-bottom, html[data-contrast="wb"] .footer-bottom{ border-top:2px solid currentColor; } html[data-contrast="bw"] .btn, html[data-contrast="wb"] .btn{ background:var(--surface); color:var(--ink) !important; border:3px solid currentColor; } html[data-contrast="bw"] .btn:hover, html[data-contrast="wb"] .btn:hover{ background:var(--ink); color:var(--surface) !important; } html[data-contrast="bw"] .logo__mark rect, html[data-contrast="wb"] .logo__mark rect{ fill:var(--surface); stroke:currentColor; stroke-width:3; } html[data-contrast="bw"] .logo__mark text, html[data-contrast="wb"] .logo__mark text{ fill:var(--ink); } html[data-contrast="bw"] .logo__name, html[data-contrast="wb"] .logo__name, html[data-contrast="bw"] .logo__sub, html[data-contrast="wb"] .logo__sub{ color:var(--ink); } html[data-contrast="bw"] .steps li::before, html[data-contrast="wb"] .steps li::before{ background:var(--surface); color:var(--ink); border:3px solid currentColor; } html[data-contrast="bw"] .checklist li::before, html[data-contrast="wb"] .checklist li::before{ border-color:var(--ink); } html[data-contrast="bw"] th, html[data-contrast="wb"] th{ background:var(--surface); color:var(--ink); } html[data-contrast="bw"] strong, html[data-contrast="wb"] strong{ color:var(--ink); } html[data-contrast="bw"] .tags li, html[data-contrast="wb"] .tags li{ background:var(--surface); color:var(--ink); border:2px solid currentColor; } html[data-contrast="bw"] .cookie, html[data-contrast="wb"] .cookie{ background:var(--surface); border-top:3px solid currentColor; } /* --- 6. Опции текста ---------------------------------------------------- */ html[data-tracking="on"] body{ letter-spacing:.06em; word-spacing:.14em; line-height:1.85; } html[data-sans="on"]{ --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-head: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } html[data-links="on"] a{ text-decoration:underline !important; text-underline-offset:3px; } html[data-images="off"] img, html[data-images="off"] .hero__media, html[data-images="off"] .card__icon{ display:none !important; } html[data-images="off"] .section--dark{ background:var(--purple-soft); color:var(--ink); } /* --- 7. Панель настроек ------------------------------------------------- */ .a11y-panel{ position:fixed; inset:0; z-index:180; background:rgba(30,27,34,.62); display:flex; align-items:flex-start; justify-content:center; padding:20px; overflow-y:auto; } .a11y-panel[hidden]{ display:none; } .a11y-panel__inner{ width:100%; max-width:620px; margin:auto; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); } .a11y-panel__title{ margin-top:0; font-size:1.35rem; } .a11y-group{ margin-bottom:22px; } .a11y-group__label{ font-weight:700; color:var(--purple-deep); margin-bottom:10px; font-size:.92rem; text-transform:uppercase; letter-spacing:.06em; } .a11y-group__row{ display:flex; flex-wrap:wrap; gap:10px; } .chip{ padding:11px 17px; min-height:46px; border-radius:999px; cursor:pointer; border:2px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-size:.95rem; } .chip:hover{ border-color:var(--purple); } .chip[aria-pressed="true"]{ background:var(--purple); color:#fff; border-color:var(--purple); font-weight:600; } .a11y-panel__footer{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; border-top:1px solid var(--line); padding-top:18px; margin-top:6px; } .a11y-panel__hint{ font-size:.9rem; color:var(--muted); margin:14px 0 0; min-height:1.2em; }