/* ============================================ Heroes Hadera — "Velvet Table" Design Premium poker room meets Israeli community ============================================ */ /* ---------- Fonts ---------- */ /* Fonts loaded via in HTML for non-blocking render */ /* ---------- CSS Variables ---------- */ :root { color-scheme: dark; /* Warm dark surfaces */ --bg-primary: #0D0F14; --bg-secondary: #151820; --bg-card: #1B1F2B; --bg-card-hover: #222738; --bg-input: #10131A; --border-color: #2A2F3E; --border-glow: rgba(232, 35, 58, 0.18); /* Brand red — vivid, from the chip logo */ --gold: #E8233A; --gold-light: #FF3B52; --gold-dark: #C41C30; --amber: #F59E0B; --green: #10b981; --green-dark: #059669; --red: #ef4444; --red-dark: #dc2626; --blue: #3b82f6; /* Felt green — league tables only */ --felt-green: #1A3A2A; /* Premium cream highlight */ --cream: #F5E6C8; /* Text hierarchy — warm off-white */ --text-primary: #F0EDE8; --text-secondary: #9CA3AF; --text-muted: #6B7280; --font-hebrew: 'Heebo', sans-serif; --font-mono: 'JetBrains Mono', monospace; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55); --shadow-glow: 0 0 24px rgba(232, 35, 58, 0.12); --shadow-glow-strong: 0 0 40px rgba(232, 35, 58, 0.22); --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.45s cubic-bezier(0.4, 0, 0.2, 1); --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ---------- Reset & Base ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-hebrew); background: var(--bg-primary); color: var(--text-primary); direction: rtl; line-height: 1.6; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Noise texture + warm red radial glows */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 60% 50% at 20% 20%, rgba(232, 35, 58, 0.04) 0%, transparent 70%), radial-gradient(ellipse 50% 60% at 80% 80%, rgba(232, 35, 58, 0.03) 0%, transparent 70%), repeating-linear-gradient( 135deg, transparent, transparent 2px, rgba(255, 255, 255, 0.005) 2px, rgba(255, 255, 255, 0.005) 4px ); pointer-events: none; z-index: 0; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } h1, h2, h3, h4 { font-weight: 700; line-height: 1.3; } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } .mono { font-family: var(--font-mono); } /* ---------- Layout ---------- */ .container { max-width: 1100px; margin: 0 auto; padding: 0 1rem; position: relative; z-index: 1; } .page-content { padding-top: 72px; padding-bottom: 80px; position: relative; z-index: 1; } /* Hero page removes top padding so hero is full-viewport */ .page-content.hero-page { padding-top: 0; } .grid-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } } .grid-3 { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { .grid-3 { grid-template-columns: 1fr 1fr 1fr; } } .grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 768px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } } /* ---------- Section Titles ---------- */ .section-title { font-size: 1.35rem; font-weight: 800; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.6rem; } .section-title::before { content: '♠'; color: var(--gold); font-size: 1.1em; filter: drop-shadow(0 0 6px rgba(232, 35, 58, 0.5)); } /* ---------- Navbar ---------- */ .navbar { position: fixed; top: 0; left: 0; right: 0; height: 72px; z-index: 1000; transition: background var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition-slow); background: transparent; border-bottom: 1px solid transparent; } /* Solid state — on scroll or on non-hero pages */ .navbar.scrolled { background: rgba(13, 15, 20, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: var(--border-color); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4); } .navbar .container { display: flex; align-items: center; justify-content: space-between; height: 100%; } .navbar-brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 1.15rem; color: var(--text-primary); transition: color var(--transition); } .navbar-brand:hover { color: var(--gold-light); } .navbar-brand .logo-icon { font-size: 1.5rem; } .navbar-brand .logo-img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 12px rgba(232, 35, 58, 0.3); } .navbar-links { display: none; gap: 1.75rem; align-items: center; } .navbar-links a { color: var(--text-secondary); font-weight: 500; font-size: 0.9rem; transition: color var(--transition); position: relative; padding-bottom: 4px; } /* Glowing red dot underline for active link */ .navbar-links a.active::after { content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 8px var(--gold), 0 0 16px rgba(232, 35, 58, 0.4); } .navbar-links a:hover, .navbar-links a.active { color: var(--gold); } #auth-nav { display: flex; align-items: center; } @media (min-width: 768px) { .navbar-links { display: flex; } } /* ---------- Mobile Bottom Nav ---------- */ .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(13, 15, 20, 0.98), rgba(21, 24, 32, 0.96)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid rgba(232, 35, 58, 0.15); z-index: 1000; padding: 0.5rem 0; padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0)); } .bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; color: var(--text-muted); font-size: 0.7rem; font-weight: 500; padding: 0.3rem 0; transition: color var(--transition), transform var(--transition); position: relative; } .bottom-nav a .nav-icon { font-size: 1.3rem; transition: transform var(--transition); } .bottom-nav a:hover .nav-icon { transform: scale(1.15); } /* Red top-bar indicator for active */ .bottom-nav a.active::before { content: ''; position: absolute; top: -0.5rem; left: 25%; right: 25%; height: 3px; background: var(--gold); border-radius: 0 0 3px 3px; box-shadow: 0 2px 8px rgba(232, 35, 58, 0.5); } .bottom-nav a:hover, .bottom-nav a.active { color: var(--gold); } @media (min-width: 768px) { .bottom-nav { display: none; } } /* ---------- Cards ---------- */ .card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 1.5rem; transition: transform var(--transition), background-color var(--transition), box-shadow var(--transition), border-color var(--transition), opacity var(--transition); position: relative; overflow: hidden; } /* Right-edge red accent bar (RTL) */ .card::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 3px; background: var(--gold); opacity: 0; transition: opacity var(--transition); } .card:hover { border-color: rgba(232, 35, 58, 0.3); box-shadow: var(--shadow-glow), 0 4px 20px rgba(0, 0, 0, 0.3); transform: translateY(-4px); } .card:hover::before { opacity: 1; } .card-glow { border-color: rgba(232, 35, 58, 0.2); box-shadow: var(--shadow-glow); } .card-glow::before { opacity: 1; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border: none; border-radius: var(--radius-md); font-family: var(--font-hebrew); font-size: 1rem; font-weight: 600; cursor: pointer; transition: transform var(--transition), background-color var(--transition), box-shadow var(--transition), border-color var(--transition), opacity var(--transition); text-decoration: none; line-height: 1.4; position: relative; overflow: hidden; } .btn:active { transform: scale(0.97); } /* Sheen sweep animation on hover */ .btn::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent); transition: left 0.5s ease; } .btn:hover::after { left: 100%; } /* Flat vivid red (not gradient) */ .btn-gold { background: var(--gold); color: #fff; box-shadow: 0 4px 18px rgba(232, 35, 58, 0.35); } .btn-gold:hover { background: var(--gold-light); box-shadow: 0 6px 24px rgba(232, 35, 58, 0.45); color: #fff; transform: translateY(-2px); } .btn-green { background: var(--green); color: #fff; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); } .btn-green:hover { background: var(--green-dark); box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4); color: #fff; transform: translateY(-2px); } .btn-red { background: var(--red); color: #fff; } .btn-red:hover { background: var(--red-dark); color: #fff; transform: translateY(-2px); } .btn-outline { background: transparent; color: var(--text-primary); border: 1px solid var(--border-color); } .btn-outline:hover { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 12px rgba(232, 35, 58, 0.1); } .btn-ghost { background: transparent; color: var(--text-secondary); } .btn-ghost:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); } .btn-sm { padding: 0.4rem 1rem; font-size: 0.85rem; } .btn-lg { padding: 1rem 2.5rem; font-size: 1.15rem; border-radius: var(--radius-lg); } .btn-xl { padding: 1.2rem 3rem; font-size: 1.25rem; border-radius: var(--radius-lg); } .btn-block { width: 100%; } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; } .btn:disabled::after { display: none; } /* ---------- Social Login Buttons ---------- */ .btn-google { background: #fff; color: #333; border: 1px solid #ddd; font-weight: 600; } .btn-google:hover { background: #f5f5f5; color: #333; } .btn-facebook { background: #1877f2; color: #fff; font-weight: 600; } .btn-facebook:hover { background: #166fe5; color: #fff; } /* ---------- Hero Section ---------- */ .hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: 5rem 0 3rem; } .hero-bg-layer { position: absolute; inset: 0; background: url('../images/hero-bg.jpg') center center / cover no-repeat; will-change: transform; z-index: 0; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(13, 15, 20, 0.9) 0%, rgba(13, 15, 20, 0.5) 30%, rgba(13, 15, 20, 0.4) 50%, rgba(13, 15, 20, 0.6) 70%, rgba(13, 15, 20, 0.95) 100% ), radial-gradient(ellipse at center 40%, rgba(232, 35, 58, 0.08) 0%, transparent 60%); z-index: 1; pointer-events: none; } /* Floating animated card suits */ .hero-suits { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; } .floating-suit { position: absolute; font-size: 4rem; opacity: 0.04; animation: floatSuit 20s ease-in-out infinite; color: var(--gold); } .floating-suit[data-suit="spade"] { top: 15%; right: 10%; animation-delay: 0s; font-size: 5rem; } .floating-suit[data-suit="heart"] { top: 60%; right: 85%; animation-delay: -5s; font-size: 3.5rem; opacity: 0.05; } .floating-suit[data-suit="diamond"] { top: 75%; right: 15%; animation-delay: -10s; font-size: 3rem; } .floating-suit[data-suit="club"] { top: 25%; right: 75%; animation-delay: -15s; font-size: 4.5rem; opacity: 0.03; } @keyframes floatSuit { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-20px) rotate(5deg); } 50% { transform: translateY(-10px) rotate(-3deg); } 75% { transform: translateY(-25px) rotate(4deg); } } /* Hero content container */ .hero .container, .hero .hero-content { position: relative; z-index: 3; } /* Pulsing chip logo */ .hero-chip-logo { margin-bottom: 1.5rem; display: inline-block; } .hero-chip-img { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; animation: chipPulse 3s ease-in-out infinite; box-shadow: 0 0 30px rgba(232, 35, 58, 0.4), 0 0 60px rgba(232, 35, 58, 0.15); } @keyframes chipPulse { 0%, 100% { box-shadow: 0 0 30px rgba(232, 35, 58, 0.4), 0 0 60px rgba(232, 35, 58, 0.15); transform: scale(1); } 50% { box-shadow: 0 0 40px rgba(232, 35, 58, 0.55), 0 0 80px rgba(232, 35, 58, 0.2); transform: scale(1.05); } } .hero-badge { display: inline-block; background: rgba(232, 35, 58, 0.12); color: var(--gold); padding: 0.45rem 1.2rem; border-radius: 50px; font-size: 0.85rem; font-weight: 600; margin-bottom: 1rem; border: 1px solid rgba(232, 35, 58, 0.25); letter-spacing: 0.5px; } .hero-title { font-size: 2.5rem; font-weight: 900; margin-bottom: 0.5rem; background: linear-gradient(135deg, #fff 0%, var(--cream) 50%, #fff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: none; } .hero-subtitle { font-size: 1.15rem; color: var(--text-secondary); margin-bottom: 2rem; } /* Scroll-down indicator */ .hero-scroll-hint { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 3; animation: scrollBounce 2s ease-in-out infinite; } .hero-scroll-hint span { font-size: 1.5rem; color: rgba(240, 237, 232, 0.4); display: block; } @keyframes scrollBounce { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.4; } 50% { transform: translateX(-50%) translateY(10px); opacity: 0.8; } } @media (min-width: 768px) { .hero { padding: 6rem 0 4rem; } .hero-title { font-size: 3.5rem; } .hero-chip-img { width: 110px; height: 110px; } .floating-suit { font-size: 6rem; } .floating-suit[data-suit="spade"] { font-size: 7rem; } .floating-suit[data-suit="heart"] { font-size: 5rem; } .floating-suit[data-suit="diamond"] { font-size: 4.5rem; } .floating-suit[data-suit="club"] { font-size: 6.5rem; } } /* ---------- Countdown Timer ---------- */ .countdown { display: flex; justify-content: center; gap: 0.5rem; margin: 1.5rem 0; direction: ltr; align-items: center; } .countdown-item { display: flex; flex-direction: column; align-items: center; } /* Circular rings with red border glow */ .countdown-value { font-family: var(--font-mono); font-size: 1.8rem; font-weight: 700; color: var(--gold); background: rgba(21, 24, 32, 0.8); border: 2px solid rgba(232, 35, 58, 0.35); border-radius: 50%; width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1; box-shadow: 0 0 15px rgba(232, 35, 58, 0.15), inset 0 0 10px rgba(0, 0, 0, 0.3); } .countdown-label { font-size: 0.65rem; color: var(--text-muted); margin-top: 0.4rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } /* Colon separators between countdown items */ .countdown-item + .countdown-item::before { content: ':'; position: absolute; margin-right: -0.25rem; color: rgba(232, 35, 58, 0.4); font-size: 1.5rem; font-weight: 700; font-family: var(--font-mono); } .countdown-item { position: relative; } @media (min-width: 768px) { .countdown { gap: 1rem; } .countdown-value { font-size: 2.2rem; width: 85px; height: 85px; border-width: 3px; } .countdown-label { font-size: 0.7rem; } } /* ---------- Tournament Card ---------- */ .tournament-card { cursor: pointer; } /* Red top stripe */ .tournament-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold)); opacity: 0.7; } .tournament-card .card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; } .tournament-card .card-title { font-size: 1.15rem; font-weight: 700; } .tournament-card .card-meta { display: flex; flex-wrap: wrap; gap: 1rem; color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1rem; } .tournament-card .card-meta-item { display: flex; align-items: center; gap: 0.3rem; } .tournament-card .card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid var(--border-color); } /* Larger glowing entry fee */ .tournament-card .entry-fee { font-family: var(--font-mono); font-size: 1.35rem; font-weight: 700; color: var(--gold); text-shadow: 0 0 10px rgba(232, 35, 58, 0.3); } .tournament-card .players-count { color: var(--text-secondary); font-size: 0.9rem; } /* ---------- Info Grid ---------- */ .info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.5rem 0; } /* Glassmorphic items */ .info-item { background: rgba(27, 31, 43, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(42, 47, 62, 0.5); border-radius: var(--radius-md); padding: 1rem; text-align: center; transition: transform var(--transition), background-color var(--transition), box-shadow var(--transition), border-color var(--transition), opacity var(--transition); } .info-item:hover { border-color: rgba(232, 35, 58, 0.2); background: rgba(27, 31, 43, 0.8); } /* Emoji in colored circle backgrounds */ .info-item .info-icon { font-size: 1.5rem; margin-bottom: 0.4rem; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(232, 35, 58, 0.1); } .info-item .info-value { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700; color: var(--gold); } .info-item .info-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.2rem; } @media (min-width: 768px) { .info-grid { grid-template-columns: repeat(4, 1fr); } } /* ---------- Badges ---------- */ .badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 50px; font-size: 0.75rem; font-weight: 600; border: 1px solid transparent; } .badge-upcoming { background: rgba(59, 130, 246, 0.12); color: var(--blue); border-color: rgba(59, 130, 246, 0.2); } .badge-active { background: rgba(16, 185, 129, 0.12); color: var(--green); border-color: rgba(16, 185, 129, 0.2); } .badge-completed { background: rgba(148, 163, 184, 0.12); color: var(--text-muted); border-color: rgba(148, 163, 184, 0.15); } .badge-cancelled { background: rgba(239, 68, 68, 0.12); color: var(--red); border-color: rgba(239, 68, 68, 0.2); } .badge-gold { background: rgba(232, 35, 58, 0.12); color: var(--gold); border-color: rgba(232, 35, 58, 0.2); } /* Glow pulse on early-bird */ .badge-early-bird { background: rgba(16, 185, 129, 0.12); color: var(--green); border: 1px solid rgba(16, 185, 129, 0.3); animation: earlyBirdPulse 2s ease-in-out infinite; } @keyframes earlyBirdPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.3); } 50% { box-shadow: 0 0 8px 2px rgba(16, 185, 129, 0.15); } } /* ---------- Blinds Table ---------- */ .blinds-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .blinds-table th { background: var(--bg-secondary); color: var(--text-muted); font-weight: 600; padding: 0.6rem 0.8rem; text-align: right; border-bottom: 1px solid var(--border-color); font-size: 0.8rem; } .blinds-table td { padding: 0.6rem 0.8rem; border-bottom: 1px solid rgba(42, 47, 62, 0.4); } .blinds-table tr:hover td { background: rgba(232, 35, 58, 0.03); } .blinds-table .mono { font-size: 0.8rem; } .blinds-table .break-row { background: rgba(16, 185, 129, 0.05); color: var(--green); font-weight: 600; text-align: center; } /* ---------- Registered Players List ---------- */ .players-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .player-chip { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 50px; padding: 0.3rem 0.8rem; font-size: 0.85rem; } .player-chip img { width: 24px; height: 24px; border-radius: 50%; } /* ---------- League Table ---------- */ .league-table { width: 100%; border-collapse: collapse; } /* Felt-green header */ .league-table th { background: var(--felt-green); color: rgba(240, 237, 232, 0.75); font-weight: 600; padding: 0.75rem 1rem; text-align: right; border-bottom: 2px solid rgba(26, 58, 42, 0.8); font-size: 0.85rem; white-space: nowrap; } .league-table td { padding: 0.75rem 1rem; border-bottom: 1px solid rgba(42, 47, 62, 0.4); vertical-align: middle; } /* Red hover on rows */ .league-table tr:hover td { background: rgba(232, 35, 58, 0.04); } /* Glowing rank numbers */ .league-table .rank-cell { font-family: var(--font-mono); font-weight: 700; color: var(--gold); width: 40px; text-shadow: 0 0 8px rgba(232, 35, 58, 0.3); } /* Top-3 tinted rows */ .league-table .rank-1 { color: #ffd700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.4); } .league-table .rank-2 { color: #c0c0c0; text-shadow: 0 0 8px rgba(192, 192, 192, 0.3); } .league-table .rank-3 { color: #cd7f32; text-shadow: 0 0 8px rgba(205, 127, 50, 0.3); } /* Top-3 row backgrounds */ .league-table tbody tr:nth-child(1) td { background: rgba(255, 215, 0, 0.03); } .league-table tbody tr:nth-child(2) td { background: rgba(192, 192, 192, 0.02); } .league-table tbody tr:nth-child(3) td { background: rgba(205, 127, 50, 0.02); } .league-table .player-cell { display: flex; align-items: center; gap: 0.5rem; } .league-table .player-cell img { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border-color); } .league-table .points-cell { font-family: var(--font-mono); font-weight: 600; } .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); border: 1px solid var(--border-color); } /* ---------- Forms ---------- */ .form-group { margin-bottom: 1.25rem; } .form-label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; color: var(--text-secondary); } .form-input, .form-select, .form-textarea { width: 100%; padding: 0.75rem 1rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary); font-family: var(--font-hebrew); font-size: 1rem; transition: border-color var(--transition), box-shadow var(--transition); direction: rtl; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); } /* Animated red focus ring with outer glow */ .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--gold); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(232, 35, 58, 0.12), 0 0 12px rgba(232, 35, 58, 0.08); } .form-textarea { min-height: 100px; resize: vertical; } .form-input::placeholder { color: var(--text-muted); } .form-checkbox { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; } .form-checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gold); } /* ---------- Stats Cards (Admin) ---------- */ .stat-card { text-align: center; padding: 1.5rem; } .stat-card .stat-value { font-family: var(--font-mono); font-size: 2rem; font-weight: 700; color: var(--gold); } .stat-card .stat-label { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.3rem; } .stat-card .stat-change { font-size: 0.8rem; margin-top: 0.3rem; } .stat-card .stat-change.positive { color: var(--green); } .stat-card .stat-change.negative { color: var(--red); } /* ---------- User Menu ---------- */ .user-menu { position: relative; } .user-menu-btn { display: flex; align-items: center; gap: 0.5rem; background: none; border: 1px solid var(--border-color); border-radius: 50px; padding: 0.3rem 0.8rem 0.3rem 0.4rem; color: var(--text-primary); cursor: pointer; font-family: var(--font-hebrew); font-size: 0.85rem; transition: border-color var(--transition); } .user-menu-btn:hover { border-color: var(--gold); } .user-avatar { width: 28px; height: 28px; border-radius: 50%; } .user-avatar-placeholder { font-size: 1.2rem; } .user-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-dropdown { position: absolute; top: calc(100% + 8px); left: 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); min-width: 160px; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: transform var(--transition), background-color var(--transition), box-shadow var(--transition), border-color var(--transition), opacity var(--transition), visibility var(--transition); z-index: 1001; } .user-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); } .user-dropdown a, .user-dropdown button { display: block; width: 100%; padding: 0.6rem 1rem; color: var(--text-secondary); font-family: var(--font-hebrew); font-size: 0.9rem; text-align: right; background: none; border: none; cursor: pointer; transition: transform var(--transition), background-color var(--transition), box-shadow var(--transition), border-color var(--transition), opacity var(--transition); } .user-dropdown a:hover, .user-dropdown button:hover { color: var(--gold); background: rgba(232, 35, 58, 0.05); } /* ---------- Toast Notifications ---------- */ .toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--bg-card); color: var(--text-primary); padding: 0.75rem 1.5rem; border-radius: var(--radius-md); border: 1px solid var(--border-color); box-shadow: var(--shadow-lg); font-size: 0.9rem; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; z-index: 2000; max-width: 90vw; text-align: center; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast-success { border-color: var(--green); } .toast-error { border-color: var(--red); } .toast-info { border-color: var(--blue); } /* ---------- Loading Spinner ---------- */ .loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; color: var(--text-muted); } .spinner { width: 40px; height: 40px; border: 3px solid var(--border-color); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 1rem; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- Empty State ---------- */ .empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); } .empty-state .empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; } .empty-state h3 { color: var(--text-secondary); margin-bottom: 0.5rem; } /* ---------- Poker Decorations ---------- */ .suit-decoration { position: absolute; font-size: 8rem; opacity: 0.02; pointer-events: none; user-select: none; color: var(--gold); } .chip-icon { display: inline-block; width: 20px; height: 20px; background: radial-gradient(circle, var(--gold) 40%, var(--gold-dark) 50%, var(--gold) 55%, transparent 60%); border-radius: 50%; border: 2px solid var(--gold); position: relative; } /* Chip-stripe section divider */ .section-divider { height: 4px; background: repeating-linear-gradient( 90deg, var(--gold) 0px, var(--gold) 8px, transparent 8px, transparent 16px, var(--gold-dark) 16px, var(--gold-dark) 24px, transparent 24px, transparent 32px ); opacity: 0.3; margin: 2rem 0; border-radius: 2px; } /* ---------- Early Bird Banner ---------- */ .early-bird-banner { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05)); border: 1px solid rgba(16, 185, 129, 0.25); border-radius: var(--radius-md); padding: 1rem 1.25rem; display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0; animation: earlyBirdPulse 2.5s ease-in-out infinite; } .early-bird-banner .eb-icon { font-size: 1.5rem; } .early-bird-banner .eb-text { color: var(--green); font-weight: 600; font-size: 0.9rem; } .early-bird-banner .eb-bonus { font-family: var(--font-mono); font-weight: 700; } /* ---------- Registration CTA ---------- */ .register-cta { background: linear-gradient(135deg, rgba(232, 35, 58, 0.08), rgba(232, 35, 58, 0.02)); border: 1px solid rgba(232, 35, 58, 0.2); border-radius: var(--radius-xl); padding: 2rem; text-align: center; margin: 2rem 0; } .register-cta h3 { font-size: 1.25rem; margin-bottom: 0.5rem; } .register-cta p { color: var(--text-secondary); margin-bottom: 1.5rem; } /* ---------- About Section ---------- */ .about-section { padding: 3rem 0; } .about-features { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; } /* Card-like items with icon circle bg */ .about-feature { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); transition: transform var(--transition), background-color var(--transition), box-shadow var(--transition), border-color var(--transition), opacity var(--transition); } .about-feature:hover { transform: translateX(-4px); border-color: rgba(232, 35, 58, 0.25); box-shadow: var(--shadow-glow); } .about-feature .feature-icon { font-size: 1.75rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: rgba(232, 35, 58, 0.1); } .about-feature .feature-text h4 { margin-bottom: 0.3rem; } .about-feature .feature-text p { color: var(--text-secondary); font-size: 0.9rem; } @media (min-width: 768px) { .about-features { grid-template-columns: 1fr 1fr; } } /* ---------- Footer ---------- */ .footer { background: var(--bg-secondary); border-top: none; padding: 2rem 0; text-align: center; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 60px; position: relative; } /* Red gradient line accent on top */ .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), var(--gold-light), var(--gold), transparent); opacity: 0.6; } @media (min-width: 768px) { .footer { margin-bottom: 0; } } .footer a { color: var(--gold); } /* ---------- Login Page ---------- */ .login-container { max-width: 400px; margin: 0 auto; padding: 2rem 1rem; } .login-card { padding: 2.5rem; text-align: center; } .login-card h1 { margin-bottom: 0.5rem; font-size: 1.5rem; } .login-card .login-subtitle { color: var(--text-secondary); margin-bottom: 2rem; } .login-divider { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; color: var(--text-muted); font-size: 0.85rem; } .login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-color); } .social-buttons { display: flex; flex-direction: column; gap: 0.75rem; } .social-buttons .btn { font-size: 1rem; padding: 0.85rem; } /* ---------- Profile Page ---------- */ .profile-header { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem; } .profile-avatar { width: 80px; height: 80px; border-radius: 50%; border: 3px solid var(--gold); object-fit: cover; box-shadow: 0 0 15px rgba(232, 35, 58, 0.2); } .profile-info h1 { font-size: 1.5rem; margin-bottom: 0.2rem; } .profile-info .profile-email { color: var(--text-muted); font-size: 0.9rem; } .profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; } .profile-stat { text-align: center; padding: 1rem; background: var(--bg-secondary); border-radius: var(--radius-md); } .profile-stat .stat-number { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; color: var(--gold); } .profile-stat .stat-text { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.2rem; } /* ---------- Admin Layout ---------- */ .admin-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } .admin-sidebar { display: none; } .admin-sidebar a { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); color: var(--text-secondary); font-weight: 500; transition: transform var(--transition), background-color var(--transition), box-shadow var(--transition), border-color var(--transition), opacity var(--transition); } .admin-sidebar a:hover, .admin-sidebar a.active { background: rgba(232, 35, 58, 0.1); color: var(--gold); } .admin-sidebar a .sidebar-icon { font-size: 1.15rem; } @media (min-width: 1024px) { .admin-layout { grid-template-columns: 220px 1fr; } .admin-sidebar { display: block; position: sticky; top: 80px; height: calc(100vh - 80px); padding-top: 1rem; } } /* Admin mobile tabs */ .admin-tabs { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.5rem; margin-bottom: 1.5rem; -webkit-overflow-scrolling: touch; } .admin-tabs a { flex-shrink: 0; padding: 0.5rem 1rem; border-radius: 50px; background: var(--bg-secondary); color: var(--text-secondary); font-size: 0.85rem; font-weight: 500; white-space: nowrap; border: 1px solid var(--border-color); } .admin-tabs a:hover, .admin-tabs a.active { background: rgba(232, 35, 58, 0.1); color: var(--gold); border-color: rgba(232, 35, 58, 0.3); } @media (min-width: 1024px) { .admin-tabs { display: none; } } /* ---------- Modal ---------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 1rem; opacity: 0; visibility: hidden; transition: transform var(--transition), background-color var(--transition), box-shadow var(--transition), border-color var(--transition), opacity var(--transition), visibility var(--transition); } .modal-overlay.show { opacity: 1; visibility: visible; } .modal { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-xl); width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto; transition: transform var(--transition-spring); } /* Desktop: spring scale-up */ .modal-overlay .modal { transform: scale(0.9); } .modal-overlay.show .modal { transform: scale(1); } /* Mobile: drawer slide-up */ @media (max-width: 767px) { .modal-overlay { align-items: flex-end; padding: 0; } .modal { max-width: 100%; max-height: 85vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; transform: translateY(100%); } .modal-overlay.show .modal { transform: translateY(0); } /* Grab handle for mobile drawer */ .modal::before { content: ''; display: block; width: 36px; height: 4px; background: var(--border-color); border-radius: 2px; margin: 0.75rem auto 0; } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-color); } .modal-header h3 { font-size: 1.15rem; } .modal-close { background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; padding: 0; line-height: 1; } .modal-close:hover { color: var(--text-primary); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; gap: 0.75rem; justify-content: flex-start; padding: 1.25rem 1.5rem; border-top: 1px solid var(--border-color); } /* ---------- Tabs / Filters ---------- */ .tab-filters { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.25rem; } .tab-filter { flex-shrink: 0; padding: 0.5rem 1.25rem; border-radius: 50px; background: var(--bg-secondary); color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; border: 1px solid var(--border-color); cursor: pointer; transition: transform var(--transition), background-color var(--transition), box-shadow var(--transition), border-color var(--transition), opacity var(--transition); font-family: var(--font-hebrew); } .tab-filter:hover, .tab-filter.active { background: rgba(232, 35, 58, 0.1); color: var(--gold); border-color: rgba(232, 35, 58, 0.3); } /* ---------- Pagination ---------- */ .pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2rem; } .pagination button { padding: 0.5rem 0.75rem; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-secondary); font-family: var(--font-mono); font-size: 0.85rem; cursor: pointer; transition: transform var(--transition), background-color var(--transition), box-shadow var(--transition), border-color var(--transition), opacity var(--transition); } .pagination button:hover, .pagination button.active { border-color: var(--gold); color: var(--gold); } /* ---------- Animations ---------- */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate-in { animation: fadeInUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .animate-delay-1 { animation-delay: 0.15s; opacity: 0; } .animate-delay-2 { animation-delay: 0.3s; opacity: 0; } .animate-delay-3 { animation-delay: 0.45s; opacity: 0; } .animate-delay-4 { animation-delay: 0.6s; opacity: 0; } /* ---------- Scrollbar ---------- */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } /* Red-tinted thumb */ ::-webkit-scrollbar-thumb { background: rgba(232, 35, 58, 0.25); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(232, 35, 58, 0.4); } /* ---------- Selection ---------- */ ::selection { background: rgba(232, 35, 58, 0.3); color: var(--text-primary); } /* ---------- Search ---------- */ .search-box { position: relative; margin-bottom: 1.5rem; } .search-box .form-input { padding-right: 2.75rem; } .search-box .search-icon { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } /* ---------- Notification Banner ---------- */ .notification-banner { background: linear-gradient(135deg, rgba(232, 35, 58, 0.08), rgba(232, 35, 58, 0.03)); border: 1px solid rgba(232, 35, 58, 0.2); border-radius: var(--radius-md); padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } .notification-banner p { font-size: 0.9rem; color: var(--text-secondary); } /* ---------- Responsive Utility ---------- */ .hide-mobile { display: none; } .hide-desktop { display: block; } @media (min-width: 768px) { .hide-mobile { display: revert; } .hide-desktop { display: none; } h1 { font-size: 2.5rem; } h2 { font-size: 1.75rem; } .container { padding: 0 2rem; } } /* ---------- Winners Gallery ---------- */ /* Fade-edge scroll container */ .winners-scroll { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; position: relative; mask-image: linear-gradient(to left, transparent, black 3rem, black calc(100% - 3rem), transparent); -webkit-mask-image: linear-gradient(to left, transparent, black 3rem, black calc(100% - 3rem), transparent); } .winners-scroll::-webkit-scrollbar { height: 4px; } .winner-card { flex: 0 0 220px; scroll-snap-align: start; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--transition), background-color var(--transition), box-shadow var(--transition), border-color var(--transition), opacity var(--transition); position: relative; } /* Zoom+lift hover */ .winner-card:hover { border-color: rgba(232, 35, 58, 0.3); box-shadow: var(--shadow-glow), 0 8px 24px rgba(0, 0, 0, 0.3); transform: translateY(-4px) scale(1.02); } .winner-card .winner-photo { width: 100%; height: 180px; object-fit: cover; display: block; transition: transform var(--transition-slow); } .winner-card:hover .winner-photo { transform: scale(1.05); } .winner-card .winner-photo-placeholder { width: 100%; height: 180px; display: flex; align-items: center; justify-content: center; background: var(--bg-secondary); font-size: 3rem; color: var(--gold); } .winner-card .winner-info { padding: 1rem; } .winner-card .winner-name { font-weight: 700; font-size: 1rem; margin-bottom: 0.2rem; } .winner-card .winner-tournament { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.5rem; } .winner-card .winner-prize { font-family: var(--font-mono); font-weight: 700; color: var(--gold); font-size: 1rem; } /* Position badge overlay on photo */ .winner-card .winner-position { position: absolute; top: 0.75rem; right: 0.75rem; background: rgba(232, 35, 58, 0.9); color: #fff; padding: 0.2rem 0.6rem; border-radius: 50px; font-size: 0.75rem; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); z-index: 1; } /* Winners Grid (full page) */ .winners-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 768px) { .winners-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .winners-grid { grid-template-columns: repeat(4, 1fr); } } .winners-grid .winner-card { flex: none; } /* ---------- Photo Gallery ---------- */ .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } @media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } } .gallery-item { position: relative; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; background: var(--bg-secondary); transition: transform var(--transition), box-shadow var(--transition); } /* Varied aspect ratios — every 5th item taller */ .gallery-item:nth-child(5n) { grid-row: span 2; aspect-ratio: auto; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-slow); } /* Polaroid tilt+zoom hover */ .gallery-item:hover { transform: rotate(-1deg) scale(1.03); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); z-index: 2; } .gallery-item:hover img { transform: scale(1.08); } /* Slide-up caption */ .gallery-item .gallery-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem 0.75rem 0.75rem; background: linear-gradient(transparent, rgba(0, 0, 0, 0.85)); color: #fff; font-size: 0.8rem; transform: translateY(100%); transition: transform var(--transition); } .gallery-item:hover .gallery-caption { transform: translateY(0); } /* ---------- Lightbox ---------- */ /* Frosted glass backdrop */ .lightbox-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 3000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: transform var(--transition), background-color var(--transition), box-shadow var(--transition), border-color var(--transition), opacity var(--transition), visibility var(--transition); } .lightbox-overlay.show { opacity: 1; visibility: visible; } /* Rounded shadow image */ .lightbox-overlay .lightbox-image { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: var(--radius-lg); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); } .lightbox-overlay .lightbox-close { position: absolute; top: 1rem; left: 1rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); color: #fff; font-size: 1.5rem; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform var(--transition), background-color var(--transition), box-shadow var(--transition), border-color var(--transition), opacity var(--transition); z-index: 3001; } .lightbox-overlay .lightbox-close:hover { background: var(--gold); border-color: var(--gold); } /* Red-hover nav buttons */ .lightbox-overlay .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); color: #fff; font-size: 1.5rem; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform var(--transition), background-color var(--transition), box-shadow var(--transition), border-color var(--transition), opacity var(--transition); z-index: 3001; } .lightbox-overlay .lightbox-nav:hover { background: var(--gold); border-color: var(--gold); } /* RTL-aware: prev on right, next on left */ .lightbox-overlay .lightbox-prev { right: 1rem; } .lightbox-overlay .lightbox-next { left: 1rem; } .lightbox-overlay .lightbox-caption { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: #fff; text-align: center; font-size: 0.9rem; max-width: 80vw; } /* Pill counter */ .lightbox-overlay .lightbox-counter { position: absolute; top: 1.2rem; right: 1rem; color: rgba(255, 255, 255, 0.7); font-family: var(--font-mono); font-size: 0.8rem; background: rgba(0, 0, 0, 0.4); padding: 0.3rem 0.8rem; border-radius: 50px; } /* ---------- Image Upload Area ---------- */ .image-upload-area { border: 2px dashed var(--border-color); border-radius: var(--radius-lg); padding: 2rem; text-align: center; color: var(--text-muted); cursor: pointer; transition: transform var(--transition), background-color var(--transition), box-shadow var(--transition), border-color var(--transition), opacity var(--transition); position: relative; } .image-upload-area:hover, .image-upload-area.dragover { border-color: var(--gold); background: rgba(232, 35, 58, 0.05); color: var(--gold); } .image-upload-area .upload-icon { font-size: 2.5rem; margin-bottom: 0.75rem; } .image-upload-area .upload-text { font-size: 0.9rem; margin-bottom: 0.3rem; } .image-upload-area .upload-hint { font-size: 0.8rem; color: var(--text-muted); } .image-upload-area input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } /* Upload progress */ .upload-progress { width: 100%; height: 6px; background: var(--bg-secondary); border-radius: 3px; overflow: hidden; margin-top: 1rem; } .upload-progress .progress-bar { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 3px; transition: width 0.3s ease; width: 0%; } /* Upload preview thumbnails */ .upload-previews { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .upload-preview-item { width: 80px; height: 80px; border-radius: var(--radius-sm); overflow: hidden; position: relative; } .upload-preview-item img { width: 100%; height: 100%; object-fit: cover; } /* ---------- Bottom Nav 6 Items Fix ---------- */ @media (max-width: 374px) { .bottom-nav a { font-size: 0.6rem; padding: 0.2rem 0; } .bottom-nav a .nav-icon { font-size: 1.1rem; } } .bottom-nav a { min-width: 0; } /* ---------- Admin Gallery List ---------- */ .admin-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } @media (min-width: 768px) { .admin-gallery-grid { grid-template-columns: repeat(4, 1fr); } } .admin-gallery-item { position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; } .admin-gallery-item img { width: 100%; height: 100%; object-fit: cover; } .admin-gallery-item .delete-btn { position: absolute; top: 0.3rem; left: 0.3rem; background: rgba(239, 68, 68, 0.9); border: none; color: #fff; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity var(--transition); } .admin-gallery-item:hover .delete-btn, .admin-gallery-item .delete-btn:focus { opacity: 1; } /* ============================================ LIVE BLINDS TIMER ============================================ */ /* Timer card (public tournament page) */ .live-timer-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 1.5rem; margin: 2rem 0; position: relative; overflow: hidden; } .live-timer-card::before { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); } .live-timer-card.timer-break::before { background: linear-gradient(90deg, var(--green), var(--green-dark)); } .live-badge { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(232, 35, 58, 0.15); color: var(--gold-light); padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; margin-bottom: 1rem; } .live-badge .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: livePulse 1.5s ease-in-out infinite; } @keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } .timer-level-info { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; } .timer-level-label { font-size: 1rem; font-weight: 600; color: var(--text-primary); } .timer-blinds { font-family: var(--font-mono); font-size: 1rem; color: var(--cream); font-weight: 600; } .timer-clock { font-family: var(--font-mono); font-size: 3.5rem; font-weight: 700; color: var(--text-primary); text-align: center; letter-spacing: 0.05em; padding: 0.5rem 0; transition: color 0.3s; } .timer-clock.timer-urgent { color: var(--gold); animation: urgentPulse 1s ease-in-out infinite; } @keyframes urgentPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .timer-next-level { text-align: center; color: var(--text-muted); font-size: 0.85rem; margin-top: 0.25rem; } .timer-next-level strong { color: var(--text-secondary); } .timer-fullscreen-link { display: block; text-align: center; margin-top: 1rem; color: var(--text-muted); font-size: 0.85rem; text-decoration: none; transition: color var(--transition); } .timer-fullscreen-link:hover { color: var(--gold-light); } /* Break styling */ .timer-break .timer-clock { color: var(--green); } .timer-break .timer-level-label { color: var(--green); } /* Timer progress bar */ .timer-progress { width: 100%; height: 4px; background: var(--bg-input); border-radius: 2px; margin-top: 0.75rem; overflow: hidden; } .timer-progress-bar { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 2px; transition: width 1s linear; } .timer-break .timer-progress-bar { background: linear-gradient(90deg, var(--green), var(--green-dark)); } /* Paused overlay */ .timer-paused-overlay { text-align: center; color: var(--amber); font-weight: 600; font-size: 0.9rem; margin-top: 0.5rem; animation: pauseBlink 1.5s ease-in-out infinite; } @keyframes pauseBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* ---- Admin Timer Modal ---- */ .timer-modal-clock { font-family: var(--font-mono); font-size: 4.5rem; font-weight: 700; text-align: center; color: var(--text-primary); padding: 0.75rem 0; letter-spacing: 0.08em; } .timer-modal-clock.timer-urgent { color: var(--gold); animation: urgentPulse 1s ease-in-out infinite; } .timer-controls { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; } .timer-controls .btn { min-width: 100px; } .timer-modal-info { text-align: center; margin-bottom: 0.5rem; } .timer-modal-level { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem; } .timer-modal-blinds { font-family: var(--font-mono); font-size: 1.2rem; color: var(--cream); font-weight: 600; } .timer-modal-next { color: var(--text-muted); font-size: 0.85rem; margin-top: 0.5rem; } /* ---- Full-Screen Projector ---- */ .projector-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-primary); padding: 2rem; } .projector-level { font-size: 1.5rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.5rem; } .projector-blinds { font-family: var(--font-mono); font-size: 2.5rem; font-weight: 700; color: var(--cream); margin-bottom: 1rem; } .projector-clock { font-family: var(--font-mono); font-size: 10rem; font-weight: 700; color: var(--text-primary); letter-spacing: 0.05em; line-height: 1; } .projector-clock.timer-urgent { color: var(--gold); animation: urgentGlow 1s ease-in-out infinite; } @keyframes urgentGlow { 0%, 100% { text-shadow: 0 0 20px rgba(232, 35, 58, 0.3); opacity: 1; } 50% { text-shadow: 0 0 60px rgba(232, 35, 58, 0.6); opacity: 0.6; } } .projector-next { font-size: 1.2rem; color: var(--text-muted); margin-top: 1.5rem; } .projector-next strong { color: var(--text-secondary); } .projector-progress { width: 80%; max-width: 600px; height: 6px; background: var(--bg-card); border-radius: 3px; margin-top: 2rem; overflow: hidden; } .projector-progress-bar { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 3px; transition: width 1s linear; } .projector-break .projector-clock { color: var(--green); } .projector-break .projector-progress-bar { background: linear-gradient(90deg, var(--green), var(--green-dark)); } .projector-paused { color: var(--amber); font-size: 1.5rem; font-weight: 600; margin-top: 1rem; animation: pauseBlink 1.5s ease-in-out infinite; } /* Projector responsive */ @media (max-width: 768px) { .projector-clock { font-size: 5rem; } .projector-blinds { font-size: 1.5rem; } .projector-level { font-size: 1.1rem; } } /* ---- Reminder Card (admin dashboard) ---- */ .reminder-card { background: var(--bg-card); border: 1px solid var(--border-color); border-right: 3px solid var(--amber); border-radius: var(--radius-md); padding: 1rem 1.25rem; margin-bottom: 0.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .reminder-card .reminder-info { flex: 1; min-width: 0; } .reminder-card .reminder-info strong { display: block; margin-bottom: 0.15rem; } .reminder-card .reminder-info p { color: var(--text-muted); font-size: 0.85rem; } .btn-whatsapp { background: #25D366; color: #fff; border: none; padding: 0.5rem 1rem; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; font-size: 0.85rem; white-space: nowrap; transition: background var(--transition); } .btn-whatsapp:hover { background: #1da851; } /* ============================================ Profile Extended Stats ============================================ */ .profile-stats-extended { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; padding: 1rem; background: var(--bg-card); border-radius: var(--radius-md); border: 1px solid var(--border-color); } @media (max-width: 480px) { .profile-stats-extended { grid-template-columns: repeat(2, 1fr); } } /* Monthly Trend Chart */ .monthly-chart { display: flex; justify-content: space-around; align-items: flex-end; height: 120px; gap: 0.5rem; padding-top: 1rem; } .chart-column { display: flex; flex-direction: column; align-items: center; flex: 1; height: 100%; } .chart-bar-container { flex: 1; display: flex; align-items: flex-end; justify-content: center; width: 100%; } .chart-bar { width: 70%; max-width: 36px; min-height: 4px; border-radius: 4px 4px 0 0; transition: height var(--transition); } .chart-bar-positive { background: linear-gradient(to top, var(--green-dark), var(--green)); } .chart-bar-negative { background: linear-gradient(to top, var(--red-dark), var(--red)); } .chart-label { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.4rem; white-space: nowrap; } /* Achievement Badges */ .achievements-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } @media (max-width: 480px) { .achievements-grid { grid-template-columns: 1fr; } } .achievement-badge { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: var(--bg-secondary); border-radius: var(--radius-sm); border: 1px solid var(--border-color); transition: border-color var(--transition); } .achievement-badge:hover { border-color: var(--gold); } .achievement-icon { font-size: 1.5rem; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(232, 35, 58, 0.1); border-radius: 50%; flex-shrink: 0; } .achievement-info { flex: 1; min-width: 0; } .achievement-title { font-weight: 600; font-size: 0.85rem; } .achievement-desc { font-size: 0.75rem; color: var(--text-muted); } /* ============================================ Home Page — Live Timer Card ============================================ */ .hero-live-timer-card { background: rgba(13, 15, 20, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 3px solid var(--gold); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; margin-top: 1.5rem; text-align: center; animation: fadeInUp 0.5s ease; } .hero-live-timer-card .live-badge { display: inline-block; background: var(--gold); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; letter-spacing: 1px; animation: pulse 1.5s ease-in-out infinite; margin-bottom: 0.5rem; } .hero-live-timer-card .timer-clock-display { font-family: var(--font-mono); font-size: 2.5rem; font-weight: 700; color: var(--text-primary); margin: 0.5rem 0; } .hero-live-timer-card .timer-blinds-display { font-size: 0.9rem; color: var(--text-secondary); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* ============================================ Home Page — Last Results Podium ============================================ */ .results-podium { display: flex; justify-content: center; align-items: flex-end; gap: 1rem; flex-wrap: wrap; } .podium-card { background: var(--bg-card); border-radius: var(--radius-md); padding: 1.5rem 1.25rem; text-align: center; min-width: 140px; flex: 0 1 180px; border: 1px solid var(--border-color); transition: transform var(--transition), box-shadow var(--transition); } .podium-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .podium-1 { border-top: 3px solid #FFD700; order: 2; } .podium-2 { border-top: 3px solid #C0C0C0; order: 1; } .podium-3 { border-top: 3px solid #CD7F32; order: 3; } .podium-medal { font-size: 2rem; margin-bottom: 0.5rem; } .podium-avatar { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 0.5rem; display: block; border: 2px solid var(--border-color); object-fit: cover; } .podium-name { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.25rem; } .podium-prize { font-family: var(--font-mono); font-weight: 700; color: var(--green); font-size: 1rem; } @media (max-width: 480px) { .podium-card { min-width: 100px; flex: 0 1 140px; padding: 1rem 0.75rem; } .podium-avatar { width: 44px; height: 44px; } .podium-medal { font-size: 1.5rem; } } /* ============================================ Payout Calculator (Admin) ============================================ */ .payout-calculator { padding: 1rem; background: var(--bg-secondary); border-radius: var(--radius-sm); border: 1px solid var(--border-color); margin-bottom: 1rem; } .payout-percentages { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.5rem; margin-top: 0.75rem; } .payout-pct-item { display: flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; } .payout-pct-item label { color: var(--text-secondary); white-space: nowrap; min-width: 40px; } .payout-pct-item input { width: 55px; text-align: center; } .payout-total { margin-top: 0.5rem; font-size: 0.85rem; font-weight: 600; } /* ---------- Touch-Friendly Tap Targets ---------- */ @media (pointer: coarse) { .btn-sm { min-height: 44px; min-width: 44px; padding: 0.5rem 1.25rem; } .modal-close { min-width: 44px; min-height: 44px; font-size: 1.75rem; display: flex; align-items: center; justify-content: center; } .lightbox-overlay .lightbox-close { width: 48px; height: 48px; font-size: 1.75rem; } .lightbox-overlay .lightbox-nav { width: 48px; height: 48px; font-size: 1.5rem; } .admin-gallery-item .delete-btn { width: 44px; height: 44px; font-size: 1.1rem; } } /* ---------- Accessibility ---------- */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }