/* ========================================================= gallery-hero-controls.css Reusable gallery / hero-photo navigation controls for The-Hurds.net feature pages. Purpose: - Styles previous/next buttons over a main image/photo/card area. - Designed for Exhibit Cards, hydroponics photos, recipe photos, postcard galleries, model railroad photos, etc. - Uses CSS variables so the look can be adjusted per page. ========================================================= */ /* ========================================================= DEFAULT VARIABLES These can be overridden in the page . ========================================================= */ :root { /* Button position */ --gallery-hero-button-top: 42%; --gallery-hero-button-side-offset: 0.75rem; /* Button size */ --gallery-hero-button-size: 42px; --gallery-hero-button-font-size: 2rem; /* Button appearance */ --gallery-hero-button-bg: rgba(0, 0, 0, 0.42); --gallery-hero-button-bg-hover: rgba(0, 0, 0, 0.64); --gallery-hero-button-color: #ffffff; --gallery-hero-button-border: 1px solid rgba(255, 255, 255, 0.75); --gallery-hero-button-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); --gallery-hero-button-opacity: 0.82; --gallery-hero-button-opacity-hover: 1; /* Button shape */ --gallery-hero-button-radius: 999px; /* Motion */ --gallery-hero-button-scale-hover: 1.04; --gallery-hero-button-transition: 0.18s ease; /* Focus outline */ --gallery-hero-button-focus-outline: 3px solid rgba(255, 255, 255, 0.9); } /* ========================================================= GENERIC GALLERY HERO PANEL Add this class to the container that holds the main image and the previous/next buttons. Example:
========================================================= */ .gallery-hero-panel { position: relative; } /* Optional class for the main image/frame area */ .gallery-hero-frame { position: relative; } /* ========================================================= GENERIC BUTTONS Recommended future markup: ========================================================= */ .gallery-hero-button { position: absolute; top: var(--gallery-hero-button-top); transform: translateY(-50%); z-index: 20; width: var(--gallery-hero-button-size); height: var(--gallery-hero-button-size); display: flex; align-items: center; justify-content: center; border: var(--gallery-hero-button-border); border-radius: var(--gallery-hero-button-radius); background: var(--gallery-hero-button-bg); color: var(--gallery-hero-button-color); font-size: var(--gallery-hero-button-font-size); line-height: 1; font-family: Georgia, "Times New Roman", serif; cursor: pointer; box-shadow: var(--gallery-hero-button-shadow); opacity: var(--gallery-hero-button-opacity); transition: opacity var(--gallery-hero-button-transition), background var(--gallery-hero-button-transition), transform var(--gallery-hero-button-transition); } .gallery-hero-prev { left: var(--gallery-hero-button-side-offset); } .gallery-hero-next { right: var(--gallery-hero-button-side-offset); } .gallery-hero-button:hover, .gallery-hero-button:focus { opacity: var(--gallery-hero-button-opacity-hover); background: var(--gallery-hero-button-bg-hover); transform: translateY(-50%) scale(var(--gallery-hero-button-scale-hover)); } .gallery-hero-button:focus-visible { outline: var(--gallery-hero-button-focus-outline); outline-offset: 3px; } /* Arrow character inside the button */ .gallery-hero-button .gallery-hero-arrow-symbol, .gallery-hero-button .fallback-arrow { display: block; position: relative; top: -1px; } /* ========================================================= COMPATIBILITY WITH CURRENT EXHIBIT CARD MARKUP Your current Exhibit Card page uses: .media-panel .hero-arrow .hero-arrow.prev .hero-arrow.next .fallback-arrow This section lets the existing markup work without requiring JavaScript changes. ========================================================= */ .media-panel { position: relative; } .media-panel .hero-arrow { position: absolute; top: var(--gallery-hero-button-top); transform: translateY(-50%); z-index: 20; width: var(--gallery-hero-button-size); height: var(--gallery-hero-button-size); display: flex; align-items: center; justify-content: center; border: var(--gallery-hero-button-border); border-radius: var(--gallery-hero-button-radius); background: var(--gallery-hero-button-bg); color: var(--gallery-hero-button-color); font-size: var(--gallery-hero-button-font-size); line-height: 1; font-family: Georgia, "Times New Roman", serif; cursor: pointer; box-shadow: var(--gallery-hero-button-shadow); opacity: var(--gallery-hero-button-opacity); transition: opacity var(--gallery-hero-button-transition), background var(--gallery-hero-button-transition), transform var(--gallery-hero-button-transition); } .media-panel .hero-arrow.prev { left: var(--gallery-hero-button-side-offset); } .media-panel .hero-arrow.next { right: var(--gallery-hero-button-side-offset); } .media-panel .hero-arrow:hover, .media-panel .hero-arrow:focus { opacity: var(--gallery-hero-button-opacity-hover); background: var(--gallery-hero-button-bg-hover); transform: translateY(-50%) scale(var(--gallery-hero-button-scale-hover)); } .media-panel .hero-arrow:focus-visible { outline: var(--gallery-hero-button-focus-outline); outline-offset: 3px; } .media-panel .fallback-arrow { display: block; position: relative; top: -1px; } /* ========================================================= RESPONSIVE ADJUSTMENTS ========================================================= */ @media (max-width: 700px) { :root { --gallery-hero-button-size: 34px; --gallery-hero-button-font-size: 1.55rem; --gallery-hero-button-side-offset: 0.45rem; } } /* ========================================================= Gallery Thumbnail / Bottom Image Menu Fixes clipped thumbnail images in the bottom 3+ image menu. Designed for thumbnail strips beneath a main hero image. ========================================================= */ :root { /* Thumbnail strip sizing */ --gallery-thumb-height: 82px; --gallery-thumb-width: 64px; --gallery-thumb-gap: 0.45rem; --gallery-thumb-padding: 0.25rem; /* Thumbnail appearance */ --gallery-thumb-bg: #f3f0ea; --gallery-thumb-border: 1px solid rgba(0, 0, 0, 0.18); --gallery-thumb-border-active: 2px solid #8b3f2f; --gallery-thumb-radius: 10px; --gallery-thumb-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); /* Important image behavior */ --gallery-thumb-object-fit: contain; } /* Outer thumbnail row */ .thumb-row-shell { display: flex; align-items: center; gap: var(--gallery-thumb-gap); width: 100%; margin-top: 0.85rem; } /* Scrollable thumbnail container */ .thumb-scroll { display: flex; align-items: center; gap: var(--gallery-thumb-gap); overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; padding: 0.25rem 0; width: 100%; } /* Thumbnail buttons generated inside the thumbnail row */ .thumb-scroll button, .thumb-scroll .thumb-button, .thumb-scroll .thumbnail-button, .thumb-scroll [data-thumb-index] { flex: 0 0 auto; width: var(--gallery-thumb-width); height: var(--gallery-thumb-height); display: flex; align-items: center; justify-content: center; padding: var(--gallery-thumb-padding); border: var(--gallery-thumb-border); border-radius: var(--gallery-thumb-radius); background: var(--gallery-thumb-bg); box-shadow: var(--gallery-thumb-shadow); overflow: hidden; cursor: pointer; } /* Thumbnail images should fit inside the button, not be cropped */ .thumb-scroll button img, .thumb-scroll .thumb-button img, .thumb-scroll .thumbnail-button img, .thumb-scroll [data-thumb-index] img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: var(--gallery-thumb-object-fit); object-position: center center; } /* Active/current thumbnail state */ .thumb-scroll button.is-active, .thumb-scroll button.active, .thumb-scroll .thumb-button.is-active, .thumb-scroll .thumb-button.active, .thumb-scroll .thumbnail-button.is-active, .thumb-scroll .thumbnail-button.active, .thumb-scroll [aria-current="true"] { border: var(--gallery-thumb-border-active); } /* Left/right thumbnail-scroll buttons */ .thumb-scroll-button { flex: 0 0 auto; width: 34px; height: var(--gallery-thumb-height); display: flex; align-items: center; justify-content: center; border: var(--gallery-thumb-border); border-radius: var(--gallery-thumb-radius); background: #ffffff; color: #222222; font-size: 1.5rem; line-height: 1; cursor: pointer; } /* Mobile adjustment */ @media (max-width: 700px) { :root { --gallery-thumb-height: 68px; --gallery-thumb-width: 54px; } .thumb-scroll-button { width: 30px; } } /* ========================================================= Gallery Thumbnail Buttons Bottom image menu beneath the main hero image ========================================================= */ :root { --gallery-thumb-height: 76px; --gallery-thumb-width: 58px; --gallery-thumb-gap: 0.45rem; --gallery-thumb-padding: 0.25rem; --gallery-thumb-bg: #f6f3ee; --gallery-thumb-border: 1px solid rgba(0, 0, 0, 0.18); --gallery-thumb-border-active: 2px solid #8b3f2f; --gallery-thumb-radius: 10px; --gallery-thumb-shadow: 0 2px 8px rgba(0, 0, 0, 0.10); --gallery-thumb-object-fit: contain; } /* Whole thumbnail row */ .thumb-row-shell { display: flex; align-items: center; gap: var(--gallery-thumb-gap); width: 100%; margin-top: 0.85rem; } /* Scrollable thumbnail strip */ .thumb-scroll { display: flex; align-items: center; gap: var(--gallery-thumb-gap); overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; padding: 0.25rem 0; width: 100%; } /* Individual thumbnail buttons */ .thumb-scroll button { flex: 0 0 auto; width: var(--gallery-thumb-width); height: var(--gallery-thumb-height); display: flex; align-items: center; justify-content: center; padding: var(--gallery-thumb-padding); border: var(--gallery-thumb-border); border-radius: var(--gallery-thumb-radius); background: var(--gallery-thumb-bg); box-shadow: var(--gallery-thumb-shadow); overflow: hidden; cursor: pointer; /* Prevent visible text scraps if older JS inserts text */ font-size: 0; line-height: 0; } /* Actual thumbnail image */ .thumb-scroll button img { display: block; width: 100%; height: 100%; object-fit: var(--gallery-thumb-object-fit); object-position: center center; } /* Active/current thumbnail */ .thumb-scroll button.active, .thumb-scroll button.is-active, .thumb-scroll button[aria-current="true"] { border: var(--gallery-thumb-border-active); } .thumb-scroll button[aria-selected="true"], .thumb-scroll .thumb[aria-selected="true"] { border: var(--gallery-thumb-border-active); } a/* Left/right scroll buttons for the thumbnail row */ .thumb-scroll-button { flex: 0 0 auto; width: 34px; height: var(--gallery-thumb-height); display: flex; align-items: center; justify-content: center; border: var(--gallery-thumb-border); border-radius: var(--gallery-thumb-radius); background: #ffffff; color: #8b3f2f; font-size: 1.35rem; line-height: 1; cursor: pointer; } /* Keep the thumbnail scroll arrows visible as text */ .thumb-scroll-button { font-size: 1.35rem; line-height: 1; } /* Left/right scroll buttons for the thumbnail row */ .thumb-scroll-button { flex: 0 0 auto; width: 34px; height: var(--gallery-thumb-height); display: flex; align-items: center; justify-content: center; border: var(--gallery-thumb-border); border-radius: var(--gallery-thumb-radius); background: #ffffff; color: #8b3f2f; font-size: 1.35rem; line-height: 1; cursor: pointer; } /* Keep the thumbnail scroll arrows visible as text */ .thumb-scroll-button { font-size: 1.35rem; line-height: 1; } @media (max-width: 700px) { :root { --gallery-thumb-height: 66px; --gallery-thumb-width: 50px; } .thumb-scroll-button { width: 30px; } } /* ========================================================= Gallery Hero Controls - Refinement Patch 2026-05-25 Purpose: - Smaller thumbnail-row scroll arrows - White hero-image arrowheads - Hide duplicate hero-caption detail line - Hide card-click instruction line ========================================================= */ /* --------------------------------------------------------- 1. Main hero-image previous/next buttons Keep arrowheads white, even if other site CSS tries to make button text red/brown. --------------------------------------------------------- */ .media-panel .hero-arrow, .media-panel .hero-arrow.prev, .media-panel .hero-arrow.next, .gallery-hero-button { color: #ffffff !important; } .media-panel .hero-arrow .fallback-arrow, .gallery-hero-button .fallback-arrow, .gallery-hero-button .gallery-hero-arrow-symbol { color: #ffffff !important; } /* --------------------------------------------------------- 2. Bottom thumbnail-row left/right scroll arrows These are the arrows beside the row of small player images. Make them smaller so they do not overpower the thumbnails. --------------------------------------------------------- */ :root { --gallery-thumb-scroll-button-width: 24px; --gallery-thumb-scroll-button-height: 38px; --gallery-thumb-scroll-button-font-size: 1.05rem; } .thumb-scroll-button, .gallery-thumb-scroll-button { width: var(--gallery-thumb-scroll-button-width) !important; height: var(--gallery-thumb-scroll-button-height) !important; align-self: center; font-size: var(--gallery-thumb-scroll-button-font-size) !important; line-height: 1 !important; color: #8b3f2f; background: #ffffff; } /* --------------------------------------------------------- 3. Hide duplicate/secondary hero-caption text Keep the main hero title, but remove the extra player/era line and the card-click instruction line. --------------------------------------------------------- */ .media-panel .hero-caption [data-hero-caption], .media-panel .hero-caption .hero-page-cue, .media-panel .hero-page-cue { display: none !important; } /* Tighten the spacing now that the extra caption lines are gone */ /* .media-panel .hero-caption { padding-bottom: 0.35rem; } */ /* .media-panel .hero-caption h2 { margin-bottom: 0; } */ /* ========================================================= Exhibit / Gallery Refinements Smaller thumbnail scroll arrows, white hero arrows, and hidden empty caption/cue lines. ========================================================= */ /* Keep the large hero-image arrowheads white */ .media-panel .hero-arrow, .media-panel .hero-arrow.prev, .media-panel .hero-arrow.next, .media-panel .hero-arrow .fallback-arrow { color: #ffffff !important; } /* Make the thumbnail-row left/right arrows smaller */ :root { --gallery-thumb-scroll-button-width: 24px; --gallery-thumb-scroll-button-height: 38px; --gallery-thumb-scroll-button-font-size: 1.05rem; } .thumb-scroll-button, .gallery-thumb-scroll-button { width: var(--gallery-thumb-scroll-button-width) !important; height: var(--gallery-thumb-scroll-button-height) !important; font-size: var(--gallery-thumb-scroll-button-font-size) !important; line-height: 1 !important; } /* Hide now-empty duplicate caption/cue lines */ .media-panel .hero-caption [data-hero-caption]:empty, .media-panel .hero-page-cue:empty { display: none !important; } .media-panel .hero-caption h2 { margin-bottom: 0; }