DeCentN2Madness/aia-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(video): add YouTube lightbox to benefits section

Browse Source 
Replaces static video link with a self-contained VideoCard component
that opens a native <dialog> lightbox with autoplay on open and
iframe src teardown on close. Includes pulsing ring animation on the
play button and a rounded-triangle SVG icon.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Hales
2026-06-09 14:16:00 -07:00
parent 615412c880
commit ce5e53c71f
7 changed files with 77 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/src/styles/components.css
+11 -2
View File
@@ -105,9 +105,18 @@
.source-list li > p { margin-block: 0; }
.two-column-list { columns: 2; }
.benefit-grid { grid-template-columns: 1.1fr .9fr; }
.video-card { display: block; position: relative; }
.video-card { background: none; border: none; cursor: pointer; display: block; padding: 0; position: relative; }
.video-card img { width: 100%; }
.video-card span { align-items: center; background: var(--color-accent); border-radius: 50%; color: white; display: flex; height: 64px; justify-content: center; left: calc(50% - 32px); position: absolute; top: calc(50% - 32px); width: 64px; }
.video-card span { align-items: center; background: var(--color-accent); border-radius: 50%; color: white; display: flex; height: 64px; justify-content: center; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 64px; z-index: 1; }
.video-card::before, .video-card::after { animation-duration: 3s; animation-iteration-count: infinite; animation-name: video-ripple; animation-timing-function: cubic-bezier(.65, 0, .34, 1); border: 8px solid var(--color-accent); border-radius: 50%; content: ""; height: 64px; left: 50%; opacity: 0; position: absolute; top: 50%; width: 64px; }
.video-card::before { animation-delay: .5s; }
@keyframes video-ripple { 0% { opacity: 1; transform: translate(-50%, -50%) scale3d(.75, .75, 1); } to { opacity: 0; transform: translate(-50%, -50%) scale3d(1.5, 1.5, 1); } }
.video-dialog { background: none; border: none; box-sizing: border-box; max-width: min(90vw, 900px); padding: 1rem 1rem 0 0; width: 100%; }
.video-dialog::backdrop { background: rgba(0, 0, 0, .85); }
.video-dialog-inner { position: relative; }
.video-dialog-frame { aspect-ratio: 16 / 9; width: 100%; }
.video-dialog-frame iframe { border: none; height: 100%; width: 100%; }
.video-dialog-close { background: white; border: none; border-radius: 50%; cursor: pointer; font-size: 1rem; height: 2rem; line-height: 2rem; position: absolute; right: -1rem; top: -1rem; width: 2rem; }
.skills-section { background: var(--color-primary); color: white; padding-block: 4rem; text-align: center; }
.skills-section h2 { color: white; }
.skills-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); margin-top: 2.5rem; }