/* ========================================================================= Kokówka — salon fryzjerski, Kraków Ruczaj Paleta: czerń i biel z logo + ciepły beton/greige z płytek w salonie. Tokeny na górze — reszta arkusza korzysta wyłącznie z nich. ========================================================================= */ :root { /* --- tusz i papier (nigdy czyste #000 / #fff) --- */ --ink: #111113; --ink-2: #191A1D; --ink-3: #232428; --paper: #FBFAF8; --paper-2: #F3F1ED; --paper-3: #E7E4DD; /* --- akcent: beton / greige ze ścian i płytek salonu --- */ --stone: #8A8377; --stone-deep: #5E594F; --stone-lite: #B6AFA3; /* --- tekst --- */ --tx-dark: #111113; --tx-dark-soft: #54524D; --tx-dark-faint: #8B887F; --tx-light: #F5F3EF; --tx-light-soft: #A9A69E; --tx-light-faint: #75726B; /* --- linie i cienie (barwione betonem, nie czystą czernią) --- */ --line: rgba(17, 17, 19, .12); --line-soft: rgba(17, 17, 19, .07); --line-light: rgba(245, 243, 239, .16); --line-light-soft: rgba(245, 243, 239, .08); --shadow-sm: 0 4px 18px -8px rgba(51, 47, 40, .30); --shadow-md: 0 24px 60px -30px rgba(51, 47, 40, .45); --shadow-lg: 0 44px 96px -34px rgba(51, 47, 40, .55); /* --- typografia --- Syne: display geometryczny, charakterny — cała hierarchia nagłówków i liczb. Inter: neutralny grotesk — tekst; nie konkuruje z Syne kształtami. Cormorant: WYŁĄCZNIE lockup logo, żeby wordmark w nawigacji i stopce odpowiadał szyldowi salonu. Nigdzie indziej go nie używamy. */ --serif: "Syne", system-ui, -apple-system, "Segoe UI", sans-serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --wordmark: "Cormorant Garamond", Georgia, "Times New Roman", serif; /* --- ruch --- */ --ease: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.4, .5, 1); --t-fast: .2s; --t-base: .35s; /* --- układ --- */ --pad: clamp(1.15rem, 5vw, 5.5rem); --maxw: 1280px; --sec: clamp(4.5rem, 10vw, 9rem); --r-sm: 8px; --r-md: 16px; --r-lg: 26px; --nav-h: 80px; } /* ---------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--tx-dark); font-family: var(--sans); font-weight: 300; font-size: clamp(1rem, .96rem + .2vw, 1.06rem); line-height: 1.68; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img, svg, iframe { display: block; max-width: 100%; } img { height: auto; } /* Syne jest szerszy i mocniejszy niż klasyczna antykwa — stąd waga 500, ujemny tracking i ciaśniejsza interlinia w nagłówkach. */ h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; margin: 0; text-wrap: balance; line-height: 1.06; letter-spacing: -.02em; } p { margin: 0 0 1.1em; } a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .22em; } button { font: inherit; color: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } ::selection { background: var(--ink); color: var(--paper); } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } /* kotwice nie mogą chować nagłówka pod przyklejonym navem */ section[id] { scroll-margin-top: calc(var(--nav-h) + 12px); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ink); color: var(--tx-light); padding: .8rem 1.2rem; border-radius: 0 0 var(--r-sm) 0; } .skip:focus { left: 0; } :focus-visible { outline: 2px solid var(--stone); outline-offset: 3px; } /* --------------------------------------------------------------- ikony Sprite z Remix Icon leży na starcie . Ikona skaluje się fontem rodzica i dziedziczy jego kolor, więc wystarczy sam : JS/GSAP nie wstał — wracamy do pełnego kadru */ html.hero-fallback .hero:not(.is-ready) { --ap: 160vmax; } html.hero-fallback .hero:not(.is-ready) .hero__window { opacity: 1; transition: opacity .4s var(--ease); } .hero__photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(var(--pz, 1)) translateZ(0); transform-origin: var(--apx, 50%) var(--apy, 46%); filter: grayscale(1) contrast(1.06) brightness(.86); } /* sylwetka z logo — widoczna tylko w trakcie otwierania przysłony */ .hero__mark { position: absolute; left: var(--apx, 50%); top: var(--apy, 46%); width: auto; height: 30vmin; transform: translate(-50%, -50%) scale(var(--ms, 1)); fill: var(--paper); opacity: var(--mo, 0); pointer-events: none; } .hero__scrim { position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, rgba(17,17,19,.72) 0%, rgba(17,17,19,.18) 34%, rgba(17,17,19,.55) 74%, rgba(17,17,19,.9) 100%), radial-gradient(120% 80% at 50% 40%, transparent 30%, rgba(17,17,19,.55) 100%); } .hero__inner { position: relative; z-index: 5; width: 100%; max-width: var(--maxw); margin-inline: auto; } .hero__eyebrow { margin-bottom: clamp(1rem, 2.4vh, 1.6rem); } .hero__title { font-size: clamp(2.3rem, 2.8vw + 4.6vh, 5.3rem); color: var(--tx-light); letter-spacing: -.038em; line-height: 1.03; margin: 0 0 clamp(1.1rem, 2.8vh, 2rem); max-width: 15ch; } .hero__lead { color: var(--tx-light-soft); max-width: 50ch; font-size: clamp(.98rem, .9rem + .4vw, 1.14rem); margin-bottom: clamp(1.6rem, 3.4vh, 2.4rem); } .hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: clamp(2rem, 5vh, 3.4rem); } .hero__actions .btn--solid { background: var(--paper); color: var(--ink); } @media (hover: hover) and (pointer: fine) { .hero__actions .btn--solid:hover { background: var(--stone-lite); color: var(--ink); } } .hero__stats { display: flex; flex-wrap: wrap; gap: clamp(1.4rem, 5vw, 3.4rem); } .hero__stats li { display: flex; flex-direction: column; gap: .1rem; } .hero__stats strong { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 1.2rem + 2vw, 2.9rem); color: var(--tx-light); line-height: 1; } .hero__stats span { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--tx-light-faint); } .hero__cue { position: absolute; left: 50%; bottom: calc(1.4rem + var(--hero-chrome)); transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: .5rem; font-size: .6rem; letter-spacing: .34em; text-transform: uppercase; color: var(--tx-light-faint); } .hero__cue span { display: block; width: 1px; height: 40px; background: linear-gradient(var(--tx-light-faint), transparent); } /* poniżej 1024 px treść hero siada przy dolnej krawędzi — wskaźnik „przewiń” wchodziłby wtedy na liczby */ @media (max-width: 1023px) { .hero__cue { display: none; } } /* na szerokim ekranie treść hero trzyma się lewej połowy — przysłona pracuje po prawej */ @media (min-width: 1024px) { .hero__title { max-width: 12ch; } .hero__lead { max-width: 42ch; } .hero__stats { max-width: 46ch; } } /* na telefonie nie ma miejsca obok — przysłona bierze górną trzecią, treść siada przy dolnej krawędzi. Cała skala jest tu celowo o klasę niżej niż na desktopie: hero MUSI zmieścić się w jednym kadrze (inaczej przypięcie ucina dół), a tytuł liczony z vh potrafił urosnąć do trzech ciasnych wierszy wchodzących pod przysłonę. */ @media (max-width: 1023px) { /* na iPhonie treść siadała tuż nad dolnym paskiem przeglądarki — przyciski wchodziły optycznie na liczby. Większy dolny oddech podnosi cały blok. */ .hero { align-items: flex-end; padding-top: calc(var(--nav-h) + 6vh); padding-bottom: calc(clamp(4.6rem, 12vh, 7.5rem) + var(--hero-chrome)); } .hero__ambient { opacity: .18; } /* Syne jest wyraźnie szerszy od antykwy — stąd dodatkowe zejście ze skali. */ .hero__title { font-size: clamp(1.7rem, 1.05rem + 3.1vw, 2.5rem); letter-spacing: -.028em; line-height: 1.08; max-width: 17ch; margin-bottom: clamp(.9rem, 2.2vh, 1.35rem); } .hero__lead { font-size: clamp(.92rem, .86rem + .25vw, 1.02rem); line-height: 1.6; max-width: 42ch; margin-bottom: clamp(1.1rem, 2.4vh, 1.6rem); } /* pełny eyebrow łamał się na dwa wiersze i rozbijał górę kadru */ .hero__eyebrow { font-size: .6rem; letter-spacing: .2em; gap: .7em; margin-bottom: clamp(.6rem, 1.4vh, 1rem); } .hero__eyebrow::before { width: 1.5rem; } .hero__actions { gap: .55rem; margin-bottom: clamp(3rem, 7vh, 4.2rem); } /* trzy liczby w jednym rzędzie — flex-wrap dawał układ 2 + 1 */ .hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 1.6rem); max-width: 32rem; } .hero__stats strong { font-size: clamp(1.2rem, 4.4vw, 1.75rem); } .hero__stats span { font-size: .56rem; letter-spacing: .13em; line-height: 1.3; } .hero__mark { height: 17vmin; } .hero__title em .wv { bottom: -.1em; height: .22em; } .hero__title em .wv path { stroke-width: 5; } .hero__scrim { background: linear-gradient(180deg, rgba(17,17,19,.55) 0%, rgba(17,17,19,.1) 18%, rgba(17,17,19,.72) 46%, rgba(17,17,19,.94) 100%); } } @media (max-width: 560px) { /* na telefonie lead zostaje przy jednym zdaniu — reszta czyta się w sekcji „o nas" */ .hero__lead-more { display: none; } .hero__actions .btn { flex: 1 1 100%; padding: .85em 1.4em; } } /* niski ekran (iPhone SE i spółka) — hero musi zmieścić się w jednym kadrze, inaczej przypięcie ucina dolną część treści */ @media (max-width: 1023px) and (max-height: 740px) { .hero { padding-top: calc(var(--nav-h) + 2.5vh); padding-bottom: calc(3.2rem + var(--hero-chrome)); } .hero__title { font-size: clamp(1.5rem, 1rem + 2.6vw, 2rem); margin-bottom: .75rem; } .hero__lead { font-size: .88rem; line-height: 1.55; margin-bottom: .95rem; } .hero__actions { gap: .5rem; margin-bottom: 1.8rem; } /* przyciski wracają obok siebie — dwa pełnej szerokości zjadały ~100 px wysokości */ .hero__actions .btn { flex: 0 1 auto; padding: .75em 1.15em; font-size: .82rem; } .hero__stats { gap: .9rem; } .hero__stats strong { font-size: 1.2rem; } .hero__stats span { font-size: .52rem; } .hero__mark { height: 15vmin; } } /* ================================================================ PASEK */ .strip { background: var(--ink-2); color: var(--tx-light); overflow: hidden; padding: clamp(.9rem, 2vw, 1.3rem) 0; border-block: 1px solid var(--line-light-soft); } .strip__track { display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 2.6rem); width: max-content; will-change: transform; animation: stripLoop 34s linear infinite; } .strip__track span { font-family: var(--serif); font-size: clamp(1.15rem, 2.6vw, 1.9rem); letter-spacing: .04em; white-space: nowrap; } .strip__track i { color: var(--stone); font-style: normal; font-size: .75rem; } @keyframes stripLoop { to { transform: translate3d(-50%, 0, 0); } } .strip.is-offscreen .strip__track { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .strip__track { animation: none; } } /* ============================================================ O SALONIE */ .about { padding: var(--sec) 0; background: var(--paper); } .about__grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; } .about__points { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 1.6rem; } .about__points li { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1.1rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line-soft); } .about__points li:last-child { border-bottom: 0; padding-bottom: 0; } .about__num { grid-row: span 2; font-family: var(--serif); font-size: 1.5rem; color: var(--stone); line-height: 1.2; } .about__points h3 { font-size: 1.4rem; letter-spacing: -.005em; display: flex; align-items: center; gap: .6rem; } .about__points h3 .ico { width: .78em; height: .78em; color: var(--stone); } .about__points p { margin: .35rem 0 0; color: var(--tx-dark-soft); font-size: .96rem; } .about__visual { display: grid; gap: clamp(1rem, 2vw, 1.6rem); } .about__frame { margin: 0; overflow: hidden; border-radius: var(--r-md); box-shadow: var(--shadow-md); background: var(--paper-3); } .about__frame img { width: 100%; height: 100%; object-fit: cover; } .about__frame:first-child { aspect-ratio: 16 / 11; } .about__frame--small { aspect-ratio: 4 / 3; width: 72%; margin-left: auto; } @media (max-width: 900px) { .about__grid { grid-template-columns: 1fr; } .about__frame--small { width: 100%; } } /* ======================================================= WŁOSY KRĘCONE */ .curly { position: relative; padding: calc(var(--sec) * 1.05) 0; background: var(--ink); color: var(--tx-light); overflow: hidden; isolation: isolate; } .curly__bg { position: absolute; inset: 0; z-index: 0; } .curly__bg img { width: 100%; height: 118%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.05) brightness(.7); } .curly__scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(17,17,19,.96) 0%, rgba(17,17,19,.86) 46%, rgba(17,17,19,.5) 100%); } .curly__inner { position: relative; z-index: 2; } .curly__head { max-width: 58ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .curly__steps { display: grid; gap: 1px; background: var(--line-light-soft); border: 1px solid var(--line-light-soft); border-radius: var(--r-md); overflow: hidden; grid-template-columns: repeat(4, 1fr); } .curly__steps li { background: rgba(25, 26, 29, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: clamp(1.4rem, 2.4vw, 2.1rem); transition: background var(--t-base) var(--ease); } @media (hover: hover) and (pointer: fine) { .curly__steps li:hover { background: rgba(35, 36, 40, .88); } } .curly__step { display: inline-flex; align-items: center; gap: .5rem; font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: var(--stone-lite); margin-bottom: .9rem; } .curly__step .ico { width: 1.55em; height: 1.55em; } .curly__steps h3 { font-size: 1.42rem; color: var(--tx-light); margin-bottom: .5rem; } .curly__steps p { margin: 0; color: var(--tx-light-soft); font-size: .93rem; } .curly__cta { margin-top: clamp(2rem, 4vw, 3rem); display: flex; align-items: center; gap: 1.2rem 1.8rem; flex-wrap: wrap; } .curly__cta .btn--solid { background: var(--paper); color: var(--ink); } .curly__cta p { margin: 0; color: var(--tx-light-soft); font-size: .93rem; } @media (max-width: 1020px) { .curly__steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .curly__steps { grid-template-columns: 1fr; } } /* ============================================================== CENNIK */ .svc { padding: var(--sec) 0; background: var(--paper-2); } .svc__tools { position: sticky; top: calc(var(--nav-h) - 8px); z-index: 40; padding: .9rem 1.1rem; margin-bottom: 1rem; background: rgba(223, 221, 216, .95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 16px 38px -26px rgba(51,47,40,.75); } /* --- pasek zwijania --- */ .svc__toggle { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .25rem 0; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; color: var(--tx-dark); } .svc__toggle-txt { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-dark-faint); } .svc__toggle-sum { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; color: var(--tx-dark-faint); } .svc__toggle-sum.is-on { color: var(--tx-dark); } .svc__toggle-arrow { flex: none; width: 9px; height: 9px; margin-right: .15rem; border-right: 1.5px solid var(--stone); border-bottom: 1.5px solid var(--stone); transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--t-base) var(--ease); } .svc__toggle:hover .svc__toggle-arrow { border-color: var(--tx-dark); } .is-collapsed .svc__toggle-arrow { transform: rotate(-135deg) translate(-2px, -2px); } .svc__filters { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--t-base) var(--ease), opacity var(--t-fast) var(--ease); } .svc__filters-in { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; min-height: 0; overflow: hidden; padding-top: .85rem; } .svc__tools.is-collapsed .svc__filters { grid-template-rows: 0fr; opacity: 0; visibility: hidden; } @media (prefers-reduced-motion: reduce) { .svc__filters { transition: none; } } .svc__reset { margin-left: .3rem; padding: .38em .2em; background: none; border: 0; cursor: pointer; font: inherit; font-size: .78rem; color: var(--tx-dark-faint); text-decoration: underline; text-underline-offset: 3px; } .svc__reset:hover { color: var(--tx-dark); } .chips { display: flex; flex-wrap: wrap; gap: .45rem; } .chip { display: inline-flex; align-items: center; gap: .45em; padding: .5em 1em; border-radius: 999px; cursor: pointer; background: rgba(251, 250, 248, .8); border: 1px solid var(--line); font-size: .84rem; letter-spacing: .01em; color: var(--tx-dark-soft); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .chip b { font-weight: 400; font-size: .74rem; color: var(--tx-dark-faint); } .chip:hover { background: var(--paper); border-color: var(--stone); color: var(--tx-dark); } .chip:active { transform: scale(.97); } .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--tx-light); } .chip[aria-pressed="true"] b { color: var(--stone-lite); } .chip--sm { padding: .38em .85em; font-size: .78rem; } .svc__len { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .svc__len-label { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-dark-faint); } .svc__count { min-height: 1.4em; margin: 0 0 1.6rem; font-size: .84rem; color: var(--tx-dark-faint); } .svc__list { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); } .svc__cat { position: relative; isolation: isolate; overflow: hidden; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2.4rem); box-shadow: var(--shadow-sm); } .svc__cat[hidden] { display: none; } /* Zdjęcie kategorii — wtapia się od prawej, żeby nie walczyło z tekstem. Maska rośnie do ~72% szerokości i znowu gaśnie: skrajnie prawy pas należy do kolumny z cenami i musi zostać czystym papierem. */ .svc__cat-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .svc__cat-bg img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 38%; filter: grayscale(.9) contrast(1.06); opacity: .42; -webkit-mask-image: linear-gradient(96deg, transparent 24%, rgba(0,0,0,.4) 50%, rgba(0,0,0,.92) 70%, rgba(0,0,0,.22) 88%, transparent 97%); mask-image: linear-gradient(96deg, transparent 24%, rgba(0,0,0,.4) 50%, rgba(0,0,0,.92) 70%, rgba(0,0,0,.22) 88%, transparent 97%); } /* Kadry indywidualne. Na szerokim ekranie zdjęcie skaluje się do szerokości karty, więc poziomo przesuwamy je transformem — odsłonięty pasek po lewej i tak leży w przezroczystej części maski (poniżej 27%), więc jest niewidoczny. */ @media (min-width: 701px) { .svc__cat[data-cat="dzieci"] .svc__cat-bg img { object-position: 50% 56%; transform: translateX(18%); } .svc__cat[data-cat="strzyzenie-damskie"] .svc__cat-bg img { object-position: 50% 20%; transform: translateX(22%); } } @media (max-width: 700px) { /* wąski ekran: karta jest wysoka, więc zdjęcie siada pod nagłówkiem kategorii i wygasza się nad listą cen */ .svc__cat-bg img { opacity: .3; object-position: 50% 34%; -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.42) 22%, transparent 48%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.42) 22%, transparent 48%); } /* tu kadr obcina się w poziomie (wysoka karta), więc wystarczy object-position */ .svc__cat[data-cat="strzyzenie-damskie"] .svc__cat-bg img { object-position: 34% 40%; } .svc__cat[data-cat="dzieci"] .svc__cat-bg img { object-position: 42% 30%; } } .svc__cat-head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .4rem; } /* flex-start, żeby przy zawijanym tytule ikona trzymała się pierwszej linii */ .svc__cat-head h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); display: flex; align-items: flex-start; gap: .6rem; } .svc__cat-ico { width: .82em; height: .82em; margin-top: .17em; color: var(--stone); } .svc__cat-head span { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--stone); } .svc__cat-lead { color: var(--tx-dark-soft); font-size: .95rem; margin-bottom: 1.4rem; max-width: 60ch; } .svc__items { display: grid; } .svc__item { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1.4rem; padding: 1rem 0; border-top: 1px solid var(--line-soft); } .svc__item.is-out { display: none; } .svc__item:first-child { border-top: 0; } .svc__name { font-size: 1.02rem; color: var(--tx-dark); } .svc__price { grid-row: span 2; align-self: center; text-align: right; font-family: var(--serif); font-size: 1.5rem; white-space: nowrap; /* cena to najważniejsza liczba na karcie — pełny kontrast, nigdy przygaszona */ color: var(--ink); } .svc__meta { display: flex; flex-wrap: wrap; gap: .4rem .55rem; font-size: .85rem; color: var(--tx-dark-faint); } .svc__meta em { font-style: normal; display: inline-flex; align-items: center; gap: .34em; } .svc__meta .ico { color: var(--stone); } .svc__meta span { opacity: .5; } /* cena jest w dużym szeryfie — metka musi być wyraźnie mniejsza od cyfr */ .svc__price-ico { width: .62em; height: .62em; margin-right: .32em; color: var(--stone-deep); vertical-align: -.02em; } .svc__desc { grid-column: 1 / -1; margin: .35rem 0 0; font-size: .88rem; color: var(--tx-dark-soft); max-width: 68ch; } .is-filtered-in { animation: svcIn .42s var(--ease) both; } @keyframes svcIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .is-filtered-in { animation: none; } } /* Link do Booksy zamykający każdą kategorię. Wypełniona pigułka w ciepłym kamieniu — jasne tło karty (a pod nią jeszcze jaśniejsze zdjęcie) zjadało wariant obrysowany. Kamień zamiast czerni: link ma być widoczny, ale nie przelicytować głównych „Rezerwuj”. Treść wpisana w danych kategorii. */ .svc__cat-cta { display: inline-flex; align-items: center; gap: .5em; max-width: 100%; margin-top: clamp(1.2rem, 2.4vw, 1.7rem); padding: .72em 1.4em; border: 1px solid transparent; border-radius: 999px; background: var(--stone-deep); box-shadow: var(--shadow-sm); font-family: var(--sans); font-size: .87rem; font-weight: 500; letter-spacing: .03em; color: var(--tx-light); text-decoration: none; transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease); } .svc__cat-cta span { transition: transform var(--t-base) var(--ease); } @media (hover: hover) and (pointer: fine) { .svc__cat-cta:hover { background: var(--ink); box-shadow: var(--shadow-md); } .svc__cat-cta:hover span { transform: translateX(4px); } } .svc__cat-cta:active { transform: scale(.985); } .svc__note { margin-top: clamp(1.6rem, 3vw, 2.4rem); padding: 1.2rem 1.4rem; border: 1px dashed var(--line); border-radius: var(--r-md); font-size: .88rem; color: var(--tx-dark-soft); background: rgba(255,255,255,.5); } .svc__note--ico { display: flex; align-items: flex-start; gap: .8rem; } .svc__note--ico .ico { width: 1.2em; height: 1.2em; color: var(--stone); margin-top: .1em; } .svc__empty { padding: 2rem 0; color: var(--tx-dark-faint); text-align: center; } @media (max-width: 620px) { .svc__tools { border-radius: var(--r-md); padding: .8rem; } .svc__price { font-size: 1.3rem; } } /* =========================================================== GALERIA */ .gal { padding: var(--sec) 0; background: var(--ink); color: var(--tx-light); } .gal .eyebrow { color: var(--stone-lite); } .gal .eyebrow::before { background: var(--stone-lite); } .gal .section-title { color: var(--tx-light); } .gal .section-title em { color: var(--stone-lite); } .gal .lead { color: var(--tx-light-soft); } /* masonry na osobnych kolumnach (JS dokłada kafle do najkrótszej) — dzięki temu „Pokaż więcej” dopisuje zdjęcia na dole i nie przestawia już wyświetlonych */ .gal__grid { padding-inline: var(--pad); max-width: calc(var(--maxw) + 2 * var(--pad)); margin-inline: auto; display: flex; align-items: flex-start; gap: clamp(.6rem, 1.4vw, 1.1rem); } .gal__col { flex: 1 1 0; min-width: 0; } .gi { position: relative; margin: 0 0 clamp(.6rem, 1.4vw, 1.1rem); overflow: hidden; border-radius: var(--r-sm); background: var(--ink-3); cursor: zoom-in; display: block; width: 100%; border: 0; padding: 0; } .gal__col .gi:last-child { margin-bottom: 0; } .gi img { width: 100%; height: auto; display: block; filter: grayscale(.35) contrast(1.03); transition: transform .7s var(--ease), filter .5s var(--ease); } .gi::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(17,17,19,.55)); opacity: 0; transition: opacity var(--t-base) var(--ease); } @media (hover: hover) and (pointer: fine) { .gi:hover img { transform: scale(1.05); filter: grayscale(0) contrast(1.03); } .gi:hover::after { opacity: 1; } } .gi.color img { filter: grayscale(0) contrast(1.03); } /* kurtyna odsłaniająca kafel */ .gi__curtain { position: absolute; inset: 0; z-index: 3; background: var(--stone-deep); transform: translate3d(-101%, 0, 0); will-change: transform; } html.js .gi img { visibility: hidden; } html.js .gi--shown img { visibility: visible; } html.js .gi--animate .gi__curtain { animation: giSwipe 1.15s cubic-bezier(.62, 0, .38, 1) forwards; animation-delay: inherit; } html.js .gi--animate img { animation: giShow 1.15s step-end forwards; animation-delay: inherit; } @keyframes giSwipe { 0% { transform: translate3d(-101%, 0, 0); } 46%, 54% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(101%, 0, 0); } } @keyframes giShow { from { visibility: hidden; } 54%, 100% { visibility: visible; } } @media (prefers-reduced-motion: reduce) { html.js .gi img { visibility: visible; } .gi__curtain { display: none; } } .gal__more { margin-top: clamp(1.6rem, 3vw, 2.4rem); text-align: center; } .gal__more .btn { color: var(--tx-light); border-color: var(--line-light); } .gal__more .btn:hover { border-color: var(--tx-light); background: rgba(245,243,239,.08); } .gal__more[hidden] { display: none; } /* liczba kolumn czytana też przez JS (getComputedStyle → --gal-cols) */ .gal__grid { --gal-cols: 4; } @media (max-width: 1100px) { .gal__grid { --gal-cols: 3; } } @media (max-width: 760px) { .gal__grid { --gal-cols: 2; } } /* ============================================================= OPINIE */ .rev { padding: var(--sec) 0; background: var(--paper); overflow: hidden; } .rev__score { display: inline-flex; align-items: center; gap: .8rem; flex-wrap: wrap; justify-content: center; margin-top: 1.4rem; padding: .7rem 1.4rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-2); } .rev__stars { display: inline-flex; align-items: center; gap: .18em; color: var(--stone); font-size: .95rem; } .rev__score strong { font-family: var(--serif); font-size: 1.9rem; font-weight: 400; line-height: 1; } .rev__scoretext { font-size: .84rem; color: var(--tx-dark-faint); } .rev__scoretext b { font-weight: 500; color: var(--tx-dark-soft); } .rev__srcs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .7rem; margin: 1rem 0 0; padding: 0; list-style: none; } .rev__srcs li { display: inline-flex; align-items: center; gap: .5rem; padding: .38rem .85rem .38rem .5rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-2); font-size: .78rem; color: var(--tx-dark-soft); } .rev__srcs-logo { width: 22px; height: 22px; display: block; flex: none; } .rev__srcs-logo--booksy { border-radius: 6px; } .rev__wall { position: relative; display: grid; gap: clamp(.8rem, 1.6vw, 1.2rem); grid-template-columns: repeat(3, 1fr); max-width: calc(var(--maxw) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); margin-top: clamp(2rem, 4vw, 3rem); height: clamp(520px, 78vh, 760px); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent); } .rev__col { overflow: hidden; } .rev__inner { display: grid; gap: clamp(.8rem, 1.6vw, 1.2rem); animation: revUp var(--dur, 60s) linear infinite; } .rev__col--down .rev__inner { animation-name: revDown; } @keyframes revUp { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } } @keyframes revDown { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } } .rev__wall.is-offscreen .rev__inner { animation-play-state: paused; } @media (hover: hover) and (pointer: fine) { .rev__wall:hover .rev__inner { animation-play-state: paused; } } .rev__wall--static { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; } .rev__wall--static .rev__inner { animation: none; } .rc { background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 1.2rem 1.3rem; box-shadow: var(--shadow-sm); } .rc__top { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; } /* --- awatar opinii: generowany znaczek, nigdy zdjęcie klienta (RODO) --------- Gradient + wzór + pierwsza litera imienia; wariant wybiera hash imienia (main.js → avatar()). Gradient i deseń to dwie warstwy tego samego background-image, więc wzór nie potrzebuje dodatkowego elementu. ŻADNEGO background-position — deseń dzieli je z gradientem pod spodem, a ten ma background-size: 100% 100% i przesunięcie robi na nim szew. */ .rc__ava { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; line-height: 1; font-size: .95rem; font-weight: 500; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); border: 2px solid var(--paper); overflow: hidden; background-color: var(--a); background-image: var(--pat, none), linear-gradient(var(--ang, 135deg), var(--a), var(--b)); background-size: var(--pat-size, auto), 100% 100%; } /* place-items centruje pudełko wiersza, nie rysunek znaku — stąd span z przesunięciem mierzonym per krój (średnia z ink boxa polskich wersalików). letter-spacing przy jednym znaku dokłada światło tylko z prawej — nie używamy. */ .rc__ava > span { display: block; transform: translate(var(--ox, 0em), var(--oy, 0em)); } /* gradienty — ziemista rodzina wokół palety salonu; grafit/beton/kamień 3 z 10. Każdy schodzi do ciemnego końca, żeby biała litera została czytelna. */ .rc__ava--g1 { --a: #3A3B40; --b: #17181B; --ang: 140deg; } /* grafit */ .rc__ava--g2 { --a: #726C60; --b: #3A362F; --ang: 125deg; } /* beton */ .rc__ava--g3 { --a: #77766F; --b: #3E3D38; --ang: 160deg; } /* kamień */ .rc__ava--g4 { --a: #6E7250; --b: #2F321D; --ang: 135deg; } /* oliwka */ .rc__ava--g5 { --a: #6E7A68; --b: #2F382F; --ang: 115deg; } /* szałwia */ .rc__ava--g6 { --a: #A8624A; --b: #4A2519; --ang: 145deg; } /* terakota */ .rc__ava--g7 { --a: #8F6D31; --b: #443014; --ang: 130deg; } /* ochra */ .rc__ava--g8 { --a: #6B4A5E; --b: #2C1D28; --ang: 150deg; } /* śliwka */ .rc__ava--g9 { --a: #4A5A78; --b: #1C2534; --ang: 120deg; } /* indygo */ .rc__ava--g10 { --a: #8A4145; --b: #38171B; --ang: 155deg; } /* wino */ /* wzory — alfa 0.13–0.3 na białym: deseń ma być czytelny, ale nie konkurować z literą */ .rc__ava--p0 { --pat: none; } /* czysty gradient */ .rc__ava--p1 { /* kropki */ --pat: radial-gradient(rgba(255,255,255,.28) 1.2px, transparent 1.3px); --pat-size: 7px 7px; } .rc__ava--p2 { /* paski pionowe */ --pat: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 2px, transparent 2px 7px); --pat-size: auto; } .rc__ava--p3 { /* kreski ukośne */ --pat: repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 2px, transparent 2px 8px); --pat-size: auto; } .rc__ava--p4 { /* kratka */ --pat: repeating-linear-gradient(0deg, rgba(255,255,255,.15) 0 1px, transparent 1px 9px), repeating-linear-gradient(90deg, rgba(255,255,255,.15) 0 1px, transparent 1px 9px); --pat-size: auto, auto; } .rc__ava--p5 { /* skośna krata */ --pat: repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 1px, transparent 1px 8px), repeating-linear-gradient(-45deg, rgba(255,255,255,.14) 0 1px, transparent 1px 8px); --pat-size: auto, auto; } .rc__ava--p6 { /* koncentryczne kręgi */ --pat: repeating-radial-gradient(circle, rgba(255,255,255,.17) 0 1px, transparent 1px 6px); --pat-size: auto; } .rc__ava--p7 { /* promienie */ --pat: repeating-conic-gradient(rgba(255,255,255,.15) 0 6deg, transparent 6deg 18deg); --pat-size: auto; } .rc__ava--p8 { /* szachownica */ --pat: conic-gradient(rgba(255,255,255,.16) 0 25%, transparent 0 50%, rgba(255,255,255,.16) 0 75%, transparent 0); --pat-size: 11px 11px; } .rc__ava--p9 { /* konfetti */ --pat: radial-gradient(rgba(255,255,255,.24) 1px, transparent 1.1px), radial-gradient(rgba(255,255,255,.13) 1.6px, transparent 1.7px); --pat-size: 9px 9px, 15px 15px; } /* kroje — tylko fonty, które strona i tak ładuje (zero dodatkowych żądań). --ox/--oy mierzone canvasem po literach ABDEFGIJKLMNOPSWZŁ, nie zgadywane. */ .rc__ava--f1 { font-family: var(--serif); font-weight: 600; font-size: .92rem; --ox: -.004em; --oy: 0em; } .rc__ava--f2 { font-family: var(--sans); font-weight: 300; font-size: 1rem; --ox: -.006em; --oy: .001em; } .rc__ava--f3 { font-family: var(--wordmark); font-weight: 500; font-size: 1.2rem; --ox: .001em; --oy: -.013em; } .rc__ava--f4 { font-family: var(--serif); font-weight: 400; font-size: .95rem; --ox: -.004em; --oy: .001em; } .rc__ava--f5 { font-family: var(--sans); font-weight: 500; font-size: .9rem; --ox: -.004em; --oy: .001em; } .rc__who { flex: 1; min-width: 0; } .rc__name { display: block; font-size: .94rem; color: var(--tx-dark); } .rc__date { display: block; font-size: .74rem; color: var(--tx-dark-faint); } .rc__src { flex: none; display: inline-flex; align-items: center; gap: .4rem; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-dark-faint); } .rc__src img { width: 16px; height: 16px; display: block; flex: none; } .rc__src--booksy img { border-radius: 4px; } .rc__text { margin: 0; font-size: .93rem; color: var(--tx-dark-soft); } .rc__svc { margin: .8rem 0 0; padding-top: .7rem; border-top: 1px solid var(--line-soft); font-size: .76rem; color: var(--tx-dark-faint); } .rev__cta { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; } @media (max-width: 1000px) { .rev__wall { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .rev__wall { grid-template-columns: 1fr; height: clamp(460px, 70vh, 620px); } } /* ============================================================== SALON */ .salon { padding: var(--sec) 0; background: var(--paper-2); } .salon__grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .hours__head { display: flex; align-items: center; gap: .55rem; margin: clamp(1.4rem, 3vw, 2rem) 0 0; font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--tx-dark-faint); } .hours__head .ico { width: 1.3em; height: 1.3em; color: var(--stone); } .hours { width: 100%; border-collapse: collapse; margin: .9rem 0 .8rem; } .hours th, .hours td { padding: .58rem 0; text-align: left; font-weight: 300; font-size: .95rem; } .hours td { text-align: right; color: var(--tx-dark-soft); font-variant-numeric: tabular-nums; } .hours tr { border-bottom: 1px solid var(--line-soft); } .hours tr:last-child { border-bottom: 0; } .hours tr.today th, .hours tr.today td { color: var(--tx-dark); font-weight: 500; } .hours tr.today th::after { content: "dziś"; margin-left: .6rem; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--paper); background: var(--ink); padding: .18em .55em; border-radius: 999px; font-weight: 400; } .hours__note { display: flex; align-items: flex-start; gap: .55rem; margin: 0 0 .45rem; font-size: .86rem; color: var(--tx-dark-faint); } .hours__note .ico { color: var(--stone); margin-top: .18em; } .hours__note--call { color: var(--tx-dark-soft); } .hours__note--call a { color: var(--tx-dark); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 1px; font-variant-numeric: tabular-nums; } .hours__note--call a:hover { border-color: var(--ink); } .salon__visual { display: grid; gap: clamp(1rem, 2vw, 1.6rem); } .salon__frame { margin: 0; overflow: hidden; border-radius: var(--r-md); box-shadow: var(--shadow-md); background: var(--paper-3); aspect-ratio: 4 / 3; } .salon__frame img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 900px) { .salon__grid { grid-template-columns: 1fr; } } /* ============================================================ KONTAKT */ .contact { padding: var(--sec) 0; background: var(--ink); color: var(--tx-light); } .contact .eyebrow { color: var(--stone-lite); } .contact .eyebrow::before { background: var(--stone-lite); } .contact .section-title { color: var(--tx-light); } .contact .section-title em { color: var(--stone-lite); } .contact__grid { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } .contact__list { margin: clamp(1.6rem, 3vw, 2.4rem) 0 2rem; display: grid; gap: 1.2rem; } .contact__list > div { padding-bottom: 1.2rem; border-bottom: 1px solid var(--line-light-soft); } .contact__list > div:last-child { border-bottom: 0; padding-bottom: 0; } .contact__list dt { font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--tx-light-faint); margin-bottom: .35rem; display: flex; align-items: center; gap: .6rem; } /* etykieta jest drobna i rozstrzelona — ikona potrzebuje własnej skali */ .contact__list dt .ico { width: 1.35em; height: 1.35em; color: var(--stone-lite); } .contact__list dd { margin: 0; font-size: 1.02rem; color: var(--tx-light); } .contact__list a { text-decoration: none; border-bottom: 1px solid var(--line-light); padding-bottom: 2px; } .contact__list a:hover { border-color: var(--tx-light); } .copy { background: none; border: 0; border-bottom: 1px solid var(--line-light); padding: 0 0 2px; cursor: pointer; font-size: 1.02rem; text-align: left; word-break: break-word; } .copy:hover { border-color: var(--tx-light); } .contact__btn { background: var(--paper); color: var(--ink); } .contact__map { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--ink-3); box-shadow: var(--shadow-lg); border: 1px solid var(--line-light-soft); } .contact__map iframe { width: 100%; height: 100%; border: 0; pointer-events: none; filter: invert(.92) hue-rotate(180deg) saturate(.55) contrast(.92); } .contact__map.is-active iframe { pointer-events: auto; } /* Nakładka nie zasłania mapy — jest tylko łapaczem gestu przewijania i podpowiedzią, że mapę da się przesuwać. */ .map__overlay { position: absolute; inset: 0; z-index: 2; cursor: pointer; display: flex; align-items: flex-end; justify-content: center; padding: clamp(.9rem, 2vw, 1.3rem); background: transparent; border: 0; color: var(--tx-light); transition: opacity var(--t-base) var(--ease), visibility var(--t-base); } .map__overlay::before { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(180deg, transparent, rgba(17, 17, 19, .6)); pointer-events: none; } .map__pill { position: relative; display: inline-flex; align-items: center; gap: .55em; padding: .62em 1.15em; border-radius: 999px; background: rgba(17, 17, 19, .82); border: 1px solid var(--line-light); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .84rem; letter-spacing: .04em; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .map__overlay:hover .map__pill { background: rgba(17, 17, 19, .95); border-color: var(--tx-light); } .map__pin { font-size: 1rem; color: var(--stone-lite); } .contact__map.is-active .map__overlay { opacity: 0; visibility: hidden; } @media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } } /* ============================================================= STOPKA */ .foot { background: var(--ink-2); color: var(--tx-light-soft); padding-top: clamp(3rem, 6vw, 4.5rem); } .foot__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); padding-bottom: clamp(2.5rem, 5vw, 3.5rem); border-bottom: 1px solid var(--line-light-soft); } .foot__brand { --foot-logo: calc((1.4rem + .62rem) * 1.15); display: flex; align-items: center; gap: .9rem; } .foot__brand img { width: var(--foot-logo); height: var(--foot-logo); flex: none; opacity: .92; } .foot__brand p { margin: 0; display: flex; flex-direction: column; line-height: 1.15; } .foot__brand strong { font-family: var(--wordmark); font-weight: 500; font-size: 1.4rem; letter-spacing: .07em; color: var(--tx-light); } .foot__brand span { font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; } .foot__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.2rem; align-content: start; } .foot__nav a { text-decoration: none; font-size: .92rem; transition: color var(--t-fast) var(--ease); } .foot__nav a:hover { color: var(--tx-light); } .foot__meta p { margin: 0 0 .4rem; font-size: .9rem; } .foot__meta p:has(.ico) { display: flex; align-items: flex-start; gap: .55rem; } .foot__meta .ico { color: var(--stone-lite); margin-top: .18em; } .foot__meta a { text-decoration: none; border-bottom: 1px solid var(--line-light-soft); } .foot__credits { font-size: .78rem !important; color: var(--tx-light-faint); margin-top: .9rem !important; } .foot__bar { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1.4rem; font-size: .82rem; color: var(--tx-light-faint); } .foot__bar p { margin: 0; } .foot__bar a { color: var(--tx-light-soft); } @media (max-width: 860px) { .foot__grid { grid-template-columns: 1fr; } } /* =========================================================== LIGHTBOX */ .lb { position: fixed; inset: 0; z-index: 200; display: none; background: rgba(9, 9, 11, .96); align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); opacity: 0; transition: opacity .3s var(--ease); } .lb.open { display: flex; } .lb.visible { opacity: 1; } .lb__figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; gap: .9rem; } .lb__figure img { max-width: min(94vw, 1100px); max-height: 78vh; width: auto; margin-inline: auto; object-fit: contain; border-radius: var(--r-sm); transition: opacity .18s var(--ease); } .lb.is-swapping .lb__figure img { opacity: 0; } .lb__figure figcaption { color: var(--tx-light-soft); font-size: .86rem; text-align: center; max-width: 62ch; margin-inline: auto; } .lb__close, .lb__nav { position: absolute; z-index: 3; background: rgba(245, 243, 239, .1); border: 1px solid var(--line-light); color: var(--tx-light); border-radius: 50%; cursor: pointer; display: grid; place-items: center; transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .lb__close { top: clamp(.8rem, 3vw, 1.6rem); right: clamp(.8rem, 3vw, 1.6rem); width: 46px; height: 46px; font-size: 1.6rem; line-height: 1; } .lb__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2rem; line-height: 1; padding-bottom: 4px; } .lb__nav--prev { left: clamp(.5rem, 2vw, 1.6rem); } .lb__nav--next { right: clamp(.5rem, 2vw, 1.6rem); } .lb__close:hover, .lb__nav:hover { background: rgba(245, 243, 239, .2); } .lb__nav:hover { transform: translateY(-50%) scale(1.05); } .lb__counter { position: absolute; bottom: clamp(.9rem, 3vw, 1.8rem); left: 50%; transform: translateX(-50%); margin: 0; font-size: .78rem; letter-spacing: .2em; color: var(--tx-light-faint); } @media (max-width: 640px) { .lb__nav { width: 44px; height: 44px; font-size: 1.6rem; } .lb__figure img { max-height: 70vh; } } /* ============================================================== TOAST */ .toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 16px); z-index: 300; padding: .8rem 1.3rem; border-radius: 999px; background: var(--ink); color: var(--tx-light); font-size: .86rem; opacity: 0; pointer-events: none; box-shadow: var(--shadow-lg); transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); } .toast.show { opacity: 1; transform: translate(-50%, 0); } /* --------- bez JS: chowamy puste kontenery renderowane z JavaScriptu --------- */ html:not(.js) .rev__wall, html:not(.js) .svc__tools, html:not(.js) .svc__count, html:not(.js) .gal__more { display: none; } /* ============================================== redukcja ruchu (globalnie) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } /* przysłona nie pracuje — kadr musi być od razu otwarty i widoczny */ html.js .hero__window { opacity: 1; -webkit-clip-path: none; clip-path: none; } .hero__mark { display: none; } }