/* ========================================================================== Хаб ОКБ «Тяжёлая Логика» — режим СОЮЗ. Правила работают только при data-mode="sov" на ; обычный хаб этот файл не трогает. Исключение — стили самой кнопки переключения. ========================================================================== */ /* -------------------------------------------------------------------------- Кнопка -------------------------------------------------------------------------- */ .okb-switch { --okb-sw-red: #c1121f; display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid var(--secondary--color-4); border-radius: 4px; background: rgba(255, 255, 255, .03); color: var(--neutral--400); font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1; white-space: nowrap; cursor: pointer; transition: color .25s, border-color .25s, background-color .25s, box-shadow .25s; -webkit-appearance: none; appearance: none; } .okb-switch:hover { color: #fff; border-color: var(--okb-sw-red); background: rgba(193, 18, 31, .14); box-shadow: 0 0 0 1px rgba(193, 18, 31, .35), 0 0 22px -6px rgba(193, 18, 31, .85); } .okb-switch:focus-visible { outline: 2px solid var(--okb-sw-red); outline-offset: 3px; } .okb-switch-q { display: inline-block; width: 0; overflow: hidden; opacity: 0; transition: width .18s, opacity .18s; } .okb-switch:hover .okb-switch-q, .okb-switch:focus-visible .okb-switch-q { width: .55em; opacity: 1; } .okb-switch-mark { width: 17px; height: 17px; flex: none; filter: grayscale(1); opacity: .5; transition: filter .25s, opacity .25s, transform .25s; } .okb-switch:hover .okb-switch-mark, .okb-switch:focus-visible .okb-switch-mark { filter: none; opacity: 1; transform: rotate(-8deg) scale(1.12); } /* В сайдбаре — во всю ширину, под строкой поиска. */ .okb-switch-wide { width: calc(100% - 56px); margin: 0 28px 20px; justify-content: center; } /* В верхней панели узкого экрана — только флажок. */ .okb-switch-bar { margin-left: auto; margin-right: 12px; padding: 9px 11px; } .okb-switch-bar .okb-switch-label { display: none; } .okb-switch-bar .okb-switch-mark { width: 20px; height: 20px; filter: none; opacity: .85; } @media screen and (min-width: 992px) { .okb-switch-bar { display: none; } } @media screen and (max-width: 991px) { .okb-switch-wide { display: none; } } /* Шторка перехода */ .okb-takeover { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: #b30f1a; transform: translateX(-101%); pointer-events: none; } .okb-takeover.is-in { animation: okb-sweep-in .45s cubic-bezier(.7,0,.3,1) forwards; } .okb-takeover.is-out { animation: okb-sweep-out .5s cubic-bezier(.7,0,.3,1) forwards; } @keyframes okb-sweep-in { from { transform: translateX(-101%) } to { transform: translateX(0) } } @keyframes okb-sweep-out { from { transform: translateX(0) } to { transform: translateX(101%) } } .okb-takeover-text { color: #ffe9a8; font-size: clamp(18px, 4vw, 40px); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; text-align: center; padding: 0 24px; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); } .okb-takeover-sub { display: block; margin-top: 14px; font-size: 11px; letter-spacing: .3em; color: #ffffffb0; font-weight: 500; } @media (prefers-reduced-motion: reduce) { .okb-takeover { display: none; } } /* ========================================================================== РЕЖИМ СОЮЗ ========================================================================== */ html[data-mode="sov"] .page-wrapper { animation: okb-failsafe .01s .4s forwards; opacity: 0; } html[data-mode="sov"].okb-ready .page-wrapper { animation: none; opacity: 1; } @keyframes okb-failsafe { to { opacity: 1 } } html[data-mode="sov"] { --neutral--800: #0c0605; --secondary--color-1: #150807; --secondary--color-4: #5a3a12; --accent--primary-1: #c1121f; --secondary--color-2: #e8b923; --secondary--color-3: #e07a2f; --secondary--color-5: #ffce55; --neutral--700: #3a1210; --neutral--600: #57342a; --neutral--500: #b09678; --neutral--400: #efdcc4; --neutral--300: #f3e3cd; --neutral--200: #fff2df; --neutral--100: #fff6e6; --system--green-300: #7fb800; --okb-kumach: #c1121f; --okb-kumach-dark: #7d0d14; --okb-gold: #e8b923; } html[data-mode="sov"] body { background-color: var(--neutral--800); background-image: radial-gradient(circle at 70% -10%, rgba(193, 18, 31, .3), transparent 55%), radial-gradient(rgba(243, 227, 205, .04) 1px, transparent 1px); background-size: auto, 4px 4px; background-attachment: fixed, fixed; } /* Плакат не бывает со скруглениями */ html[data-mode="sov"] .card, html[data-mode="sov"] .btn-primary, html[data-mode="sov"] .btn-secondary, html[data-mode="sov"] .input, html[data-mode="sov"] .okb-faq, html[data-mode="sov"] .okb-callout, html[data-mode="sov"] .okb-toc, html[data-mode="sov"] .okb-utility { border-radius: 2px; } html[data-mode="sov"] h1, html[data-mode="sov"] h2, html[data-mode="sov"] .display-2, html[data-mode="sov"] .display-3, html[data-mode="sov"] .display-4, html[data-mode="sov"] .okb-stat-label, html[data-mode="sov"] .okb-nav-heading, html[data-mode="sov"] .okb-logo-title { text-transform: uppercase; letter-spacing: .01em; color: var(--neutral--100); } html[data-mode="sov"] .display-2 { font-weight: 700; } html[data-mode="sov"] .okb-eyebrow { color: var(--okb-gold); } /* Сайдбар */ html[data-mode="sov"] .sidebar-wrapper { background-color: #0e0605; border-right-color: var(--okb-gold); box-shadow: inset -3px 0 0 0 rgba(193, 18, 31, .5); } html[data-mode="sov"] .okb-logo-mark { filter: hue-rotate(300deg) saturate(2.4) brightness(1.05); } html[data-mode="sov"] .okb-nav-link { border-left-color: transparent; } html[data-mode="sov"] .okb-nav-link:hover { background-color: rgba(193, 18, 31, .16); } html[data-mode="sov"] .okb-nav-link.w--current { background-color: var(--okb-kumach); color: #fff6e6; border-left-color: var(--okb-gold); } html[data-mode="sov"] .okb-nav-icon { color: var(--okb-gold); } html[data-mode="sov"] .okb-sidebar-status { border-color: var(--okb-gold); background: linear-gradient(180deg, #1a0a08, #0e0605); } html[data-mode="sov"] .okb-dot { background-color: #7fb800; box-shadow: 0 0 0 3px rgba(127, 184, 0, .18); } /* Кнопки — печать в две краски */ html[data-mode="sov"] .btn-primary { background-color: var(--okb-kumach); border: 2px solid var(--okb-gold); box-shadow: 4px 4px 0 0 #00000059; text-transform: uppercase; font-weight: 700; letter-spacing: .08em; transition: transform .12s, box-shadow .12s, background-color .2s; } html[data-mode="sov"] .btn-primary:hover { background-color: #8f0f18; transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 #00000059; } html[data-mode="sov"] .btn-secondary { border: 1px solid var(--okb-gold); } /* Карточки и таблицы */ html[data-mode="sov"] .card { border: 1px solid #e8b92330; } html[data-mode="sov"] .okb-card-link:hover { border-color: var(--okb-gold); } html[data-mode="sov"] .okb-chip { border-color: #e8b92347; color: var(--okb-gold); } html[data-mode="sov"] .okb-table th { color: var(--okb-gold); } html[data-mode="sov"] .okb-progress-inner { background-image: linear-gradient(to right, var(--okb-kumach), var(--okb-gold)); } html[data-mode="sov"] .okb-stamp { border-color: var(--okb-gold); color: var(--okb-gold); } html[data-mode="sov"] ::selection { background: var(--okb-kumach); color: #ffe9a8; } /* Материалы остаются читаемыми: меняем краски, а не типографику. */ html[data-mode="sov"] .okb-article h2 { text-transform: none; } html[data-mode="sov"] .okb-article a { color: var(--okb-gold); border-bottom-color: rgba(232,185,35,.4); } html[data-mode="sov"] .okb-callout { border-left-color: var(--okb-gold); } html[data-mode="sov"] .okb-callout.is-warning { border-left-color: var(--okb-kumach); } /* Подвал */ html[data-mode="sov"] .dashboard-footer-wrapper:before { content: "СЛАВА ТЯЖЁЛОЙ ЛОГИКЕ"; display: block; text-align: center; padding-bottom: 18px; color: #e8b9231a; font-size: clamp(22px, 5vw, 60px); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; user-select: none; } /* -------------------------------------------------------------------------- Что появляется только в СОЮЗЕ -------------------------------------------------------------------------- */ /* Колонка контента — флекс-элемент: без min-width:0 она растягивается под ширину бегущей строки и утаскивает всю страницу вбок. */ html[data-mode="sov"] .dashboard-content { min-width: 0; } .okb-ribbon { position: relative; z-index: 5; width: 100%; max-width: 100%; background: linear-gradient(90deg, var(--okb-kumach-dark), var(--okb-kumach) 50%, var(--okb-kumach-dark)); border-top: 1px solid #ffffff2b; border-bottom: 1px solid #00000047; overflow: hidden; } .okb-ribbon-track { display: flex; width: max-content; animation: okb-ribbon 38s linear infinite; } .okb-ribbon-track span { padding: 8px 30px; color: #ffe9a8; font-size: 10px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; white-space: nowrap; } @keyframes okb-ribbon { from { transform: translateX(0) } to { transform: translateX(-50%) } } @media (prefers-reduced-motion: reduce) { .okb-ribbon-track { animation: none; } } .okb-poster { border: 2px solid var(--okb-gold); background: repeating-linear-gradient(135deg, rgba(193,18,31,.14) 0 14px, transparent 14px 28px), linear-gradient(160deg, #2a0c0a, #0c0605); padding: 26px 30px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; box-shadow: 6px 6px 0 0 #00000059; } .okb-poster-art { flex: none; width: 108px; } .okb-poster-body { flex: 1 1 300px; } .okb-poster-title { color: #fff6e6; font-size: 22px; font-weight: 700; line-height: 115%; text-transform: uppercase; margin-bottom: 8px; } .okb-poster-text { color: #efdcc4cc; font-size: 15px; line-height: 155%; } .okb-poster-text b { color: var(--okb-gold); font-weight: 600; } /* Донесения EVA */ .okb-eva { position: fixed; left: 24px; bottom: 24px; z-index: 9990; display: flex; align-items: center; gap: 10px; max-width: min(420px, calc(100vw - 48px)); padding: 12px 18px 12px 14px; border: 1px solid var(--okb-gold, #e8b923); border-left: 4px solid var(--okb-kumach, #c1121f); background: #14070a; box-shadow: 5px 5px 0 0 #00000059; color: #ffe9a8; font-size: 13px; line-height: 1.45; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .3s, transform .3s; } .okb-eva.is-on { opacity: 1; transform: translateY(0); } .okb-eva-star { color: var(--okb-gold, #e8b923); font-size: 15px; line-height: 1; } @media screen and (max-width: 767px) { .okb-eva { left: 12px; right: 12px; bottom: 12px; } } /* Отклик ступени при наведении */ html[data-mode="sov"] [data-ack] { position: relative; } html[data-mode="sov"] [data-ack]:after { content: attr(data-ack); position: absolute; left: 0; top: calc(100% + 6px); padding: 5px 10px; border: 1px solid var(--okb-gold); background: #14070a; color: #ffe9a8; font-size: 11px; letter-spacing: .06em; text-transform: none; white-space: nowrap; opacity: 0; transform: translateY(-4px); pointer-events: none; z-index: 6; transition: opacity .18s, transform .18s; } html[data-mode="sov"] [data-ack]:hover:after { opacity: 1; transform: translateY(0); } /* Железный занавес по коду Konami */ html.okb-curtain body:after { content: ""; position: fixed; inset: 0; z-index: 9980; pointer-events: none; box-shadow: inset 0 0 240px 50px rgba(193, 18, 31, .6); } /* Салют по тройному щелчку на эмблеме */ html.okb-salute .okb-logo-mark { animation: okb-salute .7s ease-in-out; } @keyframes okb-salute { 0%, 100% { transform: rotate(0) scale(1) } 25% { transform: rotate(-12deg) scale(1.25) } 60% { transform: rotate(10deg) scale(1.15) } }