TeenStreet 2026 — PATHS (animated) :root{ --paper:#0C1B2E; --ink:#EAF2FA; --blue-deep:#123A63; --blue-mid:#2E6FB8; --blue-bright:#5FB4E8; --blue-glow:#9FD8FF; --gold:#E3A93A; } *{box-sizing:border-box; margin:0; padding:0;} html,body{ background:#050d16; display:flex; justify-content:center; align-items:center; min-height:100vh; font-family:'Inter',sans-serif; } .poster{ position:relative; width:1080px; height:1080px; background: radial-gradient(ellipse at 30% 15%, rgba(95,180,232,0.20), transparent 55%), radial-gradient(ellipse at 80% 90%, rgba(46,111,184,0.25), transparent 50%), var(--paper); overflow:hidden; color:var(--ink); -webkit-mask-image: radial-gradient(ellipse at center, black 58%, transparent 88%); mask-image: radial-gradient(ellipse at center, black 58%, transparent 88%); } .grain{ position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 4px 4px; pointer-events:none; } .top-strip{ position:relative; z-index:3; padding:52px 60px 0 60px; display:flex; justify-content:space-between; align-items:flex-start; } .eyebrow{ font-weight:600; letter-spacing:0.32em; font-size:14px; text-transform:uppercase; color:var(--blue-glow); opacity:0.85; } .year-badge{ border:2px solid var(--blue-glow); border-radius:999px; padding:6px 18px; font-weight:600; font-size:13px; letter-spacing:0.08em; color:var(--blue-glow); } .headline{ position:relative; z-index:3; font-family:'Big Shoulders Display', sans-serif; font-weight:900; font-size:210px; line-height:0.82; letter-spacing:0.01em; text-transform:uppercase; padding:14px 60px 0 60px; color:var(--ink); } .headline .accent{ color:var(--blue-bright); text-shadow:0 0 30px rgba(95,180,232,0.55); } .subhead{ position:relative; z-index:3; font-family:'Caveat', cursive; font-size:38px; color:var(--blue-glow); padding:4px 60px 0 60px; transform:rotate(-1deg); } /* animated trail */ .trail-wrap{ position:absolute; inset:0; z-index:1; } .trail-line{ fill:none; stroke:var(--blue-mid); stroke-width:3.5; stroke-linecap:round; stroke-dasharray: 14 16; animation: dashmove 3.2s linear infinite; filter: drop-shadow(0 0 6px rgba(46,111,184,0.6)); } .trail-glow{ fill:none; stroke:var(--blue-glow); stroke-width:1.4; stroke-linecap:round; stroke-dasharray: 4 26; opacity:0.85; animation: dashmove 3.2s linear infinite; } @keyframes dashmove{ to{ stroke-dashoffset: -300; } } .marker{ fill:var(--paper); stroke:var(--blue-bright); stroke-width:3; animation: pulse 2.4s ease-in-out infinite; } .marker:nth-of-type(2){ animation-delay:0.4s; } .marker:nth-of-type(3){ animation-delay:0.8s; } @keyframes pulse{ 0%,100%{ r:9; opacity:1; } 50%{ r:13; opacity:0.65; } } .stops{ position:relative; z-index:3; padding:0 60px; margin-top:36px; display:flex; justify-content:space-between; } .stop{ max-width:270px; } .stop .label{ font-weight:600; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--blue-bright); margin-bottom:4px; } .stop .value{ font-family:'Big Shoulders Display', sans-serif; font-weight:700; font-size:26px; line-height:1.05; color:var(--ink); } .footer{ position:absolute; bottom:0; left:0; right:0; z-index:3; background:rgba(18,58,99,0.55); backdrop-filter: blur(3px); padding:30px 60px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(159,216,255,0.2); } .cta{ font-family:'Big Shoulders Display', sans-serif; font-weight:700; font-size:28px; } .cta span{ color:var(--gold); } .meta{ font-size:13px; text-align:right; line-height:1.5; color:rgba(234,242,250,0.75); }