/* ========================================================================== ОКБ «Тяжёлая Логика» — режим СОЮЗ. Всё, что ниже, работает только когда на висит data-mode="sov". Базовая версия сайта этим файлом не затрагивается: ни одного правила без префикса [data-mode="sov"] здесь нет, кроме стилей самой кнопки. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Кнопка переключения. Живёт в обоих режимах. -------------------------------------------------------------------------- */ .okb-switch { --okb-sw-red: #c1121f; margin-left: auto; display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border: 1px solid #ffffff26; border-radius: 4px; background: #ffffff08; color: #ffffffa6; font-size: 11px; font-weight: 600; letter-spacing: .14em; 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, .12); box-shadow: 0 0 0 1px rgba(193, 18, 31, .35), 0 0 22px -6px rgba(193, 18, 31, .8); } .okb-switch:focus-visible { outline: 2px solid var(--okb-sw-red); outline-offset: 3px; } /* «?» появляется только под курсором — как в 2000-х */ .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); } /* В мобильном меню кнопка растягивается на всю ширину */ .header-mobile-navigation .okb-switch, .header-mobile .okb-switch { margin: 18px 0 0; width: 100%; justify-content: center; padding: 14px 16px; } /* На узком экране в шапке остаётся один флажок: место занимает бургер. Полная кнопка с подписью при этом есть в мобильном меню. */ @media screen and (max-width: 991px) { .okb-switch-desktop { margin-left: auto; margin-right: 10px; padding: 9px 11px; } .okb-switch-desktop .okb-switch-label { display: none; } .okb-switch-desktop .okb-switch-mark { width: 20px; height: 20px; filter: none; opacity: .85; } } @media screen and (min-width: 992px) { .okb-switch-mobile { display: none; } } /* -------------------------------------------------------------------------- 1a. Запасной путь для форм. Работает в обоих режимах: формы шаблона отправлять некуда, поэтому заявка уезжает письмом. -------------------------------------------------------------------------- */ .okb-mail-fallback { margin-top: 22px; padding: 20px 24px; border: 1px solid var(--border-color--border-color-white-0-1, #ffffff1a); border-radius: 12px; background: rgba(255, 255, 255, .03); } .okb-mail-head { color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; } .okb-mail-text { font-size: 15px; line-height: 160%; margin-bottom: 14px; } .okb-mail-text a { color: var(--_color---theme-color--secondary, #b7a2fc); } .okb-mail-body { font: 13px/1.65 ui-monospace, Consolas, monospace; color: #ffffffcc; background: #00000047; border: 1px solid #ffffff14; border-radius: 8px; padding: 14px 16px; margin: 0 0 14px; white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; } .okb-mail-copy { border: 1px solid #ffffff2e; border-radius: 8px; background: #ffffff0f; color: #fff; font: 600 13px/1 inherit; font-family: inherit; letter-spacing: .06em; padding: 11px 18px; cursor: pointer; transition: background-color .2s, border-color .2s; } .okb-mail-copy:hover { background: #ffffff1f; border-color: #ffffff52; } /* -------------------------------------------------------------------------- 2. Переходная шторка -------------------------------------------------------------------------- */ .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, 4.2vw, 44px); font-weight: 700; letter-spacing: .22em; 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: 12px; letter-spacing: .3em; color: #ffffffb0; font-weight: 500; } /* Кому анимации мешают — тем сразу результат, без спецэффектов. */ @media (prefers-reduced-motion: reduce) { .okb-takeover { display: none; } .okb-switch, .okb-switch-q, .okb-switch-mark { transition: none; } } /* ========================================================================== 3. РЕЖИМ СОЮЗ ========================================================================== */ /* Пока скрипт не доложил о готовности — прячем содержимое, чтобы не мелькала гражданская вёрстка. Анимация сама вернёт видимость через 0.4 с, даже если скрипт не отработает: страница не должна остаться пустой ни при каких условиях. */ 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"] { /* Кумач, золото, копоть */ --_color---theme-color--primary: #c1121f; --_color---theme-color--secondary: #e8b923; --_color---theme-color--body-background: #0c0605; --_color---theme-color--body: #efdcc4d9; --_color---theme-color--heading: #fff6e6; --_color---base-color--white: #fff6e6; --_color---theme-color--menu-color-normal: #efdcc4b3; --_color---theme-color--menu-color-hover-acive: #ffd45e; --_color---theme-color--gradient-color-dark-to: #1a0a08; --_color---theme-color--gradient-color-dark-from: #0c0605; --border-color--border-glowing-1: #3a1210; --border-color--border-glowing-2: #571317; --border-color--border-color-white-0-1: #e8b9232e; --border-color--border-color-white-0-2: #e8b92347; --border-color--border-color-white-0-3: #e8b92370; --_color---base-color--dark: #4a1113; /* Плакат не бывает со скруглениями */ --border-radius--broder-radius-10px: 2px; --border-radius--broder-radius-12px: 2px; --border-radius--broder-radius-14px: 2px; --okb-kumach: #c1121f; --okb-kumach-dark: #7d0d14; --okb-gold: #e8b923; --okb-paper: #f3e3cd; } /* Фактура: точечный растр плаката и красная засветка сверху. */ html[data-mode="sov"] body.body { background-color: var(--_color---theme-color--body-background); background-image: radial-gradient(circle at 50% -10%, rgba(193, 18, 31, .35), transparent 55%), radial-gradient(rgba(243, 227, 205, .045) 1px, transparent 1px); background-size: auto, 4px 4px; background-attachment: fixed, fixed; } /* --- заголовки: агитационная подача ------------------------------------- */ html[data-mode="sov"] h1, html[data-mode="sov"] h2, html[data-mode="sov"] .section-heading, html[data-mode="sov"] .heading-page-title, html[data-mode="sov"] .heading-h5, html[data-mode="sov"] .footer-heading-widget, html[data-mode="sov"] .pricing-item-title, html[data-mode="sov"] .okb-status-title, html[data-mode="sov"] .okb-hub-title { text-transform: uppercase; letter-spacing: .01em; font-weight: 700; color: var(--_color---theme-color--heading); } html[data-mode="sov"] .section-heading { line-height: 108%; } html[data-mode="sov"] .text-gradient, html[data-mode="sov"] .text-gradient-white { background-image: linear-gradient(90deg, var(--okb-gold), #fff3c4 55%, var(--okb-gold)); } html[data-mode="sov"] .sub-title, html[data-mode="sov"] .main-title { text-transform: uppercase; letter-spacing: .18em; font-weight: 600; color: var(--okb-gold); } /* --- кнопки: печать в две краски ---------------------------------------- */ html[data-mode="sov"] .button-primary { border: 2px solid var(--okb-gold); box-shadow: 4px 4px 0 0 #00000059; text-transform: uppercase; transition: transform .12s, box-shadow .12s; } html[data-mode="sov"] .button-primary:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 #00000059; } html[data-mode="sov"] .button-text { font-weight: 700; letter-spacing: .1em; } html[data-mode="sov"] .button-background-gradient { background-image: linear-gradient(90deg, var(--okb-kumach-dark), var(--okb-kumach) 50%, var(--okb-kumach-dark)); } html[data-mode="sov"] .submit-button, html[data-mode="sov"] .form-field-input, html[data-mode="sov"] .form-field-textarea, html[data-mode="sov"] .form-field-1 { border-radius: 2px; } html[data-mode="sov"] .form-field-input, html[data-mode="sov"] .form-field-textarea, html[data-mode="sov"] .form-field-1 { border: 1px solid #e8b92340; } /* --- карточки, рамки, свечения ------------------------------------------ */ html[data-mode="sov"] .glowing-background-one, html[data-mode="sov"] .glowing-background-one.color-dark-1, html[data-mode="sov"] .glowing-background-one.bg-2, html[data-mode="sov"] .glowing-background-one.bg3 { background-color: #4a1113; } html[data-mode="sov"] .glowing-background-two, html[data-mode="sov"] .glowing-background-two.color-dark-2 { background-color: #150807; } html[data-mode="sov"] .glowing-background-two.bg-2 { background-image: linear-gradient(#180908, #0d0605); } html[data-mode="sov"] .circle-blur { opacity: .5; } html[data-mode="sov"] .main-divider-1, html[data-mode="sov"] .main-divider-2, html[data-mode="sov"] .main-divider-glowing { filter: none; } html[data-mode="sov"] .glowing-triangle { filter: hue-rotate(285deg) saturate(2.4); } html[data-mode="sov"] .pricing-item-wrap { border: 1px solid #e8b92338; background-image: linear-gradient(180deg, #1a0a08, #0c0605); } html[data-mode="sov"] .pricing-item-wrap:before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: repeating-linear-gradient(135deg, var(--okb-kumach) 0 10px, #7d0d14 10px 20px); } html[data-mode="sov"] .okb-tier-name { color: var(--okb-gold); } /* --- шапка и меню -------------------------------------------------------- */ html[data-mode="sov"] .main-header-1 { border-bottom: 1px solid #e8b9231f; } html[data-mode="sov"] .text-logo { text-transform: uppercase; letter-spacing: .04em; } html[data-mode="sov"] .main-logo { filter: hue-rotate(300deg) saturate(2.2) brightness(1.05); } html[data-mode="sov"] .menu-item-link { text-transform: uppercase; font-size: 14px; letter-spacing: .08em; font-weight: 600; } html[data-mode="sov"] .okb-switch { border-color: var(--okb-gold); background: rgba(232, 185, 35, .1); color: #ffe9a8; } html[data-mode="sov"] .okb-switch:hover { background: var(--okb-kumach); color: #fff6e6; border-color: #ffe9a8; box-shadow: 4px 4px 0 0 #00000059; } html[data-mode="sov"] .okb-switch-mark { opacity: 1; } /* -------------------------------------------------------------------------- 4. Что появляется только в режиме СОЮЗ -------------------------------------------------------------------------- */ /* Кумачовая лента через всю страницу */ .okb-ribbon { position: relative; z-index: 998; 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: 9px 34px; color: #ffe9a8; font-size: 11px; font-weight: 700; letter-spacing: .3em; 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 { position: relative; 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: 30px 34px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; box-shadow: 6px 6px 0 0 #00000059; } .okb-poster-art { flex: none; width: 132px; } .okb-poster-body { flex: 1 1 320px; } .okb-poster-title { color: #fff6e6; font-size: 26px; font-weight: 700; line-height: 112%; text-transform: uppercase; letter-spacing: .01em; margin-bottom: 10px; } .okb-poster-text { color: #efdcc4cc; font-size: 16px; line-height: 158%; } .okb-poster-text b { color: var(--okb-gold); font-weight: 600; } /* Первый экран становится сценой для дирижабля */ html[data-mode="sov"] section.section:first-of-type { position: relative; overflow: hidden; } /* Дирижабль над первым экраном */ .okb-airship { position: absolute; top: 8%; left: -220px; width: 210px; opacity: .9; pointer-events: none; z-index: 2; animation: okb-drift 46s linear infinite; } @keyframes okb-drift { from { transform: translateX(0) translateY(0) } 50% { transform: translateX(60vw) translateY(-16px) } to { transform: translateX(125vw) translateY(0) } } @media (prefers-reduced-motion: reduce) { .okb-airship { animation: none; left: 4%; opacity: .5; } } @media screen and (max-width: 767px) { .okb-airship { display: none; } } /* Медведь-оператор */ .okb-bear { display: flex; align-items: center; gap: 18px; border-left: 3px solid var(--okb-kumach); background: linear-gradient(90deg, rgba(193,18,31,.14), transparent); padding: 16px 20px; margin-top: 26px; } .okb-bear-art { flex: none; width: 62px; } .okb-bear-text { color: #efdcc4cc; font-size: 15px; line-height: 155%; } .okb-bear-text b { color: var(--okb-gold); display: block; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; margin-bottom: 4px; } /* Плашка приказа */ .okb-order { border: 1px solid #e8b92338; border-left: 4px solid var(--okb-kumach); background: linear-gradient(180deg, #1a0a08, #0c0605); padding: 22px 26px; margin: 26px 0; } .okb-order-head { color: var(--okb-gold); font-size: 11px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; margin-bottom: 10px; } .okb-order p { margin: 0; color: #efdcc4cc; line-height: 160%; } /* Звёздочки вместо точек в списках возможностей */ html[data-mode="sov"] .okb-status-col .list-icon-1, html[data-mode="sov"] .list-icon-1 { filter: hue-rotate(300deg) saturate(3) brightness(1.15); } /* Штамп: в СОЮЗЕ он крупнее и золотой */ html[data-mode="sov"] .okb-stamp { border-color: var(--okb-gold); color: var(--okb-gold); letter-spacing: 3px; transform: rotate(-3.5deg); box-shadow: 3px 3px 0 0 #00000047; } /* Донесения 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; letter-spacing: .02em; 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% + 8px); padding: 5px 10px; border: 1px solid var(--okb-gold); background: #14070a; color: #ffe9a8; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: none; white-space: nowrap; opacity: 0; transform: translateY(-4px); transition: opacity .18s, transform .18s; pointer-events: none; z-index: 6; } html[data-mode="sov"] .pricing-item-wrap:hover [data-ack]:after { opacity: 1; transform: translateY(0); } /* План пятилетки */ .okb-plan { border: 2px solid var(--okb-gold); background: linear-gradient(160deg, #2a0c0a, #0c0605); padding: 28px 32px; box-shadow: 6px 6px 0 0 #00000059; } .okb-plan-head { color: #fff6e6; font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 18px; } .okb-plan-bar { position: relative; height: 30px; background: #1a0a08; border: 1px solid #e8b92347; overflow: hidden; } .okb-plan-fill { height: 100%; width: 100%; background: repeating-linear-gradient(135deg, var(--okb-kumach) 0 14px, #8f0f18 14px 28px); animation: okb-plan-grow 1.6s cubic-bezier(.2,.8,.2,1) both; } @keyframes okb-plan-grow { from { width: 0 } to { width: 100% } } .okb-plan-num { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #ffe9a8; font-size: 14px; font-weight: 700; letter-spacing: .12em; } .okb-plan-note { color: #efdcc4a8; font-size: 14px; line-height: 155%; margin-top: 12px; } @media (prefers-reduced-motion: reduce) { .okb-plan-fill { animation: none; } } /* Железный занавес по коду 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); animation: okb-curtain-fade .6s ease-out; } @keyframes okb-curtain-fade { from { opacity: 0 } to { opacity: 1 } } /* Салют по тройному щелчку на эмблеме */ html.okb-salute .main-logo { 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) } } /* Выделение текста — кумачом */ html[data-mode="sov"] ::selection { background: var(--okb-kumach); color: #ffe9a8; } /* Подвал */ html[data-mode="sov"] .main-footer:before { content: "СЛАВА ТЯЖЁЛОЙ ЛОГИКЕ"; display: block; text-align: center; color: #e8b9231f; font-size: clamp(28px, 7vw, 92px); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 10px 16px 0; pointer-events: none; user-select: none; } html[data-mode="sov"] .copyright-text { color: #efdcc47a; }