:root {
--kop-green:        #203731;
--kop-green-deep:   #07130D;
--kop-gold:         #FFB612;
--kop-gold-dim:     rgba(255, 182, 18, .18);
--kop-cream:        #F8F5EE;
--kop-cream-alt:    #F3F0E9;
--kop-text:         #1A1A1A;
--kop-muted:        #3D3D3D;
--kop-card-bg:      #FFFFFF;
--kop-border:       rgba(32, 55, 49, .08);
--kop-border-hover: rgba(255, 182, 18, .42);
--kop-radius-md:    8px;
--kop-radius-lg:    12px;
--kop-radius-xl:    16px;
--kop-radius-pill:  999px;
--kop-font-head:    'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
--kop-font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
--kop-transition:   .25s ease;
} .gbp-kop-page {
background: var(--kop-cream);
color: var(--kop-text);
font-family: var(--kop-font-body);
} .gbp-kop-hero {
position: relative;
min-height: 80vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
background: var(--kop-green-deep);
color: #fff;
} .gbp-kop-hero__bg {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
background: var(--kop-green-deep);
}
.gbp-kop-hero__bg-img {
position: absolute;
inset: 0;
background-image: url(//greenbaypackers.eu/wp-content/themes/greenbaypackers-theme/assets/images/knihahro.png);
background-size: cover;
background-position: center center;
opacity: .22;
}
.gbp-kop-hero__overlay {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 30% 55%, rgba(32,55,49,.82) 0%, transparent 55%),
radial-gradient(ellipse at 80% 20%, rgba(255,182,18,.07) 0%, transparent 45%),
linear-gradient(135deg, rgba(7,19,13,.65) 0%, rgba(32,55,49,.3) 50%, rgba(7,19,13,.25) 100%);
}
.gbp-kop-hero__grain {
position: absolute;
inset: 0;
opacity: .032;
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;
}
.gbp-kop-hero__lines {
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
0deg,
transparent, transparent 79px,
rgba(255,182,18,.03) 79px,
rgba(255,182,18,.03) 80px
);
}
.gbp-kop-hero__g-watermark {
position: absolute;
right: -4vw;
top: 50%;
transform: translateY(-50%);
font-family: var(--kop-font-head);
font-weight: 800;
font-size: clamp(16rem, 32vw, 36rem);
line-height: 1;
color: rgba(255,182,18,.04);
pointer-events: none;
user-select: none;
letter-spacing: -.02em;
} .gbp-kop-hero__inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr auto;
gap: clamp(40px, 6vw, 80px);
align-items: center;
padding-top: clamp(80px, 10vw, 130px);
padding-bottom: clamp(64px, 8vw, 96px);
}
.gbp-kop-hero__content {
max-width: 600px;
} .gbp-kop-hero__eyebrow {
display: inline-block;
font-family: var(--kop-font-head);
font-size: .78rem;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--kop-gold);
margin-bottom: 18px;
padding: 4px 12px;
border: 1px solid var(--kop-gold-dim);
border-radius: 2px;
} .gbp-kop-hero__label {
display: inline-block;
font-family: var(--kop-font-body);
font-size: .75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--kop-gold);
margin-bottom: 16px;
} .gbp-kop-hero__divider {
width: 56px;
height: 3px;
background: linear-gradient(90deg, var(--kop-gold), transparent);
margin: 20px 0 22px;
} .gbp-kop-hero__rule {
width: 48px;
height: 3px;
background: var(--kop-gold);
margin-bottom: 20px;
border-radius: 2px;
} .gbp-kop-hero__title {
font-family: var(--kop-font-head);
font-size: clamp(3rem, 7.5vw, 6.5rem);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -.015em;
line-height: .95;
color: #fff;
margin: 0 0 8px;
}
.gbp-kop-hero__title-accent {
display: block;
color: var(--kop-gold);
}
.gbp-kop-hero__sub {
font-family: var(--kop-font-head);
font-size: clamp(1.1rem, 2vw, 1.5rem);
font-weight: 600;
color: rgba(255,182,18,.75);
margin: 0 0 16px;
line-height: 1.3;
}
.gbp-kop-hero__desc {
font-size: clamp(.9rem, 1.4vw, 1rem);
color: #FFFFFF;
line-height: 1.78;
margin: 0 0 32px;
max-width: 540px;
}
.gbp-kop-hero__btns {
display: flex;
flex-wrap: wrap;
gap: 12px;
} .gbp-kop-hero__visual {
position: relative;
flex-shrink: 0;
}
.gbp-kop-hero__cover {
width: clamp(220px, 26vw, 380px);
height: auto;
border-radius: var(--kop-radius-lg);
box-shadow:
0 24px 64px rgba(0,0,0,.65),
0 0 0 1px rgba(255,182,18,.15),
0 0 48px rgba(255,182,18,.07);
display: block;
} .gbp-kop-hero__badge {
position: absolute;
bottom: -16px;
right: -16px;
width: 72px;
height: 72px;
background: var(--kop-gold);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(255,182,18,.4);
}
.gbp-kop-hero__badge-num {
font-family: var(--kop-font-head);
font-size: 1.1rem;
font-weight: 800;
color: var(--kop-green-deep);
line-height: 1;
}
.gbp-kop-hero__badge-label {
font-family: var(--kop-font-body);
font-size: .6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--kop-green-deep);
opacity: .75;
} .gbp-kop-hero__scroll {
position: absolute;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
color: rgba(255,182,18,.45);
z-index: 2;
animation: kop-bounce 2s ease-in-out infinite;
}
.gbp-kop-hero__scroll span {
display: block;
width: 1px;
height: 22px;
background: linear-gradient(to bottom, transparent, rgba(255,182,18,.4));
}
@keyframes kop-bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50%       { transform: translateX(-50%) translateY(5px); }
} .gbp-kop-cover-placeholder {
width: clamp(200px, 22vw, 280px);
aspect-ratio: 2 / 3;
background: linear-gradient(160deg, #203731 0%, #07130D 50%, #10291B 100%);
border: 1px solid rgba(255,182,18,.2);
border-radius: var(--kop-radius-lg);
box-shadow:
0 20px 60px rgba(0,0,0,.65),
0 0 0 1px rgba(255,182,18,.1);
display: flex;
align-items: center;
justify-content: center;
}
.gbp-kop-cover-placeholder--sm {
width: 100%;
max-width: 220px;
aspect-ratio: 2 / 3;
}
.gbp-kop-cover-placeholder__inner {
text-align: center;
color: var(--kop-gold);
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.gbp-kop-cover-placeholder__title {
font-family: var(--kop-font-head);
font-size: 1.25rem;
font-weight: 700;
text-transform: uppercase;
color: #F8F8F2;
line-height: 1.2;
}
.gbp-kop-cover-placeholder__note {
font-size: .7rem;
color: rgba(255,255,255,.70);
font-style: italic;
line-height: 1.4;
} .gbp-kop-btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--kop-font-head);
font-size: .9rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
padding: 12px 24px;
border-radius: var(--kop-radius-md);
cursor: pointer;
border: 1.5px solid transparent;
text-decoration: none;
transition: background var(--kop-transition), transform var(--kop-transition),
border-color var(--kop-transition), color var(--kop-transition);
line-height: 1;
}
.gbp-kop-btn--lg {
font-size: 1rem;
padding: 14px 32px;
} .gbp-kop-btn--primary {
background: var(--kop-gold);
color: var(--kop-green-deep);
}
.gbp-kop-btn--primary:hover {
background: #ffc82b;
transform: scale(1.02);
color: var(--kop-green-deep);
} .gbp-kop-btn--outline {
background: transparent;
color: var(--kop-green-deep);
border-color: rgba(32,55,49,.3);
}
.gbp-kop-btn--outline:hover {
border-color: var(--kop-green);
background: rgba(32,55,49,.06);
color: var(--kop-green-deep);
} .gbp-kop-hero .gbp-kop-btn--outline {
color: #FFFFFF;
border-color: rgba(255,255,255,.28);
}
.gbp-kop-hero .gbp-kop-btn--outline:hover {
color: #fff;
border-color: rgba(255,255,255,.55);
background: rgba(255,255,255,.08);
} .gbp-kop-btn--ghost {
background: transparent;
color: rgba(255,255,255,.92);
border-color: rgba(255,255,255,.18);
}
.gbp-kop-btn--ghost:hover {
color: #fff;
border-color: rgba(255,255,255,.38);
background: rgba(255,255,255,.06);
} .gbp-kop-origin {
background: var(--kop-cream);
border-top: none;
border-bottom: 1px solid var(--kop-border);
padding: clamp(52px, 7vw, 84px) 0;
}
.gbp-kop-origin__inner {
display: grid;
grid-template-columns: 64px 1fr;
grid-template-rows: auto auto;
gap: 32px 28px;
align-items: flex-start;
}
.gbp-kop-origin__icon {
grid-row: 1;
grid-column: 1;
width: 64px;
height: 64px;
background: var(--kop-card-bg);
border: 1px solid var(--kop-border);
border-radius: var(--kop-radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: var(--kop-gold);
margin-top: 4px;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(7,19,13,.06);
}
.gbp-kop-origin__text {
grid-row: 1;
grid-column: 2;
}
.gbp-kop-origin__heading {
font-family: var(--kop-font-head);
font-size: clamp(1.4rem, 3vw, 2rem);
font-weight: 800;
text-transform: uppercase;
color: var(--kop-green);
margin: 0 0 14px;
letter-spacing: -.01em;
}
.gbp-kop-origin__text p {
font-size: 1rem;
line-height: 1.78;
color: var(--kop-text);
margin: 0 0 12px;
}
.gbp-kop-origin__text p:last-child { margin-bottom: 0; }
.gbp-kop-origin__text strong {
color: var(--kop-text);
font-weight: 600;
}
.gbp-kop-origin__quote {
grid-row: 2;
grid-column: 2;
}
.gbp-kop-quote {
border-left: 3px solid var(--kop-gold);
padding: 18px 22px;
background: rgba(255,182,18,.06);
border-radius: 0 var(--kop-radius-md) var(--kop-radius-md) 0;
}
.gbp-kop-quote__text {
font-family: var(--kop-font-head);
font-size: clamp(1.05rem, 2vw, 1.35rem);
font-weight: 700;
color: var(--kop-green);
line-height: 1.45;
margin: 0 0 10px;
font-style: normal;
text-transform: uppercase;
letter-spacing: -.01em;
}
.gbp-kop-quote__attr {
font-size: .8125rem;
color: var(--kop-muted);
font-weight: 500;
} .gbp-kop-section {
padding: clamp(56px, 8vw, 100px) 0;
background: var(--kop-cream);
} .gbp-kop-section--dark {
background: var(--kop-cream-alt);
} .gbp-kop-section--details {
background: var(--kop-cream);
border-top: 1px solid var(--kop-border);
}
.gbp-kop-section__header {
text-align: center;
margin-bottom: clamp(36px, 5vw, 60px);
}
.gbp-kop-section__kicker {
display: inline-block;
font-family: var(--kop-font-body);
font-size: .75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .16em;
color: var(--kop-green);
margin-bottom: 10px;
}
.gbp-kop-section__title {
font-family: var(--kop-font-head);
font-size: clamp(1.75rem, 4vw, 3rem);
font-weight: 800;
text-transform: uppercase;
color: var(--kop-green);
margin: 0;
letter-spacing: -.01em;
} .gbp-kop-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 2vw, 24px);
}
.gbp-kop-card {
background: var(--kop-card-bg);
border: 1px solid var(--kop-border);
border-radius: var(--kop-radius-xl);
padding: clamp(22px, 2.5vw, 32px);
box-shadow: 0 2px 10px rgba(7,19,13,.06);
transition: border-color var(--kop-transition), box-shadow var(--kop-transition),
transform var(--kop-transition);
}
.gbp-kop-card:hover {
border-color: var(--kop-border-hover);
box-shadow: 0 8px 28px rgba(7,19,13,.10);
transform: translateY(-3px);
}
.gbp-kop-card__icon {
width: 52px;
height: 52px;
background: rgba(255,182,18,.09);
border: 1px solid rgba(255,182,18,.2);
border-radius: var(--kop-radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--kop-gold);
margin-bottom: 18px;
}
.gbp-kop-card__title {
font-family: var(--kop-font-head);
font-size: clamp(1.05rem, 1.8vw, 1.3rem);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -.01em;
color: var(--kop-green);
margin: 0 0 10px;
line-height: 1.2;
}
.gbp-kop-card__desc {
font-size: .9375rem;
line-height: 1.72;
color: var(--kop-text);
margin: 0;
} .gbp-kop-details {
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(32px, 5vw, 64px);
align-items: flex-start;
}
.gbp-kop-details__visual {
display: flex;
justify-content: center;
}
.gbp-kop-details__cover {
width: 220px;
height: auto;
border-radius: var(--kop-radius-lg);
box-shadow:
0 12px 40px rgba(7,19,13,.12),
0 0 0 1px var(--kop-border);
display: block;
} .gbp-kop-dl {
margin: 0 0 28px;
padding: 0;
background: var(--kop-card-bg);
border: 1px solid var(--kop-border);
border-radius: var(--kop-radius-lg);
overflow: hidden;
box-shadow: 0 2px 8px rgba(7,19,13,.05);
}
.gbp-kop-dl__row {
display: grid;
grid-template-columns: 160px 1fr;
border-bottom: 1px solid var(--kop-border);
}
.gbp-kop-dl__row:last-child { border-bottom: none; }
.gbp-kop-dl__term {
font-family: var(--kop-font-body);
font-size: .8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--kop-green);
padding: 14px 18px;
background: rgba(32,55,49,.03);
border-right: 1px solid var(--kop-border);
display: flex;
align-items: center;
}
.gbp-kop-dl__val {
font-size: .9375rem;
color: var(--kop-text);
padding: 14px 18px;
display: flex;
align-items: center;
line-height: 1.5;
}
.gbp-kop-dl__link {
color: var(--kop-green);
text-decoration: none;
font-weight: 500;
}
.gbp-kop-dl__link:hover { text-decoration: underline; }
.gbp-kop-details__cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 14px;
}
.gbp-kop-details__note {
font-size: .8125rem;
color: var(--kop-muted);
font-style: italic;
margin: 0;
} .gbp-kop-cta-section {
padding: clamp(64px, 10vw, 120px) 0;
background: linear-gradient(150deg, var(--kop-green-deep) 0%, var(--kop-green) 100%);
position: relative;
overflow: hidden;
}
.gbp-kop-cta-section::before {
content: '';
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
0deg,
transparent, transparent 79px,
rgba(255,182,18,.025) 79px,
rgba(255,182,18,.025) 80px
);
pointer-events: none;
}
.gbp-kop-cta {
position: relative;
z-index: 1;
text-align: center;
}
.gbp-kop-cta__inner {
max-width: 640px;
margin: 0 auto;
}
.gbp-kop-cta__title {
font-family: var(--kop-font-head);
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -.01em;
color: #fff;
margin: 0 0 16px;
line-height: 1.05;
}
.gbp-kop-cta__sub {
font-size: clamp(.9375rem, 1.5vw, 1.0625rem);
color: #FFFFFF;
line-height: 1.72;
margin: 0 0 36px;
}
.gbp-kop-cta__btns {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
align-items: center;
} @media (max-width: 1100px) {
.gbp-kop-cards { grid-template-columns: repeat(2, 1fr); }
.gbp-kop-hero__inner { grid-template-columns: 1fr; }
.gbp-kop-hero__visual { display: none; }
}
@media (max-width: 767px) {
.gbp-kop-hero { min-height: 70vh; }
.gbp-kop-origin__inner { grid-template-columns: 1fr; }
.gbp-kop-origin__icon,
.gbp-kop-origin__text,
.gbp-kop-origin__quote {
grid-row: auto;
grid-column: auto;
}
.gbp-kop-cards { grid-template-columns: 1fr; }
.gbp-kop-details { grid-template-columns: 1fr; }
.gbp-kop-details__visual {
order: -1;
justify-content: center;
}
.gbp-kop-details__cover { width: clamp(140px, 40vw, 200px); }
.gbp-kop-dl__row { grid-template-columns: 130px 1fr; }
.gbp-kop-btn--lg { width: 100%; justify-content: center; }
}
@media (max-width: 479px) {
.gbp-kop-hero__title { font-size: 3rem; }
.gbp-kop-hero__btns,
.gbp-kop-cta__btns,
.gbp-kop-details__cta { flex-direction: column; }
.gbp-kop-btn { width: 100%; justify-content: center; }
.gbp-kop-dl__row { grid-template-columns: 1fr; }
.gbp-kop-dl__term {
border-right: none;
border-bottom: 1px solid var(--kop-border);
padding: 10px 16px 8px;
}
.gbp-kop-dl__val { padding: 8px 16px 12px; }
}
@media (prefers-reduced-motion: reduce) {
.gbp-kop-card:hover { transform: none; }
.gbp-kop-btn--primary:hover { transform: none; }
}