:root{ --bg:#0f0f10; --fg:#e9e9ea; --muted:#b8b8ba; --card:#161618; --line:#242427; } *{box-sizing:border-box} body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--fg); } .top{ position:sticky; top:0; z-index:10; background:rgba(15,15,16,.9); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); } .menu{ display:flex; gap:14px; padding:14px 18px; overflow:auto; } .menu a{ color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:10px; border:1px solid transparent; } .menu a:hover{ color:var(--fg); border-color:var(--line); background:rgba(255,255,255,.03); } .menu a.active{ color:var(--fg); border-color:var(--line); background:rgba(255,255,255,.05); } .wrap{ max-width:1200px; margin:0 auto; padding:18px; } .grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; } @media (min-width:700px){ .grid{ grid-template-columns: repeat(3, 1fr); } } @media (min-width:1000px){ .grid{ grid-template-columns: repeat(4, 1fr); } } #gallery .item{ display:block; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; } .footer{ border-top:1px solid var(--line); margin-top:20px; padding:18px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--muted); } .footer a{ color:var(--muted); text-decoration:none; } .footer a:hover{ color:var(--fg); } /* === PREMIUM HOVER dla Twoich klas: .item / .item img === */ #gallery .item{ position: relative; transform: translateZ(0); transition: transform 260ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms cubic-bezier(.2,.8,.2,1), border-color 260ms ease; box-shadow: 0 10px 25px rgba(0,0,0,.12); } #gallery .item:hover{ transform: translateY(-6px); box-shadow: 0 18px 45px rgba(0,0,0,.20); border-color: rgba(255,255,255,.10); } /* obrazek – tylko delikatniej i płynniej */ #gallery .item img{ transform: scale(1); transition: transform 260ms cubic-bezier(.2,.8,.2,1), filter 260ms cubic-bezier(.2,.8,.2,1); will-change: transform, filter; } #gallery .item:hover img{ transform: scale(1.045); filter: saturate(1.05) contrast(1.03); } /* winieta/overlay – bardzo subtelna */ #gallery .item::after{ content:""; position:absolute; inset:0; background: radial-gradient(120% 120% at 50% 40%, rgba(0,0,0,0) 50%, rgba(0,0,0,.35) 100%); opacity: 0; transition: opacity 220ms ease; pointer-events:none; } #gallery .item:hover::after{ opacity: 1; } /* złoty "sheen" – dyskretny błysk */ #gallery .item::before{ content:""; position:absolute; inset:-30%; background: linear-gradient(115deg, rgba(212,175,55,0) 40%, rgba(212,175,55,.18) 50%, rgba(212,175,55,0) 60%); transform: translateX(-35%); opacity: 0; transition: transform 520ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease; pointer-events:none; } #gallery .item:hover::before{ opacity: 1; transform: translateX(35%); } /* dostępność */ @media (prefers-reduced-motion: reduce){ .item, .item img, .item::before, .item::after{ transition:none !important; } } /* ========================= FX: hover + scroll reveal dla .item / .item img ========================= */ /* Reveal działa tylko gdy JS doda klasę .reveal na */ #gallery .reveal .item{ opacity: 0; transform: translateY(14px) scale(.985); transition: opacity 520ms cubic-bezier(.2,.8,.2,1), transform 520ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms cubic-bezier(.2,.8,.2,1), border-color 260ms ease; will-change: opacity, transform; } #gallery .reveal .item.in{ opacity: 1; transform: translateY(0) scale(1); } /* Hover “premium” */ #gallery .item{ position: relative; transform: translateZ(0); transition: transform 260ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms cubic-bezier(.2,.8,.2,1), border-color 260ms ease; box-shadow: 0 10px 25px rgba(0,0,0,.12); } #gallery .item:hover{ transform: translateY(-6px); box-shadow: 0 18px 45px rgba(0,0,0,.20); border-color: rgba(255,255,255,.10); } #gallery .item img{ transform: scale(1); transition: transform 260ms cubic-bezier(.2,.8,.2,1), filter 260ms cubic-bezier(.2,.8,.2,1); will-change: transform, filter; } #gallery .item:hover img{ transform: scale(1.045); filter: saturate(1.05) contrast(1.03); } /* Subtelna winieta */ #gallery .item::after{ content:""; position:absolute; inset:0; background: radial-gradient(120% 120% at 50% 40%, rgba(0,0,0,0) 55%, rgba(0,0,0,.38) 100%); opacity: 0; transition: opacity 220ms ease; pointer-events:none; } #gallery .item:hover::after{ opacity: 1; } /* Złoty “sheen” */ #gallery .item::before{ content:""; position:absolute; inset:-30%; background: linear-gradient(115deg, rgba(212,175,55,0) 42%, rgba(212,175,55,.18) 50%, rgba(212,175,55,0) 58%); transform: translateX(-35%); opacity: 0; transition: transform 520ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease; pointer-events:none; } #gallery .item:hover::before{ opacity: 1; transform: translateX(35%); } /* Ikonka lupy (dodamy ją JS-em jako ) */ #gallery .item .zoom{ position:absolute; inset:auto 12px 12px auto; width:42px; height:42px; border-radius:14px; background: rgba(15,15,16,.55); border:1px solid rgba(255,255,255,.10); backdrop-filter: blur(8px); display:grid; place-items:center; opacity:0; transform: translateY(6px) scale(.96); transition: opacity 200ms ease, transform 200ms ease, border-color 200ms ease; pointer-events:none; box-shadow: 0 12px 30px rgba(0,0,0,.25); } #gallery .item:hover .zoom{ opacity:1; transform: translateY(0) scale(1); border-color: rgba(212,175,55,.35); } /* SVG lupa jako maska – wygląda jak ikona, nie emoji */ #gallery .item .zoom::before{ content:""; width:18px; height:18px; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.75)); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 18a8 8 0 1 1 0-16a8 8 0 0 1 0 16m11.7 3.3l-5.4-5.4a10 10 0 1 0-1.4 1.4l5.4 5.4a1 1 0 0 0 1.4-1.4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 18a8 8 0 1 1 0-16a8 8 0 0 1 0 16m11.7 3.3l-5.4-5.4a10 10 0 1 0-1.4 1.4l5.4 5.4a1 1 0 0 0 1.4-1.4'/%3E%3C/svg%3E"); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:contain; mask-size:contain; } @media (prefers-reduced-motion: reduce){ .item, .item img, .item::before, .item::after, .item .zoom{ transition:none !important; } } /* ========================= GLightbox: biała ramka (passe-partout) w sliderze ========================= */ /* sam obrazek – delikatna biała obwódka */ .glightbox-container .gslide-image img, .glightbox-container .gslide-media img { background: #fff; padding: 10px; /* grubość ramki */ border-radius: 10px; box-shadow: 0 22px 60px rgba(0,0,0,.55); } /* opcjonalnie: subtelna cienka linia, żeby “odcinało” na jasnych kadrach */ .glightbox-container .gslide-image img, .glightbox-container .gslide-media img { outline: 1px solid rgba(0,0,0,.10); outline-offset: -1px; } /* tło za zdjęciem zostaje ciemne (czytelność + premium) */ .glightbox-container { background: rgba(0,0,0,.88) !important; }