/* ============================================================ j0beats visual theme for stats.j0beats.uk ------------------------------------------------------------ Layered on top of demo4/style.css to bring the dashboard in line with j0beats.uk: animated gradient backdrop, Poppins, soft 20px cards with purple/teal glow, pill controls. Loaded LAST in template.phtml so it wins on specificity ties. Nothing in the underlying theme is modified — deleting this file and its restores the original look exactly. ============================================================ */ :root { /* Shared with j0beats.uk */ --pokemon-yellow: #FFDE00; --streamer-pink: #F56FAD; --streamer-teal: #4ECDC4; --light-text: #F0F0F5; /* Purple / teal ramp */ --purple-bright: #a855f7; --purple-mid: #8b5cf6; --purple-deep: #7c3aed; --purple-light: #c084fc; --teal-bright: #2dd4bf; --teal-mid: #14b8a6; --cyan: #06b6d4; /* Card surfaces */ --card-bg: rgba(18, 12, 36, 0.82); --card-border: rgba(168, 85, 247, 0.30); --card-border-h: rgba(168, 85, 247, 0.60); --card-grad: linear-gradient(135deg, rgba(124,58,237,.10), rgba(20,184,166,.06)); --glow-purple: rgba(168, 85, 247, .30); --glow-teal: rgba(45, 212, 191, .30); /* Bootstrap 5 overrides — the source of the "blocky" look */ --bs-card-border-radius: 20px; --bs-card-inner-border-radius: 19px; --bs-card-border-color: var(--card-border); --bs-border-radius: 12px; --bs-border-radius-sm: 10px; --bs-border-radius-lg: 18px; --bs-body-font-family: 'Poppins', 'Roboto', Helvetica, sans-serif; } /* ── Animated gradient backdrop ──────────────────────────── */ body { font-family: 'Poppins', 'Roboto', Helvetica, sans-serif; color: var(--light-text); background: radial-gradient(circle at 10% 20%, rgba(255,255,255,.03) 0%, transparent 30%), radial-gradient(circle at 90% 30%, rgba(255,255,255,.03) 0%, transparent 30%), linear-gradient(30deg, #09e29a, #b41d82, #09e4ad, #f8005f); background-size: 300px 300px, 300px 300px, 450% 450%; background-attachment: fixed; animation: gradientBG 15s ease infinite; min-height: 100vh; } /* Darkening veil — keeps dense tables readable over the gradient. Must stay at z-index -1: anything >= 0 here would force the page wrappers into a stacking context, which traps Bootstrap modals underneath their own backdrop (appended to at z-index 1050). */ body::before { content: ''; position: fixed; inset: 0; background: rgba(4, 2, 14, 0.72); pointer-events: none; z-index: -1; } @keyframes gradientBG { 0% { background-position: 0% 50%, 0% 50%, 0% 50%; } 50% { background-position: 100% 50%, 100% 50%, 100% 50%; } 100% { background-position: 0% 50%, 0% 50%, 0% 50%; } } /* Deliberately no z-index/position here — see the note on body::before. In-flow content already paints above the negative-z-index backdrop. */ .main-wrapper, .page-wrapper { background: transparent !important; } /* Pokéball decorations, injected via template.phtml */ .pokeball-decoration { position: fixed; width: 450px; height: 450px; border-radius: 50%; background: linear-gradient(to bottom, rgba(255,0,0,.025) 0%, rgba(255,0,0,.025) 46%, rgba(0,0,0,.035) 48%, rgba(0,0,0,.035) 52%, rgba(255,255,255,.025) 54%, rgba(255,255,255,.025) 100%); z-index: -1; opacity: .6; filter: blur(2px); pointer-events: none; } .pokeball-1 { top: -120px; right: -120px; transform: rotate(20deg); } .pokeball-2 { bottom: -150px; left: -150px; transform: rotate(-25deg); } /* ── Cards ───────────────────────────────────────────────── */ .card { background-color: var(--card-bg) !important; background-image: var(--card-grad) !important; border: 1px solid var(--card-border) !important; border-radius: 20px !important; box-shadow: 0 8px 28px rgba(0,0,0,.40) !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; backdrop-filter: blur(6px); } .card:hover { transform: translateY(-4px); border-color: var(--card-border-h) !important; box-shadow: 0 14px 36px rgba(0,0,0,.45), 0 0 22px var(--glow-purple) !important; } /* The four KPI tiles sit in .stretch-card — lift them a touch more */ .stretch-card > .card:hover { transform: translateY(-6px); } .card-body { border-radius: inherit; } .card-title { color: var(--purple-light) !important; font-weight: 700; letter-spacing: .01em; } /* KPI numbers get the gradient-text treatment from metrics.html */ .stretch-card .card-body h3 { font-weight: 800; background: linear-gradient(135deg, var(--purple-light), var(--teal-bright)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; /* Never break a figure across two lines; shrink instead as it grows */ white-space: nowrap; font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem); line-height: 1.15; } /* Each KPI figure sits alone in a col-xl-5/col-xl-6, so it only gets half the card width and long values (e.g. "42583") wrap. Nothing is ever beside them — give the figure the full row. */ .stretch-card .card-body > .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; width: 100%; } /* Icons in the KPI tiles — round them off, they were bare squares */ .stretch-card .card-body > img { border-radius: 12px; padding: 4px; background: rgba(168,85,247,.12); border: 1px solid rgba(168,85,247,.22); } /* ── Entrance animations ─────────────────────────────────── */ /* Staggered purely by nth-child so no PHP/markup changes are needed, and it applies to every page using this template. */ .page-content > .row { animation: jbSlideUp .6s cubic-bezier(.25,.46,.45,.94) forwards; opacity: 0; transform: translateY(25px); } .page-content > .row:nth-of-type(1) { animation-delay: .10s; } .page-content > .row:nth-of-type(2) { animation-delay: .19s; } .page-content > .row:nth-of-type(3) { animation-delay: .28s; } .page-content > .row:nth-of-type(4) { animation-delay: .37s; } .page-content > .row:nth-of-type(n+5) { animation-delay: .46s; } @keyframes jbSlideUp { to { opacity: 1; transform: translateY(0); } } .hk-pg-header { animation: jbFadeIn .7s ease-in forwards; opacity: 0; } @keyframes jbFadeIn { to { opacity: 1; } } /* Respect reduced-motion: kill the background loop and entrances */ @media (prefers-reduced-motion: reduce) { body { animation: none; } .page-content > .row, .hk-pg-header { animation: none; opacity: 1; transform: none; } .card:hover { transform: none; } } /* ── Page header ─────────────────────────────────────────── */ .hk-pg-title { font-weight: 800; color: #fff; text-shadow: 0 0 18px rgba(255,255,255,.30), 0 2px 8px rgba(0,0,0,.60); } .hk-pg-title .feather-icon svg { color: var(--teal-bright); } /* Social icons in the header — circular, with the j0beats.uk hover */ .hk-pg-header a img { border-radius: 50%; transition: transform .3s cubic-bezier(.34,1.56,.64,1), filter .3s ease; } .hk-pg-header a:hover img { transform: translateY(-4px) scale(1.15) rotate(5deg); filter: brightness(1.2) drop-shadow(0 0 6px var(--glow-purple)); } /* ── Navbar ──────────────────────────────────────────────── */ .horizontal-menu .navbar, .navbar.top-navbar { background: rgba(10, 6, 26, .85) !important; backdrop-filter: blur(8px); border-bottom: 1px solid rgba(168,85,247,.25); box-shadow: 0 4px 20px rgba(0,0,0,.35); } .navbar-brand { font-weight: 800; letter-spacing: .01em; color: var(--pokemon-yellow) !important; text-shadow: 0 0 10px rgba(255,222,0,.35); } .navbar-brand span { color: var(--purple-light) !important; } /* ── Buttons ─────────────────────────────────────────────── */ .btn { border-radius: 999px !important; font-weight: 600; letter-spacing: .01em; transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, filter .2s ease; } .btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.1); } .btn:active:not(:disabled) { transform: translateY(0); } .btn-comp-purple:hover:not(:disabled) { box-shadow: 0 6px 18px var(--glow-purple); } .btn-comp-teal:hover:not(:disabled) { box-shadow: 0 6px 18px var(--glow-teal); } /* ── Form controls ───────────────────────────────────────── */ .form-control, .form-select { border-radius: 12px !important; background-color: rgba(255,255,255,.04) !important; border: 1px solid rgba(168,85,247,.25) !important; color: var(--light-text) !important; transition: border-color .2s ease, box-shadow .2s ease; } .form-control:focus, .form-select:focus { border-color: var(--purple-bright) !important; box-shadow: 0 0 0 3px rgba(168,85,247,.18) !important; } .form-control::placeholder { color: rgba(255,255,255,.35); } /* select2 — the player search dropdown */ .select2-container--default .select2-selection--single { border-radius: 12px !important; background: rgba(255,255,255,.04) !important; border: 1px solid rgba(168,85,247,.25) !important; height: auto !important; padding: .30rem .25rem; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--light-text) !important; } .select2-dropdown { border-radius: 14px !important; overflow: hidden; background: rgb(18,12,36) !important; border: 1px solid rgba(168,85,247,.35) !important; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--purple-deep) !important; } .select2-search__field { border-radius: 9px !important; background: rgba(255,255,255,.05) !important; border: 1px solid rgba(168,85,247,.25) !important; color: var(--light-text) !important; } /* flatpickr — date range pickers */ .flatpickr-calendar { border-radius: 16px !important; background: rgb(18,12,36) !important; border: 1px solid rgba(168,85,247,.35) !important; box-shadow: 0 12px 34px rgba(0,0,0,.5) !important; } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--purple-deep) !important; border-color: var(--purple-deep) !important; border-radius: 10px !important; } .flatpickr-day:hover { border-radius: 10px !important; } /* ── Tables ──────────────────────────────────────────────── */ .table { --bs-table-border-color: rgba(168,85,247,.14); border-collapse: separate; border-spacing: 0; } .table thead th { color: var(--purple-light) !important; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid rgba(168,85,247,.25) !important; background: transparent !important; } .table tbody td { border-color: rgba(255,255,255,.06) !important; vertical-align: middle; } /* Soften the striping — the theme's default banding reads as "blocky" */ .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(255,255,255,.022); background-color: rgba(255,255,255,.022) !important; } .table-hover > tbody > tr:hover > * { background-color: rgba(168,85,247,.09) !important; } /* Bordered tables lose their hard grid, keeping only soft separators */ .table-bordered > :not(caption) > * > * { border-width: 0 0 1px 0 !important; border-color: rgba(255,255,255,.06) !important; } /* Round the outer corners of table bodies */ .table-responsive { border-radius: 14px; } .table a { color: var(--teal-bright); text-decoration: none; font-weight: 600; transition: color .2s ease, text-shadow .2s ease; } .table a:hover { color: var(--streamer-pink); text-shadow: 0 0 8px rgba(245,111,173,.5); } /* Raid icons in the recent-raids table */ .table td img { border-radius: 10px !important; width: 30px; background: rgba(168,85,247,.12); padding: 3px; } /* DataTables chrome */ .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 9px !important; border: 1px solid transparent !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--purple-deep) !important; border-color: var(--purple-deep) !important; color: #fff !important; } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border-radius: 10px !important; background: rgba(255,255,255,.04) !important; border: 1px solid rgba(168,85,247,.25) !important; color: var(--light-text) !important; } /* ── Modals ──────────────────────────────────────────────── */ .modal-content { border-radius: 22px !important; overflow: hidden; backdrop-filter: blur(10px); } .modal-body a { color: var(--teal-bright); text-decoration: none; font-weight: 500; display: inline-block; padding: .12rem 0; transition: color .2s ease, transform .2s ease; } .modal-body a:hover { color: var(--streamer-pink); transform: translateX(3px); } .modal-backdrop.show { opacity: .7; } /* ── Scoped scrollbars (calc results, modal bodies) ──────── */ .table-responsive::-webkit-scrollbar, .modal-body::-webkit-scrollbar { width: 8px; height: 8px; } .table-responsive::-webkit-scrollbar-track, .modal-body::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 99px; } .table-responsive::-webkit-scrollbar-thumb, .modal-body::-webkit-scrollbar-thumb { background: rgba(168,85,247,.4); border-radius: 99px; } .table-responsive::-webkit-scrollbar-thumb:hover { background: rgba(168,85,247,.65); } /* ── Footer ──────────────────────────────────────────────── */ .footer { background: rgba(10, 12, 28, .85) !important; border-top: 2px solid var(--teal-bright) !important; backdrop-filter: blur(5px); } .footer a { color: var(--teal-bright); text-decoration: none; transition: color .2s ease; } .footer a:hover { color: var(--streamer-pink); } /* ── Responsive ──────────────────────────────────────────── */ @media (max-width: 768px) { .card { border-radius: 16px !important; } .pokeball-decoration { width: 300px; height: 300px; } .hk-pg-header span[style*="float:right"] { float: none !important; display: block; margin-bottom: .75rem; } }