/* Phase C: Hero Aesthetic Layer * Contains ONLY visual (non-structural) styling for hero section text/background/effects. * Structural layout, sizing, positioning must live in layout-hero.css and related structural files. * Source references: AI-DEV/feedback/hero-form-styles-we-lost.txt (filtered), existing public-theme-default.css * After population, duplicates removed from theme file to keep separation of concerns. */ /* Hero heading & paragraph visual styles (colors, shadows, weight) */ /* Overlay container adjustments */ .hero { position: relative; } /* Tokenized overlay (enabled if --hero-overlay-enabled = 1) */ .hero::before { content: ''; position: absolute; inset: 0; background: var(--hero-overlay-gradient); opacity: calc(var(--hero-overlay-enabled) * var(--hero-overlay-alpha)); pointer-events: none; z-index: 1; transition: opacity 0.25s ease; } /* Ensure content (not background image) is above overlay; keep image below pseudo layer */ .hero > *:not(.hero-bg), .hero .container { position: relative; z-index: 2; } .hero .hero-bg { position: relative; z-index: 0; } /* Legacy markup overlay rule removed (no longer injected). */ /* Force debug overlay helper: add class .hero-debug-overlay to .hero element to force a high-contrast overlay * without depending on body debug flags; useful on a per-hero basis in multi-hero pages. */ .hero.hero-debug-overlay::before { background: repeating-linear-gradient(45deg, rgba(0,150,255,0.65) 0 20px, rgba(0,0,0,0.65) 20px 40px) !important; opacity: 1 !important; /* force visible regardless of enabled flag */ mix-blend-mode: normal !important; } /* ================= HERO OVERLAY DEBUG MODE ================= * Activate via either: * - Add class 'debug-hero-overlay' to * - Set --hero-overlay-debug-enabled: 1 on :root * Visual: strong flashing diagonal bands, easy to see on/off. */ body.debug-hero-overlay .hero::before, :root[style*="--hero-overlay-debug-enabled: 1"] .hero::before { background: repeating-linear-gradient(45deg, rgba(255,0,0,0.65) 0 20px, rgba(0,0,0,0.65) 20px 40px) !important; opacity: calc(var(--hero-overlay-enabled) * 1) !important; mix-blend-mode: normal !important; } body.debug-hero-overlay .hero::before { outline: 3px solid #ff00ff; outline-offset: -3px; } /* Helper class to totally suppress overlay for A/B check */ body.debug-hero-overlay-off .hero::before { opacity: 0 !important; } /* Token-based shadows for accessible contrast */ .hero h1 { color: var(--accessible-on-primary, #ffffff); font-family: var(--hero-heading-font, var(--font-heading, var(--brand-font-heading, var(--brand_font_heading, 'Inter, system-ui, sans-serif')))) !important; text-shadow: 0 12px 28px rgba(var(--brand-text-rgb, 51, 51, 51), 0.45) !important; } .hero p, .hero .col-xl-7 p, .hero .col-lg-9 p { color: var(--accessible-on-primary, #ffffff); text-shadow: 0 8px 20px rgba(var(--brand-text-rgb, 51, 51, 51), 0.4) !important; } /* Hero subtitle sizing & rhythm (accessibility emphasis) */ .hero-subtitle { font-size: 1.8em !important; font-weight: 600 !important; line-height: 1.5 !important; } /* Form top subtitle paragraph (was inline) */ .hero-form-subtitle { font-size: 1.1em !important; margin-bottom: 0.25rem !important; } .hero-form-subtitle p { font-size: 1.1em !important; margin-bottom: 0 !important; color: #fff !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important; } /* Consent text aesthetic */ .hero-form-consent { margin: 0.1rem 0 0.75rem 0 !important; color: #fff !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.7) !important; display: flex !important; gap: 0.5rem !important; align-items: flex-start !important; } .hero-form-consent .form-check-input { margin-top: 0.35rem !important; } .hero-form-consent label { flex: 1 1 auto !important; } .hero-form-consent a { color: #fff !important; text-decoration: underline; } /* Form submit button aesthetics now handled in hero-form.css to avoid overrides */ /* Hero form container aesthetic for desktop & modal versions */ @media (min-width: 992px) { .hero-form-container { background: var(--custom-color-1, #349090) !important; border-radius: 15px !important; padding: 1rem 1rem 1.25rem 1rem !important; box-shadow: var(--hero-form-shadow) !important; overflow: hidden !important; } #hero-form-container { background: transparent !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; } } @media (max-width: 991px) { #hero-form-container { background: rgba(52, 144, 144, 0.95) !important; border-radius: 15px !important; padding: 1rem !important; box-shadow: var(--hero-form-shadow) !important; } #hero-form-container::before { content: ''; position: fixed; top:0; left:0; width:100vw; height:100vh; background: var(--hero-modal-backdrop); z-index: -1; } } /* Responsive hero typography scaling (visual) */ @media (max-width: 768px) { .hero h1 { line-height: 1.2; } .hero p { line-height: 1.4; } } /* Medium screens retain default hero typography sizing for better presence */ /* Alert appearance inside hero */ .hero-alert-success { background: rgba(40, 167, 69, 0.9) !important; color: #fff !important; border: none !important; border-radius: 6px !important; } .hero-alert-danger { background: rgba(220, 53, 69, 0.9) !important; color: #fff !important; border: none !important; border-radius: 6px !important; } /* CTA submit button aesthetics now centralized in hero-form.css to avoid duplicated declarations */ /* Close button & CTA visual treatment (colors, shadow) retained for consistency */ #hero-form-close { background: rgba(0,0,0,0.8); border: 2px solid #fff; color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.5); } #hero-form-close:hover { background: rgba(220, 53, 69, 0.9) !important; box-shadow: 0 4px 8px rgba(0,0,0,0.5) !important; } /* High-contrast hero button variant (restored production style) */ .hero .hero-contrast-btn, .hero .btn-hero-primary { background: var(--hero-button-base-bg) !important; color: var(--hero-button-base-text) !important; border: 3px solid var(--hero-button-base-bg) !important; box-shadow: var(--hero-button-ring-shadow); font-weight: 700 !important; font-size: 1.1rem !important; padding: 0.75rem 2rem !important; text-shadow: none !important; transition: all 0.3s ease; } .hero .hero-contrast-btn:hover, .hero .btn-hero-primary:hover { transform: translateY(-2px); box-shadow: var(--hero-button-ring-shadow-hover); } .hero .hero-contrast-btn:focus, .hero .btn-hero-primary:focus { outline: 3px solid #ffff00 !important; outline-offset: 2px; } /* Animation keyframes (purely visual transitions) */ @keyframes slideDown { from { opacity:0; transform:translateY(-20px);} to { opacity:1; transform:translateY(0);} } @keyframes slideUp { from { opacity:1; transform:translateY(0);} to { opacity:0; transform:translateY(-20px);} } @keyframes slideUpFromBottom { from { transform:translateY(100%);} to { transform:translateY(0);} } @keyframes slideDownToBottom { from { transform:translateY(0);} to { transform:translateY(100%);} } /* Emergency CTA force-show retains only visibility aspects; structural file handles positioning */ @media (max-width: 991px) { html body #hero-form-cta { opacity: 1; } }