/**! * Samraworld ELC 2026 * @file AdminContactForm.css * @desc Modern contact form for esl_AdminContactForm.php. Hero + form * card scoped under body.admin-contact-page so nothing leaks. * @version v6 2026-06-02 - Initial version. * @author Charlie Samra * @see {@link students.samraworld.net } */ /************************************************************************************************************************************/ body.admin-contact-page { --ac-brand: #0e6630; --ac-brand-dark: #084a22; --ac-brand-soft: #e8f3ec; --ac-brand-tint: #f4f9f5; --ac-ink: #14211a; --ac-ink-soft: #4a5b51; --ac-card: #ffffff; --ac-border: #e0e8e3; --ac-radius: 16px; --ac-radius-sm: 12px; --ac-shadow: 0 1px 2px rgba(20, 50, 30, 0.04), 0 8px 28px rgba(20, 50, 30, 0.08); --ac-shadow-sm: 0 1px 2px rgba(20, 50, 30, 0.04), 0 4px 14px rgba(20, 50, 30, 0.06); background-color: var(--ac-brand-tint) !important; } body.admin-contact-page .ac-page { max-width: 760px; margin: 0 auto; padding: 0 16px 48px 16px; } /* ------------------------------------------------------------------ */ /* HERO */ /* ------------------------------------------------------------------ */ body.admin-contact-page .ac-hero { margin-top: 18px; padding: 40px 36px 36px 36px; background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.12) 0%, transparent 55%), linear-gradient(135deg, var(--ac-brand) 0%, var(--ac-brand-dark) 100%); color: #fff; border-radius: var(--ac-radius); box-shadow: var(--ac-shadow); text-align: center; position: relative; overflow: hidden; } body.admin-contact-page .ac-hero__eyebrow { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.95); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); margin-bottom: 16px; } body.admin-contact-page .ac-hero__title { font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 800; margin: 0 0 12px 0; line-height: 1.15; letter-spacing: -0.02em; } body.admin-contact-page .ac-hero__lead { max-width: 560px; margin: 0 auto; font-size: clamp(0.95rem, 1.3vw, 1.05rem); line-height: 1.6; color: rgba(255, 255, 255, 0.93); } /* Policy passages ship wrapped in

tags; flatten browser defaults. */ body.admin-contact-page .ac-hero__lead p { margin: 0; } body.admin-contact-page .ac-hero__lead p + p { margin-top: 0.6em; } /* ------------------------------------------------------------------ */ /* FORM CARD */ /* ------------------------------------------------------------------ */ body.admin-contact-page .ac-card { margin-top: 24px; padding: 28px 30px 26px 30px; background: var(--ac-card); border: 1px solid var(--ac-border); border-radius: var(--ac-radius); box-shadow: var(--ac-shadow-sm); } body.admin-contact-page .ac-form { display: flex; flex-direction: column; gap: 18px; } body.admin-contact-page .ac-field { display: flex; flex-direction: column; gap: 6px; } body.admin-contact-page .ac-field__label { font-size: 0.85rem; font-weight: 600; color: var(--ac-ink); letter-spacing: 0.01em; } body.admin-contact-page .ac-field__input { width: 100%; padding: 10px 14px; font-size: 1rem; color: var(--ac-ink); background: #ffffff; border: 1px solid var(--ac-border); border-radius: var(--ac-radius-sm); box-shadow: inset 0 1px 2px rgba(20, 50, 30, 0.03); transition: border-color 0.12s ease, box-shadow 0.12s ease; font-family: inherit; } body.admin-contact-page .ac-field__input:focus { outline: none; border-color: var(--ac-brand); box-shadow: 0 0 0 3px rgba(14, 102, 48, 0.12); } body.admin-contact-page .ac-field__input--textarea { resize: vertical; min-height: 130px; line-height: 1.5; } body.admin-contact-page .ac-actions { display: flex; justify-content: flex-end; margin-top: 6px; } body.admin-contact-page .ac-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border: 0; border-radius: 999px; font-size: 0.95rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: background 0.15s ease, transform 0.05s ease; font-family: inherit; } body.admin-contact-page .ac-btn--primary { background: var(--ac-brand); color: #fff; } body.admin-contact-page .ac-btn--primary:hover { background: var(--ac-brand-dark); color: #fff; text-decoration: none; } body.admin-contact-page .ac-btn--primary:active { transform: translateY(1px); } /* ------------------------------------------------------------------ */ /* ERROR ALERT */ /* ------------------------------------------------------------------ */ body.admin-contact-page .ac-alert { display: flex; gap: 12px; padding: 14px 16px; margin: 0 0 20px 0; background: #fff5f3; border: 1px solid #f5c2b7; border-radius: var(--ac-radius-sm); color: #8a2a1f; } body.admin-contact-page .ac-alert__icon { font-size: 1.15rem; margin-top: 2px; } body.admin-contact-page .ac-alert__title { margin: 0 0 6px 0; font-weight: 700; font-size: 0.9rem; } body.admin-contact-page .ac-alert__list { margin: 0; padding-left: 20px; font-size: 0.88rem; line-height: 1.5; } /* ------------------------------------------------------------------ */ /* SUCCESS STATE */ /* ------------------------------------------------------------------ */ body.admin-contact-page .ac-card--success { text-align: center; padding: 38px 30px 32px 30px; } body.admin-contact-page .ac-success__icon { font-size: 3rem; color: var(--ac-brand); margin: 0 0 12px 0; line-height: 1; } body.admin-contact-page .ac-success__title { margin: 0 0 22px 0; font-size: clamp(1.05rem, 1.8vw, 1.25rem); font-weight: 600; color: var(--ac-ink); line-height: 1.5; } /* ------------------------------------------------------------------ */ /* RESPONSIVE */ /* ------------------------------------------------------------------ */ @media (max-width: 600px) { body.admin-contact-page .ac-hero { padding: 30px 20px 26px 20px; margin-top: 12px; } body.admin-contact-page .ac-card { padding: 22px 20px; } body.admin-contact-page .ac-actions { justify-content: stretch; } body.admin-contact-page .ac-btn--primary { width: 100%; justify-content: center; } }