/** * Dim Mode CSS * * 50% Brightness Filter for Special Events * Applied when body has class "dim" * * Usage: Add class="dim" to tag * * * To enable: Add "dim" class to body * To disable: Remove "dim" class from body */ /* Dim the body background using a dark overlay */ body.dim::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: -1; pointer-events: none; } /* Apply brightness 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.dim > *:not(.modal):not(.modal-backdrop):not(.ekko-lightbox):not([id^="ekkoLightbox"]):not([class*="ekkoLightbox"]):not(.black-ribbon) { filter: brightness(50%); -webkit-filter: brightness(50%); position: relative; } /* CRITICAL FIX: Ensure modals appended to body are NOT filtered */ /* This prevents the stacking context issue that blocks modal display */ body.dim > .modal, body.dim > .modal-backdrop, body.dim > .ekko-lightbox, body.dim > [id^="ekkoLightbox"], body.dim > [class*="ekkoLightbox"], body.dim > #img1 { filter: none !important; -webkit-filter: none !important; } /* CRITICAL: #img1 modal fix - ensure it displays properly in dim mode */ body.dim #img1.modal.in, body.dim #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.dim #img1.modal.in .modal-dialog, body.dim #img1.modal.in .modal-content, body.dim #img1.modal.in .modal-body { display: block !important; visibility: visible !important; opacity: 1 !important; filter: none !important; -webkit-filter: none !important; } /* Images inherit dim from parent modal - no additional filter needed */ /* Apply dim to entire modal (header + content + images) */ body.dim > .modal, body.dim > .ekko-lightbox, body.dim div#img1.modal, body.dim .ekko-lightbox-container, body.dim .lightbox { filter: brightness(50%) !important; -webkit-filter: brightness(50%) !important; } /* Modal children should NOT have additional filter (prevent double dim) */ body.dim > .modal *, body.dim > .ekko-lightbox *, body.dim div#img1.modal *, body.dim .ekko-lightbox-container *, body.dim .lightbox *, body.dim [data-toggle="lightbox"], body.dim [data-toggle="lightbox"] * { filter: none !important; -webkit-filter: none !important; } /* Modal backdrop should be dimmed */ body.dim .modal-backdrop { filter: none !important; -webkit-filter: none !important; } /* Modal z-index layering: backdrop (1040) < modal (1050) */ body.dim .modal-backdrop, body.dim .modal-backdrop.fade, body.dim .modal-backdrop.fade.in { z-index: 1040 !important; position: fixed !important; top: 0; left: 0; width: 100%; height: 100%; } /* Open modals (.in class) */ body.dim .modal.fade.in, body.dim .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.dim .modal:not(.in), body.dim .ekko-lightbox:not(.in), body.dim div#img1.modal:not(.in) { display: none !important; pointer-events: none !important; visibility: hidden !important; opacity: 0 !important; } /* CRITICAL: Fix stacking context issue from brightness filter */ /* Only for OPEN modals */ body.dim .ekko-lightbox.in .modal-dialog, body.dim .ekko-lightbox.in .modal-content, body.dim .modal.in .modal-dialog, body.dim .modal.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.dim .ekko-lightbox.in, body.dim .ekko-lightbox.in .modal-dialog, body.dim .modal.fade.in { transform: none !important; -webkit-transform: none !important; } /* Fix modal dialog positioning and scrolling */ /* Only for OPEN modals */ body.dim .modal.in .modal-dialog, body.dim #img1.in .modal-dialog { max-height: calc(100vh - 60px); max-width: 90%; margin: 30px auto !important; display: block !important; position: relative; width: auto; } /* Fix ekko-lightbox modal dialog */ body.dim .ekko-lightbox.fade.in .modal-dialog, body.dim .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.dim .modal.in .modal-content, body.dim #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.dim .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.dim .modal.in .modal-body, body.dim #img1.in .modal-body { overflow-y: auto !important; overflow-x: hidden !important; max-height: calc(100vh - 120px); padding: 15px; -webkit-overflow-scrolling: touch; } /* Fix ekko-lightbox modal body scrolling */ body.dim .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 */ body.dim .ekko-lightbox.in .ekko-lightbox-container { overflow: visible !important; background: #fff !important; } /* Fix ekko-lightbox images */ body.dim .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.dim #imagepreview, body.dim #img1 #imagepreview { max-width: 100%; height: auto; display: block; margin: 0 auto; } /* Make modal larger for better image viewing */ body.dim .modal-dialog.modal-lg, body.dim #img1 .modal-dialog.modal-lg { width: 90%; max-width: 1200px; } /* Prevent body scroll when modal is open */ body.dim.modal-open { overflow: hidden !important; position: fixed; width: 100%; } /* Fix for mobile devices */ @media (max-width: 767px) { body.dim .modal-dialog, body.dim #img1 .modal-dialog, body.dim .ekko-lightbox .modal-dialog { margin: 10px; width: calc(100% - 20px); } body.dim .modal-content, body.dim #img1 .modal-content, body.dim .ekko-lightbox .modal-content { max-height: calc(100vh - 20px); } body.dim .modal-body, body.dim #img1 .modal-body, body.dim .ekko-lightbox .modal-body, body.dim .ekko-lightbox-container { max-height: calc(100vh - 80px); padding: 10px; } } /* Ensure modal header (close button) is accessible */ body.dim .modal-header, body.dim #img1 .modal-header, body.dim .ekko-lightbox .modal-header { flex-shrink: 0; padding: 10px 15px; border-bottom: 1px solid #e5e5e5; } /* Style for close button in header */ body.dim .modal-header-img, body.dim #img1 .modal-header-img { background-color: rgba(0, 0, 0, 0.8); border: none; } body.dim .modal-header-img .close, body.dim #img1 .modal-header-img .close { color: #fff; opacity: 0.8; text-shadow: none; } body.dim .modal-header-img .close:hover, body.dim #img1 .modal-header-img .close:hover { opacity: 1; } /* Center modal vertically when image is small */ @media (min-height: 600px) { body.dim .modal.fade.in, body.dim #img1.modal.fade.in { display: flex !important; align-items: center; } body.dim .modal.fade.in .modal-dialog, body.dim #img1.modal.fade.in .modal-dialog { margin: auto; } } /* Modal content inherits dim from parent modal - no additional filter needed */ /* Ekko-Lightbox Modal Positioning */ body.dim .ekko-lightbox .modal-dialog, body.dim div[id^="ekkoLightbox"] .modal-dialog, body.dim 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.dim .ekko-lightbox .modal-content, body.dim div[id^="ekkoLightbox"] .modal-content, body.dim 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.dim .ekko-lightbox .modal-body, body.dim .ekko-lightbox .modal-body *, body.dim .ekko-lightbox img, body.dim .ekko-lightbox .ekko-lightbox-container, body.dim .ekko-lightbox .ekko-lightbox-container * { visibility: visible !important; opacity: 1 !important; display: block !important; max-width: 100% !important; height: auto !important; } /* Hide ribbon on special event splash page. These pages have no _body suffix in body class (only dim/memorial). */ body:not([class*="_body"]) > .black-ribbon { display: none; } /* Special event splash page: don't dim the banner image, only dim the entersite link and logo. body.dim > .container only matches special_event / default layouts where .container is a direct child of body (not inside #wrapper). */ body.dim > .container { filter: none !important; -webkit-filter: none !important; } body.dim > .container a.logo { filter: brightness(50%) !important; -webkit-filter: brightness(50%) !important; } /* Navigation chevrons - centered vertically */ body.dim .ekko-lightbox .ekko-lightbox-nav-overlay { height: 100% !important; } body.dim .ekko-lightbox .ekko-lightbox-nav-overlay a, body.dim .ekko-lightbox-nav-overlay a.glyphicon, body.dim .ekko-lightbox-nav-overlay .glyphicon-chevron-left, body.dim .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.dim .ekko-lightbox .ekko-lightbox-nav-overlay a.glyphicon-chevron-left, body.dim .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.dim .ekko-lightbox .ekko-lightbox-nav-overlay a.glyphicon-chevron-right, body.dim .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; }