diff --git a/style.css b/style.css index 90c38aa..1e9e4cf 100644 --- a/style.css +++ b/style.css @@ -137,11 +137,9 @@ a.tel { text-decoration: none; } .hero-media { position: absolute; top: 0; right: 0; bottom: 0; width: 56%; z-index: 1; pointer-events: none; background: var(--paper); - -webkit-mask-image: linear-gradient(to right, transparent 0, #000 44%); - mask-image: linear-gradient(to right, transparent 0, #000 44%); } .hero-media::after { content: ""; position: absolute; inset: 0; background: var(--paper); opacity: .12; mix-blend-mode: multiply; pointer-events: none; } -.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 1s ease; } +.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 1s ease; transform: scale(1.7) translateY(-16%); transform-origin: center; } .hero-video.is-playing { opacity: 1; } @media (max-width: 760px) { .hero { min-height: 88vh; padding: 120px 0 56px; display: block; } @@ -149,7 +147,7 @@ a.tel { text-decoration: none; } 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; transform: translate(-50%, -50%) rotate(90deg); } + .hero-video { position: absolute; top: 50%; left: 34%; width: 100vh; height: 100vw; object-fit: cover; transform: translate(-50%, -50%) rotate(90deg); } } .actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }