/* ========================================================================== Futuremag Music — master stylesheet Consolidated from the 9 approved design mockups. Font is self-hosted (assets/fonts/Bootzy.ttf) instead of inlined as base64, for performance. ========================================================================== */ @font-face { font-family: 'Bootzy'; src: url('../fonts/Bootzy.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } :root { --ink: #0E0C0C; --paper: #FBF7EF; --pink: #ED1C84; --lime: #C8FF00; --grey: #7A7470; --mid: #2E2A2A; --card: #171414; --sky: #38BDF8; --flame: #FB923C; --fuchsia: #D946EF; --mlight: #E2DDD8; /* default accent — overridden per-stream via inline style on */ --accent: var(--pink); --accent-fg: #fff; } html { scroll-behavior: smooth; } body { background: var(--ink); color: var(--paper); font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.6; } a { color: inherit; } img { display: block; max-width: 100%; } button { font-family: inherit; } /* ── NAV (canonical, homepage) ── */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(14,12,12,0.97); backdrop-filter: blur(12px); border-bottom: 1px solid var(--mid); display: flex; align-items: center; justify-content: space-between; padding: 0 32px; height: 60px; gap: 16px; } .nav-logo { font-family: 'Bootzy', sans-serif; font-size: 22px; color: var(--pink); text-decoration: none; letter-spacing: 0.03em; white-space: nowrap; flex-shrink: 0; } .nav-logo .logo-full span { color: var(--paper); } .nav-links { display: flex; gap: 2px; list-style: none; flex-wrap: nowrap; } .nav-links li { list-style: none; } .nav-links a { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; padding: 7px 10px; color: var(--grey); border: 1px solid transparent; transition: all 0.15s; white-space: nowrap; } .nav-links a:hover, .nav-links a.active { color: var(--paper); border-color: var(--mid); } .nav-right { display: flex; align-items: center; gap: 12px; } .nav-search { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: var(--lime); border: 2px solid var(--lime); padding: 6px 14px; cursor: pointer; transition: all 0.15s; text-decoration: none; display: inline-block; } .nav-search:hover { opacity: 0.85; } .nav-cta { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--pink); color: #fff; border: 2px solid var(--pink); padding: 6px 18px; cursor: pointer; text-decoration: none; display: inline-block; } .nav-toggle { display: none; background: none; border: none; color: var(--paper); font-size: 20px; cursor: pointer; } /* ── TICKER ── */ .ticker { background: var(--accent); overflow: hidden; white-space: nowrap; padding: 10px 0; } .ticker-inner { display: inline-flex; animation: tick 32s linear infinite; } .ticker .ticker-item { font-family: 'Bootzy', sans-serif !important; font-size: 13px; letter-spacing: 0.08em; padding: 0 32px; color: var(--accent-fg); } @keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── FOOTER (canonical, homepage) ── */ .footer { background: #0A0808; padding: 60px 48px 36px; border-top: 1px solid var(--mid); } .footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; } .footer-brand-col .logo { font-family: 'Bootzy', sans-serif; font-size: 22px; color: var(--paper); margin-bottom: 14px; display: inline-block; text-decoration: none; } .footer-brand-col .logo span { color: var(--pink); } .footer-brand-col p { font-size: 13px; color: var(--grey); line-height: 1.7; max-width: 260px; } .footer-col h4 { font-family: 'Bootzy', sans-serif; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper); margin-bottom: 16px; } .footer-col a { display: block; font-size: 13px; color: var(--grey); text-decoration: none; margin-bottom: 10px; line-height: 1.4; } .footer-col a:hover { color: var(--paper); } .footer-ad { display: block; width: 100%; aspect-ratio: 1920 / 200; max-height: 200px; background-color: var(--mid); background-size: cover; background-repeat: no-repeat; background-position: center; margin-bottom: 40px; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--mid); padding-top: 24px; flex-wrap: wrap; gap: 12px; } .footer-legal { font-size: 11px; color: var(--grey); } .footer-socials { display: flex; gap: 16px; } .footer-socials a { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--grey); text-decoration: none; } /* ── HOMEPAGE HERO ── */ .hero { background: var(--ink); min-height: calc(100vh - 60px); display: grid; grid-template-columns: 1fr 1fr; position: relative; overflow: hidden; } .hero-left { padding: 80px 48px 72px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--mid); } .hero-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); margin-bottom: 28px; display: flex; align-items: center; gap: 14px; } .hero-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--mid); } .hero-h1 { font-family: 'Bootzy', sans-serif; font-size: 96px; line-height: 1.0; letter-spacing: 0.09em; color: var(--paper); margin-bottom: 32px; text-transform: uppercase; } .hero-h1 em { color: var(--pink); font-style: normal; } .hero-desc { font-size: 16px; line-height: 1.8; color: var(--grey); max-width: 400px; margin-bottom: 40px; } .hero-desc strong { color: var(--paper); font-weight: 500; } .hero-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .btn-pink { background: var(--pink); color: #fff; border: 2px solid var(--pink); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 13px 28px; cursor: pointer; text-decoration: none; display: inline-block; } .btn-ghost { background: transparent; color: var(--paper); border: 1px solid var(--mid); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 13px 28px; cursor: pointer; text-decoration: none; display: inline-block; } .hero-right { display: grid; grid-template-rows: 1fr auto; } .hero-right-main { background: var(--card); display: flex; flex-direction: column; justify-content: flex-end; border-bottom: 1px solid var(--mid); position: relative; overflow: hidden; min-height: 380px; } .hero-right-bg { position: absolute; inset: 0; background: var(--mid); opacity: 0.55; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center 8%; } .hero-right-bg span { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); text-align: center; line-height: 1.8; } .hero-right-overlay { position: relative; z-index: 1; padding: 32px; background: linear-gradient(to top, rgba(14,12,12,0.95) 0%, transparent 100%); } .hero-right-label { font-size: 8px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pink); margin-bottom: 10px; } .hero-right-title { font-family: 'Bootzy', sans-serif; font-size: 34px; letter-spacing: 0.08em; line-height: 1.05; text-transform: uppercase; color: var(--paper); margin-bottom: 10px; text-decoration: none; display: block; } .hero-right-meta { font-size: 12px; color: var(--grey); margin-bottom: 16px; } .hero-right-cta { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pink); text-decoration: none; } .hero-right-secondary { display: grid; grid-template-columns: 1fr 1fr; } .hero-mini-card { padding: 22px 24px; border-right: 1px solid var(--mid); display: flex; flex-direction: column; gap: 8px; text-decoration: none; } .hero-mini-card:last-child { border-right: none; } .hero-mini-stream { font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 9px; display: inline-block; align-self: flex-start; margin-bottom: 4px; } .hero-mini-title { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--paper); } .hero-mini-meta { font-size: 11px; color: var(--grey); } /* ── shared section eyebrow/heading pattern ── */ .section-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .stream-chip { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 12px; } .rule { flex: 1; height: 1px; background: var(--mlight); } .rule-dark { flex: 1; height: 1px; background: var(--mid); } .see-all { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); text-decoration: none; } .see-all:hover { color: var(--accent); } .section-h2 { font-family: 'Bootzy', sans-serif; font-size: 52px; line-height: 1.0; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin-bottom: 40px; } .section-h2 em { color: var(--pink); font-style: normal; } /* ── HOMEPAGE: gig guide preview ── */ .gig-section { background: var(--ink); color: var(--paper); padding: 72px 48px; border-bottom: 2px solid var(--mid); } .gig-cards-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .gig-card { background: #fff; border: 1px solid var(--mlight); overflow: hidden; text-decoration: none; color: inherit; display: block; } .gig-card-img { height: 180px; background: var(--mlight); background-size: cover; background-position: center 8%; display: flex; align-items: center; justify-content: center; position: relative; } .gig-card-img span { font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); text-align: center; line-height: 1.8; } .gig-card-img .gig-card-stream-tag { position: absolute; bottom: 0; left: 0; font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; background: var(--pink); color: #fff; } .gig-card-body { padding: 20px 22px; } .gig-card-date { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); margin-bottom: 8px; } .gig-card-name { font-family: 'Bootzy', sans-serif; font-size: 24px; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.05; color: var(--ink); margin-bottom: 8px; } .gig-card-venue { font-size: 13px; color: var(--grey); line-height: 1.5; margin-bottom: 16px; } .gig-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--mlight); } .gig-card-price { font-size: 11px; color: var(--grey); } .gig-card-btn { font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--pink); color: #fff; border: 1.5px solid var(--pink); padding: 5px 13px; text-decoration: none; } /* ── HOMEPAGE: creative conversations preview ── */ .cc-section { background: var(--card); padding: 72px 48px; border-bottom: 1px solid var(--mid); } .cc-section .section-h2 { color: var(--paper); } .cc-section .section-h2 em { color: var(--sky); } .cc-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1px; background: var(--mid); } .cc-card-main { background: var(--card); display: flex; flex-direction: column; text-decoration: none; color: inherit; } .cc-card-img { height: 260px; background: var(--mid); background-size: cover; background-position: center 8%; display: flex; align-items: center; justify-content: center; } .cc-card-img span { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); text-align: center; line-height: 1.8; } .cc-card-body { padding: 28px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .cc-card-issue { font-size: 8px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sky); margin-bottom: 12px; } .cc-pullquote { font-family: 'Bootzy', sans-serif; font-size: 26px; letter-spacing: 0.07em; line-height: 1.1; text-transform: uppercase; color: var(--paper); margin-bottom: 16px; border-left: 3px solid var(--sky); padding-left: 18px; } .cc-excerpt { font-size: 13px; color: var(--grey); line-height: 1.7; margin-bottom: 20px; } .cc-link { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sky); text-decoration: none; } .cc-card-small { background: var(--card); padding: 24px; display: flex; flex-direction: column; text-decoration: none; color: inherit; } .cc-card-small-img { height: 130px; background: var(--mid); background-size: cover; background-position: center; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; } .cc-card-small-img span { font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); text-align: center; line-height: 1.8; } /* ── HOMEPAGE: streams grid ── */ .streams-section { background: var(--ink); padding: 72px 48px; border-bottom: 1px solid var(--mid); } .streams-section .section-h2 { color: var(--paper); } .streams-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--mid); margin-top: 40px; } .stream-cell { background: var(--card); padding: 32px; display: flex; flex-direction: column; gap: 12px; min-height: 200px; position: relative; overflow: hidden; text-decoration: none; color: inherit; } .stream-num { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); } .stream-name { font-family: 'Bootzy', sans-serif; font-size: 28px; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.0; } .stream-desc { font-size: 13px; color: var(--grey); line-height: 1.65; flex: 1; } .stream-count { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); padding-top: 12px; border-top: 1px solid var(--mid); } .stream-mark { position: absolute; bottom: 24px; right: 24px; width: 36px; height: 36px; border-radius: 50%; border: 2px solid; opacity: 0.35; } /* ── HOMEPAGE: partner placement (native ad) ── */ .native-ad { background: var(--card); border-top: 1px solid var(--mid); border-bottom: 1px solid var(--mid); min-height: 260px; display: grid; grid-template-columns: 1fr 1.4fr; overflow: hidden; text-decoration: none; color: inherit; } .native-ad-img { background-size: cover; background-position: center; background-color: var(--mid); min-height: 220px; } .native-ad-body { padding: 48px; display: flex; flex-direction: column; justify-content: center; } .native-ad-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); border: 1px solid var(--mid); padding: 4px 10px; display: inline-block; align-self: flex-start; margin-bottom: 18px; } .native-ad-headline { font-family: 'Bootzy', sans-serif; font-size: 36px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper); line-height: 1.05; margin-bottom: 14px; } .native-ad-sub { font-size: 14px; color: var(--grey); line-height: 1.7; max-width: 440px; margin-bottom: 24px; } .native-ad-cta { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper); border: 1px solid var(--mid); padding: 12px 24px; display: inline-block; align-self: flex-start; } .native-ad:hover .native-ad-cta { border-color: var(--paper); } /* ── HOMEPAGE: mosh section ── */ .mosh-section { background: var(--pink); display: grid; grid-template-columns: 1fr 1fr; min-height: 460px; } .mosh-img { background: rgba(14,12,12,0.15); background-size: cover; background-position: center 8%; display: flex; align-items: center; justify-content: center; } .mosh-img span { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(14,12,12,0.3); text-align: center; line-height: 1.8; } .mosh-body { padding: 60px 56px; display: flex; flex-direction: column; justify-content: space-between; } .mosh-stream { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; background: var(--lime); color: var(--ink); padding: 4px 12px; display: inline-block; align-self: flex-start; margin-bottom: 24px; } .mosh-h2 { font-family: 'Bootzy', sans-serif; font-size: 64px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.02; color: var(--ink); margin-bottom: 24px; } .mosh-desc { font-size: 15px; line-height: 1.75; color: rgba(14,12,12,0.6); margin-bottom: 36px; } .mosh-cta { background: var(--ink); color: var(--pink); border: 2px solid var(--ink); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 13px 28px; cursor: pointer; text-decoration: none; display: inline-block; align-self: flex-start; } /* ── NEWSLETTER (shared across all pages, recolors via --accent) ── */ .nl-section { background: var(--lime); padding: 72px 48px; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .nl-h2 { font-family: 'Bootzy', sans-serif; font-size: 52px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); line-height: 0.95; } .nl-sub { font-size: 13px; color: rgba(14,12,12,0.6); max-width: 320px; line-height: 1.6; margin-top: 8px; } .nl-form { display: flex; gap: 0; flex-shrink: 0; } .nl-input { background: #fff; border: 2px solid var(--ink); padding: 14px 20px; font-size: 13px; width: 280px; font-family: 'DM Sans', sans-serif; outline: none; } .nl-btn { background: var(--ink); color: var(--lime); border: 2px solid var(--ink); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 14px 24px; cursor: pointer; white-space: nowrap; } /* ── GIG GUIDE ARCHIVE ── */ .gig-hero { background: var(--ink); padding: 72px 48px 52px; border-bottom: 1px solid var(--mid); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; } .gig-hero-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--pink); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 14px; margin-bottom: 20px; } .gig-hero-h1 { font-family: 'Bootzy', sans-serif; font-size: 80px; line-height: 0.9; letter-spacing: 0.09em; text-transform: uppercase; color: var(--paper); } .gig-hero-meta { font-size: 13px; color: var(--grey); line-height: 1.7; max-width: 340px; align-self: flex-end; } .gig-hero-meta strong { color: var(--paper); } .filter-bar { background: var(--ink); color: var(--paper); padding: 16px 48px; display: flex; align-items: center; gap: 24px; border-bottom: 2px solid var(--mid); flex-wrap: wrap; } .filter-label { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); white-space: nowrap; } .filter-pills { display: flex; gap: 6px; flex-wrap: wrap; } .pill { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 14px; border: 1px solid var(--mlight); color: var(--grey); cursor: pointer; background: #fff; text-decoration: none; display: inline-block; } .pill:hover { border-color: var(--pink); color: var(--pink); } .pill.active { background: var(--pink); color: #fff; border-color: var(--pink); } .pill.active:hover { color: #fff; } .filter-sep { width: 1px; background: var(--mlight); height: 24px; margin: 0 4px; } .featured-gig { background: var(--pink); display: grid; grid-template-columns: 1fr 1fr; min-height: 440px; text-decoration: none; color: inherit; } .feat-img { background: rgba(14,12,12,0.12); background-size: cover; background-position: center 8%; display: flex; align-items: center; justify-content: center; min-height: 360px; } .feat-img-label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(14,12,12,0.3); text-align: center; line-height: 1.8; } .feat-body { padding: 48px; display: flex; flex-direction: column; justify-content: space-between; } .feat-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(14,12,12,0.5); margin-bottom: 12px; } .feat-date-bar { background: var(--ink); color: var(--pink); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 14px; display: inline-block; margin-bottom: 16px; } .feat-artist { font-family: 'Bootzy', sans-serif; font-size: 64px; line-height: 0.9; letter-spacing: 0.09em; color: var(--ink); margin-bottom: 20px; } .feat-venue { font-size: 13px; color: rgba(14,12,12,0.65); font-weight: 600; letter-spacing: 0.04em; margin-bottom: 32px; } .feat-actions { display: flex; gap: 12px; align-items: center; } .btn-primary { background: var(--ink); color: var(--pink); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 10px 26px; border: 2px solid var(--ink); cursor: pointer; text-decoration: none; display: inline-block; } .gig-listing-section { background: var(--ink); padding: 52px 48px; } .gig-listing-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 32px; } .gig-listing-heading h2 { font-family: 'Bootzy', sans-serif; font-size: 36px; letter-spacing: 0.08em; color: var(--paper); text-transform: uppercase; } .gig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--mid); } .gig-grid .gig-card { background: var(--card); padding: 28px; border: none; display: flex; flex-direction: column; } .gig-grid .gig-card-img { background-color: var(--mid); height: 180px; margin-bottom: 20px; } .gig-grid .gig-card-stream-tag { position: absolute; bottom: 12px; left: 12px; } .gig-grid .gig-card-date { color: var(--grey); } .gig-grid .gig-card-name { color: var(--paper); font-size: 26px; } .gig-grid .gig-card-venue { flex: 1; } .gig-grid .gig-card-footer { border-top: 1px solid var(--mid); } .gig-listing-layout { display: grid; grid-template-columns: 1fr 260px; gap: 32px; align-items: start; } .gig-listing-layout .gig-grid { grid-template-columns: repeat(3, 1fr); } .ad-sidebar { position: sticky; top: 96px; } .ad-sidebar-box { display: block; aspect-ratio: 4 / 5; background-color: var(--mid); background-size: cover; background-position: center; position: relative; text-decoration: none; } .ad-sidebar-box-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0)); } .ad-sidebar-box-date { font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.75); margin-bottom: 4px; } .ad-sidebar-box-name { font-family: 'Bootzy', sans-serif; font-size: 18px; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; line-height: 1.05; } .ad-sidebar-box-plain { display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--mid); text-align: center; padding: 20px; } .ad-sidebar-box.square { aspect-ratio: 1; } .stream-ad-layout { display: grid; grid-template-columns: 1fr 280px; gap: 32px; align-items: start; } .stream-ad-layout .card-grid, .stream-ad-layout .interview-grid { grid-template-columns: repeat(2, 1fr); } .ad-sidebar-box-plain span { font-size: 11px; color: var(--grey); line-height: 1.6; } .gig-empty { padding: 60px 48px; text-align: center; color: var(--grey); font-size: 14px; } /* ── ALL LISTINGS — compact scannable view of every upcoming gig ── */ .week-section { background: #F7F3ED; padding: 52px 48px; } .week-section h2 { font-family: 'Bootzy', sans-serif; font-size: 36px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; } .week-section .sub { font-size: 12px; color: var(--grey); margin-bottom: 32px; } .listing-row { display: flex; align-items: center; gap: 0; border-bottom: 1px solid var(--mlight); padding: 16px 0; flex-wrap: wrap; } .listing-row:last-child { border-bottom: none; } .listing-date { width: 100px; flex-shrink: 0; } .listing-date .day { font-family: 'Bootzy', sans-serif; font-size: 30px; letter-spacing: 0.06em; color: var(--ink); line-height: 1; } .listing-date .weekday { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); } .listing-artist { flex: 1; padding: 0 24px; min-width: 220px; } .listing-artist .name { font-family: 'Bootzy', sans-serif; font-size: 26px; letter-spacing: 0.03em; color: var(--ink); line-height: 1.1; } .listing-artist .venue { font-size: 12px; color: var(--grey); margin-top: 5px; } .listing-row { padding: 20px 0; } .listing-city { width: 130px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); text-align: center; } .listing-chip { width: 130px; text-align: center; } .listing-chip span { font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; } .listing-cta { width: 100px; text-align: right; } .listing-cta a { font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink); text-decoration: none; } .listing-cta a:hover { text-decoration: underline; } @media (max-width: 900px) { .listing-row { gap: 8px 16px; } .listing-city, .listing-chip { display: none; } .listing-cta { width: auto; margin-left: auto; } } /* ── SINGLE GIG ── */ .single-gig-hero { background: var(--pink); padding: 64px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; min-height: 420px; } .single-gig-img { background: rgba(14,12,12,0.12); background-size: cover; background-position: center 8%; min-height: 340px; display: flex; align-items: center; justify-content: center; } .single-gig-body .feat-date-bar { margin-bottom: 20px; } .single-gig-body h1 { font-family: 'Bootzy', sans-serif; font-size: 56px; line-height: 0.95; letter-spacing: 0.08em; color: var(--ink); text-transform: uppercase; margin-bottom: 16px; } .single-gig-meta { font-size: 14px; color: rgba(14,12,12,0.7); line-height: 1.8; margin-bottom: 28px; } .single-gig-content { max-width: 720px; margin: 0 auto; padding: 60px 48px; color: var(--paper); font-size: 15px; line-height: 1.8; } .single-gig-content a { color: var(--pink); } /* ── BOLD GALLERY EXPERIENCE (single article with an embedded photo gallery) ── */ .gallery-experience { padding: 56px 0 72px; background: var(--ink); overflow: hidden; } .gallery-experience-head { padding: 0 48px 28px; display: flex; align-items: baseline; justify-content: space-between; } .gallery-experience-label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .gallery-counter { font-family: 'Bootzy', sans-serif; font-size: 22px; letter-spacing: 0.06em; color: var(--paper); } .gallery-strip { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; padding: 0 48px; cursor: grab; scrollbar-width: none; -ms-overflow-style: none; user-select: none; } .gallery-strip.dragging { cursor: grabbing; scroll-snap-type: none; } .gallery-strip::-webkit-scrollbar { display: none; } .gallery-strip-item { flex: 0 0 auto; scroll-snap-align: start; height: 74vh; max-height: 720px; min-height: 380px; position: relative; margin: 0; } .gallery-strip-item img { height: 100%; width: auto; max-width: none; display: block; border-radius: 2px; pointer-events: none; } .gallery-strip-num { position: absolute; left: 12px; bottom: 12px; font-family: 'Bootzy', sans-serif; font-size: 15px; letter-spacing: 0.05em; color: var(--paper); background: rgba(14,12,12,0.6); padding: 4px 10px; } @media (max-width: 900px) { .gallery-experience-head { padding: 0 24px 20px; } .gallery-strip { padding: 0 24px; scroll-snap-type: x mandatory; } .gallery-strip-item { height: 62vh; min-height: 320px; } } /* ── STREAM PAGES (shared: Into the Mosh / Future Focus / From the Pit / Soundcheck) ── */ .stream-hero { background: var(--ink); min-height: 480px; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 2px solid var(--mid); overflow: hidden; } .stream-hero-left { padding: 64px 48px 56px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--mid); } .stream-hero-chip { display: inline-block; background: var(--accent); color: var(--accent-fg); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 14px; margin-bottom: 28px; align-self: flex-start; } .stream-hero-h1 { font-family: 'Bootzy', sans-serif; font-size: 70px; line-height: 0.9; letter-spacing: 0.09em; text-transform: uppercase; color: var(--paper); margin-bottom: 28px; } .stream-hero-tag { font-size: 14px; color: var(--grey); line-height: 1.7; max-width: 360px; border-left: 2px solid var(--accent); padding-left: 16px; } .stream-hero-right { background: var(--card); position: relative; overflow: hidden; display: flex; align-items: flex-end; } .stream-hero-right::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--accent) 0%, transparent 60%); opacity: 0.22; } .stream-hero-right-body { position: relative; z-index: 1; padding: 36px; width: 100%; background: linear-gradient(to top, rgba(14,12,12,0.95) 0%, transparent 100%); } .stream-hero-right-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .stream-hero-right-title { font-family: 'Bootzy', sans-serif; font-size: 26px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper); line-height: 0.95; margin-bottom: 12px; } .stream-hero-right-meta { font-size: 11px; color: var(--grey); margin-bottom: 14px; } .stream-hero-right-cta { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); text-decoration: none; } .stream-section { padding: 64px 48px; background: var(--ink); color: var(--paper); } .stream-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; padding-bottom: 14px; border-bottom: 1px solid var(--mlight); flex-wrap: wrap; gap: 12px; } .stream-section-h2 { font-family: 'Bootzy', sans-serif; font-size: 36px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); } .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .card-grid.two { grid-template-columns: repeat(2, 1fr); } .card-grid.four { grid-template-columns: repeat(4, 1fr); } .card { background: #fff; border: 1.5px solid var(--mlight); text-decoration: none; color: inherit; display: block; } .card-img { height: 230px; background: linear-gradient(135deg, var(--accent) 0%, var(--card) 100%); background-size: cover; background-position: center 8%; position: relative; display: flex; align-items: flex-end; padding: 12px; } .card-badge { font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: var(--accent); color: var(--accent-fg); padding: 3px 10px; position: absolute; top: 12px; left: 12px; } .card-body { padding: 16px; } .card-date { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); margin-bottom: 7px; } .card-title { font-family: 'Bootzy', sans-serif; font-size: 19px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink); line-height: 0.95; margin-bottom: 8px; } .card-excerpt { font-size: 12px; color: var(--grey); line-height: 1.6; } .card-link { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); text-decoration: none; margin-top: 10px; display: inline-block; } /* dark variant of a section (used for the second half of stream pages) */ .stream-section.dark { background: var(--ink); } .stream-section.dark .stream-section-h2 { color: var(--paper); } .stream-section.dark .stream-section-head { border-bottom-color: var(--mid); } .stream-section.dark .card { background: var(--card); border-color: var(--mid); } .stream-section.dark .card-title { color: var(--paper); } /* ── CREATIVE CONVERSATIONS (special stream template) ── */ .cc-hero { position: relative; height: 340px; overflow: hidden; border-bottom: 2px solid var(--mid); background: var(--card); } .cc-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center 8%; display: block; } .cc-hero-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 56px; background: linear-gradient(to top, rgba(14,12,12,0.55) 0%, transparent 100%); } .cc-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper); opacity: 0.85; margin-bottom: 10px; } .cc-h1 { font-family: 'Bootzy', sans-serif; font-size: 68px; line-height: 0.88; letter-spacing: 0.07em; text-transform: uppercase; color: var(--paper); margin-bottom: 20px; } .cc-tagline { font-size: 13px; color: var(--paper); line-height: 1.65; border-left: 2px solid var(--sky); padding-left: 14px; max-width: 540px; } .issue-bar { background: var(--sky); padding: 10px 48px; display: flex; align-items: center; justify-content: space-between; } .issue-bar .num { font-family: 'Bootzy', sans-serif; font-size: 13px; color: var(--ink); } .issue-bar .date { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(14,12,12,0.55); } .featured-interview { background: var(--card); display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; border-bottom: 1px solid var(--mid); text-decoration: none; color: inherit; } .feat-interview-img { background: var(--mid); background-size: cover; background-position: center 15%; display: flex; align-items: center; justify-content: center; min-height: 380px; } .feat-interview-img span { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); text-align: center; line-height: 1.8; } .feat-interview-body { padding: 48px; display: flex; flex-direction: column; justify-content: space-between; } .feat-interview-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; } .feat-interview-eyebrow .issue { font-size: 8px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sky); } .pullquote { font-family: 'Bootzy', sans-serif; font-size: 32px; letter-spacing: 0.08em; line-height: 1.0; color: var(--paper); margin-bottom: 24px; border-left: 3px solid var(--sky); padding-left: 20px; text-transform: uppercase; } .feat-interview-excerpt { font-size: 13px; color: var(--grey); line-height: 1.7; margin-bottom: 28px; } .read-btn { display: inline-block; background: var(--sky); color: var(--ink); border: 2px solid var(--sky); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 11px 24px; text-decoration: none; align-self: flex-start; } .feat-interview-author .name { font-size: 12px; font-weight: 600; color: var(--paper); } .read-btn { display: inline-block; background: var(--sky); color: var(--ink); border: 2px solid var(--sky); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 11px 24px; text-decoration: none; flex-shrink: 0; } .interview-section { background: var(--ink); padding: 52px 48px; border-bottom: 1px solid var(--mid); } .interview-section h2 { font-family: 'Bootzy', sans-serif; font-size: 36px; letter-spacing: 0.08em; color: var(--paper); margin-bottom: 32px; text-transform: uppercase; } .interview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--mid); } .interview-card { background: var(--card); position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; min-height: 360px; text-decoration: none; color: inherit; } .interview-card-bg { position: absolute; inset: 0; background: var(--mid); background-size: cover; background-position: center 8%; display: flex; align-items: center; justify-content: center; } .interview-card-bg span { font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); text-align: center; line-height: 1.8; } .interview-card-overlay { position: relative; z-index: 1; padding: 24px; background: linear-gradient(to top, rgba(14,12,12,0.95) 0%, rgba(14,12,12,0.5) 55%, transparent 100%); } .interview-card-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .interview-card-meta .issue { font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sky); } .interview-card-meta .date { font-size: 8px; color: var(--grey); } .interview-card-title { font-family: 'Bootzy', sans-serif; font-size: 20px; line-height: 0.96; color: var(--paper); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.03em; } .interview-card-excerpt { font-size: 11px; color: rgba(255,255,255,0.85); line-height: 1.6; margin-bottom: 18px; } .interview-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .interview-card-author { display: flex; align-items: center; gap: 10px; min-width: 0; } .interview-card-author .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--mid); border: 1px solid rgba(255,255,255,0.25); background-size: cover; flex-shrink: 0; } .interview-card-author .name { font-size: 12px; font-weight: 600; color: var(--paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .interview-card-link { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sky); background: none; border: none; padding: 0; text-decoration: none; white-space: nowrap; flex-shrink: 0; } .about-stream-section { background: var(--ink); color: var(--paper); padding: 72px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .about-stream-left .label { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); margin-bottom: 16px; } .about-stream-left h2 { font-family: 'Bootzy', sans-serif; font-size: 48px; line-height: 0.92; color: var(--ink); margin-bottom: 24px; text-transform: uppercase; } .about-stream-left h2 em { color: var(--sky); font-style: normal; } .about-stream-left p { font-size: 13px; color: var(--grey); line-height: 1.8; margin-bottom: 16px; } /* ── SINGLE ARTICLE ── */ .single-article-hero { padding: 64px 48px 40px; border-bottom: 1px solid var(--mid); background: var(--ink); } .single-article-hero .stream-chip { margin-bottom: 20px; display: inline-block; } .single-article-hero h1 { font-family: 'Bootzy', sans-serif; font-size: 52px; line-height: 0.95; letter-spacing: 0.07em; color: var(--paper); text-transform: uppercase; margin-bottom: 20px; } .single-article-meta { font-size: 12px; color: var(--grey); } .single-article-img { height: min(60vh, 560px); background: var(--card); background-size: cover; background-position: center 25%; } .single-article-content { max-width: 860px; margin: 0 auto; padding: 60px 48px; color: var(--paper); font-size: 17px; line-height: 1.85; } .single-article-content p { margin-bottom: 24px; } .single-article-content a { color: var(--sky); } .single-article-content h2 { font-family: 'Bootzy', sans-serif; font-size: 30px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--paper); margin: 44px 0 20px; } .single-article-content h3 { font-family: 'Bootzy', sans-serif; font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--paper); margin: 32px 0 16px; } .single-article-content ol, .single-article-content ul { margin: 0 0 24px 22px; } .single-article-content li { margin-bottom: 10px; } .single-article-content blockquote { border-left: 3px solid var(--sky); padding-left: 22px; margin: 32px 0; font-style: italic; color: var(--grey); } /* Imported gig-review / photo-gallery content often contains a native WP Gallery Block — render it as a proper 2-4 col grid instead of one huge image stacked on top of the next. */ .single-article-content .wp-block-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 32px 0; list-style: none; padding: 0; } .single-article-content .wp-block-gallery .wp-block-image { margin: 0; height: 260px; overflow: hidden; } .single-article-content .wp-block-gallery .wp-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .single-article-content .wp-block-image:not(.wp-block-gallery .wp-block-image) { margin: 36px 0; } .single-article-content .wp-block-image img { width: 100%; height: auto; display: block; border-radius: 4px; } .single-article-content figcaption { font-size: 12px; color: var(--grey); margin-top: 8px; text-align: center; } .single-article-content iframe { max-width: 100%; } /* ── STATIC PAGES (About, Work With Us, Submit a Gig) ── */ .page-wrap { background: var(--ink); color: var(--paper); } .page-hero { padding: 88px 48px 56px; } .page-hero h1 { font-family: 'Bootzy', sans-serif; font-size: 64px; line-height: 0.95; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink); max-width: 700px; } .page-hero p { font-size: 15px; color: var(--grey); max-width: 480px; margin-top: 20px; line-height: 1.7; } .page-section { padding: 64px 48px; } .page-section.dark { background: var(--ink); color: var(--paper); } .page-section h2 { font-family: 'Bootzy', sans-serif; font-size: 40px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 24px; color: var(--ink); } .page-section.dark h2 { color: var(--paper); } .page-section p { font-size: 14px; line-height: 1.8; color: var(--grey); margin-bottom: 16px; } .job-card { border: 1.5px solid var(--mlight); padding: 28px; } .job-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; gap: 12px; } .job-card-stream { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink); } .job-card-type { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); background: var(--paper); border: 1px solid var(--mlight); padding: 3px 10px; white-space: nowrap; } .job-card h3 { font-family: 'Bootzy', sans-serif; font-size: 24px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; color: var(--ink); } .job-card p { font-size: 12px; color: var(--grey); line-height: 1.7; margin-bottom: 16px; } .job-card a { color: var(--pink); text-decoration: none; font-size: 12px; font-weight: 700; } .job-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* ── SHOP ── */ .shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .shop-card { border: 1.5px solid var(--mlight); background: #fff; } .shop-card-img { aspect-ratio: 1; background: var(--paper); display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1.5px solid var(--mlight); } .shop-card-img img { width: 100%; height: 100%; object-fit: cover; } .shop-card-img-fallback { font-family: 'Bootzy', sans-serif; font-size: 44px; letter-spacing: 0.07em; color: var(--mlight); } .shop-card-body { padding: 20px; } .shop-card-name { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 6px; } .shop-card-price { font-size: 13px; color: var(--pink); font-weight: 700; margin-bottom: 14px; } .shop-card-cta { display: block; text-align: center; background: var(--ink); color: var(--paper); text-decoration: none; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 12px; } .shop-notify { border: 1.5px dashed var(--mlight); padding: 32px; text-align: center; } .shop-notify h4 { font-family: 'Bootzy', sans-serif; font-size: 20px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink); margin-bottom: 10px; } .shop-notify p { font-size: 13px; color: var(--grey); margin-bottom: 18px; } @media (max-width: 900px) { .shop-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .shop-grid { grid-template-columns: 1fr; } } /* ── PRICING CARDS (PR Services) ── */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .pricing-card { border: 1.5px solid var(--mlight); padding: 28px; position: relative; display: flex; flex-direction: column; background: #fff; } .pricing-card.featured { border-color: var(--pink); border-width: 2px; } .pricing-card-badge { position: absolute; top: -12px; left: 24px; background: var(--pink); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 12px; } .pricing-card-name { font-family: 'Bootzy', sans-serif; font-size: 22px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); margin-bottom: 6px; } .pricing-card-price { font-family: 'Bootzy', sans-serif; font-size: 34px; color: var(--pink); margin-bottom: 14px; } .pricing-card-desc { font-size: 13px; color: var(--grey); line-height: 1.6; margin-bottom: 18px; } .pricing-card-list { list-style: none; margin-bottom: 18px; flex: 1; } .pricing-card-list li { font-size: 12px; color: var(--ink); line-height: 1.6; margin-bottom: 9px; padding-left: 18px; position: relative; } .pricing-card-list li::before { content: '\2713'; position: absolute; left: 0; color: var(--pink); font-weight: 700; } .pricing-card-best { font-size: 11px; color: var(--grey); line-height: 1.6; border-top: 1px solid var(--mlight); padding-top: 14px; margin-bottom: 18px; } .pricing-card-best strong { color: var(--ink); } .pricing-card-cta { display: inline-block; text-align: center; background: var(--pink); color: #fff; text-decoration: none; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 12px 20px; margin-top: auto; } .addon-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; } .addon-list li { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink); padding: 10px 0; border-bottom: 1px solid var(--mlight); } .addon-list li span:last-child { color: var(--pink); font-weight: 700; } .ad-spec-row { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start; } .pr-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .pr-feature { padding: 20px 0; } .pr-feature h4 { font-family: 'Bootzy', sans-serif; font-size: 17px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); margin-bottom: 8px; } .pr-feature p { font-size: 13px; color: var(--grey); line-height: 1.7; } .pr-callout { border: 1.5px solid var(--pink); background: rgba(237,28,132,0.04); padding: 28px 32px; } .pr-callout h3 { font-family: 'Bootzy', sans-serif; font-size: 20px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); margin-bottom: 12px; } .pr-callout p { font-size: 13px; color: var(--grey); line-height: 1.75; margin-bottom: 10px; } .pr-callout p:last-child { margin-bottom: 0; } .pricing-grid-dark .pricing-card { background: #161313; border-color: #2E2A2A; } .pricing-grid-dark .pricing-card-name, .pricing-grid-dark .pricing-card-list li, .pricing-grid-dark .pricing-card-best strong { color: var(--paper); } .pricing-grid-dark .pricing-card-best { border-top-color: #2E2A2A; } .pricing-grid-dark .addon-list li { color: var(--paper); border-bottom-color: #2E2A2A; } @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } .addon-list, .pr-feature-grid { grid-template-columns: 1fr; } } /* ── FORMS (Submit a Gig, Work With Us) ── */ .form-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; padding: 0 48px 88px; align-items: start; } .form-layout label { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); margin-bottom: 6px; } .form-layout input, .form-layout select, .form-layout textarea { width: 100%; background: #fff; border: 1.5px solid var(--mlight); padding: 13px 16px; font-size: 13px; font-family: 'DM Sans', sans-serif; outline: none; margin-bottom: 20px; } .form-layout textarea { resize: vertical; min-height: 120px; } .form-layout input:focus, .form-layout select:focus, .form-layout textarea:focus { border-color: var(--pink); } .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form-row-2 > div { min-width: 0; } .form-checkbox-row { margin-bottom: 24px; display: flex; align-items: flex-start; gap: 12px; } .form-checkbox-row input { width: 18px; height: 18px; flex-shrink: 0; margin: 2px 0 0; } .form-checkbox-row label { text-transform: none; font-size: 12px; letter-spacing: normal; font-weight: 400; color: var(--grey); margin: 0; } .form-submit-btn { background: var(--pink); color: #fff; border: 2px solid var(--pink); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 15px 32px; cursor: pointer; } .form-note { font-size: 11px; color: var(--grey); margin-top: 12px; text-align: center; } .form-upload-box { border: 2px dashed var(--mlight); padding: 28px; text-align: center; margin-bottom: 24px; background: #fff; } .form-sidebar { background: var(--ink); color: var(--paper); padding: 32px; position: sticky; top: 80px; } .form-sidebar h3 { font-family: 'Bootzy', sans-serif; font-size: 22px; margin-bottom: 16px; text-transform: uppercase; } .form-sidebar ul { list-style: none; } .form-sidebar li { font-size: 13px; color: var(--grey); line-height: 1.7; margin-bottom: 12px; padding-left: 16px; position: relative; } .form-sidebar li::before { content: '\2713'; position: absolute; left: 0; color: var(--lime); } .form-success { background: var(--lime); color: var(--ink); padding: 24px 32px; margin: 0 48px 32px; font-size: 14px; font-weight: 600; } .form-error { background: #fde2e2; color: #a3241f; padding: 16px 20px; margin-bottom: 24px; font-size: 13px; } /* ── WOOCOMMERCE ── */ .woocommerce-wrapper { background: var(--ink); padding: 56px 48px 72px; } .woocommerce-wrapper .woocommerce-notices-wrapper { display: block; margin-bottom: 24px; } .woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; background: var(--card); color: var(--paper); border-left: 3px solid var(--pink); padding: 16px 20px; margin-bottom: 24px; font-size: 13px; } .woocommerce-error { border-left-color: var(--flame, #ff5a4e); } /* Shop loop */ ul.products { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } ul.products::before, ul.products::after { content: none !important; display: none !important; } ul.products li.product { background: #fff; border: 1.5px solid var(--mlight); width: 100% !important; float: none !important; margin: 0 !important; clear: none !important; } ul.products li.product a img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; } ul.products li.product .woocommerce-loop-product__title { font-family: 'Bootzy', sans-serif; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); padding: 20px 22px 4px; } ul.products li.product .price { display: block; padding: 0 22px; font-size: 14px; color: var(--pink); font-weight: 700; margin-bottom: 16px; } ul.products li.product .price del { color: var(--grey); font-weight: 400; margin-right: 6px; } ul.products li.product a.button, ul.products li.product a.added_to_cart { display: block; margin: 0 22px 22px; text-align: center; background: var(--ink); color: var(--paper); text-decoration: none; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 12px; } ul.products li.product a.button:hover { background: var(--pink); } /* Single product */ .woocommerce div.product { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } .woocommerce div.product .woocommerce-product-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; } .woocommerce div.product .product_title { font-family: 'Bootzy', sans-serif; font-size: 40px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper); margin-bottom: 14px; } .woocommerce div.product p.price { font-size: 24px; color: var(--pink); font-weight: 700; margin-bottom: 20px; } .woocommerce div.product .woocommerce-product-details__short-description { color: var(--grey); font-size: 14px; line-height: 1.8; margin-bottom: 24px; } .woocommerce div.product form.cart { display: flex; gap: 12px; align-items: center; } .woocommerce div.product form.cart .qty { width: 60px; padding: 12px; background: var(--card); border: 1px solid var(--mid); color: var(--paper); font-size: 14px; } .woocommerce div.product .single_add_to_cart_button { background: var(--pink); color: #fff; border: none; padding: 14px 32px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; } .woocommerce div.product .single_add_to_cart_button:hover { background: var(--ink); border: 1px solid var(--pink); } .woocommerce-tabs { margin-top: 48px; grid-column: 1 / -1; color: var(--grey); } .woocommerce-tabs ul.tabs { list-style: none; display: flex; gap: 24px; border-bottom: 1px solid var(--mid); margin-bottom: 20px; } .woocommerce-tabs ul.tabs li a { color: var(--paper); text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding-bottom: 12px; display: inline-block; } /* Cart + Checkout tables — used by the order-received (thank you) page and My Account order history; both sit on the light .page-wrap background (the Cart/Checkout pages themselves use WooCommerce Blocks, styled above). */ table.shop_table { width: 100%; border-collapse: collapse; margin-bottom: 32px; color: var(--ink); } table.shop_table th { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); padding: 12px; border-bottom: 1px solid var(--mlight); } table.shop_table td { padding: 16px 12px; border-bottom: 1px solid var(--mlight); font-size: 13px; } table.shop_table td.product-thumbnail img { width: 64px; height: 64px; object-fit: cover; } table.shop_table td.product-name a { color: var(--ink); text-decoration: none; font-weight: 700; } table.shop_table .quantity input.qty { width: 56px; padding: 8px; background: #fff; border: 1px solid var(--mlight); color: var(--ink); } table.shop_table td.actions .button, a.remove { background: var(--pink); color: #fff !important; text-decoration: none; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 18px; display: inline-block; } .cart-collaterals .cart_totals { max-width: 420px; margin-left: auto; color: var(--ink); } .cart-collaterals .cart_totals table { width: 100%; } .cart-collaterals .cart_totals th, .cart-collaterals .cart_totals td { padding: 12px; border-bottom: 1px solid var(--mlight); font-size: 13px; } .woocommerce-order-details h2, .woocommerce-order-overview + h2, .woocommerce-customer-details h2, .woocommerce-account .entry-title, .woocommerce-MyAccount-content h2 { font-family: 'Bootzy', sans-serif; font-size: 26px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); margin-bottom: 20px; } .woocommerce-thankyou-order-received { font-size: 14px; color: var(--grey); margin-bottom: 24px; } ul.woocommerce-order-overview { list-style: none; display: flex; gap: 32px; flex-wrap: wrap; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--mlight); } ul.woocommerce-order-overview li { font-size: 13px; color: var(--grey); } ul.woocommerce-order-overview li strong { display: block; color: var(--ink); font-size: 15px; margin-top: 4px; } .wc-proceed-to-checkout a.checkout-button { display: block; text-align: center; background: var(--pink); color: #fff; text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 16px; margin-top: 16px; } /* Checkout form */ .woocommerce-checkout h3 { font-family: 'Bootzy', sans-serif; font-size: 24px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--paper); margin-bottom: 20px; } .woocommerce-checkout .form-row { margin-bottom: 16px; } .woocommerce-checkout label { display: block; font-size: 11px; color: var(--grey); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; } .woocommerce-checkout input.input-text, .woocommerce-checkout select, .woocommerce-checkout textarea { width: 100%; padding: 12px 14px; background: var(--card); border: 1px solid var(--mid); color: var(--paper); font-size: 14px; } .woocommerce-checkout #order_review { background: var(--card); padding: 24px; border: 1px solid var(--mid); } .woocommerce-checkout .payment_methods { list-style: none; margin-top: 16px; } .woocommerce-checkout .payment_methods li { padding: 12px 0; border-top: 1px solid var(--mid); color: var(--paper); font-size: 13px; } .woocommerce-checkout #place_order { width: 100%; background: var(--pink); color: #fff; border: none; padding: 16px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; margin-top: 20px; } .woocommerce-checkout #place_order:hover { background: var(--lime); color: var(--ink); } /* My account */ .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; } .woocommerce-account .woocommerce-MyAccount-navigation a { color: var(--paper); text-decoration: none; display: block; padding: 10px 0; font-size: 13px; } .woocommerce-account input.input-text { padding: 12px 14px; background: var(--card); border: 1px solid var(--mid); color: var(--paper); width: 100%; } @media (max-width: 900px) { ul.products, .woocommerce div.product { grid-template-columns: 1fr; } } /* WooCommerce Blocks (Cart & Checkout use block markup, not the classic shortcode classes styled above, so they need their own selectors). */ .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { background: var(--ink); color: var(--paper); padding: 40px 48px; } .wc-block-cart, .wc-block-checkout { color: var(--ink); } .wc-block-components-product-name { color: var(--ink); font-weight: 700; text-decoration: none; } .wc-block-components-totals-item__label, .wc-block-components-totals-item__value { color: var(--ink); } .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .wc-block-cart-item__wrap .wc-block-components-quantity-selector, .wc-block-components-button.wp-element-button.contained { background: var(--pink) !important; color: #fff !important; border: none !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; border-radius: 0 !important; } .wc-block-components-button.wp-element-button.contained:hover { background: var(--ink) !important; } .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--pink); font-weight: 700; } .wc-block-cart__title, .wc-block-checkout__title, .woocommerce-cart .page-hero h1, .woocommerce-checkout .page-hero h1, .woocommerce-account .page-hero h1 { font-family: 'Bootzy', sans-serif; letter-spacing: 0.05em; text-transform: uppercase; } .wc-block-components-panel, .wc-block-components-order-summary, .wc-block-components-totals-wrapper, .wc-block-components-checkout-step { border-color: var(--mlight) !important; } /* ── MOBILE ── */ @media (max-width: 900px) { .nav-links, .nav-search { display: none; } .nav-links.open { display: flex; flex-direction: column; gap: 0; position: fixed; top: 60px; left: 0; right: 0; z-index: 99; background: var(--ink); border-bottom: 1px solid var(--mid); padding: 8px 0; } .nav-links.open a { padding: 14px 24px; border: none; border-bottom: 1px solid var(--mid); } .nav-toggle { display: block; } .hero, .stream-hero, .featured-gig, .featured-interview, .mosh-section, .cc-grid, .gig-hero, .about-section, .about-stream-section, .form-layout, .single-gig-hero, .native-ad { grid-template-columns: 1fr; } .gig-cards-row, .gig-grid, .card-grid, .card-grid.two, .card-grid.four, .interview-grid, .job-grid, .form-row-2, .streams-grid { grid-template-columns: 1fr; } .gig-listing-layout { grid-template-columns: 1fr; } .gig-listing-layout .gig-grid { grid-template-columns: 1fr; } .ad-sidebar { position: static; } .ad-spec-row { grid-template-columns: 1fr; } .ad-spec-row .ad-sidebar-box, .ad-spec-row .footer-ad { max-width: 280px; } .stream-ad-layout { grid-template-columns: 1fr; } .stream-ad-layout .card-grid, .stream-ad-layout .interview-grid { grid-template-columns: 1fr; } .hero-h1, .stream-hero-h1, .gig-hero-h1, .cc-h1 { font-size: 44px; } .section-h2, .stream-section-h2 { font-size: 34px; } .nl-section, .encore-section { flex-direction: column; align-items: flex-start; } .footer-top { grid-template-columns: 1fr; } .page-hero h1 { font-size: 40px; } .nl-input { width: 100%; } } /* ── HOVER STATES — filled buttons invert to their opposite color scheme (solid fill → outlined in the same color), ghost buttons invert to solid, plain text links get an underline ── */ .btn-pink:hover, .gig-card-btn:hover, .form-submit-btn:hover, .nav-cta:hover { background: transparent; color: var(--pink); } .btn-primary:hover, .mosh-cta:hover, .nl-btn:hover { background: transparent; color: var(--ink); } .read-btn:hover { background: transparent; color: var(--sky); } .btn-ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } .filter-bar .pill:hover { border-color: var(--pink); } .hero-right-cta:hover, .stream-hero-right-cta:hover, .card-link:hover, .job-card a:hover, .cc-link:hover, .native-ad-cta:hover { text-decoration: underline; } .interview-card-link:hover { background: var(--ink); color: var(--sky); } a:hover { transition: all 0.15s ease; } /* ── HOMEPAGE INTRO — simple CSS-only sequence: wordmark → F mark → site. No WebGL, no cursor tracking — just a short auto-playing crossfade that also doubles as the page's loading moment. Click/scroll/key skips it. */ .futuremag-intro { position: fixed; inset: 0; z-index: 9999; background: var(--pink); display: flex; align-items: center; justify-content: center; animation: intro-fade-out 0.6s ease-in 2.5s forwards; } .futuremag-intro.is-leaving { animation: intro-fade-out 0.4s ease-in forwards; } .intro-wordmark { position: absolute; width: min(60vw, 820px); max-width: 82vw; animation: intro-wordmark-out 0.5s ease-in 1.1s forwards; } .intro-glyph { position: absolute; height: min(34vh, 260px); opacity: 0; transform: scale(0.82); animation: intro-glyph-in 0.5s ease-out 1.1s forwards, intro-glyph-out 0.45s ease-in 2.05s forwards; } @keyframes intro-wordmark-out { to { opacity: 0; transform: scale(0.88); } } @keyframes intro-glyph-in { to { opacity: 1; transform: scale(1); } } @keyframes intro-glyph-out { to { opacity: 0; transform: scale(1.12); } } @keyframes intro-fade-out { to { opacity: 0; visibility: hidden; pointer-events: none; } } @media (prefers-reduced-motion: reduce) { .futuremag-intro, .intro-wordmark, .intro-glyph { animation: none !important; } } @media (max-width: 768px) { [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; } [style*="grid-template-columns:repeat(2"], [style*="grid-template-columns: repeat(2"] { grid-template-columns: 1fr !important; } [style*="grid-template-columns:repeat(3"], [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; } [style*="grid-template-columns:repeat(4"], [style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr !important; } [style*="grid-template-columns:1fr 1fr 1fr"], [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; } [style*="grid-template-columns:1fr 380px"] { grid-template-columns: 1fr !important; } } .fm-menu-links li:nth-child(1) a { color: #ED1C84 !important; } .fm-menu-links li:nth-child(2) a { color: #38BDF8 !important; } .fm-menu-links li:nth-child(3) a { color: #FB923C !important; } .fm-menu-links li:nth-child(4) a { color: #C8FF00 !important; } .fm-menu-links li:nth-child(5) a { color: #D946EF !important; } .fm-menu-links li:nth-child(6) a { color: #38BDF8 !important; } .fm-menu-links li:nth-child(7) a { color: #A855F7 !important; } #fm-mob-open { display: none !important; } .nav-links li.menu-item-has-children { position: relative; } .nav-links li.menu-item-has-children > a::after { content: ' \25BE'; margin-left: 3px; } .sub-menu { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; background: var(--card); border: 1px solid var(--mid); min-width: 190px; max-height: 260px; overflow-y: auto; z-index: 200; margin: 0; padding: 6px 0; list-style: none; } .sub-menu li { list-style: none; } .sub-menu a { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; padding: 10px 16px; color: var(--grey); border: none; white-space: nowrap; } .sub-menu a:hover { color: var(--paper); background: var(--mid); } .nav-links li.menu-item-has-children:hover > .sub-menu, .nav-links li.menu-item-has-children:focus-within > .sub-menu { display: flex; } .fm-menu-links li { border-bottom: 1px solid var(--mid); padding-bottom: 16px; } .fm-menu-links li:last-child { border-bottom: none; } .fm-menu-secondary { grid-template-columns: 1fr !important; } h1, h2, h3, h4, h5, h6, .pullquote, .card-title, .interview-card-title { hyphens: none !important; word-break: normal !important; overflow-wrap: normal !important; } .logo-short { display: none; } @media (max-width: 1200px) { .nav-links, .nav-search { display: none; } .nav-links.open { display: flex; flex-direction: column; gap: 0; position: fixed; top: 60px; left: 0; right: 0; z-index: 99; background: var(--ink); border-bottom: 1px solid var(--mid); padding: 8px 0; } .nav-links.open a { padding: 14px 24px; border: none; border-bottom: 1px solid var(--mid); } .nav-toggle { display: block; } .logo-full { display: none; } .logo-short { display: inline-block; } } .fm-menu-logo { color: var(--pink) !important; } .fm-menu-logo span { color: var(--paper) !important; } body { overflow-x: visible !important; overflow-y: visible !important; } .nav-logo .logo-full svg { height: 30px; width: auto; display: block; } .fm-menu-logo .logo-full svg { height: 26px; width: auto; display: block; } .nav-logo .logo-short svg { height: 22px; width: auto; display: block; } .footer-logo svg { height: 66px; width: auto; display: block; } .footer-logo { display: inline-flex; margin-bottom: 12px; } /* ── AUTHOR ARCHIVE ── */ .page-wrap.author-page { padding: 48px; } nav.nav + * { margin-top: 28px; } .author-hero { display: flex; align-items: center; gap: 24px; padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--mid); } .author-avatar { border-radius: 50%; width: 80px; height: 80px; } .author-hero-info { flex: 1; } .author-name { font-family: 'Bootzy', sans-serif; font-size: 32px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); margin: 0 0 8px; } .author-bio { font-size: 14px; color: var(--grey); max-width: 640px; margin: 0 0 14px; line-height: 1.6; } .author-stats { display: flex; gap: 10px; } .author-stat-pill { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; background: var(--mid); color: var(--paper); padding: 6px 14px; } .sidebar-latest { margin-top: 24px; } .sidebar-latest-h3 { font-family: 'Bootzy', sans-serif; font-size: 18px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--lime); } .sidebar-latest-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--mid); text-decoration: none; } .sidebar-latest-item:last-child { border-bottom: none; } .sidebar-latest-thumb { width: 52px; height: 52px; border-radius: 50%; background-size: cover; background-position: center; background-color: var(--mid); flex-shrink: 0; } .sidebar-latest-info { min-width: 0; } .sidebar-latest-label { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--pink); margin-bottom: 2px; } .sidebar-latest-title { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.35; } @media (max-width: 900px) { .author-page .stream-ad-layout { grid-template-columns: 1fr; } .author-hero { flex-direction: column; text-align: center; } .author-stats { justify-content: center; } } /* ── NAV SEARCH ── */ .nav-searchbox-toggle { background: none; border: none; color: var(--paper); cursor: pointer; display: flex; align-items: center; padding: 6px; } .nav-searchbox-toggle:hover { color: var(--lime); } .nav-searchbox { display: flex; align-items: center; overflow: hidden; max-width: 0; opacity: 0; transition: max-width 0.25s ease, opacity 0.2s ease; background: var(--ink); border: 1px solid var(--mid); } .nav-searchbox.open { max-width: 220px; opacity: 1; margin-right: 4px; } .nav-searchbox-input { background: none; border: none; color: var(--paper); font-family: 'DM Sans', sans-serif; font-size: 12px; padding: 8px 4px 8px 12px; width: 100%; min-width: 160px; } .nav-searchbox-input:focus { outline: none; } .nav-searchbox-submit { background: none; border: none; color: var(--paper); cursor: pointer; padding: 6px 10px; display: flex; align-items: center; } .nav-searchbox-submit:hover { color: var(--lime); } @media (max-width: 1200px) { .nav-searchbox, .nav-searchbox-toggle { display: none; } } /* ── SPOTIFY EMBED ── */ .spotify-section { padding: 64px 48px; background: #A855F7; } .spotify-embed-wrap { max-width: 720px; margin: 24px auto 0; } .spotify-section .stream-section-h2 { color: var(--ink) !important; } /* ── INSTAGRAM EMBEDS ── */ .instagram-section { padding: 64px 48px; background: var(--ink); } .instagram-embed-wrap { max-width: 1100px; margin: 24px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .instagram-embed-wrap iframe { width: 100% !important; } @media (max-width: 900px) { .instagram-embed-wrap { grid-template-columns: 1fr; } } .instagram-section .section-eyebrow { font-family: 'Bootzy', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lime); } .spotify-section .section-eyebrow { font-family: 'Bootzy', sans-serif; font-size: 36px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); } .page-wrap.search-page { background: var(--ink); padding-bottom: 64px; } .search-page .stream-ad-layout { padding: 8px 48px 0; } .search-page .card-grid { gap: 32px; } .search-hero { grid-template-columns: 1fr; } .search-page .sidebar-latest-h3, .search-page .sidebar-latest-title { color: var(--paper); } .search-empty { padding: 64px 48px; } .search-empty-text { font-family: 'Bootzy', sans-serif; font-size: 28px; color: var(--paper); text-transform: uppercase; margin-bottom: 8px; } .search-empty-sub { color: #7A7470; margin-bottom: 24px; } .search-empty-streams { display: flex; flex-wrap: wrap; gap: 12px; } .search-empty-stream-link { display: inline-block; padding: 10px 20px; border: 1px solid var(--paper); color: var(--paper); text-decoration: none; text-transform: uppercase; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; } .search-empty-stream-link:hover { background: var(--paper); color: var(--ink); } .footer-credit { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; color: #7A7470; font-size: 13px; transition: color 0.2s; } .footer-credit:hover { color: var(--paper); } .footer-credit-name { font-family: 'Brush Script MT', cursive; font-size: 20px; color: var(--paper); } .footer-credit-tag { font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; font-size: 12px; } .single-product .woocommerce-product-gallery { float: none; width: 100%; position: relative; } .single-product .summary.entry-summary { float: none; width: 100%; } .single-product .woocommerce-product-gallery__wrapper { display: flex; overflow: hidden; column-count: 1 !important; transition: transform 0.35s ease; border: 1px solid #2E2A2A; aspect-ratio: 3 / 4; } .single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image { flex: 0 0 100%; max-width: 100%; height: 100%; margin: 0; break-inside: avoid; position: relative; overflow: hidden; } .single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; display: block; object-fit: cover; object-position: center; } .wc-gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: var(--ink); color: var(--paper); border: none; width: 44px; height: 44px; border-radius: 50%; font-size: 18px; cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center; opacity: 0.85; } .wc-gallery-arrow:hover { opacity: 1; } .wc-gallery-arrow.prev { left: 16px; } .wc-gallery-arrow.next { right: 16px; } .wc-gallery-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5; } .wc-gallery-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; border: none; padding: 0; } .wc-gallery-dot.active { background: #fff; } .single-product .product { align-items: start; } .single-product .summary.entry-summary { display: flex; flex-direction: column; gap: 16px; } .single-product .summary.entry-summary .product_title { margin-bottom: 0; } .single-product .summary.entry-summary .price { margin-bottom: 0; font-size: 28px; } .single-product .summary.entry-summary .woocommerce-product-details__short-description { margin-bottom: 0; } .footer-credit-label { font-size: 13px; color: #7A7470; } .footer-credit-logo { height: 26px; width: auto; display: inline-block; vertical-align: text-bottom; position: relative; top: 5px; opacity: 0.85; transition: opacity 0.2s; } .footer-credit:hover .footer-credit-logo { opacity: 1; } img[alt="Matilda Elliott"] { object-position: center 15% !important; }