/* Reset and base styles */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Variables moved to static/css/variables.css */ html { font-family: var(--font-family); } body { font-family: var(--font-family); line-height: 1.6; color: var(--text-color); background: var(--background); } * { font-family: inherit; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Make layout a column flex so footer can stick to the bottom */ html, body { height: 100%; } body { display: flex; flex-direction: column; min-height: 100vh; } /* Allow the main content area to grow and push footer down */ main { flex: 1; } /* Toast notifications */ #toast-container { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 2000; } .toast { display: inline-flex; align-items: center; padding: 10px 12px; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); color: #fff; background: #111827; font-size: 0.9rem; max-width: 320px; position: relative; opacity: 1; transform: translateY(0); transition: opacity 200ms ease, transform 200ms ease; } .toast--hide { opacity: 0; transform: translateY(8px); } .toast--success { background: #16a34a; } .toast--error { background: #ef4444; } .toast--info { background: #111827; } .toast-close { background: transparent; border: none; color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; line-height: 1; margin-left: 8px; cursor: pointer; padding: 2px 6px; } /* Contact-only mode Use the `.contact-only` class on a container (for example, or a specific card) to visually strip interactive UI and keep only plain text and telephone links. */ .contact-only { /* Ensure readable text color and normal flow */ color: inherit; } /* Hide non-textual UI elements (icons, images, svgs) */ .contact-only img, .contact-only svg, .contact-only .faq-link-icon, .contact-only .hero-card-action-btn, .contact-only .action-button, .contact-only .step-actions { display: none !important; } /* Disable interactive controls but keep their text visible */ .contact-only a:not([href^="tel"]) { pointer-events: none; color: inherit; text-decoration: none; cursor: default; } .contact-only button, .contact-only input, .contact-only select, .contact-only textarea, .contact-only form { display: none !important; } /* Keep telephone links visible and clickable */ .contact-only a[href^="tel"] { display: inline !important; pointer-events: auto !important; color: inherit !important; text-decoration: none !important; }