/* === Onest Font === */
@font-face {
font-family: "Onest";
src: url("../fonts/Onest-VariableFont_wght.ttf") format("truetype");
font-weight: 100 900;
font-display: swap;
}
@font-face {
font-family: "MPlusRounded";
src: url("../fonts/MPLUSRounded1c-ExtraBold.ttf") format("truetype");
font-weight: 800;
font-display: swap;
}
/* === Квизабра — Main Styles === */
:root {
--bg-dark: #162737;
--bg-mid: #004372;
--accent-orange: #F9A230;
--accent-blue: #01CAE8;
--card-bg: rgba(255,255,255,0.08);
--card-border: rgba(1,202,232,0.3);
--text-primary: #ffffff;
--text-secondary: rgba(255,255,255,0.7);
--text-muted: rgba(255,255,255,0.5);
--glow-orange: 0 0 20px rgba(249,162,48,0.4);
--glow-blue: 0 0 20px rgba(1,202,232,0.3);
--radius-card: 20px;
--radius-btn: 50px;
--shadow-card: 0 8px 32px rgba(0,0,0,0.3);
--font-heading: 'Onest', sans-serif;
--font-body: 'Onest', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
color: var(--text-primary);
background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-mid) 100%);
background-attachment: fixed;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
a { color: var(--accent-blue); text-decoration: none; transition: all 0.3s; }
a:hover { color: var(--accent-orange); }
img { max-width: 100%; height: auto; }
/* === Typography === */
h1, h2, h3 { font-family: var(--font-heading); font-weight: 800; line-height: 1.2; }
h1 { font-size: clamp(38px, 5.5vw, 68px); text-transform: uppercase; letter-spacing: 0.03em; }
h2 { font-size: clamp(28px, 3.5vw, 44px); font-weight: 700; }
h3 { font-size: clamp(20px, 2.5vw, 28px); font-weight: 700; }
p { color: var(--text-secondary); font-size: 17px; }
/* === Buttons === */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 14px 36px; border-radius: var(--radius-btn); font-family: var(--font-body);
font-weight: 600; font-size: 16px; cursor: pointer; transition: all 0.3s;
text-decoration: none; border: 2px solid transparent; white-space: nowrap;
}
.btn-primary {
background: var(--accent-orange); color: #fff; border-color: var(--accent-orange);
box-shadow: var(--glow-orange);
}
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 0 30px rgba(245,166,35,0.6); color: #fff; }
.btn-secondary {
background: var(--accent-blue); color: #fff; border-color: var(--accent-blue);
}
.btn-secondary:hover { filter: brightness(1.1); transform: translateY(-2px); color: #fff; }
.btn-outline {
background: transparent; color: var(--text-primary); border-color: rgba(255,255,255,0.3);
}
.btn-outline:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
/* === Glass Card === */
.glass-card {
background: var(--card-bg); border: 1px solid var(--card-border);
border-radius: var(--radius-card); padding: 32px;
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
box-shadow: var(--shadow-card); transition: all 0.3s;
}
.glass-card:hover { border-color: rgba(79,195,247,0.6); transform: translateY(-4px); }
/* === Header === */
.site-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
padding: 16px 0; transition: all 0.3s;
}
.site-header.scrolled {
background: rgba(13,27,62,0.9); backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px); padding: 10px 0;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.header-inner { display: flex; align-items: center; gap: 24px; max-width: 1400px; margin: 0 auto; padding: 0 16px 0 40px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-icon {
width: 40px; height: 40px; background: var(--accent-orange); border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-heading); font-weight: 800; font-size: 22px; color: #fff;
}
.logo-text {
font-family: var(--font-heading); font-weight: 800; font-size: 20px;
color: #fff; letter-spacing: 0.05em; text-transform: uppercase;
}
.logo-dot { color: var(--accent-orange); }
.main-nav { display: flex; gap: 28px; }
.nav-link { color: var(--text-secondary); font-size: 15px; font-weight: 500; transition: color 0.3s; }
.nav-link:hover { color: #fff; }
.header-cta { padding: 10px 24px; font-size: 14px; }
.burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.burger span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; transition: all 0.3s; }
.burger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.burger.active span:nth-child(2) { opacity: 0; }
.burger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.mobile-menu {
position: fixed; top: 0; right: -100%; width: 300px; height: 100vh;
background: rgba(13,27,62,0.98); backdrop-filter: blur(20px);
display: flex; flex-direction: column; padding: 80px 32px 32px; gap: 24px;
transition: right 0.3s; z-index: 999;
}
.mobile-menu.active { right: 0; }
.mobile-menu .nav-link { font-size: 20px; color: #fff; }
.mobile-menu .btn { width: 100%; text-align: center; margin-top: 16px; }
/* === Hero === */
.hero {
min-height: 100vh; display: flex; align-items: center;
padding: 120px 0 80px; position: relative; overflow: hidden;
}
.hero-content { max-width: 640px; }
.hero-subtitle { font-size: 18px; margin: 20px 0 36px; line-height: 1.7; }
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-mascot {
width: 280px; height: 320px; background: rgba(76,175,80,0.3); border-radius: 20px;
display: flex; align-items: center; justify-content: center;
font-size: 18px; color: rgba(76,175,80,0.8); font-weight: 700; border: 2px dashed rgba(76,175,80,0.5);
}
.hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 60px; width: 100%; }
.hero .glow-circle {
position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.15; pointer-events: none;
}
.hero .glow-circle.orange { width: 400px; height: 400px; background: var(--accent-orange); top: 10%; right: 5%; }
.hero .glow-circle.blue { width: 300px; height: 300px; background: var(--accent-blue); bottom: 10%; left: 10%; }
/* === Players page: hero two-column layout === */
.players-hero-inner {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 60px;
width: 100%;
}
.players-hero-left {
max-width: 640px;
display: flex;
flex-direction: column;
}
.players-hero-title {
line-height: 1.05;
margin: 0;
margin-top: -50px;
text-align: center;
}
.players-hero-title-sub {
display: inline-block;
font-family: "Onest", sans-serif !important;
font-size: clamp(24px, 2.6vw, 40px);
font-weight: 800;
line-height: 1.1;
white-space: nowrap;
}
.players-hero-title-main {
display: inline-block;
font-family: "MPlusRounded", sans-serif !important;
font-size: clamp(56px, 7vw, 104px);
font-weight: 800;
line-height: 1;
color: var(--accent-blue);
margin-top: -4px;
text-transform: uppercase;
letter-spacing: normal;
}
.players-hero-right {
max-width: 560px;
padding-left: 15px;
margin-top: -20px;
color: #fff;
}
.players-hero-right .hero-subtitle {
color: #fff;
}
.players-cta-wrap {
position: relative;
display: inline-block;
margin-top: 338px;
margin-bottom: 0;
align-self: center;
}
.players-cta-btn {
font-size: 28px !important;
padding: 25px 84px !important;
border-radius: 999px !important;
white-space: nowrap;
}
/* mascots на CTA-кнопках — на desktop скрыты, показываются только на мобиле через responsive.css */
.adv-cta-mascot, .addresses-cta-mascot, .venue-cta-mascot { display: none; }
/* partners-pager (dots + arrow в карусели партнёров) на desktop скрыт, виден только в mobile-карусели */
.partners-pager { display: none; }
/* partners-arrow-click — кликабельная стрелка карусели, только на mobile (см. responsive.css) */
.partners-arrow-click { display: none; }
.players-cta-mascot {
position: absolute;
left: 50%;
bottom: calc(100% - 11px);
transform: translateX(-50%);
width: 102px;
height: auto;
border: none;
background: none;
pointer-events: none;
z-index: 2;
}
@media (max-width: 900px) {
.players-hero-inner { grid-template-columns: 1fr; gap: 40px; }
.players-cta-wrap { margin-top: 100px; }
.players-cta-mascot { width: 75px; bottom: calc(100% - 10px); }
.players-cta-btn { font-size: 18px !important; padding: 18px 44px !important; }
}
/* === Slide — full-screen presentation-style wrapper === */
.slide {
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
/* === Section base === */
.section { padding: 100px 0; }
.section-compact { padding: 32px 0; }
.section-title { text-align: center; margin-bottom: 16px; font-style: normal !important; }
.section-subtitle { text-align: center; color: var(--text-secondary); margin-bottom: 56px; font-size: 18px; }
/* === Numbers === */
.numbers-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.number-card { text-align: center; }
.number-card .label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-blue); margin-bottom: 8px; }
.number-card .value { font-family: var(--font-heading); font-size: clamp(40px, 5.6vw, 64px); font-weight: 800; color: var(--accent-orange); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap !important; overflow: hidden !important; max-width: 100% !important; }
.numbers-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
grid-template-rows: 220px !important;
grid-auto-rows: 220px !important;
align-items: stretch !important;
gap: 24px;
}
.number-card {
height: 220px !important;
min-height: 220px !important;
max-height: 220px !important;
width: 100% !important;
min-width: 0 !important;
padding: 24px !important;
contain: size layout style !important;
overflow: hidden !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
}
.number-card .detail { font-size: 15px; color: var(--text-secondary); margin-top: 4px; }
/* === Pricing === */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.pricing-card { position: relative; text-align: center; }
.pricing-card.featured { transform: scale(1.05); border-color: var(--accent-orange); box-shadow: var(--glow-orange), var(--shadow-card); }
.pricing-badge {
position: absolute; top: -14px; right: 20px;
background: var(--accent-orange); color: #fff; padding: 4px 16px;
border-radius: 20px; font-size: 13px; font-weight: 700;
white-space: nowrap;
}
.pricing-name { font-family: var(--font-heading); font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.pricing-period { color: var(--text-muted); font-size: 14px; margin-bottom: 20px; }
.pricing-price { font-family: var(--font-heading); font-size: 36px; font-weight: 800; color: var(--accent-orange); margin-bottom: 4px; }
.pricing-old { color: var(--text-muted); font-size: 14px; text-decoration: line-through; margin-bottom: 20px; }
.pricing-features { list-style: none; text-align: left; margin: 20px 0; }
.pricing-features li { padding: 8px 0; font-size: 15px; color: var(--text-secondary); border-bottom: 1px solid rgba(255,255,255,0.05); }
.pricing-features li::before { content: "•"; color: var(--accent-blue); margin-right: 10px; }
/* === Geography === */
.geography { position: relative; padding: 350px 0 50px !important; }
body.home .slide.geography { padding-top: 44px !important; }
/* Тёмный фон переехал на слайд «Как вступить в игру?» */
#slide-how-to-join { background: rgba(0,0,0,0.2); }
.geography .section-title { font-size: clamp(22px, 2.8vw, 34px) !important; margin-bottom: 12px !important; }
.geography .geo-split { gap: 60px !important; margin-top: 16px !important; max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; }
.geography .geo-venue-card { padding: 16px 22px !important; max-width: 100% !important; width: 100% !important; }
#slide-geo-numbers .numbers-grid { margin-bottom: 25pt !important; }
.geography .geo-venue-img { width: 80px !important; height: 80px !important; object-fit: contain !important; border-radius: 10px; background: #fff; padding: 6px; }
.geography .geo-venue-info h3 { font-size: 18px !important; }
.geography .geo-venue-info p { font-size: 15px !important; }
.geography .geo-map-svg { max-width: 600px !important; }
.geography .container { max-width: 1400px !important; }
.geo-map {
position: relative; width: 100%; height: 300px; margin: 40px 0;
background: rgba(0,0,0,0.3); border-radius: var(--radius-card); overflow: hidden;
}
.geo-dot {
position: absolute; width: 10px; height: 10px; background: var(--accent-blue);
border-radius: 50%; animation: pulse 2s infinite;
}
.geo-dot::after {
content: attr(data-city); position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
font-size: 11px; color: var(--text-secondary); white-space: nowrap;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(79,195,247,0.6); }
50% { box-shadow: 0 0 0 12px rgba(79,195,247,0); }
}
.geo-caption { text-align: center; color: var(--text-secondary); font-size: 16px; }
/* === CTA Apps === */
.cta-apps { text-align: center; }
.cta-apps h2 { margin-bottom: 32px; }
.store-buttons { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.store-btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 12px 28px; border: 1px solid rgba(255,255,255,0.3); border-radius: var(--radius-btn);
color: #fff; font-size: 15px; font-weight: 500; transition: all 0.3s;
}
.store-btn:hover { border-color: var(--accent-orange); color: var(--accent-orange); transform: translateY(-2px); box-shadow: 0 0 0 1px var(--accent-orange) inset; }
.store-btn .icon { font-size: 20px; }
/* === Contact === */
.contact-form { max-width: 600px; margin: 0 auto; }
.form-group { margin-bottom: 20px; }
.form-group input, .form-group textarea {
width: 100%; padding: 14px 20px; background: var(--card-bg); border: 1px solid var(--card-border);
border-radius: 12px; color: #fff; font-size: 16px; font-family: var(--font-body);
transition: border-color 0.3s; outline: none;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-muted); }
.form-group input:focus, .form-group textarea:focus { border-color: var(--accent-blue); }
.form-group textarea { min-height: 120px; resize: vertical; }
.form-success { text-align: center; color: #4caf50; font-size: 16px; padding: 20px; display: none; }
/* === Footer === */
.site-footer { background: rgba(0,0,0,0.3); padding: 40px 0 0; margin-top: 0; }
.footer-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; max-width: 1360px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-grid > .footer-col:first-child { flex: 0 0 260px; }
.footer-grid > .footer-col { flex: 0 1 auto; }
.footer-col .footer-links li a { white-space: nowrap; }
.footer-venues .footer-venue-name { color: #F9A230 !important; }
.footer-col h4 { font-family: "MPlusRounded", sans-serif; font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-blue); margin-bottom: 14px; }
.footer-col p,
.footer-col a,
.footer-col .footer-links li { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: #fff; }
.footer-col .footer-links.footer-venues li { max-width: none; }
.footer-col p { color: #fff; }
.footer-col a { text-decoration: none; }
.footer-col a:hover { color: var(--accent-blue); }
.footer-social-nick { color: #F9A230; text-decoration: underline; }
/* Соцсети в футере — никаких hover-эффектов на ссылках */
.footer-col .footer-links a,
.footer-col .footer-links a:hover,
.footer-col .footer-links a:focus,
.footer-col .footer-links a:active {
color: #fff !important;
text-decoration: none !important;
transition: none !important;
}
.footer-col .footer-links a:hover .footer-social-nick,
.footer-col .footer-links a .footer-social-nick {
color: #F9A230 !important;
text-decoration: underline !important;
}
.footer-col .footer-links { list-style: none; }
.footer-col .footer-links li { margin-bottom: 6px; }
.footer-logo { margin-bottom: 12px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; flex-wrap: wrap; gap: 12px; }
.footer-bottom p { font-size: 13px; color: var(--text-muted); }
.footer-bottom-brand { margin-left: calc(50% - 50vw); padding-left: 24px; }
.footer-bottom a { color: var(--text-muted); font-size: 13px; }
.footer-bottom a:hover { color: var(--accent-blue); }
/* === Scroll Animations === */
.fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.6s, transform 0.6s; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up:nth-child(2) { transition-delay: 0.1s; }
.fade-up:nth-child(3) { transition-delay: 0.2s; }
.fade-up:nth-child(4) { transition-delay: 0.3s; }
/* === Logo image === */
.logo-img { height: 36px; width: auto; }
.site-header.scrolled .logo-img { height: 30px; }
/* === WP overrides === */
body, body.page, body.home {
background: linear-gradient(180deg, #162737 0%, #004372 100%) !important;
background-attachment: fixed !important;
color: #ffffff !important;
}
html { background: #162737 !important; }
/* Fallback: show content even if JS hasn't loaded yet */
.fade-up { opacity: 1; transform: none; }
.js-loaded .fade-up { opacity: 0; transform: translateY(30px); }
.js-loaded .fade-up.visible { opacity: 1; transform: translateY(0); }
/* FORCE all content visible */
.fade-up, .js-loaded .fade-up {
opacity: 1 !important;
transform: none !important;
}
/* === Video background === */
.hero { position: relative; overflow: hidden; }
.hero-video {
position: absolute; top: 50%; left: 50%;
min-width: 100%; min-height: 100%;
width: auto; height: auto;
transform: translate(-50%, -50%);
z-index: 0; object-fit: cover;
}
.hero .container { position: relative; z-index: 2; }
.hero .glow-circle { z-index: 1; }
/* Fix video as background behind content */
.hero-video {
opacity: 0.6;
}
.hero::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(180deg, rgba(22,39,55,0.5) 0%, rgba(0,67,114,0.7) 100%);
z-index: 1;
}
.hero .container { position: relative; z-index: 3; }
.hero .glow-circle { z-index: 2; }
.hero-video { z-index: 0; }
/* === Site-wide video background === */
.site-bg-video {
position: fixed;
top: 0; left: 0;
min-width: 100vw; min-height: 100vh;
width: auto; height: auto;
object-fit: cover;
z-index: -2;
opacity: 0.4;
}
/* Remove old gradient background — video replaces it */
body, body.page, body.home {
background: #162737 !important;
}
/* Dark overlay on top of video for readability */
body::before {
content: '';
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(180deg, rgba(22,39,55,0.6) 0%, rgba(0,67,114,0.5) 100%);
z-index: -1;
pointer-events: none;
}
/* Remove hero-specific video styles */
.hero-video { display: none; }
.hero::after { display: none; }
/* === Font weight mapping per brand guide === */
h1, h2, h3 { font-family: "Onest", sans-serif; font-weight: 700; }
body, p { font-family: "Onest", sans-serif; font-weight: 500; }
.btn, strong, .pricing-name, .number-card .value { font-family: "Onest", sans-serif; font-weight: 800; }
/* === Header fixes === */
.logo-img { height: 32px !important; }
.site-header.scrolled .logo-img { height: 27px !important; }
.main-nav { gap: 20px !important; }
.nav-link { font-size: 16px !important; white-space: nowrap !important; }
.header-cta { padding: 11px 26px !important; font-size: 17px !important; white-space: nowrap !important; border-radius: 40px !important; }
.header-inner { gap: 16px !important; }
/* Smaller dragon */
.hero-mascot { width: 200px !important; max-width: 30vw !important; }
/* === Static image background === */
.site-bg-video { display: none !important; }
html { background: #004372 !important; }
body, body.page, body.home {
position: relative;
min-height: 100%;
background: transparent !important;
background-color: transparent !important;
isolation: isolate;
}
body::before {
content: '' !important;
display: block !important;
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background: url('../img/bg_1280_25.jpg') center/cover no-repeat #004372 !important;
}
/* === Фирменные плашки для карточек === */
.glass-card {
background: rgba(30,50,70,0.65) !important;
border: 1px solid rgba(1,202,232,0.2) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
/* === Шрифт проверка — Onest variable === */
* { font-family: "Onest", sans-serif !important; }
h1, h2, h3, .pricing-name { font-weight: 700 !important; }
.btn, .number-card .value { font-weight: 800 !important; }
body, p, .nav-link { font-weight: 500 !important; }
/* === Equal height pricing cards === */
.pricing-grid {
align-items: stretch !important;
}
.pricing-card {
display: flex !important;
flex-direction: column !important;
}
.pricing-card .pricing-features {
flex: 1 !important;
}
.pricing-card .btn {
margin-top: auto !important;
}
/* Venue cards — natural aspect ratio, no cropping */
.venue-card-img {
width: 100%;
height: auto;
display: block;
border-radius: 20px;
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
object-fit: contain;
aspect-ratio: auto;
}
/* Venue booking block — centered under image, whole area clickable */
.venue-booking {
display: block;
text-align: center;
margin-top: 16px;
text-decoration: none;
color: inherit;
}
.venue-booking:hover { text-decoration: none; }
.venue-booking-label {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #fff !important;
font-size: 16px;
text-decoration: underline !important;
text-underline-offset: 4px;
transition: color 0.2s;
}
.venue-booking-label:hover { color: #01CAE8 !important; }
/* Phone — всегда оранжевый, без смены при ховере */
.venue-phone, .venue-phone:hover, .venue-phone:focus, .venue-phone:active {
color: #F9A230 !important;
text-decoration: none !important;
}
.venue-booking-icon {
width: 1.1em;
height: 1.1em;
object-fit: contain;
vertical-align: middle;
}
.venue-phone {
display: block;
margin-top: 6px;
color: #F9A230;
font-size: 20px;
font-weight: 700;
text-decoration: none;
}
/* ============================================ */
/* === MAJOR UI OVERHAUL — 26 POINTS === */
/* ============================================ */
/* 1. Active nav link highlighting */
body.home .nav-link[href="/"],
body.page-template-page-players .nav-link[href*="players"],
body.page-template-page-venues .nav-link[href*="venues"],
body.page-template-page-about .nav-link[href*="about"] {
color: #F9A230 !important;
font-weight: 700 !important;
}
/* 2. Nav hover animation — bolder */
.nav-link:hover {
color: #fff !important;
font-weight: 700 !important;
text-shadow: 0 0 8px rgba(255,255,255,0.3) !important;
transition: all 0.2s !important;
}
/* 3. Deep blue for "эрудицию" */
.text-deep-blue {
color: #01CAE8 !important;
font-family: "MPlusRounded", sans-serif !important;
font-size: 1.63em !important;
display: inline-block;
margin-top: -7pt;
}
/* Hero h1 "ПРОВЕРЬ СВОЮ" — slightly smaller */
.hero-centered h1 {
font-size: clamp(38px, 5vw, 66px) !important;
}
.hero-title-line1 {
display: inline-block;
white-space: nowrap;
font-size: 0.63em;
font-family: "Onest", sans-serif !important;
font-weight: 800 !important;
}
/* 4. Hero subtitle — whiter text, slightly smaller */
.hero-subtitle-center {
color: #ffffff !important;
font-size: 18px !important;
line-height: 1.7 !important;
max-width: 700px !important;
margin: 30px auto 54px !important;
}
/* 5+6. Hero centered layout with dragon on top */
.hero-centered {
text-align: center !important;
max-width: 800px !important;
margin: 0 auto !important;
}
.hero-title-wrap {
position: relative;
display: inline-block;
}
.hero-dragon-top {
position: absolute;
top: -72px;
right: 0;
width: 121px;
height: auto;
z-index: 10;
pointer-events: none;
}
/* 7. Buttons — orange primary, glass for business */
.btn-glass {
background: rgba(255,255,255,0.08) !important;
border: 1px solid rgba(255,255,255,0.3) !important;
color: #fff !important;
backdrop-filter: blur(8px) !important;
padding: 14px 36px !important;
border-radius: 50px !important;
font-weight: 800 !important;
cursor: pointer !important;
transition: all 0.3s !important;
display: inline-flex !important;
text-decoration: none !important;
}
.btn-glass:hover {
border-color: var(--accent-blue) !important;
background: rgba(255,255,255,0.15) !important;
color: #fff !important;
}
.hero-buttons-center {
display: flex !important;
gap: 20px !important;
justify-content: center !important;
flex-wrap: wrap !important;
}
.hero-buttons-center .btn {
padding: 19px 49px !important;
font-size: 19px !important;
}
/* Nav shift right — logo pushes everything, nav takes remaining space and aligns right */
.main-nav {
margin-left: auto !important;
}
/* 8. Numbers spacing inside slide */
#numbers { padding-top: 0 !important; padding-bottom: 0 !important; }
/* 9. Numbers labels — bigger and bolder */
.number-card .label {
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: 0.05em !important;
}
/* 10. Pricing inside slide */
#pricing { padding-top: 0 !important; }
body.page-template-page-venues #pricing.section { min-height: auto !important; display: block !important; padding-top: 50px !important; padding-bottom: 50px !important; }
body.page-template-page-venues #pricing .section-title { margin-top: 0 !important; }
/* Pricing cards desktop — на 10% меньше (по запросу пользователя 2026-05-24) */
#pricing .pricing-card { padding: 20px 22px !important; }
#pricing .pricing-price { font-size: 27px !important; }
#pricing .pricing-name { font-size: 18px !important; }
#pricing .pricing-period { font-size: 13px !important; margin-bottom: 16px !important; }
#pricing .pricing-features { margin: 12px 0 !important; }
#pricing .pricing-features li { padding: 5px 0 !important; font-size: 13px !important; }
#pricing .pricing-card .btn { padding: 11px 18px !important; font-size: 14px !important; }
#pricing .pricing-badge { font-size: 12px !important; padding: 4px 10px !important; }
/* 11. "30 дней..." — white text */
.section-subtitle { color: #ffffff !important; }
/* 12. Less space between subtitle and pricing cards */
.pricing-grid { margin-top: 24px !important; }
/* 13. Pricing cards — remove grey, bigger text */
.pricing-card {
background: rgba(20,40,65,0.7) !important;
}
.pricing-features li {
font-size: 16px !important;
color: #fff !important;
border-bottom-color: rgba(255,255,255,0.1) !important;
}
.pricing-name { font-size: 24px !important; }
.pricing-period { font-size: 16px !important; color: rgba(255,255,255,0.8) !important; }
/* 14. Smaller pricing cards */
.pricing-card { padding: 20px 22px !important; }
/* Pricing slide — компактный, должен помещаться в один экран */
#slide-pricing .section-compact { padding: 118px 0 24px !important; }
#slide-pricing .section-title { margin-bottom: 12px !important; }
#slide-pricing .section-subtitle { margin-bottom: 32px !important; font-size: 16px !important; }
#slide-pricing .pricing-grid { margin-top: 28px !important; gap: 18px !important; }
#slide-pricing .pricing-card .pricing-name { font-size: 22px !important; margin-bottom: 2px !important; }
#slide-pricing .pricing-card .pricing-period { font-size: 14px !important; margin-bottom: 6px !important; }
#slide-pricing .pricing-card .pricing-price { font-size: 28px !important; margin-bottom: 4px !important; }
#slide-pricing .pricing-card .pricing-features { margin: 10px 0 14px !important; }
#slide-pricing .pricing-card .pricing-features li { font-size: 14px !important; padding: 6px 0 !important; }
#slide-pricing .pricing-card .btn { padding: 12px 20px !important; font-size: 15px !important; }
/* 15. Bigger discount badges */
.pricing-badge {
font-size: 18px !important;
padding: 6px 20px !important;
top: -18px !important;
}
/* 16. Geography title — bigger */
.geography .section-title { font-size: clamp(32px, 4vw, 52px) !important; }
/* Geography split layout */
.geo-split {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 40px;
align-items: center;
margin-top: 32px;
}
.geo-venues {
display: flex;
flex-direction: column;
gap: 16px;
}
.geo-venue-card {
display: flex;
align-items: center;
gap: 16px;
background: rgba(40, 70, 100, 0.50);
border: 1px solid rgba(1,202,232,0.15);
border-radius: 16px;
padding: 16px 20px;
}
.geo-venue-img {
width: 80px;
height: 60px;
object-fit: cover;
border-radius: 10px;
}
.geo-venue-info h3 {
font-size: 17px;
color: #fff;
margin-bottom: 4px;
}
.geo-venue-info p {
font-size: 14px;
color: rgba(255,255,255,0.7);
margin: 0;
}
.geo-map-wrap {
display: flex;
justify-content: center;
align-items: center;
}
.geo-map-svg {
width: 100%;
max-width: 420px;
height: auto;
}
@media (max-width: 768px) {
.geo-split { grid-template-columns: 1fr !important; }
.geo-map-wrap { order: -1; }
}
/* 18. Change geography caption text */
/* 19. Reduce spacing in footer area */
.site-footer { padding: 22px 0 0 !important; margin-top: 0 !important; }
/* 20. CTA apps — orange title, no emojis, less top padding */
.cta-apps { padding-top: 30px !important; }
.cta-apps h2 { color: #F9A230 !important; }
.store-btn .icon { display: none !important; }
/* Реальные логотипы магазинов в .store-btn */
.store-btn-logo {
width: 22px;
height: 22px;
object-fit: contain;
vertical-align: middle;
margin-right: 4px;
}
.store-buttons-venues {
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
/* Кнопки магазинов в одну строку (без переноса на десктопе) */
.store-buttons-line {
flex-wrap: nowrap !important;
gap: 12px !important;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.store-buttons-line .store-btn {
padding: 12px 18px !important;
font-size: 14px !important;
white-space: nowrap;
}
@media (max-width: 1100px) {
.store-buttons-line { flex-wrap: wrap !important; }
}
/* 21. Less space before contacts */
#contacts { padding-top: 100px !important; }
#contacts .section-title { margin-bottom: 14px !important; }
#contacts .section-subtitle { margin-bottom: 28px !important; }
#contacts .contact-frame { padding: 18px 20px !important; }
#contacts .contact-frame .form-group { margin-bottom: 10px !important; }
/* 22. Contact form — white text */
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(255,255,255,0.6) !important; }
.contact-form input, .contact-form textarea { color: #fff !important; }
.contact-form .btn { font-size: 20px !important; padding: 18px !important; }
/* 23. Contact section — less padding */
#contacts .section-subtitle { color: #fff !important; }
#contacts { padding-bottom: 30px !important; }
/* 24. Footer — less bottom padding */
.footer-bottom { padding: 12px 0 !important; }
.footer-grid { padding-bottom: 24px !important; }
#why { padding-bottom: 45px !important; }
#rules { padding-top: 30px !important; }
/* === Full-viewport slides === */
.section {
min-height: 100vh !important;
min-height: 100dvh !important;
display: flex !important;
align-items: center !important;
padding: 60px 0 !important;
}
.section > .container {
width: 100%;
}
.hero {
min-height: 100vh !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 160px 0 80px !important;
}
/* Отмена «pdf-presentation» — слайды главной по содержимому */
body.home .slide {
min-height: auto !important;
padding: 0 !important;
}
body.home .slide > .section,
body.home .slide > section.section,
body.home .slide > section.section-compact {
min-height: auto !important;
}
.hero > .container {
width: 100% !important;
max-width: 1200px !important;
margin: 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.hero .hero-centered {
width: 100% !important;
max-width: 800px !important;
margin: 0 auto !important;
text-align: center !important;
}
/* Dragon — single authoritative rule */
.hero-dragon-top {
width: 92px !important;
top: -54px !important;
right: 79px !important;
left: auto !important;
transform: none !important;
}
/* Hero: без смещений — контент ровно по центру через flex */
.hero-centered .hero-title-wrap { margin-top: 0 !important; }
.hero-buttons-center { margin-top: 0 !important; }
/* Hero subtitle: 3 строки по центру, балансировка ширины */
.hero-subtitle-center {
max-width: 660px !important;
text-wrap: balance;
}
/* === HEADER: меньше CTA, сдвиг, навигация по 7 пунктов === */
.header-cta {
padding: 7px 22px !important;
font-size: 14.3px !important;
margin-left: 6pt !important;
}
.header-tg {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(1,202,232,0.15);
border: 1px solid rgba(1,202,232,0.45);
color: #fff;
text-decoration: none;
margin-left: 6px !important;
transition: background .2s, transform .2s, color .2s, border-color .2s;
}
.header-tg:hover {
background: #01CAE8;
color: #fff;
border-color: #01CAE8;
transform: translateY(-1px);
box-shadow: 0 0 18px rgba(1,202,232,0.5);
}
.header-tg svg { display: block; }
.header-max {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(1,202,232,0.15);
border: 1px solid rgba(1,202,232,0.45);
color: #fff;
text-decoration: none;
margin-left: 2px !important;
transition: background .2s, transform .2s, color .2s, border-color .2s;
}
.header-max:hover {
background: #01CAE8;
border-color: #01CAE8;
transform: translateY(-1px);
box-shadow: 0 0 18px rgba(1,202,232,0.5);
}
.header-max img { display: block; width: 18px; height: 18px; object-fit: contain; }
/* Insta / VK иконки — стиль identичен header-tg / header-max (круг с обводкой 30x30, голубой icon) */
.header-insta, .header-vk {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(1,202,232,0.15);
border: 1px solid rgba(1,202,232,0.45);
color: #fff;
text-decoration: none;
transition: background .2s, transform .2s, color .2s, border-color .2s;
}
.header-insta:hover, .header-vk:hover {
background: #01CAE8;
color: #fff;
border-color: #01CAE8;
transform: translateY(-1px);
box-shadow: 0 0 18px rgba(1,202,232,0.5);
}
.header-insta svg, .header-vk svg { display: block; width: 18px; height: 18px; }
/* Активная страница в шапке — оранжевая */
body.home .main-nav a[href$="/"]:not([href*="/players"]):not([href*="/venues"]):not([href*="/advertisers"]):not([href*="/addresses"]):not([href*="/cabinet"]),
body.page-template-page-players .main-nav a[href*="/players"],
body.page-template-page-venues .main-nav a[href*="/venues"],
body.page-template-page-advertisers .main-nav a[href*="/advertisers"],
body.page-template-page-addresses .main-nav a[href*="/addresses"],
body.page-template-page-cabinet .main-nav a[href*="/cabinet"] {
color: #F9A230 !important;
}
.main-nav { gap: 20px !important; }
.main-nav .nav-link {
font-size: 15px !important;
white-space: nowrap !important;
}
/* Active nav link — оранжевое свечение для ВСЕХ страниц */
body.home .nav-link[href$="/"]:not([href*="cabinet"]):not([href*="#"]),
body.page-template-page-players .nav-link[href*="/players"],
body.page-template-page-venues .nav-link[href*="/venues"],
body.page-template-page-advertisers .nav-link[href*="/advertisers"],
body.page-template-page-about .nav-link[href*="/about"],
body.page-template-page-cabinet .nav-link[href*="/cabinet"] {
color: #F9A230 !important;
font-weight: 700 !important;
text-shadow: 0 0 10px rgba(249,162,48,0.6) !important;
}
/* === ABOUT QUIZABRA slide === */
.about-grid {
display: grid;
grid-template-columns: 1.45fr 1fr;
gap: 32px;
align-items: stretch;
margin-top: 42px;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
.about-card {
padding: 24px 32px;
display: flex;
flex-direction: column;
justify-content: center;
}
.about-para {
display: flex;
align-items: flex-start;
gap: 14px;
margin: 0 0 27px;
color: #fff;
font-size: 16px;
line-height: 1.5;
}
.about-para:last-child { margin-bottom: 0; }
.about-emoji {
width: 42px;
height: 42px;
flex-shrink: 0;
object-fit: contain;
}
.about-numbers {
display: flex;
flex-direction: column;
gap: 14px;
}
/* Override locked .number-card sizing внутри about-numbers */
.about-numbers .number-card {
min-height: 124px !important;
height: auto !important;
max-height: none !important;
width: 100% !important;
padding: 14px 20px !important;
}
.about-numbers .number-card .label {
font-size: 13px !important;
margin-bottom: 4px !important;
}
.about-numbers .number-card .value {
font-size: clamp(28px, 3.5vw, 44px) !important;
line-height: 1.1 !important;
letter-spacing: -0.04em !important;
overflow: visible !important;
}
/* Slide «Квизабра — это...» — +1.5x отступ от кнопок hero */
#slide-about .section { padding-top: 45px !important; padding-bottom: 40px !important; }
/* Slide «Как вступить в игру?» — x2.5 воздух сверху и снизу тёмного фона */
#slide-how-to-join .section { padding-top: 65px !important; padding-bottom: 75px !important; }
.about-numbers .number-card .detail {
font-size: 12px !important;
margin-top: 2px !important;
}
@media (max-width: 768px) {
.about-grid { grid-template-columns: 1fr !important; }
}
/* === HOW TO JOIN slide === */
.join-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 40px;
align-items: stretch;
margin-top: 40px;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.join-card {
padding: 28px 32px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.join-card p {
color: #fff;
font-size: 17px;
line-height: 1.6;
margin: 0;
}
.join-divider {
width: 100%;
max-width: 380px;
height: 4px;
object-fit: cover;
display: block;
margin: 18px auto;
opacity: 0.85;
transform: scaleY(0.5);
}
.join-stores {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding-left: 60px;
padding-right: 0;
}
.join-stores .store-btn {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 14px;
font-size: 16px;
padding: 14px 24px 14px 62px;
width: 260px;
box-sizing: border-box;
transition: all 0.25s;
}
.join-stores .store-btn:hover {
background: transparent !important;
border-color: #F9A230 !important;
color: #F9A230 !important;
box-shadow: 0 0 0 1px #F9A230 inset !important;
}
/* Dragon 3-99 1 — справа торчит из края экрана */
#slide-how-to-join { position: relative; overflow: hidden; }
.join-dragon {
position: absolute;
right: -27px;
top: 50%;
width: 187px;
height: auto;
transform: translateY(-50%) rotate(-90deg);
pointer-events: none;
z-index: 1;
}
@media (max-width: 1100px) {
.join-dragon { display: none; }
}
@media (max-width: 768px) {
.join-grid { grid-template-columns: 1fr !important; }
}
/* Cabinet responsive */
@media (max-width: 768px) {
#dashboard table { font-size: 13px; }
#dashboard [style*="grid-template-columns:repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
#dashboard [style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr !important; }
}
/* Players hero: full viewport */
.hero.players-hero {
padding-top: 100px !important;
padding-bottom: 20px !important;
}
/* === Scroll-down arrow indicator === */
.scroll-arrow {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
color: rgba(255,255,255,0.5);
text-decoration: none;
z-index: 5;
animation: bounce 2s ease infinite;
}
.scroll-arrow span {
font-size: 11px !important;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 500 !important;
}
.scroll-arrow svg {
width: 22px;
height: 22px;
}
.scroll-arrow:hover {
color: rgba(255,255,255,0.8);
}
.scroll-arrow.hidden {
opacity: 0;
pointer-events: none;
transition: opacity 0.4s;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
40% { transform: translateX(-50%) translateY(-8px); }
60% { transform: translateX(-50%) translateY(-4px); }
}
/* === Players hero text card === */
.players-hero-card {
background: rgba(30, 50, 70, 0.35);
border-radius: 24px;
padding: 24px 32px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.hero-card-divider {
border: none;
border-top: 1px solid rgba(255,255,255,0.15);
margin: 16px 0;
}
/* === Why Quizabra cards with frame bg === */
.why-card {
background: rgba(40, 70, 100, 0.50);
border: 1px solid rgba(1,202,232,0.15);
border-radius: 20px;
padding: 26px 30px;
}
.why-card-inner {
display: flex;
gap: 18px;
align-items: center;
}
.why-card h3 { font-size: 18px !important; margin-bottom: 8px !important; color: #F9A230 !important; }
.why-card p { font-size: 16px !important; line-height: 1.5 !important; }
@media (min-width: 769px) {
body.page-template-page-players .why-card { padding: 20px 24px !important; }
body.page-template-page-players .why-card h3 { font-size: 16px !important; margin-bottom: 6px !important; }
body.page-template-page-players .why-card p { font-size: 14px !important; line-height: 1.5 !important; }
body.page-template-page-players .why-grid { gap: 18px !important; }
}
@media (max-width: 768px) {
.why-grid { grid-template-columns: 1fr !important; }
}
/* White text inside rule cards */
#rules .glass-card p {
color: #fff !important;
}
/* Center players hero content vertically */
.players-hero-inner {
align-items: center !important;
}
/* === Dragon on rules card === */
.rules-dragon {
position: absolute;
top: -100px;
left: 50%;
transform: translateX(-50%);
width: 93px;
height: auto;
pointer-events: none;
z-index: 5;
}
.rules-card-dragon {
overflow: visible !important;
}
/* === Players hero: subtitle text in card === */
.players-hero-right .hero-subtitle {
font-size: 18.5px !important;
line-height: 1.65 !important;
}
.players-hero-cta-below {
display: flex;
justify-content: center;
margin-top: 20px;
}
.btn-blueglass {
background: rgba(1,202,232,0.10) !important;
border: 1px solid rgba(1,202,232,0.35) !important;
color: #fff !important;
}
.btn-blueglass:hover {
background: rgba(1,202,232,0.18) !important;
border-color: var(--accent-blue) !important;
}
/* === Contact form — фирменная плашка === */
.contact-frame {
max-width: 520px;
margin: 0 auto;
padding: 36px 40px;
border: 1px solid rgba(1,202,232,0.25);
border-image: none;
border-radius: 28px;
background: rgba(0, 67, 114, 0.55);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 10px 40px rgba(0,0,0,0.35);
position: relative;
}
.contact-frame .contact-form {
max-width: 100%;
margin: 0;
}
.contact-form-lead {
color: #fff;
font-size: 15px;
line-height: 1.55;
margin: 0 0 18px;
text-align: center;
}
.contact-dragon {
position: absolute;
right: 5px;
top: -77px;
bottom: auto;
width: 114px;
height: auto;
pointer-events: none;
z-index: 2;
}
@media (max-width: 1100px) {
.contact-dragon { display: none; }
}
/* === Contacts — two-column (left: form, right: marketing) === */
.contacts-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
max-width: 1140px;
margin: 0 auto;
}
.contacts-left { text-align: left; }
.contacts-left .section-title {
text-align: center !important;
max-width: 560px;
margin-left: 0 !important;
margin-right: 0 !important;
position: relative;
z-index: 3;
font-size: clamp(25px, 3vw, 38px) !important;
}
.contacts-left .section-subtitle {
text-align: left !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.contacts-left .contact-frame {
margin: 0;
max-width: 560px;
}
.contacts-right { color: #fff; }
.contacts-right h3 {
font-family: "MPlusRounded", sans-serif;
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.25;
color: var(--accent-orange);
margin-bottom: 18px;
}
.contacts-right p {
font-size: 16px;
line-height: 1.7;
color: rgba(255,255,255,0.92);
margin-bottom: 14px;
}
.contacts-right .contacts-punch {
color: #fff;
font-weight: 700;
font-size: 18px;
margin-top: 18px;
margin-bottom: 0;
}
@media (max-width: 980px) {
.contacts-split { grid-template-columns: 1fr; gap: 36px; }
.contacts-left { text-align: center; }
.contacts-left .section-title,
.contacts-left .section-subtitle { text-align: center !important; }
.contacts-left .contact-frame { margin: 0 auto; }
.contacts-right { text-align: center; }
}
/* === FAQ accordion === */
#slide-faq { position: relative; min-height: auto !important; display: block !important; }
#faq { padding-top: 30px !important; padding-bottom: 40px !important; }
#faq .section-title { margin-bottom: 8px !important; }
.faq-list {
max-width: 780px;
margin: 28px auto 0;
column-count: 1;
}
.faq-item {
border: 1px solid rgba(1,202,232,0.22);
background: rgba(0,67,114,0.45);
border-radius: 16px;
margin: 0 0 14px;
overflow: hidden;
break-inside: avoid;
-webkit-column-break-inside: avoid;
}
.faq-q {
width: 100%;
display: flex; align-items: center; justify-content: space-between; gap: 18px;
background: none; border: none; cursor: pointer;
padding: 20px 24px;
font-family: var(--font-body);
font-size: 18px; font-weight: 600; color: #fff; text-align: left;
}
.faq-icon {
flex: 0 0 auto;
width: 26px; height: 26px; position: relative;
border-radius: 50%;
background: var(--accent-orange);
transition: transform 0.3s;
}
.faq-icon::before, .faq-icon::after {
content: ""; position: absolute; left: 50%; top: 50%;
background: #fff; border-radius: 2px;
}
.faq-icon::before { width: 12px; height: 2px; transform: translate(-50%, -50%); }
.faq-icon::after { width: 2px; height: 12px; transform: translate(-50%, -50%); transition: opacity 0.3s; }
.faq-item.open .faq-icon { transform: rotate(180deg); }
.faq-item.open .faq-icon::after { opacity: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-item.open .faq-a { max-height: 460px; }
.faq-a p {
padding: 0 24px 20px;
margin: 0;
font-size: 16px; line-height: 1.7;
color: #fff;
}
.faq-a a { color: var(--accent-blue); text-decoration: underline; }
@media (max-width: 900px) {
.faq-list { column-count: 1; max-width: 720px; }
}
@media (max-width: 600px) {
.faq-q { font-size: 16px; padding: 16px 18px; }
.faq-a p { padding: 0 18px 16px; }
.faq-item.open .faq-a { max-height: 640px; }
}
/* === Фирменный разделитель между блоками === */
.block-divider {
text-align: center;
margin: 0 auto 50px;
}
/* Эталон отступа ПЕРЕД белым заголовком (desktop): h2 идущий сразу после .block-divider —
получает margin-top:0, гэп задаётся целиком разделителем */
@media (min-width: 769px) {
.block-divider + h2,
.block-divider + .section-title,
.block-divider ~ h2.section-title:first-of-type { margin-top: 0 !important; }
}
.block-divider img {
width: 80%;
max-width: 700px;
height: 4px;
object-fit: cover;
opacity: 0.6;
transform: scaleY(0.5);
display: block;
margin-left: auto;
margin-right: auto;
}
/* === Venues hero — две колонки: слева заголовок+описание, справа крупные кнопки + динозаврик === */
.venues-hero { min-height: auto; padding: 150px 0 50px; }
.venues-hero-inner {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
align-items: center;
gap: 56px;
width: 100%;
}
.venues-hero-left { max-width: 640px; text-align: center; }
.venues-hero-left .venues-hero-h1 { text-align: center; margin-top: 0; }
.venues-hero-left .players-hero-title-sub { font-size: clamp(32px, 3.8vw, 56px); }
.venues-hero-left .players-hero-title-main { white-space: normal; line-height: 0.95; font-size: clamp(60px, 9vw, 140px); }
.venues-hero-left .hero-subtitle { color: #fff; }
.venues-hero-right {
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
}
.venues-cta-wrap { position: relative; display: inline-block; margin-top: 110px; }
.venues-cta-mascot {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -132px;
width: 120px;
height: auto;
pointer-events: none;
z-index: 3;
}
.venues-cta-btn,
.venues-cta-btn2 {
font-size: 17px;
padding: 16px 48px;
min-width: 280px;
justify-content: center;
}
@media (max-width: 900px) {
.venues-hero-inner { grid-template-columns: 1fr; gap: 40px; text-align: center; }
.venues-hero-left { max-width: none; margin: 0 auto; }
.venues-hero-left .venues-hero-h1 { text-align: center; }
.venues-cta-wrap { margin-top: 96px; }
}
@media (max-width: 600px) {
.venues-hero-left .players-hero-title-main { white-space: normal; font-size: clamp(40px, 12vw, 76px); }
.venues-cta-btn, .venues-cta-btn2 { min-width: 0; width: 100%; max-width: 320px; padding: 18px 28px; }
}
/* === Venues benefits — 3+2, без иконок, текст целиком === */
#benefits.section { min-height: auto !important; padding: 45px 0 52px !important; }
#benefits .section-title { margin-top: 0 !important; }
#benefits .benefits-grid { margin-top: 45px !important; }
#faq-venue.section { min-height: auto !important; display: block !important; padding: 45px 0 70px !important; }
#faq-venue .section-title { margin-top: 0 !important; margin-bottom: 0 !important; }
#faq-venue .faq-list { margin-top: 45px !important; }
#calc-cta.section { min-height: auto !important; display: block !important; padding: 0 0 0 !important; }
/* Bulletproof override для #calc-cta на venues — выше specificity чем .section. */
body.page-template-page-venues #calc-cta.section { min-height: auto !important; display: block !important; padding: 0 !important; }
/* Правило igor: 40px СУММАРНО между текстом subtitle и кнопкой.
Источник 40px = padding-bottom subtitle (padding не схлопывается с margin → гарантировано 40).
Всё остальное (margin wrapper, margin кнопки) обнулено сверху чтобы не добавляло.
Снизу кнопки: wrapper margin-bottom 40 + section padding-bottom 0 → 40px до линии перехода. */
body.page-template-page-venues #calc-cta .section-subtitle {
margin-bottom: 0 !important;
padding-bottom: 20px !important;
}
body.page-template-page-venues #calc-cta > .container > div:last-child {
margin-top: 0 !important;
margin-bottom: 45px !important;
}
body.page-template-page-venues #calc-cta > .container > div:last-child > .btn {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
#join-cta.section { min-height: auto !important; display: block !important; padding: 40px 0 60px !important; }
#addresses.section { min-height: auto !important; display: block !important; padding: 0 0 50px !important; }
.addresses-first-screen { min-height: 100vh; display: flex; flex-direction: column; }
.addresses-first-screen #addresses { flex: 1 1 auto; display: flex !important; flex-direction: column; justify-content: center; }
body.page-template-page-addresses .hero { min-height: auto !important; padding-top: 205px !important; padding-bottom: 20px !important; overflow: hidden !important; }
body.page-template-page-addresses .players-hero-title-sub { font-size: clamp(32px, 3.5vw, 54px) !important; }
body.page-template-page-addresses .players-hero-title-main { font-size: clamp(72px, 9vw, 130px) !important; }
body.page-template-page-cabinet .hero .glow-circle { display: none !important; }
body.page-template-page-cabinet .players-hero-title-sub { font-size: clamp(26px, 2.9vw, 44px) !important; }
body.page-template-page-cabinet .players-hero-title-main { font-size: clamp(70px, 8.5vw, 130px) !important; white-space: nowrap; }
body.page-template-page-cabinet .hero { position: relative; overflow: hidden; }
.cabinet-hero-dragon { position: absolute; right: -34px; top: 50%; width: 210px; height: auto; transform: translateY(calc(-50% - 55px)) rotate(-90deg); pointer-events: none; z-index: 1; }
@media (max-width: 1100px) { .cabinet-hero-dragon { display: none; } }
body.page-template-page-addresses .hero .glow-circle { display: none !important; }
body.page-template-page-addresses #addresses .section-subtitle { margin-bottom: 28px !important; }
.addresses-first-screen .addr-more { margin-top: 36px; }
.addr-card { position: relative; }
.addr-phone { display: inline-block; margin-top: 8px; color: #F9A230; font-weight: 700; font-size: 15px; text-decoration: none; letter-spacing: 0.01em; align-self: flex-start; }
.addr-booking { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; color: #fff; font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; align-self: flex-start; transition: color .2s; }
.addr-booking:hover { color: #01CAE8; }
.addr-booking-icon { width: 1.1em; height: 1.1em; object-fit: contain; vertical-align: middle; }
.addr-card-sokol { overflow: visible; }
.addr-card-dragon { position: absolute; right: 21px; top: -105.5px; width: 120px; height: auto; pointer-events: none; z-index: 3; transform-origin: bottom right; }
@media (max-width: 900px) { .addr-card-dragon { right: 16px; top: -80px; width: 92px; } }
@media (max-width: 600px) { .addr-card-dragon { right: 12px; top: -64px; width: 74px; } }
@media (max-width: 480px) { .addr-card-dragon { right: 8px; top: -52px; width: 60px; } }
.addr-phone:hover { color: #01CAE8; }
.addr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1040px; margin: 36px auto 0; }
.addr-card { display: flex; flex-direction: column; gap: 8px; padding: 24px 26px; background: rgba(30,50,70,0.5); border: 1px solid rgba(1,202,232,0.22); border-radius: 20px; text-decoration: none; transition: border-color .25s, transform .25s; }
.addr-card:hover { border-color: var(--accent-orange); transform: translateY(-3px); }
.addr-name { color: var(--accent-orange); font-weight: 800; font-size: 19px; text-decoration: none; }
.addr-name:hover { color: #fff; }
.addr-line { color: #fff; font-size: 15px; line-height: 1.45; }
.addr-city { color: rgba(255,255,255,0.6); font-size: 13px; }
.addr-more { text-align: center; color: #fff; font-size: 14px; margin: 22px 0 0; }
@media (max-width: 900px) { .addr-grid { grid-template-columns: 1fr; max-width: 460px; } }
#addr-contacts.section { min-height: auto !important; display: block !important; padding: 60px 0 64px !important; }
.contacts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1040px; margin: 36px auto 0; }
.contact-card { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 22px 26px; background: rgba(30,50,70,0.5); border: 1px solid rgba(1,202,232,0.22); border-radius: 18px; text-decoration: none; transition: border-color .25s, transform .25s; }
.contact-card:hover { border-color: var(--accent-orange); transform: translateY(-3px); }
.contact-label { color: rgba(255,255,255,0.55); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.contact-value { color: #fff; font-weight: 700; font-size: 18px; }
@media (max-width: 900px) { .contacts-grid { grid-template-columns: 1fr; max-width: 460px; } }
#faq-venue .faq-list { column-count: 1 !important; max-width: 780px !important; }
#contact-venue.section { min-height: auto !important; display: block !important; padding: 20px 0 48px !important; }
body.page-template-page-venues .contact-frame { max-width: 640px !important; }
#benefits .section-title { margin-bottom: 0 !important; }
.benefits-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 20px auto 0;
max-width: 1100px;
}
.benefits-grid .glass-card {
height: 100%;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.35);
border-radius: 28px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: none;
}
.benefits-grid .glass-card:hover {
border-color: rgba(255,255,255,0.6);
transform: translateY(-4px);
}
.benefits-grid .glass-card h3 { color: #fff; font-weight: 800; }
.benefits-grid .glass-card p { color: #fff; }
#benefits .benefits-grid { margin-top: 44px; }
#benefits .benefits-grid .glass-card {
position: relative;
padding: 24px;
background: rgba(30, 50, 70, 0.35);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 24px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
#benefits .benefits-grid .glass-card:hover { border-color: rgba(255,255,255,0.30); }
#benefits .benefits-grid .glass-card h3 { color: var(--accent-blue); }
.benefits-dragon { position: absolute; right: 22px; top: -94px; width: 106px; height: auto; pointer-events: none; z-index: 2; }
@media (max-width: 900px) { .benefits-dragon { width: 94px; top: -58px; } }
@media (max-width: 900px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .benefits-grid { grid-template-columns: 1fr; } }
/* === Venues: доп. секции (что меняется / запуск) === */
.vsec { min-height: auto !important; padding: 45px 0 45px !important; }
.vsec .section-title { margin-top: 0 !important; }
/* #partners (venues): 45px от bg-line до h2, 0 marg на h2, gap до cards = inline 45.
Padding-bottom 0 — gap до #benefits заголовка задаётся целиком padding'ом #benefits сверху (45). */
#partners.section { min-height: auto !important; display: block !important; padding: 45px 0 0 !important; }
#partners .section-title { margin-top: 0 !important; margin-bottom: 0 !important; }
/* Bulletproof: убираем margin'ы кнопки и wrapper'а, чтобы gap = inline 45 у wrapper + 45 у divider */
body.page-template-page-venues #partners .fade-up > .btn:only-child {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Advertisers hero overrides */
#features.section { min-height: auto !important; display: block !important; padding: 40px 0 60px !important; }
body.page-template-page-advertisers .hero-dragon-top { width: 125px !important; top: -52.5px !important; right: 136px !important; }
@media (max-width: 1200px) { body.page-template-page-advertisers .hero-dragon-top { top: -60.5px !important; } }
@media (max-width: 1100px) { body.page-template-page-advertisers .hero-dragon-top { top: -63.5px !important; } }
@media (max-width: 900px) { body.page-template-page-advertisers .hero-dragon-top { top: -67.5px !important; } }
body.page-template-page-players .hero-dragon-top { width: 115px !important; top: -68px !important; }
body.home .hero-centered h1 { font-size: clamp(48px, 6.2vw, 84px) !important; }
body.home .hero-centered { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
body.home .hero-centered .hero-title-wrap { display: block !important; padding: 0 !important; width: 100% !important; }
body.home .hero-centered h1 { text-align: center !important; }
body.home .hero-centered .hero-title-line1 { font-size: 0.60em !important; }
body.home .hero-centered .text-deep-blue { font-size: 1.55em !important; margin-top: -16pt !important; }
body.home .hero-dragon-top { width: 105.84px !important; top: -54.15px !important; right: 80px !important; }
.venue-with-phone { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.venue-with-phone .venue-phone { color: #01CAE8; font-weight: 700; font-size: 17px; text-decoration: none; letter-spacing: 0.01em; }
.venue-with-phone .venue-phone:hover { color: var(--accent-orange); }
body.page-template-page-addresses .addresses-cta .btn-primary { padding: 20px 56px !important; font-size: 20px !important; }
.footer-bottom { flex-wrap: nowrap !important; }
.footer-bottom .footer-legal-inline { flex: 1 1 auto; min-width: 0; text-align: center; font-size: 11px; color: var(--text-muted); margin: 0; padding: 0 12px; line-height: 1.4; font-family: var(--font-body); white-space: nowrap; }
.footer-bottom, .footer-bottom *, .footer-bottom p, .footer-bottom a, .footer-bottom div { font-family: var(--font-body) !important; font-size: 11px !important; }
.footer-bottom .footer-legal-inline { font-size: 11px !important; }
@media (max-width: 1024px) {
.footer-bottom .footer-legal-inline { white-space: normal; }
}
.footer-bottom > p:first-child, .footer-bottom > div:last-child { flex-shrink: 0; }
body.page-template-page-advertisers #features.section { padding-bottom: 0 !important; }
body.page-template-page-advertisers #features .section-title { margin-bottom: 0 !important; }
body.page-template-page-advertisers #features .adv-features { margin-top: 45px !important; }
body.page-template-page-advertisers #features .fade-up > .btn:only-child { margin: 0 !important; }
body.page-template-page-advertisers .site-footer { margin-top: 0 !important; }
body.page-template-page-venues .site-footer { margin-top: 0 !important; }
/* Mediakit modal */
.mk-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: flex-start; justify-content: center; padding: 104px 20px 24px; overflow-y: auto; }
.mk-modal.open { display: flex; }
.mk-modal-backdrop { position: absolute; inset: 0; background: rgba(2,18,32,0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.mk-modal-box { position: relative; width: 100%; max-width: 460px; background: #0c1620 url('../img/elements/bg_dark.jpg') center/cover no-repeat; border: 1px solid rgba(1,202,232,0.35); border-radius: 28px; padding: 30px 34px 26px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.mk-modal-x { position: absolute; top: 14px; right: 18px; background: none; border: none; color: var(--accent-orange); font-size: 28px; line-height: 1; cursor: pointer; opacity: 1; }
.mk-modal-x:hover { filter: brightness(1.15); }
.mk-modal-box form button[type="submit"] { margin-top: 14px; }
.mk-modal-dragon { position: absolute; right: 14px; top: -75px; width: 110px; height: auto; pointer-events: none; z-index: 3; }
@media (max-width: 600px) { .mk-modal-dragon { width: 84px; top: -58px; } }
.calc-result { display: none; margin-top: 20px; color: #fff; }
.calc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.12); font-size: 15px; }
.calc-row span { color: #fff; }
.calc-row b { font-size: 17px; white-space: nowrap; }
.calc-row.calc-net { border-bottom: none; }
.calc-row.calc-net b { color: var(--accent-orange); font-size: 19px; }
.calc-note { margin-top: 8px; font-size: 13px; color: #fff; text-align: center; }
.mk-modal-title { font-family: "MPlusRounded", sans-serif; color: #F9A230; font-size: 24px; font-weight: 800; margin: 0 0 8px; }
.mk-modal-sub { color: #fff; font-size: 15px; line-height: 1.5; margin: 0 0 22px; }
.mk-modal-box .form-group { margin-bottom: 12px; }
.mk-modal-success { display: none; color: #fff; font-size: 16px; text-align: center; padding: 20px 0 6px; }
/* adv-modal compact: fits in one screen without scroll */
#adv-modal, #venue-modal { padding-top: 140px !important; padding-bottom: 16px !important; }
#adv-modal .mk-modal-box, #venue-modal .mk-modal-box { padding: 24px 30px 20px !important; }
#adv-modal .mk-modal-sub, #venue-modal .mk-modal-sub { margin-bottom: 14px !important; font-size: 14px !important; }
#adv-modal .mk-modal-box .form-group, #venue-modal .mk-modal-box .form-group { margin-bottom: 8px !important; }
#adv-modal .form-group input, #adv-modal .form-group textarea, #venue-modal .form-group input, #venue-modal .form-group textarea { padding: 12px 18px !important; font-size: 15px !important; }
#adv-modal .form-group textarea, #venue-modal .form-group textarea { min-height: 56px !important; max-height: 70px !important; resize: none !important; }
#adv-modal .contact-form .btn, #adv-modal .js-adv-submit, #venue-modal .contact-form .btn, #venue-modal .js-venue-submit { width: auto !important; display: inline-flex !important; padding: 12px 36px !important; font-size: 15px !important; margin-top: 8px !important; }
.adv-features { max-width: 880px; margin: 36px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; align-items: stretch; }
@media (max-width: 768px) { .adv-features { grid-template-columns: 1fr; } }
.adv-feature { background: rgba(1,202,232,0.10); border: 1px solid rgba(1,202,232,0.30); border-radius: 28px; padding: 20px 34px; }
.adv-feature h3 { font-size: 18px; color: var(--accent-orange); margin: 0 0 6px; }
.adv-feature p { font-size: 15px; line-height: 1.55; color: #fff; margin: 0; }
.vsec-blue { background: rgba(0,0,0,0.2); }
.vsec .section-title { margin-bottom: 0 !important; }
.vsec .benefits-grid { margin-top: 45px; }
.launch-steps { list-style: none; max-width: 860px; margin: 45px auto 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.launch-steps li {
background: rgba(1,202,232,0.10);
border: 1px solid rgba(1,202,232,0.30);
border-radius: 44px;
padding: 18px 56px;
font-size: 16px;
line-height: 1.55;
color: #fff;
}
.launch-step-num { display: block; color: var(--accent-orange); font-weight: 800; font-size: 19px; margin-bottom: 6px; }
@media (max-width: 600px) { .launch-steps li { padding: 22px 32px; } }
/* Venues hero — равномерное вертикальное центрирование */
body.page-template-page-venues .hero { min-height: 100vh !important; padding-top: 180px !important; padding-bottom: 64px !important; }
body.page-template-page-venues .hero-inner { justify-content: center !important; }
body.page-template-page-venues .text-deep-blue { white-space: nowrap !important; }
body.page-template-page-venues .hero-centered { max-width: 1500px !important; margin: 0 auto !important; }
body.page-template-page-venues .hero-centered h1 { font-size: clamp(26px, 3.06vw, 46px) !important; }
body.page-template-page-venues .hero-title-wrap { display: block !important; padding: 0 !important; }
body.page-template-page-venues .hero-title-line1 { font-size: 1.26em !important; letter-spacing: 0.01em !important; }
body.page-template-page-venues .text-deep-blue { font-size: 2.45em !important; letter-spacing: 0.01em !important; }
body.page-template-page-venues .hero-centered h1 { letter-spacing: 0.01em !important; }
body.page-template-page-venues .hero-subtitle-center { max-width: 640px !important; margin-left: auto !important; margin-right: auto !important; text-wrap: balance; }
body.page-template-page-venues .hero-dragon-top { width: 97px !important; right: 384px !important; top: -94.5px !important; }
/* ============ Дракон уменьшается пропорционально вместе с h1 на мобилке ============
transform-origin: bottom center — точка контакта со словом остаётся на месте,
дракон шринкается симметрично вокруг неё, не сползает */
body .hero-dragon-top { transform-origin: bottom center !important; }
@media (max-width: 1100px) { body .hero-dragon-top { transform: scale(0.85) !important; } }
@media (max-width: 900px) { body .hero-dragon-top { transform: scale(0.72) !important; } }
/* ≤700px — h1 переносится непредсказуемо, абсолютно позиционированный дракон лезет на буквы.
Делаем его обычным блоком над заголовком, центрированным, фиксированного размера. */
@media (max-width: 700px) {
body .hero-dragon-top {
position: static !important;
display: block !important;
margin: 0 auto 10px !important;
width: 80px !important;
height: auto !important;
top: auto !important;
right: auto !important;
left: auto !important;
transform: none !important;
}
}
@media (max-width: 480px) {
body .hero-dragon-top { width: 68px !important; margin-bottom: 8px !important; }
}
/* Заголовки venues на мобилке: уменьшить и разрешить перенос (text-deep-blue был nowrap 2.45em → вылезал за экран) */
@media (max-width: 700px) {
body.page-template-page-venues .text-deep-blue { font-size: 1.4em !important; white-space: normal !important; }
body.page-template-page-venues .hero-title-line1 { font-size: 1em !important; }
}
/* Аналогично для других драконов, которые «сидят» на словах */
@media (max-width: 600px) {
.players-cta-mascot {
width: 82px !important;
bottom: calc(100% - 18px) !important;
left: 50% !important;
transform: translateX(-50%) !important;
}
}
.venues-hero-content { max-width: 1000px; }
.venues-hero-content .players-hero-title-main { white-space: nowrap; font-size: clamp(46px, 6.4vw, 92px); }
.venues-hero-content .hero-subtitle { color: #fff; }
.venues-hero-buttons { align-items: flex-end; justify-content: center; margin-top: 150px; }
.venues-hero-buttons .venues-cta-wrap { margin-top: 0; }
@media (max-width: 600px) {
.venues-hero-content .players-hero-title-main { font-size: clamp(30px, 9.5vw, 56px); }
.venues-hero-buttons { margin-top: 88px; }
}
/* «Что меняется в зале» — карточки как кнопки-пилюли (прозрачный фон + тонкий светлый контур) */
.vsec .benefits-grid .glass-card {
background: transparent;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 40px;
backdrop-filter: none;
-webkit-backdrop-filter: none;
text-align: center;
padding: 22px 24px !important;
}
.vsec .benefits-grid .glass-card:hover { border-color: rgba(255,255,255,0.55); transform: translateY(-4px); }
.vsec .benefits-grid .glass-card h3 { color: var(--accent-orange) !important; }
.vsec-card-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; }
.vsec-card-ico { width: 27px; height: auto; flex-shrink: 0; margin: 0; }
.launch-section { position: relative; overflow: hidden; }
.launch-dragon {
position: absolute;
right: -27px;
top: calc(40% + 110px);
width: 145px;
height: auto;
transform: translateY(-50%) rotate(-90deg);
pointer-events: none;
z-index: 1;
}
@media (max-width: 1100px) { .launch-dragon { display: none; } }
/* === Sticky Telegram CTA flag === */
.tg-flag-wrap {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9999;
}
.tg-flag-close {
position: absolute;
top: -10px;
right: -10px;
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.25);
background: rgba(13,27,62,0.95);
color: #fff;
font-size: 22px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
z-index: 10001;
box-shadow: 0 4px 10px rgba(0,0,0,0.45);
transition: background .2s, transform .2s;
}
.tg-flag-close:hover { background: #01CAE8; transform: scale(1.08); }
.tg-flag {
position: relative;
z-index: 9999;
display: inline-flex;
align-items: flex-end;
text-decoration: none;
color: inherit;
animation: tg-flag-bounce 3s ease-in-out infinite;
transition: transform .25s ease;
}
.tg-flag:hover { transform: translateY(-3px) scale(1.02); animation-play-state: paused; }
/* (text-shadow за белыми буквами убран — пользователь не хотел затемнения) */
/*
и mobile-only-block — скрыты на десктопе */
.mobile-only, .mobile-only-block, .venue-mobile-text, .footer-mobile-compact { display: none; }
/* Кнопка «Подробнее об игре» — те же отступы что «Обсудить размещение» (16×40 / 18px) */
.geo-cta-btn { padding: 22px 56px !important; font-size: 22px !important; }
@media (max-width: 768px) { .geo-cta-btn { padding: 18px 32px !important; font-size: 18px !important; } }
.tg-flag-dragon { display: none !important; }
.tg-flag-plane-corner {
position: absolute;
top: -18px;
left: -18px;
width: 46px;
height: auto;
z-index: 5;
pointer-events: none;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55));
transform: rotate(-2deg);
}
.tg-flag-body {
position: relative;
display: block;
text-align: left;
background: rgba(13, 27, 62, 0.78);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border: 1px solid rgba(1,202,232,0.25);
padding: 16px 18px 16px 20px;
border-radius: 18px;
box-shadow: 0 0 22px rgba(1,202,232,0.28), 0 6px 16px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
color: #fff;
font-family: "Onest", sans-serif;
max-width: 260px;
animation: tg-flag-pulse 2.8s ease-in-out infinite;
}
body.page-template-page-cabinet .players-hero-title { margin: 0 -140px 40px !important; max-width: none !important; width: 700px !important; text-align: center !important; }
/* h1 центрирование точно по оси формы — display:block + убрать
чтобы не было лишнего gap */
body.page-template-page-cabinet .players-hero-title br { display: none !important; }
body.page-template-page-cabinet .players-hero-title-sub,
body.page-template-page-cabinet .players-hero-title-main { display: block !important; width: 100% !important; text-align: center !important; }
/* main "КВИЗАБРУ" уменьшить чтобы влез в 420px */
body.page-template-page-cabinet .players-hero-title-main { font-size: clamp(56px, 12vw, 96px) !important; line-height: 1 !important; }
body.page-template-page-cabinet .players-hero-title-sub { font-size: clamp(20px, 4vw, 32px) !important; line-height: 1.2 !important; }
/* Уменьшить плашку формы login */
body.page-template-page-cabinet #cabinet-login { max-width: 420px !important; }
body.page-template-page-cabinet #cabinet-login-form {
padding: 24px !important;
background: rgba(1,202,232,0.10) !important;
border: 1px solid rgba(1,202,232,0.30) !important;
}
/* p под формой — в 2 строки (расширить за пределы 420px section) — ТОЛЬКО desktop */
@media (min-width: 769px) {
body.page-template-page-cabinet #cabinet-login > p { width: 640px !important; max-width: 640px !important; margin-left: -110px !important; margin-right: -110px !important; }
}
/* Динозаврик справа в hero — восстановление с предыдущей версии */
body.page-template-page-cabinet #cabinet { position: relative; overflow: hidden; }
/* Опустить контент cabinet на ~18px (.section flex-center + 36px к padding-top = центр сдвигается на 18) */
@media (min-width: 769px) {
body.page-template-page-cabinet #cabinet { padding-top: 96px !important; }
}
.cabinet-hero-dragon { position: absolute; right: -34px; top: 50%; width: 210px; height: auto; transform: translateY(calc(-50% - 48px)) rotate(-90deg); pointer-events: none; z-index: 1; }
@media (max-width: 1100px) { .cabinet-hero-dragon { display: none; } }
/* /players/ — кнопка «Подписаться на Telegram»: ВИЗУАЛЬНО ровно 30px над и под (все competing rules обнулены) */
body.page-template-page-players #venues-list { padding-bottom: 0 !important; min-height: auto !important; }
/* /players/ #venues-list subtitle→картинки: -10px (Igor 2026-06-11), было 56px (base .section-subtitle) */
body.page-template-page-players #venues-list .section-subtitle { margin-bottom: 46px; }
body.page-template-page-players #venues-list + section,
body.page-template-page-players #why { padding-top: 5px !important; }
/* DESKTOP players #why — +30 перед h2 'Чем Квизабра отличается?' (на mobile переопределяется в responsive.css) */
@media (min-width: 769px) {
html body.page-template-page-players #why { padding-top: 35px !important; }
/* +10px ДО начала тёмного фона #why (margin-top, не padding-top — чтобы фон не расширялся), Igor 2026-06-11 */
html body.page-template-page-players #why { margin-top: 10px !important; }
}
body.page-template-page-players .tg-subscribe-wrap { margin-top: 45px !important; margin-bottom: 55px !important; }
body.page-template-page-players div.tg-subscribe-wrap > a.btn.btn-secondary { margin-top: 0 !important; margin-bottom: 0 !important; }
/* Главная #join-cta: убрать padding-top чтобы gap до h2 был как на /players/ (49px вместо 89px) */
body.home #join-cta.section { padding-top: 0 !important; }
/* /venues/ — кнопка «Калькулятор выгоды»: под = над визуально (перебить старое #pricing.section{padding:50px} специфичностью) */
body.page-template-page-venues #calc-cta.section { padding-top: 0 !important; padding-bottom: 0 !important; }
body.page-template-page-venues #pricing.section { padding-top: 16px !important; }
body.page-template-page-venues .calc-cta-wrap { margin-top: 16px !important; margin-bottom: 16px !important; }
.tg-flag-text { line-height: 1.3; text-align: left; }
.tg-flag-icon { display: none; }
.tg-flag-title {
font-family: "MPlusRounded", sans-serif !important;
font-weight: 800 !important;
font-size: 20px;
color: #F9A230;
line-height: 1.1;
letter-spacing: 0.01em;
margin-top: -4px;
margin-bottom: 6px;
}
.tg-flag-sub {
font-family: "Onest", sans-serif !important;
font-size: 13px;
color: #fff;
margin-top: 5px;
font-weight: 500;
line-height: 1.35;
}
.tg-flag-accent { color: #F9A230; font-weight: 700; }
@keyframes tg-flag-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
@keyframes tg-flag-pulse {
0%, 100% { box-shadow: 0 0 28px rgba(1,202,232,0.4), 0 8px 22px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06); }
50% { box-shadow: 0 0 44px rgba(1,202,232,0.65), 0 8px 22px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06); }
}
@media (max-width: 600px) {
.tg-flag-wrap { bottom: 14px; right: 14px; }
.tg-flag-body { padding: 14px 16px 12px; border-radius: 18px; gap: 10px; max-width: 280px; }
.tg-flag-title { font-size: 16px; }
.tg-flag-sub { font-size: 12px; margin-top: 3px; }
.tg-flag-plane { width: 24px; height: 24px; left: 12px; }
.tg-flag-body { padding-left: 24px; }
.tg-flag-dragon { width: 68px; top: -40px; right: 8px; }
}
/* Venue detail cards (cabinet) — frame с шапкой Бар/название/адрес + фото */
.venue-detail-frame {
background: rgba(30,50,70,0.5);
border: 1px solid rgba(1,202,232,0.28);
border-radius: 22px;
padding: 22px 22px 22px;
transition: border-color .25s, transform .25s;
}
.venue-detail-frame:hover { border-color: var(--accent-orange); }
.venue-detail-eyebrow { color: var(--accent-orange); font-weight: 700; font-size: 15px; letter-spacing: 0.02em; margin-bottom: 2px; }
.venue-detail-name { color: #fff; font-size: 24px; font-weight: 800; line-height: 1.12; margin: 0 0 14px; font-family: var(--font-heading); }
.venue-detail-divider { height: 1px; background: rgba(255,255,255,0.18); margin: 0 0 14px; }
.venue-detail-addr { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 18px; }
.venue-detail-pin { font-size: 16px; line-height: 1.3; }
.venue-detail-addr-line { color: #fff; font-size: 14px; line-height: 1.45; }
.venue-detail-metro { color: rgba(255,255,255,0.6); font-size: 13px; margin-top: 4px; }
.venue-detail-img { border-radius: 14px; }
@media (max-width: 900px) {
.venue-detail-frame { padding: 18px; border-radius: 18px; }
.venue-detail-name { font-size: 20px; }
}
/* ============================================================================
ЭТАЛОН ОТСТУПА ПОСЛЕ ЗАГОЛОВКА (DESKTOP)
База: /advertisers/ #features — h2.section-title (margin-bottom:16) + .adv-features (margin-top:36)
= 52px визуально между белым заголовком и первой плашкой.
Применяется ко всем плашко-контейнерам через единый margin-top: 36px.
============================================================================ */
@media (min-width: 769px) {
.section-title { margin-bottom: 16px !important; }
.adv-features,
.launch-steps,
.pricing-grid,
.about-grid,
.benefits-grid,
.why-grid,
.numbers-grid,
.addr-grid,
.rules-grid,
.faq-list,
.features-grid,
.why-quizabra-grid,
#pricing .pricing-grid,
#faq .faq-list,
#benefits .benefits-grid {
margin-top: 36px !important;
}
}
/* ============================================================================
HEADER (desktop): больше отступ между кнопкой и иконками + между иконками +
между последней иконкой и правым краем. Меню сдвинуто вправо (margin-left:auto).
============================================================================ */
@media (min-width: 769px) {
.header-inner { padding: 0 24px 0 40px !important; gap: 20px !important; }
.main-nav { margin-left: auto !important; }
.header-cta { margin-left: 0 !important; }
.header-tg { margin-left: 0 !important; }
.header-max { margin-left: 0 !important; }
}
/* desktop header — единые 20px между всеми элементами справа от nav (button, tg, max),
24px от max до правого края. Убраны все margin-left override'ы (раньше +18/-16
путались с flex gap и давали несимметричные интервалы 42/42/8/8). */
/* tg-flag plane-badge: маленький белый самолётик в одной строке с заголовком */
.tg-flag-plane-badge {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.12em;
margin-right: 8px;
filter: brightness(0) invert(1);
object-fit: contain;
}
@media (max-width: 768px) {
.tg-flag-plane-badge { width: 0.95em; height: 0.95em; margin-right: 6px; }
}
/* CTA-кнопки на desktop — индивидуальные отступы (эталон 45 удалён по запросу Igor) */
@media (min-width: 769px) {
.about-cta { margin-top: 45px !important; margin-bottom: 22px !important; }
.addresses-cta { margin-top: 49px !important; margin-bottom: 20px !important; }
.geo-cta { margin-top: 40px !important; margin-bottom: 40px !important; }
body.page-template-page-venues #calc-cta > .container > div:last-child { margin-top: 23px !important; margin-bottom: 44px !important; }
body.page-template-page-advertisers #features > .container > div:last-child { margin-top: 99px !important; margin-bottom: 99px !important; }
/* Универсальный: любой div.fade-up с одной кнопкой внутри */
div.fade-up > .btn:only-child {
margin-top: 40px !important;
margin-bottom: 40px !important;
}
/* Players hero — .players-cta-wrap имеет специфичную обёртку */
.players-cta-wrap {
margin-top: 70px !important;
margin-bottom: 0 !important;
}
/* === ИСКЛЮЧЕНИЯ — кнопки в стопке / внутри плашек / в шапке === */
.hero-buttons .btn,
.hero-buttons-center .btn,
.hero-buttons-center,
.hero-buttons,
.store-buttons .btn,
.store-btn,
.header-cta,
.site-header .btn,
.pricing-card .btn,
.glass-card .btn,
.faq-item .btn,
.why-card .btn,
form .btn,
.mk-modal .btn,
.footer-mobile-compact .btn,
.tg-flag .btn {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
/* footer-bottom desktop: 2 половины — copyright (left 50%) и Privacy/Оферта (right 50%) */
@media (min-width: 769px) {
.footer-bottom { justify-content: space-between !important; flex-wrap: nowrap !important; }
.footer-bottom > p:first-child { flex: 1 1 50% !important; max-width: 50% !important; text-align: left !important; margin: 0 !important; }
.footer-bottom > div { flex: 1 1 50% !important; max-width: 50% !important; text-align: right !important; }
}
/* ============================================================================
footer-bottom NEW LAYOUT (после удаления Instagram disclaimer):
┌──────────────────────┬──────────────────┬────────┐
│ © 2026 Wings Solut. │ Политика конф. │ Оферта │
│ Все права защищены │ │ │
└──────────────────────┴──────────────────┴────────┘
============================================================================ */
.footer-bottom {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: 48px !important;
flex-wrap: nowrap !important;
text-align: left !important;
}
.footer-bottom-brand {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
flex: 0 0 auto !important;
}
.footer-bottom-brand .footer-bottom-copy,
.footer-bottom-brand .footer-bottom-rights {
margin: 0 !important;
font-size: 11px !important;
line-height: 1.4 !important;
color: var(--text-muted) !important;
font-family: var(--font-body) !important;
}
.footer-bottom .footer-bottom-link {
flex: 0 0 auto !important;
font-size: 11px !important;
line-height: 1.4 !important;
color: var(--text-muted) !important;
font-family: var(--font-body) !important;
align-self: flex-start !important;
text-decoration: none;
}
.footer-bottom .footer-bottom-link:hover { color: var(--accent-blue) !important; }
/* На мобилке gap между brand и links меньше */
@media (max-width: 768px) {
.footer-bottom { gap: 16px !important; }
.footer-bottom-brand .footer-bottom-copy,
.footer-bottom-brand .footer-bottom-rights,
.footer-bottom .footer-bottom-link { font-size: 10px !important; }
}
/* === DESKTOP: одностройная раскладка футера ===
Слева к левому краю: «© 2026 Wings Solutions. Все права защищены» одной строкой.
Справа к правому краю: «Политика конфиденциальности | Оферта» одной строкой.
Markup остаётся новый (для мобилки), здесь только CSS-склейка. */
@media (min-width: 769px) {
.footer-bottom {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 0 !important;
flex-wrap: nowrap !important;
}
/* brand к левому краю + забирает всё свободное пространство справа от себя
через margin-right: auto → ссылки прижимаются к правому краю */
.footer-bottom > .footer-bottom-brand {
display: block !important;
flex: 0 0 auto !important;
max-width: none !important;
margin: 0 auto 0 calc(50% - 50vw) !important;
padding-left: 24px !important;
text-align: left !important;
}
.footer-bottom-brand .footer-bottom-copy,
.footer-bottom-brand .footer-bottom-rights {
display: inline !important;
}
.footer-bottom-brand .footer-bottom-copy::after { content: ". "; }
/* ссылки в правый угол, между ними разделитель | с зазорами */
.footer-bottom .footer-bottom-link { flex: 0 0 auto !important; margin: 0 !important; }
.footer-bottom .footer-bottom-link + .footer-bottom-link {
margin-left: 16px !important;
}
.footer-bottom .footer-bottom-link + .footer-bottom-link::before {
content: "|";
color: var(--text-muted);
margin-right: 16px;
}
}
/* ===== MOBILE OVERRIDES (placed last to beat all desktop rules by cascade order) ===== */
@media (max-width: 768px) {
/* /players/ hero: порядок (h1→рамка→кнопка), бОльшие размеры */
body.page-template-page-players .players-hero-inner { display: flex !important; flex-direction: column !important; gap: 24px !important; }
body.page-template-page-players .players-hero-left,
body.page-template-page-players .players-hero-right { display: contents !important; }
body.page-template-page-players .players-hero-title { order: 1 !important; }
body.page-template-page-players .players-hero-card { order: 2 !important; }
body.page-template-page-players .players-cta-wrap { order: 3 !important; margin-top: 8px !important; margin-bottom: 0 !important; }
body.page-template-page-players .players-hero-title-sub { font-size: 30px !important; }
body.page-template-page-players .players-hero-title-main { font-size: 56px !important; line-height: 1 !important; }
body.page-template-page-players .players-cta-btn { font-size: 20px !important; padding: 18px 50px !important; }
html body.page-template-page-players section#rules.section { padding-top: 25px !important; }
/* tg-subscribe-wrap mobile: после кнопки +10 (margin-bottom 65) — повышенная специфичность чтобы перебить desktop правило на 1945 */
body.page-template-page-players div.tg-subscribe-wrap { margin-bottom: 45px !important; }
/* /addresses/ venue cards: реальный класс .addr-grid (3 карточки в 1 колонку → переключаем в 2) */
body.page-template-page-addresses .addr-grid { grid-template-columns: 1fr !important; gap: 14px !important; max-width: 360px !important; margin-left: auto !important; margin-right: auto !important; }
/* Главная hero: скрыть динозаврика-top на mobile */
html body.home.wp-singular .hero-dragon-top { display: none !important; }
/* Главная 'Вливайся в игру' h2 — поднять на 12px (margin-top 42→30) */
html body.home.wp-singular #join-cta h2 { margin-top: 30px !important; }
html body.home.wp-singular #join-cta .store-buttons { margin-top: 16px !important; }
/* Body text +2pt на mobile */
.hero-subtitle, .hero-subtitle-center { font-size: 18px !important; line-height: 1.6 !important; }
.about-para, .about-para span { font-size: 17px !important; line-height: 1.55 !important; }
.glass-card p, .faq-a p { font-size: 17px !important; line-height: 1.55 !important; }
.why-card p, .why-card-inner p { font-size: 16px !important; line-height: 1.5 !important; }
.venue-card p { font-size: 15px !important; line-height: 1.5 !important; }
.contact-card { font-size: 16px !important; }
.players-hero-right .hero-subtitle { font-size: 17px !important; line-height: 1.6 !important; }
.about-grid { gap: 14px !important; }
}
/* === Mobile: убрать горизонтальный overflow (mobile-menu fixed off-screen + случайные wide-элементы давали scroll вправо) === */
@media (max-width: 768px) {
html, body { overflow-x: hidden !important; max-width: 100vw !important; }
}
/* Mobile: убрать background-attachment:fixed — на iOS/Android он часто не рендерится или ломается с overflow-x:hidden */
/*@media (max-width: 768px) {*/
/* html body, body.page, body.home {*/
/* background-attachment: scroll !important;*/
/* }*/
/*}*/
/* === Mobile main: правки от 2026-05-28 === */
@media (max-width: 768px) {
/* (1) -1/2 отступ перед "Квизабра — это..." */
html body.home #slide-about > section { padding-top: 30px !important; }
html body.home #slide-about .section-title { margin-top: 0 !important; }
/* (7) Сократить отступ перед "Нас часто спрашивают" — -10px от 16 */
html body.home #slide-faq > section { padding-top: 6px !important; }
html body.home #faq .section-title { margin-top: 0 !important; }
/* (4) Mascot на about-cta — меньше чем players-cta-mascot */
.about-cta-wrap { position: relative; display: inline-block; }
.about-cta-mascot { position: absolute; left: 50%; bottom: calc(100% - 9px); transform: translateX(-50%); width: 90px; height: auto; pointer-events: none; z-index: 2; }
}
/* Desktop версия mascot — побольше */
@media (min-width: 769px) {
.about-cta-wrap { position: relative; display: inline-block; }
.about-cta-mascot { position: absolute; left: 50%; bottom: calc(100% - 12px); transform: translateX(-50%); width: 72px; height: auto; pointer-events: none; z-index: 2; }
}
/* mobile: .about-cta опустить ниже + .about-cta-btn +3% */
@media (max-width: 768px) {
html body.home .about-cta { margin-top: 130px !important; margin-bottom: 10px !important; }
html body.home .about-cta-btn { font-size: 26px !important; padding: 22px 65px !important; }
}
/* === DESKTOP: скрыть mobile-only элементы добавленные в HTML === */
@media (min-width: 769px) {
.about-cta-mascot { display: none !important; }
.mobile-accent { color: inherit !important; font-weight: inherit !important; }
}
/* === MOBILE: показать акценты оранжевым + остальные mobile-only правки === */
@media (max-width: 768px) {
.mobile-accent { color: #F9A230 !important; font-weight: 700 !important; }
.about-cta-mascot { display: block !important; }
.desktop-only-sub { display: none !important; }
/* swap slides: how-to-join после geo */
html body.home main { display: flex !important; flex-direction: column !important; }
html body.home main > * { order: 5; }
html body.home main > .hero { order: 1 !important; }
html body.home main > #slide-about { order: 2 !important; }
html body.home main > #slide-geo-numbers { order: 3 !important; }
html body.home main > #slide-how-to-join { order: 4 !important; }
html body.home main > #slide-faq { order: 6 !important; }
html body.home main > footer { order: 99 !important; }
/* скрыть geo-cta и #join-cta */
html body.home .geo-cta { display: none !important; }
html body.home section#join-cta.section { display: none !important; }
}
/* Cabinet — лоадер на кнопках входа/восстановления */
.btn.is-loading {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
pointer-events: none;
cursor: wait;
}
.btn.is-loading .btn-spinner {
width: 18px;
height: 18px;
border: 2px solid rgba(255, 255, 255, 0.35);
border-top-color: #fff;
border-radius: 50%;
animation: quizabra-btn-spin 0.65s linear infinite;
flex-shrink: 0;
}
.btn.is-loading .btn-busy-label {
line-height: 1;
}
@keyframes quizabra-btn-spin {
to { transform: rotate(360deg); }
}
/* Cabinet dashboard — мягкая загрузка: скрываем плейсхолдеры цифр и таблицу
истории пока данные не пришли (класс cabinet-loading снимает JS). Layout
сохраняется (visibility:hidden), чтобы dashboard не «прыгал» при появлении. */
#cabinet-dashboard.cabinet-loading #dash-points,
#cabinet-dashboard.cabinet-loading #dash-games,
#cabinet-dashboard.cabinet-loading #dash-rank,
#cabinet-dashboard.cabinet-loading #dash-correct,
#cabinet-dashboard.cabinet-loading #dash-history,
#cabinet-dashboard.cabinet-loading #dash-venues,
#cabinet-dashboard.cabinet-loading #dash-venues-title {
visibility: hidden;
}
#cabinet-dashboard #dash-points,
#cabinet-dashboard #dash-games,
#cabinet-dashboard #dash-rank,
#cabinet-dashboard #dash-correct,
#cabinet-dashboard #dash-history,
#cabinet-dashboard #dash-venues {
transition: opacity 0.2s ease;
}
/* Дракон-маскот в hero кабинета — показывается только когда виден экран
логина/восстановления, а на dashboard скрывается (он там лишний). */
#cabinet:has(#cabinet-dashboard:not([hidden])) .cabinet-hero-dragon {
display: none !important;
}
/* Dashboard кабинета — нижние действия (правила/обратная связь),
CTA-текст и блок соц-иконок. */
.dash-actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
margin: 16px 0 8px;
}
.dash-action-btn { font-size: 15px; padding: 10px 28px; text-decoration: none; }
/* Карточные кнопки в кабинете — стиль как у промо-плиток PWA
(тёмно-синяя карточка с лёгким контуром, эмодзи сверху, подпись снизу). */
.dash-actions-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
max-width: 640px;
margin: 24px auto 8px;
}
.dash-card-btn {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
min-height: 140px;
padding: 24px 20px;
border-radius: 24px;
text-decoration: none;
color: #fff;
background:
radial-gradient(120% 140% at 50% 0%, rgba(1,202,232,0.18) 0%, rgba(1,202,232,0) 55%),
linear-gradient(180deg, rgba(22,39,55,0.92) 0%, rgba(0,67,114,0.92) 100%);
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 8px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.dash-card-btn:hover,
.dash-card-btn:focus-visible {
transform: translateY(-2px);
border-color: rgba(1,202,232,0.45);
box-shadow: 0 12px 28px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.10);
}
.dash-card-btn__icon {
font-size: 34px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
}
.dash-card-btn__label {
font-size: 18px;
font-weight: 600;
color: #fff;
text-align: center;
}
.dash-cta-text { color: #fff !important; margin-bottom: 16px; }
.dash-socials {
display: flex;
gap: 14px;
justify-content: center;
align-items: center;
margin-top: 8px;
}