/* ============================================================================ ZZ DESIGN SYSTEM — Zuch Załoga · landingi v2 ============================================================================ Jeden globalny arkusz dla wszystkich landingów. Wgrywasz w nagłówku motywu: Architektura: - Wszystko zamknięte w `.zz-page` (nie wyciekają style do motywu) - Modyfikator landingu na wrapperze:
- Komponenty w BEM: .zz-block, .zz-block__element, .zz-block--modifier - Tokeny w CSS variables — łatwe nadpisanie per landing - Mobile-first, a11y, prefers-reduced-motion, focus-visible Spis treści: 1. Reset & podstawa 2. Tokeny (CSS variables) 3. Typografia 4. Layout (container, section) 5. Komponenty: 5.1 Button 5.10 Two-col 5.2 Card 5.11 Path (czarter upsell) 5.3 Kicker 5.12 Pull-quote 5.4 Divider 5.13 Embed wrapper (shortcode) 5.5 Eyebrow 5.14 WhatsApp 5.6 Lists 5.15 FAQ 5.7 Hero 5.16 Booking 5.8 Sub-nav 5.17 Floating CTA 5.9 Proof bar 6. Responsive 7. Accessibility & motion 8. Print ============================================================================ */ /* ─── 1. RESET & PODSTAWA ─────────────────────────────────────────────────── */ /* Stylowanie na żeby objęło też header/footer/floating (poza .zz-page). */ body, body *, body *::before, body *::after { box-sizing: border-box; } body { color: var(--zz-text); line-height: 1.65; font-size: 17px; font-family: var(--zz-font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, video, svg { max-width: 100%; height: auto; display: block; } a { color: var(--zz-link); transition: color .15s ease; text-decoration: none; } a:hover { color: var(--zz-link-hover); } button { font: inherit; cursor: pointer; } /* ─── 2. TOKENY ──────────────────────────────────────────────────────────── Definiowane na :root żeby były dostępne w header/footer/floating CTA. Nadpisanie per-landing: .zz-page--zegrze { --zz-accent: ...; } ────────────────────────────────────────────────────────────────────────── */ :root { /* Kolory marki */ --zz-navy: #0a2540; --zz-navy-deep: #06182b; --zz-navy-soft: #1f4a72; --zz-teal: #2c6c8e; --zz-accent: #f5b301; /* żółty Zuch Załogi */ --zz-accent-2: #ffc20a; /* hover */ --zz-green: #25D366; /* WhatsApp */ --zz-green-dark: #1ebe5a; --zz-red: #d64545; --zz-ok: #2a9d63; /* Neutralne */ --zz-text: #0e2233; --zz-text-soft: #324356; --zz-muted: #5b6b7c; --zz-line: #e3e8ef; --zz-sand: #f6f1e7; --zz-white: #ffffff; --zz-light: #d8e2ee; /* Linki */ --zz-link: var(--zz-navy); --zz-link-hover: var(--zz-accent); /* Typografia */ --zz-font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, system-ui, sans-serif; --zz-font-serif: Georgia, "Times New Roman", serif; /* Skala typograficzna (clamp = płynne między mobile/desktop) */ --zz-fs-xs: .78rem; --zz-fs-sm: .92rem; --zz-fs-base: 1rem; --zz-fs-lg: 1.05rem; --zz-fs-xl: 1.2rem; --zz-fs-2xl: clamp(1.4rem, 2vw, 1.7rem); --zz-fs-3xl: clamp(1.6rem, 3vw, 2.2rem); --zz-fs-4xl: clamp(1.9rem, 3.5vw, 2.6rem); --zz-fs-hero: clamp(2.1rem, 4.5vw, 3.4rem); /* Odstępy (skala 4-bazowa) */ --zz-sp-1: 4px; --zz-sp-2: 8px; --zz-sp-3: 12px; --zz-sp-4: 16px; --zz-sp-5: 20px; --zz-sp-6: 24px; --zz-sp-8: 32px; --zz-sp-10: 40px; --zz-sp-12: 48px; --zz-sp-16: 64px; --zz-sp-20: 80px; --zz-sp-24: 96px; /* Promienie */ --zz-radius-sm: 6px; --zz-radius: 10px; --zz-radius-lg: 14px; --zz-radius-xl: 18px; --zz-radius-full: 99px; /* Cienie */ --zz-shadow-sm: 0 2px 8px rgba(10,37,64,.06); --zz-shadow: 0 8px 24px rgba(10,37,64,.10); --zz-shadow-lg: 0 20px 50px rgba(10,37,64,.18); --zz-shadow-cta: 0 8px 24px rgba(245,179,1,.4); /* Przejścia */ --zz-trans-fast: .15s ease; --zz-trans-normal: .25s ease; --zz-trans-slow: .4s ease; /* Container */ --zz-container-w: 1140px; --zz-container-x: 20px; } /* ─── 3. TYPOGRAFIA ────────────────────────────────────────────────────── */ .zz-page h1, .zz-page h2, .zz-page h3, .zz-page h4 { font-family: var(--zz-font-serif); color: var(--zz-navy); line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; } .zz-page h1 { font-size: var(--zz-fs-hero); letter-spacing: -.02em; } .zz-page h2 { font-size: var(--zz-fs-4xl); } .zz-page h3 { font-size: var(--zz-fs-2xl); } .zz-page h4 { font-size: var(--zz-fs-xl); } .zz-page p { margin: 0 0 1em; } .zz-page strong { font-weight: 700; color: inherit; } .zz-page em { font-style: normal; color: var(--zz-accent); } /* w hero akcent */ /* ─── 4. LAYOUT ────────────────────────────────────────────────────────── */ .zz-container { max-width: var(--zz-container-w); margin: 0 auto; padding: 0 var(--zz-container-x); } .zz-container--narrow { max-width: 820px; } .zz-section { padding: var(--zz-sp-20) 0; } .zz-section--tight { padding: var(--zz-sp-12) 0; } .zz-section--dark { background: var(--zz-navy); color: var(--zz-light); } .zz-section--ink { background: var(--zz-navy); color: #fff; } .zz-section--ink h1, .zz-section--ink h2, .zz-section--ink h3 { color: #fff; } .zz-section--dark h1, .zz-section--dark h2, .zz-section--dark h3 { color: var(--zz-white); } .zz-section--sand { background: var(--zz-sand); } /* Utilites */ .zz-center { text-align: center; } .zz-stars { color: var(--zz-accent); letter-spacing: 2px; } /* ─── 5.1 BUTTON ──────────────────────────────────────────────────────── */ .zz-btn { display: inline-flex; align-items: center; gap: var(--zz-sp-2); background: var(--zz-accent); color: var(--zz-navy-deep) !important; text-decoration: none !important; padding: var(--zz-sp-4) var(--zz-sp-8); border-radius: var(--zz-radius-sm); font-weight: 800; font-size: var(--zz-fs-lg); letter-spacing: .02em; box-shadow: var(--zz-shadow-cta); transition: transform var(--zz-trans-fast), box-shadow var(--zz-trans-fast), background var(--zz-trans-fast); border: 0; min-height: 44px; /* touch target */ } .zz-btn:hover { transform: translateY(-2px); background: var(--zz-accent-2); box-shadow: 0 12px 30px rgba(245,179,1,.5); color: var(--zz-navy-deep) !important; } .zz-btn:focus-visible { outline: 3px solid var(--zz-navy); outline-offset: 2px; } .zz-btn--lg { padding: var(--zz-sp-5) var(--zz-sp-10); font-size: var(--zz-fs-xl); } .zz-btn--ghost { background: transparent; color: var(--zz-white) !important; border: 1.5px solid var(--zz-white); box-shadow: none; } .zz-btn--ghost:hover { background: var(--zz-white); color: var(--zz-navy-deep) !important; } .zz-btn--whatsapp { background: var(--zz-green); box-shadow: 0 8px 24px rgba(37,211,102,.4); } .zz-btn--whatsapp:hover { background: var(--zz-green-dark); } .zz-btn-row { display: flex; flex-wrap: wrap; gap: var(--zz-sp-3); align-items: center; } /* ─── 5.2 CARD ────────────────────────────────────────────────────────── */ .zz-card { background: var(--zz-white); color: var(--zz-text); border-radius: var(--zz-radius-xl); padding: var(--zz-sp-8); box-shadow: var(--zz-shadow-lg); border-top: 6px solid var(--zz-accent); } .zz-card__badge { display: inline-block; background: var(--zz-navy); color: var(--zz-accent); font-size: var(--zz-fs-xs); letter-spacing: .2em; text-transform: uppercase; padding: var(--zz-sp-1) var(--zz-sp-3); border-radius: var(--zz-radius-sm); margin-bottom: var(--zz-sp-4); font-weight: 700; } .zz-card__title { font-size: 1.6rem; margin-bottom: var(--zz-sp-1); } .zz-card__sub { color: var(--zz-muted); font-size: var(--zz-fs-sm); margin-bottom: var(--zz-sp-5); } .zz-card__row { display: flex; justify-content: space-between; font-size: var(--zz-fs-sm); padding: var(--zz-sp-2) 0; border-bottom: 1px dashed var(--zz-line); } .zz-card__row:last-child { border-bottom: 0; } .zz-card__row > :first-child { color: var(--zz-muted); } .zz-card__row > :last-child { color: var(--zz-navy); font-weight: 600; } .zz-card__hero { background: linear-gradient(135deg, var(--zz-sand) 0%, var(--zz-white) 100%); border-radius: var(--zz-radius-lg); padding: var(--zz-sp-5); text-align: center; margin: var(--zz-sp-5) 0; } .zz-card__hero-num { font-family: var(--zz-font-serif); font-size: 3rem; color: var(--zz-navy); font-weight: 700; line-height: 1; } .zz-card__hero-label { color: var(--zz-muted); font-size: var(--zz-fs-sm); margin-top: var(--zz-sp-1); } /* ─── 5.3 KICKER (badge górny) ────────────────────────────────────────── */ .zz-kicker { display: inline-block; background: var(--zz-accent); color: var(--zz-navy-deep); font-weight: 700; padding: var(--zz-sp-2) var(--zz-sp-4); border-radius: var(--zz-radius-full); font-size: var(--zz-fs-xs); letter-spacing: .15em; text-transform: uppercase; margin-bottom: var(--zz-sp-6); } /* ─── 5.4 DIVIDER ─────────────────────────────────────────────────────── */ .zz-divider { width: 60px; height: 4px; background: var(--zz-accent); border-radius: 2px; margin: 0 auto var(--zz-sp-6); border: 0; } /* ─── 5.5 EYEBROW (mały label nad nagłówkiem) ─────────────────────────── */ .zz-eyebrow { text-transform: uppercase; letter-spacing: .15em; font-size: var(--zz-fs-xs); font-weight: 700; color: var(--zz-accent); margin-bottom: var(--zz-sp-3); } /* ─── 5.6 LISTY ──────────────────────────────────────────────────────── */ .zz-list-check { list-style: none; padding: 0; margin: var(--zz-sp-5) 0 0; } .zz-list-check__item { padding: var(--zz-sp-3) 0 var(--zz-sp-3) 36px; position: relative; color: var(--zz-text); font-size: var(--zz-fs-lg); } .zz-list-check__item::before { content: ""; position: absolute; left: 0; top: 14px; width: 24px; height: 24px; background: var(--zz-accent); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a2540' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: 14px 14px; background-position: center; background-repeat: no-repeat; } .zz-list-check--dark .zz-list-check__item { color: var(--zz-light); } .zz-list-check--dark .zz-list-check__item strong { color: var(--zz-white); } /* ─── 5.7 HERO ───────────────────────────────────────────────────────── */ /* H1 nad obrazem tła — wyższa specificity niż .zz-page h1 */ .zz-page .zz-hero__title, .zz-hero .zz-hero__title { color: var(--zz-white) !important; } .zz-hero__title em { color: var(--zz-accent); font-style: normal; } .zz-hero { color: var(--zz-white); padding: var(--zz-sp-24) 0 var(--zz-sp-20); background-color: var(--zz-navy-deep); background-image: linear-gradient(115deg, rgba(6,24,43,.94) 0%, rgba(6,24,43,.78) 55%, rgba(6,24,43,.55) 100%), var(--zz-hero-bg, none); background-size: cover; background-position: center; background-repeat: no-repeat; } .zz-hero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--zz-sp-16); align-items: center; } .zz-hero__title { color: var(--zz-white); margin-bottom: .35em; } .zz-hero__sub { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--zz-light); margin-bottom: var(--zz-sp-6); max-width: 580px; } .zz-hero__bullets { list-style: none; padding: 0; margin: 0 0 var(--zz-sp-8); } .zz-hero__bullets li { padding: var(--zz-sp-2) 0 var(--zz-sp-2) 36px; position: relative; color: #e3ebf5; font-size: var(--zz-fs-lg); } .zz-hero__bullets li::before { content: "✓"; position: absolute; left: 0; top: 8px; width: 26px; height: 26px; background: var(--zz-accent); color: var(--zz-navy-deep); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem; } /* ─── 5.8 SUB-NAV (menu sekcyjne pod hero) ────────────────────────────── */ .zz-sub-nav { background: var(--zz-navy-deep); border-top: 3px solid var(--zz-accent); border-bottom: 1px solid rgba(255,255,255,.06); } .zz-sub-nav__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--zz-sp-1) var(--zz-sp-3); padding: var(--zz-sp-3) 0; list-style: none; margin: 0; } .zz-sub-nav__list a { color: var(--zz-light) !important; text-decoration: none !important; padding: var(--zz-sp-3) var(--zz-sp-5); border-radius: var(--zz-radius-sm); font-size: var(--zz-fs-sm); font-weight: 600; letter-spacing: .04em; transition: background var(--zz-trans-fast), color var(--zz-trans-fast); white-space: nowrap; } .zz-sub-nav__list a:hover, .zz-sub-nav__list a[aria-current="page"] { background: rgba(245,179,1,.15); color: var(--zz-accent) !important; } .zz-sub-nav__list a.zz-sub-nav__cta { background: var(--zz-accent); color: var(--zz-navy-deep) !important; font-weight: 800; margin-left: var(--zz-sp-2); } .zz-sub-nav__list a.zz-sub-nav__cta:hover { background: var(--zz-accent-2); color: var(--zz-navy-deep) !important; } /* Offset dla anchor scroll — sticky main menu motywu */ .zz-anchor { scroll-margin-top: 100px; } /* ─── 5.9 PROOF BAR (pasek dowodów społecznych) ───────────────────────── */ .zz-proofbar { background: var(--zz-navy); padding: var(--zz-sp-5) 0; color: var(--zz-light); font-size: var(--zz-fs-sm); } .zz-proofbar__list { display: flex; flex-wrap: wrap; gap: var(--zz-sp-5) var(--zz-sp-10); justify-content: center; align-items: center; text-align: center; list-style: none; padding: 0; } .zz-proofbar strong { color: var(--zz-white); } /* ─── 5.10 TWO-COLUMN ────────────────────────────────────────────────── */ .zz-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: var(--zz-sp-12); align-items: center; } /* ─── BENEFITS (siatka kafelków z ikoną) ──────────────────────────────── */ .zz-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--zz-sp-6); margin-top: var(--zz-sp-10); } .zz-benefit { background: var(--zz-white); border: 1px solid var(--zz-line); border-radius: var(--zz-radius-lg); padding: var(--zz-sp-6) var(--zz-sp-5); transition: transform var(--zz-trans-normal), box-shadow var(--zz-trans-normal); } .zz-benefit:hover { transform: translateY(-3px); box-shadow: var(--zz-shadow); } .zz-benefit__icon { width: 48px; height: 48px; border-radius: var(--zz-radius-lg); background: var(--zz-navy); color: var(--zz-accent); display: flex; align-items: center; justify-content: center; margin-bottom: var(--zz-sp-3); font-size: 1.4rem; font-weight: 700; } .zz-benefit__title { font-size: 1.1rem; margin-bottom: var(--zz-sp-2); } .zz-benefit p { color: var(--zz-muted); margin: 0; font-size: var(--zz-fs-base); } /* ─── STEPS (kroki "jak to działa") ───────────────────────────────────── */ .zz-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--zz-sp-6); margin-top: var(--zz-sp-10); } .zz-step { text-align: center; padding: var(--zz-sp-6) var(--zz-sp-5); background: var(--zz-white); border-radius: var(--zz-radius-lg); box-shadow: var(--zz-shadow-sm); } .zz-step__num { width: 46px; height: 46px; background: var(--zz-accent); color: var(--zz-navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--zz-font-serif); font-size: 1.4rem; font-weight: 700; margin: 0 auto var(--zz-sp-4); } .zz-step__title { font-size: 1.1rem; margin-bottom: var(--zz-sp-1); } .zz-step p { color: var(--zz-muted); margin: 0; font-size: var(--zz-fs-base); } /* ─── 5.11 PATH (ścieżka do czarteru) ─────────────────────────────────── */ .zz-path { background-color: var(--zz-navy); color: var(--zz-white); background-image: linear-gradient(180deg, rgba(10,37,64,.94), rgba(10,37,64,.94)), var(--zz-path-bg, none); background-size: cover; background-position: center; } .zz-path__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--zz-sp-12); align-items: center; margin-top: var(--zz-sp-8); } .zz-path__lead { color: var(--zz-light); font-size: var(--zz-fs-lg); margin-bottom: var(--zz-sp-6); max-width: 600px; } .zz-path__list { list-style: none; padding: 0; margin: 0; counter-reset: zzpath; } .zz-path__list li { padding: var(--zz-sp-3) 0 var(--zz-sp-3) 42px; position: relative; color: #e3ebf5; font-size: var(--zz-fs-lg); line-height: 1.55; border-bottom: 1px dashed rgba(255,255,255,.12); } .zz-path__list li:last-child { border-bottom: 0; } .zz-path__list li::before { content: counter(zzpath); counter-increment: zzpath; position: absolute; left: 0; top: 12px; width: 30px; height: 30px; background: var(--zz-accent); color: var(--zz-navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--zz-font-serif); font-size: .95rem; } .zz-path__card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--zz-radius-xl); padding: var(--zz-sp-8); text-align: center; } .zz-path__card-eyebrow { color: var(--zz-accent); text-transform: uppercase; letter-spacing: .2em; font-size: var(--zz-fs-xs); font-weight: 700; margin-bottom: var(--zz-sp-3); } .zz-path__flow { display: flex; align-items: center; justify-content: center; gap: var(--zz-sp-2); margin-bottom: var(--zz-sp-6); font-size: var(--zz-fs-sm); color: var(--zz-light); flex-wrap: wrap; } .zz-path__flow-step { padding: var(--zz-sp-2) var(--zz-sp-3); background: rgba(255,255,255,.08); border-radius: var(--zz-radius-full); white-space: nowrap; } .zz-path__flow-step--now { background: var(--zz-accent); color: var(--zz-navy); font-weight: 700; } .zz-path__flow-arrow { color: var(--zz-accent); font-weight: 700; } /* ─── 5.12 PULL-QUOTE ─────────────────────────────────────────────────── */ .zz-quote { background: var(--zz-navy); color: var(--zz-white); border-radius: var(--zz-radius-lg); padding: var(--zz-sp-12) var(--zz-sp-10); position: relative; text-align: center; max-width: 800px; margin: var(--zz-sp-12) auto 0; } .zz-quote::before { content: """; position: absolute; top: -10px; left: 26px; font-family: var(--zz-font-serif); font-size: 7rem; color: var(--zz-accent); line-height: 1; } .zz-quote__text { font-family: var(--zz-font-serif); font-size: clamp(1.2rem, 2.2vw, 1.5rem); color: var(--zz-white); font-style: italic; margin: 0 0 var(--zz-sp-3); line-height: 1.4; } .zz-quote__cite { color: var(--zz-accent); font-size: var(--zz-fs-sm); letter-spacing: .1em; text-transform: uppercase; } /* ─── 5.13 EMBED WRAPPER (galeria, opinie, Amelia) ────────────────────── */ .zz-embed { background: var(--zz-white); border-radius: var(--zz-radius-lg); padding: var(--zz-sp-6); box-shadow: var(--zz-shadow-sm); margin-top: var(--zz-sp-8); } .zz-embed__placeholder { border: 2px dashed var(--zz-line); border-radius: var(--zz-radius-lg); padding: var(--zz-sp-10) var(--zz-sp-5); text-align: center; color: var(--zz-muted); background: #fafbfc; } .zz-embed__placeholder strong { display: block; color: var(--zz-navy); font-size: var(--zz-fs-lg); margin-bottom: var(--zz-sp-1); } /* ─── 5.14 WHATSAPP COMMUNITY ─────────────────────────────────────────── */ .zz-wa { background: linear-gradient(135deg, #075E54 0%, #128C7E 50%, #25D366 100%); color: var(--zz-white); padding: var(--zz-sp-16) var(--zz-sp-10); border-radius: var(--zz-radius-xl); margin-top: var(--zz-sp-8); text-align: center; position: relative; overflow: hidden; } .zz-wa::before { content: "💬"; position: absolute; top: var(--zz-sp-5); right: var(--zz-sp-8); font-size: 6rem; opacity: .15; } .zz-wa__title { color: var(--zz-white); font-size: var(--zz-fs-3xl); margin-bottom: var(--zz-sp-3); } .zz-wa p { max-width: 620px; margin: 0 auto var(--zz-sp-6); color: #d4f1de; font-size: var(--zz-fs-lg); } /* ─── 5.15 FAQ (native details/summary) ───────────────────────────────── */ .zz-faq { max-width: 820px; margin: var(--zz-sp-8) auto 0; } .zz-faq__item { background: var(--zz-white); border: 1px solid var(--zz-line); border-radius: var(--zz-radius); padding: var(--zz-sp-5) var(--zz-sp-6); margin-bottom: var(--zz-sp-3); } .zz-faq__item[open] { box-shadow: var(--zz-shadow); } .zz-faq__q { cursor: pointer; font-weight: 700; color: var(--zz-navy); list-style: none; position: relative; padding-right: var(--zz-sp-8); font-size: var(--zz-fs-lg); } .zz-faq__q::-webkit-details-marker { display: none; } .zz-faq__q::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--zz-accent); font-size: 1.6rem; font-weight: 400; line-height: 1; } .zz-faq__item[open] .zz-faq__q::after { content: "−"; } .zz-faq__a p { margin: var(--zz-sp-3) 0 0; color: var(--zz-text); } /* ─── 5.16 BOOKING (Amelia) ───────────────────────────────────────────── */ .zz-booking { background-color: var(--zz-navy); color: var(--zz-white); text-align: center; background-image: linear-gradient(180deg, rgba(10,37,64,.92), rgba(10,37,64,.92)), var(--zz-booking-bg, none); background-size: cover; background-position: center; } .zz-booking__title { color: var(--zz-white); font-size: var(--zz-fs-4xl); } .zz-booking__lead { color: var(--zz-light); max-width: 680px; margin: 0 auto var(--zz-sp-8); font-size: var(--zz-fs-lg); } .zz-amelia { background: var(--zz-white); color: var(--zz-text); max-width: 980px; margin: 0 auto; border-radius: var(--zz-radius-xl); padding: var(--zz-sp-10); box-shadow: 0 30px 60px rgba(0,0,0,.35); text-align: left; } .zz-trust { margin-top: var(--zz-sp-6); display: flex; gap: var(--zz-sp-3); align-items: center; justify-content: center; flex-wrap: wrap; color: var(--zz-light); font-size: var(--zz-fs-sm); } .zz-trust__badge { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); padding: var(--zz-sp-2) var(--zz-sp-3); border-radius: var(--zz-radius-sm); color: var(--zz-white); font-weight: 600; font-size: var(--zz-fs-xs); } /* ─── 5.17 FLOATING CTA ──────────────────────────────────────────────── */ .zz-floating-cta { position: fixed; right: var(--zz-sp-6); bottom: var(--zz-sp-6); z-index: 9999; display: flex; align-items: center; gap: var(--zz-sp-3); background: var(--zz-white); padding: 10px 12px 10px 20px; border-radius: var(--zz-radius-full); box-shadow: 0 14px 40px rgba(10,37,64,.28), 0 4px 12px rgba(10,37,64,.16); border: 1px solid rgba(10,37,64,.08); opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity var(--zz-trans-normal), transform var(--zz-trans-normal); } .zz-floating-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .zz-floating-cta__info { display: flex; flex-direction: column; line-height: 1.15; text-align: right; } .zz-floating-cta__title { font-weight: 700; color: var(--zz-navy); font-size: var(--zz-fs-sm); } .zz-floating-cta__meta { color: var(--zz-muted); font-size: var(--zz-fs-xs); } .zz-floating-cta__btn { background: var(--zz-accent); color: var(--zz-navy-deep) !important; text-decoration: none !important; padding: 14px 22px; border-radius: var(--zz-radius-full); font-weight: 800; font-size: var(--zz-fs-base); box-shadow: 0 4px 14px rgba(245,179,1,.5); transition: background var(--zz-trans-fast), transform var(--zz-trans-fast); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-height: 44px; } .zz-floating-cta__btn:hover { background: var(--zz-accent-2); transform: translateY(-1px); color: var(--zz-navy-deep) !important; } /* ─── 6. RESPONSIVE ──────────────────────────────────────────────────── */ @media (max-width: 900px) { .zz-hero__grid { grid-template-columns: 1fr; gap: var(--zz-sp-10); } .zz-twocol { grid-template-columns: 1fr; gap: var(--zz-sp-8); } .zz-path__grid { grid-template-columns: 1fr; gap: var(--zz-sp-8); } } @media (max-width: 720px) { /* Sub-nav: poziomy scroll na mobile */ .zz-sub-nav__list { gap: var(--zz-sp-1); padding: var(--zz-sp-2) var(--zz-sp-1); overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; -webkit-overflow-scrolling: touch; } .zz-sub-nav__list a { padding: var(--zz-sp-2) var(--zz-sp-3); font-size: var(--zz-fs-xs); } /* Embedy (galeria, opinie, Amelia) — pełna szerokość ekranu */ .zz-embed, .zz-amelia { margin-left: calc(var(--zz-container-x) * -1); margin-right: calc(var(--zz-container-x) * -1); border-radius: 0; padding: var(--zz-sp-5) var(--zz-sp-3); box-shadow: var(--zz-shadow-sm); } .zz-embed__placeholder { padding: var(--zz-sp-10) var(--zz-sp-4); } } @media (max-width: 600px) { .zz-floating-cta { left: var(--zz-sp-3); right: var(--zz-sp-3); bottom: var(--zz-sp-3); padding: 10px 10px 10px 16px; justify-content: space-between; gap: var(--zz-sp-3); } .zz-floating-cta__info { flex: 1; min-width: 0; } .zz-floating-cta__title { font-size: var(--zz-fs-xs); } .zz-floating-cta__btn { padding: 12px 18px; font-size: var(--zz-fs-sm); } } /* ─── 7. ACCESSIBILITY & MOTION ──────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .zz-page *, .zz-page *::before, .zz-page *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .zz-btn:hover, .zz-benefit:hover, .zz-floating-cta__btn:hover { transform: none !important; } } .zz-page :focus-visible { outline: 3px solid var(--zz-accent); outline-offset: 2px; } .zz-skip { position: absolute; left: -9999px; background: var(--zz-navy); color: var(--zz-white); padding: var(--zz-sp-3) var(--zz-sp-5); z-index: 10000; border-radius: var(--zz-radius-sm); } .zz-skip:focus { left: var(--zz-sp-3); top: var(--zz-sp-3); } /* ============================================================================ 9. KOMPONENTY MOTYWU WP — header, footer, menu, font-family overrides ============================================================================ */ html, body, html *:not(h1):not(h2):not(h3):not(h4):not(.zz-site-header__title):not(.zz-site-footer__title):not(em):not([class*="am-icon"]):not([class^="am-i-"]):not(.el-icon):not([class^="el-icon"]):not([class*=" el-icon"]), .zz-menu, .zz-menu a, .zz-site-header, .zz-site-footer, .zz-floating-cta { font-family: var(--zz-font-sans) !important; } /* Serif zostawiamy explicit tam gdzie potrzeba */ h1, h2, h3, h4, .zz-site-header__title, .zz-site-footer__title { font-family: var(--zz-font-serif) !important; } .zz-site-header { background: var(--zz-white); border-bottom: 1px solid var(--zz-line); position: sticky; top: 0; z-index: 500; box-shadow: 0 2px 10px rgba(10,37,64,.04); } .zz-site-header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--zz-sp-6); padding: var(--zz-sp-3) 0; min-height: 70px; } .zz-site-header__brand .custom-logo, .zz-site-header__brand img { max-height: 70px; width: auto; } .zz-site-header__logo { display: inline-flex; align-items: center; text-decoration: none !important; } .zz-site-header__logo img { height: 48px; width: auto; display: block; } /* CTA cluster po prawej stronie headera: Panel Żeglarza + Zarezerwuj */ .zz-site-header__cta { display: flex; align-items: center; gap: var(--zz-sp-4); } .zz-site-header__panel { display: inline-flex; align-items: center; gap: var(--zz-sp-2); color: var(--zz-muted) !important; text-decoration: none !important; font-size: var(--zz-fs-sm); font-weight: 600; padding: var(--zz-sp-2) var(--zz-sp-3); border-radius: var(--zz-radius-sm); transition: color var(--zz-trans-fast), background var(--zz-trans-fast); white-space: nowrap; } .zz-site-header__panel:hover { color: var(--zz-navy) !important; background: var(--zz-sand); } .zz-site-header__panel svg { flex-shrink: 0; } /* Już od średniego ekranu chowamy tekst — zostaje sama ikona */ @media (max-width: 1199px) { .zz-site-header__panel span { display: none; } .zz-site-header__panel { padding: var(--zz-sp-2); width: 40px; height: 40px; justify-content: center; border: 1px solid var(--zz-line); } } .zz-site-header__title { font-family: var(--zz-font-serif) !important; font-size: 1.3rem; color: var(--zz-navy) !important; text-decoration: none !important; font-weight: 700; } .zz-site-header__title:hover { color: var(--zz-accent) !important; } .zz-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--zz-sp-2); justify-content: center; align-items: center; flex-wrap: wrap; } .zz-menu > li { position: relative; } .zz-menu a { color: var(--zz-text) !important; text-decoration: none !important; padding: var(--zz-sp-2) var(--zz-sp-3); border-radius: var(--zz-radius-sm); font-weight: 600; font-size: var(--zz-fs-sm); transition: background .15s, color .15s; display: inline-block; white-space: nowrap; } .zz-menu a:hover { background: var(--zz-sand); color: var(--zz-navy) !important; } .zz-menu .current-menu-item > a { background: var(--zz-sand); color: var(--zz-navy) !important; } .zz-menu .sub-menu { list-style: none; margin: 0; padding: var(--zz-sp-2); position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--zz-white); border-radius: var(--zz-radius); box-shadow: var(--zz-shadow); border: 1px solid var(--zz-line); display: none; } .zz-menu li:hover > .sub-menu, .zz-menu li:focus-within > .sub-menu { display: block; } .zz-menu .sub-menu a { padding: var(--zz-sp-3); display: block; border-radius: var(--zz-radius-sm); } .zz-site-footer { background: var(--zz-navy-deep); color: var(--zz-light); padding: var(--zz-sp-16) 0 var(--zz-sp-6); } .zz-site-footer a { color: var(--zz-light) !important; text-decoration: none !important; } .zz-site-footer a:hover { color: var(--zz-accent) !important; } .zz-site-footer__title { color: var(--zz-white); font-family: var(--zz-font-serif) !important; font-size: 1.1rem; margin-bottom: var(--zz-sp-4); font-weight: 700; } .zz-site-footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--zz-sp-10); padding-bottom: var(--zz-sp-10); border-bottom: 1px solid rgba(255,255,255,.1); } .zz-site-footer__list { list-style: none; padding: 0; margin: 0; } .zz-site-footer__list li { padding: var(--zz-sp-1) 0; font-size: var(--zz-fs-sm); } .zz-site-footer__social { font-size: var(--zz-fs-sm); margin-top: var(--zz-sp-4); } .zz-site-footer__bottom { padding-top: var(--zz-sp-5); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--zz-sp-3); color: var(--zz-muted); font-size: var(--zz-fs-xs); } .zz-site-footer__bottom a { color: var(--zz-muted) !important; } @media (max-width: 900px) { .zz-site-header__inner { grid-template-columns: auto auto; } /* .zz-site-header__nav { grid-column: 1 / -1; order: 3; } -- USUNIĘTE: nav jest teraz w overlay flex column */ .zz-site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--zz-sp-8); } } @media (max-width: 600px) { .zz-site-footer__grid { grid-template-columns: 1fr; } } /* ============================================================================ 10. STRONA GŁÓWNA — home-specific komponenty ============================================================================ */ .zz-page--home .zz-home-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--zz-sp-4); max-width: 900px; margin: 0 auto; } @media (max-width: 800px) { .zz-page--home .zz-home-paths { grid-template-columns: 1fr; } } .zz-page--home .zz-home-path { background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.18); border-radius: var(--zz-radius-lg); padding: var(--zz-sp-6) var(--zz-sp-5); color: var(--zz-white) !important; text-decoration: none !important; transition: background .2s, border-color .2s, transform .2s; display: block; text-align: center; } .zz-page--home .zz-home-path:hover { background: rgba(245,179,1,.18); border-color: var(--zz-accent); transform: translateY(-3px); } .zz-page--home .zz-home-path__icon { display: block; font-size: 2.4rem; margin-bottom: var(--zz-sp-3); } .zz-page--home .zz-home-path strong { display: block; color: var(--zz-white); font-family: var(--zz-font-serif); font-size: 1.25rem; margin-bottom: var(--zz-sp-2); } .zz-page--home .zz-home-path__desc { display: block; color: var(--zz-light); font-size: var(--zz-fs-sm); line-height: 1.4; } .zz-page--home .zz-home-akweny { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--zz-sp-6); } @media (max-width: 900px) { .zz-page--home .zz-home-akweny { grid-template-columns: 1fr; } } .zz-page--home .zz-home-akwen { background: var(--zz-white); border-radius: var(--zz-radius-lg); overflow: hidden; box-shadow: var(--zz-shadow); display: flex; flex-direction: column; transition: transform .25s ease; } .zz-page--home .zz-home-akwen:hover { transform: translateY(-4px); } .zz-page--home .zz-home-akwen__img { aspect-ratio: 4/3; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; } .zz-page--home .zz-home-akwen__tag { display: inline-block; background: var(--zz-accent); color: var(--zz-navy-deep); padding: var(--zz-sp-1) var(--zz-sp-3); border-radius: var(--zz-radius-sm); font-size: var(--zz-fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--zz-sp-3); } .zz-page--home .zz-home-akwen__body { padding: var(--zz-sp-6); display: flex; flex-direction: column; flex-grow: 1; } .zz-page--home .zz-home-akwen__body h3 { font-size: 1.35rem; margin-bottom: var(--zz-sp-2); } .zz-page--home .zz-home-akwen__body p { color: var(--zz-muted); margin-bottom: var(--zz-sp-5); flex-grow: 1; } .zz-page--home .zz-home-akwen__body .zz-btn { align-self: flex-start; } .zz-page--home .zz-home-trips { display: grid; gap: var(--zz-sp-3); } .zz-page--home .zz-home-trip { background: var(--zz-white); border: 1px solid var(--zz-line); border-left: 4px solid var(--zz-accent); border-radius: var(--zz-radius); padding: var(--zz-sp-4) var(--zz-sp-5); text-decoration: none !important; color: var(--zz-text) !important; transition: transform .15s, box-shadow .15s; display: block; } .zz-page--home .zz-home-trip:hover { transform: translateX(4px); box-shadow: var(--zz-shadow-sm); } .zz-page--home .zz-home-trip strong { display: block; color: var(--zz-navy); font-family: var(--zz-font-serif); font-size: 1.1rem; margin-bottom: var(--zz-sp-1); } .zz-page--home .zz-home-trip span { color: var(--zz-muted); font-size: var(--zz-fs-sm); } .zz-page--home .zz-home-community { display: grid; grid-template-columns: 1fr 1fr; gap: var(--zz-sp-6); margin-top: var(--zz-sp-10); } @media (max-width: 900px) { .zz-page--home .zz-home-community { grid-template-columns: 1fr; } } /* ════════════════════════════════════════════════════════════════════════ 12. PRODUKT · Żagle po pracy (.zz-page--wisla-produkt) ──────────────────────────────────────────────────────────────────────── */ .zz-page--wisla-produkt .zz-zpp-hero__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--zz-radius-lg); overflow: hidden; box-shadow: var(--zz-shadow-lg); } .zz-page--wisla-produkt .zz-zpp-hero__media-inner { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; } .zz-page--wisla-produkt .zz-zpp-hero__media-badge { position: absolute; left: var(--zz-sp-5); bottom: var(--zz-sp-5); background: var(--zz-accent); color: var(--zz-navy-deep); padding: var(--zz-sp-4) var(--zz-sp-5); border-radius: var(--zz-radius); box-shadow: var(--zz-shadow); max-width: 60%; } .zz-page--wisla-produkt .zz-zpp-hero__media-badge strong { display: block; font-family: var(--zz-font-serif); font-size: 1.65rem; line-height: 1; margin-bottom: var(--zz-sp-1); } .zz-page--wisla-produkt .zz-zpp-hero__media-badge span { display: block; font-size: var(--zz-fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; } .zz-page--wisla-produkt .zz-zpp-hero__trust { color: var(--zz-light); font-size: var(--zz-fs-sm); margin-top: var(--zz-sp-5); opacity: .9; } @media (max-width: 900px) { .zz-page--wisla-produkt .zz-zpp-hero__media { display: none; } } .zz-page--wisla-produkt .zz-zpp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--zz-sp-8); margin-top: var(--zz-sp-8); } @media (max-width: 900px) { .zz-page--wisla-produkt .zz-zpp-steps { grid-template-columns: 1fr; gap: var(--zz-sp-6); } } .zz-page--wisla-produkt .zz-zpp-step { background: var(--zz-white); border: 1px solid var(--zz-line); border-top: 4px solid var(--zz-accent); border-radius: var(--zz-radius-lg); padding: var(--zz-sp-8) var(--zz-sp-6) var(--zz-sp-6); box-shadow: var(--zz-shadow-sm); position: relative; } .zz-page--wisla-produkt .zz-zpp-step__num { position: absolute; top: -22px; left: var(--zz-sp-6); background: var(--zz-navy); color: var(--zz-accent); font-family: var(--zz-font-serif); font-weight: 700; font-size: 1.25rem; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--zz-shadow); } .zz-page--wisla-produkt .zz-zpp-step h3 { font-family: var(--zz-font-serif); font-size: 1.25rem; margin: var(--zz-sp-3) 0 var(--zz-sp-3); color: var(--zz-navy); } .zz-page--wisla-produkt .zz-zpp-step p { color: var(--zz-muted); margin: 0; } .zz-page--wisla-produkt .zz-zpp-rezerwacja__grid { display: grid; grid-template-columns: 360px 1fr; gap: var(--zz-sp-8); align-items: start; margin-top: var(--zz-sp-6); } @media (max-width: 1024px) { .zz-page--wisla-produkt .zz-zpp-rezerwacja__grid { grid-template-columns: 1fr; } } .zz-page--wisla-produkt .zz-zpp-rezerwacja__info-card { background: var(--zz-white); border: 1px solid var(--zz-line); border-radius: var(--zz-radius-lg); padding: var(--zz-sp-8) var(--zz-sp-6); box-shadow: var(--zz-shadow-sm); position: sticky; top: 120px; } @media (max-width: 1024px) { .zz-page--wisla-produkt .zz-zpp-rezerwacja__info-card { position: static; } } .zz-page--wisla-produkt .zz-zpp-rezerwacja__alt { margin-top: var(--zz-sp-6); padding-top: var(--zz-sp-5); border-top: 1px dashed var(--zz-line); } .zz-page--wisla-produkt .zz-zpp-rezerwacja__widget { background: var(--zz-white); border: 1px solid var(--zz-line); border-radius: var(--zz-radius-lg); box-shadow: var(--zz-shadow); overflow: hidden; min-height: 480px; } .zz-page--wisla-produkt .zz-zpp-rezerwacja__widget-inner { padding: var(--zz-sp-6); } .zz-page--wisla-produkt .zz-zpp-rezerwacja__fallback { padding: var(--zz-sp-10) var(--zz-sp-8); text-align: center; } .zz-page--wisla-produkt .amelia-app-booking-customer, .zz-page--wisla-produkt .amelia-app-booking-provider, .zz-page--wisla-produkt .amelia-app-booking { --primary-color: var(--zz-accent); /* font-family bez !important — żeby Amelia mogła nadpisać font dla ikon (amelia-icons) */ font-family: var(--zz-font-sans); } .zz-page--wisla-produkt .zz-zpp-policy { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--zz-sp-6); } @media (max-width: 720px) { .zz-page--wisla-produkt .zz-zpp-policy { grid-template-columns: 1fr; } } .zz-page--wisla-produkt .zz-zpp-policy__card { background: var(--zz-white); border-radius: var(--zz-radius-lg); padding: var(--zz-sp-6); box-shadow: var(--zz-shadow-sm); border-left: 4px solid var(--zz-accent); } .zz-page--wisla-produkt .zz-zpp-policy__icon { font-size: 2rem; line-height: 1; margin-bottom: var(--zz-sp-3); } .zz-page--wisla-produkt .zz-zpp-policy__card h3 { font-family: var(--zz-font-serif); font-size: 1.2rem; margin: 0 0 var(--zz-sp-2); color: var(--zz-navy); } .zz-page--wisla-produkt .zz-zpp-policy__card p { color: var(--zz-muted); margin: 0; } .zz-page--wisla-produkt .zz-zpp-opinie { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--zz-sp-6); margin-top: var(--zz-sp-8); } @media (max-width: 900px) { .zz-page--wisla-produkt .zz-zpp-opinie { grid-template-columns: 1fr; } } .zz-page--wisla-produkt .zz-zpp-opinie__card { background: var(--zz-sand); border-radius: var(--zz-radius-lg); padding: var(--zz-sp-6); margin: 0; position: relative; } .zz-page--wisla-produkt .zz-zpp-opinie__card::before { content: "\201C"; position: absolute; top: var(--zz-sp-2); left: var(--zz-sp-4); font-family: var(--zz-font-serif); font-size: 3rem; color: var(--zz-accent); line-height: 1; opacity: .5; } .zz-page--wisla-produkt .zz-zpp-opinie__card blockquote { margin: 0 0 var(--zz-sp-4); padding-left: var(--zz-sp-6); font-style: italic; color: var(--zz-text); line-height: 1.5; } .zz-page--wisla-produkt .zz-zpp-opinie__card figcaption { font-weight: 700; color: var(--zz-navy); padding-left: var(--zz-sp-6); font-size: var(--zz-fs-sm); } /* — Hero z osadzonym widgetem rezerwacji (prawa kolumna = biała karta) — */ .zz-page--wisla-produkt .zz-hero { padding: var(--zz-sp-20) 0 var(--zz-sp-16); } .zz-page--wisla-produkt .zz-zpp-hero__grid { grid-template-columns: 1fr 1.05fr; align-items: stretch; gap: var(--zz-sp-12); } @media (max-width: 1024px) { .zz-page--wisla-produkt .zz-zpp-hero__grid { grid-template-columns: 1fr; gap: var(--zz-sp-10); } } .zz-page--wisla-produkt .zz-zpp-hero__copy { align-self: center; } .zz-page--wisla-produkt .zz-zpp-hero__booking { background: var(--zz-white); color: var(--zz-text); border-radius: var(--zz-radius-lg); box-shadow: 0 24px 60px rgba(0,0,0,.35); overflow: hidden; display: flex; flex-direction: column; position: relative; } .zz-page--wisla-produkt .zz-zpp-hero__booking::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--zz-accent); } .zz-page--wisla-produkt .zz-zpp-hero__booking-head { padding: var(--zz-sp-6) var(--zz-sp-6) var(--zz-sp-4); border-bottom: 1px solid var(--zz-line); background: linear-gradient(180deg, rgba(245,179,1,.06), transparent); } .zz-page--wisla-produkt .zz-zpp-hero__booking-head .zz-kicker { color: var(--zz-navy); } .zz-page--wisla-produkt .zz-zpp-hero__booking-title { font-family: var(--zz-font-serif); font-size: 1.65rem; color: var(--zz-navy); margin: var(--zz-sp-2) 0 var(--zz-sp-1); line-height: 1.15; } .zz-page--wisla-produkt .zz-zpp-hero__booking-sub { color: var(--zz-muted); font-size: var(--zz-fs-sm); margin: 0; } .zz-page--wisla-produkt .zz-zpp-hero__booking-body { padding: var(--zz-sp-5) var(--zz-sp-6); flex-grow: 1; min-height: 360px; } .zz-page--wisla-produkt .zz-zpp-hero__booking-widget { /* Wrapper dla shortcodu Amelii — bez własnego paddingu, żeby widget się rozłożył */ width: 100%; } .zz-page--wisla-produkt .zz-zpp-hero__booking-fallback { padding: var(--zz-sp-3) 0; } .zz-page--wisla-produkt .zz-zpp-hero__booking-foot { padding: var(--zz-sp-4) var(--zz-sp-6); background: var(--zz-sand); color: var(--zz-muted); font-size: var(--zz-fs-xs); border-top: 1px solid var(--zz-line); text-align: center; } /* Amelia inside hero card — soft override */ .zz-page--wisla-produkt .zz-zpp-hero__booking .amelia-app-booking, .zz-page--wisla-produkt .zz-zpp-hero__booking .amelia-app-booking-customer { --primary-color: var(--zz-accent); /* font-family bez !important — żeby Amelia mogła nadpisać font dla ikon (amelia-icons) */ font-family: var(--zz-font-sans); } @media (max-width: 720px) { .zz-page--wisla-produkt .zz-zpp-hero__booking-head, .zz-page--wisla-produkt .zz-zpp-hero__booking-body { padding-left: var(--zz-sp-4); padding-right: var(--zz-sp-4); } .zz-page--wisla-produkt .zz-zpp-hero__booking-title { font-size: 1.4rem; } } /* — Galeria zdjęć (sekcja produktu Wisła) — */ .zz-page--wisla-produkt .zz-zpp-gallery { display: grid; gap: var(--zz-sp-4); margin-top: var(--zz-sp-6); } .zz-page--wisla-produkt .zz-zpp-gallery--cols-2 { grid-template-columns: repeat(2, 1fr); } .zz-page--wisla-produkt .zz-zpp-gallery--cols-3 { grid-template-columns: repeat(3, 1fr); } .zz-page--wisla-produkt .zz-zpp-gallery--cols-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .zz-page--wisla-produkt .zz-zpp-gallery--cols-3, .zz-page--wisla-produkt .zz-zpp-gallery--cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .zz-page--wisla-produkt .zz-zpp-gallery--cols-2, .zz-page--wisla-produkt .zz-zpp-gallery--cols-3, .zz-page--wisla-produkt .zz-zpp-gallery--cols-4 { grid-template-columns: 1fr; } } .zz-page--wisla-produkt .zz-zpp-gallery__item { display: block; border-radius: var(--zz-radius-lg); overflow: hidden; position: relative; aspect-ratio: 4 / 3; background: var(--zz-sand); box-shadow: var(--zz-shadow-sm); transition: transform var(--zz-trans-normal), box-shadow var(--zz-trans-normal); } .zz-page--wisla-produkt .zz-zpp-gallery__item:hover { transform: translateY(-2px); box-shadow: var(--zz-shadow); } .zz-page--wisla-produkt .zz-zpp-gallery__item::after { content: "🔍"; position: absolute; top: var(--zz-sp-3); right: var(--zz-sp-3); width: 32px; height: 32px; background: rgba(255,255,255,.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; opacity: 0; transform: translateY(-4px); transition: opacity var(--zz-trans-fast), transform var(--zz-trans-fast); } .zz-page--wisla-produkt .zz-zpp-gallery__item:hover::after { opacity: 1; transform: translateY(0); } .zz-page--wisla-produkt .zz-zpp-gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--zz-trans-slow); } .zz-page--wisla-produkt .zz-zpp-gallery__item:hover .zz-zpp-gallery__img { transform: scale(1.04); } /* ════════════════════════════════════════════════════════════════════════ 13. WISŁA HUB — siatka atrakcji „Wybierz co Ci pasuje” ──────────────────────────────────────────────────────────────────────── */ .zz-page--wisla .zz-wisla-produkty { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--zz-sp-6); margin-top: var(--zz-sp-8); } .zz-page--wisla .zz-wisla-produkt { grid-column: span 3; background: var(--zz-white); border-radius: var(--zz-radius-lg); overflow: hidden; box-shadow: var(--zz-shadow); display: flex; flex-direction: column; transition: transform var(--zz-trans-normal), box-shadow var(--zz-trans-normal); } .zz-page--wisla .zz-wisla-produkt:hover { transform: translateY(-4px); box-shadow: var(--zz-shadow-lg); } /* Featured — spans 6 cols i jest horyzontalny (img po lewej, body po prawej) */ .zz-page--wisla .zz-wisla-produkt--featured { grid-column: span 6; flex-direction: row; } .zz-page--wisla .zz-wisla-produkt--featured .zz-wisla-produkt__img { flex: 1 1 50%; min-height: 360px; aspect-ratio: auto; } .zz-page--wisla .zz-wisla-produkt--featured .zz-wisla-produkt__body { flex: 1 1 50%; padding: var(--zz-sp-10) var(--zz-sp-8); } .zz-page--wisla .zz-wisla-produkt--featured .zz-wisla-produkt__title { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: var(--zz-sp-3); } .zz-page--wisla .zz-wisla-produkt--featured .zz-wisla-produkt__desc { font-size: var(--zz-fs-lg); } /* Obrazek karty (tło + pigułka + numer) */ .zz-page--wisla .zz-wisla-produkt__img { position: relative; aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-repeat: no-repeat; } .zz-page--wisla .zz-wisla-produkt__tag { position: absolute; top: var(--zz-sp-3); left: var(--zz-sp-3); background: var(--zz-accent); color: var(--zz-navy-deep); padding: var(--zz-sp-1) var(--zz-sp-3); border-radius: var(--zz-radius-sm); font-size: var(--zz-fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 4px 12px rgba(245,179,1,.3); } .zz-page--wisla .zz-wisla-produkt__num { position: absolute; top: var(--zz-sp-3); right: var(--zz-sp-3); background: rgba(255,255,255,.92); color: var(--zz-navy-deep); font-family: var(--zz-font-serif); font-size: 1.1rem; font-weight: 700; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--zz-shadow-sm); } /* Body karty (tekst + CTA) */ .zz-page--wisla .zz-wisla-produkt__body { padding: var(--zz-sp-6); display: flex; flex-direction: column; flex-grow: 1; } .zz-page--wisla .zz-wisla-produkt__title { font-family: var(--zz-font-serif); font-size: 1.35rem; color: var(--zz-navy); margin: 0 0 var(--zz-sp-2); line-height: 1.25; } .zz-page--wisla .zz-wisla-produkt__desc { color: var(--zz-muted); margin: 0 0 var(--zz-sp-4); flex-grow: 1; line-height: 1.55; } .zz-page--wisla .zz-wisla-produkt__meta { color: var(--zz-text); font-size: var(--zz-fs-sm); margin: 0 0 var(--zz-sp-5); padding: var(--zz-sp-3) var(--zz-sp-4); background: var(--zz-sand); border-radius: var(--zz-radius-sm); border-left: 3px solid var(--zz-accent); } .zz-page--wisla .zz-wisla-produkt__body .zz-btn { align-self: flex-start; } /* Responsive */ @media (max-width: 1024px) { .zz-page--wisla .zz-wisla-produkty { grid-template-columns: repeat(2, 1fr); } .zz-page--wisla .zz-wisla-produkt { grid-column: span 1; } .zz-page--wisla .zz-wisla-produkt--featured { grid-column: 1 / -1; } } @media (max-width: 900px) { .zz-page--wisla .zz-wisla-produkt--featured { flex-direction: column; } .zz-page--wisla .zz-wisla-produkt--featured .zz-wisla-produkt__img { aspect-ratio: 16 / 9; min-height: auto; flex: 0 0 auto; } .zz-page--wisla .zz-wisla-produkt--featured .zz-wisla-produkt__body { padding: var(--zz-sp-6); } } @media (max-width: 600px) { .zz-page--wisla .zz-wisla-produkty { grid-template-columns: 1fr; gap: var(--zz-sp-5); } .zz-page--wisla .zz-wisla-produkt { grid-column: 1 / -1; } } /* ════════════════════════════════════════════════════════════════════════ 14. CZARTERY — strona /czartery/ z 3 jachtami ──────────────────────────────────────────────────────────────────────── */ .zz-page--czartery .zz-hero__title { color: var(--zz-white) !important; } /* — Sekcja 3 jachty — */ .zz-page--czartery .zz-czartery-jachty { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--zz-sp-6); margin-top: var(--zz-sp-8); } @media (max-width: 1024px) { .zz-page--czartery .zz-czartery-jachty { grid-template-columns: 1fr; } } .zz-page--czartery .zz-czartery-jacht { background: var(--zz-white); border-radius: var(--zz-radius-lg); overflow: hidden; box-shadow: var(--zz-shadow); display: flex; flex-direction: column; transition: transform var(--zz-trans-normal), box-shadow var(--zz-trans-normal); } .zz-page--czartery .zz-czartery-jacht:hover { transform: translateY(-4px); box-shadow: var(--zz-shadow-lg); } .zz-page--czartery .zz-czartery-jacht--featured { border-top: 4px solid var(--zz-accent); } .zz-page--czartery .zz-czartery-jacht__img { position: relative; aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-repeat: no-repeat; } .zz-page--czartery .zz-czartery-jacht__tag { position: absolute; top: var(--zz-sp-3); left: var(--zz-sp-3); background: var(--zz-accent); color: var(--zz-navy-deep); padding: var(--zz-sp-1) var(--zz-sp-3); border-radius: var(--zz-radius-sm); font-size: var(--zz-fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .zz-page--czartery .zz-czartery-jacht__body { padding: var(--zz-sp-6); display: flex; flex-direction: column; flex-grow: 1; } .zz-page--czartery .zz-czartery-jacht__title { font-family: var(--zz-font-serif); font-size: 1.6rem; color: var(--zz-navy); margin: 0; line-height: 1.1; } .zz-page--czartery .zz-czartery-jacht__subtitle { color: var(--zz-muted); font-size: var(--zz-fs-sm); margin: 4px 0 var(--zz-sp-4); font-weight: 600; } .zz-page--czartery .zz-czartery-jacht__spec { font-size: var(--zz-fs-sm); color: var(--zz-text); margin: 0 0 var(--zz-sp-3); } .zz-page--czartery .zz-czartery-jacht__character { color: var(--zz-muted); font-size: var(--zz-fs-base); margin: 0 0 var(--zz-sp-5); line-height: 1.55; flex-grow: 1; } .zz-page--czartery .zz-czartery-jacht__price { background: var(--zz-sand); padding: var(--zz-sp-4); border-radius: var(--zz-radius); margin: 0 0 var(--zz-sp-4); display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: var(--zz-fs-sm); } .zz-page--czartery .zz-czartery-jacht__price dt { color: var(--zz-muted); margin: 0; } .zz-page--czartery .zz-czartery-jacht__price dd { margin: 0; font-weight: 700; color: var(--zz-navy); text-align: right; } .zz-page--czartery .zz-czartery-jacht__req { font-size: var(--zz-fs-sm); color: var(--zz-text); background: rgba(245,179,1,.08); padding: var(--zz-sp-3) var(--zz-sp-4); border-radius: var(--zz-radius-sm); border-left: 3px solid var(--zz-accent); margin: 0 0 var(--zz-sp-5); } .zz-page--czartery .zz-czartery-jacht__body .zz-btn { align-self: flex-start; } /* — Sekcja Proces (5 kroków) — */ .zz-page--czartery .zz-czartery-process { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--zz-sp-5); margin-top: var(--zz-sp-8); } @media (max-width: 1024px) { .zz-page--czartery .zz-czartery-process { grid-template-columns: repeat(2, 1fr); gap: var(--zz-sp-6); } } @media (max-width: 600px) { .zz-page--czartery .zz-czartery-process { grid-template-columns: 1fr; } } .zz-page--czartery .zz-czartery-step { background: var(--zz-white); border: 1px solid var(--zz-line); border-top: 4px solid var(--zz-accent); border-radius: var(--zz-radius-lg); padding: var(--zz-sp-6) var(--zz-sp-5); box-shadow: var(--zz-shadow-sm); position: relative; } .zz-page--czartery .zz-czartery-step__num { position: absolute; top: -22px; left: var(--zz-sp-5); background: var(--zz-navy); color: var(--zz-accent); font-family: var(--zz-font-serif); font-weight: 700; font-size: 1.15rem; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--zz-shadow); } .zz-page--czartery .zz-czartery-step h3 { font-family: var(--zz-font-serif); font-size: 1.15rem; margin: var(--zz-sp-3) 0 var(--zz-sp-2); color: var(--zz-navy); } .zz-page--czartery .zz-czartery-step p { color: var(--zz-muted); font-size: var(--zz-fs-sm); margin: 0; line-height: 1.55; } /* — Tabela cenowa — */ .zz-page--czartery .zz-czartery-cennik { background: var(--zz-white); border-radius: var(--zz-radius-lg); overflow: hidden; box-shadow: var(--zz-shadow); margin-top: var(--zz-sp-6); } .zz-page--czartery .zz-czartery-table { width: 100%; border-collapse: collapse; } .zz-page--czartery .zz-czartery-table th, .zz-page--czartery .zz-czartery-table td { padding: var(--zz-sp-4) var(--zz-sp-5); text-align: center; border-bottom: 1px solid var(--zz-line); } .zz-page--czartery .zz-czartery-table thead th { background: var(--zz-navy); color: var(--zz-white); font-family: var(--zz-font-sans); font-weight: 700; font-size: var(--zz-fs-sm); letter-spacing: .04em; text-transform: uppercase; } .zz-page--czartery .zz-czartery-table tbody th { background: var(--zz-sand); text-align: left; font-family: var(--zz-font-serif); color: var(--zz-navy); } .zz-page--czartery .zz-czartery-table__sub { display: block; font-family: var(--zz-font-sans); font-weight: 400; font-size: var(--zz-fs-xs); color: var(--zz-muted); text-transform: none; letter-spacing: 0; margin-top: 2px; } .zz-page--czartery .zz-czartery-table tbody tr:hover { background: rgba(245,179,1,.04); } .zz-page--czartery .zz-czartery-table tbody td { font-weight: 700; color: var(--zz-text); } @media (max-width: 720px) { .zz-page--czartery .zz-czartery-table th, .zz-page--czartery .zz-czartery-table td { padding: var(--zz-sp-3) var(--zz-sp-2); font-size: var(--zz-fs-sm); } } /* — Czartery: sekcja rezerwacji (widget Amelia) — */ .zz-page--czartery .zz-czartery-rezerwacja__widget { background: var(--zz-white); border-radius: var(--zz-radius-lg); box-shadow: var(--zz-shadow); padding: var(--zz-sp-8); margin-top: var(--zz-sp-6); min-height: 480px; } .zz-page--czartery .zz-czartery-rezerwacja__inner { width: 100%; } .zz-page--czartery .zz-czartery-rezerwacja__fallback { text-align: center; padding: var(--zz-sp-8) var(--zz-sp-4); } .zz-page--czartery .zz-czartery-rezerwacja__foot { margin-top: var(--zz-sp-5); color: var(--zz-muted); font-size: var(--zz-fs-sm); text-align: center; } /* Amelia inside czartery — soft override */ .zz-page--czartery .amelia-app-booking, .zz-page--czartery .amelia-app-booking-customer, .zz-page--czartery .amelia-app-catalog { --primary-color: var(--zz-accent); /* font-family bez !important — żeby Amelia mogła nadpisać font dla ikon (amelia-icons) */ font-family: var(--zz-font-sans); } @media (max-width: 720px) { .zz-page--czartery .zz-czartery-rezerwacja__widget { padding: var(--zz-sp-4); } } /* ════════════════════════════════════════════════════════════════════════ 15. MOBILE MENU — hamburger + overlay ──────────────────────────────────────────────────────────────────────── */ /* Hamburger button — domyślnie schowany (desktop), widoczny ≤900px */ .zz-hamburger { display: none; background: transparent; border: 0; padding: 10px; cursor: pointer; position: relative; width: 44px; height: 44px; z-index: 110; align-items: center; justify-content: center; flex-direction: column; gap: 5px; -webkit-tap-highlight-color: transparent; } .zz-hamburger:focus-visible { outline: 2px solid var(--zz-accent); outline-offset: 2px; border-radius: 4px; } .zz-hamburger__line { display: block; width: 24px; height: 2.5px; background: var(--zz-navy); border-radius: 2px; transition: transform var(--zz-trans-normal), opacity var(--zz-trans-fast); transform-origin: center; } .zz-hamburger__sr { position: absolute; left: -9999px; } /* Hamburger → X gdy menu otwarte */ .zz-site-header--open .zz-hamburger__line:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .zz-site-header--open .zz-hamburger__line:nth-child(2) { opacity: 0; transform: scaleX(0); } .zz-site-header--open .zz-hamburger__line:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* Backdrop — domyślnie ukryty */ .zz-site-header__backdrop { display: none; position: fixed; inset: 0; background: rgba(6, 24, 43, .55); z-index: 99; opacity: 0; transition: opacity var(--zz-trans-normal); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .zz-site-header--open .zz-site-header__backdrop { opacity: 1; } /* Body lock — zatrzymanie scrolla gdy menu otwarte */ body.zz-no-scroll { overflow: hidden; touch-action: none; } /* — MOBILE: ≤900px — */ @media (max-width: 900px) { /* Pokaż hamburger */ .zz-hamburger { display: flex; } /* Nav + CTA → slide-in panel z prawej */ .zz-site-header__nav, .zz-site-header__cta { position: fixed; top: 0; right: 0; width: 88%; max-width: 380px; height: 100vh; height: 100dvh; background: var(--zz-white); box-shadow: -8px 0 30px rgba(0,0,0,.25); z-index: 100; transform: translateX(100%); transition: transform var(--zz-trans-slow); overflow-y: auto; padding: var(--zz-sp-16) var(--zz-sp-6) var(--zz-sp-6); display: flex; flex-direction: column; } .zz-site-header__cta { /* CTA siedzi pod nav-em w tym samym overlay-u */ position: static; width: auto; max-width: none; height: auto; background: transparent; box-shadow: none; transform: none; padding: 0; margin-top: auto; } /* Nav w overlay — rozsuń links pionowo, większa czcionka, szerokie touch targets */ .zz-site-header__nav .zz-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } .zz-site-header__nav .zz-menu li { border-bottom: 1px solid var(--zz-line); } .zz-site-header__nav .zz-menu a { display: block; padding: var(--zz-sp-4) var(--zz-sp-2); font-family: var(--zz-font-serif) !important; font-size: 1.25rem; color: var(--zz-navy) !important; text-decoration: none !important; font-weight: 700; } .zz-site-header__nav .zz-menu a:hover, .zz-site-header__nav .zz-menu a:focus { color: var(--zz-accent) !important; background: var(--zz-sand); } /* Sub-menu (poziom 2) */ .zz-site-header__nav .zz-menu .sub-menu { list-style: none; margin: 0; padding: 0 0 var(--zz-sp-3) var(--zz-sp-4); background: var(--zz-sand); } .zz-site-header__nav .zz-menu .sub-menu a { font-size: 1rem; padding: var(--zz-sp-2) var(--zz-sp-2); } /* CTA w overlay — Panel + Zarezerwuj — pełna szerokość */ .zz-site-header__cta { gap: var(--zz-sp-3); align-items: stretch; } .zz-site-header__cta .zz-site-header__panel { display: flex; align-items: center; gap: var(--zz-sp-2); padding: var(--zz-sp-3); border: 1px solid var(--zz-line); border-radius: var(--zz-radius-sm); color: var(--zz-navy) !important; text-decoration: none !important; font-weight: 600; } .zz-site-header__cta .zz-site-header__panel span { display: inline !important; /* nadpisz schowanie z desktopu */ } .zz-site-header__cta .zz-btn { width: 100%; justify-content: center; } /* Otwarte → przesunięcia */ .zz-site-header--open .zz-site-header__nav { transform: translateX(0); } .zz-site-header--open .zz-site-header__backdrop { display: block; } /* Hamburger zawsze ponad overlay */ .zz-hamburger { position: relative; z-index: 110; } } /* Reduced motion — wyłącz animacje */ @media (prefers-reduced-motion: reduce) { .zz-site-header__nav, .zz-site-header__backdrop, .zz-hamburger__line { transition: none !important; } } /* — Overlay wrapper dla mobile (nav + CTA w jednym) — */ /* Desktop: display: contents (struktura jak była, nav i cta to bezpośrednie children .zz-site-header__inner) */ .zz-site-header__overlay { display: contents; } /* Desktop: ukryj elementy widoczne tylko w mobile overlay */ .zz-site-header__overlay-head, .zz-site-header__overlay-foot { display: none; } @media (max-width: 900px) { /* Mobile: cały overlay jako FULL-SCREEN slide-in panel */ .zz-site-header__overlay { display: flex; flex-direction: column; position: fixed; inset: 0; /* full screen: top/right/bottom/left = 0 */ width: 100%; height: 100vh; height: 100dvh; background: var(--zz-white); z-index: 100; transform: translateX(100%); transition: transform .35s cubic-bezier(.4, 0, .2, 1); overflow-y: auto; padding: 0; -webkit-overflow-scrolling: touch; } .zz-site-header--open .zz-site-header__overlay { transform: translateX(0); } /* — HEAD: logo (close button usunięty — hamburger pełni rolę X) — */ .zz-site-header__overlay-head { display: flex !important; align-items: center; justify-content: flex-start; padding: var(--zz-sp-5) var(--zz-sp-6); border-bottom: 1px solid var(--zz-line); background: var(--zz-white); position: sticky; top: 0; z-index: 2; min-height: 80px; /* miejsce na hamburger w prawym górnym rogu */ } .zz-site-header__overlay-logo img, .zz-site-header__overlay-head .custom-logo { display: block; height: 42px; width: auto; margin-left: 23px; } /* Hamburger na mobile — fixed w prawym górnym rogu, NAD overlay (z-index > 100) */ .zz-hamburger { position: fixed !important; top: 22px; right: 30px; z-index: 200; /* wyższy niż overlay (100) — żeby był klikalny po otwarciu */ } /* Po otwarciu menu — hamburger ciemniejszy żeby kontrastował z białem overlay */ .zz-site-header--open .zz-hamburger { color: var(--zz-navy); } /* — Wewnątrz overlay: nav i cta są STATIC — */ .zz-site-header__nav, .zz-site-header__cta { position: static !important; width: auto !important; max-width: none !important; height: auto !important; background: transparent !important; box-shadow: none !important; transform: none !important; transition: none !important; overflow: visible !important; } /* NAV — duże items, dobre tap targets */ .zz-site-header__nav { padding: var(--zz-sp-5) var(--zz-sp-6) var(--zz-sp-4) !important; flex: 0 0 auto; } .zz-site-header__nav .zz-menu { flex-direction: column; gap: 0 !important; align-items: stretch; } .zz-site-header__nav .zz-menu li { border-bottom: 1px solid var(--zz-line); width: 100%; } .zz-site-header__nav .zz-menu li:last-child { border-bottom: 0; } .zz-site-header__nav .zz-menu a { display: block; padding: var(--zz-sp-4) 0; font-family: var(--zz-font-serif); font-size: 1.2rem; font-weight: 600; color: var(--zz-navy) !important; text-decoration: none !important; text-align: left; transition: color .15s ease; } .zz-site-header__nav .zz-menu a:hover, .zz-site-header__nav .zz-menu a:focus { color: var(--zz-accent) !important; } .zz-site-header__nav .zz-menu .sub-menu { margin-top: var(--zz-sp-2); padding-left: var(--zz-sp-4); border-left: 2px solid var(--zz-accent); } .zz-site-header__nav .zz-menu .sub-menu li { border-bottom: 0; } .zz-site-header__nav .zz-menu .sub-menu a { font-family: var(--zz-font-sans); font-size: 1rem; font-weight: 500; color: var(--zz-muted) !important; padding: var(--zz-sp-2) 0; } /* CTA — auto-spacer wypycha do dołu (między nav a footer) */ .zz-site-header__cta { margin-top: auto; padding: var(--zz-sp-4) var(--zz-sp-6) var(--zz-sp-5) !important; border-top: 1px solid var(--zz-line); display: flex !important; flex-direction: column !important; gap: var(--zz-sp-3) !important; align-items: stretch !important; background: var(--zz-sand); } .zz-site-header__cta .zz-btn { width: 100%; text-align: center; justify-content: center; padding: 14px 24px; font-size: 1.05rem; font-weight: 800; } .zz-site-header__cta .zz-site-header__panel { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; padding: 10px; color: var(--zz-navy) !important; font-weight: 600; text-decoration: none !important; border: 1px solid var(--zz-line); border-radius: var(--zz-radius); background: var(--zz-white); width: 100%; box-sizing: border-box; } .zz-site-header__cta .zz-site-header__panel:hover { border-color: var(--zz-accent); } /* — FOOTER: kontakty — */ .zz-site-header__overlay-foot { display: flex !important; flex-direction: column; gap: var(--zz-sp-2); padding: var(--zz-sp-5) var(--zz-sp-6) var(--zz-sp-6); background: var(--zz-navy); color: var(--zz-light); } .zz-site-header__overlay-contact { display: inline-flex; align-items: center; gap: 10px; color: var(--zz-light) !important; text-decoration: none !important; font-size: 0.95rem; font-weight: 500; padding: 4px 0; } .zz-site-header__overlay-contact:hover { color: var(--zz-accent) !important; } } /* ════════════════════════════════════════════════════════════════════════ 17. PAKIETY pływań Wisła + Żerań ──────────────────────────────────────────────────────────────────────── */ .zz-page--pakiety .zz-hero__title { color: var(--zz-white) !important; } /* — Pain points lista — */ .zz-page--pakiety .zz-pakiety-pain__list { list-style: none; padding: 0; margin: var(--zz-sp-8) 0 0; display: grid; gap: var(--zz-sp-5); } .zz-page--pakiety .zz-pakiety-pain__list li { background: var(--zz-white); border-left: 4px solid var(--zz-accent); border-radius: var(--zz-radius); padding: var(--zz-sp-5) var(--zz-sp-6); box-shadow: var(--zz-shadow-sm); } .zz-page--pakiety .zz-pakiety-pain__q { display: block; font-family: var(--zz-font-serif); font-size: 1.15rem; color: var(--zz-navy); margin-bottom: var(--zz-sp-2); } .zz-page--pakiety .zz-pakiety-pain__a { display: block; color: var(--zz-muted); font-size: var(--zz-fs-base); } .zz-page--pakiety .zz-pakiety-pain__outro { text-align: center; margin-top: var(--zz-sp-10); font-size: var(--zz-fs-lg); color: var(--zz-text); line-height: 1.5; } /* — Cztery cechy (features grid) — */ .zz-page--pakiety .zz-pakiety-features__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--zz-sp-6); margin-top: var(--zz-sp-8); } @media (max-width: 1024px) { .zz-page--pakiety .zz-pakiety-features__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .zz-page--pakiety .zz-pakiety-features__grid { grid-template-columns: 1fr; } } .zz-page--pakiety .zz-pakiety-feature { background: var(--zz-white); border-radius: var(--zz-radius-lg); padding: var(--zz-sp-6); box-shadow: var(--zz-shadow-sm); border-top: 4px solid var(--zz-accent); } .zz-page--pakiety .zz-pakiety-feature__icon { font-size: 2.25rem; line-height: 1; margin-bottom: var(--zz-sp-4); } .zz-page--pakiety .zz-pakiety-feature h3 { font-family: var(--zz-font-serif); font-size: 1.2rem; margin: 0 0 var(--zz-sp-2); color: var(--zz-navy); } .zz-page--pakiety .zz-pakiety-feature p { color: var(--zz-muted); font-size: var(--zz-fs-base); margin: 0; line-height: 1.55; } /* — Proces (4 kroki + petla) — */ .zz-page--pakiety .zz-pakiety-process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--zz-sp-6); margin-top: var(--zz-sp-8); } @media (max-width: 1024px) { .zz-page--pakiety .zz-pakiety-process__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .zz-page--pakiety .zz-pakiety-process__grid { grid-template-columns: 1fr; } } .zz-page--pakiety .zz-pakiety-step { background: var(--zz-white); border: 1px solid var(--zz-line); border-top: 4px solid var(--zz-accent); border-radius: var(--zz-radius-lg); padding: var(--zz-sp-6) var(--zz-sp-5); box-shadow: var(--zz-shadow-sm); position: relative; } .zz-page--pakiety .zz-pakiety-step--loop { border-top-color: var(--zz-teal); } .zz-page--pakiety .zz-pakiety-step__num { position: absolute; top: -22px; left: var(--zz-sp-5); background: var(--zz-navy); color: var(--zz-accent); font-family: var(--zz-font-serif); font-weight: 700; font-size: 1.15rem; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--zz-shadow); } .zz-page--pakiety .zz-pakiety-step--loop .zz-pakiety-step__num { background: var(--zz-teal); color: var(--zz-white); font-size: 1.4rem; } .zz-page--pakiety .zz-pakiety-step h3 { font-family: var(--zz-font-serif); font-size: 1.15rem; margin: var(--zz-sp-3) 0 var(--zz-sp-2); color: var(--zz-navy); } .zz-page--pakiety .zz-pakiety-step p { color: var(--zz-muted); font-size: var(--zz-fs-sm); margin: 0; line-height: 1.55; } /* — Dwa akweny — */ .zz-page--pakiety .zz-pakiety-akweny__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--zz-sp-8); margin-top: var(--zz-sp-6); } @media (max-width: 900px) { .zz-page--pakiety .zz-pakiety-akweny__grid { grid-template-columns: 1fr; } } .zz-page--pakiety .zz-pakiety-akwen { background: var(--zz-white); border-radius: var(--zz-radius-lg); overflow: hidden; box-shadow: var(--zz-shadow); display: flex; flex-direction: column; transition: transform var(--zz-trans-normal); } .zz-page--pakiety .zz-pakiety-akwen:hover { transform: translateY(-4px); box-shadow: var(--zz-shadow-lg); } .zz-page--pakiety .zz-pakiety-akwen__img { position: relative; aspect-ratio: 16 / 9; background-size: cover; background-position: center; } .zz-page--pakiety .zz-pakiety-akwen__tag { position: absolute; top: var(--zz-sp-3); left: var(--zz-sp-3); background: var(--zz-accent); color: var(--zz-navy-deep); padding: var(--zz-sp-1) var(--zz-sp-3); border-radius: var(--zz-radius-sm); font-size: var(--zz-fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .zz-page--pakiety .zz-pakiety-akwen__body { padding: var(--zz-sp-6); } .zz-page--pakiety .zz-pakiety-akwen__title { font-family: var(--zz-font-serif); font-size: 1.5rem; color: var(--zz-navy); margin: 0; } .zz-page--pakiety .zz-pakiety-akwen__sub { color: var(--zz-muted); font-size: var(--zz-fs-sm); margin: 4px 0 var(--zz-sp-4); font-weight: 600; } .zz-page--pakiety .zz-pakiety-akwen__desc { color: var(--zz-text); line-height: 1.55; margin: 0; } /* — Booking (Amelia) — */ .zz-page--pakiety .zz-pakiety-booking__widget { background: var(--zz-white); border-radius: var(--zz-radius-lg); box-shadow: var(--zz-shadow); padding: var(--zz-sp-8); margin-top: var(--zz-sp-6); min-height: 480px; } .zz-page--pakiety .zz-pakiety-booking__fallback { text-align: center; padding: var(--zz-sp-8) var(--zz-sp-4); } .zz-page--pakiety .zz-pakiety-booking__foot { margin-top: var(--zz-sp-5); text-align: center; color: var(--zz-muted); font-size: var(--zz-fs-sm); } .zz-page--pakiety .zz-pakiety-booking__foot p { margin: 4px 0; } .zz-page--pakiety .amelia-app-booking, .zz-page--pakiety .amelia-app-booking-customer, .zz-page--pakiety .amelia-app-catalog, .zz-page--pakiety .amelia-app-step-booking { --primary-color: var(--zz-accent); /* font-family bez !important — żeby Amelia mogła nadpisać font dla ikon (amelia-icons) */ font-family: var(--zz-font-sans); } /* — Pakiety: hero z info card po prawej — */ .zz-page--pakiety .zz-pakiety-hero__grid { grid-template-columns: 1.05fr 1fr; gap: var(--zz-sp-12); align-items: center; } @media (max-width: 1024px) { .zz-page--pakiety .zz-pakiety-hero__grid { grid-template-columns: 1fr; gap: var(--zz-sp-10); } } .zz-page--pakiety .zz-pakiety-hero__copy { align-self: center; } /* Karta info — biała z żółtym top borderem, cień */ .zz-page--pakiety .zz-pakiety-hero__card { background: var(--zz-white); color: var(--zz-text); border-radius: var(--zz-radius-lg); padding: var(--zz-sp-8); box-shadow: 0 24px 60px rgba(0,0,0,.35); position: relative; overflow: hidden; } .zz-page--pakiety .zz-pakiety-hero__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--zz-accent); } .zz-page--pakiety .zz-pakiety-hero__card-eyebrow { display: inline-block; background: var(--zz-navy); color: var(--zz-white); padding: var(--zz-sp-2) var(--zz-sp-4); border-radius: var(--zz-radius-sm); font-size: var(--zz-fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--zz-sp-5); } .zz-page--pakiety .zz-pakiety-hero__card-title { font-family: var(--zz-font-serif); font-size: clamp(1.4rem, 2.4vw, 1.85rem) !important; color: var(--zz-navy) !important; margin: 0 0 var(--zz-sp-2) !important; line-height: 1.15; } .zz-page--pakiety .zz-pakiety-hero__card-sub { color: var(--zz-muted); font-size: var(--zz-fs-base); margin: 0 0 var(--zz-sp-6); font-weight: 600; } /* Sekcja z dużą cyfrą */ .zz-page--pakiety .zz-pakiety-hero__card-big { background: var(--zz-sand); border-radius: var(--zz-radius); padding: var(--zz-sp-5) var(--zz-sp-6); display: flex; align-items: center; gap: var(--zz-sp-5); margin: 0 0 var(--zz-sp-6); } .zz-page--pakiety .zz-pakiety-hero__card-big-num { font-family: var(--zz-font-serif); font-size: 3.5rem; font-weight: 700; line-height: 1; color: var(--zz-navy); flex-shrink: 0; } .zz-page--pakiety .zz-pakiety-hero__card-big-txt { display: flex; flex-direction: column; line-height: 1.3; } .zz-page--pakiety .zz-pakiety-hero__card-big-txt strong { font-family: var(--zz-font-sans); font-weight: 700; color: var(--zz-navy); font-size: var(--zz-fs-base); } .zz-page--pakiety .zz-pakiety-hero__card-big-txt span { color: var(--zz-muted); font-size: var(--zz-fs-sm); } /* Lista parametrów — DL grid 1fr auto */ .zz-page--pakiety .zz-pakiety-hero__card-list { display: grid; grid-template-columns: 1fr auto; gap: var(--zz-sp-3) var(--zz-sp-6); margin: 0; padding-top: var(--zz-sp-4); border-top: 1px dashed var(--zz-line); } .zz-page--pakiety .zz-pakiety-hero__card-list dt { margin: 0; color: var(--zz-muted); font-size: var(--zz-fs-base); } .zz-page--pakiety .zz-pakiety-hero__card-list dd { margin: 0; text-align: right; font-weight: 700; color: var(--zz-navy); font-size: var(--zz-fs-base); } @media (max-width: 600px) { .zz-page--pakiety .zz-pakiety-hero__card { padding: var(--zz-sp-6); } .zz-page--pakiety .zz-pakiety-hero__card-big-num { font-size: 2.8rem; } } /* ════════════════════════════════════════════════════════════════════════ 18. REJSY MORSKIE — hub (listing kart) + karta rejsu ──────────────────────────────────────────────────────────────────────── */ .zz-page--rejsy-morskie .zz-hero__title { color: var(--zz-white) !important; } /* Grid kart rejsów */ .zz-page--rejsy-morskie .zz-rejsy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--zz-sp-6); margin-top: var(--zz-sp-8); } @media (max-width: 1024px) { .zz-page--rejsy-morskie .zz-rejsy-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .zz-page--rejsy-morskie .zz-rejsy-grid { grid-template-columns: 1fr; } } .zz-page--rejsy-morskie .zz-rejs-card { background: var(--zz-white); border-radius: var(--zz-radius-lg); overflow: hidden; box-shadow: var(--zz-shadow); display: flex; flex-direction: column; transition: transform var(--zz-trans-normal), box-shadow var(--zz-trans-normal); } .zz-page--rejsy-morskie .zz-rejs-card:hover { transform: translateY(-4px); box-shadow: var(--zz-shadow-lg); } .zz-page--rejsy-morskie .zz-rejs-card__img { position: relative; aspect-ratio: 16 / 10; background-size: cover; background-position: center; display: flex; align-items: flex-end; padding: var(--zz-sp-4); text-decoration: none !important; } .zz-page--rejsy-morskie .zz-rejs-card__location { background: rgba(255,255,255,.95); color: var(--zz-navy-deep); padding: var(--zz-sp-1) var(--zz-sp-3); border-radius: var(--zz-radius-sm); font-size: var(--zz-fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .zz-page--rejsy-morskie .zz-rejs-card__body { padding: var(--zz-sp-5) var(--zz-sp-6) var(--zz-sp-6); display: flex; flex-direction: column; flex-grow: 1; } .zz-page--rejsy-morskie .zz-rejs-card__dates { color: var(--zz-text); font-size: var(--zz-fs-sm); font-weight: 700; margin: 0 0 var(--zz-sp-3); } .zz-page--rejsy-morskie .zz-rejs-card__meta { display: flex; gap: var(--zz-sp-3); flex-wrap: wrap; margin: 0 0 var(--zz-sp-4); } .zz-page--rejsy-morskie .zz-rejs-card__slots, .zz-page--rejsy-morskie .zz-rejs-card__type { font-size: var(--zz-fs-xs); padding: 4px 10px; border-radius: var(--zz-radius-full); background: var(--zz-sand); color: var(--zz-text); font-weight: 700; } .zz-page--rejsy-morskie .zz-rejs__type--training { background: rgba(42,157,99,.12); color: var(--zz-ok); } .zz-page--rejsy-morskie .zz-rejs__type--internship { background: rgba(245,179,1,.18); color: var(--zz-navy-deep); } .zz-page--rejsy-morskie .zz-rejs__type--hard { background: rgba(214,69,69,.12); color: var(--zz-red); } .zz-page--rejsy-morskie .zz-rejs-card__title { font-family: var(--zz-font-serif); font-size: 1.3rem; line-height: 1.25; color: var(--zz-navy); margin: 0 0 var(--zz-sp-3); flex-grow: 1; } .zz-page--rejsy-morskie .zz-rejs-card__title a { color: inherit !important; text-decoration: none !important; } .zz-page--rejsy-morskie .zz-rejs-card__title a:hover { color: var(--zz-accent) !important; } .zz-page--rejsy-morskie .zz-rejs-card__captain { color: var(--zz-muted); font-size: var(--zz-fs-sm); margin: 0 0 var(--zz-sp-5); } .zz-page--rejsy-morskie .zz-rejs-card__body .zz-btn { align-self: flex-start; } .zz-page--rejsy-morskie .zz-rejsy-empty { background: var(--zz-white); border: 1px dashed var(--zz-line); border-radius: var(--zz-radius-lg); padding: var(--zz-sp-10); text-align: center; } /* ════════════════════════════════════════════════════════════════════════ 19. REJS MORSKI (pojedynczy) — sprzedażowo-informacyjny szablon ──────────────────────────────────────────────────────────────────────── */ .zz-page--rejs-morski .zz-hero__title { color: var(--zz-white) !important; } /* — Hero z infokartą (analogicznie do Pakietów) — */ .zz-page--rejs-morski .zz-rs-hero__grid { grid-template-columns: 1.05fr 1fr; gap: var(--zz-sp-12); align-items: center; } @media (max-width: 1024px) { .zz-page--rejs-morski .zz-rs-hero__grid { grid-template-columns: 1fr; gap: var(--zz-sp-10); } } .zz-page--rejs-morski .zz-rs-hero__card { background: var(--zz-white); color: var(--zz-text); border-radius: var(--zz-radius-lg); padding: var(--zz-sp-8); box-shadow: 0 24px 60px rgba(0,0,0,.35); position: relative; overflow: hidden; } .zz-page--rejs-morski .zz-rs-hero__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--zz-accent); } .zz-page--rejs-morski .zz-rs-hero__card-eyebrow { display: inline-block; background: var(--zz-navy); color: var(--zz-white); padding: var(--zz-sp-2) var(--zz-sp-4); border-radius: var(--zz-radius-sm); font-size: var(--zz-fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--zz-sp-5); } .zz-page--rejs-morski .zz-rs-hero__card-title { font-family: var(--zz-font-serif); font-size: clamp(1.4rem, 2.4vw, 1.85rem) !important; color: var(--zz-navy) !important; margin: 0 0 var(--zz-sp-2) !important; } .zz-page--rejs-morski .zz-rs-hero__card-sub { color: var(--zz-muted); font-size: var(--zz-fs-base); margin: 0 0 var(--zz-sp-6); font-weight: 600; } .zz-page--rejs-morski .zz-rs-hero__card-big { background: var(--zz-sand); border-radius: var(--zz-radius); padding: var(--zz-sp-5) var(--zz-sp-6); display: flex; align-items: center; gap: var(--zz-sp-5); margin: 0 0 var(--zz-sp-6); } .zz-page--rejs-morski .zz-rs-hero__card-big-num { font-family: var(--zz-font-serif); font-size: 3.5rem; font-weight: 700; line-height: 1; color: var(--zz-navy); flex-shrink: 0; } .zz-page--rejs-morski .zz-rs-hero__card-big-txt { display: flex; flex-direction: column; line-height: 1.3; } .zz-page--rejs-morski .zz-rs-hero__card-big-txt strong { font-family: var(--zz-font-sans); font-weight: 700; color: var(--zz-navy); font-size: var(--zz-fs-base); } .zz-page--rejs-morski .zz-rs-hero__card-big-txt span { color: var(--zz-muted); font-size: var(--zz-fs-sm); } .zz-page--rejs-morski .zz-rs-hero__card-list { display: grid; grid-template-columns: 1fr auto; gap: var(--zz-sp-3) var(--zz-sp-6); margin: 0; padding-top: var(--zz-sp-4); border-top: 1px dashed var(--zz-line); } .zz-page--rejs-morski .zz-rs-hero__card-list dt { margin: 0; color: var(--zz-muted); font-size: var(--zz-fs-base); } .zz-page--rejs-morski .zz-rs-hero__card-list dd { margin: 0; text-align: right; font-weight: 700; color: var(--zz-navy); font-size: var(--zz-fs-base); } /* — Program (timeline dni) — */ .zz-page--rejs-morski .zz-rs-program__timeline { list-style: none; margin: var(--zz-sp-8) 0 0; padding: 0; counter-reset: dni; position: relative; } .zz-page--rejs-morski .zz-rs-program__timeline::before { content: ""; position: absolute; left: 22px; top: 22px; bottom: 22px; width: 2px; background: var(--zz-line); } .zz-page--rejs-morski .zz-rs-program__day { display: flex; gap: var(--zz-sp-5); align-items: flex-start; padding: var(--zz-sp-5) 0; position: relative; } .zz-page--rejs-morski .zz-rs-program__marker { flex-shrink: 0; width: 46px; height: 46px; background: var(--zz-navy); color: var(--zz-accent); font-family: var(--zz-font-serif); font-weight: 700; font-size: 1.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--zz-shadow); position: relative; z-index: 1; } .zz-page--rejs-morski .zz-rs-program__content { background: var(--zz-white); border-radius: var(--zz-radius-lg); padding: var(--zz-sp-5) var(--zz-sp-6); box-shadow: var(--zz-shadow-sm); flex-grow: 1; } .zz-page--rejs-morski .zz-rs-program__day-title { font-family: var(--zz-font-serif); font-size: 1.15rem; color: var(--zz-navy); margin: 0 0 var(--zz-sp-2); } .zz-page--rejs-morski .zz-rs-program__day-body { color: var(--zz-text); margin: 0; line-height: 1.55; } /* — Jacht + Kapitan (combo) — */ .zz-page--rejs-morski .zz-rs-yc__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--zz-sp-10); } @media (max-width: 900px) { .zz-page--rejs-morski .zz-rs-yc__grid { grid-template-columns: 1fr; gap: var(--zz-sp-8); } } .zz-page--rejs-morski .zz-rs-yc__yacht-name { font-family: var(--zz-font-serif); font-size: 1.5rem; color: var(--zz-navy); margin: var(--zz-sp-4) 0 var(--zz-sp-2); } .zz-page--rejs-morski .zz-rs-yc__yacht-spec { color: var(--zz-muted); background: var(--zz-sand); padding: var(--zz-sp-3) var(--zz-sp-4); border-radius: var(--zz-radius-sm); margin: 0 0 var(--zz-sp-5); font-weight: 600; } .zz-page--rejs-morski .zz-rs-yc__captain-card { display: flex; gap: var(--zz-sp-4); align-items: center; padding: var(--zz-sp-5); background: var(--zz-white); border-radius: var(--zz-radius-lg); box-shadow: var(--zz-shadow-sm); margin-bottom: var(--zz-sp-5); } .zz-page--rejs-morski .zz-rs-yc__captain-avatar { flex-shrink: 0; width: 80px; height: 80px; border-radius: 50%; background: var(--zz-sand); overflow: hidden; display: flex; align-items: center; justify-content: center; } .zz-page--rejs-morski .zz-rs-yc__captain-avatar img { width: 100%; height: 100%; object-fit: cover; } .zz-page--rejs-morski .zz-rs-yc__captain-name { font-family: var(--zz-font-serif); font-size: 1.3rem; color: var(--zz-navy); margin: 0 0 var(--zz-sp-1); } .zz-page--rejs-morski .zz-rs-yc__captain-title { color: var(--zz-muted); font-size: var(--zz-fs-sm); margin: 0; font-weight: 600; } .zz-page--rejs-morski .zz-rs-yc__captain-bio { color: var(--zz-text); line-height: 1.55; margin: 0; } /* — Cena (W cenie / Nie w cenie) — */ .zz-page--rejs-morski .zz-rs-price__amount { font-family: var(--zz-font-serif); font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--zz-navy); margin: var(--zz-sp-4) 0 var(--zz-sp-8); } .zz-page--rejs-morski .zz-rs-price__amount span { background: var(--zz-accent); color: var(--zz-navy-deep); padding: var(--zz-sp-2) var(--zz-sp-5); border-radius: var(--zz-radius); display: inline-block; } .zz-page--rejs-morski .zz-rs-price__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--zz-sp-6); } @media (max-width: 720px) { .zz-page--rejs-morski .zz-rs-price__grid { grid-template-columns: 1fr; } } .zz-page--rejs-morski .zz-rs-price__col { background: var(--zz-white); border-radius: var(--zz-radius-lg); padding: var(--zz-sp-6); box-shadow: var(--zz-shadow-sm); } .zz-page--rejs-morski .zz-rs-price__col--included { border-top: 4px solid var(--zz-ok); } .zz-page--rejs-morski .zz-rs-price__col--excluded { border-top: 4px solid var(--zz-red); } .zz-page--rejs-morski .zz-rs-price__col-title { font-family: var(--zz-font-serif); font-size: 1.3rem; margin: 0 0 var(--zz-sp-4); color: var(--zz-navy); } .zz-page--rejs-morski .zz-rs-price__col ul { list-style: none; padding: 0; margin: 0; } .zz-page--rejs-morski .zz-rs-price__col li { padding: var(--zz-sp-2) 0; border-bottom: 1px solid var(--zz-line); color: var(--zz-text); } .zz-page--rejs-morski .zz-rs-price__col li:last-child { border-bottom: 0; } /* — Rezerwacja — */ .zz-page--rejs-morski .zz-rs-booking__widget { background: var(--zz-white); border-radius: var(--zz-radius-lg); box-shadow: var(--zz-shadow); padding: var(--zz-sp-8); margin-top: var(--zz-sp-6); min-height: 360px; } .zz-page--rejs-morski .zz-rs-booking__fallback { text-align: center; padding: var(--zz-sp-6) var(--zz-sp-4); } .zz-page--rejs-morski .amelia-app-booking, .zz-page--rejs-morski .amelia-app-booking-customer, .zz-page--rejs-morski .amelia-app-catalog { --primary-color: var(--zz-accent); /* font-family bez !important — żeby Amelia mogła nadpisać font dla ikon (amelia-icons) */ font-family: var(--zz-font-sans); } /* ════════════════════════════════════════════════════════════════════════ 20. KONTAKT — strona /kontakt/ ──────────────────────────────────────────────────────────────────────── */ .zz-page--kontakt .zz-kontakt-karty__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--zz-sp-5); margin-top: var(--zz-sp-8); } @media (max-width: 900px) { .zz-page--kontakt .zz-kontakt-karty__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .zz-page--kontakt .zz-kontakt-karty__grid { grid-template-columns: 1fr; } } .zz-page--kontakt .zz-kontakt-karta { background: var(--zz-white); padding: var(--zz-sp-6); border-radius: var(--zz-radius-lg); box-shadow: var(--zz-shadow-sm); text-decoration: none !important; color: var(--zz-text) !important; display: flex; flex-direction: column; gap: 4px; transition: transform var(--zz-trans-normal), box-shadow var(--zz-trans-normal); border-top: 4px solid var(--zz-accent); } .zz-page--kontakt .zz-kontakt-karta:hover { transform: translateY(-4px); box-shadow: var(--zz-shadow); } .zz-page--kontakt .zz-kontakt-karta--wa { border-top-color: var(--zz-green); } .zz-page--kontakt .zz-kontakt-karta--mail { border-top-color: var(--zz-teal); } .zz-page--kontakt .zz-kontakt-karta--tel { border-top-color: var(--zz-accent); } .zz-page--kontakt .zz-kontakt-karta--social { border-top-color: var(--zz-navy); } .zz-page--kontakt .zz-kontakt-karta__icon { font-size: 2rem; line-height: 1; margin-bottom: var(--zz-sp-2); } .zz-page--kontakt .zz-kontakt-karta h3 { font-family: var(--zz-font-serif); font-size: 1.15rem; color: var(--zz-navy); margin: 0; } .zz-page--kontakt .zz-kontakt-karta__main { font-weight: 700; color: var(--zz-text); margin: var(--zz-sp-2) 0 0; } .zz-page--kontakt .zz-kontakt-karta__meta { color: var(--zz-muted); font-size: var(--zz-fs-sm); margin: 0; } .zz-page--kontakt .zz-kontakt-karta__meta a { color: var(--zz-navy); font-weight: 600; } .zz-page--kontakt .zz-kontakt-karta__cta { margin-top: auto; padding-top: var(--zz-sp-4); color: var(--zz-accent); font-weight: 800; font-size: var(--zz-fs-sm); letter-spacing: .04em; } .zz-page--kontakt .zz-kontakt-form__box { background: var(--zz-white); padding: var(--zz-sp-8); border-radius: var(--zz-radius-lg); box-shadow: var(--zz-shadow); } /* ════════════════════════════════════════════════════════════════════════ 21. O NAS — strona /o-nas/ ──────────────────────────────────────────────────────────────────────── */ .zz-page--o-nas .zz-hero__title { color: var(--zz-white) !important; } /* Statystyki — dark grid */ .zz-page--o-nas .zz-on-stats__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--zz-sp-6); margin-top: var(--zz-sp-8); } @media (max-width: 900px) { .zz-page--o-nas .zz-on-stats__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .zz-page--o-nas .zz-on-stats__grid { grid-template-columns: repeat(2, 1fr); } } .zz-page--o-nas .zz-on-stat { text-align: center; } .zz-page--o-nas .zz-on-stat__num { font-family: var(--zz-font-serif); font-size: clamp(2rem, 4vw, 3rem); color: var(--zz-accent); font-weight: 700; line-height: 1; margin-bottom: var(--zz-sp-2); } .zz-page--o-nas .zz-on-stat__label { color: var(--zz-light); font-size: var(--zz-fs-sm); letter-spacing: .02em; } /* Zespół */ .zz-page--o-nas .zz-on-team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--zz-sp-6); margin-top: var(--zz-sp-8); } @media (max-width: 1024px) { .zz-page--o-nas .zz-on-team__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .zz-page--o-nas .zz-on-team__grid { grid-template-columns: 1fr; } } .zz-page--o-nas .zz-on-member { background: var(--zz-white); padding: var(--zz-sp-6); border-radius: var(--zz-radius-lg); box-shadow: var(--zz-shadow-sm); text-align: center; } .zz-page--o-nas .zz-on-member__avatar { width: 88px; height: 88px; background: var(--zz-sand); border-radius: 50%; margin: 0 auto var(--zz-sp-4); display: flex; align-items: center; justify-content: center; overflow: hidden; } .zz-page--o-nas .zz-on-member__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .zz-page--o-nas .zz-on-member__name { font-family: var(--zz-font-serif); font-size: 1.2rem; color: var(--zz-navy); margin: 0 0 var(--zz-sp-1); } .zz-page--o-nas .zz-on-member__title { color: var(--zz-accent); font-size: var(--zz-fs-sm); font-weight: 700; margin: 0 0 var(--zz-sp-3); } .zz-page--o-nas .zz-on-member__bio { color: var(--zz-muted); font-size: var(--zz-fs-sm); line-height: 1.5; margin: 0; } /* Wartości */ .zz-page--o-nas .zz-on-values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--zz-sp-6); margin-top: var(--zz-sp-8); } @media (max-width: 1024px) { .zz-page--o-nas .zz-on-values__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .zz-page--o-nas .zz-on-values__grid { grid-template-columns: 1fr; } } .zz-page--o-nas .zz-on-value { background: var(--zz-white); padding: var(--zz-sp-6); border-radius: var(--zz-radius-lg); box-shadow: var(--zz-shadow-sm); border-top: 4px solid var(--zz-accent); } .zz-page--o-nas .zz-on-value__icon { font-size: 2.25rem; line-height: 1; margin-bottom: var(--zz-sp-3); } .zz-page--o-nas .zz-on-value h3 { font-family: var(--zz-font-serif); font-size: 1.2rem; color: var(--zz-navy); margin: 0 0 var(--zz-sp-2); } .zz-page--o-nas .zz-on-value p { color: var(--zz-muted); margin: 0; line-height: 1.55; } /* Historia timeline */ .zz-page--o-nas .zz-on-history__timeline { list-style: none; padding: 0; margin: var(--zz-sp-8) 0 0; position: relative; } .zz-page--o-nas .zz-on-history__timeline::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 2px; background: var(--zz-accent); } .zz-page--o-nas .zz-on-history__item { display: flex; gap: var(--zz-sp-5); padding: var(--zz-sp-4) 0; position: relative; } .zz-page--o-nas .zz-on-history__marker { flex-shrink: 0; width: 20px; height: 20px; background: var(--zz-accent); border-radius: 50%; margin-top: 4px; border: 3px solid var(--zz-sand); position: relative; z-index: 1; box-shadow: 0 0 0 2px var(--zz-accent); } .zz-page--o-nas .zz-on-history__content { background: var(--zz-white); padding: var(--zz-sp-5) var(--zz-sp-6); border-radius: var(--zz-radius-lg); box-shadow: var(--zz-shadow-sm); flex-grow: 1; } .zz-page--o-nas .zz-on-history__content h3 { font-family: var(--zz-font-serif); font-size: 1.15rem; color: var(--zz-navy); margin: 0 0 var(--zz-sp-2); } .zz-page--o-nas .zz-on-history__content p { color: var(--zz-text); margin: 0; line-height: 1.55; } /* ════════════════════════════════════════════════════════════════════════ 22. BLOG — archiwum + single z sidebarem ──────────────────────────────────────────────────────────────────────── */ /* Layout 2-kolumnowy */ .zz-page--blog .zz-blog__layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--zz-sp-12); align-items: start; } @media (max-width: 1024px) { .zz-page--blog .zz-blog__layout { grid-template-columns: 1fr; gap: var(--zz-sp-10); } } /* Breadcrumb */ .zz-page--blog .zz-breadcrumb { font-size: var(--zz-fs-sm); color: var(--zz-muted); margin-bottom: var(--zz-sp-4); } .zz-page--blog .zz-breadcrumb a { color: var(--zz-navy); text-decoration: none; } .zz-page--blog .zz-breadcrumb a:hover { color: var(--zz-accent); } .zz-page--blog .zz-breadcrumb--dark, .zz-page--blog .zz-breadcrumb--dark a { color: var(--zz-light); } .zz-page--blog .zz-breadcrumb--dark a:hover { color: var(--zz-accent); } /* Grid postów */ .zz-page--blog .zz-blog__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--zz-sp-6); } @media (max-width: 720px) { .zz-page--blog .zz-blog__grid { grid-template-columns: 1fr; } } .zz-page--blog .zz-blog-card { background: var(--zz-white); border-radius: var(--zz-radius-lg); overflow: hidden; box-shadow: var(--zz-shadow-sm); display: flex; flex-direction: column; transition: transform var(--zz-trans-normal), box-shadow var(--zz-trans-normal); } .zz-page--blog .zz-blog-card:hover { transform: translateY(-4px); box-shadow: var(--zz-shadow); } .zz-page--blog .zz-blog-card__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; } .zz-page--blog .zz-blog-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--zz-trans-slow); } .zz-page--blog .zz-blog-card:hover .zz-blog-card__img img { transform: scale(1.05); } .zz-page--blog .zz-blog-card__body { padding: var(--zz-sp-5) var(--zz-sp-6) var(--zz-sp-6); display: flex; flex-direction: column; flex-grow: 1; } .zz-page--blog .zz-blog-card__cat { display: inline-block; margin-bottom: var(--zz-sp-3); } .zz-page--blog .zz-blog-card__cat a { background: var(--zz-accent); color: var(--zz-navy-deep) !important; padding: 4px 10px; border-radius: var(--zz-radius-sm); font-size: var(--zz-fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-decoration: none !important; } .zz-page--blog .zz-blog-card__title { font-family: var(--zz-font-serif); font-size: 1.3rem; line-height: 1.25; margin: 0 0 var(--zz-sp-3); color: var(--zz-navy); } .zz-page--blog .zz-blog-card__title a { color: inherit !important; text-decoration: none !important; } .zz-page--blog .zz-blog-card__title a:hover { color: var(--zz-accent) !important; } .zz-page--blog .zz-blog-card__excerpt { color: var(--zz-muted); margin: 0 0 var(--zz-sp-4); flex-grow: 1; } .zz-page--blog .zz-blog-card__meta { font-size: var(--zz-fs-sm); color: var(--zz-muted); display: flex; flex-wrap: wrap; gap: var(--zz-sp-2); align-items: center; } .zz-page--blog .zz-blog-card__more { color: var(--zz-accent); font-weight: 700; text-decoration: none !important; } .zz-page--blog .zz-blog-card__more:hover { color: var(--zz-accent-2); } /* Pagination */ .zz-page--blog .zz-blog__pagination { margin-top: var(--zz-sp-10); display: flex; justify-content: center; } .zz-page--blog .zz-blog__pagination .nav-links { display: flex; gap: var(--zz-sp-2); flex-wrap: wrap; align-items: center; justify-content: center; } .zz-page--blog .zz-blog__pagination .page-numbers { padding: 8px 14px; background: var(--zz-white); border: 1px solid var(--zz-line); border-radius: var(--zz-radius-sm); color: var(--zz-navy); text-decoration: none; font-weight: 700; transition: all var(--zz-trans-fast); } .zz-page--blog .zz-blog__pagination .page-numbers:hover, .zz-page--blog .zz-blog__pagination .page-numbers.current { background: var(--zz-accent); color: var(--zz-navy-deep); border-color: var(--zz-accent); } /* Empty */ .zz-page--blog .zz-blog__empty { text-align: center; padding: var(--zz-sp-12) var(--zz-sp-6); background: var(--zz-sand); border-radius: var(--zz-radius-lg); } /* — SIDEBAR — */ .zz-page--blog .zz-blog__sidebar { display: flex; flex-direction: column; gap: var(--zz-sp-6); } .zz-page--blog .zz-widget { background: var(--zz-white); border-radius: var(--zz-radius-lg); padding: var(--zz-sp-5) var(--zz-sp-6); box-shadow: var(--zz-shadow-sm); } .zz-page--blog .zz-widget__title { font-family: var(--zz-font-serif); font-size: 1.1rem; color: var(--zz-navy); margin: 0 0 var(--zz-sp-4); padding-bottom: var(--zz-sp-3); border-bottom: 2px solid var(--zz-accent); } /* Search */ .zz-page--blog .zz-search { display: flex; gap: 6px; } .zz-page--blog .zz-search__input { flex-grow: 1; border: 1px solid var(--zz-line); border-radius: var(--zz-radius-sm); padding: 8px 12px; font: inherit; } .zz-page--blog .zz-search__btn { background: var(--zz-accent); border: 0; padding: 8px 14px; border-radius: var(--zz-radius-sm); cursor: pointer; } /* Recent posts */ .zz-page--blog .zz-widget__recent { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--zz-sp-3); } .zz-page--blog .zz-widget__recent li { display: flex; gap: var(--zz-sp-3); align-items: flex-start; } .zz-page--blog .zz-widget__recent-img { flex-shrink: 0; width: 72px; height: 56px; overflow: hidden; border-radius: var(--zz-radius-sm); } .zz-page--blog .zz-widget__recent-img img { width: 100%; height: 100%; object-fit: cover; } .zz-page--blog .zz-widget__recent-body { flex-grow: 1; } .zz-page--blog .zz-widget__recent-body a { display: block; color: var(--zz-navy); font-weight: 700; font-size: var(--zz-fs-sm); line-height: 1.3; text-decoration: none; margin-bottom: 3px; } .zz-page--blog .zz-widget__recent-body a:hover { color: var(--zz-accent); } .zz-page--blog .zz-widget__recent-body time { font-size: var(--zz-fs-xs); color: var(--zz-muted); } /* Categories */ .zz-page--blog .zz-widget__cats { list-style: none; padding: 0; margin: 0; } .zz-page--blog .zz-widget__cats li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--zz-line); } .zz-page--blog .zz-widget__cats li:last-child { border-bottom: 0; } .zz-page--blog .zz-widget__cats a { color: var(--zz-navy); text-decoration: none; font-weight: 600; } .zz-page--blog .zz-widget__cats a:hover { color: var(--zz-accent); } .zz-page--blog .zz-widget__count { font-size: var(--zz-fs-xs); background: var(--zz-sand); padding: 2px 8px; border-radius: var(--zz-radius-full); color: var(--zz-muted); } /* CTA widget */ .zz-page--blog .zz-widget--cta { background: var(--zz-navy); color: var(--zz-light); text-align: center; } .zz-page--blog .zz-widget--cta .zz-widget__title { color: var(--zz-accent); border-bottom-color: var(--zz-accent); } .zz-page--blog .zz-widget--cta p { color: var(--zz-light); margin-bottom: var(--zz-sp-4); font-size: var(--zz-fs-sm); } /* Tags */ .zz-page--blog .zz-widget__tags { display: flex; flex-wrap: wrap; gap: 6px; } .zz-page--blog .zz-widget__tags a { background: var(--zz-sand); color: var(--zz-navy); padding: 4px 10px; border-radius: var(--zz-radius-full); font-size: var(--zz-fs-xs); text-decoration: none; transition: all var(--zz-trans-fast); } .zz-page--blog .zz-widget__tags a:hover { background: var(--zz-accent); color: var(--zz-navy-deep); } /* Contact widget */ .zz-page--blog .zz-widget__contact { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--zz-sp-2); } .zz-page--blog .zz-widget__contact a { color: var(--zz-navy); text-decoration: none; font-weight: 600; font-size: var(--zz-fs-sm); } .zz-page--blog .zz-widget__contact a:hover { color: var(--zz-accent); } /* — SINGLE post — */ .zz-page--single .zz-single__hero .zz-hero__title { color: var(--zz-white) !important; font-size: clamp(1.8rem, 3.5vw, 2.8rem); } .zz-page--single .zz-single__meta { color: var(--zz-light); font-size: var(--zz-fs-sm); margin-top: var(--zz-sp-5); display: flex; flex-wrap: wrap; gap: var(--zz-sp-2); align-items: center; } .zz-page--single .zz-single__content { font-size: 1.05rem; line-height: 1.75; color: var(--zz-text); } .zz-page--single .zz-single__content p { margin: 0 0 var(--zz-sp-5); } .zz-page--single .zz-single__content h2 { font-family: var(--zz-font-serif); font-size: 1.8rem; color: var(--zz-navy); margin: var(--zz-sp-10) 0 var(--zz-sp-4); } .zz-page--single .zz-single__content h3 { font-family: var(--zz-font-serif); font-size: 1.4rem; color: var(--zz-navy); margin: var(--zz-sp-8) 0 var(--zz-sp-3); } .zz-page--single .zz-single__content blockquote { border-left: 4px solid var(--zz-accent); background: var(--zz-sand); padding: var(--zz-sp-4) var(--zz-sp-6); margin: var(--zz-sp-6) 0; font-style: italic; color: var(--zz-text); border-radius: 0 var(--zz-radius) var(--zz-radius) 0; } .zz-page--single .zz-single__content img, .zz-page--single .zz-single__content figure { margin: var(--zz-sp-6) 0; border-radius: var(--zz-radius-lg); overflow: hidden; } .zz-page--single .zz-single__content ul, .zz-page--single .zz-single__content ol { margin: 0 0 var(--zz-sp-5) var(--zz-sp-5); } .zz-page--single .zz-single__content li { margin-bottom: var(--zz-sp-2); } .zz-page--single .zz-single__content a { color: var(--zz-accent); text-decoration: underline; text-underline-offset: 3px; } .zz-page--single .zz-single__tags { margin-top: var(--zz-sp-8); padding-top: var(--zz-sp-5); border-top: 1px solid var(--zz-line); font-size: var(--zz-fs-sm); } .zz-page--single .zz-single__tags a { background: var(--zz-sand); color: var(--zz-navy); padding: 3px 10px; border-radius: var(--zz-radius-full); margin-right: 6px; text-decoration: none; font-size: var(--zz-fs-xs); } .zz-page--single .zz-single__share { margin-top: var(--zz-sp-6); padding-top: var(--zz-sp-5); border-top: 1px solid var(--zz-line); display: flex; flex-wrap: wrap; gap: var(--zz-sp-3); align-items: center; font-size: var(--zz-fs-sm); } .zz-page--single .zz-single__share a { background: var(--zz-white); border: 1px solid var(--zz-line); padding: 6px 14px; border-radius: var(--zz-radius-sm); text-decoration: none; color: var(--zz-navy); font-weight: 600; } .zz-page--single .zz-single__share a:hover { background: var(--zz-accent); color: var(--zz-navy-deep); border-color: var(--zz-accent); } .zz-page--single .zz-single__nav { margin-top: var(--zz-sp-10); display: grid; grid-template-columns: 1fr 1fr; gap: var(--zz-sp-4); } @media (max-width: 600px) { .zz-page--single .zz-single__nav { grid-template-columns: 1fr; } } .zz-page--single .zz-single__nav-link { background: var(--zz-white); border: 1px solid var(--zz-line); border-radius: var(--zz-radius-lg); padding: var(--zz-sp-4) var(--zz-sp-5); text-decoration: none; color: var(--zz-text); display: flex; flex-direction: column; transition: all var(--zz-trans-fast); } .zz-page--single .zz-single__nav-link:hover { border-color: var(--zz-accent); transform: translateY(-2px); } .zz-page--single .zz-single__nav-link--next { text-align: right; } .zz-page--single .zz-single__nav-dir { font-size: var(--zz-fs-xs); color: var(--zz-accent); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 4px; } .zz-page--single .zz-single__nav-title { font-family: var(--zz-font-serif); color: var(--zz-navy); font-weight: 700; } /* ════════════════════════════════════════════════════════════════════════ 23. WSZYSTKIE REJSY — agregator z filtrowaniem ──────────────────────────────────────────────────────────────────────── */ /* — Filtry — */ .zz-page--rejsy-all .zz-all__filters { background: var(--zz-sand); padding: var(--zz-sp-5) 0; box-shadow: 0 2px 12px rgba(0,0,0,.05); } .zz-page--rejsy-all .zz-all__filter-row { display: flex; align-items: center; gap: var(--zz-sp-4); flex-wrap: wrap; padding: var(--zz-sp-2) 0; } .zz-page--rejsy-all .zz-all__filter-label { font-family: var(--zz-font-serif); color: var(--zz-navy); font-size: var(--zz-fs-base); flex-shrink: 0; } .zz-page--rejsy-all .zz-all__chips { display: flex; flex-wrap: wrap; gap: 6px; } .zz-page--rejsy-all .zz-all__chip { background: var(--zz-white); border: 1.5px solid var(--zz-line); color: var(--zz-text); padding: 6px 14px; border-radius: var(--zz-radius-full); font-size: var(--zz-fs-sm); font-weight: 600; cursor: pointer; transition: all var(--zz-trans-fast); font-family: inherit; } .zz-page--rejsy-all .zz-all__chip:hover { border-color: var(--zz-accent); color: var(--zz-navy); } .zz-page--rejsy-all .zz-all__chip--active { background: var(--zz-navy); color: var(--zz-accent); border-color: var(--zz-navy); } .zz-page--rejsy-all .zz-all__counter { margin: var(--zz-sp-3) 0 0; color: var(--zz-muted); font-size: var(--zz-fs-sm); font-weight: 600; } /* — Grid kart — */ .zz-page--rejsy-all .zz-all__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--zz-sp-6); } @media (max-width: 1024px) { .zz-page--rejsy-all .zz-all__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .zz-page--rejsy-all .zz-all__grid { grid-template-columns: 1fr; } } .zz-page--rejsy-all .zz-all-card { background: var(--zz-white); border-radius: var(--zz-radius-lg); overflow: hidden; box-shadow: var(--zz-shadow); display: flex; flex-direction: column; transition: transform var(--zz-trans-normal), box-shadow var(--zz-trans-normal); } .zz-page--rejsy-all .zz-all-card:hover { transform: translateY(-4px); box-shadow: var(--zz-shadow-lg); } .zz-page--rejsy-all .zz-all-card__img { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 4 / 3; background-size: cover; background-position: center; padding: var(--zz-sp-4); text-decoration: none !important; } .zz-page--rejsy-all .zz-all-card__akwen { align-self: flex-start; background: rgba(255,255,255,.95); color: var(--zz-navy-deep); padding: 4px 10px; border-radius: var(--zz-radius-sm); font-size: var(--zz-fs-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .zz-page--rejsy-all .zz-all-card__tag { align-self: flex-end; background: var(--zz-accent); color: var(--zz-navy-deep); padding: 4px 10px; border-radius: var(--zz-radius-sm); font-size: var(--zz-fs-xs); font-weight: 800; letter-spacing: .04em; } .zz-page--rejsy-all .zz-all-card__tag--rejs-morski { background: #2c6c8e; color: #fff; } .zz-page--rejsy-all .zz-all-card__tag--warsztat { background: #2a9d63; color: #fff; } .zz-page--rejsy-all .zz-all-card__tag--kurs { background: #1f4a72; color: #fff; } .zz-page--rejsy-all .zz-all-card__tag--czarter { background: #d64545; color: #fff; } .zz-page--rejsy-all .zz-all-card__tag--pakiet { background: var(--zz-navy); color: var(--zz-accent); } .zz-page--rejsy-all .zz-all-card__tag--spolecznosc { background: #ff6b35; color: #fff; } .zz-page--rejsy-all .zz-all-card__tag--heritage { background: #6f5a3f; color: #fff; } .zz-page--rejsy-all .zz-all-card__body { padding: var(--zz-sp-5) var(--zz-sp-6) var(--zz-sp-6); display: flex; flex-direction: column; flex-grow: 1; } .zz-page--rejsy-all .zz-all-card__title { font-family: var(--zz-font-serif); font-size: 1.2rem; line-height: 1.3; margin: 0 0 var(--zz-sp-3); color: var(--zz-navy); } .zz-page--rejsy-all .zz-all-card__title a { color: inherit !important; text-decoration: none !important; } .zz-page--rejsy-all .zz-all-card__title a:hover { color: var(--zz-accent) !important; } .zz-page--rejsy-all .zz-all-card__excerpt { color: var(--zz-muted); font-size: var(--zz-fs-sm); line-height: 1.55; margin: 0 0 var(--zz-sp-4); flex-grow: 1; } .zz-page--rejsy-all .zz-all-card__meta { color: var(--zz-text); font-size: var(--zz-fs-sm); font-weight: 700; margin: 0 0 var(--zz-sp-4); } .zz-page--rejsy-all .zz-all-card__more { color: var(--zz-accent); font-weight: 800; text-decoration: none !important; font-size: var(--zz-fs-sm); align-self: flex-start; } .zz-page--rejsy-all .zz-all-card__more:hover { color: var(--zz-accent-2); } /* — Empty state — */ .zz-page--rejsy-all .zz-all__empty { text-align: center; padding: var(--zz-sp-12) var(--zz-sp-6); background: var(--zz-sand); border-radius: var(--zz-radius-lg); margin-top: var(--zz-sp-6); } .zz-page--rejsy-all .zz-all__empty h3 { font-family: var(--zz-font-serif); color: var(--zz-navy); margin: 0 0 var(--zz-sp-3); } .zz-page--rejsy-all .zz-all__empty p { color: var(--zz-muted); margin: 0; } /* ========================================================= 24. Panel Żeglarza ========================================================= */ .zz-page--panel-zeglarza { background: #f5f6f8; min-height: 100vh; } .zz-page--panel-login { background: linear-gradient(135deg, var(--zz-navy) 0%, #06182b 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--zz-sp-6) var(--zz-sp-4); } /* --- Login --- */ .zz-pz-login__inner { background: #fff; padding: var(--zz-sp-8) var(--zz-sp-7); border-radius: var(--zz-radius-lg); box-shadow: 0 25px 60px -10px rgba(0,0,0,0.4); width: 100%; max-width: 440px; text-align: center; } .zz-pz-login__logo { display: inline-block; margin-bottom: var(--zz-sp-3); text-decoration: none; } .zz-pz-login__anchor { display: inline-block; font-size: 2.5rem; background: var(--zz-yellow); color: var(--zz-navy); width: 64px; height: 64px; border-radius: 50%; line-height: 64px; } .zz-pz-login__title { font-family: var(--zz-font-serif); color: var(--zz-navy); font-size: 1.75rem; margin: 0 0 var(--zz-sp-2); } .zz-pz-login__tagline { color: var(--zz-muted); font-size: 0.95rem; margin: 0 0 var(--zz-sp-6); } .zz-pz-login__form { display: flex; flex-direction: column; gap: var(--zz-sp-4); text-align: left; margin-bottom: var(--zz-sp-5); } .zz-pz-login__form label > span { display: block; font-weight: 700; font-size: 0.85rem; color: var(--zz-navy); margin-bottom: var(--zz-sp-1); } .zz-pz-login__form input[type="text"], .zz-pz-login__form input[type="password"] { width: 100%; padding: 14px 16px; border: 1px solid #d1d5db; border-radius: var(--zz-radius); font-size: 1rem; font-family: inherit; background: #fafafa; } .zz-pz-login__form input:focus { outline: 0; border-color: var(--zz-yellow); background: #fff; box-shadow: 0 0 0 3px rgba(245,179,1,0.2); } .zz-pz-login__remember { display: flex; align-items: center; gap: var(--zz-sp-2); color: var(--zz-muted); font-size: 0.9rem; } .zz-pz-login__submit { width: 100%; padding: 14px; font-size: 1rem; } .zz-pz-login__links { display: flex; justify-content: center; gap: var(--zz-sp-3); margin-bottom: var(--zz-sp-5); font-size: 0.9rem; } .zz-pz-login__links a { color: var(--zz-navy); text-decoration: underline; } .zz-pz-login__back { color: var(--zz-muted); font-size: 0.85rem; text-decoration: none; } .zz-pz-login__back:hover { color: var(--zz-navy); } /* --- Layout --- */ .zz-pz-layout { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; gap: 0; } .zz-pz-content { padding: var(--zz-sp-7) var(--zz-sp-6); max-width: 1100px; width: 100%; margin: 0 auto; } /* --- Sidebar --- */ .zz-pz-sidebar { background: var(--zz-navy); color: #fff; padding: var(--zz-sp-6) var(--zz-sp-4); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--zz-sp-5); } .zz-pz-sidebar__brand { display: flex; align-items: center; gap: var(--zz-sp-3); padding-bottom: var(--zz-sp-4); border-bottom: 1px solid rgba(255,255,255,0.1); } .zz-pz-sidebar__anchor { font-size: 1.5rem; background: var(--zz-yellow); color: var(--zz-navy); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .zz-pz-sidebar__brand strong { display: block; font-family: var(--zz-font-serif); color: var(--zz-yellow); font-size: 1rem; } .zz-pz-sidebar__brand small { display: block; font-size: 0.75rem; color: rgba(255,255,255,0.6); } .zz-pz-sidebar__user { display: flex; align-items: center; gap: var(--zz-sp-3); padding: var(--zz-sp-3); background: rgba(255,255,255,0.05); border-radius: var(--zz-radius); } .zz-pz-sidebar__avatar, .zz-pz-sidebar__initials { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; object-fit: cover; } .zz-pz-sidebar__initials { background: var(--zz-yellow); color: var(--zz-navy); display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: var(--zz-font-serif); } .zz-pz-sidebar__userinfo strong { display: block; font-size: 0.95rem; color: #fff; } .zz-pz-sidebar__userinfo small { display: block; font-size: 0.78rem; color: rgba(255,255,255,0.55); word-break: break-all; } .zz-pz-sidebar__nav { display: flex; flex-direction: column; gap: 2px; } .zz-pz-sidebar__link { display: flex; align-items: center; gap: var(--zz-sp-3); padding: 12px 16px; color: rgba(255,255,255,0.85); border-radius: var(--zz-radius); text-decoration: none; transition: background 0.15s ease; font-weight: 600; } .zz-pz-sidebar__link:hover { background: rgba(255,255,255,0.08); color: #fff; } .zz-pz-sidebar__link.is-active { background: var(--zz-yellow); color: var(--zz-navy); } .zz-pz-sidebar__icon { font-size: 1.2rem; } .zz-pz-sidebar__footer { margin-top: auto; padding-top: var(--zz-sp-4); border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: var(--zz-sp-2); } .zz-pz-sidebar__logout, .zz-pz-sidebar__home { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 0.9rem; padding: 8px 12px; border-radius: var(--zz-radius); } .zz-pz-sidebar__logout:hover, .zz-pz-sidebar__home:hover { color: #fff; background: rgba(255,255,255,0.05); } /* --- Flash messages --- */ .zz-pz-flash { padding: 14px 18px; border-radius: var(--zz-radius); margin-bottom: var(--zz-sp-5); font-weight: 600; } .zz-pz-flash--ok { background: #e7f5ed; color: #186632; border-left: 4px solid #2e9d4f; } .zz-pz-flash--err { background: #fdecec; color: #8c1f1f; border-left: 4px solid #d23030; } /* --- Page heads --- */ .zz-pz-page-head { margin-bottom: var(--zz-sp-6); display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--zz-sp-3); } .zz-pz-page-head h1 { font-family: var(--zz-font-serif); color: var(--zz-navy); font-size: 2rem; margin: 0; } .zz-pz-page-head p { color: var(--zz-muted); margin: 0; flex-basis: 100%; } .zz-pz-back { display: inline-block; color: var(--zz-muted); text-decoration: none; font-size: 0.9rem; flex-basis: 100%; margin-bottom: var(--zz-sp-2); } .zz-pz-back:hover { color: var(--zz-navy); } /* --- Greeting --- */ .zz-pz-greeting { margin-bottom: var(--zz-sp-6); } .zz-pz-greeting h1 { font-family: var(--zz-font-serif); color: var(--zz-navy); font-size: 2.25rem; margin: 0; } .zz-pz-greeting h1 span { color: var(--zz-yellow); } .zz-pz-greeting p { color: var(--zz-muted); margin: var(--zz-sp-1) 0 0; } /* --- Next rejs (big card) --- */ .zz-pz-next-rejs { background: linear-gradient(135deg, var(--zz-navy) 0%, #143557 100%); color: #fff; padding: var(--zz-sp-6); border-radius: var(--zz-radius-lg); margin-bottom: var(--zz-sp-6); position: relative; overflow: hidden; } .zz-pz-next-rejs::before { content: '⛵'; position: absolute; font-size: 200px; right: -40px; bottom: -60px; opacity: 0.08; } .zz-pz-next-rejs__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--zz-sp-3); } .zz-pz-next-rejs__head small { color: var(--zz-yellow); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 0.8rem; } .zz-pz-next-rejs__countdown { background: var(--zz-yellow); color: var(--zz-navy); padding: 6px 14px; border-radius: 999px; font-weight: 800; font-size: 0.85rem; } .zz-pz-next-rejs__title { font-family: var(--zz-font-serif); font-size: 1.8rem; margin: 0 0 var(--zz-sp-3); color: #fff; } .zz-pz-next-rejs__meta { display: flex; gap: var(--zz-sp-4); flex-wrap: wrap; color: rgba(255,255,255,0.85); margin-bottom: var(--zz-sp-4); } .zz-pz-next-rejs__crew { margin: var(--zz-sp-4) 0; padding: var(--zz-sp-3); background: rgba(255,255,255,0.08); border-radius: var(--zz-radius); } .zz-pz-next-rejs__crew small { color: rgba(255,255,255,0.65); display: block; margin-bottom: var(--zz-sp-2); } .zz-pz-next-rejs__actions { display: flex; gap: var(--zz-sp-2); flex-wrap: wrap; position: relative; z-index: 1; } .zz-pz-next-rejs__actions .zz-btn--ghost { color: #fff; border-color: rgba(255,255,255,0.4); } .zz-pz-next-rejs__actions .zz-btn--ghost:hover { background: rgba(255,255,255,0.1); } /* --- Crew chips --- */ .zz-pz-crew { display: flex; gap: 6px; flex-wrap: wrap; } .zz-pz-crew__chip { width: 36px; height: 36px; border-radius: 50%; background: var(--zz-yellow); color: var(--zz-navy); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8rem; font-family: var(--zz-font-serif); } .zz-pz-crew__more { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; } /* --- Stats --- */ .zz-pz-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--zz-sp-3); margin-bottom: var(--zz-sp-6); } .zz-pz-stat { background: #fff; padding: var(--zz-sp-4); border-radius: var(--zz-radius); text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .zz-pz-stat strong { display: block; font-family: var(--zz-font-serif); font-size: 2.25rem; color: var(--zz-navy); line-height: 1; } .zz-pz-stat small { display: block; color: var(--zz-muted); margin-top: var(--zz-sp-1); font-size: 0.85rem; } /* --- Quick actions --- */ .zz-pz-quick { margin-bottom: var(--zz-sp-6); } .zz-pz-quick h3 { font-family: var(--zz-font-serif); color: var(--zz-navy); margin: 0 0 var(--zz-sp-3); } .zz-pz-quick__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--zz-sp-3); } .zz-pz-quick__tile { background: #fff; padding: var(--zz-sp-4); border-radius: var(--zz-radius); text-decoration: none; color: var(--zz-navy); box-shadow: 0 1px 3px rgba(0,0,0,0.04); transition: transform 0.15s ease, box-shadow 0.15s ease; display: block; } .zz-pz-quick__tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); } .zz-pz-quick__tile > span { font-size: 1.6rem; display: block; } .zz-pz-quick__tile strong { display: block; margin: 8px 0 4px; } .zz-pz-quick__tile small { color: var(--zz-muted); font-size: 0.85rem; } /* --- Empty states --- */ .zz-pz-empty { background: #fff; padding: var(--zz-sp-7) var(--zz-sp-5); border-radius: var(--zz-radius-lg); text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .zz-pz-empty h2 { font-family: var(--zz-font-serif); color: var(--zz-navy); margin: 0 0 var(--zz-sp-2); } .zz-pz-empty p { color: var(--zz-muted); margin: 0 0 var(--zz-sp-4); } /* --- Tabs --- */ .zz-pz-tabs { display: flex; gap: var(--zz-sp-1); background: #fff; padding: 6px; border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .zz-pz-tab { padding: 8px 18px; border-radius: 999px; text-decoration: none; color: var(--zz-muted); font-weight: 600; font-size: 0.9rem; } .zz-pz-tab span { display: inline-block; margin-left: 6px; background: #eef0f3; color: var(--zz-muted); border-radius: 999px; padding: 1px 8px; font-size: 0.75rem; } .zz-pz-tab.is-active { background: var(--zz-navy); color: #fff; } .zz-pz-tab.is-active span { background: var(--zz-yellow); color: var(--zz-navy); } /* --- Rejs list --- */ .zz-pz-rejs-list { display: flex; flex-direction: column; gap: var(--zz-sp-3); } .zz-pz-rejs-card { background: #fff; border-radius: var(--zz-radius); padding: var(--zz-sp-3) var(--zz-sp-4); display: grid; grid-template-columns: 80px 1fr auto; gap: var(--zz-sp-4); align-items: center; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .zz-pz-rejs-card__date { text-align: center; background: var(--zz-sand); padding: 10px; border-radius: var(--zz-radius); } .zz-pz-rejs-card__date strong { display: block; font-family: var(--zz-font-serif); font-size: 1.8rem; color: var(--zz-navy); line-height: 1; } .zz-pz-rejs-card__date small { color: var(--zz-muted); font-size: 0.75rem; text-transform: uppercase; } .zz-pz-rejs-card__row { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--zz-sp-2); margin-bottom: var(--zz-sp-1); } .zz-pz-rejs-card__row h3 { font-family: var(--zz-font-serif); color: var(--zz-navy); margin: 0; font-size: 1.2rem; } .zz-pz-rejs-card__meta { display: flex; gap: var(--zz-sp-3); flex-wrap: wrap; color: var(--zz-muted); font-size: 0.9rem; } /* --- Status pills --- */ .zz-pz-status { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .zz-pz-status--ok { background: #e7f5ed; color: #186632; } .zz-pz-status--warn { background: #fff5d6; color: #946100; } .zz-pz-status--err { background: #fdecec; color: #8c1f1f; } /* --- Rejs detail --- */ .zz-pz-rejs-detail { display: grid; grid-template-columns: 1fr 320px; gap: var(--zz-sp-5); } .zz-pz-rejs-detail__main { display: flex; flex-direction: column; gap: var(--zz-sp-5); } .zz-pz-rejs-detail__when { background: #fff; border-radius: var(--zz-radius); padding: var(--zz-sp-4); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--zz-sp-3); box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .zz-pz-rejs-detail__when small { display: block; color: var(--zz-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1px; } .zz-pz-rejs-detail__when strong { display: block; color: var(--zz-navy); font-weight: 700; margin-top: 4px; } .zz-pz-rejs-detail__location, .zz-pz-rejs-detail__desc, .zz-pz-rejs-detail__custom { background: #fff; padding: var(--zz-sp-5); border-radius: var(--zz-radius); box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .zz-pz-rejs-detail__location h3, .zz-pz-rejs-detail__desc h3, .zz-pz-rejs-detail__custom h3 { font-family: var(--zz-font-serif); color: var(--zz-navy); margin: 0 0 var(--zz-sp-3); } .zz-pz-rejs-detail__custom dl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--zz-sp-2) var(--zz-sp-4); } .zz-pz-rejs-detail__custom dt { color: var(--zz-muted); font-size: 0.85rem; } .zz-pz-rejs-detail__custom dd { color: var(--zz-navy); margin: 0; font-weight: 600; } .zz-pz-rejs-detail__side { display: flex; flex-direction: column; gap: var(--zz-sp-3); } .zz-pz-side-card { background: #fff; padding: var(--zz-sp-4); border-radius: var(--zz-radius); box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .zz-pz-side-card h3 { font-family: var(--zz-font-serif); color: var(--zz-navy); font-size: 1rem; margin: 0 0 var(--zz-sp-3); } .zz-pz-side-card__big { font-family: var(--zz-font-serif); font-size: 2rem; color: var(--zz-navy); font-weight: 800; } .zz-pz-mates { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--zz-sp-2); } .zz-pz-mates li { display: flex; align-items: center; gap: var(--zz-sp-2); color: var(--zz-navy); } .zz-pz-mates__me { font-weight: 700; } /* --- Pakiety --- */ .zz-pz-pkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--zz-sp-4); } .zz-pz-pkg-card { background: #fff; border-radius: var(--zz-radius-lg); padding: var(--zz-sp-5); border-top: 4px solid var(--pkg-color, var(--zz-yellow)); box-shadow: 0 1px 3px rgba(0,0,0,0.04); display: flex; flex-direction: column; gap: var(--zz-sp-3); } .zz-pz-pkg-card__head h3 { font-family: var(--zz-font-serif); color: var(--zz-navy); margin: 0 0 4px; } .zz-pz-pkg-card__head small { color: var(--zz-muted); font-size: 0.85rem; } .zz-pz-pkg-card__progress { display: flex; align-items: center; gap: var(--zz-sp-3); } .zz-pz-pkg-card__bar { flex: 1; height: 10px; background: #eef0f3; border-radius: 999px; overflow: hidden; } .zz-pz-pkg-card__bar span { display: block; height: 100%; background: var(--pkg-color, var(--zz-yellow)); } .zz-pz-pkg-card__num strong { font-family: var(--zz-font-serif); font-size: 1.5rem; color: var(--zz-navy); display: block; line-height: 1; } .zz-pz-pkg-card__num small { color: var(--zz-muted); font-size: 0.8rem; } .zz-pz-pkg-card__meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--zz-sp-1) var(--zz-sp-3); margin: 0; } .zz-pz-pkg-card__meta dt { color: var(--zz-muted); font-size: 0.8rem; margin: 0; } .zz-pz-pkg-card__meta dd { color: var(--zz-navy); font-weight: 700; margin: 0; } .zz-pz-pkg-card__desc { color: var(--zz-muted); font-size: 0.9rem; margin: 0; } /* Stany czasowe pakietu */ .zz-pz-pkg-card.is-warn { border-top-color: #f5b301; } .zz-pz-pkg-card.is-urgent { border-top-color: #e07b00; } .zz-pz-pkg-card.is-expired { border-top-color: #d23030; opacity: 0.7; } /* Countdown ważności */ .zz-pz-pkg-card__expiry { background: #f7f9fc; padding: var(--zz-sp-3); border-radius: var(--zz-radius); display: flex; justify-content: space-between; align-items: center; gap: var(--zz-sp-3); } .zz-pz-pkg-card__expiry small { color: var(--zz-muted); font-size: 0.78rem; display: block; } .zz-pz-pkg-card__expiry strong { color: var(--zz-navy); display: block; } .zz-pz-pkg-card__days { text-align: right; } .zz-pz-pkg-card__days strong { font-family: var(--zz-font-serif); font-size: 1.3rem; line-height: 1; } .zz-pz-pkg-card__expiry.is-warn { background: #fff5d6; } .zz-pz-pkg-card__expiry.is-warn .zz-pz-pkg-card__days strong { color: #946100; } .zz-pz-pkg-card__expiry.is-urgent { background: #ffe6d4; } .zz-pz-pkg-card__expiry.is-urgent .zz-pz-pkg-card__days strong { color: #a14400; } .zz-pz-pkg-card__expiry.is-expired { background: #fdecec; } .zz-pz-pkg-card__expiry.is-expired .zz-pz-pkg-card__days strong { color: #8c1f1f; } /* Stany sesji */ .zz-pz-pkg-card__progress.is-low .zz-pz-pkg-card__bar span { background: #f5b301; } .zz-pz-pkg-card__progress.is-empty .zz-pz-pkg-card__bar span { background: #d23030; } .zz-pz-pkg-card__progress.is-empty .zz-pz-pkg-card__num strong { color: #8c1f1f; } /* Lista usług w pakiecie */ .zz-pz-pkg-card__services > small { display: block; color: var(--zz-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .zz-pz-pkg-card__chips { display: flex; flex-wrap: wrap; gap: 6px; } .zz-pz-pkg-chip { display: inline-block; padding: 4px 10px; background: #f0f2f5; color: var(--zz-navy); border-radius: 999px; font-size: 0.82rem; font-weight: 600; border-left: 3px solid var(--chip-color, var(--zz-yellow)); } /* Stan wykorzystany/wygasły */ .zz-pz-pkg-card__exhausted { text-align: center; padding: var(--zz-sp-3); background: #e7f5ed; color: #186632; border-radius: var(--zz-radius); font-weight: 600; font-size: 0.95rem; } .zz-pz-pkg-card__exhausted--err { background: #fdecec; color: #8c1f1f; } /* Info box pod listą pakietów */ .zz-pz-pkg-info { background: #fff; padding: var(--zz-sp-5); border-radius: var(--zz-radius-lg); margin-top: var(--zz-sp-5); box-shadow: 0 1px 3px rgba(0,0,0,0.04); border-left: 4px solid var(--zz-yellow); } .zz-pz-pkg-info h3 { font-family: var(--zz-font-serif); color: var(--zz-navy); margin: 0 0 var(--zz-sp-3); font-size: 1.05rem; } .zz-pz-pkg-info ol { margin: 0; padding-left: var(--zz-sp-5); color: var(--zz-muted); font-size: 0.92rem; } .zz-pz-pkg-info ol li { margin-bottom: 6px; line-height: 1.55; } .zz-pz-pkg-info ol li strong { color: var(--zz-navy); } /* Banner pakietu na /wszystkie-rejsy/?pkg=ID */ .zz-pkg-banner-wrap { padding: var(--zz-sp-5) 0 0; } .zz-pkg-banner { background: linear-gradient(135deg, #fff5d6 0%, #fff8e3 100%); border-left: 6px solid var(--zz-yellow); border-radius: var(--zz-radius-lg); padding: var(--zz-sp-5); display: grid; grid-template-columns: 56px 1fr auto; gap: var(--zz-sp-4); align-items: start; } .zz-pkg-banner__icon { font-size: 2.4rem; line-height: 1; background: var(--zz-yellow); border-radius: 50%; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; } .zz-pkg-banner__body strong { font-family: var(--zz-font-serif); color: var(--zz-navy); font-size: 1.2rem; display: block; margin-bottom: 6px; } .zz-pkg-banner__body p { color: var(--zz-navy); margin: 0 0 var(--zz-sp-3); line-height: 1.55; } .zz-pkg-banner__chips { display: flex; align-items: center; gap: var(--zz-sp-2); flex-wrap: wrap; } .zz-pkg-banner__chips small { color: #946100; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.78rem; } .zz-pkg-chip { display: inline-block; padding: 4px 12px; background: #fff; color: var(--zz-navy); border-radius: 999px; font-size: 0.85rem; font-weight: 600; border: 1px solid rgba(245,179,1,0.4); } .zz-pkg-banner__back { color: var(--zz-navy); font-weight: 600; text-decoration: none; font-size: 0.9rem; white-space: nowrap; align-self: center; } .zz-pkg-banner__back:hover { text-decoration: underline; } @media (max-width: 768px) { .zz-pkg-banner { grid-template-columns: 1fr; text-align: center; } .zz-pkg-banner__icon { margin: 0 auto; } } /* --- Dokumenty --- */ .zz-pz-doc-form-wrap { background: #fff; padding: var(--zz-sp-5); border-radius: var(--zz-radius-lg); margin-bottom: var(--zz-sp-6); box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .zz-pz-doc-form h2 { font-family: var(--zz-font-serif); color: var(--zz-navy); margin: 0 0 var(--zz-sp-4); } .zz-pz-doc-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--zz-sp-3); margin-bottom: var(--zz-sp-4); } .zz-pz-doc-form__field { display: block; } .zz-pz-doc-form__field > span { display: block; font-weight: 700; font-size: 0.85rem; color: var(--zz-navy); margin-bottom: 6px; } .zz-pz-doc-form__field input, .zz-pz-doc-form__field select, .zz-pz-doc-form__field textarea { width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: var(--zz-radius); font-family: inherit; font-size: 0.95rem; background: #fafafa; } .zz-pz-doc-form__field--full { grid-column: 1 / -1; } .zz-pz-doc-form__field small { color: var(--zz-muted); font-size: 0.8rem; margin-top: 4px; display: block; } .zz-pz-doc-form__actions { display: flex; gap: var(--zz-sp-2); } .zz-pz-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--zz-sp-3); } .zz-pz-doc-card { background: #fff; border-radius: var(--zz-radius); padding: var(--zz-sp-4); border-left: 4px solid #2e9d4f; box-shadow: 0 1px 3px rgba(0,0,0,0.04); display: flex; flex-direction: column; gap: var(--zz-sp-3); } .zz-pz-doc-card.is-warn { border-left-color: #f5b301; } .zz-pz-doc-card.is-expired { border-left-color: #d23030; opacity: 0.85; } .zz-pz-doc-card__head small { color: var(--zz-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1px; } .zz-pz-doc-card__head h3 { font-family: var(--zz-font-serif); color: var(--zz-navy); margin: 4px 0 0; font-size: 1.1rem; } .zz-pz-doc-card__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px var(--zz-sp-3); font-size: 0.9rem; margin: 0; } .zz-pz-doc-card__meta dt { color: var(--zz-muted); margin: 0; } .zz-pz-doc-card__meta dd { color: var(--zz-navy); margin: 0; font-weight: 600; } .zz-pz-doc-card__notes { color: var(--zz-muted); font-size: 0.88rem; margin: 0; font-style: italic; } .zz-pz-doc-card__actions { display: flex; gap: var(--zz-sp-2); align-items: center; flex-wrap: wrap; margin-top: auto; } .zz-pz-doc-card__delete { margin: 0; display: inline; } .zz-pz-doc-card__del-btn { background: transparent; border: 0; color: #d23030; font-weight: 600; cursor: pointer; padding: 6px 10px; font-size: 0.9rem; } .zz-pz-doc-card__del-btn:hover { text-decoration: underline; } .zz-pz-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; margin-left: 6px; } .zz-pz-badge--warn { background: #fff5d6; color: #946100; } .zz-pz-badge--err { background: #fdecec; color: #8c1f1f; } /* --- Profil --- */ .zz-pz-profile-form { display: flex; flex-direction: column; gap: var(--zz-sp-4); } .zz-pz-profile-block { background: #fff; padding: var(--zz-sp-5); border-radius: var(--zz-radius); box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .zz-pz-profile-block h2 { font-family: var(--zz-font-serif); color: var(--zz-navy); margin: 0 0 var(--zz-sp-2); font-size: 1.2rem; } .zz-pz-profile-block > p { color: var(--zz-muted); margin: 0 0 var(--zz-sp-4); font-size: 0.9rem; } .zz-pz-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--zz-sp-3); } .zz-pz-profile-field span { display: block; font-weight: 700; font-size: 0.85rem; color: var(--zz-navy); margin-bottom: 6px; } .zz-pz-profile-field input, .zz-pz-profile-field textarea, .zz-pz-profile-field select { width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: var(--zz-radius); font-family: inherit; font-size: 0.95rem; background: #fafafa; } .zz-pz-profile-field--full { grid-column: 1 / -1; } .zz-pz-profile-form__actions { padding: var(--zz-sp-3) 0; display: flex; justify-content: flex-end; } /* --- Buttons modyfikatory --- */ .zz-btn--block { display: block; width: 100%; text-align: center; } /* --- Responsive --- */ @media (max-width: 980px) { .zz-pz-layout { grid-template-columns: 1fr; } .zz-pz-sidebar { position: relative; height: auto; flex-direction: row; overflow-x: auto; gap: var(--zz-sp-3); align-items: center; } .zz-pz-sidebar__brand { padding-bottom: 0; border-bottom: 0; border-right: 1px solid rgba(255,255,255,0.1); padding-right: var(--zz-sp-3); } .zz-pz-sidebar__user { display: none; } .zz-pz-sidebar__nav { flex-direction: row; flex: 1; } .zz-pz-sidebar__link { padding: 8px 12px; white-space: nowrap; } .zz-pz-sidebar__link span:last-child { display: none; } .zz-pz-sidebar__icon { font-size: 1.4rem; } .zz-pz-sidebar__link.is-active span:last-child { display: inline; } .zz-pz-sidebar__footer { flex-direction: row; border-top: 0; border-left: 1px solid rgba(255,255,255,0.1); padding-left: var(--zz-sp-3); padding-top: 0; } .zz-pz-content { padding: var(--zz-sp-5) var(--zz-sp-4); } .zz-pz-rejs-detail { grid-template-columns: 1fr; } .zz-pz-doc-form__grid, .zz-pz-profile-grid { grid-template-columns: 1fr; } .zz-pz-rejs-detail__when { grid-template-columns: 1fr; } } @media (max-width: 560px) { .zz-pz-rejs-card { grid-template-columns: 60px 1fr; } .zz-pz-rejs-card__actions { grid-column: 1 / -1; } .zz-pz-greeting h1 { font-size: 1.6rem; } .zz-pz-next-rejs__title { font-size: 1.4rem; } .zz-pz-next-rejs__meta { gap: var(--zz-sp-2); font-size: 0.9rem; } } /* ========================================================= 25. Podcast ========================================================= */ /* HERO */ .zz-pod-hero { padding: var(--zz-sp-12) 0; } .zz-pod-hero__grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--zz-sp-7); align-items: center; } .zz-pod-hero__title { color: var(--zz-yellow); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1; margin: var(--zz-sp-3) 0; } .zz-pod-hero__tagline { color: var(--zz-light); font-size: 1.15rem; line-height: 1.6; max-width: 600px; } .zz-pod-hero__cover { border-radius: var(--zz-radius-lg); overflow: hidden; box-shadow: 0 25px 60px -10px rgba(0,0,0,0.5); aspect-ratio: 1; background: rgba(255,255,255,0.05); } .zz-pod-hero__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .zz-pod-hero__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 8rem; color: var(--zz-yellow); } /* PLATFORMS GRID */ .zz-pod-platforms { background: var(--zz-sand); } .zz-pod-platforms__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--zz-sp-3); margin-top: var(--zz-sp-6); } .zz-pod-platform { background: #fff; border-radius: var(--zz-radius); padding: var(--zz-sp-4) var(--zz-sp-5); display: flex; align-items: center; gap: var(--zz-sp-3); text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,0.04); border-left: 4px solid var(--platform-color, var(--zz-yellow)); transition: transform 0.15s ease, box-shadow 0.15s ease; color: var(--zz-navy); } .zz-pod-platform:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); } .zz-pod-platform__icon { font-size: 1.8rem; flex-shrink: 0; } .zz-pod-platform__name { font-weight: 700; flex: 1; } .zz-pod-platform__cta { color: var(--zz-muted); font-size: 0.85rem; font-weight: 600; } /* TAG */ .zz-pod-tag { display: inline-block; background: var(--zz-yellow); color: var(--zz-navy); padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.5px; } /* LATEST EPISODE */ .zz-pod-latest__card { background: #fff; border-radius: var(--zz-radius-lg); overflow: hidden; display: grid; grid-template-columns: 280px 1fr; gap: var(--zz-sp-6); margin-top: var(--zz-sp-5); box-shadow: 0 8px 30px rgba(0,0,0,0.06); } .zz-pod-latest__cover { display: block; line-height: 0; } .zz-pod-latest__cover img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 1; } .zz-pod-latest__body { padding: var(--zz-sp-6) var(--zz-sp-6) var(--zz-sp-6) 0; } .zz-pod-latest__meta { display: flex; gap: var(--zz-sp-3); align-items: center; margin-bottom: var(--zz-sp-2); color: var(--zz-muted); font-size: 0.9rem; } .zz-pod-latest__body h3 { font-family: var(--zz-font-serif); font-size: 1.7rem; margin: 0 0 var(--zz-sp-3); } .zz-pod-latest__body h3 a { color: var(--zz-navy); text-decoration: none; } .zz-pod-latest__body h3 a:hover { color: var(--zz-yellow); } .zz-pod-latest__guest { color: var(--zz-navy); margin: 0 0 var(--zz-sp-3); } .zz-pod-latest__guest strong { color: var(--zz-navy); } .zz-pod-latest__excerpt { color: var(--zz-muted); margin: 0 0 var(--zz-sp-4); line-height: 1.6; } .zz-pod-latest__player { margin: var(--zz-sp-4) 0; } .zz-pod-iframe { border: 0; border-radius: 12px; display: block; } .zz-pod-yt-wrap { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #000; } .zz-pod-yt { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* ARCHIVE GRID */ .zz-pod-archive__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--zz-sp-4); margin-top: var(--zz-sp-5); } .zz-pod-card { background: #fff; border-radius: var(--zz-radius); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); display: flex; flex-direction: column; transition: transform 0.15s ease, box-shadow 0.15s ease; } .zz-pod-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); } .zz-pod-card__cover { display: block; line-height: 0; aspect-ratio: 16/9; background: var(--zz-sand); position: relative; } .zz-pod-card__cover img { width: 100%; height: 100%; object-fit: cover; } .zz-pod-card__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--zz-yellow); } .zz-pod-card__body { padding: var(--zz-sp-4); } .zz-pod-card__meta { display: flex; gap: var(--zz-sp-2); align-items: center; font-size: 0.85rem; color: var(--zz-muted); margin-bottom: var(--zz-sp-2); } .zz-pod-card__body h3 { font-family: var(--zz-font-serif); font-size: 1.15rem; margin: 0 0 var(--zz-sp-2); line-height: 1.3; } .zz-pod-card__body h3 a { color: var(--zz-navy); text-decoration: none; } .zz-pod-card__body h3 a:hover { color: var(--zz-yellow); } .zz-pod-card__guest { color: var(--zz-navy); font-size: 0.9rem; font-weight: 600; margin: 0 0 var(--zz-sp-2); } .zz-pod-card__excerpt { color: var(--zz-muted); font-size: 0.88rem; margin: 0; line-height: 1.55; } .zz-pod-pagination { margin-top: var(--zz-sp-6); display: flex; justify-content: center; } .zz-pod-pagination ul { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0; } .zz-pod-pagination .page-numbers { display: inline-block; padding: 8px 14px; border-radius: var(--zz-radius); background: #fff; color: var(--zz-navy); text-decoration: none; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .zz-pod-pagination .page-numbers.current { background: var(--zz-navy); color: #fff; } .zz-pod-pagination .page-numbers:hover { background: var(--zz-yellow); color: var(--zz-navy); } .zz-pod-empty { background: var(--zz-sand); padding: var(--zz-sp-7); border-radius: var(--zz-radius-lg); text-align: center; } .zz-pod-empty h3 { color: var(--zz-navy); font-family: var(--zz-font-serif); margin: 0 0 var(--zz-sp-2); } .zz-pod-empty p { color: var(--zz-muted); margin: 0; } /* ABOUT */ .zz-pod-about { background: var(--zz-navy); } .zz-pod-about__inner { max-width: 760px; margin: 0 auto; text-align: center; } .zz-pod-about h2 { font-family: var(--zz-font-serif); color: var(--zz-yellow); font-size: 2rem; margin: 0 0 var(--zz-sp-4); } .zz-pod-about__body { color: var(--zz-light); font-size: 1.1rem; line-height: 1.7; } .zz-pod-about__body p { margin: 0 0 var(--zz-sp-3); } /* FINAL CTA */ .zz-pod-final { padding: var(--zz-sp-10) 0; } /* ========================================================= 25b. SINGLE EPISODE ========================================================= */ .zz-pod-single-hero { padding: var(--zz-sp-8) 0; } .zz-pod-single-hero__back { color: var(--zz-yellow); text-decoration: none; font-weight: 600; display: inline-block; margin-bottom: var(--zz-sp-5); } .zz-pod-single-hero__back:hover { color: #fff; } .zz-pod-single-hero__grid { display: grid; grid-template-columns: 320px 1fr; gap: var(--zz-sp-6); align-items: center; } .zz-pod-single-hero__cover { aspect-ratio: 1; border-radius: var(--zz-radius-lg); overflow: hidden; box-shadow: 0 25px 60px -10px rgba(0,0,0,0.5); background: rgba(255,255,255,0.05); position: relative; } .zz-pod-single-hero__cover img { width: 100%; height: 100%; object-fit: cover; } .zz-pod-single-hero__meta { display: flex; gap: var(--zz-sp-3); align-items: center; color: var(--zz-light); font-size: 0.95rem; margin-bottom: var(--zz-sp-3); } .zz-pod-single-hero__title { color: var(--zz-yellow); font-size: clamp(1.8rem, 3.5vw, 2.8rem); margin: 0 0 var(--zz-sp-3); line-height: 1.15; } .zz-pod-single-hero__guest { color: var(--zz-light); margin: 0 0 var(--zz-sp-3); font-size: 1.05rem; } .zz-pod-single-hero__guest strong { color: var(--zz-yellow); } .zz-pod-single-hero__excerpt { color: var(--zz-light); font-size: 1.1rem; line-height: 1.6; margin: 0; } /* PLAYER */ .zz-pod-single-player { background: var(--zz-sand); padding: var(--zz-sp-6) 0; } .zz-pod-single-player__inner { background: #fff; padding: var(--zz-sp-4); border-radius: var(--zz-radius-lg); box-shadow: 0 8px 30px rgba(0,0,0,0.06); } .zz-pod-single-player__missing { text-align: center; color: var(--zz-muted); margin: 0; padding: var(--zz-sp-4); } .zz-pod-single-player__other { margin-top: var(--zz-sp-3); padding-top: var(--zz-sp-3); border-top: 1px solid #eef0f3; display: flex; gap: var(--zz-sp-3); align-items: center; flex-wrap: wrap; } .zz-pod-single-player__other small { color: var(--zz-muted); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .zz-pod-single-player__other a { color: var(--zz-navy); text-decoration: none; font-weight: 600; padding: 6px 14px; border-radius: 999px; background: var(--zz-sand); } .zz-pod-single-player__other a:hover { background: var(--zz-yellow); } /* BODY 2-col */ .zz-pod-single-body__grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--zz-sp-7); margin-top: var(--zz-sp-3); } .zz-pod-single-body__main h2 { font-family: var(--zz-font-serif); color: var(--zz-navy); font-size: 1.5rem; margin: var(--zz-sp-6) 0 var(--zz-sp-3); } .zz-pod-single-body__main h2:first-child { margin-top: 0; } .zz-pod-single-body__desc { color: var(--zz-text); line-height: 1.7; font-size: 1.05rem; } .zz-pod-single-body__topics ul, .zz-pod-single-body__links ul { list-style: none; padding: 0; margin: 0; } .zz-pod-single-body__topics li { padding: 10px 0 10px 32px; position: relative; border-bottom: 1px solid #eef0f3; } .zz-pod-single-body__topics li::before { content: '⚓'; position: absolute; left: 0; top: 10px; color: var(--zz-yellow); } .zz-pod-single-body__links li { padding: 8px 0; } .zz-pod-single-body__links a { color: var(--zz-navy); font-weight: 600; text-decoration: none; } .zz-pod-single-body__links a:hover { color: var(--zz-yellow); text-decoration: underline; } .zz-pod-single-body__transcript { margin-top: var(--zz-sp-6); background: var(--zz-sand); border-radius: var(--zz-radius); overflow: hidden; } .zz-pod-single-body__transcript summary { padding: var(--zz-sp-4) var(--zz-sp-5); cursor: pointer; font-weight: 700; color: var(--zz-navy); font-family: var(--zz-font-serif); font-size: 1.1rem; } .zz-pod-single-body__transcript summary:hover { background: rgba(245,179,1,0.1); } .zz-pod-single-body__transcript-body { padding: var(--zz-sp-3) var(--zz-sp-5) var(--zz-sp-5); background: #fff; color: var(--zz-text); line-height: 1.7; } .zz-pod-single-body__side { display: flex; flex-direction: column; gap: var(--zz-sp-4); } .zz-pod-side-card { background: #fff; padding: var(--zz-sp-4); border-radius: var(--zz-radius); box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .zz-pod-side-card h3 { font-family: var(--zz-font-serif); color: var(--zz-navy); font-size: 1rem; margin: 0 0 var(--zz-sp-3); } .zz-pod-side-card > strong { display: block; color: var(--zz-navy); font-size: 1.05rem; margin-bottom: var(--zz-sp-2); } .zz-pod-side-card > p { color: var(--zz-muted); font-size: 0.92rem; margin: 0; line-height: 1.6; } .zz-pod-share { display: flex; flex-direction: column; gap: 8px; } .zz-pod-share a { color: var(--zz-navy); text-decoration: none; font-weight: 600; padding: 8px 14px; background: var(--zz-sand); border-radius: var(--zz-radius); font-size: 0.92rem; } .zz-pod-share a:hover { background: var(--zz-yellow); } .zz-pod-related { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--zz-sp-2); } .zz-pod-related a { display: block; padding: 10px 12px; border-radius: var(--zz-radius); text-decoration: none; background: var(--zz-sand); color: var(--zz-navy); transition: background 0.15s ease; } .zz-pod-related a:hover { background: var(--zz-yellow); } .zz-pod-related strong { display: block; font-size: 0.95rem; line-height: 1.3; margin-bottom: 2px; } .zz-pod-related small { color: var(--zz-muted); font-size: 0.8rem; } /* RESPONSIVE — Podcast */ @media (max-width: 880px) { .zz-pod-hero__grid, .zz-pod-single-hero__grid, .zz-pod-single-body__grid, .zz-pod-latest__card { grid-template-columns: 1fr; } .zz-pod-hero__cover, .zz-pod-single-hero__cover { max-width: 320px; margin: 0 auto; } .zz-pod-latest__cover img { aspect-ratio: 16/9; } .zz-pod-latest__body { padding: var(--zz-sp-5); } } /* ═══════════════════════════════════════════════════════════════════════ SEKCJA 26 · Train-to-Sail (wisla-produkt) — timeline 4 kart + callout ═══════════════════════════════════════════════════════════════════════ */ .zz-section--ink.zz-tts { background: var(--zz-navy); color: #fff; background-image: radial-gradient(ellipse at top, rgba(255,255,255,.04), transparent 60%), linear-gradient(180deg, var(--zz-navy), #06182b); } .zz-tts .zz-eyebrow, .zz-tts__eyebrow { display: inline-block; background: var(--zz-accent); color: var(--zz-navy); padding: 6px 16px; border-radius: 999px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: var(--zz-fs-xs); } .zz-tts__title { color: #fff; font-family: var(--zz-font-display, Georgia, serif); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.4rem); margin: var(--zz-sp-4) 0 var(--zz-sp-2); } .zz-tts__lead { max-width: 720px; margin: var(--zz-sp-4) auto 0; color: rgba(255,255,255,.78); font-size: var(--zz-fs-base); line-height: 1.6; } .zz-tts .zz-divider--accent { width: 60px; border: 0; border-top: 3px solid var(--zz-accent); margin: var(--zz-sp-3) auto; } /* — Grid 4 kart — */ .zz-tts__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--zz-sp-4); margin-top: var(--zz-sp-8); } @media (max-width: 980px) { .zz-tts__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .zz-tts__grid { grid-template-columns: 1fr; } } .zz-tts__card { position: relative; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--zz-radius-lg); padding: var(--zz-sp-6) var(--zz-sp-5); text-align: center; transition: transform .2s ease, border-color .2s ease; } .zz-tts__card:hover { transform: translateY(-2px); border-color: rgba(245,179,1,.4); } .zz-tts__arrow { position: absolute; top: var(--zz-sp-3); left: var(--zz-sp-3); color: var(--zz-accent); font-weight: 800; font-size: 1.2rem; line-height: 1; } .zz-tts__icon { font-size: 2rem; line-height: 1; margin-bottom: var(--zz-sp-3); } .zz-tts__time { display: inline-block; background: var(--zz-accent); color: var(--zz-navy); padding: 6px 18px; border-radius: 999px; font-weight: 800; font-size: var(--zz-fs-base); margin-bottom: var(--zz-sp-3); letter-spacing: .02em; } .zz-tts__name { color: #fff; font-size: var(--zz-fs-lg); font-weight: 800; margin: 0 0 var(--zz-sp-2); } .zz-tts__desc { color: rgba(255,255,255,.7); font-size: var(--zz-fs-sm); line-height: 1.55; margin: 0; } /* — Żółty callout — */ .zz-tts__callout { margin-top: var(--zz-sp-8); background: var(--zz-accent); color: var(--zz-navy); padding: var(--zz-sp-5) var(--zz-sp-6); border-radius: var(--zz-radius-lg); text-align: center; } .zz-tts__callout-line { margin: 0; font-size: var(--zz-fs-base); line-height: 1.5; } .zz-tts__callout-line--bold { font-weight: 800; font-size: var(--zz-fs-lg); margin-bottom: var(--zz-sp-1); } /* ═══════════════════════════════════════════════════════════════════════ SEKCJA 27 · Plan na dalej (wisla-produkt) — upsell do czarteru ═══════════════════════════════════════════════════════════════════════ */ .zz-section--ink.zz-pnd { background: var(--zz-navy); color: #fff; background-image: radial-gradient(ellipse at top right, rgba(245,179,1,.06), transparent 50%), linear-gradient(180deg, #06182b, var(--zz-navy)); } .zz-pnd__eyebrow { display: inline-block; background: var(--zz-accent); color: var(--zz-navy); padding: 6px 16px; border-radius: 999px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: var(--zz-fs-xs); } .zz-pnd__title { color: #fff; font-family: var(--zz-font-display, Georgia, serif); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.4rem); margin: var(--zz-sp-4) 0 var(--zz-sp-2); } .zz-pnd__lead { max-width: 720px; margin: var(--zz-sp-4) auto 0; color: rgba(255,255,255,.78); font-size: var(--zz-fs-base); line-height: 1.6; } .zz-pnd .zz-divider--accent { width: 60px; border: 0; border-top: 3px solid var(--zz-accent); margin: var(--zz-sp-3) auto; } /* — Grid: punkty po lewej, karta po prawej — */ .zz-pnd__grid { display: grid; grid-template-columns: 1fr 420px; gap: var(--zz-sp-10); margin-top: var(--zz-sp-8); align-items: start; } @media (max-width: 960px) { .zz-pnd__grid { grid-template-columns: 1fr; gap: var(--zz-sp-6); } } /* — Lewa kolumna: numerowane punkty — */ .zz-pnd__steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .zz-pnd__step { display: flex; gap: var(--zz-sp-4); align-items: flex-start; padding: var(--zz-sp-5) 0; border-bottom: 1px dashed rgba(255,255,255,.1); } .zz-pnd__step:last-child { border-bottom: 0; } .zz-pnd__num { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--zz-accent); color: var(--zz-navy); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--zz-fs-sm); } .zz-pnd__step-body { flex: 1; color: rgba(255,255,255,.85); font-size: var(--zz-fs-base); line-height: 1.55; } .zz-pnd__step-title { color: #fff; font-weight: 700; } .zz-pnd__step-desc { color: rgba(255,255,255,.7); } /* — Prawa kolumna: karta CTA — */ .zz-pnd__card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--zz-radius-lg); padding: var(--zz-sp-7) var(--zz-sp-6); text-align: center; } .zz-pnd__path-label { color: var(--zz-accent); font-size: var(--zz-fs-xs); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; margin-bottom: var(--zz-sp-3); } .zz-pnd__path { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: var(--zz-sp-5); } .zz-pnd__path-stage { padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.7); font-size: var(--zz-fs-xs); font-weight: 600; white-space: nowrap; } .zz-pnd__path-stage--active { background: var(--zz-accent); color: var(--zz-navy); border-color: var(--zz-accent); } .zz-pnd__path-sep { color: rgba(255,255,255,.4); align-self: center; } .zz-pnd__card-title { color: #fff; font-size: var(--zz-fs-lg); font-weight: 800; margin: 0 0 var(--zz-sp-3); } .zz-pnd__card-lead { color: rgba(255,255,255,.7); font-size: var(--zz-fs-sm); line-height: 1.55; margin: 0 0 var(--zz-sp-5); } .zz-pnd__cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--zz-sp-2); background: var(--zz-accent); color: var(--zz-navy) !important; font-weight: 800; font-size: var(--zz-fs-base); padding: 14px 28px; border-radius: var(--zz-radius-lg); text-decoration: none !important; transition: background .2s ease, transform .15s ease; width: 100%; box-sizing: border-box; } .zz-pnd__cta:hover { background: var(--zz-accent-2, #ffc20a); transform: translateY(-1px); } .zz-pnd__card-foot { margin: var(--zz-sp-4) 0 0; color: rgba(255,255,255,.5); font-size: var(--zz-fs-xs); line-height: 1.5; } .zz-pnd__card-foot a { color: var(--zz-accent); text-decoration: none; font-weight: 600; } .zz-pnd__card-foot a:hover { text-decoration: underline; } /* ═══════════════════════════════════════════════════════════════════════ SEKCJA 28 · Beta banner — pasek info nad headerem ═══════════════════════════════════════════════════════════════════════ */ .zz-beta-banner { background: var(--zz-accent); color: var(--zz-navy); border-bottom: 2px solid #d99c00; font-size: var(--zz-fs-sm); position: relative; z-index: 100; } .zz-beta-banner__inner { display: flex; align-items: center; gap: var(--zz-sp-3); padding: 10px var(--zz-sp-4); min-height: 44px; } .zz-beta-banner__icon { font-size: 1.1rem; line-height: 1; flex: 0 0 auto; } .zz-beta-banner__text { margin: 0; flex: 1; line-height: 1.4; } .zz-beta-banner__text strong { font-weight: 800; } .zz-beta-banner__text a { color: var(--zz-navy); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .zz-beta-banner__text a:hover { text-decoration: none; } .zz-beta-banner__close { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(10, 37, 64, 0.12); color: var(--zz-navy); font-size: 1.3rem; font-weight: 800; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease; padding: 0; } .zz-beta-banner__close:hover { background: rgba(10, 37, 64, 0.22); } .zz-beta-banner__close:focus-visible { outline: 2px solid var(--zz-navy); outline-offset: 2px; } @media (max-width: 600px) { .zz-beta-banner__inner { padding: 8px var(--zz-sp-3); gap: var(--zz-sp-2); } .zz-beta-banner__text { font-size: var(--zz-fs-xs); line-height: 1.35; } .zz-beta-banner__icon { display: none; } } /* ═══════════════════════════════════════════════════════════════════════ SEKCJA 29 · Amelia icons protection — nie psuć icon fontów Amelii ═══════════════════════════════════════════════════════════════════════ Amelia używa własnych icon fontów (amelia-icons, Element Plus icons). Nasze `font-family !important` na kontenerze .amelia-app-booking nadpisywało font ikonek → puste kwadraciki. Tu zabezpieczamy się że ikony Amelii zawsze mają revert font-family. ═══════════════════════════════════════════════════════════════════════ */ /* Nowa Amelia v3 (.amelia-v2-booking) + stary widget (.amelia-app-booking) */ .amelia-v2-booking [class^="am-icon"], .amelia-v2-booking [class*=" am-icon"], .amelia-v2-booking [class^="am-i-"], .amelia-v2-booking [class*=" am-i-"], .amelia-v2-booking .el-icon, .amelia-v2-booking i[class^="el-icon"], .amelia-v2-booking i[class*=" el-icon"], .amelia-app-booking [class^="am-icon"], .amelia-app-booking [class*=" am-icon"], .amelia-app-booking [class^="am-i-"], .amelia-app-booking [class*=" am-i-"], .amelia-app-booking .el-icon, .amelia-app-booking-customer [class^="am-icon"], .amelia-app-booking-customer [class^="am-i-"], .amelia-app-booking-customer .el-icon, .amelia-app-catalog [class^="am-icon"], .amelia-app-catalog [class^="am-i-"], .amelia-app-catalog .el-icon, #amelia-container [class^="am-icon"], #amelia-container [class*=" am-icon"], #amelia-container .el-icon { font-family: "amelia-icons", "Element Plus Icons", sans-serif !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Tekst Amelii — nasz font dla zwykłych elementów, BEZ !important żeby ikony wygrały explicit */ .amelia-v2-booking, .amelia-app-booking { font-family: var(--am-font-family, var(--zz-font-sans)); } /* ═══════════════════════════════════════════════════════════════════════ SEKCJA 30 · Rejs morski — sekcja „Treść" (post_content z edytora WP) ═══════════════════════════════════════════════════════════════════════ */ .zz-rs-content { background: var(--zz-white); padding: var(--zz-sp-12) 0; } .zz-rs-content__inner { max-width: 760px; margin: 0 auto; font-size: 1.075rem; line-height: 1.7; color: var(--zz-text); } .zz-rs-content__inner > * + * { margin-top: var(--zz-sp-4); } .zz-rs-content__inner h2 { font-family: var(--zz-font-serif); font-size: clamp(1.5rem, 2.5vw, 2rem); color: var(--zz-navy); margin-top: var(--zz-sp-8); margin-bottom: var(--zz-sp-3); line-height: 1.3; } .zz-rs-content__inner h3 { font-family: var(--zz-font-serif); font-size: 1.4rem; color: var(--zz-navy); margin-top: var(--zz-sp-6); margin-bottom: var(--zz-sp-3); } .zz-rs-content__inner h4 { font-size: 1.15rem; color: var(--zz-navy); margin-top: var(--zz-sp-5); margin-bottom: var(--zz-sp-2); font-weight: 800; } .zz-rs-content__inner p { margin: 0; } .zz-rs-content__inner ul, .zz-rs-content__inner ol { padding-left: var(--zz-sp-6); margin: var(--zz-sp-3) 0; } .zz-rs-content__inner li { margin-bottom: var(--zz-sp-2); } .zz-rs-content__inner ul li::marker { color: var(--zz-accent); } .zz-rs-content__inner a { color: var(--zz-navy); text-decoration: underline; text-decoration-color: var(--zz-accent); text-underline-offset: 3px; font-weight: 600; } .zz-rs-content__inner a:hover { text-decoration-color: var(--zz-navy); } .zz-rs-content__inner blockquote { border-left: 4px solid var(--zz-accent); background: var(--zz-sand); padding: var(--zz-sp-4) var(--zz-sp-5); margin: var(--zz-sp-5) 0; border-radius: 0 var(--zz-radius) var(--zz-radius) 0; font-style: italic; color: var(--zz-text-soft); } .zz-rs-content__inner blockquote p { margin: 0; } .zz-rs-content__inner img { max-width: 100%; height: auto; border-radius: var(--zz-radius); margin: var(--zz-sp-4) 0; } .zz-rs-content__inner code { background: var(--zz-sand); padding: 2px 6px; border-radius: 4px; font-size: 0.92em; font-family: Consolas, Monaco, monospace; } .zz-rs-content__inner pre { background: var(--zz-navy-deep); color: #fff; padding: var(--zz-sp-4); border-radius: var(--zz-radius); overflow-x: auto; margin: var(--zz-sp-4) 0; } .zz-rs-content__inner pre code { background: transparent; color: inherit; padding: 0; } .zz-rs-content__inner hr { border: 0; border-top: 2px solid var(--zz-sand); margin: var(--zz-sp-8) 0; } .zz-rs-content__inner figure { margin: var(--zz-sp-5) 0; } .zz-rs-content__inner figcaption { text-align: center; font-size: 0.92rem; color: var(--zz-muted); margin-top: var(--zz-sp-2); font-style: italic; }