/** * Distinguished Guests showcase — front-end styles (events-driven). * * Neutral and theme-friendly: inherits site fonts/colours; only structure is * opinionated. Portrait cards work as a carousel (home) and an equal-height * grid (listing). Focus is always visible. * * The hover flourish (lift + zoom + glow) is OPT-IN: turn on the block's * "Card hover glow" toggle (or add the class `ananevt-guests--glow`) to enable * it. It ships colour-neutral — the coloured halo appears only when the site's * theme sets --ananevt-guest-glow-1 / --ananevt-guest-glow-2 (and the name * accent only when --ananevt-guest-name-hover is set) — so the plugin never * carries one site's brand colour to another. See the child-theme snippet in * the readme "Card hover glow" section. * * @author Shivaji Mitra (M/S. Anblik) */ .ananevt-guests { width: 100%; } .ananevt-guests * { box-sizing: border-box; } .ananevt-guests__head { text-align: center; margin: 0 0 1.75rem; } .ananevt-guests__title { margin: 0 0 0.4rem; } .ananevt-guests__kicker { margin: 0 auto; max-width: 640px; opacity: 0.85; } /* Card — full-cover "Option B" layout: the portrait fills the whole card and the name + year sit over a near-opaque dark band at the bottom (white text keeps >= 15:1 contrast even over a light portrait — WCAG 1.4.3, verified). The WHOLE card is a single anchor (.ananevt-guest__cardlink wraps the portrait AND the text band), so every pixel navigates to the guest's page — the robust way, not a stretched pseudo-element (which only ever covered the bottom band). The portrait is decorative (alt="") and the visible name gives the link its accessible name; one link per card, no nested interactives. */ .ananevt-guest { position: relative; display: block; height: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; background: #f3f4f6; border: 1px solid #e5e7eb; } /* The whole-card link fills the card and lays the text band at the bottom, so the hand cursor shows over the entire card and clicking anywhere follows it. */ .ananevt-guest__cardlink { position: absolute; inset: 0; z-index: 1; display: block; text-decoration: none; color: #fff; cursor: pointer; } .ananevt-guest__cardlink:focus-visible { outline: 3px solid #ffe08a; outline-offset: -3px; border-radius: 16px; } .ananevt-guest__media { position: absolute; inset: 0; overflow: hidden; z-index: 0; } .ananevt-guest__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } /* The band is absolutely pinned to the bottom of the card (inside the link), so it never stretches to fill the card; the link still covers the whole card. */ .ananevt-guest__overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 2.6rem 0.9rem 0.85rem; text-align: left; color: #fff; background: linear-gradient( to top, rgba( 12, 14, 22, 0.94 ) 0%, rgba( 12, 14, 22, 0.90 ) 42%, rgba( 12, 14, 22, 0.5 ) 74%, rgba( 12, 14, 22, 0 ) 100% ); } /* Name — permanently underlined so it clearly reads as clickable. */ .ananevt-guest__name { margin: 0 0 0.15rem; font-size: 1rem; line-height: 1.25; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ananevt-guest__role { display: block; margin: 0 0 0.1rem; font-size: 0.85rem; color: #e5e7eb; } .ananevt-guest__year { display: block; margin: 0; font-weight: 700; color: #ffe08a; letter-spacing: 0.02em; } /* When the guests carousel is shown full-width, fit more portraits across so the row reads as a gallery. The scroller's own breakpoints still reduce the count on smaller screens. Two classes beat the base .aac-scroller default. */ .aac-scroller.aac-scroller--guests { --aac-per-view: 4; } /* ======================================================================= OPT-IN hover flourish — .ananevt-guests--glow ----------------------------------------------------------------------- Enabled by the block's "Card hover glow" toggle (or the shortcode's hover_glow="1", or by hand-adding the class). The card lifts, the portrait eases in and the name band rises; a soft drop shadow gives depth on any site. A COLOURED halo appears ONLY when the theme sets the two glow-colour variables, and the name accent only when --ananevt-guest-name-hover is set, so the plugin imposes no brand colour on its own. Fires on keyboard focus too. Motion respects prefers-reduced-motion; colours are a static cue kept there. Example (child theme): .ananevt-guests--glow{ --ananevt-guest-glow-1: rgba(255,241,120,.82); --ananevt-guest-glow-2: rgba(255,224,0,.50); --ananevt-guest-name-hover:#ffe08a; } ===================================================================== */ .ananevt-guests--glow .ananevt-guest { transition: transform 0.15s ease, box-shadow 0.15s ease; } .ananevt-guests--glow .ananevt-guest:hover, .ananevt-guests--glow .ananevt-guest:focus-within { transform: translateY( -5px ); box-shadow: 0 0 9px 1px var( --ananevt-guest-glow-1, transparent ), 0 0 18px 2px var( --ananevt-guest-glow-2, transparent ), 0 8px 20px rgba( 0, 0, 0, 0.18 ); } .ananevt-guests--glow .ananevt-guest__media img { transition: transform 0.5s ease; } .ananevt-guests--glow .ananevt-guest:hover .ananevt-guest__media img, .ananevt-guests--glow .ananevt-guest:focus-within .ananevt-guest__media img { transform: scale( 1.05 ); } .ananevt-guests--glow .ananevt-guest__overlay { transition: padding-bottom 0.3s ease; } .ananevt-guests--glow .ananevt-guest:hover .ananevt-guest__overlay, .ananevt-guests--glow .ananevt-guest:focus-within .ananevt-guest__overlay { padding-bottom: 1.15rem; } .ananevt-guests--glow .ananevt-guest:hover .ananevt-guest__name, .ananevt-guests--glow .ananevt-guest:focus-within .ananevt-guest__name { color: var( --ananevt-guest-name-hover, inherit ); } /* Let the halo bloom past the carousel's clipping — only when opted in. The viewport gets vertical breathing room, pulled back with a matching negative margin so the row keeps its exact place; horizontal overflow (the track) is untouched, so this adds no new horizontal scroll. 1.8.8/1.8.9: the bottom side is asymmetric on purpose. The scroller viewport paints its native horizontal scrollbar at the very bottom edge of its box, and the original full -30px bottom margin dragged the Previous/Next controls up INTO that scrollbar lane (the bar ran straight behind the round buttons). Now the bottom padding is only 32px — enough for the hover glow, whose deepest shadow reaches ~24px below a card — so the scrollbar sits close under the cards, and with no bottom pull-back the controls clear it by a comfortable ~20px. The controls' resting position is unchanged from the original design (42 - 30 = 32 + 0). */ .ananevt-guests--glow .aac-scroller__card { overflow: visible; } .ananevt-guests--glow .aac-scroller__viewport { padding-block: 42px 32px; margin-block: -30px 0; } @media ( prefers-reduced-motion: reduce ) { .ananevt-guests--glow .ananevt-guest, .ananevt-guests--glow .ananevt-guest__media img, .ananevt-guests--glow .ananevt-guest__overlay { transition: none; } .ananevt-guests--glow .ananevt-guest:hover, .ananevt-guests--glow .ananevt-guest:focus-within { transform: none; } .ananevt-guests--glow .ananevt-guest:hover .ananevt-guest__media img, .ananevt-guests--glow .ananevt-guest:focus-within .ananevt-guest__media img { transform: none; } .ananevt-guests--glow .ananevt-guest:hover .ananevt-guest__overlay, .ananevt-guests--glow .ananevt-guest:focus-within .ananevt-guest__overlay { padding-bottom: 0.85rem; } } @media ( forced-colors: active ) { .ananevt-guest__overlay { background: Canvas; } .ananevt-guest__name, .ananevt-guest__year, .ananevt-guest__role { color: CanvasText; } } /* Grid (listing page) — same full-cover cards, laid out in a responsive grid. grid-auto-rows:auto lets each card use its own 4/5 aspect ratio. */ .ananevt-guests-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) ); gap: 1.5rem 1.25rem; } .ananevt-guests-grid__item { display: flex; } .ananevt-guests-grid__item > .ananevt-guest { width: 100%; } /* Admin-only empty notice */ .ananevt-guests-empty { text-align: center; color: #6b7280; padding: 1rem; border: 1px dashed #d1d5db; border-radius: 12px; } /* Screen-reader-only (self-sufficient) */ .ananevt-guests .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect( 0 0 0 0 ); clip-path: inset( 50% ); white-space: nowrap; } @media ( max-width: 640px ) { .ananevt-guests-grid { grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) ); gap: 1rem; } .ananevt-guest__name { font-size: 1.02rem; } }