/* Biblioteka modeli 3D V-SLOT — lib.v-slot.pl Kolory i krój wzięte wprost ze sklepu v-slot.pl: zieleń #53b848, granat #08081a pod ciemne bloki, Titillium Web. Strona ma wyglądać jak dalszy ciąg sklepu, a nie jak osobne narzędzie — klient trafia tu z telefonu od handlowca. Twórca: BaseAI.pl */ /* Chakra Petch — krój, który Damian wybrał wcześniej. Titillium (ze sklepu) przegrał w bezpośrednim porównaniu, więc zostajemy przy tym. */ @font-face{font-family:"Chakra Petch";src:url("fonty/chakra-400.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Chakra Petch";src:url("fonty/chakra-500.woff2") format("woff2"); font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Chakra Petch";src:url("fonty/chakra-600.woff2") format("woff2"); font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Chakra Petch";src:url("fonty/chakra-700.woff2") format("woff2"); font-weight:700;font-style:normal;font-display:swap} :root{ --zielen:#53b848; --zielen-jasna:#66e658; --zielen-ciemna:#3f9636; --granat:#08081a; --granat2:#161c2d; --atrament:#231f20; --szary:#6d6a6a; --szary2:#8d8a8a; --tlo:#ffffff; --tlo2:#f5f7fa; --tlo3:#f3f3f3; --linia:#d8d8d8; --linia2:#ececec; --czerwien:#fb5642; --pismo:"Chakra Petch",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; } /* Motyw ciemny: przełącznik stawia data-motyw na . Zmieniamy wyłącznie wartości zmiennych — reszta arkusza ich używa i nie musi nic wiedzieć. */ :root[data-motyw="ciemny"]{ --atrament:#e9ecef; --szary:#9aa0a8; --szary2:#7b828b; --tlo:#12141a; --tlo2:#0d0f14; --tlo3:#1a1d24; --linia:#2b3138; --linia2:#232830; --zielen-ciemna:#6fd063; } :root[data-motyw="ciemny"] .gora, :root[data-motyw="ciemny"] .menu{background:var(--tlo)} :root[data-motyw="ciemny"] .przycisk.cichy{color:var(--atrament)} :root[data-motyw="ciemny"] .szkic-ramka canvas{filter:invert(1) hue-rotate(180deg)} :root[data-motyw="ciemny"] .szkic-ramka svg text{fill:#e9ecef} :root[data-motyw="ciemny"] .stopka{background:#080a0e} *{box-sizing:border-box} /* Atrybut `hidden` musi wygrywać z klasami ustawiającymi display — inaczej element oznaczony jako ukryty i tak się pokazuje. */ [hidden]{display:none!important} body{margin:0;background:var(--tlo2);color:var(--atrament); font:15px/1.55 var(--pismo);font-variant-numeric:tabular-nums;-webkit-text-size-adjust:100%} a{color:var(--zielen-ciemna);text-decoration:none} a:hover{text-decoration:underline} button{font:inherit} .etykieta{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--szary2)} /* ── Nagłówek ─────────────────────────────────────────────────────────────── */ .gora{position:sticky;top:0;z-index:20;background:var(--tlo);border-bottom:1px solid var(--linia)} .gora-rzad{display:flex;flex-wrap:wrap;align-items:center;gap:16px; padding:12px 20px;max-width:1680px;margin:0 auto} .marka{display:flex;flex-direction:column;line-height:1.05;color:var(--atrament)} .marka .nad{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--zielen)} .marka .nazwa{font-size:22px;font-weight:700;letter-spacing:.02em} .marka:hover{text-decoration:none} #szukaj{flex:1 1 220px;max-width:420px;padding:10px 14px;border-radius:3px; border:1px solid var(--linia);background:var(--tlo);color:inherit;font:inherit} #szukaj:focus{outline:2px solid var(--zielen);outline-offset:-1px;border-color:var(--zielen)} .gora-prawa{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13px;flex-wrap:wrap} .gora-prawa .kto{color:var(--szary);font-size:12.5px} .gora-prawa .kto b{color:var(--atrament)} .menu{border-top:1px solid var(--linia2);background:var(--tlo)} .menu-rzad{display:flex;flex-wrap:wrap;gap:30px;padding:0 20px;max-width:1680px;margin:0 auto} .menu a{display:block;padding:13px 0;font-size:12.5px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--atrament);border-bottom:2px solid transparent} .menu a:hover{color:var(--zielen);border-bottom-color:var(--zielen);text-decoration:none} /* ── Przyciski ────────────────────────────────────────────────────────────── */ .przycisk{display:inline-block;padding:10px 18px;border-radius:3px;border:1px solid var(--zielen); background:var(--zielen);color:#fff;font-weight:600;cursor:pointer;text-align:center;letter-spacing:.02em} .przycisk:hover{background:var(--zielen-jasna);border-color:var(--zielen-jasna); color:var(--granat);text-decoration:none} .przycisk[disabled]{opacity:.45;cursor:not-allowed} .przycisk.cichy{background:transparent;color:var(--atrament);border-color:var(--linia)} .przycisk.cichy:hover{border-color:var(--zielen);color:var(--zielen-ciemna);background:var(--tlo)} .przycisk.maly{padding:7px 12px;font-size:12.5px} /* ── Układ ────────────────────────────────────────────────────────────────── */ .uklad{display:grid;grid-template-columns:250px 1fr;max-width:1680px;margin:0 auto;align-items:start} .boczny{position:sticky;top:96px;padding:20px 12px 40px 20px;max-height:calc(100vh - 96px);overflow:auto} .grupa-naglowek{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--szary2); margin:18px 0 8px;padding-left:10px} .grupa-naglowek:first-child{margin-top:0} .kategoria{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;margin-bottom:1px; border:0;border-left:3px solid transparent;background:transparent;color:var(--atrament); cursor:pointer;text-align:left;font-size:14px} .kategoria:hover{background:var(--tlo3)} .kategoria[aria-current="true"]{background:var(--tlo);border-left-color:var(--zielen);font-weight:600} .kategoria .ile{margin-left:auto;font-size:12px;color:var(--szary2)} .tresc{padding:20px 20px 50px;min-width:0} .pasek-folderu{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px} .pasek-folderu h1{font-size:22px;margin:0;font-weight:700} .pasek-folderu .licznik{color:var(--szary);font-size:13.5px} /* ── Lista modeli ─────────────────────────────────────────────────────────── */ .lista{display:flex;flex-direction:column;gap:8px} .wiersz{display:grid;grid-template-columns:104px 1fr auto;gap:16px;align-items:center; background:var(--tlo);border:1px solid var(--linia2);border-radius:3px;padding:10px 14px; cursor:pointer;text-align:left;color:inherit;width:100%} .wiersz:hover{border-color:var(--zielen);box-shadow:0 1px 8px rgba(8,8,26,.07)} .wiersz .obraz{width:104px;height:78px;border-radius:3px;background:var(--tlo3); display:grid;place-items:center;overflow:hidden;position:relative} .wiersz .obraz img{width:100%;height:100%;object-fit:contain;display:block} .wiersz .obraz .zastepnik{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--szary2)} .wiersz .opis{min-width:0} /* Elementy opisu muszą być blokami — inaczej nazwa, wymiar i kategoria skleją się w jedną linijkę i wiersz przestaje być czytelny. */ .wiersz .nazwa{display:block;font-weight:600;font-size:15.5px;line-height:1.3} .wiersz .meta{display:block;font-size:13px;color:var(--szary);margin-top:3px} .wiersz .meta b{color:var(--atrament);font-weight:600} .wiersz .kat{display:inline-block;margin-top:5px;font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--szary2);border:1px solid var(--linia); border-radius:2px;padding:1px 7px} .wiersz .prawa{text-align:right;display:flex;flex-direction:column;gap:3px;align-items:flex-end} .wiersz .cena{font-size:18px;font-weight:700;color:var(--zielen-ciemna)} .wiersz .dostepne{font-size:11.5px;color:var(--szary)} .wiersz .formaty{font-size:11px;letter-spacing:.09em;color:var(--szary2)} .pusto{color:var(--szary);padding:50px 0;text-align:center} /* Płótno obracanego podglądu wędruje nad miniaturę wiersza, na który najechano — jedna scena WebGL zamiast stu czterdziestu. */ #obrotowy{position:absolute;z-index:5;border-radius:3px;pointer-events:none;display:block} /* ── Panel modelu ─────────────────────────────────────────────────────────── */ .panel{position:fixed;inset:0;z-index:40;display:flex;justify-content:flex-end; background:rgba(8,8,26,.55)} .panel-tresc{width:min(600px,100%);height:100%;overflow:auto;background:var(--tlo);padding:18px 22px 40px} .panel-gora{display:flex;align-items:flex-start;gap:12px;margin-bottom:6px} .panel-gora h2{margin:0;font-size:21px;line-height:1.25;flex:1;font-weight:700} .zamknij{background:transparent;border:1px solid var(--linia);color:var(--szary); border-radius:3px;width:32px;height:32px;cursor:pointer;flex:none} .zamknij:hover{color:var(--atrament);border-color:var(--szary)} .scena-ramka{position:relative;margin-top:10px} #scena{width:100%;aspect-ratio:4/3;background:var(--granat);border-radius:3px; touch-action:none;display:block} .szkice{display:grid;grid-template-columns:1fr 1fr;gap:8px} .szkic-ramka{position:relative;background:var(--tlo3);border:1px solid var(--linia);border-radius:3px} .szkic-ramka canvas{width:100%;aspect-ratio:1/1;display:block;touch-action:none} .szkic-ramka figcaption{position:absolute;top:7px;left:9px;font-size:10px;letter-spacing:.12em; text-transform:uppercase;color:var(--szary2)} .tryby{display:flex;gap:6px;margin:10px 0 16px} .tryby button{flex:1;padding:8px;border-radius:3px;border:1px solid var(--linia); background:var(--tlo);color:var(--szary);cursor:pointer;font-size:13px} .tryby button[aria-pressed="true"]{color:var(--atrament);border-color:var(--zielen); background:var(--tlo);font-weight:600;box-shadow:inset 0 -2px 0 var(--zielen)} .wiersze{width:100%;border-collapse:collapse;margin:0 0 18px} .wiersze td{padding:8px 0;border-bottom:1px solid var(--linia2);font-size:14px} .wiersze td:first-child{color:var(--szary);width:44%} .wiersze b{font-size:15px} .cena-blok{background:var(--tlo2);border:1px solid var(--linia);border-radius:3px; padding:14px 16px;margin-bottom:18px} .cena-blok .kwota{font-size:25px;font-weight:700;color:var(--zielen-ciemna)} .cena-blok .stan{font-size:13px;color:var(--szary)} .cena-blok .stan b.jest{color:var(--zielen-ciemna)} .cena-blok .stan b.brak{color:#b07b12} .licencja{border-left:3px solid var(--linia);padding:10px 0 10px 13px;margin-bottom:18px; font-size:13px;color:var(--szary);line-height:1.5} .licencja.obca{border-left-color:#d8a520} .licencja.wlasna{border-left-color:var(--zielen)} .licencja b{color:var(--atrament)} .pobieranie{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px} .pobieranie .przycisk{flex:1 1 150px} .uwaga-konto{font-size:13px;color:var(--szary);margin:0 0 10px} .zglos-model{font-size:13px} /* ── Okna ─────────────────────────────────────────────────────────────────── */ .okno{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px; background:rgba(8,8,26,.6);overflow:auto} .okno-tresc{width:min(460px,100%);background:var(--tlo);border-radius:4px;padding:24px} .okno-tresc h2{margin:0 0 4px;font-size:21px;font-weight:700} .okno-tresc p.cicho{margin:0 0 16px;color:var(--szary);font-size:13.5px} label{display:block;margin-bottom:12px;font-size:12.5px;color:var(--szary)} label input,label select,label textarea{display:block;width:100%;margin-top:5px;padding:10px 12px; border-radius:3px;border:1px solid var(--linia);background:var(--tlo);color:var(--atrament);font:inherit} label textarea{min-height:120px;resize:vertical} label input:focus,label textarea:focus,label select:focus{outline:2px solid var(--zielen); outline-offset:-1px;border-color:var(--zielen)} .para{display:grid;grid-template-columns:1fr 1fr;gap:10px} .zgoda{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--szary); line-height:1.45;margin:4px 0 16px} .zgoda input{width:16px;height:16px;margin-top:2px;flex:none;accent-color:var(--zielen)} .pulapka{position:absolute;left:-9999px} .komunikat{font-size:13.5px;margin:0 0 12px;padding:10px 12px;border-radius:3px;display:none} .komunikat.widoczny{display:block} .komunikat.blad{background:#fdeceb;color:#a32b1d;border:1px solid #f6c7c2} .komunikat.ok{background:#eaf7e8;color:#2c6b24;border:1px solid #c3e7bd} .przelacz{margin:14px 0 0;font-size:13.5px;color:var(--szary);text-align:center} /* ── Stopka ───────────────────────────────────────────────────────────────── */ .stopka{background:var(--granat);color:#a9aec0;margin-top:30px;padding:26px 20px 34px} .stopka-rzad{max-width:1680px;margin:0 auto;display:flex;flex-wrap:wrap;gap:16px; align-items:center;font-size:13px} .stopka a{color:#fff} .stopka .autor{margin-left:auto} /* ── Strony proste i dokumenty ────────────────────────────────────────────── */ .strona-prosta{display:grid;place-items:center;min-height:100vh;padding:18px;background:var(--tlo2)} .karta-prosta{width:min(520px,100%);background:var(--tlo);border:1px solid var(--linia); border-radius:4px;padding:28px} .karta-prosta h1{margin:0 0 10px;font-size:22px} .karta-prosta p{color:var(--szary);font-size:14.5px} .karta-prosta .przycisk{margin-top:8px} .dokument{max-width:780px;margin:0 auto;padding:30px 20px 70px;background:var(--tlo)} .dokument h1{font-size:27px;margin:0 0 6px;font-weight:700} .dokument h2{font-size:17px;margin:30px 0 8px;color:var(--zielen-ciemna);font-weight:700} .dokument h3{font-size:15px;margin:20px 0 6px;font-weight:600} .dokument p,.dokument li{font-size:15px;line-height:1.65} .dokument li{margin-bottom:6px} /* ── Telefon ──────────────────────────────────────────────────────────────── */ @media (max-width:900px){ .uklad{grid-template-columns:1fr} .boczny{position:static;max-height:none;padding:12px 16px 4px;display:flex;gap:7px;overflow-x:auto} .grupa-naglowek{display:none} .kategoria{width:auto;white-space:nowrap;border:1px solid var(--linia); border-left-width:3px;border-radius:3px;flex:none;background:var(--tlo)} .panel-tresc{width:100%} .wiersz{grid-template-columns:76px 1fr;gap:12px} .wiersz .obraz{width:76px;height:60px} .wiersz .prawa{grid-column:1/-1;flex-direction:row;align-items:center;gap:10px; justify-content:flex-start;text-align:left} #obrotowy{display:none} .szkice{grid-template-columns:1fr} } /* ── Zdjęcia produktowe (widok pracownika) ────────────────────────────────── */ #p-zdjecia{border-top:1px solid var(--linia2);margin-top:6px;padding-top:14px} .pasek-zdjec{display:flex;align-items:center;gap:10px;margin-bottom:10px} .pasek-zdjec .etykieta{flex:1} .galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px} .galeria a{display:block;border:1px solid var(--linia);border-radius:3px;overflow:hidden; background:var(--tlo3)} .galeria img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block} .galeria .podpis{font-size:10.5px;color:var(--szary2);padding:3px 5px;text-align:center} /* Przekrój profilu na liście — jak w katalogu tłoczni. */ .wiersz .obraz svg.przekroj{width:88%;height:88%} .wiersz .obraz svg.przekroj path{fill:#9aa3ad;stroke:#5c6570;stroke-width:.6;vector-effect:non-scaling-stroke} :root[data-motyw="ciemny"] .wiersz .obraz svg.przekroj path{fill:#b9c4cf;stroke:#e8edf2} .wiersz .plakietka{position:absolute;top:4px;right:4px;font-size:9px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:#b3570f;background:#fff1e3;border:1px solid #f0b37e;border-radius:3px;padding:1px 5px} .wiersz .cena-materialu{font-size:15px;font-weight:700;color:#c4661a} .wiersz .stan-nexo{font-size:11.5px;color:var(--zielen-ciemna);font-weight:600}