.kontakt {
--gutter: clamp(1.25rem, 3vw, 3.5rem);
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--karta: color-mix(in srgb, var(--wp--preset--color--base) 55%, #fff);
position: relative;
overflow: hidden;
overflow: clip;
padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
color: var(--wp--preset--color--contrast);
}
.kontakt__kontener {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
gap: var(--wp--preset--spacing--50) clamp(2rem, 5vw, 6rem);
width: min(100% - 2 * var(--gutter), 120rem);
margin-inline: auto;
} .kontakt__badge {
width: fit-content;
margin: 0 0 clamp(1.25rem, 2.2vw, 2.25rem);
padding-left: 1rem;
border-left: 2px solid var(--wp--preset--color--accent);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
}
.kontakt__tytul {
margin: 0;
font-family: var(--wp--preset--font-family--heading);
font-size: clamp(3.5rem, 9vw, 11rem);
font-weight: 800;
line-height: 0.84;
letter-spacing: -0.035em;
text-transform: uppercase;
white-space: nowrap;
}
.kontakt__litera { display: inline-block; }
.kontakt__lead {
max-width: 36ch;
margin: clamp(1.25rem, 2vw, 2rem) 0 clamp(2rem, 3vw, 3rem);
font-size: clamp(1.1rem, 1.5vw, 1.55rem);
line-height: 1.38;
color: color-mix(in srgb, var(--wp--preset--color--contrast) 80%, transparent);
}
.kontakt__dane {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid var(--wp--preset--color--line);
}
.kontakt__dana {
display: grid;
gap: 0.35rem;
padding: clamp(1rem, 1.6vw, 1.5rem) 0;
border-bottom: 1px solid var(--wp--preset--color--line);
color: inherit;
text-decoration: none;
}
.kontakt__dana--telefon { grid-column: 1 / -1; }
.kontakt__dana:nth-child(2) { padding-right: 1.5rem; }
.kontakt__dana:nth-child(3) { padding-left: 1.5rem; border-left: 1px solid var(--wp--preset--color--line); }
.kontakt__etykieta {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--wp--preset--color--muted);
}
.kontakt__wartosc {
font-family: var(--wp--preset--font-family--heading);
font-size: clamp(1.05rem, 1.35vw, 1.35rem);
font-weight: 500;
transition: color 0.3s ease;
}
.kontakt__dana--telefon .kontakt__wartosc {
font-size: clamp(2rem, 3.6vw, 3.6rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.05;
}
@media (hover: hover) {
a.kontakt__dana:hover .kontakt__wartosc { color: var(--wp--preset--color--accent); }
}
.kontakt__dokumenty { margin-top: clamp(2rem, 3vw, 3rem); }
.kontakt__podtytul {
margin: 0 0 0.9rem;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--wp--preset--color--muted);
}
.kontakt__lista-dokumentow {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.6rem;
margin: 0;
padding: 0;
list-style: none;
}
.kontakt__dokument {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.9rem;
height: 100%;
min-height: 64px;
padding: 0.85rem 1rem;
border: 1px solid var(--wp--preset--color--line);
border-radius: 6px;
background: color-mix(in srgb, var(--karta) 70%, transparent);
color: inherit;
text-decoration: none;
transition: border-color 0.35s ease, background-color 0.35s ease;
}
.kontakt__dokument svg {
width: 1.25rem;
height: 1.25rem;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.kontakt__dokument-ikona { color: var(--wp--preset--color--accent); display: grid; }
.kontakt__dokument-opis { display: grid; gap: 0.15rem; }
.kontakt__dokument-nazwa { font-size: 0.9375rem; font-weight: 500; line-height: 1.3; }
.kontakt__dokument-meta { font-size: 0.75rem; color: var(--wp--preset--color--muted); }
.kontakt__dokument-pobierz {
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
border: 1px solid var(--wp--preset--color--line);
border-radius: 50%;
transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.kontakt__dokument-pobierz svg { width: 1rem; height: 1rem; }
@media (hover: hover) {
.kontakt__dokument:hover { border-color: var(--wp--preset--color--contrast); background: var(--karta); }
.kontakt__dokument:hover .kontakt__dokument-pobierz { background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
}  .kontakt__prawa {
position: relative;
align-self: start;
isolation: isolate;
}
.kontakt__telefon {
position: absolute;
z-index: 0;
left: clamp(-11rem, -9vw, -6rem);
top: clamp(-1rem, -0.65vw, 0rem);
width: clamp(150px, 13vw, 240px);
height: auto;
transform: rotate(-14deg);
filter: drop-shadow(0 30px 40px rgba(20, 22, 18, 0.28));
pointer-events: none;
}
.js .kontakt__telefon {
opacity: 0;
translate: 45% 18%;
filter: blur(12px) drop-shadow(0 30px 40px rgba(20, 22, 18, 0));
transition: opacity 1s ease 0.9s, translate 1.6s var(--ease) 0.9s, filter 1.2s ease 0.9s;
}
.kontakt__kontener.is-aktywna .kontakt__telefon {
opacity: 1;
translate: 0 0;
filter: blur(0) drop-shadow(0 30px 40px rgba(20, 22, 18, 0.28));
}
.kontakt__formularz {
position: relative;
z-index: 1;
padding: clamp(1.5rem, 3.2vw, 3.25rem);
border: 1px solid var(--wp--preset--color--line);
border-radius: 8px;
background: var(--karta);
box-shadow: 0 40px 80px -50px rgba(30, 32, 26, 0.35);
}
.kontakt__naroznik {
position: absolute;
width: 1.6rem;
height: 1.6rem;
border: 0 solid color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
}
.kontakt__naroznik--lg { left: 0.9rem; top: 0.9rem; border-left-width: 1px; border-top-width: 1px; }
.kontakt__naroznik--pd { right: 0.9rem; bottom: 0.9rem; border-right-width: 1px; border-bottom-width: 1px; }
.kontakt__formularz-tytul {
margin: 0;
font-family: var(--wp--preset--font-family--heading);
font-size: clamp(1.5rem, 2.2vw, 2.25rem);
font-weight: 600;
letter-spacing: -0.02em;
}
.kontakt__formularz-tekst {
margin: 0.4rem 0 clamp(1.5rem, 2.4vw, 2.25rem);
font-size: 0.9375rem;
color: var(--wp--preset--color--muted);
} .kontakt .fluentform .ff-el-group { margin-bottom: 1.1rem; }
.kontakt .fluentform .ff-el-input--label { margin-bottom: 0.45rem; }
.kontakt .fluentform .ff-el-input--label label {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--wp--preset--color--muted);
}
.kontakt .fluentform .ff-el-is-required.asterisk-right label::after { color: var(--wp--preset--color--accent); margin-left: 0.2em; }
.kontakt .fluentform .ff-el-form-control {
width: 100%;
min-height: 52px;
padding: 0.85rem 1rem;
border: 1px solid var(--wp--preset--color--line);
border-radius: 6px;
background: var(--wp--preset--color--base);
color: var(--wp--preset--color--contrast);
font-family: inherit;
font-size: 1rem;
line-height: 1.4;
box-shadow: none;
transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.kontakt .fluentform .ff-el-form-control::placeholder { color: color-mix(in srgb, var(--wp--preset--color--muted) 70%, transparent); }
.kontakt .fluentform .ff-el-form-control:focus {
outline: none;
border-color: var(--wp--preset--color--contrast);
background: #fff;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent);
}
.kontakt .fluentform textarea.ff-el-form-control { min-height: 150px; resize: vertical; }
.kontakt .fluentform .ff-el-form-check-label {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-size: 0.8125rem;
line-height: 1.55;
color: var(--wp--preset--color--muted);
cursor: pointer;
}
.kontakt .fluentform .ff-el-form-check-input {
width: 1.15rem;
height: 1.15rem;
margin: 0.15rem 0 0;
accent-color: var(--wp--preset--color--contrast);
}
.kontakt .fluentform .ff_t_c p { margin: 0; }
.kontakt .fluentform .ff_t_c strong { color: var(--wp--preset--color--contrast); font-weight: 600; }
.kontakt .fluentform .ff-el-is-error .ff-el-form-control { border-color: #a4312b; }
.kontakt .fluentform .error.text-danger { margin-top: 0.4rem; font-size: 0.8125rem; color: #a4312b; } .kontakt .fluentform .ff_submit_btn_wrapper { margin: 1.6rem 0 0; }
.kontakt .fluentform .ff-btn.ff-btn-submit {
position: relative;
isolation: isolate;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6em;
min-height: 52px;
padding: 0.95rem 3.2rem;
border: 1px solid var(--wp--preset--color--contrast);
border-radius: 6px;
background: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base);
font-family: inherit;
font-size: var(--wp--preset--font-size--sm);
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1.2;
box-shadow: none;
opacity: 1;
cursor: pointer;
transition: color 0.3s ease, border-color 0.3s ease, transform 0.25s ease;
}
.kontakt .fluentform .ff-btn.ff-btn-submit::after {
content: "\2192";
transition: transform 0.45s var(--ease);
}
.kontakt .fluentform .ff-btn.ff-btn-submit::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--wp--preset--color--accent);
transform: translateY(101%);
transition: transform 0.45s var(--ease);
}
@media (hover: hover) {
.kontakt .fluentform .ff-btn.ff-btn-submit:hover { border-color: var(--wp--preset--color--accent); }
.kontakt .fluentform .ff-btn.ff-btn-submit:hover::before { transform: none; }
.kontakt .fluentform .ff-btn.ff-btn-submit:hover::after { transform: translateX(5px); }
}
.kontakt .fluentform .ff-btn.ff-btn-submit:active { transform: translateY(1px); }
.kontakt .fluentform .ff-btn.ff-btn-submit:disabled { opacity: 0.6; cursor: progress; }
.kontakt .ff-message-success {
padding: 1.25rem 1.4rem;
border: 1px solid var(--wp--preset--color--accent);
border-radius: 6px;
background: color-mix(in srgb, var(--wp--preset--color--accent) 8%, transparent);
color: var(--wp--preset--color--contrast);
box-shadow: none;
} .kontakt__mapa {
grid-column: 1 / -1;
position: relative;
height: clamp(320px, 30vw, 460px);
border: 1px solid var(--wp--preset--color--line);
border-radius: 8px;
overflow: hidden;
background: var(--wp--preset--color--surface);
}
.kontakt__mapa iframe {
display: block;
width: 100%;
height: 100%;
border: 0; filter: grayscale(0.85) contrast(1.02) brightness(1.02);
transition: filter 0.6s ease;
}
@media (hover: hover) {
.kontakt__mapa:hover iframe { filter: none; }
} .kontakt__dana,
.kontakt__dokument,
.kontakt__formularz,
.kontakt__naroznik,
.kontakt__mapa { will-change: transform, opacity; backface-visibility: hidden; }
.kontakt__litera:nth-child(2) { --l: 1; }
.kontakt__litera:nth-child(3) { --l: 2; }
.kontakt__litera:nth-child(4) { --l: 3; }
.kontakt__litera:nth-child(5) { --l: 4; }
.kontakt__litera:nth-child(6) { --l: 5; }
.kontakt__litera:nth-child(7) { --l: 6; }
.js .kontakt__badge { opacity: 0; filter: blur(8px); transition: opacity 0.9s ease, filter 0.9s ease; }
.js .kontakt__litera { opacity: 0; transform: translate3d(0, 0.5em, 0) scale(0.92); filter: blur(18px); transition: opacity 0.9s ease, transform 1.2s var(--ease), filter 1.1s ease; transition-delay: calc(0.1s + var(--l, 0) * 0.055s); }
.js .kontakt__lead { opacity: 0; transform: translate3d(0, 22px, 0); filter: blur(10px); transition: opacity 1s ease 0.5s, transform 1.1s var(--ease) 0.5s, filter 1s ease 0.5s; }
.kontakt__dana:nth-child(2) { --d: 1; }
.kontakt__dana:nth-child(3) { --d: 2; }
.js .kontakt__dana { opacity: 0; filter: blur(8px); transition: opacity 0.9s ease, filter 0.9s ease; transition-delay: calc(0.65s + var(--d, 0) * 0.12s); }
.kontakt__lista-dokumentow li:nth-child(2) .kontakt__dokument { --d: 1; }
.kontakt__lista-dokumentow li:nth-child(3) .kontakt__dokument { --d: 2; }
.kontakt__lista-dokumentow li:nth-child(4) .kontakt__dokument { --d: 3; }
.js .kontakt__dokument { opacity: 0; clip-path: inset(0 100% 0 0 round 6px); transition: opacity 0.6s ease, clip-path 1s var(--ease), border-color 0.35s ease, background-color 0.35s ease; transition-delay: calc(0.95s + var(--d, 0) * 0.1s), calc(0.95s + var(--d, 0) * 0.1s), 0s, 0s; } .js .kontakt__formularz { opacity: 0; clip-path: inset(100% 0 0 0 round 8px); filter: blur(8px); transition: opacity 0.8s ease 0.3s, clip-path 1.3s var(--ease) 0.3s, filter 1s ease 0.3s; }
.js .kontakt__naroznik { opacity: 0; transform: scale(0.3); transition: opacity 0.6s ease 1.1s, transform 0.9s var(--ease) 1.1s; } .js .kontakt__mapa { opacity: 0; clip-path: inset(0 22% 0 22% round 8px); filter: blur(6px); transition: opacity 0.8s ease, clip-path 1.4s var(--ease), filter 1s ease; }
.kontakt__kontener.is-aktywna .kontakt__badge,
.kontakt__kontener.is-aktywna .kontakt__litera,
.kontakt__kontener.is-aktywna .kontakt__lead,
.kontakt__kontener.is-aktywna .kontakt__dana { opacity: 1; transform: none; filter: none; }
.kontakt__kontener.is-aktywna .kontakt__dokument { opacity: 1; clip-path: inset(0 0 0 0 round 6px); }
.kontakt__kontener.is-aktywna .kontakt__formularz { opacity: 1; clip-path: inset(0 0 0 0 round 8px); filter: none; }
.kontakt__kontener.is-aktywna .kontakt__naroznik { opacity: 1; transform: none; }
.kontakt__mapa.is-aktywna { opacity: 1; clip-path: inset(0 0 0 0 round 8px); filter: none; } @media (max-width: 1100px) {
.kontakt__kontener { grid-template-columns: minmax(0, 1fr); }
.kontakt__telefon { display: none; }
}
@media (max-width: 620px) {
.kontakt__tytul { font-size: clamp(3rem, 16vw, 4.5rem); }
.kontakt__dane { grid-template-columns: minmax(0, 1fr); }
.kontakt__dana:nth-child(2) { padding-right: 0; }
.kontakt__dana:nth-child(3) { padding-left: 0; border-left: 0; }
.kontakt__lista-dokumentow { grid-template-columns: minmax(0, 1fr); }
.kontakt .fluentform .ff-btn.ff-btn-submit { width: 100%; padding-inline: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
.kontakt *, .kontakt *::before, .kontakt *::after { transition-duration: 0.001ms !important; transition-delay: 0s !important; }
}