/* ---- content-visibility: skip rendering heavy BELOW-THE-FOLD blocks ---- */ /* the browser won't lay out / paint / animate these until they near the viewport */ #wcGroups{ content-visibility:auto; contain-intrinsic-size:auto 1400px; } .seoblock{ content-visibility:auto; contain-intrinsic-size:auto 220px; } /* ---- OFF-SCREEN PAUSE: JS adds .pk-offscreen when a host scrolls out ---- */ /* every ambient FX layer inside a paused host stops compositing (biggest win) */ .pk-offscreen .wc-blob, .pk-offscreen .wc-aurora, .pk-offscreen .wc-hero h1 .g, .pk-offscreen .pkg-rays, .pk-offscreen .pkg-trophy, .pk-offscreen .pkg-spark{ animation-play-state:paused !important; } /* ---- HERO: cinematic animated background ------------------------ */ .wc-hero{ position:relative; overflow:hidden; border:1px solid rgba(245,197,24,.16); border-radius:18px; background: radial-gradient(120% 120% at 78% 12%, rgba(245,197,24,.05), transparent 46%), radial-gradient(110% 130% at 10% 92%, rgba(31,191,90,.045), transparent 50%), linear-gradient(160deg,#0a0a0f 0%,#070709 52%,#020203 100%); box-shadow:0 26px 70px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.03); isolation:isolate; } /* kill the original single corner glow; we paint our own field of blobs */ .wc-hero .wc-hero-glow{display:none} /* ambient drifting glow blobs — capped blur, 2 active drifters (b3 static) */ .wc-fx{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden} .wc-blob{position:absolute; border-radius:50%; filter:blur(40px); opacity:.13} .wc-blob.b1{width:520px;height:520px;top:-160px;right:-120px; background:radial-gradient(circle,rgba(245,197,24,.9),transparent 68%)} .wc-blob.b2{width:460px;height:460px;bottom:-180px;left:-120px; background:radial-gradient(circle,rgba(31,191,90,.85),transparent 68%); opacity:.11} /* b3 is now a STATIC ambient glow (no infinite animation) — keeps the depth, costs nothing */ .wc-blob.b3{width:380px;height:380px;top:30%;left:42%; background:radial-gradient(circle,rgba(245,197,24,.6),transparent 70%); opacity:.07} /* signature graphic — pitch lines + pulsing centre circle, very low opacity */ .wc-pitch{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5} .wc-pitch svg{width:100%; height:100%} .wc-pitch .pl{stroke:rgba(245,197,24,.10); stroke-width:1; fill:none; vector-effect:non-scaling-stroke} .wc-pitch .circ{stroke:rgba(245,197,24,.16); stroke-width:1.2; fill:none; transform-origin:center; vector-effect:non-scaling-stroke} /* faint scanline-grid overlay for texture */ .wc-grid{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 35%,transparent 78%); mask-image:radial-gradient(120% 90% at 50% 0%,#000 35%,transparent 78%);} .wc-hero-in{position:relative; z-index:2; padding:54px 40px 46px} /* ---- HERO: headline with impact -------------------------------- */ .wc-hero-tag{ display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:12px; letter-spacing:2.4px; text-transform:uppercase; color:var(--gold); margin-bottom:18px; padding:7px 14px; border-radius:999px; background:rgba(40,34,10,.6); border:1px solid rgba(245,197,24,.22); } .wc-hero h1{ font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(3.6rem,9.5vw,8.2rem); line-height:.86; letter-spacing:1px; margin:0 0 18px; color:#f3f3f5; text-shadow:0 2px 30px rgba(0,0,0,.6); } .wc-hero h1 .g{ background:linear-gradient(100deg,#fff5cf 0%,#F5C518 32%,#ffe27a 56%,#c9a313 78%,#F5C518 100%); background-size:220% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; filter:drop-shadow(0 0 26px rgba(245,197,24,.34)); } .wc-hero p{color:#c7c8cd; font-size:clamp(15px,1.5vw,17.5px); max-width:600px; margin-bottom:26px} .wc-hero p b{color:#fff} /* ---- HERO: glassmorphism stat panel ---------------------------- */ .wc-glass{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:6px 0 4px; max-width:660px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:16px; backdrop-filter:blur(18px) saturate(120%); -webkit-backdrop-filter:blur(18px) saturate(120%); box-shadow:0 18px 50px -24px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06); overflow:hidden; } .wc-glass .gs{padding:18px 16px; position:relative; text-align:left} .wc-glass .gs + .gs::before{content:""; position:absolute; left:0; top:22%; bottom:22%; width:1px; background:linear-gradient(180deg,transparent,rgba(255,255,255,.12),transparent)} .wc-glass .gn{font-family:'Bebas Neue',sans-serif; font-size:2.5rem; line-height:1; letter-spacing:.5px; color:var(--gold); font-variant-numeric:tabular-nums; font-feature-settings:"tnum"} .wc-glass .gn.green{color:var(--green)} .wc-glass .gl{font-size:10.5px; letter-spacing:.7px; text-transform:uppercase; color:#9a9ba2; margin-top:6px; font-weight:600} /* ---- HERO: above-the-fold conversion CTA (cinematic) ----------- */ .wc-hero .hero-cta{margin:30px 0 2px; gap:13px} .wc-hero .hero-cta .hero-cta-main{ font-size:17px; padding:16px 30px; font-weight:800; letter-spacing:.5px; border-radius:10px; box-shadow:0 10px 34px -8px rgba(245,197,24,.5), inset 0 1px 0 rgba(255,255,255,.4); } .wc-hero .hero-cta .hero-cta-alt{font-size:14.5px} .wc-hero .hero-cta .hero-cta-sub{font-size:12.5px; color:#a9aab2} /* keep the original countdown + stats but give the boxes a subtle gold glow */ .wc-hero .wc-countdown{margin-top:26px} .wc-hero .wc-countdown .cd{box-shadow:0 0 0 1px rgba(245,197,24,.12), 0 10px 30px -16px rgba(245,197,24,.4)} /* ---- micro-interactions: lift + gold glow ---------------------- */ [data-wow="lift"]{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease} [data-wow="lift"]:hover{transform:translateY(-3px); box-shadow:0 16px 38px -18px rgba(245,197,24,.45), 0 4px 14px -8px rgba(0,0,0,.6); border-color:rgba(245,197,24,.4)} [data-wow="lift"]:active{transform:scale(.985)} /* ---- scroll-reveal base state ---------------------------------- */ [data-reveal]{opacity:1} /* ---- verified-record panel: a touch more presence -------------- */ .wc-track{background: radial-gradient(120% 120% at 0% 0%, rgba(245,197,24,.05), transparent 55%), var(--card); border:1px solid rgba(245,197,24,.16)} .wc-track .statbig .b{background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.07)} @media(max-width:680px){ .wc-hero-in{padding:40px 22px 34px} .wc-glass{grid-template-columns:repeat(2,1fr); max-width:100%} .wc-glass .gs:nth-child(2)::before,.wc-glass .gs:nth-child(4)::before{display:none} .wc-glass .gs:nth-child(3),.wc-glass .gs:nth-child(4){border-top:1px solid rgba(255,255,255,.07)} .wc-blob{filter:blur(38px)} } /* ============================================================== */ /* ALL MOTION lives here — reduced-motion users get a clean static */ /* ============================================================== */ @media (prefers-reduced-motion: no-preference){ /* only 2 ambient blob drifters now (b3 static). will-change added by JS ONLY while visible. */ .wc-blob.b1{animation:wcDrift1 18s ease-in-out infinite} .wc-blob.b2{animation:wcDrift2 22s ease-in-out infinite} /* pitch centre circle is now STATIC (no infinite pulse) — faint, premium, free */ .wc-hero h1 .g{animation:wcShimmer 7s linear infinite} [data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1)} [data-reveal].in{opacity:1; transform:none} @keyframes wcDrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-42px,34px) scale(1.1)}} @keyframes wcDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(46px,-30px) scale(1.12)}} @keyframes wcShimmer{0%{background-position:0% center}100%{background-position:220% center}} } /* ================================================================= */ /* WOW RESULT CARDS — broadcast / trading-card grade. */ /* Targets the SHARED JS-rendered classes (inline overrides linked */ /* stylesheet). The result card = .wc-cta-card.wc-result inside the */ /* .card.mcard shell; fan vote = .pk-poll.voted below it. */ /* ================================================================= */ /* --- the card SHELL holding a finished match (has a .wc-result inside) --- */ /* Broadcast-grade: richer vertical gradient, stronger frame, real depth */ /* shadow so cards LIFT off the page. Static only — hover adds the lift. */ .card.mcard{ position:relative; border-radius:16px; background: radial-gradient(140% 80% at 50% -8%, rgba(245,197,24,.045), transparent 58%), linear-gradient(180deg,#101017 0%,#0a0a0f 58%,#050507 100%); border:1px solid rgba(255,255,255,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 1px 0 rgba(0,0,0,.5), 0 26px 54px -30px rgba(0,0,0,.95); transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s cubic-bezier(.16,1,.3,1), border-color .28s; overflow:visible; } .card.mcard:hover{ transform:translateY(-5px); border-color:rgba(245,197,24,.40); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 60px -28px rgba(0,0,0,.95), 0 0 0 1px rgba(245,197,24,.16), 0 0 56px -24px rgba(245,197,24,.6); } /* a card whose result LANDED carries a permanent (static) gold lift accent */ .card.mcard:has(.wc-result.won){ border-color:rgba(245,197,24,.30); box-shadow: inset 0 1px 0 rgba(245,197,24,.10), 0 26px 54px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(245,197,24,.10), 0 0 50px -26px rgba(245,197,24,.42); } /* a clear loss gets a tasteful, very faint red edge — crisp, not loud */ .card.mcard:has(.wc-result:not(.won)){ border-color:rgba(229,72,77,.16); } /* ===== TEAM ROWS — bolder crests, heavier names, metallic FIFA pill ===== */ .card.mcard .teams{padding:16px 16px 4px; gap:11px} .card.mcard .teams .team{ font-size:19px; font-weight:800; letter-spacing:.1px; color:#f3f4f7; gap:12px; } .card.mcard .teams .team img, .card.mcard .teams .team .mono, .card.mcard .teams .team .ball{ width:30px; height:30px; } /* refine the rank pills sitting in the header — refined metallic gold */ .card.mcard .wcrank{ margin-left:9px; padding:3px 9px; font-weight:800; background:linear-gradient(180deg,rgba(245,197,24,.16),rgba(245,197,24,.05)); border-color:rgba(245,197,24,.42); box-shadow: inset 0 1px 0 rgba(255,245,205,.35), 0 0 0 1px rgba(245,197,24,.08), 0 3px 10px -5px rgba(245,197,24,.55); } /* --- RESULT card body — a framed broadcast scoreboard panel --- */ .wc-cta-card.wc-result{ position:relative; isolation:isolate; border-radius:14px; padding:16px 16px 16px; background: radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.05), transparent 55%), linear-gradient(180deg,#15151b 0%,#0d0d12 100%); border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 30px -22px rgba(0,0,0,.9); overflow:hidden; } /* neutral (not-called) cards keep a cool top edge */ .wc-cta-card.wc-result::before{ content:""; position:absolute; inset:0 0 auto 0; height:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); opacity:.6; } /* CALLED-IT (won) card = celebratory gold/green treatment */ .wc-cta-card.wc-result.won{ background: radial-gradient(130% 95% at 50% -12%, rgba(245,197,24,.13), transparent 56%), radial-gradient(120% 120% at 100% 120%, rgba(31,191,90,.10), transparent 60%), linear-gradient(180deg,#191608 0%,#0e0d09 100%); border-color:rgba(245,197,24,.34); box-shadow:inset 0 1px 0 rgba(245,197,24,.14), 0 14px 40px -24px rgba(245,197,24,.45); } .wc-cta-card.wc-result.won::before{ height:3px; opacity:1; background:linear-gradient(90deg,rgba(31,191,90,.0),#1fbf5a 18%,#F5C518 50%,#1fbf5a 82%,rgba(31,191,90,0)); box-shadow:0 0 18px rgba(245,197,24,.5); } /* --- FULL TIME — refined frosted status chip above the score --- */ .wc-cta-card.wc-result .wc-cta-lbl{ display:inline-flex; align-items:center; gap:6px; position:relative; z-index:1; font-size:10px; font-weight:900; letter-spacing:.26em; color:#aeb3bb; text-transform:uppercase; padding:5px 12px; border-radius:999px; background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); border:1px solid rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 2px 8px -4px rgba(0,0,0,.6); } .wc-cta-card.wc-result.won .wc-cta-lbl{ color:#ffe9a8; background:linear-gradient(180deg,rgba(245,197,24,.18),rgba(245,197,24,.06)); border-color:rgba(245,197,24,.40); box-shadow:inset 0 1px 0 rgba(255,245,205,.30), 0 2px 10px -4px rgba(245,197,24,.5); } /* === THE SCOREBOARD — score lives in its OWN framed premium panel === */ .wc-cta-card.wc-result .wc-res-score{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; margin:12px 0 6px; padding:14px 18px 12px; border-radius:14px; font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(58px,17vw,88px); line-height:.86; letter-spacing:1px; text-align:center; color:#f6f7f9; font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; /* the scoreboard housing: dark gradient + inset hairline + inner depth + top sheen */ background:linear-gradient(180deg,#16171b 0%,#0c0d10 100%); border:1px solid rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 14px 30px -20px rgba(0,0,0,.9), inset 0 -10px 24px -18px rgba(0,0,0,.7), 0 6px 20px -14px rgba(0,0,0,.85); text-shadow:0 2px 26px rgba(0,0,0,.7); } .wc-cta-card.wc-result .wc-res-score span{ color:#52525c; margin:0 clamp(10px,4vw,22px); font-size:.5em; position:relative; top:-.06em; letter-spacing:0; text-shadow:none; } /* CALLED card → gold numerals + soft glow + warm scoreboard housing */ .wc-cta-card.wc-result.won .wc-res-score{ color:#F5C518; -webkit-text-fill-color:#F5C518; background: radial-gradient(120% 120% at 50% 0%, rgba(245,197,24,.10), transparent 60%), linear-gradient(180deg,#1a1608 0%,#0e0c07 100%); border-color:rgba(245,197,24,.28); box-shadow: inset 0 1px 0 rgba(245,197,24,.20), inset 0 14px 30px -20px rgba(0,0,0,.85), 0 0 30px -16px rgba(245,197,24,.5), 0 6px 20px -14px rgba(0,0,0,.85); text-shadow:0 0 26px rgba(245,197,24,.45), 0 2px 4px rgba(0,0,0,.5); } .wc-cta-card.wc-result.won .wc-res-score span{ color:#7a6a2a; -webkit-text-fill-color:#7a6a2a; text-shadow:none; } /* --- PICKS LANDED — bolder pips (gold filled = landed, hollow = missed) --- */ .wc-cta-card.wc-result .wc-cta-meta{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; position:relative; z-index:1; margin-top:12px; font-size:12.5px; font-weight:900; letter-spacing:.02em; color:#c7cad0; } .wc-cta-card.wc-result .wc-cta-meta::before{ content:attr(data-pips); font-family:'Sofia Sans',sans-serif; letter-spacing:4px; font-size:16px; line-height:1; color:var(--gold); text-shadow:0 0 12px rgba(245,197,24,.6); } /* --- CALLED IT — glowing gold trophy badge --- */ .wc-cta-card.wc-result .wc-res-called{ position:relative; overflow:hidden; z-index:1; display:flex; align-items:center; justify-content:center; gap:7px; width:max-content; max-width:100%; margin:14px auto 2px; padding:9px 18px; border-radius:999px; font-size:12px; font-weight:900; letter-spacing:.09em; text-transform:uppercase; color:#1a1407; background:linear-gradient(100deg,#ffe27a 0%,#F5C518 46%,#e0b117 100%); border:1px solid rgba(255,255,255,.45); box-shadow:0 0 0 1px rgba(245,197,24,.4), 0 8px 24px -8px rgba(245,197,24,.8), inset 0 1px 0 rgba(255,255,255,.6); } /* --- GOLD CTA BUTTON — bigger, bolder, deeper --- */ .wc-cta-card.wc-result .wc-cta-btn{ position:relative; overflow:hidden; z-index:1; display:block; width:100%; min-height:50px; margin-top:15px; padding:15px 16px; border:none; border-radius:12px; font-family:inherit; font-size:14.5px; font-weight:900; letter-spacing:.015em; color:#161106; cursor:pointer; background:linear-gradient(180deg,#ffe892 0%,#F5C518 50%,#dca90f 100%); box-shadow: 0 8px 22px -8px rgba(245,197,24,.78), 0 1px 0 rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(120,86,0,.25); transition:transform .18s ease, box-shadow .22s ease, filter .18s ease; } .wc-cta-card.wc-result .wc-cta-btn:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow: 0 14px 30px -10px rgba(245,197,24,.9), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 0 rgba(120,86,0,.25); } .wc-cta-card.wc-result .wc-cta-btn:active{transform:translateY(0) scale(.985)} /* --- FAN VOTE (voted state) --- */ .pk-poll.voted{ margin-top:14px; padding:15px 14px; border-radius:12px; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.08); } .pk-poll.voted .pk-voted-hdr{ display:flex; align-items:center; gap:7px; font-size:10px; font-weight:900; letter-spacing:.18em; color:#8b8e96; margin-bottom:12px; } .pk-poll.voted .pk-voted-hdr::before{ content:"●"; color:var(--gold); font-size:8px; filter:drop-shadow(0 0 5px rgba(245,197,24,.7)); } .pk-poll.voted .pk-bar{margin:9px 0} .pk-poll.voted .pk-bar-l{ display:flex; justify-content:space-between; font-size:12px; font-weight:700; color:#c6c8ce; margin-bottom:4px; } .pk-poll.voted .pk-bar-l span:last-child{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"} .pk-poll.voted .pk-bar-t{ height:8px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.06); box-shadow:inset 0 1px 2px rgba(0,0,0,.4); } .pk-poll.voted .pk-bar-f{ height:100%; border-radius:999px; background:linear-gradient(90deg,#6a6c74,#9a9da4); } /* the side the visitor backed = gold, glowing */ .pk-poll.voted .pk-bar.me .pk-bar-l{color:var(--gold)} .pk-poll.voted .pk-bar.me .pk-bar-f{ background:linear-gradient(90deg,#e3b417,#F5C518 60%,#ffe27a); box-shadow:0 0 12px rgba(245,197,24,.55); } .pk-poll.voted .pk-consensus{ margin-top:13px; padding:10px 10px; text-align:center; border-radius:9px; font-size:12.5px; color:#d6d8dd; background:rgba(245,197,24,.06); border:1px solid rgba(245,197,24,.16); } .pk-poll.voted .pk-consensus b{color:var(--gold)} /* ---------- RESPONSIVE (the 4 rule) ---------- */ /* phone first (above): score clamps to 17vw so it scales DOWN on narrow */ /* screens and never overflows the scoreboard panel. tablet+ caps it. */ @media(min-width:768px){ .wc-cta-card.wc-result{padding:20px 20px 18px} .card.mcard .teams .team{font-size:20px} .wc-cta-card.wc-result .wc-res-score{font-size:74px; padding:16px 22px 14px} } @media(min-width:1024px){ .wc-cta-card.wc-result .wc-res-score{font-size:82px} } @media(min-width:1440px){ .wc-cta-card.wc-result .wc-res-score{font-size:90px} } /* very small phones — keep score legible, no overflow */ @media(max-width:360px){ .wc-cta-card.wc-result .wc-res-score{font-size:clamp(50px,16vw,64px); letter-spacing:0; padding:12px 12px 10px} .wc-cta-card.wc-result .wc-res-called{font-size:11px; padding:8px 13px} .card.mcard .teams .team{font-size:17px} } /* ---------- MOTION (reduced-motion users get full static design) ---------- */ @media (prefers-reduced-motion: no-preference){ /* result card entrance — staggered fade + rise (wired in inline script) */ .card.mcard.pk-rc-reveal{opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1)} .card.mcard.pk-rc-reveal.in{opacity:1; transform:none} /* CALLED-IT badge: gold sheen sweep on entrance, one shine pass */ .wc-cta-card.wc-result.won .wc-res-called::after{ content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.7),transparent); transform:skewX(-18deg); } .card.mcard.in .wc-cta-card.wc-result.won .wc-res-called::after{ animation:rcShine 1.1s ease .35s 1 both; } /* won score + top edge are now STATIC gold (no infinite shimmer/breathe) */ /* CTA shine sweep on hover */ .wc-cta-card.wc-result .wc-cta-btn::after{ content:""; position:absolute; top:0; bottom:0; left:-70%; width:45%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg); pointer-events:none; } .wc-cta-card.wc-result .wc-cta-btn:hover::after{animation:rcShine .8s ease 1 both} /* fan-vote bars fill from 0 → width when card scrolls in */ .pk-poll.voted .pk-bar-f{width:0 !important; transition:width 1.1s cubic-bezier(.16,1,.3,1)} .card.mcard.in .pk-poll.voted .pk-bar-f{width:var(--pkw,0%) !important} @keyframes rcShine{0%{left:-70%}100%{left:140%}} } /* ================================================================= */ /* WOW · GAME OF THE DAY — cinematic broadcast bumper. */ /* Targets the SHARED JS-rendered .gotd block (verified via runtime */ /* execution of pk_site.js): .gotd / .gotd-tag / .gotd-match / */ /* .gotd-team(>img,>span) / .gotd-v / .gotd-cta / .pk-poll(>opts). */ /* Inline overrides the linked stylesheet (added specificity where */ /* needed). Pure presentation — never touches render data. */ /* ================================================================= */ .gotd{ position:relative; isolation:isolate; overflow:hidden; border:1px solid rgba(245,197,24,.40); border-radius:18px; padding:clamp(22px,4.4vw,40px) clamp(18px,4vw,44px) clamp(20px,3.6vw,34px); /* trophy + god-ray base, painted over the existing banner image */ background-image: radial-gradient(140% 120% at 50% -28%, rgba(245,197,24,.20), transparent 58%), radial-gradient(120% 150% at 50% 130%, rgba(31,191,90,.07), transparent 60%), linear-gradient(rgba(7,7,9,.66),rgba(6,6,8,.90)), url('/banner_bg_clean.png?v=1'); background-size:auto,auto,auto,cover; background-position:center,center,center,center; box-shadow:0 28px 70px -34px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(245,197,24,.06); } .gotd>*{position:relative; z-index:3} /* tame the stock top glow — our animated rays do the work now */ .gotd::before{height:160px; opacity:.5; background:radial-gradient(ellipse at 50% 0,rgba(245,197,24,.22),transparent 72%)} /* ---- animated cinematic backdrop: god-rays + trophy glow + sparkle ---- */ .gotd .pkg-fx{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden} /* sweeping god-rays — conic fan of soft gold beams from top-centre */ .gotd .pkg-rays{position:absolute; left:50%; top:-46%; width:150%; aspect-ratio:1; transform:translateX(-50%); background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(245,197,24,.13) 0deg 5deg, transparent 5deg 18deg); -webkit-mask-image:radial-gradient(closest-side at 50% 50%, transparent 8%, #000 30%, transparent 72%); mask-image:radial-gradient(closest-side at 50% 50%, transparent 8%, #000 30%, transparent 72%); opacity:.5} /* second ray layer removed for performance (kept one slow god-ray) */ .gotd .pkg-rays.two{display:none} /* soft trophy halo that breathes behind the matchup */ .gotd .pkg-trophy{position:absolute; left:50%; top:42%; width:min(70%,520px); aspect-ratio:1.3/1; transform:translate(-50%,-50%); background:radial-gradient(ellipse at 50% 50%, rgba(245,197,24,.16), rgba(245,197,24,.05) 42%, transparent 66%)} /* drifting bokeh sparkle particles (count cut to <=6, slower — see JS) */ .gotd .pkg-spark{position:absolute; border-radius:50%; background:radial-gradient(circle, #fff7da, rgba(245,197,24,.6) 42%, transparent 70%); box-shadow:0 0 8px rgba(245,197,24,.6); opacity:0} /* ---- the gold eyebrow ⭐ GAME OF THE DAY ---- */ .gotd .gotd-tag{ display:inline-flex; align-items:center; gap:8px; font-family:'Sofia Sans',sans-serif; font-weight:900; font-size:clamp(11px,1.4vw,13px); letter-spacing:.26em; text-transform:uppercase; color:#ffe9a8; margin:0 auto 18px; padding:7px 16px; border-radius:999px; background:linear-gradient(180deg,rgba(245,197,24,.14),rgba(245,197,24,.06)); border:1px solid rgba(245,197,24,.42); box-shadow:0 0 0 1px rgba(245,197,24,.06), 0 6px 22px -10px rgba(245,197,24,.6), inset 0 1px 0 rgba(255,255,255,.12); text-shadow:0 0 14px rgba(245,197,24,.5); } .gotd .gotd-tag::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px 1px rgba(245,197,24,.9)} /* ---- the matchup ---- */ .gotd .gotd-match{gap:clamp(14px,4vw,40px); align-items:stretch} .gotd .gotd-team{gap:12px; justify-content:flex-start; font-size:clamp(15px,2.1vw,21px); font-weight:800} /* crest in a glowing gold ring */ .gotd .gotd-team img{ width:clamp(48px,7.4vw,78px); height:clamp(48px,7.4vw,78px); padding:9px; border-radius:50%; background:radial-gradient(circle at 50% 36%, #15161b, #0b0b0e); border:1.5px solid rgba(245,197,24,.40); box-shadow:0 0 0 4px rgba(245,197,24,.07), 0 0 26px -4px rgba(245,197,24,.45), inset 0 1px 0 rgba(255,255,255,.08); transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; } .gotd .gotd-team:hover img{transform:translateY(-3px) scale(1.04); box-shadow:0 0 0 4px rgba(245,197,24,.12), 0 0 36px -2px rgba(245,197,24,.7)} .gotd .gotd-team span{line-height:1.15} /* FIFA rank pill */ .gotd .gotd-team .wcrank{margin-top:6px; box-shadow:0 0 0 1px rgba(245,197,24,.06), 0 3px 10px -5px rgba(245,197,24,.5)} /* centre VS / date column */ .gotd .gotd-v{align-self:center; gap:5px; font-weight:800; color:#cfd0d6; font-size:clamp(12px,1.5vw,15px); text-align:center} .gotd .gotd-v::after{content:"VS"; order:-1; font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(26px,4.6vw,46px); line-height:.8; letter-spacing:1px; margin-bottom:6px; background:linear-gradient(180deg,#fff6d2,#F5C518 60%,#d9b324); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; filter:drop-shadow(0 0 16px rgba(245,197,24,.5))} .gotd .gotd-v small{font-size:clamp(10px,1.2vw,12px); opacity:.85} /* ---- the gold CTA — shine sweep + lift ---- */ .gotd .gotd-cta{ position:relative; overflow:hidden; margin-top:clamp(16px,2.6vw,24px); min-height:50px; padding:15px 20px; border-radius:13px; font-weight:900; font-size:clamp(13px,1.6vw,15.5px); letter-spacing:.02em; color:#161106; border:1px solid rgba(255,255,255,.45); background:linear-gradient(180deg,#ffe27a 0%,#F5C518 52%,#e3b417 100%); box-shadow:0 8px 24px -10px rgba(245,197,24,.75), inset 0 1px 0 rgba(255,255,255,.55); transition:transform .18s ease, box-shadow .22s ease, filter .18s ease; } .gotd .gotd-cta:not(.gotd-cta-locked):hover{ transform:translateY(-2px); filter:brightness(1.04); background:linear-gradient(180deg,#ffe890 0%,#F5C518 52%,#e3b417 100%); box-shadow:0 14px 30px -10px rgba(245,197,24,.9), inset 0 1px 0 rgba(255,255,255,.6); } .gotd .gotd-cta:not(.gotd-cta-locked):active{transform:translateY(0) scale(.99)} .gotd .gotd-cta b{color:#fff} /* locked-state CTA stays calm/frosted, no gold */ .gotd .gotd-cta.gotd-cta-locked{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.12); color:#aeb0b8; box-shadow:none; text-shadow:none; } /* ---- FAN VOTE · WHO WINS — glassy panels ---- */ .gotd .pk-poll{ margin-top:clamp(14px,2.4vw,20px); padding:clamp(13px,2vw,18px) clamp(12px,1.8vw,16px); border-radius:14px; background:rgba(20,20,24,.66); border:1px solid rgba(255,255,255,.10); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } .gotd .pk-poll-hdr{ display:flex; align-items:center; justify-content:center; gap:8px; font-weight:900; font-size:clamp(10px,1.3vw,11.5px); letter-spacing:.22em; color:#ffe9a8; text-transform:uppercase; margin-bottom:13px; text-shadow:0 0 12px rgba(245,197,24,.4); } .gotd .pk-poll-opts{gap:clamp(8px,1.4vw,12px)} /* each vote panel = glass tile with hover-glow */ .gotd .pk-opt{ position:relative; overflow:hidden; min-height:60px; padding:12px 8px; border-radius:12px; background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02)); border:1.5px solid rgba(255,255,255,.10); color:#e7e8ed; transition:transform .18s ease, border-color .18s ease, box-shadow .2s ease, background .2s ease; } .gotd .pk-opt img{width:clamp(28px,3.6vw,36px); height:clamp(28px,3.6vw,36px); border-radius:4px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))} .gotd .pk-opt:hover{ transform:translateY(-2px); border-color:rgba(245,197,24,.7); color:#ffe9a8; background:linear-gradient(180deg,rgba(245,197,24,.16),rgba(245,197,24,.05)); box-shadow:0 10px 26px -14px rgba(245,197,24,.8), 0 0 0 1px rgba(245,197,24,.15); } .gotd .pk-opt:active{transform:translateY(0) scale(.98)} .gotd .pk-opt-mid{min-height:0; align-self:center; background:transparent; border:none; color:#9a9ba2; box-shadow:none} .gotd .pk-opt-mid:hover{background:rgba(245,197,24,.08); border:none; transform:none; box-shadow:none} /* the leaning side after a vote = filled gold with soft pulse (handled in voted block below) */ .gotd .pk-poll.voted{padding:clamp(14px,2.2vw,18px) clamp(13px,1.8vw,16px)} .gotd .pk-poll.voted .pk-voted-hdr{color:#cfd0d6} .gotd .pk-poll.voted .pk-bar.me .pk-bar-f{ background:linear-gradient(90deg,#e3b417,#F5C518 60%,#ffe27a); box-shadow:0 0 14px rgba(245,197,24,.6); } .gotd .pk-poll.voted .pk-bar.me .pk-bar-l{color:var(--gold)} .gotd .pk-poll.voted .pk-consensus{ background:rgba(245,197,24,.08); border:1px solid rgba(245,197,24,.20); } .gotd .pk-poll.voted .pk-consensus b{color:var(--gold)} /* ================================================================= */ /* WOW · MATCH-CARD FAN VOTE — premium glass vote tiles (un-voted). */ /* The smaller poll at the bottom of each .card.mcard. Base classes */ /* verified by runtime exec of deployed pk_site.js: */ /* .pk-poll > .pk-poll-hdr + .pk-poll-opts */ /* > button.pk-opt[data-c=home] (img.pk-poll-flag + span) */ /* > button.pk-opt.pk-opt-mid[data-c=draw] (Draw) */ /* > button.pk-opt[data-c=away] (img.pk-poll-flag + span) */ /* Scoped to NON-gotd, NON-voted polls so it never touches the */ /* already-styled GotD panel or the voted %-bars. Inline overrides */ /* the linked pk_site.css. Static + hover/tap only — NO new looping */ /* animations (all effects are interaction-gated = zero idle cost). */ /* ================================================================= */ /* the panel = one cohesive glassy unit */ .card.mcard .pk-poll:not(.voted){ margin-top:14px; padding:14px 13px 15px; border-radius:14px; background: radial-gradient(120% 80% at 50% -20%, rgba(245,197,24,.05), transparent 60%), linear-gradient(180deg,rgba(20,20,25,.62),rgba(12,12,16,.5)); border:1px solid rgba(255,255,255,.09); box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 10px 28px -22px rgba(0,0,0,.8); } /* header → refined glowing gold eyebrow */ .card.mcard .pk-poll:not(.voted) .pk-poll-hdr{ display:flex; align-items:center; justify-content:center; gap:7px; font-family:'Sofia Sans',sans-serif; font-weight:900; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:#ffe9a8; margin-bottom:12px; text-shadow:0 0 12px rgba(245,197,24,.32); } .card.mcard .pk-poll:not(.voted) .pk-poll-opts{ display:grid; grid-template-columns:1fr auto 1fr; gap:9px; align-items:stretch; } /* team vote tiles = premium glassy tiles, clearly clickable */ .card.mcard .pk-poll:not(.voted) .pk-opt{ position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-height:62px; padding:11px 7px; border-radius:12px; background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border:1.5px solid rgba(255,255,255,.10); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); color:#e7e8ed; cursor:pointer; font-family:'Sofia Sans',sans-serif; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.3px; transition:transform .18s ease, border-color .18s ease, box-shadow .2s ease, background .2s ease, color .18s ease; } .card.mcard .pk-poll:not(.voted) .pk-opt span{ max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* flag sits in a soft glow ring */ .card.mcard .pk-poll:not(.voted) .pk-opt .pk-poll-flag{ width:34px; height:34px; object-fit:contain; border-radius:5px; padding:2px; background:rgba(255,255,255,.04); box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 3px 8px -3px rgba(0,0,0,.6); transition:filter .18s ease, box-shadow .2s ease, transform .18s ease; } /* "Draw" middle chip = refined neutral divider */ .card.mcard .pk-poll:not(.voted) .pk-opt-mid{ align-self:center; min-height:0; flex-direction:row; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.09); box-shadow:none; color:#9a9ba2; font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; transition:transform .16s ease, border-color .18s ease, background .2s ease, color .18s ease; } /* press-feedback for ALL inputs (touch + desktop) — interaction only */ .card.mcard .pk-poll:not(.voted) .pk-opt:active{ transform:scale(.97); border-color:rgba(245,197,24,.6); } .card.mcard .pk-poll:not(.voted) .pk-opt-mid:active{ transform:scale(.94); border-color:rgba(245,197,24,.45); color:#ffe9a8; } /* DESKTOP hover "charge-up" — gated so touch devices never get it */ @media (hover:hover) and (pointer:fine){ .card.mcard .pk-poll:not(.voted) .pk-opt:hover{ transform:translateY(-3px) scale(1.015); border-color:rgba(245,197,24,.72); color:#ffe9a8; background:linear-gradient(180deg,rgba(245,197,24,.16),rgba(245,197,24,.04)); box-shadow:0 12px 28px -14px rgba(245,197,24,.8), 0 0 0 1px rgba(245,197,24,.18), inset 0 1px 0 rgba(255,255,255,.1); } .card.mcard .pk-poll:not(.voted) .pk-opt:hover .pk-poll-flag{ filter:brightness(1.12) saturate(1.08); transform:scale(1.06); box-shadow:0 0 0 1px rgba(245,197,24,.4), 0 0 14px -2px rgba(245,197,24,.55); } .card.mcard .pk-poll:not(.voted) .pk-opt-mid:hover{ background:rgba(245,197,24,.1); border-color:rgba(245,197,24,.35); color:#ffe9a8; transform:translateY(-1px); } } /* reduced-motion → keep the premium static look, drop transitions */ @media (prefers-reduced-motion: reduce){ .card.mcard .pk-poll:not(.voted) .pk-opt, .card.mcard .pk-poll:not(.voted) .pk-opt .pk-poll-flag, .card.mcard .pk-poll:not(.voted) .pk-opt-mid{transition:none} } /* match-card poll · responsive (the 4 rule) */ /* phones: keep 3 tiles in one row, no horizontal scroll; Draw shrinks */ @media(max-width:430px){ .card.mcard .pk-poll:not(.voted) .pk-poll-opts{gap:6px} .card.mcard .pk-poll:not(.voted) .pk-opt{min-height:58px; padding:10px 4px; font-size:11px} .card.mcard .pk-poll:not(.voted) .pk-opt .pk-poll-flag{width:30px; height:30px} .card.mcard .pk-poll:not(.voted) .pk-opt-mid{padding:6px 7px; font-size:9.5px; letter-spacing:.08em} } /* ---------- GAME OF THE DAY · responsive (the 4 rule) ---------- */ /* phone ~375: teams STACK, trophy/rays scale, no horizontal scroll */ @media(max-width:560px){ .gotd .gotd-match{flex-direction:column; gap:6px} .gotd .gotd-team{flex-direction:row; justify-content:center; gap:12px; font-size:17px; width:100%} .gotd .gotd-team span{text-align:left} .gotd .gotd-v{flex-direction:row; gap:8px; margin:4px 0} .gotd .gotd-v::after{order:0; font-size:30px; margin:0 2px 0 0} .gotd .pk-poll-opts{grid-template-columns:1fr 1fr; } .gotd .pk-opt-mid{grid-column:1 / -1; order:3} } @media(min-width:1024px){ .gotd{padding:38px 46px 32px} } @media(min-width:1440px){ .gotd .gotd-match{gap:48px} } /* ================================================================= */ /* WOW · VERDICT MODAL — cinematic match modal. */ /* Scoped under .mm-modal.wcm-mode so it never touches the stats */ /* (.mm-modal without .wcm-mode) modal. Real classes verified by */ /* runtime exec of pk_site.js: .wcm / .wcm-hero / .wcm-flag(.h/.a) / */ /* .wcm-vs / .wcm-ctx(+side/team/st/form/fm) / .wcm-pick(.vip) / */ /* .wcm-bar>i[--w] / .wcm-prob / .wcm-odd / .wcm-blur / .wcm-lockface*/ /* /.wcm-jack / .wcm-cta / .wcm-ribbon. Inline overrides linked CSS. */ /* ================================================================= */ /* SCRIM — deeper, blurred backdrop when a WC modal is open (body flag set by inline script) */ body.pkm-open .mm-overlay#matchModal{ background:rgba(4,4,6,.62); -webkit-backdrop-filter:blur(7px) saturate(115%); backdrop-filter:blur(7px) saturate(115%); } /* modal shell — premium frame + soft gold rim */ .mm-modal.wcm-mode{ background:#0a0a0d; border:1px solid rgba(245,197,24,.16); border-radius:20px; box-shadow:0 40px 110px -30px rgba(0,0,0,.92), 0 0 0 1px rgba(245,197,24,.05), 0 0 80px -40px rgba(245,197,24,.3); } /* close button — bigger touch target, clear contrast */ .mm-modal.wcm-mode .mm-x{ position:absolute; top:12px; right:12px; z-index:30; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-size:17px; line-height:1; color:#e7e8ed; background:rgba(10,10,13,.86); border:1px solid rgba(255,255,255,.16); transition:transform .16s ease, background .16s ease, border-color .16s; } .mm-modal.wcm-mode .mm-x:hover{background:rgba(245,197,24,.16); border-color:rgba(245,197,24,.5); color:#ffe9a8; transform:rotate(90deg)} /* ---- HERO — richer floodlit stage + glowing crests ---- */ .mm-modal.wcm-mode .wcm-hero{ padding:clamp(26px,5vw,34px) clamp(18px,4vw,24px) clamp(22px,4vw,26px); background: radial-gradient(120% 90% at 50% -20%, rgba(245,197,24,.10), transparent 56%), linear-gradient(180deg,#0c100c 0%,#0a0a0d 100%); } .mm-modal.wcm-mode .wcm-hero::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.05), transparent 55%); z-index:0} .mm-modal.wcm-mode .wcm-heroin{z-index:2} .mm-modal.wcm-mode .wcm-tag{ display:inline-flex; align-items:center; gap:6px; font-weight:900; letter-spacing:.16em; color:#ffe9a8; padding:5px 12px; border-radius:999px; margin-bottom:14px; background:rgba(245,197,24,.10); border:1px solid rgba(245,197,24,.28); text-shadow:0 0 10px rgba(245,197,24,.4); } .mm-modal.wcm-mode .wcm-match{align-items:center; gap:clamp(12px,4vw,22px)} /* big team circles with glowing ring + crest pop */ .mm-modal.wcm-mode .wcm-flag{ width:clamp(64px,16vw,84px); height:clamp(64px,16vw,84px); background:radial-gradient(circle at 50% 34%, #16171c, #08080b); transition:transform .3s cubic-bezier(.2,.8,.2,1); } .mm-modal.wcm-mode .wcm-flag.h{border-color:rgba(31,170,90,.6); box-shadow:0 0 0 4px rgba(31,150,80,.10), 0 0 30px -2px rgba(31,170,90,.6)} .mm-modal.wcm-mode .wcm-flag.a{border-color:rgba(245,197,24,.6); box-shadow:0 0 0 4px rgba(245,197,24,.10), 0 0 30px -2px rgba(245,197,24,.6)} .mm-modal.wcm-mode .wcm-flag img{width:clamp(40px,10vw,52px); height:clamp(40px,10vw,52px)} .mm-modal.wcm-mode .wcm-side span{font-weight:800; font-size:clamp(13px,2vw,15px)} .mm-modal.wcm-mode .wcm-vs{ font-family:'Bebas Neue',sans-serif; font-weight:400; letter-spacing:1px; font-size:clamp(26px,5.4vw,34px); background:linear-gradient(180deg,#fff6d2,#F5C518 58%,#d9b324); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; filter:drop-shadow(0 0 16px rgba(245,197,24,.55)); text-shadow:none; } .mm-modal.wcm-mode .wcm-vs small{font-size:10px; color:#9a9ba2; -webkit-text-fill-color:#9a9ba2; filter:none} .mm-modal.wcm-mode .wcm-vs.score{font-family:'Bebas Neue',sans-serif; font-size:clamp(34px,7vw,44px)} /* ---- BODY ---- */ .mm-modal.wcm-mode .wcm-body{padding:clamp(18px,3.4vw,24px)} /* FORM & GROUP STANDING — refined glass panel */ .mm-modal.wcm-mode .wcm-ctx{ background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.10); border-radius:13px; padding:14px 15px; } .mm-modal.wcm-mode .wcm-ctx-h{color:#ffe9a8; letter-spacing:.14em} .mm-modal.wcm-mode .wcm-ctx-row{gap:14px} .mm-modal.wcm-mode .wcm-ctx-side{padding:11px 12px; border-radius:10px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06)} .mm-modal.wcm-mode .wcm-ctx-team{font-weight:800} /* W/D/L form chips (.wcm-fm W/D/L) get readable colour coding */ .mm-modal.wcm-mode .wcm-fm{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:6px; font-size:10px; font-weight:900; text-transform:uppercase; color:#0c0c0e} .mm-modal.wcm-mode .wcm-fm.W{background:linear-gradient(180deg,#37d27a,#1fbf5a)} .mm-modal.wcm-mode .wcm-fm.D{background:linear-gradient(180deg,#f7cb4e,#f0b42a); color:#3a2900} .mm-modal.wcm-mode .wcm-fm.L{background:linear-gradient(180deg,#f0656a,#e5484d); color:#fff} .mm-modal.wcm-mode .wcm-fm-none{font-size:11px; color:#7c7e86} /* VERDICT title */ .mm-modal.wcm-mode .wcm-title{ font-family:'Bebas Neue',sans-serif; font-weight:400; letter-spacing:1px; font-size:clamp(20px,3.4vw,26px); color:#f4f4f6; margin:18px 0 14px; display:flex; align-items:center; gap:9px; } .mm-modal.wcm-mode .wcm-title::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,rgba(245,197,24,.4),transparent)} /* ---- PICK CARDS — premium glassy, staggered reveal ---- */ .mm-modal.wcm-mode .wcm-pick{ background:rgba(22,22,27,.72); border:1px solid rgba(255,255,255,.10); border-radius:15px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 28px -22px rgba(0,0,0,.9); transition:transform .2s ease, box-shadow .22s ease, border-color .2s; } .mm-modal.wcm-mode .wcm-pick::before{width:3px; background:linear-gradient(180deg,#1fbf5a,#F5C518)} .mm-modal.wcm-mode .wcm-pick:hover{transform:translateY(-3px); border-color:rgba(245,197,24,.34); box-shadow:0 16px 36px -22px rgba(245,197,24,.5), inset 0 1px 0 rgba(255,255,255,.06)} .mm-modal.wcm-mode .wcm-mk{font-weight:800; font-size:14px} /* PROB pill green-glow */ .mm-modal.wcm-mode .wcm-prob{ background:rgba(31,191,90,.16); box-shadow:0 0 0 1px rgba(31,191,90,.22), 0 0 16px -6px rgba(31,191,90,.6); } /* ODDS pill gold */ .mm-modal.wcm-mode .wcm-odd{ background:rgba(245,197,24,.14); box-shadow:0 0 0 1px rgba(245,197,24,.2), 0 0 16px -6px rgba(245,197,24,.5); } /* the confidence bar track + fill */ .mm-modal.wcm-mode .wcm-bar{height:9px; background:rgba(255,255,255,.07); box-shadow:inset 0 1px 2px rgba(0,0,0,.45)} .mm-modal.wcm-mode .wcm-bar i{ background:linear-gradient(90deg,#1fbf5a 0%,#9bd24e 48%,#F5C518 100%); box-shadow:0 0 12px -1px rgba(245,197,24,.55); } .mm-modal.wcm-mode .wcm-desk{color:#bdbfc6; font-size:12.5px; line-height:1.5; margin-top:10px} /* ---- VIP LOCKED cards — premium frosted, desirable ---- */ .mm-modal.wcm-mode .wcm-pick.vip{ border-color:rgba(245,197,24,.30); background:linear-gradient(180deg,rgba(245,197,24,.07),rgba(255,255,255,.02)); } .mm-modal.wcm-mode .wcm-pick.vip:hover{border-color:rgba(245,197,24,.55); box-shadow:0 18px 40px -22px rgba(245,197,24,.6), 0 0 0 1px rgba(245,197,24,.12)} .mm-modal.wcm-mode .wcm-ribbon{ font-family:'Sofia Sans',sans-serif; font-weight:900; letter-spacing:.1em; } .mm-modal.wcm-mode .wcm-blur{filter:blur(7px); opacity:.5} .mm-modal.wcm-mode .wcm-lockface{ background:radial-gradient(ellipse at 50% 40%, rgba(245,197,24,.10), transparent 70%); } .mm-modal.wcm-mode .wcm-lockface .lk{ width:42px; height:42px; font-size:17px; background:linear-gradient(180deg,rgba(245,197,24,.22),rgba(245,197,24,.10)); border:1px solid rgba(245,197,24,.4); box-shadow:0 0 0 4px rgba(245,197,24,.06), 0 6px 18px -6px rgba(245,197,24,.6); color:#ffe27a; } .mm-modal.wcm-mode .wcm-lockface small{color:#ffe9a8; letter-spacing:.08em} /* CORRECT SCORE jackpot — keep its gold drama, refine frame */ .mm-modal.wcm-mode .wcm-jack{border-radius:16px; box-shadow:0 14px 40px -24px rgba(245,197,24,.5)} /* VERDICT footer CTA */ .mm-modal.wcm-mode .wcm-cta{ width:100%; min-height:48px; padding:13px 16px; border-radius:12px; margin-top:6px; font-weight:900; color:#161106; border:1px solid rgba(255,255,255,.45); background:linear-gradient(180deg,#ffe27a 0%,#F5C518 52%,#e3b417 100%); box-shadow:0 8px 22px -10px rgba(245,197,24,.75), inset 0 1px 0 rgba(255,255,255,.5); transition:transform .18s ease, box-shadow .22s ease, filter .18s ease; cursor:pointer; } .mm-modal.wcm-mode .wcm-cta:hover{transform:translateY(-2px); filter:brightness(1.04); box-shadow:0 14px 30px -10px rgba(245,197,24,.9), inset 0 1px 0 rgba(255,255,255,.6)} .mm-modal.wcm-mode .wcm-cta-info{ text-align:center; font-size:12.5px; color:#cfd0d6; padding:11px 12px; border-radius:10px; background:rgba(245,197,24,.06); border:1px solid rgba(245,197,24,.18); } /* ---------- VERDICT MODAL · responsive (the 4 rule) ---------- */ /* phone ~375: near-full-screen sheet, scrollable, reachable close */ @media(max-width:560px){ .mm-overlay#matchModal{padding:0; align-items:flex-end} .mm-modal.wcm-mode{ width:100%; max-width:100%; max-height:96vh; border-radius:20px 20px 0 0; border-left:none; border-right:none; } .mm-modal.wcm-mode .wcm-match{gap:8px} .mm-modal.wcm-mode .wcm-ctx-row{gap:9px} .mm-modal.wcm-mode .wcm-mk{font-size:13px} } @media(min-width:1024px){ .mm-modal.wcm-mode{width:540px} } @media(min-width:1440px){ .mm-modal.wcm-mode{width:560px} } /* ================================================================= */ /* WOW · MOTION for GAME OF THE DAY + VERDICT MODAL. */ /* All motion = transform / opacity / background-position only. */ /* Reduced-motion users get the full static premium design + bars */ /* at final width. Nothing here changes layout or data. */ /* ================================================================= */ @media (prefers-reduced-motion: no-preference){ /* ---- GAME OF THE DAY backdrop (signature ambient set: 1 ray, trophy, sparkle) ---- */ .gotd .pkg-rays{animation:pkgRay 64s linear infinite} .gotd .pkg-trophy{animation:pkgGlow 5.5s ease-in-out infinite} .gotd .pkg-spark{animation:pkgSpark var(--d,12s) ease-in-out var(--t,0s) infinite} /* eyebrow dot is now a STATIC gold glow (no infinite pulse) */ /* CTA shine sweep (entrance once + on hover) */ .gotd .gotd-cta:not(.gotd-cta-locked)::after{ content:""; position:absolute; top:0; bottom:0; left:-70%; width:42%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.6),transparent); transform:skewX(-18deg); pointer-events:none; } .gotd .gotd-cta:not(.gotd-cta-locked):hover::after{animation:pkgShine .85s ease 1 both} /* leaning vote bar = static gold glow (no infinite pulse) */ /* ---- GAME OF THE DAY entrance (armed by inline script: .gotd.pkg-in) ---- */ .gotd{opacity:0; transform:translateY(20px) scale(.99); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1)} .gotd.pkg-in{opacity:1; transform:none} /* ---- VERDICT MODAL cinematic open ---- */ /* the shell scales+fades up from centre; scrim fades via body flag */ .mm-modal.wcm-mode{ opacity:0; transform:translateY(14px) scale(.965); transition:opacity .42s cubic-bezier(.16,1,.3,1), transform .42s cubic-bezier(.16,1,.3,1); } body.pkm-in .mm-modal.wcm-mode{opacity:1; transform:none} body.pkm-open .mm-overlay#matchModal{transition:background .35s ease, backdrop-filter .35s ease} /* crest pop on open */ body.pkm-in .mm-modal.wcm-mode .wcm-flag{animation:pkmPop .6s cubic-bezier(.2,1.4,.3,1) .12s both} /* the confidence bars: shared CSS already fills 0→--w via wcmFill; reinforce a smooth easing + slight glow breathe */ .mm-modal.wcm-mode .wcm-bar i{animation:wcmFill 1s cubic-bezier(.16,1,.3,1) .35s forwards} @keyframes pkgRay{to{transform:translateX(-50%) rotate(360deg)}} @keyframes pkgGlow{0%,100%{opacity:.7; transform:translate(-50%,-50%) scale(1)} 50%{opacity:1; transform:translate(-50%,-50%) scale(1.08)}} @keyframes pkgSpark{0%{opacity:0; transform:translate(0,0) scale(.6)} 14%{opacity:.85} 50%{opacity:.5; transform:translate(var(--mx,14px),var(--my,-22px)) scale(1)} 86%{opacity:.7} 100%{opacity:0; transform:translate(calc(var(--mx,14px)*1.8),calc(var(--my,-22px)*1.8)) scale(.7)}} @keyframes pkgShine{0%{left:-70%}100%{left:150%}} @keyframes pkmPop{0%{transform:scale(.6); opacity:0}60%{opacity:1}100%{transform:scale(1)}} } /* reduced-motion: bars sit at final width with no animation (explicit) */ @media (prefers-reduced-motion: reduce){ .mm-modal.wcm-mode .wcm-bar i{width:var(--w); animation:none} .gotd .pkg-fx{display:none} } /* ================================================================= */ /* WOW · NEXT-LEVEL INTERACTION LAYER (v2). */ /* Premium motion seen on Linear / Vercel / Stripe / Apple, in the */ /* black + gold WC theme. 3D tilt + cursor spotlight, animated */ /* conic glow borders, charged crests/flags, magnetic CTAs, hero */ /* aurora + parallax, and a signature spark/scan micro-moment. */ /* */ /* SAFETY MODEL */ /* · pointer effects (tilt/spotlight/magnetic/parallax) live ONLY */ /* inside @media (hover:hover) and (pointer:fine) → desktop only. */ /* · ALL ambient motion wraps prefers-reduced-motion:no-preference. */ /* · touch devices get clean tap-press scale (defined unconditional)*/ /* · animate transform/opacity/background-position/filter only. */ /* ================================================================= */ /* ---- CSS vars the JS pointer-handlers write into (safe defaults) -- */ .card.mcard, .gotd, .wc-cta-card.wc-result{ --pk-rx:0deg; --pk-ry:0deg; /* 3D tilt angles */ --pk-mx:50%; --pk-my:50%; /* cursor spotlight position */ --pk-sp:0; /* spotlight opacity 0..1 */ } /* ===== TOUCH / DEFAULT: clean tap-press feedback (no pointer fx) === */ /* Applies everywhere; desktop @media below layers tilt + spotlight. */ .pk-tap{transition:transform .16s cubic-bezier(.2,.8,.2,1)} .pk-tap.pk-press{transform:scale(.978)} /* ================================================================= */ /* 1 · 3D TILT + CURSOR SPOTLIGHT (desktop pointer only) */ /* ================================================================= */ @media (hover:hover) and (pointer:fine){ @media (prefers-reduced-motion: no-preference){ /* the tilt host — perspective applied via transform on the card */ .card.mcard.pk-tilt, .gotd.pk-tilt{ transform:perspective(900px) rotateX(var(--pk-rx)) rotateY(var(--pk-ry)); transition:transform .12s ease-out, box-shadow .28s cubic-bezier(.16,1,.3,1), border-color .28s; transform-style:preserve-3d; } /* will-change promoted ONLY while actively tracking the cursor (not idle) */ .card.mcard.pk-tilt.pk-tracking, .gotd.pk-tilt.pk-tracking{ transition:box-shadow .28s, border-color .28s; will-change:transform;} /* the soft radial gold spotlight that follows the cursor. */ /* painted by a dedicated overlay layer so it never tints content */ .card.mcard.pk-tilt > .pk-spot, .gotd.pk-tilt > .pk-spot, .wc-cta-card.wc-result.pk-tilt > .pk-spot{ content:""; position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:inherit; opacity:var(--pk-sp); transition:opacity .3s ease; background:radial-gradient(220px 220px at var(--pk-mx) var(--pk-my), rgba(245,197,24,.13), rgba(245,197,24,.04) 38%, transparent 62%); } /* result card spotlight sits inside the result body (own host) */ .wc-cta-card.wc-result.pk-tilt{ transform:perspective(900px) rotateX(var(--pk-rx)) rotateY(var(--pk-ry)); transition:transform .12s ease-out, box-shadow .28s, border-color .28s; transform-style:preserve-3d; } .wc-cta-card.wc-result.pk-tilt.pk-tracking{will-change:transform;} /* lift the inner content a hair on tilt for parallax depth */ .card.mcard.pk-tracking .body, .gotd.pk-tracking .gotd-match{transform:translateZ(22px)} .card.mcard .body, .gotd .gotd-match{transition:transform .2s ease-out} } } /* ================================================================= */ /* 2 · ANIMATED CONIC-GRADIENT GLOW BORDER (featured elements) */ /* GotD banner + a "called it" won result card. */ /* Masked ::after ring → only the 1px border lights up. GPU-cheap */ /* (single rotation of a CSS var via @property where supported). */ /* ================================================================= */ @property --pk-ang{ syntax:''; inherits:false; initial-value:0deg; } /* Rotating conic glow border lives ONLY on the GotD banner now (1 conic border total). Result cards get a STATIC gold ring instead (see .wc-cta-card.wc-result.won below). */ .gotd.pk-conic{ position:relative; } .gotd.pk-conic::after{ content:""; position:absolute; inset:0; z-index:6; pointer-events:none; border-radius:inherit; padding:1.4px; background:conic-gradient(from var(--pk-ang,0deg), transparent 0deg, rgba(31,191,90,.0) 36deg, #1fbf5a 64deg, #F5C518 96deg, #ffe27a 116deg, #F5C518 140deg, rgba(245,197,24,0) 188deg, transparent 360deg); /* mask to a ring: show only the padding band (the border) */ -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.0; transition:opacity .6s ease; } .gotd.pk-conic.pk-glow::after{ opacity:.85; } /* static premium gold ring on the WON result card (replaces the rotating conic) */ .wc-cta-card.wc-result.won{ box-shadow:inset 0 1px 0 rgba(245,197,24,.14), 0 14px 40px -24px rgba(245,197,24,.45), 0 0 0 1px rgba(245,197,24,.30); } /* ================================================================= */ /* 3 · CHARGED CRESTS / FLAGS + FIFA-RANK PILL SHIMMER */ /* Matchup flags (mcard .teams .team img, GotD .gotd-team img): */ /* glowing pulsing ring + one-time diagonal SHINE on scroll-in. */ /* .wcrank pill: metallic gold shimmer sweep. */ /* ================================================================= */ /* give the flag a positioning context for the shine overlay */ #wcFix .card.mcard .teams .team{position:relative} #wcFix .card.mcard .teams .team img{ position:relative; border-radius:50%; box-shadow:0 0 0 1px rgba(245,197,24,.18), 0 0 16px -6px rgba(245,197,24,.5); transition:box-shadow .3s ease, transform .25s cubic-bezier(.2,.8,.2,1); } /* the diagonal shine sweep element injected by JS over each flag */ .pk-flagshine{position:absolute; z-index:3; pointer-events:none; overflow:hidden; border-radius:50%; inset:0;} .pk-flagshine::after{content:""; position:absolute; top:-30%; bottom:-30%; left:-60%; width:45%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.85),transparent); transform:skewX(-16deg); opacity:0;} /* FIFA-rank pill — base metallic surface for the shimmer */ .wcrank{position:relative; overflow:hidden; isolation:isolate;} .wcrank::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit; background:linear-gradient(105deg,transparent 30%,rgba(255,245,205,.55) 48%,rgba(245,197,24,.0) 64%); background-size:240% 100%; background-position:140% 0; opacity:0;} @media (prefers-reduced-motion: no-preference){ /* crest ring glow is now STATIC (set on the base img rule below) — no infinite pulse */ /* one-time diagonal shine when the card scrolls in (one-shot, cheap) */ .card.mcard.in .pk-flagshine::after{animation:pkFlagShine 1.2s ease .25s 1 both} .gotd.pkg-in .pk-flagshine::after{animation:pkFlagShine 1.2s ease .35s 1 both} /* FIFA-rank metallic shimmer = one-shot on hover only (no infinite loop) */ .wcrank:hover::after{animation:pkRankShimmer 1.1s ease 1 both} @keyframes pkFlagShine{0%{left:-60%; opacity:0}12%{opacity:1}100%{left:150%; opacity:0}} @keyframes pkRankShimmer{ 0%{background-position:140% 0; opacity:0} 30%{opacity:.9} 100%{background-position:-60% 0; opacity:0}} } /* ================================================================= */ /* 4 · MAGNETIC GOLD CTAs (desktop only) + shine sweep */ /* .gotd-cta · .wc-cta-btn · register/hero gold CTAs. */ /* JS translates the button a few px toward the cursor. */ /* ================================================================= */ .gotd .gotd-cta, .wc-cta-card.wc-result .wc-cta-btn{ --pk-bx:0px; --pk-by:0px; } @media (hover:hover) and (pointer:fine){ @media (prefers-reduced-motion: no-preference){ .gotd .gotd-cta:not(.gotd-cta-locked).pk-mag, .wc-cta-card.wc-result .wc-cta-btn.pk-mag, .pk-mag{ transform:translate(var(--pk-bx,0px),var(--pk-by,0px)); transition:transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, filter .18s ease; } /* will-change promoted only while the magnetic CTA is actually hovered */ .gotd .gotd-cta:not(.gotd-cta-locked).pk-mag:hover, .wc-cta-card.wc-result .wc-cta-btn.pk-mag:hover, .pk-mag:hover{ will-change:transform; } /* preserve the existing :hover lift by composing it into translate */ .gotd .gotd-cta:not(.gotd-cta-locked).pk-mag:hover{ transform:translate(var(--pk-bx,0px),calc(var(--pk-by,0px) - 2px)) ; } .wc-cta-card.wc-result .wc-cta-btn.pk-mag:hover{ transform:translate(var(--pk-bx,0px),calc(var(--pk-by,0px) - 2px)); } /* generic magnetic shine sweep for any .pk-mag that lacks one */ .pk-mag.pk-mag-shine{position:relative; overflow:hidden} .pk-mag.pk-mag-shine::after{content:""; position:absolute; top:0; bottom:0; left:-70%; width:42%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-18deg); pointer-events:none;} .pk-mag.pk-mag-shine:hover::after{animation:rcShine .8s ease 1 both} } } /* ================================================================= */ /* 5 · HERO DEPTH BOOST — drifting aurora / mesh + cursor parallax */ /* ================================================================= */ /* aurora mesh layer behind the existing glow blobs, very low opacity */ .wc-hero .wc-aurora{position:absolute; inset:-20%; z-index:0; pointer-events:none; opacity:.4; filter:blur(40px); background: radial-gradient(40% 50% at 22% 30%, rgba(245,197,24,.18), transparent 60%), radial-gradient(46% 54% at 78% 24%, rgba(31,191,90,.13), transparent 62%), radial-gradient(50% 60% at 60% 88%, rgba(245,197,24,.10), transparent 64%), radial-gradient(40% 52% at 18% 82%, rgba(31,191,90,.08), transparent 60%); background-size:200% 200%;} /* cursor parallax target vars (written by JS, desktop only) */ .wc-hero{--pk-hx:0px; --pk-hy:0px;} @media (prefers-reduced-motion: no-preference){ /* aurora mesh is now STATIC depth (the 2 drifting blobs carry the hero motion) */ @media (hover:hover) and (pointer:fine){ .wc-hero .wc-fx{transition:transform .5s cubic-bezier(.16,1,.3,1)} .wc-hero.pk-parallax .wc-fx{transform:translate(var(--pk-hx,0px),var(--pk-hy,0px))} .wc-hero .wc-aurora{transition:transform .6s cubic-bezier(.16,1,.3,1)} .wc-hero.pk-parallax .wc-aurora{transform:translate(calc(var(--pk-hx,0px)*1.8),calc(var(--pk-hy,0px)*1.8))} } } @media (prefers-reduced-motion: reduce){ .wc-hero .wc-aurora{display:none} } /* ================================================================= */ /* 6 · SIGNATURE WOW MICRO-MOMENT — gold spark burst on GotD CTA tap */ /* + an energy scan-line that sweeps the GotD banner once on */ /* reveal. Particles are absolutely-positioned, transform/opacity */ /* only, auto-removed by JS. Off entirely under reduced-motion. */ /* ================================================================= */ .pk-burst{position:fixed; z-index:9999; pointer-events:none; left:0; top:0; width:6px; height:6px; border-radius:50%; background:radial-gradient(circle,#fff7da,rgba(245,197,24,.9) 45%,transparent 72%); box-shadow:0 0 10px rgba(245,197,24,.9); opacity:0;} /* the one-shot scan line that sweeps a featured card on reveal */ .gotd .pk-scan{position:absolute; inset:0; z-index:5; pointer-events:none; overflow:hidden; border-radius:inherit; opacity:0;} .gotd .pk-scan::before{content:""; position:absolute; left:0; right:0; top:-30%; height:42%; background:linear-gradient(180deg,transparent,rgba(245,197,24,.16) 45%,rgba(255,245,205,.30) 50%,rgba(245,197,24,.16) 55%,transparent); filter:blur(2px);} @media (prefers-reduced-motion: no-preference){ .pk-burst.go{animation:pkBurst .72s cubic-bezier(.18,.7,.3,1) 1 forwards} .gotd.pkg-in .pk-scan{animation:pkScanFade 1.5s ease .25s 1 both} .gotd.pkg-in .pk-scan::before{animation:pkScan 1.5s cubic-bezier(.16,1,.3,1) .25s 1 both} @keyframes pkBurst{ 0%{opacity:1; transform:translate(0,0) scale(1)} 100%{opacity:0; transform:translate(var(--pk-dx,0px),var(--pk-dy,0px)) scale(.3)}} @keyframes pkScan{0%{top:-30%}100%{top:120%}} @keyframes pkScanFade{0%,90%{opacity:1}100%{opacity:0}} } /* under reduced-motion the burst/scan simply never run (no class added) */ @media (prefers-reduced-motion: reduce){ .pk-burst, .gotd .pk-scan{display:none} } /* ---------- NEXT-LEVEL · responsive sanity (the 4 rule) ---------- */ /* nothing here adds width; spotlight/tilt/parallax are desktop-only */ /* via hover/pointer queries, so phone+tablet are untouched. Aurora */ /* is inset and blurred (no overflow — .wc-hero is overflow:hidden). */ @media(max-width:560px){ .wc-hero .wc-aurora{filter:blur(36px); opacity:.36} } /* ── COOLER CARD HEADER (the "● GROUP STAGE · time" bar) — 100% static, zero runtime cost ── */ .mcard{position:relative} /* signature 2px gold accent line across the very top of every match card */ .mcard::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;border-radius:14px 14px 0 0; background:linear-gradient(90deg,transparent,rgba(245,197,24,.85),rgba(31,191,90,.55),transparent); opacity:.55;pointer-events:none;z-index:2} .mcard .top{ background:linear-gradient(180deg,rgba(245,197,24,.05),rgba(255,255,255,0)); border-bottom:1px solid rgba(245,197,24,.14); padding:11px 15px;font-weight:600;letter-spacing:.7px; position:relative;z-index:1} /* round / group label — brighter & crisper (keeps its existing flag/globe glyph) */ .mcard .top .lg{color:#e9eaf0;font-weight:700;align-items:center} /* kickoff time on the right — refined, monospaced figures so it never jitters */ .mcard .top > span:last-child{color:var(--muted);font-variant-numeric:tabular-nums; font-weight:600;letter-spacing:.5px;white-space:nowrap} @media(max-width:430px){ .mcard .top{padding:10px 12px;letter-spacing:.4px;font-size:11.5px} } /* ================================================================= */ /* ================================================================= */ /* LIGHT-MODE WOW VARIANTS */ /* ----------------------------------------------------------------- */ /* Every WOW element above was built dark-only. This block is purely */ /* ADDITIVE: it scopes overrides under html[data-theme="light"] so */ /* the dark default is never touched. No new looping animations are */ /* added here (all motion stays in the dark base rules; we only */ /* retint / re-surface). Strategy per element: */ /* · dark gradients/glass → light surfaces (#fff / #f4f6f9) */ /* · glows (box-shadow halos) → crisp light hairlines + soft GREY */ /* drop-shadows (glows read as muddy smudges on white) */ /* · white text on dark → dark --text on light */ /* · gold stays gold but uses the light --gold (#a87f0f) where a */ /* foreground contrast ≥4.5:1 is needed; decorative gold (rings, */ /* accent lines) keeps the bright #F5C518 at low opacity */ /* · ambient FX (aurora/blobs/sparkle/rays) → very soft warm tints */ /* HERO DECISION: light hero (route recommended in brief) — the page */ /* is a light surface, so a clean light gradient hero is cohesive and */ /* keeps the trust strip + headline readable (no dark band smudge). */ /* ================================================================= */ /* ---- 1 · HERO background → clean LIGHT hero -------------------- */ html[data-theme="light"] .wc-hero{ border:1px solid var(--line); background: radial-gradient(120% 120% at 78% 12%, rgba(168,127,15,.07), transparent 46%), radial-gradient(110% 130% at 10% 92%, rgba(31,160,80,.06), transparent 50%), linear-gradient(160deg,#fbfcfe 0%,#f1f4f8 52%,#eaeef3 100%); box-shadow:0 22px 54px -34px rgba(20,30,55,.30), inset 0 1px 0 rgba(255,255,255,.7); } /* blobs → soft warm-gold / teal tints, much lower opacity on white */ html[data-theme="light"] .wc-blob.b1{ background:radial-gradient(circle,rgba(168,127,15,.55),transparent 68%); opacity:.10} html[data-theme="light"] .wc-blob.b2{ background:radial-gradient(circle,rgba(31,160,80,.5),transparent 68%); opacity:.08} html[data-theme="light"] .wc-blob.b3{ background:radial-gradient(circle,rgba(168,127,15,.4),transparent 70%); opacity:.05} /* pitch lines → dark-on-light at low opacity */ html[data-theme="light"] .wc-pitch{opacity:.42} html[data-theme="light"] .wc-pitch .pl{stroke:rgba(30,40,60,.10)} html[data-theme="light"] .wc-pitch .circ{stroke:rgba(168,127,15,.20)} /* grid texture → dark hairlines instead of white (white is invisible on white) */ html[data-theme="light"] .wc-grid{opacity:.5; background-image:linear-gradient(rgba(30,40,60,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(30,40,60,.05) 1px,transparent 1px)} /* aurora mesh → gentle warm ambient light, not dark blobs */ html[data-theme="light"] .wc-hero .wc-aurora{ opacity:.5; background: radial-gradient(40% 50% at 22% 30%, rgba(245,197,24,.16), transparent 60%), radial-gradient(46% 54% at 78% 24%, rgba(31,191,90,.11), transparent 62%), radial-gradient(50% 60% at 60% 88%, rgba(245,197,24,.10), transparent 64%), radial-gradient(40% 52% at 18% 82%, rgba(31,191,90,.07), transparent 60%); } /* headline / body text → dark, readable on light */ html[data-theme="light"] .wc-hero h1{color:#15171c; text-shadow:0 1px 0 rgba(255,255,255,.6)} html[data-theme="light"] .wc-hero h1 .g{ background:linear-gradient(100deg,#caa224 0%,#a87f0f 32%,#caa224 56%,#8a690c 78%,#a87f0f 100%); background-size:220% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; filter:drop-shadow(0 1px 1px rgba(168,127,15,.18)); } html[data-theme="light"] .wc-hero p{color:#4b4e58} html[data-theme="light"] .wc-hero p b{color:#15171c} html[data-theme="light"] .wc-hero-tag{ color:var(--gold); background:rgba(168,127,15,.10); border:1px solid rgba(168,127,15,.30); } /* countdown boxes → soft shadow not gold glow */ html[data-theme="light"] .wc-hero .wc-countdown .cd{ box-shadow:0 0 0 1px rgba(168,127,15,.16), 0 8px 20px -14px rgba(20,30,55,.28)} /* ---- 2 · HERO glass stat panel → light glass ------------------ */ html[data-theme="light"] .wc-glass{ background:rgba(255,255,255,.72); border:1px solid var(--line); box-shadow:0 16px 40px -26px rgba(20,30,55,.32), inset 0 1px 0 rgba(255,255,255,.8); } html[data-theme="light"] .wc-glass .gs + .gs::before{ background:linear-gradient(180deg,transparent,rgba(30,40,60,.12),transparent)} html[data-theme="light"] .wc-glass .gn{color:#8a690c} html[data-theme="light"] .wc-glass .gn.green{color:#0f7a3d} html[data-theme="light"] .wc-glass .gl{color:#5f626d} html[data-theme="light"] .wc-glass .gs:nth-child(3), html[data-theme="light"] .wc-glass .gs:nth-child(4){border-top-color:var(--line)} /* verified-record panel */ html[data-theme="light"] .wc-track{ background:radial-gradient(120% 120% at 0% 0%, rgba(168,127,15,.06), transparent 55%), var(--card); border:1px solid rgba(168,127,15,.20)} html[data-theme="light"] .wc-track .statbig .b{ background:var(--card2); border:1px solid var(--line)} /* lift micro-interaction → soft grey shadow + crisp border (not glow) */ html[data-theme="light"] [data-wow="lift"]:hover{ box-shadow:0 14px 30px -16px rgba(20,30,55,.30), 0 3px 10px -7px rgba(20,30,55,.2); border-color:rgba(168,127,15,.45)} /* ---- 4 · CARD SHELLS → light surfaces + grey drop-shadow ------ */ html[data-theme="light"] .card.mcard{ background: radial-gradient(140% 80% at 50% -8%, rgba(168,127,15,.05), transparent 58%), linear-gradient(180deg,#ffffff 0%,#f7f9fb 58%,#f1f4f8 100%); border:1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 0 rgba(20,30,55,.04), 0 18px 40px -28px rgba(20,30,55,.32); } html[data-theme="light"] .card.mcard:hover{ border-color:rgba(168,127,15,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 22px 46px -26px rgba(20,30,55,.34), 0 0 0 1px rgba(168,127,15,.16); } html[data-theme="light"] .card.mcard:has(.wc-result.won){ border-color:rgba(168,127,15,.40); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 18px 40px -28px rgba(20,30,55,.30), 0 0 0 1px rgba(168,127,15,.22); } html[data-theme="light"] .card.mcard:has(.wc-result:not(.won)){ border-color:rgba(212,2,14,.20)} /* override the v2 static gold-ring (defined later in dark base) for light */ html[data-theme="light"] .wc-cta-card.wc-result.won{ box-shadow:inset 0 1px 0 rgba(168,127,15,.12), 0 12px 32px -26px rgba(20,30,55,.30), 0 0 0 1px rgba(168,127,15,.30); } /* team names → dark */ html[data-theme="light"] .card.mcard .teams .team{color:#15171c} /* FIFA-rank metallic pill → light surface, readable gold text, soft shadow */ html[data-theme="light"] .card.mcard .wcrank, html[data-theme="light"] .gotd .gotd-team .wcrank, html[data-theme="light"] .wcrank{ color:var(--gold); background:linear-gradient(180deg,rgba(168,127,15,.14),rgba(168,127,15,.05)); border-color:rgba(168,127,15,.40); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 1px rgba(168,127,15,.08), 0 2px 6px -4px rgba(20,30,55,.25); } /* the gold metallic shimmer sweep on the rank pill → light-tinted */ html[data-theme="light"] .wcrank::after{ background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.85) 48%,rgba(168,127,15,.0) 64%); background-size:240% 100%; background-position:140% 0;} /* signature top accent line → keep gold, tune for light */ html[data-theme="light"] .mcard::before{ background:linear-gradient(90deg,transparent,rgba(168,127,15,.8),rgba(31,160,80,.5),transparent); opacity:.6} html[data-theme="light"] .mcard .top{ background:linear-gradient(180deg,rgba(168,127,15,.05),rgba(255,255,255,0)); border-bottom:1px solid rgba(168,127,15,.16)} html[data-theme="light"] .mcard .top .lg{color:#15171c} html[data-theme="light"] .mcard .top > span:last-child{color:var(--muted)} /* ---- 3 · RESULT card body / SCOREBOARD → light --------------- */ html[data-theme="light"] .wc-cta-card.wc-result{ background: radial-gradient(120% 90% at 50% -10%, rgba(168,127,15,.05), transparent 55%), linear-gradient(180deg,#ffffff 0%,#f4f6f9 100%); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 8px 24px -22px rgba(20,30,55,.28); } html[data-theme="light"] .wc-cta-card.wc-result::before{ background:linear-gradient(90deg,transparent,rgba(30,40,60,.18),transparent)} html[data-theme="light"] .wc-cta-card.wc-result.won{ background: radial-gradient(130% 95% at 50% -12%, rgba(168,127,15,.12), transparent 56%), radial-gradient(120% 120% at 100% 120%, rgba(31,160,80,.08), transparent 60%), linear-gradient(180deg,#fffaec 0%,#fdf6e2 100%); border-color:rgba(168,127,15,.40); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 12px 32px -24px rgba(168,127,15,.4); } html[data-theme="light"] .wc-cta-card.wc-result.won::before{ background:linear-gradient(90deg,rgba(31,160,80,.0),#159b4d 18%,#a87f0f 50%,#159b4d 82%,rgba(31,160,80,0)); box-shadow:none} /* status chip (FULL TIME) → light glass, dark text */ html[data-theme="light"] .wc-cta-card.wc-result .wc-cta-lbl{ color:#5f626d; background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(244,246,249,.9)); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 1px 4px -3px rgba(20,30,55,.3)} html[data-theme="light"] .wc-cta-card.wc-result.won .wc-cta-lbl{ color:#7a5e0b; background:linear-gradient(180deg,rgba(168,127,15,.16),rgba(168,127,15,.06)); border-color:rgba(168,127,15,.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 1px 4px -3px rgba(168,127,15,.3)} /* the scoreboard housing → white→f4f6f9, dark score text (was white = invisible) */ html[data-theme="light"] .wc-cta-card.wc-result .wc-res-score{ color:#15171c; background:linear-gradient(180deg,#ffffff 0%,#eef1f5 100%); border:1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 10px 22px -18px rgba(20,30,55,.18), 0 4px 14px -12px rgba(20,30,55,.3); text-shadow:none; } html[data-theme="light"] .wc-cta-card.wc-result .wc-res-score span{ color:#9da1ac; text-shadow:none} /* won score → gold numerals (light --gold reads on white), no muddy glow */ html[data-theme="light"] .wc-cta-card.wc-result.won .wc-res-score{ color:#8a690c; -webkit-text-fill-color:#8a690c; background: radial-gradient(120% 120% at 50% 0%, rgba(168,127,15,.08), transparent 60%), linear-gradient(180deg,#fffaec 0%,#fdf4dd 100%); border-color:rgba(168,127,15,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 10px 22px -18px rgba(168,127,15,.18), 0 4px 14px -12px rgba(168,127,15,.3); text-shadow:0 1px 0 rgba(255,255,255,.5); } html[data-theme="light"] .wc-cta-card.wc-result.won .wc-res-score span{ color:#c2a45a; -webkit-text-fill-color:#c2a45a; text-shadow:none} /* picks-landed pips → readable gold, drop the glow halo */ html[data-theme="light"] .wc-cta-card.wc-result .wc-cta-meta{color:#4b4e58} html[data-theme="light"] .wc-cta-card.wc-result .wc-cta-meta::before{ color:var(--gold); text-shadow:none} /* ---- 6 · "CALLED IT" badge → keep gold fill, crisp shadow ----- */ html[data-theme="light"] .wc-cta-card.wc-result .wc-res-called{ color:#3a2c05; background:linear-gradient(100deg,#ffe27a 0%,#F5C518 46%,#d9ab16 100%); border:1px solid rgba(255,255,255,.6); box-shadow:0 0 0 1px rgba(168,127,15,.4), 0 6px 16px -8px rgba(168,127,15,.55), inset 0 1px 0 rgba(255,255,255,.75)} /* ---- 5 · GOLD CTA buttons → clean gold + shadow (no halo) ----- */ html[data-theme="light"] .wc-cta-card.wc-result .wc-cta-btn, html[data-theme="light"] .gotd .gotd-cta:not(.gotd-cta-locked), html[data-theme="light"] .mm-modal.wcm-mode .wcm-cta{ color:#2a2006; border:1px solid rgba(168,127,15,.5); background:linear-gradient(180deg,#ffe27a 0%,#F5C518 50%,#dca90f 100%); box-shadow: 0 8px 20px -10px rgba(168,127,15,.5), 0 1px 0 rgba(255,255,255,.5), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(120,86,0,.18); } html[data-theme="light"] .wc-cta-card.wc-result .wc-cta-btn:hover, html[data-theme="light"] .mm-modal.wcm-mode .wcm-cta:hover{ box-shadow: 0 12px 26px -12px rgba(168,127,15,.6), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 0 rgba(120,86,0,.18); } html[data-theme="light"] .gotd .gotd-cta:not(.gotd-cta-locked):hover{ box-shadow:0 12px 26px -12px rgba(168,127,15,.6), inset 0 1px 0 rgba(255,255,255,.65)} /* locked CTA → light frosted, dark text */ html[data-theme="light"] .gotd .gotd-cta.gotd-cta-locked{ background:rgba(20,30,55,.05); border-color:var(--line); color:#5f626d} /* ---- FAN-VOTE (voted state) → light glass tiles + bars -------- */ html[data-theme="light"] .pk-poll.voted{ background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(244,246,249,.85)); border:1px solid var(--line)} html[data-theme="light"] .pk-poll.voted .pk-voted-hdr{color:#5f626d} html[data-theme="light"] .pk-poll.voted .pk-voted-hdr::before{ color:var(--gold); filter:none} html[data-theme="light"] .pk-poll.voted .pk-bar-l{color:#4b4e58} html[data-theme="light"] .pk-poll.voted .pk-bar-t{ background:rgba(20,30,55,.08); box-shadow:inset 0 1px 2px rgba(20,30,55,.12)} html[data-theme="light"] .pk-poll.voted .pk-bar-f{ background:linear-gradient(90deg,#b9bcc4,#9097a0)} html[data-theme="light"] .pk-poll.voted .pk-bar.me .pk-bar-l{color:var(--gold)} html[data-theme="light"] .pk-poll.voted .pk-bar.me .pk-bar-f{ background:linear-gradient(90deg,#c79a14,#a87f0f 60%,#caa224); box-shadow:none} html[data-theme="light"] .pk-poll.voted .pk-consensus{ color:#4b4e58; background:rgba(168,127,15,.07); border:1px solid rgba(168,127,15,.2)} html[data-theme="light"] .pk-poll.voted .pk-consensus b{color:var(--gold)} /* ================================================================= */ /* LIGHT · GAME OF THE DAY */ /* The GotD sits over banner_bg.png with a dark scrim — keep that as */ /* an intentional cinematic image banner (the photo reads fine on a */ /* light page as a deliberate hero panel), but lighten the scrim a */ /* touch and convert glow halos → crisper rings + shadows. Text on */ /* the banner stays light (it's over a darkened photo, so high */ /* contrast is preserved). */ /* ================================================================= */ /* GotD card — FULLY LIGHT in light mode (owner 2026-06-30: make it light, not the dark cinematic card). Light surface + dark text + light fan-vote boxes. Re-tokenize the card's own --text/--card vars to light so all its children flip. */ html[data-theme="light"] .gotd{ --text:#15171c; --text2:#3d4049; --muted:#5f626d; --muted2:#7a7d86; --card:#ffffff; --card2:#f4f6f9; --line:#e2e5ea; border:1px solid rgba(168,127,15,.32); background:none; background-image: radial-gradient(140% 120% at 50% -28%, rgba(245,197,24,.16), transparent 58%), linear-gradient(180deg,#ffffff,#f4f6f9); box-shadow:0 18px 44px -28px rgba(20,30,55,.30), 0 0 0 1px rgba(168,127,15,.08); } /* drop the dark-photo decorative layers in light mode */ html[data-theme="light"] .gotd::before, html[data-theme="light"] .gotd .pkg-fx, html[data-theme="light"] .gotd .pkg-rays, html[data-theme="light"] .gotd .pkg-trophy, html[data-theme="light"] .gotd .pkg-spark{ display:none !important; } /* team names, VS, date → dark */ html[data-theme="light"] .gotd .gotd-team, html[data-theme="light"] .gotd .gotd-v, html[data-theme="light"] .gotd .gotd-match{ color:#15171c; } html[data-theme="light"] .gotd .gotd-v{ color:#5f626d; } /* fan-vote option boxes → light surfaces with dark text */ html[data-theme="light"] .gotd .pk-opt{ background:#ffffff; border:1px solid rgba(168,127,15,.22); color:#15171c; box-shadow:0 4px 14px -10px rgba(0,0,0,.25); } html[data-theme="light"] .gotd .pk-opt:hover{ border-color:rgba(168,127,15,.45); } html[data-theme="light"] .gotd .pk-poll-hdr, html[data-theme="light"] .gotd .pk-poll.voted .pk-voted-hdr{ color:#5f626d; } html[data-theme="light"] .gotd .gotd-tag{ color:#7a5c0a; } /* crests keep their dark ring (they sit on the dark banner) — leave as-is. FIFA pill on the banner uses the bright decorative gold (over dark photo). */ html[data-theme="light"] .gotd .gotd-team .wcrank{ color:#ffe9a8; background:linear-gradient(180deg,rgba(245,197,24,.18),rgba(245,197,24,.06)); border-color:rgba(245,197,24,.42); box-shadow:0 0 0 1px rgba(245,197,24,.06), 0 3px 10px -5px rgba(245,197,24,.5); } /* the poll on the GotD banner stays dark-glass (over the dark photo) — leave. Only soften nothing: the dark-base values read correctly over the banner. */ /* ================================================================= */ /* LIGHT · VERDICT MODAL */ /* A modal is a focused surface — convert fully to a light sheet so */ /* it doesn't read as a dark box dropped on a light page. */ /* ================================================================= */ html[data-theme="light"] body.pkm-open .mm-overlay#matchModal{ background:rgba(30,40,60,.34)} html[data-theme="light"] .mm-modal.wcm-mode{ background:#ffffff; border:1px solid var(--line); box-shadow:0 40px 100px -34px rgba(20,30,55,.4), 0 0 0 1px rgba(168,127,15,.06)} html[data-theme="light"] .mm-modal.wcm-mode .mm-x{ color:#15171c; background:rgba(255,255,255,.92); border:1px solid var(--line)} html[data-theme="light"] .mm-modal.wcm-mode .mm-x:hover{ background:rgba(168,127,15,.14); border-color:rgba(168,127,15,.5); color:#7a5e0b} /* hero → light floodlit stage */ html[data-theme="light"] .mm-modal.wcm-mode .wcm-hero{ background: radial-gradient(120% 90% at 50% -20%, rgba(168,127,15,.08), transparent 56%), linear-gradient(180deg,#f6faf6 0%,#ffffff 100%)} html[data-theme="light"] .mm-modal.wcm-mode .wcm-hero::after{ background:radial-gradient(120% 80% at 50% -10%, rgba(30,40,60,.04), transparent 55%)} html[data-theme="light"] .mm-modal.wcm-mode .wcm-tag{ color:#7a5e0b; background:rgba(168,127,15,.10); border:1px solid rgba(168,127,15,.3); text-shadow:none} /* crest circles → light face, coloured rings stay (readable on white) */ html[data-theme="light"] .mm-modal.wcm-mode .wcm-flag{ background:radial-gradient(circle at 50% 34%, #ffffff, #eef1f5)} html[data-theme="light"] .mm-modal.wcm-mode .wcm-flag.h{ border-color:rgba(31,160,80,.55); box-shadow:0 0 0 4px rgba(31,160,80,.08), 0 6px 18px -8px rgba(31,160,80,.4)} html[data-theme="light"] .mm-modal.wcm-mode .wcm-flag.a{ border-color:rgba(168,127,15,.55); box-shadow:0 0 0 4px rgba(168,127,15,.08), 0 6px 18px -8px rgba(168,127,15,.4)} html[data-theme="light"] .mm-modal.wcm-mode .wcm-side span{color:#15171c} html[data-theme="light"] .mm-modal.wcm-mode .wcm-vs{ background:linear-gradient(180deg,#caa224,#a87f0f 58%,#8a690c); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; filter:none; text-shadow:none} html[data-theme="light"] .mm-modal.wcm-mode .wcm-vs small{ color:#5f626d; -webkit-text-fill-color:#5f626d} /* body context panels → light glass */ html[data-theme="light"] .mm-modal.wcm-mode .wcm-ctx{ background:var(--card2); border:1px solid var(--line)} html[data-theme="light"] .mm-modal.wcm-mode .wcm-ctx-h{color:#7a5e0b} html[data-theme="light"] .mm-modal.wcm-mode .wcm-ctx-side{ background:#ffffff; border:1px solid var(--line)} html[data-theme="light"] .mm-modal.wcm-mode .wcm-ctx-team{color:#15171c} html[data-theme="light"] .mm-modal.wcm-mode .wcm-fm-none{color:#9da1ac} html[data-theme="light"] .mm-modal.wcm-mode .wcm-title{color:#15171c} html[data-theme="light"] .mm-modal.wcm-mode .wcm-title::after{ background:linear-gradient(90deg,rgba(168,127,15,.4),transparent)} /* pick cards → light glass, dark text */ html[data-theme="light"] .mm-modal.wcm-mode .wcm-pick{ background:#ffffff; border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 8px 24px -22px rgba(20,30,55,.28)} html[data-theme="light"] .mm-modal.wcm-mode .wcm-pick:hover{ border-color:rgba(168,127,15,.4); box-shadow:0 12px 30px -22px rgba(168,127,15,.4), inset 0 1px 0 rgba(255,255,255,.7)} html[data-theme="light"] .mm-modal.wcm-mode .wcm-mk{color:#15171c} /* PROB / ODDS pills → light fills, crisp rings (no glow) */ html[data-theme="light"] .mm-modal.wcm-mode .wcm-prob{ color:#0f7a3d; background:rgba(31,160,80,.12); box-shadow:0 0 0 1px rgba(31,160,80,.26)} html[data-theme="light"] .mm-modal.wcm-mode .wcm-odd{ color:#7a5e0b; background:rgba(168,127,15,.12); box-shadow:0 0 0 1px rgba(168,127,15,.26)} /* confidence bar track + fill */ html[data-theme="light"] .mm-modal.wcm-mode .wcm-bar{ background:rgba(20,30,55,.08); box-shadow:inset 0 1px 2px rgba(20,30,55,.12)} html[data-theme="light"] .mm-modal.wcm-mode .wcm-bar i{ background:linear-gradient(90deg,#159b4d 0%,#7fae2e 48%,#a87f0f 100%); box-shadow:none} html[data-theme="light"] .mm-modal.wcm-mode .wcm-desk{color:#4b4e58} /* VIP locked → light frosted, desirable */ html[data-theme="light"] .mm-modal.wcm-mode .wcm-pick.vip{ border-color:rgba(168,127,15,.34); background:linear-gradient(180deg,rgba(168,127,15,.07),rgba(255,255,255,.6))} html[data-theme="light"] .mm-modal.wcm-mode .wcm-pick.vip:hover{ border-color:rgba(168,127,15,.55); box-shadow:0 14px 34px -22px rgba(168,127,15,.5), 0 0 0 1px rgba(168,127,15,.14)} html[data-theme="light"] .mm-modal.wcm-mode .wcm-blur{filter:blur(7px); opacity:.55} html[data-theme="light"] .mm-modal.wcm-mode .wcm-lockface{ background:radial-gradient(ellipse at 50% 40%, rgba(168,127,15,.08), transparent 70%)} html[data-theme="light"] .mm-modal.wcm-mode .wcm-lockface .lk{ background:linear-gradient(180deg,rgba(245,197,24,.22),rgba(245,197,24,.1)); border:1px solid rgba(168,127,15,.4); color:#7a5e0b; box-shadow:0 0 0 4px rgba(168,127,15,.06), 0 6px 16px -8px rgba(168,127,15,.45)} html[data-theme="light"] .mm-modal.wcm-mode .wcm-lockface small{color:#7a5e0b} html[data-theme="light"] .mm-modal.wcm-mode .wcm-cta-info{ color:#4b4e58; background:rgba(168,127,15,.06); border:1px solid rgba(168,127,15,.18)} /* ================================================================= */ /* LIGHT · MATCH-CARD FAN VOTE (un-voted glass tiles) */ /* ================================================================= */ html[data-theme="light"] .card.mcard .pk-poll:not(.voted){ background: radial-gradient(120% 80% at 50% -20%, rgba(168,127,15,.05), transparent 60%), linear-gradient(180deg,#ffffff,#f4f6f9); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 8px 22px -22px rgba(20,30,55,.26)} html[data-theme="light"] .card.mcard .pk-poll:not(.voted) .pk-poll-hdr{ color:#7a5e0b; text-shadow:none} html[data-theme="light"] .card.mcard .pk-poll:not(.voted) .pk-opt{ background:linear-gradient(180deg,#ffffff,#f1f4f8); border:1.5px solid var(--line); color:#15171c; box-shadow:inset 0 1px 0 rgba(255,255,255,.7)} html[data-theme="light"] .card.mcard .pk-poll:not(.voted) .pk-opt .pk-poll-flag{ background:#ffffff; box-shadow:0 0 0 1px var(--line), 0 2px 6px -3px rgba(20,30,55,.2)} html[data-theme="light"] .card.mcard .pk-poll:not(.voted) .pk-opt-mid{ background:rgba(20,30,55,.04); border:1px solid var(--line); color:#5f626d} html[data-theme="light"] .card.mcard .pk-poll:not(.voted) .pk-opt:active{ border-color:rgba(168,127,15,.6)} @media (hover:hover) and (pointer:fine){ html[data-theme="light"] .card.mcard .pk-poll:not(.voted) .pk-opt:hover{ border-color:rgba(168,127,15,.55); color:#7a5e0b; background:linear-gradient(180deg,rgba(168,127,15,.1),rgba(168,127,15,.03)); box-shadow:0 10px 24px -16px rgba(168,127,15,.45), 0 0 0 1px rgba(168,127,15,.16), inset 0 1px 0 rgba(255,255,255,.7); } html[data-theme="light"] .card.mcard .pk-poll:not(.voted) .pk-opt:hover .pk-poll-flag{ box-shadow:0 0 0 1px rgba(168,127,15,.4), 0 2px 10px -4px rgba(168,127,15,.4)} html[data-theme="light"] .card.mcard .pk-poll:not(.voted) .pk-opt-mid:hover{ background:rgba(168,127,15,.1); border-color:rgba(168,127,15,.35); color:#7a5e0b} } /* ---- 1 · 3D-tilt cursor spotlight → soft warm-gold tint on white */ @media (hover:hover) and (pointer:fine){ @media (prefers-reduced-motion: no-preference){ html[data-theme="light"] .card.mcard.pk-tilt > .pk-spot, html[data-theme="light"] .gotd.pk-tilt > .pk-spot, html[data-theme="light"] .wc-cta-card.wc-result.pk-tilt > .pk-spot{ background:radial-gradient(220px 220px at var(--pk-mx) var(--pk-my), rgba(168,127,15,.1), rgba(168,127,15,.03) 38%, transparent 62%); } } } /* ---- 3 · charged crest shine on match cards → light ring -------- */ html[data-theme="light"] #wcFix .card.mcard .teams .team img{ box-shadow:0 0 0 1px rgba(168,127,15,.22), 0 2px 10px -6px rgba(20,30,55,.25)} /* ════════ EVERY result card LOOKS THE SAME — solid GOLD score on a DARK scoreboard, both themes ════════ */ /* (owner: "it needs to look like all the others") — win vs loss is shown by the crown badge, not the colour. */ .wc-cta-card.wc-result .wc-res-score, .wc-cta-card.wc-result.won .wc-res-score{ background:linear-gradient(180deg,#1b1d23,#0c0d11)!important; /* dark scoreboard panel — ALWAYS */ border:1px solid rgba(245,197,24,.20)!important; color:#F5C518!important;-webkit-text-fill-color:#F5C518!important; /* solid brand gold (no clip) */ background-clip:border-box!important;-webkit-background-clip:border-box!important; text-shadow:0 0 18px rgba(245,197,24,.20)!important; filter:none!important; box-shadow:inset 0 1px 0 rgba(245,197,24,.10), inset 0 0 30px rgba(0,0,0,.5)!important} .wc-cta-card.wc-result .wc-res-score span, .wc-cta-card.wc-result.won .wc-res-score span{ color:#7d7f88!important;-webkit-text-fill-color:#7d7f88!important;text-shadow:none!important;filter:none!important} /* keep the dark scoreboard (and gold score) in LIGHT mode too, so it always pops + stays consistent */ html[data-theme="light"] .wc-cta-card.wc-result .wc-res-score, html[data-theme="light"] .wc-cta-card.wc-result.won .wc-res-score{ background:linear-gradient(180deg,#1b1d23,#0c0d11)!important;border:1px solid rgba(245,197,24,.22)!important; color:#F5C518!important;-webkit-text-fill-color:#F5C518!important} html[data-theme="light"] .wc-cta-card.wc-result .wc-res-score span{color:#8a8d98!important;-webkit-text-fill-color:#8a8d98!important} /* both result boxes get the same gold frame */ .wc-cta-card.wc-result{ border-color:rgba(245,197,24,.30)!important; box-shadow:inset 0 1px 0 rgba(245,197,24,.08), 0 10px 30px -18px rgba(245,197,24,.4)!important} /* ════════ FORM & GROUP STANDING panel — premium redesign (modal) ════════ */ .mm-modal.wcm-mode .wcm-ctx{ background:linear-gradient(180deg,rgba(245,197,24,.05),rgba(255,255,255,.015))!important; border:1px solid rgba(245,197,24,.16)!important;border-radius:14px!important;padding:15px 15px 16px!important;margin:0 0 18px!important} .mm-modal.wcm-mode .wcm-ctx-h{ color:#ffe1a0!important;font-weight:800!important;font-size:10.5px!important;letter-spacing:.16em!important;margin-bottom:13px!important} .mm-modal.wcm-mode .wcm-ctx-row{gap:12px!important} .mm-modal.wcm-mode .wcm-ctx-side{ flex:1;min-width:0;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.085)!important; border-radius:11px!important;padding:12px 13px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important} .mm-modal.wcm-mode .wcm-ctx-team{ font-weight:800!important;font-size:15px!important;color:#fff!important;margin-bottom:8px!important;letter-spacing:.2px!important} .mm-modal.wcm-mode .wcm-ctx-st{ font-size:12px!important;line-height:1.6!important;color:rgba(255,255,255,.6)!important;margin-bottom:10px!important; white-space:normal!important;font-variant-numeric:tabular-nums!important} .mm-modal.wcm-mode .wcm-ctx-form{display:flex!important;gap:5px!important;flex-wrap:wrap!important} .mm-modal.wcm-mode .wcm-fm{ width:23px!important;height:23px!important;border-radius:6px!important;font-size:11px!important;font-weight:800!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 4px rgba(0,0,0,.3)!important;color:#fff!important} .mm-modal.wcm-mode .wcm-fm.W{background:linear-gradient(180deg,#2fce6b,#16a04b)!important} .mm-modal.wcm-mode .wcm-fm.D{background:linear-gradient(180deg,#f7cb4e,#f0b42a)!important; color:#3a2900!important} .mm-modal.wcm-mode .wcm-fm.L{background:linear-gradient(180deg,#f05a57,#d23b38)!important} .mm-modal.wcm-mode .wcm-fm-none{color:rgba(255,255,255,.42)!important;font-style:italic!important;font-size:12px!important} /* light theme variants */ html[data-theme="light"] .mm-modal.wcm-mode .wcm-ctx{ background:linear-gradient(180deg,rgba(168,127,15,.07),rgba(0,0,0,.012))!important;border-color:rgba(168,127,15,.22)!important} html[data-theme="light"] .mm-modal.wcm-mode .wcm-ctx-h{color:#9a7a12!important} html[data-theme="light"] .mm-modal.wcm-mode .wcm-ctx-side{ background:#fff!important;border-color:#e6e3da!important;box-shadow:0 2px 9px -4px rgba(20,30,55,.18)!important} html[data-theme="light"] .mm-modal.wcm-mode .wcm-ctx-team{color:#1a1c22!important} html[data-theme="light"] .mm-modal.wcm-mode .wcm-ctx-st{color:#5f626d!important} /* GotD light-mode polish (2026-06-30) — fix faint team names + dark fan-vote strip */ html[data-theme="light"] .gotd .gotd-team, html[data-theme="light"] .gotd .gotd-team span{ color:#15171c !important; } html[data-theme="light"] .gotd .pk-poll{ background:#f4f6f9; border:1px solid rgba(168,127,15,.20); box-shadow:inset 0 1px 0 rgba(255,255,255,.6); } html[data-theme="light"] .gotd .pk-poll-hdr, html[data-theme="light"] .gotd .pk-poll .pk-q, html[data-theme="light"] .gotd .pk-poll .pk-voted-hdr{ color:#3d4049 !important; }