/** * Team Member Showcase — Frontend Styles v2.1.0 * * Fix: Mobile overlay always-visible bug removed. * On touch devices, tap the card once to reveal, tap again to hide. * New: Responsive column CSS vars for mobile/tablet breakpoints. * * @package TeamMemberShowcase */ /* ========================================================= Base CSS Custom Properties (PHP overrides these in ) ========================================================= */ :root { --tms-gold: #c8a84b; --tms-gold-light: rgba(200, 168, 75, 0.85); --tms-text-light: #ffffff; --tms-text-muted: rgba(255, 255, 255, 0.88); --tms-gap: 20px; --tms-radius: 4px; --tms-transition: 420ms cubic-bezier(0.4, 0, 0.2, 1); --tms-img-ratio: 120%; --tms-anim-style: slide-up; --tms-font-heading: Georgia, 'Times New Roman', serif; --tms-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --tms-placeholder-bg: #e8e0d0; /* Responsive column counts — overridden by PHP from settings */ --tms-cols-desktop: 3; --tms-cols-tablet: 2; --tms-cols-mobile: 1; } /* ========================================================= Wrapper ========================================================= */ .tms-wrapper { position: relative; } /* ========================================================= Grid — uses CSS custom properties for responsive columns ========================================================= */ .tms-grid { display: grid; gap: var(--tms-gap); width: 100%; margin: 0 auto; padding: 0; list-style: none; box-sizing: border-box; /* Desktop: use the column count set by the shortcode/settings */ grid-template-columns: repeat( var(--tms-cols-desktop), 1fr ); } /* Grid inherits column vars from .tms-wrapper (set via inline style per shortcode instance) */ .tms-wrapper .tms-grid { grid-template-columns: repeat( var(--tms-cols-desktop), 1fr ); } @media (max-width: 900px) { .tms-wrapper .tms-grid { grid-template-columns: repeat( var(--tms-cols-tablet), 1fr ); } } @media (max-width: 540px) { .tms-wrapper .tms-grid { grid-template-columns: repeat( var(--tms-cols-mobile), 1fr ); } } /* ========================================================= Loading state ========================================================= */ .tms-grid-region { position: relative; } .tms-grid-region.tms-loading::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.6); z-index: 10; border-radius:var(--tms-radius); } /* ========================================================= Card ========================================================= */ .tms-card { position: relative; overflow: hidden; border-radius: var(--tms-radius); background: var(--tms-placeholder-bg); box-shadow: 0 2px 16px rgba(0,0,0,0.09); /* cursor: pointer on touch so tap feels intentional */ cursor: default; } .tms-card__media { position: relative; width: 100%; padding-bottom: var(--tms-img-ratio); overflow: hidden; } .tms-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform var(--tms-transition), filter var(--tms-transition); will-change: transform, filter; } .tms-card__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--tms-placeholder-bg); } .tms-card__placeholder svg { width: 60%; max-width: 100px; height: auto; color: rgba(168,137,58,0.30); } /* ========================================================= Overlay — always hidden by default (desktop + mobile) ========================================================= */ .tms-card__overlay { position: absolute; inset: 0; background: var(--tms-gold-light); display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px 20px; box-sizing: border-box; /* HIDDEN by default on ALL devices */ opacity: 0; pointer-events: none; will-change: opacity, transform; } /* ========================================================= Animation styles — applied via .tms-anim-* on the grid ========================================================= */ /* slide-up (default) */ .tms-anim-slide-up .tms-card__overlay { transform: translateY(10px); transition: opacity var(--tms-transition), transform var(--tms-transition); } /* fade */ .tms-anim-fade .tms-card__overlay { transform: none; transition: opacity var(--tms-transition); } /* zoom */ .tms-anim-zoom .tms-card__overlay { transform: scale(0.88); transition: opacity var(--tms-transition), transform var(--tms-transition); } /* slide-down */ .tms-anim-slide-down .tms-card__overlay { transform: translateY(-10px); transition: opacity var(--tms-transition), transform var(--tms-transition); } /* ========================================================= Revealed state — triggered by: Desktop: CSS :hover / :focus-within Mobile: JS adds .tms-card--revealed via tap ========================================================= */ .tms-card:hover .tms-card__overlay, .tms-card:focus-within .tms-card__overlay, .tms-card--revealed .tms-card__overlay { opacity: 1; pointer-events: auto; } /* Reset transforms on reveal */ .tms-anim-slide-up .tms-card:hover .tms-card__overlay, .tms-anim-slide-up .tms-card:focus-within .tms-card__overlay, .tms-anim-slide-up .tms-card--revealed .tms-card__overlay, .tms-anim-zoom .tms-card:hover .tms-card__overlay, .tms-anim-zoom .tms-card:focus-within .tms-card__overlay, .tms-anim-zoom .tms-card--revealed .tms-card__overlay, .tms-anim-slide-down .tms-card:hover .tms-card__overlay, .tms-anim-slide-down .tms-card:focus-within .tms-card__overlay, .tms-anim-slide-down .tms-card--revealed .tms-card__overlay { transform: none; } /* ========================================================= Overlay inner content ========================================================= */ .tms-card__overlay-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; } .tms-card__overlay-line { width: 48px; height: 1px; background: rgba(255,255,255,0.65); transform: scaleX(0); transition: transform 0.32s cubic-bezier(0.4,0,0.2,1) 0.14s; transform-origin: left center; } .tms-card__overlay-line--bottom { transform-origin: right center; } .tms-card:hover .tms-card__overlay-line, .tms-card:focus-within .tms-card__overlay-line, .tms-card--revealed .tms-card__overlay-line { transform: scaleX(1); } .tms-card__name { margin: 0; font-family: var(--tms-font-heading); font-size: clamp(0.95rem, 1.3vw + 0.4rem, 1.3rem); font-weight: 700; font-style: normal; color: var(--tms-text-light); letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.2; transform: translateY(6px); opacity: 0; transition: transform 0.32s cubic-bezier(0.4,0,0.2,1) 0.10s, opacity 0.32s ease 0.10s; } .tms-card__designation { margin: 0; font-family: var(--tms-font-body); font-size: clamp(0.72rem, 0.9vw + 0.3rem, 0.88rem); font-weight: 400; font-style: italic; color: var(--tms-text-muted); letter-spacing: 0.08em; line-height: 1.4; transform: translateY(6px); opacity: 0; transition: transform 0.32s cubic-bezier(0.4,0,0.2,1) 0.18s, opacity 0.32s ease 0.18s; } .tms-card:hover .tms-card__name, .tms-card:focus-within .tms-card__name, .tms-card--revealed .tms-card__name, .tms-card:hover .tms-card__designation, .tms-card:focus-within .tms-card__designation, .tms-card--revealed .tms-card__designation { opacity: 1; transform: translateY(0); } /* Subtle photo zoom on reveal */ .tms-card:hover .tms-card__media img, .tms-card:focus-within .tms-card__media img, .tms-card--revealed .tms-card__media img { transform: scale(1.06); filter: brightness(0.86); } /* ========================================================= Touch cursor hint ========================================================= */ @media (hover: none) { .tms-card { cursor: pointer; } } /* ========================================================= Pagination — Numbered ========================================================= */ .tms-pagination { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .tms-pagination__list { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; justify-content: center; } .tms-pagination__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1.5px solid #e0d9cc; border-radius: 6px; background: #ffffff; color: #555; font-size: 0.875rem; font-family: var(--tms-font-body); font-weight: 500; cursor: pointer; transition: all 0.2s ease; line-height: 1; } .tms-pagination__btn:hover { border-color: var(--tms-gold); color: var(--tms-gold); background: #fdf8ee; } .tms-pagination__item--active .tms-pagination__btn, .tms-pagination__btn[aria-current="page"] { background: var(--tms-gold); border-color: var(--tms-gold); color: #fff; font-weight: 700; cursor: default; } .tms-pagination__item--disabled .tms-pagination__btn { opacity: 0.38; cursor: not-allowed; pointer-events: none; } .tms-pagination__item--ellipsis span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; color: #aaa; font-size: 1.1rem; } .tms-pagination__info { font-size: 0.8rem; color: #999; margin: 0; font-family: var(--tms-font-body); } /* Prev/Next style */ .tms-pagination--prev-next .tms-pagination__prevnext { display: flex; align-items: center; gap: 16px; } .tms-pagination--prev-next .tms-pagination__btn--prev, .tms-pagination--prev-next .tms-pagination__btn--next { display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; } /* Load More */ .tms-pagination__loadmore { text-align: center; margin-top: 8px; } .tms-pagination__btn--loadmore { display: inline-flex; align-items: center; gap: 10px; padding: 0 32px; height: 48px; background: transparent; border: 2px solid var(--tms-gold); color: var(--tms-gold); border-radius: 6px; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: all 0.22s ease; } .tms-pagination__btn--loadmore:hover { background: var(--tms-gold); color: #fff; } .tms-pagination__btn--loadmore.tms-loading { opacity: 0.7; pointer-events: none; } .tms-loadmore-spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.4); border-top-color: currentColor; border-radius: 50%; animation: tms-spin 0.7s linear infinite; } .tms-pagination__btn--loadmore.tms-loading .tms-loadmore-spinner { display: inline-block; } @keyframes tms-spin { to { transform: rotate(360deg); } } /* ========================================================= No members message ========================================================= */ .tms-no-members { color: #888; font-style: italic; text-align: center; padding: 40px 0; } /* ========================================================= Reduced motion ========================================================= */ @media (prefers-reduced-motion: reduce) { .tms-card__overlay, .tms-card__overlay-line, .tms-card__name, .tms-card__designation, .tms-card__media img { transition: none !important; } }