/* ============================================= LIGHT MODE — Applied via [data-mode="light"] on Same structure as snaptik.vn light theme ============================================= */ [data-mode="light"] { --black: #f4f4f6; --dark: #eaeaec; --dark2: #ffffff; --dark3: #f0f0f2; --gray: #555555; --gray-light: #333333; --white: #1d1d1d; --border: rgba(0,0,0,0.09); --white-soft: rgba(0,0,0,0.04); --shadow: 0 4px 24px rgba(0,0,0,0.10); } /* Header */ [data-mode="light"] .site-header { background: rgba(244,244,246,0.97); border-bottom-color: rgba(0,0,0,0.07); } [data-mode="light"] .site-logo { color: #1d1d1d; } [data-mode="light"] .header-menu-link { color: #555; } [data-mode="light"] .header-menu-link:hover { color: var(--red); } [data-mode="light"] .lang-btn { background:rgba(0,0,0,0.05); border-color:rgba(0,0,0,0.1); color:#333; } [data-mode="light"] .lang-dropdown { background:#fff; border-color:rgba(0,0,0,0.1); } [data-mode="light"] .lang-dropdown a { color:#333; } [data-mode="light"] .lang-dropdown a:hover { background:rgba(0,0,0,0.04); color:#1d1d1d; } [data-mode="light"] .mode-toggle { background:rgba(0,0,0,0.06); border-color:rgba(0,0,0,0.1); color:#333; } /* Hero */ [data-mode="light"] .hero { background: linear-gradient(180deg, #ffe0e6 0%, #f4f4f6 100%); } [data-mode="light"] .hero h1 { color: #1d1d1d; } [data-mode="light"] .hero-desc { color: #555; } [data-mode="light"] .downloader-box { background:#fff; border-color:rgba(0,0,0,0.1); box-shadow:0 8px 32px rgba(254,44,85,0.08); } [data-mode="light"] .url-input { color:#1d1d1d; } [data-mode="light"] .url-input::placeholder { color:#aaa; } /* TOC */ [data-mode="light"] .toc-nav { background:#fff; border-color:rgba(0,0,0,0.07); } [data-mode="light"] .toc-list a { color:#666; } [data-mode="light"] .toc-list a:hover { background:rgba(0,0,0,0.05); color:#1d1d1d; } /* Main Content */ [data-mode="light"] .site-main h2 { color:#1d1d1d; } [data-mode="light"] .site-main h3 { color:#1d1d1d; } [data-mode="light"] .site-main p { color:#444; } [data-mode="light"] .site-main li { color:#444; } [data-mode="light"] .site-main strong { color:#1d1d1d; } [data-mode="light"] .site-main a { color:var(--red); } [data-mode="light"] .content-img { border-color:rgba(0,0,0,0.08); } [data-mode="light"] .content-img-caption { color:#888; } /* HowTo step */ [data-mode="light"] .howto-step-content p { color:#555; } /* Feature cards */ [data-mode="light"] .feature-card { background:#fff; border-color:rgba(0,0,0,0.08); } [data-mode="light"] .feature-card:hover { border-color:rgba(254,44,85,0.2); background:#fafafa; } [data-mode="light"] .feature-title { color:#1d1d1d; } [data-mode="light"] .feature-desc { color:#666; } /* FAQ */ [data-mode="light"] .faq-item { border-color:rgba(0,0,0,0.09); } [data-mode="light"] .faq-question { background:#fff; color:#1d1d1d; } [data-mode="light"] .faq-question:hover { background:#f8f8f8; } [data-mode="light"] .faq-icon { background:rgba(0,0,0,0.07); } [data-mode="light"] .faq-item.open .faq-icon { background:var(--red); } [data-mode="light"] .faq-answer { background:#fafafa; color:#444; } /* Modal */ [data-mode="light"] .modal-overlay { background:rgba(0,0,0,0.5); } [data-mode="light"] .modal-box { background:#fff; border-color:rgba(0,0,0,0.1); } [data-mode="light"] .modal-close { color:#aaa; } [data-mode="light"] .modal-title { color:#1d1d1d; } [data-mode="light"] .modal-status { color:#555; } [data-mode="light"] .modal-status.is-success { color:#207341; } [data-mode="light"] .modal-status.is-error { color:#b7233d; } [data-mode="light"] .modal-status.is-loading::before { border-color:rgba(0,0,0,0.18); border-top-color:var(--red); } [data-mode="light"] .download-preview, [data-mode="light"] .download-image-card { background:#f8f8f8; border-color:rgba(0,0,0,0.09); } [data-mode="light"] .download-preview-thumb, [data-mode="light"] .download-image-card img { background:#ececef; } [data-mode="light"] .download-preview-title { color:#1d1d1d; } [data-mode="light"] .download-preview-author, [data-mode="light"] .download-preview-description { color:#555; } [data-mode="light"] .download-preview-details, [data-mode="light"] .progress-text { color:#777; } [data-mode="light"] .btn-dl-option { background:#f5f5f5; color:#1d1d1d; border-color:rgba(0,0,0,0.1); } [data-mode="light"] .btn-dl-option:hover { background:var(--red); color:#fff; } [data-mode="light"] .btn-dl-option .download-action-detail { color:#777; } [data-mode="light"] .btn-dl-option[aria-disabled="true"]:hover { background:#f5f5f5; border-color:rgba(0,0,0,0.1); color:#1d1d1d; } /* Footer */ [data-mode="light"] .site-footer { background:#eaeaec; border-top-color:rgba(0,0,0,0.07); } [data-mode="light"] .footer-brand-logo { color:#1d1d1d; } [data-mode="light"] .footer-tagline-small { color:#777; } [data-mode="light"] .footer-desc { color:#666; } [data-mode="light"] .footer-col-title { color:#555; } [data-mode="light"] .footer-col a { color:#555; } [data-mode="light"] .footer-col a:hover { color:#1d1d1d; } [data-mode="light"] .footer-bottom { border-top-color:rgba(0,0,0,0.07); } [data-mode="light"] .footer-copyright { color:#666; } [data-mode="light"] .footer-copyright a { color:#777; } [data-mode="light"] .footer-disclaimer { color:#999; } /* Cookie */ [data-mode="light"] .cookie-banner { background:#fff; border-top-color:rgba(0,0,0,0.08); color:#555; } /* CMS Pages */ [data-mode="light"] .cms-hero { background:linear-gradient(180deg,#ffe0e6 0%,#f4f4f6 100%); } [data-mode="light"] .cms-hero h1 { color:#1d1d1d; } [data-mode="light"] .cms-content h2, [data-mode="light"] .cms-content h3 { color:#1d1d1d; } [data-mode="light"] .cms-content p, [data-mode="light"] .cms-content li { color:#444; } [data-mode="light"] .contact-form { background:#fff; border-color:rgba(0,0,0,0.08); } [data-mode="light"] .form-input, [data-mode="light"] .form-textarea { background:#f8f8f8; border-color:rgba(0,0,0,0.12); color:#1d1d1d; } /* Smooth transitions for mode switch */ html, body, .site-header, .hero, .downloader-box, .feature-card, .faq-question, .faq-answer, .faq-item, .site-footer, .modal-box, .lang-btn, .lang-dropdown, .toc-nav, .cookie-banner, .cms-hero, .contact-form { transition: background-color 0.25s ease, color 0.15s ease, border-color 0.2s ease; }