:root {
--pj-surface: var(--wp--preset--color--surface, #FAF7F2);
--pj-ink: var(--wp--preset--color--ink, #191715);
--pj-accent: var(--wp--preset--color--accent, #B72F28);
--pj-accent-light: var(--wp--preset--color--accent-light, #D9544B);
--pj-accent-dark: var(--wp--preset--color--accent-dark, #93241E);
--pj-panel: #14120F;
--pj-panel-text: #F5F2EC;
--pj-header-h: 76px;
--pj-header-gap: 14px;
--pj-ease: cubic-bezier(.33, 1, .38, 1);
}
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
.wp-site-blocks {
display: flex;
flex-direction: column;
min-height: 100vh;
}
@supports (min-height: 100dvh) {
.wp-site-blocks { min-height: 100dvh; }
}
.wp-site-blocks > main { flex: 1 0 auto; }
:root :where(
.wp-site-blocks,
main.wp-block-group,
.entry-content,
.wp-block-post-content,
.entry-content .wp-block-group,
.pj-header,
.pj-hero,
.pj-hero__content,
.pj-hero__stage,
.pj-opinie,
.pj-galeria,
.pj-cta-koniec,
.pj-stopka,
.pj-hero-pod,
.pj-uslugi,
.pj-duo,
.pj-kroki,
.pj-rodzaje,
.pj-atuty,
.pj-faq,
.pj-realizacje,
.pj-kontakt,
.pj-dojazd
) > * { margin-block-start: 0; }
.entry-content,
.wp-block-post-content {
display: flex;
flex-direction: column;
}
body.pj-lock { overflow: hidden; }
.pj-header {
position: fixed;
top: var(--pj-header-gap);
left: 50%;
transform: translateX(-50%) translateZ(0);
width: min(1360px, calc(100vw - 2 * var(--pj-header-gap)));
height: var(--pj-header-h);
z-index: 40;
display: flex;
align-items: center;
gap: clamp(16px, 2.4vw, 40px);
padding-inline: clamp(18px, 2.4vw, 34px);
background: rgba(16, 14, 12, .84);
-webkit-backdrop-filter: blur(18px) saturate(1.25);
backdrop-filter: blur(18px) saturate(1.25);
border: 1px solid rgba(255, 255, 255, .10);
border-radius: 999px;
box-shadow: 0 16px 44px rgba(0, 0, 0, .22);
transition: background-color .4s var(--pj-ease), border-color .4s var(--pj-ease),
box-shadow .4s var(--pj-ease), -webkit-backdrop-filter .4s var(--pj-ease),
backdrop-filter .4s var(--pj-ease);
}
body:has(.pj-hero-foto, .pj-hero-pod) .pj-header:not(.is-stuck) {
background: rgba(18, 16, 13, .10);
-webkit-backdrop-filter: blur(3px) saturate(1.05);
backdrop-filter: blur(3px) saturate(1.05);
border-color: rgba(255, 255, 255, .05);
box-shadow: none;
}
.pj-logo-link {
display: inline-flex;
align-items: center;
gap: clamp(9px, .9vw, 14px);
flex: none;
}
.pj-logo-sygnet-box { display: grid; flex: none; }
.pj-logo-sygnet-box > * { grid-area: 1 / 1; }
.pj-logo-sygnet {
width: auto;
height: clamp(27px, 2.7vw, 38px);
transition: opacity .4s var(--pj-ease);
}
.pj-logo-sygnet--czerwony { opacity: 0; }
body:has(.pj-hero-foto, .pj-hero-pod) .pj-header:not(.is-stuck) .pj-logo-sygnet--czerwony { opacity: 1; }
body:has(.pj-hero-foto, .pj-hero-pod) .pj-header:not(.is-stuck) .pj-logo-sygnet--bialy { opacity: 0; }
.pj-logo-napis {
width: auto;
height: clamp(17px, 1.7vw, 24px);
align-self: center;
position: relative;
top: 2px;
}
.pj-nav { margin-inline: auto; }
.pj-nav > ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: clamp(4px, 1vw, 10px);
}
.pj-nav > ul > li { position: relative; }
.pj-nav > ul > li > a {
display: inline-flex;
align-items: center;
gap: .45em;
padding: .6em 1em;
font-family: var(--wp--preset--font-family--karla);
font-size: 1.0625rem;
font-weight: 500;
letter-spacing: .03em;
text-decoration: none;
color: #EFEBE4;
border-radius: 999px;
transition: background-color .22s var(--pj-ease), color .22s var(--pj-ease);
}
@media (hover: hover) {
.pj-nav > ul > li > a:hover { background: var(--pj-accent); color: #fff; }
}
.pj-nav > ul > li > a[aria-current="page"] { color: #E0685F; }
.pj-nav__has-mega > a::after {
content: "";
width: .48em;
height: .48em;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translateY(-15%);
transition: transform .25s var(--pj-ease);
}
.pj-mega {
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translateX(-50%) translateZ(0);
width: max-content;
max-width: calc(100vw - 48px);
padding: clamp(18px, 2vw, 28px);
background: rgba(20, 18, 15, .82);
-webkit-backdrop-filter: blur(20px) saturate(1.25);
backdrop-filter: blur(20px) saturate(1.25);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 22px;
box-shadow: 0 26px 70px rgba(0, 0, 0, .45);
opacity: 0;
visibility: hidden;
transition: opacity .25s var(--pj-ease), visibility 0s .25s;
}
.pj-mega::before {
content: "";
position: absolute;
top: -14px;
left: 0;
right: 0;
height: 14px;
}
.pj-nav__has-mega:hover .pj-mega,
.pj-nav__has-mega:focus-within .pj-mega {
opacity: 1;
visibility: visible;
transition: opacity .25s var(--pj-ease);
}
.pj-nav__has-mega:hover > a::after,
.pj-nav__has-mega:focus-within > a::after { transform: rotate(225deg) translateY(15%); }
.pj-mega ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px;
}
.pj-mega a {
display: block;
padding: .9em 1.1em;
font-family: var(--wp--preset--font-family--karla);
font-size: .9375rem;
font-weight: 500;
text-decoration: none;
color: #EFEBE4;
white-space: nowrap;
border-radius: 14px;
transition: background-color .2s var(--pj-ease), color .2s var(--pj-ease);
}
@media (hover: hover) {
.pj-mega a:hover { background: rgba(255, 255, 255, .09); color: #E0685F; }
}
.pj-call {
flex: none;
font-family: var(--wp--preset--font-family--karla);
font-weight: 700;
font-size: .9375rem;
letter-spacing: .04em;
text-decoration: none;
color: #fff;
background: var(--pj-accent);
border-radius: 999px;
padding: .68em 1.5em;
transform: translateZ(0);
transition: background-color .25s var(--pj-ease), transform .25s var(--pj-ease);
}
@media (hover: hover) {
.pj-call:hover { background: var(--pj-accent-dark); transform: translateY(-1px) translateZ(0); }
}
.pj-burger {
display: none;
flex-direction: column;
justify-content: center;
gap: 6px;
width: 44px;
height: 44px;
padding: 10px;
background: none;
border: 0;
cursor: pointer;
flex: none;
}
.pj-burger span {
display: block;
width: 100%;
height: 2px;
background: #EFEBE4;
border-radius: 1px;
}
.pj-menu {
position: fixed;
inset: 0;
height: 100dvh;
z-index: 100;
background: var(--pj-panel);
pointer-events: auto;
user-select: none;
-webkit-user-select: none;
overflow-y: auto;
opacity: 0;
visibility: hidden;
transition: opacity .35s var(--pj-ease), visibility 0s .35s;
}
.pj-menu.is-open {
opacity: 1;
visibility: visible;
transition: opacity .35s var(--pj-ease);
}
.pj-menu[hidden] { display: none; }
.pj-menu__gora {
display: flex;
justify-content: center;
padding-top: calc(var(--pj-header-gap) + clamp(26px, 6vh, 52px));
}
.pj-menu__logo img {
display: block;
width: auto;
height: clamp(74px, 19vw, 96px);
}
.pj-menu__close {
position: absolute;
top: calc(var(--pj-header-gap) + (var(--pj-header-h) - 44px) / 2);
right: calc(var(--pj-header-gap) + clamp(18px, 2.4vw, 34px));
z-index: 2;
width: 44px;
height: 44px;
padding: 0;
background: none;
border: 0;
color: var(--pj-panel-text);
cursor: pointer;
}
.pj-menu__close::before,
.pj-menu__close::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 2px;
background: currentColor;
border-radius: 1px;
}
.pj-menu__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.pj-menu__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
@media (hover: hover) {
.pj-menu__close:hover { color: var(--pj-accent-light); }
}
.pj-menu__inner {
min-height: 0;
display: flex;
flex-direction: column;
gap: clamp(1.8rem, 4.4vh, 2.8rem);
padding: clamp(1.6rem, 4vh, 2.6rem) clamp(24px, 7vw, 44px) 0;
overflow-y: auto;
}
.pj-menu__blok:last-child { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }
.pj-menu__etykieta {
margin: 0 0 clamp(.7rem, 1.6vh, 1rem);
font-size: .75rem;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(233, 228, 220, .45);
}
.pj-menu__nav {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.pj-menu__nav > li + li { border-top: 1px solid rgba(233, 228, 220, .1); }
.pj-menu__nav a {
display: block;
padding: clamp(.62rem, 1.7vh, .86rem) 0;
font-family: var(--wp--preset--font-family--karla);
font-size: clamp(1.16rem, 3.2vh, 1.42rem);
font-weight: 600;
line-height: 1.25;
letter-spacing: -.01em;
text-decoration: none;
color: var(--pj-panel-text);
}
.pj-menu__wiersz { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pj-menu__wiersz a { flex: 1; }
.pj-menu__rozwin {
flex: none;
display: grid;
place-items: center;
width: 40px;
height: 40px;
padding: 0;
background: none;
border: 0;
color: rgba(233, 228, 220, .6);
cursor: pointer;
}
.pj-menu__rozwin svg {
width: 20px;
height: 20px;
transition: transform .32s var(--pj-ease);
}
.pj-menu__rozwin[aria-expanded="true"] svg { transform: rotate(180deg); }
.pj-menu__rozwin[aria-expanded="true"] { color: var(--pj-accent-light); }
.pj-menu__sub {
list-style: none;
margin: 0 0 .5rem;
padding: 0 0 0 clamp(12px, 4vw, 18px);
display: flex;
flex-direction: column;
border-left: 1px solid rgba(183, 47, 40, .4);
}
.pj-menu__sub[hidden] { display: none; }
.pj-menu__sub a {
padding: .34rem 0;
font-size: .96rem;
font-weight: 500;
color: rgba(233, 228, 220, .68);
}
.pj-menu__kontakt {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: clamp(.5rem, 1.5vh, .8rem);
}
.pj-menu__kontakt a {
display: flex;
align-items: center;
gap: .72rem;
font-size: 1rem;
text-decoration: none;
color: rgba(233, 228, 220, .88);
}
.pj-menu__kontakt svg { width: 19px; height: 19px; flex: none; color: var(--pj-accent-light); }
.pj-menu__social {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 10px;
}
.pj-menu__social a {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid rgba(233, 228, 220, .2);
border-radius: 12px;
color: rgba(233, 228, 220, .8);
}
.pj-menu__social svg { width: 19px; height: 19px; }
@media (hover: hover) {
.pj-menu__nav a:hover,
.pj-menu__kontakt a:hover { color: var(--pj-accent-light); }
.pj-menu__social a:hover { border-color: var(--pj-accent); background: var(--pj-accent); color: #fff; }
}
.pj-hero-foto {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: clip;
background: var(--pj-ink);
}
@supports (height: 100svh) {
.pj-hero-foto { min-height: 100svh; }
}
.pj-hero-foto__bg,
.pj-hero-foto__bg img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.pj-hero-foto__bg img { object-fit: cover; object-position: 50% 50%; }
.pj-hero-foto__darken {
position: absolute;
inset: 0;
background: #0B0A08;
opacity: 0;
}
.pj-hero-foto__mask {
position: absolute;
inset: 0;
background:
radial-gradient(58% 58% at 50% 48%, rgba(255, 246, 235, .09), transparent 70%),
linear-gradient(100deg, rgba(10, 8, 6, .34) 0%, rgba(10, 8, 6, .14) 48%, rgba(10, 8, 6, .05) 72%),
linear-gradient(180deg, rgba(10, 8, 6, .34) 0%, rgba(10, 8, 6, 0) 24%),
rgba(12, 10, 8, .24);
}
.pj-hero-foto__grain {
position: absolute;
inset: 0;
opacity: .085;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pj-hero-foto__panel {
position: relative;
z-index: 2;
max-width: 760px;
margin: calc(var(--pj-header-h) + var(--pj-header-gap) + 3vh) clamp(20px, 4vw, 48px) 6vh clamp(20px, 6vw, 96px);
padding: clamp(1.8rem, 4vh, 3rem) clamp(1.5rem, 3vw, 2.75rem);
background: rgba(18, 16, 13, .68);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
backdrop-filter: blur(20px) saturate(1.2);
border: 1px solid rgba(255, 255, 255, .13);
border-radius: 26px;
box-shadow: 0 34px 90px rgba(0, 0, 0, .45);
}
.pj-hero-foto__panel > * { margin-block-start: 0; }
.pj-hero-foto__panel > * + * { margin-top: 1.15rem; }
:root {
--pj-h1-rozmiar: clamp(2.25rem, 5.04vw, 3.825rem);
--pj-h1-tracking: -.028em;
--pj-badge-rozmiar: .875rem;
--pj-badge-waga: 800;
--pj-badge-tracking: .3em;
--pj-badge-wiersz: 1.12;
--pj-badge-odstep: .9rem;
}
.pj-hero-h1 { margin: 0; }
.pj-hero-h1 .pj-eyebrow {
display: block;
font-family: var(--wp--preset--font-family--karla);
font-size: var(--pj-badge-rozmiar);
font-weight: var(--pj-badge-waga);
line-height: var(--pj-badge-wiersz);
letter-spacing: var(--pj-badge-tracking);
text-transform: uppercase;
color: var(--pj-accent-light);
margin-bottom: var(--pj-badge-odstep);
}
.pj-hero-h1 .pj-title {
display: block;
font-family: var(--wp--preset--font-family--karla);
font-size: var(--pj-h1-rozmiar);
font-weight: 700;
line-height: 1.02;
letter-spacing: var(--pj-h1-tracking);
color: #F7F4EE;
}
.pj-hero-lead {
max-width: 54ch;
font-size: var(--wp--preset--font-size--medium);
line-height: 1.65;
color: #C9C3B8;
}
.pj-hero-cta { display: block; }
.pj-btn {
position: relative;
display: inline-block;
padding: .78em 1.9em;
text-align: center;
font-family: var(--wp--preset--font-family--karla);
font-size: 1.0625rem;
font-weight: 500;
letter-spacing: .055em;
text-decoration: none;
color: #F7F4EE;
background: transparent;
border: 2px solid var(--pj-accent-light);
border-radius: 10px;
box-shadow: inset 0 0 0 0 var(--pj-accent);
cursor: pointer;
user-select: none;
white-space: nowrap;
transform: translateZ(0);
transition: color .5s ease-out, border-color .5s ease-out, box-shadow .5s ease-out, transform .16s ease-out;
}
@media (hover: hover) {
.pj-btn:hover {
color: #fff;
border-color: var(--pj-accent);
box-shadow: inset 0 -100px 0 0 var(--pj-accent);
}
}
.pj-btn:active {
transform: scale(.9) translateZ(0);
color: #fff;
border-color: var(--pj-accent-dark);
box-shadow: inset 0 -100px 0 0 var(--pj-accent-dark);
}
.pj-btn:focus-visible { outline: 2px solid var(--pj-accent-light); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
.pj-hero-foto__bg img {
transform: scale(1.26);
animation: pj-pullback 3.4s cubic-bezier(.16, .8, .28, 1) forwards;
}
.pj-hero-foto__darken {
opacity: .74;
animation: pj-lighten 2.9s ease .2s forwards;
}
.pj-hero-foto__panel {
opacity: 0;
animation: pj-fade .7s var(--pj-ease) .35s forwards;
}
.pj-hero-foto__panel > * {
opacity: 0;
transform: translateY(14px);
animation: pj-up .6s var(--pj-ease) forwards;
}
.pj-hero-foto__panel > .pj-hero-cta {
transform: none;
animation-name: pj-fade;
}
.pj-hero-foto__panel > :nth-child(1) { animation-delay: .5s; }
.pj-hero-foto__panel > :nth-child(2) { animation-delay: .62s; }
.pj-hero-foto__panel > :nth-child(3) { animation-delay: .74s; }
.pj-header { opacity: 0; animation: pj-fade .6s ease .45s forwards; }
}
@keyframes pj-up { to { opacity: 1; transform: translateY(0); } }
@keyframes pj-fade { to { opacity: 1; } }
@keyframes pj-pullback { to { transform: scale(1); } }
@keyframes pj-lighten { to { opacity: 0; } }
.pj-oferta {
--pj-oferta-tlo: #EAE7E3;
--pj-rzad-a: #F2EFEA;
--pj-rzad-b: #EAE7E3;
position: relative;
background: var(--pj-oferta-tlo);
scroll-margin-top: calc(var(--pj-header-h) + var(--pj-header-gap) + 16px);
overflow: clip;
}
.pj-oferta__wrap {
display: grid;
grid-template-columns: minmax(0, 456fr) minmax(0, 544fr);
}
.pj-oferta__intro {
position: relative;
display: flex;
flex-direction: column;
padding: clamp(3.5rem, 8vh, 6rem) clamp(24px, 4vw, 72px) 0 clamp(24px, 5.4vw, 120px);
min-height: clamp(620px, 78vh, 900px);
}
.pj-oferta__intro > * { position: relative; z-index: 2; margin-block-start: 0; }
.pj-oferta__wordmark {
position: absolute;
top: 21.8%;
right: calc(54.4% - .07em);
z-index: 0;
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: clamp(8.8rem, 17.6vw, 16.5rem);
font-weight: 700;
line-height: .78;
letter-spacing: -.06em;
color: #E2DDD6;
font-kerning: none;
font-variant-ligatures: none;
pointer-events: none;
user-select: none;
}
.pj-oferta__eyebrow {
margin: 0 0 1.1rem;
font-size: .8125rem;
font-weight: 800;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--pj-accent);
}
.pj-oferta__title {
margin: 0;
max-width: 17ch;
font-size: clamp(1.95rem, 3.1vw, 2.9rem);
font-weight: 700;
line-height: 1.06;
letter-spacing: -.03em;
color: var(--pj-ink);
}
.pj-oferta__rule {
display: block;
width: clamp(78px, 8.6vw, 132px);
height: 1px;
margin: clamp(1.4rem, 2.6vw, 2.2rem) 0;
background: rgba(25, 23, 21, .34);
}
.pj-oferta__text {
margin: 0 0 2rem;
max-width: 36ch;
color: var(--wp--preset--color--muted);
}
.pj-oferta__cta {
align-self: flex-start;
color: var(--pj-ink);
border-color: var(--pj-accent);
}
@media (hover: hover) {
.pj-oferta__cta:hover { color: #fff; }
}
.pj-oferta__photo {
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
width: min(30vw, 560px);
pointer-events: none;
}
.pj-oferta__photo img {
display: block;
width: 100%;
height: auto;
}
.pj-oferta__list {
list-style: none;
margin: 0;
padding: 0;
position: relative;
z-index: 2;
}
.pj-oferta__list > li:nth-child(odd) { background: var(--pj-rzad-a); }
.pj-oferta__list > li:nth-child(even) { background: var(--pj-rzad-b); }
.pj-oferta__list > li {
position: relative;
background-image: linear-gradient(var(--pj-rzad-a), var(--pj-rzad-a));
background-repeat: no-repeat;
background-position: right;
background-size: 42% 100%;
}
.pj-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) minmax(0, 42%);
align-items: center;
gap: clamp(12px, 1.6vw, 26px);
min-height: clamp(150px, 17.5vw, 240px);
padding-left: clamp(20px, 2.8vw, 56px);
text-decoration: none;
color: inherit;
transition: background-color .35s var(--pj-ease);
}
.pj-row__num {
font-size: clamp(1.75rem, 2.7vw, 2.6rem);
font-weight: 700;
letter-spacing: -.04em;
line-height: 1;
color: rgba(25, 23, 21, .17);
transition: color .35s var(--pj-ease);
}
.pj-row__body {
display: block;
position: relative;
padding-top: 1.6em;
}
.pj-row__body::before {
content: "";
position: absolute;
top: .55em;
left: 0;
width: 46px;
height: 1px;
background: rgba(25, 23, 21, .38);
transition: width .35s var(--pj-ease), background-color .35s var(--pj-ease);
}
.pj-row__title {
display: block;
margin-bottom: .4em;
font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
font-weight: 700;
letter-spacing: -.015em;
color: var(--pj-ink);
}
.pj-row__desc {
display: block;
font-size: .9375rem;
line-height: 1.55;
color: var(--wp--preset--color--muted);
max-width: 30ch;
}
.pj-row__media {
position: absolute;
inset: 5.5px 0 5.5px auto;
width: 42%;
overflow: hidden;
background: #DED8CF;
transform: translateZ(0);
}
.pj-row__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .7s var(--pj-ease);
}
.pj-row__arrow {
position: absolute;
top: 50%;
right: clamp(16px, 2vw, 30px);
z-index: 3;
display: grid;
place-items: center;
width: 2.7rem;
height: 2.7rem;
margin-top: -1.35rem;
border-radius: 50%;
background: var(--pj-accent);
color: #fff;
opacity: 0;
transform: translateZ(0);
transition: opacity .3s var(--pj-ease);
}
.pj-row__arrow svg { width: 1.1rem; height: 1.1rem; transition: transform .35s var(--pj-ease); }
@media (hover: hover) {
.pj-row:hover { background: rgba(255, 255, 255, .55); }
.pj-row:hover .pj-row__num { color: var(--pj-accent); }
.pj-row:hover .pj-row__body::before { width: 72px; background: var(--pj-accent); }
.pj-row:hover .pj-row__media img { transform: scale(1.06); }
.pj-row:hover .pj-row__arrow { opacity: 1; }
.pj-row:hover .pj-row__arrow svg { transform: translateX(3px); }
}
.pj-row:focus-visible { outline: 3px solid var(--pj-accent); outline-offset: -3px; }
.pj-row:focus-visible .pj-row__arrow { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
.pj-oferta__wordmark.pj-anim {
opacity: 0;
transform: translate3d(0, 64px, 0) rotate(180deg);
transition: opacity .9s var(--pj-ease), transform .9s var(--pj-ease);
}
.pj-oferta__wordmark.pj-anim.is-in {
opacity: 1;
transform: translate3d(0, 0, 0) rotate(180deg);
}
.pj-oferta__intro.pj-anim > :not(.pj-oferta__photo) {
opacity: 0;
transform: translate3d(0, 22px, 0);
transition: opacity .7s var(--pj-ease), transform .7s var(--pj-ease);
}
.pj-oferta__intro.pj-anim > .pj-oferta__cta { transform: none; }
.pj-oferta__intro.pj-anim.is-in > :not(.pj-oferta__photo) {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.pj-oferta__intro.pj-anim.is-in > .pj-oferta__cta { transform: none; }
.pj-oferta__intro.pj-anim > :nth-child(1) { transition-delay: .05s; }
.pj-oferta__intro.pj-anim > :nth-child(2) { transition-delay: .14s; }
.pj-oferta__intro.pj-anim > :nth-child(3) { transition-delay: .22s; }
.pj-oferta__intro.pj-anim > :nth-child(4) { transition-delay: .30s; }
.pj-oferta__intro.pj-anim > :nth-child(5) { transition-delay: .38s; }
.pj-oferta__intro.pj-anim > .pj-oferta__cta {
transition: opacity .7s var(--pj-ease) .38s,
color .5s ease-out, border-color .5s ease-out,
box-shadow .5s ease-out, transform .16s ease-out;
}
}
@media (min-width: 1101px) and (prefers-reduced-motion: no-preference) {
.pj-oferta__list.pj-anim .pj-row {
opacity: 0;
transform: translate3d(-56px, 0, 0);
transition: opacity .75s var(--pj-ease), transform .75s var(--pj-ease),
background-color .35s var(--pj-ease);
}
.pj-oferta__list.pj-anim .pj-row.is-in {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@media (max-width: 1100px) {
.pj-oferta__wrap { grid-template-columns: 1fr; }
.pj-oferta { --pj-oferta-foto: min(60vw, 460px); }
.pj-oferta__intro {
min-height: 0;
padding-bottom: calc(var(--pj-oferta-foto) * 1.05 + 1.6rem);
}
.pj-oferta__photo { width: var(--pj-oferta-foto); }
.pj-oferta__wordmark { right: -.15em; }
.pj-row { padding-left: clamp(24px, 4vw, 64px); }
}
@media (max-width: 700px) {
.pj-row {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "num" "body" "media";
gap: 0;
min-height: 0;
padding: 24px clamp(24px, 4vw, 64px) 0;
}
.pj-row__num {
grid-area: num;
display: flex;
align-items: center;
gap: 14px;
font-size: clamp(3.1rem, 13.5vw, 4.3rem);
line-height: .92;
color: rgba(25, 23, 21, .19);
}
.pj-row__num::after {
content: "";
flex: 1;
height: 1px;
margin-right: 40px;
background: rgba(25, 23, 21, .2);
}
.pj-row__body { grid-area: body; padding-top: .5em; }
.pj-row__body::before { display: none; }
.pj-row__desc { max-width: none; }
.pj-row__media {
grid-area: media;
position: relative;
inset: auto;
width: 100%;
margin: 20px 0 0;
aspect-ratio: 5 / 3;
border-radius: 6px;
outline: 1px solid var(--pj-accent);
outline-offset: 4px;
}
.pj-row {
padding-bottom: calc(clamp(16px, 4vw, 26px) + 6px);
}
.pj-row__arrow {
grid-area: num;
position: static;
justify-self: end;
align-self: center;
margin-top: 0;
opacity: 1;
}
.pj-oferta__wordmark { font-size: 7rem; right: -.18em; top: 6%; }
.pj-oferta { --pj-oferta-foto: min(84vw, 380px); }
}
@media (hover: hover) {
}
.pj-page { padding: calc(var(--pj-header-h) + var(--pj-header-gap) + 3rem) clamp(24px, 5vw, 48px) 5rem; }
.pj-page:has(.pj-hero-pod) { padding: 0 0 5rem; }
.pj-404__wrap {
max-width: 720px;
margin: 0 auto;
padding: clamp(2rem, 8vh, 5rem) 0 clamp(2rem, 6vh, 4rem);
text-align: center;
}
.pj-404__kod {
margin: 0 0 .1em;
font-size: clamp(5.5rem, 18vw, 11rem);
font-weight: 800;
line-height: .9;
letter-spacing: -.05em;
color: rgba(25, 23, 21, .07);
}
.pj-404__title {
margin: 0 0 1rem;
font-size: clamp(2rem, 4.2vw, 3rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -.03em;
color: var(--pj-ink);
}
.pj-404__text {
max-width: 46ch;
margin: 0 auto 2.2rem;
font-size: 1.0625rem;
line-height: 1.7;
color: var(--pj-graphite, #4A453F);
}
.pj-404__akcje {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1rem 1.8rem;
margin: 0;
}
.pj-404__btn { color: var(--pj-ink); border-color: var(--pj-accent); }
.pj-404__link {
font-weight: 600;
color: var(--pj-ink);
text-decoration: underline;
text-decoration-color: var(--pj-accent);
text-underline-offset: .3em;
}
@media (hover: hover) {
.pj-404__link:hover { color: var(--pj-accent); }
}
@media (max-width: 1024px) {
.pj-nav, .pj-mega { display: none; }
.pj-burger { display: inline-flex; margin-left: auto; }
.pj-call { margin-left: auto; }
.pj-burger { margin-left: 0; }
.pj-hero-foto__panel {
max-width: min(600px, 100%);
margin-inline: clamp(16px, 4vw, 48px);
}
}
@media (max-width: 640px) {
:root { --pj-header-h: 66px; --pj-header-gap: 10px; }
.pj-logo-sygnet { height: 23px; }
.pj-logo-napis { height: 15px; }
.pj-call { padding: .6em 1.1em; font-size: .875rem; }
.pj-hero-foto__panel {
padding: 1.35rem 1.15rem;
border-radius: 18px;
}
.pj-hero-foto__panel > * + * { margin-top: .95rem; }
.pj-hero-foto__panel .pj-eyebrow { font-size: .8125rem; margin-bottom: .72rem; }
.pj-hero-foto__panel .pj-title { font-size: 1.95rem; }
.pj-hero-foto__panel .pj-hero-lead { font-size: .9rem; line-height: 1.6; }
.pj-hero-foto__panel .pj-btn { font-size: .8125rem; padding: .85em 1.6em; }
}
.pj-hero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 44vw;
min-height: 100vh;
background: var(--pj-surface);
overflow: clip;
}
.pj-hero__content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 1.35rem;
max-width: 620px;
padding: 12vh clamp(16px, 2vw, 40px) 6vh clamp(24px, 6vw, 96px);
position: relative;
z-index: 3;
}
.pj-kicker {
margin: 0;
font-family: var(--wp--preset--font-family--karla);
font-size: .8125rem;
font-weight: 700;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--pj-accent);
}
.pj-h1 {
margin: 0;
max-width: 12em;
font-family: var(--wp--preset--font-family--karla);
font-size: var(--wp--preset--font-size--xx-large);
font-weight: 700;
line-height: 1.12;
color: var(--pj-ink);
}
.pj-hl { position: relative; white-space: nowrap; color: var(--pj-accent); }
.pj-lead { margin: 0; max-width: 46ch; font-size: var(--wp--preset--font-size--medium); color: var(--wp--preset--color--muted); }
.pj-trust { display: flex; align-items: center; gap: .9rem; margin-top: 1.2rem; }
.pj-trust img { width: 52px; height: auto; flex: none; }
.pj-trust p { margin: 0; font-size: .875rem; line-height: 1.45; color: var(--wp--preset--color--muted); }
.pj-cta { gap: .9rem; }
.pj-cta .wp-block-button__link {
font-family: var(--wp--preset--font-family--karla);
font-weight: 700;
font-size: 1rem;
border-radius: 999px;
padding: .85em 1.9em;
}
.pj-btn-gold .wp-block-button__link { background: var(--pj-accent); color: #fff; }
.pj-btn-ghost .wp-block-button__link { background: transparent; color: var(--pj-ink); border: 1px solid rgba(25, 23, 21, .3); }
.pj-hero__stage { position: relative; display: flex; flex-direction: column; justify-content: center; background: var(--pj-panel); z-index: 2; }
.pj-komoda { position: relative; z-index: 2; width: 54vw; max-width: 900px; margin-left: -16vw; }
.pj-komoda__frame { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.pj-komoda__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.pj-komoda__frame img.is-active { opacity: 1; }
.pj-komoda__frame img.is-in { opacity: 1; z-index: 3; clip-path: inset(0 100% 0 0); }
.pj-komoda__frame img.is-in-run { clip-path: inset(0 0 0 0); transition: clip-path .95s cubic-bezier(.45, 0, .3, 1); }
.pj-komoda__sheenmask {
position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden;
-webkit-mask: url(//meblepijet.pl/wp-content/themes/pijet/assets/img/hero/komoda-bialy-768.webp) center / 100% 100% no-repeat;
mask: url(//meblepijet.pl/wp-content/themes/pijet/assets/img/hero/komoda-bialy-768.webp) center / 100% 100% no-repeat;
}
.pj-komoda__sheen {
position: absolute; top: -10%; left: 0; width: 42%; height: 120%;
transform: translateX(-130%) skewX(-10deg);
background: linear-gradient(90deg, transparent 0%, rgba(255, 224, 220, 0) 26%, rgba(255, 210, 205, .42) 46%, rgba(255, 245, 243, .85) 50%, rgba(255, 210, 205, .42) 54%, transparent 76%);
mix-blend-mode: screen;
}
.pj-komoda.is-sweep .pj-komoda__sheen { animation: pj-sweep .95s cubic-bezier(.45, 0, .3, 1) forwards; }
@keyframes pj-sweep { to { transform: translateX(370%) skewX(-10deg); } }
.pj-komoda-badge, .pj-komoda-caption { position: absolute; z-index: 4; margin: 0; }
.pj-komoda-badge {
bottom: clamp(84px, 14vh, 140px); right: clamp(20px, 3vw, 48px);
font-family: var(--wp--preset--font-family--karla);
font-size: .75rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; text-align: right;
color: #E0685F;
}
.pj-komoda-caption {
bottom: clamp(20px, 5vh, 56px); left: clamp(20px, 3vw, 48px); max-width: 23em;
color: #D9D2C2; font-family: var(--wp--preset--font-family--karla); font-weight: 500; font-size: .9375rem; line-height: 1.55;
}
.pj-komoda__dots { display: flex; justify-content: center; gap: 14px; margin-top: clamp(10px, 2.4vh, 22px); }
.pj-komoda__dots button { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 1px solid var(--pj-accent); background: transparent; cursor: pointer; }
.pj-komoda__dots button.is-active { background: var(--pj-accent); transform: scale(1.25); }
.pj-deco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pj-deco path, .pj-deco circle { fill: none; stroke: var(--pj-accent); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pj-deco :nth-child(1) { opacity: .38; }
.pj-deco :nth-child(2) { opacity: .22; }
.pj-deco :nth-child(3) { opacity: .30; }
@media (prefers-reduced-motion: no-preference) {
.pj-deco--init :is(path, circle) { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--pj-ease); }
.pj-deco--init :is(path, circle):nth-child(2) { transition-delay: .25s; }
.pj-deco--init :is(path, circle):nth-child(3) { transition-delay: .5s; }
.pj-deco--init.is-drawn :is(path, circle) { stroke-dashoffset: 0; }
}
@media (max-width: 1024px) {
.pj-hero { grid-template-columns: 1fr; min-height: 0; }
.pj-hero__stage { padding: 8vh 0 6vh; }
.pj-komoda { width: min(92vw, 640px); margin-inline: auto; }
}
.pj-onas {
position: relative;
background: #EAE7E3;
scroll-margin-top: calc(var(--pj-header-h) + var(--pj-header-gap) + 16px);
overflow: clip;
}
.pj-onas__wrap {
display: grid;
grid-template-columns: minmax(0, 456fr) minmax(0, 544fr);
align-items: stretch;
}
.pj-onas__foto {
position: relative;
min-height: clamp(520px, 62vw, 880px);
}
.pj-onas__foto::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg,
rgba(22, 20, 17, .34) 0%,
rgba(22, 20, 17, .13) 32%,
rgba(22, 20, 17, .13) 66%,
rgba(22, 20, 17, .36) 100%);
pointer-events: none;
}
.pj-onas__foto > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 34%;
}
.pj-onas__rog {
position: absolute;
left: clamp(22px, 4.2vw, 68px);
z-index: 2;
margin: 0;
padding-left: 1.1em;
border-left: 1px solid rgba(255, 255, 255, .5);
font-family: var(--wp--preset--font-family--karla);
font-size: clamp(.6875rem, .72vw, .78rem);
font-weight: 500;
letter-spacing: .3em;
line-height: 2.1;
text-transform: uppercase;
color: rgba(255, 255, 255, .92);
}
.pj-onas__rog--gora { top: clamp(60px, 8vw, 100px); }
.pj-onas__rog--dol { bottom: clamp(48px, 6vw, 88px); }
.pj-onas__znak {
position: absolute;
top: 10%;
right: -.06em;
z-index: 3;
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: var(--wp--preset--font-family--karla);
font-size: clamp(8.8rem, 17.6vw, 16.5rem);
font-weight: 700;
line-height: .78;
letter-spacing: -.06em;
color: rgba(255, 255, 255, .36);
font-kerning: none;
font-variant-ligatures: none;
pointer-events: none;
user-select: none;
}
.pj-onas__tresc {
position: relative;
z-index: 1;
padding: clamp(3.5rem, 7.5vw, 7rem) clamp(24px, 5vw, 96px) clamp(3.5rem, 7vw, 6rem) clamp(24px, 6.2vw, 110px);
}
.pj-onas__tresc > * { margin-block-start: 0; }
.pj-onas__eyebrow {
margin: 0 0 1.1rem;
font-size: .8125rem;
font-weight: 800;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--pj-accent);
}
.pj-onas__title {
margin: 0;
max-width: 19ch;
font-size: clamp(1.9rem, 3.1vw, 2.9rem);
font-weight: 700;
line-height: 1.14;
letter-spacing: -.03em;
color: var(--pj-ink);
}
.pj-onas__rule {
display: block;
width: clamp(78px, 8.6vw, 132px);
height: 1px;
margin: clamp(1.4rem, 2.6vw, 2.2rem) 0;
background: rgba(25, 23, 21, .34);
}
.pj-onas__lead {
margin: 0 0 clamp(2rem, 3.4vw, 3rem);
max-width: 52ch;
line-height: 1.72;
color: var(--wp--preset--color--muted);
}
.pj-onas__lista {
list-style: none;
margin: 0 0 clamp(2.2rem, 3.6vw, 3.2rem);
padding: 0;
display: grid;
gap: clamp(1.4rem, 2.1vw, 1.9rem);
}
.pj-onas__poz {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: clamp(14px, 1.5vw, 24px);
}
.pj-onas__ikona {
display: grid;
place-items: center;
width: clamp(48px, 5.5vw, 84px);
aspect-ratio: 1;
border-radius: 50%;
background: #E6E2DB;
color: var(--pj-ink);
transform: translateZ(0);
transition: background-color .3s var(--pj-ease), color .3s var(--pj-ease);
}
.pj-onas__ikona svg {
width: 44%;
height: 44%;
}
.pj-onas__poz b {
display: block;
margin-bottom: .3em;
font-size: clamp(1rem, 1.16vw, 1.14rem);
font-weight: 700;
letter-spacing: -.01em;
color: var(--pj-ink);
}
.pj-onas__poz > span > span {
display: block;
font-size: clamp(.9rem, 1vw, .97rem);
line-height: 1.6;
color: var(--wp--preset--color--muted);
}
.pj-onas__poz--akcent .pj-onas__ikona { background: var(--pj-accent); color: #E6E2DB; }
.pj-onas__ikona svg [fill]:not([fill="none"]) { fill: currentColor; }
.pj-onas__cta {
align-self: flex-start;
color: var(--pj-ink);
border-color: var(--pj-accent);
}
@media (hover: hover) {
.pj-onas__cta:hover { color: #fff; }
}
@media (prefers-reduced-motion: no-preference) {
.pj-onas__tresc.pj-anim > * {
opacity: 0;
transform: translate3d(0, 22px, 0);
transition: opacity .7s var(--pj-ease), transform .7s var(--pj-ease);
}
.pj-onas__tresc.pj-anim > .pj-onas__cta { transform: none; }
.pj-onas__tresc.pj-anim.is-in > * { opacity: 1; transform: translate3d(0, 0, 0); }
.pj-onas__tresc.pj-anim.is-in > .pj-onas__cta { transform: none; }
.pj-onas__tresc.pj-anim > :nth-child(1) { transition-delay: .05s; }
.pj-onas__tresc.pj-anim > :nth-child(2) { transition-delay: .13s; }
.pj-onas__tresc.pj-anim > :nth-child(3) { transition-delay: .20s; }
.pj-onas__tresc.pj-anim > :nth-child(4) { transition-delay: .27s; }
.pj-onas__tresc.pj-anim > :nth-child(5) { transition-delay: .34s; }
.pj-onas__tresc.pj-anim > :nth-child(6) { transition-delay: .42s; }
.pj-onas__tresc.pj-anim > .pj-onas__cta {
transition: opacity .7s var(--pj-ease) .42s,
color .5s ease-out, border-color .5s ease-out,
box-shadow .5s ease-out, transform .16s ease-out;
}
.pj-onas__znak.pj-anim {
opacity: 0;
transform: translate3d(0, 64px, 0) rotate(180deg);
transition: opacity .9s var(--pj-ease), transform .9s var(--pj-ease);
}
.pj-onas__znak.pj-anim.is-in {
opacity: 1;
transform: translate3d(0, 0, 0) rotate(180deg);
}
}
@media (max-width: 1100px) {
.pj-onas__wrap { grid-template-columns: 1fr; }
.pj-onas__foto { min-height: clamp(420px, 74vw, 620px); }
.pj-onas__foto img { object-position: 50% 68%; }
.pj-onas__znak { font-size: clamp(8rem, 26vw, 15rem); }
}
@media (max-width: 640px) {
.pj-onas__foto { min-height: 380px; }
.pj-onas__znak { font-size: 7rem; right: -.02em; }
.pj-onas__rog { letter-spacing: .24em; }
.pj-onas__ikona { width: 52px; }
}
img {
-webkit-user-drag: none;
-webkit-user-select: none;
user-select: none;
}
.pj-opinie {
--pj-opinie-tlo: #EAE7E3;
--pj-opinie-karta: #F5F3EF;
position: relative;
overflow: clip;
padding: clamp(4.5rem, 9vh, 7.5rem) clamp(20px, 5vw, 96px) clamp(4.5rem, 9vh, 7rem);
background: var(--pj-opinie-tlo);
scroll-margin-top: calc(var(--pj-header-h) + var(--pj-header-gap) + 16px);
}
.pj-opinie__cudzyslow {
position: absolute;
top: clamp(-2.5rem, -3vw, -1rem);
left: clamp(-1.5rem, -1.6vw, -.5rem);
z-index: 0;
width: clamp(150px, 22vw, 330px);
height: auto;
fill: #E1DCD5;
pointer-events: none;
user-select: none;
}
.pj-opinie__znak {
position: absolute;
top: clamp(.5rem, 2.2vh, 2.2rem);
left: 50%;
z-index: 0;
transform: translateX(-50%);
font-family: var(--wp--preset--font-family--karla);
font-size: clamp(5.5rem, 15vw, 14rem);
font-weight: 700;
line-height: .9;
letter-spacing: -.05em;
white-space: nowrap;
color: #E3DFD8;
pointer-events: none;
user-select: none;
}
.pj-opinie__stol {
position: absolute;
right: 2%;
bottom: 7%;
z-index: 0;
width: clamp(260px, 34vw, 540px);
height: auto;
opacity: .72;
pointer-events: none;
user-select: none;
}
.pj-opinie__wrap {
position: relative;
z-index: 2;
max-width: 1180px;
margin-inline: auto;
}
.pj-opinie__intro {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: clamp(2.5rem, 5vh, 4rem);
}
.pj-opinie__intro > * { margin-block-start: 0; }
.pj-opinie__eyebrow {
margin: 0 0 clamp(.7rem, 1.4vh, 1.1rem);
font-size: .8125rem;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--pj-accent);
}
.pj-opinie__title {
margin: 0;
max-width: 17ch;
font-size: clamp(1.95rem, 3.1vw, 2.9rem);
font-weight: 700;
line-height: 1.14;
letter-spacing: -.03em;
color: var(--pj-ink);
}
.pj-opinie__rule {
display: block;
width: clamp(78px, 8.6vw, 132px);
height: 1px;
margin: clamp(1.1rem, 2.4vh, 1.8rem) 0;
background: rgba(25, 23, 21, .26);
}
.pj-opinie__text {
margin: 0;
max-width: 62ch;
font-size: clamp(1rem, 1.12vw, 1.0625rem);
line-height: 1.72;
color: var(--pj-graphite);
}
.pj-opinie__siatka {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(16px, 1.8vw, 28px);
align-items: stretch;
}
.pj-opinia {
display: flex;
flex-direction: column;
padding: clamp(14px, 1.2vw, 18px);
background: var(--pj-opinie-karta);
border-radius: 22px;
box-shadow: 0 2px 18px rgba(25, 23, 21, .05);
}
.pj-opinia__foto {
display: block;
overflow: hidden;
border-radius: 15px;
background: #DED8CF;
}
.pj-opinia__foto img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.pj-opinia__ocena {
display: flex;
justify-content: center;
gap: 3px;
margin: clamp(14px, 1.6vh, 20px) 0 clamp(10px, 1.2vh, 14px);
}
.pj-opinia__ocena svg {
width: 17px;
height: 17px;
fill: #2F9E5F;
}
.pj-opinia__tresc {
flex: 1;
margin: 0 0 clamp(16px, 2vh, 24px);
padding: 0 clamp(6px, 2vw, 12px);
font-size: clamp(.9375rem, 1.05vw, 1rem);
line-height: 1.68;
color: var(--pj-graphite);
}
.pj-opinia__tresc::before { content: "\201E"; }
.pj-opinia__tresc::after { content: "\201D"; }
.pj-opinia__stopka {
display: flex;
align-items: center;
gap: clamp(10px, 1vw, 14px);
padding-top: clamp(14px, 1.6vh, 18px);
border-top: 1px solid rgba(25, 23, 21, .09);
}
.pj-opinia__inicjal {
display: grid;
place-items: center;
flex: none;
width: 42px;
height: 42px;
border-radius: 50%;
background: #E6E2DB;
font-size: 1rem;
font-weight: 700;
color: var(--pj-ink);
}
.pj-opinia__kto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pj-opinia__kto cite {
font-style: normal;
font-size: .9375rem;
font-weight: 700;
color: var(--pj-ink);
}
.pj-opinia__zrodlo {
display: flex;
align-items: center;
gap: 5px;
font-size: .75rem;
line-height: 1.3;
color: var(--pj-muted);
}
.pj-opinia__zrodlo svg { width: 13px; height: 13px; flex: none; }
.pj-opinie__cta {
display: block;
width: max-content;
margin: clamp(2.5rem, 5vh, 3.8rem) auto 0;
color: var(--pj-ink);
border-color: var(--pj-accent);
}
@media (hover: hover) {
.pj-opinie__cta:hover { color: #fff; }
}
@media (prefers-reduced-motion: no-preference) {
.pj-opinie__intro.pj-anim > * {
opacity: 0;
transform: translate3d(0, 22px, 0);
transition: opacity .7s var(--pj-ease), transform .7s var(--pj-ease);
}
.pj-opinie__intro.pj-anim.is-in > * { opacity: 1; transform: translate3d(0, 0, 0); }
.pj-opinie__intro.pj-anim > :nth-child(1) { transition-delay: .05s; }
.pj-opinie__intro.pj-anim > :nth-child(2) { transition-delay: .13s; }
.pj-opinie__intro.pj-anim > :nth-child(3) { transition-delay: .20s; }
.pj-opinie__intro.pj-anim > :nth-child(4) { transition-delay: .27s; }
.pj-opinie__siatka.pj-anim .pj-opinia {
opacity: 0;
transform: translate3d(-46px, 0, 0);
transition: opacity .7s var(--pj-ease), transform .7s var(--pj-ease);
}
.pj-opinie__siatka.pj-anim .pj-opinia.is-in { opacity: 1; transform: translate3d(0, 0, 0); }
@media (max-width: 760px) {
.pj-opinie__siatka.pj-anim .pj-opinia { transform: translate3d(0, 26px, 0); }
}
.pj-opinie__znak.pj-anim {
opacity: 0;
transform: translate(-50%, 34px);
transition: opacity .9s var(--pj-ease), transform .9s var(--pj-ease);
}
.pj-opinie__znak.pj-anim.is-in { opacity: 1; transform: translate(-50%, 0); }
.pj-opinie__cudzyslow.pj-anim {
opacity: 0;
transform: translate3d(0, -46px, 0);
transition: opacity .9s var(--pj-ease), transform .9s var(--pj-ease);
}
.pj-opinie__cudzyslow.pj-anim.is-in { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (max-width: 1100px) {
.pj-opinie__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pj-opinie__znak { font-size: 10rem; }
}
@media (max-width: 760px) {
.pj-opinie__siatka { grid-template-columns: minmax(0, 1fr); }
.pj-opinie__znak { font-size: 7rem; top: 4%; }
.pj-opinie__cudzyslow { width: clamp(92px, 25vw, 148px); }
.pj-opinie__stol { display: none; }
}
.pj-galeria {
--pj-galeria-margines: clamp(24px, 5.4vw, 120px);
--pj-galeria-znak: clamp(54px, 5.6vw, 88px);
--pj-plytka-szer: clamp(300px, 34vw, 540px);
position: relative;
overflow: clip;
--pj-galeria-dol: clamp(4.5rem, 9vh, 7rem);
padding: clamp(4.5rem, 9vh, 7.5rem) 0 var(--pj-galeria-dol);
background: var(--pj-surface);
scroll-margin-top: calc(var(--pj-header-h) + var(--pj-header-gap) + 16px);
}
.pj-galeria__pas { position: relative; }
.pj-galeria__znak {
position: absolute;
bottom: 5px;
left: calc(var(--pj-galeria-margines) - 15px);
z-index: 0;
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: var(--wp--preset--font-family--karla);
font-size: clamp(2.8rem, 5.6vw, 5.6rem);
font-weight: 700;
line-height: .78;
letter-spacing: -.06em;
color: #F0ECE5;
font-kerning: none;
font-variant-ligatures: none;
pointer-events: none;
user-select: none;
}
.pj-galeria__gora {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: clamp(20px, 3vw, 48px);
padding-inline: var(--pj-galeria-margines) clamp(20px, 5vw, 96px);
margin-bottom: clamp(2.2rem, 4.5vh, 3.4rem);
}
.pj-galeria__intro { display: flex; flex-direction: column; max-width: 46ch; }
.pj-galeria__intro > * { margin-block-start: 0; }
.pj-galeria__eyebrow {
margin: 0 0 clamp(.7rem, 1.4vh, 1.1rem);
font-size: .8125rem;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--pj-accent);
}
.pj-galeria__title {
margin: 0;
max-width: 17ch;
font-size: clamp(1.95rem, 3.1vw, 2.9rem);
font-weight: 700;
line-height: 1.14;
letter-spacing: -.03em;
color: var(--pj-ink);
}
.pj-galeria__rule {
display: block;
width: clamp(78px, 8.6vw, 132px);
height: 1px;
margin: clamp(1.1rem, 2.4vh, 1.8rem) 0;
background: rgba(25, 23, 21, .26);
}
.pj-galeria__text {
margin: 0 0 clamp(1.6rem, 3vh, 2.4rem);
font-size: clamp(1rem, 1.12vw, 1.0625rem);
line-height: 1.72;
color: var(--pj-graphite);
}
.pj-galeria__cta {
display: block;
width: max-content;
margin: clamp(2rem, 4vh, 3.2rem) auto 0;
color: var(--pj-ink);
border-color: var(--pj-accent);
}
@media (hover: hover) {
.pj-galeria__cta:hover { color: #fff; }
}
.pj-galeria__ster { display: flex; gap: 10px; padding-bottom: .35rem; }
.pj-strzalka {
display: grid;
place-items: center;
width: clamp(46px, 4.4vw, 58px);
aspect-ratio: 1;
padding: 0;
border: 1px solid rgba(25, 23, 21, .22);
border-radius: 50%;
background: transparent;
color: var(--pj-ink);
cursor: pointer;
transform: translateZ(0);
transition: background-color .3s var(--pj-ease), color .3s var(--pj-ease),
border-color .3s var(--pj-ease), opacity .3s var(--pj-ease);
}
.pj-strzalka svg { width: 42%; height: 42%; }
@media (hover: hover) {
.pj-strzalka:hover:not([disabled]) {
background: var(--pj-accent);
border-color: var(--pj-accent);
color: #fff;
}
}
.pj-strzalka:focus-visible { outline: 2px solid var(--pj-accent); outline-offset: 3px; }
.pj-strzalka[disabled] { opacity: .3; cursor: default; }
.pj-galeria__tor {
list-style: none;
margin: 0;
padding: 5px 0 5px calc(var(--pj-galeria-margines) + var(--pj-galeria-znak));
display: flex;
gap: clamp(12px, 1.4vw, 22px);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scroll-padding-left: calc(var(--pj-galeria-margines) + var(--pj-galeria-znak));
scrollbar-width: none;
-ms-overflow-style: none;
}
.pj-galeria__tor::-webkit-scrollbar { display: none; }
@media (hover: none) {
.pj-galeria__pas::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: clamp(28px, 9vw, 56px);
z-index: 2;
background: linear-gradient(to right, rgba(250, 247, 242, 0), var(--pj-surface) 82%);
opacity: 1;
transition: opacity .3s var(--pj-ease);
pointer-events: none;
}
.pj-galeria__pas.jest-koniec::after { opacity: 0; }
}
.pj-galeria__tor > li { flex: none; scroll-snap-align: start; }
.pj-galeria__tor > li:last-child { padding-right: var(--pj-galeria-margines); }
.pj-plytka {
--pj-plytka-radius: 6px;
--pj-plytka-odsun: 3px;
position: relative;
display: block;
width: var(--pj-plytka-szer);
text-decoration: none;
color: inherit;
transform: translateZ(0);
}
.pj-plytka::after {
content: "";
position: absolute;
inset: calc(-1 * var(--pj-plytka-odsun));
border: 1px solid var(--pj-accent);
border-radius: calc(var(--pj-plytka-radius) + var(--pj-plytka-odsun));
pointer-events: none;
}
.pj-plytka__foto {
position: relative;
display: block;
overflow: hidden;
border-radius: var(--pj-plytka-radius);
background: #DED8CF;
}
.pj-plytka__foto img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform .7s var(--pj-ease);
}
.pj-plytka__foto::before,
.pj-plytka__foto::after {
content: "";
position: absolute;
left: 0;
right: 0;
z-index: 1;
background: rgba(22, 20, 17, .38);
transition: transform .6s var(--pj-ease);
pointer-events: none;
}
.pj-plytka__foto::before { top: 0; bottom: 50%; }
.pj-plytka__foto::after { top: 50%; bottom: 0; }
.pj-plytka__opis {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
display: flex;
flex-direction: column;
padding: clamp(16px, 1.6vw, 24px);
background: linear-gradient(to top, rgba(18, 16, 13, .86) 8%, rgba(18, 16, 13, .34) 58%, transparent 100%);
border-radius: 0 0 var(--pj-plytka-radius) var(--pj-plytka-radius);
pointer-events: none;
}
.pj-plytka__nazwa {
font-size: clamp(1.05rem, 1.25vw, 1.24rem);
font-weight: 700;
letter-spacing: -.01em;
color: #F7F4EE;
transition: transform .5s var(--pj-ease);
}
.pj-plytka__akcja {
display: flex;
align-items: center;
gap: .5em;
margin-top: .35em;
font-size: .8125rem;
font-weight: 500;
letter-spacing: .06em;
text-transform: uppercase;
color: #E9C9C5;
opacity: 0;
transform: translate3d(0, 10px, 0);
transition: opacity .45s var(--pj-ease), transform .45s var(--pj-ease);
}
.pj-plytka__akcja svg { width: 1.15em; height: 1.15em; }
@media (hover: hover) {
.pj-plytka:hover .pj-plytka__foto::before { transform: translateY(-100%); }
.pj-plytka:hover .pj-plytka__foto::after { transform: translateY(100%); }
.pj-plytka:hover .pj-plytka__foto img { transform: scale(1.06); }
.pj-plytka:hover .pj-plytka__nazwa { transform: translate3d(0, -2px, 0); }
.pj-plytka:hover .pj-plytka__akcja { opacity: 1; transform: translate3d(0, 0, 0); }
}
.pj-plytka:focus-visible { outline: 3px solid var(--pj-accent); outline-offset: 6px; border-radius: 10px; }
.pj-plytka:focus-visible .pj-plytka__akcja { opacity: 1; transform: translate3d(0, 0, 0); }
@media (hover: none) {
.pj-plytka__foto::before,
.pj-plytka__foto::after { background: rgba(22, 20, 17, .2); }
.pj-plytka__akcja { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
.pj-galeria__intro.pj-anim > * {
opacity: 0;
transform: translate3d(0, 22px, 0);
transition: opacity .7s var(--pj-ease), transform .7s var(--pj-ease);
}
.pj-galeria__intro.pj-anim.is-in > * { opacity: 1; transform: translate3d(0, 0, 0); }
.pj-galeria__intro.pj-anim > :nth-child(1) { transition-delay: .05s; }
.pj-galeria__intro.pj-anim > :nth-child(2) { transition-delay: .13s; }
.pj-galeria__intro.pj-anim > :nth-child(3) { transition-delay: .20s; }
.pj-galeria__intro.pj-anim > :nth-child(4) { transition-delay: .27s; }
.pj-galeria__znak.pj-anim {
opacity: 0;
transform: translate3d(0, 48px, 0) rotate(180deg);
transition: opacity .9s var(--pj-ease), transform .9s var(--pj-ease);
}
.pj-galeria__znak.pj-anim.is-in {
opacity: 1;
transform: translate3d(0, 0, 0) rotate(180deg);
}
.pj-galeria__tor.pj-anim > li .pj-plytka {
opacity: 0;
transform: translate3d(38px, 0, 0);
transition: opacity .7s var(--pj-ease), transform .7s var(--pj-ease);
}
.pj-galeria__tor.pj-anim > li.is-in .pj-plytka {
opacity: 1;
transform: translateZ(0);
}
}
@media (max-width: 760px) {
.pj-galeria__gora { grid-template-columns: minmax(0, 1fr); }
.pj-galeria__ster { display: none; }
.pj-galeria {
--pj-plytka-szer: min(82vw, 420px);
--pj-galeria-znak: 46px;
}
.pj-galeria__znak { font-size: 2.6rem; }
}
.pj-cta-koniec {
padding: clamp(2.5rem, 6vh, 5rem) clamp(16px, 3.4vw, 60px) clamp(4rem, 8vh, 6.5rem);
background: var(--pj-surface);
}
.pj-cta-panel {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
align-items: center;
gap: clamp(28px, 4vw, 72px);
box-sizing: border-box;
max-width: 1700px;
margin-inline: auto;
position: relative;
isolation: isolate;
padding: clamp(32px, 4.4vw, 72px) clamp(26px, 4vw, 66px);
background: #1B1916;
border-radius: clamp(20px, 2.2vw, 34px);
overflow: clip;
outline: 1px solid var(--pj-accent);
outline-offset: 4px;
}
.pj-cta-panel::before,
.pj-cta-panel::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.pj-cta-panel::before {
background-image:
linear-gradient(100deg, #17150F 22%, rgba(23, 21, 15, .86) 52%, rgba(23, 21, 15, .72) 100%),
image-set(
url(//meblepijet.pl/wp-content/themes/pijet/assets/img/cta/tlo-950.webp) 1x,
url(//meblepijet.pl/wp-content/themes/pijet/assets/img/cta/tlo-1700.webp) 2x);
background-size: cover, cover;
background-position: center, center;
}
.pj-cta-panel::after {
background:
radial-gradient(78% 130% at 96% -12%, rgba(217, 84, 75, .34) 0%, rgba(183, 47, 40, .16) 38%, transparent 72%),
radial-gradient(52% 90% at 4% 108%, rgba(183, 47, 40, .12) 0%, transparent 68%);
}
.pj-cta-panel__tresc > * { margin-block-start: 0; }
.pj-cta-panel__eyebrow {
margin: 0 0 clamp(.7rem, 1.4vh, 1.1rem);
font-size: .8125rem;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--pj-accent-light);
}
.pj-cta-panel__title {
margin: 0 0 clamp(1rem, 2vh, 1.4rem);
max-width: 15ch;
font-size: clamp(1.85rem, 3vw, 2.75rem);
font-weight: 700;
line-height: 1.14;
letter-spacing: -.03em;
color: #F7F4EE;
}
.pj-cta-panel__text {
margin: 0 0 clamp(1.8rem, 3.4vh, 2.6rem);
max-width: 46ch;
font-size: clamp(1rem, 1.12vw, 1.0625rem);
line-height: 1.72;
color: rgba(247, 244, 238, .72);
}
.pj-cta-panel__akcje {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(16px, 2vw, 32px);
}
.pj-cta-panel__cta { flex: none; }
.pj-cta-panel__tel {
display: inline-flex;
align-items: center;
gap: .7em;
text-decoration: none;
color: #F7F4EE;
transition: color .25s var(--pj-ease);
}
.pj-cta-panel__tel svg { width: 1.5em; height: 1.5em; flex: none; color: var(--pj-accent-light); }
.pj-cta-panel__tel span { display: flex; flex-direction: column; }
.pj-cta-panel__tel-etykieta {
font-size: .75rem;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(247, 244, 238, .5);
}
.pj-cta-panel__tel-numer {
font-size: clamp(1.05rem, 1.3vw, 1.24rem);
font-weight: 700;
letter-spacing: .01em;
}
@media (hover: hover) {
.pj-cta-panel__tel:hover { color: var(--pj-accent-light); }
}
.pj-cta-panel__kroki {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(16px, 2vw, 34px);
}
.pj-cta-panel__kroki > li {
position: relative;
display: flex;
flex-direction: column;
padding-top: clamp(2.1rem, 3.8vw, 3.4rem);
}
.pj-cta-panel__nr {
position: absolute;
top: 0;
left: -.04em;
z-index: 0;
font-size: clamp(5.2rem, 8.8vw, 9.4rem);
font-weight: 700;
line-height: .8;
letter-spacing: -.05em;
color: rgba(247, 244, 238, .075);
pointer-events: none;
user-select: none;
}
.pj-cta-panel__krok-tytul {
position: relative;
z-index: 1;
margin-bottom: .38em;
font-size: clamp(.98rem, 1.16vw, 1.1rem);
font-weight: 700;
line-height: 1.28;
color: #F7F4EE;
}
.pj-cta-panel__krok-opis {
position: relative;
z-index: 1;
font-size: clamp(.875rem, .98vw, .9375rem);
line-height: 1.6;
color: rgba(247, 244, 238, .62);
}
@media (prefers-reduced-motion: no-preference) {
.pj-cta-panel.pj-anim .pj-cta-panel__tresc > *,
.pj-cta-panel.pj-anim .pj-cta-panel__kroki > li {
opacity: 0;
transform: translate3d(0, 20px, 0);
transition: opacity .7s var(--pj-ease), transform .7s var(--pj-ease);
}
.pj-cta-panel.pj-anim.is-in .pj-cta-panel__tresc > *,
.pj-cta-panel.pj-anim.is-in .pj-cta-panel__kroki > li {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.pj-cta-panel.pj-anim .pj-cta-panel__tresc > :nth-child(1) { transition-delay: .05s; }
.pj-cta-panel.pj-anim .pj-cta-panel__tresc > :nth-child(2) { transition-delay: .12s; }
.pj-cta-panel.pj-anim .pj-cta-panel__tresc > :nth-child(3) { transition-delay: .19s; }
.pj-cta-panel.pj-anim .pj-cta-panel__kroki > :nth-child(1) { transition-delay: .24s; }
.pj-cta-panel.pj-anim .pj-cta-panel__kroki > :nth-child(2) { transition-delay: .31s; }
.pj-cta-panel.pj-anim .pj-cta-panel__kroki > :nth-child(3) { transition-delay: .38s; }
.pj-cta-panel.pj-anim .pj-cta-panel__tresc > .pj-cta-panel__akcje {
transition: opacity .7s var(--pj-ease) .26s, transform .7s var(--pj-ease) .26s;
}
.pj-cta-panel.pj-anim .pj-cta-panel__mebel-foto {
opacity: 0;
transform: translate3d(0, 18%, 0);
transition: opacity .8s var(--pj-ease) .2s, transform .95s var(--pj-ease) .2s;
}
.pj-cta-panel.pj-anim.is-in .pj-cta-panel__mebel-foto {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@media (max-width: 1000px) {
.pj-cta-panel { grid-template-columns: minmax(0, 1fr); }
.pj-cta-panel__title { max-width: 20ch; }
}
@media (max-width: 620px) {
.pj-cta-koniec { padding: clamp(2.25rem, 5.4vh, 4.5rem) clamp(14px, 3vw, 54px) clamp(3.6rem, 7.2vh, 5.85rem); }
.pj-cta-panel__kroki { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.pj-cta-panel__nr { left: auto; right: -.04em; top: .24em; font-size: clamp(4.2rem, 18.5vw, 6.2rem); }
.pj-cta-panel__akcje { gap: 18px; }
.pj-cta-panel__tel { order: -1; }
}
.pj-stopka {
padding: clamp(3.4rem, 6vw, 5rem) 0 calc(clamp(2.2rem, 3.4vw, 2.6rem) + env(safe-area-inset-bottom));
background: #1B1916;
color: rgba(247, 244, 238, .72);
}
.pj-stopka__inner {
max-width: 1700px;
margin-inline: auto;
padding-inline: clamp(20px, 3.4vw, 64px);
}
.pj-stopka__grid {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(30px, 3.2vw, 56px);
}
.pj-stopka__logo {
display: inline-flex;
align-items: center;
gap: clamp(9px, .9vw, 14px);
margin-bottom: clamp(1.1rem, 1.8vw, 1.6rem);
text-decoration: none;
}
.pj-stopka__logo img:first-child { width: auto; height: clamp(34px, 3.4vw, 46px); }
.pj-stopka__logo img:last-child { width: auto; height: clamp(21px, 2.1vw, 29px); }
.pj-stopka__opis {
margin: 0 0 clamp(1.4rem, 2.2vw, 1.9rem);
max-width: 42ch;
font-size: .9375rem;
line-height: 1.7;
color: rgba(247, 244, 238, .62);
}
.pj-stopka__social {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 9px;
}
.pj-stopka__social a {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border: 1px solid rgba(247, 244, 238, .2);
border-radius: 50%;
color: rgba(247, 244, 238, .78);
transform: translateZ(0);
transition: background-color .28s var(--pj-ease), border-color .28s var(--pj-ease), color .28s var(--pj-ease);
}
.pj-stopka__social svg { width: 18px; height: 18px; }
@media (hover: hover) {
.pj-stopka__social a:hover {
background: var(--pj-accent);
border-color: var(--pj-accent);
color: #fff;
}
}
.pj-stopka__naglowek {
margin: 0 0 clamp(1rem, 1.6vw, 1.4rem);
font-size: .8125rem;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: #F7F4EE;
}
.pj-stopka__kontakt {
font-style: normal;
font-size: .9375rem;
line-height: 1.7;
}
.pj-stopka__kontakt p { margin: 0 0 .7em; }
.pj-stopka__kontakt p:last-child { margin-bottom: 0; }
.pj-stopka__firma { color: rgba(247, 244, 238, .5); font-size: .84rem; letter-spacing: .01em; }
.pj-stopka__menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: .62em;
font-size: .9375rem;
}
.pj-stopka a { color: inherit; text-decoration: none; transition: color .22s var(--pj-ease); }
.pj-stopka__kontakt a,
.pj-stopka__menu a { position: relative; color: rgba(247, 244, 238, .72); }
.pj-stopka__kontakt a::after,
.pj-stopka__menu a::after { content: ""; position: absolute; inset: -4px 0; }
@media (hover: hover) {
.pj-stopka__kontakt a:hover,
.pj-stopka__menu a:hover,
.pj-stopka__autor a:hover { color: var(--pj-accent-light); }
}
.pj-stopka a:focus-visible { outline: 2px solid var(--pj-accent-light); outline-offset: 3px; }
.pj-stopka__dol {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 14px;
margin-top: clamp(2.4rem, 4vw, 3.5rem);
padding-top: clamp(1.4rem, 2vw, 2rem);
border-top: 1px solid rgba(247, 244, 238, .12);
font-size: .84rem;
color: rgba(247, 244, 238, .55);
}
.pj-stopka__dol p { margin: 0; }
.pj-stopka__autor { color: rgba(247, 244, 238, .5); }
.pj-stopka__autor a { color: rgba(247, 244, 238, .8); }
.pj-stopka__autor-opis { color: inherit; }
@media (max-width: 900px) {
.pj-stopka__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pj-stopka__marka { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
.pj-stopka__grid { grid-template-columns: minmax(0, 1fr); }
.pj-stopka__dol { justify-content: flex-start; }
}
@media (max-width: 560px) {
.pj-btn {
font-size: clamp(.78rem, 3.7vw, 1.0625rem);
padding-inline: 1.5em;
}
.pj-call { white-space: nowrap; }
}
@media (max-width: 1100px) and (prefers-reduced-motion: no-preference) {
.pj-onas__tresc.pj-anim > .pj-onas__lista,
.pj-onas__tresc.pj-anim.is-in > .pj-onas__lista {
opacity: 1;
transform: none;
transition: none;
}
.pj-onas__poz.pj-anim {
opacity: 0;
transform: translate3d(-38px, 0, 0);
transition: opacity .62s var(--pj-ease), transform .62s var(--pj-ease);
}
.pj-onas__poz.pj-anim.is-in { opacity: 1; transform: translate3d(0, 0, 0); }
}
.pj-hero-pod {
--pj-hero-pod-luz: clamp(4rem, 9vh, 7rem);
--pj-hero-pod-h: clamp(460px, 78vh, 940px);
--pj-hero-pod-dol: clamp(3.4rem, 8vh, 6rem);
position: relative;
display: flex;
align-items: flex-end;
min-height: var(--pj-hero-pod-h);
overflow: clip;
isolation: isolate;
background: #17150F;
}
.pj-hero-pod__tlo {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 56%;
}
.pj-hero-pod picture,
.pj-kafel picture { display: contents; }
.pj-hero-pod__scrim {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(96deg, rgba(20, 18, 14, .88) 0%, rgba(20, 18, 14, .66) 38%, rgba(20, 18, 14, .18) 72%, rgba(20, 18, 14, .06) 100%),
linear-gradient(180deg, rgba(20, 18, 14, .55) 0%, transparent 34%, rgba(20, 18, 14, .58) 100%);
pointer-events: none;
}
.pj-hero-pod__tresc {
position: relative;
z-index: 2;
width: 100%;
max-width: 1700px;
margin-inline: auto;
padding: calc(var(--pj-header-h) + var(--pj-header-gap) + var(--pj-hero-pod-luz)) clamp(24px, 5.4vw, 120px) var(--pj-hero-pod-dol);
}
.pj-hero-pod__tresc > * { margin-block-start: 0; }
.pj-hero-pod__eyebrow {
margin: 0 0 var(--pj-badge-odstep);
font-size: var(--pj-badge-rozmiar);
font-weight: var(--pj-badge-waga);
line-height: var(--pj-badge-wiersz);
letter-spacing: var(--pj-badge-tracking);
text-transform: uppercase;
color: var(--pj-accent-light);
}
.pj-hero-pod__title {
margin: 0 0 clamp(1rem, 2.2vh, 1.6rem);
font-size: var(--pj-h1-rozmiar);
font-weight: 700;
line-height: 1.02;
letter-spacing: var(--pj-h1-tracking);
color: #F7F4EE;
}
.pj-hero-pod__text {
margin: 0 0 clamp(1.8rem, 3.6vh, 2.6rem);
max-width: 52ch;
font-size: clamp(1rem, 1.16vw, 1.09rem);
line-height: 1.72;
color: rgba(247, 244, 238, .78);
}
.pj-hero-pod__cta { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
@keyframes pj-tytul {
0%   { opacity: 0; transform: translate3d(0, 32px, 0); filter: blur(10px); }
55%  { filter: blur(0); }
100% { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}
@keyframes pj-wynurz {
0%   { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(7px); }
60%  { filter: blur(0); }
100% { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}
@keyframes pj-odslon {
0%   { opacity: 0; transform: translateZ(0); }
100% { opacity: 1; transform: translateZ(0); }
}
.pj-hero-pod__eyebrow,
.pj-hero-pod__title,
.pj-hero-pod__text,
.pj-hero-pod__cta { opacity: 0; }
.pj-hero-pod__eyebrow {
animation: pj-wynurz .8s cubic-bezier(.215, .61, .355, 1) .12s both;
}
.pj-hero-pod__title {
animation: pj-tytul .95s cubic-bezier(.215, .61, .355, 1) .32s both;
}
.pj-hero-pod__text {
animation: pj-wynurz .85s cubic-bezier(.215, .61, .355, 1) .74s both;
}
.pj-hero-pod__cta {
animation: pj-odslon .7s cubic-bezier(.215, .61, .355, 1) 1.02s both;
}
@keyframes pj-kadr {
0%   { transform: scale(1.07); }
100% { transform: scale(1); }
}
.pj-hero-pod__tlo { animation: pj-kadr 1.6s cubic-bezier(.22, .61, .36, 1) both; }
}
@media (max-width: 640px) {
.pj-hero-pod {
--pj-hero-pod-luz: clamp(6.5rem, 20svh, 165px);
min-height: 420px;
}
}
@media (min-width: 641px) {
.pj-hero-pod { align-items: flex-start; }
.pj-hero-pod__tresc {
padding-top: max(
calc(var(--pj-header-h) + var(--pj-header-gap) + var(--pj-hero-pod-luz)),
calc(var(--pj-hero-pod-h) - var(--pj-hero-pod-dol) - 238px - 3.3vw)
);
}
}
.pj-uslugi {
padding: clamp(3.6rem, 8vh, 6.5rem) clamp(20px, 4vw, 72px) clamp(4rem, 9vh, 7rem);
background: var(--pj-surface);
}
.pj-uslugi__intro {
max-width: 760px;
margin: 0 auto clamp(2.4rem, 5vh, 3.6rem);
text-align: center;
}
.pj-uslugi__intro > * { margin-block-start: 0; }
.pj-uslugi__eyebrow {
margin: 0 0 clamp(.7rem, 1.4vh, 1.1rem);
font-size: .8125rem;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--pj-accent);
}
.pj-uslugi__title {
margin: 0 0 clamp(1rem, 2vh, 1.4rem);
font-size: clamp(1.9rem, 3.2vw, 2.9rem);
font-weight: 700;
line-height: 1.12;
letter-spacing: -.03em;
color: var(--pj-ink);
}
.pj-uslugi__text {
margin: 0;
font-size: clamp(.98rem, 1.1vw, 1.0625rem);
line-height: 1.72;
color: var(--pj-graphite);
}
.pj-uslugi__siatka {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: clamp(10px, 1vw, 16px);
max-width: 1560px;
margin-inline: auto;
}
.pj-kafel--a     { grid-column: span 6; }
.pj-kafel--b     { grid-column: span 6; }
.pj-kafel--pas   { grid-column: span 8; min-height: clamp(255px, 23.5vw, 368px); }
.pj-kafel--haslo { grid-column: span 4; min-height: clamp(255px, 23.5vw, 368px); }
.pj-kafel--c     { grid-column: span 6; }
.pj-kafel--d     { grid-column: span 6; }
.pj-kafel {
position: relative;
display: flex;
align-items: flex-end;
min-height: clamp(285px, 26vw, 405px);
overflow: hidden;
border-radius: 6px;
background: #1B1916;
text-decoration: none;
color: inherit;
isolation: isolate;
transform: translateZ(0);
}
.pj-kafel__foto {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .8s var(--pj-ease);
}
.pj-kafel::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(96deg, rgba(20, 18, 14, .93) 0%, rgba(20, 18, 14, .78) 34%, rgba(20, 18, 14, .3) 66%, rgba(20, 18, 14, .12) 100%),
linear-gradient(180deg, rgba(20, 18, 14, .34) 0%, transparent 46%);
transition: opacity .5s var(--pj-ease);
pointer-events: none;
}
.pj-kafel__tresc {
display: flex;
flex-direction: column;
max-width: 34ch;
padding: clamp(20px, 2.2vw, 34px);
}
.pj-kafel__nr {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: clamp(.7rem, 1.6vh, 1.1rem);
font-size: .78rem;
font-weight: 600;
letter-spacing: .16em;
color: rgba(247, 244, 238, .6);
}
.pj-kafel__nr::after {
content: "";
width: 34px;
height: 1px;
background: rgba(247, 244, 238, .34);
transition: width .45s var(--pj-ease);
}
.pj-kafel__nazwa {
margin-bottom: clamp(.5rem, 1.2vh, .8rem);
font-size: clamp(1.24rem, 1.8vw, 1.72rem);
font-weight: 700;
line-height: 1.16;
letter-spacing: -.02em;
color: #F7F4EE;
}
.pj-kafel__opis {
margin-bottom: clamp(1rem, 2vh, 1.5rem);
font-size: clamp(.875rem, .98vw, .9375rem);
line-height: 1.62;
color: rgba(247, 244, 238, .72);
}
.pj-kafel__akcja {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: .6em;
margin-top: auto;
padding: .6em 1.15em;
font-size: .8125rem;
font-weight: 600;
letter-spacing: .06em;
color: #F7F4EE;
background: rgba(247, 244, 238, .12);
border: 1px solid rgba(247, 244, 238, .34);
border-radius: 8px;
transform: translateZ(0);
transition: background-color .3s var(--pj-ease), border-color .3s var(--pj-ease), color .3s var(--pj-ease);
}
.pj-kafel__akcja svg { width: 1.05em; height: 1.05em; transition: transform .35s var(--pj-ease); }
@media (hover: hover) {
.pj-kafel:hover .pj-kafel__foto { transform: scale(1.05); }
.pj-kafel:hover::after { opacity: .82; }
.pj-kafel:hover .pj-kafel__nr::after { width: 58px; background: var(--pj-accent-light); }
.pj-kafel:hover .pj-kafel__akcja {
background: var(--pj-accent);
border-color: var(--pj-accent);
color: #fff;
}
.pj-kafel:hover .pj-kafel__akcja svg { transform: translateX(4px); }
}
.pj-kafel:focus-visible { outline: 3px solid var(--pj-accent); outline-offset: 4px; }
.pj-kafel--haslo {
align-items: flex-end;
justify-content: flex-start;
background: #FFFDFA;
border: 1px solid rgba(25, 23, 21, .09);
}
.pj-kafel--haslo::after { display: none; }
.pj-kafel--haslo::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-image: image-set(
url(//meblepijet.pl/wp-content/themes/pijet/assets/img/oferta-lista/cien-520.webp) 1x,
url(//meblepijet.pl/wp-content/themes/pijet/assets/img/oferta-lista/cien-1000.webp) 2x);
background-size: cover;
background-position: left top;
opacity: .62;
pointer-events: none;
}
.pj-kafel--haslo p {
position: relative;
z-index: 1;
margin: 0;
padding: clamp(20px, 2.2vw, 34px);
font-size: .78rem;
font-weight: 600;
line-height: 2;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--pj-muted);
}
.pj-uslugi__stopka {
display: flex;
justify-content: center;
max-width: 1560px;
margin: clamp(2.6rem, 5vh, 4rem) auto 0;
}
.pj-uslugi__cta {
color: var(--pj-ink);
border-color: var(--pj-accent);
}
@media (hover: hover) {
.pj-uslugi__cta:hover { color: #fff; }
}
@media (prefers-reduced-motion: no-preference) {
.pj-uslugi__siatka.pj-anim > * {
opacity: 0;
transform: translate3d(0, 26px, 0);
transition: opacity .7s var(--pj-ease), transform .7s var(--pj-ease);
}
.pj-uslugi__siatka.pj-anim > .is-in { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (max-width: 900px) {
.pj-uslugi__siatka { grid-template-columns: minmax(0, 1fr); }
.pj-kafel--a, .pj-kafel--b, .pj-kafel--pas,
.pj-kafel--haslo, .pj-kafel--c, .pj-kafel--d { grid-column: 1 / -1; }
.pj-kafel { min-height: 260px; }
.pj-kafel--haslo { min-height: 0; }
.pj-kafel__tresc { max-width: none; }
}
.pj-cta-panel--mebel { align-items: center; }
.pj-cta-panel--mebel::before {
background-image:
linear-gradient(100deg, #17150F 22%, rgba(23, 21, 15, .86) 52%, rgba(23, 21, 15, .72) 100%),
image-set(
url(//meblepijet.pl/wp-content/themes/pijet/assets/img/cta/tlo-galeria-950.webp) 1x,
url(//meblepijet.pl/wp-content/themes/pijet/assets/img/cta/tlo-galeria-1700.webp) 2x);
}
.pj-cta-panel__mebel-foto {
justify-self: end;
width: 100%;
max-width: 520px;
height: auto;
}
@media (max-width: 1000px) {
.pj-cta-panel__mebel-foto { justify-self: center; max-width: 420px; }
}
.pj-duo { padding: clamp(3.6rem, 8vh, 6.5rem) 0; background: var(--pj-surface); }
.pj-duo__wrap {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, .84fr);
align-items: center;
gap: clamp(28px, 5vw, 84px);
max-width: 1400px;
margin-inline: auto;
padding-inline: clamp(24px, 5vw, 96px);
}
.pj-duo__tresc > * { margin-block-start: 0; }
.pj-duo__title {
margin: 0 0 clamp(1rem, 2vh, 1.5rem);
font-size: clamp(1.7rem, 2.7vw, 2.5rem);
font-weight: 700;
line-height: 1.16;
letter-spacing: -.03em;
color: var(--pj-ink);
}
.pj-duo__podtytul {
margin: clamp(1.6rem, 3vh, 2.2rem) 0 .7rem;
font-size: clamp(1.05rem, 1.3vw, 1.24rem);
font-weight: 700;
letter-spacing: -.01em;
color: var(--pj-ink);
}
.pj-duo__tresc p {
margin: 0 0 1rem;
font-size: clamp(.98rem, 1.1vw, 1.0625rem);
line-height: 1.75;
color: var(--pj-graphite);
}
.pj-duo__tresc p:last-child { margin-bottom: 0; }
.pj-duo__kadr { position: relative; }
.pj-duo__kadr img { display: block; width: 100%; height: auto; border-radius: 6px; }
.pj-duo__kadr--ramka img { position: relative; z-index: 1; }
.pj-duo__kadr--ramka::before {
content: "";
position: absolute;
inset: clamp(14px, 1.8vw, 26px) calc(-1 * clamp(14px, 1.8vw, 26px)) calc(-1 * clamp(14px, 1.8vw, 26px)) clamp(14px, 1.8vw, 26px);
border: 1px solid var(--pj-accent);
border-radius: 6px;
}
.pj-duo__kadr--pas img { position: relative; z-index: 1; }
.pj-duo__kadr--pas::before {
content: "";
position: absolute;
left: clamp(-18px, -1.2vw, -10px);
right: 34%;
bottom: clamp(-18px, -1.2vw, -10px);
height: clamp(58px, 7vw, 96px);
background: var(--pj-accent);
border-radius: 6px;
}
.pj-duo--ciemna { background: #1B1916; }
.pj-duo--ciemna .pj-duo__title,
.pj-duo--ciemna .pj-duo__podtytul { color: #F7F4EE; }
.pj-duo--ciemna .pj-duo__tresc p { color: rgba(247, 244, 238, .74); }
.pj-kroki {
padding: clamp(3.6rem, 8vh, 6.5rem) clamp(24px, 5vw, 96px);
background: #FFFDFA;
text-align: center;
}
.pj-kroki__title {
margin: 0 auto clamp(2.2rem, 4.5vh, 3.4rem);
max-width: 22ch;
font-size: clamp(1.7rem, 2.7vw, 2.5rem);
font-weight: 700;
line-height: 1.16;
letter-spacing: -.03em;
color: var(--pj-ink);
}
.pj-kroki__lista {
list-style: none;
margin: 0 auto;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(16px, 2vw, 32px);
max-width: 1300px;
}
.pj-kroki__lista > li {
position: relative;
padding: clamp(2.6rem, 4.4vw, 3.8rem) clamp(20px, 2vw, 30px) clamp(1.8rem, 3vw, 2.6rem);
background: var(--pj-surface);
border: 1px solid rgba(25, 23, 21, .07);
border-radius: 8px;
overflow: hidden;
}
.pj-kroki__nr {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
font-size: clamp(4.4rem, 7vw, 6.6rem);
font-weight: 700;
line-height: .92;
letter-spacing: -.05em;
color: rgba(25, 23, 21, .07);
pointer-events: none;
user-select: none;
}
.pj-kroki__lista h3 {
position: relative;
margin: 0 0 .6rem;
font-size: clamp(1.05rem, 1.3vw, 1.24rem);
font-weight: 700;
color: var(--pj-ink);
}
.pj-kroki__lista p {
position: relative;
margin: 0;
font-size: clamp(.9rem, 1vw, .97rem);
line-height: 1.68;
color: var(--pj-graphite);
}
.pj-rodzaje {
--pj-rodzaje-foto: image-set(
url(//meblepijet.pl/wp-content/themes/pijet/assets/img/kuchnie/tlo-1100.webp) 1x,
url(//meblepijet.pl/wp-content/themes/pijet/assets/img/kuchnie/tlo-1920.webp) 2x);
position: relative;
padding: clamp(4rem, 9vh, 7rem) clamp(24px, 5vw, 96px);
overflow: clip;
isolation: isolate;
background: #15130F;
}
.pj-rodzaje--szafy {
--pj-rodzaje-foto: image-set(
url(//meblepijet.pl/wp-content/themes/pijet/assets/img/szafy/tlo-1100.webp) 1x,
url(//meblepijet.pl/wp-content/themes/pijet/assets/img/szafy/tlo-1920.webp) 2x);
}
.pj-rodzaje--lazienki {
--pj-rodzaje-foto: image-set(
url(//meblepijet.pl/wp-content/themes/pijet/assets/img/lazienki/tlo-1100.webp) 1x,
url(//meblepijet.pl/wp-content/themes/pijet/assets/img/lazienki/tlo-1920.webp) 2x);
}
.pj-rodzaje--salon {
--pj-rodzaje-foto: image-set(
url(//meblepijet.pl/wp-content/themes/pijet/assets/img/salon/tlo-1100.webp) 1x,
url(//meblepijet.pl/wp-content/themes/pijet/assets/img/salon/tlo-1920.webp) 2x);
}
.pj-rodzaje--instytucje {
--pj-rodzaje-foto: image-set(
url(//meblepijet.pl/wp-content/themes/pijet/assets/img/instytucje/tlo-1100.webp) 1x,
url(//meblepijet.pl/wp-content/themes/pijet/assets/img/instytucje/tlo-1920.webp) 2x);
}
.pj-rodzaje__tlo {
position: absolute;
inset: 0;
z-index: -1;
background-image:
linear-gradient(180deg, rgba(19, 17, 13, .9) 0%, rgba(19, 17, 13, .78) 42%, rgba(19, 17, 13, .92) 100%),
var(--pj-rodzaje-foto);
background-size: cover, cover;
background-position: center, center;
background-attachment: scroll, fixed;
}
.pj-rodzaje__wrap { max-width: 1300px; margin-inline: auto; }
.pj-rodzaje__title {
margin: 0 0 clamp(1rem, 2vh, 1.4rem);
max-width: 20ch;
font-size: clamp(1.7rem, 2.7vw, 2.5rem);
font-weight: 700;
line-height: 1.16;
letter-spacing: -.03em;
color: #F7F4EE;
}
.pj-rodzaje__text {
margin: 0;
max-width: 62ch;
font-size: clamp(.98rem, 1.1vw, 1.0625rem);
line-height: 1.75;
color: rgba(247, 244, 238, .74);
}
.pj-rodzaje__galeria {
list-style: none;
margin: clamp(2.2rem, 4.5vh, 3.4rem) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(10px, 1.2vw, 18px);
position: relative;
left: 50%;
width: 85vw;
max-width: none;
transform: translateX(-50%);
}
.pj-rodzaje__galeria button {
display: block;
width: 100%;
padding: 0;
border: 0;
border-radius: 6px;
overflow: hidden;
background: none;
cursor: zoom-in;
transform: translateZ(0);
}
.pj-rodzaje__galeria img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: cover;
transition: transform .6s var(--pj-ease);
}
@media (hover: hover) {
.pj-rodzaje__galeria button:hover img { transform: scale(1.07); }
}
.pj-rodzaje__galeria button:focus-visible { outline: 3px solid var(--pj-accent); outline-offset: 3px; }
.pj-rodzaje__cta {
display: block;
width: max-content;
margin: clamp(2.2rem, 4.5vh, 3.4rem) auto 0;
}
.pj-atuty { padding: clamp(3.6rem, 8vh, 6.5rem) clamp(24px, 5vw, 96px); background: var(--pj-surface); }
.pj-atuty__wrap { max-width: 1400px; margin-inline: auto; }
.pj-atuty__title {
margin: 0 0 clamp(2rem, 4vh, 3rem);
max-width: 22ch;
font-size: clamp(1.7rem, 2.7vw, 2.5rem);
font-weight: 700;
line-height: 1.16;
letter-spacing: -.03em;
color: var(--pj-ink);
}
.pj-atuty__siatka {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(16px, 2vw, 30px);
}
.pj-atuty__siatka article {
position: relative;
padding: clamp(30px, 3vw, 44px) clamp(24px, 2.6vw, 38px) clamp(26px, 2.8vw, 40px);
background: #FFFDFA;
border: 1px solid rgba(25, 23, 21, .08);
border-radius: 8px;
box-shadow: 0 18px 40px rgba(25, 23, 21, .07), 0 2px 6px rgba(25, 23, 21, .04);
overflow: hidden;
transform: translateZ(0);
transition: transform .4s var(--pj-ease), box-shadow .4s var(--pj-ease);
}
.pj-atuty__siatka article::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(72% 90% at 92% -8%, rgba(183, 47, 40, .09) 0%, rgba(183, 47, 40, .03) 42%, transparent 74%);
pointer-events: none;
}
.pj-atuty__siatka article::after {
content: "";
position: absolute;
top: 0;
left: clamp(24px, 2.6vw, 38px);
width: 42px;
height: 3px;
background: var(--pj-accent);
border-radius: 0 0 3px 3px;
transition: width .45s var(--pj-ease);
}
@media (hover: hover) {
.pj-atuty__siatka article:hover {
transform: translate3d(0, -6px, 0);
box-shadow: 0 28px 56px rgba(25, 23, 21, .12), 0 3px 8px rgba(25, 23, 21, .05);
}
.pj-atuty__siatka article:hover::after { width: 88px; }
}
.pj-atuty__siatka h3 {
position: relative;
margin: 0 0 .8rem;
font-size: clamp(1.05rem, 1.3vw, 1.24rem);
font-weight: 700;
color: var(--pj-ink);
}
.pj-atuty__siatka p {
position: relative;
margin: 0;
font-size: clamp(.9rem, 1vw, .97rem);
line-height: 1.72;
color: var(--pj-graphite);
}
.pj-atuty__cta {
display: block;
width: max-content;
margin: clamp(2.2rem, 4.5vh, 3.4rem) auto 0;
color: var(--pj-ink);
border-color: var(--pj-accent);
}
@media (hover: hover) {
.pj-atuty__cta:hover { color: #fff; }
}
.pj-faq { padding: clamp(3.6rem, 8vh, 6.5rem) clamp(24px, 5vw, 96px) clamp(4.5rem, 10vh, 7.5rem); background: #FFFDFA; }
.pj-faq__title {
margin: 0 auto clamp(2rem, 4vh, 3rem);
max-width: 22ch;
font-size: clamp(1.7rem, 2.7vw, 2.5rem);
font-weight: 700;
line-height: 1.16;
letter-spacing: -.03em;
text-align: center;
color: var(--pj-ink);
}
.pj-faq__lista {
display: flex;
flex-direction: column;
gap: clamp(10px, 1.2vh, 14px);
max-width: 920px;
margin-inline: auto;
}
.pj-faq__lista details {
background: var(--pj-surface);
border: 1px solid rgba(25, 23, 21, .09);
border-radius: 8px;
transition: background-color .3s var(--pj-ease), border-color .3s var(--pj-ease), box-shadow .3s var(--pj-ease);
}
.pj-faq__lista details[open] {
background: #FFFDFA;
border-color: rgba(183, 47, 40, .26);
box-shadow: 0 12px 30px rgba(25, 23, 21, .06);
}
.pj-faq__lista summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: clamp(1rem, 2vh, 1.35rem) clamp(18px, 2vw, 28px);
font-size: clamp(1rem, 1.16vw, 1.1rem);
font-weight: 700;
line-height: 1.4;
color: var(--pj-ink);
cursor: pointer;
list-style: none;
}
.pj-faq__lista summary::-webkit-details-marker { display: none; }
.pj-faq__lista summary::after {
content: "";
flex: none;
width: 11px;
height: 11px;
border-right: 2px solid var(--pj-accent);
border-bottom: 2px solid var(--pj-accent);
transform: rotate(45deg) translateY(-2px);
transition: transform .3s var(--pj-ease);
}
.pj-faq__lista details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.pj-faq__lista details p {
margin: 0 clamp(18px, 2vw, 28px) clamp(1.1rem, 2.2vh, 1.5rem);
max-width: 76ch;
font-size: clamp(.94rem, 1.05vw, 1rem);
line-height: 1.75;
color: var(--pj-graphite);
}
@media (hover: hover) {
.pj-faq__lista summary:hover { color: var(--pj-accent); }
}
.pj-lupa {
position: fixed;
inset: 0;
z-index: 200;
display: grid;
place-items: center;
padding: clamp(16px, 4vw, 48px);
background: rgba(14, 12, 10, .92);
opacity: 0;
transition: opacity .28s var(--pj-ease);
}
.pj-lupa.is-open { opacity: 1; }
.pj-lupa[hidden] { display: none; }
.pj-lupa img {
max-width: min(1100px, 100%);
max-height: 86vh;
width: auto;
height: auto;
border-radius: 8px;
}
.pj-lupa__zamknij {
position: absolute;
top: clamp(12px, 2.4vw, 28px);
right: clamp(12px, 2.4vw, 28px);
width: 46px;
height: 46px;
padding: 0;
background: none;
border: 1px solid rgba(247, 244, 238, .3);
border-radius: 50%;
color: #F7F4EE;
cursor: pointer;
transition: background-color .25s var(--pj-ease), border-color .25s var(--pj-ease);
}
.pj-lupa__zamknij::before,
.pj-lupa__zamknij::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 2px;
background: currentColor;
}
.pj-lupa__zamknij::before { transform: translate(-50%, -50%) rotate(45deg); }
.pj-lupa__zamknij::after { transform: translate(-50%, -50%) rotate(-45deg); }
@media (hover: hover) {
.pj-lupa__zamknij:hover { background: var(--pj-accent); border-color: var(--pj-accent); }
}
@media (max-width: 1000px) {
.pj-duo__wrap { grid-template-columns: minmax(0, 1fr); }
.pj-duo__kadr { order: -1; }
.pj-kroki__lista { grid-template-columns: minmax(0, 1fr); }
.pj-atuty__siatka { grid-template-columns: minmax(0, 1fr); }
.pj-rodzaje__galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pj-rodzaje__galeria li:last-child { grid-column: 1 / -1; }
.pj-rodzaje__tlo { background-attachment: scroll, scroll; }
}
.pj-realizacje {
padding: clamp(4.5rem, 9vh, 7.5rem) clamp(20px, 4vw, 72px) clamp(5rem, 10vh, 8rem);
background: var(--pj-surface);
}
.pj-realizacje__wrap {
max-width: 1500px;
margin-inline: auto;
scroll-margin-top: calc(var(--pj-header-h) + var(--pj-header-gap) + 12px);
}
.pj-realizacje__gora {
max-width: 46rem;
margin: 0 auto clamp(2rem, 4vh, 2.8rem);
text-align: center;
}
.pj-realizacje__gora > * { margin-block-start: 0; }
.pj-realizacje__eyebrow {
margin: 0 0 clamp(.7rem, 1.4vh, 1.1rem);
font-size: .8125rem;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--pj-accent);
}
.pj-realizacje__title {
margin: 0;
font-size: clamp(1.95rem, 3.1vw, 2.9rem);
font-weight: 700;
line-height: 1.14;
letter-spacing: -.03em;
color: var(--pj-ink);
text-wrap: balance;
}
.pj-realizacje__text {
max-width: 52ch;
margin: clamp(1rem, 2vh, 1.4rem) auto 0;
font-size: clamp(1rem, 1.12vw, 1.0625rem);
line-height: 1.72;
color: var(--pj-graphite, #4A453F);
}
.pj-filtry {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 0 auto clamp(2.6rem, 5.4vh, 3.8rem);
}
.pj-filtr {
display: inline-flex;
align-items: baseline;
gap: .5em;
padding: .64em 1.15em;
font-family: var(--wp--preset--font-family--karla);
font-size: .9375rem;
font-weight: 600;
letter-spacing: .01em;
line-height: 1.2;
color: var(--pj-ink);
background: transparent;
border: 1px solid rgba(25, 23, 21, .2);
border-radius: 10px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: color .3s var(--pj-ease), background-color .3s var(--pj-ease), border-color .3s var(--pj-ease);
}
.pj-filtr__ile {
font-size: .8125rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: rgba(25, 23, 21, .5);
transition: color .3s var(--pj-ease);
}
.pj-filtr[aria-pressed="true"] {
color: #fff;
background: var(--pj-accent);
border-color: var(--pj-accent);
}
.pj-filtr[aria-pressed="true"] .pj-filtr__ile { color: rgba(255, 255, 255, .74); }
@media (hover: hover) {
.pj-filtr:hover { border-color: var(--pj-accent); }
.pj-filtr[aria-pressed="false"]:hover { color: var(--pj-accent); }
}
.pj-filtr:focus-visible { outline: 2px solid var(--pj-accent); outline-offset: 3px; }
.pj-realizacje__lista {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(2.4rem, 4.4vw, 3.6rem) clamp(22px, 2.6vw, 40px);
margin: 0;
padding: 0;
list-style: none;
}
.pj-realizacje__lista > li { min-width: 0; margin: 0; }
.pj-realizacje__lista > li[hidden] { display: none; }
.pj-real__kafel {
--pj-real-radius: 6px;
--pj-real-odsun: 3px;
display: block;
color: inherit;
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.pj-real__kadr {
position: relative;
display: block;
aspect-ratio: 4 / 3;
border-radius: var(--pj-real-radius);
background: #DED8CF var(--pj-real-tlo, none) center / cover no-repeat;
transform: translateZ(0);
}
.pj-real__kadr::after {
content: "";
position: absolute;
inset: calc(-1 * var(--pj-real-odsun));
border: 1px solid var(--pj-accent);
border-radius: calc(var(--pj-real-radius) + var(--pj-real-odsun));
pointer-events: none;
}
.pj-real__okno {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: var(--pj-real-radius);
background: rgba(24, 22, 19, .2);
}
.pj-real__okno img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
transition: transform .7s var(--pj-ease);
}
.pj-real__okno::before,
.pj-real__okno::after {
content: "";
position: absolute;
left: 0;
right: 0;
z-index: 1;
background: rgba(22, 20, 17, .3);
transition: transform .6s var(--pj-ease);
pointer-events: none;
}
.pj-real__okno::before { top: 0; bottom: 50%; }
.pj-real__okno::after { top: 50%; bottom: 0; }
.pj-real__opis {
display: flex;
flex-direction: column;
gap: .3rem;
padding: clamp(1.05rem, 1.6vw, 1.3rem) 2px 0;
}
.pj-real__tytul {
font-size: clamp(1.08rem, 1.3vw, 1.25rem);
font-weight: 700;
line-height: 1.3;
letter-spacing: -.01em;
color: var(--pj-ink);
transition: color .3s var(--pj-ease);
}
.pj-real__meta {
font-size: .9375rem;
color: var(--pj-graphite, #4A453F);
}
.pj-real__akcja {
display: inline-flex;
align-items: center;
gap: .5em;
margin-top: .35rem;
font-size: .8125rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--pj-accent);
}
.pj-real__akcja svg {
width: 1.15em;
height: 1.15em;
flex: 0 0 auto;
transition: transform .45s var(--pj-ease);
}
.pj-real__akcja--dotyk { display: none; }
@media (hover: none) and (pointer: coarse) {
.pj-real__akcja--klik { display: none; }
.pj-real__akcja--dotyk { display: inline-flex; }
}
@media (hover: hover) {
.pj-real__kafel:hover .pj-real__okno::before { transform: translateY(-100%); }
.pj-real__kafel:hover .pj-real__okno::after { transform: translateY(100%); }
.pj-real__kafel:hover .pj-real__okno img { transform: scale(1.04); }
.pj-real__kafel:hover .pj-real__tytul { color: var(--pj-accent); }
.pj-real__kafel:hover .pj-real__akcja svg { transform: translate3d(4px, 0, 0); }
}
@media (hover: none) {
.pj-real__okno::before,
.pj-real__okno::after { background: rgba(22, 20, 17, .12); }
}
.pj-real__kafel:focus-visible { outline: none; }
.pj-real__kafel:focus-visible .pj-real__kadr { outline: 3px solid var(--pj-accent); outline-offset: 7px; }
@media (prefers-reduced-motion: no-preference) {
.pj-realizacje__gora.pj-anim > * {
opacity: 0;
transform: translate3d(0, 22px, 0);
transition: opacity .7s var(--pj-ease), transform .7s var(--pj-ease);
}
.pj-realizacje__gora.pj-anim.is-in > * { opacity: 1; transform: translate3d(0, 0, 0); }
.pj-realizacje__gora.pj-anim > :nth-child(2) { transition-delay: .08s; }
.pj-realizacje__gora.pj-anim > :nth-child(3) { transition-delay: .16s; }
.pj-realizacje__lista > li { transition: opacity .6s var(--pj-ease); }
.pj-realizacje__lista.pj-anim > li { opacity: 0; }
.pj-realizacje__lista.pj-anim > li.is-in { opacity: 1; }
.pj-realizacje__lista > li.is-wraca,
.pj-realizacje__lista.pj-anim > li.is-wraca { opacity: 0; transition: none; }
}
@media (max-width: 1100px) {
.pj-realizacje__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.pj-realizacje__lista { grid-template-columns: minmax(0, 1fr); gap: 2.6rem; }
.pj-filtry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pj-filtr { justify-content: center; align-items: center; padding: .62em .7em; font-size: .8125rem; }
.pj-filtr:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 340px) {
.pj-filtr { padding-inline: .5em; font-size: .75rem; }
}
.pj-przeg {
position: fixed;
inset: 0;
z-index: 210;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto auto;
height: 100vh;
color: #F7F4EE;
background: #0F0D0B;
opacity: 0;
transition: opacity .28s var(--pj-ease);
pointer-events: auto;
user-select: none;
-webkit-user-select: none;
}
@supports (height: 100dvh) {
.pj-przeg { height: 100dvh; }
}
.pj-przeg[hidden] { display: none; }
.pj-przeg.is-open { opacity: 1; }
.pj-przeg__gora {
display: flex;
align-items: center;
gap: 16px;
padding: calc(env(safe-area-inset-top, 0px) + clamp(12px, 2vw, 22px)) clamp(14px, 3vw, 32px) clamp(10px, 1.6vw, 16px);
}
.pj-przeg__tytul {
flex: 1 1 auto;
min-width: 0;
margin: 0;
font-size: clamp(1rem, 1.4vw, 1.2rem);
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pj-przeg__licznik {
margin: 0;
font-size: .9375rem;
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: rgba(247, 244, 238, .72);
}
.pj-przeg__licznik--dol { display: none; }
.pj-przeg__przycisk {
position: relative;
display: inline-grid;
place-items: center;
flex: 0 0 auto;
width: 48px;
height: 48px;
padding: 0;
color: #F7F4EE;
background: rgba(14, 12, 10, .4);
border: 1px solid rgba(247, 244, 238, .3);
border-radius: 50%;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color .25s var(--pj-ease), border-color .25s var(--pj-ease);
}
.pj-przeg__przycisk svg { width: 22px; height: 22px; }
.pj-przeg__przycisk:focus-visible { outline: 2px solid var(--pj-accent-light); outline-offset: 3px; }
@media (hover: hover) {
.pj-przeg__przycisk:hover { background: var(--pj-accent); border-color: var(--pj-accent); }
}
.pj-przeg__zamknij::before,
.pj-przeg__zamknij::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 2px;
background: currentColor;
}
.pj-przeg__zamknij::before { transform: translate(-50%, -50%) rotate(45deg); }
.pj-przeg__zamknij::after { transform: translate(-50%, -50%) rotate(-45deg); }
.pj-przeg__scena {
position: relative;
display: grid;
grid-template: minmax(0, 1fr) / minmax(0, 1fr);
place-items: center;
min-height: 0;
padding: 0 clamp(76px, 7vw, 112px);
touch-action: pinch-zoom;
}
.pj-przeg__img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
border-radius: 6px;
transition: opacity .3s var(--pj-ease), transform .38s var(--pj-ease);
-webkit-user-drag: none;
}
.pj-przeg__img.is-laduje { opacity: 0; }
.pj-przeg__img.is-z-prawej { transform: translate3d(32px, 0, 0); }
.pj-przeg__img.is-z-lewej { transform: translate3d(-32px, 0, 0); }
.pj-przeg__strz {
position: absolute;
top: 50%;
width: 56px;
height: 56px;
margin-top: -28px;
}
.pj-przeg__strz--lewo { left: clamp(10px, 2.4vw, 32px); }
.pj-przeg__strz--prawo { right: clamp(10px, 2.4vw, 32px); }
.pj-przeg__dol {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
padding: 0 clamp(14px, 3vw, 32px) calc(env(safe-area-inset-bottom, 0px) + clamp(14px, 2.2vw, 24px));
}
.pj-przeg.is-jedno .pj-przeg__strz,
.pj-przeg.is-jedno .pj-przeg__licznik { display: none; }
.pj-przeg__status {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.pj-przeg__miniatury {
position: relative;
display: flex;
gap: 8px;
min-width: 0;
padding: clamp(10px, 1.6vw, 16px) clamp(14px, 3vw, 32px) 4px;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
touch-action: pan-x;
}
.pj-przeg__miniatury::-webkit-scrollbar { display: none; }
.pj-przeg.is-jedno .pj-przeg__miniatury { display: none; }
.pj-przeg__mini {
flex: 0 0 auto;
height: 64px;
padding: 0;
overflow: hidden;
background: #2A2622;
border: 0;
border-radius: 4px;
opacity: .5;
cursor: pointer;
outline: 2px solid transparent;
outline-offset: 2px;
-webkit-tap-highlight-color: transparent;
transition: opacity .25s var(--pj-ease), outline-color .25s var(--pj-ease);
}
.pj-przeg__mini:first-child { margin-left: auto; }
.pj-przeg__mini:last-child { margin-right: auto; }
.pj-przeg__mini img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
}
.pj-przeg__mini.is-aktywna { opacity: 1; outline-color: var(--pj-accent-light); }
@media (hover: hover) {
.pj-przeg__mini:hover { opacity: .9; }
}
.pj-przeg__mini:focus-visible { opacity: 1; outline-color: #F7F4EE; }
@media (max-width: 760px) {
.pj-przeg__miniatury { gap: 6px; padding: 10px 10px 0; }
.pj-przeg__mini { height: 50px; }
}
@media (max-width: 760px) {
.pj-przeg__scena { padding: 0 6px; }
.pj-przeg__strz {
position: static;
width: 54px;
height: 54px;
margin: 0;
}
.pj-przeg__dol {
justify-content: space-between;
padding-top: 12px;
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.6rem);
}
.pj-przeg__licznik--gora { display: none; }
.pj-przeg__licznik--dol { display: block; font-size: 1rem; }
}
.pj-kontakt {
position: relative;
overflow: clip;
padding: clamp(4.5rem, 9vh, 7rem) clamp(20px, 4vw, 72px) clamp(4.5rem, 9vh, 7rem);
background: var(--pj-surface);
}
.pj-kontakt__znak {
position: absolute;
top: clamp(3rem, 7vh, 5rem);
left: clamp(4px, 1.4vw, 24px);
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: clamp(3rem, 6vw, 6.2rem);
font-weight: 700;
line-height: .78;
letter-spacing: -.06em;
text-transform: uppercase;
color: #F0ECE5;
pointer-events: none;
user-select: none;
}
.pj-kontakt__wrap {
position: relative;
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
gap: clamp(32px, 5vw, 88px);
max-width: 1360px;
margin-inline: auto;
padding-left: clamp(0px, 4vw, 72px);
}
.pj-kontakt__title {
margin: 0 0 clamp(1.6rem, 3vh, 2.2rem);
font-size: clamp(1.5rem, 2vw, 1.85rem);
font-weight: 700;
letter-spacing: -.02em;
color: var(--pj-ink);
}
.pj-kontakt__lista {
display: grid;
gap: clamp(1.4rem, 2.6vh, 1.9rem);
margin: 0;
padding: 0;
list-style: none;
}
.pj-kontakt__lista li {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
gap: 18px;
align-items: start;
}
.pj-kontakt__ikona {
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: #EDE7DE;
color: var(--pj-ink);
}
.pj-kontakt__ikona svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.pj-kontakt__lista li > div { display: flex; flex-direction: column; gap: .3rem; padding-top: .35rem; }
.pj-kontakt__glowna {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.4;
color: var(--pj-ink);
text-decoration: none;
transition: color .25s var(--pj-ease);
}
a.pj-kontakt__glowna:focus-visible,
.pj-kontakt__link:focus-visible { outline: 2px solid var(--pj-accent); outline-offset: 3px; }
.pj-kontakt__opis { font-size: .9375rem; color: var(--pj-graphite, #4A453F); }
.pj-kontakt__link {
position: relative;
display: inline-flex;
align-items: center;
gap: .5em;
margin-top: .35rem;
font-size: .875rem;
font-weight: 600;
color: var(--pj-ink);
text-decoration: none;
}
.pj-kontakt__link::after { content: ""; position: absolute; inset: -10px 0; }
.pj-kontakt__link svg {
width: 1.1em;
height: 1.1em;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform .35s var(--pj-ease);
}
@media (hover: hover) {
a.pj-kontakt__glowna:hover,
.pj-kontakt__link:hover { color: var(--pj-accent); }
.pj-kontakt__link:hover svg { transform: translate3d(4px, 0, 0); }
}
.pj-kontakt__firma {
position: relative;
margin-top: clamp(2.4rem, 5vh, 3.4rem);
padding-top: clamp(1.4rem, 2.8vh, 1.9rem);
}
.pj-kontakt__firma::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 56px;
height: 1px;
background: rgba(25, 23, 21, .28);
}
.pj-kontakt__nazwa {
margin: 0 0 .45rem;
font-size: .9375rem;
font-weight: 700;
color: var(--pj-ink);
}
.pj-kontakt__nip {
margin: 0;
font-size: .8125rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--pj-graphite, #4A453F);
}
.pj-kontakt__godziny { margin-top: clamp(1.3rem, 2.6vh, 1.7rem); }
.pj-kontakt__godziny p {
margin: 0 0 .3rem;
font-size: .9375rem;
color: var(--pj-graphite, #4A453F);
}
.pj-kontakt__godziny .pj-kontakt__etykieta { margin-bottom: .45rem; font-weight: 700; color: var(--pj-ink); }
.pj-kontakt__formularz {
padding: clamp(24px, 3.4vw, 48px);
background: #F2EDE6;
border-radius: clamp(16px, 1.8vw, 24px);
}
.pj-kontakt .fluentform fieldset {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 16px;
}
.pj-kontakt .fluentform .ff-el-group { margin: 0; }
.pj-kontakt .fluentform .ff-el-group:has(textarea),
.pj-kontakt .fluentform .ff_submit_btn_wrapper { grid-column: 1 / -1; }
.pj-kontakt .fluentform .ff-el-input--label { margin: 0 0 .45rem; padding: 0; }
.pj-kontakt .fluentform .ff-el-input--label label {
font-size: .75rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--pj-graphite, #4A453F);
}
.pj-kontakt .fluentform .ff-el-is-required.asterisk-right label::after { color: var(--pj-accent); }
.pj-kontakt .fluentform .ff-el-form-control {
box-sizing: border-box;
width: 100%;
padding: .9em 1em;
font-family: var(--wp--preset--font-family--karla);
font-size: 1rem;
line-height: 1.4;
color: var(--pj-ink);
background: #FFFDF9;
border: 1px solid rgba(25, 23, 21, .16);
border-radius: 10px;
box-shadow: none;
transition: border-color .25s var(--pj-ease), box-shadow .25s var(--pj-ease);
}
.pj-kontakt .fluentform .ff-el-form-control::placeholder { color: rgba(25, 23, 21, .42); }
.pj-kontakt .fluentform .ff-el-form-control:focus {
outline: none;
border-color: var(--pj-accent);
box-shadow: 0 0 0 3px rgba(183, 47, 40, .14);
}
.pj-kontakt .fluentform textarea.ff-el-form-control { min-height: 150px; resize: vertical; }
.pj-kontakt .fluentform select.ff-el-form-control {
padding-right: 2.6em;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191715' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1em center;
background-size: 16px;
cursor: pointer;
}
.pj-kontakt .fluentform select.ff-el-form-control option { color: var(--pj-ink); background: #fff; }
.pj-kontakt .fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--pj-accent); }
.pj-kontakt .fluentform .error.text-danger,
.pj-kontakt .fluentform .ff-el-is-error .text-danger {
margin-top: .4rem;
font-size: .8125rem;
color: var(--pj-accent);
}
.pj-kontakt .fluentform .frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style) {
display: inline-flex;
align-items: center;
gap: .6em;
height: auto;
min-height: 0;
padding: .82em 1.9em;
font-family: var(--wp--preset--font-family--karla);
font-size: 1.0625rem;
font-weight: 500;
line-height: 1.2;
letter-spacing: .055em;
color: var(--pj-ink);
background: transparent;
border: 2px solid var(--pj-accent);
border-radius: 10px;
box-shadow: inset 0 0 0 0 var(--pj-accent);
opacity: 1;
cursor: pointer;
transition: color .5s ease-out, box-shadow .5s ease-out, transform .16s ease-out;
}
@media (hover: hover) {
.pj-kontakt .fluentform .frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style):hover {
color: #fff;
background: transparent;
border-color: var(--pj-accent);
box-shadow: inset 0 -100px 0 0 var(--pj-accent);
opacity: 1;
}
}
.pj-kontakt .fluentform .frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style):active {
color: #fff;
border-color: var(--pj-accent-dark);
box-shadow: inset 0 -100px 0 0 var(--pj-accent-dark);
transform: scale(.96);
}
.pj-kontakt .fluentform .frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style):focus-visible { outline: 2px solid var(--pj-accent); outline-offset: 3px; }
.pj-kontakt .fluentform .frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style):disabled { opacity: .6; cursor: default; }
.pj-kontakt .fluentform .ff-el-group:has(.ff-el-form-check) { grid-column: 1 / -1; }
.pj-kontakt .fluentform .ff-el-form-check label {
display: flex;
align-items: flex-start;
gap: .7em;
margin: 0;
cursor: pointer;
}
.pj-kontakt .fluentform .ff_tc_checkbox { flex: none; display: flex; padding-top: .2em; }
.pj-kontakt .fluentform .ff-el-form-check-input {
width: 18px;
height: 18px;
accent-color: var(--pj-accent);
cursor: pointer;
}
.pj-kontakt .fluentform .ff_t_c {
font-size: .8125rem;
line-height: 1.6;
color: var(--pj-graphite, #4A453F);
}
.pj-kontakt .fluentform .ff_t_c strong,
.pj-kontakt .fluentform .ff_t_c b { font-weight: 600; color: var(--pj-ink); }
.pj-kontakt .ff-message-success {
padding: 1.2rem 1.4rem;
font-size: 1rem;
color: var(--pj-ink);
background: #FFFDF9;
border: 1px solid rgba(25, 23, 21, .14);
border-left: 3px solid var(--pj-accent);
border-radius: 10px;
box-shadow: none;
}
.pj-dojazd { background: #EFEAE3; }
.pj-dojazd__mapa {
position: relative;
height: clamp(340px, 56vh, 560px);
overflow: hidden;
scroll-margin-top: calc(var(--pj-header-h) + var(--pj-header-gap));
background-color: #E4DED5;
background-image:
linear-gradient(118deg, transparent 47.6%, rgba(255, 253, 249, .75) 47.6%, rgba(255, 253, 249, .75) 49.4%, transparent 49.4%),
linear-gradient(24deg, transparent 61%, rgba(255, 253, 249, .6) 61%, rgba(255, 253, 249, .6) 62.2%, transparent 62.2%),
linear-gradient(163deg, transparent 30%, rgba(255, 253, 249, .5) 30%, rgba(255, 253, 249, .5) 30.8%, transparent 30.8%),
linear-gradient(rgba(25, 23, 21, .045) 1px, transparent 1px),
linear-gradient(90deg, rgba(25, 23, 21, .045) 1px, transparent 1px);
background-size: 100% 100%, 100% 100%, 100% 100%, 44px 44px, 44px 44px;
}
.pj-dojazd__mapa iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
@media (prefers-reduced-motion: no-preference) {
.pj-kontakt__dane.pj-anim > *,
.pj-kontakt__formularz.pj-anim > * {
opacity: 0;
transform: translate3d(0, 22px, 0);
transition: opacity .7s var(--pj-ease), transform .7s var(--pj-ease);
}
.pj-kontakt__dane.pj-anim.is-in > *,
.pj-kontakt__formularz.pj-anim.is-in > * { opacity: 1; transform: translate3d(0, 0, 0); }
.pj-kontakt__dane.pj-anim > :nth-child(2),
.pj-kontakt__formularz.pj-anim > :nth-child(2) { transition-delay: .1s; }
.pj-kontakt__dane.pj-anim > :nth-child(3) { transition-delay: .2s; }
}
@media (max-width: 1000px) {
.pj-kontakt__wrap { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
.pj-kontakt__znak { display: none; }
}
@media (max-width: 560px) {
.pj-kontakt .fluentform fieldset { grid-template-columns: minmax(0, 1fr); }
.pj-kontakt__formularz { padding: 22px 18px; }
}
.cky-consent-container,
.cky-modal,
.cky-btn-revisit-wrapper { font-family: var(--wp--preset--font-family--karla), system-ui, sans-serif !important; }
.cky-consent-container *,
.cky-modal * { font-family: inherit !important; }
.cky-consent-container .cky-consent-bar {
padding: 20px clamp(18px, 4vw, 48px) !important;
background: #1B1916 !important;
border: 0 !important;
border-top: 1px solid rgba(217, 84, 75, .35) !important;
box-shadow: 0 -12px 40px rgba(0, 0, 0, .28) !important;
}
.cky-consent-container .cky-title {
font-size: 1.05rem !important;
font-weight: 700 !important;
color: #F7F4EE !important;
}
.cky-consent-container .cky-notice-des,
.cky-consent-container .cky-notice-des * {
font-size: .9375rem !important;
line-height: 1.6 !important;
color: rgba(247, 244, 238, .78) !important;
}
.cky-consent-container .cky-notice-des a,
.cky-consent-container .cky-policy { color: var(--pj-accent-light) !important; }
.cky-consent-container .cky-banner-btn-close img { filter: invert(1) !important; }
.cky-btn {
padding: 11px 20px !important;
font-size: .9375rem !important;
font-weight: 600 !important;
letter-spacing: .03em !important;
border-radius: 10px !important;
transition: background-color .3s var(--pj-ease), color .3s var(--pj-ease), border-color .3s var(--pj-ease) !important;
}
.cky-consent-container .cky-btn-customize,
.cky-consent-container .cky-btn-reject {
color: #F7F4EE !important;
background: transparent !important;
border: 2px solid rgba(247, 244, 238, .35) !important;
}
.cky-btn-accept {
color: #fff !important;
background: var(--pj-accent) !important;
border: 2px solid var(--pj-accent) !important;
}
@media (hover: hover) {
.cky-consent-container .cky-btn-customize:hover,
.cky-consent-container .cky-btn-reject:hover { color: #fff !important; border-color: var(--pj-accent-light) !important; }
.cky-btn-accept:hover { background: var(--pj-accent-dark) !important; border-color: var(--pj-accent-dark) !important; }
}
.cky-btn:focus-visible { outline: 2px solid var(--pj-accent-light) !important; outline-offset: 3px !important; }
.cky-modal .cky-preference-center {
color: var(--pj-ink) !important;
background: var(--pj-surface) !important;
border-radius: 18px !important;
}
.cky-modal .cky-preference-title { font-weight: 700 !important; color: var(--pj-ink) !important; }
.cky-modal .cky-accordion-btn,
.cky-modal .cky-accordion-header-des,
.cky-modal .cky-preference-content-wrapper,
.cky-modal .cky-preference-content-wrapper * { color: var(--pj-ink) !important; }
.cky-modal .cky-always-active,
.cky-modal .cky-show-desc-btn,
.cky-modal .cky-link { color: var(--pj-accent) !important; }
.cky-modal .cky-switch input[type="checkbox"]:checked { background: var(--pj-accent) !important; }
.cky-modal .cky-footer-wrapper {
background: var(--pj-surface) !important;
border-top: 1px solid rgba(25, 23, 21, .12) !important;
}
.cky-modal .cky-btn-reject,
.cky-modal .cky-btn-preferences {
color: var(--pj-ink) !important;
background: transparent !important;
border: 2px solid rgba(25, 23, 21, .22) !important;
}
@media (hover: hover) {
.cky-modal .cky-btn-reject:hover,
.cky-modal .cky-btn-preferences:hover { color: var(--pj-accent) !important; border-color: var(--pj-accent) !important; }
}
.cky-btn-revisit-wrapper {
background: var(--pj-accent) !important;
box-shadow: 0 6px 18px rgba(0, 0, 0, .25) !important;
}