| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720"> |
| 2 | <!-- P11 Chapter 4 VIBES · breathing · hero_page with ch4_vibes.png --> |
| 3 | |
| 4 | <g id="bg-image"> |
| 5 | <image href="../images/ch4_vibes.png" x="0" y="0" width="1280" height="720" preserveAspectRatio="xMidYMid slice"/> |
| 6 | </g> |
| 7 | |
| 8 | <!-- Chapter tag --> |
| 9 | <g id="chapter-tag"> |
| 10 | <rect x="60" y="50" width="180" height="48" fill="#FFD93D"/> |
| 11 | <rect x="60" y="50" width="14" height="48" fill="#FF3DA5"/> |
| 12 | <text x="92" y="83" font-family="Impact, "Arial Black", sans-serif" font-size="22" font-weight="900" fill="#1A1A2E" letter-spacing="6">CH · 04</text> |
| 13 | </g> |
| 14 | |
| 15 | <!-- Hero chapter title --> |
| 16 | <g id="chapter-title"> |
| 17 | <text x="305" y="290" text-anchor="start" font-family="Impact, "Arial Black", sans-serif" font-size="200" font-weight="900" fill="#FFF8EE" letter-spacing="-2">VIBES.</text> |
| 18 | <rect x="305" y="305" width="640" height="14" fill="#00B8D9"/> |
| 19 | </g> |
| 20 | |
| 21 | <!-- Subtitle pill --> |
| 22 | <g id="subtitle-pill"> |
| 23 | <rect x="305" y="345" width="640" height="60" rx="30" fill="#FFF8EE" stroke="#1A1A2E" stroke-width="4"/> |
| 24 | <text x="625" y="384" text-anchor="middle" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="24" font-weight="700" fill="#1A1A2E">音乐之外，还有 <tspan fill="#FF3DA5" font-weight="900">十种甜</tspan> 的方式</text> |
| 25 | </g> |
| 26 | |
| 27 | <!-- Three tag stickers floating --> |
| 28 | <g id="tag-market"> |
| 29 | <rect x="100" y="510" width="280" height="100" rx="14" fill="#FF3DA5" stroke="#1A1A2E" stroke-width="4" transform="rotate(-3, 240, 560)"/> |
| 30 | <use data-icon="chunk-filled/shopping-bag" x="124" y="538" width="36" height="36" fill="#1A1A2E" transform="rotate(-3, 240, 560)"/> |
| 31 | <text x="172" y="555" font-family="Impact, sans-serif" font-size="20" font-weight="900" fill="#1A1A2E" letter-spacing="2" transform="rotate(-3, 240, 560)">MARKET</text> |
| 32 | <text x="172" y="582" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" font-weight="700" fill="#1A1A2E" transform="rotate(-3, 240, 560)">50+ 摊位 · 限定周边</text> |
| 33 | </g> |
| 34 | |
| 35 | <g id="tag-install"> |
| 36 | <rect x="500" y="500" width="280" height="100" rx="14" fill="#FFD93D" stroke="#1A1A2E" stroke-width="4" transform="rotate(2, 640, 550)"/> |
| 37 | <use data-icon="chunk-filled/game-controller" x="524" y="528" width="36" height="36" fill="#1A1A2E" transform="rotate(2, 640, 550)"/> |
| 38 | <text x="572" y="545" font-family="Impact, sans-serif" font-size="20" font-weight="900" fill="#1A1A2E" letter-spacing="2" transform="rotate(2, 640, 550)">ART INSTALL</text> |
| 39 | <text x="572" y="572" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" font-weight="700" fill="#1A1A2E" transform="rotate(2, 640, 550)">10 件巨型装置 · AR 互动</text> |
| 40 | </g> |
| 41 | |
| 42 | <g id="tag-food"> |
| 43 | <rect x="900" y="510" width="280" height="100" rx="14" fill="#00C896" stroke="#1A1A2E" stroke-width="4" transform="rotate(-2, 1040, 560)"/> |
| 44 | <use data-icon="chunk-filled/heart" x="924" y="538" width="36" height="36" fill="#1A1A2E" transform="rotate(-2, 1040, 560)"/> |
| 45 | <text x="972" y="555" font-family="Impact, sans-serif" font-size="20" font-weight="900" fill="#1A1A2E" letter-spacing="2" transform="rotate(-2, 1040, 560)">FOOD & FUN</text> |
| 46 | <text x="972" y="582" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" font-weight="700" fill="#1A1A2E" transform="rotate(-2, 1040, 560)">40+ 餐车 · 篝火 · 工坊</text> |
| 47 | </g> |
| 48 | |
| 49 | <!-- Floating decoration --> |
| 50 | <g id="decor"> |
| 51 | <circle cx="150" cy="160" r="10" fill="#FFD93D" stroke="#FFF8EE" stroke-width="2"/> |
| 52 | <circle cx="180" cy="180" r="6" fill="#FF3DA5" stroke="#FFF8EE" stroke-width="2"/> |
| 53 | <path d="M 1080 150 L 1110 130 L 1110 150 L 1140 130" stroke="#FFD93D" stroke-width="4" fill="none" stroke-linecap="round"/> |
| 54 | <polygon points="1190,180 1220,210 1160,210" fill="#FF3DA5" stroke="#FFF8EE" stroke-width="2"/> |
| 55 | </g> |
| 56 | |
| 57 | <!-- Footer --> |
| 58 | <g id="footer"> |
| 59 | <text x="1220" y="700" text-anchor="end" font-family="Impact, sans-serif" font-size="14" font-weight="900" fill="#FFF8EE" letter-spacing="3">11 / 14 · SUGAR RUSH</text> |
| 60 | </g> |
| 61 | </svg> |
| 62 |