.strefa-storefront {
–strefa-ink: #182019;
–strefa-muted: #5d695f;
–strefa-line: #d9e1da;
–strefa-paper: #f7f4ee;
–strefa-green: #2f7d4c;
–strefa-forest: #173d29;
–strefa-gold: #d9a441;
margin: 0 auto;
max-width: 1180px;
padding: 30px 18px 84px;
}
.strefa-storefront * { box-sizing: border-box; }
.strefa-hero {
background: linear-gradient(135deg, rgba(23, 61, 41, 0.96), rgba(47, 125, 76, 0.9));
border-radius: 8px;
color: #fff;
min-height: 430px;
overflow: hidden;
padding: clamp(28px, 5vw, 62px);
position: relative;
}
.strefa-hero::after {
background: linear-gradient(90deg, transparent, rgba(217, 164, 65, 0.22));
content: “”;
inset: 0;
pointer-events: none;
position: absolute;
}
.strefa-hero__inner,
.strefa-section,
.strefa-feature-grid,
.strefa-category-grid,
.strefa-proof { position: relative; z-index: 1; }
.strefa-kicker {
color: #f1d28d;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0;
margin: 0 0 14px;
text-transform: uppercase;
}
.strefa-hero h1 {
color: #fff;
font-size: clamp(2.3rem, 5vw, 4.7rem);
letter-spacing: 0;
line-height: 0.98;
margin: 0;
max-width: 850px;
}
.strefa-hero p {
color: rgba(255,255,255,0.88);
font-size: clamp(1rem, 1.8vw, 1.18rem);
line-height: 1.65;
margin: 22px 0 0;
max-width: 680px;
}
.strefa-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.strefa-button,
.strefa-button:visited {
align-items: center;
border-radius: 999px;
display: inline-flex;
font-weight: 800;
gap: 10px;
min-height: 52px;
padding: 0 24px;
text-decoration: none;
}
.strefa-button–primary { background: #f1d28d; color: #173d29; }
.strefa-button–ghost { border: 1px solid rgba(255,255,255,0.45); color: #fff; }
.strefa-proof {
background: rgba(255,255,255,0.94);
border: 1px solid rgba(255,255,255,0.4);
border-radius: 8px;
color: var(–strefa-ink);
display: grid;
gap: 14px;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 34px;
padding: 18px;
}
.strefa-proof strong,
.strefa-feature strong { display: block; font-size: 1rem; margin-bottom: 4px; }
.strefa-proof span,
.strefa-feature p,
.strefa-category p { color: var(–strefa-muted); line-height: 1.55; }
.strefa-section { margin-top: 26px; }
.strefa-section__head {
align-items: end;
display: flex;
gap: 18px;
justify-content: space-between;
margin-bottom: 18px;
}
.strefa-section__head h2,
.strefa-catalog h2 {
color: var(–strefa-ink);
font-size: clamp(1.8rem, 3vw, 2.6rem);
letter-spacing: 0;
margin: 0;
}
.strefa-section__head p { color: var(–strefa-muted); margin: 0; max-width: 560px; }
.strefa-category-grid,
.strefa-feature-grid { display: grid; gap: 16px; }
.strefa-category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.strefa-feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.strefa-category,
.strefa-feature {
background: #fff;
border: 1px solid var(–strefa-line);
border-radius: 8px;
color: inherit;
display: block;
padding: 20px;
text-decoration: none;
}
.strefa-category h3,
.strefa-feature h3 { color: var(–strefa-ink); font-size: 1.18rem; letter-spacing: 0; margin: 0 0 8px; }
.strefa-category:hover,
.strefa-feature:hover { border-color: rgba(47,125,76,0.5); transform: translateY(-2px); transition: border-color 160ms ease, transform 160ms ease; }
.strefa-catalog {
background: var(–strefa-paper);
border: 1px solid var(–strefa-line);
border-radius: 8px;
margin-top: 28px;
padding: 22px;
}
@media (max-width: 920px) {
.strefa-proof,
.strefa-category-grid,
.strefa-feature-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
.strefa-storefront { padding-top: 18px; }
.strefa-hero { min-height: 0; }
.strefa-proof,
.strefa-category-grid,
.strefa-feature-grid { grid-template-columns: 1fr; }
.strefa-section__head { align-items: start; flex-direction: column; }
.strefa-actions,
.strefa-button,
.strefa-button:visited { width: 100%; }
.strefa-button,
.strefa-button:visited { justify-content: center; }
}