/* * Premier-family tenant design tokens. * * Shared by all seven Manny-network sister sites — premiertributes, * allcountrytributes, bandastributos, legendsofgroove, 90stonow, * taylortributes, renovegas. Token values come from the Premier * Breakdance global-settings.css (`/home/ldhxfnmy/public_html/ * premiertributes/wp-content/uploads/breakdance/css/global-settings.css`) * which is byte-identical across all 7 source sites. * * All tokens are gated on `body[data-theme-family="premier"]` so they * never leak into MZ or the default tenant. Per-tenant accent overrides * (Premier cream vs Country amber vs Bandas red, etc.) layer on top of * these in `premier-overrides.css`. * * Component CSS should read these via `var(--premier-…)` and never * hardcode the raw hex values. Default-family rules stay untouched — * Premier is purely additive. */ body[data-theme-family="premier"] { /* ── Palette ────────────────────────────────────────────────────────── * True black background, warm-cream primary accent, 24k gold for * emphasized hero headlines. */ --premier-bg: #000001; --premier-fg: #FFFFFF; --premier-accent-primary: #FEDDA6; /* warm cream — Premier signature */ --premier-accent-gold: #ffcf40; /* 24k gold — hero headlines */ --premier-accent-gold-edge: #FFE280; /* warmer gold tint */ /* Apex metallic gradient stops — consumed by `[data-premier-gold]` in * premier-overrides.css. Tokenized so each sister tenant can swap the * entire ramp by overriding these tokens, instead of redefining the * full gradient block. The gradient runs deep → mid → light → apex → * light → mid → deep (7-stop ramp). `gold-highlight` is the warm-edge * color for the drop-shadow stack. */ --premier-gold-grad-deep: #8F6D30; --premier-gold-grad-mid: #E4BA6B; --premier-gold-grad-light: #F9EBB2; --premier-gold-grad-apex: #F9F4DC; --premier-gold-highlight: rgba(249, 235, 178, 1); /* Hero CTA + honeycomb texture — also tokenized so sisters can fully * re-tint without component edits. CTA defaults to the cream signature; * honeycomb defaults to the original near-black polygon fill. */ --premier-cta-bg: #E6C077; --premier-cta-bg-hover: #F9EBB2; --premier-cta-fg: #111111; --premier-honeycomb-tint: rgba(15, 15, 15, 0.8); --premier-surface: #1F1F1F; /* near-black cards */ --premier-surface-elevated: #2A2A2A; /* hover/elevated cards */ --premier-text-mid: #999999; --premier-text-soft: #E4E4E4; /* Border alphas derived from --premier-accent-primary so per-sister * primary overrides (90stonow lavender, bandastributos peach, etc.) * propagate to every Premier-family border without needing each * sister to override these tokens individually. */ --premier-border-soft: color-mix(in oklab, var(--premier-accent-primary) 16%, transparent); --premier-border-strong: color-mix(in oklab, var(--premier-accent-primary) 42%, transparent); /* Hero overlay — gradient black → transparent at ~45% opacity. */ --premier-hero-overlay: linear-gradient(180deg, rgba(0, 0, 1, 0) 0%, rgba(0, 0, 1, 0.45) 65%, rgba(0, 0, 1, 0.85) 100%); --premier-hero-side-overlay: linear-gradient(90deg, rgba(0, 0, 1, 0.7) 0%, rgba(0, 0, 1, 0.2) 40%, rgba(0, 0, 1, 0.05) 70%, rgba(0, 0, 1, 0.4) 100%); /* ── Typography ─────────────────────────────────────────────────────── * Body: Roboto. Display/headings: Teko (tall condensed sans, very * different from MZ's Bebas Neue / Squada One). Modular scale 1.250. */ --premier-font-body: var(--font-premier-body), "Roboto", system-ui, sans-serif; --premier-font-display: var(--font-premier-display), "Teko", "Bebas Neue", "Impact", sans-serif; --premier-text-2xs: 0.8125rem; /* 13px — fine print */ --premier-text-xs: 0.9375rem; /* 15px — small labels, badges */ --premier-text-sm: 1rem; /* 16px — body default */ --premier-text-md: 1.125rem; /* 18px — lead body */ --premier-text-lg: 1.4rem; /* 22px — small heading */ --premier-text-xl: 1.75rem; /* 28px — sub-heading */ --premier-text-2xl: 2.2rem; /* 35px — card/section heading */ --premier-text-3xl: 2.75rem; /* 44px — large section heading */ --premier-text-4xl: 3.5rem; /* 56px — eyebrow / hero secondary */ --premier-text-5xl: 5rem; /* 80px — hero secondary */ --premier-text-6xl: 7rem; /* 112px — hero primary cap */ /* Font weights — Roboto carries 300/400/500/700/900. */ --premier-weight-light: 300; --premier-weight-regular: 400; --premier-weight-medium: 500; --premier-weight-bold: 700; --premier-weight-black: 900; /* Line heights. Teko sits tight; Roboto body needs room. */ --premier-leading-display: 0.8; /* hero/Teko caps */ --premier-leading-tight: 1.0; --premier-leading-heading: 1.15; --premier-leading-snug: 1.35; --premier-leading-body: 1.55; --premier-leading-relaxed: 1.7; --premier-tracking-tight: -0.005em; --premier-tracking-normal: 0; --premier-tracking-wide: 0.04em; --premier-tracking-eyebrow: 0.2em; /* ── Spacing ────────────────────────────────────────────────────────── * Premier WP sections breathe at 100px vertical padding — much more * than BandHub's default ~32-48px. The scale here mirrors that * editorial cadence. */ --premier-space-0-5: 0.125rem; --premier-space-1: 0.25rem; --premier-space-2: 0.5rem; --premier-space-3: 0.75rem; --premier-space-4: 1rem; --premier-space-5: 1.25rem; --premier-space-6: 1.5rem; --premier-space-7: 1.75rem; --premier-space-8: 2rem; /* 32px — Premier column gap */ --premier-space-10: 2.5rem; --premier-space-12: 3rem; --premier-space-16: 4rem; --premier-space-20: 5rem; --premier-space-24: 6rem; --premier-space-section: 6.25rem; /* 100px — section vertical padding */ /* Section sizing. * Premier-family pages run noticeably wider than the BandHub default * — most of the viewport at any reasonable size, with only a small * gutter on each side. The `min(96vw, 100rem)` clamp keeps content * at ~96% width up to ultra-wide screens (1600px+), then caps at * 1600px so super-wide monitors don't read as a single huge column. * Premier WP itself sits at 1120px which felt narrow on modern * displays; this matches the visual presence the user expects. */ --premier-section-pad-y: clamp(3.25rem, 2rem + 3vw, 5rem); /* Responsive 52→80px. Was a flat * 3.75rem (60px); modern editorial * sites breathe more on desktop * while staying compact on mobile. * Bumped 2026-05 as part of the * Premier chassis modernisation. */ --premier-section-max-w: min(96vw, 100rem); /* 96vw, capped at 1600px */ --premier-column-gap: 2rem; /* 32px */ /* ── Motion ──────────────────────────────────────────────────────────── * Premier uses slow 500ms transitions for a cinematic feel. The * "standard" tier matches BandHub's default for interactive primitives * that should feel responsive (buttons, links). */ --premier-transition-cinematic: 500ms cubic-bezier(0.2, 0.6, 0.2, 1); --premier-transition-standard: 220ms cubic-bezier(0.2, 0.6, 0.2, 1); /* Radius — Premier uses very soft rounded corners on cards (8-12px). */ /* Premier reads as poster / cinema-marquee — square edges, not the * rounded "modern SaaS card" look. All tokens set to 0; circles * (avatars, play buttons) still use literal `border-radius: 50%` * outside the token system. */ --premier-radius-sm: 0; --premier-radius-md: 0; --premier-radius-lg: 0; --premier-radius-xl: 0; --premier-radius-reference-card: 0.75rem; --premier-radius-pill: 9999px; } /* * Premier-family tenant style overrides. * * All selectors are gated on `body[data-theme-family="premier"]` so the * rules apply across every sister site in `PREMIER_SITE_KEYS` without * leaking into MZ or default. Per-tenant accent overrides at the bottom * use `body[data-tenant=""]` to swap the cream primary for an * amber / red / teal / etc accent on each sub-brand. * * Mirror of `mz-overrides.css` in structure: body baseline, headings, * buttons, cards, then a tenant-accent stack. Component-level CSS * modules keep ownership of their own layout; this file only retints * + retypographs. */ /* ── Body baseline ───────────────────────────────────────────────────── */ body[data-theme-family="premier"] { background: var(--premier-bg); color: var(--premier-fg); font-family: var(--premier-font-body); font-weight: var(--premier-weight-regular); line-height: var(--premier-leading-body); /* Premier WP pages don't carry the MZ gold-halo atmosphere — keep the * background flat black for the cinematic / magazine feel. */ background-image: none; } /* ── Headings ─────────────────────────────────────────────────────────── */ body[data-theme-family="premier"] h1, body[data-theme-family="premier"] h2, body[data-theme-family="premier"] h3, body[data-theme-family="premier"] h4, body[data-theme-family="premier"] h5, body[data-theme-family="premier"] h6 { font-family: var(--premier-font-display); font-weight: var(--premier-weight-regular); line-height: var(--premier-leading-tight); letter-spacing: var(--premier-tracking-normal); text-wrap: balance; text-transform: uppercase; } /* Premier WP's H1 token is `clamp(2.5rem, 2rem + 2.5vw, 4rem)` — * editorial scale, not poster. The display-sized hero headline lives * in `.heroHeadline` (homepage) and `.heroTitle` (band profile), which * override this with `!important` so they keep their poster-cap size. */ body[data-theme-family="premier"] h1 { font-size: clamp(2.25rem, 1.25rem + 3vw, var(--premier-text-4xl)); line-height: var(--premier-leading-display); } body[data-theme-family="premier"] h2 { font-size: clamp(1.5rem, 1rem + 1.5vw, var(--premier-text-2xl)); line-height: var(--premier-leading-display); } body[data-theme-family="premier"] h3 { font-size: var(--premier-text-lg); } /* ── Buttons ──────────────────────────────────────────────────────────── */ /* Premier's primary CTA is the cream accent on true black; secondary is * a transparent pill with a cream border. Hover lifts -2px with a 500ms * cinematic transition. Scoped to `[data-component="button"]` so the * rule can't cascade into Card children that share data-variant tokens. */ /* Shared `.eyebrow` + Tailwind `text-primary` consume BandHub's root * `--primary` (a gold hsl) by default — that gold bleeds through every * SectionCard, ProtectedPanel, and tracked-caps eyebrow across the * Premier family regardless of the sister's accent. Repoint to the * Premier accent so each sister's eyebrow/primary text picks up its * own brand color (90stonow lavender, allcountrytributes amber, etc.) */ body[data-theme-family="premier"] .eyebrow, body[data-theme-family="premier"] .text-primary { color: var(--premier-accent-primary); } body[data-theme-family="premier"] [data-component="button"] { font-family: var(--premier-font-body); font-weight: var(--premier-weight-medium); letter-spacing: var(--premier-tracking-wide); text-transform: uppercase; transition: background-color var(--premier-transition-cinematic), color var(--premier-transition-cinematic), border-color var(--premier-transition-cinematic), transform var(--premier-transition-cinematic), box-shadow var(--premier-transition-cinematic); } body[data-theme-family="premier"] [data-component="button"][data-variant="gold"], body[data-theme-family="premier"] [data-component="button"][data-variant="default"] { background: var(--premier-accent-primary); color: #000; border-color: transparent; } body[data-theme-family="premier"] [data-component="button"][data-variant="gold"]:hover, body[data-theme-family="premier"] [data-component="button"][data-variant="default"]:hover { background: color-mix(in oklab, var(--premier-accent-primary) 88%, white); transform: translateY(-2px); box-shadow: 0 8px 24px -12px color-mix(in oklab, var(--premier-accent-primary) 65%, transparent); } body[data-theme-family="premier"] [data-component="button"][data-variant="gold-outline"] { background: transparent; color: var(--premier-accent-primary); border: 1px solid var(--premier-accent-primary); } body[data-theme-family="premier"] [data-component="button"][data-variant="gold-outline"]:hover { background: color-mix(in oklab, var(--premier-accent-primary) 16%, transparent); transform: translateY(-2px); } body[data-theme-family="premier"] [data-component="button"][data-variant="ghost"] { color: var(--premier-text-soft); } body[data-theme-family="premier"] [data-component="button"][data-variant="ghost"]:hover { background: rgba(255, 255, 255, 0.06); color: var(--premier-fg); } /* ── Card chrome ──────────────────────────────────────────────────────── */ body[data-theme-family="premier"] [data-component="section-card"], body[data-theme-family="premier"] [data-component="article-card"] { background: var(--premier-surface); border-color: var(--premier-border-soft); border-radius: var(--premier-radius-md); box-shadow: 0 16px 40px -28px rgba(0, 0, 0, 0.9); transition: transform var(--premier-transition-cinematic), border-color var(--premier-transition-cinematic), box-shadow var(--premier-transition-cinematic); } body[data-theme-family="premier"] [data-component="section-card"]:hover, body[data-theme-family="premier"] [data-component="article-card"]:hover { transform: translateY(-2px); border-color: var(--premier-border-strong); box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.95); } /* ── Directory (Phase 4: magazine-style /bands grid) ────────────────── * * Phase 4 of the Premier-family redesign retargets the shared directory * CSS module (`directory-view-content.module.css`) into a denser, more * editorial layout — 3-up cards (4-up on ultrawide), 4:5 portrait media, * cream genre/era chips overlayed on the image, cinematic 500ms hover * lift + 1.04 zoom, larger Teko section header, and Premier-cream filter * chrome. The Premier directory page header (`.hero`) drops MZ's * gold-pulse atmosphere in favor of flat black + cream eyebrow + Teko * display heading. * * All rules below match the directory CSS module's hashed class names * via `[class*="directory-view-content-module"][class$="__"]` — * an end-anchored attribute selector keeps each rule precise (so e.g. * `__hero` does not bleed into `__heroBackdrop` / `__heroGrid`). The * Premier-family gate is `body[data-theme-family="premier"]`, so MZ * and the default tenant inherit none of this. */ /* Page background — Premier directory sits on flat black; lose the * radial gold halo the default directory paints behind the hero. */ body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__page"] { background: var(--premier-bg); background-image: none; } /* ── Hero (page header) ──────────────────────────────────────────────── */ body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__hero"] { border-bottom: 1px solid var(--premier-border-soft); background: var(--premier-bg); } /* Kill the MZ gold backdrop + mesh — Premier hero is flat. We keep the * containers (the markup ships them unconditionally) but blank the * gradients. */ body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__heroBackdrop"], body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__heroMesh"] { background: none; opacity: 0; } /* Editorial vertical rhythm — Premier sections breathe at 100px. */ body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__heroGrid"] { padding-block: clamp(3.5rem, 8vh, var(--premier-section-pad-y)); } body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__eyebrow"] { font-family: var(--premier-font-body); font-weight: var(--premier-weight-bold); letter-spacing: var(--premier-tracking-eyebrow); text-transform: uppercase; color: var(--premier-accent-primary); font-size: var(--premier-text-2xs); } body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__title"] { font-family: var(--premier-font-display); font-weight: var(--premier-weight-regular); letter-spacing: var(--premier-tracking-normal); /* Premier WP `.gold` heading treatment: tight stack (80%), balanced * wrapping, and a hard-offset poster shadow on the gold caps. */ line-height: 0.8; text-transform: uppercase; text-wrap: balance; font-size: clamp(2.75rem, 1.5rem + 4.5vw, var(--premier-text-5xl)); color: var(--premier-accent-gold); text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.67); } /* The default directory hero title contains a `.text-gradient-gold` * `` for the accent half. Re-tint to gold + keep the poster * shadow consistent with the rest of the title. */ body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__title"] .text-gradient-gold { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: initial; color: var(--premier-accent-gold); } body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__heroCaption"] { font-family: var(--premier-font-body); color: var(--premier-text-soft); font-size: var(--premier-text-sm); line-height: var(--premier-leading-body); max-width: 34rem; } body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__heroCountPill"] { font-family: var(--premier-font-body); font-weight: var(--premier-weight-bold); letter-spacing: var(--premier-tracking-wide); text-transform: uppercase; background: rgba(0, 0, 0, 0.4); border-color: var(--premier-border-strong); color: var(--premier-accent-primary); box-shadow: none; } /* ── Stage padding (top/bottom of the directory main) ───────────────── */ body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__stage"] { padding-top: var(--premier-space-12); padding-bottom: var(--premier-section-pad-y); } /* ── Filter chrome (top bar + chips + drawer trigger) ───────────────── */ body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__topBar"] { background: rgba(255, 255, 255, 0.02); border-color: var(--premier-border-soft); border-radius: var(--premier-radius-md); box-shadow: none; backdrop-filter: none; } body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__filterChipLink"] { background: rgba(254, 221, 166, 0.08); border-color: var(--premier-border-strong); color: var(--premier-accent-primary); box-shadow: none; font-family: var(--premier-font-body); font-weight: var(--premier-weight-bold); letter-spacing: var(--premier-tracking-wide); text-transform: uppercase; } body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__filterChipLink"]:hover { background: rgba(254, 221, 166, 0.16); border-color: var(--premier-accent-primary); color: var(--premier-fg); box-shadow: none; } body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__filterDrawerTrigger"]:hover, body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__filterDrawerTrigger"]:focus-visible { border-color: var(--premier-accent-primary); background: rgba(254, 221, 166, 0.08); box-shadow: none; } body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__filterDrawerBadge"] { background: rgba(254, 221, 166, 0.16); color: var(--premier-accent-primary); } body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__resultsMetaItem"] { font-family: var(--premier-font-body); letter-spacing: var(--premier-tracking-wide); text-transform: uppercase; background: rgba(255, 255, 255, 0.04); border-color: var(--premier-border-soft); color: var(--premier-text-soft); } /* ── Card grid (3-up desktop, 4-up ultrawide) ───────────────────────── */ body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__compactGrid"] { gap: var(--premier-column-gap); } @media (min-width: 960px) { body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__compactGrid"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1600px) { body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__compactGrid"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ── Directory listing card (denser, larger imagery) ────────────────── */ body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__listingCard"] { background: var(--premier-surface); border-color: var(--premier-border-soft); border-radius: var(--premier-radius-md); box-shadow: 0 16px 40px -28px rgba(0, 0, 0, 0.9); transition: transform var(--premier-transition-cinematic), border-color var(--premier-transition-cinematic), box-shadow var(--premier-transition-cinematic), background-color var(--premier-transition-cinematic); } @media (prefers-reduced-motion: no-preference) { body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__listingCard"]:hover { transform: translateY(-3px); border-color: var(--premier-border-strong); background: var(--premier-surface-elevated); box-shadow: 0 28px 56px -32px rgba(0, 0, 0, 0.95); } body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__listingCard"]:hover [class*="directory-view-content-module"][class$="__listingImage"] { transform: scale(1.04); } } body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__listingCard"]:focus-within { border-color: var(--premier-accent-primary); box-shadow: 0 0 0 2px rgba(254, 221, 166, 0.25), 0 28px 56px -32px rgba(0, 0, 0, 0.95); } /* Premier card hover keeps the title color stable (no gold flash). */ body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__listingCard"]:hover [class*="directory-view-content-module"][class$="__cardTitle"] { color: var(--premier-fg); } /* Lock to 16:9 to match MZ band-hero treatment — band promo photos * are shot 1920×1080, so the prior 4:5 portrait crop was throwing * away half the frame. Consistent across all tenants. */ body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__listingMedia"] { aspect-ratio: 16 / 9; background: var(--premier-surface); } body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__listingImage"] { transition: transform var(--premier-transition-cinematic); } /* Cinematic scrim — readable name + cream "View profile" affordance. */ body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__mediaScrim"] { background: linear-gradient( 180deg, rgba(0, 0, 1, 0) 0%, rgba(0, 0, 1, 0.05) 45%, rgba(0, 0, 1, 0.7) 85%, rgba(0, 0, 1, 0.92) 100% ); } body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__mediaCopy"] { padding: var(--premier-space-5) var(--premier-space-5) var(--premier-space-4); } body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__cardTitle"] { font-family: var(--premier-font-display); font-weight: var(--premier-weight-regular); letter-spacing: var(--premier-tracking-normal); text-transform: uppercase; line-height: var(--premier-leading-tight); font-size: clamp(1.55rem, 1rem + 1vw, 1.95rem); color: var(--premier-fg); } body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__cardTarget"] { font-family: var(--premier-font-body); font-weight: var(--premier-weight-bold); letter-spacing: var(--premier-tracking-eyebrow); text-transform: uppercase; font-size: var(--premier-text-2xs); color: var(--premier-accent-primary); } /* "View profile" affordance — appears on hover, slides in. The default * directory already keeps the link in the card body; Premier surfaces it * over the image via the existing `.primaryLink` element so we get the * affordance without forking markup. We restyle the in-body footer link * with a stronger cream accent. */ body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__primaryLink"] { color: var(--premier-accent-primary); font-family: var(--premier-font-body); font-weight: var(--premier-weight-bold); letter-spacing: var(--premier-tracking-wide); text-transform: uppercase; font-size: var(--premier-text-2xs); transition: color var(--premier-transition-standard), transform var(--premier-transition-standard); } body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__primaryLink"]:hover { color: var(--premier-fg); } @media (prefers-reduced-motion: no-preference) { body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__listingCard"]:hover [class*="directory-view-content-module"][class$="__primaryLink"] { transform: translateX(3px); } } body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__secondaryLink"] { color: var(--premier-text-mid); font-family: var(--premier-font-body); font-weight: var(--premier-weight-medium); letter-spacing: var(--premier-tracking-wide); text-transform: uppercase; font-size: var(--premier-text-2xs); } body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__secondaryLink"]:hover { color: var(--premier-accent-primary); } /* Card body padding tightens — magazine grid lives or dies on density. */ body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__listingBody"] { padding: var(--premier-space-5); gap: var(--premier-space-3); } body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__cardContentFooter"] { border-top: 1px solid var(--premier-border-soft); } body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__cardBody"] { color: var(--premier-text-mid); font-family: var(--premier-font-body); font-size: var(--premier-text-2xs); line-height: var(--premier-leading-snug); } body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__cardHeadline"] { font-family: var(--premier-font-body); color: var(--premier-text-soft); } body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__cardHeadline"]:hover { color: var(--premier-accent-primary); } body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__locationChip"] { font-family: var(--premier-font-body); color: var(--premier-text-soft); font-size: var(--premier-text-2xs); } /* Genre chips — cream pills, no MZ gold. */ body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__genrePill"] { background: rgba(254, 221, 166, 0.14); color: var(--premier-accent-primary); border: 1px solid var(--premier-border-soft); font-family: var(--premier-font-body); font-weight: var(--premier-weight-bold); letter-spacing: var(--premier-tracking-wide); text-transform: uppercase; font-size: 0.66rem; padding: 0.2rem 0.62rem; } /* Proof pills (rating, "Published", "Website") — cream accent. */ body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__proofPill"] { color: var(--premier-accent-primary); font-family: var(--premier-font-body); font-weight: var(--premier-weight-bold); letter-spacing: var(--premier-tracking-wide); text-transform: uppercase; font-size: var(--premier-text-2xs); } body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__proofPillMuted"] { color: var(--premier-text-mid); font-family: var(--premier-font-body); font-weight: var(--premier-weight-medium); letter-spacing: var(--premier-tracking-wide); text-transform: uppercase; font-size: var(--premier-text-2xs); } /* Featured ribbon — replace MZ gold gradient with cream-on-black. */ body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__featuredBadge"] { background: var(--premier-accent-primary); border-color: var(--premier-accent-primary); color: #000; font-family: var(--premier-font-body); font-weight: var(--premier-weight-bold); letter-spacing: var(--premier-tracking-eyebrow); font-size: 0.62rem; box-shadow: 0 12px 28px -18px rgba(254, 221, 166, 0.55); } /* ── Pagination ─────────────────────────────────────────────────────── */ body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__paginationButtonCurrent"] { background: var(--premier-accent-primary); color: #000; } /* ── Discovery shortcuts band (sits between hero and grid) ──────────── */ /* The shortcut card uses Tailwind utility classes (`text-gold`, * `border-border/70`) for its eyebrow + chip styling. Retarget those * scoped to Premier so the section reads cream-on-black, not gold. */ body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__stage"] ~ * .text-gold, body[data-theme-family="premier"] section[aria-labelledby="directory-discovery-shortcuts-heading"] .text-gold, body[data-theme-family="premier"] section[aria-labelledby="directory-discovery-shortcuts-heading"] a.text-gold { color: var(--premier-accent-primary); } body[data-theme-family="premier"] section[aria-labelledby="directory-discovery-shortcuts-heading"] { border-color: var(--premier-border-soft); background: rgba(255, 255, 255, 0.02); border-radius: var(--premier-radius-md); } body[data-theme-family="premier"] section[aria-labelledby="directory-discovery-shortcuts-heading"] h2 { font-family: var(--premier-font-display); text-transform: uppercase; letter-spacing: var(--premier-tracking-normal); color: var(--premier-fg); } body[data-theme-family="premier"] section[aria-labelledby="directory-discovery-shortcuts-heading"] a { font-family: var(--premier-font-body); letter-spacing: var(--premier-tracking-wide); text-transform: uppercase; } body[data-theme-family="premier"] section[aria-labelledby="directory-discovery-shortcuts-heading"] a:not(.text-gold):hover { border-color: var(--premier-accent-primary); color: var(--premier-accent-primary); } /* ── Site header — transparent overlay over the hero ───────────────────── * Premier WP renders its header with `background: #00000100` (8-digit hex, * alpha 00 = transparent) so the band-collage hero photo extends behind * the logo + nav. Replicating that here: header is invisible at the top * of the page, lets the hero show through. As soon as you scroll past * the hero, `data-scrolled="true"` swaps the background to opaque so * the nav stays legible against page content below. * * No backdrop-blur in the un-scrolled state — Premier WP doesn't have * one, and it would compete with the metallic-gold logo's drop-shadow * stack. */ body[data-theme-family="premier"] nav.glass-strong { background: transparent; border-bottom: 0 solid transparent; backdrop-filter: none; transition: background-color var(--premier-transition-standard), border-color var(--premier-transition-standard), box-shadow var(--premier-transition-standard); } body[data-theme-family="premier"] nav.glass-strong[data-scrolled="true"] { background: rgba(0, 0, 1, 0.92); border-bottom: 1px solid var(--premier-border-strong); backdrop-filter: blur(18px); box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.9); } /* Logo + lockup shrink on scroll. The home hero hands a large 15rem * logo to the header; once the page scrolls past the hero photo, the * oversized logo collides with the nav links and bleeds over content * underneath. Compress to ~7rem with a smooth 220ms transition. The * Image element itself carries Tailwind responsive widths, so we * override via max-width on the wrapper + the img directly so any * intrinsic w-[15rem] / w-[12rem] utility yields to the scroll state. */ body[data-theme-family="premier"] nav.glass-strong [data-header-brand-lockup] img { transition: max-width var(--premier-transition-standard), max-height var(--premier-transition-standard); } body[data-theme-family="premier"] nav.glass-strong[data-scrolled="true"] [data-header-brand-lockup] { gap: 0; } body[data-theme-family="premier"] nav.glass-strong[data-scrolled="true"] [data-header-brand-lockup] img { max-width: 7rem; max-height: 2.5rem; width: auto !important; height: auto; } /* Hide the optional tagline once scrolled — it sits below the logo and * just adds vertical bulk on the compressed header. */ body[data-theme-family="premier"] nav.glass-strong[data-scrolled="true"] [data-header-brand-tagline] { display: none; } /* Semi-transparent pill behind the primary nav-links group. With the * header itself transparent over the hero, the nav text would * otherwise sit directly on the band-collage photography and read * poorly. The pill gives the link row a defined surface — matching * the way Premier WP's nav lockup reads as a discrete element * against the photo behind it. */ body[data-theme-family="premier"] nav.glass-strong [role="navigation"] { background: rgba(0, 0, 1, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(254, 221, 166, 0.14); border-radius: 0; padding: 0.25rem 0.75rem; box-shadow: 0 4px 18px -10px rgba(0, 0, 0, 0.7); } /* When the header is scrolled (already painted near-opaque), drop * the pill background since the nav now sits on a solid surface. */ body[data-theme-family="premier"] nav.glass-strong[data-scrolled="true"] [role="navigation"] { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } body[data-theme-family="premier"] nav.glass-strong [role="navigation"] a[data-variant="ghost"] { font-family: var(--premier-font-body); font-weight: var(--premier-weight-medium); letter-spacing: var(--premier-tracking-wide); text-transform: uppercase; font-size: var(--premier-text-sm); color: var(--premier-text-soft); transition: color var(--premier-transition-standard); } body[data-theme-family="premier"] nav.glass-strong [role="navigation"] a[data-variant="ghost"]:hover, body[data-theme-family="premier"] nav.glass-strong [role="navigation"] a[data-variant="ghost"]:focus-visible { color: var(--premier-accent-primary); } /* ── Public footer (thinner, cream-trim) ─────────────────────────────── */ body[data-theme-family="premier"] footer { background: #050505; border-top: 1px solid var(--premier-border-soft); } body[data-theme-family="premier"] [data-component="footer-brand"] { font-family: var(--premier-font-display); font-weight: var(--premier-weight-regular); letter-spacing: var(--premier-tracking-normal); text-transform: uppercase; color: var(--premier-accent-primary); } /* ── Page header (editorial banner with cream eyebrow) ───────────────── */ /* Tighter padding-block — at desktop the prior 5vh + 4rem clamp opened up * roughly 140px of empty black above the eyebrow on /contact and other * page-header'd pages, which reads as wasted real estate. Pulling the * upper bound to 4rem and rebasing the clamp lower gives the header * enough breathing room without the dead zone. Refs UX audit P1-6. */ body[data-theme-family="premier"] [data-component="page-header"] { border: 0; background: none; box-shadow: none; padding-block: clamp(2rem, 4vh, 4rem); } body[data-theme-family="premier"] [data-component="page-header"] h1 { font-family: var(--premier-font-display); font-weight: var(--premier-weight-regular); letter-spacing: var(--premier-tracking-normal); line-height: var(--premier-leading-display); text-transform: uppercase; font-size: clamp(2.75rem, 6vw, var(--premier-text-5xl)); } body[data-theme-family="premier"] [data-component="page-header"] .eyebrow { font-family: var(--premier-font-body); font-weight: var(--premier-weight-bold); letter-spacing: var(--premier-tracking-eyebrow); text-transform: uppercase; color: var(--premier-accent-primary); font-size: var(--premier-text-2xs); } /* ── Metallic gold text treatment ───────────────────────────────────── * Ported verbatim from Premier WP's `.gold` rule in `global-settings.css`. * Premier's gold heading caps aren't a flat color — they're a horizontal * mirror-symmetric metallic gradient (dark bronze → light highlight at * center → dark bronze) clipped to the text + three stacked drop-shadow * filters that give the letterforms a 3D edge and a hard offset. * * linear-gradient stops (left → right): * 0% #8F6D30 dark bronze * 22% #E4BA6B warm brass * 45% #F9EBB2 light cream-gold * 50% #F9F4DC near-white highlight (center) * 55% #F9EBB2 * 78% #E4BA6B * 100% #8F6D30 * * drop-shadow stack: * -1px -1px rgba(249,235,178,1) warm-edge highlight * -1px -1px rgba(0,0,0,0.5) counter-shadow * 5px 5px rgba(0,0,0,0.75) hard offset poster shadow * * Apply by adding the `data-premier-gold` attribute to any heading. * (Why data-attribute rather than a real class: CSS modules in Next.js * hash class names per-component, so a literal `.gold` class wouldn't * be reachable from the module files. The data-attribute works across * every Premier component without coupling them to a shared module.) * * Important: this rule sets `text-shadow: none !important` to wipe any * per-component text-shadow declarations. The visual poster shadow * comes from the drop-shadow filter chain instead — text-shadow and * the gradient text-clip don't compose cleanly. * * `paint-order: stroke fill` keeps the gradient on top if a component * also sets `-webkit-text-stroke` (e.g. the category-tile labels). */ body[data-theme-family="premier"] [data-premier-gold] { background-image: linear-gradient( to right, var(--premier-gold-grad-deep) 0%, var(--premier-gold-grad-mid) 22%, var(--premier-gold-grad-light) 45%, var(--premier-gold-grad-apex) 50%, var(--premier-gold-grad-light) 55%, var(--premier-gold-grad-mid) 78%, var(--premier-gold-grad-deep) 100% ); color: transparent !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none !important; font-weight: var(--premier-weight-bold) !important; -webkit-filter: drop-shadow(-1px -1px 0 var(--premier-gold-highlight)) drop-shadow(-1px -1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.75)); filter: drop-shadow(-1px -1px 0 var(--premier-gold-highlight)) drop-shadow(-1px -1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.75)); paint-order: stroke fill; } /* Defensive override: the category-tile labels use `-webkit-text-stroke` * for legibility over photographic backgrounds. When the metallic * gradient also applies, the stroke can over-saturate the letterforms. * Reset the stroke when gold treatment is active. */ body[data-theme-family="premier"] [data-premier-gold] { -webkit-text-stroke: 0; } /* ── Apex vs section heading treatment ─────────────────────────────────── * The full metallic-gradient + drop-shadow stack reads as premium poster * type at hero-apex scale (~3rem+). Below that — at section H2s on /about, * /packages, /services and the homepage — the gradient + 5px shadow start * looking dated and heavy. Flatten Premier-family `data-premier-gold` on * any H2 / `.sectionHeading` to a solid gold color with a lighter offset * shadow. The hero H1s (`.heroHeadline`, page H1s) keep the full stack. * Refs UX audit P1-2. */ body[data-theme-family="premier"] [data-premier-gold]:where(h2), body[data-theme-family="premier"] h2[data-premier-gold], body[data-theme-family="premier"] [data-premier-gold][class*="sectionHeading"] { background-image: none; background: none; color: var(--premier-accent-gold) !important; -webkit-text-fill-color: var(--premier-accent-gold); -webkit-background-clip: initial; background-clip: initial; font-weight: var(--premier-weight-regular) !important; /* Lighter poster shadow — drop the 5px hard offset + warm-edge highlight * filter stack; replace with a single hard text-shadow. */ -webkit-filter: none; filter: none; text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6) !important; } /* ── Site nav: active-page indicator ──────────────────────────────────── * The shared site-header applies `text-gold` to the active nav link via * its activeNavHref logic. On the Premier family, `text-gold` reads as * MZ-yellow and doesn't match the cream accent system; retint it and * add a subtle underline so the active state is unmistakable. Pulling * via `aria-current="page"` (which the header also stamps) keeps the * rule independent of utility-class drift. Refs UX audit P1-5. */ body[data-theme-family="premier"] nav.glass-strong a[aria-current="page"] { color: var(--premier-accent-primary) !important; font-weight: var(--premier-weight-bold); text-underline-offset: 6px; text-decoration: underline solid var(--premier-accent-primary) 2px; } /* Also kill the `text-gold` Tailwind utility on the Premier nav so the * default-tenant MZ-yellow doesn't bleed through before the active-link * rule resolves. */ body[data-theme-family="premier"] nav.glass-strong [role="navigation"] a.text-gold { color: var(--premier-accent-primary); } /* ── Discovery shortcuts: group eyebrows ──────────────────────────────── * The directory's DirectoryDiscoveryShortcuts component already groups * chips by City/Event/Vibe/Era. On Premier we raise the visibility of * the per-group eyebrows so the section reads as four distinct lanes * rather than a wall of chips. Refs UX audit P1-11. */ body[data-theme-family="premier"] section[aria-labelledby="directory-discovery-shortcuts-heading"] .text-xs.uppercase.tracking-\[0\.18em\] { color: var(--premier-accent-primary); font-family: var(--premier-font-body); font-weight: var(--premier-weight-bold); letter-spacing: var(--premier-tracking-eyebrow); font-size: 0.72rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--premier-border-soft); margin-bottom: 0.5rem; } /* Add a touch more separation between the four group columns so they * read as distinct rows on narrow widths too. */ body[data-theme-family="premier"] section[aria-labelledby="directory-discovery-shortcuts-heading"] > .grid { row-gap: 1.25rem; } /* ── Directory card "View profile" affordance bump ────────────────────── * The Premier listing-card primary link reads small at the prior 13px; * bump to 14px and add a touch more letter-spacing so it telegraphs as * the CTA on the card. Arrow ships from the JSX so no extra glyph * needed. Refs UX audit P2-4. */ body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__primaryLink"] { font-size: 0.875rem; letter-spacing: var(--premier-tracking-eyebrow); } /* ── Honeycomb texture visibility ─────────────────────────────────────── * The `.sectionHoneycomb` rule on the homepage / content-page modules * uses `rgba(0,0,0,0.82)` as the overlay with 80%-opacity polygons. At * desktop widths the result is effectively invisible. Re-tune: lift the * polygon fill to fully opaque + drop the overlay to 0.75 so the cinema * texture actually reads. The polygon fill is baked into the SVG data URL * (which we can't override), but lowering the overlay opacity exposes * the texture underneath. Refs UX audit P2-5. */ body[data-theme-family="premier"] [class*="-module"][class$="__sectionHoneycomb"], body[data-theme-family="premier"] [class*="premier-content-page-module"][class$="__sectionHoneycomb"], body[data-theme-family="premier"] [class*="homepage-premier-module"][class$="__sectionHoneycomb"] { background-color: rgba(0, 0, 0, 0.65); /* Bump the texture by stacking a brighter inset overlay so the polygon * shadow contrast is visible on top of the photographic / flat-black * backgrounds beneath. */ background-blend-mode: normal; } /* ── Premier footer additions (Featured Acts row + social + newsletter) ─ * The PremierFooterContent component grew a featured-acts row, social * icon row, and newsletter signup beneath the existing four-column * link grid. These rules style the cinematic chrome around them. */ body[data-theme-family="premier"] [data-premier-footer-featured-row] { border-top: 1px solid var(--premier-border-soft); padding-top: 2rem; display: grid; gap: 1rem; } body[data-theme-family="premier"] [data-premier-footer-section-label] { font-family: var(--premier-font-body); font-weight: var(--premier-weight-bold); letter-spacing: var(--premier-tracking-eyebrow); text-transform: uppercase; color: var(--premier-accent-primary); font-size: 0.72rem; } body[data-theme-family="premier"] [data-premier-footer-featured-grid] { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; } body[data-theme-family="premier"] [data-premier-featured-act] { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.5rem; border: 1px solid var(--premier-border-soft); background: rgba(255, 255, 255, 0.02); color: var(--premier-text-soft); font-family: var(--premier-font-body); font-size: 0.875rem; font-weight: var(--premier-weight-medium); text-decoration: none; transition: border-color var(--premier-transition-standard), color var(--premier-transition-standard), background-color var(--premier-transition-standard); } body[data-theme-family="premier"] [data-premier-featured-act]:hover, body[data-theme-family="premier"] [data-premier-featured-act]:focus-visible { border-color: var(--premier-accent-primary); color: var(--premier-accent-primary); background: rgba(254, 221, 166, 0.06); outline: none; } body[data-theme-family="premier"] [data-premier-featured-act-thumb] { width: 3.25rem; height: 3.25rem; object-fit: cover; flex-shrink: 0; background: var(--premier-surface); } body[data-theme-family="premier"] [data-premier-footer-social-row] { border-top: 1px solid var(--premier-border-soft); padding-top: 1.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } body[data-theme-family="premier"] [data-premier-footer-social-link] { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--premier-border-soft); color: var(--premier-text-soft); transition: border-color var(--premier-transition-standard), color var(--premier-transition-standard), background-color var(--premier-transition-standard); } body[data-theme-family="premier"] [data-premier-footer-social-link]:hover, body[data-theme-family="premier"] [data-premier-footer-social-link]:focus-visible { border-color: var(--premier-accent-primary); color: var(--premier-accent-primary); background: rgba(254, 221, 166, 0.08); outline: none; } body[data-theme-family="premier"] [data-premier-footer-newsletter] { border-top: 1px solid var(--premier-border-soft); padding-top: 1.75rem; } /* ── Per-tenant token overrides ──────────────────────────────────────── */ /* Sister tenants share Premier's cream-gold chrome at the WP origin — * differentiation upstream comes from the painted center-island logo * and the hero collage backplate, not from accent color swaps. The only * legitimate per-sister token swap from the WP origin is taylortributes, * whose Breakdance `--bde-palette-24kgold-11` is `#D63030` (Eras-Tour * red) instead of the family `#ffcf40`. Leave the other five on pure * Premier chrome; their painted logos + hero photos do the work. */ body[data-tenant="taylortributes"] { --premier-font-display: var(--font-sister-taylortributes-display), "Italiana", "Cormorant Garamond", serif; --premier-accent-gold: #D63030; /* Eras-Tour red */ --premier-accent-gold-edge: #E84545; --premier-gold-grad-deep: #6B1414; --premier-gold-grad-mid: #B82828; --premier-gold-grad-light: #E84545; --premier-gold-grad-apex: #FF6A6A; --premier-gold-highlight: rgba(255, 200, 200, 1); } /* 90stonow — neon-vinyl ramp. The painted logo is a hot-pink rim around * a magenta/electric-blue concentric "vinyl record" with "90s to NOW" * stacked neon; the hero backplate is a purple/blue starburst. The ramp * walks deep indigo → magenta-purple → hot pink → pale-pink apex so the * hero headline reads like polished neon vinyl rather than gold. Accent * primary shifts slightly off cream toward a soft lavender-pink so nav * links + CTAs tie back to the brand without fighting the gradient apex. */ body[data-tenant="90stonow"] { --premier-font-display: var(--font-sister-90stonow-display), "Audiowide", "Russo One", sans-serif; --premier-gold-grad-deep: #2D0E5E; /* deep indigo — record edge */ --premier-gold-grad-mid: #7E2DD8; /* magenta-purple transition */ --premier-gold-grad-light: #FF6BC1; /* hot pink near-apex */ --premier-gold-grad-apex: #FFE0F5; /* pale-pink neon apex */ --premier-gold-highlight: rgba(255, 200, 240, 1); --premier-accent-gold: #FF6BC1; /* hot pink for section H2s */ --premier-accent-gold-edge: #FF8FD3; /* warmer pink tint */ --premier-accent-primary: #FFD6EC; /* soft lavender-pink, shifted off cream */ --premier-cta-bg: #FF49B0; /* vivid neon pink pill */ --premier-cta-bg-hover: #FF8FD3; /* lighter neon pink on hover */ --premier-cta-fg: #2D0E5E; /* deepest indigo from ramp for legible contrast */ --premier-honeycomb-tint: rgba(80, 20, 90, 0.55); /* subtle magenta-tinted dark for hex texture */ } /* allcountrytributes — Western-sunset / aged-whiskey ramp. Painted logo * is a gold-ribbon banner over cowboy-duo silhouettes; hero backplate is * a sepia windmill-prairie landscape with country-star portraits. The * ramp walks burnished leather → rich amber → warm cream-gold → pale * buttery cream, evoking sunset on the plains + whiskey-bottle glass — * distinctly warmer/amber than Premier's neutral cream-gold. Accent * primary shifts off cream toward buckskin so nav + CTAs tie back to * the leather-and-sundown palette without fighting the apex. */ body[data-tenant="allcountrytributes"] { --premier-font-display: var(--font-sister-allcountrytributes-display), "Rye", "Smokum", "Bevan", serif; --premier-gold-grad-deep: #5C3A12; /* deep bronze leather */ --premier-gold-grad-mid: #B47A2A; /* rich whiskey amber */ --premier-gold-grad-light: #F0CC78; /* warm cream-gold */ --premier-gold-grad-apex: #FFF1C2; /* pale buttery cream apex */ --premier-gold-highlight: rgba(255, 230, 180, 1); --premier-accent-gold: #C68A30; /* warm amber for section H2s */ --premier-accent-gold-edge: #D89A40; /* sun-lit amber edge */ --premier-accent-primary: #F5DCA8; /* buckskin cream, warmer than Premier */ --premier-cta-bg: #C68A30; /* whiskey-amber pill — ties to accent-gold */ --premier-cta-bg-hover: #F0CC78; /* lifts to warm cream-gold on hover */ --premier-cta-fg: #2A1208; /* dark leather text for contrast on amber */ --premier-honeycomb-tint: rgba(60, 35, 12, 0.55); /* subtle amber-brown hex tint */ } /* bandastributos — Latin blue-flame / mariachi-cantina ramp. Painted logo * is blue-and-white crossed guitars behind a banner-ribbon with an orange * flame at the base; hero backplate is a 5-up Spanish-language band * collage on dim red-purple stage light. The ramp walks deep cobalt → * electric blue → fiery orange → incandescent pale-yellow apex, so the * headline reads like a blue-cored flame tipped in burning orange — a * literal echo of the ribbon's flame motif and a hard differentiator * from the red (Taylor), neon-pink (90s), and whiskey-amber (country) * sisters. Accent primary shifts off cream toward warm peach so nav + * CTAs carry the cantina-fire energy without fighting body legibility. */ body[data-tenant="bandastributos"] { --premier-font-display: var(--font-sister-bandastributos-display), "Alfa Slab One", "Bevan", serif; --premier-gold-grad-deep: #0A2E5C; /* deep cobalt — mariachi-night blue */ --premier-gold-grad-mid: #2868D8; /* electric blue — blue-flame core */ --premier-gold-grad-light: #FF8A2C; /* fiery orange — flame-tip body */ --premier-gold-grad-apex: #FFE39C; /* pale incandescent yellow apex */ --premier-gold-highlight: rgba(255, 200, 140, 1); --premier-accent-gold: #FF8A2C; /* fiery orange for section H2s */ --premier-accent-gold-edge: #FFA559; /* warmer orange edge */ --premier-accent-primary: #FFD2B0; /* warm peach cream — cantina firelight */ --premier-cta-bg: #FF8A2C; /* fiery cantina-orange CTA pill */ --premier-cta-bg-hover: #FFA559; /* brighter flame-tip on hover */ --premier-cta-fg: #082A6E; /* mariachi-night blue label for contrast on orange */ --premier-honeycomb-tint: rgba(20, 40, 90, 0.55); /* barely-there cool cobalt texture */ } /* legendsofgroove — painted-wordmark orange→magenta ramp. The brand IS * the painted "LEGENDS OF GROOVE" wordmark: a vertical gradient running * from blood-orange at the top through fiery vermillion into a hot * magenta-pink. Hero backplate is soul/funk legends on a red/orange * flame. The ramp walks deep burgundy-orange → vermillion → fiery * orange-pink → hot magenta apex so the hero headline mirrors the * painted wordmark stop-for-stop. This is the most distinctive sister * headline of the family — the magenta apex is the visual punch, and * it sits in a corner of the gamut none of the other sisters touch * (Taylor red, 90s neon-pink, country whiskey, bandas blue-flame). * Accent primary shifts off cream toward a warm orange-coral so nav + * CTAs tie back to the painted-flame palette. */ body[data-tenant="legendsofgroove"] { --premier-font-display: var(--font-sister-legendsofgroove-display), "Bungee", "Russo One", sans-serif; --premier-gold-grad-deep: #7A1A22; /* deep blood-orange / burgundy */ --premier-gold-grad-mid: #E54A2C; /* rich vermillion orange */ --premier-gold-grad-light: #FF8A6C; /* fiery orange-pink near-apex */ --premier-gold-grad-apex: #FF4FAC; /* hot magenta-pink apex */ --premier-gold-highlight: rgba(255, 180, 200, 1); --premier-accent-gold: #E54A2C; /* vermillion orange for section H2s */ --premier-accent-gold-edge: #FF6B3D; /* warmer orange-pink edge */ --premier-accent-primary: #FFD3B8; /* warm orange-coral cream */ --premier-cta-bg: #FF4FAC; /* hot magenta-pink CTA — painted-wordmark apex */ --premier-cta-bg-hover: #FF80C5; /* brighter magenta-pink on hover */ --premier-cta-fg: #3A0A14; /* deep burgundy text — reads on bright pink pill */ --premier-honeycomb-tint: rgba(60, 15, 40, 0.55); /* subtle magenta-grey honeycomb undertone */ } /* renovegas — high-desert moon / Reno night-sky ramp. Painted logo is a * gold-cream wordmark over a Reno mountain silhouette with full moon; * hero backplate is a deep-blue night-sky with mountain silhouettes + * country-tribute composite. The ramp walks midnight-blue → dusty steel * blue → pale silver-blue → moonlit ivory apex so the headline reads as * cool moonlight rising over the Sierra rather than warm metal — * distinctly cooler than the red (Taylor), neon-pink (90s), whiskey- * amber (country), blue-flame (bandas), and orange-magenta (legends) * sisters. Accent primary shifts slightly off cream toward pale silver- * ivory so nav links + CTAs tie back to the moonlit chrome without * going dead-white. */ body[data-tenant="renovegas"] { --premier-font-display: var(--font-sister-renovegas-display), "Limelight", "Cinzel", serif; --premier-gold-grad-deep: #0E1838; /* deep midnight blue — night-sky edge */ --premier-gold-grad-mid: #3F527F; /* dusty steel blue transition */ --premier-gold-grad-light: #AEBED9; /* pale silver-blue near-apex */ --premier-gold-grad-apex: #F8F2DE; /* moonlit ivory apex */ --premier-gold-highlight: rgba(220, 224, 240, 1); --premier-accent-gold: #8FA3C6; /* moonlit steel-blue for section H2s */ --premier-accent-gold-edge: #A6B7D4; /* lighter silver-blue edge */ --premier-accent-primary: #EDEAD8; /* pale silver-ivory, cooler than Premier cream */ --premier-cta-bg: #F5F0DC; /* moonlit silver-ivory CTA — pale chrome, not warm */ --premier-cta-bg-hover: #FBF6E2; /* brighter moonlight on hover */ --premier-cta-fg: #0E1838; /* deepest midnight blue from apex ramp */ --premier-honeycomb-tint: rgba(20, 30, 70, 0.55); /* cold steel-blue night-sky texture */ } /* ── Per-sister gradient + accent overrides ───────────────────────────── * The apex `[data-premier-gold]` gradient consumes the 4 `--premier-gold- * grad-*` tokens + `--premier-gold-highlight`. Each sister overrides * these to swap the entire metallic ramp by colorway. Sister-specific * blocks below; defaults in premier-tokens.css carry the cream-gold * Premier ramp. */ /* ── Public footer (Premier branch) ──────────────────────────────────── */ /* Polish the Premier footer the agent built — the brand wordmark uses * the Teko display face (not Roboto) to match the WP treatment, and the * "Browse the catalog" / "Contact" links pick up the cream accent on * hover instead of the default text-foreground bump. */ body[data-theme-family="premier"] [data-premier-footer-brand] { font-family: var(--premier-font-display); font-weight: var(--premier-weight-regular); letter-spacing: var(--premier-tracking-normal); line-height: var(--premier-leading-tight); color: var(--premier-fg); } body[data-theme-family="premier"] [data-premier-footer-link] { transition: color var(--premier-transition-cinematic); } body[data-theme-family="premier"] [data-premier-footer-link]:hover, body[data-theme-family="premier"] [data-premier-footer-link]:focus-visible { color: var(--premier-accent-primary); } /* * premiertributes — per-sister visual chrome polish. * * All rules scoped on `body[data-tenant="premiertributes"]` so they only apply * when this sister is the active tenant. Loaded after premier-overrides.css * via globals.css, so this file can override anything the family chrome * sets. Owned by the premiertributes sister; do not edit from other sister files. * * Visual goal: Bond-film opening titles + Vegas headliner posters + * classical concert-hall programme. Premier is the flagship of the family; * its job is to feel the most *intentional*, not the most decorated. With * the six sisters now each carrying their own distinct chrome (neon-vinyl * 90stonow, blue-flame bandas, moonlit renovegas, etc.), Premier's polish * has to read as "executive suite" — restraint over ornament. Four small, * tasteful upgrades land harder here than ten flashy ones. * * What ships (3 effects): * * 1. Apex-headline stage-spot halo — a warm gold radiance behind the * `[data-premier-gold]` hero caps reads as a single key light on a * Bond-title card. * * 2. Theatrical-footlights ambient — a very faint warm-amber radial * wash at the top of the body so the hero seems to glow into a * proscenium haze, plus a vignette at the bottom so long-scroll * content doesn't fade to dead black. * * 3. Magazine-rule under section H2s — a thin cream underline beneath * `[data-premier-gold]` section headings reads as a Playbill / * concert-programme typographic rule. The family already flattens * the H2 metallic gradient to a solid gold; this adds the rule * below for editorial structure. * * What was deliberately rejected as too much for the flagship: * * - Marquee-bulb dot dividers (too "Vegas show", competes with * bandastributos cantina-fire personality). * - Aggressive vignette darkening at body level (would crush * photographic hero collages). * - Honeycomb alpha bump (the family file already raised it; further * tuning fights the restraint mandate). * - Footer "Booking Office, Est." serif rule (PremierFooterContent * ships its own copy; we don't inject new strings from CSS). * * Token reminders (set in premier-tokens.css :: body[data-theme-family="premier"]): * --premier-accent-primary #FEDDA6 — warm cream signature * --premier-accent-gold #ffcf40 — 24k gold hero/H2 headlines * --premier-cta-bg #E6C077 — warm cream CTA pill * --premier-cta-bg-hover #F9EBB2 — lifted cream on hover * --premier-gold-grad-deep #8F6D30 — deepest bronze ramp stop * --premier-gold-highlight rgba(249, 235, 178, 1) */ /* ── 1. Theatrical-footlights ambient wash ────────────────────────────── * The family premier-overrides.css explicitly sets `background-image: none` * on the body to keep Premier flat. For the flagship we want a hint of * stage atmosphere — not the strong wash 90stonow uses, but a whisper: * * - top: very faint warm-amber bloom that reads as proscenium * footlights spilling up behind the hero collage. * - bottom: a softer bronze vignette so long pages don't sink into * dead black at the fold. * * Alphas kept intentionally tiny (0.06 / 0.04) — at this strength the * effect is *felt*, not *seen*, which is the point. Anything more * aggressive would compete with the painted band-collage hero. Fixed * attachment so the wash stays put while content scrolls — it reads as * room lighting, not a banner. */ body[data-tenant="premiertributes"] { background-image: radial-gradient(ellipse 75% 45% at 50% 0%, rgba(228, 186, 107, 0.06), transparent 60%), radial-gradient(ellipse 65% 40% at 50% 100%, rgba(143, 109, 48, 0.04), transparent 65%); background-attachment: fixed; background-repeat: no-repeat; } /* ── 2. Apex-headline stage-spot halo ─────────────────────────────────── * The family `[data-premier-gold]` rule already paints the metallic * gradient + 3-stage drop-shadow filter stack on hero apex caps. That * stack uses `filter: drop-shadow(...)`, which composes with additional * filters via concatenation — so we add two soft warm-gold drop-shadows * at the *outer* edges of the filter chain to halo the letterforms with * a single-key stage light. * * The 32px blur reads as the immediate spot pool; the 80px reads as the * fall-off into the wings. Together they bring the hero caps off the * page about a third of an inch — exactly the "Bond opening title" * feeling. Alphas kept low (0.32 / 0.18) so the halo never crowds the * existing 3D edge from the family stack. * * Scoped to hero-class apex headlines only — the family already flattens * section H2s to a solid gold, so the halo would over-saturate them. * We re-target via the same `:where(h2)` discriminator the family file * uses, but inverted (`:not(:where(h2))`) so only hero H1s + the literal * `.heroHeadline` / `.heroTitle` classes pick this up. */ body[data-tenant="premiertributes"] [data-premier-gold]:not(:where(h2)):not([class*="sectionHeading"]) { -webkit-filter: drop-shadow(0 0 32px rgba(255, 207, 64, 0.32)) drop-shadow(0 0 80px rgba(143, 109, 48, 0.18)) drop-shadow(-1px -1px 0 var(--premier-gold-highlight)) drop-shadow(-1px -1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.75)); filter: drop-shadow(0 0 32px rgba(255, 207, 64, 0.32)) drop-shadow(0 0 80px rgba(143, 109, 48, 0.18)) drop-shadow(-1px -1px 0 var(--premier-gold-highlight)) drop-shadow(-1px -1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.75)); } /* ── 4. Magazine-rule under section H2s ───────────────────────────────── * The family rule flattens `[data-premier-gold]` on H2 / sectionHeading * elements to a solid gold color with a single hard text-shadow — that's * the right move for editorial weight. We add a thin cream horizontal * rule beneath those headings via `::after` so each section opens with * a Playbill-style typographic divider. The rule sits centered if the * heading is centered, left-anchored otherwise — using `display: block` * + `margin-inline: auto` lets the parent's `text-align` drive position * without a per-section override. * * Width clamped at 4rem so it reads as a rule, not a divider line; * margin-top kept small (0.6rem) so the rule belongs to the heading * rather than the next paragraph. Alpha at 0.6 of the cream accent * keeps the line tasteful — pure cream at full opacity would read as * a UI underline. * * `content: ""` + `display: block` so the rule generates a box without * adding any text to the accessibility tree. Mobile keeps the same * proportion — at 390px the 4rem rule under a clamp-sized H2 still * lands as a clear editorial mark. */ body[data-tenant="premiertributes"] [data-premier-gold]:where(h2)::after, body[data-tenant="premiertributes"] h2[data-premier-gold]::after, body[data-tenant="premiertributes"] [data-premier-gold][class*="sectionHeading"]::after { content: ""; display: block; width: 4rem; height: 2px; margin-top: 0.6rem; margin-inline: auto; background: rgba(254, 221, 166, 0.6); } /* When the H2 sits inside a left-aligned container, the centered rule * looks orphaned. Override to left-anchor when the heading itself isn't * centered. We can't reliably detect parent text-alignment from CSS, so * we provide an explicit opt-out: any heading with `[data-rule-align="start"]` * gets a left-anchored rule. The default centered placement covers * homepage section heads (which are centered by Premier convention); * editorial copy pages can opt into left alignment as needed. * * `margin-inline` is a 2-value logical-property shorthand (start, end). * The previous 4-value form (`0 auto 0 0`) was invalid CSS and was being * dropped entirely by the parser, so the opt-out silently never worked. * Use the explicit `margin-inline-start` + `margin-inline-end` pair to * avoid any future shorthand-confusion. */ body[data-tenant="premiertributes"] [data-premier-gold][data-rule-align="start"]::after { margin-inline-start: 0; margin-inline-end: auto; } /* ── 5. Playbill corner brackets on section panels ───────────────────── * Premier's structural signature — the one chrome element no other sister * in the family carries. A pair of small 3-line gold corner brackets * anchors the top-left + top-right of every `.sectionInner` panel, so * each section opens like a chapter in a Playbill programme or a frame * on a Bond opening-title card. Subtle but unmistakable: at scroll speed * the eye reads "this is a flagship section", not "decoration". * * Why corners and not a fold/curtain: 90stonow already runs a top-edge * neon stripe and renovegas a moonlit gradient — another top-edge effect * would muddy the family taxonomy. Corner ornaments are a different * structural register (frame, not edge) and Premier owns the frame. * * Implementation: * - Inline SVG data-URL, single 3-line bracket (`L` shape, 16x16). * Stroke #ffcf40 at the family gold token, 1.25px, no fill. * - `::before` carries the top-left bracket as-is; `::after` mirrors * it horizontally via `transform: scaleX(-1)` so we ship one SVG. * - Pinned to the inner panel (not the outer .section) so the brackets * hug the readable content column, not the full bleed honeycomb * backdrop. Positioned just outside the inner padding so they read * as a frame around the chapter, not a sticker on it. * - Relies on `.sectionInner` having no existing pseudo-element use; * CSS-module class so we match via [class*="sectionInner"]. * - Opacity 0.55 so the brackets feel etched, not stamped. * * Mobile: at <=480px the brackets shrink to 12px and pull tight to the * edge so they don't collide with mobile gutters. At <=380px we hide * them entirely — at hero-stack widths the frame reads as clutter, and * the magazine-rule under H2s already carries the editorial weight. */ body[data-tenant="premiertributes"] [class*="sectionInner"] { position: relative; } body[data-tenant="premiertributes"] [class*="sectionInner"]::before, body[data-tenant="premiertributes"] [class*="sectionInner"]::after { content: ""; position: absolute; top: -4px; width: 16px; height: 16px; pointer-events: none; opacity: 0.55; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffcf40' stroke-width='1.25' stroke-linecap='square'%3E%3Cpath d='M1 7 V1 H7'/%3E%3Cpath d='M1 11 V4'/%3E%3Cpath d='M4 1 H11'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; } body[data-tenant="premiertributes"] [class*="sectionInner"]::before { left: -4px; } body[data-tenant="premiertributes"] [class*="sectionInner"]::after { right: -4px; transform: scaleX(-1); } @media (max-width: 480px) { body[data-tenant="premiertributes"] [class*="sectionInner"]::before, body[data-tenant="premiertributes"] [class*="sectionInner"]::after { width: 12px; height: 12px; top: -2px; } body[data-tenant="premiertributes"] [class*="sectionInner"]::before { left: -2px; } body[data-tenant="premiertributes"] [class*="sectionInner"]::after { right: -2px; } } @media (max-width: 380px) { body[data-tenant="premiertributes"] [class*="sectionInner"]::before, body[data-tenant="premiertributes"] [class*="sectionInner"]::after { display: none; } } /* ───────────────────────────────────────────────────────────────────── * 2026-05 Flagship polish pass — four additive moves drawn from premium * editorial / talent-agency / hospitality reference sites (Aman, IMG * Artists, Pentagram, MR PORTER, Hatch Show Print). Each move is scoped * tight to `body[data-tenant="premiertributes"]` so the sisters are * untouched and the flagship stays the only home for this chrome. * * 6. Asymmetric "lead + cascade" featured grid (editorial gallery) * 7. Scroll-reveal entrance for section H2s (motion w/ restraint) * 8. Warm-amber duotone wash on category tiles (cinematic photo tx) * 9. Pull-quote treatment for section deck copy (magazine voice) * 10. Drawn underline on featured-card hover (ticket-stub feel) * * The hard constraint (restraint > kitchen-sink) is honoured: every * effect uses one technique, kept small, with motion gated on * `prefers-reduced-motion` and scroll-timeline gated on `@supports`. The * earlier signatures (corner brackets, magazine rule under H2s, halo, * footlight wash) all still land first — these add depth, they don't * replace anything. * ───────────────────────────────────────────────────────────────────── */ /* ── 6. Asymmetric "lead + cascade" featured grid ──────────────────── * Reference: Pentagram portfolio + premium booking sites both vary * card aspect ratios within a single grid instead of running a row of * 3 or 4 identical cards. The "lead featured act" gets a portfolio- * sized hero; the next two cascade beside it; the rest tile beneath. * Reads as an editorial spread, not a tenant SaaS row. * * Premier's `.featuredGrid` ships as a 3-column equal-width grid at * ≥1024px (`grid-template-columns: repeat(3, 1fr)`). We override to a * 6-column track at ≥1100px and place the first three cards via * `:nth-child` so they form: [BIG LEAD 4-cols × 2 rows] [card] / over * [card]. Cards 4-6 (if present) flow into the remaining 3-col grid * naturally. This is *layout-only* — no markup change required, since * `:nth-child` positions cascade off the existing list. * * The carousel embed at `.featuredGrid` actually renders via * PremierFeaturedActsCarousel, NOT the static `.featuredGrid` class on * the homepage. The static grid is reused on `/bands` and similar * directory surfaces where the layout helps the most. For the homepage * carousel we leave the equal-card cadence alone (the carousel * mechanics depend on equal slide widths). * * Targets ALL `[class*="featuredGrid"]` on Premier — picks up the * homepage featured grid plus directory pages that compose the same * class. Mobile stays untouched. */ @media (min-width: 1100px) { body[data-tenant="premiertributes"] [class*="featuredGrid"]:not([class*="carousel"]) { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(0, auto); } body[data-tenant="premiertributes"] [class*="featuredGrid"]:not([class*="carousel"]) > [class*="featuredCard"]:nth-child(1) { grid-column: span 4; grid-row: span 2; } body[data-tenant="premiertributes"] [class*="featuredGrid"]:not([class*="carousel"]) > [class*="featuredCard"]:nth-child(2), body[data-tenant="premiertributes"] [class*="featuredGrid"]:not([class*="carousel"]) > [class*="featuredCard"]:nth-child(3) { grid-column: span 2; } body[data-tenant="premiertributes"] [class*="featuredGrid"]:not([class*="carousel"]) > [class*="featuredCard"]:nth-child(n+4) { grid-column: span 2; } /* When the lead card spans two grid rows, its image should fill the * full extra height — without this the 16:9 image-wrap leaves dead * space below itself. We turn the link + card into a flex column and * let the image-wrap stretch to fill the residual height. Meta panel * stays at its fixed 8.5rem so the band-name row still aligns with * the cascade cards beside it (when viewed at scroll speed). */ body[data-tenant="premiertributes"] [class*="featuredGrid"]:not([class*="carousel"]) > [class*="featuredCard"]:nth-child(1) { display: flex; flex-direction: column; } body[data-tenant="premiertributes"] [class*="featuredGrid"]:not([class*="carousel"]) > [class*="featuredCard"]:nth-child(1) > [class*="featuredLink"] { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } body[data-tenant="premiertributes"] [class*="featuredGrid"]:not([class*="carousel"]) > [class*="featuredCard"]:nth-child(1) [class*="featuredImageWrap"] { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; } } /* ── 7. Scroll-reveal entrance for section H2s ─────────────────────── * Reference: Aman, MR PORTER, premium editorial all use a quiet on- * enter motion for section headings — heading fades up a few pixels, * the magazine rule beneath grows from 0 to its full width. NOT a * Webflow template "everything-flies-in" treatment; just the section * H2 and its rule, and only when the user scrolls them into view. * * Implementation: CSS `animation-timeline: view()` (Chrome/Edge 115+, * Safari 26+, well-supported by May 2026). Two keyframes — one for the * heading itself (subtle 8px translateY + opacity), one for the rule * (width grows from 0 to 4rem, matching move #4's static width). * * `@supports (animation-timeline: view())` — browsers that DON'T * support scroll-timeline get the static heading + static 4rem rule * exactly as before. Browsers that DO get the on-scroll reveal. * `@media (prefers-reduced-motion: reduce)` skips the animation * entirely (already inside the @supports guard, but explicit). * * The `view()` timeline runs across the element's intersection with * the viewport. `animation-range: entry 5% cover 30%` plays the * animation as the heading enters the bottom 5% of the viewport and * completes when it's 30% scrolled past — feels like the headline * "settles in" as you scroll to it, rather than a hard pop. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { body[data-tenant="premiertributes"] [data-premier-gold]:where(h2), body[data-tenant="premiertributes"] h2[data-premier-gold], body[data-tenant="premiertributes"] [data-premier-gold][class*="sectionHeading"] { animation: premier-h2-rise linear both; animation-timeline: view(); animation-range: entry 5% cover 30%; } body[data-tenant="premiertributes"] [data-premier-gold]:where(h2)::after, body[data-tenant="premiertributes"] h2[data-premier-gold]::after, body[data-tenant="premiertributes"] [data-premier-gold][class*="sectionHeading"]::after { animation: premier-rule-draw linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; } } } @keyframes premier-h2-rise { from { opacity: 0.001; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes premier-rule-draw { from { width: 0; opacity: 0; } to { width: 4rem; opacity: 1; } } /* ── 8. Warm-amber duotone wash on category tiles ──────────────────── * Reference: Aman's photography reads as part of a single visual * language, not as 12 different photoshoots stapled together. We * achieve the same effect on Premier's Genres & Eras tiles by laying * a warm-amber gradient over the photo at rest, then cross-fading it * away on hover so the full-colour image reveals. * * Technique: pre-existing `.categoryOverlay` already paints a bottom- * scrim that anchors the gold label. We add a SECOND overlay via a * `::before` on the image-wrap that carries the duotone — warm amber * radial mixed with a soft black-multiply — sitting beneath the label * scrim. On hover, the duotone ::before drops to 0 opacity, revealing * the photo's native colour as a reward for engagement. * * Why a separate ::before instead of editing `.categoryOverlay`: the * label scrim must stay strong always (the gold caps need contrast). * The duotone should only sit at rest and lift on hover. Two layers, * two jobs. * * Alphas kept moderate (0.35 amber + 0.25 black) so the photo subject * still reads at a glance — this is editorial unification, not a * heavy-handed Instagram filter. */ body[data-tenant="premiertributes"] [class*="categoryImageWrap"] { position: relative; } body[data-tenant="premiertributes"] [class*="categoryImageWrap"]::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 100% 80% at 50% 30%, rgba(228, 186, 107, 0.32) 0%, rgba(143, 109, 48, 0.28) 60%, rgba(15, 15, 15, 0.42) 100%); mix-blend-mode: multiply; opacity: 0.85; pointer-events: none; transition: opacity var(--premier-transition-cinematic, 500ms ease); } body[data-tenant="premiertributes"] [class*="categoryLink"]:hover [class*="categoryImageWrap"]::before, body[data-tenant="premiertributes"] [class*="categoryLink"]:focus-visible [class*="categoryImageWrap"]::before { opacity: 0.25; } /* The existing scrim overlay sits at the default stacking; keep label * on top by ensuring the label has a higher z-index. The label is * already positioned absolute so this just hoists it. */ body[data-tenant="premiertributes"] [class*="categoryLabel"] { z-index: 2; } /* ── 9. Pull-quote treatment for section deck copy ─────────────────── * Reference: MR PORTER + Pitchfork long-form editorial pull a single * sentence from each section into oversized italic with a leading rule. * Premier's `.sectionDeck` currently renders the body-font support * sentence at standard size, centered, soft colour. That's quiet — too * quiet for a flagship. We promote it to a magazine pull-quote: * * - bumped size + light italic body weight (Roboto Italic 300) * - a thin gold vertical rule on the left edge as a quote-bar * - tighter letter-spacing, more confident line-height * - text-align stays inherited so existing centered home decks remain * centered while editorial pages opt into left-align naturally * * Scoped via `[class*="sectionDeck"]` so the homepage `.sectionDeck` * and any directory-page section subhead with that class name picks * it up. We leave colour alone — the existing soft cream token already * works at this scale. * * The left rule renders via `::before` and is set to centered text * mode by default (positioned via flex). For the common centered-deck * pattern the rule reads as a small dash beneath the headline; the * deck content sits beside it. For left-aligned editorial decks we * fall through to the same rule placement. */ body[data-tenant="premiertributes"] [class*="sectionDeck"] { /* Larger, lighter, italic — reads as a pulled quote not a caption. */ font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem); font-style: italic; font-weight: var(--premier-weight-regular, 400); line-height: var(--premier-leading-body, 1.6); letter-spacing: 0.005em; /* Slightly wider measure so the bigger italic doesn't feel pinched. * The base rule sets max-width: 44rem; we hold it but the italic * sets fewer chars per line, which reads better at hero scale. */ max-width: 46rem; /* Restore consistent top spacing so the bigger deck doesn't crowd * the H2 above. Bottom margin matches the original cadence. */ margin-top: clamp(0.75rem, 1.5vw, 1.25rem); position: relative; } /* Decorative left dash sitting just above the deck — reads as the * Playbill rule continuing into the supporting copy. Only renders * when the deck is the immediate sibling of the H2 (which is the * homepage pattern); avoids painting a rule on unrelated paragraphs * that happen to compose the class. */ body[data-tenant="premiertributes"] [class*="sectionHeading"] + [class*="sectionDeck"]::before { content: ""; display: block; width: 1.75rem; height: 1px; margin: 0 auto 0.85rem; background: rgba(254, 221, 166, 0.45); } /* ── 10. Drawn underline on featured-card hover ────────────────────── * Reference: cinema/poster / Hatch Show Print ticket-stub aesthetic — * a thin gold rule that draws across the bottom edge of a featured * card as the cursor enters it. Reads as "this card is staged for * you", complements the existing translateY + image scale on hover * without piling on another shadow or border-color shift. * * Technique: card already has `position: relative` via Premier base. * We paint a `::after` on the card itself (NOT the link) as a bottom * rule, scaleX(0) at rest, scaleX(1) on hover, transform-origin left * so it draws left-to-right. transition uses the cinematic token so * it feels of-a-piece with the card lift. * * The card already has `overflow: hidden` so the rule clips to the * card edges. We set z-index above the image-wrap content so it sits * over the bottom scrim. */ body[data-tenant="premiertributes"] [class*="featuredCard"] { position: relative; } body[data-tenant="premiertributes"] [class*="featuredCard"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient( 90deg, transparent 0%, var(--premier-accent-gold, #ffcf40) 18%, var(--premier-accent-gold, #ffcf40) 82%, transparent 100% ); transform: scaleX(0); transform-origin: left center; transition: transform var(--premier-transition-cinematic, 500ms ease); pointer-events: none; z-index: 3; } body[data-tenant="premiertributes"] [class*="featuredCard"]:hover::after, body[data-tenant="premiertributes"] [class*="featuredCard"]:focus-within::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { body[data-tenant="premiertributes"] [class*="featuredCard"]::after { transition: none; } } /* * 90stonow — per-sister visual chrome polish. * * All rules scoped on `body[data-tenant="90stonow"]` so they only apply * when this sister is the active tenant. Loaded after premier-overrides.css * via globals.css, so this file can override anything the family chrome * sets. Owned by the 90stonow sister; do not edit from other sister files. * * Visual goal: late-night MTV bumpers, cassette-tape inlays, neon-vinyl * records. The Premier chrome already runs the right palette + Audiowide; * this file layers the few atmospheric touches that turn "Premier in pink" * into a distinct retro-neon brand. Restraint > maximalism — five or six * well-tuned effects, no kitchen sink. * * Token reminders (set in premier-overrides.css :: body[data-tenant="90stonow"]): * --premier-accent-gold #FF6BC1 — hot pink section H2s * --premier-accent-gold-edge #FF8FD3 — warm pink tint * --premier-accent-primary #FFD6EC — soft lavender-pink * --premier-cta-bg #FF49B0 — vivid neon pink CTA * --premier-gold-grad-mid #7E2DD8 — magenta-purple transition * --premier-gold-grad-deep #2D0E5E — deep indigo */ /* ── Background atmosphere ────────────────────────────────────────────── * The default Premier body is flat black; on 90stonow that reads as a * disco hall with the lights off. Layer two very subtle radial washes: * a magenta-purple bloom at the top so the hero photo seems to glow up * into a haze, and a fainter neon-pink bloom at the bottom so the page * doesn't fade to dead black on long-scroll views. `fixed` attachment * so the wash stays put while content scrolls past it — reads as room * lighting, not a banner. */ body[data-tenant="90stonow"] { background-image: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(126, 45, 216, 0.22), transparent 60%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255, 73, 176, 0.10), transparent 60%); background-attachment: fixed; background-repeat: no-repeat; } /* Very subtle CRT scan-line texture as a fixed overlay above the body * background but beneath all content. Alpha kept intentionally tiny * (0.012) — at this strength the lines are felt rather than seen, * which is the point. Anything stronger reads as a tacky filter rather * than late-night-cable atmosphere. `pointer-events: none` so it never * intercepts clicks. */ body[data-tenant="90stonow"]::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: repeating-linear-gradient( 0deg, transparent 0px, transparent 2px, rgba(255, 255, 255, 0.022) 2px, rgba(255, 255, 255, 0.022) 4px ); } /* ── Hero headline: neon-sign halo ────────────────────────────────────── * `.heroHeadline` ships the metallic gradient ramp (indigo → magenta → * pink → pale-pink apex) that does the heavy display-type lifting. * Layer a two-stage hot-pink halo on top of the gradient so the caps * read like a backlit neon sign rather than printed foil. Stacking * two text-shadows at different blur radii gives the glow real depth * without smearing the letterforms. The gradient ramp itself is * untouched — per spec, those tokens are perfect. */ body[data-tenant="90stonow"] [class*="homepage-premier-module"][class$="__heroHeadline"], body[data-tenant="90stonow"] [class*="premier-content-page-module"][class$="__heroHeadline"] { text-shadow: 0 0 18px rgba(255, 73, 176, 0.55), 0 0 36px rgba(255, 73, 176, 0.32), 0 0 64px rgba(255, 73, 176, 0.15); } /* Section H2s already get a hard poster-shadow from premier-overrides.css * (3px 3px 0 black). Add a soft pink halo behind it so the section * headings tie back to the neon-sign treatment without losing the * cinematic poster offset. Important wins over the family rule's * single-shadow !important. */ body[data-tenant="90stonow"] [data-premier-gold]:where(h2), body[data-tenant="90stonow"] h2[data-premier-gold], body[data-tenant="90stonow"] [data-premier-gold][class*="sectionHeading"] { text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 107, 193, 0.35) !important; } /* ── Featured Acts cards: cassette-inlay edge glow ────────────────────── * The default Premier featured cards are flat dark tiles. Wrap each * with a thin neon-pink ring (via box-shadow so it doesn't shift * layout) plus a soft magenta drop so they read as cassette-tape * J-cards stacked on a record-shop shelf. The hover state intensifies * both layers — the card "lights up" the way a holographic sticker * does when you tilt it under a black light. * * Bumped from 0.32 → 0.55 alpha on the resting ring + added a small * ambient halo so the cards still read as "lit" at thumbnail scale on * the homepage screenshot. Previous values were so subtle the cards * looked identical to Premier-Gold defaults. */ body[data-tenant="90stonow"] [class*="homepage-premier-module"][class$="__featuredCard"] { box-shadow: 0 0 0 1px rgba(255, 107, 193, 0.55), 0 0 14px -2px rgba(255, 73, 176, 0.18), 0 12px 32px -16px rgba(126, 45, 216, 0.5); transition: box-shadow var(--premier-transition-standard, 0.35s ease), transform var(--premier-transition-standard, 0.35s ease); } body[data-tenant="90stonow"] [class*="homepage-premier-module"][class$="__featuredCard"]:hover, body[data-tenant="90stonow"] [class*="homepage-premier-module"][class$="__featuredCard"]:focus-within { box-shadow: 0 0 0 1px rgba(255, 73, 176, 0.85), 0 0 28px rgba(255, 73, 176, 0.36), 0 18px 40px -18px rgba(126, 45, 216, 0.65); } /* ── Genre & Era category tiles: cassette-inlay edge glow ────────────── * The Genres-and-Eras grid is the largest single block of card-shaped * content on the page (twelve tiles, four wide on desktop). Without * any neon treatment they read as flat photo crops — losing the * mixtape-shelf feel the rest of the page builds. Apply the same * two-layer ring + magenta drop used on featured/directory cards but * land it on `.categoryImageWrap` (the actual photo plate) rather * than the wrapping `
  • `, so the glow hugs the image edge instead * of a transparent outer container. Lower alphas than featured cards * because there are 12 of them on screen at once — same intensity * would tip into garish at that density. */ body[data-tenant="90stonow"] [class*="homepage-premier-module"][class$="__categoryImageWrap"] { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 0 1px rgba(255, 107, 193, 0.42), 0 10px 24px -14px rgba(126, 45, 216, 0.45); } body[data-tenant="90stonow"] [class*="homepage-premier-module"][class$="__categoryLink"]:hover [class*="__categoryImageWrap"], body[data-tenant="90stonow"] [class*="homepage-premier-module"][class$="__categoryLink"]:focus-visible [class*="__categoryImageWrap"] { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(255, 73, 176, 0.75), 0 0 22px rgba(255, 73, 176, 0.3), 0 18px 36px -20px rgba(0, 0, 0, 0.7); } /* Category label gets the neon-pink halo so the genre names read like * cassette spine prints under a UV light. The Premier base sets these * in `--premier-accent-primary` (soft lavender-pink on 90stonow); the * halo is hot-pink to tie back to the CTA + nav underline. */ body[data-tenant="90stonow"] [class*="homepage-premier-module"][class$="__categoryLabel"] { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 12px rgba(255, 73, 176, 0.4); } /* ── Blog cards: matching cassette-inlay edge glow ───────────────────── * Same treatment as featured cards so the three home-page blog tiles * read as part of the same mixtape-shelf system instead of reverting * to neutral Premier-Gold styling. Slightly softer than featured * because the blog row sits on the honeycomb-purple section (already * tinted) — full featured-card intensity would over-saturate. */ body[data-tenant="90stonow"] [class*="homepage-premier-module"][class$="__blogCard"] { box-shadow: 0 0 0 1px rgba(255, 107, 193, 0.45), 0 10px 28px -16px rgba(126, 45, 216, 0.45); transition: box-shadow var(--premier-transition-standard, 0.35s ease), transform var(--premier-transition-standard, 0.35s ease); } body[data-tenant="90stonow"] [class*="homepage-premier-module"][class$="__blogCard"]:hover, body[data-tenant="90stonow"] [class*="homepage-premier-module"][class$="__blogCard"]:focus-within { box-shadow: 0 0 0 1px rgba(255, 73, 176, 0.75), 0 0 22px rgba(255, 73, 176, 0.28), 0 18px 40px -18px rgba(126, 45, 216, 0.6); } /* ── Directory listing cards: matching cassette-inlay glow ───────────── * Carry the same treatment over to the /tributes directory cards so * the brand reads consistently between the homepage and the catalog * view. Same two-layer system, same hover intensification. The * directory cards live in a separate module * (`directory-view-content-module`) so they need their own selector. */ body[data-tenant="90stonow"] [class*="directory-view-content-module"][class$="__listingCard"] { box-shadow: 0 0 0 1px rgba(255, 107, 193, 0.5), 0 0 12px -2px rgba(255, 73, 176, 0.16), 0 12px 32px -16px rgba(126, 45, 216, 0.45); transition: box-shadow var(--premier-transition-standard, 0.35s ease); } body[data-tenant="90stonow"] [class*="directory-view-content-module"][class$="__listingCard"]:hover, body[data-tenant="90stonow"] [class*="directory-view-content-module"][class$="__listingCard"]:focus-within { box-shadow: 0 0 0 1px rgba(255, 73, 176, 0.8), 0 0 26px rgba(255, 73, 176, 0.32), 0 18px 40px -18px rgba(126, 45, 216, 0.6); } /* ── Signature: cassette-tape strip section dividers ─────────────────── * The single structural element that nothing else in the Premier family * shares. Every section-to-section seam on 90stonow gets a 28px tall * inline-SVG strip that reads as a cassette-tape inlay viewed edge-on: * two hot-pink rails top and bottom, a faint tape line through the * middle, and a row of small magenta sprocket squares ticking across * like a tape reel under a clear plastic window. Ties the "late-night * MTV / mixtape" brand together at every scroll milestone without ever * touching a section's interior padding. * * Implementation notes: * - Targets the CSS-modules-hashed `.section` and `.sectionHoneycomb` * classes via `[class*="homepage-premier-module"][class*="__section"]` * so the strip appears between consecutive sections regardless of * which texture variant follows which. * - `margin-block-start: -14px` overlaps the strip onto the section * seam so it sits centered on the boundary instead of pushing * vertical rhythm around. * - The SVG is a single 240×28 tile that repeats horizontally; the * sprocket squares are sized so even at 390px mobile widths there * are ~6 visible squares across — still legibly "tape spool" at * narrow widths, not just abstract dashes. * - z-index: 1 keeps the strip above the body's CRT scan-line * overlay (which sits at z-index: 0) so the sprocket holes don't * get muddied by the scan lines. * - Skipped on the very first section after the hero — the hero * already ships its own `.heroDivider` shape and stacking another * divider on top would read as visual noise. */ body[data-tenant="90stonow"] [class*="homepage-premier-module"][class*="__section"] + [class*="homepage-premier-module"][class*="__section"]::before, body[data-tenant="90stonow"] [class*="homepage-premier-module"][class*="__section"] + [class*="homepage-premier-module"][class*="__closingCta"]::before { content: ""; display: block; height: 32px; margin-block: -16px 0; position: relative; z-index: 1; pointer-events: none; background-repeat: repeat-x; background-position: center; background-size: 220px 32px; /* Bumped rail stroke 1.5 → 2.5 and sprocket fill to full hot-pink * with a brighter highlight row so the strip reads at section-seam * scale instead of disappearing on the dark body. Added a thin * vertical "tape stub" tick at each sprocket so the cassette * reading is unambiguous. */ background-image: url("data:image/svg+xml;utf8,"); } /* Mobile parity: shrink the tile so the sprocket cadence still reads * as "tape" rather than getting sparse at 390px. Same SVG, tighter * repeat — gives roughly 8 squares across a 390px viewport. */ @media (max-width: 640px) { body[data-tenant="90stonow"] [class*="homepage-premier-module"][class*="__section"] + [class*="homepage-premier-module"][class*="__section"]::before, body[data-tenant="90stonow"] [class*="homepage-premier-module"][class*="__section"] + [class*="homepage-premier-module"][class*="__closingCta"]::before { background-size: 170px 26px; height: 26px; margin-block: -13px 0; } } /* ── Active nav link: neon-tube underline ─────────────────────────────── * premier-overrides.css gives the active nav link a 2px solid underline * in `--premier-accent-primary` (soft lavender-pink on 90stonow). Bump * to a 3px hot-pink underline with a small glow so the active state * reads like a lit neon tube instead of a printed link decoration. * `text-decoration-color` keeps the underline color independent of the * link text color (which stays lavender-pink for legibility). */ body[data-tenant="90stonow"] nav.glass-strong a[aria-current="page"] { text-decoration-color: var(--premier-cta-bg) !important; text-decoration-thickness: 3px !important; text-underline-offset: 7px !important; text-shadow: 0 0 14px rgba(255, 73, 176, 0.45); } /* * allcountrytributes — per-sister visual chrome polish. * * All rules scoped on `body[data-tenant="allcountrytributes"]` so they only apply * when this sister is the active tenant. Loaded after premier-overrides.css * via globals.css, so this file can override anything the family chrome * sets. Owned by the allcountrytributes sister; do not edit from other sister files. * * Visual direction: polished country/Western — vintage country-music * posters, leather album sleeves, weathered honky-tonk signage. Restraint * over kitchen-sink; the family chrome already handles palette + Rye font. * What this layer adds: * * 1. Sepia sundown halo at top of page (warms hero photo edge into page) * 2. Whiskey-amber CTA upgrade: slab shadow + uppercase tracking (saloon sign) * 3. Apex hero headline: carved/poster shadow stack (vintage country poster) * 4. Card chrome: warm leather-amber edge + amber-on-hover (album-sleeve) * 5. Featured-acts thumbs: thin amber frame + hard slab shadow (polaroid) * 6. Section-heading double rule beneath H2s (engraved honky-tonk sign) * 7. Nav-pill: leather-tan tint instead of pure black * 8. Footer: amber-stitched top border + warm brown wash * 9. Signature: "★ FEATURED ★" tour-poster stamp on featured-act cards * — small, low-alpha, slightly rotated; reads as a hand-stamped * vintage tour-poster mark. The single distinctive structural * element no other Premier-family sister has. (See §9.) * 10. Companion: small ★ star flanks on section eyebrow labels — ties * the stamp signature into the rest of the page typography. * * Things considered + rejected as "too much": * - Rope/dashed-rule border-image dividers (too literal cowboy) * - Wood-grain noise overlay on body (muddies the photography) * - Sheriff-badge / large-star decoration in nav (cartoon territory) * — small star asterism in §9 + §10 is the restrained version * - Leather-grain SVG noise on every card (texture fights the metallic apex) */ /* ── 1. Sepia sundown halo ─────────────────────────────────────────────── * Subtle warm radial bleed from the top of the page so the hero photo's * sunset/sepia tone doesn't terminate at a hard edge — it dissolves into * the page atmosphere. Very low alpha so it reads as ambience, not a wash. * Layered behind everything via fixed positioning + pointer-events:none. */ body[data-tenant="allcountrytributes"] { position: relative; } body[data-tenant="allcountrytributes"]::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 60vh; pointer-events: none; z-index: 0; background-image: radial-gradient( ellipse at 50% 0%, rgba(180, 122, 42, 0.14), rgba(180, 122, 42, 0.06) 35%, transparent 62% ); } /* Keep app content above the halo. */ body[data-tenant="allcountrytributes"] > * { position: relative; z-index: 1; } /* ── 3. Apex hero headline — carved Western-poster shadow ──────────────── * The premier family's `[data-premier-gold]` paint clips the whiskey ramp * onto hero H1s + adds a 5px hard offset. For the country sister, push * the shadow stack toward something more weathered/carved — three offset * darkenings + a slight warm-cream rim so the letters look like they * were stamped into a leather album sleeve. Scoped to H1 / heroHeadline * so section H2s (which the family already flattens to solid amber + * 3px shadow) are untouched. */ body[data-tenant="allcountrytributes"] [data-premier-gold]:where(h1), body[data-tenant="allcountrytributes"] h1[data-premier-gold], body[data-tenant="allcountrytributes"] [data-premier-gold][class*="heroHeadline"] { /* 2026-05-25 audit: prior stack (4 drop-shadows up to 6px offset at * 0.55–0.9 alpha) compounded into a smeary halo over the gold-ramp * fill — letters were readable only by silhouette. Pared down to a * 2-layer treatment: a 1px cream rim (top-left) for the carved bevel * read, plus a single tight 2px dark slab (bottom-right) for the * poster-print depth. Loses none of the country/poster feel; lets * the whiskey-gradient text actually be the figure. */ -webkit-filter: drop-shadow(-1px -1px 0 rgba(255, 230, 180, 0.85)) drop-shadow(2px 2px 0 rgba(20, 8, 2, 0.75)); filter: drop-shadow(-1px -1px 0 rgba(255, 230, 180, 0.85)) drop-shadow(2px 2px 0 rgba(20, 8, 2, 0.75)); } /* ── 4. Card chrome — leather-amber edge ───────────────────────────────── * The family card surface is generic dark on dark. Warm the border toward * the amber palette and tint the surface a touch into the brown range so * cards feel like album sleeves laid out on a leather counter. On hover * the amber edge intensifies + the slab shadow deepens, echoing the CTA * feel without adding any new chrome. */ body[data-tenant="allcountrytributes"] [data-component="section-card"], body[data-tenant="allcountrytributes"] [data-component="article-card"] { background: linear-gradient( 180deg, rgba(42, 25, 12, 0.55) 0%, rgba(20, 12, 6, 0.55) 100% ); border-color: rgba(180, 122, 42, 0.22); box-shadow: 0 16px 40px -28px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(180, 122, 42, 0.06); } body[data-tenant="allcountrytributes"] [data-component="section-card"]:hover, body[data-tenant="allcountrytributes"] [data-component="article-card"]:hover { border-color: rgba(198, 138, 48, 0.55); box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(198, 138, 48, 0.18); } /* ── 5. Featured-acts thumbs — polaroid / cassette-sleeve frame ────────── * The footer featured-act tiles already exist in the family chrome with * a thin treatment. Give them a warm amber 2px frame + a hard slab * shadow so they read like little polaroid prints pinned to a corkboard. * The hover state slides them up a few px to amplify the pinned feel. */ body[data-tenant="allcountrytributes"] [data-premier-featured-act-thumb] { border: 2px solid rgba(198, 138, 48, 0.55); box-shadow: 3px 3px 0 rgba(20, 8, 2, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3) inset; } body[data-tenant="allcountrytributes"] [data-premier-featured-act]:hover [data-premier-featured-act-thumb], body[data-tenant="allcountrytributes"] [data-premier-featured-act]:focus-visible [data-premier-featured-act-thumb] { border-color: rgba(240, 204, 120, 0.85); box-shadow: 4px 4px 0 rgba(20, 8, 2, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.3) inset; } /* ── 6. Section-heading double rule ────────────────────────────────────── * Vintage Western signage often uses paired thin rules (top + bottom) to * frame a label — think honky-tonk hand-painted signs. Add a short amber * underline beneath the family's flattened H2 treatment so each section * heading sits on a small engraved bar. Width-limited via `display: inline- * block` would break grid layout, so we use ::after with a fixed width. */ /* 2026-05-25 audit: the previous engraved-bar rule used ::after on * `[data-premier-gold]:where(h2)`, which now carries the star-flank * pseudo-element (see §10 below). Browsers only render one ::after * per element, so the bar was rewritten as a border-bottom on the * H2 itself (§10 — see `padding-bottom + border-bottom + box-shadow` * stack that paints the double-rule look). This block is intentionally * empty; the engraved-bar treatment moved. */ /* ── 7. Nav-pill — leather-tan tint ────────────────────────────────────── * The family chrome paints the nav-link pill with a near-black background. * For the country sister, warm it slightly toward leather so the pill * doesn't read as a cold floating slab over the sepia hero. The brown * tint is held under 0.55 alpha so link legibility stays unchanged. */ body[data-tenant="allcountrytributes"] nav.glass-strong [role="navigation"] { background: rgba(28, 16, 6, 0.62); border-color: rgba(198, 138, 48, 0.22); box-shadow: 0 4px 18px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(180, 122, 42, 0.08) inset; } /* ── 8. Footer — amber-stitched top border + warm wash ─────────────────── * The footer currently sits as a flat dark slab beneath the page. Give * it a thin amber top border (doubled to suggest stitching) plus a very * subtle warm radial bleed at the top edge so it feels like a leather * panel anchoring the page. Restrained — no wood-grain, no patterns. */ body[data-tenant="allcountrytributes"] footer { border-top: 1px solid rgba(198, 138, 48, 0.45); box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.08), inset 0 4px 24px -12px rgba(198, 138, 48, 0.18); } /* The featured-acts row + newsletter strip live inside the footer; nudge * their section labels toward the warm amber so they tie into the new * top border instead of reading as gray utility text. */ body[data-tenant="allcountrytributes"] [data-premier-footer-section-label] { color: rgba(240, 204, 120, 0.85); letter-spacing: 0.12em; } /* ── 9. Tour-poster "★ FEATURED ★" stamp on featured-act cards ────────── * THIS IS THE SISTER'S STRUCTURAL SIGNATURE — no other Premier-family * sister stamps a corner mark on its featured cards. * * The motif: vintage country tour posters and honky-tonk handbills are * almost always overprinted with a small rubber-stamp or hand-inked * mark — "TONIGHT", "SOLD OUT", "ON TOUR", a star asterism. We borrow * that vocabulary and drop a small cream-on-transparent stamp in the * top-right corner of each featured-act card with a slight -8deg tilt * so it reads as hand-stamped, not laser-printed. * * Implementation notes: * - The family `__featuredCard` already has a transform on :hover * which establishes a containing block, but we add `position: * relative` defensively so the stamp anchors correctly even at * rest. Important: the card has `overflow: hidden` for the image * rounding, so the stamp is sized + inset to stay fully inside * after rotation (slight clipping at corners would read as worn * poster edge, but we keep margins safe to avoid it). * - Color is the cream-amber rim used elsewhere (`rgba(254,221,166, * 0.85)`) so it ties into the carved-headline rim + the engraved * section bars. Border at 0.55 alpha; the whole stamp sits around * 0.6 average opacity so it doesn't fight the image underneath. * - Stars (★) are inline characters from the standard Unicode block * — no new asset, no inline-SVG needed. Letter-spacing widens * them so they read as bracketing punctuation, not a font glyph. * - pointer-events: none so the stamp can never intercept the * featured-card link click. */ body[data-tenant="allcountrytributes"] [class*="homepage-premier-module"][class$="__featuredCard"] { position: relative; } body[data-tenant="allcountrytributes"] [class*="homepage-premier-module"][class$="__featuredCard"]::after { content: "★ FEATURED ★"; position: absolute; top: 14px; right: 14px; z-index: 2; font-family: var(--premier-font-display, "Rye", "Archivo", sans-serif); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(254, 221, 166, 0.88); background: rgba(20, 10, 4, 0.32); border: 1.5px solid rgba(254, 221, 166, 0.55); border-radius: 2px; padding: 3px 9px; transform: rotate(-8deg); transform-origin: top right; pointer-events: none; /* Tiny inner glow so the stamp doesn't look pasted onto bright * photography — feels like it's printed on the poster surface. */ box-shadow: inset 0 0 0 1px rgba(20, 10, 4, 0.18), 0 1px 0 rgba(0, 0, 0, 0.35); /* Defensive: keep the stamp visible even when the card has * `overflow: hidden`. The 14px inset + small footprint guarantees * the rotated bounding box stays inside the card. */ } /* On hover, the family card lifts (-4px translateY). Nudge the stamp * a touch the other way so it feels like the stamp is anchored to the * poster and the card is the one shifting underneath — small parallax. */ body[data-tenant="allcountrytributes"] [class*="homepage-premier-module"][class$="__featuredCard"]:hover::after, body[data-tenant="allcountrytributes"] [class*="homepage-premier-module"][class$="__featuredCard"]:focus-within::after { color: rgba(254, 221, 166, 1); border-color: rgba(254, 221, 166, 0.78); transform: rotate(-8deg) translateY(1px); } /* ── 10. Star flanks on section eyebrow labels ────────────────────────── * Complementary to §9: bracket section eyebrows ("FEATURED ACTS", * "GENRES & ERAS", etc.) with small ★ stars so the page typography * ties into the stamp signature. Restrained — single star each side, * matched to the family's gold accent token, sized 0.85em so it sits * inside the eyebrow line-height rather than poking above it. * * Multiple selectors because the family chrome ships eyebrows in three * places: the homepage-premier module (`__eyebrow`), the content-page * module (`__eyebrow`), and a plain `.eyebrow` class on a few legacy * spots. All three get the same bracketing treatment for consistency. * * `::before` + `::after` add the stars; the eyebrow text itself is * unchanged so any analytics or screen-reader heuristics that key off * the label stay correct. Decorative stars are inline content (not * `aria-hidden` because they're inside the same element's text flow * already and read as punctuation). */ /* 2026-05-25 audit: the prior selector only matched class names ending * in literal `__eyebrow`. The premier homepage module's hero eyebrow * is actually `__heroEyebrow`, and the visible "section labels" in the * screenshot ("FEATURED ACTS", "GENRES AND ERAS", "BLOG", "READY TO BOOK * YOUR EVENT") are H2 `__sectionHeading` elements with `data-premier- * gold`, not eyebrow elements. So the stars never appeared. Broaden the * match to cover all three families (eyebrow / heroEyebrow / section * H2s with `data-premier-gold`) and the legacy `.eyebrow` class. */ body[data-tenant="allcountrytributes"] [class*="homepage-premier-module"][class*="__eyebrow"]::before, body[data-tenant="allcountrytributes"] [class*="homepage-premier-module"][class*="__eyebrow"]::after, body[data-tenant="allcountrytributes"] [class*="homepage-premier-module"][class*="__heroEyebrow"]::before, body[data-tenant="allcountrytributes"] [class*="homepage-premier-module"][class*="__heroEyebrow"]::after, body[data-tenant="allcountrytributes"] [class*="premier-content-page-module"][class*="__eyebrow"]::before, body[data-tenant="allcountrytributes"] [class*="premier-content-page-module"][class*="__eyebrow"]::after, body[data-tenant="allcountrytributes"] [data-premier-gold]:where(h2)::before, body[data-tenant="allcountrytributes"] [data-premier-gold]:where(h2)::after, body[data-tenant="allcountrytributes"] .eyebrow::before, body[data-tenant="allcountrytributes"] .eyebrow::after { content: "★"; display: inline-block; color: rgba(198, 138, 48, 0.75); font-size: 0.7em; /* Slight vertical nudge: the ★ glyph sits a touch low in most fonts; * lift it so it baselines with the uppercase eyebrow letters. */ vertical-align: 0.12em; } body[data-tenant="allcountrytributes"] [class*="homepage-premier-module"][class*="__eyebrow"]::before, body[data-tenant="allcountrytributes"] [class*="homepage-premier-module"][class*="__heroEyebrow"]::before, body[data-tenant="allcountrytributes"] [class*="premier-content-page-module"][class*="__eyebrow"]::before, body[data-tenant="allcountrytributes"] [data-premier-gold]:where(h2)::before, body[data-tenant="allcountrytributes"] .eyebrow::before { margin-right: 0.55em; } body[data-tenant="allcountrytributes"] [class*="homepage-premier-module"][class*="__eyebrow"]::after, body[data-tenant="allcountrytributes"] [class*="homepage-premier-module"][class*="__heroEyebrow"]::after, body[data-tenant="allcountrytributes"] [class*="premier-content-page-module"][class*="__eyebrow"]::after, body[data-tenant="allcountrytributes"] [data-premier-gold]:where(h2)::after, body[data-tenant="allcountrytributes"] .eyebrow::after { margin-left: 0.55em; } /* The §6 engraved-bar rule also uses ::after on H2[data-premier-gold]. * Now that ::after carries a ★ glyph, restore the engraved bar via an * inline border under the H2 itself (border-bottom on the heading), so * we keep both signatures without a pseudo-element collision. */ body[data-tenant="allcountrytributes"] [data-premier-gold]:where(h2), body[data-tenant="allcountrytributes"] h2[data-premier-gold] { padding-bottom: 0.45rem; border-bottom: 1px solid rgba(198, 138, 48, 0.32); box-shadow: 0 2px 0 -1px rgba(198, 138, 48, 0.32); } /* ── Mobile parity ─────────────────────────────────────────────────────── * At <=480px, dial the slab shadows back so they don't crowd small * touch targets, and shrink the sepia halo so it doesn't paint over * a meaningful share of the mobile viewport. Apex headline shadow is * left as-is — at hero scale it still reads correctly on mobile. * * The §9 tour-stamp also shrinks at narrow widths so it doesn't crowd * the image's focal point on the now-narrower 390px card. We drop the * font-size and tighten padding, and abbreviate the label from * "★ FEATURED ★" to a single "★ FEATURED" so the stamp footprint * stays under ~90px wide on mobile (no wrapping, no image takeover). */ @media (max-width: 480px) { body[data-tenant="allcountrytributes"]::before { height: 40vh; } body[data-tenant="allcountrytributes"] [data-premier-featured-act-thumb] { box-shadow: 2px 2px 0 rgba(20, 8, 2, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3) inset; } body[data-tenant="allcountrytributes"] [class*="homepage-premier-module"][class$="__featuredCard"]::after { content: "★ FEATURED"; top: 10px; right: 10px; font-size: 0.62rem; letter-spacing: 0.1em; padding: 2px 7px; } } /* * bandastributos — per-sister visual chrome polish. * * All rules scoped on `body[data-tenant="bandastributos"]` so they only apply * when this sister is the active tenant. Loaded after premier-overrides.css * via globals.css, so this file can override anything the family chrome * sets. Owned by the bandastributos sister; do not edit from other sister files. * * Identity goal: polished Latin / mariachi-cantina / Spanish-rock vibe. * Reference axis is "blue cantina-night sky → fiery orange flame rising * through it" — the brand's own cobalt-to-orange ramp made literal in * the page's ambient atmosphere. Restraint over kitchen-sink: a flame * halo on the apex headline, ember CTAs, papel-picado section dividers, * a cobalt blue-flame edge on cards, and a warm/cool temperature axis * through the hero overlay. No sombrero/maracas iconography. Each * upgrade keys directly off the existing cobalt/peach/orange tokens * already wired in premier-overrides.css so nothing fights the ramp. */ /* ── 1. Apex headline flame halo ────────────────────────────────────── * The hero H1 (`.heroHeadline`) wears the cobalt → orange → pale-yellow * ramp via `data-premier-gold` already. Adding a soft fiery-orange halo * around the letterforms reads as a flame aura behind the cool blue * core — literally the "blue cantina-night sky with flame rising" * concept. Uses drop-shadow (composes with the gradient text-clip; a * normal text-shadow would be hidden by the transparent fill). Only * the hero H1 gets it — section H2s stay flat per the audit. */ body[data-tenant="bandastributos"] [class*="homepage-premier-module"][class$="__heroHeadline"][data-premier-gold] { -webkit-filter: drop-shadow(-1px -1px 0 var(--premier-gold-highlight)) drop-shadow(-1px -1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.75)) drop-shadow(0 0 18px rgba(255, 138, 44, 0.55)) drop-shadow(0 0 38px rgba(255, 138, 44, 0.25)); filter: drop-shadow(-1px -1px 0 var(--premier-gold-highlight)) drop-shadow(-1px -1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.75)) drop-shadow(0 0 18px rgba(255, 138, 44, 0.55)) drop-shadow(0 0 38px rgba(255, 138, 44, 0.25)); } /* ── 2. Hero overlay — cool/warm temperature axis ───────────────────── * The shared `.heroOverlay` ramps black → black bottom. For bandastributos * we want the hero to feel like flame rising through cantina-night sky: * deep cobalt at the top, near-transparent in the middle so the band * collage stays primary, fiery-orange tint at the bottom rim. Sits on * top of the shared overlay (don't replace it — preserves legibility * tuning for the body copy). */ body[data-tenant="bandastributos"] [class*="homepage-premier-module"][class$="__hero"]::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient( ellipse 80% 45% at 50% 100%, rgba(255, 138, 44, 0.18) 0%, rgba(255, 138, 44, 0.06) 40%, transparent 70% ), radial-gradient( ellipse 90% 35% at 50% 0%, rgba(20, 50, 110, 0.35) 0%, rgba(20, 50, 110, 0.10) 50%, transparent 80% ); } /* ── 4. Cards — cobalt blue-flame top edge ──────────────────────────── * Cards in the Premier chrome have a uniform soft border. Add a thin * cobalt-blue inset highlight at the top edge so cards visually carry * the ramp's cool end — like a blue flame catching the rim. Reads as * intentional brand tint rather than a generic dark card. Applies to * homepage featured cards, directory listing cards, and SectionCard / * ArticleCard chrome family-wide. */ body[data-tenant="bandastributos"] [class*="homepage-premier-module"][class$="__featuredCard"], body[data-tenant="bandastributos"] [class*="directory-view-content-module"][class$="__listingCard"], body[data-tenant="bandastributos"] [data-component="section-card"], body[data-tenant="bandastributos"] [data-component="article-card"] { box-shadow: inset 0 1px 0 rgba(64, 130, 240, 0.45), 0 16px 40px -28px rgba(0, 0, 0, 0.9); } /* Hover state — lift the blue rim + add a faint cobalt outer aura so * the card reads as "lit from above." Keeps the family's transform * lift behaviour. */ body[data-tenant="bandastributos"] [class*="homepage-premier-module"][class$="__featuredCard"]:hover, body[data-tenant="bandastributos"] [class*="directory-view-content-module"][class$="__listingCard"]:hover, body[data-tenant="bandastributos"] [data-component="section-card"]:hover, body[data-tenant="bandastributos"] [data-component="article-card"]:hover { box-shadow: inset 0 1px 0 rgba(80, 150, 255, 0.65), 0 0 22px -8px rgba(40, 104, 216, 0.35), 0 24px 48px -28px rgba(0, 0, 0, 0.95); } /* ── 5. SIGNATURE: Papel-picado fiesta-banner bunting ──────────────── * * THE structural signature for bandastributos. No other Premier sister * has this. Real papel picado is a row of cut-paper rectangles hung from * a string with intricate cutouts inside each panel — the visual * shorthand for every Mexican fiesta, cantina, and Día de los Muertos * celebration. We render it inline-SVG-mask style so the cutouts * actually pierce the panel (you see through to the page background), * and we use the brand's own cobalt → orange → cream tri-color so the * banner reads as a fiesta flag-strip in the brand palette, not a * generic party-supply graphic. * * Where it lives: * • Hero ::after — a 56px banner strung across the very top of the * hero photo. The hero-section signature. * • Each body section ::before — a 36px banner topping every section, * reads as bunting decorating every chapter. * * The SVG: three 48px-wide panels per repeat — cobalt, orange, cream — * each with rectangular outline + interior cut-outs (diamond at top * row, two slits below, scalloped bottom edge). The fill of each panel * IS the panel color; transparent areas inside the SVG let the dark * page show through, giving the perforated-paper look. */ /* — 5a. Hero top-edge banner — the signature element ——————— */ body[data-tenant="bandastributos"] [class*="homepage-premier-module"][class$="__hero"] { position: relative; } /* The hero is pulled up -5rem (80px) under the transparent Premier nav, * so positioning the bunting at top:0 of the hero hides it entirely * behind the glass nav. Push it down by `--premier-header-height` * (defaults to 5rem) so it sits just under the nav, visible on the * photograph itself. The bunting uses fill-rule="evenodd" so the * interior cutouts are TRULY transparent — the band-collage photo * shows through the cut-paper holes, which is the whole point of * papel picado. */ body[data-tenant="bandastributos"] [class*="homepage-premier-module"][class$="__hero"]::after { content: ""; position: absolute; top: var(--premier-header-height, 5rem); left: 0; right: 0; height: 48px; z-index: 3; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 48' preserveAspectRatio='xMidYMin slice'%3E%3Crect x='0' y='0' width='144' height='2' fill='%23111'/%3E%3Cpath fill-rule='evenodd' d='M0,2 L48,2 L48,34 L42,42 L36,34 L30,42 L24,34 L18,42 L12,34 L6,42 L0,34 Z M24,8 L30,14 L24,20 L18,14 Z M10,24 h6 v3 h-6 z M32,24 h6 v3 h-6 z M20,28 h8 v3 h-8 z' fill='%231f4ec8'/%3E%3Cpath fill-rule='evenodd' d='M48,2 L96,2 L96,34 L90,42 L84,34 L78,42 L72,34 L66,42 L60,34 L54,42 L48,34 Z M72,8 L78,14 L72,20 L66,14 Z M58,24 h6 v3 h-6 z M80,24 h6 v3 h-6 z M68,28 h8 v3 h-8 z' fill='%23ff8a2c'/%3E%3Cpath fill-rule='evenodd' d='M96,2 L144,2 L144,34 L138,42 L132,34 L126,42 L120,34 L114,42 L108,34 L102,42 L96,34 Z M120,8 L126,14 L120,20 L114,14 Z M106,24 h6 v3 h-6 z M128,24 h6 v3 h-6 z M116,28 h8 v3 h-8 z' fill='%23fce4c4'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-size: 144px 48px; background-position: top left; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.75)); } /* — 5b. Section dividers — same bunting, smaller, every section ——— */ body[data-tenant="bandastributos"] [class*="homepage-premier-module"][class$="__section"] { position: relative; } body[data-tenant="bandastributos"] [class*="homepage-premier-module"][class$="__section"]::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 36px; /* Same SVG as the hero bunting (true transparent cutouts via * fill-rule="evenodd") — sized 108×36 so the 3-panel repeat * keeps each panel at a 36×36 aspect, which preserves the * scalloped bottom edge instead of squashing it. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 48' preserveAspectRatio='xMidYMin slice'%3E%3Crect x='0' y='0' width='144' height='2' fill='%23111'/%3E%3Cpath fill-rule='evenodd' d='M0,2 L48,2 L48,34 L42,42 L36,34 L30,42 L24,34 L18,42 L12,34 L6,42 L0,34 Z M24,8 L30,14 L24,20 L18,14 Z M10,24 h6 v3 h-6 z M32,24 h6 v3 h-6 z M20,28 h8 v3 h-8 z' fill='%231f4ec8'/%3E%3Cpath fill-rule='evenodd' d='M48,2 L96,2 L96,34 L90,42 L84,34 L78,42 L72,34 L66,42 L60,34 L54,42 L48,34 Z M72,8 L78,14 L72,20 L66,14 Z M58,24 h6 v3 h-6 z M80,24 h6 v3 h-6 z M68,28 h8 v3 h-8 z' fill='%23ff8a2c'/%3E%3Cpath fill-rule='evenodd' d='M96,2 L144,2 L144,34 L138,42 L132,34 L126,42 L120,34 L114,42 L108,34 L102,42 L96,34 Z M120,8 L126,14 L120,20 L114,14 Z M106,24 h6 v3 h-6 z M128,24 h6 v3 h-6 z M116,28 h8 v3 h-8 z' fill='%23fce4c4'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-size: 108px 36px; background-position: top left; pointer-events: none; z-index: 2; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55)); opacity: 0.95; } /* The first section after the hero already sits beneath the heroDivider * SVG curve AND now beneath the hero bunting — skip the section bunting * on the very first section so we don't triple-stack decoration. */ body[data-tenant="bandastributos"] [class*="homepage-premier-module"][class$="__section"]:first-of-type::before { display: none; } /* ── 6. Featured Acts header — fiesta flag-strip eyebrow ───────────── * Add a thin cobalt → orange → cobalt gradient bar above the section * heading inside `.sectionHoneycomb` blocks (the textured Featured / * Most Requested rows). Reads as a fiesta-banner accent matching the * ramp — much more confident than a plain section heading and ties * the section directly back to the brand's cool-warm-cool palette. */ body[data-tenant="bandastributos"] [class*="homepage-premier-module"][class$="__sectionHoneycomb"] [class*="homepage-premier-module"][class$="__sectionHeading"]::before { content: ""; display: block; width: clamp(3rem, 8vw, 5.5rem); height: 3px; margin-bottom: 0.85rem; background: linear-gradient( 90deg, var(--premier-gold-grad-deep) 0%, var(--premier-gold-grad-mid) 35%, var(--premier-gold-grad-light) 65%, var(--premier-gold-grad-deep) 100% ); border-radius: 2px; box-shadow: 0 0 14px rgba(255, 138, 44, 0.35); } /* ── 7. Honeycomb texture — warm the cobalt tint ────────────────────── * The premier-overrides `--premier-honeycomb-tint` token is `rgba(20, * 40, 90, 0.55)` — a cool cobalt that ties to the deep end of the ramp * but reads as inert at desktop opacity. Bump it slightly + blend it * with a faint warm wash via background-color so the textured sections * feel like flame-lit cantina walls rather than flat dark. The mask * itself is owned by the homepage module; we only touch the tint. */ body[data-tenant="bandastributos"] [class*="homepage-premier-module"][class$="__sectionHoneycomb"] { background-color: rgba(8, 22, 56, 0.78); } /* ── 8. Footer cobalt undertone ─────────────────────────────────────── * Premier footer is flat #050505 across all sisters. For bandastributos * add a subtle deep-cobalt vertical wash at the top of the footer so it * feels like the cantina-night sky continues past the last section. * Very low alpha — reads as ambient, not as a colour block. */ body[data-tenant="bandastributos"] footer { background: linear-gradient( 180deg, rgba(20, 50, 110, 0.16) 0%, rgba(20, 50, 110, 0.04) 35%, transparent 75% ), #050505; } /* Footer divider tint — warm peach hairline above the featured row so * the divider reads as brand trim rather than the default flat border. */ body[data-tenant="bandastributos"] [data-premier-footer-featured-row] { border-top-color: rgba(255, 210, 176, 0.22); } /* ── 9. Nav-link hover — warm peach lift ────────────────────────────── * The shared Premier nav hover shifts links to `--premier-accent-primary` * (peach on this sister) which is correct — but we want a touch more * heat on the focus/hover state to match the ember-CTA vocabulary. * Add a subtle orange under-glow on hover only. */ body[data-tenant="bandastributos"] nav.glass-strong [role="navigation"] a[data-variant="ghost"]:hover, body[data-tenant="bandastributos"] nav.glass-strong [role="navigation"] a[data-variant="ghost"]:focus-visible { text-shadow: 0 0 10px rgba(255, 138, 44, 0.45); } /* ── 10. Mobile parity (390px) ──────────────────────────────────────── * At narrow widths the papel-picado strip shrinks visually + the apex * halo glow can over-bloom on small screens. Tighten both so the page * stays composed on a 390px viewport (iPhone 14 Pro spec). */ @media (max-width: 480px) { body[data-tenant="bandastributos"] [class*="homepage-premier-module"][class$="__heroHeadline"][data-premier-gold] { -webkit-filter: drop-shadow(-1px -1px 0 var(--premier-gold-highlight)) drop-shadow(-1px -1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.75)) drop-shadow(0 0 12px rgba(255, 138, 44, 0.50)) drop-shadow(0 0 24px rgba(255, 138, 44, 0.22)); filter: drop-shadow(-1px -1px 0 var(--premier-gold-highlight)) drop-shadow(-1px -1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.75)) drop-shadow(0 0 12px rgba(255, 138, 44, 0.50)) drop-shadow(0 0 24px rgba(255, 138, 44, 0.22)); } /* Shrink the hero bunting + section bunting on narrow screens so the * 3-panel tri-color still reads cleanly without dominating the photo. * Keep the 3:1 panel aspect so the scalloped bottom stays crisp. */ body[data-tenant="bandastributos"] [class*="homepage-premier-module"][class$="__hero"]::after { height: 32px; background-size: 96px 32px; } body[data-tenant="bandastributos"] [class*="homepage-premier-module"][class$="__section"]::before { height: 24px; background-size: 72px 24px; } } /* * legendsofgroove — per-sister visual chrome polish. * * All rules scoped on `body[data-tenant="legendsofgroove"]` so they only apply * when this sister is the active tenant. Loaded after premier-overrides.css * via globals.css, so this file can override anything the family chrome * sets. Owned by the legendsofgroove sister; do not edit from other sister files. * * ── Identity ──────────────────────────────────────────────────────────── * 70s soul / funk / disco revival. The painted wordmark (orange→magenta) * is the brand. Think Soul Train title cards, Stevie Wonder album art, * vinyl sleeves of the era, sunset disco posters — not a tacky disco * ball. Polish via warm stage atmospherics, vermillion/magenta accents, * and Bungee-on-gradient headline confidence. Restraint matters. * * ── Token contract (set in premier-overrides.css) ────────────────────── * --premier-gold-grad-deep #7A1A22 burgundy * --premier-gold-grad-mid #E54A2C vermillion * --premier-gold-grad-light #FF8A6C orange-pink * --premier-gold-grad-apex #FF4FAC hot magenta * --premier-cta-bg #FF4FAC hot magenta CTA * --premier-cta-bg-hover #FF80C5 * --premier-cta-fg #3A0A14 burgundy text * * Apex gradient ramp tokens are intentionally NOT re-overridden here. */ /* ── 1. Disco-ball ambient — warm stage haze ──────────────────────────── * Two LOW-alpha radial washes layered atop the page body: a hot-magenta * spotlight from upper-center and a softer vermillion bloom from the * upper-left. Reads as "stage lights bleeding through smoke," not as a * literal disco ball. Anchored to the body so it follows the viewport * and never tiles. */ body[data-tenant="legendsofgroove"] { background-image: radial-gradient(ellipse at 50% 0%, rgba(255, 79, 172, 0.14), transparent 55%), radial-gradient(ellipse at 18% 22%, rgba(229, 74, 44, 0.08), transparent 45%), linear-gradient(180deg, rgba(60, 0, 20, 0.45) 0%, transparent 60%); background-attachment: fixed; background-repeat: no-repeat; } /* ── 2. Apex headline lava glow ───────────────────────────────────────── * The painted wordmark IS the brand; the data-premier-gold H1 already * mirrors its gradient stop-for-stop. Stack two soft glows (vermillion * outer, magenta halo) so the headline reads as a hot soul-stage * spotlight — light bleeding off a painted poster. Limited to hero-scale * headings to avoid the inner H2s getting a smeary halo. * * The family-level `[data-premier-gold]` rule uses `filter: drop-shadow` * + transparent text-fill, so an outer drop-shadow on the wrapper is the * cleanest way to add the bloom without fighting background-clip:text. */ body[data-tenant="legendsofgroove"] .heroHeadline[data-premier-gold], body[data-tenant="legendsofgroove"] .heroTitle[data-premier-gold], body[data-tenant="legendsofgroove"] [class*="directory-view-content-module"][class$="__title"] { -webkit-filter: drop-shadow(-1px -1px 0 var(--premier-gold-highlight)) drop-shadow(-1px -1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.75)) drop-shadow(0 0 18px rgba(229, 74, 44, 0.45)) drop-shadow(0 0 38px rgba(255, 79, 172, 0.32)); filter: drop-shadow(-1px -1px 0 var(--premier-gold-highlight)) drop-shadow(-1px -1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.75)) drop-shadow(0 0 18px rgba(229, 74, 44, 0.45)) drop-shadow(0 0 38px rgba(255, 79, 172, 0.32)); } /* ── 4. Cards — 70s album-sleeve burgundy edge ────────────────────────── * Generic dark-surface cards get a warm wine border so they feel like * record sleeves stacked in a soul-revival shop rather than generic * dark UI. Hover bumps the border to vermillion + adds a soft magenta * inner-edge wash. The family rule already handles transform + shadow, * we layer border + glow on top. */ body[data-tenant="legendsofgroove"] [data-component="section-card"], body[data-tenant="legendsofgroove"] [data-component="article-card"] { border-color: rgba(122, 26, 34, 0.55); background: linear-gradient(180deg, rgba(60, 15, 40, 0.18), transparent 40%), var(--premier-surface); } body[data-tenant="legendsofgroove"] [data-component="section-card"]:hover, body[data-tenant="legendsofgroove"] [data-component="article-card"]:hover { border-color: rgba(229, 74, 44, 0.85); box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.95), 0 0 24px -8px rgba(255, 79, 172, 0.38); } /* Featured-act cards (homepage/footer rail) get the same warm-edge * treatment so the rail reads as a continuous album-shelf, not as a * different surface from the section cards above it. */ body[data-tenant="legendsofgroove"] [data-premier-featured-act] { border-color: rgba(122, 26, 34, 0.55); transition: transform var(--premier-transition-cinematic), border-color var(--premier-transition-cinematic), box-shadow var(--premier-transition-cinematic); } body[data-tenant="legendsofgroove"] [data-premier-featured-act]:hover, body[data-tenant="legendsofgroove"] [data-premier-featured-act]:focus-visible { border-color: rgba(229, 74, 44, 0.85); box-shadow: 0 0 28px -6px rgba(255, 79, 172, 0.4); } /* Directory listing cards (the magazine-style /bands grid) — same * burgundy edge so the catalog browse reads as the same soul-revival * brand the homepage promises. */ body[data-tenant="legendsofgroove"] [class*="directory-view-content-module"][class$="__listingCard"] { border-color: rgba(122, 26, 34, 0.55); } body[data-tenant="legendsofgroove"] [class*="directory-view-content-module"][class$="__listingCard"]:hover { border-color: rgba(229, 74, 44, 0.85); box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.95), 0 0 20px -6px rgba(255, 79, 172, 0.32); } /* ── 5. Nav-pill — magenta hover glow ─────────────────────────────────── * The Premier nav uses cream `--premier-accent-primary` on hover (which * we've tinted to warm orange-coral for this sister). Layer a subtle * magenta text-shadow on hover so the link reads as "lit from within" * — same soul-stage spotlight logic as the headline glow. */ body[data-tenant="legendsofgroove"] nav.glass-strong [role="navigation"] a[data-variant="ghost"]:hover, body[data-tenant="legendsofgroove"] nav.glass-strong [role="navigation"] a[data-variant="ghost"]:focus-visible { text-shadow: 0 0 12px rgba(255, 79, 172, 0.6), 0 0 22px rgba(229, 74, 44, 0.35); } /* The nav-pill container itself picks up a hairline burgundy edge so it * reads as part of the same warm-wine palette as the cards. */ body[data-tenant="legendsofgroove"] nav.glass-strong:not([data-scrolled="true"]) [role="navigation"] { border-color: rgba(255, 79, 172, 0.22); } /* ── 6. Footer — burgundy soul-club tint ──────────────────────────────── * Premier footer ships flat #050505 black. Tint it with a deep burgundy * wash + a faint magenta line at the top edge so the page closes in the * same soul-revival key it opened in — like a club fading down between * sets, not a generic black band. */ body[data-tenant="legendsofgroove"] footer { background: linear-gradient(180deg, rgba(60, 15, 40, 0.55), transparent 70%), #060103; border-top-color: rgba(255, 79, 172, 0.28); box-shadow: inset 0 1px 0 rgba(229, 74, 44, 0.18); } /* Footer brand wordmark — keep the painted-apex magenta tinge on the * accent color so the footer logo echoes the hero painted wordmark. */ body[data-tenant="legendsofgroove"] [data-premier-footer-brand] { text-shadow: 0 0 24px rgba(255, 79, 172, 0.35); } /* Footer link hover — same magenta glow as nav, kept subtle. */ body[data-tenant="legendsofgroove"] [data-premier-footer-link]:hover, body[data-tenant="legendsofgroove"] [data-premier-footer-link]:focus-visible { text-shadow: 0 0 12px rgba(255, 79, 172, 0.5); } /* ── 7. Signature: spinning vinyl in the hero corner ──────────────────── * SIGNATURE ELEMENT — no other Premier sister has this. A ~600px * concentric-circle SVG bleeds off the right edge of the homepage hero, * reading as "a giant 12-inch single spinning behind the wordmark." Eight * concentric rings of alternating vermillion and hot-magenta stroke at * ~10% opacity; a small magenta center label sells the "record spindle" * read. The hero gets `position: relative; overflow: hidden` so the * vinyl masks cleanly at the viewport edge instead of triggering a * horizontal scrollbar. * * Why this and not a wavy section divider: the chassis owns section * spacing across the Premier family; a corner ornament lives in dead * space the chassis isn't using and can't accidentally fight a sibling * agent's seam work. The vinyl reads instantly as "the music format of * the era," which is exactly the soul/funk/disco identity we want and * which `bandastributos`' honeycomb, `90stonow`'s mixtape, etc. cannot * claim. * * The SVG is inline as a data URL — no new asset files, no extra HTTP * request, no build pipeline change. Pointer-events:none + z-index:0 * keeps it strictly decorative and never blocks the hero CTA. Reduced * motion users get the same static image; nothing animates here. */ body[data-tenant="legendsofgroove"] [class*="homepage-premier-module"][class$="__hero"] { position: relative; overflow: hidden; } body[data-tenant="legendsofgroove"] [class*="homepage-premier-module"][class$="__hero"]::after { content: ""; position: absolute; right: -220px; top: 50%; width: 620px; height: 620px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.11; pointer-events: none; z-index: 0; } /* Make sure hero content stacks ABOVE the vinyl. Most premier hero * children get an implicit stacking context from their own layout * styles, but belt-and-braces a direct-child z-index bump avoids any * paint-order surprise on browsers that promote ::after differently. */ body[data-tenant="legendsofgroove"] [class*="homepage-premier-module"][class$="__hero"] > * { position: relative; z-index: 1; } /* ── 8. Mobile parity (≤ 480px) ───────────────────────────────────────── * On 390px the fixed-attachment ambient wash can read as a solid color * block on iOS (Safari's fixed-attachment bug), and the heavy headline * glow eats vertical space. Pull both back slightly. The brand identity * still reads — burgundy edge cards + magenta CTA halo carry the load. * * The hero vinyl shrinks to ~340px and tucks further off-screen so it * still reads as "a sliver of a record" without crowding the headline * on a 390px viewport. Below 380px we drop it entirely — at that width * the wordmark needs every pixel. */ @media (max-width: 480px) { body[data-tenant="legendsofgroove"] { background-attachment: scroll; background-image: radial-gradient(ellipse at 50% 0%, rgba(255, 79, 172, 0.12), transparent 60%), linear-gradient(180deg, rgba(60, 0, 20, 0.4) 0%, transparent 50%); } body[data-tenant="legendsofgroove"] .heroHeadline[data-premier-gold], body[data-tenant="legendsofgroove"] .heroTitle[data-premier-gold], body[data-tenant="legendsofgroove"] [class*="directory-view-content-module"][class$="__title"] { -webkit-filter: drop-shadow(-1px -1px 0 var(--premier-gold-highlight)) drop-shadow(-1px -1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.7)) drop-shadow(0 0 14px rgba(255, 79, 172, 0.35)); filter: drop-shadow(-1px -1px 0 var(--premier-gold-highlight)) drop-shadow(-1px -1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.7)) drop-shadow(0 0 14px rgba(255, 79, 172, 0.35)); } body[data-tenant="legendsofgroove"] [class*="homepage-premier-module"][class$="__hero"]::after { right: -180px; width: 340px; height: 340px; opacity: 0.09; } } @media (max-width: 380px) { body[data-tenant="legendsofgroove"] [class*="homepage-premier-module"][class$="__hero"]::after { display: none; } } /* ── 9. Closing-CTA hover spotlight ───────────────────────────────────── * The "Ready to book your event?" pair lives on the honeycomb-textured * closing section. The primary `gold` button ships warm-coral cream; on * hover the family rule just lifts + brightens. Layer a soft magenta * glow on hover so the button reads as "stepping into the soul-stage * spotlight" rather than the generic family lift. Keeps the button * itself clean at rest — no resting halos per the earlier clean-buttons * pass — the glow only appears on hover/focus. */ body[data-tenant="legendsofgroove"] [class*="homepage-premier-module"][class$="__closingCtaRow"] [data-component="button"][data-variant="gold"]:hover, body[data-tenant="legendsofgroove"] [class*="homepage-premier-module"][class$="__closingCtaRow"] [data-component="button"][data-variant="gold"]:focus-visible { box-shadow: 0 8px 24px -12px rgba(255, 211, 184, 0.55), 0 0 28px -6px rgba(255, 79, 172, 0.42); } /* The outlined secondary picks up a magenta border + subtle inner-fill * on hover so the pair reads as a matched set instead of "the live * button and the dead one." */ body[data-tenant="legendsofgroove"] [class*="homepage-premier-module"][class$="__closingCtaRow"] [data-component="button"][data-variant="gold-outline"]:hover, body[data-tenant="legendsofgroove"] [class*="homepage-premier-module"][class$="__closingCtaRow"] [data-component="button"][data-variant="gold-outline"]:focus-visible { border-color: rgba(255, 79, 172, 0.85); color: #FFE0CC; background: rgba(255, 79, 172, 0.10); box-shadow: 0 0 20px -8px rgba(255, 79, 172, 0.35); } /* ── 10. FAQ — soul-stage open state ──────────────────────────────────── * The accordion summaries already carry the orange/magenta gradient via * the family rules. When a question opens we want a quiet magenta tinge * on the question text so the active row reads as "lit" against the * stack of closed questions — same spotlight logic as nav + headline. */ body[data-tenant="legendsofgroove"] [class*="homepage-premier-module"][class$="__faqDetails"][open] [class*="homepage-premier-module"][class$="__faqSummaryText"] { text-shadow: 0 0 14px rgba(255, 79, 172, 0.45); } body[data-tenant="legendsofgroove"] [class*="homepage-premier-module"][class$="__faqSummary"]:hover [class*="homepage-premier-module"][class$="__faqSummaryText"], body[data-tenant="legendsofgroove"] [class*="homepage-premier-module"][class$="__faqSummary"]:focus-visible [class*="homepage-premier-module"][class$="__faqSummaryText"] { text-shadow: 0 0 12px rgba(255, 79, 172, 0.35); } /* ── 11. Newsletter input — burgundy soul-club edge ───────────────────── * The signup input ships with a neutral dark border that fights the * burgundy footer tint. Warm the resting border to deep wine and lift * to magenta on focus so the form looks like part of the club, not a * stock dark-mode widget glued to the bottom. Scoped inside footer so * it never bleeds into the directory page newsletter (if any). */ body[data-tenant="legendsofgroove"] footer input[type="email"] { border-color: rgba(122, 26, 34, 0.7); background-color: rgba(20, 5, 12, 0.6); } body[data-tenant="legendsofgroove"] footer input[type="email"]:focus, body[data-tenant="legendsofgroove"] footer input[type="email"]:focus-visible { border-color: rgba(255, 79, 172, 0.65); box-shadow: 0 0 0 3px rgba(255, 79, 172, 0.18); outline: none; } /* * renovegas — per-sister visual chrome polish. * * All rules scoped on `body[data-tenant="renovegas"]` so they only apply * when this sister is the active tenant. Loaded after premier-overrides.css * via globals.css, so this file can override anything the family chrome * sets. Owned by the renovegas sister; do not edit from other sister files. * * Visual goal: Old-Vegas marquee meets Sierra-Nevada starlight. Caesar's * Palace at midnight on the strip of a high-desert sky. Polished + tasteful * — never slot-machine cartoon. Restraint over kitchen-sink: a sparse * starfield, a cool moonlight wash, a marquee-bulb pulse on the CTA hover, * a silver-blue plate treatment on cards, and a moon glow on the apex * headline tie the cool Limelight chrome into a single destination brand. * * Token reminders (set in premier-overrides.css :: body[data-tenant="renovegas"]): * --premier-font-display Limelight (cabaret marquee) * --premier-accent-gold #8FA3C6 — moonlit steel-blue * --premier-accent-gold-edge #A6B7D4 — lighter silver-blue * --premier-accent-primary #EDEAD8 — pale silver-ivory * --premier-cta-bg #F5F0DC — moonlit ivory plate * --premier-cta-bg-hover #FBF6E2 — brighter moonlight * --premier-cta-fg #0E1838 — deep midnight blue * --premier-gold-grad-deep #0E1838 — night-sky edge * --premier-gold-grad-mid #3F527F — dusty steel-blue * --premier-gold-grad-light #AEBED9 — pale silver-blue * --premier-gold-grad-apex #F8F2DE — moonlit ivory apex */ /* ── Background atmosphere: high-desert night sky ─────────────────────── * Two layers stacked on the body. The radial wash up top is a soft cool * moonlight bloom (dusty-steel blue) fading down so the page sits under * a felt ceiling of cool night air — not a banner, just ambient lighting. * Both layers `fixed` so they stay put while content scrolls past; the * starfield reads as a distant Sierra-Nevada sky rather than wallpaper * on a single section. Alpha kept low so the dots feel like real stars * (most invisible, the brightest only just there). * * Star spacing of 80px keeps the field sparse — anything denser starts * to read as a noise filter or polka dot, neither of which is the * destination-brand mood we want. */ body[data-tenant="renovegas"] { background-image: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(58, 75, 122, 0.22), transparent 65%), radial-gradient(circle, rgba(220, 230, 255, 0.28) 1px, transparent 1.6px); background-size: auto, 80px 80px; background-position: 0 0, 0 0; background-attachment: fixed; background-repeat: no-repeat, repeat; } /* ── Apex headline: moonlight catching the letters ────────────────────── * The hero headline already carries the night-sky → moonlit-ivory metallic * ramp from the apex `[data-premier-gold]` tokens. Layer a two-stage * moonglow halo on top — a tight ivory inner glow + a wider cool silver- * blue outer haze — so the Limelight caps read like marquee bulbs caught * in moonlight rather than printed foil. The gradient ramp itself is * untouched per spec (tokens are perfect). */ body[data-tenant="renovegas"] [class*="homepage-premier-module"][class$="__heroHeadline"], body[data-tenant="renovegas"] [class*="premier-content-page-module"][class$="__heroHeadline"] { text-shadow: 0 0 28px rgba(245, 240, 220, 0.40), 0 0 60px rgba(168, 184, 214, 0.25); } /* Section H2s already pick up the family poster-shadow (3px 3px 0 black). * Add a subtle silver-blue halo so section headings carry the same * moonlit-bulb treatment without losing the cinematic offset. !important * is required to win over the family rule's single-shadow !important. */ body[data-tenant="renovegas"] [data-premier-gold]:where(h2), body[data-tenant="renovegas"] h2[data-premier-gold], body[data-tenant="renovegas"] [data-premier-gold][class*="sectionHeading"] { text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6), 0 0 22px rgba(168, 184, 214, 0.30) !important; } /* ── Hero CTA: marquee-bulb warm pulse on hover ───────────────────────── * The moonlit-ivory CTA plate is the only pale element on a cool-blue * page. On hover, swap the family's neutral glow for a warm yellow halo * — the same tungsten color you get from a row of Vegas marquee bulbs * lighting up. Because this is the ONLY warm accent anywhere on the * site, it lands as "casino lights at night" rather than competing with * the cool palette. Two-stage shadow gives the glow real depth; the * black drop keeps the plate grounded against the night-sky bloom. * * Selectors mirror the homepage-premier.module.css `.heroCtaButton` * chain via the hashed module pattern (matches the 90stonow approach). */ /* ── Featured Acts cards: brushed silver-blue plates ─────────────────── * Default Premier featured cards are flat dark tiles. Ring each with a * thin silver-blue border (via box-shadow so layout doesn't shift) plus * a soft cool drop so they read as brushed-metal plates mounted under * a marquee — the same finish you'd see on a Caesar's Palace headliner * placard. Hover bumps the rim to brighter silver and adds a faint * moon-halo so the card "catches the light" as the cursor crosses it. * * Transitions inherit the family's standard timing for consistency * with the rest of the Premier chrome. */ body[data-tenant="renovegas"] [class*="homepage-premier-module"][class$="__featuredCard"] { box-shadow: 0 0 0 1px rgba(168, 184, 214, 0.32), 0 12px 30px -16px rgba(20, 30, 70, 0.55); transition: box-shadow var(--premier-transition-standard, 0.35s ease), transform var(--premier-transition-standard, 0.35s ease); } body[data-tenant="renovegas"] [class*="homepage-premier-module"][class$="__featuredCard"]:hover, body[data-tenant="renovegas"] [class*="homepage-premier-module"][class$="__featuredCard"]:focus-within { box-shadow: 0 0 0 1px rgba(206, 218, 240, 0.65), 0 0 22px rgba(168, 184, 214, 0.22), 0 18px 38px -18px rgba(20, 30, 70, 0.7); } /* ── Directory listing cards: matching brushed-silver finish ─────────── * Carry the silver-blue plate treatment to /tributes catalog cards so * the brand reads consistently between the homepage and the directory. * Same two-layer system, same hover intensification. Directory cards * live in their own CSS module (`directory-view-content-module`) so * they need a separate selector. */ body[data-tenant="renovegas"] [class*="directory-view-content-module"][class$="__listingCard"] { box-shadow: 0 0 0 1px rgba(168, 184, 214, 0.28), 0 12px 30px -16px rgba(20, 30, 70, 0.5); transition: box-shadow var(--premier-transition-standard, 0.35s ease); } body[data-tenant="renovegas"] [class*="directory-view-content-module"][class$="__listingCard"]:hover, body[data-tenant="renovegas"] [class*="directory-view-content-module"][class$="__listingCard"]:focus-within { box-shadow: 0 0 0 1px rgba(206, 218, 240, 0.60), 0 0 22px rgba(168, 184, 214, 0.20), 0 18px 38px -18px rgba(20, 30, 70, 0.65); } /* ── Active nav link: moon-bulb underline ─────────────────────────────── * premier-overrides.css gives the active nav link a 2px solid underline * in `--premier-accent-primary` (pale silver-ivory on renovegas). Bump * to a 3px ivory underline with a soft cool-silver glow so the active * state reads like a marquee bulb behind the link rather than a plain * text decoration. Underline color is set independently of link color * (which stays pale silver-ivory for legibility). */ body[data-tenant="renovegas"] nav.glass-strong a[aria-current="page"] { text-decoration-color: var(--premier-cta-bg) !important; text-decoration-thickness: 3px !important; text-underline-offset: 7px !important; text-shadow: 0 0 14px rgba(168, 184, 214, 0.45); } /* ── Footer: starlight extends to the desert horizon ──────────────────── * The premier footer is a flat band against the page bottom. Tie it back * to the night-sky atmosphere by giving it a faint cool-blue wash + the * same sparse starfield pattern as the body. Keeps the page from feeling * like the sky ends abruptly at the last content section — instead the * stars extend down past the horizon. Star alpha is dropped a hair * (0.10 vs body's 0.16) so the footer reads as slightly farther out, * which gives a faint sense of depth/distance. */ body[data-tenant="renovegas"] footer { background-image: radial-gradient(ellipse 100% 80% at 50% 0%, rgba(28, 42, 88, 0.45), transparent 75%), radial-gradient(circle, rgba(220, 230, 255, 0.18) 1px, transparent 1.6px); background-size: auto, 80px 80px; background-repeat: no-repeat, repeat; } /* Footer link hover already picks up `--premier-accent-primary` (pale * silver-ivory) from the family rule. Add a faint moonlight haze on * hover so footer links carry the same marquee-bulb treatment as the * active nav link — small detail, ties the whole chrome together. */ body[data-tenant="renovegas"] [data-premier-footer-link]:hover, body[data-tenant="renovegas"] [data-premier-footer-link]:focus-visible { text-shadow: 0 0 12px rgba(168, 184, 214, 0.40); } /* ── Small-UI typography guardrail (sister-visual-audit-2 P0-4) ───────── * Limelight is decorative cabaret — beautiful at hero/H2 scale but * illegible at 0.7–0.95rem on labels, badges, eyebrows. The audit caught * trust-badge venue names degrading to ornament ("THE FILLMORE" reading * as "BEE FILLMORE") because the family chrome routes everything that * uses `--premier-font-display` through Limelight on this sister. * * Force small UI text to the body font (Roboto) while keeping Limelight * on H1/H2 surfaces where the brand voice actually lands. Hero headline, * section H2 (`[data-premier-gold]`), section heading, closing CTA * heading, and FAQ summary are deliberately NOT in this list — they * stay on the display face. */ body[data-tenant="renovegas"] [data-premier-footer-heading], body[data-tenant="renovegas"] [data-premier-footer-link], body[data-tenant="renovegas"] .eyebrow, body[data-tenant="renovegas"] .text-primary, body[data-tenant="renovegas"] [class*="premier-trusted-by-strip-module"] *, body[data-tenant="renovegas"] [class*="premier-stats-band-module"][class$="__label"], body[data-tenant="renovegas"] [class*="homepage-premier-module"][class$="__categoryLabel"], body[data-tenant="renovegas"] [class*="homepage-premier-module"][class$="__featuredEyebrow"], body[data-tenant="renovegas"] [class*="homepage-premier-module"][class$="__featuredTribute"], body[data-tenant="renovegas"] [class*="homepage-premier-module"][class$="__featuredCity"], body[data-tenant="renovegas"] [class*="homepage-premier-module"][class$="__featuredMeta"], body[data-tenant="renovegas"] [class*="homepage-premier-module"][class$="__featuredCta"], body[data-tenant="renovegas"] [class*="newsletter-signup-module"][class$="__wrapper"] *:not(h2) { font-family: var(--premier-font-body) !important; } /* ── SIGNATURE: Old-Vegas marquee frame on the hero ───────────────────── * The single structural signature that separates renovegas from the rest * of the Premier family. Two complementary touches make this unmistakably * "Reno + Sierra-Nevada night" instead of generic dark sister: * * (a) A row of evenly-spaced ivory "marquee bulbs" running across the * TOP edge of the hero, glowing warm tungsten — the only warm * accent anywhere on the cool palette, so it lands as "the lights * are on at the casino" rather than a stray color noise. * (b) A jagged mountain-range silhouette at the BOTTOM of the hero * (Sierra Nevada night skyline) cut into the hero so the section * transitions out into a horizon line instead of a flat edge. * * Neither sister carries this combination — bandastributos has flag- * bunting / dividers, 90stonow has scanlines, etc. The marquee+mountain * silhouette is a structural geographic signature, not just a color * tweak. * * Both pseudo-elements anchor to `.hero` (`position: relative` per the * homepage-premier module). z-index 2 puts them above .heroMedia / * .heroOverlay (which sit at the default z-index) but below .heroInner * (`position: relative` content stack), so headline + CTA remain on top. * Pointer-events disabled so nothing here intercepts hover/click on the * CTA underneath. */ /* (a) Marquee bulb strip — TOP of hero. * Radial-gradient repeating across the X-axis paints evenly-spaced * ivory dots. A warm-tungsten drop-shadow halo on the same element * gives every bulb a soft glow without needing per-bulb markup. * * The hero has `margin-top: -5rem` (pulled up under the transparent * Premier nav) so `top: 0` on this pseudo lands AT the visible page * top, behind the nav row. We need to clear the nav (h-20 = 80px) * AND give a hair of breathing room so the bulbs visually attach to * the hero, not the nav. 7rem (112px) lands just below the nav's * lower edge, reading as a marquee strip suspended above the band * collage rather than crashing into the nav links. */ body[data-tenant="renovegas"] [class*="homepage-premier-module"][class$="__hero"]::after { content: ""; position: absolute; top: 7rem; left: 0; right: 0; height: 12px; background-image: radial-gradient( circle, var(--premier-cta-bg) 2.5px, transparent 3.5px ); background-size: 22px 12px; background-position: center; background-repeat: repeat-x; z-index: 2; pointer-events: none; filter: drop-shadow(0 0 4px rgba(255, 220, 130, 0.65)) drop-shadow(0 0 10px rgba(255, 200, 110, 0.35)) drop-shadow(0 0 18px rgba(255, 180, 90, 0.18)); } /* (b) Sierra-Nevada mountain silhouette — BOTTOM of hero. * Inline SVG data URL painting a TWO-layered jagged mountain range: * • Back range — `#1B2952` (steel-blue, lighter) — distant peaks * • Front range — `#0E1838` (midnight deep) — nearer ridge * The lighter back range gives atmospheric depth and lets the silhouette * actually read against the heavily-darkened bottom of the hero photo * (which the family overlay drops to ~0.75 black at the bottom — too * dark for a pure midnight-blue silhouette to register, which is why * the previous single-color version vanished in the audit screenshot). * The front range stays deep midnight so the bottom edge still grounds * into the night-sky page body that follows. * * Width 1440 / viewBox height 120 with peaks of varying height across * the X-axis reads as a high-desert horizon at night. * `background-size: 100% 100%` stretches across any hero width; * `background-position: bottom` locks the baseline so peaks point UP. * * Anchoring the silhouette ABOVE the hero photo (z-index 2, height * clamp(70px, 9vw, 120px)) gives the band-collage a real horizon line * instead of a hard rectangular bottom edge. Height nudged up from * 60→70 floor / 8vw→9vw / 110→120 cap so the range reads at desktop * widths where the heroInner bottom-padding sits about ~80px above * the hero edge. */ body[data-tenant="renovegas"] [class*="homepage-premier-module"][class$="__hero"]::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(70px, 9vw, 120px); background-image: url("data:image/svg+xml;utf8,"); background-size: 100% 100%; background-repeat: no-repeat; background-position: bottom center; z-index: 2; pointer-events: none; } /* ── Mobile parity (≤480px) ───────────────────────────────────────────── * On phones the starfield density at 80px/cell reads as too dense * against the narrower viewport (cells per row drop from ~18 → ~5, so * stars feel clustered). Loosen to 100px so the field stays sparse at * 390px. Headline glow stays — at mobile sizes the apex headline is * proportionally larger relative to the screen, so the moon-glow is * actually a bigger visual win. * * Marquee bulbs and mountain silhouette: at 390px the bulb spacing * (22px) gives ~17 bulbs across the viewport which still reads as a * proper marquee strip — no adjustment needed. The mountain silhouette * uses `preserveAspectRatio='none'` so the SVG stretches to viewport * width naturally; the clamp() floor of 60px keeps peaks legible at * phone scale without dominating the hero. */ @media (max-width: 480px) { body[data-tenant="renovegas"] { background-size: auto, 100px 100px; } body[data-tenant="renovegas"] footer { background-size: auto, 100px 100px; } /* Tighten bulb spacing slightly so the strip still reads as marquee * frame even on the narrowest viewports. Mobile nav is the same h-20 * (80px) as desktop, so the 5.5rem (88px) clearance still lands just * below the nav row without crowding it. */ body[data-tenant="renovegas"] [class*="homepage-premier-module"][class$="__hero"]::after { background-size: 18px 12px; top: 5.5rem; } } /* * taylortributes — per-sister visual chrome polish. * * All rules scoped on `body[data-tenant="taylortributes"]` so they only apply * when this sister is the active tenant. Loaded after premier-overrides.css * via globals.css, so this file can override anything the family chrome * sets. Owned by the taylortributes sister; do not edit from other sister files. * * Visual goal: Eras-Tour stage romance — red metallic foil, friendship-bracelet * beading, a dusting of stage glitter, magazine-romance italics. Vogue cover * meets concert poster, not a fan-zine collage. Restraint > maximalism — a * handful of well-tuned effects, no kitchen sink. * * Token reminders (set in premier-overrides.css :: body[data-tenant="taylortributes"]): * --premier-font-display Italiana (refined romantic serif) * --premier-accent-gold #D63030 — Eras-Tour red for section H2s * --premier-accent-gold-edge #E84545 — warmer red edge * --premier-gold-grad-deep #6B1414 — burgundy stage curtain * --premier-gold-grad-mid #B82828 — rich red * --premier-gold-grad-light #E84545 — bright red near-apex * --premier-gold-grad-apex #FF6A6A — warm coral-red apex * * Tokens added below (CTA pill + honeycomb tint were missing from the * premier-overrides.css sister block; set them here so they don't have to * round-trip through the shared file). */ /* ── Token completions (CTA pill + honeycomb tint) ───────────────────── * The premier-overrides.css block sets the gradient ramp + display font * but leaves the CTA pill on Premier's neutral cream. A cream pill against * an Eras-red hero photo reads as a forgotten swatch — give the pill a * coral-red fill with a deep red-black face so it ties directly to the * apex of the headline gradient. Honeycomb tint shifts off pure black to * a near-black-burgundy so the hex texture in the section backgrounds * picks up the warm-red atmosphere instead of disappearing into a black * rectangle. */ body[data-tenant="taylortributes"] { --premier-cta-bg: #D63030; /* Eras red pill */ --premier-cta-bg-hover: #FF6A6A; /* coral-red lift on hover */ --premier-cta-fg: #FFFFFF; /* cream-on-red — highest legibility */ --premier-honeycomb-tint: rgba(70, 10, 10, 0.55); /* deep red-tinted dark */ } /* ── Background atmosphere ────────────────────────────────────────────── * Default Premier body is flat black; on taylortributes that swallows the * warm-red staging the painted logo + hero collage are trying to set up. * Layer two very subtle radial washes: a warm-red bloom at the top (stage * footlights spilling up from the hero) and a fainter coral bloom at the * bottom so a long-scroll page never fades to dead black. `fixed` so the * wash stays put while content scrolls past — reads as house lighting, * not a banner stripe. */ body[data-tenant="taylortributes"] { background-image: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(214, 48, 48, 0.18), transparent 55%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255, 106, 106, 0.08), transparent 60%); background-attachment: fixed; background-repeat: no-repeat; } /* ── Stage-glitter shimmer overlay ────────────────────────────────────── * A whisper of multi-point sparkle above the body background but beneath * all content. Two repeating radial-gradients at different scales create * an irregular dust pattern — pure white pinpoints at alpha 0.02 so the * effect is felt, not seen. Anything brighter reads as a tacky filter * instead of stage-lighting bloom. `pointer-events: none` keeps it from * intercepting clicks. */ body[data-tenant="taylortributes"]::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle at 17% 23%, rgba(255, 255, 255, 0.022) 0.5px, transparent 1.5px), radial-gradient(circle at 73% 61%, rgba(255, 220, 220, 0.020) 0.5px, transparent 1.5px), radial-gradient(circle at 41% 88%, rgba(255, 255, 255, 0.018) 0.5px, transparent 1.5px); background-size: 220px 220px, 180px 180px, 260px 260px; background-position: 0 0, 60px 40px, 120px 80px; } /* ── Hero headline: stage-lighting glow on the Eras-red apex ─────────── * The `.heroHeadline` ships the metallic red ramp (burgundy → coral * apex). Audit caught the burgundy top of the gradient swallowing the * "TAYLOR SWIFT" wordmark against the busy stage photo; the soft * amber+red halos alone weren't separating type from photo. Add a tight * black drop layer FIRST so the type silhouette punches off the photo, * then the warm-amber stage-footlight glint, then the outer red wash * that ties back to the ambient bloom. The amber pin is the "glitter" — * a hair of gold inside the red foil. Gradient tokens are left alone * per spec. Letter-spacing tightened slightly on the H1 so the tall * Italiana caps don't drift apart at hero scale. */ body[data-tenant="taylortributes"] [class*="homepage-premier-module"][class$="__heroHeadline"], body[data-tenant="taylortributes"] [class*="premier-content-page-module"][class$="__heroHeadline"] { text-shadow: 0 2px 6px rgba(0, 0, 0, 0.75), 0 0 16px rgba(0, 0, 0, 0.55), 0 0 28px rgba(255, 200, 100, 0.40), 0 0 60px rgba(214, 48, 48, 0.30); letter-spacing: -0.005em; } /* Hero eyebrow + supporting copy were also losing the fight against the * photo. A 1px black backdrop + soft drop is enough to read at small * scale without painting a "label" box. */ body[data-tenant="taylortributes"] [class*="homepage-premier-module"][class$="__heroEyebrow"], body[data-tenant="taylortributes"] [class*="homepage-premier-module"][class$="__heroBody"], body[data-tenant="taylortributes"] [class*="premier-content-page-module"][class$="__heroEyebrow"], body[data-tenant="taylortributes"] [class*="premier-content-page-module"][class$="__heroBody"] { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 12px rgba(0, 0, 0, 0.55); } /* ── Section H2s: hard poster shadow + soft red halo ──────────────────── * premier-overrides.css already paints H2s in the Eras red and stacks a * 3px black poster offset on them. Layer a soft red halo behind so the * section heads read like backlit tour-poster type without losing the * cinematic offset. `!important` wins over the family rule's single * shadow. Slight letter-spacing bump because Italiana at H2 weight looks * more refined with a touch of air between the caps. */ body[data-tenant="taylortributes"] [data-premier-gold]:where(h2), body[data-tenant="taylortributes"] h2[data-premier-gold], body[data-tenant="taylortributes"] [data-premier-gold][class*="sectionHeading"] { text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6), 0 0 22px rgba(214, 48, 48, 0.35) !important; letter-spacing: 0.02em; } /* ── Hero CTA: coral-red pill with warm-glow hover ────────────────────── * Premier ships a warm cream glow on the hero CTA hover; on taylortributes * we want a coral-red lift that reads as a stage-lit follow-spot. Two * shadow layers (tight bright halo + wider soft red bloom) plus a hair-thin * inset white rim so the pill keeps a foil-bevel sheen. Selectors mirror * the homepage-premier.module.css `.heroCtaButton :global(...)` chain via * the hashed module pattern. */ /* ── Featured Acts cards: tour-poster red edge ───────────────────────── * Default Premier featured cards are flat dark tiles. Wrap each with a * thin red ring (via box-shadow so layout never shifts) and a soft red * drop so they read as framed tour-poster panels stacked on a stage * flat. Hover intensifies both layers — the card "warms up" like a * theatrical lighting cue. */ body[data-tenant="taylortributes"] [class*="homepage-premier-module"][class$="__featuredCard"] { box-shadow: 0 0 0 1px rgba(214, 48, 48, 0.28), 0 12px 32px -16px rgba(214, 48, 48, 0.40); transition: box-shadow var(--premier-transition-standard, 0.35s ease), transform var(--premier-transition-standard, 0.35s ease); } body[data-tenant="taylortributes"] [class*="homepage-premier-module"][class$="__featuredCard"]:hover, body[data-tenant="taylortributes"] [class*="homepage-premier-module"][class$="__featuredCard"]:focus-within { box-shadow: 0 0 0 1px rgba(255, 106, 106, 0.65), 0 0 24px rgba(255, 106, 106, 0.28), 0 18px 40px -18px rgba(214, 48, 48, 0.55); } /* ── Directory listing cards: matching tour-poster glow ──────────────── * Carry the same treatment over to the /tributes directory cards so the * brand reads consistently between homepage + catalog. Directory cards * live in a separate module (`directory-view-content-module`) so they * need their own selector. */ body[data-tenant="taylortributes"] [class*="directory-view-content-module"][class$="__listingCard"] { box-shadow: 0 0 0 1px rgba(214, 48, 48, 0.24), 0 12px 32px -16px rgba(214, 48, 48, 0.36); transition: box-shadow var(--premier-transition-standard, 0.35s ease); } body[data-tenant="taylortributes"] [class*="directory-view-content-module"][class$="__listingCard"]:hover, body[data-tenant="taylortributes"] [class*="directory-view-content-module"][class$="__listingCard"]:focus-within { box-shadow: 0 0 0 1px rgba(255, 106, 106, 0.60), 0 0 24px rgba(255, 106, 106, 0.24), 0 18px 40px -18px rgba(214, 48, 48, 0.50); } /* ── SIGNATURE: Friendship-bracelet beaded section dividers ──────────── * The taylortributes signature element. A 28px-tall ribbon between every * homepage section that reads unmistakably as a row of strung beads — * Eras-Tour friendship-bracelet motif from across the room, not "small * coral dots if you squint." Three stacked layers compose the bead row: * * 1. Underlying "string" — a 1px horizontal cream line @ 22% alpha * runs through the vertical midline. Subtle enough to read as the * bracelet cord, not a divider rule of its own. * 2. Bead row A — repeating radial-gradient at 26px stride, 5px radius, * hard transition at 5.5px so the circles render crisp. Cream * (#FDF4E6) — the bead that sits on the string. * 3. Bead row B — same stride but offset by 13px, painted Eras-red * (#D63030). Alternating cream/red beads across the row, matching * the bracelet aesthetic without needing a third color. * * Each bead carries a coral-red outer halo (5.5–7px transparent ring * blended into a soft glow stop) so they read as glossy enameled beads * catching stage light, not flat circles. The pattern repeats horizontally * across the section width and is centered vertically in the 28px slot. * * AUDIT FIX: the previous selector used `[class*="__section"]` which * matches the substring "__section" in `__sectionInner`, `__sectionHeading` * etc. (false positives) and never matched `__photoFaqSection` or * `__closingCta` (which carry the visual role of a section but use * different class roots). Net result was a single divider on the whole * homepage (Featured → Genres). Switched to the
    element-tag * adjacent-sibling pattern so EVERY section boundary gets a bead row, * regardless of which homepage-premier module class the section uses. */ body[data-tenant="taylortributes"] section + section::before { content: ""; display: block; height: 28px; width: min(560px, 80%); margin: 0 auto; background-image: /* Bead row A — cream bead with coral halo, 26px stride */ radial-gradient( circle at 13px 14px, rgba(253, 244, 230, 0.95) 0, rgba(253, 244, 230, 0.95) 5px, rgba(255, 106, 106, 0.55) 5.5px, rgba(255, 106, 106, 0.18) 7px, transparent 8.5px ), /* Bead row B — Eras-red bead with coral halo, offset 13px */ radial-gradient( circle at 0 14px, rgba(214, 48, 48, 0.95) 0, rgba(214, 48, 48, 0.95) 5px, rgba(255, 106, 106, 0.60) 5.5px, rgba(255, 106, 106, 0.20) 7px, transparent 8.5px ), /* String — thin cream cord behind the beads */ linear-gradient( to bottom, transparent calc(50% - 0.5px), rgba(253, 244, 230, 0.22) calc(50% - 0.5px), rgba(253, 244, 230, 0.22) calc(50% + 0.5px), transparent calc(50% + 0.5px) ); background-size: 26px 28px, 26px 28px, 100% 100%; background-position: 0 0, 13px 0, 0 0; background-repeat: repeat-x, repeat-x, no-repeat; margin-block: clamp(1.5rem, 3vw, 2.5rem) calc(-1 * var(--premier-section-pad-y, 4rem) + clamp(0.5rem, 1.5vw, 1rem)); position: relative; z-index: 1; pointer-events: none; /* Soft outer drop so the bead row floats off the section background */ filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); } /* hr fallback: keep the dotted-coral treatment for inline rules inside * content pages (FAQ separators, prose
    , etc.) — the bold bead row * is reserved for section-to-section breaks so it stays a signature, not * wallpaper. */ body[data-tenant="taylortributes"] hr { border: 0; border-top: 2px dotted rgba(255, 106, 106, 0.55); height: 0; background: none; margin-block: 2.25rem; } /* ── Genre tile labels: cream-on-red instead of red-on-black ─────────── * Premier's `.categoryLabel` rule routes the tile label through * `--premier-accent-gold` (red on this sister) with a 5px black offset * shadow and a 1px black stroke. Audit caught the 12-tile Genres & Eras * grid reading as a wall of red emergency-sign caps — exactly the * fan-zine effect this sister is supposed to avoid. Repaint the labels * cream (#FDF4E6) so the photographic tile + dark scrim do the * brand-red work; keep a soft red glow + the black stroke for legibility * over high-key photos. The closing-CTA heading uses the same * gold-shadow pattern but is a single H2-scale headline (not a 12-tile * grid) so it stays in red for brand impact. */ body[data-tenant="taylortributes"] [class*="homepage-premier-module"][class$="__categoryLabel"] { color: #FDF4E6 !important; text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.75), 0 0 18px rgba(214, 48, 48, 0.55) !important; -webkit-text-stroke: 1px rgba(0, 0, 0, 0.85); } /* ── Section eyebrow labels: romantic italic ─────────────────────────── * The small uppercase eyebrow tags ("FEATURED ACTS", "OUR ACTS", etc.) * inherit Premier's tracked-out caps. Italiana is delicate; lean into * that with a low-key italic + slightly looser tracking on these labels * so they read as magazine-romance section heads rather than utility * captions. Targets the family's eyebrow/kicker slots. */ body[data-tenant="taylortributes"] [class*="homepage-premier-module"][class$="__sectionEyebrow"], body[data-tenant="taylortributes"] [class*="homepage-premier-module"][class$="__eyebrow"], body[data-tenant="taylortributes"] [class*="premier-content-page-module"][class$="__sectionEyebrow"], body[data-tenant="taylortributes"] [class*="premier-content-page-module"][class$="__eyebrow"] { font-style: italic; letter-spacing: 0.18em; color: rgba(255, 200, 200, 0.85); } /* ── Active nav link: red foil underline ──────────────────────────────── * premier-overrides.css gives the active nav link a 2px solid underline * in `--premier-accent-primary` (cream). Bump to a 3px Eras-red underline * with a small glow so the active state reads like a foil-stamped tour * program tab. `text-decoration-color` keeps the underline independent * of link text color (which stays cream for legibility). */ body[data-tenant="taylortributes"] nav.glass-strong a[aria-current="page"] { text-decoration-color: var(--premier-accent-gold) !important; text-decoration-thickness: 3px !important; text-underline-offset: 7px !important; text-shadow: 0 0 14px rgba(214, 48, 48, 0.45); } /* ── Footer: curtain-reveal warm-red bottom ──────────────────────────── * Default Premier footer fades to flat black at page bottom. Layer a * subtle vertical wash inside the footer so it reads as a stage curtain * being raised — transparent at the top edge, deepening to a burgundy * stage-flat at the bottom. Subtle (max 22% alpha at the deepest point) * so it never competes with footer text. Footer markup uses the * `[data-premier-footer]` hook the family chrome already exposes. */ body[data-tenant="taylortributes"] [data-premier-footer], body[data-tenant="taylortributes"] footer[class*="premier"] { background-image: linear-gradient( to bottom, transparent 0%, rgba(107, 20, 20, 0.10) 55%, rgba(107, 20, 20, 0.22) 100% ); } /* ── Small-UI typography guardrail (sister-visual-audit-2 P0-4) ───────── * Italiana is a romantic display serif — beautiful at hero/H2 scale but * illegible at 0.7–0.95rem on labels, badges, eyebrows. The audit caught * stat labels, trust badges, and tile labels degrading to ornament * because the family chrome routes everything that uses * `--premier-font-display` through Italiana on this sister. * * Force small UI text to the body font (Roboto) while keeping Italiana * on H1/H2 surfaces where the brand voice actually lands. Hero headline, * section H2 (`[data-premier-gold]`), section heading, closing CTA * heading, and FAQ summary are deliberately NOT in this list — they * stay on the display face. The romantic italic eyebrow tweak above * still applies (font-style + letter-spacing inherit); only the * font-family changes so the eyebrow stays legible. */ body[data-tenant="taylortributes"] [data-premier-footer-heading], body[data-tenant="taylortributes"] [data-premier-footer-link], body[data-tenant="taylortributes"] .eyebrow, body[data-tenant="taylortributes"] .text-primary, body[data-tenant="taylortributes"] [class*="premier-trusted-by-strip-module"] *, body[data-tenant="taylortributes"] [class*="premier-stats-band-module"][class$="__label"], body[data-tenant="taylortributes"] [class*="homepage-premier-module"][class$="__categoryLabel"], body[data-tenant="taylortributes"] [class*="homepage-premier-module"][class$="__featuredEyebrow"], body[data-tenant="taylortributes"] [class*="homepage-premier-module"][class$="__featuredTribute"], body[data-tenant="taylortributes"] [class*="homepage-premier-module"][class$="__featuredCity"], body[data-tenant="taylortributes"] [class*="homepage-premier-module"][class$="__featuredMeta"], body[data-tenant="taylortributes"] [class*="homepage-premier-module"][class$="__featuredCta"], body[data-tenant="taylortributes"] [class*="newsletter-signup-module"][class$="__wrapper"] *:not(h2) { font-family: var(--premier-font-body) !important; } /* ── Mobile parity (≤ 390px) ──────────────────────────────────────────── * On a phone the hero headline halo can bleed past the viewport edge * because the type is locked tight to the screen rim. Pull both shadow * radii in so the glow stays inside the safe area; reduce the eyebrow * tracking so the italic label still fits on a single line on narrow * screens. Everything else (cards, dividers, CTA) is already shadow-only * and scales cleanly. */ @media (max-width: 390px) { body[data-tenant="taylortributes"] [class*="homepage-premier-module"][class$="__heroHeadline"], body[data-tenant="taylortributes"] [class*="premier-content-page-module"][class$="__heroHeadline"] { text-shadow: 0 0 18px rgba(255, 200, 100, 0.36), 0 0 36px rgba(214, 48, 48, 0.26); } body[data-tenant="taylortributes"] [class*="homepage-premier-module"][class$="__sectionEyebrow"], body[data-tenant="taylortributes"] [class*="homepage-premier-module"][class$="__eyebrow"], body[data-tenant="taylortributes"] [class*="premier-content-page-module"][class$="__sectionEyebrow"], body[data-tenant="taylortributes"] [class*="premier-content-page-module"][class$="__eyebrow"] { letter-spacing: 0.12em; } /* Friendship-bracelet bead row: shrink stride (26px → 22px) + bead * radius (5px → 4px) so the bracelet still reads at phone width * without the beads crowding the screen edges. Width opens to 88% * to give the row more room since the heading column is narrower. */ body[data-tenant="taylortributes"] section + section::before { height: 22px; width: 88%; background-image: radial-gradient( circle at 11px 11px, rgba(253, 244, 230, 0.95) 0, rgba(253, 244, 230, 0.95) 4px, rgba(255, 106, 106, 0.55) 4.5px, rgba(255, 106, 106, 0.18) 6px, transparent 7.5px ), radial-gradient( circle at 0 11px, rgba(214, 48, 48, 0.95) 0, rgba(214, 48, 48, 0.95) 4px, rgba(255, 106, 106, 0.60) 4.5px, rgba(255, 106, 106, 0.20) 6px, transparent 7.5px ), linear-gradient( to bottom, transparent calc(50% - 0.5px), rgba(253, 244, 230, 0.22) calc(50% - 0.5px), rgba(253, 244, 230, 0.22) calc(50% + 0.5px), transparent calc(50% + 0.5px) ); background-size: 22px 22px, 22px 22px, 100% 100%; background-position: 0 0, 11px 0, 0 0; } }