/* ========================================================= BIAP – nowy wygląd 2026 (szablon „… nowy”, SwitchTemplate ?mode=nowy) Kolory firmowe: granat #05233d, niebieski #0081c6 Źródło: nowy-wyglad/modx/template2026/css/biap2026.css (repo Modx) ========================================================= */ /* ========================================================= Style bloków podstron ze starego szablonu (dawny template/css/custom.css), wbudowane tutaj. Przypięte do podstron przez :where(.s26-sub) – zawężają zasięg, ale nie zmieniają siły reguł, więc kolejność jak dawniej: najpierw te reguły, potem nowe style poniżej. Pominięte reguły nieistniejących już elementów: stary nagłówek, stopka, slider strony głównej, partnerzy. ========================================================= */ /*start FRED*/ :where(.s26-sub) .fred--block{ min-width: 30px; min-height: 150px!important; } :where(.s26-sub) .fred--block_content{ height: 100%; } :where(.s26-sub) .fred--block .col/*, :where(.s26-sub) .fred--block .item*/{ height: 100%; -ms-flex: 0 0 100%!important; flex: 0 0 100%!important; max-width: 100%!important; } :where(.s26-sub) .fred .fred--panel dl dt{ font-size: 14px!important; } :where(.s26-sub) .fred--block *[data-scrollax-parent="true"]{ overflow: initial; } :where(.s26-sub) .fred--block *[data-scrollax-parent="true"] .scrollax-item{ height: 100%; } :where(.s26-sub) .fred--block .stretched-link::after{ display: none; } :where(.s26-sub) .mce-content-body{ line-height: inherit; } /*end FRED*/ :where(.s26-sub) a{ color: inherit; } :where(.s26-sub) a:hover{ text-decoration: none; color: #2d88de; } :where(.s26-sub) p{ margin: 0 0 1.375rem 0; } :where(.s26-sub) a, :where(.s26-sub) a::before, :where(.s26-sub) .btn, :where(.s26-sub) .slick-arrow, :where(.s26-sub) .form-control, :where(.s26-sub) *[data-toggle="sticky-onscroll"]{ transition: all 0.3s ease; } :where(.s26-sub) .btn:focus, :where(.s26-sub) .form-control:focus{ box-shadow: none; } body:where(.s26-sub){ font-family: 'Montserrat', sans-serif; font-weight: 500; } :where(.s26-sub) picture{ display: block; } /* kolor tla f2f2f2 - szary */ :where(.s26-sub) #page{ background: #fff; min-height: 100vh; overflow-x: hidden; } :where(.s26-sub) #coocieConsent{ background: rgba(0,0,0,0.75); padding: 0.75rem 0; line-height: 1rem; font-size: 0.75rem; color: #fff; text-align: center; } :where(.s26-sub) .slick-no-slide .slick-track{ width: 100%!important; text-align: center; transform: none!important; } :where(.s26-sub) .slick-no-slide .slick-slide{ float: none; display: inline-block; } :where(.s26-sub) *{ } :where(.s26-sub) *[data-scrollax-parent="true"]{ position: relative; overflow: hidden; } :where(.s26-sub) *[data-scrollax-parent="true"] .scrollax-item{ width: 100%; height: 150%; position: absolute; top: 0; left: 0; z-index: 1; overflow: hidden; } :where(.s26-sub) *[data-scrollax-parent="true"] .scrollax-item > *{ position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; } :where(.s26-sub) *[data-scrollax-parent="true"] > .container{ position: relative; z-index: 2; } :where(.s26-sub) .table-responsive-xl > .table{ min-width: 1200px; } :where(.s26-sub) .table-responsive-lg > .table{ min-width: 992px; } :where(.s26-sub) .table-responsive-md > .table{ min-width: 768px; } :where(.s26-sub) .table-responsive-sm > .table{ min-width: 566px; } :where(.s26-sub) .navbar{ padding: 0; } :where(.s26-sub) .nav-item{ list-style: none; } :where(.s26-sub) .nav-link{ padding: 0; } :where(.s26-sub) .navbar .dropdown-toggle::after{ content: "\f107"; font-family: 'FontAwesome'; vertical-align: 0; border: 0; } :where(.s26-sub) .btn{ background: #2d88de; line-height: 1.25rem; padding: 0.375rem 1.625rem; font-weight: 600; font-size: 0.6875rem; border: 0; color: #fff; display: inline-block; border-radius: 0; font-family: 'Open Sans', sans-serif; } :where(.s26-sub) .btn:hover, :where(.s26-sub) .btn:focus, :where(.s26-sub) .btn:active{ background: #000; color: #fff; } /* kolor sekcji*/ :where(.s26-sub) .section-kolor-tla-1{ background: #f4f6f9 } :where(.s26-sub) .section-kolor-tla-2{ background: #fdfdfd } /*jasny szary*/ :where(.s26-sub) .section{ padding: 2rem 0 1rem 0; } :where(.s26-sub) .section-title{ padding: 0 0 1.5rem 0; margin: 0 0 1.75rem 0; text-align: center; color: #05233d; font-size: 2.5rem; font-weight: bold; position: relative; } :where(.s26-sub) .section-title::after{ content: ''; background: #0081c6; width: 42.5rem; height: 0.375rem; max-width: 100%; position: absolute; bottom: 0; left: 50%; z-index: 1; transform: translateX(-50%); } :where(.s26-sub) .section-youtube{ margin: 0; } :where(.s26-sub) .section-youtube .embed-responsive{ margin: 0.5rem 0 2rem 0; } :where(.s26-sub) .section-youtube{ background: #eeeeee } :where(.s26-sub) .section-news-list .section-link{ text-align: center; color: #7d7d7d; font-weight: 600; font-size: 0.875rem; } :where(.s26-sub) .section-news-list .item{ text-align: center; } :where(.s26-sub) .section-news-list .item-content{ padding: 0 0.9375rem; font-weight: 600; } :where(.s26-sub) .section-news-list .item-title{ line-height: 1.2em; margin: 2rem 0 0.375rem 0; font-weight: inherit; text-transform: uppercase; color: #05233d; font-size: 1.3125rem; } :where(.s26-sub) .section-news-list .item-date{ margin: 0 0 0.375rem 0; font-size: 0.875rem; color: #839cb3; } :where(.s26-sub) .section-news-list .item-link a{ background: transparent; line-height: 1.5rem; padding: 0.375rem 1.875rem; text-transform: uppercase; font-weight: normal; font-size: 0.875rem; color: #05233d; border: 0.125rem solid #05233d; display: inline-block; } :where(.s26-sub) .section-news-list .item-link a:hover{ background: #05233d; color: #fff; } :where(.s26-sub) .section-news-list .slick-slider{ margin: 0 0 1.75rem 0; } :where(.s26-sub) .slick-custom-navigation{ margin: 0 0 1.25rem 0; -ms-flex-pack: center; justify-content: center; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } :where(.s26-sub) .slick-custom-navigation .slick-custom-arrow{ background: none; width: 1.75rem; height: 1.75rem; line-height: 1.75rem; padding: 0; text-align: center; font-size: 0.875rem; color: #05233d; cursor: pointer; border: 0; display: block; outline: 0; } :where(.s26-sub) .slick-custom-navigation .slick-dots{ position: static; } :where(.s26-sub) .slick-custom-navigation .slick-dots, :where(.s26-sub) .article-content .slick-custom-navigation .slick-dots{ margin: 0; } :where(.s26-sub) .slick-custom-navigation .slick-dots li{ width: auto; height: auto; margin: 0 0.125rem; } :where(.s26-sub) .slick-custom-navigation .slick-dots li button{ background: #fff; width: 1.75rem; height: 1.75rem; padding: 0.25rem; border: 1px solid #05233d; } :where(.s26-sub) .slick-custom-navigation .slick-dots li button::before{ content: ''; background: #2d88de; width: 100%; height: 100%; opacity: 0; position: static; transition: all 0.3s ease; display: block; } :where(.s26-sub) .slick-custom-navigation .slick-dots li.slick-active button::before, :where(.s26-sub) .slick-custom-navigation .slick-dots li button:hover::before{ opacity: 1; } :where(.s26-sub) .section-offer-list .item-content{ background-color: #fff; background-repeat: no-repeat; background-position: center center; background-size: cover; height: 15.875rem; margin: 0 0 1.75rem 0; position: relative; } :where(.s26-sub) .section-offer-list .item-title{ background: rgba(44,99,148,0.9); min-height: 4.375rem; line-height: 1.25rem; padding: 0.9375rem 1.5rem; font-size: 1.125rem; font-weight: 500; color: #fff; position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; display: block; } :where(.s26-sub) #article-header{ background: #0081c6; min-height: 21.5rem; padding: 5rem 1rem 1rem 1rem; position: relative; overflow: hidden; } :where(.s26-sub) #article-header .background{ width: 1920px; position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); } :where(.s26-sub) #article-header .container{ position: relative; z-index: 2; } :where(.s26-sub) #article-header-offer{ background-color: #05233d; background-repeat: no-repeat; background-position: center center; background-size: cover; height: 14.5rem; padding: 1rem 2rem; } :where(.s26-sub) #pagetitle{ margin: 0 0 1rem 0; text-align: center; text-transform: uppercase; color: #fff; font-weight: bold; font-size: 5rem; } :where(.s26-sub) #pagetitle-small{ margin: 0 0 1.5rem 0; font-size: 2rem; color: #05233d; font-weight: bold; } :where(.s26-sub) #pagetitle-offer{ margin: 0; text-align: center; font-size: 3.75rem; color: rgba(255,255,255,0.53); font-weight: bold; text-transform: uppercase; position: relative; top: 50%; transform: translateY(-50%); } :where(.s26-sub) #wrapper-breadcrumbs{ margin: 0 0 1.75rem 0; color: #555555; font-size: 0.875rem; } :where(.s26-sub) #wrapper-breadcrumbs .breadcrumb{ background: none; padding: 1.125rem 0 1.25rem 0; margin: 0; border-bottom: 0.375rem solid #0081c6; border-radius: 0; } :where(.s26-sub) #wrapper-breadcrumbs .breadcrumb-item{ color: inherit; font-weight: 300; } :where(.s26-sub) #wrapper-breadcrumbs .breadcrumb-item.active{ font-weight: 500; } :where(.s26-sub) #wrapper-breadcrumbs .breadcrumb-item+.breadcrumb-item{ padding: 0 0 0 1rem; } :where(.s26-sub) #wrapper-breadcrumbs .breadcrumb-item+.breadcrumb-item::before{ content: "\f105"; padding: 0 1rem 0 0; font-family: 'FontAwesome'; } :where(.s26-sub) .article-content{ line-height: 1.5rem; padding: 0 0 3.375rem 0; color: #05233d; font-weight: 300; /*font-size: 0.75rem;*/ font-size: 1rem; } :where(.s26-sub) .article-content .column-separator{ background: #bfbfbf; width: 0.1875rem; height: 100%; margin: 0 auto; border: 0; } :where(.s26-sub) .article-content p{ margin: 0 0 1.25rem 0; } :where(.s26-sub) .article-content h4{ margin: 0 0 1.5rem 0; font-size: inherit; font-weight: bold; } :where(.s26-sub) .article-content strong{ font-weight: 600; } :where(.s26-sub) .article-content ul{ padding: 0; margin: 0 0 1.25rem 0; } :where(.s26-sub) .article-content ul li{ list-style: none; } :where(.s26-sub) .article-content ul li::before{ content: "\f0da"; margin: 0 0.5rem 0 0; font-family: 'FontAwesome'; } :where(.s26-sub) .offer .article-content{ padding: 0; } :where(.s26-sub) .offer .article-content h3{ margin: 0 0 1.375rem 0; font-size: 0.875rem; font-weight: 600; } :where(.s26-sub) .offer .article-content table td{ padding: 0 3rem; border-right: 0.1875rem solid #ddd; } :where(.s26-sub) .offer .article-content table td:first-child{ padding-left: 0; } :where(.s26-sub) .offer .article-content table td:last-child{ padding-right: 0; border: 0; } :where(.s26-sub) .contact .article-content{ line-height: 2.0625rem; padding: 0; color: #05233d; font-size: 0.875rem; font-weight: 300; } :where(.s26-sub) .contact .article-content h2{ font-size: 1.125rem; font-weight: bold; } :where(.s26-sub) .contact .article-content p{ margin: 0 0 1.75rem 0; } :where(.s26-sub) .contact .article-content .content-contact{ line-height: 3.125rem; font-size: 1.125rem; } :where(.s26-sub) .contact .article-content .content-contact strong{ font-weight: 600; } :where(.s26-sub) .contact .article-content-after{ background: #f0f0f8; border-top: 0.125rem solid #e0e0e0; position: relative; } :where(.s26-sub) .contact .article-content-after::before{ content: ''; background: #3f7bb3 url('../images/bg-contact.jpg') no-repeat right center; width: calc(50% - -11rem); height: 100%; position: absolute; top: 0; right: 0; z-index: 1; } :where(.s26-sub) .contact .article-content-after .container{ position: relative; z-index: 2; } :where(.s26-sub) .contact .article-content-after .col{ padding-top: 2.125rem; } :where(.s26-sub) .articles-list .item{ /*font-size: 0.75rem;*/ } :where(.s26-sub) .articles-list .item hr{ margin: 0.375rem 0 1.25rem 0; border-color: #dddddd; } :where(.s26-sub) .articles-list .item-title{ line-height: inherit; margin: 0 0 1rem 0; font-weight: 600; font-size: inherit; } :where(.s26-sub) .articles-list .item-date{ margin: 0; font-weight: 300; color: #000; font-size: 0.75rem; } :where(.s26-sub) .articles-list .item-content{ margin: 0 0 0.75rem 0; } :where(.s26-sub) .articles-list .item-link{ text-align: right; color: #0081c6; font-weight: bold; } :where(.s26-sub) .articles-list .pagination{ margin: 3rem 0 5rem 0; -ms-flex-pack: center; justify-content: center; } :where(.s26-sub) .articles-list .pagination .page-item{ margin: 0 0.125rem; } :where(.s26-sub) .articles-list .pagination .page-link{ background: #fff; width: 1.75rem; height: 1.75rem; padding: 0.25rem; text-align: center; font-size: 0; color: transparent; border: 1px solid #05233d; } :where(.s26-sub) .articles-list .pagination .page-link::before{ content: ''; background: #2d88de; width: 100%; height: 100%; opacity: 0; position: static; transition: all 0.3s ease; display: block; } :where(.s26-sub) .articles-list .pagination .page-link:hover::before, :where(.s26-sub) .articles-list .pagination .active .page-link::before{ opacity: 1; } :where(.s26-sub) .articles-list .pagination .page-item.prev .page-link, :where(.s26-sub) .articles-list .pagination .page-item.next .page-link{ background: none; font-size: 0.875rem; color: #05233d; border: 0; border-radius: 0; } :where(.s26-sub) .articles-list .pagination .page-item.prev .page-link::before, :where(.s26-sub) .articles-list .pagination .page-item.next .page-link::before{ display: none; } :where(.s26-sub) .article-content .pagination .page-item::before, :where(.s26-sub) .article-content .slick-dots li::before{ display: none; } :where(.s26-sub) .page-list1-slick{ text-align: center; } :where(.s26-sub) .page-list1-slick .item{ padding: 0 0.25rem 1rem 0.25rem; } :where(.s26-sub) .page-list1-slick .item-image{ width: 100%; height: auto; display: block; } :where(.s26-sub) .page-list1-slick .item-container{ max-width: 18rem; height: 15.3125rem; margin: 0 auto; position: relative; } :where(.s26-sub) .page-list1-slick .item-content, :where(.s26-sub) .page-list1-slick .item-content-full{ background: #fff; padding: 0.5rem 0.625rem; position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; } :where(.s26-sub) .page-list1-slick .item-content-full{ height: 100%; overflow: auto; z-index: 2; display: none; } :where(.s26-sub) .page-list1-slick .item:hover .item-content-full{ display: block; } :where(.s26-sub) .page-list1-slick .item-title{ margin: 0 0 0.375rem 0; font-weight: 600; font-size: 1rem; } :where(.s26-sub) .page-list1-slick .item-content-text{ /*height: 3.375rem;*/ line-height: 1.125rem; font-size: 0.75rem; overflow: hidden; } :where(.s26-sub) .page-list1-slick .item:hover .item-content{ height: 100%; padding-top: 1.125rem; overflow-y: auto; } :where(.s26-sub) .page-list1-slick .item:hover .item-content-text{ /*height: auto;*/ overflow: auto; } :where(.s26-sub) .page-list1-slick .item-link{ margin: 1.125rem 0 0 0; font-weight: bold; } :where(.s26-sub) .page-list1-slick .item-link a:hover{ color: inherit; } :where(.s26-sub) .article-content .section-page-list2{ background: #f0f0f8; } :where(.s26-sub) .article-content .section-page-list2 .section-content{ margin: 0 0 2rem 0; text-align: center; font-weight: 600; font-size: 0.875rem; color: #7d7d7d; } :where(.s26-sub) .article-content .section-page-list2 .page-list2-slick{ margin: 0 -0.9375rem; } :where(.s26-sub) .article-content .section-page-list2 .item{ padding: 0 0.9375rem; } :where(.s26-sub) .article-content .section-page-list2 .item-image{ width: 100%; height: auto; display: block; } :where(.s26-sub) .article-content .section-page-list2 .item-container{ max-width: 22.75rem; margin: 0 auto; } :where(.s26-sub) .article-content .section-page-list2 .item-content{ position: relative; } :where(.s26-sub) .article-content .section-page-list2 .item-content-box{ background: rgba(0,74,114,0.74); width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; overflow: auto; opacity: 0; transition: all 0.3s ease; } :where(.s26-sub) .article-content .section-page-list2 .item:hover .item-content-box{ opacity: 1; } :where(.s26-sub) .article-content .section-page-list2 .item-content-text{ line-height: 1.5rem; padding: 1rem 1.75rem; font-weight: 300; font-size: 0.875rem; color: #fff; text-align: center; position: relative; top: 50%; transform: translateY(-50%); } :where(.s26-sub) .article-content .section-page-list2 .item-content-text p{ margin: 0; } :where(.s26-sub) .article-content .section-page-list2 .item-content-text .item-content-title{ margin: 0; text-transform: uppercase; font-size: 1.3125rem; font-weight: 600; } :where(.s26-sub) .article-content .section-page-list2 .item-content-text .item-link{ margin: 0.5rem 0; font-size: 2.125rem; } :where(.s26-sub) .article-content .section-page-list2 .item-title{ margin: 1.75rem 0 1.25rem 0; text-align: center; text-transform: uppercase; font-weight: 600; font-size: 1.3125rem; } :where(.s26-sub) .article-content .section-page-list2 .slick-custom-navigation{ margin: 1rem 0 2.5rem 0; } :where(.s26-sub) #resource-gallery .item{ margin: 0 0 1.5rem 0; } :where(.s26-sub) #article-left-column .navbar-nav{ width: 100%; -ms-flex-direction: column; flex-direction: column; } :where(.s26-sub) #article-left-column .nav-item{ width: 100%; border-bottom: 1px solid #0081c6; } :where(.s26-sub) #article-left-column .nav-item::before{ display: none; } :where(.s26-sub) #article-left-column .nav-item.last{ border: 0; } :where(.s26-sub) #article-left-column .nav-link{ line-height: 1.25rem; padding: 0.8125rem 0 0.8125rem 1.125rem; color: #05233d; font-size: 0.875rem; font-weight: 500; position: relative; } :where(.s26-sub) #article-left-column .nav-link::before{ content: "\f105"; font-family: 'FontAwesome'; position: absolute; top: 0.8125rem; left: 0; z-index: 1; } :where(.s26-sub) #article-left-column .active > .nav-link, :where(.s26-sub) #article-left-column .nav-link:hover{ color: #2d88de; } :where(.s26-sub) .form{ color: #fff; } :where(.s26-sub) .form label{ line-height: 1.25rem; font-size: 0.875rem; } :where(.s26-sub) .form .form-group{ margin: 0 0 1.375rem 0 } :where(.s26-sub) .form .form-control{ height: 3rem; padding: 0 1.25rem; color: #000; font-size: 0.875rem; font-weight: 500; border-radius: 0; border: 1px solid #c4c4c4; outline: 0; } :where(.s26-sub) .form textarea.form-control{ height: 13rem; padding: 0.5rem 1.25rem; resize: none; } :where(.s26-sub) .form .form-control::placeholder{ color: #000; font-weight: 300; } :where(.s26-sub) .form .form-control::-ms-input-placeholder{ color: #000; font-weight: 300; } :where(.s26-sub) .form .form-control:-ms-input-placeholder{ color: #000; font-weight: 300; } :where(.s26-sub) .form .form-control:focus, :where(.s26-sub) .form .form-control:active{ border-color: #000; outline: 0; box-shadow: none; } :where(.s26-sub) .form .form-control:focus::placeholder{ color: #fff; } :where(.s26-sub) .form .form-control:focus:-ms-input-placeholder{ color: #fff; } :where(.s26-sub) .form .form-control:focus::-ms-input-placeholder{ color: #fff; } :where(.s26-sub) .form .btn{ background: transparent; height: 3rem; padding: 0 3rem; text-transform: uppercase; font-size: 1.125rem; color: #fff; font-weight: 300; border: 1px solid #fff; } :where(.s26-sub) .form .btn:hover{ background: #fff; color: #05233d; } :where(.s26-sub) #map{ height: 31.25rem; margin: 1rem 0 0 0; } :where(.s26-sub) #map iframe{ width: 100%; height: 100%; } :where(.s26-sub) .gallery .item{ margin: 0 0 1.5rem 0; } :where(.s26-sub) .gallery .item a{ display: block; overflow: hidden; } :where(.s26-sub) .gallery .item a img{ transition: all 0.3s ease; } :where(.s26-sub) .gallery .item a img:hover{ transform: scale(1.1); } :where(.s26-sub) .footer-collapse{ padding-left: 1.25rem; } :where(.s26-sub) .footer-menu .nav-item{ padding: 0.3125rem 0.5rem 0.3125rem 0; border-bottom: 1px solid #fff; } :where(.s26-sub) .footer-menu .nav-item:last-child{ border: 0; } :where(.s26-sub) .footer-menu .nav-link{ font-weight: 600; text-transform: uppercase; } @media (min-width: 1230px){ :where(.s26-sub) .container{ max-width: 1200px; } } @media (max-width: 1439px){ :where(.s26-sub) .contact .article-content-after::before{ background-position: left center; } } @media (max-width: 1200px){ :where(.s26-sub) .contact .article-content-after::before{ width: calc(50% - -1rem); } :where(.s26-sub) .offer .article-content table td{ padding: 0 1.5rem; } } @media (max-width: 991px){ :where(.s26-sub) #pagetitle{ font-size: 4.5rem; } :where(.s26-sub) #pagetitle-offer{ font-size: 2.75rem; } :where(.s26-sub) .offer .article-content table td{ width: 100%; padding: 0.75rem 0; border: 0; display: block; } } @media (max-width: 767px){ :where(.s26-sub) #coocieConsent .btn{ margin-top: 1rem; } :where(.s26-sub) .section-title{ font-size: 2rem; } :where(.s26-sub) .section-news-list .item-title{ font-size: 1.125rem; } :where(.s26-sub) #news-slick-dots, :where(.s26-sub) .custom-slick-dots{ width: 100%; -ms-flex-order: -1; order: -1; } :where(.s26-sub) #pagetitle{ font-size: 3.5rem; } :where(.s26-sub) .contact .article-content-after::before{ display: none; } :where(.s26-sub) .form{ color: inherit; } :where(.s26-sub) .form .btn{ color: #05233d; border-color: #05233d; } :where(.s26-sub) .form .btn:hover{ background: #05233d; color: #fff; } :where(.s26-sub) #article-left-column{ margin: 0 0 1.5rem 0; } } @media (max-width: 565px){ :where(.s26-sub) #article-header{ min-height: 0; padding: 2rem 1rem; } :where(.s26-sub) #pagetitle{ font-size: 2.5rem; } :where(.s26-sub) #pagetitle-offer{ font-size: 2rem; } } /* Fred 3 (MODX 3): klasy z data-fred-block-class trafiają na wrapper .fred--block, a element w środku ma te same klasy kolumn – bez tego w trybie edycji Fred kolumna jest zagnieżdżona w kolumnie (kafelki oferty zwężone do kilku px). Reguła działa tylko w edytorze Fred, na stronie publicznej nie ma .fred--block. */ :where(.s26-sub) .fred--block > .fred--block_content > [class*="col-"], :where(.s26-sub) .fred--block > .fred--block_content > .col{ flex: 0 0 100%; max-width: 100%; width: 100%; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } /* =========================== koniec stylów starego szablonu =========================== */ :root{ --navy-950:#020f1c; --navy-900:#05233d; --navy-800:#0a3357; --blue-500:#0081c6; --blue-400:#2d9be0; --cyan-300:#5fd4ff; --ink:#0b1b2b; --muted:#5b6b7c; --line:rgba(5,35,61,.12); --bg:#f5f8fb; --white:#fff; --radius:22px; --ease:cubic-bezier(.2,.7,.1,1); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3{font-family:"Space Grotesk",Inter,sans-serif;line-height:1.08;letter-spacing:-.02em;margin:0} .wrap{width:min(1240px,100% - 32px);margin-inline:auto} .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-500)} .eyebrow::before{content:"";width:28px;height:2px;background:currentColor;border-radius:2px} /* ---------- Pasek postępu przewijania ---------- */ #progress{position:fixed;inset:0 auto auto 0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--blue-500),var(--cyan-300));z-index:100} /* ---------- Nagłówek ---------- */ .header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .4s var(--ease),box-shadow .4s,padding .4s;padding:8px 0 18px} /* Układ: logo po lewej na wysokość obu wierszy; po prawej górny wiersz (dotacje, social, język) i menu */ .header .hgrid{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"logo top" "logo main";column-gap:28px;row-gap:6px;align-items:center;transition:row-gap .4s var(--ease)} .header .logo{grid-area:logo} .header .topbar{grid-area:top;display:flex;align-items:center;justify-content:flex-end;gap:18px;height:58px;transition:height .4s var(--ease),opacity .3s} .header .hmain{grid-area:main;display:flex;align-items:center;justify-content:flex-end;gap:20px} .grants{display:flex;gap:8px} .grants a{display:block;line-height:0;background:#fff;border-radius:8px;padding:2px 4px;box-shadow:0 4px 14px -6px rgba(0,0,0,.4);transition:transform .3s var(--ease)} .grants a:hover{transform:translateY(-2px)} .grants img{height:50px;width:auto} .social-top{display:flex;gap:6px} .social-top a{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.18);transition:background .3s,color .3s,border-color .3s} .social-top a:hover{background:var(--blue-500);border-color:var(--blue-500);color:#fff} .social-top svg{width:15px;height:15px} .header.scrolled .topbar{height:0;opacity:0;pointer-events:none} .header.scrolled .hgrid{row-gap:0} .header.scrolled .social-top a{color:var(--muted);border-color:var(--line)} /* Logo: kolorowy znak na białym kafelku + nazwa firmy jako tekst */ .logo{display:flex;align-items:center;gap:16px;flex-shrink:0} .logo-mark{display:block;line-height:0;background:#fff;border-radius:14px;padding:9px 14px;box-shadow:0 8px 22px -10px rgba(0,0,0,.5);transition:padding .4s var(--ease),box-shadow .4s,background .4s} .logo-mark img{height:64px;width:auto;transition:height .4s var(--ease)} .logo-txt{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17.5px;line-height:1.25;letter-spacing:.01em;color:#fff;padding-left:16px;border-left:2px solid var(--blue-400);transition:color .4s,font-size .4s} .header.scrolled .logo-mark{padding:0;background:transparent;box-shadow:none} .header.scrolled .logo-mark img{height:42px} .header.scrolled .logo-txt{color:var(--navy-900);font-size:15px} .nav{display:flex;gap:6px} .nav a{position:relative;white-space:nowrap;padding:10px 13px;border-radius:999px;font-weight:500;font-size:.95rem;color:rgba(255,255,255,.88);transition:color .3s,background .3s} .nav a:hover{background:rgba(255,255,255,.1);color:#fff} .header-right{display:flex;align-items:center;gap:14px} .lang{display:flex;border:1px solid rgba(255,255,255,.25);border-radius:999px;overflow:hidden;font-size:.8rem;font-weight:600} .lang a{padding:6px 11px;color:rgba(255,255,255,.7)} .lang a.active{background:#fff;color:var(--navy-900)} .btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;font-weight:600;font-size:.95rem;overflow:hidden;isolation:isolate;transition:transform .3s var(--ease),box-shadow .3s} .btn svg{width:18px;height:18px;transition:transform .35s var(--ease)} .btn:hover svg{transform:translateX(4px)} .btn-primary{background:var(--blue-500);color:#fff;box-shadow:0 10px 30px -8px rgba(0,129,198,.7)} .btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease);z-index:-1} .btn-primary:hover::after{transform:translateX(120%)} .btn-primary:hover{transform:translateY(-2px)} .btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.35)} .btn-ghost:hover{background:rgba(255,255,255,.1)} .btn-small{padding:10px 18px;font-size:.88rem;white-space:nowrap} .burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;cursor:pointer} .burger span{display:block;width:18px;height:2px;margin:4px auto;background:currentColor;transition:transform .3s} .header.scrolled{position:fixed;top:0;background:rgba(255,255,255,.86);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 10px 30px -18px rgba(5,35,61,.45);padding:10px 0} .header.scrolled .nav a{color:var(--ink)} .header.scrolled .nav a:hover{background:rgba(5,35,61,.06)} .header.scrolled .lang{border-color:var(--line)} .header.scrolled .lang a{color:var(--muted)} .header.scrolled .lang a.active{background:var(--navy-900);color:#fff} .header.scrolled .burger{color:var(--ink);border-color:var(--line)} /* ---------- Hero ---------- */ .hero{position:relative;min-height:0;display:flex;align-items:center;color:#fff;background:var(--navy-950);overflow:hidden;padding:180px 0 70px} .hero-bg{position:absolute;inset:-8%;background:center/cover no-repeat;opacity:.28;filter:saturate(1.2);will-change:transform} .hero::before{content:"";position:absolute;inset:0;z-index:1;background: radial-gradient(60% 70% at 85% 20%,rgba(0,129,198,.55),transparent 60%), radial-gradient(50% 60% at 10% 90%,rgba(95,212,255,.25),transparent 60%), linear-gradient(180deg,rgba(2,15,28,.55),rgba(2,15,28,.9));} .hero-grid{position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(70% 60% at 50% 40%,#000 30%,transparent 75%);animation:gridmove 22s linear infinite} @keyframes gridmove{to{background-position:64px 64px,64px 64px}} #net{position:absolute;inset:0;z-index:2;width:100%;height:100%} .hero .wrap{position:relative;z-index:3;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center} .hero h1{font-size:clamp(2.6rem,6.2vw,5.4rem);font-weight:700;margin:22px 0 26px} .hero h1 .line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em} .hero h1 .line > span{display:inline-block;transform:translateY(110%);animation:rise 1s var(--ease) forwards} .hero h1 .line:nth-child(2) > span{animation-delay:.12s} .hero h1 .line:nth-child(3) > span{animation-delay:.24s} @keyframes rise{to{transform:none}} .rotator{position:relative;display:inline-grid;vertical-align:bottom} .rotator span{grid-area:1/1;padding-bottom:.16em;margin-bottom:-.16em;color:transparent;background:linear-gradient(90deg,var(--cyan-300),var(--blue-400) 60%,#fff);-webkit-background-clip:text;background-clip:text;opacity:0;transform:translateY(40%);filter:blur(6px);transition:opacity .6s var(--ease),transform .6s var(--ease),filter .6s} .rotator span.on{opacity:1;transform:none;filter:none} .hero p.lead{font-size:clamp(1.05rem,1.4vw,1.22rem);color:rgba(255,255,255,.78);max-width:560px;margin:0 0 36px;opacity:0;animation:fade .9s .5s var(--ease) forwards} .hero .ctas{display:flex;flex-wrap:wrap;gap:14px;opacity:0;animation:fade .9s .7s var(--ease) forwards} @keyframes fade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .hero .eyebrow{color:var(--cyan-300);opacity:0;animation:fade .8s .1s var(--ease) forwards} .news-chip{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(95,212,255,.35);font-size:.88rem;color:rgba(255,255,255,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;animation:fade .8s .1s var(--ease) forwards;transition:background .3s,border-color .3s} .news-chip b{padding:4px 10px;border-radius:999px;background:linear-gradient(90deg,var(--blue-500),var(--cyan-300));color:#fff;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase} .news-chip svg{width:16px;height:16px;transition:transform .3s} .news-chip:hover{background:rgba(255,255,255,.14);border-color:var(--cyan-300)} .news-chip:hover svg{transform:translateX(4px)} .hero-cards{position:relative;height:480px;perspective:1200px} .hcard{position:absolute;border-radius:var(--radius);overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.15);opacity:0;animation:cardin 1.1s var(--ease) forwards;transform-style:preserve-3d;transition:transform .2s linear} .hcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1.1s var(--ease);animation:kenburns 14s ease-in-out infinite alternate} .hcard.c2 img{animation-duration:17s;animation-direction:alternate-reverse} .hcard.c3 img{animation-duration:12s} .hcard img.enter{opacity:0} @keyframes kenburns{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.16) translate(-3%,-2%)}} .hcard figcaption{z-index:2;transition:opacity .5s} .hcard figcaption.swap{opacity:0} .hcard figcaption{position:absolute;left:14px;bottom:14px;right:14px;padding:10px 14px;border-radius:14px;background:rgba(2,15,28,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:.82rem;font-weight:600;letter-spacing:.04em} .hcard.c1{width:68%;height:56%;top:0;right:0;animation-delay:.35s} .hcard.c1 figcaption{top:14px;bottom:auto;left:auto;right:14px} .hcard.c2 figcaption{top:14px;bottom:auto;right:auto;max-width:calc(100% - 28px)} .hcard.c2{width:54%;height:46%;top:34%;left:0;animation-delay:.55s;z-index:2} .hcard.c3{width:50%;height:40%;bottom:0;right:4%;animation-delay:.75s;z-index:3} @keyframes cardin{from{opacity:0;transform:translateY(60px) rotateX(12deg) scale(.94)}to{opacity:1;transform:none}} /* ---------- Sekcje ---------- */ section.block{padding:120px 0} .head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:56px;flex-wrap:wrap} .head h2{font-size:clamp(2rem,4vw,3.3rem);margin-top:14px;max-width:720px} .head p{max-width:420px;color:var(--muted);margin:0} /* ---------- Oferta (bento) ---------- */ .bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:260px;gap:18px} .tile{position:relative;border-radius:var(--radius);overflow:hidden;color:#fff;background:var(--navy-900);isolation:isolate} .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s;z-index:-2} .tile::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,35,61,.05) 20%,rgba(2,15,28,.88));transition:background .5s} .tile::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(95,212,255,.28),transparent 45%);opacity:0;transition:opacity .4s} .tile:hover::after{opacity:1} .tile:hover img{transform:scale(1.08)} .tile .in{position:absolute;inset:auto 0 0 0;padding:26px;display:flex;align-items:end;justify-content:space-between;gap:16px} .tile h3{font-size:clamp(1.15rem,1.6vw,1.55rem);font-weight:600} .tile .num{position:absolute;top:22px;left:26px;font-family:"Space Grotesk";font-size:.85rem;font-weight:600;letter-spacing:.1em;opacity:.7} .tile p{margin:8px 0 0;font-size:.92rem;color:rgba(255,255,255,.78);max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .5s} .tile:hover p{max-height:120px;opacity:1} .arrow{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .4s,transform .5s var(--ease)} .arrow svg{width:18px;height:18px} .tile:hover .arrow{background:var(--blue-500);transform:rotate(-45deg)} .t-wide{grid-column:span 3} .t-third{grid-column:span 2} .t-tall{grid-row:span 2} .t-full{grid-column:1/-1;grid-row:span 1} .tile-featured{box-shadow:0 0 0 2px var(--blue-500),0 30px 60px -30px rgba(0,129,198,.8)} .tile-featured::before{background:linear-gradient(180deg,rgba(5,35,61,.1) 10%,rgba(2,15,28,.92))} .tile-featured h3{font-size:clamp(1.6rem,2.6vw,2.4rem)} .tile p.always{max-height:none;opacity:1;font-size:1rem;max-width:460px} .flag{position:absolute;top:18px;right:18px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.95);color:var(--navy-900);font-size:.74rem;font-weight:600} /* ---------- Proces ---------- */ .process{background:var(--navy-950);color:#fff;position:relative;overflow:hidden} .process::before{content:"";position:absolute;width:900px;height:900px;right:-300px;top:-300px;border-radius:50%;background:radial-gradient(circle,rgba(0,129,198,.35),transparent 65%)} .process .head p{color:rgba(255,255,255,.65)} .process .eyebrow{color:var(--cyan-300)} .steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .steps-line{position:absolute;top:31px;left:31px;right:31px;height:2px;background:rgba(255,255,255,.12)} .steps-line i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--blue-500),var(--cyan-300))} .step{position:relative} .step .dot{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--navy-900);border:1px solid rgba(255,255,255,.18);font-family:"Space Grotesk";font-weight:700;font-size:1.1rem;position:relative;z-index:1;transition:background .5s,border-color .5s,box-shadow .5s} .step.lit .dot{background:var(--blue-500);border-color:var(--blue-500);box-shadow:0 0 0 8px rgba(0,129,198,.18),0 0 40px rgba(95,212,255,.45)} .step h3{font-size:1.3rem;margin:26px 0 10px} .step p{margin:0;color:rgba(255,255,255,.66);font-size:.95rem} /* ---------- O firmie / wartości ---------- */ .about{display:grid;grid-template-columns:1fr 1.25fr;gap:60px;align-items:center} .about-img{position:relative;border-radius:calc(var(--radius) + 8px);overflow:hidden;box-shadow:0 40px 80px -40px rgba(5,35,61,.55);transform:perspective(1200px) rotateY(-6deg);transition:transform .8s var(--ease)} .about-img:hover{transform:perspective(1200px) rotateY(0)} .about-img img{width:100%;height:auto} .about h2{font-size:clamp(2rem,3.6vw,3rem);margin:14px 0 22px} .about > div > p{color:var(--muted)} .stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:30px 0 36px} .stat{display:block;padding:22px;border-radius:20px;background:#fff;border:1px solid var(--line);transition:transform .4s var(--ease),box-shadow .4s,border-color .4s} .stat:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(5,35,61,.35);border-color:rgba(0,129,198,.35)} .stat-num{display:flex;align-items:baseline;gap:8px;font-family:"Space Grotesk";font-weight:700;color:var(--navy-900);font-size:clamp(3rem,5vw,4.4rem);line-height:1} .stat-num span{background:linear-gradient(135deg,var(--navy-900),var(--blue-500));-webkit-background-clip:text;background-clip:text;color:transparent} .stat-num small{font-size:1.3rem;color:var(--blue-500)} .stat-iso{font-size:clamp(1.4rem,2.2vw,1.8rem);align-items:center;min-height:clamp(3rem,5vw,4.4rem)} .stat-iso svg{width:34px;height:34px;color:var(--blue-500);flex:none} .stat-txt{margin-top:10px;font-size:.92rem;color:var(--muted)} .btn-dark{background:var(--navy-900);color:#fff} .btn-dark:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(5,35,61,.7)} /* ---------- Aktualności ---------- */ .news-section{background:#fff} .news-nav{display:flex;gap:10px} .news-nav button{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;transition:background .3s,color .3s,border-color .3s} .news-nav button:hover{background:var(--navy-900);color:#fff;border-color:var(--navy-900)} .news-nav svg{width:18px;height:18px} .news{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/3);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px} .news::-webkit-scrollbar{display:none} .card{scroll-snap-align:start;display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;background:var(--bg);border:1px solid var(--line);transition:transform .5s var(--ease),box-shadow .5s} .card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -28px rgba(5,35,61,.5)} .card .ph{aspect-ratio:16/10;overflow:hidden} .card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)} .card .ph.fit{background:#fff;border-bottom:1px solid var(--line)} .card .ph.fit img{object-fit:contain;padding:14px} .card:hover .ph img{transform:scale(1.06)} .card .bd{padding:18px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1} .card time{font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-500)} .card h3{font-size:1rem;font-weight:600;line-height:1.35} .card .more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.84rem;color:var(--navy-900)} .card .more svg{width:16px;height:16px;transition:transform .3s} .card:hover .more svg{transform:translateX(4px)} .news-foot{margin-top:34px;display:flex;justify-content:space-between;align-items:center;gap:20px} .bar{flex:1;max-width:240px;height:3px;border-radius:3px;background:var(--line);overflow:hidden} .bar i{display:block;height:100%;width:34%;background:var(--blue-500);border-radius:3px;transition:transform .3s} .link-u{font-weight:600;color:var(--navy-900);background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .4s var(--ease);padding-bottom:3px} .link-u:hover{background-size:100% 2px} /* ---------- Partnerzy ---------- */ .partners{padding:90px 0;text-align:center} .partners h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin:14px 0 40px} .logos{display:flex;justify-content:center;flex-wrap:wrap;gap:24px} .logos figure{margin:0;width:280px;height:150px;padding:18px;border-radius:18px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;transition:transform .4s var(--ease),box-shadow .4s} .logos figure:hover{transform:translateY(-4px);box-shadow:0 16px 36px -22px rgba(5,35,61,.45)} .logos img{max-height:110px;max-width:100%;width:auto} .brands{margin-top:30px;color:var(--muted);font-size:.92rem} .brands b{color:var(--ink);font-weight:600} /* ---------- CTA ---------- */ .cta{position:relative;margin:0 auto 110px;border-radius:32px;overflow:hidden;color:#fff;padding:80px 60px;background:linear-gradient(120deg,var(--navy-900),var(--blue-500));isolation:isolate} .cta::before{content:"";position:absolute;inset:0;z-index:-1;background:url("/assets/gallery/1/120.jpg") center/cover;opacity:.18;mix-blend-mode:luminosity} .cta::after{content:"";position:absolute;z-index:-1;width:520px;height:520px;right:-120px;bottom:-260px;border-radius:50%;border:1px solid rgba(255,255,255,.25);box-shadow:0 0 0 70px rgba(255,255,255,.04),0 0 0 140px rgba(255,255,255,.03);animation:spin 30s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .cta .grid{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center} .cta h2{font-size:clamp(1.9rem,3.6vw,3rem)} .cta p{color:rgba(255,255,255,.8);margin:16px 0 0} .cta .contact{display:grid;gap:12px} .cta .contact a{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:16px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);font-weight:600;transition:background .3s,transform .3s var(--ease)} .cta .contact a:hover{background:rgba(255,255,255,.2);transform:translateX(6px)} .cta .contact svg{width:20px;height:20px;flex:none} /* ---------- Stopka ---------- */ footer{position:relative;overflow:hidden;isolation:isolate;color:rgba(255,255,255,.8);padding:90px 0 30px;font-size:.93rem;background: radial-gradient(55% 80% at 90% 0%,rgba(0,129,198,.5),transparent 60%), radial-gradient(45% 70% at 0% 100%,rgba(95,212,255,.18),transparent 60%), linear-gradient(180deg,var(--navy-900),var(--navy-950))} footer::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(80% 90% at 70% 20%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(80% 90% at 70% 20%,#000 20%,transparent 75%)} footer::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--blue-500),var(--cyan-300))} .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px} footer h4{font-family:"Space Grotesk";color:#fff;font-size:1rem;margin:0 0 18px;letter-spacing:.02em} footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} footer a:hover{color:#fff} footer .flogo{height:46px;width:auto;border-radius:6px;margin-bottom:18px} .social{display:flex;gap:10px;margin-top:20px} .social a{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.15);transition:background .3s,border-color .3s} .social a:hover{background:var(--blue-500);border-color:var(--blue-500)} .social svg{width:18px;height:18px} .fbot{margin-top:60px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.84rem} /* ---------- Animacje przy przewijaniu ---------- */ .reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)} .reveal.in-view{opacity:1;transform:none} .reveal-clip::after{content:"";position:absolute;inset:0;z-index:5;background:var(--navy-900);transform-origin:50% 0;transition:transform 1.2s var(--ease)} .reveal-clip.in-view::after{transform:scaleY(0)} /* ---------- Responsywność ---------- */ @media (max-width:1240px){ .nav,.header-right .btn{display:none} .burger{display:block} } @media (max-width:1080px){ .logo-mark img{height:58px} .logo-txt{font-size:17px} .nav,.header-right .btn{display:none} .burger{display:block} .hero .wrap{grid-template-columns:1fr} .hero-cards{height:420px;margin-top:10px} .bento{grid-template-columns:repeat(2,1fr)} .t-wide{grid-column:1/-1} .t-third{grid-column:span 1} .t-third:last-child{grid-column:1/-1} .t-tall{grid-row:span 1} .t-full{grid-column:1/-1} .steps{grid-template-columns:1fr 1fr;row-gap:44px} .steps-line{display:none} .about{grid-template-columns:1fr;gap:44px} .about-img{transform:none} .news{grid-auto-columns:calc((100% - 24px)/2)} .cta .grid{grid-template-columns:1fr} .fgrid{grid-template-columns:1fr 1fr} } @media (max-width:640px){ section.block{padding:84px 0} .logo{gap:10px} .logo-mark{padding:4px 7px} .logo-mark img,.header.scrolled .logo-mark img{height:34px} .logo-txt,.header.scrolled .logo-txt{font-size:12.5px;padding-left:10px} .hero{padding:160px 0 56px} .header .hgrid{grid-template-areas:"top top" "logo main";row-gap:10px} .header .topbar{gap:10px;height:44px;justify-content:space-between} .grants img{height:40px} .hero-cards{height:330px} .bento{grid-template-columns:1fr;grid-auto-rows:220px} .t-wide{grid-column:span 1} .t-third,.t-third:last-child{grid-column:span 1} .tile-featured{grid-row:span 2} .tile p{max-height:none;opacity:1} .steps{grid-template-columns:1fr} .stats{grid-template-columns:1fr} .news{grid-auto-columns:86%} .cta{padding:56px 26px;border-radius:24px;margin-bottom:80px} .fgrid{grid-template-columns:1fr} } /* Menu mobilne */ .mnav{position:fixed;inset:0;z-index:60;background:var(--navy-950);color:#fff;padding:100px 28px 40px;display:flex;flex-direction:column;gap:8px;clip-path:circle(0 at calc(100% - 38px) 38px);transition:clip-path .7s var(--ease)} .mnav.open{clip-path:circle(150% at calc(100% - 38px) 38px)} .mnav a{font-family:"Space Grotesk";font-size:2rem;font-weight:600;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08)} .mnav .close{position:absolute;top:22px;right:16px;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.3);background:none;color:#fff;font-size:1.4rem;cursor:pointer} /* Ograniczenie ruchu */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} .reveal-clip::after{display:none} .reveal,.hero p.lead,.hero .ctas,.hero .eyebrow,.hcard{opacity:1!important;transform:none!important;clip-path:none!important} .hero h1 .line > span{transform:none} #net{display:none} } /* ========================================================= Elementy MODX (menu z pdoMenuCustom, treść stopki z zasobów, cookies) ========================================================= */ /* Menu główne z podmenu */ .nav{list-style:none;margin:0;padding:0;align-items:center} .nav > li{position:relative;list-style:none} .nav > li > a{display:inline-flex;align-items:center;gap:6px} .nav > li.has-sub > a::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7;transition:transform .3s} .nav > li.has-sub:hover > a::after,.nav > li.has-sub:focus-within > a::after{transform:translateY(1px) rotate(225deg)} .nav .sub{position:absolute;top:100%;left:50%;min-width:250px;padding:10px;margin-top:8px;border-radius:16px;background:#fff;box-shadow:0 24px 50px -20px rgba(5,35,61,.45);border:1px solid var(--line);opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .25s,transform .3s var(--ease),visibility .25s} .nav .sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px} .nav > li:hover > .sub,.nav > li:focus-within > .sub{opacity:1;visibility:visible;transform:translate(-50%,0)} .nav .sub a{display:block;padding:9px 14px;border-radius:10px;color:var(--ink)!important;font-size:.92rem;white-space:nowrap} .nav .sub a:hover{background:rgba(0,129,198,.08);color:var(--blue-500)!important} .nav > li.active > a{color:#fff;background:rgba(255,255,255,.12)} .header.scrolled .nav > li.active > a{color:var(--blue-500);background:rgba(0,129,198,.08)} /* Menu mobilne z podmenu */ .mnav{overflow-y:auto} .mnav ul{list-style:none;margin:0;padding:0} .mnav > ul > li > a{display:block} .mnav .sub{padding:4px 0 10px 14px} .mnav .sub a{display:block;font-family:Inter,sans-serif;font-size:1.05rem;font-weight:500;color:rgba(255,255,255,.75);border-bottom:0;padding:6px 0} .mnav .mlang{display:flex;gap:10px;margin-top:24px} .mnav .mlang a{font-size:1rem;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:6px 14px} /* Stopka – treść z zasobów „Stopka …” (p.footer.section1/3) */ footer .fcms p{margin:0 0 12px} footer .fcms img{border-radius:6px} footer .fcms h4{font-size:.95rem;margin:0 0 12px} footer .fcms table{border-collapse:collapse;width:100%!important;height:auto!important} footer .fcms td{padding:5px 8px 5px 0;vertical-align:top;height:auto!important} footer .fcms td:first-child{width:28px!important;text-align:center} footer .fcms td img{display:inline-block;filter:brightness(0) invert(1);opacity:.85} footer .fcms a{text-decoration:underline;text-underline-offset:3px} footer .fcms p:empty,footer .fcms p:has(> br:only-child){display:none} /* Baner cookies (plugin CookieConsent, chunk cookieConsent – klasy Bootstrapa) */ #coocieConsent{position:fixed;left:16px;right:16px;bottom:16px;z-index:95;max-width:980px;margin:0 auto;padding:18px 22px;border-radius:18px;background:rgba(2,15,28,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:rgba(255,255,255,.85);font-size:.85rem;box-shadow:0 24px 60px -20px rgba(0,0,0,.6)} #coocieConsent .container{width:auto;padding:0} #coocieConsent .row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between} #coocieConsent .col-12{flex:1 1 280px} #coocieConsent .col-md-3{flex:0 0 auto;text-align:right} #coocieConsent a{color:var(--cyan-300);text-decoration:underline} #coocieConsent .btn{padding:10px 20px;border:0;border-radius:999px;background:var(--blue-500);color:#fff;font:600 .88rem Inter,sans-serif;cursor:pointer} /* Stopka: logo jak w nagłówku; obrazek logo z treści zasobu „Stopka” ukryty */ footer .fcms a.flogo-b{display:inline-flex;align-items:center;gap:14px;margin-bottom:22px;text-decoration:none} footer .flogo-b .logo-mark{padding:7px 11px;border-radius:12px} footer .flogo-b .logo-mark img{height:48px;border-radius:0} footer .flogo-b .logo-txt{font-size:15px} footer .fabout > p:has(> img:only-child){display:none} /* Bloki Fred (szablon „Strona główna 2026 (Fred)”) */ .steps-wrap{position:relative} .tile{display:block} /* Tryb edycji Fred: kafelek siedzi w div.fred--block > div.fred--block_content – obie warstwy muszą wypełnić komórkę siatki */ .bento > .fred--block{min-width:0;display:flex;flex-direction:column} .bento > .fred--block > .fred--block_content{flex:1;display:flex;min-height:0} .bento > .fred--block > .fred--block_content > .tile{flex:1} .fred-hint{margin:14px auto 0;max-width:1240px;padding:10px 14px;border-radius:10px;background:#fff8d6;color:#5b4a00;font-size:.85rem;border:1px dashed #d4b300} .hero > .fred-hint{position:absolute;left:16px;right:16px;bottom:16px;z-index:5;margin:0 auto} /* hero to flex – podpowiedź nie może zabierać miejsca kolumnom */ /* W trybie edycji Fred skrypty strony są wyłączone – pokaż wszystko bez animacji wejścia */ body:has(> .fred) .reveal{opacity:1!important;transform:none!important} body:has(> .fred) .reveal-clip::after{display:none} /* ========================================================= Podstrony (szablony „… nowy”, body.s26-sub): stary układ treści i bloki Fred (bootstrap + style starego szablonu z początku pliku) w nowej oprawie ========================================================= */ .s26-sub .header.scrolled{background:rgba(255,255,255,.92)} .s26-sub{font-family:Inter,system-ui,sans-serif;font-weight:400;color:var(--ink)} .s26-sub #wrapper-main h1,.s26-sub #wrapper-main h2,.s26-sub #wrapper-main h3,.s26-sub #wrapper-main h4,.s26-sub #wrapper-main .section-title{font-family:"Space Grotesk",sans-serif;font-weight:700;letter-spacing:-.01em;color:var(--navy-900)} .s26-sub #wrapper-main a:not(.btn):not(.nav-link):not(.dropdown-item){color:var(--blue-500)} .s26-sub #wrapper-main a:not(.btn):hover{color:var(--navy-900)} .s26-sub #wrapper-main .btn{border-radius:999px;font-weight:600} .s26-sub #wrapper-main .table{font-size:.95rem} .s26-sub #wrapper-main .table thead th{background:var(--navy-900);color:#fff;border-color:var(--navy-900)} .s26-sub .header .container,.s26-sub footer .container{max-width:none} /* Baner z tytułem podstrony (chunk articleHeader / pageOfferHeader) – jak hero strony głównej, nagłówek przezroczysty nad nim */ .s26-sub #article-header,.s26-sub #article-header-offer{position:relative;overflow:hidden;isolation:isolate;min-height:0;background-color:var(--navy-950)} .s26-sub #article-header{padding:200px 1rem 64px} .s26-sub #article-header-offer{height:auto;padding:70px 2rem;border-radius:var(--radius);margin:0 auto 40px;max-width:1240px} .s26-sub #article-header .background{opacity:.45;filter:saturate(.8);top:0;left:0;width:100%;height:100%;transform:none} /* zdjęcie na całą szerokość i wysokość nagłówka (jak hero strony głównej) – dawniej stałe 1920 px, na szerszych ekranach ciemne pasy po bokach */ .s26-sub #article-header .background img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center} .s26-sub #article-header::after,.s26-sub #article-header-offer::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(70% 90% at 80% 10%,rgba(0,129,198,.45),transparent 60%),linear-gradient(180deg,rgba(2,15,28,.55),rgba(5,35,61,.9))} .s26-sub #article-header .container,.s26-sub #article-header-offer > *{position:relative;z-index:2} .s26-sub #wrapper-main #pagetitle,.s26-sub #wrapper-main #pagetitle-offer{color:#fff;text-transform:none;font-size:clamp(2.2rem,5vw,4rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 18px;transform:none;top:auto} .s26-sub #article-header .container img{max-height:84px;width:auto;opacity:.9} .s26-sub #wrapper-breadcrumbs .breadcrumb{border-bottom:1px solid var(--line);padding:20px 0} .s26-sub #wrapper-breadcrumbs .breadcrumb-item.active{color:var(--navy-900);font-weight:600} @media (max-width:640px){.s26-sub #article-header{padding:170px 1rem 40px}.s26-sub #article-header-offer{padding:40px 1rem}} /* ---------- Strony oferty (szablon „Edytor wizualny - strona oferty nowy”, #page.offer) ---------- */ /* Obrazek z nazwą obszaru pod banerem */ .s26-sub .offer #article-header-offer{min-height:260px;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center} .s26-sub .offer #article-header-offer::after{background:linear-gradient(90deg,rgba(2,15,28,.85),rgba(5,35,61,.45))} /* Trzy kolumny (tabela z edytora) jako karty */ .s26-sub .offer .article-content table{width:100%;border-collapse:separate;border-spacing:22px 0;margin:0 -22px 30px;width:calc(100% + 44px)} .s26-sub .offer .article-content table td{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;box-shadow:0 18px 40px -30px rgba(5,35,61,.45);font-size:.95rem;line-height:1.6;vertical-align:top} .s26-sub .offer .article-content table td:first-child,.s26-sub .offer .article-content table td:last-child{padding:30px 28px;border:1px solid var(--line)} .s26-sub .offer .article-content table td h3{font-family:Inter,sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-500);margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--line)} .s26-sub .article-content ul li{position:relative;padding-left:20px;margin:0 0 6px} .s26-sub .article-content ul li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:2px;background:linear-gradient(135deg,var(--blue-500),var(--cyan-300));margin:0;font-family:inherit} /* Nagłówki sekcji w treści */ .s26-sub #wrapper-main .section-title{font-size:clamp(1.8rem,3vw,2.5rem);text-transform:none;padding:0 0 18px;margin:0 0 34px} .s26-sub #wrapper-main .section-title::after{width:64px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--blue-500),var(--cyan-300))} .s26-sub .section-page-list1,.s26-sub .section-page-list2{padding:70px 0 40px} /* Aplikacje (page-list1) – karty z nakładką */ .s26-sub .page-list1-slick .item{padding:0 10px 22px} .s26-sub .page-list1-slick .item-container{max-width:none;height:250px;border-radius:18px;overflow:hidden;box-shadow:0 18px 40px -28px rgba(5,35,61,.6);background:var(--navy-900)} .s26-sub .page-list1-slick .item-image{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .s26-sub .page-list1-slick .item:hover .item-image{transform:scale(1.06)} .s26-sub .page-list1-slick .item-content{background:linear-gradient(180deg,transparent,rgba(2,15,28,.92));color:#fff;padding:40px 16px 14px;text-align:left} .s26-sub .page-list1-slick .item-content-full{background:rgba(5,35,61,.94);color:#fff;padding:22px 18px;text-align:left} .s26-sub .page-list1-slick .item-title{font-family:"Space Grotesk",sans-serif;font-size:1rem;color:#fff!important;line-height:1.25} .s26-sub .page-list1-slick .item-content-text{font-size:.85rem;line-height:1.5;color:rgba(255,255,255,.85)} .s26-sub .page-list1-slick .item-link a{color:var(--cyan-300)!important} /* Realizacje (page-list2) */ .s26-sub .article-content .section-page-list2{background:linear-gradient(180deg,#eef3f8,#f5f8fb)} .s26-sub .article-content .section-page-list2 .item-content{border-radius:18px;overflow:hidden;box-shadow:0 18px 40px -28px rgba(5,35,61,.6)} .s26-sub .article-content .section-page-list2 .item-content-box{background:rgba(5,35,61,.86)} .s26-sub .article-content .section-page-list2 .item-title{text-transform:none;font-family:"Space Grotesk",sans-serif;font-size:1.15rem;color:var(--navy-900)} .s26-sub .article-content .section-page-list2 .section-content{font-weight:400;color:var(--muted)} /* Nawigacja sliderów: strzałki i kropki */ .s26-sub .slick-custom-navigation{align-items:center;gap:8px} .s26-sub .slick-custom-navigation .slick-custom-arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy-900);transition:background .3s,color .3s} .s26-sub .slick-custom-navigation .slick-custom-arrow:hover{background:var(--navy-900);color:#fff} .s26-sub .slick-custom-navigation .slick-dots li button{width:10px;height:10px;padding:0;border:0;border-radius:999px;background:rgba(5,35,61,.18);transition:width .3s,background .3s} .s26-sub .slick-custom-navigation .slick-dots li button::before{display:none} .s26-sub .slick-custom-navigation .slick-dots li.slick-active button{width:28px;background:var(--blue-500)} @media (max-width:991px){ .s26-sub .offer .article-content table,.s26-sub .offer .article-content table tbody,.s26-sub .offer .article-content table tr{display:block;margin:0;width:100%} .s26-sub .offer .article-content table td{display:block;width:100%;margin:0 0 16px} } /* Strona działu /oferta/ – kafelki (blok „Nasza oferta”) jak na stronie głównej */ .s26-sub .section-offer-list{padding:10px 0 50px} .s26-sub .section-offer-list .item{padding-bottom:22px} .s26-sub .section-offer-list .item-content{height:270px;margin:0;border-radius:var(--radius);overflow:hidden;isolation:isolate;box-shadow:0 22px 50px -32px rgba(5,35,61,.7);transition:transform .5s var(--ease),box-shadow .5s} .s26-sub .section-offer-list .item-content::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,35,61,.05) 20%,rgba(2,15,28,.88));transition:opacity .5s} .s26-sub .section-offer-list .item-content:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(5,35,61,.8)} .s26-sub #wrapper-main .section-offer-list .item-title{z-index:1;left:0;right:auto;min-height:0;background:none;padding:24px 26px;font-family:"Space Grotesk",sans-serif;font-size:clamp(1.05rem,1.5vw,1.35rem);font-weight:600;line-height:1.2;text-transform:none;color:#fff!important} .s26-sub #wrapper-main .section-offer-list .item-title::first-line{text-transform:none} .s26-sub #wrapper-main .section-offer-list .item-title:hover{color:#fff} /* Puste listy aplikacji / realizacji (strona bez podstron) – nie pokazujemy samego nagłówka */ .s26-sub .section-page-list1:not(:has(.item)),.s26-sub .section-page-list2:not(:has(.item)){display:none} /* Rotator stron 1 – ⚙ „Szerokość kafelka” (zmienna --tile-w z bloku Fred); bez ustawienia szerokość jak dotąd (slick: kafelków w rzędzie) */ .s26-sub .page-list1-slick[style*="--tile-w"] .item-container{max-width:var(--tile-w);margin-left:auto;margin-right:auto} /* Rotator stron 1 – ⚙ „Układ: Siatka”: rzędy po 12 części, szerokość kafelka z TV „Szerokość kafelka” podstrony (data-w), domyślnie wg „Kafelków w rzędzie” (--span); niepełny rząd wyśrodkowany; bez karuzeli */ .s26-sub .page-list1-slick.is-grid{--g:24px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--g);text-align:left} .s26-sub .page-list1-slick.is-grid .item{--s:var(--span,4);flex:0 0 auto;width:calc((100% + var(--g)) * var(--s) / 12 - var(--g) - .05px);padding:0;min-width:0} .s26-sub .page-list1-slick.is-grid .item[data-w="3"]{--s:3}.s26-sub .page-list1-slick.is-grid .item[data-w="4"]{--s:4}.s26-sub .page-list1-slick.is-grid .item[data-w="6"]{--s:6}.s26-sub .page-list1-slick.is-grid .item[data-w="8"]{--s:8}.s26-sub .page-list1-slick.is-grid .item[data-w="12"]{--s:12} .s26-sub .page-list1-slick.is-grid + .page-list1-slick-navigation{display:none!important} @media (max-width:991px){.s26-sub .page-list1-slick.is-grid .item,.s26-sub .page-list1-slick.is-grid .item[data-w]{--s:6}.s26-sub .page-list1-slick.is-grid .item[data-w="12"]{--s:12}} @media (max-width:565px){.s26-sub .page-list1-slick.is-grid{--g:16px}.s26-sub .page-list1-slick.is-grid .item,.s26-sub .page-list1-slick.is-grid .item[data-w]{--s:12}} /* Aplikacje (page-list1) – ciemna sekcja z siatką i poświatą, numerowane karty, opis wysuwany po najechaniu */ .s26-sub .section-page-list1{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(60% 80% at 85% 0%,rgba(0,129,198,.45),transparent 60%),radial-gradient(50% 70% at 0% 100%,rgba(95,212,255,.14),transparent 60%),linear-gradient(160deg,var(--navy-950),var(--navy-900) 55%,var(--navy-800));padding:90px 0 60px;margin:40px 0 0} .s26-sub .section-page-list1::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(80% 80% at 50% 30%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(80% 80% at 50% 30%,#000 30%,transparent 80%)} .s26-sub #wrapper-main .section-page-list1 .section-title{color:#fff} .s26-sub .page-list1-slick{counter-reset:app} .s26-sub .page-list1-slick .item{counter-increment:app;padding:0 12px 26px} .s26-sub .page-list1-slick .item-container{height:290px;border-radius:20px;background:var(--navy-950);border:1px solid rgba(255,255,255,.12);box-shadow:0 26px 60px -34px rgba(0,0,0,.9);transition:transform .5s var(--ease),box-shadow .5s,border-color .5s} .s26-sub .page-list1-slick .item-container::before{content:counter(app,decimal-leading-zero);position:absolute;top:14px;left:16px;z-index:3;padding:4px 10px;border-radius:999px;font-family:"Space Grotesk",sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.1em;color:#fff;background:rgba(2,15,28,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18)} .s26-sub .page-list1-slick .item-container::after{content:"";position:absolute;top:14px;right:16px;z-index:3;width:34px;height:34px;border-radius:50%;background:var(--blue-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/16px no-repeat;opacity:0;transform:scale(.6) rotate(-45deg);transition:opacity .4s,transform .5s var(--ease)} .s26-sub .page-list1-slick .item:hover .item-container{transform:translateY(-8px);border-color:rgba(95,212,255,.55);box-shadow:0 0 0 1px rgba(95,212,255,.35),0 34px 70px -30px rgba(0,129,198,.75)} .s26-sub .page-list1-slick .item:hover .item-container::after{opacity:1;transform:none} /* zdjęcia bez stałego przyciemnienia (jak kafelki strony głównej); po najechaniu lekko ciemniejsze pod wysuwanym opisem */ .s26-sub .page-list1-slick .item-image{filter:none;transition:transform 1s var(--ease),filter .6s} .s26-sub .page-list1-slick .item:hover .item-image{transform:scale(1.08);filter:brightness(.7)} .s26-sub .page-list1-slick .item-content{padding:60px 18px 18px;background:linear-gradient(180deg,transparent,rgba(2,15,28,.82));transition:opacity .35s} /* cały kafelek jest odnośnikiem (chunki resource1/2SliderItemTpl: a.item-link-cover), nad treścią i opisem wysuwanym */ .s26-sub .page-list1-slick .item-container,.s26-sub .section-page-list2 .item-container{position:relative} .s26-sub .item-link-cover{position:absolute;inset:0;z-index:5} .s26-sub .fred--block .item-link-cover{display:none} .s26-sub .page-list1-slick .item:hover .item-content{height:auto;padding-top:60px;opacity:0;overflow:hidden} .s26-sub .page-list1-slick .item-content-full{display:block;top:auto;height:auto;max-height:100%;background:linear-gradient(180deg,rgba(5,35,61,.0),rgba(2,15,28,.96) 30%);padding:60px 18px 18px;transform:translateY(102%);transition:transform .55s var(--ease)} .s26-sub .page-list1-slick .item:hover .item-content-full{display:block;transform:none} .s26-sub .page-list1-slick .item-title{font-size:1.05rem;margin:0 0 8px;position:relative;padding-top:12px} .s26-sub .page-list1-slick .item-title::before{content:"";position:absolute;top:0;left:0;width:28px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--blue-500),var(--cyan-300))} .s26-sub .page-list1-slick .item-link{margin:12px 0 0;font-size:.85rem;letter-spacing:.02em} .s26-sub .section-page-list1 .slick-custom-navigation .slick-custom-arrow{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff} .s26-sub .section-page-list1 .slick-custom-navigation .slick-custom-arrow:hover{background:var(--blue-500);border-color:var(--blue-500)} .s26-sub .section-page-list1 .slick-custom-navigation .slick-dots li button{background:rgba(255,255,255,.25)} .s26-sub .section-page-list1 .slick-custom-navigation .slick-dots li.slick-active button{background:var(--cyan-300)} @media (hover:none){.s26-sub .page-list1-slick .item-content-full{transform:none}.s26-sub .page-list1-slick .item-content{opacity:0}} /* Kilka sekcji aplikacji pod rząd: druga i kolejne jasne (karty zostają ciemne) */ .s26-sub .section-page-list1 ~ .section-page-list1,.s26-sub .fred--block:has(.section-page-list1) ~ .fred--block .section-page-list1{margin-top:0;background:linear-gradient(180deg,#eef3f8,#f5f8fb)} .s26-sub .section-page-list1 ~ .section-page-list1::before,.s26-sub .fred--block:has(.section-page-list1) ~ .fred--block .section-page-list1::before{opacity:0} .s26-sub #wrapper-main .section-page-list1 ~ .section-page-list1 .section-title,.s26-sub #wrapper-main .fred--block:has(.section-page-list1) ~ .fred--block .section-page-list1 .section-title{color:var(--navy-900)} /* Tło ustawione w bloku Fred (opcja „Kolor tła” → style="background-color: …") ma pierwszeństwo przed domyślnym. Paleta w ustawieniach bloku: #ffffff, #f4f6f9 (szarość sekcji), #eef1f5, #f5f8fb, #eef4fa, #eef6f5 */ .s26-sub #wrapper-main .section[style*="background-color"]{background-image:none!important;margin-top:0} .s26-sub #wrapper-main .section[style*="background-color"]::before{opacity:0} .s26-sub #wrapper-main .section[style*="background-color"] .section-title{color:var(--navy-900)} .s26-sub #wrapper-main .section[style*="background-color"] .section-content{color:var(--muted)} .s26-sub .section[style*="background-color"] .slick-custom-navigation .slick-custom-arrow{background:#fff;border-color:var(--line);color:var(--navy-900)} .s26-sub .section[style*="background-color"] .slick-custom-navigation .slick-dots li button{background:rgba(5,35,61,.18)} .s26-sub .section[style*="background-color"] .slick-custom-navigation .slick-dots li.slick-active button{background:var(--blue-500)} .s26-sub .section-page-list1,.s26-sub .section-page-list2{padding:80px 0 50px} /* Podstrony: główne tło białe; sekcje z kolorem z bloku (paleta) – delikatna szarość #f4f6f9 na przemian z bielą */ body.s26-sub{background:#fff} /* Kontakt (szablon „Kontakt nowy”): bez niebieskiej grafiki starego szablonu – dane i formularz jako białe karty na szarym tle */ .s26-sub .contact .article-content-after{background:#f4f6f9;border-top:0;padding:60px 0 70px} .s26-sub .contact .article-content-after::before{display:none} .s26-sub .contact .article-content-after .col{padding-top:0} .s26-sub .contact .article-content .content-contact{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 34px;line-height:2.2;font-size:1rem;box-shadow:0 18px 40px -30px rgba(5,35,61,.45)} .s26-sub .contact .form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 34px 22px;box-shadow:0 18px 40px -30px rgba(5,35,61,.45);color:var(--ink)} .s26-sub .form .form-control{height:50px;border-radius:12px;border:1px solid var(--line);background:#f8fafc;padding:0 16px;font-size:.95rem;font-weight:400;transition:border-color .3s,background .3s,box-shadow .3s} .s26-sub .form textarea.form-control{height:180px;padding:12px 16px} .s26-sub .form .form-control::placeholder{color:var(--muted)} .s26-sub .form .form-control:focus{background:#fff;border-color:var(--blue-500);box-shadow:0 0 0 4px rgba(0,129,198,.12)} .s26-sub .form .form-control:focus::placeholder{color:#b5c0cc} .s26-sub .form .custom-control-label{font-size:.85rem;line-height:1.5;color:var(--muted)} .s26-sub #wrapper-main .form .btn{height:48px;padding:0 34px;border:0;border-radius:999px;background:linear-gradient(90deg,var(--blue-500),#2aa6e8);color:#fff;font-size:.95rem;font-weight:600;text-transform:none;box-shadow:0 12px 26px -12px rgba(0,129,198,.8)} .s26-sub #wrapper-main .form .btn:hover{background:var(--navy-900);color:#fff} .s26-sub #map{height:420px;margin:0} /* Baner podstrony (s26ArticleHeader): siatka, sieć punktów i wjazd tytułu jak w hero strony głównej */ .s26-sub #article-header .hero-grid{z-index:2} .s26-sub #article-header #net{z-index:2} .s26-sub #article-header .container{z-index:3} .s26-sub #article-header .rise{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em} .s26-sub #article-header .rise > span{display:inline-block;transform:translateY(110%);animation:rise 1s var(--ease) forwards} .s26-sub #article-header .container img{opacity:0;animation:fade .9s .35s var(--ease) forwards} @media (prefers-reduced-motion:reduce){.s26-sub #article-header .rise > span{transform:none;animation:none}.s26-sub #article-header .container img{opacity:1;animation:none}} /* Strona „Nasza oferta” – kafelki w siatce 12 kolumn; szerokość/wysokość z ustawień bloku „Nasza oferta - kafelek” (klasy s26-w3/4/6/8/12, s26-h1/2 – na kafelku, a w trybie edycji Fred na jego otoczce). Kolejność = kolejność bloków. */ .s26-sub .section-offer-list .row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:270px;gap:22px;margin:0} .s26-sub .section-offer-list .row > *{min-width:0;max-width:none;width:auto;padding:0} .s26-w3{grid-column:span 3}.s26-w4{grid-column:span 4}.s26-w6{grid-column:span 6}.s26-w8{grid-column:span 8}.s26-w12{grid-column:span 12} .s26-h2{grid-row:span 2} .s26-sub .section-offer-list .s26-tile .item-content{height:100%} .s26-sub .section-offer-list .s26-h2 .item-title{font-size:clamp(1.3rem,2vw,1.75rem)} /* zdjęcie kafelka jak na stronie głównej (.tile img): z object-fit, miniatura w proporcjach kafelka, powiększenie po najechaniu */ .s26-sub .section-offer-list .item-content > img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;z-index:-2;transition:transform 1.1s var(--ease)} .s26-sub .section-offer-list .item-content:hover > img{transform:scale(1.08)} /* animacje jak na stronie głównej: wjazd przy przewijaniu (.reveal, kolejno), poświata za kursorem (--mx/--my z biap2026.js), strzałka */ .s26-sub .section-offer-list .row > :nth-child(2){--d:.08s}.s26-sub .section-offer-list .row > :nth-child(3){--d:.16s}.s26-sub .section-offer-list .row > :nth-child(4){--d:.24s}.s26-sub .section-offer-list .row > :nth-child(5){--d:.32s}.s26-sub .section-offer-list .row > :nth-child(6){--d:.4s}.s26-sub .section-offer-list .row > :nth-child(n+7){--d:.48s} .s26-sub .section-offer-list .item-content::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(95,212,255,.28),transparent 45%);opacity:0;transition:opacity .4s} .s26-sub .section-offer-list .item-content:hover::after{opacity:1} /* treść kafelka jak na stronie głównej (.tile .in): tytuł + opis (pole Summary strony), strzałka; warstwy: zdjęcie -2, cienie -1, treść, link na całym kafelku */ .s26-sub .section-offer-list .item-content{display:flex;flex-direction:column;justify-content:flex-end} .s26-sub .section-offer-list .item-content > .in{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:24px 26px;color:#fff} .s26-sub #wrapper-main .section-offer-list .in .item-title{position:static;display:block;padding:0} .s26-sub .section-offer-list .item-desc{margin:8px 0 0;font-size:.92rem;line-height:1.45;color:rgba(255,255,255,.78);max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .5s} .s26-sub .section-offer-list .item-content:hover .item-desc{max-height:120px;opacity:1} .s26-sub .section-offer-list .item-desc.always{max-height:none;opacity:1;font-size:1rem;max-width:460px} .s26-sub .section-offer-list .item-desc:empty{display:none} .s26-sub .section-offer-list .in > .arrow{pointer-events:none} .s26-sub .section-offer-list .item-content:hover .arrow{background:var(--blue-500);transform:rotate(-45deg)} @media (hover:none){.s26-sub .section-offer-list .item-desc{max-height:none;opacity:1}} .s26-sub .section-offer-list .row > .fred--block{display:flex;flex-direction:column} .s26-sub .section-offer-list .row > .fred--block > .fred--block_content{flex:1;display:flex;min-height:0} .s26-sub .section-offer-list .row > .fred--block > .fred--block_content > .s26-tile{flex:1} @media (max-width:991px){ .s26-sub .section-offer-list .row{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:240px} .s26-w3,.s26-w4{grid-column:span 1}.s26-w6,.s26-w8,.s26-w12{grid-column:span 2} } @media (max-width:575px){ .s26-sub .section-offer-list .row{grid-template-columns:1fr;grid-auto-rows:210px;gap:16px} .s26-w3,.s26-w4,.s26-w6,.s26-w8,.s26-w12{grid-column:span 1}.s26-h2{grid-row:span 1} } /* Przycisk „Zapytaj o ofertę” jako pozycja menu: odnośnik (Weblink) z listy menu, Atrybuty odnośnika: class="nav-cta" */ .nav a.nav-cta{margin-left:8px;padding:10px 18px;background:var(--blue-500);color:#fff;font-weight:600;font-size:.88rem;box-shadow:0 10px 30px -8px rgba(0,129,198,.7);transition:transform .3s var(--ease),box-shadow .3s,background .3s} .nav a.nav-cta:hover,.header.scrolled .nav a.nav-cta:hover{background:var(--blue-500);color:#fff;transform:translateY(-2px);box-shadow:0 16px 34px -10px rgba(0,129,198,.8)} .header.scrolled .nav a.nav-cta{color:#fff} .mnav > ul > li > a.nav-cta{display:inline-block;margin-top:18px;padding:12px 26px;border:0;border-radius:999px;background:var(--blue-500);color:#fff;font-size:1.3rem} #wrapper-contact-form{scroll-margin-top:110px}