/* ============================================================
LINK-AI — LIGHT THEME (mostly white, dark text)
------------------------------------------------------------
Loaded LAST, after every other stylesheet. Activated per-page
by adding class="theme-light" to . To revert a page to
the original dark theme, remove that class (or remove the
to this file). Nothing here touches pages that don't
opt in, so rollout is page-by-page and reversible.
Phase 1: Homepage (index.html) reference conversion.
============================================================ */
:root {
--lt-bg: #ffffff;
--lt-bg-soft: #f7f8fc;
--lt-ink: #1a1a2e; /* primary text */
--lt-ink-soft: #5b6477; /* muted text */
--lt-border: rgba(15, 23, 42, 0.08);
--lt-card: #ffffff;
--lt-shadow:
0 10px 30px rgba(20, 23, 42, 0.07), 0 2px 8px rgba(20, 23, 42, 0.04);
--lt-shadow-hover: 0 18px 50px rgba(20, 23, 42, 0.14);
--lt-accent: #6d4dff; /* brand purple-ish accent on white */
}
/* ------------------------------------------------------------
1. BASE
------------------------------------------------------------ */
body.theme-light {
background: var(--lt-bg);
color: var(--lt-ink);
}
/* ------------------------------------------------------------
2. HEADER / NAV (was near-black, white text)
------------------------------------------------------------ */
body.theme-light .header {
background: rgba(255, 255, 255, 0.92) !important;
border-bottom: 1px solid var(--lt-border) !important;
box-shadow: 0 1px 14px rgba(20, 23, 42, 0.05) !important;
}
body.theme-light .nav-list a,
body.theme-light .dropdown-toggle {
color: var(--lt-ink) !important;
}
body.theme-light .nav-list a:hover,
body.theme-light .dropdown-toggle:hover {
color: var(--lt-accent) !important;
}
body.theme-light .dropdown-menu {
background: #ffffff !important;
border: 1px solid var(--lt-border) !important;
box-shadow: 0 12px 34px rgba(20, 23, 42, 0.12) !important;
}
body.theme-light .dropdown-menu a {
color: var(--lt-ink) !important;
}
body.theme-light .dropdown-menu a:hover {
color: var(--lt-accent) !important;
background: rgba(109, 77, 255, 0.06) !important;
}
body.theme-light .lang-btn {
color: var(--lt-ink-soft) !important;
}
body.theme-light .lang-btn.active {
color: var(--lt-accent) !important;
}
body.theme-light .lang-divider {
color: rgba(15, 23, 42, 0.25) !important;
}
body.theme-light .menu-toggle i {
color: var(--lt-ink) !important;
}
/* keep the login button as the one strong colored CTA in the bar */
/* ------------------------------------------------------------
3. HERO (deep purple/black → soft light)
------------------------------------------------------------ */
body.theme-light .revolutionary-hero {
background: linear-gradient(
180deg,
#f6f4fd 0%,
#eef1fb 55%,
#f7f8fc 100%
) !important;
}
/* dim the dark-tuned glow layers so they read as faint tints on white */
body.theme-light .revolutionary-hero::before {
opacity: 0.55 !important;
}
body.theme-light .revolutionary-hero::after {
opacity: 0.4 !important;
}
body.theme-light .hero-hook {
color: var(--lt-accent) !important;
}
body.theme-light .hero-description {
color: var(--lt-ink-soft) !important;
}
/* headline gradient was white→light-blue (invisible on white): re-point to a
dark→accent gradient that pops on a light background */
body.theme-light .hero-title .title-main {
background: linear-gradient(
135deg,
#4f46e5 0%,
#7c3aed 45%,
#06b6d4 100%
) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}
/* scroll indicator */
body.theme-light .scroll-arrow span {
color: var(--lt-ink-soft) !important;
}
body.theme-light .arrow-down {
border-color: var(--lt-ink-soft) !important;
}
/* hero neural visual: rings/labels were tuned for dark — make them visible on white.
(Most likely area to need a second pass.) */
body.theme-light .orbital-ring {
border-color: rgba(124, 58, 237, 0.25) !important;
}
body.theme-light .fn-label {
color: var(--lt-ink) !important;
}
body.theme-light .core-text-line1,
body.theme-light .core-text-line2 {
color: var(--lt-accent) !important;
-webkit-text-fill-color: var(--lt-accent) !important;
}
/* AI Hub orb: keep the rainbow morphing border (::before); its inner fill
(::after) was near-black (rgba(5,10,20,.95)) → make it white on light */
body.theme-light .core-glass {
background: transparent !important;
border: none !important;
}
body.theme-light .core-glass::after {
background: linear-gradient(
145deg,
#ffffff 0%,
#f4f6fd 50%,
#ffffff 100%
) !important;
}
/* ------------------------------------------------------------
4. CONTENT SECTION BACKGROUNDS (dark gradients → white)
------------------------------------------------------------ */
body.theme-light
:is(
.two-paths-section,
.integrations-section,
.ai-reality-section,
.solutions-section-new,
.departments-section-interactive,
.faq-section-modern
) {
background: #ffffff !important;
}
body.theme-light .pricing-section-dark {
background: linear-gradient(180deg, #ffffff 0%, #f5f6fb 100%) !important;
}
body.theme-light .trusted-by-section {
background: var(--lt-bg-soft) !important;
border-top: 1px solid var(--lt-border) !important;
border-bottom: 1px solid var(--lt-border) !important;
}
/* ------------------------------------------------------------
5. TEXT → dark.
Scoped to header / section / footer / main so it reaches ALL
copy — including classes I didn't enumerate — and kills every
white-on-white case, while leaving modals (,
dark by design) untouched. Icons (/