/* ════════════════════════════════════════════════════════════════════════════
GAMTING B2B — Master Frontend Theme
════════════════════════════════════════════════════════════════════════════
Premium fintech × iGaming aesthetic. Single source of truth deployed to all
5 B2B sites (gamting.com, casino, exchange, sportsbook1, trade).
Scoped under `body.gp-b2b-theme` so it cannot leak into admin pages.
Loaded AFTER main.css so cascade wins.
════════════════════════════════════════════════════════════════════════════ */
/* Fonts now loaded via in for non-blocking parallel fetch (LCP fix) */
/* General Sans loaded from Fontshare for the display font */
/* ── DESIGN TOKENS ──────────────────────────────────────────────────────── */
html:has(body.gp-b2b-theme),
body.gp-b2b-theme {
overflow-x: hidden;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.gp-b2b-theme {
text-align: center;
}
body.gp-b2b-theme .gp-b2b__hero,
body.gp-b2b-theme .gp-b2b__section,
body.gp-b2b-theme section {
width: 100% !important;
margin: 0 auto !important;
text-align: center !important;
}
body.gp-b2b-theme .gp-b2b__container {
margin-left: auto !important;
margin-right: auto !important;
width: 100%;
box-sizing: border-box;
}
body.gp-b2b-theme {
/* Surfaces — graduated obsidian */
--gp-bg-0: #08090C; /* page background, near-black */
--gp-bg-1: #11131A; /* card / surface 1 */
--gp-bg-2: #181B26; /* surface 2, raised */
--gp-bg-3: #20242F; /* surface 3, deepest raise */
/* Borders & dividers */
--gp-line: rgba(255, 255, 255, 0.06);
--gp-line-strong: rgba(255, 255, 255, 0.12);
--gp-line-warm: rgba(244, 195, 65, 0.12);
/* Text */
--gp-text-0: #FFFFFF;
--gp-text-1: #D6D9E0;
--gp-text-2: #9CA1AE;
--gp-text-3: #5C6275;
/* Brand accents — RESERVED USE */
--gp-emerald: #00E58B; /* primary action only */
--gp-emerald-glow: rgba(0, 229, 139, 0.18);
--gp-emerald-soft: rgba(0, 229, 139, 0.08);
--gp-gold: #F4C341; /* premium accent, decorative */
--gp-gold-glow: rgba(244, 195, 65, 0.16);
--gp-gold-soft: rgba(244, 195, 65, 0.06);
--gp-ice: #7DD3FC; /* data / stats / live */
--gp-ice-soft: rgba(125, 211, 252, 0.10);
--gp-warn: #FF6B6B;
--gp-warn-soft: rgba(255, 107, 107, 0.10);
/* Radii */
--gp-r-2: 6px;
--gp-r-3: 10px;
--gp-r-4: 14px;
--gp-r-5: 20px;
--gp-r-pill: 999px;
/* Spacing scale (4-pt grid) */
--gp-s-1: 4px;
--gp-s-2: 8px;
--gp-s-3: 12px;
--gp-s-4: 16px;
--gp-s-5: 24px;
--gp-s-6: 32px;
--gp-s-7: 48px;
--gp-s-8: 64px;
--gp-s-9: 96px;
--gp-s-10: 128px;
/* Typography */
--gp-font-display: 'General Sans', 'DM Sans', system-ui, sans-serif;
--gp-font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
--gp-font-mono: 'JetBrains Mono', 'Menlo', monospace;
/* Motion */
--gp-ease: cubic-bezier(0.22, 1, 0.36, 1);
--gp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
/* Shadows — soft + glow */
--gp-shadow-1: 0 1px 2px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.18);
--gp-shadow-2: 0 4px 12px rgba(0,0,0,0.35), 0 16px 48px rgba(0,0,0,0.28);
--gp-shadow-glow-emerald: 0 0 0 1px var(--gp-emerald-soft), 0 8px 32px var(--gp-emerald-glow);
--gp-shadow-glow-gold: 0 0 0 1px var(--gp-gold-soft), 0 8px 32px var(--gp-gold-glow);
/* Layout */
--gp-z-sticky: 80;
--gp-z-modal: 200;
--gp-content-w: 1240px;
--gp-prose-w: 740px;
background: var(--gp-bg-0);
color: var(--gp-text-1);
font-family: var(--gp-font-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body.gp-b2b-theme,
body.gp-b2b-theme * {
box-sizing: border-box;
}
body.gp-b2b-theme::before {
/* Subtle noise grain over the whole page — gives the dark surfaces texture */
content: '';
position: fixed;
inset: 0;
pointer-events: none;
opacity: 0.025;
z-index: 1;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
body.gp-b2b-theme > * {
position: relative;
z-index: 2;
}
/* ── BASELINE TYPOGRAPHY ─────────────────────────────────────────────────── */
body.gp-b2b-theme h1,
body.gp-b2b-theme h2,
body.gp-b2b-theme h3,
body.gp-b2b-theme h4,
body.gp-b2b-theme h5,
body.gp-b2b-theme h6 {
font-family: var(--gp-font-display);
color: var(--gp-text-0);
line-height: 1.15;
letter-spacing: -0.02em;
font-weight: 600;
margin: 0;
}
body.gp-b2b-theme h1 { font-size: clamp(40px, 6.2vw, 80px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 600; }
body.gp-b2b-theme h2 { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -0.025em; }
body.gp-b2b-theme h3 { font-size: clamp(20px, 1.6vw, 24px); font-weight: 600; }
body.gp-b2b-theme h4 { font-size: 18px; font-weight: 600; }
body.gp-b2b-theme p {
margin: 0 0 var(--gp-s-4);
color: var(--gp-text-1);
font-size: 16px;
line-height: 1.7;
}
body.gp-b2b-theme a {
color: var(--gp-text-0);
text-decoration: none;
transition: color 180ms var(--gp-ease);
}
body.gp-b2b-theme a:hover {
color: var(--gp-emerald);
}
/* ── CONTAINER ──────────────────────────────────────────────────────────── */
.gp-b2b__container {
max-width: var(--gp-content-w);
margin: 0 auto;
padding: 0 var(--gp-s-5);
}
.gp-b2b__container--narrow {
max-width: var(--gp-prose-w);
}
/* ════════════════════════════════════════════════════════════════════════
HEADER — sticky, glass, subtle border
════════════════════════════════════════════════════════════════════════ */
.gp-b2b__header {
position: sticky;
top: 0;
z-index: var(--gp-z-sticky);
background: rgba(8, 9, 12, 0.72);
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
border-bottom: 1px solid var(--gp-line);
padding: var(--gp-s-3) 0;
}
.gp-b2b__header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gp-s-5);
}
.gp-b2b__logo {
font-family: var(--gp-font-display);
font-size: 22px;
font-weight: 700;
color: var(--gp-text-0);
text-decoration: none;
letter-spacing: -0.03em;
display: inline-flex;
align-items: center;
gap: var(--gp-s-2);
}
.gp-b2b__logo > span:first-child {
background: linear-gradient(120deg, #FFFFFF 0%, #D6D9E0 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.gp-b2b__logo-tag {
font-size: 11px;
color: var(--gp-gold);
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 600;
padding: 3px 8px;
border-radius: 4px;
background: var(--gp-gold-soft);
border: 1px solid var(--gp-line-warm);
margin-left: var(--gp-s-2);
}
.gp-b2b__nav {
display: flex;
gap: var(--gp-s-6);
margin-left: auto;
margin-right: var(--gp-s-5);
}
.gp-b2b__nav a {
color: var(--gp-text-2);
font-size: 14px;
font-weight: 500;
position: relative;
padding: 6px 0;
transition: color 180ms var(--gp-ease);
}
.gp-b2b__nav a::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: var(--gp-emerald);
transform: scaleX(0);
transform-origin: left;
transition: transform 220ms var(--gp-ease);
}
.gp-b2b__nav a:hover {
color: var(--gp-text-0);
}
.gp-b2b__nav a:hover::after {
transform: scaleX(1);
}
.gp-b2b__header-actions {
display: flex;
align-items: center;
gap: var(--gp-s-3);
}
/* ════════════════════════════════════════════════════════════════════════
BUTTONS
════════════════════════════════════════════════════════════════════════ */
.gp-b2b__btn {
display: inline-flex;
align-items: center;
gap: var(--gp-s-2);
padding: 12px 22px;
border-radius: var(--gp-r-pill);
font-family: var(--gp-font-body);
font-size: 14px;
font-weight: 600;
letter-spacing: -0.005em;
text-decoration: none;
border: 0;
cursor: pointer;
transition: all 200ms var(--gp-ease);
position: relative;
overflow: hidden;
line-height: 1;
}
.gp-b2b__btn--primary {
background: var(--gp-emerald);
color: #053825;
box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, var(--gp-shadow-glow-emerald);
}
.gp-b2b__btn--primary:hover {
transform: translateY(-1px);
box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 0 0 1px var(--gp-emerald), 0 10px 32px var(--gp-emerald-glow);
color: #053825;
}
.gp-b2b__btn--ghost {
background: transparent;
color: var(--gp-text-1);
border: 1px solid var(--gp-line-strong);
}
.gp-b2b__btn--ghost:hover {
border-color: var(--gp-text-2);
color: var(--gp-text-0);
background: var(--gp-bg-1);
}
.gp-b2b__btn--sm {
padding: 8px 16px;
font-size: 13px;
}
.gp-b2b__btn--lg {
padding: 16px 32px;
font-size: 16px;
}
/* ════════════════════════════════════════════════════════════════════════
HERO
════════════════════════════════════════════════════════════════════════ */
.gp-b2b__hero {
position: relative;
padding: var(--gp-s-10) 0 var(--gp-s-9);
text-align: center;
overflow: hidden;
}
.gp-b2b__hero::before {
/* radial soft-spot top center */
content: '';
position: absolute;
left: 50%;
top: -120px;
width: 800px;
height: 800px;
transform: translateX(-50%);
background:
radial-gradient(circle at center,
var(--gp-emerald-soft) 0%,
transparent 50%),
radial-gradient(circle at 30% 30%,
var(--gp-gold-soft) 0%,
transparent 40%);
filter: blur(40px);
pointer-events: none;
}
.gp-b2b__hero::after {
/* faint hexagon pattern in the lower half */
content: '';
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(
120deg,
transparent 0,
transparent 48px,
rgba(255,255,255,0.012) 48px,
rgba(255,255,255,0.012) 49px
),
repeating-linear-gradient(
60deg,
transparent 0,
transparent 48px,
rgba(255,255,255,0.012) 48px,
rgba(255,255,255,0.012) 49px
);
mask-image: linear-gradient(180deg, transparent 0%, black 50%, transparent 100%);
pointer-events: none;
}
.gp-b2b__hero > * {
position: relative;
z-index: 1;
}
.gp-b2b__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--gp-s-2);
padding: 6px 14px;
background: var(--gp-bg-2);
border: 1px solid var(--gp-line-strong);
border-radius: var(--gp-r-pill);
color: var(--gp-text-2);
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--gp-s-6);
}
.gp-b2b__eyebrow-dot {
width: 6px; height: 6px;
border-radius: 999px;
background: var(--gp-emerald);
box-shadow: 0 0 8px var(--gp-emerald);
animation: gp-b2b-pulse 2s ease-in-out infinite;
}
@keyframes gp-b2b-pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--gp-emerald); }
50% { opacity: 0.5; box-shadow: 0 0 4px var(--gp-emerald); }
}
.gp-b2b__h1 {
/* Centered via explicit margin + text-align. No padding, no balance —
tags control wrapping so each line centers individually. */
width: 100%;
margin-left: auto !important;
margin-right: auto !important;
margin-top: 0 !important;
margin-bottom: var(--gp-s-5);
text-align: center !important;
display: block !important;
box-sizing: border-box;
padding: 0;
/* Re-confirm the font-size from base in case anything overrides */
}
.gp-b2b__h1-mark {
background: linear-gradient(120deg, var(--gp-emerald) 0%, var(--gp-ice) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-style: italic;
font-weight: 500;
/* Italic glyphs lean right and can clip past the bounding box on mobile.
Inline-block + a tiny right padding prevents the descender/tail clip. */
display: inline-block;
padding-right: 0.18em;
}
.gp-b2b__h1-sub {
display: block;
width: 100%;
text-align: center;
font-family: var(--gp-font-mono);
font-size: clamp(12px, 1.1vw, 16px);
font-weight: 600;
color: var(--gp-gold);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-top: var(--gp-s-4);
font-style: normal;
-webkit-text-fill-color: var(--gp-gold);
background: none !important;
line-height: 1.4;
}
.gp-b2b__lede {
font-size: clamp(17px, 1.4vw, 20px);
color: var(--gp-text-2);
max-width: 620px;
margin: 0 auto var(--gp-s-7) !important;
line-height: 1.55;
text-align: center !important;
display: block;
}
body.gp-b2b-theme .gp-b2b__section-lede,
body.gp-b2b-theme .gp-b2b__section-header p {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
.gp-b2b__cta-row {
display: flex;
gap: var(--gp-s-3);
justify-content: center;
flex-wrap: wrap;
margin-bottom: var(--gp-s-8);
}
/* ── Trust badges row under CTAs ── */
.gp-b2b__trust-row {
display: flex;
flex-wrap: wrap;
gap: var(--gp-s-5);
justify-content: center;
margin-top: var(--gp-s-6);
color: var(--gp-text-3);
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.gp-b2b__trust-badge {
display: inline-flex;
align-items: center;
gap: var(--gp-s-2);
}
.gp-b2b__trust-badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--gp-emerald);
}
/* ════════════════════════════════════════════════════════════════════════
STATS GRID
════════════════════════════════════════════════════════════════════════ */
.gp-b2b__stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--gp-s-4);
margin: var(--gp-s-7) auto 0;
max-width: 1080px;
padding: 0 var(--gp-s-5);
}
.gp-b2b__stat {
background: var(--gp-bg-1) !important;
border: 1px solid var(--gp-line) !important;
border-radius: var(--gp-r-4) !important;
padding: var(--gp-s-6) var(--gp-s-5) !important;
text-align: center !important;
position: relative;
overflow: hidden;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: var(--gp-s-2);
min-height: 150px;
/* Subtle entrance animation */
opacity: 0;
transform: translateY(20px);
animation: gp-b2b-fade-up 600ms var(--gp-ease) forwards;
}
.gp-b2b__stat:nth-child(1) { animation-delay: 0ms; }
.gp-b2b__stat:nth-child(2) { animation-delay: 100ms; }
.gp-b2b__stat:nth-child(3) { animation-delay: 200ms; }
.gp-b2b__stat:nth-child(4) { animation-delay: 300ms; }
@keyframes gp-b2b-fade-up {
to { opacity: 1; transform: translateY(0); }
}
.gp-b2b__stat-value {
/* Pulse the number subtly on first paint */
animation: gp-b2b-pop-in 700ms var(--gp-ease) 200ms backwards;
}
@keyframes gp-b2b-pop-in {
from { opacity: 0; transform: scale(0.85); }
to { opacity: 1; transform: scale(1); }
}
.gp-b2b__stat::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gp-emerald), transparent);
opacity: 0.5;
}
.gp-b2b__stat-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--gp-text-3);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--gp-s-2);
}
.gp-b2b__stat-label::before {
content: '';
display: inline-block;
width: 4px;
height: 4px;
border-radius: 999px;
background: var(--gp-gold);
}
.gp-b2b__stat-value {
font-family: var(--gp-font-mono);
font-size: 36px;
font-weight: 600;
color: var(--gp-text-0);
letter-spacing: -0.02em;
line-height: 1.05;
}
.gp-b2b__stat-value-mark {
color: var(--gp-emerald);
font-weight: 500;
}
.gp-b2b__stat-sub {
margin-top: var(--gp-s-2);
font-size: 12px;
color: var(--gp-ice);
font-family: var(--gp-font-mono);
}
/* ════════════════════════════════════════════════════════════════════════
PROVIDER LOGO TICKER (casino site)
════════════════════════════════════════════════════════════════════════ */
.gp-b2b__ticker {
margin-top: var(--gp-s-8);
border-top: 1px solid var(--gp-line);
border-bottom: 1px solid var(--gp-line);
padding: var(--gp-s-5) 0;
background: var(--gp-bg-1);
overflow: hidden;
}
.gp-b2b__ticker-label {
text-align: center;
color: var(--gp-text-3);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.16em;
margin-bottom: var(--gp-s-4);
}
.gp-b2b__ticker-track {
display: flex;
gap: var(--gp-s-7);
align-items: center;
animation: gp-b2b-marquee 60s linear infinite;
width: max-content;
}
@keyframes gp-b2b-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.gp-b2b__ticker-item {
font-family: var(--gp-font-display);
font-size: 18px;
font-weight: 600;
color: var(--gp-text-2);
letter-spacing: -0.01em;
padding: 0 var(--gp-s-3);
border-left: 1px solid var(--gp-line);
white-space: nowrap;
}
.gp-b2b__ticker-item:first-child { border-left: 0; }
/* ════════════════════════════════════════════════════════════════════════
SECTIONS
════════════════════════════════════════════════════════════════════════ */
.gp-b2b__section {
padding: var(--gp-s-10) 0;
position: relative;
}
.gp-b2b__section--bg-alt {
background:
linear-gradient(180deg, transparent 0%, var(--gp-bg-1) 8%, var(--gp-bg-1) 92%, transparent 100%);
}
.gp-b2b__section-header {
text-align: center;
margin-bottom: var(--gp-s-8);
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.gp-b2b__section-eyebrow {
color: var(--gp-gold);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.16em;
font-weight: 600;
margin-bottom: var(--gp-s-3);
}
.gp-b2b__section-lede {
font-size: 17px;
color: var(--gp-text-2);
margin: var(--gp-s-3) auto 0;
}
/* ── FEATURE GRID ── */
.gp-b2b__grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gp-s-4);
}
.gp-b2b__grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--gp-s-4);
}
.gp-b2b__feature {
background: var(--gp-bg-1) !important;
border: 1px solid var(--gp-line) !important;
border-radius: var(--gp-r-4) !important;
padding: var(--gp-s-6) !important;
position: relative;
transition: all 240ms var(--gp-ease);
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.gp-b2b__feature h3 {
text-align: center !important;
width: 100%;
}
.gp-b2b__feature p {
text-align: center !important;
width: 100%;
}
/* Subtle shimmer on icons + hover lift on cards */
.gp-b2b__feature-icon {
transition: transform 280ms var(--gp-ease), background 280ms ease;
}
.gp-b2b__feature:hover .gp-b2b__feature-icon {
transform: scale(1.08) rotate(-4deg);
background: rgba(0, 229, 139, 0.16) !important;
}
.gp-b2b__feature h3 {
transition: color 200ms ease;
}
.gp-b2b__feature:hover h3 {
color: var(--gp-emerald) !important;
}
.gp-b2b__feature::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--gp-r-4);
padding: 1px;
background: linear-gradient(135deg, var(--gp-emerald-soft) 0%, transparent 50%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 240ms var(--gp-ease);
pointer-events: none;
}
.gp-b2b__feature:hover {
transform: translateY(-2px);
border-color: var(--gp-line-strong);
background: var(--gp-bg-2);
}
.gp-b2b__feature:hover::before {
opacity: 1;
}
.gp-b2b__feature-icon {
width: 44px;
height: 44px;
border-radius: 10px;
background: var(--gp-emerald-soft);
border: 1px solid var(--gp-emerald-soft);
color: var(--gp-emerald);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: var(--gp-s-4);
}
.gp-b2b__feature h3 {
margin-bottom: var(--gp-s-3);
color: var(--gp-text-0);
}
.gp-b2b__feature p {
font-size: 15px;
color: var(--gp-text-2);
margin: 0;
}
/* ── HOW IT WORKS STEPS ── */
.gp-b2b__steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--gp-s-4);
counter-reset: step-counter;
}
.gp-b2b__step {
background: var(--gp-bg-1) !important;
border: 1px solid var(--gp-line) !important;
border-radius: var(--gp-r-4) !important;
padding: var(--gp-s-6) !important;
counter-increment: step-counter;
position: relative;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
transition: all 220ms var(--gp-ease);
}
.gp-b2b__step h3 { text-align: center !important; width: 100%; }
.gp-b2b__step p { text-align: center !important; width: 100%; }
.gp-b2b__step:hover {
transform: translateY(-3px);
border-color: var(--gp-gold) !important;
}
.gp-b2b__step:hover .gp-b2b__step-num {
background: var(--gp-gold) !important;
color: #5c4317 !important;
transform: scale(1.1);
}
.gp-b2b__step-num {
transition: all 220ms var(--gp-ease);
}
.gp-b2b__step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 999px;
background: var(--gp-gold-soft);
border: 1px solid var(--gp-gold);
color: var(--gp-gold);
font-family: var(--gp-font-mono);
font-size: 13px;
font-weight: 600;
margin-bottom: var(--gp-s-4);
}
.gp-b2b__step h3 {
margin-bottom: var(--gp-s-3);
}
.gp-b2b__step p {
font-size: 14px;
color: var(--gp-text-2);
margin: 0;
}
/* ── QUICK REFERENCE DL ── */
.gp-b2b__dl {
background: var(--gp-bg-1);
border: 1px solid var(--gp-line);
border-radius: var(--gp-r-4);
padding: var(--gp-s-6) var(--gp-s-7);
margin: 0 auto;
max-width: 960px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--gp-s-5);
}
.gp-b2b__dl > div {
min-width: 0;
text-align: center;
}
.gp-b2b__dl dt {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--gp-text-3);
margin-bottom: var(--gp-s-2);
font-weight: 500;
}
.gp-b2b__dl dd {
font-family: var(--gp-font-display);
color: var(--gp-text-0);
font-size: 19px;
font-weight: 600;
margin: 0;
letter-spacing: -0.015em;
}
/* ── FAQ ── */
.gp-b2b__faqs {
max-width: 820px;
margin: 0 auto;
}
.gp-b2b__faq {
background: var(--gp-bg-1);
border: 1px solid var(--gp-line);
border-radius: var(--gp-r-3);
margin-bottom: var(--gp-s-3);
overflow: hidden;
transition: border-color 200ms var(--gp-ease);
}
.gp-b2b__faq[open] {
border-color: var(--gp-line-strong);
}
.gp-b2b__faq summary {
padding: var(--gp-s-5);
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--gp-s-4);
}
.gp-b2b__faq summary::-webkit-details-marker { display: none; }
.gp-b2b__faq summary h3 {
font-size: 16px;
font-weight: 600;
color: var(--gp-text-0);
margin: 0;
display: inline;
}
.gp-b2b__faq summary svg {
color: var(--gp-text-3);
transition: transform 220ms var(--gp-ease);
flex-shrink: 0;
}
.gp-b2b__faq[open] summary svg { transform: rotate(180deg); color: var(--gp-emerald); }
.gp-b2b__faq p {
padding: 0 var(--gp-s-5) var(--gp-s-5);
margin: 0;
color: var(--gp-text-2);
line-height: 1.7;
font-size: 15px;
}
/* ════════════════════════════════════════════════════════════════════════
CASINO-SPECIFIC HIGH-TECH BLOCKS
════════════════════════════════════════════════════════════════════════ */
/* Provider showcase grid */
.gp-b2b__provider-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--gp-s-3);
}
.gp-b2b__provider-card {
aspect-ratio: 1 / 1;
background: var(--gp-bg-1);
border: 1px solid var(--gp-line);
border-radius: var(--gp-r-3);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--gp-s-2);
padding: var(--gp-s-4);
transition: all 220ms var(--gp-ease);
position: relative;
overflow: hidden;
}
.gp-b2b__provider-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at center, var(--gp-emerald-glow) 0%, transparent 70%);
opacity: 0;
transition: opacity 240ms var(--gp-ease);
}
.gp-b2b__provider-card:hover {
border-color: var(--gp-emerald-soft);
transform: translateY(-2px);
}
.gp-b2b__provider-card:hover::before {
opacity: 1;
}
.gp-b2b__provider-card-name {
font-family: var(--gp-font-display);
font-size: 14px;
color: var(--gp-text-1);
font-weight: 600;
text-align: center;
position: relative;
}
.gp-b2b__provider-card-count {
font-family: var(--gp-font-mono);
font-size: 11px;
color: var(--gp-emerald);
position: relative;
}
/* Game category showcase (casino-specific) */
.gp-b2b__cat-showcase {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--gp-s-4);
}
/* 5-card layout for the verticals row */
.gp-b2b__cat-showcase--5 {
grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1199px) {
.gp-b2b__cat-showcase--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
.gp-b2b__cat-showcase--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
.gp-b2b__cat-showcase--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
/* 5th card alone in last row spans full width so the 2-col grid looks balanced */
.gp-b2b__cat-showcase--5 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Logo block used in vertical cards (replaces the symbolic icon) */
.gp-b2b__cat-card-logo {
width: 64px;
height: 64px;
border-radius: 14px;
background: var(--gp-bg-2);
border: 1px solid var(--gp-line);
overflow: hidden;
margin: 0 auto var(--gp-s-4);
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
position: relative;
transition: all 240ms var(--gp-ease);
}
.gp-b2b__cat-card-logo img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}
.gp-b2b__cat-card:hover .gp-b2b__cat-card-logo {
transform: translateY(-3px) scale(1.05);
border-color: var(--gp-emerald-soft);
box-shadow: 0 12px 32px rgba(0, 229, 139, 0.18);
}
.gp-b2b__cat-card {
background: var(--gp-bg-1) !important;
border: 1px solid var(--gp-line) !important;
border-radius: var(--gp-r-4) !important;
padding: var(--gp-s-6) !important;
position: relative;
overflow: hidden;
transition: all 240ms var(--gp-ease);
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.gp-b2b__cat-card .gp-b2b__cat-card-title { text-align: center !important; width: 100%; }
.gp-b2b__cat-card .gp-b2b__cat-card-count { text-align: center !important; width: 100%; }
.gp-b2b__cat-card p { text-align: center !important; width: 100%; }
.gp-b2b__cat-card:hover .gp-b2b__cat-card-title {
background: linear-gradient(120deg, var(--gp-emerald), var(--gp-ice));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Sport-specific SVG icons (used on /sportsbook agent detail page) */
.gp-b2b__sport-icon {
color: var(--gp-emerald);
background: var(--gp-emerald-soft) !important;
border-color: rgba(0, 229, 139, 0.18) !important;
}
.gp-b2b__sport-icon svg {
width: 60%;
height: 60%;
}
.gp-b2b__cat-card:hover .gp-b2b__sport-icon {
background: rgba(0, 229, 139, 0.18) !important;
transform: rotate(-3deg) scale(1.05);
transition: transform 220ms var(--gp-ease), background 220ms ease;
}
/* "Open Gamting [X]" CTA inside each vertical card */
.gp-b2b__cat-card-cta {
margin-top: auto;
padding-top: var(--gp-s-4);
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--gp-emerald);
font-size: 13px;
font-weight: 600;
text-decoration: none;
border-top: 1px solid var(--gp-line);
width: 100%;
justify-content: center;
transition: color 200ms var(--gp-ease), gap 200ms var(--gp-ease);
}
.gp-b2b__cat-card-cta:hover {
color: var(--gp-ice);
gap: 10px;
}
.gp-b2b__cat-card-cta svg {
transition: transform 200ms var(--gp-ease);
}
.gp-b2b__cat-card-cta:hover svg {
transform: translate(2px, -2px);
}
/* Make the WHOLE vertical card clickable (stretched link over the card) */
.gp-b2b__cat-card-cta::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.gp-b2b__cat-card:hover {
border-color: var(--gp-line-strong) !important;
transform: translateY(-3px);
cursor: pointer;
}
/* Card needs to stretch its inner content so the CTA sticks to the bottom */
.gp-b2b__cat-card { justify-content: flex-start; }
.gp-b2b__cat-card p { flex: 1 1 auto; }
.gp-b2b__cat-card::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, var(--gp-gold-soft) 0%, transparent 60%);
opacity: 0;
transition: opacity 320ms var(--gp-ease);
}
.gp-b2b__cat-card:hover { transform: translateY(-3px); border-color: var(--gp-gold-soft); }
.gp-b2b__cat-card:hover::before { opacity: 1; }
.gp-b2b__cat-card-icon {
width: 56px;
height: 56px;
border-radius: var(--gp-r-3);
background: var(--gp-bg-2);
border: 1px solid var(--gp-line);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: var(--gp-s-4);
position: relative;
}
.gp-b2b__cat-card-title {
font-family: var(--gp-font-display);
font-size: 20px;
font-weight: 600;
color: var(--gp-text-0);
margin-bottom: var(--gp-s-2);
position: relative;
}
.gp-b2b__cat-card-count {
font-family: var(--gp-font-mono);
font-size: 12px;
color: var(--gp-emerald);
margin-bottom: var(--gp-s-3);
position: relative;
}
.gp-b2b__cat-card p {
font-size: 14px;
color: var(--gp-text-2);
margin: 0;
position: relative;
}
/* ════════════════════════════════════════════════════════════════════════
COMPARISON TABLE — proper table with hard borders, stripes, clear cells
All rules !important because legacy main.css fights us on table styles.
════════════════════════════════════════════════════════════════════════ */
.gp-b2b__compare-wrap {
max-width: 1100px !important;
margin: 0 auto !important;
background: var(--gp-bg-1) !important;
border: 2px solid #2A2F3C !important;
border-radius: 14px !important;
overflow: hidden !important;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 229, 139, 0.05) !important;
}
.gp-b2b__compare-caption {
position: absolute !important;
width: 1px !important; height: 1px !important;
padding: 0 !important; margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.gp-b2b__compare-table {
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 !important;
font-family: var(--gp-font-body) !important;
table-layout: fixed !important;
background: var(--gp-bg-1) !important;
}
.gp-b2b__compare-table thead {
background: #181B26 !important;
}
.gp-b2b__compare-table thead th {
padding: 20px 22px !important;
text-align: left !important;
vertical-align: middle !important;
border-bottom: 2px solid #3A4050 !important;
border-right: 1px solid #2A2F3C !important;
font-weight: 600 !important;
background: #181B26 !important;
}
.gp-b2b__compare-table thead th:last-child { border-right: 0 !important; }
.gp-b2b__th-name {
display: block;
font-family: var(--gp-font-display);
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
margin-bottom: 4px;
}
.gp-b2b__th-sub {
display: block;
font-size: 11px;
color: var(--gp-text-3);
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 500;
}
.gp-b2b__compare-table thead th:first-child .gp-b2b__th-name {
color: var(--gp-text-2);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 600;
font-family: var(--gp-font-body);
}
.gp-b2b__th--good { background: rgba(0, 229, 139, 0.08); }
.gp-b2b__th--good .gp-b2b__th-name { color: var(--gp-emerald); }
.gp-b2b__th--bad { background: rgba(255, 107, 107, 0.06); }
.gp-b2b__th--bad .gp-b2b__th-name { color: var(--gp-warn); }
/* Body cells — all !important to beat legacy main.css */
.gp-b2b__compare-table tbody th,
.gp-b2b__compare-table tbody td {
padding: 14px 22px !important;
text-align: left !important;
vertical-align: middle !important;
border-bottom: 1px solid #2A2F3C !important;
border-right: 1px solid #2A2F3C !important;
font-size: 14px !important;
line-height: 1.5 !important;
background-clip: padding-box !important;
}
.gp-b2b__compare-table tbody th:last-child,
.gp-b2b__compare-table tbody td:last-child { border-right: 0 !important; }
.gp-b2b__compare-table tbody tr:last-child th,
.gp-b2b__compare-table tbody tr:last-child td { border-bottom: 0 !important; }
/* Strong zebra striping — visible difference between rows */
.gp-b2b__compare-table tbody tr:nth-child(odd) td,
.gp-b2b__compare-table tbody tr:nth-child(odd) th {
background: #14161B !important;
}
.gp-b2b__compare-table tbody tr:nth-child(even) td,
.gp-b2b__compare-table tbody tr:nth-child(even) th {
background: #181B26 !important;
}
.gp-b2b__compare-table tbody tr:hover td,
.gp-b2b__compare-table tbody tr:hover th {
background: #20242F !important;
}
.gp-b2b__compare-table tbody tr:hover .gp-b2b__td-icon {
transform: scale(1.1);
}
.gp-b2b__td-label {
color: #FFFFFF !important;
font-size: 14px !important;
font-weight: 600 !important;
width: 26% !important;
}
.gp-b2b__td--good {
color: var(--gp-text-0) !important;
width: 37% !important;
}
.gp-b2b__td--good .gp-b2b__td-icon {
background: var(--gp-emerald) !important;
color: #053825 !important;
}
.gp-b2b__td--good > span:last-child { color: var(--gp-text-0) !important; }
.gp-b2b__td--bad {
color: var(--gp-text-2) !important;
width: 37% !important;
}
.gp-b2b__td--bad .gp-b2b__td-icon {
background: var(--gp-warn) !important;
color: #5c1d1d !important;
}
.gp-b2b__compare-table tbody td > span:last-child,
.gp-b2b__compare-table tbody td > span:first-child + span {
display: inline-block;
vertical-align: middle;
}
.gp-b2b__td-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 999px;
margin-right: var(--gp-s-3);
vertical-align: middle;
transition: transform 180ms var(--gp-ease);
}
/* Mobile: collapse to a card-per-row layout */
@media (max-width: 767px) {
.gp-b2b__compare-table { display: block; table-layout: auto; }
.gp-b2b__compare-table thead { display: none; }
.gp-b2b__compare-table tbody { display: block; }
.gp-b2b__compare-table tr {
display: block;
border-bottom: 1px solid var(--gp-line-strong);
padding: var(--gp-s-4) 0;
}
.gp-b2b__compare-table tr:last-child { border-bottom: 0; }
.gp-b2b__compare-table tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.02); }
.gp-b2b__compare-table tbody th,
.gp-b2b__compare-table tbody td {
display: block;
width: 100% !important;
border: 0 !important;
padding: var(--gp-s-3) var(--gp-s-5);
text-align: center !important;
}
.gp-b2b__td-label {
background: transparent;
color: var(--gp-gold);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
padding-bottom: var(--gp-s-2);
}
.gp-b2b__td--good::before,
.gp-b2b__td--bad::before {
display: block;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
margin-bottom: 4px;
font-weight: 600;
}
.gp-b2b__td--good::before {
content: '✓ GAMTING';
color: var(--gp-emerald);
}
.gp-b2b__td--bad::before {
content: '✗ CHEAP CLONE';
color: var(--gp-warn);
}
.gp-b2b__td-icon { display: none; }
.gp-b2b__compare-table tbody td > span:last-child {
display: block;
text-align: center;
}
}
/* ════════════════════════════════════════════════════════════════════════
INLINE CTAs — between sections, properly centered on all viewports
════════════════════════════════════════════════════════════════════════ */
.gp-b2b__inline-cta {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin-top: var(--gp-s-8);
padding-top: var(--gp-s-6);
border-top: 1px solid var(--gp-line);
width: 100%;
}
.gp-b2b__inline-cta > a {
margin: 0 auto;
}
.gp-b2b__inline-cta-note {
margin: var(--gp-s-3) auto 0;
color: var(--gp-text-3);
font-size: 13px;
letter-spacing: 0.02em;
font-family: var(--gp-font-mono);
max-width: 560px;
text-align: center;
}
/* ════════════════════════════════════════════════════════════════════════
CTA BANNER
════════════════════════════════════════════════════════════════════════ */
.gp-b2b__cta-banner {
background:
radial-gradient(circle at 80% 30%, var(--gp-gold-glow) 0%, transparent 50%),
radial-gradient(circle at 20% 70%, var(--gp-emerald-glow) 0%, transparent 50%),
var(--gp-bg-2);
border: 1px solid var(--gp-line-strong);
border-radius: var(--gp-r-5);
padding: var(--gp-s-9) var(--gp-s-7);
text-align: center;
margin: var(--gp-s-9) auto;
max-width: 960px;
position: relative;
overflow: hidden;
}
.gp-b2b__cta-banner h2 {
margin-bottom: var(--gp-s-4);
}
.gp-b2b__cta-banner p {
color: var(--gp-text-1);
margin: 0 auto var(--gp-s-6);
max-width: 540px;
font-size: 17px;
}
/* ════════════════════════════════════════════════════════════════════════
FOOTER
════════════════════════════════════════════════════════════════════════ */
.gp-b2b__footer {
background: var(--gp-bg-1);
border-top: 1px solid var(--gp-line);
padding: var(--gp-s-8) 0 var(--gp-s-5);
margin-top: var(--gp-s-9);
}
.gp-b2b__footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--gp-s-6);
margin-bottom: var(--gp-s-7);
}
.gp-b2b__footer-col h4, .gp-b2b__footer-col h3 {
color: var(--gp-gold);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 600;
margin: 0 0 var(--gp-s-4);
font-family: var(--gp-font-body);
}
.gp-b2b__footer-col ul { list-style: none; padding: 0; margin: 0; }
.gp-b2b__footer-col li { margin-bottom: var(--gp-s-3); }
.gp-b2b__footer-col a {
color: var(--gp-text-2);
font-size: 14px;
}
.gp-b2b__footer-col a:hover { color: var(--gp-text-0); }
.gp-b2b__footer-legal {
border-top: 1px solid var(--gp-line);
padding-top: var(--gp-s-5);
color: var(--gp-text-3);
font-size: 13px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--gp-s-3);
}
.gp-b2b__footer-legal a { color: var(--gp-text-3); }
.gp-b2b__footer-legal a:hover { color: var(--gp-text-1); }
/* ════════════════════════════════════════════════════════════════════════
STANDARD GAMTING FOOTER — site-wide secondary footer
Lives BELOW the B2B Master Agent footer with About/Products/Guides/Policies
════════════════════════════════════════════════════════════════════════ */
.gp-b2b__std-footer {
background: var(--gp-bg-0);
border-top: 1px solid var(--gp-line);
padding: var(--gp-s-7) 0 var(--gp-s-4);
}
.gp-b2b__std-footer-cols {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--gp-s-6);
margin-bottom: var(--gp-s-6);
}
.gp-b2b__std-footer-col h5 {
color: var(--gp-text-2);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 600;
margin: 0 0 var(--gp-s-3);
font-family: var(--gp-font-body);
}
.gp-b2b__std-footer-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.gp-b2b__std-footer-col li {
margin-bottom: var(--gp-s-2);
}
.gp-b2b__std-footer-col a {
color: var(--gp-text-3);
font-size: 13px;
text-decoration: none;
transition: color 180ms var(--gp-ease);
}
.gp-b2b__std-footer-col a:hover {
color: var(--gp-emerald);
}
.gp-b2b__std-footer-bottom {
border-top: 1px solid var(--gp-line);
padding-top: var(--gp-s-4);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--gp-s-3);
color: var(--gp-text-3);
font-size: 12px;
font-family: var(--gp-font-mono);
letter-spacing: 0.02em;
}
.gp-b2b__std-footer-warn {
color: var(--gp-warn);
opacity: 0.85;
}
@media (max-width: 991px) {
.gp-b2b__std-footer-cols { grid-template-columns: repeat(2, 1fr); gap: var(--gp-s-5); }
}
@media (max-width: 479px) {
/* Keep 2-col on mobile too — single-col makes the footer too tall */
.gp-b2b__std-footer { padding: var(--gp-s-6) 0 var(--gp-s-3); }
.gp-b2b__std-footer-cols { grid-template-columns: repeat(2, 1fr); gap: var(--gp-s-4); margin-bottom: var(--gp-s-4); }
.gp-b2b__std-footer-col h5 { font-size: 10px; margin-bottom: var(--gp-s-2); }
.gp-b2b__std-footer-col li { margin-bottom: 6px; }
.gp-b2b__std-footer-col a { font-size: 12px; }
.gp-b2b__std-footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: var(--gp-s-2); font-size: 11px; padding-top: var(--gp-s-3); }
}
/* ════════════════════════════════════════════════════════════════════════
GENERIC PROSE PAGES (blog, about, legacy SEO pages)
════════════════════════════════════════════════════════════════════════ */
.gp-b2b__page {
padding: var(--gp-s-9) 0;
}
.gp-b2b__prose {
max-width: var(--gp-prose-w);
margin: 0 auto;
}
.gp-b2b__prose h1 { margin-bottom: var(--gp-s-5); }
.gp-b2b__prose h2 {
margin-top: var(--gp-s-8);
margin-bottom: var(--gp-s-4);
padding-top: var(--gp-s-3);
border-top: 1px solid var(--gp-line);
}
.gp-b2b__prose h3 {
margin-top: var(--gp-s-6);
margin-bottom: var(--gp-s-3);
}
.gp-b2b__prose p,
.gp-b2b__prose li {
font-size: 17px;
line-height: 1.7;
color: var(--gp-text-1);
}
.gp-b2b__prose ul,
.gp-b2b__prose ol {
padding-left: var(--gp-s-5);
margin-bottom: var(--gp-s-5);
}
.gp-b2b__prose li { margin-bottom: var(--gp-s-2); }
.gp-b2b__prose a {
color: var(--gp-emerald);
border-bottom: 1px solid var(--gp-emerald-soft);
transition: border-color 200ms var(--gp-ease);
}
.gp-b2b__prose a:hover { border-color: var(--gp-emerald); }
.gp-b2b__prose strong { color: var(--gp-text-0); font-weight: 600; }
.gp-b2b__prose blockquote {
margin: var(--gp-s-6) 0;
padding: var(--gp-s-5) var(--gp-s-6);
border-left: 3px solid var(--gp-gold);
background: var(--gp-bg-1);
border-radius: 0 var(--gp-r-3) var(--gp-r-3) 0;
font-style: italic;
color: var(--gp-text-0);
}
.gp-b2b__prose table {
width: 100%;
border-collapse: collapse;
margin: var(--gp-s-5) 0;
background: var(--gp-bg-1);
border: 1px solid var(--gp-line);
border-radius: var(--gp-r-3);
overflow: hidden;
}
.gp-b2b__prose th,
.gp-b2b__prose td {
padding: var(--gp-s-3) var(--gp-s-4);
text-align: left;
border-bottom: 1px solid var(--gp-line);
font-size: 15px;
}
.gp-b2b__prose th {
background: var(--gp-bg-2);
color: var(--gp-gold);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
.gp-b2b__prose tr:last-child td { border-bottom: 0; }
.gp-b2b__prose code {
background: var(--gp-bg-2);
border: 1px solid var(--gp-line);
border-radius: 4px;
padding: 2px 6px;
font-family: var(--gp-font-mono);
font-size: 0.92em;
color: var(--gp-ice);
}
/* ── Card list (blog index) ── */
.gp-b2b__card-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gp-s-5);
margin-top: var(--gp-s-7);
}
.gp-b2b__card {
background: var(--gp-bg-1);
border: 1px solid var(--gp-line);
border-radius: var(--gp-r-4);
overflow: hidden;
transition: all 240ms var(--gp-ease);
display: flex;
flex-direction: column;
}
.gp-b2b__card:hover {
border-color: var(--gp-line-strong);
transform: translateY(-2px);
}
.gp-b2b__card-thumb {
aspect-ratio: 16 / 9;
background: var(--gp-bg-2);
overflow: hidden;
border-bottom: 1px solid var(--gp-line);
}
.gp-b2b__card-thumb img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 380ms var(--gp-ease);
}
.gp-b2b__card:hover .gp-b2b__card-thumb img {
transform: scale(1.04);
}
.gp-b2b__card-body {
padding: var(--gp-s-5);
flex: 1;
display: flex;
flex-direction: column;
}
.gp-b2b__card-meta {
font-family: var(--gp-font-mono);
font-size: 11px;
color: var(--gp-gold);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--gp-s-3);
}
.gp-b2b__card h3 {
margin-bottom: var(--gp-s-3);
flex: 1;
}
.gp-b2b__card a.gp-b2b__card-cta {
color: var(--gp-emerald);
font-size: 14px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: auto;
}
/* ════════════════════════════════════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
.gp-b2b__nav { display: none; }
.gp-b2b__stats,
.gp-b2b__grid-4,
.gp-b2b__steps,
.gp-b2b__cat-showcase,
.gp-b2b__provider-grid { grid-template-columns: repeat(2, 1fr); }
.gp-b2b__grid-3 { grid-template-columns: repeat(2, 1fr); }
.gp-b2b__card-list { grid-template-columns: repeat(2, 1fr); }
.gp-b2b__footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639px) {
body.gp-b2b-theme h1 {
font-size: clamp(30px, 9vw, 44px);
line-height: 1.08;
letter-spacing: -0.025em;
}
body.gp-b2b-theme h2 {
font-size: clamp(22px, 6.5vw, 32px);
}
.gp-b2b__hero { padding: var(--gp-s-7) 0 var(--gp-s-6); }
.gp-b2b__hero::before {
width: 100vw;
height: 400px;
left: 0;
transform: none;
}
.gp-b2b__section { padding: var(--gp-s-7) 0; }
.gp-b2b__container { padding: 0 var(--gp-s-4); }
.gp-b2b__h1 { max-width: 100%; padding: 0 var(--gp-s-2); }
.gp-b2b__lede { font-size: 15px; padding: 0 var(--gp-s-2); }
.gp-b2b__cta-row { gap: var(--gp-s-2); padding: 0 var(--gp-s-2); }
.gp-b2b__btn--lg { padding: 12px 20px; font-size: 14px; width: 100%; justify-content: center; }
.gp-b2b__trust-row { gap: var(--gp-s-3); padding: 0 var(--gp-s-3); }
.gp-b2b__trust-row { font-size: 10px; }
.gp-b2b__stats,
.gp-b2b__grid-3,
.gp-b2b__grid-4,
.gp-b2b__steps,
.gp-b2b__cat-showcase,
.gp-b2b__card-list { grid-template-columns: 1fr; }
.gp-b2b__provider-grid { grid-template-columns: repeat(2, 1fr); gap: var(--gp-s-2); }
/* Footer 2x2 on mobile to keep height down; brand col spans full width */
.gp-b2b__footer-grid {
grid-template-columns: 1fr 1fr;
gap: var(--gp-s-4);
}
.gp-b2b__footer-col:first-child {
grid-column: 1 / -1;
text-align: center;
}
.gp-b2b__footer-col:first-child .gp-b2b__logo { justify-content: center; }
.gp-b2b__footer-col:first-child p { margin: var(--gp-s-3) auto 0; max-width: 320px; }
.gp-b2b__footer-col h4, .gp-b2b__footer-col h3 { font-size: 10px; }
.gp-b2b__footer-col a { font-size: 12px; }
.gp-b2b__footer-col li { margin-bottom: 6px; }
.gp-b2b__cta-banner { padding: var(--gp-s-7) var(--gp-s-4); }
.gp-b2b__stat-value { font-size: 28px; }
.gp-b2b__dl {
grid-template-columns: 1fr 1fr;
padding: var(--gp-s-5) var(--gp-s-4);
gap: var(--gp-s-4);
}
.gp-b2b__header-inner { gap: var(--gp-s-2); }
.gp-b2b__logo-tag { display: none; }
/* Keep both Login + Apply visible on mobile — agent login is critical access path */
.gp-b2b__header-actions { gap: var(--gp-s-2); }
.gp-b2b__header-actions .gp-b2b__btn { padding: 8px 12px; font-size: 12px; }
/* Mobile: force everything inside cards to be centered */
.gp-b2b__feature,
.gp-b2b__step,
.gp-b2b__cat-card,
.gp-b2b__stat {
text-align: center !important;
align-items: center !important;
padding: var(--gp-s-5) !important;
}
.gp-b2b__feature h3,
.gp-b2b__feature p,
.gp-b2b__step h3,
.gp-b2b__step p,
.gp-b2b__cat-card .gp-b2b__cat-card-title,
.gp-b2b__cat-card .gp-b2b__cat-card-count,
.gp-b2b__cat-card p,
.gp-b2b__stat .gp-b2b__stat-label,
.gp-b2b__stat .gp-b2b__stat-value,
.gp-b2b__stat .gp-b2b__stat-sub {
text-align: center !important;
width: 100%;
}
.gp-b2b__feature-icon,
.gp-b2b__step-num,
.gp-b2b__cat-card-icon {
margin-left: auto !important;
margin-right: auto !important;
}
}
@media (max-width: 399px) {
body.gp-b2b-theme h1 { font-size: clamp(24px, 7.5vw, 32px); }
.gp-b2b__h1-mark { padding-right: 0.22em; }
.gp-b2b__dl { grid-template-columns: 1fr; }
.gp-b2b__provider-grid { grid-template-columns: 1fr; }
.gp-b2b__header-actions .gp-b2b__btn { padding: 8px 14px; font-size: 12px; }
}
/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
body.gp-b2b-theme *,
body.gp-b2b-theme *::before,
body.gp-b2b-theme *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* Gamting Pro added as a 6th vertical card — text-style "PRO" logo + 6-col grid */
.gp-b2b__cat-card-logo--text {
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
letter-spacing: .06em;
font-size: 1.15rem;
color: #00E58B;
background: rgba(0,229,139,.12);
border: 1px solid rgba(0,229,139,.4);
border-radius: 12px;
}
.gp-b2b__cat-showcase--5 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px){ .gp-b2b__cat-showcase--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px){ .gp-b2b__cat-showcase--5 { grid-template-columns: repeat(2, 1fr); } }