/* --------------------------------------------------------------- Kraff — arkusz współdzielony motywu WordPress. Port 1:1 design tokenów i komponentów z apps/frontend-preview (ten sam plik :root, te same nazwy klas), żeby WooCommerce wyglądał jak zweryfikowany wcześniej statyczny wzorzec, a nie jak nowy design. Ścieżki do obrazów są względne wobec TEGO pliku (assets/css/site.css), nie wobec strony — stąd „../images/…”. --------------------------------------------------------------- */ :root{ --ink:#0a0a0a; --paper:#ffffff; --paper-alt:#f1efe9; --oxblood:#7a1420; --oxblood-strong:#5c0f18; /* Czysta czerwień litery "F" w logo (zmierzona z pikseli logo.png: ~rgb(235,0,0)) — INNY odcień niż --oxblood (bordowy, stonowany, użyty w reszcie serwisu). Osobny token, nie podmiana --oxblood, żeby nie zmieniać koloru wszędzie indziej bez pytania — na razie tylko tam, gdzie wprost o to poproszono. */ --logo-red:#eb0000; --brass:#a9895a; --steel:#6e7174; --line: rgba(10,10,10,0.14); --announce-h:36px; } *{box-sizing:border-box;} html, body{margin:0; padding:0;} body{background:var(--paper); color:var(--ink); font-family:'Karla', sans-serif; overflow-x:hidden;} a{color:inherit;} h1,h2,h3{font-family:'Marcellus', Georgia, serif; font-weight:500; text-wrap:balance; margin:0;} img{max-width:100%;} :focus-visible{outline:2px solid var(--oxblood); outline-offset:3px;} .eyebrow{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--steel);} .rule{height:1px; background:var(--line); border:none;} .btn-line{ display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:4px; width:fit-content; background:none; border-top:none; border-left:none; border-right:none; cursor:pointer; } .btn-line svg{transition:transform .25s ease;} .btn-line:hover svg{transform:translateX(4px);} .btn-solid{ display:inline-flex; align-items:center; gap:10px; padding:15px 26px; background:var(--ink); color:var(--paper); border:1px solid var(--ink); font-family:'Karla', sans-serif; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:background .25s ease, border-color .25s ease; } .btn-solid:hover{background:var(--oxblood); border-color:var(--oxblood);} .btn-solid[disabled]{opacity:.5; cursor:default; background:var(--ink); border-color:var(--ink);} .btn-outline{ display:inline-flex; align-items:center; gap:10px; padding:14px 26px; background:none; color:var(--ink); border:1px solid var(--ink); font-family:'Karla', sans-serif; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:background .25s ease, color .25s ease; } .btn-outline:hover{background:var(--ink); color:var(--paper);} .btn-outline[disabled]{opacity:.5; cursor:default;} .gutter{padding-inline:max(20px, calc((100vw - 1280px)/2));} /* ---- pasek ogłoszeń ---- */ .announce{ position:fixed; top:0; left:0; right:0; z-index:41; height:var(--announce-h); display:flex; align-items:center; justify-content:center; background:var(--ink); color:var(--paper); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; text-align:center; transition:transform .35s ease, opacity .25s ease; white-space:nowrap; overflow:hidden; padding-inline:16px; } .announce.is-hidden{transform:translateY(-100%); opacity:0; pointer-events:none;} .announce .announce-short{display:none;} @media (max-width: 600px){ .announce{letter-spacing:.08em;} .announce .announce-long{display:none;} .announce .announce-short{display:inline;} } /* ---- header ---- */ /* grid, nie flex+space-between: ta druga rozkłada środkową kolumnę (nav) proporcjonalnie do RÓŻNICY szerokości dwóch bocznych bloków — zmierzone naprawdę (CDP): blok logo 143.6px vs blok ikon 58px, więc nav lądowała ~35-43px na prawo od prawdziwego środka strony, nie w jego osi. Grid z równymi bocznymi kolumnami (1fr/auto/1fr) centruje nav naprawdę, niezależnie od tego, że logo i ikony mają różną szerokość. */ header{ position:fixed; top:var(--announce-h); left:0; right:0; z-index:40; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:16px; padding:22px max(20px, calc((100vw - 1280px)/2)); transition:background .4s ease, padding .4s ease, border-color .4s ease, top .35s ease; border-bottom:1px solid transparent; } /* Jawne grid-column, nie poleganie na kolejności w źródle: na mobile nav.links ma display:none, a display:none CAŁKOWICIE usuwa element z siatki (nie zostawia pustego miejsca) — przy samym auto-placement header-icons "spadłoby" w jego miejsce (środkowa kolumna) zamiast zostać w prawej. Sprawdzone naprawdę (CDP, 390px): bez tego ikony lądowały tuż obok logo, nie przy prawej krawędzi. */ header .wordmark{grid-column:1; justify-self:start;} header nav.links{grid-column:2; justify-self:center;} header .header-icons{grid-column:3; justify-self:end;} header.solid{background:var(--paper); padding-block:14px; border-color:var(--line);} header.bar-hidden{top:0;} /* aspect-ratio (nie tylko height) jest kluczowe: .wordmark ma TYLKO dzieci position:absolute (oba warianty logo, do przenikania), więc bez jawnej szerokości sam kontener liczyłby się jako 0px — poza normalnym przepływem obraz wciąż by się "malował" (position:absolute nie jest ograniczany przez content-box rodzica), ale klikalny obszar linku i miejsce rezerwowane w flex-layoucie nagłówka byłyby zerowe. */ /* 1337/215 — realne proporcje przyciętego logo-rotomaty-dark/light.png. .wordmark potrzebuje jawnego aspect-ratio, bo ma tylko dzieci position:absolute (oba warianty logo, do przenikania) — bez tego sam liczyłby się jako 0px szerokości (ten sam mechanizm co u Kraff). */ .wordmark{position:relative; display:inline-block; height:36px; aspect-ratio:1337/215;} .wordmark .logo-mark{height:36px; width:auto; position:absolute; top:0; left:0; transition:opacity .4s ease;} .wordmark .logo-dark{opacity:1;} .wordmark .logo-light{opacity:0;} nav.links{display:flex; gap:38px;} nav.links a{font-family:'Karla', sans-serif; font-size:15px; font-weight:700; letter-spacing:.04em; text-decoration:none; color:var(--ink);} nav.links a:hover{color:var(--oxblood);} nav.links a.is-active{color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:2px;} nav.links a.nav-sale{color:var(--oxblood);} nav.links a.nav-sale:hover{color:var(--oxblood-strong);} .header-icons{display:flex; gap:20px; align-items:center;} .header-icons svg{width:19px; height:19px;} .header-icons a{position:relative; display:flex; line-height:0;} .header-icons button{background:none; border:none; padding:0; margin:0; cursor:pointer; color:inherit; display:flex; line-height:0;} .header-icons button.nav-toggle{display:none;} .cart-badge{ position:absolute; top:-7px; right:-9px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--oxblood); color:#f1efe9; font-family:'Karla', sans-serif; font-size:10px; font-weight:700; line-height:16px; text-align:center; } /* nad ciemnym hero: jasny wariant, dopóki header nie zrobi się .solid */ header.on-dark:not(.solid) nav.links a, header.on-dark:not(.solid) .header-icons{color:#f1efe9;} header.on-dark:not(.solid) nav.links a.nav-sale{color:#e0a3aa;} header.on-dark:not(.solid) .logo-dark{opacity:0;} header.on-dark:not(.solid) .logo-light{opacity:1;} header.on-dark:not(.solid) nav.links a:hover{color:var(--brass);} /* ---- drawer mobilny (nav.js) ---- */ html.nav-open{overflow:hidden;} .nav-drawer{position:fixed; inset:0; z-index:70; visibility:hidden;} .nav-drawer.is-open{visibility:visible;} .nav-drawer-backdrop{position:absolute; inset:0; background:rgba(10,10,10,.5); opacity:0; transition:opacity .25s ease;} .nav-drawer.is-open .nav-drawer-backdrop{opacity:1;} .nav-drawer-panel{ position:absolute; top:0; right:0; bottom:0; width:min(300px, 82vw); background:var(--paper); box-shadow:-12px 0 40px rgba(0,0,0,.18); padding:28px 26px; display:flex; flex-direction:column; gap:8px; transform:translateX(100%); transition:transform .3s ease; } .nav-drawer.is-open .nav-drawer-panel{transform:translateX(0);} .nav-drawer-close{align-self:flex-end; background:none; border:none; padding:6px; margin:-6px -6px 18px 0; cursor:pointer; color:var(--ink); display:flex;} .nav-drawer-close svg{width:20px; height:20px; display:block;} .nav-drawer-panel a{font-family:'Karla', sans-serif; font-size:18px; font-weight:700; letter-spacing:.02em; text-decoration:none; color:var(--ink); padding:10px 0; border-bottom:1px solid var(--line);} .nav-drawer-panel a:last-of-type{border-bottom:none;} .nav-drawer-panel a:hover, .nav-drawer-panel a.is-active{color:var(--oxblood);} .nav-drawer-panel a.nav-sale{color:var(--oxblood);} .nav-drawer-panel a.nav-sale:hover{color:var(--oxblood-strong);} /* ---- hero (tylko front-page.php) ---- */ #top{padding-top:0;} .hero{position:relative; background:var(--paper);} .hero.is-scrub{height:170vh;} .hero-stage{position:relative; height:100vh; height:100svh; min-height:560px; overflow:hidden;} .hero.is-scrub .hero-stage{position:sticky; top:0;} .hero-media{ position:absolute; inset:0; overflow:hidden; background:radial-gradient(70% 60% at 70% 45%, #2a2622 0%, #141210 55%, #0a0a0a 100%); clip-path:inset(0 0 0 0); will-change:clip-path; } .hero-media::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg, rgba(255,255,255,.06), rgba(255,255,255,0) 28%, rgba(0,0,0,.14) 75%, rgba(0,0,0,.24)); mix-blend-mode:soft-light; opacity:.55; } /* scale(1.06), nie 1.18 jak u Kraff: źródłowe zdjęcie ma tylko 1376×768 — przy większym mnożniku na szerokich ekranach obraz rozciągał się wyraźnie ponad naturalną rozdzielczość (widoczna pikseloza, zgłoszone). Animacja scrolla w site.js i tak tweenuje TĘ wartość do scale:1 — efekt "oddalania" zostaje, tylko łagodniejszy. */ .hero-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:30% 50%; transform:scale(1.06); transform-origin:85% 50%;} .hero-shade{position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, rgba(10,10,10,.82) 0%, rgba(10,10,10,.46) 40%, rgba(10,10,10,.10) 74%, rgba(10,10,10,.02) 100%), linear-gradient(0deg, rgba(10,10,10,.62) 0%, rgba(10,10,10,0) 46%); will-change:opacity; } .hero-copy{position:absolute; left:0; right:0; bottom:0; padding-bottom:clamp(70px,10vh,118px); color:#f1efe9;} .hero-copy-inner{max-width:680px;} .hero-kicker{display:flex; align-items:center; gap:14px; margin-bottom:20px; font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(241,239,233,.78);} .hero-kicker::after{content:""; width:58px; height:1px; background:currentColor; opacity:.72;} .hero-copy h1{font-size:clamp(44px,6.2vw,92px); line-height:.98; letter-spacing:-.015em; max-width:11.5ch;} @media (min-width: 700px){ .hero-copy h1 .line{white-space:nowrap;} } .hero-copy h1 .line{display:block; overflow:hidden; padding-bottom:.28em;} .hero-copy h1 .line > span{display:block;} .hero-copy p{margin-top:28px; font-size:16px; line-height:1.72; color:rgba(241,239,233,.78); max-width:45ch;} .hero-cta-row{display:flex; gap:16px; margin-top:34px; flex-wrap:wrap;} .hero-scroll-cue{position:absolute; left:0; bottom:28px; display:flex; align-items:center; gap:12px; color:rgba(241,239,233,.54); font-size:10px; letter-spacing:.18em; text-transform:uppercase;} .hero-scroll-cue::before{content:""; width:26px; height:1px; background:currentColor;} .hero-scroll-cue svg{width:13px; height:13px;} .hero .btn-solid{background:#f1efe9; color:#0a0a0a; border-color:#f1efe9;} .hero .btn-solid:hover{background:var(--oxblood); border-color:var(--oxblood); color:#f1efe9;} .hero .btn-outline{color:#f1efe9; border-color:rgba(241,239,233,.6);} .hero .btn-outline:hover{background:#f1efe9; color:#0a0a0a; border-color:#f1efe9;} @media (prefers-reduced-motion: no-preference){ .hero-copy h1 .line > span{transform:translateY(105%); animation:line-up 1.1s cubic-bezier(.2,.75,.15,1) forwards;} .hero-copy h1 .line:nth-child(2) > span{animation-delay:.12s;} .hero-copy p, .hero-cta-row{opacity:0; animation:fade-in .9s ease .55s forwards;} .hero-media img{animation:media-in 1.8s ease both;} } @keyframes line-up{to{transform:translateY(0);}} @keyframes fade-in{to{opacity:1;}} @keyframes media-in{from{opacity:0;} to{opacity:1;}} /* ---- Rotomaty KRAFF (marka własna) ---- */ .kraff-rotomaty{padding-block:110px; background:var(--paper-alt);} .kraff-rotomaty .frame{background:#e7e4dc;} .kraff-rotomaty-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(40px,6vw,90px); align-items:center;} .kraff-rotomaty-grid .frame{aspect-ratio:4/3;} .kraff-rotomaty-head{max-width:520px;} .kraff-rotomaty-head h2{font-size:clamp(32px,4vw,48px); margin-top:14px;} /* ---- wybierz po okazji ---- */ .occasions{padding-block:100px 110px;} .occasions-head{margin-bottom:36px;} .occasions-head h2{font-size:clamp(28px,3.6vw,40px); margin-top:14px;} .occasions-grid{display:grid; grid-template-columns:repeat(var(--cols,5),1fr); gap:16px;} .occasion-tile[hidden]{display:none;} .occasion-tile{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:22px 20px; border:1px solid var(--line); text-decoration:none; color:var(--ink); font-family:'Marcellus', serif; font-size:16px; transition:border-color .2s ease, background .2s ease; } .occasion-tile:hover{border-color:var(--ink); background:var(--paper-alt);} .occasion-tile svg{flex:none; transition:transform .25s ease;} .occasion-tile:hover svg{transform:translateX(4px);} .occasion-tile--sale{border-color:var(--oxblood); color:var(--oxblood);} .occasion-tile--sale:hover{background:var(--oxblood); color:var(--paper);} /* ---- marki ---- */ .brands{padding:140px 0;} .brands-head{max-width:640px; margin:0 auto 64px; text-align:center;} .brands-head h2{font-size:clamp(32px,4vw,48px); margin-top:14px;} .brands-head p{margin-top:20px; font-size:15px; line-height:1.7; color:var(--steel);} .brand-marquee{ position:relative; overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .brand-track{display:flex; align-items:center; width:max-content; animation:brand-scroll 34s linear infinite;} .brand-marquee:hover .brand-track{animation-play-state:paused;} .brand-item{ display:flex; align-items:center; gap:32px; padding:0 32px; white-space:nowrap; font-family:'Marcellus', serif; font-size:clamp(22px,2.6vw,32px); color:var(--steel); transition:color .25s ease; } .brand-item:hover{color:var(--ink);} .brand-item .dot{width:5px; height:5px; border-radius:50%; background:var(--brass); flex:none;} @keyframes brand-scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}} @media (prefers-reduced-motion: reduce){ .brand-track{animation:none;} } /* ---- kolekcja / siatki kart (współdzielone z archiwum WooCommerce) ---- */ .collection{padding-top:140px; padding-bottom:150px;} .collection-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:44px;} .collection-head h2{font-size:clamp(32px,4vw,48px);} .strip{display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:14px; margin:0 max(20px, calc((100vw - 1280px)/2)) 0 max(20px, calc((100vw - 1280px)/2)); scrollbar-width:none;} .strip::-webkit-scrollbar{display:none;} .card{scroll-snap-align:start; flex:0 0 320px; opacity:0; transform:translateY(36px);} .frame{background:var(--paper-alt); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:18px; text-align:center; position:relative; overflow:hidden;} .frame span{font-size:11px; letter-spacing:.08em; color:var(--steel); text-transform:uppercase;} a.frame{text-decoration:none; display:flex;} .card .frame{aspect-ratio:4/5;} .frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;} .card:hover .frame img{transform:scale(1.04); transition:transform 1.2s cubic-bezier(.2,.7,.2,1);} #kolekcja .strip{display:grid; grid-template-columns:repeat(5,1fr); overflow-x:visible; scroll-snap-type:none; margin-inline:20px;} #kolekcja .card{flex:none;} .card h3{font-size:20px; margin-top:18px;} .card p{font-size:13px; color:var(--steel); line-height:1.6; margin-top:8px;} .card .btn-line{margin-top:14px; font-size:11px;} @media (prefers-reduced-motion: reduce){ .card{opacity:1 !important; transform:none !important; transition:none !important;} } .sold-ribbon{ position:absolute; top:14px; left:14px; background:var(--ink); color:var(--paper); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:6px 10px; } .card.is-sold .frame img{filter:grayscale(.4); opacity:.72;} .card.is-sold .price{color:var(--steel);} /* ---- strona 404 ---- */ /* Pionowe centrowanie względem CAŁEGO viewportu: main{} ma box-sizing: border-box (globalne *{}), więc min-height:100svh już WLICZA jej własne padding-top/bottom (132px/140px) — to jedyne źródło pionowego rozmiaru, nic nie sumuje się z żadnym drugim (to był błąd poprzedniej wersji: osobny min-height WEWNĄTRZ main, które samo już miało swój padding). align-items centruje .err-inner w tym, co zostaje między paddingami. */ .kraff-404{display:flex; align-items:center; justify-content:center; min-height:100svh;} .kraff-404 .err-inner{max-width:560px; text-align:center;} .kraff-404 .err-code{font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--brass);} .kraff-404 .err-rule{display:block; width:40px; height:1px; background:var(--brass); margin:14px auto 0; transform-origin:50% 50%;} .kraff-404 h1{font-size:clamp(32px,4.6vw,56px); margin-top:18px; line-height:1.05;} .kraff-404 .err-inner > p{font-size:15px; line-height:1.75; color:var(--steel); margin-top:22px;} .kraff-404 .err-links{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:36px;} .kraff-404 .err-contact{margin-top:40px; font-size:13px; color:var(--steel);} .kraff-404 .err-contact a{text-decoration:underline; text-underline-offset:3px;} .kraff-404 .err-contact a:hover{color:var(--ink);} /* ---- listing (archiwum kategorii WooCommerce) ---- */ main{padding-top:calc(var(--announce-h) + 96px); padding-bottom:140px;} .breadcrumb{display:flex; gap:8px; align-items:center; font-size:12px; color:var(--steel); margin-bottom:40px; flex-wrap:wrap;} .breadcrumb a{text-decoration:none;} .breadcrumb a:hover{color:var(--ink);} .breadcrumb .sep{color:var(--line);} .category-head{max-width:640px; margin-bottom:56px;} .category-head h1{font-size:clamp(34px,4.2vw,52px); margin-top:14px;} .category-head p{margin-top:18px; font-size:15px; line-height:1.7; color:var(--steel);} .listing-controls{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px;} .listing-count{font-size:13px; color:var(--steel);} .product-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;} .product-grid .card{flex:none; opacity:1; transform:none; width:100%;} .product-grid .card .price{font-size:13px; font-weight:700; margin-top:8px;} .product-grid .card .brand{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--steel); margin-top:16px;} .listing-empty{padding:60px 0; font-size:14px; color:var(--steel); text-align:center;} /* the_posts_pagination() owija numery w .nav-links — JEGO, nie .pagination (