/* ===================================================================== MOTYW JASNY / CIEMNY --------------------------------------------------------------------- Projekt jest „ciemny z natury" (kolory zaszyte w klasach Tailwind). Zamiast przepisywać ~330 klas w komponentach, nakładamy warstwę nadpisań aktywną tylko gdy . Selektor `html[data-theme="light"] .klasa` ma wyższą specyficzność (0,1,1) niż goła klasa Tailwind (0,1,0), więc wygrywa bez !important. Akcent żółty (yellow-400) pozostaje wspólny dla obu motywów. Sekcja HERO jest „ciemną wyspą" (data-hero) — tekst leży na zdjęciu, więc w jasnym motywie zostaje ciemna, żeby zachować czytelność. Ten plik jest samowystarczalny — przy porcie na motyw WordPress wystarczy dołączyć go obok kodu szablonu i dodać przełącznik ustawiający atrybut data-theme na . ===================================================================== */ html[data-theme="light"] { color-scheme: light; } /* Tło obszaru poza #root (np. overscroll) */ html[data-theme="light"], html[data-theme="light"] body { background-color: #f4f4f5; } /* ------------------------------------------------------------------ */ /* POWIERZCHNIE (tła) */ /* ------------------------------------------------------------------ */ html[data-theme="light"] .bg-\[\#0a0a0a\] { background-color: #f4f4f5; } html[data-theme="light"] .bg-\[\#0a0a0a\]\/90 { background-color: rgb(255 255 255 / 0.9); } html[data-theme="light"] .bg-\[\#0a0a0a\]\/95 { background-color: rgb(255 255 255 / 0.95); } html[data-theme="light"] .bg-\[\#0d0d0d\] { background-color: #ffffff; } html[data-theme="light"] .bg-black { background-color: #ffffff; } /* Plakietka-overlay na mapie w stopce (bg-black/95) zostaje ciemna w obu motywach — to nakładka na mapę. Bez tego tekst (text-white -> ciemny) znikał na czarnym tle. */ html[data-theme="light"] .bg-black\/95 { background-color: rgb(0 0 0 / 0.95); } html[data-theme="light"] .bg-black\/95.text-white { color: #ffffff; } html[data-theme="light"] .bg-black\/95 .border-white\/10, html[data-theme="light"] .bg-black\/95.border-white\/10 { border-color: rgb(255 255 255 / 0.1); } html[data-theme="light"] .bg-zinc-950 { background-color: #ffffff; } html[data-theme="light"] .bg-zinc-950\/80 { background-color: rgb(255 255 255 / 0.85); } html[data-theme="light"] .bg-zinc-900 { background-color: #ffffff; } html[data-theme="light"] .bg-zinc-900\/60 { background-color: rgb(255 255 255 / 0.6); } html[data-theme="light"] .bg-zinc-900\/40 { background-color: rgb(244 244 245 / 0.6); } html[data-theme="light"] .bg-zinc-800 { background-color: #e4e4e7; } html[data-theme="light"] .bg-zinc-800\/40 { background-color: rgb(228 228 231 / 0.5); } /* Przycisk-akcent (biały na ciemnym) → ciemny na jasnym, by zachować kontrast */ html[data-theme="light"] .bg-white.text-black { background-color: #18181b; color: #ffffff; } /* ------------------------------------------------------------------ */ /* TEKST */ /* ------------------------------------------------------------------ */ html[data-theme="light"] .text-white { color: #18181b; } html[data-theme="light"] .text-white\/90 { color: rgb(24 24 27 / 0.92); } html[data-theme="light"] .text-zinc-300 { color: #3f3f46; } html[data-theme="light"] .text-gray-300 { color: #3f3f46; } html[data-theme="light"] .text-gray-400 { color: #52525b; } html[data-theme="light"] .text-gray-500 { color: #6b7280; } html[data-theme="light"] .text-zinc-500 { color: #71717a; } html[data-theme="light"] .text-gray-600 { color: #4b5563; } /* yellow-400 / text-black zostają bez zmian (akcenty, przyciski) */ /* Placeholder w formularzach */ html[data-theme="light"] .placeholder-zinc-600::placeholder { color: #9ca3af; } /* ------------------------------------------------------------------ */ /* OBRAMOWANIA */ /* ------------------------------------------------------------------ */ html[data-theme="light"] .border-white\/5 { border-color: rgb(0 0 0 / 0.08); } html[data-theme="light"] .border-white\/10 { border-color: rgb(0 0 0 / 0.12); } html[data-theme="light"] .border-white\/15 { border-color: rgb(0 0 0 / 0.15); } html[data-theme="light"] .border-white\/20 { border-color: rgb(0 0 0 / 0.18); } html[data-theme="light"] .border-white { border-color: #18181b; } /* ------------------------------------------------------------------ */ /* GRADIENTY DEKORACYJNE (poza hero) — ciemna poświata → jasna */ /* ------------------------------------------------------------------ */ html[data-theme="light"] .from-\[\#0a0a0a\] { --tw-gradient-from: #f4f4f5; --tw-gradient-to: rgb(244 244 245 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } html[data-theme="light"] .via-\[\#0a0a0a\]\/90 { --tw-gradient-to: rgb(244 244 245 / 0); --tw-gradient-stops: var(--tw-gradient-from), rgb(244 244 245 / 0.9), var(--tw-gradient-to); } /* ------------------------------------------------------------------ */ /* HOVER — ciemne tła hover muszą zjaśnieć, inaczej ciemny tekst znika */ /* ------------------------------------------------------------------ */ html[data-theme="light"] .hover\:bg-zinc-900:hover { background-color: #ececee; } html[data-theme="light"] .hover\:bg-zinc-800:hover { background-color: #e4e4e7; } html[data-theme="light"] .hover\:bg-zinc-800\/40:hover { background-color: rgb(228 228 231 / 0.5); } /* ------------------------------------------------------------------ */ /* HERO — „ciemna wyspa": tekst na zdjęciu zostaje jasny w obu motywach. Przywracamy ciemne wartości dla WSZYSTKICH klas używanych w hero, żeby sekcja była spójnie ciemna niezależnie od motywu strony. */ /* ------------------------------------------------------------------ */ html[data-theme="light"] [data-hero] .bg-black { background-color: #000000; } html[data-theme="light"] [data-hero] .bg-\[\#0a0a0a\] { background-color: #0a0a0a; } html[data-theme="light"] [data-hero] .bg-zinc-950 { background-color: #09090b; } html[data-theme="light"] [data-hero] .bg-zinc-900 { background-color: #18181b; } html[data-theme="light"] [data-hero] .bg-zinc-800 { background-color: #27272a; } html[data-theme="light"] [data-hero] .hover\:bg-zinc-900:hover { background-color: #18181b; } html[data-theme="light"] [data-hero] .hover\:bg-zinc-800:hover { background-color: #27272a; } html[data-theme="light"] [data-hero] .text-white { color: #ffffff; } html[data-theme="light"] [data-hero] .text-zinc-300 { color: #d4d4d8; } html[data-theme="light"] [data-hero] .text-gray-300 { color: #d1d5db; } html[data-theme="light"] [data-hero] .text-gray-400 { color: #9ca3af; } html[data-theme="light"] [data-hero] .text-gray-500 { color: #6b7280; } html[data-theme="light"] [data-hero] .border-white\/5 { border-color: rgb(255 255 255 / 0.05); } html[data-theme="light"] [data-hero] .border-white\/10 { border-color: rgb(255 255 255 / 0.1); } html[data-theme="light"] [data-hero] .from-\[\#0a0a0a\] { --tw-gradient-from: #0a0a0a; --tw-gradient-to: rgb(10 10 10 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } /* Płynne przejście kolorów przy przełączaniu motywu */ html[data-theme] body, html[data-theme] .bg-\[\#0a0a0a\], html[data-theme] .bg-zinc-950, html[data-theme] .bg-zinc-900, html[data-theme] .bg-black { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } /* ===================================================================== TREŚĆ Z EDYTORA / ACF (.prose) --------------------------------------------------------------------- Motyw nie zawiera pluginu Tailwind Typography, więc klasy `prose` nie mają żadnego stylu (treść WYSIWYG/ACF wygląda jak goły HTML). Poniżej pełna typografia spójna z designem: ciemna domyślnie, jasna pod html[data-theme="light"]. Akcent: yellow-400 (#facc15). Dotyczy stron: page-lp, page, page-cennik, single-uslugi. ===================================================================== */ .prose { color: #d1d5db; font-size: 1.0625rem; line-height: 1.75; } .prose > :first-child { margin-top: 0; } .prose > :last-child { margin-bottom: 0; } .prose p { margin: 0 0 1.25em; } .prose h1, .prose h2, .prose h3, .prose h4, .prose h5 { color: #ffffff; font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.12; margin: 2em 0 0.7em; } .prose h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); padding-bottom: 0.5rem; border-bottom: 1px solid rgb(255 255 255 / 0.08); } .prose h3 { font-size: 1.35rem; } .prose h4 { font-size: 1.1rem; } .prose a { color: #facc15; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgb(250 204 21 / 0.35); transition: border-color 0.2s ease; } .prose a:hover { border-bottom-color: #facc15; } .prose strong, .prose b { color: #ffffff; font-weight: 700; } .prose ul, .prose ol { margin: 1.25em 0; padding-left: 0; list-style: none; } .prose li { position: relative; margin: 0.55em 0; padding-left: 1.85rem; } .prose ul > li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.5rem; height: 0.5rem; background: #facc15; border-radius: 2px; } .prose ol { counter-reset: edkan-li; } .prose ol > li { counter-increment: edkan-li; padding-left: 2.4rem; } .prose ol > li::before { content: counter(edkan-li); position: absolute; left: 0; top: 0.05em; width: 1.6rem; height: 1.6rem; display: flex; align-items: center; justify-content: center; background: #facc15; color: #000; font-size: 0.8rem; font-weight: 900; border-radius: 4px; } .prose blockquote { margin: 1.5em 0; padding: 0.25em 0 0.25em 1.25rem; border-left: 3.5px solid #facc15; color: #ffffff; font-style: italic; } .prose img { border-radius: 1rem; margin: 1.5em 0; } .prose hr { border: 0; border-top: 1px solid rgb(255 255 255 / 0.1); margin: 2.5em 0; } .prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 0.95rem; } .prose th, .prose td { padding: 0.65rem 0.9rem; border: 1px solid rgb(255 255 255 / 0.1); text-align: left; } .prose th { background: rgb(255 255 255 / 0.04); color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.8rem; } /* ===================================================================== FORMULARZ Contact Form 7 (.edkan-cf7) — używany na /kontakt oraz na stronie głównej (sekcja „Zgłoś usterkę"). Wcześniej style były inline na stronie kontakt; przeniesione tu, by działały też na home. ===================================================================== */ .edkan-cf7 .form-field{margin-bottom:1rem} .edkan-cf7 .form-field>p{margin:0} .edkan-cf7 label{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#a1a1aa;margin-bottom:.4rem} .edkan-cf7 .wpcf7-form-control-wrap{display:block} .edkan-cf7 input[type=text],.edkan-cf7 input[type=tel],.edkan-cf7 input[type=email],.edkan-cf7 input[type=number],.edkan-cf7 textarea,.edkan-cf7 select{width:100%;box-sizing:border-box;background:#000;border:1px solid rgba(255,255,255,.12);border-radius:.25rem;padding:.75rem 1rem;color:#fff;font-size:.875rem;line-height:1.45;transition:border-color .2s,box-shadow .2s} .edkan-cf7 textarea{resize:vertical;min-height:120px} /* Wariant kompaktowy (strona główna) — mniejsze pole wiadomości */ .edkan-cf7--compact textarea{min-height:80px;height:80px} .edkan-cf7 input:focus,.edkan-cf7 textarea:focus,.edkan-cf7 select:focus{outline:none;border-color:#facc15;box-shadow:0 0 0 1px #facc15} .edkan-cf7 ::placeholder{color:#52525b} .edkan-cf7 .form-field-policy label{display:flex;align-items:flex-start;gap:.5rem;text-transform:none;letter-spacing:0;font-weight:500;font-size:.72rem;line-height:1.5;color:#71717a;cursor:pointer;margin:0} .edkan-cf7 .form-field-policy .wpcf7-list-item{margin:0;display:block} .edkan-cf7 .form-field-policy input[type=checkbox]{flex:0 0 auto;width:1rem;height:1rem;margin-top:.15rem;accent-color:#facc15} .edkan-cf7 .form-field-policy a{color:#ca8a04;text-decoration:underline} .edkan-cf7 .wpcf7-submit{width:100%;margin-top:.5rem;background:#facc15;color:#000;font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:.875rem;padding:1rem;border:0;border-radius:.25rem;cursor:pointer;transition:background .2s,transform .1s} .edkan-cf7 .wpcf7-submit:hover{background:#eab308} .edkan-cf7 .wpcf7-submit:active{transform:scale(.98)} .edkan-cf7 .wpcf7-spinner{margin:.5rem auto 0;display:block} .edkan-cf7 .wpcf7-not-valid-tip{color:#ef4444;font-size:.72rem;margin-top:.3rem;display:block} .edkan-cf7 .wpcf7-response-output{margin:1rem 0 0;padding:.75rem 1rem;border-radius:.25rem;font-size:.8rem} html[data-theme="light"] .edkan-cf7 label{color:#52525b} html[data-theme="light"] .edkan-cf7 input[type=text],html[data-theme="light"] .edkan-cf7 input[type=tel],html[data-theme="light"] .edkan-cf7 input[type=email],html[data-theme="light"] .edkan-cf7 input[type=number],html[data-theme="light"] .edkan-cf7 textarea,html[data-theme="light"] .edkan-cf7 select{background:#fff;border-color:rgba(0,0,0,.18);color:#18181b} html[data-theme="light"] .edkan-cf7 ::placeholder{color:#9ca3af} html[data-theme="light"] .edkan-cf7 .form-field-policy label{color:#52525b} /* Tagline marki w nagłówku — chowamy na węższych ekranach, by logo było kompaktowe; pokazujemy dopiero gdy jest miejsce (≥1280px). */ .edkan-brand-tagline { display: none; } @media (min-width: 1280px) { .edkan-brand-tagline { display: block; max-width: 22rem; } } /* Rytm pionowy bloków treści na stronie lokalnej (zastępuje brakujące space-y-8) */ .edkan-stack > * + * { margin-top: 2rem; } /* ===================================================================== KARUZELA OPINII (strona główna): 3 karty na desktopie, 2 na tablecie, 1 na mobile. Natywny swipe (scroll-snap) + strzałki w JS. ===================================================================== */ .edkan-reviews-track { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 0.5rem; -ms-overflow-style: none; /* IE/Edge */ scrollbar-width: none; /* Firefox */ } .edkan-reviews-track::-webkit-scrollbar { display: none; } /* Chrome/Safari */ .edkan-review-slide { flex: 0 0 100%; scroll-snap-align: start; } @media (min-width: 768px) { .edkan-review-slide { flex: 0 0 calc(50% - 0.75rem); } } @media (min-width: 1024px) { .edkan-review-slide { flex: 0 0 calc(33.333% - 1rem); } } /* Baner intro na stronie lokalnej — ograniczenie wysokości */ .edkan-lp-img { max-height: 420px; } /* Wariant jasny */ html[data-theme="light"] .prose { color: #3f3f46; } html[data-theme="light"] .prose h1, html[data-theme="light"] .prose h2, html[data-theme="light"] .prose h3, html[data-theme="light"] .prose h4, html[data-theme="light"] .prose h5, html[data-theme="light"] .prose strong, html[data-theme="light"] .prose b, html[data-theme="light"] .prose blockquote { color: #18181b; } html[data-theme="light"] .prose h2 { border-bottom-color: rgb(0 0 0 / 0.1); } html[data-theme="light"] .prose a { color: #b45309; border-bottom-color: rgb(180 83 9 / 0.35); } html[data-theme="light"] .prose a:hover { border-bottom-color: #b45309; } html[data-theme="light"] .prose hr { border-top-color: rgb(0 0 0 / 0.12); } html[data-theme="light"] .prose th, html[data-theme="light"] .prose td { border-color: rgb(0 0 0 / 0.12); } html[data-theme="light"] .prose th { background: rgb(0 0 0 / 0.04); color: #18181b; } /* ===================================================================== CENNIK — tabele z edytora mają wpisane na sztywno style (czarne tła, border 1px solid #000). Nadpisujemy je (!important) na styl EDkan: żółty nagłówek, naprzemienne wiersze, wyróżniona kolumna z ceną. ===================================================================== */ .edkan-cennik strong { display: block; margin: 2.5rem 0 0.6rem; font-size: 1.3rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; color: #ffffff; } .edkan-cennik strong:first-child { margin-top: 0; } .edkan-cennik table { width: 100% !important; height: auto !important; margin: 0 0 1rem !important; border-collapse: separate !important; border-spacing: 0; border: 1px solid rgb(255 255 255 / 0.1) !important; border-radius: 0.85rem; overflow: hidden; font-size: 0.95rem; } .edkan-cennik table td, .edkan-cennik table th { padding: 0.7rem 1.1rem !important; width: auto !important; height: auto !important; border: 0 !important; border-bottom: 1px solid rgb(255 255 255 / 0.07) !important; background: transparent !important; color: #d1d5db !important; vertical-align: middle; text-align: left; } .edkan-cennik table tr:nth-child(even) td { background: rgb(255 255 255 / 0.025) !important; } .edkan-cennik table tr:hover td { background: rgb(250 204 21 / 0.06) !important; } .edkan-cennik table tr:last-child td { border-bottom: 0 !important; } /* kolumna z ceną (ostatnia) */ .edkan-cennik table td:last-child, .edkan-cennik table th:last-child { text-align: right; font-weight: 800; color: #facc15 !important; white-space: nowrap; } /* wiersz nagłówka (pierwszy) — żółty pasek */ .edkan-cennik table tr:first-child td, .edkan-cennik table tr:first-child th { background: #facc15 !important; color: #000 !important; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.78rem; border-bottom: 0 !important; } .edkan-cennik table tr:first-child:hover td { background: #facc15 !important; } .edkan-cennik table tr:first-child td:last-child, .edkan-cennik table tr:first-child th:last-child { color: #000 !important; } /* Wariant jasny */ html[data-theme="light"] .edkan-cennik strong { color: #18181b; } html[data-theme="light"] .edkan-cennik table { border-color: rgb(0 0 0 / 0.12) !important; } html[data-theme="light"] .edkan-cennik table td, html[data-theme="light"] .edkan-cennik table th { color: #3f3f46 !important; border-bottom-color: rgb(0 0 0 / 0.08) !important; } html[data-theme="light"] .edkan-cennik table tr:nth-child(even) td { background: rgb(0 0 0 / 0.025) !important; } html[data-theme="light"] .edkan-cennik table td:last-child { color: #b45309 !important; } html[data-theme="light"] .edkan-cennik table tr:first-child td, html[data-theme="light"] .edkan-cennik table tr:first-child th { color: #000 !important; } html[data-theme="light"] .edkan-cennik table tr:first-child td:last-child { color: #000 !important; }