/* ═══════════════════════════════════════════════════════════ ASIF — CINEMA LAYER ──────────────────────────────────────────────────────────── A whisper-quiet, page-wide lighting pass. Three projections: 1. AMBIENT WASH warm overhead radial, mix-blend soft-light. Tints without darkening. Breathes slowly. 2. FILM VIGNETTE corner darken via multiply (~6%). Concentrates the eye toward content. 3. TYPE LIFT headings get a paper highlight + gold halo. The goal is gallery lighting on linen — not neon. Nothing here should be *visible* on its own. Disable the layer and the page should look noticeably flatter, but you should not be able to point at the effect when it's on. Mounted via a fixed::before / ::after pair on . Both are `pointer-events: none` and use mix-blend-mode so they affect appearance without affecting layout, hit-testing, or color identity of any element. Disabled automatically under: • prefers-reduced-motion (kills the breathing pan) • prefers-contrast: more (kills overlays + type halo) • print ──── Opt-in utility classes ──── .cinema-float surfaces (cards, panels) — rim highlight + drop .cinema-spec gold text gradient (price, hero numerals) .cinema-glow subtle gold halo (around a hero image, etc) .cinema-rim single hairline highlight + deep shadow (CTAs) ═══════════════════════════════════════════════════════════ */ /* The body owns the projection. isolation:isolate keeps the overlays contained inside the document's stacking context. */ html { background: var(--ivory, #F7F2E9); } body { position: relative; isolation: isolate; } /* ─────────── NO GLOBAL WASH ─────────── An attempt to paint a warm overhead wash onto the body collided with intentionally-dark hero sections (where any warm overlay reads as visible spotlight halos). Lifting pages globally is done with type-lift + a barely-there vignette + opt-in surface utilities, not a body overlay. If a specific page wants overhead light, set `[data-cinema-wash]` on a section and the rule below paints inside it only — not the whole document. */ [data-cinema-wash] { position: relative; isolation: isolate; } [data-cinema-wash]::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 38% at 50% 0%, rgba(255, 238, 198, 0.16), transparent 64%); mix-blend-mode: soft-light; } /* ─────────── FILM VIGNETTE (corners barely deeper) ─────────── ~3% darker at corners on light pages; imperceptible on dark sections (multiply on dark is a no-op). Frames the eye, never noticed as a gradient. */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9991; background: radial-gradient( ellipse 130% 110% at 50% 50%, transparent 72%, rgba(26, 23, 20, 0.06) 100% ); mix-blend-mode: multiply; } /* ─────────── TYPE LIFT (the workhorse) ─────────── This — not the overlays — is what makes display type feel pressed into the page instead of painted on. Cormorant gets a 1px paper highlight underneath + a soft 30px gold ambient glow. Restricted to display sizes only; small text never gets text-shadow (it muddies legibility). Two passes so the effect carries across charcoal sections (where the ivory highlight reads as backlight) and across ivory sections (where it reads as paper edge). */ h1, h2 { text-shadow: 0 1px 0 rgba(247, 242, 233, 0.55), 0 0 30px rgba(184, 150, 90, 0.07); } /* h1 / h2 on dark backgrounds (visually) — a faintly stronger gold ambient so they look lit from behind rather than printed. */ [style*="color: var(--ivory)"] h1, [style*="color: var(--ivory)"] h2, [style*="color: #F7F2E9"] h1, [style*="color: #F7F2E9"] h2, [style*="color: rgb(247"] h1, [style*="color: rgb(247"] h2 { text-shadow: 0 1px 0 rgba(255, 250, 235, 0.10), 0 0 36px rgba(184, 150, 90, 0.18), 0 0 80px rgba(184, 150, 90, 0.08); } /* ─────────── OPT-IN: surface that floats ─────────── Pair with the existing .lift for a hover lift. */ .cinema-float { box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.85), 0 1px 0 rgba(26, 23, 20, 0.025), 0 18px 36px -20px rgba(26, 23, 20, 0.16), 0 32px 64px -28px rgba(26, 23, 20, 0.10); } .cinema-float.lift:hover { box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.95), 0 24px 50px -22px rgba(26, 23, 20, 0.22), 0 44px 80px -34px rgba(26, 23, 20, 0.14); } /* ─────────── OPT-IN: rim-lit CTA (single hairline + deep shadow) ─────────── */ .cinema-rim { position: relative; box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.18), 0 14px 28px -14px rgba(26, 23, 20, 0.36), 0 4px 10px -4px rgba(26, 23, 20, 0.20); transition: box-shadow var(--motion-med, 320ms) var(--motion-ease, ease), transform var(--motion-fast, 180ms) var(--motion-ease, ease); } .cinema-rim:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.28), 0 22px 40px -18px rgba(26, 23, 20, 0.46), 0 8px 16px -6px rgba(26, 23, 20, 0.24), 0 0 0 1px rgba(184, 150, 90, 0.18); } /* ─────────── OPT-IN: gold specular text (hero numerals, prices) ─────────── */ .cinema-spec { background-image: linear-gradient(180deg, #E2C896 0%, #C9A66E 38%, #B8965A 62%, #9C7C46 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ─────────── OPT-IN: gold halo around a hero image ─────────── */ .cinema-glow { position: relative; } .cinema-glow::after { content: ''; position: absolute; inset: -8% -6% -10% -6%; z-index: -1; background: radial-gradient(ellipse at 50% 50%, rgba(184, 150, 90, 0.16) 0%, rgba(184, 150, 90, 0.06) 35%, transparent 70%); filter: blur(28px); pointer-events: none; } /* ─────────── OPT-IN: slow floating breath ─────────── */ @keyframes asifFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .cinema-float-breath { animation: asifFloat 7s ease-in-out infinite; will-change: transform; } /* ─────────── img refinement on ivory ─────────── Photographs get a single hairline lift so they don't sit flat on the page. Applies only when the image carries the opt-in. */ img.cinema-photo, .cinema-photo > img { box-shadow: 0 1px 0 rgba(255, 250, 235, 0.6) inset; filter: drop-shadow(0 14px 28px rgba(26, 23, 20, 0.06)) saturate(1.04); } /* ─────────── DISABLE under accessibility / print ─────────── */ @media (prefers-reduced-motion: reduce) { .cinema-float-breath { animation: none !important; } } @media (prefers-contrast: more) { body::before, body::after { display: none !important; } h1, h2 { text-shadow: none !important; } } @media print { body::before, body::after { display: none !important; } h1, h2 { text-shadow: none !important; } } /* ─────────── safety for the small set of pages that explicitly draw their own dark background (Search, Engraving hero, etc) ─ The soft-light wash still works there, but if a page ever needs to opt the cinema layer OFF entirely, set [data-no-cinema] on or . */ [data-no-cinema]::before, [data-no-cinema]::after { display: none !important; }