@import "nav.css"; /* ============================================================ YEV — SITE STRUCTURE + SOUL PASS v3 (yevent.app) Concert poster × culture magazine. Anton poster headlines, Instrument Serif italic accent words, tilted stickers and cards, heat gradients (amber → red-orange), equalizer bars, rotating badge, taped-on marquee strip. Mobile-first. CSS-only effects except script.js (reveal). All colors/fonts come from tokens.css. ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--color-accent-dark) var(--color-background); overflow-x: clip; /* iOS: body-level clip alone doesn't reliably stop ghost-word pan */ } body { font-family: var(--font-body); background: var(--color-background); color: var(--color-text); -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; /* ghost words + tilted strips bleed off-edge */ } /* ─── ATMOSPHERE: sunset stage glows (fixed, behind all) ── */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 90% 55% at 55% 112%, var(--color-accent-glow), transparent 65%), radial-gradient(ellipse 60% 42% at 8% 106%, var(--color-heat-glow), transparent 70%), radial-gradient(ellipse 45% 32% at 96% -6%, var(--color-accent-glow), transparent 70%); } /* ─── ATMOSPHERE: fine grain over everything ───────────── */ body::after { content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; } ::selection { background: var(--color-accent); color: var(--color-text-inverse); } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--color-background); } ::-webkit-scrollbar-thumb { background: var(--color-accent-dark); } ::-webkit-scrollbar-thumb:hover { background: var(--color-accent); } /* ─── MOTION: scroll-reveal (needs .js on ) ───────── */ .reveal { --tilt: rotate(0deg); } .js .reveal { opacity: 0; transform: translateY(20px) var(--tilt); transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1); } .js .reveal.is-visible { opacity: 1; transform: var(--tilt); } .js .step-item.reveal:nth-of-type(2), .js .compare-card.reveal:nth-of-type(2) { transition-delay: 0.1s; } .js .step-item.reveal:nth-of-type(3) { transition-delay: 0.2s; } .js .step-item.reveal:nth-of-type(4) { transition-delay: 0.3s; } /* ─── GHOST DISPLAY TYPE — bleeds off the page edges ────── */ [data-ghost] { position: relative; } [data-ghost] > * { position: relative; z-index: 1; } [data-ghost]::before { content: attr(data-ghost); position: absolute; top: -0.14em; right: -0.18em; z-index: 0; font-family: var(--font-headline); font-weight: 400; font-size: clamp(8rem, 32vw, 24rem); line-height: 1; white-space: nowrap; pointer-events: none; user-select: none; color: var(--color-ghost-fill); } @supports (-webkit-text-stroke: 1px #fff) { [data-ghost]::before { color: transparent; -webkit-text-stroke: 1.5px var(--color-ghost); } } /* right-aligned events section carries its ghost on the left */ .events[data-ghost]::before { right: auto; left: -0.18em; } footer[data-ghost] { overflow: hidden; } footer[data-ghost]::before { top: auto; bottom: -0.16em; right: 50%; transform: translateX(50%); } /* (NAV — moved wholesale to nav.css, R2 extraction 2026-08-07. The @import on line 1 delivers it to every style.css consumer; manager surfaces load nav.css directly and skip this file.) */ /* ─── BUTTONS: gold sweep from left (.nav-cta half moved to nav.css at the 2026-08-07 R2 extraction — rules byte-identical) ─── */ .btn-primary { font-weight: 700; text-transform: uppercase; color: var(--color-text-inverse); text-decoration: none; background-image: linear-gradient(100deg, var(--color-accent-dark) 0 50%, var(--color-accent) 50% 100%); background-size: 205% 100%; background-position: 100% 0; transition: background-position 0.2s ease, transform 0.1s ease; } .btn-primary:hover { background-position: 0 0; } .btn-primary:active { transform: scale(0.97); } .btn-primary { font-family: var(--font-body); /*