/* * Base styles for the light theme (default) */ :root { --bg-primary: #f9fafb; /* gray-50 */ --bg-secondary: #ffffff; /* white */ --bg-tertiary: #f3f4f6; /* gray-100 */ --text-primary: #1f2937; /* gray-900 */ --text-secondary: #4b5563; /* gray-600 */ --text-tertiary: #6b7280; /* gray-500 */ --text-accent: #2563eb; /* blue-600 */ --icon-accent: #3b82f6; /* blue-600 */ --bg-accent: #2563eb; /* blue-600 */ --hover-accent: #1d4ed8; /* blue-700 */ --quote-bg: #ffffff; /* white */ --quote-text: #6b7280; /* gray-500 */ --quote-input-bg: #ffffff; /* white */ --quote-input-border: #d1d5db; /* gray-300 */ --whatsapp-bg: #22c55e; /* green-500 */ --whatsapp-hover: #16a34a; /* green-600 */ /* Added/fallback tokens used later */ --muted: #6b7280; /* fallback muted color */ --surface: #ffffff; /* surface for components */ --text: var(--text-primary); /* general text alias */ --radius-sm: 8px; --space-md: 1rem; --space-xs: 0.25rem; /* form-specific tokens (light mode defaults) */ --form-input-bg-light: #2b3a45; /* dark enough so white placeholder is visible in light mode */ --form-input-text-light: #ffffff; /* typed text color when using dark input bg in light mode */ --form-input-border-light: rgba(255, 255, 255, 0.08); /* form tokens for dark mode (overridden below) */ --form-input-bg-dark: rgba(255, 255, 255, 0.06); --form-input-text-dark: #ffffff; --form-input-border-dark: rgba(255, 255, 255, 0.1); } /* ============================ Contact Us button styles - uses !important to ensure it overrides Tailwind-like classes in HTML - includes focus styles for accessibility ============================ */ .contact-btn { background-color: var(--bg-accent) !important; color: #ffffff !important; padding: 0.5rem 1rem; border-radius: 0.375rem; /* same as Tailwind rounded-md */ font-weight: 500; transition: background-color 200ms ease, color 200ms ease, box-shadow 150ms ease; display: inline-block; text-align: center; border: none; cursor: pointer; } .contact-btn:hover, .contact-btn:active { background-color: var(--hover-accent) !important; color: #ffffff !important; } /* keyboard focus ring for accessibility */ .contact-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); /* subtle blue ring by default */ } /* if dark theme is active, adjust focus ring color to match dark accent */ html[data-theme="dark"] .contact-btn:focus { box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12); } /* * Styles for the dark theme using data-theme attribute on */ html[data-theme="dark"] { --bg-primary: #111827; /* gray-900 */ --bg-secondary: #1f2937; /* gray-800 */ --bg-tertiary: #1f2937; /* gray-800 */ --text-primary: #f9fafb; /* gray-50 */ --text-secondary: #9ca3af; /* gray-400 */ --text-tertiary: #d1d5db; /* gray-300 */ --text-accent: #4ade80; /* green-400 */ --icon-accent: #4ade80; /* green-400 */ --bg-accent: #14b8a6; /* green-600 */ --hover-accent: #0f766e; /* green-700 */ --quote-bg: #1f2937; /* gray-800 */ --quote-text: #9ca3af; /* gray-400 */ --quote-input-bg: #374151; /* gray-700 */ --quote-input-border: #4b5563; /* gray-600 */ --whatsapp-bg: #22c55e; /* green-500 */ --whatsapp-hover: #16a34a; /* green-600 */ /* dark-mode form overrides */ --form-input-bg-light: var(--form-input-bg-dark); --form-input-text-light: var(--form-input-text-dark); --form-input-border-light: var(--form-input-border-dark); } /* Base page styles */ html, body { height: 100%; } body { font-family: "Inter", sans-serif; background-color: var(--bg-primary); color: var(--text-primary); transition: background-color 300ms ease, color 300ms ease; } /* Custom styles for the message modal */ .modal-bg { background-color: rgba(0, 0, 0, 0.5); } .modal-content { animation: fadeIn 0.3s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* Semantic utility classes (use these so they follow current theme) */ .bg-primary { background-color: var(--bg-primary) !important; } .bg-secondary { background-color: var(--bg-secondary) !important; } .bg-tertiary { background-color: var(--bg-tertiary) !important; } .text-primary { color: var(--text-primary) !important; } .text-secondary { color: var(--text-secondary) !important; } .text-tertiary { color: var(--text-tertiary) !important; } .text-accent { color: var(--text-accent) !important; } .bg-accent { background-color: var(--bg-accent) !important; } .icon-accent { color: var(--icon-accent) !important; } .hover\:bg-accent:hover { background-color: var(--hover-accent) !important; } .hover\:text-accent:hover { color: var(--icon-accent) !important; } /* Common mappings similar to what you had (kept for compatibility) */ .bg-white { background-color: var(--bg-secondary) !important; } .bg-gray-100 { background-color: var(--bg-tertiary) !important; } .bg-gray-900 { background-color: var(--bg-primary) !important; } .bg-gray-700 { background-color: var(--quote-input-bg) !important; } .text-white { color: #ffffff !important; } /* explicit */ .text-gray-900 { color: var(--text-primary) !important; } .text-gray-600 { color: var(--text-secondary) !important; } .text-gray-500 { color: var(--text-tertiary) !important; } .text-gray-400 { color: var(--text-secondary) !important; } .text-gray-300 { color: var(--text-tertiary) !important; } .text-blue-600 { color: var(--icon-accent) !important; } .text-blue-400 { color: var(--icon-accent) !important; } .bg-blue-600 { background-color: var(--bg-accent) !important; } .hover\:bg-blue-700:hover { background-color: var(--hover-accent) !important; } .bg-green-500 { background-color: var(--whatsapp-bg) !important; } .hover\:bg-green-600:hover { background-color: var(--whatsapp-hover) !important; } /* Small helpers */ .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } /* Quote area */ .quote-box { background-color: var(--quote-bg); color: var(--quote-text); border: 1px solid var(--quote-input-border); } /* Input-like element in quote modal */ .quote-input { background-color: var(--quote-input-bg); border: 1px solid var(--quote-input-border); color: var(--text-primary); } /* ============================ Fix: make specific sections follow css variables (overrides Tailwind utility classes so html[data-theme="dark"] works) ============================ */ /* About & Services sections: use semantic vars (light by default) */ #about { background-color: var(--bg-tertiary) !important; /* light bg for about */ color: var(--text-primary) !important; } #services { background-color: var(--bg-primary) !important; color: var(--text-primary) !important; } /* When data-theme=dark, switch the about & services backgrounds to dark vars */ html[data-theme="dark"] #about, html[data-theme="dark"] #services { background-color: var(--bg-secondary) !important; /* dark section bg */ color: var(--text-primary) !important; } /* Also ensure any Tailwind 'dark:' utilities that are still in HTML are overridden to use our variables (common ones used in your HTML) */ .bg-gray-50 { background-color: var(--bg-tertiary) !important; } .bg-white { background-color: var(--bg-secondary) !important; } .bg-gray-800 { background-color: var(--bg-secondary) !important; } .bg-gray-900 { background-color: var(--bg-primary) !important; } .text-gray-900 { color: var(--text-primary) !important; } .text-gray-50 { color: var(--text-primary) !important; } .text-gray-500 { color: var(--text-secondary) !important; } .text-gray-400 { color: var(--text-secondary) !important; } /* Target Tailwind's dark: pseudo-utility classes (escape colons) so those elements still respect data-theme toggles */ html[data-theme="dark"] .dark\:bg-gray-900 { background-color: var(--bg-primary) !important; } html[data-theme="dark"] .dark\:bg-gray-800 { background-color: var(--bg-secondary) !important; } html[data-theme="dark"] .dark\:text-gray-50 { color: var(--text-primary) !important; } html[data-theme="dark"] .dark\:text-gray-400 { color: var(--text-secondary) !important; } /* ============================ Fix: remove hover for top nav links (Services, About Us, Contact) Keep them simple and static as requested ============================ */ /* select only the header navigation anchors and the two contact buttons */ header nav a, header nav button#contact-nav-button, #mobile-menu a, #contact-mobile-button { transition: none !important; } /* remove hover color/background for those specific items */ header nav a:hover, header nav button#contact-nav-button:hover, #mobile-menu a:hover, #contact-mobile-button:hover { color: inherit !important; background: transparent !important; text-decoration: none !important; } /* Small safety: make sure .contact-btn still wins over Tailwind (if the HTML still has bg-blue-600 classes) */ .contact-btn { background-color: var(--bg-accent) !important; color: #fff !important; } .contact-btn:hover { background-color: var(--hover-accent) !important; } /* Smooth transition for theme changes on elements that need it */ * { transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease; } /* Pricing modal specific */ #pricing-modal .contact-btn { /* keep consistent with contact-btn but slightly larger */ padding: 0.5rem 1rem; } /* Make table readable in both themes */ #pricing-modal table th, #pricing-modal table td { vertical-align: top; } /* small responsive tweak: reduce min width on very small screens */ @media (max-width: 640px) { #pricing-modal .min-w-\[680px\] { min-width: 0; } #pricing-modal table { font-size: 0.95rem; } } /* Ensure modal content uses theme variables */ #pricing-modal .bg-white { background-color: var(--bg-secondary) !important; color: var(--text-primary) !important; } /* Emphasize remote/online card inside pricing modal */ #pricing-modal .grid > :nth-child(2) { box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06); border-left-width: 2px; border-left-color: rgba(37, 99, 235, 0.12); } html[data-theme="dark"] #pricing-modal .grid > :nth-child(2) { border-left-color: rgba(20, 184, 166, 0.12); } /* Ensure pricing modal always uses primary text color in light mode and white in dark mode */ #pricing-modal, #pricing-modal h3, #pricing-modal h4, #pricing-modal p, #pricing-modal li, #pricing-modal ul { color: var( --text-primary ) !important; /* var(--text-primary) = dark in light mode, light in dark */ } /* Muted note styles inside pricing modal */ #pricing-modal .text-muted { color: var(--text-secondary) !important; } /* Keep the small note using slightly lighter color */ #pricing-modal .text-xs, #pricing-modal p.text-sm { color: var(--text-secondary) !important; } /* --------------- PLACEHOLDER + FORMS (CONSOLIDATED FIX) --------------- - White placeholder in light mode - Darker input bg in light mode so white placeholder is visible - Dark mode keeps white text + white placeholder - Vendor prefixes + !important to override other frameworks */ /* Core form styles (use light-mode form vars by default) */ .form-group { margin-bottom: var(--space-md); } label { display: block; margin-bottom: var(--space-xs); font-weight: 600; color: var(--text); } /* Apply backgrounds and text color explicitly so placeholders are readable */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select { width: 100%; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); border: 1px solid var(--form-input-border-light); background: var(--form-input-bg-light) !important; color: var(--form-input-text-light) !important; font: inherit; line-height: 1.2; box-shadow: none; transition: box-shadow 0.12s ease, border-color 0.12s ease; } /* --------------------------- Targeted fix for the "Total days needed" input (keeps other inputs unchanged if you prefer) Replace the selector below if your input has a different id/class/name --------------------------- */ #total-days, input[name="total_days"], .total-days { background: var(--form-input-bg-light) !important; color: var(--form-input-text-light) !important; border: 1px solid var(--form-input-border-light) !important; } /* Placeholder rules — strong specificity and vendor prefixes */ input[type="text"]::placeholder, input[type="email"]::placeholder, input[type="password"]::placeholder, input[type="number"]::placeholder, textarea::placeholder, select::placeholder, #total-days::placeholder, input[name="total_days"]::placeholder, .total-days::placeholder { color: #ffffff !important; opacity: 1 !important; } /* WebKit/Blink */ input[type="text"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder, input[type="number"]::-webkit-input-placeholder, textarea::-webkit-input-placeholder, select::-webkit-input-placeholder, #total-days::-webkit-input-placeholder, input[name="total_days"]::-webkit-input-placeholder, .total-days::-webkit-input-placeholder { color: #ffffff !important; opacity: 1 !important; } /* Firefox old placeholder */ input[type="text"]:-moz-placeholder, textarea:-moz-placeholder, #total-days:-moz-placeholder, .total-days:-moz-placeholder { color: #ffffff !important; opacity: 1 !important; } /* IE / Edge Legacy */ input[type="text"]:-ms-input-placeholder, input[type="text"]::-ms-input-placeholder, textarea:-ms-input-placeholder, textarea::-ms-input-placeholder, #total-days:-ms-input-placeholder, #total-days::-ms-input-placeholder { color: #ffffff !important; opacity: 1 !important; } /* Focus state */ input:focus, textarea:focus, select:focus { outline: none; border-color: var(--text-accent); box-shadow: 0 4px 18px rgba(37, 99, 235, 0.08); } /* Textarea defaults */ textarea { min-height: 120px; resize: vertical; } /* Helper text */ .helper { font-size: 0.875rem; color: var(--text-secondary); } /* Chrome autofill fix (keeps background + text correct) */ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px var(--form-input-bg-light) inset !important; -webkit-text-fill-color: var(--form-input-text-light) !important; box-shadow: 0 0 0px 1000px var(--form-input-bg-light) inset !important; } /* Dark mode form overrides */ html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] textarea, html[data-theme="dark"] select { border: 1px solid var(--form-input-border-dark); background: var(--form-input-bg-dark) !important; color: var(--form-input-text-dark) !important; } /* Ensure placeholder still white in dark theme too (explicit) */ html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder, html[data-theme="dark"] select::placeholder, html[data-theme="dark"] input::-webkit-input-placeholder, html[data-theme="dark"] textarea::-webkit-input-placeholder, html[data-theme="dark"] select::-webkit-input-placeholder { color: #ffffff !important; opacity: 1 !important; } /* --------------- END FORMS --------------- */ /* Emphasize remote/online card inside pricing modal */ #pricing-modal .grid > :nth-child(2) { box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06); border-left-width: 2px; border-left-color: rgba(37, 99, 235, 0.12); } html[data-theme="dark"] #pricing-modal .grid > :nth-child(2) { border-left-color: rgba(20, 184, 166, 0.12); } /* Ensure pricing modal always uses primary text color in light mode and white in dark mode */ #pricing-modal, #pricing-modal h3, #pricing-modal h4, #pricing-modal p, #pricing-modal li, #pricing-modal ul { color: var( --text-primary ) !important; /* var(--text-primary) = dark in light mode, light in dark */ } /* Muted note styles inside pricing modal */ #pricing-modal .text-muted { color: var(--text-secondary) !important; } /* Keep the small note using slightly lighter color */ #pricing-modal .text-xs, #pricing-modal p.text-sm { color: var(--text-secondary) !important; }