/* ==================================================================== * Custom overrides — loaded last in so it wins specificity ties. * Targets: larger header logo + Brazil flag visibility, burger on the * right side on mobile. * ==================================================================== */ /* --- Larger logo on desktop ------------------------------------------ */ /* Defaults: var(--logo-width, 106px) + inline `--logo-width: 120px`. * Bump the inline-overridable variable globally so both fallback and * inline-style consumers grow proportionally. */ .v13-header { --logo-width: 180px !important; } /* --- Mobile (≤1000px) ------------------------------------------------ */ @media (max-width: 1000px) { /* Logo: original mobile rule hard-codes width:85px. Push it bigger so * the Brazil flag emblem on the right side of the logo file is * actually visible. */ .v13-header__panel-logo { width: 180px !important; margin-right: auto !important; } /* Burger to the right side on mobile. * Using absolute positioning is the only reliable approach here — * flex-wrap on the parent makes `order` tricky (download and menu * wrap to their own rows and push an `order:99` burger to the very * bottom). Pulling burger out of flow with absolute keeps it * top-right of the header regardless of how the other rows wrap. */ .v13-header__content { position: relative; } /* Reserve a tiny gap on the logo so it can't visually touch the * absolutely-positioned burger on the right (logo 180px + ~30px burger * fits inside any modern viewport easily). */ .v13-header__panel-logo { padding-right: 40px; box-sizing: content-box; } .v13-header__content > .burger-btn, .v13-header__content .burger-btn.burger-1 { position: absolute !important; top: 16px !important; right: 0 !important; margin: 0 !important; } /* Make CADASTRE-SE and ENTRAR equal width so the two header CTAs line * up cleanly. Original v13_7.css has * .v13-header__download-button { width: fit-content } * which hugs the text — flex:1 doesn't reliably override `width` across * browsers when both are set. CSS Grid with two equal fr columns is the * watertight fix: each column is forced to the same width regardless of * what `width`/`flex-basis` the children request. */ .v13-header__download { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; width: 100% !important; } .v13-header__download-button, .v13-header__download .vAll-meta-button { width: auto !important; min-width: 0 !important; max-width: none !important; justify-content: center; } } /* --- Smaller phones (≤480px) ---------------------------------------- */ @media (max-width: 480px) { .v13-header__panel-logo { width: 160px !important; } } /* ==================================================================== * Refined Brand design layer * -------------------------------------------------------------------- * Keeps the original cool-grey body bg (#DDE4EC) so hero PNGs blend in, * but refreshes everything else: golden capsule CTA, cyan secondary CTA, * glass header, hero/card radii, hover lifts, tightened headings, dark * navy footer. * ==================================================================== */ :root { --button-bg: #F59E0B !important; /* warm gold */ --button-hover-bg: #D97706 !important; --button-color: #0F172A !important; --button-hover-color: #0F172A !important; --button-radius: 999px !important; --secondary-button-bg: #0EA5E9 !important; --secondary-button-hover-bg: #0284C7 !important; --secondary-button-color: #FFFFFF !important; } /* Glass header */ .v13-header, .v13-header_sticky { background: rgba(8, 22, 50, 0.82) !important; -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid rgba(252, 211, 77, 0.22); } /* Tighter only on the biggest titles — leave h3 (card headings) alone. * h3-level subheadings inside game cards looked too heavy with -0.025em * + weight 800. */ h1, .v13-heroscreen__title { letter-spacing: -0.02em !important; line-height: 1.15 !important; font-weight: 800 !important; } h2, .v13-section__title { letter-spacing: -0.015em !important; line-height: 1.2 !important; } /* Primary CTA: gold gradient capsule with glow */ .vAll-button.button_1, .vAll-button_header.button_1, .vAll-button_hero.button_1, .vAll-button_footer.button_1, .v13-header__download-button.vAll-button_header { background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%) !important; color: #0F172A !important; border-radius: 999px !important; font-weight: 700 !important; letter-spacing: -0.005em; box-shadow: 0 8px 24px -6px rgba(245, 158, 11, 0.45), 0 1px 3px rgba(15, 23, 42, 0.08); transition: transform .18s ease, box-shadow .25s ease, filter .2s ease !important; } .vAll-button.button_1:hover, .vAll-button_header.button_1:hover, .vAll-button_hero.button_1:hover, .vAll-button_footer.button_1:hover, .v13-header__download-button.vAll-button_header:hover { transform: translateY(-2px); box-shadow: 0 14px 36px -6px rgba(245, 158, 11, 0.55), 0 2px 6px rgba(15, 23, 42, 0.1); filter: brightness(1.04); } /* Secondary CTA: cyan capsule */ .vAll-button_header-secondary.button_1, .vAll-button_footer-secondary.button_1, .v13-header__download-button.vAll-button_header-secondary { background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%) !important; color: #FFFFFF !important; border-radius: 999px !important; font-weight: 700 !important; box-shadow: 0 8px 24px -6px rgba(14, 165, 233, 0.4), 0 1px 3px rgba(15, 23, 42, 0.08); transition: transform .18s ease, box-shadow .25s ease !important; } .vAll-button_header-secondary.button_1:hover, .vAll-button_footer-secondary.button_1:hover, .v13-header__download-button.vAll-button_header-secondary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px -6px rgba(14, 165, 233, 0.55), 0 2px 6px rgba(15, 23, 42, 0.1); } /* Game cards: lift on hover */ .v1-games-advanced__card, .v1-games__card { background: #FFFFFF !important; border-radius: 20px !important; overflow: hidden; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px -8px rgba(15, 23, 42, 0.10); transition: transform .25s ease, box-shadow .3s ease !important; } .v1-games-advanced__card:hover, .v1-games__card:hover { transform: translateY(-4px); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08), 0 20px 48px -10px rgba(15, 23, 42, 0.18); } /* Pad the text block under the card image so title/description don't kiss * the card edge. */ .v1-games-advanced__card-info, .v1-games__card-info { padding: 18px 22px 22px !important; } /* Bonus / promo cards (Bônus Semanal, Cashback, Champion Tuesday etc.) — * the dark-blue text-only cards had zero internal padding so the title * and description sat right against the top/bottom edges. */ .v13-games__card { padding: 32px 28px !important; border-radius: 20px !important; } .v13-games__card-title { margin-bottom: 14px !important; } /* Hero / section blocks: bigger radius */ .v13-heroscreen, .v13-bonus-promo, .v13-section, .v13-text-image { border-radius: 28px !important; } /* Bonus-promo: subtle warm-glow border */ .v13-bonus-promo { box-shadow: 0 1px 3px rgba(245, 158, 11, 0.08), 0 12px 36px -12px rgba(245, 158, 11, 0.22); border: 1px solid rgba(245, 158, 11, 0.12); } /* Logo inside the bonus-promo card: drop the theme's white plate so the * transparent wordmark renders directly on the dark-blue card like the * header logo. */ .v13-bonus-promo__ico { object-fit: contain !important; object-position: center; background: transparent !important; border-radius: 0 !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* FAQ items: clean cards */ .v13-faq__item { background: #FFFFFF !important; border-radius: 16px !important; border: 1px solid rgba(15, 23, 42, 0.06); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } /* Tables — clip radius */ table { border-radius: 16px; overflow: hidden; } /* Burger visible against glass header */ .burger-1__icon, .burger-1__icon:after, .burger-1__icon:before { background-color: #FFFFFF !important; } /* Footer: deeper navy + golden hover on links */ .v13-footer { background: #08162A !important; color: #F1F5F9; } .v13-footer a { color: #CBD5E1; } .v13-footer a:hover { color: #F59E0B; }