| <!DOCTYPE html> |
| <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; |
| } |
| |
| |
| .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; |
| } |
| |
| |
| .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 { |
| 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 { |
| 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-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> |
|
|
| |
| <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> |
