/* ========================= Theme vars (dark default) Ustawiane przez: ========================= */ :root{ --bg0:#050608; --bg1:#0b0d12; --card: rgba(255,255,255,.04); --card2: rgba(255,255,255,.06); --border: rgba(255,255,255,.10); --border2: rgba(255,255,255,.16); --text: rgba(255,255,255,.92); --muted: rgba(255,255,255,.66); --muted2: rgba(255,255,255,.45); --accent:#9ef01a; --accent2:#00d4ff; --shadow: 0 14px 40px rgba(0,0,0,.45); --shadow2: 0 10px 28px rgba(0,0,0,.35); --ring: 0 0 0 3px rgba(158,240,26,.20); --bg-grad-1: rgba(0,212,255,.12); --bg-grad-2: rgba(158,240,26,.10); --grid-dot: rgba(255,255,255,.05); --grid-opacity: .12; --overlay: rgba(0,0,0,.60); } /* Light theme */ html[data-theme="light"]{ --bg0:#f6f7fb; --bg1:#edf0f7; --card: rgba(10,12,16,.04); --card2: rgba(10,12,16,.06); --border: rgba(10,12,16,.10); --border2: rgba(10,12,16,.16); --text: rgba(10,12,16,.92); --muted: rgba(10,12,16,.64); --muted2: rgba(10,12,16,.45); --accent:#2f7dff; --accent2:#20c997; --shadow: 0 18px 55px rgba(10,12,16,.14); --shadow2: 0 10px 28px rgba(10,12,16,.12); --ring: 0 0 0 3px rgba(47,125,255,.18); --bg-grad-1: rgba(47,125,255,.10); --bg-grad-2: rgba(32,201,151,.10); --grid-dot: rgba(10,12,16,.06); --grid-opacity: .10; --overlay: rgba(10,12,16,.35); } /* FIX: Tailwind text colors w trybie jasnym (żeby nie były białe) */ html[data-theme="light"] .text-white, html[data-theme="light"] .text-zinc-50, html[data-theme="light"] .text-zinc-100, html[data-theme="light"] .text-zinc-200, html[data-theme="light"] .text-zinc-300 { color: var(--text) !important; } /* Fix dla przycisków/linków z Tailwindem (często mają text-zinc-200/300) */ html[data-theme="light"] button, html[data-theme="light"] a { color: var(--text); } /* Opcjonalnie: placeholder w wyszukiwarce w light */ html[data-theme="light"] #q::placeholder{ color: var(--muted2); } /* ========================= Base ========================= */ html, body{ background: radial-gradient(1200px 600px at 15% 0%, var(--bg-grad-1), transparent 55%), radial-gradient(900px 550px at 85% 10%, var(--bg-grad-2), transparent 60%), linear-gradient(180deg, var(--bg0), var(--bg1)); color: var(--text); } body::before{ content:""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 1px); background-size: 26px 26px; opacity: var(--grid-opacity); mix-blend-mode: overlay; } /* Teksty Tailwindowe dopasowane do motywu */ .text-zinc-400{ color: var(--muted) !important; } .text-zinc-500{ color: var(--muted2) !important; } /* Linki */ a{ text-decoration-thickness: .08em; text-underline-offset: .18em; } h1{ letter-spacing: -0.02em; text-shadow: 0 0 32px color-mix(in oklab, var(--accent) 18%, transparent); } /* ========================= Controls ========================= */ #q{ border-color: var(--border) !important; background: color-mix(in oklab, var(--card) 60%, transparent) !important; backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--text) 6%, transparent); } #q:focus{ border-color: color-mix(in oklab, var(--accent) 55%, transparent) !important; box-shadow: var(--ring), inset 0 1px 0 color-mix(in oklab, var(--text) 7%, transparent); } /* przycisk przełącznika */ #themeToggle{ border-color: var(--border) !important; background: color-mix(in oklab, var(--card) 60%, transparent) !important; color: var(--text) !important; backdrop-filter: blur(10px); } #themeToggle:hover{ border-color: var(--border2) !important; } /* Tagi */ .tag-btn{ border-color: var(--border) !important; background: color-mix(in oklab, var(--card) 55%, transparent) !important; backdrop-filter: blur(10px); transition: transform .12s ease, border-color .12s ease, background .12s ease; color: var(--text) !important; } .tag-btn:hover{ border-color: var(--border2) !important; background: color-mix(in oklab, var(--card2) 70%, transparent) !important; transform: translateY(-1px); } .tag-btn.ring-2{ box-shadow: var(--ring) !important; border-color: color-mix(in oklab, var(--accent) 55%, transparent) !important; } /* ========================= Cards ========================= */ .card{ position: relative; border-color: var(--border) !important; background: linear-gradient(180deg, color-mix(in oklab, var(--card2) 85%, transparent), color-mix(in oklab, var(--card) 70%, transparent)) !important; backdrop-filter: blur(14px); box-shadow: var(--shadow2); overflow: hidden; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; } .card::before{ content:""; position:absolute; inset:-1px; border-radius: 1rem; padding: 1px; background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 28%, transparent), color-mix(in oklab, var(--accent2) 22%, transparent), color-mix(in oklab, var(--text) 10%, transparent) ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .35; pointer-events:none; } .card:hover{ border-color: var(--border2) !important; transform: translateY(-2px); box-shadow: var(--shadow); } .card[data-featured="1"]{ box-shadow: var(--shadow); } .card[data-featured="1"]::after{ content:""; position:absolute; left:0; top:0; height: 3px; width: 100%; background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 85%, transparent), color-mix(in oklab, var(--accent2) 75%, transparent) ); opacity: .95; } /* Link “www…” i buttony w kartach */ .card a[href^="http"], .card button{ border-color: var(--border) !important; background: color-mix(in oklab, var(--card) 65%, transparent) !important; transition: transform .12s ease, border-color .12s ease, background .12s ease; } .card a[href^="http"]:hover, .card button:hover{ border-color: color-mix(in oklab, var(--accent) 45%, transparent) !important; background: color-mix(in oklab, var(--card2) 70%, transparent) !important; transform: translateY(-1px); } .card .js-open:focus{ outline: none; box-shadow: var(--ring); border-radius: .5rem; } /* Tag chips */ .card .mt-4 span{ border-color: color-mix(in oklab, var(--text) 12%, transparent) !important; background: color-mix(in oklab, var(--card) 55%, transparent) !important; } /* ========================= Modal ========================= */ #modal{ background: color-mix(in oklab, var(--overlay) 100%, transparent) !important; backdrop-filter: blur(10px); } #modal > div{ border-color: var(--border) !important; background: color-mix(in oklab, var(--bg1) 70%, transparent) !important; box-shadow: 0 30px 90px rgba(0,0,0,.35); } #mOpen, #mClose{ border-color: var(--border) !important; background: color-mix(in oklab, var(--card) 70%, transparent) !important; color: var(--text) !important; } #mOpen:hover, #mClose:hover{ border-color: color-mix(in oklab, var(--accent) 45%, transparent) !important; background: color-mix(in oklab, var(--card2) 70%, transparent) !important; } /* Selection + scrollbar */ ::selection{ background: color-mix(in oklab, var(--accent) 25%, transparent); } ::-webkit-scrollbar{ width: 10px; } ::-webkit-scrollbar-track{ background: color-mix(in oklab, var(--card) 55%, transparent); } ::-webkit-scrollbar-thumb{ background: color-mix(in oklab, var(--text) 18%, transparent); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover{ background: color-mix(in oklab, var(--text) 26%, transparent); } /* FIX: badge "featured" — czytelny w obu motywach */ .card[data-featured="1"] > div > span{ border-color: color-mix(in oklab, var(--accent) 45%, transparent) !important; background: color-mix(in oklab, var(--accent) 18%, transparent) !important; color: var(--text) !important; } /* Dodatkowe wzmocnienie dla light (żeby nie zlewał się z tłem) */ html[data-theme="light"] .card[data-featured="1"] > div > span{ background: color-mix(in oklab, var(--accent) 22%, white) !important; border-color: color-mix(in oklab, var(--accent) 55%, transparent) !important; color: rgba(10,12,16,.92) !important; } /* Modal tags — pill style (ładne i czytelne w obu motywach) */ #modal #mTags span{ border-color: color-mix(in oklab, var(--accent) 35%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklab, var(--accent) 16%, transparent), color-mix(in oklab, var(--accent2) 10%, transparent) ) !important; color: var(--text) !important; box-shadow: inset 0 1px 0 color-mix(in oklab, var(--text) 10%, transparent); } /* Light: jaśniejsze tło + ciemny tekst */ html[data-theme="light"] #modal #mTags span{ border-color: color-mix(in oklab, var(--accent) 45%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklab, white 86%, var(--accent) 10%), color-mix(in oklab, white 86%, var(--accent2) 10%) ) !important; color: rgba(10,12,16,.92) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); } /* Intro box */ .intro{ border-color: var(--border) !important; background: linear-gradient( 180deg, color-mix(in oklab, var(--card2) 75%, transparent), color-mix(in oklab, var(--card) 65%, transparent) ) !important; backdrop-filter: blur(12px); box-shadow: var(--shadow2); }