/** Shopify CDN: Minification failed Line 765:14 Expected identifier but found whitespace Line 765:20 Unexpected "!" **/ /* ========================================================================= custom.css — Design tokens Unreal Rock Songs (Prime Video P&B monocromatico) Carregado via snippets/custom.globals.liquid no . Tokens sao escopados em :root — componentes consomem via var(). Colors sourced from config/settings_data.json color_schemes.scheme-1 (validated 2026-04-14 contra tema 142620950595 — Horizon vendor). Hex originais Leonardo (scheme-1): background #000000 foreground #ffffff primary #ffffff primary_button_bg #ffffff (invert — preserved) primary_button_text #000000 (invert — preserved) primary_button_hover_bg #fafa0bf0 (amarelo — INTENCIONALMENTE IGNORADO: branding P&B monocromatico pedido) border #0000000f (6% — substituido por 12% pra contraste em cards Prime Video) shadow #000000 Adaptacoes aplicadas: - bg-surface-1/2/3 (#141414/#1f1f1f/#2a2a2a) sao ADICAO nossa — Leonardo so tem 1 nivel de escuro. Escala de profundidade e requisito Prime Video. - Zero accent colorido. Estados via opacidade branca, nao cor. ========================================================================= */ :root { /* -------- Colors (monocromatico, zero acento colorido) -------- */ --urs-color-bg-base: #000000; --urs-color-bg-surface: #141414; --urs-color-bg-surface-2: #1f1f1f; --urs-color-bg-surface-3: #2a2a2a; --urs-color-text-primary: #ffffff; --urs-color-text-secondary: rgba(255, 255, 255, 0.72); --urs-color-text-muted: rgba(255, 255, 255, 0.55); --urs-color-text-disabled: rgba(255, 255, 255, 0.32); --urs-color-border: rgba(255, 255, 255, 0.12); --urs-color-border-strong: rgba(255, 255, 255, 0.24); --urs-color-scrim-soft: rgba(0, 0, 0, 0.55); --urs-color-scrim-hard: rgba(0, 0, 0, 0.85); --urs-color-scrim-gradient: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 1) 100% ); --urs-color-focus-ring: #ffffff; --urs-color-focus-ring-offset: #000000; /* Accent — URS Electric Purple */ --urs-color-accent: #A855F7; --urs-color-accent-hover: #C084FC; --urs-color-accent-deep: #7E22CE; --urs-color-accent-glow: rgba(168, 85, 247, 0.45); --urs-color-accent-glow-soft: rgba(168, 85, 247, 0.2); /* Highlight — Blood Red (NEW badges, EXCLUSIVE chips, Legend tier) */ --urs-color-highlight: #C8102E; --urs-color-highlight-glow: rgba(168, 85, 247, 0.45); --urs-color-highlight-glow-soft: rgba(168, 85, 247, 0.2); /* Ghost button (transparent, white border) */ --urs-color-button-ghost-bg: rgba(255, 255, 255, 0.06); --urs-color-button-ghost-hover: rgba(255, 255, 255, 0.12); --urs-color-button-ghost-border: rgba(255, 255, 255, 0.32); /* Botao invert (match scheme-1 primary_button do Leonardo) */ --urs-color-button-invert-bg: #ffffff; --urs-color-button-invert-text: #000000; --urs-color-button-invert-hover-bg: rgba(255, 255, 255, 0.88); /* Estados via opacidade/weight, nao cor */ --urs-overlay-hover: rgba(255, 255, 255, 0.08); --urs-overlay-pressed: rgba(255, 255, 255, 0.16); --urs-overlay-selected: rgba(255, 255, 255, 0.12); /* -------- Spacing (4pt base + 8pt layout) -------- */ --urs-space-1: 4px; --urs-space-2: 8px; --urs-space-3: 12px; --urs-space-4: 16px; --urs-space-5: 20px; --urs-space-6: 24px; --urs-space-8: 32px; --urs-space-10: 40px; --urs-space-12: 48px; --urs-space-16: 64px; --urs-space-20: 80px; /* -------- Radius -------- */ --urs-radius-sm: 4px; --urs-radius-md: 8px; --urs-radius-lg: 12px; --urs-radius-xl: 16px; --urs-radius-pill: 999px; /* -------- Elevation (shadows suaves pra tema escuro) -------- */ --urs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --urs-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --urs-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); --urs-shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.8); /* -------- Typography -------- */ --urs-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Helvetica, Arial, sans-serif; --urs-font-display: var(--urs-font-sans); --urs-font-size-micro: 11px; --urs-font-size-xs: 13px; --urs-font-size-sm: 14px; --urs-font-size-base: 16px; --urs-font-size-lg: 18px; --urs-font-size-xl: 22px; --urs-font-size-2xl: 28px; --urs-font-size-3xl: 36px; --urs-font-size-display: clamp(40px, 5vw, 64px); --urs-font-weight-regular: 400; --urs-font-weight-medium: 500; --urs-font-weight-semibold: 600; --urs-font-weight-bold: 700; --urs-font-weight-black: 900; --urs-line-height-tight: 1.1; --urs-line-height-snug: 1.25; --urs-line-height-normal: 1.5; --urs-letter-spacing-tight: -0.02em; --urs-letter-spacing-wide: 0.04em; --urs-letter-spacing-uppercase: 0.08em; /* -------- Layout -------- */ --urs-container-max: 1440px; --urs-container-padding: clamp(16px, 4vw, 64px); --urs-grid-gap: 24px; /* -------- Motion -------- */ --urs-transition-fast: 150ms ease-out; --urs-transition-base: 250ms ease-out; --urs-transition-slow: 400ms ease-out; --urs-transition-hero: 600ms ease; --urs-ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1); --urs-ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1); --urs-hover-lift: 4px; --urs-hover-scale: 1.03; /* -------- Z-index scale -------- */ --urs-z-base: 1; --urs-z-rail-arrow: 10; --urs-z-sticky: 100; --urs-z-overlay: 900; --urs-z-popover: 1000; --urs-z-modal: 1100; --urs-z-toast: 1200; /* -------- Value Props tokens -------- */ --urs-vp-icon-size: 56px; --urs-vp-item-pad: var(--urs-space-8); --urs-vp-gap: var(--urs-space-6); } /* ========================================================================= Reduced motion — desliga animacoes custom ========================================================================= */ @media (prefers-reduced-motion: reduce) { :root { --urs-transition-fast: 0ms; --urs-transition-base: 0ms; --urs-transition-slow: 0ms; --urs-transition-hero: 0ms; --urs-hover-scale: 1; --urs-hover-lift: 0px; } } /* ========================================================================= Utilitarios base (usados por componentes nos sprints seguintes) ========================================================================= */ .urs-container { max-width: var(--urs-container-max); margin-inline: auto; padding-inline: var(--urs-container-padding); } .urs-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Focus ring consistente */ .urs-focus-ring:focus-visible, [data-urs-focus]:focus-visible { outline: 2px solid var(--urs-color-focus-ring); outline-offset: 2px; border-radius: var(--urs-radius-sm); } /* ========================================================================= Tier Card — Prime Video 6.6 (Media Card) + 6.4.1 (Primary CTA) Monocromatico P&B (zero accent colorido — brand Leonardo). ========================================================================= */ .urs-tier-card { position: relative; display: flex; flex-direction: column; gap: var(--urs-space-5); padding: 40px 32px; background-color: var(--urs-color-bg-surface); border: 1px solid var(--urs-color-border); border-radius: var(--urs-radius-md); color: var(--urs-color-text-primary); font-family: var(--urs-font-sans); box-shadow: var(--urs-shadow-sm); transition: transform var(--urs-transition-base) var(--urs-ease-out-cubic), box-shadow var(--urs-transition-base) var(--urs-ease-out-cubic), border-color var(--urs-transition-base) var(--urs-ease-out-cubic); isolation: isolate; } .urs-tier-card:hover, .urs-tier-card:focus-within { transform: translateY(calc(var(--urs-hover-lift) * -1)) scale(var(--urs-hover-scale)); box-shadow: var(--urs-shadow-md); border-color: var(--urs-color-border-strong); } /* Featured variant — animated conic-gradient border + glow. Defined in mosaic section below for specificity. Base overrides here. */ .urs-tier-card--featured:hover, .urs-tier-card--featured:focus-within { transform: translateY(calc(-4px + (var(--urs-hover-lift) * -1))) scale(var(--urs-hover-scale)); box-shadow: var(--urs-shadow-lg), 0 0 48px var(--urs-color-accent-glow); } .urs-tier-card--coming-soon { opacity: 0.7; pointer-events: auto; } .urs-tier-card--coming-soon .urs-tier-card__pill, .urs-tier-card--coming-soon .urs-tier-card__benefits { opacity: 0.5; } .urs-tier-card--coming-soon:hover, .urs-tier-card--coming-soon:focus-within { transform: none; box-shadow: var(--urs-shadow-sm); border-color: var(--urs-color-border); } .urs-tier-card__badge { position: absolute; top: var(--urs-space-3); right: var(--urs-space-3); padding: var(--urs-space-1) var(--urs-space-2); background-color: var(--urs-overlay-selected); border-radius: var(--urs-radius-sm); color: var(--urs-color-text-primary); font-size: var(--urs-font-size-micro); font-weight: var(--urs-font-weight-bold); letter-spacing: var(--urs-letter-spacing-uppercase); text-transform: uppercase; line-height: 1; z-index: var(--urs-z-base); } .urs-tier-card__badge--featured { top: calc(var(--urs-space-3) * -1); right: 50%; transform: translateX(50%); padding: var(--urs-space-2) var(--urs-space-4); background-color: var(--urs-color-accent); color: #000000; border-radius: var(--urs-radius-pill); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 24px var(--urs-color-accent-glow-soft); } .urs-tier-card__image { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--urs-radius-md); margin-bottom: var(--urs-space-4); } .urs-tier-card__image img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.85); transition: filter 400ms var(--urs-ease-out-cubic); } .urs-tier-card:hover .urs-tier-card__image img { filter: brightness(1); } .urs-tier-card__header { display: flex; flex-direction: column; gap: var(--urs-space-3); } .urs-tier-card__eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: var(--urs-font-size-xs); font-weight: var(--urs-font-weight-semibold); letter-spacing: var(--urs-letter-spacing-uppercase); text-transform: uppercase; color: var(--urs-color-text-secondary); } /* Pricing pill — glass effect, unified $/amount/interval baseline */ .urs-tier-card__pill { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; min-height: 56px; padding: var(--urs-space-2) var(--urs-space-4); background-color: rgba(255, 255, 255, 0.04); border: 1px solid var(--urs-color-border); border-radius: var(--urs-radius-pill); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--urs-color-text-primary); line-height: var(--urs-line-height-tight); } .urs-tier-card--featured .urs-tier-card__pill { background-color: rgba(255, 255, 255, 0.08); border-color: var(--urs-color-border-strong); border-bottom: 1px solid var(--urs-color-accent-glow-soft); } .urs-tier-card__pill--free { padding: var(--urs-space-2) var(--urs-space-5); } .urs-tier-card__currency { align-self: flex-start; margin-top: 0.18em; font-size: var(--urs-font-size-lg); font-weight: var(--urs-font-weight-semibold); color: var(--urs-color-text-secondary); } .urs-tier-card__amount { font-size: var(--urs-font-size-3xl); font-weight: var(--urs-font-weight-black); letter-spacing: var(--urs-letter-spacing-tight); font-variant-numeric: tabular-nums; } .urs-tier-card__free { font-size: var(--urs-font-size-lg); font-weight: var(--urs-font-weight-bold); letter-spacing: var(--urs-letter-spacing-wide); text-transform: uppercase; color: var(--urs-color-text-primary); } .urs-tier-card__interval { font-size: var(--urs-font-size-base); font-weight: var(--urs-font-weight-medium); color: var(--urs-color-text-muted); letter-spacing: 0; } .urs-tier-card__benefits { list-style: none; padding: var(--urs-space-5) 0 0; margin: var(--urs-space-2) 0 0; border-top: 1px solid var(--urs-color-border); display: flex; flex-direction: column; gap: var(--urs-space-3); flex: 1 1 auto; } .urs-tier-card__benefit { display: flex; align-items: flex-start; gap: var(--urs-space-3); font-size: var(--urs-font-size-base); line-height: 1.5; color: var(--urs-color-text-secondary); } .urs-tier-card__benefit::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 0.12em; border-radius: 50%; background-color: color-mix(in srgb, var(--urs-tier-accent, var(--urs-color-accent)) 16%, transparent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 11px 11px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--urs-tier-accent, var(--urs-color-accent)) 34%, transparent); } .urs-tier-card__footer { margin-top: auto; padding-top: var(--urs-space-5); } .urs-tier-card__cta { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: var(--urs-space-3) var(--urs-space-5); background-color: var(--urs-color-button-invert-bg); border: 0; border-radius: var(--urs-radius-md); color: var(--urs-color-button-invert-text); font-family: inherit; font-size: var(--urs-font-size-sm); font-weight: var(--urs-font-weight-bold); letter-spacing: var(--urs-letter-spacing-wide); text-transform: uppercase; text-decoration: none; cursor: pointer; overflow: hidden; transition: background-color var(--urs-transition-base) var(--urs-ease-out-cubic), transform var(--urs-transition-base) var(--urs-ease-out-cubic), box-shadow var(--urs-transition-base) var(--urs-ease-out-cubic); } /* Sheen sweep — sutil, monocromatico, ativa no hover */ .urs-tier-card__cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 120deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70% ); transform: translateX(-100%); transition: transform var(--urs-transition-slow) var(--urs-ease-out-cubic); pointer-events: none; } .urs-tier-card__cta:hover, .urs-tier-card__cta:focus-visible { background-color: var(--urs-color-button-invert-hover-bg); transform: scale(1.02); box-shadow: 0 8px 24px rgba(255, 255, 255, 0.12); } .urs-tier-card__cta:hover::before { transform: translateX(100%); } .urs-tier-card__cta:focus-visible { outline: 2px solid var(--urs-color-accent); outline-offset: 3px; } .urs-tier-card__cta:active { transform: scale(0.98); } .urs-tier-card__cta[disabled], .urs-tier-card__cta[aria-disabled="true"] { background-color: var(--urs-overlay-selected); color: var(--urs-color-text-disabled); cursor: not-allowed; } .urs-tier-card__cta[disabled]:hover { background-color: var(--urs-overlay-selected); } /* ========================================================================= Tier Wall — grid responsive (used in D5 section) ========================================================================= */ .urs-tiers-wall { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--urs-grid-gap); padding-block: var(--urs-space-10); } @media (min-width: 960px) { .urs-tiers-wall { grid-template-columns: repeat(3, minmax(280px, 380px)); justify-content: center; gap: var(--urs-space-8); } } .urs-tiers-wall__header { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--urs-space-2); margin-bottom: var(--urs-space-4); } .urs-tiers-wall__title { margin: 0; font-size: var(--urs-font-size-3xl); font-weight: var(--urs-font-weight-bold); letter-spacing: var(--urs-letter-spacing-tight); color: var(--urs-color-text-primary); } .urs-tiers-wall__subtitle { margin: 0; font-size: var(--urs-font-size-lg); color: var(--urs-color-text-secondary); line-height: var(--urs-line-height-normal); } /* ========================================================================= Hero Club — Prime Video cinematic. Full-bleed bg + scrim + bottom-left content. ========================================================================= */ .urs-hero-club { position: relative; width: 100%; overflow: hidden; background-color: var(--urs-color-bg-base); color: var(--urs-color-text-primary); isolation: isolate; } .urs-hero-club--medium { min-height: clamp(420px, 60vh, 680px); } .urs-hero-club--large { min-height: clamp(520px, 75vh, 820px); } .urs-hero-club--xlarge { min-height: clamp(620px, 90vh, 960px); } .urs-hero-club__media { position: absolute; inset: 0; z-index: 0; } .urs-hero-club__bg { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .urs-hero-club__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0) 80%), linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 60%); pointer-events: none; } .urs-hero-club__inner { position: relative; z-index: 2; display: flex; align-items: center; min-height: inherit; padding-block: var(--urs-space-16); } .urs-hero-club--medium .urs-hero-club__inner { min-height: clamp(420px, 60vh, 680px); } .urs-hero-club--large .urs-hero-club__inner { min-height: clamp(520px, 75vh, 820px); } .urs-hero-club--xlarge .urs-hero-club__inner { min-height: clamp(620px, 90vh, 960px); } .urs-hero-club__content { display: flex; flex-direction: column; gap: var(--urs-space-5); max-width: min(720px, 90%); } @media (min-width: 1024px) { .urs-hero-club__content { max-width: min(720px, 55%); } } .urs-hero-club__eyebrow { margin: 0; font-family: var(--urs-font-sans); font-size: var(--urs-font-size-xs); font-weight: var(--urs-font-weight-bold); letter-spacing: var(--urs-letter-spacing-uppercase); text-transform: uppercase; color: var(--urs-color-text-secondary); } .urs-hero-club__headline { margin: 0; font-family: var(--urs-font-display); font-size: clamp(40px, 7vw, 88px); font-weight: var(--urs-font-weight-black); letter-spacing: -0.02em; line-height: var(--urs-line-height-tight); color: var(--urs-color-text-primary); } .urs-hero-club__subheadline { margin: 0; max-width: 560px; font-size: clamp(15px, 1.4vw, 19px); font-weight: var(--urs-font-weight-regular); line-height: var(--urs-line-height-normal); color: var(--urs-color-text-secondary); } .urs-hero-club__actions { display: flex; flex-wrap: wrap; gap: var(--urs-space-4); align-items: center; margin-top: var(--urs-space-3); } .urs-hero-club__cta-secondary { display: inline-flex; align-items: center; gap: var(--urs-space-2); min-height: 56px; padding: var(--urs-space-3) var(--urs-space-6); background-color: var(--urs-color-button-ghost-bg); border: 1px solid var(--urs-color-button-ghost-border); border-radius: var(--urs-radius-md); color: var(--urs-color-text-primary); font-family: inherit; font-size: var(--urs-font-size-base); font-weight: var(--urs-font-weight-semibold); text-decoration: none; cursor: pointer; transition: background-color var(--urs-transition-base) var(--urs-ease-out-cubic), border-color var(--urs-transition-base) var(--urs-ease-out-cubic); } .urs-hero-club__cta-secondary:hover, .urs-hero-club__cta-secondary:focus-visible { background-color: var(--urs-color-button-ghost-hover); border-color: var(--urs-color-text-secondary); } .urs-hero-club__cta-secondary:focus-visible { outline: 2px solid var(--urs-color-accent); outline-offset: 4px; } .urs-hero-club__microcopy { margin: 0; font-size: var(--urs-font-size-xs); font-weight: var(--urs-font-weight-medium); color: var(--urs-color-text-muted); letter-spacing: 0.04em; } .urs-hero-club__cta { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: var(--urs-space-3) var(--urs-space-8); background-color: var(--urs-color-button-invert-bg); border: 0; border-radius: var(--urs-radius-md); color: var(--urs-color-button-invert-text); font-family: inherit; font-size: var(--urs-font-size-base); font-weight: var(--urs-font-weight-bold); letter-spacing: var(--urs-letter-spacing-wide); text-transform: uppercase; text-decoration: none; cursor: pointer; overflow: hidden; transition: background-color var(--urs-transition-base) var(--urs-ease-out-cubic), transform var(--urs-transition-base) var(--urs-ease-out-cubic), box-shadow var(--urs-transition-base) var(--urs-ease-out-cubic); } .urs-hero-club__cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 120deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70% ); transform: translateX(-100%); transition: transform var(--urs-transition-slow) var(--urs-ease-out-cubic); pointer-events: none; } .urs-hero-club__cta:hover, .urs-hero-club__cta:focus-visible { background-color: var(--urs-color-button-invert-hover-bg); transform: scale(1.03); box-shadow: 0 12px 32px rgba(255, 255, 255, 0.16), 0 0 24px var(--urs-color-accent-glow); } .urs-hero-club__cta:hover::before { transform: translateX(100%); } .urs-hero-club__cta:focus-visible { outline: 2px solid var(--urs-color-accent); outline-offset: 4px; } .urs-hero-club__cta:active { transform: scale(0.98); } /* ========================================================================= Hero — 60/40 split + featured album arc ========================================================================= */ transform: none !important; transition: none !important; } } /* ========================================================================= Glass surface utility (used by value-props items) ========================================================================= */ .urs-glass { background-color: rgba(255, 255, 255, 0.04); border: 1px solid var(--urs-color-border); border-radius: var(--urs-radius-lg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ========================================================================= Value Props — grid of benefit cards. Used after tier wall. ========================================================================= */ .urs-value-props { padding-block: var(--urs-vp-pad, 96px); background-color: var(--urs-color-bg-base); color: var(--urs-color-text-primary); } .urs-value-props__header { display: flex; flex-direction: column; gap: var(--urs-space-3); margin-bottom: var(--urs-space-10); max-width: 720px; } .urs-value-props__eyebrow { margin: 0; font-size: var(--urs-font-size-xs); font-weight: var(--urs-font-weight-bold); letter-spacing: var(--urs-letter-spacing-uppercase); text-transform: uppercase; color: var(--urs-color-text-secondary); } .urs-value-props__title { margin: 0; font-family: var(--urs-font-display); font-size: clamp(28px, 7vw, 32px); font-weight: var(--urs-font-weight-black); letter-spacing: var(--urs-letter-spacing-tight); line-height: var(--urs-line-height-tight); color: var(--urs-color-text-primary); } .urs-value-props__lede { margin: 0; font-size: var(--urs-font-size-base); line-height: var(--urs-line-height-normal); color: var(--urs-color-text-secondary); } .urs-value-props__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 16px; } .urs-value-props__item { display: flex; flex-direction: column; gap: var(--urs-space-3); padding: var(--urs-vp-item-pad); transition: transform var(--urs-transition-base) var(--urs-ease-out-cubic), border-color var(--urs-transition-base) var(--urs-ease-out-cubic), background-color var(--urs-transition-base) var(--urs-ease-out-cubic); } .urs-value-props__item:hover { transform: translateY(calc(var(--urs-hover-lift) * -1)); border-color: var(--urs-color-border-strong); background-color: rgba(255, 255, 255, 0.06); } .urs-value-props__item:focus-within { outline: 2px solid var(--urs-color-accent); outline-offset: 4px; } .urs-value-props__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--urs-vp-icon-size); height: var(--urs-vp-icon-size); border-radius: var(--urs-radius-md); background-color: transparent; color: var(--urs-color-text-primary); } .urs-value-props__icon-emoji { font-size: 22px; line-height: 1; } .urs-value-props__item-title { margin: 0; font-size: var(--urs-font-size-lg); font-weight: var(--urs-font-weight-bold); letter-spacing: var(--urs-letter-spacing-tight); color: var(--urs-color-text-primary); } .urs-value-props__item-body { margin: 0; font-size: var(--urs-font-size-sm); line-height: var(--urs-line-height-normal); color: var(--urs-color-text-secondary); } @media (min-width: 768px) { .urs-value-props { padding-block: 72px; } .urs-value-props__title { font-size: 36px; } .urs-value-props__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } } @media (min-width: 1024px) { .urs-value-props { padding-block: var(--urs-vp-pad, 96px); } .urs-value-props__title { font-size: clamp(40px, 4vw, 56px); } .urs-value-props__grid { grid-template-columns: repeat(var(--urs-vp-cols, 4), minmax(0, 1fr)); gap: var(--urs-vp-gap); } } @media (max-width: 767px) { .urs-value-props { padding-block: 56px; } } /* ========================================================================= FAQ — native
/ accordion. ========================================================================= */ .urs-faq { padding-block: 48px; background-color: var(--urs-color-bg-base); color: var(--urs-color-text-primary); } .urs-faq__inner { max-width: 720px; } .urs-faq--two-column .urs-faq__inner { max-width: var(--urs-container-max); } .urs-faq__header { display: flex; flex-direction: column; gap: var(--urs-space-2); margin-bottom: var(--urs-space-10); } .urs-faq__eyebrow { margin: 0; font-size: var(--urs-font-size-xs); font-weight: var(--urs-font-weight-bold); letter-spacing: var(--urs-letter-spacing-uppercase); text-transform: uppercase; color: var(--urs-color-text-secondary); } .urs-faq__title { margin: 0; font-family: var(--urs-font-display); font-size: clamp(32px, 4vw, 48px); font-weight: var(--urs-font-weight-black); letter-spacing: var(--urs-letter-spacing-tight); line-height: var(--urs-line-height-tight); color: var(--urs-color-text-primary); } .urs-faq__list { display: grid; grid-template-columns: 1fr; gap: 0; } .urs-faq__item { border-bottom: 1px solid var(--urs-color-border); scroll-margin-top: 80px; } .urs-faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--urs-space-4); padding-block: var(--urs-space-6); cursor: pointer; list-style: none; transition: background-color var(--urs-transition-fast) ease-out; } .urs-faq__q::-webkit-details-marker { display: none; } .urs-faq__q:hover { background-color: var(--urs-overlay-hover); } .urs-faq__q:focus-visible { outline: 2px solid var(--urs-color-accent); outline-offset: 2px; border-radius: var(--urs-radius-sm); } .urs-faq__q-text { font-size: clamp(16px, 1.2vw, 18px); font-weight: var(--urs-font-weight-semibold); color: var(--urs-color-text-primary); line-height: var(--urs-line-height-snug); } .urs-faq__icon { position: relative; flex: 0 0 auto; width: 18px; height: 18px; transition: transform 200ms var(--urs-ease-out-cubic); } .urs-faq__icon::before, .urs-faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background-color: currentColor; transform: translate(-50%, -50%); border-radius: 1px; } .urs-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 200ms var(--urs-ease-out-cubic); } .urs-faq__item[open] .urs-faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); } .urs-faq__a { padding-bottom: var(--urs-space-6); padding-right: var(--urs-space-8); font-size: 16px; line-height: 1.6; color: var(--urs-color-text-secondary); } .urs-faq__a p { margin: 0 0 var(--urs-space-3); } .urs-faq__a p:last-child { margin-bottom: 0; } .urs-faq__a a { color: var(--urs-color-text-primary); text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .urs-faq__icon, .urs-faq__icon::after { transition: none; } } @media (min-width: 768px) { .urs-faq { padding-block: 72px; } } @media (min-width: 1024px) { .urs-faq { padding-block: 96px; } .urs-faq--single-column .urs-faq__inner { max-width: 880px; } .urs-faq--two-column .urs-faq__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } } /* ========================================================================= Footer CTA — full-bleed closer with bg image, scrim, single CTA. ========================================================================= */ .urs-footer-cta { position: relative; overflow: hidden; isolation: isolate; min-height: var(--urs-fcta-min-h, 520px); padding-block: 64px; background-color: var(--urs-color-bg-base); color: var(--urs-color-text-primary); display: flex; align-items: center; justify-content: center; text-align: center; } .urs-footer-cta__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .urs-footer-cta__img, .urs-footer-cta__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; animation: urs-ken-burns 12s var(--urs-ease-in-out-cubic) infinite alternate; } @keyframes urs-ken-burns { from { transform: scale(1); } to { transform: scale(1.04); } } @media (prefers-reduced-motion: reduce) { .urs-footer-cta__img, .urs-footer-cta__media img { animation: none; } } .urs-footer-cta__scrim { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0, 0, 0, var(--urs-fcta-scrim-alpha, 0.75)) 0%, rgba(0, 0, 0, 1) 100% ); pointer-events: none; } .urs-footer-cta__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--urs-space-4); max-width: 720px; padding-block: 0; } .urs-footer-cta__eyebrow { margin: 0; font-size: var(--urs-font-size-xs); font-weight: var(--urs-font-weight-bold); letter-spacing: var(--urs-letter-spacing-uppercase); text-transform: uppercase; color: var(--urs-color-text-secondary); } .urs-footer-cta__title { margin: 0; font-family: var(--urs-font-display); font-size: clamp(32px, 6vw, 52px); font-weight: var(--urs-font-weight-black); letter-spacing: var(--urs-letter-spacing-tight); line-height: var(--urs-line-height-tight); color: var(--urs-color-text-primary); } .urs-footer-cta__lede { margin: 0; font-size: var(--urs-font-size-base); line-height: var(--urs-line-height-normal); color: var(--urs-color-text-secondary); max-width: 560px; } .urs-footer-cta__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: var(--urs-space-3) var(--urs-space-8); background-color: var(--urs-color-button-invert-bg); border: 0; border-radius: var(--urs-radius-md); color: var(--urs-color-button-invert-text); font-family: inherit; font-size: var(--urs-font-size-base); font-weight: var(--urs-font-weight-bold); letter-spacing: var(--urs-letter-spacing-wide); text-transform: uppercase; text-decoration: none; cursor: pointer; overflow: hidden; margin-top: var(--urs-space-3); transition: background-color var(--urs-transition-base) var(--urs-ease-out-cubic), transform var(--urs-transition-base) var(--urs-ease-out-cubic), box-shadow var(--urs-transition-base) var(--urs-ease-out-cubic); } .urs-footer-cta__btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 120deg, transparent 30%, rgba(0, 0, 0, 0.22) 50%, transparent 70% ); transform: translateX(-100%); transition: transform var(--urs-transition-slow) var(--urs-ease-out-cubic); pointer-events: none; } .urs-footer-cta__btn:hover, .urs-footer-cta__btn:focus-visible { background-color: var(--urs-color-button-invert-hover-bg); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 24px var(--urs-color-accent-glow); } .urs-footer-cta__btn:hover::before { transform: translateX(100%); } .urs-footer-cta__btn:focus-visible { outline: 2px solid var(--urs-color-accent); outline-offset: 3px; } .urs-footer-cta__btn:active { transform: translateY(-2px) scale(0.99); } .urs-footer-cta__btn span { position: relative; z-index: 1; } .urs-footer-cta__microcopy { margin: 0; font-size: 13px; color: var(--urs-color-text-muted); } @media (min-width: 768px) { .urs-footer-cta { min-height: 480px; padding-block: 88px; } .urs-footer-cta__title { font-size: 52px; } .urs-footer-cta__btn { width: auto; min-width: 280px; } } @media (min-width: 1024px) { .urs-footer-cta { min-height: var(--urs-fcta-min-h, 520px); padding-block: 120px; } .urs-footer-cta__title { font-size: clamp(40px, 5vw, 64px); } } #tiers { scroll-margin-top: 80px; } /* ========================================================================= Sticky CTA — pill desktop (top-right), bar mobile (bottom). Controlled by custom-clube.js IntersectionObserver. ========================================================================= */ .urs-sticky-cta { position: fixed; top: 24px; right: 24px; z-index: var(--urs-z-sticky); display: inline-flex; align-items: center; justify-content: center; height: 44px; padding-inline: 20px; background-color: var(--urs-color-button-invert-bg); color: var(--urs-color-button-invert-text); border: 0; border-radius: var(--urs-radius-pill); box-shadow: var(--urs-shadow-md); font-family: var(--urs-font-sans); font-size: var(--urs-font-size-sm); font-weight: var(--urs-font-weight-bold); text-decoration: none; text-transform: uppercase; letter-spacing: var(--urs-letter-spacing-wide); opacity: 0; transform: translateY(-12px); pointer-events: none; transition: opacity 200ms var(--urs-ease-out-cubic), transform 200ms var(--urs-ease-out-cubic); } .urs-sticky-cta--visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .urs-sticky-cta:hover { background-color: var(--urs-color-button-invert-hover-bg); box-shadow: var(--urs-shadow-lg); } .urs-sticky-cta:focus-visible { outline: 2px solid var(--urs-color-accent); outline-offset: 3px; } @media (max-width: 799px) { .urs-sticky-cta { top: auto; bottom: 0; right: 0; left: 0; width: 100%; height: 56px; border-radius: 0; padding-bottom: env(safe-area-inset-bottom, 0); } } /* ========================================================================= Billing toggle — monthly / annual radio group. ========================================================================= */ .urs-billing-toggle { display: inline-flex; gap: 0; padding: 4px; background-color: var(--urs-color-bg-surface-2); border: 1px solid var(--urs-color-border); border-radius: var(--urs-radius-pill); margin-top: var(--urs-space-4); align-self: flex-start; } .urs-billing-toggle__btn { position: relative; padding: var(--urs-space-2) var(--urs-space-5); background: transparent; border: 0; border-radius: var(--urs-radius-pill); color: var(--urs-color-text-secondary); font-family: var(--urs-font-sans); font-size: var(--urs-font-size-sm); font-weight: var(--urs-font-weight-semibold); cursor: pointer; transition: background-color var(--urs-transition-fast), color var(--urs-transition-fast); } .urs-billing-toggle__btn--active { background-color: var(--urs-color-accent); color: #000000; } .urs-billing-toggle__btn:hover:not(.urs-billing-toggle__btn--active) { background-color: var(--urs-overlay-hover); color: var(--urs-color-text-primary); } .urs-billing-toggle__btn:focus-visible { outline: 2px solid var(--urs-color-focus-ring); outline-offset: 2px; } .urs-billing-toggle__badge { display: inline-block; margin-left: 6px; padding: 2px 6px; background-color: var(--urs-color-highlight); color: #ffffff; font-size: 10px; font-weight: var(--urs-font-weight-bold); letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--urs-radius-sm); vertical-align: middle; line-height: 1.2; } .urs-billing-annual-badge { display: block; margin-top: 4px; font-size: var(--urs-font-size-micro); font-weight: var(--urs-font-weight-medium); color: var(--urs-color-text-muted); letter-spacing: 0; text-transform: none; } /* ========================================================================= Tiers wall — eyebrow + comparison table + repeat CTA. ========================================================================= */ .urs-tiers-wall__eyebrow { margin: 0; font-size: var(--urs-font-size-sm); font-weight: var(--urs-font-weight-bold); letter-spacing: 0.18em; text-transform: uppercase; color: var(--urs-color-accent); } .urs-tiers-comparison { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--urs-color-border); } .urs-tiers-comparison__heading { margin: 0 0 var(--urs-space-4); font-size: var(--urs-font-size-lg); font-weight: var(--urs-font-weight-bold); color: var(--urs-color-text-primary); letter-spacing: var(--urs-letter-spacing-tight); } .urs-tiers-comparison__grid { margin-top: var(--urs-space-6); font-size: var(--urs-font-size-base); } .urs-tiers-comparison__row { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; border-bottom: 1px solid var(--urs-color-border); align-items: center; } .urs-tiers-comparison__row:hover:not(.urs-tiers-comparison__row--head) { background-color: var(--urs-color-bg-surface-2); } .urs-tiers-comparison__row--head { border-bottom: 2px solid var(--urs-color-border); } .urs-tiers-comparison__cell { padding: 15px 16px; text-align: center; line-height: 1.4; } .urs-tiers-comparison__cell--label { text-align: left; font-weight: var(--urs-font-weight-semibold); color: var(--urs-color-text-primary); } .urs-tiers-comparison__cell--tier { font-weight: var(--urs-font-weight-bold); color: var(--urs-color-text-primary); padding-bottom: var(--urs-space-4); } .urs-check { color: var(--urs-color-accent); font-weight: var(--urs-font-weight-bold); font-size: 18px; } .urs-tiers-dash { color: var(--urs-color-text-muted); font-size: 18px; display: inline !important; background: transparent !important; width: auto !important; height: auto !important; } .urs-tiers-wall__repeat-cta { grid-column: 1 / -1; text-align: center; margin-top: var(--urs-space-8); } .urs-tiers-wall__repeat-btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--urs-space-3) var(--urs-space-6); border: 0; border-radius: var(--urs-radius-pill); background-color: var(--urs-color-accent); color: #ffffff; font-family: var(--urs-font-sans); font-size: var(--urs-font-size-sm); font-weight: var(--urs-font-weight-semibold); text-decoration: none; transition: background-color var(--urs-transition-fast), color var(--urs-transition-fast); } .urs-tiers-wall__repeat-btn:hover { background-color: var(--urs-color-accent-hover, #C084FC); color: #ffffff; } .urs-tiers-wall__repeat-btn:focus-visible { outline: 2px solid var(--urs-color-focus-ring); outline-offset: 3px; } /* ========================================================================= Fade-up animation utility — applied via data-urs-fade-up. ========================================================================= */ [data-urs-fade-up] { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--urs-ease-out-cubic), transform 600ms var(--urs-ease-out-cubic); } [data-urs-fade-up].urs-fade-up--visible { opacity: 1; transform: translateY(0); } /* ---------- B9: Follow Button ---------- */ .urs-follow-btn { display: inline-flex; align-items: center; gap: var(--urs-space-2); padding: 10px 24px; border: 1px solid var(--urs-color-border); border-radius: var(--urs-radius-full); background: transparent; color: var(--urs-color-text-primary); font-family: var(--urs-font-sans); font-size: var(--urs-font-size-sm); font-weight: var(--urs-font-weight-semibold); cursor: pointer; transition: background-color var(--urs-transition-fast), border-color var(--urs-transition-fast), color var(--urs-transition-fast); } .urs-follow-btn:hover { border-color: var(--urs-color-accent); color: var(--urs-color-accent); } .urs-follow-btn[aria-pressed="true"] { background-color: var(--urs-color-accent); border-color: var(--urs-color-accent); color: #ffffff; } .urs-follow-btn__icon--active { display: none; } .urs-follow-btn[aria-pressed="true"] .urs-follow-btn__icon--default { display: none; } .urs-follow-btn[aria-pressed="true"] .urs-follow-btn__icon--active { display: block; } .urs-follow-btn[aria-pressed="true"] [data-label-default] { display: none; } .urs-follow-btn[aria-pressed="true"] [data-label-active] { display: inline !important; } .urs-follow-btn:focus-visible { outline: 2px solid var(--urs-color-focus-ring); outline-offset: 2px; } /* ---------- B10: Preview Player ---------- */ .urs-preview-player { position: fixed; inset-inline: 0; bottom: 0; z-index: 1100; background-color: var(--urs-color-bg-surface-2); border-top: 1px solid var(--urs-color-border); padding: var(--urs-space-3) 0; transform: translateY(100%); transition: transform var(--urs-transition-base) var(--urs-ease-out-cubic); } .urs-preview-player[data-urs-player-visible] { transform: translateY(0); } .urs-preview-player__inner { display: flex; align-items: center; gap: var(--urs-space-4); } .urs-preview-player__play, .urs-preview-player__close { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border: none; border-radius: 50%; background: transparent; color: var(--urs-color-text-primary); cursor: pointer; transition: background-color var(--urs-transition-fast); } .urs-preview-player__play:hover, .urs-preview-player__close:hover { background-color: rgba(255, 255, 255, 0.08); } .urs-preview-player__play:focus-visible, .urs-preview-player__close:focus-visible { outline: 2px solid var(--urs-color-focus-ring); outline-offset: 2px; } .urs-preview-player__track { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .urs-preview-player__title { font-size: var(--urs-font-size-sm); font-weight: var(--urs-font-weight-semibold); color: var(--urs-color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .urs-preview-player__progress { width: 100%; height: 3px; border-radius: 2px; background-color: rgba(255, 255, 255, 0.12); overflow: hidden; } .urs-preview-player__bar { height: 100%; width: var(--urs-preview-progress, 0%); background-color: var(--urs-color-accent); border-radius: 2px; transition: transform 200ms linear; transform-origin: left; transform: scaleX(var(--urs-preview-progress-pct, 0)); } /* ---------- B1: Hero Mosaic (Apple TV+ 3D perspective) ---------- */ @keyframes ursMosaicScrollUp { from { transform: translateY(0); } to { transform: translateY(-50%); } } @keyframes ursMosaicScrollDown { from { transform: translateY(-50%); } to { transform: translateY(0); } } @keyframes ursCtaPulse { 0%, 100% { box-shadow: 0 0 0 0 var(--urs-color-highlight-glow); } 50% { box-shadow: 0 0 24px 8px var(--urs-color-highlight-glow); } } @keyframes ursFeaturedBorderSpin { to { --urs-border-angle: 360deg; } } @keyframes ursBadgePulse { 0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 24px var(--urs-color-accent-glow-soft); } 50% { box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 40px var(--urs-color-accent-glow); } } @media (prefers-reduced-motion: reduce) { [data-urs-fade-up] { opacity: 1; transform: none; transition: none; } .urs-sticky-cta { transition: none; } .urs-hero-club__cta { animation: none; } .urs-tier-card--featured::before { animation: none; } .urs-tier-card__badge--featured { animation: none; } .urs-tier-card__benefit { opacity: 1; transform: none; animation: none; } .urs-preview-player { transition: none; } .urs-follow-btn { transition: none; } } /* ========================================================================= Differentiator Banner — 3-column pillars with Lordicons. ========================================================================= */ .urs-diff__pillars { display: grid; grid-template-columns: 1fr; gap: var(--urs-space-6); margin-top: var(--urs-space-10); width: 100%; max-width: 1200px; } .urs-diff__pillar { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--urs-space-3); } .urs-diff__pillar-icon { display: flex; align-items: center; justify-content: center; margin-bottom: var(--urs-space-2); } .urs-diff__pillar-label { margin: 0; font-size: var(--urs-font-size-xl); font-weight: 800; letter-spacing: -0.01em; color: var(--urs-color-text-primary); } .urs-diff__pillar-proof { margin: 0; font-size: 15px; font-weight: var(--urs-font-weight-medium); line-height: 1.5; color: var(--urs-color-text-secondary); max-width: 36ch; } @container (min-width: 800px) { .urs-diff__pillars { grid-template-columns: repeat(3, 1fr); gap: var(--urs-space-8); } } @container (max-width: 400px) { .urs-diff__pillar-icon .urs-lucide { width: 64px; height: 64px; } .urs-diff__pillar-label { font-size: var(--urs-font-size-lg); } } /* ========================================================================= Footer CTA — tier pricing strip. ========================================================================= */ .urs-footer-cta__icon { display: flex; align-items: center; justify-content: center; margin-bottom: var(--urs-space-2); } .urs-footer-cta__tier-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--urs-space-3); margin-top: var(--urs-space-4); } .urs-footer-cta__tier-pill { display: inline-flex; align-items: center; padding: var(--urs-space-2) var(--urs-space-4); border: 1px solid var(--urs-color-border); border-radius: var(--urs-radius-pill); color: var(--urs-color-text-secondary); font-size: var(--urs-font-size-sm); font-weight: var(--urs-font-weight-semibold); text-decoration: none; transition: background-color var(--urs-transition-fast), color var(--urs-transition-fast), border-color var(--urs-transition-fast); } .urs-footer-cta__tier-pill:hover { background-color: var(--urs-color-button-invert-bg); color: var(--urs-color-button-invert-text); border-color: var(--urs-color-button-invert-bg); } .urs-footer-cta__tier-pill:focus-visible { outline: 2px solid var(--urs-color-accent); outline-offset: 2px; } @container (max-width: 400px) { .urs-footer-cta__tier-strip { flex-direction: column; gap: var(--urs-space-2); } .urs-footer-cta__tier-pill { width: 100%; justify-content: center; } } /* ========================================================================= FAQ — Lordicon header icon. ========================================================================= */ .urs-faq__header-icon { display: flex; align-items: center; justify-content: center; margin-bottom: var(--urs-space-3); } /* --- Lucide icons — base styles --- */ .urs-lucide { display: inline-block; vertical-align: middle; flex-shrink: 0; } /* ========================================================================= MEMBER AREA — Dashboard pages (page.membro template) Prime Video / Netflix logged-in experience ========================================================================= */ /* --- Member Hero --- */ .urs-member-hero { position: relative; min-height: 50vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--urs-color-bg-base); } .urs-member-hero__mosaic { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 4px; opacity: 0.15; filter: saturate(0.6) brightness(0.5); } .urs-member-hero__mosaic-tile { overflow: hidden; border-radius: var(--urs-radius-sm); } .urs-member-hero__mosaic-img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; display: block; } .urs-member-hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 40%, rgba(0, 0, 0, 0.3) 100%), linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 60%); pointer-events: none; } .urs-member-hero__inner { position: relative; z-index: 2; width: 100%; padding-block: var(--urs-space-16) var(--urs-space-12); } .urs-member-hero__content { max-width: 680px; } .urs-member-hero__eyebrow { font-size: var(--urs-font-size-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--urs-color-accent); margin-bottom: var(--urs-space-3); } .urs-member-hero__headline { font-family: var(--urs-font-display); font-size: clamp(32px, 4vw, 52px); font-weight: 900; letter-spacing: -0.02em; line-height: var(--urs-line-height-tight); color: var(--urs-color-text-primary); margin: 0 0 var(--urs-space-4); } .urs-member-hero__subheadline { font-size: var(--urs-font-size-lg); color: var(--urs-color-text-secondary); line-height: var(--urs-line-height-normal); margin-bottom: var(--urs-space-8); } /* Stats strip */ .urs-member-hero__stats { display: flex; gap: var(--urs-space-8); margin-bottom: var(--urs-space-8); flex-wrap: wrap; } .urs-member-hero__stat { display: flex; align-items: center; gap: var(--urs-space-3); } .urs-member-hero__stat-content { display: flex; flex-direction: column; } .urs-member-hero__stat-value { font-size: var(--urs-font-size-xl); font-weight: 800; color: var(--urs-color-text-primary); line-height: 1; } .urs-member-hero__stat-label { font-size: var(--urs-font-size-xs); color: var(--urs-color-text-muted); font-weight: 500; } /* Member hero actions */ .urs-member-hero__actions { display: flex; align-items: center; gap: var(--urs-space-4); flex-wrap: wrap; } .urs-member-hero__cta { display: inline-flex; align-items: center; gap: var(--urs-space-2); height: 52px; padding: 0 var(--urs-space-8); background: var(--urs-color-button-invert-bg); color: var(--urs-color-button-invert-text); font-weight: 700; font-size: var(--urs-font-size-base); text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; border-radius: var(--urs-radius-pill); transition: background var(--urs-transition-base); } .urs-member-hero__cta:hover { background: var(--urs-color-button-invert-hover-bg); } .urs-member-hero__cta-secondary { display: inline-flex; align-items: center; height: 52px; padding: 0 var(--urs-space-6); background: var(--urs-color-button-ghost-bg); color: var(--urs-color-text-primary); border: 1px solid var(--urs-color-button-ghost-border); font-weight: 600; font-size: var(--urs-font-size-base); text-decoration: none; border-radius: var(--urs-radius-pill); transition: background var(--urs-transition-base); } .urs-member-hero__cta-secondary:hover { background: var(--urs-color-button-ghost-hover); } /* --- Member Catalog --- */ .urs-member-catalog { background: var(--urs-color-bg-base); padding-block: var(--urs-space-16); } .urs-member-catalog__header { margin-bottom: var(--urs-space-10); } .urs-member-catalog__eyebrow { font-size: var(--urs-font-size-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--urs-color-accent); margin-bottom: var(--urs-space-3); } .urs-member-catalog__headline { font-family: var(--urs-font-display); font-size: clamp(28px, 3.2vw, 44px); font-weight: 800; letter-spacing: -0.015em; color: var(--urs-color-text-primary); margin: 0; } .urs-member-catalog__rail { margin-bottom: var(--urs-space-12); } .urs-member-catalog__rail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--urs-space-4); } .urs-member-catalog__rail-title { display: flex; align-items: center; gap: var(--urs-space-2); font-size: var(--urs-font-size-xl); font-weight: 800; color: var(--urs-color-text-primary); margin: 0; } .urs-member-catalog__view-all { display: inline-flex; align-items: center; gap: 4px; font-size: var(--urs-font-size-sm); font-weight: 600; color: var(--urs-color-accent); text-decoration: none; transition: color var(--urs-transition-fast); } .urs-member-catalog__view-all:hover { color: var(--urs-color-accent-hover); text-decoration: underline; } /* Scroll rail */ .urs-member-catalog__scroll { display: flex; gap: var(--urs-space-4); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline-start: var(--urs-container-padding); padding-inline: var(--urs-container-padding); -webkit-overflow-scrolling: touch; scrollbar-width: none; } .urs-member-catalog__scroll::-webkit-scrollbar { display: none; } /* Card sizes */ .urs-member-catalog__scroll--small .urs-member-catalog__card { flex: 0 0 160px; } .urs-member-catalog__scroll--medium .urs-member-catalog__card { flex: 0 0 200px; } .urs-member-catalog__scroll--large .urs-member-catalog__card { flex: 0 0 240px; } .urs-member-catalog__card { scroll-snap-align: start; text-decoration: none; color: inherit; flex-shrink: 0; transition: transform var(--urs-transition-base); } .urs-member-catalog__card:hover { transform: translateY(-4px); } .urs-member-catalog__card-cover { position: relative; border-radius: var(--urs-radius-md); overflow: hidden; background: var(--urs-color-bg-surface); aspect-ratio: 1; border: 1px solid var(--urs-color-border); } .urs-member-catalog__card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--urs-ease-out-cubic); } .urs-member-catalog__card:hover .urs-member-catalog__card-img { transform: scale(1.06); } .urs-member-catalog__card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--urs-color-bg-surface-2); color: var(--urs-color-text-muted); font-size: var(--urs-font-size-xs); text-align: center; padding: var(--urs-space-4); } /* Play overlay on hover */ .urs-member-catalog__card-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity var(--urs-transition-base); } .urs-member-catalog__card:hover .urs-member-catalog__card-overlay { opacity: 1; } /* Badge */ .urs-member-catalog__badge { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: var(--urs-radius-sm); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; z-index: 1; } .urs-member-catalog__badge--new { background: var(--urs-color-highlight); color: #ffffff; } .urs-member-catalog__badge--exclusive { background: var(--urs-color-accent); color: #ffffff; } .urs-member-catalog__badge--member { background: #ffffff; color: #000000; } /* Card info */ .urs-member-catalog__card-info { padding-top: var(--urs-space-2); } .urs-member-catalog__card-artist { display: block; font-size: var(--urs-font-size-xs); color: var(--urs-color-text-muted); font-weight: 500; } .urs-member-catalog__card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--urs-font-size-sm); font-weight: 700; color: var(--urs-color-text-primary); line-height: var(--urs-line-height-snug); } /* --- Member Perks --- */ .urs-member-perks { background: var(--urs-color-bg-base); padding-block: var(--urs-space-16) var(--urs-space-20); border-top: 1px solid var(--urs-color-border); } .urs-member-perks__header { text-align: center; max-width: 640px; margin: 0 auto var(--urs-space-12); } .urs-member-perks__eyebrow { font-size: var(--urs-font-size-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--urs-color-accent); margin-bottom: var(--urs-space-3); } .urs-member-perks__headline { font-family: var(--urs-font-display); font-size: clamp(28px, 3.2vw, 44px); font-weight: 800; letter-spacing: -0.015em; color: var(--urs-color-text-primary); margin: 0 0 var(--urs-space-3); } .urs-member-perks__subheadline { font-size: var(--urs-font-size-lg); color: var(--urs-color-text-secondary); line-height: var(--urs-line-height-normal); } .urs-member-perks__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--urs-space-6); } .urs-member-perks__card { background: var(--urs-color-bg-surface); border: 1px solid var(--urs-color-border); border-radius: var(--urs-radius-lg); padding: var(--urs-space-8); display: flex; flex-direction: column; gap: var(--urs-space-3); transition: border-color var(--urs-transition-base), transform var(--urs-transition-base); } .urs-member-perks__card:hover { border-color: var(--urs-color-accent); transform: translateY(-2px); } .urs-member-perks__card-title { font-size: var(--urs-font-size-lg); font-weight: 800; color: var(--urs-color-text-primary); margin: 0; } .urs-member-perks__card-body { font-size: var(--urs-font-size-sm); color: var(--urs-color-text-secondary); line-height: var(--urs-line-height-normal); margin: 0; } .urs-member-perks__card-tier { display: inline-block; margin-top: auto; padding: 2px 10px; border-radius: var(--urs-radius-pill); background: var(--urs-color-bg-surface-3); font-size: 11px; font-weight: 600; color: var(--urs-color-accent); align-self: flex-start; } /* Upgrade strip */ .urs-member-perks__upgrade { margin-top: var(--urs-space-12); text-align: center; padding: var(--urs-space-8); border: 1px solid var(--urs-color-border); border-radius: var(--urs-radius-lg); background: var(--urs-color-bg-surface); } .urs-member-perks__upgrade-text { font-size: var(--urs-font-size-base); color: var(--urs-color-text-secondary); margin-bottom: var(--urs-space-4); } .urs-member-perks__upgrade-cta { display: inline-flex; align-items: center; gap: var(--urs-space-2); height: 48px; padding: 0 var(--urs-space-6); background: var(--urs-color-button-invert-bg); color: var(--urs-color-button-invert-text); font-weight: 700; font-size: var(--urs-font-size-sm); text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; border-radius: var(--urs-radius-pill); transition: background var(--urs-transition-base); } .urs-member-perks__upgrade-cta:hover { background: var(--urs-color-button-invert-hover-bg); } /* --- Spotlight (Featured Album) --- */ .urs-member-catalog__spotlight { display: grid; grid-template-columns: auto 1fr; gap: var(--urs-space-8); align-items: center; margin-bottom: var(--urs-space-12); padding-block: var(--urs-space-8); border-bottom: 1px solid var(--urs-color-border); } .urs-member-catalog__spotlight-cover { position: relative; width: 200px; aspect-ratio: 1; border-radius: var(--urs-radius-lg); overflow: hidden; flex-shrink: 0; border: 1px solid var(--urs-color-border); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } .urs-member-catalog__spotlight-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--urs-ease-out-cubic); } .urs-member-catalog__spotlight:hover .urs-member-catalog__spotlight-img { transform: scale(1.05); } .urs-member-catalog__spotlight-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity var(--urs-transition-base); } .urs-member-catalog__spotlight:hover .urs-member-catalog__spotlight-play { opacity: 1; } .urs-member-catalog__spotlight-info { display: flex; flex-direction: column; gap: var(--urs-space-2); } .urs-member-catalog__spotlight-eyebrow { font-size: var(--urs-font-size-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--urs-color-accent); } .urs-member-catalog__spotlight-title { font-family: var(--urs-font-display); font-size: clamp(24px, 3vw, 36px); font-weight: 900; letter-spacing: -0.02em; color: var(--urs-color-text-primary); margin: 0; line-height: var(--urs-line-height-tight); } .urs-member-catalog__spotlight-artist { font-size: var(--urs-font-size-lg); color: var(--urs-color-text-secondary); margin: 0; } .urs-member-catalog__spotlight-genre, .urs-member-catalog__spotlight-meta { font-size: var(--urs-font-size-xs); color: var(--urs-color-text-muted); font-weight: 500; } .urs-member-catalog__spotlight-actions { display: flex; gap: var(--urs-space-3); margin-top: var(--urs-space-4); flex-wrap: wrap; } .urs-member-catalog__spotlight-cta { display: inline-flex; align-items: center; gap: var(--urs-space-2); height: 44px; padding: 0 var(--urs-space-6); background: var(--urs-color-button-invert-bg); color: var(--urs-color-button-invert-text); font-weight: 700; font-size: var(--urs-font-size-sm); text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; border-radius: var(--urs-radius-pill); transition: background var(--urs-transition-base); } .urs-member-catalog__spotlight-cta:hover { background: var(--urs-color-button-invert-hover-bg); } .urs-member-catalog__spotlight-cta-ghost { display: inline-flex; align-items: center; gap: var(--urs-space-2); height: 44px; padding: 0 var(--urs-space-5); background: var(--urs-color-button-ghost-bg); color: var(--urs-color-text-primary); border: 1px solid var(--urs-color-button-ghost-border); font-weight: 600; font-size: var(--urs-font-size-sm); text-decoration: none; border-radius: var(--urs-radius-pill); transition: background var(--urs-transition-base); } .urs-member-catalog__spotlight-cta-ghost:hover { background: var(--urs-color-button-ghost-hover); } /* --- Quick Nav Tabs --- */ .urs-member-catalog__nav { margin-bottom: var(--urs-space-10); border-bottom: 1px solid var(--urs-color-border); } .urs-member-catalog__nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; } .urs-member-catalog__nav-list::-webkit-scrollbar { display: none; } .urs-member-catalog__nav-tab { appearance: none; background: none; border: none; border-bottom: 2px solid transparent; color: var(--urs-color-text-muted); font-size: var(--urs-font-size-sm); font-weight: 600; padding: var(--urs-space-3) var(--urs-space-5); cursor: pointer; white-space: nowrap; transition: color var(--urs-transition-fast), border-color var(--urs-transition-fast); } .urs-member-catalog__nav-tab:hover { color: var(--urs-color-text-primary); } .urs-member-catalog__nav-tab--active { color: var(--urs-color-accent); border-bottom-color: var(--urs-color-accent); } /* --- Card Genre Tag --- */ .urs-member-catalog__card-genre { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--urs-color-text-muted); margin-top: 2px; } /* --- Responsive: Member Area --- */ @container (max-width: 800px) { .urs-member-perks__grid { grid-template-columns: repeat(2, 1fr); } .urs-member-hero__stats { gap: var(--urs-space-6); } .urs-member-catalog__scroll--large .urs-member-catalog__card { flex: 0 0 200px; } .urs-member-catalog__spotlight { grid-template-columns: 160px 1fr; gap: var(--urs-space-6); } .urs-member-catalog__spotlight-cover { width: 160px; } } @container (max-width: 400px) { .urs-member-perks__grid { grid-template-columns: 1fr; } .urs-member-hero__stats { flex-direction: column; gap: var(--urs-space-4); } .urs-member-hero__actions { flex-direction: column; align-items: stretch; } .urs-member-hero__cta, .urs-member-hero__cta-secondary { justify-content: center; } .urs-member-catalog__scroll--small .urs-member-catalog__card, .urs-member-catalog__scroll--medium .urs-member-catalog__card, .urs-member-catalog__scroll--large .urs-member-catalog__card { flex: 0 0 160px; } .urs-member-catalog__spotlight { grid-template-columns: 1fr; text-align: center; } .urs-member-catalog__spotlight-cover { width: 180px; margin: 0 auto; } .urs-member-catalog__spotlight-info { align-items: center; } .urs-member-catalog__spotlight-actions { justify-content: center; } } @media (max-width: 800px) { .urs-member-perks__grid { grid-template-columns: repeat(2, 1fr); } .urs-member-hero__stats { gap: var(--urs-space-6); } .urs-member-catalog__scroll--large .urs-member-catalog__card { flex: 0 0 200px; } .urs-member-catalog__spotlight { grid-template-columns: 160px 1fr; gap: var(--urs-space-6); } .urs-member-catalog__spotlight-cover { width: 160px; } } @media (max-width: 480px) { .urs-member-catalog__spotlight { grid-template-columns: 1fr; text-align: center; } .urs-member-catalog__spotlight-cover { width: 180px; margin: 0 auto; } .urs-member-catalog__spotlight-info { align-items: center; } .urs-member-catalog__spotlight-actions { justify-content: center; } .urs-member-perks__grid { grid-template-columns: 1fr; } .urs-member-hero__stats { flex-direction: column; gap: var(--urs-space-4); } .urs-member-hero__actions { flex-direction: column; align-items: stretch; } .urs-member-hero__cta, .urs-member-hero__cta-secondary { justify-content: center; } .urs-member-catalog__scroll--small .urs-member-catalog__card, .urs-member-catalog__scroll--medium .urs-member-catalog__card, .urs-member-catalog__scroll--large .urs-member-catalog__card { flex: 0 0 160px; } } /* ========================================================================= F1S2-03 Hero Cinematic Fullbleed (Prime Video / Apple TV+ aesthetic) Replaces .urs-hero-club__* mosaic split layout with single featured cover. ========================================================================= */ .urs-hero { position: relative; width: 100%; overflow: hidden; isolation: isolate; background: #000; --urs-hero-cover: none; } .urs-hero--medium { min-height: 60vh; } .urs-hero--large { min-height: 80vh; } .urs-hero--xlarge { min-height: 90vh; } .urs-hero__bg { position: absolute; inset: -10%; background-image: var(--urs-hero-cover); background-size: cover; background-position: center; filter: blur(60px) saturate(1.3); transform: scale(1.2); z-index: 0; opacity: 0.85; } .urs-hero__scrim { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.95) 100% ); z-index: 1; } .urs-hero__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: inherit; padding: clamp(48px, 8vh, 96px) clamp(20px, 4vw, 48px) clamp(40px, 6vh, 72px); text-align: center; max-width: 1280px; margin: 0 auto; gap: clamp(24px, 4vh, 40px); } .urs-hero__cover-wrap { flex-shrink: 0; display: flex; justify-content: center; } .urs-hero__cover { width: clamp(180px, 22vw, 280px); aspect-ratio: 1 / 1; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 4px 16px rgba(0,0,0,0.5); object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(.2,.8,.2,1); } .urs-hero:hover .urs-hero__cover { transform: translateY(-4px) scale(1.02); } .urs-hero__text { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 640px; } .urs-hero__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin: 0; } .urs-hero__headline { font-size: clamp(28px, 4.5vw, 56px); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; color: #fff; margin: 0; text-shadow: 0 4px 24px rgba(0,0,0,0.6); } .urs-hero__subheadline { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.55; color: rgba(255,255,255,0.82); margin: 8px 0 0; max-width: 560px; } .urs-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin-top: 8px; } .urs-hero__btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 999px; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; white-space: nowrap; } .urs-hero__btn--primary { background: #fff; color: #000; box-shadow: 0 0 32px rgba(255,255,255,0.25), 0 4px 16px rgba(0,0,0,0.4); } .urs-hero__btn--primary:hover, .urs-hero__btn--primary:focus-visible { transform: translateY(-2px); box-shadow: 0 0 48px rgba(255,255,255,0.4), 0 6px 20px rgba(0,0,0,0.5); outline: none; } .urs-hero__btn--secondary { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.25); backdrop-filter: blur(8px); } .urs-hero__btn--secondary:hover, .urs-hero__btn--secondary:focus-visible { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.4); outline: none; } .urs-hero__microcopy { font-size: 12px; color: rgba(255,255,255,0.55); margin: 4px 0 0; letter-spacing: 0.02em; } @media (max-width: 767px) { .urs-hero--large { min-height: 75vh; } .urs-hero--xlarge { min-height: 85vh; } .urs-hero__bg { filter: blur(40px) saturate(1.3); } .urs-hero__content { padding-bottom: clamp(56px, 8vh, 96px); } .urs-hero__cover { width: clamp(160px, 50vw, 220px); } } @media (prefers-reduced-motion: reduce) { .urs-hero__cover, .urs-hero__btn { transition: none; } .urs-hero:hover .urs-hero__cover { transform: none; } } /* ============================================================================ F1S2-O3 Hero "Unreal Rock +" — logo-led, purple cinematic, aurora, marquee ============================================================================ */ .urs-hero--logo .urs-hero__content { align-items: center; text-align: center; gap: clamp(16px, 2.4vh, 26px); padding-bottom: clamp(64px, 10vh, 120px); } .urs-hero--logo .urs-hero__scrim { background: radial-gradient(120% 85% at 50% 100%, rgba(168,85,247,0.30) 0%, rgba(168,85,247,0.10) 32%, transparent 62%), linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(12,2,24,0.58) 46%, rgba(0,0,0,0.96) 100%); } .urs-hero__aurora { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(46% 38% at 30% 26%, rgba(168,85,247,0.30), transparent 70%), radial-gradient(40% 34% at 74% 36%, rgba(124,58,237,0.26), transparent 72%); mix-blend-mode: screen; opacity: .9; animation: ursHeroAurora 14s ease-in-out infinite alternate; } @keyframes ursHeroAurora { 0% { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .65; } 100% { transform: translate3d(3%, 2%, 0) scale(1.12); opacity: 1; } } .urs-hero__logo { width: clamp(220px, 30vw, 380px); height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 8px 28px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(168,85,247,.35)); animation: ursLogoIn .7s cubic-bezier(.16,1,.3,1) both; } @keyframes ursLogoIn { from { opacity:0; transform: translateY(18px) scale(.96); } to { opacity:1; transform:none; } } .urs-hero--logo .urs-hero__eyebrow { display: inline-flex; align-items: center; gap: 9px; align-self: center; padding: 6px 14px; border-radius: 999px; background: rgba(168,85,247,0.14); border: 1px solid rgba(168,85,247,0.40); color: #E9D5FF; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; box-shadow: 0 0 22px rgba(168,85,247,0.28); } .urs-hero__eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; } .urs-hero__eq span { width: 3px; background: #A855F7; border-radius: 1px; animation: ursEqBar .9s ease-in-out infinite alternate; } .urs-hero__eq span:nth-child(1){ height:40%; animation-delay:0s; } .urs-hero__eq span:nth-child(2){ height:90%; animation-delay:.15s; } .urs-hero__eq span:nth-child(3){ height:60%; animation-delay:.3s; } .urs-hero__eq span:nth-child(4){ height:100%; animation-delay:.45s; } @keyframes ursEqBar { from { height: 20%; } to { height: 100%; } } .urs-hero--logo .urs-hero__headline { font-size: clamp(26px, 4vw, 46px); line-height: 1.02; letter-spacing: -.03em; font-weight: 900; margin: 0; background: linear-gradient(180deg, #ffffff 0%, #E9D5FF 62%, #C084FC 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance; } /* fix: GSAP word-reveal wraps words in inline-block spans which break background-clip:text; re-apply the gradient per word so the headline is never invisible (urs-word-reveal carries the gradient) */ .urs-hero--logo .urs-hero__headline .urs-word-reveal { background: linear-gradient(180deg, #ffffff 0%, #E9D5FF 62%, #C084FC 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .urs-hero--logo .urs-hero__headline, .urs-hero--logo .urs-hero__headline .urs-word-reveal { color: #fff; -webkit-text-fill-color: #fff; background: none; } } .urs-hero--logo .urs-hero__subheadline { color: rgba(255,255,255,.88); max-width: 56ch; margin: 0 auto; } .urs-hero__marquee { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; overflow: hidden; padding: 12px 0; border-top: 1px solid rgba(168,85,247,.18); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .urs-hero__marquee-track { display: inline-flex; align-items: center; gap: 18px; white-space: nowrap; animation: ursMarquee 32s linear infinite; will-change: transform; } .urs-hero__marquee-track span { font-size: 12px; font-weight: 700; letter-spacing: .22em; color: rgba(255,255,255,.45); text-transform: uppercase; } .urs-hero__marquee-dot { color: #A855F7 !important; } @keyframes ursMarquee { from { transform: translateX(0); } to { transform: translateX(-33.33%); } } @media (max-width: 767px) { .urs-hero__logo { width: clamp(180px, 62vw, 260px); } .urs-hero--logo .urs-hero__content { padding-bottom: clamp(72px, 12vh, 110px); } } @media (prefers-reduced-motion: reduce) { .urs-hero__aurora, .urs-hero__eq span, .urs-hero__marquee-track, .urs-hero__logo { animation: none !important; } } /* ============================================================================ F1S2-O4 tiers — per-plan colored border, featured Insider, matrix values ============================================================================ */ .urs-tier-card { border: 1px solid color-mix(in srgb, var(--urs-tier-accent, #A855F7) 36%, transparent); position: relative; transition: border-color .2s, transform .2s, box-shadow .2s; } .urs-tier-card::after { content:''; position:absolute; top:0; left:0; right:0; height:4px; border-radius: 12px 12px 0 0; background: var(--urs-tier-accent, #A855F7); opacity:.9; } .urs-tier-card:hover { border-color: var(--urs-tier-accent, #A855F7); box-shadow: 0 14px 40px color-mix(in srgb, var(--urs-tier-accent, #A855F7) 26%, transparent); transform: translateY(-4px); } .urs-tier-card--featured { border-width: 1.5px; border-color: var(--urs-tier-accent, #7C3AED); box-shadow: 0 0 0 1px color-mix(in srgb, var(--urs-tier-accent) 50%, transparent), 0 16px 48px color-mix(in srgb, var(--urs-tier-accent) 28%, transparent); } @media (min-width: 900px) { .urs-tier-card--featured { transform: translateY(-10px) scale(1.03); } .urs-tier-card--featured:hover { transform: translateY(-14px) scale(1.03); } } .urs-tier-card__eyebrow { color: var(--urs-tier-accent, #A855F7); } .urs-tier-card__badge--featured { background: var(--urs-tier-accent, #7C3AED) !important; color:#fff !important; } /* comparison matrix value text */ .urs-tiers-val { font-weight: 800; color: #fff; font-size: 16px; } .urs-tiers-comparison__cell--mid { background: rgba(124,58,237,0.08); } .urs-check { color: #C084FC; } /* ============================================================================ F1S2-O5 — Apple TV+ cinematic hero (album mosaic, layered depth, framed logo) + tier dominance / contrast polish (QA pass). Appended last = wins on ties. ============================================================================ */ .urs-hero--cinematic { position: relative; overflow: hidden; isolation: isolate; background: #080110; } /* Mosaic backdrop — full-bleed album grid, darkened, slow Ken Burns drift */ .urs-hero__mosaic { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .urs-hero__mosaic-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; width: 116%; height: 122%; position: absolute; top: -11%; left: -8%; animation: ursHeroKen 44s ease-in-out infinite alternate; will-change: transform; } .urs-hero__tile { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; } .urs-hero__tile img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) brightness(.6); } @keyframes ursHeroKen { from { transform: translate3d(-2%,-3%,0) scale(1.06); } to { transform: translate3d(2%,2%,0) scale(1.14); } } @media (max-width: 900px) { .urs-hero__mosaic-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 520px) { .urs-hero__mosaic-grid { grid-template-columns: repeat(3, 1fr); } } /* Heavy scrim for legibility over the mosaic */ .urs-hero--cinematic .urs-hero__scrim { position: absolute; inset: 0; z-index: 1; background: radial-gradient(125% 95% at 50% 8%, rgba(8,1,16,.28) 0%, rgba(8,1,16,.72) 56%, rgba(8,1,16,.95) 100%), linear-gradient(180deg, rgba(8,1,16,.5) 0%, rgba(8,1,16,.32) 42%, rgba(8,1,16,.92) 100%); } /* Aurora orbs drifting over the scrim */ .urs-hero--cinematic .urs-hero__aurora { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; } .urs-hero--cinematic .urs-hero__aurora span { position: absolute; display: block; border-radius: 50%; filter: blur(70px); opacity: .2; mix-blend-mode: screen; will-change: transform; } .urs-hero--cinematic .urs-hero__aurora span:nth-child(1) { width: 46vw; height: 46vw; left: -10vw; top: -12vw; background: radial-gradient(circle, #A855F7, transparent 70%); animation: ursOrbA 19s ease-in-out infinite alternate; } .urs-hero--cinematic .urs-hero__aurora span:nth-child(2) { width: 40vw; height: 40vw; right: -8vw; top: 8vh; background: radial-gradient(circle, #7E22CE, transparent 70%); animation: ursOrbB 23s ease-in-out infinite alternate; } .urs-hero--cinematic .urs-hero__aurora span:nth-child(3) { width: 34vw; height: 34vw; left: 32vw; bottom: -14vw; background: radial-gradient(circle, #C084FC, transparent 70%); animation: ursOrbC 27s ease-in-out infinite alternate; } @keyframes ursOrbA { to { transform: translate(8vw, 6vh) scale(1.15); } } @keyframes ursOrbB { to { transform: translate(-6vw, 8vh) scale(1.1); } } @keyframes ursOrbC { to { transform: translate(4vw, -8vh) scale(1.2); } } /* Film grain + vignette for depth */ .urs-hero__grain { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; } .urs-hero__vignette { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(125% 105% at 50% 36%, transparent 50%, rgba(0,0,0,.58) 100%); } /* Content above all layers */ .urs-hero--cinematic .urs-hero__content { position: relative; z-index: 4; gap: clamp(6px, 1vh, 12px); padding-bottom: clamp(40px, 6vh, 76px); } /* Glass eyebrow chip */ .urs-hero--cinematic .urs-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 0; background: transparent; border: 0; } /* Logo — intentional framed album-tile (kills the "broken crop" read) */ .urs-hero--cinematic .urs-hero__logo { width: clamp(380px, 50vw, 700px); height: auto; border-radius: 22px; border: 1px solid rgba(168,85,247,.34); background: #0a0010; box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 26px 72px rgba(0,0,0,.62), 0 0 56px rgba(168,85,247,.3); animation: ursHeroLogoIn .9s cubic-bezier(.2,.7,.2,1) both; } @keyframes ursHeroLogoIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } } /* Primary CTA filled purple (above the fold, dominant) */ .urs-hero--cinematic .urs-hero__btn--primary { background: linear-gradient(180deg, #A855F7, #7E22CE); color: #fff; border: 0; box-shadow: 0 6px 18px rgba(0,0,0,.38); } .urs-hero--cinematic .urs-hero__btn--primary:hover, .urs-hero--cinematic .urs-hero__btn--primary:focus-visible { background: linear-gradient(180deg, #B774F9, #8B2CE0); box-shadow: 0 8px 22px rgba(0,0,0,.46); } .urs-hero--cinematic .urs-hero__btn--secondary { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } @media (prefers-reduced-motion: reduce) { .urs-hero__mosaic-grid, .urs-hero--cinematic .urs-hero__aurora span, .urs-hero--cinematic .urs-hero__logo { animation: none !important; } } /* --- Tier polish (QA findings) --- */ /* Insider eyebrow text contrast — lighter purple clears WCAG AA on #141414 */ .urs-tier-card--featured .urs-tier-card__eyebrow { color: #C084FC; } /* Featured dominance — stronger glow + bigger price (robust, no transform reliance) */ .urs-tier-card--featured { border-color: #7C3AED; box-shadow: 0 0 0 1px rgba(124,58,237,.4), 0 16px 44px rgba(124,58,237,.18); } .urs-tier-card--featured .urs-tier-card__amount { font-size: var(--urs-font-size-3xl); } /* CTA hierarchy — filled purple for featured (primary), ghost outline for the others */ .urs-tier-card__cta { background: rgba(255,255,255,.05); color: #fff; border: 1px solid rgba(255,255,255,.26); } .urs-tier-card__cta:hover, .urs-tier-card__cta:focus-visible { background: rgba(255,255,255,.12); border-color: var(--urs-tier-accent, #A855F7); } .urs-tier-card--featured .urs-tier-card__cta { background: linear-gradient(180deg, #A855F7, #7E22CE); border: 0; color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.34); } .urs-tier-card--featured .urs-tier-card__cta:hover, .urs-tier-card--featured .urs-tier-card__cta:focus-visible { background: linear-gradient(180deg, #B774F9, #8B2CE0); } /* Legend-as-featured badge contrast safety (gold needs dark text) */ .urs-tier-card[data-urs-tier-id="legend"] .urs-tier-card__badge--featured { color: #141414 !important; } /* Tier art — frame the per-tier logo tile so it reads intentional + distinct */ .urs-tier-card__image { border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--urs-tier-accent, #A855F7) 42%, transparent); } .urs-tier-card__image img { border-radius: 14px; } /* ============================================================================ F1S2-O6 — Apple TV poster wall: 6 vertical-marquee columns, alternating up/down, seamless 2x-track loop (translateY -50%). Logo integrated via screen-blend (black PNG bg knocked out). Replaces the static Ken Burns drift. Refs: ryanmulligan.dev/blog/css-marquee, bram.us reverse columns, codrops. ============================================================================ */ /* Neutralize layer z-index so the logo screen-blend reaches the wall. (.urs-hero__content had z-index:2 = a stacking context that trapped the blend.) With all layers z-auto, DOM order layers them: wall->scrim->aurora->grain->vignette->content. */ .urs-hero--cinematic .urs-hero__wall, .urs-hero--cinematic .urs-hero__scrim, .urs-hero--cinematic .urs-hero__aurora, .urs-hero--cinematic .urs-hero__grain, .urs-hero--cinematic .urs-hero__vignette, .urs-hero--cinematic .urs-hero__content { z-index: auto; } .urs-hero__wall { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; overflow: hidden; } .urs-hero__col { position: relative; overflow: hidden; } .urs-hero__col-track { display: flex; flex-direction: column; will-change: transform; transform: translate3d(0,0,0); animation: ursWallScroll calc(46s + (var(--i, 0) * 6s)) linear infinite; } .urs-hero__col:nth-child(even) .urs-hero__col-track { animation-direction: reverse; animation-delay: calc(var(--i, 0) * -3.5s); } .urs-hero__col:nth-child(odd) .urs-hero__col-track { animation-delay: calc(var(--i, 0) * -2.5s); } @keyframes ursWallScroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-50%,0); } } .urs-hero--cinematic .urs-hero__tile { margin-bottom: 10px; border-radius: 8px; overflow: hidden; aspect-ratio: 1 / 1; } .urs-hero--cinematic .urs-hero__tile img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) brightness(.56); } @media (max-width: 900px) { .urs-hero__wall { grid-template-columns: repeat(4, 1fr); } .urs-hero__col:nth-child(n+5) { display: none; } } @media (max-width: 520px) { .urs-hero__wall { grid-template-columns: repeat(3, 1fr); } .urs-hero__col:nth-child(n+4) { display: none; } } /* Logo integrated into the scene — drop the framed box, knock out the black via screen blend */ .urs-hero--cinematic .urs-hero__logo { background: transparent; border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 6px 26px rgba(0,0,0,.55)) drop-shadow(0 0 24px rgba(168,85,247,.28)); } @media (prefers-reduced-motion: reduce) { .urs-hero__col-track { animation: none !important; transform: none !important; will-change: auto; } } /* ============================================================================ F1S2-O7 — Listener intro offer (first month free) + bronze promo badge ============================================================================ */ .urs-tier-card__badge--intro { background: #B08D57 !important; color: #1a1205 !important; } .urs-tier-card__then { display: block; margin-top: var(--urs-space-2); font-size: var(--urs-font-size-xs); font-weight: var(--urs-font-weight-medium); color: var(--urs-color-text-muted); letter-spacing: 0; } /* ============================================================================ F1S2-O8 — pricing card redesign: vertical price lockup + free-month strip + section folga ============================================================================ */ .urs-tier-card__price { display: flex; flex-direction: column; align-items: flex-start; } .urs-tier-card__price-row { margin: 0; display: flex; align-items: baseline; gap: 2px; line-height: 1; color: var(--urs-color-text-primary); } .urs-tier-card__promo { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-bottom: var(--urs-space-2); padding: 5px 11px; border-radius: var(--urs-radius-pill); font-size: var(--urs-font-size-micro); font-weight: var(--urs-font-weight-bold); letter-spacing: var(--urs-letter-spacing-uppercase); text-transform: uppercase; line-height: 1; color: var(--urs-tier-accent, var(--urs-color-accent)); background-color: color-mix(in srgb, var(--urs-tier-accent, var(--urs-color-accent)) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--urs-tier-accent, var(--urs-color-accent)) 40%, transparent); } .urs-tiers-wall-section { padding-top: clamp(36px, 5vh, 72px); } /* ============================================================================ F1S2-O9 — Listener intro price (Meta style): $0 first month in accent + 'first month' ============================================================================ */ .urs-tier-card__intro-for { font-size: var(--urs-font-size-base); font-weight: var(--urs-font-weight-semibold); color: var(--urs-color-text-secondary); letter-spacing: 0; align-self: flex-end; margin-bottom: 0.12em; } .urs-tier-card__price--intro .urs-tier-card__amount, .urs-tier-card__price--intro .urs-tier-card__currency { color: #4ADE80; } .urs-tier-card__price--intro .urs-tier-card__then { font-size: var(--urs-font-size-sm); color: var(--urs-color-text-secondary); } /* ============================================================================ F1S2-O10 — Member Club hero polish (Leo video #2): clean eyebrow (no eq bars), pull the logo in (transparent PNG ~25% pad top / ~27% bottom -> negative margin), Listener Meta/Google free-trial price ($2.99 struck + big $0 first month) ============================================================================ */ /* Eyebrow = just the text (drop the decorative equalizer bars) */ .urs-hero--cinematic .urs-hero__eq { display: none; } /* Logo: absorb the baked-in transparent padding so eyebrow + subheadline sit close */ .urs-hero--cinematic .urs-hero__logo { margin-top: calc(clamp(380px, 50vw, 700px) * -0.21); margin-bottom: calc(clamp(380px, 50vw, 700px) * -0.22); } /* Listener intro: struck original price beside the big $0 (Meta/Google trial pattern) */ .urs-tier-card__price--intro .urs-tier-card__was { align-self: center; margin-right: var(--urs-space-2); font-size: var(--urs-font-size-xl); font-weight: var(--urs-font-weight-bold); color: var(--urs-color-text-muted); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums; } /* ============================================================================ F1S2-O11 — hero finishing (Leo video #3): kill the eyebrow purple glow, breathe the microcopy away from the marquee, make the logo non-draggable ============================================================================ */ .urs-hero--cinematic .urs-hero__eyebrow { box-shadow: none; } .urs-hero--cinematic .urs-hero__content { padding-bottom: clamp(80px, 10vh, 124px); } .urs-hero img { -webkit-user-drag: none; user-select: none; } .urs-hero--cinematic .urs-hero__logo { pointer-events: none; } /* ============================================================================ F1S2-O12 — tier images float (Leo video #3): transparent PNGs knock out the black box -> drop the frame, the per-tier logo floats on the card (matches hero) ============================================================================ */ .urs-tier-card__image { box-shadow: none; background: transparent; border-radius: 0; overflow: visible; } .urs-tier-card__image img { border-radius: 0; filter: drop-shadow(0 8px 24px rgba(0,0,0,.5)); } /* ============================================================================ F1S2-O13 — tier logo cropped tight -> compact brand mark at top (kills the dead space the transparent PNG left), price leads the card (Stripe/Spotify) ============================================================================ */ .urs-tier-card__image { width: auto; aspect-ratio: auto; height: auto; overflow: visible; max-width: 84%; margin: 0 auto var(--urs-space-3); } .urs-tier-card__image img { width: auto; height: clamp(60px, 7.5vh, 88px); max-width: 100%; object-fit: contain; display: block; margin: 0 auto; filter: drop-shadow(0 8px 22px rgba(0,0,0,.5)); } .urs-tier-card:hover .urs-tier-card__image img { filter: drop-shadow(0 8px 22px rgba(0,0,0,.5)); } /* MEMBER-O13 — bigger, livelier "Pick your access" tier logos (were 60-88px, flat) */ .urs-tier-card__image { max-width: 100%; margin: 0 auto var(--urs-space-3, 16px); overflow: visible; } .urs-tier-card__image img { height: clamp(104px, 13vh, 150px); filter: drop-shadow(0 6px 16px rgba(0,0,0,.55)) drop-shadow(0 0 26px color-mix(in srgb, var(--urs-tier-accent, #A855F7) 55%, transparent)); transition: transform .4s cubic-bezier(.2,.8,.2,1), filter .4s ease; will-change: transform; } .urs-tier-card:hover .urs-tier-card__image img { transform: translateY(-4px) scale(1.06); filter: drop-shadow(0 12px 28px rgba(0,0,0,.6)) drop-shadow(0 0 42px color-mix(in srgb, var(--urs-tier-accent, #A855F7) 85%, transparent)); } .urs-tier-card--featured .urs-tier-card__image img { animation: ursTierLogoFloat 4.5s ease-in-out infinite; } @keyframes ursTierLogoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce) { .urs-tier-card__image img { transition: none; } .urs-tier-card--featured .urs-tier-card__image img { animation: none; } }