till/vk-friseur
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Galerie: 9:16 Reels/Motion-Sektion ergänzt

Browse Source
This commit is contained in:
Till Heidrich
2026-06-24 10:50:28 +00:00
parent 20b7fe53a0
commit 16109dcfc2
2 changed files with 25 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+12
View File
@@ -156,6 +156,18 @@ section { padding: clamp(72px, 10vw, 130px) 0; }
.gallery .tall { grid-row: span 2; }
.insta-cta { text-align: center; margin-top: 2rem; }
/* REELS 9:16 */
.reels-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 3rem 0 1.2rem; flex-wrap: wrap; }
.reels-head h3 { font-size: 1.5rem; }
.reels-head span { font-size: 0.9rem; color: var(--soft); }
.reels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.reel { aspect-ratio: 9/16; border-radius: var(--radius); overflow: hidden; position: relative; border: 1px solid var(--border); }
.reel img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.reel:hover img { transform: scale(1.06); }
.reel::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 1.6rem; background: linear-gradient(180deg, rgba(26,26,26,.05), rgba(26,26,26,.45)); text-shadow: 0 2px 12px rgba(0,0,0,.4); transition: transform 0.3s; }
.reel:hover::after { transform: scale(1.15); }
.reel .rlabel { position: absolute; left: 10px; bottom: 10px; z-index: 2; font-size: 0.7rem; font-weight: 600; color: #fff; background: rgba(26,26,26,.55); backdrop-filter: blur(4px); padding: 3px 9px; border-radius: 20px; }
/* WALLET / STEMPELKARTE */
.wallet-sec { background: linear-gradient(160deg, var(--nude), var(--cream-2)); }
.wallet-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }