/* IMSL Affiliate Links Manager — Frontend Block Styles * * Loaded on the frontend only (not in the editor). * Uses CSS custom properties from the active FSE/block theme where available, * falling back to sensible neutrals. No hardcoded brand colours. * * Covers: * imsl/image — figure layout, alignment classes, caption, lightbox overlay * imsl/button — already covered by imsl-blocks.css (shared editor+frontend) * imsl/link-list — already covered by imsl-blocks.css */ /* ── imsl/image: base figure ─────────────────────────────────────────── */ .wp-block-imsl-image { display: block; margin: 0; padding: 0; max-width: 100%; box-sizing: border-box; } .wp-block-imsl-image a { display: block; line-height: 0; /* remove inline-block gap below img */ text-decoration: none; } .wp-block-imsl-image img { display: block; max-width: 100%; height: auto; } /* ── Alignment classes (mirror core/image behaviour) ─────────────────── */ .wp-block-imsl-image.alignleft { float: left; margin-right: 2em; margin-bottom: 1em; max-width: 50%; } .wp-block-imsl-image.alignright { float: right; margin-left: 2em; margin-bottom: 1em; max-width: 50%; } .wp-block-imsl-image.aligncenter { margin-left: auto; margin-right: auto; text-align: center; } .wp-block-imsl-image.alignwide { max-width: var(--wp--style--global--wide-size, 1200px); width: 100%; margin-left: auto; margin-right: auto; } .wp-block-imsl-image.alignfull { max-width: 100vw; width: 100vw; margin-left: calc( 50% - 50vw ); margin-right: calc( 50% - 50vw ); } /* ── Caption ─────────────────────────────────────────────────────────── */ .wp-block-imsl-image .wp-element-caption { display: block; text-align: center; font-size: var(--wp--preset--font-size--small, 0.875em); color: var(--wp--preset--color--contrast-2, #555); margin-top: 0.5em; line-height: 1.4; } /* ── Lightbox overlay ────────────────────────────────────────────────── */ /* * Triggered by data-imsl-lightbox="1" on the element. * lightbox.js injects .imsl-lightbox-overlay into . * Designed to be minimal and accessible — click backdrop or press Esc to close. */ .imsl-lightbox-overlay { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.88); padding: 24px; box-sizing: border-box; cursor: zoom-out; /* Animate in */ animation: imsl-lb-in 0.18s ease; } @keyframes imsl-lb-in { from { opacity: 0; } to { opacity: 1; } } .imsl-lightbox-overlay img { display: block; max-width: min(90vw, 1400px); max-height: 90vh; width: auto; height: auto; object-fit: contain; border-radius: 3px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6); cursor: default; /* Animate in */ animation: imsl-lb-img-in 0.2s ease; } @keyframes imsl-lb-img-in { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Close button */ .imsl-lightbox-close { position: fixed; top: 16px; right: 20px; z-index: 100001; background: rgba(0, 0, 0, 0.55); border: none; color: #fff; font-size: 28px; line-height: 1; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; /* Ensure it passes WCAG 4.5:1 against dark overlay */ } .imsl-lightbox-close:hover, .imsl-lightbox-close:focus { background: rgba(0, 0, 0, 0.85); outline: none; } /* Caption shown below lightbox image */ .imsl-lightbox-caption { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.85); font-size: 14px; text-align: center; max-width: 80vw; line-height: 1.4; pointer-events: none; } /* Prevent body scroll when lightbox is open */ body.imsl-lightbox-open { overflow: hidden; }