/* * Contact form styling. * * Hand-written CSS (not Tailwind @apply) on purpose: assets/css/output.css * is a pre-built, content-scanned Tailwind bundle and this environment has * no node/npm to rebuild it. Utility classes that weren't already used * anywhere in the theme (focus rings, disabled states, resize-none, * spinner keyframes, etc.) were purged out of output.css, so the form's * interactive states are defined here instead. Layout/spacing in * contact.php itself still reuses existing Tailwind utility classes that * are already present in output.css elsewhere in the theme. * * Color values mirror the Tailwind default palette already used across * the theme (green-600 #16a34a, slate-900 #0f172a, red-600 #dc2626, etc.) * and dark mode follows the theme's own strategy: a `.dark` class on * , toggled by assets/js/theme-init.js (darkMode: 'class' in * tailwind.config.js) - not a `prefers-color-scheme` media query, since * the user can override system preference via the theme switcher. */ .hss-contact-form-wrapper { max-width: 42rem; margin: 0 auto; } .hss-contact-alert { border-radius: 0.75rem; padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-size: 0.95rem; line-height: 1.5; } .hss-contact-alert-success { background-color: #f0fdf4; border: 1px solid #86efac; color: #166534; } .hss-contact-alert-success p { margin: 0.25rem 0 0; } .hss-contact-alert-error { background-color: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; } html.dark .hss-contact-alert-success { background-color: rgba(22, 101, 52, 0.2); border-color: rgba(34, 197, 94, 0.4); color: #86efac; } html.dark .hss-contact-alert-error { background-color: rgba(127, 29, 29, 0.25); border-color: rgba(239, 68, 68, 0.4); color: #fca5a5; } .hss-contact-form { display: flex; flex-direction: column; gap: 1.25rem; } .hss-field-row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 640px) { .hss-field-row { grid-template-columns: 1fr 1fr; } } .hss-field { display: flex; flex-direction: column; } .hss-field label { font-size: 0.875rem; font-weight: 600; color: #334155; margin-bottom: 0.4rem; } html.dark .hss-field label { color: #e2e8f0; } .hss-required { color: #dc2626; } .hss-field input[type="text"], .hss-field input[type="email"], .hss-field select, .hss-field textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 0.65rem; padding: 0.7rem 0.9rem; font-size: 0.95rem; font-family: inherit; color: #0f172a; background-color: #ffffff; transition: border-color 0.15s ease, box-shadow 0.15s ease; box-sizing: border-box; } .hss-field textarea { resize: vertical; min-height: 8rem; } .hss-field input::placeholder, .hss-field textarea::placeholder { color: #94a3b8; } .hss-field input:focus, .hss-field select:focus, .hss-field textarea:focus { outline: none; border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); } html.dark .hss-field input[type="text"], html.dark .hss-field input[type="email"], html.dark .hss-field select, html.dark .hss-field textarea { background-color: #1e293b; border-color: #334155; color: #f1f5f9; } html.dark .hss-field input:focus, html.dark .hss-field select:focus, html.dark .hss-field textarea:focus { border-color: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2); } .hss-input-error { border-color: #ef4444 !important; } .hss-field-error { color: #dc2626; font-size: 0.8rem; margin-top: 0.35rem; } html.dark .hss-field-error { color: #f87171; } .hss-required-note { font-size: 0.8rem; color: #64748b; margin: -0.5rem 0 0; } html.dark .hss-required-note { color: #94a3b8; } .hss-contact-submit { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.6rem; background-color: #16a34a; color: #ffffff; border: none; border-radius: 0.65rem; padding: 0.8rem 2rem; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease; } .hss-contact-submit:hover { background-color: #15803d; } .hss-contact-submit:disabled { opacity: 0.65; cursor: not-allowed; } .hss-contact-submit.is-loading::after { content: ""; width: 0.9rem; height: 0.9rem; border: 2px solid rgba(255, 255, 255, 0.5); border-top-color: #ffffff; border-radius: 50%; display: inline-block; animation: hss-contact-spin 0.6s linear infinite; } @keyframes hss-contact-spin { to { transform: rotate(360deg); } } /* Honeypot field: kept in the DOM/tab order out of reach so bots that auto-fill still see and fill it, but real users never see or tab to it. */ .hss-contact-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }