/* ========================================================================== FIFA WORLD CUP 2026 THEME ADD-ON - Football cursor (swap-able for a real player face image) - Dribbling-ball trail (re-uses the existing trailing cursor element) - World Cup 2026 badge with host flags + rotating player names ========================================================================== */ /* ---- Football pointer ---------------------------------------------------- */ /* A soccer-ball SVG as the actual cursor (hotspot at centre). */ html, body, a, button, input, textarea, .hover-target, * { cursor: url("data:image/svg+xml,") 15 15, auto !important; } /* ---- Dribbling-ball trail ------------------------------------------------ */ /* Re-style the existing #cursor2 ring into a football that follows the mouse */ #cursor2 { mix-blend-mode: normal !important; border: none !important; border-radius: 50% !important; background: transparent !important; box-shadow: none !important; width: 34px !important; height: 34px !important; font-size: 28px; line-height: 34px; text-align: center; } #cursor2::after { content: "\26BD"; } /* ⚽ */ #cursor2.hover::after { content: "\1F945"; } /* 🥅 goal on hover */ #cursor3 { display: none !important; } /* OPTIONAL — use a real player face instead of the ball: 1. drop a square image at images/player.png 2. add class "fifa-player" to */ body.fifa-player #cursor2 { background-image: url('../images/player.png') !important; background-size: cover !important; background-position: center !important; border: 2px solid #000 !important; } body.fifa-player #cursor2::after { content: "" !important; } /* ---- World Cup 2026 badge ------------------------------------------------ */ .fifa-badge { position: fixed; bottom: 40px; left: 24px; z-index: 250; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #ffd400; border: 3px solid #000; box-shadow: 5px 5px 0 #000; font-family: 'Space Mono', monospace, sans-serif; font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px; color: #000; transition: transform 0.15s ease, box-shadow 0.15s ease; } .fifa-badge:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #000; } .fifa-badge__txt { min-width: 122px; text-align: center; } .fifa-flags { font-size: 15px; line-height: 1; } .fifa-ball { font-size: 18px; display: inline-block; animation: fifa-spin 2.5s linear infinite; } @keyframes fifa-spin { to { transform: rotate(360deg); } } /* keep the two corner badges aligned + clear on small screens */ @media (max-width: 640px) { .fifa-badge { font-size: 10px; padding: 6px 8px; gap: 6px; bottom: 14px; left: 12px; box-shadow: 3px 3px 0 #000; } .fifa-badge__txt { min-width: 64px; } .fifa-flags { display: none; } .link-to-portfolio { bottom: 14px !important; right: 12px !important; width: 38px !important; height: 38px !important; } } /* ---- "Score a Goal" mini-game ------------------------------------------- */ .game-scoreboard { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; align-items: center; font-family: 'Space Mono', monospace; font-weight: 700; text-transform: uppercase; margin-bottom: 14px; } .game-scoreboard b { font-size: 1.3em; } .game-msg { border: 3px solid #000; background: #ffd400; padding: 4px 12px; box-shadow: 4px 4px 0 #000; } .game-msg.scored { background: #b6ff3a; } .game-msg.saved { background: #ff5da2; } .game-pitch { position: relative; height: 280px; max-width: 540px; margin: 0 auto; border: 4px solid #000; box-shadow: 8px 8px 0 #000; overflow: hidden; background: repeating-linear-gradient(90deg, #2faf54 0 46px, #29a04c 46px 92px); } /* centre spot + arc flavour */ .game-pitch::after { content: ""; position: absolute; left: 50%; bottom: -60px; width: 120px; height: 120px; transform: translateX(-50%); border: 3px solid rgba(255, 255, 255, 0.5); border-radius: 50%; } .game-goal { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 72%; height: 78px; border: 6px solid #fff; border-bottom: none; background-image: linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px); background-size: 14px 14px; } .game-keeper { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); font-size: 34px; transition: left 0.35s cubic-bezier(0.5, 1.6, 0.4, 1); z-index: 2; } .game-ball { position: absolute; top: 88%; left: 50%; font-size: 30px; transform: translate(-50%, -50%); z-index: 4; cursor: grab; touch-action: none; user-select: none; } .game-ball.pulling { cursor: grabbing; } .game-pitch.aiming { touch-action: none; } /* slingshot aim line shown while dragging the ball back */ .game-aim-line { position: absolute; height: 5px; background: repeating-linear-gradient(90deg, #fff 0 8px, transparent 8px 14px); transform-origin: left center; pointer-events: none; opacity: 0; z-index: 3; border-radius: 3px; } .game-aim-line.show { opacity: 0.95; } .game-controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; } .game-shoot-btn { min-width: 110px; } .game-shoot-btn[data-dir="center"] { background: var(--bru-pink, #ff5da2) !important; } @media (max-width: 480px) { .game-pitch { height: 230px; } .game-keeper { font-size: 28px; } .game-ball { font-size: 26px; } .game-shoot-btn { min-width: 0; flex: 1; } } /* ---- World Cup 2026 matches list ---------------------------------------- */ .match-tabs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; } .match-tab { min-width: 140px; } .match-tab.active { background: var(--bru-pink, #ff5da2) !important; } .match-note { text-align: center; font-family: 'Space Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 18px; opacity: 0.8; } .match-list { display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin: 0 auto; } .match-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; background: #fff; border: 3px solid #000; box-shadow: 5px 5px 0 #000; padding: 14px 16px; } .match-team { display: flex; align-items: center; gap: 10px; } .match-team--home { justify-content: flex-end; text-align: right; } .match-team--away { justify-content: flex-start; text-align: left; } .match-team__name { font-family: 'Archivo Black', sans-serif; font-size: 13px; text-transform: uppercase; line-height: 1.1; } .match-badge { width: 36px; height: 36px; object-fit: contain; border: 2px solid #000; background: #fff; padding: 2px; flex: none; } .match-badge--ph { display: inline-flex; align-items: center; justify-content: center; font-size: 18px; } .match-mid { display: flex; flex-direction: column; align-items: center; min-width: 90px; } .match-score { font-family: 'Archivo Black', sans-serif; font-size: 20px; background: var(--bru-yellow, #ffd400); border: 2px solid #000; padding: 2px 10px; } .match-vs { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 15px; } .match-time { font-family: 'Space Mono', monospace; font-size: 10px; margin-top: 5px; text-transform: uppercase; white-space: nowrap; text-align: center; } .match-meta { grid-column: 1 / -1; font-family: 'Space Mono', monospace; font-size: 10px; text-transform: uppercase; text-align: center; opacity: 0.78; border-top: 2px dashed currentColor; padding-top: 8px; } .match-loading, .match-empty { text-align: center; font-family: 'Space Mono', monospace; text-transform: uppercase; font-size: 12px; padding: 26px; border: 3px dashed #000; } /* dark mode */ body:not(.light) .match-row { background: #1a1a1a; border-color: #fff; box-shadow: 5px 5px 0 var(--bru-cyan, #36d3ff); color: #fff; } body:not(.light) .match-badge { border-color: #fff; } body:not(.light) .match-score { color: #000; } body:not(.light) .match-loading, body:not(.light) .match-empty { border-color: #fff; color: #fff; } @media (max-width: 560px) { .match-row { padding: 12px 10px; gap: 6px; } .match-team__name { font-size: 10px; } .match-badge { width: 26px; height: 26px; } .match-score { font-size: 16px; } .match-mid { min-width: 64px; } }