/* ============================================ WORKFACILIT v2 — Light Theme Overrides Applied via [data-theme="light"] on Elegant cool-toned palette with strong contrast ============================================ */ [data-theme="light"] { /* ── Surfaces (cool slate tones) ── */ --wf-bg: #eef1f6; --wf-bg-elevated: #e2e7ef; --wf-bg-card: #f6f7fb; --wf-bg-card-hover: #edf0f7; --wf-bg-glass: rgba(30,41,59,0.04); --wf-border: rgba(30,41,59,0.14); --wf-border-hover: rgba(30,41,59,0.25); /* ── Text (deep slate — high contrast) ── */ --wf-text-1: #0c1222; --wf-text-2: #3b4963; --wf-text-3: #64748b; /* ── Brand adjustments for light bg ── */ --wf-primary: #4f46e5; --wf-primary-light: #6366f1; --wf-primary-lighter: #818cf8; --wf-primary-dark: #4338ca; --wf-cyan: #0891b2; --wf-cyan-light: #06b6d4; --wf-emerald: #059669; --wf-emerald-light: #10b981; /* ── Gradients ── */ --wf-grad-text: linear-gradient(135deg, #4f46e5, #0891b2, #059669); --wf-grad-glow: radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(79,70,229,0.08), transparent 40%); } /* ── Navbar glass scrolled ── */ [data-theme="light"] .nav.is-scrolled .nav__bar { background: rgba(238,241,246,0.88); box-shadow: 0 1px 0 rgba(30,41,59,0.08), 0 4px 24px rgba(30,41,59,0.1); border-color: rgba(30,41,59,0.1); } /* ── Nav link hover ── */ [data-theme="light"] .nav__link:hover, [data-theme="light"] .nav__link.is-active { background: rgba(30,41,59,0.07); } /* ── Icon buttons ── */ [data-theme="light"] .nav__icon-btn { background: rgba(30,41,59,0.06); border-color: rgba(30,41,59,0.12); } [data-theme="light"] .nav__icon-btn:hover { box-shadow: 0 4px 16px rgba(30,41,59,0.14); } /* ── Tooltip ── */ [data-theme="light"] .nav__tooltip { background: #f6f7fb; color: #0c1222; border-color: rgba(30,41,59,0.14); box-shadow: 0 8px 24px rgba(30,41,59,0.16); } [data-theme="light"] .nav__tooltip::before { border-bottom-color: rgba(30,41,59,0.14); } [data-theme="light"] .nav__tooltip::after { border-bottom-color: #f6f7fb; } /* ── Megamenu ── */ [data-theme="light"] .mega { background: #f0f2f8; box-shadow: 0 20px 60px rgba(30,41,59,0.18), 0 0 0 1px rgba(30,41,59,0.08); } [data-theme="light"] .mega-overlay { background: rgba(15,23,42,0.2); } [data-theme="light"] .mega__item:hover { background: rgba(30,41,59,0.06); } [data-theme="light"] .mega__cta { background: #e8ebf2; } [data-theme="light"] .mega__featured { background: linear-gradient(160deg, #4338ca, #1e1b4b); } /* ── Burger ── */ [data-theme="light"] .nav__burger:hover { background: rgba(30,41,59,0.07); } [data-theme="light"] .nav__burger span { background: #3b4963; } /* ── Mobile nav ── */ [data-theme="light"] .mobile-nav { background: var(--wf-bg); } /* ── Buttons ── */ [data-theme="light"] .btn--ghost { background: rgba(30,41,59,0.06); border-color: rgba(30,41,59,0.14); color: #0c1222; } [data-theme="light"] .btn--ghost:hover { background: rgba(30,41,59,0.11); border-color: rgba(30,41,59,0.25); } [data-theme="light"] .btn--primary { box-shadow: 0 0 0 1px rgba(79,70,229,0.5), 0 2px 8px rgba(79,70,229,0.25); } [data-theme="light"] .btn--primary:hover { box-shadow: 0 0 0 1px rgba(79,70,229,0.6), 0 8px 30px rgba(79,70,229,0.3); } /* ── Cards ── */ [data-theme="light"] .card { box-shadow: 0 1px 3px rgba(30,41,59,0.08), 0 0 0 1px rgba(30,41,59,0.04); } [data-theme="light"] .card:hover { box-shadow: 0 12px 40px rgba(30,41,59,0.14); } /* ── Diff cards ── */ [data-theme="light"] .diff-card:hover { box-shadow: 0 12px 40px rgba(30,41,59,0.14); } /* ── Section badges ── */ [data-theme="light"] .sh__badge { background: rgba(79,70,229,0.08); border-color: rgba(79,70,229,0.18); color: #4f46e5; } /* ── Footer ── */ [data-theme="light"] .footer__social-icon { background: rgba(30,41,59,0.06); border-color: rgba(30,41,59,0.12); color: #3b4963; } /* ── Hero eyebrow ── */ [data-theme="light"] .hero__eyebrow { background: rgba(30,41,59,0.06); border-color: rgba(30,41,59,0.12); } /* ── Hero tags / misc ── */ [data-theme="light"] .hero__tags span { background: rgba(30,41,59,0.06); border-color: rgba(30,41,59,0.12); } /* ── Browser frame ── */ [data-theme="light"] .browser-frame { box-shadow: 0 20px 60px rgba(30,41,59,0.18), 0 0 0 1px rgba(30,41,59,0.08); } [data-theme="light"] .browser-frame__viewport { background: #1a1a2e; } [data-theme="light"] .browser-frame__url { background: rgba(30,41,59,0.06); } /* ── Compare table rows ── */ [data-theme="light"] .compare tbody tr:hover td { background: rgba(30,41,59,0.04); } /* ── Marquee logos ── */ [data-theme="light"] .marquee__track img { filter: grayscale(1) brightness(0.4); opacity: 0.5; } [data-theme="light"] .marquee__track img:hover { filter: none; opacity: 0.9; } /* ── Generic glass surfaces ── */ [data-theme="light"] .glass, [data-theme="light"] [class*="__glass"] { background: rgba(246,247,251,0.8); backdrop-filter: blur(20px); border-color: rgba(30,41,59,0.1); } /* ── Tools link hover ── */ [data-theme="light"] .mega__tools-link:hover { background: rgba(30,41,59,0.06); } /* ── Logo swap ── */ [data-theme="light"] .nav__logo-icon, [data-theme="light"] .footer__brand-logo { content: url('../img/logos/iconewfcolor_para_fundo_claro.png'); } /* ── Deck topbar (pitch deck) ── */ [data-theme="light"] .deck__topbar { background: rgba(238,241,246,0.9); border-color: rgba(30,41,59,0.1); } [data-theme="light"] .deck__home img { content: url('../img/logos/iconewfcolor_para_fundo_claro.png'); } /* ── Theme toggle button ── */ .theme-toggle { position: relative; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--wf-r-md); font-size: 1.2rem; transition: all 250ms var(--wf-ease); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); color: var(--wf-amber); cursor: pointer; } .theme-toggle:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.35); background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.3); } [data-theme="light"] .theme-toggle { background: rgba(15,23,42,0.05); border-color: rgba(15,23,42,0.08); color: var(--wf-primary); } [data-theme="light"] .theme-toggle:hover { background: rgba(99,102,241,0.1); border-color: rgba(99,102,241,0.25); box-shadow: 0 4px 16px rgba(15,23,42,0.1); } /* ── Toggle icon states ── */ .theme-toggle .ph-sun { display: none; } .theme-toggle .ph-moon { display: flex; } [data-theme="light"] .theme-toggle .ph-sun { display: flex; } [data-theme="light"] .theme-toggle .ph-moon { display: none; } /* ── Mobile theme toggle ── */ .mobile-nav__theme-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 16px 0; border-bottom: 1px solid var(--wf-border); background: none; border-radius: 0; border-left: none; border-right: none; border-top: none; font-size: 1.2rem; color: var(--wf-amber); cursor: pointer; } .mobile-nav__theme-toggle:hover { transform: none; box-shadow: none; } [data-theme="light"] .mobile-nav__theme-toggle { color: var(--wf-primary); background: none; border-color: var(--wf-border); }