fix(tarot): 랜딩 영상 element 복원 + scroll-cue 제거
- codex UI 재구성 시 <video> element 자체와 .tarot__hero-video CSS가 누락되어 영상 재생 불가 (poster img만 정적 표시). - <video> 복원 (autoplay, loop, muted, playsInline) + poster fallback. - CSS z-index 0으로 poster 위, overlay(1) 아래에 stack. - prefers-reduced-motion @media display:none 동작 복원. - 사용자 요청에 따라 tarot__scroll-cue 제거. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -40,6 +40,20 @@
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.tarot__hero-video {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.tarot__hero-video { display: none; }
|
||||
}
|
||||
|
||||
.tarot__hero-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
@@ -6,6 +6,17 @@ export default function Tarot() {
|
||||
return (
|
||||
<div className="tarot tarot--landing">
|
||||
<img className="tarot__hero-poster" src="/images/tarot_background.png" alt="" aria-hidden />
|
||||
<video
|
||||
className="tarot__hero-video"
|
||||
src="/videos/tarot_hero.mp4"
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
preload="metadata"
|
||||
poster="/images/tarot_background.png"
|
||||
aria-hidden
|
||||
/>
|
||||
<div className="tarot__hero-overlay" />
|
||||
<div className="tarot__corner tarot__corner--left" aria-hidden />
|
||||
<div className="tarot__corner tarot__corner--right" aria-hidden />
|
||||
@@ -64,10 +75,6 @@ export default function Tarot() {
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div className="tarot__scroll-cue" aria-hidden>
|
||||
<span>SCROLL TO DISCOVER</span>
|
||||
<b>⌄</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user