/* ============================================ EDVANCE MEDIA — Universal Dark Theme Activated by [data-theme="dark"] on ============================================ */ /* --- Smooth theme transition --- */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color 0.4s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, fill 0.3s ease !important; } /* --- Dark CSS variable overrides --- */ [data-theme="dark"] { --bg: #0F172A; --bg-alt: #0B1120; --bg-card: rgba(30, 41, 59, 0.6); --text: #E2E8F0; --text-secondary: rgba(255,255,255,0.6); --text-light: rgba(255,255,255,0.3); --border: rgba(129,140,248,0.15); --border-light: rgba(129,140,248,0.08); --shadow-sm: 0 1px 2px rgba(0,0,0,0.2); --shadow: 0 4px 6px -1px rgba(0,0,0,0.3); --shadow-lg: 0 20px 40px rgba(0,0,0,0.4); --shadow-xl: 0 25px 50px rgba(0,0,0,0.5); --gradient-soft: linear-gradient(135deg, #1E1B4B, #312E81); } /* ============================================ NAVBAR ============================================ */ [data-theme="dark"] .navbar { background: rgba(15, 23, 42, 0.6); } [data-theme="dark"] .navbar.scrolled { background: rgba(15, 23, 42, 0.95); box-shadow: 0 4px 20px rgba(0,0,0,0.3); } [data-theme="dark"] .navbar__link { color: rgba(255,255,255,0.7); } [data-theme="dark"] .navbar__link:hover, [data-theme="dark"] .navbar__link.active { color: #fff; background: rgba(129,140,248,0.15); } [data-theme="dark"] .navbar__burger span { background: #fff; } [data-theme="dark"] .navbar__logo svg path[fill="#1E293B"] { fill: #fff; } [data-theme="dark"] .navbar__dropdown-menu { background: #1E293B; } [data-theme="dark"] .navbar__dropdown-menu a { color: rgba(255,255,255,0.7); } [data-theme="dark"] .navbar__dropdown-menu a:hover { color: #fff; background: rgba(129,140,248,0.15); } [data-theme="dark"] .navbar__cta { box-shadow: 0 4px 15px rgba(79,70,229,0.4); } /* Mobile menu */ @media (max-width: 768px) { [data-theme="dark"] .navbar__menu { background: var(--bg); } } /* ============================================ HEROES — universal dark overrides ============================================ */ /* --- Home hero --- */ [data-theme="dark"] .hero { background: linear-gradient(160deg, #0F172A 0%, #1E1B4B 50%, #312E81 100%); } [data-theme="dark"] .hero__canvas { opacity: 0.7; } [data-theme="dark"] .hero__title { color: #fff; } [data-theme="dark"] .hero__title .text-gradient { background: linear-gradient(135deg, #34D399, #818CF8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="dark"] .hero__subtitle { color: rgba(255,255,255,0.7); } [data-theme="dark"] .hero__badge { color: var(--primary-light); background: rgba(79,70,229,0.2); border: 1px solid rgba(129,140,248,0.3); } [data-theme="dark"] .hero__badge .dot { background: #34D399; } [data-theme="dark"] .hero__actions .btn--outline { color: #fff; border-color: rgba(255,255,255,0.3); } [data-theme="dark"] .hero__actions .btn--outline:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); } /* --- Service pages hero (servers, waf) --- */ [data-theme="dark"] .srv-hero { background: linear-gradient(160deg, #0F172A 0%, #1E1B4B 50%, #312E81 100%); } [data-theme="dark"] .srv-hero__canvas { opacity: 0.7; } [data-theme="dark"] .srv-hero h1 { color: #fff; } [data-theme="dark"] .srv-hero h1 .text-gradient { background: linear-gradient(135deg, #34D399, #818CF8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="dark"] .srv-hero__subtitle { color: rgba(255,255,255,0.7); } [data-theme="dark"] .srv-hero__badge { color: var(--primary-light); background: rgba(79,70,229,0.2); border: 1px solid rgba(129,140,248,0.3); } [data-theme="dark"] .srv-hero__badge::before { background: #34D399; } [data-theme="dark"] .srv-hero__actions .btn--outline { color: #fff; border-color: rgba(255,255,255,0.3); } [data-theme="dark"] .srv-hero__actions .btn--outline:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); } /* --- Marketing hero --- */ [data-theme="dark"] .mkt-hero { background: linear-gradient(160deg, #0F172A 0%, #1E1B4B 50%, #312E81 100%); } [data-theme="dark"] .mkt-hero__canvas { opacity: 0.7; } [data-theme="dark"] .mkt-hero h1 { color: #fff; } [data-theme="dark"] .mkt-hero h1 .text-gradient { background: linear-gradient(135deg, #34D399, #F59E0B); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="dark"] .mkt-hero__subtitle { color: rgba(255,255,255,0.7); } [data-theme="dark"] .mkt-hero__badge { color: var(--primary-light); background: rgba(79,70,229,0.2); border: 1px solid rgba(129,140,248,0.3); } [data-theme="dark"] .mkt-hero__badge::before { background: #34D399; } [data-theme="dark"] .mkt-hero__actions .btn--outline { color: #fff; border-color: rgba(255,255,255,0.3); } [data-theme="dark"] .mkt-hero__actions .btn--outline:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); } /* ============================================ SECTIONS ============================================ */ [data-theme="dark"] .section { background: var(--bg); } [data-theme="dark"] .section--alt { background: #1E1B4B !important; } [data-theme="dark"] .section__label { background: rgba(79,70,229,0.2); color: var(--primary-light); } /* ============================================ HOME — Service Cards ============================================ */ [data-theme="dark"] .service-card__icon--dev { background: rgba(79,70,229,0.15); } [data-theme="dark"] .service-card__icon--sec { background: rgba(16,185,129,0.15); } [data-theme="dark"] .service-card__icon--mkt { background: rgba(245,158,11,0.15); } [data-theme="dark"] .service-card__icon--srv { background: rgba(6,182,212,0.15); } [data-theme="dark"] .service-card__title a:hover { color: var(--primary-light); } [data-theme="dark"] .service-card__link { color: var(--primary-light); } [data-theme="dark"] .tag { background: rgba(79,70,229,0.1); } /* --- Features (Why us) --- */ [data-theme="dark"] .section--alt .feature-item__number { background: linear-gradient(135deg, #34D399, #818CF8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* --- Portfolio --- */ [data-theme="dark"] .portfolio-card__thumb { background: var(--gradient-soft); color: rgba(129,140,248,0.4); } [data-theme="dark"] .portfolio-card__thumb .placeholder-pattern { background: radial-gradient(circle at 20% 50%, rgba(79,70,229,0.15) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(124,58,237,0.15) 0%, transparent 50%); } [data-theme="dark"] .portfolio-card__category { color: var(--primary-light); } /* ============================================ WAF / SERVERS — What cards (icon overrides) ============================================ */ [data-theme="dark"] .what-card__icon--owasp { background: rgba(79,70,229,0.15); } [data-theme="dark"] .what-card__icon--bot { background: rgba(245,158,11,0.15); } [data-theme="dark"] .what-card__icon--ddos { background: rgba(239,68,68,0.15); } [data-theme="dark"] .what-card__icon--ssl { background: rgba(16,185,129,0.15); } [data-theme="dark"] .what-card__icon--vps { background: rgba(79,70,229,0.15); } [data-theme="dark"] .what-card__icon--dedicated { background: rgba(124,58,237,0.15); } [data-theme="dark"] .what-card__icon--admin { background: rgba(245,158,11,0.15); } [data-theme="dark"] .what-card__icon--monitoring { background: rgba(16,185,129,0.15); } [data-theme="dark"] .what-card__list li::before { background: var(--primary-light); } /* --- Marketing what cards --- */ [data-theme="dark"] .what-card__icon--seo { background: rgba(16,185,129,0.15); } [data-theme="dark"] .what-card__icon--aieo { background: rgba(124,58,237,0.15); } [data-theme="dark"] .what-card__icon--audit { background: rgba(245,158,11,0.15); } [data-theme="dark"] .what-card__icon--content { background: rgba(79,70,229,0.15); } /* ============================================ PRICING ============================================ */ [data-theme="dark"] .pricing-card--popular { background: linear-gradient(180deg, rgba(79,70,229,0.08) 0%, var(--bg-card) 100%); } /* ============================================ CTA ============================================ */ [data-theme="dark"] .cta-section { background: linear-gradient(135deg, #312E81, #4F46E5); } [data-theme="dark"] .cta-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 50%, rgba(129,140,248,0.15) 0%, transparent 50%), radial-gradient(circle at 70% 50%, rgba(124,58,237,0.1) 0%, transparent 50%); } [data-theme="dark"] .cta-section .btn { background: #fff; color: var(--primary); box-shadow: 0 4px 20px rgba(0,0,0,0.3); } [data-theme="dark"] .cta-section .btn:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.4); } /* ============================================ PROCESS ============================================ */ [data-theme="dark"] .process-step::after { background: rgba(129,140,248,0.15); } /* ============================================ FORMS ============================================ */ [data-theme="dark"] .form-input, [data-theme="dark"] .form-textarea, [data-theme="dark"] .form-select { background: rgba(30,41,59,0.6); } [data-theme="dark"] .form-input:focus, [data-theme="dark"] .form-textarea:focus, [data-theme="dark"] .form-select:focus { border-color: var(--primary-light); box-shadow: 0 0 0 4px rgba(79,70,229,0.2); } /* ============================================ CONTACT ============================================ */ [data-theme="dark"] .contact-info__icon { background: rgba(79,70,229,0.15); color: var(--primary-light); } [data-theme="dark"] .contact-info__text a:hover { color: var(--primary-light); } /* ============================================ FOOTER ============================================ */ [data-theme="dark"] .footer { background: #0B1120; } [data-theme="dark"] .footer__links a:hover { color: var(--primary-light); } /* ============================================ AIEO (Marketing) ============================================ */ [data-theme="dark"] .aieo-section { background: linear-gradient(160deg, #0F172A, #1E1B4B); } /* ============================================ THEME TOGGLE BUTTON ============================================ */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: transparent; border: 1px solid var(--border); cursor: pointer; transition: all var(--transition); color: var(--text-secondary); flex-shrink: 0; } .theme-toggle:hover { background: rgba(79,70,229,0.08); border-color: var(--primary-light); color: var(--primary); } [data-theme="dark"] .theme-toggle:hover { background: rgba(129,140,248,0.15); } .theme-toggle svg { width: 20px; height: 20px; transition: transform 0.3s ease; } .theme-toggle:hover svg { transform: rotate(15deg); } /* Show/hide icons based on theme */ .theme-toggle__sun { display: none; } .theme-toggle__moon { display: block; } [data-theme="dark"] .theme-toggle__sun { display: block; } [data-theme="dark"] .theme-toggle__moon { display: none; }