/* * ============================================================ * LIGHT THEME OVERRIDES * Applied when is set. * The dark theme (cyber-theme.css) remains the default. * ============================================================ */ [data-theme="light"] { /* ── Base ─────────────────────────────────────────────────── */ color-scheme: light; body, body::before { background: #f0f4f8 !important; color: #1a1a2e !important; } /* ── Typography ───────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { color: #1a1a2e !important; } p { color: #444 !important; } a { color: #007a4d !important; } a:hover { color: #005c3a !important; text-shadow: none !important; } /* ── Navbar ───────────────────────────────────────────────── */ .floating-navbar { background: rgba(255, 255, 255, 0.95) !important; border: 1px solid rgba(0, 122, 77, 0.15) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; } .navbar .navbar-brand { color: #007a4d !important; } .navbar .navbar-brand:hover { color: #005c3a !important; } .navbar .navbar-nav .nav-link { color: #444 !important; } .navbar .navbar-nav .nav-link:hover { color: #007a4d !important; background: rgba(0, 122, 77, 0.08) !important; } .navbar .navbar-nav .nav-link.active-page { color: #007a4d !important; border-bottom-color: #007a4d !important; } /* Mobile nav drawer */ .mobile-nav-drawer { background: rgba(240, 244, 248, 0.98) !important; } .mobile-nav-drawer .nav-link { color: #444 !important; border-color: rgba(0,122,77,0.15) !important; } .mobile-nav-drawer .nav-link:hover { color: #007a4d !important; background: rgba(0,122,77,0.06) !important; } /* Hamburger */ .nav-hamburger { background: rgba(0,122,77,0.08) !important; border-color: rgba(0,122,77,0.3) !important; } .nav-hamburger span { background: #007a4d !important; } /* ── Buttons ──────────────────────────────────────────────── */ .btn.btn-primary { border-color: #007a4d !important; color: #007a4d !important; } .btn.btn-primary:hover { background: #007a4d !important; color: #fff !important; box-shadow: 0 4px 15px rgba(0,122,77,0.3) !important; } .btn.btn-secondary { border-color: #0077aa !important; color: #0077aa !important; } .btn.btn-secondary:hover { background: #0077aa !important; color: #fff !important; box-shadow: 0 4px 15px rgba(0,119,170,0.3) !important; } /* ── Forms ────────────────────────────────────────────────── */ .form-control { background: #fff !important; border-color: rgba(0,122,77,0.3) !important; color: #1a1a2e !important; } .form-control:focus { border-color: #007a4d !important; box-shadow: 0 0 0 3px rgba(0,122,77,0.15) !important; background: #fff !important; } .form-control::placeholder { color: #999 !important; } .form-label { color: #007a4d !important; } /* ── Cards ────────────────────────────────────────────────── */ .card { background: #fff !important; border-color: rgba(0,0,0,0.08) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; } .card:hover { box-shadow: 0 8px 24px rgba(0,122,77,0.12) !important; } .card .card-header h3, .card .card-header h4, .card .card-header h5 { color: #007a4d !important; } .card .card-body { color: #444 !important; } /* ── Hero ─────────────────────────────────────────────────── */ .slideshow-overlay { background: rgba(240, 244, 248, 0.92) !important; } .hero .hero-content h1 { color: #007a4d !important; text-shadow: none !important; } .hero-subtitle { color: #007a4d !important; } .hero .hero-content > p { color: #555 !important; } /* ── Sections ─────────────────────────────────────────────── */ .home-section-alt { background: rgba(0,0,0,0.02) !important; border-color: rgba(0,122,77,0.1) !important; } .section-heading { color: #1a1a2e !important; } .section-desc { color: #666 !important; } .heading-line { background: linear-gradient(90deg, #007a4d, #0077aa) !important; } /* ── About ────────────────────────────────────────────────── */ .about-lead { color: #333 !important; } .highlight-card { background: #fff !important; border-color: rgba(0,122,77,0.15) !important; } .highlight-card:hover { border-color: rgba(0,122,77,0.4) !important; box-shadow: 0 4px 16px rgba(0,122,77,0.1) !important; } .highlight-icon { background: rgba(0,122,77,0.1) !important; color: #007a4d !important; } .highlight-text strong { color: #007a4d !important; } .highlight-text span { color: #555 !important; } /* ── Skills ───────────────────────────────────────────────── */ .skill-domain-card { background: #fff !important; border-color: rgba(0,0,0,0.08) !important; } .skill-domain-card:hover { border-color: rgba(0,122,77,0.25) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important; } .skill-tag { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.1) !important; color: #444 !important; } .skill-tag:hover { background: rgba(0,122,77,0.08) !important; border-color: rgba(0,122,77,0.3) !important; color: #007a4d !important; } /* ── Resume ───────────────────────────────────────────────── */ .resume-col-title { color: #007a4d !important; border-bottom-color: rgba(0,122,77,0.2) !important; } .resume-col-title i { color: #007a4d !important; } .resume-card { background: #fff !important; border-color: rgba(0,0,0,0.06) !important; border-left-color: #007a4d !important; } .resume-card:hover { border-left-color: #0077aa !important; box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important; } .resume-card h4 { color: #1a1a2e !important; } .resume-date { background: rgba(0,122,77,0.1) !important; color: #007a4d !important; } .resume-place { color: #666 !important; } .resume-card ul li { color: #555 !important; } .resume-card ul li::before { color: #007a4d !important; } /* ── Services ─────────────────────────────────────────────── */ .service-card { background: #fff !important; border-color: rgba(0,0,0,0.06) !important; } .service-card:hover { border-color: rgba(0,122,77,0.3) !important; box-shadow: 0 8px 24px rgba(0,122,77,0.1) !important; } .service-icon { background: rgba(0,122,77,0.1) !important; color: #007a4d !important; } .service-card:hover .service-icon { background: #007a4d !important; color: #fff !important; } .service-card h4 { color: #007a4d !important; } .service-card p { color: #666 !important; } /* ── Blog posts ───────────────────────────────────────────── */ .blog-post { background: #fff !important; border-color: rgba(0,0,0,0.08) !important; } .blog-post:hover { box-shadow: 0 8px 24px rgba(0,122,77,0.1) !important; } .blog-post .post-content .post-title a { color: #007a4d !important; } .blog-post .post-content .post-title a:hover { color: #005c3a !important; text-shadow: none !important; } .blog-post .post-content .post-excerpt { color: #555 !important; } .blog-post .post-content .post-meta { color: #888 !important; } .blog-post .post-content .post-meta .meta-item i { color: #007a4d !important; } .blog-post .post-content .post-tags .tag { background: rgba(0,119,170,0.08) !important; color: #0077aa !important; border-color: rgba(0,119,170,0.2) !important; } /* ── Portfolio cards ──────────────────────────────────────── */ .project-card { background: #fff !important; border-color: rgba(0,0,0,0.08) !important; } .project-card:hover { border-color: rgba(0,122,77,0.3) !important; box-shadow: 0 12px 32px rgba(0,0,0,0.1) !important; } .card-title { color: #1a1a2e !important; } .project-card:hover .card-title { color: #007a4d !important; } .card-desc { color: #666 !important; } .card-tech-tag { background: rgba(0,122,77,0.08) !important; border-color: rgba(0,122,77,0.2) !important; color: #007a4d !important; } .card-stats { color: #888 !important; } .card-stats i { color: #007a4d !important; } .card-read-more { color: #007a4d !important; } /* ── Contact ──────────────────────────────────────────────── */ .contact-item.card-style { background: #fff !important; border-color: rgba(0,122,77,0.15) !important; } .contact-item.card-style:hover { border-color: rgba(0,122,77,0.4) !important; } .contact-icon { background: rgba(0,122,77,0.1) !important; color: #007a4d !important; } .contact-item h4 { color: #007a4d !important; } .contact-item p { color: #555 !important; } .contact-form { background: #fff !important; border-color: rgba(0,122,77,0.15) !important; } .contact-form label { color: #007a4d !important; } .contact-submit-btn { border-color: #0077aa !important; color: #0077aa !important; } .contact-submit-btn:hover { background: #0077aa !important; color: #fff !important; } /* ── Footer ───────────────────────────────────────────────── */ .bg-secondary { background-color: #e8edf2 !important; } .bg-primary { background-color: #dde3ea !important; } .footer-bottom-links a { color: #555 !important; } .footer-bottom-links a:hover { color: #007a4d !important; } .text-muted { color: #777 !important; } .text-secondary { color: #555 !important; } .text-white, .text-white.fw-bold { color: #1a1a2e !important; } /* ── Neon colour overrides ────────────────────────────────── */ .text-neon-green { color: #007a4d !important; } .text-neon-cyan { color: #0077aa !important; } .text-neon-red { color: #cc2200 !important; } /* ── Pagination ───────────────────────────────────────────── */ .pagination .page-link { background: #fff !important; border-color: rgba(0,122,77,0.3) !important; color: #444 !important; } .pagination .page-link:hover, .pagination .page-link.active { background: #007a4d !important; color: #fff !important; border-color: #007a4d !important; box-shadow: none !important; } /* ── Alerts ───────────────────────────────────────────────── */ .alert.alert-success { background: rgba(0,122,77,0.08) !important; color: #007a4d !important; } .alert.alert-error { background: rgba(204,34,0,0.08) !important; color: #cc2200 !important; } .alert.alert-info { background: rgba(0,119,170,0.08) !important; color: #0077aa !important; } /* ── Back to top ──────────────────────────────────────────── */ .back-to-top { background: rgba(255,255,255,0.9) !important; border-color: rgba(0,122,77,0.3) !important; color: #007a4d !important; } .back-to-top:hover { background: rgba(0,122,77,0.1) !important; } /* ── Scrollbar ────────────────────────────────────────────── */ ::-webkit-scrollbar-track { background: #e8edf2 !important; } ::-webkit-scrollbar-thumb { background: #007a4d !important; } /* ── Blog base hero ───────────────────────────────────────── */ .blog-hero { background: linear-gradient(135deg, rgba(0,122,77,0.08), rgba(0,119,170,0.08)) !important; } .blog-hero h1 { color: #007a4d !important; } .blog-hero p { color: #555 !important; } /* ── Dropdown ─────────────────────────────────────────────── */ .dropdown-menu { background: #fff !important; border-color: rgba(0,122,77,0.2) !important; } .dropdown-item { color: #444 !important; } .dropdown-item:hover { color: #007a4d !important; background: rgba(0,122,77,0.06) !important; } .dropdown-divider { border-color: rgba(0,122,77,0.15) !important; } /* ── Selection ────────────────────────────────────────────── */ ::selection { background: rgba(0,122,77,0.2) !important; color: #1a1a2e !important; } /* ── Legal pages (Terms & Privacy) — BUG-16 fix ────────── */ .legal-section h2 { color: #007a4d !important; border-bottom-color: rgba(0,122,77,0.2) !important; } .legal-section p, .legal-section li { color: #444 !important; } .legal-section a { color: #007a4d !important; } .legal-section a:hover { color: #005c3a !important; } .legal-section strong { color: #1a1a2e !important; } .legal-section ul { color: #444 !important; } .legal-table th { color: #007a4d !important; border-bottom-color: rgba(0,122,77,0.2) !important; } .legal-table td { color: #444 !important; border-bottom-color: rgba(0,0,0,0.06) !important; } .legal-table td code { color: #007a4d !important; background: rgba(0,122,77,0.08) !important; } .legal-back { color: #666 !important; } .legal-back:hover { color: #007a4d !important; } /* Legal page header overrides */ .legal-header { border-bottom-color: rgba(0,122,77,0.2) !important; } .legal-page-title { color: #007a4d !important; } .legal-page-date { color: #888 !important; } } /* ── Legal page header defaults (dark theme) ─────────────────── */ .legal-page-title { color: cyan; } .legal-page-date { color: #555; } /* ── Theme toggle button ──────────────────────────────────────── */ #theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(0,255,136,0.3); background: rgba(0,255,136,0.06); color: #00ff88; cursor: pointer; transition: all 0.25s ease; flex-shrink: 0; font-size: 16px; outline: none; margin-left: 0.5rem; } #theme-toggle:hover { background: rgba(0,255,136,0.15); border-color: #00ff88; transform: rotate(20deg); } [data-theme="light"] #theme-toggle { border-color: rgba(0,122,77,0.3); background: rgba(0,122,77,0.08); color: #007a4d; } [data-theme="light"] #theme-toggle:hover { background: rgba(0,122,77,0.15); border-color: #007a4d; }