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