/* ========================================================================== LES MOISSONNEURS - GLOBAL STYLES & PAGE SPECIFICS ========================================================================== */ /* variables.css, layout.css, and components.css are loaded via separate tags in each HTML page's (before this file) so the browser can fetch them in parallel instead of via a serial @import chain. */ /* ========================================================================== GOOGLE FONTS IMPORT ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap'); /* ========================================================================== HERO SECTIONS ========================================================================== */ /* Home Hero */ .hero-home { position: relative; min-height: 90vh; display: flex; align-items: center; padding-top: calc(var(--header-height) + var(--space-3xl)); padding-bottom: var(--space-4xl); background-color: var(--bg-primary); overflow: hidden; } .hero-home-bg { position: absolute; inset: 0; background-image: var(--gradient-hero-overlay), url('../assets/images/gospelness-hero.jpg'); background-size: cover; background-position: center top; opacity: 0.45; filter: saturate(1.2); transform: scale(1.02); transition: transform 10s ease; z-index: 0; pointer-events: none; } .hero-home:hover .hero-home-bg { transform: scale(1.05); } .hero-content { position: relative; z-index: 2; max-width: 860px; } .hero-badge { display: inline-flex; align-items: center; gap: var(--space-xs); background: rgba(255, 215, 0, 0.12); border: 1px solid var(--color-border-gold); color: var(--color-accent-gold); font-family: var(--font-heading); font-size: 0.85rem; font-weight: var(--fw-bold); padding: 0.4rem 1rem; border-radius: var(--radius-full); margin-bottom: var(--space-lg); backdrop-filter: blur(8px); } .hero-title { font-family: var(--font-heading); font-size: clamp(2.5rem, 5.5vw, 4.25rem); font-weight: var(--fw-black); line-height: 1.1; color: var(--color-white); margin-bottom: var(--space-lg); letter-spacing: -0.02em; } .hero-title-highlight { color: #f59e0b; /* Fallback for browsers with clipping issues */ background: linear-gradient(135deg, #ffd700 0%, #f59e0b 100%); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; display: inline-block; } .hero-description { font-size: clamp(1.1rem, 2vw, 1.25rem); color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--space-2xl); max-width: 680px; } .hero-actions { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; } /* Events Hero & Background Video */ .hero-events { position: relative; min-height: 88vh; display: flex; align-items: center; justify-content: center; text-align: center; padding-top: calc(var(--header-height) + var(--space-3xl)); padding-bottom: var(--space-4xl); overflow: hidden; } .hero-events-video-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; pointer-events: none; } .hero-video-bg, .hero-events-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; pointer-events: none; background: #0F0F12; } .hero-events-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 15, 18, 0.5) 0%, rgba(15, 15, 18, 0.72) 40%, rgba(15, 15, 18, 0.9) 80%, #0F0F12 100%), radial-gradient(circle at 50% 40%, rgba(139, 30, 45, 0.3) 0%, rgba(15, 15, 18, 0.7) 85%); z-index: 1; pointer-events: none; } .hero-events-bg { position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(15, 15, 18, 0.4) 0%, rgba(15, 15, 18, 0.85) 60%, #0F0F12 100%), url('../assets/images/gospelness-hero.jpg'); background-size: cover; background-position: center 25%; opacity: 0.65; z-index: 0; pointer-events: none; } .events-hero-content { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; } .event-theme-tag { display: inline-block; font-family: var(--font-serif); font-size: clamp(1.2rem, 2.5vw, 1.75rem); font-weight: var(--fw-bold); color: var(--color-accent-gold); letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: var(--space-xs); text-shadow: 0 0 20px rgba(255, 215, 0, 0.6); } .event-hero-title { font-family: var(--font-heading); font-size: clamp(3rem, 7vw, 5.5rem); font-weight: var(--fw-black); letter-spacing: -0.02em; line-height: 1; color: var(--color-white); margin-bottom: var(--space-md); text-transform: uppercase; } .event-hero-title span { color: #f59e0b; /* Fallback for browsers with clipping issues */ background: linear-gradient(135deg, #ffd700 0%, #f59e0b 100%); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; display: inline-block; } /* Bulletproof Cross-Browser Text Gradients */ .text-gradient-gold, .brand-name-gold, .gold-text { color: #f59e0b; /* Fallback for browsers with clipping issues */ background: linear-gradient(135deg, #ffd700 0%, #f59e0b 100%); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; display: inline-block; } .event-meta-badges { display: flex; align-items: center; justify-content: center; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-2xl); } .meta-badge { display: inline-flex; align-items: center; gap: var(--space-xs); background: rgba(26, 26, 34, 0.8); border: 1px solid var(--color-border-gold); padding: 0.5rem 1.1rem; border-radius: var(--radius-full); font-size: 0.9rem; font-weight: var(--fw-semibold); color: var(--color-white); backdrop-filter: blur(10px); } .meta-badge-icon { color: var(--color-accent-gold); } /* ========================================================================== EVENTBRITE INLINE & MODAL WIDGET CONTAINERS ========================================================================== */ #tickets-checkout, #tickets, #billets, .embedded-checkout-section, .eventbrite-card-wrapper, .checkout-section-wrapper, #eventbrite-widget-container, #eventbrite-inline-container { scroll-margin-top: 100px; } .checkout-section-wrapper, .embedded-checkout-section, .eventbrite-card-wrapper { background: radial-gradient(circle at center, rgba(139, 30, 45, 0.2) 0%, #0F0F12 100%); border-radius: var(--radius-xl); border: 1px solid var(--color-border-gold); padding: var(--space-3xl); box-shadow: var(--shadow-lg); } .eventbrite-widget-container, .tickets-checkout-wrapper { width: 100% !important; max-width: 100% !important; overflow: hidden !important; border-radius: 16px !important; box-sizing: border-box !important; } .eventbrite-widget-container iframe, #eventbrite-widget-container iframe { width: 100% !important; min-height: 480px !important; border: none !important; border-radius: 12px !important; display: block !important; } #eventbrite-widget-container, #eventbrite-inline-container { min-height: 480px; width: 100%; background: #1A1A22; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; margin-top: var(--space-md); } #eventbrite-widget-container iframe, #eventbrite-inline-container iframe, .eventbrite-iframe { width: 100% !important; min-width: 100% !important; min-height: 480px; border: none; border-radius: var(--radius-lg); } .external-checkout-action { text-align: center; margin: var(--space-lg) auto; } .btn-external-eb { font-size: 0.95rem; padding: 0.85rem 1.75rem; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius-full); border: 1.5px solid var(--color-accent-gold); color: var(--color-accent-gold); text-decoration: none; font-weight: var(--fw-bold); transition: all var(--transition-base); } .btn-external-eb:hover { background: var(--color-accent-gold); color: #0F0F12; transform: translateY(-2px); box-shadow: var(--shadow-gold); } .eb-loader-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-md); padding: var(--space-2xl); text-align: center; } .spinner { width: 44px; height: 44px; border: 3px solid rgba(255, 215, 0, 0.2); border-top-color: var(--color-accent-gold); border-radius: var(--radius-full); animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Fallback Ticket Modal Dialog */ .custom-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: var(--space-md); opacity: 0; transition: opacity var(--transition-base); } .custom-modal-backdrop.active { display: flex; opacity: 1; } .custom-modal-content { background: #1A1A24; border: 1px solid var(--color-accent-gold); border-radius: var(--radius-xl); max-width: 580px; width: 100%; padding: var(--space-2xl); position: relative; box-shadow: var(--shadow-gold-heavy); animation: modal-pop 0.3s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes modal-pop { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } .modal-close-btn { position: absolute; top: var(--space-md); right: var(--space-md); width: 36px; height: 36px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; color: var(--color-white); transition: background var(--transition-fast); } .modal-close-btn:hover { background: rgba(255, 255, 255, 0.2); } /* ========================================================================== DONATION SECTION, PILLS & WIDGET CONTAINER ========================================================================== */ .donation-section { scroll-margin-top: 100px; position: relative; overflow: hidden; } .donation-section::before { content: ''; position: absolute; top: 20%; left: 50%; transform: translateX(-50%); width: 600px; height: 350px; background: radial-gradient(circle, rgba(229, 169, 60, 0.08) 0%, rgba(139, 30, 45, 0.05) 50%, transparent 70%); pointer-events: none; z-index: 0; } .donation-card-wrapper { position: relative; z-index: 1; background: linear-gradient(180deg, #1C1B24 0%, #13131A 100%); border: 1.5px solid rgba(229, 169, 60, 0.28); border-radius: var(--radius-2xl); padding: var(--space-2xl); max-width: 760px; margin: 0 auto; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 30px rgba(229, 169, 60, 0.06); text-align: center; } .donation-frequency-toggle { display: inline-flex; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-full); padding: 4px; margin: 0 auto var(--space-xl) auto; gap: 4px; } .freq-btn { background: transparent; border: none; color: var(--color-text-muted); font-size: 0.92rem; font-weight: var(--fw-semibold); padding: 0.5rem 1.35rem; border-radius: var(--radius-full); cursor: pointer; transition: all var(--transition-fast); } .freq-btn:hover { color: var(--color-white); } .freq-btn.active { background: var(--gradient-gold); color: #0F0F12; font-weight: var(--fw-bold); box-shadow: 0 2px 10px rgba(229, 169, 60, 0.35); } .donation-amounts-block { margin-bottom: var(--space-xl); } .donation-amounts-label { font-size: 0.85rem; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent-gold); margin-bottom: var(--space-md); } .donation-pills-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-bottom: var(--space-md); } .donation-pill { background: rgba(255, 255, 255, 0.04); border: 1.5px solid rgba(229, 169, 60, 0.35); border-radius: var(--radius-full); color: var(--color-white); font-family: var(--font-heading); font-size: 1.15rem; font-weight: var(--fw-bold); padding: 0.65rem 1.45rem; cursor: pointer; transition: all var(--transition-fast); user-select: none; } .donation-pill:hover { border-color: var(--color-accent-gold); background: rgba(229, 169, 60, 0.12); transform: translateY(-2px); } .donation-pill.active { background: var(--gradient-gold); border-color: var(--color-accent-gold); color: #0F0F12; box-shadow: var(--shadow-gold); transform: translateY(-2px); } .donation-custom-wrap { display: flex; justify-content: center; margin-top: var(--space-sm); margin-bottom: var(--space-sm); animation: modal-pop 0.2s ease forwards; } .custom-input-box { display: inline-flex; align-items: center; background: rgba(0, 0, 0, 0.5); border: 1.5px solid var(--color-accent-gold); border-radius: var(--radius-full); padding: 0.45rem 1.25rem; box-shadow: 0 0 16px rgba(229, 169, 60, 0.2); } .currency-symbol { color: var(--color-accent-gold); font-weight: var(--fw-bold); font-size: 1.25rem; margin-right: 0.35rem; } .donation-custom-input { background: transparent; border: none; color: var(--color-white); font-size: 1.15rem; font-weight: var(--fw-bold); width: 100px; outline: none; font-family: var(--font-heading); } .currency-code { color: var(--color-text-muted); font-size: 0.85rem; font-weight: var(--fw-semibold); margin-left: 0.35rem; } /* Embedded Donation Widget Container */ .donation-embed-container { width: 100%; max-width: 640px; margin: 0 auto var(--space-xl) auto; min-height: 520px; border-radius: 12px; overflow: hidden; background: #111116; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.6); } .donation-embed-container iframe, .donation-iframe { width: 100%; height: 100%; min-height: 520px; border: none; display: block; } /* Interac e-Transfer & Security Box */ .etransfer-box { background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(229, 169, 60, 0.22); border-radius: var(--radius-xl); padding: var(--space-xl) var(--space-lg); margin-top: var(--space-lg); text-align: center; } .etransfer-header { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: var(--space-xs); } .etransfer-icon { font-size: 1.35rem; } .etransfer-title { font-family: var(--font-heading); font-size: 1.15rem; color: var(--color-white); margin: 0; } .etransfer-desc { font-size: 0.92rem; color: var(--color-text-muted); margin-bottom: var(--space-md); max-width: 520px; margin-left: auto; margin-right: auto; } .etransfer-action-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: var(--space-md); } .etransfer-email { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.15); padding: 0.55rem 1.1rem; border-radius: var(--radius-md); color: var(--color-accent-gold); font-family: monospace; font-size: 0.95rem; font-weight: var(--fw-bold); word-break: break-all; } .copy-etransfer-btn { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; } .copy-etransfer-btn .copied-tooltip { position: absolute; top: -34px; left: 50%; transform: translateX(-50%) translateY(4px); background: var(--color-accent-gold); color: #0F0F12; font-size: 0.75rem; font-weight: var(--fw-bold); padding: 0.25rem 0.6rem; border-radius: var(--radius-sm); opacity: 0; pointer-events: none; transition: all var(--transition-fast); white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } .copy-etransfer-btn.copied .copied-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); } .donation-guarantee-note { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.4rem; font-size: 0.82rem; color: var(--color-text-muted); line-height: 1.4; margin-top: var(--space-xs); } .dot-separator { color: var(--color-accent-gold); } /* Donation Modal Content */ .donation-modal-content { max-width: 620px; text-align: center; max-height: 90vh; overflow-y: auto; } .modal-header-block { margin-bottom: var(--space-lg); } .modal-header-block .modal-title { font-family: var(--font-heading); font-size: 1.5rem; color: var(--color-white); margin-top: var(--space-xs); margin-bottom: var(--space-xs); } .modal-header-block .modal-subtitle { font-size: 0.92rem; color: var(--color-text-muted); } /* ========================================================================== VENUE & LOGISTICS ========================================================================== */ .venue-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; } .map-frame-wrapper { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--color-border-gold); box-shadow: var(--shadow-md); height: 380px; } .map-frame-wrapper iframe { width: 100%; height: 100%; border: 0; } .venue-details-list { display: flex; flex-direction: column; gap: var(--space-lg); } .venue-detail-card { display: flex; align-items: flex-start; gap: var(--space-md); background: var(--color-bg-card); padding: var(--space-lg); border-radius: var(--radius-lg); border: 1px solid var(--color-border); } .venue-detail-icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: rgba(139, 30, 45, 0.4); border: 1px solid var(--color-border-gold); color: var(--color-accent-gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .venue-detail-title { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: 1.05rem; color: var(--color-white); margin-bottom: var(--space-2xs); } .venue-detail-text { color: var(--color-text-muted); font-size: 0.9rem; } /* ========================================================================== ANIMATIONS & EFFECTS ========================================================================== */ .fade-in-up { opacity: 1; transform: translateY(0); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .js-loaded .fade-in-up:not(.visible) { opacity: 0; transform: translateY(20px); } .js-loaded .fade-in-up.visible { opacity: 1; transform: translateY(0); } .gold-glow { filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.4)); } /* ========================================================================== LEGAL PAGES (Terms & Privacy Policy) ========================================================================== */ .legal-header-hero { padding-top: calc(var(--header-height) + 3rem); padding-bottom: 2.5rem; text-align: center; background: radial-gradient(circle at 50% 0%, rgba(139, 30, 45, 0.25) 0%, rgba(15, 15, 18, 0) 70%); border-bottom: 1px solid var(--color-border-subtle); } .legal-body-section { padding: 3.5rem 0 5rem; } .legal-article-container { max-width: 840px; margin: 0 auto; } .legal-card { background: var(--color-bg-card); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); padding: 2.25rem; margin-bottom: 2rem; transition: border-color var(--transition-base); } .legal-card:hover { border-color: rgba(229, 169, 60, 0.25); } .legal-card-title { font-family: var(--font-heading); font-size: 1.35rem; font-weight: var(--fw-bold); color: var(--color-white); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.6rem; } .legal-card p { color: #cfcfe0; font-size: 0.98rem; line-height: 1.75; margin-bottom: 1rem; } .legal-card p:last-child { margin-bottom: 0; } .legal-list { list-style: none; padding: 0; margin: 1rem 0; } .legal-list li { position: relative; padding-left: 1.5rem; margin-bottom: 0.75rem; color: #cfcfe0; font-size: 0.95rem; line-height: 1.65; } .legal-list li::before { content: "•"; position: absolute; left: 0.4rem; color: var(--color-accent-gold); font-size: 1.2rem; line-height: 1; } .legal-highlight-box { background: rgba(229, 169, 60, 0.08); border-left: 3px solid var(--color-accent-gold); padding: 1.1rem 1.4rem; border-radius: 0 var(--radius-md) var(--radius-md) 0; margin: 1.25rem 0; } .legal-highlight-box p { color: #fff; font-size: 0.95rem; margin-bottom: 0; } /* ========================================================================== RESPONSIVE MEDIA QUERIES (STYLE.CSS) ========================================================================== */ @media (max-width: 992px) { .hero-home { min-height: auto; padding-top: calc(var(--header-height) + 2rem); padding-bottom: 3.5rem; } .hero-events { min-height: auto; padding-top: calc(var(--header-height) + 2rem); padding-bottom: 3.5rem; } .venue-grid { grid-template-columns: 1fr; gap: var(--space-xl); } .map-frame-wrapper { height: 320px; } .legal-header-hero { padding-top: calc(var(--header-height) + 2rem); } .legal-body-section { padding: 2.5rem 0 4rem; } } @media (max-width: 600px) { .hero-home, .hero-events { padding-top: calc(var(--header-height) + 1.25rem); padding-bottom: 2.5rem; } .hero-content, .events-hero-content { width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; } .hero-title { font-size: clamp(1.85rem, 7.5vw, 2.75rem); margin-bottom: var(--space-md); } .event-hero-title { font-size: clamp(2.2rem, 9vw, 3.4rem); margin-bottom: var(--space-sm); } .hero-description { font-size: 0.98rem; line-height: 1.6; margin-bottom: 1.5rem; } .hero-badge { font-size: 0.78rem; padding: 0.35rem 0.85rem; margin-bottom: 1rem; white-space: normal; text-align: center; } .event-theme-tag { font-size: 1.05rem; letter-spacing: 0.15em; } .event-meta-badges { flex-direction: column; gap: 0.5rem; width: 100%; } .event-meta-badge { width: 100%; justify-content: center; font-size: 0.85rem; padding: 0.55rem 0.85rem; } .hero-actions { flex-direction: column; width: 100%; align-items: stretch; gap: 0.75rem; } .hero-actions .btn { width: 100%; white-space: normal; text-align: center; justify-content: center; } .map-frame-wrapper { height: 260px; } .venue-detail-card { padding: var(--space-md); } .legal-card { padding: 1.5rem 1.25rem; margin-bottom: 1.25rem; } .legal-card-title { font-size: 1.2rem; } } /* Mobile Hero Video & Layout Optimization (<= 768px) */ @media (max-width: 768px) { .hero-video-bg, .hero-events-video { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; z-index: 0 !important; display: block !important; pointer-events: none !important; } .hero-events-video-wrap { background-color: #0F0F12; background-image: linear-gradient(180deg, rgba(15, 15, 18, 0.45) 0%, rgba(15, 15, 18, 0.75) 45%, rgba(15, 15, 18, 0.92) 80%, #0F0F12 100%), url('../assets/images/video-fallback.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; } } /* ========================================================================== HEADER BRAND LOGO & SILHOUETTE GLOW ========================================================================== */ /* Logo wrapper / container: no box, no border, transparent background */ #header-logo, .brand-logo, .logo-wrapper, .brand-emblem, .brand-logo-img-wrapper { background: transparent !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; } /* Parent logo container: clean flex alignment with 0.75rem gap */ .brand-logo, #header-logo { display: flex; align-items: center; gap: 0.75rem; } .logo-wrapper, .brand-emblem, .brand-logo-img-wrapper { height: 80px; width: 80px; min-width: 80px; display: flex; align-items: center; justify-content: center; overflow: visible; transition: width var(--transition-base), height var(--transition-base); } /* Logo graphic: 80px square dimensions, object-fit contain, and soft layered golden silhouette drop-shadow */ .logo-img, .logo-icon, .brand-logo img, .brand-emblem img, .brand-logo-img-wrapper img, #header-logo img, .logo-wrapper img { height: 80px; width: 80px; object-fit: contain; display: block; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6)) drop-shadow(0 0 14px rgba(255, 190, 0, 0.35)); transition: filter var(--transition-base), transform var(--transition-base), width var(--transition-base), height var(--transition-base); } .brand-logo:hover .logo-img, .brand-logo:hover .logo-icon, .brand-logo:hover img, #header-logo:hover img { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.85)) drop-shadow(0 0 20px rgba(255, 190, 0, 0.55)); transform: scale(1.03); } @media (max-width: 992px) { .logo-wrapper, .brand-emblem, .brand-logo-img-wrapper { height: 64px; width: 64px; min-width: 64px; } .logo-img, .logo-icon, .brand-logo img, .brand-emblem img, .brand-logo-img-wrapper img, #header-logo img, .logo-wrapper img { height: 64px; width: 64px; } } /* Spotlight Mini Countdown Component Base */ .spotlight-countdown-preview { background: rgba(15, 15, 18, 0.7); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: var(--radius-lg); padding: 1.5rem 1.25rem; text-align: center; width: 100%; max-width: 100%; box-sizing: border-box; } .spotlight-countdown-title { font-family: var(--font-serif); font-size: 0.95rem; color: var(--color-accent-gold); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1rem; } .spotlight-countdown-container { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.4rem !important; flex-wrap: nowrap !important; width: 100% !important; } .spotlight-countdown-preview .countdown-box { min-width: 0 !important; flex: 1 1 0 !important; padding: 0.75rem 0.35rem !important; text-align: center !important; border-radius: var(--radius-md) !important; } .spotlight-countdown-preview .countdown-value { font-size: clamp(1.25rem, 2vw, 1.75rem) !important; line-height: 1.1 !important; } .spotlight-countdown-preview .countdown-label { font-size: 0.65rem !important; letter-spacing: 0.04em !important; white-space: nowrap !important; } .spotlight-countdown-preview .countdown-divider { font-size: 1.2rem !important; margin: 0 -0.15rem !important; align-self: center !important; } @media (max-width: 768px) { /* Outer Section Wrapper Protection: 1rem padding so borders never touch phone edges */ .container, .container-narrow, .container-wide { width: 100% !important; max-width: 100% !important; padding-left: 1rem !important; padding-right: 1rem !important; box-sizing: border-box !important; margin-left: auto !important; margin-right: auto !important; } section, .section { width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; box-sizing: border-box !important; } .logo-wrapper, .brand-emblem, .brand-logo-img-wrapper { height: 56px; width: 56px; min-width: 56px; } .logo-img, .logo-icon, .brand-logo img, .brand-emblem img, .brand-logo-img-wrapper img, #header-logo img, .logo-wrapper img { height: 56px; width: 56px; } .brand-logo, #header-logo { gap: 0.65rem; } /* Mobile Section Introductions & Headings */ .section-header, .section-title, .section-subtitle, .volunteer-intro, .hero-description, .section-tag { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } /* Fluid Width & Typography for Flagship Event Spotlight Card */ .flagship-card, .flagship-card *, .spotlight-card, .spotlight-card * { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .flagship-card, .flagship-content, .spotlight-card, .spotlight-inner, .spotlight-content, .spotlight-text-wrapper, .spotlight-countdown-preview, .event-spotlight, .flagship-card .badge, .spotlight-card .badge, .spotlight-card .section-tag, .flagship-card h2, .spotlight-card h2, .spotlight-inner h2, .spotlight-title, .flagship-card h3, .spotlight-card h3, .flagship-card p, .spotlight-card p, .spotlight-details, .spotlight-headliners { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; white-space: normal !important; /* Allow all text to wrap cleanly */ overflow-wrap: break-word !important; word-break: break-word !important; text-align: center !important; } /* Ensure Spotlight Card Container Breathes */ .flagship-card, .event-spotlight, .spotlight-card, .spotlight-wrapper { width: 100% !important; max-width: 100% !important; padding: 1.5rem 1rem !important; /* Guarantees breathing room on left & right */ margin: 1.5rem auto 0 auto !important; border-radius: var(--radius-xl) !important; box-sizing: border-box !important; overflow: hidden !important; text-align: center !important; } .spotlight-inner { display: flex !important; flex-direction: column !important; grid-template-columns: 1fr !important; text-align: center !important; gap: var(--space-xl) !important; padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; } .spotlight-inner>div { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Adjust Typography Sizes for Mobile Viewports */ .flagship-card h2, .spotlight-title, .spotlight-card h2, .spotlight-inner h2 { font-size: clamp(1.35rem, 5.5vw, 1.8rem) !important; line-height: 1.25 !important; padding: 0 0.25rem !important; margin-bottom: 0.6rem !important; font-weight: 800 !important; letter-spacing: -0.01em !important; } .spotlight-details { font-size: 0.95rem !important; line-height: 1.4 !important; margin-bottom: 0.6rem !important; padding: 0 0.25rem !important; } .spotlight-headliners { font-size: 0.88rem !important; line-height: 1.5 !important; margin-bottom: 1.25rem !important; padding: 0 0.25rem !important; } .flagship-card .badge-spotlight, .spotlight-card .badge-spotlight, .spotlight-card .section-tag { font-size: 0.75rem !important; padding: 0.35rem 0.75rem !important; white-space: normal !important; margin-bottom: 0.75rem !important; } .spotlight-countdown-preview { padding: 1rem 0.5rem !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .spotlight-inner .section-tag, .flagship-card .section-tag, .event-spotlight .section-tag { margin-left: auto !important; margin-right: auto !important; } .spotlight-inner div[style*="display: flex"], .spotlight-card div[style*="display: flex"], .flagship-card div[style*="display: flex"], .event-spotlight div[style*="display: flex"], .spotlight-actions { width: 100% !important; max-width: 100% !important; flex-direction: column !important; align-items: center !important; box-sizing: border-box !important; } .spotlight-inner .btn, .spotlight-card .btn, .flagship-card .btn, .event-spotlight .btn, .spotlight-actions .btn { width: 100% !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; } .flagship-card *, .event-spotlight *, .spotlight-card *, .spotlight-inner * { max-width: 100% !important; word-wrap: break-word !important; overflow-wrap: break-word !important; box-sizing: border-box !important; } /* Truncated Countdown Box Labels on Mobile */ .countdown-container, .countdown-grid { display: flex !important; gap: 0.35rem !important; width: 100% !important; justify-content: center !important; flex-wrap: nowrap !important; box-sizing: border-box !important; } .countdown-box { flex: 1 1 0 !important; min-width: 0 !important; padding: 0.5rem 0.2rem !important; text-align: center !important; overflow: hidden !important; border-radius: var(--radius-md) !important; box-sizing: border-box !important; } .countdown-value { font-size: clamp(1.2rem, 4vw, 1.6rem) !important; line-height: 1 !important; } .countdown-label { font-size: 0.65rem !important; letter-spacing: 0.2px !important; white-space: nowrap !important; display: block !important; overflow: visible !important; } .countdown-divider { font-size: 1.2rem !important; margin: 0 -0.1rem !important; align-self: center !important; display: inline-block !important; } /* Fix Volunteer Form Container & Input Insets */ .form-container, .form-card, .volunteer-form-wrapper, .card.card-glass, #volunteer .card, #volunteer .card.card-glass { width: 100% !important; max-width: 100% !important; padding: 1.5rem 1.25rem !important; /* Guarantees space inside the card border */ box-sizing: border-box !important; overflow: hidden !important; } form, .volunteer-form-wrap, #volunteer-form, .newsletter-form-wrap, .newsletter-form { margin-left: auto !important; margin-right: auto !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .form-group, .input-wrapper, .grid-2, .availability-grid, .roles-grid { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .form-control, .form-input, .form-select, .form-textarea, input[type="text"], input[type="email"], input[type="tel"], select, textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 0.85rem 1rem !important; margin-left: 0 !important; margin-right: 0 !important; } .availability-card, .role-card, .volunteer-conditional-section { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } form label, .form-label, .form-group, .form-input, .form-select, .form-textarea, .form-section-block, .form-section-header, .form-section-title, .form-section-hint, .availability-grid, .availability-card, .availability-card-text, .availability-card-title, .availability-card-desc, .volunteer-conditional-section, .conditional-section-header, .conditional-section-subtitle, .roles-grid, .role-card, .role-card-label, .other-input-wrap, .other-input-wrap label, .other-input-wrap input { text-align: left !important; justify-content: flex-start !important; } .form-input::placeholder, .form-textarea::placeholder, input::placeholder, textarea::placeholder { text-align: left !important; } /* 1. Newsletter Headline & Form Mobile */ .newsletter-section h2, .newsletter-title { text-align: center !important; max-width: 90% !important; margin: 0 auto 1rem auto !important; font-size: 1.65rem !important; line-height: 1.25 !important; word-break: normal !important; overflow-wrap: break-word !important; hyphens: auto !important; } .newsletter-form { flex-direction: column; gap: 0.6rem; } .newsletter-input { width: 100%; } /* 2. Shorten Pricing Card Height on Mobile */ .uniform-pricing-card, .pricing-card, .ticket-card { min-height: auto !important; height: auto !important; padding: 1.25rem 1rem !important; } .perks-list, .ticket-features { margin: 0.75rem 0 1.25rem 0 !important; gap: 0.45rem !important; } .pricing-cta-btn { padding: 0.75rem 1rem !important; } /* 3. Embedded Eventbrite Checkout Container on Mobile */ .embedded-checkout-section, .eventbrite-card-wrapper, .checkout-section-wrapper, .eventbrite-widget-container, .tickets-checkout-wrapper, #eventbrite-widget-container, #eventbrite-inline-container { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 1rem auto !important; overflow: hidden !important; border-radius: 16px !important; box-sizing: border-box !important; } .eventbrite-widget-container iframe, #eventbrite-widget-container iframe, #eventbrite-inline-container iframe, .eventbrite-iframe, iframe[id*="eventbrite"] { width: 100% !important; min-width: 100% !important; min-height: 480px !important; border: none !important; border-radius: 12px !important; display: block !important; box-sizing: border-box !important; } .btn-external-eb { width: 100% !important; max-width: 100% !important; white-space: normal !important; padding: 0.85rem 1rem !important; font-size: 0.9rem !important; line-height: 1.4 !important; text-align: center !important; box-sizing: border-box !important; } /* Donation Section Mobile */ .donation-section, #donation-section { scroll-margin-top: 80px; } .donation-card-wrapper { width: 100% !important; max-width: 100% !important; padding: 1.5rem 1rem !important; margin: 1rem auto !important; box-sizing: border-box !important; } .donation-embed-container { width: 100% !important; max-width: 100% !important; min-height: 520px !important; padding: 0 !important; margin: 0 auto 1.5rem auto !important; box-sizing: border-box !important; } .donation-embed-container iframe, .donation-iframe { width: 100% !important; min-height: 520px !important; } .donation-pills-grid { gap: 0.5rem; } .donation-pill { padding: 0.55rem 1.05rem; font-size: 1rem; } .etransfer-box { padding: 1.25rem 0.85rem; } .etransfer-email { font-size: 0.85rem; padding: 0.45rem 0.75rem; } .donation-modal-content { padding: 1.5rem 1rem !important; max-width: 95% !important; } } @media (max-width: 600px) { .logo-wrapper, .brand-emblem, .brand-logo-img-wrapper { height: 48px; width: 48px; min-width: 48px; } .logo-img, .logo-icon, .brand-logo img, .brand-emblem img, .brand-logo-img-wrapper img, #header-logo img, .logo-wrapper img { height: 48px; width: 48px; } } /* ========================================================================== VOLUNTEER APPLICATION FORM & CONDITIONAL SERVICES ========================================================================== */ .form-section-block { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .form-section-header { margin-bottom: 0.85rem; } .form-section-title { font-family: var(--font-heading); font-size: 1.15rem; font-weight: var(--fw-bold); color: var(--color-white); display: flex; align-items: center; gap: 0.35rem; } .form-section-hint { font-size: 0.875rem; color: var(--color-text-muted); margin-top: 0.25rem; } .required-asterisk { color: var(--color-accent-gold); font-weight: var(--fw-bold); } /* Availability Selection Cards */ .availability-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 0.75rem; } .availability-card { background: rgba(22, 22, 28, 0.85); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.15rem 1.25rem; cursor: pointer; display: flex; align-items: flex-start; gap: 0.85rem; transition: all var(--transition-base); position: relative; user-select: none; } .availability-card:hover { border-color: rgba(255, 215, 0, 0.4); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } .availability-card:has(input:checked), .availability-card.is-checked { background: linear-gradient(135deg, rgba(139, 30, 45, 0.3) 0%, rgba(26, 26, 36, 0.95) 100%); border-color: var(--color-accent-gold); box-shadow: 0 4px 20px rgba(255, 215, 0, 0.15); } .availability-card-text { display: flex; flex-direction: column; gap: 0.25rem; } .availability-card-title { font-family: var(--font-heading); font-size: 1rem; font-weight: var(--fw-bold); color: var(--color-white); line-height: 1.3; } .availability-card-desc { font-size: 0.82rem; color: var(--color-text-muted); line-height: 1.4; } /* Custom Checkbox Indicator */ .custom-checkbox-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .custom-checkbox-box { width: 22px; height: 22px; min-width: 22px; border-radius: 6px; border: 2px solid rgba(255, 255, 255, 0.25); background: rgba(15, 15, 18, 0.8); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); margin-top: 2px; flex-shrink: 0; } .custom-checkbox-box .check-icon { width: 13px; height: 13px; opacity: 0; transform: scale(0.5); transition: all var(--transition-fast); color: #0F0F12; } .custom-checkbox-input:checked+.custom-checkbox-box { background: var(--gradient-gold); border-color: var(--color-accent-gold); } .custom-checkbox-input:checked+.custom-checkbox-box .check-icon { opacity: 1; transform: scale(1); color: #0F0F12; } .custom-checkbox-input:focus-visible+.custom-checkbox-box { box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.35); } /* Conditional Service Sections */ .volunteer-conditional-section { background: rgba(18, 18, 24, 0.75); border: 1px solid rgba(255, 215, 0, 0.28); border-radius: var(--radius-lg); padding: 1.5rem; margin-top: 1.25rem; backdrop-filter: blur(12px); position: relative; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); } .volunteer-conditional-section.is-visible { display: block !important; animation: volunteerSlideFade 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes volunteerSlideFade { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } } .conditional-section-header { margin-bottom: 0.85rem; } .conditional-badge { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-accent-gold); font-family: var(--font-heading); font-size: 0.95rem; font-weight: var(--fw-bold); letter-spacing: 0.02em; margin-bottom: 0.35rem; } .conditional-section-subtitle { font-size: 0.875rem; color: var(--color-text-muted); } /* Roles Checkbox Grid */ .roles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .role-card { background: rgba(15, 15, 20, 0.75); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-md); padding: 0.75rem 0.95rem; cursor: pointer; display: flex; align-items: center; gap: 0.75rem; transition: all var(--transition-fast); user-select: none; } .role-card:hover { border-color: rgba(255, 215, 0, 0.35); background: rgba(26, 26, 36, 0.9); } .role-card:has(input:checked), .role-card.is-checked { border-color: var(--color-accent-gold); background: rgba(255, 215, 0, 0.1); } .role-card-label { font-size: 0.92rem; color: var(--color-text-main); line-height: 1.35; } .other-input-wrap { margin-top: 0.85rem; padding: 0.85rem 1rem; background: rgba(15, 15, 20, 0.6); border-radius: var(--radius-md); border-left: 3px solid var(--color-accent-gold); animation: volunteerSlideFade 0.25s ease forwards; } @media (max-width: 680px) { .availability-grid { grid-template-columns: 1fr; } .roles-grid { grid-template-columns: 1fr; } .volunteer-conditional-section { padding: 1.15rem; } }