/* ======================================== BODY ======================================== */ body{ margin:0; padding:0; font-family:Arial,sans-serif; background-image:url('../images/9.png'); background-size:cover; background-position:center; background-repeat:no-repeat; background-attachment:fixed; color:white; } /* ======================================== CONTAINER ======================================== */ .container{ max-width:1400px; margin:0 auto; padding:20px; } /* ======================================== TOP BUTTONS ======================================== */ .top-buttons{ display:flex; justify-content:center; gap:20px; margin:30px 0; } .home-button{ display:inline-block; padding:14px 30px; border-radius:20px; text-decoration:none; font-weight:bold; color:white; background: rgba(255,255,255,0.08); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border: 1px solid rgba(255,255,255,0.20); transition:.3s; } .home-button:hover{ transform:translateY(-3px); background: rgba(255,255,255,0.15); } /* ======================================== COUNTDOWN ======================================== */ .countdown{ display:flex; justify-content:center; flex-wrap:wrap; gap:20px; margin:40px 0; } .countdown-box{ min-width:140px; padding:25px; text-align:center; border-radius:24px; background: rgba(255,255,255,0.08); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border: 1px solid rgba(255,255,255,0.20); box-shadow: 0 8px 24px rgba(0,0,0,0.15); } .countdown-box span{ display:block; font-size:52px; font-weight:bold; color:#f5d77a; text-shadow: 0 2px 6px rgba(0,0,0,0.45); } .countdown-box small{ display:block; margin-top:10px; font-size:14px; color:#ffffff; font-weight:700; text-shadow: 0 3px 8px rgba(0,0,0,0.9); } /* ======================================== LIVE MATCHES ======================================== */ .live-matches{ max-width:900px; margin:45px auto 55px; padding:28px; text-align:center; border-radius:24px; background: rgba(255,255,255,0.08); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border: 1px solid rgba(255,255,255,0.20); box-shadow: 0 8px 24px rgba(0,0,0,0.18); } .live-matches h2{ margin:0 0 22px; font-size:34px; font-weight:800; color:#ffffff; text-shadow: 0 3px 8px rgba(0,0,0,0.75); } .live-score{ display:inline-block; min-width:260px; margin:8px; padding:18px 24px; border-radius:20px; font-size:22px; font-weight:700; color:#ffffff; background: rgba(255,255,255,0.10); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border: 1px solid rgba(255,255,255,0.22); box-shadow: 0 6px 18px rgba(0,0,0,0.18); text-shadow: 0 3px 8px rgba(0,0,0,0.75); } .live-score small{ display:block; margin-top:8px; font-size:14px; color:#f5d77a; font-weight:800; } /* ======================================== TEAMS GRID ======================================== */ .teams-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap:25px; margin-top:40px; } /* ======================================== TEAM CARD ======================================== */ .team-card{ text-decoration:none; color:white; text-align:center; padding:20px; border-radius:22px; background: rgba(255,255,255,0.08); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border: 1px solid rgba(255,255,255,0.20); box-shadow: 0 8px 24px rgba(0,0,0,0.15); transition:.3s; } .team-card:hover{ transform:translateY(-5px); background: rgba(255,255,255,0.14); } .team-flag{ width:120px; max-width:100%; height:auto; border-radius:8px; margin-bottom:15px; } .team-name{ font-size:20px; font-weight:bold; margin-bottom:8px; } .team-confederation{ font-size:13px; opacity:.9; letter-spacing:1px; } /* ======================================== FOOTER ======================================== */ footer{ margin-top:60px; padding:30px; text-align:center; background: rgba(255,255,255,0.06); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top: 1px solid rgba(255,255,255,0.15); } /* ======================================== MOBILE (Aangepast voor Mobiel) ======================================== */ @media screen and (max-width:768px){ body{ background-attachment:scroll !important; background-image:none !important; background-color:#0d1b10 !important; /* Vangnet kleur voor scrollen onder de poster */ } /* Vaste, meeschalende WK-poster voor mobiel */ body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-image: url('../images/9.png') !important; background-size: contain !important; background-position: top center !important; background-repeat: no-repeat !important; } .container{ padding:14px; } .top-buttons{ gap:12px; margin:22px 0; } .home-button{ padding:12px 22px; border-radius:18px; } .countdown{ gap:12px; margin:30px 0; } .countdown-box{ min-width:100px; padding:15px; border-radius:20px; /* Extra leesbaar glas op mobiel */ background: rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; } .countdown-box span{ font-size:36px; } .live-matches{ margin:30px auto 40px; padding:20px; border-radius:22px; /* Extra leesbaar glas op mobiel */ background: rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; } .live-matches h2{ font-size:28px; } .live-score{ display:block; min-width:0; width:auto; margin:10px 0; font-size:18px; /* Extra leesbaar glas op mobiel */ background: rgba(255, 255, 255, 0.18) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; } .teams-grid{ grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap:16px; } .team-card { /* Extra leesbaar glas op mobiel */ background: rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; } }