/* ============================================================= x-betting.org — REDESIGN LAYER v4 (premium dark + gold) Loads LAST, after dark-theme.css. Paired with redesign.js. Rollback: dequeue (or define XB_REDESIGN_OFF). HARD RULE — homepage card grid + image scrim live in Customizer "Additional CSS" (DB). This file MUST NOT set background-image / overlay / size / width / height / flex / display on .posts* / .twoblock / .main.main-page. Polish only there. ============================================================= */ :root { --xb-gold: #f8ad1d; --xb-gold-2: #ffd873; --xb-gold-deep: #c9861a; --xb-gold-soft: rgba(248, 173, 29, .14); --xb-gold-line: rgba(248, 173, 29, .30); --xb-gold-glow: rgba(248, 173, 29, .45); --xb-panel: #121d29; --xb-panel-2: #18293b; --xb-panel-hi: #21374f; --xb-glass: rgba(23, 38, 55, .72); --xb-line: rgba(255, 255, 255, .07); --xb-line-strong: rgba(255, 255, 255, .16); --xb-text: #eef3f8; --xb-muted: #b6c2cf; --xb-shadow: 0 24px 60px -22px rgba(0, 0, 0, .8); --xb-shadow-sm: 0 10px 28px -14px rgba(0, 0, 0, .72); --xb-glow: 0 12px 30px -12px var(--xb-gold-glow); --xb-radius: 16px; --xb-radius-sm: 11px; --xb-ease: cubic-bezier(.22, .61, .36, 1); --xb-ease-out: cubic-bezier(.16, 1, .3, 1); --xb-head: 'Montserrat', 'Inter', sans-serif; } /* ---------- 1. Canvas --------------------------------------- */ body { background: radial-gradient(1300px 640px at 50% -14%, rgba(248, 173, 29, .08), transparent 60%), radial-gradient(1000px 780px at 100% 0%, rgba(16, 140, 255, .06), transparent 55%), radial-gradient(950px 950px at 0% 100%, rgba(40, 66, 249, .055), transparent 60%), #090e15 !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--xb-gold); color: #10161f; } * { scrollbar-width: thin; scrollbar-color: rgba(248, 173, 29, .35) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--xb-gold-glow); background-clip: padding-box; } /* ---------- 2. Typography (bold editorial) ------------------ */ h1, h2, h3, h4, .the-content h1, .the-content h2, .the-content h3, .the-content h4, .posts__title span, .latest-posts__title, .contents-header, .read-more-block__header, .faq-block__title, .site-footer__title, .bookmaker-single__page-nav-title, .cards-block__title { font-family: var(--xb-head) !important; letter-spacing: -.015em; } h1, .the-content h1 { font-size: clamp(30px, 4.2vw, 52px) !important; line-height: 1.08 !important; font-weight: 700; text-wrap: balance; } h2, .the-content h2 { font-size: clamp(23px, 2.7vw, 36px) !important; line-height: 1.15 !important; font-weight: 700; } h3, .the-content h3 { font-size: clamp(19px, 1.8vw, 25px) !important; line-height: 1.22 !important; font-weight: 600; } /* gold-tinted section headings */ .latest-posts__title, .contents-header, .read-more-block__header, .faq-block__title { background: linear-gradient(92deg, #ffffff 0%, #ffe9b8 58%, var(--xb-gold-2) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* gradient rule under major section titles */ .latest-posts__title { position: relative; padding-bottom: 14px; } .latest-posts__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--xb-gold), var(--xb-gold-2)); box-shadow: 0 0 12px -1px var(--xb-gold-glow); -webkit-text-fill-color: initial; } /* ---------- 3. Header (glass) ------------------------------- */ .site-header { background: linear-gradient(180deg, rgba(33, 55, 79, .96), rgba(12, 20, 30, .96)) !important; -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); border: 1px solid var(--xb-line); border-radius: var(--xb-radius); box-shadow: var(--xb-shadow); position: relative; transition: padding .3s var(--xb-ease), box-shadow .3s var(--xb-ease), background .3s var(--xb-ease); } .site-header::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--xb-gold-line) 20%, var(--xb-gold-line) 80%, transparent); } /* shrink on scroll (redesign.js toggles .xb-shrink) */ .site-header.xb-shrink { box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9); background: linear-gradient(180deg, rgba(20, 33, 48, .98), rgba(9, 15, 23, .98)) !important; } .site-header.xb-shrink .site-header__inner { padding-top: 6px; padding-bottom: 6px; } .site-header__logo { transition: transform .35s var(--xb-ease), filter .35s var(--xb-ease); filter: drop-shadow(0 2px 12px rgba(248, 173, 29, .28)); } .site-header__logo:hover { transform: translateY(-1px) scale(1.02); filter: drop-shadow(0 5px 18px var(--xb-gold-glow)); } /* top-level nav + animated underline */ .site-header .main-menu > .menu-item > span > a, .site-header .main-menu > .menu-item > a { font-family: var(--xb-head); font-weight: 600; letter-spacing: .01em; color: var(--xb-text) !important; position: relative; transition: color .2s var(--xb-ease); } .site-header .main-menu > .menu-item > span > a::after, .site-header .main-menu > .menu-item > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--xb-gold-deep), var(--xb-gold), var(--xb-gold-2)); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--xb-ease-out); } .site-header .main-menu > .menu-item:hover > span > a, .site-header .main-menu > .menu-item:hover > a { color: var(--xb-gold) !important; } .site-header .main-menu > .menu-item:hover > span > a::after, .site-header .main-menu > .menu-item:hover > a::after { transform: scaleX(1); } .site-header .main-menu li.menu-item-has-children .icon-arrow-bottom { opacity: .65; } /* ---------- 4. Mega-menu + hover-gap bridge ----------------- */ .site-header .main-menu > .menu-item-has-children::before { content: ""; position: absolute; left: -22px; right: -22px; top: 100%; height: 22px; background: transparent; } .site-header .main-menu .sub-menu { background: linear-gradient(180deg, #17293c, #0e1826) !important; border: 1px solid var(--xb-gold-line) !important; border-radius: var(--xb-radius) !important; box-shadow: var(--xb-shadow), 0 0 0 1px rgba(255, 255, 255, .03) inset !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 20px 24px !important; top: calc(100% + 14px) !important; left: -22px !important; overflow: hidden; animation: xb-menu-in .2s var(--xb-ease-out); } .site-header .main-menu .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--xb-gold), transparent); } @keyframes xb-menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .site-header .main-menu > .menu-item > .sub-menu { min-width: 290px !important; } .site-header .main-menu > .menu-item > .sub-menu:has(> .menu-item-has-children), .site-header .main-menu > .menu-item > .sub-menu.xb-mega { min-width: 580px !important; max-width: 780px !important; columns: 2; column-gap: 38px; overflow-y: auto !important; max-height: min(78vh, 660px); } .site-header .main-menu > .menu-item > .sub-menu > .menu-item { break-inside: avoid; -webkit-column-break-inside: avoid; } .site-header .main-menu .sub-menu li { margin: 1px 0 !important; border-radius: 9px; } .site-header .main-menu .sub-menu li a { display: block; padding: 8px 12px; color: var(--xb-muted) !important; font-family: 'Inter', sans-serif; font-size: 13px; line-height: 18px; font-weight: 400; border-radius: 9px; /* transform (not padding) so column balancing never reflows on hover */ transition: background .18s var(--xb-ease), color .18s var(--xb-ease), transform .18s var(--xb-ease); } .site-header .main-menu .sub-menu li > a:hover, .site-header .main-menu .sub-menu li:hover > a { background: var(--xb-gold-soft); color: #fff !important; transform: translateX(6px); box-shadow: inset 3px 0 0 var(--xb-gold); } .site-header .main-menu > .menu-item > .sub-menu > .menu-item.menu-item-has-children { margin-top: 12px !important; padding-top: 10px; border-top: 1px solid var(--xb-line); } .site-header .main-menu > .menu-item > .sub-menu > .menu-item.menu-item-has-children > span > a { color: var(--xb-gold) !important; font-weight: 700 !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: .07em; cursor: default; } .site-header .main-menu > .menu-item > .sub-menu > .menu-item .sub-menu { background: transparent !important; border: none !important; box-shadow: none !important; padding: 4px 0 0 !important; position: static !important; animation: none; min-width: 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none; } .site-header .main-menu > .menu-item > .sub-menu > .menu-item .sub-menu::before { display: none; } .site-header .main-menu > .menu-item > .sub-menu > .menu-item.menu-item-has-children > .sub-menu { display: block !important; } .site-header .main-menu > .menu-item > .sub-menu > .menu-item.menu-item-has-children > span .icon-arrow-bottom { display: none; } .site-header #header_menu > .menu-item-has-children:hover > .sub-menu { overflow-y: auto; } /* ---------- 5. Buttons (gold, sheen, pointer glow) ---------- */ .btn, button.btn, .login-button, .comments .login-notice .btn { border-radius: 11px !important; font-weight: 700 !important; letter-spacing: .01em; font-family: var(--xb-head); transition: transform .18s var(--xb-ease), box-shadow .25s var(--xb-ease), background-position .55s var(--xb-ease), filter .2s var(--xb-ease) !important; } .comments .login-notice .btn, .btn--gold { background: radial-gradient(160px circle at var(--xb-mx, 50%) 40%, rgba(255, 255, 255, .38), transparent 55%), linear-gradient(120deg, var(--xb-gold-2) 0%, var(--xb-gold) 38%, var(--xb-gold-deep) 66%, var(--xb-gold) 100%) !important; background-size: auto, 220% 100% !important; background-position: center, 0 0 !important; color: #10161f !important; border: none !important; box-shadow: var(--xb-glow) !important; } .comments .login-notice .btn:hover, .btn--gold:hover { transform: translateY(-2px); filter: brightness(1.05); background-position: center, 100% 0 !important; box-shadow: 0 18px 38px -12px var(--xb-gold-glow) !important; } .site-header__search .btn, .login-button, .logout-btn { background: transparent !important; color: var(--xb-gold) !important; border: 1px solid var(--xb-gold-line) !important; } .site-header__search .btn:hover, .login-button:hover, .logout-btn:hover { background: var(--xb-gold-soft) !important; border-color: var(--xb-gold) !important; transform: translateY(-1px); box-shadow: var(--xb-glow) !important; } .site-header .gift-link, .swiper_aside_banner .gift-link { transition: filter .25s var(--xb-ease), transform .2s var(--xb-ease); } .site-header .gift-link:hover, .swiper_aside_banner .gift-link:hover { filter: drop-shadow(0 0 10px var(--xb-gold-glow)); transform: translateY(-1px); } /* ---------- 6. HOME cards — POLISH ONLY (layout = Customizer) --- */ .posts__item { background-position: center !important; background-repeat: no-repeat !important; box-shadow: var(--xb-shadow-sm), inset 0 0 0 1px var(--xb-line) !important; transition: transform .35s var(--xb-ease-out), box-shadow .35s var(--xb-ease), filter .35s var(--xb-ease); will-change: transform; } .posts__item:hover { transform: translateY(-6px) scale(1.015); filter: saturate(1.05); box-shadow: 0 34px 66px -24px rgba(0, 0, 0, .9), inset 0 0 0 1px var(--xb-gold-line) !important; z-index: 4; } .posts__item:hover .posts__title span { color: var(--xb-gold-2) !important; } .posts .post-of-day { background: linear-gradient(135deg, var(--xb-gold-2), var(--xb-gold)) !important; color: #10161f !important; box-shadow: 0 8px 20px -8px var(--xb-gold-glow); } /* ---------- 7. Content panels (glass/depth) ---------------- */ .main__hero, .sidebar_school__wrap, .sidebar-ratings__list, .bookmakers-table-5-block__item, .school__item, .cards-block__item, .authors-block__item, .columns-block__content, .faq-block__item, .bookmakers-table-3-block__item-inner, .comments-from-page-block, .bonuses-filter, .bookmaker-single__editorial, .bookmaker-single__reviews, .bookmaker-single__payment-inner, .spoiler, .main__author { background: linear-gradient(180deg, var(--xb-panel-2), var(--xb-panel)) !important; border: 1px solid var(--xb-line); border-radius: var(--xb-radius) !important; box-shadow: var(--xb-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .05); transition: transform .25s var(--xb-ease), box-shadow .32s var(--xb-ease), border-color .32s var(--xb-ease); } .bookmakers-table-5-block__item:hover, .cards-block__item:hover, .school__item:hover, .authors-block__item:hover { transform: translateY(-4px); border-color: var(--xb-gold-line); box-shadow: 0 26px 54px -22px rgba(0, 0, 0, .82), 0 0 0 1px var(--xb-gold-line) inset; } /* ---------- 8. Rating tables + rank badges ----------------- */ .table { border-collapse: separate !important; border-spacing: 0; } .table th { color: var(--xb-gold) !important; text-transform: uppercase; letter-spacing: .05em; font-size: 12px; border-bottom: 1px solid var(--xb-gold-line) !important; } .table td { border-bottom: 1px solid var(--xb-line) !important; } .bookmakers-table-2-block .table tr:hover td, .bookmakers-table-4-block .table tr:hover td { background: rgba(248, 173, 29, .06) !important; } .stars:before { filter: drop-shadow(0 0 6px rgba(255, 232, 21, .4)); } .sidebar-ratings__item.current, .sidebar-ratings__item:hover { background: linear-gradient(90deg, var(--xb-gold-soft), transparent) !important; color: var(--xb-gold) !important; box-shadow: inset 3px 0 0 var(--xb-gold); } /* ---------- 9. Links & article accents --------------------- */ .the-content a { color: var(--xb-gold) !important; text-underline-offset: 3px; text-decoration-color: var(--xb-gold-line) !important; transition: color .2s var(--xb-ease), text-decoration-color .2s var(--xb-ease); } .the-content a:hover { color: var(--xb-gold-2) !important; text-decoration-color: var(--xb-gold) !important; } .the-content h2 { position: relative; padding-left: 18px; } .the-content h2::before { content: ""; position: absolute; left: 0; top: .12em; bottom: .12em; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--xb-gold-2), var(--xb-gold-deep)); box-shadow: 0 0 10px -2px var(--xb-gold-glow); } /* ---------- 10. Forms -------------------------------------- */ .header-search, .login-email, input[type="text"], input[type="email"], input[type="search"], textarea { background: rgba(255, 255, 255, .04) !important; border: 1px solid var(--xb-line-strong) !important; border-radius: 11px !important; color: var(--xb-text) !important; transition: border-color .2s var(--xb-ease), box-shadow .2s var(--xb-ease), background .2s var(--xb-ease); } .header-search:focus, .login-email:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="search"]:focus, textarea:focus { outline: none; border-color: var(--xb-gold) !important; background: rgba(255, 255, 255, .06) !important; box-shadow: 0 0 0 3px var(--xb-gold-soft) !important; } #searchsubmit { color: var(--xb-gold) !important; } /* ---------- 11. Footer ------------------------------------- */ .site-footer__inner { background: linear-gradient(180deg, var(--xb-panel), #0a121b) !important; border-top: 1px solid var(--xb-gold-line); border-radius: var(--xb-radius) var(--xb-radius) 0 0; } .site-footer__columns ul li a { color: var(--xb-muted) !important; transition: color .18s var(--xb-ease), padding-left .18s var(--xb-ease); } .site-footer__columns ul li a:hover { color: var(--xb-gold) !important; padding-left: 5px; } .site-footer__title, .site-footer__subtitle { color: #fff !important; } /* ---------- 12. Scroll-reveal (redesign.js adds .xb-in) ----- */ .xb-reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s var(--xb-ease-out), transform .6s var(--xb-ease-out); transition-delay: var(--xb-delay, 0ms); will-change: opacity, transform; } .xb-reveal.xb-in { opacity: 1; transform: none; } /* ---------- 13. Bonuses (listing + filter) ----------------- */ .bonuses-table__item { position: relative; border-radius: var(--xb-radius) !important; background: linear-gradient(180deg, var(--xb-panel-2), var(--xb-panel)) !important; box-shadow: var(--xb-shadow-sm), inset 0 0 0 1px var(--xb-line) !important; transition: transform .3s var(--xb-ease-out), box-shadow .32s var(--xb-ease), border-color .32s var(--xb-ease); overflow: hidden; } .bonuses-table__item:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .85), inset 0 0 0 1px var(--xb-gold-line) !important; } /* keep the bookmaker brand colour (inline bg) — only round + hairline it */ .bonuses-table__logo { border-radius: var(--xb-radius-sm); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10); } .bonuses-table__title { font-family: var(--xb-head) !important; font-weight: 700; color: var(--xb-text) !important; letter-spacing: -.01em; } .bonuses-table__item:hover .bonuses-table__title { color: var(--xb-gold-2) !important; } .bonuses-table__time date { color: var(--xb-muted) !important; font-size: 12px; letter-spacing: .02em; } .bonuses-table__cat > div:last-child { color: var(--xb-gold) !important; font-weight: 700; } /* filter panel (base panel already styled in §7) */ .bonuses-filter__title { font-family: var(--xb-head) !important; color: #fff !important; } .filter-item__title { color: var(--xb-gold) !important; font-weight: 600; letter-spacing: .01em; } .filter-item__inner:hover { color: var(--xb-gold-2) !important; } .reset-filters.btn, .close-filters { color: var(--xb-gold) !important; border: 1px solid var(--xb-gold-line) !important; border-radius: 10px !important; transition: background .2s var(--xb-ease), border-color .2s var(--xb-ease); } .reset-filters.btn:hover { background: var(--xb-gold-soft) !important; border-color: var(--xb-gold) !important; } /* ---------- 14. Single bookmaker page ---------------------- */ .bookmaker-single__title { font-family: var(--xb-head) !important; letter-spacing: -.015em; } /* sticky-ish page nav (base panel from §7 not applied here — style directly) */ .bookmaker-single__page-nav { background: var(--xb-glass) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--xb-line) !important; border-radius: var(--xb-radius) !important; box-shadow: var(--xb-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .05) !important; } .bookmaker-single__page-nav-title { font-family: var(--xb-head) !important; color: #fff !important; } .bookmaker-single__page-nav-content ul li a { display: block; border-radius: 9px; color: var(--xb-muted) !important; transition: background .18s var(--xb-ease), color .18s var(--xb-ease), padding-left .18s var(--xb-ease); } .bookmaker-single__page-nav-content ul li a:hover { background: var(--xb-gold-soft) !important; color: #fff !important; padding-left: 14px; box-shadow: inset 3px 0 0 var(--xb-gold); } /* pros / cons colour-coding */ .bookmaker-single__editorial-title h3 { font-family: var(--xb-head) !important; color: var(--xb-text) !important; } .bookmaker-single__editorial-advantages ul li { position: relative; padding-left: 26px; list-style: none; } .bookmaker-single__editorial-advantages ul li::before { content: ""; position: absolute; left: 4px; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #7ff0b0, #16a34a); box-shadow: 0 0 8px -1px rgba(34, 197, 94, .6); } .bookmaker-single__editorial-advantages.disadvantages ul li::before { background: radial-gradient(circle at 40% 35%, #ffb0b0, #dc2626); box-shadow: 0 0 8px -1px rgba(220, 38, 38, .55); } .bookmaker-single__editorial-stars .stars:before { filter: drop-shadow(0 0 6px var(--xb-gold-glow)); } /* review comments */ .bookmaker-single__reviews-comment { background: linear-gradient(180deg, var(--xb-panel-2), var(--xb-panel)) !important; border: 1px solid var(--xb-line) !important; border-radius: var(--xb-radius-sm) !important; box-shadow: var(--xb-shadow-sm); } .bookmaker-single__reviews-comment-author { color: var(--xb-gold) !important; font-weight: 700; font-family: var(--xb-head); } .bookmaker-single__reviews-comment-date { color: var(--xb-muted) !important; font-size: 12px; } /* fill button → gold */ .bookmaker-single__reviews-actions .btn_fill, .btn_fill, .btn_yellow { background: radial-gradient(160px circle at var(--xb-mx, 50%) 40%, rgba(255, 255, 255, .34), transparent 55%), linear-gradient(120deg, var(--xb-gold-2) 0%, var(--xb-gold) 38%, var(--xb-gold-deep) 66%, var(--xb-gold) 100%) !important; background-size: auto, 220% 100% !important; background-position: center, 0 0 !important; color: #10161f !important; border: none !important; border-radius: 11px !important; font-weight: 700 !important; box-shadow: var(--xb-glow) !important; transition: transform .18s var(--xb-ease), box-shadow .25s var(--xb-ease), background-position .55s var(--xb-ease) !important; } .btn_fill:hover, .btn_yellow:hover { transform: translateY(-2px); background-position: center, 100% 0 !important; box-shadow: 0 18px 38px -12px var(--xb-gold-glow) !important; } .bookmaker-tip { color: var(--xb-muted) !important; } /* ---------- 15. Home hero — polish only (layout=Customizer) - */ body:not(.search) .posts__item:first-of-type { box-shadow: var(--xb-shadow), inset 0 0 0 1px var(--xb-line) !important; } body:not(.search) .posts__item:first-of-type:hover { transform: translateY(-4px) scale(1.008); box-shadow: 0 42px 84px -28px rgba(0, 0, 0, .92), inset 0 0 0 1.5px var(--xb-gold-line) !important; } body:not(.search) .posts__item:first-of-type .posts__title span { text-shadow: 0 2px 20px rgba(0, 0, 0, .55); letter-spacing: -.01em; } /* animated gold accent under the hero headline */ body:not(.search) .posts__item:first-of-type .posts__title::after { content: ""; display: block; width: 60px; height: 3px; margin-top: 14px; border-radius: 3px; background: linear-gradient(90deg, var(--xb-gold), var(--xb-gold-2)); box-shadow: var(--xb-glow); transform: scaleX(.55); transform-origin: left; transition: transform .45s var(--xb-ease-out); } body:not(.search) .posts__item:first-of-type:hover .posts__title::after { transform: scaleX(1); } /* ---------- 17. Internal / article pages ------------------- */ /* box the article body so reading pages stop looking bare */ .main__content .article { background: linear-gradient(180deg, var(--xb-panel-2), var(--xb-panel)) !important; border: 1px solid var(--xb-line); border-radius: var(--xb-radius) !important; box-shadow: var(--xb-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .05); padding: clamp(18px, 3vw, 40px) !important; } .article__title { font-family: var(--xb-head) !important; font-weight: 800 !important; font-size: clamp(26px, 3.4vw, 44px) !important; line-height: 1.1 !important; letter-spacing: -.02em; color: #fff !important; text-wrap: balance; } /* reading typography */ .the-content p { line-height: 1.72; } .the-content > p:first-of-type { font-size: 1.06em; color: #f4f8fc; } .the-content ul, .the-content ol { padding-left: 4px; } .the-content ul li, .the-content ol li { position: relative; list-style: none; padding-left: 28px; margin: 9px 0; line-height: 1.6; } .the-content ul li::before { content: ""; position: absolute; left: 6px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--xb-gold-2), var(--xb-gold-deep)); box-shadow: 0 0 8px -1px var(--xb-gold-glow); } .the-content ol { counter-reset: xbc; } .the-content ol li::before { counter-increment: xbc; content: counter(xbc); position: absolute; left: 0; top: .05em; width: 20px; height: 20px; border-radius: 6px; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; color: #10161f; background: linear-gradient(135deg, var(--xb-gold-2), var(--xb-gold)); box-shadow: 0 4px 10px -4px var(--xb-gold-glow); } .the-content blockquote { margin: 22px 0; padding: 16px 20px; border-left: 3px solid var(--xb-gold) !important; background: var(--xb-gold-soft) !important; border-radius: 0 var(--xb-radius-sm) var(--xb-radius-sm) 0; color: var(--xb-text) !important; font-style: italic; } .the-content img { max-width: 100%; height: auto; border-radius: var(--xb-radius-sm); } .the-content figure img, .the-content p img { box-shadow: var(--xb-shadow-sm); } .the-content hr { border: none; height: 1px; margin: 28px 0; background: linear-gradient(90deg, transparent, var(--xb-gold-line), transparent); } .the-content strong, .the-content b { color: #fff; } /* generic section title (related, blocks) + accent bar */ .block_title, .single_related .block_title { font-family: var(--xb-head) !important; color: #fff !important; font-weight: 700; position: relative; padding-bottom: 12px; } .block_title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--xb-gold), var(--xb-gold-2)); box-shadow: 0 0 12px -1px var(--xb-gold-glow); } /* "Рекомендуем к прочтению" cards */ .single_related__item { transition: transform .3s var(--xb-ease-out); } .single_related__img { overflow: hidden; border-radius: var(--xb-radius-sm); box-shadow: var(--xb-shadow-sm); } .single_related__img img { transition: transform .4s var(--xb-ease-out); display: block; width: 100%; } .single_related__item:hover { transform: translateY(-4px); } .single_related__item:hover .single_related__img img { transform: scale(1.05); } .single_related__title { display: block; font-family: var(--xb-head); color: var(--xb-text) !important; font-weight: 600; transition: color .2s var(--xb-ease); } .single_related__item:hover .single_related__title { color: var(--xb-gold-2) !important; } /* sidebar bookmaker promo banner */ .aside_banner, .aside_banner__wrap { background: linear-gradient(180deg, var(--xb-panel-2), var(--xb-panel)) !important; border: 1px solid var(--xb-gold-line) !important; border-radius: var(--xb-radius) !important; box-shadow: var(--xb-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .05) !important; } .banner__title { font-family: var(--xb-head) !important; color: #fff !important; } .banner__promocode { border: 1px dashed var(--xb-gold-line) !important; border-radius: 10px !important; background: var(--xb-gold-soft) !important; color: var(--xb-gold-2) !important; font-weight: 700; letter-spacing: .06em; } .btn_green { background: linear-gradient(120deg, #38d07d 0%, #16a34a 55%, #0f8a3d 100%) !important; color: #06210f !important; border: none !important; border-radius: 11px !important; font-weight: 700 !important; box-shadow: 0 12px 30px -12px rgba(34, 197, 94, .5) !important; transition: transform .18s var(--xb-ease), box-shadow .25s var(--xb-ease), filter .2s var(--xb-ease); } .btn_green:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 18px 40px -14px rgba(34, 197, 94, .6) !important; } /* comments */ .comments-title, .comments-area .comments-title { font-family: var(--xb-head) !important; color: #fff !important; } .login-notice { background: linear-gradient(180deg, var(--xb-panel-2), var(--xb-panel)) !important; border: 1px solid var(--xb-line) !important; border-radius: var(--xb-radius-sm) !important; box-shadow: var(--xb-shadow-sm); } /* ---------- 18. Rating tables (лучшие букмекеры) ----------- */ /* "Читать обзор" — keep it a clean gold LINK (not a jammed gold pill) */ .bookmaker-page-link, .bookmakers-table-5-block__item .bookmaker-page-link, .bookmakers-table-5-block__item .bookmaker-page-btn-link, .bookmaker-page-btn-link { color: var(--xb-gold) !important; font-family: var(--xb-head); font-weight: 600 !important; font-size: 12px !important; line-height: 15px !important; text-decoration: none !important; letter-spacing: .01em; border: none !important; box-shadow: none !important; background: none !important; padding: 0 !important; border-bottom: 1px dashed var(--xb-gold-line) !important; border-radius: 0 !important; transition: color .18s var(--xb-ease), border-color .18s var(--xb-ease); display: inline; transform: none !important; } .bookmaker-page-link:hover, .bookmakers-table-5-block__item .bookmaker-page-btn-link:hover, .bookmaker-page-btn-link:hover { color: var(--xb-gold-2) !important; border-color: var(--xb-gold) !important; } /* primary "На сайт" button — premium blue gradient (keeps its fixed row height) */ .btn__blue { background: linear-gradient(120deg, #2f8bff 0%, #1e63e6 52%, #2842f9 100%) !important; color: #fff !important; border: none !important; box-shadow: 0 10px 26px -12px rgba(16, 140, 255, .65) !important; } .btn__blue:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 16px 34px -12px rgba(16, 140, 255, .8) !important; } /* rating row internals — dark premium */ .bookmakers-table-5-block__item-bonus > div { border-color: var(--xb-line-strong) !important; background: rgba(255, 255, 255, .03); } .bookmakers-table-5-block__item-bonus > div > div:first-child { color: var(--xb-muted) !important; } .bookmakers-table-5-block__item-bonus > div > div a:not(.good):not(.bad) { color: var(--xb-gold) !important; } .bookmakers-table-5-block__item-info > div { color: var(--xb-muted) !important; } .bookmakers-table-5-block__item .stars { filter: drop-shadow(0 0 6px var(--xb-gold-glow)); } /* gold left-edge accent on hover for the whole row */ .bookmakers-table-5-block__item:hover { box-shadow: 0 26px 54px -22px rgba(0, 0, 0, .82), inset 4px 0 0 var(--xb-gold), 0 0 0 1px var(--xb-gold-line) inset !important; } /* --- leftblock (Fonbet promo, JS-injected after the first

) --- */ /* .main is already position:relative; banner is position:absolute;right:0;top:0. Overlap happened because .main__content (max 1024) leaves NO gutter when .main is narrow → the absolute banner lands on the text. Fix: reserve a right gutter ONLY when the banner exists (:has), and keep it out of the text on mid screens. */ .leftblock img { width: 100% !important; height: auto !important; border-radius: var(--xb-radius) !important; box-shadow: var(--xb-shadow) !important; } @media (min-width: 1100px) { .main:has(.leftblock) .main__content { max-width: calc(100% - 330px) !important; } body:not(.home) .leftblock { position: absolute !important; top: 0; right: 0; width: 300px !important; margin: 33px 0 0 !important; z-index: 3; } } /* below 1100px there is no room for a side gutter → let it flow inline, centred */ @media (max-width: 1099px) { body:not(.home) .leftblock { position: static !important; width: auto !important; max-width: 420px; margin: 16px auto !important; } } /* ---------- 19. Single bookmaker review — finish ----------- */ /* main review body + bonuses block get the same panel as the other sections */ .bookmaker-single__item, .bookmaker-single__bonuses { background: linear-gradient(180deg, var(--xb-panel-2), var(--xb-panel)) !important; border: 1px solid var(--xb-line); border-radius: var(--xb-radius) !important; box-shadow: var(--xb-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .05); padding: clamp(18px, 3vw, 36px) !important; } /* even vertical rhythm + anchor offset so #nav jumps clear the header */ .bookmaker-single > * { margin-bottom: 22px; } .bookmaker-single [id] { scroll-margin-top: 96px; } .bookmaker-single__title { margin-bottom: 12px; } .bookmaker-single__editorial h2, .bookmaker-single__payment h2, .bookmaker-single__reviews h2 { margin-bottom: 18px; } /* payment facts → clean stat tiles */ .bookmaker-single__payment .margin-container { display: flex; flex-wrap: wrap; gap: 12px; } .bookmaker-single__payment .margin-container > div { flex: 1 1 150px; background: rgba(255, 255, 255, .03); border: 1px solid var(--xb-line); border-radius: var(--xb-radius-sm); padding: 12px 16px; } .bookmaker-single__payment .margin-container > div > span { display: block; color: var(--xb-gold) !important; font-family: var(--xb-head); font-weight: 700; font-size: 1.15em; } .bookmaker-single__payment .margin-container > div > div { color: var(--xb-muted) !important; font-size: 12px; } .bookmaker-single__pay-systems { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } /* ---------- 16. Mobile ------------------------------------- */ @media screen and (max-width: 1280px) { .site-header .main-menu > .menu-item > .sub-menu { columns: 1 !important; min-width: 0 !important; max-width: 100% !important; max-height: none !important; top: auto !important; left: auto !important; } .site-header .main-menu .sub-menu { animation: none; } .site-header .main-menu > .menu-item-has-children::before { display: none; } .site-header { border-radius: 0; } .site-header::after { display: none; } .posts__item:hover { transform: translateY(-4px); } body:not(.search) .posts__item:first-of-type:hover { transform: translateY(-4px); } .bonuses-table__item:hover { transform: translateY(-3px); } } @media (prefers-reduced-motion: reduce) { .xb-reveal { opacity: 1 !important; transform: none !important; } * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* Fix: paginate section must not overlap content on mobile */ .paginate { margin: 24px 0 48px !important; margin-top: 24px !important; padding: 0 16px; position: relative !important; text-align: center; top: auto !important; transform: none !important; } @media (max-width: 480px) { .paginate { margin: 16px 0 32px !important; margin-top: 16px !important; } } /* ---------- 20. BET CALCULATOR (system / express / arbitrage) --- */ .calc-block { position: relative !important; background: linear-gradient(180deg, var(--xb-panel-2), var(--xb-panel)) !important; border: 1px solid var(--xb-line); border-radius: var(--xb-radius) !important; box-shadow: var(--xb-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .05); padding: clamp(18px, 2.4vw, 28px) !important; margin: 22px 0; z-index: 1; } .calc-block__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .calc-block__title { font-family: var(--xb-head) !important; color: #fff !important; font-weight: 700; font-size: clamp(18px, 2vw, 22px) !important; letter-spacing: -.01em; margin: 0; } .calc-block__subtitle { color: var(--xb-muted); font-size: 13px; } .calc-tabs { display: inline-flex; gap: 4px; padding: 4px; background: rgba(0, 0, 0, .35); border: 1px solid var(--xb-line); border-radius: 11px; } .calc-tab { appearance: none; border: 0; background: transparent; cursor: pointer; font-family: var(--xb-head); font-weight: 600; font-size: 13px; letter-spacing: .01em; color: var(--xb-muted); padding: 8px 14px; border-radius: 8px; transition: color .2s var(--xb-ease), background .2s var(--xb-ease); } .calc-tab:hover { color: var(--xb-text); } .calc-tab[aria-selected="true"] { background: linear-gradient(120deg, var(--xb-gold-2), var(--xb-gold)); color: #10161f; box-shadow: 0 6px 16px -8px var(--xb-gold-glow); } .calc-panel { display: block; } .calc-panel[data-active="false"] { display: none; } .calc-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 14px; } .calc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .calc-field > span { font-family: var(--xb-head); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--xb-muted); font-weight: 700; } .calc-input, .calc-select { width: 100%; min-width: 0; background: rgba(255, 255, 255, .04) !important; border: 1px solid var(--xb-line-strong) !important; border-radius: 11px !important; color: var(--xb-text) !important; padding: 12px 14px !important; font: 600 14px/1.2 'Inter', sans-serif !important; transition: border-color .2s var(--xb-ease), box-shadow .2s var(--xb-ease), background .2s var(--xb-ease); } .calc-input:focus, .calc-select:focus { outline: none !important; border-color: var(--xb-gold) !important; background: rgba(255, 255, 255, .06) !important; box-shadow: 0 0 0 3px var(--xb-gold-soft) !important; } .calc-input::placeholder { color: rgba(182, 194, 207, .5); font-weight: 400; } .calc-rows { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 14px; } .calc-result { background: rgba(0, 0, 0, .28) !important; border: 1px solid var(--xb-gold-line); border-radius: var(--xb-radius-sm); padding: 16px 18px !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 22px; margin-top: 16px; } .calc-result__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .calc-result__label { font-family: var(--xb-head); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--xb-muted); font-weight: 700; } .calc-result__value { color: var(--xb-gold-2) !important; font-family: var(--xb-head) !important; font-weight: 800 !important; font-size: clamp(18px, 2vw, 24px) !important; letter-spacing: -.01em; word-break: break-word; } .calc-yield--green .calc-result__value { color: #7ff0b0 !important; } .calc-yield--yellow .calc-result__value { color: var(--xb-gold) !important; } .calc-yield--red .calc-result__value { color: #ff9d9d !important; } .calc-help { margin-top: 12px; font-size: 12px; color: var(--xb-muted); line-height: 1.55; } .calc-help a { color: var(--xb-gold) !important; text-decoration-color: var(--xb-gold-line); } /* ---------- 21. FAQ accordion (click-toggle for faq-block) ---- */ /* The native Gutenberg faq-block uses .faq-block__title + .faq-block__content. Make .faq-block__title a clickable trigger and collapse .faq-block__content by default. */ .faq-block__item { padding: 0 !important; overflow: hidden; transition: border-color .25s var(--xb-ease); } .faq-block__title { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px; padding: 18px 22px !important; cursor: pointer !important; user-select: none; color: #fff !important; font-family: var(--xb-head) !important; font-size: clamp(15px, 1.4vw, 17px) !important; font-weight: 600 !important; transition: color .2s var(--xb-ease), background .2s var(--xb-ease); } .faq-block__title:hover { color: var(--xb-gold-2) !important; } .faq-block__title .icon { flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--xb-gold-soft); color: var(--xb-gold); transition: transform .3s var(--xb-ease-out), background .2s var(--xb-ease); } .faq-block__title .icon::before { content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); transition: transform .3s var(--xb-ease-out); } .faq-block__item.is-open > .faq-block__title { color: var(--xb-gold-2) !important; } .faq-block__item.is-open > .faq-block__title .icon { background: var(--xb-gold); color: #10161f; } .faq-block__item.is-open > .faq-block__title .icon::before { transform: rotate(-135deg) translate(-1px, -1px); } .faq-block__content { max-height: 0; overflow: hidden; padding: 0 22px; color: var(--xb-muted); transition: max-height .35s var(--xb-ease), padding .25s var(--xb-ease); } .faq-block__item.is-open > .faq-block__content { max-height: 800px; padding: 0 22px 20px; } .faq-block__content p:last-child { margin-bottom: 0; } /* ---------- 22. TOP-5 numbered list (for sidebar / inline) ---- */ .top-list { position: relative; z-index: 1; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: tl; } .top-list__item { position: relative; counter-increment: tl; display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 14px 18px; background: linear-gradient(180deg, var(--xb-panel-2), var(--xb-panel)) !important; border: 1px solid var(--xb-line); border-radius: var(--xb-radius-sm) !important; box-shadow: var(--xb-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .05); transition: transform .25s var(--xb-ease), border-color .25s var(--xb-ease), box-shadow .25s var(--xb-ease); } .top-list__item:hover { transform: translateY(-2px); border-color: var(--xb-gold-line); box-shadow: 0 18px 38px -16px rgba(0, 0, 0, .82), inset 0 0 0 1px var(--xb-gold-line); } .top-list__item::before { content: counter(tl); width: 44px; height: 44px; display: grid; place-items: center; background: linear-gradient(135deg, var(--xb-gold-2), var(--xb-gold)); color: #10161f; font-family: var(--xb-head); font-weight: 800; font-size: 18px; border-radius: 50%; box-shadow: 0 8px 20px -8px var(--xb-gold-glow); } .top-list__title { font-family: var(--xb-head); color: var(--xb-text); font-weight: 700; line-height: 1.25; } .top-list__title a { color: inherit !important; text-decoration: none !important; } .top-list__title a:hover { color: var(--xb-gold-2) !important; } .top-list__meta { font-size: 12px; color: var(--xb-muted); margin-top: 2px; } .top-list__cta { white-space: nowrap; } @media (max-width: 560px) { .top-list__item { grid-template-columns: 36px 1fr; } .top-list__item::before { width: 36px; height: 36px; font-size: 15px; } .top-list__cta { grid-column: 1 / -1; justify-self: stretch; text-align: center; } } /* ---------- 23. ARTICLE TOC (sticky in-page nav for long reads) - */ /* Rendered as

Designed for .the-content pages with h2/h3 anchors. On wide screens with a sidebar: TOC sits in a left column next to content (grid). On wide screens without sidebar: TOC sits as a sticky sidebar-like card. On narrow screens: TOC is a plain block above the article. */ .article-toc { position: relative; z-index: 1; background: rgba(0, 0, 0, .28) !important; border: 1px solid var(--xb-line); border-radius: var(--xb-radius-sm); padding: 16px 18px !important; margin: 0 0 28px; max-width: 100%; box-sizing: border-box; clear: both; float: none; } .article-toc__title { font-family: var(--xb-head) !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: .08em; color: var(--xb-gold) !important; font-weight: 700; margin: 0 0 10px; } .article-toc ul { list-style: none; padding: 0; margin: 0; counter-reset: toc; } .article-toc li { counter-increment: toc; margin: 0; } .article-toc a { display: flex !important; align-items: baseline; gap: 8px; padding: 6px 8px !important; margin: 0 !important; border-radius: 7px; color: var(--xb-muted) !important; font-size: 14px !important; line-height: 1.45; text-decoration: none !important; text-decoration-color: transparent !important; transition: color .18s var(--xb-ease), background .18s var(--xb-ease), padding-left .18s var(--xb-ease); } .article-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--xb-head); font-size: 11px; font-weight: 700; color: var(--xb-gold); min-width: 22px; } .article-toc a:hover { color: #fff !important; background: var(--xb-gold-soft) !important; padding-left: 12px !important; } .article-toc a.is-current { color: var(--xb-gold-2) !important; } .article-toc a.is-current::before { color: var(--xb-gold-2); } /* Wide screens with a sidebar in DOM: arrange main__content as 2-col grid */ @media (min-width: 1100px) { body.has-bookmaker-sidebar .main__content, body.has-school-sidebar .main__content { display: grid !important; grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) !important; gap: 28px; align-items: start; } body.has-bookmaker-sidebar .main__content > .article-toc, body.has-school-sidebar .main__content > .article-toc { grid-column: 1 !important; grid-row: 1 / -1; margin: 0; position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; align-self: start; } body.has-bookmaker-sidebar .main__content > *:not(.article-toc), body.has-school-sidebar .main__content > *:not(.article-toc) { grid-column: 2 !important; min-width: 0; } /* No sidebar in DOM: simple inline-sticky */ .article-toc.is-sticky:not(body.has-bookmaker-sidebar .article-toc):not(body.has-school-sidebar .article-toc) { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; align-self: start; } } /* Narrow screens: TOC is a plain block above the article, never sticky */ @media (max-width: 1099px) { .article-toc { position: relative !important; top: auto !important; max-height: none !important; margin: 0 0 20px !important; } } /* ---------- 24. BACK-TO-TOP button ------------------------------ */ .back-to-top { position: fixed !important; right: 24px; bottom: 24px; width: 48px; height: 48px; display: grid !important; place-items: center !important; border-radius: 50% !important; background: linear-gradient(135deg, var(--xb-gold-2), var(--xb-gold)) !important; color: #10161f !important; font-style: normal !important; cursor: pointer !important; box-shadow: var(--xb-shadow-sm), 0 0 0 1px rgba(0, 0, 0, .35) inset, 0 12px 30px -12px var(--xb-gold-glow) !important; opacity: 0; visibility: hidden; transform: translateY(8px) scale(.92); transition: opacity .25s var(--xb-ease), transform .25s var(--xb-ease-out), visibility 0s linear .25s; z-index: 600; } .back-to-top::before { content: ""; width: 12px; height: 12px; border-left: 2.5px solid currentColor; border-top: 2.5px solid currentColor; transform: translateY(2px) rotate(45deg); } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .25s var(--xb-ease), transform .25s var(--xb-ease-out), visibility 0s; } .back-to-top:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 18px 38px -12px var(--xb-gold-glow), 0 0 0 1px rgba(0, 0, 0, .35) inset !important; } .back-to-top:active { transform: translateY(0) scale(.98); } @media (max-width: 600px) { .back-to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; } } @media (prefers-reduced-motion: reduce) { .back-to-top { transition: opacity .15s; transform: none; } } /* ---------- 27. RELATED BOOKMAKERS (internal-link juice buster) - */ /* Output: