/* ═══════════════════════════════════════════════════════════════ CINEMATIC MEDIA — shared visual-identity component (2026-09-02) Room-by-room rollout, approved by Yousef. Full-bleed photography that fades into the page/card cream background (no hard image rectangle), with real accessible HTML text overlaid — never text baked into the picture. ═══════════════════════════════════════════════════════════════ */ :root { --cm-cream: #FDFBF5; --cm-gold: #B48748; --cm-burgundy: #3A141E; --cm-burgundy-soft: rgba(58, 20, 30, .82); } /* ── HERO ─────────────────────────────────────────────────────── */ .cm-hero { position: relative; overflow: hidden; background: var(--cm-cream); border-bottom: 1px solid rgba(180, 135, 72, .18); } .cm-hero__media { position: relative; width: 100%; aspect-ratio: 16 / 8; max-height: 620px; overflow: hidden; } .cm-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; } .cm-hero__fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(253, 251, 245, 0) 0%, rgba(253, 251, 245, 0) 44%, var(--cm-cream) 94%); pointer-events: none; } .cm-hero__content { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 720px; padding: 0 24px 42px; text-align: center; z-index: 2; } /* Soft, unobtrusive scrim strictly behind the text — not a hard box */ .cm-hero__content::before { content: ""; position: absolute; inset: -22px -40px; background: radial-gradient(ellipse at 50% 62%, rgba(253, 251, 245, .55) 0%, rgba(253, 251, 245, 0) 72%); z-index: -1; pointer-events: none; } .cm-hero__kicker { display: block; font-family: var(--font-sans, system-ui, sans-serif); font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; color: var(--cm-gold); font-weight: 600; margin: 0 0 14px; } .cm-hero__title { font-family: "Cormorant Garamond", "EB Garamond", "Georgia", serif; font-weight: 500; font-size: clamp(2.4rem, 6vw, 4rem); color: var(--cm-burgundy); margin: 0 0 16px; line-height: 1.08; } .cm-hero__verse { font-family: "Cormorant Garamond", "EB Garamond", "Georgia", serif; font-style: italic; font-size: 1.15rem; color: var(--cm-burgundy-soft); margin: 0; } .cm-hero__verse-ref { color: var(--cm-gold); font-style: normal; } @media (max-width: 640px) { .cm-hero__media { aspect-ratio: 3 / 4; max-height: 520px; } .cm-hero__content { padding: 0 16px 28px; } .cm-hero__title { font-size: clamp(1.9rem, 8vw, 2.5rem); } .cm-hero__verse { font-size: 1.02rem; } } /* ── FULL-BLEED BREAKOUT (2026-09-03 fix) ──────────────────────── Atlas / long-form article pages wrap .cm-hero inside the constrained .lk-article-shell column (max-width + side padding), which boxed the hero image with hard cream-colored edges instead of the full-bleed look approved for the room pages (where .cm-hero sits unwrapped directly under ). This rule breaks the hero out to full viewport width wherever it is nested inside .lk-article-shell, without requiring any HTML restructuring. */ .lk-article-shell .cm-hero { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* ── CARD MEDIA (used inside .lk-card) ───────────────────────── */ .cm-card { padding: 0; overflow: hidden; } .cm-card__media { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; } .cm-card__img { display: block; width: 100%; height: 100%; object-fit: cover; } .cm-card__fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(253, 251, 245, 0) 0%, rgba(253, 251, 245, 0) 46%, var(--cm-card-bg, #FFFAEE) 96%); pointer-events: none; } .cm-card .lk-card-cat { display: inline-block; margin: 14px 20px 0; } .cm-card h3 { margin: 4px 20px 8px; } .cm-card p { margin: 0 20px 20px; } @media (max-width: 640px) { .cm-card__media { aspect-ratio: 3 / 2; } }