:root {
--gcnl-hero:        #07130D;
--gcnl-green:       #203731;
--gcnl-gold:        #FFB612;
--gcnl-gold-dim:    rgba(255, 182, 18, .15);
--gcnl-gold-pale:   rgba(255, 182, 18, .08);
--gcnl-cream:       #F8F5EE;
--gcnl-cream2:      #F0EBE1;
--gcnl-white:       #FFFFFF;
--gcnl-text:        #1A1A1A;
--gcnl-muted:       #6B6560;
--gcnl-border:      #D6CFC3;
--gcnl-red-pale:    rgba(155, 0, 0, .06);
--gcnl-red:         #9B0000;
--gcnl-radius:      10px;
--gcnl-shadow:      0 2px 16px rgba(7, 19, 13, .08);
--gcnl-shadow-hover: 0 8px 32px rgba(7, 19, 13, .16);
--gcnl-transition:  .25s ease;
} .gcnl-page {
background: var(--gcnl-cream);
color: var(--gcnl-text);
font-family: 'Inter', sans-serif;
} .gcnl-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity .55s ease, transform .55s ease;
}
.gcnl-reveal.gcnl-visible {
opacity: 1;
transform: translateY(0);
} .gcnl-hero {
position: relative;
min-height: 88vh;
display: flex;
align-items: flex-end;
overflow: hidden;
background: var(--gcnl-hero);
color: #fff;
} .gcnl-hero__bg {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.gcnl-hero__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
display: block;
}
.gcnl-hero__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(to bottom,
rgba(32,55,49,0.35) 0%,
rgba(32,55,49,0.60) 50%,
rgba(32,55,49,0.92) 100%
),
linear-gradient(to right,
rgba(32,55,49,0.40) 0%,
transparent 60%
);
}
.gcnl-hero__grain {
position: absolute;
inset: 0;
opacity: .035;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
background-repeat: repeat;
}
.gcnl-hero__g-watermark { display: none; }
.gcnl-hero__lines { display: none; } .gcnl-hero__inner {
position: relative;
z-index: 1;
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: clamp(300px, 45vh, 420px) 24px 72px;
} .gcnl-hero__content {
display: flex;
flex-direction: column;
gap: 0;
}
.gcnl-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: .75rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gcnl-gold);
border: 1px solid rgba(255, 182, 18, .4);
border-radius: 20px;
padding: 5px 14px;
margin-bottom: 20px;
width: fit-content;
}
.gcnl-hero__title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(2.8rem, 7vw, 5.2rem);
line-height: .96;
letter-spacing: -.01em;
text-transform: uppercase;
color: #FFB612;
margin: 0 0 12px;
}
.gcnl-hero__subtitle {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(1.05rem, 2.2vw, 1.35rem);
color: #fff;
margin: 0 0 20px;
letter-spacing: .01em;
}
.gcnl-hero__divider {
width: 56px;
height: 3px;
background: var(--gcnl-gold);
border-radius: 2px;
margin-bottom: 24px;
}
.gcnl-hero__quote {
position: relative;
font-style: italic;
font-size: 1.1rem;
line-height: 1.65;
color: #ffffff;
background: rgba(255, 182, 18, .14);
border-left: 4px solid var(--gcnl-gold);
border-radius: 0 8px 8px 0;
padding: 20px 22px 20px 56px;
margin: 0 0 20px;
font-family: 'Inter', sans-serif;
max-width: 620px;
}
.gcnl-hero__quote::before {
content: '\201E';
position: absolute;
left: 14px;
top: 8px;
font-family: 'Barlow Condensed', sans-serif;
font-size: 4rem;
font-style: normal;
font-weight: 800;
line-height: 1;
color: var(--gcnl-gold);
opacity: .9;
}
.gcnl-hero__intro {
font-size: .975rem;
line-height: 1.65;
color: rgba(255, 255, 255, .92);
margin: 0 0 28px;
} .gcnl-hero__anchors {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gcnl-hero__chip {
display: inline-flex;
align-items: center;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: .82rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--gcnl-gold);
border: 1px solid rgba(255, 182, 18, .45);
border-radius: 20px;
padding: 7px 16px;
text-decoration: none;
transition: background var(--gcnl-transition), color var(--gcnl-transition);
}
.gcnl-hero__chip:hover {
background: var(--gcnl-gold);
color: var(--gcnl-hero);
border-color: var(--gcnl-gold);
} .gcnl-hero__image-slot {
position: relative;
border-radius: var(--gcnl-radius);
overflow: hidden;
aspect-ratio: 4/3;
}
.gcnl-hero__image-slot .gcnl-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--gcnl-radius);
display: block;
}
.gcnl-hero__image-slot .gcnl-placeholder {
height: 100%;
} .gcnl-sticky-nav {
position: sticky;
top: 0;
z-index: 100;
background: var(--gcnl-white);
border-bottom: 2px solid var(--gcnl-gold);
box-shadow: 0 2px 12px rgba(7, 19, 13, .08);
transform: translateY(-100%);
opacity: 0;
transition: transform .3s ease, opacity .3s ease;
pointer-events: none;
}
.gcnl-sticky-nav--visible {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.gcnl-sticky-nav__inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
display: flex;
gap: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.gcnl-sticky-nav__inner::-webkit-scrollbar {
display: none;
}
.gcnl-sticky-nav__inner a {
display: inline-flex;
align-items: center;
padding: 14px 18px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: .82rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gcnl-text);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
white-space: nowrap;
transition: color var(--gcnl-transition), border-color var(--gcnl-transition);
}
.gcnl-sticky-nav__inner a:hover,
.gcnl-sticky-nav__inner a.gcnl-nav-active {
color: var(--gcnl-green);
border-bottom-color: var(--gcnl-gold);
} .gcnl-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
}
.gcnl-container--narrow {
max-width: 760px;
}
.gcnl-section {
padding: 72px 0;
}
.gcnl-section--white  { background: var(--gcnl-white); }
.gcnl-section--cream  { background: var(--gcnl-cream); }
.gcnl-section--dark   { background: var(--gcnl-hero); color: #fff; }
.gcnl-section__heading {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(1.7rem, 4vw, 2.4rem);
text-transform: uppercase;
letter-spacing: -.01em;
color: var(--gcnl-green);
margin: 0 0 8px;
padding-left: 16px;
border-left: 4px solid var(--gcnl-gold);
line-height: 1.1;
}
.gcnl-section__heading--light {
color: #fff;
border-left-color: var(--gcnl-gold);
}
.gcnl-section__lead {
font-size: 1.05rem;
line-height: 1.65;
color: var(--gcnl-muted);
margin: 0 0 36px;
max-width: 720px;
}
.gcnl-section__lead--light {
color: rgba(255, 255, 255, .72);
}
.gcnl-section__image-slot {
margin-top: 40px;
border-radius: var(--gcnl-radius);
overflow: hidden;
}
.gcnl-section__image-slot--centered {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.gcnl-section__image-slot .gcnl-img {
width: 100%;
height: auto;
max-height: 420px;
object-fit: cover;
border-radius: var(--gcnl-radius);
display: block;
} .gcnl-checklist-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-top: 40px;
}
.gcnl-check-card {
display: flex;
flex-direction: column;
background: var(--gcnl-white);
border: 1px solid var(--gcnl-border);
border-radius: var(--gcnl-radius);
padding: 22px 18px 18px;
text-decoration: none;
color: inherit;
box-shadow: var(--gcnl-shadow);
transition: transform var(--gcnl-transition), box-shadow var(--gcnl-transition), border-color var(--gcnl-transition);
position: relative;
overflow: hidden;
}
.gcnl-check-card:hover {
transform: translateY(-3px);
box-shadow: var(--gcnl-shadow-hover);
border-color: var(--gcnl-gold);
}
.gcnl-check-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--gcnl-gold);
opacity: 0;
transition: opacity var(--gcnl-transition);
}
.gcnl-check-card:hover::before {
opacity: 1;
}
.gcnl-check-card__num {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: .72rem;
letter-spacing: .1em;
color: var(--gcnl-gold);
background: var(--gcnl-gold-pale);
border-radius: 4px;
padding: 2px 8px;
display: inline-block;
margin-bottom: 12px;
width: fit-content;
}
.gcnl-check-card__body {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.gcnl-check-card__icon {
font-size: 1.5rem;
line-height: 1;
}
.gcnl-check-card__title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 1.05rem;
text-transform: uppercase;
letter-spacing: .02em;
color: var(--gcnl-green);
margin: 4px 0 0;
}
.gcnl-check-card__desc {
font-size: .85rem;
line-height: 1.55;
color: var(--gcnl-muted);
margin: 0;
}
.gcnl-check-card__arrow {
font-size: 1.1rem;
color: var(--gcnl-gold);
margin-top: 12px;
font-weight: 700;
align-self: flex-end;
} .gcnl-info-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: 40px;
}
.gcnl-info-card {
background: var(--gcnl-white);
border: 1px solid var(--gcnl-border);
border-top: 3px solid var(--gcnl-gold);
border-radius: var(--gcnl-radius);
padding: 0;
box-shadow: var(--gcnl-shadow);
overflow: hidden;
display: flex;
flex-direction: column;
}
.gcnl-info-card__header {
display: flex;
align-items: center;
gap: 12px;
padding: 22px 24px 16px;
border-bottom: 1px solid var(--gcnl-border);
}
.gcnl-info-card__icon {
font-size: 1.6rem;
line-height: 1;
flex-shrink: 0;
}
.gcnl-info-card__title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 1.15rem;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--gcnl-green);
margin: 0;
}
.gcnl-info-card__body {
padding: 20px 24px 24px;
flex: 1;
display: flex;
flex-direction: column;
gap: 14px;
}
.gcnl-info-card__body p {
font-size: .93rem;
line-height: 1.6;
color: var(--gcnl-text);
margin: 0;
}
.gcnl-info-card__fee {
font-size: .88rem;
color: var(--gcnl-muted);
}
.gcnl-info-card__image {
margin-top: auto;
border-radius: 6px;
overflow: hidden;
}
.gcnl-info-card__image .gcnl-img {
width: 100%;
height: 160px;
object-fit: cover;
display: block;
}
.gcnl-info-card__image .gcnl-placeholder {
height: 120px;
border-radius: 6px;
} .gcnl-tip-box {
background: var(--gcnl-gold-pale);
border-left: 3px solid var(--gcnl-gold);
border-radius: 0 6px 6px 0;
padding: 10px 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.gcnl-tip-box--standalone {
margin-top: 24px;
max-width: 680px;
}
.gcnl-tip-box__label {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: .75rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gcnl-green);
}
.gcnl-tip-box p {
font-size: .88rem;
line-height: 1.5;
color: var(--gcnl-text);
margin: 0;
} .gcnl-warning-box {
background: var(--gcnl-red-pale);
border-left: 3px solid var(--gcnl-red);
border-radius: 0 6px 6px 0;
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 16px;
}
.gcnl-warning-box__label {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: .75rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gcnl-red);
}
.gcnl-warning-box p {
font-size: .9rem;
line-height: 1.5;
color: var(--gcnl-text);
margin: 0;
} .gcnl-chips-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
.gcnl-chips-row--large {
margin-top: 24px;
margin-bottom: 8px;
}
.gcnl-chip {
display: inline-flex;
align-items: center;
font-size: .82rem;
font-family: 'Inter', sans-serif;
font-weight: 500;
color: var(--gcnl-text);
background: var(--gcnl-white);
border: 1px solid var(--gcnl-border);
border-radius: 20px;
padding: 5px 14px;
transition: background var(--gcnl-transition), border-color var(--gcnl-transition), color var(--gcnl-transition);
cursor: default;
}
.gcnl-chip--app {
font-weight: 600;
letter-spacing: .01em;
}
.gcnl-chip:hover {
background: var(--gcnl-gold-dim);
border-color: var(--gcnl-gold);
color: var(--gcnl-green);
} .gcnl-big-highlight {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(1.1rem, 3vw, 1.6rem);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--gcnl-gold);
margin: 24px 0 12px;
line-height: 1.2;
}
.gcnl-route {
display: flex;
align-items: flex-start;
gap: 0;
margin: 40px 0 32px;
position: relative;
}
.gcnl-route__step {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
position: relative;
}
.gcnl-route__circle {
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(255, 182, 18, .12);
border: 2px solid rgba(255, 182, 18, .35);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
position: relative;
z-index: 1;
flex-shrink: 0;
}
.gcnl-route__circle--gold {
background: var(--gcnl-gold);
border-color: var(--gcnl-gold);
font-size: 1.5rem;
}
.gcnl-route__connector {
position: absolute;
top: 28px;
left: calc(50% + 28px);
right: calc(-50% + 28px);
height: 2px;
background: linear-gradient(90deg, rgba(255, 182, 18, .5), rgba(255, 182, 18, .15));
z-index: 0;
}
.gcnl-route__step--last .gcnl-route__connector {
display: none;
}
.gcnl-route__label {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: .82rem;
letter-spacing: .04em;
text-transform: uppercase;
color: rgba(255, 255, 255, .7);
text-align: center;
margin-top: 10px;
padding: 0 4px;
line-height: 1.3;
}
.gcnl-route__label--gold {
color: var(--gcnl-gold);
font-weight: 700;
font-size: .9rem;
} .gcnl-tip-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 32px;
}
.gcnl-tip-card {
display: flex;
gap: 14px;
background: var(--gcnl-white);
border: 1px solid var(--gcnl-border);
border-radius: var(--gcnl-radius);
padding: 18px 16px;
box-shadow: var(--gcnl-shadow);
align-items: flex-start;
}
.gcnl-tip-card__num {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: 1.4rem;
color: var(--gcnl-gold);
line-height: 1;
flex-shrink: 0;
min-width: 24px;
}
.gcnl-tip-card__body {
flex: 1;
}
.gcnl-tip-card__title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: .95rem;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--gcnl-green);
margin: 0 0 6px;
}
.gcnl-tip-card__body p {
font-size: .86rem;
line-height: 1.55;
color: var(--gcnl-muted);
margin: 0;
} .gcnl-motel-tip {
display: flex;
gap: 18px;
align-items: flex-start;
background: var(--gcnl-gold-pale);
border: 1px solid var(--gcnl-gold-dim);
border-left: 4px solid var(--gcnl-gold);
border-radius: var(--gcnl-radius);
padding: 22px 24px;
margin-top: 32px;
}
.gcnl-motel-tip__icon {
font-size: 2rem;
line-height: 1;
flex-shrink: 0;
}
.gcnl-motel-tip__title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--gcnl-green);
margin: 0 0 6px;
}
.gcnl-motel-tip__body p {
font-size: .9rem;
line-height: 1.6;
color: var(--gcnl-text);
margin: 0;
} .gcnl-accom-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 32px;
}
.gcnl-accom-card {
background: var(--gcnl-white);
border: 1px solid var(--gcnl-border);
border-radius: var(--gcnl-radius);
overflow: hidden;
box-shadow: var(--gcnl-shadow);
transition: transform var(--gcnl-transition), box-shadow var(--gcnl-transition);
}
.gcnl-accom-card:hover {
transform: translateY(-3px);
box-shadow: var(--gcnl-shadow-hover);
}
.gcnl-accom-card__badge {
background: var(--gcnl-green);
color: var(--gcnl-gold);
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: .78rem;
letter-spacing: .08em;
text-transform: uppercase;
padding: 8px 16px;
display: block;
}
.gcnl-accom-card__body {
padding: 16px 18px 20px;
}
.gcnl-accom-card__title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 1.1rem;
text-transform: uppercase;
color: var(--gcnl-green);
margin: 0 0 8px;
}
.gcnl-accom-card__body p {
font-size: .88rem;
line-height: 1.55;
color: var(--gcnl-muted);
margin: 0;
} .gcnl-tickets-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin-top: 40px;
align-items: start;
}
.gcnl-tickets-col__heading {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: .04em;
margin: 0 0 16px;
}
.gcnl-tickets-col__heading--safe {
color: var(--gcnl-green);
}
.gcnl-tickets-col__heading--warn {
color: var(--gcnl-red);
}
.gcnl-ticket-btns {
display: flex;
flex-direction: column;
gap: 10px;
}
.gcnl-ticket-btn {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--gcnl-green);
color: #fff;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: .92rem;
letter-spacing: .04em;
text-transform: uppercase;
text-decoration: none;
padding: 13px 18px;
border-radius: var(--gcnl-radius);
border: 1px solid transparent;
transition: background var(--gcnl-transition), transform var(--gcnl-transition);
}
.gcnl-ticket-btn:hover {
background: #162a24;
transform: translateY(-1px);
} .gcnl-fb-link {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 14px;
}
.gcnl-fb-link__note {
font-size: .78rem;
color: var(--gcnl-red);
font-style: italic;
padding-left: 4px;
} .gcnl-seating-tips {
margin-top: 56px;
}
.gcnl-seating-tips__heading {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 1.25rem;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--gcnl-green);
margin: 0 0 20px;
padding-left: 14px;
border-left: 3px solid var(--gcnl-gold);
}
.gcnl-seating-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.gcnl-seat-card {
display: flex;
gap: 12px;
align-items: flex-start;
background: var(--gcnl-cream);
border: 1px solid var(--gcnl-border);
border-radius: var(--gcnl-radius);
padding: 14px 16px;
}
.gcnl-seat-card__num {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: 1.3rem;
color: var(--gcnl-gold);
line-height: 1;
flex-shrink: 0;
min-width: 20px;
}
.gcnl-seat-card p {
font-size: .86rem;
line-height: 1.55;
color: var(--gcnl-text);
margin: 0;
} .gcnl-exp-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 40px;
}
.gcnl-exp-card {
background: var(--gcnl-white);
border: 1px solid var(--gcnl-border);
border-radius: var(--gcnl-radius);
overflow: hidden;
box-shadow: var(--gcnl-shadow);
transition: transform var(--gcnl-transition), box-shadow var(--gcnl-transition);
display: flex;
flex-direction: column;
}
.gcnl-exp-card:hover {
transform: translateY(-3px);
box-shadow: var(--gcnl-shadow-hover);
}
.gcnl-exp-card__image {
aspect-ratio: 16/9;
overflow: hidden;
flex-shrink: 0;
}
.gcnl-exp-card__image .gcnl-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .4s ease;
}
.gcnl-exp-card:hover .gcnl-exp-card__image .gcnl-img {
transform: scale(1.03);
}
.gcnl-exp-card__image .gcnl-placeholder {
height: 100%;
}
.gcnl-exp-card__body {
padding: 22px 20px 20px;
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.gcnl-exp-card__title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 1.15rem;
text-transform: uppercase;
letter-spacing: .02em;
color: var(--gcnl-green);
margin: 0;
}
.gcnl-exp-card__body p {
font-size: .88rem;
line-height: 1.6;
color: var(--gcnl-muted);
margin: 0;
flex: 1;
} .gcnl-gameday-opening {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(1.15rem, 3.5vw, 1.8rem);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--gcnl-gold);
margin: 8px 0 40px;
} .gcnl-timeline {
position: relative;
display: flex;
flex-direction: column;
gap: 0;
padding-left: 40px;
margin-bottom: 48px;
}
.gcnl-timeline::before {
content: '';
position: absolute;
left: 17px;
top: 24px;
bottom: 24px;
width: 2px;
background: linear-gradient(to bottom, var(--gcnl-gold), rgba(255, 182, 18, .2));
}
.gcnl-timeline__item {
display: flex;
gap: 20px;
align-items: flex-start;
padding: 0 0 28px;
position: relative;
}
.gcnl-timeline__item--last {
padding-bottom: 0;
}
.gcnl-timeline__dot {
position: absolute;
left: -40px;
top: 0;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--gcnl-white);
border: 2px solid var(--gcnl-gold);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
z-index: 1;
}
.gcnl-timeline__dot--gold {
background: var(--gcnl-gold);
border-color: var(--gcnl-gold);
}
.gcnl-timeline__num {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: .9rem;
color: var(--gcnl-green);
line-height: 1;
}
.gcnl-timeline__dot--gold .gcnl-timeline__num {
color: var(--gcnl-hero);
}
.gcnl-timeline__content {
background: var(--gcnl-white);
border: 1px solid var(--gcnl-border);
border-radius: var(--gcnl-radius);
padding: 18px 20px;
flex: 1;
box-shadow: var(--gcnl-shadow);
}
.gcnl-timeline__title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 1.05rem;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--gcnl-green);
margin: 0 0 6px;
}
.gcnl-timeline__title--gold {
color: var(--gcnl-gold);
font-size: 1.15rem;
}
.gcnl-timeline__content p {
font-size: .9rem;
line-height: 1.6;
color: var(--gcnl-muted);
margin: 0;
} .gcnl-gameday-images {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-top: 12px;
}
.gcnl-gameday-images__slot {
display: flex;
flex-direction: column;
gap: 6px;
}
.gcnl-gameday-images__slot .gcnl-img,
.gcnl-gameday-images__slot img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
border-radius: var(--gcnl-radius);
display: block;
}
.gcnl-gameday-images__slot .gcnl-placeholder {
aspect-ratio: 4/3;
border-radius: var(--gcnl-radius);
}
.gcnl-gameday-images__caption {
font-size: .75rem;
color: var(--gcnl-muted);
text-align: center;
margin: 0;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
} .gcnl-final-checklist {
list-style: none;
margin: 32px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.gcnl-check-item {
display: flex;
align-items: center;
gap: 14px;
background: var(--gcnl-white);
border: 1px solid var(--gcnl-border);
border-radius: var(--gcnl-radius);
padding: 14px 18px;
cursor: pointer;
transition: background var(--gcnl-transition), border-color var(--gcnl-transition), transform var(--gcnl-transition);
user-select: none;
box-shadow: var(--gcnl-shadow);
}
.gcnl-check-item:hover {
border-color: var(--gcnl-gold);
transform: translateX(2px);
}
.gcnl-check-item:focus {
outline: 2px solid var(--gcnl-gold);
outline-offset: 2px;
}
.gcnl-check-item__box {
width: 22px;
height: 22px;
border: 2px solid var(--gcnl-border);
border-radius: 5px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--gcnl-transition), border-color var(--gcnl-transition);
position: relative;
}
.gcnl-check-item__box::after {
content: '';
width: 6px;
height: 10px;
border: 2px solid #fff;
border-top: 0;
border-left: 0;
transform: rotate(45deg) scaleY(0);
transform-origin: bottom;
transition: transform .15s ease;
position: absolute;
top: 1px;
}
.gcnl-check-item__label {
font-size: .93rem;
font-weight: 500;
color: var(--gcnl-text);
transition: color var(--gcnl-transition), text-decoration var(--gcnl-transition);
} .gcnl-check-item--done {
background: rgba(32, 55, 49, .04);
border-color: var(--gcnl-green);
}
.gcnl-check-item--done .gcnl-check-item__box {
background: var(--gcnl-green);
border-color: var(--gcnl-green);
}
.gcnl-check-item--done .gcnl-check-item__box::after {
transform: rotate(45deg) scaleY(1);
}
.gcnl-check-item--done .gcnl-check-item__label {
color: var(--gcnl-muted);
text-decoration: line-through;
} .gcnl-btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: .88rem;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
border-radius: var(--gcnl-radius);
padding: 11px 20px;
transition: background var(--gcnl-transition), color var(--gcnl-transition), transform var(--gcnl-transition), box-shadow var(--gcnl-transition);
cursor: pointer;
border: 2px solid transparent;
width: fit-content;
}
.gcnl-btn:hover {
transform: translateY(-2px);
}
.gcnl-btn--primary {
background: var(--gcnl-green);
color: #fff;
margin-top: auto;
}
.gcnl-btn--primary:hover {
background: #162a24;
box-shadow: 0 4px 16px rgba(32, 55, 49, .25);
}
.gcnl-btn--gold {
background: var(--gcnl-gold);
color: var(--gcnl-hero);
}
.gcnl-btn--gold:hover {
background: #e6a410;
box-shadow: 0 4px 20px rgba(255, 182, 18, .3);
}
.gcnl-btn--outline {
background: transparent;
color: var(--gcnl-green);
border-color: var(--gcnl-green);
}
.gcnl-btn--outline:hover {
background: var(--gcnl-green);
color: #fff;
}
.gcnl-btn--outline-light {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .4);
}
.gcnl-btn--outline-light:hover {
background: rgba(255, 255, 255, .1);
border-color: rgba(255, 255, 255, .7);
}
.gcnl-btn--sm {
font-size: .78rem;
padding: 8px 14px;
} .gcnl-link {
color: var(--gcnl-green);
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 600;
transition: color var(--gcnl-transition);
}
.gcnl-link:hover {
color: var(--gcnl-gold);
} .gcnl-cta {
background: var(--gcnl-green);
padding: 80px 24px;
text-align: center;
color: #fff;
}
.gcnl-cta__heading {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(1.8rem, 4.5vw, 2.8rem);
text-transform: uppercase;
letter-spacing: -.01em;
color: #fff;
margin: 0 0 16px;
}
.gcnl-cta__text {
font-size: 1.05rem;
line-height: 1.65;
color: rgba(255, 255, 255, .78);
max-width: 600px;
margin: 0 auto 32px;
}
.gcnl-cta__buttons {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
} .gcnl-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--gcnl-cream2);
border: 2px dashed var(--gcnl-border);
border-radius: var(--gcnl-radius);
padding: 32px 24px;
min-height: 160px;
text-align: center;
}
.gcnl-placeholder__icon {
font-size: 2.2rem;
line-height: 1;
opacity: .4;
}
.gcnl-placeholder__label {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: .88rem;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--gcnl-muted);
}
.gcnl-placeholder__hint {
font-size: .72rem;
color: var(--gcnl-border);
display: block;
margin-top: 2px;
font-family: 'Inter', monospace;
}  @media (max-width: 1024px) {
.gcnl-hero__inner {
grid-template-columns: 1fr;
padding: 64px 24px 56px;
}
.gcnl-hero__image-slot {
display: none;
}
.gcnl-checklist-grid {
grid-template-columns: repeat(2, 1fr);
}
.gcnl-info-grid {
grid-template-columns: 1fr 1fr;
}
.gcnl-tip-grid {
grid-template-columns: repeat(2, 1fr);
}
.gcnl-accom-grid {
grid-template-columns: repeat(2, 1fr);
}
.gcnl-exp-grid {
grid-template-columns: repeat(2, 1fr);
}
.gcnl-seating-grid {
grid-template-columns: repeat(2, 1fr);
}
.gcnl-gameday-images {
grid-template-columns: repeat(2, 1fr);
}
} @media (max-width: 768px) {
.gcnl-section {
padding: 48px 0;
}
.gcnl-hero__inner {
padding: 48px 20px 44px;
}
.gcnl-hero__title {
font-size: clamp(2.2rem, 10vw, 3.2rem);
}
.gcnl-checklist-grid {
grid-template-columns: 1fr;
}
.gcnl-info-grid {
grid-template-columns: 1fr;
}
.gcnl-tip-grid {
grid-template-columns: 1fr;
}
.gcnl-accom-grid {
grid-template-columns: 1fr;
}
.gcnl-tickets-cols {
grid-template-columns: 1fr;
gap: 32px;
}
.gcnl-seating-grid {
grid-template-columns: 1fr;
}
.gcnl-exp-grid {
grid-template-columns: 1fr;
}
.gcnl-final-checklist {
grid-template-columns: 1fr;
}
.gcnl-gameday-images {
grid-template-columns: repeat(2, 1fr);
} .gcnl-route {
flex-direction: column;
align-items: flex-start;
padding-left: 36px;
gap: 0;
}
.gcnl-route__step {
flex-direction: row;
align-items: flex-start;
gap: 16px;
flex: none;
width: 100%;
padding-bottom: 20px;
position: relative;
}
.gcnl-route__step--last {
padding-bottom: 0;
}
.gcnl-route__circle {
flex-shrink: 0;
}
.gcnl-route__connector {
position: absolute;
top: 56px;
left: 27px;
right: auto;
width: 2px;
height: calc(100% - 56px);
background: linear-gradient(to bottom, rgba(255, 182, 18, .5), rgba(255, 182, 18, .15));
}
.gcnl-route__label {
text-align: left;
margin-top: 14px;
}
.gcnl-timeline {
padding-left: 44px;
}
.gcnl-cta__buttons {
flex-direction: column;
align-items: center;
}
.gcnl-cta__buttons .gcnl-btn {
width: 100%;
justify-content: center;
max-width: 320px;
}
.gcnl-hero__anchors {
gap: 8px;
}
.gcnl-hero__chip {
font-size: .75rem;
padding: 6px 12px;
}
} @media (max-width: 480px) {
.gcnl-gameday-images {
grid-template-columns: 1fr;
}
.gcnl-container {
padding: 0 16px;
}
.gcnl-section__heading {
font-size: 1.5rem;
}
}