TeenStreet 2026 — PATHS :root{ --paper:#F2ECDA; --forest:#1F3A2E; --clay:#B5541F; --dusk:#2A4159; --gold:#E3A93A; --line: rgba(31,58,46,0.16); } *{box-sizing:border-box; margin:0; padding:0;} html,body{background:#d9d2bb; display:flex; justify-content:center; padding:32px 0; font-family:'Inter',sans-serif;} .poster{ position:relative; width:1080px; height:1350px; background:var(--paper); overflow:hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.35); color:var(--forest); } /* topographic contour backdrop */ .contours{position:absolute; inset:0; opacity:0.55;} .grain{ position:absolute; inset:0; background-image: radial-gradient(rgba(31,58,46,0.05) 1px, transparent 1px); background-size: 4px 4px; mix-blend-mode:multiply; pointer-events:none; } .top-strip{ position:relative; padding:56px 64px 0 64px; display:flex; justify-content:space-between; align-items:flex-start; } .eyebrow{ font-family:'Inter',sans-serif; font-weight:600; letter-spacing:0.3em; font-size:15px; text-transform:uppercase; color:var(--dusk); } .eyebrow span{color:var(--clay);} .year-badge{ border:2px solid var(--forest); border-radius:999px; padding:6px 18px; font-family:'Inter',sans-serif; font-weight:600; font-size:14px; letter-spacing:0.08em; } .headline-block{ position:relative; padding:18px 64px 0 64px; } .headline{ font-family:'Big Shoulders Display', sans-serif; font-weight:900; font-size:230px; line-height:0.82; letter-spacing:0.01em; color:var(--forest); text-transform:uppercase; } .headline .accent{ color:var(--clay); } .subhead{ font-family:'Caveat', cursive; font-size:40px; color:var(--dusk); margin-top:6px; transform:rotate(-1.2deg); } /* trail path */ .trail-svg{ position:absolute; top:560px; left:0; width:1080px; height:560px; z-index:1; } .stops{ position:relative; z-index:2; padding:0 64px; margin-top:600px; } .stop{ display:flex; align-items:flex-start; gap:22px; margin-bottom:46px; max-width:560px; } .stop .marker{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; background:var(--paper); border:3px solid var(--forest); display:flex; align-items:center; justify-content:center; font-family:'Big Shoulders Display', sans-serif; font-weight:700; font-size:20px; color:var(--forest); } .stop.right{ margin-left:auto; } .stop .txt-label{ font-family:'Inter',sans-serif; font-weight:600; font-size:14px; letter-spacing:0.14em; text-transform:uppercase; color:var(--clay); margin-bottom:4px; } .stop .txt-value{ font-family:'Big Shoulders Display', sans-serif; font-weight:700; font-size:34px; line-height:1; color:var(--forest); } .stop .txt-sub{ font-family:'Inter',sans-serif; font-size:15px; color:var(--dusk); margin-top:6px; line-height:1.4; } .footer{ position:absolute; bottom:0; left:0; right:0; background:var(--forest); color:var(--paper); padding:34px 64px; display:flex; justify-content:space-between; align-items:center; } .footer .cta{ font-family:'Big Shoulders Display', sans-serif; font-weight:700; font-size:30px; letter-spacing:0.02em; } .footer .cta span{color:var(--gold);} .footer .meta{ font-family:'Inter',sans-serif; font-size:14px; text-align:right; line-height:1.5; color:rgba(242,236,218,0.75); }

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); }

this is test text for the ticker element! this is test text for the ticker element! this is test text for the ticker element! this is test text for the ticker element! this is test text for the ticker element! this is test text for the ticker element!