/* ============================================================ Poligon Strażacki — Landing "Gaszenie pożarów wewnętrznych" 3 kierunki wizualne sterowane atrybutem [data-dir] na A = grafit (domyślny) · B = editorial · C = industrial ============================================================ */ :root { /* sterowane przez Tweaks */ --accent: #ca4445; --radius: 16px; /* paleta bazowa */ --ink: #15161b; --hero-bg: #131419; --page: #ffffff; --soft: #f5f4f2; --line: #e6e4e0; --text: #1b1c22; --muted: #62646e; --on-dark: #f3f1ee; --on-dark-mute: #a7a8b0; --accent-ink: #ffffff; /* tekst na akcencie */ --maxw: 1180px; --ff-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --ff-head: "Inter", system-ui, sans-serif; --ff-label: "Inter", system-ui, sans-serif; --head-weight: 800; --head-tracking: -0.02em; --label-tracking: 0.04em; --label-transform: none; --shadow: 0 24px 60px -28px rgba(20,20,30,.35); --shadow-sm: 0 10px 30px -18px rgba(20,20,30,.30); --section-pad: clamp(56px, 8vw, 120px); } /* ---------- B · EDITORIAL ---------- */ [data-dir="b"] { --radius: 6px; --page: #faf8f4; --soft: #f1ede5; --line: #e3ded3; --text: #1d1b16; --muted: #6a655b; --hero-bg: #17150f; --ff-head: "Source Serif 4", Georgia, serif; --head-weight: 600; --head-tracking: -0.01em; --label-tracking: 0.18em; --label-transform: uppercase; --shadow: 0 30px 70px -34px rgba(40,30,15,.30); --section-pad: clamp(64px, 9vw, 140px); } /* ---------- C · INDUSTRIAL ---------- */ [data-dir="c"] { --radius: 0px; --page: #f2f3f5; --soft: #e7e9ed; --line: #d3d6dc; --text: #14161a; --muted: #5a5e69; --hero-bg: #0c0d10; --ff-head: "Space Grotesk", system-ui, sans-serif; --ff-label: "JetBrains Mono", ui-monospace, monospace; --head-weight: 700; --head-tracking: -0.015em; --label-tracking: 0.16em; --label-transform: uppercase; --shadow: none; --shadow-sm: none; --section-pad: clamp(52px, 7vw, 104px); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--ff-body); color: var(--text); background: var(--page); -webkit-font-smoothing: antialiased; line-height: 1.55; font-size: 17px; } h1, h2, h3, h4 { font-family: var(--ff-head); font-weight: var(--head-weight); letter-spacing: var(--head-tracking); line-height: 1.06; margin: 0; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } a { color: inherit; text-decoration: none; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .eyebrow { font-family: var(--ff-label); font-size: 12.5px; font-weight: 600; letter-spacing: var(--label-tracking); text-transform: var(--label-transform); color: var(--accent); display: inline-flex; align-items: center; gap: 9px; } .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent); display: inline-block; } [data-dir="c"] .eyebrow::before { width: 9px; height: 9px; background: var(--accent); } .section { padding: var(--section-pad) 0; } .section--soft { background: var(--soft); } .section-head { max-width: 720px; margin-bottom: 48px; } .section-head h2 { font-size: clamp(30px, 4.2vw, 52px); margin-top: 16px; } .section-head p { color: var(--muted); font-size: 19px; margin-top: 18px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ff-label); font-weight: 600; font-size: 15px; letter-spacing: .01em; padding: 15px 26px; border-radius: calc(var(--radius) * .7); border: 1.5px solid transparent; cursor: pointer; transition: transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease; white-space: nowrap; } [data-dir="c"] .btn { text-transform: uppercase; letter-spacing: .08em; font-size: 13px; } .btn--primary { background: var(--accent); color: var(--accent-ink); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px color-mix(in oklab, var(--accent) 60%, transparent); } .btn--ghost { background: transparent; border-color: currentColor; color: var(--text); } .btn--ghost:hover { background: var(--text); color: var(--page); } .btn--on-dark { color: var(--on-dark); border-color: rgba(255,255,255,.4); } .btn--on-dark:hover { background: var(--on-dark); color: var(--ink); } .btn--lg { padding: 18px 34px; font-size: 16px; } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--page) 82%, transparent); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--line); } .nav__inner { display: flex; align-items: center; gap: 28px; height: 72px; } .brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-family: var(--ff-head); letter-spacing: -.01em; } .brand__mark { width: 38px; height: 38px; border-radius: calc(var(--radius) * .5); background: var(--accent); color: #fff; display: grid; place-items: center; flex: 0 0 auto; box-shadow: var(--shadow-sm); } .brand__mark svg { width: 22px; height: 22px; } .brand small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: .02em; } .brand__logo { height: 34px; width: auto; display: block; } .nav .brand__logo { filter: brightness(0); } .msheet .brand__logo { height: 30px; filter: brightness(0); } .foot .brand__logo { height: 42px; margin-bottom: 18px; } .nav__links { display: flex; gap: 26px; margin-left: 14px; } .nav__links a { font-size: 15px; color: var(--muted); font-weight: 500; transition: color .15s; } .nav__links a:hover { color: var(--text); } .nav__cta { margin-left: auto; display: flex; align-items: center; gap: 14px; } .nav__burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; } .nav__burger svg { width: 26px; height: 26px; } /* ---------- Hero ---------- */ .hero { position: relative; background: var(--hero-bg); color: var(--on-dark); overflow: hidden; } .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__media image-slot { width: 100%; height: 100%; display: block; } .hero__poster { position: absolute; inset: 0; z-index: 0; } .hero__video { position: absolute; inset: 0; overflow: hidden; z-index: 1; opacity: 0; transition: opacity .5s ease; background: var(--hero-bg); transform: scale(1.35); } .hero__video.playing { opacity: 1; } .hero__watch { position: absolute; z-index: 4; right: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px 11px 14px; border-radius: 999px; background: rgba(10,10,14,.5); border: 1px solid rgba(255,255,255,.28); color: #fff; cursor: pointer; backdrop-filter: blur(8px); font-family: var(--ff-label); font-size: 13px; font-weight: 600; letter-spacing: .02em; transition: background .18s ease, transform .18s ease, border-color .18s ease; } .hero__watch:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-1px); } .hero__watch svg { width: 18px; height: 18px; flex: 0 0 auto; } @media (max-width: 700px) { .hero__watch { padding: 11px; right: 16px; bottom: 16px; } .hero__watch span { display: none; } } .hero__video iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0; pointer-events: none; } [data-hero="image"] .hero__video { display: none; } [data-hero="video"] .hero__poster { z-index: 0; } .hero__scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(8,8,12,.55) 0%, rgba(8,8,12,.35) 40%, rgba(8,8,12,.82) 100%), radial-gradient(120% 90% at 15% 10%, transparent 30%, rgba(8,8,12,.5) 100%); } .hero__inner { position: relative; z-index: 3; padding: clamp(72px,11vw,150px) 0 clamp(60px,8vw,110px); } .hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: end; } .hero h1 { font-size: clamp(40px, 6.4vw, 84px); margin: 22px 0 0; } .hero__lead { font-size: clamp(18px, 2vw, 23px); color: var(--on-dark-mute); margin-top: 20px; max-width: 30ch; font-style: italic; } [data-dir="c"] .hero__lead { font-style: normal; } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .hero__trust { display: flex; align-items: center; gap: 14px; margin-top: 30px; color: var(--on-dark-mute); font-size: 14.5px; } .stars { color: #f5b740; letter-spacing: 2px; font-size: 15px; } .hero__eyebrow { color: #fff; } .hero__eyebrow { font-family: var(--ff-label); font-size: 12.5px; font-weight: 600; letter-spacing: var(--label-tracking); text-transform: var(--label-transform); display: inline-flex; align-items: center; gap: 10px; } .hero__eyebrow .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 35%, transparent); } .hero__card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); padding: 24px; backdrop-filter: blur(6px); } .hero__card h4 { color: #fff; font-size: 16px; margin-bottom: 14px; } .hero__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .hero__card li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--on-dark-mute); } .hero__card li svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; margin-top: 2px; } /* ---------- Stats ---------- */ .stats { background: var(--ink); color: var(--on-dark); } [data-dir="b"] .stats { background: #221f18; } .stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); } .stat { padding: 40px 24px; text-align: center; border-left: 1px solid rgba(255,255,255,.1); } .stat:first-child { border-left: 0; } .stat__num { font-family: var(--ff-head); font-weight: var(--head-weight); font-size: clamp(34px, 4vw, 50px); color: #fff; line-height: 1; } .stat__num b { color: var(--accent); font-weight: inherit; } .stat__label { margin-top: 10px; font-size: 14px; color: var(--on-dark-mute); } /* ---------- Why ---------- */ .why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .why__media { aspect-ratio: 4/3.4; } .why__media image-slot { width: 100%; height: 100%; display: block; } .why__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); display: block; } .why p.big { font-size: clamp(20px, 2.4vw, 27px); line-height: 1.5; margin-top: 20px; } .why p.big b { color: var(--accent); font-weight: 600; } .why__note { margin-top: 24px; color: var(--muted); font-size: 17px; } /* ---------- Program tabs ---------- */ .tabs__nav { display: inline-flex; gap: 6px; padding: 6px; background: var(--soft); border: 1px solid var(--line); border-radius: calc(var(--radius) * .8); margin-bottom: 40px; } .section--soft .tabs__nav { background: var(--page); } .tab-btn { font-family: var(--ff-label); font-weight: 600; font-size: 15px; padding: 12px 28px; border: 0; background: transparent; color: var(--muted); border-radius: calc(var(--radius) * .6); cursor: pointer; transition: all .18s; text-transform: var(--label-transform); letter-spacing: .02em; } .tab-btn[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); } .tab-panel { display: none; } .tab-panel[data-active] { display: block; animation: fade .35s ease; } @keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .feature { display: flex; gap: 16px; padding: 26px; background: var(--page); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .18s, border-color .18s, box-shadow .18s; } .section--soft .feature { background: var(--page); } .feature:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); box-shadow: var(--shadow-sm); } .feature__ico { width: 46px; height: 46px; flex: 0 0 auto; border-radius: calc(var(--radius)*.55); display: grid; place-items: center; background: color-mix(in oklab, var(--accent) 12%, var(--page)); color: var(--accent); } .feature__ico svg { width: 24px; height: 24px; } .feature h4 { font-size: 18px; margin-bottom: 6px; } .feature p { color: var(--muted); font-size: 15px; } .feature__n { font-family: var(--ff-label); font-size: 12px; color: var(--accent); font-weight: 700; } /* ---------- Includes (Co w cenie) ---------- */ .includes__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .inc { padding: 28px; border-radius: var(--radius); background: var(--page); border: 1px solid var(--line); transition: transform .18s, box-shadow .18s; } .inc:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); } .inc__ico { width: 44px; height: 44px; color: var(--accent); margin-bottom: 16px; } .inc__ico svg { width: 100%; height: 100%; } .inc h4 { font-size: 17px; margin-bottom: 7px; } .inc p { color: var(--muted); font-size: 14.5px; } /* ---------- Pricing ---------- */ .price__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: stretch; } .price-card { background: var(--ink); color: var(--on-dark); border-radius: var(--radius); padding: clamp(28px, 4vw, 44px); position: relative; overflow: hidden; } [data-dir="b"] .price-card { background: #221f18; } .price-card::after { content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background: radial-gradient(circle, color-mix(in oklab, var(--accent) 55%, transparent), transparent 70%); } .price-card .eyebrow { color: #fff; } .price-card .eyebrow::before { background: var(--accent); } .price__amount { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 6px; } .price__amount .val { font-family: var(--ff-head); font-weight: var(--head-weight); font-size: clamp(48px, 7vw, 78px); color: #fff; line-height: 1; } .price__amount .per { color: var(--on-dark-mute); font-size: 18px; } .price__sub { color: var(--on-dark-mute); font-size: 15px; } .calc { margin-top: 28px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: calc(var(--radius)*.7); padding: 20px; position: relative; z-index: 1; } .calc__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .calc label { font-size: 14px; color: var(--on-dark-mute); } .calc__stepper { display: flex; align-items: center; gap: 0; border: 1px solid rgba(255,255,255,.25); border-radius: calc(var(--radius)*.5); overflow: hidden; } .calc__stepper button { width: 40px; height: 40px; border: 0; background: rgba(255,255,255,.06); color: #fff; font-size: 20px; cursor: pointer; transition: background .15s; } .calc__stepper button:hover { background: var(--accent); } .calc__stepper input { width: 56px; height: 40px; border: 0; background: transparent; color: #fff; text-align: center; font-size: 18px; font-family: var(--ff-head); font-weight: 700; -moz-appearance: textfield; } .calc__stepper input::-webkit-outer-spin-button, .calc__stepper input::-webkit-inner-spin-button { -webkit-appearance: none; } .calc__out { margin-top: 18px; display: flex; align-items: baseline; justify-content: space-between; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); } .calc__out .lab { font-size: 14px; color: var(--on-dark-mute); } .calc__total { font-family: var(--ff-head); font-weight: var(--head-weight); font-size: 30px; color: #fff; } .calc__badge { display:inline-block; margin-top:10px; font-family: var(--ff-label); font-size: 12px; font-weight: 600; color: var(--accent); background: color-mix(in oklab, var(--accent) 18%, transparent); padding: 5px 12px; border-radius: 999px; letter-spacing: .03em; min-height: 0; } .price-aside { display: grid; gap: 18px; } .mini { background: var(--page); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; gap: 16px; align-items: flex-start; } .mini__ico { width: 44px; height: 44px; flex: 0 0 auto; border-radius: calc(var(--radius)*.55); background: color-mix(in oklab, var(--accent) 12%, var(--page)); color: var(--accent); display: grid; place-items: center; } .mini__ico svg { width: 23px; height: 23px; } .mini h4 { font-size: 16px; margin-bottom: 4px; } .mini p { color: var(--muted); font-size: 14.5px; } .price__cta { margin-top: 26px; } /* ---------- Terminarz ---------- */ .terminarz__grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 28px; align-items: start; } .term-list { display: flex; flex-direction: column; gap: 14px; } .term-row { display: flex; align-items: center; gap: 20px; width: 100%; padding: 18px 22px; background: var(--page); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; text-align: left; font-family: inherit; color: inherit; transition: transform .18s, border-color .18s, box-shadow .18s; } .term-row:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); box-shadow: var(--shadow-sm); } .term-row[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 35%, transparent); } .term-row.is-full { opacity: .58; cursor: not-allowed; } .term-row.is-full:hover { transform: none; box-shadow: none; border-color: var(--line); } .term-date { flex: 0 0 auto; width: 60px; text-align: center; padding-right: 20px; border-right: 1px solid var(--line); } .term-date .d { font-family: var(--ff-head); font-weight: var(--head-weight); font-size: 30px; line-height: 1; color: var(--text); } .term-date .m { font-family: var(--ff-label); font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin-top: 5px; } .term-main { flex: 1 1 auto; min-width: 0; } .term-main h4 { font-size: 16.5px; margin-bottom: 5px; } .term-main .meta { font-size: 13.5px; color: var(--muted); display: flex; gap: 16px; flex-wrap: wrap; } .term-main .meta span { display: inline-flex; align-items: center; gap: 6px; } .term-main .meta svg { width: 15px; height: 15px; opacity: .8; } .term-status { flex: 0 0 auto; font-family: var(--ff-label); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; white-space: nowrap; letter-spacing: .01em; } .st-open { color: #1f8a5b; background: color-mix(in oklab, #1f8a5b 14%, var(--page)); } .st-last { color: #b5791a; background: color-mix(in oklab, #f5b740 26%, var(--page)); } .st-full { color: var(--muted); background: var(--soft); } .term-go { flex: 0 0 auto; color: var(--accent); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line); transition: background .18s, color .18s, border-color .18s; } .term-row:hover .term-go { background: var(--accent); color: #fff; border-color: var(--accent); } .term-row.is-full .term-go { display: none; } .booking { position: sticky; top: 92px; background: var(--ink); color: var(--on-dark); border-radius: var(--radius); padding: 28px; overflow: hidden; } [data-dir="b"] .booking { background: #221f18; } .booking::after { content:""; position:absolute; right:-70px; top:-70px; width:200px; height:200px; border-radius:50%; background: radial-gradient(circle, color-mix(in oklab, var(--accent) 50%, transparent), transparent 70%); } .booking > * { position: relative; z-index: 1; } .booking .eyebrow { color: #fff; } .booking h3 { color: #fff; font-size: 21px; margin: 14px 0 0; } .booking__sel { margin: 18px 0 16px; padding: 18px; border-radius: calc(var(--radius)*.6); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); } .booking__sel .when { font-family: var(--ff-head); font-weight: var(--head-weight); font-size: 23px; color: #fff; line-height: 1.1; } .booking__sel .where { font-size: 13.5px; color: var(--on-dark-mute); margin-top: 6px; display: flex; align-items: center; gap: 7px; } .booking__price { display: flex; align-items: baseline; gap: 8px; } .booking__price .v { font-family: var(--ff-head); font-weight: var(--head-weight); font-size: 30px; color: #fff; } .booking__price .u { font-size: 14px; color: var(--on-dark-mute); } .pay-label { font-family: var(--ff-label); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-mute); margin-top: 22px; } .pay-methods { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; } .pay-chip { font-family: var(--ff-label); font-size: 12.5px; font-weight: 600; color: #fff; padding: 8px 12px; border: 1px solid rgba(255,255,255,.22); border-radius: calc(var(--radius)*.45); background: rgba(255,255,255,.05); display: inline-flex; align-items: center; gap: 8px; } .pay-chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .booking .btn { margin-top: 22px; width: 100%; justify-content: center; } .booking__note { font-size: 12.5px; color: var(--on-dark-mute); margin-top: 14px; display: flex; gap: 9px; align-items: flex-start; line-height: 1.45; } .booking__note svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; color: #1f8a5b; } @media (max-width: 900px) { .terminarz__grid { grid-template-columns: 1fr; } .booking { position: static; } } @media (max-width: 540px) { .term-row { flex-wrap: wrap; gap: 14px; padding: 16px; } .term-date { border-right: 0; border-bottom: 0; width: auto; padding-right: 0; display: flex; align-items: baseline; gap: 8px; } .term-date .m { margin-top: 0; } .term-status { order: 3; } } /* ---------- Szkolenia (katalog) ---------- */ .courses__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; } .course { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 30px; background: var(--page); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .18s, border-color .18s, box-shadow .18s; text-align: left; } .course:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); box-shadow: var(--shadow-sm); } .course__ico { width: 52px; height: 52px; border-radius: calc(var(--radius)*.55); display: grid; place-items: center; background: color-mix(in oklab, var(--accent) 12%, var(--page)); color: var(--accent); } .course__ico svg { width: 27px; height: 27px; } .course h4 { font-size: 19px; } .course p { color: var(--muted); font-size: 14.5px; flex: 1; } .course__link { font-family: var(--ff-label); font-weight: 600; font-size: 14px; color: var(--accent); display: inline-flex; align-items: center; gap: 7px; margin-top: auto; text-transform: var(--label-transform); letter-spacing: .02em; } .course__link svg { width: 16px; height: 16px; transition: transform .18s; } .course:hover .course__link svg { transform: translateX(3px); } .course--current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .course__badge { position: absolute; top: 18px; right: 18px; font-family: var(--ff-label); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 5px 11px; border-radius: 999px; } /* ---------- Dojazd / mapa ---------- */ .dojazd__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; } .dojazd__map { aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .dojazd__map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.2); } .dojazd__route { margin: 18px 0 0; background: var(--page); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; text-align: center; } .dojazd__route img { max-width: 290px; width: 100%; height: auto; display: block; margin: 0 auto; } .dojazd__route--main img { max-width: 360px; } .dojazd__route figcaption { color: var(--muted); font-size: 13.5px; margin-top: 12px; text-wrap: pretty; } .dojazd p { color: var(--muted); font-size: 17px; margin-top: 16px; } .dojazd__contact { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; } .dojazd__contact a, .dojazd__contact span.row { display: flex; align-items: center; gap: 13px; font-size: 17px; color: var(--text); font-weight: 500; } .dojazd__contact .ico { width: 42px; height: 42px; flex: 0 0 auto; border-radius: calc(var(--radius)*.55); background: color-mix(in oklab, var(--accent) 12%, var(--page)); color: var(--accent); display: grid; place-items: center; } .dojazd__contact .ico svg { width: 21px; height: 21px; } .dojazd__contact a:hover { color: var(--accent); } @media (max-width: 900px) { .dojazd__grid { grid-template-columns: 1fr; gap: 28px; } } /* ---------- Terminarz: filtr + miesiące ---------- */ .term-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .term-chip { font-family: var(--ff-label); font-size: 13px; font-weight: 600; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--page); color: var(--muted); cursor: pointer; transition: color .15s, background .15s, border-color .15s; text-transform: var(--label-transform); letter-spacing: .01em; } .term-chip:hover { color: var(--text); border-color: var(--muted); } .term-chip.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .term-monthbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 9px 12px; background: var(--soft); border: 1px solid var(--line); border-radius: calc(var(--radius) * .7); } .month-label { font-family: var(--ff-head); font-weight: var(--head-weight); font-size: 18px; letter-spacing: var(--head-tracking); } .month-nav { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--page); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s, border-color .15s; } .month-nav:hover:not(:disabled) { background: var(--accent); color: #fff; border-color: var(--accent); } .month-nav:disabled { opacity: .35; cursor: not-allowed; } .term-course-tag { display: inline-block; font-family: var(--ff-label); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; } .term-empty { padding: 44px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); } /* ---------- Testimonial ---------- */ .quote { max-width: 900px; margin: 0 auto; text-align: center; } .quote__mark { color: var(--accent); font-family: var(--ff-head); font-size: 80px; line-height: .6; height: 40px; } .quote blockquote { font-family: var(--ff-head); font-weight: var(--head-weight); font-size: clamp(24px, 3.2vw, 38px); line-height: 1.3; margin: 0 0 28px; letter-spacing: var(--head-tracking); } .quote__by { display: flex; align-items: center; justify-content: center; gap: 14px; } .quote__av { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; } .quote__av image-slot { width: 100%; height: 100%; display: block; } .quote__by .name { font-weight: 700; } .quote__by .role { color: var(--muted); font-size: 14px; } /* ---------- FAQ ---------- */ .faq__grid { max-width: 820px; margin: 0 auto; } .acc { border-bottom: 1px solid var(--line); } .acc__q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 24px 0; display: flex; align-items: center; gap: 20px; font-family: var(--ff-head); font-weight: var(--head-weight); font-size: clamp(17px,2vw,20px); color: var(--text); } .acc__q .ic { margin-left: auto; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; transition: .2s; position: relative; } .acc__q .ic::before, .acc__q .ic::after { content:""; position:absolute; background: var(--text); border-radius: 2px; } .acc__q .ic::before { width: 12px; height: 2px; } .acc__q .ic::after { width: 2px; height: 12px; transition: transform .2s; } .acc[open] .acc__q .ic { background: var(--accent); border-color: var(--accent); } .acc[open] .acc__q .ic::before, .acc[open] .acc__q .ic::after { background: #fff; } .acc[open] .acc__q .ic::after { transform: scaleY(0); } .acc__a { padding: 0 46px 26px 0; color: var(--muted); font-size: 16.5px; } .acc summary { list-style: none; } .acc summary::-webkit-details-marker { display: none; } /* ---------- Final CTA ---------- */ .final { position: relative; background: var(--hero-bg); color: var(--on-dark); overflow: hidden; text-align: center; } .final__media { position: absolute; inset: 0; } .final__media image-slot { width: 100%; height: 100%; display: block; } .final__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,12,.78), rgba(8,8,12,.88)); } .final__inner { position: relative; padding: clamp(80px,11vw,150px) 0; } .final h2 { font-size: clamp(36px, 6vw, 72px); color: #fff; } .final p { color: var(--on-dark-mute); font-size: 20px; margin: 20px auto 36px; max-width: 48ch; } /* ---------- Footer ---------- */ .foot { background: var(--ink); color: var(--on-dark-mute); padding: 64px 0 40px; } [data-dir="b"] .foot { background: #1a1812; } .foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1); } .foot .brand { color: #fff; margin-bottom: 16px; } .foot__col h5 { color: #fff; font-size: 14px; font-family: var(--ff-label); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 16px; } .foot__col a, .foot__col p { display: block; font-size: 15px; margin-bottom: 10px; transition: color .15s; } .foot__col a:hover { color: #fff; } .foot__partners { padding: 32px 0; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; gap: 32px; flex-wrap: wrap; } .foot__partners .lab { font-family: var(--ff-label); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-mute); } .foot__partners .logos { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .foot__partners img { height: 52px; width: auto; opacity: .8; transition: opacity .2s ease, transform .2s ease; } .foot__partners a:hover img { opacity: 1; transform: translateY(-2px); } .foot__partners .plogo--text { height: 30px; } .foot__bottom { padding-top: 28px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; } /* ---------- Image slot placeholder look ---------- */ image-slot { --slot-bg: repeating-linear-gradient(135deg, #1b1c22 0 14px, #202127 14px 28px); background: var(--slot-bg); border-radius: var(--radius); } /* ---------- Reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .nav__links, .nav__cta .btn { display: none; } .nav__burger { display: block; } .hero__grid, .why__grid, .price__grid { grid-template-columns: 1fr; gap: 32px; } .hero__card { display: none; } .stats__grid { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(odd) { border-left: 0; } .stat:nth-child(3), .stat:nth-child(4) { border-top: 1px solid rgba(255,255,255,.1); } .includes__grid { grid-template-columns: repeat(2, 1fr); } .feature-grid { grid-template-columns: 1fr; } } @media (max-width: 540px) { body { font-size: 16px; } .includes__grid { grid-template-columns: 1fr; } .stats__grid { grid-template-columns: 1fr; } .stat { border-left: 0 !important; border-top: 1px solid rgba(255,255,255,.1); } .stat:first-child { border-top: 0; } .tabs__nav { display: flex; width: 100%; } .tab-btn { flex: 1; padding: 12px 10px; } } /* ============================================================ PARTNERZY ============================================================ */ .part-hero { background: var(--hero-bg); color: var(--on-dark); padding: clamp(70px, 11vw, 130px) 0 clamp(50px, 7vw, 90px); } .part-hero .eyebrow { color: var(--accent); } .part-hero h1 { font-size: clamp(40px, 6vw, 76px); margin-top: 18px; } .part-hero p { color: var(--on-dark-mute); font-size: clamp(17px, 2vw, 21px); max-width: 60ch; margin-top: 20px; } .units { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .unit { display: flex; align-items: center; gap: 20px; padding: 24px 28px; background: var(--page); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .18s, border-color .18s, box-shadow .18s; } .unit:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); box-shadow: var(--shadow-sm); } .unit__logo { width: 64px; height: 64px; flex: 0 0 auto; display: grid; place-items: center; } .unit__logo img { max-width: 100%; max-height: 100%; filter: brightness(0); } .unit__name { display: block; font-family: var(--ff-head); font-weight: var(--head-weight); font-size: 20px; } .unit__desc { display: block; color: var(--muted); font-size: 14px; margin-top: 3px; } .partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; } .partner { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 132px; padding: 26px; background: var(--page); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .18s, border-color .18s, box-shadow .18s; } a.partner:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); box-shadow: var(--shadow-sm); } .partner__name { font-family: var(--ff-head); font-weight: var(--head-weight); font-size: 22px; letter-spacing: var(--head-tracking); } .partner__go { font-family: var(--ff-label); font-size: 13px; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 7px; opacity: 0; transform: translateX(-4px); transition: opacity .18s, transform .18s; } .partner__go svg { width: 15px; height: 15px; } a.partner:hover .partner__go { opacity: 1; transform: none; } .partner__go--static { color: var(--muted); opacity: .65; } .part-note { margin-top: 32px; color: var(--muted); font-size: 16px; } .part-note a { color: var(--accent); text-decoration: underline; } @media (max-width: 700px) { .units { grid-template-columns: 1fr; } } /* ============================================================ CHECKOUT / ZAMÓWIENIE ============================================================ */ .co-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 48px 24px 90px; } .co-head { margin-bottom: 36px; } .co-head h1 { font-size: clamp(30px, 4vw, 46px); } .co-head .crumbs { font-family: var(--ff-label); font-size: 13px; color: var(--muted); margin-bottom: 14px; display: flex; align-items: center; gap: 9px; } .co-head .crumbs a { color: var(--accent); } .co-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start; } .co-card { background: var(--page); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 3vw, 34px); margin-bottom: 22px; } .co-card > h2 { font-size: 21px; display: flex; align-items: center; gap: 12px; } .co-card > h2 .num { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--ff-label); font-size: 14px; font-weight: 700; display: grid; place-items: center; } .co-card > p.hint { color: var(--muted); font-size: 14.5px; margin: 6px 0 20px 42px; } .fld { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; } .fld label { font-size: 13.5px; font-weight: 600; color: var(--text); } .fld label .req { color: var(--accent); } .fld input[type="text"], .fld input[type="email"], .fld input[type="tel"], .fld input[type="password"], .fld select, .fld textarea { font-family: var(--ff-body); font-size: 15px; color: var(--text); padding: 13px 15px; border: 1.5px solid var(--line); border-radius: calc(var(--radius)*.55); background: var(--page); transition: border-color .15s, box-shadow .15s; width: 100%; } .fld select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2362646e' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } .fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent); } .fld input.err, .fld select.err { border-color: #d4202a; box-shadow: 0 0 0 3px color-mix(in oklab, #d4202a 16%, transparent); } .fld .msg { font-size: 12.5px; color: #d4202a; min-height: 0; display: none; } .fld.show-err .msg { display: block; } .fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .fld-row--3 { grid-template-columns: 1fr 1fr 1fr; } .chk { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; cursor: pointer; } .chk input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--accent); cursor: pointer; } .chk span { font-size: 14.5px; color: var(--text); line-height: 1.5; } .chk span .req { color: var(--accent); } .chk span a { color: var(--accent); text-decoration: underline; } .co-sub { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 18px; } .co-collapse { display: none; } .co-collapse.open { display: block; } .co-summary { position: sticky; top: 92px; background: var(--ink); color: var(--on-dark); border-radius: var(--radius); padding: 28px; overflow: hidden; } [data-dir="b"] .co-summary { background: #221f18; } .co-summary::after { content:""; position:absolute; right:-70px; top:-70px; width:200px; height:200px; border-radius:50%; background: radial-gradient(circle, color-mix(in oklab, var(--accent) 45%, transparent), transparent 70%); } .co-summary > * { position: relative; z-index: 1; } .co-summary h2 { color: #fff; font-size: 20px; margin-bottom: 18px; } .co-prod { display: flex; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.14); } .co-prod__ico { width: 46px; height: 46px; flex: 0 0 auto; border-radius: calc(var(--radius)*.5); background: color-mix(in oklab, var(--accent) 22%, transparent); color: var(--accent); display: grid; place-items: center; } .co-prod__ico svg { width: 24px; height: 24px; } .co-prod h3 { color: #fff; font-size: 15.5px; line-height: 1.3; } .co-prod .term { font-size: 13px; color: var(--on-dark-mute); margin-top: 4px; } .co-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 14.5px; color: var(--on-dark-mute); padding: 9px 0; } .co-line b { color: #fff; font-weight: 600; } .co-line.discount b { color: #4ad295; } .co-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); } .co-total .lab { font-size: 14px; color: var(--on-dark-mute); } .co-total .val { font-family: var(--ff-head); font-weight: var(--head-weight); font-size: 30px; color: #fff; } .co-total .val small { font-size: 14px; font-weight: 500; color: var(--on-dark-mute); } .pay-block { margin-top: 22px; } .pay-opt { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1.5px solid rgba(255,255,255,.18); border-radius: calc(var(--radius)*.5); cursor: pointer; margin-top: 9px; transition: border-color .15s, background .15s; } .pay-opt:hover { border-color: rgba(255,255,255,.4); } .pay-opt input { accent-color: var(--accent); width: 18px; height: 18px; } .pay-opt .ptext { color: #fff; font-size: 14.5px; font-weight: 500; flex: 1; } .pay-opt .pdot { width: 9px; height: 9px; border-radius: 50%; } .pay-opt.sel { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); } .co-summary .btn { width: 100%; justify-content: center; margin-top: 20px; } .co-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--on-dark-mute); } .co-secure svg { width: 15px; height: 15px; } .co-err-top { display: none; background: color-mix(in oklab, #d4202a 14%, var(--page)); border: 1px solid #d4202a; color: #a01820; border-radius: calc(var(--radius)*.5); padding: 13px 16px; font-size: 14px; margin-bottom: 20px; } .co-err-top.show { display: block; } .co-confirm { display: none; position: fixed; inset: 0; z-index: 100; background: var(--hero-bg); color: var(--on-dark); place-items: center; text-align: center; padding: 30px; } .co-confirm.show { display: grid; } .co-confirm__box { max-width: 520px; } .co-confirm .spin { width: 56px; height: 56px; margin: 0 auto 26px; border-radius: 50%; border: 4px solid rgba(255,255,255,.2); border-top-color: var(--accent); animation: cospin 1s linear infinite; } @keyframes cospin { to { transform: rotate(360deg); } } .co-confirm h2 { color: #fff; font-size: clamp(24px,4vw,34px); } .co-confirm p { color: var(--on-dark-mute); font-size: 16px; margin: 16px auto 0; max-width: 42ch; } .co-confirm .p24 { margin-top: 26px; font-family: var(--ff-label); font-weight: 700; color: #fff; letter-spacing: .02em; } .co-confirm .devnote { margin-top: 28px; font-size: 12.5px; color: var(--on-dark-mute); border-top: 1px solid rgba(255,255,255,.14); padding-top: 18px; } @media (max-width: 900px) { .co-grid { grid-template-columns: 1fr; } .co-summary { position: static; order: -1; } } @media (max-width: 540px) { .fld-row, .fld-row--3 { grid-template-columns: 1fr; } } /* mobile menu sheet */ .msheet { position: fixed; inset: 0; z-index: 60; background: var(--page); transform: translateX(100%); transition: transform .3s ease; display: flex; flex-direction: column; padding: 24px; } .msheet.open { transform: none; } .msheet__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; } .msheet__close { background: none; border: 0; cursor: pointer; font-size: 30px; line-height: 1; color: var(--text); } .msheet a { font-family: var(--ff-head); font-weight: var(--head-weight); font-size: 26px; padding: 16px 0; border-bottom: 1px solid var(--line); } .msheet .btn { margin-top: 24px; justify-content: center; }