on all inner pages ══════════════════════════════════════════════════════════ */ .page-dark section:first-of-type { background: linear-gradient(140deg, #050d1a 0%, #0c2146 55%, #07111f 100%) !important; position: relative; overflow: hidden; } /* Grid overlay */ .page-dark section:first-of-type:not(.hero-redesign)::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(93, 135, 255, 0.065) 1px, transparent 1px), linear-gradient(90deg, rgba(93, 135, 255, 0.065) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; z-index: 1; } /* Hero container above grid */ .page-dark section:first-of-type .container { position: relative; z-index: 2; } /* Hero headings */ .page-dark section:first-of-type h1 { color: #fff !important; font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif; } .page-dark section:first-of-type h1 .text-primary { background: linear-gradient(135deg, #5d87ff 0%, #93bbff 40%, #5d87ff 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: text-shimmer 5s linear infinite; } /* Hero subtitle */ .page-dark section:first-of-type > .container > p { color: rgba(255, 255, 255, 0.60) !important; } /* Trust / category badge */ .page-dark section:first-of-type .bg-white.border { background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(93, 135, 255, 0.22) !important; box-shadow: none !important; } .page-dark section:first-of-type .bg-white.border .text-primary { color: #93bbff !important; } /* Feature / spec pills inside hero */ .page-dark section:first-of-type .bg-primary\/10 { background: rgba(93, 135, 255, 0.14) !important; border-color: rgba(93, 135, 255, 0.18) !important; } .page-dark section:first-of-type .bg-primary\/10.text-primary { color: #93bbff !important; } /* Glow orb (absolute blurred div) */ .page-dark section:first-of-type .blur-3xl { background: radial-gradient(circle, rgba(93, 135, 255, 0.28) 0%, transparent 65%) !important; width: 520px !important; height: 520px !important; top: -160px !important; filter: blur(80px); } /* Hero entrance animation */ @keyframes page-hero-rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } } .page-dark section:first-of-type:not(.hero-redesign) .container { animation: page-hero-rise 0.85s cubic-bezier(0.16, 1, 0.3, 1) both; } /* ══════════════════════════════════════════════════════════ CONTENT SECTIONS — bg-white / bg-gray-50 alternating ══════════════════════════════════════════════════════════ */ .page-dark section.bg-white:not(:first-of-type), .page-dark section[class*="py-"][class*="bg-white"] { background-color: #0D1829 !important; } .page-dark section.bg-gray-50, .page-dark section[class*="py-"][class*="bg-gray-50"] { background-color: #080F1E !important; } /* Section headings */ .page-dark section:not(:first-of-type) h2 { color: rgba(255, 255, 255, 0.92) !important; font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif; } .page-dark section:not(:first-of-type) h3 { color: rgba(255, 255, 255, 0.88) !important; } .page-dark section:not(:first-of-type) h4 { color: rgba(255, 255, 255, 0.85) !important; } /* Section entrance (scroll-triggered via JS in pages.js, CSS fallback here) */ @keyframes page-section-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .page-dark .scroll-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); } .page-dark .scroll-reveal.in-view { opacity: 1; transform: translateY(0); } /* ── Cards (white rounded bordered) ── */ .page-dark .bg-white.rounded-xl, .page-dark .bg-white.rounded-2xl, .page-dark .rounded-xl.border.border-gray-100, .page-dark .rounded-2xl.border.border-gray-100 { background: #111E30 !important; border-color: rgba(93, 135, 255, 0.13) !important; } .page-dark .bg-white.rounded-xl:hover, .page-dark .bg-white.rounded-2xl:hover { border-color: rgba(93, 135, 255, 0.25) !important; box-shadow: 0 12px 36px rgba(93, 135, 255, 0.10) !important; } /* bg-gray-50 cards */ .page-dark .bg-gray-50.rounded-2xl, .page-dark .bg-gray-50.rounded-xl { background: #0A1424 !important; border-color: rgba(93, 135, 255, 0.10) !important; } /* ── Icon containers ── */ .page-dark .bg-primary\/10 { background: rgba(93, 135, 255, 0.14) !important; } .page-dark .bg-primary\/10:hover, .page-dark [class*="hover\:bg-primary\/15"]:hover { background: rgba(93, 135, 255, 0.22) !important; } /* Spec cards (bg-primary/5 bordered) */ .page-dark .bg-primary\/5 { background: rgba(93, 135, 255, 0.08) !important; border-color: rgba(93, 135, 255, 0.12) !important; } /* ── Step / numbered circles ── */ .page-dark .bg-primary.flex.items-center.justify-center, .page-dark [class*="bg-primary"][class*="rounded-full"][class*="font-bold"] { background: linear-gradient(135deg, #5d87ff 0%, #2a5ceb 100%) !important; box-shadow: 0 4px 12px rgba(93, 135, 255, 0.35) !important; } /* Smaller numbered step spans inside lists */ .page-dark span.bg-primary\/10.text-primary { background: rgba(93, 135, 255, 0.15) !important; color: #93bbff !important; } /* ── "Best For" / tag pills ── */ .page-dark .bg-white.border.border-gray-200.rounded-full { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(93, 135, 255, 0.15) !important; box-shadow: none !important; } .page-dark .bg-white.border.border-gray-200.rounded-full .text-gray-700 { color: rgba(255, 255, 255, 0.72) !important; } /* ── "Attendance Marked" floating toast cards ── */ .page-dark .bg-white.rounded-xl.shadow-lg, .page-dark .absolute .bg-white.rounded-xl { background: rgba(15, 24, 39, 0.92) !important; border-color: rgba(93, 135, 255, 0.18) !important; } .page-dark .bg-white.border.border-primary\/20 { background: rgba(93, 135, 255, 0.08) !important; border-color: rgba(93, 135, 255, 0.22) !important; } /* Text inside toast */ .page-dark .text-gray-700 { color: rgba(255, 255, 255, 0.75) !important; } /* ── Horizontal rule / dividers inside cards ── */ .page-dark ol.space-y-2 li { color: rgba(255, 255, 255, 0.60) !important; } /* ── How-it-works step connector line ── */ .page-dark .absolute.left-5.top-5.bottom-0.w-px { background: rgba(93, 135, 255, 0.15) !important; } /* ─── Border-top coloured cards (HR modules) ─── */ .page-dark .border-t-4.border-t-primary { border-top-color: #5d87ff !important; } .page-dark .rounded-2xl.border.border-gray-100 { background: #111E30 !important; } .page-dark .rounded-2xl.border.border-gray-100:hover { border-color: rgba(93,135,255,0.25) !important; box-shadow: 0 16px 40px rgba(93,135,255,0.12) !important; } /* ── Pricing / comparison table rows ── */ .page-dark table tr { border-color: rgba(93,135,255,0.10) !important; } .page-dark table td, .page-dark table th { color: rgba(255,255,255,0.75) !important; } .page-dark .bg-white.rounded-2xl.border.border-gray-100.shadow-sm { background: #111E30 !important; } /* ══════════════════════════════════════════════════════════ CTA BAR — section.bg-primary (full-width blue → dark navy glow) ══════════════════════════════════════════════════════════ */ .page-dark section.bg-primary { background: linear-gradient(135deg, #050d1a 0%, #0c2146 50%, #07111f 100%) !important; position: relative; overflow: hidden; } /* Grid overlay on CTA */ .page-dark section.bg-primary::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(93, 135, 255, 0.065) 1px, transparent 1px), linear-gradient(90deg, rgba(93, 135, 255, 0.065) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; z-index: 1; } /* Glow orb on CTA */ .page-dark section.bg-primary::after { content: ''; position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(93, 135, 255, 0.20) 0%, transparent 65%); border-radius: 50%; top: -220px; right: -180px; filter: blur(90px); pointer-events: none; z-index: 0; } /* CTA container above overlays */ .page-dark section.bg-primary .container { position: relative; z-index: 2; } /* CTA heading & sub (already white — fine) */ .page-dark section.bg-primary h2 { font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif !important; } /* CTA primary button → glassy white */ .page-dark section.bg-primary a[class*="bg-white"] { background: rgba(255, 255, 255, 0.10) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; box-shadow: none !important; } .page-dark section.bg-primary a[class*="bg-white"]:hover { background: rgba(255, 255, 255, 0.18) !important; } /* CTA outline button → stays as is (border-white text-white already fine) */ /* ══════════════════════════════════════════════════════════ MODAL (Book a Demo) ══════════════════════════════════════════════════════════ */ .page-dark #hs-demo-modal .bg-white { background: #0F1827 !important; border-color: rgba(93,135,255,0.15) !important; } .page-dark #hs-demo-modal .border-b.border-gray-100 { border-color: rgba(93,135,255,0.10) !important; } .page-dark #hs-demo-modal .hover\:bg-gray-100:hover { background: rgba(93,135,255,0.08) !important; } /* ══════════════════════════════════════════════════════════ SCROLL-REVEAL — IntersectionObserver hook (pages.js) ══════════════════════════════════════════════════════════ */ .page-dark [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .page-dark [data-reveal].revealed { opacity: 1; transform: translateY(0); } .page-dark [data-reveal-delay="1"] { transition-delay: 0.08s; } .page-dark [data-reveal-delay="2"] { transition-delay: 0.16s; } .page-dark [data-reveal-delay="3"] { transition-delay: 0.24s; } .page-dark [data-reveal-delay="4"] { transition-delay: 0.32s; } /* ══════════════════════════════════════════════════════════ §EXT — PRECISION DARK: EXTENDED OVERRIDES Activates on all .page-dark pages (index.html + inner pages) once pages.css is linked to index.html. ══════════════════════════════════════════════════════════ */ /* ─── Desktop navbar — dark glass on .page-dark pages ─── */ @media (min-width: 1024px) { .page-dark #navbar:not(.is-sticky) { background: rgba(6, 11, 25, 0.82) !important; border-bottom-color: rgba(93, 135, 255, 0.10) !important; } .page-dark #navbar.is-sticky { background: rgba(6, 11, 25, 0.95) !important; border-bottom-color: rgba(93, 135, 255, 0.14) !important; box-shadow: 0 1px 28px rgba(0, 0, 0, 0.35) !important; } /* Nav link colour */ .page-dark #navbar .nav-link { color: rgba(255, 255, 255, 0.78) !important; } .page-dark #navbar .nav-link:hover { color: #5d87ff !important; } /* Chevron icon */ .page-dark #navbar [data-lucide="chevron-down"] { color: rgba(255, 255, 255, 0.45) !important; } /* Dropdown panel */ .page-dark #navbar .hs-dropdown-menu { background: #0F1827 !important; border-color: rgba(93, 135, 255, 0.15) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important; } .page-dark #navbar .hs-dropdown-menu p.text-gray-400 { color: rgba(255, 255, 255, 0.28) !important; } .page-dark #navbar .hs-dropdown-menu .text-gray-700 { color: rgba(255, 255, 255, 0.70) !important; } .page-dark #navbar .hs-dropdown-menu a:hover { background: rgba(93, 135, 255, 0.09) !important; color: #5d87ff !important; } .page-dark #navbar .hs-dropdown-menu .border-t { border-color: rgba(93, 135, 255, 0.10) !important; } /* Logo inversion: black → white on dark navbar */ .page-dark #navbar img.brightness-0 { filter: brightness(0) invert(1) !important; } } /* Mobile drawer header logo (also on dark bg) */ .page-dark .mobile-menu-header img.brightness-0 { filter: brightness(0) invert(1) !important; } /* ══════════════════════════════════════════════════════════ CUSTOM CARD COMPONENT DARK OVERRIDES ══════════════════════════════════════════════════════════ */ /* ─── Pain point cards ─── */ .page-dark .pain-card-v2 { background: #111E30 !important; border-color: rgba(93, 135, 255, 0.13) !important; box-shadow: none !important; } .page-dark .pain-card-v2:hover { border-color: rgba(93, 135, 255, 0.26) !important; box-shadow: 0 14px 40px rgba(93, 135, 255, 0.10) !important; } /* Icon containers (inline bg-color override) */ .page-dark .pain-icon { background: rgba(255, 255, 255, 0.07) !important; } /* ─── Feature cards ─── */ .page-dark .feat-card { background: #111E30 !important; border-color: rgba(93, 135, 255, 0.13) !important; box-shadow: none !important; } .page-dark .feat-card:hover { border-color: rgba(93, 135, 255, 0.26) !important; box-shadow: 0 24px 60px rgba(93, 135, 255, 0.12) !important; } .page-dark .feat-icon { background: rgba(93, 135, 255, 0.14) !important; } /* ─── Attendance type cards ─── */ .page-dark .att-card { background: #111E30 !important; border-color: rgba(93, 135, 255, 0.13) !important; box-shadow: none !important; } .page-dark .att-card:hover { box-shadow: 0 24px 56px rgba(93, 135, 255, 0.12) !important; } /* ─── Product cards ─── */ .page-dark .product-card { background: #111E30 !important; border-color: rgba(93, 135, 255, 0.13) !important; box-shadow: none !important; } .page-dark .product-card:hover { border-color: rgba(93, 135, 255, 0.26) !important; box-shadow: 0 16px 44px rgba(93, 135, 255, 0.12) !important; } /* ─── Testimonial cards ─── */ .page-dark .testi-slide-card { background: #111E30 !important; border-color: rgba(93, 135, 255, 0.13) !important; box-shadow: none !important; } .page-dark .testi-slide-card:hover, .page-dark .swiper-slide-active .testi-slide-card { border-color: rgba(93, 135, 255, 0.28) !important; box-shadow: 0 20px 50px rgba(93, 135, 255, 0.12) !important; } .page-dark .testi-slide-card .text-default-950 { color: rgba(255, 255, 255, 0.92) !important; } /* Swiper nav buttons */ .page-dark .testi-button-prev > div, .page-dark .testi-button-next > div { background: #111E30 !important; border-color: rgba(93, 135, 255, 0.18) !important; color: rgba(255, 255, 255, 0.70) !important; box-shadow: none !important; } .page-dark .testi-button-prev > div:hover, .page-dark .testi-button-next > div:hover { background: #5d87ff !important; border-color: #5d87ff !important; color: #fff !important; } /* ─── FAQ accordion ─── */ .page-dark .faq-block { background: #111E30 !important; border-color: rgba(93, 135, 255, 0.13) !important; box-shadow: none !important; } .page-dark .faq-block .hs-accordion-group > div { border-bottom-color: rgba(93, 135, 255, 0.09) !important; } .page-dark .faq-block button { color: rgba(255, 255, 255, 0.88) !important; } .page-dark .faq-block button:hover { color: #5d87ff !important; background: rgba(93, 135, 255, 0.05) !important; } .page-dark .faq-block [data-accordion-icon] { color: rgba(255, 255, 255, 0.45) !important; } .page-dark .faq-block .divide-y > * + * { border-color: rgba(93, 135, 255, 0.09) !important; } /* ─── Pricing cards ─── */ .page-dark .pricing-card-v2 { background: #111E30 !important; border-color: rgba(93, 135, 255, 0.14) !important; box-shadow: none !important; } .page-dark .pricing-card-v2:hover { box-shadow: 0 20px 60px rgba(93, 135, 255, 0.12) !important; } .page-dark .pricing-card-v2.featured { border-color: #5d87ff !important; box-shadow: 0 0 0 4px rgba(93, 135, 255, 0.10), 0 20px 60px rgba(93, 135, 255, 0.18) !important; } /* Featured card header tint */ .page-dark .pricing-card-v2 .bg-primary\/5 { background: rgba(93, 135, 255, 0.10) !important; } /* Non-featured card header */ .page-dark .pricing-card-v2 .bg-gray-50.border-b { background: rgba(255, 255, 255, 0.04) !important; } /* Hardware icon container */ .page-dark .pricing-card-v2 .bg-gray-100 { background: rgba(255, 255, 255, 0.09) !important; } /* Row dividers inside card */ .page-dark .pricing-card-v2 .divide-y > * + *, .page-dark .pricing-card-v2 .divide-y.divide-gray-50 > * + * { border-color: rgba(93, 135, 255, 0.08) !important; } /* ─── Contact card & form inputs ─── */ .page-dark .contact-card { background: #111E30 !important; border-color: rgba(93, 135, 255, 0.14) !important; box-shadow: 0 4px 28px rgba(0, 0, 0, 0.35) !important; } .page-dark .contact-input-v2 { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(93, 135, 255, 0.18) !important; color: rgba(255, 255, 255, 0.88) !important; } .page-dark .contact-input-v2:focus { background: rgba(255, 255, 255, 0.08) !important; border-color: #5d87ff !important; box-shadow: 0 0 0 3px rgba(93, 135, 255, 0.16) !important; } .page-dark .contact-input-v2::placeholder { color: rgba(255, 255, 255, 0.22) !important; } /* ══════════════════════════════════════════════════════════ MULTI-HUE BADGE BACKGROUNDS — dark transparent variants ══════════════════════════════════════════════════════════ */ .page-dark .bg-green-50 { background: rgba(34, 197, 94, 0.11) !important; } .page-dark .bg-green-100 { background: rgba(34, 197, 94, 0.18) !important; } .page-dark .bg-blue-50 { background: rgba(59, 130, 246, 0.11) !important; } .page-dark .bg-blue-100 { background: rgba(59, 130, 246, 0.18) !important; } .page-dark .bg-purple-50 { background: rgba(168, 85, 247, 0.11) !important; } .page-dark .bg-purple-100 { background: rgba(168, 85, 247, 0.18) !important; } .page-dark .bg-yellow-50 { background: rgba(234, 179, 8, 0.11) !important; } .page-dark .bg-yellow-100 { background: rgba(234, 179, 8, 0.18) !important; } .page-dark .bg-orange-50 { background: rgba(249, 115, 22, 0.11) !important; } .page-dark .bg-orange-100 { background: rgba(249, 115, 22, 0.18) !important; } .page-dark .bg-teal-50 { background: rgba(20, 184, 166, 0.11) !important; } .page-dark .bg-teal-100 { background: rgba(20, 184, 166, 0.18) !important; } .page-dark .bg-indigo-50 { background: rgba(99, 102, 241, 0.11) !important; } .page-dark .bg-indigo-100 { background: rgba(99, 102, 241, 0.18) !important; } .page-dark .bg-emerald-50 { background: rgba(16, 185, 129, 0.11) !important; } .page-dark .bg-emerald-100{ background: rgba(16, 185, 129, 0.18) !important; } .page-dark .bg-red-50 { background: rgba(239, 68, 68, 0.11) !important; } .page-dark .bg-red-100 { background: rgba(239, 68, 68, 0.18) !important; } .page-dark .bg-rose-50 { background: rgba(244, 63, 94, 0.11) !important; } .page-dark .bg-rose-100 { background: rgba(244, 63, 94, 0.18) !important; } /* Neutral gray badges */ .page-dark .bg-gray-100 { background: rgba(255, 255, 255, 0.08) !important; } /* ══════════════════════════════════════════════════════════ MULTI-HUE TEXT — brightened for legibility on dark ══════════════════════════════════════════════════════════ */ .page-dark .text-green-600, .page-dark .text-green-700 { color: #4ade80 !important; } .page-dark .text-blue-600, .page-dark .text-blue-700 { color: #60a5fa !important; } .page-dark .text-purple-600, .page-dark .text-purple-700 { color: #c084fc !important; } .page-dark .text-yellow-500, .page-dark .text-yellow-600, .page-dark .text-yellow-700 { color: #fbbf24 !important; } .page-dark .text-orange-500, .page-dark .text-orange-600 { color: #fb923c !important; } .page-dark .text-red-500, .page-dark .text-red-600 { color: #f87171 !important; } .page-dark .text-teal-600, .page-dark .text-teal-700 { color: #2dd4bf !important; } .page-dark .text-indigo-600, .page-dark .text-indigo-700 { color: #818cf8 !important; } .page-dark .text-emerald-600, .page-dark .text-emerald-700{ color: #34d399 !important; } .page-dark .text-rose-600, .page-dark .text-rose-700 { color: #fb7185 !important; } /* Neutral grays not yet covered */ .page-dark .text-gray-500 { color: rgba(255, 255, 255, 0.48) !important; } .page-dark .text-gray-800 { color: rgba(255, 255, 255, 0.88) !important; } .page-dark .text-default-950 { color: rgba(255, 255, 255, 0.92) !important; } /* ══════════════════════════════════════════════════════════ MULTI-HUE BORDER COLORS ══════════════════════════════════════════════════════════ */ .page-dark .border-green-100, .page-dark .border-green-200 { border-color: rgba(34, 197, 94, 0.20) !important; } .page-dark .border-blue-100, .page-dark .border-blue-200 { border-color: rgba(59, 130, 246, 0.20) !important; } .page-dark .border-purple-100, .page-dark .border-purple-200 { border-color: rgba(168, 85, 247, 0.20) !important; } .page-dark .border-yellow-100, .page-dark .border-yellow-200 { border-color: rgba(234, 179, 8, 0.20) !important; } .page-dark .border-orange-100, .page-dark .border-orange-200 { border-color: rgba(249, 115, 22, 0.20) !important; } .page-dark .border-red-100, .page-dark .border-red-200 { border-color: rgba(239, 68, 68, 0.20) !important; } /* Hover border variants */ .page-dark .hover\:border-green-200:hover { border-color: rgba(34, 197, 94, 0.30) !important; } .page-dark .hover\:border-blue-200:hover { border-color: rgba(59, 130, 246, 0.30) !important; } .page-dark .hover\:border-purple-200:hover { border-color: rgba(168, 85, 247, 0.30) !important; } .page-dark .hover\:border-yellow-200:hover { border-color: rgba(234, 179, 8, 0.30) !important; } /* ══════════════════════════════════════════════════════════ DIVIDE-Y ROW DIVIDERS ══════════════════════════════════════════════════════════ */ .page-dark .divide-y > * + *, .page-dark .divide-gray-50 > * + *, .page-dark .divide-gray-100 > * + *, .page-dark .divide-gray-200 > * + * { border-color: rgba(93, 135, 255, 0.08) !important; } /* ══════════════════════════════════════════════════════════ MSME TICKER — dark adaptation (Client section) ══════════════════════════════════════════════════════════ */ .page-dark .msme-item { color: rgba(255, 255, 255, 0.27) !important; } .page-dark .msme-item:hover { color: rgba(255, 255, 255, 0.62) !important; } .page-dark .msme-sep { color: rgba(93, 135, 255, 0.22) !important; } /* Edge fade-out overlays (override inline style) */ .page-dark .msme-ticker .absolute.left-0 { background: linear-gradient(to right, #080F1E 50%, transparent) !important; } .page-dark .msme-ticker .absolute.right-0 { background: linear-gradient(to left, #080F1E 50%, transparent) !important; } /* ══════════════════════════════════════════════════════════ HERO DASHBOARD MOCK PROTECTION (index.html only) The dashboard illustration inside .hero-redesign is intentionally kept light to look like a real app UI. These rules cancel the dark-card overrides inside that section. ══════════════════════════════════════════════════════════ */ /* Outer card and stat sub-cards stay white */ .page-dark .hero-redesign .bg-white, .page-dark .hero-redesign .bg-white.rounded-xl, .page-dark .hero-redesign .bg-white.rounded-2xl, .page-dark .hero-redesign .rounded-2xl.border.border-gray-100 { background: #fff !important; border-color: #e5e7eb !important; } /* Table-header and summary row keep their light grays */ .page-dark .hero-redesign .bg-gray-50 { background: #f9fafb !important; } .page-dark .hero-redesign .bg-gray-100 { background: #f3f4f6 !important; } /* Keep dashboard text dark (it's on white backgrounds) */ .page-dark .hero-redesign .text-gray-700 { color: #374151 !important; } .page-dark .hero-redesign .text-gray-800 { color: #1f2937 !important; } .page-dark .hero-redesign .text-gray-500 { color: #6b7280 !important; } .page-dark .hero-redesign .text-gray-400 { color: #9ca3af !important; } /* Status badge colors inside dashboard */ .page-dark .hero-redesign .text-green-600, .page-dark .hero-redesign .text-green-700 { color: #16a34a !important; } .page-dark .hero-redesign .text-yellow-700 { color: #a16207 !important; } .page-dark .hero-redesign .text-red-500, .page-dark .hero-redesign .text-red-600 { color: #dc2626 !important; } .page-dark .hero-redesign .text-yellow-500 { color: #eab308 !important; } /* Badge pill backgrounds */ .page-dark .hero-redesign .bg-green-100 { background: #dcfce7 !important; } .page-dark .hero-redesign .bg-yellow-100 { background: #fef9c3 !important; } .page-dark .hero-redesign .bg-red-100 { background: #fee2e2 !important; } /* Row dividers inside dashboard table */ .page-dark .hero-redesign .divide-y > * + * { border-color: #f9fafb !important; } /* Phone frame in "How It Works" section stays dark (intentional) */ .page-dark .bg-gray-900 { background: #111827 !important; } /* ══════════════════════════════════════════════════════════ MISC — REMAINING ELEMENT OVERRIDES ══════════════════════════════════════════════════════════ */ /* Contact section trust-signal divider + span.font-semibold */ .page-dark .border-t.border-gray-200 { border-color: rgba(93, 135, 255, 0.10) !important; } .page-dark p > span.font-semibold { color: rgba(255, 255, 255, 0.92) !important; } /* Swiper pagination */ .page-dark .swiper-pagination-bullet { background: rgba(93, 135, 255, 0.30) !important; } .page-dark .swiper-pagination-bullet-active { background: #5d87ff !important; } /* Callout info box inside pricing */ .page-dark .bg-primary\/5.border.border-primary\/20 { background: rgba(93, 135, 255, 0.08) !important; border-color: rgba(93, 135, 255, 0.22) !important; } /* ── Hover state overrides ── */ /* Table row hover (why-choose-us comparison table, etc.) */ .page-dark .hover\:bg-gray-50:hover { background: rgba(93, 135, 255, 0.05) !important; } .page-dark .hover\:bg-gray-100:hover { background: rgba(93, 135, 255, 0.08) !important; } /* Group-hover badge icon backgrounds (HR modules page, etc.) */ .page-dark .group:hover .group-hover\:bg-green-100 { background: rgba(34, 197, 94, 0.22) !important; } .page-dark .group:hover .group-hover\:bg-blue-100 { background: rgba(59, 130, 246, 0.22) !important; } .page-dark .group:hover .group-hover\:bg-yellow-100 { background: rgba(234, 179, 8, 0.22) !important; } .page-dark .group:hover .group-hover\:bg-purple-100 { background: rgba(168, 85, 247, 0.22) !important; } .page-dark .group:hover .group-hover\:bg-orange-100 { background: rgba(249, 115, 22, 0.22) !important; } .page-dark .group:hover .group-hover\:bg-teal-100 { background: rgba(20, 184, 166, 0.22) !important; } .page-dark .group:hover .group-hover\:bg-indigo-100 { background: rgba(99, 102, 241, 0.22) !important; } .page-dark .group:hover .group-hover\:bg-red-100 { background: rgba(239, 68, 68, 0.22) !important; } /* Section bg-white that isn't caught by section selector (fallback for edge cases) */ .page-dark section:not(:first-of-type) { background-color: inherit; } /* Dark-mode line-through (strikethrough prices) */ .page-dark .line-through { color: rgba(255, 255, 255, 0.30) !important; } /* Orange accent text (limited-time pricing note) */ .page-dark .text-orange-500 { color: #fb923c !important; }