/* ============================================================ GlowDailyHub — Dark Mode Theme (dark-mode.css) Overrides CSS custom properties when [data-theme="dark"] is set on . No existing selectors are modified. ============================================================ */ /* ─── Smooth transition for theme switching ────────────────── */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, fill 0.35s ease, stroke 0.35s ease !important; } /* ─── Dark theme variable overrides ────────────────────────── */ [data-theme="dark"] { /* Colors — Primary (slightly adjusted for dark backgrounds) */ --midnight: #0D0D1A; --deep-navy: #111827; --accent-rose: #F06580; --accent-rose-dark: #E94560; --accent-rose-light: #FF8FA3; --warm-gold: #E8C97A; --warm-gold-dark: #D4A853; --warm-gold-light: #F0D99A; --violet: #B8A4FB; --violet-dark: #A78BFA; /* Colors — Neutral (inverted for dark mode) */ --soft-blush: #1E1E2E; --cloud: #111118; --cream: #1A1A28; --smoke: #9CA3AF; --smoke-light: #6B7280; --charcoal: #E5E7EB; --white: #F9FAFB; --black: #000000; /* Colors — Glass & Overlays */ --glass-white: rgba(255, 255, 255, 0.05); --glass-border: rgba(255, 255, 255, 0.08); --overlay-dark: rgba(0, 0, 0, 0.65); --overlay-darker: rgba(0, 0, 0, 0.85); /* Shadows — softer, darker for dark mode */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6); --shadow-glow-rose: 0 0 30px rgba(240, 101, 128, 0.25); --shadow-glow-gold: 0 0 30px rgba(232, 201, 122, 0.25); } /* ═══════════════════════════════════════════════════════════════ COMPONENT OVERRIDES Only targets components that use hard-coded colors instead of CSS variables (rgba values, hex literals, etc.) ═══════════════════════════════════════════════════════════════ */ /* ─── Body ─────────────────────────────────────────────────── */ [data-theme="dark"] body { background-color: #111118; color: #E5E7EB; } /* ─── Navbar ───────────────────────────────────────────────── */ [data-theme="dark"] .navbar { background: rgba(17, 17, 24, 0.92); border-bottom-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .navbar--scrolled { background: rgba(17, 17, 24, 0.97); border-bottom-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .navbar__search-btn:hover { background: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .navbar__hamburger:hover { background: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .navbar__hamburger span { background: #D1D5DB; } /* ─── Dark Mode Toggle Button ──────────────────────────────── */ .theme-toggle { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; cursor: pointer; transition: all 150ms ease; background: transparent; border: none; color: var(--smoke); position: relative; overflow: hidden; } .theme-toggle:hover { background: var(--soft-blush); color: var(--charcoal); } [data-theme="dark"] .theme-toggle:hover { background: rgba(255, 255, 255, 0.08); } .theme-toggle__icon { width: 20px; height: 20px; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease; } /* Sun icon (shown in dark mode, click to go light) */ .theme-toggle__sun { position: absolute; opacity: 0; transform: rotate(-90deg) scale(0.5); } /* Moon icon (shown in light mode, click to go dark) */ .theme-toggle__moon { opacity: 1; transform: rotate(0deg) scale(1); } [data-theme="dark"] .theme-toggle__sun { opacity: 1; transform: rotate(0deg) scale(1); } [data-theme="dark"] .theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(0.5); } /* ─── Mobile Menu ──────────────────────────────────────────── */ [data-theme="dark"] .mobile-menu__panel { background: #16161F; border-left-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .mobile-menu__header { border-bottom-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .mobile-menu__link { border-bottom-color: rgba(255, 255, 255, 0.04); } [data-theme="dark"] .mobile-menu__link:hover, [data-theme="dark"] .mobile-menu__link.active { background: rgba(255, 255, 255, 0.05); } /* ─── Search Overlay ───────────────────────────────────────── */ [data-theme="dark"] .search-overlay { background: rgba(13, 13, 26, 0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } [data-theme="dark"] .search-overlay__close { color: #9CA3AF; } [data-theme="dark"] .search-overlay__close:hover { background: rgba(255, 255, 255, 0.08); color: #E5E7EB; } [data-theme="dark"] .search-overlay__input { background: transparent; border-bottom-color: var(--accent-rose); color: #E5E7EB; } [data-theme="dark"] .search-overlay__input::placeholder { color: #6B7280; } [data-theme="dark"] .search-overlay__label { color: #6B7280; } [data-theme="dark"] .search-overlay__list a { color: #9CA3AF; } [data-theme="dark"] .search-overlay__list a:hover { color: #F06580; } /* ─── Cards ────────────────────────────────────────────────── */ [data-theme="dark"] .card { background: #1A1A28; } [data-theme="dark"] .card__image-wrap { background: #252535; } [data-theme="dark"] .card__like-btn { background: rgba(26, 26, 40, 0.9); color: #D1D5DB; } [data-theme="dark"] .card__like-btn:hover { background: #1A1A28; } [data-theme="dark"] .card--skeleton .card__image-wrap, [data-theme="dark"] .card--skeleton .card__title, [data-theme="dark"] .card--skeleton .card__meta { background: linear-gradient(90deg, #1E1E2E 25%, #252535 50%, #1E1E2E 75%); background-size: 200% 100%; } /* ─── Pills (Subcategory Filters) ──────────────────────────── */ [data-theme="dark"] .pill { background: #1E1E2E; border-color: rgba(255, 255, 255, 0.1); color: #9CA3AF; } [data-theme="dark"] .pill:hover { border-color: var(--accent-rose); background: rgba(240, 101, 128, 0.08); } /* ─── Filter Bar ───────────────────────────────────────────── */ [data-theme="dark"] .filter-bar { background: rgba(17, 17, 24, 0.95); border-bottom-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .filter-bar__sort-select { background: #1E1E2E; border-color: rgba(255, 255, 255, 0.1); color: #D1D5DB; } [data-theme="dark"] .filter-bar__search-input { background: #1E1E2E; border-color: rgba(255, 255, 255, 0.1); color: #D1D5DB; } /* ─── Badges ───────────────────────────────────────────────── */ [data-theme="dark"] .badge--room-design { background: rgba(212, 168, 83, 0.15); color: #E8C97A; } [data-theme="dark"] .badge--hairstyles { background: rgba(240, 101, 128, 0.15); color: #F06580; } [data-theme="dark"] .badge--nail-designs { background: rgba(184, 164, 251, 0.15); color: #B8A4FB; } /* ─── Carousel Nav ─────────────────────────────────────────── */ [data-theme="dark"] .carousel__nav { background: #1E1E2E; border-color: rgba(255, 255, 255, 0.08); color: #D1D5DB; } /* ─── Category Hero ────────────────────────────────────────── */ [data-theme="dark"] .category-hero { background: linear-gradient( 135deg, #0D0D1A 0%, #111827 50%, color-mix(in srgb, var(--cat-accent, #F06580) 15%, #0D0D1A) 100% ); } /* ─── Homepage Hero Slider ─────────────────────────────────── */ [data-theme="dark"] .hero-slider { background: #0D0D1A; } [data-theme="dark"] .page-home .hero-slider { border-bottom-color: #1E2130; } [data-theme="dark"] .hero-slider__image-wrap { background: linear-gradient(120deg, #211A14, #181410 60%, #1E1812); } [data-theme="dark"] .hero-slider__image-wrap--nail-designs { background: linear-gradient(120deg, #2C1822, #1E1620 60%, #241622); } [data-theme="dark"] .hero-slider__image-wrap--room-design { background: linear-gradient(120deg, #1C1A14, #15140F 60%, #181A12); } [data-theme="dark"] .hero-slider__title { color: #F3F4F6; } [data-theme="dark"] .hero-slider__desc { color: #9CA3AF; } [data-theme="dark"] .hero-slider__badge { background: rgba(255, 79, 123, 0.15); } [data-theme="dark"] .hero-slider__arrow { background: #1A1D27; border-color: #2D3748; color: #E5E7EB; } [data-theme="dark"] .hero-slider__arrow:hover { background: #FF4F7B; border-color: #FF4F7B; color: #FFFFFF; } [data-theme="dark"] .hero-slider__dot { background: #4B5563; } /* ─── Homepage Sections (white/cloud backgrounds → dark) ──── */ [data-theme="dark"] .page-home .trending-section { background: #0E0E16; } [data-theme="dark"] .page-home .collections-section { background: #141420; } [data-theme="dark"] .page-home .category-section { background: #111118; } [data-theme="dark"] .page-home .category-section:nth-child(even) { background: #141420; } [data-theme="dark"] .page-home .latest-section { background: #0E0E16; } [data-theme="dark"] .page-home .pinterest-cta-section, [data-theme="dark"] .pinterest-cta { background: linear-gradient(135deg, #1A1A28, #16161F); } [data-theme="dark"] .page-home .newsletter-section { background: #141420; } [data-theme="dark"] .category-section__subtitle { color: #9CA3AF; } [data-theme="dark"] .category-section__view-all { color: var(--accent-rose); } /* ─── Category Page Sections ───────────────────────────────── */ [data-theme="dark"] .page-category .filter-bar { background: #141420; border-bottom-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .page-category .masonry-wrapper, [data-theme="dark"] .page-category .category-posts { background: #111118; } /* ─── Search Page ──────────────────────────────────────────── */ [data-theme="dark"] .page-search .search-results { background: #111118; } [data-theme="dark"] .search-hero { background: linear-gradient(135deg, #0D0D1A, #111827); } [data-theme="dark"] .search-hero__input { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); color: #E5E7EB; } [data-theme="dark"] .search-hero__input::placeholder { color: #6B7280; } /* ─── Article Page ─────────────────────────────────────────── */ [data-theme="dark"] .article-intro { color: #D1D5DB; } [data-theme="dark"] .article-header__title { color: #F3F4F6; } [data-theme="dark"] .article-header__meta { color: #9CA3AF; border-bottom-color: #2D3748; } [data-theme="dark"] .article-layout { background: #0D0D1A; } [data-theme="dark"] .article-toc { background: #141422; border-color: rgba(255, 79, 123, 0.15); } [data-theme="dark"] .article-toc__title { color: #F3F4F6; } [data-theme="dark"] .article-toc__link { color: #D1D5DB; } [data-theme="dark"] .article-ideas__heading { color: #F3F4F6; } [data-theme="dark"] .idea-card { background: #141422; border-color: rgba(255, 79, 123, 0.12); } [data-theme="dark"] .idea-card__title { color: #F3F4F6; } [data-theme="dark"] .idea-card__desc { color: #9CA3AF; } [data-theme="dark"] .idea-card__save { border-color: #FF4F7B; color: #FF4F7B; } [data-theme="dark"] .idea-card__save:hover { background: #FF4F7B; color: #FFFFFF; } [data-theme="dark"] .sidebar-widget { background: #141422; border-color: rgba(255, 79, 123, 0.12); } [data-theme="dark"] .sidebar-widget__title { color: #F3F4F6; } [data-theme="dark"] .sidebar-widget__text { color: #9CA3AF; } [data-theme="dark"] .sidebar-author__name { color: #F3F4F6; } [data-theme="dark"] .sidebar-author__bio { color: #9CA3AF; } [data-theme="dark"] .sidebar-author__avatar--placeholder { background: rgba(255, 79, 123, 0.15); } [data-theme="dark"] .sidebar-popular__title { color: #E5E7EB; } [data-theme="dark"] .sidebar-popular__thumb--placeholder { background: rgba(255, 79, 123, 0.15); } [data-theme="dark"] .sidebar-newsletter__input { background: #1A1A28; border-color: #2D3748; color: #F3F4F6; } [data-theme="dark"] .sidebar-share__icon { background: #1A1A28; color: #9CA3AF; } [data-theme="dark"] .sidebar-share__icon:hover { background: #FF4F7B; color: #FFFFFF; } [data-theme="dark"] .save-collection-cta { background: linear-gradient(135deg, rgba(30, 30, 46, 0.6), rgba(26, 26, 40, 0.8)); border-color: rgba(240, 101, 128, 0.12); } [data-theme="dark"] .related-posts { background: #0E0E16; } [data-theme="dark"] .article-gallery__caption { color: #9CA3AF; } /* ─── Collection Card ──────────────────────────────────────── */ [data-theme="dark"] .collection-card { background: #1A1A28; border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .collection-card__title { color: #E5E7EB; } [data-theme="dark"] .collection-card__count { color: #9CA3AF; } /* ─── Pin Overlay ──────────────────────────────────────────── */ [data-theme="dark"] .pin-overlay__btn { background: rgba(26, 26, 40, 0.9); color: #D1D5DB; } [data-theme="dark"] .pin-overlay__btn:hover { background: #1A1A28; } /* ─── Card Body (explicit override) ────────────────────────── */ [data-theme="dark"] .card__body { background: #1A1A28; } [data-theme="dark"] .card__title a { color: #E5E7EB; } [data-theme="dark"] .card__saves { color: #9CA3AF; } /* ─── Section backgrounds using --white (catch-all) ────────── */ [data-theme="dark"] .section[class*="section"] { border-color: rgba(255, 255, 255, 0.04); } /* ─── 404 Page ─────────────────────────────────────────────── */ [data-theme="dark"] .page-404 { background: #111118; } /* ─── Footer ───────────────────────────────────────────────── */ [data-theme="dark"] .footer { background: linear-gradient(180deg, #12121F 0%, #0D0D1A 60%); color: #9CA3AF; } [data-theme="dark"] .footer__logo { color: #F3F4F6; } [data-theme="dark"] .footer__tagline, [data-theme="dark"] .footer__social-intro { color: #9CA3AF; } [data-theme="dark"] .footer__heading { color: #E5E7EB; } [data-theme="dark"] .footer__link { color: #9CA3AF; } [data-theme="dark"] .footer__link--icon { color: #E5E7EB; } [data-theme="dark"] .footer__link:hover, [data-theme="dark"] .footer__link--row:hover .footer__chevron { color: #F06580; } [data-theme="dark"] .footer__link-badge { background: rgba(240, 101, 128, 0.16); color: #F06580; } [data-theme="dark"] .footer__link--icon:hover .footer__link-badge { background: #F06580; color: #0D0D1A; } [data-theme="dark"] .footer__chevron { color: #6B7280; } [data-theme="dark"] .footer__social-link { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); box-shadow: none; } [data-theme="dark"] .footer__social-link--tiktok { color: #F3F4F6; } [data-theme="dark"] .footer__bottom { border-top-color: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.4); } /* ─── Back to Top ──────────────────────────────────────────── */ [data-theme="dark"] .back-to-top { background: #1E1E2E; border-color: rgba(255, 255, 255, 0.08); color: #D1D5DB; } [data-theme="dark"] .back-to-top:hover { background: #252535; } /* ─── Mobile Menu Background ───────────────────────────────── */ [data-theme="dark"] .mobile-menu { background: rgba(0, 0, 0, 0.6); } [data-theme="dark"] .mobile-menu__nav { background: #16161F; } /* ─── Newsletter ───────────────────────────────────────────── */ [data-theme="dark"] .newsletter { background: linear-gradient(135deg, #1A1A28, #16161F); } [data-theme="dark"] .newsletter__input { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); color: #E5E7EB; } [data-theme="dark"] .newsletter__input::placeholder { color: #6B7280; } /* ─── Breadcrumbs ──────────────────────────────────────────── */ [data-theme="dark"] .breadcrumbs a { color: #9CA3AF; } [data-theme="dark"] .breadcrumbs a:hover { color: #F06580; } [data-theme="dark"] .breadcrumbs__separator { color: #4B5563; } [data-theme="dark"] .breadcrumbs__current { color: #D1D5DB; } /* ─── Lightbox ─────────────────────────────────────────────── */ [data-theme="dark"] .lightbox__content { background: #16161F; } [data-theme="dark"] .lightbox__counter, [data-theme="dark"] .lightbox__caption { color: #D1D5DB; } /* ─── Gallery ──────────────────────────────────────────────── */ [data-theme="dark"] .gallery__item { background: #1E1E2E; } [data-theme="dark"] .gallery__caption { color: #9CA3AF; } /* ─── Pagination ───────────────────────────────────────────── */ [data-theme="dark"] .pagination a, [data-theme="dark"] .pagination span { background: #1E1E2E; border-color: rgba(255, 255, 255, 0.08); color: #9CA3AF; } [data-theme="dark"] .pagination a:hover { background: rgba(240, 101, 128, 0.1); border-color: var(--accent-rose); color: var(--accent-rose); } [data-theme="dark"] .pagination .current { background: var(--accent-rose); border-color: var(--accent-rose); color: #fff; } /* ─── Ad Slots ─────────────────────────────────────────────── */ [data-theme="dark"] .ad-slot { background: rgba(255, 255, 255, 0.02); border-color: rgba(255, 255, 255, 0.04); color: #4B5563; } /* ─── Empty States ─────────────────────────────────────────── */ [data-theme="dark"] .empty-state__title { color: #D1D5DB; } [data-theme="dark"] .empty-state__text { color: #6B7280; } /* ─── Author Card ──────────────────────────────────────────── */ [data-theme="dark"] .author-card { background: #1A1A28; border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .author-card__name { color: #E5E7EB; } [data-theme="dark"] .author-card__bio { color: #9CA3AF; } /* ─── Scrollbar (brand rose, dark track) ───────────────────────── */ [data-theme="dark"] * { scrollbar-color: var(--accent-rose) #111118; } [data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #111118; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--accent-rose); border-radius: 999px; border: 3px solid #111118; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--accent-rose-light); } /* ─── Selection ────────────────────────────────────────────── */ [data-theme="dark"] ::selection { background-color: rgba(240, 101, 128, 0.25); color: #FFD4DF; } /* ─── Mobile Menu Dark Toggle ──────────────────────────────── */ .mobile-menu__theme-toggle { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; color: var(--smoke); font-size: var(--text-sm); font-weight: var(--fw-medium); cursor: pointer; border-top: 1px solid rgba(0, 0, 0, 0.06); margin-top: var(--space-sm); transition: all 150ms ease; } .mobile-menu__theme-toggle:hover { background: rgba(0, 0, 0, 0.03); } [data-theme="dark"] .mobile-menu__theme-toggle { border-top-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .mobile-menu__theme-toggle:hover { background: rgba(255, 255, 255, 0.05); } .mobile-menu__theme-toggle-track { width: 44px; height: 24px; background: #D1D5DB; border-radius: 12px; position: relative; transition: background 0.3s ease; } [data-theme="dark"] .mobile-menu__theme-toggle-track { background: var(--accent-rose); } .mobile-menu__theme-toggle-thumb { width: 20px; height: 20px; background: #fff; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .mobile-menu__theme-toggle-thumb { transform: translateX(20px); }