/** * Memorial / Mourning Mode CSS * * Black & White Filter for National Mourning Events * Applied when body has class "memorial" * * Usage: Add class="memorial" to tag * * * To enable: Add "memorial" class to body * To disable: Remove "memorial" class from body */ /* Apply grayscale filter to page content, excluding modals */ /* CRITICAL: Filter applied to body's children only, not body itself, to prevent creating a containing block that breaks position:fixed on modals */ body.memorial > *:not(.modal):not(.modal-backdrop):not(.ekko-lightbox):not([id^="ekkoLightbox"]):not([class*="ekkoLightbox"]):not(.black-ribbon) { filter: grayscale(100%); -webkit-filter: grayscale(100%); } /* CRITICAL FIX: Ensure modals appended to body are NOT filtered */ /* This prevents the stacking context issue that blocks modal display */ body.memorial > .modal, body.memorial > .modal-backdrop, body.memorial > .ekko-lightbox, body.memorial > [id^="ekkoLightbox"], body.memorial > [class*="ekkoLightbox"], body.memorial > #img1 { filter: none !important; -webkit-filter: none !important; } /* CRITICAL: #img1 modal fix - ensure it displays properly in memorial mode */ body.memorial #img1.modal.in, body.memorial #img1.modal.fade.in { display: block !important; visibility: visible !important; opacity: 1 !important; z-index: 1050 !important; position: fixed !important; filter: none !important; -webkit-filter: none !important; } body.memorial #img1.modal.in .modal-dialog, body.memorial #img1.modal.in .modal-content, body.memorial #img1.modal.in .modal-body { display: block !important; visibility: visible !important; opacity: 1 !important; filter: none !important; -webkit-filter: none !important; } /* Keep images grayscale in memorial mode */ body.memorial #img1.modal.in img, body.memorial #img1.modal.in #imagepreview { filter: grayscale(100%) !important; -webkit-filter: grayscale(100%) !important; } /* Exclude specific elements from filter */ body.memorial header, body.memorial header *, body.memorial nav, body.memorial nav *, body.memorial .theme-sub-menu, body.memorial .theme-sub-menu *, body.memorial .level-2, body.memorial .level-2 *, body.memorial .navs, body.memorial .navs *, body.memorial .show-menu, body.memorial .show-menu *, body.memorial .ext-dk, body.memorial .ext-dk *, body.memorial .ext-dk-yl, body.memorial .ext-dk-yl *, body.memorial .list-reset, body.memorial .list-reset *, /* Exclude carousel/banner from filter */ body.memorial .carousel, body.memorial .carousel *, body.memorial .carousel-inner, body.memorial .carousel-inner *, body.memorial .banner-margin-top, body.memorial .banner-margin-top *, /* Exclude modals and popups */ body.memorial > .modal, body.memorial > .modal *, body.memorial > .ekko-lightbox, body.memorial > .ekko-lightbox *, body.memorial .modal-backdrop, body.memorial div#img1.modal, body.memorial div#img1.modal *, body.memorial .ekko-lightbox-container, body.memorial .ekko-lightbox-container *, body.memorial .lightbox, body.memorial .lightbox *, body.memorial [data-toggle="lightbox"], body.memorial [data-toggle="lightbox"] * { filter: none !important; -webkit-filter: none !important; } /* Modal z-index layering: backdrop (1040) < modal (1050) */ body.memorial .modal-backdrop, body.memorial .modal-backdrop.fade, body.memorial .modal-backdrop.fade.in, .modal-backdrop { z-index: 1040 !important; position: fixed !important; top: 0; left: 0; width: 100%; height: 100%; } /* Open modals (.in class) */ body.memorial .modal.fade.in, body.memorial .ekko-lightbox.fade.in, .ekko-lightbox.fade.in { z-index: 1050 !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; display: block !important; overflow: hidden !important; pointer-events: auto !important; visibility: visible !important; opacity: 1 !important; padding: 0 !important; } /* Hide closed modals */ body.memorial .modal:not(.in), body.memorial .ekko-lightbox:not(.in), body.memorial div#img1.modal:not(.in) { display: none !important; pointer-events: none !important; visibility: hidden !important; opacity: 0 !important; } /* Force hide modals without .in class using multiple selectors */ .modal.fade:not(.in), div#img1.modal:not(.in) { display: none !important; pointer-events: none !important; } /* CRITICAL: Force modal div#img1 to be hidden by default */ div#img1.modal { display: none !important; pointer-events: none !important; } /* Only show modal div#img1 when it has .in class (open) */ div#img1.modal.in { display: flex !important; pointer-events: auto !important; } /* CRITICAL: Fix stacking context issue from grayscale filter */ /* Only for OPEN modals */ body.memorial .ekko-lightbox.in .modal-dialog, body.memorial .ekko-lightbox.in .modal-content, body.memorial .modal.in .modal-dialog, body.memorial .modal.in .modal-content, .ekko-lightbox.in .modal-dialog, .ekko-lightbox.in .modal-content { position: relative; z-index: 1 !important; pointer-events: auto !important; visibility: visible !important; opacity: 1 !important; } /* CRITICAL: Remove transforms that cause positioning issues */ /* Only for OPEN modals */ body.memorial .ekko-lightbox.in, body.memorial .ekko-lightbox.in .modal-dialog, body.memorial .modal.fade.in { transform: none !important; -webkit-transform: none !important; } /* ============================================ * FIX: Modal Image Scroll Issue * ============================================ * When grayscale filter creates stacking context, * modals can't scroll properly. These fixes ensure * image modals can scroll when content is larger * than viewport. */ /* Fix modal dialog positioning and scrolling */ /* Only for OPEN modals */ body.memorial .modal.in .modal-dialog, body.memorial #img1.in .modal-dialog { max-height: calc(100vh - 60px); max-width: 90%; margin: 30px auto !important; /* Force correct margins */ display: block !important; /* Don't use flex on modal-dialog */ position: relative; width: auto; } /* Fix ekko-lightbox modal dialog - CRITICAL */ body.memorial .ekko-lightbox.fade.in .modal-dialog, .ekko-lightbox.fade.in .modal-dialog, .ekko-lightbox.in .modal-dialog, body.memorial .ekko-lightbox .modal-dialog { max-height: calc(100vh - 60px) !important; max-width: 1200px !important; margin: 30px auto !important; display: block !important; position: relative !important; top: auto !important; left: auto !important; transform: none !important; -webkit-transform: none !important; width: 90% !important; visibility: visible !important; opacity: 1 !important; z-index: 1 !important; } /* Only for OPEN modals */ body.memorial .modal.in .modal-content, body.memorial #img1.in .modal-content { max-height: calc(100vh - 60px); overflow: visible; display: block; background: white; border-radius: 6px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); } /* Fix ekko-lightbox modal content */ body.memorial .ekko-lightbox.in .modal-content, .ekko-lightbox.in .modal-content { max-height: calc(100vh - 100px) !important; max-width: 100% !important; width: auto !important; overflow: visible !important; display: block !important; background: #fff !important; background-color: #fff !important; border-radius: 6px !important; box-shadow: 0 5px 15px rgba(0,0,0,0.5) !important; border: 1px solid rgba(0,0,0,0.2) !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 1 !important; } /* Enable scrolling in modal body - Only for OPEN modals */ body.memorial .modal.in .modal-body, body.memorial #img1.in .modal-body { overflow-y: auto !important; overflow-x: hidden !important; max-height: calc(100vh - 120px); padding: 15px; -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */ } /* IMPORTANT: Fix ekko-lightbox modal body scrolling */ body.memorial .ekko-lightbox.in .modal-body, .ekko-lightbox.in .modal-body { overflow-y: auto !important; overflow-x: hidden !important; max-height: calc(100vh - 200px) !important; -webkit-overflow-scrolling: touch; padding: 15px; background: #fff !important; } /* Remove scroll from ekko-lightbox-container (only modal-body should scroll) */ body.memorial .ekko-lightbox.in .ekko-lightbox-container, .ekko-lightbox.in .ekko-lightbox-container { overflow: visible !important; background: #fff !important; } /* Fix ekko-lightbox images */ body.memorial .ekko-lightbox.in .ekko-lightbox-container img, .ekko-lightbox.in .ekko-lightbox-container img { max-width: 100%; height: auto !important; width: auto !important; display: block; margin: 0 auto; } /* Ensure images fit properly within modal */ body.memorial #imagepreview, body.memorial #img1 #imagepreview { max-width: 100%; height: auto; display: block; margin: 0 auto; } /* Make modal larger for better image viewing */ body.memorial .modal-dialog.modal-lg, body.memorial #img1 .modal-dialog.modal-lg { width: 90%; max-width: 1200px; } /* Prevent body scroll when modal is open */ body.memorial.modal-open { overflow: hidden !important; position: fixed; width: 100%; } /* Fix for mobile devices */ @media (max-width: 767px) { body.memorial .modal-dialog, body.memorial #img1 .modal-dialog, body.memorial .ekko-lightbox .modal-dialog { margin: 10px; width: calc(100% - 20px); } body.memorial .modal-content, body.memorial #img1 .modal-content, body.memorial .ekko-lightbox .modal-content { max-height: calc(100vh - 20px); } body.memorial .modal-body, body.memorial #img1 .modal-body, body.memorial .ekko-lightbox .modal-body, body.memorial .ekko-lightbox-container { max-height: calc(100vh - 80px); padding: 10px; } } /* Ensure modal header (close button) is accessible */ body.memorial .modal-header, body.memorial #img1 .modal-header, body.memorial .ekko-lightbox .modal-header { flex-shrink: 0; padding: 10px 15px; border-bottom: 1px solid #e5e5e5; } /* Style for close button in header */ body.memorial .modal-header-img, body.memorial #img1 .modal-header-img { background-color: rgba(0, 0, 0, 0.8); border: none; } body.memorial .modal-header-img .close, body.memorial #img1 .modal-header-img .close { color: #fff; opacity: 0.8; text-shadow: none; } body.memorial .modal-header-img .close:hover, body.memorial #img1 .modal-header-img .close:hover { opacity: 1; } /* Center modal vertically when image is small */ @media (min-height: 600px) { body.memorial .modal.fade.in, body.memorial #img1.modal.fade.in { display: flex !important; align-items: center; } body.memorial .modal.fade.in .modal-dialog, body.memorial #img1.modal.fade.in .modal-dialog { margin: auto; } } /* Ekko-Lightbox Modal Positioning * Relative positioning to allow scrolling within modal container */ body.memorial .ekko-lightbox .modal-dialog, body.memorial #ekkoLightbox-366 .modal-dialog, body.memorial div[id^="ekkoLightbox"] .modal-dialog, body.memorial div.ekko-lightbox .modal-dialog, .ekko-lightbox .modal-dialog, #ekkoLightbox-366 .modal-dialog, div[id^="ekkoLightbox"] .modal-dialog, div.ekko-lightbox .modal-dialog { position: relative !important; top: auto !important; left: auto !important; transform: none !important; -webkit-transform: none !important; margin: 30px auto !important; z-index: 1 !important; width: 90% !important; max-width: 1200px !important; max-height: calc(100vh - 60px) !important; display: block !important; visibility: visible !important; opacity: 1 !important; } body.memorial .ekko-lightbox .modal-content, body.memorial #ekkoLightbox-366 .modal-content, body.memorial div[id^="ekkoLightbox"] .modal-content, body.memorial div.ekko-lightbox .modal-content, .ekko-lightbox .modal-content, #ekkoLightbox-366 .modal-content, div[id^="ekkoLightbox"] .modal-content, div.ekko-lightbox .modal-content { background: #fff !important; background-color: #fff !important; visibility: visible !important; opacity: 1 !important; display: block !important; min-height: 300px !important; position: relative !important; z-index: 1 !important; box-shadow: 0 5px 15px rgba(0,0,0,0.5) !important; border: 1px solid rgba(0,0,0,0.2) !important; border-radius: 6px !important; } /* Force modal body and images to be visible */ body.memorial .ekko-lightbox .modal-body, body.memorial .ekko-lightbox .modal-body *, .ekko-lightbox .modal-body, .ekko-lightbox .modal-body *, .ekko-lightbox img, .ekko-lightbox .ekko-lightbox-container, .ekko-lightbox .ekko-lightbox-container * { visibility: visible !important; opacity: 1 !important; display: block !important; max-width: 100% !important; height: auto !important; } /* Override Bootstrap inline styles for modal positioning */ .ekko-lightbox.modal.fade.in .modal-dialog, .ekko-lightbox.fade.in .modal-dialog, div[id^="ekkoLightbox"].fade.in .modal-dialog, div[id^="ekkoLightbox"].modal.in .modal-dialog { top: auto !important; left: auto !important; transform: none !important; -webkit-transform: none !important; margin: 30px auto !important; } /* Apply grayscale filter to modal content (images) */ body.memorial .ekko-lightbox .modal-body, body.memorial .ekko-lightbox .modal-body img, body.memorial .ekko-lightbox .ekko-lightbox-container, body.memorial .ekko-lightbox .ekko-lightbox-container img, body.memorial .modal .modal-body img { filter: grayscale(100%) !important; -webkit-filter: grayscale(100%) !important; } /* Navigation chevrons - centered vertically with proper alignment */ body.memorial .ekko-lightbox .ekko-lightbox-nav-overlay, .ekko-lightbox .ekko-lightbox-nav-overlay { height: 100% !important; } body.memorial .ekko-lightbox .ekko-lightbox-nav-overlay a, .ekko-lightbox .ekko-lightbox-nav-overlay a, body.memorial .ekko-lightbox-nav-overlay a.glyphicon, .ekko-lightbox-nav-overlay a.glyphicon, .ekko-lightbox-nav-overlay .glyphicon-chevron-left, .ekko-lightbox-nav-overlay .glyphicon-chevron-right { display: flex !important; align-items: center !important; justify-content: center !important; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; -webkit-transform: translateY(-50%) !important; height: 100px !important; font-size: 40px !important; padding: 20px !important; line-height: 40px !important; } body.memorial .ekko-lightbox .ekko-lightbox-nav-overlay a.glyphicon-chevron-left, .ekko-lightbox .ekko-lightbox-nav-overlay a.glyphicon-chevron-left, .ekko-lightbox-nav-overlay .glyphicon-chevron-left { left: 0 !important; right: auto !important; justify-content: flex-start !important; text-align: left !important; padding-left: 15px !important; } body.memorial .ekko-lightbox .ekko-lightbox-nav-overlay a.glyphicon-chevron-right, .ekko-lightbox .ekko-lightbox-nav-overlay a.glyphicon-chevron-right, .ekko-lightbox-nav-overlay .glyphicon-chevron-right { right: 0 !important; left: auto !important; justify-content: flex-end !important; text-align: right !important; padding-right: 15px !important; }