/* ========================================================================== AlgoDomain Solutions — main.css Custom styles that supplement Tailwind CSS ========================================================================== */ /* -------------------------------------------------------------------------- Google Fonts — IBM Plex Sans -------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&display=swap'); /* -------------------------------------------------------------------------- CSS Custom Properties -------------------------------------------------------------------------- */ :root { --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; --color-brand: #1e40af; --color-brand-dark: #1e3a8a; --color-brand-light: #dbeafe; --color-text-primary: #111827; --color-text-secondary: #1f2937; --color-text-muted: #4b5563; --color-text-subtle: #6b7280; --color-bg: #ffffff; --color-bg-soft: #f8f9fa; --color-bg-muted: #f3f4f6; --color-border: #e5e7eb; --color-border-strong: #d1d5db; --transition-base: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-medium: 300ms cubic-bezier(0.4, 0, 0.2, 1); --transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1); } /* -------------------------------------------------------------------------- Dark Mode — CSS variable overrides [data-theme="dark"] is set on by JS toggle (localStorage-backed). The @media block is the OS-level automatic fallback when no JS pref is saved. -------------------------------------------------------------------------- */ [data-theme="dark"] { --color-brand: #60a5fa; --color-brand-dark: #93c5fd; --color-brand-light: #1e3a5f; --color-text-primary: #f3f4f6; --color-text-secondary: #e5e7eb; --color-text-muted: #9ca3af; --color-text-subtle: #6b7280; --color-bg: #0f172a; --color-bg-soft: #1e293b; --color-bg-muted: #1e293b; --color-border: #334155; --color-border-strong: #475569; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-brand: #60a5fa; --color-brand-dark: #93c5fd; --color-brand-light: #1e3a5f; --color-text-primary: #f3f4f6; --color-text-secondary: #e5e7eb; --color-text-muted: #9ca3af; --color-text-subtle: #6b7280; --color-bg: #0f172a; --color-bg-soft: #1e293b; --color-bg-muted: #1e293b; --color-border: #334155; --color-border-strong: #475569; } } /* -------------------------------------------------------------------------- Base Reset & Typography -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--font-sans); font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } [data-aos] { opacity: 1 !important; transform: none !important; } } body { font-family: var(--font-sans); color: var(--color-text-primary); background-color: var(--color-bg); line-height: 1.6; transition: background-color var(--transition-medium), color var(--transition-medium); } /* -------------------------------------------------------------------------- Navigation -------------------------------------------------------------------------- */ #site-header { transition: background-color var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-medium); } #site-header.scrolled { background-color: rgba(255, 255, 255, 0.97); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); border-bottom-color: var(--color-border); } [data-theme="dark"] #site-header { background-color: var(--color-bg); border-bottom-color: var(--color-border); } [data-theme="dark"] #site-header.scrolled { background-color: rgba(15, 23, 42, 0.97); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #site-header { background-color: #0f172a; border-bottom-color: #334155; } :root:not([data-theme="light"]) #site-header.scrolled { background-color: rgba(15, 23, 42, 0.97); } } /* -------------------------------------------------------------------------- Dropdown Menus — Wix-Style Executive Mega Menus -------------------------------------------------------------------------- */ .nav-item[data-has-dropdown] { position: relative; padding-bottom: 14px; margin-bottom: -14px; } /* Wide invisible hit-area bridge: prevents losing hover on diagonal cursor movement */ @media (min-width: 1024px) { #desktop-nav .nav-item { position: static; } } .nav-item[data-has-dropdown]::after { display: none; } .nav-dropdown { position: absolute; top: 100%; left: 0; right: 0; width: 100vw; max-width: 100%; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); border-left: none; border-right: none; border-radius: 0 0 16px 16px; box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.12), 0 4px 6px -2px rgba(15, 23, 42, 0.04); z-index: 200; padding: 0; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-16px); transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1), transform 280ms cubic-bezier(0.16, 1, 0.3, 1), visibility 280ms cubic-bezier(0.16, 1, 0.3, 1); } [data-theme="dark"] .nav-dropdown { background: rgba(15, 23, 42, 0.98); border-top-color: #334155; border-bottom-color: #334155; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05); } /* Hover & Active / Open State — CSS & JS synchronized */ .nav-item:hover > .nav-dropdown, .nav-item:focus-within > .nav-dropdown, .nav-item.is-open > .nav-dropdown, .nav-dropdown:hover, .nav-dropdown.is-open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; } /* Smooth slide and fade effect for inner dropdown content */ .nav-dropdown .nav-mega-grid, .nav-dropdown-company > .p-6, .nav-dropdown-investors > .p-6 { transform: translateY(-8px); transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1); } .nav-item:hover > .nav-dropdown .nav-mega-grid, .nav-item.is-open > .nav-dropdown .nav-mega-grid, .nav-dropdown:hover .nav-mega-grid, .nav-dropdown.is-open .nav-mega-grid, .nav-item:hover > .nav-dropdown .p-6, .nav-item.is-open > .nav-dropdown .p-6, .nav-dropdown:hover .p-6, .nav-dropdown.is-open .p-6 { transform: translateY(0); } /* Services Mega Menu Layout — Full Width */ .nav-dropdown.mega { width: 100vw; max-width: 100%; padding: 0; border-radius: 0 0 16px 16px; overflow: hidden; display: flex !important; flex-direction: column; } /* Inner Multi-Column Grid centered to max-w-7xl */ .nav-mega-grid { display: grid; grid-template-columns: 1.05fr 1.05fr 1fr; padding: 32px 2rem 28px 2rem; max-width: 80rem; margin: 0 auto; gap: 36px; width: 100%; box-sizing: border-box; background: transparent; } [data-theme="dark"] .nav-mega-grid { background: transparent; } .nav-mega-col { display: flex; flex-direction: column; } /* Category Header with Thin Underline Rule */ .nav-mega-header { margin-bottom: 16px; } .nav-mega-header span { display: block; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: #64748b; margin-bottom: 8px; } [data-theme="dark"] .nav-mega-header span { color: #94a3b8; } .nav-header-rule { width: 100%; height: 1px; background-color: #e2e8f0; } [data-theme="dark"] .nav-header-rule { background-color: #334155; } /* List of Column Items */ .nav-mega-items { display: flex; flex-direction: column; gap: 14px; } /* Two-Tier Link Item (Title + Description) */ .nav-mega-link { display: block !important; text-decoration: none !important; border-radius: 8px; padding: 8px 10px !important; margin: -4px -10px !important; white-space: normal !important; cursor: pointer !important; pointer-events: auto !important; position: relative; z-index: 10; transition: background-color 150ms ease, transform 150ms ease; } .nav-mega-link * { pointer-events: none; } .nav-mega-link:hover { background-color: #f8fafc; transform: translateX(3px) !important; } [data-theme="dark"] .nav-mega-link:hover { background-color: #1e293b; } .nav-link-title { display: flex; align-items: center; justify-content: space-between; font-size: 0.9375rem; font-weight: 700; color: #0f172a; line-height: 1.3; margin-bottom: 3px; transition: color 150ms ease; } [data-theme="dark"] .nav-link-title { color: #f8fafc; } .nav-mega-link:hover .nav-link-title { color: #1e40af; } [data-theme="dark"] .nav-mega-link:hover .nav-link-title { color: #60a5fa; } /* Upgraded modern SVG arrow in submenu */ .nav-link-arrow { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 0 !important; line-height: 0 !important; color: #94a3b8; opacity: 0; transform: translateX(-6px); transition: opacity 180ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1), color 180ms ease; position: relative; flex-shrink: 0; } .nav-link-arrow::after { content: ''; display: inline-block; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") no-repeat center / contain; } .nav-mega-link:hover .nav-link-arrow { opacity: 1; transform: translateX(0); color: #2563eb; } [data-theme="dark"] .nav-mega-link:hover .nav-link-arrow { color: #60a5fa; } .nav-link-desc { font-size: 0.8125rem; font-weight: 400; color: #64748b; line-height: 1.45; margin: 0; } [data-theme="dark"] .nav-link-desc { color: #94a3b8; } /* Highlighted Column (Column 3) */ .nav-mega-highlight-col { background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; margin: 0; padding: 20px 24px; } [data-theme="dark"] .nav-mega-highlight-col { background-color: #0b1120; border-color: #1e293b; } /* Full-Width Bottom Action Banner */ .nav-mega-footer { display: flex !important; align-items: center; justify-content: space-between; padding: 16px max(2rem, calc((100% - 80rem) / 2 + 2rem)) !important; background-color: #f8fafc; border-top: 1px solid #e2e8f0; text-decoration: none !important; margin: 0 !important; white-space: normal !important; cursor: pointer !important; pointer-events: auto !important; position: relative; z-index: 10; width: 100%; box-sizing: border-box; transition: background-color 150ms ease; } .nav-mega-footer * { pointer-events: none; } .nav-mega-footer:hover { background-color: #eff6ff; } [data-theme="dark"] .nav-mega-footer { background-color: #0b1120; border-top-color: #1e293b; } [data-theme="dark"] .nav-mega-footer:hover { background-color: #1e293b; } .nav-footer-action { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 700; color: #1e40af; } [data-theme="dark"] .nav-footer-action { color: #60a5fa; } .nav-footer-sub { font-size: 0.8125rem; color: #64748b; font-weight: 400; } [data-theme="dark"] .nav-footer-sub { color: #94a3b8; } /* Industries Mega Dropdown — Full Width */ .nav-dropdown-industries { width: 100vw; max-width: 100%; left: 0; right: 0; } .nav-grid-industries { grid-template-columns: 1fr 1fr; max-width: 80rem; margin: 0 auto; gap: 48px; } /* Company & Investors Dropdown — Full Width Grid Layout */ .nav-dropdown-company, .nav-dropdown-investors { width: 100vw; max-width: 100%; left: 0; right: 0; padding: 0; border-radius: 0 0 16px 16px; overflow: hidden; } .nav-dropdown-company > .p-6, .nav-dropdown-investors > .p-6 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px 32px; max-width: 80rem; margin: 0 auto; padding: 32px 2rem 28px 2rem !important; width: 100%; box-sizing: border-box; } /* Fallback for simple standard dropdowns */ .nav-dropdown:not(.mega):not(.nav-dropdown-company):not(.nav-dropdown-investors) a { display: block; padding: 8px 16px; font-size: 0.875rem; color: var(--color-text-secondary); text-decoration: none; border-radius: 4px; margin: 0 4px; transition: background-color var(--transition-base), color var(--transition-base), transform var(--transition-base), padding-left var(--transition-base); white-space: nowrap; } .nav-dropdown:not(.mega):not(.nav-dropdown-company):not(.nav-dropdown-investors) a:hover { background-color: var(--color-bg-muted); color: var(--color-brand); transform: translateX(3px); } /* Chevron indicator rotation transition */ .nav-item svg { transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1); } .nav-item:hover > a svg, .nav-item:focus-within > a svg, .nav-item.is-open > a svg { transform: rotate(180deg); } /* Mobile menu */ #mobile-menu { display: block; overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden; transition: max-height var(--transition-smooth), opacity var(--transition-medium), transform var(--transition-smooth), visibility var(--transition-medium); will-change: max-height, opacity, transform; } #mobile-menu.open { max-height: 1200px; opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible; } /* Mobile submenu accordion sliding */ [data-mobile-submenu] { overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-4px); transition: max-height var(--transition-smooth), opacity var(--transition-medium), transform var(--transition-smooth); } [data-mobile-submenu].open { opacity: 1; transform: translateY(0); } .submenu-chevron { transition: transform var(--transition-medium); } /* Hamburger */ .hamburger-line { display: block; width: 22px; height: 2px; background-color: var(--color-text-primary); transition: transform var(--transition-medium), opacity var(--transition-medium); transform-origin: center; } .hamburger.open .hamburger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); } .hamburger.open .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.open .hamburger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* -------------------------------------------------------------------------- Focus States (Accessibility) -------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; border-radius: 2px; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn-primary { display: inline-flex; align-items: center; gap: 6px; background-color: var(--color-brand); color: #fff; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; padding: 10px 22px; border-radius: 6px; border: 1px solid var(--color-brand); cursor: pointer; text-decoration: none; transition: background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base); line-height: 1.4; white-space: nowrap; } .btn-primary:hover { background-color: var(--color-brand-dark); border-color: var(--color-brand-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(30, 64, 175, 0.25); } .btn-primary:active { transform: translateY(1px); box-shadow: none; } .btn-outline { display: inline-flex; align-items: center; gap: 6px; background-color: transparent; color: var(--color-brand); font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; padding: 10px 22px; border-radius: 6px; border: 1px solid var(--color-brand); cursor: pointer; text-decoration: none; transition: background-color var(--transition-base), color var(--transition-base), transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); line-height: 1.4; white-space: nowrap; } .btn-outline:hover { background-color: var(--color-brand-light); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(30, 64, 175, 0.12); } .btn-outline:active { transform: translateY(1px); box-shadow: none; } /* -------------------------------------------------------------------------- Section & Layout Utilities -------------------------------------------------------------------------- */ .section-label { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-brand); margin-bottom: 12px; } .section-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; color: var(--color-text-primary); line-height: 1.25; letter-spacing: -0.01em; } .section-lead { font-size: 1.0625rem; color: var(--color-text-muted); line-height: 1.7; max-width: 640px; } /* -------------------------------------------------------------------------- FAQ Accordion -------------------------------------------------------------------------- */ .faq-item { border-top: 1px solid var(--color-border); } .faq-item:last-child { border-bottom: 1px solid var(--color-border); } .faq-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; background: none; border: none; font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; color: var(--color-text-primary); text-align: left; cursor: pointer; gap: 16px; transition: color var(--transition-base); } .faq-trigger:hover { color: var(--color-brand); } .faq-icon { flex-shrink: 0; width: 20px; height: 20px; transition: transform var(--transition-medium); color: var(--color-text-subtle); } .faq-item.open .faq-icon { transform: rotate(180deg); } .faq-body { max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-4px); transition: max-height var(--transition-smooth), opacity var(--transition-medium), transform var(--transition-smooth); } .faq-item.open .faq-body { opacity: 1; transform: translateY(0); } .faq-content { padding-bottom: 18px; font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.7; } /* -------------------------------------------------------------------------- Breadcrumbs -------------------------------------------------------------------------- */ .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--color-text-subtle); } .breadcrumb a { color: var(--color-text-subtle); text-decoration: none; transition: color var(--transition-base); } .breadcrumb a:hover { color: var(--color-brand); } .breadcrumb-sep { color: var(--color-border-strong); font-size: 0.75rem; } /* -------------------------------------------------------------------------- Article / Editorial Content -------------------------------------------------------------------------- */ .prose-content h2 { font-size: 1.375rem; font-weight: 600; color: var(--color-text-primary); margin-top: 2.25rem; margin-bottom: 0.75rem; letter-spacing: -0.01em; line-height: 1.3; } .prose-content h3 { font-size: 1.125rem; font-weight: 600; color: var(--color-text-secondary); margin-top: 1.75rem; margin-bottom: 0.5rem; line-height: 1.4; } .prose-content p { font-size: 1rem; line-height: 1.75; color: var(--color-text-muted); margin-bottom: 1.25rem; } .prose-content ul, .prose-content ol { margin-bottom: 1.25rem; padding-left: 1.5rem; } .prose-content li { font-size: 1rem; line-height: 1.7; color: var(--color-text-muted); margin-bottom: 0.375rem; } .prose-content ul li { list-style-type: disc; } .prose-content ol li { list-style-type: decimal; } .prose-content strong { font-weight: 600; color: var(--color-text-secondary); } .prose-content code { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.875em; background-color: var(--color-bg-muted); border: 1px solid var(--color-border); padding: 1px 5px; border-radius: 3px; color: var(--color-text-secondary); } .prose-content pre { background-color: #1f2937; border-radius: 6px; padding: 20px 24px; overflow-x: auto; margin-bottom: 1.5rem; } .prose-content pre code { background: none; border: none; padding: 0; color: #e5e7eb; font-size: 0.875rem; } .prose-content blockquote { border-left: 3px solid var(--color-brand); padding-left: 20px; margin-left: 0; margin-bottom: 1.25rem; color: var(--color-text-secondary); font-style: italic; } /* -------------------------------------------------------------------------- Form Elements -------------------------------------------------------------------------- */ .form-input, .form-select, .form-textarea { width: 100%; font-family: var(--font-sans); font-size: 0.9375rem; color: var(--color-text-primary); background-color: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: 6px; padding: 10px 14px; transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base), transform var(--transition-base); line-height: 1.5; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15); } .form-input::placeholder, .form-textarea::placeholder { color: var(--color-text-subtle); } .form-label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary); margin-bottom: 6px; } .form-error { font-size: 0.8125rem; color: #dc2626; margin-top: 4px; display: none; } .form-error.visible { display: block; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ #site-footer a { transition: color var(--transition-base); } #site-footer a:hover { color: #93c5fd; } /* -------------------------------------------------------------------------- Tech Tags -------------------------------------------------------------------------- */ .tech-tag { display: inline-block; font-size: 0.8125rem; font-weight: 500; color: var(--color-text-secondary); background-color: var(--color-bg-muted); border: 1px solid var(--color-border); padding: 3px 10px; border-radius: 4px; white-space: nowrap; transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base); } .tech-tag:hover { background-color: var(--color-brand-light); color: var(--color-brand); border-color: rgba(30, 64, 175, 0.25); transform: translateY(-1px); } /* -------------------------------------------------------------------------- Card & Interactive Hover Micro-Animations -------------------------------------------------------------------------- */ .hover-card { transition: transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-medium); } .hover-card:hover { transform: translateY(-3px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04); } /* Arrow slide on hover for links */ a:hover > span.inline-arrow, a.group:hover .group-hover-arrow { transform: translateX(4px); } /* General interactive transition defaults */ a, button { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } /* -------------------------------------------------------------------------- AOS override for reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { [data-aos] { opacity: 1 !important; transform: translateY(0) !important; transition: none !important; } } /* -------------------------------------------------------------------------- Utility: horizontal divider with label -------------------------------------------------------------------------- */ .divider-label { display: flex; align-items: center; gap: 16px; color: var(--color-text-subtle); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; } .divider-label::before, .divider-label::after { content: ''; flex: 1; height: 1px; background-color: var(--color-border); } /* -------------------------------------------------------------------------- Print -------------------------------------------------------------------------- */ @media print { #site-header, #site-footer, #mobile-menu { display: none !important; } body { font-size: 12pt; color: #000; } a { color: inherit; text-decoration: underline; } } /* -------------------------------------------------------------------------- Theme Toggle Button -------------------------------------------------------------------------- */ #theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--color-border); border-radius: 6px; background: transparent; color: var(--color-text-muted); cursor: pointer; transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base); flex-shrink: 0; } #theme-toggle:hover { background-color: var(--color-bg-muted); color: var(--color-text-primary); border-color: var(--color-border-strong); } #theme-toggle .icon-sun, #theme-toggle .icon-moon { display: none; } [data-theme="light"] #theme-toggle .icon-moon, :root:not([data-theme]) #theme-toggle .icon-moon { display: block; } [data-theme="dark"] #theme-toggle .icon-sun { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) #theme-toggle .icon-sun { display: block; } :root:not([data-theme="light"]):not([data-theme="dark"]) #theme-toggle .icon-moon { display: none; } } /* -------------------------------------------------------------------------- Dark Mode — Tailwind utility class overrides These override hardcoded Tailwind bg/text/border classes that can't respond to CSS variables automatically. Scoped to [data-theme="dark"] and the OS prefers-color-scheme media query (same two-track pattern as variables above). -------------------------------------------------------------------------- */ /* --- Backgrounds --- */ [data-theme="dark"] body, [data-theme="dark"] .bg-white { background-color: var(--color-bg) !important; } [data-theme="dark"] .bg-gray-50 { background-color: var(--color-bg-soft) !important; } [data-theme="dark"] .bg-gray-100 { background-color: var(--color-bg-muted) !important; } /* Arbitrary-value bg used across industry/service pages */ [data-theme="dark"] .bg-\[\#f8f9fa\] { background-color: var(--color-bg-soft) !important; } /* --- Text — light sections only (not inside intentionally-dark containers) --- bg-gray-900, bg-gray-950, bg-blue-800/900/950 are deliberately dark hero/CTA/footer sections with white text — leave those alone. We target only text that sits on light backgrounds by excluding those dark-section ancestors. */ [data-theme="dark"] :not(.bg-gray-900):not(.bg-gray-950):not(.bg-blue-800):not(.bg-blue-900):not(.bg-blue-950) > .text-gray-900, [data-theme="dark"] :not(.bg-gray-900):not(.bg-gray-950):not(.bg-blue-800):not(.bg-blue-900):not(.bg-blue-950) > .text-gray-800 { color: var(--color-text-primary) !important; } [data-theme="dark"] :not(.bg-gray-900):not(.bg-gray-950):not(.bg-blue-800):not(.bg-blue-900):not(.bg-blue-950) > .text-gray-700, [data-theme="dark"] :not(.bg-gray-900):not(.bg-gray-950):not(.bg-blue-800):not(.bg-blue-900):not(.bg-blue-950) > .text-gray-600 { color: var(--color-text-secondary) !important; } [data-theme="dark"] :not(.bg-gray-900):not(.bg-gray-950):not(.bg-blue-800):not(.bg-blue-900):not(.bg-blue-950) > .text-gray-500, [data-theme="dark"] :not(.bg-gray-900):not(.bg-gray-950):not(.bg-blue-800):not(.bg-blue-900):not(.bg-blue-950) > .text-gray-400 { color: var(--color-text-muted) !important; } /* Simpler broad overrides that catch nested text not directly inside a dark section */ [data-theme="dark"] .text-gray-900 { color: var(--color-text-primary) !important; } [data-theme="dark"] .text-gray-800 { color: var(--color-text-primary) !important; } [data-theme="dark"] .text-gray-700 { color: var(--color-text-secondary) !important; } [data-theme="dark"] .text-gray-600 { color: var(--color-text-secondary) !important; } [data-theme="dark"] .text-gray-500 { color: var(--color-text-muted) !important; } [data-theme="dark"] .text-gray-400 { color: var(--color-text-muted) !important; } /* Restore light text inside intentionally-dark sections */ [data-theme="dark"] .bg-gray-900 .text-gray-300, [data-theme="dark"] .bg-gray-900 .text-gray-400, [data-theme="dark"] .bg-gray-950 .text-gray-300, [data-theme="dark"] .bg-gray-950 .text-gray-400 { color: #d1d5db !important; } [data-theme="dark"] .bg-gray-900 .text-gray-500, [data-theme="dark"] .bg-gray-950 .text-gray-500 { color: #9ca3af !important; } [data-theme="dark"] .bg-gray-900 .text-gray-600, [data-theme="dark"] .bg-gray-950 .text-gray-600 { color: #9ca3af !important; } [data-theme="dark"] .bg-gray-900 .text-white, [data-theme="dark"] .bg-gray-950 .text-white { color: #ffffff !important; } /* Dark section that is itself the text-carrying element */ [data-theme="dark"] .bg-gray-900.text-white, [data-theme="dark"] .bg-gray-950.text-white { color: #ffffff !important; } /* Footer base text color (bg-gray-950 text-gray-400 on the