/* ============================================================
ZMIENNE — wartości skopiowane 1:1 z Ballor
============================================================ */
:root {
--black: #191919;
--primary: #138561;
--text: #d6f1ca;
--white-12: #ffffff1f;
--font-title: "Archivo Black", sans-serif;
--font-text: "Inter Tight", sans-serif;
--font-labels: "Geist Mono", monospace;
--radius-full: 42px;
--inner-space: 30px;
--small-space: 10px;
--title-space: 20px;
--line-92: .92;
--line-140: 1.4;
--label-tracking: -.48px;
--container: 1620px;
/* H1 scale (mobile-first → desktop) */
--h1-size: 72px;
--h1-tracking: -2.8px;
/* Paragraph */
--paragraph-large: 20px;
--paragraph: 16px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
background: var(--black);
color: var(--text);
font-family: var(--font-text);
-webkit-font-smoothing: antialiased;
}
/* ============================================================
NAVBAR
============================================================ */
.navbar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: center;
padding: 22px 40px;
}
.brand-logo {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.brand-logo img {
height: 96px;
width: auto;
display: block;
/* zafarbowanie białego outline na limonkowy var(--text) #d6f1ca */
filter: brightness(0) saturate(100%) invert(89%) sepia(13%) saturate(383%) hue-rotate(37deg) brightness(101%) contrast(91%);
}
.nav-menu {
display: flex;
gap: 6px;
list-style: none;
}
.nav-link {
font-family: var(--font-labels);
color: var(--text);
font-size: var(--paragraph);
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
text-decoration: none;
padding: 12px 20px;
background: var(--white-12);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border-radius: var(--radius-full);
transition: background .2s;
}
.nav-link:hover { background: rgba(255,255,255,.18); }
/* Hamburger toggle (mobile only) */
.menu-toggle {
display: none;
width: 48px;
height: 48px;
background: var(--white-12);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: none;
border-radius: var(--radius-full);
cursor: pointer;
padding: 0;
align-items: center;
justify-content: center;
color: var(--text);
transition: background .2s ease;
}
.menu-toggle:hover { background: rgba(255,255,255,.18); }
.menu-toggle__bars {
display: block;
width: 18px;
height: 12px;
position: relative;
}
.menu-toggle__bars::before,
.menu-toggle__bars::after,
.menu-toggle__bars > span {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: var(--text);
border-radius: 2px;
transition: transform .3s ease, opacity .3s ease, top .3s ease;
}
.menu-toggle__bars::before { top: 0; }
.menu-toggle__bars > span { top: 5px; }
.menu-toggle__bars::after { top: 10px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before {
top: 5px;
transform: rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars > span { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after {
top: 5px;
transform: rotate(-45deg);
}
/* Mobile drawer (off-canvas menu) */
.mobile-drawer {
display: none;
position: fixed;
inset: 0;
z-index: 99;
background: rgba(25, 25, 25, .96);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
padding: 80px 24px env(safe-area-inset-bottom) 24px;
opacity: 0;
pointer-events: none;
transition: opacity .35s ease;
}
.mobile-drawer.is-open {
opacity: 1;
pointer-events: auto;
}
.mobile-drawer__link {
font-family: var(--font-title);
color: var(--text);
font-size: 36px;
line-height: 1;
letter-spacing: -1px;
text-transform: uppercase;
text-decoration: none;
transition: color .25s ease;
min-height: 48px;
display: inline-flex;
align-items: center;
}
.mobile-drawer__link:hover { color: var(--primary); }
.mobile-drawer__link.is-cta {
color: var(--primary);
margin-top: 16px;
}
body.is-drawer-open { overflow: hidden; }
.nav-cta {
font-family: var(--font-labels);
color: var(--black);
font-size: var(--paragraph);
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
text-decoration: none;
padding: 12px 24px;
background: var(--text);
border-radius: var(--radius-full);
display: inline-flex;
align-items: center;
gap: 10px;
transition: opacity .2s;
}
.nav-cta:hover { opacity: .85; }
.nav-cta__arrow { display: inline-block; transition: transform .2s; }
.nav-cta:hover .nav-cta__arrow { transform: translate(3px, -3px); }
@media (max-width: 991px) {
.nav-menu { display: none; }
.navbar { padding: 18px 24px; }
}
/* ============================================================
HERO SECTION
1:1 z Ballor: warstwy gradientów + zdjęcie + texture overlay
============================================================ */
.home-1-banner-section {
background-image:
linear-gradient(315deg, var(--black), #19191900 50%),
linear-gradient(58deg, var(--black), #191919 0%, var(--black) 0%, #19191900 28%),
linear-gradient(358deg, var(--black), #19191900 62%),
linear-gradient(to bottom, #0000004d, #0000004d),
image-set(url("hero.webp") type("image/webp"), url("hero.jpg") type("image/jpeg"));
background-position: 0 0, 0 0, 0 0, 0 0, 50%;
background-size: auto, auto, auto, auto, cover;
justify-content: center;
align-items: flex-start;
padding: 100px 0 20px;
display: flex;
position: relative;
}
/* Film grain — opacity 0.08 (medium, lekko mocniej niż Ballor) */
.texture {
z-index: 0;
opacity: .08;
background-image: url("https://cdn.prod.website-files.com/6919b2263f90e18466591324/691b09ae6bd565bd4bfba154_2ad8ee1bbfb2c79df726815066dc41a385a425d8.png");
background-position: 50%;
position: absolute;
inset: 0;
pointer-events: none;
}
.base-container {
z-index: 1;
flex-direction: column;
align-items: center;
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 20px;
position: relative;
}
.banner-home-1 {
display: flex;
flex-flow: column;
gap: 200px;
width: 100%;
position: relative;
}
/* Top wrap: tytuł po lewej, body+CTA po prawej */
.home-1-banner-top-wrap {
display: flex;
flex-flow: row;
justify-content: space-between;
gap: 100px;
}
.home-1-banner-title-wrap {
max-width: 680px;
}
.home-1-h1 {
font-family: var(--font-title);
color: var(--text);
font-size: 96px;
line-height: var(--line-92);
font-weight: 400;
letter-spacing: -2.5px;
text-transform: uppercase;
text-align: left;
}
/* Paragraph wrap: eyebrow + paragraph */
.paragraph-wrap {
display: flex;
flex-flow: column;
gap: var(--inner-space);
max-width: 480px;
align-self: flex-end;
}
.text-label-wrapper {
display: flex;
flex-flow: column;
gap: var(--title-space);
}
.label {
font-family: var(--font-labels);
color: var(--text);
font-size: var(--paragraph);
line-height: var(--line-140);
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
}
.paragraph-large {
font-family: var(--font-text);
color: var(--text);
font-size: var(--paragraph-large);
line-height: var(--line-140);
}
/* Buttons */
.buttons-wrapper {
display: flex;
flex-flow: row;
gap: var(--small-space);
flex-wrap: wrap;
}
.primary-button,
.secondary-button {
font-family: var(--font-labels);
font-size: var(--paragraph);
line-height: var(--line-92);
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
text-decoration: none;
text-align: center;
border-radius: var(--radius-full);
height: 59px;
padding: 22px 34px;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 16px;
overflow: hidden;
transition: opacity .2s;
}
.primary-button {
background-color: var(--primary);
color: var(--text);
}
.secondary-button {
background-color: var(--white-12);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
color: var(--text);
}
.primary-button:hover,
.secondary-button:hover { opacity: .9; }
.button-arrow-wrap {
width: 9px; height: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.button-arrow-wrap svg { width: 100%; height: 100%; }
/* Bottom wrap: krótki tekst lewy + loga partnerów prawe */
.home-1-banner-bottom-wrap {
display: flex;
flex-flow: row;
justify-content: space-between;
gap: 100px;
}
.home-1-banner-bottom-paragraph {
max-width: 320px;
}
.home-1-banner-logos-wrap {
display: flex;
align-items: flex-end;
gap: 50px;
}
.banner-logo {
height: 28px;
color: var(--text);
font-family: var(--font-labels);
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--label-tracking);
display: inline-flex;
align-items: center;
gap: 8px;
opacity: .85;
}
.banner-logo::before {
content: "";
width: 18px; height: 18px;
background: currentColor;
border-radius: 50%;
opacity: .8;
}
/* ============================================================
RESPONSIVE — wartości 1:1 z Ballor breakpoints
============================================================ */
@media (min-width: 992px) {
:root { --h1-size: 72px; --h1-tracking: -2px; }
.home-1-h1 { font-size: 72px; letter-spacing: -2px; text-align: right; }
.home-1-banner-title-wrap { max-width: 320px; margin-top: 140px; }
}
@media (min-width: 1280px) {
.home-1-h1 { font-size: 96px; letter-spacing: -2.5px; }
.home-1-banner-title-wrap { max-width: 440px; }
}
@media (min-width: 1620px) {
.home-1-h1 { font-size: 112px; letter-spacing: -3px; }
.home-1-banner-title-wrap { max-width: 520px; }
.banner-home-1 { gap: 200px; }
}
@media (max-width: 991px) {
.home-1-banner-section { padding-top: 120px; }
.banner-home-1 { gap: 100px; }
.home-1-banner-top-wrap {
flex-flow: column;
gap: 40px;
}
.home-1-h1 { font-size: 64px; letter-spacing: -1.6px; text-align: left; }
.paragraph-wrap { align-self: flex-start; max-width: 100%; }
.home-1-banner-bottom-wrap {
flex-flow: column;
gap: 40px;
}
}
/* ===== Mobile navbar: hamburger pojawia się <768px ===== */
@media (max-width: 768px) {
.navbar { padding: 14px 20px; min-height: 56px; }
.brand-logo img { height: 56px; }
.nav-menu { display: none; }
.nav-cta { display: none; }
.menu-toggle { display: inline-flex; }
.mobile-drawer { display: flex; }
}
@media (max-width: 640px) {
/* Hero H1: clamp żeby na 320–375px nie wystawało */
.home-1-h1 { font-size: clamp(36px, 11vw, 48px); letter-spacing: -1px; }
.buttons-wrapper { flex-flow: column; align-items: stretch; }
.primary-button, .secondary-button { width: 100%; min-height: 48px; }
.home-1-banner-section { padding: 90px 0 40px; }
.base-container { padding: 0 20px; }
}
/* ============================================================
SECTIONS — wartości, programy wiekowe
============================================================ */
.section {
position: relative;
padding: 120px 0;
background: var(--black);
overflow: hidden;
}
.section .texture {
z-index: 0;
opacity: .04;
}
.section .base-container {
position: relative;
z-index: 1;
}
.section__header {
display: flex;
flex-direction: column;
gap: 24px;
max-width: 820px;
margin-bottom: 72px;
}
.section__eyebrow {
font-family: var(--font-labels);
color: var(--text);
font-size: 13px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
opacity: .7;
display: flex;
align-items: center;
gap: 14px;
}
.section__eyebrow::before {
content: "";
width: 8px; height: 8px;
background: var(--primary);
border-radius: 50%;
}
.section__h2 {
font-family: var(--font-title);
color: var(--text);
font-size: 64px;
line-height: .95;
font-weight: 400;
letter-spacing: -2px;
text-transform: uppercase;
}
/* ============================================================
VALUES SECTION (zielona, layout Ballor "Building players...")
============================================================ */
.values-section {
background: var(--primary);
padding: 120px 0 0;
position: relative;
overflow: hidden;
}
.values-section .texture {
z-index: 0;
opacity: .07;
}
.values-section .base-container {
position: relative;
z-index: 1;
}
.values-top {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
margin-bottom: 120px;
align-items: center;
}
.values-left {
display: flex;
flex-direction: column;
gap: 32px;
max-width: 460px;
}
.values-media {
width: 50%;
aspect-ratio: 16/9;
background: rgba(0, 0, 0, .25);
border-radius: 6px;
overflow: hidden;
position: relative;
}
.values-media video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.values-eyebrow {
font-family: var(--font-labels);
font-size: 13px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
display: flex;
align-items: center;
gap: 12px;
}
.values-eyebrow::before {
content: "";
width: 14px;
height: 14px;
background: var(--text);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.values-h3 {
font-family: var(--font-title);
color: var(--text);
font-size: 44px;
line-height: .95;
font-weight: 400;
letter-spacing: -1.5px;
text-transform: uppercase;
}
.values-right {
display: flex;
flex-direction: column;
gap: 28px;
max-width: 540px;
}
.values-right p {
color: var(--text);
font-size: 18px;
line-height: 1.45;
}
.values-cta {
align-self: flex-start;
margin-top: 16px;
font-family: var(--font-labels);
font-size: 13px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--primary);
background: var(--text);
text-decoration: none;
padding: 18px 32px;
border-radius: var(--radius-full);
display: inline-flex;
align-items: center;
gap: 12px;
transition: opacity .2s;
}
.values-cta:hover { opacity: .9; }
.values-manifest {
font-family: var(--font-title);
color: var(--text);
font-size: 112px;
line-height: .92;
font-weight: 400;
letter-spacing: -3px;
text-transform: uppercase;
padding-bottom: 120px;
}
@media (max-width: 1280px) {
.values-h3 { font-size: 36px; }
.values-manifest { font-size: 88px; letter-spacing: -2.4px; }
}
@media (max-width: 991px) {
.values-section { padding-top: 80px; }
.values-top { grid-template-columns: 1fr; gap: 48px; margin-bottom: 80px; align-items: stretch; }
/* Na mobile wideo wraca do pełnej szerokości kolumny (50% by się skurczyło na ekranach) */
.values-media { width: 100%; }
.values-h3 { font-size: 32px; }
.values-manifest { font-size: 56px; letter-spacing: -1.5px; padding-bottom: 80px; }
}
@media (max-width: 640px) {
.values-section { padding-top: 64px; }
.values-h3 { font-size: 28px; letter-spacing: -1px; }
.values-right p { font-size: 16px; }
.values-manifest { font-size: 38px; letter-spacing: -1px; padding-bottom: 64px; }
}
/* ============================================================
PRINCIPLES SECTION (czarna, 4 zasady — layout Ballor screenshot)
============================================================ */
.principles-section {
background: var(--black);
padding: 140px 0;
position: relative;
overflow: hidden;
}
.principles-section .texture {
z-index: 0;
opacity: .04;
}
.principles-section .base-container {
position: relative;
z-index: 1;
}
.principles-top {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 120px;
align-items: start;
}
.principles-left {
display: flex;
flex-direction: column;
gap: 36px;
max-width: 480px;
}
.principles-eyebrow {
font-family: var(--font-labels);
font-size: 13px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
display: flex;
align-items: center;
gap: 12px;
}
.principles-eyebrow::before {
content: "";
width: 14px;
height: 14px;
background: var(--text);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.principles-h3 {
font-family: var(--font-title);
color: var(--text);
font-size: 44px;
line-height: .95;
font-weight: 400;
letter-spacing: -1.5px;
text-transform: uppercase;
}
.principles-media {
width: 100%;
aspect-ratio: 3/4;
background-color: var(--black);
border-radius: 6px;
overflow: hidden;
margin-top: 16px;
position: relative;
}
.principles-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
display: block;
}
/* Cinematic grain overlay (jak coach-card, hero, founders) */
.principles-media::before {
content: "";
position: absolute;
inset: 0;
background-image: url("https://cdn.prod.website-files.com/6919b2263f90e18466591324/691b09ae6bd565bd4bfba154_2ad8ee1bbfb2c79df726815066dc41a385a425d8.png");
background-position: 50%;
opacity: .06;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 2;
}
/* Subtelny dark fade na dolu (spójność z coach-card) */
.principles-media::after {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(180deg, transparent 65%, rgba(25, 25, 25, .4) 100%);
pointer-events: none;
z-index: 1;
}
.principles-list {
display: flex;
flex-direction: column;
}
.principle-item {
padding: 36px 0;
border-bottom: 1px solid rgba(214, 241, 202, 0.12);
display: flex;
flex-direction: column;
gap: 14px;
}
.principle-item:first-child { padding-top: 0; }
.principle-item:last-child { border-bottom: none; }
.principle-item__title {
font-family: var(--font-title);
color: var(--text);
font-size: 38px;
line-height: 1;
font-weight: 400;
letter-spacing: -1.2px;
text-transform: uppercase;
}
.principle-item__body {
color: rgba(255, 255, 255, 0.72);
font-size: 16px;
line-height: 1.5;
max-width: 56ch;
}
@media (max-width: 1280px) {
.principles-top { gap: 80px; }
.principles-h3 { font-size: 36px; }
.principle-item__title { font-size: 32px; }
}
@media (max-width: 991px) {
.principles-section { padding: 80px 0; }
/* Na mobile: nagłówek + zdjęcie NAJPIERW, potem 4 punkty
(na desktop kolejność HTML: list → left, ale wizualny porządek czytania
na mobile wymaga eyebrow+tytuł+zdjęcie nad listą) */
.principles-top {
grid-template-columns: 1fr;
gap: 56px;
}
.principles-list { order: 2; }
.principles-left { order: 1; }
.principles-h3 { font-size: 32px; }
.principle-item__title { font-size: 28px; letter-spacing: -.8px; }
.principle-item { padding: 28px 0; }
}
@media (max-width: 640px) {
.principles-section { padding: 64px 0; }
.principles-h3 { font-size: 28px; letter-spacing: -1px; }
.principle-item__title { font-size: 24px; }
.principle-item__body { font-size: 15px; }
}
/* ============================================================
PROGRAMS / OFERTA SECTION (czarna, 4 słowa z hover animation)
============================================================ */
.programs-section {
background: var(--black);
padding: 140px 0;
position: relative;
overflow: hidden;
}
.programs-section .texture {
z-index: 0;
opacity: .04;
}
.programs-section .base-container {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.programs-eyebrow {
font-family: var(--font-labels);
font-size: 13px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
opacity: .65;
margin-bottom: 80px;
max-width: 540px;
line-height: 1.5;
}
.programs-list {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
margin-bottom: 64px;
}
.program-row {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 144px;
cursor: pointer;
}
.program-row__word {
font-family: var(--font-title);
font-size: 144px;
line-height: 1;
font-weight: 400;
letter-spacing: -3.6px;
text-transform: uppercase;
color: var(--text);
transition: opacity .35s ease;
}
.program-row__expand {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
opacity: 0;
pointer-events: none;
transition: opacity .35s ease;
}
.program-row__btn {
font-family: var(--font-labels);
font-size: 12px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
background: var(--primary);
text-decoration: none;
padding: 12px 20px;
border-radius: var(--radius-full);
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.program-row__desc {
font-family: var(--font-labels);
font-size: 13px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
opacity: .85;
max-width: 720px;
line-height: 1.4;
}
.program-row:hover .program-row__word { opacity: .1; }
.program-row:hover .program-row__expand { opacity: 1; pointer-events: auto; }
.programs-cta {
font-family: var(--font-labels);
font-size: 13px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
background: var(--white-12);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
text-decoration: none;
padding: 18px 32px;
border-radius: var(--radius-full);
display: inline-flex;
align-items: center;
gap: 12px;
transition: opacity .2s;
}
.programs-cta:hover { opacity: .85; }
@media (max-width: 1280px) {
.program-row__word { font-size: 112px; letter-spacing: -2.8px; }
.program-row { height: 112px; }
}
@media (max-width: 991px) {
.programs-section { padding: 80px 0; }
.program-row__word { font-size: 80px; letter-spacing: -2px; }
.program-row { height: 88px; }
.programs-eyebrow { margin-bottom: 56px; }
.program-row__desc { font-size: 12px; max-width: 480px; }
}
@media (max-width: 640px) {
.programs-section { padding: 64px 0; }
.program-row {
flex-direction: column;
height: auto;
padding: 24px 0;
gap: 12px;
}
.program-row__word { font-size: clamp(36px, 11vw, 56px); letter-spacing: -1px; opacity: 1 !important; }
.program-row__expand {
position: static;
opacity: 1 !important;
pointer-events: auto !important;
flex-direction: column;
gap: 12px;
}
.program-row__desc { font-size: 12px; max-width: 320px; }
.program-row__btn { min-height: 44px; padding: 12px 18px; }
}
/* Programs grid (Programy wiekowe) */
.programs-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: rgba(214, 241, 202, 0.08);
border: 1px solid rgba(214, 241, 202, 0.08);
}
.program-card {
padding: 56px 48px;
background: var(--black);
display: flex;
flex-direction: column;
gap: 20px;
min-height: 360px;
}
.program-card__age {
font-family: var(--font-labels);
font-size: 12px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--primary);
}
.program-card__name {
font-family: var(--font-title);
color: var(--text);
font-size: 56px;
line-height: .92;
font-weight: 400;
letter-spacing: -1.6px;
text-transform: uppercase;
}
.program-card__body {
color: rgba(214, 241, 202, .7);
font-size: 16px;
line-height: 1.5;
max-width: 42ch;
flex: 1;
}
.program-card__link {
font-family: var(--font-labels);
font-size: 12px;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
opacity: .7;
transition: opacity .2s, gap .2s;
align-self: flex-start;
}
.program-card__link:hover { opacity: 1; gap: 14px; }
@media (max-width: 1280px) {
.section__h2 { font-size: 52px; }
.program-card__name { font-size: 44px; }
}
@media (max-width: 991px) {
.section { padding: 80px 0; }
.section__h2 { font-size: 44px; letter-spacing: -1.4px; }
.feature-grid { grid-template-columns: repeat(2, 1fr); }
.program-card { padding: 40px 32px; min-height: 280px; }
.program-card__name { font-size: 38px; letter-spacing: -1.2px; }
}
@media (max-width: 640px) {
.section { padding: 64px 0; }
.section__h2 { font-size: 36px; letter-spacing: -1px; }
.section__header { margin-bottom: 48px; }
.feature-grid { grid-template-columns: 1fr; }
.programs-grid { grid-template-columns: 1fr; }
.program-card { padding: 32px 24px; min-height: auto; }
.program-card__name { font-size: 32px; }
.feature-card { min-height: auto; }
}
/* ============================================================
COACHES SECTION (banner ze zdjęciem + 3 karty trenerów)
============================================================ */
.coaches-section {
position: relative;
background: var(--black);
overflow: hidden;
}
.coaches-section .texture { z-index: 1; opacity: .04; }
.coaches-banner {
background-image:
linear-gradient(270deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .55) 22%, rgba(0, 0, 0, .15) 45%, transparent 65%),
linear-gradient(315deg, var(--black), #19191900 50%),
linear-gradient(58deg, var(--black), #191919 0%, var(--black) 0%, #19191900 28%),
linear-gradient(358deg, var(--black), #19191900 62%),
linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)),
image-set(url("coaches-banner.webp") type("image/webp"), url("coaches-banner.jpg") type("image/jpeg"));
background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 50% 40%;
background-size: auto, auto, auto, auto, auto, cover;
padding: 140px 0 180px;
position: relative;
}
.coaches-banner::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: .04;
background-image: url("https://cdn.prod.website-files.com/6919b2263f90e18466591324/691b09ae6bd565bd4bfba154_2ad8ee1bbfb2c79df726815066dc41a385a425d8.png");
background-position: 50%;
}
.coaches-banner > * { position: relative; z-index: 1; }
.coaches-banner-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 80px;
align-items: center;
}
.coaches-banner-title {
font-family: var(--font-title);
font-size: 168px;
line-height: .92;
font-weight: 400;
letter-spacing: -4px;
color: var(--text);
text-transform: uppercase;
text-align: left;
}
.coaches-banner-meta {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 380px;
}
.coaches-banner-eyebrow {
font-family: var(--font-labels);
font-size: 12px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
opacity: .8;
text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}
.coaches-banner-meta p {
color: var(--text);
font-size: 16px;
line-height: 1.5;
text-shadow: 0 2px 10px rgba(0, 0, 0, .65);
}
.coaches-banner-buttons {
display: flex;
gap: 10px;
margin-top: 12px;
flex-wrap: wrap;
}
.coaches-banner-buttons .primary-button,
.coaches-banner-buttons .secondary-button {
height: 50px;
padding: 16px 26px;
font-size: 13px;
}
/* 3 karty trenerów — wchodzą lekko na banner */
.coaches-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: -120px;
margin-bottom: 140px;
position: relative;
z-index: 5;
}
.coach-card {
position: relative;
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
background: var(--black);
}
.coach-card__photo {
width: 100%;
aspect-ratio: 4/5;
background-color: var(--black);
position: relative;
overflow: hidden;
}
.coach-card__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 30%;
display: block;
}
/* Cinematic grain overlay (jak w quote-card__photo, founders, hero) */
.coach-card__photo::before {
content: "";
position: absolute;
inset: 0;
background-image: url("https://cdn.prod.website-files.com/6919b2263f90e18466591324/691b09ae6bd565bd4bfba154_2ad8ee1bbfb2c79df726815066dc41a385a425d8.png");
background-position: 50%;
opacity: .06;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 2;
}
/* Subtelny dark fade na dolu zdjęcia żeby pasek z imieniem się ładnie łączył */
.coach-card__photo::after {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(180deg, transparent 60%, rgba(25, 25, 25, .55) 100%);
pointer-events: none;
z-index: 1;
}
.coach-card__bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 22px;
background: rgba(214, 241, 202, .04);
border-top: 1px solid rgba(214, 241, 202, .08);
}
.coach-card__info {
display: flex;
flex-direction: column;
gap: 6px;
}
.coach-card__name {
color: var(--text);
font-size: 17px;
font-weight: 500;
letter-spacing: -.2px;
}
.coach-card__exp {
color: var(--text);
opacity: .6;
font-family: var(--font-labels);
font-size: 10px;
letter-spacing: .06em;
text-transform: uppercase;
}
.coach-card__social {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--primary);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: var(--text);
transition: opacity .2s;
}
.coach-card__social:hover { opacity: .85; }
.coach-card__social svg { width: 16px; height: 16px; }
@media (max-width: 1280px) {
.coaches-banner-title { font-size: 128px; letter-spacing: -3px; }
}
@media (max-width: 991px) {
.coaches-banner { padding: 100px 0 140px; }
.coaches-banner-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
.coaches-banner-title { font-size: 88px; letter-spacing: -2.2px; }
.coaches-banner-meta { max-width: 100%; align-items: center; }
.coaches-banner-buttons { justify-content: center; }
.coaches-grid { grid-template-columns: 1fr; gap: 16px; margin-top: -80px; margin-bottom: 80px; }
}
@media (max-width: 640px) {
.coaches-banner { padding: 80px 0 100px; }
.coaches-banner-title { font-size: clamp(36px, 12vw, 48px); letter-spacing: -1px; }
.coaches-banner-buttons .primary-button,
.coaches-banner-buttons .secondary-button { min-height: 48px; }
}
/* ============================================================
QUOTE SECTION (cytat od założycieli — manifest + karta)
============================================================ */
.quote-section {
background: var(--black);
padding: 140px 0 120px;
position: relative;
overflow: hidden;
}
.quote-section .texture { z-index: 0; opacity: .04; }
.quote-section .base-container {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.quote-eyebrow {
font-family: var(--font-labels);
font-size: 12px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
opacity: .85;
margin-bottom: 40px;
}
.quote-title {
font-family: var(--font-title);
font-size: 128px;
line-height: .95;
font-weight: 400;
letter-spacing: -3.2px;
color: var(--text);
text-transform: uppercase;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: -100px;
}
.quote-title__line { display: block; }
.quote-title__line-wrap {
position: relative;
display: block;
}
.quote-title__line--dim {
color: var(--text);
opacity: .14;
filter: blur(3px);
}
.quote-title__inner-eyebrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--font-labels);
font-size: 13px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
opacity: 1;
filter: none;
white-space: nowrap;
text-shadow: 0 0 14px rgba(0, 0, 0, .9);
line-height: 1.4;
z-index: 2;
}
.quote-card {
position: relative;
z-index: 5;
display: grid;
grid-template-columns: 240px 1fr;
background: rgba(40, 40, 40, .85);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1px solid rgba(214, 241, 202, .1);
border-radius: 8px;
overflow: hidden;
max-width: 760px;
margin-top: 60px;
text-align: left;
}
.quote-card__photo {
aspect-ratio: 1/1;
background-image:
linear-gradient(135deg, rgba(19, 133, 97, .18), transparent 55%),
linear-gradient(to right, transparent 70%, rgba(25, 25, 25, .55) 100%),
image-set(url("founders.webp") type("image/webp"), url("founders.jpg") type("image/jpeg"));
background-size: cover;
background-position: 50% 50%;
background-color: var(--black);
position: relative;
overflow: hidden;
}
.quote-card__photo::before {
content: "";
position: absolute;
inset: 0;
background-image: url("https://cdn.prod.website-files.com/6919b2263f90e18466591324/691b09ae6bd565bd4bfba154_2ad8ee1bbfb2c79df726815066dc41a385a425d8.png");
background-position: 50%;
opacity: .06;
mix-blend-mode: overlay;
pointer-events: none;
}
.quote-card__body {
padding: 28px 32px;
display: flex;
flex-direction: column;
gap: 16px;
justify-content: space-between;
}
.quote-card__text {
color: var(--text);
font-size: 15px;
line-height: 1.55;
}
.quote-card__bottom {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 16px;
}
.quote-card__author {
display: flex;
flex-direction: column;
gap: 4px;
}
.quote-card__name {
color: var(--text);
font-size: 15px;
font-weight: 500;
}
.quote-card__role {
color: var(--text);
opacity: .55;
font-family: var(--font-labels);
font-size: 10px;
text-transform: uppercase;
letter-spacing: .06em;
}
.quote-card__cta {
flex-shrink: 0;
font-family: var(--font-labels);
font-size: 11px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
background: var(--primary);
text-decoration: none;
padding: 11px 18px;
border-radius: var(--radius-full);
display: inline-flex;
align-items: center;
gap: 8px;
transition: opacity .2s;
}
.quote-card__cta:hover { opacity: .85; }
@media (max-width: 1280px) {
.quote-title { font-size: 96px; letter-spacing: -2.4px; }
}
@media (max-width: 991px) {
.quote-section { padding: 80px 0 64px; }
.quote-title { font-size: 64px; letter-spacing: -1.6px; margin-bottom: -40px; }
.quote-title__inner-eyebrow { font-size: 11px; max-width: 90%; white-space: normal; }
.quote-card { grid-template-columns: 1fr; max-width: 480px; margin-top: 40px; }
/* Zdjęcie 3 założycieli — square + center-top żeby twarze były widoczne
(16/9 obcinało Kiełba i Czaję — fix po feedbacku Konrada) */
.quote-card__photo {
aspect-ratio: 1/1;
background-position: 50% 30%;
}
}
@media (max-width: 640px) {
.quote-title { font-size: 44px; letter-spacing: -1.1px; margin-bottom: -24px; }
.quote-title__inner-eyebrow { font-size: 10px; }
.quote-card__bottom { flex-direction: column; align-items: flex-start; }
}
/* ============ LICZBY (czarna, 6 statystyk 3x2) ============ */
.numbers-section {
background: var(--black);
padding: 140px 0;
position: relative;
overflow: hidden;
border-top: 1px solid var(--white-12);
}
.numbers-section .texture { z-index: 0; opacity: .04; }
.numbers-section .base-container {
position: relative;
z-index: 1;
align-items: stretch;
}
.numbers-header {
max-width: 760px;
margin-bottom: 96px;
width: 100%;
}
.numbers-eyebrow {
font-family: var(--font-labels);
font-size: 13px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 32px;
}
.numbers-eyebrow::before {
content: "";
width: 14px;
height: 14px;
background: var(--text);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.numbers-h2 {
font-family: var(--font-title);
color: var(--text);
font-size: 96px;
line-height: .92;
font-weight: 400;
letter-spacing: -2.5px;
text-transform: uppercase;
}
.numbers-h2 em {
font-style: normal;
color: var(--primary);
}
.numbers-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 80px 64px;
border-top: 1px solid var(--white-12);
padding-top: 80px;
width: 100%;
}
.number-item {
display: flex;
flex-direction: column;
gap: 20px;
}
.number-value {
font-family: var(--font-title);
color: var(--text);
font-size: 104px;
line-height: .9;
font-weight: 400;
letter-spacing: -3px;
}
.number-value em {
font-style: normal;
color: var(--primary);
}
.number-label {
font-family: var(--font-text);
color: var(--text);
font-size: 16px;
line-height: 1.45;
opacity: .7;
max-width: 280px;
}
@media (max-width: 1280px) {
.numbers-h2 { font-size: 80px; letter-spacing: -2px; }
.number-value { font-size: 88px; letter-spacing: -2.5px; }
}
@media (max-width: 991px) {
.numbers-section { padding: 80px 0; }
.numbers-header { margin-bottom: 64px; }
.numbers-h2 { font-size: 56px; letter-spacing: -1.5px; }
.numbers-grid { grid-template-columns: repeat(2, 1fr); gap: 56px 40px; padding-top: 56px; }
.number-value { font-size: 72px; letter-spacing: -2px; }
.number-label { font-size: 15px; }
}
@media (max-width: 640px) {
.numbers-section { padding: 64px 0; }
.numbers-h2 { font-size: 40px; letter-spacing: -1px; }
.numbers-grid { grid-template-columns: 1fr; gap: 40px; padding-top: 40px; }
.number-value { font-size: 64px; }
.number-label { max-width: 100%; }
}
/* ============ OPINIE RODZICÓW (Ballor demo 2) ============ */
.testimonials-section {
background: var(--black);
padding: 140px 0 100px;
position: relative;
overflow: hidden;
border-top: 1px solid var(--white-12);
--gold: #c9a560;
--gold-light: #e2c478;
--gold-deep: #8a6a2e;
}
.testimonials-section .texture { z-index: 0; opacity: .04; }
.testimonials-section .base-container {
position: relative;
z-index: 1;
align-items: stretch;
}
/* Eyebrow (kilka linijek, jak w Ballor demo 2) */
.testimonials-eyebrow {
font-family: var(--font-labels);
font-size: 13px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
line-height: 1.5;
max-width: 560px;
margin-bottom: 64px;
}
/* Ukryte radio inputs (sterowanie stanem) */
.testimonials-section .t-radio {
position: absolute;
opacity: 0;
pointer-events: none;
}
/* Container cytatów (overlay) */
.testimonials-quotes {
position: relative;
min-height: 480px;
margin-bottom: 80px;
}
.t-quote {
position: absolute;
inset: 0;
opacity: 0;
transform: translateY(16px);
transition: opacity .7s ease, transform .7s ease;
font-family: var(--font-title);
color: var(--primary);
font-size: 88px;
line-height: .96;
letter-spacing: -2.5px;
text-transform: uppercase;
font-weight: 400;
pointer-events: none;
}
.t-quote::before { content: '"'; }
.t-quote::after { content: '"'; }
/* Aktywny cytat — pokazany */
#t-q1:checked ~ .testimonials-quotes .t-q1,
#t-q2:checked ~ .testimonials-quotes .t-q2,
#t-q3:checked ~ .testimonials-quotes .t-q3,
#t-q4:checked ~ .testimonials-quotes .t-q4 {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* Linia rozdzielająca */
.testimonials-divider {
height: 1px;
background: var(--white-12);
margin-bottom: 32px;
}
/* Rząd autorów */
.testimonials-authors {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.t-author {
display: flex;
flex-direction: column;
gap: 12px;
cursor: pointer;
opacity: .35;
transition: opacity .35s ease;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.t-author:hover { opacity: .65; }
/* Aktywny autor — pełna jaskrawość */
#t-q1:checked ~ .testimonials-authors [data-author="1"],
#t-q2:checked ~ .testimonials-authors [data-author="2"],
#t-q3:checked ~ .testimonials-authors [data-author="3"],
#t-q4:checked ~ .testimonials-authors [data-author="4"] {
opacity: 1;
}
/* Gwiazdki — postarzany złoty z patyną i ziarnem */
.t-stars {
display: flex;
gap: 4px;
position: relative;
}
.t-star {
width: 14px;
height: 14px;
display: inline-block;
background:
url("https://cdn.prod.website-files.com/6919b2263f90e18466591324/691b09ae6bd565bd4bfba154_2ad8ee1bbfb2c79df726815066dc41a385a425d8.png"),
linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 45%, var(--gold-deep) 100%);
background-size: 80px 80px, cover;
background-blend-mode: multiply, normal;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
filter: contrast(1.05);
}
/* Imię i rola */
.t-name {
font-family: var(--font-text);
color: var(--text);
font-size: 17px;
font-weight: 500;
line-height: 1.3;
}
.t-role {
font-family: var(--font-labels);
color: var(--text);
font-size: 11px;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
opacity: .7;
}
/* Progress bar pod aktywnym autorem (auto-rotate visualizer) */
.t-author {
position: relative;
padding-bottom: 16px;
}
.t-author::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 0;
background: var(--primary);
transition: width .2s ease;
}
#t-q1:checked ~ .testimonials-authors [data-author="1"]::after,
#t-q2:checked ~ .testimonials-authors [data-author="2"]::after,
#t-q3:checked ~ .testimonials-authors [data-author="3"]::after,
#t-q4:checked ~ .testimonials-authors [data-author="4"]::after {
animation: t-progress 7s linear forwards;
}
.testimonials-section.is-paused [data-author]::after { animation: none !important; }
@keyframes t-progress {
from { width: 0; }
to { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.t-quote { transition: opacity .2s; transform: none !important; }
.t-author::after { animation: none !important; }
}
@media (max-width: 1280px) {
.t-quote { font-size: 64px; letter-spacing: -1.8px; }
.testimonials-quotes { min-height: 360px; }
}
@media (max-width: 991px) {
.testimonials-section { padding: 80px 0 64px; }
.testimonials-eyebrow { margin-bottom: 48px; }
.t-quote { font-size: 44px; letter-spacing: -1.2px; }
.testimonials-quotes { min-height: 280px; margin-bottom: 56px; }
.testimonials-authors { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}
@media (max-width: 640px) {
.testimonials-section { padding: 64px 0 48px; }
.t-quote { font-size: 32px; letter-spacing: -.8px; }
.testimonials-quotes { min-height: 320px; }
.testimonials-authors { grid-template-columns: 1fr; gap: 24px; }
}
/* ============ CENNIK (2 karty: Grupowe / Indywidualne) ============ */
.pricing-section {
background: var(--black);
padding: 140px 0 120px;
position: relative;
overflow: hidden;
border-top: 1px solid var(--white-12);
}
.pricing-section .texture { z-index: 0; opacity: .04; }
.pricing-section .base-container {
position: relative;
z-index: 1;
align-items: stretch;
}
.pricing-header {
max-width: 760px;
margin-bottom: 80px;
}
.pricing-eyebrow {
font-family: var(--font-labels);
font-size: 13px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 32px;
}
.pricing-eyebrow::before {
content: "";
width: 14px;
height: 14px;
background: var(--text);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.pricing-h2 {
font-family: var(--font-title);
color: var(--text);
font-size: 72px;
line-height: .94;
font-weight: 400;
letter-spacing: -2px;
text-transform: uppercase;
}
.pricing-h2 em {
font-style: normal;
color: var(--primary);
}
.pricing-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
width: 100%;
}
.pricing-card {
background: rgba(214, 241, 202, .03);
border: 1px solid var(--white-12);
border-radius: 12px;
padding: 40px 36px;
display: flex;
flex-direction: column;
gap: 24px;
transition: border-color .3s ease, transform .3s ease;
position: relative;
}
.pricing-card:hover {
border-color: rgba(214, 241, 202, .25);
transform: translateY(-4px);
}
.pricing-card--featured {
border-color: var(--primary);
background: linear-gradient(180deg, rgba(19, 133, 97, .08), rgba(19, 133, 97, .02));
}
.pricing-card__badge {
position: absolute;
top: -12px;
left: 32px;
padding: 6px 14px;
background: var(--primary);
color: var(--text);
font-family: var(--font-labels);
font-size: 10px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
border-radius: 999px;
}
.pricing-card__type {
font-family: var(--font-labels);
font-size: 12px;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
opacity: .65;
}
.pricing-card__title {
font-family: var(--font-title);
color: var(--text);
font-size: 56px;
line-height: .95;
font-weight: 400;
letter-spacing: -1.5px;
text-transform: uppercase;
}
.pricing-card__price {
display: flex;
align-items: baseline;
gap: 8px;
margin-top: 8px;
}
.pricing-card__amount {
font-family: var(--font-title);
color: var(--text);
font-size: 88px;
line-height: 1;
font-weight: 400;
letter-spacing: -2.5px;
}
.pricing-card__amount em {
font-style: normal;
color: var(--primary);
}
.pricing-card__per {
font-family: var(--font-text);
color: var(--text);
font-size: 16px;
opacity: .7;
}
.pricing-card__price--soft .pricing-card__amount {
font-size: 40px;
letter-spacing: -1px;
line-height: 1.1;
}
.pricing-card__features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.pricing-card__feature {
font-family: var(--font-text);
color: var(--text);
font-size: 15px;
line-height: 1.5;
opacity: .85;
padding-left: 24px;
position: relative;
}
.pricing-card__feature::before {
content: "→";
position: absolute;
left: 0;
top: 0;
color: var(--primary);
font-weight: 500;
}
.pricing-card__cta {
margin-top: auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 18px 28px;
border-radius: 999px;
font-family: var(--font-labels);
font-size: 12px;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
text-decoration: none;
transition: transform .25s ease, background .25s ease;
min-height: 48px;
background: rgba(214, 241, 202, .08);
color: var(--text);
border: 1px solid var(--white-12);
}
.pricing-card__cta:hover {
background: rgba(214, 241, 202, .14);
transform: translateY(-2px);
}
.pricing-card--featured .pricing-card__cta {
background: var(--primary);
border-color: var(--primary);
color: var(--text);
}
.pricing-card--featured .pricing-card__cta:hover {
background: #16a075;
}
.pricing-card__cta::after {
content: "→";
font-family: var(--font-text);
font-size: 16px;
}
.pricing-note {
margin-top: 32px;
font-family: var(--font-text);
font-size: 13px;
color: var(--text);
opacity: .55;
text-align: center;
line-height: 1.5;
}
@media (max-width: 991px) {
.pricing-section { padding: 80px 0; }
.pricing-header { margin-bottom: 56px; }
.pricing-h2 { font-size: 48px; letter-spacing: -1.2px; }
.pricing-grid { grid-template-columns: 1fr; gap: 32px; }
.pricing-card__title { font-size: 40px; letter-spacing: -1px; }
.pricing-card__amount { font-size: 64px; letter-spacing: -1.5px; }
}
@media (max-width: 640px) {
.pricing-section { padding: 64px 0; }
.pricing-h2 { font-size: 36px; letter-spacing: -.8px; }
.pricing-card { padding: 32px 24px; }
.pricing-card__amount { font-size: 56px; }
.pricing-card__price--soft .pricing-card__amount { font-size: 28px; }
}
/* ============ CTA "Gramy. Rośniemy." (pre-footer hero) ============ */
.cta-section {
background-color: var(--black);
background-image:
linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,.7) 100%),
image-set(url("cta-pitch.webp") type("image/webp"), url("cta-pitch.jpg") type("image/jpeg"));
background-size: cover;
background-position: 50% 50%;
padding: 220px 0 160px;
position: relative;
overflow: hidden;
border-top: 1px solid var(--white-12);
}
.cta-section .texture { z-index: 0; opacity: .06; mix-blend-mode: overlay; }
.cta-section .base-container {
position: relative;
z-index: 1;
align-items: center;
text-align: center;
}
.cta-eyebrow {
font-family: var(--font-labels);
font-size: 13px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
margin-bottom: 32px;
opacity: .85;
}
.cta-h1 {
font-family: var(--font-title);
color: var(--primary);
font-size: clamp(44px, 12vw, 200px);
line-height: .92;
letter-spacing: -3px;
text-transform: uppercase;
font-weight: 400;
margin-bottom: 64px;
text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.cta-h1 .lighter { color: var(--text); }
@media (max-width: 640px) {
.cta-h1 { letter-spacing: -.5px; margin-bottom: 40px; }
.cta-h1 .lighter { display: block; }
}
.cta-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 22px 36px;
background: var(--primary);
color: var(--text);
font-family: var(--font-labels);
font-size: 13px;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
text-decoration: none;
border-radius: 999px;
transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
box-shadow: 0 8px 32px rgba(19, 133, 97, .25);
}
.cta-btn:hover {
transform: translateY(-2px);
background: #16a075;
box-shadow: 0 12px 40px rgba(19, 133, 97, .35);
}
.cta-btn::after { content: "→"; font-family: var(--font-text); font-size: 18px; }
.cta-quotes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 64px;
margin-top: 140px;
padding-top: 32px;
border-top: 1px solid var(--white-12);
width: 100%;
}
.cta-quote {
font-family: var(--font-labels);
font-size: 12px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
line-height: 1.45;
opacity: .8;
text-align: center;
}
@media (max-width: 991px) {
.cta-section { padding: 140px 0 100px; }
.cta-h1 { letter-spacing: -1.5px; }
.cta-quotes { grid-template-columns: 1fr; gap: 24px; margin-top: 80px; }
}
@media (max-width: 640px) {
.cta-section { padding: 100px 0 72px; }
.cta-h1 { letter-spacing: -.5px; margin-bottom: 40px; }
.cta-btn { padding: 18px 28px; }
}
/* ============ COOKIE CONSENT BANNER ============ */
.cookie-consent {
position: fixed;
bottom: 24px;
left: 24px;
right: 24px;
max-width: 520px;
background: var(--black);
border: 1px solid var(--white-12);
border-radius: 14px;
padding: 24px 24px 20px;
z-index: 999;
box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
backdrop-filter: blur(8px);
transform: translateY(120%);
opacity: 0;
transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .4s ease;
}
.cookie-consent.is-visible {
transform: translateY(0);
opacity: 1;
}
.cookie-consent.is-leaving {
transform: translateY(120%);
opacity: 0;
}
.cookie-consent::before {
/* Subtelne ziarno na panelu */
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background-image: url("https://cdn.prod.website-files.com/6919b2263f90e18466591324/691b09ae6bd565bd4bfba154_2ad8ee1bbfb2c79df726815066dc41a385a425d8.png");
opacity: .04;
mix-blend-mode: overlay;
pointer-events: none;
}
.cookie-consent__inner { position: relative; z-index: 1; }
.cookie-consent__head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
/* Mała piłka SVG po lewej */
.cookie-consent__icon {
width: 28px;
height: 28px;
flex-shrink: 0;
background: var(--text);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.cookie-consent__title {
font-family: var(--font-text);
color: var(--text);
font-size: 17px;
font-weight: 500;
line-height: 1.3;
}
.cookie-consent__title em {
font-style: normal;
color: var(--primary);
}
.cookie-consent__body {
font-family: var(--font-text);
color: var(--text);
font-size: 14px;
line-height: 1.5;
opacity: .75;
margin-bottom: 20px;
}
.cookie-consent__body a {
color: var(--text);
text-decoration: underline;
text-decoration-color: rgba(214, 241, 202, .35);
transition: color .2s ease;
}
.cookie-consent__body a:hover { color: var(--primary); }
.cookie-consent__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.cookie-btn {
flex: 1 1 auto;
padding: 12px 18px;
border-radius: 999px;
font-family: var(--font-labels);
font-size: 11px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
cursor: pointer;
transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
border: 1px solid transparent;
background: transparent;
color: var(--text);
white-space: nowrap;
text-align: center;
}
.cookie-btn--primary {
background: var(--primary);
color: var(--text);
}
.cookie-btn--primary:hover {
background: #16a075;
transform: translateY(-1px);
}
.cookie-btn--secondary {
border-color: var(--white-12);
color: var(--text);
}
.cookie-btn--secondary:hover {
border-color: var(--text);
background: rgba(214, 241, 202, .05);
}
.cookie-btn--ghost {
color: var(--text);
opacity: .6;
}
.cookie-btn--ghost:hover { opacity: 1; }
/* Settings expanded view */
.cookie-consent__settings {
display: none;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--white-12);
}
.cookie-consent.is-settings .cookie-consent__settings { display: block; }
.cookie-consent.is-settings .cookie-consent__actions { display: none; }
.cookie-consent.is-settings .cookie-consent__settings-actions { display: flex; }
.cookie-toggle {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 12px 0;
border-bottom: 1px solid rgba(214, 241, 202, .06);
}
.cookie-toggle:last-of-type { border-bottom: none; }
.cookie-toggle__label {
font-family: var(--font-text);
color: var(--text);
font-size: 14px;
font-weight: 500;
line-height: 1.3;
margin-bottom: 2px;
}
.cookie-toggle__desc {
font-family: var(--font-text);
color: var(--text);
font-size: 12px;
opacity: .55;
line-height: 1.4;
}
.cookie-toggle__switch {
flex-shrink: 0;
margin-top: 4px;
}
/* Custom toggle */
.cookie-toggle__switch input { position: absolute; opacity: 0; }
.cookie-toggle__track {
display: inline-block;
width: 36px;
height: 20px;
background: rgba(214, 241, 202, .15);
border-radius: 999px;
position: relative;
cursor: pointer;
transition: background .25s ease;
}
.cookie-toggle__track::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: var(--text);
border-radius: 50%;
transition: transform .25s ease;
}
.cookie-toggle__switch input:checked + .cookie-toggle__track {
background: var(--primary);
}
.cookie-toggle__switch input:checked + .cookie-toggle__track::after {
transform: translateX(16px);
}
.cookie-toggle__switch input:disabled + .cookie-toggle__track {
background: var(--primary);
opacity: .5;
cursor: not-allowed;
}
.cookie-consent__settings-actions {
display: none;
gap: 8px;
margin-top: 16px;
}
@media (max-width: 640px) {
.cookie-consent {
left: 16px;
right: 16px;
bottom: 16px;
padding: 20px 18px 16px;
}
.cookie-consent__title { font-size: 15px; }
.cookie-consent__body { font-size: 13px; }
.cookie-btn { font-size: 10px; padding: 10px 14px; }
}
/* ============ FOOTER (Ballor demo 1) ============ */
.site-footer {
background: var(--black);
padding: 100px 0 32px;
position: relative;
overflow: hidden;
border-top: 1px solid var(--white-12);
}
.site-footer .texture { z-index: 0; opacity: .04; }
.site-footer .base-container {
position: relative;
z-index: 1;
align-items: stretch;
}
/* Top CTA strip */
.footer-cta {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 64px;
padding-bottom: 80px;
border-bottom: 1px solid var(--white-12);
margin-bottom: 80px;
}
.footer-cta__title {
font-family: var(--font-title);
color: var(--text);
font-size: 72px;
line-height: .95;
letter-spacing: -2px;
text-transform: uppercase;
font-weight: 400;
max-width: 800px;
}
.footer-cta__title em {
font-style: normal;
color: var(--primary);
}
.footer-cta__btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 22px 32px;
background: var(--primary);
color: var(--text);
font-family: var(--font-labels);
font-size: 13px;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
text-decoration: none;
border-radius: 999px;
transition: transform .25s ease, background .25s ease;
white-space: nowrap;
}
.footer-cta__btn:hover {
transform: translateY(-2px);
background: #16a075;
}
.footer-cta__btn::after {
content: "→";
font-family: var(--font-text);
font-size: 18px;
}
/* 4-column grid (Ballor pattern) */
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 64px;
margin-bottom: 100px;
}
.footer-col__heading {
font-family: var(--font-labels);
font-size: 12px;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
opacity: .55;
margin-bottom: 24px;
}
.footer-brand-tagline {
font-family: var(--font-text);
color: var(--text);
font-size: 17px;
line-height: 1.4;
max-width: 320px;
margin-top: 24px;
}
.footer-brand-tagline em {
font-style: normal;
color: var(--primary);
}
.footer-brand .brand-logo {
height: 56px;
display: inline-block;
}
.footer-brand .brand-logo img,
.footer-brand .brand-logo picture {
height: 56px;
width: auto;
}
.footer-list {
display: flex;
flex-direction: column;
gap: 12px;
list-style: none;
padding: 0;
margin: 0;
}
.footer-link {
font-family: var(--font-text);
color: var(--text);
font-size: 16px;
text-decoration: none;
line-height: 1.4;
transition: color .25s ease, transform .25s ease;
display: inline-block;
}
.footer-link:hover {
color: var(--primary);
transform: translateX(4px);
}
.footer-link__sub {
display: block;
font-family: var(--font-labels);
font-size: 11px;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
opacity: .5;
margin-top: 2px;
transform: none !important;
}
/* Wielki wordmark WNB (Ballor signature move) */
.footer-wordmark {
font-family: var(--font-title);
color: var(--text);
font-size: clamp(140px, 24vw, 380px);
line-height: .85;
letter-spacing: -8px;
text-transform: uppercase;
margin: 60px 0 80px;
text-align: left;
opacity: .96;
user-select: none;
}
.footer-wordmark em {
font-style: normal;
color: var(--primary);
}
/* Bottom strip */
.footer-bottom {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 32px;
align-items: center;
padding-top: 32px;
border-top: 1px solid var(--white-12);
font-family: var(--font-labels);
font-size: 11px;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
opacity: .55;
}
.footer-bottom a {
color: var(--text);
text-decoration: none;
transition: color .25s ease;
}
.footer-bottom a:hover { color: var(--primary); }
.footer-bottom__legal {
text-align: center;
display: flex;
gap: 20px;
justify-content: center;
}
.footer-bottom__credit { text-align: right; }
@media (max-width: 1280px) {
.footer-cta__title { font-size: 56px; letter-spacing: -1.5px; }
.footer-grid { gap: 40px; }
}
@media (max-width: 991px) {
.site-footer { padding: 80px 0 24px; }
.footer-cta {
grid-template-columns: 1fr;
gap: 32px;
padding-bottom: 56px;
margin-bottom: 56px;
}
.footer-cta__title { font-size: 40px; letter-spacing: -1px; }
.footer-cta__btn { align-self: flex-start; }
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 40px;
margin-bottom: 64px;
}
.footer-brand { grid-column: 1 / -1; }
.footer-wordmark { letter-spacing: -4px; margin: 40px 0 56px; }
.footer-bottom {
grid-template-columns: 1fr;
gap: 16px;
text-align: center;
}
.footer-bottom > * { text-align: center; }
}
@media (max-width: 640px) {
.footer-grid { grid-template-columns: 1fr; gap: 32px; }
.footer-cta__title { font-size: 32px; }
.footer-wordmark { letter-spacing: -2px; }
/* Touch targets: linki w footerze min 44px (Apple HIG) */
.footer-link, .footer-cta__btn, .cookie-btn {
min-height: 44px;
display: inline-flex;
align-items: center;
}
.footer-link__sub {
display: block;
width: 100%;
align-self: flex-start;
min-height: 0;
}
.footer-bottom a { min-height: 32px; display: inline-flex; align-items: center; }
}
/* ============================================================
SUBPAGES — wspólne komponenty dla podstron oferty
============================================================ */
/* Breadcrumb pod navbar */
.breadcrumb {
background: var(--black);
padding: 96px 0 0;
position: relative;
}
.breadcrumb-inner {
max-width: 1620px;
margin: 0 auto;
padding: 24px 40px 0;
font-family: var(--font-labels);
font-size: 12px;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
opacity: .55;
}
.breadcrumb-inner a {
color: var(--text);
text-decoration: none;
transition: color .25s ease;
}
.breadcrumb-inner a:hover { color: var(--primary); }
.breadcrumb-inner span[aria-hidden] {
margin: 0 10px;
opacity: .5;
}
@media (max-width: 991px) { .breadcrumb-inner { padding: 24px 20px 0; } }
/* Subpage hero — kompaktowy, mniejszy niż homepage */
.subpage-hero {
background-color: var(--black);
padding: 80px 0 100px;
position: relative;
overflow: hidden;
color: var(--text);
}
.subpage-hero__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: 50% 40%;
opacity: .35;
z-index: 0;
}
.subpage-hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(25,25,25,.4) 0%, rgba(25,25,25,.85) 100%);
z-index: 1;
}
.subpage-hero .texture { z-index: 2; opacity: .04; }
.subpage-hero__inner {
position: relative;
z-index: 3;
max-width: 1620px;
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
.subpage-hero__eyebrow {
font-family: var(--font-labels);
font-size: 13px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
opacity: .85;
display: flex;
align-items: center;
gap: 12px;
}
.subpage-hero__eyebrow::before {
content: "";
width: 14px;
height: 14px;
background: var(--text);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.subpage-hero__h1 {
font-family: var(--font-title);
font-size: clamp(48px, 7vw, 112px);
line-height: .92;
font-weight: 400;
letter-spacing: -2px;
text-transform: uppercase;
color: var(--text);
max-width: 920px;
}
.subpage-hero__h1 em { font-style: normal; color: var(--primary); }
.subpage-hero__sub {
font-family: var(--font-text);
font-size: 18px;
line-height: 1.5;
color: var(--text);
opacity: .85;
max-width: 640px;
margin-top: 8px;
}
.subpage-hero__badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
.subpage-hero__badge {
font-family: var(--font-labels);
font-size: 11px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
background: var(--white-12);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
padding: 10px 16px;
border-radius: var(--radius-full);
}
.subpage-hero__cta-row {
display: flex;
gap: 12px;
margin-top: 24px;
flex-wrap: wrap;
}
@media (max-width: 991px) {
.subpage-hero { padding: 56px 0 72px; }
.subpage-hero__inner { padding: 0 20px; }
}
/* Subpage section base */
.subpage-section {
background: var(--black);
padding: 100px 0;
position: relative;
overflow: hidden;
border-top: 1px solid var(--white-12);
color: var(--text);
}
.subpage-section .texture { z-index: 0; opacity: .04; }
.subpage-section__inner {
max-width: 1620px;
margin: 0 auto;
padding: 0 40px;
position: relative;
z-index: 1;
}
.subpage-section__head {
max-width: 760px;
margin-bottom: 64px;
}
.subpage-section__eyebrow {
font-family: var(--font-labels);
font-size: 13px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
margin-bottom: 24px;
opacity: .65;
}
.subpage-section__h2 {
font-family: var(--font-title);
font-size: clamp(36px, 5vw, 72px);
line-height: .94;
font-weight: 400;
letter-spacing: -2px;
text-transform: uppercase;
color: var(--text);
}
.subpage-section__h2 em { font-style: normal; color: var(--primary); }
.subpage-section__intro {
font-family: var(--font-text);
font-size: 18px;
line-height: 1.5;
color: var(--text);
opacity: .85;
margin-top: 24px;
max-width: 720px;
}
@media (max-width: 991px) {
.subpage-section { padding: 72px 0; }
.subpage-section__inner { padding: 0 20px; }
.subpage-section__head { margin-bottom: 48px; }
}
/* Lista "co dostajesz" — 7 punktów */
.what-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px 32px;
}
.what-list li {
font-family: var(--font-text);
font-size: 17px;
line-height: 1.45;
color: var(--text);
padding-left: 32px;
position: relative;
padding-bottom: 16px;
border-bottom: 1px solid rgba(214, 241, 202, .06);
}
.what-list li::before {
content: "→";
position: absolute;
left: 0;
top: 0;
color: var(--primary);
font-weight: 600;
font-size: 18px;
}
@media (max-width: 640px) {
.what-list { grid-template-columns: 1fr; gap: 8px; }
}
/* FAQ accordion (details/summary, native) */
.faq-list {
display: flex;
flex-direction: column;
gap: 0;
border-top: 1px solid var(--white-12);
}
.faq-item {
border-bottom: 1px solid var(--white-12);
padding: 0;
}
.faq-summary {
list-style: none;
cursor: pointer;
padding: 24px 48px 24px 0;
font-family: var(--font-title);
font-size: clamp(20px, 2.5vw, 28px);
line-height: 1.2;
letter-spacing: -.5px;
text-transform: uppercase;
color: var(--text);
position: relative;
transition: color .25s ease;
user-select: none;
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary::after {
content: "+";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
font-family: var(--font-text);
font-size: 28px;
font-weight: 300;
color: var(--primary);
transition: transform .25s ease;
}
.faq-item[open] .faq-summary::after {
transform: translateY(-50%) rotate(45deg);
}
.faq-item[open] .faq-summary { color: var(--primary); }
.faq-summary:hover { color: var(--primary); }
.faq-body {
padding: 0 48px 24px 0;
font-family: var(--font-text);
font-size: 17px;
line-height: 1.55;
color: var(--text);
opacity: .85;
}
.faq-body p { margin-bottom: 12px; }
.faq-body p:last-child { margin-bottom: 0; }
/* Schedule summary card (na podstronie szkółki, link do /grafik/) */
.schedule-card {
background: rgba(214, 241, 202, .03);
border: 1px solid var(--white-12);
border-radius: 12px;
padding: 36px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
align-items: center;
}
.schedule-card__left {
display: flex;
flex-direction: column;
gap: 14px;
}
.schedule-card__day {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
padding: 10px 0;
border-bottom: 1px solid rgba(214, 241, 202, .06);
}
.schedule-card__day:last-child { border-bottom: none; }
.schedule-card__day-name {
font-family: var(--font-labels);
font-size: 12px;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
opacity: .65;
}
.schedule-card__day-time {
font-family: var(--font-title);
font-size: 22px;
line-height: 1;
color: var(--text);
}
.schedule-card__cta-block {
display: flex;
flex-direction: column;
gap: 16px;
text-align: left;
}
.schedule-card__cta-text {
font-family: var(--font-text);
font-size: 16px;
color: var(--text);
opacity: .85;
line-height: 1.45;
}
@media (max-width: 991px) {
.schedule-card { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; }
}
/* Generic primary button (dla CTA wewnątrz subpages) */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 18px 28px;
background: var(--primary);
color: var(--text);
font-family: var(--font-labels);
font-size: 13px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
text-decoration: none;
border-radius: 999px;
transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
min-height: 48px;
white-space: nowrap;
}
.btn-primary:hover {
background: #16a075;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(19, 133, 97, .25);
}
.btn-primary::after { content: "→"; font-family: var(--font-text); font-size: 18px; }
.btn-secondary {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 18px 28px;
background: var(--white-12);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
color: var(--text);
font-family: var(--font-labels);
font-size: 13px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
text-decoration: none;
border-radius: 999px;
transition: transform .2s ease, background .2s ease;
min-height: 48px;
white-space: nowrap;
}
.btn-secondary:hover {
background: rgba(255, 255, 255, .18);
transform: translateY(-2px);
}
/* Camp cards — dla podstrony obozy, z FOMO statusami */
.camp-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.camp-card {
background: rgba(214, 241, 202, .03);
border: 1px solid var(--white-12);
border-radius: 12px;
padding: 28px 28px 24px;
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
overflow: hidden;
transition: border-color .3s ease, transform .3s ease;
}
.camp-card:hover {
border-color: rgba(214, 241, 202, .25);
transform: translateY(-4px);
}
.camp-card--available {
border-color: var(--primary);
background: linear-gradient(180deg, rgba(19, 133, 97, .08), rgba(19, 133, 97, .02));
}
.camp-card--soldout {
opacity: .55;
}
.camp-card--soon {
opacity: .8;
}
.camp-card__status {
position: absolute;
top: 14px;
right: 14px;
padding: 6px 12px;
border-radius: 999px;
font-family: var(--font-labels);
font-size: 10px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
}
.camp-card__status--soldout {
background: rgba(180, 60, 60, .18);
color: #ff8b8b;
}
.camp-card__status--available {
background: var(--primary);
color: var(--text);
}
.camp-card__status--soon {
background: rgba(214, 241, 202, .12);
color: var(--text);
}
.camp-card__title {
font-family: var(--font-title);
font-size: 32px;
line-height: .95;
letter-spacing: -.8px;
text-transform: uppercase;
color: var(--text);
margin-top: 20px;
}
.camp-card__meta {
display: flex;
flex-direction: column;
gap: 4px;
font-family: var(--font-labels);
font-size: 11px;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
opacity: .7;
}
.camp-card__meta strong {
font-family: var(--font-text);
font-weight: 500;
font-size: 13px;
text-transform: none;
letter-spacing: 0;
color: var(--text);
opacity: 1;
}
.camp-card__desc {
font-family: var(--font-text);
font-size: 15px;
line-height: 1.5;
color: var(--text);
opacity: .8;
}
.camp-card__cta {
margin-top: auto;
align-self: flex-start;
}
.camp-card__placeholder {
width: 100%;
aspect-ratio: 16/9;
background: linear-gradient(135deg, rgba(214, 241, 202, .06), rgba(19, 133, 97, .12));
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text);
opacity: .35;
font-family: var(--font-labels);
font-size: 11px;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
margin-bottom: 8px;
}
@media (max-width: 991px) {
.camp-grid { grid-template-columns: 1fr; }
}
/* Weekly schedule grid (dla wynajmu boiska) */
.arena-schedule {
background: rgba(214, 241, 202, .02);
border: 1px solid var(--white-12);
border-radius: 12px;
overflow: hidden;
}
.arena-schedule__row {
display: grid;
grid-template-columns: 110px 1fr 1fr 1fr 1fr;
border-bottom: 1px solid var(--white-12);
}
.arena-schedule__row:last-child { border-bottom: none; }
.arena-schedule__head {
background: rgba(0, 0, 0, .3);
font-family: var(--font-labels);
font-size: 11px;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
opacity: .7;
}
.arena-schedule__cell {
padding: 14px 12px;
border-right: 1px solid var(--white-12);
font-family: var(--font-text);
font-size: 13px;
line-height: 1.3;
color: var(--text);
min-height: 56px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.arena-schedule__cell:last-child { border-right: none; }
.arena-schedule__day {
background: rgba(0, 0, 0, .25);
font-family: var(--font-labels);
font-size: 11px;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
font-weight: 500;
opacity: .85;
}
.arena-schedule__cell--free {
background: rgba(19, 133, 97, .14);
color: var(--text);
cursor: pointer;
text-decoration: none;
transition: background .2s ease;
}
.arena-schedule__cell--free:hover {
background: rgba(19, 133, 97, .28);
}
.arena-schedule__cell--training {
background: rgba(214, 241, 202, .04);
color: var(--text);
opacity: .55;
font-style: italic;
}
.arena-schedule__cell--booked {
background: rgba(180, 60, 60, .12);
color: var(--text);
opacity: .5;
text-decoration: line-through;
}
.arena-schedule__legend {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 24px;
font-family: var(--font-labels);
font-size: 11px;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
opacity: .7;
}
.arena-schedule__legend-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 2px;
margin-right: 6px;
vertical-align: middle;
}
@media (max-width: 991px) {
.arena-schedule__row { grid-template-columns: 80px 1fr 1fr 1fr 1fr; }
.arena-schedule__cell { padding: 10px 6px; font-size: 11px; min-height: 48px; }
}
@media (max-width: 640px) {
.arena-schedule { font-size: 10px; }
.arena-schedule__row { grid-template-columns: 64px 1fr 1fr 1fr 1fr; }
.arena-schedule__cell { padding: 8px 4px; font-size: 10px; min-height: 44px; }
.arena-schedule__head .arena-schedule__cell { font-size: 9px; }
}
/* ============================================================
KONTAKT — formularz, karty kontaktowe, mapa
============================================================ */
/* Karty kontaktowe (3 kolumny: Email / Telefon / Lokalizacja) */
.contact-channels {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
width: 100%;
}
.contact-channel {
background: rgba(214, 241, 202, .03);
border: 1px solid var(--white-12);
border-radius: 12px;
padding: 32px 28px;
text-decoration: none;
color: var(--text);
transition: border-color .25s ease, transform .25s ease, background .25s ease;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 220px;
}
.contact-channel:hover {
border-color: rgba(214, 241, 202, .25);
background: rgba(214, 241, 202, .05);
transform: translateY(-3px);
}
.contact-channel__label {
font-family: var(--font-labels);
font-size: 11px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
opacity: .65;
}
.contact-channel__value {
font-family: var(--font-title);
font-size: 28px;
line-height: 1.05;
letter-spacing: -.6px;
color: var(--text);
text-transform: none;
margin-top: auto;
word-break: break-word;
}
.contact-channel__sub {
font-family: var(--font-text);
font-size: 13px;
line-height: 1.4;
color: var(--text);
opacity: .65;
}
@media (max-width: 991px) {
.contact-channels { grid-template-columns: 1fr; gap: 12px; }
.contact-channel { min-height: auto; padding: 24px; }
.contact-channel__value { font-size: 22px; }
}
/* Mapa — wrapper aspect ratio 16:9 (Google Maps iframe) */
.contact-map {
width: 100%;
aspect-ratio: 16/9;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--white-12);
background: rgba(214, 241, 202, .04);
position: relative;
}
.contact-map iframe {
width: 100%;
height: 100%;
border: 0;
filter: invert(.92) hue-rotate(180deg) saturate(.6);
}
.contact-map__cta {
position: absolute;
bottom: 16px;
right: 16px;
z-index: 2;
}
/* Formularz kontaktowy */
.contact-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.contact-form__field {
display: flex;
flex-direction: column;
gap: 6px;
}
.contact-form__field--full { grid-column: 1 / -1; }
.contact-form__label {
font-family: var(--font-labels);
font-size: 11px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
opacity: .7;
}
.contact-form__input,
.contact-form__textarea,
.contact-form__select {
background: rgba(214, 241, 202, .04);
border: 1px solid var(--white-12);
border-radius: 8px;
padding: 14px 16px;
font-family: var(--font-text);
font-size: 16px;
color: var(--text);
transition: border-color .2s ease, background .2s ease;
width: 100%;
min-height: 48px;
-webkit-appearance: none;
appearance: none;
}
.contact-form__input:focus,
.contact-form__textarea:focus,
.contact-form__select:focus {
outline: none;
border-color: var(--primary);
background: rgba(19, 133, 97, .08);
}
.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
color: var(--text);
opacity: .35;
}
.contact-form__textarea {
min-height: 140px;
resize: vertical;
font-family: var(--font-text);
line-height: 1.5;
}
.contact-form__select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 12px;
padding-right: 44px;
}
.contact-form__select option {
background: var(--black);
color: var(--text);
}
.contact-form__error {
font-family: var(--font-text);
font-size: 12px;
color: #ff8b8b;
min-height: 16px;
}
.contact-form__submit-row {
grid-column: 1 / -1;
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
margin-top: 8px;
}
.contact-form__note {
font-family: var(--font-text);
font-size: 13px;
color: var(--text);
opacity: .6;
line-height: 1.4;
}
@media (max-width: 640px) {
.contact-form { grid-template-columns: 1fr; }
}
/* Sekcja "Pasek socjalny" pod formularzem */
.social-strip {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 8px;
}
.social-strip__btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
background: var(--white-12);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
color: var(--text);
font-family: var(--font-labels);
font-size: 12px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
text-decoration: none;
border-radius: 999px;
transition: background .2s ease, transform .2s ease;
min-height: 44px;
}
.social-strip__btn:hover {
background: rgba(255, 255, 255, .18);
transform: translateY(-2px);
}
.social-strip__btn svg { width: 16px; height: 16px; }
/* ============================================================
BLOG — index z listą artykułów + szablon artykułu
============================================================ */
/* Lista artykułów na /blog/ */
.blog-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.blog-card {
background: rgba(214, 241, 202, .03);
border: 1px solid var(--white-12);
border-radius: 12px;
padding: 32px;
text-decoration: none;
color: var(--text);
display: flex;
flex-direction: column;
gap: 16px;
transition: border-color .25s ease, transform .25s ease, background .25s ease;
min-height: 320px;
}
.blog-card:hover {
border-color: rgba(214, 241, 202, .25);
background: rgba(214, 241, 202, .05);
transform: translateY(-4px);
}
.blog-card__meta {
font-family: var(--font-labels);
font-size: 11px;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
opacity: .55;
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.blog-card__title {
font-family: var(--font-title);
font-size: clamp(24px, 2.5vw, 32px);
line-height: 1.05;
letter-spacing: -.6px;
text-transform: uppercase;
color: var(--text);
}
.blog-card__excerpt {
font-family: var(--font-text);
font-size: 15px;
line-height: 1.5;
color: var(--text);
opacity: .8;
}
.blog-card__read {
margin-top: auto;
font-family: var(--font-labels);
font-size: 12px;
font-weight: 500;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--primary);
display: inline-flex;
align-items: center;
gap: 8px;
}
.blog-card__read::after { content: "→"; }
@media (max-width: 991px) {
.blog-grid { grid-template-columns: 1fr; gap: 16px; }
.blog-card { padding: 24px; min-height: auto; }
}
/* Artykuł — typografia */
.article-hero {
background: var(--black);
padding: 100px 0 56px;
border-top: 1px solid var(--white-12);
position: relative;
overflow: hidden;
}
.article-hero .texture { z-index: 0; opacity: .04; }
.article-hero__inner {
max-width: 880px;
margin: 0 auto;
padding: 0 40px;
position: relative;
z-index: 1;
}
.article-hero__meta {
font-family: var(--font-labels);
font-size: 11px;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text);
opacity: .55;
margin-bottom: 24px;
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.article-hero__title {
font-family: var(--font-title);
font-size: clamp(36px, 6vw, 80px);
line-height: .95;
letter-spacing: -2px;
text-transform: uppercase;
color: var(--text);
margin-bottom: 24px;
}
.article-hero__title em { font-style: normal; color: var(--primary); }
.article-hero__lead {
font-family: var(--font-text);
font-size: clamp(18px, 2vw, 22px);
line-height: 1.5;
color: var(--text);
opacity: .85;
}
.article-body {
background: var(--black);
padding: 80px 0 100px;
position: relative;
}
.article-body__inner {
max-width: 720px;
margin: 0 auto;
padding: 0 40px;
position: relative;
z-index: 1;
color: var(--text);
}
.article-body__inner h2 {
font-family: var(--font-title);
font-size: clamp(28px, 3.5vw, 44px);
line-height: 1.05;
letter-spacing: -1px;
text-transform: uppercase;
color: var(--text);
margin: 56px 0 20px;
}
.article-body__inner h2 em { font-style: normal; color: var(--primary); }
.article-body__inner h2:first-child { margin-top: 0; }
.article-body__inner h3 {
font-family: var(--font-title);
font-size: clamp(22px, 2.5vw, 28px);
line-height: 1.15;
letter-spacing: -.3px;
text-transform: uppercase;
color: var(--text);
margin: 40px 0 16px;
}
.article-body__inner p {
font-family: var(--font-text);
font-size: 17px;
line-height: 1.65;
color: var(--text);
margin-bottom: 18px;
opacity: .88;
}
.article-body__inner p strong {
color: var(--text);
font-weight: 600;
opacity: 1;
}
.article-body__inner ul,
.article-body__inner ol {
padding-left: 24px;
margin-bottom: 24px;
color: var(--text);
opacity: .88;
}
.article-body__inner li {
font-family: var(--font-text);
font-size: 17px;
line-height: 1.6;
margin-bottom: 8px;
}
.article-body__inner a {
color: var(--primary);
text-decoration: underline;
text-decoration-color: rgba(19, 133, 97, .4);
text-underline-offset: 3px;
transition: text-decoration-color .25s ease;
}
.article-body__inner a:hover { text-decoration-color: var(--primary); }
.article-body__inner blockquote {
margin: 32px 0;
padding: 24px 32px;
border-left: 3px solid var(--primary);
background: rgba(19, 133, 97, .04);
border-radius: 0 8px 8px 0;
font-family: var(--font-text);
font-size: 18px;
line-height: 1.5;
font-style: italic;
color: var(--text);
}
.article-body__cta {
margin-top: 48px;
padding: 32px;
background: linear-gradient(135deg, rgba(19, 133, 97, .12), rgba(19, 133, 97, .03));
border: 1px solid var(--primary);
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-start;
}
.article-body__cta-title {
font-family: var(--font-title);
font-size: 28px;
line-height: 1;
letter-spacing: -.5px;
text-transform: uppercase;
color: var(--text);
}
.article-body__cta-text {
font-family: var(--font-text);
font-size: 16px;
line-height: 1.5;
color: var(--text);
opacity: .85;
}
@media (max-width: 991px) {
.article-hero { padding: 72px 0 40px; }
.article-hero__inner,
.article-body__inner { padding: 0 20px; }
.article-body { padding: 56px 0 80px; }
}