/* ============================================================ WC26 EDITORIAL THEME · experiment (branch: redesign/nike-theme) Additive layer (loaded after style.css). Big-type editorial look with TWO modes: DARK (default, soft-luxe) + LIGHT (toggle, sets ). REVERSIBLE: remove the theme-nike.css + theme-nike.js links to restore. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700;800;900&display=swap'); /* ---------- DARK (default) — soft, high-contrast, luxe ---------- */ :root{ --bg:#000000; --bg2:#050506; --surface:#0a0a0c; --surface2:#0e0e11; --line:rgba(255,255,255,.085); --line2:rgba(255,255,255,.14); --txt:#f1efe9; --muted:#9c988e; --gold:#d8b35e; --gold2:#b78d3a; --ink:#0b0b0d; --card:#15151a; --card2:#1c1c22; --pos:#34d27b; --neg:#ff6b6b; } /* ---------- LIGHT (toggle) ---------- */ :root[data-theme="light"]{ --bg:#fafaf8; --bg2:#f1f1ee; --surface:#ffffff; --surface2:#f4f4f0; --line:rgba(0,0,0,.11); --line2:rgba(0,0,0,.16); --txt:#15140f; --muted:#6b675f; --gold:#9c6f23; --gold2:#7e5817; --ink:#0b0b0d; --card:#ffffff; --card2:#f5f5f1; --pos:#0a8f3c; --neg:#d62828; } html{color-scheme:dark} :root[data-theme="light"]{color-scheme:light} body{background:var(--bg) !important; color:var(--txt) !important; font-family:'Archivo','Sora',sans-serif; transition:background .35s ease,color .35s ease} ::selection{background:var(--gold); color:#1a1304} /* keep the trophy hero backdrop; drop only the global broadcast effects */ .glow,.net,.spot,.waves{display:none !important} /* soft warm luxe wash (dark only) */ body::before{content:"";position:fixed;inset:0;z-index:-5;pointer-events:none; background:radial-gradient(58% 44% at 50% -6%,rgba(216,179,94,.06),transparent 62%),radial-gradient(50% 40% at 88% 8%,rgba(216,179,94,.04),transparent 60%)} :root[data-theme="light"] body::before{background:radial-gradient(60% 45% at 50% -8%,rgba(156,111,35,.06),transparent 62%)} /* ---------- editorial display type ---------- */ .hero h2,.shead h3,.brand h1,.nextcard .nm-title,.pagehead h2,.tk-flowh,.ts-t,.sb-main .v,.live-banner{ font-family:'Archivo','Sora',sans-serif !important; font-weight:800 !important; letter-spacing:-.5px !important; text-transform:uppercase; } /* ---------- header ---------- */ header{background:color-mix(in srgb,var(--bg) 82%,transparent) !important; border-bottom:1px solid var(--line) !important; backdrop-filter:blur(16px) saturate(1.2) !important; box-shadow:none !important} .brand h1{color:var(--txt) !important; -webkit-text-fill-color:var(--txt); background:none !important; font-size:24px} .brand span{color:var(--muted) !important} .crest{background:var(--ink) !important; border:1px solid var(--line2) !important; box-shadow:0 4px 16px -8px rgba(0,0,0,.6) !important} .mainnav a,.nav a{color:var(--txt) !important; text-transform:uppercase; letter-spacing:1.4px; font-size:12px; font-weight:700; opacity:.82} .mainnav a:hover{opacity:1; color:var(--gold) !important} .pill{color:var(--gold) !important; border:1px solid var(--line2) !important; background:color-mix(in srgb,var(--gold) 9%,transparent) !important; letter-spacing:2px} /* theme toggle button (injected by theme-nike.js) */ .theme-toggle{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--txt);cursor:pointer;transition:.2s;flex:0 0 auto} .theme-toggle:hover{background:color-mix(in srgb,var(--txt) 8%,transparent);color:var(--gold)} .theme-toggle svg{width:18px;height:18px} /* ---------- HERO: dark stage (trophy + “26” backdrop kept) ---------- */ .hero{position:relative; width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; background:#08080a !important; color:#fff; padding:46px max(22px,calc((100vw - 1280px)/2)) 88px !important; /* bottom edge = two angular peaks (M) corner→corner — trophy nests in the centre dip */ clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),70% calc(100% - 52px),50% calc(100% - 18px),34% calc(100% - 52px),0 calc(100% - 14px))} .hero-grid{min-height:clamp(430px,60vh,580px)} .hero h2{color:#fff !important; -webkit-text-fill-color:#fff; font-size:clamp(54px,11.5vw,142px) !important; line-height:.85 !important; letter-spacing:0 !important; margin-top:14px; text-shadow:0 14px 50px rgba(0,0,0,.55)} .hero h2 .gold-text{-webkit-text-fill-color:transparent !important; background:linear-gradient(180deg,#fff3cf,#e9c66f 52%,#caa047) !important; -webkit-background-clip:text !important; background-clip:text !important} .hero p{color:#cfcdc6 !important; max-width:440px} .kick{color:#f3e7c8 !important; border:1px solid rgba(216,179,94,.4) !important; background:rgba(216,179,94,.08) !important; letter-spacing:3px} /* next-match card → glass on the dark stage (both modes) */ .nextcard{background:rgba(255,255,255,.045) !important; border:1px solid rgba(255,255,255,.14) !important; box-shadow:0 30px 70px -30px rgba(0,0,0,.7) !important; color:#fff; backdrop-filter:blur(8px)} .nextcard .nm-label{color:var(--gold) !important} .nextcard .nm-title{color:#fff !important; -webkit-text-fill-color:#fff} .nextcard .nm-sub,.nm-live .k,.count-cap{color:#bdbab3 !important} .ctile{background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.12) !important; color:#fff; box-shadow:none !important} .ctile .n{color:#fff} .ctile .l{color:#a8a59e !important} .nm-live .v{color:var(--pos) !important} /* ---------- section headings ---------- */ .shead{margin-top:60px} .shead h3{color:var(--txt) !important; -webkit-text-fill-color:var(--txt); font-size:clamp(30px,5.2vw,56px) !important; letter-spacing:.5px} .shead small{color:var(--muted) !important; letter-spacing:2.5px} .pagehead h2{color:var(--txt) !important; -webkit-text-fill-color:var(--txt)} /* ---------- generic panels / cards ---------- */ .scard,.fixtures .fx,.fx,.note,.daysec,.flag-card,.allmatches,.vibe, .adm-sec,.hcard,.tk-flowcol,.trust,.pagehead,.adm-tbl,.adm-scroll{ background:var(--card) !important; border:1px solid var(--line) !important; box-shadow:none !important; color:var(--txt)} /* nation detail page uses a plain .pagehead — no card box/frame; heading sits on the page bg */ .pagehead:not(.pagehead-wc){background:none !important; border:none !important; padding-top:28px} .scard::before{display:none !important} .scard .v,.sb-cell .v{color:var(--txt)} .scard .v.g,.ct-item b{color:var(--gold) !important} /* neutralize the indigo/purple flag overlays → warm-neutral dark (fixes the colour clash) */ .flag-card .fc-l .ov,.fc-l .ov{background:linear-gradient(135deg,rgba(8,8,10,.8),rgba(8,8,10,.93)) !important} .mv .ov{background:linear-gradient(120deg,rgba(8,8,10,.94) 42%,rgba(8,8,10,.72)) !important} /* stat bar → ink band w/ gold hero figure (both modes) */ .statbar{background:linear-gradient(180deg,#101013,#0a0a0c) !important; border:1px solid var(--line) !important; border-radius:8px !important; box-shadow:0 30px 70px -34px rgba(0,0,0,.7) !important; color:#fff} .sb-cell{border-color:rgba(255,255,255,.1) !important} .sb-cell .k,.sb-main .k{color:#b6b3ac !important} .sb-cell .v{color:#fff} .sb-main{background:radial-gradient(130% 120% at 50% 0,rgba(216,179,94,.30),rgba(216,179,94,.07) 52%,transparent 80%) !important} /* Total Treasury value: trophy-gold, but use the site's number font (JetBrains Mono) like every other stat — not Anton */ .sb-main .v{font-family:'JetBrains Mono',ui-monospace,monospace !important; -webkit-text-fill-color:transparent !important; background:linear-gradient(180deg,#fff3cf,#e9c66f 55%,#caa047) !important; -webkit-background-clip:text !important; background-clip:text !important} /* Total Treasury label → trophy gold (its value is already gold); left/right cells unchanged */ .sb-main .k{color:#e9c66f !important} /* align all three stat labels onto one top line and all values onto one bottom line */ .sb-cell{justify-content:space-between !important} .sb-cell .k{min-height:2.5em; line-height:1.25} /* coin ticker → soft strip */ .cointicker{background:var(--surface2) !important; border:1px solid var(--line) !important} .ct-item{color:var(--muted)} .ct-item .up,.up{color:var(--pos) !important} .ct-item .down,.down{color:var(--neg) !important} /* ---------- buttons: sharp, uppercase ---------- */ .btn{border-radius:2px !important; text-transform:uppercase; letter-spacing:1.4px; font-weight:800; font-size:12.5px; padding:15px 26px} .btn-gold{background:linear-gradient(95deg,#e7c878,#caa148) !important; color:#1a1304 !important; box-shadow:0 14px 34px -16px rgba(216,179,94,.7) !important} .btn-gold:hover{transform:translateY(-2px); filter:brightness(1.05)} .btn-ghost{background:transparent !important; color:var(--txt) !important; border:1.6px solid var(--line2) !important} .btn-ghost:hover{background:color-mix(in srgb,var(--txt) 9%,transparent) !important} /* hero sits on a dark stage in BOTH modes → keep its ghost buttons light */ .hero .btn-ghost{color:#fff !important; border-color:rgba(255,255,255,.45) !important} .hero .btn-ghost:hover{background:rgba(255,255,255,.12) !important} /* ---------- nations table → editorial rows ---------- */ .trow{border:0 !important; border-bottom:1px solid var(--line) !important; border-radius:0 !important; background:transparent !important} .trow:hover{background:color-mix(in srgb,var(--txt) 5%,transparent) !important} /* ---------- tokenomics: light/dark surfaces + COMPACT allocation ---------- */ .tk-flowcol{background:var(--card2) !important} .vf-node{background:linear-gradient(165deg,#1b1b21,#141417) !important; border:1px solid rgba(255,255,255,.1) !important; color:#f1efe9} .vf-node.alt{background:linear-gradient(165deg,#241719,#170f10) !important; border-color:rgba(255,90,90,.28) !important} .vf-node.gold{background:linear-gradient(165deg,#231c12,#15110a) !important; border-color:rgba(216,179,94,.32) !important} .vf-node .vf-lbl{color:#b9b6ad !important} .vf-node .vf-lbl b{color:#fff !important} .vf-node.gold .vf-lbl{color:#e8dcc0 !important} /* Source / trigger pills are dark in both modes → force light text (fixes invisible “Source”) */ .vf-source,.vf-trigger{background:#0b0b0d !important; border:1px solid var(--line2) !important; box-shadow:none !important} .vf-source .vf-tag{color:var(--gold) !important} .vf-source .vf-srcname{color:#fff !important; -webkit-text-fill-color:#fff} .vf-trigger{color:#fff !important} .vf-trigger.gold{color:#f3e7c8 !important; border-color:rgba(216,179,94,.5) !important} .vf-trigger::before,.vf-trigger::after{background:var(--line2) !important} /* compact allocation: smaller donut + tighter legend → shorter steps → shorter Value Flow */ .al-split{gap:14px !important; align-items:center} .al-split .dn{width:72px !important; height:72px !important} .al-leg{gap:6px !important} .al-li{gap:7px !important} .al-l{font-size:11.5px !important} .al-p{font-size:12px !important; color:var(--gold) !important} .al-dot{width:8px !important; height:8px !important} .tk-steps{gap:18px !important} .ts-t{color:var(--txt) !important; -webkit-text-fill-color:var(--txt); font-size:18px !important} .ts-d{color:var(--muted) !important} .ts-num{color:var(--gold) !important; opacity:.9} /* compact Value Flow so its height ≈ the How-It-Works steps */ .vflow{gap:14px !important; padding:2px 0 !important} .vf-stage{margin:9px 0 !important; gap:9px !important} .vf-node{padding:9px 13px !important; border-radius:11px !important; gap:3px !important} .vf-pct{font-size:19px !important; line-height:1} .vf-lbl{font-size:10.5px !important; line-height:1.28} .vf-source{padding:8px 20px !important} .vf-srcname{font-size:12.5px !important} .vf-tag{font-size:8px !important} .vf-trigger{padding:5px 13px !important; font-size:9px !important; letter-spacing:2px !important; margin:2px 0 !important} .vf-group::before{top:36px !important; bottom:8px !important} /* dark image-cards (flagship / nation hero / movers / fixtures) keep a dark flag overlay in BOTH modes → force readable light text (fixes light mode) */ .fc-name h4,.fc-price,.fc-cell .v,.mv .nm,.mv .big,.fx-team .nm,.fx-team .pr,.fx-vs .score{color:#f3f1ec !important; -webkit-text-fill-color:#f3f1ec} .fc-cell .k,.mv .sub,.fx-team .mc{color:#b9b6ae !important} .fc-name .tk,.mv .tk,.fx-team .tk{color:#d8b35e !important} .fc-name h4{font-family:'Anton',Impact,sans-serif !important; font-weight:400 !important; letter-spacing:.5px} /* ============================================================ LIGHT-MODE POLISH (user feedback): where the surface stays dark, keep text light; rich tiles stay dark in both modes; small tags get crisper contrast. ============================================================ */ :root[data-theme="light"]{ --muted:#5b574d; } /* darker muted → small tags/labels/subtitles not washed out */ /* Treasury / Burned / Airdropped tiles → stay DARK & luxe in BOTH modes (lightening them washed the gradient out and dropped the contrast) */ .hl-tile{background:radial-gradient(120% 80% at 0% 0%,rgba(216,179,94,.10),transparent 55%),linear-gradient(150deg,#18181d,#101013 72%,#0b0b0e) !important; border:1px solid rgba(216,179,94,.2) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 40px -26px rgba(0,0,0,.55) !important} .hl-tile.burn{background:radial-gradient(120% 80% at 0% 0%,rgba(255,90,40,.12),transparent 55%),linear-gradient(150deg,#1b1513,#120d0b 72%,#0c0908) !important; border-color:rgba(255,90,50,.28) !important} .hl-tile .hl-k,.hl-tile .hl-sub{color:#aba89f !important} /* nation/flagship pagehead subtitle ("$FRA · UEFA · Group X") — crisper, with a gold ticker cue */ .pagehead p,#dSub{font-weight:600 !important} .pagehead .tz{color:var(--gold) !important} /* nations-table row ticker stays gold, meta crisp */ .trow .tkr,.tkr{color:var(--gold) !important} .trow .meta{color:var(--muted) !important} .tk-tagline{color:var(--txt) !important; -webkit-text-fill-color:var(--txt)} .tk-tagline .gold-text{-webkit-text-fill-color:transparent !important; background:linear-gradient(180deg,var(--gold),var(--gold2)) !important; -webkit-background-clip:text !important; background-clip:text !important} .trust-h{color:var(--txt) !important} .tbadge{background:color-mix(in srgb,var(--txt) 3%,transparent) !important; border-color:var(--line) !important} /* ---------- footer ---------- */ footer{background:#08080a !important; color:#cfcdc6; border-top:1px solid var(--line) !important; margin-top:60px} footer p,footer span,footer small,footer .soc-empty,footer .disclaimer{color:#cfcdc6 !important} footer b{color:#fff !important} footer a{color:var(--gold) !important} /* ---------- gold-text accent (non-hero) readable in both modes ---------- */ .gold-text{-webkit-text-fill-color:transparent; background:linear-gradient(180deg,var(--gold),var(--gold2)); -webkit-background-clip:text; background-clip:text} /* ---------- light-mode readability (contrast-audit fixes) ---------- */ /* music player is a fixed dark pill in both modes → light text + icons */ .music,.music *{color:#e9e7e0 !important} /* active filter chips / segment buttons → dark text on gold (was low-contrast white) */ .chip.on,.seg button.on{color:#1a1304 !important; background:linear-gradient(95deg,#e7c878,#caa148) !important} /* small accent badges crisper on light */ .tbadge.wait .tb-tag{color:#9a6f23 !important; background:rgba(156,111,35,.13) !important} .ts-chain{color:var(--pos) !important; background:color-mix(in srgb,var(--pos) 11%,transparent) !important; border-color:color-mix(in srgb,var(--pos) 30%,transparent) !important} .fx-vs .v{color:var(--gold) !important; opacity:1} /* match-card meta sits on the white card → muted token (not forced light) */ .fx-meta{color:var(--muted) !important} /* brighter gold accent in pagehead headings (light mode): Schedule / Leaderboard / Flagship */ :root[data-theme="light"] .pagehead h2 .gold-text{background:linear-gradient(180deg,#e7a92b,#ca8b1c) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important} /* smoother allocation donuts: drop the drop-shadow (it re-rasterizes every animation frame → janky when the How It Works page opens) + a neutral track so segment gaps don't flash */ .al-split .dn svg{filter:none !important} .al-split .dn-track{stroke:rgba(140,135,125,.16) !important} .al-split .dn-seg{animation-duration:.85s !important} /* ---------- Main hero: trophy + "26" shifted right (next-match card removed) ---------- */ .hero-img{left:50% !important} .hero-26{position:absolute;left:68%;top:48%;transform:translate(-50%,-50%);font-family:'Anton',Impact,sans-serif;font-size:clamp(200px,30vw,430px);line-height:.8;letter-spacing:-12px;color:#d8b35e;opacity:.17;z-index:0;pointer-events:none;user-select:none} @media(max-width:880px){.hero-img{left:50% !important; max-width:78% !important}.hero-26{left:50%;font-size:44vw;opacity:.12}} /* ---------- Movers: full-bleed dark stage · angular two-peak top · flat bottom ---------- */ .movers-stage{position:relative; width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; margin-top:38px; margin-bottom:0; background:#08080a; color:#fff; padding:60px max(22px,calc((100vw - min(1640px,95vw))/2 + 22px)) 56px; /* top edge = two angular notches (mirrors the hero divider) · bottom edge = straight */ clip-path:polygon(0 14px,34% 52px,50% 18px,70% 52px,100% 14px,100% 100%,0 100%)} .movers-stage .shead{position:relative; justify-content:center; align-items:center; text-align:center; margin:0 0 26px} .movers-stage .shead h3{color:#fff !important; -webkit-text-fill-color:#fff} .movers-stage .shead h3::before{display:none} /* clean centred title like the reference (drop the leading dash) */ .movers-stage .shead h3 small{color:#cfcdc6 !important} .movers-stage .shead .btn-ghost{position:absolute; right:0; top:0; color:#fff !important; border-color:rgba(255,255,255,.45) !important} .movers-stage .shead .btn-ghost:hover{background:rgba(255,255,255,.12) !important} @media(max-width:600px){.movers-stage{padding-top:54px}.movers-stage .shead{flex-direction:column;gap:14px}.movers-stage .shead .btn-ghost{position:static}} /* ---------- Kick-off + Burn band (index, between Movers & Fixtures) ---------- */ /* lives inside the Movers stage so the black background fully wraps it */ .kickbar{display:grid;grid-template-columns:1.7fr 1fr;gap:16px;margin-top:32px} .kb-main,.kb-burn{position:relative;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.14);padding:28px 32px;clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%)} .kb-main{display:flex;flex-direction:column;justify-content:center} .kb-burn{display:flex;flex-direction:column;justify-content:center;align-items:flex-start} .kb-cap{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:2px;font-size:14px;color:#0a0a0a;margin-bottom:18px} .kb-burn .kb-cap{color:#0a0a0a} .kb-count{display:flex;gap:16px;flex-wrap:wrap} .kb-tile{display:flex;flex-direction:column;align-items:center;min-width:74px} .kb-n{font-family:'Anton',sans-serif;font-size:clamp(42px,6.2vw,76px);line-height:.88;color:#0a0a0a;font-variant-numeric:tabular-nums} .kb-l{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:#5b574d;margin-top:9px} .kb-burnv{font-family:'Anton',sans-serif;font-size:clamp(26px,3.2vw,40px);line-height:1;font-variant-numeric:tabular-nums;color:#0a0a0a} .kb-sub{font-size:11px;color:#5b574d;margin-top:12px} @media(max-width:760px){.kickbar{grid-template-columns:1fr}} /* ============================================================ PHASE 2 — WC26 flagship page ============================================================ */ /* big $WC26 wordmark (replaces the chart on the flag-card right) */ .fp-mark{display:flex;align-items:center;justify-content:center;border-left:1px solid var(--line);background:radial-gradient(85% 120% at 50% 0,rgba(216,179,94,.12),transparent 62%);min-height:300px} .fp-big{font-family:'Anton',Impact,sans-serif;font-size:clamp(54px,7.5vw,118px);letter-spacing:-2px;line-height:1} @media(max-width:680px){.fp-mark{border-left:0;border-top:1px solid var(--line);min-height:150px}} /* CA copy bar */ .ca-bar{display:flex;align-items:center;gap:14px;margin-top:14px;padding:13px 18px;border:1px solid var(--line2);border-radius:14px;background:var(--card2);flex-wrap:wrap} .ca-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:800} .ca-addr{flex:1;min-width:120px;font-family:'JetBrains Mono';font-size:13px;color:var(--gold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ca-copy{font-family:'Sora';font-weight:800;font-size:11.5px;text-transform:uppercase;letter-spacing:1px;color:#1a1304;background:linear-gradient(95deg,#e7c878,#caa148);border:0;border-radius:9px;padding:9px 16px;cursor:pointer;flex:0 0 auto} .ca-copy:hover{filter:brightness(1.06)} /* big chart panel */ .chart-panel{margin-top:18px;border:1px solid var(--line2);border-radius:18px;background:var(--card);overflow:hidden} .chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line)} .chart-title{font-family:'Anton',Impact,sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:16px;color:var(--txt)} .chart-src{font-size:12px;font-weight:800;color:var(--gold);text-decoration:none;letter-spacing:.5px} .chart-box{position:relative;height:clamp(320px,46vh,460px);padding:14px} .chart-box canvas{position:absolute !important;inset:14px;width:calc(100% - 28px) !important;height:calc(100% - 28px) !important} .chart-box .chart-empty{position:static;height:100%;display:grid;place-items:center;color:var(--muted)} .chart-range{display:flex;gap:4px;background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:3px} .chart-range button{font-family:'Sora';font-weight:700;font-size:11px;letter-spacing:.5px;color:var(--muted);background:transparent;border:0;border-radius:7px;padding:6px 11px;cursor:pointer;transition:.15s} .chart-range button:hover{color:var(--txt)} .chart-range button.on{color:#1a1304;background:linear-gradient(95deg,#e7c878,#caa148)} /* big Buy at the bottom */ .buy-cta{display:flex;justify-content:center;margin-top:32px} .btn-buy{font-size:16px !important;padding:20px 60px !important;letter-spacing:2.5px !important} /* Coins Live → shimmering green */ .scard-live .v{background:linear-gradient(90deg,#0a8f3c,#3ee07f,#0a8f3c,#3ee07f) !important;background-size:300% 100% !important;-webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;color:transparent !important;animation:shimmerText 3.2s linear infinite} @keyframes shimmerText{to{background-position:300% 0}} /* Treasury tile → shimmering gold border + gold chest */ .hl-tile.trez{position:relative} .hl-tile.trez::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;background:linear-gradient(115deg,#8a6a2e,#ffe7a3,#caa148,#ffe7a3,#8a6a2e);background-size:300% 100%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:shimmerBorder 3s linear infinite;pointer-events:none;z-index:2} @keyframes shimmerBorder{to{background-position:300% 0}} .hl-tile.trez .hl-ic{color:#e7c878 !important} .hl-tile.trez .hl-ic .ico{width:26px;height:26px} /* ============================================================ PHASE 3 — Nations ============================================================ */ /* nation detail: flag background ~+10% more vivid (lighter overlay + saturate) */ #detail .fc-l{filter:saturate(1.15)} #detail .fc-l .ov{background:linear-gradient(135deg,rgba(8,8,10,.68),rgba(8,8,10,.87)) !important} /* leaderboard flag-wave (right side of the Nations pagehead) — fades left→right */ .lb-head{display:flex;justify-content:space-between;align-items:center;gap:30px} .lb-flags{display:flex;align-items:center;flex:0 0 auto;padding:22px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 58%);mask:linear-gradient(90deg,transparent,#000 58%)} .lb-flags img{width:54px;height:36px;border-radius:6px;object-fit:cover;margin-left:-14px;border:1.5px solid rgba(255,255,255,.18);box-shadow:0 10px 22px -10px rgba(0,0,0,.7)} .lb-flags img:nth-child(1){transform:translateY(-16px)} .lb-flags img:nth-child(2){transform:translateY(-7px)} .lb-flags img:nth-child(3){transform:translateY(3px)} .lb-flags img:nth-child(4){transform:translateY(12px)} .lb-flags img:nth-child(5){transform:translateY(15px)} .lb-flags img:nth-child(6){transform:translateY(10px)} .lb-flags img:nth-child(7){transform:translateY(1px)} .lb-flags img:nth-child(8){transform:translateY(-8px)} .lb-flags img:nth-child(9){transform:translateY(-15px)} .lb-flags img:nth-child(10){transform:translateY(-16px)} .lb-flags img:nth-child(11){transform:translateY(-8px)} .lb-flags img:nth-child(12){transform:translateY(1px)} .lb-flags img:nth-child(13){transform:translateY(9px)} .lb-flags img:nth-child(14){transform:translateY(14px)} @media(max-width:960px){.lb-flags{display:none}} /* ============================================================ PHASE 4 — minimal geometric polish ============================================================ */ /* section heading marker — a short gold bar */ .shead h3::before{content:"";display:inline-block;width:26px;height:5px;border-radius:2px;background:linear-gradient(90deg,#e7c878,#caa148);margin-right:16px;vertical-align:middle} .shead h3:empty::before{display:none} .hiw-rmcard .shead h3::before{display:none} /* "The Ecosystem Flow": no leading gold dash */ /* card micro-interaction: lift + gold edge on hover */ .scard,.mv,.fx,.hl-tile,.vf-node,.nextcard,.chart-panel,.ca-bar,.flag-card{transition:transform .18s ease,border-color .18s ease,box-shadow .2s ease} .scard:hover,.mv:hover,.fx:hover,.hl-tile:hover,.chart-panel:hover{transform:translateY(-3px);border-color:rgba(216,179,94,.42) !important;box-shadow:0 22px 50px -30px rgba(0,0,0,.7) !important} /* stat card: thin gold top-left accent line */ .scard{position:relative;overflow:hidden} .scard::after{content:"";position:absolute;top:0;left:0;width:44px;height:3px;background:linear-gradient(90deg,#e7c878,transparent)} /* chart panel: faint geometric corner bracket */ .chart-panel{position:relative} .chart-panel::after{content:"";position:absolute;right:14px;bottom:14px;width:16px;height:16px;border-right:2px solid rgba(216,179,94,.38);border-bottom:2px solid rgba(216,179,94,.38);pointer-events:none} /* uniform sharp-ish radius + cleaner ticker edges for a tighter minimal feel */ .ca-bar,.chart-panel,.kb-main,.kb-burn{border-radius:14px} .ct-item b{letter-spacing:.3px} /* ============================================================ RESPONSIVE / MOBILE FIXES (2026-06-05) — appended last so they win the cascade. Pairs with lockHeaderH() in theme-nike.js (measures the real header height). ============================================================ */ /* ---- #1: compact mobile header (was wrapping into ~4 tall rows) ---- */ @media(max-width:760px){ .nav{padding:9px 15px !important; gap:9px 12px !important; row-gap:8px !important; justify-content:flex-start} .brand{gap:9px} .crest{width:38px !important; height:38px !important} .brand h1{font-size:19px !important} .brand span{font-size:8px !important; letter-spacing:2px !important; margin-top:2px} .pill{margin-left:auto; padding:6px 11px !important; font-size:10px !important; letter-spacing:1.5px !important} .theme-toggle{width:34px; height:34px} /* nav links drop onto their own full-width row below brand + status, kept to a single line that scroll-swipes if it can't all fit (no more 2-row stacking) */ .mainnav{order:3; flex-basis:100%; width:100%; gap:2px; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none} .mainnav::-webkit-scrollbar{display:none} .mainnav a{flex:0 0 auto; padding:7px 9px !important; font-size:11px !important; letter-spacing:1px !important} } @media(max-width:430px){ .brand span{display:none} /* drop the "WORLD CUP MEME INDEX" subtitle on tiny phones */ .brand h1{font-size:18px !important} .nav{padding:8px 13px !important} } /* ---- #3: confederation filter must never run off-screen (CONCACAF was clipped) ---- */ @media(max-width:620px){ .shead .controls{flex-direction:column; align-items:stretch; width:100%} .controls .search{width:100%} .controls .search input{flex:1; width:auto} .controls .seg{width:100%; max-width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none} .controls .seg::-webkit-scrollbar{display:none} .controls .seg button{flex:0 0 auto; white-space:nowrap; padding:10px 13px} } /* ---- #4 + #6: full-bleed footer flush to the bottom edge (was a floating inset band) ---- */ footer{ position:relative; width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; margin-top:60px; margin-bottom:0; padding:30px 22px calc(30px + env(safe-area-inset-bottom,0px)); } @media(max-width:760px){ footer{padding:24px 18px calc(22px + env(safe-area-inset-bottom,0px))} } /* ============================================================ MOCKUP REDESIGN (2026-06-06) — stadium hero · KPI cards · Archivo type Appended last so it wins the cascade. Theme defaults to DARK (theme-nike.js). ============================================================ */ /* hide the old SVG broadcast backdrop — the stadium photo is the hero bg now */ .hero .hero-bg svg{display:none !important} /* ---- HERO: full-bleed stadium stage, straight bottom ---- */ .hero{ background:#05060a !important; padding:clamp(58px,9vh,104px) max(22px,calc((100vw - min(1640px,95vw))/2 + 22px)) clamp(104px,15vh,156px) !important; clip-path:none !important; } .hero .hero-bg{background-image:url('stadium.jpg'); background-size:cover; background-position:center 36%;} /* warm light burst behind the trophy */ .hero .hero-bg::before{content:""; position:absolute; left:50%; top:40%; transform:translate(-50%,-50%); width:clamp(420px,58vw,900px); height:clamp(420px,58vw,900px); border-radius:50%; z-index:0; pointer-events:none; background:radial-gradient(circle, rgba(255,251,240,.92) 0%, rgba(255,240,200,.5) 22%, rgba(255,226,160,.18) 48%, rgba(255,223,155,0) 70%);} .hero-bg.has-img::after{background: radial-gradient(130% 105% at 50% 36%,rgba(5,6,10,0) 0%,rgba(5,6,10,.20) 56%,rgba(5,6,10,.66) 100%), linear-gradient(180deg,rgba(5,6,10,.45) 0%,transparent 30%,transparent 56%,rgba(5,6,10,.94) 100%) !important;} /* big translucent 2 6 flanking the trophy */ .hero-26{position:absolute !important; top:50% !important; left:50% !important; transform:translate(-50%,-50%) !important; z-index:1 !important; display:flex !important; align-items:center; justify-content:center; gap:clamp(40px,9vw,170px); font-family:'Archivo',sans-serif !important; font-weight:900 !important; font-size:clamp(170px,40vh,450px) !important; line-height:.8 !important; letter-spacing:0 !important; color:rgba(255,255,255,.22) !important; opacity:1 !important; text-shadow:0 4px 30px rgba(0,0,0,.18); pointer-events:none; user-select:none;} .hero-26 span{display:block} /* trophy centred over the gap */ .hero .hero-img{left:50% !important; z-index:2 !important; height:clamp(320px,54vh,580px) !important; max-width:48% !important; opacity:1 !important;} /* hero text layer */ .hero-grid{position:relative; z-index:5; display:flex !important; align-items:center; justify-content:space-between; gap:24px; grid-template-columns:none !important; min-height:clamp(360px,52vh,560px) !important;} .hero-left{grid-column:auto !important; display:flex; flex-direction:column; align-items:flex-start; gap:0; padding-left:0 !important; max-width:42%;} .hero-kicker{font-family:'Archivo',sans-serif; font-weight:700; font-size:clamp(13px,1.3vw,17px); letter-spacing:6px; text-transform:uppercase; color:rgba(255,255,255,.7); text-shadow:0 2px 12px rgba(0,0,0,.6);} .hero h2{font-family:'Archivo',sans-serif !important; font-weight:800 !important; font-size:clamp(34px,5vw,74px) !important; line-height:.94 !important; letter-spacing:-1.5px !important; text-transform:uppercase; margin:6px 0 0 !important; color:#fff !important; -webkit-text-fill-color:#fff !important; text-shadow:0 12px 40px rgba(0,0,0,.6) !important;} .hero .hero-sub{font-family:'Archivo',sans-serif; font-weight:500; font-size:clamp(13px,1.4vw,17px); letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.82) !important; max-width:none; margin-top:18px; text-shadow:0 2px 14px rgba(0,0,0,.6);} /* hero kicker pill — readable glass chip on the bright stadium */ .hero .kick{color:#fff !important; border:1px solid rgba(255,255,255,.34) !important; background:rgba(9,11,15,.55) !important; backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); box-shadow:0 8px 26px -10px rgba(0,0,0,.7); text-shadow:0 1px 6px rgba(0,0,0,.5); letter-spacing:2.5px !important;} .hero-right{grid-column:auto !important; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; text-align:right; gap:12px; max-width:42%;} .hr-title{font-family:'Archivo',sans-serif; font-weight:700; font-size:clamp(13px,1.5vw,20px); letter-spacing:3px; text-transform:uppercase; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.6);} .hr-line{width:60px; height:2px; background:rgba(255,255,255,.55);} .hr-sub{font-family:'Archivo',sans-serif; font-weight:500; font-size:clamp(12px,1.3vw,16px); letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.72); text-shadow:0 2px 14px rgba(0,0,0,.6);} /* ---- KPI stat cards (overlap the stadium bottom) ---- */ .kpis{position:relative; z-index:10; display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:18px; align-items:start; margin-top:clamp(-104px,-8vw,-72px);} .kpi{position:relative; overflow:hidden; border-radius:18px; padding:24px 26px 20px; min-height:152px; background:#000; border:1px solid rgba(255,255,255,.10); box-shadow:0 44px 90px -44px rgba(0,0,0,.9); display:flex; flex-direction:column; gap:11px; align-items:flex-start; text-align:left;} .kpi-k{font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#9aa0aa;} .kpi-v{font-family:'Archivo',sans-serif; font-weight:800; font-size:clamp(28px,3.1vw,42px); line-height:1; letter-spacing:-1px; color:#fff;} .kpi-chg{display:inline-flex; align-items:center; gap:7px; font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:#9aa0aa;} .kpi-chg b{font-family:'Archivo',sans-serif; font-weight:700; letter-spacing:0; color:#cfd2d8;} .kpi-chg.up b,.kpi-chg.up .kpi-arr{color:#2fd17a;} .kpi-chg.down b,.kpi-chg.down .kpi-arr{color:#ff5b5b;} .kpi-arr{color:#2fd17a;} .kpi-spark{width:100%; height:38px; color:rgba(255,255,255,.4); margin-top:auto;} .kpi-spark path{stroke:currentColor;} .kpis .kpi:last-child{align-items:flex-end; text-align:right;} /* centre card = Treasury hero */ .kpi-mid{align-items:center !important; text-align:center !important; padding:30px 26px 26px; min-height:172px; background:#000 !important; border-color:rgba(255,255,255,.34) !important; transform:translateY(-16px); box-shadow:0 0 0 1px rgba(255,255,255,.16), 0 0 36px rgba(255,255,255,.13), 0 56px 100px -46px rgba(0,0,0,.95) !important;} :root[data-theme="light"] .kpi-mid{border-color:rgba(0,0,0,.16) !important; box-shadow:0 0 0 1px rgba(255,255,255,.9), 0 0 30px rgba(0,0,0,.08), 0 40px 80px -48px rgba(0,0,0,.4) !important;} .kpi-mid .kpi-v{font-size:clamp(38px,4.4vw,60px);} .kpi-secure{display:inline-flex; align-items:center; gap:8px; font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:#9aa0aa; margin-top:2px;} .kpi-shield{width:15px; height:15px; color:#cbb06a; flex:none;} /* hover: the 3 KPI cards enlarge / pop on pointer-hover (touch devices unaffected) */ .kpi{transition:transform .22s cubic-bezier(.2,.7,.3,1);} @media (hover:hover){ .kpi:hover{transform:scale(1.08); z-index:20;} .kpi-mid:hover{transform:translateY(-16px) scale(1.08);} /* keep the hero lift + add scale */ } /* Total Treasury card: on hover -> INSTANT shimmering gold border (same as the WC26 Treasury tile) */ .kpi-mid::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px; background:linear-gradient(115deg,#8a6a2e,#ffe7a3,#caa148,#ffe7a3,#8a6a2e);background-size:300% 100%; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude; pointer-events:none;z-index:2;opacity:0;transition:opacity .18s ease;} @media (hover:hover){ .kpi-mid:hover::before{opacity:1;animation:shimmerBorder 3s linear infinite;} } /* KPI cards — light theme */ :root[data-theme="light"] .kpi{background:#fff; border-color:rgba(0,0,0,.10); box-shadow:0 40px 80px -48px rgba(0,0,0,.4);} :root[data-theme="light"] .kpi-mid{background:linear-gradient(180deg,#ffffff,#f5f5f1) !important; border-color:rgba(0,0,0,.13) !important;} :root[data-theme="light"] .kpi-v{color:#15140f;} :root[data-theme="light"] .kpi-k,:root[data-theme="light"] .kpi-secure,:root[data-theme="light"] .kpi-chg{color:#6b675f;} :root[data-theme="light"] .kpi-chg b{color:#3a382f;} :root[data-theme="light"] .kpi-spark{color:rgba(0,0,0,.26);} /* ---- Archivo for the remaining display elements ---- */ .fc-name h4,.kb-cap,.kb-n,.kb-burnv,.fp-big,.chart-title,.mv .nm,.fx-vs .v,.fx-vs .score{ font-family:'Archivo','Sora',sans-serif !important; font-weight:800 !important;} .brand h1{font-style:italic;} /* ---- mobile ---- */ @media(max-width:860px){ .hero-grid{flex-direction:column !important; align-items:center; text-align:center; justify-content:space-between !important; gap:16px; min-height:clamp(560px,84vh,760px) !important;} .hero-left{align-items:center !important; text-align:center; max-width:100%;} .hero-right{align-items:center !important; text-align:center; max-width:100%;} .hero-26{font-size:27vh !important; gap:15vw !important;} .hero .hero-img{max-width:62% !important; height:clamp(230px,37vh,400px) !important; top:50% !important;} .kpis{grid-template-columns:1fr !important; gap:13px; margin-top:-52px;} .kpi,.kpi-mid{min-height:0;} .kpi-mid{transform:none;} .kpis .kpi,.kpis .kpi:last-child{align-items:center !important; text-align:center !important;} } /* ============================================================ HERO STATS STRIP + sparkline polish + LIVE pill (2026-06-06) ============================================================ */ /* sparkline: filled area + bright end dot */ .kpi-spark{position:relative;} .kpi-spark svg{width:100%; height:100%; display:block;} .spk-dot{position:absolute; top:1px; right:0; width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 9px 2px rgba(255,255,255,.5);} :root[data-theme="light"] .spk-dot{background:#15140f; box-shadow:0 0 8px 1px rgba(0,0,0,.22);} /* LIVE time pill → neutral glass (was gold) */ .pill{color:#fff !important; border:1px solid rgba(255,255,255,.2) !important; background:rgba(255,255,255,.07) !important;} :root[data-theme="light"] .pill{color:#15140f !important; border-color:rgba(0,0,0,.14) !important; background:rgba(0,0,0,.04) !important;} /* stats strip: countdown · burned · ecosystem coins · how-it-works */ .hstrip{display:flex; align-items:stretch; margin-top:16px; padding:7px; background:#000; border:1px solid rgba(255,255,255,.1); border-radius:16px; box-shadow:0 30px 70px -50px rgba(0,0,0,.85);} .hs-cell{flex:1 1 0; min-width:0; display:flex; align-items:center; gap:14px; padding:15px 20px; border-left:1px solid rgba(255,255,255,.08);} .hs-cell:first-child{border-left:0;} .hs-ic{flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:#fff; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13);} .hs-ic svg{width:20px; height:20px;} .hs-body{min-width:0;} .hs-v{font-family:'Archivo',sans-serif; font-weight:800; font-size:clamp(18px,1.7vw,25px); line-height:1; letter-spacing:-.5px; color:#fff; white-space:nowrap;} .hs-v.hs-count{font-size:clamp(15px,1.35vw,21px); letter-spacing:0;} .hs-count i{font-style:normal; font-weight:600; font-size:.58em; color:#9aa0aa; margin:0 5px 0 1px;} .hs-l{font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:#9aa0aa; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .hs-btn{flex:none; align-self:stretch; display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-left:6px; padding:0 26px; border-radius:12px; text-decoration:none; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2); color:#fff; font-family:'Archivo',sans-serif; font-weight:700; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; transition:background .15s ease,border-color .15s ease;} .hs-btn:hover{background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.4);} .hs-btn span{font-size:14px;} /* light theme strip */ :root[data-theme="light"] .hstrip{background:#fff; border-color:rgba(0,0,0,.1); box-shadow:0 30px 70px -55px rgba(0,0,0,.35);} :root[data-theme="light"] .hs-cell{border-left-color:rgba(0,0,0,.08);} :root[data-theme="light"] .hs-ic{background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.12); color:#15140f;} :root[data-theme="light"] .hs-v{color:#15140f;} :root[data-theme="light"] .hs-l{color:#6b675f;} :root[data-theme="light"] .hs-btn{background:rgba(0,0,0,.03); border-color:rgba(0,0,0,.18); color:#15140f;} :root[data-theme="light"] .hs-btn:hover{background:rgba(0,0,0,.07);} /* mobile: strip stacks */ @media(max-width:860px){ .hstrip{flex-wrap:wrap; padding:6px;} .hs-cell{flex:1 1 100%; border-left:0; border-top:1px solid rgba(255,255,255,.08); padding:13px 16px;} .hs-cell:first-child{border-top:0;} :root[data-theme="light"] .hs-cell{border-top-color:rgba(0,0,0,.08);} .hs-btn{flex:1 1 100%; align-self:auto; margin:6px 0 0; padding:14px;} } /* ============================================================ STRIP ICONS (bigger, no circle) + MOVERS editorial layout (2026-06-06) ============================================================ */ /* bigger, clearer plain icons — like the reference strip */ .hs-ic{flex:none !important; display:inline-flex !important; align-items:center; justify-content:center; width:auto !important; height:auto !important; background:none !important; border:0 !important; color:#fff;} .hs-ic svg{width:32px; height:32px;} .hs-ic-fire svg{width:31px; height:31px;} :root[data-theme="light"] .hs-ic{color:#15140f;} /* Movers → editorial: intro text left · coins stacked right (like ABOUT WC26) */ .movers-stage .movers-wrap{display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(28px,4vw,60px); align-items:center;} .movers-intro{display:flex; flex-direction:column; align-items:flex-start;} .mv-kick{font-family:'Archivo',sans-serif; font-weight:700; font-size:12px; letter-spacing:4px; text-transform:uppercase; color:#9aa0aa;} .movers-intro h3{font-family:'Archivo',sans-serif !important; font-weight:800 !important; font-size:clamp(26px,3.2vw,44px) !important; line-height:1.02 !important; letter-spacing:-1px !important; text-transform:uppercase; color:#fff !important; margin:14px 0 0 !important;} .movers-intro p{font-size:14.5px; line-height:1.65; color:#b9bcc4; margin:18px 0 0; max-width:380px;} .movers-intro .btn{margin-top:26px;} .movers-intro .btn-ghost{color:#fff !important; border-color:rgba(255,255,255,.45) !important; background:rgba(255,255,255,.06) !important;} .movers-intro .btn-ghost:hover{background:rgba(255,255,255,.13) !important;} .movers-stage .movers{grid-template-columns:1fr !important; gap:16px;} @media(max-width:860px){ .movers-stage .movers-wrap{grid-template-columns:1fr !important; gap:24px;} } /* ============================================================ HEADER white · framed Movers/Matches · matches heading-right (2026-06-06) ============================================================ */ /* header text → white in dark (default); dark in light theme */ .brand h1{color:#fff !important; -webkit-text-fill-color:#fff !important; background:none !important;} .brand span{color:rgba(255,255,255,.78) !important;} .mainnav a,.nav a{color:#fff !important; opacity:1 !important;} .mainnav a:hover{color:#fff !important; background:rgba(255,255,255,.1) !important;} .mainnav a.active{color:#fff !important; background:rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.22) !important;} :root[data-theme="light"] .brand h1{color:#15140f !important; -webkit-text-fill-color:#15140f !important;} :root[data-theme="light"] .brand span{color:#6b675f !important;} :root[data-theme="light"] .mainnav a,:root[data-theme="light"] .nav a{color:#15140f !important;} :root[data-theme="light"] .mainnav a:hover{background:rgba(0,0,0,.06) !important;} :root[data-theme="light"] .mainnav a.active{color:#15140f !important; background:rgba(0,0,0,.06) !important; border-color:rgba(0,0,0,.14) !important;} /* Movers + Featured Matches → contained framed cards (no full-bleed black band) */ .movers-stage, .matches-stage{ position:relative; width:auto !important; left:auto !important; right:auto !important; margin:42px 0 0 !important; background:rgba(255,255,255,.022) !important; border:1px solid rgba(255,255,255,.12) !important; border-radius:22px !important; padding:clamp(28px,3.6vw,50px) !important; clip-path:none !important; color:#fff;} :root[data-theme="light"] .movers-stage,:root[data-theme="light"] .matches-stage{ background:rgba(0,0,0,.02) !important; border-color:rgba(0,0,0,.1) !important; color:#15140f;} /* Featured Matches layout: fixtures left · intro right */ .matches-wrap{display:grid; grid-template-columns:1.25fr 0.75fr; gap:clamp(28px,4vw,56px); align-items:center;} .matches-intro{align-items:flex-end !important; text-align:right;} /* intro text → dark in light theme */ :root[data-theme="light"] .movers-intro h3,:root[data-theme="light"] .matches-intro h3{color:#15140f !important; -webkit-text-fill-color:#15140f;} :root[data-theme="light"] .movers-intro p,:root[data-theme="light"] .matches-intro p{color:#4a4740;} :root[data-theme="light"] .movers-intro .btn-ghost,:root[data-theme="light"] .matches-intro .btn-ghost{color:#15140f !important; border-color:rgba(0,0,0,.22) !important; background:rgba(0,0,0,.03) !important;} @media(max-width:860px){ .matches-wrap{grid-template-columns:1fr !important; gap:24px;} .matches-intro{order:-1; align-items:flex-start !important; text-align:left;} } /* ============================================================ SOLID-BLACK boxes with edge-lit borders (glow top-left + bottom-right) (2026-06-06) ============================================================ */ /* every box: pure-black fill + a 135° border gradient that lights the top-left and bottom-right edges, dim through the middle */ .kpi, .hstrip, .movers-stage, .matches-stage{ background:linear-gradient(#000,#000) padding-box, linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.04) 38%, rgba(255,255,255,.04) 62%, rgba(255,255,255,.22)) border-box !important; border:1px solid transparent !important;} /* Total Treasury → brighter edge + outer halo so the big number reads as the hero stat */ .kpi-mid{ background:linear-gradient(#000,#000) padding-box, linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.1) 36%, rgba(255,255,255,.1) 64%, rgba(255,255,255,.62)) border-box !important; border:1.5px solid transparent !important; box-shadow:0 0 30px -2px rgba(255,255,255,.2), 0 0 0 1px rgba(255,255,255,.05), 0 56px 100px -46px rgba(0,0,0,.95) !important;} /* light theme: clean white cards (edge-glow is a dark-mode effect) */ :root[data-theme="light"] .kpi, :root[data-theme="light"] .hstrip, :root[data-theme="light"] .movers-stage, :root[data-theme="light"] .matches-stage{ background:#fff !important; border:1px solid rgba(0,0,0,.1) !important;} :root[data-theme="light"] .kpi-mid{ background:#fff !important; border:1px solid rgba(0,0,0,.14) !important; box-shadow:0 0 0 1px rgba(0,0,0,.04), 0 0 26px rgba(0,0,0,.08), 0 40px 80px -48px rgba(0,0,0,.4) !important;} /* Featured Matches: GROUP tags → solid black (Live tag keeps its green) */ .fx-tag{color:#fff !important; background:#000 !important; border:1px solid rgba(255,255,255,.16) !important;} .fx-tag.live{color:#34d27b !important; background:rgba(52,210,123,.12) !important; border-color:rgba(52,210,123,.42) !important;} /* ============================================================ HOW IT WORKS — glow-framed cards + roadmap timeline (2026-06-06) ============================================================ */ .hiw-card{position:relative; border-radius:22px; padding:clamp(26px,3.2vw,44px); margin:22px 0 0; background:linear-gradient(#000,#000) padding-box, linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.08) 36%, rgba(255,255,255,.08) 64%, rgba(255,255,255,.55)) border-box; border:1.5px solid transparent; box-shadow:0 0 34px -4px rgba(255,255,255,.16), 0 0 0 1px rgba(255,255,255,.05), 0 44px 100px -54px rgba(0,0,0,.9);} .hiw-card .shead{margin:0 !important;} .hiw-card .shead h3{font-size:clamp(24px,3vw,42px) !important;} .hiw-head .hiw-intro{margin:16px 0 0; max-width:680px; font-size:15px; line-height:1.65; color:#b9bcc4;} .hiw-rmcard .shead{margin:0 0 34px !important;} /* neutralize the trust panel's own frame inside the glow card */ .hiw-trust .trust{background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; border-radius:0 !important;} /* roadmap timeline */ .rmap{position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:18px;} /* two separate (unconnected) flows: 2-node + 3-node. On mobile the rule below collapses both to 1 col. */ .rmap--2{grid-template-columns:repeat(2,1fr);} .rmap--3{grid-template-columns:repeat(3,1fr);} .rmap + .rmap{margin-top:30px;} .rmap-line{position:absolute; left:10%; right:10%; top:35px; height:2px; z-index:0; background:linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.42) 18%, rgba(255,255,255,.42) 82%, rgba(255,255,255,.03));} .rm-node{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center;} .rm-top{display:flex; justify-content:center; width:100%;} .rm-dot{width:70px; height:70px; border-radius:50%; display:grid; place-items:center; color:#fff; background:#000; border:1.6px solid rgba(255,255,255,.45); box-shadow:0 0 24px -5px rgba(255,255,255,.32), inset 0 0 20px -10px rgba(255,255,255,.5);} .rm-dot svg{width:30px; height:30px;} .rm-body{width:100%;} .rm-step{margin-top:16px; font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:#9aa0aa;} .rm-title{font-family:'Archivo',sans-serif; font-weight:800; font-size:clamp(15px,1.35vw,20px); text-transform:uppercase; letter-spacing:-.3px; color:#fff; margin:7px 0 14px;} .rm-list{list-style:none; padding:0; margin:0 auto; display:flex; flex-direction:column; gap:9px; text-align:left; width:fit-content; max-width:100%;} .rm-list li{position:relative; padding-left:16px; font-size:13px; line-height:1.45; color:#b9bcc4;} .rm-list li::before{content:""; position:absolute; left:0; top:6px; width:6px; height:6px; border-radius:50%; background:var(--gold);} /* light theme */ :root[data-theme="light"] .hiw-card{ background:#fff !important; border:1px solid rgba(0,0,0,.12) !important; box-shadow:0 0 0 1px rgba(0,0,0,.04), 0 0 26px rgba(0,0,0,.08), 0 40px 80px -50px rgba(0,0,0,.4) !important;} :root[data-theme="light"] .hiw-head .hiw-intro{color:#4a4740;} :root[data-theme="light"] .rm-dot{background:#fff; border-color:rgba(0,0,0,.16); color:#15140f; box-shadow:0 8px 20px -8px rgba(0,0,0,.25);} :root[data-theme="light"] .rm-title{color:#15140f;} :root[data-theme="light"] .rm-list li{color:#4a4740;} :root[data-theme="light"] .rmap-line{background:linear-gradient(90deg,rgba(0,0,0,.03),rgba(0,0,0,.22) 18%,rgba(0,0,0,.22) 82%,rgba(0,0,0,.03));} /* mobile: stack roadmap into a left-rail list */ @media(max-width:760px){ .rmap{grid-template-columns:1fr; gap:0;} .rmap-line{display:none;} .rm-node{flex-direction:row; align-items:flex-start; text-align:left; gap:15px; padding:16px 0; border-top:1px solid rgba(255,255,255,.08);} .rm-node:first-child{border-top:0; padding-top:0;} :root[data-theme="light"] .rm-node{border-top-color:rgba(0,0,0,.08);} .rm-top{width:auto;} .rm-list{width:auto; margin:0;} /* mobile rows: back to full-width left-aligned */ .rm-dot{width:52px; height:52px; flex:none;} .rm-dot svg{width:24px; height:24px;} .rm-step{margin-top:0;} .rm-title{margin:3px 0 9px;} } /* ============================================================ Match cards: solid black frame + white glow on hover · light-white Group tag ============================================================ */ .fixtures .fx{background:#000 !important; border:1px solid rgba(255,255,255,.08) !important; box-shadow:none !important; transition:transform .18s ease, border-color .18s ease, box-shadow .2s ease;} .fixtures .fx:hover{transform:translateY(-3px); border-color:rgba(255,255,255,.65) !important; box-shadow:0 0 26px -3px rgba(255,255,255,.3), 0 24px 50px -30px rgba(0,0,0,.85) !important;} /* Group tag → thin light-white chip */ .fx-tag{color:#fff !important; background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.3) !important;} .fx-tag.live{color:#34d27b !important; background:rgba(52,210,123,.12) !important; border-color:rgba(52,210,123,.42) !important;} /* light theme */ :root[data-theme="light"] .fixtures .fx{background:#fff !important; border:1px solid rgba(0,0,0,.1) !important;} :root[data-theme="light"] .fixtures .fx:hover{border-color:rgba(0,0,0,.55) !important; box-shadow:0 0 22px -6px rgba(0,0,0,.22), 0 24px 50px -34px rgba(0,0,0,.4) !important;} :root[data-theme="light"] .fx-tag{color:#15140f !important; background:rgba(0,0,0,.05) !important; border-color:rgba(0,0,0,.26) !important;} /* ============================================================ Ecosystem Flow — glowing white % bars (row below the timeline) ============================================================ */ .rm-bars{margin-top:38px; padding-top:32px; border-top:1px solid rgba(255,255,255,.1); display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(28px,4vw,64px);} .rmb-title{font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:#9aa0aa; margin-bottom:20px;} .rmb{margin-bottom:18px;} .rmb:last-child{margin-bottom:0;} .rmb-row{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; gap:12px;} .rmb-l{font-size:13px; color:#cfd2d8;} .rmb-p{font-family:'Archivo',sans-serif; font-weight:800; font-size:15px; color:#fff; letter-spacing:-.3px;} .rmb-track{height:9px; border-radius:6px; background:rgba(255,255,255,.07); overflow:hidden;} .rmb-fill{height:100%; border-radius:6px; width:var(--w); background:linear-gradient(90deg, rgba(255,255,255,.5), #ffffff); box-shadow:0 0 14px 0 rgba(255,255,255,.55), 0 0 5px 0 rgba(255,255,255,.85); animation:rmbGrow 1.1s cubic-bezier(.2,.7,.2,1) both;} @keyframes rmbGrow{from{width:0}} /* light theme */ :root[data-theme="light"] .rm-bars{border-top-color:rgba(0,0,0,.1);} :root[data-theme="light"] .rmb-l{color:#4a4740;} :root[data-theme="light"] .rmb-p{color:#15140f;} :root[data-theme="light"] .rmb-track{background:rgba(0,0,0,.07);} :root[data-theme="light"] .rmb-fill{background:linear-gradient(90deg,#4a4740,#15140f); box-shadow:0 0 8px rgba(0,0,0,.18);} @media(max-width:760px){.rm-bars{grid-template-columns:1fr; gap:26px;}} @media(prefers-reduced-motion:reduce){.rmb-fill{animation:none;}} /* ============================================================ Music player (bottom-left) → match the dark/white theme (was gold/purple) ============================================================ */ .music{background:rgba(0,0,0,.74) !important; border:1px solid rgba(255,255,255,.12) !important;} .music .m-btn{background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.2) !important; color:#fff !important;} .music .m-btn:hover{background:rgba(255,255,255,.2) !important; transform:scale(1.12);} .music .m-play{background:#fff !important; color:#0a0a0a !important; border-color:transparent !important; box-shadow:0 0 14px -2px rgba(255,255,255,.55) !important;} .music .m-play:hover{background:#fff !important;} .music .m-vol{background:rgba(255,255,255,.18) !important;} .music .m-vol::-webkit-slider-thumb{background:#fff !important;} .music .m-vol::-moz-range-thumb{background:#fff !important;} /* light theme */ :root[data-theme="light"] .music{background:rgba(255,255,255,.92) !important; border-color:rgba(0,0,0,.12) !important;} :root[data-theme="light"] .music,:root[data-theme="light"] .music *{color:#15140f !important;} :root[data-theme="light"] .music .m-btn{background:rgba(0,0,0,.05) !important; border-color:rgba(0,0,0,.18) !important; color:#15140f !important;} :root[data-theme="light"] .music .m-btn:hover{background:rgba(0,0,0,.12) !important;} :root[data-theme="light"] .music .m-play{background:#15140f !important; color:#fff !important; box-shadow:none !important;} :root[data-theme="light"] .music .m-vol{background:rgba(0,0,0,.15) !important;} :root[data-theme="light"] .music .m-vol::-webkit-slider-thumb{background:#15140f !important;} :root[data-theme="light"] .music .m-vol::-moz-range-thumb{background:#15140f !important;} /* play/pause icon must contrast with its SOLID button bg (the blanket .music * colour made it white-on-white) */ .music .m-play svg, .music .m-play svg *{fill:#0a0a0a !important; color:#0a0a0a !important;} :root[data-theme="light"] .music .m-play svg, :root[data-theme="light"] .music .m-play svg *{fill:#fff !important; color:#fff !important;} /* ============================================================ WC26 (Flagship) page → black framed boxes · edge glow · white-glow hover ============================================================ */ /* WC26 header = full-bleed banner image · "The Flagship" + subtitle white on the left */ .pagehead-wc{position:relative; width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; margin-top:0 !important; min-height:clamp(160px,14vw,210px); padding:clamp(22px,3vh,40px) max(22px,calc((100vw - min(1640px,95vw))/2 + 22px)) clamp(20px,2.6vh,32px) !important; background:#000 url('wc26-banner.jpg') center 42%/cover no-repeat !important; display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; text-align:left !important; overflow:hidden;} /* big dramatic photo banner — fades down to pure black, blending into the page + the Flagship Coin card */ .pagehead-wc::before{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 48%, rgba(0,0,0,.55) 74%, rgba(0,0,0,.92) 92%, #000 100%), linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.16) 32%, rgba(0,0,0,0) 56%);} .pagehead-wc{box-shadow:none !important;} /* pull the Flagship Coin card up so it overlaps the banner's black fade a little */ .pagehead-wc + .flag-card{margin-top:-18px !important; position:relative; z-index:2;} /* mobile: the photo is 3:1 — bias right so the FIFA 2026 coin stays in frame */ @media (max-width:560px){ .pagehead-wc{background-position:82% 40% !important; min-height:clamp(150px,40vw,200px);} } .pagehead-wc>*{position:relative; z-index:1;} /* minimal: clean white text, soft diffuse shadow only — no black stroke/outline */ .pagehead-wc h2, .pagehead-wc h2 .gold-text{color:#fff !important; -webkit-text-fill-color:#fff !important; background:none !important; text-shadow:0 2px 20px rgba(0,0,0,.5);} .pagehead-wc p{color:rgba(255,255,255,.92) !important; max-width:560px; font-weight:500 !important; text-shadow:0 2px 12px rgba(0,0,0,.55);} /* every section box → solid black + 135° edge-lit border (top-left & bottom-right) */ .flag-card, .ca-bar, .chart-panel, .hl-tile, .stats .scard, .vibe{ background:linear-gradient(#000,#000) padding-box, linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.045) 38%, rgba(255,255,255,.045) 62%, rgba(255,255,255,.22)) border-box !important; border:1px solid transparent !important; box-shadow:none !important; color:#fff; transition:transform .18s ease, border-color .18s ease, box-shadow .2s ease;} /* flag-card: drop the banner/overlay so the black shows */ .flag-card .fc-l{background:transparent !important;} .flag-card .fc-l .ov{display:none !important;} .flag-card .fc-r{background:transparent !important; border-left:1px solid rgba(255,255,255,.1) !important;} /* white-glow on hover (the "spark" when you mouse over) */ .flag-card:hover, .ca-bar:hover, .chart-panel:hover, .hl-tile:hover, .stats .scard:hover, .vibe:hover{ border-color:rgba(255,255,255,.6) !important; box-shadow:0 0 26px -4px rgba(255,255,255,.28), 0 24px 50px -30px rgba(0,0,0,.85) !important;} /* keep text readable (white) on the black boxes */ .hl-tile .hl-k, .hl-tile .hl-sub, .stats .scard .k, .vibe, .vibe *{color:#cdd0d6 !important;} .hl-tile .hl-v, .stats .scard .v{color:#fff !important;} /* light theme: clean white boxes */ :root[data-theme="light"] .pagehead-wc h2, :root[data-theme="light"] .pagehead-wc h2 .gold-text{color:#fff !important; -webkit-text-fill-color:#fff !important;} :root[data-theme="light"] .flag-card, :root[data-theme="light"] .ca-bar, :root[data-theme="light"] .chart-panel, :root[data-theme="light"] .hl-tile, :root[data-theme="light"] .stats .scard, :root[data-theme="light"] .vibe{ background:#fff !important; border:1px solid rgba(0,0,0,.1) !important; color:#15140f;} :root[data-theme="light"] .flag-card:hover, :root[data-theme="light"] .ca-bar:hover, :root[data-theme="light"] .chart-panel:hover, :root[data-theme="light"] .hl-tile:hover, :root[data-theme="light"] .stats .scard:hover, :root[data-theme="light"] .vibe:hover{ border-color:rgba(0,0,0,.5) !important; box-shadow:0 0 22px -6px rgba(0,0,0,.22), 0 24px 50px -34px rgba(0,0,0,.4) !important;} :root[data-theme="light"] .hl-tile .hl-v, :root[data-theme="light"] .stats .scard .v{color:#15140f !important;} :root[data-theme="light"] .hl-tile .hl-k, :root[data-theme="light"] .hl-tile .hl-sub, :root[data-theme="light"] .stats .scard .k, :root[data-theme="light"] .vibe, :root[data-theme="light"] .vibe *{color:#4a4740 !important;} /* ============================================================ WC26: Contract · chart controls · Buy button → white-themed (2026-06-07) ============================================================ */ .ca-label{color:rgba(255,255,255,.72) !important;} .ca-addr{color:#fff !important;} .ca-copy{background:rgba(255,255,255,.1) !important; color:#fff !important; border:1px solid rgba(255,255,255,.26) !important;} .ca-copy:hover{background:rgba(255,255,255,.2) !important; filter:none !important;} .chart-range{background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.14) !important;} .chart-range button{color:#fff !important;} .chart-range button.on{color:#0a0a0a !important; background:#fff !important;} .chart-src{color:#fff !important;} /* Buy CTA → white, rounded, glowing */ .btn-gold{background:#fff !important; color:#0a0a0a !important; border:0 !important; border-radius:14px !important; box-shadow:0 0 24px -6px rgba(255,255,255,.5) !important;} .btn-gold:hover{background:#fff !important; transform:translateY(-2px); box-shadow:0 0 32px -4px rgba(255,255,255,.7) !important; filter:none !important;} /* WC26: $WC26 mark → plain white · Buy CTA → black, lights up white-neon on hover */ .fp-big, .fp-big.gold-text{ background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; color:#fff !important; -webkit-text-fill-color:#fff !important; text-shadow:0 2px 18px rgba(0,0,0,.4) !important; filter:none !important;} .fp-mark{background:radial-gradient(85% 120% at 50% 0, rgba(255,255,255,.08), transparent 64%) !important;} /* LIGHT MODE: $WC26 flagship mark → black (white was invisible on the light card) */ :root[data-theme="light"] .fp-big, :root[data-theme="light"] .fp-big.gold-text{color:#15140f !important; -webkit-text-fill-color:#15140f !important; text-shadow:none !important;} :root[data-theme="light"] .fp-mark{background:radial-gradient(85% 120% at 50% 0, rgba(0,0,0,.05), transparent 64%) !important;} .btn-gold.btn-buy{background:#0c0c0c !important; color:#fff !important; border:1px solid rgba(255,255,255,.3) !important; box-shadow:none !important;} .btn-gold.btn-buy:hover{background:#fff !important; color:#0a0a0a !important; border-color:#fff !important; transform:translateY(-2px); box-shadow:0 0 14px rgba(255,255,255,.85), 0 0 36px rgba(190,235,255,.6), 0 0 70px rgba(150,220,255,.45) !important; filter:none !important;} :root[data-theme="light"] .btn-gold.btn-buy{background:#15140f !important; color:#fff !important; border:1px solid rgba(0,0,0,.2) !important;} :root[data-theme="light"] .btn-gold.btn-buy:hover{background:#fff !important; color:#15140f !important; border-color:rgba(0,0,0,.12) !important; box-shadow:0 0 14px rgba(0,0,0,.12), 0 0 36px rgba(120,200,255,.5), 0 0 70px rgba(120,200,255,.32) !important;} /* light theme variants */ :root[data-theme="light"] .ca-label{color:#6b675f !important;} :root[data-theme="light"] .ca-addr{color:#15140f !important;} :root[data-theme="light"] .ca-copy{background:rgba(0,0,0,.06) !important; color:#15140f !important; border-color:rgba(0,0,0,.2) !important;} :root[data-theme="light"] .chart-range{background:rgba(0,0,0,.05) !important; border-color:rgba(0,0,0,.12) !important;} :root[data-theme="light"] .chart-range button{color:#15140f !important;} :root[data-theme="light"] .chart-range button.on{color:#fff !important; background:#15140f !important;} :root[data-theme="light"] .chart-src{color:#15140f !important;} :root[data-theme="light"] .btn-gold{background:#15140f !important; color:#fff !important; box-shadow:0 12px 30px -12px rgba(0,0,0,.4) !important;} :root[data-theme="light"] .btn-gold:hover{background:#15140f !important;} /* ============================================================ 2026-06-07: badge→grey · light-mode flag-card legibility · National Leaderboard photo banner · monochrome leaderboard table ============================================================ */ /* (1) "Flagship Coin" badge → neutral grey pill (was gold), readable in both themes */ .fc-badge{background:rgba(255,255,255,.1) !important; color:#e9ebef !important; border:1px solid rgba(255,255,255,.2) !important; -webkit-text-fill-color:#e9ebef;} :root[data-theme="light"] .fc-badge{background:rgba(0,0,0,.07) !important; color:#15140f !important; border-color:rgba(0,0,0,.14) !important; -webkit-text-fill-color:#15140f;} /* (2) LIGHT theme: flag-card text was forced near-white (#f3f1ec !important) → invisible on the white card. Force dark. */ :root[data-theme="light"] .fc-name h4, :root[data-theme="light"] .fc-price, :root[data-theme="light"] .fc-cell .v{color:#15140f !important; -webkit-text-fill-color:#15140f !important;} :root[data-theme="light"] .fc-cell .k{color:#5b574d !important;} :root[data-theme="light"] .fc-name .tk{color:#8a6a2e !important;} /* (3) National Leaderboard → same cinematic banner as The Flagship, different photo — bigger/taller, fades to black, team table overlaps a little */ .pagehead-wc.pagehead-lb{background-image:url('nations-banner.jpg') !important; background-position:center 42% !important; min-height:clamp(160px,14vw,210px) !important; justify-content:flex-start !important; padding-top:clamp(22px,3vh,40px) !important; padding-bottom:clamp(20px,2.6vh,32px) !important;} .pagehead-lb + .shead{margin-top:-18px !important; position:relative; z-index:2;} @media (max-width:560px){ .pagehead-wc.pagehead-lb{background-position:center 46% !important; min-height:clamp(150px,40vw,200px) !important;} } /* (4) Leaderboard table → monochrome: gold accents become the theme text colour (white on dark / dark on light) */ .thead{background:rgba(255,255,255,.04) !important;} :root[data-theme="light"] .thead{background:rgba(0,0,0,.04) !important;} .thead div.act{color:var(--txt) !important;} .rank.top{color:var(--txt) !important;} .team .tkr, .trow .tkr, .tkr{color:var(--txt) !important; -webkit-text-fill-color:var(--txt);} .trez .v{color:var(--txt) !important;} .mini-buy{background:color-mix(in srgb,var(--txt) 10%,transparent) !important; color:var(--txt) !important; border:1px solid color-mix(in srgb,var(--txt) 24%,transparent) !important;} .mini-buy:hover{background:var(--txt) !important; color:var(--bg) !important;} /* confederation filter (active) → white/black pill instead of gold */ .seg button.on{color:var(--bg) !important; background:var(--txt) !important;} /* ============================================================ 2026-06-07: Match Schedule → cinematic banner (like Flagship) + monochrome match list ============================================================ */ .pagehead-wc.pagehead-mt{background-image:url('matches-banner.jpg') !important; background-position:center 42% !important; min-height:clamp(160px,14vw,210px) !important; justify-content:flex-start !important; padding-top:clamp(22px,3vh,40px) !important; padding-bottom:clamp(20px,2.6vh,32px) !important;} .pagehead-mt + .shead{margin-top:-18px !important; position:relative; z-index:2;} @media (max-width:560px){ .pagehead-wc.pagehead-mt{background-position:center 44% !important; min-height:clamp(150px,40vw,200px) !important;} } /* match list → monochrome (gold/purple → theme text colour) like the National Leaderboard */ .chip.on{color:var(--bg) !important; background:var(--txt) !important; border-color:var(--txt) !important;} .mside .tk{color:var(--txt) !important; -webkit-text-fill-color:var(--txt);} .mmid:not(.live){color:var(--txt) !important;} .mtime .grp{color:var(--txt) !important; background:color-mix(in srgb,var(--txt) 8%,transparent) !important; border:1px solid color-mix(in srgb,var(--txt) 20%,transparent) !important;} /* match rows → solid black; only the soonest upcoming match-day glows white */ .mrow{background:#000 !important; border:1px solid rgba(255,255,255,.07) !important; box-shadow:none !important;} .mrow:hover{border-color:rgba(255,255,255,.22) !important; box-shadow:0 14px 30px -22px rgba(255,255,255,.4) !important;} .mrow.soon{border-color:rgba(255,255,255,.62) !important; box-shadow:0 0 24px -2px rgba(255,255,255,.34), inset 0 0 0 1px rgba(255,255,255,.18) !important;} .mrow.soon:hover{border-color:rgba(255,255,255,.85) !important; box-shadow:0 0 30px 0 rgba(255,255,255,.45), inset 0 0 0 1px rgba(255,255,255,.25) !important;} .toggle input{accent-color:#cfd2d8 !important;} .dayhdr{color:var(--txt) !important;} /* LIGHT MODE: white rows + black text (clean day theme). Day section becomes the page bg so rows read as cards. Text auto-resolves dark via var(--txt)/var(--muted); only the row surface + the "soon" glow need a light variant. */ :root[data-theme="light"] .daysec{background:transparent !important; border:0 !important; box-shadow:none !important;} :root[data-theme="light"] .mrow{background:#fff !important; border-color:rgba(0,0,0,.1) !important; box-shadow:0 12px 28px -22px rgba(0,0,0,.4) !important;} :root[data-theme="light"] .mrow:hover{border-color:rgba(0,0,0,.3) !important; box-shadow:0 16px 34px -22px rgba(0,0,0,.45) !important;} :root[data-theme="light"] .mrow.soon{border-color:rgba(0,0,0,.6) !important; box-shadow:0 0 22px -5px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.14) !important;} :root[data-theme="light"] .mrow.soon:hover{border-color:rgba(0,0,0,.82) !important; box-shadow:0 0 28px -3px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.22) !important;} :root[data-theme="light"] .mrow .mtime .grp{background:rgba(0,0,0,.05) !important; border-color:rgba(0,0,0,.16) !important;} .pagehead .tz{color:color-mix(in srgb,var(--txt) 70%,transparent) !important;} /* ============================================================ 2026-06-07: How It Works → cinematic banner (like Flagship) ============================================================ */ .pagehead-wc.pagehead-hiw{background-image:url('howitworks-banner.jpg') !important; background-position:center 40% !important; min-height:clamp(160px,14vw,210px) !important; justify-content:flex-start !important; padding-top:clamp(22px,3vh,40px) !important; padding-bottom:clamp(20px,2.6vh,32px) !important;} .pagehead-hiw + section{margin-top:-42px !important; position:relative; z-index:2;} @media (max-width:560px){ .pagehead-wc.pagehead-hiw{background-position:center 42% !important; min-height:clamp(150px,40vw,200px) !important;} } /* ============================================================ HOW IT WORKS — recolour gold / brown accents → neutral grey Scoped to #tokenomics (exists only on howitworks.html). Both themes. ============================================================ */ /* 1) everything driven by var(--gold): icons, .tkr, .tk-note, .tk-ico, .gold-text gradients */ #tokenomics{--gold:#b9b6ae; --gold2:#8a867d;} :root[data-theme="light"] #tokenomics{--gold:#6b675f; --gold2:#4a4740;} /* 2) leading dash before section titles */ #tokenomics .shead h3::before{background:linear-gradient(90deg,#b9b6ae,#8a867d) !important;} :root[data-theme="light"] #tokenomics .shead h3::before{background:linear-gradient(90deg,#8a867d,#5b574d) !important;} /* 3) vertical flow connector line */ #tokenomics .tk-flowwrap::before{background:linear-gradient(180deg,transparent,rgba(255,255,255,.18),rgba(255,255,255,.18),transparent) !important;} :root[data-theme="light"] #tokenomics .tk-flowwrap::before{background:linear-gradient(180deg,transparent,rgba(0,0,0,.18),rgba(0,0,0,.18),transparent) !important;} /* 4) "At launch" status badges (literal gold) */ #tokenomics .tbadge.wait .tb-tag{color:#c4c1b9 !important; background:rgba(255,255,255,.08) !important;} :root[data-theme="light"] #tokenomics .tbadge.wait .tb-tag{color:#5b574d !important; background:rgba(0,0,0,.06) !important;} /* 5) gold tints on chips / "soon" pills */ #tokenomics .vr-soon{background:rgba(255,255,255,.06) !important;} :root[data-theme="light"] #tokenomics .vr-soon{background:rgba(0,0,0,.05) !important;} #tokenomics .tk-chip{background:rgba(255,255,255,.08) !important; border-color:rgba(255,255,255,.22) !important;} :root[data-theme="light"] #tokenomics .tk-chip{background:rgba(0,0,0,.05) !important; border-color:rgba(0,0,0,.16) !important;} /* 6) numbered step badges (gold gradient + glow) */ #tokenomics .tk-num{background:linear-gradient(180deg,#d8d6d0,#9a958c 60%,#6f6b62) !important; box-shadow:0 4px 12px -4px rgba(0,0,0,.5) !important; color:#1f1f1f !important;} /* footer social button (Twitter / X) → black, was gold-tinted */ .soc{background:#0c0c0c !important; border:1px solid rgba(255,255,255,.2) !important; color:#fff !important;} .soc:hover{background:#1a1a1a !important; border-color:rgba(255,255,255,.42) !important; color:#fff !important; transform:translateY(-2px);} /* homepage hero: Buy / Dexscreener buttons + CA chip — translucent black (glassy), compact */ .hero-cta{display:flex; gap:10px; margin-top:24px; flex-wrap:wrap;} .hero-btn{font-family:'Sora'; font-weight:700; font-size:12.5px; letter-spacing:.4px; color:#fff; text-decoration:none; background:rgba(0,0,0,.38); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); border:1px solid rgba(255,255,255,.22); border-radius:10px; padding:9px 18px; transition:transform .16s ease, background .16s ease, border-color .16s ease; cursor:pointer;} .hero-btn:hover{background:rgba(0,0,0,.55); border-color:rgba(255,255,255,.5); transform:translateY(-2px);} .hero-btn.dis{opacity:.45; pointer-events:none;} /* compact single-row CA chip (label is just "CA"); whole chip + Copy both copy */ .hero-ca{display:inline-flex; align-items:center; gap:9px; margin-top:24px; width:fit-content; max-width:100%; background:rgba(0,0,0,.38); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); border:1px solid rgba(255,255,255,.16); border-radius:9px; padding:6px 8px 6px 11px; cursor:pointer; transition:border-color .16s ease;} .hero-ca:hover{border-color:rgba(255,255,255,.4);} .hca-label{font-size:9px; font-weight:700; letter-spacing:1.5px; color:#9a958c; flex:0 0 auto;} .hca-addr{font-family:'JetBrains Mono'; font-size:10.5px; color:#e8e8e8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;} .hca-copy{font-family:'Sora'; font-weight:700; font-size:9.5px; letter-spacing:.5px; color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); border-radius:6px; padding:5px 9px; cursor:pointer; white-space:nowrap; flex:0 0 auto;} .hca-copy:hover{background:rgba(255,255,255,.26);}