/* ===================================================== ABOUT FANORATE — EXPRESSIVE TWEAKS Three controls that reshape the FEEL of the page, not single-property pixel pushes: 1. data-voice — typographic register 2. data-palette — surface + ink temperature 3. data-rhythm — pacing / breathing room All overrides scope on attributes set by the React panel. ===================================================== */ /* ===================================================== 1. VOICE — how the page SOUNDS in print ===================================================== */ /* ── STADIUM ──────────────────────────────────────────── Anton/Impact takes over every major headline. ALL CAPS, condensed, supporter-energy. Italic flourishes are stripped — this voice doesn't whisper. The hero flag glows harder. */ [data-voice="stadium"] .headline, [data-voice="stadium"] .section-block__title, [data-voice="stadium"] .venue-hero__title, [data-voice="stadium"] .final-thoughts h2, [data-voice="stadium"] .newsletter h2 { font-family: var(--font-impact); font-weight: 800; text-transform: uppercase; letter-spacing: 0.005em; line-height: 0.94; } [data-voice="stadium"] .h-section { font-family: var(--font-impact); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1; font-size: clamp(34px, 4.2vw, 52px); } [data-voice="stadium"] .headline em, [data-voice="stadium"] .about-hero__title em { font-style: normal; } [data-voice="stadium"] .mission__promise { font-family: var(--font-impact); font-weight: 800; text-transform: uppercase; font-style: normal; letter-spacing: 0.005em; line-height: 1; font-size: clamp(32px, 3.6vw, 44px); } [data-voice="stadium"] .mission__promise strong { font-weight: 800; } [data-voice="stadium"] .editor-card__name, [data-voice="stadium"] .feature-card h3, [data-voice="stadium"] .insight h3, [data-voice="stadium"] .dest-card h3 { font-family: var(--font-impact); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05; } [data-voice="stadium"] .pullquote p { font-family: var(--font-impact); text-transform: uppercase; font-style: normal; letter-spacing: 0.005em; line-height: 1; } [data-voice="stadium"] .mission { border-left-width: 8px; } /* ── QUIET ────────────────────────────────────────────── Sans-serif throughout. Tighter tracking, no italic. Modernist, calm, almost manifesto-like. Red gets dialed back, accents stay restrained. */ [data-voice="quiet"] .headline, [data-voice="quiet"] .section-block__title, [data-voice="quiet"] .venue-hero__title, [data-voice="quiet"] .final-thoughts h2, [data-voice="quiet"] .h-section, [data-voice="quiet"] .about-hero__title, [data-voice="quiet"] .editor-card__name, [data-voice="quiet"] .feature-card h3, [data-voice="quiet"] .insight h3 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.025em; text-transform: none; } [data-voice="quiet"] .headline em, [data-voice="quiet"] .about-hero__title em { font-style: normal; color: var(--fan-red) !important; } [data-voice="quiet"] .mission__promise { font-family: var(--font-sans); font-weight: 600; font-style: normal; letter-spacing: -0.018em; line-height: 1.3; } [data-voice="quiet"] .pullquote p { font-family: var(--font-sans); font-weight: 600; font-style: normal; letter-spacing: -0.02em; } [data-voice="quiet"] .mission { border-left-width: 2px; } /* ===================================================== 2. PALETTE — surface + ink temperature ===================================================== */ /* ── NEWSPRINT ────────────────────────────────────────── Warm off-white paper, charcoal ink, oxblood instead of bright sale-red. Reads like a Sunday supplement. */ body[data-palette="newsprint"] { --bg-1: #F5EDDC; --bg-2: #ECE2CC; --bg-3: #E3D7BB; --fg-1: #1F1A12; --fg-2: #4A412F; --fg-3: #756B55; --fan-red: #8B2C1E; --fan-red-deep:#5C1A12; --fan-red-soft:#E8D5C8; --fan-blue: #1F1A12; --fan-blue-2: #2E281C; --fan-blue-deep:#0F0C08; --fan-blue-soft:#E3D7BB; --border-1: #D6C7A4; --border-2: #BFAE85; --neutral-300: #BFAE85; --ripple-blue: linear-gradient(115deg, #2E281C 0%, #1F1A12 35%, #0F0C08 80%); background: var(--bg-1); } body[data-palette="newsprint"] .site-header { background: rgba(245,237,220,0.96); } body[data-palette="newsprint"] .newsletter { background: var(--fan-blue); } body[data-palette="newsprint"] .about-hero::before { background: radial-gradient(ellipse at 80% 20%, rgba(139,44,30,0.5), transparent 55%), radial-gradient(ellipse at 10% 110%, rgba(31,26,18,0.6), transparent 45%); } body[data-palette="newsprint"] .partner-chip, body[data-palette="newsprint"] .coverage-chip { background: #FAF4E2; } /* ── MIDNIGHT ─────────────────────────────────────────── Inverted: deep navy paper, cream ink. Cards become slightly-lifted navy slabs. Red still pops; it's the only chroma in the room. */ body[data-palette="midnight"] { --bg-1: #0A1828; --bg-2: #122236; --bg-3: #1B2E48; --fg-1: #F1EADB; --fg-2: #C8BFAB; --fg-3: #8B8270; --fan-blue: #F1EADB; --fan-blue-2: #DCD2BC; --fan-blue-deep:#061528; --fan-blue-soft:#1B2E48; --border-1: #243752; --border-2: #34496A; --neutral-50: #122236; --neutral-100: #1B2E48; --neutral-300: #34496A; background: var(--bg-1); color: var(--fg-1); } body[data-palette="midnight"] .site-header { background: rgba(10,24,40,0.85); border-bottom-color: var(--border-1); } body[data-palette="midnight"] .site-nav a { color: var(--fg-1); } body[data-palette="midnight"] .site-nav a.is-current { color: var(--fan-red); } body[data-palette="midnight"] .icon-btn, body[data-palette="midnight"] .lang-pill { color: var(--fg-1); } body[data-palette="midnight"] .partner-chip, body[data-palette="midnight"] .coverage-chip, body[data-palette="midnight"] .editor-card, body[data-palette="midnight"] .dest-card, body[data-palette="midnight"] .feature-card { background: var(--bg-2); border-color: var(--border-1); color: var(--fg-1); } body[data-palette="midnight"] .partner-chip:hover { background: var(--bg-3); border-color: var(--fan-red); } body[data-palette="midnight"] .mission { background: var(--bg-2); } body[data-palette="midnight"] .deny-list { background: var(--border-1); border-color: var(--border-1); } body[data-palette="midnight"] .deny-list li { background: var(--bg-2); } body[data-palette="midnight"] .info-table, body[data-palette="midnight"] .info-table__row { background: var(--bg-2); border-color: var(--border-1); } body[data-palette="midnight"] .insight { background: var(--bg-2); border-color: var(--border-1); } body[data-palette="midnight"] .pullquote { background: var(--bg-2); } body[data-palette="midnight"] .venue-hero { background: var(--bg-2); border-color: var(--border-1); } body[data-palette="midnight"] .chip-stat { background: var(--bg-3); border-color: var(--border-2); } body[data-palette="midnight"] .note-bar { background: var(--bg-2); border-color: var(--border-1); color: var(--fg-2); } body[data-palette="midnight"] .final-thoughts { color: var(--fg-1); } body[data-palette="midnight"] .updated-stamp { border-color: var(--border-1); } body[data-palette="midnight"] .editor-card__bio p, body[data-palette="midnight"] .body-prose p, body[data-palette="midnight"] .body-prose li { color: var(--fg-2); } body[data-palette="midnight"] strong { color: var(--fg-1); } body[data-palette="midnight"] .breadcrumb, body[data-palette="midnight"] .breadcrumb a { color: var(--fg-3); } /* ===================================================== 3. RHYTHM — pacing / breathing room ===================================================== */ /* ── COMPACT ──────────────────────────────────────────── Newsstand kiosk pace. Tighter type, denser sections, smaller hero. More info per scroll. */ body[data-rhythm="compact"] .container, body[data-rhythm="compact"] .container--narrow, body[data-rhythm="compact"] .container--wide { padding: 0 18px; } body[data-rhythm="compact"] .article > section { margin-top: 0; margin-bottom: 0; } body[data-rhythm="compact"] .h-section { margin: 28px 0 12px; font-size: clamp(22px, 2.6vw, 30px); } body[data-rhythm="compact"] .headline { font-size: clamp(34px, 4.2vw, 52px); line-height: 1.04; } body[data-rhythm="compact"] .about-hero__title { font-size: clamp(30px, 4vw, 48px); } body[data-rhythm="compact"] .section-block__title { font-size: clamp(22px, 2.6vw, 30px); } body[data-rhythm="compact"] .deck { font-size: 16px; line-height: 1.45; } body[data-rhythm="compact"] .body-prose p, body[data-rhythm="compact"] .body-prose li { font-size: 14px; line-height: 1.55; } body[data-rhythm="compact"] .lede { font-size: 17px; line-height: 1.45; } body[data-rhythm="compact"] .mission { padding: 20px 22px; margin: 18px 0; } body[data-rhythm="compact"] .mission__promise { font-size: clamp(20px, 2.2vw, 26px); } body[data-rhythm="compact"] .editor-card__body { padding: 22px 26px; gap: 10px; } body[data-rhythm="compact"] .editor-card__photo { min-height: 220px; } body[data-rhythm="compact"] .about-hero { padding: 28px; } body[data-rhythm="compact"] .feature-card { padding: 18px; } body[data-rhythm="compact"] .dest-card { padding: 18px; } body[data-rhythm="compact"] .section-block { margin: 32px 0; } body[data-rhythm="compact"] .final-thoughts { padding: 36px 0; } body[data-rhythm="compact"] .partner-grid { gap: 6px; } body[data-rhythm="compact"] .partner-chip { padding: 12px 10px; } /* ── GENEROUS ─────────────────────────────────────────── Long-form magazine pace. More air around every block. Hero sits taller, body type breathes, section spacing doubles. Feels expensive. */ body[data-rhythm="generous"] .h-section { margin: 88px 0 32px; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05; } body[data-rhythm="generous"] .headline { font-size: clamp(48px, 6.4vw, 88px); line-height: 1.02; letter-spacing: -0.02em; } body[data-rhythm="generous"] .about-hero { padding: 64px; min-height: 540px; } body[data-rhythm="generous"] .about-hero__title { font-size: clamp(44px, 6vw, 80px); } body[data-rhythm="generous"] .section-block__title { font-size: clamp(32px, 3.8vw, 48px); } body[data-rhythm="generous"] .deck { font-size: 22px; line-height: 1.55; max-width: 720px; } body[data-rhythm="generous"] .body-prose p, body[data-rhythm="generous"] .body-prose li { font-size: 19px; line-height: 1.8; } body[data-rhythm="generous"] .lede { font-size: 26px; line-height: 1.5; letter-spacing: -0.01em; } body[data-rhythm="generous"] .mission { padding: 56px 56px 56px 48px; margin: 56px 0; } body[data-rhythm="generous"] .mission__promise { font-size: clamp(32px, 3.6vw, 44px); line-height: 1.2; } body[data-rhythm="generous"] .editor-card__body { padding: 52px 56px; gap: 20px; } body[data-rhythm="generous"] .editor-card__photo { min-height: 460px; } body[data-rhythm="generous"] .editor-card__name { font-size: clamp(28px, 3vw, 40px); } body[data-rhythm="generous"] .section-block { margin: 96px 0; } body[data-rhythm="generous"] .final-thoughts { padding: 96px 0; } body[data-rhythm="generous"] .pullquote { padding: 48px; margin: 48px 0; } body[data-rhythm="generous"] .feature-card { padding: 36px; } body[data-rhythm="generous"] .partner-grid { gap: 14px; } body[data-rhythm="generous"] .partner-chip { padding: 26px 18px; } body[data-rhythm="generous"] .pub-hero { margin-bottom: 96px; } body[data-rhythm="generous"] .insight { padding: 40px; } /* ===================================================== GLOBAL — make CSS-variable changes feel instant ===================================================== */ body { transition: background-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out); } .about-hero, .mission, .editor-card, .editor-card__photo, .partner-chip, .coverage-chip, .feature-card, .dest-card, .insight, .pullquote, .venue-hero, .chip-stat, .note-bar, .deny-list, .deny-list li, .info-table, .info-table__row, .newsletter, .site-header { transition: background-color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out); }