:root {
--gbps-hero:    #07130D;
--gbps-green:   #203731;
--gbps-gold:    #FFB612;
--gbps-cream:   #F8F5EE;
--gbps-cream2:  #F0EBE1;
--gbps-border:  #D6CFC3;
--gbps-text:    #1A1A1A;
--gbps-muted:   #6B6560;
--gbps-win:     #2D6A4F;
--gbps-loss:    #9B2335;
--gbps-radius:  10px;
--gbps-shadow:  0 2px 16px rgba(7,19,13,.10);
--gbps-shadow-hover: 0 6px 28px rgba(7,19,13,.18);
} .gbps-reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .55s ease, transform .55s ease;
}
.gbps-reveal.gbps-visible {
opacity: 1;
transform: none;
} .gbps-page {
background: var(--gbps-cream);
min-height: 100vh;
} .gbps-hero {
position: relative;
min-height: clamp(480px, 72vh, 720px);
display: flex;
align-items: flex-end;
padding-bottom: 56px;
background-color: var(--gbps-hero);
background-image: var(--hero-bg, none);
background-size: cover;
background-position: center center;
overflow: hidden;
}
@media (max-width: 768px) { .gbps-hero { min-height: 60vh; padding-bottom: 36px; } }
.gbps-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(7,19,13,.1) 0%,
rgba(7,19,13,.55) 50%,
rgba(7,19,13,.92) 100%
);
z-index: 1;
}
.gbps-hero__inner {
position: relative;
z-index: 3;
max-width: 820px;
margin: 0 0 0 clamp(24px, 5vw, 80px);
padding: 0 24px 0 0;
width: 100%;
}
.gbps-hero__chips {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.gbps-chip {
display: inline-flex;
align-items: center;
height: 28px;
padding: 0 14px;
border-radius: 100px;
background: rgba(255,182,18,.18);
border: 1px solid rgba(255,182,18,.35);
color: var(--gbps-gold);
font-family: 'Barlow Condensed', sans-serif;
font-size: .75rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.gbps-hero__title {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(2.6rem, 6vw, 4.4rem);
font-weight: 800;
color: #fff;
line-height: 1.0;
margin: 0 0 14px;
text-transform: uppercase;
letter-spacing: .01em;
}
.gbps-hero__year {
color: var(--gbps-gold);
}
.gbps-hero__sub {
font-family: 'Inter', sans-serif;
font-size: 1rem;
color: rgba(255,255,255,.72);
margin: 0;
} .gbps-stats-bar {
background: var(--gbps-green);
padding: 22px 24px;
border-top: 3px solid var(--gbps-gold);
}
.gbps-stats-bar__inner {
max-width: 920px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 4px 0;
} .gbps-stat-group {
display: flex;
align-items: center;
flex: 1;
}
.gbps-stat-group--record {
gap: 0;
}
.gbps-stat-group__wl {
display: flex;
align-items: center;
}
.gbps-stat-group--schedule {
flex: 1;
} .gbps-stat-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 24px;
gap: 2px;
flex: 0 0 auto;
}
.gbps-stat-item__val {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.75rem;
font-weight: 800;
color: var(--gbps-gold);
line-height: 1;
}
.gbps-stat-item__lbl {
font-family: 'Inter', sans-serif;
font-size: .68rem;
font-weight: 600;
color: rgba(255,255,255,.55);
text-transform: uppercase;
letter-spacing: .07em;
white-space: nowrap;
}
.gbps-stat-divider {
width: 1px;
height: 36px;
background: rgba(255,182,18,.25);
align-self: center;
flex: 0 0 1px;
margin: 0 8px;
} .gbps-next {
background: var(--gbps-cream2);
border-bottom: 1px solid var(--gbps-border);
padding: 48px 24px;
}
.gbps-next__inner {
max-width: 600px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.gbps-next__label {
font-family: 'Barlow Condensed', sans-serif;
font-size: .8rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gbps-muted);
display: flex;
align-items: center;
gap: 10px;
}
.gbps-next__label::before,
.gbps-next__label::after {
content: '';
display: block;
flex: 1;
height: 1px;
width: 60px;
background: var(--gbps-border);
}
.gbps-next .gbps-card--featured {
width: 100%;
max-width: 540px;
} .gbps-schedule {
padding: 52px 24px 80px;
}
.gbps-schedule__inner {
max-width: 920px;
margin: 0 auto;
} .gbps-tabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 40px;
margin-left: auto;
margin-right: auto;
padding: 4px;
background: var(--gbps-cream2);
border: 1px solid var(--gbps-border);
border-radius: 100px;
width: fit-content;
}
.gbps-tab {
padding: 9px 22px;
border-radius: 100px;
border: none;
background: transparent;
font-family: 'Barlow Condensed', sans-serif;
font-size: .95rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--gbps-muted);
cursor: pointer;
transition: background .2s, color .2s;
white-space: nowrap;
}
.gbps-tab:hover {
background: rgba(7,19,13,.07);
color: var(--gbps-text);
}
.gbps-tab--active {
background: var(--gbps-green);
color: #fff;
}
.gbps-tab--active:hover {
background: var(--gbps-green);
color: #fff;
} .gbps-section {
margin-bottom: 56px;
}
.gbps-section__title {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.5rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--gbps-green);
margin: 0 0 24px;
padding-bottom: 12px;
border-bottom: 2px solid var(--gbps-gold);
display: flex;
align-items: center;
gap: 12px;
} .gbps-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
} .gbps-card {
background: #fff;
border: 1px solid var(--gbps-border);
border-radius: var(--gbps-radius);
padding: 18px 20px 16px;
box-shadow: var(--gbps-shadow);
transition: box-shadow .2s, transform .2s;
display: flex;
flex-direction: column;
gap: 12px;
}
.gbps-card:hover {
box-shadow: var(--gbps-shadow-hover);
transform: translateY(-2px);
}
.gbps-card--featured {
border-color: var(--gbps-gold);
border-width: 2px;
background: linear-gradient(135deg, #fffef7 0%, #fff 100%);
}
.gbps-card--win    { border-left: 3px solid var(--gbps-win); }
.gbps-card--loss   { border-left: 3px solid var(--gbps-loss); }
.gbps-card--final  { background: #fafaf8; } .gbps-card__head {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.gbps-week-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 26px;
padding: 0 8px;
background: var(--gbps-green);
color: #fff;
font-family: 'Barlow Condensed', sans-serif;
font-size: .8rem;
font-weight: 700;
letter-spacing: .05em;
border-radius: 6px;
text-transform: uppercase;
}
.gbps-card__round {
font-family: 'Barlow Condensed', sans-serif;
font-size: .78rem;
font-weight: 600;
letter-spacing: .05em;
color: var(--gbps-muted);
text-transform: uppercase;
}
.gbps-ha-badge {
margin-left: auto;
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 10px;
border-radius: 100px;
font-family: 'Barlow Condensed', sans-serif;
font-size: .7rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.gbps-ha-badge--home {
background: rgba(32,55,49,.12);
color: var(--gbps-green);
}
.gbps-ha-badge--away {
background: rgba(255,182,18,.15);
color: #8b6300;
} .gbps-card__matchup {
display: flex;
align-items: center;
gap: 12px;
}
.gbps-card__team {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
min-width: 0;
}
.gbps-card__logo {
width: 52px;
height: 52px;
object-fit: contain;
flex-shrink: 0;
}
.gbps-card--featured .gbps-card__logo {
width: 64px;
height: 64px;
}
.gbps-card__abbr {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--gbps-cream2);
font-family: 'Barlow Condensed', sans-serif;
font-size: 1rem;
font-weight: 800;
color: var(--gbps-green);
}
.gbps-card__team-name {
font-family: 'Inter', sans-serif;
font-size: .78rem;
font-weight: 600;
color: var(--gbps-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 110px;
}
.gbps-card__center {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.gbps-vs {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.5rem;
font-weight: 800;
color: var(--gbps-muted);
text-transform: uppercase;
letter-spacing: .05em;
}
.gbps-card__score {
display: flex;
align-items: center;
gap: 6px;
}
.gbps-card__score-val {
font-family: 'Barlow Condensed', sans-serif;
font-size: 2rem;
font-weight: 800;
color: var(--gbps-text);
line-height: 1;
min-width: 32px;
text-align: center;
}
.gbps-card__score-val--win {
color: var(--gbps-green);
}
.gbps-card--featured .gbps-card__score-val {
font-size: 2.6rem;
}
.gbps-card__score-sep {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.6rem;
font-weight: 700;
color: var(--gbps-muted);
line-height: 1;
} .gbps-status-pill {
display: inline-flex;
align-items: center;
height: 20px;
padding: 0 10px;
border-radius: 100px;
font-family: 'Barlow Condensed', sans-serif;
font-size: .7rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
.gbps-status-pill--final    { background: rgba(32,55,49,.10); color: var(--gbps-green); }
.gbps-status-pill--postponed{ background: rgba(255,182,18,.18); color: #7a5500; }
.gbps-status-pill--cancelled{ background: rgba(155,35,53,.12); color: var(--gbps-loss); } .gbps-card__meta {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding-top: 8px;
border-top: 1px solid var(--gbps-cream2);
}
.gbps-card__date {
font-family: 'Inter', sans-serif;
font-size: .8rem;
font-weight: 600;
color: var(--gbps-text);
}
.gbps-card__date--tbd {
color: var(--gbps-muted);
font-style: italic;
}
.gbps-card__time {
font-family: 'Barlow Condensed', sans-serif;
font-size: .85rem;
font-weight: 700;
color: var(--gbps-gold);
background: rgba(255,182,18,.10);
padding: 2px 8px;
border-radius: 4px;
}
.gbps-card__stadium {
font-family: 'Inter', sans-serif;
font-size: .73rem;
color: var(--gbps-muted);
margin-left: auto;
text-align: right;
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} .gbps-card__cta {
padding-top: 4px;
}
.gbps-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 9px 20px;
background: var(--gbps-green);
color: #fff;
font-family: 'Barlow Condensed', sans-serif;
font-size: .9rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
border-radius: 6px;
transition: background .2s, transform .15s;
}
.gbps-btn:hover {
background: #162920;
transform: translateX(2px);
color: #fff;
text-decoration: none;
} .gbps-card--bye {
background: var(--gbps-cream2);
border-style: dashed;
border-color: var(--gbps-border);
box-shadow: none;
}
.gbps-card--bye:hover {
transform: none;
box-shadow: none;
}
.gbps-card__bye-body {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 16px 0 8px;
}
.gbps-bye-label {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.4rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--gbps-muted);
}
.gbps-bye-sub {
font-family: 'Inter', sans-serif;
font-size: .78rem;
color: var(--gbps-muted);
text-align: center;
} .gbps-empty {
max-width: 520px;
margin: 60px auto;
text-align: center;
padding: 48px 32px;
background: #fff;
border: 1px solid var(--gbps-border);
border-radius: var(--gbps-radius);
}
.gbps-empty--inline {
margin: 0;
padding: 32px 24px;
text-align: left;
}
.gbps-empty p {
font-family: 'Inter', sans-serif;
font-size: .95rem;
color: var(--gbps-muted);
margin: 0;
} @media (max-width: 900px) {
.gbps-cards-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.gbps-hero {
min-height: 300px;
padding-bottom: 44px;
} .gbps-stats-bar { padding: 0; }
.gbps-stats-bar__inner {
flex-direction: column;
gap: 0;
} .gbps-stat-group--record {
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 24px 20px 20px;
}
.gbps-stat-item--hero {
align-items: center;
padding: 0 0 16px;
border-bottom: 1px solid rgba(255,182,18,.15);
margin-bottom: 16px;
}
.gbps-stat-item--hero .gbps-stat-item__val {
font-size: 3rem;
letter-spacing: -0.02em;
}
.gbps-stat-item--hero .gbps-stat-item__lbl {
font-size: .7rem;
color: rgba(255,255,255,.5);
}
.gbps-stat-group__wl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.gbps-stat-item--win,
.gbps-stat-item--loss {
padding: 8px 0;
align-items: center;
}
.gbps-stat-item--win { border-right: 1px solid rgba(255,182,18,.15); }
.gbps-stat-item--win .gbps-stat-item__val { color: #4ade80; }
.gbps-stat-item--loss .gbps-stat-item__val { color: #f87171; }
.gbps-stat-group__wl .gbps-stat-item__val { font-size: 2rem; }
.gbps-stat-group__wl .gbps-stat-item__lbl { font-size: .65rem; } .gbps-stat-divider {
width: 100%;
height: 1px;
background: rgba(255,182,18,.2);
margin: 0;
flex: none;
} .gbps-stat-group--schedule {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
padding: 4px 20px 20px;
}
.gbps-stat-group--schedule .gbps-stat-item {
padding: 14px 8px;
align-items: center;
}
.gbps-stat-group--schedule .gbps-stat-item:nth-child(odd) {
border-right: 1px solid rgba(255,182,18,.1);
}
.gbps-stat-group--schedule .gbps-stat-item:nth-child(-n+2) {
border-bottom: 1px solid rgba(255,182,18,.1);
}
.gbps-stat-group--schedule .gbps-stat-item__val { font-size: 1.5rem; }
.gbps-stat-group--schedule .gbps-stat-item__lbl { font-size: .63rem; }
.gbps-schedule {
padding: 36px 16px 60px;
}
.gbps-tabs {
width: 100%;
justify-content: center;
}
.gbps-tab {
padding: 8px 14px;
font-size: .85rem;
}
.gbps-next {
padding: 36px 16px;
}
.gbps-card__logo {
width: 42px;
height: 42px;
}
.gbps-card__score-val {
font-size: 1.7rem;
}
} @media (max-width: 768px) {
.gbps-hero {
min-height: 280px;
}
.gbps-next__label::before,
.gbps-next__label::after {
width: 32px;
}
.gbps-next .gbps-card--featured {
max-width: 100%;
}
.gbps-section__title {
font-size: 1.25rem;
}
.gbps-stat-item {
padding: 8px 16px;
}
.gbps-cards-grid {
grid-template-columns: 1fr;
}
.gbps-empty {
padding: 32px 16px;
}
} @media (max-width: 480px) {
.gbps-hero {
min-height: 220px;
}
.gbps-hero__inner {
padding: 0 16px;
}
.gbps-card__score-val {
font-size: 1.5rem;
}
.gbps-card__logo {
width: 36px;
height: 36px;
}
.gbps-card__team-name {
max-width: 80px;
font-size: .8rem;
}
.gbps-tabs {
gap: 4px;
}
.gbps-tab {
padding: 7px 14px;
font-size: .78rem;
}
}