/* * 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 */ /* ── Surface + edge-light system (2026-06 skin evolution) ───────────── * Cards stop being flat #1F1F1F boxes with a uniform cream outline and * become lit surfaces: a subtle top-to-bottom falloff gradient (as if * lit from above — stage light, not SaaS glow) plus a 1px top edge * highlight baked into the shadow stack. Consumed by section/article * cards, directory listing cards, featured/blog cards, and the profile * inquiry sidebar. The highlight is white-on-dark at 7% — it defines * the lit edge without reading as a glow (refs #179 glow budget: this * is an edge, not an emission). */ --premier-card-bg: linear-gradient(180deg, #242427 0%, #161618 100%); --premier-shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 16px 40px -28px rgba(0, 0, 0, 0.9); --premier-shadow-card-hover: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 28px 56px -30px rgba(0, 0, 0, 0.95); /* Soft cinematic text grounding — replaces the WP-era hard-offset * poster shadows (`5px 5px 0` / `3px 3px 0`) family-wide. Display caps * keep their weight from the letterforms + gold, not from a printed * drop slab. */ --premier-shadow-text: 0 2px 14px rgba(0, 0, 1, 0.7); /* Tight dark grounding shadow for BODY / secondary copy that sits * directly on a section SURFACE (decks, FAQ copy, closing-CTA body, * era/spotlight meta). Surfaces can now be sister-tinted glow-pools * (round-4), not guaranteed flat-dark — this reads as nothing over a * near-black plate but protects the copy over a bright glow/photo. */ --premier-shadow-text-soft: 0 1px 4px rgba(0, 0, 1, 0.8); /* Gold kicker rule — the family's editorial signature mark. Rendered * under gold section headings (see premier-overrides.css) and reusable * anywhere a heading needs the brand rule. Tints per-sister via * --premier-accent-gold. */ --premier-rule-accent: linear-gradient( 90deg, var(--premier-accent-gold) 0%, color-mix(in oklab, var(--premier-accent-gold) 35%, transparent) 75%, transparent 100% ); /* Section atmosphere wash — a faint top-anchored radial in the * sister's gold accent, used to alternate section backgrounds (stage * light spilling onto the next set piece). 6% alpha: felt, not seen. * Each sister re-tints automatically through --premier-accent-gold. */ --premier-section-wash: radial-gradient( 110% 70% at 50% 0%, color-mix(in oklab, var(--premier-accent-gold) 6%, transparent) 0%, transparent 65% ); /* ── Section surface system (round-3 scroll chaptering, 2026-06-10) ── * The owner's round-3 verdict on the sister homepages: "~85% near-black * void; color is the only axis of variation." These tokens power the * recipe-level `surfaceVariant` treatments (see PREMIER_SURFACE_VARIANT * map in homepage-premier.tsx + premier-surfaces.module.css) that * chapter the scroll into visibly different plates. All three derive * from the per-sister gradient-ramp tokens, so every sister inherits * its own hue with zero per-sister CSS. * * READABILITY CONTRACT (#179/#180 discipline, pinned by * premier-skin-evolution.test.ts): every surface keeps its effective * background dark enough that --premier-fg (white) and * --premier-text-soft (#E4E4E4) clear WCAG AA 4.5:1 against the * BRIGHTEST sister ramp (allcountrytributes amber). That bounds the * mixes below: deep-stop mixes ≤ 70% over near-black, the tinted-wash * bloom ≤ 26% mid-ramp alpha, the duotone photo layer brightness- * clamped to 0.52, and the duotone scrim alpha floor at 68%. */ /* (a) tinted-wash — a strong sister-color gradient field. Deep ramp * stop mixed well past the old 6% --premier-section-wash so the plate * reads as a COLOR chapter at thumbnail scale, with a mid-ramp bloom * anchored top-center like stage light. */ --premier-surface-tinted-wash: radial-gradient( 120% 85% at 50% 0%, color-mix(in srgb, var(--premier-gold-grad-mid) 26%, transparent) 0%, transparent 60% ), linear-gradient( 180deg, color-mix(in srgb, var(--premier-gold-grad-deep) 66%, #000001) 0%, color-mix(in srgb, var(--premier-gold-grad-deep) 38%, #000001) 55%, color-mix(in srgb, var(--premier-gold-grad-deep) 58%, #050508) 100% ); /* (b) duotone-photo — a full-bleed real performance photo (pinned per * sister via the recipe's `surfaceImage` option → the * `--premier-surface-image` custom property), duotoned into the * sister ramp. The photo layer is grayscaled + brightness-clamped so * even a blown-out white region lands ≤ ~52% before the tint scrim; * the scrim then holds ≥ 68% alpha of the near-black tint everywhere * (AA floor for white/soft text at any scroll position). */ --premier-surface-duotone-tint: color-mix(in srgb, var(--premier-gold-grad-deep) 58%, #000001); /* Order matters: grayscale → brightness clamp → contrast stretch. The * stretch pivots at 50% so the clamped highlights stay ≤ ~53% (the AA * envelope holds) while the mids spread out — saturated stage shots * go luminance-flat under plain grayscale, and without the stretch * the duotone reads as a flat plate instead of a photograph. */ /* --premier-surface-photo-filter retired round-4: the duotone is a * sister-tinted glow now, not a duotoned photo. */ /* Scrim alphas tuned against the BRIGHTEST sister deep (Premier's own * #8F6D30): 76/68/84 keeps white + soft text ≥ AA everywhere while * leaving enough photo dynamic range (≈ 24–32%) that the section * still reads as a performance photograph, not a flat plate. */ /* --premier-surface-duotone-scrim retired round-4 (no photo to scrim). */ /* (c) texture — a subtle tinted material plate: fine 135° pinstripe in * the sister accent over a deep-ramp base, with the existing faint * section wash for depth. Reads as fabric/grain, not as a filter. */ --premier-surface-texture-base: color-mix(in srgb, var(--premier-gold-grad-deep) 26%, #060608); /* --premier-surface-texture-pattern retired round-4: the texture is a * soft sister glow now, not a pinstripe grain. */ /* (b'/c') Round-4 glow replacements for the photo + grain surfaces * (owner verdict 2026-06-10: those backgrounds read as ugly — use * glows/gradients). Both stay near-black for the AA readability * contract and re-tint per sister through the gradient-ramp tokens. * texture-glow = faint stage haze; duotone-glow = dramatic spotlight * pool for the finale chapter. The legacy photo/grain tokens above * are retained (still defined) but no longer painted. */ --premier-surface-texture-glow: radial-gradient( 120% 80% at 50% 0%, color-mix(in srgb, var(--premier-gold-grad-mid) 13%, transparent) 0%, transparent 62% ), radial-gradient( 90% 70% at 50% 120%, color-mix(in srgb, var(--premier-gold-grad-deep) 42%, transparent) 0%, transparent 72% ); --premier-surface-duotone-glow: radial-gradient( 72% 55% at 50% 80%, color-mix(in srgb, var(--premier-gold-grad-mid) 24%, transparent) 0%, transparent 58% ), radial-gradient( 130% 95% at 50% 0%, color-mix(in srgb, var(--premier-gold-grad-deep) 55%, transparent) 0%, transparent 72% ), linear-gradient( 180deg, #000001 0%, color-mix(in srgb, var(--premier-gold-grad-deep) 28%, #000001) 100% ); /* Center-fade hairline divider for section seams. */ --premier-divider: linear-gradient( 90deg, transparent 0%, var(--premier-border-strong) 50%, transparent 100% ); --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); /* ── Text-protection scrims ─────────────────────────────────────────── * DOCTRINE (readability pass, issue #179): text never sits on * photography bare. Any component that overlays copy on a photo must * put a scrim zone (one of these gradients, or a solid backdrop) * between the two, deep enough that white text passes WCAG AA (4.5:1) * against the BRIGHTEST promo image in the catalog — not the average * one. Against a blown-out white photo region, a black overlay needs * ≥ ~0.6 alpha before white type clears 4.5:1, so the text zone of * the ramp holds 0.6+ and climbs to near-solid at the edge. * * `--premier-scrim-text` is the standard bottom-anchored ramp: * transparent over the top of the photo, dark where the text zone * begins, near-solid at the bottom edge. Consumed by the homepage * hero, the band-profile masthead, and any future photo-overlay text. * `--premier-scrim-text-top` is the matching top-edge vignette for * content (nav, badges) that overlaps the top of a photo. */ --premier-scrim-text: linear-gradient( 180deg, rgba(0, 0, 1, 0) 0%, rgba(0, 0, 1, 0.03) 32%, rgba(0, 0, 1, 0.38) 50%, rgba(0, 0, 1, 0.66) 65%, rgba(0, 0, 1, 0.88) 88%, rgba(0, 0, 1, 0.94) 100% ); --premier-scrim-text-top: linear-gradient( 180deg, rgba(0, 0, 1, 0.5) 0%, rgba(0, 0, 1, 0.18) 60%, rgba(0, 0, 1, 0) 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; /* Band-card titles are a reading surface, not chrome. Sisters re-point * `--premier-font-display` to decorative faces (Rye, Italiana, Limelight…) * that work at hero scale but fail at ~30px over a photo, so card titles * pin to this dedicated token instead and never inherit a sister face. * Semibold because Teko 400 goes spindly on top of busy promo shots. */ --premier-font-card-title: var(--font-premier-display), "Teko", "Bebas Neue", "Impact", sans-serif; --premier-weight-card-title: 600; --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 — 2026-06 skin evolution (owner revisit of the "adopt * structure, never skin" call): the hard-square poster edges were the * single loudest "2015 WP theme" tell at a glance. Geometry softens to * a restrained editorial radius — well short of the pill-everything * SaaS look, but enough that cards, tiles, and inputs read as a * contemporary premium surface. Everything flows from these four * tokens, so the whole family (and any sister override) moves * together. Circles (avatars, play buttons) still use literal * `border-radius: 50%` outside the token system. */ --premier-radius-sm: 0.375rem; --premier-radius-md: 0.625rem; --premier-radius-lg: 1rem; --premier-radius-xl: 1.25rem; --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; /* 2026-06 skin evolution: one CTA geometry family-wide. The hero * search + hero CTA were already pills while every other button was a * hard square — unify on the pill so the booking actions share a * single recognizable shape on every page. */ border-radius: var(--premier-radius-pill); 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"] { /* 2026-06 skin evolution: lit surface (top-falloff gradient + 1px * top edge-light in the shadow stack) instead of a flat box. */ background: var(--premier-card-bg); border-color: var(--premier-border-soft); border-radius: var(--premier-radius-md); box-shadow: var(--premier-shadow-card); 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: var(--premier-shadow-card-hover); } /* ── Gold kicker rule — family editorial signature ──────────────────── * 2026-06 skin evolution: every gold section heading carries a short * gradient rule beneath it. Promoted from the premiertributes-only * "magazine rule" (which shipped flat cream) to family chrome — each * sister tints it automatically via --premier-rule-accent / * --premier-accent-gold. The whole selector is wrapped in `:where()` * so module CSS can re-anchor the bar (e.g. centered closing CTAs set * `margin-inline: auto`) without specificity fights. */ :where(body[data-theme-family="premier"] h2[data-premier-gold], body[data-theme-family="premier"] [data-premier-gold][class*="sectionHeading"])::after { content: ""; display: block; width: 4rem; height: 3px; margin-top: 0.85rem; border-radius: var(--premier-radius-pill); background: var(--premier-rule-accent); } /* ── 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); /* 2026-06 skin evolution: soft cinematic grounding instead of the * WP-era hard-offset poster slab. */ text-shadow: var(--premier-shadow-text); } /* 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-card-bg); border-color: var(--premier-border-soft); border-radius: var(--premier-radius-md); box-shadow: var(--premier-shadow-card); 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); box-shadow: var(--premier-shadow-card-hover); } 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); } /* Card title stays on the family-wide legible card stack, NOT the sister * display face — Rye/Italiana/Limelight read fine as hero chrome but not * at card size over a promo photo (client-reported). See * `--premier-font-card-title` in premier-tokens.css. */ body[data-theme-family="premier"] [class*="directory-view-content-module"][class$="__cardTitle"] { font-family: var(--premier-font-card-title); font-weight: var(--premier-weight-card-title); 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); /* Eyebrow tracking (0.2em) at 13px caps was a second legibility drag on * the card — same call as P2-1 on the homepage featured rail. */ letter-spacing: var(--premier-tracking-wide); 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); border-radius: var(--premier-radius-pill); 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); border-radius: var(--premier-radius-sm); 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); } /* ── Hero-scale brand logo (home top, un-scrolled) ────────────────────── * On the home hero the header is transparent over the band collage, so the * brand logo reads as a large HERO lockup rather than a nav-bar mark: it * anchors to the TOP of the header row (align-self) and overflows downward * over the collage, clearing the hero headline below. On scroll it collapses * to the compact nav logo (the clamp further down). `PremierHeaderBrand` * stamps `data-prominent="true"` on the lockup only in this home-top state. * * Square sister marks (allcountry/bandas 1:1) fill ~15rem; the wide Premier * 2:1 wordmark is held by max-width so it doesn't sprawl across the nav — * both constraints with width/height:auto keep each mark's native aspect. * Sizing via max-height/-width (not height) so the shrink-on-scroll animates * through the transition declared below. */ body[data-theme-family="premier"] nav.glass-strong a[aria-label$="home"]:has([data-header-brand-lockup][data-prominent="true"]) { align-self: flex-start; } body[data-theme-family="premier"] nav.glass-strong [data-header-brand-lockup][data-prominent="true"] img { width: auto; height: auto; max-height: 6rem; max-width: 12.75rem; } @media (min-width: 1024px) { body[data-theme-family="premier"] nav.glass-strong [data-header-brand-lockup][data-prominent="true"] img { max-height: 11.25rem; max-width: 16.5rem; } } /* Logo + lockup shrink on scroll. Once the page scrolls past the hero photo, * the hero-scale logo would collide with the nav links and bleed over content * underneath, so it compresses to 3rem tall with a smooth 220ms transition. * We clamp via max-height + height:auto so the intrinsic size yields to the * scroll state; max-width is a safety cap for the widest (Premier 2:1) mark. */ 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: 9rem; max-height: 3rem; 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); /* 2026-06 skin evolution: the nav group reads as a floating pill over * the hero photo, matching the unified CTA geometry. */ border-radius: var(--premier-radius-pill); 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; /* 2026-06 skin evolution: the ±1px highlight/counter-shadow pair stays * (it's what makes the metallic ramp read as engraved metal), but the * WP-era `5px 5px 0` hard poster offset is retired for a soft * cinematic grounding shadow. */ -webkit-filter: drop-shadow(-1px -1px 0 var(--premier-gold-highlight)) drop-shadow(-1px -1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(0 6px 22px rgba(0, 0, 1, 0.6)); filter: drop-shadow(-1px -1px 0 var(--premier-gold-highlight)) drop-shadow(-1px -1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(0 6px 22px rgba(0, 0, 1, 0.6)); 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; /* 2026-06 skin evolution: section H2s drop the filter stack entirely * and ground with the family's soft text shadow — flat gold caps + * the kicker rule below carry the editorial weight now. */ -webkit-filter: none; filter: none; text-shadow: var(--premier-shadow-text) !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 override: REMOVED ───────────────────── * (2026-06 skin evolution.) The hex texture this rule tuned was dropped * 2026-05-25; the leftover rgba background-color override was fighting * the module-level section treatment. Alternating sections now get a * raised charcoal plate + sister-tinted stage-light wash directly in * their CSS modules (see `.sectionHoneycomb` in * homepage-premier.module.css / premier-content-page.module.css). */ /* ── 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 */ } /* premiertributes (FLAGSHIP) — executive navy + gold-accent ramp. The * flagship reads BLUE-first: the hero headline runs a rich navy → royal * sapphire → bright azure metallic with a pale-gold apex shine, while the * GOLD accent chrome (section H2s, kicker rules, CTA pills, borders) is * inherited UNCHANGED from the base tokens — so blue is the brand and gold * is the accent. Only the ramp + highlight are overridden here; the * ramp-derived section glows re-tint to blue automatically. */ body[data-tenant="premiertributes"] { --premier-gold-grad-deep: #0E2350; /* deep navy — ramp edge */ --premier-gold-grad-mid: #2A5BB0; /* royal sapphire blue */ --premier-gold-grad-light: #6F9BDD; /* bright azure near-apex */ --premier-gold-grad-apex: #F2E6BC; /* pale-gold apex shine — gold accent in the headline */ --premier-gold-highlight: rgba(242, 230, 188, 1); /* warm gold rim highlight */ } /* allcountrytributes — rustic barn-red + saddle-brown 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 dark coffee-brown → barn/brick red → warm terracotta → pale * wheat cream for a weathered brown-and-red look (saddle leather + a * painted-barn red) — distinct from Taylor's bright red and Legends' * orange-magenta. Accent + CTA carry the brick red; primary stays a warm * buckskin cream. */ body[data-tenant="allcountrytributes"] { --premier-font-display: var(--font-sister-allcountrytributes-display), "Rye", "Smokum", "Bevan", serif; --premier-gold-grad-deep: #3A1A10; /* dark coffee brown */ --premier-gold-grad-mid: #A6362A; /* barn / brick red */ --premier-gold-grad-light: #D98A5E; /* warm terracotta clay */ --premier-gold-grad-apex: #F3DEC0; /* pale wheat cream apex */ --premier-gold-highlight: rgba(243, 222, 192, 1); --premier-accent-gold: #B1492E; /* brick red for section H2s */ --premier-accent-gold-edge: #C55A3C; /* lighter rust edge */ --premier-accent-primary: #E8C9A6; /* warm buckskin cream */ --premier-cta-bg: #A6362A; /* barn-red CTA pill */ --premier-cta-bg-hover: #C24A34; /* brighter brick on hover */ --premier-cta-fg: #F3DEC0; /* pale wheat text on the red pill */ --premier-honeycomb-tint: rgba(58, 26, 16, 0.55); /* deep saddle-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); } /* * 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 stay on the family's flat treatment (hot-pink color via * --premier-accent-gold + 3px poster offset from premier-overrides.css). * The soft pink halo this file used to layer on them is gone — the #179 * glow budget allows emissive text glow at hero scale (h1) only; at * section scale it smeared the Audiowide caps. */ /* ── 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 keeps a plain dark grounding shadow only. The hot-pink * halo it used to carry is outside the #179 glow budget — tile labels * are a reading surface over photography, and the halo cut their * contrast against bright tiles instead of helping it. */ body[data-tenant="90stonow"] [class*="homepage-premier-module"][class$="__categoryLabel"] { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); } /* ── 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); } /* ── 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). The glow * lives on the underline color alone — no text-shadow on nav copy * (#179 glow budget: nav links are body text, not display type). */ 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; } /* * 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 * 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(166, 54, 42, 0.14), rgba(166, 54, 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(166, 54, 42, 0.22); box-shadow: 0 16px 40px -28px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(166, 54, 42, 0.06); } body[data-tenant="allcountrytributes"] [data-component="section-card"]:hover, body[data-tenant="allcountrytributes"] [data-component="article-card"]:hover { border-color: rgba(177, 73, 46, 0.55); box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(177, 73, 46, 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(177, 73, 46, 0.55); box-shadow: 0 4px 12px rgba(20, 8, 2, 0.55), 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(217, 138, 94, 0.85); box-shadow: 0 6px 16px 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(177, 73, 46, 0.22); box-shadow: 0 4px 18px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(166, 54, 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(177, 73, 46, 0.45); box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.08), inset 0 4px 24px -12px rgba(177, 73, 46, 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(217, 138, 94, 0.85); letter-spacing: 0.12em; } /* ── 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. * */ @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; } } /* * 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, 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(0 6px 22px rgba(0, 0, 1, 0.6)) 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(0 6px 22px rgba(0, 0, 1, 0.6)) 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); } /* ── 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 ──────────────────────────────────────────────── * The shared Premier nav hover shifts links to `--premier-accent-primary` * (peach on this sister), and that color swap is the whole hover state — * the orange under-glow this file used to add is gone (#179 glow budget: * no emissive glow on body-text-scale links). */ /* ── 10. Mobile parity (390px) ──────────────────────────────────────── * At narrow widths the apex halo glow can over-bloom on small screens. * Tighten it so the page stays composed on a 390px viewport. */ @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(0 4px 16px rgba(0, 0, 1, 0.6)) 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(0 4px 16px rgba(0, 0, 1, 0.6)) drop-shadow(0 0 12px rgba(255, 138, 44, 0.50)) drop-shadow(0 0 24px rgba(255, 138, 44, 0.22)); } } /* * 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(0 6px 22px rgba(0, 0, 1, 0.6)) 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(0 6px 22px rgba(0, 0, 1, 0.6)) 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 chrome ───────────────────────────────────────────────── * Nav hover stays the family color swap (orange-coral accent on this * sister) — the magenta text-shadow hover this file used to add is gone * (#179 glow budget: no emissive glow on body-text-scale links). */ /* 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); } /* ── 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(0 4px 16px rgba(0, 0, 1, 0.6)) 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(0 4px 16px rgba(0, 0, 1, 0.6)) drop-shadow(0 0 14px rgba(255, 79, 172, 0.35)); } } /* ── 9. Closing-CTA secondary hover ───────────────────────────────────── * Primary `gold` button hover stays the plain family lift (background * swap, no halo) — the magenta hover glow this file used to add is gone * (#179 glow budget: CTA hover feedback is the standard color swap, not * an emissive chain). The outlined secondary keeps its magenta border + * subtle inner-fill color swap so the pair still 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); } /* (FAQ open/hover state: the magenta text glow that used to mark the * active question is gone — FAQ summaries are a reading surface, and * the family hover already recolors them. #179 glow budget.) */ /* ── 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; } /* * 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 (2 effects): * * 1. (removed) — the apex-headline stage-spot halo was dropped; it read * as a glow over the saturated hero collage. Hero caps now use the * family metallic treatment as-is (no sister halo). * * 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 cool-blue bloom that reads as proscenium * footlights spilling up behind the hero collage. * - bottom: a softer deep-blue 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(42, 91, 176, 0.07), transparent 60%), radial-gradient(ellipse 65% 40% at 50% 100%, rgba(14, 35, 80, 0.05), transparent 65%); background-attachment: fixed; background-repeat: no-repeat; } /* ── 2. Apex-headline glow: REMOVED ───────────────────────────────────── * This sister used to add a warm-gold stage-spot halo (blurred * drop-shadows) on top of the family `[data-premier-gold]` stack to lift * the hero caps off the photo. Even toned down it read as a glow over the * flagship's saturated collage, so the whole halo override is dropped. * The hero headline now inherits the family base treatment unchanged * (engraved ±1px metal edge + soft `0 6px 22px` grounding shadow, no * blur) from premier-overrides.css — clean gold, zero glow. */ /* ── 3. Lighter hero scrim ────────────────────────────────────────────── * The family `.heroOverlay` paints `--premier-scrim-text` (bottom ramp * climbing to 0.94 black) + `--premier-scrim-text-top` (0.5 top vignette) * + a side wash. Tuned for AA against the brightest catalog promo, that * stack read as a heavy dark veil over the flagship's saturated band * collage — the photo never breathed. We scope a lighter scrim to * premiertributes only (the family token still serves the sisters and the * band-profile mastheads, which need the full ramp). The bottom anchor is * kept — the gold headline (own edge stack), eyebrow, and body (own * `text-shadow: 0 2px 8px / 0.85`) carry their own legibility — but the * peak drops 0.94 → 0.6, the text zone 0.66 → 0.45, the top vignette * 0.5 → 0.28, and the side wash is dropped so the photo edges show. */ body[data-tenant="premiertributes"] [class*="homepage-premier-module"][class$="__heroOverlay"] { background: linear-gradient( 180deg, rgba(0, 0, 1, 0) 0%, rgba(0, 0, 1, 0.02) 40%, rgba(0, 0, 1, 0.22) 62%, rgba(0, 0, 1, 0.45) 82%, rgba(0, 0, 1, 0.6) 100% ), linear-gradient( 180deg, rgba(0, 0, 1, 0.28) 0%, rgba(0, 0, 1, 0.08) 55%, rgba(0, 0, 1, 0) 100% ); } /* ── 4. Magazine-rule under section H2s: PROMOTED TO FAMILY CHROME ────── * (2026-06 skin evolution.) The flagship-only cream rule proved out the * idea; it now ships family-wide as the gold kicker rule in * premier-overrides.css (--premier-rule-accent, auto-tinted per * sister). The flagship block was removed so two ::after paints don't * fight on the same element. The scroll-reveal draw (#7 below) still * targets the family-painted rule. */ /* ───────────────────────────────────────────────────────────────────── * 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 headline and atmosphere treatments 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(42, 91, 176, 0.32) 0%, rgba(14, 35, 80, 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; } /* (2026-06 skin evolution) The decorative deck dash was removed — the * family gold kicker rule under the section heading now provides the * editorial mark, and decks are left-aligned with their headings. */ /* ── 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; } } /* * 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 stay on the family's flat treatment (moonlit steel-blue * color + 3px poster offset from premier-overrides.css). The silver-blue * halo this file used to layer on them is gone — the #179 glow budget * allows emissive text glow at hero scale (h1) only. */ /* ── 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; } /* ── 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; } /* ── 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; } /* ── 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; } } /* * 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: typography only ─────────────────────────────────────── * premier-overrides.css already paints H2s in the Eras red with a 3px * black poster offset — the soft red halo this file used to add is gone * (#179 glow budget: emissive text glow at hero scale only; at section * scale it read as smear). Slight letter-spacing bump stays 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"] { letter-spacing: 0.02em; } /* ── 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); } /* Keep the dotted-coral treatment for inline rules inside content pages * such as FAQ separators and prose
    elements. */ 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; the black offset + stroke carry legibility over * high-key photos (the red glow that used to sit behind them is outside * the #179 glow budget — it softened the silhouette on bright tiles). * 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: 0 2px 10px rgba(0, 0, 1, 0.85), 0 1px 2px rgba(0, 0, 1, 0.9) !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; } /* ── 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; } }