ypshimandClaude Haiku 5.5
ef596650cc
- 사용 가이드 옆 '▶ 소개 영상 1분' 버튼, 네이티브 dialog에서 재생 - 자체 호스팅 mp4(56초·1920×1080·H.264, 무음), 열 때만 로드(preload none), 무음 자동재생 - Esc·배경·닫기로 종료 시 일시정지·처음으로·포커스 복귀, 모션 감소 시 자동재생 안 함 - 자막 원본(.srt)은 보관만, 화면 미연결 - verify-intro-video.cjs: Chrome 17개 검사 Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
52 lines
3.2 KiB
CSS
52 lines
3.2 KiB
CSS
/* Intro video trigger + modal. Shares the guide trigger/dialog visual language (landing-white). */
|
|
.landing-video-trigger {
|
|
display: inline-flex; align-items: center; gap: 9px; min-height: 36px; margin: 13px 0 0 8px; padding: 7px 12px;
|
|
border: 1px solid #d6e3ed; border-radius: 999px; background: #ffffffeb; color: #203b54;
|
|
font-size: 11px !important; box-shadow: 0 3px 10px #27496207; cursor: pointer;
|
|
transition: box-shadow .25s, background .25s, border-color .25s; animation: landing-enter .7s 1.45s both;
|
|
}
|
|
.landing-video-trigger > span:first-child {
|
|
display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
|
|
background: #087fcb; color: #fff; font-size: 7px; padding-left: 1px;
|
|
}
|
|
.landing-video-trigger-time { color: #64748b; font-variant-numeric: tabular-nums; }
|
|
.landing-video-trigger:hover { background: #eff6ff; border-color: #9dc6e2; box-shadow: 0 4px 16px #267daa10; }
|
|
.landing-video-trigger:focus-visible { outline: 2px solid #087fcb; outline-offset: 2px; }
|
|
|
|
.landing-video {
|
|
width: min(1120px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 18px 20px 16px;
|
|
border: 1px solid #d1e2ee; border-radius: 18px; color-scheme: light; color: #14263d;
|
|
background: linear-gradient(145deg, #fff, #f8fbfe); box-shadow: 0 24px 90px #2247652b, inset 0 1px #fff;
|
|
overflow: auto;
|
|
}
|
|
.landing-video::backdrop { background: #253f5966; backdrop-filter: blur(5px); }
|
|
.landing-video-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
|
|
.landing-video-kicker { display: block; color: #36779d; font-size: 11px; letter-spacing: .14em; font-weight: 600; }
|
|
.landing-video-head h2 { margin: 4px 0 0; font-size: 18px; color: #14263d; }
|
|
.landing-video-close {
|
|
flex: none; width: 44px; height: 44px; border: 1px solid #d5e5ef; border-radius: 10px;
|
|
background: #f5f9fc; color: #456478; font-size: 22px; line-height: 1; cursor: pointer;
|
|
}
|
|
.landing-video-close:hover { background: #eaf3f9; }
|
|
.landing-video-close:focus-visible { outline: 2px solid #087fcb; outline-offset: 2px; }
|
|
.landing-video-frame {
|
|
position: relative; aspect-ratio: 16 / 9; max-height: calc(100dvh - 190px); margin: 0 auto;
|
|
border-radius: 12px; overflow: hidden; background: #f4f6f8; border: 1px solid #e2ebf2;
|
|
}
|
|
.landing-video-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: #f4f6f8; }
|
|
.landing-video-desc { margin: 10px 2px 0; color: #64748b; font-size: 12.5px; line-height: 1.5; }
|
|
|
|
/* Different icon glyphs give the two inline-flex pills different baselines; align their boxes instead. */
|
|
.landing-brand-meta .landing-guide-trigger, .landing-video-trigger { vertical-align: middle; }
|
|
/* Mirror the guide trigger's responsive margins (landing-page.css). */
|
|
@media (max-width: 1100px) and (min-width: 761px) { .landing-video-trigger { margin-top: 8px; } }
|
|
@media (max-height: 560px) { .landing-brand-meta .landing-video-trigger { margin-top: 6px; } }
|
|
@media (max-width: 760px) {
|
|
.landing-video-trigger { min-height: 30px; font-size: 9px !important; margin: 8px 0 0 6px; padding: 5px 9px; }
|
|
.landing-video { padding: 12px; border-radius: 14px; }
|
|
.landing-video-head h2 { font-size: 15px; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.landing-video-trigger { animation: none; transition: none; }
|
|
}
|