/* ===== JON REZIN – Pixel-Perfect Match to jonrezin.com ===== */ /* Extracted measurements from live WordPress site 2026-04-16 */ /* Fonts loaded via in each page (removed @import to unblock CSSOM) */ :root { --bg-dark: #1b1b1b; --bg-black: #000000; --bg-white: #ffffff; --accent: #ffa33a; --accent-hover: #ffb55a; --accent-alt: #ff8300; --text-white: #ffffff; --text-light: #f4f4f4; --text-dark: #000000; --text-gray: #999999; --font-body: 'PT Sans', sans-serif; --font-heading: 'Poppins', sans-serif; --font-button: 'Poppins', 'PT Sans', sans-serif; --nav-height: 100px; --transition: 0.4s ease; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg-dark); color: var(--text-light); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: var(--accent); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--accent-hover); } img { max-width: 100%; height: auto; display: block; } /* ============================================================ NAVIGATION – Exact match to live site nav-bar Height: 100px | BG: rgba(255,255,255,0.14) | Fixed Structure: flex-wrap (space-between) > [hamburger, menu-container, cta-container] ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 99997; height: var(--nav-height); background: transparent; transition: background var(--transition), backdrop-filter var(--transition); } .nav.scrolled { background: rgba(27, 27, 27, 0.95); } /* Homepage keeps the original translucent white at the top */ body.home .nav { background: rgba(255, 255, 255, 0.14); } body.home .nav.scrolled { background: rgba(27, 27, 27, 0.95); } /* flex-wrap: display:flex, justify-content:space-between */ .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 15px; } /* Logo: 100x100px, centered as part of menu items */ .nav-logo { display: flex; align-items: center; justify-content: center; height: 100%; } .nav-logo img { height: 100px; width: 100px; object-fit: contain; } .nav-logo .logo-dark { display: none; } /* Logo stays white across all pages even when nav scrolls into dark mode */ body.home .nav-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; pointer-events: auto; } /* Home: center menu items around the logo, social pinned right, logo-spacer reserves gap */ body.home .nav-inner { position: relative; justify-content: center; padding: 0 15px; } body.home .nav-links { flex: 0 0 auto; gap: 0; } body.home .nav-social { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); } body.home .nav-links .logo-spacer { width: 120px; /* slightly wider than 100px logo so text never touches */ } /* Menu items: 13px PT Sans 700 uppercase, padding 0 15px, line-height 100px */ .nav-links { display: flex; align-items: center; gap: 0; list-style: none; flex: 1; justify-content: center; } .nav-links li { position: relative; } .nav-links a { color: var(--text-white); font-family: var(--font-body); font-size: 13px; font-weight: 700; text-transform: uppercase; padding: 0 15px; line-height: 100px; display: block; transition: color var(--transition); white-space: nowrap; } .nav-links a:hover { color: var(--text-white); } .nav-links a.active { color: var(--text-white); } /* Active underline highlight bar - matches live site exactly */ /* Uses ::after on the link text, 10px tall orange bar, scaleX animation */ .nav-links a { position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: 33px; left: 12px; right: 12px; height: 10px; background: var(--accent); transform: scaleX(0); transform-origin: center; transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); } .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); } /* Logo spacer in center of nav: holds space for the logo (home only) */ .nav-links .logo-spacer { width: 100px; flex-shrink: 0; } /* Inner pages: logo left, menu centered horizontally, social right */ body:not(.home) .nav-inner { position: relative; justify-content: flex-start; } body:not(.home) .nav-logo { flex-shrink: 0; } body:not(.home) .nav-links { position: absolute; left: 50%; top: 0; transform: translateX(-50%); flex: 0 0 auto; justify-content: center; gap: 0; height: 100%; } body:not(.home) .nav-social { margin-left: auto; } body:not(.home) .nav-links .logo-spacer { display: none; } body:not(.home) .nav-links a { padding: 0 13px; } /* Dropdown — menu sits right under the accent bar (bar bottom = 33px from link bottom, so top: calc(100% - 33px) lands the menu flush with bar). */ .nav-dropdown .nav-dropdown-menu { display: none; position: absolute; top: calc(100% - 43px); left: 0; background: var(--bg-dark); border: 1px solid #333; border-radius: 6px; overflow: hidden; min-width: 200px; z-index: 200; margin-top: 0; isolation: isolate; } /* Invisible hover bridge from trigger text down to the menu so the cursor never falls out of :hover on its way to the menu. */ .nav-dropdown::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; bottom: -1px; z-index: 99; pointer-events: none; } .nav-dropdown:hover::after { pointer-events: auto; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { display: block; } .nav-dropdown-menu a { padding: 10px 20px; font-size: 12px; white-space: nowrap; line-height: 1.6; } .nav-dropdown-menu a:hover { color: var(--accent); } /* Suppress the inherited .nav-links a::after on dropdown menu items — they only change color on hover, no bar of their own. */ .nav-dropdown-menu a::after { display: none !important; } /* Sticky trigger bar: keep the orange bar under "Other Endeavors" lit for the entire time the cursor is anywhere inside the dropdown subtree (trigger text, hover bridge, or menu items). */ .nav-links li.nav-dropdown:hover > a::after, .nav-links li.nav-dropdown:focus-within > a::after { transform: scaleX(1); } /* Social icons in nav: 32x32 each, in cta-container */ .nav-social { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .nav-social a { color: var(--text-white); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; transition: color var(--transition); } .nav-social a:hover { color: var(--accent); } .nav-social svg { width: 20px; height: 20px; } /* Mobile nav */ .nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; background: none; border: none; } .nav-toggle span { width: 24px; height: 2px; background: var(--text-white); border-radius: 1px; } @media (max-width: 1024px) { .nav-toggle { display: flex; } .nav-social { display: none; } .nav-links { display: none; position: fixed; top: var(--nav-height); left: 0; right: 0; bottom: 0; background: var(--bg-dark); flex-direction: column; padding: 30px; gap: 0; overflow-y: auto; justify-content: flex-start; } .nav-links.open { display: flex; } .nav-links .logo-spacer { display: none; } .nav-links a { font-size: 15px; padding: 12px 0; line-height: 1.6; } } /* ============================================================ BUTTONS – Square corners (border-radius: 0) ============================================================ */ .btn { display: inline-block; font-family: var(--font-button); font-size: 16px; font-weight: 700; padding: 18px 35px; border: 2px solid; border-radius: 0; cursor: pointer; transition: all var(--transition); text-transform: none; text-align: center; } .btn-accent { background: var(--accent); color: var(--text-white); border-color: var(--accent); } .btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-white); } .btn-black { background: var(--bg-black); color: var(--text-white); border-color: var(--bg-black); } .btn-black:hover { background: #222; border-color: #222; color: var(--text-white); } /* Bio CTA: 24px PT Sans, padding 24px 45px */ .btn-black-lg { background: var(--bg-black); color: var(--text-white); border-color: var(--bg-black); font-family: var(--font-body); font-size: 24px; padding: 24px 45px; } .btn-black-lg:hover { background: #222; border-color: #222; color: var(--text-white); } .btn-white-outline { background: transparent; color: var(--text-white); border-color: var(--text-white); } .btn-white-outline:hover { background: var(--text-white); color: var(--bg-dark); } /* ============================================================ HERO SLIDER – 100vh, Revolution Slider style ============================================================ */ .hero-slider { position: relative; width: 100%; height: 100vh; min-height: 600px; overflow: hidden; background: var(--bg-dark); } .hero-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; opacity: 0; transition: opacity 1s ease; padding: 0 40px; } .hero-slide.active { opacity: 1; z-index: 1; } .hero-slide .slide-bg { position: absolute; inset: 0; } .hero-slide .slide-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .hero-slide .slide-content { position: relative; z-index: 2; max-width: 900px; } /* Left-aligned hero text – vertically centered as a group (title + tagline + button) */ .hero-slide .slide-content-left { position: absolute; top: 50%; left: 6%; transform: translateY(-50%); z-index: 2; text-align: left; max-width: 800px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .hero-slide .slide-content-left .slide-btn { margin-top: 6px; } /* Cinematic fade-up reveal for hero text — mirrors /film-tv hero animation. Compositor-only (opacity + translate) for buttery 60fps; no filter:blur. */ @keyframes hero-fade-up { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .hero-slide.active .slide-title, .hero-slide.active .slide-title-huge, .hero-slide.active .slide-subtitle, .hero-slide.active .slide-tagline, .hero-slide.active .slide-btn { animation: hero-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; will-change: opacity, transform; backface-visibility: hidden; } .hero-slide.active .slide-title, .hero-slide.active .slide-title-huge { animation-delay: 0s; } .hero-slide.active .slide-subtitle, .hero-slide.active .slide-tagline { animation-delay: 0.15s; } .hero-slide.active .slide-btn { animation-delay: 0.30s; } /* Hold the animation in its starting state until fonts are loaded so the text never reflows mid-fade (no shape/size flash on first paint). */ html:not(.fonts-ready) .hero-slide.active .slide-title, html:not(.fonts-ready) .hero-slide.active .slide-title-huge, html:not(.fonts-ready) .hero-slide.active .slide-subtitle, html:not(.fonts-ready) .hero-slide.active .slide-tagline, html:not(.fonts-ready) .hero-slide.active .slide-btn { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .hero-slide.active .slide-title, .hero-slide.active .slide-title-huge, .hero-slide.active .slide-subtitle, .hero-slide.active .slide-tagline, .hero-slide.active .slide-btn { animation: none; } } /* Apply the same staggered fade-up to per-page heroes (discography, artists, videos, about, work-with-me, blog, etc.) */ .disco-hero-content h1, .artists-hero-content h1, .videos-hero-content h1, .about-hero-content h1, .section-title-hero h1, .section-title-hero h2, .page-hero h1, .work-hero h1, .contact-hero h1, .blog-hero h1, .blog-hero h2, .blog-hero-content h1, .video-hero h1, .video-hero h2, .video-hero-overlay h1, .video-hero-overlay h2, .big-header, section .big-header { animation: hero-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; will-change: opacity, transform; backface-visibility: hidden; } html:not(.fonts-ready) .disco-hero-content h1, html:not(.fonts-ready) .artists-hero-content h1, html:not(.fonts-ready) .videos-hero-content h1, html:not(.fonts-ready) .about-hero-content h1, html:not(.fonts-ready) .section-title-hero h1, html:not(.fonts-ready) .section-title-hero h2, html:not(.fonts-ready) .page-hero h1, html:not(.fonts-ready) .work-hero h1, html:not(.fonts-ready) .contact-hero h1, html:not(.fonts-ready) .blog-hero h1, html:not(.fonts-ready) .blog-hero h2, html:not(.fonts-ready) .blog-hero-content h1, html:not(.fonts-ready) .video-hero h1, html:not(.fonts-ready) .video-hero h2, html:not(.fonts-ready) .video-hero-overlay h1, html:not(.fonts-ready) .video-hero-overlay h2, html:not(.fonts-ready) .big-header { animation-play-state: paused; } .disco-hero-content p, .artists-hero-content p, .videos-hero-content p, .about-hero-content p, .section-title-hero p, .page-hero p, .work-hero p, .contact-hero p, .blog-hero p, .blog-hero-content p, .video-hero p, .video-hero-overlay p { animation: hero-fade-up 0.9s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both; will-change: opacity, transform; backface-visibility: hidden; } /* About / Work-With-Me sub-rows that follow the .big-header hero */ section:has(> .big-header) > .footer-social, section:has(> .big-header) > p { animation: hero-fade-up 1.4s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both; } .disco-hero-content .btn, .artists-hero-content .btn, .videos-hero-content .btn, .about-hero-content .btn, .page-hero .btn, .work-hero .btn { animation: hero-fade-up 0.9s 0.30s cubic-bezier(0.22, 1, 0.36, 1) both; will-change: opacity, transform; backface-visibility: hidden; } @media (prefers-reduced-motion: reduce) { .disco-hero-content h1, .disco-hero-content p, .artists-hero-content h1, .artists-hero-content p, .videos-hero-content h1, .videos-hero-content p, .about-hero-content h1, .about-hero-content p, .section-title-hero h1, .section-title-hero h2, .section-title-hero p, .page-hero h1, .page-hero p, .work-hero h1, .work-hero p, .contact-hero h1, .contact-hero p, .blog-hero h1, .blog-hero p { animation: none; } } .hero-slide .slide-title { font-family: var(--font-heading); font-size: clamp(43px, 7.2vw, 86px); font-weight: 700; color: var(--text-white); line-height: 1.15; margin-bottom: 16px; } .hero-slide .slide-title-huge { font-family: var(--font-heading); font-size: clamp(50px, 8.4vw, 115px); font-weight: 700; color: var(--text-white); line-height: 1.05; margin-bottom: 16px; text-shadow: 0 2px 20px rgba(0,0,0,0.3); } .hero-slide .slide-title .accent, .hero-slide .slide-title-huge .accent { color: var(--accent); } .hero-slide .slide-subtitle { font-family: var(--font-heading); font-size: clamp(17px, 2.4vw, 24px); font-weight: 300; color: var(--text-white); margin-bottom: 10px; letter-spacing: 1px; } .hero-slide .slide-tagline { font-family: var(--font-heading); font-size: clamp(16px, 1.8vw, 22px); font-weight: 400; color: rgba(255,255,255,0.85); margin-bottom: 30px; text-shadow: 0 1px 8px rgba(0,0,0,0.4); } .hero-slide .slide-btn { margin-top: 20px; } /* Slider dots */ .slider-dots { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 9px; } .slider-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.30); cursor: pointer; transition: background 0.3s ease, width 0.3s ease; /* Expand hit area without changing visual size */ box-shadow: 0 0 0 5px transparent; } .slider-dots span:hover { background: rgba(255,255,255,0.55); } .slider-dots span.active { background: var(--accent); width: 26px; border-radius: 4px; } /* Hero drag-down scroll indicator (matches /film-tv) */ .hero-scroll-indicator { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); width: 1px; height: 50px; background: rgba(255,255,255,0.25); overflow: hidden; z-index: 11; pointer-events: none; } .hero-scroll-indicator::after { content: ''; position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: var(--accent); animation: hero-scroll-pulse 2.4s cubic-bezier(0.2,0.8,0.2,1) infinite; } @keyframes hero-scroll-pulse { 0% { top: -50%; } 100% { top: 100%; } } @media (prefers-reduced-motion: reduce) { .hero-scroll-indicator::after { animation: none; top: 25%; } } /* ============================================================ SECTIONS – Generic containers ============================================================ */ .section { padding: 80px 0; } .section-dark { background: var(--bg-dark); color: var(--text-light); } .section-white { background: var(--bg-white); color: var(--text-dark); } .section-black { background: var(--bg-black); color: var(--text-white); } .container { max-width: 1200px; margin: 0 auto; padding: 0 30px; } .container-wide { max-width: 1400px; margin: 0 auto; padding: 0 30px; } /* Big section header – EXACT: 100px Poppins 700 uppercase white, ~330px section */ .big-header { font-family: var(--font-heading); font-size: clamp(56px, 8vw, 120px); font-weight: 700; color: #fff; text-transform: uppercase; text-align: center; line-height: 1; letter-spacing: 4px; margin: 0 0 20px; padding: 0; } .big-header-sm { font-family: var(--font-heading); font-size: clamp(48px, 8vw, 100px); font-weight: 700; text-transform: uppercase; text-align: center; line-height: 1.2; padding: 50px 0; } /* Section header with background image overlay */ .disco-header-bg { background-image: url('../images/banner/duo4_w.jpg'); background-size: cover; background-position: center; background-attachment: fixed; } @media (max-width: 768px) { .disco-header-bg { background-attachment: scroll; } } /* Section title hero bands (Music Videos, Latest News) — matches jonrezin.com */ .section-title-hero { position: relative; min-height: 340px; display: flex; align-items: center; justify-content: center; padding: 100px 20px; background-size: cover; background-position: center center; background-attachment: fixed; overflow: hidden; } .section-title-hero::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.6); pointer-events: none; } .section-title-lg { position: relative; font-family: var(--font-heading); font-size: clamp(42px, 8vw, 100px); font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 2px; text-align: center; line-height: 1.5; margin: 0; z-index: 1; } .videos-header-bg { background-image: url('../images/banner/videos-header-bg.jpg'); } .news-header-bg { background-image: url('../images/banner/news-header-bg.jpg'); } .news-header-bg::before { background: rgba(0,0,0,0.85); } @media (max-width: 768px) { .section-title-hero { min-height: 220px; padding: 60px 20px; background-attachment: scroll; } } /* ============================================================ BIO SECTION – EXACT: white bg, centered, 24px/48px Poppins 400 ============================================================ */ .bio-section { background: var(--bg-white); color: var(--text-dark); padding: 80px 30px; text-align: center; } .bio-section h2 { font-family: var(--font-heading); font-size: 24px; font-weight: 400; line-height: 48px; max-width: min(1280px, 80%); margin: 0 auto 30px; color: rgb(0, 0, 0); } .bio-section p { font-family: var(--font-body); font-size: 16px; line-height: 1.8; letter-spacing: 0.2px; max-width: min(1280px, 80%); margin: 0 auto 20px; color: rgb(0, 0, 0); } /* ============================================================ RELEASE / DISCOGRAPHY GRID EXACT: float-based, 229px articles, 14px padding, 201px images 6 columns at ~1376px parent width ============================================================ */ .release-grid { max-width: 1400px; margin: 0 auto; overflow: hidden; /* clearfix for floats */ } .release-grid::after { content: ''; display: table; clear: both; } .release-item { float: left; width: calc(100% / 6); padding: 14px; position: relative; overflow: hidden; cursor: pointer; } .release-item a { display: block; width: 100%; position: relative; } .release-item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform var(--transition); } .release-item:hover img { transform: scale(1.05); } /* Overlay: black bg at 0.8 opacity, title in white uppercase centered */ .release-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; padding: 15px; opacity: 0; transition: opacity var(--transition); } .release-item:hover .release-overlay { opacity: 1; } .release-overlay h3 { font-family: var(--font-heading); font-size: clamp(10px, 1.1vw, 16px); font-weight: 700; color: var(--text-white); text-transform: uppercase; text-align: center; line-height: 1.4; } /* Responsive grid breakpoints */ @media (max-width: 1024px) { .release-item { width: 25%; } } @media (max-width: 768px) { .release-item { width: calc(100% / 3); } } @media (max-width: 480px) { .release-item { width: 50%; } } /* Load more */ .load-more-container { text-align: center; padding: 40px 0; clear: both; } /* ============================================================ MUSIC VIDEOS GRID – Same float layout as discography ============================================================ */ /* Full-width featured video embed */ .featured-video-wide { max-width: 1400px; margin: 0 auto 20px; aspect-ratio: 16/9; } .featured-video-wide iframe { width: 100%; height: 100%; border: none; } .video-grid { max-width: 1400px; margin: 0 auto; overflow: hidden; } .video-grid::after { content: ''; display: table; clear: both; } .video-item { float: left; width: 25%; padding: 7px; position: relative; overflow: hidden; cursor: pointer; } .video-item img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform var(--transition); } .video-item:hover img { transform: scale(1.05); } .video-item .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: rgba(0,0,0,0.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--transition); z-index: 2; } .video-item:hover .play-icon { opacity: 1; } .play-icon::after { content: ''; width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent white; margin-left: 4px; } .video-overlay { position: absolute; inset: 14px; /* match padding */ background: rgba(0,0,0,0.6); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px; opacity: 0; transition: opacity var(--transition); } .video-item:hover .video-overlay { opacity: 1; } .video-overlay h3 { font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: var(--text-white); text-transform: uppercase; text-align: center; margin-top: 10px; } @media (max-width: 768px) { .video-item { width: 50%; } } /* Lightbox */ .lightbox-modal { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.92); align-items: center; justify-content: center; } .lightbox-modal.open { display: flex; } .lightbox-modal .lightbox-content { width: 90%; max-width: 900px; aspect-ratio: 16/9; } .lightbox-modal .lightbox-content iframe { width: 100%; height: 100%; border: none; } .lightbox-close { position: absolute; top: 20px; right: 30px; font-size: 36px; color: white; cursor: pointer; z-index: 10000; background: none; border: none; font-family: sans-serif; } /* ============================================================ FEATURED VIDEO BANNER ============================================================ */ .featured-video { max-width: 900px; margin: 0 auto 40px; aspect-ratio: 16/9; } .featured-video iframe { width: 100%; height: 100%; border: none; } .featured-video-banner { max-width: 1400px; margin: 0 auto 40px; } .featured-video-bg { position: relative; width: 100%; aspect-ratio: 16/7; overflow: hidden; } .featured-video-bg img { width: 100%; height: 100%; object-fit: cover; } .featured-video-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,0.25); } .featured-video-title { font-family: 'Permanent Marker', var(--font-heading), cursive; font-size: clamp(48px, 10vw, 120px); font-weight: 400; color: var(--text-white); text-transform: uppercase; letter-spacing: 4px; text-shadow: 0 4px 20px rgba(0,0,0,0.5); margin-bottom: 20px; } .featured-video-btn { display: inline-block; padding: 12px 28px; border: 2px solid rgba(255,255,255,0.7); color: var(--text-white) !important; font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: 1px; transition: all var(--transition); background: rgba(0,0,0,0.3); } .featured-video-btn:hover { background: rgba(255,255,255,0.15); border-color: var(--text-white); color: var(--text-white) !important; } /* ============================================================ CREDITS LIST (Film & TV) ============================================================ */ .credits-grid { display: grid; gap: 0; } .credit-row { display: flex; align-items: center; gap: 20px; padding: 20px 30px; border-bottom: 1px solid rgba(255,255,255,0.08); transition: background var(--transition); } .credit-row:hover { background: rgba(255,255,255,0.03); } .credit-row img { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; flex-shrink: 0; } .credit-row h4 { font-family: var(--font-heading); font-size: 18px; font-weight: 600; margin-bottom: 4px; } .credit-row .role { color: var(--accent); font-size: 14px; font-weight: 600; } .credit-row .meta { color: var(--text-gray); font-size: 13px; } .credit-tag { margin-left: auto; padding: 4px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; background: rgba(255,163,58,0.15); color: var(--accent); flex-shrink: 0; } /* ============================================================ ABOUT / SPLIT LAYOUT ============================================================ */ .split-section { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } @media (max-width: 768px) { .split-section { grid-template-columns: 1fr; gap: 40px; } } .split-section h2 { font-family: var(--font-heading); font-size: clamp(28px, 3vw, 40px); font-weight: 700; margin-bottom: 20px; } .split-section p { font-size: 16px; line-height: 1.8; color: var(--text-gray); margin-bottom: 16px; } .photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .photo-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0; } .photo-grid img:first-child { grid-row: 1 / 3; aspect-ratio: auto; height: 100%; } /* Stats */ .stat-row { display: flex; gap: 40px; margin-top: 30px; flex-wrap: wrap; } .stat-num { font-family: var(--font-heading); font-size: 36px; font-weight: 700; color: var(--accent); line-height: 1; } .stat-label { font-size: 12px; color: var(--text-gray); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; } /* ============================================================ TESTIMONIALS ============================================================ */ .testimonial-slider { max-width: 800px; margin: 0 auto; text-align: center; position: relative; } /* Slides stack on top of each other so the tallest defines the height, keeping section height fixed as the user tabs through. */ .testimonial-slide { grid-row: 1; grid-column: 1; padding: 0 40px; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .testimonial-slide.active { visibility: visible; opacity: 1; pointer-events: auto; } /* The slider becomes a 2-row grid: a stacked-slides row, then nav. */ .testimonial-slider { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; } .testimonial-arrows { grid-row: 1; grid-column: 1; align-self: center; } .testimonial-nav { grid-row: 2; grid-column: 1; } .testimonial-slide blockquote { font-family: var(--font-body); font-size: 18px; font-style: italic; line-height: 1.8; color: var(--text-light); margin-bottom: 24px; } .testimonial-slide .author { font-family: var(--font-heading); font-size: 16px; font-weight: 600; color: var(--text-white); } .testimonial-slide .author-title { font-size: 13px; color: var(--text-gray); margin-top: 4px; } .testimonial-nav { display: flex; justify-content: center; gap: 10px; margin-top: 30px; } .testimonial-nav span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.3); cursor: pointer; transition: background var(--transition); } .testimonial-nav span.active { background: var(--accent); } .testimonial-arrows { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; display: flex; justify-content: space-between; pointer-events: none; } .testimonial-arrows button { pointer-events: all; background: none; border: none; color: var(--text-white); font-size: 24px; cursor: pointer; padding: 10px; opacity: 0.5; transition: opacity var(--transition); } .testimonial-arrows button:hover { opacity: 1; } /* ============================================================ FORMS ============================================================ */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } } .form-grid .full-width { grid-column: 1 / -1; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { font-size: 14px; font-weight: 700; color: var(--text-light); } .form-group input, .form-group select, .form-group textarea { background: #2a2a2a; border: 1px solid #444; padding: 14px 16px; color: var(--text-light); font-family: var(--font-body); font-size: 15px; outline: none; border-radius: 0; transition: border-color var(--transition); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); } .form-group textarea { min-height: 140px; resize: vertical; } .form-group select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; } .section-white .form-group label { color: var(--text-dark); } .section-white .form-group input, .section-white .form-group select, .section-white .form-group textarea { background: #f5f5f5; border-color: #ddd; color: var(--text-dark); } .checkbox-group { display: flex; flex-wrap: wrap; gap: 12px; } .checkbox-group label { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: #2a2a2a; border: 1px solid #444; cursor: pointer; font-size: 14px; font-weight: 400; transition: border-color var(--transition); } .checkbox-group label:hover { border-color: var(--accent); } .checkbox-group input[type="checkbox"] { accent-color: var(--accent); } /* ============================================================ FOOTER – 4 columns, black bg ============================================================ */ .footer { background: var(--bg-black); padding: 50px 0 0; } .footer-widgets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding: 0 30px 40px; max-width: 1400px; margin: 0 auto; } @media (max-width: 768px) { .footer-widgets { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .footer-widgets { grid-template-columns: 1fr; } } .footer-widget h3 { font-family: var(--font-heading); font-size: 14px; font-weight: 700; text-transform: uppercase; color: var(--text-white); margin-bottom: 16px; letter-spacing: 1px; } .footer-widget p, .footer-widget a { font-size: 14px; color: var(--text-gray); line-height: 1.7; } .footer-widget a:hover { color: var(--accent); } .footer-album-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .footer-album-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; } .footer-recent-posts { list-style: none; } .footer-recent-posts li { padding: 6px 0; border-bottom: 1px solid #222; } .footer-recent-posts a { font-size: 13px; } .footer-recent-posts .post-date { display: block; font-size: 11px; color: #666; margin-top: 2px; } .footer-bottom { text-align: center; padding: 20px 0; border-top: 1px solid #222; margin-top: 20px; } .footer-social { display: flex; justify-content: center; gap: 16px; margin-bottom: 12px; } .footer-social a { color: var(--text-gray); display: flex; align-items: center; transition: color var(--transition); } .footer-social a:hover { color: var(--accent); } .footer-copyright { font-size: 13px; color: var(--text-gray); } /* ============================================================ PAGE HERO (inner pages) ============================================================ */ .page-hero { padding-top: calc(var(--nav-height) + 40px); padding-bottom: 40px; text-align: center; } .page-hero .big-header { margin-bottom: 0; } /* ============================================================ RELEASE DETAIL PAGE ============================================================ */ .release-detail { background: var(--bg-dark); color: var(--text-light); padding: 40px 0; } .release-detail .container { max-width: 1200px; } .release-detail-grid { display: grid; grid-template-columns: minmax(320px, 520px) 1fr; gap: 48px; align-items: start; max-width: 1180px; margin: 0 auto; } .release-left-col { display: flex; flex-direction: column; gap: 28px; position: sticky; top: 24px; } .release-left-col .release-meta-list { margin: 0; } .release-detail-grid .release-cover { position: relative; } .release-detail-grid .release-cover::before { content: ""; position: absolute; inset: -18px; background: radial-gradient(closest-side, rgba(255,163,58,0.18), transparent 72%); filter: blur(22px); z-index: 0; pointer-events: none; } .release-detail-grid .release-cover picture, .release-detail-grid .release-cover img { position: relative; z-index: 1; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06); } .release-detail-grid .release-info { display: flex; flex-direction: column; } /* Explicit ordering: metadata → service buttons → embeds → tracklist */ .release-detail-grid .release-info > .release-meta-list { order: 1; } .release-detail-grid .release-info > .service-buttons { order: 2; margin: 0 0 24px; } .release-detail-grid .release-info > .embed-row { order: 3; } .release-detail-grid .release-info > .release-tracklist { order: 4; } /* Force the right column's first rendered block (alternate links) to align pixel-perfect with the TOP edge of the album cover */ .release-detail-grid .release-info { padding-top: 0; margin-top: 0; } .release-detail-grid .release-info > .service-buttons:first-of-type, .release-detail-grid .release-info > *:first-child { margin-top: 0 !important; padding-top: 0 !important; } .release-detail-grid .release-cover { margin-top: 0; padding-top: 0; } @media (max-width: 860px) { .release-detail-grid { grid-template-columns: 1fr; gap: 28px; } .release-left-col { position: static; gap: 20px; } .release-detail-grid .release-cover { width: min(460px, 100%); margin: 0 auto; } } .embed-row { margin-bottom: 30px; } .embed-row iframe { width: 100%; border: none; } /* Release hero banner with album art background */ .release-header { position: relative; padding: calc(var(--nav-height) + 60px) 0 60px; text-align: center; overflow: hidden; min-height: 350px; display: flex; align-items: center; justify-content: center; } .release-header-bg { position: absolute; inset: 0; z-index: 0; } .release-header-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(10px); transform: scale(1.1); } .release-header-bg::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.55); } .release-header-content { position: relative; z-index: 1; padding: 0 30px; } .release-header h1 { font-family: var(--font-heading); font-size: clamp(24px, 4vw, 42px); font-weight: 700; color: var(--text-white); text-transform: uppercase; letter-spacing: 2px; } .release-header .release-credit { color: var(--accent); font-size: 14px; margin-top: 10px; font-weight: 600; } /* Release metadata */ .release-meta-list { list-style: none; margin-top: 20px; } .release-meta-list li { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 14px; } .release-meta-list .meta-label { color: var(--text-gray); text-transform: uppercase; font-size: 11px; letter-spacing: 1px; display: block; margin-bottom: 2px; } .release-meta-list .meta-value { color: var(--text-white); } .release-description { margin-top: 20px; font-size: 15px; line-height: 1.8; color: var(--text-gray); } /* ============================================================ ARTISTS GRID (circular images) ============================================================ */ .artists-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px; } .artist-card { text-align: center; } .artist-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 2px solid #333; transition: border-color var(--transition); } .artist-card:hover img { border-color: var(--accent); } .artist-card p { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--text-light); } /* ============================================================ SCROLL ANIMATIONS ============================================================ */ .fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } /* ============================================================ UTILITY ============================================================ */ .text-accent { color: var(--accent); } .text-center { text-align: center; } .mb-0 { margin-bottom: 0; } .mt-40 { margin-top: 40px; } .hidden { display: none; } .clearfix::after { content: ''; display: table; clear: both; } /* ============================================================ RELEASE PAGE — GEO SUMMARY (one-sentence canonical fact block for AI/LLM crawlers; subtle on standalone page, hidden in modal) ============================================================ */ .release-geo-summary { max-width: 980px; margin: 0 auto 28px; padding: 14px 18px; color: rgba(255,255,255,0.62); font-size: 14px; line-height: 1.55; background: transparent; border-left: 2px solid rgba(255,255,255,0.18); border-radius: 0; font-weight: 400; } .release-geo-summary strong { color: rgba(255,255,255,0.85); font-weight: 600; } @media (max-width: 720px) { .release-geo-summary { font-size: 13px; padding: 10px 14px; margin-bottom: 20px; } } /* When loaded inside the homepage modal iframe, keep it crawlable for AI but visually-hidden so it doesn't stack between hero and player. */ html.embed-mode .release-geo-summary { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }