/* * Версия сайта для слабовидящих — своя, без сторонних сервисов. * Включается кнопкой в шапке, настройки хранятся в браузере посетителя. * * Режим ставит на класс svv и атрибуты: * data-svv-shrift — obychno | sredne | krupno * data-svv-cveta — cherno | belo | sine * data-svv-kartinki— da | net * data-svv-interval— obychno | sredne | bolshoy */ /* ---------- кнопка вызова в шапке ---------- */ .svv-vyzov { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: background-color 170ms cubic-bezier(0.23, 1, 0.32, 1), transform 170ms cubic-bezier(0.23, 1, 0.32, 1); } .svv-vyzov img { width: 34px; height: 34px; display: block; } @media (hover: hover) and (pointer: fine) { .svv-vyzov:hover { background: rgba(233, 88, 21, .12); transform: scale(1.06); } } .svv-vyzov:active { transform: scale(.95); } .svv-tolko-chitalkam { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- панель настроек ---------- */ .svv-panel { position: relative; z-index: 400; display: none; padding: 14px 20px; background: #24405c; color: #fff; font-size: 14px; line-height: 1.4; } .svv-panel.otkryta { display: block; } .svv-panel__ryad { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; max-width: 1280px; margin: 0 auto; } .svv-panel__gruppa { display: flex; align-items: center; gap: 8px; } .svv-panel__imya { opacity: .82; font-size: 13px; } .svv-panel__knopka { min-width: 38px; height: 34px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 8px; background: transparent; color: #fff; font-size: 14px; cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease; } .svv-panel__knopka:hover { background: rgba(255, 255, 255, .14); } .svv-panel__knopka[aria-pressed="true"] { background: #fff; color: #24405c; border-color: #fff; font-weight: 600; } .svv-panel__knopka--a1 { font-size: 13px; } .svv-panel__knopka--a2 { font-size: 17px; } .svv-panel__knopka--a3 { font-size: 21px; } .svv-panel__obraz { display: inline-block; width: 26px; height: 20px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .5); } .svv-panel__vyhod { margin-left: auto; height: 34px; padding: 0 16px; border: 0; border-radius: 8px; background: #e95815; color: #fff; font-size: 14px; cursor: pointer; } .svv-panel__vyhod:hover { background: #c8460c; } @media (max-width: 767px) { .svv-panel { padding: 12px 14px; } .svv-panel__ryad { gap: 10px 14px; } .svv-panel__vyhod { margin-left: 0; width: 100%; } } /* ================= САМ РЕЖИМ ================= */ html.svv { --svv-fon: #ffffff; --svv-tekst: #000000; --svv-ssylka: #0000cc; --svv-ramka: #000000; } html.svv[data-svv-cveta="belo"] { --svv-fon: #000000; --svv-tekst: #ffffff; --svv-ssylka: #ffe066; --svv-ramka: #ffffff; } html.svv[data-svv-cveta="sine"] { --svv-fon: #9dd1ff; --svv-tekst: #063462; --svv-ssylka: #05306b; --svv-ramka: #063462; } html.svv, html.svv body { background: var(--svv-fon) !important; color: var(--svv-tekst) !important; } /* всё внутри страницы — на общий фон и цвет. Пишем background целиком, а не background-color: иначе заливки-градиенты (например оранжевая капсула активного пункта меню) остаются на месте. */ html.svv body *:not(.svv-panel):not(.svv-panel *):not(svg):not(svg *) { background: transparent !important; color: var(--svv-tekst) !important; box-shadow: none !important; text-shadow: none !important; border-color: var(--svv-ramka) !important; border-radius: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Полосы страницы получают сплошной фон режима. Без этого шапка оставалась прозрачной и её текст ложился поверх картинки — читать было невозможно. */ html.svv #rt-top-surround, html.svv #rt-header, html.svv #main-top-surround, html.svv #rt-transition, html.svv #rt-mainbody-surround, html.svv #rt-feature, html.svv #rt-utility, html.svv #rt-main, html.svv #rt-content-bottom, html.svv #rt-mainbottom, html.svv #rt-footer-surround, html.svv #rt-footer, html.svv #rt-copyright { background: var(--svv-fon) !important; } /* Шапку в режиме не закрепляем: при крупном шрифте она съедала бы пол-экрана, а отступ под неё скрипт считает по обычным размерам — из-за увеличения содержимое наезжало на меню. */ html.svv #rt-top-surround { position: static !important; } html.svv #main-top-surround { padding-bottom: 0 !important; } /* декоративная картинка на первом экране в режиме только мешает */ html.svv .detki-banner, html.svv #rt-fullslideshow { display: none !important; } html.svv a, html.svv a *:not(svg):not(svg *) { color: var(--svv-ssylka) !important; text-decoration: underline !important; } html.svv a:focus, html.svv button:focus, html.svv input:focus { outline: 3px solid var(--svv-ssylka) !important; outline-offset: 2px; } /* Гоча: в обычном оформлении цвета расставлены правилами с id (например «#rt-feature .custom p a { color: ... !important }») — они специфичнее простого «html.svv *», и в режиме оставались оранжевые подписи и синие заголовки. Повторяем класс svv трижды: так селектор становится специфичнее любого из них, и режим перекрашивает страницу целиком. */ html.svv.svv.svv #rt-top-surround *:not(svg):not(svg *), html.svv.svv.svv #main-top-surround *:not(svg):not(svg *), html.svv.svv.svv #rt-transition *:not(svg):not(svg *), html.svv.svv.svv #rt-footer-surround *:not(svg):not(svg *) { background: transparent !important; color: var(--svv-tekst) !important; border-color: var(--svv-ramka) !important; box-shadow: none !important; } html.svv.svv.svv #rt-top-surround a, html.svv.svv.svv #rt-top-surround a *:not(svg):not(svg *), html.svv.svv.svv #main-top-surround a, html.svv.svv.svv #main-top-surround a *:not(svg):not(svg *), html.svv.svv.svv #rt-transition a, html.svv.svv.svv #rt-transition a *:not(svg):not(svg *), html.svv.svv.svv #rt-footer-surround a, html.svv.svv.svv #rt-footer-surround a *:not(svg):not(svg *) { color: var(--svv-ssylka) !important; text-decoration: underline !important; } /* кнопки остаются кнопками: рамка вместо заливки */ html.svv.svv.svv .readon, html.svv.svv.svv .readmore a, html.svv.svv.svv .btn-primary, html.svv.svv.svv button:not(.svv-panel__knopka):not(.svv-panel__vyhod):not(.svv-vyzov) { border: 2px solid var(--svv-ramka) !important; color: var(--svv-ssylka) !important; } /* блоки-карточки остаются различимы рамкой */ html.svv .rt-block, html.svv .item, html.svv .item-page, html.svv .detki-karusel__slayd a { border: 2px solid var(--svv-ramka) !important; } /* Размер текста. Гоча: задавать font-size каждому элементу бесполезно — на сайте полно правил вида «#rt-main .item p», они специфичнее и перебивают режим. Поэтому масштабируем целиком каждую полосу страницы. Панель настроек не трогаем, иначе её кнопки раздуваются вместе с текстом. */ html.svv[data-svv-shrift="obychno"] body > *:not(.svv-panel) { zoom: 1; } html.svv[data-svv-shrift="sredne"] body > *:not(.svv-panel) { zoom: 1.28; } html.svv[data-svv-shrift="krupno"] body > *:not(.svv-panel) { zoom: 1.6; } /* межбуквенный интервал */ html.svv[data-svv-interval="sredne"] body *:not(.svv-panel):not(.svv-panel *) { letter-spacing: .08em !important; } html.svv[data-svv-interval="bolshoy"] body *:not(.svv-panel):not(.svv-panel *) { letter-spacing: .16em !important; word-spacing: .2em !important; } /* картинки можно отключить */ html.svv[data-svv-kartinki="net"] img:not(.svv-znak), html.svv[data-svv-kartinki="net"] svg:not(.svv-znak), html.svv[data-svv-kartinki="net"] .detki-banner { display: none !important; } /* в режиме прячем украшения, которые мешают читать */ html.svv .detki-karusel__strelka, html.svv .detki-karusel__tochki { border-color: var(--svv-ramka) !important; } html.svv #rt-transition { margin-top: 0 !important; padding-top: 16px !important; max-width: 100% !important; border: 0 !important; } /* активный пункт меню различаем рамкой, а не заливкой */ html.svv ul.gf-menu > li.active > a, html.svv ul.gf-menu > li.active > a span { border: 2px solid var(--svv-ramka) !important; font-weight: 700 !important; } html.svv .detki-logo__glavnoe, html.svv .detki-logo__vtoroe { color: var(--svv-tekst) !important; } html.svv * { transition: none !important; animation: none !important; }