/* ============================================================ LA WORLD CUP 2026 — page stylesheet (scoped) WizBrothers theme add-on. Enqueue ONLY on the World Cup page. HOW TO USE 1) Wrap the page markup (everything that was inside the old ) in a single container:

... page content ...

2) Enqueue this file on that page only. 3) Fonts come from your existing site CSS (Baloo 2 & Rubik). Baloo 2 + Rubik — your existing site fonts; no new font needed). All rules are scoped under .wc26 so they win over the theme's global element selectors on this page and never touch the rest of the site. The site header/nav and site footer live OUTSIDE .wc26, so they keep their normal theme styling. ============================================================ */ :root{ --bg:#ffffff; --bg2:#f3f6fb; --surface:#ffffff; --surface-2:#eef2f8; --line:rgba(18,28,46,.12); --text:#19233a; --muted:#5c6779; --match:#b87a00; --festival:#d81b60; --zone:#0c9462; --white-line:rgba(18,28,46,.18); --radius:16px; --font-display:'Baloo 2',cursive; --font-body:'Rubik',sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace; } .wc26 *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} .wc26{ background:transparent; color:var(--text); font-family:var(--font-body); line-height:1.55; overflow-x:hidden; } .wc26::before{display:none} .wc26 .wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 22px} /* ---------- HERO ---------- */ .wc26 .hero{padding:64px 0 38px;position:relative} .wc26 .kicker{ font-family:var(--font-mono);font-size:12px;letter-spacing:.34em; text-transform:uppercase;color:var(--zone);font-weight:500; display:inline-flex;align-items:center;gap:10px; opacity:0;animation:rise .7s .05s forwards; } .wc26 .kicker::before{content:"";width:26px;height:2px;background:var(--zone)} .wc26 h1{ font-family:var(--font-display);font-weight:400;line-height:.92; font-size:clamp(46px,9vw,118px);letter-spacing:.5px;text-transform:uppercase; margin:14px 0 8px; background:linear-gradient(95deg,var(--text) 12%,var(--match) 55%,var(--festival) 95%); -webkit-background-clip:text;background-clip:text;color:transparent; opacity:0;animation:rise .7s .12s forwards; } .wc26 h1 .yr{-webkit-text-fill-color:transparent;-webkit-text-stroke:2px var(--zone);background:none} .wc26 .hero-sub{ max-width:620px;color:var(--muted);font-size:clamp(15px,1.9vw,18px); opacity:0;animation:rise .7s .2s forwards; } .wc26 .hero-sub b{color:var(--text);font-weight:700} .wc26 .daterange{ font-family:var(--font-mono);font-size:14px;color:var(--match); margin-top:18px;letter-spacing:.04em; opacity:0;animation:rise .7s .26s forwards; } .wc26 .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;opacity:0;animation:rise .7s .33s forwards} .wc26 .btn{ display:inline-flex;align-items:center;gap:9px;text-decoration:none; font-weight:800;font-size:14px;padding:13px 20px;border-radius:999px; transition:transform .15s ease,box-shadow .15s ease;letter-spacing:.01em; } .wc26 .btn svg{width:15px;height:15px} .wc26 .btn:hover{transform:translateY(-2px)} .wc26 .btn-match{background:var(--match);color:#1a1300;box-shadow:0 8px 26px -10px var(--match)} .wc26 .btn-fest{background:var(--festival);color:#fff;box-shadow:0 8px 26px -10px var(--festival)} .wc26 .btn-ghost{background:transparent;color:var(--text);border:1px solid var(--white-line)} .wc26 .btn-ghost:hover{border-color:var(--zone);color:var(--zone)} /* ---------- COUNTDOWN ---------- */ .wc26 .countdown{margin:6px 0 4px;padding:30px 24px;border-radius:20px;text-align:center;position:relative;overflow:hidden; background:linear-gradient(120deg,rgba(255,194,61,.16),rgba(255,61,127,.10) 58%,var(--surface)); border:1px solid rgba(255,194,61,.30);opacity:0;animation:rise .7s .4s forwards} .wc26 .countdown::before{content:"";position:absolute;inset:0;opacity:.6;pointer-events:none; background:radial-gradient(440px 170px at 50% -12%,rgba(255,194,61,.20),transparent 70%)} .wc26 .cd-head{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:1.5px; font-size:clamp(16px,3.2vw,30px);margin-bottom:20px;position:relative} .wc26 .cd-clock{display:flex;justify-content:center;align-items:flex-start;gap:clamp(6px,2.4vw,24px);position:relative} .wc26 .cd-unit{min-width:clamp(54px,14vw,96px)} .wc26 .cd-num{font-family:var(--font-display);font-size:clamp(42px,11vw,88px);line-height:.88;color:var(--match); font-variant-numeric:tabular-nums;letter-spacing:1px;text-shadow:0 4px 30px rgba(255,194,61,.25)} .wc26 .cd-lbl{font-family:var(--font-mono);font-size:clamp(9px,1.5vw,12px);text-transform:uppercase; letter-spacing:.16em;color:var(--muted);margin-top:12px} .wc26 .cd-sep{font-family:var(--font-display);font-size:clamp(30px,8vw,64px);color:rgba(18,28,46,.22);line-height:.88;padding-top:2px} .wc26 .cd-meta{font-family:var(--font-mono);font-size:clamp(11px,1.7vw,13px);color:var(--text); margin-top:20px;letter-spacing:.03em;position:relative} .wc26 .cd-meta a{color:var(--match);text-decoration:none;border-bottom:1px solid rgba(255,194,61,.4)} .wc26 .cd-done .cd-num{color:var(--zone);text-shadow:0 4px 30px rgba(30,224,160,.3)} /* ---------- CALENDAR TABS ---------- */ .wc26 .cal-tabs{display:inline-flex;gap:5px;padding:5px;background:var(--surface);border:1px solid var(--line); border-radius:999px;margin-bottom:22px} .wc26 .cal-tab{font-family:var(--font-body);font-weight:800;font-size:14px;letter-spacing:.02em;color:var(--muted); background:transparent;border:none;cursor:pointer;padding:9px 28px;border-radius:999px;transition:all .18s} .wc26 .cal-tab:hover{color:var(--text)} .wc26 .cal-tab.active{color:#0a0e16;background:linear-gradient(90deg,var(--match),var(--festival))} .wc26 .cal-single{max-width:none;width:100%} /* ---------- SECTION SHELL ---------- */ .wc26 section{padding:46px 0;position:relative} .wc26 .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:26px;flex-wrap:wrap} .wc26 .sec-title{font-family:var(--font-display);font-weight:400;text-transform:uppercase; font-size:clamp(30px,5vw,52px);line-height:.95;letter-spacing:.5px} .wc26 .sec-title .dot{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:12px;vertical-align:middle} .wc26 .sec-note{color:var(--muted);font-size:14px;max-width:380px} /* ---------- LEGEND ---------- */ .wc26 .legend{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px} .wc26 .lg{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700; padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface); font-family:var(--font-mono);letter-spacing:.02em} .wc26 .lg i{width:11px;height:11px;border-radius:3px;display:inline-block} /* ---------- CALENDAR ---------- */ .wc26 .cal-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px} @media(max-width:820px){.wc26 .cal-grid{grid-template-columns:1fr}} .wc26 .month{background:linear-gradient(180deg,var(--surface),var(--bg2)); border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px 20px;overflow:hidden;box-shadow:0 2px 12px -6px rgba(18,28,46,.10)} .wc26 .month h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase; font-size:24px;letter-spacing:1px;margin-bottom:14px;display:flex;align-items:baseline;gap:10px} .wc26 .month h3 span{font-family:var(--font-mono);font-size:12px;color:var(--muted);font-weight:400} .wc26 .dow{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:6px} .wc26 .dow div{text-align:center;font-family:var(--font-mono);font-size:10px; color:var(--muted);letter-spacing:.08em;text-transform:uppercase} .wc26 .days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px} .wc26 .cell{min-height:62px;border:1px solid transparent;border-radius:9px;padding:5px 5px 4px; background:rgba(18,28,46,.02);display:flex;flex-direction:column;gap:3px} .wc26 .cell.empty{background:transparent;border:none} .wc26 .cell.has{border-color:var(--line);background:rgba(18,28,46,.04)} .wc26 .cell .num{font-family:var(--font-mono);font-size:11px;color:var(--muted);font-weight:500} .wc26 .cell.has .num{color:var(--text)} .wc26 .chip{font-size:9.5px;font-weight:800;line-height:1.15;border-radius:5px;padding:3px 5px; cursor:pointer;border:none;text-align:left;width:100%; font-family:var(--font-body);letter-spacing:.01em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:filter .12s,transform .12s} .wc26 .chip:hover{filter:brightness(1.12);transform:translateX(1px)} .wc26 .chip.match{background:rgba(255,194,61,.16);color:var(--match);box-shadow:inset 2px 0 0 var(--match)} .wc26 .chip.festival{background:rgba(255,61,127,.16);color:var(--festival);box-shadow:inset 2px 0 0 var(--festival)} .wc26 .chip.zone{background:rgba(30,224,160,.14);color:var(--zone);box-shadow:inset 2px 0 0 var(--zone)} @media(max-width:480px){ .wc26 .cell{min-height:54px} .wc26 .chip{font-size:0;padding:0;height:7px;border-radius:3px;box-shadow:none} .wc26 .chip.match{background:var(--match)}.wc26 .chip.festival{background:var(--festival)}.wc26 .chip.zone{background:var(--zone)} } /* ---------- CARDS ---------- */ .wc26 .cards{display:grid;gap:14px} .wc26 .grid-2{grid-template-columns:1fr 1fr} .wc26 .grid-3{grid-template-columns:repeat(3,1fr)} @media(max-width:900px){.wc26 .grid-3{grid-template-columns:1fr 1fr}} @media(max-width:620px){.wc26 .grid-2, .wc26 .grid-3{grid-template-columns:1fr}} .wc26 .card{background:linear-gradient(165deg,var(--surface),var(--bg2)); border:1px solid var(--line);border-radius:var(--radius);padding:20px; display:flex;flex-direction:column;gap:11px;position:relative;overflow:hidden; transition:border-color .2s,transform .2s,box-shadow .2s;box-shadow:0 2px 12px -6px rgba(18,28,46,.12)} .wc26 .card::after{content:"";position:absolute;top:0;left:0;width:100%;height:3px} .wc26 .card.match::after{background:var(--match)} .wc26 .card.festival::after{background:var(--festival)} .wc26 .card.zone::after{background:var(--zone)} .wc26 .card.zone.near::after{background:#ff3b30} .wc26 .card:hover{transform:translateY(-3px)} .wc26 .card.match:hover{border-color:var(--match)} .wc26 .card.festival:hover{border-color:var(--festival)} .wc26 .card.zone:hover{border-color:var(--zone)} .wc26 .card.zone.near:hover{border-color:#ff3b30} .wc26 .card.flash{animation:flash 1.3s ease} @keyframes flash{0%{box-shadow:0 0 0 0 rgba(18,28,46,.28)}30%{box-shadow:0 0 0 4px rgba(18,28,46,.10)}100%{box-shadow:0 0 0 0 transparent}} .wc26 .date-pill{font-family:var(--font-mono);font-size:11px;font-weight:700; letter-spacing:.05em;text-transform:uppercase;align-self:flex-start; padding:5px 10px;border-radius:7px;background:rgba(18,28,46,.05);border:1px solid var(--line)} .wc26 .card.match .date-pill{color:var(--match)} .wc26 .card.festival .date-pill{color:var(--festival)} .wc26 .card.zone .date-pill{color:var(--zone)} .wc26 .card .title{font-family:var(--font-display);font-weight:400;font-size:23px;line-height:1.02; text-transform:uppercase;letter-spacing:.4px} .wc26 .card .meta{font-family:var(--font-mono);font-size:12px;color:var(--muted)} .wc26 .card .meta b{color:var(--text);font-weight:500} .wc26 .card .desc{font-size:13.5px;color:#3f4a60} .wc26 .row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)} .wc26 .row svg{width:14px;height:14px;flex:none;opacity:.85} .wc26 .tix{margin-top:auto;display:inline-flex;align-items:center;gap:7px;text-decoration:none; font-weight:800;font-size:13px;padding:10px 15px;border-radius:9px;align-self:flex-start; transition:transform .15s,filter .15s} .wc26 .tix:hover{transform:translateY(-2px);filter:brightness(1.05)} .wc26 .tix.match{background:var(--match);color:#1a1300} .wc26 .tix.festival{background:var(--festival);color:#fff} .wc26 .tix.zone{background:rgba(30,224,160,.14);color:var(--zone);border:1px solid rgba(30,224,160,.4)} .wc26 .tix svg{width:14px;height:14px} .wc26 .free-tag{font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--zone); letter-spacing:.08em;text-transform:uppercase} /* featured festival card spanning */ .wc26 .fest-feature{grid-column:1/-1;display:grid;grid-template-columns:1.4fr 1fr;gap:26px; background:linear-gradient(135deg,rgba(255,61,127,.14),var(--surface) 55%); border:1px solid rgba(255,61,127,.3);border-radius:20px;padding:30px} @media(max-width:720px){.wc26 .fest-feature{grid-template-columns:1fr;padding:24px}} .wc26 .fest-feature .big{font-family:var(--font-display);font-size:clamp(30px,5vw,46px); text-transform:uppercase;line-height:.95;margin-bottom:8px} .wc26 .price-box{background:rgba(18,28,46,.04);border:1px solid var(--line);border-radius:14px;padding:18px; display:flex;flex-direction:column;gap:12px;justify-content:center} .wc26 .price-box .p{font-family:var(--font-display);font-size:40px;color:var(--match);line-height:1} .wc26 .price-box .p small{font-family:var(--font-body);font-size:13px;color:var(--muted);font-weight:600} /* ---------- TRANSPORT ---------- */ :root{--transit:#1577d4} .wc26 .card.transit::after{background:var(--transit)} .wc26 .card.transit:hover{border-color:var(--transit)} .wc26 .card.transit .date-pill{color:var(--transit)} .wc26 .card.transit .tix{background:rgba(67,184,255,.14);color:var(--transit);border:1px solid rgba(67,184,255,.4)} .wc26 .transit-sub{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.6px; font-size:clamp(20px,3vw,28px);margin:34px 0 4px;color:var(--transit)} .wc26 .transit-sub:first-of-type{margin-top:6px} .wc26 .transit-lead{color:#3f4a60;font-size:14.5px;max-width:780px;margin-bottom:16px} .wc26 .home-tag{display:inline-flex;flex-wrap:wrap;gap:6px;margin:2px 0 6px} .wc26 .home-tag span{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.04em; padding:5px 11px;border-radius:999px;background:rgba(67,184,255,.12);color:var(--transit);border:1px solid rgba(67,184,255,.28)} .wc26 .transit-note{background:rgba(67,184,255,.08);border:1px solid rgba(67,184,255,.25);border-radius:14px; padding:16px 18px;font-size:13.5px;color:#3f4a60;margin-top:14px;line-height:1.6} .wc26 .transit-note b{color:var(--text)} .wc26 .transit-tips{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px} @media(max-width:760px){.wc26 .transit-tips{grid-template-columns:1fr 1fr}} @media(max-width:440px){.wc26 .transit-tips{grid-template-columns:1fr}} .wc26 .tip{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:15px} .wc26 .tip .th{font-family:var(--font-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase; color:var(--transit);margin-bottom:7px;font-weight:700} .wc26 .tip p{font-size:12.5px;color:#3f4a60;line-height:1.55} .wc26 .tip a{color:var(--transit);text-decoration:none} .wc26 .tip a:hover{text-decoration:underline} /* ---------- FOOTER ---------- */ .wc26 footer{padding:48px 0 70px;border-top:1px solid var(--line);margin-top:40px;color:var(--muted);font-size:13px} .wc26 footer a{color:var(--zone);text-decoration:none} .wc26 footer a:hover{text-decoration:underline} .wc26 .foot-links{display:flex;flex-wrap:wrap;gap:18px;margin:16px 0} .wc26 .disc{font-size:12px;opacity:.8;max-width:760px;line-height:1.7} @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} /* ============================================================ THEME INTEGRATION OVERRIDES Cancel the global theme rules that would otherwise bleed in. ============================================================ */ body{overflow-x:hidden} /* background stays transparent (site white) */ .wc26 .hero{background:transparent} /* cancel theme header{background:#F8F8F8} */ .wc26 footer{background:transparent} /* cancel theme footer{background:#F8F8F8} */ .wc26 h2,.wc26 h3,.wc26 h4,.wc26 h5,.wc26 h6{color:var(--text)} /* cancel Baloo 2 heading color #323663 (h1 keeps its gradient) */ .wc26 p{line-height:1.55} /* cancel theme p{line-height:1.5} */ .wc26 [id]{scroll-margin-top:120px} /* offset #anchor jumps below the fixed site nav */