/* =========================================================================== MULTI-BRAND THEME LAYER (additive) --------------------------------------------------------------------------- Base dark tokens live in premium-italian.css (:root); light overrides live in theme-modes.css ([data-theme="light"]). This file re-skins the ACCENT system per brand, selected by (set in header.php from BRAND_SLUG). Bg/surfaces stay dark for 3 brands; goldbet1 runs light. Only --it-accent* + the hardcoded gold tokens are overridden, so the whole UI (odds, links, CTAs, casino, hero) recolours from one place per brand. =========================================================================== */ /* ───────────────────────── GOALBET — Gold + Silver (dark) ───────────────── */ html[data-brand="goalbet"] { --it-accent: #f5c518; /* premium gold */ --it-accent-2: #ffe9a8; /* gold highlight */ --it-accent-3: #c8d2e0; /* silver */ --brand-grad: linear-gradient(135deg, #fff3c4 0%, #f5c518 45%, #d9a91a 100%); --brand-metal: linear-gradient(180deg, #eef2f8, #aab6c8 70%, #8593a8); --brand-glow: rgba(245, 197, 24, .45); --bs-primary-strong: #d9a91a; --bs-primary-soft: rgba(245,197,24,.12); --bs-primary-ink: #0a0e1a; --bs-accent-strong: #d9a91a; --bs-accent-soft: rgba(245,197,24,.10); --bs-accent-ink: #0a0e1a; } /* ───────────────────── KINGBET365 — Nero + Rosso (dark, aggressive) ──────── */ html[data-brand="kingbet365"] { --it-accent: #ff2238; /* rosso */ --it-accent-2: #ff6b75; /* red highlight */ --it-accent-3: #f5f6f8; /* silver/white edge */ --brand-grad: linear-gradient(135deg, #ff5a68 0%, #e11d2a 52%, #a30f1c 100%); --brand-metal: linear-gradient(180deg, #2a2c33, #14151a); --brand-glow: rgba(255, 34, 56, .50); --bs-bg: #0a0a0c; --bs-bg-strong: #050506; --bs-surface: #111115; --bs-surface-2: #17171d; --bs-surface-3: #1f1f27; --bs-border: #24242e; --bs-border-strong: #34343f; --bs-primary-strong: #c8102e; --bs-primary-soft: rgba(255,34,56,.14); --bs-primary-ink: #ffffff; --bs-accent-strong: #c8102e; --bs-accent-soft: rgba(255,34,56,.12); --bs-accent-ink: #ffffff; } /* ───────────────────── PLANET365 — Yellow + Black (dark, sporty) ─────────── */ html[data-brand="planet365"] { --it-accent: #ffd400; /* vivid yellow */ --it-accent-2: #fff06a; /* yellow highlight */ --it-accent-3: #ffffff; --brand-grad: linear-gradient(135deg, #ffe34d 0%, #ffd400 52%, #e6b800 100%); --brand-metal: linear-gradient(180deg, #232425, #0c0d0e); --brand-glow: rgba(255, 212, 0, .50); --bs-bg: #0a0b0d; --bs-bg-strong: #040506; --bs-surface: #121316; --bs-surface-2: #191a1e; --bs-surface-3: #202229; --bs-border: #23242a; --bs-border-strong: #33343c; --bs-primary-strong: #e6b800; --bs-primary-soft: rgba(255,212,0,.14); --bs-primary-ink: #0a0a0a; --bs-accent-strong: #e6b800; --bs-accent-soft: rgba(255,212,0,.12); --bs-accent-ink: #0a0a0a; } /* ───────────────── GOLDBET1 — Bianco + Blu + Giallo (light, clean) ───────── */ html[data-brand="goldbet1"] { --it-accent: #1565d8; /* blu */ --it-accent-2: #4f8ef0; /* blue highlight */ --it-accent-3: #ffce00; /* giallo accent */ --brand-grad: linear-gradient(135deg, #4f8ef0 0%, #1565d8 55%, #0d4ea8 100%); --brand-metal: linear-gradient(180deg, #ffffff, #e6edf7); --brand-glow: rgba(21, 101, 216, .35); --bs-primary-strong: #0d4ea8; --bs-primary-soft: rgba(21,101,216,.12); --bs-primary-ink: #ffffff; --bs-accent-strong: #0d4ea8; --bs-accent-soft: rgba(21,101,216,.12); --bs-accent-ink: #ffffff; } /* ============================================================================ Remap hardcoded Tailwind "yellow" accents (betslip, badges, etc.) to the active brand accent so every brand re-skins fully. For goalbet (gold≈yellow) this is visually a no-op. ========================================================================== */ [data-brand] .text-yellow-100, [data-brand] .text-yellow-200, [data-brand] .text-yellow-200\/80, [data-brand] .text-yellow-300, [data-brand] .text-yellow-300\/80, [data-brand] .text-yellow-400\/80 { color: var(--it-accent-2) !important; } [data-brand] .text-yellow-400, [data-brand] .text-yellow-500 { color: var(--it-accent) !important; } [data-brand] .bg-yellow-400, [data-brand] .bg-yellow-500 { background-color: var(--it-accent) !important; color: var(--bs-accent-ink) !important; } [data-brand] .bg-yellow-500\/40 { background-color: color-mix(in srgb, var(--it-accent) 40%, transparent) !important; } [data-brand] .bg-yellow-500\/20 { background-color: color-mix(in srgb, var(--it-accent) 20%, transparent) !important; } [data-brand] .bg-yellow-500\/15 { background-color: color-mix(in srgb, var(--it-accent) 15%, transparent) !important; } [data-brand] .bg-yellow-500\/10 { background-color: color-mix(in srgb, var(--it-accent) 10%, transparent) !important; } [data-brand] .border-yellow-500\/70 { border-color: color-mix(in srgb, var(--it-accent) 70%, transparent) !important; } [data-brand] .border-yellow-500\/60 { border-color: color-mix(in srgb, var(--it-accent) 60%, transparent) !important; } [data-brand] .border-yellow-500\/40 { border-color: color-mix(in srgb, var(--it-accent) 40%, transparent) !important; } [data-brand] .border-yellow-500\/30 { border-color: color-mix(in srgb, var(--it-accent) 30%, transparent) !important; } [data-brand] .border-yellow-500\/20 { border-color: color-mix(in srgb, var(--it-accent) 20%, transparent) !important; } [data-brand] .border-yellow-500\/15 { border-color: color-mix(in srgb, var(--it-accent) 15%, transparent) !important; } [data-brand] .border-yellow-500\/10 { border-color: color-mix(in srgb, var(--it-accent) 10%, transparent) !important; } [data-brand] .to-yellow-600 { --tw-gradient-to: var(--bs-primary-strong) !important; } /* key CTAs → brand gradient */ [data-brand] .btn-gold, [data-brand] .it-submit { background: var(--brand-grad) !important; color: var(--bs-accent-ink) !important; border: none !important; } /* ============================================================================ HERO BANNER / SLIDER (RevSlider-style) — full-width promo above sportsbook ========================================================================== */ .hero-rev { position: relative; width: 100%; margin: 0 0 6px; border-radius: 16px; overflow: hidden; background: var(--bs-surface); border: 1px solid var(--bs-border-strong); box-shadow: var(--bs-shadow); } .hero-rev__viewport { position: relative; width: 100%; /* ratios keep the whole designed creative visible (contain) with a small, premium blurred letterbox — wider as the screen grows, mirroring the reference */ aspect-ratio: 16 / 9; } @media (min-width: 640px) { .hero-rev__viewport { aspect-ratio: 28 / 10; } } @media (min-width: 1024px) { .hero-rev__viewport { aspect-ratio: 32 / 10; max-height: 360px; } } .hero-rev__track { display: flex; height: 100%; transition: transform .6s cubic-bezier(.5,.1,.2,1); will-change: transform; } .hero-rev__slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; } .hero-rev__slide a, .hero-rev__slide > .hero-rev__inner { display: block; height: 100%; text-decoration: none; } /* image slide — full designed creative shown (contain), never cropped. A blurred, scaled copy of the same image fills the letterbox for a premium look. */ .hero-rev__slide--img { background-size: cover; background-position: center; } .hero-rev__slide--img::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: inherit; background-size: cover; background-position: center; filter: blur(28px) brightness(.5); transform: scale(1.18); } .hero-rev__slide picture { position: absolute; inset: 0; z-index: 1; display: block; } .hero-rev__img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; object-position: center; } .hero-rev__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,6,13,.85) 0%, rgba(4,6,13,.45) 45%, rgba(4,6,13,.05) 100%); } /* branded default slide (no image uploaded yet) */ .hero-rev__brandbg { position: absolute; inset: 0; background: radial-gradient(120% 160% at 88% 12%, var(--brand-glow), transparent 55%), var(--brand-metal, #0d1322); } .hero-rev__brandbg::after { content: ""; position: absolute; inset: 0; opacity: .5; background: repeating-linear-gradient(115deg, transparent 0 38px, rgba(255,255,255,.03) 38px 40px), radial-gradient(60% 120% at 100% 0%, var(--brand-glow), transparent 60%); } .hero-rev__inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 18px clamp(18px, 5vw, 64px); max-width: 760px; } .hero-rev__eyebrow { font-size: clamp(.6rem,1.6vw,.72rem); letter-spacing: .26em; text-transform: uppercase; font-weight: 800; color: var(--it-accent-2); } .hero-rev__title { margin: 0; font-weight: 900; line-height: 1.02; letter-spacing: -.02em; font-size: clamp(1.4rem, 4.6vw, 3rem); color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.5); } .hero-rev__title .accent { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-rev__sub { margin: 0; font-size: clamp(.78rem,2.2vw,1.05rem); color: rgba(255,255,255,.82); font-weight: 600; max-width: 46ch; } .hero-rev__cta { align-self: flex-start; margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 999px; font-weight: 800; font-size: clamp(.8rem,2vw,.95rem); background: var(--brand-grad); color: var(--bs-accent-ink); border: 0; cursor: pointer; box-shadow: 0 10px 26px var(--brand-glow); transition: transform .12s, filter .15s; text-decoration: none; } .hero-rev__cta:hover { filter: brightness(1.06); transform: translateY(-1px); } .hero-rev__cta:active { transform: scale(.97); } /* light brand keeps text dark on the bright slide */ html[data-brand="goldbet1"] .hero-rev__title { color: #0f1626; text-shadow: none; } html[data-brand="goldbet1"] .hero-rev__sub { color: #33415c; } html[data-brand="goldbet1"] .hero-rev__scrim { background: linear-gradient(90deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.05) 100%); } /* arrows */ .hero-rev__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; background: rgba(8,12,22,.5); color: #fff; border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); transition: background .15s, transform .1s; opacity: 0; } .hero-rev:hover .hero-rev__nav { opacity: 1; } .hero-rev__nav:hover { background: var(--it-accent); color: var(--bs-accent-ink); } .hero-rev__nav:active { transform: translateY(-50%) scale(.92); } .hero-rev__nav--prev { left: 12px; } .hero-rev__nav--next { right: 12px; } /* dots */ .hero-rev__dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 4; display: flex; gap: 7px; justify-content: center; } .hero-rev__dot { width: 8px; height: 8px; border-radius: 999px; border: 0; cursor: pointer; padding: 0; background: rgba(255,255,255,.4); transition: width .25s, background .2s; } .hero-rev__dot.is-active { width: 22px; background: var(--it-accent); } /* embed mode (raw RevSlider / iframe override) */ .hero-rev--embed .hero-rev__viewport { aspect-ratio: auto; height: auto; } .hero-rev--embed iframe { display: block; width: 100%; border: 0; } @media (max-width: 639px) { .hero-rev__nav { display: none; } .hero-rev { border-radius: 12px; } /* On phones, show the WHOLE banner (never crop) with the blurred fill behind. A mobile image at ~16:9 (1080×600) fills edge-to-edge; any other ratio still shows in full. The still swaps to the mobile image when provided. */ } @media (prefers-reduced-motion: reduce) { .hero-rev__track { transition: none; } .hero-rev__brandbg::after { display: none; } }