/* ============================================================ Mythic Race Québec — shared theme Design system: "Cluster Kaizen" (dark esports) w/ Québec-blue accent ============================================================ */ /* ---- Fonts (self-hosted Satoshi, WOFF2) ---- */ @font-face { font-family:"Satoshi"; src:url("../fonts/Satoshi-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:"Satoshi"; src:url("../fonts/Satoshi-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:"Satoshi"; src:url("../fonts/Satoshi-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:"Satoshi"; src:url("../fonts/Satoshi-Black.woff2") format("woff2"); font-weight:900; font-style:normal; font-display:swap; } @font-face { font-family:"Satoshi"; src:url("../fonts/Satoshi-BlackItalic.woff2") format("woff2"); font-weight:900; font-style:italic; font-display:swap; } /* ---- Tokens ---- */ :root{ /* Surfaces */ --bg-primary:#141414; --bg-secondary:#121212; --bg-tertiary:#1B1B1B; --bg-raised:#242424; --bg-deep:#0A0A0A; /* Text */ --fg-primary:#FFFFFF; --fg-secondary:#D1D1D1; --fg-tertiary:#999AA7; --fg-quat:#61646C; /* Borders */ --border-subtle:#242424; --border-default:#323439; --border-strong:#575A61; /* Brand — Québec blue */ --brand:#3B7DF0; --brand-hi:#6BA0F7; --brand-press:#1E4FB0; /* Secondary — ice blue */ --mythic:#7FB0FF; --mythic-deep:#3B63B8; /* Semantic */ --success:#57D193; --warning:#FDB022; --error:#F46060; /* Type */ --sans:"Satoshi",system-ui,-apple-system,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; /* Layout */ --maxw:1180px; --ease:cubic-bezier(.2,.8,.2,1); } /* ---- Light theme (opt-in via [data-theme="light"] on ) ---- */ :root[data-theme="light"]{ --bg-primary:#F4F5F7; --bg-secondary:#EAEBEF; --bg-tertiary:#FFFFFF; --bg-raised:#FFFFFF; --bg-deep:#E8E9ED; --fg-primary:#15171C; --fg-secondary:#454A55; --fg-tertiary:#6B7280; --fg-quat:#9AA0AC; --border-subtle:#E2E4E9; --border-default:#D3D6DD; --border-strong:#AEB2BD; --brand:#2F6FED; --brand-hi:#1E4FB0; --brand-press:#173FA0; --mythic:#3B63B8; --mythic-deep:#1E4FB0; --success:#15803D; --warning:#B45309; --error:#C0292A; } /* ---- Reset / base ---- */ *{box-sizing:border-box;} html{scroll-behavior:smooth;} html,body{margin:0;padding:0;} body{ background:var(--bg-primary); color:var(--fg-primary); font-family:var(--sans); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } a{color:var(--brand); text-decoration:none; transition:color .15s var(--ease);} a:hover{color:var(--brand-hi);} ::selection{background:var(--brand); color:#141414;} img,svg{display:block;} h1,h2,h3,h4{margin:0; font-weight:900; letter-spacing:-.02em; line-height:1.02;} p{margin:0;} button{font-family:var(--sans);} input,select,textarea{font-family:var(--sans);} input::placeholder,textarea::placeholder{color:var(--fg-quat);} input:focus,select:focus,textarea:focus{outline:none; border-color:var(--brand)!important;} :focus-visible{outline:2px solid var(--brand-hi); outline-offset:2px;} /* ---- Layout helpers ---- */ .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;} .section{padding:88px 0;} @media (max-width:640px){ .wrap{padding:0 20px;} .section{padding:60px 0;} } /* ---- Eyebrow (mono, uppercase, ruled) ---- */ .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--brand); } .eyebrow .rule{width:24px; height:1px; background:var(--brand);} .eyebrow--mythic{color:var(--mythic);} .eyebrow--mythic .rule{background:var(--mythic);} /* ---- Buttons ---- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans); font-weight:700; font-size:15px; padding:14px 24px; border-radius:12px; border:1px solid transparent; cursor:pointer; transition:background .15s var(--ease),border-color .15s var(--ease),transform .15s var(--ease),color .15s var(--ease); white-space:nowrap; } .btn-primary{ background:var(--brand); color:#FFFFFF; box-shadow:0 10px 30px -8px rgba(59,125,240,.7); } .btn-primary:hover{ background:var(--brand-hi); color:#FFFFFF; } .btn-primary:active{ background:var(--brand-press); } .btn-outline{ background:transparent; color:var(--fg-primary); border-color:var(--border-strong); } .btn-outline:hover{ border-color:var(--brand); color:var(--fg-primary); } .btn-mythic{ background:var(--mythic); color:#0B1B33; box-shadow:0 10px 30px -8px rgba(127,176,255,.55); } .btn-mythic:hover{ background:#9CC2FF; } .btn-bnet{ background:#000000; color:#FFFFFF; border-color:#000000; position:relative; } .btn-bnet:hover{ background:#1A1A1A; border-color:#1A1A1A; } .btn-bnet-label{ display:inline-flex; align-items:center; gap:8px; } .btn-loading-dots{ display:none; align-items:center; gap:6px; } .btn-bnet.loading{ pointer-events:none; } .btn-bnet.loading .btn-bnet-label{ visibility:hidden; } .btn-bnet.loading .btn-loading-dots{ display:flex; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } .btn-loading-dots span{ width:7px; height:7px; border-radius:50%; background:#FFFFFF; animation:btnDotPulse 1.2s ease-in-out infinite; } .btn-loading-dots span:nth-child(2){ animation-delay:.15s; } .btn-loading-dots span:nth-child(3){ animation-delay:.3s; } @keyframes btnDotPulse{ 0%,80%,100%{ opacity:.3; transform:scale(.8); } 40%{ opacity:1; transform:scale(1); } } /* ---- Cards ---- */ .card{ background:var(--bg-tertiary); border:1px solid var(--border-default); border-radius:20px; transition:transform .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease); } .card--grad{ background:linear-gradient(180deg,#1B1B1B,#121212); } .hovlift:hover{ transform:translateY(-4px); border-color:var(--brand); } .hovlift--mythic:hover{ border-color:var(--mythic); } /* ---- Pills / badges ---- */ .badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:8px 14px; border-radius:9999px; border:1px solid var(--border-default); } .badge-success{ color:var(--success); border-color:rgba(87,209,147,.4); background:rgba(87,209,147,.08); } .badge-warning{ color:var(--warning); border-color:rgba(253,176,34,.4); background:rgba(253,176,34,.08); } .badge-mythic{ color:var(--mythic); border-color:rgba(127,176,255,.4); background:rgba(127,176,255,.08); } .badge .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; } /* ---- Forms ---- */ .field{ display:flex; flex-direction:column; gap:8px; } .field label{ font-size:13.5px; font-weight:600; color:var(--fg-secondary); } .input, .select, .textarea{ width:100%; background:var(--bg-tertiary); border:1px solid var(--border-default); border-radius:12px; padding:14px 16px; color:var(--fg-primary); font-size:15px; transition:border-color .15s var(--ease); } .textarea{ resize:vertical; min-height:110px; line-height:1.5; } .select{ appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999AA7' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; } .form-error{ margin-top:4px; font-size:13px; color:#FDA29B; background:rgba(244,96,96,.1); border-radius:8px; padding:8px 12px; } .form-success{ background:rgba(87,209,147,.08); border:1px solid var(--success); border-radius:16px; padding:24px 26px; } .form-success h3{ color:#8FE7B8; font-size:18px; margin-bottom:6px; } .form-success p{ font-size:14px; line-height:1.55; color:var(--fg-secondary); } /* ---- EN/FR lang toggle ---- */ /* align-self:flex-start stops the flex-column dropdown parent's default align-items:stretch from forcing this pill to the dropdown's full width — without it, icon-only toggles (Appearance) leave an empty rounded segment past the last button. */ .langtoggle{ display:inline-flex; align-self:flex-start; border:1px solid var(--border-default); border-radius:9999px; overflow:hidden; } .langtoggle button{ display:inline-flex; align-items:center; justify-content:center; padding:7px 14px; border:none; cursor:pointer; background:transparent; color:var(--fg-secondary); font-weight:700; font-size:12px; letter-spacing:.04em; transition:background .15s var(--ease),color .15s var(--ease); } .langtoggle button[aria-pressed="true"]{ background:var(--brand); color:#FFFFFF; } /* ---- Sticky nav ---- */ .nav{ position:sticky; top:0; z-index:50; background:rgba(10,10,10,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--border-subtle); } :root[data-theme="light"] .nav{ background:rgba(255,255,255,.78); } .nav-inner{ max-width:1300px; margin:0 auto; padding:10px 32px; position:relative; display:flex; align-items:center; gap:20px; } .brand-lockup{ display:inline-flex; align-items:center; gap:10px; } .brand-lockup .mark{ width:30px; height:30px; } .wordmark{ font-weight:900; font-size:16px; letter-spacing:.02em; white-space:nowrap; color:var(--fg-primary); } .wordmark .qc{ color:var(--brand); } .nav-collapse{ display:flex; align-items:center; gap:20px; min-width:0; margin-left:auto; } .nav-links{ display:flex; align-items:center; gap:20px; margin-left:8px; flex-wrap:nowrap; } .nav-links a{ color:var(--fg-secondary); font-size:14px; font-weight:500; white-space:nowrap; transition:color .15s var(--ease); } .nav-links a:hover{ color:var(--fg-primary); } /* Desktop only: a real 4-column grid (brand | links | cta | icons+account) instead of absolutely-centering .nav-links over a flex row. The absolute version measured clean in testing but broke once logged in — a long account name (e.g. "David Lafleur") widens .nav-right enough to collide with the centered links, since absolute positioning has no way to react to the actual width of its neighbors. Grid columns can't overlap, so the worst case here is links optically off true-center when the two side zones differ a lot in width, never overlapping text. */ @media (min-width:1301px){ .nav-inner{ display:grid; grid-template-columns:auto 1fr auto auto; } .nav-collapse{ display:contents; } /* grid-row:1 on all four is load-bearing: .nav-cta (col 3) precedes .nav-links (col 2) in the DOM, and without it the auto-placement cursor — which only moves forward under sparse packing — pushes .nav-links to a second implicit row instead of backfilling the empty col-2 cell. */ .brand-lockup{ grid-column:1; grid-row:1; } .nav-links{ grid-column:2; grid-row:1; justify-self:center; margin-left:0; } .nav-cta{ grid-column:3; grid-row:1; justify-self:end; } .nav-right{ grid-column:4; grid-row:1; justify-self:end; } } .nav-right{ display:flex; align-items:center; gap:20px; } .nav-discord-link{ display:flex; align-items:center; justify-content:center; flex:none; width:34px; height:34px; border-radius:9999px; border:1px solid var(--border-default); background:transparent; color:var(--fg-secondary); transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); } .nav-discord-link:hover{ background:var(--bg-raised); color:#5865F2; border-color:var(--border-strong); } .nav-x-link{ display:flex; align-items:center; justify-content:center; flex:none; width:34px; height:34px; border-radius:9999px; border:1px solid var(--border-default); background:transparent; color:var(--fg-secondary); transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); } .nav-x-link:hover{ background:var(--bg-raised); color:var(--fg-primary); border-color:var(--border-strong); } .nav-settings-menu{ position:relative; } .nav-settings-trigger{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9999px; border:1px solid var(--border-default); background:transparent; color:var(--fg-secondary); cursor:pointer; transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); } .nav-settings-trigger:hover{ background:var(--bg-raised); color:var(--fg-primary); border-color:var(--border-strong); } .nav-settings-dropdown{ flex-direction:column; gap:12px; min-width:170px; position:absolute; top:calc(100% + 8px); right:0; z-index:60; background:var(--bg-tertiary); border:1px solid var(--border-default); border-radius:14px; padding:14px; box-shadow:0 12px 32px -8px rgba(0,0,0,.45); } /* [hidden] must win over this rule's own display, or the JS toggle can never hide it — an author-stylesheet display declaration otherwise beats the UA [hidden]{display:none} rule regardless of specificity. */ .nav-settings-dropdown:not([hidden]){ display:flex; } .nav-settings-label{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-quat); margin-bottom:-4px; } .nav-account{ color:var(--fg-secondary); font-size:14px; font-weight:500; white-space:nowrap; transition:color .15s var(--ease); } .nav-account:hover{ color:var(--fg-primary); } .nav-toggle{ display:none; margin-left:auto; background:transparent; border:none; color:var(--fg-primary); cursor:pointer; padding:6px; } @media (max-width:1300px){ .nav-toggle{ display:flex; align-items:center; justify-content:center; } .nav-collapse{ display:none; position:absolute; top:100%; left:0; right:0; z-index:60; margin-left:0; flex-direction:column; align-items:stretch; gap:18px; background:var(--bg-primary); border-bottom:1px solid var(--border-subtle); padding:20px 32px 28px; box-shadow:0 16px 32px -16px rgba(0,0,0,.5); } .nav-collapse.open{ display:flex; } .nav-links{ flex-direction:column; align-items:flex-start; gap:14px; margin-left:0; } .nav-right{ flex-direction:column; align-items:stretch; margin-left:0; gap:14px; } .nav-toggles{ justify-content:flex-start; } } @media (max-width:860px){ .nav-inner{ padding:8px 20px; } .nav-collapse{ padding:16px 20px 24px; } } /* ---- Themed confirm modal (assets/js/i18n.js MRQ.confirm) ---- */ .mrq-modal-overlay{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(6,6,8,.62); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); animation:mrqModalFade .15s var(--ease); } @keyframes mrqModalFade{ from{ opacity:0; } to{ opacity:1; } } .mrq-modal-card{ width:100%; max-width:420px; background:var(--bg-tertiary); border:1px solid var(--border-default); border-radius:16px; padding:28px; box-shadow:0 24px 60px -16px rgba(0,0,0,.55); animation:mrqModalPop .15s var(--ease); } @keyframes mrqModalPop{ from{ opacity:0; transform:translateY(6px) scale(.98); } to{ opacity:1; transform:none; } } .mrq-modal-title{ font-size:17px; font-weight:800; color:var(--fg-primary); margin:0 0 10px; } .mrq-modal-body{ font-size:14.5px; color:var(--fg-secondary); line-height:1.6; margin:0; } .mrq-modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:26px; } .mrq-modal-btn-danger{ background:var(--error); border-color:var(--error); color:#FFFFFF; } .mrq-modal-btn-danger:hover{ background:#D93A3A; border-color:#D93A3A; } /* ---- In-page video viewer (assets/js/i18n.js MRQ.showVideo) ---- */ .mrq-video-modal-card{ width:100%; max-width:960px; position:relative; } .mrq-video-modal-frame{ position:relative; width:100%; padding-top:56.25%; border-radius:14px; overflow:hidden; background:#000; box-shadow:0 24px 60px -16px rgba(0,0,0,.55); } .mrq-video-modal-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .mrq-video-modal-close{ position:absolute; top:-42px; right:0; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.4); color:#FFFFFF; font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s var(--ease); } .mrq-video-modal-close:hover{ background:rgba(255,255,255,.18); } /* ---- Logged-in nav avatar + dropdown (assets/js/account-nav.js) ---- */ .nav-account-menu{ position:relative; } .nav-account-trigger{ display:flex; align-items:center; gap:8px; padding:5px 12px 5px 5px; border:1px solid transparent; border-radius:9999px; background:transparent; cursor:pointer; font-family:var(--sans); transition:background .15s var(--ease), border-color .15s var(--ease); } .nav-account-trigger:hover{ background:var(--bg-raised); border-color:var(--border-default); } .nav-avatar-wrap{ position:relative; flex:none; } .nav-avatar{ width:28px; height:28px; border-radius:50%; overflow:hidden; flex:none; display:flex; align-items:center; justify-content:center; background:var(--bg-raised); } /* Sibling of .nav-avatar, not a child — .nav-avatar has overflow:hidden for its circular crop, which would clip a badge positioned at a negative offset. */ .nav-avatar-badge{ position:absolute; top:-2px; right:-2px; width:9px; height:9px; border-radius:50%; background:#FDA29B; border:1.5px solid var(--bg-primary); } .nav-avatar img{ width:100%; height:100%; object-fit:cover; display:block; } .nav-avatar-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:var(--brand); color:#FFFFFF; font-weight:700; font-size:12px; } .nav-account-name{ color:var(--fg-primary); font-size:14px; font-weight:600; white-space:nowrap; max-width:220px; overflow:hidden; text-overflow:ellipsis; } .nav-account-dropdown{ position:absolute; top:calc(100% + 8px); right:0; min-width:220px; z-index:60; background:var(--bg-tertiary); border:1px solid var(--border-default); border-radius:14px; padding:8px; box-shadow:0 12px 32px -8px rgba(0,0,0,.45); } /* Below 1300px .nav-right stretches .nav-settings-menu/.nav-account-menu to the full stacked-row width, but their trigger button stays left-aligned inside that width — so right:0 (correct for the single-row desktop nav) anchors the dropdown to the far right of the whole row instead of under the trigger. This must come after the unconditional rules above to win the cascade tie — a media query doesn't add specificity, only source order does. */ @media (max-width:1300px){ .nav-settings-dropdown, .nav-account-dropdown{ left:0; right:auto; } } .nav-account-email{ padding:8px 10px; font-size:12.5px; color:var(--fg-tertiary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-bottom:1px solid var(--border-subtle); margin-bottom:6px; } .nav-account-item{ display:block; width:100%; text-align:left; padding:9px 10px; border:none; background:transparent; border-radius:8px; color:var(--fg-secondary); font-family:var(--sans); font-size:14px; font-weight:500; cursor:pointer; transition:background .12s var(--ease), color .12s var(--ease); } .nav-account-item:hover{ background:var(--bg-raised); color:var(--fg-primary); } /* ---- Footer ---- */ .footer{ border-top:1px solid var(--border-subtle); background:var(--bg-deep); padding:28px 0; margin-top:auto; } .footer-inner{ max-width:var(--maxw); margin:0 auto; padding:0 32px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; } .footer .brand-lockup .mark{ width:26px; height:26px; } .footer .wordmark{ font-size:14px; } .footer-links{ display:flex; align-items:center; gap:20px; } .footer-links a{ color:var(--fg-secondary); font-size:13px; font-weight:500; transition:color .15s var(--ease); } .footer-links a:hover{ color:var(--fg-primary); } .footer .meta{ font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; color:var(--fg-quat); } @media (max-width:640px){ .footer-inner{ padding:0 20px; } } /* ---- Legal / imagery disclaimer bar ---- */ .legal-bar{ border-top:1px solid var(--border-subtle); background:var(--bg-deep); padding:20px 32px; } .legal-bar p{ max-width:960px; margin:0 auto; font-size:11px; line-height:1.65; color:var(--fg-quat); text-align:center; } .legal-bar a{ color:var(--fg-tertiary); text-decoration:underline; } @media (max-width:640px){ .legal-bar{ padding:16px 20px; } } /* ---- Animations ---- */ @keyframes glowpulse{ 0%,100%{opacity:.55; transform:scale(1);} 50%{opacity:.92; transform:scale(1.07);} } @keyframes floaty{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} } @keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} } .glow{ animation:glowpulse 4.6s ease-in-out infinite; } .floaty{ animation:floaty 6s ease-in-out infinite; } /* ---- Hero glow background utility ---- */ .hero-bg{ background: radial-gradient(1100px 700px at 50% -10%, rgba(59,125,240,.16), transparent 60%), radial-gradient(820px 560px at 82% 24%, rgba(127,176,255,.10), transparent 55%), var(--bg-primary); } /* ---- Reduced motion ---- */ @media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; } } /* ---- i18n visibility (set html[data-lang]) ---- */ [data-lang="en"] [data-when="fr"]{ display:none!important; } [data-lang="fr"] [data-when="en"]{ display:none!important; } /* ============================================================ Component layer — shared across all site pages ============================================================ */ /* Page background glow variants (apply on or page wrapper) */ /* min-height:100vh keeps the dark background filling short pages, but without the flex column + footer margin-top:auto below, that leftover space just sits as a dead gap after the footer instead of pushing the footer to the bottom. */ .pagebg{ background:radial-gradient(1000px 500px at 50% -10%, rgba(59,125,240,.10), transparent 60%), var(--bg-primary); min-height:100vh; display:flex; flex-direction:column; } .pagebg--brandhi{ background:radial-gradient(1100px 600px at 50% -10%, rgba(59,125,240,.14), transparent 60%), var(--bg-primary); } .pagebg--mythic{ background:radial-gradient(1000px 500px at 50% -10%, rgba(127,176,255,.13), transparent 60%), var(--bg-primary); } /* Nav CTA pill */ .nav-cta{ background:var(--brand); color:#fff; font-weight:700; font-size:14px; padding:10px 20px; border-radius:9999px; box-shadow:0 6px 22px -6px rgba(59,125,240,.7); transition:background .15s var(--ease),transform .15s var(--ease); white-space:nowrap; } .nav-cta:hover{ background:var(--brand-hi); color:#fff; transform:translateY(-1px); } .nav-links a.active{ color:var(--fg-primary); font-weight:700; } /* Section shell + head width:100% is required here: .pagebg is a flex-direction:column container, and an auto margin on the cross axis (margin:0 auto) overrides align-items:stretch per the flexbox spec — without an explicit width, .sec silently shrinks to fit its own content instead of reaching max-width, varying page-to-page/tab-to-tab with how much content happens to be in it. Every page's content was coincidentally wide enough to mask this until the admin dashboard's short, low-content panels (e.g. "No runs submitted yet.") exposed it as a visibly shifting layout. */ .sec{ width:100%; max-width:var(--maxw); margin:0 auto; padding:56px 40px; } .sec--tight{ padding:40px 40px; } .sec-head{ text-align:center; margin-bottom:44px; } .kicker{ font-family:var(--mono); font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--brand); margin-bottom:14px; } .kicker--mythic{ color:var(--mythic); } .sec-title{ font-weight:900; font-size:clamp(30px,4.2vw,50px); letter-spacing:-.02em; margin:0; } /* Page header (interior pages) */ .pagehead{ max-width:1040px; margin:0 auto; padding:60px 40px 8px; text-align:center; } .pagehead h1{ font-size:clamp(38px,5.5vw,64px); line-height:1; } .pagehead .lead{ max-width:640px; margin:20px auto 0; font-size:18px; line-height:1.6; color:var(--fg-secondary); } @media (max-width:640px){ .sec{ padding:44px 20px; } .pagehead{ padding:44px 20px 4px; } } /* Grids */ .grid{ display:grid; gap:18px; } .grid-4{ grid-template-columns:repeat(4,1fr); } .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-2{ grid-template-columns:repeat(2,1fr); } @media (max-width:900px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:1fr; } } @media (max-width:640px){ .grid-4{ grid-template-columns:1fr 1fr; } .grid-2{ grid-template-columns:1fr; } } /* Stat card */ .stat{ text-align:center; padding:26px 20px; } .stat .n{ font-weight:900; font-size:40px; line-height:1; } .stat .l{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-tertiary); margin-top:10px; } /* Numbered step card */ .step{ padding:28px 24px 30px; } .step .k{ font-family:var(--mono); font-weight:700; font-size:14px; color:var(--brand); letter-spacing:.1em; } .step .bar{ width:44px; height:2px; background:var(--brand); margin:16px 0 18px; } .step h3{ font-weight:700; font-size:20px; line-height:1.15; margin:0 0 10px; } .step p{ font-size:14.5px; line-height:1.55; color:var(--fg-tertiary); } /* Marquee */ .marquee-wrap{ margin-top:56px; border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); background:var(--bg-secondary); overflow:hidden; padding:14px 0; } .marquee-track{ display:flex; gap:44px; white-space:nowrap; animation:marquee 24s linear infinite; width:max-content; font-family:var(--mono); font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-tertiary); } .marquee-track span.item{ display:inline-flex; align-items:center; gap:44px; } .marquee-track .di{ color:var(--brand); } /* Timeline */ .timeline{ display:flex; flex-direction:column; } .tl-row{ display:grid; grid-template-columns:160px 24px 1fr; align-items:start; gap:20px; padding:20px 0; border-bottom:1px solid var(--border-subtle); } .tl-row .date{ font-family:var(--mono); font-size:14px; letter-spacing:.05em; color:var(--brand); font-weight:700; padding-top:2px; } .tl-row .dot{ width:13px; height:13px; border-radius:50%; margin-top:5px; box-shadow:0 0 0 4px rgba(59,125,240,.14); } .tl-row .t{ font-weight:700; font-size:19px; margin-bottom:5px; } .tl-row .d{ font-size:14.5px; color:var(--fg-tertiary); line-height:1.5; } @media (max-width:640px){ .tl-row{ grid-template-columns:20px 1fr; } .tl-row .date{ grid-column:2; padding-top:0; margin-bottom:6px; } .tl-row .dot{ grid-row:1; } .tl-row .body{ grid-column:2; } } /* Prize card */ .prizes{ grid-template-columns:1.3fr 1fr 1fr; align-items:stretch; } @media (max-width:900px){ .prizes{ grid-template-columns:1fr; } } /* border-color reads a custom property (set inline per-card by JS) instead of being set directly as an inline style — an inline border-color would always beat the .hovlift:hover rule below, since inline styles win over stylesheet rules even over pseudo-classes, silently killing the hover highlight on every card except the one whose default color already happened to match the hover color. */ .prize{ position:relative; overflow:hidden; border-radius:22px; padding:32px 28px; display:flex; flex-direction:column; justify-content:space-between; min-height:230px; border-width:1px; border-style:solid; border-color:var(--prize-border, var(--border-default)); } .prize .place{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; } .prize .amt{ font-weight:900; font-size:clamp(26px,3vw,40px); line-height:1.02; margin-top:14px; } .prize .d{ font-size:14.5px; line-height:1.5; margin-top:18px; } .note{ text-align:center; font-size:13.5px; color:var(--fg-quat); margin-top:22px; font-family:var(--mono); letter-spacing:.05em; } /* Involve link card */ .involve{ display:block; padding:30px; color:var(--fg-primary); background:linear-gradient(180deg,var(--bg-tertiary),var(--bg-secondary)); border:1px solid var(--border-default); border-radius:22px; } .involve .tag{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; } .involve h3{ font-weight:700; font-size:22px; margin:14px 0 8px; } .involve p{ font-size:14.5px; line-height:1.55; color:var(--fg-tertiary); margin:0 0 16px; } .involve .go{ font-weight:700; font-size:14.5px; color:var(--brand); } /* Final CTA band */ .cta-band{ position:relative; overflow:hidden; border-radius:28px; border:1px solid var(--border-default); background:radial-gradient(700px 400px at 20% 0%, rgba(59,125,240,.20), transparent 60%), radial-gradient(600px 400px at 90% 100%, rgba(127,176,255,.16), transparent 60%), var(--bg-tertiary); padding:64px 40px; text-align:center; } .cta-band h2{ font-weight:900; font-size:clamp(30px,4.4vw,56px); letter-spacing:-.02em; margin:0; } .cta-band p{ max-width:560px; margin:18px auto 0; font-size:17px; color:var(--fg-secondary); line-height:1.55; } .cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px; } .btn-pill{ border-radius:9999px; padding:15px 30px; font-size:16px; } .cta-band-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; } .cta-band-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,10,16,.74), rgba(8,10,16,.86)), radial-gradient(700px 400px at 20% 0%, rgba(59,125,240,.30), transparent 60%); } /* The photo+overlay panel is always dark regardless of site theme, so its text is pinned light too. */ .cta-band-content h2{ color:#FFFFFF; } .cta-band-content p{ color:rgba(255,255,255,.82); } .cta-band-content .btn-outline{ color:#FFFFFF; border-color:rgba(255,255,255,.4); } .cta-band-content .btn-outline:hover{ color:#FFFFFF; border-color:#FFFFFF; } .cta-band-content{ position:relative; } /* ---- Landing hero photo band ---- */ .hero-photo-wrap{ position:relative; overflow:hidden; } .hero-photo-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; } /* Always fades to a fixed dark tone at the bottom, never to var(--bg-primary): in light theme that's near-white, which would wash out the light-colored hero text and countdown clock still sitting in that fade zone. */ .hero-photo-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,10,16,.56) 0%, rgba(8,10,16,.84) 55%, rgba(8,10,16,.95) 100%), radial-gradient(900px 520px at 50% 0%, rgba(59,125,240,.30), transparent 62%); } .hero-photo-wrap #top{ position:relative; z-index:1; } /* The photo+overlay panel is always dark regardless of site theme, so hero text is pinned light too. */ .hero-photo-wrap #top .eyebrow{ color:rgba(255,255,255,.85); } .hero-photo-wrap #top .eyebrow .rule{ background:rgba(255,255,255,.55); } .hero-photo-wrap #top h1{ color:#FFFFFF; } .hero-photo-wrap #top h1 [data-i18n="brandRegion"]{ color:#8FBEFF !important; } .hero-photo-wrap #top [data-i18n="sub"]{ color:#FFFFFF !important; } .hero-photo-wrap #top p{ color:rgba(255,255,255,.82) !important; } .hero-photo-wrap #top [data-i18n="location"], .hero-photo-wrap #top [data-i18n="countdown"], .hero-photo-wrap #top .lab{ color:rgba(255,255,255,.7) !important; } .hero-photo-wrap #top .val{ color:#8FBEFF !important; } .hero-photo-wrap #top .clock-unit{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.22); backdrop-filter:blur(6px); } .hero-photo-wrap #top .btn-outline{ color:#FFFFFF !important; border-color:rgba(255,255,255,.4) !important; } .hero-photo-wrap #top .btn-outline:hover{ color:#FFFFFF !important; border-color:#FFFFFF !important; } /* ---- Key-art band (Landing) ---- */ @keyframes spin360{ from{transform:translate(-50%,-50%) rotate(0deg);} to{transform:translate(-50%,-50%) rotate(360deg);} } @keyframes emberdrift{ 0%{transform:translateY(0) scale(1); opacity:0;} 10%{opacity:.9;} 90%{opacity:.6;} 100%{transform:translateY(-140px) scale(.4); opacity:0;} } .keyart-band{ position:relative; margin-top:64px; } .keyart-inner{ position:relative; max-width:1200px; margin:0 auto; padding:0 40px; } .keyart-panel{ position:relative; border-radius:24px; overflow:hidden; border:1px solid var(--border-default); min-height:480px; display:flex; align-items:center; justify-content:center; background:radial-gradient(120% 95% at 50% 0%, rgba(59,125,240,.20), transparent 55%), radial-gradient(80% 80% at 50% 108%, rgba(127,176,255,.12), transparent 60%), linear-gradient(180deg,#0C1220,#090b12 60%,#070707); } .keyart-ring{ position:absolute; top:50%; left:50%; border-radius:50%; pointer-events:none; } .keyart-ring--outer{ width:560px; height:560px; max-width:92vw; max-height:92vw; border:1px dashed rgba(127,176,255,.22); animation:spin360 46s linear infinite; } .keyart-ring--inner{ width:430px; height:430px; max-width:74vw; max-height:74vw; border:1px solid rgba(59,125,240,.20); animation:spin360 30s linear infinite reverse; } .keyart-glow{ position:absolute; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle, rgba(59,125,240,.38), transparent 62%); filter:blur(34px); animation:glowpulse 5s ease-in-out infinite; pointer-events:none; } .keyart-ember{ position:absolute; bottom:0; border-radius:50%; box-shadow:0 0 8px var(--brand); animation:emberdrift 6s linear infinite; pointer-events:none; } .keyart-viewport{ position:relative; width:min(720px,86%); height:360px; z-index:2; border-radius:16px; overflow:hidden; } .keyart-viewport img{ width:100%; height:100%; object-fit:cover; display:block; } .keyart-viewport .frame{ position:absolute; inset:-6px; border-radius:22px; border:1px solid rgba(127,176,255,.42); box-shadow:0 0 46px -8px rgba(59,125,240,.55); pointer-events:none; } .keyart-caption{ position:absolute; bottom:16px; left:0; right:0; text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-quat); pointer-events:none; } /* ---- Season gallery (Landing) ---- */ .gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:28px; } @media (max-width:900px){ .gallery{ grid-template-columns:repeat(2,1fr); } } .galcard{ position:relative; margin:0; display:block; overflow:hidden; border-radius:18px; border:1px solid var(--border-default); aspect-ratio:236/430; transition:border-color .18s var(--ease); } .galcard:hover{ border-color:var(--brand); } .galcard img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s cubic-bezier(.2,.8,.2,1); } .galcard:hover img{ transform:scale(1.06); } .galcard figcaption{ position:absolute; left:0; right:0; bottom:0; padding:36px 16px 16px; background:linear-gradient(180deg,transparent,rgba(7,7,7,.92)); } .galcard .gtag{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:6px; } .galcard .gname{ font-weight:700; font-size:16px; line-height:1.15; color:#FFFFFF; } /* Fact chips (rules) */ .facts{ grid-template-columns:repeat(3,1fr); } @media (max-width:640px){ .facts{ grid-template-columns:1fr; } } .fact{ padding:22px; } .fact .l{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-tertiary); } .fact .v{ font-weight:700; font-size:20px; margin-top:8px; } /* Rule section card */ .rule-card{ padding:32px 34px; } .rule-card .head{ display:flex; align-items:baseline; gap:16px; margin-bottom:20px; } .rule-card .k{ font-family:var(--mono); font-weight:700; font-size:15px; color:var(--brand); } .rule-card h2{ font-weight:700; font-size:26px; letter-spacing:-.01em; margin:0; } .bullets{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; } .bullets li{ display:grid; grid-template-columns:20px 1fr; gap:14px; align-items:start; font-size:15.5px; line-height:1.55; color:var(--fg-secondary); } .bullets .di{ color:var(--brand); } /* Score card + dungeon pool */ .score{ padding:28px 26px; } .score .w{ font-weight:900; font-size:44px; line-height:1; color:var(--brand); } .score .t{ font-weight:700; font-size:18px; margin:14px 0 8px; } .score p{ font-size:14px; line-height:1.55; color:var(--fg-tertiary); margin:0; } .pool{ padding:32px 34px; } .pool .head{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:22px; } .pool h2{ font-weight:700; font-size:24px; margin:0; } .pool .n{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--fg-tertiary); } .dungeons{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } @media (max-width:640px){ .dungeons{ grid-template-columns:1fr 1fr; } } .dungeon{ background:var(--bg-secondary); border:1px solid var(--border-subtle); border-radius:14px; padding:16px; } .dungeon .tag{ font-family:var(--mono); font-size:11px; color:var(--mythic); letter-spacing:.1em; } .dungeon .nm{ font-weight:700; font-size:15px; margin-top:8px; line-height:1.25; } /* Leaderboard */ .lb-head{ width:100%; max-width:1080px; margin:0 auto; padding:60px 40px 8px; box-sizing:border-box; } .lb-top{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:20px; } .lb-tabs{ display:inline-flex; background:var(--bg-tertiary); border:1px solid var(--border-default); border-radius:9999px; padding:5px; gap:4px; flex-wrap:wrap; } .lb-tab{ padding:9px 20px; border:none; border-radius:9999px; cursor:pointer; background:transparent; color:var(--fg-secondary); font-family:var(--sans); font-weight:700; font-size:13px; white-space:nowrap; transition:background .15s,color .15s; } .lb-tab:not([aria-selected="true"]){ background:var(--bg-raised); } .lb-tab:not([aria-selected="true"]):hover{ color:var(--fg-primary); } .lb-tab[aria-selected="true"]{ background:var(--brand); color:#fff; } .lb-table{ background:var(--bg-tertiary); border:1px solid var(--border-default); border-radius:20px; overflow:hidden; } .lb-grid{ display:grid; grid-template-columns:70px 1fr 130px 150px 110px; gap:16px; padding:16px 24px; align-items:center; } .lb-colhead{ border-bottom:1px solid var(--border-default); font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-tertiary); } .lb-row{ border-bottom:1px solid var(--border-subtle); transition:background .14s; } .lb-row:hover{ background:var(--bg-raised); } .lb-rank{ display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; border-radius:9px; font-family:var(--mono); font-weight:700; font-size:15px; } .lb-team{ display:flex; align-items:center; gap:12px; min-width:0; } .lb-team .sq{ width:10px; height:10px; border-radius:2px; flex:none; } .lb-team .nm{ font-weight:700; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lb-team .pl{ font-size:12.5px; color:var(--fg-tertiary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lb-key{ text-align:center; font-family:var(--mono); font-size:14px; color:var(--mythic); font-weight:700; } .lb-time{ text-align:right; font-family:var(--mono); font-size:15px; color:var(--fg-secondary); } .lb-pts{ text-align:right; font-family:var(--mono); font-weight:700; font-size:17px; color:var(--brand); } @media (max-width:720px){ .lb-grid{ grid-template-columns:48px 1fr 84px; } .lb-time,.lb-colhead .c-time{ display:none; } .lb-key,.lb-colhead .c-key{ display:none; } } /* Role cards (team) + tiers (sponsors) */ .role-card{ display:flex; flex-direction:column; padding:30px 28px 32px; background:linear-gradient(180deg,var(--bg-tertiary),var(--bg-secondary)); } .role-card .rhead{ display:flex; align-items:center; gap:12px; } .role-card .rbadge{ display:inline-flex; align-items:center; justify-content:center; padding:0 12px; height:40px; border-radius:11px; font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.06em; } .role-card h2{ font-weight:700; font-size:22px; letter-spacing:-.01em; margin:0; } .role-card .blurb{ font-size:14.5px; line-height:1.55; color:var(--fg-secondary); margin:18px 0; } .role-card .need-l{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-quat); margin-bottom:6px; } .role-card .need-d{ font-size:13.5px; line-height:1.5; color:var(--fg-secondary); } .role-card .foot{ margin-top:auto; padding-top:16px; border-top:1px solid var(--border-subtle); } .duties{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:9px; } .duties li{ display:grid; grid-template-columns:16px 1fr; gap:11px; align-items:start; font-size:13.5px; line-height:1.5; color:var(--fg-tertiary); } .tier{ display:flex; flex-direction:column; position:relative; overflow:hidden; padding:30px 28px 32px; } .tier .ftag{ position:absolute; top:16px; right:16px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:var(--brand); padding:4px 9px; border-radius:9999px; font-weight:700; } .tier .tname{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; } .tier .price{ font-weight:900; font-size:30px; line-height:1.05; margin:12px 0 6px; } .tier .tsub{ font-size:13px; color:var(--fg-tertiary); margin-bottom:18px; } .perks{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:10px; } .perks li{ display:grid; grid-template-columns:16px 1fr; gap:11px; align-items:start; font-size:13.5px; line-height:1.5; color:var(--fg-secondary); } .tier .tbtn{ margin-top:auto; text-align:center; font-weight:700; font-size:14.5px; padding:13px; border-radius:12px; border:1px solid; } .why-card{ padding:34px; display:grid; grid-template-columns:1fr 1fr; gap:28px 40px; } @media (max-width:640px){ .why-card{ grid-template-columns:1fr; } } .why-item{ display:grid; grid-template-columns:20px 1fr; gap:14px; align-items:start; } .why-item .di{ color:var(--brand); font-size:15px; } .why-item .t{ font-weight:700; font-size:16px; margin-bottom:4px; } .why-item .d{ font-size:14px; line-height:1.55; color:var(--fg-tertiary); } /* Forms */ .form-card{ padding:34px 34px 38px; } .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .form-grid.mt{ margin-top:16px; } @media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } } .f-label{ display:flex; flex-direction:column; gap:8px; font-size:13.5px; font-weight:600; color:var(--fg-secondary); } .f-input,.f-select,.f-textarea{ background:var(--bg-secondary); border:1px solid var(--border-default); border-radius:12px; padding:13px 15px; color:var(--fg-primary); font-size:15px; } .f-textarea{ resize:vertical; line-height:1.5; min-height:110px; } .f-select{ cursor:pointer; } .sec-label{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--brand); } .roster-rows{ display:flex; flex-direction:column; gap:12px; } .roster-row{ display:grid; grid-template-columns:44px 1fr 190px; gap:12px; align-items:center; background:var(--bg-secondary); border:1px solid var(--border-default); border-radius:14px; padding:10px 12px; transition:border-color .15s; } .roster-row.filled{ border-color:var(--border-strong); } .roster-row .rtag{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; font-family:var(--mono); font-weight:700; font-size:13px; } .roster-row .rname{ background:transparent; border:none; color:var(--fg-primary); font-size:15px; padding:6px 2px; } .roster-row .rname:focus{ outline:none; } .roster-row .rrole{ background:var(--bg-tertiary); border:1px solid var(--border-default); border-radius:10px; padding:11px 12px; color:var(--fg-primary); font-size:14px; cursor:pointer; } @media (max-width:560px){ .roster-row{ grid-template-columns:44px 1fr; } .roster-row .rrole{ grid-column:2; } } .btn-block{ width:100%; padding:16px; border-radius:14px; font-size:16px; border:none; cursor:pointer; } .form-note{ text-align:center; font-size:12.5px; color:var(--fg-quat); margin-top:16px; font-family:var(--mono); letter-spacing:.04em; } .big-success{ border-radius:24px; padding:56px 40px; text-align:center; } .big-success .check{ display:inline-flex; width:74px; height:74px; align-items:center; justify-content:center; border-radius:50%; font-size:34px; margin-bottom:24px; } .big-success h2{ font-weight:900; font-size:32px; letter-spacing:-.01em; margin:0 0 12px; } .big-success p{ font-size:16px; line-height:1.6; color:var(--fg-secondary); margin:0 auto; max-width:440px; } /* Status badge dot glow */ .badge .dot.glow-dot{ box-shadow:0 0 10px currentColor; } /* ---- Account dashboard ---- */ .dash-stack{ display:flex; flex-direction:column; gap:20px; } .dash-row-2col{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; } @media (max-width:700px){ .dash-row-2col{ grid-template-columns:1fr; } } .dash-card{ padding:26px; } /* Character cards (Battle.net) */ .char-card{ display:flex; flex-direction:column; gap:10px; padding:10px; background:var(--bg-secondary); border:1px solid var(--border-default); border-radius:10px; } .char-card-top{ display:flex; align-items:center; gap:12px; } .char-avatar{ width:44px; height:44px; border-radius:8px; object-fit:cover; flex-shrink:0; background:var(--bg-tertiary); } .char-avatar--placeholder{ display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; color:var(--fg-tertiary); } /* Registered teams directory (teams.html) */ .teams-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px; } @media (max-width:960px){ .teams-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .teams-grid{ grid-template-columns:1fr; } } .team-card{ padding:22px; } .team-card-head{ display:flex; align-items:center; gap:12px; } .team-logo{ width:48px; height:48px; border-radius:12px; object-fit:cover; flex:none; background:var(--bg-secondary); } .team-logo-fallback{ width:48px; height:48px; border-radius:12px; flex:none; } .team-name{ font-weight:700; font-size:17px; color:var(--fg-primary); } .team-region{ font-size:13px; color:var(--fg-tertiary); margin-top:2px; } .team-roster{ margin-top:16px; display:flex; flex-direction:column; gap:6px; } .team-roster-row{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--fg-secondary); } .team-roster-tag{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-quat); min-width:38px; } .teams-empty{ padding:48px 24px; text-align:center; color:var(--fg-tertiary); } .char-info{ flex:1; min-width:0; } .char-name-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .char-name-row strong{ font-size:14.5px; } .char-realm{ font-size:11.5px; color:var(--fg-tertiary); text-transform:capitalize; } .char-badge{ font-size:10.5px; font-family:var(--mono); letter-spacing:.04em; padding:1px 6px; border-radius:6px; } .char-badge--main{ color:var(--brand); background:rgba(59,125,240,.14); } .char-badge--needed{ color:var(--success); background:rgba(87,209,147,.14); } .char-link{ color:var(--fg-quat); font-size:13px; } .char-link:hover{ color:var(--fg-tertiary); } .char-meta{ font-size:12.5px; color:var(--fg-tertiary); margin-top:2px; } .char-main-btn{ padding:6px 12px; font-size:12.5px; width:100%; } /* ---- Raider.IO-style Mythic+ score badge, tier-colored like raider.io itself ---- */ .char-score{ display:inline-flex; align-items:baseline; gap:6px; margin-top:8px; padding:6px 10px; border-radius:8px; border:1px solid; width:fit-content; background:var(--bg-tertiary); } .char-score strong{ font-family:var(--mono); font-size:16px; font-weight:900; line-height:1; } .char-score span{ font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-tertiary); } /* WoW class colors. Several of the canonical hex values (Rogue's pale yellow, Monk's neon green, Mage's pale blue, etc. — and Priest's pure white, which isn't included here at all) are unreadable against the light theme's pale card background, so light mode gets its own darker, still-recognizable variant of each rather than losing the color distinction entirely. */ .char-class-death-knight{ color:#C41F3B; } .char-class-demon-hunter{ color:#A330C9; } .char-class-druid{ color:#FF7D0A; } .char-class-hunter{ color:#ABD473; } .char-class-mage{ color:#69CCF0; } .char-class-monk{ color:#00FF96; } .char-class-paladin{ color:#F58CBA; } .char-class-rogue{ color:#FFF569; } .char-class-shaman{ color:#0070DE; } .char-class-warlock{ color:#9482C9; } .char-class-warrior{ color:#C79C6E; } :root[data-theme="light"] .char-class-death-knight{ color:#A3182F; } :root[data-theme="light"] .char-class-demon-hunter{ color:#8C2AA8; } :root[data-theme="light"] .char-class-druid{ color:#A65500; } :root[data-theme="light"] .char-class-hunter{ color:#46703A; } :root[data-theme="light"] .char-class-mage{ color:#1B6E96; } :root[data-theme="light"] .char-class-monk{ color:#007A52; } :root[data-theme="light"] .char-class-paladin{ color:#B23368; } :root[data-theme="light"] .char-class-rogue{ color:#6B5900; } :root[data-theme="light"] .char-class-shaman{ color:#0058B0; } :root[data-theme="light"] .char-class-warlock{ color:#5D4A99; } :root[data-theme="light"] .char-class-warrior{ color:#6E5029; } /* FAQ accordion (faq.html) — native

, no JS toggle needed */ .faq-list{ display:flex; flex-direction:column; gap:12px; } .faq-item{ background:var(--bg-tertiary); border:1px solid var(--border-default); border-radius:14px; padding:2px 22px; } .faq-item summary{ list-style:none; cursor:pointer; padding:20px 0; font-weight:700; font-size:16px; color:var(--fg-primary); display:flex; align-items:center; justify-content:space-between; gap:16px; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary::after{ content:'+'; font-size:22px; line-height:1; color:var(--fg-tertiary); flex:none; } .faq-item[open] summary::after{ content:'−'; } .faq-item .faq-answer{ padding:0 0 20px; font-size:14.5px; line-height:1.65; color:var(--fg-secondary); } .faq-item .faq-answer a{ color:var(--brand); } .faq-note{ text-align:center; font-size:14px; color:var(--fg-tertiary); margin-top:28px; } .faq-note a{ color:var(--brand); } /* Group stage + playoff bracket (bracket.html) */ .groups-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin-top:20px; } .group-card{ padding:20px; } .group-card h3{ margin:0 0 12px; font-size:15px; } .group-team-row{ display:flex; align-items:center; gap:10px; padding:6px 0; font-size:14px; color:var(--fg-secondary); } .bracket-rounds{ display:flex; gap:24px; overflow-x:auto; margin-top:28px; padding-bottom:8px; } .bracket-round{ min-width:240px; flex:none; } .bracket-round h3{ font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--fg-tertiary); font-family:var(--mono); margin:0 0 14px; } .bracket-match{ padding:14px; margin-bottom:14px; } .bracket-side{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; font-size:14px; color:var(--fg-secondary); } .bracket-side.winner{ color:var(--fg-primary); font-weight:700; } .bracket-side-name{ display:flex; align-items:center; gap:8px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bracket-result{ font-family:var(--mono); font-size:12.5px; color:var(--fg-tertiary); } .bracket-vod{ display:block; margin-top:6px; font-size:12px; color:var(--brand); } .bracket-empty{ padding:48px 24px; text-align:center; color:var(--fg-tertiary); } /* Admin dashboard (admin.html) */ .admin-shell{ display:flex; align-items:flex-start; gap:36px; } .admin-sidebar{ flex:0 0 216px; position:sticky; top:88px; } .admin-nav-group{ margin-bottom:22px; } .admin-nav-group-label{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-quat); padding:0 12px; margin-bottom:6px; } .admin-nav-group-links{ display:flex; flex-direction:column; gap:2px; } .admin-nav-link{ display:block; width:100%; text-align:left; padding:10px 12px; border:none; border-radius:10px; background:transparent; color:var(--fg-secondary); font-family:var(--sans); font-weight:700; font-size:13.5px; cursor:pointer; transition:background .15s,color .15s; } .admin-nav-link:hover{ background:var(--bg-raised); color:var(--fg-primary); } .admin-nav-link[aria-selected="true"]{ background:var(--brand); color:#fff; } .admin-content{ flex:1; min-width:0; } @media (max-width:860px){ .admin-shell{ flex-direction:column; gap:20px; } .admin-sidebar{ position:static; width:100%; } .admin-nav-group{ margin-bottom:0; } .admin-nav-group-links{ flex-direction:row; flex-wrap:wrap; gap:6px; } .admin-nav-link{ width:auto; border-radius:9999px; padding:8px 16px; } } .admin-panel{ margin-top:24px; } .admin-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--bg-secondary); border:1px solid var(--border-default); border-radius:10px; margin-bottom:8px; flex-wrap:wrap; } .admin-row-main{ flex:1; min-width:180px; font-size:14px; color:var(--fg-secondary); } .admin-row-main strong{ color:var(--fg-primary); } .admin-row-main a{ color:var(--brand); margin-left:8px; } .admin-row-actions{ display:flex; gap:8px; flex:none; } .admin-match{ padding:16px; margin-bottom:14px; } .admin-match-head{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-tertiary); margin-bottom:10px; } .admin-match-side{ display:flex; align-items:center; gap:10px; margin-bottom:8px; } .admin-match-side span{ min-width:120px; font-size:14px; color:var(--fg-secondary); } .admin-form-grid{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .admin-users-table{ width:100%; border-collapse:collapse; } .admin-users-table th{ text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-tertiary); padding:8px 10px; border-bottom:1px solid var(--border-default); } .admin-users-table td{ padding:10px; border-bottom:1px solid var(--border-subtle); font-size:14px; color:var(--fg-secondary); vertical-align:middle; } .admin-users-table td:first-child{ color:var(--fg-primary); font-weight:600; } .admin-cap-label{ display:inline-flex; align-items:center; gap:6px; margin-right:14px; font-size:13px; white-space:nowrap; }