/* Theme Name: DicePalace UK — independent monobrand review (en-GB) Description: DicePalace UK monobrand. Electric blue on a deep navy ground, taken from the brand's own dice wordmark. Deliberately NOT the gold accent used by the sibling dicepalace-fr land, so the two markets do not render as clones. Shares the fleet's mp- class vocabulary. Version: 1.0.0 */ /* ========================================================================== 1. DESIGN TOKENS — deep navy ground, electric-blue accent ========================================================================== */ :root { --mp-bg: #0a0f1a; --mp-bg-1: #111a2b; --mp-bg-2: #18243a; --mp-bg-3: #22304d; --mp-bg-card: #111a2b; --mp-bg-card-2: #18243a; --mp-ink: #f4f1ea; --mp-ink-2: #dcd6c8; --mp-ink-3: #b4ac99; --mp-ink-mute: #8a8168; --mp-border: rgba(60,191,52,0.16); --mp-border-strong: rgba(60,191,52,0.30); /* Primary — DicePalace electric blue */ --mp-brand: #3cbf34; --mp-brand-deep: #1f8a1a; --mp-brand-light: #cdf2c8; --mp-brand-glow: rgba(60,191,52,0.45); --mp-brand-ink: #04160a; /* Leaf-green (secondary surfaces / positives) */ --mp-leaf: #8ec5ff; --mp-leaf-deep: #3cbf34; --mp-leaf-glow: rgba(60,191,52,0.40); /* Warm red (negatives) */ --mp-red: #f87171; --mp-red-deep: #ef4444; --mp-red-glow: rgba(248,113,113,0.42); /* Gold accent (secondary) */ --mp-amber: #8ec5ff; --mp-amber-glow: rgba(60,191,52,0.40); --mp-sky: #38bdf8; --mp-violet: #a78bfa; --mp-magenta: #ec4899; --mp-pos: #34d399; --mp-neg: #f87171; --mp-warn: #8ec5ff; /* Gradients */ --mp-grad-hero: radial-gradient(ellipse at 92% -10%, rgba(60,191,52,0.30), transparent 55%), radial-gradient(ellipse at 8% 110%, rgba(60,191,52,0.14), transparent 55%), linear-gradient(180deg, #0a0f1a 0%, #111a2b 100%); --mp-grad-cta: linear-gradient(135deg, #3cbf34 0%, #1f8a1a 100%); --mp-grad-leaf: linear-gradient(135deg, #3cbf34, #1f8a1a); --mp-grad-red: linear-gradient(135deg, #f87171, #ef4444); --mp-grad-bleed: radial-gradient(80% 100% at 90% 0%, rgba(60,191,52,0.28), transparent 55%), radial-gradient(80% 100% at 10% 100%, rgba(60,191,52,0.12), transparent 60%), linear-gradient(160deg, #111a2b, #18243a); --mp-grad-card: linear-gradient(180deg, var(--mp-bg-card), var(--mp-bg-card-2)); /* Type */ --mp-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --mp-font-display: 'Outfit', 'Manrope', system-ui, sans-serif; --mp-font-mono: 'Space Mono', ui-monospace, SFMono-Regular, monospace; --mp-font-serif: Georgia, 'Times New Roman', serif; --mp-t-mega: clamp(2.5rem, 6vw + 0.5rem, 4.5rem); --mp-t-display: clamp(2rem, 4.6vw + 0.5rem, 3rem); --mp-t-h1: clamp(1.75rem, 3vw + 0.5rem, 2.25rem); --mp-t-h2: clamp(1.5rem, 2.5vw + 0.5rem, 1.875rem); --mp-t-h3: 1.125rem; --mp-t-body: 1rem; --mp-t-sm: 0.9375rem; --mp-t-xs: 0.75rem; --mp-s-1: 4px; --mp-s-2: 8px; --mp-s-3: 12px; --mp-s-4: 16px; --mp-s-5: 24px; --mp-s-6: 32px; --mp-s-7: 48px; --mp-s-8: 64px; --mp-s-9: 96px; --mp-max-w: 1200px; --mp-radius: 10px; --mp-radius-lg: 16px; --mp-radius-xl: 24px; --mp-radius-pill: 999px; --mp-shadow: 0 4px 24px rgba(0,0,0,0.45); --mp-shadow-lg: 0 12px 48px rgba(0,0,0,0.55); --mp-glow-brand: 0 0 0 1px var(--mp-brand), 0 0 24px var(--mp-brand-glow); --mp-glow-leaf: 0 0 0 1px var(--mp-leaf), 0 0 24px var(--mp-leaf-glow); --mp-glow-red: 0 0 0 1px var(--mp-red), 0 0 24px var(--mp-red-glow); --mp-t-anim: 180ms cubic-bezier(0.4, 0, 0.2, 1); /* ---- Standard aliases (QA gate checks these) ---- */ --bg: #0a0f1a; --surface: #111a2b; --surface2: #18243a; --text: #f4f1ea; --muted: #dcd6c8; --accent: #3cbf34; --accent-deep: #1f8a1a; --accent-light: #cdf2c8; --accent-ink: #cdf2c8; --accent-contrast: #ffffff; --secondary: #8ec5ff; --border: rgba(60,191,52,0.16); --container: 1200px; } /* ========================================================================== 2. BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--mp-bg); color: var(--mp-ink); font-family: var(--mp-font-body); font-size: var(--mp-t-body); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { max-width: 100%; display: block; } button { font: inherit; cursor: pointer; } a { color: var(--mp-brand-light); text-decoration: none; transition: color var(--mp-t-anim); } a:hover { color: var(--mp-brand); } h1, h2, h3, h4 { font-family: var(--mp-font-display); font-weight: 800; letter-spacing: -0.025em; margin: 0; line-height: 1.05; color: var(--mp-ink); } h1 { font-size: var(--mp-t-h1); } h2 { font-size: var(--mp-t-h2); letter-spacing: -0.02em; } h3 { font-size: var(--mp-t-h3); letter-spacing: -0.015em; } p { margin: 0 0 var(--mp-s-4); color: var(--mp-ink-2); } strong { font-weight: 700; color: var(--mp-ink); } .mp-tx-ochre { background: linear-gradient(120deg, #3cbf34, #8ec5ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .mp-tx-leaf { background: linear-gradient(120deg, #3cbf34, #1f8a1a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .mp-tx-red { background: linear-gradient(120deg, #f87171, #ef4444); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ========================================================================== 3. LAYOUT ========================================================================== */ .wrap { max-width: var(--mp-max-w); margin: 0 auto; padding: 0 var(--mp-s-5); } .mp-grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--mp-s-5); } .mp-col-7 { grid-column: span 7; } .mp-col-5 { grid-column: span 5; } .mp-sect { padding: var(--mp-s-8) 0; position: relative; } .mp-sect-tinted{ background: linear-gradient(180deg, var(--mp-bg), var(--mp-bg-1)); } .mp-sect-card { background: var(--mp-bg-1); } .mp-sect-bleed { background: var(--mp-bg); } .mp-sect-h { padding: var(--mp-s-8) 0; position: relative; background: linear-gradient(180deg, var(--mp-bg-1), var(--mp-bg)); } .mp-sect-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--mp-s-5); margin-bottom: var(--mp-s-6); flex-wrap: wrap; } .mp-sect-eyebrow { display: inline-block; font-family: var(--mp-font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; color: var(--mp-brand); background: rgba(60,191,52,0.08); padding: 5px 12px; border-radius: var(--mp-radius-pill); border: 1px solid var(--mp-border-strong); margin-bottom: var(--mp-s-3); } .mp-sect-h2 { font-size: var(--mp-t-display); line-height: 1.12; } .mp-sect-desc { font-size: 1.0625rem; color: var(--mp-ink-2); max-width: 60ch; margin-top: var(--mp-s-3); } .mp-sect-link { font-family: var(--mp-font-mono); font-size: 0.875rem; font-weight: 700; color: var(--mp-brand-light); text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; } /* ========================================================================== 4. OFFER-BAR ========================================================================== */ .mp-offer-bar { background: linear-gradient(90deg, #111a2b, #18243a, #111a2b); border-bottom: 1px solid var(--mp-border-strong); padding: 10px 0; position: relative; z-index: 60; } .mp-offer-bar-inner { display: flex; align-items: center; justify-content: center; gap: var(--mp-s-3); font-size: 0.875rem; color: var(--mp-ink-2); flex-wrap: wrap; } .mp-offer-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mp-font-mono); background: rgba(60,191,52,0.10); color: var(--mp-leaf); border: 1px solid rgba(60,191,52,0.30); padding: 3px 10px; border-radius: var(--mp-radius-pill); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.10em; font-weight: 700; } .mp-offer-link { font-family: var(--mp-font-display); font-weight: 700; color: var(--mp-brand-light); text-decoration: none; } .mp-offer-link:hover { color: var(--mp-brand); } /* ========================================================================== 5. NAV / TOPBAR ========================================================================== */ .mp-topbar { background: rgba(17,9,12,0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--mp-border); padding: var(--mp-s-3) 0; position: sticky; top: 0; z-index: 55; } .mp-topbar nav.wrap { display: flex; align-items: center; gap: var(--mp-s-5); } .mp-brand-line { display: flex; align-items: center; gap: var(--mp-s-3); text-decoration: none; color: var(--mp-ink); margin-right: auto; } .mp-brand-line img { width: 32px; height: 32px; filter: drop-shadow(0 4px 10px var(--mp-brand-glow)); } .mp-brand-line .mp-brand-name { font-family: var(--mp-font-display); font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.015em; color: var(--mp-ink); } .mp-nav-links { display: flex; gap: var(--mp-s-5); } .mp-nav-links a { font-family: var(--mp-font-mono); font-size: 0.8125rem; font-weight: 600; text-decoration: none; color: var(--mp-ink-2); position: relative; padding: 4px 0; text-transform: uppercase; letter-spacing: 0.06em; } .mp-nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: linear-gradient(90deg, var(--mp-brand), var(--mp-leaf)); transform: scaleX(0); transform-origin: left; transition: transform var(--mp-t-anim); } .mp-nav-links a:hover { color: var(--mp-ink); } .mp-nav-links a:hover::after { transform: scaleX(1); } .mp-nav-cta { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 8px 16px; border-radius: 8px; background: var(--mp-grad-cta); color: var(--mp-brand-ink); text-decoration: none; font-family: var(--mp-font-display); font-weight: 700; font-size: 0.8125rem; letter-spacing: -0.005em; box-shadow: 0 6px 18px -6px var(--mp-brand-glow), 0 0 0 1px rgba(60,191,52,0.30) inset; transition: all var(--mp-t-anim); white-space: nowrap; } .mp-nav-cta:hover { color: var(--mp-brand-ink); transform: translateY(-1px); box-shadow: 0 12px 28px -6px var(--mp-brand-glow), 0 0 0 1px rgba(60,191,52,0.50) inset, 0 0 24px var(--mp-brand-glow); } .mp-nav-cta .mp-cta-arrow { font-size: 0.95em; opacity: 0.85; } .mp-nav-cta .mp-cta-label-short { display: none; } /* CSS-only hamburger (checkbox hack) */ .mp-nav-toggle { display: none; } .mp-burger { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 8px; background: rgba(60,191,52,0.06); border: 1px solid var(--mp-border-strong); cursor: pointer; flex: 0 0 auto; } .mp-burger span { display: block; width: 20px; height: 2px; background: var(--mp-ink); position: relative; } .mp-burger span::before, .mp-burger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--mp-ink); } .mp-burger span::before { top: -6px; } .mp-burger span::after { top: 6px; } @media (max-width: 640px) { .mp-nav-cta { padding: 7px 12px; font-size: 0.75rem; gap: 4px; } .mp-nav-cta .mp-cta-label-long { display: none; } .mp-nav-cta .mp-cta-label-short { display: inline; } } @media (max-width: 860px) { .mp-burger { display: inline-flex; } .mp-nav-links { order: 4; flex-basis: 100%; flex-direction: column; gap: var(--mp-s-2); max-height: 0; overflow: hidden; transition: max-height var(--mp-t-anim); } .mp-nav-toggle:checked ~ .mp-nav-links { max-height: 420px; margin-top: var(--mp-s-3); } } /* ========================================================================== 5b. 3-TIER HEADER (mp-head3): banner + centered emblem + nav row ========================================================================== */ /* Vipsta premium fixed header: aurora banner + glass violet emblem + sticky gold-hairline nav */ .mp-head3 { position: static; padding: 0; background: var(--mp-bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--mp-border); } .mp-head3-banner { position: relative; overflow: hidden; height: 152px; display: flex; align-items: center; justify-content: center; background: radial-gradient(130% 175% at 12% -35%, rgba(60,191,52,0.55), transparent 60%), radial-gradient(130% 175% at 88% -25%, rgba(90,63,214,0.50), transparent 62%), radial-gradient(95% 150% at 50% 150%, rgba(60,191,52,0.16), transparent 60%), linear-gradient(180deg, #191540 0%, #0a0f1a 100%); } .mp-head3-stripes { position: absolute; inset: 0; z-index: 0; background: conic-gradient(from 205deg at 28% -10%, rgba(60,191,52,0) 0deg, rgba(140,110,255,0.34) 70deg, rgba(188,172,255,0) 150deg), conic-gradient(from 20deg at 82% -10%, rgba(90,63,214,0) 0deg, rgba(60,191,52,0.30) 60deg, rgba(90,63,214,0) 140deg), repeating-linear-gradient(118deg, rgba(60,191,52,0.05) 0 2px, transparent 2px 30px); opacity: 0.95; mix-blend-mode: screen; } .mp-head3-stripes::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(188,172,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(188,172,255,0.06) 1px, transparent 1px); background-size: 44px 44px; mask: radial-gradient(circle at 50% -12%, black, transparent 74%); -webkit-mask: radial-gradient(circle at 50% -12%, black, transparent 74%); } .mp-head3-veil { position: absolute; inset: 0; z-index: 1; background: radial-gradient(140% 105% at 50% 42%, rgba(12,10,28,0.04), rgba(12,10,28,0.58) 78%), linear-gradient(180deg, rgba(12,10,28,0.08) 0%, rgba(12,10,28,0.42) 100%); } .mp-head3-emblem { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 16px; padding: 14px 30px; text-decoration: none; background: linear-gradient(180deg, rgba(30,24,68,0.82), rgba(12,10,28,0.84)); border: 1px solid rgba(60,191,52,0.55); border-radius: 18px; box-shadow: 0 16px 42px -14px rgba(0,0,0,0.80), 0 0 0 4px rgba(12,10,28,0.30), 0 0 34px rgba(60,191,52,0.34), inset 0 1px 0 rgba(188,172,255,0.18); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: transform var(--mp-t-anim), box-shadow var(--mp-t-anim); } .mp-head3-emblem:hover { transform: translateY(-1px); box-shadow: 0 20px 50px -14px rgba(0,0,0,0.85), 0 0 0 4px rgba(12,10,28,0.30), 0 0 44px rgba(60,191,52,0.48), inset 0 1px 0 rgba(188,172,255,0.22); } .mp-head3-emblem img { width: auto; height: 46px; filter: drop-shadow(0 4px 14px rgba(60,191,52,0.50)); } .mp-head3-emblem-tag { font-family: var(--mp-font-mono); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--mp-amber); padding-left: 16px; border-left: 1px solid rgba(60,191,52,0.35); line-height: 1.35; } .mp-head3-nav { background: rgba(12,10,28,0.92); border-top: 1px solid rgba(60,191,52,0.20); border-bottom: 1px solid var(--mp-border); position: sticky; top: 0; z-index: 55; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 28px -14px rgba(0,0,0,0.72); } .mp-head3-nav-inner { position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px; padding: 11px 0; } .mp-head3 .mp-nav-links { flex: 1 1 auto; justify-content: center; flex-wrap: wrap; gap: 6px 18px; } .mp-head3 .mp-nav-links a { font-size: 0.78rem; letter-spacing: 0.06em; } .mp-head3 .mp-nav-cta { position: static; transform: none; flex: 0 0 auto; } @media (max-width: 860px) { .mp-head3-banner { height: 116px; } .mp-head3-emblem { padding: 10px 20px; gap: 12px; } .mp-head3-emblem img { height: 34px; } .mp-head3-emblem-tag { font-size: 0.55rem; letter-spacing: 0.18em; padding-left: 12px; } /* burger + CTA share row 1; menu collapses to row 2 */ .mp-head3-nav-inner { justify-content: space-between; gap: 8px; } .mp-head3 .mp-burger { order: 1; } .mp-head3 .mp-nav-cta { order: 2; flex: 1 1 0; min-width: 0; justify-content: center; } .mp-head3 .mp-nav-links { order: 3; flex-basis: 100%; width: 100%; justify-content: flex-start; } } @media (max-width: 460px) { .mp-head3-emblem-tag { display: none; } } /* ========================================================================== 6. TICKER STRIP ========================================================================== */ .mp-ticker { background: var(--mp-bg-1); border-bottom: 1px solid var(--mp-border); padding: 10px 0; overflow: hidden; position: relative; } .mp-ticker::before, .mp-ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; } .mp-ticker::before { left: 0; background: linear-gradient(90deg, var(--mp-bg-1), transparent); } .mp-ticker::after { right: 0; background: linear-gradient(-90deg, var(--mp-bg-1), transparent); } .mp-ticker-track { display: inline-flex; gap: var(--mp-s-3); white-space: nowrap; animation: mp-ticker-scroll 38s linear infinite; } .mp-ticker-chip { display: inline-flex; align-items: center; gap: var(--mp-s-2); font-family: var(--mp-font-mono); font-size: 0.75rem; font-weight: 600; color: var(--mp-ink-2); background: rgba(60,191,52,0.05); border: 1px solid var(--mp-border); border-radius: var(--mp-radius-pill); padding: 5px 12px; text-transform: uppercase; letter-spacing: 0.06em; } .mp-ticker-chip strong { color: var(--mp-brand-light); font-weight: 700; } .mp-ticker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mp-leaf); box-shadow: 0 0 8px var(--mp-leaf-glow); } @keyframes mp-ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ========================================================================== 7. HERO ========================================================================== */ .mp-hero { padding: var(--mp-s-9) 0 var(--mp-s-8); position: relative; background: var(--mp-grad-hero); overflow: hidden; } .mp-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(60,191,52,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(60,191,52,0.04) 1px, transparent 1px); background-size: 48px 48px; mask: radial-gradient(circle at 70% 0%, black, transparent 70%); pointer-events: none; } .mp-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--mp-s-7); align-items: start; } .mp-hero-eyebrow { display: inline-block; font-family: var(--mp-font-mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--mp-leaf); background: rgba(60,191,52,0.08); padding: 5px 14px; border-radius: var(--mp-radius-pill); border: 1px solid rgba(60,191,52,0.30); margin-bottom: var(--mp-s-4); } .mp-mega-h1 { font-family: var(--mp-font-display); font-weight: 800; font-size: var(--mp-t-mega); line-height: 1.08; letter-spacing: -0.035em; margin: 0 0 var(--mp-s-4); color: var(--mp-ink); } .mp-mega-h1 span { text-shadow: 0 0 50px var(--mp-brand-glow); } .mp-hero-lede { font-size: 1.125rem; color: var(--mp-ink-2); max-width: 34em; margin-bottom: var(--mp-s-6); line-height: 1.55; } .mp-hero-ctas { display: flex; gap: var(--mp-s-3); flex-wrap: wrap; margin-bottom: var(--mp-s-7); } .mp-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mp-s-3); margin-top: var(--mp-s-6); } .mp-hero-stat { display: flex; flex-direction: column; gap: var(--mp-s-1); padding: var(--mp-s-3) var(--mp-s-4); background: var(--mp-bg-card); border: 1px solid var(--mp-border); border-radius: var(--mp-radius); } .mp-hero-stat-num { font-family: var(--mp-font-display); font-size: 1.625rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--mp-brand-light); text-shadow: 0 0 24px var(--mp-brand-glow); } .mp-hero-stat-num.mp-leaf-tx { color: var(--mp-leaf); text-shadow: 0 0 24px var(--mp-leaf-glow); } .mp-hero-stat-num.mp-red-tx { color: var(--mp-red); text-shadow: 0 0 24px var(--mp-red-glow); } .mp-hero-stat-num.mp-num-sm { font-size: 1.125rem; } .mp-hero-stat-label { font-family: var(--mp-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--mp-ink-3); } .mp-data-panel { background: var(--mp-grad-card); border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius-xl); padding: var(--mp-s-5); position: relative; overflow: hidden; box-shadow: 0 0 0 1px rgba(60,191,52,0.15), 0 30px 80px -20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(60,191,52,0.10); } .mp-panel-label { font-family: var(--mp-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--mp-brand); margin-bottom: var(--mp-s-3); display: flex; align-items: center; gap: var(--mp-s-2); } .mp-panel-label::before { content: ""; width: 18px; height: 2px; background: var(--mp-brand); display: inline-block; border-radius: 2px; box-shadow: 0 0 8px var(--mp-brand-glow); } .mp-panel-source { font-size: 0.75rem; color: var(--mp-ink-3); margin-top: var(--mp-s-3); font-family: var(--mp-font-mono); } .mp-sparkline { width: 100%; height: 110px; display: block; filter: drop-shadow(0 0 12px var(--mp-brand-glow)); } .mp-panel-rows { display: flex; flex-direction: column; gap: var(--mp-s-3); margin-top: var(--mp-s-4); } .mp-panel-row { display: flex; align-items: center; justify-content: space-between; gap: var(--mp-s-3); padding: var(--mp-s-3) var(--mp-s-4); background: rgba(60,191,52,0.04); border: 1px solid var(--mp-border); border-radius: var(--mp-radius); } .mp-panel-row-k { font-family: var(--mp-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mp-ink-3); } .mp-panel-row-v { font-family: var(--mp-font-display); font-weight: 800; color: var(--mp-brand-light); font-size: 1.0625rem; } /* ========================================================================== 8. BUTTONS ========================================================================== */ .mp-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 13px 24px; border-radius: var(--mp-radius); text-decoration: none; font-family: var(--mp-font-display); font-weight: 700; font-size: 0.9375rem; border: 1px solid transparent; cursor: pointer; line-height: 1.2; transition: transform var(--mp-t-anim), box-shadow var(--mp-t-anim); white-space: nowrap; letter-spacing: -0.005em; } .mp-btn-lg { padding: 15px 28px; font-size: 1rem; } .mp-btn-xl { padding: 17px 32px; font-size: 1.0625rem; } .mp-btn:hover { transform: translateY(-2px); } .mp-btn-primary { background: var(--mp-grad-cta); color: var(--mp-brand-ink); box-shadow: 0 12px 32px -10px var(--mp-brand-glow), 0 0 0 1px rgba(60,191,52,0.40) inset; } .mp-btn-primary:hover { color: var(--mp-brand-ink); box-shadow: 0 18px 44px -12px var(--mp-brand-glow), 0 0 0 1px rgba(60,191,52,0.50) inset; } .mp-btn-ghost { background: rgba(60,191,52,0.04); border-color: var(--mp-border-strong); color: var(--mp-ink); } .mp-btn-ghost:hover { border-color: var(--mp-brand); color: var(--mp-brand-light); background: rgba(60,191,52,0.10); } /* ========================================================================== 9. STAT-STRIP ========================================================================== */ .mp-stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--mp-border-strong); border-radius: var(--mp-radius-lg); overflow: hidden; margin: 0 0 var(--mp-s-8); box-shadow: var(--mp-shadow-lg); } .mp-stat { background: linear-gradient(180deg, var(--mp-bg-card), #111a2b); padding: var(--mp-s-5); display: flex; flex-direction: column; gap: var(--mp-s-2); } .mp-stat-figure { font-family: var(--mp-font-display); font-weight: 800; font-size: clamp(1.625rem, 3vw, 2.375rem); line-height: 1; color: var(--mp-brand-light); text-shadow: 0 0 28px var(--mp-brand-glow); letter-spacing: -0.025em; } .mp-stat-figure-small { font-size: clamp(1.25rem, 2.4vw, 1.625rem); } .mp-stat-figure-leaf { color: var(--mp-leaf); text-shadow: 0 0 24px var(--mp-leaf-glow); } .mp-stat-figure-red { color: var(--mp-red); text-shadow: 0 0 24px var(--mp-red-glow); } .mp-stat-label { font-family: var(--mp-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.10em; color: var(--mp-ink-2); font-weight: 600; } .mp-stat-source { font-family: var(--mp-font-mono); font-size: 0.6875rem; color: var(--mp-ink-3); margin-top: auto; opacity: 0.85; } /* ========================================================================== 10. STEPS ========================================================================== */ .mp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mp-s-4); counter-reset: mp-step; margin: var(--mp-s-6) 0; list-style: none; padding: 0; } .mp-steps > li { list-style: none; } .mp-step { background: var(--mp-grad-card); border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius-lg); padding: var(--mp-s-6); position: relative; counter-increment: mp-step; box-shadow: var(--mp-shadow); transition: transform var(--mp-t-anim); } .mp-step:hover { transform: translateY(-3px); } .mp-step::before { content: counter(mp-step); /* Float, not absolute: the badge must occupy space so the step's own first line wraps around it. The stylesheet used to reserve room with `.mp-step h3 { padding-right }`, which silently did nothing on the steps written as

or bare . */ float: right; margin: 0 0 var(--mp-s-2) var(--mp-s-4); font-family: var(--mp-font-display); font-weight: 800; font-size: 2.5rem; background: linear-gradient(135deg, var(--mp-brand), var(--mp-amber)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: 0.55; line-height: 1; } .mp-step::after { content: ""; display: block; clear: both; } .mp-step h3 { font-family: var(--mp-font-display); font-size: 1.125rem; font-weight: 700; margin: 0 0 var(--mp-s-3); color: var(--mp-ink); } .mp-step p { margin: 0 0 var(--mp-s-3); font-size: var(--mp-t-sm); color: var(--mp-ink-2); } .mp-step-time { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mp-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.10em; font-weight: 700; color: var(--mp-leaf); background: rgba(60,191,52,0.10); padding: 4px 12px; border-radius: var(--mp-radius-pill); border: 1px solid rgba(60,191,52,0.25); } /* ========================================================================== 11. GAME TILES ========================================================================== */ .mp-games { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mp-s-4); } .mp-game { background: var(--mp-bg-card); border: 1px solid var(--mp-border); border-radius: var(--mp-radius-lg); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform var(--mp-t-anim), box-shadow var(--mp-t-anim); } .mp-game:hover { transform: translateY(-3px); box-shadow: var(--mp-shadow-lg); } .mp-game-art { height: 140px; position: relative; display: flex; align-items: center; justify-content: center; font-family: var(--mp-font-display); font-size: 2.5rem; font-weight: 800; color: rgba(12,6,9,0.92); letter-spacing: -0.04em; overflow: hidden; } .mp-game-art::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.20), transparent 50%); pointer-events: none; } .mp-game-art-aviator { background: linear-gradient(135deg, #3cbf34, #8ec5ff); } .mp-game-art-superkick { background: linear-gradient(135deg, #3cbf34, #1f8a1a); } .mp-game-art-madpunch { background: linear-gradient(135deg, #8ec5ff, #3cbf34); } .mp-game-art-spin { background: linear-gradient(135deg, #8ec5ff, #1f8a1a); } .mp-game-art-mcards { background: linear-gradient(135deg, #1f8a1a, #8ec5ff); } .mp-game-art-mines { background: linear-gradient(135deg, #3cbf34, #22304d); } .mp-game-tag { position: absolute; top: 12px; right: 12px; font-family: var(--mp-font-mono); font-size: 0.6875rem; font-weight: 700; background: rgba(17,9,12,0.65); color: var(--mp-ink); padding: 4px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .mp-game-tag-native { color: var(--mp-leaf); border-color: rgba(60,191,52,0.40); } .mp-game-body { padding: var(--mp-s-4) var(--mp-s-5); display: flex; flex-direction: column; gap: var(--mp-s-2); } .mp-game-name { font-family: var(--mp-font-display); font-size: 1.0625rem; font-weight: 700; margin: 0; color: var(--mp-ink); letter-spacing: -0.015em; } .mp-game-meta { display: flex; gap: var(--mp-s-3); align-items: center; font-family: var(--mp-font-mono); font-size: 0.6875rem; color: var(--mp-ink-3); text-transform: uppercase; letter-spacing: 0.06em; } .mp-game-rtp { background: rgba(60,191,52,0.10); color: var(--mp-leaf); border: 1px solid rgba(60,191,52,0.22); padding: 2px 6px; border-radius: 4px; font-weight: 700; } .mp-game-cta { font-family: var(--mp-font-mono); font-size: 0.75rem; font-weight: 700; color: var(--mp-brand-light); text-transform: uppercase; letter-spacing: 0.08em; } /* ========================================================================== 12. PROMO ROW ========================================================================== */ .mp-promo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mp-s-4); } .mp-promo { position: relative; overflow: hidden; background: var(--mp-grad-card); border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius-lg); padding: var(--mp-s-5); display: flex; flex-direction: column; gap: var(--mp-s-3); text-decoration: none; color: inherit; transition: transform var(--mp-t-anim); } .mp-promo:hover { transform: translateY(-3px); border-color: var(--mp-brand); } .mp-promo-leaf { background: radial-gradient(120% 80% at 0% 100%, rgba(60,191,52,0.18), transparent 50%), linear-gradient(180deg, var(--mp-bg-card), var(--mp-bg-card-2)); border-color: rgba(60,191,52,0.30); } .mp-promo-tag { font-family: var(--mp-font-mono); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; color: var(--mp-amber); background: rgba(60,191,52,0.10); border: 1px solid rgba(60,191,52,0.28); padding: 3px 10px; border-radius: var(--mp-radius-pill); align-self: flex-start; } .mp-promo-tag-on { color: var(--mp-leaf); background: rgba(60,191,52,0.08); border-color: rgba(60,191,52,0.28); } .mp-promo-amount { font-family: var(--mp-font-display); font-weight: 800; font-size: 1.875rem; line-height: 1; color: var(--mp-brand-light); text-shadow: 0 0 24px var(--mp-brand-glow); letter-spacing: -0.02em; } .mp-promo-name { font-family: var(--mp-font-display); font-weight: 700; font-size: 1.0625rem; color: var(--mp-ink); margin: 0; } .mp-promo-desc { font-size: 0.875rem; color: var(--mp-ink-2); margin: 0; line-height: 1.5; } .mp-promo-cta { font-family: var(--mp-font-mono); font-size: 0.75rem; font-weight: 700; color: var(--mp-brand-light); text-transform: uppercase; letter-spacing: 0.08em; margin-top: auto; } /* ========================================================================== 13. COMPARE TABLE ========================================================================== */ .mp-cmp { background: var(--mp-grad-card); border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius-lg); overflow: hidden; box-shadow: var(--mp-shadow); } .mp-cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--mp-t-sm); } .mp-cmp-table th, .mp-cmp-table td { padding: var(--mp-s-3) var(--mp-s-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--mp-border); } .mp-cmp-table thead th { font-family: var(--mp-font-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; font-weight: 700; color: var(--mp-ink-3); background: var(--mp-bg-1); border-bottom: 1px solid var(--mp-border-strong); } .mp-cmp-col-us { background: linear-gradient(180deg, rgba(60,191,52,0.10), rgba(60,191,52,0.04)); color: var(--mp-brand-light) !important; border-left: 1px solid var(--mp-border-strong); border-right: 1px solid var(--mp-border-strong); font-weight: 700; } .mp-cmp-table tbody tr:last-child td { border-bottom: 0; } .mp-cmp-table tbody td { color: var(--mp-ink-2); } .mp-cmp-yes { color: var(--mp-leaf); font-weight: 700; } .mp-cmp-no { color: var(--mp-red); font-weight: 700; } .mp-cmp-mid { color: var(--mp-amber); font-weight: 700; } /* ========================================================================== 14. TRUST STRIP ========================================================================== */ .mp-trust-strip { background: linear-gradient(180deg, var(--mp-bg-1), var(--mp-bg)); border-top: 1px solid var(--mp-border); border-bottom: 1px solid var(--mp-border); padding: var(--mp-s-6) 0; } .mp-trust-strip-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mp-s-5); max-width: var(--mp-max-w); margin: 0 auto; padding: 0 var(--mp-s-5); } .mp-trust-item { display: grid; grid-template-columns: 36px 1fr; gap: var(--mp-s-3); align-items: center; } .mp-trust-item-icon { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--mp-brand), var(--mp-brand-deep)); color: var(--mp-brand-ink); display: grid; place-items: center; font-family: var(--mp-font-display); font-weight: 800; font-size: 1.0625rem; box-shadow: 0 0 18px var(--mp-brand-glow); } .mp-trust-item-label { font-family: var(--mp-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.10em; color: var(--mp-ink-3); font-weight: 600; } .mp-trust-item-val { font-family: var(--mp-font-display); font-weight: 700; color: var(--mp-ink); font-size: 0.9375rem; } .mp-trust-strip-score { max-width: var(--mp-max-w); margin: var(--mp-s-5) auto 0; padding: var(--mp-s-5) var(--mp-s-5) 0; display: flex; align-items: center; gap: var(--mp-s-4); flex-wrap: wrap; border-top: 1px solid var(--mp-border); } .mp-trust-strip-score-val { font-family: var(--mp-font-display); font-weight: 800; font-size: 1.875rem; color: var(--mp-brand-light); text-shadow: 0 0 24px var(--mp-brand-glow); line-height: 1; } .mp-trust-strip-score-val small { color: var(--mp-ink-3); font-size: 0.875rem; font-weight: 600; } .mp-trust-strip-score a { color: var(--mp-ink-2); font-family: var(--mp-font-mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; } .mp-trust-strip-score a:hover { color: var(--mp-brand-light); } /* ========================================================================== 15. ARTICLE ========================================================================== */ .mp-article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--mp-s-7); padding: var(--mp-s-8) 0; position: relative; } .mp-prose { max-width: 72ch; color: var(--mp-ink-2); } .mp-prose img { max-width: 100%; height: auto; border-radius: var(--mp-radius); } .mp-prose h1 { color: var(--mp-ink); font-size: clamp(1.875rem, 3.6vw, 2.5rem); margin-bottom: var(--mp-s-4); } .mp-prose h2 { position: relative; padding-top: var(--mp-s-3); color: var(--mp-ink); margin-top: var(--mp-s-8); font-family: var(--mp-font-display); } .mp-prose h2::before { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--mp-brand), var(--mp-leaf)); } .mp-prose h3 { color: var(--mp-ink); margin-top: var(--mp-s-5); font-family: var(--mp-font-display); } .mp-prose p { color: var(--mp-ink-2); } .mp-prose ul, .mp-prose ol { padding-left: 22px; color: var(--mp-ink-2); } .mp-prose li { margin: var(--mp-s-2) 0; } .mp-prose a:not([class*="mp-btn"]) { color: var(--mp-brand-light); border-bottom: 1px solid rgba(60,191,52,0.30); padding-bottom: 1px; } .mp-prose a:not([class*="mp-btn"]):hover { color: var(--mp-brand); border-color: var(--mp-brand); } .mp-prose strong { color: var(--mp-ink); } .mp-prose code { background: rgba(60,191,52,0.10); padding: 1px 6px; border-radius: 4px; font-size: 0.875em; font-family: var(--mp-font-mono); color: var(--mp-leaf); } .mp-prose blockquote { margin: var(--mp-s-5) 0; padding: var(--mp-s-5) var(--mp-s-6); border-left: 4px solid var(--mp-brand); background: linear-gradient(90deg, rgba(60,191,52,0.10), transparent); border-radius: 0 var(--mp-radius-lg) var(--mp-radius-lg) 0; color: var(--mp-ink); font-family: var(--mp-font-serif); font-style: italic; font-size: 1.0625rem; } .mp-prose table { width: 100%; border-collapse: separate; border-spacing: 0; margin: var(--mp-s-5) 0; border-radius: var(--mp-radius-lg); overflow: hidden; background: var(--mp-grad-card); border: 1px solid var(--mp-border-strong); box-shadow: var(--mp-shadow); } .mp-prose thead { background: linear-gradient(180deg, rgba(60,191,52,0.16), rgba(60,191,52,0.06)); } .mp-prose th { font-family: var(--mp-font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mp-ink); font-weight: 700; padding: var(--mp-s-3) var(--mp-s-4); text-align: left; border-bottom: 1px solid var(--mp-border-strong); } .mp-prose td { padding: var(--mp-s-3) var(--mp-s-4); text-align: left; font-size: var(--mp-t-sm); color: var(--mp-ink-2); border-bottom: 1px solid var(--mp-border); vertical-align: top; } .mp-prose tbody tr:last-child td { border-bottom: 0; } .mp-prose tbody tr:nth-child(odd) td { background: rgba(60,191,52,0.02); } .mp-verdict { font-family: var(--mp-font-serif); font-style: italic; font-size: 1.25rem; line-height: 1.5; color: var(--mp-ink); padding: var(--mp-s-6) var(--mp-s-7); background: linear-gradient(90deg, rgba(60,191,52,0.12), transparent); border-left: 4px solid var(--mp-brand); border-radius: 0 var(--mp-radius-lg) var(--mp-radius-lg) 0; margin: var(--mp-s-6) 0; position: relative; } .mp-verdict-byline { font-family: var(--mp-font-mono); font-style: normal; font-size: 0.75rem; color: var(--mp-ink-3); margin-top: var(--mp-s-3); text-transform: uppercase; letter-spacing: 0.08em; } .mp-verdict-byline strong { color: var(--mp-brand-light); } /* Callout box */ .mp-callout { background: linear-gradient(135deg, rgba(60,191,52,0.12), rgba(60,191,52,0.03)), linear-gradient(180deg, var(--mp-bg-card), var(--mp-bg-card-2)); border-left: 4px solid var(--mp-brand); padding: 18px 20px; margin: 1.75rem 0; border-radius: 0 var(--mp-radius-lg) var(--mp-radius-lg) 0; font-size: 0.9375rem; color: var(--mp-ink-2); line-height: 1.6; box-shadow: var(--mp-shadow); } .mp-callout-h { font-family: var(--mp-font-display); font-weight: 800; font-size: 1.0625rem; color: var(--mp-brand-light); margin-bottom: 6px; letter-spacing: -0.015em; } .mp-callout-warn { border-left-color: var(--mp-red); background: linear-gradient(135deg, rgba(248,113,113,0.10), rgba(248,113,113,0.03)), linear-gradient(180deg, var(--mp-bg-card), var(--mp-bg-card-2)); } .mp-callout-warn .mp-callout-h { color: var(--mp-red); } /* Inline article CTA block */ .mp-inline-cta { background: radial-gradient(120% 80% at 100% 0%, rgba(60,191,52,0.22), transparent 55%), linear-gradient(180deg, var(--mp-bg-1), var(--mp-bg)); border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius-lg); padding: 24px; margin: 2rem 0; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; box-shadow: var(--mp-shadow-lg); } .mp-inline-cta-h { font-family: var(--mp-font-display); font-weight: 800; font-size: 1.25rem; color: var(--mp-ink); margin-bottom: 4px; letter-spacing: -0.02em; } .mp-inline-cta-sub { color: var(--mp-ink-2); font-size: 0.9375rem; line-height: 1.5; } @media (max-width: 560px) { .mp-inline-cta { grid-template-columns: 1fr; } } /* ========================================================================== 16. FAQ details ========================================================================== */ /* Кожен

— окрема клікабельна картка */ .mp-faq { background: var(--mp-grad-card); border: 1px solid var(--mp-border-strong); border-radius: 12px; overflow: hidden; box-shadow: var(--mp-shadow); margin-bottom: 12px; transition: border-color var(--mp-t-anim), box-shadow var(--mp-t-anim); } .mp-faq:last-of-type { margin-bottom: 0; } .mp-faq:hover { border-color: rgba(60,191,52,0.35); } .mp-faq[open] { border-color: rgba(60,191,52,0.45); } .mp-faq > summary { padding: 18px 22px; font-family: var(--mp-font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.4; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; list-style: none; color: var(--mp-ink); letter-spacing: -0.01em; transition: color var(--mp-t-anim); } .mp-faq > summary:hover, .mp-faq[open] > summary { color: var(--mp-brand-light); } .mp-faq > summary::-webkit-details-marker { display: none; } .mp-faq > summary::after { content: "+"; flex-shrink: 0; color: var(--mp-brand-light); font-size: 1.5rem; font-weight: 400; line-height: 1; width: 30px; height: 30px; display: inline-grid; place-items: center; background: rgba(60,191,52,0.12); border: 1px solid rgba(60,191,52,0.40); border-radius: 50%; transition: transform var(--mp-t-anim); } .mp-faq[open] > summary::after { transform: rotate(45deg); } /* Guard: if the markup already ships its own toggle icon, don't draw a second one */ .mp-faq > summary:has(.mp-faq-ico)::after { content: none; } .mp-faq > summary .mp-faq-ico { flex-shrink: 0; color: var(--mp-brand-light); font-size: 1.5rem; font-weight: 400; line-height: 1; width: 30px; height: 30px; display: inline-grid; place-items: center; background: rgba(60,191,52,0.12); border: 1px solid rgba(60,191,52,0.40); border-radius: 50%; transition: transform var(--mp-t-anim); } .mp-faq[open] > summary .mp-faq-ico { transform: rotate(45deg); } .mp-faq > div { padding: 4px 22px 18px; color: var(--mp-ink-2); font-size: 0.9375rem; line-height: 1.65; border-top: 1px solid var(--mp-border); padding-top: 14px; } .mp-faq > div p { margin: 0 0 0.75rem; } .mp-faq > div p:last-child { margin-bottom: 0; } /* ========================================================================== 17. SIDEBAR ========================================================================== */ .mp-side { display: flex; flex-direction: column; gap: var(--mp-s-4); position: sticky; top: 88px; align-self: start; } .mp-side-card { background: var(--mp-grad-card); border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius-lg); padding: var(--mp-s-5); box-shadow: var(--mp-shadow); } .mp-side-title { font-family: var(--mp-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mp-brand); font-weight: 700; margin: 0 0 var(--mp-s-3); display: flex; align-items: center; gap: var(--mp-s-2); } .mp-side-title::before { content: ""; width: 14px; height: 2px; background: var(--mp-brand); display: inline-block; } .mp-side-list { list-style: none; padding: 0; margin: 0; font-size: 0.9375rem; } .mp-side-list li { margin: 0.5rem 0; } .mp-side-list a { color: var(--mp-ink-2); text-decoration: none; } .mp-side-list a:hover { color: var(--mp-brand-light); } .mp-side-src { list-style: none; padding: 0; margin: 0; font-size: 0.8125rem; color: var(--mp-ink-3); line-height: 1.6; font-family: var(--mp-font-mono); } /* ========================================================================== 18. BYLINE + AUTHOR CARD ========================================================================== */ .mp-byline { display: flex; align-items: center; gap: var(--mp-s-3); padding: var(--mp-s-4) 0; border-top: 1px solid var(--mp-border); border-bottom: 1px solid var(--mp-border); margin: var(--mp-s-5) 0; } .mp-byline-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--mp-brand), var(--mp-brand-deep)); color: var(--mp-brand-ink); display: grid; place-items: center; font-family: var(--mp-font-display); font-weight: 800; font-size: 1.0625rem; box-shadow: 0 8px 24px -8px var(--mp-leaf-glow); } .mp-byline-meta { font-size: var(--mp-t-sm); color: var(--mp-ink-2); line-height: 1.4; font-family: var(--mp-font-mono); } .mp-byline-name { color: var(--mp-ink); font-weight: 700; } .mp-author-card { background: radial-gradient(120% 80% at 0% 0%, rgba(60,191,52,0.10), transparent 50%), var(--mp-grad-card); border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius-lg); padding: var(--mp-s-5); margin: var(--mp-s-7) 0; display: grid; grid-template-columns: 72px 1fr; gap: var(--mp-s-5); box-shadow: var(--mp-shadow); } .mp-author-card-avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--mp-brand), var(--mp-brand-deep)); color: var(--mp-brand-ink); display: grid; place-items: center; font-family: var(--mp-font-display); font-weight: 800; font-size: 1.625rem; box-shadow: 0 12px 32px -10px var(--mp-leaf-glow); } .mp-author-card-h { font-family: var(--mp-font-display); font-weight: 700; font-size: 1.125rem; margin: 0 0 4px; color: var(--mp-ink); } .mp-author-card-role { font-family: var(--mp-font-mono); font-size: 0.75rem; color: var(--mp-ink-3); text-transform: uppercase; letter-spacing: 0.10em; margin-bottom: var(--mp-s-2); } .mp-author-card-bio { font-size: var(--mp-t-sm); color: var(--mp-ink-2); margin: 0; line-height: 1.6; } /* ========================================================================== 19. FINAL CTA BLOCK ========================================================================== */ .mp-cta-block { position: relative; overflow: hidden; border-radius: var(--mp-radius-xl); padding: var(--mp-s-9) var(--mp-s-6); background: radial-gradient(80% 100% at 50% 0%, rgba(60,191,52,0.30), transparent 55%), radial-gradient(60% 80% at 50% 100%, rgba(60,191,52,0.12), transparent 55%), linear-gradient(180deg, var(--mp-bg-1), var(--mp-bg)); border: 1px solid var(--mp-border-strong); text-align: center; box-shadow: var(--mp-shadow-lg); } .mp-cta-block::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(60,191,52,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(60,191,52,0.05) 1px, transparent 1px); background-size: 32px 32px; mask: radial-gradient(circle at 50% 50%, black, transparent 75%); pointer-events: none; opacity: 0.5; } .mp-cta-block-inner { position: relative; max-width: 720px; margin: 0 auto; } .mp-cta-block-eyebrow { display: inline-block; font-family: var(--mp-font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; color: var(--mp-amber); background: rgba(60,191,52,0.10); padding: 5px 14px; border-radius: var(--mp-radius-pill); border: 1px solid rgba(60,191,52,0.30); margin-bottom: var(--mp-s-4); } .mp-cta-block-h { font-family: var(--mp-font-display); font-size: var(--mp-t-display); font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; color: var(--mp-ink); margin: 0 0 var(--mp-s-4); } .mp-cta-block-sub { font-size: 1.0625rem; color: var(--mp-ink-2); max-width: 56ch; margin: 0 auto var(--mp-s-6); } .mp-cta-block-terms { font-family: var(--mp-font-mono); font-size: 0.6875rem; color: var(--mp-ink-3); margin-top: var(--mp-s-5); letter-spacing: 0.04em; } .mp-cta-block-terms a { color: var(--mp-brand-light); } /* ========================================================================== 20. STICKY BOTTOM CTA (mobile) ========================================================================== */ .mp-bottom-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: linear-gradient(180deg, var(--mp-bg-1), var(--mp-bg)); border-top: 1px solid var(--mp-border-strong); padding: 10px var(--mp-s-4); align-items: center; gap: var(--mp-s-3); box-shadow: 0 -12px 24px rgba(0,0,0,0.5); } .mp-bottom-cta-text { flex: 1; font-size: 0.8125rem; color: var(--mp-ink); } .mp-bottom-cta-text strong { color: var(--mp-brand-light); font-weight: 700; } .mp-bottom-cta a { background: var(--mp-grad-cta); color: var(--mp-brand-ink); font-family: var(--mp-font-display); font-weight: 700; text-decoration: none; padding: 10px 16px; border-radius: var(--mp-radius); font-size: 0.875rem; box-shadow: 0 8px 18px -6px var(--mp-brand-glow); display: inline-flex; align-items: center; justify-content: center; text-align: center; } /* ========================================================================== 21. FOOTER ========================================================================== */ .mp-foot { background: radial-gradient(80% 100% at 100% 0%, rgba(60,191,52,0.10), transparent 60%), radial-gradient(80% 100% at 0% 100%, rgba(60,191,52,0.06), transparent 60%), linear-gradient(180deg, var(--mp-bg-1), var(--mp-bg)); border-top: 1px solid var(--mp-border-strong); padding: var(--mp-s-8) 0 var(--mp-s-5); margin-top: var(--mp-s-9); position: relative; } .mp-foot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--mp-brand), var(--mp-leaf), var(--mp-amber)); } .mp-foot-top { display: grid; grid-template-columns: 2.2fr 1fr 1fr; gap: var(--mp-s-7); } .mp-foot-brand-row { display: flex; align-items: center; gap: var(--mp-s-3); margin-bottom: var(--mp-s-3); } .mp-foot-brand-row img { width: 28px; height: 28px; } .mp-foot-brand-row span { font-family: var(--mp-font-display); font-weight: 800; font-size: 1.0625rem; color: var(--mp-ink); } .mp-foot-col h4 { font-family: var(--mp-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mp-ink-3); margin: 0 0 var(--mp-s-3); font-weight: 700; } .mp-foot-col ul { list-style: none; padding: 0; margin: 0; font-size: var(--mp-t-sm); } .mp-foot-col li { margin: var(--mp-s-2) 0; } .mp-foot-col a { color: var(--mp-ink-2); text-decoration: none; border-bottom: 1px solid transparent; font-family: var(--mp-font-mono); font-size: 0.8125rem; } .mp-foot-col a:hover { color: var(--mp-brand-light); border-color: rgba(60,191,52,0.4); } .mp-foot-disclaimer-box { background: rgba(248,113,113,0.06); border: 1px solid rgba(248,113,113,0.25); border-radius: var(--mp-radius); padding: var(--mp-s-3) var(--mp-s-4); font-size: 0.8125rem; color: var(--mp-ink-2); margin-top: var(--mp-s-4); display: flex; align-items: flex-start; gap: var(--mp-s-3); } .mp-foot-disclaimer-box a { color: var(--mp-leaf); } .mp-foot-age-mark { flex-shrink: 0; font-family: var(--mp-font-display); font-weight: 800; font-size: 1rem; color: var(--mp-red); background: rgba(248,113,113,0.10); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(248,113,113,0.30); text-shadow: 0 0 12px var(--mp-red-glow); } .mp-foot-bottom { margin-top: var(--mp-s-6); padding-top: var(--mp-s-4); border-top: 1px solid var(--mp-border); font-family: var(--mp-font-mono); font-size: 0.75rem; color: var(--mp-ink-3); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--mp-s-3); } /* ========================================================================== 22. SKIP LINK + REDUCED MOTION + RESPONSIVE ========================================================================== */ .mp-skip-link { position: absolute; left: -9999px; } .mp-skip-link:focus { position: fixed !important; left: var(--mp-s-4) !important; top: var(--mp-s-4) !important; z-index: 9999 !important; padding: var(--mp-s-3) var(--mp-s-4) !important; background: var(--mp-brand) !important; color: var(--mp-brand-ink) !important; font-weight: 800 !important; border-radius: var(--mp-radius) !important; box-shadow: var(--mp-shadow-lg) !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .mp-ticker-track { animation: none !important; } } @media (max-width: 980px) { .mp-grid-12 > .mp-col-7, .mp-grid-12 > .mp-col-5 { grid-column: 1 / -1; } .mp-hero { padding: var(--mp-s-7) 0; } .mp-hero-grid { grid-template-columns: 1fr; gap: var(--mp-s-6); } .mp-hero-stats { grid-template-columns: 1fr 1fr; } .mp-stat-strip { grid-template-columns: 1fr 1fr; margin-bottom: var(--mp-s-7); } .mp-steps { grid-template-columns: 1fr; } .mp-games { grid-template-columns: 1fr 1fr; } .mp-promo-grid { grid-template-columns: 1fr 1fr; } .mp-trust-strip-inner { grid-template-columns: 1fr 1fr; } .mp-article-grid { grid-template-columns: 1fr; } .mp-side { position: static; } .mp-foot-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .mp-bottom-cta { display: flex; } body { padding-bottom: 64px; } .mp-offer-bar-inner { font-size: 0.8125rem; } .mp-hero-stats { grid-template-columns: 1fr 1fr; } .mp-stat-strip { grid-template-columns: 1fr 1fr; } .mp-games { grid-template-columns: 1fr; } .mp-promo-grid { grid-template-columns: 1fr; } .mp-trust-strip-inner { grid-template-columns: 1fr; } .mp-cmp-table { font-size: 0.8125rem; } .mp-cmp-table th, .mp-cmp-table td { padding: var(--mp-s-2) var(--mp-s-3); } .mp-cta-block { padding: var(--mp-s-7) var(--mp-s-4); } .mp-foot-top { grid-template-columns: 1fr; } .mp-author-card { grid-template-columns: 56px 1fr; } .mp-author-card-avatar { width: 56px; height: 56px; font-size: 1.375rem; } } /* --- MANDATORY layout-safety & responsive baseline --- */ *{box-sizing:border-box} html,body{max-width:100%;overflow-x:clip} img,svg,video,canvas{max-width:100%;height:auto} h1,h2,h3,h4,p,a,li,td,th{overflow-wrap:break-word} .container,.wrap{width:100%;max-width:var(--container,1200px);margin-inline:auto;padding-inline:clamp(16px,4vw,28px)} main,header,footer,section>.container,.container{position:relative;z-index:1} .btn-cta,.btn-2{min-height:44px;display:inline-flex;align-items:center} .mp-btn,.mp-nav-cta,.mp-bottom-cta a{min-height:44px} .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} @media(max-width:560px){ table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} } input,select,textarea{font-size:16px} .grid-auto{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))} @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* === MOBILE HEADER STANDARD (apply-mobile-header.py) === */ .kb-brand-line,.mp-brand-line{min-width:0} .kb-brand-line img,.mp-brand-line img{flex:0 0 auto} .kb-brand-name,.mp-brand-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media (max-width:860px){ .kb-topbar nav.wrap,.mp-topbar nav.wrap{flex-wrap:wrap;column-gap:12px;row-gap:8px} .kb-brand-line,.mp-brand-line{order:1;flex:1 1 auto;min-width:0;margin-right:0} .kb-brand-name,.mp-brand-name{font-size:0.95rem} .kb-nav-burger,.mp-burger{order:2;flex:0 0 auto;display:inline-flex;margin-left:8px} .kb-nav-cta,.mp-nav-cta{order:3;flex:0 0 100%;width:100%;justify-content:center;margin-top:12px;padding:12px 16px;font-size:0.9375rem} .kb-nav-cta .kb-cta-label-long,.mp-nav-cta .mp-cta-label-long{display:inline} .kb-nav-cta .kb-cta-label-short,.mp-nav-cta .mp-cta-label-short{display:none} .kb-nav-links,.mp-nav-links{order:4} } @media (max-width:400px){ .kb-brand-name,.mp-brand-name{font-size:0.84rem} } /* === CTA button text-color override (apply-btn-color.py) === */ .mp-btn *,.kb-btn *,.mp-nav-cta *,.kb-nav-cta *,.mp-bottom-cta a *,.kb-bottom-cta a *,.nf-links a *{color:inherit!important} .mp-btn a,.kb-btn a,.mp-nav-cta a,.kb-nav-cta a{color:inherit!important} /* --- cta-contrast-guard v1 --- */ a.mp-btn-primary, a.mp-btn-primary:link, a.mp-btn-primary:visited, a.mp-btn-primary:hover, a.mp-btn-primary:focus{color:var(--mp-brand-ink)!important;-webkit-text-fill-color:var(--mp-brand-ink)!important;border-bottom:0!important;text-shadow:none;} a.mp-btn-ghost, a.mp-btn-ghost:link, a.mp-btn-ghost:visited, a.mp-btn-ghost:hover, a.mp-btn-ghost:focus{color:var(--mp-ink)!important;-webkit-text-fill-color:var(--mp-ink)!important;border-bottom:0!important;text-shadow:none;} a.mp-nav-cta, a.mp-nav-cta:link, a.mp-nav-cta:visited, a.mp-nav-cta:hover, a.mp-nav-cta:focus{color:var(--mp-brand-ink)!important;-webkit-text-fill-color:var(--mp-brand-ink)!important;border-bottom:0!important;text-shadow:none;} .kb-btn *,.kb-nav-cta *,.kb-bottom-cta *,.mp-btn *,.mp-nav-cta *,.mp-bottom-cta *{color:inherit!important;-webkit-text-fill-color:inherit!important;} /* ========================================================================== MEDIA & LAYOUT COMPONENTS — paste into every build's theme.css. Codified from the Realz AU build: parallel subagents INVENT layout classes for images/tables/breadcrumbs (mp-logo-row, mp-tile-grid, mp-card-grid, mp-figure, mp-media-grid, mp-table, mp-crumbs, mp-hero-cta-row, mp-pay-row…) that DON'T exist in a cloned theme.css — so those blocks collapse to a single column (block-level /
stack) or render unstyled. Ship these classes up front and the media just works. Prefix note: these use the `mp-` prefix. For a `kb-` theme, s/mp-/kb-/. Depends on the standard token vars (--mp-bg-card, --mp-border, --mp-brand, --mp-ink*, --mp-s-*, --mp-radius*, --mp-shadow*, --mp-t-anim, --mp-font-*). ========================================================================== */ /* --- PROSE WIDTH TRAP ------------------------------------------------------- If .mp-prose has `max-width: 72ch`, ANY grid placed inside it (steps, tiles, logo rows) is squeezed into that ~720px column. Fix: drop the cap on the container, re-apply it to TEXT children only, so grids/tables/media go full width while paragraphs stay readable. */ .mp-prose { max-width: none; } .mp-prose > p, .mp-prose > ul:not(.mp-steps), .mp-prose > ol:not(.mp-steps), .mp-prose > h1, .mp-prose > h2, .mp-prose > h3, .mp-prose > h4, .mp-prose > blockquote { max-width: 72ch; } /* --- Provider / payment logo row (flex, never a column) --- */ .mp-logo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 40px; margin: var(--mp-s-5) 0; } .mp-logo-row img { width: 100%; height: auto; aspect-ratio: 332 / 198; object-fit: cover; border-radius: 12px; border: 1px solid var(--mp-border); opacity: 1; box-shadow: var(--mp-shadow); } .mp-pay-row { display: flex; flex-wrap: wrap; gap: var(--mp-s-3); align-items: center; margin: var(--mp-s-4) 0; } .mp-pay-row img { height: 30px; width: auto; } /* --- Two-up cards (welcome fiat/crypto, compare) --- */ .mp-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--mp-s-4); margin: var(--mp-s-5) 0; list-style: none; padding: 0; } .mp-card { background: var(--mp-grad-card); border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius-lg); padding: var(--mp-s-5); box-shadow: var(--mp-shadow); } .mp-card > h3 { font-family: var(--mp-font-display); font-size: 1.125rem; font-weight: 700; margin: 0 0 var(--mp-s-3); color: var(--mp-ink); } .mp-card ul { padding-left: 20px; margin: var(--mp-s-3) 0 0; color: var(--mp-ink-2); font-size: var(--mp-t-sm); } .mp-card li { margin: var(--mp-s-2) 0; } .mp-card-big { font-family: var(--mp-font-display); font-weight: 800; font-size: 1.25rem; line-height: 1.2; color: var(--mp-brand-light); margin: 0 0 var(--mp-s-2); text-shadow: 0 0 24px var(--mp-brand-glow); letter-spacing: -0.01em; } /* --- Game tiles (pokies, live, crash). ~5 across on desktop, 2 on mobile. minmax 190px reads as premium; 150px looks like a dense afterthought. --- */ /* The upper bound is deliberate. Most game art in the kit is 315px wide, so a `1fr` track let the tiles grow to ~340px on a wide screen and every thumbnail was being upscaled — that is what read as "bad quality". Capping the track below the source width means the browser only ever downscales. justify-content spreads the leftover space instead of stretching the tiles. */ .mp-tile-grid, .mp-pokie-grid, .mp-live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 210px)); justify-content: center; gap: var(--mp-s-4); margin: var(--mp-s-5) 0; } .mp-tile, .mp-pokie-tile { margin: 0; border: 1px solid var(--mp-border); border-radius: var(--mp-radius); overflow: hidden; background: var(--mp-bg-card); text-decoration: none; display: block; transition: transform var(--mp-t-anim), border-color var(--mp-t-anim); } .mp-tile:hover, .mp-pokie-tile:hover { transform: translateY(-3px); border-color: var(--mp-border-strong); } /* This kit's game art is PORTRAIT 320x407 (live tiles 480x611, same ~3/4 ratio) with the game wordmark baked in near the bottom. A landscape aspect-ratio center-crops it and chops that wordmark off, so the tile keeps the art's own portrait ratio. */ .mp-tile img, .mp-pokie-tile img { width: 100%; height: auto; display: block; aspect-ratio: 320 / 407; object-fit: cover; } .mp-live-grid .mp-tile img { aspect-ratio: 320 / 407; } .mp-tile figcaption, .mp-pokie-name { padding: 8px 10px; font-size: 0.8125rem; color: var(--mp-ink-2); font-family: var(--mp-font-mono); text-align: center; } @media (max-width: 560px) { .mp-tile-grid, .mp-pokie-grid, .mp-live-grid { grid-template-columns: repeat(2, 1fr); } } /* --- Promo banner strip: several reload/bonus banners in a row, not stacked --- */ .mp-promo-strip { display: flex; flex-wrap: wrap; gap: var(--mp-s-4); margin: var(--mp-s-5) 0; } .mp-promo-strip img { flex: 1 1 260px; max-width: calc(50% - var(--mp-s-3)); height: auto; margin: 0; border-radius: var(--mp-radius-lg); border: 1px solid var(--mp-border); box-shadow: var(--mp-shadow); } @media (max-width: 560px) { .mp-promo-strip img { max-width: 100%; } } /* --- Lone promo banners in prose: CAP + centre. A raw 730px webp dominates the column and reads as "huge image". Place these LATE in theme.css: `.mp-prose > img` ties specificity with the base `.mp-prose img{max-width:100%}` and only wins if it comes AFTER it in source order. --- */ .mp-prose > img, .mp-prose > p > img, .mp-prose > figure:not([class]) > img { max-width: 460px; width: 100%; height: auto; display: block; margin: var(--mp-s-5) auto; border-radius: var(--mp-radius-lg); border: 1px solid var(--mp-border); box-shadow: var(--mp-shadow); } .mp-figure { margin: var(--mp-s-5) 0; text-align: center; } .mp-figure > img { max-width: 460px; width: 100%; height: auto; margin: 0 auto; border-radius: var(--mp-radius-lg); border: 1px solid var(--mp-border); box-shadow: var(--mp-shadow); } .mp-figure figcaption { font-size: 0.8125rem; color: var(--mp-ink-3); margin-top: 8px; font-family: var(--mp-font-mono); } .mp-media-block { margin: var(--mp-s-5) 0; text-align: center; } .mp-media-block > img { max-width: 520px; width: 100%; height: auto; margin: 0 auto; border-radius: var(--mp-radius-lg); border: 1px solid var(--mp-border); box-shadow: var(--mp-shadow); } .mp-media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--mp-s-4); margin: var(--mp-s-5) 0; } .mp-media-grid .mp-figure { margin: 0; } .mp-media-grid .mp-figure > img { max-width: 100%; } /* --- Tables: subagents emit
and leave them unstyled (no borders/padding). Style + keep them scrollable on mobile so a wide table never forces the whole PAGE into horizontal scroll. --- */ .mp-table-wrap { overflow-x: auto; margin: var(--mp-s-5) 0; -webkit-overflow-scrolling: touch; } .mp-table { width: 100%; border-collapse: collapse; font-size: var(--mp-t-sm); background: var(--mp-bg-card); border: 1px solid var(--mp-border); border-radius: var(--mp-radius); overflow: hidden; } .mp-table th, .mp-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--mp-border); vertical-align: top; } .mp-table thead th { background: rgba(60,191,52,0.09); color: var(--mp-ink); font-family: var(--mp-font-display); font-weight: 700; font-size: 0.8125rem; letter-spacing: -0.01em; } .mp-table td { color: var(--mp-ink-2); } .mp-table tbody tr:last-child td { border-bottom: 0; } .mp-table tbody tr:hover td { background: rgba(255,255,255,0.02); } /* (the th background rgba is the BRAND accent — swap 232,178,74 for your brand rgb) */ /* --- Breadcrumbs: an
    renders as a numbered vertical list until styled. Make it a horizontal flex row with "/" separators. --- */ .mp-breadcrumb { margin: 0 0 var(--mp-s-3); } .mp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; padding: 0; margin: var(--mp-s-3) 0; font-family: var(--mp-font-mono); font-size: 0.75rem; color: var(--mp-ink-3); } .mp-crumbs li { display: flex; align-items: center; gap: 6px; margin: 0; } .mp-crumbs li:not(:last-child)::after { content: "/"; color: var(--mp-ink-mute); } .mp-crumbs a { color: var(--mp-ink-2); text-decoration: none; border: 0; } .mp-crumbs a:hover { color: var(--mp-brand-light); } /* --- Hero copy/media/cta split + misc lists --- */ .mp-hero-cta-row { display: flex; flex-wrap: wrap; gap: var(--mp-s-3); margin: var(--mp-s-5) 0; } .mp-hero-media { margin: 0; } .mp-hero-media > img { width: 100%; height: auto; border-radius: var(--mp-radius-lg); border: 1px solid var(--mp-border-strong); box-shadow: var(--mp-shadow-lg); } .mp-list { padding-left: 20px; color: var(--mp-ink-2); margin: var(--mp-s-4) 0; } .mp-list li { margin: var(--mp-s-2) 0; } /* modifier alias: ordered-list variant of .mp-steps (no extra rules needed) */ .mp-steps-ol { list-style: none; } .mp-tile-cap { padding: 8px 10px; font-size: 0.8125rem; color: var(--mp-ink-2); font-family: var(--mp-font-mono); text-align: center; display: block; } a.mp-tile:hover .mp-tile-cap { color: var(--mp-brand-light); } /* Combined `wrap mp-prose` must keep the page container: `.mp-prose{max-width:none}` frees inner grids from the 72ch text cap, but on an element that is ALSO `.wrap` it removes the page gutter and the section renders edge-to-edge. */ .wrap.mp-prose { max-width: var(--mp-max-w, 1200px); } /* Classes the SPEC references that the base theme doesn't define. */ .mp-cta-block-actions { display: flex; flex-wrap: wrap; gap: var(--mp-s-3); align-items: center; justify-content: center; margin: var(--mp-s-5) 0 var(--mp-s-4); } .mp-toc { background: var(--mp-bg-card); border: 1px solid var(--mp-border); border-left: 3px solid var(--mp-brand); border-radius: var(--mp-radius); padding: var(--mp-s-4) var(--mp-s-5); margin: var(--mp-s-5) 0; font-size: var(--mp-t-sm); } .mp-toc-title { font-family: var(--mp-font-display); font-weight: 700; font-size: 0.8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mp-ink-3); margin: 0 0 var(--mp-s-3); } .mp-toc ol, .mp-toc ul { margin: 0; padding-left: 20px; color: var(--mp-ink-2); } .mp-toc li { margin: var(--mp-s-2) 0; } .mp-toc a { color: var(--mp-ink-2); text-decoration: none; border-bottom: 1px solid transparent; } .mp-toc a:hover { color: var(--mp-brand-light); border-bottom-color: var(--mp-brand-light); } /* FAQ: the accordion CARD is `details.mp-faq`; this wrapper is spacing only. */ .mp-faq-list { margin: var(--mp-s-5) 0; } /* Answers ship as a bare

    far more often than as a wrapping

    — style both, or the answer sits flush against the card edge with no separator. */ .mp-faq > p { padding: 14px 22px 18px; margin: 0; color: var(--mp-ink-2); font-size: 0.9375rem; line-height: 1.65; border-top: 1px solid var(--mp-border); } .mp-faq > p ~ p { border-top: 0; padding-top: 0; } /* Author card: flex, never a fixed grid track. If the avatar is removed from layout by an extension or a content blocker, a `72px 1fr` grid drops the TEXT into the 72px track and the bio wraps a few characters per line. Flex has no slot to fall into. */ .mp-author-card { display: flex; align-items: flex-start; flex-wrap: wrap; } .mp-author-card-avatar { flex: 0 0 72px; } .mp-author-card > :not(.mp-author-card-avatar) { flex: 1 1 260px; min-width: 0; } @media (max-width: 640px) { .mp-author-card-avatar { flex-basis: 56px; } } /* The kit's promo images are 144x144 / 100x100 despite `500x500` filenames. Cap them so a page can never stretch a thumbnail into a blurry banner. */ /* `.mp-prose > img` (0,1,1) outranks a bare `.mp-promo-thumb` (0,1,0) no matter where it sits in the file, so the 160px cap silently lost to that rule's 460px and thumbnails rendered ~4x their real size, badly blurred. Match the container's specificity. */ .mp-promo-thumb, .mp-prose > .mp-promo-thumb, .mp-prose > p > .mp-promo-thumb, .mp-figure > .mp-promo-thumb { max-width: 160px; width: auto; height: auto; border-radius: var(--mp-radius); box-shadow: none; } /* --- Newly commissioned artwork (2026-07-20) ------------------------------- Two new shapes, both downscaled INTO their box so they stay sharp — the opposite of the thumbnails they replace, which were upscaled 4x and mushy. */ /* 3:1 band introducing a themed slot section. Full container width. */ .mp-theme-band, .mp-prose > .mp-theme-band, .mp-prose > p > .mp-theme-band, .mp-figure > .mp-theme-band { display: block; width: 100%; max-width: none; height: auto; margin: var(--mp-s-5) 0 var(--mp-s-4); border-radius: var(--mp-radius-lg); border: 1px solid var(--mp-border); box-shadow: var(--mp-shadow); } /* 4:3 section illustration. Capped and centred — `.mp-prose > img` (0,1,1) would otherwise win with its 460px, so match that specificity here too. */ .mp-section-art, .mp-prose > .mp-section-art, .mp-prose > p > .mp-section-art, .mp-figure > .mp-section-art { display: block; max-width: 420px; width: 100%; height: auto; margin: var(--mp-s-5) auto; border-radius: var(--mp-radius-lg); border: 1px solid var(--mp-border); box-shadow: var(--mp-shadow); } @media (max-width: 560px) { .mp-theme-band { border-radius: var(--mp-radius); margin: var(--mp-s-4) 0 var(--mp-s-3); } } /* Sierra chrome uses the base checkbox-hack nav (input.mp-nav-toggle + label.mp-burger). The base rules above already hide the checkbox everywhere, hide the burger on desktop, and toggle the nav via :checked ~ .mp-nav-links on <=860px — no extra overrides needed. */ /* This land's footer has four blocks (brand + three link columns); the base grid declares three tracks, so the fourth wrapped onto its own row. */ .mp-foot-top { grid-template-columns: 2.2fr 1fr 1fr 1fr; } @media (max-width: 900px) { .mp-foot-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .mp-foot-top { grid-template-columns: 1fr; } } /* The theme's emblem slot is built for a SQUARE badge (52x52) sitting next to a text lockup. emberBet ships a horizontal wordmark at 171x44, which that rule squashes into a square. The wordmark already carries the brand name, so let it keep its aspect and drop the separate text block rather than distorting the client's logo. */ .mp-foot .mp-brand-line img { width: auto; height: 30px; } /* --- provider logo strip ------------------------------------------------- Twelve logos in a flex-wrap row broke as 11 + 1. A six-track grid gives 6 + 6. `auto-fit` is deliberately NOT used: on the one page with only two logos it would stretch each into a half-width track. Fixed tracks keep every logo the same size. */ .mp-logo-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 132px)); justify-content: center; justify-items: stretch; align-items: center; gap: 12px 14px; } @media (max-width: 560px) { .mp-logo-row { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 380px) { .mp-logo-row { grid-template-columns: repeat(2, 1fr); } } /* --- inline CTA ---------------------------------------------------------- The rule is `1fr auto`, which assumes two children: text block + button. Some pages emit heading, subtext and button as three flat children, which put the button in column 1 row 2. Pin the text to column 1 and let the button own column 2 outright. */ .mp-inline-cta > .mp-inline-cta-h, .mp-inline-cta > .mp-inline-cta-sub { grid-column: 1; } .mp-inline-cta > .mp-btn { grid-column: 2; grid-row: 1 / -1; align-self: center; justify-self: end; } @media (max-width: 560px) { .mp-inline-cta > .mp-inline-cta-h, .mp-inline-cta > .mp-inline-cta-sub, .mp-inline-cta > .mp-btn { grid-column: 1; grid-row: auto; justify-self: stretch; } } /* token utility classes — subagents occasionally use design-token names as classes; define them so such usage renders sensibly instead of unstyled. Low specificity. */ .mp-t-mega{font-size:var(--mp-t-mega)}.mp-t-display{font-size:var(--mp-t-display)} .mp-t-h1{font-size:var(--mp-t-h1)}.mp-t-h2{font-size:var(--mp-t-h2)}.mp-t-h3{font-size:var(--mp-t-h3)} .mp-t-body{font-size:var(--mp-t-body)}.mp-t-sm{font-size:var(--mp-t-sm)}.mp-t-xs{font-size:var(--mp-t-xs)} .mp-ink{color:var(--mp-ink)}.mp-ink-2{color:var(--mp-ink-2)}.mp-ink-3{color:var(--mp-ink-3)}.mp-ink-mute{color:var(--mp-ink-mute)} /* stray content classes a couple of CA subagents used — define sensibly (low specificity) */ .mp-lead{font-size:var(--mp-t-body);color:var(--mp-ink-2);line-height:1.65} .mp-fineprint{font-size:var(--mp-t-xs);color:var(--mp-ink-mute);line-height:1.55} .mp-hero-body{display:block} /* --- classes a few subagents invented; define sensibly (low specificity) --- */ .mp-figure-cap { font-family: var(--mp-font-mono); font-size: 0.8125rem; color: var(--mp-ink-3); text-align: center; margin-top: 8px; } .mp-note { background: var(--mp-bg-card); border: 1px solid var(--mp-border); border-left: 3px solid var(--mp-brand); border-radius: var(--mp-radius); padding: var(--mp-s-3) var(--mp-s-4); margin: var(--mp-s-4) 0; font-size: var(--mp-t-sm); color: var(--mp-ink-2); } .mp-side-age { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.30); color: var(--mp-red); font-family: var(--mp-font-display); font-weight: 800; font-size: 0.8125rem; vertical-align: middle; margin-right: 6px; } .mp-side-note { font-size: 0.8125rem; color: var(--mp-ink-3); line-height: 1.5; } .mp-verdict-score { font-family: var(--mp-font-display); font-weight: 800; font-size: clamp(2rem, 5vw, 3rem); line-height: 1; color: var(--mp-brand-light); text-shadow: 0 0 24px var(--mp-brand-glow); letter-spacing: -0.02em; } .mp-verdict-score small { font-size: 0.4em; color: var(--mp-ink-3); font-weight: 600; } /* ── Nikaspin promo-code chip (header) ─────────────────────────── */ .mp-promo-chip{display:inline-flex;flex-direction:column;gap:2px;margin-left:auto;align-items:flex-end} .mp-promo-label{font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mp-ink-3)} .mp-promo-code{display:inline-flex;align-items:center;gap:.5rem;font:700 .9rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--mp-brand-light);background:rgba(60,191,52,.10);border:1px dashed var(--mp-border-strong); border-radius:8px;padding:.4rem .6rem;cursor:pointer;transition:background .15s} .mp-promo-code:hover{background:rgba(60,191,52,.18)} .mp-promo-copy{font:600 .6rem/1 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--mp-ink-3)} @media(max-width:560px){.mp-promo-chip{display:none}} /* ── Nikaspin corrective overrides (2026-07-24) ─────────────────────────── Provider "logo-row" holds TEXT spans (no logo images) → render as centred pills instead of the image grid. Sidebar "at a glance" card → vertical stack so the CTA and the 21+ line don't collide. */ .mp-logo-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 12px;font-size:0} .mp-logo-row>span{font-size:.875rem;font-weight:600;color:var(--mp-ink-2);background:var(--mp-bg-2); border:1px solid var(--mp-border);border-radius:999px;padding:.42rem .95rem;line-height:1;white-space:nowrap} .mp-side-card{display:flex;flex-direction:column;align-items:stretch;gap:.75rem} .mp-side-card .mp-verdict-score{text-align:center} .mp-side-card .mp-btn{width:100%;justify-content:center} .mp-side-age{display:block;width:auto;height:auto;border-radius:0;background:none;border:0; place-items:initial;text-align:center;color:var(--mp-ink-3);font-family:inherit;font-weight:600; font-size:.8rem;letter-spacing:0;margin:0} /* Header banner: cluster emblem + promo chip centred (chip had margin-left:auto which left a big empty gap on wide screens) and tighten the height. */ .mp-head3-banner{height:110px;gap:clamp(14px,3vw,40px)} .mp-promo-chip{margin-left:0} @media(max-width:860px){.mp-head3-banner{height:94px}} /* Cap tall figure images (portrait infographics render ~690px otherwise). */ .mp-figure img, .mp-media-block img, .mp-media img, .mp-media-grid img{max-height:360px;object-fit:cover;object-position:center} /* ===== SlotsGem SE additions ===== */ /* Provider logos are opaque with mixed baked-in backgrounds. Each img's chip background is set INLINE to that logo's own corner colour (see _logo_bg.json) -> seamless, every logomark readable. This rule only sets size/shape/elevation; no background here so the inline style wins. */ /* Provider & payment logos are DARK marks on transparent bg -> uniform light chip so they read on the dark theme. */ .mp-logo-row img,.mp-pay-row img{height:44px!important;width:auto!important;background:#f4f1ea!important;border-radius:10px;padding:8px 14px;object-fit:contain;box-shadow:0 1px 3px rgba(0,0,0,.35)} .mp-rg .mp-nav-cta,.mp-rg .mp-linkbar,.mp-rg .mp-bottom-cta,.mp-rg .mp-linkwidget{display:none!important} .mp-linkwidget{display:flex;flex-direction:column;gap:4px;align-items:flex-end} .mp-linkwidget .mp-promo-label{font-size:.72rem;color:var(--mp-brand-light);opacity:.9} .mp-linkwidget .mp-promo-code{display:inline-flex;gap:6px;align-items:center;background:var(--mp-brand);color:#04160a;font-weight:800;padding:7px 14px;border-radius:10px;text-decoration:none;font-size:.9rem} .mp-linkwidget .mp-promo-code:hover{filter:brightness(1.06)} /* ========================================================================== DicePalace UK additions — classes the shared vocabulary uses but this inherited theme never defined (the sibling FR land laid its pros/cons out by hand inside the body markup, which is exactly the drift the normaliser is meant to prevent). ========================================================================== */ .mp-pros, .mp-cons { list-style: none; margin: var(--mp-s-4) 0; padding: var(--mp-s-5); border-radius: var(--mp-radius-lg); border: 1px solid var(--mp-border-strong); background: var(--mp-grad-card); } .mp-pros > li, .mp-cons > li { position: relative; padding-left: 30px; margin: 10px 0; color: var(--mp-ink-2); } .mp-pros > li::before, .mp-cons > li::before { position: absolute; left: 0; top: 0; font-weight: 800; font-size: 1.05rem; line-height: 1.5; } .mp-pros > li::before { content: "+"; color: var(--mp-pos, #4ade80); } .mp-cons > li::before { content: "\2212"; color: var(--mp-neg, #f87171); } @media (min-width: 820px) { .mp-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mp-s-4); } .mp-proscons .mp-pros, .mp-proscons .mp-cons { margin: 0; } } /* cookie banner — sits clear of the sticky bottom CTA on phones */ .mp-cookie { position: fixed; left: 12px; right: 12px; bottom: calc(64px + 0.75rem); z-index: 95; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--mp-radius-lg); background: var(--mp-bg-1); border: 1px solid var(--mp-border-strong); box-shadow: var(--mp-shadow-lg); font-size: 0.875rem; color: var(--mp-ink-2); } .mp-cookie[hidden] { display: none; } .mp-cookie p { margin: 0; flex: 1 1 260px; } .mp-cookie-btns { display: flex; gap: 8px; } .mp-cookie button { border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius-pill); padding: 8px 18px; font: inherit; font-weight: 700; cursor: pointer; } .mp-ck-yes { background: var(--mp-brand); color: var(--mp-brand-ink); border-color: var(--mp-brand); } .mp-ck-no { background: transparent; color: var(--mp-ink-2); } @media (min-width: 820px) { .mp-cookie { left: auto; right: 20px; bottom: 20px; max-width: 520px; } } /* RG / legal / author pages never sell */ .mp-rg .mp-nav-cta, .mp-rg .mp-linkwidget, .mp-rg .mp-bottom-cta { display: none !important; } /* `.mp-grid` is in the builders' vocabulary but this inherited theme only ever defined `.mp-card-grid`, so every `.mp-grid` of cards stacked flush with no gap. Same rule. */ .mp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--mp-s-4); margin: var(--mp-s-5) 0; list-style: none; padding: 0; } /* `.mp-cta-line` was never defined, so the button inherited the 72ch text column and sat far left while the figure above it centred across the full section width. Same width as the media it follows, centred. Needs `p.` to outrank `.mp-prose > p { max-width: 72ch }`. */ .mp-prose > p.mp-cta-line { max-width: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; text-align: center; margin: var(--mp-s-5) 0; } /* Cookie banner on phones: 146px tall directly above the sticky bottom CTA, so it covered the thing the page exists for. Move it to the top edge and make it compact. */ @media (max-width: 819px) { .mp-cookie { top: 10px; bottom: auto; padding: 10px 12px; gap: 8px; font-size: 0.8125rem; line-height: 1.35; } .mp-cookie p { flex: 1 1 100%; } .mp-cookie-btns { flex: 1 1 auto; justify-content: flex-end; } .mp-cookie button { padding: 6px 14px; } } /* FIX: decorative banner overlays must not eat clicks on the link-widget button */ .mp-head3-stripes,.mp-head3-veil{pointer-events:none} .mp-promo-chip,.mp-linkwidget{position:relative;z-index:2} /* --------------------------------------------------------------------------------------------- Brazino777 BO overrides — appended last so they win the cascade. --------------------------------------------------------------------------------------------- */ /* This kit's "game art" is not cover art at all — it is transparent PNG WORDMARKS (640x640, 598x364, 200x269). The base `.mp-tile img` rule is `aspect-ratio: 320/407; object-fit: cover`, which would crop a logo to a portrait slice and cut the title in half. Contain it on a square card instead, with breathing room so the mark is not flush to the border. */ .mp-tile-grid--logo .mp-tile img { aspect-ratio: 1 / 1; object-fit: contain; padding: 14px; background: radial-gradient(circle at 50% 40%, rgba(60,191,52,0.10), transparent 70%); } .mp-tile-grid--logo { grid-template-columns: repeat(auto-fill, minmax(150px, 190px)); } @media (max-width: 560px) { .mp-tile-grid--logo { grid-template-columns: repeat(2, 1fr); } } /* Section illustrations and the operator's 1000x333 hero banner are wide artwork, not photos — the sitewide `max-height:360px; object-fit:cover` clamp would crop them. */ .mp-figure > img.mp-theme-band { max-height: none; object-fit: fill; } /* Payment marks: AstroPay and the bank-transfer glyph are dark-on-transparent and vanish on a dark theme, so the whole row keeps the light chip. The theme already sets one — this only pins the height so a 400x400 viewBox does not render as a 44px-tall square with huge padding. */ .mp-pay-row img { height: 34px !important; padding: 7px 14px !important; } /* Version switcher (/es-bo <-> /) — required in the header on both versions. */ .mp-verswitch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--mp-border); border-radius: 999px; background: var(--mp-bg-2); } .mp-verswitch a { padding: 4px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; font-family: var(--mp-font-mono); color: var(--mp-ink-3); text-decoration: none; } .mp-verswitch a[aria-current="true"] { background: var(--mp-brand); color: var(--mp-brand-ink); } .mp-verswitch a:hover { color: var(--mp-brand-light); } .mp-verswitch a[aria-current="true"]:hover { color: var(--mp-brand-ink); } /* Reader quotes in #trust. Marked as opiniones, never aggregated into a rating. */ .mp-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--mp-s-4); margin: var(--mp-s-5) 0; } .mp-quote { margin: 0; padding: var(--mp-s-4); border: 1px solid var(--mp-border); border-left: 3px solid var(--mp-brand); border-radius: var(--mp-radius); background: var(--mp-bg-card); font-size: 0.9375rem; color: var(--mp-ink-2); } .mp-quote figcaption { margin-top: 10px; font-family: var(--mp-font-mono); font-size: 0.75rem; color: var(--mp-ink-3); }