/* ===================================================================== Wygląd strony (panel "Ustawienia wyglądu", assets/js/wyglad.js). Wygląd składa się z 5 niezależnych warstw - atrybuty na : data-ui-logo srodek | poziom data-ui-ik- fantasy | neon | graficzne | karty | kolorowe | romby (osobno dla każdej pozycji menu, np. data-ui-ik-ratujemy) data-ui-przyciski fantasy | neon | graficzne | karty | material | neon-kolor | holo data-ui-tlo poswiata | neon | orzel | postac | wiedzmin | orzel-neon | ciemne data-ui-napis fantasy | neon | polskie | karty | material | neon-kolor | holo Brak atrybutu = klasyczna wersja tej warstwy. data-styl to znacznik "coś jest zmienione" (nazwa gotowego stylu albo "wlasny") - włącza ciemny pasek. Gotowe style to zestawy warstw (lista w wyglad.js), a "Dostosuj" pozwala mieszać warstwy z różnych stylów. Ustawia to skrypt w każdej strony (vs-styl, vs-ui), zanim strona się narysuje. Ikony rysujemy w ::before, więc HTML paska się nie zmienia. Grafiki: assets/img/style/ (wycięte z projektów usera). ===================================================================== */ /* ---------- dodatkowe kolory akcentu ---------- */ :root[data-accent="red"] { --accent: #ff4d5e !important; --accent-strong: #e8394b !important; --accent-soft: color-mix(in srgb, #ff4d5e 16%, transparent) !important; } :root[data-accent="cyan"] { --accent: #22c7d6 !important; --accent-strong: #14a9b7 !important; --accent-soft: color-mix(in srgb, #22c7d6 16%, transparent) !important; } /* ---------- ikony (maski SVG) ---------- */ :root { /* pełne */ --i-home: url("data:image/svg+xml;utf8,"); --i-trophy: url("data:image/svg+xml;utf8,"); --i-bulb: url("data:image/svg+xml;utf8,"); --i-gear: url("data:image/svg+xml;utf8,"); --i-heart: url("data:image/svg+xml;utf8,"); --i-chat: url("data:image/svg+xml;utf8,"); --i-doc: url("data:image/svg+xml;utf8,"); --i-person: url("data:image/svg+xml;utf8,"); --i-book: url("data:image/svg+xml;utf8,"); --i-gamepad: url("data:image/svg+xml;utf8,"); --i-wrench: url("data:image/svg+xml;utf8,"); --i-chart: url("data:image/svg+xml;utf8,"); --i-discord: url("data:image/svg+xml;utf8,"); --i-chevron: url("data:image/svg+xml;utf8,"); /* obrysowe (Styl 2) */ --o-home: url("data:image/svg+xml;utf8,"); --o-gamepad: url("data:image/svg+xml;utf8,"); --o-bulb: url("data:image/svg+xml;utf8,"); --o-wrench: url("data:image/svg+xml;utf8,"); --o-heart: url("data:image/svg+xml;utf8,"); --o-chat: url("data:image/svg+xml;utf8,"); --o-doc: url("data:image/svg+xml;utf8,"); --o-person: url("data:image/svg+xml;utf8,"); --o-book: url("data:image/svg+xml;utf8,"); } /* ===================================================================== Wspólne: pasek w każdym nie-klasycznym wyglądzie (data-styl ustawiony) ===================================================================== */ :root[data-styl] .sidebar { /* pasek zawsze ciemny - grafiki w stylach mają ciemne tło */ --text: #ece9f7; --text-muted: #a8a2c0; --surface: #17141f; --surface-soft: #1f1b2b; --border: rgba(139, 114, 255, 0.2); color: var(--text); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; background: #0d0b15; isolation: isolate; } :root[data-styl] .sidebar > * { position: relative; z-index: 1; } :root[data-styl] .nav-item { position: relative; color: var(--text); --pad-l: 14px; } /* minmax(0) - napis pod listą nie może rozpychać paska na szerokość */ :root[data-styl] .nav-list { grid-template-columns: minmax(0, 1fr); } :root[data-styl] .nav-list::after { content: ""; display: block; min-width: 0; pointer-events: none; } /* kolory pozycji: --k (ikona/tekst), --kb (pasek, romb) */ :root[data-styl] .nav-item[href$="#projekty"] { --k: #ffffff; --kb: var(--accent); } :root[data-styl] .nav-item[href*="ukonczone"] { --k: #2ecc71; --kb: #2ecc71; } :root[data-styl] .nav-item[href*="propozycje"] { --k: #f7c51e; --kb: #f59e0b; } :root[data-styl] .nav-item[href*="wtrakcie"] { --k: #2aa7ff; --kb: #2aa7ff; } :root[data-styl] .nav-item[href*="ratujemy"] { --k: #ff4d5e; --kb: #ff4d5e; } :root[data-styl] .nav-item[href*="forum"] { --k: #38bdf8; --kb: #38bdf8; } :root[data-styl] .nav-item[href*="regulamin"] { --k: #ffa53b; --kb: #fbbf24; } :root[data-styl] .nav-item[href*="omnie"] { --k: #e056fd; --kb: #a855f7; } :root[data-styl] .nav-item[href*="wiki"] { --k: #a77bff; --kb: #7c5cff; } :root[data-styl] .nav-item--discord { --k: #5865f2; --kb: #5865f2; } /* ===================================================================== WARSTWA: układ logo (data-ui-logo) ===================================================================== */ :root[data-ui-logo="srodek"] .brand { flex-direction: column; gap: 4px; padding: 0 6px 18px; text-align: center; } :root[data-ui-logo="srodek"] .brand-logo { width: 84px; height: 84px; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 55%, transparent)); } :root[data-ui-logo="srodek"] .brand > span:last-child { align-items: center; font-family: Georgia, "Times New Roman", serif; font-size: 30px; letter-spacing: 0.04em; text-transform: uppercase; } :root[data-ui-logo="srodek"] .brand strong { color: #f3f0ff; font-weight: 500; } :root[data-ui-logo="srodek"] .brand small { font-family: Georgia, "Times New Roman", serif; font-size: 12px; font-weight: 400; letter-spacing: 0.24em; color: #d9d4ee; } :root[data-ui-logo="poziom"] .brand { padding-bottom: 18px; } :root[data-ui-logo="poziom"] .brand-logo { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 50%, transparent)); } :root[data-ui-logo="poziom"] .brand strong { color: #f3f0ff; font-family: Georgia, serif; font-weight: 500; font-size: 28px; } :root[data-ui-logo="poziom"] .brand small { color: #e2ddf5; letter-spacing: 0.12em; } :root[data-ui-logo="poziom"] .brand > span:last-child::after { content: "Gry po polsku. Bez kompromisów."; margin-top: 6px; color: var(--accent); font-size: 8px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.4; text-transform: uppercase; } /* ===================================================================== WARSTWA: przyciski (data-ui-przyciski) - kształt pozycji, stan aktywny, przycisk Discorda ===================================================================== */ /* --- fantasy --- */ :root[data-ui-przyciski="fantasy"] .nav-list { gap: 2px; } :root[data-ui-przyciski="fantasy"] .nav-item { gap: 14px; padding: 5px 10px; --pad-l: 10px; font-size: 15.5px; border: 1px solid transparent; } :root[data-ui-przyciski="fantasy"] .nav-item:hover { background: rgba(124, 92, 255, 0.08); } :root[data-ui-przyciski="fantasy"] .nav-item.is-active { color: color-mix(in srgb, var(--accent) 70%, #fff); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)); border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 22%, transparent); } :root[data-ui-przyciski="fantasy"] .nav-item--discord { margin-top: 8px; padding: 12px 14px; border-color: rgba(139, 114, 255, 0.4); background: rgba(124, 92, 255, 0.08); } /* --- neon --- */ :root[data-ui-przyciski="neon"] .nav-list { gap: 4px; } :root[data-ui-przyciski="neon"] .nav-item { gap: 18px; padding: 11px 14px; font-weight: 500; border: 1px solid transparent; } :root[data-ui-przyciski="neon"] .nav-item:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); } :root[data-ui-przyciski="neon"] .nav-item.is-active, :root[data-ui-przyciski="neon"] .nav-item--discord { color: color-mix(in srgb, var(--accent) 55%, #fff); border-color: color-mix(in srgb, var(--accent) 70%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 4%, transparent)); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 25%, transparent), inset 0 0 12px color-mix(in srgb, var(--accent) 8%, transparent); } :root[data-ui-przyciski="neon"] .nav-item--discord { color: var(--text); margin-top: 10px; } /* --- graficzne --- */ :root[data-ui-przyciski="graficzne"] .nav-list { gap: 2px; } :root[data-ui-przyciski="graficzne"] .nav-item { gap: 16px; padding: 4px 10px; --pad-l: 10px; font-weight: 500; } :root[data-ui-przyciski="graficzne"] .nav-item:hover { background: rgba(255, 255, 255, 0.04); } :root[data-ui-przyciski="graficzne"] .nav-item.is-active { color: #fff; font-weight: 700; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), rgba(40, 32, 60, 0.85) 45%); } :root[data-ui-przyciski="graficzne"] .nav-item--discord { margin-top: 8px; padding: 12px 14px; border: 1px solid rgba(139, 114, 255, 0.35); background: rgba(40, 32, 70, 0.55); } /* --- karty (z obrazkiem po prawej) --- */ :root[data-ui-przyciski="karty"] .nav-list { gap: 7px; } :root[data-ui-przyciski="karty"] .nav-item { gap: 14px; min-height: 52px; padding: 8px 14px; font-size: 14.5px; font-weight: 500; border: 1px solid rgba(160, 140, 255, 0.28); border-radius: 10px; background: linear-gradient(90deg, #15121f 38%, rgba(21, 18, 31, 0.55) 65%, rgba(21, 18, 31, 0.15)), var(--karta, none) right center / auto 100% no-repeat, #15121f; } :root[data-ui-przyciski="karty"] .nav-item[href$="#projekty"] { --karta: url("../img/style/s4-glowna.webp"); } :root[data-ui-przyciski="karty"] .nav-item[href*="ukonczone"] { --karta: url("../img/style/s4-ukonczone.webp"); } :root[data-ui-przyciski="karty"] .nav-item[href*="propozycje"] { --karta: url("../img/style/s4-propozycje.webp"); } :root[data-ui-przyciski="karty"] .nav-item[href*="wtrakcie"] { --karta: url("../img/style/s4-wtrakcie.webp"); } :root[data-ui-przyciski="karty"] .nav-item[href*="ratujemy"] { --karta: url("../img/style/s4-ratujemy.webp"); } :root[data-ui-przyciski="karty"] .nav-item[href*="forum"] { --karta: url("../img/style/s4-forum.webp"); } :root[data-ui-przyciski="karty"] .nav-item[href*="regulamin"] { --karta: url("../img/style/s4-regulamin.webp"); } :root[data-ui-przyciski="karty"] .nav-item[href*="omnie"] { --karta: url("../img/style/s4-omnie.webp"); } :root[data-ui-przyciski="karty"] .nav-item[href*="wiki"] { --karta: url("../img/style/s4-wiki.webp"); } :root[data-ui-przyciski="karty"] .nav-item:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); } :root[data-ui-przyciski="karty"] .nav-item.is-active { color: color-mix(in srgb, var(--accent) 45%, #fff); border: 1.5px solid var(--accent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent); } :root[data-ui-przyciski="karty"] .nav-item--discord { margin-top: 6px; padding: 12px 14px; } /* --- material --- */ :root[data-ui-przyciski="material"] .nav-list { gap: 2px; } :root[data-ui-przyciski="material"] .nav-item { gap: 18px; padding: 11px 14px; font-weight: 500; } :root[data-ui-przyciski="material"] .nav-item:hover { background: rgba(255, 255, 255, 0.05); } :root[data-ui-przyciski="material"] .nav-item.is-active { color: #fff; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, #2a2140), color-mix(in srgb, var(--accent) 30%, #1b1629)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent); } :root[data-ui-przyciski="material"] .nav-item--discord { margin-top: 10px; padding: 12px 36px 12px 14px; border: 1px solid rgba(139, 114, 255, 0.4); background: rgba(30, 25, 55, 0.7) var(--i-chevron) right 12px center / 18px no-repeat; } /* --- neon + kolor (kolorowe napisy, kreski, strzałki) --- */ :root[data-ui-przyciski="neon-kolor"] .nav-list { gap: 0; } :root[data-ui-przyciski="neon-kolor"] .nav-item { --pad-l: 20px; gap: 22px; padding: 11px 32px 11px 20px; color: var(--k, var(--text)); font-size: 14.5px; font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0; background: var(--i-chevron) right 8px center / 16px no-repeat; } :root[data-ui-przyciski="neon-kolor"] .nav-item:hover { background-color: rgba(255, 255, 255, 0.04); } :root[data-ui-przyciski="neon-kolor"] .nav-item.is-active { color: #fff; border: 1.5px solid var(--accent); border-radius: 10px; background-color: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 35%, transparent); } :root[data-ui-przyciski="neon-kolor"] .nav-item--discord { --pad-l: 14px; margin-top: 12px; padding: 12px 32px 12px 14px; gap: 16px; color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 10px; background-color: color-mix(in srgb, var(--accent) 10%, transparent); } /* --- holo (kafelki z paskiem) --- */ :root[data-ui-przyciski="holo"] .nav-list { gap: 4px; } :root[data-ui-przyciski="holo"] .nav-item { --pad-l: 20px; gap: 22px; padding: 12px 14px 12px 20px; font-size: 14.5px; font-weight: 500; border-radius: 0; background: #1a1924; box-shadow: inset 4px 0 0 var(--kb, var(--accent)); } :root[data-ui-przyciski="holo"] .nav-item:hover { background: #22212e; } :root[data-ui-przyciski="holo"] .nav-item.is-active { color: #fff; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 100%, #000 15%) 0 52px, color-mix(in srgb, var(--accent) 80%, #1a1924) 52px); box-shadow: none; } :root[data-ui-przyciski="holo"] .nav-item--discord { --pad-l: 14px; margin-top: 12px; padding: 14px 36px 14px 14px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; box-shadow: none; background: #1a1924 var(--i-chevron) right 12px center / 18px no-repeat; } /* ===================================================================== WARSTWA: ikony - OSOBNO dla każdej pozycji menu (data-ui-ik-) Pozycje: glowna, ukonczone, propozycje, wtrakcie, ratujemy, forum, regulamin, omnie, wiki. Zestawy: fantasy, neon, graficzne, karty, kolorowe, romby. Brak atrybutu = klasyczna ikona (SVG z HTML). Wybór "Ikony: wszystkie" w panelu ustawia ten sam zestaw na każdej pozycji. Plik generowany skryptem - przy zmianie zestawu zmienić wszystkie pozycje. ===================================================================== */ :root[data-styl] .nav-item--discord > svg { width: 26px; height: 26px; fill: #5865f2; } /* --- glowna --- */ :root[data-ui-ik-glowna="fantasy"] .nav-item[href$="#projekty"] > svg, :root[data-ui-ik-glowna="neon"] .nav-item[href$="#projekty"] > svg, :root[data-ui-ik-glowna="graficzne"] .nav-item[href$="#projekty"] > svg, :root[data-ui-ik-glowna="karty"] .nav-item[href$="#projekty"] > svg, :root[data-ui-ik-glowna="kolorowe"] .nav-item[href$="#projekty"] > svg, :root[data-ui-ik-glowna="romby"] .nav-item[href$="#projekty"] > svg { display: none; } :root[data-ui-ik-glowna="fantasy"] .nav-item[href$="#projekty"]::before, :root[data-ui-ik-glowna="neon"] .nav-item[href$="#projekty"]::before, :root[data-ui-ik-glowna="graficzne"] .nav-item[href$="#projekty"]::before, :root[data-ui-ik-glowna="karty"] .nav-item[href$="#projekty"]::before, :root[data-ui-ik-glowna="kolorowe"] .nav-item[href$="#projekty"]::before, :root[data-ui-ik-glowna="romby"] .nav-item[href$="#projekty"]::before { content: ""; flex: none; width: var(--ik-roz); height: var(--ik-roz); } :root[data-ui-ik-glowna="fantasy"] .nav-item[href$="#projekty"] { --ik-roz: 42px; } :root[data-ui-ik-glowna="graficzne"] .nav-item[href$="#projekty"] { --ik-roz: 44px; } :root[data-ui-ik-glowna="fantasy"] .nav-item[href$="#projekty"]::before, :root[data-ui-ik-glowna="graficzne"] .nav-item[href$="#projekty"]::before { mix-blend-mode: lighten; -webkit-mask: radial-gradient(circle, #000 58%, transparent 72%); mask: radial-gradient(circle, #000 58%, transparent 72%); } :root[data-ui-ik-glowna="fantasy"] .nav-item[href$="#projekty"]::before { background: url("../img/style/s1-glowna.webp") center / cover no-repeat; } :root[data-ui-ik-glowna="graficzne"] .nav-item[href$="#projekty"]::before { background: url("../img/style/s3-glowna.webp") center / cover no-repeat; } :root[data-ui-ik-glowna="neon"] .nav-item[href$="#projekty"] { --ik-roz: 30px; } :root[data-ui-ik-glowna="neon"] .nav-item[href$="#projekty"]::before { background: var(--accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)); -webkit-mask: var(--o-home) center / contain no-repeat; mask: var(--o-home) center / contain no-repeat; } :root[data-ui-ik-glowna="karty"] .nav-item[href$="#projekty"] { --ik-roz: 24px; } :root[data-ui-ik-glowna="karty"] .nav-item[href$="#projekty"]::before { background: linear-gradient(135deg, #f0c3ff, #a77bff); -webkit-mask: var(--i-home) center / contain no-repeat; mask: var(--i-home) center / contain no-repeat; } :root[data-ui-ik-glowna="kolorowe"] .nav-item[href$="#projekty"] { --ik-roz: 26px; } :root[data-ui-ik-glowna="romby"] .nav-item[href$="#projekty"] { --ik-roz: 18px; gap: 22px; } :root[data-ui-ik-glowna="kolorowe"] .nav-item[href$="#projekty"]::before, :root[data-ui-ik-glowna="romby"] .nav-item[href$="#projekty"]::before { background: var(--k); -webkit-mask: var(--i-home) center / contain no-repeat; mask: var(--i-home) center / contain no-repeat; } :root[data-ui-ik-glowna="romby"] .nav-item[href$="#projekty"]::before { margin-left: 4px; } :root[data-ui-ik-glowna="romby"] .nav-item[href$="#projekty"]::after { content: ""; position: absolute; left: var(--pad-l); top: 50%; width: 26px; height: 26px; transform: translateY(-50%) rotate(45deg); border: 1.6px solid var(--kb, var(--accent)); border-radius: 5px; box-shadow: 0 0 10px color-mix(in srgb, var(--kb, var(--accent)) 55%, transparent), inset 0 0 8px color-mix(in srgb, var(--kb, var(--accent)) 30%, transparent); pointer-events: none; } /* --- ukonczone --- */ :root[data-ui-ik-ukonczone="fantasy"] .nav-item[href*="ukonczone"] > svg, :root[data-ui-ik-ukonczone="neon"] .nav-item[href*="ukonczone"] > svg, :root[data-ui-ik-ukonczone="graficzne"] .nav-item[href*="ukonczone"] > svg, :root[data-ui-ik-ukonczone="karty"] .nav-item[href*="ukonczone"] > svg, :root[data-ui-ik-ukonczone="kolorowe"] .nav-item[href*="ukonczone"] > svg, :root[data-ui-ik-ukonczone="romby"] .nav-item[href*="ukonczone"] > svg { display: none; } :root[data-ui-ik-ukonczone="fantasy"] .nav-item[href*="ukonczone"]::before, :root[data-ui-ik-ukonczone="neon"] .nav-item[href*="ukonczone"]::before, :root[data-ui-ik-ukonczone="graficzne"] .nav-item[href*="ukonczone"]::before, :root[data-ui-ik-ukonczone="karty"] .nav-item[href*="ukonczone"]::before, :root[data-ui-ik-ukonczone="kolorowe"] .nav-item[href*="ukonczone"]::before, :root[data-ui-ik-ukonczone="romby"] .nav-item[href*="ukonczone"]::before { content: ""; flex: none; width: var(--ik-roz); height: var(--ik-roz); } :root[data-ui-ik-ukonczone="fantasy"] .nav-item[href*="ukonczone"] { --ik-roz: 42px; } :root[data-ui-ik-ukonczone="graficzne"] .nav-item[href*="ukonczone"] { --ik-roz: 44px; } :root[data-ui-ik-ukonczone="fantasy"] .nav-item[href*="ukonczone"]::before, :root[data-ui-ik-ukonczone="graficzne"] .nav-item[href*="ukonczone"]::before { mix-blend-mode: lighten; -webkit-mask: radial-gradient(circle, #000 58%, transparent 72%); mask: radial-gradient(circle, #000 58%, transparent 72%); } :root[data-ui-ik-ukonczone="fantasy"] .nav-item[href*="ukonczone"]::before { background: url("../img/style/s1-ukonczone.webp") center / cover no-repeat; } :root[data-ui-ik-ukonczone="graficzne"] .nav-item[href*="ukonczone"]::before { background: url("../img/style/s3-ukonczone.webp") center / cover no-repeat; } :root[data-ui-ik-ukonczone="neon"] .nav-item[href*="ukonczone"] { --ik-roz: 30px; } :root[data-ui-ik-ukonczone="neon"] .nav-item[href*="ukonczone"]::before { background: var(--accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)); -webkit-mask: var(--o-gamepad) center / contain no-repeat; mask: var(--o-gamepad) center / contain no-repeat; } :root[data-ui-ik-ukonczone="karty"] .nav-item[href*="ukonczone"] { --ik-roz: 24px; } :root[data-ui-ik-ukonczone="karty"] .nav-item[href*="ukonczone"]::before { background: linear-gradient(135deg, #f0c3ff, #a77bff); -webkit-mask: var(--i-gamepad) center / contain no-repeat; mask: var(--i-gamepad) center / contain no-repeat; } :root[data-ui-ik-ukonczone="kolorowe"] .nav-item[href*="ukonczone"] { --ik-roz: 26px; } :root[data-ui-ik-ukonczone="romby"] .nav-item[href*="ukonczone"] { --ik-roz: 18px; gap: 22px; } :root[data-ui-ik-ukonczone="kolorowe"] .nav-item[href*="ukonczone"]::before, :root[data-ui-ik-ukonczone="romby"] .nav-item[href*="ukonczone"]::before { background: var(--k); -webkit-mask: var(--i-trophy) center / contain no-repeat; mask: var(--i-trophy) center / contain no-repeat; } :root[data-ui-ik-ukonczone="romby"] .nav-item[href*="ukonczone"]::before { margin-left: 4px; } :root[data-ui-ik-ukonczone="romby"] .nav-item[href*="ukonczone"]::after { content: ""; position: absolute; left: var(--pad-l); top: 50%; width: 26px; height: 26px; transform: translateY(-50%) rotate(45deg); border: 1.6px solid var(--kb, var(--accent)); border-radius: 5px; box-shadow: 0 0 10px color-mix(in srgb, var(--kb, var(--accent)) 55%, transparent), inset 0 0 8px color-mix(in srgb, var(--kb, var(--accent)) 30%, transparent); pointer-events: none; } /* --- propozycje --- */ :root[data-ui-ik-propozycje="fantasy"] .nav-item[href*="propozycje"] > svg, :root[data-ui-ik-propozycje="neon"] .nav-item[href*="propozycje"] > svg, :root[data-ui-ik-propozycje="graficzne"] .nav-item[href*="propozycje"] > svg, :root[data-ui-ik-propozycje="karty"] .nav-item[href*="propozycje"] > svg, :root[data-ui-ik-propozycje="kolorowe"] .nav-item[href*="propozycje"] > svg, :root[data-ui-ik-propozycje="romby"] .nav-item[href*="propozycje"] > svg { display: none; } :root[data-ui-ik-propozycje="fantasy"] .nav-item[href*="propozycje"]::before, :root[data-ui-ik-propozycje="neon"] .nav-item[href*="propozycje"]::before, :root[data-ui-ik-propozycje="graficzne"] .nav-item[href*="propozycje"]::before, :root[data-ui-ik-propozycje="karty"] .nav-item[href*="propozycje"]::before, :root[data-ui-ik-propozycje="kolorowe"] .nav-item[href*="propozycje"]::before, :root[data-ui-ik-propozycje="romby"] .nav-item[href*="propozycje"]::before { content: ""; flex: none; width: var(--ik-roz); height: var(--ik-roz); } :root[data-ui-ik-propozycje="fantasy"] .nav-item[href*="propozycje"] { --ik-roz: 42px; } :root[data-ui-ik-propozycje="graficzne"] .nav-item[href*="propozycje"] { --ik-roz: 44px; } :root[data-ui-ik-propozycje="fantasy"] .nav-item[href*="propozycje"]::before, :root[data-ui-ik-propozycje="graficzne"] .nav-item[href*="propozycje"]::before { mix-blend-mode: lighten; -webkit-mask: radial-gradient(circle, #000 58%, transparent 72%); mask: radial-gradient(circle, #000 58%, transparent 72%); } :root[data-ui-ik-propozycje="fantasy"] .nav-item[href*="propozycje"]::before { background: url("../img/style/s1-propozycje.webp") center / cover no-repeat; } :root[data-ui-ik-propozycje="graficzne"] .nav-item[href*="propozycje"]::before { background: url("../img/style/s3-propozycje.webp") center / cover no-repeat; } :root[data-ui-ik-propozycje="neon"] .nav-item[href*="propozycje"] { --ik-roz: 30px; } :root[data-ui-ik-propozycje="neon"] .nav-item[href*="propozycje"]::before { background: var(--accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)); -webkit-mask: var(--o-bulb) center / contain no-repeat; mask: var(--o-bulb) center / contain no-repeat; } :root[data-ui-ik-propozycje="karty"] .nav-item[href*="propozycje"] { --ik-roz: 24px; } :root[data-ui-ik-propozycje="karty"] .nav-item[href*="propozycje"]::before { background: linear-gradient(135deg, #f0c3ff, #a77bff); -webkit-mask: var(--o-bulb) center / contain no-repeat; mask: var(--o-bulb) center / contain no-repeat; } :root[data-ui-ik-propozycje="kolorowe"] .nav-item[href*="propozycje"] { --ik-roz: 26px; } :root[data-ui-ik-propozycje="romby"] .nav-item[href*="propozycje"] { --ik-roz: 18px; gap: 22px; } :root[data-ui-ik-propozycje="kolorowe"] .nav-item[href*="propozycje"]::before, :root[data-ui-ik-propozycje="romby"] .nav-item[href*="propozycje"]::before { background: var(--k); -webkit-mask: var(--i-bulb) center / contain no-repeat; mask: var(--i-bulb) center / contain no-repeat; } :root[data-ui-ik-propozycje="romby"] .nav-item[href*="propozycje"]::before { margin-left: 4px; } :root[data-ui-ik-propozycje="romby"] .nav-item[href*="propozycje"]::after { content: ""; position: absolute; left: var(--pad-l); top: 50%; width: 26px; height: 26px; transform: translateY(-50%) rotate(45deg); border: 1.6px solid var(--kb, var(--accent)); border-radius: 5px; box-shadow: 0 0 10px color-mix(in srgb, var(--kb, var(--accent)) 55%, transparent), inset 0 0 8px color-mix(in srgb, var(--kb, var(--accent)) 30%, transparent); pointer-events: none; } /* --- wtrakcie --- */ :root[data-ui-ik-wtrakcie="fantasy"] .nav-item[href*="wtrakcie"] > svg, :root[data-ui-ik-wtrakcie="neon"] .nav-item[href*="wtrakcie"] > svg, :root[data-ui-ik-wtrakcie="graficzne"] .nav-item[href*="wtrakcie"] > svg, :root[data-ui-ik-wtrakcie="karty"] .nav-item[href*="wtrakcie"] > svg, :root[data-ui-ik-wtrakcie="kolorowe"] .nav-item[href*="wtrakcie"] > svg, :root[data-ui-ik-wtrakcie="romby"] .nav-item[href*="wtrakcie"] > svg { display: none; } :root[data-ui-ik-wtrakcie="fantasy"] .nav-item[href*="wtrakcie"]::before, :root[data-ui-ik-wtrakcie="neon"] .nav-item[href*="wtrakcie"]::before, :root[data-ui-ik-wtrakcie="graficzne"] .nav-item[href*="wtrakcie"]::before, :root[data-ui-ik-wtrakcie="karty"] .nav-item[href*="wtrakcie"]::before, :root[data-ui-ik-wtrakcie="kolorowe"] .nav-item[href*="wtrakcie"]::before, :root[data-ui-ik-wtrakcie="romby"] .nav-item[href*="wtrakcie"]::before { content: ""; flex: none; width: var(--ik-roz); height: var(--ik-roz); } :root[data-ui-ik-wtrakcie="fantasy"] .nav-item[href*="wtrakcie"] { --ik-roz: 42px; } :root[data-ui-ik-wtrakcie="graficzne"] .nav-item[href*="wtrakcie"] { --ik-roz: 44px; } :root[data-ui-ik-wtrakcie="fantasy"] .nav-item[href*="wtrakcie"]::before, :root[data-ui-ik-wtrakcie="graficzne"] .nav-item[href*="wtrakcie"]::before { mix-blend-mode: lighten; -webkit-mask: radial-gradient(circle, #000 58%, transparent 72%); mask: radial-gradient(circle, #000 58%, transparent 72%); } :root[data-ui-ik-wtrakcie="fantasy"] .nav-item[href*="wtrakcie"]::before { background: url("../img/style/s1-wtrakcie.webp") center / cover no-repeat; } :root[data-ui-ik-wtrakcie="graficzne"] .nav-item[href*="wtrakcie"]::before { background: url("../img/style/s3-wtrakcie.webp") center / cover no-repeat; } :root[data-ui-ik-wtrakcie="neon"] .nav-item[href*="wtrakcie"] { --ik-roz: 30px; } :root[data-ui-ik-wtrakcie="neon"] .nav-item[href*="wtrakcie"]::before { background: var(--accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)); -webkit-mask: var(--o-wrench) center / contain no-repeat; mask: var(--o-wrench) center / contain no-repeat; } :root[data-ui-ik-wtrakcie="karty"] .nav-item[href*="wtrakcie"] { --ik-roz: 24px; } :root[data-ui-ik-wtrakcie="karty"] .nav-item[href*="wtrakcie"]::before { background: linear-gradient(135deg, #f0c3ff, #a77bff); -webkit-mask: var(--i-gear) center / contain no-repeat; mask: var(--i-gear) center / contain no-repeat; } :root[data-ui-ik-wtrakcie="kolorowe"] .nav-item[href*="wtrakcie"] { --ik-roz: 26px; } :root[data-ui-ik-wtrakcie="romby"] .nav-item[href*="wtrakcie"] { --ik-roz: 18px; gap: 22px; } :root[data-ui-ik-wtrakcie="kolorowe"] .nav-item[href*="wtrakcie"]::before, :root[data-ui-ik-wtrakcie="romby"] .nav-item[href*="wtrakcie"]::before { background: var(--k); -webkit-mask: var(--i-gear) center / contain no-repeat; mask: var(--i-gear) center / contain no-repeat; } :root[data-ui-ik-wtrakcie="romby"] .nav-item[href*="wtrakcie"]::before { margin-left: 4px; } :root[data-ui-ik-wtrakcie="romby"] .nav-item[href*="wtrakcie"]::after { content: ""; position: absolute; left: var(--pad-l); top: 50%; width: 26px; height: 26px; transform: translateY(-50%) rotate(45deg); border: 1.6px solid var(--kb, var(--accent)); border-radius: 5px; box-shadow: 0 0 10px color-mix(in srgb, var(--kb, var(--accent)) 55%, transparent), inset 0 0 8px color-mix(in srgb, var(--kb, var(--accent)) 30%, transparent); pointer-events: none; } /* --- ratujemy --- */ :root[data-ui-ik-ratujemy="fantasy"] .nav-item[href*="ratujemy"] > svg, :root[data-ui-ik-ratujemy="neon"] .nav-item[href*="ratujemy"] > svg, :root[data-ui-ik-ratujemy="graficzne"] .nav-item[href*="ratujemy"] > svg, :root[data-ui-ik-ratujemy="karty"] .nav-item[href*="ratujemy"] > svg, :root[data-ui-ik-ratujemy="kolorowe"] .nav-item[href*="ratujemy"] > svg, :root[data-ui-ik-ratujemy="romby"] .nav-item[href*="ratujemy"] > svg { display: none; } :root[data-ui-ik-ratujemy="fantasy"] .nav-item[href*="ratujemy"]::before, :root[data-ui-ik-ratujemy="neon"] .nav-item[href*="ratujemy"]::before, :root[data-ui-ik-ratujemy="graficzne"] .nav-item[href*="ratujemy"]::before, :root[data-ui-ik-ratujemy="karty"] .nav-item[href*="ratujemy"]::before, :root[data-ui-ik-ratujemy="kolorowe"] .nav-item[href*="ratujemy"]::before, :root[data-ui-ik-ratujemy="romby"] .nav-item[href*="ratujemy"]::before { content: ""; flex: none; width: var(--ik-roz); height: var(--ik-roz); } :root[data-ui-ik-ratujemy="fantasy"] .nav-item[href*="ratujemy"] { --ik-roz: 42px; } :root[data-ui-ik-ratujemy="graficzne"] .nav-item[href*="ratujemy"] { --ik-roz: 44px; } :root[data-ui-ik-ratujemy="fantasy"] .nav-item[href*="ratujemy"]::before, :root[data-ui-ik-ratujemy="graficzne"] .nav-item[href*="ratujemy"]::before { mix-blend-mode: lighten; -webkit-mask: radial-gradient(circle, #000 58%, transparent 72%); mask: radial-gradient(circle, #000 58%, transparent 72%); } :root[data-ui-ik-ratujemy="fantasy"] .nav-item[href*="ratujemy"]::before { background: url("../img/style/s1-ratujemy.webp") center / cover no-repeat; } :root[data-ui-ik-ratujemy="graficzne"] .nav-item[href*="ratujemy"]::before { background: url("../img/style/s3-ratujemy.webp") center / cover no-repeat; } :root[data-ui-ik-ratujemy="neon"] .nav-item[href*="ratujemy"] { --ik-roz: 30px; } :root[data-ui-ik-ratujemy="neon"] .nav-item[href*="ratujemy"]::before { background: var(--accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)); -webkit-mask: var(--o-heart) center / contain no-repeat; mask: var(--o-heart) center / contain no-repeat; } :root[data-ui-ik-ratujemy="karty"] .nav-item[href*="ratujemy"] { --ik-roz: 24px; } :root[data-ui-ik-ratujemy="karty"] .nav-item[href*="ratujemy"]::before { background: linear-gradient(135deg, #f0c3ff, #a77bff); -webkit-mask: var(--i-heart) center / contain no-repeat; mask: var(--i-heart) center / contain no-repeat; } :root[data-ui-ik-ratujemy="kolorowe"] .nav-item[href*="ratujemy"] { --ik-roz: 26px; } :root[data-ui-ik-ratujemy="romby"] .nav-item[href*="ratujemy"] { --ik-roz: 18px; gap: 22px; } :root[data-ui-ik-ratujemy="kolorowe"] .nav-item[href*="ratujemy"]::before, :root[data-ui-ik-ratujemy="romby"] .nav-item[href*="ratujemy"]::before { background: var(--k); -webkit-mask: var(--i-heart) center / contain no-repeat; mask: var(--i-heart) center / contain no-repeat; } :root[data-ui-ik-ratujemy="romby"] .nav-item[href*="ratujemy"]::before { margin-left: 4px; } :root[data-ui-ik-ratujemy="romby"] .nav-item[href*="ratujemy"]::after { content: ""; position: absolute; left: var(--pad-l); top: 50%; width: 26px; height: 26px; transform: translateY(-50%) rotate(45deg); border: 1.6px solid var(--kb, var(--accent)); border-radius: 5px; box-shadow: 0 0 10px color-mix(in srgb, var(--kb, var(--accent)) 55%, transparent), inset 0 0 8px color-mix(in srgb, var(--kb, var(--accent)) 30%, transparent); pointer-events: none; } /* --- forum --- */ :root[data-ui-ik-forum="fantasy"] .nav-item[href*="forum"] > svg, :root[data-ui-ik-forum="neon"] .nav-item[href*="forum"] > svg, :root[data-ui-ik-forum="graficzne"] .nav-item[href*="forum"] > svg, :root[data-ui-ik-forum="karty"] .nav-item[href*="forum"] > svg, :root[data-ui-ik-forum="kolorowe"] .nav-item[href*="forum"] > svg, :root[data-ui-ik-forum="romby"] .nav-item[href*="forum"] > svg { display: none; } :root[data-ui-ik-forum="fantasy"] .nav-item[href*="forum"]::before, :root[data-ui-ik-forum="neon"] .nav-item[href*="forum"]::before, :root[data-ui-ik-forum="graficzne"] .nav-item[href*="forum"]::before, :root[data-ui-ik-forum="karty"] .nav-item[href*="forum"]::before, :root[data-ui-ik-forum="kolorowe"] .nav-item[href*="forum"]::before, :root[data-ui-ik-forum="romby"] .nav-item[href*="forum"]::before { content: ""; flex: none; width: var(--ik-roz); height: var(--ik-roz); } :root[data-ui-ik-forum="fantasy"] .nav-item[href*="forum"] { --ik-roz: 42px; } :root[data-ui-ik-forum="graficzne"] .nav-item[href*="forum"] { --ik-roz: 44px; } :root[data-ui-ik-forum="fantasy"] .nav-item[href*="forum"]::before, :root[data-ui-ik-forum="graficzne"] .nav-item[href*="forum"]::before { mix-blend-mode: lighten; -webkit-mask: radial-gradient(circle, #000 58%, transparent 72%); mask: radial-gradient(circle, #000 58%, transparent 72%); } :root[data-ui-ik-forum="fantasy"] .nav-item[href*="forum"]::before { background: url("../img/style/s1-forum.webp") center / cover no-repeat; } :root[data-ui-ik-forum="graficzne"] .nav-item[href*="forum"]::before { background: url("../img/style/s3-forum.webp") center / cover no-repeat; } :root[data-ui-ik-forum="neon"] .nav-item[href*="forum"] { --ik-roz: 30px; } :root[data-ui-ik-forum="neon"] .nav-item[href*="forum"]::before { background: var(--accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)); -webkit-mask: var(--o-chat) center / contain no-repeat; mask: var(--o-chat) center / contain no-repeat; } :root[data-ui-ik-forum="karty"] .nav-item[href*="forum"] { --ik-roz: 24px; } :root[data-ui-ik-forum="karty"] .nav-item[href*="forum"]::before { background: linear-gradient(135deg, #f0c3ff, #a77bff); -webkit-mask: var(--i-chat) center / contain no-repeat; mask: var(--i-chat) center / contain no-repeat; } :root[data-ui-ik-forum="kolorowe"] .nav-item[href*="forum"] { --ik-roz: 26px; } :root[data-ui-ik-forum="romby"] .nav-item[href*="forum"] { --ik-roz: 18px; gap: 22px; } :root[data-ui-ik-forum="kolorowe"] .nav-item[href*="forum"]::before, :root[data-ui-ik-forum="romby"] .nav-item[href*="forum"]::before { background: var(--k); -webkit-mask: var(--i-chat) center / contain no-repeat; mask: var(--i-chat) center / contain no-repeat; } :root[data-ui-ik-forum="romby"] .nav-item[href*="forum"]::before { margin-left: 4px; } :root[data-ui-ik-forum="romby"] .nav-item[href*="forum"]::after { content: ""; position: absolute; left: var(--pad-l); top: 50%; width: 26px; height: 26px; transform: translateY(-50%) rotate(45deg); border: 1.6px solid var(--kb, var(--accent)); border-radius: 5px; box-shadow: 0 0 10px color-mix(in srgb, var(--kb, var(--accent)) 55%, transparent), inset 0 0 8px color-mix(in srgb, var(--kb, var(--accent)) 30%, transparent); pointer-events: none; } /* --- regulamin --- */ :root[data-ui-ik-regulamin="fantasy"] .nav-item[href*="regulamin"] > svg, :root[data-ui-ik-regulamin="neon"] .nav-item[href*="regulamin"] > svg, :root[data-ui-ik-regulamin="graficzne"] .nav-item[href*="regulamin"] > svg, :root[data-ui-ik-regulamin="karty"] .nav-item[href*="regulamin"] > svg, :root[data-ui-ik-regulamin="kolorowe"] .nav-item[href*="regulamin"] > svg, :root[data-ui-ik-regulamin="romby"] .nav-item[href*="regulamin"] > svg { display: none; } :root[data-ui-ik-regulamin="fantasy"] .nav-item[href*="regulamin"]::before, :root[data-ui-ik-regulamin="neon"] .nav-item[href*="regulamin"]::before, :root[data-ui-ik-regulamin="graficzne"] .nav-item[href*="regulamin"]::before, :root[data-ui-ik-regulamin="karty"] .nav-item[href*="regulamin"]::before, :root[data-ui-ik-regulamin="kolorowe"] .nav-item[href*="regulamin"]::before, :root[data-ui-ik-regulamin="romby"] .nav-item[href*="regulamin"]::before { content: ""; flex: none; width: var(--ik-roz); height: var(--ik-roz); } :root[data-ui-ik-regulamin="fantasy"] .nav-item[href*="regulamin"] { --ik-roz: 42px; } :root[data-ui-ik-regulamin="graficzne"] .nav-item[href*="regulamin"] { --ik-roz: 44px; } :root[data-ui-ik-regulamin="fantasy"] .nav-item[href*="regulamin"]::before, :root[data-ui-ik-regulamin="graficzne"] .nav-item[href*="regulamin"]::before { mix-blend-mode: lighten; -webkit-mask: radial-gradient(circle, #000 58%, transparent 72%); mask: radial-gradient(circle, #000 58%, transparent 72%); } :root[data-ui-ik-regulamin="fantasy"] .nav-item[href*="regulamin"]::before { background: url("../img/style/s1-regulamin.webp") center / cover no-repeat; } :root[data-ui-ik-regulamin="graficzne"] .nav-item[href*="regulamin"]::before { background: url("../img/style/s3-regulamin.webp") center / cover no-repeat; } :root[data-ui-ik-regulamin="neon"] .nav-item[href*="regulamin"] { --ik-roz: 30px; } :root[data-ui-ik-regulamin="neon"] .nav-item[href*="regulamin"]::before { background: var(--accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)); -webkit-mask: var(--o-doc) center / contain no-repeat; mask: var(--o-doc) center / contain no-repeat; } :root[data-ui-ik-regulamin="karty"] .nav-item[href*="regulamin"] { --ik-roz: 24px; } :root[data-ui-ik-regulamin="karty"] .nav-item[href*="regulamin"]::before { background: linear-gradient(135deg, #f0c3ff, #a77bff); -webkit-mask: var(--i-doc) center / contain no-repeat; mask: var(--i-doc) center / contain no-repeat; } :root[data-ui-ik-regulamin="kolorowe"] .nav-item[href*="regulamin"] { --ik-roz: 26px; } :root[data-ui-ik-regulamin="romby"] .nav-item[href*="regulamin"] { --ik-roz: 18px; gap: 22px; } :root[data-ui-ik-regulamin="kolorowe"] .nav-item[href*="regulamin"]::before, :root[data-ui-ik-regulamin="romby"] .nav-item[href*="regulamin"]::before { background: var(--k); -webkit-mask: var(--i-doc) center / contain no-repeat; mask: var(--i-doc) center / contain no-repeat; } :root[data-ui-ik-regulamin="romby"] .nav-item[href*="regulamin"]::before { margin-left: 4px; } :root[data-ui-ik-regulamin="romby"] .nav-item[href*="regulamin"]::after { content: ""; position: absolute; left: var(--pad-l); top: 50%; width: 26px; height: 26px; transform: translateY(-50%) rotate(45deg); border: 1.6px solid var(--kb, var(--accent)); border-radius: 5px; box-shadow: 0 0 10px color-mix(in srgb, var(--kb, var(--accent)) 55%, transparent), inset 0 0 8px color-mix(in srgb, var(--kb, var(--accent)) 30%, transparent); pointer-events: none; } /* --- omnie --- */ :root[data-ui-ik-omnie="fantasy"] .nav-item[href*="omnie"] > svg, :root[data-ui-ik-omnie="neon"] .nav-item[href*="omnie"] > svg, :root[data-ui-ik-omnie="graficzne"] .nav-item[href*="omnie"] > svg, :root[data-ui-ik-omnie="karty"] .nav-item[href*="omnie"] > svg, :root[data-ui-ik-omnie="kolorowe"] .nav-item[href*="omnie"] > svg, :root[data-ui-ik-omnie="romby"] .nav-item[href*="omnie"] > svg { display: none; } :root[data-ui-ik-omnie="fantasy"] .nav-item[href*="omnie"]::before, :root[data-ui-ik-omnie="neon"] .nav-item[href*="omnie"]::before, :root[data-ui-ik-omnie="graficzne"] .nav-item[href*="omnie"]::before, :root[data-ui-ik-omnie="karty"] .nav-item[href*="omnie"]::before, :root[data-ui-ik-omnie="kolorowe"] .nav-item[href*="omnie"]::before, :root[data-ui-ik-omnie="romby"] .nav-item[href*="omnie"]::before { content: ""; flex: none; width: var(--ik-roz); height: var(--ik-roz); } :root[data-ui-ik-omnie="fantasy"] .nav-item[href*="omnie"] { --ik-roz: 42px; } :root[data-ui-ik-omnie="graficzne"] .nav-item[href*="omnie"] { --ik-roz: 44px; } :root[data-ui-ik-omnie="fantasy"] .nav-item[href*="omnie"]::before, :root[data-ui-ik-omnie="graficzne"] .nav-item[href*="omnie"]::before { mix-blend-mode: lighten; -webkit-mask: radial-gradient(circle, #000 58%, transparent 72%); mask: radial-gradient(circle, #000 58%, transparent 72%); } :root[data-ui-ik-omnie="fantasy"] .nav-item[href*="omnie"]::before { background: url("../img/style/s1-omnie.webp") center / cover no-repeat; } :root[data-ui-ik-omnie="graficzne"] .nav-item[href*="omnie"]::before { background: url("../img/style/s3-omnie.webp") center / cover no-repeat; } :root[data-ui-ik-omnie="neon"] .nav-item[href*="omnie"] { --ik-roz: 30px; } :root[data-ui-ik-omnie="neon"] .nav-item[href*="omnie"]::before { background: var(--accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)); -webkit-mask: var(--o-person) center / contain no-repeat; mask: var(--o-person) center / contain no-repeat; } :root[data-ui-ik-omnie="karty"] .nav-item[href*="omnie"] { --ik-roz: 24px; } :root[data-ui-ik-omnie="karty"] .nav-item[href*="omnie"]::before { background: linear-gradient(135deg, #f0c3ff, #a77bff); -webkit-mask: var(--i-person) center / contain no-repeat; mask: var(--i-person) center / contain no-repeat; } :root[data-ui-ik-omnie="kolorowe"] .nav-item[href*="omnie"] { --ik-roz: 26px; } :root[data-ui-ik-omnie="romby"] .nav-item[href*="omnie"] { --ik-roz: 18px; gap: 22px; } :root[data-ui-ik-omnie="kolorowe"] .nav-item[href*="omnie"]::before, :root[data-ui-ik-omnie="romby"] .nav-item[href*="omnie"]::before { background: var(--k); -webkit-mask: var(--i-person) center / contain no-repeat; mask: var(--i-person) center / contain no-repeat; } :root[data-ui-ik-omnie="romby"] .nav-item[href*="omnie"]::before { margin-left: 4px; } :root[data-ui-ik-omnie="romby"] .nav-item[href*="omnie"]::after { content: ""; position: absolute; left: var(--pad-l); top: 50%; width: 26px; height: 26px; transform: translateY(-50%) rotate(45deg); border: 1.6px solid var(--kb, var(--accent)); border-radius: 5px; box-shadow: 0 0 10px color-mix(in srgb, var(--kb, var(--accent)) 55%, transparent), inset 0 0 8px color-mix(in srgb, var(--kb, var(--accent)) 30%, transparent); pointer-events: none; } /* --- wiki --- */ :root[data-ui-ik-wiki="fantasy"] .nav-item[href*="wiki"] > svg, :root[data-ui-ik-wiki="neon"] .nav-item[href*="wiki"] > svg, :root[data-ui-ik-wiki="graficzne"] .nav-item[href*="wiki"] > svg, :root[data-ui-ik-wiki="karty"] .nav-item[href*="wiki"] > svg, :root[data-ui-ik-wiki="kolorowe"] .nav-item[href*="wiki"] > svg, :root[data-ui-ik-wiki="romby"] .nav-item[href*="wiki"] > svg { display: none; } :root[data-ui-ik-wiki="fantasy"] .nav-item[href*="wiki"]::before, :root[data-ui-ik-wiki="neon"] .nav-item[href*="wiki"]::before, :root[data-ui-ik-wiki="graficzne"] .nav-item[href*="wiki"]::before, :root[data-ui-ik-wiki="karty"] .nav-item[href*="wiki"]::before, :root[data-ui-ik-wiki="kolorowe"] .nav-item[href*="wiki"]::before, :root[data-ui-ik-wiki="romby"] .nav-item[href*="wiki"]::before { content: ""; flex: none; width: var(--ik-roz); height: var(--ik-roz); } :root[data-ui-ik-wiki="fantasy"] .nav-item[href*="wiki"] { --ik-roz: 42px; } :root[data-ui-ik-wiki="graficzne"] .nav-item[href*="wiki"] { --ik-roz: 44px; } :root[data-ui-ik-wiki="fantasy"] .nav-item[href*="wiki"]::before, :root[data-ui-ik-wiki="graficzne"] .nav-item[href*="wiki"]::before { mix-blend-mode: lighten; -webkit-mask: radial-gradient(circle, #000 58%, transparent 72%); mask: radial-gradient(circle, #000 58%, transparent 72%); } :root[data-ui-ik-wiki="fantasy"] .nav-item[href*="wiki"]::before { background: url("../img/style/s1-wiki.webp") center / cover no-repeat; } :root[data-ui-ik-wiki="graficzne"] .nav-item[href*="wiki"]::before { background: url("../img/style/s3-wiki.webp") center / cover no-repeat; } :root[data-ui-ik-wiki="neon"] .nav-item[href*="wiki"] { --ik-roz: 30px; } :root[data-ui-ik-wiki="neon"] .nav-item[href*="wiki"]::before { background: var(--accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)); -webkit-mask: var(--o-book) center / contain no-repeat; mask: var(--o-book) center / contain no-repeat; } :root[data-ui-ik-wiki="karty"] .nav-item[href*="wiki"] { --ik-roz: 24px; } :root[data-ui-ik-wiki="karty"] .nav-item[href*="wiki"]::before { background: linear-gradient(135deg, #f0c3ff, #a77bff); -webkit-mask: var(--i-book) center / contain no-repeat; mask: var(--i-book) center / contain no-repeat; } :root[data-ui-ik-wiki="kolorowe"] .nav-item[href*="wiki"] { --ik-roz: 26px; } :root[data-ui-ik-wiki="romby"] .nav-item[href*="wiki"] { --ik-roz: 18px; gap: 22px; } :root[data-ui-ik-wiki="kolorowe"] .nav-item[href*="wiki"]::before, :root[data-ui-ik-wiki="romby"] .nav-item[href*="wiki"]::before { background: var(--k); -webkit-mask: var(--i-book) center / contain no-repeat; mask: var(--i-book) center / contain no-repeat; } :root[data-ui-ik-wiki="romby"] .nav-item[href*="wiki"]::before { margin-left: 4px; } :root[data-ui-ik-wiki="romby"] .nav-item[href*="wiki"]::after { content: ""; position: absolute; left: var(--pad-l); top: 50%; width: 26px; height: 26px; transform: translateY(-50%) rotate(45deg); border: 1.6px solid var(--kb, var(--accent)); border-radius: 5px; box-shadow: 0 0 10px color-mix(in srgb, var(--kb, var(--accent)) 55%, transparent), inset 0 0 8px color-mix(in srgb, var(--kb, var(--accent)) 30%, transparent); pointer-events: none; } /* Mieszane ikony (data-ui-ik-mix): każda dostaje to samo miejsce 44px, żeby napisy zaczynały się w jednej linii mimo różnych rozmiarów ikon. */ :root[data-ui-ik-mix] .nav-item:not(.nav-item--discord) > svg { flex: none; width: 21px; margin: 0 11.5px; } :root[data-ui-ik-mix] .nav-item:not(.nav-item--discord)::before { width: 44px; margin-left: 0; -webkit-mask-size: var(--ik-roz) var(--ik-roz); mask-size: var(--ik-roz) var(--ik-roz); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } :root[data-ui-ik-mix] .nav-item:not(.nav-item--discord) { gap: 14px; } :root[data-ui-ik-mix] .nav-item::after { left: calc(var(--pad-l) + 9px) !important; } /* ===================================================================== WARSTWA: tło paska (data-ui-tlo) ===================================================================== */ :root[data-ui-tlo] .sidebar::before { content: ""; position: absolute; z-index: 0; pointer-events: none; } :root[data-ui-tlo="poswiata"] .sidebar { background: radial-gradient(120% 40% at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%), #0e0c17; border-right: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); } :root[data-ui-tlo="neon"] .sidebar { background: #0b0a14; border-right: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: inset -1px 0 18px color-mix(in srgb, var(--accent) 12%, transparent); } :root[data-ui-tlo="orzel"] .sidebar { background: linear-gradient(180deg, #0f0d14, #0b0a10); border-right: 1px solid rgba(255, 255, 255, 0.08); } :root[data-ui-tlo="orzel"] .sidebar::before { top: 0; right: 0; width: 150px; height: 210px; background: url("../img/style/s3-orzel.webp") right top / contain no-repeat; -webkit-mask: linear-gradient(90deg, transparent, #000 35%), linear-gradient(180deg, #000 65%, transparent); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 35%), linear-gradient(180deg, #000 65%, transparent); mask-composite: intersect; } :root[data-ui-tlo="postac"] .sidebar { background: #0e0c16; border-right: 1px solid rgba(139, 114, 255, 0.3); } :root[data-ui-tlo="postac"] .sidebar::before { top: 0; right: 0; width: 110px; height: 150px; background: url("../img/style/s4-postac.webp") right top / cover no-repeat; -webkit-mask: linear-gradient(90deg, transparent, #000 45%), linear-gradient(180deg, #000 60%, transparent); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 45%), linear-gradient(180deg, #000 60%, transparent); mask-composite: intersect; opacity: 0.9; } :root[data-ui-tlo="wiedzmin"] .sidebar { background: linear-gradient(180deg, #120f1d, #0c0a13); border-right: 1px solid rgba(139, 114, 255, 0.35); } :root[data-ui-tlo="wiedzmin"] .sidebar::before { inset: 0 0 0 auto; width: 150px; background: url("../img/style/sa-tlo.webp") right center / cover no-repeat; -webkit-mask: linear-gradient(90deg, transparent, #000 60%); mask: linear-gradient(90deg, transparent, #000 60%); opacity: 0.55; } :root[data-ui-tlo="orzel-neon"] .sidebar { background: #0c0b14; border-right: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); } :root[data-ui-tlo="orzel-neon"] .sidebar::before { inset: 0 0 0 auto; width: 130px; background: url("../img/style/sb-tlo.webp") right top / cover no-repeat; -webkit-mask: linear-gradient(90deg, transparent, #000 70%); mask: linear-gradient(90deg, transparent, #000 70%); opacity: 0.35; } :root[data-ui-tlo="ciemne"] .sidebar { background: #111018; border-right: 1px solid rgba(255, 255, 255, 0.08); } /* ===================================================================== WARSTWA: napis pod menu (data-ui-napis) ===================================================================== */ :root[data-ui-napis="fantasy"] .nav-list::after { height: 70px; margin-top: 10px; background: url("../img/style/s1-napis.webp") center / contain no-repeat; } :root[data-ui-napis="karty"] .nav-list::after { height: 72px; margin-top: 12px; background: url("../img/style/s4-napis.webp") center / contain no-repeat; } :root[data-ui-napis="material"] .nav-list::after { height: 62px; margin-top: 10px; background: url("../img/style/sa-napis.webp") center / contain no-repeat; } :root[data-ui-napis="polskie"] .nav-list::after { height: 150px; margin: 8px -18px 0; background: url("../img/style/s3-dol.webp") center bottom / cover no-repeat; -webkit-mask: linear-gradient(180deg, transparent, #000 30%); mask: linear-gradient(180deg, transparent, #000 30%); } :root[data-ui-napis="neon"] .nav-list::after { content: "Vet Spolszczenia\A \A Tworzone z pasją\A dla graczy"; white-space: pre-line; margin-top: 16px; text-align: center; color: #d8d3ea; font: 400 11px/1.9 Georgia, serif; letter-spacing: 0.2em; text-transform: uppercase; } :root[data-ui-napis="neon-kolor"] .nav-list::after { content: "Tworzone z pasją dla graczy"; margin-top: 14px; text-align: center; color: #cfc9e3; font-size: 9.5px; letter-spacing: 0.3em; text-transform: uppercase; } :root[data-ui-napis="holo"] .nav-list::after { content: "Gry po polsku. Bez kompromisów."; margin-top: 16px; padding-bottom: 12px; text-align: center; color: #a8a2c0; font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; background: linear-gradient(var(--accent), var(--accent)) center bottom / 45% 3px no-repeat; } /* ===================================================================== Pasek boczny bez przewijania (wszystkie style, także klasyczny) Stopka z przyciskiem "Ustawienia wyglądu" zajmowała ~65 px na dole i pasek wychodził poza ekran (pojawiał się suwak). Przycisk jest teraz okrągłą zębatką w prawym górnym rogu paska, a na niższych ekranach zagęszczamy menu i chowamy ozdobne napisy/grafiki pod listą. ===================================================================== */ .sidebar { position: fixed; } .sidebar .sidebar-footer, :root[data-styl] .sidebar > .sidebar-footer { position: absolute; top: 14px; right: 12px; z-index: 6; margin: 0; padding: 0; border: 0; } .sidebar .sidebar-ustawienia-btn { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--text-muted); backdrop-filter: blur(6px); } .sidebar .sidebar-ustawienia-btn:hover { color: var(--accent); border-color: var(--accent); } .sidebar .sidebar-ustawienia-btn > span { display: none; } .sidebar .sidebar-ustawienia-btn svg { width: 19px; height: 19px; } /* logo nie może wchodzić pod zębatkę */ .sidebar .brand { padding-right: 40px; } :root[data-ui-logo="srodek"] .sidebar .brand { padding-left: 40px; } /* ostatni suwak awaryjny - niewidoczny (kółko myszy dalej działa) */ .sidebar { overflow-y: auto; scrollbar-width: none; } .sidebar::-webkit-scrollbar { display: none; } @media (max-height: 1000px) { .sidebar { padding-top: 20px; padding-bottom: 12px; } .brand { padding-bottom: 18px; } .nav-list { gap: 2px; } .nav-item { padding-top: 10px; padding-bottom: 10px; } :root[data-ui-logo="srodek"] .brand-logo { width: 64px; height: 64px; } :root[data-ui-logo="srodek"] .brand > span:last-child { font-size: 25px; } :root[data-ui-przyciski="fantasy"] .nav-item, :root[data-ui-przyciski="graficzne"] .nav-item { padding-top: 2px; padding-bottom: 2px; } :root[data-ui-przyciski="karty"] .nav-list { gap: 5px; } :root[data-ui-przyciski="karty"] .nav-item { min-height: 44px; } :root[data-ui-przyciski="holo"] .nav-item, :root[data-ui-przyciski="material"] .nav-item, :root[data-ui-przyciski="neon"] .nav-item, :root[data-ui-przyciski="neon-kolor"] .nav-item { padding-top: 8px; padding-bottom: 8px; } :root[data-ui-napis="polskie"] .nav-list::after { height: 90px; } :root[data-ui-napis="fantasy"] .nav-list::after, :root[data-ui-napis="karty"] .nav-list::after, :root[data-ui-napis="material"] .nav-list::after { height: 52px; margin-top: 6px; } } @media (max-height: 850px) { .nav-item { padding-top: 7px; padding-bottom: 7px; font-size: 15px; } :root[data-ui-logo="srodek"] .brand-logo { width: 52px; height: 52px; } :root[data-ui-logo="srodek"] .brand > span:last-child { font-size: 21px; } :root[data-ui-napis] .nav-list::after { display: none; } :root[data-ui-przyciski="fantasy"] .nav-item, :root[data-ui-przyciski="graficzne"] .nav-item { padding-top: 0; padding-bottom: 0; } :root[data-ui-przyciski="holo"] .nav-item, :root[data-ui-przyciski="material"] .nav-item, :root[data-ui-przyciski="neon"] .nav-item, :root[data-ui-przyciski="neon-kolor"] .nav-item { padding-top: 6px; padding-bottom: 6px; } :root[data-ui-przyciski="karty"] .nav-item { min-height: 38px; } } /* ===================================================================== Okno "Wygląd strony" ===================================================================== */ .wyglad-okno { position: fixed; inset: 0 0 0 auto; z-index: 1200; display: flex; flex-direction: column; width: min(480px, 100%); color: var(--text); background: color-mix(in srgb, var(--surface) 96%, transparent); border-left: 1px solid var(--border); box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45); backdrop-filter: blur(10px); animation: wyglad-wjazd 0.25s ease; } .wyglad-okno[hidden] { display: none; } @keyframes wyglad-wjazd { from { transform: translateX(30px); opacity: 0; } } .wyglad-glowa { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 12px; } .wyglad-glowa h2 { margin: 0; font-size: 20px; } .wyglad-glowa p { margin: 4px 0 0; color: var(--text-muted); font-size: 13px; } .wyglad-x { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-soft); color: var(--text-muted); font-size: 20px; cursor: pointer; } .wyglad-x:hover { color: var(--text); border-color: var(--accent); } .wyglad-tresc { flex: 1; overflow: auto; padding: 6px 22px 16px; } .wyglad-tresc h3 { margin: 14px 0 10px; color: var(--text-muted); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; } .wyglad-style { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; } .wyglad-styl { display: grid; gap: 6px; padding: 6px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface-soft); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; } .wyglad-styl:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); } .wyglad-styl.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } .wyglad-styl img { display: block; width: 100%; aspect-ratio: 1 / 1.9; object-fit: cover; object-position: top; border-radius: 8px; background: #0d0b15; } .wyglad-styl b { font-size: 12.5px; line-height: 1.2; } .wyglad-styl small { color: var(--text-muted); font-size: 10.5px; line-height: 1.25; } .wyglad-naglowek { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .wyglad-wlasny { padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-size: 11px; font-weight: 800; } .wyglad-wlasny[hidden] { display: none; } .wyglad-dostosuj { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px; padding: 11px 14px; border-radius: 12px; border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 800; text-align: left; cursor: pointer; } .wyglad-dostosuj:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); } .wyglad-dostosuj svg { width: 20px; height: 20px; flex: none; fill: var(--accent); } .wyglad-dostosuj span { flex: 1; } .wyglad-dostosuj i { font-style: normal; font-size: 20px; transition: transform 0.2s ease; } .wyglad-dostosuj.is-otwarty i { transform: rotate(90deg); } .wyglad-warstwy { margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--surface-soft); border: 1px solid var(--border); } .wyglad-warstwy[hidden] { display: none; } .wyglad-podpowiedz { margin: 0 0 6px; color: var(--text-muted); font-size: 12.5px; } .wyglad-warstwa h4 { margin: 12px 0 7px; font-size: 12.5px; } .wyglad-opcje { display: flex; flex-wrap: wrap; gap: 6px; } .wyglad-opcja { padding: 7px 11px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .wyglad-opcja:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); } .wyglad-opcja.is-on { color: #fff; background: var(--accent); border-color: var(--accent); } .wyglad-opcja.is-mala { padding: 5px 9px; font-size: 11.5px; } .wyglad-osobno { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; } .wyglad-osobno:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } .wyglad-osobno i { font-style: normal; font-size: 16px; transition: transform 0.2s ease; } .wyglad-osobno.is-otwarty i { transform: rotate(90deg); } .wyglad-pozycje { display: grid; gap: 10px; margin-top: 6px; padding: 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); } .wyglad-pozycje[hidden] { display: none; } .wyglad-pozycja > span { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 700; } .wyglad-kolory { display: flex; flex-wrap: wrap; gap: 10px; } .wyglad-kolor { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--surface); background: var(--dot); box-shadow: 0 0 0 1.5px var(--border); cursor: pointer; } .wyglad-kolor.is-on { box-shadow: 0 0 0 2.5px var(--dot); } .wyglad-konto { margin: 0; padding: 10px 22px 0; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 12px; line-height: 1.45; } .wyglad-konto[hidden] { display: none; } .wyglad-konto + .wyglad-stopka { border-top: 0; } .wyglad-stopka { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); } .wyglad-stopka button { padding: 11px 20px; border-radius: 11px; font: inherit; font-weight: 800; cursor: pointer; } .wyglad-anuluj { border: 1px solid var(--border); background: transparent; color: var(--text-muted); } .wyglad-zapisz { border: 0; background: var(--accent); color: #fff; } .wyglad-motywy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .wyglad-motyw { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface-soft); color: var(--text-muted); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; } .wyglad-motyw svg { width: 22px; height: 22px; fill: currentColor; } .wyglad-motyw:hover { color: var(--text); } .wyglad-motyw.is-on { color: var(--text); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } .wyglad-motyw.is-on svg { fill: var(--accent); } @media (max-width: 560px) { .wyglad-okno { inset: auto 0 0 0; width: 100%; max-height: 80vh; border-left: 0; border-top: 1px solid var(--border); border-radius: 18px 18px 0 0; } } /* ===================================================================== WARSTWA: tło strony (data-ui-tlo-strony) (brak) = mroczny zamek, karczma | cyberpunk | wojna | przyroda | scifi | jaskinia | pustynia, "brak" = zwykłe tło bez grafiki. Grafika siedzi w body::before (position: fixed) - background-attachment: fixed nie działa na telefonach. Ramki w treści robią się półprzezroczyste (--surface), okna dialogowe zostają pełne. Tylko w ciemnym motywie - na jasnym ciemne grafiki gryzą się z ciemnym tekstem. Grafiki: assets/img/tla/ (powiększone AI z projektu usera). ===================================================================== */ :root { --tlo-strony: url("../img/tla/zamek.webp"); } :root[data-ui-tlo-strony="karczma"] { --tlo-strony: url("../img/tla/karczma.webp"); } :root[data-ui-tlo-strony="cyberpunk"] { --tlo-strony: url("../img/tla/cyberpunk.webp"); } :root[data-ui-tlo-strony="wojna"] { --tlo-strony: url("../img/tla/wojna.webp"); } :root[data-ui-tlo-strony="przyroda"] { --tlo-strony: url("../img/tla/przyroda.webp"); } :root[data-ui-tlo-strony="scifi"] { --tlo-strony: url("../img/tla/scifi.webp"); } :root[data-ui-tlo-strony="jaskinia"] { --tlo-strony: url("../img/tla/jaskinia.webp"); } :root[data-ui-tlo-strony="pustynia"] { --tlo-strony: url("../img/tla/pustynia.webp"); } /* To samo dla motywu wymuszonego (data-theme="dark") i systemowego ciemnego. */ :root[data-theme="dark"]:not([data-ui-tlo-strony="brak"]) body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(rgba(10, 8, 20, .35), rgba(10, 8, 20, .55)), #0c0819 var(--tlo-strony) center / cover no-repeat; } :root[data-theme="dark"]:not([data-ui-tlo-strony="brak"]) :is(.ghp-page, body) { background: transparent; } :root[data-theme="dark"]:not([data-ui-tlo-strony="brak"]) .main-content { --surface: rgba(24, 22, 36, .7); --surface-soft: rgba(32, 30, 46, .7); } /* Grafiki ze Steama są jaśniejsze niż tła stylów - na stronie gry ramki mocniej kryją. */ :root[data-theme="dark"]:not([data-ui-tlo-strony="brak"]) .main-content .project-page { --surface: rgba(20, 18, 32, .82); --surface-soft: rgba(28, 26, 42, .82); } /* Czytelność na grafice: cień pod tekstem i jaśniejsze szare opisy. */ :root[data-theme="dark"]:not([data-ui-tlo-strony="brak"]) .main-content { text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 0 12px rgba(0, 0, 0, .4); --text-muted: #c8cddb; } :root[data-theme="dark"]:not([data-ui-tlo-strony="brak"]) .main-content :is(input, textarea, select, option) { text-shadow: none; } :root[data-theme="dark"]:not([data-ui-tlo-strony="brak"]) .main-content .project-page { --gp-muted: #d2cbe8; --gp-dim: #b8b0d0; } :root[data-theme="dark"]:not([data-ui-tlo-strony="brak"]) .main-content .kd-card { --kd-muted: #d0c9e4; } :root[data-theme="dark"]:not([data-ui-tlo-strony="brak"]) .ghp-page :is(.catalog-heading p, .hit-head p, #projectCount, .project-stat-count, .ghp-head-sub) { color: #d2cbe8; } :root[data-theme="dark"]:not([data-ui-tlo-strony="brak"]) .main-content :is(.ghp-head-more, .lc-more, .back-link, .gp-back) { color: color-mix(in srgb, var(--accent) 45%, #fff); } :root[data-theme="dark"]:not([data-ui-tlo-strony="brak"]) .main-content :is([role="dialog"], [aria-modal="true"], dialog) { --surface: #181b24; --surface-soft: #20242f; } :root[data-theme="dark"]:not([data-ui-tlo-strony="brak"]) .kd-card { background: radial-gradient(90% 70% at 100% 0%, rgba(124, 92, 255, .16), transparent 60%), rgba(18, 15, 30, .6); } :root[data-theme="dark"]:not([data-ui-tlo-strony="brak"]) .about-page.prop-layout { background-color: rgba(12, 8, 25, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } @media (min-width: 1201px) { :root[data-theme="dark"]:not([data-ui-tlo-strony="brak"]) .prop-baner { -webkit-mask-image: linear-gradient(100deg, transparent 0%, rgba(0,0,0,.3) 12%, #000 32%), linear-gradient(to bottom, #000 64%, rgba(0,0,0,.5) 85%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(100deg, transparent 0%, rgba(0,0,0,.3) 12%, #000 32%), linear-gradient(to bottom, #000 64%, rgba(0,0,0,.5) 85%, transparent 100%); mask-composite: intersect; } :root[data-theme="dark"]:not([data-ui-tlo-strony="brak"]) .prop-baner::after { display: none; } } @media (prefers-color-scheme: dark) { :root:not([data-theme]):not([data-ui-tlo-strony="brak"]) body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(rgba(10, 8, 20, .35), rgba(10, 8, 20, .55)), #0c0819 var(--tlo-strony) center / cover no-repeat; } :root:not([data-theme]):not([data-ui-tlo-strony="brak"]) :is(.ghp-page, body) { background: transparent; } :root:not([data-theme]):not([data-ui-tlo-strony="brak"]) .main-content { --surface: rgba(24, 22, 36, .7); --surface-soft: rgba(32, 30, 46, .7); } /* Grafiki ze Steama są jaśniejsze niż tła stylów - na stronie gry ramki mocniej kryją. */ :root:not([data-theme]):not([data-ui-tlo-strony="brak"]) .main-content .project-page { --surface: rgba(20, 18, 32, .82); --surface-soft: rgba(28, 26, 42, .82); } /* Czytelność na grafice: cień pod tekstem i jaśniejsze szare opisy. */ :root:not([data-theme]):not([data-ui-tlo-strony="brak"]) .main-content { text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 0 12px rgba(0, 0, 0, .4); --text-muted: #c8cddb; } :root:not([data-theme]):not([data-ui-tlo-strony="brak"]) .main-content :is(input, textarea, select, option) { text-shadow: none; } :root:not([data-theme]):not([data-ui-tlo-strony="brak"]) .main-content .project-page { --gp-muted: #d2cbe8; --gp-dim: #b8b0d0; } :root:not([data-theme]):not([data-ui-tlo-strony="brak"]) .main-content .kd-card { --kd-muted: #d0c9e4; } :root:not([data-theme]):not([data-ui-tlo-strony="brak"]) .ghp-page :is(.catalog-heading p, .hit-head p, #projectCount, .project-stat-count, .ghp-head-sub) { color: #d2cbe8; } :root:not([data-theme]):not([data-ui-tlo-strony="brak"]) .main-content :is(.ghp-head-more, .lc-more, .back-link, .gp-back) { color: color-mix(in srgb, var(--accent) 45%, #fff); } :root:not([data-theme]):not([data-ui-tlo-strony="brak"]) .main-content :is([role="dialog"], [aria-modal="true"], dialog) { --surface: #181b24; --surface-soft: #20242f; } :root:not([data-theme]):not([data-ui-tlo-strony="brak"]) .kd-card { background: radial-gradient(90% 70% at 100% 0%, rgba(124, 92, 255, .16), transparent 60%), rgba(18, 15, 30, .6); } :root:not([data-theme]):not([data-ui-tlo-strony="brak"]) .about-page.prop-layout { background-color: rgba(12, 8, 25, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } @media (min-width: 1201px) { :root:not([data-theme]):not([data-ui-tlo-strony="brak"]) .prop-baner { -webkit-mask-image: linear-gradient(100deg, transparent 0%, rgba(0,0,0,.3) 12%, #000 32%), linear-gradient(to bottom, #000 64%, rgba(0,0,0,.5) 85%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(100deg, transparent 0%, rgba(0,0,0,.3) 12%, #000 32%), linear-gradient(to bottom, #000 64%, rgba(0,0,0,.5) 85%, transparent 100%); mask-composite: intersect; } :root:not([data-theme]):not([data-ui-tlo-strony="brak"]) .prop-baner::after { display: none; } } } /* Gdy tło jest włączone: ramki rozmywają grafikę pod sobą, okna zostają pełne. */ :root:not([data-ui-tlo-strony="brak"]) .main-content :is(.ghp-aktu-big, .ghp-aktu-kafel, .rk30-box, .hit-card, .losuj, .project-card, .lc-box, .kd-card, .about-card, .dz-panel, .dz-box, .fo-tabela-otoczka, .fo-kategorie) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* Pozycja "Lektorzy" w stylizowanym pasku - własny kolor. */ :root[data-styl] .nav-item[href*="lektorzy"] { --k: #c084fc; --kb: #a855f7; } /* ===================================================================== Pozycja "Lektorzy" (dodana 18.09.2026): nie ma własnych grafik w zestawach, więc idzie za zestawem ikon Forum - ten sam rozmiar pola, żeby napis stał równo z resztą. Rysujemy mikrofon maską w kolorach danego zestawu. ===================================================================== */ :root { --i-mic: url("data:image/svg+xml;utf8,"); } :root[data-ui-ik-forum="fantasy"] .nav-item--lektorzy > svg, :root[data-ui-ik-forum="graficzne"] .nav-item--lektorzy > svg, :root[data-ui-ik-forum="neon"] .nav-item--lektorzy > svg, :root[data-ui-ik-forum="karty"] .nav-item--lektorzy > svg, :root[data-ui-ik-forum="kolorowe"] .nav-item--lektorzy > svg, :root[data-ui-ik-forum="romby"] .nav-item--lektorzy > svg { display: none; } :root[data-ui-ik-forum="fantasy"] .nav-item--lektorzy::before, :root[data-ui-ik-forum="graficzne"] .nav-item--lektorzy::before, :root[data-ui-ik-forum="neon"] .nav-item--lektorzy::before, :root[data-ui-ik-forum="karty"] .nav-item--lektorzy::before, :root[data-ui-ik-forum="kolorowe"] .nav-item--lektorzy::before, :root[data-ui-ik-forum="romby"] .nav-item--lektorzy::before { content: ""; flex: none; width: var(--ik-roz); height: var(--ik-roz); -webkit-mask: var(--i-mic) center / 70% no-repeat; mask: var(--i-mic) center / 70% no-repeat; } :root[data-ui-ik-forum="fantasy"] .nav-item--lektorzy { --ik-roz: 42px; } :root[data-ui-ik-forum="graficzne"] .nav-item--lektorzy { --ik-roz: 44px; } :root[data-ui-ik-forum="neon"] .nav-item--lektorzy { --ik-roz: 30px; } :root[data-ui-ik-forum="karty"] .nav-item--lektorzy { --ik-roz: 24px; } :root[data-ui-ik-forum="kolorowe"] .nav-item--lektorzy { --ik-roz: 26px; } :root[data-ui-ik-forum="romby"] .nav-item--lektorzy { --ik-roz: 18px; gap: 22px; } :root[data-ui-ik-forum="fantasy"] .nav-item--lektorzy::before { background: linear-gradient(160deg, #ffe2a8, #c98a3a); filter: drop-shadow(0 0 6px rgba(240, 180, 90, .45)); } :root[data-ui-ik-forum="graficzne"] .nav-item--lektorzy::before { background: linear-gradient(160deg, #ffffff, #ff5a5a); filter: drop-shadow(0 0 6px rgba(255, 80, 80, .45)); } :root[data-ui-ik-forum="neon"] .nav-item--lektorzy::before { background: var(--accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)); -webkit-mask-size: 100%; mask-size: 100%; } :root[data-ui-ik-forum="karty"] .nav-item--lektorzy::before { background: linear-gradient(135deg, #f0c3ff, #a77bff); -webkit-mask-size: 100%; mask-size: 100%; } :root[data-ui-ik-forum="kolorowe"] .nav-item--lektorzy::before, :root[data-ui-ik-forum="romby"] .nav-item--lektorzy::before { background: var(--k); -webkit-mask-size: 100%; mask-size: 100%; } :root[data-ui-ik-forum="romby"] .nav-item--lektorzy::before { margin-left: 4px; } :root[data-ui-ik-forum="romby"] .nav-item--lektorzy::after { content: ""; position: absolute; left: var(--pad-l); top: 50%; width: 26px; height: 26px; transform: translateY(-50%) rotate(45deg); border: 1.6px solid var(--kb, var(--accent)); border-radius: 5px; box-shadow: 0 0 10px color-mix(in srgb, var(--kb, var(--accent)) 55%, transparent), inset 0 0 8px color-mix(in srgb, var(--kb, var(--accent)) 30%, transparent); pointer-events: none; }