From c86f904c475cbb5b56133a4f1db6352f3b0971f2 Mon Sep 17 00:00:00 2001 From: Michael Victory Date: Mon, 22 Jun 2026 22:18:00 -0700 Subject: [PATCH] Hero desktop: multiply blend so C's white becomes paper (no gap); drop the zoom The gap was C's cool-white background reading against the cream + the zoom pushing dots to one corner. Switch the desktop loop to mix-blend-mode:multiply over the paper bg: white dissolves into paper (seamless, no gap), dots remain, full-res (no zoom), and it holds at any viewport width. Opacity back to 1 (the multiply does the lightening). Mobile pinned to its approved look (normal blend, .5 opacity, rotate, centered). Co-Authored-By: Claude Opus 4.8 --- style.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/style.css b/style.css index 4a27da2..2a3ad7e 100644 --- a/style.css +++ b/style.css @@ -139,15 +139,16 @@ a.tel { text-decoration: none; } z-index: 1; pointer-events: none; background: var(--paper); } .hero-media::after { content: ""; position: absolute; inset: 0; background: var(--paper); opacity: .2; pointer-events: none; } -.hero-video { width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; display: block; opacity: 0; transition: opacity 1s ease; transform: scale(1.45); transform-origin: 66% 66%; } -.hero-video.is-playing { opacity: .5; } +.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 1s ease; mix-blend-mode: multiply; } +.hero-video.is-playing { opacity: 1; } @media (max-width: 760px) { .hero { min-height: 88vh; padding: 120px 0 56px; display: block; } /* Loop OVERLAID as the hero background (not stacked below): full-bleed, rotated 90deg CW, faded from the top so the headline reads over paper and the ambient shows lower. Tint ::after still applies. */ .hero-media { left: 0; width: 100%; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%); mask-image: linear-gradient(to bottom, transparent 0, #000 18%); } - .hero-video { position: absolute; top: 50%; left: 50%; width: 100vh; height: 100vw; object-fit: cover; object-position: 50% 50%; transform: translate(-50%, -50%) rotate(90deg); } + .hero-video { position: absolute; top: 50%; left: 50%; width: 100vh; height: 100vw; object-fit: cover; object-position: 50% 50%; transform: translate(-50%, -50%) rotate(90deg); mix-blend-mode: normal; } + .hero-video.is-playing { opacity: .5; } } .actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }