body, html {
font-size: 17px;
line-height: 29px;
}
body {
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 1s;
animation-name: fadeIn;
animation-duration: 1s;
font-family: var(--font-main);
color: var(--txt-color);
font-size: 17px;
font-weight: 400;
line-height: 29px;
--txt-color: #000;
--color-main: #eaeaea;
--font-main: 'Montserrat', sans-serif;
overflow-x: hidden;
}
* {
outline: none;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
main {
position: relative;
}
.wrapper-small {
padding-left: 6vw;
padding-right: 6vw;
}
.wrapper {
padding-left: 9vw;
padding-right: 9vw;
}
.wrapper-big {
padding-left: 12vw;
padding-right: 12vw;
}
.flex-wrapper {
display: flex;
flex-wrap: wrap;
}
.padds {
padding-left: 10px;
padding-right: 10px;
}
.padd-top {
padding-top: 60px;
}
.marg-top-small {
margin-top: 30px;
}
.marg-top {
margin-top: 60px;
}
.marg-top-big {
margin-top: 100px;
}
.marg-top-biggest {
margin-top: 160px;
}
.marg-bottom {
margin-bottom: 60px;
}
.w-100 {
width: 100%;
}
.bottom-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.bottom-links a {
margin: 10px;
min-width: 160px;
}
.slick-dots {
margin: 20px 0 0 0;
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
.slick-dots li {
margin: 3px;
}
.slick-dots li button {
border-radius: 50%;
cursor: pointer;
background-color: var(--color-main);
padding: 0;
margin: 0;
width: 12px;
height: 12px;
transition: .3s;
color: transparent;
border: none;
font-size: 0;
}
.slick-dots li.slick-active button {
background-color: var(--txt-color);
}
.slick-lightbox .slick-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
border: none;
font-size: 0;
color: transparent;
background-color: #fff;
width: 34px;
height: 34px;
background-repeat: no-repeat;
background-size: 12px;
background-position: center;
background-image: url(../assets/arrow.svg);
cursor: pointer;
z-index: 4;
}
.slick-lightbox .slick-prev {
transform: translateY(-50%) rotate(180deg);
left: 20px;
}
.slick-lightbox .slick-next {
right: 20px;
}
.slick-lightbox-slick-caption {
margin-top: 10px;
display: inline-block;
}
.searchside form {
display: flex;
align-items: center;
margin-bottom: 60px;
}
.searchside form input {
flex: 1;
height: 50px;
font-size: .9rem;
padding: 20px;
border: 1px solid #000;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
color: var(--txt-color);
}
.searchside form input::placeholder {
color: var(--txt-color);
}
.searchside form button {
height: 50px;
width: 50px;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 0;
border: none;
background-color: var(--txt-color);
cursor: pointer;
transition: .3s;
}
.searchside form button:hover {
background-color: #707070;
}
.searchside form button svg {
filter: brightness(0) invert(1);
width: 17px;
height: 100%;
}
.play-cbtn {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: none;
font-size: 0;
cursor: pointer;
color: transparent;
background-color: transparent;
z-index: 9;
width: 100px;
height: 100px;
padding: 0;
box-shadow: 0px 3px 10px -6px rgba(66, 68, 90, 1);
transition: .3s;
}
.play-cbtn.loaded {
transform: translate(-50%, -50%) scale(1);
}
.play-cbtn span {
background-color: rgba(143, 176, 176, .6);
border-radius: 50%;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 9;
transition: .3s;
}
.play-cbtn:hover span {
background-color: #363636;
}
.play-cbtn svg {
width: 55%;
height: auto;
}
.play-btn:not(.paused) {
opacity: 0;
}
.play-btn.paused {
opacity: 1;
}
.video-embed video {
padding: 60px;
max-height: 100%;
max-width: 90%;
}
.video-embed {
z-index: 99999;
background-color:rgba(143, 176, 176, .53);
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.video-spinner-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.video-spinner,
.video-spinner:after {
border-radius: 50%;
width: 100px;
height: 100px;
}
.video-spinner {
display: block;
font-size: 10px;
text-indent: -9999em;
border-top: 1.1em solid rgba(59, 49, 39, 0.5);
border-right: 1.1em solid rgba(59, 49, 39, 0.5);
border-bottom: 1.1em solid rgba(59, 49, 39, 0.5);
border-left: 1.1em solid rgba(37, 30, 24, .5);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.video-embed.open {
display: flex;
}
.video-embed__item {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
padding: 20px;
}
.video-embed iframe {
max-width: 100%;
width: 1100px;
height: 500px;
}
.video-close {
position: absolute;
top: 100px;
right: 60px;
border: none;
background-color: transparent;
font-size: 42px;
font-weight: 600;
z-index: 9;
color: var(--color-main);
cursor: pointer;
}
.posrel {
position: relative;
z-index: 4;
}
.section-heading {
font-size: 29px;
line-height: 140%;
font-weight: 400;
color: var(--txt-color);
margin-bottom: 30px;
}
.page-heading {
font-size: 42px;
line-height: 140%;
font-weight: 500;
color: var(--txt-color);
margin-bottom: 30px;
}
.text-center {
text-align: center;
}
.error-wrapper {
margin-top: 120px;
display: flex;
align-items: center;
flex-direction: column;
}
.cbtn {
display: inline-block;
padding: 10px 25px;
background-color: var(--color-main);
border: 1px solid var(--color-main);
color: #000;
transition: .3s;
cursor: pointer;
border-radius: 0;
}
.cbtn:hover {
color: #fff;
background-color: var(--txt-color);
}
/* @ @ SEARCH POP START @ @ */
.pop-search {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999999;
display: none;
background-color: rgba(255,255,255, .95);
padding: 20px;
}
.pop-search>div {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.pop-search form {
display: flex;
align-items: center;
}
.pop-search form input {
width: 400px;
background-color: transparent;
font-size: 1.4rem;
padding: 20px 15px;
font-family: 'Montserrat', sans-serif;
border: none;
border-bottom: 1px solid var(--txt-color);
color: var(--txt-color);
max-width: calc(100% - 45px);
}
.pop-search form input::placeholder {
color: var(--txt-color);
font-weight: 300;
}
.pop-search button {
cursor: pointer;
background-color: transparent;
border: none;
margin-left: 15px;
width: 30px;
height: 30px;
}
.pop-search__close {
position: absolute;
top: 120px;
right: 120px;
font-weight: 300;
font-size: 42px;
cursor: pointer;
background-color: transparent;
border: none;
}
.search-results__item {
margin-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #eaeaea;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
line-height: 125%;
}
.search-results__title {
font-weight: 500;
}
.search-results__link {
font-size: .8rem;
}
/* @ @ SEARCH POP END @ @ */
/* @ @ BANER START @ @ */
/* @ @ BANER END @ @ */
/* @ @ START @ @ */
/* @ @ END @ @ */
/* @ @ START @ @ */
/* @ @ END @ @ */
/* @ @ START @ @ */
/* @ @ END @ @ */
/* @ @ START @ @ */
/* @ @ END @ @ */
/* @ @ START @ @ */
/* @ @ END @ @ */
/* @ @ START @ @ */
/* @ @ END @ @ */
/* @ @ START @ @ */
/* @ @ END @ @ */
/* @ @ START @ @ */
/* @ @ END @ @ */
/* @ @ START @ @ */
/* @ @ END @ @ */
/* @ @ START @ @ */
/* @ @ END @ @ */
/* @ @ START @ @ */
/* @ @ END @ @ */
/* @ @ START @ @ */
/* @ @ END @ @ */
/* @ @ START @ @ */
/* @ @ END @ @ */
/* @ @ START @ @ */
/* @ @ END @ @ */
/* @ @ START @ @ */
/* @ @ END @ @ */
/* @ @ START @ @ */
/* @ @ END @ @ */
/* @ @ START @ @ */
/* @ @ END @ @ */
/* @ @ START @ @ */
/* @ @ END @ @ */
/* @ @ START @ @ */
/* @ @ END @ @ */
/* @ @ START @ @ */
/* @ @ END @ @ */
/* @ @ START @ @ */
/* @ @ END @ @ */
/* @ @ START @ @ */
/* @ @ END @ @ */
/* @ @ START @ @ */
/* @ @ END @ @ */
/* @ @ START @ @ */
/* @ @ END @ @ */
/* @ @ MEDIA START @ @ */
@media(min-width: 2400px) {
main {
max-width: 2666px;
margin-left: auto;
margin-right: auto;
}
.wrap {
max-width: 2400px;
margin-left: auto;
margin-right: auto;
}
.wrapper {
padding-left: 120px;
padding-right: 120px;
max-width: 2400px;
margin-left: auto;
margin-right: auto;
}
.wrapper-big {
padding-left: 220px;
padding-right: 220px;
max-width: 2400px;
margin-left: auto;
margin-right: auto;
}
.wrapper-small {
padding-left: 60px;
padding-right: 60px;
max-width: 2400px;
margin-left: auto;
margin-right: auto;
}
}
@media(max-width: 1440px) {
.wrapper {
padding-left: 4vw;
padding-right: 4vw;
}
.wrapper-big {
padding-right: 6vw;
padding-left: 6vw;
}
}
@media(max-width: 1380px) {
}
@media(max-width: 1280px) {
}
@media(max-width: 1200px) {
}
@media(max-width: 1070px) {
}
@media(min-width: 1101px) {
}
@media(max-width: 1100px) {
body, html {
font-size: 16px;
line-height: 27px;
}
.wrap,
.wrapper-big,
.wrapper-small,
.wrapper {
padding-left: 10px;
padding-right: 10px;
}
.video-embed iframe {
height: 400px;
}
}
@media(max-width: 767px) {
body, html {
font-size: 15px;
line-height: 24px;
}
.padd-top {
padding-top: 30px;
}
.marg-top-biggest {
margin-top: 100px;
}
.marg-top {
margin-top: 40px;
}
.marg-top-big {
margin-top: 60px;
}
.video-close {
right: 0;
}
.video-embed__item {
padding: 20px 40px;
}
.video-embed iframe {
height: 300px;
}
}
/* @ @ MEDIA END @ @ */
/* === Site tokens: kolory + fonty projektu === */
:root {
--sk-bg: #ECEEF0;
--sk-fg: #2B3038;
--sk-fg-muted: #6B7076;
--sk-acc: #484F57;
--sk-acc-lt: #8C959F;
--sk-border: rgba(43,48,56,0.16);
--sk-dark-bg: #101317;
--sk-dark-fg: #E3E5E8;
--sk-dark-fg-muted: #8F9295;
--sk-dark-border: rgba(227,229,232,0.16);
--sk-dark-border-soft: rgba(227,229,232,0.12);
--sk-font-body: 'Montserrat', system-ui, sans-serif;
--sk-font-heading: 'Archivo', system-ui, sans-serif;
}
/* === Site Header === */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 45;
background: rgba(236, 238, 240, 0.72);
backdrop-filter: saturate(1.1) blur(14px);
-webkit-backdrop-filter: saturate(1.1) blur(14px);
border-bottom: 1px solid var(--sk-border);
transition: background 340ms ease, border-color 340ms ease, box-shadow 340ms ease;
}
.site-header.is-scrolled {
background: rgba(236, 238, 240, 0.94);
box-shadow: 0 12px 30px -22px rgba(43,48,56,0.35);
}
.site-header.is-scrolled .site-header__logo img { filter: brightness(0); }
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(16px, 3vw, 48px);
height: clamp(64px, 6vw, 82px);
}
.site-header__logo {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
flex-shrink: 0;
}
.site-header__logo img {
max-width: 100%;
width: auto;
height: clamp(26px, 2.9vw, 36px);
display: block;
transition: filter 340ms ease;
}
.site-header__logo-text {
font-family: var(--sk-font-heading);
font-weight: 700;
font-size: 16px;
line-height: 150%;
letter-spacing: 0.02em;
color: var(--sk-fg);
}
.site-header__nav {
display: flex;
align-items: center;
margin-left: auto;
min-width: 0;
}
.site-header__menu {
display: flex;
align-items: center;
gap: clamp(14px, 1.6vw, 24px);
list-style: none;
margin: 0;
padding: 0;
}
.site-header__menu > li { position: relative; }
.site-header__menu a {
display: inline-block;
font-family: var(--sk-font-heading);
font-size: 14.5px;
line-height: 150%;
font-weight: 400;
color: var(--sk-fg-muted);
padding: 8px 0;
box-shadow: inset 0 -1px 0 transparent;
transition: color 340ms ease, box-shadow 240ms ease;
}
.site-header__menu a:hover,
.site-header__menu .current-menu-item > a,
.site-header__menu .current-menu-parent > a,
.site-header__menu .current-menu-ancestor > a,
.site-header__menu .current_page_parent > a,
.site-header__menu .current_page_ancestor > a {
color: var(--sk-fg);
box-shadow: inset 0 -1px 0 currentColor;
}
.site-header__menu .sub-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background: var(--sk-bg);
border: 1px solid var(--sk-border);
box-shadow: 0 24px 50px rgba(43,48,56,0.14);
padding: 12px 0;
margin: 0;
list-style: none;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity 240ms ease, transform 240ms ease, visibility 240ms;
}
.site-header__menu > li:hover > .sub-menu,
.site-header__menu > li:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.site-header__menu .sub-menu a {
display: block;
padding: 10px 22px;
box-shadow: none;
color: var(--sk-fg);
}
.site-header__menu .sub-menu a:hover { background: rgba(43,48,56,0.05); color: var(--sk-acc); }
.site-header__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.site-header__mobile { display: none; align-items: center; gap: 10px; }
/* Hamburger — design ref: KOZIEJ STRONA.dc.html linia 81-85 (3 kreski, border 46×44) */
.nav-icon {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 46px;
height: 44px;
padding: 0 12px;
background: transparent;
border: 1px solid rgba(43,48,56,0.25);
cursor: pointer;
color: var(--sk-fg);
transition: border-color 240ms ease;
}
.nav-icon:hover,
.nav-icon:focus-visible {
border-color: var(--sk-acc);
outline: none;
}
.nav-icon span {
display: block;
width: 100%;
height: 1px;
background: currentColor;
transition: opacity 240ms ease, transform 240ms ease;
}
.nav-icon span:nth-child(2) { opacity: 0.6; }
/* Wersja dark (na ciemnym baner-top) — jaśniejszy border */
body.has-dark-hero .site-header:not(.is-scrolled) .nav-icon {
border-color: rgba(255,255,255,0.35);
}
body.has-dark-hero .site-header:not(.is-scrolled) .nav-icon:hover,
body.has-dark-hero .site-header:not(.is-scrolled) .nav-icon:focus-visible {
border-color: rgba(255,255,255,0.85);
}
/* Mobile menu overlay — design ref: KOZIEJ STRONA.dc.html linia 119-144 */
.site-mobile-menu {
position: fixed;
inset: 0;
z-index: 200;
background: var(--sk-bg);
display: none;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
}
.site-mobile-menu.is-open {
display: flex;
animation: skFadeIn 220ms ease both;
}
@keyframes skFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.site-mobile-menu__top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px clamp(16px, 3vw, 40px);
border-bottom: 1px solid rgba(43,48,56,0.16);
}
.site-mobile-menu__brand {
font-family: var(--sk-font-heading);
font-stretch: 80%;
font-weight: 700;
font-size: 17px;
line-height: 130%;
color: var(--sk-fg);
}
.site-mobile-menu__close {
width: 44px;
height: 44px;
background: transparent;
border: 1px solid rgba(43,48,56,0.25);
color: var(--sk-fg);
font-size: 19px;
line-height: 100%;
cursor: pointer;
}
.site-mobile-menu__close:hover,
.site-mobile-menu__close:focus-visible {
border-color: var(--sk-acc);
color: var(--sk-acc);
outline: none;
}
.site-mobile-menu__body {
padding: 24px clamp(16px, 3vw, 40px) 40px;
}
.site-mobile-menu__featured {
list-style: none;
margin: 0 0 26px;
padding: 0;
display: grid;
gap: 0;
}
.site-mobile-menu__featured li { display: block; }
.site-mobile-menu__featured-item {
display: block;
font-family: var(--sk-font-heading);
font-stretch: 78%;
font-weight: 700;
font-size: 30px;
line-height: 115%;
letter-spacing: -0.014em;
color: var(--sk-fg);
padding: 13px 0;
border-bottom: 1px solid rgba(43,48,56,0.12);
text-decoration: none;
transition: color 240ms ease;
}
.site-mobile-menu__featured-item:hover,
.site-mobile-menu__featured-item:focus-visible {
color: var(--sk-acc);
outline: none;
}
.site-mobile-menu__nav ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0;
}
.site-mobile-menu__nav li a {
display: block;
font-family: var(--sk-font-body);
font-size: 17px;
line-height: 150%;
font-weight: 400;
color: #434548;
padding: 12px 0;
border-bottom: 1px solid rgba(43,48,56,0.1);
text-decoration: none;
transition: color 240ms ease;
}
.site-mobile-menu__nav li a:hover,
.site-mobile-menu__nav li a:focus-visible {
color: var(--sk-fg);
outline: none;
}
.site-mobile-menu__nav li.current-menu-item > a,
.site-mobile-menu__nav li.current-menu-parent > a,
.site-mobile-menu__nav li.current-menu-ancestor > a,
.site-mobile-menu__nav li.current_page_parent > a,
.site-mobile-menu__nav li.current_page_ancestor > a {
color: var(--sk-fg);
font-weight: 500;
border-bottom-color: rgba(43,48,56,0.32);
}
.site-mobile-menu__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 26px;
padding: 18px 22px;
font-family: var(--sk-font-heading);
font-size: 12px;
line-height: 130%;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
background: var(--sk-fg);
color: var(--sk-bg);
text-decoration: none;
background-image: linear-gradient(var(--sk-acc), var(--sk-acc));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% 0%;
transition: background-size 520ms cubic-bezier(0.16,1,0.3,1), color 260ms ease;
}
.site-mobile-menu__cta:hover,
.site-mobile-menu__cta:focus-visible {
background-size: 100% 100%;
color: #FFFFFF;
outline: none;
}
.site-mobile-menu__cta-sep {
width: 1px;
height: 11px;
background: currentColor;
opacity: 0.4;
}
.site-mobile-menu__cta-arrow {
font-size: 13px;
line-height: 100%;
}
body.mobile-menu-open { overflow: hidden; }
/* Consultation modal — formularz otwierany z CTA w nagłówku. */
.consultation-modal {
position: fixed;
inset: 0;
z-index: 320;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: opacity 220ms ease, visibility 220ms ease;
}
.consultation-modal.is-open {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.consultation-modal__backdrop {
position: absolute;
inset: 0;
border: 0;
padding: 0;
background: rgba(16, 19, 23, 0.72);
cursor: pointer;
}
.consultation-modal__dialog {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
width: 100%;
max-width: 1000px;
max-height: 86svh;
overflow-y: auto;
overflow: hidden;
background: var(--sk-bg);
color: var(--sk-fg);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.26);
transform: translateY(14px);
transition: transform 220ms ease;
}
.consultation-modal.is-open .consultation-modal__dialog { transform: translateY(0); }
.consultation-modal__image {
position: relative;
min-height: 0;
overflow: hidden;
background: #15181C;
}
.consultation-modal__image > img:first-child {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
display: block;
object-fit: cover;
object-position: 50% 22%;
filter: saturate(1.04) contrast(1.03);
}
.consultation-modal__logo {
position: absolute;
left: clamp(14px, 1.4vw, 20px);
right: clamp(14px, 1.4vw, 20px);
bottom: clamp(10px, 1vw, 14px);
width: auto !important;
max-width: calc(100% - clamp(28px, 2.8vw, 40px));
height: clamp(60px, 7vw, 96px) !important;
object-fit: contain !important;
object-position: left bottom;
opacity: 0.96;
}
.consultation-modal__content {
min-width: 0;
min-height: 0;
overflow-y: auto;
padding: clamp(30px, 3.4vw, 46px) clamp(26px, 3.2vw, 44px);
}
.consultation-modal__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
}
.consultation-modal__close {
flex: 0 0 auto;
width: 38px;
height: 38px;
margin: -10px -12px 0 0;
border: 0;
border-radius: 50%;
background: transparent;
box-shadow: inset 0 0 0 1px rgba(43,48,56,0.2);
color: #4F5459;
font-size: 24px;
cursor: pointer;
}
.consultation-modal__close:hover,
.consultation-modal__close:focus-visible { color: var(--sk-fg); box-shadow: inset 0 0 0 1px rgba(43,48,56,0.5); outline: none; }
.consultation-modal__content .section-eyebrow { display: block; color: #6B7076; }
.consultation-modal__content .section-heading { margin: 12px 0 0; color: var(--sk-fg); }
.consultation-modal__intro,
.consultation-modal__fallback { margin: 13px 0 0; color: #4F5459; }
.consultation-modal__intro { margin: 13px 0 0; color: #4F5459; }
.consultation-modal__label { display: block; font-family: var(--sk-font-heading); font-size: 10.5px; line-height: 130%; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #6B7076; }
.consultation-modal__online { display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 2vw, 28px); margin-top: clamp(24px, 2.6vw, 32px); padding: clamp(20px, 2.2vw, 26px); background: var(--sk-fg); color: var(--sk-bg); transition: background 280ms ease; }
.consultation-modal__online:hover,
.consultation-modal__online:focus-visible { background: var(--sk-acc); color: #FFFFFF; outline: none; }
.consultation-modal__online-copy { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.consultation-modal__online .consultation-modal__label { color: rgba(236,238,240,0.7); }
.consultation-modal__online-title { font-family: var(--sk-font-heading); font-stretch: 80%; font-weight: 700; font-size: clamp(20px, 1.9vw, 26px); line-height: 104%; letter-spacing: -0.014em; }
.consultation-modal__online-arrow { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(236,238,240,0.4); font-size: 15px; }
.consultation-modal__contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(18px, 2.2vw, 36px); margin-top: clamp(24px, 2.6vw, 32px); padding-top: clamp(18px, 2vw, 24px); border-top: 1px solid rgba(43,48,56,0.22); }
.consultation-modal__contact-link { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 10px; font-family: var(--sk-font-heading); font-stretch: 84%; font-weight: 600; font-size: clamp(15px, 1.4vw, 17px); line-height: 130%; color: var(--sk-fg); transition: color 220ms ease; }
.consultation-modal__contact-link:hover,
.consultation-modal__contact-link:focus-visible { color: var(--sk-acc); outline: none; }
body.consultation-modal-open { overflow: hidden; }
@media (max-width: 640px) {
.consultation-modal { padding: 12px; align-items: flex-end; }
.consultation-modal__dialog { display: block; max-height: 92vh; }
.consultation-modal__image { display: none; }
.consultation-modal__content { padding: 30px 20px 24px; }
}
@media (max-width: 1200px) {
.site-header__menu { gap: 16px; }
.site-header__menu a { font-size: 13.5px; line-height: 150%; }
}
@media (max-width: 1100px) {
.site-header__nav,
.site-header__actions { display: none; }
.site-header__mobile { display: flex; }
}
/* === Site Footer === */
.site-footer {
background: var(--sk-dark-bg);
color: var(--sk-dark-fg);
padding-top: clamp(48px, 6vw, 100px);
padding-bottom: 26px;
font-family: var(--sk-font-body);
}
.site-footer__top {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: clamp(24px, 3.4vw, 56px);
padding-bottom: clamp(32px, 4vw, 60px);
border-bottom: 1px solid var(--sk-dark-border);
}
.site-footer__cta-title {
flex: 1 1 460px;
min-width: 0;
color: var(--sk-fg-strong);
}
.site-footer__cta-title p { margin: 0; }
.site-footer__cta-btn { flex: 0 1 300px; min-width: 240px; }
.site-footer__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: clamp(28px, 3.4vw, 56px);
padding: clamp(30px, 3.6vw, 52px) 0 clamp(26px, 3vw, 40px);
}
.site-footer__logo {
max-width: 100%;
width: auto;
height: 42px;
margin-bottom: 24px;
filter: brightness(0) invert(1);
opacity: 0.92;
}
.site-footer__socials { display: flex; flex-wrap: wrap; gap: 10px; }
.site-footer__social {
padding: 9px 14px;
font-size: 11.5px;
line-height: 130%;
letter-spacing: 0.16em;
font-weight: 500;
}
.site-footer__links { display: grid; gap: 11px; font-size: 15.5px; line-height: 150%; font-weight: 300; }
.site-footer__link { color: var(--sk-dark-fg-muted); transition: color 240ms ease; }
.site-footer__link:hover { color: #EFF0F1; }
.site-footer__kliniki { display: grid; gap: 16px; }
.site-footer__klinika { display: grid; gap: 4px; }
.site-footer__klinika-name {
font-family: var(--sk-font-heading);
font-stretch: 84%;
font-weight: 600;
font-size: 14.5px;
line-height: 150%;
letter-spacing: 0.01em;
color: #EFF0F1;
}
.site-footer__klinika-addr { font-size: 14.5px; line-height: 150%; font-weight: 300; color: #838689; }
.site-footer__bigtext {
padding-top: clamp(24px, 3vw, 44px);
border-top: 1px solid var(--sk-dark-border-soft);
}
.site-footer__bigtext svg { display: block; width: 100%; height: auto; }
.site-footer__bigtext text {
font-family: var(--sk-font-heading);
font-stretch: 62%;
font-weight: 700;
font-size: 100px;
fill: rgba(227,229,232,0.1);
}
.site-footer__bottom {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
justify-content: space-between;
margin-top: clamp(20px, 2.6vw, 36px);
padding-top: 18px;
border-top: 1px solid var(--sk-dark-border-soft);
font-family: var(--sk-font-heading);
font-size: 12px;
line-height: 150%;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #838689;
}
.site-footer__bottom-links { display: flex; flex-wrap: wrap; gap: 22px; }
.site-footer__bottom-link { color: #838689; transition: color 240ms ease; }
.site-footer__bottom-link:hover { color: #EFF0F1; }
.site-footer__built { display: inline-flex; align-items: center; gap: 10px; text-transform: none; letter-spacing: 0; font-family: var(--sk-font-body); font-size: 12px; line-height: 150%; color: #838689; }
.site-footer__built a { display: inline-flex; align-items: center; }
.site-footer__built img { display: block; filter: brightness(0) invert(1); opacity: 0.6; transition: opacity 240ms ease; height: 18px; width: auto; }
.site-footer__built a:hover img { opacity: 1; }
@media (max-width: 767px) {
.site-footer__cta-title { font-size: clamp(28px, 9vw, 44px); line-height: 100%; }
.site-footer__cta-btn { flex-basis: 100%; }
.site-footer__bottom { justify-content: center; text-align: center; }
.site-footer__bottom-links { justify-content: center; }
.site-footer__bigtext text { font-size: 70px; }
}
/* === Design System — Globals === */
/* Dodatkowe tokeny palety (uzupełnienie do --sk-* zdefiniowanych wyżej) */
:root {
--sk-bg-muted: #DDE0E3; /* jasny szary tła sekcji */
--sk-dark-bg-alt: #15181C; /* ciemne tło sekcji (mocniejsze niż footer) */
--sk-fg-strong: #EFF0F1; /* biały-jasny (hover na dark) */
--sk-border-strong: rgba(43,48,56,0.22);
--sk-border-soft: rgba(43,48,56,0.14);
--sk-white: #FFFFFF;
--sk-black: #000000;
}
/* --- Containers (poziomy padding wg designu) --- */
.sk-container {
width: 100%;
padding-left: clamp(28px, 9vw, 250px);
padding-right: clamp(28px, 9vw, 250px);
margin-left: auto;
margin-right: auto;
}
.sk-container--narrow {
padding-left: clamp(20px, 6vw, 120px);
padding-right: clamp(20px, 6vw, 120px);
max-width: 1100px;
}
.sk-container--wide {
padding-left: clamp(16px, 3vw, 60px);
padding-right: clamp(16px, 3vw, 60px);
}
.sk-container--flush {
padding-left: 0;
padding-right: 0;
}
/* --- Sections (kontener + pionowy padding + kolor tła) --- */
.sk-section {
padding: clamp(72px, 8.5vw, 140px) clamp(28px, 9vw, 250px);
background: var(--sk-bg);
color: var(--sk-fg);
}
.sk-section--muted { background: var(--sk-bg-muted); }
.sk-section--dark { background: var(--sk-dark-bg-alt); color: var(--sk-dark-fg); }
.sk-section--darker { background: var(--sk-dark-bg); color: var(--sk-dark-fg); }
.sk-section--tight { padding-top: clamp(48px, 6vw, 100px); padding-bottom: clamp(48px, 6vw, 100px); }
.sk-section--roomy { padding-top: clamp(96px, 10vw, 180px); padding-bottom: clamp(96px, 10vw, 180px); }
/* --- Section headings — nadpisanie bazowej + wariacje --- */
.section-heading {
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(32px, 5.2vw, 78px);
line-height: 0.96;
letter-spacing: -0.019em;
color: inherit;
margin: 0 0 clamp(20px, 2vw, 32px);
text-wrap: balance;
}
.section-heading--xl {
font-size: clamp(38px, 5.2vw, 84px);
line-height: 0.92;
letter-spacing: -0.02em;
}
.section-heading--lg {
font-size: clamp(30px, 4.4vw, 62px);
line-height: 0.98;
}
.section-heading--md {
font-size: clamp(24px, 3.4vw, 42px);
font-stretch: 84%;
letter-spacing: -0.01em;
line-height: 1.05;
}
.section-heading--sm {
font-size: clamp(20px, 2.4vw, 28px);
font-stretch: 88%;
font-weight: 600;
letter-spacing: 0;
line-height: 1.15;
}
.section-heading--serif {
font-family: 'Georgia', 'Times New Roman', serif;
font-stretch: normal;
font-weight: 400;
font-style: italic;
letter-spacing: 0;
}
/* Eyebrow — mały label nad nagłówkiem */
.section-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.7em;
font-family: var(--sk-font-heading);
font-size: 11px;
line-height: 150%;
font-weight: 600;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--sk-acc);
margin: 0 0 clamp(14px, 1.6vw, 20px);
}
.section-eyebrow--muted { color: var(--sk-acc-lt); font-weight: 500; letter-spacing: 0.2em; }
.section-eyebrow--dark { color: var(--sk-dark-fg-muted); }
/* --- Buttons (cbtn) — rozszerzenie bazy + wariacje --- */
.cbtn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 13px 22px;
font-family: var(--sk-font-heading);
font-size: 11px;
line-height: 130%;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sk-fg);
background-color: transparent;
border: 1px solid var(--sk-border);
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% 0%;
background-image: linear-gradient(var(--sk-acc), var(--sk-acc));
cursor: pointer;
text-decoration: none;
border-radius: 0;
transition: background-size 520ms cubic-bezier(0.16,1,0.3,1), color 260ms ease, border-color 340ms ease;
}
.cbtn:hover {
background-size: 100% 100%;
color: var(--sk-white);
border-color: var(--sk-acc);
}
/* Warianty */
.cbtn--primary {
color: var(--sk-bg);
background-color: var(--sk-fg);
border-color: var(--sk-fg);
background-image: linear-gradient(var(--sk-acc), var(--sk-acc));
background-size: 100% 0%;
}
.cbtn--primary:hover { background-size: 100% 100%; color: var(--sk-white); border-color: var(--sk-acc); }
.cbtn--light {
color: var(--sk-fg);
background-color: var(--sk-bg);
border-color: var(--sk-bg);
background-image: linear-gradient(var(--sk-acc-lt), var(--sk-acc-lt));
background-size: 100% 0%;
}
.cbtn--light:hover { background-size: 100% 100%; color: var(--sk-dark-bg); border-color: var(--sk-acc-lt); }
.cbtn--outline {
color: var(--sk-fg);
background-color: transparent;
border-color: rgba(43,48,56,0.42);
background-image: linear-gradient(var(--sk-fg), var(--sk-fg));
background-size: 100% 0%;
}
.cbtn--outline:hover { background-size: 100% 100%; color: var(--sk-bg); border-color: var(--sk-fg); }
.cbtn--ghost {
color: currentColor;
background: transparent;
border-color: transparent;
background-image: none;
padding-left: 4px;
padding-right: 4px;
box-shadow: inset 0 -1px 0 currentColor;
}
.cbtn--ghost:hover { color: var(--sk-acc); background: transparent; }
.cbtn--chip {
padding: 10px 16px;
font-family: var(--sk-font-heading);
font-stretch: 86%;
font-size: 13.5px;
line-height: 130%;
font-weight: 500;
letter-spacing: 0.01em;
text-transform: none;
color: var(--sk-fg);
background: transparent;
background-image: none;
border: 0;
box-shadow: 0 0 0 1px var(--sk-border-strong);
transition: background 240ms ease, box-shadow 240ms ease, color 240ms ease;
}
.cbtn--chip:hover { background: var(--sk-fg); color: var(--sk-bg); box-shadow: 0 0 0 1px var(--sk-fg); }
/* Rozmiary */
.cbtn--sm { padding: 13px 18px; font-size: 11px; line-height: 130%; gap: 10px; }
.cbtn--lg { padding: 16px 24px; font-size: 11.5px; line-height: 130%; gap: 12px; }
/* Wariant „icon" — sama strzałka (::after) */
.cbtn--icon::after {
content: '\2192';
font-family: inherit;
font-size: 13px;
line-height: 1;
position: relative;
top: -1px;
transition: transform 260ms ease;
}
.cbtn--icon:hover::after { transform: translateX(4px); }
/* Wariant „sep" — separator (::before order:2) + strzałka (::after order:3), tekst na order:0 */
.cbtn--sep::before {
content: '';
display: inline-block;
width: 1px;
height: 12px;
background: currentColor;
opacity: 0.4;
flex: 0 0 auto;
order: 2;
}
.cbtn--sep::after {
content: '\2192';
font-family: inherit;
font-size: 13px;
line-height: 1;
position: relative;
top: -1px;
order: 3;
transition: transform 260ms ease;
}
.cbtn--sep:hover::after { transform: translateX(4px); }
/* Wariant „on-dark" — dopasowanie do ciemnego tła (użyj explicit obok innych wariantów) */
.cbtn--on-dark {
color: var(--sk-dark-fg-muted);
border-color: rgba(227,229,232,0.2);
background-image: linear-gradient(var(--sk-acc-lt), var(--sk-acc-lt));
}
.cbtn--on-dark:hover { color: var(--sk-dark-bg); border-color: var(--sk-acc-lt); background-size: 100% 100%; }
/* Wrapper (już używany w 404.php) */
.cbtn-wrapper { display: flex; flex-wrap: wrap; gap: 12px; }
.cbtn-wrapper.text-center { justify-content: center; }
/* === Home – Hero === */
.home-hero { padding-top: 0; padding-bottom: 0; }
/* Stage – dark full-bleed (wychodzi poza sk-container przez negative margin) */
.home-hero__stage {
position: relative;
margin: 0 calc(-1 * clamp(28px, 9vw, 250px)) clamp(4px, 1vw, 14px);
min-height: min(92svh, 960px);
padding-top: 130px;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
background: var(--sk-dark-bg-alt);
color: var(--sk-dark-fg);
}
.home-hero__gradient { position: absolute; inset: 0; pointer-events: none; }
.home-hero__gradient--radial { background: radial-gradient(58% 54% at 70% 20%, rgba(150,163,178,0.42) 0%, rgba(21,24,28,0) 70%); }
.home-hero__gradient--right {
top: 0; bottom: 0; right: 0; left: auto; inset: auto;
width: min(58%, 900px);
background: linear-gradient(100deg, rgba(21,24,28,0) 0%, rgba(74,82,92,0.5) 46%, rgba(21,24,28,0.2) 100%);
}
.home-hero__gradient--vert { background: linear-gradient(180deg, rgba(15,17,20,0.78) 0%, rgba(15,17,20,0.2) 34%, rgba(15,17,20,0.94) 100%); }
/* Wrap — sylwetka + aside side-by-side, absolute w prawej dolnej stage'a */
.home-hero__silhouette-wrap {
position: absolute;
top: 0;
bottom: 0;
right: clamp(-40px, 4vw, 150px);
display: flex;
align-items: stretch;
justify-content: flex-end;
gap: clamp(12px, 1.6vw, 30px);
pointer-events: none;
z-index: 1;
}
.home-hero__silhouette-wrap > picture { display: contents; }
/* Sylwetka — flex-item po prawej wewnątrz wrap, dosunięta do dołu */
.home-hero__silhouette {
align-self: flex-end;
flex: 0 1 auto;
height: min(84svh, 940px);
max-width: min(38vw, 620px);
width: auto;
object-fit: contain;
object-position: 100% 100%;
filter: saturate(1.02) contrast(1.04) brightness(0.98) drop-shadow(-34px 24px 70px rgba(0,0,0,0.66));
}
/* Aside z punktami (desktop only) — flex-item po LEWEJ stronie sylwetki, wycentrowany pionowo */
.home-hero__side {
align-self: center;
flex: 0 0 auto;
width: clamp(146px, 10vw, 210px);
margin-top: clamp(40px, 9vh, 120px);
display: flex;
flex-direction: column;
gap: clamp(26px, 3vw, 44px);
pointer-events: auto;
}
.home-hero__side-item {
display: flex;
align-items: flex-start;
flex-direction: row-reverse;
gap: 10px;
text-align: right;
}
.home-hero__side-item:nth-child(even) { margin-right: clamp(14px, 2.2vw, 40px); }
.home-hero__side-marker {
flex: 0 0 auto;
display: flex;
align-items: center;
flex-direction: row-reverse;
gap: 8px;
margin-top: 6px;
}
.home-hero__side-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #C8D0D9;
}
.home-hero__side-line {
width: clamp(14px, 1.8vw, 26px);
height: 1px;
background: rgba(200, 208, 217, 0.45);
}
.home-hero__side-content {
min-width: 125px;
display: flex;
flex-direction: column;
gap: 3px;
}
.home-hero__side-label {
font-family: var(--sk-font-heading);
font-stretch: 84%;
font-weight: 700;
text-transform: uppercase;
font-size: 12.5px;
line-height: 120%;
letter-spacing: 0.03em;
color: #F1F4F7;
text-shadow: 0 1px 12px rgba(15,17,20,0.85);
}
.home-hero__side-desc {
font-size: 14px;
line-height: 125%;
font-weight: 300;
color: #B7C0CA;
text-shadow: 0 1px 12px rgba(15,17,20,0.9);
}
/* Content – po lewej dolnej */
.home-hero__content {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(16px, 1.8vw, 24px);
padding: clamp(72px, 10svh, 120px) clamp(28px, 9vw, 250px) clamp(96px, 15svh, 190px);
max-width: min(100%, 900px);
}
.home-hero__eyebrow {
color: #B4BDC7;
margin: 0;
}
.home-hero__eyebrow-sep { opacity: 0.5; }
.home-hero__eyebrow-roles { color: #8E99A6; }
.home-hero__title {
margin: 0;
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(52px, 10vw, 176px);
line-height: 90%;
letter-spacing: -0.022em;
color: #F1F4F7;
text-wrap: balance;
}
.home-hero__title br + * { color: #C8D0D9; }
.home-hero__desc {
margin: clamp(4px, 0.8vw, 10px) 0 0;
max-width: 40ch;
padding-top: clamp(18px, 2.2vw, 26px);
border-top: 1px solid rgba(180,189,199,0.34);
}
.home-hero__desc p {
margin: 0;
font-size: clamp(16.5px, 1.4vw, 21px);
line-height: 150%;
font-weight: 300;
color: #C4CBD3;
}
/* Row – jasny pod stage */
.home-hero__row {
display: flex;
flex-wrap: wrap;
}
.home-hero__col--intro {
flex: 1 1 460px;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: clamp(22px, 2.6vw, 32px);
padding: clamp(24px, 2.8vw, 36px) clamp(0px, 3vw, 52px) clamp(24px, 2.8vw, 36px) 0;
}
.home-hero__intro { margin: 0; max-width: 60ch; }
.home-hero__intro p {
margin: 0;
font-size: clamp(18px, 1.7vw, 24px);
line-height: 155%;
font-weight: 300;
color: #333941;
}
.home-hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.home-hero__col--rating {
flex: 1 1 340px;
min-width: 262px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: clamp(16px, 1.8vw, 22px);
padding: clamp(24px, 2.8vw, 36px) 0 clamp(24px, 2.8vw, 36px) clamp(0px, 3vw, 52px);
}
.home-hero__rating-row { display: flex; align-items: baseline; gap: 16px; }
.home-hero__rating-value {
font-family: var(--sk-font-heading);
font-stretch: 80%;
font-weight: 700;
font-size: clamp(38px, 3.6vw, 52px);
line-height: 80%;
letter-spacing: -0.02em;
color: var(--sk-fg);
}
.home-hero__rating-count {
font-size: 15px;
line-height: 150%;
font-weight: 300;
color: #4F5154;
}
.home-hero__rating-link {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 8px;
opacity: 0.72;
transition: opacity 240ms ease;
}
.home-hero__rating-link:hover { opacity: 1; }
.home-hero__rating-link img { height: 13px; width: auto; display: block; }
.home-hero__rating-link-arrow { width: 12px; height: 12px; flex: 0 0 auto; fill: none; stroke: #4F5154; stroke-width: 2; stroke-linecap: square; }
.home-hero__quote-wrap { display: flex; flex-direction: column; gap: 14px; }
.home-hero__quote-slider { min-width: 0; }
.home-hero__quote-slider.slick-slider .slick-track { display: flex; align-items: stretch; }
.home-hero__quote-slider .slick-slide { height: auto; }
.home-hero__quote-slider .slick-slide > div { height: 100%; }
.home-hero__quote {
margin: 0;
font-size: clamp(16.5px, 1.35vw, 19px);
line-height: 150%;
font-weight: 300;
color: var(--sk-fg);
display: flex;
flex-direction: column;
gap: 8px;
min-height: 6.4em;
}
.home-hero__quote > span {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.home-hero__quote-author {
font-size: 13px;
line-height: 150%;
font-style: normal;
color: var(--sk-fg-muted);
font-family: var(--sk-font-heading);
letter-spacing: 0.04em;
}
/* Nawigacja slidera opinii — dots + prev/next (wg designu) */
.home-hero__quote-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px;
padding-top: 14px;
border-top: 1px solid rgba(43,48,56,0.16);
}
.home-hero__quote-dots {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.home-hero__quote-dots li { display: flex; }
.home-hero__quote-dots li button {
width: 9px;
height: 9px;
padding: 0;
margin: 0;
border: 1px solid var(--sk-acc);
background: transparent;
cursor: pointer;
font-size: 0;
line-height: 0;
color: transparent;
border-radius: 0;
transition: background 260ms ease;
}
.home-hero__quote-dots li.slick-active button,
.home-hero__quote-dots li button:hover { background: var(--sk-acc); }
.home-hero__quote-arrows { display: flex; align-items: center; gap: 8px; }
.home-hero__quote-arrows .slick-arrow {
width: 42px;
height: 42px;
padding: 0;
background: transparent;
border: 1px solid rgba(43,48,56,0.24);
color: var(--sk-fg);
cursor: pointer;
font-family: var(--sk-font-heading);
font-size: 15px;
line-height: 130%;
border-radius: 0;
transition: border-color 240ms ease, color 240ms ease;
}
.home-hero__quote-arrows .slick-arrow:hover { border-color: var(--sk-acc); color: var(--sk-acc); }
.home-hero__quote-arrows .slick-disabled { opacity: 0.35; cursor: default; }
@media (max-width: 1100px) {
.home-hero__side { display: none; }
.home-hero__silhouette { max-width: min(55vw, 480px); }
.home-hero__silhouette-wrap { right: clamp(-30px, 2vw, 40px); }
.home-hero__title { font-size: clamp(44px, 12vw, 96px); line-height: 90%; }
.home-hero__col--intro,
.home-hero__col--rating { padding-left: 0; padding-right: 0; flex: 1 1 100%; }
}
@media (max-width: 767px) {
.home-hero__stage { min-height: 78svh; }
.home-hero__silhouette { opacity: 0.45; max-width: 65vw; }
.home-hero__content { padding-left: 20px; padding-right: 20px; padding-top: clamp(60px, 10svh, 100px); padding-bottom: clamp(60px, 10svh, 100px); }
.home-hero__rating-row { flex-wrap: wrap; }
.home-hero__rating-link { margin-left: 0; }
}
/* === Home – Hero — enhancements (bg, title spans, mobile alt, animacje) === */
/* Body — hero/baner zaczyna się pod headerem bez luki (na stronach z ciemnym heroem) */
body.has-dark-hero { padding-top: 0; }
/* Jasne tło sekcji zgodnie z designem */
.home-hero { background: var(--sk-bg); }
/* H1 — dwa spany block, drugi w innym kolorze */
.home-hero__title-line {
display: block;
color: inherit;
}
.home-hero__title-line--1 { color: #C8D0D9; }
/* Mobile alternative — list z bulletami widoczna tylko na mobile */
.home-hero__mobile { display: none; }
@media (max-width: 1100px) {
.home-hero__mobile {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
gap: 12px;
padding: 0 clamp(28px, 9vw, 250px) clamp(26px, 4vw, 40px);
}
.home-hero__mobile-item {
display: flex;
align-items: flex-start;
gap: 11px;
}
.home-hero__mobile-dot {
flex: 0 0 auto;
width: 6px;
height: 6px;
margin-top: 8px;
border-radius: 50%;
background: #C8D0D9;
}
.home-hero__mobile-text {
font-size: 14.5px;
line-height: 150%;
font-weight: 300;
color: #B7C0CA;
}
.home-hero__mobile-label {
font-family: var(--sk-font-heading);
font-stretch: 84%;
font-weight: 700;
text-transform: uppercase;
font-size: 13px;
line-height: 150%;
letter-spacing: 0.02em;
color: #F1F4F7;
margin-right: 4px;
}
}
/* --- Animacje pojawiania się (z designu Claude Design) --- */
@keyframes edIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes edMask {
from { clip-path: inset(102% 0 -6% 0); letter-spacing: 0.015em; }
to { clip-path: inset(-14% 0 -6% 0); letter-spacing: -0.03em; }
}
@keyframes edTrack {
from { opacity: 0; letter-spacing: 0.52em; }
to { opacity: 1; letter-spacing: 0.26em; }
}
@keyframes edRise {
from { opacity: 0; transform: scale(1.03) translateY(3.2%); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* Silhouette — powolne wejście z lekkim scale */
.home-hero__silhouette {
animation: edRise 1200ms cubic-bezier(0.22,0.61,0.36,1) both;
}
/* Eyebrow — letter-spacing collapse */
.home-hero__eyebrow {
animation: edTrack 620ms cubic-bezier(0.22,0.61,0.36,1) 620ms both;
}
/* H1 spans — clip-path reveal, per linia z opóźnieniem (delay z inline style) */
.home-hero__title-line {
animation: edMask 900ms cubic-bezier(0.22,0.61,0.36,1) both;
/* animation-delay ustawiony inline (per index) — base +500ms vs oryginał */
}
/* Description — fade + translateY */
.home-hero__desc {
animation: edIn 700ms ease 760ms both;
}
/* Side items — fade schodkowo (delay ustawiony inline per index) */
.home-hero__side-item {
animation: edIn 800ms ease both;
}
/* Row pod stage — fade */
.home-hero__col {
animation: edIn 800ms ease 1100ms both;
}
/* Respekt dla użytkowników z reduced motion */
@media (prefers-reduced-motion: reduce) {
.home-hero__silhouette,
.home-hero__eyebrow,
.home-hero__title-line,
.home-hero__desc,
.home-hero__side-item,
.home-hero__col {
animation-duration: 1ms !important;
animation-delay: 0ms !important;
}
}
/* Header transparent na home (dopóki user nie zescrolluje) — bo pod nim jest ciemny hero */
body.has-dark-hero .site-header:not(.is-scrolled) {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom-color: rgba(255, 255, 255, 0.18);
box-shadow: none;
}
body.has-dark-hero .site-header:not(.is-scrolled) .site-header__logo img { filter: brightness(0) invert(1); }
body.has-dark-hero .site-header:not(.is-scrolled) .site-header__logo-text { color: var(--sk-fg-strong); }
body.has-dark-hero .site-header:not(.is-scrolled) .site-header__menu a { color: rgba(241, 244, 247, 0.72); }
body.has-dark-hero .site-header:not(.is-scrolled) .site-header__menu a:hover,
body.has-dark-hero .site-header:not(.is-scrolled) .site-header__menu .current-menu-item > a,
body.has-dark-hero .site-header:not(.is-scrolled) .site-header__menu .current-menu-parent > a,
body.has-dark-hero .site-header:not(.is-scrolled) .site-header__menu .current-menu-ancestor > a,
body.has-dark-hero .site-header:not(.is-scrolled) .site-header__menu .current_page_parent > a,
body.has-dark-hero .site-header:not(.is-scrolled) .site-header__menu .current_page_ancestor > a { color: var(--sk-fg-strong); box-shadow: inset 0 -1px 0 currentColor; }
body.has-dark-hero .site-header:not(.is-scrolled) .cbtn {
color: var(--sk-fg-strong);
border-color: rgba(255, 255, 255, 0.28);
background-image: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92));
}
body.has-dark-hero .site-header:not(.is-scrolled) .cbtn:hover {
color: var(--sk-fg);
border-color: rgba(255, 255, 255, 0.92);
background-size: 100% 100%;
}
body.has-dark-hero .site-header:not(.is-scrolled) .nav-icon span { background: var(--sk-fg-strong); }
/* === Baner Top (podstrony) === */
.herotop {
position: relative;
isolation: isolate;
background: var(--sk-dark-bg);
min-height: clamp(500px, 64svh, 680px);
display: flex;
align-items: flex-end;
padding: calc(clamp(64px, 6vw, 82px) + clamp(52px, 6.5vw, 104px)) clamp(28px, 9vw, 250px) clamp(46px, 5.4vw, 82px);
overflow: hidden;
color: var(--sk-dark-fg);
}
.herotop__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
animation: edRise 1400ms cubic-bezier(0.16,1,0.3,1) both;
}
.herotop__overlay {
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, rgba(16,19,23,0.82) 0%, rgba(16,19,23,0.5) 42%, rgba(16,19,23,0.88) 100%);
}
.herotop__inner {
position: relative;
width: 100%;
}
.herotop__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.7em;
font-family: var(--sk-font-heading);
font-size: 11px;
line-height: 130%;
font-weight: 600;
letter-spacing: 0.26em;
text-transform: uppercase;
color: #C2CAD3;
margin: 0 0 clamp(14px, 1.8vw, 22px);
animation: edTrack 800ms ease 280ms both;
}
.herotop__eyebrow-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(241,244,247,0.65);
}
.herotop__title {
margin: 0;
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(46px, 8vw, 132px);
line-height: 88%;
letter-spacing: -0.022em;
color: #F5F6F7;
text-wrap: balance;
animation: edMask 1000ms cubic-bezier(0.22,0.61,0.36,1) 320ms both;
}
.herotop__desc {
margin: clamp(22px, 2.6vw, 32px) 0 0;
max-width: 62ch;
animation: edIn 800ms ease 580ms both;
}
.herotop__desc p {
margin: 0;
font-size: clamp(17px, 1.5vw, 21px);
line-height: 162%;
font-weight: 300;
color: #DCDFE3;
}
@media (prefers-reduced-motion: reduce) {
.herotop__bg,
.herotop__eyebrow,
.herotop__title,
.herotop__desc {
animation-duration: 1ms !important;
animation-delay: 0ms !important;
}
}
@media (max-width: 767px) {
.herotop { min-height: 62svh; padding-left: 20px; padding-right: 20px; }
.herotop__title { font-size: clamp(40px, 12vw, 78px); }
}
/* === Kontakt – Placówki === */
.loclist {
background: var(--sk-bg);
color: var(--sk-fg);
padding-top: clamp(72px, 8.5vw, 132px);
padding-bottom: clamp(76px, 9vw, 140px);
}
.loclist__header {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 22px;
padding-bottom: clamp(30px, 3.6vw, 52px);
}
.loclist__head-left {
display: flex;
flex-direction: column;
gap: 14px;
}
.loclist__eyebrow {
font-size: 12px;
line-height: 130%;
font-weight: 500;
letter-spacing: 0.22em;
color: var(--sk-acc);
margin: 0;
}
.loclist__title {
margin: 0;
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(32px, 4.2vw, 58px);
line-height: 98%;
letter-spacing: -0.016em;
}
.loclist__intro {
flex: 1 1 320px;
max-width: 42ch;
margin: 0;
}
.loclist__intro p {
margin: 0;
font-size: 16.5px;
line-height: 150%;
font-weight: 300;
color: #434548;
}
.loclist__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: clamp(28px, 3.6vw, 72px);
}
.loclist__item {
display: flex;
flex-direction: column;
gap: 14px;
padding-top: clamp(20px, 2.2vw, 28px);
border-top: 1px solid rgba(43,48,56,0.24);
}
.loclist__city {
font-family: var(--sk-font-heading);
font-size: 11px;
line-height: 130%;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #6B7076;
}
.loclist__name {
margin: 0;
font-family: var(--sk-font-heading);
font-stretch: 78%;
font-weight: 700;
font-size: clamp(24px, 2.4vw, 34px);
line-height: 102%;
letter-spacing: -0.014em;
color: var(--sk-fg);
}
.loclist__addr {
margin: 0;
font-size: 16px;
line-height: 150%;
font-weight: 300;
color: #434548;
}
.loclist__contact {
display: grid;
gap: 9px;
margin-top: auto;
padding-top: clamp(16px, 1.8vw, 22px);
font-size: 15.5px;
line-height: 150%;
font-weight: 300;
}
.loclist__phone {
color: var(--sk-fg);
box-shadow: inset 0 -1px 0 rgba(43,48,56,0.24);
justify-self: start;
transition: color 220ms ease, box-shadow 220ms ease;
}
.loclist__phone:hover {
color: var(--sk-acc);
box-shadow: inset 0 -1px 0 var(--sk-acc);
}
.loclist__email {
color: #4F5459;
overflow-wrap: anywhere;
justify-self: start;
transition: color 220ms ease;
}
.loclist__email:hover { color: var(--sk-acc); }
/* === Contact Form (sekcja "Napisz wiadomość") === */
.contactform {
position: relative;
isolation: isolate;
background: var(--sk-dark-bg);
color: var(--sk-dark-fg);
padding: clamp(76px, 9vw, 140px) clamp(28px, 9vw, 250px);
overflow: hidden;
}
.contactform__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
filter: grayscale(0.25);
}
.contactform__overlay {
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, rgba(16,19,23,0.9) 0%, rgba(16,19,23,0.84) 45%, rgba(16,19,23,0.94) 100%);
}
.contactform__inner {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: clamp(28px, 4vw, 84px);
}
.contactform__header {
flex: 1 1 340px;
min-width: 258px;
max-width: 420px;
}
.contactform__title {
margin: 0 0 20px;
color: var(--sk-fg-strong);
font-size: clamp(30px, 4vw, 56px);
line-height: 100%;
letter-spacing: -0.018em;
}
.contactform__intro { max-width: 36ch; }
.contactform__intro p {
margin: 0;
font-size: 16.5px;
line-height: 150%;
font-weight: 300;
color: #9DA2A7;
}
.contactform__body { flex: 1 1 460px; min-width: 0; }
.contactform__notice {
padding: 22px 24px;
border: 1px dashed rgba(227,229,232,0.32);
color: #9DA2A7;
font-size: 14.5px;
line-height: 150%;
}
/* CF7 form – styling wg designu (flat, tylko border-bottom, ciemny) */
.contactform__body .wpcf7-form { display: grid; gap: clamp(16px, 1.8vw, 22px); }
/* Pojedyncze pole */
.contactform__body .ff-field {
display: grid;
gap: 9px;
}
.contactform__body .ff-label {
font-family: var(--sk-font-heading);
font-size: 11px;
line-height: 130%;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #8F9295;
}
.contactform__body .ff-input,
.contactform__body input[type="text"],
.contactform__body input[type="email"],
.contactform__body input[type="tel"],
.contactform__body input[type="url"],
.contactform__body textarea {
width: 100%;
padding: 14px 2px;
background: transparent;
border: 0;
border-bottom: 1px solid rgba(227,229,232,0.28);
font-family: var(--sk-font-body);
font-size: 17px;
line-height: 150%;
font-weight: 300;
color: var(--sk-fg-strong);
outline-offset: 6px;
border-radius: 0;
}
.contactform__body textarea { resize: vertical; min-height: 120px; }
.contactform__body input::placeholder,
.contactform__body textarea::placeholder {
color: rgba(157, 162, 167, 0.6);
font-weight: 300;
}
.contactform__body input:focus,
.contactform__body textarea:focus { border-bottom-color: var(--sk-fg-strong); }
/* CF7 wrapper .wpcf7-form-control-wrap — usuń block spacing */
.contactform__body .wpcf7-form-control-wrap { display: block; }
/* Grid dwukolumnowy dla email + tel */
.contactform__body .cf-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(16px, 1.8vw, 22px);
}
@media (max-width: 640px) {
.contactform__body .cf-row { grid-template-columns: 1fr; }
}
/* File upload — custom looking */
.contactform__body .ff-files {
display: grid;
gap: 9px;
padding-top: 6px;
border-bottom: 1px solid rgba(227,229,232,0.28);
padding-bottom: 14px;
}
.contactform__body .ff-file {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
padding-top: 4px;
cursor: pointer;
position: relative;
}
.contactform__body .ff-file-input,
.contactform__body input[type="file"] {
position: absolute;
left: 0; top: 0;
width: 1px; height: 1px;
opacity: 0;
pointer-events: none;
}
.contactform__body .ff-file-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 11px 18px;
box-shadow: inset 0 0 0 1px rgba(227,229,232,0.3);
font-family: var(--sk-font-heading);
font-size: 11px;
line-height: 130%;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sk-fg-strong);
transition: background 240ms ease, color 240ms ease, box-shadow 240ms ease;
cursor: pointer;
}
.contactform__body .ff-file:hover .ff-file-btn {
background: rgba(227,229,232,0.08);
box-shadow: inset 0 0 0 1px var(--sk-acc-lt);
}
.contactform__body .ff-file-hint {
font-family: var(--sk-font-body);
font-size: 13.5px;
line-height: 150%;
font-weight: 300;
letter-spacing: 0;
text-transform: none;
color: #8F9295;
flex: 1 1 100%;
}
/* Gwiazdka wymaganego pola */
.contactform__body .req {
color: var(--sk-acc-lt);
font-weight: 500;
margin-left: 2px;
}
/* Acceptance — checkbox + tekst inline */
.contactform__body .ff-accept {
display: flex;
align-items: flex-start;
gap: 12px;
padding-top: 6px;
cursor: pointer;
font-family: var(--sk-font-body);
font-size: 13.5px;
line-height: 150%;
font-weight: 300;
letter-spacing: 0;
text-transform: none;
color: #9DA2A7;
}
.contactform__body .ff-accept input[type="checkbox"] {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.contactform__body .ff-accept-box {
flex: 0 0 auto;
width: 18px;
height: 18px;
margin-top: 2px;
border: 1px solid rgba(227,229,232,0.32);
background: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
transition: border-color 220ms ease, background 220ms ease;
}
.contactform__body .ff-accept-box::after {
content: '';
width: 10px;
height: 10px;
background: var(--sk-fg-strong);
opacity: 0;
transition: opacity 220ms ease;
}
.contactform__body .ff-accept input:checked + .ff-accept-box {
border-color: var(--sk-fg-strong);
}
.contactform__body .ff-accept input:checked + .ff-accept-box::after { opacity: 1; }
.contactform__body .ff-accept input:focus-visible + .ff-accept-box {
outline: 2px solid var(--sk-acc-lt);
outline-offset: 2px;
}
.contactform__body .ff-accept-text { flex: 1; }
.contactform__body .ff-accept-text a {
color: var(--sk-fg-strong);
box-shadow: inset 0 -1px 0 rgba(241,244,247,0.32);
transition: color 220ms ease, box-shadow 220ms ease;
}
.contactform__body .ff-accept-text a:hover {
color: var(--sk-acc-lt);
box-shadow: inset 0 -1px 0 var(--sk-acc-lt);
}
/* Native browser :invalid styling — subtelnie po interakcji */
.contactform__body .ff-input:user-invalid {
border-bottom-color: rgba(220, 100, 100, 0.6);
}
/* Acceptance CF7 — CF7 renderuje własną strukturę .wpcf7-list-item; stylizujemy analogicznie do .ff-accept */
.contactform__body .wpcf7-acceptance,
.contactform__body .wpcf7-acceptance .wpcf7-list-item {
display: block;
margin: 0;
}
.contactform__body .wpcf7-acceptance .wpcf7-list-item {
padding-top: 6px;
}
.contactform__body .wpcf7-acceptance label {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
font-family: var(--sk-font-body);
font-size: 13.5px;
line-height: 150%;
font-weight: 300;
letter-spacing: 0;
text-transform: none;
color: #9DA2A7;
}
.contactform__body .wpcf7-acceptance input[type="checkbox"] {
flex: 0 0 auto;
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
margin: 2px 0 0;
padding: 0;
background: transparent;
border: 1px solid rgba(227,229,232,0.32);
border-radius: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: border-color 220ms ease;
position: static;
opacity: 1;
pointer-events: auto;
}
.contactform__body .wpcf7-acceptance input[type="checkbox"]::after {
content: '';
width: 10px;
height: 10px;
background: var(--sk-fg-strong);
opacity: 0;
transition: opacity 220ms ease;
}
.contactform__body .wpcf7-acceptance input[type="checkbox"]:checked { border-color: var(--sk-fg-strong); }
.contactform__body .wpcf7-acceptance input[type="checkbox"]:checked::after { opacity: 1; }
.contactform__body .wpcf7-acceptance input[type="checkbox"]:focus-visible {
outline: 2px solid var(--sk-acc-lt);
outline-offset: 2px;
}
.contactform__body .wpcf7-list-item-label {
flex: 1;
color: inherit;
}
.contactform__body .wpcf7-list-item-label a {
color: var(--sk-fg-strong);
box-shadow: inset 0 -1px 0 rgba(241,244,247,0.32);
transition: color 220ms ease, box-shadow 220ms ease;
}
.contactform__body .wpcf7-list-item-label a:hover {
color: var(--sk-acc-lt);
box-shadow: inset 0 -1px 0 var(--sk-acc-lt);
}
/* === Boxy CTA (sekcja "Dalej") === */
.boxes {
background: var(--sk-bg);
color: var(--sk-fg);
padding-top: clamp(72px, 8.5vw, 132px);
padding-bottom: clamp(72px, 8.5vw, 132px);
}
.boxes__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: clamp(16px, 1.8vw, 26px);
}
.boxes__item-wrap {
display: block;
height: 100%;
}
.boxes__item {
display: flex;
flex-direction: column;
gap: clamp(20px, 2.4vw, 30px);
height: 100%;
min-height: clamp(300px, 26vw, 380px);
padding: clamp(28px, 3vw, 40px);
background: #F4F5F6;
box-shadow: inset 0 0 0 1px rgba(43,48,56,0.16);
color: var(--sk-fg);
text-decoration: none;
transition: background 420ms cubic-bezier(0.16,1,0.3,1),
box-shadow 420ms cubic-bezier(0.16,1,0.3,1),
transform 500ms cubic-bezier(0.16,1,0.3,1),
color 320ms ease;
will-change: transform;
}
.boxes__item:hover {
background: #FFFFFF;
box-shadow: inset 0 0 0 1px rgba(43,48,56,0.34);
transform: translateY(-6px);
color: var(--sk-fg);
}
.boxes__item--dark {
background: var(--sk-dark-bg-alt);
color: var(--sk-fg-strong);
}
.boxes__item--dark:hover {
background: #1C2026;
box-shadow: inset 0 0 0 1px rgba(227,229,232,0.32);
color: var(--sk-fg-strong);
transform: translateY(-6px);
}
.boxes__icon {
display: block;
width: clamp(46px, 4.4vw, 60px);
height: clamp(46px, 4.4vw, 60px);
color: var(--sk-acc);
}
.boxes__item--dark .boxes__icon { color: var(--sk-fg-strong); }
.boxes__icon img { width: 100%; height: 100%; display: block; }
.boxes__eyebrow {
display: block;
font-family: var(--sk-font-heading);
font-size: 11px;
line-height: 130%;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #6B7076;
}
.boxes__item--dark .boxes__eyebrow { color: #9DA2A7; }
.boxes__title {
display: block;
margin-top: -10px;
font-family: var(--sk-font-heading);
font-stretch: 78%;
font-weight: 700;
font-size: clamp(23px, 2.2vw, 31px);
line-height: 106%;
letter-spacing: -0.014em;
text-wrap: pretty;
color: inherit;
}
.boxes__desc {
display: block;
margin-top: -14px;
font-size: 15.5px;
line-height: 150%;
font-weight: 300;
color: #4F5459;
}
.boxes__item--dark .boxes__desc { color: #9DA2A7; }
.boxes__cta {
display: flex;
align-items: center;
gap: 12px;
margin-top: auto;
padding-top: clamp(18px, 2vw, 24px);
border-top: 1px solid rgba(43,48,56,0.18);
font-family: var(--sk-font-heading);
font-size: 11.5px;
line-height: 130%;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: inherit;
}
.boxes__item--dark .boxes__cta { border-top-color: rgba(241,244,247,0.22); }
.boxes__cta-arrow { font-size: 13px; line-height: 100%; transition: transform 320ms cubic-bezier(0.16,1,0.3,1); }
.boxes__item:hover .boxes__cta-arrow { transform: translateX(4px); }
/* Submit wrapper */
.contactform__body .ff-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; }
/* Submit button */
.contactform__body .ff-submit-btn,
.contactform__body .wpcf7-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 18px 26px;
font-family: var(--sk-font-heading);
font-size: 11.5px;
line-height: 130%;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sk-bg);
background: var(--sk-fg);
border: 0;
cursor: pointer;
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% 0%;
background-image: linear-gradient(var(--sk-acc), var(--sk-acc));
transition: background-size 520ms cubic-bezier(0.16,1,0.3,1), color 260ms ease;
justify-self: start;
}
.contactform__body .ff-submit-btn:hover,
.contactform__body .wpcf7-submit:hover { background-size: 100% 100%; color: var(--sk-white); }
/* Loader CF7 (spinner) */
.contactform__body .wpcf7-spinner {
background-color: var(--sk-acc-lt);
margin: 0 0 0 12px;
}
/* Wiadomości CF7 */
.contactform__body .wpcf7-response-output {
margin: 16px 0 0 !important;
padding: 14px 18px !important;
border: 1px solid rgba(227,229,232,0.32) !important;
font-family: var(--sk-font-body);
font-size: 14.5px;
line-height: 150%;
color: var(--sk-fg-strong);
letter-spacing: 0;
text-transform: none;
}
.contactform__body .wpcf7 form.sent .wpcf7-response-output { border-color: rgba(140, 200, 140, 0.5) !important; }
.contactform__body .wpcf7 form.invalid .wpcf7-response-output,
.contactform__body .wpcf7 form.failed .wpcf7-response-output { border-color: rgba(220, 100, 100, 0.5) !important; }
.contactform__body .wpcf7-not-valid-tip {
color: #F5A5A5 !important;
font-family: var(--sk-font-body);
font-size: 12.5px;
line-height: 150%;
margin-top: 4px;
text-transform: none;
letter-spacing: 0;
font-weight: 400;
}
/* === Visit – Steps ============================================
Sekcja „Przebieg wizyty” (szablon: Pierwsza wizyta)
Grid auto-fit minmax(240px, 1fr), 4 kolumny na desktopie.
Design ref: KOZIEJ STRONA.dc.html linia 1515.
================================================================ */
.visit-steps {
background: var(--sk-bg);
color: var(--sk-fg);
padding-top: clamp(64px, 7.5vw, 112px);
padding-bottom: clamp(64px, 7.5vw, 112px);
}
.visit-steps__header {
max-width: 100%;
width: 720px;
margin: 0 0 clamp(32px, 4vw, 56px);
}
.visit-steps__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: clamp(24px, 3vw, 56px);
}
.visit-steps__item {
display: grid;
gap: 12px;
align-content: start;
}
.visit-steps__num {
display: block;
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(44px, 5vw, 72px);
line-height: 90%;
letter-spacing: -0.03em;
color: var(--sk-acc);
opacity: 0.55;
}
.visit-steps__title {
margin: 0;
font-family: var(--sk-font-heading);
font-stretch: 82%;
font-weight: 700;
font-size: clamp(18px, 1.6vw, 22px);
line-height: 114%;
color: var(--sk-fg);
letter-spacing: 0;
text-transform: none;
}
.visit-steps__desc {
font-family: var(--sk-font-body);
font-size: 15.5px;
line-height: 170%;
font-weight: 300;
color: #434548;
}
.visit-steps__desc p {
margin: 0;
}
.visit-steps__desc p + p {
margin-top: 12px;
}
.visit-steps__desc a {
color: var(--sk-fg);
text-decoration: none;
box-shadow: inset 0 -1px 0 rgba(43,48,56,0.4);
transition: box-shadow 220ms ease, color 220ms ease;
}
.visit-steps__desc a:hover,
.visit-steps__desc a:focus-visible {
color: var(--sk-acc);
box-shadow: inset 0 -1px 0 var(--sk-acc);
}
@media (max-width: 767px) {
.visit-steps__grid {
grid-template-columns: 1fr;
gap: clamp(28px, 6vw, 40px);
}
}
/* === QA Section (Q&A / accordion 2-col) =======================
Reużywalny wzorzec: lewa kolumna eyebrow+title, prawa accordion.
Design ref: KOZIEJ STRONA.dc.html linia 1541 (Kwalifikacja i przygotowanie — light).
Wariant dark: `.qa-section--dark` (do dodania przy sekcji „Zabieg i rekonwalescencja”).
================================================================ */
.qa-section {
background: var(--sk-bg);
color: var(--sk-fg);
padding-top: clamp(64px, 7.5vw, 112px);
padding-bottom: clamp(76px, 9vw, 140px);
}
.qa-section__inner {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: clamp(26px, 3.6vw, 76px);
}
.qa-section__header {
flex: 0 0 340px;
max-width: 100%;
}
.qa-section__eyebrow {
display: block;
margin: 0 0 14px;
}
.qa-section__title {
margin: 0;
}
.qa-section__list {
flex: 1 1 480px;
min-width: 0;
max-width: 100%;
}
.qa-item {
border-top: 1px solid rgba(43,48,56,0.18);
}
.qa-item:last-child {
border-bottom: 1px solid rgba(43,48,56,0.18);
}
.qa-item summary {
list-style: none;
cursor: pointer;
}
.qa-item summary::-webkit-details-marker { display: none; }
.qa-item summary::marker { display: none; content: ''; }
.qa-item__question {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 20px;
width: 100%;
padding: clamp(17px, 1.9vw, 23px) 0;
background: transparent;
border: 0;
text-align: left;
color: var(--sk-fg);
transition: color 220ms ease;
}
.qa-item summary:hover .qa-item__question,
.qa-item summary:focus-visible .qa-item__question {
color: var(--sk-acc);
}
.qa-item summary:focus-visible {
outline: 2px solid var(--sk-acc);
outline-offset: 4px;
}
.qa-item__text {
font-family: var(--sk-font-heading);
font-stretch: 82%;
font-weight: 700;
font-size: clamp(18px, 1.7vw, 23px);
line-height: 128%;
letter-spacing: 0;
text-transform: none;
}
.qa-item__icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
font-family: var(--sk-font-heading);
font-size: 22px;
line-height: 100%;
font-weight: 400;
color: var(--sk-acc);
transition: transform 260ms ease;
}
.qa-item__icon::after {
content: '+';
display: block;
}
.qa-item[open] .qa-item__icon {
transform: rotate(45deg);
}
.qa-item__answer {
padding: 0 0 clamp(20px, 2.2vw, 28px);
max-width: 62ch;
}
.qa-item__answer p {
margin: 0;
font-family: var(--sk-font-body);
font-size: 16px;
line-height: 174%;
font-weight: 300;
color: #434548;
}
.qa-item__answer p + p {
margin-top: 12px;
}
.qa-item__answer a {
color: var(--sk-fg);
text-decoration: none;
box-shadow: inset 0 -1px 0 rgba(43,48,56,0.4);
transition: box-shadow 220ms ease, color 220ms ease;
}
.qa-item__answer a:hover,
.qa-item__answer a:focus-visible {
color: var(--sk-acc);
box-shadow: inset 0 -1px 0 var(--sk-acc);
}
@media (max-width: 767px) {
.qa-section__inner {
gap: 32px;
}
.qa-section__header {
flex: 1 1 100%;
width: 100%;
max-width: 100%;
}
}
/* Wariant DARK (użyty dla „Zabieg i rekonwalescencja”) */
.qa-section--dark {
background: var(--sk-dark-bg);
color: var(--sk-dark-fg);
padding-top: clamp(72px, 8.5vw, 132px);
padding-bottom: clamp(72px, 8.5vw, 132px);
}
.qa-section--dark .qa-section__eyebrow {
color: var(--sk-acc-lt);
}
.qa-section--dark .qa-section__title {
color: var(--sk-fg-strong);
}
.qa-section--dark .qa-item {
border-top-color: rgba(227,229,232,0.18);
}
.qa-section--dark .qa-item:last-child {
border-bottom-color: rgba(227,229,232,0.18);
}
.qa-section--dark .qa-item__question {
color: var(--sk-fg-strong);
}
.qa-section--dark .qa-item summary:hover .qa-item__question,
.qa-section--dark .qa-item summary:focus-visible .qa-item__question {
color: #FFFFFF;
}
.qa-section--dark .qa-item summary:focus-visible {
outline-color: var(--sk-acc-lt);
}
.qa-section--dark .qa-item__icon {
color: var(--sk-acc-lt);
}
.qa-section--dark .qa-item__answer p {
color: #9DA2A7;
}
.qa-section--dark .qa-item__answer a {
color: var(--sk-fg-strong);
box-shadow: inset 0 -1px 0 rgba(227,229,232,0.4);
}
.qa-section--dark .qa-item__answer a:hover,
.qa-section--dark .qa-item__answer a:focus-visible {
color: #FFFFFF;
box-shadow: inset 0 -1px 0 #FFFFFF;
}
/* === Lecture list (Wykłady i artykuły do pobrania) ============
Reużywalny wzorzec: header sekcji (eyebrow + tytuł konferencji)
+ lista klikalnych pozycji z ikoną pobierania.
Design ref: KOZIEJ STRONA.dc.html linia 1805 (iADE 2025).
Wariant pierwszy: `.lecture-section--first` = większy padding-top.
================================================================ */
.lecture-section {
background: var(--sk-bg);
color: var(--sk-fg);
padding-top: clamp(44px, 5vw, 72px);
padding-bottom: clamp(20px, 2.4vw, 32px);
}
.lecture-section--first {
padding-top: clamp(64px, 7.5vw, 108px);
}
.lecture-section__header {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
padding-bottom: clamp(22px, 2.6vw, 34px);
border-bottom: 1px solid rgba(43,48,56,0.24);
}
.lecture-section__eyebrow {
display: block;
font-family: var(--sk-font-heading);
font-size: 12px;
line-height: 150%;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sk-acc);
}
.lecture-section__title {
margin: 14px 0 0;
max-width: 34ch;
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(30px, 4vw, 58px);
line-height: 102%;
letter-spacing: -0.016em;
color: var(--sk-fg);
text-wrap: pretty;
}
.lecture-list {
display: grid;
}
.lecture-list__item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 6px clamp(20px, 2.4vw, 40px);
padding: clamp(22px, 2.4vw, 30px) 0;
border-bottom: 1px solid rgba(43,48,56,0.16);
color: var(--sk-fg);
text-decoration: none;
transition: padding-left 340ms cubic-bezier(0.16,1,0.3,1), color 240ms ease;
}
a.lecture-list__item:hover,
a.lecture-list__item:focus-visible {
padding-left: 12px;
color: var(--sk-acc);
outline: none;
}
.lecture-list__body {
grid-column: 1;
min-width: 0;
display: block;
}
.lecture-list__title {
display: block;
max-width: 60ch;
font-family: var(--sk-font-heading);
font-stretch: 82%;
font-weight: 700;
font-size: clamp(19px, 1.8vw, 26px);
line-height: 118%;
letter-spacing: -0.012em;
text-wrap: pretty;
color: inherit;
}
.lecture-list__subtitle {
display: block;
margin-top: 9px;
font-family: var(--sk-font-body);
font-size: 14.5px;
line-height: 150%;
font-weight: 300;
letter-spacing: 0.01em;
color: var(--sk-fg-muted);
}
.lecture-list__meta {
grid-column: 2;
grid-row: 1 / span 2;
display: flex;
align-items: center;
gap: 12px;
justify-self: end;
color: var(--sk-acc);
white-space: nowrap;
}
a.lecture-list__item:hover .lecture-list__meta,
a.lecture-list__item:focus-visible .lecture-list__meta {
color: inherit;
}
.lecture-list__icon {
display: block;
width: 26px;
height: 26px;
flex: 0 0 auto;
}
.lecture-list__meta-label {
font-family: var(--sk-font-heading);
font-size: 11.5px;
line-height: 130%;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
@media (max-width: 767px) {
.lecture-list__meta-label { display: none; }
.lecture-list__meta { gap: 0; }
}
/* === Book section (Książka — Wydanie polskie, dark) ===========
Design ref: KOZIEJ STRONA.dc.html linia 1859.
2-kolumnowy layout: lewa header (eyebrow + H2), prawa okładka + info.
================================================================ */
.book-section {
background: var(--sk-dark-bg);
color: var(--sk-dark-fg);
padding-top: clamp(64px, 7.5vw, 112px);
padding-bottom: clamp(64px, 7.5vw, 112px);
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: clamp(28px, 4vw, 84px);
}
.book-section__header {
flex: 0 1 300px;
min-width: 240px;
max-width: 340px;
}
.book-section__eyebrow {
display: block;
font-family: var(--sk-font-heading);
font-size: 12px;
line-height: 150%;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sk-acc-lt);
}
.book-section__title {
margin: 14px 0 0;
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(28px, 3.4vw, 46px);
line-height: 100%;
letter-spacing: -0.016em;
color: var(--sk-fg-strong);
}
.book-section__body {
flex: 1 1 460px;
min-width: 0;
display: grid;
grid-template-columns: minmax(140px, 176px) minmax(0, 1fr);
align-items: start;
gap: clamp(22px, 2.8vw, 40px);
padding-top: clamp(18px, 2vw, 26px);
border-top: 1px solid rgba(241,244,247,0.22);
}
.book-section__cover {
display: block;
width: 100%;
max-width: 176px;
height: auto;
box-shadow: 0 14px 34px rgba(0,0,0,0.44);
}
.book-section__content {
min-width: 0;
}
.book-section__book-title {
margin: 0;
max-width: 24ch;
font-family: var(--sk-font-heading);
font-stretch: 80%;
font-weight: 700;
font-size: clamp(22px, 2.2vw, 31px);
line-height: 110%;
letter-spacing: -0.014em;
color: var(--sk-fg-strong);
text-wrap: pretty;
}
.book-section__credits {
margin-top: clamp(14px, 1.8vw, 22px);
padding-top: clamp(14px, 1.6vw, 18px);
border-top: 1px solid rgba(241,244,247,0.14);
}
.book-section__credits:first-of-type {
margin-top: clamp(18px, 2vw, 24px);
}
.book-section__credits-label {
display: block;
font-family: var(--sk-font-heading);
font-size: 10.5px;
line-height: 150%;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--sk-fg-muted);
}
.book-section__credits-names {
margin: 8px 0 0;
max-width: 46ch;
font-family: var(--sk-font-body);
font-size: 16px;
line-height: 160%;
font-weight: 300;
color: #9DA2A7;
}
.book-section__credits-names strong {
font-weight: 400;
color: var(--sk-dark-fg);
}
@media (max-width: 767px) {
.book-section__body {
grid-template-columns: 1fr;
gap: 20px;
}
.book-section__cover { max-width: 140px; }
.book-section__header {
flex: 1 1 100%;
max-width: 100%;
}
}
/* === Single Post (Wpis blogowy) ==============================
3 sekcje: hero (dark gradient, back link + data + H1),
body (aside autor + content: lead + prose + disclaimer + CTA),
related (Czytaj dalej — grid kart).
Design ref: KOZIEJ STRONA.dc.html linie 1742/1751/1774.
================================================================ */
/* --- Hero --- */
.post-hero {
position: relative;
isolation: isolate;
background: linear-gradient(180deg, #191D22 0%, var(--sk-dark-bg) 62%, var(--sk-dark-bg-alt) 100%);
color: var(--sk-dark-fg);
min-height: clamp(500px, 64svh, 680px);
display: flex;
align-items: flex-end;
padding: calc(clamp(64px, 6vw, 82px) + clamp(52px, 6.5vw, 104px)) clamp(28px, 9vw, 250px) clamp(46px, 5.4vw, 82px);
overflow: hidden;
}
.post-hero__inner {
position: relative;
width: 100%;
max-width: 1100px;
}
.post-hero__back {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--sk-font-heading);
font-size: 11px;
line-height: 130%;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #C2CAD3;
text-decoration: none;
transition: color 260ms ease;
}
.post-hero__back:hover,
.post-hero__back:focus-visible {
color: #F1F4F7;
outline: none;
}
.post-hero__date {
display: block;
margin-top: clamp(20px, 2.4vw, 30px);
font-family: var(--sk-font-heading);
font-size: 11px;
line-height: 130%;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #C2CAD3;
}
.post-hero__title {
margin: clamp(14px, 1.8vw, 22px) 0 0;
max-width: 20ch;
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(34px, 5.4vw, 86px);
line-height: 94%;
letter-spacing: -0.022em;
color: #F5F6F7;
text-wrap: pretty;
animation: edMask 1000ms cubic-bezier(0.22,0.61,0.36,1) 320ms both;
}
@media (prefers-reduced-motion: reduce) {
.post-hero__title { animation-duration: 1ms !important; animation-delay: 0ms !important; }
}
/* --- Body --- */
.post-body {
background: var(--sk-bg);
color: var(--sk-fg);
padding-top: clamp(60px, 7vw, 104px);
padding-bottom: clamp(56px, 6.5vw, 96px);
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: clamp(28px, 4vw, 84px);
}
.post-body__aside {
flex: 0 1 260px;
min-width: 200px;
max-width: 100%;
}
.post-body__aside-label {
display: block;
font-family: var(--sk-font-heading);
font-size: 11px;
line-height: 130%;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sk-fg-muted);
}
.post-body__aside-name {
display: block;
margin-top: 12px;
font-family: var(--sk-font-heading);
font-stretch: 82%;
font-weight: 700;
font-size: clamp(19px, 1.8vw, 24px);
line-height: 115%;
color: var(--sk-fg);
}
.post-body__aside-desc {
display: block;
margin-top: 10px;
font-family: var(--sk-font-body);
font-size: 15px;
line-height: 165%;
font-weight: 300;
color: #4F5459;
}
.post-body__content {
flex: 1 1 520px;
min-width: 0;
max-width: 100%;
}
.post-body__lead {
margin: 0 0 clamp(24px, 2.8vw, 36px);
max-width: 44ch;
padding-bottom: clamp(22px, 2.6vw, 32px);
border-bottom: 1px solid rgba(43,48,56,0.2);
font-family: var(--sk-font-body);
font-size: clamp(19px, 1.8vw, 25px);
line-height: 150%;
font-weight: 300;
color: var(--sk-fg);
text-wrap: pretty;
}
.post-body__prose {
display: grid;
gap: clamp(16px, 1.8vw, 22px);
}
.post-body__prose p,
.post-body__prose ul,
.post-body__prose ol {
margin: 0;
max-width: 66ch;
font-family: var(--sk-font-body);
font-size: 16.5px;
line-height: 178%;
font-weight: 300;
color: #434548;
}
.post-body__prose h2,
.post-body__prose h3,
.post-body__prose h4,
.post-body__prose h5 {
margin: clamp(14px, 1.6vw, 20px) 0 0;
max-width: 40ch;
font-family: var(--sk-font-heading);
font-stretch: 78%;
font-weight: 700;
line-height: 118%;
letter-spacing: -0.014em;
color: var(--sk-fg);
text-wrap: pretty;
}
.post-body__prose h2 { font-size: clamp(22px, 2.4vw, 32px); }
.post-body__prose h3 { font-size: clamp(20px, 2.1vw, 26px); }
.post-body__prose h4,
.post-body__prose h5 { font-size: clamp(18px, 1.8vw, 22px); }
.post-body__prose a {
color: var(--sk-fg);
text-decoration: none;
box-shadow: inset 0 -1px 0 rgba(43,48,56,0.4);
transition: box-shadow 220ms ease, color 220ms ease;
}
.post-body__prose a:hover,
.post-body__prose a:focus-visible {
color: var(--sk-acc);
box-shadow: inset 0 -1px 0 var(--sk-acc);
}
.post-body__prose ul,
.post-body__prose ol {
padding-left: 22px;
}
.post-body__prose li + li { margin-top: 6px; }
.post-body__disclaimer {
margin: clamp(30px, 3.4vw, 46px) 0 0;
max-width: 66ch;
padding-top: clamp(18px, 2vw, 24px);
border-top: 1px solid rgba(43,48,56,0.16);
font-family: var(--sk-font-body);
font-size: 14.5px;
line-height: 172%;
font-weight: 300;
color: #4F5459;
}
.post-body__ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: clamp(30px, 3.4vw, 44px);
}
.post-body__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 22px 32px;
font-family: var(--sk-font-heading);
font-size: 12px;
line-height: 130%;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
transition: background 260ms ease, color 260ms ease, box-shadow 260ms ease;
}
.post-body__cta--primary {
background: var(--sk-fg);
color: var(--sk-bg);
}
.post-body__cta--primary:hover,
.post-body__cta--primary:focus-visible {
background: var(--sk-acc);
color: #FFFFFF;
outline: none;
}
.post-body__cta--outline {
color: var(--sk-fg);
box-shadow: inset 0 0 0 1px rgba(43,48,56,0.4);
}
.post-body__cta--outline:hover,
.post-body__cta--outline:focus-visible {
color: var(--sk-acc);
box-shadow: inset 0 0 0 1px var(--sk-acc);
outline: none;
}
.post-body__cta-arrow {
font-size: 13px;
line-height: 100%;
}
/* --- Related --- */
.post-related {
background: var(--sk-bg-muted);
color: var(--sk-fg);
padding-top: clamp(60px, 7vw, 104px);
padding-bottom: clamp(72px, 8.5vw, 124px);
}
.post-related__title {
margin: 0 0 clamp(22px, 2.6vw, 34px);
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(24px, 2.8vw, 38px);
line-height: 102%;
letter-spacing: -0.016em;
color: var(--sk-fg);
}
.post-related__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: clamp(16px, 1.8vw, 26px);
}
.post-card {
display: flex;
flex-direction: column;
gap: 14px;
min-height: clamp(200px, 18vw, 250px);
padding: clamp(24px, 2.6vw, 34px);
background: var(--sk-bg);
box-shadow: inset 0 0 0 1px rgba(43,48,56,0.14);
color: var(--sk-fg);
text-decoration: none;
transition: background 300ms ease, transform 420ms cubic-bezier(0.16,1,0.3,1);
}
.post-card:hover,
.post-card:focus-visible {
background: #FFFFFF;
transform: translateY(-4px);
outline: none;
}
.post-card__date {
display: block;
font-family: var(--sk-font-heading);
font-size: 11px;
line-height: 130%;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--sk-fg-muted);
}
.post-card__title {
display: block;
font-family: var(--sk-font-heading);
font-stretch: 82%;
font-weight: 700;
font-size: clamp(19px, 1.8vw, 24px);
line-height: 110%;
letter-spacing: -0.012em;
color: var(--sk-fg);
text-wrap: pretty;
}
.post-card__more {
display: block;
margin-top: auto;
font-family: var(--sk-font-heading);
font-size: 11.5px;
line-height: 130%;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sk-acc);
}
@media (max-width: 767px) {
.post-body__aside {
flex: 1 1 100%;
max-width: 100%;
}
}
/* === Blog listing (index.php) ================================
Featured post (najnowszy, 2-kolumnowy z obrazem) + Article list
(data + tytuł + lead w wierszu, hover padding-left).
Design ref: KOZIEJ STRONA.dc.html linie 1684/1698.
================================================================ */
/* --- Featured (wyróżniony artykuł) --- */
.featured-post {
background: var(--sk-bg);
color: var(--sk-fg);
padding-top: clamp(64px, 7.5vw, 112px);
padding-bottom: 0;
}
.featured-post__link {
display: flex;
flex-wrap: wrap-reverse;
align-items: stretch;
gap: clamp(24px, 3.4vw, 64px);
color: inherit;
text-decoration: none;
}
.featured-post__body {
flex: 1 1 400px;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(16px, 1.8vw, 22px);
}
.featured-post__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 18px;
font-family: var(--sk-font-heading);
font-size: 11.5px;
line-height: 130%;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sk-acc);
}
.featured-post__meta-dot {
width: 5px;
height: 5px;
align-self: center;
border-radius: 50%;
background: rgba(43,48,56,0.4);
}
.featured-post__title {
margin: 0;
max-width: 20ch;
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(30px, 3.8vw, 54px);
line-height: 100%;
letter-spacing: -0.018em;
color: var(--sk-fg);
text-wrap: pretty;
}
.featured-post__lead {
margin: 0;
max-width: 52ch;
font-family: var(--sk-font-body);
font-size: 16.5px;
line-height: 172%;
font-weight: 300;
color: #434548;
}
.featured-post__more {
display: flex;
align-items: center;
gap: 12px;
margin-top: 6px;
font-family: var(--sk-font-heading);
font-size: 11.5px;
line-height: 130%;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sk-fg);
transition: color 240ms ease, gap 340ms ease;
}
.featured-post__link:hover .featured-post__more,
.featured-post__link:focus-visible .featured-post__more {
color: var(--sk-acc);
gap: 20px;
}
.featured-post__more-arrow {
font-size: 13px;
line-height: 100%;
}
.featured-post__visual {
flex: 1 1 min(52%, 620px);
min-width: 260px;
position: relative;
overflow: hidden;
min-height: clamp(260px, 30vw, 460px);
background: var(--sk-bg-muted);
}
.featured-post__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 900ms cubic-bezier(0.16,1,0.3,1);
}
.featured-post__link:hover .featured-post__image,
.featured-post__link:focus-visible .featured-post__image {
transform: scale(1.03);
}
/* --- Article list (Wszystkie wpisy) --- */
.article-list {
background: var(--sk-bg);
color: var(--sk-fg);
padding-top: clamp(56px, 6.5vw, 96px);
padding-bottom: clamp(72px, 8.5vw, 132px);
}
.article-list__header {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
padding-bottom: clamp(20px, 2.4vw, 30px);
}
.article-list__title {
margin: 0;
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(26px, 3.2vw, 44px);
line-height: 102%;
letter-spacing: -0.016em;
color: var(--sk-fg);
}
.article-list__label {
font-family: var(--sk-font-heading);
font-size: 11.5px;
line-height: 130%;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sk-fg-muted);
}
.article-list__grid {
display: grid;
border-top: 1px solid rgba(43,48,56,0.24);
}
.article-list__item {
display: grid;
grid-template-columns: clamp(150px, 15vw, 210px) minmax(0, 1.15fr) minmax(0, 1fr);
align-items: start;
gap: 12px clamp(28px, 4vw, 72px);
padding: clamp(26px, 3vw, 40px) 0;
border-bottom: 1px solid rgba(43,48,56,0.16);
color: var(--sk-fg);
text-decoration: none;
transition: padding-left 340ms cubic-bezier(0.16,1,0.3,1), color 240ms ease;
}
.article-list__item:hover,
.article-list__item:focus-visible {
padding-left: 14px;
color: var(--sk-acc);
outline: none;
}
.article-list__date {
grid-column: 1;
padding-top: 6px;
font-family: var(--sk-font-heading);
font-size: 11.5px;
line-height: 130%;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sk-fg-muted);
}
.article-list__item-title {
grid-column: 2;
font-family: var(--sk-font-heading);
font-stretch: 80%;
font-weight: 700;
font-size: clamp(23px, 2.4vw, 34px);
line-height: 108%;
letter-spacing: -0.014em;
color: inherit;
text-wrap: pretty;
}
.article-list__item-lead {
grid-column: 3;
margin-top: 5px;
max-width: 46ch;
font-family: var(--sk-font-body);
font-size: 15.5px;
line-height: 170%;
font-weight: 300;
color: #4F5459;
}
.article-list__item:hover .article-list__item-lead,
.article-list__item:focus-visible .article-list__item-lead {
color: inherit;
}
.article-list__ctas {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
padding-top: clamp(36px, 4vw, 56px);
}
@media (max-width: 1100px) {
.article-list__item {
grid-template-columns: minmax(0, 1fr);
}
.article-list__date,
.article-list__item-title,
.article-list__item-lead {
grid-column: 1;
}
}
/* === Research section (Nauka — Badania / Czym się zajmuję) ====
Design ref: KOZIEJ STRONA.dc.html linia 1239-1266.
Header: eyebrow + H2 lewa, intro prawa (flex space-between).
Grid 3 kart z border-top: SVG + label + H3 + desc.
================================================================ */
.research-section {
background: var(--sk-bg);
color: var(--sk-fg);
padding-top: clamp(72px, 8.5vw, 132px);
padding-bottom: clamp(76px, 9vw, 140px);
}
.research-section__header {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 22px;
margin-bottom: clamp(30px, 3.6vw, 52px);
}
.research-section__head {
max-width: 100%;
}
.research-section__eyebrow {
display: block;
font-family: var(--sk-font-heading);
font-size: 12px;
line-height: 150%;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sk-acc);
}
.research-section__title {
margin: 14px 0 0;
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(32px, 4.2vw, 58px);
line-height: 98%;
letter-spacing: -0.016em;
color: var(--sk-fg);
}
.research-section__intro {
margin: 0;
flex: 1 1 320px;
max-width: 40ch;
font-family: var(--sk-font-body);
font-size: 16.5px;
line-height: 172%;
font-weight: 300;
color: #434548;
}
.research-section__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: clamp(28px, 3.6vw, 72px);
padding-top: clamp(30px, 3.4vw, 48px);
border-top: 1px solid rgba(43,48,56,0.18);
}
.research-item {
display: flex;
flex-direction: column;
gap: 16px;
color: var(--sk-fg);
}
.research-item__icon {
display: block;
width: 30px;
height: 30px;
flex: 0 0 auto;
color: var(--sk-acc);
}
.research-item__label {
font-family: var(--sk-font-heading);
font-size: 11px;
line-height: 130%;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--sk-fg-muted);
}
.research-item__title {
margin: 0;
font-family: var(--sk-font-heading);
font-stretch: 78%;
font-weight: 700;
font-size: clamp(23px, 2.3vw, 33px);
line-height: 104%;
letter-spacing: -0.014em;
color: var(--sk-fg);
text-wrap: pretty;
}
.research-item__desc {
margin: 0;
max-width: 32ch;
font-family: var(--sk-font-body);
font-size: 15.5px;
line-height: 170%;
font-weight: 300;
color: #434548;
}
/* === Publications section (Nauka — Gdzie publikuję) ============
Design ref: KOZIEJ STRONA.dc.html linia 1269-1293.
Dark bg. 2 kolumny: intro (eyebrow, H2, desc, link PubMed) + lista czasopism (name + abbr, border-top rows).
================================================================ */
.publications-section {
background: var(--sk-dark-bg-alt);
color: var(--sk-dark-fg);
padding-top: clamp(76px, 9vw, 140px);
padding-bottom: clamp(76px, 9vw, 140px);
}
.publications-section__grid {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: clamp(32px, 5vw, 110px);
}
.publications-section__intro {
flex: 1 1 320px;
min-width: 258px;
max-width: 380px;
}
.publications-section__eyebrow {
display: block;
font-family: var(--sk-font-heading);
font-size: 12px;
line-height: 150%;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sk-acc-lt);
}
.publications-section__title {
margin: 14px 0 20px;
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(32px, 4.2vw, 58px);
line-height: 96%;
letter-spacing: -0.016em;
color: var(--sk-fg-strong);
}
.publications-section__desc {
margin: 0 0 clamp(20px, 2.2vw, 28px);
max-width: 34ch;
font-family: var(--sk-font-body);
font-size: 16.5px;
line-height: 172%;
font-weight: 300;
color: var(--sk-dark-fg-muted);
}
.publications-section__link {
display: inline-flex;
align-items: baseline;
gap: 10px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(227,229,232,0.4);
font-family: var(--sk-font-heading);
font-size: 12px;
line-height: 130%;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sk-fg-strong);
text-decoration: none;
transition: border-color 240ms ease, color 240ms ease;
}
.publications-section__link:hover,
.publications-section__link:focus-visible {
color: var(--sk-white);
border-color: var(--sk-white);
}
.publications-section__link-arrow {
font-size: 12px;
line-height: 1;
}
.publications-section__list {
flex: 1 1 420px;
min-width: 0;
}
.publications-section__list-label {
display: block;
font-family: var(--sk-font-heading);
font-size: 11px;
line-height: 130%;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--sk-acc-lt);
margin-bottom: clamp(12px, 1.4vw, 18px);
}
.publications-item {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: clamp(16px, 2vw, 32px);
padding: clamp(20px, 2.2vw, 28px) 0;
border-top: 1px solid var(--sk-dark-border);
transition: border-color 260ms ease;
}
.publications-item:hover {
border-top-color: rgba(227,229,232,0.4);
}
.publications-item__name {
display: block;
min-width: 0;
font-family: var(--sk-font-body);
font-size: clamp(17px, 1.6vw, 21px);
line-height: 140%;
font-weight: 300;
color: var(--sk-fg-strong);
}
.publications-item__abbr {
flex: 0 0 auto;
font-family: var(--sk-font-heading);
font-stretch: 84%;
font-size: 11.5px;
line-height: 130%;
font-weight: 600;
letter-spacing: 0.14em;
color: var(--sk-acc-lt);
}
/* === Materials section (Nauka — Dydaktyka / Materiały naukowe) ==
Design ref: KOZIEJ STRONA.dc.html linia 1295-1327.
Light bg (--sk-bg-muted #DDE0E3). 3 kolumny: intro + wizual (sylwetka) + lista pozycji z border-top.
================================================================ */
.materials-section {
background: var(--sk-bg-muted);
color: var(--sk-fg);
padding-top: clamp(72px, 8.5vw, 132px);
padding-bottom: clamp(72px, 8.5vw, 132px);
}
.materials-section__grid {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: clamp(28px, 4vw, 84px);
}
.materials-section__intro {
flex: 1 1 320px;
min-width: 258px;
max-width: 400px;
}
.materials-section__eyebrow {
display: block;
font-family: var(--sk-font-heading);
font-size: 12px;
line-height: 150%;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sk-acc);
}
.materials-section__title {
margin: 14px 0 18px;
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(32px, 4.2vw, 58px);
line-height: 96%;
letter-spacing: -0.016em;
color: var(--sk-fg);
}
.materials-section__desc {
margin: 0;
max-width: 34ch;
font-family: var(--sk-font-body);
font-size: 16.5px;
line-height: 172%;
font-weight: 300;
color: #434548;
}
.materials-section__cta {
margin-top: clamp(22px, 2.4vw, 30px);
}
.materials-section__visual {
flex: 0 1 520px;
min-width: 300px;
align-self: stretch;
display: flex;
align-items: flex-end;
justify-content: center;
margin-bottom: calc(-1 * clamp(72px, 8.5vw, 132px));
}
.materials-section__visual > picture { display: contents; }
.materials-section__visual img {
display: block;
max-width: 100%;
width: 580px;
height: auto;
object-fit: contain;
object-position: bottom center;
}
@media (max-width: 1100px) {
.materials-section__visual { display: none; }
}
.materials-section__list {
flex: 1 1 420px;
min-width: 0;
}
.materials-item {
padding: clamp(18px, 2vw, 26px) 0;
border-top: 1px solid rgba(43,48,56,0.2);
}
.materials-item:last-child {
border-bottom: 1px solid rgba(43,48,56,0.2);
}
.materials-item__title {
margin: 0 0 10px;
font-family: var(--sk-font-heading);
font-stretch: 82%;
font-weight: 700;
font-size: clamp(19px, 1.8vw, 25px);
line-height: 115%;
color: var(--sk-fg);
}
.materials-item__desc {
margin: 0;
max-width: 56ch;
font-family: var(--sk-font-body);
font-size: 15.5px;
line-height: 170%;
font-weight: 300;
color: #434548;
}
/* === Youthoria section (Nauka — Fundacja Youthoria) ============
Design ref: KOZIEJ STRONA.dc.html linia 1329-1349.
Dark bg. 2 kolumny: content (eyebrow, logo w H2, opisy, meta KRS/NIP/REGON + CTA) + wizual (aspect 4:3).
================================================================ */
.youthoria-section {
background: var(--sk-dark-bg-alt);
color: var(--sk-dark-fg);
padding-top: clamp(72px, 8.5vw, 132px);
padding-bottom: clamp(72px, 8.5vw, 132px);
}
.youthoria-section__grid {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(28px, 4vw, 84px);
}
.youthoria-section__content {
flex: 1 1 440px;
min-width: 0;
}
.youthoria-section__eyebrow {
display: block;
font-family: var(--sk-font-heading);
font-size: 12px;
line-height: 150%;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sk-acc-lt);
}
.youthoria-section__logo-wrap {
margin: 18px 0 22px;
font-size: 0;
line-height: 0;
}
.youthoria-section__logo {
display: block;
max-width: 100%;
width: clamp(180px, 20vw, 265px);
height: auto;
}
.youthoria-section__desc {
margin: 0 0 clamp(16px, 1.8vw, 22px);
max-width: 50ch;
font-family: var(--sk-font-body);
font-size: 17px;
line-height: 172%;
font-weight: 300;
color: var(--sk-dark-fg-muted);
}
.youthoria-section__desc:last-of-type {
margin-bottom: 0;
}
.youthoria-section__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(18px, 2.4vw, 40px);
margin-top: clamp(26px, 3vw, 38px);
padding-top: clamp(20px, 2.2vw, 28px);
border-top: 1px solid rgba(241,244,247,0.18);
}
.youthoria-meta__item {
display: flex;
flex-direction: column;
gap: 7px;
}
.youthoria-meta__label {
font-family: var(--sk-font-heading);
font-size: 11px;
line-height: 130%;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #6B7076;
}
.youthoria-meta__value {
font-family: var(--sk-font-heading);
font-size: 16px;
line-height: 130%;
font-weight: 500;
color: var(--sk-dark-fg);
}
.youthoria-section__cta {
align-self: center;
}
.youthoria-section__cta-icon {
display: block;
width: 14px;
height: 14px;
flex: 0 0 auto;
}
.youthoria-section__visual {
flex: 1 1 340px;
min-width: 250px;
max-width: 100%;
width: 100%;
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #1C2026;
}
.youthoria-section__visual img {
max-width: 100%;
width: 100%;
height: 100%;
object-fit: cover;
}
/* === Qualifications section (O mnie — Kwalifikacje) === */
.qualifications-section {
background: var(--sk-dark-bg-alt);
color: var(--sk-dark-fg);
padding-top: clamp(30px, 3.4vw, 46px);
padding-bottom: clamp(34px, 4vw, 56px);
border-top: 1px solid rgba(241,244,247,0.14);
overflow: clip;
}
.qualifications-section__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: clamp(20px, 2.4vw, 32px) clamp(16px, 2vw, 28px);
}
.qualifications-section__item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: clamp(18px, 2vw, 24px) 0 0;
border-top: 1px solid rgba(241,244,247,0.24);
}
.qualifications-section__icon {
display: block;
width: 30px;
height: 30px;
flex: 0 0 auto;
}
.qualifications-section__title {
display: block;
font-family: var(--sk-font-heading);
font-stretch: 84%;
font-weight: 600;
font-size: 15px;
line-height: 125%;
letter-spacing: 0.005em;
color: #F1F4F7;
}
.qualifications-section__sub {
display: block;
margin-top: 6px;
font-size: 13.5px;
line-height: 155%;
font-weight: 300;
color: #B7BEC6;
}
/* === Career section (O mnie — Droga zawodowa) === */
.career-section {
background: #ECEEF0;
color: #2B3038;
padding-top: clamp(72px, 8.5vw, 132px);
padding-bottom: clamp(76px, 9vw, 140px);
overflow: clip;
}
.career-section__inner {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: clamp(28px, 4vw, 84px);
}
.career-section__intro {
flex: 0 1 330px;
min-width: 250px;
position: sticky;
top: calc(clamp(64px, 6vw, 82px) + 40px);
align-self: flex-start;
}
.career-section__eyebrow {
display: block;
font-family: var(--sk-font-heading);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sk-acc);
}
.career-section__heading {
margin: 14px 0 18px;
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(32px, 4.2vw, 58px);
line-height: 96%;
letter-spacing: -0.016em;
}
.career-section__lead {
margin: 0;
max-width: 34ch;
font-size: 16.5px;
line-height: 172%;
font-weight: 300;
color: #434548;
}
.career-section__timeline {
flex: 1 1 440px;
min-width: 0;
}
.career-entry {
display: grid;
grid-template-columns: clamp(52px, 6.4vw, 78px) 1px minmax(0, 1fr);
gap: 0 clamp(14px, 1.8vw, 26px);
}
.career-entry__label {
font-family: var(--sk-font-heading);
font-stretch: 80%;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--sk-acc);
text-align: right;
padding-top: 1px;
}
.career-entry__line {
position: relative;
align-self: stretch;
background: rgba(43,48,56,0.22);
}
.career-entry__line--fade {
background: linear-gradient(180deg, rgba(43,48,56,0.22) 0%, rgba(43,48,56,0.22) 26px, rgba(43,48,56,0) 100%);
}
.career-entry__dot {
position: absolute;
left: 50%;
top: 4px;
transform: translate(-50%, 0);
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--sk-acc);
box-shadow: 0 0 0 4px #ECEEF0;
}
.career-entry__body {
min-width: 0;
padding-bottom: clamp(26px, 3vw, 40px);
}
.career-entry__title {
margin: 0 0 8px;
font-family: var(--sk-font-heading);
font-stretch: 82%;
font-weight: 700;
font-size: clamp(19px, 1.8vw, 25px);
line-height: 115%;
}
.career-entry__desc {
margin: 0;
max-width: 52ch;
font-size: 15.5px;
line-height: 170%;
font-weight: 300;
color: #434548;
}
@media (max-width: 767px) {
.career-section__intro {
position: static;
}
}
/* === OR Room section (O mnie — Przy stole operacyjnym) === */
@keyframes orMarq {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.orroom-section {
background: var(--sk-dark-bg-alt);
overflow: clip;
}
.orroom-section__video-wrap {
position: relative;
width: 100%;
height: clamp(380px, 48vw, 700px);
overflow: hidden;
}
.orroom-section__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 42%;
filter: grayscale(1);
}
.orroom-section__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(21,24,28,0.45) 0%, rgba(21,24,28,0.12) 45%, rgba(21,24,28,0.9) 100%);
}
.orroom-section__video-footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding-top: clamp(20px, 3vw, 48px);
padding-bottom: clamp(20px, 3vw, 48px);
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
}
.orroom-section__heading {
margin: 0;
max-width: 20ch;
font-family: var(--sk-font-heading);
font-stretch: 78%;
font-weight: 700;
font-size: clamp(26px, 3.6vw, 54px);
line-height: 102%;
letter-spacing: -0.012em;
color: #EFF0F1;
}
.orroom-section__rating {
display: inline-flex;
align-items: flex-end;
gap: 16px;
color: #EFF0F1;
text-decoration: none;
}
.orroom-section__score {
font-family: var(--sk-font-heading);
font-stretch: 80%;
font-weight: 700;
font-size: clamp(34px, 3.2vw, 46px);
line-height: 82%;
letter-spacing: -0.02em;
}
.orroom-section__rating-meta {
display: flex;
flex-direction: column;
gap: 7px;
padding-bottom: 3px;
}
.orroom-section__stars {
display: flex;
gap: 5px;
color: var(--sk-acc-lt);
font-size: 11px;
line-height: 1;
}
.orroom-section__count {
font-family: var(--sk-font-heading);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.14em;
color: #8F9295;
white-space: nowrap;
}
.orroom-section__marquee {
overflow: hidden;
}
.orroom-section__marquee-track {
display: flex;
width: max-content;
gap: 2px;
animation: orMarq 64s linear infinite;
}
.orroom-section__photo {
flex: 0 0 auto;
width: clamp(240px, 26vw, 400px);
height: clamp(220px, 26vw, 380px);
overflow: hidden;
background: #1C2026;
}
.orroom-section__photo img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1);
}
/* === Cabinet section (O mnie — W gabinecie) === */
.cabinet-section {
background: var(--sk-dark-bg-alt);
color: var(--sk-dark-fg);
padding-top: clamp(72px, 8.5vw, 132px);
padding-bottom: clamp(72px, 8.5vw, 132px);
overflow: clip;
}
.cabinet-section__inner {
display: flex;
flex-wrap: wrap-reverse;
align-items: center;
gap: clamp(28px, 4vw, 84px);
}
.cabinet-section__visual {
flex: 1 1 360px;
min-width: 250px;
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #1C2026;
}
.cabinet-section__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
object-position: 50% 44%;
}
.cabinet-section__content {
flex: 1 1 420px;
min-width: 0;
}
.cabinet-section__blockquote {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(18px, 2vw, 26px);
margin: 0;
padding: 0;
}
.cabinet-section__quote-icon {
display: block;
width: clamp(32px, 3.4vw, 48px);
height: auto;
flex: 0 0 auto;
opacity: 0.85;
}
.cabinet-section__quote-text {
display: block;
font-family: var(--sk-font-heading);
font-stretch: 78%;
font-weight: 700;
font-size: clamp(28px, 3.6vw, 52px);
line-height: 104%;
letter-spacing: -0.016em;
color: #EFF0F1;
}
.cabinet-section__desc {
margin: clamp(20px, 2.2vw, 28px) 0 0;
max-width: 46ch;
font-size: 17px;
line-height: 172%;
font-weight: 300;
color: #9DA2A7;
}
/* === Societies section (O mnie — Towarzystwa naukowe) === */
.societies-section {
background: #DDE0E3;
color: #2B3038;
padding-top: clamp(72px, 8.5vw, 132px);
padding-bottom: clamp(72px, 8.5vw, 132px);
overflow: clip;
}
.societies-section__header {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
padding-bottom: clamp(24px, 2.8vw, 38px);
border-bottom: 1px solid rgba(43,48,56,0.2);
}
.societies-section__eyebrow {
display: block;
font-family: var(--sk-font-heading);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sk-acc);
}
.societies-section__heading {
margin: 14px 0 0;
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(30px, 3.8vw, 52px);
line-height: 100%;
letter-spacing: -0.016em;
}
.societies-section__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: clamp(26px, 3vw, 56px);
margin-top: clamp(34px, 3.8vw, 52px);
}
.societies-section__item {
display: flex;
flex-direction: column;
gap: 16px;
}
.societies-section__logo {
height: clamp(66px, 6vw, 82px);
max-width: 100%;
width: auto;
object-fit: contain;
object-position: left center;
opacity: 0.8;
}
.societies-section__name {
font-size: 16px;
line-height: 160%;
font-weight: 500;
color: #2B3038;
}
/* === Next steps section (O mnie — Dalej) === */
.nextsteps-section {
background: #ECEEF0;
color: #2B3038;
padding-top: clamp(72px, 8.5vw, 132px);
padding-bottom: clamp(72px, 8.5vw, 132px);
overflow: clip;
}
.nextsteps-section__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: clamp(16px, 1.8vw, 26px);
}
.nextsteps-card {
display: flex;
flex-direction: column;
gap: clamp(20px, 2.4vw, 30px);
min-height: clamp(300px, 26vw, 380px);
height: 100%;
padding: clamp(28px, 3vw, 40px);
box-shadow: inset 0 0 0 1px rgba(43,48,56,0.16);
text-decoration: none;
transition: background 320ms ease, box-shadow 320ms ease, transform 420ms cubic-bezier(0.16,1,0.3,1);
}
.nextsteps-card:hover {
transform: translateY(-4px);
}
.nextsteps-card--light {
background: #F4F5F6;
color: #2B3038;
}
.nextsteps-card--light:hover {
background: #FFFFFF;
box-shadow: inset 0 0 0 1px rgba(43,48,56,0.34);
}
.nextsteps-card--dark {
background: #15181C;
color: #EFF0F1;
}
.nextsteps-card--dark:hover {
background: #1C2026;
}
.nextsteps-card__icon {
display: block;
color: var(--sk-acc);
}
.nextsteps-card--dark .nextsteps-card__icon {
color: #F1F4F7;
}
.nextsteps-card__icon svg {
display: block;
width: clamp(46px, 4.4vw, 60px);
height: clamp(46px, 4.4vw, 60px);
}
.nextsteps-card__eyebrow {
display: block;
font-family: var(--sk-font-heading);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #6B7076;
}
.nextsteps-card--dark .nextsteps-card__eyebrow {
color: #9DA2A7;
}
.nextsteps-card__title {
display: block;
margin-top: -10px;
font-family: var(--sk-font-heading);
font-stretch: 78%;
font-weight: 700;
font-size: clamp(23px, 2.2vw, 31px);
line-height: 106%;
letter-spacing: -0.014em;
}
.nextsteps-card__desc {
display: block;
margin-top: -14px;
font-size: 15.5px;
line-height: 168%;
font-weight: 300;
color: #4F5459;
}
.nextsteps-card--dark .nextsteps-card__desc {
color: #9DA2A7;
}
.nextsteps-card__cta {
display: flex;
align-items: center;
gap: 12px;
margin-top: auto;
padding-top: clamp(18px, 2vw, 24px);
border-top: 1px solid rgba(43,48,56,0.18);
font-family: var(--sk-font-heading);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.nextsteps-card--dark .nextsteps-card__cta {
border-top-color: rgba(241,244,247,0.22);
}
/* === Single Zabiegi === */
body.single-zabiegi { background: #ECEEF0; }
body.single-zabiegi .site-header__logo img { filter: brightness(0); }
.zab-layout {
display: grid;
grid-template-columns: clamp(200px, 22vw, 300px) 1fr;
align-items: start;
gap: 0;
max-width: 1460px;
margin: 0 auto;
padding: calc(clamp(64px, 6vw, 82px) + clamp(30px, 3.6vw, 56px)) clamp(24px, 7vw, 180px) clamp(76px, 9vw, 140px);
background: #ECEEF0;
min-height: 100vh;
}
@media (max-width: 900px) {
.zab-layout {
grid-template-columns: 1fr;
}
}
/* Sidebar */
.zab-sidebar {
align-self: start;
padding: 0 clamp(20px, 2.6vw, 44px) clamp(64px, 7.5vw, 112px) 0;
}
.zab-sidebar__toggle {
display: none;
width: 100%;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 0;
background: transparent;
border: none;
border-bottom: 1px solid rgba(43,48,56,0.18);
font-family: var(--sk-font-heading);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #2B3038;
cursor: pointer;
text-align: left;
}
@media (max-width: 900px) {
.zab-sidebar {
padding: 0;
border-bottom: 1px solid rgba(43,48,56,0.18);
}
.zab-sidebar__toggle {
display: flex;
}
.zab-sidebar__inner {
display: none;
padding-bottom: clamp(28px, 3.4vw, 44px);
}
.zab-sidebar.is-open .zab-sidebar__inner {
display: block;
animation: edIn 280ms ease both;
}
.zab-sidebar__toggle-icon {
transition: transform 280ms ease;
}
.zab-sidebar.is-open .zab-sidebar__toggle-icon {
transform: rotate(180deg);
}
}
.zab-sidebar__inner {
position: sticky;
top: calc(clamp(64px, 6vw, 82px) + 24px);
}
.zab-sidebar__group {
margin-bottom: 26px;
}
.zab-sidebar__group-label {
display: block;
font-family: var(--sk-font-heading);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #6B7076;
padding-bottom: 14px;
}
.zab-sidebar__list {
list-style: none;
margin: 0;
padding: 0;
}
.zab-sidebar__link {
display: block;
padding: 14px 16px;
border-bottom: 1px solid rgba(43,48,56,0.16);
font-size: 15px;
line-height: 130%;
color: #2B3038;
text-decoration: none;
font-weight: 300;
background: transparent;
transition: background 220ms ease, padding-left 260ms cubic-bezier(0.16,1,0.3,1), color 220ms ease;
}
.zab-sidebar__link:hover {
background: #E2E5E8;
padding-left: 22px;
}
.zab-sidebar__link--active {
background: #2B3038;
color: #ECEEF0;
font-weight: 600;
}
.zab-sidebar__link--active:hover {
background: #2B3038;
color: #ECEEF0;
padding-left: 16px;
}
.zab-sidebar__all {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 20px;
font-family: var(--sk-font-heading);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #2B3038;
text-decoration: none;
transition: color 220ms ease;
}
.zab-sidebar__all:hover {
color: var(--sk-acc);
}
/* Main */
.zab-main {
min-width: 0;
padding: 0 0 clamp(60px, 7vw, 110px) clamp(24px, 3.4vw, 64px);
border-left: 1px solid rgba(43,48,56,0.18);
}
@media (max-width: 900px) {
.zab-main {
padding: clamp(36px, 4vw, 56px) 0 0;
border-left: none;
}
}
.zab-main__header {
padding-bottom: clamp(30px, 3.4vw, 48px);
}
.zab-main__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.7em;
font-family: var(--sk-font-heading);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--sk-acc);
}
.zab-main__title {
margin: clamp(14px, 1.6vw, 20px) 0 0;
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(38px, 5.2vw, 84px);
line-height: 92%;
letter-spacing: -0.02em;
color: #2B3038;
}
/* Anchor nav */
.zab-main__anchors {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding-top: clamp(4px, 0.8vw, 10px);
padding-bottom: clamp(2px, 0.6vw, 6px);
}
.zab-main__anchors-list {
display: contents;
list-style: none;
margin: 0;
padding: 0;
}
.zab-main__anchors-label {
font-family: var(--sk-font-heading);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #6B7076;
margin-right: 6px;
}
.zab-main__anchor {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 10px 16px;
box-shadow: 0 0 0 1px rgba(43,48,56,0.22);
font-family: var(--sk-font-heading);
font-stretch: 86%;
font-size: 13.5px;
font-weight: 500;
letter-spacing: 0.01em;
color: #2B3038;
text-decoration: none;
transition: background 240ms ease, box-shadow 240ms ease, color 240ms ease;
}
.zab-main__anchor:hover {
background: #2B3038;
color: #ECEEF0;
box-shadow: 0 0 0 1px #2B3038;
}
@media (max-width: 767px) {
.zab-main__anchor { padding-top: 7px; padding-bottom: 7px; }
}
/* Fakty */
.zab-fakty {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
gap: 1px;
margin: clamp(28px, 3.2vw, 44px) 0 0;
background: rgba(43,48,56,0.18);
}
.zab-fakt {
background: #ECEEF0;
box-shadow: 0 0 0 1px rgba(43,48,56,0.18);
padding: clamp(18px, 2vw, 26px);
}
.zab-fakt__label {
font-family: var(--sk-font-heading);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
line-height: 130%;
text-transform: uppercase;
color: #6B7076;
}
.zab-fakt__value {
margin-top: 10px;
font-family: var(--sk-font-heading);
font-stretch: 80%;
font-weight: 700;
font-size: clamp(20px, 2vw, 27px);
line-height: 105%;
letter-spacing: -0.012em;
color: #2B3038;
}
/* Sections */
.zab-section {
padding-top: clamp(44px, 5vw, 80px);
}
.zab-section__head {
display: flex;
align-items: baseline;
padding-bottom: clamp(18px, 2vw, 26px);
border-bottom: 1px solid rgba(43,48,56,0.18);
}
.zab-section__title {
margin: 0;
font-family: var(--sk-font-heading);
font-stretch: 78%;
font-weight: 700;
font-size: clamp(26px, 2.9vw, 42px);
line-height: 102%;
letter-spacing: -0.014em;
color: #2B3038;
}
.zab-section__body {
padding-top: clamp(22px, 2.4vw, 32px);
}
/* Prose */
.zab-prose p {
margin: 0 0 clamp(16px, 1.8vw, 22px);
max-width: 66ch;
font-size: clamp(16.5px, 1.35vw, 19px);
line-height: 175%;
font-weight: 300;
color: #333941;
}
.zab-prose p:last-child {
margin-bottom: 0;
}
.zab-prose h3 {
margin: clamp(28px, 3vw, 40px) 0 14px;
font-family: var(--sk-font-heading);
font-size: 12px;
line-height: 150%;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sk-fg);
}
.zab-prose h3:first-child { margin-top: 0; }
.zab-prose ul {
margin: 0 0 clamp(16px, 1.8vw, 22px);
padding: 0;
list-style: none;
max-width: 66ch;
}
.zab-prose li {
position: relative;
margin: 0 0 10px;
padding-left: 26px;
font-size: clamp(16px, 1.25vw, 18px);
line-height: 165%;
font-weight: 300;
color: #333941;
}
.zab-prose li::before {
content: '';
position: absolute;
left: 2px;
top: 0.85em;
width: 12px;
height: 1px;
background: var(--sk-acc-lt);
}
.zab-prose strong { font-weight: 500; color: var(--sk-fg); }
/* CTA */
.zab-cta {
padding-top: clamp(36px, 4vw, 60px);
}
.zab-cta .cbtn {
padding-top: 22px;
padding-bottom: 22px;
}
@media (max-width: 767px) {
.zab-cta .cbtn {
padding-top: 16px;
padding-bottom: 16px;
}
}
.zab-cta__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 26px 34px;
font-family: var(--sk-font-heading);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 12px;
color: #ECEEF0;
background-color: #2B3038;
background-image: linear-gradient(var(--sk-acc), var(--sk-acc));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% 0%;
text-decoration: none;
transition: background-size 520ms cubic-bezier(0.16,1,0.3,1), color 260ms ease;
}
.zab-cta__btn:hover {
background-size: 100% 100%;
color: #FFFFFF;
}
.zab-cta__sep {
display: inline-block;
width: 1px;
height: 12px;
background: currentColor;
opacity: 0.4;
}
/* FAQ */
.zab-faq-item {
border-bottom: 1px solid rgba(43,48,56,0.16);
}
.zab-faq-item__q {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 20px;
width: 100%;
padding: clamp(17px, 1.9vw, 23px) 0;
cursor: pointer;
list-style: none;
font-family: var(--sk-font-heading);
font-stretch: 82%;
font-weight: 700;
font-size: clamp(18px, 1.7vw, 23px);
line-height: 128%;
color: #2B3038;
transition: color 220ms ease;
}
.zab-faq-item__q::-webkit-details-marker { display: none; }
.zab-faq-item__q::after {
content: '+';
flex: 0 0 auto;
font-family: var(--sk-font-heading);
font-size: 20px;
line-height: 1;
color: var(--sk-acc);
transition: transform 280ms ease;
}
.zab-faq-item[open] .zab-faq-item__q {
color: var(--sk-acc);
}
.zab-faq-item[open] .zab-faq-item__q::after {
transform: rotate(45deg);
}
.zab-faq-item__a {
padding-bottom: clamp(20px, 2.2vw, 28px);
}
details[open].zab-faq-item .zab-faq-item__a:not(.is-closing) {
animation: edIn 260ms ease both;
}
@keyframes edFaqOut {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-6px); }
}
.zab-faq-item__a.is-closing {
animation: edFaqOut 200ms ease forwards;
}
@media (prefers-reduced-motion: reduce) {
details[open].zab-faq-item .zab-faq-item__a,
.zab-faq-item__a.is-closing { animation-duration: 1ms !important; }
}
/* Related */
.zab-related {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
gap: 1px;
background: rgba(43,48,56,0.18);
}
.zab-related__card {
display: flex;
flex-direction: column;
gap: 10px;
background: #ECEEF0;
box-shadow: 0 0 0 1px rgba(43,48,56,0.18);
padding: clamp(20px, 2.4vw, 32px);
color: #2B3038;
text-decoration: none;
transition: background 300ms ease;
}
.zab-related__card:hover {
background: #E2E5E8;
}
.zab-related__title {
font-family: var(--sk-font-heading);
font-stretch: 82%;
font-weight: 700;
font-size: clamp(18px, 1.7vw, 23px);
line-height: 112%;
}
.zab-related__sub {
font-size: 15px;
line-height: 165%;
font-weight: 300;
color: #4F5459;
}
/* === Archive Zabiegi === */
/* Hero */
.zab-hero {
position: relative;
isolation: isolate;
background: var(--sk-dark-bg-alt);
min-height: clamp(500px, 64svh, 680px);
display: flex;
align-items: flex-end;
overflow: hidden;
}
.zab-hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
object-position: 46% 18%;
z-index: -2;
}
.zab-hero__overlay {
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, rgba(16,19,23,0.82) 0%, rgba(16,19,23,0.5) 42%, rgba(16,19,23,0.88) 100%);
}
.zab-hero__content {
position: relative;
width: 100%;
padding-top: calc(clamp(64px, 6vw, 82px) + clamp(52px, 6.5vw, 104px));
padding-bottom: clamp(46px, 5.4vw, 82px);
}
.zab-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.7em;
font-family: var(--sk-font-heading);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.26em;
text-transform: uppercase;
color: #C2CAD3;
animation: edTrack 800ms ease 280ms both;
}
.zab-hero__dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(241,244,247,0.65);
flex: 0 0 auto;
}
.zab-hero__title {
margin: clamp(14px, 1.8vw, 22px) 0 0;
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(52px, 9vw, 150px);
line-height: 88%;
letter-spacing: -0.022em;
color: #F5F6F7;
animation: edMask 1000ms cubic-bezier(0.22,0.61,0.36,1) 360ms both;
}
.zab-hero__desc {
margin: clamp(22px, 2.6vw, 32px) 0 0;
max-width: 54ch;
font-size: clamp(17px, 1.5vw, 21px);
line-height: 162%;
font-weight: 300;
color: #DCDFE3;
animation: edIn 800ms ease 580ms both;
}
@media (prefers-reduced-motion: reduce) {
.zab-hero__eyebrow,
.zab-hero__title,
.zab-hero__desc { animation-duration: 1ms !important; animation-delay: 0ms !important; }
}
/* Kategorie strip */
.zab-cats {
background: var(--sk-dark-bg-alt);
color: var(--sk-dark-fg);
padding-top: clamp(26px, 3vw, 40px);
padding-bottom: clamp(30px, 3.4vw, 46px);
border-top: 1px solid rgba(241,244,247,0.14);
overflow: clip;
}
.zab-cats__label {
display: block;
font-family: var(--sk-font-heading);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #C2CAD3;
}
.zab-cats__btns {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: clamp(14px, 1.6vw, 20px);
}
.zab-cat-btn {
display: inline-flex;
align-items: baseline;
gap: 10px;
padding: 12px 20px;
border: 1px solid rgba(241,244,247,0.22);
background: transparent;
color: #C2CAD3;
cursor: pointer;
font-family: var(--sk-font-heading);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
transition: background 300ms ease, color 240ms ease, border-color 240ms ease;
}
.zab-cat-btn:hover {
border-color: rgba(241,244,247,0.6);
color: #EFF0F1;
}
.zab-cat-btn--active {
background: #EFF0F1;
border-color: #EFF0F1;
color: #15181C;
}
.zab-cat-btn__count {
font-family: var(--sk-font-main);
font-size: 11px;
font-weight: 400;
letter-spacing: 0.06em;
opacity: 0.65;
}
/* Group sections */
.zab-group {
padding-top: clamp(72px, 8.5vw, 132px);
padding-bottom: clamp(76px, 9vw, 140px);
overflow: clip;
}
.zab-group--light {
background: #ECEEF0;
color: #2B3038;
}
.zab-group--dark {
background: var(--sk-dark-bg-alt);
color: var(--sk-dark-fg);
}
.zab-group--muted {
background: #DDE0E3;
color: #2B3038;
}
.zab-group__inner {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: clamp(28px, 4vw, 84px);
}
@media (min-width: 901px) {
.zab-group--reverse .zab-group__intro { order: 2; align-self: flex-end; }
.zab-group--reverse .zab-group__list { order: 1; }
}
.zab-group__intro {
flex: 1 1 320px;
min-width: 258px;
max-width: 440px;
}
.zab-group__eyebrow {
display: block;
font-family: var(--sk-font-heading);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sk-acc);
}
.zab-group--dark .zab-group__eyebrow {
color: var(--sk-acc-lt);
}
.zab-group__heading {
margin: 14px 0 18px;
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(38px, 5vw, 76px);
line-height: 94%;
letter-spacing: -0.018em;
}
.zab-group--dark .zab-group__heading {
color: #EFF0F1;
}
.zab-group__desc {
margin: 0;
max-width: 40ch;
font-size: 16.5px;
line-height: 172%;
font-weight: 300;
color: #434548;
}
.zab-group--dark .zab-group__desc {
color: #9DA2A7;
}
.zab-group__list {
flex: 1 1 500px;
min-width: 0;
}
/* Procedure list items */
.zab-item {
display: grid;
grid-template-columns: minmax(0, 1fr) 26px;
align-items: baseline;
gap: 0 clamp(14px, 1.6vw, 22px);
padding: clamp(18px, 2vw, 24px) 0;
border-top: 1px solid rgba(43,48,56,0.16);
color: #2B3038;
text-decoration: none;
transition: color 240ms ease, padding-left 320ms cubic-bezier(0.16,1,0.3,1);
}
.zab-item:last-child {
border-bottom: 1px solid rgba(43,48,56,0.16);
}
.zab-item:hover {
color: var(--sk-acc);
padding-left: 10px;
}
.zab-group--dark .zab-item {
border-top-color: rgba(227,229,232,0.18);
color: #E3E5E8;
}
.zab-group--dark .zab-item:last-child {
border-bottom-color: rgba(227,229,232,0.18);
}
.zab-group--dark .zab-item:hover {
color: #FFFFFF;
}
.zab-item__title {
display: block;
font-family: var(--sk-font-heading);
font-stretch: 82%;
font-weight: 700;
font-size: clamp(21px, 2.1vw, 29px);
line-height: 112%;
letter-spacing: -0.01em;
}
.zab-group--dark .zab-item__title {
color: #EFF0F1;
}
.zab-item__arrow {
justify-self: end;
font-family: var(--sk-font-heading);
font-size: 15px;
}
/* === Pillars — flagship procedures === */
.pillars {
background: var(--sk-dark-bg-alt);
color: var(--sk-dark-fg);
padding-top: clamp(76px, 9vw, 148px);
overflow-x: clip;
}
.pillars__head {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: clamp(16px, 2vw, 24px);
padding: 0 clamp(28px, 9vw, 250px) clamp(44px, 5vw, 76px);
}
.pillars__title {
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(36px, 5.8vw, 88px);
line-height: 0.96;
letter-spacing: -0.015em;
color: #EFF0F1;
margin: 0;
}
.pillars__desc {
margin: 0;
max-width: 54ch;
font-size: 17.5px;
line-height: 1.7;
font-weight: 300;
color: var(--sk-dark-fg-muted);
}
.pillars__card {
display: flex;
flex-wrap: wrap;
align-items: stretch;
border-bottom: 1px solid rgba(227,229,232,0.16);
color: var(--sk-dark-fg);
text-decoration: none;
transition: color 220ms ease;
}
.pillars__card--reverse { flex-wrap: wrap-reverse; }
.pillars__card-text {
flex: 1 1 380px;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 18px;
padding: clamp(32px, 4vw, 64px) clamp(28px, 4vw, 72px) clamp(32px, 4vw, 64px) clamp(28px, 9vw, 250px);
}
.pillars__card--reverse .pillars__card-text {
padding: clamp(32px, 4vw, 64px) clamp(28px, 9vw, 250px) clamp(32px, 4vw, 64px) clamp(28px, 4vw, 72px);
}
@media (max-width: 767px) {
.pillars__card-text,
.pillars__card--reverse .pillars__card-text {
padding: 28px 24px 32px;
}
}
.pillars__eyebrow {
font-family: var(--sk-font-heading);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sk-acc-lt);
}
.pillars__card-title {
margin: 0;
font-family: var(--sk-font-heading);
font-stretch: 78%;
font-weight: 700;
font-size: clamp(32px, 4.4vw, 68px);
line-height: 0.98;
letter-spacing: -0.015em;
color: #EFF0F1;
}
.pillars__card-desc {
margin: 0;
max-width: 44ch;
font-size: 17.5px;
line-height: 1.7;
font-weight: 300;
color: var(--sk-dark-fg-muted);
}
.pillars__card-cta {
margin-top: 6px;
font-family: var(--sk-font-heading);
font-size: 14.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #EFF0F1;
}
.pillars__card-img {
flex: 1 1 min(58%, 780px);
min-width: 280px;
position: relative;
overflow: hidden;
min-height: clamp(340px, 46vw, 720px);
background: #1C2026;
}
.pillars__card-img img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1200ms cubic-bezier(0.16,1,0.3,1);
}
.pillars__card:hover .pillars__card-img img { transform: scale(1.045); }
.pillars__footer {
display: flex;
flex-direction: column;
align-items: center;
padding: clamp(48px, 5.6vw, 88px) clamp(28px, 9vw, 250px) clamp(56px, 6.4vw, 100px);
}
/* === Steps — path to procedure === */
.steps__inner {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: clamp(30px, 4vw, 88px);
}
.steps__left {
flex: 1 1 340px;
min-width: 260px;
position: sticky;
top: clamp(92px, 9vw, 130px);
align-self: flex-start;
}
.steps__title {
margin: 0 0 clamp(18px, 2.2vw, 28px);
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(32px, 4.6vw, 68px);
line-height: 0.98;
letter-spacing: -0.015em;
color: var(--sk-fg);
}
.steps__desc {
margin: 0 0 clamp(22px, 2.6vw, 34px);
max-width: 34ch;
font-size: 17px;
line-height: 1.7;
font-weight: 300;
color: #434548;
}
.steps__img-wrap {
position: relative;
width: 100%;
max-width: 380px;
aspect-ratio: 4 / 5;
overflow: hidden;
background: #CCD0D4;
}
.steps__img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.steps__right {
flex: 1 1 460px;
min-width: 0;
position: relative;
}
.steps__line {
position: absolute;
top: clamp(26px, 3.2vw, 46px);
bottom: clamp(26px, 3.2vw, 46px);
left: calc(clamp(44px, 5vw, 64px) / 2);
width: 1px;
background: rgba(43,48,56,0.18);
}
.steps__fill {
position: absolute;
top: 0; left: 0;
width: 1px;
background: #2B3038;
height: 0%;
transition: height 140ms linear;
}
.steps__step {
position: relative;
display: grid;
grid-template-columns: clamp(44px, 5vw, 64px) minmax(0, 1fr);
gap: 0 clamp(18px, 2.2vw, 32px);
padding: clamp(26px, 3.2vw, 46px) 0;
opacity: 0.34;
transition: opacity 620ms cubic-bezier(0.16, 1, 0.3, 1);
}
.steps__step.is-active {
opacity: 1;
}
.steps__num {
justify-self: center;
align-self: start;
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: clamp(38px, 4.2vw, 52px);
height: clamp(38px, 4.2vw, 52px);
border-radius: 50%;
background: #DDE0E3;
border: 1px solid rgba(43,48,56,0.22);
font-family: var(--sk-font-heading);
font-stretch: 80%;
font-weight: 700;
font-size: 13.5px;
letter-spacing: 0.04em;
color: #7E8185;
transition: background 620ms cubic-bezier(0.16,1,0.3,1), border-color 620ms ease, color 620ms ease;
}
.steps__step.is-active .steps__num {
background: #2B3038;
border-color: #2B3038;
color: #ECEEF0;
}
.steps__step-body { min-width: 0; padding-top: clamp(2px, 0.6vw, 8px); }
.steps__step-title {
margin: 0 0 12px;
font-family: var(--sk-font-heading);
font-stretch: 78%;
font-weight: 700;
font-size: clamp(24px, 2.8vw, 40px);
line-height: 1.02;
letter-spacing: -0.012em;
color: var(--sk-fg);
}
.steps__step-desc {
margin: 0;
max-width: 50ch;
font-size: 16.5px;
line-height: 1.72;
font-weight: 300;
color: #434548;
}
@media (max-width: 768px) {
.steps__left { position: static; }
.steps__step { opacity: 0.6; }
}
/* === O mnie === */
.about__inner {
display: flex;
flex-wrap: wrap;
gap: clamp(26px, 3.6vw, 70px);
align-items: flex-start;
}
.about__left {
flex: 1 1 480px;
min-width: 0;
}
.about__eyebrow {
display: block;
margin-bottom: clamp(14px, 1.8vw, 20px);
}
.about__title {
margin: 0 0 clamp(20px, 2.4vw, 30px);
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(34px, 5vw, 76px);
line-height: 0.98;
letter-spacing: -0.015em;
color: var(--sk-fg);
}
.about__lead {
margin: 0 0 clamp(18px, 2.2vw, 28px);
max-width: 40ch;
font-size: clamp(19px, 1.9vw, 26px);
line-height: 1.5;
font-weight: 300;
color: var(--sk-fg);
}
.about__body {
max-width: 58ch;
font-size: 16.5px;
line-height: 1.75;
font-weight: 300;
color: #434548;
}
.about__lead p { margin: 0; }
.about__body p { margin: 0 0 14px; }
.about__body p:last-child { margin-bottom: 0; }
.about__ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: clamp(22px, 2.6vw, 32px);
}
.about__right {
flex: 1 1 400px;
max-width: 460px;
min-width: 260px;
display: flex;
flex-direction: column;
gap: 14px;
}
.about__photo-wrap {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
max-height: 520px;
overflow: hidden;
background: #DDE0E3;
}
.about__photo-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.about__quote {
margin: clamp(10px, 1.4vw, 18px) 0 0;
padding-top: clamp(16px, 2vw, 24px);
border-top: 1px solid rgba(43,48,56,0.2);
font-size: clamp(19px, 1.8vw, 25px);
line-height: 1.45;
font-weight: 300;
color: var(--sk-fg);
}
.about__creds {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: clamp(26px, 3.2vw, 60px);
margin-top: clamp(40px, 5vw, 80px);
padding-top: clamp(26px, 3vw, 40px);
border-top: 1px solid rgba(43,48,56,0.22);
}
.about__cred-title {
font-family: var(--sk-font-heading);
font-stretch: 84%;
font-weight: 700;
text-transform: uppercase;
font-size: clamp(19px, 1.9vw, 25px);
letter-spacing: -0.01em;
color: var(--sk-fg);
}
.about__cred-desc {
margin: 10px 0 0;
font-size: 16px;
line-height: 1.65;
font-weight: 300;
color: #4F5154;
}
/* === Nauka i dydaktyka === */
.research__inner {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: clamp(32px, 4.4vw, 88px);
}
.research__main {
flex: 1 1 520px;
min-width: 0;
max-width: 1180px;
}
.research__title {
margin: 0 0 clamp(40px, 5vw, 76px);
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(32px, 5vw, 74px);
line-height: 0.98;
letter-spacing: -0.015em;
color: #EFF0F1;
}
.research__row {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px clamp(28px, 4vw, 80px);
padding: clamp(22px, 2.6vw, 34px) 0;
border-top: 1px solid rgba(227,229,232,0.16);
}
@media (min-width: 900px) {
.research__row { grid-template-columns: 140px minmax(0, 1fr); }
}
.research__row-label {
font-family: var(--sk-font-heading);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sk-dark-fg-muted);
padding-top: 4px;
}
.research__row-desc {
max-width: 52ch;
font-size: clamp(17px, 1.6vw, 21px);
line-height: 1.6;
font-weight: 300;
color: var(--sk-dark-fg);
}
.research__pubmed {
display: inline-block;
margin-top: clamp(30px, 3.6vw, 52px);
font-family: var(--sk-font-heading);
font-size: 15px;
font-weight: 500;
color: #EFF0F1;
border-bottom: 1px solid var(--sk-acc-lt);
padding-bottom: 6px;
text-decoration: none;
}
.research__aside {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(26px, 3vw, 44px);
padding-left: clamp(28px, 3.6vw, 64px);
border-left: 1px solid rgba(227,229,232,0.16);
}
.research__aside-label {
font-family: var(--sk-font-heading);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--sk-dark-fg-muted);
}
.research__aside img {
max-width: clamp(120px, 13vw, 168px);
width: 100%;
height: auto;
filter: brightness(0) invert(1);
opacity: 0.5;
transition: opacity 400ms ease;
}
.research__aside img:hover { opacity: 0.9; }
/* === Sala operacyjna === */
.theater {
background: var(--sk-dark-bg-alt);
color: var(--sk-dark-fg);
}
.theater__video-wrap {
position: relative;
width: 100%;
height: clamp(430px, 58vw, 820px);
overflow: hidden;
}
.theater__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 42%;
filter: grayscale(1) brightness(0.86);
}
.theater__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(21,24,28,0.45) 0%, rgba(21,24,28,0.15) 45%, rgba(21,24,28,0.9) 100%);
}
.theater__caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: clamp(20px, 3vw, 48px) clamp(28px, 9vw, 250px);
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
}
.theater__caption-title {
margin: 0;
max-width: 20ch;
font-family: var(--sk-font-heading);
font-stretch: 78%;
font-weight: 700;
font-size: clamp(26px, 3.6vw, 54px);
line-height: 1.02;
letter-spacing: -0.012em;
color: #EFF0F1;
}
.theater__rating {
display: inline-flex;
align-items: center;
gap: 16px;
color: #EFF0F1;
text-decoration: none;
}
.theater__rating-num {
font-family: var(--sk-font-heading);
font-stretch: 80%;
font-weight: 700;
font-size: clamp(34px, 3.2vw, 46px);
line-height: 0.82;
letter-spacing: -0.02em;
}
.theater__rating-meta {
display: flex;
flex-direction: column;
}
.theater__rating-stars {
display: flex;
gap: 5px;
color: var(--sk-acc-lt);
font-size: 11px;
line-height: 1;
}
.theater__rating-count {
font-family: var(--sk-font-heading);
font-size: 12px;
line-height: 130%;
font-weight: 500;
letter-spacing: 0.14em;
color: var(--sk-dark-fg-muted);
white-space: nowrap;
}
/* === Kadry z praktyki === */
@keyframes edMarq {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.marquee {
background: var(--sk-dark-bg-alt);
overflow: hidden;
}
.marquee__track {
display: flex;
width: max-content;
gap: 2px;
animation: edMarq 64s linear infinite;
}
.marquee__track:hover { animation-play-state: paused; }
.marquee__item {
flex: 0 0 auto;
width: clamp(240px, 26vw, 400px);
height: clamp(220px, 26vw, 380px);
overflow: hidden;
background: #1C2026;
}
.marquee__item img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* === Instagram === */
.insta.sk-section {
padding-top: clamp(64px, 8vw, 128px);
padding-bottom: clamp(64px, 8vw, 128px);
}
.insta__head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
margin-bottom: clamp(20px, 2.6vw, 34px);
}
.insta__handle {
margin: 0;
font-family: var(--sk-font-heading);
font-stretch: 78%;
font-weight: 700;
font-size: clamp(26px, 3.4vw, 46px);
line-height: 1.02;
letter-spacing: -0.012em;
color: var(--sk-fg);
}
.insta__follow {
font-family: var(--sk-font-heading);
font-size: 15px;
font-weight: 500;
color: var(--sk-fg);
border-bottom: 1px solid var(--sk-acc);
padding-bottom: 6px;
text-decoration: none;
}
.insta__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
}
.insta__tile {
position: relative;
display: block;
overflow: hidden;
background: #1C2026;
aspect-ratio: 9 / 16;
text-decoration: none;
}
.insta__video, .insta__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.insta__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(21,24,28,0.05) 55%, rgba(21,24,28,0.8));
}
.insta__label {
position: absolute;
left: 12px;
bottom: 12px;
font-family: var(--sk-font-heading);
font-size: 15px;
font-weight: 500;
color: #EFF0F1;
}
/* === Opinie === */
.reviews.sk-section--muted {
padding-top: clamp(72px, 8.5vw, 140px);
padding-bottom: clamp(72px, 8.5vw, 140px);
}
.reviews__header {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
padding-bottom: clamp(22px, 2.8vw, 38px);
border-bottom: 1px solid rgba(43,48,56,0.2);
margin-bottom: clamp(24px, 3vw, 42px);
}
.reviews__title {
margin: 0;
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(30px, 4.2vw, 60px);
line-height: 1;
letter-spacing: -0.012em;
color: var(--sk-fg);
}
.reviews__link {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--sk-font-heading);
font-size: 15px;
font-weight: 500;
color: var(--sk-fg);
border-bottom: 1px solid var(--sk-acc);
padding-bottom: 7px;
text-decoration: none;
}
.reviews__link img {
width: auto;
height: 17px;
object-fit: contain;
}
.reviews__body {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: clamp(26px, 4vw, 72px);
}
.reviews__score {
flex: 0 1 320px;
min-width: 240px;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: clamp(18px, 2.2vw, 26px);
}
.reviews__score-num {
font-family: var(--sk-font-heading);
font-stretch: 78%;
font-weight: 700;
font-size: clamp(80px, 11vw, 176px);
line-height: 0.78;
letter-spacing: -0.045em;
color: var(--sk-fg);
}
.reviews__score-label {
font-family: var(--sk-font-heading);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #4F5154;
}
.reviews__quotes {
flex: 1 1 420px;
min-width: 260px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: clamp(20px, 2.4vw, 30px);
padding-left: clamp(0px, 2vw, 44px);
border-left: 1px solid rgba(43,48,56,0.18);
}
.reviews__quote {
margin: 0;
font-size: clamp(19px, 2vw, 28px);
line-height: 1.45;
font-weight: 300;
color: var(--sk-fg);
}
.reviews__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-top: 16px;
border-top: 1px solid rgba(43,48,56,0.18);
}
.reviews__current-author {
font-family: var(--sk-font-heading);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #4F5154;
font-style: normal;
}
.reviews__nav {
display: flex;
align-items: center;
gap: 16px;
}
.reviews__dots .slick-dots {
display: flex;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.reviews__dots .slick-dots li { display: flex; }
.reviews__dots .slick-dots li button {
width: 9px;
height: 9px;
padding: 0;
border: 1px solid var(--sk-acc);
background: transparent;
cursor: pointer;
transition: background 260ms ease;
font-size: 0;
line-height: 0;
color: transparent;
border-radius: 0;
}
.reviews__dots .slick-dots li.slick-active button,
.reviews__dots .slick-dots li button:hover { background: var(--sk-acc); }
.reviews__arrows {
display: flex;
align-items: center;
gap: 8px;
}
.reviews__arrows .slick-arrow {
width: 44px;
height: 44px;
background: transparent;
border: 1px solid rgba(43,48,56,0.24);
color: var(--sk-fg);
cursor: pointer;
font-family: var(--sk-font-heading);
font-size: 15px;
transition: border-color 240ms ease;
}
.reviews__arrows .slick-arrow:hover { border-color: var(--sk-acc); }
/* === Kliniki (home) === */
.clinics__header {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
margin-bottom: clamp(24px, 3vw, 40px);
}
.clinics__title {
margin: 0;
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(30px, 4.4vw, 64px);
line-height: 1;
letter-spacing: -0.015em;
color: var(--sk-fg);
}
.clinics__desc {
margin: 0;
flex: 1 1 380px;
max-width: 46ch;
text-align: right;
font-size: 16.5px;
line-height: 1.7;
font-weight: 300;
color: #434548;
}
.clinics__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: clamp(28px, 3.4vw, 60px);
padding: clamp(30px, 3.4vw, 48px) 0;
border-top: 1px solid rgba(43,48,56,0.18);
}
.clinics__item {
display: flex;
flex-direction: column;
gap: 14px;
}
.clinics__city {
font-family: var(--sk-font-heading);
font-size: 15px;
font-weight: 500;
color: var(--sk-acc);
}
.clinics__name {
margin: 0;
font-family: var(--sk-font-heading);
font-stretch: 80%;
font-weight: 700;
font-size: clamp(22px, 2.2vw, 30px);
letter-spacing: -0.006em;
color: var(--sk-fg);
}
.clinics__kl-desc {
margin: 0;
font-size: 15.5px;
line-height: 1.65;
font-weight: 300;
color: #4F5154;
}
.clinics__contact {
display: grid;
gap: 8px;
font-size: 16px;
font-weight: 300;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid rgba(43,48,56,0.14);
}
.clinics__addr { color: #2F3031; }
.clinics__phone { color: var(--sk-fg); text-decoration: none; }
.clinics__email { color: #4F5154; font-size: 14.5px; text-decoration: none; word-break: break-word; }
.clinics__photo-wrap {
position: relative;
margin-top: clamp(22px, 2.6vw, 34px);
height: clamp(300px, 38vw, 560px);
overflow: hidden;
}
.clinics__photo-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 48% 52%;
}
.clinics__photo-caption {
position: absolute;
left: 0;
bottom: 0;
background: var(--sk-bg);
padding: 14px 22px 0 0;
max-width: 30ch;
}
.clinics__caption-title {
font-family: var(--sk-font-heading);
font-stretch: 82%;
font-weight: 600;
text-transform: uppercase;
font-size: clamp(15px, 1.6vw, 20px);
line-height: 1.15;
color: var(--sk-fg);
}
.clinics__caption-sub {
font-family: var(--sk-font-heading);
font-size: 15px;
font-weight: 500;
color: #4F5154;
margin: 8px 0 12px;
}
/* === FAQ (home) === */
.faq-home.sk-section--muted {
padding-top: clamp(72px, 8.5vw, 140px);
padding-bottom: clamp(72px, 8.5vw, 140px);
}
.faq-home__inner {
display: flex;
flex-wrap: wrap;
gap: clamp(26px, 3.4vw, 64px);
align-items: flex-start;
}
.faq-home__left {
flex: 1 1 360px;
min-width: 260px;
}
.faq-home__title {
margin: 0 0 18px;
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(30px, 4.2vw, 60px);
line-height: 1;
letter-spacing: -0.015em;
color: var(--sk-fg);
}
.faq-home__desc {
margin: 0;
font-size: 16.5px;
line-height: 1.7;
font-weight: 300;
color: #434548;
max-width: 38ch;
}
.faq-home__list {
flex: 1 1 460px;
min-width: 0;
border-top: 1px solid rgba(43,48,56,0.22);
}
/* === Artykuły (home) === */
.articles.sk-section {
padding-top: clamp(64px, 7.5vw, 112px);
padding-bottom: clamp(64px, 7.5vw, 112px);
}
.articles__header {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
margin-bottom: clamp(20px, 2.6vw, 34px);
}
.articles__title {
margin: 0;
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(28px, 3.8vw, 52px);
line-height: 1.02;
letter-spacing: -0.012em;
color: var(--sk-fg);
}
.articles__cta {
font-family: var(--sk-font-heading);
font-size: 15px;
font-weight: 500;
color: var(--sk-fg);
border-bottom: 1px solid var(--sk-acc);
padding-bottom: 7px;
text-decoration: none;
}
.articles__list { display: grid; border-top: 1px solid rgba(43,48,56,0.22); }
.articles__item {
display: flex;
flex-wrap: wrap;
gap: 16px 28px;
align-items: baseline;
padding: clamp(18px, 2.2vw, 28px) 0;
border-bottom: 1px solid rgba(43,48,56,0.14);
text-decoration: none;
color: var(--sk-fg);
transition: padding-left 340ms ease;
}
.articles__item:hover { padding-left: 12px; }
.articles__date {
flex: 0 0 190px;
font-family: var(--sk-font-heading);
font-size: 15px;
font-weight: 500;
color: #4F5154;
}
.articles__item-title {
flex: 1 1 340px;
margin: 0;
font-family: var(--sk-font-heading);
font-stretch: 86%;
font-weight: 600;
font-size: clamp(18px, 2vw, 26px);
line-height: 1.2;
color: var(--sk-fg);
}
.articles__arrow {
font-family: var(--sk-font-heading);
font-size: 15px;
font-weight: 500;
color: var(--sk-acc);
}
@media (max-width: 600px) {
.articles__date { flex: 0 0 auto; }
}
/* === 404 === */
body.is-404 .site-header .site-header__logo img { filter: brightness(0); }
.err404 {
min-height: 60svh;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(100px, 12vw, 160px) clamp(28px, 6vw, 80px) clamp(64px, 8vw, 120px);
background: var(--sk-bg);
overflow: hidden;
}
.err404__inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: clamp(18px, 2.4vw, 28px);
position: relative;
}
.err404__code {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -62%);
font-family: var(--sk-font-heading);
font-stretch: 72%;
font-weight: 700;
font-size: clamp(160px, 28vw, 380px);
line-height: 1;
letter-spacing: -0.04em;
color: var(--sk-bg-muted);
user-select: none;
pointer-events: none;
z-index: 0;
}
.err404__title {
position: relative;
z-index: 1;
margin: 0;
font-family: var(--sk-font-heading);
font-stretch: 78%;
font-weight: 700;
font-size: clamp(30px, 4.4vw, 60px);
line-height: 1.02;
letter-spacing: -0.015em;
color: var(--sk-fg);
}
.err404__desc {
position: relative;
z-index: 1;
margin: 0;
max-width: 44ch;
font-size: clamp(16px, 1.5vw, 18px);
line-height: 1.72;
font-weight: 300;
color: var(--sk-acc);
}
.err404__inner .cbtn {
position: relative;
z-index: 1;
margin-top: clamp(6px, 1vw, 12px);
}
/* === Mega menu === */
.site-header__progress {
position: absolute;
bottom: -1px;
left: 0;
width: 0%;
height: 2px;
background: var(--sk-acc);
z-index: 2;
pointer-events: none;
transition: none;
}
.site-header__menu-item--mega {
display: flex;
align-items: center;
gap: 5px;
}
.site-header__mega-chevron {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 30px;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
color: var(--sk-fg-muted);
opacity: 0.8;
transition: color 340ms ease, opacity 240ms ease, transform 320ms cubic-bezier(0.16,1,0.3,1);
}
.site-header__mega-chevron:hover,
.site-header__mega-chevron:focus-visible { color: var(--sk-fg); opacity: 1; }
.site-header__menu-item--mega.is-open .site-header__mega-chevron { transform: rotate(180deg); }
.site-header__mega {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #ECEEF0;
border-top: 1px solid var(--sk-border);
border-bottom: 1px solid var(--sk-border);
box-shadow: 0 40px 80px -40px rgba(16,19,23,0.45);
visibility: hidden;
opacity: 0;
transform: translateY(-8px);
transition: opacity 240ms ease, transform 360ms cubic-bezier(0.16,1,0.3,1), visibility 240ms;
z-index: 44;
}
.site-header__mega.is-open {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
/* Nagłówek przy otwartym mega menu = jedna jasna powierzchnia z panelem */
.site-header.is-mega-open,
body.has-dark-hero .site-header.is-mega-open:not(.is-scrolled) {
background: #ECEEF0;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom-color: var(--sk-border);
}
body.has-dark-hero .site-header.is-mega-open:not(.is-scrolled) .site-header__logo img { filter: brightness(0); }
body.has-dark-hero .site-header.is-mega-open:not(.is-scrolled) .site-header__menu a { color: var(--sk-fg-muted); }
body.has-dark-hero .site-header.is-mega-open:not(.is-scrolled) .site-header__menu a:hover,
body.has-dark-hero .site-header.is-mega-open:not(.is-scrolled) .site-header__menu .current-menu-item > a,
body.has-dark-hero .site-header.is-mega-open:not(.is-scrolled) .site-header__menu-item--mega > a { color: var(--sk-fg); }
body.has-dark-hero .site-header.is-mega-open:not(.is-scrolled) .site-header__mega-chevron { color: var(--sk-fg); }
body.has-dark-hero .site-header.is-mega-open:not(.is-scrolled) .cbtn {
color: var(--sk-fg);
border-color: var(--sk-border-strong);
}
body.has-dark-hero .site-header.is-mega-open:not(.is-scrolled) .cbtn:hover { color: var(--sk-white); border-color: var(--sk-acc); }
body.has-dark-hero .site-header.is-mega-open:not(.is-scrolled) .site-header__language .gt_float_switcher,
body.has-dark-hero .site-header.is-mega-open:not(.is-scrolled) .site-header__language select { color: var(--sk-fg); border-color: var(--sk-border-strong); }
.mega-inner {
display: grid;
grid-template-columns: minmax(180px, 0.8fr) minmax(0, 2.2fr) minmax(220px, 0.95fr);
gap: clamp(28px, 3.4vw, 64px);
padding-top: clamp(34px, 3.2vw, 52px);
padding-bottom: clamp(34px, 3.2vw, 52px);
}
/* Kolumna wprowadzająca */
.mega-intro {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-right: clamp(12px, 2vw, 32px);
border-right: 1px solid var(--sk-border);
}
.mega-intro__eyebrow {
font-family: var(--sk-font-heading);
font-size: 11px;
line-height: 150%;
font-weight: 600;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--sk-acc-lt);
}
.mega-intro__title {
margin-top: 14px;
font-family: var(--sk-font-heading);
font-stretch: 78%;
font-weight: 700;
font-size: clamp(30px, 2.6vw, 42px);
line-height: 100%;
letter-spacing: -0.015em;
color: var(--sk-fg);
}
.mega-intro__all {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: auto;
padding-top: 28px;
font-family: var(--sk-font-heading);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sk-fg);
box-shadow: none;
}
.mega-intro__all span:first-child { white-space: nowrap; box-shadow: inset 0 -1px 0 rgba(43,48,56,0.35); padding-bottom: 3px; transition: box-shadow 240ms ease; }
.mega-intro__all:hover span:first-child { box-shadow: inset 0 -1px 0 currentColor; }
.mega-intro__all-arrow { transition: transform 320ms cubic-bezier(0.16,1,0.3,1); }
.mega-intro__all:hover .mega-intro__all-arrow { transform: translateX(4px); }
/* Kolumny zabiegów */
.mega-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: clamp(24px, 3vw, 56px);
align-content: start;
}
.mega-col__title {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding-bottom: 14px;
border-bottom: 1px solid var(--sk-border-strong);
font-family: var(--sk-font-heading);
font-size: 11px;
line-height: 150%;
font-weight: 600;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--sk-fg);
}
.mega-col__count { color: var(--sk-acc-lt); font-weight: 500; letter-spacing: 0.12em; }
.mega-col__items {
list-style: none;
margin: 0;
padding: 0;
}
.mega-col__items li { margin: 0; padding: 0; }
.mega-col__items li::before { content: none; }
.mega-col__link {
display: grid;
grid-template-columns: 26px minmax(0, 1fr) auto;
align-items: baseline;
gap: 10px;
padding: 11px 0;
border-bottom: 1px solid var(--sk-border-soft);
font-size: 15px;
line-height: 140%;
color: var(--sk-fg);
box-shadow: none;
transition: color 220ms ease;
}
.mega-col__label { transition: transform 320ms cubic-bezier(0.16,1,0.3,1); }
.mega-col__num {
font-family: var(--sk-font-heading);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.08em;
color: var(--sk-acc-lt);
transition: color 220ms ease;
}
.mega-col__arrow {
font-size: 13px;
color: var(--sk-acc);
opacity: 0;
transform: translateX(-8px);
transition: opacity 220ms ease, transform 320ms cubic-bezier(0.16,1,0.3,1);
}
.mega-col__link:hover,
.mega-col__link:focus-visible { color: var(--sk-fg); box-shadow: none; }
/* przesunięcie tylko tekstu (transform), bez zmiany szerokości - dłuższe nazwy nie przeskakują do 2. linii */
.mega-col__link:hover .mega-col__label,
.mega-col__link:focus-visible .mega-col__label { transform: translateX(6px); }
.mega-col__link:hover .mega-col__num,
.mega-col__link:focus-visible .mega-col__num { color: var(--sk-fg); }
.mega-col__link:hover .mega-col__arrow,
.mega-col__link:focus-visible .mega-col__arrow { opacity: 1; transform: translateX(0); }
/* Karta konsultacji */
.mega-card {
position: relative;
display: block;
min-height: 100%;
overflow: hidden;
background: var(--sk-dark-bg);
color: var(--sk-fg-strong);
box-shadow: none;
isolation: isolate;
}
.mega-card__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 22%;
transform: scale(1.02);
transition: transform 900ms cubic-bezier(0.16,1,0.3,1);
z-index: -2;
}
.mega-card__shade {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(16,19,23,0) 30%, rgba(16,19,23,0.88) 100%);
z-index: -1;
}
.mega-card__body {
position: absolute;
left: 0; right: 0; bottom: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 6px 14px;
padding: 22px 22px 20px;
}
.mega-card__eyebrow {
grid-column: 1 / -1;
font-family: var(--sk-font-heading);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(239,240,241,0.7);
}
.mega-card__title {
font-family: var(--sk-font-heading);
font-stretch: 80%;
font-weight: 700;
font-size: 24px;
line-height: 102%;
color: var(--sk-fg-strong);
}
.mega-card__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid rgba(239,240,241,0.4);
font-size: 14px;
transition: background 260ms ease, color 260ms ease, border-color 260ms ease;
}
.mega-card:hover .mega-card__img { transform: scale(1.07); }
.mega-card:hover .mega-card__arrow { background: var(--sk-fg-strong); color: var(--sk-dark-bg); border-color: var(--sk-fg-strong); }
@media (max-width: 1220px) {
.mega-inner { grid-template-columns: minmax(170px, 0.75fr) minmax(0, 2.25fr); }
.mega-card { display: none; }
}
/* Ikony SVG inline w boksach (kolor z motywu przez currentColor) */
.boxes__icon svg { width: 100%; height: 100%; display: block; }
@media (max-width: 1100px) {
.site-header__mega { display: none; }
}
@media (max-width: 1100px) {
.home-hero__stage { padding-top: 40px; }
}
/* === Custom Cursor === */
#edCursor {
position: fixed;
top: 0;
left: 0;
width: 34px;
height: 34px;
border: 1px solid rgba(72,79,87,0.6);
border-radius: 50%;
pointer-events: none;
z-index: 90;
opacity: 0;
transform: translate3d(-50px,-50px,0);
transition: opacity 300ms ease, width 260ms ease, height 260ms ease, background 260ms ease, border-color 260ms ease;
mix-blend-mode: multiply;
}
#edCursor.on { opacity: 1; }
#edCursor.hot { width: 62px; height: 62px; background: rgba(72,79,87,0.1); border-color: rgba(72,79,87,0.85); }
#edCursor.dark { mix-blend-mode: normal; border-color: rgba(177,183,189,0.8); }
#edCursor.dark.hot { background: rgba(177,183,189,0.1); border-color: rgba(177,183,189,0.95); }
@media (hover: none) { #edCursor { display: none; } }
@media (max-width: 1100px) { #edCursor { display: none !important; } }
/* === GTranslate — language dropdown in header === */
.site-header__language {
display: flex;
align-items: center;
flex: 0 0 auto;
}
.site-header__language .gtranslate_wrapper,
.site-header__language .goog-te-gadget {
display: flex;
align-items: center;
}
.site-header__language .goog-te-gadget {
font-size: 0;
}
.site-header__language select,
.site-header__language .goog-te-combo {
appearance: none;
-webkit-appearance: none;
width: 74px;
max-width: 100%;
min-height: 38px;
margin: 0;
padding: 0 26px 0 13px;
border: 1px solid rgba(43,48,56,0.28);
border-radius: 0;
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23484F57' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.8 6 6.2 11 1.8'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 11px center;
background-size: 10px 7px;
color: var(--sk-fg);
font-family: var(--sk-font-heading);
font-size: 11px;
line-height: 130%;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
transition: border-color 240ms ease, background-color 240ms ease, color 240ms ease;
}
.site-header__language select:hover,
.site-header__language select:focus-visible,
.site-header__language .goog-te-combo:hover,
.site-header__language .goog-te-combo:focus-visible {
border-color: var(--sk-acc);
outline: none;
}
body.has-dark-hero .site-header:not(.is-scrolled) .site-header__language select,
body.has-dark-hero .site-header:not(.is-scrolled) .site-header__language .goog-te-combo {
border-color: rgba(241,244,247,0.32);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23F1F4F7' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.8 6 6.2 11 1.8'/%3E%3C/svg%3E");
color: var(--sk-fg-strong);
}
/* GTranslate Free widget override: kod języka + dropdown bez flag. */
.site-header__language .gt_float_switcher {
position: relative;
width: 42px;
height: 42px;
overflow: visible !important;
border: 1px solid rgba(43,48,56,0.28) !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
color: var(--sk-fg) !important;
font-family: var(--sk-font-heading) !important;
font-size: 11px !important;
line-height: 130% !important;
font-weight: 600 !important;
letter-spacing: 0.18em !important;
}
.site-header__language .gt_float_switcher img {
display: none !important;
}
.site-header__language .gt_float_switcher .gt-selected {
float: none !important;
overflow: visible !important;
background: transparent !important;
}
.site-header__language .gt_float_switcher .gt-current-lang {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
min-height: 40px;
padding: 0 !important;
color: inherit !important;
}
.site-header__language .gt_float_switcher .gt-current-lang .gt-lang-code {
position: static !important;
top: auto !important;
}
.site-header__language .gt_float_switcher .gt-current-lang .gt_float_switcher-arrow {
display: none !important;
}
.site-header__language .gt_float_switcher .gt_options {
position: absolute !important;
top: calc(100% + 6px) !important;
right: 0 !important;
bottom: auto !important;
left: auto !important;
min-width: 100%;
max-width: none !important;
max-height: none !important;
overflow: hidden !important;
border: 1px solid rgba(43,48,56,0.18);
box-shadow: 0 16px 30px rgba(43,48,56,0.14);
background: #ECEEF0;
}
.site-header__language .gt_float_switcher .gt_options a {
display: block !important;
padding: 10px 13px !important;
color: var(--sk-fg) !important;
font-family: var(--sk-font-heading) !important;
font-size: 11px !important;
line-height: 130% !important;
font-weight: 600 !important;
letter-spacing: 0.18em !important;
}
.site-header__language .gt_float_switcher .gt_options a:hover {
background: var(--sk-acc) !important;
color: #FFFFFF !important;
}
body.has-dark-hero .site-header:not(.is-scrolled) .site-header__language .gt_float_switcher {
border-color: rgba(241,244,247,0.32) !important;
color: var(--sk-fg-strong) !important;
}
@media (max-width: 1100px) {
.site-header__inner.sk-container {
padding-left: 15px;
padding-right: 15px;
}
.site-header__actions {
display: flex;
align-items: center;
gap: 0;
margin-left: auto;
}
.site-header__actions > .cbtn {
display: none;
}
}
/* Przełącznik języka przy otwartym mega menu na ciemnym hero */
body.has-dark-hero .site-header.is-mega-open:not(.is-scrolled) .site-header__language .gt_float_switcher,
body.has-dark-hero .site-header.is-mega-open:not(.is-scrolled) .site-header__language .gt_float_switcher .gt-current-lang,
body.has-dark-hero .site-header.is-mega-open:not(.is-scrolled) .site-header__language .gt_float_switcher .gt-lang-code {
border-color: var(--sk-border-strong) !important;
color: var(--sk-fg) !important;
}
/* === Dokument (polityka prywatności, regulaminy) === */
.legal { background: var(--sk-bg); padding-bottom: clamp(64px, 8vw, 120px); }
.legal__head {
padding-top: calc(82px + clamp(48px, 6vw, 96px));
padding-bottom: clamp(28px, 3vw, 44px);
border-bottom: 1px solid var(--sk-border);
}
.legal__title {
margin: 0;
font-family: var(--sk-font-heading);
font-stretch: 76%;
font-weight: 700;
font-size: clamp(44px, 6.4vw, 96px);
line-height: 96%;
letter-spacing: -0.02em;
color: var(--sk-fg);
}
.legal__meta {
margin: 18px 0 0;
font-family: var(--sk-font-heading);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--sk-acc-lt);
}
.legal__body { padding-top: clamp(36px, 4vw, 64px); }
.legal__content {
max-width: 780px;
font-size: 16px;
line-height: 1.75;
font-weight: 400;
color: var(--sk-acc);
}
.legal__content > *:first-child { margin-top: 0; }
.legal__content h2 {
margin: clamp(44px, 4.4vw, 64px) 0 16px;
padding-top: 22px;
border-top: 1px solid var(--sk-border);
font-family: var(--sk-font-heading);
font-stretch: 80%;
font-weight: 700;
font-size: clamp(24px, 2.2vw, 32px);
line-height: 110%;
letter-spacing: -0.01em;
color: var(--sk-fg);
}
.legal__content h3 {
margin: 28px 0 10px;
font-family: var(--sk-font-heading);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sk-fg);
}
.legal__content p { margin: 0 0 16px; }
.legal__content ul,
.legal__content ol { margin: 0 0 18px; padding-left: 0; list-style: none; counter-reset: legal; }
.legal__content li { position: relative; margin: 0 0 10px; padding-left: 26px; }
.legal__content ul > li::before {
content: '';
position: absolute;
left: 2px;
top: 0.8em;
width: 12px;
height: 1px;
background: var(--sk-acc-lt);
}
.legal__content ol > li { counter-increment: legal; }
.legal__content ol > li::before {
content: counter(legal, decimal-leading-zero);
position: absolute;
left: 0;
top: 0.15em;
font-family: var(--sk-font-heading);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--sk-acc-lt);
}
.legal__content strong { font-weight: 600; color: var(--sk-fg); }
.legal__content a {
color: var(--sk-fg);
text-decoration: underline;
text-decoration-color: rgba(43,48,56,0.35);
text-underline-offset: 3px;
transition: text-decoration-color 240ms ease;
}
.legal__content a:hover { text-decoration-color: currentColor; }
.legal__content .legal__box {
margin: 0 0 20px;
padding: 22px 24px;
background: var(--sk-bg-muted);
border-left: 2px solid var(--sk-acc);
}
.legal__content .legal__box p:last-child { margin-bottom: 0; }
.legal__table-wrap { margin: 0 0 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.legal__content table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.legal__content th,
.legal__content td { padding: 12px 14px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sk-border); }
.legal__content th {
font-family: var(--sk-font-heading);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sk-fg);
border-bottom-color: var(--sk-border-strong);
}
.legal__content td code { font-size: 13px; color: var(--sk-fg); }
body.page-template-template-legal .site-header__logo img { filter: brightness(0); }
@media screen and (max-width: 600px) {
.legal__content table { min-width: 0; }
.legal__content thead { display: none; }
.legal__content tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--sk-border); }
.legal__content td { display: block; padding: 2px 0; border: 0; }
.legal__content td:first-child { margin-bottom: 4px; }
.legal__content td:last-child { color: var(--sk-acc-lt); font-size: 13px; }
}
/* H1 strony głównej: eyebrow (usługa + miasto) wewnątrz H1, wygląd jak wcześniej obok */
.home-hero__title > .home-hero__eyebrow {
display: flex;
flex-wrap: wrap;
margin: 0 0 clamp(16px, 1.8vw, 24px);
font-stretch: 100%;
line-height: 150%;
text-wrap: wrap;
}
/* Kontakt: link do trasy w Mapach Google */
.loclist__map {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 14px;
font-family: var(--sk-font-heading);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sk-fg);
box-shadow: inset 0 -1px 0 rgba(43,48,56,0.35);
padding-bottom: 3px;
transition: box-shadow 240ms ease;
}
.loclist__map:hover { box-shadow: inset 0 -1px 0 currentColor; }
[data-dark] .loclist__map { color: var(--sk-fg-strong); box-shadow: inset 0 -1px 0 rgba(239,240,241,0.4); }
.err404__inner .cbtn-wrapper { position: relative; z-index: 1; justify-content: center; margin-top: clamp(6px, 1vw, 12px); }
body.page-template-template-content .site-header__logo img { filter: brightness(0); }
/* === Przełącznik języka (Polylang) === */
.lang-switch {
display: inline-flex;
align-items: stretch;
height: 42px;
border: 1px solid var(--sk-border-strong);
font-family: var(--sk-font-heading);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
line-height: 1;
}
.lang-switch__item {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
padding: 0 10px;
color: var(--sk-fg-muted);
box-shadow: none;
transition: color 220ms ease, background 220ms ease;
}
.lang-switch__item + .lang-switch__item { border-left: 1px solid var(--sk-border); }
.lang-switch__item.is-current { color: var(--sk-fg); }
a.lang-switch__item:hover { color: var(--sk-fg); background: rgba(43,48,56,0.06); }
body.has-dark-hero .site-header:not(.is-scrolled):not(.is-mega-open) .lang-switch { border-color: rgba(241,244,247,0.32); }
body.has-dark-hero .site-header:not(.is-scrolled):not(.is-mega-open) .lang-switch__item { color: rgba(241,244,247,0.6); }
body.has-dark-hero .site-header:not(.is-scrolled):not(.is-mega-open) .lang-switch__item + .lang-switch__item { border-left-color: rgba(241,244,247,0.2); }
body.has-dark-hero .site-header:not(.is-scrolled):not(.is-mega-open) .lang-switch__item.is-current,
body.has-dark-hero .site-header:not(.is-scrolled):not(.is-mega-open) a.lang-switch__item:hover { color: #F1F4F7; background: transparent; }
.site-header__language--mobile { display: none; }
@media (max-width: 1100px) {
.site-header__actions .site-header__language { display: none; }
.site-header__language--mobile { display: flex; margin-right: 8px; }
.site-header__language--mobile .lang-switch { height: 40px; }
.site-header__language--mobile .lang-switch__item { min-width: 34px; padding: 0 8px; }
}
/* Kotwice sekcji kart: tytuł nie chowa się pod przyklejonym nagłówkiem */
html { scroll-padding-top: 110px; }
.zab-section, [id^="k-"] { scroll-margin-top: 110px; }
/* Aktywny filtr kategorii: tekst widoczny także po najechaniu */
.zab-cat-btn--active:hover,
.zab-cat-btn--active:focus-visible { background: #EFF0F1; border-color: #EFF0F1; color: #15181C; }
/* Formularz: nieaktywny przycisk wysyłki (bez zgody) wyraźnie wyszarzony */
.contactform__body .ff-submit-btn:disabled,
.contactform__body .ff-submit-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
/* === Poprawki QA wizualnego 18.09 === */
/* Nagłówek mobilny mieści się na 360-390 px */
@media (max-width: 420px) {
.site-header__inner { gap: 8px; }
.site-header__mobile { gap: 6px; }
.site-header__mobile .cbtn--sm { padding: 12px 11px; gap: 6px; letter-spacing: 0.1em; }
.site-header__mobile .nav-icon { width: 42px; padding: 0 11px; }
.site-header__mobile .lang-switch__item { min-width: 34px; padding: 0 8px; }
}
@media (max-width: 374px) {
.site-header__mobile .cbtn--icon::after { display: none; }
}
/* Hero na telefonie: sylwetka jako przygaszone tło, tekst czytelny */
@media (max-width: 767px) {
/* opacity steruje animacja edRise (fill: both), więc przygaszamy filtrem */
.home-hero__silhouette { filter: saturate(0.8) brightness(0.4); }
.home-hero__mobile-text,
.home-hero__content p { text-shadow: 0 1px 12px rgba(10, 12, 15, 0.55); }
}
@media (max-width: 1100px) {
.home-hero__mobile-label { margin-right: 0; }
}
/* Eyebrow w banerze: segment przechodzi do nowej linii w całości */
@media (max-width: 600px) {
.herotop__eyebrow { flex-direction: column; align-items: flex-start; row-gap: 6px; }
.herotop__eyebrow-dot { display: none; }
}
/* /nauka/: postać w sekcji materiałów wtapia się w tło zamiast płaskiego cięcia */
.materials-section__visual img {
-webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
/* Karta zabiegu trzyma tę samą lewą krawędź co logo i stopka */
@media (min-width: 901px) {
.zab-layout {
max-width: none;
padding-left: clamp(28px, 9vw, 250px);
padding-right: clamp(28px, 9vw, 250px);
}
}
/* Nagłówki bez wdów */
h1, h2, h3, .section-heading, .article-list__item-title { text-wrap: balance; }
/* Kroki „Droga do operacji”: nieaktywne nadal czytelne */
.steps__step { opacity: 0.55; }
.steps__step.is-active { opacity: 1; }
/* SMART Review, runda 2026-10-04: czytelny tytul i naglowek. */
.home-hero__title { font-size: clamp(52px, 8vw, 140px); }
.home-hero__academic-title {
display: block;
margin: 0 0 18px;
font-size: clamp(22px, 2.2vw, 36px);
line-height: 1.2;
letter-spacing: 0;
font-stretch: 90%;
color: #C8D0D9;
}
.site-header__logo img { height: clamp(36px, 3.3vw, 48px); }
.site-header__menu a { font-size: 16px; }
.home-hero__side { width: clamp(190px, 13vw, 240px); }
@media (max-width: 1100px) {
.home-hero__title { font-size: clamp(44px, 10vw, 82px); }
.home-hero__academic-title { font-size: clamp(21px, 3.2vw, 30px); margin-bottom: 14px; }
}
@media (max-width: 767px) {
.site-header__logo img { height: 38px; }
.home-hero__academic-title { max-width: 20ch; }
}
/* SMART Review 1389 (desktop cofnięty w 1643): style dodatkowych grup w menu mobilnym. */
.site-mobile-menu__extra { margin: 28px 0; }
.site-mobile-menu__extra .mega-col__title { margin: 0; }
.site-mobile-menu__extra .site-mobile-nav { list-style: none; margin: 0; padding: 0; }
.site-mobile-menu__extra .site-mobile-nav li { margin: 0; padding: 0; }
.site-mobile-menu__extra .site-mobile-nav li::before { content: none; }
.site-mobile-menu__extra .site-mobile-nav a { display: block; padding: 13px 0; border-bottom: 1px solid var(--sk-border); color: inherit; font-size: 16px; line-height: 1.5; }
/* Review 1409: natural letter proportions in the footer. */
.site-footer__bigtext span { display:block; font-family:var(--sk-font-heading); font-weight:700; font-stretch:normal; font-size:clamp(36px,7vw,110px); line-height:1.15; letter-spacing:-.025em; color:rgba(227,229,232,.1); }
/* SMART Review 1649: opis Drogi do operacji w kilku akapitach. */
.steps__desc:has(+ .steps__desc) { margin-bottom: 12px; }
/* SMART Review 1726: listy badań w odpowiedziach FAQ. */
.qa-item__answer ol, .qa-item__answer ul { margin: 6px 0 0; padding-left: 1.4em; font-family: var(--sk-font-body); font-size: 16px; line-height: 174%; font-weight: 300; color: #434548; }
.qa-item__answer ol + p, .qa-item__answer ul + p { margin-top: 12px; }
.qa-item__answer strong { font-weight: 500; }
.qa-section--dark .qa-item__answer ol, .qa-section--dark .qa-item__answer ul { color: #9DA2A7; }
/* SMART Review 1734: wstęp sekcji badań jako cytat. */
.research-section__intro { font-style: italic; }
/* SR 1788: odstęp między akapitami wstępu formularza */
.contactform__intro p + p { margin-top: 0.75em; }
/* === Efekty (przed i po): zakładka i sekcja na karcie zabiegu === */
.mk-efekty__intro { margin-top: clamp(18px, 2vw, 28px); }
.mk-efekty__body { padding-top: clamp(32px, 3.6vw, 56px); padding-bottom: clamp(60px, 7vw, 110px); }
.mk-efekty__filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(26px, 3vw, 40px); }
.mk-efekty__filter { padding: 11px 18px; border: 1px solid var(--sk-border-strong, rgba(43,48,56,0.22)); background: transparent; color: var(--sk-fg); cursor: pointer; font-family: var(--sk-font-heading); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; transition: background 240ms ease, color 240ms ease, border-color 240ms ease; }
.mk-efekty__filter:hover, .mk-efekty__filter:focus-visible { border-color: var(--sk-fg); outline: none; }
.mk-efekty__filter.is-active { background: var(--sk-fg); border-color: var(--sk-fg); color: var(--sk-bg); }
.mk-efekty__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.mk-efekt { margin: 0; display: flex; flex-direction: column; }
.mk-efekt[hidden] { display: none; }
.mk-efekt__imgs { display: grid; gap: 4px; background: #0B0D10; padding: clamp(10px, 1.2vw, 16px); }
.mk-efekt__img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; }
.mk-efekt__cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 14px 0 0; border-bottom: 1px solid var(--sk-border); padding-bottom: 14px; }
.mk-efekt__title { font-family: var(--sk-font-heading); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sk-fg); text-decoration: none; }
.mk-efekt__title:hover, .mk-efekt__title:focus-visible { color: var(--sk-acc); text-decoration: underline; text-underline-offset: 3px; }
.mk-efekt__time { font-size: 14px; line-height: 150%; font-weight: 300; color: var(--sk-fg-muted); }
.mk-efekty__note, .mk-efekty__empty { max-width: 66ch; margin: clamp(28px, 3vw, 40px) 0 0; font-size: 14px; line-height: 165%; font-weight: 300; color: var(--sk-fg-muted); }
.mk-efekty__empty { font-size: 17px; color: var(--sk-fg); }
.mk-efekty__cta { margin-top: clamp(28px, 3vw, 40px); }
.zab-efekty .mk-efekty__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.zab-efekty__more { display: inline-block; margin-top: clamp(18px, 2vw, 26px); font-family: var(--sk-font-heading); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sk-fg); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.zab-efekty__more:hover, .zab-efekty__more:focus-visible { color: var(--sk-acc); }
.zab-efekty .mk-efekty__note { margin-top: 18px; }
/* Efekty: przypadek z kilkoma zdjęciami na całą szerokość, zdjęcia obok siebie */
.mk-efekt--multi { grid-column: 1 / -1; }
.mk-efekt--multi .mk-efekt__imgs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); align-items: center; }
/* Menu z pozycją „Efekty”: bez zawijania nazw */
.site-header__menu a { white-space: nowrap; }
@media (max-width: 1599px) { .site-header__menu { gap: clamp(12px, 1.15vw, 20px); } .site-header__menu a { font-size: 15px; } }
@media (max-width: 1360px) { .site-header__menu a { font-size: 14px; } }
@media (max-width: 1240px) { .site-header__menu { gap: 11px; } .site-header__menu a { font-size: 13px; } }
/* Menu z 8 pozycjami: menu mobilne już od 1220 px (wcześniej 1100), żeby pozycje nie nachodziły na przełącznik języka */
@media (max-width: 1220px) {
.site-header__nav,
.site-header__actions { display: none; }
.site-header__mobile { display: flex; }
.site-header__mega { display: none; }
.site-header__inner.sk-container { padding-left: 15px; padding-right: 15px; }
.site-header__actions .site-header__language { display: none; }
.site-header__language--mobile { display: flex; margin-right: 8px; }
.site-header__language--mobile .lang-switch { height: 40px; }
.site-header__language--mobile .lang-switch__item { min-width: 34px; padding: 0 8px; }
}