/* ============================================================ AUCTION HUB — Shared Theme Stylesheet ============================================================ To change the entire theme, edit the CSS variables in :root. All colors, shadows, and fonts flow from there. ============================================================ */ /* ── Google Font Import ───────────────────────────────────── Change the font-family name in --font-primary AND the @import URL below to switch fonts site-wide. ─────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@400;500;600;700;800&display=swap'); /* ── Design Tokens ─────────────────────────────────────────── These variables drive EVERY color, shadow, and radius across all pages. Swap values here to retheme the whole app. ─────────────────────────────────────────────────────────── */ :root { /* Brand Colors */ --primary: #E63977; --primary-light: #FF6B9E; --primary-dark: #C9205C; /* Backgrounds */ --bg-light: #FDF7F9; --card-bg: #FFFFFF; --input-bg: #FDF9FA; /* Borders */ --border-light: #F0E4EA; --input-border: #F0E4EA; /* Text */ --text-dark: #1A1014; --text-muted: #71656A; /* Semantic colors (alerts, badges) */ --color-success: #10B981; --color-error: #EF4444; --color-info: #3B82F6; --color-warning: #F59E0B; /* Typography */ --font-primary: 'Plus Jakarta Sans', sans-serif; /* Elevation / Shadows */ --shadow-card: 0 20px 40px -15px rgba(230, 57, 119, 0.12), 0 0 15px rgba(0,0,0,0.03); --shadow-card-sm: 0 15px 35px -10px rgba(230, 57, 119, 0.10), 0 5px 15px rgba(0,0,0,0.02); --shadow-primary: 0 8px 20px -5px rgba(230, 57, 119, 0.30); /* Border Radius */ --radius-card: 1.5rem; /* 24px — cards, modals */ --radius-input: 0.75rem; /* 12px — inputs, buttons */ --radius-badge: 9999px; /* pills */ /* Ambient gradient blob (background effect) */ --ambient-color: rgba(230, 57, 119, 0.10); } /* ── Base Reset & Body ───────────────────────────────────────*/ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font-primary); background-color: var(--bg-light); color: var(--text-dark); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Ambient Background Blob ───────────────────────────────── Add this div as the first child of on each page:

─────────────────────────────────────────────────────────── */ .ah-ambient-blob { position: fixed; /* use absolute on short pages */ top: -10%; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1280px; height: 500px; background: linear-gradient(to bottom, var(--ambient-color), transparent); filter: blur(120px); pointer-events: none; z-index: 0; } /* ── Cards ───────────────────────────────────────────────────*/ .ah-card { background-color: var(--card-bg); border: 1px solid #FFFFFF; border-radius: var(--radius-card); box-shadow: var(--shadow-card); } .ah-card-sm { background-color: var(--card-bg); border: 1px solid var(--border-light); border-radius: var(--radius-input); box-shadow: var(--shadow-card-sm); } /* ── Navbar / Sticky Header ──────────────────────────────────*/ .ah-navbar { background-color: rgba(255, 255, 255, 0.90); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-light); box-shadow: 0 1px 4px rgba(0,0,0,0.04); position: sticky; top: 0; z-index: 50; width: 100%; padding: 0.75rem 1rem; } /* ── Buttons ─────────────────────────────────────────────────*/ /* Primary — filled gradient */ .ah-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.5rem; background: linear-gradient(to right, var(--primary), var(--primary-dark)); color: #FFFFFF; font-family: var(--font-primary); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; border: none; border-radius: var(--radius-input); cursor: pointer; transition: box-shadow 0.2s ease, transform 0.2s ease; } .ah-btn-primary:hover { box-shadow: var(--shadow-primary); transform: translateY(-2px); } .ah-btn-primary:active { transform: scale(0.98); } .ah-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } /* Secondary — outlined */ .ah-btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.5rem; background: transparent; color: var(--primary); font-family: var(--font-primary); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; border: 2px solid var(--primary); border-radius: var(--radius-input); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; } .ah-btn-secondary:hover { background: var(--primary); color: #FFFFFF; } .ah-btn-secondary:active { transform: scale(0.98); } /* Ghost — subtle for back-links / secondary nav actions */ .ah-btn-ghost { display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; color: var(--text-muted); font-family: var(--font-primary); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.05em; border: none; cursor: pointer; transition: color 0.2s ease; text-decoration: none; } .ah-btn-ghost:hover { color: var(--primary); } /* Danger — delete / destructive actions */ .ah-btn-danger { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; background-color: #FEF2F2; color: #DC2626; font-family: var(--font-primary); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.05em; border: 1px solid #FEE2E2; border-radius: var(--radius-input); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .ah-btn-danger:hover { background-color: #DC2626; color: #FFFFFF; } /* ── Form Inputs ─────────────────────────────────────────────*/ .ah-label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; } .ah-input { width: 100%; padding: 0.875rem 1rem; background-color: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-input); color: var(--text-dark); font-family: var(--font-primary); font-size: 0.875rem; font-weight: 500; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .ah-input::placeholder { color: #B0A0A8; } .ah-input:hover { border-color: rgba(230, 57, 119, 0.30); } .ah-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(230, 57, 119, 0.15); } /* File input wrapper */ .ah-file-input { width: 100%; font-size: 0.875rem; font-weight: 500; color: var(--text-dark); background-color: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-input); cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; outline: none; } .ah-file-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(230, 57, 119, 0.15); } .ah-file-input::file-selector-button { margin-right: 1rem; padding: 0.625rem 1rem; background-color: rgba(230, 57, 119, 0.10); color: var(--primary); border: none; font-family: var(--font-primary); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; border-radius: calc(var(--radius-input) - 2px); cursor: pointer; transition: background 0.2s; } .ah-file-input::file-selector-button:hover { background-color: rgba(230, 57, 119, 0.20); } /* ── Alert / Status Messages ─────────────────────────────────*/ .ah-alert { padding: 0.875rem 1.25rem; border-radius: var(--radius-input); font-size: 0.875rem; font-weight: 600; text-align: center; border: 1px solid transparent; transition: all 0.3s ease; } .ah-alert-success { background-color: #F0FDF4; color: #16A34A; border-color: #DCFCE7; } .ah-alert-error { background-color: #FEF2F2; color: #DC2626; border-color: #FEE2E2; } .ah-alert-info { background-color: #EFF6FF; color: #2563EB; border-color: #DBEAFE; } /* ── Status Badges / Pills ───────────────────────────────────*/ .ah-badge { display: inline-block; padding: 0.375rem 1rem; border-radius: var(--radius-badge); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; border: 1px solid transparent; transition: all 0.3s ease; } .ah-badge-neutral { background: var(--input-bg); color: var(--text-muted); border-color: var(--border-light); } .ah-badge-primary { background: rgba(230,57,119,0.10); color: var(--primary); border-color: rgba(230,57,119,0.30); } .ah-badge-success { background: #F0FDF4; color: var(--color-success); border-color: #DCFCE7; } .ah-badge-error { background: #FEF2F2; color: var(--color-error); border-color: #FEE2E2; } .ah-badge-warning { background: #FFFBEB; color: var(--color-warning); border-color: #FEF3C7; } /* ── Section / Page Headings ─────────────────────────────────*/ .ah-page-title { font-size: 1.5rem; font-weight: 800; color: var(--text-dark); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; } .ah-page-subtitle { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.2em; text-transform: uppercase; } .ah-section-title { font-size: 1.125rem; font-weight: 800; color: var(--text-dark); letter-spacing: 0.06em; text-transform: uppercase; } .ah-divider { width: 6rem; height: 0.375rem; background-color: rgba(230, 57, 119, 0.20); border-radius: var(--radius-badge); margin: 1.25rem auto 0; } /* ── Scrollbars ──────────────────────────────────────────────*/ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--input-bg); } ::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover{ background: var(--primary-light); } /* Utility: hide scrollbar but keep scroll */ .ah-no-scrollbar::-webkit-scrollbar { display: none; } .ah-no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ── SweetAlert2 Theme Overrides ───────────────────────────── Works automatically when SweetAlert2 is loaded on any page. ─────────────────────────────────────────────────────────── */ .swal2-popup { background: var(--card-bg) !important; border: 1px solid var(--border-light) !important; border-radius: var(--radius-card) !important; color: var(--text-dark) !important; box-shadow: 0 20px 40px -15px rgba(230, 57, 119, 0.15) !important; font-family: var(--font-primary) !important; } .swal2-title { color: var(--text-dark) !important; font-family: var(--font-primary) !important; font-weight: 800 !important; } .swal2-html-container { color: var(--text-muted) !important; font-family: var(--font-primary) !important; } .swal2-confirm { background: var(--primary) !important; font-family: var(--font-primary) !important; font-weight: 700 !important; border-radius: var(--radius-input) !important; } .swal2-cancel { background: #F3F4F6 !important; color: #4B5563 !important; font-family: var(--font-primary) !important; border-radius: var(--radius-input) !important; } /* ── Card-Flip Animation (team_draw.php / group_draw.php) ────*/ .ah-card-container { perspective: 1000px; cursor: pointer; } .ah-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 3.5s cubic-bezier(0.15, 0.85, 0.35, 1); transform-style: preserve-3d; } .ah-card-container.live-spin .ah-card-inner { transform: rotateY(1620deg); } .ah-card-face, .ah-card-reveal { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: var(--radius-card); } .ah-card-face { background-color: var(--card-bg); border: 1px solid var(--border-light); box-shadow: var(--shadow-card); } .ah-card-reveal { transform: rotateY(180deg); } /* ── Animations ──────────────────────────────────────────────*/ @keyframes ah-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .ah-animate-live { animation: ah-live-pulse 1.5s ease-in-out infinite; } /* Generic fade-in for page sections */ @keyframes ah-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .ah-fade-in { animation: ah-fade-in 0.35s ease-out both; } /* Progress bar fill */ @keyframes ah-progress-fill { from { width: 0%; } } .ah-progress-bar { background: linear-gradient(to right, var(--primary), var(--primary-dark)); height: 0.5rem; border-radius: var(--radius-badge); transition: width 0.5s ease-out; } .ah-progress-track { background: var(--input-bg); border: 1px solid var(--border-light); border-radius: var(--radius-badge); height: 0.5rem; overflow: hidden; } /* ── Icon Badge (used on icon players) ───────────────────────*/ .ah-icon-badge { position: absolute; top: -0.75rem; right: -0.75rem; background: linear-gradient(135deg, #FDE68A, #F59E0B); color: #FFFFFF; padding: 0.375rem; border-radius: 9999px; border: 2px solid #FFFFFF; box-shadow: 0 4px 8px rgba(245, 158, 11, 0.35); z-index: 20; display: flex; align-items: center; justify-content: center; } /* ── Table Styles (manage_teams.php, manage_players.php) ──── */ .ah-table { width: 100%; border-collapse: collapse; text-align: left; } .ah-table thead th { padding: 0 0.5rem 0.75rem; font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 1px solid var(--border-light); } .ah-table tbody tr { border-bottom: 1px solid var(--border-light); transition: background 0.2s ease; } .ah-table tbody tr:last-child { border-bottom: none; } .ah-table tbody tr:hover { background-color: rgba(253, 249, 250, 0.6); } .ah-table tbody td { padding: 0.75rem 0.5rem; font-size: 0.875rem; } .ah-table-logo { width: 3rem; height: 3rem; border-radius: var(--radius-input); background-color: var(--input-bg); border: 1px solid var(--border-light); padding: 0.25rem; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.04); } .ah-table-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radius-input) - 2px); }