/* ============================================================================
TipsChampions - Sports Betting Platform for Friends & Family
@package TipsChampions
@subpackage Theme: Stadium Glass
@version 1.1
@since May 2026
@license Proprietary
@file public/assets/css/themes/12-stadium-glass.css
@description Third active theme on top of the v2 UI primitive layer.
Direction #01 from design-overhaul/mockups/ — frosted-glass
panels over a dusk-to-pitch-green radial gradient, lime accent
(#C8FF5C), Inter + DM Mono type stack.
The file is split into two SECTIONS:
1. --tc-* token overrides (palette / radii / shadow / type)
2. Theme-only decorations (gradient body, glass backdrop
filters on primitives, navbar restyle, cosmetic overlays).
Only loaded when the user's theme preference resolves to
'stadium-glass'. The conditional + Google Fonts preconnect
lives in views/layouts/app.php, gated on `$theme === 'stadium-glass'`.
LOAD ORDER (after _base.css):
1. bootstrap.min.css (CDN)
2. app.css (legacy variables + Bootstrap augmentation)
3. dark-theme.css (overrides at [data-theme="dark"], inert here)
4. responsive-fixes.css
5. _base.css (token defaults + every .ui-* rule)
6. THIS FILE (stadium-glass token overrides + decorations)
CONVENTIONS:
- Selector form: bare `[data-theme="stadium-glass"]`, matching dark-theme.css.
The data-theme attribute lives on the element (views/layouts/app.php),
so neither `body[...]` nor `html[...]` prefixes are needed.
- Every visual property in the override block reads a literal value;
theme-only decorations may reference --tc-* tokens.
- Position medals (--tc-gold / --tc-silver / --tc-bronze) inherit from
_base.css defaults; the mockup uses --tc-accent for #1 emphasis directly.
SECTIONS:
1. Token contract overrides
2. Theme-only decorations (body gradient, glass surfaces, cosmetic overlays)
3. Bootstrap-layer restyle — buttons, form controls, flash alerts,
typography. Only consumed by the secondary pages that still render
default view markup inside the shell (nav/footer restyles retired in
Phase 10.4 — the layout shell emits its own chrome; see Section 6).
4. Primitive (.ui-*) refinements for default-view pages on this theme.
6. Heavy-theme chrome (.tc-* classes) used by the layout shell.
7. Heavy-theme page library (.sg-* generics) shared by the rebuilt
per-page views under views/themes/stadium-glass/.
============================================================================ */
/* ============================================================================
SECTION 1 — TOKEN CONTRACT OVERRIDES
============================================================================ */
[data-theme="stadium-glass"] {
/* ---- Surface --------------------------------------------------------- */
--tc-bg: #0A1228;
--tc-bg-elevated: rgba(255, 255, 255, 0.08);
--tc-bg-sunken: rgba(255, 255, 255, 0.04);
--tc-bg-hover: rgba(255, 255, 255, 0.12);
--tc-bg-active: rgba(255, 255, 255, 0.14);
--tc-bg-highlight: rgba(200, 255, 92, 0.10);
/* ---- Foreground / text ---------------------------------------------- */
--tc-fg: #F5F7FA;
--tc-fg-dim: #A6B3C4;
--tc-fg-muted: #6E7A8C;
--tc-fg-on-accent: #0A1228;
/* ---- Accent (lime) -------------------------------------------------- */
--tc-accent: #C8FF5C;
--tc-accent-hover: #D6FF70;
--tc-accent-soft: rgba(200, 255, 92, 0.14);
--tc-accent-fg: #0A1228;
/* ---- Semantic ------------------------------------------------------- */
/* Mockup uses lime for positive deltas (+pts, "exact") — fold success
into the accent palette so .ui-stat--success / .ui-badge--success
feel native to the theme. */
--tc-success: #C8FF5C;
--tc-success-soft: rgba(200, 255, 92, 0.14);
--tc-success-fg: #0A1228;
--tc-warning: #FFB454;
--tc-warning-soft: rgba(255, 180, 84, 0.18);
--tc-warning-fg: #0A1228;
--tc-danger: #FF6B6B;
--tc-danger-soft: rgba(255, 107, 107, 0.18);
--tc-danger-fg: #ffffff;
--tc-info: #6DD3FF;
--tc-info-soft: rgba(109, 211, 255, 0.18);
--tc-info-fg: #0A1228;
/* ---- Structure ------------------------------------------------------ */
--tc-border: rgba(255, 255, 255, 0.14);
--tc-border-strong: rgba(255, 255, 255, 0.24);
--tc-radius-md: 1.125rem; /* 18px — glass panel default */
--tc-radius-lg: 1.5rem; /* 24px — hero panels */
--tc-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
--tc-shadow-card-hover:0 12px 32px rgba(0, 0, 0, 0.40),
inset 0 1px 0 rgba(255, 255, 255, 0.10);
--tc-shadow-floating: 0 20px 60px rgba(0, 0, 0, 0.45);
/* ---- Type ----------------------------------------------------------- */
--tc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--tc-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--tc-font-mono: 'DM Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}
/* ============================================================================
SECTION 2 — THEME-ONLY DECORATIONS
============================================================================
These are the non-token-cascadable bits — multi-stop gradient backgrounds,
backdrop-filter blur, cosmetic overlays. They consume --tc-* tokens where
they can; the body-gradient stops are literal because the gradient is the
theme's defining surface (no equivalent token in the contract).
============================================================================ */
/* ----- Body: layered dusk → pitch-green gradient + base font -------------- */
/* Solid base colour on the element (it carries data-theme). The body
gradient below uses background-attachment:fixed, which iOS does NOT paint in
the top safe-area / status-bar region until a scroll repaint — exposing the
browser-default WHITE html background as a block at the top of the standalone
app (it vanishes once you scroll). Painting html navy removes that white and
also backs any overscroll bounce. (§44) */
[data-theme="stadium-glass"] {
background-color: #0A1228;
}
[data-theme="stadium-glass"] body {
background:
radial-gradient(ellipse 80% 60% at 50% 100%, #0F3D2E 0%, transparent 60%),
radial-gradient(ellipse 100% 80% at 50% 0%, #14233F 0%, #0A1228 60%),
linear-gradient(180deg, #0A1430 0%, #0A1228 50%, #08251A 100%);
background-attachment: fixed;
color: var(--tc-fg);
font-family: var(--tc-font-body);
font-feature-settings: 'tnum' 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100vh;
position: relative;
}
/* Faint noise overlay — fixed full-viewport SVG turbulence at 3% opacity.
pointer-events:none so it never blocks clicks; z-index 0 to sit behind
.navbar + main content (both of which establish their own stacking). */
[data-theme="stadium-glass"] body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.03;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
/* Soft floating lime spotlight — top-right corner, 60vw blurred radial. */
[data-theme="stadium-glass"] body::after {
content: '';
position: fixed;
top: -20%;
right: -20%;
width: 60vw;
height: 60vw;
pointer-events: none;
z-index: 0;
background: radial-gradient(circle, rgba(200, 255, 92, 0.06) 0%, transparent 60%);
filter: blur(40px);
}
/* Lift Bootstrap's main content + navbar above the overlays. */
[data-theme="stadium-glass"] .navbar,
[data-theme="stadium-glass"] main,
[data-theme="stadium-glass"] footer {
position: relative;
z-index: 1;
}
/* ----- Frosted-glass treatment on every primitive surface ----------------- */
/* The token override already swaps surface bg to rgba(255,255,255,0.08).
This block adds the backdrop blur that makes the glass effect "land". */
[data-theme="stadium-glass"] .ui-card,
[data-theme="stadium-glass"] .ui-stat,
[data-theme="stadium-glass"] .ui-match-row,
[data-theme="stadium-glass"] .ui-alert-banner,
[data-theme="stadium-glass"] .ui-table-wrap,
[data-theme="stadium-glass"] .ui-modal .modal-content {
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
}
/* ----- .ui-accordion on glass -------------------------------------------- */
/* app.css (global, unscoped) sets .accordion-button / .accordion-body
background-color DIRECTLY off legacy tokens (--tc-bg-surface = white on glass,
--tc-primary = blue), which beats the --bs-accordion-* variables the primitive
sets. So override the surfaces DIRECTLY here, at a higher specificity, with the
SOLID glass palette (#16213F panel / #101A35 sunken header — the §28 modal
approach) so nothing renders white. (§51 follow-up) */
[data-theme="stadium-glass"] .ui-accordion .accordion-item,
[data-theme="stadium-glass"] .ui-accordion .accordion-button,
[data-theme="stadium-glass"] .ui-accordion .accordion-body {
background-color: #16213F;
color: var(--tc-fg);
}
/* Expanded ("folded out") header: sunken panel, lime title, and square bottom
corners so it joins flush with the body below. Only the header (the "main
accordion") goes lime — the revealed answer text keeps the normal readable
--tc-fg set in the rule above. */
[data-theme="stadium-glass"] .ui-accordion .accordion-button:not(.collapsed) {
background-color: #101A35;
color: var(--tc-accent);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* The dark-theme rule at _base.css:229 adds an inset highlight specific to
the dark colour space — undo it for stadium-glass so the glass card's own
shadow (--tc-shadow-card, declared above) reads cleanly. */
[data-theme="stadium-glass"] .ui-card {
box-shadow: var(--tc-shadow-card);
border-color: var(--tc-border);
}
/* ----- Text-selection ---------------------------------------------------- */
[data-theme="stadium-glass"] ::selection {
background: var(--tc-accent);
color: var(--tc-bg);
}
/* ============================================================================
SECTION 3 — BOOTSTRAP-LAYER RESTYLE (secondary CSS-only pages)
============================================================================
The heavy-theme layout shell (views/layouts/themes/stadium-glass.php) now
emits its own chrome (.tc-nav pill, .tc-main wrapper, .tc-footer) for EVERY
page on this theme, so the old Bootstrap .navbar / footer.bg-light /
main.flex-grow-1 restyles are dead and were retired in Phase 10.4.
What remains here only matters for the ~16 secondary user-facing pages
(auth, settings, help, legal, profile, notifications, and the CSS-only
group/betting sub-pages) that still render with DEFAULT view markup inside
the shell's : Bootstrap buttons, form controls, flash
alerts, and typography. The shell's own nav/dropdown chrome is styled in
Section 6.
============================================================================ */
/* ----- Raw Bootstrap modals ---------------------------------------------- */
/* The Quick Bet modal (/betting/matches) and the Confirm Your Bet partial
(/betting/match) are raw Bootstrap modals, NOT ui/modal primitives, so
without this they render as default white modals on glass. Theme the chrome
to match ui/modal, and tone the inner light surfaces. */
/* NOTE: use SOLID glass-palette surfaces here, not the --tc-bg-* tokens. Those
tokens are translucent (rgba white 0.04–0.08) and only read as solid on the
ui/modal primitive, which also gets a backdrop-filter blur. A raw modal has
no blur, so translucent surfaces show the dimmed page through it. */
[data-theme="stadium-glass"] .modal-content {
background: #16213F;
color: var(--tc-fg);
border: 1px solid var(--tc-border);
border-radius: var(--tc-radius-md);
}
[data-theme="stadium-glass"] .modal-header,
[data-theme="stadium-glass"] .modal-footer {
border-color: var(--tc-border);
background: #101A35;
}
/* Override the Bootstrap-blue .bg-primary header band to a neutral glass band
(matches the ui/modal primitive's sunken header; the white title/icon read
fine on it). */
[data-theme="stadium-glass"] .modal-header.bg-primary {
background: #101A35 !important;
}
[data-theme="stadium-glass"] .modal-title { color: var(--tc-fg); }
/* Inner light surfaces (bg-light boxes, .card.bg-light score/odds tiles). */
[data-theme="stadium-glass"] .modal .bg-light {
background-color: #101A35 !important;
color: var(--tc-fg);
}
/* ----- Buttons → btn-lime / btn-ghost shape ------------------------------ */
/* Pill geometry on every button across the app — mockup uses 999px pills
everywhere. */
[data-theme="stadium-glass"] .btn {
border-radius: 999px;
font-weight: 500;
transition: transform 0.15s ease, box-shadow 0.15s ease,
background 0.15s ease, color 0.15s ease;
}
[data-theme="stadium-glass"] .btn-sm {
padding: 0.45rem 0.95rem;
font-size: 0.82rem;
}
/* Primary → btn-lime */
[data-theme="stadium-glass"] .btn-primary {
background: var(--tc-accent);
border-color: var(--tc-accent);
color: var(--tc-accent-fg);
padding: 0.65rem 1.3rem;
font-weight: 600;
box-shadow: 0 8px 24px rgba(200, 255, 92, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
[data-theme="stadium-glass"] .btn-primary:hover {
background: var(--tc-accent-hover);
border-color: var(--tc-accent-hover);
color: var(--tc-accent-fg);
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(200, 255, 92, 0.35);
}
[data-theme="stadium-glass"] .btn-primary:focus,
[data-theme="stadium-glass"] .btn-primary:active,
[data-theme="stadium-glass"] .btn-primary.active {
background: var(--tc-accent-hover) !important;
border-color: var(--tc-accent-hover) !important;
color: var(--tc-accent-fg) !important;
box-shadow: 0 0 0 4px var(--tc-accent-soft) !important;
}
/* Secondary / outline / ghost → glass pill */
[data-theme="stadium-glass"] .btn-secondary,
[data-theme="stadium-glass"] .btn-outline-secondary,
[data-theme="stadium-glass"] .btn-outline-light,
[data-theme="stadium-glass"] .btn-outline-primary {
background: var(--tc-bg-elevated);
border: 1px solid var(--tc-border);
color: var(--tc-fg);
padding: 0.6rem 1.15rem;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
[data-theme="stadium-glass"] .btn-secondary:hover,
[data-theme="stadium-glass"] .btn-outline-secondary:hover,
[data-theme="stadium-glass"] .btn-outline-light:hover,
[data-theme="stadium-glass"] .btn-outline-primary:hover {
background: var(--tc-bg-hover);
border-color: var(--tc-border-strong);
color: var(--tc-fg);
}
/* Semantic buttons inherit pill geometry but keep their token colours */
[data-theme="stadium-glass"] .btn-success {
background: var(--tc-success);
border-color: var(--tc-success);
color: var(--tc-success-fg);
}
[data-theme="stadium-glass"] .btn-danger {
background: var(--tc-danger);
border-color: var(--tc-danger);
color: var(--tc-danger-fg);
}
[data-theme="stadium-glass"] .btn-warning {
background: var(--tc-warning);
border-color: var(--tc-warning);
color: var(--tc-warning-fg);
}
/* ----- Form controls → tc-input shape ------------------------------------ */
[data-theme="stadium-glass"] .form-control,
[data-theme="stadium-glass"] .form-select {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--tc-border);
border-radius: 12px;
color: var(--tc-fg);
padding: 0.85rem 1rem;
font-family: var(--tc-font-body);
}
[data-theme="stadium-glass"] .form-control::placeholder {
color: var(--tc-fg-muted);
}
/* The closed .form-select is themed above, but the OPEN