/* ========================================================= CUSTOM.CSS - Puchar Trial Nowe elementy / bloczki dodatkowe / szablony WP. Mobile-first: domyslnie 0-991.98px, jedno @media (min-width:992px). ========================================================= */ /* Stopka: menu renderowane sa jako proste

/
(helpery pt_footer_menu_list / pt_footer_legal_links w inc/helpers.php), bez klas .menu/.menu-item - dziedzicza style .site-footer z style.css, 1:1 z html. Dzieki temu nie wyciekaja globalne style menu (uppercase, .7rem, margin-left). */ /* ===== Marginesy sekcji (ustawienia bloczka) ===== */ .has-margin-top { margin-top: 60px; } .has-margin-bottom { margin-bottom: 60px; } /* ===== Wspolny wrapper bloczkow dodatkowych ===== */ .map-block, .faq-block, .text-block, .gallery-grid, .pt-columns, .contact-form-block { padding: 80px 0; background: var(--white); } .faq-block, .pt-columns { background: var(--off-white); } /* ===== Animacje wejscia (jak w referencyjnym motywie Olza) ===== */ .fade-in, .fade-up, .fade-left, .fade-right { opacity: 0; transition-property: opacity, transform; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); transition-duration: 600ms; } .fade-in { transform: translate3d(0, 0, 0); } .fade-up { transform: translate3d(0, 32px, 0); } .fade-left { transform: translate3d(40px, 0, 0); } .fade-right { transform: translate3d(-40px, 0, 0); } .fade-in.is-animated, .fade-up.is-animated, .fade-left.is-animated, .fade-right.is-animated { opacity: 1; transform: translate3d(0, 0, 0); } .fade-in[data-delay], .fade-up[data-delay], .fade-left[data-delay], .fade-right[data-delay] { transition-delay: var(--anim-delay, 0ms); } @media (prefers-reduced-motion: reduce) { .fade-in, .fade-up, .fade-left, .fade-right { opacity: 1; transform: none; transition: none; } } /* ===== Fix: podwojny scroll / brak mozliwosci scrollowania ===== Szuflada menu (.menu-drawer) jest fixed, 100dvh i ma overflow-y:auto. Gdy zamknieta (poza ekranem) niektore przegladarki i tak renderuja jej pasek przewijania przy krawedzi okna, co daje "drugi scroll". Chowamy ja calkowicie gdy zamknieta i izolujemy przewijanie. */ .menu-drawer { overscroll-behavior: contain; visibility: hidden; transition: transform 350ms ease, visibility 0s linear 350ms; } body.menu-open .menu-drawer { visibility: visible; transition: transform 350ms ease, visibility 0s; } /* GLOWNA PRZYCZYNA podwojnego scrolla: style.css ustawia body{overflow-x:hidden}. Wg specyfikacji CSS, gdy jedna os ma 'hidden', druga os 'visible' jest WYMUSZANA na 'auto' - przez co staje sie drugim kontenerem przewijania (zagniezdzonym w ). 'overflow-x:clip' NIE wymusza tego, wiec body przestaje miec wlasny scroll. Zostaje jeden pasek przewijania na . */ html, body { max-width: 100%; } body { overflow-x: clip; overflow-y: visible; } /* Optyczne centrowanie kapitalikow Sora wewnatrz przyciskow. */ .button { padding-block: 16px 14px; line-height: 1; } /* ===== Header: osobne CTA i responsywne menu desktop/mobile ===== */ .site-header__actions { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; } .site-header__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 14px 9px; background: var(--orange); color: var(--black); font-family: Sora, sans-serif; font-size: 12px; font-weight: 700; line-height: 1; text-transform: uppercase; white-space: nowrap; transition: background var(--transition), transform var(--transition); } .site-header__cta:hover, .site-header__cta:focus-visible { background: #ffb64f; transform: translateY(-2px); } .menu-drawer__extra { margin-top: 30px; } .menu-drawer__close { display: block; position: absolute; z-index: 2; top: 18px; right: 20px; left: auto; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; box-shadow: none; color: var(--white); cursor: pointer; } .menu-drawer__close span { position: absolute; top: 21px; left: 10px; width: 24px; height: 2px; background: currentColor; } .menu-drawer__close span:first-child { transform: rotate(45deg); } .menu-drawer__close span:last-child { transform: rotate(-45deg); } .menu-drawer__close:hover, .menu-drawer__close:focus-visible { color: var(--orange); } @media (min-width: 992px) and (max-width: 2099px) { .menu-drawer__close { top: 28px; right: auto; left: 32px; } body.menu-open .site-header .menu-toggle { visibility: hidden; } } @media (min-width: 2100px) { .menu-drawer__close { display: none; } } /* ===== Hero: tresc z edytora WYSIWYG (wrapper .hero__text) ===== */ .hero__text p { max-width: 560px; font-size: 1.05rem; } .hero__text > .eyebrow { max-width: none; color: rgba(255,255,255,.65); font-size: .75rem; } .hero__background--yt { border: 0; pointer-events: none; } /* Formaty WYSIWYG dopasowuja sie do kontekstu sekcji. */ .pt-highlight { color: var(--orange); font-weight: 400; } .hero .eyebrow, .media-text .eyebrow, .cta-block .eyebrow, .schedule-block .eyebrow, .social-feed-carousel .eyebrow, .gallery-carousel .eyebrow, .is-dark .eyebrow { color: rgba(255,255,255,.65); } .eyebrow { font-size: .75rem !important; } .social-feed-carousel__copy > p:not(.eyebrow) { color: rgba(255,255,255,.6); } /* Po usunieciu .carousel-nav .social-feed-carousel__copy stalo sie div:last-of-type w .section-heading i lapie ciemna domyslna regule .section-heading>div:last-of-type>p (style.css). Wymuszamy jasny kolor z wyzsza specyficznoscia. */ .social-feed-carousel .section-heading > .social-feed-carousel__copy > .eyebrow { color: rgba(255,255,255,.65); } .social-feed-carousel .section-heading > .social-feed-carousel__copy > p:not(.eyebrow) { color: rgba(255,255,255,.6); } /* ===== Harmonogram: rozwijane dni i zagniezdzone godziny ===== */ .schedule-day { overflow: hidden; background: var(--blue); transition: background var(--transition), box-shadow var(--transition); } .schedule-day:hover, .schedule-day:focus-within { background: #293b58; box-shadow: inset 4px 0 0 var(--orange); } .schedule-day__summary { display: flex; min-height: 80px; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 20px; cursor: pointer; list-style: none; } .schedule-day__summary::-webkit-details-marker { display: none; } .schedule-day__summary::marker { content: ""; } .schedule-day__summary time { display: flex; flex: 1 1 auto; flex-direction: row; align-items: baseline; gap: 10px; border: 0; font-family: Sora, sans-serif; text-transform: uppercase; } .schedule-day__summary time span { color: var(--orange); font-size: .9rem; font-weight: 700; } .schedule-day__summary time .schedule-day__separator { color: rgba(255,255,255,.35); font-weight: 400; } .schedule-day__summary time strong { color: var(--white); font-size: 1rem; } .schedule-day__arrow { position: relative; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; transition: border-color var(--transition), background var(--transition), transform var(--transition); } .schedule-day__arrow::before, .schedule-day__arrow::after { content: ""; position: absolute; top: 16px; width: 9px; height: 2px; background: currentColor; transition: transform var(--transition); } .schedule-day__arrow::before { left: 9px; transform: rotate(45deg); } .schedule-day__arrow::after { right: 9px; transform: rotate(-45deg); } .schedule-day:hover .schedule-day__arrow, .schedule-day:focus-within .schedule-day__arrow { border-color: var(--orange); background: var(--orange); color: var(--dark); } .schedule-day[open] .schedule-day__arrow { transform: rotate(180deg); } .schedule-day__content { padding: 0 20px 20px; border-top: 1px solid rgba(255,255,255,.12); } .schedule-day__slots { margin: 0; padding: 12px 0 0; list-style: none; } .schedule-day__slots li { display: grid; grid-template-columns: minmax(105px, auto) 1fr; gap: 18px; min-height: 0; padding: 12px 0; background: transparent; border-bottom: 1px solid rgba(255,255,255,.1); } .schedule-day__slots li:last-child { border-bottom: 0; } .schedule-slot__time { color: var(--white); font-family: Sora, sans-serif; font-size: .78rem; font-weight: 600; white-space: nowrap; } .schedule-day__slots p, .schedule-day__legacy p { margin: 0; color: rgba(255,255,255,.75); font-size: .78rem; } .schedule-day__legacy { padding-top: 18px; } .schedule-day__legacy h3 { margin: 0 0 4px; color: var(--orange); font-size: .9rem; text-transform: uppercase; } @media (max-width: 991px) { .button { min-height: 45px; } .site-header__actions { margin-left: auto; } .site-header__cta { min-height: 45px; padding-inline: 12px; font-size: 11px; } .schedule-day__slots li { grid-template-columns: 1fr; gap: 3px; } .hero { height: 100svh; max-height: 100vh; } .hero::before, .hero__background { bottom: 60px; height: calc(100% - 60px); } .hero__content { top: 80px; bottom: 154px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .hero__partners { margin-bottom: 14px; } .hero .eyebrow { margin-bottom: 8px; font-size: .68rem; } .hero h1 { margin-bottom: 12px; font-size: clamp(2rem, 9.5vw, 2.6rem); line-height: .98; } .hero__text p { margin-bottom: 0; font-size: .92rem; line-height: 1.28; } .hero .button-row { margin-top: 16px; } .hero__bottom { height: 60px; max-height: 60px; } .hero__bottom-inner { min-height: 60px; } .countdown { right: auto; left: 20px; height: 60px; } .countdown > p { right: auto; width: calc(100vw - 20px); } .countdown > div, .countdown span { height: 45px; } .hero__date { right: auto; left: 20px; bottom: 104px; width: min(62vw, 240px); padding-left: 14px; } } /* ===== Karty: 12px odstepu miedzy obrazkiem a trescia (div), jak w projekcie. social-card ma to juz w style.css (desktop) - tu dodajemy dla kafelkow info-card. ===== */ .info-card > div { margin-top: 12px; background: #ffffff; } .is-dark .info-card > div { background: var(--navy); } /* ===== CTA: panel logotypow przy gornej krawedzi sekcji ===== */ .cta-block { padding-top: 180px; } .cta-block__heading .eyebrow { color: rgba(255, 255, 255, .65); } .cta-block__heading h2 { margin-bottom: 24px; } .cta-block .pt-highlight { color: var(--orange); font-weight: 400; } .cta-block__logos { position: absolute; top: 0; right: 0; left: 0; width: 100%; min-height: 124px; margin: 0; padding: 22px 20px; background: var(--white); } .cta-block__logos img, .cta-block__logos img:last-child { width: auto; height: 60px; max-height: 60px; object-fit: contain; } /* ===== Media-text: wariant obrazek (bez video) ===== */ .media-text__image { overflow: hidden; } .media-text__image img { width: 100%; aspect-ratio: 760/460; object-fit: cover; } /* ===== Contact-block: interaktywna mapa Google zamiast statycznego obrazu ===== */ .contact-block__map > iframe { display: block; width: 100%; border: 0; } .contact-block__map > .contact-block__map-card { display: flex; } /* ===== Support-block: rowne karty i projektowe ikony social media ===== */ .support-block__grid article { display: flex; min-width: 0; flex-direction: column; align-self: stretch; } .support-block__grid article > img, .support-block__grid article > .support-block__ministry { flex: 0 0 238px; } .support-block__grid article > div:last-child { display: flex; flex: 1 1 auto; flex-direction: column; margin-top: 12px; } .support-block .social-icon__disc { color: #071835; } .support-block .social-icon__glyph { color: #fff; } .support-block .social-links a:hover .social-icon__disc, .support-block .social-links a:focus-visible .social-icon__disc { color: var(--orange); } .support-block .social-links a:hover .social-icon__glyph, .support-block .social-links a:focus-visible .social-icon__glyph { color: #071835; } /* ===== Tiles: prawdziwe logo Google Maps i mapa na stronie karty ===== */ .info-card:has(> .card-media img[src*="-map"])::before, .info-card:has(> .card-media img[src*="-map"])::after { display: none; } .info-card__media { position: relative; display: block !important; min-height: 0 !important; padding: 0 !important; background: transparent !important; } .info-card__media .card-media { display: block; } .info-card__media .card-media img { display: block; width: 100%; height: 187px; object-fit: cover; } .tiles-block.is-dark .info-card__media .card-media img { height: 219px; } .card-media__google-maps { position: absolute; z-index: 4; right: 10px; bottom: 10px; display: flex; width: 91px; height: 80px; align-items: center; justify-content: center; margin: 0 !important; padding: 0 !important; background: #fff; color: inherit !important; font: inherit !important; text-transform: none !important; transition: transform var(--transition); } .info-card__media > a::after, .card-media__google-maps::after { content: none !important; display: none !important; } .card-media__google-maps:hover, .card-media__google-maps:focus-visible { transform: translateY(-2px); } .card-media__google-maps > span { display: block; width: 71px; height: 61px; } .card-media__google-maps img { width: 71px !important; height: 61px !important; object-fit: contain !important; opacity: 1 !important; scale: 1 !important; transform: none !important; } .info-card.is-map-card .card-media:hover .card-media__google-maps img, .info-card.is-map-card .card-media:focus-visible .card-media__google-maps img { transform: none !important; } .info-card.is-map-card h3 a::after { content: ""; position: absolute; z-index: 1; inset: 0; } .pt-single__map { width: 100%; margin-bottom: 32px; overflow: hidden; background: var(--off-white); } .pt-single__map iframe { display: block; width: 100%; height: clamp(360px, 48vw, 560px); border: 0; } /* ===== Gallery-carousel: hover preview wideo ===== */ .gallery-tabs { gap: 10px; } .gallery-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 34px; padding: 7px 12px; cursor: pointer; } .gallery-tabs__icon { display: block; width: 20px; height: 20px; flex: 0 0 20px; } .gallery-video { position: relative; display: block; height: 410px; background: #000; isolation: isolate; } .gallery-video > img, .gallery-video__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transform-origin: center; transition: opacity 480ms cubic-bezier(.22, 1, .36, 1), transform 650ms cubic-bezier(.22, 1, .36, 1); will-change: opacity, transform; } .gallery-video__preview { z-index: 1; opacity: 0; pointer-events: none; } .gallery-video.is-frame .gallery-video__preview { opacity: .85; } .gallery-video.is-previewing .gallery-video__preview { opacity: 1; } .gallery-video.is-previewing > img { opacity: 0; } .gallery-video:hover > img, .gallery-video:focus-visible > img, .gallery-video:hover .gallery-video__preview, .gallery-video:focus-visible .gallery-video__preview { transform: scale(1.035); } .gallery-video > span { z-index: 2; opacity: 1; transition: opacity 280ms ease, background var(--transition), transform 420ms cubic-bezier(.22, 1, .36, 1); will-change: opacity, transform; } .gallery-video.is-previewing > span { opacity: 0; transform: translate(-50%, -50%) scale(.92); } @media (prefers-reduced-motion: reduce) { .gallery-video > img, .gallery-video__preview, .gallery-video > span { transition: none; } .gallery-video:hover > img, .gallery-video:focus-visible > img, .gallery-video:hover .gallery-video__preview, .gallery-video:focus-visible .gallery-video__preview { transform: none; } } /* ===== Logo carousel: poprawne wymiary SVG bez metadanych WordPressa ===== */ .logo-swiper .swiper-slide > a { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; } .logo-swiper .swiper-slide > img, .logo-swiper .swiper-slide > a > img { width: 100%; height: 100%; max-width: 100px; max-height: 100px; object-fit: contain; } .support-logo-swiper, .support-logo-swiper .swiper-slide { height: 110px; } /* ========================================================= FAQ ========================================================= */ .faq-block__heading { margin-bottom: 36px; } .faq-block__list { display: grid; gap: 12px; max-width: 900px; } .faq-block__item { background: var(--white); border: 1px solid var(--light-gray); } .faq-block__question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border: 0; background: transparent; cursor: pointer; text-align: left; font-family: Sora, sans-serif; font-size: 1rem; font-weight: 600; color: var(--black); } .faq-block__question svg { width: 24px; height: 24px; flex: 0 0 24px; color: rgba(3,7,13,.6); transform: rotate(-90deg); transition: transform var(--transition); } .faq-block__question[aria-expanded="true"] svg { transform: rotate(90deg); } .faq-block__answer { height: 0; overflow: hidden; color: rgba(3,7,13,.7); transition: height 360ms cubic-bezier(.22,1,.36,1); } .faq-block__answer-inner { padding: 0 22px 22px; } .faq-block__answer p:last-child { margin-bottom: 0; } /* ========================================================= TEXT-BLOCK ========================================================= */ .text-block__inner { max-width: 100%; } .text-block__inner > :last-child { margin-bottom: 0; } /* ========================================================= GALLERY-GRID ========================================================= */ .gallery-grid__intro { margin-bottom: 30px; } .gallery-grid__items { display: grid; grid-template-columns: 1fr; gap: 16px; } .gallery-grid__item { display: block; overflow: hidden; aspect-ratio: 4/3; } .gallery-grid__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 450ms ease, filter 450ms ease; } .gallery-grid__item:hover img, .gallery-grid__item:focus-visible img { transform: scale(1.05); filter: brightness(.85); } /* ========================================================= PT-COLUMNS (kolumny z ikonami) ========================================================= */ .pt-columns__heading { margin-bottom: 36px; } .pt-columns__grid { display: grid; grid-template-columns: 1fr; gap: 24px; } .pt-columns__item { padding: 30px 24px; background: var(--white); } .pt-columns__icon { width: 56px; height: 56px; margin-bottom: 18px; } .pt-columns__icon img { width: 100%; height: 100%; object-fit: contain; } .pt-columns__item h3 { margin-bottom: 12px; font-size: 1.1rem; text-transform: uppercase; } .pt-columns__item p { color: rgba(3,7,13,.6); } .pt-columns__item .button { margin-top: 8px; } /* ========================================================= CONTACT-FORM (tekst + CF7) ========================================================= */ .contact-form-block__grid { display: grid; grid-template-columns: 1fr; gap: 36px; } .contact-form-block__text > :last-child { margin-bottom: 0; } .contact-form-block .wpcf7-form input:not([type="submit"]), .contact-form-block .wpcf7-form textarea, .contact-form-block .wpcf7-form select { width: 100%; padding: 14px 16px; margin-bottom: 14px; border: 1px solid var(--light-gray); background: var(--white); font: inherit; color: var(--black); } .contact-form-block .wpcf7-form textarea { min-height: 140px; } .contact-form-block .wpcf7-form .wpcf7-submit { min-height: 54px; padding: 15px 28px; border: 0; background: var(--orange); color: var(--black); font-family: Sora, sans-serif; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: background var(--transition); } .contact-form-block .wpcf7-form .wpcf7-submit:hover { background: #ffb64f; } /* ========================================================= MAP ========================================================= */ .map-block__heading { margin-bottom: 30px; } .map-block__embed { position: relative; width: 100%; overflow: hidden; } .map-block__embed iframe { display: block; width: 100%; height: var(--map-height, 450px); border: 0; } /* ========================================================= PAGE-TITLE ========================================================= */ .page-title-block { padding: 130px 0 50px; background: var(--navy); color: var(--white); } .page-title-block h1 { font-family: Sora, sans-serif; font-size: clamp(2.2rem, 8vw, 3.4rem); line-height: 1.05; margin: 0; } .page-title-block .breadcrumbs { margin-top: 18px; } .breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; font-family: Sora, sans-serif; font-size: .78rem; color: rgba(255,255,255,.7); } .breadcrumbs a { color: var(--orange); } .breadcrumbs a:hover { text-decoration: underline; } /* ========================================================= ARCHIWA / BLOG / SINGLE ========================================================= */ .pt-archive, .pt-single { padding: 60px 0 90px; background: var(--off-white); } .pt-archive__head { margin-bottom: 40px; } .pt-archive__head h1 { font-family: Sora, sans-serif; font-size: clamp(2rem,6vw,3rem); margin-bottom: 12px; } .pt-archive__head p { color: rgba(3,7,13,.6); margin: 0; } /* Filtr typu galerii */ .pt-gallery-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; } .pt-gallery-filter a { display: inline-flex; align-items: center; gap: 4px; padding: 10px 18px; background: var(--off-white); color: var(--black); font-family: Sora, sans-serif; font-size: .78rem; font-weight: 600; text-transform: uppercase; transition: background var(--transition), color var(--transition); } .pt-gallery-filter a:hover, .pt-gallery-filter a.is-active { background: var(--orange); } /* Grid kart (CPT/blog) - wizualnie jak cards-grid, ale grid */ .pt-cards { display: grid; grid-template-columns: 1fr; gap: 20px; } .pt-cards .info-card { min-height: 0; } .pt-cards .info-card > .card-media img { width: 100%; height: 200px; object-fit: cover; } .pt-cards .info-card > div { min-height: 0; } /* Grid galerii w archiwum */ .pt-gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .pt-gallery-grid__item { position: relative; display: block; overflow: hidden; aspect-ratio: 3/4; background: var(--dark); } .pt-gallery-grid__item:not(.gallery-video) > img { width: 100%; height: 100%; object-fit: cover; transition: transform 450ms ease, filter 450ms ease; scale: 1.01; } .pt-gallery-grid__item:not(.gallery-video):hover > img { transform: scale(1.05); filter: brightness(.8); } .pt-gallery-grid__item.gallery-video { height: auto; background: #000; } /* Single CPT / wpis */ .pt-single__inner { max-width: 820px; margin-inline: auto; } .pt-single__meta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; color: rgba(3,7,13,.55); font-family: Sora, sans-serif; font-size: .8rem; text-transform: uppercase; } .pt-single h1 { font-family: Sora, sans-serif; font-size: clamp(2rem,6vw,3rem); margin-bottom: 22px; } .pt-single__thumb { margin: 0 0 30px; overflow: hidden; } .pt-single__thumb img { width: 100%; height: auto; } .pt-single__content > :last-child { margin-bottom: 0; } .pt-single__content h2 { font-size: clamp(1.6rem,4vw,2.2rem); margin: 36px 0 16px; } .pt-single__content ul, .pt-single__content ol { padding-left: 22px; margin-bottom: 20px; } .pt-single__content img { height: auto; margin: 20px 0; } .pt-single__back { display: inline-flex; margin-top: 36px; color: var(--orange); font-family: Sora, sans-serif; font-weight: 600; text-transform: uppercase; } .pt-single__back::before { content: "\2190"; margin-right: 8px; } /* Paginacja */ .pt-pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 50px; } .pt-pagination .page-numbers { display: inline-flex; min-width: 46px; height: 46px; align-items: center; justify-content: center; padding: 0 10px; background: var(--off-white); color: var(--black); font-family: Sora, sans-serif; font-weight: 600; } .pt-pagination .page-numbers.current, .pt-pagination .page-numbers:hover { background: var(--orange); } /* 404 / brak wynikow */ .pt-message { padding: 120px 0; text-align: center; } .pt-message h1 { font-family: Sora, sans-serif; font-size: clamp(2.5rem,10vw,5rem); color: var(--orange); } .pt-message p { color: rgba(3,7,13,.6); } /* Komentarze (blog) */ .pt-comments { max-width: 820px; margin: 50px auto 0; } .pt-comments h2 { font-size: 1.4rem; margin-bottom: 20px; } .pt-comments .comment-list { list-style: none; margin: 0 0 30px; padding: 0; } .pt-comments .comment-list li { padding: 16px 0; border-bottom: 1px solid var(--light-gray); } /* ========================================================= DESKTOP 992px+ ========================================================= */ @media (min-width: 992px) { .has-margin-top { margin-top: 100px; } .has-margin-bottom { margin-bottom: 100px; } .map-block, .faq-block, .text-block, .gallery-grid, .pt-columns, .contact-form-block { padding: 100px 0; } .gallery-tabs button:first-child { width: 105px; } .gallery-tabs button:last-child { width: 93px; } .cta-block .container { position: static; } .cta-block { padding-top: 140px; } .cta-block__logos { right: 0; left: auto; width: auto; min-height: 0; } .site-header__inner { gap: clamp(20px, 3vw, 56px); } .site-header__logo { order: 1; flex: 0 0 120px; } .primary-nav { position: static; order: 2; min-width: 0; flex: 1 1 auto; margin-left: auto; } .primary-nav .menu { justify-content: flex-end; gap: clamp(12px, 1.8vw, 40px); } .primary-nav .menu > .menu-item:last-child { display: none; } .primary-nav .menu-item > a { font-size: clamp(11px, .9vw, 14px); } .site-header__actions { order: 3; gap: 8px; } .site-header__cta { display: inline-flex; order: 2; } .menu-toggle { position: relative; right: auto; order: 1; flex: 0 0 44px; } .menu-toggle.is-desktop-hidden { display: none; } .menu-drawer__primary { display: none; } .menu-drawer__extra { margin-top: 0; } /* Media-text - obraz na zewnatrz containera */ .media-text.is-outside .media-text__media { margin-right: calc(-1 * (100vw - 100%) / 2); } .media-text.is-outside.is-left .media-text__media { margin-right: 0; margin-left: calc(-1 * (100vw - 100%) / 2); } /* Text-block - zawezenie */ .text-block.is-narrow .text-block__inner { max-width: 900px; } /* Gallery-grid kolumny */ .gallery-grid.cols-2 .gallery-grid__items { grid-template-columns: repeat(2, 1fr); } .gallery-grid.cols-3 .gallery-grid__items { grid-template-columns: repeat(3, 1fr); } .gallery-grid.cols-4 .gallery-grid__items { grid-template-columns: repeat(4, 1fr); } .gallery-grid__items { gap: 20px; } .logo-swiper .swiper-slide > img, .logo-swiper .swiper-slide > a > img { max-width: 120px; max-height: 120px; } .support-logo-swiper, .support-logo-swiper .swiper-slide { height: 120px; } /* Pt-columns kolumny */ .pt-columns.cols-2 .pt-columns__grid { grid-template-columns: repeat(2, 1fr); } .pt-columns.cols-3 .pt-columns__grid { grid-template-columns: repeat(3, 1fr); } .pt-columns.cols-4 .pt-columns__grid { grid-template-columns: repeat(4, 1fr); } .pt-columns__grid { gap: 30px; } /* Contact-form 2 kolumny */ .contact-form-block__grid { grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } .page-title-block { padding: 180px 0 70px; } .breadcrumbs { font-size: .85rem; } .hero__text p { font-size: 20px; } /* Sztywne wysokosci sekcji zostaly usuniete bezposrednio ze style.css (height:NNNpx) - wysokosc narzuca teraz tresc. Hero (100vh) bez zmian. */ /* Social-feed: 50px odstepu pod naglowkiem (style.css zawezalo do 23px). */ .social-feed-carousel .section-heading { margin-bottom: 50px; } /* Social-feed: jedno pole WYSIWYG, wizualnie nadal dwie kolumny. */ .social-feed-carousel .section-heading > .social-feed-carousel__copy { display: grid; grid-column: 1 / 4; grid-template-columns: 558px 83px 558px; align-items: end; } .social-feed-carousel__copy > .eyebrow, .social-feed-carousel__copy > h2 { grid-column: 1; } .social-feed-carousel__copy > p:not(.eyebrow) { grid-column: 3; margin-bottom: 0; font-size: 20px; } .social-feed-carousel__copy > h2 + p { grid-row: 1 / span 2; } /* Archiwa - grid 3 kolumny */ .pt-cards { grid-template-columns: repeat(3, 1fr); gap: 30px; } .pt-gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } .faq-block__list { gap: 14px; } } /* === Social-feed TABLET (992-1400): naglowek wyrownany do ukladu posta ponizej. === eyebrow + tytul: max szerokosc jak obrazek (46%); p: szerokosc jak social-post__body (54%). Nadpisuje sztywne kolumny 558px (style.css/custom.css), ktore na tablecie wychodzily poza ekran. */ @media (min-width: 992px) and (max-width: 1400px) { .social-feed-carousel .section-heading { grid-template-columns: 1fr; } .social-feed-carousel .section-heading > .social-feed-carousel__copy { grid-column: 1 / -1; grid-template-columns: 46% 54%; } .social-feed-carousel__copy > p:not(.eyebrow) { grid-column: 2; } .section-heading { grid-template-columns: 100%; } }