/* * Auronix Web Studio - light theme. * * The site was originally authored around dark cyber utility classes. This file * remaps those utilities only when is active, while * keeping the homepage hero as an intentional dark proof/showcase surface. */ html[data-theme="light"] { color-scheme: light; --aw-bg: #f7f9fd; --aw-bg-warm: #fbfcff; --aw-section: #eef4fb; --aw-surface: #ffffff; --aw-surface-soft: #f1f5fb; --aw-surface-strong: #e5edf7; --aw-border: rgba(15, 23, 42, 0.12); --aw-border-strong: rgba(15, 23, 42, 0.2); --aw-text: #0f172a; --aw-text-soft: #253247; --aw-muted: #475569; --aw-faint: #64748b; --aw-cyan: #047e9f; --aw-blue: #1267cc; --aw-pink: #ad216e; --aw-green: #047857; --aw-shadow: 0 22px 70px rgba(15, 23, 42, 0.1); } /* Base page surfaces */ html[data-theme="light"] body, html[data-theme="light"] body.bg-cyber-black, html[data-theme="light"] #root-php, html[data-theme="light"] #root-php > .min-h-screen, html[data-theme="light"] main { background: var(--aw-bg) !important; color: var(--aw-text-soft) !important; } html[data-theme="light"] body.is-home-page .site-ambient-bg { background-color: var(--aw-bg) !important; background-image: radial-gradient(circle at 12% 14%, rgba(4, 126, 159, 0.09), transparent 34%), radial-gradient(circle at 88% 18%, rgba(173, 33, 110, 0.055), transparent 32%), linear-gradient(180deg, #fbfcff 0%, #f3f7fc 48%, #eef4fb 100%) !important; } html[data-theme="light"] body.is-home-page .site-ambient-glow, html[data-theme="light"] body.is-home-page .site-ambient-glow::before, html[data-theme="light"] body.is-home-page .site-ambient-glow::after, html[data-theme="light"] body.is-home-page .site-ambient-glow-center { opacity: 0.14 !important; mix-blend-mode: normal !important; } html[data-theme="light"] body.is-home-page .site-ambient-grain { opacity: 0.012 !important; } html[data-theme="light"] body.is-home-page main > section:not(#home) { background: linear-gradient(180deg, rgba(255, 255, 255, 0.64) 0%, rgba(238, 244, 251, 0.58) 100%) !important; } html[data-theme="light"] body.is-home-page main > section:not(#home):nth-of-type(odd) { background: linear-gradient(180deg, rgba(247, 249, 253, 0.86) 0%, rgba(255, 255, 255, 0.72) 100%) !important; } html[data-theme="light"] body.is-home-page main > section:not(#home)::after { background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.1), transparent) !important; } html[data-theme="light"] body.is-inner-page main > section { background: linear-gradient(180deg, #fbfcff 0%, var(--aw-bg) 100%) !important; } html[data-theme="light"] body.is-inner-page main > section:nth-of-type(even) { background: linear-gradient(180deg, var(--aw-bg) 0%, var(--aw-bg-warm) 100%) !important; } html[data-theme="light"] body.is-inner-page main > section > [class*="bg-[radial-gradient"], html[data-theme="light"] body.is-inner-page main > section > [class*="bg-[linear-gradient"], html[data-theme="light"] body.is-home-page main > section:not(#home) > [class*="bg-[radial-gradient"], html[data-theme="light"] body.is-home-page main > section:not(#home) > [class*="bg-[linear-gradient"] { background: transparent !important; opacity: 0.28 !important; } html[data-theme="light"] body.is-inner-page main > section [class*="bg-[linear-gradient"], html[data-theme="light"] body.is-home-page main > section:not(#home) [class*="bg-[linear-gradient"] { background: var(--aw-surface) !important; } html[data-theme="light"] body.is-inner-page main > section [class*="bg-[radial-gradient"], html[data-theme="light"] body.is-home-page main > section:not(#home) [class*="bg-[radial-gradient"] { background: transparent !important; } /* Keep gradient overlays that sit ON TOP of project/screenshot images as real gradients — the white-surface remap above must not wash out the images. Specificity must beat `main > section:not(#home) [class*=...]`. */ html[data-theme="light"] body.is-inner-page main > section .aspect-video [class*="bg-[linear-gradient"], html[data-theme="light"] body.is-inner-page main > section .aspect-video [class*="bg-[radial-gradient"], html[data-theme="light"] body.is-home-page main > section:not(#home) .aspect-video [class*="bg-[linear-gradient"], html[data-theme="light"] body.is-home-page main > section:not(#home) .aspect-video [class*="bg-[radial-gradient"] { background: transparent !important; opacity: 1 !important; } /* Dark utility remap. Use substring matchers so EVERY opacity variant (e.g. /15, /20, /55, /85) of these dark backgrounds is converted to a light surface — not just a hand-listed few. This prevents stray dark-gray cards on inner pages (About, Tools, etc.). */ html[data-theme="light"] body [class*="bg-cyber-black"], html[data-theme="light"] body [class*="bg-cyber-dark"], html[data-theme="light"] body [class*="bg-cyber-gray"], html[data-theme="light"] body [class*="bg-slate-900"], html[data-theme="light"] body [class*="bg-slate-950"], html[data-theme="light"] body [class*="bg-black"]:not(.aspect-video):not(.aspect-\[16\/10\]):not([class*="hero-"]) { background-color: var(--aw-surface) !important; color: var(--aw-text-soft) !important; } /* Image frames intentionally stay black so screenshots aren't washed out. */ html[data-theme="light"] body :where(.aspect-video.bg-black, .aspect-\[16\/10\].bg-black, .hero-laptop-screen, .hero-phone-screen, .hero-tablet-screen) { background-color: #000 !important; } html[data-theme="light"] body :where(.bg-white\/5, .bg-white\/10, .bg-white\/15, .bg-white\/20, .bg-white\/\[0\.03\], .bg-white\/\[0\.035\], .bg-white\/\[0\.04\], .bg-white\/\[0\.06\]) { background-color: rgba(255, 255, 255, 0.82) !important; } html[data-theme="light"] body [class*="border-white/"], html[data-theme="light"] body :where(.border-white\/5, .border-white\/10, .border-white\/15, .border-white\/20, .border-slate-700, .border-slate-800) { border-color: var(--aw-border) !important; } html[data-theme="light"] body :where(.shadow-\[0_0_20px_rgba\(0\2c 243\2c 255\2c 0\.5\)\], .shadow-\[0_0_30px_rgba\(0\2c 243\2c 255\2c 0\.7\)\], .glow-card-interactive, .tool-card, .faq-card, .service-detail-card) { box-shadow: var(--aw-shadow) !important; } html[data-theme="light"] body :where(.from-cyber-black, .from-cyber-dark, .from-cyber-gray) { --tw-gradient-from: var(--aw-bg) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(247, 249, 253, 0) var(--tw-gradient-to-position) !important; } html[data-theme="light"] body :where(.via-cyber-black, .via-cyber-dark, .via-cyber-gray) { --tw-gradient-stops: var(--tw-gradient-from), var(--aw-section) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; } html[data-theme="light"] body :where(.to-cyber-black, .to-cyber-dark, .to-cyber-gray) { --tw-gradient-to: var(--aw-bg-warm) var(--tw-gradient-to-position) !important; } html[data-theme="light"] body :where(.ambient-glow-radial, [class*="ambient-glow"], .mix-blend-overlay, .mix-blend-screen, [class*="blur-\[120px\]"], [class*="blur-3xl"]) { opacity: 0.1 !important; mix-blend-mode: normal !important; filter: none !important; } /* Text remap */ html[data-theme="light"] body :where(.text-white, h1, h2, h3, h4, h5, h6) { color: var(--aw-text) !important; } html[data-theme="light"] body :where(.text-slate-200, .text-slate-300, .text-gray-200, .text-gray-300) { color: var(--aw-text-soft) !important; } html[data-theme="light"] body :where(.text-slate-400, .text-slate-500, .text-gray-400, .text-gray-500) { color: var(--aw-muted) !important; } html[data-theme="light"] body :where(.text-slate-600, .placeholder-slate-600) { color: var(--aw-faint) !important; } html[data-theme="light"] body .text-neon-blue, html[data-theme="light"] body .group:hover .group-hover\:text-neon-blue { color: var(--aw-cyan) !important; } html[data-theme="light"] body .text-neon-pink, html[data-theme="light"] body .group:hover .group-hover\:text-neon-pink { color: var(--aw-pink) !important; } html[data-theme="light"] body .text-neon-green, html[data-theme="light"] body .group:hover .group-hover\:text-neon-green { color: var(--aw-green) !important; } html[data-theme="light"] body .text-transparent.bg-clip-text, html[data-theme="light"] body [class*="bg-clip-text"] { background: none !important; color: var(--aw-blue) !important; -webkit-text-fill-color: var(--aw-blue) !important; } /* Cards, lists, forms and repeated panels */ html[data-theme="light"] body :where(.glow-card-interactive, .tool-card, .faq-card, .service-detail-card, .auronix-blog-card, .auronix-review-card, article, table, .rounded-xl, .rounded-2xl, .rounded-3xl) { border-color: var(--aw-border) !important; } html[data-theme="light"] body :where(input, textarea, select) { background-color: #ffffff !important; color: var(--aw-text) !important; border-color: var(--aw-border-strong) !important; } html[data-theme="light"] body :where(input::placeholder, textarea::placeholder) { color: var(--aw-faint) !important; } html[data-theme="light"] body :where(button, a) { text-decoration-color: rgba(4, 126, 159, 0.35) !important; } html[data-theme="light"] body :where(.focus-visible\:ring-offset-cyber-black:focus-visible) { --tw-ring-offset-color: #ffffff !important; } /* Header and navigation */ html[data-theme="light"] body .auronix-header { background: rgba(255, 255, 255, 0.9) !important; border-bottom-color: rgba(4, 126, 159, 0.22) !important; box-shadow: 0 18px 48px rgba(15, 23, 42, 0.11), 0 1px 0 rgba(15, 23, 42, 0.06) !important; } html[data-theme="light"] body .auronix-header::after { background: linear-gradient(90deg, transparent, rgba(4, 126, 159, 0.34), rgba(173, 33, 110, 0.18), transparent) !important; filter: none !important; } html[data-theme="light"] body .auronix-header.is-scrolled { background: rgba(255, 255, 255, 0.94) !important; border-color: rgba(4, 126, 159, 0.22) !important; box-shadow: 0 18px 54px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.75) !important; } html[data-theme="light"] body .auronix-brand, html[data-theme="light"] body .auronix-nav-link, html[data-theme="light"] body .auronix-nav-text, html[data-theme="light"] body .auronix-mobile-link { color: var(--aw-text) !important; text-shadow: none !important; } html[data-theme="light"] body .auronix-wordmark, html[data-theme="light"] body .auronix-footer-wordmark strong { color: var(--aw-text) !important; text-shadow: none !important; } html[data-theme="light"] body .auronix-wordmark span, html[data-theme="light"] body .auronix-submark, html[data-theme="light"] body .auronix-footer-wordmark strong span, html[data-theme="light"] body .auronix-footer-wordmark > span { color: var(--aw-cyan) !important; text-shadow: none !important; } html[data-theme="light"] body .auronix-mark-shell, html[data-theme="light"] body .auronix-footer-mark { background: linear-gradient(145deg, #ffffff, #eaf2fb) !important; border-color: rgba(4, 126, 159, 0.28) !important; box-shadow: inset 0 0 18px rgba(4, 126, 159, 0.08), 0 12px 34px rgba(15, 23, 42, 0.08) !important; } html[data-theme="light"] body .auronix-mark, html[data-theme="light"] body .auronix-footer-mark svg, html[data-theme="light"] body .auronix-nav-link svg, html[data-theme="light"] body .auronix-nav-link i, html[data-theme="light"] body .auronix-mobile-link svg, html[data-theme="light"] body .auronix-mobile-link i { color: var(--aw-cyan) !important; filter: none !important; } html[data-theme="light"] body .auronix-divider { background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.18), transparent) !important; } html[data-theme="light"] body .auronix-nav-link:hover, html[data-theme="light"] body .auronix-service-dropdown a:hover, html[data-theme="light"] body .auronix-mobile-link:hover { color: var(--aw-cyan) !important; } html[data-theme="light"] body .auronix-service-dropdown, html[data-theme="light"] body .auronix-mobile-menu { background: #ffffff !important; border-color: rgba(4, 126, 159, 0.22) !important; box-shadow: 0 26px 70px rgba(15, 23, 42, 0.16) !important; } html[data-theme="light"] body .auronix-service-dropdown a, html[data-theme="light"] body .auronix-mobile-service-submenu .auronix-mobile-link { background: rgba(241, 245, 251, 0.82) !important; color: var(--aw-text-soft) !important; border-color: var(--aw-border) !important; } html[data-theme="light"] body .auronix-menu-button, html[data-theme="light"] body .auronix-theme-toggle { background: radial-gradient(120% 120% at 30% 20%, rgba(4, 126, 159, 0.12), transparent 60%), rgba(255, 255, 255, 0.92) !important; color: var(--aw-cyan, #047e9f) !important; border-color: rgba(4, 126, 159, 0.3) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 20px rgba(15, 23, 42, 0.1) !important; } html[data-theme="light"] body .auronix-theme-toggle:hover { border-color: rgba(4, 126, 159, 0.6) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 20px rgba(4, 126, 159, 0.3), 0 10px 24px rgba(15, 23, 42, 0.12) !important; } html[data-theme="light"] body .auronix-cta, html[data-theme="light"] body .auronix-mobile-link.auronix-mobile-cta { background: linear-gradient(135deg, #064e63, #0f766e) !important; color: #ffffff !important; border-color: rgba(4, 126, 159, 0.44) !important; box-shadow: 0 18px 36px rgba(4, 126, 159, 0.18) !important; } html[data-theme="light"] body .auronix-cta span, html[data-theme="light"] body .auronix-cta svg, html[data-theme="light"] body .auronix-cta i { color: #ffffff !important; } /* Footer */ html[data-theme="light"] body .auronix-footer { background: radial-gradient(circle at 78% 26%, rgba(4, 126, 159, 0.08), transparent 34%), linear-gradient(180deg, #f7f9fd 0%, #edf4fb 54%, #e7eff8 100%) !important; color: var(--aw-text-soft) !important; border-top-color: rgba(4, 126, 159, 0.22) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important; } html[data-theme="light"] body .auronix-footer::before { background: linear-gradient(90deg, transparent, rgba(4, 126, 159, 0.26), rgba(173, 33, 110, 0.16), transparent) !important; filter: none !important; } html[data-theme="light"] body .auronix-footer-main, html[data-theme="light"] body .auronix-footer-brand, html[data-theme="light"] body .auronix-footer-updates, html[data-theme="light"] body .auronix-footer-policies a:not(:last-child), html[data-theme="light"] body .auronix-footer-contact span:not(:last-child) { border-color: var(--aw-border) !important; } html[data-theme="light"] body .auronix-footer-heading, html[data-theme="light"] body .auronix-footer-bottom strong { color: var(--aw-text) !important; text-shadow: none !important; } html[data-theme="light"] body .auronix-footer-copy, html[data-theme="light"] body .auronix-newsletter-text, html[data-theme="light"] body .auronix-newsletter-status, html[data-theme="light"] body .auronix-trust-row, html[data-theme="light"] body .auronix-footer-bottom, html[data-theme="light"] body .auronix-footer-list a, html[data-theme="light"] body .auronix-footer-bottom a, html[data-theme="light"] body .auronix-footer-contact span { color: var(--aw-muted) !important; text-shadow: none !important; } html[data-theme="light"] body .auronix-footer-list a:hover, html[data-theme="light"] body .auronix-footer-bottom a:hover { color: var(--aw-cyan) !important; } html[data-theme="light"] body .auronix-footer-list a::before, html[data-theme="light"] body .auronix-footer-heading::after, html[data-theme="light"] body .auronix-footer-accent { background: var(--aw-cyan) !important; color: var(--aw-cyan) !important; box-shadow: none !important; } html[data-theme="light"] body .auronix-socials a, html[data-theme="light"] body .auronix-newsletter-form { background: rgba(255, 255, 255, 0.88) !important; border-color: var(--aw-border) !important; color: var(--aw-cyan) !important; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08) !important; } html[data-theme="light"] body .auronix-newsletter-form button { background: #e8f4f8 !important; border-left-color: rgba(4, 126, 159, 0.24) !important; color: var(--aw-cyan) !important; } html[data-theme="light"] body .auronix-footer .bg-cyber-black, html[data-theme="light"] body .auronix-footer .text-white, html[data-theme="light"] body .auronix-footer [style*="background: #000"], html[data-theme="light"] body .auronix-footer [style*="background:#000"] { background: #ffffff !important; color: var(--aw-text) !important; border-color: var(--aw-border) !important; } /* Premium white homepage hero. Device screenshot frames stay dark for contrast. */ html[data-theme="light"] body #home { background: radial-gradient(circle at 16% 18%, rgba(4, 126, 159, 0.13), transparent 34%), radial-gradient(circle at 82% 26%, rgba(173, 33, 110, 0.08), transparent 30%), linear-gradient(180deg, #ffffff 0%, #f7fbff 56%, #edf5fb 100%) !important; color: var(--aw-text) !important; color-scheme: light; } html[data-theme="light"] body #home :where(h1, h2, h3, h4, .text-white, .text-slate-200, .text-slate-300) { color: var(--aw-text) !important; } html[data-theme="light"] body #home :where(.text-slate-400, .text-slate-500, p) { color: var(--aw-muted) !important; } html[data-theme="light"] body #home :where(.text-neon-blue, .group:hover .group-hover\:text-neon-blue) { color: var(--aw-cyan) !important; } html[data-theme="light"] body #home :where(.text-neon-pink, .group:hover .group-hover\:text-neon-pink) { color: var(--aw-pink) !important; } html[data-theme="light"] body #home :where(.text-neon-green, .group:hover .group-hover\:text-neon-green) { color: var(--aw-green) !important; } html[data-theme="light"] body #home .hero-proof-bg-panel, html[data-theme="light"] body #home .hero-proof-bg-panel-1, html[data-theme="light"] body #home .hero-proof-bg-panel-2, html[data-theme="light"] body #home .hero-proof-bg-panel-3 { background: linear-gradient(116deg, rgba(4, 126, 159, 0.1) 0%, rgba(4, 126, 159, 0.035) 28%, transparent 56%), linear-gradient(247deg, rgba(173, 33, 110, 0.07) 0%, rgba(173, 33, 110, 0.025) 30%, transparent 58%), linear-gradient(180deg, #ffffff 0%, #f7fbff 55%, #edf5fb 100%) !important; } html[data-theme="light"] body #home .hero-proof-bg-panel::before { background-image: repeating-linear-gradient(118deg, transparent 0 42px, rgba(15, 23, 42, 0.035) 43px, transparent 44px, transparent 92px), repeating-linear-gradient(0deg, transparent 0 78px, rgba(4, 126, 159, 0.045) 79px, transparent 80px, transparent 160px) !important; opacity: 0.8 !important; } html[data-theme="light"] body #home .hero-proof-bg-panel::after { background: linear-gradient(90deg, rgba(255, 255, 255, 0.68), transparent 36%), linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(247, 251, 255, 0.34) 72%, rgba(237, 245, 251, 0.72) 100%) !important; } html[data-theme="light"] body #home [class*="bg-[linear-gradient"] { background: transparent !important; } html[data-theme="light"] body #home .hero-proof-bg-grid { background-image: linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px) !important; mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.2)) !important; } html[data-theme="light"] body #home .hero-proof-kicker { background: rgba(255, 255, 255, 0.86) !important; border-color: rgba(202, 138, 4, 0.28) !important; color: #b45309 !important; box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08) !important; } html[data-theme="light"] body #home .hero-proof-kicker span { background: #16a34a !important; box-shadow: 0 0 18px rgba(22, 163, 74, 0.28) !important; } html[data-theme="light"] body #home .hero-copy h1, html[data-theme="light"] body #home .hero-copy h2 { color: var(--aw-text) !important; text-shadow: 0 16px 34px rgba(15, 23, 42, 0.08) !important; } html[data-theme="light"] body #home .hero-copy h1 > span, html[data-theme="light"] body #home .hero-copy h2 > span { background: linear-gradient(90deg, #075985 0%, #06b6d4 46%, #ad216e 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; } html[data-theme="light"] body #home .hero-proof-copy-text { color: #334155 !important; text-shadow: none !important; } html[data-theme="light"] body #home .hero-proof-chips span { background: rgba(255, 255, 255, 0.74) !important; border-color: rgba(15, 23, 42, 0.12) !important; color: #334155 !important; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06) !important; } html[data-theme="light"] body #home .hero-proof-stage { background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.94)), #ffffff !important; border-color: rgba(15, 23, 42, 0.12) !important; color: var(--aw-text) !important; box-shadow: 0 32px 90px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; } html[data-theme="light"] body #home .hero-proof-stage::before { border-top-color: #0891b2 !important; border-left-color: #0891b2 !important; } html[data-theme="light"] body #home .hero-proof-stage::after { border-right-color: #d97706 !important; border-bottom-color: #d97706 !important; } html[data-theme="light"] body #home :where(.hero-proof-browser, .hero-proof-phone, .hero-proof-shot, .hero-proof-phone-shot) { background-color: #02040a !important; border-color: rgba(15, 23, 42, 0.22) !important; color: #e2e8f0 !important; } html[data-theme="light"] body #home .hero-proof-phone { background: linear-gradient(180deg, #111827, #020617) !important; } html[data-theme="light"] body #home .hero-proof-browser-top { background: linear-gradient(90deg, #111827, #1e293b) !important; border-bottom-color: rgba(226, 232, 240, 0.12) !important; } html[data-theme="light"] body #home .hero-proof-browser-dot { background: rgba(148, 163, 184, 0.72) !important; } html[data-theme="light"] body #home .hero-proof-meta { background: transparent !important; border-top-color: rgba(15, 23, 42, 0.1) !important; color: var(--aw-text) !important; } html[data-theme="light"] body #home .hero-proof-meta h3 { color: var(--aw-text) !important; } html[data-theme="light"] body #home .hero-proof-metric { background: #ffffff !important; border-color: rgba(15, 23, 42, 0.12) !important; color: var(--aw-text) !important; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06) !important; } html[data-theme="light"] body #home .hero-proof-metric strong { color: #b45309 !important; } html[data-theme="light"] body #home :where(.hero-proof-browser-address, .hero-proof-device-label, .hero-proof-meta-label, .hero-proof-metric span) { color: #64748b !important; } html[data-theme="light"] body #home :where(.hero-proof-card-actions a:first-child, .hero-proof-actions a:first-child) { color: #041015 !important; } html[data-theme="light"] body #home :where(.hero-proof-card-actions a:nth-child(2), .hero-proof-actions a:nth-child(2)) { color: var(--aw-cyan) !important; } html[data-theme="light"] body #home .hero-proof-actions a:first-child { background: #16f36d !important; border-color: rgba(22, 163, 74, 0.38) !important; color: #020617 !important; box-shadow: 0 20px 42px rgba(22, 163, 74, 0.2) !important; } html[data-theme="light"] body #home .hero-proof-actions a:nth-child(2) { background: rgba(255, 255, 255, 0.82) !important; border-color: rgba(173, 33, 110, 0.34) !important; color: var(--aw-pink) !important; box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08) !important; } html[data-theme="light"] body #home .hero-proof-actions a:nth-child(2):hover { background: var(--aw-pink) !important; color: #ffffff !important; } html[data-theme="light"] body #home .hero-proof-card-actions a { background: #ffffff !important; border-color: rgba(15, 23, 42, 0.13) !important; color: #334155 !important; } html[data-theme="light"] body #home .hero-proof-card-actions a:first-child { background: #16f36d !important; border-color: rgba(22, 163, 74, 0.38) !important; color: #020617 !important; } html[data-theme="light"] body #home .hero-proof-card-actions a:hover { background: #0f172a !important; color: #ffffff !important; } html[data-theme="light"] body #home .project-proof-tab { background: rgba(255, 255, 255, 0.82) !important; border-color: rgba(15, 23, 42, 0.12) !important; color: #334155 !important; } html[data-theme="light"] body #home .project-proof-tab.is-active { background: #0f172a !important; border-color: #0f172a !important; color: #ffffff !important; } html[data-theme="light"] body #home .text-transparent.bg-clip-text, html[data-theme="light"] body #home [class*="bg-clip-text"] { background: linear-gradient(90deg, #075985 0%, #06b6d4 52%, #ad216e 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; } @media (max-width: 767px) { /* Mobile uses the phone-mockup layout: heading sits on the light page, so it must be DARK in light mode (not the old white-on-screenshot treatment). */ html[data-theme="light"] body #home .hero-copy, html[data-theme="light"] body #home .hero-copy.is-active { transform: none !important; } html[data-theme="light"] body #home .hero-copy h1, html[data-theme="light"] body #home .hero-copy h2 { color: var(--aw-text) !important; text-shadow: none !important; } html[data-theme="light"] body #home .hero-proof-actions a { box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12) !important; } /* Secondary "Visit Live Website" button as a clean light outline button */ html[data-theme="light"] body #home .hero-proof-actions a:nth-child(2) { background: rgba(255, 255, 255, 0.92) !important; color: var(--aw-cyan) !important; border-color: rgba(4, 126, 159, 0.4) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-theme="light"] body #home .hero-proof-actions a:nth-child(2) .hero-visit-host { color: #64748b !important; } } /* Tools page: the filter dock + buttons use custom (non-utility) dark styles, so give them a light treatment in light mode. */ html[data-theme="light"] body section#tools .tools-command-panel { background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 249, 253, 0.96)) !important; border-color: rgba(15, 23, 42, 0.08) !important; box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08) !important; } /* Search input has a hardcoded dark gradient with high specificity in tools.css */ html[data-theme="light"] body section#tools .tools-search-wrap input#tool-search { background: #ffffff !important; border-color: rgba(15, 23, 42, 0.14) !important; color: var(--aw-text) !important; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.04) inset, 0 8px 22px rgba(15, 23, 42, 0.08) !important; } html[data-theme="light"] body section#tools .tools-search-wrap input#tool-search::placeholder { color: var(--aw-muted) !important; } html[data-theme="light"] body section#tools .tools-search-wrap input#tool-search:focus { border-color: rgba(4, 126, 159, 0.5) !important; box-shadow: 0 0 0 3px rgba(4, 126, 159, 0.12), 0 10px 26px rgba(15, 23, 42, 0.1) !important; } html[data-theme="light"] body section#tools .tools-filter-dock { border-color: rgba(15, 23, 42, 0.1) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)), var(--aw-surface) !important; box-shadow: 0 18px 46px rgba(15, 23, 42, 0.1), 0 1px 0 rgba(255, 255, 255, 0.8) inset !important; } html[data-theme="light"] body section#tools .tools-filter-dock .filter-btn { color: var(--aw-text-soft) !important; border-color: rgba(15, 23, 42, 0.12) !important; background: rgba(255, 255, 255, 0.85) !important; text-shadow: none !important; } html[data-theme="light"] body section#tools .tools-filter-dock .filter-btn:hover { color: var(--aw-cyan) !important; border-color: rgba(4, 126, 159, 0.4) !important; background: #ffffff !important; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12) !important; } html[data-theme="light"] body section#tools .tools-filter-dock .filter-btn.active { color: #ffffff !important; border-color: transparent !important; background: linear-gradient(135deg, #047e9f, #6d28d9) !important; text-shadow: none !important; } /* Homepage lower sections: convert custom dark cards into premium white surfaces. */ html[data-theme="light"] body.is-home-page #services .axr-row { border-color: rgba(15, 23, 42, 0.1) !important; } html[data-theme="light"] body.is-home-page #services .axr-row:hover { background: rgba(255, 255, 255, 0.62) !important; } html[data-theme="light"] body.is-home-page #services .axr-row__num { -webkit-text-stroke-color: rgba(15, 23, 42, 0.24) !important; } html[data-theme="light"] body.is-home-page #services .axr-row__title, html[data-theme="light"] body.is-home-page #services .axr-row:hover .axr-row__title { color: var(--aw-text) !important; } html[data-theme="light"] body.is-home-page #services .axr-row__desc, html[data-theme="light"] body.is-home-page #services .axr-row__points li { color: #475569 !important; } html[data-theme="light"] body.is-home-page #portfolio .space-y-20 > .group, html[data-theme="light"] body.is-home-page #portfolio .space-y-20 > .group:nth-child(even), html[data-theme="light"] body.is-home-page #projects-in-progress .space-y-20 > .group, html[data-theme="light"] body.is-home-page #projects-in-progress .space-y-20 > .group:nth-child(even), html[data-theme="light"] body.is-home-page #projects-in-staging article, html[data-theme="light"] body.is-home-page #projects-in-staging article.group { background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.94)) !important; border-color: rgba(15, 23, 42, 0.12) !important; box-shadow: 0 28px 80px rgba(15, 23, 42, 0.11) !important; } html[data-theme="light"] body.is-home-page #portfolio .space-y-20 > .group > .relative.border, html[data-theme="light"] body.is-home-page #projects-in-progress .space-y-20 > .group > .relative.border, html[data-theme="light"] body.is-home-page #projects-in-staging article > .relative, html[data-theme="light"] body.is-home-page #portfolio [class*="bg-cyber-gray/40"], html[data-theme="light"] body.is-home-page #portfolio [class*="bg-cyber-black/60"], html[data-theme="light"] body.is-home-page #projects-in-progress [class*="bg-cyber-gray/40"] { background: #ffffff !important; border-color: rgba(15, 23, 42, 0.12) !important; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08) !important; } html[data-theme="light"] body.is-home-page #portfolio :where(p, .text-slate-300, .text-slate-400), html[data-theme="light"] body.is-home-page #projects-in-progress :where(p, .text-slate-300, .text-slate-400), html[data-theme="light"] body.is-home-page #projects-in-staging :where(p, .text-slate-300, .text-slate-400) { color: #475569 !important; } html[data-theme="light"] body.is-home-page #portfolio :where(h3, .text-white), html[data-theme="light"] body.is-home-page #projects-in-progress :where(h3, .text-white), html[data-theme="light"] body.is-home-page #projects-in-staging :where(h3, .text-white) { color: var(--aw-text) !important; } html[data-theme="light"] body.is-home-page #portfolio .aspect-video, html[data-theme="light"] body.is-home-page #projects-in-progress [style*="aspect-ratio"], html[data-theme="light"] body.is-home-page #projects-in-staging [style*="aspect-ratio"] { background: #0f172a !important; } html[data-theme="light"] body.is-home-page #portfolio .flex.flex-wrap.gap-2 span, html[data-theme="light"] body.is-home-page #projects-in-progress .flex.flex-wrap.gap-2 span, html[data-theme="light"] body.is-home-page #projects-in-staging .flex.flex-wrap.gap-2 span { background: #ffffff !important; color: var(--aw-cyan) !important; border-color: rgba(4, 126, 159, 0.22) !important; } html[data-theme="light"] body.is-home-page #reviews .auronix-review-card, html[data-theme="light"] body.is-home-page .auronix-blog-card, html[data-theme="light"] body.is-home-page .auronix-performance-ledger .grid.gap-3 > div, html[data-theme="light"] body.is-home-page .auronix-performance-checklist, html[data-theme="light"] body.is-home-page .auronix-performance-checklist li, html[data-theme="light"] body.is-home-page #process .group.relative, html[data-theme="light"] body.is-home-page #pricing .grid > .group, html[data-theme="light"] body.is-home-page #contact .bg-cyber-gray\/30, html[data-theme="light"] body.is-home-page .faq-item { background: #ffffff !important; border-color: rgba(15, 23, 42, 0.12) !important; color: var(--aw-text-soft) !important; box-shadow: 0 22px 64px rgba(15, 23, 42, 0.09) !important; } html[data-theme="light"] body.is-home-page .auronix-performance-ledger, html[data-theme="light"] body.is-home-page main > section:nth-of-type(8) { background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(237, 245, 251, 0.62)), radial-gradient(circle at 88% 0%, rgba(4, 126, 159, 0.06), transparent 34%) !important; } html[data-theme="light"] body.is-home-page .auronix-review-card__summary, html[data-theme="light"] body.is-home-page .auronix-review-card__result, html[data-theme="light"] body.is-home-page .auronix-review-card__author span, html[data-theme="light"] body.is-home-page .auronix-blog-card p, html[data-theme="light"] body.is-home-page #process p, html[data-theme="light"] body.is-home-page #pricing li, html[data-theme="light"] body.is-home-page #pricing p, html[data-theme="light"] body.is-home-page .faq-item .text-slate-400, html[data-theme="light"] body.is-home-page #contact p { color: #475569 !important; } html[data-theme="light"] body.is-home-page .auronix-review-card__author strong, html[data-theme="light"] body.is-home-page .auronix-blog-card h3, html[data-theme="light"] body.is-home-page #process .text-xl, html[data-theme="light"] body.is-home-page #pricing h3, html[data-theme="light"] body.is-home-page #pricing .text-white, html[data-theme="light"] body.is-home-page .faq-item .text-white, html[data-theme="light"] body.is-home-page #contact .text-white { color: var(--aw-text) !important; } html[data-theme="light"] body.is-home-page #pricing .grid > .group:nth-child(2) { border-color: rgba(4, 126, 159, 0.32) !important; box-shadow: 0 28px 74px rgba(4, 126, 159, 0.14) !important; } html[data-theme="light"] body.is-home-page #pricing .absolute.blur-2xl, html[data-theme="light"] body.is-home-page #pricing [class*="blur-2xl"] { opacity: 0.12 !important; } html[data-theme="light"] body.is-home-page #contact .space-y-6 a { background: #ffffff !important; border-color: rgba(15, 23, 42, 0.12) !important; color: var(--aw-text-soft) !important; } html[data-theme="light"] body.is-home-page #contact :where(input, select, textarea) { background-color: #ffffff !important; border-color: rgba(15, 23, 42, 0.16) !important; color: var(--aw-text) !important; } html[data-theme="light"] body.is-home-page #blog { background: radial-gradient(circle at 16% 0%, rgba(4, 126, 159, 0.06), transparent 34%), linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%) !important; } html[data-theme="light"] body.is-home-page #blog .auronix-blog-header p { color: #475569 !important; } html[data-theme="light"] body.is-home-page #blog .auronix-insight-rail span { background: rgba(255, 255, 255, 0.92) !important; border-color: rgba(15, 23, 42, 0.13) !important; color: #334155 !important; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06) !important; } html[data-theme="light"] body.is-home-page #blog .auronix-blog-card { background: #ffffff !important; border-color: rgba(15, 23, 42, 0.12) !important; color: var(--aw-text-soft) !important; box-shadow: 0 24px 70px rgba(15, 23, 42, 0.1) !important; } html[data-theme="light"] body.is-home-page #blog .auronix-blog-card::before { border-top-color: rgba(4, 126, 159, 0.28) !important; background: linear-gradient(120deg, rgba(4, 126, 159, 0.08), transparent 38%) !important; } html[data-theme="light"] body.is-home-page #blog .auronix-blog-media::after { background: linear-gradient(180deg, transparent 56%, rgba(248, 250, 252, 0.68) 100%), linear-gradient(90deg, rgba(4, 126, 159, 0.08), transparent 44%) !important; } html[data-theme="light"] body.is-home-page #blog .auronix-blog-media img { filter: saturate(1.03) contrast(1.02) brightness(1.04) !important; } html[data-theme="light"] body.is-home-page #blog .auronix-blog-media span { background: rgba(255, 255, 255, 0.92) !important; border-color: rgba(4, 126, 159, 0.28) !important; color: var(--aw-cyan) !important; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12) !important; } html[data-theme="light"] body.is-home-page #blog .auronix-blog-content { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important; } html[data-theme="light"] body.is-home-page #blog .auronix-blog-content .text-slate-500 { color: #64748b !important; } html[data-theme="light"] body.is-home-page #blog .auronix-blog-card h3, html[data-theme="light"] body.is-home-page #blog .auronix-blog-card h3.group-hover\:text-neon-blue { color: var(--aw-text) !important; } html[data-theme="light"] body.is-home-page #blog .auronix-blog-card a { border-top-color: rgba(15, 23, 42, 0.1) !important; color: var(--aw-cyan) !important; } html[data-theme="light"] body.is-home-page #blog .auronix-blog-card:hover a { color: var(--aw-pink) !important; } html[data-theme="light"] body.is-home-page #blog .auronix-blog-desktop-cta a, html[data-theme="light"] body.is-home-page #blog .auronix-blog-mobile-cta a { background: #ffffff !important; border-color: rgba(4, 126, 159, 0.42) !important; color: var(--aw-cyan) !important; box-shadow: 0 18px 48px rgba(15, 23, 42, 0.09) !important; } html[data-theme="light"] body.is-home-page #blog .auronix-blog-desktop-cta a:hover, html[data-theme="light"] body.is-home-page #blog .auronix-blog-mobile-cta a:hover { background: var(--aw-cyan) !important; border-color: var(--aw-cyan) !important; color: #ffffff !important; } @media (max-width: 780px) { html[data-theme="light"] body .auronix-footer-policies a:not(:last-child), html[data-theme="light"] body .auronix-footer-contact span:not(:last-child) { border-right: 0 !important; } }