/* ================================================================ styles.css — Evercura Bio | Medical Information Webform Template QUICK-START CUSTOMIZATION FOR A NEW CLIENT: 1. Update the "BRAND COLORS" block in :root below. 2. Update --titlebar-gradient-start / -end to match. 3. Update --logo-max-height if the client logo is taller/shorter. 4. Update --font-family if the client has a licensed web font. Everything else (layout, spacing, shadows) can stay as-is. TABLE OF CONTENTS: 1. CSS Custom Properties (variables — edit per client here) 2. Reset & Base 3. Typography 4. Layout / Container 5. Header 6. Title Bar 7. Main Content & Form Wrapper 8. Footer 9. Cookie Consent Bar 10. Attestation Modal 11. Buttons 12. Utility / Accessibility 13. Responsive Breakpoints 14. Cognito Form CSS Overrides (add client overrides here) ================================================================ */ /* ================================================================ 1. CSS CUSTOM PROPERTIES All client-specific values live here. Changing a value here cascades automatically through every element that uses it. ================================================================ */ :root { /* ── BRAND COLORS ────────────────────────────────────────────── Replace with the client's brand colors. Tip: Pull exact values from the client's brand guide, their existing website (DevTools → Computed → color), or their logo. ──────────────────────────────────────────────────────────── */ --color-primary: #1A3A8F; /* Main brand color (Evercura blue) */ --color-primary-dark: #102770; /* Darker shade — hover states, accents */ --color-primary-light: #2B50B5; /* Lighter shade — gradients */ --color-accent: #2D7B2D; /* Secondary/accent color (Evercura green) */ --color-accent-dark: #1B5E20; /* Darker accent — hover states */ /* ── TITLE BAR GRADIENT ───────────────────────────────────────── The title bar uses a CSS gradient for a polished look. Set both stops to the same color for a solid fill instead. ──────────────────────────────────────────────────────────── */ --titlebar-gradient-start: #1F4BAC; /* Gradient start (left / top) */ --titlebar-gradient-end: #0C1E57; /* Gradient end (right / bottom) */ --titlebar-gradient-dir: 150deg; /* Angle: 0=top→bottom, 90=left→right */ --titlebar-accent-height: 4px; /* Thickness of the accent line */ --titlebar-accent-color: #2D7B2D; /* Bottom-border accent (matches green) */ --titlebar-text-color: #ffffff; /* Title and subtitle text color */ /* ── TYPOGRAPHY ──────────────────────────────────────────────── Inter is a modern, neutral sans-serif loaded from Google Fonts. No licensing concerns. Replace the stack below if the client supplies a licensed font (add the @font-face before :root or import it in the ). ──────────────────────────────────────────────────────────── */ --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --font-size-xs: 0.75rem; /* 12px — fine print */ --font-size-sm: 0.875rem; /* 14px — captions, labels */ --font-size-base: 1rem; /* 16px — body text */ --font-size-lg: 1.125rem; /* 18px — lead text */ --font-size-xl: 1.375rem; /* 22px — minor headings */ --font-size-2xl: 1.75rem; /* 28px — page title */ --font-size-3xl: 2.25rem; /* 36px — hero / display */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-base: 1.65; --line-height-tight: 1.25; --line-height-heading: 1.3; /* ── LOGO SIZING ──────────────────────────────────────────────── Adjust these heights to fit the client's logo proportions. Width is always auto so aspect ratio is preserved. ──────────────────────────────────────────────────────────── */ --logo-max-height: 30px; /* Header logo */ --logo-modal-max-height: 46px; /* Logo inside the attestation modal */ /* ── NEUTRAL / STRUCTURAL COLORS ─────────────────────────────── These provide structural contrast and generally don't need to change between clients. ──────────────────────────────────────────────────────────── */ --color-white: #ffffff; --color-bg-body: #EEF1F7; /* Cool light gray page background */ --color-bg-card: #ffffff; /* Form card background */ --color-text-dark: #1C2A3A; /* Primary headings / dark text */ --color-text-body: #3A4B5C; /* Body paragraph text */ --color-text-muted: #6B7A8D; /* Muted — captions, legal text */ --color-border: #D6DCE5; /* Subtle element borders */ /* ── FOOTER ───────────────────────────────────────────────────── */ --color-footer-bg: #0C1A3A; /* Very dark navy (related to brand blue) */ --color-footer-text: #A8BDD0; /* Muted blue-gray — footer body text */ --color-footer-link: #7BAFD6; /* Lighter blue — footer hyperlinks */ --color-footer-accent: #2D7B2D; /* Top-border accent line on footer */ /* ── COOKIE BAR ───────────────────────────────────────────────── */ --color-cookie-bg: #1C2A3A; /* Dark slate — distinct from footer */ --color-cookie-text: #D0DAE6; /* Cookie bar body text */ --color-cookie-link: #7BAFD6; /* Cookie bar hyperlink */ /* ── MODAL ────────────────────────────────────────────────────── */ --modal-overlay-bg: rgba(6, 14, 38, 0.82); /* Overlay backdrop */ --modal-border-radius: 14px; --modal-max-width: 580px; /* ── LAYOUT & SPACING ─────────────────────────────────────────── The spacing scale (space-*) is used consistently throughout to maintain visual rhythm. Change --container-max-width to widen or narrow the content column. ──────────────────────────────────────────────────────────── */ --container-max-width: 860px; --container-padding-x: 1.5rem; /* Horizontal padding on narrower screens */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ /* ── EFFECTS ──────────────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.09), 0 2px 4px rgba(0, 0, 0, 0.05); --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.11), 0 4px 8px rgba(0, 0, 0, 0.06); --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.20); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --transition: 160ms ease; --transition-md: 260ms ease; } /* ================================================================ 2. RESET & BASE ================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; /* Base rem anchor */ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-family); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); color: var(--color-text-body); background-color: var(--color-bg-body); line-height: var(--line-height-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* min-height allows footer to sit at bottom on short-content pages */ min-height: 100vh; display: flex; flex-direction: column; } /* Prevent body scroll while the attestation modal is open */ body.modal-open { overflow: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); text-decoration: underline; transition: color var(--transition); } a:hover, a:focus { color: var(--color-primary-dark); } /* Remove default list styling where used as UI components */ ul, ol { list-style: none; } /* ================================================================ 3. TYPOGRAPHY ================================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-family); font-weight: var(--font-weight-semibold); line-height: var(--line-height-heading); color: var(--color-text-dark); } p { margin-bottom: var(--space-md); } p:last-child { margin-bottom: 0; } strong { font-weight: var(--font-weight-semibold); } /* ================================================================ 4. LAYOUT / CONTAINER .container centers content and enforces a max-width. Used inside header, title bar, main, and footer. ================================================================ */ .container { width: 100%; max-width: var(--container-max-width); margin-left: auto; margin-right: auto; padding-left: var(--container-padding-x); padding-right: var(--container-padding-x); } /* Main content area grows to fill available vertical space, pushing the footer to the bottom of the viewport. */ .main-content { flex: 1 0 auto; } /* ================================================================ 5. HEADER White bar with logo, subtle bottom shadow. A thin bottom border in --color-accent ties it to the title bar. ================================================================ */ .site-header { background-color: var(--color-white); border-bottom: 3px solid var(--color-accent); box-shadow: var(--shadow-sm); position: sticky; /* Keeps header visible while scrolling */ top: 0; z-index: 100; } .header-inner { display: flex; align-items: center; justify-content: center; /* Center logo; change to flex-start to left-align */ padding-top: var(--space-sm); padding-bottom: var(--space-sm); min-height: 0; } .header-logo-link { display: inline-flex; align-items: center; text-decoration: none; /* Subtle focus ring for keyboard navigation */ border-radius: var(--radius-sm); outline-offset: 4px; } .header-logo-link:focus-visible { outline: 2px solid var(--color-primary); } .header-logo { max-height: var(--logo-max-height); width: auto; transition: opacity var(--transition); } .header-logo-link:hover .header-logo { opacity: 0.85; } /* ================================================================ 6. TITLE BAR Full-width branded gradient band below the header. Colors controlled by --titlebar-gradient-* variables. A thin accent line at the bottom adds a second brand color. ================================================================ */ .title-bar { background: linear-gradient( var(--titlebar-gradient-dir), var(--titlebar-gradient-start) 0%, var(--titlebar-gradient-end) 100% ); /* Subtle texture overlay — adds depth without being distracting */ position: relative; overflow: hidden; padding: 0.9375rem 0; /* ~15px top/bottom per design spec */ text-align: center; border-bottom: var(--titlebar-accent-height) solid var(--titlebar-accent-color); } /* Very subtle radial highlight at top-center for depth */ .title-bar::before { content: ''; position: absolute; inset: 0; background: radial-gradient( ellipse 70% 60% at 50% -20%, rgba(255, 255, 255, 0.10) 0%, transparent 70% ); pointer-events: none; } .title-bar-inner { position: relative; /* Above the ::before pseudo-element */ } .page-title { font-size: var(--font-size-xl); /* 22px — deliberately restrained for professional audience */ font-weight: var(--font-weight-semibold); color: var(--titlebar-text-color); line-height: var(--line-height-tight); letter-spacing: -0.01em; margin-bottom: var(--space-xs); } .page-subtitle { font-size: var(--font-size-base); font-weight: var(--font-weight-light); color: rgba(255, 255, 255, 0.80); /* Slightly muted white */ margin-bottom: 0; letter-spacing: 0.01em; } /* ================================================================ 7. MAIN CONTENT & FORM WRAPPER The form is displayed inside a white "card" that floats on the light gray page background. ================================================================ */ .main-content { padding-top: 0.75rem; /* ~12px — tighter gap between title bar and form */ padding-bottom: var(--space-3xl); } .form-wrapper { background-color: var(--color-bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); /* A subtle top accent line using the primary brand color */ border-top: 3px solid var(--color-primary); padding: var(--space-xl) var(--space-xl); /* Remove padding on very small screens — Cognito itself handles its padding */ } /* ── Placeholder (remove once Cognito form is embedded) ───────── */ .form-placeholder { text-align: center; padding: var(--space-3xl) var(--space-xl); color: var(--color-text-muted); border: 2px dashed var(--color-border); border-radius: var(--radius-md); } .form-placeholder-icon { font-size: 2.5rem; margin-bottom: var(--space-md); opacity: 0.4; } .form-placeholder-text { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-text-muted); margin-bottom: var(--space-sm); } .form-placeholder-hint { font-size: var(--font-size-sm); color: var(--color-text-muted); opacity: 0.75; } /* ── Attestation status bar ─────────────────────────────────────── Shown above the form card on return visits. Intentionally subtle — readable on close inspection but does not compete for attention. Visibility is toggled by scripts.js via the `hidden` attribute. ────────────────────────────────────────────────────────────────── */ .attestation-status { display: flex; align-items: center; justify-content: center; /* Centered above the form card */ gap: var(--space-xs); margin-bottom: var(--space-sm); font-size: var(--font-size-xs); color: var(--color-text-muted); opacity: 0.80; } .attestation-status-text { /* No additional styles needed; inherits from .attestation-status */ } /* Pencil / edit button — looks like an inline icon, not a button */ .attestation-edit-btn { background: none; border: none; padding: 2px 5px; cursor: pointer; color: var(--color-text-muted); font-size: 0.8rem; /* Slightly larger than surrounding text so icon reads clearly */ border-radius: var(--radius-sm); line-height: 1; display: inline-flex; align-items: center; transition: color var(--transition); } .attestation-edit-btn:hover { color: var(--color-primary); } .attestation-edit-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; color: var(--color-primary); } /* ================================================================ 8. FOOTER Dark background with privacy statement and copyright. A thin top accent line provides visual separation from the form. ================================================================ */ .site-footer { background-color: var(--color-footer-bg); border-top: 3px solid var(--color-footer-accent); flex-shrink: 0; /* Prevents footer from shrinking in the flex column layout */ } .footer-inner { padding-top: var(--space-xl); padding-bottom: var(--space-xl); display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); text-align: center; } .footer-privacy { font-size: var(--font-size-sm); color: var(--color-footer-text); line-height: var(--line-height-base); max-width: 600px; margin-bottom: 0; } .footer-link { color: var(--color-footer-link); text-decoration: underline; } .footer-link:hover, .footer-link:focus { color: #ffffff; } .footer-copyright { font-size: var(--font-size-xs); color: var(--color-text-muted); opacity: 0.65; margin-bottom: 0; } /* ================================================================ 9. COOKIE CONSENT BAR Fixed to the bottom of the viewport. Slides up on appearance and slides back down on dismissal (via .cookie-bar--hiding). Visibility is toggled by scripts.js using the `hidden` attribute and the .cookie-bar--visible class. ================================================================ */ .cookie-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; /* Above page content, below the modal */ background-color: var(--color-cookie-bg); border-top: 2px solid rgba(255, 255, 255, 0.08); /* Start off-screen (translated down) for slide-up animation */ transform: translateY(100%); transition: transform var(--transition-md); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25); } /* Applied by scripts.js (via requestAnimationFrame) to trigger slide-up */ .cookie-bar--visible { transform: translateY(0); } /* Applied by scripts.js to trigger slide-down before setting hidden */ .cookie-bar--hiding { transform: translateY(100%); } .cookie-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-top: var(--space-md); padding-bottom: var(--space-md); flex-wrap: wrap; /* Wraps on narrow screens */ } .cookie-text { font-size: var(--font-size-sm); color: var(--color-cookie-text); line-height: var(--line-height-base); flex: 1 1 300px; /* Grows but won't shrink below 300px before wrapping */ margin-bottom: 0; } .cookie-link { color: var(--color-cookie-link); text-decoration: underline; } .cookie-link:hover, .cookie-link:focus { color: #ffffff; } .cookie-actions { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; } /* ================================================================ 10. ATTESTATION MODAL Covers the entire viewport. Cannot be dismissed without a selection (no backdrop click, no Escape key). Panel visibility is toggled by scripts.js via .active class. ================================================================ */ /* Full-screen backdrop */ .modal-overlay { position: fixed; inset: 0; z-index: 999; /* Highest layer — above everything */ background-color: var(--modal-overlay-bg); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; padding: var(--space-md); /* Fade-in animation on load */ animation: modalFadeIn 0.30s ease both; } @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } } /* Added by scripts.js (or set at render time) when no modal should show */ .modal-overlay--hidden { display: none; } /* Fade-out class added by scripts.js before hiding */ .modal-overlay.modal-closing { animation: modalFadeOut 0.25s ease both; } @keyframes modalFadeOut { from { opacity: 1; } to { opacity: 0; } } /* The white dialog box */ .modal-container { background-color: var(--color-white); border-radius: var(--modal-border-radius); box-shadow: var(--shadow-modal); width: 100%; max-width: var(--modal-max-width); max-height: 90vh; /* Scrollable on very short viewports */ overflow-y: auto; /* Slide-up + fade-in entry animation */ animation: modalSlideUp 0.30s cubic-bezier(0.16, 1, 0.3, 1) both; /* Subtle top accent line using brand primary */ border-top: 4px solid var(--color-primary); } @keyframes modalSlideUp { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Individual content panel — only .active is shown */ .modal-panel { display: none; padding: var(--space-xl) var(--space-xl) var(--space-lg); flex-direction: column; align-items: center; text-align: center; } .modal-panel.active { display: flex; } /* Logo centered at top of modal */ .modal-logo-wrap { margin-bottom: var(--space-lg); } .modal-logo-img { max-height: var(--logo-modal-max-height); width: auto; margin: 0 auto; } .modal-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text-dark); margin-bottom: var(--space-md); letter-spacing: -0.01em; } .modal-body { font-size: var(--font-size-sm); color: var(--color-text-body); line-height: var(--line-height-base); text-align: left; background-color: #F7F9FC; /* Very light tint — separates text from white bg */ border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-lg); margin-bottom: var(--space-lg); width: 100%; } /* Stacked attestation buttons */ .modal-buttons { display: flex; flex-direction: column; gap: var(--space-sm); width: 100%; } /* Contact info inside alternate modal panels */ .modal-contact { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-border); } .modal-contact p { margin-bottom: var(--space-sm); } .modal-contact a { color: var(--color-primary); } .contact-label { font-weight: var(--font-weight-semibold); margin-right: var(--space-xs); } /* ================================================================ 11. BUTTONS btn — base styles (apply to all buttons) btn-primary — filled, brand primary color (main CTA) btn-secondary — outlined/ghost, brand secondary btn-back — text-style back link button btn-cookie-* — cookie bar accept / decline buttons btn-attestation — full-width inside the modal ================================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-family); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: 1; text-decoration: none; cursor: pointer; border: 2px solid transparent; border-radius: var(--radius-md); padding: 0.625rem 1.25rem; transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); white-space: nowrap; user-select: none; } .btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } /* ── Primary (filled) ─────────────────────────────────────────── */ .btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); color: #ffffff; } .btn-primary:hover, .btn-primary:focus { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #ffffff; box-shadow: 0 4px 12px rgba(26, 58, 143, 0.30); } /* ── Secondary (outlined) ─────────────────────────────────────── */ .btn-secondary { background-color: transparent; border-color: var(--color-border); color: var(--color-text-body); } .btn-secondary:hover, .btn-secondary:focus { background-color: #F0F4FA; border-color: var(--color-primary-light); color: var(--color-primary); } /* ── Back button (text style) ─────────────────────────────────── */ .btn-back { background-color: transparent; border-color: transparent; color: var(--color-text-muted); font-size: var(--font-size-sm); padding: var(--space-sm) var(--space-xs); align-self: flex-start; /* Left-aligns inside modal */ margin-top: var(--space-sm); } .btn-back:hover, .btn-back:focus { color: var(--color-primary); background-color: transparent; } /* ── Full-width inside modal ──────────────────────────────────── */ .btn-attestation { width: 100%; padding: 0.75rem 1.25rem; font-size: var(--font-size-sm); text-align: center; white-space: normal; /* Allow label to wrap on small screens */ line-height: 1.3; } /* ── Cookie bar accept ────────────────────────────────────────── */ .btn-cookie-accept { background-color: var(--color-accent); border-color: var(--color-accent); color: #ffffff; font-size: var(--font-size-xs); padding: 0.45rem 1rem; } .btn-cookie-accept:hover, .btn-cookie-accept:focus { background-color: var(--color-accent-dark); border-color: var(--color-accent-dark); color: #ffffff; } /* ── Cookie bar decline ───────────────────────────────────────── */ .btn-cookie-decline { background-color: transparent; border-color: rgba(255, 255, 255, 0.25); color: var(--color-cookie-text); font-size: var(--font-size-xs); padding: 0.45rem 1rem; } .btn-cookie-decline:hover, .btn-cookie-decline:focus { border-color: rgba(255, 255, 255, 0.55); color: #ffffff; } /* ================================================================ 12. UTILITY / ACCESSIBILITY ================================================================ */ /* Screen-reader only — visually hidden but accessible to assistive tech */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* Skip navigation link — appears on keyboard focus */ .skip-link { position: absolute; top: -100%; left: 1rem; padding: 0.5rem 1rem; background: var(--color-primary); color: #ffffff; font-weight: var(--font-weight-medium); border-radius: 0 0 var(--radius-sm) var(--radius-sm); z-index: 9999; text-decoration: none; transition: top 0ms; } .skip-link:focus { top: 0; } /* Respect user's reduced-motion preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ================================================================ 13. RESPONSIVE BREAKPOINTS Mobile-first: base styles target small screens; breakpoints progressively enhance for wider viewports. Breakpoints: sm: 480px — large phones md: 768px — tablets / landscape phones lg: 1024px — small laptops ================================================================ */ /* ── Small phones (< 480px) ──────────────────────────────────── */ @media (max-width: 479px) { :root { --font-size-2xl: 1.5rem; /* Scale down page title on small screens */ } .header-inner { min-height: 64px; } .title-bar { padding: var(--space-lg) 0; } .form-wrapper { padding: var(--space-lg) var(--space-md); } .modal-container { border-radius: var(--radius-md); } .modal-panel { padding: var(--space-lg) var(--space-md) var(--space-md); } .cookie-bar-inner { flex-direction: column; align-items: flex-start; gap: var(--space-md); } .cookie-actions { width: 100%; } .cookie-actions .btn { flex: 1; } } /* ── Tablets and above (≥ 768px) ─────────────────────────────── */ @media (min-width: 768px) { .page-title { font-size: var(--font-size-2xl); /* 28px at tablet — still restrained */ } .footer-inner { flex-direction: row; justify-content: space-between; text-align: left; } .footer-privacy { max-width: none; } .footer-copyright { flex-shrink: 0; text-align: right; } } /* ── Large screens (≥ 1024px) ────────────────────────────────── */ @media (min-width: 1024px) { .main-content { padding-top: 0.75rem; /* Keep tight — matches base value intentionally */ } } /* ================================================================ 14. COGNITO FORM CSS OVERRIDES Add client-specific Cognito form style overrides in this section. Use browser DevTools to inspect class names within the embedded form. Prefix rules with a specific selector for enough specificity to override Cognito's defaults. IMPORTANT: Cognito Forms v2 applies many styles via inline style attributes. Use `!important` sparingly when those inline styles must be overridden. Useful Cognito v2 selectors: .c-forms-form — outer form container .c-forms-heading — form section headings .c-label — field labels .c-field — individual field wrapper .c-input, .c-textarea — text input fields .c-select — dropdown fields .c-radio, .c-checkbox — radio / checkbox inputs .c-btn-submit — submit button .c-forms-confirmation — post-submission confirmation message .c-error — validation error messages EXAMPLE OVERRIDES (uncomment and adjust as needed): .c-forms-form .c-label { font-family: var(--font-family); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-dark); } .c-forms-form .c-input, .c-forms-form .c-textarea, .c-forms-form .c-select { font-family: var(--font-family); border-color: var(--color-border); border-radius: var(--radius-sm); } .c-forms-form .c-input:focus, .c-forms-form .c-textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(26, 58, 143, 0.15); } .c-forms-form .c-btn-submit { background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; font-family: var(--font-family); font-weight: var(--font-weight-semibold); border-radius: var(--radius-md); } .c-forms-form .c-btn-submit:hover { background-color: var(--color-primary-dark) !important; border-color: var(--color-primary-dark) !important; } ================================================================ */ /* Add Cognito overrides below this line */