/* Stadium Food & Beverage Policies — site styles. Built on Pawpaw Analytics design tokens (colors_and_type.css). Fonts + Font Awesome are loaded in each page . */ :root { /* Brand palette */ --ppa-pacific-cyan: #2EB2CE; --ppa-mint: #6EB07E; --ppa-flame: #E4572E; --ppa-paynes-gray: #525B76; --ppa-space-cadet: #1b2f33; --ppa-cyan-600: #1f8aa3; --ppa-gray-800: #1b2f33; /* Semantic */ --fg-1: #1b2f33; --fg-2: #525B76; --fg-3: #7a8296; --fg-on-color: #ffffff; --bg-1: #ffffff; --bg-2: #f6f7f9; --border-1: rgba(82, 91, 118, 0.20); --border-2: rgba(82, 91, 118, 0.10); --success: var(--ppa-mint); --danger: var(--ppa-flame); --tint-success: rgba(110, 176, 126, 0.10); --tint-danger: rgba(228, 87, 46, 0.10); --tint-neutral: rgba(82, 91, 118, 0.10); --warning: #C8860A; --tint-warning: rgba(200, 134, 10, 0.10); /* Type */ --font-display: 'Comfortaa', 'Trebuchet MS', cursive; --font-body: 'Solway', Georgia, serif; --font-mono: 'Roboto Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace; --fs-xs: 0.75rem; --fs-sm: 0.875rem; /* Spacing / radius / shadow */ --space-2: 0.50rem; --space-3: 1.00rem; --space-4: 1.50rem; --space-5: 3.00rem; --radius: 0.375rem; --radius-lg: 0.5rem; --radius-pill: 50rem; --shadow-sm: 0 2px 4px rgba(15, 26, 28, 0.08); --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* The neutral brand gradient used for every hero (no per-team colors) */ --hero-start: var(--ppa-space-cadet); --hero-end: var(--ppa-paynes-gray); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-body); line-height: 1.55; color: var(--fg-1); background: var(--bg-2); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 var(--space-3); } a { color: var(--ppa-pacific-cyan); text-decoration: none; } a:hover, a:focus { color: var(--ppa-cyan-600); } .eyebrow { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-2); margin: 0 0 var(--space-2); } /* ---------- Navbar ---------- */ .ppa-navbar { display: flex; align-items: center; gap: var(--space-3); padding: 0.75rem var(--space-4); background: var(--bg-1); border-bottom: 1px solid var(--border-1); } .ppa-navbar__brand, .ppa-navbar__back { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-weight: 700; color: var(--fg-1); } .ppa-navbar__logo { height: 28px; width: auto; } .ppa-navbar__spacer { flex: 1; } .ppa-navbar__eyebrow { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-2); } /* ---------- Disclaimer ---------- */ /* ---------- Hero ---------- */ .page-hero { background: linear-gradient(135deg, var(--hero-start), var(--hero-end)); color: var(--fg-on-color); padding: var(--space-5) var(--space-4); } .page-hero .eyebrow { color: rgba(255, 255, 255, 0.75); } .page-hero__inner { max-width: 960px; margin: 0 auto; } .page-hero h1 { color: var(--fg-on-color); font-size: 2.25rem; } .page-hero__sub { max-width: 60ch; color: rgba(255, 255, 255, 0.9); } .page-hero__venue { display: flex; align-items: center; gap: 0.45rem; font-family: var(--font-display); font-weight: 500; color: rgba(255, 255, 255, 0.92); margin: 0 0 var(--space-3); } .page-hero__link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.35); color: var(--fg-on-color); font-family: var(--font-display); font-weight: 500; transition: background 0.25s ease; } .page-hero__link:hover { background: rgba(255, 255, 255, 0.26); color: var(--fg-on-color); } .page-hero__updated { display: block; margin-top: var(--space-3); font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.7); } /* ---------- Page body ---------- */ .page-body { max-width: 960px; margin: 0 auto; padding: var(--space-5) var(--space-4); } /* ---------- Teams search ---------- */ .teams-search { position: relative; margin-bottom: var(--space-4); } .teams-search__icon { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--fg-3); pointer-events: none; font-size: var(--fs-sm); } .teams-search__input { width: 100%; padding: 0.6rem 1rem 0.6rem 2.4rem; font-family: var(--font-body); font-size: 1rem; color: var(--fg-1); background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-pill); outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; -webkit-appearance: none; } .teams-search__input:focus { border-color: var(--ppa-pacific-cyan); box-shadow: 0 0 0 3px rgba(46, 178, 206, 0.15); } .teams-search__input::placeholder { color: var(--fg-3); } /* ---------- Teams grid (index) ---------- On wide screens the tiles form a coarse US cartogram: each tile is placed in a fixed cell via the --col/--row custom properties emitted by build.py. Below the breakpoint it falls back to the roomy responsive grid (see media query). */ /* The map page uses the full width; the search bar stays centered + readable. */ .page-body--map { max-width: none; padding-block: var(--space-4); } .page-body--map .teams-search { max-width: 760px; margin-inline: auto; } .teams-grid { display: grid; /* minmax(0, 1fr) removes the implicit min-content floor on the tracks, so the box always honors `aspect-ratio` exactly and the cartogram keeps a consistent shape across screen sizes. */ grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(7, minmax(0, 1fr)); gap: 0.5rem; /* Fill the available real estate: size the grid to the largest box that fits the viewport height (so desktop never needs to scroll); width follows the aspect. height-bound max-width and the aspect ratio share the same factor (2.2). */ width: 100%; aspect-ratio: 2.2 / 1; max-width: calc((100vh - 26rem) * 2.2); margin-inline: auto; /* NOTE: a faint US-map backdrop SVG is mothballed in the assets folder — it still ships and can be re-enabled with a `background` rule here. */ } .team-tile { grid-column: var(--col); grid-row: var(--row); min-width: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.15rem; padding: 0.5rem 0.4rem; background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-lg); color: var(--fg-1); transition: all 0.3s ease; } .team-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--ppa-pacific-cyan); color: var(--fg-1); } .team-tile__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(0.72rem, 0.85vw, 0.95rem); line-height: 1.15; } .team-tile__venue { display: none; /* hidden on the map, kept in the DOM so search still matches it */ font-family: var(--font-body); font-size: var(--fs-sm); color: var(--fg-2); } .team-tile__location { font-family: var(--font-mono); font-size: clamp(0.58rem, 0.65vw, 0.72rem); color: var(--fg-3); letter-spacing: 0.02em; } @media (max-width: 860px) { .page-body--map { max-width: 960px; padding-block: var(--space-5); } .teams-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-template-rows: none; grid-auto-rows: auto; width: auto; aspect-ratio: auto; max-width: none; gap: var(--space-3); } .team-tile { grid-column: auto; grid-row: auto; gap: 0.4rem; padding: var(--space-4); } .team-tile__name { font-size: 0.95rem; } .team-tile__venue { display: block; } .team-tile__location { font-size: var(--fs-xs); } } /* ---------- Policy meta ---------- */ .policy-meta { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--fg-2); margin: 0 0 var(--space-4); } /* ---------- Policy cards (team page) ---------- */ .policy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); } .policy-card { display: flex; flex-direction: column; gap: 0.6rem; padding: var(--space-4); background: var(--bg-1); border: 1px solid var(--border-1); border-left: 4px solid var(--fg-3); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .policy-card--allowed { border-left-color: var(--success); } .policy-card--exceptions { border-left-color: var(--warning); } .policy-card--denied { border-left-color: var(--danger); } .policy-card--unknown { border-left-color: var(--fg-3); } .policy-card__header { display: flex; align-items: center; gap: 0.6rem; } .policy-card__icon { font-size: 1.1rem; color: var(--fg-2); } .policy-card__title { font-size: 1.05rem; margin: 0; } .policy-card__status { display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start; padding: 0.25rem 0.7rem; border-radius: var(--radius-pill); font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; } .policy-card__status--allowed { background: var(--tint-success); color: #4a7c56; } .policy-card__status--exceptions { background: var(--tint-warning); color: #8a5d07; } .policy-card__status--denied { background: var(--tint-danger); color: #a8371d; } .policy-card__status--unknown { background: var(--tint-neutral); color: var(--fg-2); } .policy-card__details { margin: 0; font-size: var(--fs-sm); color: var(--fg-2); } /* ---------- Footer ---------- */ .site-footer { max-width: 960px; margin: 0 auto; padding: var(--space-4); border-top: 1px solid var(--border-2); font-size: var(--fs-sm); color: var(--fg-2); } .site-footer__disclaimer { display: flex; align-items: center; gap: 0.5rem; color: var(--fg-2); margin-bottom: var(--space-2); } .site-footer__disclaimer i { color: var(--ppa-pacific-cyan); }