/* ============================================================ AXI-VR — Core Stylesheet Theme: Futuristic esports · Crimson / Black / White ============================================================ */ /* ── Design Tokens ─────────────────────────────────────────── */ :root { /* Bootstrap overrides */ --bs-dark-rgb: 10, 10, 13; --bs-body-bg: #0a0a0d; --bs-body-bg-rgb: 10, 10, 13; --bs-body-color: #f5f6fa; --bs-border-color: rgba(255,255,255,0.12); --bs-body-color-rgb: 245, 246, 250; --bs-emphasis-color-rgb: 245, 246, 250; --bs-body-font-family: "Barlow", sans-serif; --bs-body-font-size: 18px; /* ── Foundation: Crimson / Black / White ── */ --m-bg: #0a0a0d; /* near-black ground */ --m-surface: #111117; /* card surface */ --m-surface-2: #17171f; /* raised surface */ --m-surface-hover: #202029; --m-nav: #08080b; /* darkest — nav / rails */ --m-border: rgba(255,255,255,0.07); --m-border-strong: rgba(255,255,255,0.15); /* Crimson — the single hot accent */ --m-crimson: #E11D3A; --m-crimson-bright: #FF3355; --m-crimson-dim: rgba(225,29,58,0.15); --m-crimson-glow: rgba(225,29,58,0.45); /* Legacy accent token names now alias crimson so every prior reference recolors */ --m-orange: #E11D3A; --m-orange-dim: rgba(225,29,58,0.15); --m-orange-glow: rgba(225,29,58,0.45); /* Legacy "blue" secondary → cool steel neutral (white / grey family) */ --m-blue: #464b57; --m-blue-dim: rgba(255,255,255,0.05); --m-text: #f5f6fa; --m-text-muted: #9aa0ad; --m-text-dim: #575c68; --m-radius: 10px; --m-radius-sm: 6px; --m-radius-lg: 16px; --m-transition: 0.2s ease; --m-nav-h: 64px; --m-subnav-h: 52px; } /* ── Fonts: Orbitron (futuristic display) + Barlow (body/UI) ──── Display = Orbitron drives the wordmark, headings, rank letters and stat numbers. Body/UI = Barlow (compact UI uses Barlow bold directly; Orbitron is too wide for it). */ @font-face { font-family: "Orbitron"; src: url("/fonts/Orbitron-Regular.ttf"); font-weight: 400; font-display: swap; } @font-face { font-family: "Orbitron"; src: url("/fonts/Orbitron-Medium.ttf"); font-weight: 500; font-display: swap; } @font-face { font-family: "Orbitron"; src: url("/fonts/Orbitron-SemiBold.ttf"); font-weight: 600; font-display: swap; } @font-face { font-family: "Orbitron"; src: url("/fonts/Orbitron-Bold.ttf"); font-weight: 700; font-display: swap; } @font-face { font-family: "Orbitron"; src: url("/fonts/Orbitron-ExtraBold.ttf"); font-weight: 800; font-display: swap; } @font-face { font-family: "Orbitron"; src: url("/fonts/Orbitron-Black.ttf"); font-weight: 900; font-display: swap; } @font-face { font-family: "Barlow"; src: url("/fonts/Barlow/Barlow-Regular.ttf"); font-weight: 400; font-display: swap; } @font-face { font-family: "Barlow"; src: url("/fonts/Barlow/Barlow-Medium.ttf"); font-weight: 500; font-display: swap; } @font-face { font-family: "Barlow"; src: url("/fonts/Barlow/Barlow-SemiBold.ttf"); font-weight: 600; font-display: swap; } @font-face { font-family: "Barlow"; src: url("/fonts/Barlow/Barlow-Bold.ttf"); font-weight: 700; font-display: swap; } @font-face { font-family: "Barlow"; src: url("/fonts/Barlow/Barlow-ExtraBold.ttf"); font-weight: 800; font-display: swap; } @font-face { font-family: "Nunito-Sans"; src: url("/fonts/Nunito_Sans/static/NunitoSans_7pt-Regular.ttf"); } /* The "Teko*" alias families are gone: every rule that used them now says Barlow with a real weight, so the stylesheet no longer declares one face while loading another. */ :root { --font-display: "Orbitron", "Barlow", system-ui, sans-serif; --font-body: "Barlow", system-ui, sans-serif; } /* ── Base ──────────────────────────────────────────────────── */ body { padding: 0; background-color: var(--m-bg) !important; color: var(--m-text) !important; overflow-x: hidden; } h1 { font-family: var(--font-display); font-weight: 800; color: var(--m-text); font-size: clamp(22px, 5.5vw, 52px); letter-spacing: 0.01em; text-transform: uppercase; } h2 { font-family: var(--font-display); font-weight: 700; color: var(--m-text); font-size: clamp(18px, 4.5vw, 40px); letter-spacing: 0.01em; text-transform: uppercase; } h3 { font-family: var(--font-display); font-weight: 600; color: var(--m-text); font-size: clamp(16px, 4vw, 32px); } h4 { font-family: "Barlow"; font-weight: 700; color: var(--m-text); font-size: clamp(16px, 4vw, 38px); } h5 { font-family: "Barlow"; font-weight: 700; color: var(--m-orange); font-size: clamp(16px, 4vw, 38px); } h6 { font-family: "Barlow"; font-weight: 700; color: var(--m-text); font-size: clamp(14px, 3vw, 24px); } h1 span, h2 span { color: var(--m-crimson); } p { font-family: "Barlow"; font-size: clamp(14px, 1.5vw, 16px); margin: 0; color: var(--m-text); line-height: 1.6; } a { text-decoration: none; color: inherit; } a:hover { text-decoration: none; color: var(--m-orange); } /* ── Scrollbar ─────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: var(--m-bg); } ::-webkit-scrollbar-thumb { background: rgba(225,29,58,0.3); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--m-orange); } /* ── Focus ─────────────────────────────────────────────────── */ a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--m-orange); outline-offset: 2px; } /* ── Top Navbar ────────────────────────────────────────────── */ /* ── Dropdown menu ─────────────────────────────────────────── */ /* Sign-in button in navbar */ /* ── Buttons (global) ──────────────────────────────────────── */ .btn { transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; font-family: "Barlow"; font-weight: 700; letter-spacing: 0.06em; } .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--m-orange); --bs-btn-border-color: var(--m-orange); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #ff3355; --bs-btn-hover-border-color: #ff3355; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--m-orange); --bs-btn-active-border-color: var(--m-orange); --bs-btn-disabled-color: var(--m-text-dim); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--m-border); --bs-gradient: none; font-family: "Barlow"; font-weight: 700; font-size: 18px; border-radius: 8px; } .btn-primary:hover { background-color: #ff3355 !important; border-color: #ff3355 !important; transform: translateY(-1px); box-shadow: 0 4px 16px var(--m-orange-glow); } .btn-secondary { --bs-btn-color: #cdd2db; --bs-btn-bg: var(--m-blue-dim); --bs-btn-border-color: var(--m-blue); --bs-btn-hover-color: #e7eaf0; --bs-btn-hover-bg: rgba(70,75,87,0.35); --bs-btn-hover-border-color: var(--m-blue); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--m-blue); --bs-btn-active-border-color: var(--m-blue); --bs-btn-disabled-color: var(--m-text-dim); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--m-border); --bs-gradient: none; font-family: "Barlow"; font-weight: 700; font-size: 18px; border-radius: 8px; } .btn-secondary:hover { background-color: rgba(70,75,87,0.35) !important; border-color: var(--m-blue) !important; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(70,75,87,0.3); } .btn-success { font-size: 1.1rem; padding: 0.6rem 1.2rem; border-radius: 8px; } /* Premium button depth + shine sweep (all primary/secondary CTAs) */ .btn-primary { background-image: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0) 52%); } .btn-primary, .btn-secondary, .btn-success { position: relative; overflow: hidden; } .btn-primary::after, .btn-secondary::after { content: ""; position: absolute; top: 0; left: 0; width: 45%; height: 100%; pointer-events: none; z-index: 1; background: linear-gradient(115deg, transparent, rgba(255,255,255,.38), transparent); transform: translateX(-260%) skewX(-18deg); transition: transform .6s ease; } .btn-primary:hover::after, .btn-secondary:hover::after { transform: translateX(320%) skewX(-18deg); } .btn-primary > *, .btn-secondary > * { position: relative; z-index: 2; } @media (prefers-reduced-motion: reduce) { .btn-primary::after, .btn-secondary::after { transition: none; } } /* ── Forms ─────────────────────────────────────────────────── */ .form-control { font-family: "Barlow"; padding: 0.75rem; font-size: clamp(14px, 2vw, 18px); background-color: rgba(255,255,255,0.05) !important; border: 1px solid var(--m-border-strong) !important; border-radius: var(--m-radius-sm) !important; color: var(--m-text) !important; transition: border-color var(--m-transition), box-shadow var(--m-transition); } .form-control:focus { background-color: rgba(255,255,255,0.07) !important; border-color: var(--m-orange) !important; box-shadow: 0 0 0 3px var(--m-orange-dim) !important; color: var(--m-text) !important; } .form-control::placeholder { color: var(--m-text-dim); font-size: 14px; opacity: 1; } label { margin-bottom: 0.5rem; } .form-group { margin-bottom: 0; } .form-select { background-color: rgba(255,255,255,0.05) !important; color: var(--m-text) !important; border: 1px solid var(--m-border-strong) !important; border-radius: var(--m-radius-sm) !important; transition: border-color var(--m-transition), box-shadow var(--m-transition); } .form-select:focus { border-color: var(--m-orange) !important; box-shadow: 0 0 0 3px var(--m-orange-dim) !important; background-color: rgba(255,255,255,0.07) !important; color: var(--m-text) !important; } .form-select option { background-color: var(--m-surface-2); color: var(--m-text); } /* ── Modal ─────────────────────────────────────────────────── */ /* ── Card / Panel ──────────────────────────────────────────── */ /* ─── body-padding handled by sidenav media queries below ─── */ /* ══════════════════════════════════════════════════════════════ SIDE NAVIGATION — FACEIT-style left drawer Desktop (≥992px): always-visible fixed sidebar (220px) Mobile (<992px): slide-in drawer + thin topbar (56px) ══════════════════════════════════════════════════════════════ */ :root { --sidenav-w: 220px; --sidenav-topbar-h: 56px; } /* ── Sidebar shell ─────────────────────────────────────────── */ /* ── Logo strip ────────────────────────────────────────────── */ /* Sidebar user block (logged-in greeting) */ /* Account menu (moved here from the old top-right dropdown) — overlay so it doesn't disturb the flex sidebar layout */ /* ── Nav menu ──────────────────────────────────────────────── */ /* ── Dropdown children ─────────────────────────────────────── */ /* Premium nav: glowing active accent bar + icon polish */ /* ── Mobile thin topbar ────────────────────────────────────── */ /* ── User top-right menu ───────────────────────────────────── */ /* On mobile, show truncated name in button */ /* ── Backdrop ──────────────────────────────────────────────── */ /* ── Responsive ────────────────────────────────────────────── */ @media (max-width: 991.98px) { footer { margin-left: 0 !important; } } @media (min-width: 992px) { footer { margin-left: 0; } /* Game subnav now sticks at top: 0 — no main navbar above it */ /* Hide old fixed-top main navbar if present (safety) */ } /* ── Tables ────────────────────────────────────────────────── */ .table { color: var(--m-text) !important; --bs-table-bg: transparent !important; --bs-table-striped-bg: rgba(255,255,255,0.02) !important; --bs-table-hover-bg: rgba(225,29,58,0.06) !important; } thead { font-size: clamp(12px, 2.5vw, 22px); border-bottom: 1px solid var(--m-border-strong); } thead th { font-size: 11px !important; letter-spacing: 0.1em !important; text-transform: uppercase; color: var(--m-text-muted) !important; } tr { border-bottom: 1px solid var(--m-border); } td, th { font-size: clamp(14px, 2vw, 22px); font-weight: normal; } .table > :not(caption) > * > * { padding: 0.35rem 0.65rem; color: var(--m-text); background-color: transparent; } /* Premium table polish: smooth row-hover + subtle depth under sticky headers */ tbody tr > td { transition: background-color 0.15s ease; } @media (prefers-reduced-motion: reduce) { tbody tr > td { transition: none; } } /* ── Utility ───────────────────────────────────────────────── */ /* Section layout helpers */ /* ── Social icon base ──────────────────────────────────────── */ /* ── Section divider header ────────────────────────────────── */ /* ── Footer ────────────────────────────────────────────────── */ footer { background-color: var(--m-nav) !important; border-top: 1px solid var(--m-border-strong) !important; padding: 12px 32px !important; font-size: 0.75rem; letter-spacing: 0.07em; } /* ── Pagination ────────────────────────────────────────────── */ /* ── Tabs ──────────────────────────────────────────────────── */ /* ── Badges ────────────────────────────────────────────────── */ .badge { border-radius: var(--m-radius-sm) !important; } /* ── Players list / ladder picker ──────────────────────────── */ /* ── Standings scroll container ────────────────────────────── */ /* ── Rank palette (S / A / B / C / D) — crimson-forward, drives the angular rank plate + cell wash. Rows carry data-div="s|a|b|c|d"; unranked rows use the neutral defaults on .team-card-cell below. --tier-field: cell wash · --tier-accent: plate colour · --tier-glow · --tier-ink */ /* Standings card wrapper */ /* Standings controls bar */ /* Rank badge (legacy, kept for other uses) */ /* ── Rank plate — angular crimson badge holding the ladder position, tinted per rank ── */ /* ── Reusable letter-rank badge (S/A/B/C/D) — angular crimson-forward chip ── Used across standings, team/player/match cards and rosters via .rk-{letter}. Sized in em, so a bigger font-size scales the whole badge (logo placeholders). */ .rank-badge-letter { --rk: var(--m-text-dim); --rk-ink: #f5f6fa; display: inline-flex; align-items: center; justify-content: center; width: 1.9em; height: 1.9em; flex-shrink: 0; font-family: var(--font-display); font-weight: 800; font-size: 14px; line-height: 1; color: var(--rk-ink); background: var(--rk); clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%); } .rank-badge-letter.rk-s { --rk:#ff3355; --rk-ink:#fff; box-shadow: 0 0 12px var(--m-crimson-glow); } .rank-badge-letter.rk-a { --rk:#e11d3a; --rk-ink:#fff; } .rank-badge-letter.rk-b { --rk:#e7eaf0; --rk-ink:#0a0a0d; } .rank-badge-letter.rk-c { --rk:#9aa0ad; --rk-ink:#0a0a0d; } .rank-badge-letter.rk-d { --rk:#626775; --rk-ink:#f5f6fa; } .rank-badge-letter.rk-unranked { --rk:transparent; --rk-ink:var(--m-text-dim); clip-path:none; border-radius:6px; border:1px dashed var(--m-border-strong); font-weight:600; } /* emblem carries its own colour + glow, so keep the cell wash minimal on every tier */ /* ── Team identity card (rank plate: metallic frame + textured tier field) ──── */ /* Tier field: diagonal sheen + glow behind the badge, fading to transparent before the stats */ /* Region bars */ /* Highlight rows */ /* ── Game hero header (blurred banner) ────────────────────── */ /* Blurred background layer */ /* Dark gradient overlay — heavier at bottom so subnav reads clearly */ /* Centered sharp logo image on top */ /* Legacy .header kept for home pages that still use it */ /* ── League subnav ─────────────────────────────────────────── */ /* ── Partners section ──────────────────────────────────────── */ /* Partner logos ship only as dark artwork (no light "-dark" variant exists), so normalise them to muted-white silhouettes on the dark section and reveal the original artwork on hover. */ /* ── HOME PAGE — Hero ──────────────────────────────────────── */ /* ── HOME PAGE — Games grid ────────────────────────────────── */ /* ── Premium polish: ambient light, sheen sweep, depth ───────── */ /* Legacy game tile (img-thumbnail) */ /* ── HOME PAGE — About ─────────────────────────────────────── */ /* ── ABOUT US / Static Content ─────────────────────────────── */ /* ── Contact page ──────────────────────────────────────────── */ /* ── Leagues list page ─────────────────────────────────────── */ /* ── News ──────────────────────────────────────────────────── */ .news { padding: 16px 18px; border: 1px solid var(--m-border); border-left: 3px solid transparent; border-radius: var(--m-radius); min-width: 0; background: var(--m-surface); transition: all var(--m-transition); } .news:hover { border-color: var(--m-border-strong); border-left-color: var(--m-orange); background: var(--m-surface-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.25); } .news-header { cursor: pointer; margin-bottom: 0.5rem; } .news-header:hover { text-decoration: underline; color: var(--m-orange); } .news-header h3 { color: var(--m-text) !important; font-size: clamp(15px, 1.8vw, 18px); } .date-author { display: flex; gap: 0.3rem; margin-top: -0.4rem; margin-bottom: 0.7rem; } .date-author p { font-size: 14px; color: var(--m-text-muted); } .news-content-preview { word-wrap: break-word; font-size: 14px; color: var(--m-text-muted); font-family: "Barlow"; } .rules-danger-banner { background-color: #b71c1c; color: #fff; padding: 14px 20px; border-radius: var(--m-radius-sm); margin: 10px 0; border-left: 4px solid #ff5252; font-size: 0.9rem; } /* ── Matches / VOD cards ───────────────────────────────────── */ /* Match scores */ .match-wrapper { display: block; color: inherit; text-decoration: none; } .match-wrapper:hover { text-decoration: none; color: inherit; opacity: 0.85; } /* ── Team logo / flag ──────────────────────────────────────── */ /* ── MATCH TABLE ───────────────────────────────────────────── */ /* ── TEAM PAGE ─────────────────────────────────────────────── */ .player_container_main { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; min-width: 100px; max-width: 130px; text-align: center; } /* Admin panel */ /* ── MATCH PAGE ────────────────────────────────────────────── */ .match-section-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--m-text-dim); margin: 1.75rem 0 0.6rem; display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--m-border); padding-bottom: 0.4rem; } .match-page-teams-wrapper { display: grid; grid-template-columns: 1fr 1fr; margin: 1.25rem 0; border-radius: var(--m-radius); overflow: hidden; border: 1px solid var(--m-border-strong); } .match-page-teams { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; } /* Face-off: home hugs the centre divider from the left, away from the right */ .match-page-teams.team-home { background: linear-gradient(135deg, rgba(225,29,58,0.07) 0%, rgba(10,10,13,0.6) 60%); border-right: 1px solid var(--m-border); align-items: flex-end; text-align: right; } .match-page-teams.team-away { background: linear-gradient(225deg, rgba(70,75,87,0.09) 0%, rgba(10,10,13,0.6) 60%); align-items: flex-start; } .match-page-rosters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.25rem; width: 100%; } .match-page-teams.team-home .match-page-rosters { flex-direction: row-reverse; justify-content: flex-start; } .match-page-teams.team-away .match-page-rosters { justify-content: flex-start; } .match-page-rosters .player_container_main { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 56px; max-width: 72px; } /* Uniform roster player card (home & away identical): rank → picture → name → flag → stream */ .match-page-rosters .mp-player { display: flex; flex-direction: column; align-items: center; gap: 5px; text-decoration: none; color: inherit; text-align: center; width: 100%; } .mp-player-name { font-size: 11px; color: var(--m-text-muted); max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .mp-player:hover .mp-player-name { color: var(--m-text); } /* Kept per review (flagged uncertain, not removed): the bare .home/.away rules. Their parent-class siblings were removed as dead. */ .match-summary-info-team.home { color: rgba(225,29,58,0.8); } .match-summary-info-team.away { color: rgba(70,75,87,0.9); } .team-maps-stats-side.home .teams_stats_maps_current_season { color: rgba(225,29,58,0.7); } .team-maps-stats-side.away .teams_stats_maps_current_season { color: rgba(70,75,87,0.85); } /* ── vrml_table ────────────────────────────────────────────── */ .vrml_table_container { margin: 0 0 1rem; overflow-x: auto; } .vrml_table_header th { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--m-text-dim); font-weight: 600; border-bottom: 1px solid var(--m-border-strong); } /* ── PLAYER PROFILE ────────────────────────────────────────── */ /* ── HONOURS ───────────────────────────────────────────────── */ /* ── TOURNAMENTS / CHAMPIONSHIPS ───────────────────────────── */ .championship-list-element { display: flex; border-radius: var(--m-radius); overflow: hidden; border: 1px solid var(--m-border); background: var(--m-surface); margin-bottom: 12px; transition: all var(--m-transition); } .championship-list-element:hover { border-color: var(--m-orange-dim); background: var(--m-surface-hover); transform: translateX(4px); } /* ── PROFILE / MY PROFILE ──────────────────────────────────── */ /* ── ERROR PAGES ───────────────────────────────────────────── */ /* ── Misc layout ───────────────────────────────────────────── */ /* ── Glyphicon compat ──────────────────────────────────────── */ /* ── Animations ────────────────────────────────────────────── */ /* ── Blobs ─────────────────────────────────────────────────── */ /* ── iframe ────────────────────────────────────────────────── */ iframe { width: 100%; height: 100%; } /* ──────────────────────────────────────────────────────────── RESPONSIVE ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { :root { --m-nav-h: 58px; --m-subnav-h: 46px; --bs-body-font-size: clamp(14px, 2vw, 18.3px); } body { overflow-x: hidden; } thead { font-size: clamp(12px, 2.5vw, 22px); } /* Star banner scales with the cell via .team-card-cell::before (cover) — no row-level override needed */ .match-page-teams-wrapper { grid-template-columns: 1fr; } .match-page-teams { padding: 1rem; } .match-page-teams.team-home, .match-page-teams.team-away { align-items: flex-start; text-align: left; } .match-page-teams.team-away { border-top: 1px solid var(--m-border); } .match-page-teams.team-home .match-page-rosters { flex-direction: row; justify-content: flex-start; } footer { padding: 24px 18px 16px !important; } } @media (max-width: 480px) { :root { --m-nav-h: 54px; } .match-page-rosters .player_container_main { min-width: 44px; max-width: 56px; } .match-section-label { font-size: 0.65rem; margin: 1.25rem 0 0.5rem; } } /* ── Tournaments / Championships page ──────────────────────── */ .championship-list-element { display: flex; border-radius: var(--m-radius); overflow: hidden; border: 1px solid var(--m-border); background: var(--m-surface); transition: all var(--m-transition); } .championship-list-element:hover { border-color: var(--m-orange-dim); background: var(--m-surface-hover); transform: translateX(4px); } .championship-list-element > a { display: flex; flex-direction: column; width: 100%; padding: 12px 20px; text-decoration: none; color: inherit; } .championship-list-element table { width: 100%; border-collapse: collapse; margin: 0; } .championship-list-element table tr, .championship-list-element table td { border: none; padding: 0; background: transparent; vertical-align: middle; } /* ── Merch Store — partner storefronts as product-card grids ─── */ .merch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 18px; } .merch-card { display: block; border-radius: var(--m-radius); overflow: hidden; background: var(--m-surface); border: 1px solid var(--m-border); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .merch-card:hover { transform: translateY(-5px); border-color: var(--m-orange); box-shadow: 0 14px 32px rgba(0,0,0,.5), 0 0 18px var(--m-orange-glow); } /* ── Donations table ────────────────────────────────────────── */ /* ── Register page ──────────────────────────────────────────── */ /* ── Stats page tables ──────────────────────────────────────── */ /* ── Casters / Players list roles ───────────────────────────── */ /* ── Game h5 used as section labels ─────────────────────────── */ /* ── Twitch live / vod embed ───────────────────────────────── */ /* ── My Profile / My Teams ──────────────────────────────────── */ .profile-section-card { position: relative; background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius); padding: clamp(16px, 3vw, 28px); margin-bottom: 20px; } .profile-section-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--m-crimson), transparent 60%); border-radius: var(--m-radius) var(--m-radius) 0 0; } /* ── News post (single post view) ───────────────────────────── */ /* ── Careers / Volunteers page ──────────────────────────────── */ /* ── Sponsors page ──────────────────────────────────────────── */ /* ── Terms of Use ───────────────────────────────────────────── */ /* ── Match page game dev section ────────────────────────────── */ /* ============================================================ ANIMATIONS & MICRO-INTERACTIONS Powers vrml-animations.js — all visual motion lives here. Uses GPU-composited properties only (transform, opacity) so nothing triggers layout reflow. ============================================================ */ /* ── Page enter ────────────────────────────────────────────── */ /* ── Scroll reveal ─────────────────────────────────────────── */ [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } /* Sideways reveal variant for league list rows */ /* ── Navbar shrink on scroll ───────────────────────────────── */ /* ── Ripple on buttons ─────────────────────────────────────── */ /* ── Dropdown slide-in ─────────────────────────────────────── */ /* ── Subnav sliding indicator ──────────────────────────────── */ /* ── Main navbar hover bar ─────────────────────────────────── */ /* ── Table row stagger ─────────────────────────────────────── */ /* ── Animated stat numbers (hero) ──────────────────────────── */ /* ── Pulse on live badge ───────────────────────────────────── */ @keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); } } /* ── Orange glow pulse on section header accent ─────────────── */ /* ── Card image zoom on hover ──────────────────────────────── */ .news img { transition: transform 0.35s ease, filter 0.35s ease; } .news:hover img { transform: scale(1.04); } /* ── Table row orange left-bar on hover ─────────────────────── */ /* ── Standings row bar on hover ─────────────────────────────── */ /* ── .body card entrance (used when .body is the root card) ─── */ /* ── Hero text cascade ─────────────────────────────────────── */ /* ── Game tile shimmer on hover ─────────────────────────────── */ /* ── Button press micro-animation ───────────────────────────── */ .btn:active { transform: translateY(1px) scale(0.98) !important; transition: transform 0.08s ease !important; } /* ── Link underline slide-in ────────────────────────────────── */ /* nav-link and dropdown-item have their own hover backgrounds — don't add underline */ /* ── Focus ring animation ───────────────────────────────────── */ @keyframes focusRing { 0% { outline-offset: 0px; } 50% { outline-offset: 4px; } 100% { outline-offset: 2px; } } *:focus-visible { animation: focusRing 0.3s ease forwards; } /* ── Skeleton loader pulse (enhanced) ──────────────────────── */ /* ── Mobile: disable tilt & parallax via CSS perspective ───── (JS already checks pointer type but this is a safety net) */ @media (pointer: coarse) { [data-reveal] { transition-duration: 0.35s; } } /* ── Reduced motion: respect prefers-reduced-motion ─────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } } /* ════════════════════════════════════════════════════════════ NEW FEATURE STYLES ════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ PLAYER IDENTITY CARD — flagship profile hero Reuses the rank-tier palette (data-div). --pc-accent / --pc-glow. ═══════════════════════════════════════════════════════════════ */ /* Avatar + tier ring (this ring is the future cosmetic-frame slot) */ /* Stat tiles */ .stat-tile { min-width: 88px; text-align: center; padding: 13px 15px; background: rgba(255,255,255,.04); border: 1px solid var(--m-border); border-radius: var(--m-radius); position: relative; overflow: hidden; transition: border-color .2s ease, transform .2s ease; } .stat-tile::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--pc-accent); opacity: .55; } .stat-tile:hover { border-color: var(--pc-accent); transform: translateY(-2px); } .stat-tile-num { font-family: var(--font-display); font-size: 25px; color: var(--m-text); line-height: 1; } .stat-tile-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--m-text-dim); margin-top: 6px; } /* Footer chips */ .player-card-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--m-text-muted); text-decoration: none; padding: 4px 12px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid var(--m-border); transition: color .15s ease, border-color .15s ease; } a.player-card-chip:hover { color: var(--pc-accent); border-color: var(--pc-accent); } .player-card-chip i { opacity: .85; } @media (max-width: 680px) { .stat-tile { flex: 1; min-width: 0; } } @media (prefers-reduced-motion: reduce) { .stat-tile { transition: none; } } /* Profile section headings — premium accent-bar (scoped to the player profile) */ /* ═══════════════════════════════════════════════════════════════ TEAM IDENTITY CARD — flagship team-page hero (reuses tier tokens + .stat-tile) ═══════════════════════════════════════════════════════════════ */ .team-card { position: relative; border-radius: var(--m-radius-lg); overflow: hidden; border: 1px solid var(--m-border-strong); margin-bottom: 28px; background: linear-gradient(135deg, var(--m-surface) 0%, var(--m-bg) 100%); --pc-accent: var(--m-text-dim); --pc-glow: rgba(225,29,58,.30); } .team-card[data-div="s"] { --pc-accent:#ff3355; --pc-glow:rgba(255,51,85,.50); } .team-card[data-div="a"] { --pc-accent:#e11d3a; --pc-glow:rgba(225,29,58,.45); } .team-card[data-div="b"] { --pc-accent:#e7eaf0; --pc-glow:rgba(231,234,240,.38); } .team-card[data-div="c"] { --pc-accent:#9aa0ad; --pc-glow:rgba(154,160,173,.36); } .team-card[data-div="d"] { --pc-accent:#626775; --pc-glow:rgba(98,103,117,.36); } .team-card::before { /* tier accent line */ content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:3; background: linear-gradient(to right, var(--pc-accent), transparent 55%); } /* Fanart banner background */ .team-card-glow { position:absolute; top:-45%; left:-8%; width:55%; height:190%; z-index:0; background: radial-gradient(closest-side, var(--pc-glow), transparent 70%); filter: blur(34px); opacity:.75; pointer-events:none; } .team-card-body { position:relative; z-index:2; display:flex; align-items:flex-start; gap:24px; padding:26px 28px; flex-wrap:wrap; } .team-card-logo-wrap { position:relative; flex-shrink:0; width:112px; height:112px; } .team-card-logo { width:112px; height:112px; border-radius:16px; object-fit:cover; display:block; background:var(--m-surface-2); border:3px solid var(--pc-accent); box-shadow:0 0 22px var(--pc-glow), inset 0 0 0 2px rgba(0,0,0,.3); } .team-card-identity { flex:1 1 260px; min-width:220px; } .team-card-name-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .team-card-name { font-family:var(--font-display); font-size:clamp(28px,4.4vw,46px) !important; color:var(--m-text) !important; margin:0 !important; line-height:1 !important; letter-spacing:.01em; text-shadow:0 0 26px var(--pc-glow); } .team-card-meta { display:flex; align-items:center; gap:18px; margin-top:11px; flex-wrap:wrap; color:var(--m-text-muted); font-size:14px; } .team-card-meta i { color:var(--pc-accent); margin-right:6px; } .team-card-stats { display:flex; gap:12px; flex-shrink:0; flex-wrap:wrap; margin-left:auto; } @media (max-width:760px) { .team-card-body { gap:16px; padding:20px; } .team-card-stats { width:100%; margin-left:0; justify-content:space-between; } .team-card-stats .stat-tile { flex:1; min-width:0; } .team-card-logo-wrap, .team-card-logo { width:88px; height:88px; } } /* ═══════════════════════════════════════════════════════════════ COSMETIC FRAMES — emblem art frames the avatar/logo for tiers that own one. Add TWO lines per tier as each emblem PNG is exported (set --pc-frame, then the media-fit rule). Tiers without an emblem keep their CSS tier ring. Tunables: --pc-frame-inset (frame size/overflow) + media width/offset (%). ═══════════════════════════════════════════════════════════════ */ .team-card-logo-wrap::after { content: ""; position: absolute; inset: var(--pc-frame-inset, -16%); z-index: 3; pointer-events: none; background: var(--pc-frame, none) center / contain no-repeat; filter: drop-shadow(0 2px 7px rgba(0,0,0,.5)); } /* Per-tier emblem frames. Each tier sets its art + hole fit; the avatar/logo drops its CSS ring and sits inside the frame's hole. Tune --pc-hole (size), --pc-hole-x / --pc-hole-y (position) and --pc-frame-inset (frame scale). */ /* Letter-rank identity now carries the badge/crimson accent directly — no image emblem frames. (Legacy per-tier PNG frames removed with the crimson rebrand.) */ /* Shared: any framed tier repositions its avatar/logo into the hole */ .team-card[data-div*="master"] .team-card-logo, .team-card[data-div*="diamond"] .team-card-logo, .team-card[data-div*="gold"] .team-card-logo, .team-card[data-div*="silver"] .team-card-logo, .team-card[data-div*="bronze"] .team-card-logo { position: absolute; border: none; box-shadow: none; border-radius: 50%; width: var(--pc-hole, 40%); height: var(--pc-hole, 40%); top: var(--pc-hole-y, 30%); left: var(--pc-hole-x, 30%); } /* Shared: the frame carries its own ring, so hide the small corner tier badge */ /* ═══════════════════════════════════════════════════════════════ HOVER CARDS — compact identity preview on hover (reuses tier tokens) ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ LEGACY ARCHIVE PAGES — shared uplift for hand-authored championship / tournament archives. Scoped with :is() to the three legacy wrappers so modern pages are never touched. Lifts all ~44 archives at once. ═══════════════════════════════════════════════════════════════ */ /* Poster */ /* Section titles */ /* Region tabs → premium segmented control */ /* Prize / format tables */ /* Sponsor logos */ /* Tournament promo banner (uses .banners-left / #TournamentImgNode, not .paragraph.poster) */ /* ═══════════════════════════════════════════════════════════════ GLOBAL USER PROFILE (/Users/{id}) — cross-game identity Hero reuses the .player-card system (brand-orange accent, no tier). ═══════════════════════════════════════════════════════════════ */ /* Per-game cards (the .other-game-title blocks become cards, no markup change) */ /* Division star badges: transparent emblem, no flag-style box, larger */ /* Admin sub-titles → accent-bar headings */ /* ═══════════════════════════════════════════════════════════════ HONOURS — champions showcase (gold hero + regional winner cards) ═══════════════════════════════════════════════════════════════ */ .honours-hero-wrap { margin: 18px 0 40px; display: grid; gap: 20px; } /* Champion hero — gold */ .champion-card { position: relative; text-align: center; overflow: hidden; background: linear-gradient(160deg, rgba(240,193,75,.12) 0%, var(--m-surface) 55%); border: 1px solid rgba(240,193,75,.4); border-radius: var(--m-radius-lg); padding: 34px 24px 26px; } .champion-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, transparent, #f0c14b, transparent); } .champion-glow { position: absolute; top: -30%; left: 50%; transform: translateX(-50%); width: 70%; height: 130%; background: radial-gradient(closest-side, rgba(240,193,75,.28), transparent 70%); filter: blur(32px); pointer-events: none; } .champion-crown { position: relative; z-index: 1; font-size: 34px; color: #f0c14b; filter: drop-shadow(0 0 14px rgba(240,193,75,.6)); } .champion-label { position: relative; z-index: 1; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em; color: #f0c14b; font-size: 14px; margin-top: 6px; } .champion-team { position: relative; z-index: 1; display: inline-flex; flex-direction: column; align-items: center; gap: 12px; margin: 14px 0 4px; text-decoration: none; } .champion-logo { position: relative; width: 88px; height: 88px; margin: 26px 0; border-radius: 50%; background-size: cover; background-position: center; background-color: var(--m-surface-2); border: none; box-shadow: 0 0 20px rgba(240,193,75,.45); } /* Season champion wears a prestige gold ring */ .champion-logo::after { content: ""; position: absolute; inset: -8px; z-index: 2; pointer-events: none; border-radius: 50%; border: 2px solid rgba(240,193,75,.55); box-shadow: 0 0 20px rgba(240,193,75,.4); } .champion-name { font-family: var(--font-display); font-size: clamp(28px, 5vw, 44px); color: var(--m-text); line-height: 1.05; text-shadow: 0 0 24px rgba(240,193,75,.4); } .champion-team:hover .champion-name { color: #f0c14b; } .champion-adversaries { position: relative; z-index: 1; margin-top: 16px; } .champion-adversaries .adv-label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--m-text-dim); } .adv-list { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 9px; } .adv-item { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--m-text-muted); background: rgba(255,255,255,.04); border: 1px solid var(--m-border); padding: 6px 13px; border-radius: 20px; font-size: 14px; transition: color .15s ease, border-color .15s ease; } .adv-item:hover { color: var(--m-text); } .adv-logo { width: 24px; height: 24px; border-radius: 50%; background-size: cover; background-color: var(--m-surface-2); flex-shrink: 0; border: 2px solid var(--m-border-strong); } .adv-silver { border-color: rgba(195,204,214,.35); } .adv-silver .adv-logo { border-color: #c3ccd6; } .adv-bronze { border-color: rgba(232,145,47,.35); } .adv-bronze .adv-logo { border-color: #e8912f; } /* Regional winner cards */ .region-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .region-card { display: block; text-decoration: none; background: var(--m-surface); border: 1px solid var(--m-border-strong); border-radius: var(--m-radius); padding: 18px; position: relative; overflow: hidden; transition: border-color .2s ease, transform .2s ease; } .region-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--m-orange); opacity: .55; } .region-card:hover { border-color: var(--m-orange); transform: translateY(-3px); } .region-name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--m-orange); font-size: 13px; margin-bottom: 12px; } .region-winner { display: flex; align-items: center; gap: 12px; } .region-logo { width: 48px; height: 48px; border-radius: 50%; background-size: cover; background-position: center; background-color: var(--m-surface-2); border: 2px solid var(--m-orange); flex-shrink: 0; } .region-team { font-family: var(--font-display); font-size: 20px; color: var(--m-text); } .region-card:hover .region-team { color: var(--m-orange); } .region-runners { margin-top: 11px; display: flex; gap: 8px; flex-wrap: wrap; } .region-runner { font-size: 12px; color: var(--m-text-dim); background: rgba(255,255,255,.03); border: 1px solid var(--m-border); padding: 2px 9px; border-radius: 12px; } /* Past champions table */ /* ═══ STATS — overview tiles + season-growth bar chart (self-contained) ═══ */ /* ═══ LEAGUES — premium game-card grid (matches homepage tiles) ═══ */ .leagues .leagues-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin-top: 18px; } .league-card { display: block; text-decoration: none; border-radius: var(--m-radius); overflow: hidden; background: var(--m-surface); border: 1px solid var(--m-border); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .league-card:hover { transform: translateY(-6px); border-color: var(--m-orange); box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 20px var(--m-orange-glow); text-decoration: none; } .league-card-art { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--m-surface-2); } .league-card-art > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; } .league-card:hover .league-card-art > img { transform: scale(1.07); } .league-card-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px 14px 12px; background: linear-gradient(to top, rgba(10,10,13,.92) 8%, transparent 58%); } .league-card-name { font-family: var(--font-display); font-size: 20px; color: #fff; line-height: 1.1; text-shadow: 0 2px 8px rgba(0,0,0,.8); } .league-card-season { font-family: var(--font-display); font-size: 12px; color: var(--m-orange); letter-spacing: .04em; margin-top: 3px; } .league-card-dates { padding: 9px 14px; font-size: 11px; color: var(--m-text-dim); border-top: 1px solid var(--m-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ═══ EMPTY STATES — one styled component; existing classes opt in ═══ */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; padding: 30px 20px; margin: 8px 0; background: var(--m-surface); border: 1px dashed var(--m-border-strong); border-radius: var(--m-radius-lg); color: var(--m-text-muted); font-size: 14px; font-style: normal; } .empty-state::before { content: "\f01c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 26px; color: var(--m-text-dim); opacity: .6; } .empty-state strong { color: var(--m-text); } /* ═══ AVATAR STACK — reusable overlapping avatars + "+N" ═══ */ /* ── Recent form — W/L/T momentum dots (team card) ── */ .form-dot { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 11px; font-weight: 700; color: #fff; line-height: 1; } .form-dot.form-W { background: linear-gradient(135deg, #34d17a, #1f9e57); box-shadow: 0 0 8px rgba(52,209,122,.35); } .form-dot.form-L { background: linear-gradient(135deg, #f2685f, #c23b32); } .form-dot.form-T { background: rgba(255,255,255,.10); color: var(--m-text-muted); } /* ═══ MATCH CARD — live countdown for upcoming matches ═══ */ .match-countdown { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-family: var(--font-display); font-size: 12px; letter-spacing: .04em; color: var(--m-orange); background: var(--m-orange-dim); border: 1px solid rgba(225,29,58,.3); border-radius: 6px; padding: 2px 8px; } .match-countdown:empty { display: none; } .match-countdown::before { content: "\f017"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; opacity: .85; } .match-countdown.live { color: #f87171; background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.4); } .match-countdown.live::before { content: "\f111"; animation: livePulse 1.2s infinite; } @keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .match-wrapper { transition: transform .18s ease, box-shadow .18s ease; } .match-wrapper:hover { transform: translateY(-3px); } /* ═══ CONNOISSEURS — leaderboard rows with rank medals (EGA-inspired) ═══ */ /* Honorable-mention logo in player lists (was unconstrained → oversized) */ /* ═══════════════════════════════════════════════════════════════ MY PROFILE — premium settings dashboard (hero + section cards) ═══════════════════════════════════════════════════════════════ */ .profile-card-title { font-family: var(--font-display); color: var(--m-text); text-transform: uppercase; letter-spacing: .06em; font-size: clamp(15px, 2.4vw, 20px); margin: 0 0 20px; padding-left: 14px; position: relative; display: flex; align-items: center; gap: 10px; } .profile-card-title::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 7px; height: 74%; background: var(--m-crimson); box-shadow: 0 0 9px var(--m-crimson-glow); clip-path: polygon(0 0, 100% 0, 100% 68%, 50% 100%, 0 68%); } .profile-card-title i { color: var(--m-orange); font-size: .8em; } /* ═══════════════════════════════════════════════════════════════ MY TEAMS — premium team-management cards (CSS-only; markup unchanged) ═══════════════════════════════════════════════════════════════ */ /* The team block → identity card */ /* External "view team" link → round icon button, top-right */ /* Main team logo → tier ring */ /* Team name — display font; owner input looks like a title until focused */ /* Flag rows → toggle panels */ /* Tournament participation panel */ /* Availability */ /* Discord role management */ /* Roster table */ /* Substitute-only view keeps the table styling it already inherits */ /* ═══════════════════════════════════════════════════════════════ MATCH PAGE — VS hero scoreboard (home | score/versus | away) ═══════════════════════════════════════════════════════════════ */ .match-hero { position: relative; overflow: hidden; margin: 20px 0 10px; border-radius: var(--m-radius-lg); border: 1px solid var(--m-border-strong); background: linear-gradient(120deg, rgba(225,29,58,.07) 0%, var(--m-surface) 40%, var(--m-surface) 60%, rgba(70,75,87,.10) 100%); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 28px 22px; } .match-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2; background: linear-gradient(to right, var(--m-orange), transparent 45%, var(--m-blue)); } /* Each side is a horizontal face-off: logo hugs the centre, the team's name → division → rank cascade outward (descending emphasis). */ .match-hero-side { display: flex; align-items: center; gap: 20px; min-width: 0; position: relative; z-index: 1; --pc-accent: var(--m-text-dim); --pc-glow: rgba(225,29,58,.30); } .match-hero-side.team-home { justify-content: flex-end; } .match-hero-side.team-away { justify-content: flex-start; } .match-hero-side[data-div="s"] { --pc-accent:#ff3355; --pc-glow:rgba(255,51,85,.50); } .match-hero-side[data-div="a"] { --pc-accent:#e11d3a; --pc-glow:rgba(225,29,58,.45); } .match-hero-side[data-div="b"] { --pc-accent:#e7eaf0; --pc-glow:rgba(231,234,240,.38); } .match-hero-side[data-div="c"] { --pc-accent:#9aa0ad; --pc-glow:rgba(154,160,173,.36); } .match-hero-side[data-div="d"] { --pc-accent:#626775; --pc-glow:rgba(98,103,117,.36); } .match-hero-info { display: flex; flex-direction: column; gap: 9px; min-width: 0; } .match-hero-side.team-home .match-hero-info { align-items: flex-end; text-align: right; } .match-hero-side.team-away .match-hero-info { align-items: flex-start; text-align: left; } .match-hero-logo-link { flex-shrink: 0; line-height: 0; } .match-hero-logo { width: 104px; height: 104px; border-radius: 18px; object-fit: cover; background: var(--m-surface-2); border: 3px solid var(--pc-accent); box-shadow: 0 0 24px var(--pc-glow), inset 0 0 0 2px rgba(0,0,0,.3); } .match-hero-name { font-family: var(--font-display); font-size: clamp(18px, 3vw, 28px); color: var(--m-text) !important; line-height: 1.05; text-decoration: none; text-shadow: 0 0 22px var(--pc-glow); word-break: break-word; } a.match-hero-name:hover { color: var(--pc-accent) !important; } .match-hero-div { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--m-text-muted); } .match-hero-side.team-home .match-hero-div { flex-direction: row-reverse; } .match-hero-div img { width: 22px; height: 22px; object-fit: contain; } .match-hero-rank { font-family: var(--font-display); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--pc-accent); background: rgba(255,255,255,.05); border: 1px solid var(--m-border); padding: 2px 11px; border-radius: 20px; } .match-hero-center { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 0 10px; min-width: 116px; position: relative; z-index: 1; } .match-hero-meta { font-family: var(--font-display); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--m-text-dim); text-align: center; } .match-hero-score { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: clamp(34px, 7vw, 54px); line-height: 1; } .match-hero-score .mhs { color: var(--m-text-muted); } .match-hero-score .mhs.win { color: #4ade80; text-shadow: 0 0 22px rgba(74,222,128,.45); } .match-hero-score .mhs-dash { color: var(--m-text-dim); font-size: .55em; } .match-hero-versus { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 6vw, 46px); letter-spacing: .04em; background: linear-gradient(120deg, var(--m-orange), var(--m-blue)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--m-orange); } .match-hero-status { font-family: var(--font-display); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 13px; border-radius: 20px; color: var(--m-text-muted); background: rgba(255,255,255,.05); border: 1px solid var(--m-border); } .match-hero-date { font-size: 12.5px; color: var(--m-text-muted); text-align: center; } @media (max-width: 620px) { .match-hero { grid-template-columns: 1fr 1fr; gap: 10px; padding: 20px 14px; } .match-hero-center { grid-column: 1 / -1; order: 3; } .match-hero-side { gap: 9px; } .match-hero-side.team-home { flex-direction: column-reverse; justify-content: center; } .match-hero-side.team-away { flex-direction: column; justify-content: center; } .match-hero-side .match-hero-info { align-items: center !important; text-align: center !important; } .match-hero-side.team-home .match-hero-div { flex-direction: row; } .match-hero-logo { width: 78px; height: 78px; } } /* The VS hero now carries division + rank, so drop the duplicate stats above each lineup (only when rosters are present — solo-game headers stay intact). */ /* ── Head-to-head "tale of the tape" — dueling comparison bars ── */ /* ═══════════════════════════════════════════════════════════════ MY MATCHES — sectioned schedule dashboard ═══════════════════════════════════════════════════════════════ */ /* ── Light mode theme override ──────────────────────────────── */ [data-theme="light"] { --m-bg: #eef1f5; --m-surface: #ffffff; --m-surface-hover:#eef2f7; --m-surface-2: #f5f7fa; --m-nav: #ffffff; --m-border: #dde1e7; --m-border-strong:#c7cdd6; --m-text: #14203a; --m-text-muted: #4b5563; --m-text-dim: #8a94a3; --m-orange-dim: rgba(225,29,58,0.14); --m-orange-glow: rgba(225,29,58,0.28); --m-blue-dim: rgba(70,75,87,0.12); color-scheme: light; } [data-theme="light"] .form-control, [data-theme="light"] .form-select { background-color: #fff !important; } [data-theme="light"] .table { --bs-table-color: var(--m-text); --bs-table-striped-bg: var(--m-surface-hover); } /* ── Dark / Light toggle button ─────────────────────────────── */ /* ── Sticky table headers ───────────────────────────────────── */ .table thead th { position: sticky; top: 0; z-index: 2; background: var(--m-nav); box-shadow: 0 1px 0 var(--m-border); } /* Standings already sets z-index: 110 and background: var(--m-nav) — no override needed */ /* ── Region left-border accents (standings + match rows) ────── */ /* ── Match result row tinting ───────────────────────────────── */ /* ── Live pulse badge ───────────────────────────────────────── */ @keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } /* Match countdown is styled once, earlier in this file (the crimson chip). A second definition used to live here and silently overrode the chip's display/font. */ /* ── Season progress bar ────────────────────────────────────── */ /* ── Back to top button ─────────────────────────────────────── */ #backToTop { position: fixed; bottom: 28px; right: 24px; z-index: 1050; width: 42px; height: 42px; border-radius: 50%; background: var(--m-orange); color: #fff; border: none; display: flex; align-items: center; justify-content: center; font-size: 1rem; cursor: pointer; box-shadow: 0 4px 16px rgba(225,29,58,0.4); opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity 0.3s ease, transform 0.3s ease; } #backToTop:hover { background: #ff9433; transform: translateY(-2px); } /* ── Enhanced shimmer skeleton ──────────────────────────────── */ /* ── Animated stat counters ─────────────────────────────────── */ /* ── Form guide (W/L dots) ──────────────────────────────────── */ /* ── Score result badge (home team perspective) ─────────────── */ /* ── Mobile adjustments ─────────────────────────────────────── */ @media (max-width: 576px) { #backToTop { bottom: 16px; right: 12px; width: 36px; height: 36px; font-size: 0.85rem; } } /* ═══════════════════════════════════════════════════════════════ RE-LAYOUT COMPONENTS — board / list / grid layouts that replace the legacy VRML data-tables on the league inner pages (crimson esports). ═══════════════════════════════════════════════════════════════ */ /* Angular section header */ .nl-sec { display:flex; align-items:center; gap:12px; margin:34px 0 16px; } .nl-sec:first-of-type { margin-top:8px; } .nl-sec h3 { font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(15px,2.6vw,21px); color:var(--m-text); margin:0; } .nl-sec h3 span { color:var(--m-crimson); } .nl-sec::before { content:""; width:7px; height:20px; background:var(--m-crimson); box-shadow:0 0 10px var(--m-crimson-glow); clip-path:polygon(0 0,100% 0,100% 68%,50% 100%,0 68%); flex-shrink:0; } .nl-sec .count { margin-left:auto; font-family:var(--font-display); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--m-text-dim); } /* ── Standings podium (top 3) ── */ .ladder-podium { display:grid; grid-template-columns:1fr 1.16fr 1fr; gap:12px; align-items:end; margin-bottom:20px; } .podium { position:relative; display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; padding:22px 14px 16px; border-radius:14px; text-decoration:none; background:linear-gradient(165deg,var(--m-surface-2),var(--m-surface)); border:1px solid var(--m-border-strong); overflow:hidden; transition:transform .15s ease, border-color .15s ease; } .podium::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--pk,var(--m-crimson)); } .podium:hover { transform:translateY(-4px); border-color:var(--pk,var(--m-crimson)); } .podium.p1 { border-color:rgba(255,51,85,.55); box-shadow:0 12px 40px -12px var(--m-crimson-glow); transform:translateY(-12px); } .podium.p1:hover { transform:translateY(-16px); } .podium-pos { font-family:var(--font-display); font-weight:900; font-size:30px; line-height:1; color:var(--pk,var(--m-crimson)); } .podium-name { font-family:var(--font-display); font-weight:700; font-size:clamp(15px,2vw,19px); color:var(--m-text); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .podium-mmr { font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--pk,var(--m-crimson)); } .podium-mmr small { display:block; font-family:var(--font-body); font-weight:400; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--m-text-dim); margin-top:2px; } .podium-sub { color:var(--m-text-dim); font-size:12px; letter-spacing:.04em; text-transform:uppercase; } @media (max-width:640px){ .ladder-podium{ grid-template-columns:1fr; align-items:stretch; } .podium.p1{ transform:none; order:-1; } } /* ── Ladder rows (cards, not a table) ── */ .ladder-rows { display:flex; flex-direction:column; gap:7px; } .lrow { display:grid; grid-template-columns:30px 38px 1fr 74px auto; align-items:center; gap:14px; padding:11px 16px 11px 12px; background:var(--m-surface); border:1px solid var(--m-border); border-left:3px solid var(--rk,var(--m-text-dim)); border-radius:10px; text-decoration:none; transition:transform .13s ease, border-color .13s ease, background .13s ease; } .lrow:hover { transform:translateX(4px); background:var(--m-surface-2); border-color:var(--m-border-strong); border-left-color:var(--rk,var(--m-crimson)); } /* Sitting-out teams stay on the ladder but read as parked: darker card, colour drained, waking up a little on hover so the row is still clearly a link. */ .lrow.inactive, .podium.inactive { opacity:.45; filter:saturate(.35); background:var(--m-bg); } .lrow.inactive:hover, .podium.inactive:hover { opacity:.8; } .lrow-pos { font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--m-text-muted); text-align:center; } .lrow-id { min-width:0; } .lrow-name { font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--m-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lrow-region { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--m-text-dim); } .lrow-wtl { font-family:var(--font-display); font-size:14px; color:var(--m-text-muted); text-align:center; } .lrow-mmr { text-align:right; min-width:92px; } .lrow-mmr-val { font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--m-crimson); } .lrow-mmr-bar { height:5px; border-radius:3px; background:var(--m-surface-hover); overflow:hidden; margin-top:5px; } .lrow-mmr-bar > i { display:block; height:100%; background:linear-gradient(90deg,var(--m-crimson),var(--m-crimson-bright)); } .lrow-arrow { font-size:11px; margin-left:5px; } @media (max-width:640px){ .lrow{ grid-template-columns:26px 32px 1fr auto; } .lrow-wtl{ display:none; } } /* ── Roster grid (members) ── */ .roster-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(244px,1fr)); gap:12px; } .pcard { display:flex; align-items:center; gap:13px; padding:13px 15px; background:var(--m-surface); border:1px solid var(--m-border); border-radius:12px; text-decoration:none; position:relative; overflow:hidden; transition:transform .13s ease, border-color .13s ease; } .pcard::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--rk,var(--m-text-dim)); } .pcard:hover { transform:translateY(-3px); border-color:var(--m-crimson); } .pcard-av { width:46px; height:46px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:19px; color:#fff; background:linear-gradient(150deg,var(--m-crimson),#7a0f1f); overflow:hidden; } .pcard-av img { width:100%; height:100%; object-fit:cover; } .pcard-main { min-width:0; flex:1; } .pcard-name { font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--m-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pcard-sub { font-size:12px; color:var(--m-text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pcard-role { font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--m-text-dim); margin-top:2px; } .pcard-role.owner { color:var(--m-crimson); } /* ── Fixture board (upcoming matches) ── */ .fixture-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(298px,1fr)); gap:12px; } .fixture { display:block; background:linear-gradient(160deg,var(--m-surface-2),var(--m-surface)); border:1px solid var(--m-border-strong); border-radius:12px; padding:16px; text-decoration:none; position:relative; overflow:hidden; transition:transform .13s ease, border-color .13s ease; } .fixture:hover { transform:translateY(-3px); border-color:var(--m-crimson); } .fixture-meta { display:flex; justify-content:space-between; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--m-text-dim); margin-bottom:14px; } .fixture-meta .up { color:var(--m-crimson); } .fixture-body { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; } .fixture-team { font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--m-text); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .fixture-vs { font-family:var(--font-display); font-weight:800; font-size:12px; color:var(--m-text-muted); padding:5px 11px; border:1px solid var(--m-border-strong); background:var(--m-bg); clip-path:polygon(14% 0,100% 0,86% 100%,0 100%); } .fixture-cd { text-align:center; margin-top:13px; font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--m-crimson); } .fixture-cd.live { color:#2ED573; } /* ── Result rows (played matches) ── */ .result-rows { display:flex; flex-direction:column; gap:7px; } .rrow { display:grid; grid-template-columns:62px 1fr auto 1fr 66px; align-items:center; gap:12px; padding:11px 16px; background:var(--m-surface); border:1px solid var(--m-border); border-radius:10px; text-decoration:none; transition:background .13s ease, border-color .13s ease; } .rrow:hover { background:var(--m-surface-2); border-color:var(--m-border-strong); } .rrow-date { font-size:12px; color:var(--m-text-dim); } .rrow-home { font-family:var(--font-display); font-size:15px; text-align:right; color:var(--m-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rrow-away { font-family:var(--font-display); font-size:15px; color:var(--m-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rrow-score { font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--m-text); background:var(--m-bg); border:1px solid var(--m-border); border-radius:6px; padding:3px 10px; white-space:nowrap; justify-self:center; } .rrow .win { color:#2ED573; } .rrow-tag { font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--m-text-dim); text-align:right; } .rrow-tag.disp { color:#f5b23e; } @media (max-width:640px){ .rrow{ grid-template-columns:1fr auto 1fr; } .rrow-date,.rrow-tag{ display:none; } } /* ── Leaderboard rows (stats: casters / connoisseurs) ── */ .lb-rows { display:flex; flex-direction:column; gap:6px; } .lbrow { display:grid; grid-template-columns:42px 1fr auto auto; align-items:center; gap:14px; padding:11px 16px; background:var(--m-surface); border:1px solid var(--m-border); border-radius:10px; } .lbrow-pos { font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--m-text-dim); text-align:center; } .lbrow.top1 { border-color:rgba(240,193,75,.5); } .lbrow.top1 .lbrow-pos{ color:#f0c14b; } .lbrow.top2 { border-color:rgba(200,208,220,.45); } .lbrow.top2 .lbrow-pos{ color:#c8d0dc; } .lbrow.top3 { border-color:rgba(205,127,80,.5); } .lbrow.top3 .lbrow-pos{ color:#cd7f50; } .lbrow-name { font-family:var(--font-display); font-size:15px; color:var(--m-text); text-decoration:none; } .lbrow-name:hover { color:var(--m-crimson); } .lbrow-stat { font-size:13px; color:var(--m-text-muted); } .lbrow-stat b { color:var(--m-crimson); font-family:var(--font-display); font-weight:800; } /* ── Identity banner + stat strip (team / player heroes) ── */ .id-banner { position:relative; display:flex; align-items:center; gap:22px; padding:24px clamp(18px,3vw,30px); margin-bottom:12px; overflow:hidden; background:linear-gradient(105deg, var(--m-surface-2) 0%, var(--m-surface) 58%, var(--m-bg) 100%); border:1px solid var(--m-border-strong); border-radius:16px; } .id-banner::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(var(--idk,var(--m-crimson)), transparent); } .id-banner::after { content:""; position:absolute; right:-8%; top:-45%; width:44%; height:190%; pointer-events:none; z-index:0; background:radial-gradient(closest-side, var(--idglow,var(--m-crimson-dim)), transparent 70%); } .id-emblem { width:96px; height:96px; flex-shrink:0; position:relative; z-index:1; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:2.6rem; color:#fff; } .id-emblem img { width:100%; height:100%; object-fit:cover; border-radius:14px; } .id-main { position:relative; z-index:1; min-width:0; flex:1; } .id-name-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .id-name { font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.01em; font-size:clamp(24px,4vw,40px); color:var(--m-text); line-height:1; margin:0; } .id-tag { font-size:11px; color:var(--m-crimson); border:1px solid var(--m-crimson); border-radius:20px; padding:3px 11px; text-transform:uppercase; letter-spacing:.05em; } .id-meta { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:13px; color:var(--m-text-muted); font-size:14px; } .id-meta > span { display:inline-flex; align-items:center; gap:7px; } .id-meta i { color:var(--m-crimson); } .id-meta .prom { color:#2ED573; } .id-meta .rel { color:#ff5c6c; } @media (max-width:640px){ .id-banner{ flex-direction:column; text-align:center; } .id-meta{ justify-content:center; } } .stat-strip { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:1px; margin-bottom:20px; background:var(--m-border); border:1px solid var(--m-border-strong); border-radius:12px; overflow:hidden; } .stat-strip .cell { background:var(--m-surface); padding:15px 12px; text-align:center; } .stat-strip .cell .n { font-family:var(--font-display); font-weight:800; font-size:clamp(18px,2.6vw,26px); color:var(--m-text); line-height:1; } .stat-strip .cell .n.crimson { color:var(--m-crimson); } .stat-strip .cell .l { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--m-text-dim); margin-top:7px; } @media (max-width:640px){ .stat-strip{ grid-auto-flow:row; grid-template-columns:repeat(3,1fr); grid-auto-columns:auto; } } /* ── Compact match rows (team recent / head-to-head) ── */ .mini-list { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; } .mini-row { display:flex; align-items:center; gap:12px; padding:9px 14px; background:var(--m-surface); border:1px solid var(--m-border); border-radius:9px; text-decoration:none; transition:background .12s ease, border-color .12s ease; } .mini-row:hover { background:var(--m-surface-2); border-color:var(--m-border-strong); } .mini-row .mr-date { color:var(--m-text-dim); font-size:12px; min-width:54px; } .mini-row .mr-main { flex:1; min-width:0; color:var(--m-text-muted); font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mini-row .mr-main b { font-family:var(--font-display); color:var(--m-text); font-weight:600; } .mini-row .mr-score { font-family:var(--font-display); font-weight:800; color:var(--m-text); } /* ── Map score rows (match) ── */ .map-list { display:flex; flex-direction:column; gap:6px; } .map-row { display:grid; grid-template-columns:1fr 44px 18px 44px; align-items:center; gap:10px; padding:11px 16px; background:var(--m-surface); border:1px solid var(--m-border); border-radius:9px; } .map-row .mp-name { font-family:var(--font-display); font-size:15px; color:var(--m-text); } .map-row .mp-s { font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--m-text-muted); text-align:center; } .map-row .mp-s.win { color:#2ED573; } .map-row .mp-dash { color:var(--m-text-dim); text-align:center; } /* Big stat tiles row */ .nl-statbar { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-bottom:8px; } .nl-stat { background:linear-gradient(160deg,var(--m-surface-2),var(--m-surface)); border:1px solid var(--m-border-strong); border-radius:12px; padding:18px 16px; position:relative; overflow:hidden; } .nl-stat::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--m-crimson),transparent 70%); } .nl-stat-num { font-family:var(--font-display); font-weight:800; font-size:30px; color:var(--m-text); line-height:1; } .nl-stat-label { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--m-text-dim); margin-top:6px; } /* ── Activity-log rows (audit log) ── */ .lg-list { display:flex; flex-direction:column; gap:5px; } .lg-row { display:grid; grid-template-columns:104px 118px 128px 1fr; align-items:center; gap:12px; padding:10px 14px; background:var(--m-surface); border:1px solid var(--m-border); border-left:3px solid var(--lgc,var(--m-text-dim)); border-radius:8px; } .lg-when { color:var(--m-text-dim); font-size:12px; } .lg-cat { font-family:var(--font-display); font-size:10px; text-transform:uppercase; letter-spacing:.06em; border:1px solid; border-radius:20px; padding:2px 9px; justify-self:start; } .lg-actor { color:var(--m-text-muted); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lg-msg { color:var(--m-text); font-size:13px; } @media (max-width:700px){ .lg-row{ grid-template-columns:auto 1fr; } .lg-when,.lg-actor{ display:none; } } /* ── League admin sections ── The admin page runs on two different clocks. What the league IS — its name, its staff, its map pool — outlives every season. How the season currently running is PLAYED is replaced each time one closes. They were one flat grid of cards, so a control that rewrites next season sat beside one that renames the league with nothing to say which was which. */ .adm-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; } /* ── Admin page tabs ── Thirteen cards used to sit in one long scroll with only two section dividers between them, which is what made the Discord card impossible to find. Without JS every panel below renders open instead of hidden, since a tab button with nothing wiring it up would otherwise be a dead click: see the .adm-tabset.js-ready rule, which only starts hiding once site.js has actually run. */ .adm-tabs { display:flex; gap:2px; flex-wrap:wrap; margin:20px 0 18px; border-bottom:1px solid var(--m-border-strong); } .adm-tabset:not(.js-ready) .adm-tabs { display:none; } .adm-tab { appearance:none; background:none; border:none; cursor:pointer; padding:10px 18px; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em; font-size:13px; color:var(--m-text-dim); border-bottom:2px solid transparent; margin-bottom:-1px; } .adm-tab:hover { color:var(--m-text); } .adm-tab.is-active { color:var(--m-text); border-bottom-color:var(--m-crimson); } .adm-tabset.js-ready .adm-tabpanel { display:none; } .adm-tabset.js-ready .adm-tabpanel.is-active { display:block; } .adm-tab-intro { margin:0 0 16px; color:var(--m-text-dim); font-size:13px; } /* ── Season lifecycle stepper ── A season is a sequence — preseason, weeks, post-season, crowning — and it used to render as one card of buttons all live at once, with the two different ways of ending a season sitting side by side. Laid out as steps, where you are is the layout rather than something you have to work out from which button is enabled. */ .sea-step { display:grid; grid-template-columns:24px 1fr; column-gap:13px; } .sea-rail { display:flex; flex-direction:column; align-items:center; } .sea-dot { width:24px; height:24px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--font-display); font-size:11px; font-weight:700; border:2px solid var(--m-border-strong); background:var(--m-bg); color:var(--m-text-dim); } .sea-line { flex:1; width:2px; min-height:12px; background:var(--m-border-strong); } .sea-step:last-child .sea-line { display:none; } .sea-body { min-width:0; padding-bottom:20px; } .sea-step:last-child .sea-body { padding-bottom:0; } .sea-label { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.05em; font-size:12px; color:var(--m-text-dim); margin-bottom:7px; } .sea-note { color:var(--m-text-dim); font-size:12px; margin:6px 0 0; } /* Done: the step is behind us. Now: the one step the operator can act on. */ .sea-step.done .sea-dot { border-color:#2ED573; color:#2ED573; } .sea-step.done .sea-line { background:#2ED573; } .sea-step.done .sea-label { color:var(--m-text-muted); } .sea-step.now .sea-dot { border-color:var(--m-crimson); background:var(--m-crimson); color:#fff; box-shadow:0 0 0 4px var(--m-crimson-glow); } .sea-step.now .sea-label { color:var(--m-text); } /* Week timeline — one segment per scheduled week. Drawn and complete are separate states because play trails the schedule: a week can be fixtured for days before its last result comes in. */ .wk-bar { display:flex; gap:3px; margin:2px 0 8px; } .wk-seg { flex:1 1 0; height:10px; min-width:3px; border-radius:2px; background:var(--m-surface-2); border:1px solid var(--m-border); } .wk-seg.drawn { background:var(--m-orange); border-color:var(--m-orange); } .wk-seg.done { background:#2ED573; border-color:#2ED573; } .wk-count { font-family:var(--font-display); font-size:15px; color:var(--m-text); } .wk-count b { font-size:22px; font-weight:800; } .wk-key { display:flex; gap:14px; flex-wrap:wrap; color:var(--m-text-dim); font-size:11px; margin-top:2px; } .wk-key i { width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:5px; vertical-align:baseline; } /* Season rules, frozen while a drawn week is still being played out. */ .locked-fields { border:0; padding:0; margin:0; min-width:0; display:flex; flex-direction:column; gap:10px; } .locked-fields:disabled { opacity:.45; } .lock-note { display:flex; gap:10px; align-items:flex-start; margin:0 0 13px; padding:10px 12px; background:rgba(225,29,58,.07); border:1px solid rgba(225,29,58,.32); border-radius:8px; color:var(--m-text-muted); font-size:12.5px; line-height:1.5; } .lock-note i { color:var(--m-crimson); margin-top:3px; flex:none; } .lock-note b { color:var(--m-text); } /* ── Agreeing a kickoff ── A fixture arrives with no time on it: the league says who plays whom, the two teams say when. This panel is where that conversation lands. */ .sched-card { background:var(--m-surface); border:1px solid var(--m-border-strong); border-left:3px solid var(--m-orange); border-radius:var(--m-radius); padding:14px 16px; margin-bottom:16px; } .sched-head { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; color:var(--m-text-muted); font-size:14px; margin-bottom:11px; } .sched-head i { color:var(--m-orange); } .sched-head b { color:var(--m-text); font-family:var(--font-display); font-weight:600; } .sched-head time { color:var(--m-text); font-family:var(--font-display); } .sched-label { display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--m-text-muted); } .sched-note { color:var(--m-text-dim); font-size:12px; margin:9px 0 0; line-height:1.5; } /* "Time TBD" wherever a fixture has no agreed kickoff — same weight as the countdown it stands in for, so a fixture list doesn't jump around. */ .match-tbd { color:var(--m-text-dim); font-family:var(--font-display); font-size:13px; letter-spacing:.04em; text-transform:uppercase; } /* ── Availability: a repeating week of hours a team can play ── 7 columns, 24 rows. Stored UTC, rendered in the viewer's zone by site.js. */ .avail { display:grid; grid-template-columns:auto repeat(7, minmax(0, 1fr)); gap:2px; align-items:stretch; max-width:520px; } .avail-corner { } .avail-day { font-family:var(--font-display); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--m-text-dim); text-align:center; padding-bottom:4px; } button.avail-day { background:none; border:0; cursor:pointer; } button.avail-day:hover { color:var(--m-orange); } .avail-hour { font-size:10px; color:var(--m-text-dim); padding-right:7px; text-align:right; font-variant-numeric:tabular-nums; line-height:14px; } .avail-cell { height:14px; border-radius:2px; padding:0; background:var(--m-surface-2); border:1px solid var(--m-border); } button.avail-cell { cursor:pointer; } button.avail-cell:hover { border-color:var(--m-orange); } button.avail-cell:focus-visible { outline:2px solid var(--m-orange); outline-offset:1px; } .avail-cell.on { background:#2ED573; border-color:#2ED573; } /* Only one of the two teams — enough to read as "nearly", not as agreement. */ .avail-cell.half { background:rgba(46,213,115,.22); border-color:rgba(46,213,115,.35); } .avail-key { display:flex; gap:14px; flex-wrap:wrap; color:var(--m-text-dim); font-size:11px; margin-top:9px; } .avail-key i { width:10px; height:10px; border-radius:2px; display:inline-block; margin-right:5px; } /* Overlap grid inside the scheduling panel — collapsed when there's nothing shared. */ .sched-overlap { margin:0 0 14px; } .sched-overlap summary { cursor:pointer; color:var(--m-text-muted); font-size:13px; padding:6px 0; list-style-position:inside; } .sched-overlap summary::marker { color:var(--m-text-dim); } .sched-overlap summary:hover { color:var(--m-text); } .sched-overlap .avail { margin-top:10px; } /* ── The standings you could switch to ── Equal cards because they are alternatives, not a sequence. The one you already hold is not among them — see .standing-now-bar below. */ .standing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:12px; } .standing-card { background:var(--m-bg); border:1px solid var(--m-border); border-radius:10px; padding:14px 15px; display:flex; flex-direction:column; gap:9px; } .standing-card h4 { font-family:var(--font-display); font-size:14px; text-transform:uppercase; letter-spacing:.04em; color:var(--m-text); margin:0; display:flex; align-items:center; gap:8px; } .standing-card h4 i { color:var(--m-orange); font-size:.85em; } .standing-card p { color:var(--m-text-muted); font-size:12.5px; margin:0; flex:1; line-height:1.5; } .standing-card .btn { align-self:flex-start; } /* What you currently are, and what you can do about it. The cards below are only the standings you could switch to — an offer you have already taken is a dead tile, so the one you hold isn't drawn as one. */ .standing-now-bar { display:flex; align-items:center; gap:11px; flex-wrap:wrap; } .standing-grid + .standing-now-bar, .standing-now-bar + .standing-grid { margin-top:14px; } /* Everything stays in one left-to-right group: what you are, how to adjust it, how to get out. Pushing the leave button to the far right was tried and stranded it in whitespace, away from the standing it belongs to — it is already a red button, so it does not also need distance to be noticed. */ /* The AXI-VR wordmark, for the few places it gets room. Expects a transparent PNG. Nothing here knocks a background out — a blend mode would fake it on this page's ground and then fail on any other, and the light theme's ground is the opposite colour. */ .brand-wordmark { display:block; width:min(420px, 78vw); height:auto; margin:0 0 22px; } /* ── Rules document ── The rendered MarkdownLite output on the public Rules tab. */ .rules-doc { line-height:1.75; color:var(--m-text-muted); } .rules-doc h2, .rules-doc h3, .rules-doc h4 { font-family:var(--font-display); color:var(--m-text); text-transform:uppercase; letter-spacing:.04em; margin:22px 0 10px; } .rules-doc h2:first-child, .rules-doc h3:first-child { margin-top:0; } .rules-doc h2 { font-size:19px; } .rules-doc h3 { font-size:16px; } .rules-doc h4 { font-size:14px; } .rules-doc p { margin:0 0 12px; } .rules-doc ul, .rules-doc ol { margin:0 0 14px; padding-left:24px; } .rules-doc li { margin-bottom:5px; } .rules-doc strong { color:var(--m-text); } .rules-doc hr { border:0; border-top:1px solid var(--m-border-strong); margin:20px 0; } /* The editor card spans the whole grid — rules are the longest thing on the page. */ .rules-edit-card { grid-column:1 / -1; } .md-toolbar { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; } .md-toolbar button { background:var(--m-surface-2); border:1px solid var(--m-border); color:var(--m-text-muted); border-radius:6px; padding:5px 11px; font-size:12px; cursor:pointer; font-family:var(--font-display); } .md-toolbar button:hover { border-color:var(--m-orange); color:var(--m-text); } .md-toolbar b { font-weight:800; } .md-toolbar i { font-style:italic; } /* Inline styles MarkdownLite can emit inside a rules document. The six colour classes are the whole palette an author can reach — the renderer maps named colours to these and nothing else ever lands in a style attribute. */ .rules-doc u { text-underline-offset: 3px; } .rules-doc s { opacity:.65; } .rules-doc mark { background:rgba(234,179,8,.25); color:var(--m-text); padding:0 3px; border-radius:3px; } .rules-doc .md-red { color:#ff4d5e; } .rules-doc .md-orange { color:#ff8a3d; } .rules-doc .md-gold { color:#eab308; } .rules-doc .md-green { color:#2ED573; } .rules-doc .md-blue { color:#38bdf8; } .rules-doc .md-purple { color:#a78bfa; } /* Colour swatch buttons on the editor toolbar. */ .md-toolbar .md-swatch { width:26px; height:26px; padding:0; border-radius:50%; } /* The rules editor surface — the finished document, editable. Same rules-doc styling as the public page; the border is what says "this is an input". */ .md-editor { background:var(--m-bg); border:1px solid var(--m-border); border-radius:6px; padding:14px 16px; min-height:320px; max-height:640px; overflow-y:auto; } .md-editor:focus { outline:none; border-color:var(--m-orange); } .md-editor:empty::before { content:"Write the rules here — select text and use the buttons above to style it."; color:var(--m-text-dim); font-size:13px; } /* == Clock-dial time picker == The native datetime-local popup varies by browser and reads like a spreadsheet; picking a kickoff should feel like reading a watch. Date stays a native input (its calendar is fine); the time half opens this dial. */ .dtp { display:inline-flex; gap:8px; flex-wrap:wrap; } .dtp-time { cursor:pointer; font:inherit; } .dtp-back { position:fixed; inset:0; background:rgba(0,0,0,.62); z-index:140; display:flex; align-items:center; justify-content:center; } .dtp-pop { background:var(--m-surface-2); border:1px solid var(--m-border-strong); border-radius:14px; padding:18px; width:min(320px, 92vw); box-shadow:0 24px 60px rgba(0,0,0,.65); } .dtp-display { display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:14px; } .dtp-big { font-family:var(--font-display); font-weight:700; font-size:32px; padding:4px 10px; border-radius:8px; background:var(--m-bg); border:1px solid var(--m-border); color:var(--m-text); cursor:pointer; } .dtp-big.on { border-color:var(--m-crimson); color:var(--m-crimson-bright); } .dtp-colon { font-family:var(--font-display); font-size:28px; color:var(--m-text-dim); } .dtp-ampm { display:flex; flex-direction:column; gap:4px; margin-left:10px; } .dtp-ampm button { font-family:var(--font-display); font-size:12px; padding:4px 9px; border-radius:6px; background:var(--m-bg); border:1px solid var(--m-border); color:var(--m-text-muted); cursor:pointer; } .dtp-ampm button.on { border-color:var(--m-crimson); color:var(--m-crimson-bright); } .dtp-dial { position:relative; width:236px; height:236px; margin:0 auto; border-radius:50%; background:var(--m-bg); border:1px solid var(--m-border); } .dtp-dial::after { content:''; position:absolute; left:50%; top:50%; width:7px; height:7px; border-radius:50%; background:var(--m-crimson); transform:translate(-50%,-50%); } .dtp-hand { position:absolute; left:50%; top:50%; width:2px; height:33%; background:var(--m-crimson); transform-origin:top center; pointer-events:none; opacity:.85; } .dtp-num { position:absolute; transform:translate(-50%,-50%); width:36px; height:36px; border-radius:50%; background:none; border:0; color:var(--m-text-muted); font:inherit; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; } .dtp-num:hover { background:var(--m-surface-hover); color:var(--m-text); } .dtp-num.on, .dtp-num.on:hover { background:var(--m-crimson); color:#fff; } .dtp-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; } /* The calendar half of the picker: same panel, same language as the dial. */ .dtp-cal-head { display:flex; align-items:center; gap:6px; margin-bottom:10px; } .dtp-cal-title { font-family:var(--font-display); font-size:15px; color:var(--m-text); flex:1; } .dtp-cal-nav { background:var(--m-bg); border:1px solid var(--m-border); color:var(--m-text-muted); border-radius:6px; width:30px; height:30px; cursor:pointer; } .dtp-cal-nav:hover { color:var(--m-text); border-color:var(--m-border-strong); } .dtp-cal-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; } .dtp-dow { text-align:center; font-size:10px; letter-spacing:.06em; color:var(--m-text-dim); text-transform:uppercase; padding:4px 0 6px; } .dtp-day { aspect-ratio:1; border:0; background:none; border-radius:8px; color:var(--m-text); cursor:pointer; font:inherit; font-size:13px; } .dtp-day:hover { background:var(--m-surface-hover); } .dtp-day.dim { color:var(--m-text-dim); } .dtp-day.today { box-shadow:inset 0 0 0 1px var(--m-border-strong); } .dtp-day.on, .dtp-day.on:hover { background:var(--m-crimson); color:#fff; } .dtp-cal-foot { display:flex; justify-content:space-between; margin-top:12px; } .dtp-cal-foot button { background:none; border:0; color:var(--m-crimson-bright); font:inherit; font-size:13px; cursor:pointer; padding:4px 6px; } .avail-expand { background:none; border:0; color:var(--m-text-dim); font:inherit; font-size:12px; cursor:pointer; padding:6px 0 0; display:block; } .avail-expand:hover { color:var(--m-text); } /* ── Pricing page (storefront) ─────────────────────────────── */ .pr-wrap { max-width: 1080px; margin: 0 auto; } .pr-hero { text-align: center; padding: 6px 0 2px; } .pr-hero h1 { font-size: clamp(30px, 6.5vw, 58px); margin: 0; } .pr-hero h1 .accent { color: var(--m-crimson-bright); } .pr-lede { color: var(--m-text-muted); max-width: 58ch; margin: 14px auto 0; font-size: 16px; line-height: 1.6; } .pr-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0 30px; } .pr-why > div { background: var(--m-surface); border: 1px solid var(--m-border); border-radius: 12px; padding: 15px 17px; } .pr-why .k { font-family: var(--font-display); text-transform: uppercase; font-size: 12px; letter-spacing: .07em; color: var(--m-crimson-bright); margin-bottom: 5px; } .pr-why .v { color: var(--m-text-muted); font-size: 13.5px; line-height: 1.5; } .pr-free { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--m-surface-2) 0%, var(--m-surface) 62%); border: 1px solid var(--m-crimson-dim); border-radius: 18px; padding: 30px 28px; margin: 0 0 10px; box-shadow: 0 0 0 1px rgba(225,29,58,.06), 0 26px 70px -34px var(--m-crimson-glow); } .pr-free::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--m-crimson), transparent 72%); } .pr-free .tag { display: inline-block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; color: var(--m-crimson-bright); border: 1px solid var(--m-crimson-dim); border-radius: 999px; padding: 3px 11px; margin-bottom: 14px; } .pr-free .big { font-family: var(--font-display); font-weight: 800; font-size: clamp(42px, 9vw, 66px); line-height: .88; color: var(--m-text); letter-spacing: .01em; } .pr-free .big small { font-size: clamp(18px, 3.5vw, 26px); color: var(--m-text-muted); font-weight: 700; } .pr-free .sub { color: var(--m-text-muted); font-size: 15px; margin: 10px 0 18px; max-width: 56ch; line-height: 1.55; } .pr-suite { display: flex; align-items: center; gap: 12px; margin: 30px 0 12px; } .pr-suite .lbl { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: 14px; color: var(--m-text); } .pr-suite .rule { flex: 1; height: 1px; background: var(--m-border); } .pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 14px; } .pr-card { position: relative; background: var(--m-surface); border: 1px solid var(--m-border); border-radius: 14px; padding: 18px 18px 20px; transition: border-color .18s, transform .18s, box-shadow .18s; } .pr-card:hover { border-color: var(--m-crimson-dim); transform: translateY(-3px); box-shadow: 0 18px 44px -28px var(--m-crimson-glow); } .pr-card .name { font-family: var(--font-display); font-size: 15px; text-transform: uppercase; letter-spacing: .02em; color: var(--m-text); } .pr-card .row { display: flex; align-items: baseline; gap: 6px; margin-top: 9px; } .pr-card .price { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; color: var(--m-text); font-variant-numeric: tabular-nums; } .pr-card .from { font-size: 12px; color: var(--m-text-dim); text-transform: uppercase; letter-spacing: .05em; } .pr-card .per { font-size: 12px; color: var(--m-text-muted); } .pr-card .desc { color: var(--m-text-muted); font-size: 13px; line-height: 1.5; margin: 9px 0 0; } .pr-foot { color: var(--m-text-muted); font-size: 14px; margin: 30px 0 0; max-width: 64ch; line-height: 1.6; } /* Selectable feature cards (the shopping list). The native checkbox is hidden and the whole card is the hit target; a check mark and a crimson ring show the pick. */ .pr-pick { cursor: pointer; padding-right: 42px; } .pr-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .pr-check { position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--m-border); background: var(--m-surface-2); transition: border-color .16s, background .16s; } .pr-check::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transform-origin: center; transition: transform .16s; } .pr-pick:hover .pr-check { border-color: var(--m-crimson-dim); } .pr-card.is-picked { border-color: var(--m-crimson); background: linear-gradient(150deg, rgba(225,29,58,.10) 0%, var(--m-surface) 60%); box-shadow: 0 0 0 1px rgba(225,29,58,.18), 0 20px 50px -30px var(--m-crimson-glow); } .pr-card.is-picked .pr-check { border-color: var(--m-crimson); background: var(--m-crimson); } .pr-card.is-picked .pr-check::after { transform: rotate(45deg) scale(1); } .pr-pick input:focus-visible + .pr-check { outline: 2px solid var(--m-crimson-bright); outline-offset: 2px; } /* Informational cards: shown for context but not part of the instant basket. */ .pr-info { opacity: .92; } .pr-tag { display: inline-block; margin-top: 12px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; font-size: 10px; color: var(--m-text-dim); border: 1px solid var(--m-border); border-radius: 999px; padding: 3px 9px; } /* The cart bar at the foot of the shopping list. */ .pr-cart { margin-top: 30px; background: linear-gradient(135deg, var(--m-surface-2) 0%, var(--m-surface) 70%); border: 1px solid var(--m-crimson-dim); border-radius: 16px; padding: 20px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; } .pr-cart-sum { display: flex; flex-direction: column; gap: 2px; margin-right: auto; } .pr-cart-sum .lbl { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; color: var(--m-text-muted); } .pr-cart-sum .amt { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1; color: var(--m-text); font-variant-numeric: tabular-nums; } .pr-cart .btn-primary { font-size: 15px; padding: 12px 22px; } .pr-cart-note { flex-basis: 100%; margin: 0; color: var(--m-text-muted); font-size: 12.5px; line-height: 1.55; } /* Finish-page banners. */ .pr-note { background: var(--m-surface); border: 1px solid var(--m-border); border-left: 3px solid var(--m-border); border-radius: 12px; padding: 14px 16px; margin: 0 0 16px; color: var(--m-text-muted); font-size: 14px; line-height: 1.55; } .pr-note strong { color: var(--m-text); } .pr-note-good { border-left-color: var(--m-crimson); } .pr-note-warn { border-left-color: #f59e0b; } @media (max-width: 640px) { .pr-why { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .pr-card, .pr-check, .pr-check::after { transition: none; } .pr-card:hover { transform: none; } } /* ── Operator command center (the /admin dashboard header) ─────────────────── */ .cc-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .cc-tile { background: linear-gradient(150deg, var(--m-surface-2) 0%, var(--m-surface) 72%); border: 1px solid var(--m-border); border-radius: 14px; padding: 16px 18px; } .cc-tile .n { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; color: var(--m-text); font-variant-numeric: tabular-nums; } .cc-tile .l { margin-top: 7px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--m-text-muted); } .cc-tile.cc-money .n { color: var(--m-text); } .cc-tile.cc-alert { border-color: var(--m-crimson); box-shadow: 0 0 0 1px rgba(225,29,58,.18), 0 18px 44px -30px var(--m-crimson-glow); } .cc-tile.cc-alert .n { color: var(--m-crimson-bright); } .cc-tile.cc-warn { border-color: rgba(245,158,11,.55); } .cc-tile.cc-warn .n { color: #f59e0b; } .cc-attention { display: flex; flex-direction: column; gap: 10px; } .cc-act { display: flex; align-items: center; gap: 12px; background: var(--m-surface); border: 1px solid var(--m-border); border-left: 3px solid var(--m-border); border-radius: 12px; padding: 13px 16px; color: var(--m-text-muted); font-size: 14px; line-height: 1.5; text-decoration: none; } .cc-act strong { color: var(--m-text); font-family: var(--font-display); } .cc-act .go { margin-left: auto; white-space: nowrap; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: 12px; color: var(--m-crimson-bright); } .cc-act i { flex: none; width: 18px; text-align: center; } a.cc-act-alert { border-left-color: var(--m-crimson); color: var(--m-text); transition: border-color .16s, transform .16s, box-shadow .16s; } a.cc-act-alert:hover { transform: translateY(-1px); box-shadow: 0 16px 40px -30px var(--m-crimson-glow); border-color: var(--m-crimson-dim); } a.cc-act-alert i { color: var(--m-crimson-bright); } .cc-act-warn { border-left-color: #f59e0b; } .cc-act-warn i { color: #f59e0b; } .cc-note i { color: var(--m-text-dim); } @media (prefers-reduced-motion: reduce) { a.cc-act-alert { transition: none; } a.cc-act-alert:hover { transform: none; } } /* ── Help hub: the "?" nav button, its slide-in panel, and the guided tour ──── */ .nl-help-btn { width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--m-border); background: var(--m-surface); color: var(--m-text-muted); cursor: pointer; font-size: 14px; transition: color .15s, border-color .15s, background .15s; } .nl-help-btn:hover, .nl-help-btn[aria-expanded="true"] { color: var(--m-crimson-bright); border-color: var(--m-crimson-dim); background: var(--m-surface-2); } .help-scrim { position: fixed; inset: 0; background: rgba(4,4,8,.5); opacity: 0; transition: opacity .2s; z-index: 1200; } .help-scrim.is-open { opacity: 1; } .help-panel { position: fixed; top: 0; right: 0; height: 100vh; width: min(390px, 94vw); background: var(--m-surface); border-left: 1px solid var(--m-border); box-shadow: -24px 0 70px -30px rgba(0,0,0,.7); transform: translateX(100%); transition: transform .2s ease; z-index: 1201; overflow-y: auto; display: flex; flex-direction: column; } .help-panel.is-open { transform: none; } .help-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: var(--m-surface); border-bottom: 1px solid var(--m-border); z-index: 1; } .help-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; font-size: 15px; color: var(--m-text); } .help-title i { color: var(--m-crimson-bright); margin-right: 6px; } .help-close { background: none; border: none; color: var(--m-text-muted); font-size: 18px; cursor: pointer; padding: 4px 6px; border-radius: 6px; } .help-close:hover { color: var(--m-text); background: var(--m-surface-2); } .help-body { padding: 16px 18px 22px; display: flex; flex-direction: column; gap: 16px; } .help-tour-start { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: linear-gradient(135deg, rgba(225,29,58,.12) 0%, var(--m-surface-2) 70%); border: 1px solid var(--m-crimson-dim); border-radius: 12px; padding: 13px 15px; color: var(--m-text); cursor: pointer; transition: border-color .15s, transform .15s; } .help-tour-start:hover { border-color: var(--m-crimson); transform: translateY(-1px); } .help-tour-start > i:first-child { color: var(--m-crimson-bright); font-size: 16px; flex: none; } .help-tour-start span { display: flex; flex-direction: column; gap: 2px; } .help-tour-start strong { font-family: var(--font-display); font-size: 14px; } .help-tour-start small { color: var(--m-text-muted); font-size: 12px; } .help-tour-go { margin-left: auto; color: var(--m-crimson-bright); flex: none; } .help-label { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: var(--m-text-muted); margin-bottom: 7px; } .help-ask-form { display: flex; gap: 8px; } .help-ask-input { flex: 1; min-width: 0; background: var(--m-bg); border: 1px solid var(--m-border); border-radius: 9px; padding: 10px 12px; color: var(--m-text); font-size: 14px; } .help-ask-input:focus { outline: none; border-color: var(--m-crimson-dim); } .help-ask-send { flex: none; width: 42px; border: none; border-radius: 9px; background: var(--m-crimson); color: #fff; cursor: pointer; font-size: 14px; } .help-ask-send:hover { background: var(--m-crimson-bright); } .help-ask-send:disabled { opacity: .6; cursor: default; } .help-answer { margin-top: 10px; background: var(--m-surface-2); border: 1px solid var(--m-border); border-left: 3px solid var(--m-crimson); border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.55; color: var(--m-text); } .help-answer.help-answer-note { border-left-color: var(--m-border); color: var(--m-text-muted); } .help-answer a { color: var(--m-crimson-bright); } .help-typing { color: var(--m-text-muted); } .help-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .help-links a { display: flex; align-items: center; gap: 9px; background: var(--m-surface-2); border: 1px solid var(--m-border); border-radius: 9px; padding: 10px 12px; color: var(--m-text); text-decoration: none; font-size: 13px; transition: border-color .15s; } .help-links a:hover { border-color: var(--m-crimson-dim); } .help-links a i { color: var(--m-crimson-bright); width: 16px; text-align: center; } .help-faq-h { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: var(--m-text-muted); margin-bottom: 8px; } .help-faq details { border: 1px solid var(--m-border); border-radius: 9px; margin-bottom: 8px; overflow: hidden; } .help-faq summary { padding: 11px 14px; cursor: pointer; font-size: 13.5px; color: var(--m-text); list-style: none; font-family: var(--font-display); } .help-faq summary::-webkit-details-marker { display: none; } .help-faq summary::before { content: "+"; color: var(--m-crimson-bright); margin-right: 8px; font-weight: 700; } .help-faq details[open] summary::before { content: "\2013"; } .help-faq details[open] summary { border-bottom: 1px solid var(--m-border); } .help-faq p { margin: 0; padding: 11px 14px; font-size: 13px; line-height: 1.55; color: var(--m-text-muted); } .help-faq p a, .help-foot a { color: var(--m-crimson-bright); } .help-faq code { background: var(--m-bg); border: 1px solid var(--m-border); border-radius: 4px; padding: 1px 5px; font-size: 12px; } .help-foot { font-size: 12.5px; color: var(--m-text-muted); margin: 0; } /* The guided tour: a spotlight cut into a dim page, with a popover of instructions. */ .tour-spot { position: fixed; z-index: 2000; border-radius: 10px; border: 2px solid var(--m-crimson-bright); box-shadow: 0 0 0 9999px rgba(6,6,10,.74), 0 0 22px 2px var(--m-crimson-glow); pointer-events: none; transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; } .tour-pop { position: fixed; z-index: 2001; width: min(324px, 92vw); background: var(--m-surface-2); border: 1px solid var(--m-crimson-dim); border-radius: 12px; padding: 15px 16px; box-shadow: 0 26px 70px -24px rgba(0,0,0,.8); transition: top .2s ease, left .2s ease; } .tour-pop-title { font-family: var(--font-display); font-size: 15px; color: var(--m-text); text-transform: uppercase; letter-spacing: .02em; } .tour-pop-title:empty { display: none; } .tour-pop-text { color: var(--m-text-muted); font-size: 13.5px; line-height: 1.55; margin-top: 7px; } .tour-pop-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; } .tour-progress { font-family: var(--font-display); font-size: 12px; color: var(--m-text-dim); font-variant-numeric: tabular-nums; } .tour-help { background: none; border: none; padding: 0; font-size: 12px; color: var(--m-text-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .tour-help:hover { color: var(--m-crimson-bright); } .tour-btns { display: flex; gap: 7px; margin-left: auto; } .tour-btns button { border-radius: 8px; padding: 7px 13px; font-size: 13px; cursor: pointer; border: 1px solid var(--m-border); background: var(--m-surface); color: var(--m-text-muted); } .tour-btns .tour-next { background: var(--m-crimson); border-color: var(--m-crimson); color: #fff; font-family: var(--font-display); } .tour-btns .tour-next:hover { background: var(--m-crimson-bright); } .tour-btns .tour-back:hover, .tour-btns .tour-skip:hover { color: var(--m-text); border-color: var(--m-crimson-dim); } @media (prefers-reduced-motion: reduce) { .help-panel, .help-scrim, .tour-spot, .tour-pop { transition: none; } }