/* ========================================================================== LBL Product Range (lbl.html) ========================================================================== */ .lbl-card { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); } .lbl-card__img { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--space-2); background: var(--color-bg-alt); } .lbl-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Whole card is the trigger for the full view (class added by lbl-viewer.js) */ .lbl-card--clickable { cursor: pointer; } .lbl-card--clickable:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } .lbl-card--clickable .lbl-card__img img { transition: transform var(--transition); } .lbl-card--clickable:hover .lbl-card__img img { transform: scale(1.05); } .lbl-card__img--empty { display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: var(--fs-xs); text-align: center; } .lbl-card__img--empty::after { content: "Photo coming soon"; } .lbl-card h3 { font-size: var(--fs-md); margin-bottom: 0; } /* --- Homepage LBL preview -------------------------------------------------- */ .lbl-card--all { align-items: center; justify-content: center; text-align: center; background: var(--gradient-brand); } .lbl-card--all h3 { color: #fff; } .lbl-card__all-icon { font-size: 2.2rem; } /* --- Full view (lbl-viewer.js) --------------------------------------------- */ /* While the full view is open the grid behind it stays put (the class is set on and from lbl-viewer.js). */ html.lbl-viewer-open, body.lbl-viewer-open { overflow: hidden; overscroll-behavior: none; } /* The floating call / WhatsApp / top buttons would otherwise sit under the overlay and glow through it. */ body.lbl-viewer-open .floating-actions { display: none; } .lbl-viewer { display: none; position: fixed; inset: 0; z-index: 200; background: #0b1431; flex-direction: column; overscroll-behavior: contain; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } .lbl-viewer.is-open { display: flex; animation: lblViewerIn 0.2s ease; } @keyframes lblViewerIn { from { opacity: 0; } to { opacity: 1; } } /* --- Top bar: back + counter --- */ .lbl-viewer__bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid rgba(255,255,255,0.12); } .lbl-viewer__back { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0.6rem 1.1rem; border: 1px solid rgba(255,255,255,0.25); border-radius: var(--radius-pill); background: rgba(255,255,255,0.1); color: #fff; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--transition), border-color var(--transition); } .lbl-viewer__back:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.45); } .lbl-viewer__back:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .lbl-viewer__count { color: rgba(255,255,255,0.75); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.04em; } /* --- Stage: arrows + photo + name --- */ .lbl-viewer__stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-4); } .lbl-viewer__figure { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); min-width: 0; min-height: 0; max-height: 100%; margin: 0; } .lbl-viewer__img { min-height: 0; max-width: min(86vw, 900px); max-height: 72vh; max-height: 72dvh; object-fit: contain; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); background: #fff; } .lbl-viewer__title { flex: 0 0 auto; color: #fff; font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 600; text-align: center; } .lbl-viewer__nav { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.1); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--transition); } .lbl-viewer__nav:hover { background: rgba(255,255,255,0.25); } .lbl-viewer__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .lbl-viewer__nav[hidden] { display: none; } /* --- Phones & small tablets: arrows drop to the bottom corners so they stay in thumb reach and never sit on top of the photo. Swipe also works. --- */ @media (max-width: 768px) { .lbl-viewer__bar { padding: var(--space-2) var(--space-3); } .lbl-viewer__back { padding: 0.6rem; } .lbl-viewer__back span { display: none; } .lbl-viewer__stage { padding: var(--space-3) var(--space-3) 88px; } .lbl-viewer__img { max-width: 92vw; max-height: 58vh; max-height: 58dvh; } .lbl-viewer__title { font-size: var(--fs-md); } .lbl-viewer__nav { position: absolute; bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); width: 48px; height: 48px; } .lbl-viewer__nav--prev { left: var(--space-4); } .lbl-viewer__nav--next { right: var(--space-4); } } /* Landscape phones: very little height, so shrink the photo further. */ @media (max-height: 480px) and (orientation: landscape) { .lbl-viewer__stage { padding: var(--space-2) 64px; } .lbl-viewer__img { max-height: 62vh; max-height: 62dvh; } .lbl-viewer__title { font-size: var(--fs-sm); } .lbl-viewer__nav { position: absolute; bottom: auto; width: 44px; height: 44px; } .lbl-viewer__nav--prev { left: var(--space-2); } .lbl-viewer__nav--next { right: var(--space-2); } } @media (prefers-reduced-motion: reduce) { .lbl-viewer.is-open { animation: none; } }