/* Reset and Base Styles - Updated deployment pipeline test */ /* -- CRITICAL START -- */ /* Above-the-fold styles inlined in for first paint. * Keep this region <10 KB; everything below is loaded async. * CRO Phase 1 Task 9 — docs/superpowers/specs/2026-04-18-cro-overhaul-design.md §5.1 */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Brand Colors */ --primary-color: #D0021A; --primary-hover: #B0011A; --secondary-color: #023D7B; --secondary-hover: #012E5C; --success-color: #16a34a; --text-primary: #111827; --text-secondary: #6b7280; --text-help: #9CA3AF; --background-white: #ffffff; --background-gray: #f3f4f6; --border-color: #e5e7eb; /* Typography - Arial brand font family */ --font-family: Arial, sans-serif; --font-family-bold: 'Arial Black', Arial, sans-serif; --font-family-condensed: 'Arial Narrow', Arial, sans-serif; --font-size-base: 18px; --font-size-sm: 14px; --font-size-lg: 20px; --font-size-xl: 28px; --font-size-2xl: 36px; /* Spacing */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; /* Animation */ --transition-fast: 0.15s ease-in-out; --transition-base: 0.3s ease-in-out; --transition-slow: 0.5s ease-in-out; } /* Base Typography */ body { font-family: var(--font-family); font-size: var(--font-size-base); line-height: 1.5; color: var(--text-primary); background: var(--background-gray); min-height: 100vh; display: flex; flex-direction: column; margin: 0; padding: 0; } /* Background Image (Desktop Only) */ .page-background { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 1; /* Remove the overlay effect */ z-index: -1; min-height: 100vh; } /* Background Color Support */ .page-background-color { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -2; /* Behind the background image */ } /* Mobile Header Image */ .mobile-header-image { display: none; width: 100%; height: auto; overflow: hidden; position: relative; } .mobile-header-image img { width: 100%; height: auto; display: block; } /* Loading Step Styles */ .loading-step { text-align: center; padding: var(--spacing-2xl); color: var(--text-secondary); } .loading-spinner { width: 40px; height: 40px; border: 4px solid var(--border-color); border-top: 4px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto var(--spacing-lg); } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Container */ .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); overflow: hidden; /* Clearfix for floated children */ } /* Header */ .site-header { background: var(--background-white); border-bottom: 1px solid var(--border-color); padding: var(--spacing-md) 0; position: sticky; top: 0; z-index: 100; } .logo img { height: 40px; width: auto; } /* Main Content */ .main-content { flex: 1; display: block; /* Changed from flex to block for float layout */ padding: var(--spacing-xl) 0; min-height: 100vh; /* Ensure main content takes full viewport height */ } /* Survey Container */ .survey-container { background: var(--background-white); border-radius: 12px; max-width: 600px; width: 600px; /* Fixed width for floated positioning */ overflow: visible; transition: transform var(--transition-base); position: relative; z-index: 1; /* Ensure proper layering */ } /* Form Positioning */ .survey-position-center { margin: 0 auto; float: none; } .survey-position-left { float: left; margin: 0; margin-right: var(--spacing-xl); } .survey-position-right { float: right; margin: 0; margin-left: var(--spacing-xl); } .survey-container:hover { /* Box shadow removed */ } /* Progress Bar */ .progress-bar-container { padding: var(--spacing-lg); border-bottom: 1px solid var(--border-color); overflow: hidden; /* Clip progress bar content */ } .progress-bar { background: var(--background-gray); height: 8px; border-radius: 4px; overflow: hidden; margin-bottom: var(--spacing-sm); } .progress-fill { background: var(--primary-color); height: 100%; border-radius: 4px; transition: width var(--transition-slow); } .progress-text { font-size: var(--font-size-sm); color: var(--text-secondary); text-align: center; } /* Survey Content */ .survey-content { padding: var(--spacing-2xl); overflow: hidden; /* Clip content overflow while keeping shadow visible */ } /* Form Steps */ .form-step { animation: fadeIn var(--transition-base); } /* element fills — these must be inlined so the hero background * image renders at full viewport before the async stylesheet loads. * Without these, the inside falls through at its natural * size and the page appears to have no background. */ .page-background .page-background-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .page-background picture { position: absolute; inset: 0; width: 100%; height: 100%; } .mobile-header-image .mobile-header-img { width: 100%; height: auto; display: block; } /* CRO Phase 1 Task 5: briefing-as-runway. The first primer step renders * briefing HTML above the question. These rules must be inlined so the * briefing is readable on first paint (step 2 is the first visible content * after intro submit). */ .primer-briefing { margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(0, 0, 0, 0.08); font-size: 1rem; line-height: 1.6; } .primer-briefing .step-title, .primer-briefing h1, .primer-briefing h2, .primer-briefing h3 { margin-top: 0; margin-bottom: 1rem; } .primer-briefing p { margin: 0 0 1rem 0; } .primer-briefing p:last-child, .primer-briefing ul:last-child, .primer-briefing ol:last-child { margin-bottom: 0; } .primer-briefing ul, .primer-briefing ol { margin: 0.75rem 0 1rem 1.25rem; padding: 0; } .primer-briefing li { margin-bottom: 0.5rem; } .primer-briefing li:last-child { margin-bottom: 0; } /* -- CRITICAL END -- */ /* Contact Card Step Specific Styling */ .contact-card-content { margin-bottom: var(--spacing-xl); } .contact-card-actions { margin-top: var(--spacing-lg); } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Step Typography */ .step-title { font-family: "Impact", "Arial Black", "Helvetica Black", sans-serif; font-size: var(--font-size-2xl); font-weight: 900; color: var(--primary-color); margin-bottom: var(--spacing-md); text-align: center; text-transform: uppercase; } .step-subtitle { font-size: var(--font-size-lg); font-weight: 600; color: var(--text-primary); margin-bottom: var(--spacing-xl); text-align: center; } .step-question { font-size: var(--font-size-lg); font-weight: 700; color: var(--text-primary); margin-bottom: var(--spacing-xl); text-align: center; line-height: 1.4; } /* Form Elements */ .form-group { margin-bottom: var(--spacing-lg); } .form-label { display: block; font-size: var(--font-size-sm); font-weight: 500; color: var(--text-primary); margin-bottom: var(--spacing-xs); } .form-input { width: 100%; padding: var(--spacing-lg); font-size: var(--font-size-base); border: 2px solid var(--border-color); border-radius: 8px; transition: all var(--transition-fast); font-family: var(--font-family); line-height: 1.4; } .form-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(208, 2, 26, 0.1); } .form-help-text { font-size: var(--font-size-sm); color: var(--text-help); margin-top: var(--spacing-xs); line-height: 1.4; } .form-help-text a { color: var(--primary-color); text-decoration: none; } .form-help-text a:hover { text-decoration: underline; } /* Form Row Layout for Side-by-Side Fields */ .form-row { display: flex; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); } .form-col { flex: 1; min-width: 0; /* Prevents flex items from overflowing */ } /* Responsive adjustments for mobile */ @media (max-width: 768px) { .form-row { flex-direction: column; gap: 0; } .form-col { margin-bottom: var(--spacing-md); } .form-col:last-child { margin-bottom: 0; } } /* Buttons */ .btn { display: inline-block; padding: var(--spacing-md) var(--spacing-xl); font-size: var(--font-size-base); font-weight: 600; text-align: center; text-decoration: none; border: none; border-radius: 8px; cursor: pointer; transition: all var(--transition-fast); font-family: var(--font-family); position: relative; overflow: hidden; } .btn:before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255, 255, 255, 0.2); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; } .btn:active:before { width: 300px; height: 300px; } .btn-primary { background: var(--primary-color); color: white; } .btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3); } .btn-secondary { background: var(--secondary-color); color: white; } .btn-secondary:hover { background: var(--secondary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3); } .btn-outline { background: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); } .btn-outline:hover { background: var(--primary-color); color: white; transform: translateY(-1px); } .btn-full { width: 100%; } /* Single Button Step */ .single-button-step { text-align: center; } .single-button-container { margin-top: var(--spacing-xl); } .single-button-step .btn { font-size: var(--font-size-lg); padding: var(--spacing-lg) var(--spacing-2xl); min-height: 60px; } /* Yes/No Buttons */ .yes-no-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); } /* Radio Buttons */ .radio-group { display: flex; flex-direction: column; gap: var(--spacing-sm); } .radio-option { display: flex; align-items: center; justify-content: center; padding: var(--spacing-lg); border: 2px solid var(--border-color); border-radius: 8px; cursor: pointer; transition: all var(--transition-fast); text-align: center; min-height: 60px; } .radio-option:hover { border-color: var(--primary-color); background: rgba(220, 38, 38, 0.05); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2); } .radio-option.selected { border-color: var(--primary-color); background: var(--primary-color); color: white; } .radio-option.selected span { color: white; } .radio-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .radio-option span { font-size: var(--font-size-lg); font-weight: 600; color: var(--text-primary); text-align: center; width: 100%; } /* Checkbox Options - Same button style as radio */ .checkbox-group { display: flex; flex-direction: column; gap: var(--spacing-sm); } .checkbox-option { display: flex; align-items: center; justify-content: center; padding: var(--spacing-lg); border: 2px solid var(--border-color); border-radius: 8px; cursor: pointer; transition: all var(--transition-fast); text-align: center; min-height: 60px; } .checkbox-option:hover { border-color: var(--primary-color); background: rgba(220, 38, 38, 0.05); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2); } .checkbox-option.selected { border-color: var(--primary-color); background: var(--primary-color); color: white; } .checkbox-option.selected span { color: white; } .checkbox-option input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; } .checkbox-option span { font-size: var(--font-size-lg); font-weight: 600; color: var(--text-primary); text-align: center; width: 100%; } /* Donation Platform Help */ .donation-platform-help { margin-bottom: var(--spacing-lg); padding: var(--spacing-md); background: transparent; border-radius: 0; border-left: none; } .donation-platform-help .form-help-text { margin: 0; font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.5; } /* Donation Grid */ .donation-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-md); margin-bottom: var(--spacing-xl); max-width: 500px; margin-left: auto; margin-right: auto; } /* Mobile optimization */ @media (max-width: 768px) { .donation-grid { max-width: 100%; gap: var(--spacing-md); } .donation-amount { padding: var(--spacing-md); font-size: var(--font-size-base); } .donation-hero { min-height: 70px; padding: var(--spacing-md); } .donation-amount strong { font-size: var(--font-size-lg); } .donation-amount small { font-size: var(--font-size-sm); } } .donation-amount { padding: var(--spacing-md) var(--spacing-lg); font-size: var(--font-size-base); font-weight: 600; text-align: center; background: var(--primary-color); border: 2px solid var(--primary-color); border-radius: 8px; cursor: pointer; transition: all var(--transition-base); text-decoration: none; color: white; width: 100%; position: relative; overflow: hidden; box-shadow: 0 2px 4px rgba(220, 38, 38, 0.15); min-height: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .donation-amount:hover { background: var(--primary-hover); color: white; border-color: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3); } /* NEW: Clean, Professional Donation Button Styling */ .donation-hero { /* Hero button - balanced proportions with special styling */ padding: var(--spacing-md) var(--spacing-lg); font-size: var(--font-size-lg); background: linear-gradient(135deg, var(--primary-color), #B0011A); border: 3px solid #FFD700; box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3); position: relative; z-index: 10; margin: var(--spacing-sm) 0; min-height: 70px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .donation-hero:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(255, 215, 0, 0.6); background: linear-gradient(135deg, #B0011A, var(--primary-color)); } .donation-hero .button-badge { display: block; font-size: var(--font-size-sm); color: #FFD700; font-weight: 900; margin-bottom: var(--spacing-xs); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); letter-spacing: 0.5px; text-transform: uppercase; line-height: 1.2; } .donation-amount small { display: block; font-size: var(--font-size-sm); font-weight: 400; margin-top: var(--spacing-xs); opacity: 0.9; line-height: 1.3; } .donation-amount strong { display: block; font-size: var(--font-size-lg); margin: var(--spacing-xs) 0; line-height: 1.2; font-weight: 700; } .donation-amount .button-badge { display: block; font-size: var(--font-size-sm); font-weight: 700; margin-bottom: var(--spacing-xs); text-transform: uppercase; line-height: 1.2; letter-spacing: 0.5px; opacity: 0.9; } .donation-other { /* "Different amount" - styled as a button */ background: var(--background-white); color: var(--primary-color); border: 2px solid var(--primary-color); font-size: var(--font-size-base); font-weight: 600; padding: var(--spacing-md) var(--spacing-lg); text-decoration: none; text-align: center; border-radius: 8px; transition: all var(--transition-base); cursor: pointer; min-height: 60px; display: flex; align-items: center; justify-content: center; } .donation-other:hover { background: var(--primary-color); color: white; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3); } /* NEW: Psychological Elements Styling */ .donation-personalization { background: rgba(220, 38, 38, 0.05); border-left: 4px solid var(--primary-color); padding: var(--spacing-lg); margin: var(--spacing-xl) 0; border-radius: 0 12px 12px 0; box-shadow: 0 2px 8px rgba(220, 38, 38, 0.1); } .donation-step { text-align: center; } /* NEW: Flow-based donation step styling with proper spacing */ .donation-title { font-size: var(--font-size-2xl); font-weight: bold; color: var(--primary-color); text-align: center; margin-bottom: var(--spacing-lg); line-height: 1.2; } .donation-context { font-size: var(--font-size-lg); line-height: 1.6; margin-bottom: var(--spacing-lg); color: var(--text-primary); } .donation-user { font-size: var(--font-size-lg); line-height: 1.6; margin-bottom: var(--spacing-lg); color: var(--text-primary); font-weight: 500; } .donation-soft-ask { font-size: var(--font-size-lg); line-height: 1.6; margin-bottom: var(--spacing-md); color: var(--text-primary); } .donation-match { font-size: var(--font-size-lg); line-height: 1.6; margin-bottom: var(--spacing-lg); color: var(--primary-color); font-weight: 600; text-align: center; padding: var(--spacing-md); background: var(--background-gray); border-radius: 8px; } .donation-hard-ask { font-size: var(--font-size-lg); line-height: 1.4; margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); color: var(--primary-color); font-weight: bold; text-align: center; padding: var(--spacing-md); background: var(--background-gray); border: 2px solid var(--primary-color); border-radius: 8px; } .donation-narrative { margin-bottom: var(--spacing-2xl); line-height: 1.6; } .donation-narrative img { max-width: 200px; height: auto; border-radius: 8px; margin: 0 auto var(--spacing-lg); display: block; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .donation-psychology { font-style: italic; color: var(--text-secondary); margin: var(--spacing-sm) 0; } /* NEW: Social Proof and Urgency Elements */ .campaign-progress { background: var(--background-gray); border: 1px solid var(--border-color); border-radius: 12px; padding: var(--spacing-lg); margin: var(--spacing-xl) 0; text-align: center; } .progress-label { margin-bottom: var(--spacing-md); } .goal-amount { display: block; font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: var(--spacing-xs); } .progress-bar { background: var(--border-color); height: 12px; border-radius: 6px; overflow: hidden; margin: var(--spacing-md) 0; } .progress-fill { background: linear-gradient(90deg, var(--primary-color), #FFD700); height: 100%; border-radius: 6px; transition: width var(--transition-slow); } /* Progress bar styling is handled above */ /* Donation narrative styling is handled above */ /* Narrative Step Styling */ .briefing-content { /* Remove double-boxing - let content flow naturally */ padding: var(--spacing-lg) 0; margin: var(--spacing-lg) 0; line-height: 1.7; font-size: var(--font-size-base); color: var(--text-primary); text-align: left; } .briefing-content strong { font-weight: 700; color: var(--text-primary); } .briefing-content em { font-style: italic; color: var(--text-secondary); font-weight: 500; } .briefing-content br { margin-bottom: var(--spacing-sm); } .briefing-content br + br { margin-bottom: var(--spacing-md); } .briefing-content p { margin: 0 0 var(--spacing-md); } .briefing-content p:last-child { margin-bottom: 0; } .briefing-content ul, .briefing-content ol { margin: 0 0 var(--spacing-md); padding-left: 1.5em; } .briefing-content li { margin: 0 0 var(--spacing-xs); line-height: 1.6; } .briefing-content li:last-child { margin-bottom: 0; } .donation-narrative { line-height: 1.8; margin-bottom: var(--spacing-lg); } .donation-narrative strong { font-weight: 700; color: var(--text-primary); } .donation-narrative em { font-style: italic; color: var(--text-secondary); font-weight: 500; } .donation-narrative a { color: var(--primary-color); text-decoration: underline; } .donation-narrative a:hover { color: var(--primary-hover); } .donation-narrative img { display: inline-block; vertical-align: top; margin-right: var(--spacing-sm); border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .donation-narrative img.inline-headshot { width: 40px; height: 40px; object-fit: cover; border: 2px solid var(--border-color); } .donation-highlight { font-weight: 700; color: var(--primary-color); } /* Footer */ .site-footer { background: var(--background-white); border-top: 1px solid var(--border-color); padding: var(--spacing-xl) 0; margin-top: auto; /* Push footer to bottom */ } /* Add bottom margin only when donation ticker is active */ .donation-ticker-active .site-footer { margin-bottom: 70px; /* Space for donation stream ticker */ } .footer-content { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.6; max-width: 800px; /* Limit line length for readability */ margin: 0 auto; padding: 0 var(--spacing-lg); /* Add horizontal padding to prevent text from touching viewport edges */ } .footer-content p { margin-bottom: var(--spacing-md); } .footer-disclaimer { font-weight: 500; color: var(--text-primary); } .footer-address { display: inline-block; margin-top: var(--spacing-xs); font-style: normal; } /* FECA Compliance - Paid For Disclaimer */ .footer-paid-for { font-weight: 600; color: var(--text-primary); font-size: 12px; /* FECA requirement */ line-height: 1.4; background: var(--background-gray); border: 1px solid var(--border-color); padding: var(--spacing-md); border-radius: 6px; margin: var(--spacing-lg) 0; text-align: center; } .footer-photo-credit { font-size: var(--font-size-sm); color: var(--text-secondary); text-align: center; margin-top: var(--spacing-md); font-style: italic; } .footer-links { margin-top: var(--spacing-lg); padding-top: var(--spacing-lg); border-top: 1px solid var(--border-color); text-align: center; } .footer-links a { color: var(--primary-color); text-decoration: none; font-weight: 500; } .footer-links a:hover { text-decoration: underline; } .footer-links .separator { margin: 0 var(--spacing-md); color: var(--border-color); } /* Step Disclaimer */ .step-disclaimer { padding: var(--spacing-md) var(--spacing-2xl); border-top: 1px solid var(--border-color); background: var(--background-gray); border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } .step-disclaimer-text { font-size: var(--font-size-sm); color: var(--text-secondary); text-align: center; line-height: 1.4; margin: 0; } /* Responsive Design */ @media (max-width: 768px) { body { background: var(--background-white); } .main-content { padding: 0; align-items: flex-start; width: 100%; } .survey-container { max-width: 100%; width: 100%; border-radius: 0; box-shadow: none; margin: 0; min-height: 100vh; float: none; /* Reset float on mobile */ } .survey-container:hover { box-shadow: none; } .survey-content { padding: var(--spacing-lg); } .step-disclaimer { padding: var(--spacing-md) var(--spacing-lg); } .yes-no-buttons { grid-template-columns: 1fr; } .donation-grid { grid-template-columns: 1fr; } .step-title { font-size: var(--font-size-2xl); } .step-question { font-size: var(--font-size-base); } /* Hide desktop background on mobile */ .page-background { display: none; } /* Show mobile header image */ .mobile-header-image { display: block; } /* Footer mobile spacing */ .footer-content { padding: 0 var(--spacing-lg); } /* Adjust footer margin for tablet ticker height */ .donation-ticker-active .site-footer { margin-bottom: 60px; /* Space for 50px ticker + minimal padding */ } } @media (max-width: 480px) { /* Adjust footer margin for mobile ticker height */ .donation-ticker-active .site-footer { margin-bottom: 55px; /* Space for 45px ticker + minimal padding */ } .donation-grid { grid-template-columns: 1fr; } .container { padding: 0; max-width: 100%; } .survey-content { padding: var(--spacing-md); } .main-content { width: 100%; } .survey-container { width: 100%; max-width: 100%; } } /* Loading State */ .loading { display: flex; justify-content: center; align-items: center; min-height: 200px; } .loading:after { content: ''; width: 40px; height: 40px; border: 4px solid var(--border-color); border-top-color: var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Error State */ .error-message { background: #fef2f2; border: 1px solid #fecaca; color: #d0021a; padding: var(--spacing-md); border-radius: 8px; margin-bottom: var(--spacing-lg); font-size: var(--font-size-sm); } /* Success State */ .success-message { background: #f0fdf4; border: 1px solid #bbf7d0; color: #16a34a; padding: var(--spacing-md); border-radius: 8px; margin-bottom: var(--spacing-lg); font-size: var(--font-size-sm); } /* Accessibility */ .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; } /* Focus States */ *:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; } /* Clearfix Utility */ .clearfix::after { content: ''; display: table; clear: both; } /* NEW: Donation Stream Tickers */ /* Fixed Bottom Streaming Ticker */ .donation-stream-ticker { position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); color: white; font-family: 'Impact', 'Arial Black', sans-serif; font-size: 24px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.5px; overflow: hidden; white-space: nowrap; z-index: 1000; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3); border-top: 3px solid #fbbf24; } .donation-stream-ticker .stream-content { display: inline-block; padding: 18px 0; animation: streamScroll 180s linear infinite; line-height: 1.2; } @keyframes streamScroll { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } } .donation-stream-ticker .donation-item { margin-right: 80px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); display: inline-block; } /* Contextual Donation Ticker (Above Buttons) */ .contextual-donation-ticker { background: linear-gradient(135deg, #059669 0%, #10b981 100%); color: white; font-family: 'Impact', 'Arial Black', sans-serif; font-size: 16px; font-weight: 900; text-transform: none; letter-spacing: 0.2px; padding: 10px 16px; margin: 12px 0; border-radius: 6px; text-align: center; min-height: 40px; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 12px rgba(5, 150, 105, 0.4); border: 2px solid #34d399; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); transition: opacity 0.3s ease-in-out; position: relative; overflow: hidden; } /* Loading state for ticker */ .donation-stream-ticker .stream-content.loading { text-align: center; opacity: 0.8; font-style: italic; } /* Alternative color schemes for variety */ .donation-stream-ticker.red-theme { background: linear-gradient(135deg, #d0021a 0%, #d0021a 100%); } .donation-stream-ticker.yellow-theme { background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); color: #000; } .donation-stream-ticker.yellow-theme .donation-item { text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5); } /* Responsive Design */ @media (max-width: 768px) { .donation-stream-ticker { height: 50px; font-size: 18px; } .donation-stream-ticker .stream-content { padding: 14px 0; } .contextual-donation-ticker { font-size: 14px; padding: 8px 12px; min-height: 36px; } } @media (max-width: 480px) { .donation-stream-ticker { height: 45px; font-size: 16px; } .donation-stream-ticker .stream-content { padding: 12px 0; } .contextual-donation-ticker { font-size: 12px; padding: 6px 10px; min-height: 32px; } } /* Print Styles */ @media print { .site-header, .site-footer, .page-background { display: none; } .main-content { padding: 0; } .survey-container { border: 1px solid var(--border-color); } } /* ─────────────────────────────────────────────────────────────── * * Primer briefing (CRO Phase 1, Task 6): renders inline above the * primer question when content.briefing is set. Keeps the briefing * → question → tap flow on a single screen (no "Continue" button). * See docs/superpowers/specs/2026-04-18-cro-overhaul-design.md §5.4 * ─────────────────────────────────────────────────────────────── */ /* .primer-briefing, .page-background-img, .page-background picture, and * .mobile-header-image styles moved into the CRITICAL region above so they * inline in the and render correctly on first paint. See Phase 2b * CRO hotfix 2026-04-19. */ /* ─────────────────────────────────────────────────────────────── * * A2P mobile-only intro mode (CRO Phase 2 Task 5). * Body gains .intro-mobile-only when the housefile donor is missing * a mobile number. Hide name + email fields; keep mobile + TCPA only. * ─────────────────────────────────────────────────────────────── */ body.intro-mobile-only .form-step[data-step-id="intro"] .field-firstname, body.intro-mobile-only .form-step[data-step-id="intro"] .field-lastname, body.intro-mobile-only .form-step[data-step-id="intro"] .field-email { display: none; } body.intro-mobile-only .form-step[data-step-id="intro"] .intro-title::before { content: "Confirm your mobile number to continue — "; display: block; font-size: 0.85em; color: #6b7280; font-weight: 400; margin-bottom: 6px; }