/* ================================================================ LIGHT MODE THEME — Black Energy Tech Applied via data-theme="light" on The hero section stays dark intentionally. ================================================================ */ /* ── Progressive light level variable (set by knob.js) ── */ :root { --light-level: 0; /* 0 = full dark, 1 = full light — controlled by knob */ } /* ---- Core Variable Overrides ---- */ [data-theme="light"] { --bg: #F7F5F2; --bg-card: #FFFFFF; --bg-card-hover: #F9F8F6; --text-primary: #1A1A1A; --text-muted: #7A7672; --text-white: #0D0D0D; --border-color: rgba(0, 0, 0, 0.1); --border-subtle: #E8E4E0; } /* ---- Smooth Theme Transition — all interactive & structural elements ---- */ body, section, .navbar__nav, .badge, .tag, .social-icon, .social-icon img, .pricing-card, .pricing-card--popular, .team-card__inner, .mobile-menu__panel, .form-group input, .form-group select, .form-group textarea, .blog-card, .footer, .footer .navbar__logo-text-img, .footer .social-icon img, .navbar__logo-text-img, .service-card, .service-card__icon img, .process-card, .btn-secondary, .faq-item, .inner-contact-card--right, .contact__inner, .mission-card, .exp-card, .exp-card::before, .exp-card__circle, .mission-card__price, .about-badge-btn { transition: background 1.2s ease, background-color 1.2s ease, border-color 1.2s ease, color 1.2s ease, box-shadow 1.2s ease, filter 1.2s ease, opacity 1.2s ease; } /* ================================================================ NAVBAR ================================================================ */ /* Scrolled state: frosted glass on light backgrounds */ [data-theme="light"] .navbar.scrolled { background: rgba(247, 245, 242, 0.88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(0, 0, 0, 0.06); } /* Logo text: fade from white to deep charcoal — not jet-black */ [data-theme="light"] .navbar.scrolled .navbar__logo-text-img { filter: brightness(0.08) saturate(100%); transition: filter 1.2s ease; } /* Nav pill stays dark — it's self-contained */ /* ---- Hamburger (mobile) ---- */ [data-theme="light"] .navbar.scrolled .navbar__burger { border-color: rgba(0, 0, 0, 0.15); } [data-theme="light"] .navbar.scrolled .navbar__burger span { background: #1A1A1A; } /* ================================================================ MOBILE MENU ================================================================ */ [data-theme="light"] .mobile-menu__panel { background: #FFFFFF; border-left: 1px solid rgba(0, 0, 0, 0.08); } [data-theme="light"] .mobile-menu__nav a { color: #1A1A1A; } [data-theme="light"] .mobile-menu__nav a:hover, [data-theme="light"] .mobile-menu__nav a.active { background: rgba(0, 0, 0, 0.04); } [data-theme="light"] .mobile-menu__close { border-color: rgba(0, 0, 0, 0.12); } [data-theme="light"] .mobile-menu__close svg path { stroke: #1A1A1A; } [data-theme="light"] .mobile-menu.open .mobile-menu__overlay { background: rgba(0, 0, 0, 0.25); } /* ================================================================ SHARED COMPONENTS ================================================================ */ /* ---- Badges ---- */ [data-theme="light"] .badge { background: #EDEAE6; color: var(--text-primary); box-shadow: inset 1px 1px 2px 0 rgba(255, 255, 255, 0.6), 0 1px 3px rgba(0, 0, 0, 0.06); } /* ---- Tags ---- */ [data-theme="light"] .tag { background: rgba(0, 0, 0, 0.06); color: var(--text-primary); } /* ---- Buttons ---- */ [data-theme="light"] .btn-secondary { border-color: rgba(0, 0, 0, 0.15); color: var(--text-primary); } [data-theme="light"] .btn-secondary:hover { background: rgba(0, 0, 0, 0.04); } /* ---- Social Icons ---- */ [data-theme="light"] .social-icon { background: #EDEAE6; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } /* Social icons: deep charcoal (not pure black) so they retain slight depth */ [data-theme="light"] .social-icon img { filter: brightness(0.1); transition: filter 1.2s ease; } /* ---- Forms ---- */ [data-theme="light"] .form-group input, [data-theme="light"] .form-group select, [data-theme="light"] .form-group textarea { background: rgba(0, 0, 0, 0.03); border-color: var(--border-subtle); color: var(--text-primary); } [data-theme="light"] .form-group input::placeholder, [data-theme="light"] .form-group textarea::placeholder { color: #aaa; } [data-theme="light"] .form-group select { background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L8 9L15 1' stroke='%237A7672' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* ================================================================ HERO SECTION — STAYS DARK ================================================================ */ /* Hero intentionally keeps its dark background, images, and glow effects. No overrides needed here. */ /* ================================================================ SERVICES SECTION ================================================================ */ [data-theme="light"] .service-card__icon img { filter: none; opacity: 1; } /* ================================================================ ABOUT SECTION ================================================================ */ [data-theme="light"] .about__container { background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.025)); } /* ================================================================ PROJECTS SECTION ================================================================ */ /* Project cards have full-bleed bg images — stay as they are */ /* ================================================================ PROCESS SECTION ================================================================ */ [data-theme="light"] .process-card__circle { background: radial-gradient(circle, #EDEAE6 0%, #E8E4E0 100%); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.04); } /* ================================================================ AWARDS SECTION ================================================================ */ [data-theme="light"] .award-date { color: rgba(0, 0, 0, 0.4); } /* ================================================================ TEAM SECTION ================================================================ */ [data-theme="light"] .team-card__inner { background: linear-gradient(to bottom, #F0EDE9, #E8E4E0); } [data-theme="light"] .team-card__content .tag { background: rgba(0, 0, 0, 0.06); } [data-theme="light"] .team-card__role { color: var(--text-muted); } /* ================================================================ PRICING SECTION ================================================================ */ [data-theme="light"] .pricing-card { border-color: var(--border-subtle); background: var(--bg-card); } [data-theme="light"] .pricing-card--popular { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.015), rgba(0, 0, 0, 0.035)); } [data-theme="light"] .pricing-card--popular::before { background: linear-gradient(135deg, #E8E4E0 0%, #D5D0CB 100%); } [data-theme="light"] .pricing-card__number { box-shadow: 0 0 0 7px rgba(232, 228, 224, 0.95), 0 0 0 14px rgba(237, 234, 230, 0.8), 0 0 0 21px rgba(242, 240, 237, 0.6); } [data-theme="light"] .pricing-card__badge { background: #EDEAE6; border-color: var(--border-subtle); color: var(--text-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } [data-theme="light"] .pricing__subtitle { color: var(--text-muted); } [data-theme="light"] .pricing-card__desc { color: var(--text-muted); } /* ================================================================ TESTIMONIALS SECTION ================================================================ */ [data-theme="light"] .testimonial-card__text { background: rgba(0, 0, 0, 0.05); -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px); } [data-theme="light"] .testimonial-card__text p { color: var(--text-primary); } [data-theme="light"] .testimonial-card__name { color: var(--text-primary); } [data-theme="light"] .testimonial-card__avatar { background: var(--border-subtle); } /* ================================================================ FAQ SECTION ================================================================ */ [data-theme="light"] .faq-item { border-color: var(--border-subtle); } [data-theme="light"] .faq-item__question { color: var(--text-primary); } [data-theme="light"] .faq-item__answer p { color: var(--text-muted); } [data-theme="light"] .faq-item__icon { color: var(--text-muted); } /* ================================================================ INNER CONTACT (Homepage CTA) ================================================================ */ /* Left card stays dark (has bg image + overlay) */ /* Right card goes light */ [data-theme="light"] .inner-contact-card--right { background: var(--bg-card); border: 1px solid var(--border-subtle); } [data-theme="light"] .inner-contact__sub { color: var(--text-muted); } /* ================================================================ CONTACT PAGE ================================================================ */ [data-theme="light"] .contact__inner { background: var(--bg-card); border-color: var(--border-subtle); } /* ================================================================ BLOG SECTION ================================================================ */ [data-theme="light"] .blog-card { background: var(--bg-card); border-color: var(--border-subtle); } [data-theme="light"] .blog-card:hover { background: var(--bg-card-hover); border-color: rgba(255, 70, 1, 0.2); } /* ================================================================ FOOTER ================================================================ */ [data-theme="light"] .footer { border-top-color: var(--border-subtle); } /* Footer logo: deep charcoal, not jet-black */ [data-theme="light"] .footer .navbar__logo-text-img { filter: brightness(0.08) saturate(100%); transition: filter 1.2s ease; } /* Footer social icons: same charcoal treatment */ [data-theme="light"] .footer .social-icon img { filter: brightness(0.1); transition: filter 1.2s ease; } /* ================================================================ INNER PAGES (pages.css overrides) ================================================================ */ /* Page Heroes STAY DARK — they have background images */ /* Detail hero */ [data-theme="light"] .detail-hero { background: #0D0D0D; /* Keep dark */ } /* ---- Mission Cards (about page) ---- */ [data-theme="light"] .mission-card { background: var(--bg-card); border-color: var(--border-subtle); } [data-theme="light"] .mission-card:last-child { border-bottom-color: var(--border-subtle); } [data-theme="light"] .mission-card__price { background: rgba(0, 0, 0, 0.04); } /* ---- Expertise Cards (about page) ---- */ [data-theme="light"] .exp-card { background: var(--bg-card); } [data-theme="light"] .exp-card::before { background: linear-gradient(160deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 100%); } [data-theme="light"] .exp-card__circle { background: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.015) 60%, transparent 80%); border-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .exp-card__icon-btn { background: linear-gradient(160deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.02) 100%); border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .exp-card__num, [data-theme="light"] .exp-card__role { color: var(--text-primary); } [data-theme="light"] .exp-card__company { color: var(--text-primary); } [data-theme="light"] .exp-card__desc { color: var(--text-muted); } [data-theme="light"] .exp-card__period-badge::before { background: rgba(0, 0, 0, 0.04); } /* ---- About Page Badge Button ---- */ [data-theme="light"] .about-badge-btn { background: #EDEAE6; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); color: var(--text-primary); } /* ---- About Intro Text ---- */ [data-theme="light"] .about-intro__text .text-white { color: var(--text-primary); } /* ---- Carriers Section ---- */ [data-theme="light"] .carriers-scroll-btn { border-color: rgba(255, 255, 255, 0.1); /* Stays on dark hero */ } /* ---- Inner Contact Grid ---- */ [data-theme="light"] .inner-contact-card--right .inner-contact-card__content { color: var(--text-primary); } /* ================================================================ REACTOR KNOB — Vanilla widget styles ================================================================ */ /* Knob wrapper sits inline in the navbar flex row */ .bet-knob-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; } /* Progressive page overlay driven by --light-level */ #bet-light-overlay { z-index: 9998; mix-blend-mode: multiply; pointer-events: none; } /* Ensure background transitions smoothly at all light levels */ html { transition: background-color 0.15s ease; } /* ── Navbar layout: make room for the knob ── */ .navbar__container { /* knob is flex-shrink:0 so it slots naturally */ } /* Light scrolled navbar: darken tick inactives a bit */ [data-theme="light"] .navbar.scrolled .bet-knob-tick::before { background: rgba(0,0,0,0.15); } /* Mobile: show knob in burger zone */ @media (max-width: 768px) { .bet-knob-wrap { margin-left: 0; margin-right: 6px; } /* label clips in tight spaces — hide on mobile */ .bet-knob-label { display: none; } }