/* ════════════════════════════════════════════════════════════════════════════ IPN 2026 · Unified Typography + HUD System · v=20260522-2200-end Loaded LAST in cascade (end of on home + footer.php on show pages). All selectors prefixed with body.page-home / body.page-show for specificity win. ════════════════════════════════════════════════════════════════════════════ */ :root { --t-1: rgba(232,228,220, 1); --t-2: rgba(232,228,220, .9); --t-3: rgba(232,228,220, .75); --t-4: rgba(232,228,220, .55); --t-5: rgba(232,228,220, .38); --l-1: rgba(200,245,66, 1); --l-2: rgba(200,245,66, .85); --l-3: rgba(200,245,66, .65); --l-4: rgba(200,245,66, .4); --f-display: 'Bebas Neue', Impact, sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, monospace; } /* ════════════════════════════════════════════════════════════════ 01 · TYPOGRAPHY · applies on home AND show pages ════════════════════════════════════════════════════════════════ */ /* ── H1 (hero only) ─────────────────────────────────────────────── */ body.page-home .t-h1, body.page-home .hero-vb-h1, body.page-home .hero-va-h1, html body[class*="page-"] .t-h1 { font-family: var(--f-display) !important; font-size: clamp(64px, 9vw, 124px) !important; line-height: .88 !important; letter-spacing: .015em !important; color: #fff !important; text-transform: uppercase; } /* ── H2 (section heading) ───────────────────────────────────────── */ html body[class*="page-"] .sec-h2, html body[class*="page-"] .cities-title, html body[class*="page-"] .chris-body h2, html body[class*="page-"] .guests-head h3, html body[class*="page-"] .closer-h2, html body[class*="page-"] .fs-h2, html body[class*="page-"] .cta-vb-h2, html body[class*="page-"] .cta-left h2, html body[class*="page-"] #final h2, html body[class*="page-"] .t-h2 { font-family: var(--f-display) !important; font-size: clamp(48px, 7vw, 96px) !important; line-height: .92 !important; letter-spacing: .015em !important; color: #fff !important; text-transform: uppercase !important; font-weight: 400 !important; } html body[class*="page-"] .closer-h2 { font-size: clamp(64px, 9vw, 124px) !important; } /* ── H3 (card heading) ──────────────────────────────────────────── */ html body[class*="page-"] .fs-right h3, html body[class*="page-"] .closer-signup h3, html body[class*="page-"] .t-h3 { font-family: var(--f-display) !important; font-size: clamp(28px, 3.4vw, 40px) !important; line-height: 1 !important; letter-spacing: .02em !important; color: #fff !important; text-transform: uppercase !important; font-weight: 400 !important; } /* ── EYEBROWS · unified ─────────────────────────────────────────── */ html body[class*="page-"] .sec-label, html body[class*="page-"] .sec-tag, html body[class*="page-"] .ipn-tag, html body[class*="page-"] .closer-tag, html body[class*="page-"] .mystery-row-label, html body[class*="page-"] .hero-sup, html body[class*="page-"] .hero-vb-eyebrow, html body[class*="page-"] .hero-va-eyebrow, html body[class*="page-"] .cta-vb-eyebrow, html body[class*="page-"] .t-eyebrow { font-family: var(--f-mono) !important; font-weight: 500 !important; font-size: 11px !important; letter-spacing: .22em !important; color: var(--l-2) !important; text-transform: uppercase !important; margin-bottom: 16px !important; line-height: 1.4 !important; } /* `›` prefix on standard eyebrows */ html body[class*="page-"] .sec-label::before, html body[class*="page-"] .sec-tag::before, html body[class*="page-"] .closer-tag::before, html body[class*="page-"] .hero-sup::before { content: "› " !important; color: var(--lime, #c8f542) !important; font-weight: 700 !important; margin-right: 0 !important; } /* `●` animated pulse on dot-style eyebrows */ html body[class*="page-"] .ipn-tag::before, html body[class*="page-"] .mystery-row-label::before { content: "● " !important; color: var(--lime, #c8f542) !important; animation: hud-pulse 1.8s ease-in-out infinite; } /* Signup pill — keep its bordered style */ html body[class*="page-"] .fs-right .pill, html body[class*="page-"] .closer-signup .pill { font-family: var(--f-mono) !important; font-size: 10.5px !important; letter-spacing: .2em !important; color: var(--l-2) !important; text-transform: uppercase !important; border: 1px solid var(--l-4) !important; padding: 5px 11px !important; align-self: flex-start !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } /* ── SUBTITLES · unified ────────────────────────────────────────── */ html body[class*="page-"] .sec-sub, html body[class*="page-"] .guests-sub, html body[class*="page-"] .ipn-hero__deck, html body[class*="page-"] .closer-sub, html body[class*="page-"] .cities-sub, html body[class*="page-"] .hero-va-body, html body[class*="page-"] .hero-vb-deck, html body[class*="page-"] .t-sub { font-family: var(--f-mono) !important; font-size: clamp(16px, 1.45vw, 19px) !important; line-height: 1.7 !important; color: var(--t-2) !important; max-width: 56ch; margin-top: 14px !important; margin-bottom: 0; } /* ── BODY paragraphs · unified ──────────────────────────────────── */ html body[class*="page-"] .lf-grid p.body, html body[class*="page-"] .chris-body p, html body[class*="page-"] .hero-body, html body[class*="page-"] .hero-explainer, html body[class*="page-"] .fs-item-body, html body[class*="page-"] .tx-feat-desc, html body[class*="page-"] .tx-thumb-desc, html body[class*="page-"] .t-body { font-family: var(--f-mono) !important; font-size: clamp(15px, 1.4vw, 17px) !important; line-height: 1.72 !important; color: var(--t-2) !important; max-width: 64ch; } html body[class*="page-"] .lf-grid p.body { font-size: clamp(16px, 1.45vw, 18px) !important; } /* ── META lines · unified ───────────────────────────────────────── */ html body[class*="page-"] .closer-meta, html body[class*="page-"] .ipn-trust, html body[class*="page-"] .hero-microcopy, html body[class*="page-"] .v26-cities-meta, html body[class*="page-"] .t-meta { font-family: var(--f-mono) !important; font-size: 11.5px !important; letter-spacing: .2em !important; color: var(--l-2) !important; text-transform: uppercase !important; } /* ── CAPTIONS · unified ─────────────────────────────────────────── */ html body[class*="page-"] .fs-form-status, html body[class*="page-"] .ipn-footer__sub, html body[class*="page-"] .footer-tag, html body[class*="page-"] .show-counter, html body[class*="page-"] .sec-num, html body[class*="page-"] .ipn-frame-meta, html body[class*="page-"] .t-caption { font-family: var(--f-mono) !important; font-size: 10.5px !important; letter-spacing: .14em !important; color: var(--t-4) !important; } /* ── LIVE FILE chapter cards ────────────────────────────────────── */ html body[class*="page-"] .lfc-title { font-family: var(--f-display) !important; font-size: clamp(18px, 1.8vw, 22px) !important; letter-spacing: .035em !important; color: #fff !important; text-transform: uppercase !important; font-weight: 400 !important; } html body[class*="page-"] .lfc-body { font-family: var(--f-mono) !important; font-size: 13.5px !important; line-height: 1.7 !important; color: var(--t-2) !important; } html body[class*="page-"] .lfc-num { font-family: var(--f-mono) !important; font-size: 10px !important; letter-spacing: .22em !important; color: var(--l-3) !important; text-transform: uppercase !important; } /* ── GUEST CARDS ─────────────────────────────────────────────────── */ html body[class*="page-"] .guest-tag { font-family: var(--f-mono) !important; font-size: 10px !important; letter-spacing: .22em !important; color: var(--l-2) !important; text-transform: uppercase !important; } html body[class*="page-"] .guest-tag::before { content: "● "; color: var(--lime, #c8f542); animation: hud-pulse 1.8s ease-in-out infinite; } html body[class*="page-"] .guest-name { font-family: var(--f-display) !important; font-size: clamp(22px, 2.4vw, 28px) !important; letter-spacing: .02em !important; color: #fff !important; text-transform: uppercase !important; } html body[class*="page-"] .guest-role { font-family: var(--f-mono) !important; font-size: 11.5px !important; letter-spacing: .04em !important; color: var(--t-3) !important; line-height: 1.5 !important; } /* ── CHRIS stats + chips ────────────────────────────────────────── */ html body[class*="page-"] .chris-stats > div { font-family: var(--f-mono) !important; font-size: 10px !important; letter-spacing: .2em !important; color: var(--t-4) !important; text-transform: uppercase !important; } html body[class*="page-"] .chris-stats > div strong { font-family: var(--f-display) !important; font-size: clamp(24px, 2.6vw, 32px) !important; letter-spacing: .02em !important; color: #fff !important; display: block; margin-top: 4px; font-weight: 400 !important; } html body[class*="page-"] .chris-role { font-family: var(--f-mono) !important; font-size: 12px !important; letter-spacing: .22em !important; color: var(--l-2) !important; text-transform: uppercase !important; } html body[class*="page-"] .chris-socials .chip { font-family: var(--f-mono) !important; font-size: 10.5px !important; letter-spacing: .14em !important; text-transform: uppercase !important; } /* ── CITY CARDS ──────────────────────────────────────────────────── */ html body[class*="page-"] .city-name { font-family: var(--f-display) !important; font-size: clamp(22px, 2.4vw, 28px) !important; letter-spacing: .02em !important; color: #fff !important; text-transform: uppercase !important; font-weight: 400 !important; } html body[class*="page-"] .city-date, html body[class*="page-"] .city-status, html body[class*="page-"] .city-state, html body[class*="page-"] .city-venue, html body[class*="page-"] .city-cta { font-family: var(--f-mono) !important; letter-spacing: .14em !important; text-transform: uppercase !important; } html body[class*="page-"] .city-date { font-size: 10.5px !important; color: var(--l-2) !important; } html body[class*="page-"] .city-status { font-size: 9.5px !important; } html body[class*="page-"] .city-state { font-size: 10.5px !important; color: var(--t-4) !important; } html body[class*="page-"] .city-venue { font-size: 11px !important; color: var(--t-3) !important; } html body[class*="page-"] .city-cta { font-size: 11px !important; letter-spacing: .18em !important; color: var(--lime, #c8f542) !important; } /* ── TRANSMISSION cards ──────────────────────────────────────────── */ html body[class*="page-"] .tx-feat-title { font-family: var(--f-display) !important; font-size: clamp(22px, 2.6vw, 28px) !important; letter-spacing: .02em !important; color: #fff !important; text-transform: uppercase !important; font-weight: 400 !important; } html body[class*="page-"] .tx-feat-meta, html body[class*="page-"] .tx-thumb-meta { font-family: var(--f-mono) !important; font-size: 10px !important; letter-spacing: .18em !important; color: var(--l-2) !important; text-transform: uppercase !important; } html body[class*="page-"] .tx-thumb-title { font-family: var(--f-display) !important; font-size: 16px !important; letter-spacing: .025em !important; color: #fff !important; text-transform: uppercase !important; font-weight: 400 !important; } /* ════════════════════════════════════════════════════════════════ 02 · HUD ANIMATIONS ════════════════════════════════════════════════════════════════ */ @keyframes hud-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .42; } } @keyframes hud-breathe { 0%, 100% { letter-spacing: .22em; } 50% { letter-spacing: .28em; } } @keyframes hud-flicker { 0%, 18%, 22%, 28%, 100% { opacity: 1; } 20%, 24%, 26% { opacity: .35; } } @keyframes hud-drift { 0%, 100% { opacity: .58; } 50% { opacity: .85; } } @keyframes hud-shimmer { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,245,66, 0); } 50% { box-shadow: 0 0 0 2px rgba(200,245,66, .18); } } @keyframes ipn-ticker-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } html body[class*="page-"] [data-ipn-status] { animation: hud-breathe 3s ease-in-out infinite; } html body[class*="page-"] [data-ipn-status-tag] { animation: hud-breathe 3s ease-in-out infinite; } html body[class*="page-"] .sec-num, html body[class*="page-"] .show-counter { animation: hud-drift 4s ease-in-out infinite; } html body[class*="page-"] .guest-card.is-redacted { animation: hud-shimmer 6s ease-in-out infinite; } html body[class*="page-"] .ticker .ticker-line { animation: ipn-ticker-marquee 32s linear infinite; } /* Live nav badge ("TRANSMISSION INTERCEPT · LIVE") */ html body[class*="page-"] [data-live-pill] .dot, html body[class*="page-"] .nav-live-pill .dot, html body[class*="page-"] .live-pill .dot { animation: hud-flicker 2s steps(40) infinite; } @media (prefers-reduced-motion: reduce) { body *, body *::before, body *::after { animation: none !important; transition-duration: .01ms !important; } } /* ════════════════════════════════════════════════════════════════ 03 · ADDITIONAL COVERAGE — gaps found in home audit ════════════════════════════════════════════════════════════════ */ /* HUD-style tags (status pill in final CTA right column) */ html body[class*="page-"] .cta-right .tag, html body[class*="page-"] [data-ipn-status-tag], html body[class*="page-"] .tx-feat-tag, html body[class*="page-"] .tx-fresh-tag, html body[class*="page-"] .tx-label { font-family: var(--f-mono) !important; font-weight: 500 !important; font-size: 10.5px !important; letter-spacing: .22em !important; color: var(--l-2) !important; text-transform: uppercase !important; } html body[class*="page-"] .tx-fresh-tag { color: #06060a !important; background: var(--lime, #c8f542) !important; padding: 4px 9px; } /* Final CTA right-card display text (JUNE 11 · Toronto · Danforth Music Hall) */ html body[class*="page-"] .cta-right .date { font-family: var(--f-display) !important; font-size: clamp(34px, 4.5vw, 48px) !important; line-height: 1 !important; letter-spacing: .02em !important; color: var(--lime, #c8f542) !important; text-transform: uppercase !important; font-weight: 400 !important; } html body[class*="page-"] .cta-right .city { font-family: var(--f-display) !important; font-size: clamp(28px, 3.4vw, 36px) !important; line-height: 1 !important; letter-spacing: .04em !important; color: #fff !important; text-transform: uppercase !important; font-weight: 400 !important; } html body[class*="page-"] .cta-right .venue { font-family: var(--f-display) !important; font-size: clamp(20px, 2.4vw, 26px) !important; line-height: 1.1 !important; letter-spacing: .02em !important; color: #fff !important; text-transform: uppercase !important; opacity: .92; font-weight: 400 !important; } html body[class*="page-"] .cta-right .cta-region, html body[class*="page-"] .cta-right [id="ctaRegion"] { font-family: var(--f-mono) !important; font-size: 10.5px !important; letter-spacing: .14em !important; color: var(--t-4) !important; text-transform: uppercase !important; } /* Meta-strip key/value pairs (CTA, ticket-strip, anywhere) */ html body[class*="page-"] .meta-strip .lab, html body[class*="page-"] .ts-cell .lbl, html body[class*="page-"] .venue-fields .lbl { font-family: var(--f-mono) !important; font-size: 9.5px !important; letter-spacing: .18em !important; color: var(--l-3) !important; text-transform: uppercase !important; } html body[class*="page-"] .meta-strip .val, html body[class*="page-"] .ts-cell .val, html body[class*="page-"] .venue-fields .val { font-family: var(--f-mono) !important; font-size: 13px !important; letter-spacing: .08em !important; color: var(--t-2) !important; } /* NAV — top + mobile nav links */ html body[class*="page-"] .nav-links a, html body[class*="page-"] .ipn-nav__links a, html body[class*="page-"] .ipn-nav__drawer a, html body[class*="page-"] .mob-tab { font-family: var(--f-mono) !important; font-size: 11px !important; letter-spacing: .22em !important; color: var(--t-3) !important; text-transform: uppercase !important; text-decoration: none !important; } html body[class*="page-"] .nav-links li.active a, html body[class*="page-"] .nav-links a[aria-current="page"], html body[class*="page-"] .ipn-nav__links a[aria-current="page"] { color: var(--lime, #c8f542) !important; } html body[class*="page-"] .nav-cta-top, html body[class*="page-"] .ipn-nav__cta { font-family: var(--f-mono) !important; font-size: 11px !important; letter-spacing: .22em !important; text-transform: uppercase !important; font-weight: 500 !important; } /* FOOTER — wordmark heading + column links */ html body[class*="page-"] .footer-col h4 { font-family: var(--f-display) !important; font-size: 16px !important; letter-spacing: .04em !important; color: #fff !important; text-transform: uppercase !important; margin-bottom: 14px !important; font-weight: 400 !important; } html body[class*="page-"] .footer-col a { font-family: var(--f-mono) !important; font-size: 11.5px !important; letter-spacing: .14em !important; color: var(--t-3) !important; text-transform: uppercase !important; text-decoration: none; display: block; padding: 4px 0; } html body[class*="page-"] .footer-col a:hover { color: var(--lime, #c8f542) !important; } html body[class*="page-"] .footer-tag { font-family: var(--f-mono) !important; font-size: 11.5px !important; letter-spacing: .12em !important; color: var(--t-3) !important; line-height: 1.7 !important; text-transform: uppercase !important; } html body[class*="page-"] .footer-bottom { font-family: var(--f-mono) !important; font-size: 10.5px !important; letter-spacing: .14em !important; color: var(--t-4) !important; text-transform: uppercase !important; } /* FAQ accordion summary (the question text — what closes/opens) */ html body[class*="page-"] .fs-item summary, html body[class*="page-"] details.fs-item > summary { font-family: var(--f-display) !important; font-size: clamp(16px, 1.6vw, 20px) !important; letter-spacing: .025em !important; color: #fff !important; text-transform: uppercase !important; font-weight: 400 !important; cursor: pointer; } html body[class*="page-"] .fs-item-body .lab { font-family: var(--f-mono) !important; font-size: 10px !important; letter-spacing: .2em !important; color: var(--l-3) !important; text-transform: uppercase !important; display: block; margin-bottom: 8px; } /* Sticky CTA bottom strip on mobile */ html body[class*="page-"] .ipn-sticky-cta__cell { font-family: var(--f-mono) !important; font-size: 10.5px !important; letter-spacing: .18em !important; color: var(--t-2) !important; text-transform: uppercase !important; } html body[class*="page-"] .ipn-sticky-cta__cta { font-family: var(--f-mono) !important; font-size: 11.5px !important; letter-spacing: .2em !important; text-transform: uppercase !important; font-weight: 500 !important; } /* Past-show specific badges (austin/montreal CASE CLOSED state) */ html body[class*="page-"] .ipn-btn--disabled, html body[class*="page-"] .case-closed-stamp { font-family: var(--f-mono) !important; font-size: 11px !important; letter-spacing: .22em !important; text-transform: uppercase !important; } /* Trust badges / status badges (.ipn-badge variants) */ html body[class*="page-"] .ipn-badge { font-family: var(--f-mono) !important; font-size: 9.5px !important; letter-spacing: .22em !important; text-transform: uppercase !important; font-weight: 500 !important; } /* Ticker line — text inside */ html body[class*="page-"] .ticker-line .tk, html body[class*="page-"] .ticker-line .sep { font-family: var(--f-mono) !important; font-size: 12px !important; letter-spacing: .2em !important; text-transform: uppercase !important; } html body[class*="page-"] .ticker-line .tk.hl { color: var(--l-2) !important; } html body[class*="page-"] .ticker-line .sep { color: var(--lime, #c8f542) !important; } /* Ticket-strip cells (show pages) */ html body[class*="page-"] .ticket-strip .ts-cell .val.status-open, html body[class*="page-"] .ticket-strip .ts-cell .val.status-filling, html body[class*="page-"] .ticket-strip .ts-cell .val.status-critical, html body[class*="page-"] .ticket-strip .ts-cell .val.status-soldout { color: var(--lime, #c8f542) !important; } /* ════════════════════════════════════════════════════════════════ 04 · SHOW-PAGE specific gaps (audit pass 2) ════════════════════════════════════════════════════════════════ */ /* Live File pull-quote ("It's probably nothing…") */ html body[class*="page-"] .lf-quote { font-family: var(--f-display) !important; font-size: clamp(22px, 2.4vw, 30px) !important; letter-spacing: .025em !important; color: var(--l-2) !important; text-transform: uppercase !important; font-style: italic !important; font-weight: 400 !important; margin-top: 22px !important; line-height: 1.15 !important; } /* Transmissions footer CTA link ("VIEW THE FULL FILE @ AREA52 ↗") */ html body[class*="page-"] .tx-cta { font-family: var(--f-mono) !important; font-size: 11px !important; letter-spacing: .22em !important; color: var(--lime, #c8f542) !important; text-transform: uppercase !important; font-weight: 500 !important; text-decoration: none !important; } /* Dim modifier inside meta lines (@AREA52INVESTIGATIONS, etc) */ html body[class*="page-"] .v26-cities-meta .dim, html body[class*="page-"] .ticker-line .tk.dim, html body[class*="page-"] .dim { color: var(--t-4) !important; opacity: 1 !important; } /* Redacted-slot "tier-X guest" subtitle inside placeholder */ html body[class*="page-"] .ph .ratio, html body[class*="page-"] .guest-photo-ph .ratio { font-family: var(--f-mono) !important; font-size: 9.5px !important; letter-spacing: .22em !important; color: var(--t-4) !important; text-transform: uppercase !important; display: block; margin-top: 6px; } /* FAQ right-column body text (newsletter signup intro) */ html body[class*="page-"] .fs-right p.body, html body[class*="page-"] .fs-right .body { font-family: var(--f-mono) !important; font-size: clamp(14px, 1.3vw, 16px) !important; line-height: 1.72 !important; color: var(--t-2) !important; max-width: 56ch; margin-top: 8px; } /* Form inputs — email + tel placeholders */ html body[class*="page-"] .fs-form input[type="email"], html body[class*="page-"] .fs-form input[type="tel"], html body[class*="page-"] .closer-signup input[type="email"], html body[class*="page-"] .closer-signup input[type="tel"] { font-family: var(--f-mono) !important; font-size: 12px !important; letter-spacing: .14em !important; color: var(--t-2) !important; text-transform: uppercase !important; } html body[class*="page-"] .fs-form input::placeholder, html body[class*="page-"] .closer-signup input::placeholder { font-family: var(--f-mono) !important; font-size: 11px !important; letter-spacing: .18em !important; color: var(--t-4) !important; text-transform: uppercase !important; } /* Buttons — unified text style (does NOT touch background/border) */ html body[class*="page-"] .btn, html body[class*="page-"] .btn.btn-lime, html body[class*="page-"] .btn.btn-ghost, html body[class*="page-"] .fs-form .btn, html body[class*="page-"] .closer-signup .btn { font-family: var(--f-mono) !important; font-size: 11.5px !important; letter-spacing: .22em !important; text-transform: uppercase !important; font-weight: 500 !important; } /* Closer-meta inline pills (● THU · DOORS 7:30 · NO REPLAY) */ html body[class*="page-"] .closer-meta span, html body[class*="page-"] .closer-meta > span { font-family: var(--f-mono) !important; font-size: 11px !important; letter-spacing: .2em !important; color: var(--l-2) !important; text-transform: uppercase !important; } /* Chris-role separator dots */ html body[class*="page-"] .chris-role .sep { color: var(--l-3) !important; margin: 0 8px; opacity: .7; } /* Trailer overlay caption (live file trailer "● TRAILER · 01:21") */ html body[class*="page-"] .lf-trailer [style*="letter-spacing"] { font-family: var(--f-mono) !important; }