/* Click to Clinic - Custom Styles */ /* Color palette is injected as CSS custom properties in via theme configuration. */ /* Font Family Override (Tailwind already loads Inter) */ .font-inter { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* Smooth Scroll Behavior */ html { scroll-behavior: smooth; } /* Custom Form Styling */ input[type="email"]:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent); } /* Loader/Spinner for Form Submission */ .spinner { border: 3px solid color-mix(in srgb, var(--color-surface) 30%, transparent); border-radius: 50%; border-top-color: var(--color-surface); width: 20px; height: 20px; animation: spin 0.6s linear infinite; display: inline-block; margin-left: 8px; } @keyframes spin { to { transform: rotate(360deg); } } /* Success/Error Message Styling */ .message { padding: 12px 16px; border-radius: 8px; margin-top: 12px; font-size: 14px; display: none; } .message.success { background-color: var(--color-success-light); color: var(--color-success-dark); border: 1px solid var(--color-success); } .message.error { background-color: var(--color-error-light); color: var(--color-error-dark); border: 1px solid var(--color-error); } .message.show { display: block; } /* Responsive Typography Tweaks */ @media (max-width: 640px) { h1 { font-size: 2.5rem; line-height: 1.1; } h2 { font-size: 1.875rem; } } /* Logo Filter for Dark Backgrounds */ .logo-inverted { filter: brightness(0) invert(1); } /* Custom Button Hover Effects */ button, .btn { transition: all 0.2s ease-in-out; } button:active, .btn:active { transform: scale(0.98); } /* Feature Card Hover Effect Enhancement */ .feature-card { transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .feature-card:hover { transform: translateY(-4px); } /* Accessibility: Focus Visible States */ a:focus-visible, button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Print Styles (Optional) */ @media print { header, footer, form { display: none; } } /* Accessibility: Skip Navigation Link */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--color-primary); color: white; padding: 8px 16px; text-decoration: none; font-weight: 600; border-radius: 0 0 4px 0; z-index: 9999; transition: top 0.3s; } .skip-link:focus { top: 0; outline: 3px solid var(--color-primary-dark); outline-offset: 2px; } /* Accessibility: Screen Reader Only Text */ .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; } /* SPAM protection: Honeypot field is visually hidden off-screen (not display:none). */ .honeypot-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Enhanced Focus Indicators for Accessibility */ :focus { outline: 3px solid var(--color-primary); outline-offset: 2px; } /* Section Color Overrides โ€” scoped CSS custom properties When a section has color overrides set via the admin, --section-bg-color, --section-text-color, and --section-accent-color are emitted as inline style attributes on the section container. These rules consume those variables with graceful fallback. */ section[data-section-bg-override="true"] { background: var(--section-bg-color) !important; } section[data-section-text-override="true"] { color: var(--section-text-color); } section[data-section-text-override="true"] h1, section[data-section-text-override="true"] h2, section[data-section-text-override="true"] h3, section[data-section-text-override="true"] h4, section[data-section-text-override="true"] h5, section[data-section-text-override="true"] h6, section[data-section-text-override="true"] p, section[data-section-text-override="true"] li, section[data-section-text-override="true"] dt, section[data-section-text-override="true"] dd, section[data-section-text-override="true"] blockquote, section[data-section-text-override="true"] figcaption, section[data-section-text-override="true"] label, section[data-section-text-override="true"] legend, section[data-section-text-override="true"] small, section[data-section-text-override="true"] strong, section[data-section-text-override="true"] em { color: var(--section-text-color); } section[data-section-accent-override="true"] a, section[data-section-accent-override="true"] .text-blue-600, section[data-section-accent-override="true"] .text-green-600 { color: var(--section-accent-color); } section[data-section-accent-override="true"] .step-bubble { background-color: var(--section-accent-color); } /* Article Meta (dates, author byline) */ .article-meta time { font-weight: 500; color: var(--color-text, #374151); } .article-meta__author + .article-meta__published::before, .article-meta__published + .article-meta__modified::before { content: 'ยท'; margin-right: 0.25rem; color: #9ca3af; } /* How It Works: Step Bubble Colors */ .step-bubble { color: var(--color-surface); } .step-bubble-primary { background-color: var(--color-primary); } .step-bubble-primary-dark { background-color: var(--color-primary-dark); } /* How It Works: Responsive step arrows (column = down, row = right) */ #how-it-works .how-it-works-steps { display: flex; flex-direction: column; gap: 2rem; margin: 0; padding: 0; } #how-it-works .how-it-works-step { position: relative; } #how-it-works .how-it-works-step:not(:last-child)::after { content: 'โ†“'; display: block; margin-top: 1rem; font-size: 1.75rem; line-height: 1; font-weight: 700; color: var(--section-accent-color, var(--color-primary)); } #how-it-works .how-it-works-steps.how-it-works-steps--no-arrows .how-it-works-step:not(:last-child)::after { content: none; } @media (min-width: 1024px) { #how-it-works .how-it-works-steps { flex-direction: row; gap: 2rem; } #how-it-works .how-it-works-step { flex: 1 1 0; } #how-it-works .how-it-works-step:not(:last-child)::after { content: 'โ†’'; position: absolute; top: 1.5rem; right: -1rem; margin-top: 0; } } /* Feature List semantic list styling */ .feature-list-items { margin-top: 1rem; } .feature-list-items li::marker { color: var(--color-primary); } /* Preview section sync highlight (admin editor iframe target) */ .preview-section-anchor { scroll-margin-top: 5rem; transition: box-shadow 0.2s ease, background-color 0.2s ease; } .preview-section-anchor--active { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.45); border-radius: 0.5rem; }