| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720"> |
| 2 | <!-- P02 Chapter 1 WHAT · breathing · hero_page with ch1_what.png --> |
| 3 | |
| 4 | <defs> |
| 5 | <linearGradient id="topScrim02" x1="0" y1="0" x2="0" y2="1"> |
| 6 | <stop offset="0%" stop-color="#FFF8EE" stop-opacity="0.0"/> |
| 7 | <stop offset="100%" stop-color="#FFF8EE" stop-opacity="0.0"/> |
| 8 | </linearGradient> |
| 9 | </defs> |
| 10 | |
| 11 | <g id="bg-image"> |
| 12 | <image href="../images/ch1_what.png" x="0" y="0" width="1280" height="720" preserveAspectRatio="xMidYMid slice"/> |
| 13 | </g> |
| 14 | |
| 15 | <!-- Black bar with chapter number top-left --> |
| 16 | <g id="chapter-tag"> |
| 17 | <rect x="60" y="50" width="180" height="48" rx="0" fill="#1A1A2E"/> |
| 18 | <rect x="60" y="50" width="14" height="48" fill="#FFD93D"/> |
| 19 | <text x="92" y="83" font-family="Impact, "Arial Black", sans-serif" font-size="22" font-weight="900" fill="#FFF8EE" letter-spacing="6">CH · 01</text> |
| 20 | </g> |
| 21 | |
| 22 | <!-- Hero chapter title centered upper --> |
| 23 | <g id="chapter-title"> |
| 24 | <text x="640" y="290" text-anchor="middle" font-family="Impact, "Arial Black", sans-serif" font-size="180" font-weight="900" fill="#1A1A2E" letter-spacing="-2">WHAT.</text> |
| 25 | <!-- Pink underline accent --> |
| 26 | <rect x="425" y="305" width="430" height="14" fill="#FF3DA5"/> |
| 27 | </g> |
| 28 | |
| 29 | <!-- Subtitle band --> |
| 30 | <g id="subtitle-band"> |
| 31 | <rect x="160" y="370" width="960" height="80" rx="12" fill="#FFF8EE" stroke="#1A1A2E" stroke-width="4"/> |
| 32 | <text x="640" y="422" text-anchor="middle" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="28" font-weight="700" fill="#1A1A2E">当全世界都在变热，我们决定，让它<tspan fill="#FF3DA5" font-weight="900">变甜</tspan>。</text> |
| 33 | </g> |
| 34 | |
| 35 | <!-- Decoration: zigzag bolt + dots --> |
| 36 | <g id="decor-right"> |
| 37 | <path d="M 1150 200 L 1100 250 L 1140 250 L 1090 310" stroke="#FFD93D" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/> |
| 38 | <circle cx="1180" cy="180" r="14" fill="#FF3DA5" stroke="#1A1A2E" stroke-width="3"/> |
| 39 | <circle cx="1200" cy="220" r="8" fill="#00C896" stroke="#1A1A2E" stroke-width="2"/> |
| 40 | </g> |
| 41 | |
| 42 | <!-- Decoration: triangle + checker bottom-left --> |
| 43 | <g id="decor-bottom-left"> |
| 44 | <polygon points="80,620 130,560 130,620" fill="#00B8D9" stroke="#1A1A2E" stroke-width="3"/> |
| 45 | <g id="checker-bl"> |
| 46 | <rect x="60" y="650" width="14" height="14" fill="#1A1A2E"/> |
| 47 | <rect x="74" y="650" width="14" height="14" fill="#FFF8EE" stroke="#1A1A2E" stroke-width="2"/> |
| 48 | <rect x="88" y="650" width="14" height="14" fill="#1A1A2E"/> |
| 49 | <rect x="60" y="664" width="14" height="14" fill="#FFF8EE" stroke="#1A1A2E" stroke-width="2"/> |
| 50 | <rect x="74" y="664" width="14" height="14" fill="#1A1A2E"/> |
| 51 | <rect x="88" y="664" width="14" height="14" fill="#FFF8EE" stroke="#1A1A2E" stroke-width="2"/> |
| 52 | </g> |
| 53 | </g> |
| 54 | |
| 55 | <!-- Page number footer --> |
| 56 | <g id="footer"> |
| 57 | <text x="1220" y="700" text-anchor="end" font-family="Impact, sans-serif" font-size="14" font-weight="900" fill="#1A1A2E" letter-spacing="3">02 / 14 · SUGAR RUSH</text> |
| 58 | </g> |
| 59 | </svg> |
| 60 |