.opinie {
--gutter: clamp(1.25rem, 3vw, 3.5rem);
--odstep: clamp(0.9rem, 1.4vw, 1.5rem);
--ease: cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: hidden;
overflow: clip;
padding-block: var(--wp--preset--spacing--50);
color: var(--wp--preset--color--contrast);
}
.opinie__kontener {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: clamp(1.5rem, 4vw, 4.5rem);
width: min(100% - 2 * var(--gutter), 120rem);
margin-inline: auto;
} .opinie__bok {
display: flex;
align-items: flex-start;
gap: clamp(0.9rem, 1.4vw, 1.4rem);
}
.opinie__tytul {
margin: 0;
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: var(--wp--preset--font-family--heading);
font-size: clamp(3.5rem, 7.4vw, 8.5rem);
font-weight: 800;
line-height: 0.82;
letter-spacing: -0.03em;
text-transform: uppercase;
color: var(--wp--preset--color--contrast);
white-space: nowrap;
}
.opinie__litera { display: inline-block; }
.opinie__pion {
display: block;
width: 1px;
height: 38%;
margin-top: 0.4rem;
background: color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent);
transform-origin: center top;
} .opinie__karuzela {
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(1.5rem, 2.4vw, 2.25rem);
min-width: 0;
}
.opinie__tor {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 2 * var(--odstep)) / 3.2);
gap: var(--odstep);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
padding-block: 0.5rem 0.75rem; mask-image: linear-gradient(to right, #000 82%, transparent 100%);
cursor: grab;
outline-offset: 6px;
}
.opinie__tor::-webkit-scrollbar { display: none; }
.opinie__tor.is-ciagniety { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.opinie__tor.is-koniec { mask-image: none; }
.opinia {
position: relative;
display: flex;
flex-direction: column;
padding: clamp(1.4rem, 2vw, 2.1rem);
border: 1px solid var(--wp--preset--color--line);
border-radius: 4px;
background: color-mix(in srgb, var(--wp--preset--color--base) 55%, #fff);
scroll-snap-align: start;
transition: border-color 0.4s ease, box-shadow 0.5s var(--ease), translate 0.5s var(--ease);
}
.opinia__cudzyslow {
position: absolute;
top: clamp(1.3rem, 1.9vw, 2rem);
right: clamp(1.3rem, 1.9vw, 2rem);
width: clamp(1.9rem, 2.4vw, 2.5rem);
fill: color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent);
transition: fill 0.4s ease, rotate 0.6s var(--ease);
}
.opinia__gwiazdki {
display: flex;
gap: 0.2rem;
color: var(--wp--preset--color--accent);
}
.opinia__gwiazdki svg { width: 0.95rem; height: 0.95rem; fill: currentColor; }
.opinia__tresc {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--wiersze, 6);
line-clamp: var(--wiersze, 6);
overflow: hidden;
margin: clamp(1rem, 1.4vw, 1.4rem) 0 0.6rem;
font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
line-height: 1.6;
color: color-mix(in srgb, var(--wp--preset--color--contrast) 82%, transparent);
}
.opinia__wiecej {
align-self: flex-start;
min-height: 44px;
padding: 0;
border: 0;
background: none;
color: var(--wp--preset--color--contrast);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--wp--preset--color--contrast) 35%, transparent);
text-underline-offset: 0.45em;
cursor: pointer;
transition: text-decoration-color 0.3s ease, color 0.3s ease;
}
@media (hover: hover) {
.opinia__wiecej:hover { color: var(--wp--preset--color--accent); text-decoration-color: currentColor; }
}
.opinia__autor {
display: flex;
align-items: center;
gap: 0.85rem;
margin-top: auto;
padding-top: clamp(1rem, 1.4vw, 1.3rem);
border-top: 1px solid var(--wp--preset--color--line);
}
.opinia__inicjal {
display: grid;
place-items: center;
flex: none;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base);
font-family: var(--wp--preset--font-family--heading);
font-weight: 700;
}
.opinia__podpis { display: grid; gap: 0.1rem; line-height: 1.3; }
.opinia__podpis strong { font-size: 0.9375rem; font-weight: 600; }
.opinia__podpis span { font-size: 0.75rem; color: var(--wp--preset--color--muted); }
@media (hover: hover) {
.opinia:hover {
border-color: color-mix(in srgb, var(--wp--preset--color--accent) 45%, var(--wp--preset--color--line));
box-shadow: 0 18px 40px -22px rgba(30, 32, 26, 0.35);
translate: 0 -4px;
}
.opinia:hover .opinia__cudzyslow { fill: var(--wp--preset--color--accent); rotate: -8deg; }
}  .opinie__google { border-radius: 6px; padding-inline: 3.2rem; white-space: nowrap; }
.opinie__sterowanie {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center;
gap: clamp(1rem, 2vw, 2rem);
}
.opinie__pasek {
position: relative;
height: 1px;
background: var(--wp--preset--color--line);
overflow: hidden;
}
.opinie__postep {
position: absolute;
inset: 0 auto 0 0;
width: 100%;
background: var(--wp--preset--color--contrast);
transform-origin: left center;
transform: translateX(var(--przesuniecie, 0%)) scaleX(var(--szerokosc, 0.3));
transition: transform 0.45s var(--ease);
}
.opinie__licznik {
margin: 0;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.18em;
font-variant-numeric: tabular-nums;
}
.opinie__strzalki { display: flex; gap: 0.6rem; }
.opinie__strzalka {
width: 3.1rem;
height: 3.1rem;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent);
border-radius: 50%;
background: none;
color: var(--wp--preset--color--contrast);
font-size: 1.05rem;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}
.opinie__strzalka:disabled { opacity: 0.3; cursor: default; }
@media (hover: hover) {
.opinie__strzalka:not(:disabled):hover {
background: var(--wp--preset--color--contrast);
border-color: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base);
}
}  .opinie__pion,
.opinia,
.opinie__pasek,
.opinie__postep,
.opinie__strzalka {
will-change: transform, opacity;
backface-visibility: hidden;
}
.opinie__litera:nth-child(2) { --l: 1; }
.opinie__litera:nth-child(3) { --l: 2; }
.opinie__litera:nth-child(4) { --l: 3; }
.opinie__litera:nth-child(5) { --l: 4; }
.opinie__litera:nth-child(6) { --l: 5; } .js .opinie__litera {
opacity: 0;
transform: translate3d(0, -2.4em, 0);
filter: blur(16px);
transition: opacity 0.9s ease, transform 1.2s var(--ease), filter 1s ease;
transition-delay: calc(0.1s + var(--l, 0) * 0.07s);
}
.js .opinie__pion { transform: scaleY(0); transition: transform 1.4s var(--ease) 0.4s; }
.opinia { --k: 0; }
.opinia:nth-child(2) { --k: 1; }
.opinia:nth-child(3) { --k: 2; }
.opinia:nth-child(4) { --k: 3; }
.opinia:nth-child(n + 5) { --k: 4; } .js .opinia {
opacity: 0;
transform: scale(0.94);
transform-origin: left center;
clip-path: inset(0 0 0 35% round 4px);
filter: blur(10px);
transition:
opacity 0.9s ease,
transform 1.3s var(--ease),
clip-path 1.2s var(--ease),
filter 1s ease,
border-color 0.4s ease,
box-shadow 0.5s var(--ease),
translate 0.5s var(--ease);
transition-delay: calc(0.25s + var(--k) * 0.12s), calc(0.25s + var(--k) * 0.12s), calc(0.25s + var(--k) * 0.12s), calc(0.25s + var(--k) * 0.12s), 0s, 0s, 0s;
}
.js .opinie .opinia__gwiazdki svg {
opacity: 0;
transform: scale(0.3) rotate(-40deg);
transition: opacity 0.4s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
transition-delay: calc(0.75s + var(--k) * 0.12s + var(--g, 0) * 0.06s);
}
.opinia__gwiazdki svg:nth-child(2) { --g: 1; }
.opinia__gwiazdki svg:nth-child(3) { --g: 2; }
.opinia__gwiazdki svg:nth-child(4) { --g: 3; }
.opinia__gwiazdki svg:nth-child(5) { --g: 4; }
.js .opinie__sterowanie {
opacity: 0;
filter: blur(6px);
transition: opacity 0.9s ease 0.9s, filter 0.9s ease 0.9s;
}
.js .opinie__pasek { transform: scaleX(0); transform-origin: left center; transition: transform 1.4s var(--ease) 1s; }
.opinie.is-aktywna .opinie__litera { opacity: 1; transform: none; filter: none; }
.opinie.is-aktywna .opinie__pion { transform: none; }
.opinie.is-aktywna .opinia { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0 round 4px); }
.opinie.is-aktywna .opinia__gwiazdki svg { opacity: 1; transform: none; }
.opinie.is-aktywna .opinie__sterowanie { opacity: 1; filter: none; }
.opinie.is-aktywna .opinie__pasek { transform: none; } @media (max-width: 1100px) {
.opinie__tor { grid-auto-columns: calc((100% - var(--odstep)) / 2.15); }
}
@media (max-width: 720px) {
.opinie__kontener { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; } .opinie__bok { align-items: center; }
.opinie__tytul { writing-mode: horizontal-tb; transform: none; font-size: clamp(3rem, 16vw, 4.5rem); }
.opinie__pion { width: auto; height: 1px; flex: 1; margin-top: 0; transform-origin: left center; }
.js .opinie__pion { transform: scaleX(0); }
.js .opinie__litera { transform: translate3d(0, 0.9em, 0); }
.opinie__tor { grid-auto-columns: 86%; mask-image: none; }
.opinie__sterowanie { grid-template-columns: minmax(0, 1fr) auto; row-gap: 1.25rem; }
.opinie__google { grid-column: 1 / -1; width: 100%; }
.opinia { --wiersze: 7; }
.opinie__strzalki { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.opinie *,
.opinie *::before,
.opinie *::after { transition-duration: 0.001ms !important; transition-delay: 0s !important; }
.opinie__tor { scroll-behavior: auto; }
} .opinia-okno {
width: min(100% - 2rem, 42rem);
max-height: min(100dvh - 2rem, 44rem);
padding: 0;
border: 0;
border-radius: 6px;
background: color-mix(in srgb, var(--wp--preset--color--base) 55%, #fff);
color: var(--wp--preset--color--contrast);
box-shadow: 0 40px 90px -30px rgba(10, 12, 9, 0.6);
overflow: auto;
}
.opinia-okno::backdrop {
background: color-mix(in srgb, #0d110c 70%, transparent);
backdrop-filter: blur(4px);
}
.opinia-okno[open] { animation: opinia-okno 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes opinia-okno {
from { opacity: 0; transform: translateY(24px) scale(0.98); filter: blur(6px); }
to   { opacity: 1; transform: none; filter: none; }
}
.opinia-okno__panel {
position: relative;
padding: clamp(1.75rem, 4vw, 3rem);
padding-bottom: calc(clamp(1.75rem, 4vw, 3rem) + env(safe-area-inset-bottom, 0px));
}
.opinia-okno .opinia__gwiazdki { color: var(--wp--preset--color--accent); }
.opinia-okno__tresc {
margin: 1.25rem 0 1.5rem;
font-size: clamp(1rem, 1.3vw, 1.125rem);
line-height: 1.7;
}
.opinia-okno__autor {
margin: 0;
padding-top: 1.1rem;
border-top: 1px solid var(--wp--preset--color--line);
font-weight: 600;
}
.opinia-okno__zamknij {
position: absolute;
top: 0.9rem;
right: 0.9rem;
width: 44px;
height: 44px;
border: 1px solid var(--wp--preset--color--line);
border-radius: 50%;
background: none;
cursor: pointer;
}
.opinia-okno__zamknij span::before,
.opinia-okno__zamknij span::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 16px;
height: 1.5px;
background: var(--wp--preset--color--contrast);
transform: translate(-50%, -50%) rotate(45deg);
}
.opinia-okno__zamknij span::after { transform: translate(-50%, -50%) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
.opinia-okno[open] { animation: none; }
}