/* Giełda Żeglarska — client-side marketplace SPA (served from zeglarski.info) Portal-style navbar (#6699ff masthead + #004488 category bar), Archivo/Inter/Bricolage. Trzy kroje, nie cztery: Signika wypadla razem z regula w .mainnav i nie ma jej juz w linku do Google Fonts w index.html. */ :root{ --navy:#0a2540; --navy-deep:#071c33; --navy-soft:#143656; --accent:#1773d6; --accent-dark:#1160b8; --blue:#2f6cb0; --blue-soft:#eaf1f9; --mast:#6699ff; --bar:#004488; --bar-d:#003a75; /* greys — every tier that carries information clears WCAG AA on #fff AND on --canvas. --faint was #94a1b0 (2.63:1) and failed on every card meta line, every timestamp and the whole footer bar; #63707e is 5.06:1 / 4.72:1. */ --ink:#16202c; --muted:#5d6b7a; --faint:#63707e; --line:#e4e8ee; --canvas:#f5f7fa; --hair:#eef1f5; /* inside-object divider, one step above --line */ --green:#0e7a3f; --green-bg:#e8f5ee; --green-bd:#c7e7d3; --red:#c11f12; --red-bg:#fdeceb; /* one amber family: promotion, offer notices, stars. #b07a10 on #fdf3dd was 3.38:1; --amber is 5.78:1. --star is a graphic, so it only owes 3:1 (3.73:1). */ --amber:#8a5c0b; --amber-bg:#fdf3dd; --amber-bd:#f3e2b3; --star:#b8760a; /* SHAPE LOCK — exactly two radii in the whole product. Documented radius scale. The home and results pass introduced 10px surfaces while every subpage was still on the old 3px, so the product was running two shape systems at once. One scale now, three steps: --r-lg 10px = SURFACES you can point at: card, box, panel, media, sheet. --r 8px = CONTROLS you operate: input, select, button, chip. 999px = things that are semantically a pill: badges, dots, sort pills. */ --r:8px; --r-lg:10px; --ease:cubic-bezier(.2,.7,.3,1); --t:.16s; } /* FOCUS — one ring, drawn the same way everywhere, always paired with the hover design so the keyboard path is never a lesser design than the mouse path. */ :where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r)} :where(.site-header,.drawer) :where(a,button,input):focus-visible{outline-color:#fff;outline-offset:3px} *{box-sizing:border-box} html{scroll-behavior:smooth} /* Allegro's defining move: the PAGE is grey and every surface that holds content is a white card on top of it. Borders become unnecessary. */ body{margin:0;min-height:100vh;display:flex;flex-direction:column;font-family:"Inter",system-ui,-apple-system,sans-serif;color:var(--ink);background:#f1f3f5;line-height:1.55;-webkit-font-smoothing:antialiased} main{flex:1 0 auto;width:100%} /* .glow ma teraz treść — definicja na końcu arkusza, przy poświacie tła. */ a{color:inherit;text-decoration:none} img{display:block;max-width:100%} button{font-family:inherit;cursor:pointer} h1,h2,h3,h4{font-family:"Archivo",sans-serif;margin:0} .wrap{max-width:1280px;margin:0 auto;padding:0 24px} .disp{font-family:"Archivo",sans-serif} .hide{display:none!important} /* ── Header — floating photo-card navbar (mirrors the zeglarski.info masthead) ── */ /* --nb-img jest rysowane przez .site-header::before z filter:blur(--nb-blur), a blur ma 16 px, wiec kazdy detal drobniejszy niz ~3 px i tak ginie. Zrodlo mialo 1600 px / 139 898 B; zostalo 480 px / 10 713 B i po rozmyciu render jest nie do odroznienia. Gdyby --nb-blur kiedys zjechal ponizej ~6 px, trzeba wrocic po wiekszy plik. */ :root{--nb-radius-bot:23px; --nb-blur:16px; --nb-a:.70; --nb-img:url('nb-hero.jpg');} /* #hdr is the sticky wrapper — sticky on .site-header itself would stick inside the wrapper's own height (it's the only child) and never pin to the viewport */ #hdr{position:sticky;top:0;z-index:50} /* The nav dropdowns have to escape downward, so overflow-y must be visible; it used to be `hidden`, which silently made every dropdown invisible. overflow-x stays CLIPPED, and that half matters just as much: ::before bleeds 60px on every side for the blur, and its clip-path hides it visually WITHOUT removing it from scroll overflow, so a plain `visible` here pushed the page 44px wide (1393 + 16 + 60 = 1469 against a 1425 viewport). clip rather than hidden, because hidden on one axis forces the other axis to auto. */ .site-header{position:relative;isolation:isolate;overflow-x:clip;overflow-y:visible;width:min(1400px,calc(100% - 32px));margin:0 auto;border-radius:0 0 var(--nb-radius-bot) var(--nb-radius-bot);box-shadow:0 28px 64px -26px rgba(8,24,48,.6),0 3px 12px rgba(8,24,48,.22)} .site-header::before{content:"";position:absolute;inset:-60px;z-index:-2;background:#0a2540 var(--nb-img) center/cover no-repeat;filter:blur(var(--nb-blur)) saturate(1.18) brightness(1.02);clip-path:inset(60px round 0 0 var(--nb-radius-bot) var(--nb-radius-bot))} .site-header::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(118deg,rgba(6,22,46,var(--nb-a)),rgba(7,26,52,calc(var(--nb-a) - .22)) 52%,rgba(12,44,84,var(--nb-a)))} /* Naglowek trzyma DOKLADNIE te sama kolumne co tresc pod nim: 1280 px i 24 px marginesu bocznego, tak jak .wrap. Wczesniej bylo tu 1240/26, wiec cala gora serwisu - logo, wyszukiwarka, pasek kategorii - stala wsunieta o 22 px wzgledem kazdego rzedu kart, hero i stopki. Roznica jest dokladnie taka, ze nie czyta sie jako decyzja, tylko jako niedbalstwo: krawedzie prawie sie zgadzaja. */ .site-header .wrap{padding-left:24px;padding-right:24px;max-width:1280px} .masthead{background:transparent} .masthead__top{display:flex;align-items:center;gap:24px;padding-top:15px;padding-bottom:13px} /* Stala szerokosc, nie auto: globalne img{max-width:100%} razem z kurczliwym flexem zgniatalo boks logo grubo ponizej jego proporcji. 235x44 to dokladny stosunek viewBoksu, ten sam co w portalu. */ .logo img{height:44px;width:235px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(4,14,30,.5))} /* subtitle as HTML (not SVG ) — fonts inside an SVG never load, so the tagline is typeset here with the page's real fonts, over the wordmark's empty bottom-right strip (where "portal żeglarski" sits in the original) */ .logo{position:relative;flex:0 0 auto;min-width:0} .logo__tag{position:absolute;left:42.5%;bottom:1px;font-size:11px;font-weight:500;letter-spacing:.05em;line-height:1;color:#fff;opacity:.95;white-space:nowrap;text-shadow:0 1px 6px rgba(4,14,30,.6);pointer-events:none} @media(max-width:600px){.logo img{height:29px}.logo__tag{font-size:7.5px}} /* navbar search — solid white pill on the photo tile (sits where the topmenu was) */ .nbsearch{flex:1 1 auto;min-width:140px;max-width:640px;margin:0 auto;display:flex;align-items:center;gap:6px;height:42px;padding:0 5px 0 16px;border-radius:999px;background:#fff;box-shadow:0 6px 18px -10px rgba(4,14,30,.6)} .nbsearch input{flex:1;min-width:0;border:0;outline:none;background:none;height:100%;font-family:inherit;font-size:14px;color:var(--ink)} .nbsearch input::placeholder{color:var(--faint)} .nbsearch input::-webkit-search-cancel-button{cursor:pointer} .nbsearch__go{flex:none;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:999px;background:var(--navy);color:#fff;cursor:pointer;transition:background .15s} .nbsearch__go:hover{background:var(--navy-soft)} .acts{display:flex;align-items:center;gap:2px;margin-left:auto} .acts--d{display:flex;align-items:center;gap:14px} .acts__ic{display:flex;align-items:center;gap:6px} /* Serce i koperta stoja w jednym rzedzie z "Zaloguj sie" i "Dodaj ogloszenie", ale byly z zupelnie innego materialu: tamte to oszronione pigulki z bialym pierscieniem, te dwa - gole glify bez tla i bez obrysu. Kolko pojawialo sie dopiero pod kursorem, wiec w spoczynku nie bylo widac, ze to w ogole przyciski; do tego 40px przy 42px sasiadow rozjezdzalo rzad o piksel u gory i u dolu. Ten sam material i ta sama wysokosc co reszta rzedu: cztery elementy, jedna linia optyczna. */ .act{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;color:#fff;border:0; background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);transition:background .15s,box-shadow .15s} .act:hover{background:rgba(255,255,255,.26);box-shadow:inset 0 0 0 1px rgba(255,255,255,.58),inset 0 1px 0 rgba(255,255,255,.42)} /* Plakietka byla granatowa NA GRANATOWYM pasku, a jej obramowanie tez granatowe, wiec biala cyfra wisiala bez zadnego tla i zlewala sie z ikona pod spodem. Akcent daje kontrast z paskiem, a obramowanie w kolorze paska odcina ja od samej ikony. Ten sam uklad ma juz plakietka w dolnym pasku skrotow (.ab__n), wiec przy okazji obie zaczynaja wygladac tak samo. -6px wypychalo ja poza obrys przycisku i optycznie za wysoko; -3px trzyma ja przy ikonie, a nie nad nia. */ /* 17px przy pismie 10px starczalo na jedna cyfre i to ledwo: przy dwoch cyfrach padding rozciagal kolko w waski owal, a cyfry siedzialy scisniete przy samym obrysie. 21px z pismem 11px trzyma kolo dla jednej cyfry i daje spokojna pigulke dla dwoch, bez zmiany wysokosci - rzad ikon zostaje na swojej linii. Wypelnienie to teraz gradient, a nie plaski akcent: jasniejszy blekit u gory, glebszy u dolu, plus wewnetrzny rozblysk pod samym obrysem. To on daje polysk; sam ciemniejszy kolor dalby tylko ciemniejsza plame. Blekit mocniejszy niz --accent, zeby plakietka trzymala sie na tle rozmytego zdjecia w pasku. */ .act .bdg{position:absolute;top:-4px;right:-4px;min-width:21px;height:21px;padding:0 5px;display:grid;place-items:center;border-radius:999px; /* Bez koloru. Plakietka jest z tego samego szkla co przycisk pod nia, tylko odrobine ciemniejsza - tyle, zeby cyfra miala sie na czym oprzec, i nie wiecej. Kolorowa kropka w rogu przyciagala wzrok mocniej niz cokolwiek innego w pasku, a niesie najmniej: liczbe obserwowanych. */ background:rgba(6,24,48,.34);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); color:#fff;font-size:11px;font-weight:700;line-height:1;letter-spacing:.01em; border:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),inset 0 1px 0 rgba(255,255,255,.22),0 1px 3px rgba(4,20,48,.35)} .pill{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;font-size:13.5px;font-weight:600;border:0;white-space:nowrap;transition:background .15s,box-shadow .15s} .pill--w{background:rgba(255,255,255,.15);color:#fff;font-weight:700;-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.42),inset 0 1px 0 rgba(255,255,255,.3),0 6px 18px -10px rgba(4,14,30,.6)} .pill--w:hover{background:rgba(255,255,255,.26);box-shadow:inset 0 0 0 1px rgba(255,255,255,.58),inset 0 1px 0 rgba(255,255,255,.42),0 9px 24px -10px rgba(4,14,30,.72)} /* Same material as the account button next to it: frosted translucent white over the header photo, not a blue fill. The two sat side by side in one row wearing two different treatments. */ .pill--n{background:rgba(255,255,255,.14);color:#fff;font-weight:700;-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)} .pill--n:hover{background:rgba(255,255,255,.26);box-shadow:inset 0 0 0 1px rgba(255,255,255,.58),inset 0 1px 0 rgba(255,255,255,.42),0 9px 24px -10px rgba(4,14,30,.72)} /* 42, nie 40: dokladnie tyle ma .act, czyli serce, czat i dzwonek stojace obok. Dwa piksele roznicy w rzedzie okraglych przyciskow widac od razu jako "ten jest inny" - i wlasnie tak wygladalo na zrzucie. */ .acct{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 8px 0 4px;border-radius:999px;background:rgba(255,255,255,.14);border:0;-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)} .acct:hover{background:rgba(255,255,255,.24)} .avt{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;background:var(--navy);color:#fff;font-size:12px;font-weight:800} .acct .nm{color:#fff;font-size:13.5px;font-weight:600} /* Daszek, a nie "kazdy svg w przycisku". Odkad w kolku siedzi znak zeglarski, regula bez ograniczenia do dziecka bezposredniego obracala TAKZE logo przy otwieraniu menu - zagiel robil piruet, choc nic nie zapowiadal. `>` wystarczy: daszek jest bezposrednim dzieckiem przycisku, a logo siedzi wewnatrz .avt. */ .acct>svg{color:#fff;transition:transform .15s} .acct.open>svg{transform:rotate(180deg)} .menu{position:fixed;right:24px;top:100px;width:232px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 14px 34px -12px rgba(10,37,64,.5);padding:6px 0;z-index:75;animation:menuIn .14s ease} @keyframes menuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}} .menu .mh{padding:6px 16px 8px;border-bottom:1px solid var(--line);margin-bottom:4px} .menu .mh small{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);font-weight:700} .menu .mh b{display:block;font-size:13.5px;color:var(--navy)} .menu a,.menu button{display:block;width:100%;text-align:left;padding:8px 16px;font-size:13.5px;font-weight:600;color:var(--ink);background:none;border:0} .menu a:hover{background:var(--canvas);color:var(--blue)} .menu .lg{color:var(--red)} .menu .lg:hover{background:var(--red-bg)} .menu .sep{height:1px;background:var(--line);margin:6px 0} .burger{width:40px;height:40px;display:grid;place-items:center;border-radius:999px;color:#fff;background:none;border:0} .burger:hover{background:rgba(255,255,255,.15)} /* second row — category nav (mirrors zeglarski's .mainnav) */ /* ── main navigation: four groups with dropdowns, not ten flat links ──────── Sits on the navy masthead, so triggers are white-on-dark and the menus drop as the same white 10px cards the rest of the product uses. overflow must stay visible or the menus are clipped by the header. */ .mainnav{background:transparent;border-top:1px solid rgba(255,255,255,.16);overflow:visible} /* one family for the whole bar, triggers and menus alike. The old rule set a third typeface here (Signika), so the nav was the only place in the product using it; everything below inherits this rather than declaring its own. */ .mainnav__list{position:relative;overflow:visible;padding:4px 24px; font-family:"Inter",system-ui,sans-serif} /* Pasek przewija sie na KAZDEJ szerokosci: dwanascie dzialow z ikonami zajmuje ~1390 px, wiec na 1440 miesci sie w calosci, a nizej trzeba przesunac. Ukryty pasek przewijania, bo to nawigacja, nie tabela. */ .mainnav__scroll{display:flex;align-items:center;gap:1px;flex-wrap:nowrap; overflow-x:auto;overflow-y:visible;scrollbar-width:none;-webkit-overflow-scrolling:touch} .mainnav__scroll::-webkit-scrollbar{display:none} /* Dzialy WYPELNIAJA szerokosc paska. `1 0 auto`, nie `1`: rosna od swojej naturalnej szerokosci i nigdy nie kurcza sie ponizej niej. Roznica jest cala funkcja tej reguly - przy `flex:1` dziewiec pozycji dostaje po rowno, wiec "Rejsy" ma tyle samo miejsca co "Bezpieczenstwo" i albo jedno plywa w pustce, albo drugie sie lamie. Przy `1 0 auto` proporcje zostaja, nadmiar rozklada sie miedzy pozycje, a gdy miejsca zabraknie, pasek wraca do przewijania zamiast sciskac etykiety. */ .mainnav__scroll>.nvg{flex:1 0 auto} .mainnav__scroll>.nvg>.nvg__i{width:100%;justify-content:center} /* 8px zamiast 11 i 13px zamiast 13,5: kazda pozycja niesie teraz ikone, wiec szerokosc trzeba bylo znalezc gdzie indziej. Same liczby sa zmierzone, nie dobrane na oko - przy poprzednich wartosciach tresc paska miala 1539 px. */ .nvg__i{position:relative;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 8px; border-radius:var(--r);white-space:nowrap;cursor:pointer;text-decoration:none; font-size:13px;font-weight:600;letter-spacing:0;text-transform:none; color:rgba(255,255,255,.92);text-shadow:0 1px 7px rgba(4,14,30,.45); transition:background-color var(--t) var(--ease),color var(--t) var(--ease)} .nvg__i:hover{background:rgba(255,255,255,.14);color:#fff} .nvg__i.on{background:rgba(255,255,255,.18);color:#fff} /* the intent pair reads as one control, so it gets pills rather than tabs */ .nvg__seg{display:flex;align-items:center;gap:5px;flex:none} .nvg__i--sm{height:28px;padding:0 12px;border-radius:999px;font-size:12.5px; border:1px solid rgba(255,255,255,.34);text-shadow:none} .nvg__i--sm:hover{background:rgba(255,255,255,.16)} .nvg__i--sm.on{background:#fff;border-color:#fff;color:var(--navy)} .nvg__sep{width:1px;height:22px;background:rgba(255,255,255,.24);margin:0 8px 0 4px;flex:none} .nvg{display:flex;align-items:center;flex:none} /* Ikona dzialu. Lekko przygaszona wzgledem tekstu: ma pomagac znalezc pozycje wzrokiem, a nie konkurowac z jej nazwa. */ .nvg__ic{display:inline-flex;flex:none;opacity:.72} .nvg__i--has:hover .nvg__ic,.nvg:hover>.nvg__i .nvg__ic,.nvg__i.on .nvg__ic{opacity:1} .nvg__chev{width:6px;height:6px;flex:none;opacity:.6; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px)} .nvg:hover>.nvg__i,.nvg:focus-within>.nvg__i{background:rgba(255,255,255,.16);color:#fff} /* .nvg__i--last odeszla razem z pozycja "Wszystkie". */ /* Strzalki paska kategorii. Bialy krazek z granatowym znakiem - ten sam jezyk co strzalki karuzeli, bo obie robia to samo na ciemnym tle. Domyslnie ich nie ma: pokazuje je dopiero klasa, ktora navHint ustawia po zmierzeniu. */ .mnar{position:absolute;top:50%;transform:translateY(-50%);z-index:4; width:30px;height:30px;border:0;border-radius:999px;display:grid;place-items:center; background:#fff;color:var(--navy);cursor:pointer; box-shadow:0 2px 10px rgba(4,14,30,.35); opacity:0;pointer-events:none;transition:opacity var(--t) var(--ease)} .mnar--l{left:8px} .mnar--r{right:8px} .mainnav__list.ma-l .mnar--l,.mainnav__list.ma-r .mnar--r{opacity:1;pointer-events:auto} /* Dotyk przewija palcem, wiec krazek bylby tam tylko przeszkoda nad trescia. */ @media(hover:none){.mnar{display:none}} @media(prefers-reduced-motion:reduce){.mnar{transition:none}} .nvg__menu{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:70;min-width:0; background:#fff;border-radius:var(--r-lg);padding:7px; box-shadow:0 20px 46px -18px rgba(4,14,30,.5),0 0 0 1px rgba(10,37,64,.07); opacity:0;visibility:hidden;transform:translateY(-4px); transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility 0s linear var(--t)} .nvg:hover>.nvg__menu,.nvg:focus-within>.nvg__menu{opacity:1;visibility:visible;transform:none;transition-delay:0s} /* Hover bridge. The panel hangs off .mainnav__list, so it opens ~8px below the trigger it belongs to, and a pointer travelling down from the label crosses dead space — .nvg:hover goes false and the menu shuts under the cursor. This invisible strip is a child of the panel (so a descendant of .nvg) and keeps the chain alive across the gap. It inherits visibility, so a closed panel's bridge is inert and cannot swallow clicks on the page underneath. */ .nvg__menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px} /* mega panel: a grid of cards rather than a list of links. Each card carries the category's own ink in its icon tile and the live count of what it returns, so the menu is a small directory instead of a set of guesses. */ .nvg__menu--mega{padding:12px} /* one shelf of cards for every group: uniform column width is what makes the panels feel like the same object being refilled rather than five menus */ /* One box, refilled. Every panel is the same height whichever group you hover, so the menu stops resizing under the cursor — the discipline Etsy's category mega menu uses. The height is the tallest group's natural height, so nothing is ever clipped and no panel has to grow. */ /* 221px is the tallest group's natural content height (a full three-item rail), so pinning to it makes every panel exactly the same box without ever clipping or stretching one. Groups with a shorter rail keep the slack rather than letting the menu jump as the cursor crosses the bar. */ .nvm__in{display:flex;align-items:flex-start;gap:14px;min-height:221px} .nvm__main{flex:1;min-width:0} /* Two columns, not three: the groups hold 2, 6, 2, 2 and 2 cards, so a 3-column grid left a ragged empty cell in four panels out of five. At two columns every group fills its rows exactly (2 -> one row, 6 -> three). The cap keeps a card near its old 302px instead of stretching it across half the bar. */ .nvc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-width:660px} /* Panel dzieli sie na pol: lewa polowa to kupno, prawa sprzedaz. Kreska miedzy nimi jest granica dwoch pytan, nie ozdoba, wiec biegnie przez cala wysokosc panelu (align-items:stretch), a nie tylko obok wyzszej kolumny. Siatka kart wewnatrz polowy schodzi do JEDNEJ kolumny: polowa panelu ma okolo 320px, a karta jest projektowana na ~302px, wiec dwie obok siebie zwezilyby ja do polowy i opis pod tytulem zawijalby sie po jednym slowie. */ .nvm__sides{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-width:0} .nvm__side{min-width:0;padding:0 13px} .nvm__side:first-child{padding-left:0;border-right:1px solid var(--line)} .nvm__side:last-child{padding-right:0} .nvm__side .nvc-grid{grid-template-columns:minmax(0,1fr);max-width:none} /* Polowa bez ogloszen. Kreskowana ramka czytala sie jak pole "upusc tu plik", wiec zamiast niej jest wlasna kompozycja: kafel z ikona dzialu w jego kolorze, jedno zdanie i akcja. Nie wyszarzamy jej na sile - to nie blad, tylko stan przejsciowy, a przygaszona kolumna obok pelnej wyglada jak wylaczona funkcja. */ /* Stan wylaczony. Kafel zachowuje uklad i kolor dzialu, traci zaproszenie: bez tla pod kursorem, bez podniesienia, z wyblakla ikona i zerem w miejscu liczby. Tlo zostaje biale - szare pole na bialym panelu czytaloby sie jak zaladowanie w toku, a to jest wynik koncowy. */ .nvc--zero{cursor:default;background:#fff;box-shadow:inset 0 0 0 1px var(--hair)} .nvc--zero .nvc__ic{opacity:.38} .nvc--zero .nvc__tx b{color:var(--muted);font-weight:650} .nvc--zero .nvc__d{color:#a8b2bd} .nvc--zero .nvc__n{color:#a8b2bd;background:var(--canvas);box-shadow:none} .nvc--pusto{background:color-mix(in srgb,var(--ic) 5%,#fff); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ic) 14%,transparent)} .nvc--pusto:hover{background:color-mix(in srgb,var(--ic) 9%,#fff)} .nvc--pusto .nvc__tx b{color:var(--muted);font-weight:650} .nvc--pusto .nvc__ic{opacity:.5} /* Naglowek polowy. Tytul normalna wielkoscia liter, nie kapitalikami: to nazwa sekcji, a nie etykieta systemowa, a przy kapitalikach obie polowy wygladaly identycznie. Liczba obok tytulu jest informacja - mowi, ile tam jest, zanim ktokolwiek przesunie wzrok na karty. Podpis odjezdza na prawo, zeby tytul i liczba stali razem jako jedna calosc. */ .nvm__st{display:flex;align-items:baseline;gap:8px;padding:1px 0 9px;line-height:1.2} .nvm__st b{font-size:13px;font-weight:750;letter-spacing:-.01em;color:var(--navy)} .nvm__st i{font-style:normal;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums; color:var(--side-ink);background:color-mix(in srgb,var(--side-ink) 12%,#fff); border-radius:999px;padding:1px 7px} .nvm__st span{margin-left:auto;font-size:11px;font-weight:500;color:var(--faint); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} /* Kolor strony jako zmienna, nie jako trzypikselowa kreska. Kupno prowadzi do ofert, sprzedaz do ludzi, ktorzy szukaja: ten sam podzial, ktory na karcie niesie kolor wstazki. Polowa sprzedazowa dostaje jeszcze wlasne, bardzo lekkie tlo - dwie identyczne kolumny obok siebie nie czytaly sie jako dwa rozne pytania, a sam znacznik przy naglowku byl na to za slaby. */ .nvm__side--kup{--side-ink:var(--accent)} .nvm__side--sprz{--side-ink:#6b3fa0;border-radius:var(--r); background:linear-gradient(180deg,color-mix(in srgb,#6b3fa0 4%,transparent),transparent 62%)} .nvm__rail{flex:none;width:284px;border-left:1px solid var(--line);padding-left:14px;align-self:stretch} /* Ten sam rytm co naglowki polowek: trzy naglowki w jednym panelu musza byc jednym systemem, a nie dwoma kapitalikami i jednym tytulem. */ .nvm__rt{font-size:13px;font-weight:750;letter-spacing:-.01em;color:var(--navy); padding:1px 0 9px;line-height:1.2} .nvr{display:flex;align-items:center;gap:10px;padding:6px;border-radius:var(--r); text-decoration:none;text-shadow:none;transition:background-color var(--t) var(--ease)} .nvr:hover{background:var(--canvas)} .nvr__m{flex:none;width:46px;height:46px;border-radius:var(--r);overflow:hidden} .nvr__m img{width:100%;height:100%;object-fit:cover;display:block} .nvr__m .nvr__tx{flex:1;min-width:0} .nvr__tx b{display:block;font-size:12.5px;font-weight:600;color:var(--navy);line-height:1.3; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .nvr__p{display:block;font-size:12px;font-weight:700;color:var(--ink);margin-top:2px; font-variant-numeric:tabular-nums} /* Under ~1140px the 284px rail starves the cards — three of them drop to 180px, which is not enough for "Części i pokład" plus its count. The cards are the navigation and the rail is garnish, so the rail goes first. */ /* Rail hidden here, so the tallest panel is the six-card grid instead of the rail. Re-pin to that height, otherwise every panel carries 100px of slack the rail is no longer there to fill. */ @media (max-width:1139px){.nvm__rail{display:none}.nvm__in{min-height:192px}} .nvc{--ic:var(--faint);display:flex;align-items:center;gap:11px;padding:10px 11px; border-radius:var(--r);text-decoration:none;text-shadow:none; transition:background-color var(--t) var(--ease)} /* Pelny cykl stanow, nie sama zmiana tla. Dotad karta reagowala wylacznie tlem, a klawiatura nie dostawala NICZEGO - przejscie tabem po panelu bylo niewidoczne. Wcisniecie daje mikroprzesuniecie, zeby klikniecie mialo fizyczna odpowiedz. */ .nvc{transition:background-color var(--t) var(--ease),box-shadow var(--t) var(--ease), transform .09s var(--ease)} .nvc:hover{background:var(--canvas); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ic) 16%,transparent)} .nvc:focus-visible{outline:none;background:var(--canvas); box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)} .nvc:active{transform:translateY(1px)} .nvc__ic{transition:background-color var(--t) var(--ease)} .nvc:hover .nvc__ic{background:color-mix(in srgb,var(--ic) 18%,#fff)} .nvc__ic{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r); color:var(--ic);background:color-mix(in srgb,var(--ic) 11%,#fff)} .nvc__tx{flex:1;min-width:0} .nvc__tx b{display:block;font-size:13px;font-weight:700;color:var(--navy);letter-spacing:0;line-height:1.25} .nvc__d{display:block;font-size:11.5px;font-weight:500;color:var(--faint);margin-top:1px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nvc__n{flex:none;min-width:22px;text-align:center;font-size:11.5px;font-weight:700; font-variant-numeric:tabular-nums;color:var(--muted);background:var(--canvas); border-radius:999px;padding:3px 8px} .nvc__n{transition:background-color var(--t) var(--ease),color var(--t) var(--ease)} .nvc:hover .nvc__n{background:#fff;color:var(--navy)} /* a post card leads to the form, not a list, so it says so instead of counting */ .nvc--post .nvc__n--post{color:var(--accent-dark);background:var(--blue-soft)} /* nothing listed yet: still clickable (the results page has a real empty state), just not shouting a zero at the reader */ .nvc--empty .nvc__ic{opacity:.45} .nvc--empty .nvc__tx b{color:var(--muted);font-weight:600} .nvg__menu .nvg__all{display:flex;align-items:center;justify-content:space-between;gap:10px; margin-top:7px;padding:10px 11px 4px;border-top:1px solid var(--line);border-radius:0; font-size:12.5px;font-weight:700;color:var(--accent-dark);text-decoration:none;text-shadow:none} .nvg__menu .nvg__all:hover{color:var(--accent)} .nvg__menu .nvg__all i{font-style:normal;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums} /* the last groups would push a left-aligned panel off the right edge */ .nvg__i:focus-visible{outline:2px solid #fff;outline-offset:2px} .nvg:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:var(--r)} /* below the desktop breakpoint the whole bar becomes a scroll rail and the dropdowns open on tap via :focus-within, which touch gives us for free */ /* 24 px, nie 16: ponizej 1080 px tresc strony dalej ma 24 px marginesu, wiec 16 px w pasku odsuwaloby kategorie od kolumny kart o osiem pikseli - dokladnie tyle, zeby bylo widac, i za malo, zeby wygladalo celowo. */ @media(max-width:1080px){ .mainnav__list{padding:4px 24px} } @media(prefers-reduced-motion:reduce){.nvg__menu,.nvg__i{transition:none}} /* mobile drawer */ .backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60} .drawer{position:fixed;top:0;right:0;height:100%;width:310px;max-width:86vw;background:#fff;z-index:70;box-shadow:-12px 0 40px -12px rgba(8,28,64,.45);display:flex;flex-direction:column;overflow-y:auto} /* fixed-height children of the drawer's flex column must never be squashed */ .drawer .btn,.drawer__h{flex:none} .drawer__h{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:var(--mast)} .drawer__h img{height:28px} .drawer__x{width:36px;height:36px;display:grid;place-items:center;border-radius:999px;color:#fff;background:none;border:0} .drawer__acct{padding:16px 20px;border-bottom:1px solid var(--line)} .drawer__row{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;font-size:15px;font-weight:600;color:var(--navy)} .drawer__row:hover{background:var(--canvas)} .drawer__lbl{padding:10px 20px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:700} /* flex, not block: the row carries a count on the right like .drawer__row */ .drawer a.cat{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 20px;font-size:14px;color:var(--ink)} .drawer a.cat:hover{background:var(--canvas);color:var(--blue)} .drawer a.cat .cnt{margin-left:0;flex:none} .cnt--go{color:var(--accent-dark);background:transparent;padding-right:0} .drawer a.cat--empty{color:var(--faint)} .drawer a.cat--all{margin-top:6px;border-top:1px solid var(--line);padding-top:14px;font-weight:700;color:var(--navy)} /* ── Buttons ── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:var(--r);font-weight:700;font-size:15px;line-height:1;border:0;white-space:nowrap;transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease),transform .09s var(--ease)} .btn:active{transform:translateY(1px)} /* in-flight submit: visibly inert so a second tap is obviously a no-op */ .btn:disabled{opacity:.6;cursor:default;pointer-events:none} .btn .ic{flex:none} .btn--p{background:var(--bar);color:#fff}.btn--p:hover{background:var(--bar-d)} .btn--o{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}.btn--o:hover{background:var(--canvas)} .btn--n{background:var(--navy);color:#fff}.btn--n:hover{background:var(--navy-soft)} .btn--g{background:var(--green);color:#fff}.btn--g:hover{background:#0b6334} /* toggled outline button (obserwujesz / w porównaniu): the same object, filled in */ .btn--o.onmark{background:var(--blue-soft);border-color:var(--accent);color:var(--accent-dark)} .btn--o.onmark:hover{background:#dceaf8} @media(prefers-reduced-motion:reduce){.btn{transition:background-color var(--t) linear}.btn:active{transform:none}} /* detail-panel helpers */ .dt-kick{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)} /* The phone action bar. It had NO rules at all, so it rendered as a plain static block on EVERY width: a second, unstyled copy of the price and both buttons, sitting a little below the identical pair in the rail. The markup comment always claimed it was "pinned" and "hidden above 860" but the CSS to do either was never written. It only earns its place where the rail has scrolled out of view, so above 860 it is simply not rendered. */ .dtbar{display:none} @media(max-width:860px){ /* .ab (dolny pasek skrotow) stoi na 0..62px z z-index 59, a .dtbar mial bottom:0 i z-index 20, wiec cena i przycisk "Napisz" byly zakryte w calosci na kazdym telefonie: elementFromPoint w srodku CTA zwracal nav#appbar. .cmpbar dostal juz taka korekte, .dtbar nie. */ .dtbar{position:sticky;bottom:calc(62px + env(safe-area-inset-bottom,0px));z-index:20;display:flex;align-items:center; justify-content:space-between;gap:12px;margin-top:14px;padding:10px 12px; background:#fff;border-radius:var(--r-lg); box-shadow:0 -8px 20px -14px rgba(8,28,64,.45),0 0 0 1px var(--line)} .dtbar__p{font-family:"Archivo",sans-serif;font-size:17px;font-weight:800; color:var(--navy);white-space:nowrap} .dtbar__a{display:flex;gap:8px;min-width:0} /* .cmpbar is position:fixed bottom:0 z-index:55, so on a phone the two bottom bars would stack on top of each other. One bottom bar at a time: comparing listings and acting on this one are different jobs. :has is already used elsewhere in this file, so this is an existing pattern. */ body:has(.cmpbar) .dtbar{display:none} .dtbar__a .btn{height:42px;padding:0 14px;font-size:13.5px} } .dt-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px} .dt-acts .btn{height:42px;padding:0 8px;font-size:13.5px;min-width:0} .proact{display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:800;color:var(--amber);background:var(--amber-bg);border:1px solid var(--amber-bd);border-radius:var(--r);padding:10px 12px;margin-bottom:8px} /* ── Headings — four levels, each identified by the weight of its own rule ── .rg__h display, no rule (home register only) .phead page title, 2px navy rule .sec-h section, 1px hairline + the 42px accent tab this site already owns .box__h inside a box, 1px hairline, no tab All sentence case: the register set the voice, the rest follows it. */ .sec{margin-top:40px} /* ── Allegro benefits strip: five white cards, each a coloured round badge and one short promise. It is the first thing under the banner, so it takes the tighter 22px the first element gets rather than the 40px section rhythm. ── */ .benes{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:22px} .bene{display:flex;align-items:center;gap:12px;background:#fff;border-radius:12px;padding:14px 16px} .bene__ic{ flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center; color:var(--bc);background:color-mix(in srgb,var(--bc) 13%,#fff); } @supports not (background:color-mix(in srgb,red 10%,#fff)){.bene__ic{background:var(--blue-soft)}} .bene__tx{min-width:0;display:flex;flex-direction:column} .bene__tx b{font-size:13px;font-weight:700;color:var(--navy);line-height:1.25} .bene__tx span{font-size:11.5px;color:var(--faint);line-height:1.3} @media(max-width:1080px){.benes{grid-template-columns:repeat(3,1fr)}.bene:nth-child(n+4){display:none}} @media(max-width:760px){.benes{grid-template-columns:repeat(2,1fr);gap:8px}.bene:nth-child(n+3){display:none}} @media(max-width:480px){.bene{padding:12px}.bene__tx span{display:none}} /* on a phone the trail would push the real inventory several screens down, so it is trimmed to a single row of two. Targets .sec--recent directly now: it used to ride on .sec--first, which no longer exists since the benefits strip took that slot — and whichever section happened to be first would have inherited a trim meant only for the recently-viewed row. */ @media(max-width:560px){.sec--recent .grid .card:nth-child(n+3){display:none}} .sec-h{position:relative;font-family:"Archivo",sans-serif;color:var(--navy);font-weight:800;font-size:20px;letter-spacing:-.02em;padding-bottom:0;margin-bottom:14px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px} .sec-h .more,.phead .more{font-family:"Inter",sans-serif;font-weight:700;font-size:13px;color:var(--accent-dark);letter-spacing:0} .sec-h .more:hover,.phead .more:hover{text-decoration:underline} .phead{font-family:"Archivo",sans-serif;font-size:clamp(23px,3vw,31px);font-weight:800;letter-spacing:-.026em;line-height:1.12;color:var(--navy);margin:26px 0 20px;padding-bottom:13px;border-bottom:2px solid var(--navy);display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px} .phead .cnt{align-self:center} /* ── Category chips (used by the results page filters). A 3px rule in the category's own ink at chip scale; empty ones are dashed "open berths" (the .empty border idiom) rather than a wall of zeros. ── */ .rg__arr{transition:transform .16s ease} .rg__c{--cc:var(--line);display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 12px 0 15px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:inset 3px 0 0 var(--cc);transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease} .rg__c b{font-size:13.5px;font-weight:600;color:var(--navy)} .rg__c span{font-size:12.5px;font-weight:700;color:var(--muted)} .rg__c:hover,.rg__c:focus-visible{background:var(--canvas);border-color:var(--accent);box-shadow:inset 5px 0 0 var(--cc)} .rg__c:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .rg__c--o{border-style:dashed} .rg__c--o b{font-weight:500;color:var(--muted)} .rg__c--o .rg__p{display:grid;place-items:center;color:var(--muted)} .rg__c--o:hover,.rg__c--o:focus-visible{border-style:solid} .rg__c--o:hover b,.rg__c--o:focus-visible b{color:var(--navy)} .rg__c--o:hover .rg__p,.rg__c--o:focus-visible .rg__p{color:var(--accent-dark)} /* the buyer's target: the .btn--n recipe at chip scale, closing the rail */ .rg__c--all{gap:8px;padding:0 14px;background:var(--navy);border-color:var(--navy);box-shadow:none;color:#fff;font-size:13.5px;font-weight:700} .rg__c--all:hover,.rg__c--all:focus-visible{background:var(--navy-soft);border-color:var(--navy-soft);box-shadow:none} .rg__c--all:hover .rg__arr,.rg__c--all:focus-visible .rg__arr{transform:translateX(4px)} @media(prefers-reduced-motion:reduce){.rg__c,.rg__arr{transition:none}.rg__c--all:hover .rg__arr,.rg__c--all:focus-visible .rg__arr{transform:none}} /* ── HERO "Żywa woda" (gw-). The WebGL light-on-water surface (engine in app.js) with Bricolage Grotesque display type on it, one primary CTA, and the three posting intents as a functional bar on the hero's bottom edge. ── */ .gw{ position:relative; isolation:isolate; overflow:hidden; border-radius:18px; margin:10px 0 6px; background:var(--blue-soft); /* holds the color until WebGL is up */ min-height:clamp(520px,66vh,640px); display:flex;flex-direction:column; --gw-pad:clamp(22px,4vw,56px); --gw-lead-ink:#3f4d5d; /* 7.0:1 on the darkest water tile */ --gw-amber-aa:#8a5a15; /* AA-safe amber for text (5.9:1 on white) */ } .gw__fx{position:absolute;inset:0;z-index:-2;width:100%;height:100%;display:block} /* No-WebGL fallback (or failed compile): a static but designed surface in the same palette. */ .gw--nogl .gw__fx{display:none} .gw--nogl{ background: radial-gradient(120% 90% at 82% 18%, rgba(242,225,191,.5) 0%, rgba(242,225,191,0) 42%), radial-gradient(90% 120% at 70% 80%, rgba(102,153,255,.22) 0%, rgba(102,153,255,0) 55%), radial-gradient(140% 100% at 12% 30%, #fdfeff 0%, rgba(253,254,255,0) 60%), linear-gradient(160deg,#f7fafd 0%, var(--blue-soft) 55%, #dfeaf7 100%); } /* Fade into the page color at the hero's bottom edge: the chip rail below "surfaces" out of the same water. Above canvas (-1), below content. */ .gw::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:90px;z-index:-1; background:linear-gradient(to bottom, rgba(245,247,250,0), var(--canvas)); pointer-events:none; } .gw__in{ flex:1;display:flex;flex-direction:column;justify-content:center; padding:56px var(--gw-pad) 34px; } .gw__kick{ font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--accent-dark); margin:0 0 20px; } .gw__h{ font-family:"Bricolage Grotesque","Archivo",sans-serif; font-size:clamp(40px,6.4vw,86px); font-weight:500; letter-spacing:-.033em; line-height:1.02; color:var(--navy); margin:0 0 22px; } .gw__lead{ font-size:clamp(15.5px,1.3vw,18px); line-height:1.55; color:var(--gw-lead-ink); max-width:46ch; margin:0 0 30px; } .gw__cta{display:flex;align-items:center;gap:26px;flex-wrap:wrap} /* Primary pill: resting --accent-dark (6.2:1), hover --accent (4.7:1, AA). Do not shrink 15.5px/600: that closes the hover state's AA margin. */ .gw__btn{ display:inline-flex;align-items:center;gap:10px; background:var(--accent-dark);color:#fff; font-size:15.5px;font-weight:600;letter-spacing:-.01em; padding:15px 30px;border-radius:999px;text-decoration:none; box-shadow:0 8px 24px rgba(17,96,184,.26); transition:background .25s ease, transform .25s ease, box-shadow .25s ease; } .gw__btn:hover{background:var(--accent);transform:translateY(-1px);box-shadow:0 12px 28px rgba(23,115,214,.32)} .gw__btn:active{transform:translateY(0) scale(.98)} .gw__btn .rg__arr{color:#fff} .gw__roll{display:block;position:relative;overflow:hidden;height:1.35em} .gw__roll i{ display:block;font-style:normal;height:1.35em;line-height:1.35em; transition:transform .34s cubic-bezier(.16,1,.3,1); } .gw__btn:hover .gw__roll i{transform:translateY(-1.35em)} .gw__btn svg{flex:none;transition:transform .34s cubic-bezier(.16,1,.3,1)} .gw__btn:hover svg{transform:translateX(3px)} .gw__browse{ display:inline-flex;align-items:center;gap:7px; font-size:15px;font-weight:600;color:var(--accent-dark);text-decoration:none; border-bottom:1.5px solid rgba(17,96,184,.30); padding-bottom:2px; transition:border-color .2s ease; } .gw__browse:hover{border-color:var(--accent-dark)} .gw__browse svg{flex:none;transition:transform .25s cubic-bezier(.16,1,.3,1)} .gw__browse:hover svg{transform:translateX(3px)} /* Visually-hidden label for screen readers (single CTA name next to the aria-hidden roll). */ .gw-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Focus: outline only, NO border-radius mutation (outline follows the element radius; the pill never deforms on keyboard focus). */ .gw a:focus-visible{outline:2px solid var(--accent-dark);outline-offset:2px} /* Content entrance: once, short, transform/opacity only, and only without a reduced-motion preference. */ @media (prefers-reduced-motion: no-preference){ .gw__kick,.gw__h,.gw__lead,.gw__cta{animation:gw-in .7s cubic-bezier(.16,1,.3,1) both} .gw__h{animation-delay:.06s} .gw__lead{animation-delay:.12s} .gw__cta{animation-delay:.18s} @keyframes gw-in{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} } } @media (prefers-reduced-motion: reduce){ .gw__btn,.gw__btn svg,.gw__roll i,.gw__browse,.gw__browse svg{transition:none} .gw__btn:hover .gw__roll i{transform:none} .gw__btn:hover,.gw__btn:hover svg,.gw__browse:hover svg{transform:none} /* The static water frame is drawn by JS (t=14); the loop never starts. */ } @media (max-width:1080px){ .gw__h{font-size:clamp(40px,7.2vw,72px)} } @media (max-width:860px){ } @media (max-width:760px){ .gw{border-radius:14px} } @media (max-width:560px){ /* --gw-navh is set by startHeroFx() from the real navbar height; 190px is only the fallback. */ .gw{min-height:min(560px, calc(100svh - var(--gw-navh,190px)))} .gw__in{padding-top:40px;padding-bottom:26px} .gw__h{font-size:clamp(38px,11vw,46px)} .gw__cta{gap:18px} .gw__btn{padding:14px 26px;font-size:15px} } /* ── Video hero (vhx-). A contained rounded card in the page flow (the site's card language), sailing video inside with the proposition on it. The navbar stays normal: the hide-and-reveal trick belonged to the full-screen variant. ── */ .vhx{ position:relative;isolation:isolate;overflow:hidden; display:flex;flex-direction:column; /* eBay proportions: the banner is a strip, not a stage. Short enough that real inventory clears the fold on a laptop. */ min-height:clamp(300px,38vh,380px); margin:28px 0 0; /* clear air between the navbar card and the banner */ border-radius:18px; background:var(--navy-deep); --gw-pad:clamp(22px,4vw,56px); } /* object-position pushes the crop down: the source frame's top third is flat horizon haze, the water below it is the part worth showing. The grade lifts the Baltic teal that the fog washes out. */ .vhx__vid{ position:absolute;inset:0;z-index:-2;width:100%;height:100%; object-fit:cover;object-position:center 50%; filter:saturate(1.14) contrast(1.07); } .vhs--novid .vhx__vid{display:none} /* Plakat jest tlem KAZDEGO slajdu wideo (adres wstawia app.js, bo nosi ?v=). Dzieki temu jedno nieudane pobranie gasi jedno ujecie, a nie cala karuzele - i nie ma czarnej klatki miedzy pokazaniem slajdu a startem odtwarzania. */ .vhs--vid{background-color:#0a2540;background-position:center;background-size:cover;background-repeat:no-repeat} /* ── carousel ─────────────────────────────────────────────────────────────── Slides are stacked, not tracked: a crossfade needs no width arithmetic and cannot drift out of alignment when the hero is resized. The container keeps its own height because every slide is absolutely positioned except the active one, which stays in flow and therefore sets the height. */ /* isolation:isolate is load-bearing, not decoration. .vhx__img sits at z-index:-2, so it needs its OWN slide to be a stacking context; otherwise it escapes to .vhx (which isolates) and paints beneath every slide background, and .vhs--b/--c carry opaque gradients. While a slide fades, opacity is between 0 and 1, which creates a stacking context on its own and the photo shows. The moment the transition lands on exactly 1 that context disappears, the gradient covers the photo, and the picture "loads and then turns back into a placeholder". Isolating here makes the slide a stacking context at every opacity, so the photo stays put. */ .vhs{position:absolute;inset:0;isolation:isolate;display:flex;flex-direction:column;opacity:0;visibility:hidden; transition:opacity .5s var(--ease),visibility 0s linear .5s} /* flex:1 0 auto, or the banner grows a dark stripe along its bottom edge. .vhx carries min-height:clamp(300px,38vh,380px) while a slide's own content is shorter (310px against 342px at a 1280px viewport). The inactive slides are absolute with inset:0 so they always fill; the ACTIVE one is the only in-flow child, and with the default flex:0 1 auto it stopped at its content height and left the remainder showing --navy-deep. The dots sit at bottom:16px of the banner, so they landed inside that empty strip and it read as a bar under the carousel rather than as an overlay on it. */ .vhs.on{position:relative;flex:1 0 auto;opacity:1;visibility:visible;transition:opacity .5s var(--ease)} /* .vhs--b i .vhs--c odeszly razem ze slajdami zdjeciowymi: karuzela ma teraz piec ujec wideo, a tlem kazdego z nich jest wlasny plakat (.vhs--vid). .vhx__img zostaje, bo markup nadal umie narysowac slajd ze zdjecia - wystarczy wpisac `img` zamiast `vid`. */ .vhx__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 42%} /* these frames are busier than the open water of the video, so the scrim over the copy column is heavier: white 15.5px/600 needs to clear AA against sails and hulls, not just sea */ /* .vhs--jasny to ujecie prawie biale (detal olinowania w pelnym sloncu). Bez mocniejszej przyslony biala typografia siada na jasnym zaglu i przestaje sie odcinac - to ten sam problem co na zdjeciach, wiec i to samo rozwiazanie. */ /* Przyslona mocniejsza nad ujeciem bardzo jasnym (detal olinowania w pelnym sloncu): biala typografia siada tam na jasnym zaglu i przestaje sie odcinac. */ .vhs--jasny .vhx__scrim{background: linear-gradient(100deg,rgba(4,15,30,.88) 0%,rgba(4,15,30,.66) 44%,rgba(5,20,42,.3) 74%,rgba(5,20,42,.36) 100%), linear-gradient(to top,rgba(4,15,30,.5) 0%,rgba(4,15,30,0) 30%)} /* arrows: only on hover, and never on touch where they would sit over content */ .vhx__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3; width:38px;height:38px;border:0;border-radius:999px;display:grid;place-items:center; background:rgba(255,255,255,.9);color:var(--navy);cursor:pointer; opacity:0;transition:opacity var(--t) var(--ease),background-color var(--t) var(--ease)} .vhx__nav--p{left:14px} .vhx__nav--n{right:14px} .vhx:hover .vhx__nav,.vhx:focus-within .vhx__nav{opacity:1} .vhx__nav:hover{background:#fff} .vhx__nav:focus-visible{opacity:1;outline:2px solid #fff;outline-offset:2px} @media(hover:none){.vhx__nav{display:none}} /* dots sit in the corner the copy does not use */ .vhx__dots{position:absolute;z-index:3;right:calc(var(--gw-pad) - 4px);bottom:16px;display:flex;gap:7px} .vhx__dot{width:9px;height:9px;padding:0;border:0;border-radius:999px;cursor:pointer; background:rgba(255,255,255,.42);transition:background-color var(--t) var(--ease),width var(--t) var(--ease)} .vhx__dot:hover{background:rgba(255,255,255,.72)} .vhx__dot.on{width:22px;background:#fff} .vhx__dot:focus-visible{outline:2px solid #fff;outline-offset:3px} .vhx__live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @media(prefers-reduced-motion:reduce){ .vhs,.vhs.on{transition:none} .vhx__dot{transition:none} } @media(max-width:560px){ .vhx__dots{right:auto;left:var(--gw-pad);bottom:12px} } /* scrim: strong over the text zone (left), open over the boat (right), plus a bottom band under the intent bar. White 15.5px/600 lead over the .85 stop computes 5.0:1; the 92px headline is large text at 3:1 with margin to spare. */ .vhx__scrim{ position:absolute;inset:0;z-index:-1; background: linear-gradient(100deg, rgba(5,18,36,.85) 0%, rgba(5,18,36,.62) 42%, rgba(6,22,46,.28) 70%, rgba(6,22,46,.34) 100%), linear-gradient(to top, rgba(5,18,36,.55) 0%, rgba(5,18,36,0) 32%); } .vhx__in{ flex:1;display:flex;flex-direction:column;justify-content:center; width:100%;max-width:1280px;margin:0 auto; padding:34px var(--gw-pad); } .vhx__kick{ font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:#9cc4ff;margin:0 0 12px; } .vhx__h{ font-family:"Bricolage Grotesque","Archivo",sans-serif; font-size:clamp(32px,3.9vw,52px); font-weight:500;letter-spacing:-.03em;line-height:1.05; color:#fff;margin:0 0 14px; text-shadow:0 2px 26px rgba(4,14,30,.45); } .vhx__lead{ font-size:clamp(15px,1.15vw,16.5px);line-height:1.5;font-weight:600; color:rgba(255,255,255,.94);max-width:44ch;margin:0 0 20px; text-shadow:0 1px 14px rgba(4,14,30,.5); } .vhx__browse{ display:inline-flex;align-items:center;gap:7px; font-size:15px;font-weight:600;color:#fff;text-decoration:none; border-bottom:1.5px solid rgba(255,255,255,.45); padding-bottom:2px; text-shadow:0 1px 12px rgba(4,14,30,.5); transition:border-color .2s ease; } .vhx__browse:hover{border-color:#fff} .vhx__browse svg{flex:none;transition:transform .25s cubic-bezier(.16,1,.3,1)} .vhx__browse:hover svg{transform:translateX(3px)} .vhx a:focus-visible{outline:2px solid #fff;outline-offset:2px} @media (prefers-reduced-motion: no-preference){ .vhx__kick,.vhx__h,.vhx__lead,.vhx .gw__cta{animation:gw-in .7s cubic-bezier(.16,1,.3,1) both} .vhx__h{animation-delay:.06s} .vhx__lead{animation-delay:.12s} .vhx .gw__cta{animation-delay:.18s} } @media (max-width:760px){ .vhx{border-radius:14px} } @media (max-width:560px){ .vhx{min-height:min(360px,52svh)} .vhx__in{padding:26px var(--gw-pad)} .vhx__h{font-size:clamp(28px,7.6vw,36px)} .vhx__lead{font-size:14.5px;margin-bottom:16px} } /* section-level voids sit under a .sec-h that already carries the rule */ .sec .void{border-top:0;padding-top:4px} /* carousel + grids */ .row{position:relative} .row__track{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:6px;scrollbar-width:none;scroll-snap-type:x proximity} .row__track::-webkit-scrollbar{display:none} /* matches the grid exactly. A five-up grid inside the 1232px content column computes to 232px per card and cannot reach 246, so the rail comes to the grid rather than the other way round: one card size everywhere on the page. */ /* Derived, not hardcoded. 232px happened to match the grid at a 1280px viewport and drifted everywhere else (235 vs 232 at 1028px), so the rail's cards sat a few pixels off the grid's above them. Same column count, same gap, same width. */ .row__track .card{width:calc((100% - (var(--cards,5) - 1) * 14px) / var(--cards,5));flex:0 0 auto;scroll-snap-align:start} .row__nav{position:absolute;top:36%;transform:translateY(-50%);width:40px;height:40px;display:grid;place-items:center;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:0 4px 14px -4px rgba(10,37,64,.4);color:var(--navy);z-index:2;transition:opacity var(--t) var(--ease),background-color var(--t) var(--ease)} .row__nav:hover:not(:disabled){background:var(--canvas)} .row__nav:disabled{opacity:.3;cursor:default} .row--static .row__nav{display:none} .row__nav--l{left:-12px}.row__nav--r{right:-12px} @media(max-width:860px){.row__nav{display:none}.row__track{scroll-snap-type:none}} @media(prefers-reduced-motion:reduce){.row__track{scroll-behavior:auto}} /* Retail density. One card size serves both layouts: the full-width home grid is 1232px (8 × 145px) and the results column beside the 248px sidebar is 952px (6 × 150px). The column count is a variable so the ladder below only has to restate a number, never the whole template. */ /* 5 across, not 6. The Okazje rail sets the house card size at 246px (.row__track .card), and at six columns every other homepage section drew the same card ~50px narrower, so one shelf looked like a different product from the one above it. Five columns lands at ~235px in a 1280 viewport, which reads as the same card. The ladder below shifts down to match. */ .grid{display:grid;grid-template-columns:repeat(var(--cards,5),minmax(0,1fr));gap:14px} /* .grid.grid--3, not .grid--3: the narrow variant must outrank every plain .grid rule in the ladder below, otherwise a later equal-specificity breakpoint wins and the sidebar column silently inherits the full-width column count. */ .grid.grid--3{--cards:4} /* The ladder holds the card near 195-230px the whole way down rather than letting it inflate: below 860px the sidebar is gone, so .grid--3 gets the full width and the two grids converge. Phones keep two columns; one column at this card size would waste half the screen. */ /* Breakpoints derived from the 232px card, not guessed: a column count is kept until its card would fall under ~200px, NOT until it stops being exactly 232px. Switching at the equality point dropped the grid to 3 columns at 1000px and drew a 303px card beside the rail's 232px; four columns there is 227px, which reads the same. 5 cols to 1104px, 4 to 890px, 3 to 676px. */ /* ── Polka strony glownej ──────────────────────────────────────────────────── Polka dostaje z JS zawsze dziesiec kart, a ile z nich widac, decyduje arkusz - bo tylko arkusz wie, ile jest akurat kolumn. Zasada jest jedna: rzad ma byc PELNY. Dziesiec kart w czterech kolumnach to dwa rzedy i dwie sieroty, wiec przy czterech kolumnach polka konczy sie na osmiu. Progi nie zachodza na siebie (min-width + max-width), bo nakladajace sie zakresy wymagaja potem odkrecania display:none regula wyzej w kaskadzie. */ @media(min-width:890px) and (max-width:1103px){.grid--home>.card:nth-child(n+9){display:none}} @media(min-width:676px) and (max-width:889px){.grid--home>.card:nth-child(n+10){display:none}} /* Telefon: cztery ogloszenia i guzik. Dwie kolumny po dwa rzedy - tyle, ile miesci sie na ekranie bez przewijania przez cala kategorie w drodze do nastepnej. */ @media(max-width:675px){.grid--home>.card:nth-child(n+5){display:none}} .secmore{display:none} @media(max-width:675px){ .secmore{display:flex;align-items:center;justify-content:center;gap:7px; margin-top:12px;padding:11px 14px;border-radius:var(--r); border:1.5px solid var(--line);background:#fff; font-size:13.5px;font-weight:700;color:var(--navy);text-decoration:none} .secmore:active{background:var(--canvas)} /* Adres w naglowku i guzik pod siatka to ten sam link. Na telefonie zostaje guzik, bo jest wiekszy i stoi tam, gdzie konczy sie czytanie polki. */ .sec-h .more{display:none} } /* ── Baner przebijajacy polki ──────────────────────────────────────────────── Na cala szerokosc kolumny tresci, ale niski: ma przerwac rytm polek, a nie zajac ekran. Kolor akcentu wchodzi zmienna, wiec kolejny baner to jeden wpis w HOME_PROMO, a nie nowa regula. */ .bnr{--bi:var(--accent);display:flex;align-items:center;gap:18px;flex-wrap:wrap; margin-top:40px;padding:18px 22px;border-radius:var(--r-lg); background:linear-gradient(100deg,color-mix(in srgb,var(--bi) 12%,#fff),#fff 68%); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bi) 22%,transparent)} @supports not (background:color-mix(in srgb,red 10%,#fff)){ .bnr{background:var(--blue-soft);box-shadow:inset 0 0 0 1px var(--line)} } .bnr__tx{flex:1;min-width:210px;display:flex;flex-direction:column;gap:3px} .bnr__tx b{font-family:"Archivo",sans-serif;font-size:17px;font-weight:800; letter-spacing:-.02em;color:var(--navy);line-height:1.25} .bnr__tx span{font-size:13px;line-height:1.5;color:var(--muted)} .bnr__a{flex:none;display:inline-flex;align-items:center;gap:7px; padding:10px 16px;border-radius:var(--r);background:var(--bi);color:#fff; font-size:13.5px;font-weight:700;text-decoration:none; transition:filter var(--t) var(--ease)} .bnr__a:hover{filter:brightness(1.08)} .bnr__a:focus-visible{outline:2px solid var(--navy);outline-offset:2px} /* Zapowiedz nie ma przycisku, bo nie ma dokad prowadzic. Zamiast niego stoi etykieta stanu - wyglada inaczej niz przycisk, wiec nikt jej nie klika. Kolor akcentu marki, nie fiolet: fiolet byl jedynym miejscem w calym serwisie, gdzie ta barwa sie pojawiala, wiec czytal sie jak wstawka z innego produktu. */ .bnr--soon{--bi:var(--accent)} .bnr__soon{flex:none;padding:9px 14px;border-radius:var(--r); background:color-mix(in srgb,var(--bi) 10%,#fff);color:var(--bi); font-size:12.5px;font-weight:700; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bi) 26%,transparent)} @media(max-width:600px){ .bnr{gap:12px;padding:16px} .bnr__tx b{font-size:15.5px} .bnr__a,.bnr__soon{width:100%;justify-content:center;text-align:center} } @media(max-width:1103px){:root{--cards:4}} @media(max-width:889px){:root{--cards:3}.grid.grid--3{--cards:3}} @media(max-width:860px){.grid.grid--3{--cards:3}} /* .grid--3 ustawia --cards na SAMYM elemencie, wiec wygrywa z wartoscia z :root niezaleznie od kolejnosci regul. Bez tej linii siatka wynikow zostawala przy trzech kolumnach az do 375px, gdzie kafel ma niecale 110px i tytul lamie sie po dwoch slowach. */ @media(max-width:675px){:root{--cards:2}.grid.grid--3{--cards:2}} @media(max-width:600px){:root{--cards:2}.grid,.grid.grid--3{gap:10px}} /* ── card — Allegro's dense retail card ───────────────────────────────────── Row order is theirs: badge strip → PRICE → accent line → title → small print → green delivery line. The price leads because on a grid of eight columns the number is what the eye hunts for, and the title is deliberately quiet. No border and no resting shadow: the white card is the figure, the grey page is the ground, and the shadow appears only on hover. Structure: a
holding a stretched , so the ♥ and ⇄ controls are real siblings of the link rather than