/* ────────────────────────────────────────────────────────────────────── Vintage Sports Page theme Cream newsprint background, deep red + navy ink, serif headlines. All legacy class names are preserved so every page picks up the look. ────────────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&display=swap'); :root { --bg: #f1eadb; /* aged newsprint */ --card: #fbf6ea; /* page stock */ --card-2: #fdfaf0; /* lifted tile */ --ink: #2b1d12; /* warm black */ --muted: #6e5d4e; /* faded brown */ --brand: #8b1a1a; /* deep red */ --brand-2: #5e0f0f; /* hover red */ --navy: #1f3a5f; /* steel navy */ --navy-2: #152841; /* hover navy */ --gold: #b58836; /* trim gold */ --line: #d8cdb4; /* hairline */ --line-soft: #e7dec7; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Georgia', 'Times New Roman', serif; color: var(--ink); padding: 20px; min-height: 100vh; /* ── Football field background ────────────────────────────────────── */ background-color: #27622a; background-image: /* End zones: dark teal bands top + bottom */ linear-gradient( to bottom, rgba(0, 50, 20, 0.55) 0px, transparent 72px ), linear-gradient( to top, rgba(0, 50, 20, 0.55) 0px, transparent 72px ), /* Yard lines: white horizontal rules every 90px */ repeating-linear-gradient( to bottom, transparent 0px, transparent 87px, rgba(255,255,255,0.60) 87px, rgba(255,255,255,0.60) 90px ), /* Mowing stripes: alternating dark/light 45px bands */ repeating-linear-gradient( to bottom, rgba(0,0,0,0.10) 0px, rgba(0,0,0,0.10) 45px, rgba(255,255,255,0.04) 45px, rgba(255,255,255,0.04) 90px ); } /* Sideline stripes — white bar down each edge of the viewport */ body::before, body::after { content: ''; position: fixed; top: 0; bottom: 0; width: 8px; background: rgba(255,255,255,0.65); pointer-events: none; z-index: 0; } body::before { left: 0; } body::after { right: 0; } /* Hash marks: short horizontal white dashes in a repeating pattern. Rendered via the .field-hashes div output by header.php right after . */ .field-hashes { position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: /* Left hash column */ repeating-linear-gradient( to bottom, transparent 0px, transparent 83px, rgba(255,255,255,0.50) 83px, rgba(255,255,255,0.50) 87px ), /* Right hash column */ repeating-linear-gradient( to bottom, transparent 0px, transparent 83px, rgba(255,255,255,0.50) 83px, rgba(255,255,255,0.50) 87px ); background-size: 28px 90px, 28px 90px; background-position: calc(50% - 260px) 22px, /* left hash band */ calc(50% + 233px) 22px; /* right hash band */ background-repeat: repeat-y, repeat-y; } .container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; background: var(--card); padding: 30px; border: 1px solid rgba(255,255,255,0.25); border-radius: 2px; box-shadow: 0 0 0 2px rgba(255,255,255,0.15), /* subtle white glow */ 0 8px 0 -2px rgba(0,0,0,0.5), /* ground shadow */ 0 12px 40px rgba(0, 0, 0, 0.55); /* deep drop shadow */ background-image: repeating-linear-gradient( 0deg, transparent, transparent 28px, rgba(43, 29, 18, 0.02) 28px, rgba(43, 29, 18, 0.02) 29px ); } h1 { font-family: 'Playfair Display', 'Georgia', serif; color: var(--brand); margin-bottom: 6px; text-align: center; font-size: 32px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; border-bottom: 3px double var(--brand); padding-bottom: 10px; } h2 { font-family: 'Playfair Display', 'Georgia', serif; color: var(--navy); margin-bottom: 16px; font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--line); padding-bottom: 6px; } h3 { font-family: 'Playfair Display', 'Georgia', serif; color: var(--navy); margin-bottom: 10px; font-weight: 700; } .menu { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; } /* ── Buttons ────────────────────────────────────────────────────────── */ .btn { display: inline-block; padding: 10px 22px; background-color: var(--navy); color: #fbf6ea; text-decoration: none; border-radius: 2px; border: 1px solid var(--navy); cursor: pointer; font-size: 14px; font-weight: 700; font-family: 'Georgia', serif; letter-spacing: 0.4px; text-transform: uppercase; transition: background-color 0.15s, color 0.15s; } .btn:hover { background-color: var(--navy-2); } .btn-secondary { background-color: transparent; color: var(--navy); } .btn-secondary:hover { background-color: var(--navy); color: #fbf6ea; } .btn-success { background-color: var(--brand); border-color: var(--brand); color: #fbf6ea; } .btn-success:hover { background-color: var(--brand-2); border-color: var(--brand-2); } .btn-danger { background-color: var(--brand); border-color: var(--brand); color: #fbf6ea; } .btn-danger:hover { background-color: var(--brand-2); border-color: var(--brand-2); } .btn-warning, .btn-accent { background-color: var(--gold); border-color: var(--gold); color: var(--ink); } .btn-warning:hover, .btn-accent:hover { background-color: #9c7129; border-color: #9c7129; color: #fbf6ea; } /* ── Forms ──────────────────────────────────────────────────────────── */ .form-group { margin-bottom: 20px; } label { display: block; margin-bottom: 5px; color: var(--ink); font-weight: 700; font-family: 'Georgia', serif; letter-spacing: 0.3px; } input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="date"], select, textarea { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 2px; font-size: 14px; font-family: 'Georgia', serif; background: #fdfaf0; color: var(--ink); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.12); } textarea { min-height: 100px; resize: vertical; } /* ── Franchise list (home) ──────────────────────────────────────────── */ .franchise-list { list-style: none; margin-top: 20px; } .franchise-item { padding: 16px 18px; background: var(--card-2); border: 1px solid var(--line); border-left: 4px solid var(--brand); margin-bottom: 10px; border-radius: 2px; display: flex; justify-content: space-between; align-items: center; } .franchise-info { flex: 1; } .franchise-info h3 { color: var(--brand); margin-bottom: 4px; font-family: 'Playfair Display', 'Georgia', serif; } .franchise-info p { color: var(--muted); margin: 0; font-style: italic; } /* ── Navigation row (non in-season pages) ───────────────────────────── */ .navigation { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); } .navigation a { margin-right: 10px; } /* Only indent the nav row on pages whose container actually has the top-left user-nav button (i.e. pages that include header.php). Standalone pages that build their own .container/.navigation are left untouched. */ .container:has(> .user-nav) .navigation { padding-left: 46px; } /* ── User nav (top-left dropdown menu, rendered by header.php) ───────── */ .user-nav { position: absolute; top: 20px; left: 20px; z-index: 1000; font-family: 'Georgia', serif; } .user-nav-toggle { width: 48px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: var(--navy); border: 1px solid var(--navy-2); border-radius: 3px; cursor: pointer; padding: 0; transition: background-color 0.15s; } .user-nav-toggle:hover { background: var(--navy-2); } .user-nav-toggle span { display: block; width: 24px; height: 3px; background: #fbf6ea; border-radius: 2px; } .user-nav-menu { display: none; position: absolute; top: 0; left: 0; z-index: 1; min-width: 190px; background: var(--navy); border: 1px solid var(--navy-2); border-radius: 3px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); padding: 6px 0; } .user-nav.open .user-nav-menu { display: block; } .user-nav-item { display: block; padding: 11px 22px; color: #fbf6ea; text-decoration: none; font-size: 16px; font-weight: 600; letter-spacing: 0.3px; transition: background-color 0.12s, color 0.12s; } .user-nav-item:hover, .user-nav-item:focus { background: var(--brand); color: #fbf6ea; outline: none; } /* ── Tables ─────────────────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; margin-top: 20px; background: var(--card-2); border: 1px solid var(--line); } th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line-soft); } th { background-color: var(--navy); color: #0066ea; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; font-size: 12px; font-family: 'Georgia', serif; } tr:hover { background-color: rgba(181, 136, 54, 0.08); } tbody tr:nth-child(even) { background-color: rgba(43, 29, 18, 0.02); } /* ── Info / alert boxes ─────────────────────────────────────────────── */ .info-box { background-color: #f6efdc; border: 1px solid var(--line); border-left: 5px solid var(--gold); padding: 14px 18px; border-radius: 2px; margin-bottom: 20px; font-style: italic; } .info-box p { margin: 4px 0; color: var(--ink); } .info-box strong { color: var(--brand); font-style: normal; text-transform: uppercase; letter-spacing: 0.5px; font-size: 13px; font-family: 'Georgia', serif; } .alert { padding: 12px 20px; margin-bottom: 20px; border-radius: 2px; border: 1px solid var(--line); font-family: 'Georgia', serif; } .alert-success { background-color: #ecefd9; color: #3d4a16; border-color: #b9c187; border-left: 5px solid #5a7a2e; } .alert-error, .alert-danger { background-color: #f4dcd0; color: var(--brand-2); border-color: #d6a896; border-left: 5px solid var(--brand); } .alert-info { background-color: #e0e7f0; color: var(--navy-2); border-color: #b3c1d4; border-left: 5px solid var(--navy); }