/* ========================================== EYESCODE LIVE CARD ========================================== */ .live-card { display:block; position:relative; overflow:hidden; background:#111827; border-radius:22px; text-decoration:none; color:white; border:1px solid rgba(255,255,255,.08); transition:.3s; } /* HOVER DESKTOP */ .live-card:hover { transform:translateY(-5px); border-color:#2563eb; box-shadow: 0 20px 50px rgba(37,99,235,.25); } /* ========================================== THUMB ========================================== */ .live-thumb { position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; } .live-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:.4s; } .live-card:hover .live-thumb img { transform:scale(1.05); } /* ========================================== OVERLAY ========================================== */ .live-overlay { position:absolute; inset:0; pointer-events:none; } /* ========================================== BOTAO ASSISTIR CENTRAL ========================================== */ .watch-live { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border:none; background:#2563eb; color:white; padding:9px 18px; border-radius:999px; font-size:13px; font-weight:700; cursor:pointer; pointer-events:auto; transition:.25s; } .watch-live:hover { background:#60a5fa; transform: translate(-50%,-50%) scale(1.05); } /* ========================================== AO VIVO ========================================== */ .live-badge { position:absolute; top:12px; left:12px; background:#dc2626; color:white; padding:5px 10px; border-radius:20px; font-size:12px; font-weight:800; letter-spacing:.3px; box-shadow: 0 5px 15px rgba(220,38,38,.35); } /* ========================================== ESPECTADORES ========================================== */ .live-viewers { position:absolute; top:12px; right:12px; background: rgba(0,0,0,.65); backdrop-filter:blur(8px); padding:5px 10px; border-radius:20px; font-size:12px; color:#fff; } /* ========================================== INFORMAÇÕES ========================================== */ .live-info { display:flex; align-items:center; gap:12px; padding:16px; } .live-avatar { width:42px; height:42px; border-radius:50%; object-fit:cover; border:2px solid #2563eb; flex-shrink:0; } .live-details { min-width:0; } .live-details strong { display:block; font-size:15px; color:white; } .live-game { display:block; color:#60a5fa; font-size:12px; margin-top:3px; } .live-details p { color:#94a3b8; font-size:13px; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ========================================== MOBILE ========================================== */ @media(max-width:700px){ .live-card { border-radius:20px; } .live-thumb { aspect-ratio:16 / 9; } .live-info { padding:12px; } .live-avatar { width:38px; height:38px; } .live-details strong { font-size:14px; } .live-details p { font-size:12px; } .watch-live { padding:7px 12px; font-size:12px; } .live-badge { top:10px; left:10px; font-size:11px; } .live-viewers { top:10px; right:10px; font-size:11px; } } .live-overlay { position:absolute; inset:0; pointer-events:none; } .watch-live { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } .live-badge { position: absolute !important; top: 10px !important; left: 10px !important; } /* ========================================== EYESCODE LIVE CARD DESKTOP ========================================== */ @media(min-width:701px) { .live-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap:24px; width:100%; } /* CARD */ .live-card { background:#0f172a; border-radius:22px; overflow:hidden; border:1px solid rgba(255,255,255,.06); box-shadow: 0 10px 30px rgba(0,0,0,.35); transition:.3s ease; position:relative; } .live-card:hover { transform:translateY(-6px); border-color:#2563eb; box-shadow: 0 0 20px rgba(37,99,235,.35), 0 15px 40px rgba(0,0,0,.45); } /* THUMB */ .live-thumb { width:100%; height:190px; position:relative; overflow:hidden; } .live-thumb img { width:100%; height:100%; object-fit:cover; transition:.4s; } .live-card:hover .live-thumb img { transform:scale(1.05); } /* OVERLAY */ .live-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; } /* BOTÃO PLAY */ .watch-live { background:#2563eb; color:white; border:none; border-radius:999px; padding:12px 24px; font-size:14px; font-weight:700; cursor:pointer; opacity:0; transform:scale(.8); transition:.3s; box-shadow: 0 0 20px rgba(37,99,235,.8); } .live-card:hover .watch-live { opacity:1; transform:scale(1); } /* BADGE AO VIVO */ .live-badge { position:absolute; top:14px; left:14px; background:#ef4444; color:white; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:700; } /* VIEWERS */ .live-viewers { position:absolute; top:14px; right:14px; background:rgba(0,0,0,.55); backdrop-filter:blur(5px); padding:6px 12px; border-radius:999px; color:white; font-size:12px; } /* INFORMAÇÕES */ .live-info { display:flex; align-items:center; gap:14px; padding:18px; } /* AVATAR */ .live-avatar { width:52px; height:52px; border-radius:50%; overflow:hidden; border:3px solid #2563eb; flex-shrink:0; } .live-avatar img { width:100%; height:100%; object-fit:cover; } /* TEXTO */ .live-details { display:flex; flex-direction:column; gap:5px; min-width:0; } .live-details strong { color:white; font-size:17px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .live-game { color:#60a5fa; font-size:13px; font-weight:600; } .live-details p { color:#94a3b8; font-size:13px; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } }