/* ========================================== Dark Mode — triggered by [data-theme="dark"] on the element ========================================== */ html[data-theme="dark"] { /* ---- Core color overrides ---- */ --color-white: #272727; /* */ --color-gray-100: #e2e8f0; --color-gray-200: #e2e8f0; --color-gray-300: rgba(255, 255, 255, 0.7); --color-black: #e2e8f0; --color-slategray: #c8d0dc; --color-lightslategray: #d0d8e4; --color-darkgray: #d0d8e4; /* Ghostwhite – used for inner plan boxes etc. */ --color-ghostwhite: #383838; --color-ghostwhite-100: #4D4D4D; --color-ghostwhite-200: #4D4D4D; /* Lavender – used for borders */ --color-lavender-100: #2d3045; --color-lavender-200: #2d3045; /* Aliceblue – used for borders in payment items */ --color-aliceblue: #2d3045; /* duk.css-specific variables */ --color-gray: #e2e8f0; --Color-Text-Grey: #94a3b8; --Color-Text-Blue: #5292ff; /* Keep brand colors unchanged */ --color-gold: #ffd200; --color-gold-100: #ffd500; --color-gold-200: #ffd200; --color-mediumslateblue: #225ff7; --color-mediumslateblue-100: #225ff7; --color-mediumslateblue-200: #073fca; --color-navy: #00239c; /* Shadows – reduce opacity for dark bg */ --shadow-drop: 0px 4px 27px rgba(0, 0, 0, 0.3); --shadow-drop-1: 0px 22px 105px rgba(0, 0, 0, 0.4), 0px 8px 38px rgba(0, 0, 0, 0.35), 0px 3.9px 18.6px rgba(0, 0, 0, 0.3), 0px 1.9px 9.1px rgba(0, 0, 0, 0.25), 0px 0.76px 3.6px rgba(0, 0, 0, 0.2); --shadow-drop-2: 0px 4px 27px rgba(0, 0, 0, 0.35); --shadow-drop-4: 0px 4px 27px rgba(0, 0, 0, 0.3); --shadow-drop-5: 0px 22px 105px rgba(0, 0, 0, 0.4), 0px 8px 38px rgba(0, 0, 0, 0.35); /* Gradient-1 – border separator (darken the light part) */ --gradient-1: linear-gradient(90deg, rgba(30, 30, 30, 0), rgba(200, 200, 200, 0.12) 50%, rgba(30, 30, 30, 0)) border-box; } /* ========================================== Page-level backgrounds ========================================== */ [data-theme="dark"] body, [data-theme="dark"] .w-sveiki-prisijung-nemokama, [data-theme="dark"] .vartotojo-paskyra, [data-theme="dark"] .w-apmokjimas, [data-theme="dark"] .w-susikurk-paskyr { background: #1a1a1e !important; } /* Main page wrapper */ [data-theme="dark"] .container-scalable-width { color: var(--color-gray-100); background: #1a1a1e; } /* ---- Background image: darken / hide ---- */ [data-theme="dark"] .background-icon { opacity: 0.08; } /* ---- Hero / section cards ---- */ [data-theme="dark"] .content-article, [data-theme="dark"] .envelope { background-color: var(--color-white) !important; box-shadow: 0 4px 27px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .device-article { background-color: var(--color-white) !important; box-shadow: 0 4px 27px rgba(0, 0, 0, 0.3); } /* ---- Plan cards on index page ---- */ [data-theme="dark"] .asidehero-card, [data-theme="dark"] .failed-payment-card, [data-theme="dark"] .fp-left-top { background: linear-gradient(116.48deg, #0a2a7a, #2a5cc9); color: #fff !important; } /* Keep text white inside all blue gradient boxes */ [data-theme="dark"] .fp-left-top, [data-theme="dark"] .divcard-top, [data-theme="dark"] .top, [data-theme="dark"] .divplan-top, [data-theme="dark"] .divpayment-top, [data-theme="dark"] .divcard-top .section-title, [data-theme="dark"] .top .form-title, [data-theme="dark"] .top .h1, [data-theme="dark"] .top .p, [data-theme="dark"] .divplan-top .plan-name, [data-theme="dark"] .divplan-top .plan-price, [data-theme="dark"] .divpayment-top, [data-theme="dark"] .step-number-text{ color: #fff !important; } /* ---- Device article titles (blue gradient header) ---- */ [data-theme="dark"] .device-article .title-text { color: #fff !important; } /* ---- Device article content area (bottom half) ---- */ [data-theme="dark"] .device-article .content { background-color: var(--color-white) !important; } /* ---- "BALTICUM GO PLANAS" title ---- */ [data-theme="dark"] .plan-title, .fp-plan-title , .fp-plan-label, .register-button { -webkit-text-fill-color: #fff; } /* ---- CTA section (Pradėk žiūrėti jau šiandien) ---- */ [data-theme="dark"] .cta-title { color: #fff !important; } /* ---- Buttons with gold background: keep text white ---- */ [data-theme="dark"] .buttonbtn-primary, [data-theme="dark"] .button-text { color: #fff !important; } [data-theme="dark"] .abtn-light, [data-theme="dark"] .cta-button-text { color: #fff !important; } /* ---- Sections with white-ish background ---- */ [data-theme="dark"] .sectionsection { background-color: var(--color-white); box-shadow: 0 7.77px 16px rgba(0, 0, 0, 0.2), 0 4px 0 rgba(255, 255, 255, 0.05) inset, 0 -8px 0 rgba(0, 0, 0, 0.15) inset; } /* ========================================== Subscriptions page ========================================== */ [data-theme="dark"] .account, [data-theme="dark"] .payment-history, [data-theme="dark"] .subscription { background-color: var(--color-white) !important; } [data-theme="dark"] .divcard-body { color: var(--color-slategray); } [data-theme="dark"] .divplan-box { border-radius: 22px; border: 1px solid #5E5E5E; background: radial-gradient(94.63% 68.54% at 91.67% 87.54%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.00) 100%), #121212; } /* Make name, payment data, subscription times white */ [data-theme="dark"] .info-value, .info-label { color: #fff; } [data-theme="dark"] .payment-date { color: #fff !important; } [data-theme="dark"] .divcard-body3 .info-label { color: #fff !important; } [data-theme="dark"] .nb-faq-text { color: #fff !important; } [data-theme="dark"] .nb-profile-link { color: #fff !important; } [data-theme="dark"] .divstatus { background-color: rgba(0, 200, 83, 0.12); color: #66bb6a; } [data-theme="dark"] .divstatus--cancelled { background-color: rgba(230, 81, 0, 0.15); color: #ff8a50; } /* ========================================== Complete signup / payment pages ========================================== */ [data-theme="dark"] .card { background-color: var(--color-white) !important; } [data-theme="dark"] .left { background-color: var(--color-white) !important; border-color: var(--color-lavender-100); } [data-theme="dark"] .step-indicator { background-color: var(--color-ghostwhite-100); border-color: var(--color-lavender-100); } [data-theme="dark"] .step-1 { background-color: var(--color-gold-100); } [data-theme="dark"] .payment-info-title, [data-theme="dark"] .subscription-label { color: #fff !important; } /* ========================================== Footer ========================================== */ [data-theme="dark"] .ft-footer::before { background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.06) 20%, rgba(255, 255, 255, 0.06) 60%, transparent); } /* ========================================== Forms & inputs ========================================== */ [data-theme="dark"] .placeholder-text { color: #94a3b8; } [data-theme="dark"] .placeholder-text::placeholder { color: #5f6b85; } /* ---- All other input fields (dark bg #383838 in dark mode) ---- */ [data-theme="dark"] .input-custom { background-color: #383838 !important; border-color: rgba(255, 255, 255, 0.08); color: #e2e8f0; } [data-theme="dark"] .input-custom::placeholder { color: #919BB0; } [data-theme="dark"] .input3 { background-color: #383838 !important; border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .input3 .w-full.h-full.bg-transparent, [data-theme="dark"] .input3 input, [data-theme="dark"] .input3 select, [data-theme="dark"] .input3 textarea { color: #e2e8f0; } [data-theme="dark"] .input3 input::placeholder, [data-theme="dark"] .input3 textarea::placeholder { color: #919BB0; } [data-theme="dark"] .input3 select { background-color: transparent; color: #e2e8f0; } /* Style dropdown option list in dark mode (Chrome/Edge native popup) */ [data-theme="dark"] .input3 select option { background-color: #272727; color: #e2e8f0; } [data-theme="dark"] .vector-icon { filter: brightness(0) saturate(100%) invert(67%) sepia(6%) saturate(320%) hue-rotate(182deg) brightness(93%) contrast(88%); } /* daisyUI form elements in dark mode (inputs, selects, textareas) */ [data-theme="dark"] input.input, [data-theme="dark"] select.select, [data-theme="dark"] textarea.textarea { background-color: #383838 !important; border-color: rgba(255, 255, 255, 0.08); color: #e2e8f0; } /* Style dropdown option list for daisyUI selects in dark mode */ [data-theme="dark"] select.select option { background-color: #272727; color: #e2e8f0; } [data-theme="dark"] input.input::placeholder, [data-theme="dark"] textarea.textarea::placeholder { color: #919BB0; } [data-theme="dark"] .google-login-text-container { background-color: rgba(255, 255, 255, 0.06); } /* ========================================== DUK / FAQ page ========================================== */ [data-theme="dark"] .main { background: #1a1a1e !important; } [data-theme="dark"] .item { background: rgba(255, 255, 255, 0.04) padding-box, linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)) border-box; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .divfaq-answer { color: var(--color-slategray); } [data-theme="dark"] .divcontact-body { background-color: var(--color-white) !important; } [data-theme="dark"] .contact-information{ color: #fff !important; } /* ========================================== Step icons (envelope, profile, monitor) ========================================== */ [data-theme="dark"] .envelope-icon, [data-theme="dark"] .usercircle-icon, [data-theme="dark"] .monitorplay-icon { filter: brightness(0) invert(37%); } /* ========================================== Buttons ========================================== */ [data-theme="dark"] .buttonbtn { background-color: var(--color-ghostwhite-100); border-color: var(--color-lavender-100); color: #fff; } /* ========================================== Misc overrides ========================================== */ /* Title text — keep visible on dark */ [data-theme="dark"] .title, [data-theme="dark"] .title2, [data-theme="dark"] .subtitle { color: var(--color-gray-100); } /* Transaction/payment rows border */ [data-theme="dark"] .divpayment-item { border-bottom-color: var(--color-lavender-100); } /* ========================================== Theme toggle button (sun/moon icon) ========================================== */ .theme-toggle-btn { display: flex; align-items: center; justify-content: center; cursor: pointer; background: none; border: none; padding: 6px; border-radius: 50%; transition: background 0.2s ease; color: var(--color-gray-100); width: 32px; height: 32px; line-height: 1; } .theme-toggle-btn:hover { background: rgba(128, 128, 128, 0.15); } .theme-toggle-btn svg { width: 20px; height: 20px; display: block; } /* Show/hide icons based on theme */ [data-theme="dark"] .theme-toggle-btn .icon-sun { display: block; } [data-theme="dark"] .theme-toggle-btn .icon-moon { display: none; } .theme-toggle-btn .icon-sun { display: none; } .theme-toggle-btn .icon-moon { display: block; } [data-theme="dark"] img[src*="Apple.webp"], [data-theme="dark"] img[src*="Samsung.webp"] { filter: brightness(0) invert(1); } /* Swap LG and Google logos with dark-mode versions */ [data-theme="dark"] img[src*="LG.webp"] { content: url("../img/irenginiai/LG-dark.webp"); } [data-theme="dark"] img[src*="Google.webp"] { content: url("../img/irenginiai/Google-dark.webp"); } /* Swap Mastercard ID Check with dark-mode version */ [data-theme="dark"] img[src*="Mastercard_ID_Check.webp"] { content: url("../img/payment/Mastercard_ID_Check_dark.webp"); }