.hero-wall-photo { position: relative; isolation: isolate; overflow: hidden; background: var(--photo-black); min-height: clamp(580px, 88svh, 900px); display: flex; flex-direction: column; justify-content: flex-start; padding-top: clamp(6.5rem, 16vh, 10.5rem); padding-bottom: clamp(2rem, 5vh, 3.5rem); } .mw-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient( 110% 80% at 82% 104%, rgba(255, 92, 57, 0.46) 0%, rgba(255, 92, 57, 0.14) 34%, rgba(255, 92, 57, 0) 64% ), radial-gradient( 60% 44% at 88% 86%, rgba(255, 150, 90, 0.34) 0%, rgba(255, 92, 57, 0) 72% ), linear-gradient(180deg, #000 0%, #030304 42%, #0f0e0d 100%); } .mw-wall { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .mw-p { position: absolute; margin: 0; overflow: hidden; border-radius: 3px; transform: rotate(var(--r, 0deg)); } .mw-p img { width: 100%; height: 100%; object-fit: cover; display: block; } .mw-p.d3 { z-index: 6; box-shadow: 0 42px 80px -34px rgba(0, 0, 0, 0.95), 0 8px 22px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 150, 110, 0.16); } .mw-p.d3 img { filter: contrast(1.06); } .mw-p.d2 { z-index: 4; box-shadow: 0 28px 56px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 150, 110, 0.1); } .mw-p.d2 img { filter: contrast(0.96); } .mw-p.d1 { z-index: 2; box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.85); } .mw-p.d1 img { filter: contrast(0.92) blur(1.2px); } .mw-haze { position: absolute; inset: 0; pointer-events: none; } .mw-haze.h1 { z-index: 3; background: radial-gradient( 90% 70% at 84% 96%, rgba(255, 110, 70, 0.2) 0%, rgba(255, 110, 70, 0) 62% ), linear-gradient( 180deg, rgba(15, 14, 13, 0.55) 0%, rgba(15, 14, 13, 0.28) 46%, rgba(15, 14, 13, 0.6) 100% ); } .mw-haze.h2 { z-index: 5; background: radial-gradient( 80% 60% at 86% 98%, rgba(255, 120, 80, 0.16) 0%, rgba(255, 120, 80, 0) 60% ), linear-gradient( 180deg, rgba(15, 14, 13, 0.3) 0%, rgba(15, 14, 13, 0.06) 44%, rgba(15, 14, 13, 0.34) 100% ); } .mw-scrim { position: absolute; inset: 0; z-index: 7; pointer-events: none; background: radial-gradient( 118% 86% at 6% 6%, rgba(15, 14, 13, 0.95) 0%, rgba(15, 14, 13, 0.84) 26%, rgba(15, 14, 13, 0.46) 44%, rgba(15, 14, 13, 0.12) 64%, rgba(15, 14, 13, 0) 80% ); } .mw-grain { position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: 0.26; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .mw-vig { position: absolute; inset: 0; z-index: 9; pointer-events: none; background: radial-gradient( 126% 104% at 52% 46%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 100% ); } .mw-copy { position: relative; z-index: 8; width: 100%; } .mw-copy .display { max-width: 12ch; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 16px rgba(0, 0, 0, 0.5); } .mw-copy .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.2rem; margin-top: 2.2rem; } .mw-copy .mw-quiet { font-size: 0.95rem; color: var(--cream-mute); border-bottom: 1.5px solid var(--orange); padding-bottom: 2px; } .mw-copy .mw-quiet:hover { color: var(--cream); border-bottom-color: var(--orange-hot); } .mw-drive { position: relative; z-index: 8; margin-top: clamp(1.8rem, 4vh, 2.6rem); } .mw-drive-in { display: inline-flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; font-size: 0.9rem; color: var(--cream-mute); } .mw-drive-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: 0 0 auto; box-shadow: 0 0 0 0 rgba(255, 92, 57, 0.55); animation: mw-pulse 2.6s ease-out infinite; } @keyframes mw-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 92, 57, 0.5); } 70% { box-shadow: 0 0 0 9px rgba(255, 92, 57, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 92, 57, 0); } } .mw-drive-in b { color: var(--cream); font-weight: 600; } .mw-drive-in .mw-bar { width: 120px; height: 3px; border-radius: 999px; background: rgba(249, 247, 242, 0.16); overflow: hidden; } .mw-drive-in .mw-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--orange-ink), var(--orange-hot)); box-shadow: 0 0 14px -2px rgba(255, 92, 57, 0.8); transition: width 1.1s cubic-bezier(0.22, 0.9, 0.28, 1) 0.5s; } .mw-drive-in a { color: var(--cream); border-bottom: 1.5px solid var(--orange); padding-bottom: 1px; } .hero-wall-photo .mw-p { opacity: 1; transform: rotate(var(--r, 0deg)); } .hero-wall-photo.lit .mw-p { opacity: 1; transform: rotate(var(--r, 0deg)); } .hero-wall-photo .mw-rise { opacity: 1; transform: none; } .hero-wall-photo.lit .mw-rise { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .hero-wall-photo .mw-p, .hero-wall-photo .mw-rise { opacity: 1 !important; transform: rotate(var(--r, 0deg)) !important; transition: none !important; } .mw-drive-dot { animation: none; } .mw-drive-in .mw-bar i { transition: none; } } .hero-banner { justify-content: flex-end; padding-bottom: 0; } .hero-banner .mw-wall { inset: auto 0 0 0; height: 100%; } .hero-banner .mw-p { border-radius: 0; } .hero-banner .mw-p { bottom: 0; top: auto; } .hero-banner .mw-p img { object-position: 50% 22%; } .hero-banner .mw-p.d3 { box-shadow: 0 0 0 1px rgba(255, 150, 110, 0.13), -18px 0 44px -18px rgba(0, 0, 0, 0.95); } .hero-banner .mw-p.d2 { box-shadow: 0 0 0 1px rgba(255, 150, 110, 0.09), -14px 0 36px -18px rgba(0, 0, 0, 0.9); } .hero-banner .mw-p.d2 img { filter: brightness(0.68) contrast(0.96) blur(0.5px); } .hero-banner .mw-p.d1 img { filter: brightness(0.42) contrast(0.88) blur(1.6px); } .hero-banner .mw-haze.h1 { background: linear-gradient( 180deg, rgba(15, 14, 13, 0.86) 0%, rgba(15, 14, 13, 0.3) 34%, rgba(15, 14, 13, 0.1) 62%, rgba(15, 14, 13, 0.72) 100% ); } .hero-banner .mw-haze.h2 { background: radial-gradient( 70% 46% at 50% 108%, rgba(255, 110, 70, 0.26) 0%, rgba(255, 110, 70, 0) 66% ), linear-gradient( 180deg, rgba(15, 14, 13, 0.72) 0%, rgba(15, 14, 13, 0.1) 40%, rgba(15, 14, 13, 0) 70% ); } .hero-banner .mw-scrim { background: linear-gradient( 0deg, rgba(15, 14, 13, 0.97) 0%, rgba(15, 14, 13, 0.94) 26%, rgba(15, 14, 13, 0.72) 42%, rgba(15, 14, 13, 0.3) 56%, rgba(15, 14, 13, 0.04) 72%, rgba(15, 14, 13, 0) 84% ), linear-gradient(180deg, rgba(15, 14, 13, 0.55) 0%, rgba(15, 14, 13, 0) 26%); } .hero-banner .mw-copy { text-align: center; padding-bottom: clamp(2.5rem, 6vh, 4.5rem); } .hero-banner .mw-copy .display { font-family: var(--font-body); font-weight: 700; font-style: normal; letter-spacing: -0.035em; line-height: 0.94; font-size: clamp(2.6rem, 6.6vw, 6rem); max-width: 14ch; margin-inline: auto; } .hero-banner .mw-copy .display em { font-style: normal; } .hero-banner .mw-copy .actions { justify-content: center; } .hero-banner .mw-drive-in { justify-content: center; } .hero-banner .mw-drive { text-align: center; } @media (max-width: 1100px) { .mw-copy .display { max-width: 11ch; } .mw-scrim { background: linear-gradient( 94deg, rgba(15, 14, 13, 0.96) 0%, rgba(15, 14, 13, 0.9) 28%, rgba(15, 14, 13, 0.62) 46%, rgba(15, 14, 13, 0.18) 60%, rgba(15, 14, 13, 0) 74% ); } } @media (max-width: 900px) { .hero-wall-photo { min-height: calc(100svh - 4.4rem); padding: 0; justify-content: center; } .mw-wall { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr 1fr; row-gap: clamp(8rem, 19vh, 10.5rem); column-gap: 2px; inset: 0; } .mw-p { overflow: hidden; } .mw-p img { width: 100%; height: 100%; object-fit: cover; } .mw-wall .mw-p img { filter: grayscale(1) brightness(0.34) contrast(0.92); } .mw-haze { display: none; } .mw-scrim { background: linear-gradient( 180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.18) 22%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, 0.34) 88%, rgba(0, 0, 0, 0.72) 100% ); } .mw-copy { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 0 clamp(0.75rem, 3vw, 1.5rem); } .mw-copy .display { margin: 0; max-width: none; background: var(--photo-black); padding: clamp(1.6rem, 6vw, 2.4rem) clamp(1.2rem, 5vw, 2rem) clamp(1.5rem, 5vw, 2.2rem); font-family: var(--font-body); font-weight: 700; font-style: normal; font-size: clamp(2rem, 8.6vw, 3.2rem); line-height: 1.02; letter-spacing: -0.035em; color: var(--cream); } .mw-copy .display em { font-style: normal; } } @media (max-width: 640px) { .mw-copy .display { font-size: clamp(1.9rem, 9.2vw, 2.7rem); } .hero-wall-photo { min-height: 74svh; } }