/* ||||||||||||||||||||||||||||||||| /// Lightweight Image Lightbox // ||||||||||||||||||||||||||||||||| Dependency-free, site-wide lightbox for any thumbnail/preview image that links to a larger version. Add class "gc-lightbox-thumb" to an whose href points at the full-size image and that wraps the preview . Behaviour lives in /js/lightbox.js. The modal is created on demand and appended to . */ .gc-lightbox-thumb { position: relative; } .gc-lightbox-thumb::after { content: "\f00e"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.9rem; position: absolute; top: 0.55rem; right: 0.55rem; width: 1.6rem; height: 1.6rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--section-about-bg); background: rgba(13, 22, 29, 0.62); border: 1px solid rgba(200, 224, 204, 0.45); opacity: 0; transition: opacity 0.18s ease; pointer-events: none; } .gc-lightbox-thumb:hover::after, .gc-lightbox-thumb:focus-visible::after { opacity: 1; } .gc-lightbox-modal { position: fixed; inset: 0; width: 100vw; height: 100vh; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(5, 10, 14, 0.78); backdrop-filter: blur(2px); z-index: 9999; } .gc-lightbox-modal.is-open { display: flex; } .gc-lightbox-modal__img { width: auto; height: auto; max-width: min(92vw, 1120px); max-height: 88vh; border-radius: 12px; border: 1px solid rgba(214, 234, 218, 0.35); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); background: #0d161d; } .gc-lightbox-modal__close { position: absolute; top: 0.85rem; right: 1rem; width: 2.2rem; height: 2.2rem; border: 1px solid rgba(214, 234, 218, 0.45); border-radius: 999px; background: rgba(9, 16, 22, 0.72); color: var(--section-about-bg); font-size: 1.35rem; line-height: 1; cursor: pointer; }