/* ========================================= Lapis Interactive — Home (page-scoped) Purpose: trailer placeholder, featured capsule, gallery captions, lightbox Scope: only when Depends on: css/style.css tokens (spacing, colors, lightbox button) ========================================= */ /* 1) Trailer placeholder (hero) - Fallback border/shadow ensure visibility everywhere - Accent border/shadow applied when color-mix is supported */ .home-page .trailer-card{ aspect-ratio: 16 / 9; display: grid; place-items: center; padding: 1rem; border-radius: 12px; background: #0b0f14; border: 1px solid rgba(255,255,255,.08); /* fallback border */ box-shadow: 0 10px 28px -12px rgba(0,0,0,.60); /* fallback shadow */ color: var(--text); opacity: .9; } @supports (color: color-mix(in hsl, white, black)){ .home-page .trailer-card{ border-color: color-mix(in hsl, var(--accent), transparent 72%); box-shadow: 0 10px 28px -12px color-mix(in hsl, var(--accent), transparent 82%); } } /* 2) Featured capsule (only this instance on Home) */ .home-page .featured-capsule{ margin: 0 auto 1.25rem; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.02); box-shadow: 0 6px 24px -10px rgba(0,0,0,.60); } .home-page .featured-capsule .capsule__media--gradient{ aspect-ratio: 16 / 9; display: grid; place-items: center; background: linear-gradient(135deg, rgba(33,212,253,.16), rgba(145,35,255,.12)); } .home-page .featured-capsule .capsule__body{ padding: 1rem 1.2rem 1.2rem; text-align: left; max-width: 900px; margin: 0 auto; } .home-page .featured-capsule .capsule__actions{ justify-content: center; margin-top: 1rem; } .home-page .featured-capsule .capsule__blurb{ margin: .25rem 0 0; opacity: .9; line-height: 1.7; } /* 3) Gallery captions */ .home-page .shot__caption{ margin-top: .4rem; opacity: .85; font-size: .95rem; } .home-page .figure--flush{ margin: 0; } /* 4) Lightbox overlay (container only; close button styled globally) */ .home-page #lb{ position: fixed; inset: 0; background: rgba(0,0,0,.85); display: none; align-items: center; justify-content: center; padding: 2rem; z-index: 60; } .home-page #lb .lb-frame{ position: relative; display: inline-block; border-radius: 16px; } .home-page #lb .lb-frame img{ max-width: min(92vw, 1600px); max-height: 86vh; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.7); } /* 5) Small phones (≤420px): comfort tweak for capsule body */ @media (max-width: 420px){ .home-page .featured-capsule .capsule__body{ padding: .9rem 1rem 1rem; } }