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