/* TLEN.APP — system skórek (motywów) Zasada: cała strona używa WYŁĄCZNIE odcieni blue-* z Tailwinda jako koloru marki. Dzięki temu przełączenie skórki = nadpisanie tych klas przez atrybut [data-theme] na , bez ingerencji w markup poszczególnych podstron. Motyw "default" (Niebieski) nie ma atrybutu. */ [data-theme="green"] { --brand: #16a34a; --brand-dark: #15803d; --brand-light: #f0fdf4; --brand-100: #dcfce7; --brand-300: #86efac; } [data-theme="purple"] { --brand: #7c3aed; --brand-dark: #6d28d9; --brand-light: #f5f3ff; --brand-100: #ede9fe; --brand-300: #c4b5fd; } [data-theme="dark"] { --brand: #3b82f6; --brand-dark: #2563eb; --brand-light: #16233b; --brand-100: #1e3a5f; --brand-300: #60a5fa; } [data-theme="fioletowy-ai"] { --brand: #a855f7; --brand-dark: #9333ea; --brand-light: rgba(168, 85, 247, .12); --brand-100: rgba(168, 85, 247, .18); --brand-300: #c4b5fd; } [data-theme="szklisty"] { --brand: #38bdf8; --brand-dark: #0ea5e9; --brand-light: rgba(56, 189, 248, .12); --brand-100: rgba(56, 189, 248, .18); --brand-300: #7dd3fc; } [data-theme="pandora"] { --brand: #6366f1; --brand-dark: #4f46e5; --brand-light: rgba(99, 102, 241, .08); --brand-100: rgba(99, 102, 241, .14); --brand-300: #a5b4fc; } /* --- Nadpisania koloru marki (wszystkie skórki poza domyślną) --- */ [data-theme] .bg-blue-600 { background-color: var(--brand) !important; } [data-theme] .hover\:bg-blue-700:hover { background-color: var(--brand-dark) !important; } [data-theme] .text-blue-600 { color: var(--brand) !important; } [data-theme] .text-blue-700 { color: var(--brand-dark) !important; } [data-theme] .border-blue-600 { border-color: var(--brand) !important; } [data-theme] .bg-blue-50 { background-color: var(--brand-light) !important; } [data-theme] .bg-blue-100 { background-color: var(--brand-100) !important; } [data-theme] .border-blue-100 { border-color: var(--brand-100) !important; } [data-theme] .text-blue-300 { color: var(--brand-300) !important; } [data-theme] .border-blue-300 { border-color: var(--brand-300) !important; } [data-theme] .hover\:border-blue-300:hover { border-color: var(--brand-300) !important; } [data-theme] .hover\:bg-blue-50:hover { background-color: var(--brand-light) !important; } [data-theme] .hover\:bg-blue-50\/50:hover { background-color: var(--brand-light) !important; } [data-theme] .hover\:text-blue-600:hover { color: var(--brand) !important; } [data-theme] .focus\:ring-blue-500:focus { --tw-ring-color: var(--brand) !important; } [data-theme] .from-blue-50 { --tw-gradient-from: var(--brand-light) var(--tw-gradient-from-position) !important; } [data-theme] .bg-amber-100.text-amber-700 { background-color: var(--brand-100) !important; color: var(--brand-dark) !important; } /* --- Tryb ciemny: dodatkowo nadpisuje powierzchnie i typografię --- */ [data-theme="dark"] body { background-color: #0b1220 !important; color: #e2e8f0; } [data-theme="dark"] header.bg-white, [data-theme="dark"] .bg-white { background-color: #111827 !important; } [data-theme="dark"] .bg-gray-50 { background-color: #0b1220 !important; } [data-theme="dark"] .bg-gray-100 { background-color: #1e293b !important; } [data-theme="dark"] .bg-gray-900 { background-color: #030712 !important; } [data-theme="dark"] .border-gray-200, [data-theme="dark"] .border-gray-100 { border-color: #1f2937 !important; } [data-theme="dark"] .text-gray-900 { color: #f1f5f9 !important; } [data-theme="dark"] .text-gray-800 { color: #e2e8f0 !important; } [data-theme="dark"] .text-gray-700 { color: #cbd5e1 !important; } [data-theme="dark"] .text-gray-600 { color: #94a3b8 !important; } [data-theme="dark"] .text-gray-500 { color: #64748b !important; } [data-theme="dark"] .text-gray-400 { color: #475569 !important; } [data-theme="dark"] .hover\:bg-gray-50:hover, [data-theme="dark"] .hover\:bg-gray-100:hover { background-color: #1e293b !important; } [data-theme="dark"] .placeholder-gray-500::placeholder { color: #64748b !important; } [data-theme="dark"] .divide-gray-100 > * + * { border-color: #1f2937 !important; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #0b1220; } /* --- Fioletowy AI: ciemna, neonowa skórka inspirowana appkami generatywnego AI --- */ [data-theme="fioletowy-ai"] body { background-color: #0b0518; background-image: radial-gradient(700px circle at 6% -5%, rgba(168, 85, 247, .35), transparent 60%), radial-gradient(600px circle at 105% 10%, rgba(99, 102, 241, .30), transparent 55%), radial-gradient(900px circle at 50% 110%, rgba(236, 72, 153, .16), transparent 60%), linear-gradient(180deg, #0b0518 0%, #120a2e 100%); background-attachment: fixed; color: #e9e4f7; } [data-theme="fioletowy-ai"] header.bg-white, [data-theme="fioletowy-ai"] .bg-white { background-color: rgba(24, 14, 46, .65) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: rgba(168, 85, 247, .25) !important; } /* Dropdowny (menu użytkownika, "Dodaj") — tło pełne zamiast szklanego: backdrop-filter w połączeniu z animacją opacity/transform tych paneli potrafiło renderować się jako jasna plama zamiast fioletowego szkła */ [data-theme="fioletowy-ai"] [data-dropdown-panel].bg-white { background-color: #1c1136 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Okna modalne (Nowy wątek, Odpowiedz, kontakt z firmą) — ten sam błąd renderowania co w dropdownach, więc ta sama poprawka: tło pełne zamiast szklanego. */ [data-theme="fioletowy-ai"] .bg-white.rounded-2xl.shadow-xl { background-color: #1c1136 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Górna fala nad stopką (zwykle biała, wtapia się w białą stopkę) — tutaj stopka jest ciemna, więc fala dostaje ten sam ciemny fiolet co inne pełne powierzchnie. */ [data-theme="fioletowy-ai"] .pd-wave-3 { fill: #1c1136; } [data-theme="fioletowy-ai"] .bg-gray-50 { background-color: transparent !important; } [data-theme="fioletowy-ai"] .bg-gray-100 { background-color: rgba(168, 85, 247, .12) !important; } [data-theme="fioletowy-ai"] .bg-gray-200 { background-color: rgba(168, 85, 247, .18) !important; } [data-theme="fioletowy-ai"] .bg-gray-900 { background-color: #0b0518 !important; } [data-theme="fioletowy-ai"] .border-gray-200, [data-theme="fioletowy-ai"] .border-gray-100 { border-color: rgba(168, 85, 247, .22) !important; } [data-theme="fioletowy-ai"] .divide-gray-100 > * + * { border-color: rgba(168, 85, 247, .18) !important; } /* Skala szarości: celowo mniej nasycona (bliżej neutralnego szarego niż fioletu), żeby drobny tekst (znaczniki czasu, opisy) miał wystarczający kontrast na ciemnym tle */ [data-theme="fioletowy-ai"] .text-gray-900 { color: #f7f6fb !important; } [data-theme="fioletowy-ai"] .text-gray-800 { color: #e6e4ee !important; } [data-theme="fioletowy-ai"] .text-gray-700 { color: #d1cee0 !important; } [data-theme="fioletowy-ai"] .text-gray-600 { color: #b6b2c8 !important; } [data-theme="fioletowy-ai"] .text-gray-500 { color: #a19dba !important; } [data-theme="fioletowy-ai"] .text-gray-400 { color: #8d89a8 !important; } [data-theme="fioletowy-ai"] .hover\:bg-gray-50:hover, [data-theme="fioletowy-ai"] .hover\:bg-gray-100:hover { background-color: rgba(168, 85, 247, .15) !important; } [data-theme="fioletowy-ai"] .placeholder-gray-500::placeholder { color: #8d89a8 !important; } [data-theme="fioletowy-ai"] ::-webkit-scrollbar-track { background: #0b0518; } [data-theme="fioletowy-ai"] .ring-white { --tw-ring-color: rgba(168, 85, 247, .35) !important; } /* Gradientowe akcenty (fiolet → indygo → róż) zamiast płaskiego koloru marki */ [data-theme="fioletowy-ai"] .bg-blue-600, [data-theme="fioletowy-ai"] .bg-blue-700 { background-image: linear-gradient(135deg, #a855f7, #6366f1 55%, #ec4899) !important; background-color: transparent !important; border-color: transparent !important; box-shadow: 0 4px 20px rgba(168, 85, 247, .45); } [data-theme="fioletowy-ai"] .hover\:bg-blue-700:hover { filter: brightness(1.12); box-shadow: 0 6px 26px rgba(168, 85, 247, .6); } [data-theme="fioletowy-ai"] .text-blue-600, [data-theme="fioletowy-ai"] .text-blue-700, [data-theme="fioletowy-ai"] .hover\:text-blue-600:hover { color: #c4a3ff !important; } [data-theme="fioletowy-ai"] .border-blue-600, [data-theme="fioletowy-ai"] .border-blue-300, [data-theme="fioletowy-ai"] .hover\:border-blue-300:hover { border-color: #a855f7 !important; } [data-theme="fioletowy-ai"] .bg-blue-50, [data-theme="fioletowy-ai"] .bg-blue-100 { background-color: rgba(168, 85, 247, .16) !important; } [data-theme="fioletowy-ai"] .border-blue-100 { border-color: rgba(168, 85, 247, .25) !important; } [data-theme="fioletowy-ai"] .focus\:ring-blue-500:focus { --tw-ring-color: #a855f7 !important; } [data-theme="fioletowy-ai"] .to-white { --tw-gradient-to: rgba(24, 14, 46, .3) !important; } /* Odcień indygo (używany m.in. w sekcji Przejazdy) — ten sam zabieg co dla niebieskiego, żeby przyciski i karty "Szukam przejazdu" pasowały do reszty skórki */ [data-theme="fioletowy-ai"] .bg-indigo-600, [data-theme="fioletowy-ai"] .hover\:bg-indigo-700:hover { background-image: linear-gradient(135deg, #a855f7, #6366f1 55%, #ec4899) !important; background-color: transparent !important; box-shadow: 0 4px 20px rgba(168, 85, 247, .45); } [data-theme="fioletowy-ai"] .bg-indigo-50, [data-theme="fioletowy-ai"] .bg-indigo-100 { background-color: rgba(168, 85, 247, .16) !important; } [data-theme="fioletowy-ai"] .border-indigo-100 { border-color: rgba(168, 85, 247, .25) !important; } [data-theme="fioletowy-ai"] .text-indigo-600, [data-theme="fioletowy-ai"] .text-indigo-700, [data-theme="fioletowy-ai"] .hover\:text-indigo-600:hover { color: #c4a3ff !important; } /* Lite przyciski (bg-white + text-blue-*) używane jako CTA na kolorowych banerach — mają zostać czytelnym, jasnym akcentem zamiast ciemnego szkła jak zwykłe karty */ [data-theme="fioletowy-ai"] .bg-white.text-blue-700, [data-theme="fioletowy-ai"] .bg-white.text-blue-600, [data-theme="fioletowy-ai"] .bg-white.text-indigo-600 { background-color: #f5eeff !important; color: #7c3aed !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); } [data-theme="fioletowy-ai"] .bg-white.text-blue-700.hover\:bg-blue-50:hover, [data-theme="fioletowy-ai"] .bg-white.text-blue-600.hover\:bg-blue-50:hover { background-color: #ffffff !important; } /* Baner powitalny — mocny gradient AI zamiast oryginalnych kolorów każdej sekcji (niebieski, zielony, cyjan, różowy, bursztynowy itd. — wszystkie ujednolicone) */ [data-theme="fioletowy-ai"] .relative.overflow-hidden.rounded-2xl.text-white { background-image: linear-gradient(120deg, #7c3aed, #a855f7 45%, #ec4899 100%) !important; } /* Wideo w tle banerów — aktywne we wszystkich skórkach. Ciemniejąca nakładka (gradient) zapewnia czytelność tekstu niezależnie od jasności klatki filmu; skórka Fioletowy AI dostaje własny, fioletowo-różowy wariant nakładki. */ .hero-video-bg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* Czysto dekoracyjne tło — bez natywnych nakładek przeglądarki (Picture-in-Picture, zdalne odtwarzanie/cast), które potrafią wyskakiwać po najechaniu kursorem. */ pointer-events: none; } .hero-video-bg::-webkit-media-controls, .hero-video-bg::-webkit-media-controls-panel, .hero-video-bg::-webkit-media-controls-overlay-play-button, .hero-video-bg::-webkit-media-controls-picture-in-picture-button, .hero-video-bg::-webkit-media-controls-start-playback-button { display: none !important; opacity: 0 !important; pointer-events: none !important; } .hero-video-overlay { display: block; position: absolute; inset: 0; background-image: linear-gradient(100deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .15) 100%); } [data-theme="fioletowy-ai"] .hero-video-overlay { background-image: linear-gradient(100deg, rgba(12, 6, 26, .82) 0%, rgba(88, 28, 135, .55) 45%, rgba(236, 72, 153, .3) 100%); } /* Cień pod tekstem w banerach z wideo — utrzymuje czytelność niezależnie od jasności klatki filmu w danym momencie (treść leży nad wideo dzięki kolejności w DOM: wideo i warstwa gradientu są wstawione jako pierwsze) */ .relative.overflow-hidden.rounded-2xl.text-white h1, .relative.overflow-hidden.rounded-2xl.text-white p { text-shadow: 0 2px 14px rgba(0, 0, 0, .55); } /* Złota odznaka (punkty, oceny, "premium") ma zostać czytelnym złotym akcentem zamiast zlewać się z fioletowym tłem po ogólnym nadpisaniu koloru marki */ [data-theme="fioletowy-ai"] .bg-amber-100.text-amber-700 { background-color: rgba(251, 191, 36, .16) !important; color: #fbbf24 !important; } /* Przyciski typu "obrys" (border+text w kolorze marki) — dodajemy delikatne tło i poświatę, bo sam cienki fioletowy obrys ginął na ciemnym tle */ [data-theme="fioletowy-ai"] .border-blue-600.text-blue-600 { background-color: rgba(168, 85, 247, .12); border-color: rgba(168, 85, 247, .7) !important; color: #d9c2ff !important; } [data-theme="fioletowy-ai"] .border-blue-600.text-blue-600.hover\:bg-blue-50:hover { background-color: rgba(168, 85, 247, .22) !important; } /* Jasne przyciski CTA (bg-white + text-*) na kolorowych banerach innych sekcji — ten sam zabieg co dla text-blue-*, żeby wszystkie CTA były czytelne i spójne */ [data-theme="fioletowy-ai"] .bg-white.text-emerald-700, [data-theme="fioletowy-ai"] .bg-white.text-indigo-700, [data-theme="fioletowy-ai"] .bg-white.text-rose-700, [data-theme="fioletowy-ai"] .bg-white.text-amber-700, [data-theme="fioletowy-ai"] .bg-white.text-cyan-700, [data-theme="fioletowy-ai"] .bg-white.text-sky-700 { background-color: #f5eeff !important; color: #7c3aed !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); } [data-theme="fioletowy-ai"] .bg-white.text-emerald-700.hover\:bg-emerald-50:hover, [data-theme="fioletowy-ai"] .bg-white.text-indigo-700.hover\:bg-indigo-50:hover, [data-theme="fioletowy-ai"] .bg-white.text-rose-700.hover\:bg-rose-50:hover, [data-theme="fioletowy-ai"] .bg-white.text-amber-700.hover\:bg-amber-50:hover, [data-theme="fioletowy-ai"] .bg-white.text-cyan-700.hover\:bg-cyan-50:hover, [data-theme="fioletowy-ai"] .bg-white.text-sky-700.hover\:bg-sky-50:hover { background-color: #ffffff !important; } /* Świecąca obwódka na kartach przy hover, jak w referencyjnych appkach AI */ [data-theme="fioletowy-ai"] .card-hover:hover { box-shadow: 0 0 0 1px rgba(168, 85, 247, .5), 0 10px 30px rgba(168, 85, 247, .25) !important; } [data-theme="fioletowy-ai"] a.hover\:border-blue-300:hover { box-shadow: 0 0 0 1px rgba(168, 85, 247, .4), 0 8px 24px rgba(168, 85, 247, .2); } /* --- Szklisty: stonowana skórka "liquid glass" inspirowana appkami smart home (izometryczne domki z poświatą, szklane panele, blur, miękkie zaokrąglenia) --- */ [data-theme="szklisty"] body { background-color: #12141c; background-image: radial-gradient(800px circle at 6% -8%, rgba(56, 189, 248, .22), transparent 60%), radial-gradient(650px circle at 105% 6%, rgba(129, 140, 248, .16), transparent 55%), radial-gradient(900px circle at 50% 112%, rgba(45, 212, 191, .12), transparent 60%), linear-gradient(180deg, #12141c 0%, #191d29 100%); background-attachment: fixed; color: #e7ebf3; } [data-theme="szklisty"] header.bg-white, [data-theme="szklisty"] .bg-white { background-color: rgba(255, 255, 255, .06) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-color: rgba(255, 255, 255, .14) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); } /* Dropdowny — tło pełne zamiast szklanego (ten sam błąd renderowania co w Fioletowy AI: backdrop-filter + animacja opacity/transform potrafi dać jasną plamę zamiast szkła) */ [data-theme="szklisty"] [data-dropdown-panel].bg-white { background-color: #1b1f2c !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Okna modalne (Nowy wątek, Odpowiedz, kontakt z firmą) — ten sam błąd renderowania co w dropdownach, więc ta sama poprawka: tło pełne zamiast szklanego. */ [data-theme="szklisty"] .bg-white.rounded-2xl.shadow-xl { background-color: #1b1f2c !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } [data-theme="szklisty"] .bg-gray-50 { background-color: transparent !important; } [data-theme="szklisty"] .bg-gray-100 { background-color: rgba(255, 255, 255, .08) !important; } [data-theme="szklisty"] .bg-gray-200 { background-color: rgba(255, 255, 255, .14) !important; } [data-theme="szklisty"] .bg-gray-900 { background-color: #0d0f16 !important; } [data-theme="szklisty"] .border-gray-200, [data-theme="szklisty"] .border-gray-100 { border-color: rgba(255, 255, 255, .12) !important; } [data-theme="szklisty"] .divide-gray-100 > * + * { border-color: rgba(255, 255, 255, .1) !important; } /* Skala szarości: chłodny, lekko niebieskawy odcień zamiast czystej szarości, żeby pasował do szklano-niebieskiej palety i zachował czytelność na ciemnym tle */ [data-theme="szklisty"] .text-gray-900 { color: #f3f6fb !important; } [data-theme="szklisty"] .text-gray-800 { color: #e3e8f1 !important; } [data-theme="szklisty"] .text-gray-700 { color: #cbd3e0 !important; } [data-theme="szklisty"] .text-gray-600 { color: #a9b3c7 !important; } [data-theme="szklisty"] .text-gray-500 { color: #8b95ac !important; } [data-theme="szklisty"] .text-gray-400 { color: #717c95 !important; } [data-theme="szklisty"] .hover\:bg-gray-50:hover, [data-theme="szklisty"] .hover\:bg-gray-100:hover { background-color: rgba(255, 255, 255, .09) !important; } [data-theme="szklisty"] .placeholder-gray-500::placeholder { color: #717c95 !important; } [data-theme="szklisty"] ::-webkit-scrollbar-track { background: #12141c; } [data-theme="szklisty"] .ring-white { --tw-ring-color: rgba(56, 189, 248, .35) !important; } /* Główny akcent — miękki "szklany" przycisk: półprzezroczysty gradient błękit → turkus, blur, delikatna górna poświata i świecący cień zamiast płaskiego koloru */ [data-theme="szklisty"] .bg-blue-600, [data-theme="szklisty"] .bg-blue-700 { background-image: linear-gradient(135deg, rgba(56, 189, 248, .9), rgba(99, 102, 241, .85) 55%, rgba(45, 212, 191, .85)) !important; background-color: transparent !important; border-color: rgba(255, 255, 255, .25) !important; box-shadow: 0 4px 22px rgba(56, 189, 248, .35), inset 0 1px 0 rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } [data-theme="szklisty"] .hover\:bg-blue-700:hover { filter: brightness(1.1); box-shadow: 0 6px 28px rgba(56, 189, 248, .5), inset 0 1px 0 rgba(255, 255, 255, .35); } [data-theme="szklisty"] .text-blue-600, [data-theme="szklisty"] .text-blue-700, [data-theme="szklisty"] .hover\:text-blue-600:hover { color: #7dd3fc !important; } [data-theme="szklisty"] .border-blue-600, [data-theme="szklisty"] .border-blue-300, [data-theme="szklisty"] .hover\:border-blue-300:hover { border-color: #38bdf8 !important; } [data-theme="szklisty"] .bg-blue-50, [data-theme="szklisty"] .bg-blue-100 { background-color: rgba(56, 189, 248, .14) !important; } [data-theme="szklisty"] .border-blue-100 { border-color: rgba(56, 189, 248, .25) !important; } [data-theme="szklisty"] .focus\:ring-blue-500:focus { --tw-ring-color: #38bdf8 !important; } [data-theme="szklisty"] .to-white { --tw-gradient-to: rgba(18, 20, 28, .3) !important; } /* Indygo (m.in. sekcja Przejazdy) — ten sam szklany zabieg co dla niebieskiego */ [data-theme="szklisty"] .bg-indigo-600, [data-theme="szklisty"] .hover\:bg-indigo-700:hover { background-image: linear-gradient(135deg, rgba(56, 189, 248, .9), rgba(99, 102, 241, .85) 55%, rgba(45, 212, 191, .85)) !important; background-color: transparent !important; box-shadow: 0 4px 22px rgba(56, 189, 248, .35), inset 0 1px 0 rgba(255, 255, 255, .3); } [data-theme="szklisty"] .bg-indigo-50, [data-theme="szklisty"] .bg-indigo-100 { background-color: rgba(56, 189, 248, .14) !important; } [data-theme="szklisty"] .border-indigo-100 { border-color: rgba(56, 189, 248, .25) !important; } [data-theme="szklisty"] .text-indigo-600, [data-theme="szklisty"] .text-indigo-700, [data-theme="szklisty"] .hover\:text-indigo-600:hover { color: #7dd3fc !important; } /* Jasne przyciski CTA (bg-white + text-*) na kolorowych banerach — zostają czytelnym, kremowo-białym szkłem (jak jasne panele/pigułki w referencyjnych appkach smart home) */ [data-theme="szklisty"] .bg-white.text-blue-700, [data-theme="szklisty"] .bg-white.text-blue-600, [data-theme="szklisty"] .bg-white.text-indigo-600, [data-theme="szklisty"] .bg-white.text-emerald-700, [data-theme="szklisty"] .bg-white.text-rose-700, [data-theme="szklisty"] .bg-white.text-amber-700, [data-theme="szklisty"] .bg-white.text-cyan-700, [data-theme="szklisty"] .bg-white.text-sky-700 { background-color: rgba(255, 255, 255, .92) !important; color: #0ea5e9 !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 4px 16px rgba(0, 0, 0, .28); } [data-theme="szklisty"] .bg-white.text-blue-700.hover\:bg-blue-50:hover, [data-theme="szklisty"] .bg-white.text-blue-600.hover\:bg-blue-50:hover, [data-theme="szklisty"] .bg-white.text-emerald-700.hover\:bg-emerald-50:hover, [data-theme="szklisty"] .bg-white.text-indigo-700.hover\:bg-indigo-50:hover, [data-theme="szklisty"] .bg-white.text-rose-700.hover\:bg-rose-50:hover, [data-theme="szklisty"] .bg-white.text-amber-700.hover\:bg-amber-50:hover, [data-theme="szklisty"] .bg-white.text-cyan-700.hover\:bg-cyan-50:hover, [data-theme="szklisty"] .bg-white.text-sky-700.hover\:bg-sky-50:hover { background-color: #ffffff !important; } /* Baner powitalny — szklany gradient błękit → indygo → turkus zamiast oryginalnych barw sekcji */ [data-theme="szklisty"] .relative.overflow-hidden.rounded-2xl.text-white { background-image: linear-gradient(120deg, #0ea5e9, #6366f1 50%, #2dd4bf 100%) !important; } /* Dekoracyjne kółka w rogach banerów — przyciemniona poświata zamiast płaskiej bieli, nawiązanie do świecącego obrysu izometrycznych domków z materiałów referencyjnych */ [data-theme="szklisty"] .bg-white\/10 { background-color: rgba(125, 211, 252, .3) !important; filter: blur(2px); } /* Złota odznaka (punkty, oceny, "premium") — czytelny złoty akcent na szkle */ [data-theme="szklisty"] .bg-amber-100.text-amber-700 { background-color: rgba(251, 191, 36, .16) !important; color: #fbbf24 !important; } /* Przyciski typu "obrys" — delikatne szklane tło i poświata zamiast cienkiego obrysu, który ginął na ciemnym tle */ [data-theme="szklisty"] .border-blue-600.text-blue-600 { background-color: rgba(56, 189, 248, .1); border-color: rgba(56, 189, 248, .7) !important; color: #bee7fd !important; } [data-theme="szklisty"] .border-blue-600.text-blue-600.hover\:bg-blue-50:hover { background-color: rgba(56, 189, 248, .2) !important; } /* Świecąca obwódka na kartach przy hover */ [data-theme="szklisty"] .card-hover:hover { box-shadow: 0 0 0 1px rgba(56, 189, 248, .5), 0 10px 30px rgba(56, 189, 248, .22) !important; } [data-theme="szklisty"] a.hover\:border-blue-300:hover { box-shadow: 0 0 0 1px rgba(56, 189, 248, .4), 0 8px 24px rgba(56, 189, 248, .18); } /* --- Pandora: jasna, szklista skórka — podświetlane moduły, blur pod oknami modalnymi. W przeciwieństwie do Fioletowy AI / Szklisty (ciemne tło + jasny tekst), tutaj tło pozostaje jasne, więc domyślna skala text-gray-* Tailwinda jest już czytelna i NIE wymaga nadpisania — nadpisujemy tylko akcent marki i powierzchnie kart. */ [data-theme="pandora"] body { background-color: #f3f5fb; background-image: radial-gradient(700px circle at 8% -5%, rgba(99, 102, 241, .12), transparent 60%), radial-gradient(650px circle at 105% 8%, rgba(56, 189, 248, .12), transparent 55%), radial-gradient(800px circle at 50% 118%, rgba(236, 72, 153, .08), transparent 60%), linear-gradient(180deg, #f3f5fb 0%, #eef1f9 100%); background-attachment: fixed; } /* Szklane, "podświetlane" moduły — półprzezroczysta biel + blur + delikatna górna poświata i miękki, kolorowy cień zamiast płaskiej białej karty */ [data-theme="pandora"] header.bg-white, [data-theme="pandora"] .bg-white { background-color: rgba(255, 255, 255, .7) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-color: rgba(99, 102, 241, .14) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 30px -14px rgba(99, 102, 241, .22); } /* Dropdowny — tło pełne (ten sam błąd renderowania backdrop-filter + transition opacity/transform, co w pozostałych szklanych skórkach) */ [data-theme="pandora"] [data-dropdown-panel].bg-white { background-color: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 12px 32px rgba(99, 102, 241, .18); } /* Okna modalne (Nowy wątek, Odpowiedz, kontakt z firmą) — ten sam błąd renderowania co w dropdownach, więc ta sama poprawka: tło pełne zamiast szklanego. */ [data-theme="pandora"] .bg-white.rounded-2xl.shadow-xl { background-color: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 12px 32px rgba(99, 102, 241, .18); } [data-theme="pandora"] .bg-gray-50 { background-color: rgba(99, 102, 241, .05) !important; } [data-theme="pandora"] .bg-gray-100 { background-color: rgba(99, 102, 241, .09) !important; } [data-theme="pandora"] .bg-gray-200 { background-color: rgba(99, 102, 241, .14) !important; } [data-theme="pandora"] .border-gray-200, [data-theme="pandora"] .border-gray-100 { border-color: rgba(99, 102, 241, .14) !important; } [data-theme="pandora"] .divide-gray-100 > * + * { border-color: rgba(99, 102, 241, .12) !important; } [data-theme="pandora"] ::-webkit-scrollbar-track { background: #eef1f9; } /* Główny akcent — szklany gradientowy przycisk indygo → błękit */ [data-theme="pandora"] .bg-blue-600, [data-theme="pandora"] .bg-blue-700 { background-image: linear-gradient(135deg, #818cf8, #6366f1 55%, #38bdf8) !important; background-color: transparent !important; border-color: rgba(255, 255, 255, .4) !important; box-shadow: 0 4px 20px rgba(99, 102, 241, .35), inset 0 1px 0 rgba(255, 255, 255, .35); } [data-theme="pandora"] .hover\:bg-blue-700:hover { filter: brightness(1.06); box-shadow: 0 6px 26px rgba(99, 102, 241, .48), inset 0 1px 0 rgba(255, 255, 255, .4); } [data-theme="pandora"] .text-blue-600, [data-theme="pandora"] .text-blue-700, [data-theme="pandora"] .hover\:text-blue-600:hover { color: #4f46e5 !important; } [data-theme="pandora"] .border-blue-600, [data-theme="pandora"] .border-blue-300, [data-theme="pandora"] .hover\:border-blue-300:hover { border-color: #6366f1 !important; } [data-theme="pandora"] .bg-blue-50, [data-theme="pandora"] .bg-blue-100 { background-color: rgba(99, 102, 241, .1) !important; } [data-theme="pandora"] .border-blue-100 { border-color: rgba(99, 102, 241, .2) !important; } [data-theme="pandora"] .focus\:ring-blue-500:focus { --tw-ring-color: #6366f1 !important; } /* Indygo (m.in. sekcja Przejazdy) — ten sam zabieg co dla niebieskiego */ [data-theme="pandora"] .bg-indigo-600, [data-theme="pandora"] .hover\:bg-indigo-700:hover { background-image: linear-gradient(135deg, #818cf8, #6366f1 55%, #38bdf8) !important; background-color: transparent !important; box-shadow: 0 4px 20px rgba(99, 102, 241, .35), inset 0 1px 0 rgba(255, 255, 255, .35); } [data-theme="pandora"] .bg-indigo-50, [data-theme="pandora"] .bg-indigo-100 { background-color: rgba(99, 102, 241, .1) !important; } [data-theme="pandora"] .border-indigo-100 { border-color: rgba(99, 102, 241, .2) !important; } [data-theme="pandora"] .text-indigo-600, [data-theme="pandora"] .text-indigo-700, [data-theme="pandora"] .hover\:text-indigo-600:hover { color: #4f46e5 !important; } /* Baner powitalny — ten sam szklany gradient indygo → błękit zamiast oryginalnych barw sekcji */ [data-theme="pandora"] .relative.overflow-hidden.rounded-2xl.text-white { background-image: linear-gradient(120deg, #6366f1, #818cf8 50%, #38bdf8 100%) !important; } /* Przyciski typu "obrys" — delikatne szklane tło zamiast cienkiego obrysu */ [data-theme="pandora"] .border-blue-600.text-blue-600 { background-color: rgba(99, 102, 241, .08); border-color: rgba(99, 102, 241, .55) !important; color: #4f46e5 !important; } [data-theme="pandora"] .border-blue-600.text-blue-600.hover\:bg-blue-50:hover { background-color: rgba(99, 102, 241, .14) !important; } /* "Podświetlane moduły" — subtelna górna poświata + miękki kolorowy cień na kartach treści przy hover, jak podświetlone od tyłu panele w appkach referencyjnych */ [data-theme="pandora"] .card-hover:hover { box-shadow: 0 0 0 1px rgba(99, 102, 241, .3), 0 16px 36px rgba(99, 102, 241, .18) !important; } [data-theme="pandora"] a.hover\:border-blue-300:hover { box-shadow: 0 0 0 1px rgba(99, 102, 241, .25), 0 10px 26px rgba(99, 102, 241, .14); } /* Podgląd próbki koloru w panelu "Wygląd" */ .theme-swatch { width: 2rem; height: 2rem; border-radius: 9999px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }