/** * olk.css * ------- * Master stylesheet for One Legged Kicker. * Covers all pages: login, main app, admin, and shared components. * * Usage: * - login.php: * - index.php: replace the olkstyle.css include with a tag (see below) * * Sections: * 1. Design Tokens (CSS variables) * 2. Google Fonts import * 3. Reset & Base * 4. Login Page * 4a. Page layout & background * 4b. Card * 4c. Logo & season badge * 4d. Form fields & inputs * 4e. Show-password toggle * 4f. Submit button * 4g. Forgot-password link * 4h. Inline error message * 5. Main App — Navigation * 6. Main App — Forms & Inputs * 7. Main App — Data Tables (#olkTable) * 8. Main App — Alert Tables (#olkAlert) * 9. Main App — Page wrapper (.app-content) * 10. Main App — Dues alert banner (.dues-banner) * 11. Main App — Section headings (.section-heading) * 12. Main App — Payout cards (.payout-grid) * 13. Main App — Draft date banner (.draft-banner) * 14. Main App — Keepers table (.olk-table) * 15. Main App — Rules page (.rules-layout) * 16. Main App — Manager selector (.manager-selector) * 17. Main App — Keepers table (.keepers-table) * 18. Main App — Lock keepers button (.btn-lock-keepers) * 19. Main App — Availability grid (.avail-table) * 20. Main App — Admin pages shared (.admin-card, .admin-grid) * 21. Main App — Admin seasons (.admin-settings-form) * 22. Main App — Admin users (.pw-hash, .role-badge) * 23. Main App — Settings page (.settings-layout) * 24. Flash messages (.flash, .flash-success, .flash-error, .flash-warning, .flash-info) * 25. Main app body & nav (.page-app, .nav-wrap, .nav-row-*) */ /* ============================================================ 1. DESIGN TOKENS Single source of truth for all colors and fonts. Update here and changes propagate everywhere. ============================================================ */ :root { /* Navy scale — darkest to lightest */ --navy-deep: #0f1c2b; /* login card background */ --navy-card: #0f1c2b; /* nav and table header background */ --navy-dark: #1a2535; /* login page background */ --navy: #2E4053; /* primary brand color (app body, nav) */ --navy-mid: #3f5873; /* nav sub-bar, buttons, table headers */ --navy-lt: #517294; /* admin sub-nav, accents */ --navy-input: #243447; /* login page input backgrounds */ /* Gold scale */ --gold: #C9A84C; /* primary accent — borders, focus rings, button */ --gold-lt: #e8c97a; /* hover state for gold elements */ /* Neutrals */ --white: #F5F7FA; /* primary text on dark backgrounds */ --muted: #7a96b0; /* secondary / label text on dark backgrounds */ --border: #ddd; /* table cell borders */ --row-alt: #f2f2f2; /* alternating table row tint */ --row-hover: #ddd; /* table row hover */ /* Alert */ --alert-red: #BF0000; /* #olkAlert header background */ /* Typography */ --font-body: 'DM Sans', Arial, Helvetica, sans-serif; --font-display: 'Bebas Neue', Arial, sans-serif; } /* ============================================================ 2. GOOGLE FONTS Loaded here so both login.php and index.php get them from a single stylesheet import. ============================================================ */ /* Google Fonts loaded via tags in HTML for better performance. See index.php, login.php, email.php. */ /* ============================================================ 3. RESET & BASE ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { font-family: var(--font-body); min-height: 100%; } /* ============================================================ 4a. LOGIN PAGE — layout & background Applied when is set on login.php. ============================================================ */ body.page-login { background-color: var(--navy-dark); display: flex; align-items: center; justify-content: center; min-height: 100vh; overflow: hidden; } /* Faint grid lines — evoke a football field */ body.page-login::before { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient( 90deg, transparent, transparent 48px, rgba(255,255,255,.035) 48px, rgba(255,255,255,.035) 50px ), repeating-linear-gradient( 0deg, transparent, transparent 48px, rgba(255,255,255,.035) 48px, rgba(255,255,255,.035) 50px ); pointer-events: none; z-index: 0; } /* Slow-pulsing gold orb in the top-right corner */ body.page-login::after { content: ''; position: fixed; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(201,168,76,.2) 0%, transparent 70%); top: -150px; right: -150px; pointer-events: none; z-index: 0; animation: pulse 6s ease-in-out infinite alternate; } @keyframes pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(1.1); opacity: 1; } } /* ============================================================ 4b. LOGIN PAGE — card Near-black background creates strong contrast against the navy page. Gold border + deep shadow lift it off the page. ============================================================ */ .login-card { position: relative; z-index: 1; width: 100%; max-width: 420px; margin: 1rem; background: var(--navy-deep); border: 1px solid rgba(201,168,76,.5); border-radius: 16px; padding: 48px 44px 40px; box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset, 0 16px 60px rgba(0,0,0,.8); animation: slideUp .55s cubic-bezier(.22,1,.36,1) both; } @keyframes slideUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ 4c. LOGIN PAGE — logo & season badge ============================================================ */ .login-logo-wrap { text-align: center; margin-bottom: 36px; } .login-logo-wrap img { height: 90px; width: auto; filter: drop-shadow(0 4px 16px rgba(201,168,76,.4)); transition: filter .3s; } .login-logo-wrap img:hover { filter: drop-shadow(0 4px 28px rgba(201,168,76,.7)); } /* Displays the active season year below the logo */ .login-season-badge { display: block; font-family: var(--font-display); font-size: 1rem; letter-spacing: .22em; color: var(--gold); margin-top: 8px; opacity: .9; } /* ============================================================ 4d. LOGIN PAGE — form fields & inputs ============================================================ */ .login-field { margin-bottom: 20px; } /* Scoped to login card so it doesn't override app-wide label styles */ .login-card label { display: block; font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; } /* Login-specific input overrides (dark theme) */ .login-card input[type="text"], .login-card input[type="password"], .login-card input[type="email"] { width: 100%; padding: 12px 16px; background: var(--navy-input); border: 1px solid rgba(143,163,184,.2); border-radius: 8px; color: var(--white); font-family: var(--font-body); font-size: .95rem; outline: none; transition: border-color .2s, box-shadow .2s; } .login-card input[type="text"]:focus, .login-card input[type="password"]:focus, .login-card input[type="email"]:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,.2); } .login-card input::placeholder { color: rgba(143,163,184,.4); } /* ============================================================ 4e. LOGIN PAGE — show-password toggle Custom checkbox styled to match the gold design language. ============================================================ */ .login-show-pw { display: flex; align-items: center; gap: 8px; margin-top: 10px; cursor: pointer; user-select: none; width: fit-content; } .login-show-pw input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border: 1px solid rgba(143,163,184,.35); border-radius: 4px; background: var(--navy-input); cursor: pointer; position: relative; flex-shrink: 0; transition: background .2s, border-color .2s; } /* Checked state: fill gold with a navy checkmark */ .login-show-pw input[type="checkbox"]:checked { background: var(--gold); border-color: var(--gold); } .login-show-pw input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: 2px solid var(--navy-deep); border-top: none; border-left: none; transform: rotate(45deg); } .login-show-pw span { font-size: .8rem; color: var(--muted); } /* ============================================================ 4f. LOGIN PAGE — submit button Gold fill, Bebas Neue label. Hover lifts and brightens. ============================================================ */ .login-btn { display: block; width: 100%; margin-top: 30px; padding: 14px; background: var(--gold); color: var(--navy-deep); font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .18em; border: none; border-radius: 8px; cursor: pointer; transition: background .2s, transform .15s, box-shadow .2s; box-shadow: 0 4px 20px rgba(201,168,76,.35); } .login-btn:hover { background: var(--gold-lt); transform: translateY(-1px); box-shadow: 0 6px 26px rgba(201,168,76,.5); } .login-btn:active { transform: translateY(0); } /* ============================================================ 4g. LOGIN PAGE — divider & forgot-password link ============================================================ */ .login-divider { height: 1px; background: rgba(143,163,184,.12); margin: 28px 0 22px; } .login-forgot { text-align: center; } .login-forgot a { font-size: .82rem; color: var(--muted); text-decoration: none; transition: color .2s; } .login-forgot a:hover { color: var(--gold-lt); } /* ============================================================ 4h. LOGIN PAGE — inline error message Shown when action/login.php redirects back with ?error=N. Red-tinted box with a left border accent for clear visibility. ============================================================ */ .login-error { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 12px 16px; background: rgba(191, 0, 0, .15); border: 1px solid rgba(191, 0, 0, .4); border-left: 3px solid #BF0000; border-radius: 8px; color: #f4a0a0; font-size: .88rem; line-height: 1.4; } /* Warning icon before the message using a CSS pseudo-element */ .login-error::before { content: '⚠'; font-size: 1rem; flex-shrink: 0; opacity: .9; } /* ============================================================ 5. MAIN APP — navigation Styles the top nav bar and sub-nav in index.php. ============================================================ */ /* Nav link styles — color/padding for links inside .nav-wrap */ .nav-wrap a { padding: 0 20px; text-decoration: none; color: #fff; transition: color .2s, opacity .2s; } .nav-wrap a:hover { opacity: 0.8; } /* Active page indicator — gold underline + brightened text */ .nav-wrap a.nav-active { color: var(--gold-lt); border-bottom: 2px solid var(--gold); padding-bottom: 2px; } /* Active link in the admin sub-nav row — same gold but against lighter bg */ .nav-row-admin a.nav-active { color: var(--gold); border-bottom: 2px solid var(--gold); padding-bottom: 2px; font-weight: 600; } /* Keeper deadline countdown banner */ .keeper-countdown { display: flex; align-items: center; gap: 12px; background: var(--navy-mid); border: 1px solid rgba(201,168,76,.3); border-radius: 10px; padding: 14px 20px; margin-bottom: 28px; font-size: .92rem; color: var(--white); box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.5); } .keeper-countdown::before { content: '🏈'; font-size: 1.1rem; flex-shrink: 0; } .keeper-countdown .countdown-days { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .05em; color: var(--gold); } /* Urgent — 3 days or fewer */ .keeper-countdown.countdown-urgent { border-color: rgba(191,0,0,.4); border-left: 4px solid var(--alert-red); background: rgba(191,0,0,.1); } .keeper-countdown.countdown-urgent .countdown-days { color: #f4a0a0; } /* Already passed */ .keeper-countdown.countdown-past { opacity: .6; } /* ============================================================ 6. MAIN APP — forms & inputs General form/input styles for the main app (non-login pages). ============================================================ */ form { border: 0px solid #f1f1f1; margin: auto; } input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; } button { background-color: var(--navy-mid); color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; } button:hover { opacity: 0.8; } .imgcontainer { text-align: center; margin: 24px 0 12px 0; } /* ============================================================ 7. MAIN APP — data table (#olkTable) Standard data display table with navy header and striped rows. ============================================================ */ #olkTable { font-family: var(--font-body); border-collapse: collapse; width: 90%; background-color: var(--navy-mid); border-radius: 10px; overflow: hidden; border: 1px solid rgba(201,168,76,.35); box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 8px 32px rgba(0,0,0,.55); } #olkTable td, #olkTable th { border-bottom: 1px solid rgba(255,255,255,.06); padding: 8px 10px; } #olkTable tr:last-child td { border-bottom: none; } #olkTable tr:nth-child(even) td { background-color: var(--navy-input); } #olkTable tr:hover td { background-color: #2a3d50; } #olkTable th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: var(--navy-mid); color: var(--white); font-family: var(--font-display); font-size: .85rem; letter-spacing: .08em; border-bottom: 2px solid var(--gold); } /* ============================================================ 8. MAIN APP — alert table (#olkAlert) Same structure as #olkTable but with a red header to signal urgent or warning-level information. ============================================================ */ #olkAlert { font-family: var(--font-body); border-collapse: collapse; width: 90%; background-color: var(--navy-mid); border-radius: 10px; overflow: hidden; border: 1px solid rgba(191,0,0,.4); box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 8px 32px rgba(0,0,0,.55); } #olkAlert td, #olkAlert th { border-bottom: 1px solid rgba(255,255,255,.06); padding: 8px 10px; color: var(--white); } #olkAlert tr:last-child td { border-bottom: none; } #olkAlert tr:nth-child(even) td { background-color: var(--navy-input); } #olkAlert tr:hover td { background-color: #2a3d50; } #olkAlert th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: var(--alert-red); color: var(--white); font-family: var(--font-display); font-size: .85rem; letter-spacing: .08em; border-bottom: 2px solid rgba(191,0,0,.8); } /* ============================================================ 9. MAIN APP — page wrapper Dark navy content area that fills the main panel in index.php. ============================================================ */ /* Outer wrapper — sets the dark background for all app content */ .app-content { background-color: transparent; min-height: 100vh; padding: 32px 40px; color: var(--white); } /* ============================================================ 10. MAIN APP — dues alert banner Replaces #olkAlert on the overview page. Full-width banner with a red-left-border accent to draw attention. ============================================================ */ .dues-banner { display: flex; align-items: center; gap: 14px; background: rgba(191,0,0,.12); border: 1px solid rgba(191,0,0,.35); border-left: 4px solid var(--alert-red); border-radius: 10px; padding: 14px 20px; margin-bottom: 28px; color: var(--white); font-size: .88rem; line-height: 1.5; box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.5); } /* Inner layout */ .dues-banner-body { display: flex; flex-direction: column; gap: 4px; flex: 1; } /* Primary line — white text, gold amount */ .dues-banner-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--white); } .dues-banner-main strong { color: var(--gold-lt); } /* Pay via Venmo button */ .dues-banner-btn { display: inline-flex; align-items: center; padding: 4px 12px; background: rgba(191,0,0,.25); border: 1px solid rgba(191,0,0,.5); border-radius: 5px; color: #fff !important; font-size: .82rem; font-weight: 500; text-decoration: none; transition: background .2s; white-space: nowrap; } .dues-banner-btn:hover { background: rgba(191,0,0,.45); } /* Note line — white but more muted */ .dues-banner-note { font-size: .76rem; color: rgba(255,255,255,.55); } /* Payment due icon — SVG dollar sign in circle, consistent cross-browser */ .dues-banner::before { content: ''; display: block; flex-shrink: 0; width: 22px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4a0a0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='6' x2='12' y2='7.5'/%3E%3Cline x1='12' y1='16.5' x2='12' y2='18'/%3E%3Cpath d='M15 9a3 3 0 0 0-6 0c0 1.5 1 2.2 3 3s3 1.5 3 3a3 3 0 0 1-6 0'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; } .dues-banner a { color: var(--white); } .dues-banner a:hover { color: var(--gold-lt); } .dues-banner strong { color: var(--gold-lt); } /* ============================================================ 11. MAIN APP — section headings Gold-accented heading used above each data section. ============================================================ */ .section-heading { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: .12em; color: var(--gold); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(201,168,76,.25); } /* ============================================================ 12. MAIN APP — payout cards Five equal-width cards replacing the payout table row. ============================================================ */ .payout-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 32px; } /* Individual payout card */ .payout-card { background: var(--navy-mid); border: 1px solid rgba(201,168,76,.3); border-radius: 10px; padding: 16px 12px; text-align: center; box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.5); transition: border-color .2s, transform .15s, box-shadow .2s; } .payout-card:hover { border-color: rgba(201,168,76,.6); transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 12px 32px rgba(0,0,0,.6); } /* Prize amount label (e.g. "$100") */ .payout-card .payout-amount { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .1em; color: var(--gold); margin-bottom: 4px; } /* Prize category label (e.g. "Week 14 High Points") */ .payout-card .payout-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 12px; line-height: 1.4; } /* Winner team name */ .payout-card .payout-winner { font-size: .95rem; font-weight: 500; color: var(--white); line-height: 1.3; } /* Winner manager name in muted text below team name */ .payout-card .payout-manager { font-size: .78rem; color: var(--muted); margin-top: 2px; } /* Shown when a winner hasn't been determined yet */ .payout-card .payout-tbd { font-size: .8rem; color: rgba(255,255,255,.25); font-style: italic; } /* ============================================================ 13. MAIN APP — draft date banner Compact info bar showing draft date or a prompt to set it. ============================================================ */ .draft-banner { display: flex; align-items: center; gap: 12px; background: var(--navy-mid); border: 1px solid rgba(201,168,76,.3); border-radius: 10px; padding: 14px 20px; margin-bottom: 28px; font-size: .92rem; color: var(--muted); box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.5); } /* Calendar icon */ .draft-banner::before { content: '📅'; font-size: 1rem; flex-shrink: 0; } .draft-banner a { color: var(--gold); text-decoration: none; font-weight: 500; } .draft-banner a:hover { color: var(--gold-lt); } /* ============================================================ 14. MAIN APP — keepers table Dark-themed table replacing #olkTable on the overview page. Uses a class (.olk-table) so it can coexist with #olkTable on other pages without conflict. ============================================================ */ /* Wrapper gives the table its card appearance — border-radius and border cannot be applied directly to a table with border-collapse:collapse */ .olk-table-wrap { border-radius: 10px; overflow: hidden; border: 1px solid rgba(201,168,76,.35); box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 8px 32px rgba(0,0,0,.55); } .olk-table { width: 100%; border-collapse: collapse; font-size: .9rem; background-color: var(--navy-mid); } .olk-table th { background-color: var(--navy-card) !important; color: var(--white); font-family: var(--font-display); font-size: .85rem; letter-spacing: .08em; padding: 12px 10px; text-align: center; border-bottom: 2px solid var(--gold); } .olk-table td { padding: 10px; border-bottom: 1px solid rgba(255,255,255,.06); color: var(--white); vertical-align: middle; background-color: var(--navy-mid); } /* Alternating row tint — solid colors so no grid bleed */ .olk-table tbody tr:nth-child(even) td { background-color: var(--navy-input); } .olk-table tbody tr:hover td { background-color: #2a3d50; } /* Manager cell — avatar + team name + manager name stacked */ .manager-cell { display: flex; align-items: center; gap: 12px; } .manager-cell img { width: 42px; height: 42px; border-radius: 50%; border: 2px solid rgba(201,168,76,.3); object-fit: cover; flex-shrink: 0; } .manager-cell .team-name { font-weight: 500; font-size: .95rem; color: var(--white); line-height: 1.2; } .manager-cell .manager-name { font-size: .78rem; color: var(--muted); } /* Player cell — team logo + name + position/team stacked */ .player-cell { display: flex; align-items: center; gap: 10px; } .player-cell img { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; } .player-cell .player-name { font-weight: 500; font-size: .92rem; color: var(--white); line-height: 1.2; } .player-cell .player-meta { font-size: .75rem; color: var(--muted); } /* ADP sub-line shown for admins */ .player-adp { font-size: .72rem; color: rgba(201,168,76,.7); margin-top: 2px; } /* Dues paid icon cell */ .dues-cell { text-align: center; } .dues-cell img { height: 20px; } /* Admin-only delete button — transparent with icon */ .btn-delete { background: transparent; border: none; cursor: pointer; padding: 4px; width: auto; margin: 0; opacity: .6; transition: opacity .2s; } .btn-delete:hover { opacity: 1; } /* Admin dropdown selects — compact, themed */ .admin-select { background: var(--navy-input); color: var(--white); border: 1px solid rgba(255,255,255,.15); border-radius: 5px; padding: 4px 6px; font-size: .82rem; font-family: var(--font-body); cursor: pointer; width: auto; } .admin-select:focus { outline: none; border-color: var(--gold); } /* ============================================================ 15. MAIN APP — rules page Two-column layout: left sidebar (quick-ref stats) and right main column (rule sections). Collapses to single column on narrow viewports. ============================================================ */ /* Outer two-column grid */ .rules-layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; } /* ── Sidebar ── */ .rules-sidebar { display: flex; flex-direction: column; gap: 20px; } /* Individual sidebar card (Roster, Scoring, Money) */ .rules-sidebar-card { background: var(--navy-mid); border: 1px solid rgba(201,168,76,.3); border-radius: 10px; padding: 18px 20px; box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.5); } .rules-sidebar-card h3 { font-family: var(--font-display); font-size: 1rem; letter-spacing: .12em; color: var(--gold); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(201,168,76,.2); } /* Two-column key/value grid inside sidebar card */ .rules-sidebar-card dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: .85rem; } .rules-sidebar-card dt { color: var(--muted); white-space: nowrap; } .rules-sidebar-card dd { color: var(--white); font-weight: 500; } /* Payout rows inside sidebar — label and amount */ .rules-payout-row { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.05); color: var(--white); } .rules-payout-row:last-child { border-bottom: none; } .rules-payout-row .payout-cat { color: var(--muted); font-size: .8rem; } .rules-payout-row .payout-val { font-family: var(--font-display); font-size: .95rem; letter-spacing: .05em; color: var(--gold); } /* Divider line inside sidebar card */ .rules-sidebar-card hr { border: none; border-top: 1px solid rgba(255,255,255,.08); margin: 12px 0; } /* Links row at bottom of sidebar */ .rules-links { display: flex; flex-direction: column; gap: 8px; } .rules-links a { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--navy-input); border: 1px solid rgba(201,168,76,.2); border-radius: 7px; color: var(--white); text-decoration: none; font-size: .85rem; font-weight: 500; transition: border-color .2s, background .2s; } .rules-links a:hover { border-color: rgba(201,168,76,.4); background: var(--navy-mid); color: var(--gold-lt); } /* ── Main rules column ── */ .rules-main { display: flex; flex-direction: column; gap: 24px; } /* Individual rule section card */ .rules-card { background: var(--navy-mid); border: 1px solid rgba(201,168,76,.3); border-radius: 10px; padding: 22px 26px; box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.5); } .rules-card h2 { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .1em; color: var(--gold); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(201,168,76,.2); } /* New-rules highlight banner */ .rules-new-badge { display: inline-block; font-size: .65rem; font-family: var(--font-display); letter-spacing: .1em; color: var(--navy-deep); background: var(--gold); border-radius: 4px; padding: 2px 7px; vertical-align: middle; margin-left: 10px; } .rules-card p { color: var(--white); font-size: .9rem; line-height: 1.7; margin-bottom: 12px; } .rules-card p:last-child { margin-bottom: 0; } /* Bulleted rule lists */ .rules-card ul { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; } .rules-card ul li { display: flex; gap: 10px; font-size: .88rem; color: var(--white); line-height: 1.55; } /* Gold bullet dot */ .rules-card ul li::before { content: '▸'; color: var(--gold); flex-shrink: 0; margin-top: 1px; } /* Inline emphasis inside rule text */ .rules-card strong { color: var(--gold-lt); font-weight: 600; } /* Responsive: stack to single column on narrow screens */ @media (max-width: 800px) { .rules-layout { grid-template-columns: 1fr; } } /* ============================================================ 16. MAIN APP — manager selector dropdown Shared across keepers.php and keeperpreview.php. A styled select used to switch between managers. ============================================================ */ .manager-selector-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .manager-selector-wrap label { font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .manager-selector { background: var(--navy-mid); color: var(--white); border: 1px solid rgba(201,168,76,.35); border-radius: 8px; padding: 8px 14px; font-family: var(--font-body); font-size: .92rem; cursor: pointer; outline: none; transition: border-color .2s, box-shadow .2s; min-width: 200px; } .manager-selector:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,.2); } /* ============================================================ 17. MAIN APP — keepers / keeper-preview table Dark-themed player selection table. Selected rows use a gold highlight. Lock icon replaces the radio once a pick is saved. ============================================================ */ /* Wrapper gives the table its card appearance */ .keepers-table-wrap { border-radius: 10px; overflow: hidden; border: 1px solid rgba(201,168,76,.35); box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 8px 32px rgba(0,0,0,.55); max-width: 700px; } /* admin-users uses keepers-table full width */ .keepers-table-wrap.full-width { max-width: 100%; } .keepers-table { width: 100%; border-collapse: collapse; font-size: .9rem; background-color: var(--navy-mid); } .keepers-table th { background-color: var(--navy-card) !important; color: var(--white); font-family: var(--font-display); font-size: .85rem; letter-spacing: .08em; padding: 12px 10px; text-align: center; border-bottom: 2px solid var(--gold); } .keepers-table th:first-child { text-align: left; } .keepers-table td { padding: 10px; border-bottom: 1px solid rgba(255,255,255,.06); color: var(--white); vertical-align: middle; text-align: center; background-color: var(--navy-mid); } .keepers-table td:first-child { text-align: left; } /* Alternating row tint — solid colors so no grid bleed */ .keepers-table tbody tr:nth-child(even) td { background-color: var(--navy-input); } .keepers-table tbody tr:hover td { background-color: #2a3d50; } /* Active/selected keeper row — gold-tinted highlight (solid) */ .keepers-table tbody tr.row-selected td { background-color: #2e3a1f; border-bottom-color: rgba(201,168,76,.3); } /* Best ADP keeper candidate — subtle gold hue + solid gold border, admin only */ .keepers-table tbody tr.row-best-keeper td { background-color: rgba(201,168,76,.15); border-top: 1px solid rgba(201,168,76,.7); border-bottom: 1px solid rgba(201,168,76,.7) !important; } .keepers-table tbody tr.row-best-keeper td:first-child { border-left: 3px solid var(--gold); } .keepers-table tbody tr.row-best-keeper td:last-child { border-right: 3px solid var(--gold); } .keepers-table tbody tr.row-best-keeper:hover td { background-color: rgba(201,168,76,.22); } /* Best ADP sleeper candidate — subtle silver hue + solid silver border, admin only */ .keepers-table tbody tr.row-best-sleeper td { background-color: rgba(180,190,200,.18); border-top: 1px solid rgba(180,190,200,.7); border-bottom: 1px solid rgba(180,190,200,.7) !important; } .keepers-table tbody tr.row-best-sleeper td:first-child { border-left: 3px solid #b4bec8; } .keepers-table tbody tr.row-best-sleeper td:last-child { border-right: 3px solid #b4bec8; } .keepers-table tbody tr.row-best-sleeper:hover td { background-color: rgba(180,190,200,.25); } /* Previous-keeper badge shown in Keeper/Sleeper columns */ .prev-keeper-badge { display: inline-block; font-size: .68rem; font-family: var(--font-display); letter-spacing: .06em; color: var(--navy-deep); background: var(--muted); border-radius: 4px; padding: 2px 6px; } /* Styled radio buttons — gold accent */ .keepers-table input[type="radio"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 2px solid rgba(201,168,76,.5); border-radius: 50%; background: var(--navy-input); cursor: pointer; position: relative; transition: border-color .2s, background .2s; vertical-align: middle; } .keepers-table input[type="radio"]:checked { border-color: var(--gold); background: var(--gold); } .keepers-table input[type="radio"]:checked::after { content: ''; position: absolute; width: 6px; height: 6px; background: var(--navy-deep); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Add-user bottom row in admin-users table — gold top border separates it visually from the existing user rows */ .add-user-row td { background-color: var(--navy-input) !important; border-top: 2px solid rgba(201,168,76,.3); } /* ============================================================ 18. MAIN APP — lock keepers button Gold CTA button with lock icons, used on keepers.php. ============================================================ */ .btn-lock-keepers { width: auto; display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 12px 28px; background: var(--gold); color: var(--navy-deep); font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .15em; border: none; border-radius: 8px; cursor: pointer; transition: background .2s, transform .15s, box-shadow .2s; box-shadow: 0 4px 18px rgba(201,168,76,.3); } .btn-lock-keepers:hover { background: var(--gold-lt); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(201,168,76,.45); } .btn-lock-keepers:active { transform: translateY(0); } .btn-lock-keepers img { height: 18px; filter: brightness(0); /* make icon dark to match navy-deep text */ } /* ============================================================ 19. MAIN APP — availability grid Date × manager matrix. Cells are color-coded by availability status (Y=green, N=red, ?=default). The "All" summary column uses a traffic-light gradient computed in PHP. ============================================================ */ .avail-wrap { -webkit-overflow-scrolling: touch; border-radius: 10px; overflow: hidden; border: 1px solid rgba(201,168,76,.35); box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 8px 32px rgba(0,0,0,.55); display: table; /* shrinks to fit table content without affecting block siblings */ } .avail-table { border-collapse: collapse; font-size: .82rem; white-space: nowrap; background-color: var(--navy-mid); width: auto; /* content-width only — prevents stretching to fill container */ } .avail-table th { background-color: var(--navy-card) !important; color: var(--white); font-family: var(--font-display); font-size: .78rem; letter-spacing: .07em; padding: 10px 10px; text-align: center; border-bottom: 2px solid var(--gold); position: sticky; top: 0; z-index: 1; } /* Date column header — left-aligned */ .avail-table th:first-child { text-align: left; position: sticky; left: 0; z-index: 2; background-color: var(--navy-card) !important; } .avail-table td { padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,.05); text-align: center; color: var(--navy-deep); font-weight: 600; background-color: var(--navy-mid); } /* Date label cell — sticky left column */ .avail-table td.avail-date { text-align: left; color: var(--white); font-weight: 400; background-color: var(--navy-mid); position: sticky; left: 0; z-index: 1; padding-right: 16px; font-size: .8rem; line-height: 1.3; } /* Day of week label — gold, same treatment as .player-adp on keepers page */ .avail-day-of-week { font-size: .72rem; color: rgba(201,168,76,.7); margin-top: 2px; } /* Weekend row — subtly lighter background for Sat/Sun rows. .avail-table td has specificity (0,1,1); using .avail-table .avail-row-weekend td gives (0,2,1) which beats the base td rule without needing !important. The status color classes use !important so they always win over this. */ .avail-table .avail-row-weekend td { background-color: #2a3a4a; } .avail-table .avail-row-weekend td.avail-date { background-color: #2a3a4a; } /* Availability status colours */ /* !important required — .avail-table td (specificity 0,1,1) beats plain class selectors (0,1,0) so background-color must be forced here. */ .avail-y { background-color: rgba(76,175,80,.25) !important; color: #a5d6a7 !important; } .avail-n { background-color: rgba(229,57,53,.2) !important; color: #ef9a9a !important; } .avail-unknown { background-color: var(--navy-input) !important; color: var(--muted) !important; font-weight: 400 !important; } /* Summary "All" column percentage cells — colour set inline by PHP */ .avail-pct { font-weight: 700; font-size: .8rem; background-color: var(--navy-mid); /* fallback when PHP sets no inline color */ /* color set via inline style by PHP traffic-light logic */ } /* Admin lock-draft button cell */ .avail-lock-cell { padding: 0 4px; background-color: var(--navy-mid); } .btn-avail-lock { background: transparent; border: none; cursor: pointer; padding: 2px; width: auto; margin: 0; opacity: .7; transition: opacity .2s; } .btn-avail-lock:hover { opacity: 1; } /* Availability dropdown — compact, dark-themed */ .avail-select { background: var(--navy-input); color: var(--white); border: 1px solid rgba(255,255,255,.2); border-radius: 4px; padding: 2px 4px; font-size: .78rem; font-family: var(--font-body); cursor: pointer; width: 44px; } .avail-select:focus { outline: none; border-color: var(--gold); } /* ============================================================ 20. MAIN APP — admin pages (shared) Common elements used across admin-seasons, admin-users, and admin-sleeper pages. ============================================================ */ /* Two-column card grid — used on admin-sleeper */ .admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; } /* Full-width variant — used for wide tables (rosters, matchups) */ .admin-grid-full { grid-column: 1 / -1; } /* Individual admin card */ .admin-card { background: var(--navy-mid); border: 1px solid rgba(201,168,76,.3); border-radius: 10px; padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.5); } .admin-card h3 { font-family: var(--font-display); font-size: 1rem; letter-spacing: .1em; color: var(--gold); padding-bottom: 10px; border-bottom: 1px solid rgba(201,168,76,.2); margin: 0; } /* Roster count cells with tooltip — dashed underline signals hoverable */ .admin-data-table td[title] { text-decoration: underline dotted rgba(201,168,76,.5); cursor: help; } /* Freshness indicator icons — shown in admin-sleeper card headings. Green check = refreshed within 24h, red cross = stale or never refreshed. */ .freshness-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: .72rem; font-weight: 700; margin-right: 6px; vertical-align: middle; flex-shrink: 0; } .freshness-fresh { background-color: rgba(76,175,80,.2); color: #4caf50; border: 1px solid rgba(76,175,80,.5); } .freshness-stale { background-color: rgba(191,0,0,.2); color: #f4a0a0; border: 1px solid rgba(191,0,0,.4); } /* Error state inside a card — shown when a SQL query fails */ .admin-card-error { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; background: rgba(191,0,0,.12); border: 1px solid rgba(191,0,0,.3); border-left: 3px solid var(--alert-red); border-radius: 6px; color: #f4a0a0; font-size: .82rem; line-height: 1.5; } .admin-card-error::before { content: '⚠'; flex-shrink: 0; } /* Admin action button — full-width navy button inside a card */ .btn-admin { display: block; width: 100%; padding: 10px 16px; background: var(--navy-lt); color: var(--white); font-family: var(--font-display); font-size: .95rem; letter-spacing: .1em; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; cursor: pointer; text-align: center; transition: background .2s, border-color .2s, transform .15s; margin-top: auto; /* push button to bottom of card */ } .btn-admin:hover { background: var(--navy-mid); border-color: rgba(201,168,76,.4); transform: translateY(-1px); } .btn-admin:active { transform: translateY(0); } /* Small inline data table inside an admin card */ .admin-data-table { width: 100%; border-collapse: collapse; font-size: .82rem; } .admin-data-table th { background: var(--navy-input); color: var(--muted); font-family: var(--font-body); font-weight: 500; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; padding: 7px 8px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.08); } .admin-data-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.05); color: var(--white); vertical-align: middle; } .admin-data-table tr:last-child td { border-bottom: none; } .admin-data-table tr:hover td { background: #2a3d50; } /* ============================================================ 21. MAIN APP — admin-seasons page Season selector, date range pickers, keeper week selector. ============================================================ */ /* Stacked settings form layout */ .admin-settings-form { display: flex; flex-direction: column; gap: 14px; } .admin-settings-form .field-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .admin-settings-form label { font-size: .75rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); white-space: nowrap; min-width: 150px; } .admin-settings-form input[type="date"], .admin-settings-form input[type="number"], .admin-settings-form select { background: var(--navy-input); color: var(--white); border: 1px solid rgba(143,163,184,.25); border-radius: 7px; padding: 8px 12px; font-family: var(--font-body); font-size: .9rem; outline: none; transition: border-color .2s, box-shadow .2s; cursor: pointer; } .admin-settings-form input[type="date"]:focus, .admin-settings-form select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,.18); } /* Divider between settings sections */ .admin-section-divider { height: 1px; background: rgba(255,255,255,.08); margin: 4px 0; } /* ============================================================ 22. MAIN APP — admin-users page User list table with inline password change and add-user row. ============================================================ */ /* Password hash — monospace, muted */ .pw-hash { font-family: monospace; font-size: .72rem; color: var(--muted); word-break: break-all; margin-bottom: 6px; } /* Inline password field + key button row */ .pw-row { display: flex; align-items: center; justify-content: center; gap: 6px; } .pw-row input[type="password"] { width: 130px; padding: 5px 8px; background: var(--navy-input); border: 1px solid rgba(143,163,184,.2); border-radius: 5px; color: var(--white); font-family: var(--font-body); font-size: .82rem; outline: none; margin: 0; transition: border-color .2s; } .pw-row input[type="password"]:focus { border-color: var(--gold); } /* Add-user bottom row inputs */ .add-user-input { width: 100%; padding: 7px 10px; background: var(--navy-input); border: 1px solid rgba(143,163,184,.2); border-radius: 5px; color: var(--white); font-family: var(--font-body); font-size: .85rem; outline: none; transition: border-color .2s; margin: 0; } .add-user-input:focus { border-color: var(--gold); } /* Role badge pill */ .role-badge { display: inline-block; font-size: .68rem; font-family: var(--font-display); letter-spacing: .07em; padding: 2px 8px; border-radius: 20px; } .role-badge.admin { background: rgba(201,168,76,.2); color: var(--gold-lt); border: 1px solid rgba(201,168,76,.3); } /* Admin badge used as a nav button — resets button defaults */ .nav-admin-badge { cursor: pointer; font-family: var(--font-display); width: auto; margin: 0; padding: 2px 8px; transition: background .2s, border-color .2s; } .nav-admin-badge:hover { background: rgba(201,168,76,.35); border-color: rgba(201,168,76,.6); } .role-badge.user { background: rgba(81,114,148,.3); color: var(--white); border: 1px solid rgba(81,114,148,.4); } /* ============================================================ 23. MAIN APP — settings page User profile card with avatar, display info, and inline forms for updating email and password. ============================================================ */ /* Outer layout — avatar card left, forms right */ .settings-layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; max-width: 700px; } /* Avatar / profile card */ .settings-profile-card { background: var(--navy-mid); border: 1px solid rgba(201,168,76,.3); border-radius: 10px; padding: 28px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.5); } .settings-avatar { width: 120px; height: 120px; border-radius: 50%; border: 3px solid rgba(201,168,76,.4); object-fit: cover; } .settings-team-name { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .08em; color: var(--white); line-height: 1.2; } .settings-user-name { font-size: .82rem; color: var(--muted); } /* Right column — stacked form cards */ .settings-forms { display: flex; flex-direction: column; gap: 20px; } /* Individual settings form card */ .settings-form-card { background: var(--navy-mid); border: 1px solid rgba(201,168,76,.3); border-radius: 10px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.5); } .settings-form-card h3 { font-family: var(--font-display); font-size: 1rem; letter-spacing: .1em; color: var(--gold); padding-bottom: 10px; border-bottom: 1px solid rgba(201,168,76,.2); margin: 0; } /* Label + input row inside a settings card */ .settings-field { display: flex; flex-direction: column; gap: 6px; } .settings-field label { font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .settings-field input[type="text"], .settings-field input[type="email"], .settings-field input[type="password"] { width: 100%; padding: 10px 14px; background: var(--navy-input); border: 1px solid rgba(143,163,184,.2); border-radius: 7px; color: var(--white); font-family: var(--font-body); font-size: .92rem; outline: none; margin: 0; transition: border-color .2s, box-shadow .2s; } .settings-field input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,.18); } /* Collapse to single column on narrow screens */ @media (max-width: 600px) { .settings-layout { grid-template-columns: 1fr; } } /* ============================================================ 24. FLASH MESSAGES Session-based one-time notifications shown after a redirect. Four types: success (green), error (red), warning (amber), /* Inline payout amount input — compact number field in sidebar */ .payout-edit-input { width: 60px; padding: 3px 6px; background: var(--navy-input); border: 1px solid rgba(201,168,76,.3); border-radius: 5px; color: var(--gold); font-family: var(--font-display); font-size: .9rem; letter-spacing: .05em; text-align: right; outline: none; margin: 0; transition: border-color .2s; } .payout-edit-input:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201,168,76,.18); } /* ============================================================ 23b. MAIN APP — rules page admin edit styles ============================================================ */ /* Wrap edit form to fill full card width */ .rules-card form { display: block; width: 100%; } /* Header row: title input left, buttons right */ .rules-edit-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; width: 100%; } /* Title input grows to fill available space; min-width:0 prevents overflow */ .rules-edit-title { flex: 1 1 auto; min-width: 0; padding: 8px 12px; background: var(--navy-input); border: 1px solid rgba(201,168,76,.3); border-radius: 7px; color: var(--white); font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .08em; outline: none; transition: border-color .2s, box-shadow .2s; } .rules-edit-title:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,.18); } /* Content textarea — explicitly block + box-sizing to guarantee full width */ .rules-edit-content { display: block; width: 100%; box-sizing: border-box; padding: 12px 14px; background: var(--navy-input); border: 1px solid rgba(143,163,184,.2); border-radius: 7px; color: var(--white); font-family: var(--font-body); font-size: .88rem; line-height: 1.6; resize: vertical; outline: none; transition: border-color .2s, box-shadow .2s; margin: 0; } .rules-edit-content:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,.18); } .rules-edit-hint { font-size: .72rem; color: var(--muted); margin-top: 6px; } .rules-edit-actions { display: flex; gap: 8px; flex-shrink: 0; } .btn-rule-save { padding: 7px 16px; background: var(--gold); color: var(--navy-deep); font-family: var(--font-display); font-size: .85rem; letter-spacing: .08em; border: none; border-radius: 6px; cursor: pointer; width: auto; margin: 0; transition: background .2s, transform .15s; } .btn-rule-save:hover { background: var(--gold-lt); transform: translateY(-1px); } .btn-rule-delete { padding: 7px 14px; background: rgba(191,0,0,.15); color: #f4a0a0; font-family: var(--font-display); font-size: .85rem; letter-spacing: .08em; border: 1px solid rgba(191,0,0,.35); border-radius: 6px; cursor: pointer; width: auto; margin: 0; transition: background .2s; } .btn-rule-delete:hover { background: rgba(191,0,0,.3); } .rules-add-card { border-color: rgba(255,255,255,.1); opacity: .9; } .rules-add-card:hover { opacity: 1; border-color: rgba(201,168,76,.3); } info (blue). Rendered via flash_messages() in login_config.php. ============================================================ */ .flash-wrap { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } .flash { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 8px; font-size: .88rem; line-height: 1.5; animation: slideUp .3s cubic-bezier(.22,1,.36,1) both; } .flash::before { flex-shrink: 0; font-size: 1rem; margin-top: 1px; } /* Success */ .flash-success { background: rgba(76,175,80,.15); border: 1px solid rgba(76,175,80,.4); border-left: 3px solid #4caf50; color: #a5d6a7; } .flash-success::before { content: '✓'; } /* Error */ .flash-error { background: rgba(191,0,0,.15); border: 1px solid rgba(191,0,0,.4); border-left: 3px solid #bf0000; color: #f4a0a0; } .flash-error::before { content: '⚠'; } /* Warning */ .flash-warning { background: rgba(255,160,0,.12); border: 1px solid rgba(255,160,0,.35); border-left: 3px solid #ffa000; color: #ffe082; } .flash-warning::before { content: '⚠'; } /* Info */ .flash-info { background: rgba(81,114,148,.2); border: 1px solid rgba(81,114,148,.4); border-left: 3px solid var(--navy-lt); color: var(--white); } .flash-info::before { content: 'ℹ'; } /* ============================================================ 25. MAIN APP — body, grid background & nav ============================================================ */ /* ── Body ────────────────────────────────────────────────────── The grid is a ::before pseudo-element on . Because itself is not a table element, its pseudo-elements paint reliably. All content sits in normal document flow above it. ──────────────────────────────────────────────────────────── */ body.page-app { background-color: var(--navy-dark); /* Bake grid directly into body background — this is the only reliable cross-browser way to have a grid behind all content. The grid is part of the body's own paint layer, so it never creates a stacking context conflict with child elements. background-attachment:fixed makes it behave like a fixed pseudo-element (doesn't scroll with content). */ background-image: repeating-linear-gradient( 90deg, transparent, transparent 48px, rgba(255,255,255,.035) 48px, rgba(255,255,255,.035) 50px ), repeating-linear-gradient( 0deg, transparent, transparent 48px, rgba(255,255,255,.035) 48px, rgba(255,255,255,.035) 50px ); background-attachment: fixed; min-height: 100vh; } /* Fixed gold glow — bottom-left of viewport */ .app-glow-bg { position: fixed; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(201,168,76,.1) 0%, transparent 70%); bottom: -250px; left: -100px; pointer-events: none; animation: pulse 8s ease-in-out infinite alternate-reverse; } /* ── Nav wrapper ───────────────────────────────────────────── .nav-wrap is a plain block div. Its background-color paints as a solid rectangle because it is not a table element. No z-index needed — it sits in normal document flow above the body::before grid pseudo-element. ──────────────────────────────────────────────────────────── */ .nav-wrap { width: 100%; background-color: var(--navy-card); box-shadow: 0 5px 20px rgba(0,0,0,.7); border-bottom: 1px solid rgba(201,168,76,.35); } .nav-row-logo, .nav-row-links, .nav-row-admin { background-color: inherit; } /* Logo row — flexbox, logo left, actions right */ .nav-row-logo { display: flex; align-items: center; justify-content: space-between; background-color: var(--navy-card); height: 130px; padding: 0 10px; /* background-color on a non-table block div paints over body background-image */ } .nav-logo-td { display: flex; align-items: center; position: relative; background-color: var(--navy-card); } .nav-actions-td { display: flex; flex-direction: column; align-items: flex-end; padding-top: 20px; min-width: 50px; position: relative; background-color: var(--navy-card); } /* Primary nav link row */ .nav-row-links { display: flex; align-items: center; justify-content: center; background-color: var(--navy-mid); height: 30px; } /* Admin sub-nav row */ .nav-row-admin { display: flex; align-items: center; justify-content: center; background-color: var(--navy-lt); height: 30px; } /* ── Main content wrapper ────────────────────────────────────── */ .app-body-wrap { width: 100%; min-height: 100vh; } /* ── Removed: .app-grid-bg, .app-body-table, .app-body-td ───── */ /* These were previous attempts at the grid that are no longer used. */