Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <style> | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { | |
| --bg:#F7F9FC; --surface:#FFFFFF; --surface-2:#F1F5F9; | |
| --border:#E2E8F0; --blue:#2D5BE3; --blue-light:#EEF2FD; --blue-mid:#DBEAFE; | |
| --teal:#0E9E6E; --teal-light:#ECFDF5; --teal-mid:#D1FAE5; | |
| --text-1:#0F172A; --text-2:#475569; --text-3:#94A3B8; | |
| } | |
| body { | |
| width:1920px; height:1080px; overflow:hidden; | |
| background:var(--bg); | |
| font-family:'Segoe UI', Arial, sans-serif; | |
| display:flex; align-items:center; justify-content:center; | |
| flex-direction:column; gap:0; | |
| position:relative; | |
| } | |
| /* SVG background decorations */ | |
| .deco-top-right { | |
| position:absolute; top:-60px; right:-60px; | |
| } | |
| .deco-bot-left { | |
| position:absolute; bottom:-80px; left:-60px; | |
| } | |
| .deco-center-ring { | |
| position:absolute; top:50%; left:50%; | |
| transform:translate(-50%,-50%); | |
| pointer-events:none; | |
| } | |
| /* Content stack */ | |
| .stack { | |
| display:flex; flex-direction:column; | |
| align-items:center; gap:28px; position:relative; z-index:1; | |
| } | |
| .eyebrow { | |
| font-size:13px; letter-spacing:5px; color:var(--teal); | |
| text-transform:uppercase; font-weight:600; | |
| opacity:0; animation:fadeUp 0.6s ease-out 0.2s forwards; | |
| } | |
| .goal-title { | |
| font-size:88px; font-weight:800; color:var(--text-1); | |
| letter-spacing:-3px; line-height:1; text-align:center; | |
| opacity:0; transform:translateY(20px); | |
| animation:fadeUp 0.8s ease-out 0.4s forwards; | |
| } | |
| /* Market badge */ | |
| .market-badge { | |
| padding:14px 52px; border-radius:50px; | |
| background:var(--teal-light); | |
| border:2px solid var(--teal-mid); | |
| font-size:34px; font-weight:700; color:var(--teal); | |
| opacity:0; transform:scale(0.9); | |
| animation:popIn 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.75s forwards; | |
| } | |
| /* Divider */ | |
| .divider { | |
| width:64px; height:3px; border-radius:2px; | |
| background:linear-gradient(to right, var(--blue), var(--teal)); | |
| opacity:0; animation:fadeIn 0.5s ease-out 1s forwards; | |
| } | |
| /* Identity statement */ | |
| .identity-stmt { | |
| font-size:24px; color:var(--text-2); line-height:1.6; | |
| text-align:center; max-width:900px; | |
| opacity:0; animation:fadeUp 0.7s ease-out 1.1s forwards; | |
| } | |
| @keyframes fadeUp { | |
| from { opacity:0; transform:translateY(16px); } | |
| to { opacity:1; transform:translateY(0); } | |
| } | |
| @keyframes fadeIn { to { opacity:1; } } | |
| @keyframes popIn { | |
| from { opacity:0; transform:scale(0.88); } | |
| to { opacity:1; transform:scale(1); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Background SVG decorations --> | |
| <svg class="deco-top-right" width="480" height="480" viewBox="0 0 480 480" fill="none"> | |
| <circle cx="380" cy="100" r="340" stroke="#E2E8F0" stroke-width="1.5"/> | |
| <circle cx="380" cy="100" r="240" stroke="#DBEAFE" stroke-width="1.5"/> | |
| <circle cx="380" cy="100" r="140" stroke="#EEF2FD" stroke-width="1.5"/> | |
| </svg> | |
| <svg class="deco-bot-left" width="400" height="400" viewBox="0 0 400 400" fill="none"> | |
| <circle cx="60" cy="340" r="300" stroke="#D1FAE5" stroke-width="1.5"/> | |
| <circle cx="60" cy="340" r="200" stroke="#ECFDF5" stroke-width="1.5"/> | |
| </svg> | |
| <svg class="deco-center-ring" width="700" height="700" viewBox="0 0 700 700" fill="none"> | |
| <circle cx="350" cy="350" r="340" stroke="#E2E8F0" stroke-width="1" stroke-dasharray="6 8"/> | |
| </svg> | |
| <div class="stack"> | |
| <div class="eyebrow">Your Next Identity</div> | |
| <div class="goal-title">{{ beat.on_screen.goal }}</div> | |
| <div class="market-badge">{{ beat.on_screen.market_value }}</div> | |
| <div class="divider"></div> | |
| <div class="identity-stmt">{{ beat.on_screen.identity_statement }}</div> | |
| </div> | |
| </body> | |
| </html> |