/* REDFORD V6 · hero.css (TOR A, KOREKTA 2 v2). Płaskie kolory, bez papieru i bez 3D. * Preloader: logo REDFORD (czerwone) -> litery wychodzą maską -> znak R leci do hero. * Hero: płaski czerwony znak R przy prawej krawędzi; z jego nogi wychodzi gruby czerwony patyk (SVG), rysowany scrollem * w dół do ramki wideo (1325x750, zaokrąglenie 28 px). Dalej: pas z biegnącym tekstem i sekcja O nas. * KOREKTA 3: tło z głębią (gradient papier -> #ECECE6, czerwona poświata 6-8% w prawym dolnym rogu, 3 szklane karty za znakiem). */ /* ---------- preloader (tylko html.pl-on: pierwsza wizyta w sesji, z JS, bez reduced-motion) ---------- */ .pl{display:none} html.pl-on{overflow:hidden} html.pl-on .pl{display:block;position:fixed;inset:0;z-index:var(--z-pl);background:var(--paper);pointer-events:none} .pl-logo{--plw:min(56vw,760px);position:absolute;left:calc(50% - var(--plw) / 2);top:calc(50% - var(--plw) * 110 / 1278);width:var(--plw);aspect-ratio:1278/220} .pl-mark{position:absolute;left:0;top:2.377%;width:20.356%;height:95.093%;max-width:none;display:block} .pl-l{position:absolute;display:block;overflow:visible} .pl-l path{fill:var(--red)} html.pl-on .pl-mark,html.pl-on .pl-l{clip-path:inset(0 100% 0 0)} html.pl-on .hr-mark,html.pl-on .hr-stick{visibility:hidden} /* ---------- hero ---------- */ .hr-wrap{position:relative;--hs:clamp(56px,7vw,110px);--rw:calc(var(--hs) / .1396);--rh:calc(var(--rw) * .80419)} .hr{position:relative;height:100vh;height:100svh;min-height:640px} /* R12-B: svh z fallbackiem vh (desktop: svh = vh) */ .hr-mark{position:absolute;right:var(--m);top:max(104px,calc(50vh - var(--rh) / 2 - 40px));z-index:1;width:var(--rw);height:var(--rh);pointer-events:none} /* ROZBIÓRKA: gigantyczny znak po prawej ZA nagłówkiem (u nich ukośnik za "worden"), od 120 px pod nagłówkiem strony; * wysokość tak, żeby krótki patyk pod nogą R (0.6 grubości) kończył się 24 px nad dolnym rzędem (koło | zdanie + pigułka) */ @media (min-width:1024px){ .hr-wrap{--pt:max(150px,24.5vh);--fs:min(134px,8.6vw);--pb:max(118px,13vh);--mt:120px;--rh:calc((max(100vh,640px) - var(--pb) - 87px - var(--mt)) / 1.1045);--rw:calc(var(--rh) / .80419);--hs:calc(var(--rw) * .1396)} .hr-mark{top:var(--mt)} } .hr-mark-img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;display:block} .hr-stick{display:none;position:absolute;left:0;top:0;z-index:1;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none;stroke:var(--red);stroke-linejoin:round} html.hr-stick-on .hr-stick{display:block} /* R8-A: bez JS brak .hr-stub (usunięty): sam znak R jak w pliku logo */ /* ---------- głębia tła (KOREKTA 3): miękki gradient, poświata, 3 szklane karty za znakiem (paralaksa w hero.js) ---------- */ .hr-bg{--mt:max(104px,calc(50vh - var(--rh) / 2 - 40px));position:absolute;left:0;right:0;top:0;height:calc(max(100vh,640px) + 40vh);z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(56% 52% at 96% calc(100% - 40vh),rgba(200,23,29,.08) 0%,rgba(200,23,29,.045) 38%,rgba(200,23,29,0) 72%),radial-gradient(18vw 18vw at 84% 64vh,rgba(200,23,29,.07) 0%,rgba(200,23,29,0) 100%),radial-gradient(46% 56% at 14% 38%,rgba(255,255,255,.72) 0%,rgba(255,255,255,0) 72%),linear-gradient(100deg,var(--paper) 0%,#ECECE6 100%);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 calc(100% - 40vh),transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 calc(100% - 40vh),transparent 100%)} .hr-glass{position:absolute;will-change:transform} .hr-glass-p,.hr-glass-in{width:100%;height:100%} .hr-glass-in{position:relative;overflow:hidden;border-radius:43px;border:1px solid rgba(255,255,255,.75);background:linear-gradient(150deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.1) 40%,rgba(255,255,255,.03) 64%,rgba(255,255,255,.16) 88%,rgba(200,23,29,.045) 100%);box-shadow:0 40px 80px -40px rgba(14,14,14,.26),0 10px 24px -18px rgba(14,14,14,.12),inset 0 1px 0 rgba(255,255,255,.95),inset 1px 0 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(14,14,14,.05),inset 0 0 0 6px rgba(255,255,255,.06);animation:hr-float 15s ease-in-out infinite alternate} .hr-glass-in::before{content:"";position:absolute;inset:-30%;background:linear-gradient(118deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.5) 47%,rgba(255,255,255,.1) 52%,rgba(255,255,255,0) 60%);pointer-events:none} .hr-glass-in::after{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 30%,#fff 70%,rgba(255,255,255,0));opacity:.9;pointer-events:none} .hr-glass--1{width:46.5vw;aspect-ratio:670/921;right:-4.7vw;top:-28px} .hr-glass--2{width:37vw;aspect-ratio:533/759;right:10.8vw;top:84px} .hr-glass--3{width:24vw;aspect-ratio:346/585;right:-4.6vw;top:135px} .hr-glass--1 .hr-glass-in{rotate:-8deg;animation-duration:17s} .hr-glass--2 .hr-glass-in{rotate:6deg;animation-duration:13s;animation-delay:-5s} .hr-glass--3 .hr-glass-in{rotate:-14deg;animation-duration:11s;animation-delay:-8s} .hr-glass-in{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .hr-glass--1 .hr-glass-in{transform:perspective(1600px) rotateY(-34deg)} .hr-glass--2 .hr-glass-in{transform:perspective(1600px) rotateY(32deg)} .hr-glass--3 .hr-glass-in{transform:perspective(1600px) rotateY(-48deg)} .hr-glass--4 .hr-glass-in{transform:perspective(1600px) rotateY(31deg)} .hr-glass--4{width:18.1vw;aspect-ratio:261/353;right:33.9vw;top:406px} .hr-glass--4 .hr-glass-in{rotate:13deg;animation-duration:15s;animation-delay:-3s} @keyframes hr-float{from{translate:0 -10px}to{translate:0 12px}} .hr-wrap.is-away .hr-glass-in{animation-play-state:paused} @media (prefers-reduced-motion:reduce){.hr-glass-in{animation:none}} .hr-in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;padding:var(--pt,150px) var(--m) var(--pb,40px)} .hr-main{width:100%} .hr-h1{margin:0;font-size:var(--fs,56px);line-height:1.1;letter-spacing:-.035em;font-weight:700} .hr-row{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-top:auto} .hr-lead{margin:0;width:min(420px,29vw);font-size:clamp(17px,1.6vw,23px);line-height:1.38;letter-spacing:-.01em} .hr-foot-in{display:flex;align-items:center;gap:28px} /* ---------- ramka zdjęcia (koniec patyka); R6-A: jedno statyczne zdjęcie zamiast wideo, bez Play i bez pełnego ekranu ---------- */ .hv{position:relative;padding:max(52vh,420px) 0 120px} .hv-intro{position:absolute;left:var(--m);top:190px;z-index:2;width:min(560px,39vw)} .hv-intro-t{margin:0;font-size:clamp(16px,1.4vw,20px);line-height:1.48;letter-spacing:-.01em} .hv-slot{position:relative;margin:0 auto;width:min(1325px,calc(100vw - 112px),calc((100vh - 120px) * 1.7667));aspect-ratio:1325/750} .hv-frame{position:absolute;inset:0;z-index:2;overflow:hidden;border-radius:28px;background:var(--ink)} html.hr-live .hv-frame{border-radius:0} /* zdjęcie: kadr cover, twarze trzech osób w kadrze (object-position 50% 30%), bez transformu, przejść i hover */ .hv-img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 30%;display:block} /* ---------- O nas (mkvision "Wie we zijn", pomiar 1440: etykieta 23, zdanie 52/1.4 na 1143 px, 1 fraza w akcencie, 2 pigułki z obrysem 43 px) ---------- */ .onas{padding:156px var(--m) 110px} .onas-in{width:min(79.4vw,1525px)} .onas-lbl{margin:0 0 16px;font-size:clamp(17px,1.6vw,23px);line-height:1.38;font-weight:700;letter-spacing:0} .onas-t{margin:0;color:var(--ink);font-size:clamp(30px,3.6vw,52px);line-height:1.4;letter-spacing:-.02em;font-weight:700} .onas-acc{color:var(--red)} .onas-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:52px} .pill--out{height:43px;padding:0 23px;background:none;color:var(--ink);font-size:15px;box-shadow:inset 0 0 0 1px var(--red);transition:background-color .4s var(--e-out),color .4s var(--e-out)} @media (hover:hover) and (pointer:fine){.pill--out:hover{background:var(--red);color:var(--paper)}} .pill-roll{display:grid;height:1.2em;overflow:hidden;line-height:1.2} .pill-roll>span{grid-area:1/1;transition:transform .55s var(--e-out)} .pill-roll>span+span{transform:translateY(110%)} @media (hover:hover) and (pointer:fine){.pill--out:hover .pill-roll>span:first-child{transform:translateY(-110%)}} @media (hover:hover) and (pointer:fine){.pill--out:hover .pill-roll>span+span{transform:none}} @media (max-width:1023px){ .hr-wrap{--hs:40px} .hr{height:auto;min-height:100svh} /* KOREKTA 4: dół 116 px (nad pigułką cookies, bottom 16 + 60 px); R2-A: przycisk hero zostaje na tej wysokości */ .hr-in{position:relative;min-height:100svh;padding:120px var(--m) 116px} .hr-main{width:100%;margin:auto 0 0} .hr-row{flex-direction:column-reverse;align-items:stretch;gap:28px;margin-top:40px} .hr-lead{width:auto} .hr-h1{font-size:clamp(34px,12.3vw,56px)} .hr-mark{top:96px} .hv{padding:56px 0 80px} .hv-slot{width:calc(100vw - 2 * var(--m))} .hv-intro{position:static;width:auto;margin:0 var(--m) 48px} .hr-bg{--mt:96px;height:calc(100svh + 40vh)} .hr-glass-in{animation:none} .hr-glass-in{-webkit-backdrop-filter:none;backdrop-filter:none} .hr-glass--1 .hr-glass-in{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .onas{padding:96px var(--m) 72px} .onas-in{width:auto} .onas-links .pill{flex:1 1 100%} .onas-lbl,.onas-body{grid-column:1/-1} .onas-t{font-size:clamp(24px,6.6vw,34px)} } /* KOREKTA 7 (18.10, Rafał: "teraz pod mobile dostosuj"): hero i O nas na telefonie */ @media (max-width:1023px){ .hr-in{padding-top:max(104px,13vh)} .hr-mark{top:84px;opacity:.96} .hr-h1{margin-top:clamp(120px,36vw,190px)} .hv{padding-top:36px} .hv-intro-t{font-size:17px;line-height:1.5} .hv-slot{border-radius:22px;overflow:hidden} .onas{padding-top:72px} .onas-t{font-size:clamp(26px,7.4vw,36px);line-height:1.34} .onas-links{margin-top:36px} } @media (max-width:1023px){.hr-mark{top:78px;width:min(72vw,300px);height:auto;aspect-ratio:1000/804.19}.hr-h1{margin-top:clamp(150px,44vw,210px)}} @media (max-width:1023px){.hr-mark{width:min(62vw,250px);top:84px}.hr-h1{margin-top:clamp(138px,40vw,190px)}} /* KOREKTA 8: mobile, patyk z nogi R. Tekst hero (nagłówek, zdanie, przycisk) jest nad patykiem (z-index 2 > 1). R8-A2 (Rafał: kreska ma być przez cały czas czerwona): bez bladej fazy (dawne opacity .18 do klasy .is-clear usunięte), pełny #C8171D od pierwszego px scrolla; czytelność tekstu daje maska SVG z hero.js (przerwa w kresce wokół zdania, przycisku i linii nagłówka). */ @media (max-width:1023px){ .hr-stick{stroke-linecap:round} } /* KOREKTA 8: mobile, akapit pod wideo (patyk dochodzi do ramki bez przecinania tekstu) */ @media (max-width:1023px){ .hv{display:flex;flex-direction:column} .hv-slot{order:1} .hv-intro{order:2;margin:28px var(--m) 0} } /* KOREKTA 8A (18.10, Rafał): zdanie "Strony jasne, bez chaosu..." i przycisk "Zapytaj o wycenę" w lewym bloku hero. Kolejność od góry: zdanie, przycisk (R2-A: licznik usunięty). Prawa strona hero tylko ze znakiem R. R6-A: blok w normalnym przepływie hero (bez sticky i bez transformu przy scrollu), odjeżdża razem z hero. */ .hr-row{justify-content:flex-start} .hr-foot{position:relative;z-index:3} .hr-foot-in{flex-direction:column;align-items:flex-start;gap:22px} .hr-foot .hr-lead{width:min(420px,32vw)} .hr-foot .hr-pill{margin-top:2px} @media (max-width:1023px){ .hr-foot-in{gap:18px} .hr-foot .hr-lead{width:auto} .hr-foot .hr-pill{align-self:stretch} } /* KOREKTA 8A (Rafał: "przycięte w wysokości, nie widać całych liter"): wyższa linia (1.18) i maska linii z wejścia (SplitText .ln-mask, overflow clip) powiększona o .18em u góry i u dołu, z ujemnym marginesem, żeby układ się nie przesunął. Ogonki p/j/y i znaki diakrytyczne mieszczą się w masce w spoczynku i przez całą animację wejścia (start yPercent 135) i wyjścia (y -1.4 wysokości). */ .hr-h1{line-height:1.18} .hr-h1 .ln-mask{padding-block:.18em;margin-block:-.18em} /* R9-A: .serif-i w tym samym kroju i rozmiarze co linia (bez kursywy), więc mieści się w masce jak reszta tekstu */ /* KOREKTA 8A: obrys wokół ramki (R4-A: czerwony 7 px, niżej) */ /* Obrys leży na .hv-slot pod ramką (z-index 1 < 2), 4 px na zewnątrz; w trybie scrolla ma ten sam kształt co clip-path ramki (--hv-ring, --hv-ro z hero.js). */ .hv-slot::before{content:"";position:absolute;inset:-4px;z-index:1;border-radius:32px;background:rgba(14,14,14,.12);clip-path:var(--hv-ring,none);opacity:var(--hv-ro,1);pointer-events:none} @media (max-width:1023px){.hv-slot{overflow:visible}.hv-slot::before{border-radius:32px}} /* KOREKTA 8A (R2-A: O nas ma jeden akapit .onas-t, opis agencji na początku). Akapit przy wideo: dawny nagłówek logotypów (kursywa serif i akcent jak w .lg4-h), rozmiar dopasowany do kolumny .hv-intro. */ .hv-intro-t{font-size:clamp(22px,2.1vw,32px);line-height:1.32;letter-spacing:-.02em;font-weight:700} .hv-intro-t .lg4-acc{color:var(--red)} @media (max-width:1023px){.hv-intro-t{font-size:clamp(22px,6.4vw,28px);line-height:1.3}} /* R2-A (18.10, Rafał runda 2): z hero usunięty licznik (300 / 5+). Lewy blok to zdanie + przycisk, dół przycisku na tej samej wysokości co wcześniej (margin-top:auto w .hr-in). Akapit przy wideo niżej: top 190 -> 290 px od początku .hv (desktop; ramka wideo schodzi razem z nim, hero.js layout: frameTop >= dół akapitu + 58 px); telefon: odstęp pod ramką 28 -> 118 px. */ @media (min-width:1024px){.hv-intro{top:290px}} @media (max-width:1023px){.hv-intro{margin-top:118px}} /* R4-A (19.10, Rafał runda 4) --------------------------------------------------------------------------------------------------- (3) Znak R niżej i bardziej w lewo. Desktop: górna krawędź znaku pod pierwszą linijką nagłówka "Projektujemy i budujemy" (pt + dół ogonków j, y, p ok. 1.15 fs + 22 px; pomiar pikseli qa-R4A/markink.js), więc czerwień nie wchodzi na litery. Skala znaku najwyżej -3% (--rh0 to dotychczasowa wysokość), żeby jak najmniej wystawał pod dół okna. Prawa krawędź 3.8vw dalej od brzegu (1440: 55 px), cały znak w poziomie w oknie. Telefon: znak nad nagłówkiem, przesunięcie proporcjonalne (16 px niżej, 14 px w lewo). */ @media (min-width:1024px){ .hr-wrap{--rh0:calc((max(100vh,640px) - var(--pb) - 87px - var(--mt)) / 1.1045);--mt2:calc(var(--pt) + var(--fs) * 1.16 + 22px);--rh:clamp(calc(var(--rh0) * .97),calc(max(100vh,640px) - var(--mt2) - 12px),var(--rh0));--rw:calc(var(--rh) / .80419);--hs:calc(var(--rw) * .1396)} .hr-mark{top:min(var(--mt2),calc(max(100vh,640px) - var(--rh) - 8px));right:calc(var(--m) + 3.8vw)} } @media (max-width:1023px){.hr-mark{top:100px;right:calc(var(--m) + 14px)}} /* R6-A (Rafał: "logo ustaw wyżej"). Telefon: znak wraca na 84 px od góry (jak przed R4-A; przyciski menu kończą się na 62 px), x bez zmian. Desktop bez zmiany: pomiar pikseli (qa-R6A/markshift.py) daje najwyżej 1 px (1920) do 13 px (1366) podniesienia przy luzie >= 10 px do liter nagłówka, bo znak stoi obok drugiej linijki "strony, sklepy", tuż pod pierwszą "Projektujemy i budujemy". */ @media (max-width:1023px){.hr-mark{top:84px}} /* R6-A2 (Rafał: "przesuń duże logo wyżej", znak w całości na pierwszym ekranie). Desktop: znak MNIEJSZY, skalowany względem PRAWEJ krawędzi (prawy brzeg jak w R6-A), tak że dół znaku (płaskie cięcie nogi) jest >= 64 px nad dołem okna; skala >= 0.80 (pomiar qa-R6A2: 0.87 do 0.91). Drugi warunek: krótki patyk spoczynkowy pod nogą (koniec ok. 0.85 t = 0.144 rh pod cięciem) kończy się >= 20 px nad dołem okna, bo wizualnie przedłuża lewą nogę (na 1920/1728 przy samym warunku 64 px dochodził do dołu). Kreska liczy start z getBoundingClientRect znaku (hero.js), więc idzie za nowym rozmiarem. Góra znaku wyżej tylko o tyle, ile pozwala luz >= 10 px do ogonków pierwszej linijki "Projektujemy i budujemy" (górna belka R leży pod nią na całej szerokości, przesunięcie w prawo/skala tego nie zmieniają; qa-R6A2/search.py): 12 px do 1499, 10 px do 1535, wyżej 0. */ @media (min-width:1024px){ .hr-wrap{--rhA:clamp(calc(var(--rh0) * .97),calc(max(100vh,640px) - var(--mt2) - 12px),var(--rh0));--mtA:min(var(--mt2),calc(max(100vh,640px) - var(--rhA) - 8px));--rh:clamp(calc(var(--rhA) * .8),min(calc(max(100vh,640px) - var(--mtA) - 64px),calc((max(100vh,640px) - var(--mtA) - 20px) / 1.15)),var(--rhA));--rw:calc(var(--rh) / .80419);--hs:calc(var(--rw) * .1396)} .hr-mark{top:var(--mtA);right:calc(var(--m) + 3.8vw)} } @media (min-width:1280px) and (max-width:1499px){.hr-mark{top:calc(var(--mtA) - 12px)}} @media (min-width:1500px) and (max-width:1535px){.hr-mark{top:calc(var(--mtA) - 10px)}} /* (1) Obrys ramki wideo: czerwony #C8171D, 7 px (telefon 5 px), zaokrąglenie = promień ramki + grubość; kształt przy rozwijaniu z hero.js (--hv-ring) */ .hv-slot{--hv-bw:7px} .hv-slot::before{inset:calc(var(--hv-bw) * -1);border-radius:calc(28px + var(--hv-bw));background:var(--red)} @media (max-width:1023px){.hv-slot{--hv-bw:5px}.hv-slot::before{border-radius:calc(22px + var(--hv-bw))}} /* R4-A2 (19.10, Rafał: "przy skręcie widać białe pole, a przez cały czas powinno być czerwone"). Kołnierz (przejście kreski w ramkę): obrys ma krycie 1 od pierwszej klatki (hero.js), a nad ramką leży czerwona nakładka #C8171D w kształcie obrysu (.hv-slot::after, --hv-cv z hero.js: 1 przy wąskim pasku, 0 od 30% rozszerzenia), więc w pasku nie widać górnego skrawka zdjęcia ani ciemnego szwu antyaliasingu na krawędzi clip-path ramki. */ .hv-slot::after{content:"";position:absolute;inset:calc(var(--hv-bw) * -1);z-index:3;border-radius:calc(28px + var(--hv-bw));background:var(--red);clip-path:var(--hv-ring,none);opacity:var(--hv-cv,0);pointer-events:none} @media (max-width:1023px){.hv-slot::after{border-radius:calc(22px + var(--hv-bw))}} /* R23-A (21.10, Rafał: film pod hero zamiast zdjęcia zespołu).