/* ========================================================= KŁACZEK — Mobilny Fryzjer Paleta i typografia wyprowadzone z logo: złoto na grafitowej czerni. ========================================================= */ :root{ --ink: #0D0B08; --bg: #14110D; --bg-2: #1A1610; --bg-3: #221C15; --line: rgba(249,196,107,.16); --line-soft:rgba(243,235,223,.10); --gold: #F9C46B; --gold-lt: #FFE2B4; --gold-dk: #B8862F; --cream: #F3EBDF; --muted: rgba(243,235,223,.60); --muted-2: rgba(243,235,223,.40); --sans: 'Jost', 'Century Gothic', 'Trebuchet MS', system-ui, -apple-system, sans-serif; --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif; --wrap: 1240px; --pad: clamp(20px, 5vw, 64px); /* odstęp pionowy sekcji (góra i dół) — między sekcjami sumuje się dwukrotnie */ --sect: clamp(42px, 5.4vw, 80px); --r: 4px; --ease: cubic-bezier(.22,1,.36,1); --ease-io: cubic-bezier(.65,0,.35,1); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; /* Na telefonach sama reguła na bywa ignorowana — obcinamy też na . */ overflow-x:hidden; max-width:100%; } html.is-locked, body.is-locked{ overflow:hidden; } body{ margin:0; background:var(--bg); color:var(--cream); font-family:var(--sans); font-weight:300; font-size:clamp(15.5px,1.02vw,17px); line-height:1.72; letter-spacing:.012em; overflow-x:hidden; max-width:100%; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } ::selection{ background:var(--gold); color:var(--ink); } .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); } .section{ position:relative; padding-block:var(--sect); scroll-margin-top:78px; } /* ---------- TYPOGRAFIA ---------- */ .h2{ font-family:var(--serif); font-weight:300; font-size:clamp(2.3rem,5.6vw,4.5rem); line-height:1.04; letter-spacing:-.015em; margin:.18em 0 .5em; } .h2 em{ font-style:italic; color:var(--gold); display:inline-block; } .h2--big{ font-size:clamp(2.8rem,7.5vw,6rem); } .kicker{ display:flex; align-items:center; gap:.75em; font-size:.72rem; font-weight:500; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); margin:0; } .kicker span{ width:clamp(28px,4vw,54px); height:1px; background:linear-gradient(90deg,var(--gold),transparent); flex:none; } .section__head{ max-width:760px; margin-bottom:clamp(26px,3.2vw,44px); } .section__head--center{ margin-inline:auto; text-align:center; } .section__head--center .kicker{ justify-content:center; } .section__head--center .kicker span{ display:none; } .section__lead{ color:var(--muted); font-size:1.06em; max-width:60ch; margin:0; } .section__head--center .section__lead{ margin-inline:auto; } .lead{ font-size:1.12em; color:rgba(243,235,223,.82); } .stars{ color:var(--gold); letter-spacing:.16em; font-size:.9em; } /* ---------- PRZYCISKI ---------- */ .btn{ position:relative; display:inline-flex; align-items:center; gap:.7em; padding:1.05em 2.1em; font-size:.78rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; border-radius:var(--r); overflow:hidden; transition:color .5s var(--ease), border-color .5s var(--ease), transform .35s var(--ease); will-change:transform; } .btn span,.btn svg{ position:relative; z-index:2; } .btn::before{ content:''; position:absolute; inset:0; z-index:1; transform:scaleY(0); transform-origin:bottom; transition:transform .55s var(--ease); } .btn:hover::before{ transform:scaleY(1); } .btn--gold{ background:linear-gradient(135deg,var(--gold),#E9AE4F); color:var(--ink); box-shadow:0 12px 40px -14px rgba(249,196,107,.6); } .btn--gold::before{ background:var(--cream); } .btn--gold:hover{ color:var(--ink); } .btn--ghost{ border:1px solid var(--line); color:var(--cream); } .btn--ghost::before{ background:var(--gold); } .btn--ghost:hover{ color:var(--ink); border-color:var(--gold); } .btn--small{ padding:.85em 1.6em; font-size:.7rem; border:1px solid var(--line); } .btn--small::before{ background:var(--gold); } .btn--small:hover{ color:var(--ink); border-color:var(--gold); } .link-arrow{ display:inline-flex; align-items:center; gap:.65em; font-size:.78rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); padding-bottom:.4em; border-bottom:1px solid var(--line); transition:gap .4s var(--ease), border-color .4s var(--ease); } .link-arrow:hover{ gap:1.1em; border-color:var(--gold); } .link-arrow svg{ transition:transform .4s var(--ease); } .link-arrow:hover svg{ transform:translateX(3px); } /* ========================================================= PRELOADER ========================================================= */ /* UWAGA: sam .loader nie może mieć tła. Tłem są wyłącznie dwie kurtyny — tylko wtedy ich rozsunięcie naprawdę odsłania stronę. Z tłem na .loader spod kurtyn wyłaniała się kolejna czarna płaszczyzna, a strona pojawiała się dopiero skokowo, w chwili ukrycia loadera. */ .loader{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; overflow:hidden; } .loader__inner{ position:relative; z-index:3; /* nad kurtynami, inaczej logo jest pod nimi */ display:grid; justify-items:center; gap:1.4rem; transition:opacity .45s var(--ease), transform .6s var(--ease); } .loader__scissors{ width:72px; height:94px; } /* Czasy dobrane tak, by animacja zdążyła się domknąć, zanim zasłona zniknie (patrz minWait w app.js) — inaczej preloader tylko „mignie" niedokończony. */ .loader__scissors .ln{ stroke:var(--gold); stroke-width:3; stroke-linecap:round; fill:none; stroke-dasharray:var(--len,200); stroke-dashoffset:var(--len,200); animation:draw .85s var(--ease) forwards; } .loader__scissors .ln:nth-child(2){ animation-delay:.08s; } .loader__scissors .ln:nth-child(3){ animation-delay:.18s; } .loader__scissors .ln:nth-child(4){ animation-delay:.26s; } .loader__scissors .pivot{ fill:var(--gold); opacity:0; animation:pop .4s .62s forwards; } @keyframes draw{ to{ stroke-dashoffset:0; } } @keyframes pop{ to{ opacity:1; } } .loader__brand{ font-size:.82rem; font-weight:400; letter-spacing:.7em; text-indent:.7em; color:var(--gold); opacity:0; animation:fadeIn .5s .25s forwards; } .loader__bar{ width:min(190px,42vw); height:1px; background:rgba(249,196,107,.2); overflow:hidden; } .loader__bar span{ display:block; height:100%; width:0; background:var(--gold); transition:width .28s linear; } .loader__pct{ font-size:.66rem; letter-spacing:.3em; color:var(--muted-2); } @keyframes fadeIn{ to{ opacity:1; } } .loader__curtain{ position:absolute; top:0; width:50.2%; height:100%; background:var(--ink); z-index:2; transition:transform .8s var(--ease); } .loader__curtain.l{ left:0; } .loader__curtain.r{ right:0; } /* Od startu rozsuwania loader nie może już łapać kliknięć — jest przezroczysty, ale jako fixed z z-index 9999 blokowałby stronę do czasu ukrycia. */ .loader.is-done{ pointer-events:none; } .loader.is-done .loader__inner{ opacity:0; transform:translateY(-14px); } .loader.is-done .loader__curtain.l{ transform:translateX(-101%); } .loader.is-done .loader__curtain.r{ transform:translateX(101%); } .loader.is-hidden{ visibility:hidden; pointer-events:none; } /* ========================================================= WARSTWY FX ========================================================= */ .grain{ position:fixed; inset:-120px; z-index:900; pointer-events:none; opacity:.038; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%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"); animation:grainShift 8s steps(6) infinite; } @keyframes grainShift{ 0%{transform:translate(0,0)} 20%{transform:translate(-14px,8px)} 40%{transform:translate(10px,-12px)} 60%{transform:translate(-8px,-6px)} 80%{transform:translate(12px,10px)} 100%{transform:translate(0,0)} } .spotlight{ position:fixed; inset:0; z-index:1; pointer-events:none; background:radial-gradient(420px circle at var(--mx,50%) var(--my,40%), rgba(249,196,107,.075), transparent 68%); opacity:0; transition:opacity .6s ease; } body.has-pointer .spotlight{ opacity:1; } .scrollbar{ position:fixed; top:0; left:0; right:0; height:2px; z-index:950; pointer-events:none; background:rgba(249,196,107,.08); } .scrollbar span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold-dk),var(--gold),var(--gold-lt)); box-shadow:0 0 12px rgba(249,196,107,.5); } /* kursor */ .cursor{ position:fixed; top:0; left:0; z-index:9000; pointer-events:none; opacity:0; transition:opacity .3s; } body.has-pointer .cursor{ opacity:1; } .cursor__dot{ position:absolute; width:5px; height:5px; border-radius:50%; background:var(--gold); transform:translate(-50%,-50%); } .cursor__ring{ position:absolute; width:34px; height:34px; border-radius:50%; border:1px solid rgba(249,196,107,.55); transform:translate(-50%,-50%) scale(1); transition:width .35s var(--ease), height .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease); } .cursor__label{ position:absolute; transform:translate(-50%,-50%); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); opacity:0; transition:opacity .3s; white-space:nowrap; font-weight:500; } .cursor.is-hover .cursor__ring{ width:56px; height:56px; background:rgba(249,196,107,.13); border-color:var(--gold); } .cursor.is-view .cursor__ring{ width:82px; height:82px; background:var(--gold); border-color:var(--gold); } .cursor.is-view .cursor__dot{ opacity:0; } .cursor.is-view .cursor__label{ opacity:1; } /* ========================================================= NAWIGACJA ========================================================= */ .nav{ position:fixed; top:0; left:0; right:0; z-index:800; display:flex; align-items:center; gap:2rem; padding:1.15rem var(--pad); transition:background .5s var(--ease), backdrop-filter .5s, padding .5s var(--ease), border-color .5s, transform .5s var(--ease); border-bottom:1px solid transparent; } .nav.is-stuck{ background:rgba(13,11,8,.78); backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); border-bottom-color:var(--line-soft); padding-block:.8rem; } .nav.is-hidden{ transform:translateY(-105%); } .nav__brand{ display:flex; align-items:center; gap:.6rem; margin-right:auto; font-size:.86rem; letter-spacing:.34em; text-transform:uppercase; font-weight:400; color:var(--gold); } .nav__brand img{ width:22px; height:auto; } .nav__links{ display:flex; gap:2rem; } .nav__links a{ position:relative; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); padding-block:.4em; transition:color .4s; } .nav__links a::after{ content:''; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease); } .nav__links a:hover,.nav__links a.is-active{ color:var(--cream); } .nav__links a:hover::after,.nav__links a.is-active::after{ transform:scaleX(1); transform-origin:left; } .nav__cta{ display:inline-flex; align-items:center; gap:.5em; padding:.7em 1.3em; border:1px solid var(--line); border-radius:var(--r); font-size:.74rem; letter-spacing:.12em; color:var(--gold); transition:background .4s var(--ease), color .4s var(--ease), border-color .4s; will-change:transform; } .nav__cta:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); } /* 44×44 — minimalny wygodny cel dotykowy (Apple HIG); kreski zostają wąskie */ .nav__burger{ display:none; width:44px; height:44px; position:relative; margin-right:-10px; } .nav__burger span{ position:absolute; left:11px; right:11px; height:1.5px; background:var(--gold); transition:transform .45s var(--ease), opacity .3s; } .nav__burger span:nth-child(1){ top:18px; } .nav__burger span:nth-child(2){ top:25px; } .nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); } .nav__burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); } /* menu mobilne */ .menu{ position:fixed; inset:0; z-index:790; background:var(--ink); display:grid; align-content:center; gap:3rem; padding:6rem var(--pad) 3rem; clip-path:circle(0% at calc(100% - 40px) 34px); transition:clip-path .8s var(--ease); visibility:hidden; } .menu.is-open{ clip-path:circle(150% at calc(100% - 40px) 34px); visibility:visible; } .menu__links{ display:grid; gap:.2rem; } .menu__links a{ display:flex; align-items:baseline; gap:1rem; font-family:var(--serif); font-size:clamp(2rem,9vw,3.2rem); line-height:1.5; color:var(--cream); opacity:0; transform:translateY(20px); transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s; } .menu.is-open .menu__links a{ opacity:1; transform:none; } .menu__links a i{ font-family:var(--sans); font-style:normal; font-size:.62rem; letter-spacing:.2em; color:var(--gold); } .menu__links a:hover{ color:var(--gold); } .menu__foot{ display:grid; gap:.4rem; font-size:.86rem; color:var(--muted); letter-spacing:.06em; } .menu__foot a:hover{ color:var(--gold); } /* ========================================================= HERO ========================================================= */ .hero{ position:relative; min-height:100svh; display:grid; align-items:center; padding:clamp(120px,16vh,190px) var(--pad) clamp(90px,12vh,130px); overflow:hidden; background: radial-gradient(120% 90% at 78% 8%, rgba(249,196,107,.10), transparent 55%), radial-gradient(100% 70% at 8% 100%, rgba(184,134,47,.10), transparent 60%), var(--ink); } .hero__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.9; } .hero__vignette{ position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(85% 65% at 50% 45%, transparent 30%, rgba(13,11,8,.72) 100%), linear-gradient(180deg, rgba(13,11,8,.55) 0%, transparent 22%, transparent 62%, var(--ink) 100%); } .hero__content{ position:relative; z-index:2; max-width:min(880px,100%); margin-inline:auto; text-align:center; } .hero__eyebrow{ display:inline-flex; align-items:center; gap:.7em; font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin:0 0 clamp(20px,3vw,34px); padding:.6em 1.3em; border:1px solid var(--line); border-radius:100px; background:rgba(249,196,107,.05); backdrop-filter:blur(6px); } .hero__eyebrow .dot{ flex:none; width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 0 rgba(249,196,107,.6); animation:pulse 2.4s infinite; } /* dwie osobne linie zamiast łamania w przypadkowym miejscu */ .hero__eyebrow span{ text-align:center; line-height:1.5; } @keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(249,196,107,.55); } 70%{ box-shadow:0 0 0 11px rgba(249,196,107,0); } 100%{ box-shadow:0 0 0 0 rgba(249,196,107,0); } } .hero__title{ margin:0; font-family:var(--sans); font-weight:500; font-size:clamp(3.6rem,15.5vw,12.5rem); line-height:.92; letter-spacing:.02em; color:var(--gold); filter:drop-shadow(0 18px 50px rgba(249,196,107,.22)); } .hero__word{ display:inline-block; } .hero__title .ch{ display:inline-block; will-change:transform,opacity,filter; opacity:0; transform:translateY(.42em) rotateX(-55deg); filter:blur(9px); /* Krótkie opóźnienia: litery mają wjeżdżać w trakcie rozsuwania zasłony, a nie dopiero po nim — inaczej między preloaderem a treścią jest pusty ekran. */ transition:opacity .7s var(--ease), transform .8s var(--ease), filter .7s var(--ease); transition-delay:calc(var(--i) * 38ms + 40ms); } /* gradient nakładany per litera — na rodzicu nie zadziała, bo każda litera ma własny transform (tworzy nowy kontekst malowania) */ @supports (-webkit-background-clip: text) or (background-clip: text){ .hero__title .ch{ background:linear-gradient(180deg, var(--gold-lt) 0%, var(--gold) 46%, var(--gold-dk) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } } .is-ready .hero__title .ch{ opacity:1; transform:none; filter:blur(0); } .hero__sub{ margin:clamp(14px,2.2vw,24px) 0 0; font-size:clamp(.76rem,1.9vw,1.06rem); letter-spacing:.62em; text-indent:.62em; text-transform:uppercase; color:rgba(243,235,223,.86); font-weight:300; } .hero__sub .ch{ display:inline-block; opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:calc(var(--i) * 16ms + 300ms); } /* wyraz jako całość — wiersz łamie się tylko na spacjach, nigdy w środku słowa */ .hero__title .word, .hero__sub .word{ display:inline-block; } .is-ready .hero__sub .ch{ opacity:1; transform:none; } .hero__lead{ max-width:56ch; margin:clamp(24px,3.4vw,38px) auto 0; color:var(--muted); font-size:1.03em; } .hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:clamp(30px,4vw,46px); } .hero__badge{ display:inline-flex; align-items:center; gap:.7em; flex-wrap:wrap; justify-content:center; margin-top:clamp(28px,3.4vw,42px); font-size:.8rem; color:var(--muted); letter-spacing:.06em; } .hero__badge b{ color:var(--cream); font-weight:500; } .hero__scroll{ position:absolute; left:50%; bottom:clamp(22px,4vh,42px); z-index:3; transform:translateX(-50%); display:grid; justify-items:center; gap:.7rem; font-size:.6rem; letter-spacing:.34em; text-transform:uppercase; color:var(--muted-2); } .hero__scroll-line{ width:1px; height:52px; background:linear-gradient(180deg,transparent,var(--gold)); position:relative; overflow:hidden; } .hero__scroll-line::after{ content:''; position:absolute; inset:0; background:var(--gold); animation:scrollDot 2.2s var(--ease-io) infinite; } @keyframes scrollDot{ 0%{ transform:translateY(-100%); } 60%,100%{ transform:translateY(100%); } } /* ========================================================= MARQUEE ========================================================= */ .marquee{ position:relative; overflow:hidden; padding-block:1.15rem; border-block:1px solid var(--line-soft); background:linear-gradient(90deg, var(--bg-2), var(--bg-3), var(--bg-2)); } .marquee__track{ display:flex; width:max-content; animation:slide 42s linear infinite; } .marquee__track span{ padding-inline:1.4rem; font-family:var(--serif); font-style:italic; font-size:clamp(1.05rem,2.4vw,1.7rem); color:rgba(249,196,107,.72); white-space:nowrap; } @keyframes slide{ to{ transform:translateX(-50%); } } /* ========================================================= O MNIE ========================================================= */ .about{ background:linear-gradient(180deg,var(--ink),var(--bg) 30%); } .about__grid{ display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1fr); gap:clamp(40px,6vw,88px); align-items:center; } .about__frame{ position:relative; border-radius:var(--r); overflow:hidden; box-shadow:0 40px 90px -40px rgba(0,0,0,.9); } .about__frame::after{ content:''; position:absolute; inset:0; pointer-events:none; border:1px solid var(--line); background:linear-gradient(180deg,transparent 55%, rgba(13,11,8,.5)); } .about__frame img{ width:100%; height:auto; transition:transform 1.4s var(--ease); } .about__frame:hover img{ transform:scale(1.045); } /* Pieczątka musi leżeć w obrębie zdjęcia — ramka ma overflow:hidden, więc każde wyjście za krawędź kończy się ściętym kołem. */ .about__sticker{ position:absolute; right:14px; bottom:14px; width:clamp(92px,12vw,124px); aspect-ratio:1; display:grid; place-items:center; background:rgba(13,11,8,.86); backdrop-filter:blur(4px); border:1px solid var(--line); border-radius:50%; z-index:2; } .about__sticker svg{ width:100%; height:100%; animation:spin 22s linear infinite; } /* Chrome ignoruje textLength na , więc napis rozkładamy po obwodzie odstępem liter. 28 znaków × (≈4,6 + 2,5) ≈ 200 z 213 jednostek ścieżki. */ .about__sticker text{ font-family:var(--sans); font-size:9.6px; letter-spacing:.26em; fill:var(--gold); text-transform:uppercase; } .about__sticker-mark{ position:absolute; color:var(--gold); font-size:1.1rem; } @keyframes spin{ to{ transform:rotate(360deg); } } .stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin:clamp(30px,4vw,44px) 0; padding-block:clamp(22px,3vw,30px); border-block:1px solid var(--line-soft); } .stat b{ display:block; font-family:var(--serif); font-weight:400; font-size:clamp(2rem,4.4vw,3rem); line-height:1; color:var(--gold); } .stat span{ font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-2); } /* ========================================================= USŁUGI ========================================================= */ .services{ background:var(--bg); } .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(292px,1fr)); gap:clamp(14px,1.6vw,22px); } .card{ position:relative; isolation:isolate; padding:clamp(28px,3.2vw,42px) clamp(24px,2.6vw,34px) clamp(30px,3.4vw,44px); border:1px solid var(--line-soft); border-radius:var(--r); background:linear-gradient(165deg, var(--bg-2), var(--bg)); overflow:hidden; transform-style:preserve-3d; transition:border-color .55s var(--ease), transform .5s var(--ease), box-shadow .55s var(--ease); } .card::before{ content:''; position:absolute; inset:0; z-index:-1; opacity:0; background:radial-gradient(320px circle at var(--cx,50%) var(--cy,50%), rgba(249,196,107,.13), transparent 62%); transition:opacity .5s var(--ease); } .card:hover{ border-color:var(--line); box-shadow:0 30px 70px -34px rgba(0,0,0,.9); } .card:hover::before{ opacity:1; } .card__no{ display:block; font-family:var(--serif); font-style:normal; font-size:.9rem; letter-spacing:.28em; color:var(--gold-dk); margin-bottom:1.6em; } .card h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.42rem,2.2vw,1.8rem); line-height:1.2; margin:0 0 .55em; color:var(--cream); } .card p{ color:var(--muted); margin:0 0 1.4em; font-size:.96em; } .card ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5em; } .card ul li{ position:relative; padding-left:1.5em; font-size:.86em; color:rgba(243,235,223,.7); letter-spacing:.02em; } .card ul li::before{ content:'✦'; position:absolute; left:0; top:0; color:var(--gold); font-size:.7em; line-height:1.9; } .services__note{ display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; margin-top:clamp(28px,3.4vw,42px); padding:clamp(22px,2.6vw,30px) clamp(24px,3vw,36px); border:1px dashed var(--line); border-radius:var(--r); background:rgba(249,196,107,.032); } .services__note svg{ color:var(--gold); flex:none; } .services__note p{ margin:0; flex:1 1 260px; color:var(--muted); font-size:.96em; } /* ========================================================= DLACZEGO ========================================================= */ .why{ background:linear-gradient(180deg,var(--bg),var(--bg-2)); } .why__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); gap:clamp(20px,2.6vw,34px); } .why__item{ text-align:center; padding:clamp(24px,3vw,34px) 1.2rem; border-top:1px solid var(--line-soft); transition:border-color .5s var(--ease), transform .5s var(--ease); } .why__item:hover{ border-color:var(--gold); transform:translateY(-6px); } .why__ico{ font-size:1.9rem; display:block; margin-bottom:.6rem; filter:grayscale(.15); } .why__item h3{ font-family:var(--serif); font-weight:400; font-size:1.35rem; margin:0 0 .5em; color:var(--gold); } .why__item p{ margin:0; color:var(--muted); font-size:.94em; } /* ========================================================= METAMORFOZY (before / after) ========================================================= */ .ba{ background:var(--bg-2); } .ba__stage{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr); gap:clamp(28px,4vw,64px); align-items:center; } .ba__viewer{ position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:var(--r); border:1px solid var(--line); box-shadow:0 50px 100px -50px rgba(0,0,0,1); user-select:none; touch-action:pan-y; cursor:ew-resize; } .ba__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .ba__clip{ position:absolute; inset:0; width:50%; overflow:hidden; will-change:width; } .ba__clip .ba__img{ width:var(--vw,100%); max-width:none; } .ba__tag{ position:absolute; top:1rem; z-index:4; padding:.45em 1em; border-radius:100px; font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; background:rgba(13,11,8,.72); backdrop-filter:blur(8px); border:1px solid var(--line); color:var(--gold); } .ba__tag--l{ left:1rem; } .ba__tag--r{ right:1rem; } .ba__handle{ position:absolute; top:0; bottom:0; left:50%; z-index:5; width:44px; transform:translateX(-50%); display:grid; place-items:center; cursor:ew-resize; } .ba__handle-line{ position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%); background:linear-gradient(180deg,transparent,var(--gold) 12%,var(--gold) 88%,transparent); box-shadow:0 0 18px rgba(249,196,107,.55); } .ba__handle-grip{ position:relative; z-index:2; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--gold); color:var(--ink); box-shadow:0 8px 30px rgba(0,0,0,.6); transition:transform .4s var(--ease); } .ba__handle:hover .ba__handle-grip,.ba__handle:focus-visible .ba__handle-grip{ transform:scale(1.12); } .ba__handle:focus-visible{ outline:2px solid var(--gold); outline-offset:6px; } .ba__title{ font-family:var(--serif); font-weight:400; font-size:clamp(1.7rem,3vw,2.4rem); margin:0 0 .35em; color:var(--gold); } .ba__desc{ color:var(--muted); margin:0 0 clamp(22px,2.6vw,32px); } .ba__thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; } .ba__thumb{ aspect-ratio:4/5; overflow:hidden; border-radius:var(--r); border:1px solid var(--line-soft); opacity:.5; transition:opacity .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease); } .ba__thumb img{ width:100%; height:100%; object-fit:cover; } .ba__thumb:hover{ opacity:.85; transform:translateY(-3px); } .ba__thumb.is-active{ opacity:1; border-color:var(--gold); } .ba__hint{ margin-top:1.6rem; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted-2); } /* ========================================================= GALERIA ========================================================= */ .gallery{ background:linear-gradient(180deg,var(--bg-2),var(--bg)); } .gallery__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(clamp(180px,20vw,280px),1fr)); gap:clamp(8px,1vw,14px); padding-inline:clamp(8px,1vw,14px); } .g-item{ position:relative; margin:0; overflow:hidden; border-radius:var(--r); aspect-ratio:4/5; cursor:pointer; background:var(--bg-3); } .g-item:nth-child(6n+1){ grid-row:span 2; aspect-ratio:4/10.2; } .g-item:nth-child(6n+4){ grid-row:span 2; aspect-ratio:4/10.2; } .g-item img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), filter .7s var(--ease); filter:saturate(.92) brightness(.92); } .g-item::after{ content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px transparent; background:linear-gradient(180deg,transparent 55%,rgba(13,11,8,.86)); opacity:.7; transition:opacity .6s var(--ease), box-shadow .6s var(--ease); } .g-item:hover img{ transform:scale(1.09); filter:saturate(1.05) brightness(1); } .g-item:hover::after{ opacity:1; box-shadow:inset 0 0 0 1px var(--gold); } .g-item figcaption{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.1rem 1.2rem; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); transform:translateY(10px); opacity:0; transition:transform .55s var(--ease), opacity .55s var(--ease); } .g-item:hover figcaption{ transform:none; opacity:1; } .gallery__foot{ margin-top:clamp(34px,4vw,52px); text-align:center; } /* ========================================================= DOJAZD ========================================================= */ .area{ background:var(--bg); } .area__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:clamp(40px,6vw,88px); align-items:center; } .area__list{ list-style:none; padding:0; margin:clamp(26px,3vw,36px) 0 clamp(30px,3.4vw,42px); display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:.55rem .8rem; } .area__list li{ position:relative; padding-left:1.35em; font-size:.9em; color:rgba(243,235,223,.76); letter-spacing:.04em; } .area__list li::before{ content:''; position:absolute; left:0; top:.66em; width:5px; height:5px; border-radius:50%; background:var(--gold); } .radar{ position:relative; aspect-ratio:1; width:100%; max-width:400px; margin-inline:auto; border-radius:50%; background:radial-gradient(circle, rgba(249,196,107,.07), transparent 68%); /* Obracany kwadrat (.radar__sweep) ma prostokąt otaczający √2 razy większy, więc bez tego wystaje ~60 px poza okrąg i robi poziomy scroll na telefonie. */ overflow:hidden; } .radar__ring{ position:absolute; inset:0; margin:auto; border-radius:50%; border:1px solid rgba(249,196,107,.18); } .radar__ring:nth-of-type(1){ width:34%; height:34%; } .radar__ring:nth-of-type(2){ width:66%; height:66%; border-style:dashed; } .radar__ring:nth-of-type(3){ width:100%; height:100%; } .radar__sweep{ position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, transparent 0deg, rgba(249,196,107,.22) 38deg, transparent 62deg); animation:spin 5.5s linear infinite; } .radar__core{ position:absolute; inset:0; margin:auto; width:13px; height:13px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 0 rgba(249,196,107,.6); animation:pulse 2.4s infinite; } .radar__label{ position:absolute; left:50%; top:calc(50% + 18px); transform:translateX(-50%); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); } .radar__pin{ position:absolute; left:var(--x); top:var(--y); width:7px; height:7px; border-radius:50%; background:rgba(243,235,223,.75); box-shadow:0 0 10px rgba(249,196,107,.7); animation:blink 3.4s ease-in-out infinite; } .radar__pin:nth-of-type(even){ animation-delay:1.2s; } @keyframes blink{ 0%,100%{ opacity:.35; transform:scale(.85); } 50%{ opacity:1; transform:scale(1.15); } } /* ========================================================= OPINIE ========================================================= */ .reviews{ background:linear-gradient(180deg,var(--bg),var(--bg-2)); overflow:hidden; } .reviews__rail{ display:flex; gap:clamp(14px,1.6vw,22px); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1.6rem; margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad); scrollbar-width:none; cursor:grab; } .reviews__rail::-webkit-scrollbar{ display:none; } .reviews__rail.is-dragging{ cursor:grabbing; scroll-snap-type:none; } .review{ flex:0 0 clamp(280px,31vw,400px); scroll-snap-align:center; padding:clamp(28px,3vw,40px); border:1px solid var(--line-soft); border-radius:var(--r); background:linear-gradient(160deg,var(--bg-3),var(--bg-2)); display:grid; gap:1.1rem; align-content:start; transition:border-color .5s var(--ease), transform .5s var(--ease); } .review:hover{ border-color:var(--line); transform:translateY(-5px); } .review blockquote{ margin:0; font-family:var(--serif); font-size:1.24rem; line-height:1.52; color:rgba(243,235,223,.94); font-style:italic; } .review blockquote::before{ content:'„'; color:var(--gold); } .review blockquote::after{ content:'"'; color:var(--gold); } .review footer{ display:grid; gap:.15rem; } .review footer b{ font-weight:500; font-size:.9rem; letter-spacing:.06em; } .review footer span{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); } .reviews__hint{ text-align:center; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted-2); margin:0; } /* ========================================================= KONTAKT ========================================================= */ .contact{ position:relative; background:var(--ink); overflow:hidden; text-align:center; } .contact__glow{ position:absolute; left:50%; top:38%; transform:translate(-50%,-50%); width:min(900px,120vw); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(249,196,107,.14), transparent 62%); pointer-events:none; animation:breathe 7s ease-in-out infinite; } @keyframes breathe{ 0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.9; } 50%{ transform:translate(-50%,-50%) scale(1.12); opacity:1; } } .contact .wrap{ position:relative; z-index:2; } .phone-cta{ display:inline-grid; gap:.15rem; justify-items:center; padding:clamp(30px,4vw,46px) clamp(40px,6vw,80px); border:1px solid var(--line); border-radius:var(--r); background:rgba(249,196,107,.04); backdrop-filter:blur(8px); transition:background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); will-change:transform; } .phone-cta:hover{ background:rgba(249,196,107,.09); border-color:var(--gold); box-shadow:0 30px 80px -30px rgba(249,196,107,.4); } .phone-cta__ico{ color:var(--gold); margin-bottom:.5rem; } .phone-cta__num{ font-family:var(--serif); font-weight:400; font-size:clamp(2.4rem,7vw,4.6rem); line-height:1; letter-spacing:.01em; color:var(--gold); } .phone-cta__sub{ font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted-2); margin-top:.7rem; } .contact__cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(224px,1fr)); gap:clamp(12px,1.4vw,18px); margin-top:clamp(36px,4.4vw,56px); } .ccard{ display:grid; gap:.3rem; justify-items:center; padding:clamp(24px,2.8vw,32px) 1.4rem; border:1px solid var(--line-soft); border-radius:var(--r); background:var(--bg-2); transition:border-color .5s var(--ease), transform .5s var(--ease), background .5s; } .ccard:not(.ccard--static):hover{ border-color:var(--gold); transform:translateY(-5px); background:var(--bg-3); } .ccard__ico{ width:40px; height:40px; display:grid; place-items:center; margin-bottom:.4rem; border:1px solid var(--line); border-radius:50%; color:var(--gold); font-size:1rem; } .ccard b{ font-weight:500; font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted-2); } .ccard span:last-child{ font-size:.94rem; color:var(--cream); letter-spacing:.02em; } /* ========================================================= STOPKA ========================================================= */ .footer{ background:var(--ink); border-top:1px solid var(--line-soft); } .footer__in{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:clamp(30px,4vw,60px); padding-block:clamp(38px,4.5vw,58px); } .footer__brand img{ width:132px; height:auto; margin-bottom:1.2rem; } .footer__brand p{ margin:0; color:var(--muted); font-size:.9em; } .footer__nav{ display:grid; gap:.55rem; align-content:start; } .footer__nav a, .footer__contact a{ font-size:.82rem; letter-spacing:.1em; color:var(--muted); transition:color .35s; } .footer__nav a:hover, .footer__contact a:hover{ color:var(--gold); } .footer__contact{ display:grid; gap:.55rem; align-content:start; } .footer__bar{ border-top:1px solid var(--line-soft); padding:1.3rem var(--pad); text-align:center; font-size:.7rem; letter-spacing:.1em; color:var(--muted-2); } /* ========================================================= LIGHTBOX ========================================================= */ .lightbox{ position:fixed; inset:0; z-index:9500; display:grid; place-items:center; background:rgba(8,7,5,.95); backdrop-filter:blur(10px); opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s; } .lightbox.is-open{ opacity:1; visibility:visible; } .lightbox__fig{ margin:0; display:grid; gap:1rem; justify-items:center; padding:5vh 6vw; max-width:100%; } .lightbox__fig img{ max-width:min(84vw,760px); max-height:78vh; width:auto; height:auto; object-fit:contain; border:1px solid var(--line); border-radius:var(--r); transform:scale(.94); opacity:0; transition:transform .6s var(--ease), opacity .5s var(--ease); } .lightbox.is-open .lightbox__fig img{ transform:none; opacity:1; } .lightbox__fig figcaption{ font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); } .lightbox__close,.lightbox__nav{ position:absolute; z-index:2; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); color:var(--gold); font-size:1.4rem; background:rgba(13,11,8,.6); transition:background .4s, transform .4s var(--ease), border-color .4s; } .lightbox__close:hover,.lightbox__nav:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); } .lightbox__close{ top:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px); font-size:1rem; } .lightbox__nav--prev{ left:clamp(10px,2.4vw,32px); top:50%; transform:translateY(-50%); } .lightbox__nav--next{ right:clamp(10px,2.4vw,32px); top:50%; transform:translateY(-50%); } .lightbox__nav--prev:hover{ transform:translateY(-50%) scale(1.08); } .lightbox__nav--next:hover{ transform:translateY(-50%) scale(1.08); } /* ========================================================= FAB (mobile) ========================================================= */ .call-fab{ position:fixed; z-index:820; right:16px; bottom:16px; display:none; align-items:center; gap:.6em; padding:.95em 1.5em; border-radius:100px; background:linear-gradient(135deg,var(--gold),#E9AE4F); color:var(--ink); font-size:.76rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; box-shadow:0 14px 40px -12px rgba(249,196,107,.75); transform:translateY(120%); transition:transform .6s var(--ease); } .call-fab.is-visible{ transform:none; } /* ========================================================= REVEAL ========================================================= */ [data-reveal]{ will-change:transform,opacity; } [data-reveal="fade"]{ opacity:0; transform:translateY(30px); transition:opacity .95s var(--ease), transform .95s var(--ease); transition-delay:var(--d,0ms); } [data-reveal="clip"]{ opacity:0; clip-path:inset(0 0 100% 0); transform:scale(1.03); transition:opacity 1s var(--ease), clip-path 1.25s var(--ease), transform 1.4s var(--ease); transition-delay:var(--d,0ms); } [data-reveal].is-in{ opacity:1; transform:none; clip-path:inset(0 0 0 0); } .h2 .ln-wrap{ display:block; overflow:hidden; } .h2 .ln{ display:block; transform:translateY(105%); transition:transform 1.05s var(--ease); transition-delay:calc(var(--i) * 90ms); } .h2.is-in .ln{ transform:none; } /* ========================================================= RESPONSYWNOŚĆ ========================================================= */ @media (max-width: 1080px){ .nav__links{ display:none; } .nav__burger{ display:block; } .about__grid,.area__grid{ grid-template-columns:1fr; } .about__media{ max-width:460px; margin-inline:auto; } .ba__stage{ grid-template-columns:1fr; } .ba__viewer{ max-width:520px; margin-inline:auto; width:100%; } .ba__side{ text-align:center; } .ba__thumbs{ max-width:440px; margin-inline:auto; } .footer__in{ grid-template-columns:1fr 1fr; } } @media (max-width: 720px){ .nav__cta{ display:none; } .call-fab{ display:inline-flex; } /* Wskaźnik „przewiń" jest przyklejony do dołu sekcji, a treść hero bywa wyższa niż ekran — bez zapasu nachodził na wiersz z opiniami. Zapas + odchudzony wskaźnik, żeby całość nadal mieściła się na ekranie. */ .hero{ min-height:92svh; padding-top:96px; padding-bottom:122px; } .hero__scroll{ gap:.5rem; bottom:22px; } .hero__scroll-line{ height:34px; } /* mniejsze rozstrzelenie — „MOBILNY FRYZJER" mieści się w jednym wierszu */ .hero__sub{ letter-spacing:.3em; text-indent:.3em; } /* przycisk „Sprawdź swój adres" na środku kolumny */ .area__text .btn{ display:flex; width:max-content; margin-inline:auto; } .stats{ grid-template-columns:1fr; gap:1rem; text-align:center; } .g-item:nth-child(6n+1),.g-item:nth-child(6n+4){ grid-row:auto; aspect-ratio:4/5; } .gallery__grid{ grid-template-columns:repeat(2,1fr); } .footer__in{ grid-template-columns:1fr; text-align:center; justify-items:center; } .footer__nav,.footer__contact{ justify-items:center; } /* logo to element blokowy — text-align rodzica go nie wyśrodkuje */ .footer__brand img{ margin-inline:auto; } .services__note{ text-align:center; justify-content:center; } .contact{ padding-bottom:calc(var(--sect) + 40px); } .review blockquote{ font-size:1.12rem; } /* miejsce pod pływający przycisk „Zadzwoń", by nie przykrywał stopki */ .footer__bar{ padding-bottom:80px; } /* wygodniejsze cele dotykowe: linki tekstowe dostają wysokość palca */ .footer__nav a, .footer__contact a, .menu__foot a{ display:inline-flex; align-items:center; min-height:40px; } .footer__nav, .footer__contact{ gap:0; } .link-arrow{ padding-block:.65em; } .btn--small{ padding:1em 1.8em; } /* lightbox: zdjęcie w całości w kadrze, strzałki pod nim (a nie na twarzy) */ .lightbox__fig{ padding:8vh 3vw 12vh; } .lightbox__fig img{ max-width:88vw; max-height:66vh; } .lightbox__nav{ top:auto; bottom:4vh; transform:none; width:46px; height:46px; } .lightbox__nav--prev{ left:22vw; } .lightbox__nav--next{ right:22vw; } .lightbox__nav--prev:hover,.lightbox__nav--next:hover{ transform:scale(1.08); } } @media (hover: none){ .cursor,.spotlight{ display:none; } } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } [data-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important; } .h2 .ln{ transform:none !important; } .hero__title .ch,.hero__sub .ch{ opacity:1 !important; transform:none !important; filter:none !important; } .hero__canvas{ display:none; } } @media print{ .loader,.cursor,.grain,.spotlight,.scrollbar,.call-fab,.hero__canvas,.menu{ display:none !important; } body{ background:#fff; color:#111; } }