/* ============================================================ THEME TOGGLE — SmartWebDev Przełącznik trybu jasnego/ciemnego Atrybut data-theme="dark" | data-theme="light" na ============================================================ */ /* ---------------------------------------------------------- Płynne przejście przy zmianie motywu ---------------------------------------------------------- */ body, .rn-header, .rn-footer-area, .rn-brand .inner, .custom-text-box, .carousel-card, .carousel-container, .step-text, .accordion-style-one .accordion-button, .accordion-style-one .accordion-body .inner, .styled-table, .styled-table thead, .styled-table td, .logo-wordmark, .logo-slogan, h1, h2, h3, h4, h5, h6 { transition: color 180ms ease, background-color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } /* ---------------------------------------------------------- Light mode — zmienne semantyczne (InBio white version) [data-theme="light"] Nadpisuje tylko te zmienne :root które są inne niż dark. Zmienne już poprawne w :root: --color-primary (#ff014f), --color-body (#878e99), --gradient-box-w, --shadow-white-3, --color-heading-wv (#1e2125), --color-body-white (#3c3e41). ---------------------------------------------------------- */ [data-theme="light"] { --color-bg: #ecf0f3; --color-surface: #ecf0f3; --color-text: #3c3e41; --color-text-muted: #878e99; --color-border: #dce1e4; --background-color-1: linear-gradient(145deg, #e2e8ec, #ecf0f3); --background-color-2: #ecf0f3; --color-heading: #1e2125; --color-body: #878e99; --color-midgray: #878787; --color-light: #dce1e4; --color-lighter: #ced0d4; --color-lightest: #eef0f2; --color-secondary: #f4f5f6; --color-lightn: #3c3e41; --shadow-1: 5px 5px 15px #D1D9E6, -5px -5px 15px #ffffff; --shadow-2: inset 5px 5px 15px #D1D9E6, inset -5px -5px 15px #ffffff; --inner-shadow: 1px 4px 2px -3px rgba(0,0,0,.12) inset, -1px -3px 3px -2px rgba(255,255,255,.8) inset; } /* ---------------------------------------------------------- Systemowy fallback dla preferencji jasnych (brak JS / brak data-theme) ---------------------------------------------------------- */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --color-bg: #ecf0f3; --color-surface: #ecf0f3; --color-text: #3c3e41; --color-text-muted: #878e99; --color-border: #dce1e4; --background-color-1: linear-gradient(145deg, #e2e8ec, #ecf0f3); --background-color-2: #ecf0f3; --color-heading: #1e2125; --color-body: #878e99; --color-light: #dce1e4; --color-lighter: #ced0d4; --color-lightest: #eef0f2; --color-secondary: #f4f5f6; --shadow-1: 5px 5px 15px #D1D9E6, -5px -5px 15px #ffffff; --shadow-2: inset 5px 5px 15px #D1D9E6, inset -5px -5px 15px #ffffff; } } /* ============================================================ LIGHT MODE — przesłonięcia elementów Karty, nagłówki i custom elementy (carousel, timeline, etc.) korzystają z gradient-box-w + shadow-white-3 z :root. ============================================================ */ /* Tło body */ [data-theme="light"] body.template-color-1 { background-color: var(--color-bg); } /* Karty usług, portfolio, bloga — neumorphic light (gradient do białego) */ [data-theme="light"] .rn-service, [data-theme="light"] .rn-brand .inner, [data-theme="light"] .rn-blog, [data-theme="light"] .rn-portfolio { background: var(--gradient-box-w); box-shadow: var(--shadow-white-3); border: none; } /* Karty portfolio — light mode: ukryj ciemny overlay ::before (dark-mode hover) */ [data-theme="light"] .rn-portfolio::before, [data-theme="light"] .rn-blog::before { display: none; } /* Tytuł karty portfolio — normalny: ciemny kolor nagłówka */ [data-theme="light"] .rn-portfolio .inner .content .title a, [data-theme="light"] .rn-blog .inner .content .title a { color: var(--color-heading); } /* Hover karty portfolio: tytuł i ikona strzałki → primary (#ff014f) */ [data-theme="light"] .rn-portfolio .inner .content .title:hover a, [data-theme="light"] .rn-portfolio .inner .content .title:hover a i, [data-theme="light"] .rn-blog .inner .content .title:hover a, [data-theme="light"] .rn-blog .inner .content .title:hover a i { color: var(--color-primary); } /* Hover karty portfolio: głębszy neumorphic shadow */ [data-theme="light"] .rn-portfolio:hover, [data-theme="light"] .rn-blog:hover { box-shadow: 8px 8px 20px #c5cdd9, -8px -8px 20px #ffffff; } /* Hover kart usług — czerwony gradient zamiast ciemnego */ [data-theme="light"] .rn-service::before { background: var(--gradient-red-hover); } /* Normalny stan: link "Zobacz ofertę" widoczny na jasnym tle (custom.css ustawia color-white) */ [data-theme="light"] .home-service .home-read-more { color: var(--color-heading); } /* Normalny stan: "czytaj dalej" w offer.html — był biały, niewidoczny na jasnej karcie */ [data-theme="light"] .rn-service .read-more-text a { color: var(--color-heading); } /* Hover: link i strzałka (index.html) → biały na czerwonym tle */ [data-theme="light"] .home-service:hover .home-read-more { color: #ffffff; } /* Hover: "czytaj dalej" link (offer.html) → biały na czerwonym tle */ [data-theme="light"] .rn-service:hover .read-more-text a { color: #ffffff; } /* Hover: strzałka w .read-more-text (inline style="#ff014f") → biały; !important przy inline */ [data-theme="light"] .rn-service:hover .read-more-text i { color: #ffffff !important; } /* Hover: główna ikona karty (inline style="#ff014f") → biała; !important przy inline */ [data-theme="light"] .rn-service:hover .inner .icon i { color: #ffffff !important; } /* Header sticky */ [data-theme="light"] .rn-header.header--fixed.sticky { background-color: var(--color-bg); box-shadow: rgba(0, 0, 0, 0.1) 10px 10px 19px; } /* Logo */ [data-theme="light"] .logo-wordmark { color: #1e2125; } [data-theme="light"] .logo-slogan { color: #878e99; } /* Nagłówki */ [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6 { color: var(--color-heading); } /* Nawigacja główna */ [data-theme="light"] .always-visible-menu li a { color: #0d1013; } [data-theme="light"] .always-visible-menu li:hover a { color: var(--color-primary); } [data-theme="light"] .always-visible-menu li a.current, [data-theme="light"] .always-visible-menu li a.active, [data-theme="light"] .always-visible-menu li a[aria-current], [data-theme="light"] .mainmenu-nav .nav-pills .nav-link.active { color: var(--color-primary); background: transparent !important; } /* Linki w menu mobilnym */ [data-theme="light"] .custom-menu-links li a { color: #0d1013; } [data-theme="light"] .custom-menu-links li a:hover { color: var(--color-primary); } /* Popup menu mobilne */ [data-theme="light"] .popup-mobile-menu .inner { background: var(--gradient-box-w); } [data-theme="light"] .popup-mobile-menu .inner .content .primary-menu li a { color: #1e2125; } /* Ikony feather w headerze */ [data-theme="light"] .header-wrapper .header-right i { color: #0d1013; } /* Hamburger — light mode: czerwony jak logo i CTA */ [data-theme="light"] .header-right .hamberger-menu i.humberger-menu { color: var(--color-primary); } /* Sekcja About */ [data-theme="light"] .section-subtitle { color: var(--color-body-white); } [data-theme="light"] #about .content p, [data-theme="light"] #about .custom-list li { color: var(--color-body-white); } /* Carousel (narzędzia) */ [data-theme="light"] .carousel-container { background-color: var(--color-surface); } [data-theme="light"] .carousel-card { background: var(--gradient-box-w); box-shadow: var(--shadow-white-3); } [data-theme="light"] .carousel-card:hover { box-shadow: 8px 8px 20px #c5cdd9, -8px -8px 20px #ffffff; } /* Timeline (proces realizacji) */ [data-theme="light"] .custom-text-box { background: var(--gradient-box-w); color: var(--color-body-white); box-shadow: var(--shadow-white-3); } [data-theme="light"] .custom-text-box:hover { box-shadow: 8px 8px 20px #c5cdd9, -8px -8px 20px #ffffff; } [data-theme="light"] .custom-timeline .custom-text-box h3, [data-theme="light"] .custom-timeline .custom-text-box h4 { color: #1e2125; } /* Hover nagłówka karty procesu → primary (#ff014f) */ [data-theme="light"] .custom-container:hover .custom-text-box h3, [data-theme="light"] .custom-text-box:hover h3 { color: #ff014f; } [data-theme="light"] .custom-timeline .custom-text-box p { color: var(--color-body-white); } [data-theme="light"] .step-text { background: var(--gradient-box-w); color: var(--color-primary); box-shadow: 3px 3px 8px #d1d9e6, -3px -3px 8px #ffffff; } [data-theme="light"] .custom-timeline::after { background: #dce1e4; } [data-theme="light"] .custom-container::before { border-color: #dce1e4; background: var(--color-surface); } [data-theme="light"] .custom-left-container-arrow { border-left-color: #e2e8ec; } [data-theme="light"] .custom-right-container-arrow { border-right-color: #e2e8ec; } [data-theme="light"] .custom-container:hover .custom-left-container-arrow { border-left-color: #d8dfe8; } [data-theme="light"] .custom-container:hover .custom-right-container-arrow { border-right-color: #d8dfe8; } /* Responsywne strzałki timeline mobilna */ @media screen and (max-width: 600px) { [data-theme="light"] .custom-left-container-arrow, [data-theme="light"] .custom-right-container-arrow { border-right-color: #e2e8ec; border-left-color: transparent; } } /* FAQ / Accordion */ [data-theme="light"] .accordion-style-one { color: var(--color-body-white); } [data-theme="light"] .accordion-style-one .section-title-accordion h3 { color: #1e2125; } [data-theme="light"] .accordion-style-one .accordion-item:hover { background-color: #e5eaee; } [data-theme="light"] .accordion-style-one .accordion-item .accordion-header { color: #1e2125; } [data-theme="light"] .accordion-style-one .accordion-item .accordion-header .accordion-button { background: var(--gradient-box-w); color: #1e2125; box-shadow: var(--shadow-white-3); } [data-theme="light"] .accordion-style-one .accordion-item .accordion-body .inner { background: var(--gradient-box-w); box-shadow: var(--shadow-white-3); } [data-theme="light"] .accordion-style-one .accordion-item .accordion-body .inner p { color: var(--color-body-white); } /* Zakładki cennika (.nav-style) — light mode ul li a { color: var(--color-gray) } z style.css ustawia #f6f6f6 (prawie biały) i ta zmienna nie jest nadpisywana w light mode. */ [data-theme="light"] .navigation-wrapper .nav-style { color: var(--color-heading); } [data-theme="light"] .navigation-wrapper .nav-style:hover { color: var(--color-primary); } [data-theme="light"] .navigation-wrapper .nav-style.active { color: var(--color-primary); } /* Tabela porównawcza (cennik) */ [data-theme="light"] .styled-table { background-color: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-white-3); } [data-theme="light"] .styled-table thead { background-color: #dce1e4; color: var(--color-text); } [data-theme="light"] .styled-table tbody tr:nth-child(even) td { background-color: #e8edf1; } [data-theme="light"] .styled-table tbody tr:nth-child(odd) td { background-color: #ecf0f3; } [data-theme="light"] .styled-table tbody tr:hover td { background-color: #e2e8ed; } [data-theme="light"] .styled-table tbody tr:hover td:first-child { color: var(--color-primary); } [data-theme="light"] .styled-table td:first-child, [data-theme="light"] .styled-table td:not(:first-child) { color: var(--color-text); } [data-theme="light"] .rn-pricing-area .pricing-card-title { color: var(--color-text); } [data-theme="light"] .rn-pricing-area .pricing-comparison h4, [data-theme="light"] .pricing-comparison h4 { color: var(--color-text); } /* Karty flip (co zyskujesz) */ [data-theme="light"] .rn-client-area .rn-brand .inner.back { background: var(--gradient-box-w); display: flex; } [data-theme="light"] .rn-client-area .rn-brand .inner.back .description { color: #1e2125; } /* Footer */ [data-theme="light"] .rn-footer-area { background-color: #dce1e4; } [data-theme="light"] .rn-footer-area .footer__text, [data-theme="light"] .rn-footer-area a.footer__link { color: var(--color-body-white); } [data-theme="light"] .credit a.footer__link:hover { color: var(--color-primary); } /* Cookie popup */ [data-theme="light"] .cookie-popup-container .cookie-header { border-bottom-color: var(--color-border); } [data-theme="light"] .cookie-popup-container .cookie-nav { border-bottom-color: var(--color-border); } [data-theme="light"] #cookie-popup { border-color: var(--color-border) !important; } /* ============================================================ LEWY PANEL KONTAKTOWY (.contact-about-area) — light mode ============================================================ */ [data-theme="light"] .contact-about-area { background: var(--gradient-box-w); box-shadow: var(--shadow-white-3); } [data-theme="light"] .contact-about-area .title-area h4.title, [data-theme="light"] .contact-about-area .title-area h3.title { color: var(--color-heading); } [data-theme="light"] .contact-about-area .description p { color: var(--color-body-white); } [data-theme="light"] .contact-about-area .description span { color: var(--color-body-white); } [data-theme="light"] .contact-about-area .description span a { color: var(--color-body-white); } [data-theme="light"] .contact-about-area .description span a:hover { color: var(--color-primary); } [data-theme="light"] .contact-about-area .social-area .name { color: var(--color-heading); } /* ============================================================ FORMULARZ KONTAKTOWY — light mode ============================================================ */ /* Wrapper formularza */ [data-theme="light"] .contact-form-wrapper { background: var(--gradient-box-w); box-shadow: var(--shadow-white-3); } /* Etykiety */ [data-theme="light"] .contact-form-wrapper label { color: var(--color-body-white); } /* Inputy i textarea */ [data-theme="light"] .contact-form-wrapper input, [data-theme="light"] .contact-form-wrapper textarea { background-color: #fdfefe; border: 2px solid #dadada; color: var(--color-body-white); box-shadow: none; } [data-theme="light"] .contact-form-wrapper input::placeholder, [data-theme="light"] .contact-form-wrapper textarea::placeholder { color: #6c757d; opacity: 1; } /* Focus — border primary, bez Bootstrap ring (wyklucza checkbox) */ [data-theme="light"] .contact-form-wrapper input:not([type="checkbox"]):focus, [data-theme="light"] .contact-form-wrapper textarea:focus { background-color: #fdfefe; border: 2px solid var(--color-primary); box-shadow: none; outline: none; color: var(--color-body-white); } /* ============================================================ PRZYCISKI .rn-btn — light mode (neumorphic) ============================================================ */ [data-theme="light"] a.rn-btn, [data-theme="light"] button.rn-btn { background: var(--gradient-box-w); box-shadow: var(--shadow-white-3); } /* Hover: czerwony gradient przez ::before, tekst biały */ [data-theme="light"] a.rn-btn::before, [data-theme="light"] button.rn-btn::before { background: var(--gradient-red-hover); } [data-theme="light"] a.rn-btn:hover, [data-theme="light"] button.rn-btn:hover { color: #ffffff; transform: translateY(-3px); } /* btn-theme (wypełniony primary) — bez neumorphic shadow */ [data-theme="light"] a.rn-btn.btn-theme, [data-theme="light"] button.rn-btn.btn-theme { background: var(--color-primary) !important; box-shadow: none; } /* ============================================================ PRZYCISK SCROLL-TO-TOP (.backto-top) — light mode Baza (dark): background #212428, SVG color: var(--color-light). Light: neumorphic — gradient-box-w + shadow-white-3, ikona ciemna, hover: czerwony ::after overlay + biała ikona (jak w .white-version). ============================================================ */ [data-theme="light"] .backto-top > div { background: var(--gradient-box-w); box-shadow: var(--shadow-white-3); } [data-theme="light"] .backto-top > div::after { background: var(--gradient-red-hover); } [data-theme="light"] .backto-top svg { color: #1e2125; } [data-theme="light"] .backto-top > div:hover svg { color: #ffffff; } /* ============================================================ PRZYCISK PRZEŁĄCZANIA MOTYWU ============================================================ */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 8px 10px; margin-right: 4px; font-size: 17px; color: var(--color-lightn, #c4cfde); border-radius: 6px; transition: color 180ms ease, background-color 180ms ease; vertical-align: middle; line-height: 1; flex-shrink: 0; } .theme-toggle-btn:hover, .theme-toggle-btn:focus-visible { color: #ffffff; background-color: rgba(255, 255, 255, 0.12); outline: 2px solid rgba(255, 255, 255, 0.3); outline-offset: 2px; } [data-theme="light"] .theme-toggle-btn { color: #878e99; } [data-theme="light"] .theme-toggle-btn:hover, [data-theme="light"] .theme-toggle-btn:focus-visible { color: #1e2125; background-color: rgba(0, 0, 0, 0.07); outline-color: rgba(0, 0, 0, 0.2); } /* Ciemny motyw: pokaż słońce (kliknij → jasny) */ [data-theme="dark"] .theme-toggle-btn .icon-sun { display: inline; } [data-theme="dark"] .theme-toggle-btn .icon-moon { display: none; } /* Jasny motyw: pokaż księżyc (kliknij → ciemny) */ [data-theme="light"] .theme-toggle-btn .icon-sun { display: none; } [data-theme="light"] .theme-toggle-btn .icon-moon { display: inline; } /* Fallback gdy data-theme nie jest ustawiony */ :root:not([data-theme]) .theme-toggle-btn .icon-sun { display: inline; } :root:not([data-theme]) .theme-toggle-btn .icon-moon { display: none; } /* Responsywność przycisku */ @media (max-width: 575px) { .theme-toggle-btn { font-size: 15px; padding: 6px 8px; } } /* ============================================================ SEKCJA OPINII (.testimonial) — light mode Odpowiednik .white-version z style.css, dostosowany do palety SmartWebDev: bg #ecf0f3, heading #1e2125, tekst #3c3e41, muted #878e99, akcent #ff014f. ============================================================ */ /* Karta lewa (avatar + imię) — neumorphic */ [data-theme="light"] .testimonial .inner .card-info { background: var(--gradient-box-w); box-shadow: var(--shadow-white-3); } /* Imię autora */ [data-theme="light"] .testimonial .inner .card-info .card-content .title { color: #1e2125; } /* Stanowisko (designation) */ [data-theme="light"] .testimonial .inner .card-info .card-content .designation { color: #3c3e41; } /* Karta prawa (opis projektu + cytat) — neumorphic */ [data-theme="light"] .testimonial .inner .card-description { background: var(--gradient-box-w); box-shadow: var(--shadow-white-3); } /* Pseudoelement ::before łączący karty */ [data-theme="light"] .testimonial .inner .card-description::before { background: #d9dee2; } /* Pseudoelement ::after (cudzysłów dekoracyjny) */ [data-theme="light"] .testimonial .inner .card-description::after { opacity: 0.2; } /* Separator między nagłówkiem a cytatem */ [data-theme="light"] .testimonial .inner .card-description .seperator::after { background: #d9dee2; height: 1px; } /* Typ projektu (np. "Witryna Internetowa") */ [data-theme="light"] .testimonial .inner .card-description .title-area .title-info .title { color: #1e2125; } /* Data realizacji */ [data-theme="light"] .testimonial .inner .card-description .title-area .title-info .date { color: #878e99; } /* Box gwiazdek — neumorphic */ [data-theme="light"] .testimonial .inner .card-description .title-area .rating { background: var(--gradient-box-w); box-shadow: var(--shadow-white-3); } /* Treść cytatu */ [data-theme="light"] .testimonial .inner .card-description .discription { color: #3c3e41; } /* Strzałki slidera */ [data-theme="light"] .testimonial-activation button.slide-arrow { background: var(--gradient-box-w); box-shadow: var(--shadow-white-3); color: var(--color-primary); } [data-theme="light"] .testimonial-activation button.slide-arrow::after { background: var(--gradient-red-hover); } [data-theme="light"] .testimonial-activation button.slide-arrow:hover { color: #ffffff; } /* Dots (kropki) slidera */ [data-theme="light"] .testimonial-activation .slick-dots li button { box-shadow: none; background: #ced2d5; } [data-theme="light"] .testimonial-activation .slick-dots li.slick-active button { background: var(--color-primary); } /* ============================================================ CHECKBOX RODO — light mode Nadpisuje .contact-form-wrapper input { background: #191b1e } z style.css (ten sam selektor + [type="checkbox"] + !important) ============================================================ */ [data-theme="light"] .contact-form-wrapper input[type="checkbox"] { -webkit-appearance: none !important; appearance: none !important; background-color: #fdfefe !important; background-image: none !important; border: 2px solid #dce1e4 !important; width: 18px !important; height: 18px !important; min-height: 18px !important; border-radius: 3px !important; position: relative !important; flex-shrink: 0 !important; cursor: pointer !important; transition: border-color 150ms ease, background-color 150ms ease !important; } [data-theme="light"] .contact-form-wrapper input[type="checkbox"]:checked { background-color: #ff014f !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' d='M3 8l3.5 3.5L13 5'/%3E%3C/svg%3E") !important; background-size: 12px !important; background-repeat: no-repeat !important; background-position: center !important; border-color: #ff014f !important; } [data-theme="light"] .contact-form-wrapper input[type="checkbox"]:hover { border-color: #ff014f !important; } /* Widoczny niestandardowy checkbox (label::before) — light mode input[type=checkbox] ma opacity:0 w style.css, widoczny jest ::before na labelu */ [data-theme="light"] .contact-form-wrapper input[type="checkbox"] ~ label::before, [data-theme="light"] .rodo-consent input[type="checkbox"] ~ label::before { background-color: #fdfefe; border-color: #dce1e4; } [data-theme="light"] .contact-form-wrapper input[type="checkbox"]:checked ~ label::before, [data-theme="light"] .rodo-consent input[type="checkbox"]:checked ~ label::before { background-color: #ff014f; border-color: #ff014f; } /* Najwyższa specyficzność — nadpisanie na wypadek Bootstrap lub vendor override */ html body [data-theme="light"] .contact-form-wrapper .form-check input[type="checkbox"], html body [data-theme="light"] .rodo-consent input[type="checkbox"] { background-color: #fdfefe !important; background-image: none !important; -webkit-appearance: none !important; appearance: none !important; border: 2px solid #dce1e4 !important; accent-color: #ff014f !important; } html body [data-theme="light"] .contact-form-wrapper .form-check input[type="checkbox"]:checked, html body [data-theme="light"] .rodo-consent input[type="checkbox"]:checked { background-color: #ff014f !important; border-color: #ff014f !important; } /* Timeline dot — hover czerwony w light mode Reguła [data-theme="light"] .custom-container::before (linia ~282) ustawia background: var(--color-surface) i ma tę samą specyficzność co reguła hover z custom.css (.custom-container:hover::before), ale wygrywa bo jest ładowana później. Ten selektor dodaje :hover i bije oba konflikty. */ [data-theme="light"] .custom-container:hover::before { background-color: #ff014f !important; border-color: #ff014f !important; } /* ============================================================ MODALE — light mode style.css hardkoduje: .modal { background: #212428 } (ciemny overlay) i .close span { color: var(--color-white) } (biała ikona na jasnym tle). Pozostałe style modala korzystają z --background-color-1 i --shadow-1 które już zmieniają się w light mode — nie trzeba ich nadpisywać. ============================================================ */ /* Overlay (całe tło za dialogiem) — dark mode: ciemny #212428, light: jasny */ [data-theme="light"] .modal { background: rgba(236, 240, 243, 0.92) !important; } /* Ikona X zamknięcia — dark mode: var(--color-white)=biała, light: ciemna */ [data-theme="light"] .modal .modal-dialog .modal-content .modal-header .close span { color: #878e99 !important; } /* Hover X — primary (już zdefiniowany w style.css jako var(--color-primary), ale !important dla pewności) */ [data-theme="light"] .modal .modal-dialog .modal-content .modal-header .close:hover span { color: var(--color-primary) !important; } /* Tekst w modal-body (p, li) poza .text-content — portfolio i about */ [data-theme="light"] .modal .modal-dialog .modal-content .modal-body p, [data-theme="light"] .modal .modal-dialog .modal-content .modal-body li { color: #3c3e41; } /* Nagłówki wewnątrz modal-body — nadpisanie na wypadek gdyby var(--color-lightn) był za jasny */ [data-theme="light"] .modal .modal-dialog .modal-content .modal-body h3, [data-theme="light"] .modal .modal-dialog .modal-content .modal-body h4 { color: #1e2125; } /* ============================================================ FORMULARZ KOMENTARZY — light mode custom.css hardkoduje background: #191b1e dla .comment-section .comment-inner .rnform-group input/textarea (blog pages). ============================================================ */ [data-theme="light"] .comment-section .comment-inner .rnform-group input, [data-theme="light"] .comment-section .comment-inner .rnform-group textarea { background-color: #fdfefe !important; background-image: none !important; color: #3c3e41 !important; border: 2px solid #dce1e4 !important; box-shadow: none !important; } [data-theme="light"] .comment-section .comment-inner .rnform-group input::placeholder, [data-theme="light"] .comment-section .comment-inner .rnform-group textarea::placeholder { color: #878e99 !important; opacity: 1 !important; } [data-theme="light"] .comment-section .comment-inner .rnform-group input:focus, [data-theme="light"] .comment-section .comment-inner .rnform-group textarea:focus { background-color: #fdfefe !important; border-color: #ff014f !important; color: #3c3e41 !important; } /* modal-body — style.css hardkoduje #191b1e bez warunku motywu */ [data-theme="light"] .modal-body .comment-inner .rnform-group input, [data-theme="light"] .modal-body .comment-inner .rnform-group textarea { background-color: #fdfefe !important; background-image: none !important; color: #3c3e41 !important; border: 2px solid #dce1e4 !important; box-shadow: none !important; } [data-theme="light"] .modal-body .comment-inner .rnform-group input::placeholder, [data-theme="light"] .modal-body .comment-inner .rnform-group textarea::placeholder { color: #878e99 !important; opacity: 1 !important; } [data-theme="light"] .modal-body .comment-inner .rnform-group input:focus, [data-theme="light"] .modal-body .comment-inner .rnform-group textarea:focus { background-color: #fdfefe !important; border-color: #ff014f !important; color: #3c3e41 !important; } /* Etykiety w sekcji komentarzy */ [data-theme="light"] .comment-section .comment-inner .rnform-group label { color: #3c3e41 !important; } /* Checkbox RODO w sekcji komentarzy — ten sam wzorzec co .contact-form-wrapper */ [data-theme="light"] .comment-section .rodo-consent input[type="checkbox"] ~ label::before { background-color: #fdfefe; border-color: #dce1e4; } [data-theme="light"] .comment-section .rodo-consent input[type="checkbox"]:checked ~ label::before { background-color: #ff014f; border-color: #ff014f; } /* ============================================================ SEKCJA "CO NAS WYRÓŻNIA" (.rn-client-area) — light mode about.html: vertical tab navigation + client-card z zawartością. Wzorzec: .white-version .rn-client-area z inBio white version. ============================================================ */ /* Panel przycisków nawigacji (lewa kolumna) */ [data-theme="light"] .rn-client-area .tab-navigation-button { background: var(--gradient-box-w) !important; box-shadow: var(--shadow-white-3) !important; } /* Przyciski — stan normalny */ [data-theme="light"] .rn-client-area .tab-navigation-button .nav-item .nav-link { color: var(--color-body-white) !important; background: transparent !important; box-shadow: none !important; } /* Przyciski — hover */ [data-theme="light"] .rn-client-area .tab-navigation-button .nav-item .nav-link:hover { background: var(--gradient-box-w) !important; box-shadow: var(--shadow-white-3) !important; color: var(--color-primary) !important; } /* Przyciski — aktywny */ [data-theme="light"] .rn-client-area .tab-navigation-button .nav-item .nav-link.active { background: var(--gradient-box-w) !important; box-shadow: var(--shadow-white-3) !important; color: var(--color-primary) !important; } /* Karta zawartości (prawa kolumna) — stan normalny */ [data-theme="light"] .rn-client-area .client-card .main-content .inner { background: var(--gradient-box-w) !important; box-shadow: var(--shadow-white-3) !important; } /* Wyłącz ciemny gradient ::after (dark-mode hover overlay) */ [data-theme="light"] .rn-client-area .client-card .main-content .inner::after { background: none !important; } /* Karta — hover: głębszy neumorphic shadow */ [data-theme="light"] .rn-client-area .client-card .main-content .inner:hover { background: var(--gradient-box-w) !important; box-shadow: 8px 8px 20px #c5cdd9, -8px -8px 20px #ffffff !important; } /* Separator między kartami — jasny kolor linii */ [data-theme="light"] .rn-client-area .client-card .seperator::after { background: #dce1e4 !important; } /* Nagłówek i tekst w karcie */ [data-theme="light"] .rn-client-area .client-card .main-content .inner h3 { color: var(--color-heading) !important; } [data-theme="light"] .rn-client-area .client-card .main-content .inner p, [data-theme="light"] .rn-client-area .client-card .main-content .inner li { color: var(--color-body-white) !important; } /* ============================================================ PASKI POSTĘPU (Skills) — light mode about.html: .proggressbar-area — sekcje "Umiejętności Projektowe" i "Umiejętności Developerskie". style.css ustawia te kolory tylko dla .white-version (nie data-theme). ============================================================ */ /* Track (tło paska) */ [data-theme="light"] .progress-charts .progress { background: #dce1e4 !important; box-shadow: none !important; } /* Fill (wypełnienie paska) — gradient jak w demo inBio white */ [data-theme="light"] .progress-charts .progress .progress-bar { background: linear-gradient(145deg, #ffffff 0%, #ff014f 100%) !important; } /* Wartość procentowa — primary, widoczna powyżej paska (top: -22px) */ [data-theme="light"] .progress-charts .progress .progress-bar span.percent-label { color: #ff014f !important; } /* Etykieta nazwy umiejętności — about.html używa h5.heading.heading-h6 */ [data-theme="light"] .progress-charts h5.heading, [data-theme="light"] .progress-charts h6.heading { color: #1e2125 !important; opacity: 1 !important; } /* ============================================================ KARUZELE "CO OTRZYMASZ" i "BONUS" — light mode offer.html: .rn-client-area .brand-activation-item-5 Karty (.rn-brand), strzałki slick (.slick-arrow), kropki. ============================================================ */ /* Ikona FontAwesome na froncie karty — var(--color-white) byłoby niewidoczne */ [data-theme="light"] .rn-client-area .icon-large { color: var(--color-primary) !important; } /* Tekst nazwy elementu (.client-name span) */ [data-theme="light"] .rn-client-area .rn-brand .client-name span { color: #1e2125; } [data-theme="light"] .rn-client-area .rn-brand .client-name span i { color: var(--color-primary) !important; } /* Kreska separatora */ [data-theme="light"] .rn-client-area .rn-brand .seperator::after { background: #dce1e4; } /* Overlay ::after — tylko front (back nie ma ::after w praktyce, ale scope dla pewności) */ [data-theme="light"] .rn-client-area .rn-brand .inner.front::after { background: var(--gradient-red-hover) !important; } /* Hover frontu — shadow + uniesienie (NIE back, żeby nie konfliktować z rotateY) */ [data-theme="light"] .rn-client-area .rn-brand .inner:not(.back):hover { box-shadow: 8px 8px 20px #c5cdd9, -8px -8px 20px #ffffff !important; transform: translateY(-3px); } /* Hover frontu — tekst i ikony białe na czerwonym tle */ [data-theme="light"] .rn-client-area .rn-brand .inner:not(.back):hover .icon-large, [data-theme="light"] .rn-client-area .rn-brand .inner:not(.back):hover .client-name span, [data-theme="light"] .rn-client-area .rn-brand .inner:not(.back):hover .client-name span i, [data-theme="light"] .rn-client-area .rn-brand .inner:not(.back):hover a, [data-theme="light"] .rn-client-area .rn-brand .inner:not(.back):hover a i { color: #ffffff !important; } /* Back face — neumorphic light */ [data-theme="light"] .rn-client-area .rn-brand .inner.back { background: var(--gradient-box-w) !important; } [data-theme="light"] .rn-client-area .rn-brand .inner.back:hover { background: var(--gradient-box-w) !important; box-shadow: var(--shadow-white-3) !important; } /* Back face — bez czerwonego overlay */ [data-theme="light"] .rn-client-area .rn-brand .inner.back::after { display: none !important; } /* Przyciski prev/next — neumorphic light */ [data-theme="light"] .rn-client-area .slick-arrow-style-one .slick-arrow { background: var(--gradient-box-w) !important; box-shadow: var(--shadow-white-3) !important; color: #1e2125 !important; } /* SVG ikona strzałki */ [data-theme="light"] .rn-client-area .slick-arrow-style-one .slick-arrow svg { color: #1e2125; } /* Strzałki hover — akcent primary, głębszy shadow */ [data-theme="light"] .rn-client-area .slick-arrow-style-one .slick-arrow:hover { color: var(--color-primary) !important; box-shadow: 8px 8px 20px #c5cdd9, -8px -8px 20px #ffffff !important; } [data-theme="light"] .rn-client-area .slick-arrow-style-one .slick-arrow:hover svg { color: var(--color-primary); } /* Kropki nawigacji — nieaktywna */ [data-theme="light"] .rn-client-area .slick-dots li button { background: #dce1e4 !important; box-shadow: none !important; } /* Kropka aktywna */ [data-theme="light"] .rn-client-area .slick-dots li.slick-active button { background: var(--color-primary) !important; } /* ---------------------------------------------------------- Polecane Dodatki — Bootstrap carousel (.portfolio-style-two) — light mode Przyciski: .carousel-control-prev / .carousel-control-next Styl bazowy w style.css linia 16731: background-color: #212428 (ciemny) ---------------------------------------------------------- */ [data-theme="light"] .portfolio-style-two .carousel.slide .carousel-control-next, [data-theme="light"] .portfolio-style-two .carousel.slide .carousel-control-prev { background: var(--gradient-box-w) !important; box-shadow: var(--shadow-white-3) !important; color: #1e2125 !important; } [data-theme="light"] .portfolio-style-two .carousel.slide .carousel-control-next svg, [data-theme="light"] .portfolio-style-two .carousel.slide .carousel-control-prev svg, [data-theme="light"] .portfolio-style-two .carousel.slide .carousel-control-next i, [data-theme="light"] .portfolio-style-two .carousel.slide .carousel-control-prev i { color: #1e2125 !important; } [data-theme="light"] .portfolio-style-two .carousel.slide .carousel-control-next:hover, [data-theme="light"] .portfolio-style-two .carousel.slide .carousel-control-prev:hover { background: var(--gradient-box-w) !important; box-shadow: 8px 8px 20px #c5cdd9, -8px -8px 20px #ffffff !important; } [data-theme="light"] .portfolio-style-two .carousel.slide .carousel-control-next:hover svg, [data-theme="light"] .portfolio-style-two .carousel.slide .carousel-control-prev:hover svg, [data-theme="light"] .portfolio-style-two .carousel.slide .carousel-control-next:hover i, [data-theme="light"] .portfolio-style-two .carousel.slide .carousel-control-prev:hover i { color: #ff014f !important; } /* ---------------------------------------------------------- Usługi Dodatkowe (pricing.html) — karty light mode ---------------------------------------------------------- */ [data-theme="light"] #specialist-services .rn-pricing { background: var(--gradient-box-w) !important; box-shadow: var(--shadow-white-3) !important; border: none !important; } [data-theme="light"] #specialist-services .rn-pricing .pricing-card-title, [data-theme="light"] #specialist-services .rn-pricing h3, [data-theme="light"] #specialist-services .rn-pricing h4, [data-theme="light"] #specialist-services .rn-pricing p, [data-theme="light"] #specialist-services .rn-pricing li, [data-theme="light"] #specialist-services .rn-pricing span:not(.price):not(.badge) { color: #1e2125 !important; } [data-theme="light"] #specialist-services .rn-pricing .pricing-header .header-left span, [data-theme="light"] #specialist-services .rn-pricing p.description, [data-theme="light"] #specialist-services .rn-pricing .check-wrapper p { color: #65676b !important; } [data-theme="light"] #specialist-services .rn-pricing .pricing-header .header-right span { color: #ff014f !important; } [data-theme="light"] #specialist-services .rn-pricing .rn-btn { background: var(--gradient-box-w) !important; box-shadow: var(--shadow-white-3) !important; color: #1e2125 !important; border: 1px solid rgba(0,0,0,0.08) !important; } [data-theme="light"] #specialist-services .rn-pricing .rn-btn:hover, [data-theme="light"] #specialist-services .rn-pricing .rn-btn:hover span { color: #ffffff !important; } [data-theme="light"] #specialist-services .rn-pricing .rn-btn:hover svg, [data-theme="light"] #specialist-services .rn-pricing .rn-btn:hover i { color: #ffffff !important; fill: #ffffff !important; stroke: #ffffff !important; } /* ---------------------------------------------------------- Stopka — podmiana logo light/dark mode ---------------------------------------------------------- */ [data-theme="light"] .footer-copyright-logo { content: url('../images/logo/logo-smartwebdev-white.webp'); } [data-theme="dark"] .footer-copyright-logo { content: url('../images/logo/logo-smartwebdev-dark.webp'); } /* ---------------------------------------------------------- Cookie Consent Popup — przyciski light mode ---------------------------------------------------------- */ /* Wrapper popupu */ [data-theme="light"] .cookie-popup-container #cookie-popup { background: var(--gradient-box-w) !important; box-shadow: var(--shadow-white-3) !important; color: #1e2125 !important; } /* Separator między contentem a przyciskami */ [data-theme="light"] .cookie-popup-container .cookie-buttons { border-top: 1px solid rgba(0, 0, 0, 0.08) !important; } /* Tekst, linki w popupie */ [data-theme="light"] .cookie-popup-container #cookie-popup p, [data-theme="light"] .cookie-popup-container #cookie-popup span, [data-theme="light"] .cookie-popup-container #cookie-popup a { color: #65676b !important; } /* Neutralizuj pseudo-element hover (::after) dla obu typów przycisków w light mode */ [data-theme="light"] .cookie-popup-container .cookie-btn::after { display: none !important; } /* Przyciski Akceptuj — #cookie-accept-* */ [data-theme="light"] .cookie-popup-container #cookie-accept-all-zgody, [data-theme="light"] .cookie-popup-container #cookie-accept-all-szczegoly, [data-theme="light"] .cookie-popup-container #cookie-accept-all-cookies, [data-theme="light"] .cookie-popup-container #cookie-accept-selected-szczegoly { background: #ff014f !important; background-image: none !important; color: #ffffff !important; border: none !important; box-shadow: none !important; } [data-theme="light"] .cookie-popup-container #cookie-accept-all-zgody:hover, [data-theme="light"] .cookie-popup-container #cookie-accept-all-szczegoly:hover, [data-theme="light"] .cookie-popup-container #cookie-accept-all-cookies:hover, [data-theme="light"] .cookie-popup-container #cookie-accept-selected-szczegoly:hover { background: #d4003f !important; background-image: none !important; color: #ffffff !important; } /* Przyciski Dostosuj — #cookie-customize-* */ [data-theme="light"] .cookie-popup-container #cookie-customize-zgody, [data-theme="light"] .cookie-popup-container #cookie-customize-cookies { background: var(--gradient-box-w) !important; background-image: none !important; box-shadow: var(--shadow-white-3) !important; color: #1e2125 !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; } [data-theme="light"] .cookie-popup-container #cookie-customize-zgody:hover, [data-theme="light"] .cookie-popup-container #cookie-customize-cookies:hover { color: #ff014f !important; box-shadow: 8px 8px 20px #c5cdd9, -8px -8px 20px #ffffff !important; } [data-theme="light"] .cookie-popup-container #cookie-customize-zgody:hover span, [data-theme="light"] .cookie-popup-container #cookie-customize-cookies:hover span { color: #ff014f !important; } /* Dzieci przycisków Akceptuj — wymuszenie białego koloru na span i innych elementach */ [data-theme="light"] .cookie-popup-container #cookie-accept-all-zgody *, [data-theme="light"] .cookie-popup-container #cookie-accept-all-szczegoly *, [data-theme="light"] .cookie-popup-container #cookie-accept-all-cookies *, [data-theme="light"] .cookie-popup-container #cookie-accept-selected-szczegoly * { color: #ffffff !important; } /* Zakładki nawigacji (Zgody / Szczegóły / O Cookies) */ [data-theme="light"] .cookie-popup-container .cookie-tab:hover, [data-theme="light"] .cookie-popup-container .cookie-tab:focus { background: rgba(255, 1, 79, 0.08) !important; color: #ff014f !important; } [data-theme="light"] .cookie-popup-container .cookie-tab.active { background: #ff014f !important; color: #ffffff !important; } /* Wiersze accordion (kategorie cookies) — wyższa specyficzność przez #cookie-popup */ [data-theme="light"] #cookie-popup .accordion-item, [data-theme="light"] #cookie-popup .accordion-item.accordion-item { background: #f0f2f5 !important; background-color: #f0f2f5 !important; color: #1e2125 !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; } /* Accordion header ma własny background w custom.css — nadpisujemy */ [data-theme="light"] #cookie-popup .accordion-header { background: #f0f2f5 !important; background-color: #f0f2f5 !important; } /* Wszystkie dzieci accordion-item (tekst, strzałki, etykiety) */ [data-theme="light"] #cookie-popup .accordion-item *, [data-theme="light"] #cookie-popup .accordion-header, [data-theme="light"] #cookie-popup .accordion-header span, [data-theme="light"] #cookie-popup .accordion-header label, [data-theme="light"] #cookie-popup .accordion-title { background: transparent !important; color: #1e2125 !important; } /* Toggle switch — wyjątek od background: transparent !important powyżej */ /* Track nieaktywny (szary) */ [data-theme="light"] #cookie-popup .toggle-track { background-color: #c5cdd9 !important; background: #c5cdd9 !important; } /* Track aktywny — data-checked="true" na .toggle-switch (w tym .locked) */ [data-theme="light"] #cookie-popup .toggle-switch[data-checked="true"] .toggle-track { background-color: #ff014f !important; background: #ff014f !important; } /* Kółko toggle — zawsze białe */ [data-theme="light"] #cookie-popup .toggle-thumb { background-color: #ffffff !important; background: #ffffff !important; } /* Ikona wewnątrz kółka */ [data-theme="light"] #cookie-popup .toggle-icon { background: transparent !important; color: #ff014f !important; } /* Przyciski Akceptuj — korekta białego tekstu (nadpisuje #cookie-popup span: #65676b) */ [data-theme="light"] #cookie-popup #cookie-accept-all-zgody, [data-theme="light"] #cookie-popup #cookie-accept-all-szczegoly, [data-theme="light"] #cookie-popup #cookie-accept-all-cookies, [data-theme="light"] #cookie-popup #cookie-accept-selected-szczegoly { color: #ffffff !important; } [data-theme="light"] #cookie-popup #cookie-accept-all-zgody *, [data-theme="light"] #cookie-popup #cookie-accept-all-szczegoly *, [data-theme="light"] #cookie-popup #cookie-accept-all-cookies *, [data-theme="light"] #cookie-popup #cookie-accept-selected-szczegoly * { color: #ffffff !important; background: transparent !important; } /* ---------------------------------------------------------- Globalny scrollbar — light mode ---------------------------------------------------------- */ /* Firefox */ [data-theme="light"] { scrollbar-color: #c5cdd9 #ecf0f3 !important; scrollbar-width: thin !important; } /* Chrome / Edge / Safari */ [data-theme="light"] ::-webkit-scrollbar { width: 8px !important; height: 8px !important; } [data-theme="light"] ::-webkit-scrollbar-track { background: #ecf0f3 !important; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: #c5cdd9 !important; border-radius: 4px !important; border: 2px solid #ecf0f3 !important; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #ff014f !important; } [data-theme="light"] ::-webkit-scrollbar-corner { background: #ecf0f3 !important; } /* ============================================================ GLOBALNY — wszystkie slidery / hero sekcje — light mode Klasy wrapperów: .rn-slider-area — index.html (slider główny) .my-slider — wszystkie pozostałe strony (15 stron) Overlaye: .rn-slider-area .overlay — div z inline style → wymaga !important .my-slider .my-overlay — div CSS-styled → jedna reguła pokrywa wszystko Działa dla: index, about, blog, offer, contacts, faq, pricing, portfolio, opinions, privacy-policy, welcome-to-web-dev-blog, seo-website-optimization, common-web-development-mistakes, key-skills-of-a-web-developer, what-is-full-stack-development, ux-ui-game-changer (16 stron łącznie). ============================================================ */ /* Catch-all: wszystkie elementy tekstowe w obu typach sliderów */ [data-theme="light"] .rn-slider-area *, [data-theme="light"] .my-slider * { color: #ffffff !important; } /* Wyjątek: .badge ma własne tło i kolor — nie resetujemy */ [data-theme="light"] .rn-slider-area .badge, [data-theme="light"] .my-slider .badge { color: unset !important; } /* ---------------------------------------------------------- Overlay — light mode (dark mode: rgba(33,36,40,0.7) za ciemny na jasnych zdjęciach; artykuły blogowe mają SVG bez zdjęcia) ---------------------------------------------------------- */ /* index.html — gradient lewo→prawo (tekst po lewej stronie) */ [data-theme="light"] .rn-slider-area .overlay { background: linear-gradient( to right, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.32) 60%, rgba(0, 0, 0, 0.08) 100% ) !important; } /* Wszystkie .my-slider — flat overlay (tekst wycentrowany lub lewostronny) */ [data-theme="light"] .my-slider .my-overlay { background: rgba(0, 0, 0, 0.50) !important; } /* ---------------------------------------------------------- Blog article SVG sliders — light mode background override .svg-bg klasa na głównym każdego inline SVG. Inline SVG może czytać CSS z dokumentu rodzica. ---------------------------------------------------------- */ [data-theme="light"] .slider-bg-svg .svg-bg { fill: #f0f4f8 !important; } [data-theme="light"] .slider-bg-svg .svg-card { fill: #dce8e9 !important; } [data-theme="light"] .slider-bg-svg .svg-card-deep { fill: #ccd8da !important; } /* Tekst SVG w light mode — ciemny zamiast jasnego */ [data-theme="light"] .slider-bg-svg text { fill: #1e2125 !important; } /* Akcenty teal w light mode (stroke + fill) */ [data-theme="light"] .slider-bg-svg .svg-accent-teal { stroke: #01696f !important; fill: none !important; } [data-theme="light"] .slider-bg-svg .svg-fill-teal { fill: #01696f !important; } /* Linie/siatki SVG w light mode */ [data-theme="light"] .slider-bg-svg .svg-grid-stroke { stroke: #b8d4d0 !important; } /* Vignette rect — ukryj w light mode (ciemnieje jasne tło) */ [data-theme="light"] .slider-bg-svg .svg-vignette { opacity: 0 !important; } /* ============================================================ NAVBAR — transparent (przed scrollem) — light mode main.js dodaje klasę .sticky do .header--sticky po scrollu i usuwa przy powrocie na górę. :not(.sticky) = stan transparent → kolory jak w dark mode. Sticky state (po scrollu) nie jest ruszany — jasne tło OK. ============================================================ */ /* Logo wordmark i slogan */ [data-theme="light"] .rn-header.header--sticky:not(.sticky) .logo-wordmark { color: #ffffff !important; } [data-theme="light"] .rn-header.header--sticky:not(.sticky) .logo-slogan { color: rgba(255, 255, 255, 0.70) !important; } /* Linki nawigacji desktop */ [data-theme="light"] .rn-header.header--sticky:not(.sticky) .always-visible-menu li a { color: #ffffff !important; } [data-theme="light"] .rn-header.header--sticky:not(.sticky) .always-visible-menu li a:hover, [data-theme="light"] .rn-header.header--sticky:not(.sticky) .always-visible-menu li a.active, [data-theme="light"] .rn-header.header--sticky:not(.sticky) .always-visible-menu li a[aria-current] { color: var(--color-primary) !important; } /* Hamburger i ikony feather w header-right */ [data-theme="light"] .rn-header.header--sticky:not(.sticky) .header-right i { color: #ffffff !important; } /* Hamburger zawsze czerwony w light mode (sticky i non-sticky) */ [data-theme="light"] .rn-header.header--sticky:not(.sticky) .header-right .hamberger-menu i.humberger-menu { color: var(--color-primary) !important; } /* Theme toggle przycisk */ [data-theme="light"] .rn-header.header--sticky:not(.sticky) .theme-toggle-btn { color: rgba(255, 255, 255, 0.85) !important; } [data-theme="light"] .rn-header.header--sticky:not(.sticky) .theme-toggle-btn:hover, [data-theme="light"] .rn-header.header--sticky:not(.sticky) .theme-toggle-btn:focus-visible { color: #ffffff !important; background-color: rgba(255, 255, 255, 0.12) !important; outline-color: rgba(255, 255, 255, 0.3) !important; } /* ---------------------------------------------------------- index.html slider — kolory specyficzne jak w dark mode ---------------------------------------------------------- */ /* "SmartWebDev" — czerwony jak w dark mode */ [data-theme="light"] .rn-slider-area h1.title > span:first-child, [data-theme="light"] .rn-slider-area .color-primary, [data-theme="light"] .rn-slider-area .theme-color, [data-theme="light"] .rn-slider-area .highlight { color: #ff014f !important; } /* ---------------------------------------------------------- index.html slider — przycisk light mode Identyczny styl jak .rn-btn w sekcji "Kim Jesteśmy" Selektory potrojone żeby bić dark-mode reguły z style.css ---------------------------------------------------------- */ [data-theme="light"] .rn-slider-area a.rn-btn, [data-theme="light"] .rn-slider-area .slide .rn-btn, [data-theme="light"] .rn-slider-area .slider-style-1 .rn-btn, [data-theme="light"] .rn-slider-area.rn-slider-area .rn-btn { background: linear-gradient(145deg, #e2e8ec, #ffffff) !important; box-shadow: var(--shadow-white-3) !important; border: none !important; color: #ff014f !important; border-radius: 6px !important; } [data-theme="light"] .rn-slider-area a.rn-btn span, [data-theme="light"] .rn-slider-area .slide .rn-btn span, [data-theme="light"] .rn-slider-area .slider-style-1 .rn-btn span, [data-theme="light"] .rn-slider-area.rn-slider-area .rn-btn span, [data-theme="light"] .rn-slider-area a.rn-btn i, [data-theme="light"] .rn-slider-area .slide .rn-btn i, [data-theme="light"] .rn-slider-area .slider-style-1 .rn-btn i, [data-theme="light"] .rn-slider-area.rn-slider-area .rn-btn i, [data-theme="light"] .rn-slider-area a.rn-btn svg, [data-theme="light"] .rn-slider-area .slide .rn-btn svg, [data-theme="light"] .rn-slider-area .slider-style-1 .rn-btn svg, [data-theme="light"] .rn-slider-area.rn-slider-area .rn-btn svg { color: #ff014f !important; } /* Hover — ::before overlay z zaokrąglonymi rogami */ [data-theme="light"] .rn-slider-area a.rn-btn::before, [data-theme="light"] .rn-slider-area .slide .rn-btn::before, [data-theme="light"] .rn-slider-area .slider-style-1 .rn-btn::before, [data-theme="light"] .rn-slider-area.rn-slider-area .rn-btn::before { border-radius: 6px !important; background: linear-gradient(145deg, #ff014f, #d11414) !important; } [data-theme="light"] .rn-slider-area a.rn-btn:hover, [data-theme="light"] .rn-slider-area .slide .rn-btn:hover, [data-theme="light"] .rn-slider-area .slider-style-1 .rn-btn:hover, [data-theme="light"] .rn-slider-area.rn-slider-area .rn-btn:hover, [data-theme="light"] .rn-slider-area a.rn-btn:hover span, [data-theme="light"] .rn-slider-area .slide .rn-btn:hover span, [data-theme="light"] .rn-slider-area .slider-style-1 .rn-btn:hover span, [data-theme="light"] .rn-slider-area.rn-slider-area .rn-btn:hover span, [data-theme="light"] .rn-slider-area a.rn-btn:hover i, [data-theme="light"] .rn-slider-area .slide .rn-btn:hover i, [data-theme="light"] .rn-slider-area .slider-style-1 .rn-btn:hover i, [data-theme="light"] .rn-slider-area.rn-slider-area .rn-btn:hover i, [data-theme="light"] .rn-slider-area a.rn-btn:hover svg, [data-theme="light"] .rn-slider-area .slide .rn-btn:hover svg, [data-theme="light"] .rn-slider-area .slider-style-1 .rn-btn:hover svg, [data-theme="light"] .rn-slider-area.rn-slider-area .rn-btn:hover svg { color: #ffffff !important; }