/* nowa.css (29.09.2026): style nowej wersji aiwebstudio.pl dla podstron. Kopia arkusza z src/pages/propozycja-glowna.astro (tam styl zostaje w stronie). Tokeny także na :root, żeby menu i stopka działały na stronie bez klasy .pg (deweloperzy). */ :root{ --tlo:#F7F5F2; --tlo2:#EFEBE4; --tusz:#16181D; --szary:#50545B; --linia:rgba(22,24,29,.16); --ochra:#8C5A0F; --ochra2:#6E4709; --noc:#16181D; --noc-tekst:#EDEAE4; --noc-szary:#B3ADA4; --noc-ochra:#D9A441; --f-nag:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif; --f-glos:'SerifPG',Georgia,serif; } /* ===== Propozycja głównej: tokeny lokalne (wariant A marki, patrz 01_DOKUMENT_STARTOWY.md) ===== */ @font-face{font-family:'SerifPG';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonty/instrument-serif/instrument-serif-italic-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'SerifPG';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonty/instrument-serif/instrument-serif-italic-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family: 'Bricolage Grotesque';font-style: normal;font-weight: 200 800;font-stretch: 100%;font-display: swap;src: url(/assets/fonty/bricolage-grotesque/bricolage-grotesque-latin-ext-1.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family: 'Bricolage Grotesque';font-style: normal;font-weight: 200 800;font-stretch: 100%;font-display: swap;src: url(/assets/fonty/bricolage-grotesque/bricolage-grotesque-latin-2.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* 29.09 (Wiki): nagłówki Bricolage Grotesque, opowieści Newsreader, duże liczby Fraunces. Pliki z _BIBLIOTEKA_FONTOW, latin + latin-ext. */ @font-face{font-family: 'Newsreader';font-style: normal;font-weight: 400;font-display: swap;src: url(/assets/fonty/newsreader/newsreader-latin-ext-1.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family: 'Newsreader';font-style: normal;font-weight: 400;font-display: swap;src: url(/assets/fonty/newsreader/newsreader-latin-2.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family: 'Newsreader';font-style: normal;font-weight: 500;font-display: swap;src: url(/assets/fonty/newsreader/newsreader-latin-ext-1.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family: 'Newsreader';font-style: normal;font-weight: 500;font-display: swap;src: url(/assets/fonty/newsreader/newsreader-latin-2.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family: 'Fraunces';font-style: normal;font-weight: 400;font-display: swap;src: url(/assets/fonty/fraunces/fraunces-latin-ext-1.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family: 'Fraunces';font-style: normal;font-weight: 400;font-display: swap;src: url(/assets/fonty/fraunces/fraunces-latin-2.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family: 'Fraunces';font-style: normal;font-weight: 500;font-display: swap;src: url(/assets/fonty/fraunces/fraunces-latin-ext-1.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family: 'Fraunces';font-style: normal;font-weight: 500;font-display: swap;src: url(/assets/fonty/fraunces/fraunces-latin-2.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family: 'Fraunces';font-style: normal;font-weight: 600;font-display: swap;src: url(/assets/fonty/fraunces/fraunces-latin-ext-1.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family: 'Fraunces';font-style: normal;font-weight: 600;font-display: swap;src: url(/assets/fonty/fraunces/fraunces-latin-2.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} html.pg{ --tlo:#F7F5F2; --tlo2:#EFEBE4; --tusz:#16181D; --szary:#50545B; --linia:rgba(22,24,29,.16); --ochra:#8C5A0F; --ochra2:#6E4709; --noc:#16181D; --noc-tekst:#EDEAE4; --noc-szary:#B3ADA4; --noc-ochra:#D9A441; --f-nag:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif; --f-glos:'SerifPG',Georgia,serif; /* spojnosc.css ustawia krój i rozmiar nagłówków przez tokeny - nadpisuję tokeny, nie reguły */ --font-naglowek:var(--f-nag); --h1:clamp(2.75rem,7.4vw,7rem); --h2:clamp(2rem,4.6vw,4.2rem); --h3:clamp(1.25rem,1.9vw,1.6rem); scroll-padding-top:24px; } html.pg, html.pg body{overflow-x:clip} html.pg body{background:var(--tlo);color:var(--tusz);cursor:auto;font-size:19px;line-height:1.6} html.pg #custom-cursor,html.pg #progress-bar{display:none !important} /* własny kursor to gadżet - na stronie „bez looku AI” zostaje zwykły */ html.pg body::after{opacity:.02} .pg-in{max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,56px)} .pg h1,.pg h2,.pg h3{color:var(--tusz);text-wrap:balance;font-family:var(--f-nag) !important;font-weight:700 !important} .pg h1{letter-spacing:-.045em !important;line-height:.98 !important} .pg h2{letter-spacing:-.035em !important;line-height:1.04 !important} .pg h3{letter-spacing:-.02em !important;line-height:1.2 !important} .pg em.g{font-family:var(--f-glos) !important;font-style:italic;font-weight:400 !important;letter-spacing:-.01em} .pg p{text-wrap:pretty} .pg-linia-tresc p,.pg-kto-tekst p:not(.pg-nad),.pg-co-robie,.pg-nisza .kto,.pg-krok p,.pg-slowa li span,.pg-faq details p,.pg-bole li,.pg-format li{font-size:1.1rem !important;line-height:1.6} .pg-linia-tresc p+p,.pg-kto-tekst p:not(.pg-nad)+p{margin-top:.9em} .pg a{color:inherit} .pg :focus-visible{outline:2px solid var(--ochra);outline-offset:3px} .pg-sek{padding:clamp(84px,11vw,168px) 0} .pg-mala{font-size:.84rem;color:var(--szary);line-height:1.5} .pg-nad{font-family:var(--f-nag);font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--ochra);margin-bottom:1.1rem} .pg-lead{font-size:clamp(1.08rem,1.4vw,1.3rem);line-height:1.55;color:var(--szary);max-width:40ch} .pg-guzik{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;padding:0 28px;border-radius:999px; background:var(--ochra);color:#fff !important;font-family:var(--f-nag);font-weight:600;font-size:1rem;text-decoration:none; transition:background-color .15s ease-out;text-align:center;line-height:1.3} .pg-guzik:hover{background:var(--ochra2)} @media (max-width:560px){ .pg-akcje .pg-guzik{width:100%;padding:10px 20px} } .pg-guzik--pusty{background:transparent;color:var(--tusz) !important;border:1px solid var(--tusz)} .pg-guzik--pusty:hover{background:var(--tusz);color:var(--tlo) !important} .pg-link{display:inline-flex;align-items:center;min-height:44px;font-family:var(--f-nag);font-weight:600;color:var(--tusz);text-decoration:underline;text-decoration-color:var(--ochra);text-decoration-thickness:2px;text-underline-offset:6px} .pg-link:hover{color:var(--ochra)} /* ===== MENU lokalne (winieta, nie przyklejone) ===== */ .pg-nav{border-bottom:1px solid var(--linia)} .pg-nav .pg-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:84px} .pg-marka{display:flex;flex-direction:column;justify-content:center;min-height:44px;text-decoration:none;line-height:1.05} .pg-marka b{font-family:var(--f-nag);font-weight:700;font-size:1.3rem;letter-spacing:-.03em} .pg-marka span{font-size:.8rem;color:var(--szary)} .pg-menu{display:flex;gap:clamp(14px,2vw,30px);list-style:none;margin:0;padding:0} .pg-menu a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--f-nag);font-size:.95rem;font-weight:500;text-decoration:none} .pg-menu a:hover{color:var(--ochra)} .pg-nav-tel{font-family:var(--f-nag);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap} .pg-burger{display:none;min-height:44px;min-width:44px;padding:0 14px;border:1px solid var(--tusz);border-radius:999px;background:transparent;font-family:var(--f-nag);font-weight:600;font-size:.95rem;color:var(--tusz);cursor:pointer} @media (max-width:980px){ .pg-menu,.pg-nav-tel{display:none} .pg-burger{display:inline-flex;align-items:center} .pg-nav.otwarte .pg-menu{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:84px;z-index:160;background:var(--tlo);border-bottom:1px solid var(--linia);padding:8px clamp(20px,4vw,56px) 20px} .pg-nav.otwarte .pg-menu a{min-height:52px;font-size:1.1rem;border-bottom:1px solid var(--linia);width:100%} .pg-nav{position:relative} } /* zakładka kontaktu przy prawej krawędzi (wzór: mariakvartalet, „stały przycisk kontaktu z brokerem”) */ .pg-zakladka{position:fixed;right:0;top:50%;z-index:140;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl; background:var(--tusz);color:var(--tlo) !important;text-decoration:none;font-family:var(--f-nag);font-weight:600;font-size:.86rem; padding:18px 12px;letter-spacing:.02em;transition:background-color .15s ease-out} .pg-zakladka:hover{background:var(--ochra)} @media (max-width:1199px){.pg-zakladka{display:none}} @media (min-width:769px) and (max-width:1199px){ .pg-pasek{display:flex;justify-content:flex-end} .pg-pasek a{flex:0 0 auto !important;padding:0 26px} } /* ===== 1. HERO ===== */ /* ===== 1. HERO v2 (uwagi Wiki 28.09, 19:18): tylko Wiktoria + napis „AI WEB STUDIO” w tle. Rozmiar, położenie i wejście 1:1 z obecnej głównej (src/fragmenty/index.tresc.html, .hero-nesh / .hn-*), zmierzone Playwrightem 28.09: 1440×900 → portret 864 px wysokości (min(96vh,1020px)), środek kadru, dół -3%; napis 369 px (clamp(3.6rem,min(29vw,41vh),34rem)), Space Grotesk 500, od -2% z lewej, 7vh od góry sceny. 390×844 → portret 692 px (min(82svh,760px)) od y=96, napis 117 px (min(30vw,11rem)) od y=200, wyśrodkowany. Wejście: napis hnWjazd 1,6 s cubic-bezier(.30,.02,.16,1) z prawej (58vw, 46 px niżej, rozmycie 16 px), postać hnPerson 1,5 s cubic-bezier(.28,.10,.22,1) z opóźnieniem 0,72 s (70 px z dołu, od przezroczystości). Start dopiero po wczytaniu kroju napisu (klasa .fonty), bezpiecznik 0,9 s - jak na starej. */ .pg-hero{position:relative;overflow:hidden;background:var(--tlo);padding:0 !important} .pg-scena-hero{position:relative;max-width:1600px;margin:0 auto;min-height:calc(100svh - 85px)} /* 19:26 (Wiki): bez listy z prawej strony stara kompozycja zostawiała pustą prawą część, więc napis stoi teraz na środku kadru i wypełnia prawie całą szerokość (ok. 94% przy 1440×900), a postać zostaje w środku, jak na starej. Krój, gradient, wiersze i wjazd bez zmian; tylko rozmiar liczony od szerokości ekranu. */ .pg-znak{position:absolute;z-index:1;left:50%;transform:translateX(-50%);top:7vh;display:flex;flex-direction:column;align-items:center; font-family:'Space Grotesk',sans-serif;font-weight:500;line-height:.78;letter-spacing:-.035em;text-transform:uppercase; font-size:clamp(3.6rem,min(32.6vw,46vh),38rem);user-select:none;pointer-events:none;white-space:nowrap; background:linear-gradient(100deg,#EFEBE4 0%,#E4CFA8 20%,#C99A4E 46%,#8C5A0F 74%,#5C3A08 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .pg-znak-w{display:flex;justify-content:flex-start;line-height:1.06;margin-bottom:-.30em;padding-bottom:.04em} .pg-znak-w:last-child{margin-bottom:-.14em} .pg-znak-w i{display:inline-block;font-style:normal} .pg-znak-w i.sp{width:.30em} .pg-portret{position:absolute;z-index:2;left:50%;transform:translateX(-50%);bottom:-3%; height:min(96vh,1020px);width:auto;max-width:none;object-fit:contain;object-position:bottom center} /* podpis w ramce przy dole portretu (jak w pierwszej wersji propozycji) */ .pg-hero-opis{position:absolute;z-index:3;left:calc(50% - min(330px,24vw));bottom:clamp(28px,6vh,56px);margin:0; background:#fff;border:1px solid var(--linia);padding:12px 16px;font-size:.86rem;line-height:1.4;color:var(--szary);max-width:280px} .pg-hero-opis b{display:block;color:var(--tusz);font-family:var(--f-nag);font-weight:600;font-size:.95rem} @keyframes pgZnakWjazd{0%{opacity:0;translate:58vw 46px;filter:blur(16px)}45%{opacity:1;translate:0 46px;filter:blur(6px)}100%{opacity:1;translate:0 0;filter:blur(0)}} @keyframes pgPortretWjazd{from{opacity:0;translate:0 70px}to{opacity:1;translate:0 0}} .js .pg-scena-hero:not(.fonty) .pg-znak,.js .pg-scena-hero:not(.fonty) .pg-portret{opacity:0} .pg-scena-hero.fonty .pg-znak{animation:pgZnakWjazd 1.6s cubic-bezier(.30,.02,.16,1) 0s backwards} .pg-scena-hero.fonty .pg-portret{animation:pgPortretWjazd 1.5s cubic-bezier(.28,.10,.22,1) .72s backwards} @media (max-height:820px){ .pg-znak{top:6vh} .pg-portret{height:min(92vh,940px)} } @media (max-width:860px){ .pg-nav .pg-in{min-height:72px} .pg-nav.otwarte .pg-menu{top:72px} .pg-scena-hero{min-height:calc(100svh - 73px)} /* na starej: napis od y=200 (pasek 90 px + 13svh), portret od y=96; tu pasek ma 73 px, więc liczę od sceny */ .pg-znak{top:calc(17px + 13svh);left:0;right:0;transform:none;align-items:center;text-align:center;font-size:min(30vw,11rem);line-height:.86} .pg-portret{top:23px;bottom:auto;height:min(82svh,760px)} .pg-hero-opis{left:16px;right:auto;bottom:calc(84px + env(safe-area-inset-bottom));font-size:.8rem;padding:10px 12px;max-width:290px} } /* global.css daje KAŻDEJ sekcji na telefonie padding 5rem 1.5rem !important - tu marginesy boczne robi .pg-in (16-20 px), więc zdejmuję boczne, pionowe zostają */ @media (max-width:640px){ html.pg main>section{padding-left:0 !important;padding-right:0 !important} html.pg main>section.pg-hero{padding:0 !important} } .pg-faq-h{font-size:1.25rem !important;margin:0 0 12px} .pg-ale-scena{margin-top:clamp(22px,3vw,34px);max-width:46ch;font-family:'Newsreader',Georgia,serif !important;font-style:normal;font-size:clamp(1.2rem,1.45vw,1.34rem) !important;line-height:1.5;color:var(--tusz)} .pg-ale-scena::before{content:"";display:block;width:40px;height:2px;background:var(--ochra);margin-bottom:14px} .pg-cechy{list-style:none;margin:16px 0 0;padding:0;max-width:44ch;border-top:1px solid rgba(237,234,228,.16)} .pg-cechy li{color:var(--noc-tekst);font-size:1rem;line-height:1.45;padding:7px 0;border-bottom:1px solid rgba(237,234,228,.12)} @media (prefers-reduced-motion:reduce){ .pg-znak,.pg-portret{animation:none !important;opacity:1 !important} } /* ===== 1b. OTWARCIE: tekst dawnego hero, bez zmian w treści ===== */ .pg-otwarcie{padding:clamp(72px,9vw,140px) 0 clamp(64px,8vw,120px);border-top:1px solid var(--linia)} .pg-otwarcie h1{margin:0 0 clamp(18px,3vh,32px);max-width:16ch} .pg-hero-dol{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(20px,3.5vh,36px)} .pg-hero-co{margin-top:clamp(18px,3.5vh,36px);padding-top:14px;border-top:1px solid var(--linia);display:flex;flex-wrap:wrap;gap:6px 22px;font-size:.92rem;color:var(--szary);max-width:640px} .pg-hero-co b{color:var(--tusz);font-weight:600} @media (max-width:900px){ .pg-otwarcie .pg-lead{font-size:1.05rem;max-width:34ch} .pg-hero-co{flex-direction:column;gap:4px;font-size:.9rem} } /* ===== 2. NAPIĘCIE ===== */ .pg-ale{background:var(--tlo2);border-top:1px solid var(--linia)} .pg-ale .pg-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,110px);align-items:start} .pg-liczby{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--tusz)} .pg-liczba{padding:22px 18px 0 0} .pg-liczba+.pg-liczba{padding-left:18px;border-left:1px solid var(--linia)} .pg-liczba b{display:block;font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:clamp(3.4rem,8vw,7.5rem);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums} .pg-liczba:first-child b{color:var(--ochra)} .pg-liczba span{display:block;margin-top:.7rem;font-size:1rem;line-height:1.45} .pg-zrodlo{margin-top:18px;font-size:.8rem;line-height:1.5 !important;color:var(--szary);max-width:70ch} .pg-zrodlo a{color:var(--szary);display:inline-block;padding:13px 4px;margin:-13px 0} .pg-ale-glos{margin-top:clamp(28px,4vw,48px);font-size:1.12rem !important;line-height:1.6;max-width:46ch} @media (max-width:900px){ .pg-ale .pg-in{grid-template-columns:1fr} } /* v5 (Wiki 20:02): liczby jadą z czytelnikiem do końca sekcji. Kolumna prawa ma wysokość całej sekcji (stretch), blok w niej sticky. Menu nie jest przyklejone, więc top = 32 px. */ @media (min-width:901px){ .pg-ale .pg-in{align-items:stretch} .pg-ale-prawa{align-self:stretch} .pg-ale-lepkie{position:sticky;top:32px} } /* ===== 3. SCENA: generator kontra człowiek (G1: lista prowadzi, obraz się zmienia) ===== */ .pg-scena{background:var(--noc);color:var(--noc-tekst)} .pg-scena h2{color:var(--noc-tekst) !important} .pg-scena .pg-nad{color:var(--noc-ochra)} .pg-scena .pg-lead{color:var(--noc-szary)} .pg-scena-uklad{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);margin-top:clamp(40px,6vw,80px)} .pg-kroki{list-style:none;margin:0;padding:0} .pg-krok{min-height:58vh;display:flex;flex-direction:column;justify-content:center;border-top:1px solid rgba(237,234,228,.16);padding:28px 0;transition:border-color .3s ease-out} .pg-krok.teraz{border-top-color:var(--noc-ochra)} .pg-krok.teraz h3{color:var(--noc-ochra) !important} .pg-krok h3{color:var(--noc-tekst) !important;margin:0 0 .6rem} .pg-krok p{margin:0;color:var(--noc-szary);max-width:40ch} .pg-krok .pg-bylo{font-size:.9rem;color:var(--noc-szary);margin:0 0 .5rem} .pg-krok p:not(.pg-bylo) + p{margin-top:.9em} .pg-krok .pg-cechy + p{margin-top:.9em} /* Opowieść Wiki w kroku sceny: ten sam głos co historia o rodzicach (.pg-ale-scena), na ciemnym tle */ .pg-krok p.pg-krok-opowiesc{font-family:'Newsreader',Georgia,serif !important;font-style:normal;font-size:clamp(1.2rem,1.45vw,1.34rem) !important;line-height:1.5;color:var(--noc-tekst);max-width:42ch} .pg-krok .pg-bylo + .pg-krok-opowiesc::before{content:"";display:block;width:40px;height:2px;background:var(--ochra);margin:14px 0} .pg-krok .pg-bylo s{text-decoration-color:var(--noc-ochra);text-decoration-thickness:2px} .pg-makieta-kadr{position:sticky;top:max(24px,calc(50vh - 310px));height:min(620px,86vh)} /* 29.09 (Wiki: „ma być widać całą wizualizację”): makieta ma stały projekt 620×860 px i skrypt pomniejsza ją skalą --s do wysokości ekranu, na komputerze tak samo jak na telefonie. Bez JS zostaje dawny układ. */ .js .pg-makieta-kadr{height:auto;align-self:start;top:max(24px,calc(50vh - 430px * var(--s,.7)))} .js .pg-makieta-okno{width:calc(620px * var(--s,.7));height:calc(860px * var(--s,.7));overflow:hidden;margin:0} .js .pg-makieta-okno .pg-makieta{width:620px;height:860px;min-height:0;transform:scale(var(--s,.7));transform-origin:0 0} .pg-makieta{height:100%;border:1px solid rgba(237,234,228,.22);overflow:hidden;display:flex;flex-direction:column; --m-tlo:linear-gradient(135deg,#4F46E5 0%,#7C3AED 55%,#A21CAF 100%);--m-tusz:#fff;transition:background .6s ease-out;background:var(--m-tlo)} .pg-makieta-pasek{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:rgba(0,0,0,.28);font-size:.72rem;color:#EDEAE4;letter-spacing:.02em} .pg-makieta-wnetrze{flex:1;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:clamp(20px,3vw,40px);position:relative} .pg-m-nag{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:clamp(1.3rem,2.1vw,1.9rem);line-height:1.3;color:var(--m-tusz);text-align:center;margin:0} .pg-m-nag .po{display:none;font-family:var(--f-nag);letter-spacing:-.03em;text-align:left;font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.3} .pg-m-tekst{font-family:'Inter',system-ui,sans-serif;font-size:.9rem;color:var(--m-tusz);opacity:.9;text-align:center;max-width:46ch;margin:0 auto} .pg-m-tekst .po{display:none} /* „grafika z generatora” narysowana CSS-em: fioletowe niebo, słońce z poświatą, plastikowe bryły domów (celowo sztuczne) */ /* 29.09: prawdziwy obraz z generatora (Gemini) zamiast rysunku w CSS; ten sam kadr co render 3D-Archi w kroku 2 */ .pg-m-grafika{position:relative;aspect-ratio:960/638;border-radius:14px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.25)} .pg-m-grafika img{display:block;width:100%;height:100%;object-fit:cover} .pg-m-znak-graf{position:absolute;left:10px;bottom:8px;font-size:.66rem;color:#fff;background:rgba(0,0,0,.35);padding:2px 8px;border-radius:999px} .pg-m-foto{display:none;margin:0} .pg-m-foto img{display:block;width:100%;height:auto;aspect-ratio:960/638} .pg-m-foto figcaption{font-size:.7rem;color:#50545B;margin-top:5px} .pg-m-karty{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .pg-m-karta{background:rgba(0,0,0,.16);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:12px 10px;text-align:center;font-size:.72rem;color:#fff} .pg-m-karta i{display:block;width:24px;height:24px;margin:0 auto 6px;border-radius:50%;background:rgba(255,255,255,.55)} .pg-m-tabela{display:none;width:100%;border-collapse:collapse;font-family:'Outfit',sans-serif;font-size:.74rem;color:#16181D;font-variant-numeric:tabular-nums} .pg-m-tabela th{text-align:left;font-weight:600;color:#50545B;border-bottom:1px solid #16181D;padding:3px 6px 3px 0} .pg-m-tabela td{border-bottom:1px solid #D8D2C8;padding:3px 6px 3px 0} .pg-m-liczba{align-self:center;font-family:'Inter',system-ui,sans-serif;font-weight:800;font-size:1rem;color:#fff;background:rgba(0,0,0,.22);border-radius:999px;padding:7px 18px} .pg-m-liczba.po{display:none} .pg-m-guzik{align-self:center;font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:.82rem;color:#fff;background:linear-gradient(90deg,#4F46E5,#7C3AED);border-radius:12px;padding:9px 20px;box-shadow:0 8px 20px rgba(99,102,241,.4)} /* stany kroków - każdy kolejny zdejmuje jeden sygnał */ .pg-makieta:not([data-krok="0"]){--m-tlo:#F7F5F2;--m-tusz:#16181D} .pg-makieta:not([data-krok="0"]) .pg-makieta-pasek{background:#E7E2DA;color:#50545B} .pg-makieta:not([data-krok="0"]) .pg-m-karta{background:#fff;color:#16181D;border-radius:0;box-shadow:none;border:1px solid #D8D2C8} .pg-makieta:not([data-krok="0"]) .pg-m-karta i{border-radius:0} .pg-makieta:not([data-krok="0"]) .pg-m-grafika{border-radius:0;box-shadow:none} .pg-makieta:not([data-krok="0"]) .pg-m-liczba{border-radius:0} .pg-makieta:not([data-krok="0"]) .pg-m-karta i{background:#C9C2B8} .pg-makieta:not([data-krok="0"]) .pg-m-guzik{background:#16181D;box-shadow:none;border-radius:0} .pg-makieta:not([data-krok="0"]) .pg-m-liczba{color:#16181D;background:#E7E2DA} .pg-makieta[data-krok="2"] .pg-m-grafika,.pg-makieta[data-krok="3"] .pg-m-grafika,.pg-makieta[data-krok="4"] .pg-m-grafika,.pg-makieta[data-krok="5"] .pg-m-grafika{display:none} .pg-makieta[data-krok="2"] .pg-m-foto,.pg-makieta[data-krok="3"] .pg-m-foto,.pg-makieta[data-krok="4"] .pg-m-foto,.pg-makieta[data-krok="5"] .pg-m-foto{display:block} .pg-makieta[data-krok="3"] .pg-m-karty,.pg-makieta[data-krok="4"] .pg-m-karty,.pg-makieta[data-krok="5"] .pg-m-karty{display:none} .pg-makieta[data-krok="3"] .pg-m-tabela,.pg-makieta[data-krok="4"] .pg-m-tabela,.pg-makieta[data-krok="5"] .pg-m-tabela{display:table} .pg-makieta[data-krok="4"] .pg-m-liczba.przed,.pg-makieta[data-krok="5"] .pg-m-liczba.przed{display:none} .pg-makieta[data-krok="4"] .pg-m-liczba.po,.pg-makieta[data-krok="5"] .pg-m-liczba.po{display:block;font-family:'Outfit',sans-serif;font-weight:500;font-size:.8rem;border-radius:0;align-self:flex-start;padding:5px 10px} .pg-makieta[data-krok="5"] .pg-m-nag .przed,.pg-makieta[data-krok="5"] .pg-m-tekst .przed{display:none} .pg-makieta[data-krok="5"] .pg-m-nag .po{display:block} .pg-makieta[data-krok="5"] .pg-m-tekst .po{display:inline} .pg-makieta[data-krok="5"] .pg-m-tekst,.pg-makieta[data-krok="5"] .pg-m-nag{text-align:left} .pg-makieta[data-krok="5"] .pg-m-tekst{margin:0;font-family:'Outfit',sans-serif} .pg-makieta-uwaga{margin-top:10px;font-size:.78rem;color:var(--noc-szary);max-width:70ch} .pg-tylko-tel{display:none} @media (max-width:900px){ .pg-tylko-komp{display:none} } /* v9 (Wiki 21:51): na telefonie scena działa jak oś dnia na BeautyDoc /funkcje/ - kadr przyklejony u góry, kroki przewijają się pod nim, aktywny jeden krok, makieta zmienia stan. Makieta ma stały „projekt” 620×620 px pomniejszany skalą (--s liczy skrypt), żeby na 390 i 320 px pod kadrem zostało miejsce na czytelny krok. Bez JS (klasa .js nie wejdzie): bez przyklejania i skali, makieta w stanie końcowym, wszystkie kroki widoczne (F2). */ @media (max-width:900px){ div.pg-tylko-tel, p.pg-tylko-tel{display:block} .pg-scena-uklad{grid-template-columns:minmax(0,1fr);gap:0} .pg-makieta-kadr{position:relative;top:auto;height:auto;order:-1} .pg-makieta{min-height:440px;height:auto} .pg-krok{min-height:0;padding:24px 0} .pg-makieta-kadr .pg-makieta-uwaga{display:none} .js .pg-makieta-kadr{position:sticky;top:0;z-index:3;background:var(--noc);padding:10px 0 12px} .js .pg-makieta-kadr::after{content:"";position:absolute;left:0;right:0;bottom:-22px;height:22px;background:linear-gradient(180deg,var(--noc),rgba(22,24,29,0));pointer-events:none} .js .pg-makieta-okno{width:calc(620px * var(--s,.5));height:calc(860px * var(--s,.5));overflow:hidden;margin:0 auto} .js .pg-makieta-okno .pg-makieta{width:620px;height:860px;min-height:0;transform:scale(var(--s,.5));transform-origin:0 0} .js .pg-krok{min-height:46svh;justify-content:flex-start;padding-top:26px} .js .pg-krok:last-child{min-height:60svh} } /* ===== 4. DLA KOGO ===== */ .pg-nisze{margin-top:clamp(40px,6vw,80px)} .pg-nisza{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,90px);border-top:1px solid var(--tusz);padding:clamp(36px,5vw,64px) 0} .pg-nisza:last-child{border-bottom:1px solid var(--linia)} .pg-nisza h3{font-size:clamp(1.9rem,3.6vw,3.2rem) !important;letter-spacing:-.035em !important;line-height:1.02 !important;margin:0 0 .8rem} .pg-nisza .kto{color:var(--szary);font-size:1rem;max-width:34ch} .pg-cytat{margin:0 0 26px;padding:0} .pg-cytat p::before{content:'';display:block;width:40px;height:2px;background:var(--ochra);margin-bottom:14px} .pg-cytat p{font-family:var(--f-glos);font-style:italic;font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.3;margin:0} .pg-cytat footer{margin-top:8px;font-size:.8rem;color:var(--szary)} .pg-bole{list-style:none;margin:0 0 20px;padding:0} .pg-bole li{padding:12px 0;border-top:1px solid var(--linia);max-width:60ch} .pg-bole li:first-child{border-top:0;padding-top:0} .pg-co-robie{font-size:1rem;margin:0 0 14px;max-width:60ch} .pg-co-robie b{font-weight:600} .pg-pytania{list-style:none;margin:0 0 20px;padding:0;counter-reset:none} .pg-pytania li{font-family:var(--f-nag);font-weight:500;font-size:clamp(1.1rem,1.5vw,1.3rem);letter-spacing:-.015em;padding:12px 0;border-top:1px solid var(--linia)} .pg-pytania li:first-child{border-top:0;padding-top:0} @media (max-width:900px){ .pg-nisza{grid-template-columns:1fr;gap:18px} } /* 29.09 (Wiki: „fajne, możesz wdrożyć” po prototypie): karty branż wyrastają schodkami przy przewijaniu (wzór: neutomni.com, kolumny procesu), po kliknięciu kolor karty rozlewa się na ekran, za zdjęciem biegnie nazwa branży, przewijanie powiększa zdjęcie (wzór: realevate.agency/evergreen). Bez JS: karty ukryte, branże jak dotąd, jedna pod drugą. */ .pg-br-karty{display:none} .pg-wn-zamknij,.pg-wn-scena{display:none} .js .pg-br-karty{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:minmax(0,1fr);gap:clamp(12px,1.6vw,22px);height:min(64vh,640px);align-items:end} @media (min-width:901px){ .js .pg-br{height:210vh;margin-top:calc(-1 * clamp(84px,11vw,168px));margin-bottom:calc(-1 * clamp(84px,11vw,168px))} .js .pg-br-scena{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,4vh,40px);overflow:hidden} .js .pg-karta{transform:translateY(var(--y,105%));will-change:transform} } .js .pg-br-scena h2{margin:0} .pg-karta{position:relative;display:flex;flex-direction:column;height:var(--h,100%);min-height:0;overflow:hidden;text-decoration:none;color:var(--noc-tekst);cursor:pointer} .pg-karta-panel{flex:1;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;min-height:0;overflow:hidden;padding:22px 18px 20px 22px} .pg-karta-opis{font-size:.86rem;line-height:1.45;max-width:24ch;color:#E4DFD6} .pg-karta-tytul{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--f-nag);font-weight:700;letter-spacing:-.03em;line-height:.92;font-size:clamp(2rem,3.3vw,3.2rem);max-height:100%;text-wrap:balance;color:#EDEAE4 !important} .pg-karta-foto{flex:none;height:27%;position:relative;overflow:hidden;background:#3a3a3a} .pg-karta-foto img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)} .pg-karta:hover .pg-karta-foto img{transform:scale(1.05)} .pg-karta-brak{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.8rem;color:#EDEAE4;background:repeating-linear-gradient(135deg,#5a3a08 0 12px,#633f0a 12px 24px)} .pg-karta-znacznik{position:absolute;left:8px;bottom:8px;font-size:.66rem;background:rgba(0,0,0,.55);color:#fff;padding:2px 8px} .pg-karta:focus-visible{outline:3px solid var(--ochra);outline-offset:4px} /* okno branży (tylko z JS) */ .js .pg-nisze{margin:0} .js .pg-wn{position:fixed;inset:0;z-index:10000;overflow-y:auto;overscroll-behavior:contain;background:var(--k);color:var(--noc-tekst);visibility:hidden} .js .pg-wn.otwarte{visibility:visible} .js .pg-wn-zamknij{display:inline-flex;align-items:center;position:fixed;top:18px;right:22px;z-index:10001;min-height:44px;padding:0 16px;background:rgba(0,0,0,.25);border:1px solid rgba(237,234,228,.55);color:var(--noc-tekst);font-family:var(--f-nag);font-weight:600;font-size:.9rem;cursor:pointer} .js .pg-wn-scena{display:block;height:210vh;position:relative} .pg-wn-przyklejone{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center} .pg-wn-pasek{position:absolute;left:0;top:50%;transform:translateY(-50%);white-space:nowrap;font-family:var(--f-nag);font-weight:700;letter-spacing:-.04em;font-size:clamp(4rem,14vw,13rem);line-height:1;animation:pg-bieg 22s linear infinite} @keyframes pg-bieg{from{transform:translate(0,-50%)}to{transform:translate(-50%,-50%)}} .pg-wn-foto{position:relative;width:min(26vw,300px);aspect-ratio:3/2;overflow:hidden;will-change:transform} .pg-wn-foto img{display:block;width:100%;height:100%;object-fit:cover} .js .pg-wn .pg-nisza{display:block;max-width:780px;margin:0 auto;padding:10vh clamp(20px,4vw,40px) 16vh;border:0} .js .pg-wn .pg-nisza h3{color:var(--noc-tekst) !important} .js .pg-wn .pg-nisza p,.js .pg-wn .pg-nisza li,.js .pg-wn .pg-nisza b{color:var(--noc-tekst)} .js .pg-wn .pg-nisza .kto,.js .pg-wn .pg-cytat footer{color:#D6D0C6} .js .pg-wn .pg-bole li,.js .pg-wn .pg-pytania li{border-top-color:rgba(237,234,228,.2)} .js .pg-wn .pg-cytat{margin-top:28px} .js .pg-wn .pg-nisza > div + div{margin-top:28px} .js .pg-wn .pg-link{color:var(--noc-tekst)} @media (max-width:900px){ .js .pg-br-karty{grid-template-columns:1fr;height:auto;gap:14px;margin-top:28px} .js .pg-karta{height:340px} .pg-wn-foto{width:62vw} } @media (prefers-reduced-motion:reduce){ .js .pg-karta{transform:none} .pg-wn-pasek{animation:none} } /* ===== 5. OFERTA: stos z grzbietami (wzór totop, sam CSS) ===== */ .pg-oferta{background:var(--tlo2);border-top:1px solid var(--linia)} /* 29.09 (Wiki: „portfolio też zrób takie jak na obecnej stronie głównej”): blok 1:1 z fragmenty/index.head.html. Menu tej strony nie jest przyklejone, więc --nav-h:0; tło z palety tej strony (--noc) zamiast granatu. */ .rz{--nav-h:0px;background:var(--noc) !important} .rz-shot{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .8s cubic-bezier(.2,.7,.2,1)} .rz-karta:hover .rz-shot{transform:scale(1.03)} .pg .rz-head h2{color:#fff !important;font-size:clamp(1.9rem,4.2vw,3.4rem) !important;margin:.4rem 0 .7rem} .pg .rz-txt h3{color:#fff !important;font-size:1.16rem !important;letter-spacing:-.01em !important;line-height:1.2 !important} .rz .eyebrow2{font-family:var(--f-nag);font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--noc-ochra) !important} .rz .lead2{line-height:1.55;margin:0} .gdy-dotyk{display:none} @media (pointer:coarse){.gdy-kursor{display:none} .gdy-dotyk{display:inline}} @media (max-width:900px){ .rz{background:var(--noc) !important} } /* ============================================================================ REALIZACJE - poziomy tor przewijany scrollem, wzor: heynesh.com "Selected Work" (Wiki 22.07 23:03). Sekcja jest PRZYPIETA, a pionowy scroll przesuwa karty w bok. Karta aktywna jest w pelnym kolorze, sasiednie przygaszone - oko wie, gdzie patrzec. ============================================================================ */ /* 23.07 (Wiki: szybszy poziomy przewij realizacji, wzor produx): 420vh = 3,2 ekranu pionu na przejechanie toru = 275 px poziomu na ekran (za wolno). 230vh = 1,3 ekranu = ~675 px na ekran - tor sunie 2,5x szybciej. */ .rz{position:relative;height:230vh;background:#0B1120} .rz-pin{position:sticky;top:var(--nav-h,98px);height:calc(100vh - var(--nav-h,98px));overflow:hidden;display:flex;flex-direction:column; justify-content:center;gap:clamp(1rem,2.2vh,1.8rem);padding:clamp(1.4rem,3.4vh,2.6rem) 0} .rz-head{position:relative;padding:0 clamp(20px,6vw,90px);max-width:1100px} .rz-head .eyebrow2{color:#8C5A0F} .rz-head h2{color:#fff;font-size:clamp(1.9rem,4.2vw,3.4rem);line-height:1.05;margin:.4rem 0 .7rem} .rz-head .lead2{color:rgba(255,255,255,.62);max-width:52ch;font-size:1rem} .rz-licznik{position:absolute;right:clamp(20px,6vw,90px);top:0; font-family:var(--f-nag);font-size:.9rem;letter-spacing:.14em; color:rgba(255,255,255,.62)} .rz-licznik b{color:#fff;font-size:1.5rem;font-weight:700;letter-spacing:-.01em} .rz-tor{display:flex;gap:clamp(16px,1.6vw,26px);padding:0 clamp(20px,6vw,90px); will-change:transform} .rz-karta{position:relative;flex:0 0 clamp(300px,30vw,470px);width:clamp(300px,30vw,470px); display:flex;flex-direction:column;gap:.9rem;padding:16px 16px 18px;border-radius:20px; background:#141B2E;border:1px solid rgba(255,255,255,.07); filter:grayscale(.72) brightness(.62);opacity:.72; transition:filter .55s ease, opacity .55s ease, transform .55s cubic-bezier(.18,.86,.24,1), border-color .55s ease, box-shadow .55s ease} /* 23.07 (Wiki): w tej sekcji kursor ma byc lapka, jak na mapach - bo tor da sie chwycic i przeciagnac. Odnosniki w srodku zostaja przy zwyklym wskazniku. */ .rz-pin{cursor:grab} .rz-pin.ciagne,.rz-pin.ciagne *{cursor:grabbing!important} .rz-karta{cursor:grab} .rz-strz,.rz-tag{cursor:pointer} .rz-karta.akt{filter:none;opacity:1;transform:translateY(-8px); border-color:rgba(228,184,114,.42);box-shadow:0 28px 60px rgba(0,0,0,.45)} /* kafel, na ktory najezdzasz, wychodzi odrobine wyzej niz ten wybrany scrollem - widac, ze reagujesz Ty, a nie strona */ .rz-karta:hover{filter:none;opacity:1;transform:translateY(-12px); border-color:rgba(228,184,114,.62);box-shadow:0 34px 72px rgba(0,0,0,.52)} .rz-gora{display:flex;align-items:center;justify-content:space-between;gap:.7rem} .rz-nr{display:grid;place-items:center;width:34px;height:34px;border-radius:50%; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14); font-family:var(--f-nag);font-size:.76rem;font-weight:700;color:rgba(255,255,255,.72)} .rz-karta.akt .rz-nr{background:#8C5A0F;border-color:transparent;color:#fff} .rz-tagi{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end} .rz-tag{padding:5px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.16); font-family:var(--f-nag);font-size:.68rem;color:rgba(255,255,255,.66);white-space:nowrap} .rz-karta.akt .rz-tag{border-color:rgba(228,184,114,.38);color:rgba(255,255,255,.86)} .rz-ekran{border-radius:12px;overflow:hidden;background:#0d0d0d;border:1px solid rgba(255,255,255,.08)} .rz-pasek{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#1a1a1a} .rz-kropki{display:flex;gap:5px} .rz-kropki i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)} .rz-url{font-size:.7rem;color:rgba(255,255,255,.72)} /* 23.07: po zejsciu sekcji pod pasek menu zawartosc pinu byla wyzsza niz jego okno i naglowek wypychalo pod pasek - podglad odrobine nizszy */ .rz-vp{position:relative;width:100%;height:clamp(150px,20vh,230px);overflow:hidden;background:#fff} .rz-dol{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-top:auto} .rz-txt h3{font-family:var(--f-nag);font-size:1.16rem;color:#fff;margin:0 0 .35rem} .rz-txt p{margin:0;font-size:.84rem;line-height:1.5;color:rgba(255,255,255,.75);max-width:34ch} .rz-akcja{display:flex;align-items:flex-end;gap:.9rem;flex:none} .rz-met{display:flex;flex-direction:column;align-items:flex-end;text-align:right} .rz-met b{font-family:var(--f-nag);font-size:1.24rem;color:#C99A4E;line-height:1} .rz-met i{font-style:normal;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase; color:rgba(255,255,255,.74);margin-top:3px} .rz-strz{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;flex:none; border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.66);text-decoration:none; font-size:1.1rem;transition:.3s} .rz-karta.akt .rz-strz{background:#8C5A0F;border-color:transparent;color:#fff} .rz-karta.akt .rz-strz:hover{background:#6E4709;transform:translate(2px,-2px)} @media (max-width:900px){ .rz{height:auto;background:#0B1120} .rz-pin{position:static;height:auto;padding:12vh 0} .rz-tor{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;transform:none!important} .rz-tor::-webkit-scrollbar{display:none} .rz-karta{flex:0 0 84vw;width:84vw;scroll-snap-align:center;filter:none;opacity:1} .rz-licznik{display:none} } /* 29.09 (Wiki: „wolę wariant B tej sekcji”): sekcja staje, trzy plansze ofert przejeżdżają w bok przy przewijaniu w dół (wzór: abvtek, archigreen, rickallan z biblioteki). Telefon i brak JS: plansze przesuwa się palcem. */ .pg-ofb{background:var(--noc) !important;color:var(--noc-tekst);border-top:0 !important} .pg-ofb-scena{padding:clamp(70px,9vw,120px) 0;display:flex;flex-direction:column;gap:clamp(16px,3vh,32px)} .pg-ofb-nag{max-width:1320px;margin:0 auto;width:100%;padding:0 clamp(20px,4vw,56px)} .pg-ofb h2{color:var(--noc-tekst) !important;font-size:clamp(1.9rem,3.6vw,3.2rem) !important;margin:0} .pg-ofb-tor{display:flex;gap:clamp(20px,3vw,40px);padding:0 clamp(20px,4vw,56px) 12px;overflow-x:auto;scroll-snap-type:x mandatory} .pg-ofb-plansza{flex:none;width:min(1100px,86vw);background:#1F2229;border:1px solid rgba(237,234,228,.14);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);scroll-snap-align:start} .pg-ofb-lewa{padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;min-height:0} .pg-ofb-dla{font-size:.85rem !important;color:var(--noc-ochra);font-weight:600;margin:0 0 8px} .pg-ofb-lewa h3{color:var(--noc-tekst) !important;font-size:clamp(1.8rem,2.8vw,2.6rem) !important;letter-spacing:-.03em;line-height:1.05;margin:0} .pg-ofb-tekst{font-size:1rem !important;line-height:1.55;color:#D6D0C6;margin:14px 0 0;max-width:48ch} .pg-ofb-duza{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:clamp(2.6rem,5vw,4.8rem) !important;letter-spacing:-.04em;line-height:1;color:var(--noc-ochra);margin:auto 0 0;padding-top:22px} .pg-ofb-prawa{background:var(--tlo);color:var(--tusz);padding:clamp(20px,2.6vw,36px);display:flex;flex-direction:column;justify-content:center;gap:12px;min-height:0} .pg-ofb-prawa .pg-ceny li{padding-top:10px;padding-bottom:10px} .pg-ofb-prawa .pg-mala{margin:0} .pg-ofb-prawa .pg-akcje{margin-top:4px} .pg-ofb-opinia{margin:0;font-family:var(--f-glos);font-style:italic;font-size:1.2rem;line-height:1.35} .pg-ofb-opinia p{margin:0} .pg-ofb-opinia footer{font-family:'Outfit',sans-serif;font-style:normal;font-size:.85rem;color:var(--szary);margin-top:6px} .pg-ofb-ekran{margin:0 auto;max-width:200px} .pg-ofb-ekran img{display:block;width:auto;max-width:100%;max-height:40vh;margin:0 auto;border:1px solid var(--linia)} .pg-ofb-ekran figcaption{font-size:.78rem;color:var(--szary);margin-top:6px;text-align:center} .pg-ofb-pasek{display:none} @media (min-width:901px){ .js .pg-ofb-wys{height:320vh;position:relative} .js .pg-ofb-scena{position:sticky;top:0;height:100vh;overflow:hidden;justify-content:center;padding:0} .js .pg-ofb-tor{overflow:visible;will-change:transform;padding-bottom:0} .js .pg-ofb-plansza{width:min(1100px,80vw);height:min(72vh,660px)} .js .pg-ofb-pasek{display:flex;gap:28px;max-width:1320px;margin:0 auto;width:100%;padding:0 clamp(20px,4vw,56px)} .pg-ofb-pasek span{position:relative;flex:1;font-family:var(--f-nag);font-weight:600;font-size:.9rem;color:#8F8A82;padding-top:12px;transition:color .3s} .pg-ofb-pasek span::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:rgba(237,234,228,.18)} .pg-ofb-pasek span i{position:absolute;left:0;top:0;height:2px;width:0;background:var(--noc-ochra)} .pg-ofb-pasek span.teraz{color:var(--noc-tekst)} } @media (min-width:901px) and (max-height:820px){ .js .pg-ofb-opinia{display:none} .pg-ofb-prawa .pg-ceny li,.pg-ofb-prawa .pg-format li{padding-top:8px;padding-bottom:8px} .js .pg-ofb-plansza{height:min(72vh,620px)} } /* telefon (Wiki 29.09 „na tel. kiepsko wygląda”): zamiast przesuwania w bok plansze jedna pod drugą, zwarte, cena w wierszu z nazwą */ @media (max-width:900px){ .pg-ofb-scena{padding:64px 0 56px;gap:22px} .pg-ofb-tor{flex-direction:column;overflow:visible;scroll-snap-type:none;gap:18px;padding:0 16px} .pg-ofb-plansza{width:100%;grid-template-columns:minmax(0,1fr)} .pg-ofb-lewa{padding:22px 20px 20px} .pg-ofb-duza{font-size:2.4rem !important;margin-top:0;padding-top:16px} .pg-ofb-prawa{padding:18px 20px 22px} .pg-ofb-prawa .pg-ceny li{flex-direction:row;align-items:baseline;gap:12px;padding-top:9px;padding-bottom:9px} .pg-ofb-prawa .pg-ceny li b{font-size:.98rem} .pg-ofb-prawa .pg-ceny li span{font-size:1rem} .pg-ofb-ekran img{max-height:300px} .pg-ofb-opinia{font-size:1.08rem} } /* 29.09 (Wiki: „Kto to robi? zrób tak jak jest na aktualnej stronie aiwebstudio.pl, kto to prowadzi”): blok przeniesiony z fragmenty/index.head.html; krój nagłówków = Bricolage, kolory z tokenów tej strony. Bez JS wszystko widoczne od razu. */ .pw2{--ink:var(--tusz);--ink-dim:var(--szary);--accent:var(--ochra);--h2:clamp(2.4rem,4.4vw,3.9rem)} .pg .pw2-kolo,.pg .pw2-kolo:hover{color:#fff !important;text-decoration:none} .pg .pw2-tyt{font-size:var(--h2) !important;font-weight:700 !important;letter-spacing:-.035em !important;line-height:1.02 !important;color:var(--tusz) !important} .pg .pw2-tyt--nad{color:#fff !important;font-weight:700 !important;letter-spacing:-.035em !important;line-height:1.02 !important} .pg .pw2-txt{font-size:1.05rem !important} html:not(.js) .pw2-lin > i,html:not(.js) .pw2-foto,html:not(.js) .pw2-rola,html:not(.js) .pw2-imie,html:not(.js) .pw2-txt,html:not(.js) .pw2-krot,html:not(.js) .pw2-wiecej,html:not(.js) .pw2-kolo{translate:none;opacity:1;filter:none} /* ============================================================================ PRZEWODNIK - uklad wg six2eight.com (Wiki 22.07): wielki napis na cala szerokosc, zdjecie w srodku NACHODZI na napis, po bokach dwie kolumny, okragle CTA po prawej. Paleta nasza, jasna. ============================================================================ */ .pw2{position:relative;max-width:1560px;margin:0 auto;padding:12vh 4vw 9vh} .pw2-lin{display:block;overflow:hidden} .pw2-lin > i{display:block;font-style:normal; translate:0 108%;opacity:0; transition:translate .95s cubic-bezier(.22,.92,.24,1), opacity .7s ease; transition-delay:calc(var(--l) * .17s)} .pw2.wjazd .pw2-lin > i{translate:0 0;opacity:1} .pw2-tyt{position:relative;z-index:1;margin:0;display:block; font-family:var(--f-nag);font-weight:500; font-size:clamp(3rem,7.2vw,6.4rem);line-height:.94;letter-spacing:-.035em; color:var(--ink);text-transform:uppercase} .pw2-tyt--nad{position:absolute;z-index:4;color:#fff;pointer-events:none; clip-path:inset(0 100% 0 0);opacity:0;transition:opacity .7s ease; /* 18.08: biała kopia MUSI mieć te same metryki co h2 (spojnosc.css: --h2, 500, -.03em, 1.05) - inaczej po ujednoliceniu h2 zmalał, a kopia została wielka i na zdjęciu zostawało samotne „DZI" (uwaga Wiki) */ font-size:var(--h2) !important;font-weight:500 !important;letter-spacing:-.03em !important;line-height:1.05 !important;text-transform:none !important} .pw2.wjazd .pw2-tyt--nad{opacity:1;transition-delay:.15s} .pw2-grid{position:relative;display:grid;grid-template-columns:1fr 1.85fr 1fr; gap:3.2vw;align-items:start;margin-top:-4.4vw} /* ── zdjecie: nachodzi na napis, wlasny kolor tla jak w pierwowzorze ── */ /* 22.07 (Wiki, czerwona ramka na zrzucie): zdjecie duzo wieksze i wyzej - siega gornej krawedzi napisu, wiec napis przechodzi przez nie na wiekszej dlugosci. */ /* tlo zdjecia: nie plaski kolor, tylko oswietlone studio - swiatlo zza postaci u gory, ciemniejsze naroza i dol, winieta od srodka. Daje glebie zamiast plaskiej plamy. */ .pw2-foto{position:relative;z-index:2;margin-top:-5.6vw;border-radius:26px;overflow:hidden; aspect-ratio:1/.96; background: /* 18.08: studio było indygo (#6D68F5/#5B52EA - stara paleta) - teraz grafit ze złotym światłem zza postaci (tokeny marki) */ radial-gradient(78% 58% at 50% 22%, rgba(228,184,114,.34), transparent 62%), radial-gradient(92% 70% at 50% 34%, #3A3327, transparent 72%), radial-gradient(130% 100% at 50% 118%, #070A12, transparent 64%), linear-gradient(168deg,#2A2C33 0%, #1A1D23 52%, #0B0D12 100%); box-shadow:0 34px 76px rgba(11,17,32,.26), inset 0 0 90px rgba(7,10,18,.42)} /* miekki blask tuz za postacia - oddziela sylwetke od tla */ .pw2-foto::before{content:"";position:absolute;left:50%;top:16%;width:66%;height:74%; transform:translateX(-50%);border-radius:50%;pointer-events:none; background:radial-gradient(closest-side, rgba(228,184,114,.28), transparent 72%); filter:blur(2px)} .pw2-foto img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center 18%} /* ── lewa kolumna: rola, imie, akapit ── */ .pw2-lewo{z-index:3;padding-top:9.6vw;display:flex;flex-direction:column;gap:.55rem} .pw2-rola{display:inline-flex;align-items:center;gap:10px; font-family:var(--f-nag);font-size:.9rem;color:var(--ink)} .pw2-rola i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%; background:var(--accent);color:#fff;font-style:normal;font-size:.86rem;line-height:1} .pw2-imie{font-family:var(--f-nag);font-weight:700; font-size:clamp(1.5rem,2.5vw,2.15rem);letter-spacing:-.02em;color:var(--ink)} .pw2-txt{margin:.35rem 0 0;color:#585D66;font-size:1rem;line-height:1.62;max-width:34ch} /* ── prawa kolumna: zdanie, odnosnik, kolo CTA ── */ /* prawa kolumna dosunieta do prawej krawedzi (Wiki 22.07 18:36 - strzalki na pusty pas po prawej stronie tekstu i kola). */ .pw2-prawo{z-index:3;padding-top:4vw;display:flex;flex-direction:column;align-items:flex-end; text-align:right;gap:1.1rem} .pw2-krot{margin:0;color:var(--ink-dim);font-size:1.06rem;line-height:1.58;max-width:32ch} .pw2-wiecej{font-family:var(--f-nag);font-size:.94rem;color:var(--ink); text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s ease, color .25s ease} .pw2-wiecej:hover{color:var(--accent);border-bottom-color:var(--accent)} /* DWA kola (Wiki 22.07 19:32 + 19:45): telefon i WhatsApp, dwa kolory, ROZNE wielkosci, ulozone po skosie - telefon wyzej, wchodzi w luke obok tekstu; WhatsApp nizej i dalej w prawo. Kazde ma orbite, ktora sie obraca, zeby blok zyl. Zieleń ciemniejsza od firmowej: #25D366 z bielą ma kontrast 1,98:1 (napis nieczytelny), #0F766E ma 5,47:1. Rozpoznawalnosc niesie ikona, nie odcien. */ .pw2-kola{position:relative;margin-top:1.2vw;align-self:stretch;height:clamp(230px,17vw,280px)} .pw2-kolo{position:absolute;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:.5rem;aspect-ratio:1;border-radius:50%; color:#fff;text-decoration:none;text-align:center; font-family:var(--f-nag);line-height:1.2; transition:transform .42s cubic-bezier(.18,.86,.24,1), box-shadow .42s ease, background .3s ease} /* telefon - wiekszy, wyzej, wsuniety pod tekst */ /* wsuniety w gore i w lewo - wchodzi w luke obok zdania "Chcesz zaczac od zera..." zamiast stac pod nim (Wiki 22.07 19:45: "niech sie wtapia") */ .pw2-kolo--tel{left:-26px;top:-62px;width:clamp(158px,12.4vw,196px);font-size:1.02rem; background:var(--accent);box-shadow:0 18px 44px rgba(140,90,15,.34)} .pw2-kolo--tel:hover{background:#6E4709;box-shadow:0 26px 58px rgba(140,90,15,.46)} /* whatsapp - mniejszy, nizej i w prawo (skos) */ .pw2-kolo--wa{right:0;bottom:0;width:clamp(122px,9.2vw,146px);font-size:.86rem; background:#0F766E;box-shadow:0 18px 44px rgba(15,118,110,.34)} .pw2-kolo--wa:hover{background:#0B5F59;box-shadow:0 26px 58px rgba(15,118,110,.46)} .pw2-kolo:hover{transform:translate3d(0,-8px,0) scale(1.035)} .pw2-ikona{display:grid;place-items:center; transition:transform .42s cubic-bezier(.18,.86,.24,1)} .pw2-kolo--tel .pw2-ikona{width:34px;height:34px} .pw2-kolo--wa .pw2-ikona{width:27px;height:27px} .pw2-ikona svg{width:100%;height:100%} .pw2-kolo:hover .pw2-ikona{transform:scale(1.14)} .pw2-kolo-t{display:block} /* ── KULE, nie obreze (Wiki 22.07 19:52: "premium 3d zamiast tych okregow w kolo") ── Zamiast cienkich pierscieni: kazde kolo jest KULA - swiatlo pada z gory z lewej, dol wchodzi w cien, u gory szklany polysk, pod spodem cien kontaktowy na "podlodze". Cienka kreska to nie premium - premium daje glebia. */ .pw2-kolo{ background-image: radial-gradient(72% 62% at 30% 22%, rgba(255,255,255,.42), rgba(255,255,255,0) 58%), /* swiatlo odbite od "podlogi" - to ono sprawia, ze kula wyglada na bryle, nie na kolo */ radial-gradient(58% 42% at 68% 92%, rgba(255,255,255,.20), rgba(255,255,255,0) 70%), radial-gradient(96% 96% at 50% 118%, rgba(4,2,32,.52), rgba(4,2,32,0) 62%); background-blend-mode:screen, screen, multiply; /* tresc odrobine wyzej niz geometryczny srodek - dol kuli wchodzi w cien */ padding-bottom:6%} /* polysk - waski pas swiatla pod gorna krawedzia */ .pw2-kolo::before{content:"";position:absolute;left:12%;right:12%;top:5%;height:34%; border-radius:50%;pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.06) 62%, transparent); filter:blur(.4px); transition:opacity .42s ease, transform .42s cubic-bezier(.18,.86,.24,1)} /* cien kontaktowy - kula stoi na czyms, nie wisi w prozni */ .pw2-kolo::after{content:"";position:absolute;left:12%;right:12%;bottom:-11%;height:16%; border-radius:50%;pointer-events:none;z-index:-1; background:radial-gradient(closest-side, rgba(11,17,32,.34), transparent 76%); filter:blur(7px); transition:transform .42s cubic-bezier(.18,.86,.24,1), opacity .42s ease} .pw2-kolo--tel{box-shadow: inset 0 3px 10px rgba(255,255,255,.34), inset 0 -18px 34px rgba(9,6,60,.46), 0 26px 52px -10px rgba(110,71,9,.50), 0 8px 18px -6px rgba(110,71,9,.32)} .pw2-kolo--wa{box-shadow: inset 0 3px 10px rgba(255,255,255,.30), inset 0 -16px 30px rgba(1,38,34,.48), 0 24px 48px -10px rgba(6,72,66,.50), 0 8px 16px -6px rgba(6,72,66,.32)} /* delikatne unoszenie - kule zyja, ale bez cyrku (ruch premium: wolny i maly) */ .pw2-kolo--tel{animation:pwUnos 7.4s ease-in-out infinite} .pw2-kolo--wa {animation:pwUnos 6.2s ease-in-out .8s infinite reverse} @keyframes pwUnos{ 0%,100%{transform:translate3d(0,0,0)} 50% {transform:translate3d(0,-9px,0)}} .pw2-kolo:hover{animation-play-state:paused} .pw2-kolo:hover::before{opacity:.82;transform:translateY(-2px)} .pw2-kolo:hover::after{transform:scale(1.10);opacity:.8} @media (prefers-reduced-motion:reduce){ .pw2-kolo--tel,.pw2-kolo--wa{animation:none} } /* ============================================================================ WEJSCIE SEKCJI (Wiki 22.07 20:00: "napis pasami - najpierw 1., pozniej 2., zdjecie z animacja, reszta jak w top-hero"). Ten sam jezyk co hero na gorze strony: uniesienie + rozmycie, kazdy element ze swoim opoznieniem. Kolejnosc: 0,00 s pierwsza linia napisu 0,17 s druga linia 0,50 s zdjecie 0,86 s rola · 0,96 imie · 1,06 akapit 1,16 s zdanie po prawej 1,26 s "// jak pracuje" 1,36 s kula telefonu 1,50 s kula WhatsAppa ============================================================================ */ .pw2-foto{translate:0 54px;opacity:0;filter:blur(10px); transition:translate 1.1s cubic-bezier(.24,.86,.22,1), opacity .8s ease, filter .9s ease; transition-delay:.50s} .pw2.wjazd .pw2-foto{translate:0 0;opacity:1;filter:blur(0)} .pw2-rola,.pw2-imie,.pw2-txt,.pw2-krot,.pw2-wiecej{ translate:0 26px;opacity:0; transition:translate .85s cubic-bezier(.24,.86,.22,1), opacity .65s ease} .pw2.wjazd .pw2-rola,.pw2.wjazd .pw2-imie,.pw2.wjazd .pw2-txt, .pw2.wjazd .pw2-krot,.pw2.wjazd .pw2-wiecej{translate:0 0;opacity:1} .pw2-rola {transition-delay:.86s} .pw2-imie {transition-delay:.96s} .pw2-txt {transition-delay:1.06s} .pw2-krot {transition-delay:1.16s} .pw2-wiecej{transition-delay:1.26s} /* kule: transform jest zajety przez unoszenie, wiec wchodza kryciem i rozmyciem */ .pw2-kolo{opacity:0;filter:blur(9px); transition:opacity .7s ease, filter .8s ease, box-shadow .42s ease, background .3s ease} .pw2.wjazd .pw2-kolo{opacity:1;filter:blur(0)} .pw2-kolo--tel{transition-delay:1.36s} .pw2-kolo--wa {transition-delay:1.50s} /* unoszenie startuje dopiero po wejsciu - inaczej kula "drga" bedac niewidoczna */ .pw2-kolo--tel,.pw2-kolo--wa{animation-play-state:paused} .pw2.wjazd .pw2-kolo--tel,.pw2.wjazd .pw2-kolo--wa{animation-play-state:running} @media (prefers-reduced-motion:reduce){ .pw2-lin > i,.pw2-foto,.pw2-rola,.pw2-imie,.pw2-txt,.pw2-krot,.pw2-wiecej,.pw2-kolo{ translate:none!important;filter:none!important;transition-duration:.3s!important} } /* ── trzy dowody pod spodem ── */ @media (max-width:1100px){ .pw2-grid{grid-template-columns:1fr 1.1fr;gap:3vw;margin-top:-3vw} .pw2-prawo{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center; justify-content:flex-start;text-align:left;padding-top:2.4rem;gap:1.6rem 2.4rem} .pw2-kola{margin-left:auto;padding-right:26px} .pw2-kola{margin-top:0;height:auto;display:flex;gap:1.4rem;align-items:center} .pw2-kolo{position:static;left:auto;right:auto;top:auto;bottom:auto} .pw2-lewo{padding-top:8vw} } @media (max-width:860px){ .pw2{padding:9vh 6vw 7vh} .pw2-tyt{font-size:clamp(2.6rem,12vw,4.4rem)} .pw2-grid{grid-template-columns:1fr;margin-top:1.6rem;gap:1.8rem} /* margin:auto w siatce zdejmuje rozciaganie - bez width:100% karta zdjecia zwezala sie do zawartosci, a ta jest pozycjonowana absolutnie, wiec 0 px. */ .pw2-foto{width:100%;max-width:360px;margin:0 auto;order:1} .pw2-lewo{order:2;padding-top:0} .pw2-prawo{order:3;padding-top:0;flex-direction:column;align-items:flex-start;text-align:left;gap:1.1rem} .pw2-txt,.pw2-krot{max-width:none} /* na waskim ekranie orbity wchodzily na tekst nad kolami - mniejsze i z zapasem */ .pw2-kola{height:auto;display:flex;gap:1.9rem;align-items:center;margin-top:2rem} .pw2-kolo{position:static;left:auto;right:auto;top:auto;bottom:auto} .pw2-kolo--tel{width:clamp(140px,38vw,168px)} .pw2-kolo--wa{width:clamp(112px,30vw,134px)} } .pg-stos{margin-top:clamp(40px,6vw,72px);display:flex;flex-direction:column;gap:28px} .pg-linia{background:var(--tlo);border:1px solid var(--tusz);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:520px} .pg-linia-grzbiet{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 28px;border-bottom:1px solid var(--tusz);background:var(--tlo)} .pg-linia-grzbiet h3{margin:0;font-size:clamp(1.3rem,2vw,1.75rem) !important} .pg-linia-grzbiet span{font-size:.86rem;color:var(--szary);white-space:nowrap} .pg-linia-tresc{padding:28px} .pg-linia-tresc>p{max-width:48ch} .pg-linia-bok{padding:28px;border-left:1px solid var(--linia);display:flex;flex-direction:column;gap:18px} .pg-ceny{list-style:none;margin:0;padding:0;border-top:1px solid var(--tusz)} .pg-ceny li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px solid var(--linia)} .pg-ceny li b{font-family:var(--f-nag);font-weight:600;font-size:1.05rem} .pg-ceny li span{font-family:var(--f-nag);font-weight:600;font-size:1.25rem;font-variant-numeric:tabular-nums;white-space:nowrap} .pg-ceny li small{display:block;font-size:.84rem;color:var(--szary);font-family:'Outfit',sans-serif;font-weight:400} .pg-akcje{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:auto} .pg-ekran{margin:0;align-self:center;width:min(250px,70%);border:1px solid var(--tusz)} .pg-ekran img{display:block;width:100%;height:auto} .pg-ekran figcaption{font-size:.78rem;color:var(--szary);padding:8px 10px;border-top:1px solid var(--linia);background:var(--tlo)} .pg-format{list-style:none;margin:0;padding:0;border-top:1px solid var(--tusz)} .pg-format li{padding:12px 0;border-bottom:1px solid var(--linia)} .pg-format li b{font-family:var(--f-nag);font-weight:600;display:block} /* przypinanie tylko gdy każda karta mieści się w oknie (skrypt dodaje klasę) - inaczej dół karty z ceną i przyciskiem chowałby się pod następną */ @media (min-width:1000px){ .pg-stos--przypiete .pg-linia{position:sticky} .pg-stos--przypiete .pg-linia:nth-child(1){top:24px} .pg-stos--przypiete .pg-linia:nth-child(2){top:88px} .pg-stos--przypiete .pg-linia:nth-child(3){top:152px} } @media (max-width:999px){ .pg-linia{grid-template-columns:minmax(0,1fr);min-height:0} .pg-linia-grzbiet span{white-space:normal} .pg-linia-bok{border-left:0;border-top:1px solid var(--linia)} .pg-linia-grzbiet{flex-direction:column;gap:4px;padding:16px 20px} .pg-linia-tresc,.pg-linia-bok{padding:20px} } @media (max-width:560px){ .pg-ceny li{flex-direction:column;align-items:flex-start;gap:4px} .pg-bezposrednio a{font-size:1.2rem} } /* ===== 6. KTO + DOWÓD ===== */ .pg-kto .pg-in{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(32px,6vw,100px);align-items:start} .pg-kto-foto{margin:0;background:var(--tlo2);position:relative} .pg-kto-foto img{display:block;width:100%;height:auto} .pg-kto-tekst p{max-width:52ch} .pg-kto .pg-dowod{display:block} .pg-realizacje{margin-top:clamp(56px,7vw,96px);border-top:1px solid var(--tusz)} .pg-realizacja{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:22px;align-items:center;padding:18px 0;border-bottom:1px solid var(--linia);text-decoration:none;min-height:44px} .pg-realizacja img{width:120px;height:75px;object-fit:cover;object-position:top;display:block;border:1px solid var(--linia)} .pg-realizacja b{font-family:var(--f-nag);font-weight:600;font-size:1.15rem;display:block} .pg-realizacja span{color:var(--szary);font-size:.95rem} .pg-realizacja i{font-style:normal;font-family:var(--f-nag);font-size:.9rem;white-space:nowrap} .pg-realizacja:hover b{color:var(--ochra)} .pg-opinie{display:grid;grid-template-columns:minmax(0,1fr);max-width:980px;gap:clamp(24px,5vw,80px);margin-top:clamp(56px,7vw,96px)} .pg-opinia{margin:0} .pg-opinia p{font-family:var(--f-glos);font-style:italic;font-size:clamp(1.35rem,2.1vw,1.9rem);line-height:1.3;margin:0} .pg-opinia footer{margin-top:14px;font-size:.9rem;color:var(--szary)} .pg-opinia footer b{color:var(--tusz);font-weight:600} @media (max-width:900px){ .pg-kto .pg-in,.pg-opinie{grid-template-columns:1fr} .pg-kto-foto{max-width:360px} .pg-realizacja{grid-template-columns:84px minmax(0,1fr);gap:14px} .pg-realizacja img{width:84px;height:53px} .pg-realizacja i{grid-column:2} } /* ===== 7. SŁOWO + 8. KOSZT ===== */ .pg-slowo{border-top:1px solid var(--linia)} .pg-slowa{list-style:none;margin:clamp(36px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,5vw,80px);border-top:1px solid var(--tusz)} .pg-slowa li{padding:22px 0;border-bottom:1px solid var(--linia)} .pg-slowa li b{display:block;font-family:var(--f-nag);font-weight:600;font-size:1.2rem;letter-spacing:-.015em;margin-bottom:6px} .pg-slowa li span{color:var(--szary);font-size:1rem} @media (max-width:760px){ .pg-slowa{grid-template-columns:1fr} } .pg-koszt{background:var(--noc);color:var(--noc-tekst)} .pg-koszt h2{color:var(--noc-tekst) !important;max-width:18ch} .pg-koszt p{color:var(--noc-szary);max-width:54ch;font-size:1.1rem;margin-top:1.4rem} /* ===== 9. KONTAKT + FAQ ===== */ .pg-kontakt .pg-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(32px,6vw,100px);row-gap:0;align-items:start} .pg-kontakt h2{grid-column:1/-1;font-size:clamp(2.3rem,9.5vw,8rem) !important;overflow-wrap:anywhere;letter-spacing:-.05em !important;margin:0 0 clamp(24px,3vw,40px)} .pg-drogi{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--tusz)} .pg-drogi li{border-bottom:1px solid var(--linia)} .pg-drogi a{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:12px 0;text-decoration:none;font-family:var(--f-nag);font-weight:500;font-size:clamp(1.05rem,1.5vw,1.3rem)} .pg-drogi a small{display:block;font-family:'Outfit',sans-serif;font-size:.86rem;color:var(--szary);font-weight:400} .pg-drogi a:hover{color:var(--ochra)} .pg-bezposrednio{display:flex;flex-direction:column;gap:6px;margin-top:26px} .pg-bezposrednio a{font-family:var(--f-nag);font-weight:600;font-size:clamp(1.3rem,2.2vw,1.9rem);letter-spacing:-.02em;text-decoration:none;min-height:44px;display:inline-flex;align-items:center} .pg-bezposrednio a:hover{color:var(--ochra)} .pg-faq details{border-top:1px solid var(--linia)} .pg-faq details:last-child{border-bottom:1px solid var(--linia)} .pg-faq summary{cursor:pointer;list-style:none;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;font-family:var(--f-nag) !important;font-weight:500;font-size:1.08rem} .pg-faq summary::-webkit-details-marker{display:none} .pg-faq summary::after{content:'+';font-size:1.4rem;color:var(--ochra);transition:transform .2s ease-in-out} .pg-faq details[open] summary::after{transform:rotate(45deg)} .pg-faq details p{margin:0 0 18px;color:var(--szary);font-size:1rem} @media (max-width:900px){ .pg-kontakt .pg-in{grid-template-columns:minmax(0,1fr)} .pg-faq{margin-top:48px} } /* ===== STOPKA lokalna ===== */ .pg-stopka{background:var(--noc);color:var(--noc-tekst);padding:clamp(64px,8vw,110px) 0 48px} .pg-stopka a{color:var(--noc-tekst);text-decoration:none;display:inline-flex;align-items:center;min-height:44px} .pg-stopka a:hover{color:var(--noc-ochra)} .pg-stopka-siatka{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px} .pg-stopka-marka b{font-family:var(--f-nag);font-size:1.5rem;font-weight:700;letter-spacing:-.03em} .pg-stopka-marka p{color:var(--noc-szary);font-size:.95rem;max-width:36ch;margin-top:.6rem} .pg-stopka-kol p{font-family:var(--f-nag);font-size:.82rem;font-weight:600;color:var(--noc-ochra);margin:0 0 .6rem} .pg-stopka-kol ul{list-style:none;margin:0;padding:0} .pg-stopka-prawne{margin-top:48px;padding-top:20px;border-top:1px solid rgba(237,234,228,.18);display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;font-size:.84rem;color:var(--noc-szary)} .pg-stopka-prawne a{color:var(--noc-szary)} @media (max-width:900px){ .pg-stopka-siatka{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .pg-stopka-marka{grid-column:1/-1} } @media (max-width:480px){ .pg-stopka-siatka{grid-template-columns:minmax(0,1fr)} } .pg-stopka a{overflow-wrap:anywhere} /* pasek na telefonie (zastępuje domyślny z Baza.astro - skrypt w układzie zdejmuje domyślny, gdy jest własny) */ .pg-pasek{gap:10px} .pg-pasek a{flex:1;display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;text-decoration:none;font-family:var(--f-nag);font-weight:600;font-size:.95rem} .pg-pasek a:first-child{border:1px solid var(--tusz);color:var(--tusz)} .pg-pasek a:last-child{flex:1.6;background:var(--ochra);color:#fff} .pg-pasek.ukryty{transform:translateY(110%)} .pg-pasek{transition:transform .25s ease-out} @media (max-width:1199px){ .pg-stopka{padding-bottom:110px} } .pg-linki{display:flex;flex-wrap:wrap;gap:4px 26px;margin:0} .pg-opinia--mala{margin:6px 0 0;padding-top:16px;border-top:1px solid var(--linia)} .pg-opinia--mala p{font-size:1.2rem !important;line-height:1.35} .pg-opinia--mala footer{margin-top:8px;font-size:.84rem} .pg-koszt .pg-koszt-akcje{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:2rem} .pg-koszt .pg-guzik{background:var(--noc-ochra);color:#16181D !important} .pg-koszt .pg-guzik:hover{background:#E9BC63} .pg-koszt-tel{font-family:var(--f-nag);font-weight:600;font-size:1.2rem;color:var(--noc-tekst) !important;text-decoration:none;min-height:44px;display:inline-flex;align-items:center} .pg-plan-b{margin-top:14px;max-width:52ch} @media (prefers-reduced-motion:reduce){ .pg *{transition:none !important;animation:none !important} } /* 29.09: kontrast przycisków w stylu strony deweloperów (pre-flight: #000 na #8C5A0F = 3,58:1 < 4,5). Biały na ochrze = 6,4:1. */ .nowa-dew .btn-accent,.nowa-dew .btn-accent *,.nowa-dew .btn-accent i{color:#fff !important} .nowa-dew .sticky-bar a[href="#wycena"]{color:#fff !important} /* 29.09 (audyt UX): na stronach w stylu deweloperów stare reguły „footer …” nadpisywały stopkę nowej wersji */ html body footer.pg-stopka{background:var(--noc) !important} html body footer.pg-stopka .pg-stopka-kol p{color:var(--noc-ochra) !important} html body footer.pg-stopka .pg-stopka-marka p,html body footer.pg-stopka .pg-stopka-prawne,html body footer.pg-stopka .pg-stopka-prawne a{color:var(--noc-szary) !important} html body footer.pg-stopka a{font-size:1rem} /* 30.09 (Wiki: „menu główne niech będzie widoczne przez całą stronę”): menu przyklejone u góry, przyklejane sceny zaczynają się pod nim (--pg-nav-h). */ :root{--pg-nav-h:72px} html{scroll-padding-top:calc(var(--pg-nav-h) + 16px)} .pg-nav{position:sticky !important;top:0;z-index:150;background:rgba(247,245,242,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .pg-nav .pg-in{min-height:var(--pg-nav-h) !important} @media (max-width:980px){ :root{--pg-nav-h:64px} .pg-nav.otwarte .pg-menu{top:100% !important} } .nowa-dew body{--nav-h:var(--pg-nav-h) !important} /* 30.09 (Wiki: „wszystkie strony… te same czcionki”): strony w układzie deweloperów dostają kroje nowej wersji. Space Grotesk (z inline stylów strony deweloperów) → Bricolage Grotesque; treść zostaje w Outfit. */ .nowa-dew h1,.nowa-dew h2,.nowa-dew h3,.nowa-dew .label,.nowa-dew .btn,.nowa-dew .branze-name,.nowa-dew .filar-num, .nowa-dew [style*="Space Grotesk"],.nowa-dew [style*="Space Grotesk"] *{font-family:var(--f-nag) !important} .nowa-dew h1,.nowa-dew h2{letter-spacing:-.03em} /* 30.09: menu i stopka wyglądają tak samo także na stronach bez klasy .pg (Social Studio, strony branż) */ .pg-nav,.pg-nav a,.pg-nav button{color:var(--tusz);text-decoration:none} .pg-nav .pg-marka b,.pg-nav .pg-menu a,.pg-nav .pg-nav-tel{font-family:var(--f-nag)} .pg-nav .pg-marka span{color:var(--szary)} .pg-nav .pg-menu a[aria-current="page"]{color:var(--ochra)} /* 10.10 (Wiki): nagłówek z dwoma krójami = jeden krój w linii, drugi w drugiej */ .pg h1 em.g,.pg h2 em.g,.pg h3 em.g,.k-h2 em{display:block} /* 10.10.2026 (Wiki): rytm jasna, ciemna, jasna, ciemna na wszystkich stronach nowej wersji. Klasa .pg-ciemna odwraca tokeny sekcji. */ .pg-ciemna{--tusz:#EDEAE4;--szary:#B3ADA4;--linia:rgba(237,234,228,.18);--ochra:#D9A441;--ochra2:#E7B85A;--tlo:#16181D;--tlo2:#1E2128;background:#16181D !important;color:#EDEAE4} .pg-ciemna h1,.pg-ciemna h2,.pg-ciemna h3{color:#EDEAE4 !important} .pg-ciemna .pg-lead,.pg-ciemna .pg-mala{color:#B3ADA4} .pg-ciemna .pg-guzik{color:#fff !important} .pg-ciemna .pg-link{color:#EDEAE4 !important} .pg-ciemna .pg-nad{color:#D9A441} /* 10.10 (Wiki): baner zgody w tych samych krojach co strona (zamiast kroju systemowego) */ .aws-zgoda{font-family:'Outfit',ui-sans-serif,system-ui,sans-serif !important} .aws-zgoda h2{font-family:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif !important} .aws-zgoda button,.aws-zgoda label,.aws-zgoda p,.aws-zgoda a{font-family:inherit !important} /* 10.10 (Wiki): token kroju naglowkow na WSZYSTKICH stronach z tym arkuszem (wczesniej tylko html.pg, wiec strony branz, Social Studio i Realizacje mialy Space Grotesk w przyciskach) */ html:root{--f-nag:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;--font-naglowek:var(--f-nag)} .sticky-bar a{font-family:var(--f-nag) !important} html:root .stat-num{font-family:var(--f-nag) !important}