/* styles/marines250th.css Marines 250th page-specific overrides - Requires - Adjust opacity as desired (0.2–0.8) */ body.sigprograms-page.marines-page::before { background-image: url('../images/Nassau-The Marines in the Revolution.jpg') !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; opacity: 0.5 !important; } /* Video Modal Styles */ .video-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); display: none; justify-content: center; align-items: center; z-index: 10000; opacity: 0; transition: opacity 0.3s ease; } .video-modal-overlay.show { display: flex; opacity: 1; } .video-modal-content { position: relative; background: #000; border-radius: 8px; max-width: 90%; max-height: 90vh; width: 90%; max-width: 800px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); } .video-modal-close { position: absolute; top: -40px; right: 0; background: rgba(0, 0, 0, 0.7); border: none; color: #fff; font-size: 32px; cursor: pointer; line-height: 1; z-index: 10001; padding: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: color 0.2s ease, background 0.2s ease; border-radius: 4px; } .video-modal-close:hover { color: #fff; background: rgba(0, 0, 0, 0.9); } .video-modal-body { width: 100%; height: 100%; min-height: 400px; } .video-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; overflow: hidden; } .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 400px; } .video-link { cursor: pointer; text-decoration: underline; color: var(--clr-link, #6A8CAF); display: inline-block; padding: 4px 0; /* Better touch target for mobile */ min-height: 44px; line-height: 36px; -webkit-tap-highlight-color: rgba(106, 140, 175, 0.3); } .video-link:hover { color: var(--clr-primary, #003366); } @media (max-width: 768px) { .video-modal-content { max-width: 95%; width: 95%; max-height: 85vh; margin: 10px; } .video-modal-close { top: -45px; right: 0; font-size: 32px; width: 44px; height: 44px; background: rgba(0, 0, 0, 0.8); /* Better touch target for mobile */ -webkit-tap-highlight-color: transparent; } .video-modal-body { min-height: 200px; } .video-wrapper { min-height: 200px; } .video-wrapper iframe { min-height: 200px; } } @media (max-width: 480px) { .video-modal-content { max-width: 98%; width: 98%; max-height: 80vh; margin: 5px; } .video-modal-close { top: -40px; font-size: 28px; width: 40px; height: 40px; } .video-modal-body { min-height: 180px; } .video-wrapper { min-height: 180px; } .video-wrapper iframe { min-height: 180px; } }