/* Region Pricing v1.1.0 * Всё переключение — на CSS через атрибут data-region на . * Подгонка под сайт — через переменные ниже (можно переопределить в child-теме). */ :root { --rp-banner-bg: rgba(13, 10, 9, 0.96); --rp-color: #f5efe8; --rp-muted: rgba(245, 239, 232, 0.65); --rp-border: rgba(245, 239, 232, 0.55); --rp-active-bg: rgba(245, 239, 232, 0.14); --rp-font-heading: inherit; --rp-z: 99999; } /* --- Переключение видимости по региону ------------------------------- */ html:not([data-region="r2"]) .rp-val[data-r="r2"], html[data-region="r2"] .rp-val[data-r="r1"], html:not([data-region="r2"]) .rp-only-r2, html[data-region="r2"] .rp-only-r1 { display: none !important; } .rp-price { white-space: nowrap; } /* --- Полноэкранный баннер выбора региона ------------------------------ */ .rp-banner { position: fixed; inset: 0; z-index: var(--rp-z); display: none; align-items: center; justify-content: center; padding: 24px; background: var(--rp-banner-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--rp-color); text-align: center; } html[data-rp-choose] .rp-banner { display: flex; animation: rp-fade 0.4s ease both; } /* Пока баннер открыт — не дать скроллить страницу под ним */ html[data-rp-choose] body { overflow: hidden; } @keyframes rp-fade { from { opacity: 0; } to { opacity: 1; } } .rp-banner__inner { max-width: 640px; } .rp-banner__title { font-family: var(--rp-font-heading); font-size: clamp(26px, 4vw, 42px); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2; } .rp-banner__text { margin-top: 14px; font-size: 15px; letter-spacing: 0.04em; color: var(--rp-muted); } .rp-banner__choices { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 36px; } .rp-banner__btn { min-width: 240px; padding: 16px 34px; background: transparent; border: 1px solid var(--rp-border); border-radius: 40px; color: var(--rp-color); font: inherit; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background 0.25s ease, color 0.25s ease; } .rp-banner__btn:hover, .rp-banner__btn:focus-visible { background: var(--rp-color); color: #131010; outline: none; } /* --- Переключатель-пилюля [region_switcher] --------------------------- */ .rp-switch { display: flex; width: max-content; max-width: 100%; margin: 0 auto; border: 1px solid var(--rp-border); border-radius: 40px; overflow: hidden; } .rp-switch button { background: none; border: 0; padding: 11px 26px; color: var(--rp-color); font: inherit; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; opacity: 0.5; transition: opacity 0.2s ease, background 0.2s ease; } html:not([data-region="r2"]) .rp-switch button[data-r="r1"], html[data-region="r2"] .rp-switch button[data-r="r2"] { opacity: 1; background: var(--rp-active-bg); } @media (max-width: 480px) { .rp-banner__btn { min-width: 100%; } .rp-switch button { padding: 10px 18px; } }