/* ============================================================ THEME SYSTEM — hasib.online Active theme is set via Default (no attribute) = original "Vintage Grunge" look. ============================================================ */ /* ── 1. MIDNIGHT DARK ─────────────────────────────────────── */ [data-theme="midnight"] { --site-bg: #0d1117; --text: #e6edf3; --muted: #8b949e; --surface: rgba(22,27,34,0.95); --search-grad-start: rgba(22,27,34,0.92); --search-grad-end: rgba(13,17,23,0.8); --search-btn-bg: rgba(136,192,208,0.9); --chip-bg: rgba(48,54,61,0.85); --chip-text: #c9d1d9; --chip-active-bg: #58a6ff; --chip-active-text: #fff; --theme-accent: #58a6ff; --theme-accent-alpha: rgba(88,166,255,0.15); --theme-accent-hover: rgba(88,166,255,0.05); --ramadan-gradient: linear-gradient(135deg, #1f6feb, #388bfd); --ramadan-gradient-hover: linear-gradient(135deg, #388bfd, #58a6ff); --ramadan-shadow: rgba(31,111,235,0.3); /* Surface chip/divider colours on dark background */ --chip-dark-bg: rgba(255,255,255,0.07); --chip-dark-border: rgba(255,255,255,0.10); --handle-bg: rgba(255,255,255,0.14); } [data-theme="midnight"] body { background-color: #0d1117; color: #e6edf3; background-image: none; } [data-theme="midnight"] body::before { display: none; } [data-theme="midnight"] .header { background: rgba(13, 17, 23, 0.85); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid rgba(48, 54, 61, 0.4); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6); } [data-theme="midnight"] .logo h1 { color: #e6edf3; } [data-theme="midnight"] .main-nav ul li a { color: #8b949e; } [data-theme="midnight"] .main-nav ul li a:hover, [data-theme="midnight"] .main-nav ul li a.active { color: #58a6ff; } [data-theme="midnight"] .service-card { background: linear-gradient(145deg, #161b22 0%, #0d1117 100%); border-color: rgba(48,54,61,0.5); } [data-theme="midnight"] .service-card:hover { background: linear-gradient(145deg, #1c2128 0%, #161b22 100%); box-shadow: 0 20px 40px rgba(0,0,0,0.6); } [data-theme="midnight"] .service-card p { color: #8b949e; } [data-theme="midnight"] .card-link { color: #58a6ff; border-color: #30363d; } [data-theme="midnight"] .card-link:hover { background: rgba(88,166,255,0.1); border-color: #58a6ff; } [data-theme="midnight"] .footer { background: #010409; } [data-theme="midnight"] .footer-info h4 { color: #e6edf3; } [data-theme="midnight"] .footer-info p { color: #8b949e; } [data-theme="midnight"] .footer-nav a { color: #484f58; } [data-theme="midnight"] .footer-nav a:hover { color: #58a6ff; } [data-theme="midnight"] .footer-thumbnail { border-color: #30363d; } [data-theme="midnight"] .footer-gallery-item { border-color: #21262d; } [data-theme="midnight"] .book-btn { border-color: #30363d; color: #e6edf3; } [data-theme="midnight"] .book-btn:hover { background: #58a6ff; color: #fff; border-color: #58a6ff; } [data-theme="midnight"] .gallery-item img { filter: grayscale(30%) contrast(1.05) brightness(0.92); } [data-theme="midnight"] .gallery-item:hover img { filter: grayscale(0%) contrast(1.1) brightness(1.05) saturate(1.15); } [data-theme="midnight"] .hero-image img { filter: grayscale(30%) contrast(1.05) brightness(0.92); } [data-theme="midnight"] .hero-image:hover img { filter: grayscale(0%) contrast(1.08) brightness(1.05) saturate(1.1); } [data-theme="midnight"] .grunge-texture { display: none; } /* Midnight navbar - matches the dark frosted glass aesthetic */ [data-theme="midnight"] .fb-nav { background: rgba(13, 17, 23, 0.85) !important; backdrop-filter: blur(14px) saturate(140%) !important; -webkit-backdrop-filter: blur(14px) saturate(140%) !important; border: 1px solid rgba(48, 54, 61, 0.4) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(88, 166, 255, 0.1) !important; } [data-theme="midnight"] .fb-nav .nav-logo-text { color: #e6edf3; } [data-theme="midnight"] .fb-nav .desktop-nav a { color: #8b949e; } [data-theme="midnight"] .fb-nav .desktop-nav a:hover { color: #e6edf3; background: rgba(255, 255, 255, 0.06); } [data-theme="midnight"] .fb-nav .desktop-nav a.active { color: #fff; background: linear-gradient(180deg, #58a6ff 0%, #3880d0 100%); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05); } [data-theme="midnight"] .fb-nav .nav-search { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.05); } [data-theme="midnight"] .fb-nav .nav-search input { color: #e6edf3; } [data-theme="midnight"] .fb-nav .nav-search input::placeholder { color: #484f58; } [data-theme="midnight"] .fb-nav .nav-search button { color: #8b949e; } [data-theme="midnight"] .service-label { color: #8b949e; } /* Blog page */ [data-theme="midnight"] .blog-section, [data-theme="midnight"] .gallery-page-section, [data-theme="midnight"] .about-section, [data-theme="midnight"] .services-section, [data-theme="midnight"] .contact-section, [data-theme="midnight"] .projects-section { color: #e6edf3; } [data-theme="midnight"] .blog-section h2, [data-theme="midnight"] .gallery-page-header h2, [data-theme="midnight"] .about-intro h2, [data-theme="midnight"] .contact-header h2 { color: #e6edf3; } [data-theme="midnight"] .blog-card { background: #161b22; border-color: #30363d; } [data-theme="midnight"] .blog-card h3 { color: #e6edf3; } [data-theme="midnight"] .blog-card p { color: #8b949e; } [data-theme="midnight"] .gallery-page-item { border-color: #21262d; } /* Contact form */ [data-theme="midnight"] .contact-form { background: #161b22; } [data-theme="midnight"] .contact-form input, [data-theme="midnight"] .contact-form textarea, [data-theme="midnight"] .contact-form select { background: #0d1117; border-color: #30363d; color: #e6edf3; } [data-theme="midnight"] .contact-form label { color: #8b949e; } [data-theme="midnight"] .submit-btn { background: #58a6ff; color: #fff; } [data-theme="midnight"] .submit-btn:hover { background: #79c0ff; } /* FAQ */ [data-theme="midnight"] .faq-item { background: #161b22; border-color: #30363d; } [data-theme="midnight"] .faq-item h4 { color: #e6edf3; } [data-theme="midnight"] .faq-item p { color: #8b949e; } /* Services page */ [data-theme="midnight"] .service-detail-card { background: #161b22; border-color: #30363d; } [data-theme="midnight"] .pricing-card { background: #161b22; border-color: #30363d; } [data-theme="midnight"] .pricing-card.featured { border-color: #58a6ff; } /* About page */ [data-theme="midnight"] .about-card { background: #161b22; border-color: #30363d; } [data-theme="midnight"] .about-card h3 { color: #e6edf3; } [data-theme="midnight"] .about-card p { color: #8b949e; } [data-theme="midnight"] .timeline-item { border-color: #30363d; } [data-theme="midnight"] .timeline-year { color: #58a6ff; } [data-theme="midnight"] .equipment-item { background: #161b22; border-color: #30363d; color: #e6edf3; } /* filter / sort */ [data-theme="midnight"] .filter-btn { color: #8b949e; border-color: #30363d; } [data-theme="midnight"] .filter-btn.active { background: #58a6ff; color: #fff; border-color: #58a6ff; } [data-theme="midnight"] .sort-toggle { color: #8b949e; } [data-theme="midnight"] .sort-menu { background: #161b22; border-color: #30363d; } [data-theme="midnight"] .sort-btn { color: #8b949e; } [data-theme="midnight"] .sort-btn.active { color: #58a6ff; } /* ------------------------------------------------------------ FEATURED PAGE (ramadan calendar) - Midnight overrides Make the featured page darker and cohesive under midnight ------------------------------------------------------------ */ [data-theme="midnight"] .ramadan-section { color: var(--text); background: transparent; } [data-theme="midnight"] .ramadan-header { background: rgba(22,27,34,0.6) !important; box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important; } [data-theme="midnight"] .ramadan-header h2 { color: var(--text) !important; } [data-theme="midnight"] .ramadan-header p { color: var(--muted) !important; } [data-theme="midnight"] .countdown-section { background: linear-gradient(135deg,#0f1720 0%, #0b1116 100%) !important; border: 1px solid rgba(48,54,61,0.35) !important; box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important; } [data-theme="midnight"] .countdown-label { color: var(--muted) !important; } [data-theme="midnight"] .countdown-timer { color: var(--theme-accent) !important; } [data-theme="midnight"] .countdown-sublabel { color: rgba(139,148,158,0.8) !important; } [data-theme="midnight"] .today-card { background: linear-gradient(135deg,#161b22,#0d1117) !important; border: 1px solid rgba(48,54,61,0.35) !important; box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important; } [data-theme="midnight"] .today-card h4 { color: var(--theme-accent) !important; } [data-theme="midnight"] .today-time { color: var(--text) !important; } [data-theme="midnight"] .today-sub { color: rgba(139,148,158,0.85) !important; } [data-theme="midnight"] .progress-section { color: var(--muted) !important; } [data-theme="midnight"] .progress-bar-track { background: rgba(255,255,255,0.03) !important; } [data-theme="midnight"] .progress-bar-fill { background: linear-gradient(135deg,#1f6feb,#0f5fcf) !important; } [data-theme="midnight"] .action-btn.download { background: linear-gradient(135deg,#1f6feb,#0f5fcf) !important; color: #fff !important; box-shadow: 0 6px 18px rgba(15,30,50,0.5) !important; } [data-theme="midnight"] .action-btn.share { background: rgba(22,27,34,0.6) !important; color: var(--muted) !important; border-color: rgba(48,54,61,0.25) !important; box-shadow: 0 6px 18px rgba(0,0,0,0.45) !important; } [data-theme="midnight"] .share-dropdown-content { background: rgba(6,8,10,0.92) !important; color: var(--text) !important; backdrop-filter: blur(4px) !important; } [data-theme="midnight"] .share-option { color: var(--text) !important; } [data-theme="midnight"] .share-option:hover { background: rgba(88,166,255,0.08) !important; } [data-theme="midnight"] .calendar-container { background: linear-gradient(135deg,#0b1116 0%, #071018 100%) !important; border: 1px solid rgba(48,54,61,0.35) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.65) !important; } [data-theme="midnight"] .ramadan-table thead { background: linear-gradient(135deg,#0d1117,#0b0f14) !important; color: #e6edf3 !important; } [data-theme="midnight"] .ramadan-table thead th { color: #cfe9ff !important; } [data-theme="midnight"] .ramadan-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.03) !important; } [data-theme="midnight"] .ramadan-table tbody tr:hover { background: rgba(88,166,255,0.02) !important; } [data-theme="midnight"] .share-option.copy i { color: var(--theme-accent) !important; } /* ============================================================ COMPREHENSIVE THEME OVERRIDES Projects, Stats Sidebar, Floating Btn, Services Page, Contact Page, Blog Page, About Page, Gallery Page, Notification Popup, Error Pages, Nav, Sort/Cat Menus ============================================================ */ /* ───────────────────────────────────────────────────────────── MIDNIGHT DARK — Extended ───────────────────────────────────────────────────────────── */ /* -- Nav & Social -- */ [data-theme="midnight"] .social-icon { color: #8b949e; } [data-theme="midnight"] .social-icon:hover { color: #58a6ff; } [data-theme="midnight"] .main-nav { background: #0d1117; } [data-theme="midnight"] .main-nav ul li a.active { color: #58a6ff; } [data-theme="midnight"] .main-nav ul li a.active::after { background: #58a6ff; } /* -- Projects Page -- */ [data-theme="midnight"] .projects-header h2 { color: #e6edf3; } [data-theme="midnight"] .projects-header p { color: #8b949e; } [data-theme="midnight"] .projects-filter .filter-btn { background: rgba(22,27,34,0.8); border-color: #30363d; color: #8b949e; } [data-theme="midnight"] .projects-filter .filter-btn.active { background: #58a6ff; color: #fff; border-color: #58a6ff; } [data-theme="midnight"] .project-card { background: #161b22; border-color: #30363d; } [data-theme="midnight"] .project-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.5); } [data-theme="midnight"] .project-title { color: #e6edf3; } [data-theme="midnight"] .project-description { color: #8b949e; } [data-theme="midnight"] .tech-tag { background: rgba(48,54,61,0.6); color: #c9d1d9; } [data-theme="midnight"] .project-links { border-top-color: #30363d; } [data-theme="midnight"] .project-link.live { background: #58a6ff; color: #fff; } [data-theme="midnight"] .project-link.live:hover { background: #79c0ff; } [data-theme="midnight"] .project-link.github { background: rgba(48,54,61,0.5); color: #c9d1d9; } [data-theme="midnight"] .project-link.github:hover { background: rgba(48,54,61,0.8); } [data-theme="midnight"] .project-date { color: #8b949e; } [data-theme="midnight"] .no-projects { color: #8b949e; } [data-theme="midnight"] .project-image-placeholder { background: linear-gradient(135deg, #161b22, #21262d); color: rgba(139,148,158,0.3); } [data-theme="midnight"] .project-image img { filter: grayscale(30%) contrast(1.05) brightness(0.85); } [data-theme="midnight"] .project-card:hover .project-image img { filter: grayscale(0%) contrast(1.1) brightness(1.05) saturate(1.15); } /* -- Projects Floating Button -- */ [data-theme="midnight"] .projects-floating-btn { background: #161b22; color: #e6edf3; box-shadow: 0 4px 20px rgba(0,0,0,0.5); } [data-theme="midnight"] .projects-floating-btn:hover { background: #21262d; } /* -- Stats Sidebar -- */ [data-theme="midnight"] .stats-toggle { background: #161b22; color: #e6edf3; box-shadow: -3px 3px 15px rgba(0,0,0,0.4); } [data-theme="midnight"] .stats-toggle:hover { background: #21262d; } [data-theme="midnight"] .stats-toggle::after { background: rgba(139,148,158,0.3); } [data-theme="midnight"] .stats-card { background: linear-gradient(165deg, #161b22 0%, #0d1117 100%); border-left-color: rgba(48,54,61,0.3); border-bottom-color: rgba(48,54,61,0.3); } [data-theme="midnight"] .stats-profile { border-bottom-color: rgba(48,54,61,0.5); } [data-theme="midnight"] .stats-avatar { border-color: rgba(88,166,255,0.2); } [data-theme="midnight"] .stats-profile h4 { color: #e6edf3; } [data-theme="midnight"] .stats-tagline { color: rgba(139,148,158,0.8); } [data-theme="midnight"] .stats-location { color: rgba(139,148,158,0.7); } [data-theme="midnight"] .stat-item { background: rgba(48,54,61,0.4); border-color: rgba(48,54,61,0.3); } [data-theme="midnight"] .stat-item:hover { background: rgba(48,54,61,0.6); } [data-theme="midnight"] .stat-value { color: #e6edf3; } [data-theme="midnight"] .stat-label { color: rgba(139,148,158,0.7); } /* -- Blog Page Specifics -- */ [data-theme="midnight"] .blog-header h2 { color: #e6edf3; } [data-theme="midnight"] .blog-header p { color: #8b949e; } [data-theme="midnight"] .blog-category { background: #58a6ff; color: #fff; } [data-theme="midnight"] .blog-meta { color: #8b949e; } [data-theme="midnight"] .blog-card-content h3 { color: #e6edf3; } [data-theme="midnight"] .blog-card:hover h3 { color: #79c0ff; } [data-theme="midnight"] .blog-card-content p { color: #8b949e; } [data-theme="midnight"] .read-more { color: #58a6ff; } [data-theme="midnight"] .read-more:hover { color: #79c0ff; } [data-theme="midnight"] .blog-card img { filter: grayscale(30%) contrast(1.05) brightness(0.85); } [data-theme="midnight"] .blog-card:hover img { filter: grayscale(0%) contrast(1.1) brightness(1.05); } /* -- About Page Extras -- */ [data-theme="midnight"] .about-intro .tagline { color: #8b949e; } [data-theme="midnight"] .about-intro p { color: #8b949e; } [data-theme="midnight"] .about-card-icon { color: #58a6ff; } [data-theme="midnight"] .about-journey h3, [data-theme="midnight"] .about-equipment h3 { color: #e6edf3; } [data-theme="midnight"] .timeline::before { background: #30363d; } [data-theme="midnight"] .timeline-year { background: #58a6ff; color: #fff; } [data-theme="midnight"] .timeline-content { background: #161b22; } [data-theme="midnight"] .timeline-content h4 { color: #e6edf3; } [data-theme="midnight"] .timeline-content p { color: #8b949e; } [data-theme="midnight"] .equipment-item i { color: #58a6ff; } [data-theme="midnight"] .equipment-item span { color: #c9d1d9; } /* -- Gallery Page Extras -- */ [data-theme="midnight"] .gallery-page-header p { color: #8b949e; } [data-theme="midnight"] .gallery-page-item { background: #161b22; } /* -- Services Page Inline Overrides (!important needed) -- */ [data-theme="midnight"] .services-header h2 { color: #e6edf3; } [data-theme="midnight"] .services-header p { color: #8b949e; } [data-theme="midnight"] .service-card { background: #161b22 !important; border-color: #30363d !important; box-shadow: 0 5px 20px rgba(0,0,0,0.4) !important; } [data-theme="midnight"] .service-card:hover { background: #1c2128 !important; } [data-theme="midnight"] .service-card h3 { color: #e6edf3 !important; } [data-theme="midnight"] .service-card p { color: #8b949e !important; } [data-theme="midnight"] .service-icon { background: linear-gradient(135deg, #58a6ff, #388bfd) !important; } [data-theme="midnight"] .service-features li { color: #8b949e; border-bottom-color: #30363d; } [data-theme="midnight"] .service-features li i { color: #58a6ff; } [data-theme="midnight"] .service-btn { background: linear-gradient(135deg, #58a6ff, #388bfd); color: #fff; } [data-theme="midnight"] .pricing-section { background: #161b22; border-color: #30363d; box-shadow: 0 5px 20px rgba(0,0,0,0.4); } [data-theme="midnight"] .pricing-header h3 { color: #e6edf3; } [data-theme="midnight"] .pricing-header p { color: #8b949e; } [data-theme="midnight"] .pricing-card { background: #0d1117; border-color: #30363d; } [data-theme="midnight"] .pricing-card.featured { background: linear-gradient(135deg, #1f6feb, #388bfd); border-color: transparent; } [data-theme="midnight"] .pricing-card h4 { color: #e6edf3; } [data-theme="midnight"] .pricing-card.featured h4 { color: #fff; } [data-theme="midnight"] .pricing-card .price { color: #e6edf3; } [data-theme="midnight"] .pricing-card.featured .price { color: #fff; } [data-theme="midnight"] .pricing-card .price-note { color: #8b949e; } [data-theme="midnight"] .pricing-card.featured .price-note { color: rgba(255,255,255,0.7); } [data-theme="midnight"] .pricing-features li { color: #8b949e; border-bottom-color: #30363d; } [data-theme="midnight"] .pricing-card.featured .pricing-features li { color: rgba(255,255,255,0.9); border-bottom-color: rgba(255,255,255,0.15); } [data-theme="midnight"] .pricing-btn { background: linear-gradient(135deg, #58a6ff, #388bfd); color: #fff; } [data-theme="midnight"] .pricing-card.featured .pricing-btn { background: linear-gradient(135deg, #e6edf3, #c9d1d9); color: #0d1117; } [data-theme="midnight"] .cta-section { background: #161b22; border-color: #30363d; box-shadow: 0 5px 20px rgba(0,0,0,0.4); } [data-theme="midnight"] .cta-section h3 { color: #e6edf3; } [data-theme="midnight"] .cta-section p { color: #8b949e; } [data-theme="midnight"] .cta-btn.primary { background: linear-gradient(135deg, #e6edf3, #c9d1d9); color: #0d1117; } [data-theme="midnight"] .cta-btn.secondary { background: #58a6ff; color: #fff; } /* -- Contact Page Extras -- */ [data-theme="midnight"] .contact-header p { color: #8b949e; } [data-theme="midnight"] .contact-info { background: linear-gradient(145deg, #161b22, #0d1117); color: #e6edf3; } [data-theme="midnight"] .contact-icon { background: rgba(88,166,255,0.15); } [data-theme="midnight"] .contact-details p { color: #8b949e; } [data-theme="midnight"] .contact-social { border-top-color: #30363d; } [data-theme="midnight"] .contact-social h4 { background: #58a6ff; color: #fff; } [data-theme="midnight"] .social-links a { background: rgba(48,54,61,0.5); color: #e6edf3; } [data-theme="midnight"] .social-links a:hover { background: #58a6ff; color: #fff; } [data-theme="midnight"] .contact-form-wrapper { background: #161b22; } [data-theme="midnight"] .contact-form h3 { color: #e6edf3; } [data-theme="midnight"] .form-group label { color: #8b949e; } [data-theme="midnight"] .form-group input, [data-theme="midnight"] .form-group select, [data-theme="midnight"] .form-group textarea { background: #0d1117; border-color: #30363d; color: #e6edf3; } [data-theme="midnight"] .contact-map h3 { color: #e6edf3; } [data-theme="midnight"] .faq-section h3 { color: #e6edf3; } [data-theme="midnight"] .faq-item { background: #161b22; border-color: #30363d; } [data-theme="midnight"] .faq-question:hover { background: rgba(48,54,61,0.3); } [data-theme="midnight"] .faq-question span { color: #e6edf3; } [data-theme="midnight"] .faq-question i { color: #8b949e; } [data-theme="midnight"] .faq-answer p { color: #8b949e; } [data-theme="midnight"] .whatsapp-float { background: #161b22; color: #e6edf3; } [data-theme="midnight"] .whatsapp-float:hover { background: #58a6ff; color: #fff; } /* -- Sort / Category Dropdowns -- */ [data-theme="midnight"] .sort-toggle { background: var(--chip-bg, rgba(48,54,61,0.85)); color: var(--chip-text, #c9d1d9); border: 1px solid rgba(255,255,255,0.03); border-radius: 999px; padding: 6px 10px; box-shadow: none; } [data-theme="midnight"] .sort-toggle .sort-label { color: #e6edf3 !important; } [data-theme="midnight"] .sort-menu { background: linear-gradient(#161b22, #0d1117); border-color: #30363d; } [data-theme="midnight"] .sort-menu .sort-btn { color: #8b949e; } [data-theme="midnight"] .sort-btn.active { background: linear-gradient(#21262d, #30363d); color: #58a6ff; } [data-theme="midnight"] .sort-toggle.active, [data-theme="midnight"] .sort-toggle[aria-pressed="true"] { background: var(--chip-active-bg, #58a6ff); color: var(--chip-active-text, #fff); border-color: transparent; } [data-theme="midnight"] .cat-toggle { background: linear-gradient(#161b22, #0d1117); color: #e6edf3; } [data-theme="midnight"] .cat-menu { background: linear-gradient(#161b22, #0d1117); border-color: #30363d; } [data-theme="midnight"] .cat-menu .filter-btn { color: #8b949e; } [data-theme="midnight"] .filter-btn[data-filter="all"] { color: #e6edf3 !important; } /* -- Notification Popup -- */ [data-theme="midnight"] .notif-pre-prompt-box { background: #161b22; box-shadow: 0 4px 20px rgba(0,0,0,0.6); } [data-theme="midnight"] .notif-pre-prompt-icon { background: #58a6ff; } [data-theme="midnight"] .notif-pre-prompt-title { color: #e6edf3; } [data-theme="midnight"] .notif-btn-allow { background: #58a6ff; border-color: #58a6ff; color: #fff; } [data-theme="midnight"] .notif-btn-allow:hover { background: #79c0ff; } [data-theme="midnight"] .notif-btn-block { background: #21262d; color: #8b949e; border-color: #30363d; } [data-theme="midnight"] .notif-btn-block:hover { background: #30363d; } /* -- Error Pages -- */ [data-theme="midnight"] .error-page { background: #0d1117; } [data-theme="midnight"] .error-title { color: #e6edf3; } [data-theme="midnight"] .error-message { color: #8b949e; } [data-theme="midnight"] .back-btn { background: #58a6ff; color: #fff; } [data-theme="midnight"] .back-btn:hover { box-shadow: 0 10px 30px rgba(88,166,255,0.3); } /* -- Footer Extras -- */ [data-theme="midnight"] .footer-content { border-bottom-color: #21262d; } /* Footer - midnight: social icons and copyright coloring to match theme */ [data-theme="midnight"] .footer .social-icon { background: rgba(255,255,255,0.02); color: rgba(230,237,243,0.9); border: 1px solid rgba(255,255,255,0.03); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; transition: background .18s ease, color .18s ease, box-shadow .18s ease; } [data-theme="midnight"] .footer .social-icon:hover { background: var(--theme-accent); color: #fff; box-shadow: 0 8px 24px var(--theme-accent-alpha); } [data-theme="midnight"] .footer .footer-bottom, [data-theme="midnight"] .footer .footer-copyright { color: var(--muted); } /* ------------------------------------------------------------ MIDNIGHT — Disable mobile touch highlights & active effects Prevent blue / default touch feedback on buttons/links while keeping visual styles intact (no layout changes). ------------------------------------------------------------ */ [data-theme="midnight"] * { -webkit-tap-highlight-color: transparent !important; -webkit-touch-callout: none !important; touch-action: manipulation; } [data-theme="midnight"] a, [data-theme="midnight"] button, [data-theme="midnight"] input, [data-theme="midnight"] textarea, [data-theme="midnight"] .card-link, [data-theme="midnight"] .action-btn, [data-theme="midnight"] .service-card, [data-theme="midnight"] .filter-btn, [data-theme="midnight"] .cat-btn, [data-theme="midnight"] .sort-btn, [data-theme="midnight"] .story-item, [data-theme="midnight"] .social-icon { -webkit-tap-highlight-color: transparent !important; } [data-theme="midnight"] a:active, [data-theme="midnight"] button:active, [data-theme="midnight"] input:active, [data-theme="midnight"] textarea:active, [data-theme="midnight"] .card-link:active, [data-theme="midnight"] .action-btn:active, [data-theme="midnight"] .service-card:active, [data-theme="midnight"] .filter-btn:active, [data-theme="midnight"] .cat-btn:active, [data-theme="midnight"] .sort-btn:active, [data-theme="midnight"] .story-item:active, [data-theme="midnight"] .social-icon:active { background: none !important; box-shadow: none !important; color: inherit !important; transform: none !important; } [data-theme="midnight"] a:focus, [data-theme="midnight"] button:focus, [data-theme="midnight"] input:focus, [data-theme="midnight"] textarea:focus, [data-theme="midnight"] .card-link:focus, [data-theme="midnight"] .action-btn:focus, [data-theme="midnight"] .service-card:focus, [data-theme="midnight"] .filter-btn:focus, [data-theme="midnight"] .cat-btn:focus, [data-theme="midnight"] .sort-btn:focus, [data-theme="midnight"] .story-item:focus, [data-theme="midnight"] .social-icon:focus { outline: none !important; box-shadow: none !important; } [data-theme="midnight"] .footer-tag { color: #e6edf3; } [data-theme="midnight"] .footer-tag:hover { color: #ffffff; } /* ───────────────────────────────────────────────────────────── OCEAN BLUE — Extended ───────────────────────────────────────────────────────────── */ /* -- Nav & Social -- */ [data-theme="ocean"] .social-icon { color: #bbdefb; } [data-theme="ocean"] .social-icon:hover { color: #fff; } [data-theme="ocean"] .main-nav { background: #f0f4f8; } [data-theme="ocean"] .main-nav ul li a.active { color: #1976d2; } [data-theme="ocean"] .main-nav ul li a.active::after { background: #1976d2; } /* -- Projects Page -- */ [data-theme="ocean"] .projects-header h2 { color: #1a2332; } [data-theme="ocean"] .projects-header p { color: #5a7184; } [data-theme="ocean"] .projects-filter .filter-btn { background: #fff; border-color: #bbdefb; color: #5a7184; } [data-theme="ocean"] .projects-filter .filter-btn.active { background: #1976d2; color: #fff; border-color: #1976d2; } [data-theme="ocean"] .project-card { background: #fff; border-color: #bbdefb; } [data-theme="ocean"] .project-card:hover { box-shadow: 0 8px 30px rgba(25,118,210,0.12); } [data-theme="ocean"] .project-title { color: #1a2332; } [data-theme="ocean"] .project-description { color: #5a7184; } [data-theme="ocean"] .tech-tag { background: rgba(25,118,210,0.08); color: #1976d2; } [data-theme="ocean"] .project-links { border-top-color: #bbdefb; } [data-theme="ocean"] .project-link.live { background: #1976d2; color: #fff; } [data-theme="ocean"] .project-link.live:hover { background: #0d47a1; } [data-theme="ocean"] .project-link.github { background: rgba(25,118,210,0.08); color: #1976d2; } [data-theme="ocean"] .project-link.github:hover { background: rgba(25,118,210,0.15); } [data-theme="ocean"] .project-date { color: #5a7184; } [data-theme="ocean"] .no-projects { color: #5a7184; } [data-theme="ocean"] .project-image-placeholder { background: linear-gradient(135deg, #0d47a1, #1565c0); color: rgba(255,255,255,0.3); } [data-theme="ocean"] .project-image img { filter: grayscale(20%) contrast(1.05) brightness(1); } [data-theme="ocean"] .project-card:hover .project-image img { filter: grayscale(0%) contrast(1.05) brightness(1.05) saturate(1.2); } /* -- Projects Floating Button -- */ [data-theme="ocean"] .projects-floating-btn { background: #1976d2; color: #fff; box-shadow: 0 4px 20px rgba(25,118,210,0.3); } [data-theme="ocean"] .projects-floating-btn:hover { background: #0d47a1; } /* -- Stats Sidebar -- */ /* ============================================================ COMPREHENSIVE THEME OVERRIDES (MIDNIGHT ONLY) Keeping only `midnight` theme-specific overrides. ============================================================ */ /* -- Extended Midnight Overrides -- */ [data-theme="midnight"] .social-icon { color: #8b949e; } [data-theme="midnight"] .social-icon:hover { color: #58a6ff; } [data-theme="midnight"] .main-nav { background: #0d1117; } [data-theme="midnight"] .main-nav ul li a.active { color: #58a6ff; } [data-theme="midnight"] .main-nav ul li a.active::after { background: #58a6ff; } /* -- Projects, Stats, Blog, About, Services, Contact, Gallery overrides kept for midnight */ [data-theme="midnight"] .projects-header h2, [data-theme="midnight"] .blog-header h2, [data-theme="midnight"] .about-intro h2 { color: #e6edf3; } [data-theme="midnight"] .projects-filter .filter-btn.active, [data-theme="midnight"] .filter-btn.active { background: #58a6ff; color: #fff; border-color: #58a6ff; } [data-theme="midnight"] .project-card, [data-theme="midnight"] .blog-card, [data-theme="midnight"] .about-card { background: #161b22; border-color: #30363d; } [data-theme="midnight"] .project-title, [data-theme="midnight"] .blog-card h3, [data-theme="midnight"] .about-card h3 { color: #e6edf3; } [data-theme="midnight"] .project-description, [data-theme="midnight"] .blog-card p, [data-theme="midnight"] .about-card p { color: #8b949e; } /* ------------------------------------------------------------ MIDNIGHT — Stories + Gallery tweaks - Story strip / items styled to match midnight aesthetics - Gallery images use the same gentle desaturate + hover colour ------------------------------------------------------------ */ [data-theme="midnight"] .story-strip { background: transparent; } [data-theme="midnight"] .story-inner { background: transparent; } [data-theme="midnight"] .story-cats { border-bottom-color: rgba(255,255,255,0.10); } [data-theme="midnight"] .story-cats .cat-btn { background: none; color: rgba(138,155,168,0.85); border: none; } [data-theme="midnight"] .story-cats .cat-btn::after { background: #fff; } [data-theme="midnight"] .story-cats .cat-btn:hover { background: none; color: #ccc; } [data-theme="midnight"] .story-cats .cat-btn.active { background: none; color: #fff; border: none; } [data-theme="midnight"] .story-list .story-item { color: rgba(230,237,243,0.6); } [data-theme="midnight"] .story-item .blob { background: linear-gradient(180deg, rgba(48,54,61,0.85), rgba(80,82,85,0.65)); } [data-theme="midnight"] .story-item img { filter: grayscale(20%) contrast(1.05) brightness(0.95) saturate(1.05); border-color: rgba(255,255,255,0.06); } [data-theme="midnight"] .story-item:hover img { filter: grayscale(0%) contrast(1.08) brightness(1.05) saturate(1.15); } [data-theme="midnight"] .story-label { color: rgba(230,237,243,0.6); } /* Gallery images: gentle desaturate + bring color on hover (match blog feel) */ [data-theme="midnight"] .gallery-page-item img, [data-theme="midnight"] .gallery-item img, [data-theme="midnight"] .gallery-card img, [data-theme="midnight"] .gallery-page-image img { filter: grayscale(30%) contrast(1.05) brightness(0.85) saturate(0.95); transition: filter .25s ease; } [data-theme="midnight"] .gallery-page-item:hover img, [data-theme="midnight"] .gallery-item:hover img, [data-theme="midnight"] .gallery-card:hover img, [data-theme="midnight"] .gallery-page-image:hover img { filter: grayscale(0%) contrast(1.1) brightness(1.05) saturate(1.15); } /* Homepage Service Cards - keep layout but make the 3 images more colorful under midnight */ [data-theme="midnight"] .service-card .card-image img { filter: grayscale(0%) brightness(1.02) contrast(1.03) saturate(1.15); transition: filter .25s ease; } [data-theme="midnight"] .service-card:hover .card-image img { filter: grayscale(0%) brightness(1.08) contrast(1.05) saturate(1.22); } [data-theme="midnight"] .projects-floating-btn, [data-theme="midnight"] .whatsapp-float { background: #161b22; color: #e6edf3; } [data-theme="midnight"] .stats-toggle { background: #161b22; color: #e6edf3; } [data-theme="midnight"] .notif-pre-prompt-box { background: #161b22; box-shadow: 0 4px 20px rgba(0,0,0,0.6); } [data-theme="midnight"] .error-page { background: #0d1117; } [data-theme="midnight"] .footer-content { border-bottom-color: #21262d; } /* ============================================================ MOBILE NAV BACKGROUND OVERRIDES Only midnight entries retained ============================================================ */ @media (max-width: 768px) { [data-theme="midnight"] .main-nav { background: #0d1117; } /* Mobile service cards for midnight - override style.css mobile card styles */ [data-theme="midnight"] .service-card { background: #161b22 !important; } [data-theme="midnight"] .service-card::after { background: linear-gradient(90deg, #30363d, #58a6ff, #30363d) !important; } [data-theme="midnight"] .service-card h3 { color: #e6edf3 !important; } [data-theme="midnight"] .service-card p { color: #8b949e !important; } [data-theme="midnight"] .card-link { background: rgba(88,166,255,0.1); border-color: rgba(88,166,255,0.2); color: #58a6ff; } /* Mobile footer/nav */ [data-theme="midnight"] .footer-nav a { background: rgba(48,54,61,0.3); } /* Mobile gallery item bg */ [data-theme="midnight"] .middle-gallery .gallery-item { background: #161b22; } } /* ------------------------------------------------------------ FEATURED PAGE — text & table color tuning for Midnight Ensures headings, subheadings and table times contrast nicely with the dark background. ------------------------------------------------------------ */ [data-theme="midnight"] .calendar-container > div:nth-of-type(1) { color: var(--theme-accent) !important; font-weight: 700 !important; } [data-theme="midnight"] .calendar-container > div:nth-of-type(2) { color: var(--muted) !important; font-weight: 500 !important; } [data-theme="midnight"] .ramadan-table thead th { color: var(--text) !important; opacity: 0.95; } [data-theme="midnight"] .ramadan-table tbody td { color: var(--text) !important; } [data-theme="midnight"] .ramadan-table tbody td:first-child { color: var(--theme-accent) !important; font-weight: 700 !important; } /* Emphasize Sehri and Iftar columns (3rd and 6th) */ [data-theme="midnight"] .ramadan-table tbody td:nth-child(3), [data-theme="midnight"] .ramadan-table tbody td:nth-child(6) { color: var(--theme-accent) !important; font-weight: 600 !important; } [data-theme="midnight"] .ramadan-table tbody tr.today { background: rgba(88,166,255,0.06) !important; } [data-theme="midnight"] .ramadan-table tbody tr.laylatul-qadr { background: linear-gradient(135deg, rgba(255,200,0,0.06), rgba(255,200,0,0.03)) !important; color: var(--text) !important; } [data-theme="midnight"] .today-star i { color: var(--theme-accent) !important; } [data-theme="midnight"] .ramadan-note { color: var(--muted) !important; background: rgba(88,166,255,0.02) !important; border-left-color: var(--theme-accent) !important; } /* Dua / Featured content colors: keep same layout but adjust colors for midnight */ [data-theme="midnight"] .dua-section, [data-theme="midnight"] .dua-content { background: transparent; color: var(--muted); } [data-theme="midnight"] .dua-section h3 { color: var(--text); } [data-theme="midnight"] .dua-subtitle { color: var(--muted); } [data-theme="midnight"] .dua-content b { color: var(--text); } [data-theme="midnight"] .dua-arabic { color: var(--theme-accent); } [data-theme="forest"] .blog-header p { color: #4a6741; } [data-theme="forest"] .blog-category { background: #2e7d32; color: #fff; } [data-theme="forest"] .blog-meta { color: #4a6741; } [data-theme="forest"] .blog-card-content h3 { color: #1b2e1b; } [data-theme="forest"] .blog-card:hover h3 { color: #2e7d32; } [data-theme="forest"] .blog-card-content p { color: #4a6741; } [data-theme="forest"] .read-more { color: #2e7d32; } [data-theme="forest"] .read-more:hover { color: #1b5e20; } [data-theme="forest"] .blog-card img { filter: grayscale(15%) contrast(1.05) brightness(1); } [data-theme="forest"] .blog-card:hover img { filter: grayscale(0%) contrast(1.05) brightness(1.05); } /* -- About Page Extras -- */ [data-theme="forest"] .about-intro h2 { color: #1b2e1b; } [data-theme="forest"] .about-intro .tagline { color: #4a6741; } [data-theme="forest"] .about-intro p { color: #4a6741; } [data-theme="forest"] .about-card { background: linear-gradient(145deg, #1b5e20, #2e7d32); border-color: transparent; color: #fff; } [data-theme="forest"] .about-card-icon { color: #a5d6a7; } [data-theme="forest"] .about-card h3 { color: #fff; } [data-theme="forest"] .about-card p { color: #c8e6c9; } [data-theme="forest"] .about-journey h3, [data-theme="forest"] .about-equipment h3 { color: #1b2e1b; } [data-theme="forest"] .timeline::before { background: #2e7d32; } [data-theme="forest"] .timeline-year { background: #2e7d32; color: #fff; } [data-theme="forest"] .timeline-content { background: #fff; border: 1px solid #a5d6a7; } [data-theme="forest"] .timeline-content h4 { color: #1b2e1b; } [data-theme="forest"] .timeline-content p { color: #4a6741; } [data-theme="forest"] .timeline-item { border-color: #a5d6a7; } [data-theme="forest"] .equipment-item i { color: #2e7d32; } [data-theme="forest"] .equipment-item span { color: #1b2e1b; } /* -- Gallery Page Extras -- */ [data-theme="forest"] .gallery-page-header p { color: #4a6741; } [data-theme="forest"] .gallery-page-item { border-color: #a5d6a7; } /* -- Services Page Inline Overrides -- */ [data-theme="forest"] .services-header h2 { color: #1b2e1b; } [data-theme="forest"] .services-header p { color: #4a6741; } [data-theme="forest"] .service-card { background: #fff !important; border-color: #a5d6a7 !important; box-shadow: 0 5px 20px rgba(46,125,50,0.08) !important; } [data-theme="forest"] .service-card:hover { background: #e8f5e9 !important; } [data-theme="forest"] .service-card h3 { color: #1b5e20 !important; } [data-theme="forest"] .service-card p { color: #4a6741 !important; } [data-theme="forest"] .service-icon { background: linear-gradient(135deg, #2e7d32, #1b5e20) !important; } [data-theme="forest"] .service-features li { color: #4a6741; border-bottom-color: #a5d6a7; } [data-theme="forest"] .service-features li i { color: #2e7d32; } [data-theme="forest"] .service-btn { background: linear-gradient(135deg, #2e7d32, #1b5e20); color: #fff; } [data-theme="forest"] .pricing-section { background: #fff; border-color: #a5d6a7; box-shadow: 0 5px 20px rgba(46,125,50,0.08); } [data-theme="forest"] .pricing-header h3 { color: #1b2e1b; } [data-theme="forest"] .pricing-header p { color: #4a6741; } [data-theme="forest"] .pricing-card { background: #f1f5f0; border-color: #a5d6a7; } [data-theme="forest"] .pricing-card.featured { background: linear-gradient(135deg, #1b5e20, #2e7d32); border-color: transparent; } [data-theme="forest"] .pricing-card h4 { color: #1b2e1b; } [data-theme="forest"] .pricing-card.featured h4 { color: #fff; } [data-theme="forest"] .pricing-card .price { color: #1b2e1b; } [data-theme="forest"] .pricing-card.featured .price { color: #fff; } [data-theme="forest"] .pricing-card .price-note { color: #4a6741; } [data-theme="forest"] .pricing-card.featured .price-note { color: rgba(255,255,255,0.7); } [data-theme="forest"] .pricing-features li { color: #4a6741; border-bottom-color: #a5d6a7; } [data-theme="forest"] .pricing-card.featured .pricing-features li { color: rgba(255,255,255,0.9); border-bottom-color: rgba(255,255,255,0.15); } [data-theme="forest"] .pricing-btn { background: linear-gradient(135deg, #2e7d32, #1b5e20); color: #fff; } [data-theme="forest"] .pricing-card.featured .pricing-btn { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); color: #1b5e20; } [data-theme="forest"] .cta-section { background: #fff; border-color: #a5d6a7; box-shadow: 0 5px 20px rgba(46,125,50,0.08); } [data-theme="forest"] .cta-section h3 { color: #1b2e1b; } [data-theme="forest"] .cta-section p { color: #4a6741; } [data-theme="forest"] .cta-btn.primary { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); color: #1b5e20; } [data-theme="forest"] .cta-btn.secondary { background: #2e7d32; color: #fff; } /* -- Contact Page Extras -- */ [data-theme="forest"] .contact-header h2 { color: #1b2e1b; } [data-theme="forest"] .contact-header p { color: #4a6741; } [data-theme="forest"] .contact-info { background: linear-gradient(145deg, #1b5e20, #2e7d32); color: #e8f5e9; } [data-theme="forest"] .contact-icon { background: rgba(255,255,255,0.15); } [data-theme="forest"] .contact-details p { color: #a5d6a7; } [data-theme="forest"] .contact-social { border-top-color: rgba(255,255,255,0.15); } [data-theme="forest"] .contact-social h4 { background: #2e7d32; color: #fff; } [data-theme="forest"] .social-links a { background: rgba(255,255,255,0.15); color: #e8f5e9; } [data-theme="forest"] .social-links a:hover { background: #e8f5e9; color: #1b5e20; } [data-theme="forest"] .contact-form-wrapper { background: #fff; } [data-theme="forest"] .contact-form h3 { color: #1b2e1b; } [data-theme="forest"] .form-group label { color: #4a6741; } [data-theme="forest"] .form-group input, [data-theme="forest"] .form-group select, [data-theme="forest"] .form-group textarea { background: #f1f5f0; border-color: #a5d6a7; color: #1b2e1b; } [data-theme="forest"] .contact-map h3 { color: #1b2e1b; } [data-theme="forest"] .faq-section h3 { color: #1b2e1b; } [data-theme="forest"] .faq-item { background: #fff; border-color: #a5d6a7; } [data-theme="forest"] .faq-question:hover { background: rgba(46,125,50,0.04); } [data-theme="forest"] .faq-question span { color: #1b2e1b; } [data-theme="forest"] .faq-question i { color: #4a6741; } [data-theme="forest"] .faq-answer p { color: #4a6741; } [data-theme="forest"] .whatsapp-float { background: #2e7d32; color: #fff; } [data-theme="forest"] .whatsapp-float:hover { background: #e8f5e9; color: #1b5e20; } /* -- Sort / Category Dropdowns -- */ [data-theme="forest"] .sort-toggle { background: linear-gradient(#1b5e20, #2e7d32); color: #fff; } [data-theme="forest"] .sort-toggle .sort-label { color: #e8f5e9 !important; } [data-theme="forest"] .sort-menu { background: linear-gradient(#1b5e20, #154d1a); border-color: rgba(255,255,255,0.15); } [data-theme="forest"] .sort-menu .sort-btn { color: #a5d6a7; } [data-theme="forest"] .sort-btn.active { background: linear-gradient(#2e7d32, #388e3c); color: #fff; } [data-theme="forest"] .cat-toggle { background: linear-gradient(#1b5e20, #2e7d32); color: #fff; } [data-theme="forest"] .cat-menu { background: linear-gradient(#1b5e20, #154d1a); border-color: rgba(255,255,255,0.15); } [data-theme="forest"] .cat-menu .filter-btn { color: #a5d6a7; } [data-theme="forest"] .filter-btn[data-filter="all"] { color: #1b2e1b !important; } /* -- Notification Popup -- */ [data-theme="forest"] .notif-pre-prompt-box { background: #fff; } [data-theme="forest"] .notif-pre-prompt-icon { background: #2e7d32; } [data-theme="forest"] .notif-pre-prompt-title { color: #1b2e1b; } [data-theme="forest"] .notif-btn-allow { background: #2e7d32; border-color: #2e7d32; color: #fff; } [data-theme="forest"] .notif-btn-allow:hover { background: #1b5e20; } [data-theme="forest"] .notif-btn-block { background: #fff; color: #4a6741; border-color: #a5d6a7; } [data-theme="forest"] .notif-btn-block:hover { background: #f1f5f0; } /* -- Error Pages -- */ [data-theme="forest"] .error-page { background: #f1f5f0; } [data-theme="forest"] .error-title { color: #1b2e1b; } [data-theme="forest"] .error-message { color: #4a6741; } [data-theme="forest"] .back-btn { background: #2e7d32; color: #fff; } [data-theme="forest"] .back-btn:hover { box-shadow: 0 10px 30px rgba(46,125,50,0.3); } /* -- Footer Extras -- */ [data-theme="forest"] .footer-content { border-bottom-color: #388e3c; } [data-theme="forest"] .footer-tag { color: #66bb6a; } [data-theme="forest"] .footer-tag:hover { color: #fff; } /* ───────────────────────────────────────────────────────────── SUNSET WARM — Extended ───────────────────────────────────────────────────────────── */ /* -- Nav & Social -- */ [data-theme="sunset"] .social-icon { color: #fff3e0; } [data-theme="sunset"] .social-icon:hover { color: #fff; } [data-theme="sunset"] .main-nav { background: #fdf6f0; } [data-theme="sunset"] .main-nav ul li a.active { color: #e65100; } [data-theme="sunset"] .main-nav ul li a.active::after { background: #e65100; } /* -- Projects Page -- */ [data-theme="sunset"] .projects-header h2 { color: #2d1b0e; } [data-theme="sunset"] .projects-header p { color: #8d6e4a; } [data-theme="sunset"] .projects-filter .filter-btn { background: #fff; border-color: #ffcc80; color: #8d6e4a; } [data-theme="sunset"] .projects-filter .filter-btn.active { background: #e65100; color: #fff; border-color: #e65100; } [data-theme="sunset"] .project-card { background: #fff; border-color: #ffcc80; } [data-theme="sunset"] .project-card:hover { box-shadow: 0 8px 30px rgba(230,81,0,0.12); } [data-theme="sunset"] .project-title { color: #2d1b0e; } [data-theme="sunset"] .project-description { color: #8d6e4a; } [data-theme="sunset"] .tech-tag { background: rgba(230,81,0,0.08); color: #e65100; } [data-theme="sunset"] .project-links { border-top-color: #ffcc80; } [data-theme="sunset"] .project-link.live { background: #e65100; color: #fff; } [data-theme="sunset"] .project-link.live:hover { background: #bf360c; } [data-theme="sunset"] .project-link.github { background: rgba(230,81,0,0.08); color: #e65100; } [data-theme="sunset"] .project-link.github:hover { background: rgba(230,81,0,0.15); } [data-theme="sunset"] .project-date { color: #8d6e4a; } [data-theme="sunset"] .no-projects { color: #8d6e4a; } [data-theme="sunset"] .project-image-placeholder { background: linear-gradient(135deg, #bf360c, #e65100); color: rgba(255,255,255,0.3); } [data-theme="sunset"] .project-image img { filter: sepia(20%) contrast(1.05) brightness(1); } [data-theme="sunset"] .project-card:hover .project-image img { filter: sepia(0%) contrast(1.05) brightness(1.05) saturate(1.25); } /* -- Projects Floating Button -- */ [data-theme="sunset"] .projects-floating-btn { background: #e65100; color: #fff; box-shadow: 0 4px 20px rgba(230,81,0,0.3); } [data-theme="sunset"] .projects-floating-btn:hover { background: #bf360c; } /* -- Stats Sidebar -- */ [data-theme="sunset"] .stats-toggle { background: #3e2723; color: #fff3e0; box-shadow: -3px 3px 15px rgba(62,39,35,0.3); } [data-theme="sunset"] .stats-toggle:hover { background: #4e342e; } [data-theme="sunset"] .stats-toggle::after { background: rgba(255,243,224,0.3); } [data-theme="sunset"] .stats-card { background: linear-gradient(165deg, #3e2723 0%, #321e1a 100%); border-left-color: rgba(255,255,255,0.08); border-bottom-color: rgba(255,255,255,0.08); } [data-theme="sunset"] .stats-profile { border-bottom-color: rgba(255,255,255,0.15); } [data-theme="sunset"] .stats-avatar { border-color: rgba(255,204,128,0.3); } [data-theme="sunset"] .stats-profile h4 { color: #fff3e0; } [data-theme="sunset"] .stats-tagline { color: rgba(188,170,164,0.8); } [data-theme="sunset"] .stats-location { color: rgba(188,170,164,0.7); } [data-theme="sunset"] .stat-item { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.08); } [data-theme="sunset"] .stat-item:hover { background: rgba(255,255,255,0.15); } [data-theme="sunset"] .stat-value { color: #fff3e0; } [data-theme="sunset"] .stat-label { color: rgba(188,170,164,0.7); } /* -- Blog Page Specifics -- */ [data-theme="sunset"] .blog-header h2 { color: #2d1b0e; } [data-theme="sunset"] .blog-header p { color: #8d6e4a; } [data-theme="sunset"] .blog-category { background: #e65100; color: #fff; } [data-theme="sunset"] .blog-meta { color: #8d6e4a; } [data-theme="sunset"] .blog-card-content h3 { color: #2d1b0e; } [data-theme="sunset"] .blog-card:hover h3 { color: #e65100; } [data-theme="sunset"] .blog-card-content p { color: #8d6e4a; } [data-theme="sunset"] .read-more { color: #e65100; } [data-theme="sunset"] .read-more:hover { color: #bf360c; } [data-theme="sunset"] .blog-card img { filter: sepia(20%) contrast(1.05) brightness(1); } [data-theme="sunset"] .blog-card:hover img { filter: sepia(0%) contrast(1.05) brightness(1.05); } /* -- About Page Extras -- */ [data-theme="sunset"] .about-intro h2 { color: #2d1b0e; } [data-theme="sunset"] .about-intro .tagline { color: #8d6e4a; } [data-theme="sunset"] .about-intro p { color: #8d6e4a; } [data-theme="sunset"] .about-card { background: linear-gradient(145deg, #3e2723, #4e342e); border-color: transparent; color: #fff3e0; } [data-theme="sunset"] .about-card-icon { color: #ffcc80; } [data-theme="sunset"] .about-card h3 { color: #fff3e0; } [data-theme="sunset"] .about-card p { color: #bcaaa4; } [data-theme="sunset"] .about-journey h3, [data-theme="sunset"] .about-equipment h3 { color: #2d1b0e; } [data-theme="sunset"] .timeline::before { background: #e65100; } [data-theme="sunset"] .timeline-year { background: #e65100; color: #fff; } [data-theme="sunset"] .timeline-content { background: #fff; border: 1px solid #ffcc80; } [data-theme="sunset"] .timeline-content h4 { color: #2d1b0e; } [data-theme="sunset"] .timeline-content p { color: #8d6e4a; } [data-theme="sunset"] .timeline-item { border-color: #ffcc80; } [data-theme="sunset"] .equipment-item i { color: #e65100; } [data-theme="sunset"] .equipment-item span { color: #2d1b0e; } /* -- Gallery Page Extras -- */ [data-theme="sunset"] .gallery-page-header p { color: #8d6e4a; } [data-theme="sunset"] .gallery-page-item { border-color: #ffcc80; } /* -- Services Page Inline Overrides -- */ [data-theme="sunset"] .services-header h2 { color: #2d1b0e; } [data-theme="sunset"] .services-header p { color: #8d6e4a; } [data-theme="sunset"] .service-card { background: #fff !important; border-color: #ffcc80 !important; box-shadow: 0 5px 20px rgba(230,81,0,0.06) !important; } [data-theme="sunset"] .service-card:hover { background: #fff3e0 !important; } [data-theme="sunset"] .service-card h3 { color: #bf360c !important; } [data-theme="sunset"] .service-card p { color: #8d6e4a !important; } [data-theme="sunset"] .service-icon { background: linear-gradient(135deg, #e65100, #bf360c) !important; } [data-theme="sunset"] .service-features li { color: #8d6e4a; border-bottom-color: #ffcc80; } [data-theme="sunset"] .service-features li i { color: #e65100; } [data-theme="sunset"] .service-btn { background: linear-gradient(135deg, #e65100, #bf360c); color: #fff; } [data-theme="sunset"] .pricing-section { background: #fff; border-color: #ffcc80; box-shadow: 0 5px 20px rgba(230,81,0,0.06); } [data-theme="sunset"] .pricing-header h3 { color: #2d1b0e; } [data-theme="sunset"] .pricing-header p { color: #8d6e4a; } [data-theme="sunset"] .pricing-card { background: #fdf6f0; border-color: #ffcc80; } [data-theme="sunset"] .pricing-card.featured { background: linear-gradient(135deg, #3e2723, #4e342e); border-color: transparent; } [data-theme="sunset"] .pricing-card h4 { color: #2d1b0e; } [data-theme="sunset"] .pricing-card.featured h4 { color: #fff; } [data-theme="sunset"] .pricing-card .price { color: #2d1b0e; } [data-theme="sunset"] .pricing-card.featured .price { color: #fff; } [data-theme="sunset"] .pricing-card .price-note { color: #8d6e4a; } [data-theme="sunset"] .pricing-card.featured .price-note { color: rgba(255,255,255,0.7); } [data-theme="sunset"] .pricing-features li { color: #8d6e4a; border-bottom-color: #ffcc80; } [data-theme="sunset"] .pricing-card.featured .pricing-features li { color: rgba(255,255,255,0.9); border-bottom-color: rgba(255,255,255,0.15); } [data-theme="sunset"] .pricing-btn { background: linear-gradient(135deg, #e65100, #bf360c); color: #fff; } [data-theme="sunset"] .pricing-card.featured .pricing-btn { background: linear-gradient(135deg, #fff3e0, #ffe0b2); color: #bf360c; } [data-theme="sunset"] .cta-section { background: #fff; border-color: #ffcc80; box-shadow: 0 5px 20px rgba(230,81,0,0.06); } [data-theme="sunset"] .cta-section h3 { color: #2d1b0e; } [data-theme="sunset"] .cta-section p { color: #8d6e4a; } [data-theme="sunset"] .cta-btn.primary { background: linear-gradient(135deg, #fff3e0, #ffe0b2); color: #bf360c; } [data-theme="sunset"] .cta-btn.secondary { background: #e65100; color: #fff; } /* -- Contact Page Extras -- */ [data-theme="sunset"] .contact-header h2 { color: #2d1b0e; } [data-theme="sunset"] .contact-header p { color: #8d6e4a; } [data-theme="sunset"] .contact-info { background: linear-gradient(145deg, #3e2723, #4e342e); color: #fff3e0; } [data-theme="sunset"] .contact-icon { background: rgba(255,204,128,0.2); } [data-theme="sunset"] .contact-details p { color: #bcaaa4; } [data-theme="sunset"] .contact-social { border-top-color: rgba(255,255,255,0.15); } [data-theme="sunset"] .contact-social h4 { background: #e65100; color: #fff; } [data-theme="sunset"] .social-links a { background: rgba(255,255,255,0.15); color: #fff3e0; } [data-theme="sunset"] .social-links a:hover { background: #ffcc80; color: #3e2723; } [data-theme="sunset"] .contact-form-wrapper { background: #fff; } [data-theme="sunset"] .contact-form h3 { color: #2d1b0e; } [data-theme="sunset"] .form-group label { color: #8d6e4a; } [data-theme="sunset"] .form-group input, [data-theme="sunset"] .form-group select, [data-theme="sunset"] .form-group textarea { background: #fdf6f0; border-color: #ffcc80; color: #2d1b0e; } [data-theme="sunset"] .contact-map h3 { color: #2d1b0e; } [data-theme="sunset"] .faq-section h3 { color: #2d1b0e; } [data-theme="sunset"] .faq-item { background: #fff; border-color: #ffcc80; } [data-theme="sunset"] .faq-question:hover { background: rgba(230,81,0,0.04); } [data-theme="sunset"] .faq-question span { color: #2d1b0e; } [data-theme="sunset"] .faq-question i { color: #8d6e4a; } [data-theme="sunset"] .faq-answer p { color: #8d6e4a; } [data-theme="sunset"] .whatsapp-float { background: #e65100; color: #fff; } [data-theme="sunset"] .whatsapp-float:hover { background: #fff; color: #e65100; } /* -- Sort / Category Dropdowns -- */ [data-theme="sunset"] .sort-toggle { background: linear-gradient(#3e2723, #4e342e); color: #fff3e0; } [data-theme="sunset"] .sort-toggle .sort-label { color: #fff3e0 !important; } [data-theme="sunset"] .sort-menu { background: linear-gradient(#3e2723, #321e1a); border-color: rgba(255,255,255,0.15); } [data-theme="sunset"] .sort-menu .sort-btn { color: #bcaaa4; } [data-theme="sunset"] .sort-btn.active { background: linear-gradient(#4e342e, #5d4037); color: #ffcc80; } [data-theme="sunset"] .cat-toggle { background: linear-gradient(#3e2723, #4e342e); color: #fff3e0; } [data-theme="sunset"] .cat-menu { background: linear-gradient(#3e2723, #321e1a); border-color: rgba(255,255,255,0.15); } [data-theme="sunset"] .cat-menu .filter-btn { color: #bcaaa4; } [data-theme="sunset"] .filter-btn[data-filter="all"] { color: #2d1b0e !important; } /* -- Notification Popup -- */ [data-theme="sunset"] .notif-pre-prompt-box { background: #fff; } [data-theme="sunset"] .notif-pre-prompt-icon { background: #e65100; } [data-theme="sunset"] .notif-pre-prompt-title { color: #2d1b0e; } [data-theme="sunset"] .notif-btn-allow { background: #e65100; border-color: #e65100; color: #fff; } [data-theme="sunset"] .notif-btn-allow:hover { background: #bf360c; } [data-theme="sunset"] .notif-btn-block { background: #fff; color: #8d6e4a; border-color: #ffcc80; } [data-theme="sunset"] .notif-btn-block:hover { background: #fdf6f0; } /* -- Error Pages -- */ [data-theme="sunset"] .error-page { background: #fdf6f0; } [data-theme="sunset"] .error-title { color: #2d1b0e; } [data-theme="sunset"] .error-message { color: #8d6e4a; } [data-theme="sunset"] .back-btn { background: #e65100; color: #fff; } [data-theme="sunset"] .back-btn:hover { box-shadow: 0 10px 30px rgba(230,81,0,0.3); } /* -- Footer Extras -- */ [data-theme="sunset"] .footer-content { border-bottom-color: #5d4037; } [data-theme="sunset"] .footer-tag { color: #a1887f; } [data-theme="sunset"] .footer-tag:hover { color: #ffcc80; } /* ───────────────────────────────────────────────────────────── ROYAL PURPLE — Extended ───────────────────────────────────────────────────────────── */ /* -- Nav & Social -- */ [data-theme="royal"] .social-icon { color: #e1bee7; } [data-theme="royal"] .social-icon:hover { color: #fff; } [data-theme="royal"] .main-nav { background: #f5f0fa; } [data-theme="royal"] .main-nav ul li a.active { color: #7b1fa2; } [data-theme="royal"] .main-nav ul li a.active::after { background: #7b1fa2; } /* -- Projects Page -- */ [data-theme="royal"] .projects-header h2 { color: #1a1028; } [data-theme="royal"] .projects-header p { color: #6a5580; } [data-theme="royal"] .projects-filter .filter-btn { background: #fff; border-color: #ce93d8; color: #6a5580; } [data-theme="royal"] .projects-filter .filter-btn.active { background: #7b1fa2; color: #fff; border-color: #7b1fa2; } [data-theme="royal"] .project-card { background: #fff; border-color: #ce93d8; } [data-theme="royal"] .project-card:hover { box-shadow: 0 8px 30px rgba(106,27,154,0.12); } [data-theme="royal"] .project-title { color: #1a1028; } [data-theme="royal"] .project-description { color: #6a5580; } [data-theme="royal"] .tech-tag { background: rgba(106,27,154,0.08); color: #7b1fa2; } [data-theme="royal"] .project-links { border-top-color: #ce93d8; } [data-theme="royal"] .project-link.live { background: #7b1fa2; color: #fff; } [data-theme="royal"] .project-link.live:hover { background: #4a148c; } [data-theme="royal"] .project-link.github { background: rgba(106,27,154,0.08); color: #7b1fa2; } [data-theme="royal"] .project-link.github:hover { background: rgba(106,27,154,0.15); } [data-theme="royal"] .project-date { color: #6a5580; } [data-theme="royal"] .no-projects { color: #6a5580; } [data-theme="royal"] .project-image-placeholder { background: linear-gradient(135deg, #4a148c, #6a1b9a); color: rgba(255,255,255,0.3); } [data-theme="royal"] .project-image img { filter: grayscale(20%) contrast(1.05) brightness(1); } [data-theme="royal"] .project-card:hover .project-image img { filter: grayscale(0%) contrast(1.05) brightness(1.05) saturate(1.2); } /* -- Projects Floating Button -- */ [data-theme="royal"] .projects-floating-btn { background: #7b1fa2; color: #fff; box-shadow: 0 4px 20px rgba(106,27,154,0.3); } [data-theme="royal"] .projects-floating-btn:hover { background: #4a148c; } /* -- Stats Sidebar -- */ [data-theme="royal"] .stats-toggle { background: #4a148c; color: #f3e5f5; box-shadow: -3px 3px 15px rgba(74,20,140,0.3); } [data-theme="royal"] .stats-toggle:hover { background: #6a1b9a; } [data-theme="royal"] .stats-toggle::after { background: rgba(243,229,245,0.3); } [data-theme="royal"] .stats-card { background: linear-gradient(165deg, #4a148c 0%, #3c0f73 100%); border-left-color: rgba(255,255,255,0.08); border-bottom-color: rgba(255,255,255,0.08); } [data-theme="royal"] .stats-profile { border-bottom-color: rgba(255,255,255,0.15); } [data-theme="royal"] .stats-avatar { border-color: rgba(206,147,216,0.3); } [data-theme="royal"] .stats-profile h4 { color: #f3e5f5; } [data-theme="royal"] .stats-tagline { color: rgba(179,157,219,0.8); } [data-theme="royal"] .stats-location { color: rgba(179,157,219,0.7); } [data-theme="royal"] .stat-item { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.08); } [data-theme="royal"] .stat-item:hover { background: rgba(255,255,255,0.15); } [data-theme="royal"] .stat-value { color: #f3e5f5; } [data-theme="royal"] .stat-label { color: rgba(179,157,219,0.7); } /* -- Blog Page Specifics -- */ [data-theme="royal"] .blog-header h2 { color: #1a1028; } [data-theme="royal"] .blog-header p { color: #6a5580; } [data-theme="royal"] .blog-category { background: #7b1fa2; color: #fff; } [data-theme="royal"] .blog-meta { color: #6a5580; } [data-theme="royal"] .blog-card-content h3 { color: #1a1028; } [data-theme="royal"] .blog-card:hover h3 { color: #7b1fa2; } [data-theme="royal"] .blog-card-content p { color: #6a5580; } [data-theme="royal"] .read-more { color: #7b1fa2; } [data-theme="royal"] .read-more:hover { color: #4a148c; } [data-theme="royal"] .blog-card img { filter: grayscale(20%) contrast(1.05) brightness(1); } [data-theme="royal"] .blog-card:hover img { filter: grayscale(0%) contrast(1.05) brightness(1.05); } /* -- About Page Extras -- */ [data-theme="royal"] .about-intro h2 { color: #1a1028; } [data-theme="royal"] .about-intro .tagline { color: #6a5580; } [data-theme="royal"] .about-intro p { color: #6a5580; } [data-theme="royal"] .about-card { background: linear-gradient(145deg, #4a148c, #6a1b9a); border-color: transparent; color: #f3e5f5; } [data-theme="royal"] .about-card-icon { color: #ce93d8; } [data-theme="royal"] .about-card h3 { color: #fff; } [data-theme="royal"] .about-card p { color: #b39ddb; } [data-theme="royal"] .about-journey h3, [data-theme="royal"] .about-equipment h3 { color: #1a1028; } [data-theme="royal"] .timeline::before { background: #7b1fa2; } [data-theme="royal"] .timeline-year { background: #7b1fa2; color: #fff; } [data-theme="royal"] .timeline-content { background: #fff; border: 1px solid #ce93d8; } [data-theme="royal"] .timeline-content h4 { color: #1a1028; } [data-theme="royal"] .timeline-content p { color: #6a5580; } [data-theme="royal"] .timeline-item { border-color: #ce93d8; } [data-theme="royal"] .equipment-item i { color: #7b1fa2; } [data-theme="royal"] .equipment-item span { color: #1a1028; } /* -- Gallery Page Extras -- */ [data-theme="royal"] .gallery-page-header p { color: #6a5580; } [data-theme="royal"] .gallery-page-item { border-color: #ce93d8; } /* -- Services Page Inline Overrides -- */ [data-theme="royal"] .services-header h2 { color: #1a1028; } [data-theme="royal"] .services-header p { color: #6a5580; } [data-theme="royal"] .service-card { background: #fff !important; border-color: #ce93d8 !important; box-shadow: 0 5px 20px rgba(106,27,154,0.06) !important; } [data-theme="royal"] .service-card:hover { background: #f3e5f5 !important; } [data-theme="royal"] .service-card h3 { color: #4a148c !important; } [data-theme="royal"] .service-card p { color: #6a5580 !important; } [data-theme="royal"] .service-icon { background: linear-gradient(135deg, #7b1fa2, #4a148c) !important; } [data-theme="royal"] .service-features li { color: #6a5580; border-bottom-color: #ce93d8; } [data-theme="royal"] .service-features li i { color: #7b1fa2; } [data-theme="royal"] .service-btn { background: linear-gradient(135deg, #7b1fa2, #4a148c); color: #fff; } [data-theme="royal"] .pricing-section { background: #fff; border-color: #ce93d8; box-shadow: 0 5px 20px rgba(106,27,154,0.06); } [data-theme="royal"] .pricing-header h3 { color: #1a1028; } [data-theme="royal"] .pricing-header p { color: #6a5580; } [data-theme="royal"] .pricing-card { background: #f5f0fa; border-color: #ce93d8; } [data-theme="royal"] .pricing-card.featured { background: linear-gradient(135deg, #4a148c, #6a1b9a); border-color: transparent; } [data-theme="royal"] .pricing-card h4 { color: #1a1028; } [data-theme="royal"] .pricing-card.featured h4 { color: #fff; } [data-theme="royal"] .pricing-card .price { color: #1a1028; } [data-theme="royal"] .pricing-card.featured .price { color: #fff; } [data-theme="royal"] .pricing-card .price-note { color: #6a5580; } [data-theme="royal"] .pricing-card.featured .price-note { color: rgba(255,255,255,0.7); } [data-theme="royal"] .pricing-features li { color: #6a5580; border-bottom-color: #ce93d8; } [data-theme="royal"] .pricing-card.featured .pricing-features li { color: rgba(255,255,255,0.9); border-bottom-color: rgba(255,255,255,0.15); } [data-theme="royal"] .pricing-btn { background: linear-gradient(135deg, #7b1fa2, #4a148c); color: #fff; } [data-theme="royal"] .pricing-card.featured .pricing-btn { background: linear-gradient(135deg, #f3e5f5, #e1bee7); color: #4a148c; } [data-theme="royal"] .cta-section { background: #fff; border-color: #ce93d8; box-shadow: 0 5px 20px rgba(106,27,154,0.06); } [data-theme="royal"] .cta-section h3 { color: #1a1028; } [data-theme="royal"] .cta-section p { color: #6a5580; } [data-theme="royal"] .cta-btn.primary { background: linear-gradient(135deg, #f3e5f5, #e1bee7); color: #4a148c; } [data-theme="royal"] .cta-btn.secondary { background: #7b1fa2; color: #fff; } /* -- Contact Page Extras -- */ [data-theme="royal"] .contact-header h2 { color: #1a1028; } [data-theme="royal"] .contact-header p { color: #6a5580; } [data-theme="royal"] .contact-info { background: linear-gradient(145deg, #4a148c, #6a1b9a); color: #f3e5f5; } [data-theme="royal"] .contact-icon { background: rgba(206,147,216,0.2); } [data-theme="royal"] .contact-details p { color: #b39ddb; } [data-theme="royal"] .contact-social { border-top-color: rgba(255,255,255,0.15); } [data-theme="royal"] .contact-social h4 { background: #7b1fa2; color: #fff; } [data-theme="royal"] .social-links a { background: rgba(255,255,255,0.15); color: #f3e5f5; } [data-theme="royal"] .social-links a:hover { background: #f3e5f5; color: #4a148c; } [data-theme="royal"] .contact-form-wrapper { background: #fff; } [data-theme="royal"] .contact-form h3 { color: #1a1028; } [data-theme="royal"] .form-group label { color: #6a5580; } [data-theme="royal"] .form-group input, [data-theme="royal"] .form-group select, [data-theme="royal"] .form-group textarea { background: #f5f0fa; border-color: #ce93d8; color: #1a1028; } [data-theme="royal"] .contact-map h3 { color: #1a1028; } [data-theme="royal"] .faq-section h3 { color: #1a1028; } [data-theme="royal"] .faq-item { background: #fff; border-color: #ce93d8; } [data-theme="royal"] .faq-question:hover { background: rgba(106,27,154,0.04); } [data-theme="royal"] .faq-question span { color: #1a1028; } [data-theme="royal"] .faq-question i { color: #6a5580; } [data-theme="royal"] .faq-answer p { color: #6a5580; } [data-theme="royal"] .whatsapp-float { background: #7b1fa2; color: #fff; } [data-theme="royal"] .whatsapp-float:hover { background: #f3e5f5; color: #4a148c; } /* -- Sort / Category Dropdowns -- */ [data-theme="royal"] .sort-toggle { background: linear-gradient(#4a148c, #6a1b9a); color: #f3e5f5; } [data-theme="royal"] .sort-toggle .sort-label { color: #f3e5f5 !important; } [data-theme="royal"] .sort-menu { background: linear-gradient(#4a148c, #3c0f73); border-color: rgba(255,255,255,0.15); } [data-theme="royal"] .sort-menu .sort-btn { color: #b39ddb; } [data-theme="royal"] .sort-btn.active { background: linear-gradient(#6a1b9a, #7b1fa2); color: #fff; } [data-theme="royal"] .cat-toggle { background: linear-gradient(#4a148c, #6a1b9a); color: #f3e5f5; } [data-theme="royal"] .cat-menu { background: linear-gradient(#4a148c, #3c0f73); border-color: rgba(255,255,255,0.15); } [data-theme="royal"] .cat-menu .filter-btn { color: #b39ddb; } [data-theme="royal"] .filter-btn[data-filter="all"] { color: #1a1028 !important; } /* -- Notification Popup -- */ [data-theme="royal"] .notif-pre-prompt-box { background: #fff; } [data-theme="royal"] .notif-pre-prompt-icon { background: #7b1fa2; } [data-theme="royal"] .notif-pre-prompt-title { color: #1a1028; } [data-theme="royal"] .notif-btn-allow { background: #7b1fa2; border-color: #7b1fa2; color: #fff; } [data-theme="royal"] .notif-btn-allow:hover { background: #4a148c; } [data-theme="royal"] .notif-btn-block { background: #fff; color: #6a5580; border-color: #ce93d8; } [data-theme="royal"] .notif-btn-block:hover { background: #f5f0fa; } /* -- Error Pages -- */ [data-theme="royal"] .error-page { background: #f5f0fa; } [data-theme="royal"] .error-title { color: #1a1028; } [data-theme="royal"] .error-message { color: #6a5580; } [data-theme="royal"] .back-btn { background: #7b1fa2; color: #fff; } [data-theme="royal"] .back-btn:hover { box-shadow: 0 10px 30px rgba(106,27,154,0.3); } /* -- Footer Extras -- */ [data-theme="royal"] .footer-content { border-bottom-color: #4a148c; } [data-theme="royal"] .footer-tag { color: #9575cd; } [data-theme="royal"] .footer-tag:hover { color: #fff; } /* ───────────────────────────────────────────────────────────── CHERRY BLOSSOM — Extended ───────────────────────────────────────────────────────────── */ /* -- Nav & Social -- */ [data-theme="cherry"] .social-icon { color: #f8bbd0; } [data-theme="cherry"] .social-icon:hover { color: #fff; } [data-theme="cherry"] .main-nav { background: #fef5f7; } [data-theme="cherry"] .main-nav ul li a.active { color: #c2185b; } [data-theme="cherry"] .main-nav ul li a.active::after { background: #c2185b; } /* -- Projects Page -- */ [data-theme="cherry"] .projects-header h2 { color: #2d1420; } [data-theme="cherry"] .projects-header p { color: #8e5068; } [data-theme="cherry"] .projects-filter .filter-btn { background: #fff; border-color: #f48fb1; color: #8e5068; } [data-theme="cherry"] .projects-filter .filter-btn.active { background: #c2185b; color: #fff; border-color: #c2185b; } [data-theme="cherry"] .project-card { background: #fff; border-color: #f48fb1; } [data-theme="cherry"] .project-card:hover { box-shadow: 0 8px 30px rgba(194,24,91,0.12); } [data-theme="cherry"] .project-title { color: #2d1420; } [data-theme="cherry"] .project-description { color: #8e5068; } [data-theme="cherry"] .tech-tag { background: rgba(194,24,91,0.08); color: #c2185b; } [data-theme="cherry"] .project-links { border-top-color: #f48fb1; } [data-theme="cherry"] .project-link.live { background: #c2185b; color: #fff; } [data-theme="cherry"] .project-link.live:hover { background: #880e4f; } [data-theme="cherry"] .project-link.github { background: rgba(194,24,91,0.08); color: #c2185b; } [data-theme="cherry"] .project-link.github:hover { background: rgba(194,24,91,0.15); } [data-theme="cherry"] .project-date { color: #8e5068; } [data-theme="cherry"] .no-projects { color: #8e5068; } [data-theme="cherry"] .project-image-placeholder { background: linear-gradient(135deg, #880e4f, #c2185b); color: rgba(255,255,255,0.3); } [data-theme="cherry"] .project-image img { filter: grayscale(15%) contrast(1.05) brightness(1); } [data-theme="cherry"] .project-card:hover .project-image img { filter: grayscale(0%) contrast(1.05) brightness(1.05) saturate(1.25); } /* -- Projects Floating Button -- */ [data-theme="cherry"] .projects-floating-btn { background: #c2185b; color: #fff; box-shadow: 0 4px 20px rgba(194,24,91,0.3); } [data-theme="cherry"] .projects-floating-btn:hover { background: #880e4f; } /* -- Stats Sidebar -- */ [data-theme="cherry"] .stats-toggle { background: #880e4f; color: #fce4ec; box-shadow: -3px 3px 15px rgba(136,14,79,0.3); } [data-theme="cherry"] .stats-toggle:hover { background: #ad1457; } [data-theme="cherry"] .stats-toggle::after { background: rgba(252,228,236,0.3); } [data-theme="cherry"] .stats-card { background: linear-gradient(165deg, #880e4f 0%, #6d0b3f 100%); border-left-color: rgba(255,255,255,0.08); border-bottom-color: rgba(255,255,255,0.08); } [data-theme="cherry"] .stats-profile { border-bottom-color: rgba(255,255,255,0.15); } [data-theme="cherry"] .stats-avatar { border-color: rgba(244,143,177,0.3); } [data-theme="cherry"] .stats-profile h4 { color: #fce4ec; } [data-theme="cherry"] .stats-tagline { color: rgba(244,143,177,0.8); } [data-theme="cherry"] .stats-location { color: rgba(244,143,177,0.7); } [data-theme="cherry"] .stat-item { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.08); } [data-theme="cherry"] .stat-item:hover { background: rgba(255,255,255,0.15); } [data-theme="cherry"] .stat-value { color: #fce4ec; } [data-theme="cherry"] .stat-label { color: rgba(244,143,177,0.7); } /* -- Blog Page Specifics -- */ [data-theme="cherry"] .blog-header h2 { color: #2d1420; } [data-theme="cherry"] .blog-header p { color: #8e5068; } [data-theme="cherry"] .blog-category { background: #c2185b; color: #fff; } [data-theme="cherry"] .blog-meta { color: #8e5068; } [data-theme="cherry"] .blog-card-content h3 { color: #2d1420; } [data-theme="cherry"] .blog-card:hover h3 { color: #c2185b; } [data-theme="cherry"] .blog-card-content p { color: #8e5068; } [data-theme="cherry"] .read-more { color: #c2185b; } [data-theme="cherry"] .read-more:hover { color: #880e4f; } [data-theme="cherry"] .blog-card img { filter: grayscale(15%) contrast(1.05) brightness(1); } [data-theme="cherry"] .blog-card:hover img { filter: grayscale(0%) contrast(1.05) brightness(1.05); } /* -- About Page Extras -- */ [data-theme="cherry"] .about-intro h2 { color: #2d1420; } [data-theme="cherry"] .about-intro .tagline { color: #8e5068; } [data-theme="cherry"] .about-intro p { color: #8e5068; } [data-theme="cherry"] .about-card { background: linear-gradient(145deg, #880e4f, #ad1457); border-color: transparent; color: #fce4ec; } [data-theme="cherry"] .about-card-icon { color: #f48fb1; } [data-theme="cherry"] .about-card h3 { color: #fff; } [data-theme="cherry"] .about-card p { color: #f48fb1; } [data-theme="cherry"] .about-journey h3, [data-theme="cherry"] .about-equipment h3 { color: #2d1420; } [data-theme="cherry"] .timeline::before { background: #c2185b; } [data-theme="cherry"] .timeline-year { background: #c2185b; color: #fff; } [data-theme="cherry"] .timeline-content { background: #fff; border: 1px solid #f48fb1; } [data-theme="cherry"] .timeline-content h4 { color: #2d1420; } [data-theme="cherry"] .timeline-content p { color: #8e5068; } [data-theme="cherry"] .timeline-item { border-color: #f48fb1; } [data-theme="cherry"] .equipment-item i { color: #c2185b; } [data-theme="cherry"] .equipment-item span { color: #2d1420; } /* -- Gallery Page Extras -- */ [data-theme="cherry"] .gallery-page-header p { color: #8e5068; } [data-theme="cherry"] .gallery-page-item { border-color: #f48fb1; } /* -- Services Page Inline Overrides -- */ [data-theme="cherry"] .services-header h2 { color: #2d1420; } [data-theme="cherry"] .services-header p { color: #8e5068; } [data-theme="cherry"] .service-card { background: #fff !important; border-color: #f48fb1 !important; box-shadow: 0 5px 20px rgba(194,24,91,0.06) !important; } [data-theme="cherry"] .service-card:hover { background: #fce4ec !important; } [data-theme="cherry"] .service-card h3 { color: #880e4f !important; } [data-theme="cherry"] .service-card p { color: #8e5068 !important; } [data-theme="cherry"] .service-icon { background: linear-gradient(135deg, #c2185b, #880e4f) !important; } [data-theme="cherry"] .service-features li { color: #8e5068; border-bottom-color: #f48fb1; } [data-theme="cherry"] .service-features li i { color: #c2185b; } [data-theme="cherry"] .service-btn { background: linear-gradient(135deg, #c2185b, #880e4f); color: #fff; } [data-theme="cherry"] .pricing-section { background: #fff; border-color: #f48fb1; box-shadow: 0 5px 20px rgba(194,24,91,0.06); } [data-theme="cherry"] .pricing-header h3 { color: #2d1420; } [data-theme="cherry"] .pricing-header p { color: #8e5068; } [data-theme="cherry"] .pricing-card { background: #fef5f7; border-color: #f48fb1; } [data-theme="cherry"] .pricing-card.featured { background: linear-gradient(135deg, #880e4f, #ad1457); border-color: transparent; } [data-theme="cherry"] .pricing-card h4 { color: #2d1420; } [data-theme="cherry"] .pricing-card.featured h4 { color: #fff; } [data-theme="cherry"] .pricing-card .price { color: #2d1420; } [data-theme="cherry"] .pricing-card.featured .price { color: #fff; } [data-theme="cherry"] .pricing-card .price-note { color: #8e5068; } [data-theme="cherry"] .pricing-card.featured .price-note { color: rgba(255,255,255,0.7); } [data-theme="cherry"] .pricing-features li { color: #8e5068; border-bottom-color: #f48fb1; } [data-theme="cherry"] .pricing-card.featured .pricing-features li { color: rgba(255,255,255,0.9); border-bottom-color: rgba(255,255,255,0.15); } [data-theme="cherry"] .pricing-btn { background: linear-gradient(135deg, #c2185b, #880e4f); color: #fff; } [data-theme="cherry"] .pricing-card.featured .pricing-btn { background: linear-gradient(135deg, #fce4ec, #f8bbd0); color: #880e4f; } [data-theme="cherry"] .cta-section { background: #fff; border-color: #f48fb1; box-shadow: 0 5px 20px rgba(194,24,91,0.06); } [data-theme="cherry"] .cta-section h3 { color: #2d1420; } [data-theme="cherry"] .cta-section p { color: #8e5068; } [data-theme="cherry"] .cta-btn.primary { background: linear-gradient(135deg, #fce4ec, #f8bbd0); color: #880e4f; } [data-theme="cherry"] .cta-btn.secondary { background: #c2185b; color: #fff; } /* -- Contact Page Extras -- */ [data-theme="cherry"] .contact-header h2 { color: #2d1420; } [data-theme="cherry"] .contact-header p { color: #8e5068; } [data-theme="cherry"] .contact-info { background: linear-gradient(145deg, #880e4f, #ad1457); color: #fce4ec; } [data-theme="cherry"] .contact-icon { background: rgba(244,143,177,0.2); } [data-theme="cherry"] .contact-details p { color: #f48fb1; } [data-theme="cherry"] .contact-social { border-top-color: rgba(255,255,255,0.15); } [data-theme="cherry"] .contact-social h4 { background: #c2185b; color: #fff; } [data-theme="cherry"] .social-links a { background: rgba(255,255,255,0.15); color: #fce4ec; } [data-theme="cherry"] .social-links a:hover { background: #fce4ec; color: #880e4f; } [data-theme="cherry"] .contact-form-wrapper { background: #fff; } [data-theme="cherry"] .contact-form h3 { color: #2d1420; } [data-theme="cherry"] .form-group label { color: #8e5068; } [data-theme="cherry"] .form-group input, [data-theme="cherry"] .form-group select, [data-theme="cherry"] .form-group textarea { background: #fef5f7; border-color: #f48fb1; color: #2d1420; } [data-theme="cherry"] .contact-map h3 { color: #2d1420; } [data-theme="cherry"] .faq-section h3 { color: #2d1420; } [data-theme="cherry"] .faq-item { background: #fff; border-color: #f48fb1; } [data-theme="cherry"] .faq-question:hover { background: rgba(194,24,91,0.04); } [data-theme="cherry"] .faq-question span { color: #2d1420; } [data-theme="cherry"] .faq-question i { color: #8e5068; } [data-theme="cherry"] .faq-answer p { color: #8e5068; } [data-theme="cherry"] .whatsapp-float { background: #c2185b; color: #fff; } [data-theme="cherry"] .whatsapp-float:hover { background: #fce4ec; color: #880e4f; } /* -- Sort / Category Dropdowns -- */ [data-theme="cherry"] .sort-toggle { background: linear-gradient(#880e4f, #ad1457); color: #fce4ec; } [data-theme="cherry"] .sort-toggle .sort-label { color: #fce4ec !important; } [data-theme="cherry"] .sort-menu { background: linear-gradient(#880e4f, #6d0b3f); border-color: rgba(255,255,255,0.15); } [data-theme="cherry"] .sort-menu .sort-btn { color: #f48fb1; } [data-theme="cherry"] .sort-btn.active { background: linear-gradient(#ad1457, #c2185b); color: #fff; } [data-theme="cherry"] .cat-toggle { background: linear-gradient(#880e4f, #ad1457); color: #fce4ec; } [data-theme="cherry"] .cat-menu { background: linear-gradient(#880e4f, #6d0b3f); border-color: rgba(255,255,255,0.15); } [data-theme="cherry"] .cat-menu .filter-btn { color: #f48fb1; } [data-theme="cherry"] .filter-btn[data-filter="all"] { color: #2d1420 !important; } /* -- Notification Popup -- */ [data-theme="cherry"] .notif-pre-prompt-box { background: #fff; } [data-theme="cherry"] .notif-pre-prompt-icon { background: #c2185b; } [data-theme="cherry"] .notif-pre-prompt-title { color: #2d1420; } [data-theme="cherry"] .notif-btn-allow { background: #c2185b; border-color: #c2185b; color: #fff; } [data-theme="cherry"] .notif-btn-allow:hover { background: #880e4f; } [data-theme="cherry"] .notif-btn-block { background: #fff; color: #8e5068; border-color: #f48fb1; } [data-theme="cherry"] .notif-btn-block:hover { background: #fef5f7; } /* -- Error Pages -- */ [data-theme="cherry"] .error-page { background: #fef5f7; } [data-theme="cherry"] .error-title { color: #2d1420; } [data-theme="cherry"] .error-message { color: #8e5068; } [data-theme="cherry"] .back-btn { background: #c2185b; color: #fff; } [data-theme="cherry"] .back-btn:hover { box-shadow: 0 10px 30px rgba(194,24,91,0.3); } /* -- Footer Extras -- */ [data-theme="cherry"] .footer-content { border-bottom-color: #880e4f; } [data-theme="cherry"] .footer-tag { color: #ec407a; } [data-theme="cherry"] .footer-tag:hover { color: #fff; } /* ============================================================ MOBILE NAV BACKGROUND OVERRIDES The mobile sticky nav needs the theme bg color ============================================================ */ /* ------------------------------------------------------------ MIDNIGHT — Glassy Header & Floating Nav Make the site header / navbar and the floating menu match the midnight header style with glassmorphism + blur. ------------------------------------------------------------ */ [data-theme="midnight"] .main-nav { background: linear-gradient(180deg, rgba(13,17,23,0.55), rgba(22,27,34,0.45)); backdrop-filter: blur(10px) saturate(1.05); -webkit-backdrop-filter: blur(10px) saturate(1.05); border-bottom: 1px solid rgba(255,255,255,0.04); box-shadow: 0 8px 30px rgba(2,6,23,0.6); } [data-theme="midnight"] .main-nav .nav-inner, [data-theme="midnight"] .main-nav .nav-container { background: transparent; } [data-theme="midnight"] .main-nav ul li a { color: var(--muted); } [data-theme="midnight"] .main-nav ul li a:hover, [data-theme="midnight"] .main-nav ul li a.active { color: var(--theme-accent); } [data-theme="midnight"] .main-nav .brand { color: var(--text); } [data-theme="midnight"] .floating-menu-modal::before { background: rgba(2,6,23,0.55); } [data-theme="midnight"] .floating-menu-content { background: linear-gradient(180deg, rgba(18,22,28,0.55), rgba(13,17,23,0.45)); backdrop-filter: blur(12px) saturate(1.08); -webkit-backdrop-filter: blur(12px) saturate(1.08); border-left: 1px solid rgba(255,255,255,0.04); box-shadow: -8px 0 32px rgba(2,6,23,0.6); color: var(--text); } [data-theme="midnight"] .floating-menu-content .fb-menu-header { border-bottom: 1px solid rgba(255,255,255,0.03); padding-bottom: 20px; margin-bottom: 20px; } [data-theme="midnight"] .floating-menu-content .fb-menu-icon { background: linear-gradient(135deg, rgba(88,166,255,0.18), rgba(56,139,253,0.12)); border: 1px solid rgba(88,166,255,0.08); } [data-theme="midnight"] .floating-menu-content .fb-menu-title { color: var(--text); font-weight:700; } [data-theme="midnight"] .floating-menu-content .fb-menu-list .fb-menu-item { color: var(--text); background: transparent; border-radius: 8px; padding: 10px 8px; display:block; } [data-theme="midnight"] .floating-menu-content .fb-menu-list .fb-menu-item:hover { background: rgba(88,166,255,0.04); color: var(--theme-accent); } @media (max-width: 768px) { [data-theme="midnight"] .main-nav { background: #0d1117; } [data-theme="ocean"] .main-nav { background: #f0f4f8; } [data-theme="forest"] .main-nav { background: #f1f5f0; } [data-theme="sunset"] .main-nav { background: #fdf6f0; } [data-theme="royal"] .main-nav { background: #f5f0fa; } [data-theme="cherry"] .main-nav { background: #fef5f7; } /* Mobile service cards for midnight - override style.css mobile card styles */ [data-theme="midnight"] .service-card { background: #161b22 !important; } [data-theme="midnight"] .service-card::after { background: linear-gradient(90deg, #30363d, #58a6ff, #30363d) !important; } [data-theme="midnight"] .service-card h3 { color: #e6edf3 !important; } [data-theme="midnight"] .service-card p { color: #8b949e !important; } [data-theme="midnight"] .card-link { background: rgba(88,166,255,0.1); border-color: rgba(88,166,255,0.2); color: #58a6ff; } /* Mobile footer nav */ [data-theme="midnight"] .footer-nav a { background: rgba(48,54,61,0.3); } [data-theme="ocean"] .footer-nav a { background: rgba(25,118,210,0.1); } [data-theme="forest"] .footer-nav a { background: rgba(46,125,50,0.1); } [data-theme="sunset"] .footer-nav a { background: rgba(230,81,0,0.08); } [data-theme="royal"] .footer-nav a { background: rgba(106,27,154,0.08); } [data-theme="cherry"] .footer-nav a { background: rgba(194,24,91,0.08); } /* Mobile gallery item bg */ [data-theme="midnight"] .middle-gallery .gallery-item { background: #161b22; } [data-theme="ocean"] .middle-gallery .gallery-item { background: #0d47a1; } [data-theme="forest"] .middle-gallery .gallery-item { background: #1b5e20; } [data-theme="sunset"] .middle-gallery .gallery-item { background: #3e2723; } [data-theme="royal"] .middle-gallery .gallery-item { background: #4a148c; } [data-theme="cherry"] .middle-gallery .gallery-item { background: #880e4f; } } /* ────────────────────────────────────────────────────────────── MIDNIGHT — Services page svc-* component overrides Restore the dark-navy tones for the new svc-* layout classes that were updated to Vintage Grunge warm defaults. ────────────────────────────────────────────────────────────── */ [data-theme="midnight"] .svc-btn-primary { background: linear-gradient(135deg, #1a2230 0%, #22304a 100%); color: #fff; border-color: #26334d; box-shadow: 0 2px 12px 0 rgba(20,30,40,0.35); } [data-theme="midnight"] .svc-card:hover { border-color: rgba(88,166,255,0.3); } [data-theme="midnight"] .svc-pricing-card:hover { border-color: rgba(88,166,255,0.3); } [data-theme="midnight"] .svc-pricing-card.featured { background: linear-gradient(135deg, #1f6feb 0%, #388bfd 100%); border-color: transparent; } [data-theme="midnight"] .svc-pricing-card.featured .svc-pricing-btn { background: linear-gradient(135deg, #e6edf3 0%, #c9d1d9 100%); color: #0d1117; border-color: transparent; } /* MIDNIGHT — Blog details view/like/share meta-right overrides */ [data-theme="midnight"] .author-avatar { background: #1c2535; color: #e6edf3; }