/* ══════════════════════════════════════════════════════ SPOTLIGHT LAYOUT THEME · StreamHub Applied via ══════════════════════════════════════════════════════ */ /* ── Body ─────────────────────────────────────────── */ body.theme-spotlight { background-color: #060614; } /* ══════════════════════════════════════════════════════ HERO SLIDER — "BOXY" STYLE Contained rounded card on dark page background ══════════════════════════════════════════════════════ */ /* ── Outer section: transparent spacer, not the visual box ── */ body.theme-spotlight .sh-hero { height: auto !important; min-height: unset !important; padding: 1.5rem 1.25rem 0 !important; background: none !important; position: relative; } /* ── The actual visible box ── */ body.theme-spotlight .sh-hero__slides { max-width: 1200px !important; height: 360px !important; margin: 0 auto !important; border-radius: 16px !important; overflow: hidden !important; box-shadow: 0 16px 56px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06) !important; position: relative !important; } body.theme-spotlight .sh-hero__slide { background-position: center center; background-size: cover; } /* Gradient: left-heavy dark panel + bottom vignette */ body.theme-spotlight .sh-hero__overlay { background: linear-gradient( 100deg, rgba(6,6,20,1) 0%, rgba(6,6,20,0.95) 28%, rgba(6,6,20,0.65) 50%, rgba(6,6,20,0.15) 70%, transparent 85% ), linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 35%); } /* Content panel */ body.theme-spotlight .sh-hero__content { width: clamp(260px, 42vw, 520px); max-width: none; padding-left: clamp(1.25rem, 3.5vw, 3rem); padding-right: 1.5rem; padding-top: 1.75rem; padding-bottom: 2rem; display: flex; flex-direction: column; justify-content: center; height: 100%; box-sizing: border-box; } /* Small accent bar above title */ body.theme-spotlight .sh-hero__content::before { content: ''; display: block; width: 2.5rem; height: 3px; background: var(--accent); border-radius: 2px; margin-bottom: .75rem; } body.theme-spotlight .sh-hero__title { font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.15; margin-bottom: .45rem; } body.theme-spotlight .sh-hero__subtitle { font-size: .82rem; color: rgba(255,255,255,.72); line-height: 1.55; margin-bottom: 1.1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Button: left-aligned, compact */ body.theme-spotlight .sh-hero__content .sh-btn { align-self: flex-start !important; width: auto !important; padding: .45rem 1.2rem !important; font-size: .82rem !important; } /* Dots — inside the box, bottom center */ body.theme-spotlight .sh-hero__dots { position: absolute; bottom: .875rem; left: 50%; transform: translateX(-50%); gap: .35rem; z-index: 10; } body.theme-spotlight .sh-hero__dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.35); } body.theme-spotlight .sh-hero__dot.is-active { background: var(--accent); width: 18px; border-radius: 3px; } /* Arrows — inside the box, vertically centered */ body.theme-spotlight .sh-hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); bottom: auto !important; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.12); font-size: 1rem; backdrop-filter: blur(6px); z-index: 10; } body.theme-spotlight .sh-hero__arrow:hover { background: var(--accent); border-color: var(--accent); color: #000; } body.theme-spotlight .sh-hero__arrow--prev { left: .75rem; } body.theme-spotlight .sh-hero__arrow--next { right: .75rem; } /* Responsive */ @media (max-width: 900px) { body.theme-spotlight .sh-hero { padding: 1rem .75rem 0 !important; } body.theme-spotlight .sh-hero__slides { height: 280px !important; border-radius: 12px !important; } body.theme-spotlight .sh-hero__content { width: 75%; padding-left: 1.25rem; padding-right: 1rem; } body.theme-spotlight .sh-hero__overlay { background: linear-gradient(to top, rgba(6,6,20,1) 0%, rgba(6,6,20,0.6) 50%, rgba(6,6,20,0.15) 100%); } } @media (max-width: 480px) { body.theme-spotlight .sh-hero { padding: .75rem .5rem 0 !important; } body.theme-spotlight .sh-hero__slides { height: 220px !important; border-radius: 10px !important; } body.theme-spotlight .sh-hero__title { font-size: 1.15rem; } body.theme-spotlight .sh-hero__subtitle { display: none; } } /* ── Header: transparent → glassmorphism on scroll ── */ body.theme-spotlight .sh-header { background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 100%); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; box-shadow: none; transition: background .35s, backdrop-filter .35s, box-shadow .35s; } body.theme-spotlight .sh-header.is-scrolled { background: rgba(6,6,20,.9) !important; backdrop-filter: blur(22px) saturate(160%) !important; -webkit-backdrop-filter: blur(22px) saturate(160%) !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; box-shadow: 0 8px 40px rgba(0,0,0,.5) !important; } /* ── Logo: circular play badge ─────────────────────── */ body.theme-spotlight .sh-logo__icon { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #000; border-radius: 50%; font-size: .8rem; flex-shrink: 0; } body.theme-spotlight .sh-logo__text strong { color: #fff; font-weight: 900; } /* ── Nav: pill-shaped links ────────────────────────── */ body.theme-spotlight .sh-nav a { padding: .35rem .9rem; border-radius: 2rem; font-weight: 500; transition: background .18s, color .18s; } body.theme-spotlight .sh-nav a:hover:not(.is-active) { background: rgba(255,255,255,.08); } body.theme-spotlight .sh-nav a.is-active { background: var(--accent) !important; color: #000 !important; font-weight: 700; } /* ══════════════════════════════════════════════════════ CARD POSTER STYLE — text ON the image (not below) Like Netflix / Disney+ / HBO Max ══════════════════════════════════════════════════════ */ body.theme-spotlight .sh-card { flex: 0 0 190px !important; width: 190px !important; } body.theme-spotlight .sh-grid .sh-card { width: 100% !important; flex: none !important; } body.theme-spotlight .sh-card__link { position: relative !important; display: block !important; } /* Image wrapper: rounded corners */ body.theme-spotlight .sh-card__img-wrap { border-radius: 10px !important; } /* Permanent gradient overlay at bottom of image */ body.theme-spotlight .sh-card__img-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to top, rgba(0,0,0,.96) 0%, rgba(0,0,0,.7) 30%, rgba(0,0,0,.15) 60%, transparent 100% ); border-radius: 10px; pointer-events: none; z-index: 2; } /* Card body — overlaid ON the image at the bottom */ body.theme-spotlight .sh-card__body { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; padding: 2.5rem .625rem .625rem !important; z-index: 3 !important; background: none !important; border: none !important; } body.theme-spotlight .sh-card__title { font-size: .82rem !important; font-weight: 700 !important; color: #fff !important; white-space: normal !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; text-shadow: 0 1px 6px rgba(0,0,0,.6); line-height: 1.3 !important; margin: 0 0 .2rem !important; } body.theme-spotlight .sh-card__meta { font-size: .7rem !important; color: rgba(255,255,255,.65) !important; } body.theme-spotlight .sh-card__genre { color: var(--accent) !important; } /* Image zoom on hover */ body.theme-spotlight .sh-card__link:hover .sh-card__img { transform: scale(1.07) !important; } /* Accent ring + shadow on hover */ body.theme-spotlight .sh-card__link:hover .sh-card__img-wrap { box-shadow: 0 0 0 2px var(--accent), 0 20px 50px rgba(0,0,0,.7) !important; } /* ── Section headings: big + uppercase + accent bar ── */ body.theme-spotlight .sh-section__head { margin-bottom: 1.5rem !important; align-items: flex-end !important; gap: 1rem !important; } body.theme-spotlight .sh-section__title { font-size: 1.4rem !important; font-weight: 900 !important; letter-spacing: -.01em !important; text-transform: uppercase !important; display: flex !important; flex-direction: column !important; gap: .35rem !important; line-height: 1 !important; } body.theme-spotlight .sh-section__title::after { content: ''; display: block; width: 2.5rem; height: 3px; background: var(--accent); border-radius: 2px; } body.theme-spotlight .sh-section__accent { display: none !important; } body.theme-spotlight .sh-section__more { font-size: .72rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .08em !important; color: var(--accent) !important; border: 1px solid var(--accent) !important; padding: .25rem .75rem !important; border-radius: 2rem !important; margin-bottom: .15rem; } body.theme-spotlight .sh-section__more:hover { background: var(--accent) !important; color: #000 !important; } /* ── Buttons: pill + gradient ──────────────────────── */ body.theme-spotlight .sh-btn { border-radius: 2rem !important; font-weight: 600 !important; } body.theme-spotlight .sh-btn--primary { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-h) 100%) !important; box-shadow: 0 4px 20px rgba(0,0,0,.4) !important; color: #000 !important; } body.theme-spotlight .sh-btn--primary:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 30px rgba(0,0,0,.5) !important; } body.theme-spotlight .sh-btn--ghost, body.theme-spotlight .sh-btn--outline { border-radius: 2rem !important; } /* ── Avatar ring ────────────────────────────────────── */ body.theme-spotlight .sh-avatar { border: 2px solid var(--accent); border-radius: 50%; } /* ── Tags: sharp uppercase ──────────────────────────── */ body.theme-spotlight .sh-tag { border-radius: 3px !important; font-size: .62rem !important; letter-spacing: .08em !important; text-transform: uppercase !important; font-weight: 800 !important; } /* ── Footer: accent top border ──────────────────────── */ body.theme-spotlight .sh-footer { background: #04040e !important; border-top: 2px solid var(--accent) !important; margin-top: 3rem !important; } body.theme-spotlight .sh-footer__links h4 { color: var(--accent) !important; } /* ── Detail page poster ─────────────────────────────── */ body.theme-spotlight .sh-detail__poster { border-radius: 1.25rem !important; box-shadow: 0 20px 80px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.07) !important; } /* ── Auth box ───────────────────────────────────────── */ body.theme-spotlight .sh-auth-box { border-radius: 1.25rem !important; } body.theme-spotlight .sh-input { border-radius: .875rem !important; }