/* ============================================================ style.css — Enquiry Form Stylesheet HOW THIS FILE IS ORGANIZED: 1. CSS Variables (colors, fonts, spacing for easy customization) 2. Reset & Base styles 3. Dark mode overrides 4. Dark/light toggle button 5. Page layout 6. Form card 7. Form fields (inputs, textarea, labels) 8. Consent checkbox 9. Submit button states 10. Success & error messages 11. Animations 12. Responsive (mobile) ============================================================ */ /* ============================================================ 1. CSS VARIABLES Change colors/fonts here to re-brand the entire form easily ============================================================ */ :root { /* Brand colors */ --color-primary: #e02020; /* Red — used for buttons, highlights */ --color-primary-dark: #b91c1c; /* Darker red for hover states */ --color-accent: #1e4fd8; /* Blue — focus rings, links */ --color-accent-light: #3b6ef0; /* Lighter blue for hover on links */ /* Background & surface colors (light mode) */ --color-bg: #f4f5f7; /* Light gray page background */ --color-surface: #ffffff; /* White form card */ --color-border: #e0e3ea; /* Input borders */ --color-border-focus: #1e4fd8; /* Blue border on focus */ /* Text colors (light mode) */ --color-text: #1a1d23; /* Near-black body text */ --color-text-muted: #6b7280; /* Gray for placeholders, sub-labels */ --color-error: #dc2626; /* Red for validation errors */ --color-success: #16a34a; /* Green for success message */ /* Shadows */ --shadow-card: 0 4px 24px rgba(0,0,0,0.08); --shadow-focus: 0 0 0 3px rgba(30,79,216,0.18); /* Typography */ --font-heading: 'Poppins', sans-serif; --font-body: 'DM Sans', sans-serif; /* Border radius */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; /* Transition speed */ --transition: 0.2s ease; } /* ============================================================ 2. RESET & BASE Clean up browser default spacing/styles ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-body); background-color: var(--color-bg); color: var(--color-text); min-height: 100vh; transition: background-color var(--transition), color var(--transition); -webkit-font-smoothing: antialiased; } a { color: var(--color-accent); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--color-accent-light); text-decoration: underline; } /* ============================================================ 3. DARK MODE OVERRIDES When has class "dark" (toggled by script.js), these values override the light-mode variables above. Also triggered automatically by OS preference. ============================================================ */ /* Automatic OS-level dark mode */ @media (prefers-color-scheme: dark) { body:not(.light) { --color-bg: #131720; --color-surface: #1c2233; --color-border: #2e3650; --color-border-focus: #3b6ef0; --color-text: #e8eaf0; --color-text-muted: #8b95aa; --shadow-card: 0 4px 32px rgba(0,0,0,0.35); --shadow-focus: 0 0 0 3px rgba(59,110,240,0.25); } } /* Manual dark mode — added to via JS toggle button */ body.dark { --color-bg: #131720; --color-surface: #1c2233; --color-border: #2e3650; --color-border-focus: #3b6ef0; --color-text: #e8eaf0; --color-text-muted: #8b95aa; --shadow-card: 0 4px 32px rgba(0,0,0,0.35); --shadow-focus: 0 0 0 3px rgba(59,110,240,0.25); } /* Manual light mode — overrides OS dark preference */ body.light { --color-bg: #f4f5f7; --color-surface: #ffffff; --color-border: #e0e3ea; --color-text: #1a1d23; --color-text-muted: #6b7280; --shadow-card: 0 4px 24px rgba(0,0,0,0.08); } /* ============================================================ 4. DARK/LIGHT MODE TOGGLE BUTTON Fixed in the top-right corner ============================================================ */ .theme-toggle { position: fixed; top: 18px; right: 18px; z-index: 100; background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: 50px; padding: 6px 14px; font-size: 16px; cursor: pointer; display: flex; align-items: center; gap: 6px; box-shadow: var(--shadow-card); transition: background var(--transition), border-color var(--transition), transform var(--transition); color: var(--color-text); } .theme-toggle:hover { transform: scale(1.05); border-color: var(--color-accent); } /* Show the right icon depending on current mode */ /* In light mode: show moon icon (to switch to dark) */ /* In dark mode: show sun icon (to switch to light) */ .icon-sun { display: none; } .icon-moon { display: inline; } body.dark .icon-sun { display: inline; } body.dark .icon-moon { display: none; } /* When OS is dark and no manual class, also show sun */ @media (prefers-color-scheme: dark) { body:not(.light) .icon-sun { display: inline; } body:not(.light) .icon-moon { display: none; } } /* ============================================================ 5. PAGE LAYOUT Centers the form card on the page ============================================================ */ .page-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 16px; } /* ============================================================ 6. FORM CARD The white/dark box containing the entire form ============================================================ */ .form-card { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 48px 40px; width: 100%; max-width: 520px; transition: background var(--transition), box-shadow var(--transition); } /* Form header: icon + title + subtitle */ .form-header { text-align: center; margin-bottom: 36px; } .brand-icon { width: 52px; height: 52px; background: linear-gradient(135deg, #fde8e8, #dce9ff); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: var(--color-primary); } body.dark .brand-icon, @media (prefers-color-scheme: dark) { body:not(.light) .brand-icon { background: rgba(224, 32, 32, 0.12); } } .brand-icon svg { width: 26px; height: 26px; } .form-title { font-family: var(--font-heading); font-size: 1.7rem; font-weight: 700; color: var(--color-text); letter-spacing: -0.02em; margin-bottom: 8px; } .form-subtitle { font-size: 0.92rem; color: var(--color-text-muted); line-height: 1.5; max-width: 360px; margin: 0 auto; } /* ============================================================ 7. FORM FIELDS ============================================================ */ /* Group: wraps label + input + error message */ .form-group { margin-bottom: 20px; } /* Field label */ .form-label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--color-text); margin-bottom: 6px; } /* Red asterisk for required fields */ .required-star { color: var(--color-primary); margin-left: 2px; } /* Grey "Optional" badge */ .optional-tag { font-size: 0.75rem; color: var(--color-text-muted); font-weight: 400; margin-left: 4px; } /* Text inputs and textarea share these styles */ .form-input { width: 100%; padding: 11px 14px; font-family: var(--font-body); font-size: 0.95rem; color: var(--color-text); background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); outline: none; transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); -webkit-appearance: none; } /* Placeholder text styling */ .form-input::placeholder { color: var(--color-text-muted); opacity: 0.75; } /* Blue ring and border when input is focused */ .form-input:focus { border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); background: var(--color-surface); } /* Red border when input has a validation error */ .form-input.input-error { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(220,38,38,0.12); } /* Textarea specific: allow vertical resize, no horizontal */ .form-textarea { resize: vertical; min-height: 100px; line-height: 1.5; } /* Character counter under textarea */ .char-counter { display: block; font-size: 0.75rem; color: var(--color-text-muted); text-align: right; margin-top: 4px; } /* Validation error text under each field */ .field-error { display: block; font-size: 0.78rem; color: var(--color-error); margin-top: 5px; min-height: 16px; /* Keeps layout stable even when empty */ transition: opacity 0.2s; } /* ============================================================ 8. HONEYPOT FIELD This must be invisible to real users ============================================================ */ .honeypot-field { /* Visually hidden but not display:none so bots still fill it */ position: absolute; left: -9999px; top: -9999px; opacity: 0; pointer-events: none; } /* ============================================================ 9. CONSENT CHECKBOX Custom styled checkbox with the consent text ============================================================ */ .consent-group { margin-bottom: 28px; } /* The label wraps checkbox + custom box + text */ .consent-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; } /* Hide the real browser checkbox — we style our own box */ .consent-checkbox { position: absolute; opacity: 0; width: 0; height: 0; } /* Our custom checkbox visual */ .checkbox-custom { flex-shrink: 0; width: 18px; height: 18px; border: 1.5px solid var(--color-border); border-radius: 4px; margin-top: 2px; background: var(--color-bg); display: flex; align-items: center; justify-content: center; transition: background var(--transition), border-color var(--transition), transform var(--transition); position: relative; } /* Checkmark drawn with CSS when checked */ .checkbox-custom::after { content: ''; display: block; width: 5px; height: 9px; border: 2px solid white; border-top: none; border-left: none; transform: rotate(45deg) scale(0); transition: transform 0.15s ease; position: absolute; top: 1px; } /* When checkbox is checked, fill the box and show checkmark */ .consent-checkbox:checked + .checkbox-custom { background: var(--color-primary); border-color: var(--color-primary); transform: scale(1.05); } .consent-checkbox:checked + .checkbox-custom::after { transform: rotate(45deg) scale(1); } /* Focus ring on the custom checkbox (accessibility) */ .consent-checkbox:focus-visible + .checkbox-custom { box-shadow: var(--shadow-focus); } /* Consent text styling */ .consent-text { font-size: 0.82rem; color: var(--color-text-muted); line-height: 1.5; } /* Links inside consent text */ .consent-link { color: var(--color-accent); font-weight: 500; text-decoration: underline; text-decoration-color: transparent; transition: color var(--transition), text-decoration-color var(--transition); } .consent-link:hover { color: var(--color-accent-light); text-decoration-color: var(--color-accent-light); } /* ============================================================ 10. SUBMIT BUTTON Three states: disabled, enabled, loading ============================================================ */ .submit-btn { width: 100%; padding: 13px 24px; font-family: var(--font-heading); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; border: none; border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background var(--transition), transform var(--transition), box-shadow var(--transition), opacity var(--transition); position: relative; overflow: hidden; } /* DISABLED state — greyed out */ .submit-btn:disabled { background: var(--color-border); color: var(--color-text-muted); cursor: not-allowed; box-shadow: none; transform: none; } /* ENABLED state — red with hover glow */ .submit-btn:not(:disabled) { background: var(--color-primary); color: #ffffff; box-shadow: 0 2px 12px rgba(224,32,32,0.25); } .submit-btn:not(:disabled):hover { background: var(--color-primary-dark); box-shadow: 0 4px 18px rgba(224,32,32,0.35); transform: translateY(-1px); } .submit-btn:not(:disabled):active { transform: translateY(0); box-shadow: 0 2px 8px rgba(224,32,32,0.2); } /* LOADING state — spinner shown via JS adding class "loading" */ .submit-btn.loading { pointer-events: none; opacity: 0.85; } .submit-btn.loading .btn-text::after { content: 'Submitting...'; } .submit-btn.loading .btn-text { /* Hide original text in loading state */ font-size: 0; } /* Spinner circle (hidden by default) */ .btn-spinner { display: none; width: 16px; height: 16px; border: 2.5px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; } .submit-btn.loading .btn-spinner { display: block; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================ 11. SUCCESS MESSAGE Hidden until form submits successfully ============================================================ */ .success-message { display: none; /* Hidden by default — shown by JS */ text-align: center; padding: 24px 8px; animation: fadeSlideUp 0.4s ease forwards; } .success-icon { width: 60px; height: 60px; margin: 0 auto 16px; color: var(--color-success); } /* SVG circle stroke animation */ .success-circle { stroke-dasharray: 157; stroke-dashoffset: 157; animation: drawCircle 0.6s ease forwards; } .success-check { stroke-dasharray: 36; stroke-dashoffset: 36; animation: drawCheck 0.4s 0.5s ease forwards; } @keyframes drawCircle { to { stroke-dashoffset: 0; } } @keyframes drawCheck { to { stroke-dashoffset: 0; } } .success-title { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; color: var(--color-text); margin-bottom: 8px; } .success-body { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.6; } /* ============================================================ 12. ERROR BANNER Generic error shown when submission fails ============================================================ */ .error-banner { display: none; /* Hidden by default — shown by JS */ background: rgba(220,38,38,0.08); border: 1px solid rgba(220,38,38,0.25); border-radius: var(--radius-sm); padding: 12px 16px; margin-top: 16px; font-size: 0.87rem; color: var(--color-error); display: flex; align-items: center; gap: 8px; } /* Re-apply display:none after flex set above — controlled by JS adding .visible */ .error-banner { display: none; } .error-banner.visible { display: flex; animation: fadeSlideUp 0.3s ease; } /* ============================================================ 13. ANIMATIONS ============================================================ */ @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ 14. RESPONSIVE — MOBILE Adjusts padding on smaller screens ============================================================ */ @media (max-width: 560px) { .form-card { padding: 32px 20px; border-radius: var(--radius-md); } .form-title { font-size: 1.4rem; } .theme-toggle { top: 12px; right: 12px; padding: 5px 10px; font-size: 14px; } }