File manager - Edit - /home/verseaumee/maze/wp-content/themes/djmaze_theme_integrated/style.css
Back
/* Theme Name: DJ Maze 3D Theme URI: https://example.com/dj-maze-3d Author: BlueVersion Author URI: https://blueversion.fr Description: A premium one-page dark purple 3D WordPress theme for DJ Maze with sections for home, discography, biography, shop, booking, photos, and videos. Version: 1.9.9 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: dj-maze-3d Tags: one-page, music, entertainment, dark, portfolio, custom-background */ :root { --bg: #05020a; --panel: rgba(255, 255, 255, .07); --stroke: rgba(255, 255, 255, .13); --text: #ffffff; --muted: rgba(255, 255, 255, .68); --purple: #9d4edd; --violet: #5a189a; --pink: #ff2fd6; --blue: #00d4ff; --gold: #ffd166; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 300; letter-spacing: 0.01em; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .maze-cursor { position: fixed; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; pointer-events: none; transform: translate(-50%, -50%); z-index: 99999; mix-blend-mode: difference; } .maze-nav { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); width: min(1180px, calc(100% - 34px)); z-index: 9999; display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; border: 1px solid var(--stroke); border-radius: 999px; background: rgba(8, 3, 18, .72); backdrop-filter: blur(24px); box-shadow: 0 24px 80px rgba(0,0,0,.35); } .maze-logo { font-weight: 800; letter-spacing: .08em; font-size: 18px; text-transform: uppercase; } .maze-logo span { color: var(--purple); text-shadow: 0 0 22px rgba(157,78,221,.7); } .maze-nav nav { display: flex; gap: 19px; align-items: center; color: rgba(255,255,255,.62); font-size: 11px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; } .maze-nav nav a:hover { color: #fff; } .maze-pill { padding: 10px 16px; border-radius: 999px; background: linear-gradient(135deg, rgba(157,78,221,.95), rgba(255,47,214,.92)); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; box-shadow: 0 12px 34px rgba(157,78,221,.26); } .panel { position: relative; min-height: 100vh; padding: 120px max(5vw, 22px); } .maze-hero { display: grid; grid-template-columns: 1.1fr .74fr; gap: 46px; align-items: center; overflow: hidden; } #mazeThree { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; } .maze-orb { position: absolute; border-radius: 999px; filter: blur(35px); opacity: .55; pointer-events: none; } .orb-one { width: 320px; height: 320px; background: var(--purple); top: 14%; left: 8%; } .orb-two { width: 260px; height: 260px; background: var(--blue); right: 8%; bottom: 14%; } .maze-hero-content, .maze-hero-card, .maze-section-head, .maze-disc-grid, .maze-bio-image, .maze-bio-text, .maze-shop-grid, .maze-gallery, .maze-video-grid, .maze-book-copy, .maze-form { position: relative; z-index: 2; } .maze-kicker { color: rgba(226, 222, 255, .88); text-transform: uppercase; letter-spacing: .28em; font-weight: 500; font-size: 10px; margin: 0 0 18px; } .maze-hero h1 { font-size: clamp(80px, 15vw, 210px); line-height: .78; letter-spacing: -.11em; margin: 0; background: linear-gradient(120deg, #fff, #dcb4ff 38%, var(--purple), var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 25px 90px rgba(157,78,221,.16); } .maze-hero h2 { font-size: clamp(30px, 5vw, 78px); letter-spacing: -.075em; line-height: .92; margin: 18px 0 22px; max-width: 850px; font-weight: 500; } .maze-lead { max-width: 650px; color: rgba(255,255,255,.74); font-size: 16px; line-height: 1.8; font-weight: 300; } .maze-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; } .maze-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 22px; border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; border: 1px solid var(--stroke); transition: .25s ease; cursor: pointer; } .maze-btn:hover { transform: translateY(-4px) scale(1.02); } .maze-btn.primary { background: linear-gradient(135deg, var(--purple), var(--pink)); box-shadow: 0 22px 60px rgba(157,78,221,.33); border: 0; } .maze-btn.ghost { background: rgba(255,255,255,.07); } .tilt-card { transform-style: preserve-3d; transition: transform .2s ease, border-color .3s ease, box-shadow .3s ease; } .maze-hero-card { padding: 18px; border-radius: 38px; border: 1px solid var(--stroke); background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.045)); box-shadow: 0 40px 110px rgba(0,0,0,.52); } .maze-profile-wrap { height: 560px; border-radius: 30px; overflow: hidden; background: radial-gradient(circle at 50% 20%, rgba(157,78,221,.8), rgba(5,2,10,1) 62%); } .maze-profile-wrap img { width: 100%; height: 100%; object-fit: cover; } .maze-audio-bars { display: flex; gap: 7px; height: 56px; align-items: center; justify-content: center; margin: 14px 0 6px; } .maze-audio-bars span { width: 9px; border-radius: 999px; background: linear-gradient(var(--blue), var(--purple)); animation: bars 1s infinite ease-in-out alternate; } .maze-audio-bars span:nth-child(1){height:18px}.maze-audio-bars span:nth-child(2){height:42px;animation-delay:.1s}.maze-audio-bars span:nth-child(3){height:30px;animation-delay:.2s}.maze-audio-bars span:nth-child(4){height:54px;animation-delay:.3s}.maze-audio-bars span:nth-child(5){height:27px;animation-delay:.4s}.maze-audio-bars span:nth-child(6){height:46px;animation-delay:.5s}.maze-audio-bars span:nth-child(7){height:20px;animation-delay:.6s} @keyframes bars { to { transform: scaleY(.35); opacity: .6; } } .maze-hero-card p { text-align: center; color: rgba(255,255,255,.62); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 400; } .maze-section { background: radial-gradient(circle at top right, rgba(157,78,221,.16), transparent 36%), linear-gradient(180deg, #05020a, #080315); } .maze-section-head { max-width: 1050px; margin: 0 auto 48px; text-align: center; } .maze-section-head h2, .maze-bio-text h2, .maze-book-copy h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(34px, 4.8vw, 62px); line-height: .95; letter-spacing: -.03em; margin: 0 0 16px; font-weight: 600; text-shadow: 0 8px 30px rgba(157,78,221,.12); } .maze-section-head p, .maze-bio-text p, .maze-book-copy p { color: rgba(255,255,255,.68); line-height: 1.9; font-size: 14px; font-weight: 300; max-width: 760px; margin-left: auto; margin-right: auto; } .maze-disc-grid, .maze-shop-grid, .maze-video-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: 1180px; margin: auto; } .maze-disc-card, .maze-product, .maze-video-card, .maze-form { border: 1px solid rgba(255,255,255,.1); border-radius: 30px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035)); padding: 22px; box-shadow: 0 26px 80px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08); } .maze-album-art { height: 230px; border-radius: 24px; display: grid; place-items: center; font-size: 54px; font-weight: 1000; letter-spacing: -.08em; margin-bottom: 20px; } .purple-art { background: radial-gradient(circle at 20% 20%, #fff, var(--purple) 23%, #18002d 65%); } .blue-art { background: radial-gradient(circle at 20% 20%, #fff, var(--blue) 23%, #04172d 65%); } .pink-art { background: radial-gradient(circle at 20% 20%, #fff, var(--pink) 23%, #2d001f 65%); } .gold-art { background: radial-gradient(circle at 20% 20%, #fff, var(--gold) 23%, #2d1c00 65%); color: #111; } .maze-disc-card h3, .maze-product h3, .maze-video-card h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -.01em; font-weight: 500; } .maze-disc-card p, .maze-product p, .maze-video-card p { color: rgba(255,255,255,.63); line-height: 1.75; font-size: 13px; font-weight: 300; min-height: 52px; } .maze-disc-card a, .maze-small-btn { display: inline-flex; margin-top: 14px; padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--stroke); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; font-weight: 500; } .maze-bio { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 48px; max-width: 1280px; margin: auto; } .maze-bio-image { border-radius: 36px; overflow: hidden; border: 1px solid var(--stroke); background: var(--panel); box-shadow: 0 40px 120px rgba(0,0,0,.35); min-height: 580px; } .maze-bio-image img { width: 100%; height: 580px; object-fit: cover; opacity: .9; } .maze-badge { position: absolute; left: 28px; bottom: 28px; padding: 12px 18px; border-radius: 999px; background: rgba(5,2,10,.7); backdrop-filter: blur(18px); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; border: 1px solid var(--stroke); } .maze-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; } .maze-stats div { padding: 18px; border-radius: 24px; background: var(--panel); border: 1px solid var(--stroke); } .maze-stats strong { display: block; font-size: 28px; color: var(--blue); font-weight: 600; } .maze-stats span { color: rgba(255,255,255,.62); font-size: 12px; font-weight: 300; } .product-visual { height: 260px; border-radius: 26px; display: grid; place-items: center; font-weight: 1000; letter-spacing: -.08em; margin-bottom: 18px; border: 1px solid rgba(255,255,255,.13); box-shadow: inset 0 0 80px rgba(255,255,255,.06); } .hoodie { background: radial-gradient(circle at 50% 22%, #2d174a, #050208 58%); color: #e8d2ff; font-size: 39px; } .tee { background: linear-gradient(145deg, #111, #3b0a5c); font-size: 48px; } .cap { background: radial-gradient(circle, #9d4edd, #07020c 65%); font-size: 60px; } .vinyl { background: repeating-radial-gradient(circle, #090909 0 10px, #1b1029 11px 13px); font-size: 44px; } .price { color: #e7d6ff; font-size: 22px; font-weight: 500; margin-top: 12px; letter-spacing: .03em; } .maze-gallery { max-width: 1180px; margin: auto; display: grid; grid-template-columns: 1.1fr .9fr 1fr; grid-auto-rows: 240px; gap: 18px; } .photo-holder { border: 1px dashed rgba(255,255,255,.22); border-radius: 30px; background: linear-gradient(135deg, rgba(157,78,221,.18), rgba(255,255,255,.04)); display: grid; place-items: center; color: rgba(255,255,255,.62); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 400; min-height: 220px; } .photo-holder.tall { grid-row: span 2; } .photo-holder.wide { grid-column: span 2; } .maze-video-card { min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.13), transparent 25%), linear-gradient(135deg, rgba(157,78,221,.42), rgba(0,212,255,.08)), #080315; } .play { width: 56px; height: 56px; border-radius: 999px; display: grid; place-items: center; background: rgba(255,255,255,.94); color: var(--purple); font-size: 14px; font-weight: 600; margin-bottom: auto; box-shadow: 0 0 42px rgba(255,255,255,.18); } .maze-book { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: center; max-width: 1180px; margin: auto; } .maze-book-info { display: grid; gap: 12px; margin-top: 28px; } .maze-book-info span { display: inline-flex; width: fit-content; padding: 10px 14px; border: 1px solid var(--stroke); border-radius: 999px; background: var(--panel); color: rgba(255,255,255,.66); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 400; } .maze-form { display: grid; gap: 14px; } .maze-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .maze-form input, .maze-form textarea, .maze-form select { width: 100%; padding: 15px 16px; border: 1px solid var(--stroke); border-radius: 18px; background: rgba(0,0,0,.18); color: #fff; font-size: 13px; font-weight: 300; letter-spacing: .02em; outline: none; } .maze-form textarea { min-height: 150px; resize: vertical; } .maze-form input::placeholder, .maze-form textarea::placeholder { color: rgba(255,255,255,.45); } /* Luxury typography refinements */ .maze-section-head, .maze-bio-text, .maze-book-copy { text-wrap: balance; } .maze-bio-text p { margin-bottom: 14px; } .maze-disc-card, .maze-product, .maze-video-card, .maze-form, .maze-bio-image, .maze-hero-card, .maze-stats div { backdrop-filter: blur(16px); } .maze-disc-card h3, .maze-product h3, .maze-video-card h3, .maze-book-copy h2, .maze-bio-text h2, .maze-section-head h2 { color: rgba(255,255,255,.95); } .maze-nav { border-color: rgba(255,255,255,.09); } .maze-section-head { margin-bottom: 54px; } @media (max-width: 980px) { .maze-cursor { display: none; } .maze-nav nav { display: none; } .maze-hero, .maze-bio, .maze-book { grid-template-columns: 1fr; } .maze-disc-grid, .maze-shop-grid, .maze-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .maze-gallery { grid-template-columns: 1fr; grid-auto-rows: 220px; } .photo-holder.tall, .photo-holder.wide { grid-row: auto; grid-column: auto; } .maze-profile-wrap { height: 460px; } } @media (max-width: 620px) { .panel { padding: 105px 18px; } .maze-disc-grid, .maze-shop-grid, .maze-video-grid, .maze-stats, .maze-form-row { grid-template-columns: 1fr; } .maze-hero h1 { font-size: 82px; } .maze-hero h2, .maze-section-head h2, .maze-bio-text h2, .maze-book-copy h2 { font-size: 42px; } .maze-pill { display: none; } } /* Header streaming/contact actions */ .maze-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .maze-social-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; border-radius: 999px; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: #fff; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 12px 34px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.16); transition: transform .25s ease, filter .25s ease, box-shadow .25s ease; overflow: hidden; } .maze-social-pill:hover { transform: translateY(-3px) scale(1.02); filter: brightness(1.08); box-shadow: 0 18px 44px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.22); } .maze-whatsapp-pill { padding: 0 15px 0 12px; background: linear-gradient(135deg, #25D366, #128C7E); } .maze-whatsapp-pill img { width: 18px; height: 18px; object-fit: contain; } .maze-spotify-pill { width: 42px; min-width: 42px; padding: 0; background: linear-gradient(135deg, #1DB954, #159a45); } .maze-spotify-pill img { width: 20px; height: 20px; object-fit: contain; } @media (max-width: 980px) { .maze-nav { width: min(100% - 24px, 760px); } .maze-header-actions { gap: 7px; } .maze-whatsapp-pill { padding: 0 12px; } .maze-whatsapp-pill span { display: none; } .maze-whatsapp-pill img { width: 20px; height: 20px; } } @media (max-width: 620px) { .maze-nav { top: 12px; padding: 10px 12px; border-radius: 24px; } .maze-logo { font-size: 15px; } .maze-header-actions .maze-pill { display: inline-flex; padding: 10px 12px; font-size: 9px; letter-spacing: .1em; } .maze-social-pill { height: 34px; } .maze-spotify-pill { width: 36px; min-width: 36px; } } /* Better desktop header fit with added CTA buttons */ .maze-nav { width: min(1320px, calc(100% - 34px)); } .maze-nav nav { gap: 14px; font-size: 10px; letter-spacing: .14em; } .maze-logo { min-width: 92px; } @media (max-width: 1160px) { .maze-nav nav { display: none; } } .maze-pill, .maze-social-pill { white-space: nowrap; } /* Full Discography page */ .maze-nav nav a.is-active { color: #fff; } .maze-nav nav a.is-active::after { content: ''; display: block; height: 1px; margin-top: 4px; background: linear-gradient(90deg, var(--purple), var(--pink)); opacity: .9; } .maze-discography-page { background: radial-gradient(circle at 78% 8%, rgba(126, 43, 180, .28), transparent 38%), linear-gradient(180deg, #080315 0%, #05020a 40%, #080315 100%); min-height: 100vh; } .maze-music-hero { min-height: 92vh; display: flex; align-items: flex-end; padding-bottom: clamp(70px, 10vh, 130px); overflow: hidden; } .maze-music-hero-bg, .maze-music-hero-overlay { position: absolute; inset: 0; pointer-events: none; } .maze-music-hero-bg { background-size: cover; background-position: center; transform: scale(1.04); filter: contrast(1.08) saturate(.92); } .maze-music-hero-overlay { background: radial-gradient(circle at 46% 45%, rgba(255,255,255,.05), transparent 20%), linear-gradient(90deg, rgba(5,2,10,.88) 0%, rgba(5,2,10,.42) 45%, rgba(5,2,10,.86) 100%), linear-gradient(180deg, rgba(5,2,10,.42) 0%, rgba(8,3,21,.92) 100%); } .maze-music-hero-content { position: relative; z-index: 2; max-width: 1180px; width: 100%; margin: 0 auto; } .maze-music-hero h1 { font-size: clamp(74px, 13vw, 180px); line-height: .75; letter-spacing: -.09em; margin: 0; background: linear-gradient(120deg, #fff, #f0e2ff 42%, #a65cff 70%, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; text-transform: uppercase; } .maze-music-hero h2 { margin: 26px 0 28px; font-family: 'Cormorant Garamond', serif; font-size: clamp(38px, 5.4vw, 88px); line-height: .9; font-weight: 600; letter-spacing: -.04em; } .maze-platform-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .maze-platform-row a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); backdrop-filter: blur(18px); box-shadow: 0 18px 50px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08); color: #fff; transition: transform .25s ease, background .25s ease, border-color .25s ease; } .maze-platform-row a:hover { transform: translateY(-4px); background: rgba(157,78,221,.20); border-color: rgba(255,255,255,.35); } .maze-platform-row svg { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; } .maze-platform-row span { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; } .maze-disc-side-nav { position: fixed; top: 160px; right: max(20px, calc((100vw - 1320px) / 2)); z-index: 200; width: 150px; display: grid; gap: 8px; justify-items: end; text-align: right; pointer-events: auto; } .maze-disc-side-nav span, .maze-disc-side-nav a { display: block; font-size: 10px; line-height: 1.1; letter-spacing: .11em; text-transform: uppercase; font-weight: 900; color: rgba(255,255,255,.72); text-shadow: 0 8px 28px rgba(0,0,0,.55); transition: color .2s ease, transform .2s ease; } .maze-disc-side-nav span { color: #ffd166; } .maze-disc-side-nav a:hover { color: #ff2fd6; transform: translateX(-4px); } .maze-full-discography { position: relative; z-index: 1; width: min(1180px, calc(100% - 44px)); margin: 0 auto; padding: 70px 0 130px; } .maze-discography-category { scroll-margin-top: 130px; padding: 38px 0 66px; border-top: 1px solid rgba(255,255,255,.09); } .maze-category-title-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 28px; } .maze-category-title-row .maze-kicker { margin: 0 0 9px; } .maze-category-title-row h2 { margin: 0; font-size: clamp(30px, 4vw, 56px); line-height: .92; letter-spacing: -.045em; text-transform: uppercase; font-weight: 1000; color: rgba(255,255,255,.96); } .maze-category-title-row span { color: rgba(255,255,255,.52); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; } .maze-release-grid, .maze-feature-discography { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 22px; } .maze-release-card, .maze-feature-cover { display: block; min-width: 0; } .maze-release-art, .maze-feature-cover-img { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.055); box-shadow: 0 24px 70px rgba(0,0,0,.28); } .maze-release-art::after, .maze-feature-cover-img::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.08); pointer-events: none; } .maze-release-art img, .maze-feature-cover-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .42s cubic-bezier(.2,.8,.2,1), filter .42s ease; } .maze-release-card:hover .maze-release-art img, .maze-feature-cover:hover .maze-feature-cover-img img { transform: scale(1.09); filter: brightness(1.06) contrast(1.04); } .maze-release-card strong, .maze-feature-cover strong { display: block; margin-top: 14px; color: rgba(255,255,255,.92); font-size: 13px; line-height: 1.28; text-align: center; font-weight: 800; letter-spacing: -.01em; overflow-wrap: anywhere; } .maze-empty-discography { color: rgba(255,255,255,.6); } .maze-home-discography { min-height: auto; } .maze-feature-discography { max-width: 1080px; margin: 0 auto; } .maze-feature-cover { padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035)); box-shadow: 0 26px 80px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08); } .maze-feature-cover-img { border-radius: 17px; } .maze-discography-more { position: relative; z-index: 2; text-align: center; margin-top: 36px; } @media (max-width: 1240px) { .maze-disc-side-nav { display: none; } } @media (max-width: 980px) { .maze-release-grid, .maze-feature-discography { grid-template-columns: repeat(2, minmax(0, 1fr)); } .maze-category-title-row { align-items: flex-start; flex-direction: column; } .maze-music-hero { min-height: 82vh; } } @media (max-width: 620px) { .maze-music-hero { padding-bottom: 60px; } .maze-platform-row a { width: calc(50% - 6px); justify-content: center; padding: 0 12px; } .maze-platform-row span { display: none; } .maze-platform-row svg { width: 22px; height: 22px; } .maze-full-discography { width: min(100% - 28px, 1180px); padding-top: 42px; } .maze-release-grid, .maze-feature-discography { gap: 22px 14px; } .maze-release-card strong, .maze-feature-cover strong { font-size: 11px; } .maze-feature-cover { padding: 9px; border-radius: 18px; } .maze-feature-cover-img { border-radius: 12px; } } .maze-disc-side-nav { display:none !important; } .maze-category-title-row { display: block; text-align: left; margin-bottom: 24px; } .maze-category-title-row .maze-kicker { margin: 0 0 8px; text-align: left; font-size: 10px; letter-spacing: .13em; color: rgba(255,255,255,.68); } .maze-category-title-row h2 { margin: 0; text-align: left; font-size: clamp(25px, 2.7vw, 36px); line-height: 1; letter-spacing: -.015em; text-transform: uppercase; font-weight: 1000; color: rgba(255,255,255,.98); } .maze-category-title-row span { display: none; } /* DJ Maze premium expansion */ .maze-music-hero-bg { transform: none !important; filter: contrast(1.04) saturate(1.02) !important; background-position: center center !important; } .maze-footer-video { position: relative; min-height: 500px; overflow: hidden; display: grid; place-items: center; background:#05020a; } .maze-footer-bg, .maze-footer-bg iframe, .maze-footer-overlay { position:absolute; inset:0; width:100%; height:100%; } .maze-footer-bg iframe { pointer-events:none; transform: scale(1.32); filter: saturate(.9) contrast(1.06); } .maze-footer-overlay { background: radial-gradient(circle at center, rgba(157,78,221,.22), transparent 34%), linear-gradient(180deg, rgba(5,2,10,.74), rgba(5,2,10,.92)); z-index:1; } .maze-footer-content { position:relative; z-index:2; text-align:center; padding:70px 24px; } .maze-footer-content h2 { margin:0 0 28px; font-size:clamp(46px,8vw,110px); line-height:.8; letter-spacing:-.06em; color:#fff; font-weight:1000; text-shadow:0 24px 90px rgba(157,78,221,.45); } .maze-footer-content p { color:rgba(255,255,255,.62); letter-spacing:.18em; text-transform:uppercase; font-size:11px; margin-top:28px; } .maze-footer-socials { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } .maze-footer-socials a { width:48px; height:48px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); display:grid; place-items:center; transition:.25s ease; backdrop-filter:blur(14px); } .maze-footer-socials a:hover { transform:translateY(-5px); background:rgba(157,78,221,.24); border-color:rgba(255,255,255,.38); } .maze-footer-socials svg { width:22px; height:22px; fill:#fff; } .maze-bio-more { margin-top: 24px; } .maze-feature-discography-8 { max-width:1180px; } .maze-wc-home-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } .maze-wc-card { border:1px solid rgba(255,255,255,.1); border-radius:26px; padding:14px; list-style:none; background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035)); box-shadow:0 24px 80px rgba(0,0,0,.24); } .maze-wc-img { display:block; aspect-ratio:1/1; border-radius:18px; overflow:hidden; background:rgba(255,255,255,.05); } .maze-wc-img img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; } .maze-wc-card:hover .maze-wc-img img { transform:scale(1.08); } .maze-wc-card h2, .maze-wc-card h3 { color:#fff; font-size:14px; margin:15px 0 8px; line-height:1.25; font-weight:800; } .maze-wc-card .price { color:#fff; font-weight:900; margin-bottom:12px; } .maze-wc-card .button, .single_add_to_cart_button, .checkout-button, .woocommerce button.button, .woocommerce a.button { display:inline-flex !important; align-items:center; justify-content:center; border:0 !important; border-radius:999px !important; padding:12px 16px !important; background:linear-gradient(135deg,var(--purple),var(--pink)) !important; color:#fff !important; text-transform:uppercase; letter-spacing:.13em; font-size:10px !important; font-weight:800 !important; } .maze-real-gallery .maze-photo-tile, .maze-photo-page-card, .maze-bio-photo-strip a { display:block; overflow:hidden; border-radius:26px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05); box-shadow:0 25px 80px rgba(0,0,0,.28); } .maze-real-gallery .maze-photo-tile img, .maze-photo-page-card img, .maze-bio-photo-strip img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease, filter .45s ease; } .maze-real-gallery .maze-photo-tile:hover img, .maze-photo-page-card:hover img, .maze-bio-photo-strip a:hover img { transform:scale(1.08); filter:brightness(1.08); } .maze-video-grid-real { grid-template-columns: repeat(4,minmax(0,1fr)); } .maze-video-thumb { padding:0; min-height:260px; overflow:hidden; position:relative; background:#090512; } .maze-video-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.72; transition:transform .45s ease; } .maze-video-thumb:hover img { transform:scale(1.08); } .maze-video-thumb::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent,rgba(5,2,10,.9)); z-index:1; } .maze-video-thumb .play { position:absolute; z-index:3; top:50%; left:50%; transform:translate(-50%,-50%); width:58px; height:58px; display:grid; place-items:center; border-radius:999px; border:1px solid rgba(255,255,255,.5); background:rgba(0,0,0,.38); backdrop-filter:blur(12px); } .maze-video-thumb h3 { position:relative; z-index:2; margin:0; padding:0 20px 22px; font-size:14px; } .maze-lightbox { position:fixed; inset:0; z-index:100000; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(1,0,6,.88); backdrop-filter:blur(18px); } .maze-lightbox.is-open { display:flex; } .maze-lightbox-close { position:absolute; top:22px; right:24px; width:48px; height:48px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(255,255,255,.08); color:#fff; font-size:30px; cursor:pointer; z-index:2; } .maze-lightbox-stage { width:min(1100px,96vw); max-height:86vh; display:grid; place-items:center; } .maze-lightbox-stage img { max-width:100%; max-height:86vh; border-radius:18px; box-shadow:0 30px 100px #000; } .maze-lightbox-stage iframe { width:min(1100px,96vw); aspect-ratio:16/9; border:0; border-radius:18px; box-shadow:0 30px 100px #000; } .maze-bio-hero, .maze-simple-hero, .maze-shop-hero { min-height:76vh; display:flex; align-items:flex-end; overflow:hidden; } .maze-bio-hero-bg, .maze-bio-hero-overlay { position:absolute; inset:0; } .maze-bio-hero-bg { background-size:cover; background-position:center; filter:contrast(1.05) saturate(1.05); } .maze-bio-hero-overlay { background:linear-gradient(90deg,rgba(5,2,10,.88),rgba(5,2,10,.28),rgba(5,2,10,.72)), linear-gradient(180deg,rgba(5,2,10,.18),#05020a); } .maze-bio-hero-content, .maze-simple-hero > *, .maze-shop-hero > * { position:relative; z-index:2; max-width:1180px; width:100%; margin:0 auto; } .maze-bio-hero h1, .maze-simple-hero h1, .maze-shop-hero h1 { margin:0; font-size:clamp(66px,13vw,170px); line-height:.8; letter-spacing:-.08em; color:#fff; text-transform:uppercase; } .maze-bio-hero p, .maze-simple-hero p, .maze-shop-hero p { max-width:650px; color:rgba(255,255,255,.75); line-height:1.8; } .maze-bio-story { width:min(1180px,calc(100% - 44px)); margin:0 auto; padding:80px 0 120px; } .maze-bio-intro-3d { display:grid; grid-template-columns:.82fr 1.18fr; gap:54px; align-items:center; } .maze-bio-portrait { border-radius:36px; overflow:hidden; min-height:620px; border:1px solid rgba(255,255,255,.12); box-shadow:0 40px 140px rgba(0,0,0,.42); } .maze-bio-portrait img { width:100%; height:620px; object-fit:cover; } .maze-bio-copy h2 { font-size:clamp(38px,5vw,74px); line-height:.92; margin:0 0 25px; letter-spacing:-.045em; color:#fff; } .maze-bio-copy p, .maze-bio-editorial p { color:rgba(255,255,255,.72); line-height:1.95; font-size:15px; } .maze-bio-panels { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:70px 0; } .maze-bio-panels article { border:1px solid rgba(255,255,255,.1); border-radius:30px; padding:28px; background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); transform:perspective(900px) rotateX(2deg); box-shadow:0 24px 90px rgba(0,0,0,.24); } .maze-bio-panels span { display:block; font-size:42px; color:var(--blue); font-weight:1000; margin-bottom:12px; } .maze-bio-panels h3 { color:#fff; margin:0 0 10px; } .maze-bio-panels p { color:rgba(255,255,255,.65); line-height:1.7; } .maze-bio-editorial { display:grid; grid-template-columns:1fr 1fr; gap:42px; } .maze-bio-photo-strip { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:70px; } .maze-bio-photo-strip a { aspect-ratio:3/4; border-radius:22px; } .maze-simple-hero { background:radial-gradient(circle at 70% 20%,rgba(157,78,221,.4),transparent 30%),linear-gradient(180deg,#090315,#05020a); } .maze-photo-page-grid { width:min(1180px,calc(100% - 44px)); margin:0 auto; padding:80px 0 130px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .maze-photo-page-card { aspect-ratio:1/1; border-radius:24px; } .maze-photo-page-card.large { grid-column:span 2; grid-row:span 2; } .maze-shop-hero { min-height:62vh; background:radial-gradient(circle at 72% 24%,rgba(255,47,214,.25),transparent 34%),radial-gradient(circle at 20% 20%,rgba(0,212,255,.18),transparent 30%),linear-gradient(180deg,#0b0318,#05020a); } .maze-wc-archive { width:min(1180px,calc(100% - 44px)); margin:0 auto; padding:70px 0 130px; } ul.products { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; padding:0 !important; margin:0 !important; } .woocommerce .quantity input.qty { background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.15); border-radius:14px; padding:12px; } .woocommerce table.shop_table, .woocommerce-cart-form, .cart_totals, .woocommerce-checkout-review-order, .woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content { border:1px solid rgba(255,255,255,.12) !important; border-radius:28px !important; background:rgba(255,255,255,.05) !important; padding:22px; color:#fff; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { color:#fff; border-color:rgba(255,255,255,.1) !important; } .woocommerce input.input-text, .woocommerce textarea, .woocommerce select { background:rgba(255,255,255,.07) !important; color:#fff !important; border:1px solid rgba(255,255,255,.13) !important; border-radius:16px !important; padding:13px !important; } .maze-single-product-panel { width:min(1180px,calc(100% - 44px)); margin:0 auto; padding-top:150px; } .woocommerce div.product { color:#fff; } .woocommerce div.product div.images img { border-radius:26px; background:rgba(255,255,255,.04); } .woocommerce div.product .product_title { color:#fff; font-size:clamp(34px,5vw,70px); letter-spacing:-.05em; } .woocommerce div.product p.price { color:#fff; font-size:28px; font-weight:900; } @media(max-width:980px){ .maze-wc-home-grid,.maze-video-grid-real,ul.products,.maze-photo-page-grid,.maze-feature-discography-8{grid-template-columns:repeat(2,1fr)!important;} .maze-bio-intro-3d,.maze-bio-editorial{grid-template-columns:1fr;} .maze-bio-panels{grid-template-columns:1fr;} .maze-bio-photo-strip{grid-template-columns:repeat(3,1fr);} } @media(max-width:620px){ .maze-wc-home-grid,.maze-video-grid-real,ul.products,.maze-photo-page-grid,.maze-feature-discography-8{grid-template-columns:1fr!important;} .maze-bio-photo-strip{grid-template-columns:repeat(2,1fr);} .maze-footer-bg iframe{transform:scale(2.2);} } /* Round 3 updates: hero CTAs, home bio slider, certifications, refined stats */ .maze-bio-home-updated { max-width: none; margin: 0; width: 100%; padding-left: max(5vw,22px); padding-right: max(5vw,22px); background: radial-gradient(circle at 18% 22%, rgba(157,78,221,.18), transparent 32%), radial-gradient(circle at 88% 70%, rgba(0,212,255,.10), transparent 28%), linear-gradient(135deg, #05020a 0%, #090316 44%, #05020a 100%) !important; } .maze-bio-home-updated .maze-bio-image, .maze-bio-home-updated .maze-bio-text { max-width: 100%; } .maze-bio-slider { position: relative; min-height: 245px; } .maze-bio-slide { display: none; animation: mazeSlideFade .55s ease both; } .maze-bio-slide.is-active { display: block; } @keyframes mazeSlideFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .maze-bio-dots { display: flex; gap: 9px; align-items: center; margin-top: 18px; } .maze-bio-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.28); cursor: pointer; transition: .25s ease; } .maze-bio-dots button.is-active { width: 26px; background: linear-gradient(90deg, var(--purple), var(--pink)); } .maze-stats-four { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-top: 24px; } .maze-stats-four div { padding: 14px 12px; border-radius: 18px; } .maze-stats-four strong { font-size: 24px; line-height: 1; color: #fff; } .maze-stats-four span { display: block; margin-top: 7px; font-size: 10px; line-height: 1.25; text-transform: uppercase; letter-spacing: .08em; } .maze-certifications { min-height: auto; display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 54px; overflow: hidden; background: radial-gradient(circle at 24% 40%, rgba(255,209,102,.13), transparent 32%), radial-gradient(circle at 78% 20%, rgba(157,78,221,.16), transparent 28%), linear-gradient(180deg,#090316,#05020a) !important; } .maze-cert-visual { position: relative; z-index: 2; border-radius: 36px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 45px 140px rgba(0,0,0,.42); background: rgba(255,255,255,.04); } .maze-cert-visual img { width: 100%; height: 100%; object-fit: cover; } .maze-cert-copy { position: relative; z-index: 2; max-width: 720px; } .maze-cert-copy h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(42px, 5vw, 76px); line-height: .9; letter-spacing: -.045em; margin: 0 0 28px; color: #fff; } .maze-cert-copy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .maze-cert-copy li { position: relative; padding: 14px 18px 14px 48px; border: 1px solid rgba(255,255,255,.11); border-radius: 18px; background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); color: rgba(255,255,255,.78); line-height: 1.45; font-size: 14px; } .maze-cert-copy li::before { content: ''; position: absolute; left: 18px; top: 50%; width: 13px; height: 13px; transform: translateY(-50%); border-radius: 999px; background: radial-gradient(circle, #fff, var(--gold) 55%, rgba(255,209,102,.25)); box-shadow: 0 0 24px rgba(255,209,102,.55); } .maze-video-thumb .play { border: 0; background: transparent; backdrop-filter: none; width: 66px; height: 66px; } .maze-video-thumb .play img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 32px rgba(0,0,0,.45)); } .maze-bio-panels-four { grid-template-columns: repeat(4, 1fr); } .maze-bio-panels-four article { padding: 20px; border-radius: 24px; } .maze-bio-panels-four span { font-size: 34px; margin-bottom: 7px; } .maze-bio-panels-four h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; line-height: 1.25; } @media(max-width: 980px){ .maze-certifications { grid-template-columns: 1fr; } .maze-stats-four, .maze-bio-panels-four { grid-template-columns: repeat(2, minmax(0,1fr)); } .maze-bio-slider { min-height: 320px; } } @media(max-width: 620px){ .maze-stats-four, .maze-bio-panels-four { grid-template-columns: 1fr; } .maze-bio-slider { min-height: 420px; } } /* Round 4: French text pass + modern biography page */ .maze-bio-home-updated .maze-bio-text .maze-kicker, .maze-section-head .maze-kicker, .maze-book-copy .maze-kicker { letter-spacing: .14em; } .maze-bio-home-updated { background: radial-gradient(circle at 15% 24%, rgba(157,78,221,.20), transparent 32%), radial-gradient(circle at 86% 68%, rgba(255,47,214,.12), transparent 30%), linear-gradient(135deg, #070111 0%, #120522 48%, #070111 100%) !important; } .maze-bio-home-updated::before { content:''; position:absolute; inset:0; pointer-events:none; background: linear-gradient(90deg, rgba(255,255,255,.025), transparent 28%, transparent 72%, rgba(255,255,255,.025)); opacity:.45; } .maze-bio-home-updated > * { position:relative; z-index:1; } .maze-bio-home-updated .maze-bio-image img { object-position:center; } .maze-bio-slider { min-height: 286px; } .maze-bio-slide p { font-size: 14.5px; line-height: 1.82; } .maze-bio-page-modern .maze-bio-hero-content .maze-kicker { color: #fff; } .maze-bio-story-modern { padding-top: 96px; } .maze-bio-modern-intro { display:grid; grid-template-columns: .9fr 1.1fr; gap: 58px; align-items:center; margin-bottom: 54px; } .maze-bio-modern-portrait { min-height: 660px; border-radius: 42px; overflow:hidden; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.04); box-shadow: 0 50px 150px rgba(0,0,0,.5), 0 0 90px rgba(157,78,221,.12); } .maze-bio-modern-portrait img { width:100%; height:660px; object-fit:cover; object-position:center; display:block; } .maze-bio-modern-opening { padding: 36px; border: 1px solid rgba(255,255,255,.10); border-radius: 34px; background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); box-shadow: 0 30px 120px rgba(0,0,0,.26); } .maze-bio-modern-opening h2 { margin:0 0 24px; color:#fff; font-size: clamp(42px, 5.8vw, 86px); line-height:.88; letter-spacing:-.06em; font-family:'Cormorant Garamond', serif; } .maze-bio-lead-text { font-size: 18px !important; line-height: 1.85 !important; color: rgba(255,255,255,.78) !important; } .maze-bio-mini-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top: 30px; } .maze-bio-mini-stats article { border-radius:20px; padding:18px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.055); } .maze-bio-mini-stats strong { display:block; color:#fff; font-size:24px; font-weight:1000; margin-bottom:4px; } .maze-bio-mini-stats span { color:rgba(255,255,255,.62); font-size:11px; text-transform:uppercase; letter-spacing:.1em; } .maze-bio-stats-refined { margin: 34px 0 76px; } .maze-bio-chapter-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; align-items:stretch; } .maze-bio-chapter { position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:30px; padding:28px; min-height:300px; background: radial-gradient(circle at 30% 0%, rgba(157,78,221,.16), transparent 38%), linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.026)); box-shadow: 0 30px 100px rgba(0,0,0,.22); } .maze-bio-chapter.big { grid-column: span 2; } .maze-bio-chapter.dark { background: radial-gradient(circle at 80% 10%, rgba(255,47,214,.18), transparent 36%), linear-gradient(180deg, rgba(20,8,34,.92), rgba(7,2,13,.9)); } .maze-bio-chapter.finale { grid-column: span 3; min-height: 360px; background: radial-gradient(circle at 82% 20%, rgba(255,209,102,.14), transparent 34%), radial-gradient(circle at 16% 70%, rgba(157,78,221,.18), transparent 35%), linear-gradient(135deg, rgba(18,5,34,.96), rgba(4,1,8,.98)); } .maze-bio-chapter > span { position:absolute; right:22px; top:18px; font-size:54px; line-height:1; font-weight:1000; color:rgba(255,255,255,.06); letter-spacing:-.08em; } .maze-bio-chapter h3 { position:relative; z-index:1; margin:0 0 16px; color:#fff; font-size: clamp(25px, 2.7vw, 42px); line-height:1; letter-spacing:-.035em; } .maze-bio-chapter p { position:relative; z-index:1; color:rgba(255,255,255,.72); line-height:1.85; font-size:14.5px; } .maze-bio-chapter.visual { padding:0; min-height:360px; } .maze-bio-chapter.visual img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .65s ease; } .maze-bio-chapter.visual:hover img { transform: scale(1.06); } .maze-bio-chapter blockquote { margin: 26px 0 0; padding: 22px 26px; border-left: 4px solid var(--purple); border-radius: 18px; background: rgba(255,255,255,.06); color:#fff; font-size: clamp(24px, 3vw, 38px); line-height:1.1; font-family:'Cormorant Garamond', serif; } .maze-bio-page-modern .maze-bio-photo-strip { margin-top: 86px; } @media(max-width:980px){ .maze-bio-modern-intro, .maze-bio-chapter-grid { grid-template-columns:1fr; } .maze-bio-chapter.big, .maze-bio-chapter.finale { grid-column: auto; } .maze-bio-modern-portrait, .maze-bio-modern-portrait img { min-height: auto; height: auto; } .maze-bio-mini-stats { grid-template-columns:1fr; } } @media(max-width:620px){ .maze-bio-modern-opening { padding:24px; } .maze-bio-slider { min-height: 520px; } .maze-bio-chapter { padding:22px; border-radius:24px; } } /* Round 5: simpler, classier biography page */ .maze-bio-page-simple { background: #070111; } .maze-bio-simple-main { width:min(1180px, calc(100% - 48px)); margin:0 auto; padding: 96px 0 120px; } .maze-bio-simple-intro { display:grid; grid-template-columns: .86fr 1.14fr; gap: 56px; align-items:center; margin-bottom: 44px; } .maze-bio-simple-photo { border-radius: 34px; overflow:hidden; min-height: 620px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); box-shadow: 0 42px 120px rgba(0,0,0,.45); } .maze-bio-simple-photo img { width:100%; height:620px; object-fit:cover; object-position:center; display:block; } .maze-bio-simple-copy { max-width: 680px; } .maze-bio-simple-copy h2 { margin: 0 0 28px; color:#fff; font-family:'Cormorant Garamond', serif; font-size: clamp(42px, 5.2vw, 78px); line-height:.92; letter-spacing:-.055em; } .maze-bio-simple-copy p { color: rgba(255,255,255,.74); font-size: 17px; line-height: 1.85; margin: 0 0 18px; } .maze-bio-simple-stats { margin: 42px 0 66px !important; } .maze-bio-simple-stats article { padding: 22px 18px !important; border-radius: 22px !important; min-height: auto !important; } .maze-bio-simple-stats article span { font-size: 40px !important; } .maze-bio-simple-stats article h3 { font-size: 13px !important; line-height:1.25 !important; } .maze-bio-simple-sections { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; } .maze-bio-simple-sections article { position:relative; border:1px solid rgba(255,255,255,.10); border-radius: 28px; padding: 34px; background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025)); box-shadow: 0 26px 90px rgba(0,0,0,.18); } .maze-bio-simple-sections article span { display:inline-flex; align-items:center; justify-content:center; width: 38px; height: 38px; border-radius: 50%; color:#fff; font-size: 12px; font-weight:900; background: linear-gradient(135deg, var(--purple), var(--pink)); margin-bottom: 22px; } .maze-bio-simple-sections h3 { color:#fff; margin:0 0 14px; font-size: clamp(24px, 2.4vw, 34px); line-height:1.05; letter-spacing:-.03em; } .maze-bio-simple-sections p { margin:0; color: rgba(255,255,255,.70); line-height:1.82; font-size: 14.5px; } .maze-bio-simple-quote { margin-top: 20px; border:1px solid rgba(255,255,255,.11); border-radius: 32px; padding: 42px; background: radial-gradient(circle at 15% 20%, rgba(157,78,221,.20), transparent 38%), linear-gradient(135deg, rgba(18,5,34,.92), rgba(5,1,10,.94)); } .maze-bio-simple-quote p { max-width: 860px; margin:0 0 24px; color: rgba(255,255,255,.74); line-height:1.8; } .maze-bio-simple-quote blockquote { margin:0; color:#fff; font-family:'Cormorant Garamond', serif; font-size: clamp(32px, 4vw, 56px); line-height:1; letter-spacing:-.045em; } @media(max-width:980px){ .maze-bio-simple-intro, .maze-bio-simple-sections { grid-template-columns: 1fr; } .maze-bio-simple-photo, .maze-bio-simple-photo img { height:auto; min-height:auto; } } @media(max-width:620px){ .maze-bio-simple-main { width:min(100% - 28px, 1180px); padding: 70px 0 90px; } .maze-bio-simple-sections article, .maze-bio-simple-quote { padding: 26px; border-radius: 24px; } } .maze-hero-highlights { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 18px 0 24px; } .maze-hero-highlights strong { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 16px; border: 1px solid rgba(183, 130, 255, .42); background: linear-gradient(135deg, rgba(132, 57, 255, .30), rgba(255,255,255,.10)); color: #fff; font-size: 18px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 0 18px rgba(183,130,255,.35); box-shadow: 0 14px 36px rgba(61, 15, 130, .35), inset 0 1px 0 rgba(255,255,255,.18); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } @media (max-width: 640px) { .maze-hero-highlights { gap: 8px; } .maze-hero-highlights strong { font-size: 14px; padding: 9px 14px; } } /* Professional WooCommerce single product page */ .maze-single-product-wrap { background: radial-gradient(circle at 18% 4%, rgba(157, 78, 221, .22), transparent 34%), radial-gradient(circle at 88% 12%, rgba(255, 47, 214, .10), transparent 32%), #070111; min-height: 100vh; } .maze-single-product-panel { width: min(1280px, calc(100% - 48px)); margin: 0 auto; padding: 150px 0 120px; } .maze-product-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 28px; color: rgba(255,255,255,.48); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .maze-product-breadcrumb a { color: rgba(255,255,255,.72); text-decoration: none; } .maze-product-breadcrumb a:hover { color: #fff; } .maze-product-breadcrumb strong { color: rgba(255,255,255,.92); font-weight: 800; } .maze-product-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr); gap: clamp(34px, 5vw, 72px); align-items: start; } .maze-product-gallery, .maze-product-summary, .maze-product-tab-card { border: 1px solid rgba(255,255,255,.10); background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); box-shadow: 0 42px 120px rgba(0,0,0,.32); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .maze-product-gallery { border-radius: 36px; padding: 18px; } .maze-product-main-image { position: relative; overflow: hidden; border-radius: 28px; background: radial-gradient(circle at 50% 0%, rgba(157,78,221,.22), rgba(255,255,255,.035) 42%, rgba(0,0,0,.22)); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; } .maze-product-main-image img { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity .22s ease, transform .5s ease; } .maze-product-main-image:hover img { transform: scale(1.025); } .maze-product-main-image.is-changing img { opacity: .15; } .maze-product-placeholder, .maze-product-placeholder img { width: 100%; height: 100%; object-fit: contain; } .maze-product-thumbs { display: flex; gap: 12px; overflow-x: auto; padding: 16px 2px 2px; scrollbar-width: thin; } .maze-product-thumb { flex: 0 0 88px; width: 88px; height: 88px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 5px; background: rgba(255,255,255,.045); cursor: pointer; opacity: .70; transition: transform .2s ease, opacity .2s ease, border-color .2s ease, background .2s ease; } .maze-product-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 13px; display: block; } .maze-product-thumb:hover, .maze-product-thumb.is-active { opacity: 1; transform: translateY(-2px); border-color: rgba(190, 142, 255, .75); background: rgba(157,78,221,.18); } .maze-product-summary { border-radius: 36px; padding: clamp(28px, 4vw, 46px); position: sticky; top: 110px; } .maze-product-summary .product_title { color: #fff; margin: 10px 0 18px; font-family: 'Cormorant Garamond', serif; font-size: clamp(42px, 5vw, 72px); line-height: .92; letter-spacing: -.055em; } .maze-product-rating { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.66); margin-bottom: 18px; } .maze-product-price { color: #fff; font-size: clamp(28px, 3vw, 42px); font-weight: 900; margin: 20px 0 18px; } .maze-product-price del { color: rgba(255,255,255,.38); font-size: .72em; } .maze-product-price ins { text-decoration: none; } .maze-product-short { color: rgba(255,255,255,.72); line-height: 1.75; font-size: 15px; margin-bottom: 28px; } .maze-product-actions { margin: 28px 0; } .maze-product-actions form.cart { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .maze-product-actions .quantity { display: inline-flex; height: 54px; } .maze-product-actions .qty { width: 86px; height: 54px; border-radius: 18px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; text-align: center; font-size: 16px; outline: none; } .maze-product-actions .single_add_to_cart_button, .maze-product-actions button.button { min-height: 54px; border: 0; border-radius: 18px; padding: 0 28px; color: #fff; background: linear-gradient(135deg, var(--purple), var(--pink)); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; box-shadow: 0 18px 45px rgba(157,78,221,.28); } .maze-product-actions .single_add_to_cart_button:hover { transform: translateY(-1px); box-shadow: 0 24px 58px rgba(157,78,221,.36); } .maze-product-trust { display: grid; gap: 10px; margin-top: 30px; } .maze-product-trust div { border: 1px solid rgba(255,255,255,.09); border-radius: 18px; padding: 14px 16px; background: rgba(255,255,255,.045); } .maze-product-trust strong { display: block; color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; } .maze-product-trust span { color: rgba(255,255,255,.58); font-size: 13px; } .maze-product-meta { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.56); font-size: 13px; } .maze-product-meta a { color: rgba(255,255,255,.78); text-decoration: none; } .maze-product-tabs { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 54px; } .maze-product-tab-card { border-radius: 32px; padding: clamp(26px, 4vw, 44px); } .maze-product-tab-card h2 { margin: 0 0 18px; color: #fff; font-size: clamp(28px, 3vw, 44px); line-height: 1; letter-spacing: -.035em; } .maze-product-description, .maze-product-description p, .maze-product-tab-card p { color: rgba(255,255,255,.70); line-height: 1.82; } .maze-related-products { margin-top: 78px; } .maze-related-products .maze-shop-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; } .maze-single-product-panel .woocommerce-message, .maze-single-product-panel .woocommerce-info, .maze-single-product-panel .woocommerce-error { border-radius: 20px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.07); color: #fff; padding: 18px 22px; margin-bottom: 24px; } .maze-single-product-panel .woocommerce-message a, .maze-single-product-panel .woocommerce-info a { color:#fff; font-weight:800; } @media (max-width: 1100px) { .maze-product-layout { grid-template-columns: 1fr; } .maze-product-summary { position: static; } } @media (max-width: 760px) { .maze-single-product-panel { width: min(100% - 28px, 1280px); padding-top: 126px; } .maze-product-gallery { padding: 12px; border-radius: 26px; } .maze-product-main-image { border-radius: 20px; } .maze-product-summary { border-radius: 26px; padding: 24px; } .maze-product-thumb { flex-basis: 72px; width: 72px; height: 72px; border-radius: 15px; } .maze-product-actions form.cart { display: grid; grid-template-columns: 1fr; } .maze-product-actions .quantity, .maze-product-actions .qty, .maze-product-actions .single_add_to_cart_button { width: 100%; } .maze-related-products .maze-shop-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 520px) { .maze-related-products .maze-shop-grid { grid-template-columns: 1fr; } } /* Final content refinements */ .maze-hero h2 { margin-bottom: 18px; } .maze-hero-highlights { align-items: center; gap: 28px; margin: 18px 0 26px; } .maze-hero-highlights strong { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: rgba(255,255,255,.94); font-size: clamp(22px, 2.15vw, 34px); font-weight: 950; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 0 18px rgba(0,212,255,.14); } .maze-hero-highlights strong span { color: #00d4ff; text-shadow: 0 0 18px rgba(0,212,255,.60), 0 0 42px rgba(0,212,255,.28); } .maze-bio-scrollbox { position: relative; height: 330px; overflow: hidden; border-radius: 26px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.026)), radial-gradient(circle at 18% 0%, rgba(0,212,255,.12), transparent 38%); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 24px 70px rgba(0,0,0,.18); margin: 24px 0 24px; } .maze-bio-scrollbox::before, .maze-bio-scrollbox::after { content: ""; position: absolute; left: 0; right: 14px; height: 42px; pointer-events: none; z-index: 2; } .maze-bio-scrollbox::before { top: 0; background: linear-gradient(180deg, rgba(11,3,24,.94), transparent); } .maze-bio-scrollbox::after { bottom: 0; background: linear-gradient(0deg, rgba(11,3,24,.94), transparent); } .maze-bio-scroll-inner { height: 100%; overflow-y: auto; padding: 34px 34px 40px; scrollbar-width: thin; scrollbar-color: rgba(0,212,255,.65) rgba(255,255,255,.08); } .maze-bio-scroll-inner::-webkit-scrollbar { width: 8px; } .maze-bio-scroll-inner::-webkit-scrollbar-track { background: rgba(255,255,255,.08); border-radius: 99px; } .maze-bio-scroll-inner::-webkit-scrollbar-thumb { background: #00d4ff; border-radius: 99px; } .maze-bio-scroll-inner p { margin: 0 0 18px; color: rgba(255,255,255,.74); font-size: 15.5px; line-height: 1.82; } .maze-bio-scroll-inner strong { color: #fff; font-weight: 900; } .maze-bio-scroll-inner strong span, .maze-stats-five strong, .maze-bio-simple-stats article span { color: #00d4ff !important; } .maze-stats-five { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 10px !important; } .maze-stats-five div { padding: 15px 10px !important; border-radius: 18px !important; } .maze-stats-five strong { font-size: 25px !important; } .maze-stats-five span { font-size: 10px !important; line-height: 1.25; } /* Subtle certifications strip */ .maze-certifications-subtle { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 64px 0; display: block; } .maze-cert-subtle-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; } .maze-cert-subtle-head h2 { margin: 0; color: #fff; font-size: clamp(28px, 3.2vw, 48px); line-height: .98; letter-spacing: -.04em; } .maze-cert-subtle-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; } .maze-cert-subtle-list article { border: 1px solid rgba(255,255,255,.10); border-radius: 18px; padding: 16px 18px; background: linear-gradient(135deg, rgba(255,255,255,.060), rgba(255,255,255,.022)); box-shadow: 0 18px 55px rgba(0,0,0,.14); } .maze-cert-subtle-list strong { display: block; color: #fff; font-size: 13px; margin-bottom: 6px; } .maze-cert-subtle-list span { display: inline-flex; color: #00d4ff; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } /* Cleaner section headings after text edits */ .maze-home-discography .maze-section-head .maze-kicker:empty, .maze-home-shop .maze-section-head .maze-kicker:empty { display: none; } .maze-home-shop .maze-section-head h2 { text-transform: none; } #videos .maze-section-head h2 { margin-top: 0; } .maze-footer-video h2 { letter-spacing: .08em; } .maze-footer-copyright { margin-top: 12px !important; font-size: 12px !important; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.70) !important; } /* Brighter biography hero and compact bio stats */ .maze-bio-page-simple .maze-bio-hero-overlay { background: linear-gradient(90deg, rgba(5,1,10,.66), rgba(5,1,10,.20)), linear-gradient(0deg, rgba(7,1,17,.55), rgba(7,1,17,.08)) !important; } .maze-bio-page-simple .maze-bio-hero-bg { filter: brightness(1.20) contrast(1.04) saturate(1.08) !important; } .maze-bio-simple-stats { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 10px !important; } .maze-bio-simple-stats article { padding: 15px 10px !important; border-radius: 18px !important; } .maze-bio-simple-stats article span { font-size: 28px !important; } .maze-bio-simple-stats article h3 { font-size: 10px !important; letter-spacing: .08em; } .maze-bio-simple-sections article p + p { margin-top: 14px; } @media (max-width: 980px) { .maze-stats-five, .maze-bio-simple-stats, .maze-cert-subtle-list { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } .maze-cert-subtle-head { display: block; } } @media (max-width: 620px) { .maze-hero-highlights { gap: 12px; } .maze-hero-highlights strong { font-size: 17px; } .maze-bio-scrollbox { height: 390px; } .maze-bio-scroll-inner { padding: 28px 24px 34px; } .maze-stats-five, .maze-bio-simple-stats, .maze-cert-subtle-list { grid-template-columns: 1fr !important; } } /* Latest correction pass */ .maze-bio-home-updated { width: min(1280px, calc(100% - 48px)); margin-left: auto; margin-right: auto; align-items: center; } .maze-bio-home-updated .maze-bio-image { background-image: none !important; min-height: auto !important; } .maze-bio-home-updated .maze-bio-image img { width: 100%; height: auto !important; max-height: 760px; object-fit: contain !important; object-position: center top !important; } .maze-bio-home-updated .maze-bio-text { justify-self: start; text-align: left; } .maze-bio-home-updated .maze-bio-text h2, .maze-bio-simple-copy h2, .maze-section-head h2, .maze-cert-subtle-head h2, .maze-book-copy h2, .maze-simple-hero h1, .maze-music-hero-content h1, .maze-music-hero-content h2, .maze-category-title-row h2, .maze-footer-video h2 { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } .maze-bio-home-updated .maze-bio-text h2 { text-align: left !important; margin-left: 0 !important; transform: none !important; } .maze-bio-scroll-inner strong span { color: #00d4ff !important; text-shadow: 0 0 16px rgba(0,212,255,.42); } .maze-cert-subtle-head { display: block !important; text-align: center !important; margin-left: auto; margin-right: auto; } .maze-cert-subtle-head .maze-kicker { text-align: center; } .maze-cert-subtle-head h2 { text-align: center !important; margin-top: 8px !important; } .maze-cert-subtle-list article { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .cert-dots { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; min-width: 54px; font-style: normal; } .cert-dots i { display: block; width: 9px; height: 9px; border-radius: 999px; } .cert-dots.gold i { background: #ffd166; box-shadow: 0 0 14px rgba(255,209,102,.8), 0 0 30px rgba(255,209,102,.25); } .cert-dots.silver i, .cert-dots.platinum i { background: #e8edf5; box-shadow: 0 0 14px rgba(232,237,245,.82), 0 0 30px rgba(232,237,245,.28); } .maze-bio-simple-copy p strong { color: #fff; font-weight: 900; white-space: nowrap; } .maze-bio-simple-copy h2 { letter-spacing: -.03em; } .maze-bio-simple-quote { text-align: center; } .maze-bio-simple-quote blockquote { text-align: center !important; margin-left: auto; margin-right: auto; } .maze-photos-page-wrap .maze-simple-hero { text-align: left !important; align-items: flex-start !important; justify-content: center !important; padding-left: max(48px, calc((100vw - 1180px) / 2)) !important; padding-right: 48px !important; } .maze-photos-page-wrap .maze-simple-hero .maze-kicker, .maze-photos-page-wrap .maze-simple-hero h1, .maze-photos-page-wrap .maze-simple-hero p { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; } @media (min-width: 1600px) { .maze-bio-home-updated { width: min(1360px, calc(100% - 120px)); } .maze-bio-home-updated .maze-bio-text { max-width: 650px; } } @media (max-width: 980px) { .maze-bio-home-updated { width: min(100% - 34px, 1280px); } .cert-dots { min-width: auto; } } /* Premium gradient section title update */ .maze-gradient-title, .maze-bio-home-updated .maze-bio-text h2, .maze-cert-subtle-head h2, .maze-home-discography .maze-section-head h2, .maze-home-shop .maze-section-head h2, #videos .maze-section-head h2, .maze-book-copy h2, .maze-bio-hero-content h1 { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-weight: 1000 !important; letter-spacing: -0.065em !important; line-height: .92 !important; color: transparent !important; background: linear-gradient(105deg, #ffffff 0%, #ffffff 28%, #c9a8ff 48%, #8d4dff 72%, #ffffff 100%); -webkit-background-clip: text; background-clip: text; text-shadow: 0 0 34px rgba(157, 78, 221, .18); position: relative; } .maze-bio-home-updated .maze-bio-text h2 { font-size: clamp(54px, 6.5vw, 104px) !important; margin-bottom: 22px !important; } .maze-cert-subtle-head h2, .maze-home-discography .maze-section-head h2, .maze-home-shop .maze-section-head h2, #videos .maze-section-head h2, .maze-book-copy h2 { font-size: clamp(42px, 5.2vw, 82px) !important; } .maze-section-head h2::after, .maze-cert-subtle-head h2::after, .maze-book-copy h2::after, .maze-bio-home-updated .maze-bio-text h2::after { content: ""; display: block; width: 86px; height: 3px; margin-top: 18px; border-radius: 999px; background: linear-gradient(90deg, #ffffff, #9d4edd, transparent); box-shadow: 0 0 30px rgba(157, 78, 221, .45); } .maze-cert-subtle-head h2::after { margin-left: auto; margin-right: auto; } .maze-bio-hero-content h1 { font-size: clamp(72px, 10vw, 156px) !important; } .maze-blue-highlight { color: #00d4ff !important; font-weight: 950 !important; text-shadow: 0 0 18px rgba(0,212,255,.35); white-space: nowrap; } /* Photos page hero cleanup */ .maze-photos-page-wrap .maze-photos-hero-clean { min-height: 540px; display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; padding-left: max(54px, calc((100vw - 1180px) / 2)) !important; padding-right: 54px !important; } .maze-photos-hero-clean .maze-simple-hero-inner { max-width: 720px; width: 100%; text-align: left; } .maze-photos-hero-clean .maze-kicker { text-align: left !important; margin: 0 0 16px !important; } .maze-photos-hero-clean h1 { margin: 0 0 18px !important; text-align: left !important; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size: clamp(64px, 9vw, 136px) !important; line-height: .88 !important; letter-spacing: -.075em !important; font-weight: 1000 !important; color: transparent !important; background: linear-gradient(105deg, #ffffff 0%, #ffffff 30%, #c9a8ff 52%, #8d4dff 74%, #ffffff 100%); -webkit-background-clip: text; background-clip: text; } .maze-photos-hero-clean p { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; } .maze-photos-hero-clean .maze-simple-hero-inner > p:last-child { color: rgba(255,255,255,.74); font-size: clamp(16px, 1.7vw, 22px); max-width: 560px; line-height: 1.6; } @media (max-width: 720px) { .maze-photos-page-wrap .maze-photos-hero-clean { padding-left: 24px !important; padding-right: 24px !important; min-height: 440px; } .maze-section-head h2::after, .maze-book-copy h2::after, .maze-bio-home-updated .maze-bio-text h2::after { width: 64px; margin-top: 14px; } } /* Fine tune homepage title weights */ .maze-home-discography .maze-section-head h2, .maze-home-shop .maze-section-head h2, #videos .maze-section-head h2 { font-weight: 700 !important; letter-spacing: -0.035em !important; text-shadow: 0 0 22px rgba(157, 78, 221, .14) !important; } /* Smaller homepage catalogue/shop/video titles */ .maze-home-discography .maze-section-head h2, .maze-home-shop .maze-section-head h2, #videos .maze-section-head h2 { font-size: clamp(30px, 3.6vw, 56px) !important; font-weight: 600 !important; letter-spacing: -0.025em !important; } /* Certification and Photos hero correction */ .maze-cert-subtle-head h2 { font-size: clamp(30px, 3.4vw, 54px) !important; font-weight: 600 !important; letter-spacing: -0.025em !important; line-height: 1 !important; } .maze-cert-subtle-head .maze-kicker { font-size: 11px !important; font-weight: 600 !important; } .maze-photos-hero { min-height: 620px; } .maze-photos-hero .maze-music-hero-content { text-align: left !important; align-items: flex-start !important; max-width: 900px; margin-left: max(48px, calc((100vw - 1180px) / 2)) !important; margin-right: auto !important; padding-left: 0 !important; } .maze-photos-hero .maze-kicker, .maze-photos-hero h1, .maze-photos-hero h2 { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; } .maze-photos-hero h1 { font-size: clamp(64px, 8vw, 132px) !important; font-weight: 700 !important; letter-spacing: -0.06em !important; line-height: .86 !important; } .maze-photos-hero h2 { max-width: 680px; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size: clamp(18px, 2vw, 30px) !important; font-weight: 500 !important; letter-spacing: -0.02em !important; line-height: 1.25 !important; color: rgba(255,255,255,.78) !important; background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: rgba(255,255,255,.78) !important; } @media (max-width: 720px) { .maze-photos-hero .maze-music-hero-content { margin-left: 24px !important; padding-right: 24px !important; } .maze-photos-hero { min-height: 520px; } } /* Photos page subtitle size refinement */ .maze-photos-hero h2 { font-size: clamp(15px, 1.15vw, 18px) !important; font-weight: 400 !important; line-height: 1.65 !important; letter-spacing: 0.01em !important; max-width: 520px !important; color: rgba(255,255,255,.70) !important; -webkit-text-fill-color: rgba(255,255,255,.70) !important; } /* === DJ Maze Futuristic Hero + Global Menu Integration === */ :root { --bg: #02030a; --line: rgba(210, 200, 255, 0.24); --line-strong: rgba(210, 200, 255, 0.44); --text: #f8f3ff; --muted: rgba(245, 238, 255, 0.70); --faint: rgba(245, 238, 255, 0.42); --purple: #9f63ff; --blue: #8cc5ff; --panel: rgba(14, 15, 34, 0.38); --panel-dark: rgba(2, 4, 15, 0.32); } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; background: var(--bg); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); } a { color: inherit; text-decoration: none; } svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .socials svg path:first-child, .socials svg circle:first-child, .socials svg rect:first-child { stroke-width: 1.65; } .site-shell { min-height: 100vh; overflow: hidden; background: #02030a; } .hero { position: relative; min-height: 100vh; display: grid; place-items: center; padding: clamp(16px, 2vw, 28px); isolation: isolate; } .background { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(2,3,10,.40), rgba(2,3,11,.08) 48%, rgba(2,3,10,.20)), url("assets/images/hero/dj-maze-bg-hd.png"); background-size: cover; background-position: center; transform: scale(1.03) translate3d(0,0,0); transform-origin: center; will-change: transform; transition: transform .35s ease-out; z-index: -5; } .grain { position: absolute; inset: 0; opacity: .12; z-index: -3; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); mix-blend-mode: screen; transform: translate3d(0,0,0); transition: transform .4s ease-out; will-change: transform; } .aurora { position: absolute; width: 34vw; height: 34vw; border-radius: 50%; filter: blur(80px); opacity: .24; z-index: -4; pointer-events: none; transform: translate3d(0,0,0); transition: transform .45s ease-out; will-change: transform; } .aurora-one { background: #713dff; left: 4%; bottom: -17%; } .aurora-two { background: #7da9ff; right: 18%; bottom: 6%; opacity: .16; } /* The main hero frame is intentionally transparent: no big glass layer blurring the photo. */ .frame { position: relative; width: min(96vw, 1820px); aspect-ratio: 1672 / 941; min-height: min(92vh, 941px); border: 1px solid rgba(210,200,255,.25); border-radius: 16px; overflow: hidden; background: transparent; box-shadow: 0 0 0 1px rgba(120, 91, 220, .08), 0 30px 100px rgba(0,0,0,.42); } .frame::before { content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none; background: linear-gradient(135deg, rgba(255,255,255,.06), transparent 24%, transparent 76%, rgba(170,126,255,.08)); } .nav { position: absolute; top: clamp(18px, 3vw, 38px); left: clamp(22px, 3.3vw, 62px); right: clamp(22px, 3.3vw, 62px); height: 50px; display: grid; grid-template-columns: 220px 1fr auto; align-items: center; z-index: 5; letter-spacing: .42em; text-transform: uppercase; font-family: Syncopate, Orbitron, Inter, sans-serif; font-size: clamp(9px, .66vw, 12px); color: rgba(244,240,255,.82); } .brand { display: flex; align-items: center; gap: 24px; letter-spacing: .42em; font-weight: 700; } .logo-mark { width: 32px; height: 32px; display: grid; place-items: center; color: #cfb4ff; border: 1px solid rgba(183,142,255,.35); clip-path: polygon(50% 0, 100% 30%, 88% 100%, 12% 100%, 0 30%); text-shadow: 0 0 18px #9f5cff; font-family: Orbitron, sans-serif; } .nav-links { justify-self: center; display: flex; gap: clamp(38px, 5.1vw, 76px); } .nav-links a { position: relative; padding: 10px 0; transition: color .25s, text-shadow .25s, transform .25s, opacity .25s; } .nav-links a::after { content:""; position:absolute; left:50%; bottom:0; width:0; height:1px; transform:translateX(-50%); background: linear-gradient(90deg, transparent, rgba(236,229,255,.98), transparent); box-shadow: 0 0 14px rgba(159,99,255,.65), 0 0 28px rgba(124,176,255,.35); transition: width .28s ease, opacity .28s ease; opacity:.78; } .nav-links a:hover { color: #fff; transform: translateY(-1px); text-shadow: 0 0 18px var(--purple), 0 0 28px rgba(124,176,255,.26); } .nav-links a:hover::after { width: 112%; opacity: 1; } .nav-actions { justify-self: end; display: flex; align-items: center; gap: 12px; } .booking { min-width: 138px; padding: 17px 23px; border-radius: 9px; text-align: center; } .whatsapp-btn { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 12px; color: #f4fff8; border: 1px solid rgba(150, 255, 196, .34); background: linear-gradient(145deg, rgba(23, 159, 91, .38), rgba(4, 30, 20, .28)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 24px rgba(37, 211, 102, .20), 0 20px 60px rgba(0,0,0,.20); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease; } .whatsapp-btn svg { width: 23px; height: 23px; fill: currentColor; stroke: none; filter: drop-shadow(0 0 10px rgba(37, 211, 102, .45)); } .whatsapp-btn:hover { transform: translateY(-2px); border-color: rgba(177, 255, 211, .58); background: linear-gradient(145deg, rgba(37, 211, 102, .46), rgba(5, 34, 22, .32)); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 32px rgba(37, 211, 102, .30), 0 20px 60px rgba(0,0,0,.22); } .glass-lite, .glass-card { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(18,19,43,.48), rgba(4,6,20,.28)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 60px rgba(0,0,0,.22); } .hero-content { position: absolute; inset: 0; display: grid; grid-template-columns: 46% 1fr 23%; padding: 0 clamp(24px, 3.4vw, 64px); align-items: center; } .copy-block { grid-column: 1; margin-top: 42px; max-width: 590px; } .eyebrow, .card-label, .show-date, .show-location { text-transform: uppercase; letter-spacing: .46em; font-family: Orbitron, Inter, sans-serif; font-size: clamp(8px, .65vw, 11px); font-weight: 500; color: #c4aaff; } .copy-block h1 { margin: 26px 0 22px; font-size: clamp(76px, 8.5vw, 162px); line-height: .82; letter-spacing: .02em; font-weight: 800; font-family: Orbitron, Inter, sans-serif; background: linear-gradient(90deg, #a166ff 0%, #e0ceff 46%, #90c9ff 88%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 44px rgba(138,86,255,.36); } .intro { width: min(430px, 90%); color: var(--muted); font-size: clamp(15px, 1.1vw, 22px); line-height: 1.45; margin: 0 0 50px; } .actions { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; text-transform: uppercase; letter-spacing: .29em; font-family: Orbitron, Inter, sans-serif; font-size: clamp(9px, .66vw, 11px); font-weight: 600; white-space: nowrap; } .btn.primary { position: relative; overflow: hidden; isolation: isolate; min-width: 245px; padding: 17px 24px; border: 1px solid rgba(189, 146, 255, .72); border-radius: 10px; background: linear-gradient(135deg, rgba(125, 66, 255, .44), rgba(56, 38, 100, .22)); box-shadow: inset 0 0 22px rgba(184, 115, 255, .24), 0 0 26px rgba(140, 79, 255, .28); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease; animation: buttonPulse 2.8s ease-in-out infinite; } .btn.primary::before { content:""; position:absolute; top:-20%; bottom:-20%; left:-32%; width:26%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.08) 30%, rgba(255,255,255,.52) 50%, rgba(175,136,255,.16) 72%, transparent); transform: skewX(-22deg); filter: blur(7px); opacity:.92; pointer-events:none; z-index:1; transition: left .7s ease; } .btn.primary::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0; background: radial-gradient(circle at 12% 50%, rgba(202,152,255,.40), transparent 22%), radial-gradient(circle at 88% 50%, rgba(145,196,255,.30), transparent 22%); } .btn.primary > * { position: relative; z-index: 2; } .btn.primary:hover { transform: translateY(-2px); border-color: rgba(225, 206, 255, .85); background: linear-gradient(135deg, rgba(136, 74, 255, .52), rgba(64, 44, 116, .28)); box-shadow: inset 0 0 28px rgba(194, 132, 255, .30), 0 0 32px rgba(152, 92, 255, .36), 0 12px 36px rgba(41, 18, 80, .30); } .btn.primary:hover::before { left: 112%; } .icon-disc { width: 28px; height: 28px; display: grid; place-items: center; color: #f4ebff; flex: 0 0 auto; } .icon-disc svg { fill: rgba(255,255,255,.04); stroke-width: 1.65; } .ghost { color: rgba(247,242,255,.86); } .play-circle { width: 46px; height: 46px; display: grid; place-items: center; color: #f5edff; border: 1px solid rgba(201,188,255,.35); border-radius: 50%; background: rgba(8,10,26,.35); box-shadow: inset 0 0 14px rgba(151,116,255,.2), 0 0 18px rgba(142,99,255,.18); flex: 0 0 auto; } .play-circle svg { width: 24px; height: 24px; fill: rgba(255,255,255,.03); } .play-circle path, .icon-disc path { fill: currentColor; stroke: none; } .glass-card { border-radius: 14px; } .side-widgets { grid-column: 3; justify-self: end; width: min(345px, 100%); display: flex; flex-direction: column; gap: 22px; margin-top: 84px; } .player-card { padding: 23px 20px; } .card-label { margin: 0 0 18px; color: rgba(230,220,255,.72); letter-spacing: .31em; } .waveform { height: 50px; display: flex; align-items: center; gap: 4px; mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); } .waveform span { width: 3px; height: calc(12px + var(--h, 20) * 1px); border-radius: 999px; background: linear-gradient(180deg, #f0dcff, #8d59ff 55%, #85b7ff); box-shadow: 0 0 14px rgba(163,94,255,.8); animation: wave 1.8s ease-in-out infinite; animation-delay: calc(var(--i, 1) * -80ms); opacity: .82; } .waveform span:nth-child(odd){ --h: 24; }.waveform span:nth-child(3n){ --h: 36; }.waveform span:nth-child(4n){ --h: 12; }.waveform span:nth-child(5n){ --h: 44; } .player-meta { display: flex; justify-content: space-between; gap: 20px; align-items: center; color: rgba(244,240,255,.8); font-size: 11px; letter-spacing: .11em; } .player-meta strong { font-size: 10px; } .show-card { padding: 20px 17px; display: grid; grid-template-columns: 1fr 84px; gap: 15px; align-items: center; min-height: 154px; } .show-card .card-label { margin-bottom: 12px; } .show-card h2 { margin: 0 0 18px; font-family: Orbitron, Inter, sans-serif; font-weight: 500; font-size: clamp(16px, 1.15vw, 22px); line-height: 1.22; letter-spacing: .14em; text-transform: uppercase; color: rgba(248,244,255,.90); } .show-date, .show-location { margin: 7px 0; font-size: 9px; letter-spacing: .18em; color: rgba(244,240,255,.78); } .show-thumb { width: 80px; height: 106px; border-radius: 8px; border: 1px solid var(--line); background-image: linear-gradient(180deg, rgba(6,6,18,.02), rgba(6,6,18,.18)), url("assets/images/hero/night-and-day.jpeg"); background-size: cover; background-position: center; box-shadow: inset 0 0 20px rgba(0,0,0,.25), 0 0 24px rgba(137,81,255,.18); position: relative; overflow: hidden; } .connect-card { padding: 22px 25px 25px; } .socials { display: flex; justify-content: space-between; align-items: center; gap: 14px; } .socials a { width: 40px; height: 40px; display:grid; place-items:center; color: rgba(242,235,255,.84); border: 1px solid rgba(214,201,255,.16); border-radius: 12px; background: rgba(255,255,255,.035); filter: drop-shadow(0 0 11px rgba(140,104,255,.3)); transition: transform .2s, color .2s, border-color .2s; } .socials a:hover { transform: translateY(-2px); color: #fff; border-color: rgba(214,201,255,.36); } .socials svg { width: 22px; height: 22px; } .socials [aria-label="Spotify"] svg circle:first-child { fill: none; } .socials [aria-label="Apple Music"] svg path { fill: currentColor; stroke: none; } .socials [aria-label="YouTube"] svg path:first-child { fill: none; } .socials [aria-label="YouTube"] svg path:last-child { fill: currentColor; stroke: none; } .stats { position: absolute; left: clamp(24px, 3.4vw, 64px); bottom: clamp(55px, 8.6vh, 92px); width: min(735px, 42vw); display: grid; grid-template-columns: repeat(4, 1fr); padding: 20px 24px; gap: 0; z-index: 4; } .stats div { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; align-items: center; padding: 0 20px; border-right: 1px solid rgba(199,190,255,.18); min-width: 0; } .stats div:last-child { border-right: 0; } .stat-icon { grid-row: 1 / 3; width: 26px; height: 26px; display: grid; place-items: center; color: rgba(242,235,255,.76); filter: drop-shadow(0 0 11px rgba(154,100,255,.35)); } .stat-icon svg { stroke-width: 1.7; } .stats strong { font-family: Orbitron, Inter, sans-serif; font-size: clamp(12px, .95vw, 18px); letter-spacing: .14em; font-weight: 600; text-transform: uppercase; white-space: nowrap; } .stats small { color: var(--muted); letter-spacing: .18em; text-transform: uppercase; font-size: 9px; white-space: nowrap; } .scroll-cue { position: absolute; right: clamp(28px, 3.8vw, 64px); bottom: 34px; display: flex; align-items: center; gap: 35px; text-transform: uppercase; letter-spacing: .42em; color: var(--faint); font-family: Orbitron, Inter, sans-serif; font-size: 9px; } .dots { display: grid; grid-template-columns: repeat(2, 6px); gap: 9px; } .dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(242,235,255,.6); box-shadow: 0 0 10px rgba(172,128,255,.7); } .mouse { width: 18px; height: 34px; border: 1px solid rgba(242,235,255,.45); border-radius: 999px; position: relative; } .mouse::before { content:""; position:absolute; top:7px; left:50%; width:3px; height:7px; transform: translateX(-50%); background: rgba(242,235,255,.8); border-radius:99px; animation: scroll 1.8s infinite; } @keyframes wave { 0%,100% { transform: scaleY(.55); opacity:.55; } 50% { transform: scaleY(1); opacity:1; } } @keyframes scroll { 0% { transform: translate(-50%,0); opacity:1; } 80% { transform: translate(-50%,12px); opacity:0; } 100% { opacity:0; } } @keyframes buttonPulse { 0%, 100% { box-shadow: inset 0 0 22px rgba(184, 115, 255, .24), 0 0 26px rgba(140, 79, 255, .28); } 50% { box-shadow: inset 0 0 24px rgba(197, 135, 255, .28), 0 0 34px rgba(148, 90, 255, .34); } } @media (max-width: 1100px) { .frame { aspect-ratio: auto; min-height: 880px; } .nav { grid-template-columns: 1fr auto; } .nav-links { display: none; } .hero-content { grid-template-columns: 1fr; align-items: start; padding-top: 145px; } .side-widgets { grid-column: 1; margin-top: 40px; justify-self: start; width: min(520px, 100%); } .stats { width: calc(100% - 48px); grid-template-columns: repeat(2, 1fr); bottom: 52px; } .stats div { padding: 12px; } .scroll-cue { display: none; } } @media (max-width: 680px) { .hero { padding: 0; } .frame { width: 100%; min-height: 100vh; border-radius: 0; border-left: 0; border-right: 0; } .background { background-position: 62% center; } .nav { left: 20px; right: 20px; top: 20px; grid-template-columns: 1fr; } .nav-actions { display: none; } .brand { gap: 14px; } .hero-content { padding: 112px 22px 300px; } .copy-block h1 { font-size: 72px; } .intro { font-size: 15px; } .actions { gap: 20px; } .btn.primary { min-width: 100%; } .side-widgets { display: none; } .stats { left: 16px; right: 16px; width: auto; grid-template-columns: 1fr 1fr; padding: 12px; } .stats div { grid-template-columns: 28px 1fr; } .stat-icon { width: 22px; height: 22px; } } /* Global menu position for all inner pages */ body:not(.home) .djmaze-global-nav, body:not(.front-page) .djmaze-global-nav { position: fixed; top: 24px; left: clamp(18px, 3vw, 52px); right: clamp(18px, 3vw, 52px); width: auto; z-index: 9999; } /* Home hero owns the menu inside the frame */ .djmaze-wp-hero .djmaze-global-nav { position: absolute; } .djmaze-global-nav .nav-links a.is-active, .djmaze-global-nav .nav-links a[aria-current="page"] { color: #fff; text-shadow: 0 0 18px var(--purple), 0 0 28px rgba(124,176,255,.26); } .djmaze-wp-hero { padding: clamp(16px, 2vw, 28px); } .djmaze-wp-hero .frame { width: min(96vw, 1820px); } /* Keep old theme sections below the new hero */ #djmaze-site > .maze-section, #djmaze-site > section:not(.djmaze-wp-hero) { position: relative; z-index: 1; } /* Better responsive navigation */ @media (max-width: 1180px) { .nav { grid-template-columns: 180px 1fr auto; } .nav-links { gap: clamp(18px, 3vw, 34px); } .booking { min-width: 118px; padding-left: 18px; padding-right: 18px; } } @media (max-width: 920px) { .nav-links { display: none; } .nav { grid-template-columns: 1fr auto; } } /* === CORRECTED FRAME FIX: equal top/side gap, original rounded frame preserved === */ /* The hero should keep the original framed design: - equal gap on top, left and right - rounded border radius frame - background aligned with the frame, not full-bleed outside it - only the oversized top gap is reduced */ #djmaze-site.djmaze-home-site { padding-top: 0 !important; margin-top: 0 !important; } #djmaze-site.djmaze-home-site .djmaze-wp-hero { --djmaze-hero-gap: clamp(16px, 2vw, 28px); display: block !important; min-height: 100vh !important; padding: var(--djmaze-hero-gap) !important; margin: 0 !important; overflow: hidden; } /* Clip/align the background to the same rounded frame area */ #djmaze-site.djmaze-home-site .djmaze-wp-hero .background { top: var(--djmaze-hero-gap) !important; right: var(--djmaze-hero-gap) !important; bottom: var(--djmaze-hero-gap) !important; left: var(--djmaze-hero-gap) !important; border-radius: 16px !important; overflow: hidden !important; transform: scale(1.03) translate3d(0,0,0); } /* Keep the original frame: side gaps and rounded corners stay */ #djmaze-site.djmaze-home-site .djmaze-wp-hero .frame { width: min(96vw, 1820px) !important; min-height: calc(100vh - (var(--djmaze-hero-gap) * 2)) !important; margin: 0 auto !important; border-radius: 16px !important; border: 1px solid rgba(210,200,255,.25) !important; overflow: hidden !important; background: transparent !important; } /* Menu remains inside the frame on the homepage */ #djmaze-site.djmaze-home-site .djmaze-wp-hero .djmaze-global-nav { position: absolute !important; top: clamp(18px, 3vw, 38px) !important; left: clamp(22px, 3.3vw, 62px) !important; right: clamp(22px, 3.3vw, 62px) !important; } /* Inner pages: add breathing space above the global menu */ body:not(.home) .djmaze-global-nav { top: 34px !important; padding-top: 14px !important; padding-bottom: 14px !important; border-radius: 16px !important; } /* Only inner pages need extra top space for the fixed menu */ body:not(.home) #djmaze-site:not(.djmaze-home-site) { padding-top: 118px !important; } /* Glassmorphism menu on scroll for readability */ .djmaze-global-nav { transition: background .28s ease, backdrop-filter .28s ease, -webkit-backdrop-filter .28s ease, box-shadow .28s ease, border-color .28s ease; } .djmaze-global-nav.is-scrolled, body:not(.home) .djmaze-global-nav { background: linear-gradient(145deg, rgba(18,19,43,.68), rgba(4,6,20,.48)) !important; backdrop-filter: blur(22px) !important; -webkit-backdrop-filter: blur(22px) !important; border-color: rgba(210, 200, 255, 0.32) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 24px 80px rgba(0,0,0,.36) !important; border-radius: 16px !important; } /* Homepage before scroll stays like the reference */ #djmaze-site.djmaze-home-site .djmaze-global-nav:not(.is-scrolled) { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } /* WordPress admin bar: inner pages only */ body.admin-bar:not(.home) .djmaze-global-nav { top: 66px !important; } @media (max-width: 920px) { #djmaze-site.djmaze-home-site .djmaze-wp-hero { --djmaze-hero-gap: 0px; } #djmaze-site.djmaze-home-site .djmaze-wp-hero .frame, #djmaze-site.djmaze-home-site .djmaze-wp-hero .background { border-radius: 0 !important; } body:not(.home) #djmaze-site:not(.djmaze-home-site) { padding-top: 96px !important; } } /* === Menu spacing refinement === */ .djmaze-global-nav .nav-links { gap: clamp(22px, 3.2vw, 44px) !important; } .djmaze-global-nav .nav-links a { padding-left: 0 !important; padding-right: 0 !important; letter-spacing: .34em !important; } @media (max-width: 1280px) { .djmaze-global-nav .nav-links { gap: clamp(16px, 2.4vw, 30px) !important; } .djmaze-global-nav .nav-links a { letter-spacing: .26em !important; } } /* === Biography hero v3 full-width, preserve content below === */ .maze-bio-page-hero-wide { position: relative; } .maze-bio-page-hero-wide .biography-hero-v3 { position: relative; min-height: min(920px, 100vh); width: 100%; overflow: hidden; background: #04101f; } .maze-bio-page-hero-wide .biography-hero-v3__bg, .maze-bio-page-hero-wide .biography-hero-v3__overlay { position: absolute; inset: 0; } .maze-bio-page-hero-wide .biography-hero-v3__bg { background-position: center right; background-repeat: no-repeat; background-size: cover; transform: scale(1.01); } .maze-bio-page-hero-wide .biography-hero-v3__overlay { background: linear-gradient(90deg, rgba(2,8,20,.96) 0%, rgba(2,8,20,.88) 26%, rgba(2,8,20,.55) 46%, rgba(2,8,20,.20) 68%, rgba(2,8,20,.12) 100%), radial-gradient(circle at 84% 20%, rgba(27, 99, 255, .34), transparent 24%), linear-gradient(180deg, rgba(4,10,24,.16), rgba(4,10,24,.28)); } .maze-bio-page-hero-wide > .maze-cursor { z-index: 50; } .maze-bio-page-hero-wide .biography-hero-v3 .djmaze-global-nav { position: absolute !important; top: 28px !important; left: clamp(22px, 3.3vw, 62px) !important; right: clamp(22px, 3.3vw, 62px) !important; width: auto !important; z-index: 20 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .maze-bio-page-hero-wide .biography-hero-v3 .djmaze-global-nav.is-scrolled { position: fixed !important; top: 34px !important; left: clamp(18px, 3vw, 52px) !important; right: clamp(18px, 3vw, 52px) !important; background: linear-gradient(145deg, rgba(18,19,43,.72), rgba(4,6,20,.54)) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; border-color: rgba(210, 200, 255, 0.34) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 24px 80px rgba(0,0,0,.38) !important; border-radius: 16px !important; } body.admin-bar .maze-bio-page-hero-wide .biography-hero-v3 .djmaze-global-nav.is-scrolled { top: 66px !important; } .maze-bio-page-hero-wide .biography-hero-v3__content { position: relative; z-index: 3; min-height: inherit; display: flex; align-items: flex-end; padding: 160px clamp(24px, 4vw, 60px) 72px; } .maze-bio-page-hero-wide .biography-hero-v3__copy { width: min(52%, 760px); } .maze-bio-page-hero-wide .biography-hero-v3__socials { position: absolute; top: 58px; right: clamp(24px, 3vw, 44px); display: flex; gap: 18px; } .maze-bio-page-hero-wide .biography-hero-v3__socials a { width: 24px; height: 24px; color: rgba(255,255,255,.95); display: inline-flex; align-items: center; justify-content: center; opacity: .95; transition: transform .25s ease, opacity .25s ease, color .25s ease; } .maze-bio-page-hero-wide .biography-hero-v3__socials a:hover { transform: translateY(-2px); color: #67abff; opacity: 1; } .maze-bio-page-hero-wide .biography-hero-v3__socials svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; } .maze-bio-page-hero-wide .biography-hero-v3__socials a[aria-label="Spotify"] svg, .maze-bio-page-hero-wide .biography-hero-v3__socials a[aria-label="YouTube"] svg { fill: currentColor; stroke: none; } .maze-bio-page-hero-wide .biography-hero-v3__eyebrow { display: flex; align-items: center; gap: 22px; margin: 0 0 24px; color: #4b9eff; font-family: 'Orbitron', 'Inter', sans-serif; font-size: clamp(13px, .95vw, 18px); text-transform: uppercase; letter-spacing: .44em; } .maze-bio-page-hero-wide .biography-hero-v3__eyebrow::before { content: ""; width: 50px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, #62b2ff, rgba(98,178,255,.18)); box-shadow: 0 0 12px rgba(86,176,255,.36); } .maze-bio-page-hero-wide .biography-hero-v3 h1 { margin: 0; font-family: 'Syncopate', 'Orbitron', sans-serif; font-size: clamp(76px, 10.2vw, 172px); line-height: .88; letter-spacing: -.06em; font-weight: 700; text-transform: uppercase; color: transparent; background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(250,252,255,.98) 22%, #73b1ff 62%, #3f87ff 100%); -webkit-background-clip: text; background-clip: text; text-shadow: 0 8px 50px rgba(55,120,255,.16); } .maze-bio-page-hero-wide .biography-hero-v3__divider { width: min(720px, 100%); height: 2px; margin: 28px 0 28px; background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(72,141,255,.85), rgba(72,141,255,0)); box-shadow: 0 0 18px rgba(79,153,255,.3); } .maze-bio-page-hero-wide .biography-hero-v3 h2 { margin: 0 0 16px; color: #4ea3ff; font-family: 'Orbitron', 'Inter', sans-serif; font-size: clamp(18px, 1.05vw, 22px); text-transform: uppercase; letter-spacing: .34em; font-weight: 500; } .maze-bio-page-hero-wide .biography-hero-v3__intro { width: min(520px, 100%); margin: 0 0 40px; color: rgba(255,255,255,.90); font-size: clamp(18px, 1.15vw, 24px); line-height: 1.58; } .maze-bio-page-hero-wide .biography-hero-v3__actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .maze-bio-page-hero-wide .biography-hero-v3__btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 60px; text-transform: uppercase; font-family: 'Orbitron', 'Inter', sans-serif; letter-spacing: .28em; font-size: 14px; font-weight: 600; transition: transform .25s ease, box-shadow .25s ease, color .25s ease, background .25s ease; } .maze-bio-page-hero-wide .biography-hero-v3__btn:hover { transform: translateY(-2px); } .maze-bio-page-hero-wide .biography-hero-v3__btn--primary { padding: 0 34px; background: linear-gradient(90deg, #62aaff, #4c8fff); color: white; box-shadow: 0 16px 36px rgba(61,130,255,.26); } .maze-bio-page-hero-wide .biography-hero-v3__btn--primary .icon { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; } .maze-bio-page-hero-wide .biography-hero-v3__btn--primary .icon svg { width: 18px; height: 18px; fill: currentColor; } .maze-bio-page-hero-wide .biography-hero-v3__btn--ghost { padding: 0 0 10px; color: rgba(255,255,255,.95); border-bottom: 1px solid rgba(110, 176, 255, .85); box-shadow: inset 0 -1px 0 rgba(255,255,255,.18); } .maze-bio-page-hero-wide .biography-hero-v3__btn--ghost .arrow { font-size: 22px; line-height: 1; margin-left: 8px; } .maze-bio-page-hero-wide .maze-bio-simple-main { padding-top: 0 !important; } @media (max-width: 1200px) { .maze-bio-page-hero-wide .biography-hero-v3__copy { width: min(64%, 760px); } .maze-bio-page-hero-wide .biography-hero-v3 h1 { font-size: clamp(72px, 9vw, 136px); } } @media (max-width: 920px) { .maze-bio-page-hero-wide .biography-hero-v3 { min-height: auto; } .maze-bio-page-hero-wide .biography-hero-v3__content { padding: 130px 24px 40px; } .maze-bio-page-hero-wide .biography-hero-v3__copy { width: 100%; } .maze-bio-page-hero-wide .biography-hero-v3__socials { top: 92px; right: 24px; gap: 14px; } .maze-bio-page-hero-wide .biography-hero-v3__eyebrow { letter-spacing: .28em; gap: 14px; } .maze-bio-page-hero-wide .biography-hero-v3 h1 { font-size: clamp(52px, 14vw, 92px); } .maze-bio-page-hero-wide .biography-hero-v3 h2 { font-size: 16px; letter-spacing: .2em; } .maze-bio-page-hero-wide .biography-hero-v3__intro { font-size: 17px; width: 100%; } } @media (max-width: 640px) { .maze-bio-page-hero-wide .biography-hero-v3__content { padding: 118px 18px 32px; } .maze-bio-page-hero-wide .biography-hero-v3__socials { top: 84px; right: 18px; } .maze-bio-page-hero-wide .biography-hero-v3__actions { gap: 18px; align-items: flex-start; flex-direction: column; } .maze-bio-page-hero-wide .biography-hero-v3__btn { min-height: 54px; font-size: 12px; letter-spacing: .18em; } .maze-bio-page-hero-wide .biography-hero-v3__btn--primary { padding: 0 22px; } } /* === Biography hero design correction === */ /* The Biographie page must start with the hero immediately. Do not apply the inner-page top padding that was meant for normal pages. */ body:not(.home) #djmaze-site.maze-bio-page-hero-wide, #djmaze-site.maze-bio-page-hero-wide { padding-top: 0 !important; margin-top: 0 !important; } /* Keep the existing/default menu on top of the hero image, not in a separate area. */ #djmaze-site.maze-bio-page-hero-wide .biography-hero-v3 .djmaze-global-nav { position: absolute !important; top: 28px !important; left: clamp(22px, 3.3vw, 62px) !important; right: clamp(22px, 3.3vw, 62px) !important; width: auto !important; z-index: 30 !important; } /* Remove reference-social block from layout if browser caches old markup/CSS. */ #djmaze-site.maze-bio-page-hero-wide .biography-hero-v3__socials { display: none !important; } /* Full-width hero: no rounded box, no side margin, no border. */ #djmaze-site.maze-bio-page-hero-wide .biography-hero-v3 { margin: 0 !important; border-radius: 0 !important; border: 0 !important; width: 100% !important; max-width: none !important; } /* Make sure the background covers side-to-side. */ #djmaze-site.maze-bio-page-hero-wide .biography-hero-v3__bg { inset: 0 !important; background-size: cover !important; background-position: center right !important; } /* Keep all biography content below the hero visible and normal. */ #djmaze-site.maze-bio-page-hero-wide .maze-bio-simple-main { display: block !important; position: relative !important; z-index: 2 !important; padding-top: 0 !important; margin-top: 0 !important; } /* Give hero text enough top clearance below the overlay menu. */ #djmaze-site.maze-bio-page-hero-wide .biography-hero-v3__content { padding-top: 170px !important; } @media (max-width: 920px) { #djmaze-site.maze-bio-page-hero-wide .biography-hero-v3__content { padding-top: 135px !important; } } /* === Biography hero/content spacing fix === */ /* Add clear breathing room after the full-width hero before the second content section. */ #djmaze-site.maze-bio-page-hero-wide .biography-hero-v3 { margin-bottom: clamp(42px, 5vw, 78px) !important; } /* Make sure the next section does not visually touch or overlap the hero. */ #djmaze-site.maze-bio-page-hero-wide .maze-bio-simple-main { padding-top: 0 !important; } #djmaze-site.maze-bio-page-hero-wide .maze-bio-simple-main > section:first-child { margin-top: 0 !important; } /* Responsive: keep spacing smaller on mobile but still visible. */ @media (max-width: 680px) { #djmaze-site.maze-bio-page-hero-wide .biography-hero-v3 { margin-bottom: 34px !important; } } /* === Discography hero v2 full-width === */ .maze-discography-page-hero-wide { position: relative; } body:not(.home) #djmaze-site.maze-discography-page-hero-wide, #djmaze-site.maze-discography-page-hero-wide { padding-top: 0 !important; margin-top: 0 !important; } .maze-discography-page-hero-wide .discography-hero-v2 { position: relative; min-height: min(920px, 100vh); width: 100%; overflow: hidden; background: #040818; margin-bottom: clamp(40px, 4vw, 72px); } .maze-discography-page-hero-wide .discography-hero-v2__bg, .maze-discography-page-hero-wide .discography-hero-v2__overlay { position: absolute; inset: 0; } .maze-discography-page-hero-wide .discography-hero-v2__bg { background-position: center; background-repeat: no-repeat; background-size: cover; transform: scale(1.01); } .maze-discography-page-hero-wide .discography-hero-v2__overlay { background: linear-gradient(90deg, rgba(3,5,20,.96) 0%, rgba(3,5,20,.92) 22%, rgba(3,5,20,.68) 42%, rgba(3,5,20,.24) 66%, rgba(3,5,20,.08) 100%), radial-gradient(circle at 86% 26%, rgba(87, 66, 255, .26), transparent 22%), linear-gradient(180deg, rgba(10, 5, 34, .16), rgba(7, 7, 26, .24)); } .maze-discography-page-hero-wide .discography-hero-v2 .djmaze-global-nav { position: absolute !important; top: 28px !important; left: clamp(22px, 3.3vw, 62px) !important; right: clamp(22px, 3.3vw, 62px) !important; width: auto !important; z-index: 30 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .maze-discography-page-hero-wide .discography-hero-v2 .djmaze-global-nav.is-scrolled { position: fixed !important; top: 34px !important; left: clamp(18px, 3vw, 52px) !important; right: clamp(18px, 3vw, 52px) !important; background: linear-gradient(145deg, rgba(18,19,43,.72), rgba(4,6,20,.54)) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; border-color: rgba(210, 200, 255, 0.34) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 24px 80px rgba(0,0,0,.38) !important; border-radius: 16px !important; } body.admin-bar .maze-discography-page-hero-wide .discography-hero-v2 .djmaze-global-nav.is-scrolled { top: 66px !important; } .maze-discography-page-hero-wide .discography-hero-v2__content { position: relative; z-index: 3; min-height: inherit; display: flex; flex-direction: column; justify-content: space-between; padding: 158px clamp(24px, 4vw, 52px) 38px; } .maze-discography-page-hero-wide .discography-hero-v2__copy { width: min(52%, 760px); padding-top: 42px; } .maze-discography-page-hero-wide .discography-hero-v2__eyebrow { margin: 0 0 28px; color: #8b53ff; font-family: 'Orbitron', 'Inter', sans-serif; font-size: clamp(14px, .92vw, 18px); text-transform: uppercase; letter-spacing: .46em; } .maze-discography-page-hero-wide .discography-hero-v2 h1 { margin: 0 0 26px; font-family: 'Syncopate', 'Orbitron', sans-serif; font-size: clamp(76px, 10vw, 170px); line-height: .88; letter-spacing: -.06em; font-weight: 700; text-transform: uppercase; color: transparent; background: linear-gradient(90deg, #7f4dff 0%, #6c3dff 18%, rgba(255,255,255,.98) 38%, rgba(255,255,255,.98) 72%, #f5f5f8 100%); -webkit-background-clip: text; background-clip: text; text-shadow: 0 8px 46px rgba(95,66,255,.18); } .maze-discography-page-hero-wide .discography-hero-v2 h2 { margin: 0 0 38px; color: rgba(255,255,255,.92); font-family: 'Orbitron', 'Inter', sans-serif; font-size: clamp(16px, 1.05vw, 22px); text-transform: uppercase; letter-spacing: .34em; font-weight: 500; } .maze-discography-page-hero-wide .discography-hero-v2__actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .maze-discography-page-hero-wide .discography-hero-v2__btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 60px; text-transform: uppercase; font-family: 'Orbitron', 'Inter', sans-serif; letter-spacing: .26em; font-size: 14px; font-weight: 600; transition: transform .25s ease, box-shadow .25s ease, color .25s ease, background .25s ease, border-color .25s ease; } .maze-discography-page-hero-wide .discography-hero-v2__btn:hover { transform: translateY(-2px); } .maze-discography-page-hero-wide .discography-hero-v2__btn--primary { padding: 0 28px; border: 1px solid rgba(125, 78, 255, .88); border-radius: 999px; color: #fff; background: rgba(16, 10, 46, .18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 0 18px rgba(124,73,255,.16); } .maze-discography-page-hero-wide .discography-hero-v2__btn--ghost { padding: 0; color: rgba(255,255,255,.94); } .maze-discography-page-hero-wide .discography-hero-v2__btn--ghost .play { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; } .maze-discography-page-hero-wide .discography-hero-v2__btn--ghost .play svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; } .maze-discography-page-hero-wide .discography-hero-v2__player { align-self: flex-start; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 18px; width: min(460px, 100%); margin-top: 40px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(145deg, rgba(14,12,36,.42), rgba(6,6,20,.32)); border: 1px solid rgba(128, 86, 255, .22); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 52px rgba(0,0,0,.28); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .maze-discography-page-hero-wide .discography-hero-v2__player-cover { width: 88px; height: 88px; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 26px rgba(0,0,0,.22); } .maze-discography-page-hero-wide .discography-hero-v2__player-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .maze-discography-page-hero-wide .discography-hero-v2__player-meta { min-width: 0; display: flex; flex-direction: column; } .maze-discography-page-hero-wide .discography-hero-v2__player-meta .label { display: block; margin-bottom: 8px; color: rgba(255,255,255,.55); font-family: 'Orbitron', 'Inter', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: .24em; } .maze-discography-page-hero-wide .discography-hero-v2__player-meta strong { display: block; color: #8754ff; font-family: 'Orbitron', 'Inter', sans-serif; font-size: 24px; line-height: 1.12; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; } .maze-discography-page-hero-wide .discography-hero-v2__player-meta .artist { display: block; color: rgba(255,255,255,.78); font-size: 15px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 14px; } .maze-discography-page-hero-wide .discography-hero-v2__waveform { display: flex; align-items: flex-end; gap: 3px; min-height: 34px; padding-top: 6px; } .maze-discography-page-hero-wide .discography-hero-v2__waveform span { width: 3px; height: calc(8px + (var(--i, 1) * 0.75px)); border-radius: 999px; background: linear-gradient(180deg, rgba(160, 118, 255, 1), rgba(94, 79, 255, .65)); box-shadow: 0 0 8px rgba(140, 96, 255, .35); animation: djmazeDiscWave calc(1.18s + (var(--i, 1) * 0.02s)) ease-in-out infinite alternate; animation-delay: calc(var(--i, 1) * -0.06s); transform-origin: center bottom; } @keyframes djmazeDiscWave { 0% { transform: scaleY(.35); opacity: .55; } 50% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(.52); opacity: .75; } } .maze-discography-page-hero-wide .maze-full-discography { padding-top: 0 !important; } @media (max-width: 1200px) { .maze-discography-page-hero-wide .discography-hero-v2__copy { width: min(62%, 760px); } .maze-discography-page-hero-wide .discography-hero-v2 h1 { font-size: clamp(72px, 8.8vw, 136px); } } @media (max-width: 920px) { .maze-discography-page-hero-wide .discography-hero-v2 { min-height: auto; } .maze-discography-page-hero-wide .discography-hero-v2__content { padding: 130px 24px 34px; } .maze-discography-page-hero-wide .discography-hero-v2__copy { width: 100%; padding-top: 28px; } .maze-discography-page-hero-wide .discography-hero-v2__eyebrow { letter-spacing: .28em; } .maze-discography-page-hero-wide .discography-hero-v2 h1 { font-size: clamp(54px, 14vw, 96px); } .maze-discography-page-hero-wide .discography-hero-v2 h2 { font-size: 15px; letter-spacing: .18em; } .maze-discography-page-hero-wide .discography-hero-v2__player { width: 100%; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; } .maze-discography-page-hero-wide .discography-hero-v2__player-cover { width: 72px; height: 72px; } .maze-discography-page-hero-wide .discography-hero-v2__player-meta strong { font-size: 18px; } .maze-discography-page-hero-wide .discography-hero-v2__player-meta .artist { font-size: 12px; } } @media (max-width: 640px) { .maze-discography-page-hero-wide .discography-hero-v2__content { padding: 118px 18px 28px; } .maze-discography-page-hero-wide .discography-hero-v2__actions { gap: 16px; align-items: flex-start; flex-direction: column; } .maze-discography-page-hero-wide .discography-hero-v2__btn { min-height: 52px; font-size: 12px; letter-spacing: .16em; } .maze-discography-page-hero-wide .discography-hero-v2__btn--primary { padding: 0 22px; } } /* === Discographie hero menu/player refinement === */ /* Match the Discographie menu vertical position to the Biographie page. */ .maze-discography-page-hero-wide .discography-hero-v2 .djmaze-global-nav { top: 28px !important; } /* Make the dummy player text compact and force single-line labels. */ .maze-discography-page-hero-wide .discography-hero-v2__player { width: min(560px, 100%) !important; grid-template-columns: 74px minmax(0, 1fr) !important; gap: 14px !important; padding: 13px 16px !important; } .maze-discography-page-hero-wide .discography-hero-v2__player-cover { width: 74px !important; height: 74px !important; } .maze-discography-page-hero-wide .discography-hero-v2__player-meta { min-width: 0 !important; overflow: hidden !important; } .maze-discography-page-hero-wide .discography-hero-v2__player-meta .label, .maze-discography-page-hero-wide .discography-hero-v2__player-meta strong, .maze-discography-page-hero-wide .discography-hero-v2__player-meta .artist { display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; } .maze-discography-page-hero-wide .discography-hero-v2__player-meta .label { font-size: 9px !important; letter-spacing: .18em !important; margin-bottom: 5px !important; } .maze-discography-page-hero-wide .discography-hero-v2__player-meta strong { font-size: 16px !important; line-height: 1.05 !important; letter-spacing: .08em !important; margin-bottom: 5px !important; } .maze-discography-page-hero-wide .discography-hero-v2__player-meta .artist { font-size: 10px !important; line-height: 1.1 !important; letter-spacing: .10em !important; margin-bottom: 8px !important; } .maze-discography-page-hero-wide .discography-hero-v2__waveform { min-height: 24px !important; gap: 2px !important; padding-top: 3px !important; } .maze-discography-page-hero-wide .discography-hero-v2__waveform span { width: 2px !important; } @media (max-width: 920px) { .maze-discography-page-hero-wide .discography-hero-v2 .djmaze-global-nav { top: 28px !important; } .maze-discography-page-hero-wide .discography-hero-v2__player { width: 100% !important; grid-template-columns: 64px minmax(0, 1fr) !important; } .maze-discography-page-hero-wide .discography-hero-v2__player-cover { width: 64px !important; height: 64px !important; } } /* === Discographie hero title final size correction === */ /* Stronger selector so it overrides the previous large hero title size. */ #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2 h1 { font-size: clamp(64px, 8.2vw, 132px) !important; line-height: .9 !important; letter-spacing: -.055em !important; } /* Keep the title balanced on mid-size screens. */ @media (max-width: 1200px) { #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2 h1 { font-size: clamp(58px, 7.6vw, 108px) !important; } } @media (max-width: 920px) { #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2 h1 { font-size: clamp(46px, 12vw, 78px) !important; } } /* === Discographie final menu position + reference player === */ /* Discographie menu must match Biographie menu position exactly. */ #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2 .djmaze-global-nav { position: absolute !important; top: 28px !important; left: clamp(22px, 3.3vw, 62px) !important; right: clamp(22px, 3.3vw, 62px) !important; width: auto !important; z-index: 30 !important; } #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2 .djmaze-global-nav.is-scrolled { position: fixed !important; top: 34px !important; left: clamp(18px, 3vw, 52px) !important; right: clamp(18px, 3vw, 52px) !important; } body.admin-bar #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2 .djmaze-global-nav.is-scrolled { top: 66px !important; } /* Player: slim horizontal reference style. */ #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__player { align-self: flex-start !important; width: min(520px, 100%) !important; min-height: 104px !important; grid-template-columns: 72px minmax(0, 1fr) !important; gap: 14px !important; padding: 14px 16px !important; margin-top: 38px !important; border-radius: 14px !important; background: linear-gradient(145deg, rgba(12, 10, 30, .56), rgba(5, 6, 18, .42)) !important; border: 1px solid rgba(132, 91, 255, .24) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 46px rgba(0,0,0,.30) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; } #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__player-cover { width: 72px !important; height: 72px !important; border-radius: 10px !important; overflow: hidden !important; flex: 0 0 auto !important; } #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__player-meta { min-width: 0 !important; overflow: hidden !important; justify-content: center !important; } #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__player-meta .label, #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__player-meta strong, #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__player-meta .artist { display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important; max-width: 100% !important; } #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__player-meta .label { font-family: 'Orbitron', 'Inter', sans-serif !important; font-size: 8.5px !important; line-height: 1 !important; letter-spacing: .18em !important; margin: 0 0 6px !important; color: rgba(255,255,255,.52) !important; text-transform: uppercase !important; } #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__player-meta strong { font-family: 'Orbitron', 'Inter', sans-serif !important; font-size: 15px !important; line-height: 1.05 !important; letter-spacing: .055em !important; margin: 0 0 6px !important; color: #8d5bff !important; text-transform: uppercase !important; } #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__player-meta .artist { font-size: 9.5px !important; line-height: 1 !important; letter-spacing: .075em !important; margin: 0 0 8px !important; color: rgba(255,255,255,.74) !important; text-transform: uppercase !important; } /* Animated waves: longer and cleaner like the reference. */ #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__waveform { display: flex !important; align-items: flex-end !important; gap: 2px !important; height: 24px !important; min-height: 24px !important; max-width: 100% !important; overflow: hidden !important; padding: 0 !important; } #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__waveform span { width: 2px !important; min-width: 2px !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(166,126,255,1), rgba(100,83,255,.65)) !important; box-shadow: 0 0 7px rgba(140,96,255,.36) !important; } /* Slightly reduce DJ MAZE title so the whole composition breathes. */ #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2 h1 { font-size: clamp(60px, 7.7vw, 124px) !important; } @media (max-width: 920px) { #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2 .djmaze-global-nav { top: 28px !important; } #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__player { width: 100% !important; grid-template-columns: 64px minmax(0, 1fr) !important; padding: 12px 14px !important; } #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__player-cover { width: 64px !important; height: 64px !important; } #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__player-meta strong { font-size: 13px !important; } #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__player-meta .artist { font-size: 8.5px !important; letter-spacing: .05em !important; } } /* === Shop hero v2 === */ .maze-shop-page-v2 { position: relative; } body:not(.home) #djmaze-site.maze-shop-page-v2, #djmaze-site.maze-shop-page-v2 { padding-top: 0 !important; margin-top: 0 !important; } .maze-shop-page-v2 .maze-shop-hero-v2 { position: relative; width: 100%; min-height: min(980px, 100vh); overflow: hidden; background: #021122; margin-bottom: clamp(42px, 4vw, 72px); } .maze-shop-page-v2 .maze-shop-hero-v2__bg, .maze-shop-page-v2 .maze-shop-hero-v2__overlay { position: absolute; inset: 0; } .maze-shop-page-v2 .maze-shop-hero-v2__bg { background: radial-gradient(circle at 62% 18%, rgba(36, 140, 255, .58), transparent 28%), radial-gradient(circle at 58% 48%, rgba(9, 88, 186, .36), transparent 26%), linear-gradient(90deg, #031120 0%, #052447 30%, #0b5fb3 72%, #0c5aac 100%); } .maze-shop-page-v2 .maze-shop-hero-v2__overlay { background: linear-gradient(90deg, rgba(1,9,18,.92) 0%, rgba(1,9,18,.64) 24%, rgba(1,9,18,.16) 56%, rgba(1,9,18,.06) 100%), radial-gradient(circle at 48% 38%, rgba(0,0,0,.26), transparent 26%); pointer-events: none; } .maze-shop-page-v2 .maze-shop-hero-v2 .djmaze-global-nav { position: absolute !important; top: 28px !important; left: clamp(22px, 3.3vw, 62px) !important; right: clamp(22px, 3.3vw, 62px) !important; width: auto !important; z-index: 30 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .maze-shop-page-v2 .maze-shop-hero-v2 .djmaze-global-nav.is-scrolled { position: fixed !important; top: 34px !important; left: clamp(18px, 3vw, 52px) !important; right: clamp(18px, 3vw, 52px) !important; background: linear-gradient(145deg, rgba(18,19,43,.72), rgba(4,6,20,.54)) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; border-color: rgba(210, 200, 255, 0.34) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 24px 80px rgba(0,0,0,.38) !important; border-radius: 16px !important; } body.admin-bar .maze-shop-page-v2 .maze-shop-hero-v2 .djmaze-global-nav.is-scrolled { top: 66px !important; } .maze-shop-page-v2 .maze-shop-hero-v2__content { position: relative; z-index: 3; min-height: inherit; display: grid; grid-template-columns: minmax(280px, 360px) minmax(500px, 1fr); grid-template-rows: 1fr auto; align-items: center; padding: 132px clamp(24px, 4vw, 62px) 36px; } .maze-shop-page-v2 .maze-shop-hero-v2__copy { position: relative; z-index: 4; max-width: 280px; align-self: center; padding-top: 80px; } .maze-shop-page-v2 .maze-shop-hero-v2__kicker { margin: 0 0 28px; color: rgba(255,255,255,.9); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .maze-shop-page-v2 .maze-shop-hero-v2__title-stack { position: absolute; left: 0; top: -20px; width: min(88vw, 1450px); pointer-events: none; } .maze-shop-page-v2 .maze-shop-hero-v2__title-stack span { display: block; font-family: 'Syncopate', 'Orbitron', sans-serif; font-weight: 700; line-height: .82; letter-spacing: -.075em; text-transform: uppercase; color: transparent; background: linear-gradient(180deg, rgba(47,196,255,.98), rgba(11,146,243,.95) 46%, rgba(9,96,180,.9) 100%); -webkit-background-clip: text; background-clip: text; text-shadow: 0 16px 38px rgba(0,114,255,.16); filter: drop-shadow(0 22px 46px rgba(0,0,0,.22)); } .maze-shop-page-v2 .maze-shop-hero-v2__title-dj { font-size: clamp(120px, 17vw, 318px); margin-left: -14px; } .maze-shop-page-v2 .maze-shop-hero-v2__title-maze { font-size: clamp(150px, 20vw, 396px); margin-top: -14px; margin-left: min(18vw, 255px); } .maze-shop-page-v2 .maze-shop-hero-v2__description { position: relative; z-index: 5; margin: 340px 0 18px; color: rgba(255,255,255,.9); font-size: clamp(18px, 1.15vw, 24px); line-height: 1.45; } .maze-shop-page-v2 .maze-shop-hero-v2__knowmore { position: relative; z-index: 5; display: inline-block; color: rgba(255,255,255,.9); font-style: italic; font-size: 20px; border-bottom: 1px solid rgba(255,255,255,.16); padding-bottom: 6px; } .maze-shop-page-v2 .maze-shop-hero-v2__knowmore:hover { color: #9ad6ff; border-color: rgba(154,214,255,.45); } .maze-shop-page-v2 .maze-shop-hero-v2__cutout-wrap { position: relative; z-index: 4; grid-column: 2; grid-row: 1 / span 2; align-self: end; justify-self: center; width: min(54vw, 820px); margin-left: -20px; } .maze-shop-page-v2 .maze-shop-hero-v2__cutout { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 55px rgba(0,0,0,.34)); } .maze-shop-page-v2 .maze-shop-hero-v2__showreel { position: absolute; right: clamp(28px, 3vw, 54px); bottom: 110px; z-index: 6; display: grid; grid-template-columns: 190px auto; align-items: center; min-height: 102px; background: linear-gradient(145deg, rgba(9,14,24,.82), rgba(5,8,14,.76)); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.35); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .maze-shop-page-v2 .maze-shop-hero-v2__showreel-thumb { position: relative; height: 100%; min-height: 102px; background-size: cover; background-position: center; } .maze-shop-page-v2 .maze-shop-hero-v2__showreel-thumb::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,.05)); } .maze-shop-page-v2 .maze-shop-hero-v2__play { position: absolute; top: 50%; left: 50%; z-index: 2; width: 48px; height: 48px; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255,255,255,.12); backdrop-filter: blur(8px); } .maze-shop-page-v2 .maze-shop-hero-v2__play svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.6; } .maze-shop-page-v2 .maze-shop-hero-v2__showreel-link { display: flex; align-items: center; padding: 0 34px; height: 100%; color: #fff; font-size: clamp(20px, 1.25vw, 32px); white-space: nowrap; } .maze-shop-page-v2 .maze-shop-hero-v2__bottom-meta { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: end; width: 100%; margin-top: 16px; color: rgba(255,255,255,.66); font-size: 17px; } .maze-shop-page-v2 .maze-shop-hero-v2__bottom-meta span:nth-child(1) { justify-self: start; } .maze-shop-page-v2 .maze-shop-hero-v2__bottom-meta span:nth-child(2) { justify-self: center; } .maze-shop-page-v2 .maze-shop-hero-v2__bottom-meta span:nth-child(3) { justify-self: center; } .maze-shop-page-v2 .maze-shop-hero-v2__bottom-meta span:nth-child(4) { justify-self: end; } .maze-shop-page-v2 .maze-wc-archive { width: min(1180px, calc(100% - 44px)); margin: 0 auto; padding-top: 0 !important; } @media (max-width: 1300px) { .maze-shop-page-v2 .maze-shop-hero-v2__content { grid-template-columns: minmax(260px, 320px) minmax(440px, 1fr); } .maze-shop-page-v2 .maze-shop-hero-v2__title-maze { margin-left: min(16vw, 220px); } .maze-shop-page-v2 .maze-shop-hero-v2__description { margin-top: 280px; } .maze-shop-page-v2 .maze-shop-hero-v2__showreel { bottom: 86px; transform: scale(.92); transform-origin: right bottom; } } @media (max-width: 1040px) { .maze-shop-page-v2 .maze-shop-hero-v2 { min-height: auto; } .maze-shop-page-v2 .maze-shop-hero-v2__content { grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding: 118px 20px 28px; } .maze-shop-page-v2 .maze-shop-hero-v2__copy { max-width: 100%; padding-top: 0; } .maze-shop-page-v2 .maze-shop-hero-v2__title-stack { position: relative; top: auto; width: 100%; margin-bottom: 20px; } .maze-shop-page-v2 .maze-shop-hero-v2__title-dj { font-size: clamp(92px, 18vw, 180px); margin-left: 0; } .maze-shop-page-v2 .maze-shop-hero-v2__title-maze { font-size: clamp(96px, 20vw, 190px); margin-top: -8px; margin-left: 18vw; } .maze-shop-page-v2 .maze-shop-hero-v2__description { margin-top: 10px; max-width: 420px; } .maze-shop-page-v2 .maze-shop-hero-v2__cutout-wrap { grid-column: 1; grid-row: auto; width: min(92vw, 620px); margin: 24px auto 0; } .maze-shop-page-v2 .maze-shop-hero-v2__showreel { position: relative; right: auto; bottom: auto; margin: 18px 0 0 auto; transform: none; } .maze-shop-page-v2 .maze-shop-hero-v2__bottom-meta { margin-top: 26px; font-size: 14px; } } @media (max-width: 680px) { .maze-shop-page-v2 .maze-shop-hero-v2 .djmaze-global-nav { top: 18px !important; } .maze-shop-page-v2 .maze-shop-hero-v2__content { padding: 106px 16px 24px; } .maze-shop-page-v2 .maze-shop-hero-v2__title-dj { font-size: clamp(72px, 18vw, 120px); } .maze-shop-page-v2 .maze-shop-hero-v2__title-maze { font-size: clamp(74px, 20vw, 128px); margin-left: 14vw; } .maze-shop-page-v2 .maze-shop-hero-v2__description { font-size: 16px; } .maze-shop-page-v2 .maze-shop-hero-v2__knowmore { font-size: 18px; } .maze-shop-page-v2 .maze-shop-hero-v2__showreel { width: 100%; grid-template-columns: 130px auto; min-height: 84px; } .maze-shop-page-v2 .maze-shop-hero-v2__showreel-thumb { min-height: 84px; } .maze-shop-page-v2 .maze-shop-hero-v2__showreel-link { font-size: 18px; padding: 0 18px; } .maze-shop-page-v2 .maze-shop-hero-v2__bottom-meta { grid-template-columns: repeat(2, 1fr); gap: 10px 16px; } .maze-shop-page-v2 .maze-shop-hero-v2__bottom-meta span:nth-child(2), .maze-shop-page-v2 .maze-shop-hero-v2__bottom-meta span:nth-child(3) { justify-self: start; } } /* === Shop hero cutout replacement + centering fix === */ .maze-shop-page-v2 .maze-shop-hero-v2__cutout-wrap { justify-self: center !important; align-self: end !important; width: min(46vw, 760px) !important; margin-left: 0 !important; margin-right: 0 !important; transform: translateX(0) !important; } .maze-shop-page-v2 .maze-shop-hero-v2__cutout { width: 100% !important; max-width: 760px !important; margin: 0 auto !important; object-fit: contain !important; filter: drop-shadow(0 24px 58px rgba(0,0,0,.34)) !important; } @media (max-width: 1040px) { .maze-shop-page-v2 .maze-shop-hero-v2__cutout-wrap { width: min(82vw, 560px) !important; margin: 24px auto 0 !important; } .maze-shop-page-v2 .maze-shop-hero-v2__cutout { max-width: 560px !important; } } @media (max-width: 680px) { .maze-shop-page-v2 .maze-shop-hero-v2__cutout-wrap { width: min(88vw, 460px) !important; } .maze-shop-page-v2 .maze-shop-hero-v2__cutout { max-width: 460px !important; } } /* === Shop hero text cleanup === */ .maze-shop-page-v2 .maze-shop-hero-v2__kicker, .maze-shop-page-v2 .maze-shop-hero-v2__bottom-meta { display: none !important; } .maze-shop-page-v2 .maze-shop-hero-v2__copy { padding-top: 40px !important; } .maze-shop-page-v2 .maze-shop-hero-v2__description { margin-top: 310px !important; } @media (max-width: 1040px) { .maze-shop-page-v2 .maze-shop-hero-v2__copy { padding-top: 0 !important; } .maze-shop-page-v2 .maze-shop-hero-v2__description { margin-top: 10px !important; } } /* === Shop hero grounding / bottom spacing fix === */ /* Reduce the empty space at the bottom of the hero so the cutout sits closer to the base. */ .maze-shop-page-v2 .maze-shop-hero-v2__content { padding-bottom: 8px !important; } /* Keep the cutout anchored to the bottom and visually grounded. */ .maze-shop-page-v2 .maze-shop-hero-v2__cutout-wrap { position: relative !important; align-self: end !important; margin-bottom: -6px !important; padding-bottom: 0 !important; } /* Add a subtle ground shadow under the cutout so it does not feel like it is floating. */ .maze-shop-page-v2 .maze-shop-hero-v2__cutout-wrap::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 8px !important; transform: translateX(-50%) !important; width: min(58%, 340px) !important; height: 34px !important; border-radius: 999px !important; background: radial-gradient(ellipse at center, rgba(0,0,0,.38) 0%, rgba(0,0,0,.2) 46%, rgba(0,0,0,0) 75%) !important; filter: blur(10px) !important; z-index: 0 !important; pointer-events: none !important; } .maze-shop-page-v2 .maze-shop-hero-v2__cutout { position: relative !important; z-index: 1 !important; display: block !important; margin-bottom: 0 !important; } /* Close the space between the visual and the next section slightly. */ .maze-shop-page-v2 .maze-shop-hero-v2 { margin-bottom: 28px !important; } @media (max-width: 1040px) { .maze-shop-page-v2 .maze-shop-hero-v2__content { padding-bottom: 2px !important; } .maze-shop-page-v2 .maze-shop-hero-v2__cutout-wrap { margin-bottom: -2px !important; } .maze-shop-page-v2 .maze-shop-hero-v2__cutout-wrap::after { width: min(52%, 220px) !important; height: 24px !important; bottom: 8px !important; } .maze-shop-page-v2 .maze-shop-hero-v2 { margin-bottom: 22px !important; } } /* === Fixed menu padding correction === */ /* When the nav becomes fixed on scroll, keep the glass bar balanced with padding on all sides. */ #djmaze-site .djmaze-global-nav.is-scrolled, body:not(.home) #djmaze-site .djmaze-global-nav.is-scrolled, .maze-shop-page-v2 .maze-shop-hero-v2 .djmaze-global-nav.is-scrolled, .maze-bio-page-hero-wide .biography-hero-v3 .djmaze-global-nav.is-scrolled, .maze-discography-page-hero-wide .discography-hero-v2 .djmaze-global-nav.is-scrolled { padding: 14px 18px !important; min-height: 64px !important; height: auto !important; align-items: center !important; border-radius: 16px !important; box-sizing: border-box !important; overflow: visible !important; } /* Give the fixed bar equal breathing room inside the viewport. */ #djmaze-site .djmaze-global-nav.is-scrolled { position: fixed !important; top: 24px !important; left: clamp(18px, 3vw, 52px) !important; right: clamp(18px, 3vw, 52px) !important; width: auto !important; } /* Logged-in WordPress admin bar offset. */ body.admin-bar #djmaze-site .djmaze-global-nav.is-scrolled { top: 66px !important; } /* Prevent the content from touching the glass container edges. */ #djmaze-site .djmaze-global-nav.is-scrolled .brand, #djmaze-site .djmaze-global-nav.is-scrolled .nav-links, #djmaze-site .djmaze-global-nav.is-scrolled .nav-actions { align-items: center !important; } #djmaze-site .djmaze-global-nav.is-scrolled .nav-actions { gap: 12px !important; } #djmaze-site .djmaze-global-nav.is-scrolled .booking, #djmaze-site .djmaze-global-nav.is-scrolled .whatsapp-btn { margin-top: 0 !important; margin-bottom: 0 !important; } /* Keep the WhatsApp button inside the glass bar with right padding. */ #djmaze-site .djmaze-global-nav.is-scrolled .whatsapp-btn { width: 46px !important; height: 46px !important; flex: 0 0 46px !important; } /* Shop page: keep fixed nav balanced after it leaves the hero. */ #djmaze-site.maze-shop-page-v2 .djmaze-global-nav.is-scrolled { padding-top: 14px !important; padding-bottom: 14px !important; padding-left: 18px !important; padding-right: 18px !important; } @media (max-width: 920px) { #djmaze-site .djmaze-global-nav.is-scrolled, body:not(.home) #djmaze-site .djmaze-global-nav.is-scrolled, .maze-shop-page-v2 .maze-shop-hero-v2 .djmaze-global-nav.is-scrolled, .maze-bio-page-hero-wide .biography-hero-v3 .djmaze-global-nav.is-scrolled, .maze-discography-page-hero-wide .discography-hero-v2 .djmaze-global-nav.is-scrolled { padding: 12px 14px !important; min-height: 58px !important; } #djmaze-site .djmaze-global-nav.is-scrolled { top: 18px !important; left: 14px !important; right: 14px !important; } body.admin-bar #djmaze-site .djmaze-global-nav.is-scrolled { top: 58px !important; } } /* === Global fixed menu padding + z-index correction for all pages === */ /* Always keep the menu in front of every page/section/content. */ #djmaze-site .djmaze-global-nav, #djmaze-site .djmaze-global-nav.is-scrolled, .djmaze-global-nav, .djmaze-global-nav.is-scrolled { z-index: 999999 !important; isolation: isolate !important; } /* Apply the balanced fixed menu bar to every page when scrolling. */ body #djmaze-site .djmaze-global-nav.is-scrolled, body:not(.home) #djmaze-site .djmaze-global-nav.is-scrolled, body.woocommerce-page #djmaze-site .djmaze-global-nav.is-scrolled, body.woocommerce-shop #djmaze-site .djmaze-global-nav.is-scrolled, #djmaze-site.maze-shop-page-v2 .djmaze-global-nav.is-scrolled, #djmaze-site.maze-bio-page-hero-wide .djmaze-global-nav.is-scrolled, #djmaze-site.maze-discography-page-hero-wide .djmaze-global-nav.is-scrolled, #djmaze-site.maze-discography-page .djmaze-global-nav.is-scrolled, #djmaze-site.maze-photo-page-wrap .djmaze-global-nav.is-scrolled { position: fixed !important; top: 24px !important; left: clamp(18px, 3vw, 52px) !important; right: clamp(18px, 3vw, 52px) !important; width: auto !important; height: auto !important; min-height: 64px !important; padding: 14px 18px !important; align-items: center !important; box-sizing: border-box !important; overflow: visible !important; border-radius: 16px !important; z-index: 999999 !important; background: linear-gradient(145deg, rgba(18,19,43,.76), rgba(4,6,20,.58)) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; border-color: rgba(210, 200, 255, 0.34) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 24px 80px rgba(0,0,0,.38) !important; } /* WordPress admin bar offset for every page. */ body.admin-bar #djmaze-site .djmaze-global-nav.is-scrolled, body.admin-bar:not(.home) #djmaze-site .djmaze-global-nav.is-scrolled, body.admin-bar.woocommerce-page #djmaze-site .djmaze-global-nav.is-scrolled, body.admin-bar.woocommerce-shop #djmaze-site .djmaze-global-nav.is-scrolled, body.admin-bar #djmaze-site.maze-shop-page-v2 .djmaze-global-nav.is-scrolled, body.admin-bar #djmaze-site.maze-bio-page-hero-wide .djmaze-global-nav.is-scrolled, body.admin-bar #djmaze-site.maze-discography-page-hero-wide .djmaze-global-nav.is-scrolled { top: 66px !important; } /* Make sure hero/page layers never cover the fixed menu on scroll. */ #djmaze-site .biography-hero-v3, #djmaze-site .discography-hero-v2, #djmaze-site .maze-shop-hero-v2, #djmaze-site .maze-full-discography, #djmaze-site .maze-wc-archive, #djmaze-site .maze-bio-simple-main, #djmaze-site .panel, #djmaze-site main { z-index: auto; } #djmaze-site .biography-hero-v3__content, #djmaze-site .discography-hero-v2__content, #djmaze-site .maze-shop-hero-v2__content { z-index: 3 !important; } /* Keep nav children centered inside the glass bar. */ body #djmaze-site .djmaze-global-nav.is-scrolled .brand, body #djmaze-site .djmaze-global-nav.is-scrolled .nav-links, body #djmaze-site .djmaze-global-nav.is-scrolled .nav-actions { align-items: center !important; } body #djmaze-site .djmaze-global-nav.is-scrolled .nav-actions { gap: 12px !important; } body #djmaze-site .djmaze-global-nav.is-scrolled .booking, body #djmaze-site .djmaze-global-nav.is-scrolled .whatsapp-btn { margin-top: 0 !important; margin-bottom: 0 !important; } body #djmaze-site .djmaze-global-nav.is-scrolled .whatsapp-btn { width: 46px !important; height: 46px !important; flex: 0 0 46px !important; } /* Mobile version for all pages. */ @media (max-width: 920px) { body #djmaze-site .djmaze-global-nav.is-scrolled, body:not(.home) #djmaze-site .djmaze-global-nav.is-scrolled, body.woocommerce-page #djmaze-site .djmaze-global-nav.is-scrolled, body.woocommerce-shop #djmaze-site .djmaze-global-nav.is-scrolled, #djmaze-site.maze-shop-page-v2 .djmaze-global-nav.is-scrolled, #djmaze-site.maze-bio-page-hero-wide .djmaze-global-nav.is-scrolled, #djmaze-site.maze-discography-page-hero-wide .djmaze-global-nav.is-scrolled, #djmaze-site.maze-discography-page .djmaze-global-nav.is-scrolled, #djmaze-site.maze-photo-page-wrap .djmaze-global-nav.is-scrolled { top: 18px !important; left: 14px !important; right: 14px !important; min-height: 58px !important; padding: 12px 14px !important; z-index: 999999 !important; } body.admin-bar #djmaze-site .djmaze-global-nav.is-scrolled, body.admin-bar:not(.home) #djmaze-site .djmaze-global-nav.is-scrolled, body.admin-bar.woocommerce-page #djmaze-site .djmaze-global-nav.is-scrolled, body.admin-bar.woocommerce-shop #djmaze-site .djmaze-global-nav.is-scrolled { top: 58px !important; } } /* === Biographie menu extra z-index protection === */ /* Extra protection for the Biographie page so the fixed menu always stays above biography content while scrolling. */ #djmaze-site.maze-bio-page-hero-wide .djmaze-global-nav, #djmaze-site.maze-bio-page-hero-wide .djmaze-global-nav.is-scrolled, #djmaze-site.maze-bio-page-wrap .djmaze-global-nav, #djmaze-site.maze-bio-page-wrap .djmaze-global-nav.is-scrolled { z-index: 2147483000 !important; } /* Biography content layers must stay below the navigation. */ #djmaze-site.maze-bio-page-hero-wide .maze-bio-simple-main, #djmaze-site.maze-bio-page-hero-wide .maze-bio-simple-main *, #djmaze-site.maze-bio-page-wrap .maze-bio-simple-main, #djmaze-site.maze-bio-page-wrap .maze-bio-simple-main *, #djmaze-site.maze-bio-page-wrap .maze-bio-hero, #djmaze-site.maze-bio-page-wrap .maze-bio-hero * { z-index: auto; } /* Keep hero copy below the nav, but still above hero background. */ #djmaze-site.maze-bio-page-hero-wide .biography-hero-v3__content, #djmaze-site.maze-bio-page-hero-wide .biography-hero-v3__copy { z-index: 3 !important; } /* === Home hero text + new background refinement === */ .djmaze-wp-hero .background { background-image: linear-gradient(90deg, rgba(2,3,10,.74), rgba(2,3,11,.34) 45%, rgba(2,3,10,.32)), radial-gradient(circle at 70% 40%, rgba(99,48,255,.20), transparent 34%), url("assets/images/hero/dj-maze-bg-hd.png") !important; background-position: center !important; background-size: cover !important; } .djmaze-wp-hero .eyebrow { letter-spacing: .26em !important; font-size: clamp(10px, .78vw, 13px) !important; max-width: 760px !important; } .djmaze-wp-hero .hero-slogan { margin: 16px 0 22px !important; color: rgba(255,255,255,.92) !important; font-family: 'Cormorant Garamond', serif !important; font-size: clamp(24px, 2.15vw, 42px) !important; font-weight: 600 !important; line-height: 1.08 !important; letter-spacing: .015em !important; font-style: italic !important; text-shadow: 0 0 24px rgba(157,78,221,.36), 0 12px 34px rgba(0,0,0,.34) !important; } .djmaze-wp-hero .intro { max-width: 690px !important; } .djmaze-wp-hero .stats strong { text-transform: none !important; } @media (max-width: 920px) { .djmaze-wp-hero .eyebrow { letter-spacing: .16em !important; } .djmaze-wp-hero .hero-slogan { font-size: clamp(22px, 6vw, 34px) !important; } } /* === Home hero slogan Orbitron glow refinement === */ .djmaze-wp-hero .hero-slogan { font-family: 'Orbitron', 'Inter', sans-serif !important; font-size: clamp(17px, 1.25vw, 25px) !important; font-weight: 500 !important; font-style: normal !important; line-height: 1.25 !important; letter-spacing: .18em !important; text-transform: uppercase !important; color: rgba(255,255,255,.94) !important; text-shadow: 0 0 10px rgba(157,78,221,.42), 0 0 24px rgba(0,212,255,.22), 0 10px 28px rgba(0,0,0,.38) !important; } @media (max-width: 920px) { .djmaze-wp-hero .hero-slogan { font-size: clamp(14px, 4vw, 20px) !important; letter-spacing: .10em !important; } } /* === Home hero remove glass rectangle frame === */ /* Keep the homepage hero layout intact, but remove the rounded glass rectangle that was blurring the background image. */ #djmaze-site.djmaze-home-site .djmaze-wp-hero .frame { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; border: 0 !important; outline: 0 !important; } /* Remove any frame pseudo-glass layers if present. */ #djmaze-site.djmaze-home-site .djmaze-wp-hero .frame::before, #djmaze-site.djmaze-home-site .djmaze-wp-hero .frame::after { display: none !important; content: none !important; opacity: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Keep the background clean and sharp. */ #djmaze-site.djmaze-home-site .djmaze-wp-hero .background { filter: none !important; } /* Keep widgets/glass cards unchanged; only the large hero frame is removed. */ #djmaze-site.djmaze-home-site .djmaze-wp-hero .glass-card, #djmaze-site.djmaze-home-site .djmaze-wp-hero .djmaze-global-nav, #djmaze-site.djmaze-home-site .djmaze-wp-hero .btn { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } /* === Home hero restore background + compact button/stat spacing + French widgets === */ /* Restore the hero image fit without black frame or extra outside margin. */ #djmaze-site.djmaze-home-site .djmaze-wp-hero { margin: 0 !important; padding: 0 !important; min-height: 100vh !important; overflow: hidden !important; background: #05020a !important; } #djmaze-site.djmaze-home-site .djmaze-wp-hero .background { inset: 0 !important; background-image: linear-gradient(90deg, rgba(2,3,10,.30), rgba(2,3,11,.06) 48%, rgba(2,3,10,.16)), url("assets/images/hero/dj-maze-bg-hd.png") !important; background-size: cover !important; background-position: center center !important; filter: none !important; opacity: 1 !important; } /* Keep the large glass frame removed, but do not create a new black border/frame. */ #djmaze-site.djmaze-home-site .djmaze-wp-hero .frame { width: 100% !important; max-width: none !important; min-height: 100vh !important; margin: 0 !important; border-radius: 0 !important; border: 0 !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; overflow: hidden !important; } /* Keep hero content in the same place, but make the button/stat distance cleaner. */ #djmaze-site.djmaze-home-site .djmaze-wp-hero .actions { margin-top: 34px !important; margin-bottom: 0 !important; position: relative !important; z-index: 6 !important; } #djmaze-site.djmaze-home-site .djmaze-wp-hero .stats { bottom: 66px !important; z-index: 5 !important; } /* Do not let Chrome visually overlap the buttons and stats, but keep them close. */ #djmaze-site.djmaze-home-site .djmaze-wp-hero .copy-block { padding-bottom: 92px !important; } #djmaze-site.djmaze-home-site .djmaze-wp-hero .btn { position: relative !important; z-index: 7 !important; } /* French widget text sizing — keep labels clean and readable. */ #djmaze-site.djmaze-home-site .djmaze-wp-hero .card-label, #djmaze-site.djmaze-home-site .djmaze-wp-hero .scroll-cue span { letter-spacing: .18em !important; } @media (max-width: 1180px) { #djmaze-site.djmaze-home-site .djmaze-wp-hero .copy-block { padding-bottom: 0 !important; } #djmaze-site.djmaze-home-site .djmaze-wp-hero .stats { position: relative !important; bottom: auto !important; left: auto !important; margin-top: 22px !important; width: min(680px, 100%) !important; } #djmaze-site.djmaze-home-site .djmaze-wp-hero .actions { margin-bottom: 0 !important; } } @media (max-width: 720px) { #djmaze-site.djmaze-home-site .djmaze-wp-hero .actions { margin-top: 26px !important; gap: 12px !important; } #djmaze-site.djmaze-home-site .djmaze-wp-hero .stats { margin-top: 20px !important; } } /* === Home hero DJ MAZE one-line fix === */ /* Keep the main DJ MAZE title on one line on the homepage hero. */ #djmaze-site.djmaze-home-site .djmaze-wp-hero .copy-block { width: min(760px, 58vw) !important; max-width: min(760px, 58vw) !important; } #djmaze-site.djmaze-home-site .djmaze-wp-hero .copy-block h1, #djmaze-site.djmaze-home-site .djmaze-wp-hero h1 { white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; font-size: clamp(72px, 9.2vw, 158px) !important; line-height: .82 !important; letter-spacing: -.095em !important; } /* Keep the slogan and description aligned under the one-line title. */ #djmaze-site.djmaze-home-site .djmaze-wp-hero .hero-slogan, #djmaze-site.djmaze-home-site .djmaze-wp-hero .intro { max-width: 700px !important; } @media (max-width: 1180px) { #djmaze-site.djmaze-home-site .djmaze-wp-hero .copy-block { width: 100% !important; max-width: 100% !important; } #djmaze-site.djmaze-home-site .djmaze-wp-hero .copy-block h1, #djmaze-site.djmaze-home-site .djmaze-wp-hero h1 { font-size: clamp(58px, 12vw, 118px) !important; } } @media (max-width: 680px) { #djmaze-site.djmaze-home-site .djmaze-wp-hero .copy-block h1, #djmaze-site.djmaze-home-site .djmaze-wp-hero h1 { font-size: clamp(44px, 15vw, 76px) !important; letter-spacing: -.08em !important; } } /* === Biographie hero image + text refinement === */ /* Show the new Biographie hero background clearly, without blur/dark overlay. */ #djmaze-site.maze-bio-page-wrap .biography-hero-v3__bg { background-image: url("assets/images/biography/djmaze-bio-hero-2.jpg") !important; background-size: cover !important; background-position: center center !important; filter: none !important; opacity: 1 !important; transform: none !important; } #djmaze-site.maze-bio-page-wrap .biography-hero-v3__overlay { opacity: 0 !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; display: none !important; } /* Keep DJ MAZE smaller and on one line, matching the homepage direction. */ #djmaze-site.maze-bio-page-wrap .biography-hero-v3__copy h1, #djmaze-site.maze-bio-page-wrap .biography-hero-v3 h1 { white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; font-family: 'Orbitron', 'Inter', sans-serif !important; font-size: clamp(58px, 8vw, 118px) !important; line-height: .86 !important; letter-spacing: -.075em !important; max-width: 100% !important; } /* Hide the paragraph line under the subtitle. */ #djmaze-site.maze-bio-page-wrap .biography-hero-v3__intro { display: none !important; } /* Keep the new subtitle premium and readable. */ #djmaze-site.maze-bio-page-wrap .biography-hero-v3__copy h2 { max-width: 980px !important; font-size: clamp(17px, 1.45vw, 28px) !important; line-height: 1.25 !important; letter-spacing: .08em !important; text-transform: none !important; } /* BIOGRAPHIE label */ #djmaze-site.maze-bio-page-wrap .biography-hero-v3__eyebrow { letter-spacing: .32em !important; } /* Button text refinement */ #djmaze-site.maze-bio-page-wrap .biography-hero-v3__btn span { white-space: nowrap !important; } @media (max-width: 720px) { #djmaze-site.maze-bio-page-wrap .biography-hero-v3__copy h1, #djmaze-site.maze-bio-page-wrap .biography-hero-v3 h1 { font-size: clamp(44px, 15vw, 74px) !important; letter-spacing: -.065em !important; } #djmaze-site.maze-bio-page-wrap .biography-hero-v3__copy h2 { font-size: clamp(14px, 3.6vw, 18px) !important; letter-spacing: .03em !important; } } /* === Home + Biographie hero title spacing and Biographie center refinement === */ /* Add breathing space inside DJ MAZE on the home hero while keeping it on one line. */ #djmaze-site.djmaze-home-site .djmaze-wp-hero .copy-block h1, #djmaze-site.djmaze-home-site .djmaze-wp-hero h1 { white-space: nowrap !important; letter-spacing: .018em !important; font-size: clamp(64px, 7.4vw, 130px) !important; line-height: .9 !important; } /* Add matching breathing space inside DJ MAZE on the Biographie hero while keeping it on one line. */ #djmaze-site.maze-bio-page-wrap .biography-hero-v3__copy h1, #djmaze-site.maze-bio-page-wrap .biography-hero-v3 h1 { white-space: nowrap !important; letter-spacing: .018em !important; font-size: clamp(50px, 6.6vw, 104px) !important; line-height: .92 !important; } /* Center the Biographie hero information block vertically in the hero. */ #djmaze-site.maze-bio-page-wrap .biography-hero-v3 { min-height: 100vh !important; } #djmaze-site.maze-bio-page-wrap .biography-hero-v3__content { min-height: 100vh !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; padding-top: clamp(88px, 8vh, 118px) !important; padding-bottom: clamp(70px, 8vh, 110px) !important; } #djmaze-site.maze-bio-page-wrap .biography-hero-v3__copy { transform: none !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* Make the long French subtitle smaller and force it to stay on one line on desktop. */ #djmaze-site.maze-bio-page-wrap .biography-hero-v3__copy h2 { white-space: nowrap !important; max-width: none !important; width: max-content !important; font-size: clamp(12px, 1vw, 18px) !important; line-height: 1.25 !important; letter-spacing: .055em !important; } /* Keep Biographie buttons closer to the centered text block. */ #djmaze-site.maze-bio-page-wrap .biography-hero-v3__actions { margin-top: clamp(22px, 3vh, 34px) !important; } @media (max-width: 1180px) { #djmaze-site.djmaze-home-site .djmaze-wp-hero .copy-block h1, #djmaze-site.djmaze-home-site .djmaze-wp-hero h1 { font-size: clamp(52px, 10vw, 104px) !important; letter-spacing: .01em !important; } #djmaze-site.maze-bio-page-wrap .biography-hero-v3__copy h1, #djmaze-site.maze-bio-page-wrap .biography-hero-v3 h1 { font-size: clamp(46px, 9vw, 86px) !important; letter-spacing: .01em !important; } #djmaze-site.maze-bio-page-wrap .biography-hero-v3__copy h2 { white-space: normal !important; width: auto !important; max-width: 760px !important; font-size: clamp(13px, 1.8vw, 17px) !important; } } @media (max-width: 720px) { #djmaze-site.djmaze-home-site .djmaze-wp-hero .copy-block h1, #djmaze-site.djmaze-home-site .djmaze-wp-hero h1 { font-size: clamp(39px, 13vw, 66px) !important; letter-spacing: .006em !important; } #djmaze-site.maze-bio-page-wrap .biography-hero-v3__content { align-items: center !important; padding-top: 96px !important; padding-bottom: 70px !important; } #djmaze-site.maze-bio-page-wrap .biography-hero-v3__copy h1, #djmaze-site.maze-bio-page-wrap .biography-hero-v3 h1 { font-size: clamp(38px, 13vw, 64px) !important; letter-spacing: .006em !important; } #djmaze-site.maze-bio-page-wrap .biography-hero-v3__copy h2 { white-space: normal !important; width: auto !important; font-size: clamp(12px, 3.3vw, 15px) !important; letter-spacing: .025em !important; } } /* === Discographie hero background + homepage style title refinement === */ /* Use the uploaded Discographie hero image clearly, without blur/dark overlay. */ #djmaze-site.maze-discography-page .discography-hero-v2__bg { background-image: url("assets/images/discography/djmaze-disco-hero-2.jpg") !important; background-size: cover !important; background-position: center center !important; filter: none !important; opacity: 1 !important; transform: none !important; } #djmaze-site.maze-discography-page .discography-hero-v2__overlay { opacity: 0 !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; display: none !important; } /* Keep hero content vertically premium and clean. */ #djmaze-site.maze-discography-page .discography-hero-v2 { min-height: 100vh !important; overflow: hidden !important; } #djmaze-site.maze-discography-page .discography-hero-v2__content { min-height: 100vh !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding-top: clamp(92px, 9vh, 126px) !important; padding-bottom: clamp(70px, 8vh, 110px) !important; } /* Match the home/Biographie DJ MAZE style: one line, spaced, purple-white gradient only. */ #djmaze-site.maze-discography-page .discography-hero-v2__copy h1, #djmaze-site.maze-discography-page .discography-hero-v2 h1 { white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; font-family: 'Orbitron', 'Inter', sans-serif !important; font-size: clamp(58px, 7.4vw, 124px) !important; line-height: .9 !important; letter-spacing: .018em !important; background: linear-gradient(90deg, #9d4edd 0%, #c7a6ff 46%, #ffffff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; text-shadow: none !important; } /* Discographie eyebrow and subtitle updates. */ #djmaze-site.maze-discography-page .discography-hero-v2__eyebrow { letter-spacing: .32em !important; text-transform: uppercase !important; } #djmaze-site.maze-discography-page .discography-hero-v2__copy h2 { white-space: nowrap !important; max-width: none !important; font-size: clamp(13px, 1.05vw, 19px) !important; line-height: 1.25 !important; letter-spacing: .16em !important; text-transform: uppercase !important; } /* Keep button labels on one line. */ #djmaze-site.maze-discography-page .discography-hero-v2__btn span { white-space: nowrap !important; } @media (max-width: 1180px) { #djmaze-site.maze-discography-page .discography-hero-v2__content { align-items: center !important; gap: 38px !important; } #djmaze-site.maze-discography-page .discography-hero-v2__copy h1, #djmaze-site.maze-discography-page .discography-hero-v2 h1 { font-size: clamp(48px, 10vw, 98px) !important; letter-spacing: .01em !important; } #djmaze-site.maze-discography-page .discography-hero-v2__copy h2 { white-space: normal !important; max-width: 760px !important; font-size: clamp(13px, 1.8vw, 17px) !important; letter-spacing: .08em !important; } } @media (max-width: 720px) { #djmaze-site.maze-discography-page .discography-hero-v2__copy h1, #djmaze-site.maze-discography-page .discography-hero-v2 h1 { font-size: clamp(39px, 13vw, 68px) !important; letter-spacing: .006em !important; } #djmaze-site.maze-discography-page .discography-hero-v2__copy h2 { font-size: clamp(12px, 3.2vw, 15px) !important; letter-spacing: .035em !important; } } /* === Discographie hero left alignment refinement === */ /* The Discographie hero text block should be left-aligned horizontally, while staying centered vertically in the hero section. */ #djmaze-site.maze-discography-page .discography-hero-v2__content { width: 100% !important; max-width: none !important; min-height: 100vh !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; padding-left: clamp(52px, 5.2vw, 86px) !important; padding-right: clamp(32px, 5vw, 80px) !important; padding-top: clamp(92px, 9vh, 126px) !important; padding-bottom: clamp(90px, 9vh, 130px) !important; box-sizing: border-box !important; } #djmaze-site.maze-discography-page .discography-hero-v2__copy { flex: 0 0 auto !important; width: min(760px, 58vw) !important; max-width: min(760px, 58vw) !important; margin: 0 !important; padding: 0 !important; text-align: left !important; transform: none !important; } #djmaze-site.maze-discography-page .discography-hero-v2__copy h1, #djmaze-site.maze-discography-page .discography-hero-v2__copy h2, #djmaze-site.maze-discography-page .discography-hero-v2__eyebrow { text-align: left !important; } #djmaze-site.maze-discography-page .discography-hero-v2__actions { justify-content: flex-start !important; align-items: center !important; text-align: left !important; } /* Keep the player visually aligned with the same left column. */ #djmaze-site.maze-discography-page .discography-hero-v2__player { left: clamp(52px, 5.2vw, 86px) !important; right: auto !important; } /* Prevent the left-aligned text from stretching into the artist's face. */ #djmaze-site.maze-discography-page .discography-hero-v2__copy h1 { font-size: clamp(54px, 6.7vw, 112px) !important; } #djmaze-site.maze-discography-page .discography-hero-v2__copy h2 { font-size: clamp(12px, .95vw, 17px) !important; max-width: 720px !important; } @media (max-width: 1180px) { #djmaze-site.maze-discography-page .discography-hero-v2__content { padding-left: clamp(26px, 5vw, 52px) !important; padding-right: clamp(22px, 5vw, 44px) !important; } #djmaze-site.maze-discography-page .discography-hero-v2__copy { width: min(720px, 100%) !important; max-width: min(720px, 100%) !important; } #djmaze-site.maze-discography-page .discography-hero-v2__player { left: clamp(26px, 5vw, 52px) !important; } } @media (max-width: 720px) { #djmaze-site.maze-discography-page .discography-hero-v2__content { align-items: center !important; padding-left: 22px !important; padding-right: 22px !important; } #djmaze-site.maze-discography-page .discography-hero-v2__copy h1 { font-size: clamp(38px, 12vw, 64px) !important; } #djmaze-site.maze-discography-page .discography-hero-v2__player { left: 22px !important; right: 22px !important; } } /* === Discographie hero force text block to left column === */ /* Force the Discographie hero text container to sit on the left side, not centered. It stays vertically centered in the hero. */ #djmaze-site.maze-discography-page .discography-hero-v2 { position: relative !important; } #djmaze-site.maze-discography-page .discography-hero-v2__content { position: static !important; min-height: 100vh !important; display: block !important; padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: none !important; } #djmaze-site.maze-discography-page .discography-hero-v2__copy { position: absolute !important; left: clamp(52px, 5.2vw, 86px) !important; top: 50% !important; transform: translateY(-50%) !important; width: min(720px, 46vw) !important; max-width: min(720px, 46vw) !important; margin: 0 !important; padding: 0 !important; text-align: left !important; z-index: 6 !important; } #djmaze-site.maze-discography-page .discography-hero-v2__copy h1, #djmaze-site.maze-discography-page .discography-hero-v2__copy h2, #djmaze-site.maze-discography-page .discography-hero-v2__eyebrow, #djmaze-site.maze-discography-page .discography-hero-v2__actions { text-align: left !important; justify-content: flex-start !important; margin-left: 0 !important; } /* Keep DJ MAZE on one line but contained in the left column. */ #djmaze-site.maze-discography-page .discography-hero-v2__copy h1, #djmaze-site.maze-discography-page .discography-hero-v2 h1 { font-size: clamp(48px, 6vw, 100px) !important; white-space: nowrap !important; max-width: 100% !important; } /* Keep subtitle contained under the left title. */ #djmaze-site.maze-discography-page .discography-hero-v2__copy h2 { max-width: 680px !important; white-space: nowrap !important; } /* Player remains on the same left column, bottom-left. */ #djmaze-site.maze-discography-page .discography-hero-v2__player { position: absolute !important; left: clamp(52px, 5.2vw, 86px) !important; right: auto !important; bottom: clamp(34px, 4.5vh, 64px) !important; z-index: 5 !important; } @media (max-width: 1180px) { #djmaze-site.maze-discography-page .discography-hero-v2__copy { left: clamp(28px, 5vw, 52px) !important; width: min(680px, calc(100vw - 56px)) !important; max-width: min(680px, calc(100vw - 56px)) !important; } #djmaze-site.maze-discography-page .discography-hero-v2__copy h1, #djmaze-site.maze-discography-page .discography-hero-v2 h1 { font-size: clamp(44px, 9vw, 86px) !important; } #djmaze-site.maze-discography-page .discography-hero-v2__copy h2 { white-space: normal !important; max-width: 660px !important; } #djmaze-site.maze-discography-page .discography-hero-v2__player { left: clamp(28px, 5vw, 52px) !important; } } @media (max-width: 720px) { #djmaze-site.maze-discography-page .discography-hero-v2__copy { left: 22px !important; right: 22px !important; width: auto !important; max-width: none !important; top: 47% !important; } #djmaze-site.maze-discography-page .discography-hero-v2__copy h1, #djmaze-site.maze-discography-page .discography-hero-v2 h1 { font-size: clamp(38px, 12vw, 64px) !important; } #djmaze-site.maze-discography-page .discography-hero-v2__player { left: 22px !important; right: 22px !important; bottom: 28px !important; } } /* === Discographie hero absolute left hotfix v2 === */ body #djmaze-site.maze-discography-page .discography-hero-v2__content { display: block !important; position: static !important; padding: 0 !important; max-width: none !important; width: 100% !important; } body #djmaze-site.maze-discography-page .discography-hero-v2__copy { position: absolute !important; left: clamp(64px,5.2vw,90px) !important; right: auto !important; top: 50% !important; transform: translateY(-50%) !important; width: min(690px,45vw) !important; max-width: min(690px,45vw) !important; margin: 0 !important; text-align: left !important; z-index: 30 !important; } body #djmaze-site.maze-discography-page .discography-hero-v2__player { left: clamp(64px,5.2vw,90px) !important; right: auto !important; } /* === Photos page hero styled like biography hero === */ #djmaze-site.maze-photos-page-biohero .photos-hero-v3 { position: relative; min-height: 100vh; overflow: hidden; background: #070310; } #djmaze-site.maze-photos-page-biohero .photos-hero-v3__bg { position: absolute; inset: 0; background-size: cover; background-position: center center; background-repeat: no-repeat; filter: none !important; opacity: 1 !important; transform: none !important; } #djmaze-site.maze-photos-page-biohero .photos-hero-v3__overlay { display: none !important; opacity: 0 !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #djmaze-site.maze-photos-page-biohero .photos-hero-v3 .djmaze-nav-wrap { position: absolute; top: 22px; left: 26px; right: 26px; z-index: 20; } #djmaze-site.maze-photos-page-biohero .photos-hero-v3__content { position: relative; z-index: 5; min-height: 100vh; display: flex; align-items: center; justify-content: flex-start; padding: clamp(110px, 10vh, 145px) clamp(34px, 5vw, 72px) clamp(72px, 7vh, 110px); } #djmaze-site.maze-photos-page-biohero .photos-hero-v3__copy { width: min(760px, 58vw); max-width: min(760px, 58vw); text-align: left; } #djmaze-site.maze-photos-page-biohero .photos-hero-v3__eyebrow { margin: 0 0 16px; color: #efeaff; font-family: 'Orbitron', 'Inter', sans-serif; font-size: clamp(12px, .9vw, 15px); letter-spacing: .32em; text-transform: uppercase; } #djmaze-site.maze-photos-page-biohero .photos-hero-v3__copy h1 { margin: 0; white-space: nowrap; font-family: 'Orbitron', 'Inter', sans-serif; font-size: clamp(54px, 7.2vw, 112px); line-height: .9; letter-spacing: .018em; color: #f7f2ff; text-shadow: 0 0 28px rgba(185, 136, 255, .20); } #djmaze-site.maze-photos-page-biohero .photos-hero-v3__divider { width: min(420px, 100%); height: 1px; margin: 18px 0 22px; background: linear-gradient(90deg, rgba(193,143,255,.95), rgba(193,143,255,.25), rgba(193,143,255,0)); } #djmaze-site.maze-photos-page-biohero .photos-hero-v3__copy h2 { margin: 0; color: #ffffff; font-family: 'Orbitron', 'Inter', sans-serif; font-size: clamp(14px, 1.12vw, 19px); line-height: 1.25; letter-spacing: .08em; text-transform: none; } #djmaze-site.maze-photos-page-biohero .photos-hero-v3__actions { display: flex; align-items: center; gap: 16px; margin-top: clamp(24px, 3vh, 36px); flex-wrap: wrap; } #djmaze-site.maze-photos-page-biohero .photos-hero-v3__btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 24px; border-radius: 18px; text-decoration: none; color: #fff; font-family: 'Orbitron', 'Inter', sans-serif; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; border: 1px solid rgba(190, 151, 255, .45); box-shadow: 0 10px 30px rgba(98, 36, 153, .18), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease; } #djmaze-site.maze-photos-page-biohero .photos-hero-v3__btn:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(134, 67, 212, .28), inset 0 1px 0 rgba(255,255,255,.10); } #djmaze-site.maze-photos-page-biohero .photos-hero-v3__btn--primary { background: linear-gradient(180deg, rgba(174, 102, 255, .28), rgba(89, 29, 146, .22)); } #djmaze-site.maze-photos-page-biohero .photos-hero-v3__btn--ghost { background: linear-gradient(180deg, rgba(108, 60, 167, .20), rgba(53, 24, 95, .16)); } #djmaze-site.maze-photos-page-biohero .photos-hero-v3__btn .icon { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(232, 220, 255, .16); border: 1px solid rgba(232, 220, 255, .24); } #djmaze-site.maze-photos-page-biohero .photos-hero-v3__btn .icon svg { width: 11px; height: 11px; fill: currentColor; margin-left: 1px; } #djmaze-site.maze-photos-page-biohero .photos-hero-v3__btn .arrow { font-size: 16px; line-height: 1; } #djmaze-site.maze-photos-page-biohero .maze-photo-page-grid { position: relative; z-index: 1; margin-top: 0; } @media (max-width: 1180px) { #djmaze-site.maze-photos-page-biohero .photos-hero-v3__copy { width: min(760px, 100%); max-width: min(760px, 100%); } #djmaze-site.maze-photos-page-biohero .photos-hero-v3__copy h1 { font-size: clamp(48px, 10vw, 88px); } #djmaze-site.maze-photos-page-biohero .photos-hero-v3__copy h2 { font-size: clamp(13px, 1.8vw, 17px); letter-spacing: .06em; } } @media (max-width: 720px) { #djmaze-site.maze-photos-page-biohero .photos-hero-v3 .djmaze-nav-wrap { top: 16px; left: 18px; right: 18px; } #djmaze-site.maze-photos-page-biohero .photos-hero-v3__content { padding: 108px 22px 68px; align-items: center; } #djmaze-site.maze-photos-page-biohero .photos-hero-v3__copy { width: 100%; max-width: 100%; } #djmaze-site.maze-photos-page-biohero .photos-hero-v3__copy h1 { font-size: clamp(40px, 13vw, 68px); white-space: normal; } #djmaze-site.maze-photos-page-biohero .photos-hero-v3__copy h2 { font-size: clamp(12px, 3.2vw, 15px); letter-spacing: .03em; } #djmaze-site.maze-photos-page-biohero .photos-hero-v3__actions { gap: 12px; } #djmaze-site.maze-photos-page-biohero .photos-hero-v3__btn { min-height: 52px; padding: 0 20px; font-size: 12px; letter-spacing: .10em; } } /* === Photos hero menu overlay + remove top black space === */ /* Remove the black gap above the Photos hero and let the background start from the top. */ body #djmaze-site.maze-photos-page-biohero, body #djmaze-site.maze-photos-page-biohero .photos-hero-v3 { margin-top: 0 !important; padding-top: 0 !important; } body #djmaze-site.maze-photos-page-biohero .photos-hero-v3 { position: relative !important; min-height: 100vh !important; overflow: hidden !important; background: transparent !important; } /* Background image must cover the full hero area from the very top. */ body #djmaze-site.maze-photos-page-biohero .photos-hero-v3__bg { position: absolute !important; inset: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; background-image: url("assets/images/photos/djmaze-photo-hero-2.jpg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; filter: none !important; opacity: 1 !important; transform: none !important; z-index: 0 !important; } /* Keep overlay removed so the image stays sharp. */ body #djmaze-site.maze-photos-page-biohero .photos-hero-v3__overlay { display: none !important; opacity: 0 !important; } /* The normal hero menu must sit ON TOP of the background image, not above it. */ body #djmaze-site.maze-photos-page-biohero .photos-hero-v3 > .djmaze-global-nav, body #djmaze-site.maze-photos-page-biohero .photos-hero-v3 .djmaze-global-nav:not(.is-scrolled) { position: absolute !important; top: 24px !important; left: clamp(24px, 3.5vw, 54px) !important; right: clamp(24px, 3.5vw, 54px) !important; width: auto !important; max-width: none !important; margin: 0 !important; z-index: 2147483000 !important; transform: none !important; } /* When scrolling, keep the same fixed menu behavior as the other pages. */ body #djmaze-site.maze-photos-page-biohero .photos-hero-v3 .djmaze-global-nav.is-scrolled, body #djmaze-site.maze-photos-page-biohero .djmaze-global-nav.is-scrolled { position: fixed !important; top: 24px !important; left: clamp(24px, 3.5vw, 54px) !important; right: clamp(24px, 3.5vw, 54px) !important; width: auto !important; max-width: none !important; z-index: 2147483000 !important; } /* Logged-in WordPress admin bar support: do not create a black page gap, only lower the menu. */ body.admin-bar #djmaze-site.maze-photos-page-biohero .photos-hero-v3 > .djmaze-global-nav, body.admin-bar #djmaze-site.maze-photos-page-biohero .photos-hero-v3 .djmaze-global-nav:not(.is-scrolled), body.admin-bar #djmaze-site.maze-photos-page-biohero .photos-hero-v3 .djmaze-global-nav.is-scrolled, body.admin-bar #djmaze-site.maze-photos-page-biohero .djmaze-global-nav.is-scrolled { top: 56px !important; } /* Keep the hero content centered vertically over the background. */ body #djmaze-site.maze-photos-page-biohero .photos-hero-v3__content { position: relative !important; z-index: 5 !important; min-height: 100vh !important; margin-top: 0 !important; padding-top: clamp(100px, 10vh, 140px) !important; } /* Remove older selector that targeted the wrong menu wrapper and could reserve space. */ body #djmaze-site.maze-photos-page-biohero .photos-hero-v3 .djmaze-nav-wrap { position: absolute !important; top: 24px !important; left: clamp(24px, 3.5vw, 54px) !important; right: clamp(24px, 3.5vw, 54px) !important; z-index: 2147483000 !important; } @media (max-width: 720px) { body #djmaze-site.maze-photos-page-biohero .photos-hero-v3 > .djmaze-global-nav, body #djmaze-site.maze-photos-page-biohero .photos-hero-v3 .djmaze-global-nav:not(.is-scrolled), body #djmaze-site.maze-photos-page-biohero .photos-hero-v3 .djmaze-global-nav.is-scrolled, body #djmaze-site.maze-photos-page-biohero .djmaze-global-nav.is-scrolled { top: 16px !important; left: 18px !important; right: 18px !important; } body.admin-bar #djmaze-site.maze-photos-page-biohero .photos-hero-v3 > .djmaze-global-nav, body.admin-bar #djmaze-site.maze-photos-page-biohero .photos-hero-v3 .djmaze-global-nav:not(.is-scrolled), body.admin-bar #djmaze-site.maze-photos-page-biohero .photos-hero-v3 .djmaze-global-nav.is-scrolled, body.admin-bar #djmaze-site.maze-photos-page-biohero .djmaze-global-nav.is-scrolled { top: 62px !important; } } /* === Photos hero hard fix: background under menu === */ body #djmaze-site.maze-photos-page-biohero { margin-top: 0 !important; padding-top: 0 !important; background: url("assets/images/photos/djmaze-photo-hero-2.jpg") center top / cover no-repeat !important; } body #djmaze-site.maze-photos-page-biohero .photos-hero-v3 { margin: 0 !important; padding: 0 !important; background: url("assets/images/photos/djmaze-photo-hero-2.jpg") center top / cover no-repeat !important; } body #djmaze-site.maze-photos-page-biohero .photos-hero-v3__bg { inset: 0 !important; top: 0 !important; background-image: url("assets/images/photos/djmaze-photo-hero-2.jpg") !important; background-size: cover !important; background-position: center top !important; background-repeat: no-repeat !important; filter: none !important; opacity: 1 !important; transform: none !important; } body #djmaze-site.maze-photos-page-biohero .photos-hero-v3 > .djmaze-global-nav { position: absolute !important; top: 24px !important; left: clamp(24px, 3.5vw, 54px) !important; right: clamp(24px, 3.5vw, 54px) !important; width: auto !important; max-width: none !important; margin: 0 !important; z-index: 2147483000 !important; } /* === Photos page: exact Biographie hero/header/background settings === */ /* Photos hero now uses the same Biographie hero classes/settings. This removes the black menu band and keeps the menu over the background image. */ body #djmaze-site.photos-page-as-bio, body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone { margin-top: 0 !important; padding-top: 0 !important; background: #05020a !important; } body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone { position: relative !important; min-height: 100vh !important; overflow: hidden !important; } /* Same background behavior as Biographie page, using the Photos image. */ body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .biography-hero-v3__bg, body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .photos-hero-v3__bg { position: absolute !important; inset: 0 !important; background-image: url("assets/images/photos/djmaze-photo-hero-2.jpg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; filter: none !important; opacity: 1 !important; transform: none !important; } /* Keep the same no-dark-overlay treatment as the latest Biographie hero. */ body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .biography-hero-v3__overlay, body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .photos-hero-v3__overlay { display: none !important; opacity: 0 !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Do not let the old Photos hero/menu rules reserve a black space. */ body #djmaze-site.photos-page-as-bio .photos-hero-v3, body #djmaze-site.photos-page-as-bio .photos-hero-v3__content, body #djmaze-site.photos-page-as-bio .photos-hero-v3__bg, body #djmaze-site.photos-page-as-bio .photos-hero-v3__overlay { margin-top: 0 !important; } /* Header/menu: same overlay behavior as Biographie page. */ body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone > .djmaze-global-nav, body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .djmaze-global-nav:not(.is-scrolled) { position: absolute !important; top: 24px !important; left: clamp(24px, 3.5vw, 54px) !important; right: clamp(24px, 3.5vw, 54px) !important; width: auto !important; max-width: none !important; margin: 0 !important; z-index: 2147483000 !important; } /* On scroll, follow global fixed menu behavior. */ body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .djmaze-global-nav.is-scrolled, body #djmaze-site.photos-page-as-bio .djmaze-global-nav.is-scrolled { position: fixed !important; top: 24px !important; left: clamp(24px, 3.5vw, 54px) !important; right: clamp(24px, 3.5vw, 54px) !important; width: auto !important; max-width: none !important; z-index: 2147483000 !important; } /* Admin bar: lower menu only, not the whole hero/background. */ body.admin-bar #djmaze-site.photos-page-as-bio .photos-hero-biography-clone > .djmaze-global-nav, body.admin-bar #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .djmaze-global-nav:not(.is-scrolled), body.admin-bar #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .djmaze-global-nav.is-scrolled, body.admin-bar #djmaze-site.photos-page-as-bio .djmaze-global-nav.is-scrolled { top: 56px !important; } /* Content: exact Biographie-style vertical centering. */ body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .biography-hero-v3__content { min-height: 100vh !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; padding-top: clamp(88px, 8vh, 118px) !important; padding-bottom: clamp(70px, 8vh, 110px) !important; } /* Purple glassmorphism buttons for Photos hero. */ body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .biography-hero-v3__btn { background: linear-gradient(180deg, rgba(162, 90, 255, .28), rgba(55, 20, 100, .18)) !important; border: 1px solid rgba(200, 158, 255, .46) !important; box-shadow: 0 14px 38px rgba(89, 29, 146, .22), inset 0 1px 0 rgba(255,255,255,.10) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; } /* Keep DJ MAZE and subtitle clean like Biographie. */ body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .biography-hero-v3__copy h1 { white-space: nowrap !important; letter-spacing: .018em !important; font-size: clamp(50px, 6.6vw, 104px) !important; line-height: .92 !important; } body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .biography-hero-v3__copy h2 { white-space: nowrap !important; max-width: none !important; width: max-content !important; font-size: clamp(13px, 1vw, 18px) !important; line-height: 1.25 !important; letter-spacing: .055em !important; } @media (max-width: 1180px) { body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .biography-hero-v3__copy h2 { white-space: normal !important; width: auto !important; max-width: 760px !important; } } @media (max-width: 720px) { body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone > .djmaze-global-nav, body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .djmaze-global-nav:not(.is-scrolled), body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .djmaze-global-nav.is-scrolled, body #djmaze-site.photos-page-as-bio .djmaze-global-nav.is-scrolled { top: 16px !important; left: 18px !important; right: 18px !important; } body.admin-bar #djmaze-site.photos-page-as-bio .photos-hero-biography-clone > .djmaze-global-nav, body.admin-bar #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .djmaze-global-nav:not(.is-scrolled), body.admin-bar #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .djmaze-global-nav.is-scrolled, body.admin-bar #djmaze-site.photos-page-as-bio .djmaze-global-nav.is-scrolled { top: 62px !important; } body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .biography-hero-v3__copy h1 { font-size: clamp(38px, 13vw, 64px) !important; letter-spacing: .006em !important; } body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .biography-hero-v3__copy h2 { white-space: normal !important; width: auto !important; font-size: clamp(12px, 3.3vw, 15px) !important; letter-spacing: .025em !important; } } /* === Biographie page + Home Biographie section black/orbitron/no-border refinement === */ /* Biographie page body: pure black continuation from hero. */ body #djmaze-site.maze-bio-page-wrap, body #djmaze-site.maze-bio-page-wrap.maze-bio-page-simple, body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-main, body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-main section, body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-intro, body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-sections, body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-quote, body #djmaze-site.maze-bio-page-wrap .maze-bio-panels { background: #000000 !important; } /* No borders on the Biographie page photo. */ body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-photo, body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-photo.tilt-card, body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-photo::before, body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-photo::after { border: 0 !important; outline: 0 !important; } body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-photo { background: #000000 !important; border-radius: 28px !important; overflow: hidden !important; box-shadow: 0 38px 100px rgba(0,0,0,.72), 0 0 70px rgba(157,78,221,.08) !important; } body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-photo img { width: 100% !important; height: 620px !important; object-fit: cover !important; object-position: center center !important; display: block !important; filter: none !important; } /* Orbitron titles on the Biographie page body. */ body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-main h1, body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-main h2, body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-main h3, body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-main .maze-kicker, body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-main blockquote, body #djmaze-site.maze-bio-page-wrap .maze-bio-panels article span, body #djmaze-site.maze-bio-page-wrap .maze-bio-panels article h3 { font-family: 'Orbitron', 'Inter', sans-serif !important; text-transform: uppercase !important; } body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-copy .maze-kicker { color: #b98cff !important; font-size: clamp(12px, .9vw, 15px) !important; letter-spacing: .30em !important; margin-bottom: 18px !important; } body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-copy h2 { color: #ffffff !important; font-size: clamp(34px, 4.25vw, 68px) !important; line-height: 1.02 !important; letter-spacing: .015em !important; margin-bottom: 28px !important; text-shadow: 0 0 26px rgba(157,78,221,.15) !important; } body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-copy p, body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-sections p { color: rgba(255,255,255,.76) !important; line-height: 1.86 !important; } body #djmaze-site.maze-bio-page-wrap .maze-blue-highlight { color: #b98cff !important; text-shadow: 0 0 18px rgba(157,78,221,.25) !important; } /* Biographie page cards: dark, premium, no visible hard borders. */ body #djmaze-site.maze-bio-page-wrap .maze-bio-panels article, body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-sections article, body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-quote { border: 0 !important; outline: 0 !important; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014)) !important; box-shadow: 0 28px 85px rgba(0,0,0,.48) !important; } body #djmaze-site.maze-bio-page-wrap .maze-bio-panels article span, body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-sections article span { color: #b98cff !important; text-shadow: 0 0 22px rgba(157,78,221,.30) !important; } /* Home page Biographie section: black, cinematic, connected to the hero design. */ body #djmaze-site.djmaze-home-site #bio.maze-bio, body #djmaze-site.djmaze-home-site #bio.maze-bio-home-updated, body #djmaze-site.djmaze-home-site .maze-bio-home-updated, body #djmaze-site.djmaze-home-site section#bio { background: #000000 !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* Remove any panel/glass border effect inside the home Biographie section. */ body #djmaze-site.djmaze-home-site #bio.maze-bio.panel, body #djmaze-site.djmaze-home-site #bio.maze-bio.panel::before, body #djmaze-site.djmaze-home-site #bio.maze-bio.panel::after { border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* Home Biographie photo: replace image already done in PHP, remove borders visually. */ body #djmaze-site.djmaze-home-site #bio .maze-bio-image, body #djmaze-site.djmaze-home-site #bio .maze-bio-image.tilt-card, body #djmaze-site.djmaze-home-site #bio .maze-bio-image::before, body #djmaze-site.djmaze-home-site #bio .maze-bio-image::after { border: 0 !important; outline: 0 !important; } body #djmaze-site.djmaze-home-site #bio .maze-bio-image { background: #000000 !important; overflow: hidden !important; border-radius: 28px !important; box-shadow: 0 40px 100px rgba(0,0,0,.72), 0 0 70px rgba(157,78,221,.08) !important; } body #djmaze-site.djmaze-home-site #bio .maze-bio-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; display: block !important; filter: none !important; } /* Home Biographie titles: Orbitron and hero-compatible. */ body #djmaze-site.djmaze-home-site #bio .maze-kicker, body #djmaze-site.djmaze-home-site #bio .maze-bio-text h2, body #djmaze-site.djmaze-home-site #bio .maze-stats strong, body #djmaze-site.djmaze-home-site #bio .maze-stats span { font-family: 'Orbitron', 'Inter', sans-serif !important; text-transform: uppercase !important; } body #djmaze-site.djmaze-home-site #bio .maze-kicker { color: #b98cff !important; letter-spacing: .30em !important; text-shadow: 0 0 18px rgba(157,78,221,.22) !important; } body #djmaze-site.djmaze-home-site #bio .maze-bio-text h2 { color: #ffffff !important; font-size: clamp(48px, 7vw, 104px) !important; line-height: .9 !important; letter-spacing: .018em !important; text-shadow: 0 0 28px rgba(157,78,221,.16) !important; } /* Home Biographie scroll box: no borders, black/purple hero mood. */ body #djmaze-site.djmaze-home-site #bio .maze-bio-scrollbox, body #djmaze-site.djmaze-home-site #bio .maze-bio-scrollbox::before, body #djmaze-site.djmaze-home-site #bio .maze-bio-scrollbox::after { border: 0 !important; outline: 0 !important; } body #djmaze-site.djmaze-home-site #bio .maze-bio-scrollbox { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 30px 90px rgba(0,0,0,.42) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } body #djmaze-site.djmaze-home-site #bio .maze-bio-scrollbox p, body #djmaze-site.djmaze-home-site #bio .maze-bio-scroll-inner p { color: rgba(255,255,255,.76) !important; line-height: 1.86 !important; } body #djmaze-site.djmaze-home-site #bio .maze-bio-scrollbox strong span, body #djmaze-site.djmaze-home-site #bio .maze-bio-scroll-inner strong span { color: #b98cff !important; text-shadow: 0 0 16px rgba(157,78,221,.25) !important; } /* Home Biographie stats: no borders, same futuristic dark feel. */ body #djmaze-site.djmaze-home-site #bio .maze-stats, body #djmaze-site.djmaze-home-site #bio .maze-stats div { border: 0 !important; outline: 0 !important; } body #djmaze-site.djmaze-home-site #bio .maze-stats div { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)) !important; box-shadow: 0 22px 70px rgba(0,0,0,.38) !important; } body #djmaze-site.djmaze-home-site #bio .maze-stats strong { color: #b98cff !important; text-shadow: 0 0 22px rgba(157,78,221,.26) !important; } body #djmaze-site.djmaze-home-site #bio .maze-bio-more { background: linear-gradient(180deg, rgba(162,90,255,.32), rgba(55,20,100,.18)) !important; border: 0 !important; box-shadow: 0 18px 44px rgba(89,29,146,.26), inset 0 1px 0 rgba(255,255,255,.10) !important; font-family: 'Orbitron', 'Inter', sans-serif !important; letter-spacing: .12em !important; } @media (max-width: 900px) { body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-photo img { height: auto !important; min-height: 520px !important; } body #djmaze-site.djmaze-home-site #bio .maze-bio-text h2 { font-size: clamp(40px, 14vw, 76px) !important; } } /* === Home Biographie full-black wide section + bigger photo === */ /* Force the HOME page Biographie section to be pure black, no gradients, no boxed background. */ body #djmaze-site.djmaze-home-site section#bio.maze-bio, body #djmaze-site.djmaze-home-site section#bio.maze-bio-home-updated, body #djmaze-site.djmaze-home-site section#bio.panel, body #djmaze-site.djmaze-home-site .maze-bio-home-updated { background: #000000 !important; background-image: none !important; background-color: #000000 !important; max-width: none !important; width: 100% !important; margin: 0 !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* Remove any pseudo overlay/gradient that can create a colored background. */ body #djmaze-site.djmaze-home-site section#bio::before, body #djmaze-site.djmaze-home-site section#bio::after, body #djmaze-site.djmaze-home-site .maze-bio-home-updated::before, body #djmaze-site.djmaze-home-site .maze-bio-home-updated::after { display: none !important; content: none !important; background: transparent !important; background-image: none !important; opacity: 0 !important; border: 0 !important; box-shadow: none !important; } /* Make the section wide like the hero, not a boxed narrow container. */ body #djmaze-site.djmaze-home-site section#bio.maze-bio-home-updated { display: grid !important; grid-template-columns: minmax(460px, .95fr) minmax(520px, 1.05fr) !important; gap: clamp(42px, 5vw, 90px) !important; align-items: center !important; min-height: 100vh !important; padding: clamp(90px, 9vw, 135px) clamp(32px, 4.8vw, 78px) !important; box-sizing: border-box !important; } /* Bigger HOME Biographie portrait, no borders. */ body #djmaze-site.djmaze-home-site section#bio .maze-bio-image, body #djmaze-site.djmaze-home-site section#bio .maze-bio-image.tilt-card { width: 100% !important; max-width: none !important; min-height: clamp(680px, 78vh, 900px) !important; height: clamp(680px, 78vh, 900px) !important; background: #000000 !important; background-image: none !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; overflow: hidden !important; box-shadow: none !important; } body #djmaze-site.djmaze-home-site section#bio .maze-bio-image::before, body #djmaze-site.djmaze-home-site section#bio .maze-bio-image::after { display: none !important; content: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } body #djmaze-site.djmaze-home-site section#bio .maze-bio-image img { width: 100% !important; height: 100% !important; min-height: clamp(680px, 78vh, 900px) !important; object-fit: cover !important; object-position: center center !important; display: block !important; opacity: 1 !important; filter: none !important; } /* Text column: keep it premium and aligned with the home hero mood. */ body #djmaze-site.djmaze-home-site section#bio .maze-bio-text { width: 100% !important; max-width: none !important; padding-right: clamp(0px, 1vw, 28px) !important; } /* Orbitron titles in the HOME Biographie section. */ body #djmaze-site.djmaze-home-site section#bio .maze-kicker, body #djmaze-site.djmaze-home-site section#bio .maze-bio-text h2, body #djmaze-site.djmaze-home-site section#bio .maze-stats strong, body #djmaze-site.djmaze-home-site section#bio .maze-stats span { font-family: 'Orbitron', 'Inter', sans-serif !important; text-transform: uppercase !important; } body #djmaze-site.djmaze-home-site section#bio .maze-kicker { color: #b98cff !important; letter-spacing: .32em !important; text-shadow: 0 0 18px rgba(157,78,221,.28) !important; } body #djmaze-site.djmaze-home-site section#bio .maze-bio-text h2 { color: #ffffff !important; font-size: clamp(58px, 7.8vw, 130px) !important; line-height: .88 !important; letter-spacing: .018em !important; margin-bottom: 28px !important; text-shadow: 0 0 30px rgba(157,78,221,.18) !important; } /* Scrolling box: no borders and no colored gradient background. */ body #djmaze-site.djmaze-home-site section#bio .maze-bio-scrollbox { height: clamp(360px, 39vh, 460px) !important; background: rgba(255,255,255,.035) !important; background-image: none !important; border: 0 !important; outline: 0 !important; border-radius: 26px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 30px 90px rgba(0,0,0,.42) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } body #djmaze-site.djmaze-home-site section#bio .maze-bio-scrollbox::before, body #djmaze-site.djmaze-home-site section#bio .maze-bio-scrollbox::after { background: linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,0)) !important; border: 0 !important; box-shadow: none !important; } body #djmaze-site.djmaze-home-site section#bio .maze-bio-scrollbox::after { background: linear-gradient(0deg, rgba(0,0,0,.95), rgba(0,0,0,0)) !important; } body #djmaze-site.djmaze-home-site section#bio .maze-bio-scroll-inner { scrollbar-color: rgba(185,140,255,.8) rgba(255,255,255,.05) !important; } body #djmaze-site.djmaze-home-site section#bio .maze-bio-scroll-inner::-webkit-scrollbar-track { background: rgba(255,255,255,.05) !important; } body #djmaze-site.djmaze-home-site section#bio .maze-bio-scroll-inner::-webkit-scrollbar-thumb { background: #b98cff !important; } body #djmaze-site.djmaze-home-site section#bio .maze-bio-scroll-inner p { color: rgba(255,255,255,.76) !important; line-height: 1.86 !important; } /* Home Bio stats: no borders, dark only, no blue gradient. */ body #djmaze-site.djmaze-home-site section#bio .maze-stats, body #djmaze-site.djmaze-home-site section#bio .maze-stats div { border: 0 !important; outline: 0 !important; } body #djmaze-site.djmaze-home-site section#bio .maze-stats div { background: rgba(255,255,255,.04) !important; background-image: none !important; box-shadow: 0 22px 70px rgba(0,0,0,.38) !important; } body #djmaze-site.djmaze-home-site section#bio .maze-stats strong, body #djmaze-site.djmaze-home-site section#bio .maze-bio-scroll-inner strong span { color: #b98cff !important; text-shadow: 0 0 20px rgba(157,78,221,.28) !important; } /* Keep button matching the hero without a border. */ body #djmaze-site.djmaze-home-site section#bio .maze-bio-more { background: linear-gradient(180deg, rgba(162,90,255,.34), rgba(55,20,100,.20)) !important; border: 0 !important; box-shadow: 0 18px 44px rgba(89,29,146,.26), inset 0 1px 0 rgba(255,255,255,.10) !important; font-family: 'Orbitron', 'Inter', sans-serif !important; letter-spacing: .12em !important; } /* Keep the separate Biographie page photo borderless too. */ body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-photo, body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-photo.tilt-card { border: 0 !important; outline: 0 !important; } @media (max-width: 1100px) { body #djmaze-site.djmaze-home-site section#bio.maze-bio-home-updated { grid-template-columns: 1fr !important; padding-left: 24px !important; padding-right: 24px !important; } body #djmaze-site.djmaze-home-site section#bio .maze-bio-image, body #djmaze-site.djmaze-home-site section#bio .maze-bio-image.tilt-card, body #djmaze-site.djmaze-home-site section#bio .maze-bio-image img { height: auto !important; min-height: 620px !important; } body #djmaze-site.djmaze-home-site section#bio .maze-bio-text h2 { font-size: clamp(46px, 14vw, 92px) !important; } } /* === Home Biographie title smaller + Certifications light animated wide section === */ /* Home Biographie: make DJ MAZE a bit smaller while keeping the Orbitron hero feel. */ body #djmaze-site.djmaze-home-site section#bio .maze-bio-text h2 { font-size: clamp(46px, 6.2vw, 102px) !important; line-height: .9 !important; letter-spacing: .018em !important; } /* Certifications: full-width/wider like the hero, not boxed. */ body #djmaze-site.djmaze-home-site section#certifications.maze-certifications-subtle, body #djmaze-site.djmaze-home-site section#certifications.maze-certifications, body #djmaze-site.djmaze-home-site section#certifications.panel { width: 100% !important; max-width: none !important; margin: 0 !important; padding: clamp(82px, 8vw, 130px) clamp(32px, 4.8vw, 78px) !important; box-sizing: border-box !important; position: relative !important; overflow: hidden !important; background: radial-gradient(circle at 18% 22%, rgba(157,78,221,.10), transparent 30%), radial-gradient(circle at 82% 34%, rgba(0,212,255,.08), transparent 28%), linear-gradient(120deg, #ffffff 0%, #f8f5ff 48%, #ffffff 100%) !important; color: #08040f !important; } /* Constant subtle animated background movement for Certifications. */ body #djmaze-site.djmaze-home-site section#certifications::before { content: "" !important; position: absolute !important; inset: -35% !important; z-index: 0 !important; pointer-events: none !important; background: radial-gradient(circle at 20% 40%, rgba(157,78,221,.16), transparent 25%), radial-gradient(circle at 72% 30%, rgba(0,212,255,.10), transparent 22%), radial-gradient(circle at 55% 74%, rgba(255,255,255,.90), transparent 26%) !important; filter: blur(18px) !important; animation: djmazeCertGlowMove 16s ease-in-out infinite alternate !important; } body #djmaze-site.djmaze-home-site section#certifications::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background-image: linear-gradient(rgba(10,4,22,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(10,4,22,.035) 1px, transparent 1px) !important; background-size: 54px 54px !important; animation: djmazeCertGridMove 24s linear infinite !important; opacity: .55 !important; } @keyframes djmazeCertGlowMove { 0% { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .75; } 50% { transform: translate3d(2%, 1.5%, 0) scale(1.04); opacity: .95; } 100% { transform: translate3d(4%, -2%, 0) scale(1.02); opacity: .82; } } @keyframes djmazeCertGridMove { 0% { background-position: 0 0, 0 0; } 100% { background-position: 54px 54px, 54px 54px; } } /* Keep certification content above the animated background. */ body #djmaze-site.djmaze-home-site section#certifications > * { position: relative !important; z-index: 2 !important; } /* Certifications title: Orbitron and styled to match the hero language. */ body #djmaze-site.djmaze-home-site section#certifications .maze-cert-subtle-head .maze-kicker, body #djmaze-site.djmaze-home-site section#certifications .maze-cert-subtle-head h2, body #djmaze-site.djmaze-home-site section#certifications h2 { font-family: 'Orbitron', 'Inter', sans-serif !important; text-transform: uppercase !important; } body #djmaze-site.djmaze-home-site section#certifications .maze-cert-subtle-head { max-width: 1480px !important; margin: 0 auto clamp(30px, 4vw, 58px) !important; } body #djmaze-site.djmaze-home-site section#certifications .maze-cert-subtle-head .maze-kicker { color: #7b2cff !important; letter-spacing: .32em !important; text-shadow: 0 0 18px rgba(157,78,221,.16) !important; } body #djmaze-site.djmaze-home-site section#certifications .maze-cert-subtle-head h2, body #djmaze-site.djmaze-home-site section#certifications h2 { color: #07040d !important; font-size: clamp(34px, 4.8vw, 82px) !important; line-height: 1 !important; letter-spacing: .012em !important; text-shadow: 0 8px 28px rgba(20,8,35,.10) !important; } /* Wider certification list with light premium cards. */ body #djmaze-site.djmaze-home-site section#certifications .maze-cert-subtle-list { max-width: 1480px !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; } body #djmaze-site.djmaze-home-site section#certifications .maze-cert-subtle-list article { background: rgba(255,255,255,.76) !important; border: 1px solid rgba(12,8,24,.08) !important; box-shadow: 0 22px 80px rgba(31,16,63,.10), inset 0 1px 0 rgba(255,255,255,.80) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } body #djmaze-site.djmaze-home-site section#certifications .maze-cert-subtle-list article strong { color: #08040f !important; } body #djmaze-site.djmaze-home-site section#certifications .maze-cert-subtle-list article span { color: rgba(8,4,15,.62) !important; } @media (max-width: 900px) { body #djmaze-site.djmaze-home-site section#bio .maze-bio-text h2 { font-size: clamp(38px, 12vw, 76px) !important; } body #djmaze-site.djmaze-home-site section#certifications.maze-certifications-subtle, body #djmaze-site.djmaze-home-site section#certifications.maze-certifications, body #djmaze-site.djmaze-home-site section#certifications.panel { padding-left: 24px !important; padding-right: 24px !important; } } /* === Certifications dots visibility refinement === */ /* Make the grey certification dots dark grey on the light section. Yellow/gold dots are kept unchanged. */ body #djmaze-site.djmaze-home-site section#certifications .cert-dots i, body #djmaze-site.djmaze-home-site section#certifications .cert-dots.platinum i, body #djmaze-site.djmaze-home-site section#certifications .cert-dots.silver i, body #djmaze-site.djmaze-home-site section#certifications .cert-dots:not(.gold) i { background: #3f3f46 !important; box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.20) !important; opacity: 1 !important; } /* Preserve the yellow/gold dots exactly as the client likes them. */ body #djmaze-site.djmaze-home-site section#certifications .cert-dots.gold i { background: #ffd166 !important; box-shadow: 0 0 18px rgba(255,209,102,.45) !important; opacity: 1 !important; } /* === Certifications title one-line refinement === */ /* Keep "DISQUES D’OR, PLATINE & DIAMANT" on one line and reduce its size. */ body #djmaze-site.djmaze-home-site section#certifications .maze-cert-subtle-head { display: block !important; max-width: 1480px !important; width: 100% !important; } body #djmaze-site.djmaze-home-site section#certifications .maze-cert-subtle-head h2, body #djmaze-site.djmaze-home-site section#certifications h2 { white-space: nowrap !important; font-size: clamp(28px, 3.2vw, 58px) !important; line-height: 1.04 !important; letter-spacing: .006em !important; max-width: 100% !important; } /* On smaller screens, keep it readable without breaking the layout. */ @media (max-width: 900px) { body #djmaze-site.djmaze-home-site section#certifications .maze-cert-subtle-head h2, body #djmaze-site.djmaze-home-site section#certifications h2 { font-size: clamp(23px, 6vw, 42px) !important; white-space: normal !important; } } /* === Certifications title smaller final === */ body #djmaze-site.djmaze-home-site section#certifications .maze-cert-subtle-head h2, body #djmaze-site.djmaze-home-site section#certifications h2 { font-size: clamp(22px, 2.45vw, 44px) !important; line-height: 1.08 !important; white-space: nowrap !important; } @media (max-width: 900px) { body #djmaze-site.djmaze-home-site section#certifications .maze-cert-subtle-head h2, body #djmaze-site.djmaze-home-site section#certifications h2 { font-size: clamp(20px, 5vw, 34px) !important; white-space: normal !important; } } /* === Home Discographie modern carousel redesign === */ /* Full-width, hero-like discographie section. */ body #djmaze-site.djmaze-home-site section#discography.maze-discography-carousel-section, body #djmaze-site.djmaze-home-site section#discography.maze-home-discography, body #djmaze-site.djmaze-home-site section#discography.panel { width: 100% !important; max-width: none !important; margin: 0 !important; min-height: 100vh !important; padding: clamp(86px, 8vw, 132px) 0 clamp(74px, 7vw, 115px) !important; background: #000000 !important; background-image: none !important; color: #ffffff !important; overflow: hidden !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* Remove any old boxed/grid feel. */ body #djmaze-site.djmaze-home-site section#discography::before, body #djmaze-site.djmaze-home-site section#discography::after { content: "" !important; position: absolute !important; pointer-events: none !important; z-index: 0 !important; border: 0 !important; } body #djmaze-site.djmaze-home-site section#discography::before { inset: -22% !important; background: radial-gradient(circle at 48% 48%, rgba(157,78,221,.18), transparent 19%), radial-gradient(circle at 52% 48%, rgba(0,212,255,.10), transparent 24%), radial-gradient(circle at 50% 80%, rgba(120,255,178,.08), transparent 26%) !important; filter: blur(18px) !important; animation: mazeDiscographyAmbientMove 14s ease-in-out infinite alternate !important; } body #djmaze-site.djmaze-home-site section#discography::after { inset: 0 !important; background: linear-gradient(180deg, rgba(0,0,0,.08), #000 92%) !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-shell { position: relative !important; z-index: 2 !important; width: 100% !important; max-width: none !important; margin: 0 !important; } /* Header like the reference, but with DJ Maze typography. */ body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-head { max-width: min(1120px, calc(100% - 48px)) !important; margin: 0 auto clamp(36px, 4.6vw, 68px) !important; padding: 0 !important; text-align: center !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-head .maze-kicker, body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-head h2 { font-family: 'Orbitron', 'Inter', sans-serif !important; text-transform: uppercase !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-head .maze-kicker { color: #b98cff !important; letter-spacing: .34em !important; margin-bottom: 18px !important; text-shadow: 0 0 20px rgba(157,78,221,.32) !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-head h2 { color: #ffffff !important; font-size: clamp(42px, 7vw, 112px) !important; line-height: .92 !important; letter-spacing: .025em !important; margin: 0 0 18px !important; text-shadow: 0 0 30px rgba(157,78,221,.20) !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-head p:not(.maze-kicker) { max-width: 760px !important; margin: 0 auto !important; color: rgba(255,255,255,.62) !important; font-size: clamp(14px, 1.2vw, 18px) !important; line-height: 1.75 !important; } /* The carousel stage is full-bleed and borderless. */ body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-stage { position: relative !important; width: 100vw !important; max-width: none !important; margin-left: 50% !important; transform: translateX(-50%) !important; height: clamp(360px, 40vw, 580px) !important; overflow: hidden !important; perspective: 1200px !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* Center energy line like the reference, adapted to DJ Maze purple/blue. */ body #djmaze-site.djmaze-home-site section#discography .maze-discography-energy-line { position: absolute !important; left: 50% !important; top: 18% !important; bottom: 12% !important; width: 3px !important; transform: translateX(-50%) !important; z-index: 3 !important; border-radius: 999px !important; background: linear-gradient(180deg, transparent, #b98cff 18%, #00d4ff 52%, #b98cff 82%, transparent) !important; box-shadow: 0 0 22px rgba(185,140,255,.82), 0 0 52px rgba(0,212,255,.36) !important; animation: mazeDiscographyEnergyPulse 2.8s ease-in-out infinite !important; pointer-events: none !important; } /* Infinite carousel track. */ body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-track { position: absolute !important; left: 0 !important; top: 50% !important; display: flex !important; align-items: center !important; gap: clamp(14px, 1.5vw, 26px) !important; width: max-content !important; transform: translateY(-50%) !important; animation: mazeDiscographyCarouselSlide 42s linear infinite !important; will-change: transform !important; padding: 0 clamp(24px, 3vw, 58px) !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-stage:hover .maze-discography-carousel-track { animation-play-state: paused !important; } /* Cover cards: no borders, modern floating image panels. */ body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-card { flex: 0 0 clamp(170px, 15vw, 270px) !important; width: clamp(170px, 15vw, 270px) !important; height: clamp(250px, 25vw, 420px) !important; position: relative !important; display: block !important; overflow: hidden !important; border: 0 !important; outline: 0 !important; border-radius: 22px !important; background: #050505 !important; box-shadow: 0 28px 78px rgba(0,0,0,.58) !important; text-decoration: none !important; transform-style: preserve-3d !important; transition: transform .35s ease, box-shadow .35s ease, opacity .35s ease !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-card:nth-child(6n+1) { transform: translateY(38px) rotateY(22deg) scale(.90) !important; opacity: .72 !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-card:nth-child(6n+2) { transform: translateY(10px) rotateY(13deg) scale(.96) !important; opacity: .86 !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-card:nth-child(6n+3) { transform: translateY(-18px) rotateY(6deg) scale(1.02) !important; opacity: .98 !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-card:nth-child(6n+4) { transform: translateY(-22px) rotateY(-6deg) scale(1.04) !important; opacity: 1 !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-card:nth-child(6n+5) { transform: translateY(8px) rotateY(-13deg) scale(.96) !important; opacity: .86 !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-card:nth-child(6n+6) { transform: translateY(40px) rotateY(-22deg) scale(.90) !important; opacity: .72 !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-card:hover { transform: translateY(-18px) rotateY(0deg) scale(1.08) !important; opacity: 1 !important; z-index: 8 !important; box-shadow: 0 38px 110px rgba(157,78,221,.28), 0 24px 80px rgba(0,0,0,.65) !important; } /* Cover image itself: no border. */ body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-img, body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-img img { display: block !important; width: 100% !important; height: 100% !important; border: 0 !important; outline: 0 !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-img img { object-fit: cover !important; object-position: center center !important; filter: saturate(1.06) contrast(1.05) !important; transition: transform .45s ease, filter .45s ease !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-card:hover img { transform: scale(1.06) !important; filter: saturate(1.15) contrast(1.08) !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-card strong { position: absolute !important; left: 14px !important; right: 14px !important; bottom: 14px !important; z-index: 2 !important; padding: 11px 12px !important; border-radius: 16px !important; background: rgba(0,0,0,.52) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; color: #ffffff !important; font-family: 'Orbitron', 'Inter', sans-serif !important; font-size: clamp(10px, .78vw, 12px) !important; line-height: 1.25 !important; letter-spacing: .08em !important; text-transform: uppercase !important; text-shadow: 0 2px 14px rgba(0,0,0,.55) !important; } /* Bottom feature captions like the reference. */ body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-features { width: min(1180px, calc(100% - 48px)) !important; margin: clamp(32px, 3.6vw, 56px) auto 28px !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(20px, 4vw, 70px) !important; text-align: center !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-features article { background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; padding: 0 !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-features strong { display: block !important; color: #ffffff !important; font-family: 'Orbitron', 'Inter', sans-serif !important; font-size: clamp(15px, 1.25vw, 21px) !important; line-height: 1.25 !important; letter-spacing: .04em !important; text-transform: uppercase !important; margin-bottom: 12px !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-features span { display: block !important; color: rgba(255,255,255,.50) !important; font-size: 13px !important; line-height: 1.7 !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-more { position: relative !important; z-index: 4 !important; text-align: center !important; margin-top: 24px !important; } /* Hide old grid class if cached markup remains. */ body #djmaze-site.djmaze-home-site section#discography .maze-feature-discography, body #djmaze-site.djmaze-home-site section#discography .maze-feature-discography-8 { border: 0 !important; } @keyframes mazeDiscographyCarouselSlide { 0% { transform: translate3d(0, -50%, 0); } 100% { transform: translate3d(-50%, -50%, 0); } } @keyframes mazeDiscographyEnergyPulse { 0%, 100% { opacity: .70; filter: blur(0); } 50% { opacity: 1; filter: blur(.4px); } } @keyframes mazeDiscographyAmbientMove { 0% { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .72; } 50% { transform: translate3d(2%, 1.5%, 0) scale(1.04); opacity: .96; } 100% { transform: translate3d(4%, -1%, 0) scale(1.02); opacity: .78; } } @media (max-width: 900px) { body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-stage { height: 430px !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-card { flex-basis: 190px !important; width: 190px !important; height: 300px !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-features { grid-template-columns: 1fr !important; gap: 22px !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-head h2 { font-size: clamp(38px, 13vw, 74px) !important; } } /* === Home Discographie REAL 3D plugin-style slider, 1x1 covers === */ /* Full-width section, no boxed container. */ body #djmaze-site.djmaze-home-site section#discography.maze-discography-3d-section, body #djmaze-site.djmaze-home-site section#discography.maze-home-discography, body #djmaze-site.djmaze-home-site section#discography.panel { width: 100% !important; max-width: none !important; margin: 0 !important; min-height: 100vh !important; padding: clamp(86px, 8vw, 132px) 0 clamp(78px, 7vw, 118px) !important; background: #000000 !important; background-image: none !important; color: #ffffff !important; overflow: hidden !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; position: relative !important; } body #djmaze-site.djmaze-home-site section#discography.maze-discography-3d-section::before { content: "" !important; position: absolute !important; inset: -28% !important; pointer-events: none !important; z-index: 0 !important; background: radial-gradient(circle at 50% 46%, rgba(157,78,221,.24), transparent 18%), radial-gradient(circle at 50% 52%, rgba(0,212,255,.12), transparent 28%), radial-gradient(circle at 52% 82%, rgba(120,255,178,.08), transparent 24%) !important; filter: blur(18px) !important; animation: mazeDiscography3dAmbient 15s ease-in-out infinite alternate !important; } body #djmaze-site.djmaze-home-site section#discography.maze-discography-3d-section::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background: linear-gradient(180deg, rgba(0,0,0,.05), #000000 92%) !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-shell { width: 100% !important; max-width: none !important; margin: 0 !important; position: relative !important; z-index: 2 !important; } /* Header. */ body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-head { max-width: min(1120px, calc(100% - 48px)) !important; margin: 0 auto clamp(32px, 4vw, 54px) !important; padding: 0 !important; text-align: center !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-head .maze-kicker, body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-head h2 { font-family: 'Orbitron', 'Inter', sans-serif !important; text-transform: uppercase !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-head .maze-kicker { color: #b98cff !important; letter-spacing: .34em !important; margin-bottom: 18px !important; text-shadow: 0 0 20px rgba(157,78,221,.32) !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-head h2 { color: #ffffff !important; font-size: clamp(42px, 7vw, 108px) !important; line-height: .92 !important; letter-spacing: .025em !important; margin: 0 0 18px !important; text-shadow: 0 0 30px rgba(157,78,221,.20) !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-head p:not(.maze-kicker) { max-width: 760px !important; margin: 0 auto !important; color: rgba(255,255,255,.62) !important; font-size: clamp(14px, 1.2vw, 18px) !important; line-height: 1.75 !important; } /* Plugin-style 3D slider stage. */ body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-plugin { width: 100% !important; max-width: none !important; position: relative !important; margin: 0 auto !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-viewport { position: relative !important; width: 100vw !important; max-width: none !important; margin-left: 50% !important; transform: translateX(-50%) !important; height: clamp(420px, 42vw, 660px) !important; overflow: hidden !important; perspective: 1450px !important; transform-style: preserve-3d !important; border: 0 !important; outline: 0 !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-glow { position: absolute !important; left: 50% !important; top: 50% !important; width: min(640px, 64vw) !important; height: min(640px, 64vw) !important; transform: translate(-50%, -50%) !important; border-radius: 999px !important; background: radial-gradient(circle, rgba(185,140,255,.28), rgba(0,212,255,.10) 38%, transparent 68%) !important; filter: blur(18px) !important; opacity: .85 !important; animation: mazeDiscography3dGlowPulse 4s ease-in-out infinite !important; pointer-events: none !important; z-index: 1 !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-stack { position: absolute !important; inset: 0 !important; z-index: 3 !important; transform-style: preserve-3d !important; } /* 1x1 album cards. */ body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-card { --x: 0px; --z: 0px; --r: 0deg; --s: 1; --o: 1; --blur: 0px; position: absolute !important; left: 50% !important; top: 50% !important; width: clamp(190px, 20vw, 330px) !important; aspect-ratio: 1 / 1 !important; height: auto !important; transform: translate(-50%, -50%) translateX(var(--x)) translateZ(var(--z)) rotateY(var(--r)) scale(var(--s)) !important; opacity: var(--o) !important; z-index: var(--order, 1) !important; display: block !important; overflow: hidden !important; border: 0 !important; outline: 0 !important; border-radius: 26px !important; background: #050505 !important; box-shadow: 0 32px 90px rgba(0,0,0,.70) !important; text-decoration: none !important; pointer-events: none !important; filter: blur(var(--blur)) !important; transition: transform .72s cubic-bezier(.2,.8,.2,1), opacity .52s ease, filter .52s ease, box-shadow .52s ease !important; will-change: transform, opacity !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-card.is-active { pointer-events: auto !important; box-shadow: 0 42px 118px rgba(157,78,221,.32), 0 28px 95px rgba(0,0,0,.82) !important; } /* Cover image: square, no border. */ body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-cover, body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-cover img { display: block !important; width: 100% !important; height: 100% !important; border: 0 !important; outline: 0 !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-cover img { object-fit: cover !important; object-position: center center !important; opacity: 1 !important; filter: saturate(1.08) contrast(1.06) !important; transition: transform .6s ease, filter .6s ease !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-card.is-active:hover img { transform: scale(1.055) !important; filter: saturate(1.18) contrast(1.08) !important; } /* Title overlay. */ body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-card strong { position: absolute !important; left: 14px !important; right: 14px !important; bottom: 14px !important; z-index: 2 !important; padding: 11px 12px !important; border-radius: 15px !important; border: 0 !important; background: rgba(0,0,0,.56) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; color: #ffffff !important; font-family: 'Orbitron', 'Inter', sans-serif !important; font-size: clamp(10px, .78vw, 12px) !important; line-height: 1.25 !important; letter-spacing: .08em !important; text-transform: uppercase !important; text-shadow: 0 2px 14px rgba(0,0,0,.55) !important; } /* Controls like a real slider/plugin. */ body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-controls { width: min(720px, calc(100% - 48px)) !important; margin: clamp(12px, 2vw, 26px) auto 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 18px !important; position: relative !important; z-index: 6 !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-btn { width: 46px !important; height: 46px !important; border-radius: 999px !important; display: inline-grid !important; place-items: center !important; border: 0 !important; outline: 0 !important; cursor: pointer !important; color: #ffffff !important; background: rgba(255,255,255,.08) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 45px rgba(0,0,0,.45) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; font-size: 20px !important; transition: transform .25s ease, background .25s ease !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-btn:hover { transform: translateY(-3px) scale(1.04) !important; background: rgba(185,140,255,.22) !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-dots { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 8px !important; max-width: 460px !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-dots button { width: 7px !important; height: 7px !important; padding: 0 !important; border-radius: 999px !important; border: 0 !important; outline: 0 !important; background: rgba(255,255,255,.24) !important; cursor: pointer !important; transition: width .25s ease, background .25s ease, transform .25s ease !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-dots button.is-active { width: 28px !important; background: linear-gradient(90deg, #b98cff, #00d4ff) !important; } /* Bottom labels kept from the reference direction. */ body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-features { width: min(1180px, calc(100% - 48px)) !important; margin: clamp(32px, 4vw, 60px) auto 28px !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(20px, 4vw, 70px) !important; text-align: center !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-features article { background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; padding: 0 !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-features strong { display: block !important; color: #ffffff !important; font-family: 'Orbitron', 'Inter', sans-serif !important; font-size: clamp(15px, 1.25vw, 21px) !important; line-height: 1.25 !important; letter-spacing: .04em !important; text-transform: uppercase !important; margin-bottom: 12px !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-features span { display: block !important; color: rgba(255,255,255,.50) !important; font-size: 13px !important; line-height: 1.7 !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-more { position: relative !important; z-index: 7 !important; text-align: center !important; margin-top: 24px !important; } /* Disable old strip carousel if cached markup/class remains. */ body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-track { animation: none !important; } @keyframes mazeDiscography3dAmbient { 0% { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .72; } 50% { transform: translate3d(2%, 1.5%, 0) scale(1.04); opacity: .95; } 100% { transform: translate3d(4%, -1%, 0) scale(1.02); opacity: .78; } } @keyframes mazeDiscography3dGlowPulse { 0%, 100% { opacity: .70; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } } @media (max-width: 900px) { body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-viewport { height: 460px !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-card { width: clamp(170px, 58vw, 260px) !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-features { grid-template-columns: 1fr !important; gap: 22px !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-head h2 { font-size: clamp(38px, 13vw, 74px) !important; } } /* === Discographie Coverflow FIXED: real working 3D slider, 1x1 covers === */ body #djmaze-site.djmaze-home-site section#discography.djmaze-coverflow-section, body #djmaze-site.djmaze-home-site section#discography.maze-home-discography, body #djmaze-site.djmaze-home-site section#discography.panel { width: 100% !important; max-width: none !important; margin: 0 !important; min-height: 100vh !important; padding: clamp(86px, 8vw, 132px) 0 clamp(78px, 7vw, 118px) !important; background: #000000 !important; background-image: none !important; color: #ffffff !important; overflow: hidden !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; position: relative !important; } body #djmaze-site.djmaze-home-site section#discography.djmaze-coverflow-section::before { content: "" !important; position: absolute !important; inset: -28% !important; pointer-events: none !important; z-index: 0 !important; background: radial-gradient(circle at 50% 48%, rgba(157,78,221,.25), transparent 20%), radial-gradient(circle at 50% 54%, rgba(0,212,255,.12), transparent 28%), radial-gradient(circle at 50% 82%, rgba(120,255,178,.08), transparent 24%) !important; filter: blur(18px) !important; animation: djmazeCoverflowAmbient 16s ease-in-out infinite alternate !important; } body #djmaze-site.djmaze-home-site section#discography.djmaze-coverflow-section::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background: linear-gradient(180deg, rgba(0,0,0,.04), #000000 92%) !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow-shell { width: 100% !important; max-width: none !important; position: relative !important; z-index: 2 !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow-head { width: min(1120px, calc(100% - 48px)) !important; max-width: none !important; margin: 0 auto clamp(32px, 4vw, 54px) !important; padding: 0 !important; text-align: center !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow-head .maze-kicker, body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow-head h2 { font-family: 'Orbitron', 'Inter', sans-serif !important; text-transform: uppercase !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow-head .maze-kicker { color: #b98cff !important; letter-spacing: .34em !important; margin-bottom: 18px !important; text-shadow: 0 0 20px rgba(157,78,221,.32) !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow-head h2 { color: #ffffff !important; font-size: clamp(42px, 7vw, 108px) !important; line-height: .92 !important; letter-spacing: .025em !important; margin: 0 0 18px !important; text-shadow: 0 0 30px rgba(157,78,221,.20) !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow-head p:not(.maze-kicker) { max-width: 760px !important; margin: 0 auto !important; color: rgba(255,255,255,.62) !important; font-size: clamp(14px, 1.2vw, 18px) !important; line-height: 1.75 !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow { width: 100% !important; position: relative !important; z-index: 4 !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow__stage { position: relative !important; width: 100vw !important; max-width: none !important; height: clamp(420px, 42vw, 660px) !important; margin-left: 50% !important; transform: translateX(-50%) !important; overflow: hidden !important; perspective: 1600px !important; transform-style: preserve-3d !important; border: 0 !important; outline: 0 !important; user-select: none !important; touch-action: pan-y !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow__light { position: absolute !important; left: 50% !important; top: 50% !important; width: min(640px, 64vw) !important; height: min(640px, 64vw) !important; transform: translate(-50%, -50%) !important; border-radius: 999px !important; background: radial-gradient(circle, rgba(185,140,255,.30), rgba(0,212,255,.10) 40%, transparent 70%) !important; filter: blur(18px) !important; opacity: .90 !important; animation: djmazeCoverflowGlow 4s ease-in-out infinite !important; pointer-events: none !important; z-index: 1 !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow__slide { position: absolute !important; left: 50% !important; top: 50% !important; width: clamp(190px, 20vw, 330px) !important; aspect-ratio: 1 / 1 !important; height: auto !important; display: block !important; overflow: hidden !important; border: 0 !important; outline: 0 !important; border-radius: 26px !important; background: #050505 !important; box-shadow: 0 32px 90px rgba(0,0,0,.70) !important; text-decoration: none !important; transform-style: preserve-3d !important; transition: transform .72s cubic-bezier(.2,.8,.2,1), opacity .52s ease, filter .52s ease, box-shadow .52s ease !important; will-change: transform, opacity, filter !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow__slide.is-active { box-shadow: 0 42px 118px rgba(157,78,221,.32), 0 28px 95px rgba(0,0,0,.82) !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow__image, body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow__image img { display: block !important; width: 100% !important; height: 100% !important; border: 0 !important; outline: 0 !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow__image img { object-fit: cover !important; object-position: center center !important; opacity: 1 !important; filter: saturate(1.08) contrast(1.06) !important; transition: transform .6s ease, filter .6s ease !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow__slide.is-active:hover img { transform: scale(1.055) !important; filter: saturate(1.18) contrast(1.08) !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow__slide strong { position: absolute !important; left: 14px !important; right: 14px !important; bottom: 14px !important; z-index: 3 !important; padding: 11px 12px !important; border-radius: 15px !important; border: 0 !important; background: rgba(0,0,0,.56) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; color: #ffffff !important; font-family: 'Orbitron', 'Inter', sans-serif !important; font-size: clamp(10px, .78vw, 12px) !important; line-height: 1.25 !important; letter-spacing: .08em !important; text-transform: uppercase !important; text-shadow: 0 2px 14px rgba(0,0,0,.55) !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow__controls { width: min(720px, calc(100% - 48px)) !important; margin: clamp(12px, 2vw, 26px) auto 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 18px !important; position: relative !important; z-index: 6 !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow__arrow { width: 46px !important; height: 46px !important; border-radius: 999px !important; display: inline-grid !important; place-items: center !important; border: 0 !important; outline: 0 !important; cursor: pointer !important; color: #ffffff !important; background: rgba(255,255,255,.08) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 45px rgba(0,0,0,.45) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; font-size: 20px !important; transition: transform .25s ease, background .25s ease !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow__arrow:hover { transform: translateY(-3px) scale(1.04) !important; background: rgba(185,140,255,.22) !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow__dots { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 8px !important; max-width: 460px !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow__dots button { width: 7px !important; height: 7px !important; padding: 0 !important; border-radius: 999px !important; border: 0 !important; outline: 0 !important; background: rgba(255,255,255,.24) !important; cursor: pointer !important; transition: width .25s ease, background .25s ease, transform .25s ease !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow__dots button.is-active { width: 28px !important; background: linear-gradient(90deg, #b98cff, #00d4ff) !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow-features { width: min(1180px, calc(100% - 48px)) !important; margin: clamp(32px, 4vw, 60px) auto 28px !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(20px, 4vw, 70px) !important; text-align: center !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow-features article { background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; padding: 0 !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow-features strong { display: block !important; color: #ffffff !important; font-family: 'Orbitron', 'Inter', sans-serif !important; font-size: clamp(15px, 1.25vw, 21px) !important; line-height: 1.25 !important; letter-spacing: .04em !important; text-transform: uppercase !important; margin-bottom: 12px !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow-features span { display: block !important; color: rgba(255,255,255,.50) !important; font-size: 13px !important; line-height: 1.7 !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-more { position: relative !important; z-index: 7 !important; text-align: center !important; margin-top: 24px !important; } /* Make sure any old carousel/grid from browser cache does not interfere. */ body #djmaze-site.djmaze-home-site section#discography .maze-feature-discography, body #djmaze-site.djmaze-home-site section#discography .maze-discography-carousel-track, body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-stack { animation: none !important; } @keyframes djmazeCoverflowAmbient { 0% { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .72; } 50% { transform: translate3d(2%, 1.5%, 0) scale(1.04); opacity: .95; } 100% { transform: translate3d(4%, -1%, 0) scale(1.02); opacity: .78; } } @keyframes djmazeCoverflowGlow { 0%, 100% { opacity: .70; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } } @media (max-width: 900px) { body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow__stage { height: 460px !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow__slide { width: clamp(170px, 58vw, 260px) !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow-features { grid-template-columns: 1fr !important; gap: 22px !important; } body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow-head h2 { font-size: clamp(38px, 13vw, 74px) !important; } } /* === Home Shop + Video full-width premium redesign === */ /* Shared full-width dark sections. */ body #djmaze-site.djmaze-home-site section#shop.maze-home-shop-modern, body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-streaming { width: 100% !important; max-width: none !important; margin: 0 !important; min-height: 100vh !important; padding: clamp(86px, 8vw, 132px) 0 clamp(78px, 7vw, 118px) !important; background: #000000 !important; background-image: none !important; color: #ffffff !important; border: 0 !important; outline: 0 !important; overflow: hidden !important; position: relative !important; } body #djmaze-site.djmaze-home-site section#shop.maze-home-shop-modern::before, body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-streaming::before { content: "" !important; position: absolute !important; inset: -22% !important; pointer-events: none !important; z-index: 0 !important; background: radial-gradient(circle at 22% 36%, rgba(157,78,221,.19), transparent 24%), radial-gradient(circle at 82% 42%, rgba(0,212,255,.10), transparent 24%), radial-gradient(circle at 50% 84%, rgba(185,140,255,.08), transparent 22%) !important; filter: blur(18px) !important; animation: mazeShopVideoAmbient 15s ease-in-out infinite alternate !important; } body #djmaze-site.djmaze-home-site section#shop.maze-home-shop-modern::after, body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-streaming::after { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; z-index: 0 !important; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.96) 92%) !important; } body #djmaze-site.djmaze-home-site .maze-shop-modern-shell, body #djmaze-site.djmaze-home-site .maze-videos-streaming-shell { width: 100% !important; max-width: none !important; margin: 0 !important; position: relative !important; z-index: 2 !important; } /* Orbitron section titles. */ body #djmaze-site.djmaze-home-site .maze-shop-modern-head, body #djmaze-site.djmaze-home-site .maze-videos-streaming-head { width: min(1480px, calc(100% - 48px)) !important; max-width: none !important; margin: 0 auto clamp(34px, 4.5vw, 68px) !important; padding: 0 !important; text-align: left !important; } body #djmaze-site.djmaze-home-site .maze-shop-modern-head .maze-kicker, body #djmaze-site.djmaze-home-site .maze-shop-modern-head h2, body #djmaze-site.djmaze-home-site .maze-videos-streaming-head .maze-kicker, body #djmaze-site.djmaze-home-site .maze-videos-streaming-head h2 { font-family: 'Orbitron', 'Inter', sans-serif !important; text-transform: uppercase !important; } body #djmaze-site.djmaze-home-site .maze-shop-modern-head .maze-kicker, body #djmaze-site.djmaze-home-site .maze-videos-streaming-head .maze-kicker { color: #b98cff !important; letter-spacing: .34em !important; text-shadow: 0 0 20px rgba(157,78,221,.32) !important; } body #djmaze-site.djmaze-home-site .maze-shop-modern-head h2, body #djmaze-site.djmaze-home-site .maze-videos-streaming-head h2 { color: #ffffff !important; font-size: clamp(42px, 6.4vw, 106px) !important; line-height: .94 !important; letter-spacing: .02em !important; margin: 0 0 18px !important; text-shadow: 0 0 30px rgba(157,78,221,.20) !important; } body #djmaze-site.djmaze-home-site .maze-shop-modern-head p:not(.maze-kicker), body #djmaze-site.djmaze-home-site .maze-videos-streaming-head p:not(.maze-kicker) { max-width: 760px !important; margin: 0 !important; color: rgba(255,255,255,.64) !important; font-size: clamp(14px, 1.1vw, 18px) !important; line-height: 1.72 !important; } /* SHOP: full-width animated product rail/grid, no borders. */ body #djmaze-site.djmaze-home-site .maze-shop-modern-rail { width: min(1480px, calc(100% - 48px)) !important; margin: 0 auto !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: clamp(18px, 2.2vw, 34px) !important; } body #djmaze-site.djmaze-home-site .maze-shop-modern-card { position: relative !important; overflow: hidden !important; min-height: 460px !important; border: 0 !important; outline: 0 !important; border-radius: 32px !important; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.018)) !important; box-shadow: 0 32px 95px rgba(0,0,0,.50) !important; padding: 0 !important; transform: translateY(0) !important; transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, background .45s ease !important; animation: mazeProductFloat 7s ease-in-out infinite !important; } body #djmaze-site.djmaze-home-site .maze-shop-modern-card:nth-child(2n) { animation-delay: -2.2s !important; } body #djmaze-site.djmaze-home-site .maze-shop-modern-card:nth-child(3n) { animation-delay: -4.4s !important; } body #djmaze-site.djmaze-home-site .maze-shop-modern-card::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; background: radial-gradient(circle at 50% 15%, rgba(185,140,255,.20), transparent 30%), linear-gradient(180deg, transparent 42%, rgba(0,0,0,.72) 100%) !important; opacity: .9 !important; } body #djmaze-site.djmaze-home-site .maze-shop-modern-card:hover { transform: translateY(-14px) scale(1.025) !important; box-shadow: 0 44px 135px rgba(157,78,221,.22), 0 38px 115px rgba(0,0,0,.66) !important; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.024)) !important; } body #djmaze-site.djmaze-home-site .maze-shop-modern-img { display: block !important; height: 330px !important; width: 100% !important; border: 0 !important; outline: 0 !important; overflow: hidden !important; border-radius: 0 !important; background: radial-gradient(circle at 50% 20%, rgba(157,78,221,.18), rgba(0,0,0,1) 64%) !important; } body #djmaze-site.djmaze-home-site .maze-shop-modern-img img, body #djmaze-site.djmaze-home-site .maze-shop-modern-img .woocommerce-placeholder { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important; padding: 24px !important; border: 0 !important; outline: 0 !important; filter: drop-shadow(0 30px 46px rgba(0,0,0,.50)) !important; transition: transform .55s ease, filter .55s ease !important; } body #djmaze-site.djmaze-home-site .maze-shop-modern-card:hover .maze-shop-modern-img img { transform: scale(1.08) translateY(-6px) !important; filter: drop-shadow(0 42px 60px rgba(157,78,221,.24)) !important; } body #djmaze-site.djmaze-home-site .maze-shop-modern-info { position: relative !important; z-index: 2 !important; padding: 24px !important; } body #djmaze-site.djmaze-home-site .maze-shop-modern-card h3 { font-family: 'Orbitron', 'Inter', sans-serif !important; color: #ffffff !important; text-transform: uppercase !important; font-size: clamp(14px, 1vw, 18px) !important; line-height: 1.25 !important; letter-spacing: .055em !important; margin: 0 0 12px !important; } body #djmaze-site.djmaze-home-site .maze-shop-modern-card .price { color: #b98cff !important; font-family: 'Orbitron', 'Inter', sans-serif !important; font-size: 16px !important; font-weight: 700 !important; margin: 0 0 16px !important; text-shadow: 0 0 18px rgba(157,78,221,.26) !important; } body #djmaze-site.djmaze-home-site .maze-shop-modern-btn { border: 0 !important; background: rgba(255,255,255,.08) !important; color: #ffffff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important; font-family: 'Orbitron', 'Inter', sans-serif !important; } /* VIDEOS: Netflix / Apple TV style full-width streaming design. */ body #djmaze-site.djmaze-home-site .maze-video-stream-featured { width: min(1480px, calc(100% - 48px)) !important; margin: 0 auto clamp(32px, 4vw, 58px) !important; } body #djmaze-site.djmaze-home-site .maze-video-featured-card { position: relative !important; display: block !important; width: 100% !important; height: clamp(420px, 48vw, 690px) !important; overflow: hidden !important; border: 0 !important; outline: 0 !important; border-radius: 36px !important; background: #050505 !important; box-shadow: 0 44px 140px rgba(0,0,0,.62) !important; text-decoration: none !important; transform: translateZ(0) !important; } body #djmaze-site.djmaze-home-site .maze-video-featured-card img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; display: block !important; border: 0 !important; filter: saturate(1.08) contrast(1.05) brightness(.78) !important; transform: scale(1.01) !important; transition: transform .75s ease, filter .75s ease !important; } body #djmaze-site.djmaze-home-site .maze-video-featured-card:hover img { transform: scale(1.055) !important; filter: saturate(1.18) contrast(1.08) brightness(.90) !important; } body #djmaze-site.djmaze-home-site .maze-video-featured-shade { position: absolute !important; inset: 0 !important; z-index: 1 !important; background: linear-gradient(90deg, rgba(0,0,0,.86), rgba(0,0,0,.22) 56%, rgba(0,0,0,.76)), linear-gradient(0deg, rgba(0,0,0,.84), transparent 52%) !important; pointer-events: none !important; } body #djmaze-site.djmaze-home-site .maze-video-featured-content { position: absolute !important; left: clamp(24px, 4vw, 70px) !important; bottom: clamp(28px, 4.2vw, 76px) !important; right: clamp(24px, 42vw, 620px) !important; z-index: 2 !important; display: block !important; } body #djmaze-site.djmaze-home-site .maze-video-featured-content em { display: inline-flex !important; margin-bottom: 16px !important; font-style: normal !important; color: #b98cff !important; font-family: 'Orbitron', 'Inter', sans-serif !important; font-size: 11px !important; letter-spacing: .26em !important; text-transform: uppercase !important; } body #djmaze-site.djmaze-home-site .maze-video-featured-content strong { display: block !important; max-width: 880px !important; color: #ffffff !important; font-family: 'Orbitron', 'Inter', sans-serif !important; text-transform: uppercase !important; font-size: clamp(30px, 4.4vw, 78px) !important; line-height: .98 !important; letter-spacing: .015em !important; text-shadow: 0 12px 46px rgba(0,0,0,.60) !important; } body #djmaze-site.djmaze-home-site .maze-video-play-pill { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-top: 26px !important; padding: 14px 21px !important; border-radius: 999px !important; background: rgba(255,255,255,.92) !important; color: #06020a !important; font-family: 'Orbitron', 'Inter', sans-serif !important; font-size: 11px !important; letter-spacing: .14em !important; text-transform: uppercase !important; box-shadow: 0 20px 50px rgba(0,0,0,.35) !important; } body #djmaze-site.djmaze-home-site .maze-video-stream-row { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 clamp(24px, 4.8vw, 78px) 18px !important; display: flex !important; gap: clamp(14px, 1.5vw, 26px) !important; overflow-x: auto !important; overflow-y: visible !important; scroll-snap-type: x proximity !important; scrollbar-width: thin !important; scrollbar-color: rgba(185,140,255,.70) rgba(255,255,255,.06) !important; } body #djmaze-site.djmaze-home-site .maze-video-stream-row::-webkit-scrollbar { height: 8px !important; } body #djmaze-site.djmaze-home-site .maze-video-stream-row::-webkit-scrollbar-track { background: rgba(255,255,255,.06) !important; border-radius: 999px !important; } body #djmaze-site.djmaze-home-site .maze-video-stream-row::-webkit-scrollbar-thumb { background: rgba(185,140,255,.70) !important; border-radius: 999px !important; } body #djmaze-site.djmaze-home-site .maze-video-stream-card { flex: 0 0 clamp(280px, 24vw, 430px) !important; width: clamp(280px, 24vw, 430px) !important; scroll-snap-align: start !important; display: block !important; position: relative !important; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; text-decoration: none !important; transform: translateY(0) scale(1) !important; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease !important; } body #djmaze-site.djmaze-home-site .maze-video-stream-card:hover { transform: translateY(-10px) scale(1.055) !important; z-index: 5 !important; } body #djmaze-site.djmaze-home-site .maze-video-stream-thumb { position: relative !important; display: block !important; width: 100% !important; aspect-ratio: 16 / 9 !important; overflow: hidden !important; border: 0 !important; outline: 0 !important; border-radius: 22px !important; background: #050505 !important; box-shadow: 0 24px 70px rgba(0,0,0,.50) !important; } body #djmaze-site.djmaze-home-site .maze-video-stream-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; border: 0 !important; filter: saturate(1.08) contrast(1.06) brightness(.85) !important; transition: transform .55s ease, filter .55s ease !important; } body #djmaze-site.djmaze-home-site .maze-video-stream-card:hover .maze-video-stream-thumb img { transform: scale(1.08) !important; filter: saturate(1.18) contrast(1.10) brightness(1) !important; } body #djmaze-site.djmaze-home-site .maze-video-stream-play { position: absolute !important; left: 16px !important; bottom: 16px !important; width: 46px !important; height: 46px !important; display: grid !important; place-items: center !important; border-radius: 999px !important; background: rgba(255,255,255,.88) !important; box-shadow: 0 14px 35px rgba(0,0,0,.35) !important; transform: scale(.92) !important; transition: transform .3s ease !important; } body #djmaze-site.djmaze-home-site .maze-video-stream-card:hover .maze-video-stream-play { transform: scale(1) !important; } body #djmaze-site.djmaze-home-site .maze-video-stream-play img { width: 18px !important; height: 18px !important; object-fit: contain !important; filter: none !important; } body #djmaze-site.djmaze-home-site .maze-video-stream-card h3 { color: #ffffff !important; font-family: 'Orbitron', 'Inter', sans-serif !important; text-transform: uppercase !important; font-size: clamp(13px, 1vw, 17px) !important; line-height: 1.25 !important; letter-spacing: .04em !important; margin: 15px 2px 0 !important; text-shadow: 0 8px 28px rgba(0,0,0,.40) !important; } body #djmaze-site.djmaze-home-site .maze-shop-modern-more, body #djmaze-site.djmaze-home-site .maze-videos-streaming-more { position: relative !important; z-index: 3 !important; text-align: center !important; margin-top: clamp(26px, 3vw, 44px) !important; } /* Remove old video grid/card borders if cached classes remain. */ body #djmaze-site.djmaze-home-site #videos .maze-video-grid, body #djmaze-site.djmaze-home-site #videos .maze-video-card, body #djmaze-site.djmaze-home-site #shop .maze-wc-card { border: 0 !important; outline: 0 !important; } @keyframes mazeShopVideoAmbient { 0% { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .72; } 50% { transform: translate3d(2%, 1.5%, 0) scale(1.04); opacity: .96; } 100% { transform: translate3d(4%, -1%, 0) scale(1.02); opacity: .78; } } @keyframes mazeProductFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @media (max-width: 1180px) { body #djmaze-site.djmaze-home-site .maze-shop-modern-rail { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 720px) { body #djmaze-site.djmaze-home-site .maze-shop-modern-head, body #djmaze-site.djmaze-home-site .maze-videos-streaming-head, body #djmaze-site.djmaze-home-site .maze-video-stream-featured, body #djmaze-site.djmaze-home-site .maze-shop-modern-rail { width: calc(100% - 40px) !important; } body #djmaze-site.djmaze-home-site .maze-shop-modern-rail { grid-template-columns: 1fr !important; } body #djmaze-site.djmaze-home-site .maze-video-featured-card { height: 470px !important; border-radius: 28px !important; } body #djmaze-site.djmaze-home-site .maze-video-featured-content { right: 24px !important; } body #djmaze-site.djmaze-home-site .maze-video-stream-row { padding-left: 20px !important; padding-right: 20px !important; } } /* === Shop centered + Video light minimal full-width refinement === */ /* FULL WIDTH = open section like hero and home bio: background spans 100%, content is wide with hero-like padding. */ body #djmaze-site.djmaze-home-site section#shop.maze-home-shop-modern, body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-light-minimal { width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; border: 0 !important; outline: 0 !important; overflow: hidden !important; } /* SHOP: centered titles/text, still matching the dark upper page design. */ body #djmaze-site.djmaze-home-site section#shop.maze-home-shop-modern { padding: clamp(86px, 8vw, 126px) clamp(32px, 4.8vw, 78px) clamp(78px, 7vw, 112px) !important; background: #000000 !important; background-image: none !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-shell { width: 100% !important; max-width: none !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-head { width: min(1480px, 100%) !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-head p:not(.maze-kicker) { margin-left: auto !important; margin-right: auto !important; text-align: center !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-head .maze-kicker, body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-head h2 { font-family: 'Orbitron', 'Inter', sans-serif !important; text-transform: uppercase !important; text-align: center !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-head h2 { font-size: clamp(38px, 5.8vw, 92px) !important; } /* SHOP products: modern but cleaner, no borders, more premium/minimal. */ body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-rail { width: min(1480px, 100%) !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: clamp(18px, 2vw, 30px) !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-card { min-height: 410px !important; border: 0 !important; outline: 0 !important; border-radius: 28px !important; background: rgba(255,255,255,.045) !important; box-shadow: 0 28px 82px rgba(0,0,0,.44) !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-img { height: 285px !important; border: 0 !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-info { text-align: center !important; padding: 22px !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-card h3, body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-card .price { text-align: center !important; } /* VIDEO: light, full-width, centered, no big featured video. */ body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-light-minimal, body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-streaming { min-height: auto !important; padding: clamp(76px, 7vw, 112px) 0 clamp(76px, 7vw, 112px) !important; background: radial-gradient(circle at 18% 20%, rgba(157,78,221,.09), transparent 30%), radial-gradient(circle at 86% 34%, rgba(0,212,255,.07), transparent 30%), linear-gradient(180deg, #ffffff 0%, #f7f5fb 100%) !important; color: #07040d !important; border: 0 !important; box-shadow: none !important; } body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-light-minimal::before { content: "" !important; position: absolute !important; inset: -24% !important; z-index: 0 !important; pointer-events: none !important; background: radial-gradient(circle at 24% 42%, rgba(157,78,221,.10), transparent 24%), radial-gradient(circle at 78% 36%, rgba(0,212,255,.08), transparent 24%) !important; filter: blur(18px) !important; animation: mazeVideoLightAmbient 18s ease-in-out infinite alternate !important; } body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-light-minimal::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background-image: linear-gradient(rgba(10,4,20,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(10,4,20,.035) 1px, transparent 1px) !important; background-size: 58px 58px !important; opacity: .50 !important; animation: mazeVideoLightGrid 26s linear infinite !important; } body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-shell { position: relative !important; z-index: 2 !important; width: 100% !important; max-width: none !important; margin: 0 !important; } body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-head { width: min(1480px, calc(100% - 48px)) !important; max-width: none !important; margin: 0 auto clamp(28px, 3.2vw, 48px) !important; padding: 0 !important; text-align: center !important; } body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-head .maze-kicker, body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-head h2 { font-family: 'Orbitron', 'Inter', sans-serif !important; text-transform: uppercase !important; text-align: center !important; } body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-head .maze-kicker { color: #7b2cff !important; letter-spacing: .34em !important; text-shadow: none !important; } body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-head h2 { color: #07040d !important; font-size: clamp(34px, 5vw, 82px) !important; line-height: .98 !important; letter-spacing: .02em !important; margin: 0 0 16px !important; text-shadow: none !important; } body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-head p:not(.maze-kicker) { max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; color: rgba(7,4,13,.62) !important; text-align: center !important; font-size: clamp(14px, 1.1vw, 17px) !important; line-height: 1.7 !important; } /* Minimal Netflix / Apple TV row: no hero video, smaller cards, horizontal full-width rail. */ body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-row { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 clamp(32px, 4.8vw, 78px) 18px !important; display: flex !important; gap: clamp(14px, 1.45vw, 24px) !important; overflow-x: auto !important; overflow-y: visible !important; scroll-snap-type: x proximity !important; scrollbar-width: thin !important; scrollbar-color: rgba(7,4,13,.25) rgba(7,4,13,.07) !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-row::-webkit-scrollbar { height: 8px !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-row::-webkit-scrollbar-track { background: rgba(7,4,13,.07) !important; border-radius: 999px !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-row::-webkit-scrollbar-thumb { background: rgba(7,4,13,.25) !important; border-radius: 999px !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-card { flex: 0 0 clamp(240px, 21vw, 360px) !important; width: clamp(240px, 21vw, 360px) !important; scroll-snap-align: start !important; display: block !important; background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; text-decoration: none !important; transform: translateY(0) scale(1) !important; transition: transform .32s cubic-bezier(.2,.8,.2,1) !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-card:hover { transform: translateY(-8px) scale(1.045) !important; z-index: 6 !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-thumb { position: relative !important; display: block !important; width: 100% !important; aspect-ratio: 16 / 9 !important; overflow: hidden !important; border: 0 !important; outline: 0 !important; border-radius: 18px !important; background: #0b0b0f !important; box-shadow: 0 20px 58px rgba(17,10,34,.18) !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; border: 0 !important; filter: saturate(1.04) contrast(1.04) brightness(.92) !important; transition: transform .5s ease, filter .5s ease !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-card:hover .maze-video-minimal-thumb img { transform: scale(1.06) !important; filter: saturate(1.12) contrast(1.08) brightness(1) !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-play { position: absolute !important; left: 14px !important; bottom: 14px !important; width: 38px !important; height: 38px !important; display: grid !important; place-items: center !important; border-radius: 999px !important; background: rgba(255,255,255,.92) !important; box-shadow: 0 10px 24px rgba(0,0,0,.22) !important; transform: scale(.92) !important; transition: transform .25s ease !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-card:hover .maze-video-minimal-play { transform: scale(1) !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-play img { width: 15px !important; height: 15px !important; object-fit: contain !important; filter: none !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-card h3 { color: #07040d !important; font-family: 'Orbitron', 'Inter', sans-serif !important; text-transform: uppercase !important; font-size: clamp(12px, .86vw, 15px) !important; line-height: 1.28 !important; letter-spacing: .035em !important; margin: 13px 2px 0 !important; text-shadow: none !important; } /* Remove old big-video markup/styles if browser cache keeps CSS around. */ body #djmaze-site.djmaze-home-site section#videos .maze-video-stream-featured, body #djmaze-site.djmaze-home-site section#videos .maze-video-featured-card { display: none !important; } body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-more { position: relative !important; z-index: 3 !important; text-align: center !important; margin-top: clamp(24px, 3vw, 40px) !important; } body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-more .maze-btn { color: #ffffff !important; } /* Override previous dark streaming row styles. */ body #djmaze-site.djmaze-home-site section#videos .maze-video-stream-row, body #djmaze-site.djmaze-home-site section#videos .maze-video-stream-card { border: 0 !important; outline: 0 !important; } /* Keep headings centered on small screens too. */ @keyframes mazeVideoLightAmbient { 0% { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .70; } 50% { transform: translate3d(2%, 1.5%, 0) scale(1.04); opacity: .92; } 100% { transform: translate3d(4%, -1%, 0) scale(1.02); opacity: .78; } } @keyframes mazeVideoLightGrid { 0% { background-position: 0 0, 0 0; } 100% { background-position: 58px 58px, 58px 58px; } } @media (max-width: 1180px) { body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-rail { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 720px) { body #djmaze-site.djmaze-home-site section#shop.maze-home-shop-modern { padding-left: 20px !important; padding-right: 20px !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-head, body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-rail, body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-head { width: 100% !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-rail { grid-template-columns: 1fr !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-row { padding-left: 20px !important; padding-right: 20px !important; } } /* === Shop light animated + Video black 6-card grid final === */ /* SHOP SECTION: light animated full-width section like hero/bio width. */ body #djmaze-site.djmaze-home-site section#shop.maze-home-shop-modern { width: 100% !important; max-width: none !important; margin: 0 !important; min-height: auto !important; padding: clamp(82px, 7vw, 120px) clamp(32px, 4.8vw, 78px) clamp(76px, 7vw, 112px) !important; background: radial-gradient(circle at 18% 22%, rgba(157,78,221,.10), transparent 30%), radial-gradient(circle at 82% 36%, rgba(0,212,255,.08), transparent 28%), linear-gradient(180deg, #ffffff 0%, #f7f5fb 100%) !important; color: #07040d !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; overflow: hidden !important; position: relative !important; } body #djmaze-site.djmaze-home-site section#shop.maze-home-shop-modern::before { content: "" !important; position: absolute !important; inset: -25% !important; z-index: 0 !important; pointer-events: none !important; background: radial-gradient(circle at 25% 42%, rgba(157,78,221,.12), transparent 24%), radial-gradient(circle at 76% 34%, rgba(0,212,255,.09), transparent 24%), radial-gradient(circle at 50% 76%, rgba(255,255,255,.90), transparent 26%) !important; filter: blur(18px) !important; animation: mazeShopLightAmbient 18s ease-in-out infinite alternate !important; } body #djmaze-site.djmaze-home-site section#shop.maze-home-shop-modern::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background-image: linear-gradient(rgba(10,4,20,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(10,4,20,.035) 1px, transparent 1px) !important; background-size: 58px 58px !important; opacity: .48 !important; animation: mazeShopLightGrid 26s linear infinite !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-shell { position: relative !important; z-index: 2 !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-head .maze-kicker { color: #7b2cff !important; text-shadow: none !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-head h2 { color: #07040d !important; text-shadow: none !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-head p:not(.maze-kicker) { color: rgba(7,4,13,.62) !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-card { background: rgba(255,255,255,.74) !important; border: 0 !important; outline: 0 !important; box-shadow: 0 24px 80px rgba(31,16,63,.11), inset 0 1px 0 rgba(255,255,255,.75) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-card::before { background: radial-gradient(circle at 50% 14%, rgba(157,78,221,.14), transparent 28%), linear-gradient(180deg, transparent 46%, rgba(255,255,255,.76) 100%) !important; opacity: .95 !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-img { background: radial-gradient(circle at 50% 18%, rgba(157,78,221,.10), rgba(255,255,255,.92) 68%) !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-card h3 { color: #07040d !important; text-shadow: none !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-card .price { color: #7b2cff !important; text-shadow: none !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-btn { background: rgba(7,4,13,.08) !important; color: #07040d !important; } /* VIDEO SECTION: black background, 6 videos, 3 top + 3 bottom, no horizontal scroll. */ body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-light-minimal, body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-streaming { width: 100% !important; max-width: none !important; margin: 0 !important; min-height: auto !important; padding: clamp(82px, 7vw, 120px) clamp(32px, 4.8vw, 78px) clamp(78px, 7vw, 112px) !important; background: #000000 !important; background-image: none !important; color: #ffffff !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; overflow: hidden !important; position: relative !important; } body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-light-minimal::before { content: "" !important; position: absolute !important; inset: -24% !important; z-index: 0 !important; pointer-events: none !important; background: radial-gradient(circle at 22% 34%, rgba(157,78,221,.18), transparent 25%), radial-gradient(circle at 80% 38%, rgba(0,212,255,.10), transparent 25%), radial-gradient(circle at 50% 80%, rgba(185,140,255,.08), transparent 24%) !important; filter: blur(18px) !important; animation: mazeVideoBlackAmbient 16s ease-in-out infinite alternate !important; } body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-light-minimal::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background: linear-gradient(180deg, rgba(0,0,0,.04), #000000 92%) !important; opacity: 1 !important; } body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-shell { position: relative !important; z-index: 2 !important; width: 100% !important; max-width: none !important; margin: 0 !important; } body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-head { width: min(1480px, 100%) !important; max-width: none !important; margin: 0 auto clamp(34px, 4vw, 58px) !important; padding: 0 !important; text-align: center !important; } body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-head .maze-kicker { color: #b98cff !important; text-shadow: 0 0 20px rgba(157,78,221,.32) !important; } body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-head h2 { color: #ffffff !important; text-shadow: 0 0 28px rgba(157,78,221,.18) !important; } body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-head p:not(.maze-kicker) { color: rgba(255,255,255,.62) !important; } /* Grid: exactly 3 columns on desktop, wraps as 3 + 3 because PHP outputs 6 videos. */ body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-row { width: min(1480px, 100%) !important; max-width: none !important; margin: 0 auto !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(18px, 2vw, 32px) !important; overflow: visible !important; scroll-snap-type: none !important; scrollbar-width: none !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-row::-webkit-scrollbar { display: none !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-card { width: 100% !important; max-width: none !important; flex: none !important; display: block !important; background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; text-decoration: none !important; transform: translateY(0) scale(1) !important; transition: transform .32s cubic-bezier(.2,.8,.2,1) !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-card:hover { transform: translateY(-8px) scale(1.035) !important; z-index: 6 !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-thumb { border: 0 !important; outline: 0 !important; border-radius: 18px !important; background: #0b0b0f !important; box-shadow: 0 24px 70px rgba(0,0,0,.50) !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-card h3 { color: #ffffff !important; font-size: clamp(12px, .86vw, 15px) !important; text-shadow: 0 8px 28px rgba(0,0,0,.40) !important; } @keyframes mazeShopLightAmbient { 0% { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .70; } 50% { transform: translate3d(2%, 1.5%, 0) scale(1.04); opacity: .92; } 100% { transform: translate3d(4%, -1%, 0) scale(1.02); opacity: .78; } } @keyframes mazeShopLightGrid { 0% { background-position: 0 0, 0 0; } 100% { background-position: 58px 58px, 58px 58px; } } @keyframes mazeVideoBlackAmbient { 0% { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .70; } 50% { transform: translate3d(2%, 1.5%, 0) scale(1.04); opacity: .94; } 100% { transform: translate3d(4%, -1%, 0) scale(1.02); opacity: .78; } } @media (max-width: 1050px) { body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 720px) { body #djmaze-site.djmaze-home-site section#shop.maze-home-shop-modern, body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-light-minimal, body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-streaming { padding-left: 20px !important; padding-right: 20px !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-row { grid-template-columns: 1fr !important; } } /* === Booking + Photos modern 3D + Gallery 3-per-slide slider === */ /* BOOKING: modern full-width 3D section. */ body #djmaze-site.djmaze-home-site section#book.maze-booking-3d { width: 100% !important; max-width: none !important; margin: 0 !important; min-height: 100vh !important; padding: clamp(86px, 8vw, 132px) clamp(32px, 4.8vw, 78px) clamp(82px, 7vw, 118px) !important; display: block !important; background: #000000 !important; background-image: none !important; color: #ffffff !important; border: 0 !important; outline: 0 !important; overflow: hidden !important; position: relative !important; perspective: 1200px !important; } body #djmaze-site.djmaze-home-site section#book.maze-booking-3d::before { content: "" !important; position: absolute !important; inset: -25% !important; z-index: 0 !important; pointer-events: none !important; background: radial-gradient(circle at 20% 38%, rgba(157,78,221,.22), transparent 24%), radial-gradient(circle at 80% 42%, rgba(0,212,255,.10), transparent 26%), radial-gradient(circle at 52% 78%, rgba(185,140,255,.08), transparent 26%) !important; filter: blur(18px) !important; animation: mazeBooking3dAmbient 16s ease-in-out infinite alternate !important; } body #djmaze-site.djmaze-home-site section#book.maze-booking-3d::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background: linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(180deg, rgba(0,0,0,.05), #000000 92%) !important; background-size: 62px 62px, 62px 62px, auto !important; opacity: .55 !important; animation: mazeBooking3dGrid 28s linear infinite !important; } body #djmaze-site.djmaze-home-site section#book .maze-booking-3d-shell { position: relative !important; z-index: 2 !important; width: min(1480px, 100%) !important; margin: 0 auto !important; display: grid !important; grid-template-columns: minmax(0, .9fr) minmax(420px, .72fr) !important; gap: clamp(42px, 6vw, 96px) !important; align-items: center !important; } body #djmaze-site.djmaze-home-site section#book .maze-booking-3d-copy { position: relative !important; z-index: 2 !important; transform: rotateY(0deg) translateZ(0) !important; } body #djmaze-site.djmaze-home-site section#book .maze-booking-3d-copy .maze-kicker, body #djmaze-site.djmaze-home-site section#book .maze-booking-3d-copy h2, body #djmaze-site.djmaze-home-site section#book .maze-booking-3d-points span, body #djmaze-site.djmaze-home-site section#book .maze-book-info span, body #djmaze-site.djmaze-home-site section#book .maze-booking-3d-form button { font-family: 'Orbitron', 'Inter', sans-serif !important; text-transform: uppercase !important; } body #djmaze-site.djmaze-home-site section#book .maze-booking-3d-copy .maze-kicker { color: #b98cff !important; letter-spacing: .34em !important; text-shadow: 0 0 20px rgba(157,78,221,.35) !important; } body #djmaze-site.djmaze-home-site section#book .maze-booking-3d-copy h2 { margin: 0 0 24px !important; color: #ffffff !important; font-size: clamp(42px, 6.7vw, 110px) !important; line-height: .92 !important; letter-spacing: .018em !important; text-shadow: 0 0 30px rgba(157,78,221,.20) !important; } body #djmaze-site.djmaze-home-site section#book .maze-booking-3d-copy p:not(.maze-kicker) { max-width: 720px !important; color: rgba(255,255,255,.68) !important; font-size: clamp(15px, 1.2vw, 19px) !important; line-height: 1.78 !important; } body #djmaze-site.djmaze-home-site section#book .maze-booking-3d-points { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; margin: 28px 0 !important; } body #djmaze-site.djmaze-home-site section#book .maze-booking-3d-points span, body #djmaze-site.djmaze-home-site section#book .maze-book-info span { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 12px 15px !important; border-radius: 0 !important; border: 0 !important; background: rgba(255,255,255,.07) !important; color: #ffffff !important; font-size: 11px !important; letter-spacing: .13em !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 48px rgba(0,0,0,.35) !important; } body #djmaze-site.djmaze-home-site section#book .maze-book-info { margin-top: 18px !important; } /* Booking form: 3D panel, no rounded boxes. */ body #djmaze-site.djmaze-home-site section#book .maze-booking-3d-form { position: relative !important; z-index: 2 !important; width: 100% !important; padding: clamp(24px, 3.2vw, 42px) !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.022)) !important; box-shadow: 0 44px 130px rgba(0,0,0,.58), 0 0 80px rgba(157,78,221,.12) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; transform: rotateY(-7deg) rotateX(2deg) translateZ(0) !important; transform-style: preserve-3d !important; transition: transform .45s ease, box-shadow .45s ease !important; } body #djmaze-site.djmaze-home-site section#book .maze-booking-3d-form:hover { transform: rotateY(0deg) rotateX(0deg) translateY(-6px) !important; box-shadow: 0 56px 150px rgba(0,0,0,.68), 0 0 110px rgba(157,78,221,.18) !important; } body #djmaze-site.djmaze-home-site section#book .maze-booking-3d-form input, body #djmaze-site.djmaze-home-site section#book .maze-booking-3d-form select, body #djmaze-site.djmaze-home-site section#book .maze-booking-3d-form textarea { border: 0 !important; outline: 0 !important; border-radius: 0 !important; background: rgba(0,0,0,.42) !important; color: #ffffff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 42px rgba(0,0,0,.22) !important; } body #djmaze-site.djmaze-home-site section#book .maze-booking-3d-form input::placeholder, body #djmaze-site.djmaze-home-site section#book .maze-booking-3d-form textarea::placeholder { color: rgba(255,255,255,.52) !important; } /* HOME PHOTOS section: modern 3D slider, full width, no radius. */ body #djmaze-site.djmaze-home-site section#photos.maze-home-photos-slider-section { width: 100% !important; max-width: none !important; margin: 0 !important; min-height: auto !important; padding: clamp(82px, 7vw, 122px) clamp(32px, 4.8vw, 78px) clamp(82px, 7vw, 118px) !important; background: #000000 !important; background-image: none !important; color: #ffffff !important; border: 0 !important; outline: 0 !important; overflow: hidden !important; position: relative !important; } body #djmaze-site.djmaze-home-site section#photos.maze-home-photos-slider-section::before { content: "" !important; position: absolute !important; inset: -24% !important; z-index: 0 !important; pointer-events: none !important; background: radial-gradient(circle at 26% 28%, rgba(157,78,221,.18), transparent 24%), radial-gradient(circle at 74% 42%, rgba(0,212,255,.10), transparent 25%) !important; filter: blur(18px) !important; animation: mazePhotos3dAmbient 17s ease-in-out infinite alternate !important; } body #djmaze-site.djmaze-home-site section#photos .maze-home-photos-slider-shell, body #djmaze-site.maze-photos-page-wrap .maze-gallery-page-slider-main { position: relative !important; z-index: 2 !important; width: 100% !important; max-width: none !important; margin: 0 auto !important; } body #djmaze-site.djmaze-home-site section#photos .maze-home-photos-slider-head, body #djmaze-site.maze-photos-page-wrap .maze-gallery-page-head { width: min(1480px, 100%) !important; max-width: none !important; margin: 0 auto clamp(32px, 4vw, 58px) !important; text-align: center !important; padding: 0 !important; } body #djmaze-site.djmaze-home-site section#photos .maze-home-photos-slider-head .maze-kicker, body #djmaze-site.djmaze-home-site section#photos .maze-home-photos-slider-head h2, body #djmaze-site.maze-photos-page-wrap .maze-gallery-page-head .maze-kicker, body #djmaze-site.maze-photos-page-wrap .maze-gallery-page-head h2 { font-family: 'Orbitron', 'Inter', sans-serif !important; text-transform: uppercase !important; text-align: center !important; } body #djmaze-site.djmaze-home-site section#photos .maze-home-photos-slider-head .maze-kicker, body #djmaze-site.maze-photos-page-wrap .maze-gallery-page-head .maze-kicker { color: #b98cff !important; letter-spacing: .34em !important; text-shadow: 0 0 20px rgba(157,78,221,.34) !important; } body #djmaze-site.djmaze-home-site section#photos .maze-home-photos-slider-head h2, body #djmaze-site.maze-photos-page-wrap .maze-gallery-page-head h2 { color: #ffffff !important; font-size: clamp(38px, 6.2vw, 96px) !important; line-height: .96 !important; letter-spacing: .02em !important; margin: 0 0 16px !important; text-shadow: 0 0 28px rgba(157,78,221,.18) !important; } body #djmaze-site.djmaze-home-site section#photos .maze-home-photos-slider-head p, body #djmaze-site.maze-photos-page-wrap .maze-gallery-page-head p { max-width: 720px !important; margin: 0 auto !important; color: rgba(255,255,255,.62) !important; font-size: clamp(14px, 1.1vw, 17px) !important; line-height: 1.7 !important; } /* Shared 3-images-per-slide slider. */ body #djmaze-site .maze-photo-3slider { width: min(1480px, 100%) !important; margin: 0 auto !important; position: relative !important; } body #djmaze-site .maze-photo-3slider-viewport { width: 100% !important; overflow: hidden !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; perspective: 1200px !important; } body #djmaze-site .maze-photo-3slider-track { display: flex !important; width: 100% !important; transition: transform .72s cubic-bezier(.2,.8,.2,1) !important; will-change: transform !important; } body #djmaze-site .maze-photo-3slider-slide { min-width: 100% !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; padding: 0 !important; } body #djmaze-site .maze-photo-3slider-card { position: relative !important; display: block !important; height: clamp(290px, 28vw, 500px) !important; overflow: hidden !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; background: #050505 !important; box-shadow: 0 30px 90px rgba(0,0,0,.44) !important; transform: translateY(0) rotateX(0deg) !important; transition: transform .42s cubic-bezier(.2,.8,.2,1), box-shadow .42s ease, filter .42s ease !important; } body #djmaze-site .maze-photo-3slider-card:nth-child(2) { transform: translateY(-16px) translateZ(0) !important; } body #djmaze-site .maze-photo-3slider-card:hover { transform: translateY(-14px) scale(1.025) !important; z-index: 4 !important; box-shadow: 0 42px 120px rgba(157,78,221,.23), 0 28px 95px rgba(0,0,0,.56) !important; } body #djmaze-site .maze-photo-3slider-card img { width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; object-position: center center !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; filter: saturate(1.04) contrast(1.04) brightness(.88) !important; transition: transform .55s ease, filter .55s ease !important; } body #djmaze-site .maze-photo-3slider-card:hover img { transform: scale(1.06) !important; filter: saturate(1.12) contrast(1.06) brightness(1) !important; } /* Slider controls: minimal and square, no radius boxes. */ body #djmaze-site .maze-photo-3slider-controls { display: flex !important; align-items: center !important; justify-content: center !important; gap: 16px !important; margin-top: 28px !important; } body #djmaze-site .maze-photo-3slider-btn { width: 44px !important; height: 44px !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; background: rgba(255,255,255,.09) !important; color: #ffffff !important; font-family: 'Orbitron', 'Inter', sans-serif !important; cursor: pointer !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 45px rgba(0,0,0,.35) !important; transition: transform .25s ease, background .25s ease !important; } body #djmaze-site .maze-photo-3slider-btn:hover { transform: translateY(-3px) !important; background: rgba(185,140,255,.25) !important; } body #djmaze-site .maze-photo-3slider-dots { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } body #djmaze-site .maze-photo-3slider-dots button { width: 8px !important; height: 8px !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; background: rgba(255,255,255,.25) !important; padding: 0 !important; cursor: pointer !important; transition: width .25s ease, background .25s ease !important; } body #djmaze-site .maze-photo-3slider-dots button.is-active { width: 28px !important; background: #b98cff !important; } /* Photos page gallery slider. */ body #djmaze-site.maze-photos-page-wrap .maze-gallery-page-slider-main { background: #000000 !important; padding: clamp(80px, 7vw, 120px) clamp(32px, 4.8vw, 78px) clamp(88px, 7vw, 126px) !important; color: #ffffff !important; border: 0 !important; } body #djmaze-site.maze-photos-page-wrap .maze-photo-3slider-page { width: min(1480px, 100%) !important; } /* Disable old masonry/gallery styles when cached selectors remain. */ body #djmaze-site.djmaze-home-site #photos .maze-gallery, body #djmaze-site.djmaze-home-site #photos .maze-real-gallery, body #djmaze-site.maze-photos-page-wrap .maze-photo-page-grid, body #djmaze-site.maze-photos-page-wrap .maze-photo-page-card, body #djmaze-site .maze-photo-tile { border: 0 !important; outline: 0 !important; border-radius: 0 !important; } @keyframes mazeBooking3dAmbient { 0% { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .70; } 50% { transform: translate3d(2%, 1.5%, 0) scale(1.04); opacity: .96; } 100% { transform: translate3d(4%, -1%, 0) scale(1.02); opacity: .78; } } @keyframes mazeBooking3dGrid { 0% { background-position: 0 0, 0 0, 0 0; } 100% { background-position: 62px 62px, 62px 62px, 0 0; } } @keyframes mazePhotos3dAmbient { 0% { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .70; } 50% { transform: translate3d(2%, 1.5%, 0) scale(1.04); opacity: .94; } 100% { transform: translate3d(4%, -1%, 0) scale(1.02); opacity: .78; } } @media (max-width: 1100px) { body #djmaze-site.djmaze-home-site section#book .maze-booking-3d-shell { grid-template-columns: 1fr !important; } body #djmaze-site.djmaze-home-site section#book .maze-booking-3d-form { transform: none !important; } } @media (max-width: 900px) { body #djmaze-site .maze-photo-3slider-slide { grid-template-columns: 1fr !important; gap: 10px !important; } body #djmaze-site .maze-photo-3slider-card:nth-child(2) { transform: none !important; } body #djmaze-site .maze-photo-3slider-card { height: 420px !important; } } @media (max-width: 720px) { body #djmaze-site.djmaze-home-site section#book.maze-booking-3d, body #djmaze-site.djmaze-home-site section#photos.maze-home-photos-slider-section, body #djmaze-site.maze-photos-page-wrap .maze-gallery-page-slider-main { padding-left: 20px !important; padding-right: 20px !important; } } /* === Booking title smaller final adjustment === */ body #djmaze-site.djmaze-home-site section#book .maze-booking-3d-copy h2 { font-size: clamp(30px, 4.3vw, 68px) !important; line-height: 1.02 !important; max-width: 760px !important; } /* === All home section titles same size as Certifications title === */ body #djmaze-site.djmaze-home-site section#bio h2, body #djmaze-site.djmaze-home-site section#bio .maze-bio-copy h2, body #djmaze-site.djmaze-home-site section#bio .maze-bio-title, body #djmaze-site.djmaze-home-site section#certifications h2, body #djmaze-site.djmaze-home-site section#certifications .maze-cert-subtle-head h2, body #djmaze-site.djmaze-home-site section#discography h2, body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-head h2, body #djmaze-site.djmaze-home-site section#shop h2, body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-head h2, body #djmaze-site.djmaze-home-site section#videos h2, body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-head h2, body #djmaze-site.djmaze-home-site section#book h2, body #djmaze-site.djmaze-home-site section#book .maze-booking-3d-copy h2, body #djmaze-site.djmaze-home-site section#photos h2, body #djmaze-site.djmaze-home-site section#photos .maze-home-photos-slider-head h2, body #djmaze-site.djmaze-home-site .maze-section-head h2 { font-family: 'Orbitron', 'Inter', sans-serif !important; font-size: clamp(22px, 2.45vw, 44px) !important; line-height: 1.08 !important; letter-spacing: .035em !important; text-transform: uppercase !important; white-space: normal !important; } /* Keep the certification title on one clean line where possible. */ body #djmaze-site.djmaze-home-site section#certifications h2, body #djmaze-site.djmaze-home-site section#certifications .maze-cert-subtle-head h2 { white-space: nowrap !important; } /* Keep long Booking title controlled, not oversized. */ body #djmaze-site.djmaze-home-site section#book .maze-booking-3d-copy h2 { max-width: 720px !important; } /* === Discographie carousel bigger + title smaller adjustment === */ /* Make only the Discographie section title a bit smaller than the shared section title size. */ body #djmaze-site.djmaze-home-site section#discography h2, body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-head h2, body #djmaze-site.djmaze-home-site section#discography .maze-section-head h2 { font-size: clamp(19px, 2.05vw, 36px) !important; line-height: 1.08 !important; } /* Give the 3D carousel more visual size and space. */ body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-viewport, body #djmaze-site.djmaze-home-site section#discography .maze-coverflow-viewport { height: clamp(500px, 49vw, 760px) !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-card { width: clamp(230px, 24vw, 400px) !important; max-width: none !important; } /* Coverflow fixed version selectors. */ body #djmaze-site.djmaze-home-site section#discography .maze-coverflow-card, body #djmaze-site.djmaze-home-site section#discography .maze-discography-coverflow-card { width: clamp(230px, 24vw, 400px) !important; max-width: none !important; aspect-ratio: 1 / 1 !important; } /* Enlarge cover images while keeping the clean 1x1 look. */ body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-cover, body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-cover img, body #djmaze-site.djmaze-home-site section#discography .maze-coverflow-cover, body #djmaze-site.djmaze-home-site section#discography .maze-coverflow-cover img, body #djmaze-site.djmaze-home-site section#discography .maze-discography-coverflow-cover, body #djmaze-site.djmaze-home-site section#discography .maze-discography-coverflow-cover img { width: 100% !important; height: 100% !important; } /* If the JS uses transform scale variables, boost the active/side covers a little. */ body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-card.is-active, body #djmaze-site.djmaze-home-site section#discography .maze-coverflow-card.is-active, body #djmaze-site.djmaze-home-site section#discography .maze-discography-coverflow-card.is-active { transform: translate(-50%, -50%) translateX(var(--x, 0px)) translateZ(var(--z, 0px)) rotateY(var(--r, 0deg)) scale(calc(var(--s, 1) * 1.06)) !important; } @media (max-width: 900px) { body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-viewport, body #djmaze-site.djmaze-home-site section#discography .maze-coverflow-viewport { height: 520px !important; } body #djmaze-site.djmaze-home-site section#discography .maze-discography-3d-card, body #djmaze-site.djmaze-home-site section#discography .maze-coverflow-card, body #djmaze-site.djmaze-home-site section#discography .maze-discography-coverflow-card { width: clamp(220px, 66vw, 330px) !important; } } /* === Shop section restored dark premium style === */ body #djmaze-site.djmaze-home-site section#shop.maze-home-shop-modern { width: 100% !important; max-width: none !important; margin: 0 !important; min-height: auto !important; padding: clamp(82px, 7vw, 120px) clamp(32px, 4.8vw, 78px) clamp(76px, 7vw, 112px) !important; background: #000000 !important; background-image: none !important; color: #ffffff !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; overflow: hidden !important; position: relative !important; } body #djmaze-site.djmaze-home-site section#shop.maze-home-shop-modern::before { content: "" !important; position: absolute !important; inset: -25% !important; z-index: 0 !important; pointer-events: none !important; background: radial-gradient(circle at 22% 34%, rgba(157,78,221,.20), transparent 25%), radial-gradient(circle at 80% 38%, rgba(0,212,255,.11), transparent 25%), radial-gradient(circle at 50% 80%, rgba(185,140,255,.09), transparent 24%) !important; filter: blur(18px) !important; animation: mazeShopDarkAmbient 16s ease-in-out infinite alternate !important; } body #djmaze-site.djmaze-home-site section#shop.maze-home-shop-modern::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background: linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px), linear-gradient(180deg, rgba(0,0,0,.04), #000000 92%) !important; background-size: 58px 58px, 58px 58px, auto !important; opacity: .62 !important; animation: mazeShopDarkGrid 28s linear infinite !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-shell { position: relative !important; z-index: 2 !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-head, body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-head p:not(.maze-kicker), body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-head h2 { text-align: center !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-head .maze-kicker { color: #b98cff !important; text-shadow: 0 0 20px rgba(157,78,221,.34) !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-head h2 { color: #ffffff !important; text-shadow: 0 0 28px rgba(157,78,221,.18) !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-head p:not(.maze-kicker) { color: rgba(255,255,255,.62) !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-card { background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)) !important; border: 0 !important; outline: 0 !important; box-shadow: 0 32px 95px rgba(0,0,0,.50) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-card:hover { box-shadow: 0 44px 135px rgba(157,78,221,.22), 0 38px 115px rgba(0,0,0,.66) !important; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.024)) !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-card::before { background: radial-gradient(circle at 50% 15%, rgba(185,140,255,.20), transparent 30%), linear-gradient(180deg, transparent 42%, rgba(0,0,0,.72) 100%) !important; opacity: .9 !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-img { background: radial-gradient(circle at 50% 20%, rgba(157,78,221,.18), rgba(0,0,0,1) 64%) !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-card h3 { color: #ffffff !important; text-shadow: none !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-card .price { color: #b98cff !important; text-shadow: 0 0 18px rgba(157,78,221,.26) !important; } body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-btn { background: rgba(255,255,255,.08) !important; color: #ffffff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important; } @keyframes mazeShopDarkAmbient { 0% { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .70; } 50% { transform: translate3d(2%, 1.5%, 0) scale(1.04); opacity: .94; } 100% { transform: translate3d(4%, -1%, 0) scale(1.02); opacity: .78; } } @keyframes mazeShopDarkGrid { 0% { background-position: 0 0, 0 0, 0 0; } 100% { background-position: 58px 58px, 58px 58px, 0 0; } } /* === Photos section light + modern controls + real lightbox === */ /* Home Photos section: light animated full-width background. */ body #djmaze-site.djmaze-home-site section#photos.maze-home-photos-slider-section { width: 100% !important; max-width: none !important; margin: 0 !important; padding: clamp(82px, 7vw, 122px) clamp(32px, 4.8vw, 78px) clamp(82px, 7vw, 118px) !important; background: radial-gradient(circle at 18% 22%, rgba(157,78,221,.10), transparent 30%), radial-gradient(circle at 82% 36%, rgba(0,212,255,.08), transparent 28%), linear-gradient(180deg, #ffffff 0%, #f7f5fb 100%) !important; color: #07040d !important; border: 0 !important; outline: 0 !important; overflow: hidden !important; position: relative !important; } body #djmaze-site.djmaze-home-site section#photos.maze-home-photos-slider-section::before { content: "" !important; position: absolute !important; inset: -25% !important; z-index: 0 !important; pointer-events: none !important; background: radial-gradient(circle at 25% 42%, rgba(157,78,221,.12), transparent 24%), radial-gradient(circle at 76% 34%, rgba(0,212,255,.09), transparent 24%), radial-gradient(circle at 50% 76%, rgba(255,255,255,.88), transparent 26%) !important; filter: blur(18px) !important; animation: mazePhotosLightAmbient 18s ease-in-out infinite alternate !important; } body #djmaze-site.djmaze-home-site section#photos.maze-home-photos-slider-section::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background-image: linear-gradient(rgba(10,4,20,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(10,4,20,.035) 1px, transparent 1px) !important; background-size: 58px 58px !important; opacity: .48 !important; animation: mazePhotosLightGrid 26s linear infinite !important; } /* Home Photos typography on light background. */ body #djmaze-site.djmaze-home-site section#photos .maze-home-photos-slider-head .maze-kicker { color: #7b2cff !important; text-shadow: none !important; } body #djmaze-site.djmaze-home-site section#photos .maze-home-photos-slider-head h2 { color: #07040d !important; text-shadow: none !important; } body #djmaze-site.djmaze-home-site section#photos .maze-home-photos-slider-head p { color: rgba(7,4,13,.62) !important; } /* Photo cards remain sharp/no radius, but cleaner on light section. */ body #djmaze-site.djmaze-home-site section#photos .maze-photo-3slider-card { border-radius: 0 !important; border: 0 !important; outline: 0 !important; background: #07040d !important; box-shadow: 0 26px 80px rgba(31,16,63,.16) !important; } body #djmaze-site.djmaze-home-site section#photos .maze-photo-3slider-card:hover { box-shadow: 0 38px 120px rgba(31,16,63,.24), 0 20px 70px rgba(157,78,221,.15) !important; } /* Modern slider controllers: premium floating control bar. */ body #djmaze-site .maze-photo-3slider-controls { display: flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; width: fit-content !important; margin: 30px auto 0 !important; padding: 10px 12px !important; border: 0 !important; border-radius: 999px !important; background: rgba(7,4,13,.86) !important; box-shadow: 0 24px 70px rgba(7,4,13,.20), inset 0 1px 0 rgba(255,255,255,.08) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; } body #djmaze-site .maze-photo-3slider-btn { width: 44px !important; height: 44px !important; border: 0 !important; outline: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,.10) !important; color: #ffffff !important; font-family: 'Orbitron', 'Inter', sans-serif !important; font-size: 16px !important; line-height: 1 !important; cursor: pointer !important; box-shadow: none !important; transition: transform .24s ease, background .24s ease, color .24s ease !important; } body #djmaze-site .maze-photo-3slider-btn:hover { transform: translateY(-2px) scale(1.04) !important; background: #ffffff !important; color: #07040d !important; } body #djmaze-site .maze-photo-3slider-dots { display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; padding: 0 4px !important; } body #djmaze-site .maze-photo-3slider-dots button { width: 7px !important; height: 7px !important; padding: 0 !important; border: 0 !important; outline: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,.32) !important; cursor: pointer !important; transition: width .24s ease, background .24s ease, transform .24s ease !important; } body #djmaze-site .maze-photo-3slider-dots button.is-active { width: 30px !important; background: linear-gradient(90deg, #b98cff, #00d4ff) !important; } /* Keep gallery page controls modern too. */ body #djmaze-site.maze-photos-page-wrap .maze-photo-3slider-controls { background: rgba(7,4,13,.88) !important; } /* Real lightbox overlay for photo slider/gallery clicks. */ .maze-photo-lightbox-overlay { position: fixed !important; inset: 0 !important; z-index: 999999 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: clamp(18px, 3vw, 44px) !important; background: rgba(0,0,0,.90) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; opacity: 0 !important; pointer-events: none !important; transition: opacity .28s ease !important; } .maze-photo-lightbox-overlay.is-open { opacity: 1 !important; pointer-events: auto !important; } .maze-photo-lightbox-img { display: block !important; max-width: min(94vw, 1500px) !important; max-height: 88vh !important; width: auto !important; height: auto !important; object-fit: contain !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; box-shadow: 0 42px 140px rgba(0,0,0,.72), 0 0 90px rgba(157,78,221,.22) !important; transform: scale(.96) translateY(14px) !important; transition: transform .28s cubic-bezier(.2,.8,.2,1) !important; } .maze-photo-lightbox-overlay.is-open .maze-photo-lightbox-img { transform: scale(1) translateY(0) !important; } .maze-photo-lightbox-close, .maze-photo-lightbox-prev, .maze-photo-lightbox-next { position: fixed !important; z-index: 1000000 !important; display: grid !important; place-items: center !important; border: 0 !important; outline: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,.12) !important; color: #ffffff !important; font-family: 'Orbitron', 'Inter', sans-serif !important; cursor: pointer !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; transition: transform .22s ease, background .22s ease, color .22s ease !important; } .maze-photo-lightbox-close:hover, .maze-photo-lightbox-prev:hover, .maze-photo-lightbox-next:hover { transform: translateY(-2px) scale(1.04) !important; background: #ffffff !important; color: #07040d !important; } .maze-photo-lightbox-close { top: 22px !important; right: 22px !important; width: 50px !important; height: 50px !important; font-size: 22px !important; } .maze-photo-lightbox-prev, .maze-photo-lightbox-next { top: 50% !important; width: 54px !important; height: 54px !important; font-size: 20px !important; } .maze-photo-lightbox-prev { left: 22px !important; } .maze-photo-lightbox-next { right: 22px !important; } @keyframes mazePhotosLightAmbient { 0% { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .70; } 50% { transform: translate3d(2%, 1.5%, 0) scale(1.04); opacity: .92; } 100% { transform: translate3d(4%, -1%, 0) scale(1.02); opacity: .78; } } @keyframes mazePhotosLightGrid { 0% { background-position: 0 0, 0 0; } 100% { background-position: 58px 58px, 58px 58px; } } @media (max-width: 720px) { body #djmaze-site .maze-photo-3slider-controls { padding: 8px 10px !important; gap: 10px !important; } body #djmaze-site .maze-photo-3slider-btn { width: 40px !important; height: 40px !important; } .maze-photo-lightbox-prev, .maze-photo-lightbox-next { width: 44px !important; height: 44px !important; } .maze-photo-lightbox-prev { left: 12px !important; } .maze-photo-lightbox-next { right: 12px !important; } } /* === Photos carousel and lightbox reliable fix === */ body #djmaze-site .maze-photo-3slider { overflow: visible !important; } body #djmaze-site .maze-photo-3slider-viewport { overflow: hidden !important; width: 100% !important; cursor: grab !important; touch-action: pan-y !important; } body #djmaze-site .maze-photo-3slider-viewport.is-dragging { cursor: grabbing !important; } body #djmaze-site .maze-photo-3slider-track { display: flex !important; flex-wrap: nowrap !important; width: 100% !important; transform: translate3d(0,0,0); transition: transform .72s cubic-bezier(.2,.8,.2,1) !important; } body #djmaze-site .maze-photo-3slider-slide { flex: 0 0 100% !important; min-width: 100% !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; } body #djmaze-site .maze-photo-3slider-card { pointer-events: auto !important; user-select: none !important; -webkit-user-drag: none !important; cursor: zoom-in !important; } body #djmaze-site .maze-photo-3slider-card img { pointer-events: none !important; user-select: none !important; -webkit-user-drag: none !important; } /* More reliable modern controls above all slide images. */ body #djmaze-site .maze-photo-3slider-controls { position: relative !important; z-index: 20 !important; pointer-events: auto !important; } body #djmaze-site .maze-photo-3slider-btn, body #djmaze-site .maze-photo-3slider-dots button { pointer-events: auto !important; } /* Prevent background page scroll when the photo is open. */ body.maze-photo-lightbox-open { overflow: hidden !important; } /* Force the custom lightbox to stay above the existing theme modal. */ body .maze-photo-lightbox-overlay { z-index: 2147483000 !important; } body .maze-photo-lightbox-close, body .maze-photo-lightbox-prev, body .maze-photo-lightbox-next { z-index: 2147483001 !important; } /* Disable old theme modal when custom photo lightbox is open. */ body.maze-photo-lightbox-open .maze-lightbox { display: none !important; } @media (max-width: 900px) { body #djmaze-site .maze-photo-3slider-slide { grid-template-columns: 1fr !important; } } /* === Video section light final === */ body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-light-minimal, body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-streaming { width: 100% !important; max-width: none !important; margin: 0 !important; min-height: auto !important; padding: clamp(82px, 7vw, 120px) clamp(32px, 4.8vw, 78px) clamp(78px, 7vw, 112px) !important; background: radial-gradient(circle at 18% 22%, rgba(157,78,221,.10), transparent 30%), radial-gradient(circle at 82% 36%, rgba(0,212,255,.08), transparent 28%), linear-gradient(180deg, #ffffff 0%, #f7f5fb 100%) !important; color: #07040d !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; overflow: hidden !important; position: relative !important; } body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-light-minimal::before, body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-streaming::before { content: "" !important; position: absolute !important; inset: -25% !important; z-index: 0 !important; pointer-events: none !important; background: radial-gradient(circle at 25% 42%, rgba(157,78,221,.12), transparent 24%), radial-gradient(circle at 76% 34%, rgba(0,212,255,.09), transparent 24%), radial-gradient(circle at 50% 76%, rgba(255,255,255,.88), transparent 26%) !important; filter: blur(18px) !important; animation: mazeVideoLightAmbientFinal 18s ease-in-out infinite alternate !important; } body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-light-minimal::after, body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-streaming::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background-image: linear-gradient(rgba(10,4,20,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(10,4,20,.035) 1px, transparent 1px) !important; background-size: 58px 58px !important; opacity: .48 !important; animation: mazeVideoLightGridFinal 26s linear infinite !important; } body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-shell { position: relative !important; z-index: 2 !important; } body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-head .maze-kicker { color: #7b2cff !important; text-shadow: none !important; } body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-head h2 { color: #07040d !important; text-shadow: none !important; } body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-head p:not(.maze-kicker) { color: rgba(7,4,13,.62) !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-card h3 { color: #07040d !important; text-shadow: none !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-thumb { background: #09050f !important; box-shadow: 0 24px 70px rgba(31,16,63,.18) !important; border: 0 !important; outline: 0 !important; } body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-more .maze-btn { color: #ffffff !important; } @keyframes mazeVideoLightAmbientFinal { 0% { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .70; } 50% { transform: translate3d(2%, 1.5%, 0) scale(1.04); opacity: .92; } 100% { transform: translate3d(4%, -1%, 0) scale(1.02); opacity: .78; } } @keyframes mazeVideoLightGridFinal { 0% { background-position: 0 0, 0 0; } 100% { background-position: 58px 58px, 58px 58px; } } /* === Video thumbnails bigger tight spacing no radius === */ body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-row { width: min(1560px, 100%) !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(6px, .75vw, 12px) !important; padding: 0 !important; margin: 0 auto !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-card { width: 100% !important; max-width: none !important; transform: none !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-card:hover { transform: translateY(-5px) scale(1.018) !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-thumb { width: 100% !important; aspect-ratio: 16 / 9 !important; border-radius: 0 !important; border: 0 !important; outline: 0 !important; box-shadow: 0 18px 50px rgba(31,16,63,.16) !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-thumb img { border-radius: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-play { border-radius: 0 !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-card h3 { margin-top: 9px !important; padding: 0 2px !important; } @media (max-width: 1050px) { body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } } @media (max-width: 720px) { body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-row { grid-template-columns: 1fr !important; gap: 10px !important; } } /* === Video grid ultra tight spacing final === */ body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-light-minimal, body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-streaming { padding-left: clamp(18px, 2.2vw, 34px) !important; padding-right: clamp(18px, 2.2vw, 34px) !important; } body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-head { margin-bottom: clamp(18px, 2.2vw, 28px) !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-row { width: min(1640px, 100%) !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 4px !important; column-gap: 4px !important; row-gap: 4px !important; margin: 0 auto !important; padding: 0 !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-card { position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #09050f !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-card:hover { transform: scale(1.012) !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-thumb { display: block !important; width: 100% !important; margin: 0 !important; aspect-ratio: 16 / 9 !important; border-radius: 0 !important; box-shadow: none !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-card h3 { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 3 !important; margin: 0 !important; padding: 18px 14px 12px !important; color: #ffffff !important; font-size: clamp(10px, .72vw, 13px) !important; line-height: 1.22 !important; background: linear-gradient(180deg, transparent, rgba(0,0,0,.78)) !important; text-shadow: 0 2px 14px rgba(0,0,0,.75) !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-play { left: 10px !important; bottom: 10px !important; width: 34px !important; height: 34px !important; z-index: 4 !important; } body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-more { margin-top: clamp(18px, 2vw, 26px) !important; } @media (max-width: 1050px) { body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4px !important; } } @media (max-width: 720px) { body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-light-minimal, body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-streaming { padding-left: 10px !important; padding-right: 10px !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-row { grid-template-columns: 1fr !important; gap: 5px !important; } } /* === Video grid exact 10px spacing and square corners === */ body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-row { width: min(1640px, 100%) !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; column-gap: 10px !important; row-gap: 10px !important; margin: 0 auto !important; padding: 0 !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-card, body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-thumb, body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-thumb img, body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-play, body #djmaze-site.djmaze-home-site section#videos .maze-video-card, body #djmaze-site.djmaze-home-site section#videos .maze-video-card img { border-radius: 0 !important; border: 0 !important; outline: 0 !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-card { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #09050f !important; box-shadow: none !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-thumb { width: 100% !important; margin: 0 !important; aspect-ratio: 16 / 9 !important; box-shadow: none !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } @media (max-width: 1050px) { body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; column-gap: 10px !important; row-gap: 10px !important; } } @media (max-width: 720px) { body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-row { grid-template-columns: 1fr !important; gap: 10px !important; column-gap: 10px !important; row-gap: 10px !important; } } /* === Video thumbnails border radius 20px final === */ body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-card { border-radius: 20px !important; overflow: hidden !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-thumb, body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-thumb img, body #djmaze-site.djmaze-home-site section#videos .maze-video-card, body #djmaze-site.djmaze-home-site section#videos .maze-video-card img { border-radius: 20px !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-play { border-radius: 999px !important; } /* === Video thumbnails border radius 10px final === */ body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-card { border-radius: 10px !important; overflow: hidden !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-thumb, body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-thumb img, body #djmaze-site.djmaze-home-site section#videos .maze-video-card, body #djmaze-site.djmaze-home-site section#videos .maze-video-card img { border-radius: 10px !important; } body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-play { border-radius: 999px !important; } /* === Photos thumbnails same size final === */ body #djmaze-site .maze-photo-3slider-slide { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; align-items: stretch !important; } body #djmaze-site .maze-photo-3slider-card, body #djmaze-site .maze-photo-3slider-card:nth-child(2), body #djmaze-site .maze-photo-3slider-card:hover { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; min-height: 0 !important; max-height: none !important; transform: none !important; border-radius: 0 !important; overflow: hidden !important; } body #djmaze-site .maze-photo-3slider-card img { width: 100% !important; height: 100% !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; object-position: center center !important; display: block !important; border-radius: 0 !important; } /* Keep hover subtle without changing size. */ body #djmaze-site .maze-photo-3slider-card:hover img { transform: scale(1.045) !important; } @media (max-width: 900px) { body #djmaze-site .maze-photo-3slider-slide { grid-template-columns: 1fr !important; gap: 10px !important; } body #djmaze-site .maze-photo-3slider-card, body #djmaze-site .maze-photo-3slider-card:nth-child(2) { aspect-ratio: 1 / 1 !important; height: auto !important; transform: none !important; } } /* === Photos thumbnails radius 15px and 20px spacing final === */ body #djmaze-site .maze-photo-3slider-slide { gap: 20px !important; column-gap: 20px !important; row-gap: 20px !important; } body #djmaze-site .maze-photo-3slider-card, body #djmaze-site .maze-photo-3slider-card:nth-child(2), body #djmaze-site .maze-photo-3slider-card:hover { border-radius: 15px !important; overflow: hidden !important; } body #djmaze-site .maze-photo-3slider-card img { border-radius: 15px !important; } body #djmaze-site.djmaze-home-site section#photos .maze-photo-3slider-card, body #djmaze-site.maze-photos-page-wrap .maze-photo-3slider-card { border-radius: 15px !important; } body #djmaze-site.djmaze-home-site section#photos .maze-photo-3slider-card img, body #djmaze-site.maze-photos-page-wrap .maze-photo-3slider-card img { border-radius: 15px !important; } /* Keep mobile spacing clean. */ @media (max-width: 900px) { body #djmaze-site .maze-photo-3slider-slide { gap: 20px !important; column-gap: 20px !important; row-gap: 20px !important; } } /* === Section scroll slide transitions final === */ body #djmaze-site .djmaze-scroll-reveal { opacity: 0; transform: translate3d(var(--djmaze-reveal-x, 0), 52px, 0) scale(.985); transition: opacity .92s cubic-bezier(.2,.8,.2,1), transform .92s cubic-bezier(.2,.8,.2,1), filter .92s cubic-bezier(.2,.8,.2,1); will-change: opacity, transform; filter: blur(8px); } body #djmaze-site .djmaze-scroll-reveal.djmaze-reveal-left { --djmaze-reveal-x: -86px; } body #djmaze-site .djmaze-scroll-reveal.djmaze-reveal-right { --djmaze-reveal-x: 86px; } body #djmaze-site .djmaze-scroll-reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); } body #djmaze-site .djmaze-scroll-stagger { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .76s cubic-bezier(.2,.8,.2,1) var(--djmaze-stagger-delay, 0ms), transform .76s cubic-bezier(.2,.8,.2,1) var(--djmaze-stagger-delay, 0ms); will-change: opacity, transform; } body #djmaze-site .djmaze-scroll-reveal.is-visible .djmaze-scroll-stagger { opacity: 1; transform: translate3d(0, 0, 0); } /* Keep layout stable while sections animate in. */ body #djmaze-site.djmaze-home-site > section.maze-section, body #djmaze-site.djmaze-home-site > section.panel { backface-visibility: hidden; transform-style: preserve-3d; } /* Mobile: reduce distance so it feels smooth and does not create horizontal overflow. */ @media (max-width: 768px) { body #djmaze-site .djmaze-scroll-reveal.djmaze-reveal-left { --djmaze-reveal-x: -34px; } body #djmaze-site .djmaze-scroll-reveal.djmaze-reveal-right { --djmaze-reveal-x: 34px; } } /* Respect user/browser reduced-motion setting. */ @media (prefers-reduced-motion: reduce) { body #djmaze-site .djmaze-scroll-reveal, body #djmaze-site .djmaze-scroll-stagger { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } } /* === Multi page identity edits: biography, discography, photos, shop === */ /* Keep the fixed menu above every page layer while scrolling. */ body #djmaze-site .djmaze-global-nav, body:not(.home) .djmaze-global-nav, body:not(.front-page) .djmaze-global-nav, body.woocommerce-page #djmaze-site .djmaze-global-nav, body.woocommerce-shop #djmaze-site .djmaze-global-nav { z-index: 2147483000 !important; isolation: isolate !important; transform: translateZ(0) !important; } body #djmaze-site .djmaze-global-nav.is-scrolled { z-index: 2147483000 !important; } /* Keep page content safely below the fixed nav stack. */ body #djmaze-site .biography-hero-v3__content, body #djmaze-site .discography-hero-v2__content, body #djmaze-site .maze-shop-hero-v2__content, body #djmaze-site .maze-bio-simple-main, body #djmaze-site .maze-full-discography, body #djmaze-site .maze-wc-archive, body #djmaze-site .maze-gallery-page-slider-main { z-index: 5 !important; } /* ---------------- BIOGRAPHIE PAGE: blue identity, tighter typography ---------------- */ body #djmaze-site.maze-bio-page-wrap, body #djmaze-site.maze-bio-page-wrap.maze-bio-page-simple { background: radial-gradient(circle at 15% 18%, rgba(0,212,255,.20), transparent 32%), radial-gradient(circle at 86% 42%, rgba(31,111,255,.16), transparent 30%), linear-gradient(180deg, #020711 0%, #051226 44%, #020711 100%) !important; color: #ffffff !important; } body #djmaze-site.maze-bio-page-wrap .biography-hero-v3__overlay { background: linear-gradient(90deg, rgba(2,7,17,.96) 0%, rgba(2,7,17,.90) 33%, rgba(2,12,28,.52) 62%, rgba(2,12,28,.16) 100%), radial-gradient(circle at 82% 28%, rgba(0,212,255,.28), transparent 24%), radial-gradient(circle at 22% 74%, rgba(31,111,255,.24), transparent 28%) !important; } body #djmaze-site.maze-bio-page-wrap .biography-hero-v3__divider, body #djmaze-site.maze-bio-page-wrap .maze-blue-highlight { color: #00d4ff !important; background: linear-gradient(90deg, #00d4ff, #6eb0ff) !important; box-shadow: 0 0 30px rgba(0,212,255,.28) !important; } body #djmaze-site.maze-bio-page-wrap .biography-hero-v3__eyebrow, body #djmaze-site.maze-bio-page-wrap .maze-kicker, body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-sections article span { color: #00d4ff !important; text-shadow: 0 0 22px rgba(0,212,255,.35) !important; } body #djmaze-site.maze-bio-page-wrap .biography-hero-v3 h1, body #djmaze-site.maze-bio-page-wrap .biography-hero-v3 h2, body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-main h2, body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-main h3, body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-quote blockquote { font-family: 'Orbitron', 'Inter', sans-serif !important; letter-spacing: .035em !important; text-transform: uppercase !important; } /* Body main headline reduced: readable and controlled on two lines. */ body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-copy { max-width: 720px !important; } body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-copy h2 { max-width: 660px !important; font-size: clamp(30px, 3.15vw, 48px) !important; line-height: 1.12 !important; letter-spacing: .02em !important; margin-bottom: 24px !important; } /* Four biography cards: force one-line titles. */ body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-sections { gap: 16px !important; } body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-sections article { border-color: rgba(0,212,255,.16) !important; background: radial-gradient(circle at 18% 10%, rgba(0,212,255,.10), transparent 34%), linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.028)) !important; box-shadow: 0 28px 95px rgba(0,8,20,.30), inset 0 1px 0 rgba(255,255,255,.08) !important; } body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-sections article h3 { font-size: clamp(15px, 1.18vw, 20px) !important; line-height: 1.1 !important; white-space: nowrap !important; letter-spacing: .02em !important; margin-bottom: 14px !important; } body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-sections article p, body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-copy p { color: rgba(255,255,255,.76) !important; } /* Quote smaller and locked to one line on desktop. */ body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-quote { border-color: rgba(0,212,255,.18) !important; background: radial-gradient(circle at 14% 10%, rgba(0,212,255,.12), transparent 34%), linear-gradient(135deg, rgba(0,212,255,.08), rgba(255,255,255,.035)) !important; } body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-quote blockquote { font-size: clamp(21px, 2.35vw, 36px) !important; line-height: 1.12 !important; white-space: nowrap !important; letter-spacing: .02em !important; text-shadow: 0 0 28px rgba(0,212,255,.22) !important; } body #djmaze-site.maze-bio-page-wrap .biography-hero-v3__btn--primary { background: linear-gradient(135deg, #00d4ff, #1f6fff) !important; color: #02101f !important; box-shadow: 0 22px 54px rgba(0, 212, 255, .28) !important; } body #djmaze-site.maze-bio-page-wrap .biography-hero-v3__btn--ghost { border-bottom-color: rgba(0,212,255,.88) !important; color: #eaf9ff !important; } @media (max-width: 1120px) { body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-sections article h3 { white-space: normal !important; font-size: clamp(15px, 1.55vw, 18px) !important; } } @media (max-width: 760px) { body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-quote blockquote { white-space: normal !important; } } /* ---------------- DISCOGRAPHIE PAGE: Orbitron body and light page after hero ---------------- */ body #djmaze-site.maze-discography-page, body #djmaze-site.maze-discography-page-hero-wide { background: radial-gradient(circle at 16% 16%, rgba(0,212,255,.10), transparent 34%), radial-gradient(circle at 86% 32%, rgba(31,111,255,.08), transparent 30%), linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%) !important; color: #09050f !important; } body #djmaze-site.maze-discography-page .discography-hero-v2 { margin-bottom: 0 !important; } body #djmaze-site.maze-discography-page .maze-full-discography { width: min(1320px, calc(100% - 52px)) !important; padding: clamp(70px, 7vw, 112px) 0 130px !important; background: transparent !important; } body #djmaze-site.maze-discography-page .maze-discography-category { border-top: 1px solid rgba(5,18,38,.10) !important; } body #djmaze-site.maze-discography-page .maze-category-title-row .maze-kicker, body #djmaze-site.maze-discography-page .maze-category-title-row span { color: rgba(0,91,155,.62) !important; font-family: 'Orbitron', 'Inter', sans-serif !important; } body #djmaze-site.maze-discography-page .maze-category-title-row h2, body #djmaze-site.maze-discography-page .maze-release-card strong, body #djmaze-site.maze-discography-page .maze-empty-discography { font-family: 'Orbitron', 'Inter', sans-serif !important; text-transform: uppercase !important; letter-spacing: .03em !important; } body #djmaze-site.maze-discography-page .maze-category-title-row h2 { color: #07040d !important; font-size: clamp(24px, 2.65vw, 42px) !important; line-height: 1.08 !important; } body #djmaze-site.maze-discography-page .maze-release-card strong { color: #07040d !important; font-size: clamp(10px, .72vw, 13px) !important; line-height: 1.28 !important; margin-top: 12px !important; } body #djmaze-site.maze-discography-page .maze-release-art, body #djmaze-site.maze-discography-page .maze-feature-cover-img { background: #ffffff !important; box-shadow: 0 22px 60px rgba(7, 28, 55, .12) !important; } body #djmaze-site.maze-discography-page .maze-release-art::after, body #djmaze-site.maze-discography-page .maze-feature-cover-img::after { border-color: rgba(5,18,38,.08) !important; } body #djmaze-site.maze-discography-page .discography-hero-v2__copy h1, body #djmaze-site.maze-discography-page .discography-hero-v2__copy h2, body #djmaze-site.maze-discography-page .discography-hero-v2__eyebrow, body #djmaze-site.maze-discography-page .discography-hero-v2__btn, body #djmaze-site.maze-discography-page .discography-hero-v2__player-meta { font-family: 'Orbitron', 'Inter', sans-serif !important; letter-spacing: .055em !important; } /* ---------------- PHOTOS PAGE: hero without buttons ---------------- */ body #djmaze-site.maze-photos-page-wrap .photos-hero-v3__actions, body #djmaze-site.maze-photos-page-wrap .biography-hero-v3__actions { display: none !important; } /* ---------------- SHOP PAGE: light body, Orbitron hero and premium products ---------------- */ body.woocommerce-shop, body.woocommerce-page, body #djmaze-site.maze-shop-page-v2 { background: radial-gradient(circle at 16% 12%, rgba(0,212,255,.10), transparent 32%), radial-gradient(circle at 86% 30%, rgba(31,111,255,.07), transparent 30%), linear-gradient(180deg, #ffffff 0%, #f8faff 100%) !important; color: #09050f !important; } body #djmaze-site.maze-shop-page-v2 .maze-shop-hero-v2 { margin-bottom: 0 !important; } body #djmaze-site.maze-shop-page-v2 .maze-shop-hero-v2__title-dj, body #djmaze-site.maze-shop-page-v2 .maze-shop-hero-v2__title-maze, body #djmaze-site.maze-shop-page-v2 .maze-shop-hero-v2__description, body #djmaze-site.maze-shop-page-v2 .maze-shop-hero-v2__knowmore, body #djmaze-site.maze-shop-page-v2 .maze-shop-hero-v2__showreel-link { font-family: 'Orbitron', 'Inter', sans-serif !important; letter-spacing: .055em !important; text-transform: uppercase !important; } body #djmaze-site.maze-shop-page-v2 .maze-wc-archive { width: min(1360px, calc(100% - 52px)) !important; margin: 0 auto !important; padding: clamp(72px, 7vw, 112px) 0 132px !important; background: transparent !important; color: #09050f !important; } body #djmaze-site.maze-shop-page-v2 .woocommerce-result-count, body #djmaze-site.maze-shop-page-v2 .woocommerce-ordering, body #djmaze-site.maze-shop-page-v2 .woocommerce-notices-wrapper, body #djmaze-site.maze-shop-page-v2 .woocommerce-info { color: rgba(7,4,13,.66) !important; font-family: 'Inter', sans-serif !important; } body #djmaze-site.maze-shop-page-v2 ul.products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: clamp(16px, 1.6vw, 24px) !important; margin: 34px 0 0 !important; padding: 0 !important; } body #djmaze-site.maze-shop-page-v2 ul.products li.product, body #djmaze-site.maze-shop-page-v2 .maze-wc-card { position: relative !important; list-style: none !important; margin: 0 !important; padding: 14px 14px 18px !important; border-radius: 24px !important; border: 1px solid rgba(7, 28, 55, .08) !important; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,255,.94)) !important; color: #09050f !important; box-shadow: 0 22px 70px rgba(7, 28, 55, .10) !important; overflow: hidden !important; transition: transform .28s ease, box-shadow .28s ease !important; } body #djmaze-site.maze-shop-page-v2 ul.products li.product:hover, body #djmaze-site.maze-shop-page-v2 .maze-wc-card:hover { transform: translateY(-7px) !important; box-shadow: 0 34px 100px rgba(7, 28, 55, .16), 0 18px 55px rgba(0,212,255,.09) !important; } body #djmaze-site.maze-shop-page-v2 .maze-wc-img { width: 100% !important; aspect-ratio: 1 / 1 !important; border-radius: 18px !important; overflow: hidden !important; display: block !important; background: radial-gradient(circle at 50% 25%, rgba(0,212,255,.08), transparent 40%), #eef4fb !important; border: 1px solid rgba(7, 28, 55, .06) !important; } body #djmaze-site.maze-shop-page-v2 .maze-wc-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 18px !important; } body #djmaze-site.maze-shop-page-v2 .woocommerce-loop-product__title, body #djmaze-site.maze-shop-page-v2 .maze-wc-card h2, body #djmaze-site.maze-shop-page-v2 .maze-wc-card h3 { color: #07040d !important; font-family: 'Orbitron', 'Inter', sans-serif !important; font-size: clamp(13px, .88vw, 16px) !important; line-height: 1.3 !important; letter-spacing: .025em !important; text-transform: uppercase !important; margin: 16px 0 8px !important; } body #djmaze-site.maze-shop-page-v2 .price, body #djmaze-site.maze-shop-page-v2 .price span, body #djmaze-site.maze-shop-page-v2 .woocommerce-Price-amount { color: #005b9b !important; font-family: 'Orbitron', 'Inter', sans-serif !important; font-weight: 900 !important; } body #djmaze-site.maze-shop-page-v2 .maze-wc-card .button, body #djmaze-site.maze-shop-page-v2 ul.products li.product .button, body #djmaze-site.maze-shop-page-v2 .woocommerce a.button { width: 100% !important; min-height: 46px !important; border-radius: 999px !important; border: 0 !important; background: linear-gradient(135deg, #00d4ff, #1f6fff) !important; color: #02101f !important; font-family: 'Orbitron', 'Inter', sans-serif !important; font-size: 10px !important; letter-spacing: .12em !important; font-weight: 900 !important; box-shadow: 0 18px 42px rgba(0, 114, 255, .22) !important; } /* Pagination buttons fixed and modern. */ body #djmaze-site.maze-shop-page-v2 nav.woocommerce-pagination, body #djmaze-site.maze-shop-page-v2 .woocommerce-pagination { display: flex !important; justify-content: center !important; width: 100% !important; margin: 48px auto 0 !important; clear: both !important; } body #djmaze-site.maze-shop-page-v2 nav.woocommerce-pagination ul, body #djmaze-site.maze-shop-page-v2 .woocommerce-pagination ul { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin: 0 !important; padding: 10px !important; border: 0 !important; border-radius: 999px !important; background: rgba(7, 28, 55, .06) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.70) !important; } body #djmaze-site.maze-shop-page-v2 nav.woocommerce-pagination ul li, body #djmaze-site.maze-shop-page-v2 .woocommerce-pagination ul li { border: 0 !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } body #djmaze-site.maze-shop-page-v2 nav.woocommerce-pagination a, body #djmaze-site.maze-shop-page-v2 nav.woocommerce-pagination span, body #djmaze-site.maze-shop-page-v2 .woocommerce-pagination a, body #djmaze-site.maze-shop-page-v2 .woocommerce-pagination span { display: grid !important; place-items: center !important; min-width: 42px !important; height: 42px !important; padding: 0 13px !important; border-radius: 999px !important; color: #07040d !important; background: #ffffff !important; font-family: 'Orbitron', 'Inter', sans-serif !important; font-size: 12px !important; font-weight: 900 !important; text-decoration: none !important; box-shadow: 0 10px 26px rgba(7, 28, 55, .08) !important; } body #djmaze-site.maze-shop-page-v2 nav.woocommerce-pagination span.current, body #djmaze-site.maze-shop-page-v2 .woocommerce-pagination span.current, body #djmaze-site.maze-shop-page-v2 nav.woocommerce-pagination a:hover, body #djmaze-site.maze-shop-page-v2 .woocommerce-pagination a:hover { background: linear-gradient(135deg, #00d4ff, #1f6fff) !important; color: #02101f !important; } @media (max-width: 1120px) { body #djmaze-site.maze-shop-page-v2 ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 840px) { body #djmaze-site.maze-shop-page-v2 ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 560px) { body #djmaze-site.maze-shop-page-v2 .maze-wc-archive { width: min(100% - 28px, 1360px) !important; } body #djmaze-site.maze-shop-page-v2 ul.products { grid-template-columns: 1fr !important; } } /* === Biography black body + shop French correction final === */ /* Biography body must remain black, not blue gradient. */ body #djmaze-site.maze-bio-page-wrap, body #djmaze-site.maze-bio-page-wrap.maze-bio-page-simple, body #djmaze-site.maze-bio-page-hero-wide .maze-bio-simple-main { background: #000000 !important; color: #ffffff !important; } body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-main { background: #000000 !important; } /* Keep biography cards premium black with blue accents only. */ body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-sections article, body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-stats article, body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-quote { background: linear-gradient(180deg, rgba(255,255,255,.070), rgba(255,255,255,.025)) !important; border-color: rgba(255,255,255,.10) !important; box-shadow: 0 26px 90px rgba(0,0,0,.38) !important; } /* Stats: only the numbers are blue. */ body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-stats article span { color: #00d4ff !important; background: transparent !important; -webkit-text-fill-color: #00d4ff !important; text-shadow: 0 0 26px rgba(0,212,255,.35) !important; } body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-stats article h3 { color: rgba(255,255,255,.88) !important; background: transparent !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; } /* Inline highlights: only the text itself is blue, no blue background. */ body #djmaze-site.maze-bio-page-wrap .maze-blue-highlight, body #djmaze-site.maze-bio-page-wrap strong.maze-blue-highlight { color: #00d4ff !important; background: transparent !important; background-image: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: #00d4ff !important; box-shadow: none !important; text-shadow: 0 0 22px rgba(0,212,255,.28) !important; padding: 0 !important; border-radius: 0 !important; } /* Keep the rest of biography copy normal white/grey. */ body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-copy p, body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-sections article p { color: rgba(255,255,255,.76) !important; } body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-copy h2, body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-sections article h3, body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-quote blockquote { color: #ffffff !important; } /* Shop hero French text button consistency. */ body #djmaze-site.maze-shop-page-v2 .maze-shop-hero-v2__description { max-width: 620px !important; line-height: 1.65 !important; } body #djmaze-site.maze-shop-page-v2 .maze-shop-hero-v2__knowmore, body #djmaze-site.maze-shop-page-v2 .maze-shop-hero-v2__showreel-link { font-family: 'Orbitron', 'Inter', sans-serif !important; } /* === Biography final cleanup: black body, blue numbers, nav above all === */ html body #djmaze-site.maze-bio-page-wrap, html body #djmaze-site.maze-bio-page-wrap.maze-bio-page-simple, html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-main, html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-main > section { background: #000000 !important; background-color: #000000 !important; background-image: none !important; } html body #djmaze-site.maze-bio-page-wrap::before, html body #djmaze-site.maze-bio-page-wrap::after, html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-main::before, html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-main::after, html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-intro::before, html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-intro::after, html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-stats::before, html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-stats::after, html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-sections::before, html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-sections::after, html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-quote::before, html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-quote::after { display: none !important; content: none !important; background: none !important; background-image: none !important; box-shadow: none !important; } html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-stats article, html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-sections article, html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-quote { background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.024)) !important; border-color: rgba(255,255,255,.10) !important; box-shadow: 0 28px 90px rgba(0,0,0,.44) !important; } html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-stats article span { font-family: 'Orbitron', 'Inter', sans-serif !important; color: #00d4ff !important; -webkit-text-fill-color: #00d4ff !important; background: transparent !important; background-image: none !important; text-shadow: 0 0 10px rgba(0,212,255,.72), 0 0 24px rgba(0,212,255,.42), 0 0 42px rgba(0,128,255,.28) !important; letter-spacing: .045em !important; } html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-stats article h3 { color: rgba(255,255,255,.88) !important; -webkit-text-fill-color: rgba(255,255,255,.88) !important; background: transparent !important; background-image: none !important; text-shadow: none !important; } html body #djmaze-site.maze-bio-page-wrap strong.maze-blue-highlight, html body #djmaze-site.maze-bio-page-wrap .maze-blue-highlight { color: #00d4ff !important; -webkit-text-fill-color: #00d4ff !important; background: transparent !important; background-image: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; text-shadow: 0 0 18px rgba(0,212,255,.34) !important; } html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-copy h2 { font-size: clamp(26px, 2.65vw, 40px) !important; line-height: 1.14 !important; max-width: 700px !important; width: 100% !important; letter-spacing: .018em !important; white-space: normal !important; } html body .djmaze-global-nav, html body #djmaze-site .djmaze-global-nav, html body #djmaze-site .djmaze-global-nav.is-scrolled, html body:not(.home) .djmaze-global-nav, html body:not(.front-page) .djmaze-global-nav, html body.woocommerce-page .djmaze-global-nav, html body.woocommerce-shop .djmaze-global-nav { position: fixed !important; z-index: 2147483647 !important; isolation: isolate !important; transform: translateZ(0) !important; will-change: transform !important; } html body #djmaze-site .biography-hero-v3, html body #djmaze-site .discography-hero-v2, html body #djmaze-site .maze-shop-hero-v2 { overflow: visible !important; z-index: 2147483000 !important; } html body #djmaze-site .biography-hero-v3__content, html body #djmaze-site .discography-hero-v2__content, html body #djmaze-site .maze-shop-hero-v2__content, html body #djmaze-site .maze-bio-simple-main, html body #djmaze-site .maze-full-discography, html body #djmaze-site .maze-wc-archive, html body #djmaze-site main, html body #djmaze-site section.panel { z-index: 1 !important; } html body #djmaze-site.maze-shop-page-v2 .maze-shop-hero-v2__description { font-size: clamp(11px, .82vw, 14px) !important; line-height: 1.62 !important; max-width: 560px !important; letter-spacing: .035em !important; } @media (max-width: 760px) { html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-copy h2 { font-size: clamp(24px, 7vw, 34px) !important; line-height: 1.16 !important; } html body #djmaze-site.maze-shop-page-v2 .maze-shop-hero-v2__description { font-size: 12px !important; max-width: 100% !important; } } /* === Biography 01 02 03 04 clean Orbitron numbers === */ html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-sections article > span, html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-sections article span { display: inline-block !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 0 18px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; font-family: 'Orbitron', 'Inter', sans-serif !important; font-size: clamp(17px, 1.25vw, 24px) !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: .12em !important; color: #00d4ff !important; -webkit-text-fill-color: #00d4ff !important; text-shadow: 0 0 10px rgba(0,212,255,.68), 0 0 24px rgba(0,212,255,.36) !important; } /* Remove any purple circle created by pseudo-elements behind 01, 02, 03, 04. */ html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-sections article > span::before, html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-sections article > span::after, html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-sections article span::before, html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-sections article span::after { display: none !important; content: none !important; width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } /* Remove purple decorative circles from the four biography cards themselves. */ html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-sections article::before, html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-sections article::after { display: none !important; content: none !important; background: transparent !important; background-image: none !important; box-shadow: none !important; } /* Keep card design clean and black, without purple circular glow. */ html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-sections article { background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.024)) !important; border-color: rgba(255,255,255,.10) !important; box-shadow: 0 28px 90px rgba(0,0,0,.44) !important; } /* === Biography Parcours officiel blue final === */ html body #djmaze-site.maze-bio-page-wrap .maze-bio-simple-copy .maze-kicker { color: #00d4ff !important; -webkit-text-fill-color: #00d4ff !important; font-family: 'Orbitron', 'Inter', sans-serif !important; text-shadow: 0 0 10px rgba(0,212,255,.62), 0 0 24px rgba(0,212,255,.30) !important; background: transparent !important; background-image: none !important; box-shadow: none !important; } /* === Footer Orbitron title + video cover/no controls + shop cutout update === */ html body .maze-footer-video { position: relative !important; min-height: clamp(520px, 54vw, 760px) !important; overflow: hidden !important; display: grid !important; place-items: center !important; background: #000000 !important; isolation: isolate !important; } html body .maze-footer-bg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; z-index: 0 !important; background: #000000 !important; pointer-events: none !important; } /* Make YouTube iframe behave like background-size: cover and crop player UI edges. */ html body .maze-footer-bg iframe { position: absolute !important; top: 50% !important; left: 50% !important; width: max(120vw, 177.78vh) !important; height: max(120vh, 56.25vw) !important; min-width: 100% !important; min-height: 100% !important; transform: translate(-50%, -50%) scale(1.22) !important; transform-origin: center center !important; border: 0 !important; outline: 0 !important; pointer-events: none !important; user-select: none !important; filter: saturate(.95) contrast(1.08) brightness(.82) !important; } /* Extra dark masks crop any YouTube controls/play/next/previous icons if they appear on edges. */ html body .maze-footer-bg::before, html body .maze-footer-bg::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; z-index: 2 !important; pointer-events: none !important; } html body .maze-footer-bg::before { top: 0 !important; height: 78px !important; background: linear-gradient(180deg, rgba(0,0,0,.84), rgba(0,0,0,0)) !important; } html body .maze-footer-bg::after { bottom: 0 !important; height: 120px !important; background: linear-gradient(0deg, rgba(0,0,0,.92), rgba(0,0,0,0)) !important; } html body .maze-footer-overlay { position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; background: radial-gradient(circle at center, rgba(0, 212, 255, .14), transparent 36%), linear-gradient(180deg, rgba(0,0,0,.46), rgba(0,0,0,.82)) !important; } html body .maze-footer-content { position: relative !important; z-index: 5 !important; text-align: center !important; } html body .maze-footer-content h2 { font-family: 'Orbitron', 'Inter', sans-serif !important; font-weight: 800 !important; letter-spacing: .055em !important; text-transform: uppercase !important; color: #ffffff !important; text-shadow: 0 0 18px rgba(0,212,255,.38), 0 22px 90px rgba(0,0,0,.65) !important; } @media (max-width: 760px) { html body .maze-footer-video { min-height: 520px !important; } html body .maze-footer-bg iframe { width: 220vw !important; height: 124vw !important; min-height: 100% !important; transform: translate(-50%, -50%) scale(1.32) !important; } } /* === Home hero MP4 background contained content overlay final === */ /* The MP4 replaces only the old background-image layer. It does not change the menu/text/widget layout. */ html body #djmaze-site.djmaze-home-site .djmaze-wp-hero { position: relative !important; overflow: hidden !important; } /* Keep the same background layer behavior as the original image, but remove all zoom/mouse effects. */ html body #djmaze-site.djmaze-home-site .djmaze-wp-hero > .background.hero-video-bg, html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .background.hero-video-bg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #05020a !important; background-image: none !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; filter: none !important; transition: none !important; animation: none !important; will-change: auto !important; pointer-events: none !important; z-index: 0 !important; } html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .background.hero-video-bg video.hero-background-video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; object-position: center center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; filter: none !important; transition: none !important; animation: none !important; pointer-events: none !important; } html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .background.hero-video-bg::before, html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .background.hero-video-bg::after { display: none !important; content: none !important; } /* Correct the previous issue: content must keep its original positioning, only raise its layer above the video. */ html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .frame { position: relative !important; z-index: 5 !important; background: transparent !important; } html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .djmaze-global-nav, html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .nav { z-index: 99999 !important; } html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .hero-content { position: absolute !important; inset: 0 !important; z-index: 10 !important; } html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .side-widgets, html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .copy-block { position: relative !important; z-index: 11 !important; } html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .stats { position: absolute !important; z-index: 12 !important; } html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .grain, html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .aurora { pointer-events: none !important; } /* === Photos hero background image replaced final === */ body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .biography-hero-v3__bg, body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .photos-hero-v3__bg, body #djmaze-site.maze-photos-page-biohero .photos-hero-v3__bg { background-image: url("assets/images/photos/djmaze-photo-hero-2.jpg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* === Mobile homepage hero stats and certification title final === */ /* Desktop keeps the original stats box. The duplicate stats-mobile is only for phones, placed before the buttons. */ #djmaze-site.djmaze-home-site .djmaze-wp-hero .stats-mobile { display: none !important; } @media (max-width: 760px) { html body #djmaze-site.djmaze-home-site .djmaze-wp-hero { min-height: 100svh !important; height: auto !important; overflow: hidden !important; } html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .frame { min-height: 100svh !important; height: auto !important; overflow: hidden !important; } /* Keep the hero content organized below the mobile menu. */ html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .hero-content { position: relative !important; inset: auto !important; display: block !important; padding: 150px 24px 78px !important; z-index: 10 !important; } html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .copy-block { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .eyebrow { display: block !important; margin: 0 0 22px !important; max-width: 100% !important; font-size: clamp(9px, 2.55vw, 11px) !important; line-height: 1.45 !important; letter-spacing: .17em !important; } html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .copy-block h1, html body #djmaze-site.djmaze-home-site .djmaze-wp-hero h1 { margin: 0 0 18px !important; font-size: clamp(54px, 15.2vw, 74px) !important; line-height: .88 !important; letter-spacing: -.08em !important; white-space: nowrap !important; } html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .hero-slogan { margin: 0 0 24px !important; font-size: clamp(18px, 5.35vw, 25px) !important; line-height: 1.08 !important; } html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .intro { width: 100% !important; max-width: 100% !important; margin: 0 0 0 !important; font-size: clamp(15px, 4.15vw, 18px) !important; line-height: 1.42 !important; } /* Hide the old absolute/desktop stats on mobile so it does not jump above the menu/text. */ html body #djmaze-site.djmaze-home-site .djmaze-wp-hero > .frame > .stats, html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .frame > .stats { display: none !important; } /* Centered stats box before the buttons. */ html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .stats-mobile { position: relative !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: min(100%, 430px) !important; max-width: 430px !important; margin: 26px auto 24px !important; padding: 16px 14px !important; gap: 0 !important; left: auto !important; right: auto !important; bottom: auto !important; z-index: 12 !important; border-radius: 18px !important; overflow: hidden !important; align-items: center !important; } html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .stats-mobile div { display: grid !important; grid-template-columns: 27px 1fr !important; grid-template-rows: auto auto !important; align-items: center !important; min-width: 0 !important; padding: 12px 10px !important; border-right: 1px solid rgba(199,190,255,.16) !important; } html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .stats-mobile div:nth-child(2n), html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .stats-mobile div:last-child { border-right: 0 !important; } html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .stats-mobile .stat-icon { grid-row: 1 / 3 !important; width: 21px !important; height: 21px !important; } html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .stats-mobile strong { font-size: 14px !important; line-height: 1 !important; letter-spacing: .12em !important; white-space: nowrap !important; } html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .stats-mobile small { font-size: 8px !important; line-height: 1.2 !important; letter-spacing: .16em !important; white-space: nowrap !important; } html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .actions { display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; margin: 0 !important; width: 100% !important; } html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .btn, html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .btn.primary, html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .btn.ghost { width: 100% !important; min-width: 0 !important; justify-content: center !important; } html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .side-widgets, html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .scroll-cue { display: none !important; } /* Certifications title: force one line on mobile and reduce enough to fit. */ body #djmaze-site.djmaze-home-site section#certifications .maze-cert-subtle-head h2, body #djmaze-site.djmaze-home-site section#certifications h2 { display: block !important; width: 100% !important; max-width: 100% !important; white-space: nowrap !important; font-size: clamp(14px, 3.6vw, 20px) !important; line-height: 1.05 !important; letter-spacing: -.02em !important; text-align: center !important; } } @media (max-width: 380px) { html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .hero-content { padding-left: 18px !important; padding-right: 18px !important; } html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .stats-mobile { padding: 14px 10px !important; } body #djmaze-site.djmaze-home-site section#certifications .maze-cert-subtle-head h2, body #djmaze-site.djmaze-home-site section#certifications h2 { font-size: 13px !important; letter-spacing: -.04em !important; } } /* === Mobile hamburger menu for homepage final === */ /* Desktop: keep the original full menu. */ .mobile-menu-toggle { display: none !important; } @media (max-width: 920px) { /* Mobile header overlay: brand on the left, hamburger on the right. */ html body #djmaze-site .djmaze-global-nav, html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .djmaze-global-nav, html body #djmaze-site .nav.djmaze-global-nav { position: absolute !important; top: max(18px, env(safe-area-inset-top)) !important; left: 18px !important; right: 18px !important; width: auto !important; height: 58px !important; min-height: 58px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; grid-template-columns: none !important; gap: 16px !important; padding: 0 14px !important; margin: 0 !important; border-radius: 18px !important; border: 1px solid rgba(210,200,255,.20) !important; background: rgba(7, 8, 25, .72) !important; box-shadow: 0 20px 56px rgba(0,0,0,.26) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; z-index: 999999 !important; overflow: visible !important; } body.admin-bar html body #djmaze-site .djmaze-global-nav, body.admin-bar #djmaze-site .djmaze-global-nav, body.admin-bar #djmaze-site.djmaze-home-site .djmaze-wp-hero .djmaze-global-nav { top: calc(46px + max(12px, env(safe-area-inset-top))) !important; } html body #djmaze-site .djmaze-global-nav .brand { display: flex !important; flex: 1 1 auto !important; min-width: 0 !important; align-items: center !important; gap: 12px !important; font-size: 10px !important; letter-spacing: .38em !important; white-space: nowrap !important; overflow: hidden !important; z-index: 2 !important; } html body #djmaze-site .djmaze-global-nav .logo-mark { width: 32px !important; height: 32px !important; flex: 0 0 32px !important; } html body #djmaze-site .djmaze-global-nav .nav-actions { display: none !important; } html body #djmaze-site .djmaze-global-nav .mobile-menu-toggle { appearance: none !important; -webkit-appearance: none !important; display: grid !important; flex: 0 0 46px !important; width: 46px !important; height: 42px !important; place-items: center !important; gap: 5px !important; padding: 10px !important; margin: 0 !important; border-radius: 14px !important; border: 1px solid rgba(210,200,255,.28) !important; background: rgba(255,255,255,.055) !important; color: #ffffff !important; cursor: pointer !important; z-index: 3 !important; } html body #djmaze-site .djmaze-global-nav .mobile-menu-toggle span { display: block !important; width: 20px !important; height: 2px !important; border-radius: 99px !important; background: rgba(255,255,255,.92) !important; box-shadow: 0 0 12px rgba(159,99,255,.42) !important; transition: transform .25s ease, opacity .25s ease !important; } html body #djmaze-site .djmaze-global-nav.is-menu-open .mobile-menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; } html body #djmaze-site .djmaze-global-nav.is-menu-open .mobile-menu-toggle span:nth-child(2) { opacity: 0 !important; } html body #djmaze-site .djmaze-global-nav.is-menu-open .mobile-menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; } /* Dropdown drawer. It overlays the video/hero and does not push or resize the hero section. */ html body #djmaze-site .djmaze-global-nav .nav-links, html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .djmaze-global-nav .nav-links { position: absolute !important; top: calc(100% + 12px) !important; left: 0 !important; right: 0 !important; display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; width: 100% !important; max-height: 0 !important; padding: 0 18px !important; margin: 0 !important; border-radius: 18px !important; border: 1px solid rgba(210,200,255,.18) !important; background: rgba(5, 6, 20, .94) !important; box-shadow: 0 28px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; overflow: hidden !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(-8px) !important; transition: opacity .24s ease, transform .24s ease, max-height .28s ease, padding .24s ease, visibility .24s ease !important; z-index: 999999 !important; justify-self: auto !important; } html body #djmaze-site .djmaze-global-nav.is-menu-open .nav-links, html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .djmaze-global-nav.is-menu-open .nav-links { max-height: 520px !important; padding: 12px 18px !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; } html body #djmaze-site .djmaze-global-nav .nav-links a { display: block !important; width: 100% !important; padding: 15px 4px !important; border-bottom: 1px solid rgba(210,200,255,.12) !important; color: rgba(255,255,255,.90) !important; font-size: 11px !important; line-height: 1 !important; letter-spacing: .34em !important; text-align: left !important; transform: none !important; } html body #djmaze-site .djmaze-global-nav .nav-links a:last-child { border-bottom: 0 !important; } html body #djmaze-site .djmaze-global-nav .nav-links a::after { display: none !important; } /* Keep homepage hero content below the mobile header, not under it. */ html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .hero-content { padding-top: 132px !important; } } @media (max-width: 380px) { html body #djmaze-site .djmaze-global-nav, html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .djmaze-global-nav { left: 14px !important; right: 14px !important; padding: 0 12px !important; } html body #djmaze-site .djmaze-global-nav .brand { font-size: 9px !important; letter-spacing: .32em !important; } } /* === Mobile inner hero background and Instagram icon fixes final === */ /* Home hero Instagram: keep the link working but force only the SVG icon to show, never the raw URL text. */ html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .socials a[aria-label="Instagram"], html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .socials a.maze-instagram-hero-link { font-size: 0 !important; line-height: 0 !important; text-indent: 0 !important; overflow: hidden !important; color: rgba(242,235,255,.86) !important; } html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .socials a[aria-label="Instagram"] svg, html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .socials a.maze-instagram-hero-link svg, html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .socials a[aria-label="Instagram"] .maze-instagram-svg { display: block !important; width: 22px !important; height: 22px !important; opacity: 1 !important; visibility: visible !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .socials a[aria-label="Instagram"] svg rect, html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .socials a[aria-label="Instagram"] svg circle, html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .socials a.maze-instagram-hero-link svg rect, html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .socials a.maze-instagram-hero-link svg circle { fill: none !important; stroke: currentColor !important; } @media (max-width: 920px) { /* Biographie page hero: keep subject/face visible on mobile by showing more of the right side. */ html body #djmaze-site.maze-bio-page-hero-wide .biography-hero-v3__bg, html body #djmaze-site.maze-bio-page-wrap .biography-hero-v3__bg { background-size: cover !important; background-position: 64% center !important; background-repeat: no-repeat !important; } /* Photos page uses the Biographie hero structure too; mobile crop adjusted separately. */ html body #djmaze-site.maze-photos-page-wrap .photos-hero-biography-clone .biography-hero-v3__bg, html body #djmaze-site.maze-photos-page-wrap .photos-hero-biography-clone .photos-hero-v3__bg, html body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .biography-hero-v3__bg, html body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .photos-hero-v3__bg { background-size: cover !important; background-position: 68% center !important; background-repeat: no-repeat !important; } /* Discographie hero mobile background: same crop logic as Biographie, face/subject visible. */ html body #djmaze-site.maze-discography-page .discography-hero-v2__bg, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__bg { background-size: cover !important; background-position: 64% center !important; background-repeat: no-repeat !important; } /* Discographie hero content: align to the page container on the left, not centered and not cut off. */ html body #djmaze-site.maze-discography-page .discography-hero-v2, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2 { min-height: 100svh !important; overflow: hidden !important; } html body #djmaze-site.maze-discography-page .discography-hero-v2__content, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__content { position: relative !important; display: block !important; min-height: 100svh !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; z-index: 5 !important; } html body #djmaze-site.maze-discography-page .discography-hero-v2__copy, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__copy { position: absolute !important; left: 24px !important; right: 24px !important; top: clamp(132px, 24svh, 190px) !important; bottom: auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; transform: none !important; text-align: left !important; z-index: 10 !important; box-sizing: border-box !important; } html body #djmaze-site.maze-discography-page .discography-hero-v2__copy *, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__copy * { text-align: left !important; } html body #djmaze-site.maze-discography-page .discography-hero-v2__eyebrow, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__eyebrow { margin-left: 0 !important; padding-left: 0 !important; font-size: 10px !important; letter-spacing: .28em !important; white-space: normal !important; } html body #djmaze-site.maze-discography-page .discography-hero-v2__copy h1, html body #djmaze-site.maze-discography-page .discography-hero-v2 h1, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__copy h1, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2 h1 { display: block !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; padding-left: 0 !important; font-size: clamp(48px, 15vw, 72px) !important; line-height: .92 !important; letter-spacing: -.04em !important; white-space: nowrap !important; text-align: left !important; } html body #djmaze-site.maze-discography-page .discography-hero-v2__copy h2, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__copy h2 { display: block !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; padding-left: 0 !important; font-size: clamp(10px, 3.1vw, 13px) !important; line-height: 1.35 !important; letter-spacing: .18em !important; white-space: normal !important; text-align: left !important; } html body #djmaze-site.maze-discography-page .discography-hero-v2__actions, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__actions { justify-content: flex-start !important; align-items: flex-start !important; text-align: left !important; gap: 12px !important; width: 100% !important; } /* Now Playing: contained and centered within the mobile viewport so no side is cut off. */ html body #djmaze-site.maze-discography-page .discography-hero-v2__player, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__player { position: absolute !important; left: 50% !important; right: auto !important; bottom: max(28px, env(safe-area-inset-bottom)) !important; width: calc(100vw - 48px) !important; max-width: 420px !important; min-width: 0 !important; margin: 0 !important; padding: 12px !important; transform: translateX(-50%) !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; gap: 12px !important; z-index: 9 !important; overflow: hidden !important; } html body #djmaze-site.maze-discography-page .discography-hero-v2__player-cover, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__player-cover { flex: 0 0 62px !important; width: 62px !important; height: 62px !important; min-width: 62px !important; } html body #djmaze-site.maze-discography-page .discography-hero-v2__player-meta, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__player-meta { min-width: 0 !important; flex: 1 1 auto !important; overflow: hidden !important; } html body #djmaze-site.maze-discography-page .discography-hero-v2__player-meta .label, html body #djmaze-site.maze-discography-page .discography-hero-v2__player-meta strong, html body #djmaze-site.maze-discography-page .discography-hero-v2__player-meta .artist, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__player-meta .label, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__player-meta strong, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__player-meta .artist { display: block !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } } @media (max-width: 420px) { html body #djmaze-site.maze-bio-page-hero-wide .biography-hero-v3__bg, html body #djmaze-site.maze-bio-page-wrap .biography-hero-v3__bg, html body #djmaze-site.maze-discography-page .discography-hero-v2__bg, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__bg { background-position: 67% center !important; } html body #djmaze-site.maze-photos-page-wrap .photos-hero-biography-clone .biography-hero-v3__bg, html body #djmaze-site.maze-photos-page-wrap .photos-hero-biography-clone .photos-hero-v3__bg, html body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .biography-hero-v3__bg, html body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .photos-hero-v3__bg { background-position: 72% center !important; } html body #djmaze-site.maze-discography-page .discography-hero-v2__copy, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__copy { left: 20px !important; right: 20px !important; } html body #djmaze-site.maze-discography-page .discography-hero-v2__player, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__player { width: calc(100vw - 40px) !important; } } /* === Mobile Biographie and Discographie hero content push-down final === */ @media (max-width: 920px) { /* Biographie: keep the content left-aligned, but move it lower so it does not cover the face. */ html body #djmaze-site.maze-bio-page-hero-wide .biography-hero-v3, html body #djmaze-site.maze-bio-page-wrap .biography-hero-v3 { min-height: 100svh !important; overflow: hidden !important; } html body #djmaze-site.maze-bio-page-hero-wide .biography-hero-v3__content, html body #djmaze-site.maze-bio-page-wrap .biography-hero-v3__content { min-height: 100svh !important; display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; padding-top: clamp(240px, 33svh, 330px) !important; padding-left: 24px !important; padding-right: 24px !important; padding-bottom: 80px !important; box-sizing: border-box !important; } html body #djmaze-site.maze-bio-page-hero-wide .biography-hero-v3__copy, html body #djmaze-site.maze-bio-page-wrap .biography-hero-v3__copy { margin-top: 0 !important; transform: none !important; } /* Discographie: keep the same left alignment, but start the text lower on mobile. */ html body #djmaze-site.maze-discography-page .discography-hero-v2__copy, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__copy { top: clamp(235px, 32svh, 325px) !important; left: 24px !important; right: 24px !important; transform: none !important; } } @media (max-width: 420px) { html body #djmaze-site.maze-bio-page-hero-wide .biography-hero-v3__content, html body #djmaze-site.maze-bio-page-wrap .biography-hero-v3__content { padding-top: clamp(255px, 35svh, 345px) !important; padding-left: 20px !important; padding-right: 20px !important; } html body #djmaze-site.maze-discography-page .discography-hero-v2__copy, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__copy { top: clamp(250px, 34svh, 340px) !important; left: 20px !important; right: 20px !important; } } /* === Footer Instagram icon fix final === */ html body .maze-footer-socials a[aria-label="DJ Maze instagram"] { font-size: 0 !important; line-height: 0 !important; color: #ffffff !important; } html body .maze-footer-socials a[aria-label="DJ Maze instagram"] svg { display: block !important; width: 22px !important; height: 22px !important; fill: currentColor !important; opacity: 1 !important; visibility: visible !important; } /* === Home hero new MP4 URL + dark certifications and videos final === */ /* Reconfirm: hero MP4 behaves like a normal background image, no controls, no zoom, no mouse effect. */ html body #djmaze-site.djmaze-home-site .djmaze-wp-hero > .background.hero-video-bg, html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .background.hero-video-bg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; background: #000000 !important; background-image: none !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; filter: none !important; transition: none !important; animation: none !important; pointer-events: none !important; z-index: 0 !important; } html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .background.hero-video-bg video.hero-background-video { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; filter: none !important; transition: none !important; animation: none !important; pointer-events: none !important; } /* Certifications section: premium black background. */ html body #djmaze-site.djmaze-home-site section#certifications, html body #djmaze-site.djmaze-home-site section#certifications.maze-certifications, html body #djmaze-site.djmaze-home-site section#certifications.maze-certifications-subtle, html body #djmaze-site.djmaze-home-site section#certifications.panel { width: 100% !important; max-width: none !important; margin: 0 !important; background: #000000 !important; background-image: radial-gradient(circle at 18% 22%, rgba(157,78,221,.16), transparent 30%), radial-gradient(circle at 82% 32%, rgba(0,212,255,.09), transparent 30%), linear-gradient(180deg, #000000 0%, #05020a 100%) !important; color: #ffffff !important; border: 0 !important; box-shadow: none !important; position: relative !important; overflow: hidden !important; } html body #djmaze-site.djmaze-home-site section#certifications::before { content: "" !important; position: absolute !important; inset: -24% !important; z-index: 0 !important; pointer-events: none !important; background: radial-gradient(circle at 22% 42%, rgba(157,78,221,.18), transparent 24%), radial-gradient(circle at 76% 35%, rgba(0,212,255,.10), transparent 24%) !important; filter: blur(18px) !important; animation: none !important; } html body #djmaze-site.djmaze-home-site section#certifications::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.74)) !important; } html body #djmaze-site.djmaze-home-site section#certifications .maze-cert-subtle-head, html body #djmaze-site.djmaze-home-site section#certifications .maze-cert-subtle-list, html body #djmaze-site.djmaze-home-site section#certifications .maze-kicker, html body #djmaze-site.djmaze-home-site section#certifications h2 { position: relative !important; z-index: 2 !important; } html body #djmaze-site.djmaze-home-site section#certifications .maze-cert-subtle-head h2, html body #djmaze-site.djmaze-home-site section#certifications h2 { color: #ffffff !important; text-shadow: 0 0 34px rgba(157,78,221,.35) !important; } html body #djmaze-site.djmaze-home-site section#certifications .maze-kicker { color: rgba(0,212,255,.95) !important; } html body #djmaze-site.djmaze-home-site section#certifications .maze-cert-subtle-list article { position: relative !important; z-index: 2 !important; background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025)) !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: 0 22px 70px rgba(0,0,0,.38) !important; } html body #djmaze-site.djmaze-home-site section#certifications .maze-cert-subtle-list strong { color: #ffffff !important; } html body #djmaze-site.djmaze-home-site section#certifications .maze-cert-subtle-list span { color: #00d4ff !important; } /* Videos section: black background again. */ html body #djmaze-site.djmaze-home-site section#videos, html body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-light-minimal, html body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-streaming, html body #djmaze-site.djmaze-home-site section#videos.panel { width: 100% !important; max-width: none !important; margin: 0 !important; background: #000000 !important; background-image: radial-gradient(circle at 16% 20%, rgba(157,78,221,.16), transparent 30%), radial-gradient(circle at 86% 34%, rgba(0,212,255,.09), transparent 30%), linear-gradient(180deg, #000000 0%, #05020a 100%) !important; color: #ffffff !important; border: 0 !important; box-shadow: none !important; position: relative !important; overflow: hidden !important; } html body #djmaze-site.djmaze-home-site section#videos::before { content: "" !important; position: absolute !important; inset: -24% !important; z-index: 0 !important; pointer-events: none !important; background: radial-gradient(circle at 24% 42%, rgba(157,78,221,.17), transparent 24%), radial-gradient(circle at 78% 36%, rgba(0,212,255,.10), transparent 24%) !important; filter: blur(18px) !important; animation: none !important; } html body #djmaze-site.djmaze-home-site section#videos::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.70)) !important; } html body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-shell, html body #djmaze-site.djmaze-home-site section#videos .maze-videos-streaming-shell, html body #djmaze-site.djmaze-home-site section#videos .maze-section-head, html body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-row, html body #djmaze-site.djmaze-home-site section#videos .maze-discography-more { position: relative !important; z-index: 2 !important; } html body #djmaze-site.djmaze-home-site section#videos .maze-kicker { color: rgba(0,212,255,.95) !important; } html body #djmaze-site.djmaze-home-site section#videos h2, html body #djmaze-site.djmaze-home-site section#videos h3, html body #djmaze-site.djmaze-home-site section#videos p { color: #ffffff !important; } html body #djmaze-site.djmaze-home-site section#videos .maze-section-head p { color: rgba(255,255,255,.72) !important; } html body #djmaze-site.djmaze-home-site section#videos .maze-video-card, html body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-card { background: rgba(255,255,255,.045) !important; border-color: rgba(255,255,255,.10) !important; box-shadow: 0 22px 70px rgba(0,0,0,.36) !important; } html body #djmaze-site.djmaze-home-site section#videos .maze-video-card h3, html body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-card h3 { color: #ffffff !important; } /* === Home section title gradient lines + 9 video grid + dark photos final === */ /* Remove the old line under h2 for the requested homepage sections only. */ html body #djmaze-site.djmaze-home-site section#certifications .maze-cert-subtle-head h2::after, html body #djmaze-site.djmaze-home-site section#discography .maze-section-head h2::after, html body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow-head h2::after, html body #djmaze-site.djmaze-home-site section#shop .maze-section-head h2::after, html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-head h2::after, html body #djmaze-site.djmaze-home-site section#videos .maze-section-head h2::after, html body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-head h2::after, html body #djmaze-site.djmaze-home-site section#photos .maze-section-head h2::after, html body #djmaze-site.djmaze-home-site section#photos .maze-home-photos-slider-head h2::after { display: none !important; content: none !important; } /* New centered line under the purple/kicker titles: Certifications, Discographie, Boutique, Streaming, Galerie. */ html body #djmaze-site.djmaze-home-site section#certifications .maze-cert-subtle-head .maze-kicker::after, html body #djmaze-site.djmaze-home-site section#discography .maze-section-head .maze-kicker::after, html body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow-head .maze-kicker::after, html body #djmaze-site.djmaze-home-site section#shop .maze-section-head .maze-kicker::after, html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-head .maze-kicker::after, html body #djmaze-site.djmaze-home-site section#videos .maze-section-head .maze-kicker::after, html body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-head .maze-kicker::after, html body #djmaze-site.djmaze-home-site section#photos .maze-section-head .maze-kicker::after, html body #djmaze-site.djmaze-home-site section#photos .maze-home-photos-slider-head .maze-kicker::after { content: "" !important; display: block !important; width: 96px !important; height: 3px !important; margin: 14px auto 0 !important; border-radius: 999px !important; background: linear-gradient(90deg, transparent, #ffffff, #9d4edd, transparent) !important; box-shadow: 0 0 30px rgba(157,78,221,.50) !important; } /* Keep all requested home section heads centered. */ html body #djmaze-site.djmaze-home-site section#certifications .maze-cert-subtle-head, html body #djmaze-site.djmaze-home-site section#discography .maze-section-head, html body #djmaze-site.djmaze-home-site section#discography .djmaze-coverflow-head, html body #djmaze-site.djmaze-home-site section#shop .maze-section-head, html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-head, html body #djmaze-site.djmaze-home-site section#videos .maze-section-head, html body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-head, html body #djmaze-site.djmaze-home-site section#photos .maze-section-head, html body #djmaze-site.djmaze-home-site section#photos .maze-home-photos-slider-head { text-align: center !important; } /* Video section: white title and fully black bottom, no white fade/gradient. */ html body #djmaze-site.djmaze-home-site section#videos h2, html body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-head h2 { color: #ffffff !important; } html body #djmaze-site.djmaze-home-site section#videos, html body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-light-minimal, html body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-streaming, html body #djmaze-site.djmaze-home-site section#videos.panel { background-color: #000000 !important; background-image: radial-gradient(circle at 16% 18%, rgba(157,78,221,.14), transparent 30%), radial-gradient(circle at 84% 32%, rgba(0,212,255,.08), transparent 30%), linear-gradient(180deg, #000000 0%, #000000 72%, #000000 100%) !important; } html body #djmaze-site.djmaze-home-site section#videos::after { display: block !important; content: "" !important; position: absolute !important; inset: auto 0 0 0 !important; height: 170px !important; z-index: 1 !important; pointer-events: none !important; background: linear-gradient(180deg, rgba(0,0,0,0), #000000 82%, #000000 100%) !important; } /* Keep 3 columns on desktop so 9 videos become 3 rows of 3. */ html body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } /* Photo section: dark background and centered line under Galerie. */ html body #djmaze-site.djmaze-home-site section#photos, html body #djmaze-site.djmaze-home-site section#photos.maze-home-photos, html body #djmaze-site.djmaze-home-site section#photos.maze-home-photos-slider-section, html body #djmaze-site.djmaze-home-site section#photos.panel { background: #000000 !important; background-image: radial-gradient(circle at 18% 26%, rgba(157,78,221,.15), transparent 32%), radial-gradient(circle at 82% 38%, rgba(0,212,255,.08), transparent 30%), linear-gradient(180deg, #000000 0%, #05020a 100%) !important; color: #ffffff !important; } html body #djmaze-site.djmaze-home-site section#photos::after { content: "" !important; position: absolute !important; inset: auto 0 0 0 !important; height: 130px !important; z-index: 1 !important; pointer-events: none !important; background: linear-gradient(180deg, rgba(0,0,0,0), #000000 100%) !important; } html body #djmaze-site.djmaze-home-site section#photos .maze-home-photos-slider-shell, html body #djmaze-site.djmaze-home-site section#photos .maze-photo-3slider, html body #djmaze-site.djmaze-home-site section#photos .maze-discography-more { position: relative !important; z-index: 2 !important; } /* === Home videos/photos black bottom + light product cards final === */ /* Keep the premium purple/blue radial effects, but force the bottom fade to clean black instead of grey/white. */ html body #djmaze-site.djmaze-home-site section#videos, html body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-light-minimal, html body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-streaming, html body #djmaze-site.djmaze-home-site section#videos.panel { background-color: #000000 !important; background-image: radial-gradient(circle at 14% 18%, rgba(157,78,221,.16), transparent 31%), radial-gradient(circle at 86% 18%, rgba(0,212,255,.10), transparent 32%), linear-gradient(180deg, #000000 0%, #05020a 46%, #000000 100%) !important; overflow: hidden !important; } html body #djmaze-site.djmaze-home-site section#photos, html body #djmaze-site.djmaze-home-site section#photos.maze-home-photos, html body #djmaze-site.djmaze-home-site section#photos.maze-home-photos-slider-section, html body #djmaze-site.djmaze-home-site section#photos.panel { background-color: #000000 !important; background-image: radial-gradient(circle at 14% 20%, rgba(157,78,221,.16), transparent 31%), radial-gradient(circle at 86% 22%, rgba(0,212,255,.10), transparent 32%), linear-gradient(180deg, #000000 0%, #05020a 48%, #000000 100%) !important; overflow: hidden !important; } /* Replace the grey/white bottom overlay with a pure black lower fade. */ html body #djmaze-site.djmaze-home-site section#videos::after, html body #djmaze-site.djmaze-home-site section#photos::after { display: block !important; content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; height: 210px !important; z-index: 1 !important; pointer-events: none !important; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.88) 68%, #000000 100%) !important; opacity: 1 !important; filter: none !important; mix-blend-mode: normal !important; } /* Keep content above the bottom fade. */ html body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-shell, html body #djmaze-site.djmaze-home-site section#videos .maze-videos-streaming-shell, html body #djmaze-site.djmaze-home-site section#videos .maze-section-head, html body #djmaze-site.djmaze-home-site section#videos .maze-video-minimal-row, html body #djmaze-site.djmaze-home-site section#videos .maze-discography-more, html body #djmaze-site.djmaze-home-site section#photos .maze-home-photos-slider-shell, html body #djmaze-site.djmaze-home-site section#photos .maze-photo-3slider, html body #djmaze-site.djmaze-home-site section#photos .maze-section-head, html body #djmaze-site.djmaze-home-site section#photos .maze-discography-more { position: relative !important; z-index: 2 !important; } /* Homepage Boutique only: keep the section dark, make the rounded product boxes light. */ html body #djmaze-site.djmaze-home-site section#shop, html body #djmaze-site.djmaze-home-site section#shop.maze-home-shop, html body #djmaze-site.djmaze-home-site section#shop.panel { background-color: #000000 !important; } html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-card, html body #djmaze-site.djmaze-home-site section#shop .maze-wc-card { background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,247,255,.94)) !important; border: 1px solid rgba(255,255,255,.72) !important; border-radius: 28px !important; box-shadow: 0 24px 72px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.92) !important; color: #080812 !important; } html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-card::before, html body #djmaze-site.djmaze-home-site section#shop .maze-wc-card::before { background: linear-gradient(135deg, rgba(0,212,255,.12), rgba(157,78,221,.08), rgba(255,255,255,.08)) !important; opacity: 1 !important; } html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-img, html body #djmaze-site.djmaze-home-site section#shop .maze-wc-img { background: radial-gradient(circle at 50% 28%, rgba(157,78,221,.10), transparent 40%), #f4f6fb !important; border: 1px solid rgba(10,10,25,.08) !important; border-radius: 22px !important; } html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-card h3, html body #djmaze-site.djmaze-home-site section#shop .maze-wc-card h2, html body #djmaze-site.djmaze-home-site section#shop .maze-wc-card h3 { color: #070711 !important; } html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-card .price, html body #djmaze-site.djmaze-home-site section#shop .maze-wc-card .price, html body #djmaze-site.djmaze-home-site section#shop .maze-wc-card .price span, html body #djmaze-site.djmaze-home-site section#shop .woocommerce-Price-amount { color: #1f1f31 !important; } /* === Home videos photos remove grey white bottom final override === */ /* Strongest override: keep the purple/cyan ambience, but remove the old white/grey bottom glow from Videos and Photos. */ html body #djmaze-site.djmaze-home-site section#videos, html body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-light-minimal, html body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-streaming, html body #djmaze-site.djmaze-home-site section#videos.panel, html body #djmaze-site.djmaze-home-site section#photos, html body #djmaze-site.djmaze-home-site section#photos.maze-home-photos, html body #djmaze-site.djmaze-home-site section#photos.maze-home-photos-slider-section, html body #djmaze-site.djmaze-home-site section#photos.panel { position: relative !important; isolation: isolate !important; overflow: hidden !important; background-color: #000000 !important; background-image: radial-gradient(circle at 12% 16%, rgba(157,78,221,.18), transparent 30%), radial-gradient(circle at 88% 20%, rgba(0,212,255,.10), transparent 30%), linear-gradient(180deg, #000000 0%, #05020a 46%, #000000 100%) !important; } /* This is the real source of the grey/white area: older ::before rules had rgba(255,255,255,.88) near the bottom. We replace those specific class pseudo-elements with ONLY purple/cyan ambience. */ html body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-light-minimal::before, html body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-streaming::before, html body #djmaze-site.djmaze-home-site section#videos.panel::before, html body #djmaze-site.djmaze-home-site section#photos.maze-home-photos-slider-section::before, html body #djmaze-site.djmaze-home-site section#photos.maze-home-photos::before, html body #djmaze-site.djmaze-home-site section#photos.panel::before { content: "" !important; position: absolute !important; inset: -18% !important; z-index: 0 !important; pointer-events: none !important; background: radial-gradient(circle at 18% 24%, rgba(157,78,221,.20), transparent 24%), radial-gradient(circle at 84% 26%, rgba(0,212,255,.12), transparent 24%), radial-gradient(circle at 50% 0%, rgba(157,78,221,.07), transparent 28%) !important; filter: blur(18px) !important; opacity: 1 !important; mix-blend-mode: normal !important; animation: none !important; } /* Force the lower part to fade to black only, never grey/white. */ html body #djmaze-site.djmaze-home-site section#videos::after, html body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-light-minimal::after, html body #djmaze-site.djmaze-home-site section#videos.maze-home-videos-streaming::after, html body #djmaze-site.djmaze-home-site section#videos.panel::after, html body #djmaze-site.djmaze-home-site section#photos::after, html body #djmaze-site.djmaze-home-site section#photos.maze-home-photos::after, html body #djmaze-site.djmaze-home-site section#photos.maze-home-photos-slider-section::after, html body #djmaze-site.djmaze-home-site section#photos.panel::after { content: "" !important; display: block !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; height: 280px !important; z-index: 1 !important; pointer-events: none !important; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000000 62%, #000000 100%) !important; background-color: transparent !important; opacity: 1 !important; filter: none !important; mix-blend-mode: normal !important; animation: none !important; } /* Keep all videos/photos content above the black bottom fade. */ html body #djmaze-site.djmaze-home-site section#videos > *, html body #djmaze-site.djmaze-home-site section#photos > * { position: relative !important; z-index: 2 !important; } /* Homepage Boutique cards only: light rounded product boxes, dark section retained. */ html body #djmaze-site.djmaze-home-site section#shop, html body #djmaze-site.djmaze-home-site section#shop.maze-home-shop, html body #djmaze-site.djmaze-home-site section#shop.maze-home-shop-modern, html body #djmaze-site.djmaze-home-site section#shop.panel { background-color: #000000 !important; } html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-rail .maze-shop-modern-card, html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-rail .maze-wc-card, html body #djmaze-site.djmaze-home-site section#shop article.maze-shop-modern-card, html body #djmaze-site.djmaze-home-site section#shop article.maze-wc-card { background: linear-gradient(180deg, #ffffff 0%, #f3f5fb 100%) !important; border: 1px solid rgba(255,255,255,.82) !important; border-radius: 28px !important; color: #080812 !important; box-shadow: 0 24px 74px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.96) !important; overflow: hidden !important; } html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-rail .maze-shop-modern-card::before, html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-rail .maze-wc-card::before { background: linear-gradient(135deg, rgba(0,212,255,.10), rgba(157,78,221,.08), rgba(255,255,255,.04)) !important; opacity: 1 !important; } html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-img, html body #djmaze-site.djmaze-home-site section#shop .maze-wc-img { background: radial-gradient(circle at 50% 24%, rgba(157,78,221,.10), transparent 42%), #f6f7fb !important; border-radius: 22px !important; border: 1px solid rgba(10,10,25,.08) !important; } html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-card h3, html body #djmaze-site.djmaze-home-site section#shop .maze-wc-card h2, html body #djmaze-site.djmaze-home-site section#shop .maze-wc-card h3, html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-card .price, html body #djmaze-site.djmaze-home-site section#shop .maze-wc-card .price, html body #djmaze-site.djmaze-home-site section#shop .woocommerce-Price-amount { color: #080812 !important; } /* === Homepage product boxes match Boutique page final === */ /* Homepage only: make the shop product cards use the exact clean light card language of the Boutique page. */ html body #djmaze-site.djmaze-home-site section#shop.maze-home-shop, html body #djmaze-site.djmaze-home-site section#shop.maze-home-shop-modern, html body #djmaze-site.djmaze-home-site section#shop.panel { background-color: #000000 !important; } html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-rail, html body #djmaze-site.djmaze-home-site section#shop .maze-wc-home-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: clamp(16px, 1.6vw, 24px) !important; width: min(1360px, calc(100% - 52px)) !important; max-width: 1360px !important; margin: 34px auto 0 !important; padding: 0 !important; } html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-rail .maze-shop-modern-card, html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-rail .maze-wc-card, html body #djmaze-site.djmaze-home-site section#shop article.maze-shop-modern-card, html body #djmaze-site.djmaze-home-site section#shop article.maze-wc-card { position: relative !important; list-style: none !important; min-height: 0 !important; margin: 0 !important; padding: 14px 14px 18px !important; border-radius: 24px !important; border: 1px solid rgba(7, 28, 55, .08) !important; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,255,.94)) !important; color: #09050f !important; box-shadow: 0 22px 70px rgba(7, 28, 55, .10) !important; overflow: hidden !important; transition: transform .28s ease, box-shadow .28s ease !important; animation: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-rail .maze-shop-modern-card:hover, html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-rail .maze-wc-card:hover, html body #djmaze-site.djmaze-home-site section#shop article.maze-shop-modern-card:hover, html body #djmaze-site.djmaze-home-site section#shop article.maze-wc-card:hover { transform: translateY(-7px) !important; box-shadow: 0 34px 100px rgba(7, 28, 55, .16), 0 18px 55px rgba(0,212,255,.09) !important; } html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-rail .maze-shop-modern-card::before, html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-rail .maze-wc-card::before, html body #djmaze-site.djmaze-home-site section#shop article.maze-shop-modern-card::before, html body #djmaze-site.djmaze-home-site section#shop article.maze-wc-card::before { display: none !important; content: none !important; opacity: 0 !important; background: none !important; } html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-img, html body #djmaze-site.djmaze-home-site section#shop .maze-wc-img { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; border-radius: 18px !important; overflow: hidden !important; display: block !important; background: radial-gradient(circle at 50% 25%, rgba(0,212,255,.08), transparent 40%), #eef4fb !important; border: 1px solid rgba(7, 28, 55, .06) !important; } html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-img img, html body #djmaze-site.djmaze-home-site section#shop .maze-wc-img img, html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-img .woocommerce-placeholder, html body #djmaze-site.djmaze-home-site section#shop .maze-wc-img .woocommerce-placeholder { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 18px !important; padding: 0 !important; filter: none !important; transform: none !important; transition: transform .28s ease !important; } html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-card:hover .maze-shop-modern-img img, html body #djmaze-site.djmaze-home-site section#shop .maze-wc-card:hover .maze-wc-img img { transform: scale(1.04) !important; filter: none !important; } html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-info { position: relative !important; z-index: 2 !important; padding: 0 !important; text-align: left !important; } html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-card h3, html body #djmaze-site.djmaze-home-site section#shop .maze-wc-card h2, html body #djmaze-site.djmaze-home-site section#shop .maze-wc-card h3 { color: #07040d !important; font-family: 'Orbitron', 'Inter', sans-serif !important; font-size: clamp(13px, .88vw, 16px) !important; line-height: 1.3 !important; letter-spacing: .025em !important; text-transform: uppercase !important; margin: 16px 0 8px !important; text-align: left !important; text-shadow: none !important; } html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-card .price, html body #djmaze-site.djmaze-home-site section#shop .maze-wc-card .price, html body #djmaze-site.djmaze-home-site section#shop .maze-wc-card .price span, html body #djmaze-site.djmaze-home-site section#shop .woocommerce-Price-amount { color: #005b9b !important; font-family: 'Orbitron', 'Inter', sans-serif !important; font-size: 15px !important; font-weight: 900 !important; margin: 0 0 12px !important; text-align: left !important; text-shadow: none !important; } html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-btn, html body #djmaze-site.djmaze-home-site section#shop .maze-wc-card .button, html body #djmaze-site.djmaze-home-site section#shop .woocommerce a.button { width: 100% !important; min-height: 46px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; border: 0 !important; background: linear-gradient(135deg, #00d4ff, #1f6fff) !important; color: #02101f !important; font-family: 'Orbitron', 'Inter', sans-serif !important; font-size: 10px !important; letter-spacing: .12em !important; font-weight: 900 !important; text-transform: uppercase !important; box-shadow: 0 18px 42px rgba(0, 114, 255, .22) !important; } @media (max-width: 980px) { html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-rail, html body #djmaze-site.djmaze-home-site section#shop .maze-wc-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 620px) { html body #djmaze-site.djmaze-home-site section#shop .maze-shop-modern-rail, html body #djmaze-site.djmaze-home-site section#shop .maze-wc-home-grid { width: min(100%, calc(100% - 28px)) !important; grid-template-columns: 1fr !important; } } /* === Homepage Videos and Photos intro text white final === */ /* Homepage only: make the intro paragraph text white in the Videos and Photos sections. */ html body #djmaze-site.djmaze-home-site section#videos .maze-videos-minimal-head p:not(.maze-kicker), html body #djmaze-site.djmaze-home-site section#videos .maze-section-head p:not(.maze-kicker), html body #djmaze-site.djmaze-home-site section#photos .maze-home-photos-slider-head p:not(.maze-kicker), html body #djmaze-site.djmaze-home-site section#photos .maze-section-head p:not(.maze-kicker) { color: #ffffff !important; opacity: 1 !important; text-shadow: 0 10px 30px rgba(0,0,0,.35) !important; } html body #djmaze-site.djmaze-home-site section#videos .maze-section-head h2, html body #djmaze-site.djmaze-home-site section#photos .maze-section-head h2 { color: #ffffff !important; } /* === Homepage Biography gradient line between Biographie and DJ MAZE === */ /* Move the gradient divider from under "DJ MAZE" to under "Biographie", so it sits between both texts. */ html body #djmaze-site.djmaze-home-site section#bio.maze-bio-home-updated .maze-bio-text h2::after, html body #djmaze-site.djmaze-home-site section#bio .maze-bio-text h2::after { display: none !important; content: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; background: none !important; box-shadow: none !important; } html body #djmaze-site.djmaze-home-site section#bio.maze-bio-home-updated .maze-bio-text .maze-kicker, html body #djmaze-site.djmaze-home-site section#bio .maze-bio-text .maze-kicker { display: inline-block !important; position: relative !important; margin: 0 0 18px 0 !important; padding: 0 !important; } html body #djmaze-site.djmaze-home-site section#bio.maze-bio-home-updated .maze-bio-text .maze-kicker::after, html body #djmaze-site.djmaze-home-site section#bio .maze-bio-text .maze-kicker::after { content: "" !important; display: block !important; width: 96px !important; height: 3px !important; margin: 14px 0 0 0 !important; border-radius: 999px !important; background: linear-gradient(90deg, #ffffff, #9d4edd, transparent) !important; box-shadow: 0 0 30px rgba(157,78,221,.50) !important; } html body #djmaze-site.djmaze-home-site section#bio.maze-bio-home-updated .maze-bio-text h2, html body #djmaze-site.djmaze-home-site section#bio .maze-bio-text h2 { margin-top: 0 !important; } /* === Contact and Videos pages + dark discography body final === */ /* Menu spacing with Contact added */ .djmaze-global-nav .nav-links { gap: clamp(16px, 2.1vw, 34px) !important; } .djmaze-global-nav .nav-links a { letter-spacing: .22em !important; } /* Shared cloned Biographie hero for Contact and Vidéos pages */ #djmaze-site.maze-contact-page-wrap, #djmaze-site.maze-videos-page-wrap { background: radial-gradient(circle at 86% 10%, rgba(126, 43, 180, .30), transparent 34%), radial-gradient(circle at 6% 45%, rgba(31,111,255,.14), transparent 32%), linear-gradient(180deg, #05020a 0%, #080315 50%, #030108 100%) !important; color: #fff !important; } #djmaze-site.maze-contact-page-wrap .biography-hero-v3__copy h1, #djmaze-site.maze-videos-page-wrap .biography-hero-v3__copy h1, #djmaze-site.maze-contact-page-wrap .maze-contact-info h2, #djmaze-site.maze-videos-page-wrap .maze-videos-minimal-head h2 { font-family: 'Orbitron', 'Inter', sans-serif !important; text-transform: uppercase !important; } /* Contact page */ .maze-contact-main { position: relative; overflow: hidden; background: radial-gradient(circle at 88% 4%, rgba(157,78,221,.22), transparent 30%), radial-gradient(circle at 10% 44%, rgba(0,212,255,.10), transparent 28%), linear-gradient(180deg, #05020a 0%, #080315 58%, #030108 100%) !important; } .maze-contact-modern-section { position: relative; padding: clamp(72px, 7vw, 118px) 0 clamp(86px, 8vw, 140px); } .maze-contact-modern-shell { width: min(1220px, calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: start; } .maze-contact-info { position: sticky; top: 120px; } .maze-contact-info h2 { margin: 10px 0 20px; font-size: clamp(34px, 5vw, 72px); line-height: .98; letter-spacing: -.02em; color: #fff; } .maze-contact-info p:not(.maze-kicker) { margin: 0 0 28px; color: rgba(255,255,255,.72); font-size: clamp(15px, 1.15vw, 18px); line-height: 1.8; } .maze-contact-city-grid { display: grid; gap: 14px; } .maze-contact-city-grid article { padding: 22px; border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035)); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 22px 70px rgba(0,0,0,.30); } .maze-contact-city-grid span, .maze-contact-form label span { display: block; margin-bottom: 9px; color: rgba(186,158,255,.94); font-family: 'Orbitron', 'Inter', sans-serif; font-size: 11px; letter-spacing: .20em; text-transform: uppercase; } .maze-contact-city-grid strong { display: block; color: #fff; font-family: 'Orbitron', 'Inter', sans-serif; font-size: clamp(16px, 1.4vw, 22px); line-height: 1.25; } .maze-contact-city-grid small { display: block; margin-top: 8px; color: rgba(255,255,255,.56); line-height: 1.5; } .maze-contact-form { display: grid; gap: 18px; padding: clamp(24px, 3vw, 42px); border-radius: 30px; background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.13); box-shadow: 0 40px 120px rgba(0,0,0,.44); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .maze-contact-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .maze-contact-form label { display: grid; gap: 8px; } .maze-contact-form input, .maze-contact-form select, .maze-contact-form textarea { width: 100%; min-height: 58px; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: rgba(0,0,0,.32); color: #fff; padding: 0 18px; font: 500 15px/1.4 'Inter', sans-serif; outline: none; } .maze-contact-form textarea { min-height: 168px; padding-top: 16px; resize: vertical; } .maze-contact-form input::placeholder, .maze-contact-form textarea::placeholder { color: rgba(255,255,255,.42); } .maze-contact-form input:focus, .maze-contact-form select:focus, .maze-contact-form textarea:focus { border-color: rgba(157,78,221,.75); box-shadow: 0 0 0 4px rgba(157,78,221,.12); } .maze-contact-submit { justify-self: start; border: 0; cursor: pointer; } /* Vidéos page */ .maze-videos-page-main { background: radial-gradient(circle at 86% 7%, rgba(157,78,221,.24), transparent 32%), radial-gradient(circle at 10% 34%, rgba(0,212,255,.10), transparent 30%), linear-gradient(180deg, #05020a 0%, #080315 55%, #030108 100%) !important; color: #fff !important; } #djmaze-site.maze-videos-page-wrap section#videos.maze-videos-page-section { margin: 0 !important; background: transparent !important; color: #fff !important; } #djmaze-site.maze-videos-page-wrap section#videos.maze-videos-page-section .maze-videos-minimal-head h2, #djmaze-site.maze-videos-page-wrap section#videos.maze-videos-page-section .maze-videos-minimal-head p:not(.maze-kicker), #djmaze-site.maze-videos-page-wrap section#videos.maze-videos-page-section .maze-video-minimal-card h3 { color: #fff !important; } #djmaze-site.maze-videos-page-wrap section#videos.maze-videos-page-section .maze-video-minimal-row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(18px, 2vw, 30px) !important; width: min(1320px, calc(100% - 48px)) !important; max-width: 1320px !important; margin: 0 auto !important; padding: 0 !important; overflow: visible !important; scrollbar-width: none !important; } #djmaze-site.maze-videos-page-wrap section#videos.maze-videos-page-section .maze-video-minimal-card { width: auto !important; min-width: 0 !important; background: rgba(255,255,255,.055) !important; border: 1px solid rgba(255,255,255,.11) !important; box-shadow: 0 26px 90px rgba(0,0,0,.34) !important; } #djmaze-site.maze-videos-page-wrap section#videos.maze-videos-page-section .maze-video-minimal-thumb { border-radius: 18px !important; } /* Discographie page body: dark premium background with subtle purple gradients */ body #djmaze-site.maze-discography-page { background: radial-gradient(circle at 84% 10%, rgba(157,78,221,.32), transparent 34%), radial-gradient(circle at 8% 42%, rgba(31,111,255,.16), transparent 30%), linear-gradient(180deg, #05020a 0%, #080315 46%, #030108 100%) !important; color: #fff !important; } body #djmaze-site.maze-discography-page .maze-full-discography { position: relative !important; isolation: isolate !important; overflow: hidden !important; width: min(1320px, calc(100% - 52px)) !important; padding: clamp(78px, 8vw, 120px) 0 140px !important; background: transparent !important; color: #fff !important; } body #djmaze-site.maze-discography-page .maze-full-discography::before { content: "" !important; position: absolute !important; inset: -10% -12% !important; z-index: -1 !important; pointer-events: none !important; background: radial-gradient(circle at 86% 12%, rgba(157,78,221,.24), transparent 28%), radial-gradient(circle at 12% 58%, rgba(0,212,255,.10), transparent 30%), radial-gradient(circle at 48% 98%, rgba(157,78,221,.16), transparent 26%) !important; } body #djmaze-site.maze-discography-page .maze-discography-category { border-top: 1px solid rgba(255,255,255,.10) !important; } body #djmaze-site.maze-discography-page .maze-category-title-row .maze-kicker, body #djmaze-site.maze-discography-page .maze-category-title-row span { color: rgba(186,158,255,.92) !important; font-family: 'Orbitron', 'Inter', sans-serif !important; } body #djmaze-site.maze-discography-page .maze-category-title-row h2, body #djmaze-site.maze-discography-page .maze-release-card strong, body #djmaze-site.maze-discography-page .maze-empty-discography { color: #fff !important; font-family: 'Orbitron', 'Inter', sans-serif !important; text-transform: uppercase !important; } body #djmaze-site.maze-discography-page .maze-release-art, body #djmaze-site.maze-discography-page .maze-feature-cover-img { background: rgba(255,255,255,.065) !important; box-shadow: 0 28px 80px rgba(0,0,0,.42) !important; } body #djmaze-site.maze-discography-page .maze-release-art::after, body #djmaze-site.maze-discography-page .maze-feature-cover-img::after { border-color: rgba(255,255,255,.12) !important; } @media (max-width: 980px) { .maze-contact-modern-shell, .maze-contact-form-row, #djmaze-site.maze-videos-page-wrap section#videos.maze-videos-page-section .maze-video-minimal-row { grid-template-columns: 1fr !important; } .maze-contact-info { position: static; } } @media (max-width: 680px) { .maze-contact-modern-shell, #djmaze-site.maze-videos-page-wrap section#videos.maze-videos-page-section .maze-video-minimal-row { width: min(100% - 32px, 1320px) !important; } .maze-contact-modern-section { padding-top: 52px; } .maze-contact-form { border-radius: 24px; } } /* === Page hero background replacements and final dark discographie body === */ /* Biographie hero */ html body #djmaze-site.maze-bio-page-wrap .biography-hero-v3 .biography-hero-v3__bg { background-image: url("assets/images/biography/djmaze-bio-hero-2.jpg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* Discographie hero */ html body #djmaze-site.maze-discography-page .discography-hero-v2 .discography-hero-v2__bg, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2 .discography-hero-v2__bg { background-image: url("assets/images/discography/djmaze-disco-hero-2.jpg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* Vidéos hero */ html body #djmaze-site.maze-videos-page-wrap .biography-hero-v3 .biography-hero-v3__bg { background-image: url("assets/images/videos/djmaze-videos-bg.jpg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* Contact hero */ html body #djmaze-site.maze-contact-page-wrap .biography-hero-v3 .biography-hero-v3__bg { background-image: url("assets/images/contact/booking-bg-2.jpg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* Contact page: reduce 'Parlez-nous de votre projet' a little. */ html body #djmaze-site.maze-contact-page-wrap .maze-contact-info h2 { font-size: clamp(28px, 3.8vw, 56px) !important; line-height: 1.05 !important; } /* Discographie page body: dark section after hero, starting black with subtle purple gradients. */ html body #djmaze-site.maze-discography-page, html body #djmaze-site.maze-discography-page-hero-wide { background: linear-gradient(180deg, #000000 0%, #020107 10%, #060212 42%, #020107 100%) !important; color: #ffffff !important; } html body #djmaze-site.maze-discography-page .maze-full-discography, html body #djmaze-site.maze-discography-page-hero-wide .maze-full-discography { position: relative !important; isolation: isolate !important; overflow: hidden !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: clamp(82px, 8vw, 128px) max(26px, calc((100vw - 1320px) / 2)) 150px !important; background: radial-gradient(circle at 86% 10%, rgba(157, 78, 221, .26), transparent 28%), radial-gradient(circle at 11% 54%, rgba(0, 212, 255, .10), transparent 30%), radial-gradient(circle at 50% 100%, rgba(111, 55, 255, .16), transparent 30%), linear-gradient(180deg, #000000 0%, #05020a 20%, #080315 62%, #030108 100%) !important; color: #ffffff !important; } html body #djmaze-site.maze-discography-page .maze-full-discography::before, html body #djmaze-site.maze-discography-page-hero-wide .maze-full-discography::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; pointer-events: none !important; background: radial-gradient(circle at 76% 16%, rgba(157,78,221,.16), transparent 30%), radial-gradient(circle at 18% 78%, rgba(31,111,255,.11), transparent 32%) !important; } html body #djmaze-site.maze-discography-page .maze-discography-category, html body #djmaze-site.maze-discography-page-hero-wide .maze-discography-category { border-top: 1px solid rgba(255,255,255,.10) !important; } html body #djmaze-site.maze-discography-page .maze-category-title-row .maze-kicker, html body #djmaze-site.maze-discography-page-hero-wide .maze-category-title-row .maze-kicker { color: rgba(186,158,255,.95) !important; } html body #djmaze-site.maze-discography-page .maze-category-title-row h2, html body #djmaze-site.maze-discography-page-hero-wide .maze-category-title-row h2, html body #djmaze-site.maze-discography-page .maze-release-card strong, html body #djmaze-site.maze-discography-page-hero-wide .maze-release-card strong, html body #djmaze-site.maze-discography-page .maze-empty-discography, html body #djmaze-site.maze-discography-page-hero-wide .maze-empty-discography { color: #ffffff !important; } html body #djmaze-site.maze-discography-page .maze-release-art, html body #djmaze-site.maze-discography-page-hero-wide .maze-release-art { background: rgba(255,255,255,.06) !important; box-shadow: 0 28px 84px rgba(0,0,0,.50) !important; } @media (max-width: 760px) { html body #djmaze-site.maze-bio-page-wrap .biography-hero-v3 .biography-hero-v3__bg, html body #djmaze-site.maze-videos-page-wrap .biography-hero-v3 .biography-hero-v3__bg, html body #djmaze-site.maze-contact-page-wrap .biography-hero-v3 .biography-hero-v3__bg { background-position: 64% center !important; } html body #djmaze-site.maze-discography-page .discography-hero-v2 .discography-hero-v2__bg, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2 .discography-hero-v2__bg { background-position: 64% center !important; } html body #djmaze-site.maze-contact-page-wrap .maze-contact-info h2 { font-size: clamp(25px, 8vw, 36px) !important; } html body #djmaze-site.maze-discography-page .maze-full-discography, html body #djmaze-site.maze-discography-page-hero-wide .maze-full-discography { padding-left: 18px !important; padding-right: 18px !important; } } /* === Page hero updates set final renewed === */ /* Hero background replacements from latest supplied files. */ html body #djmaze-site.maze-bio-page-wrap .biography-hero-v3 .biography-hero-v3__bg { background-image: url("assets/images/biography/djmaze-bio-hero-2.jpg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; filter: none !important; } html body #djmaze-site.maze-discography-page .discography-hero-v2 .discography-hero-v2__bg, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2 .discography-hero-v2__bg { background-image: url("assets/images/discography/djmaze-disco-hero-2.jpg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; filter: none !important; } html body #djmaze-site.maze-videos-page-wrap .biography-hero-v3 .biography-hero-v3__bg { background-image: url("assets/images/videos/djmaze-videos-bg.jpg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; filter: none !important; } html body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .biography-hero-v3__bg, html body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .photos-hero-v3__bg { background-image: url("assets/images/photos/djmaze-photo-hero-2.jpg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; filter: none !important; } html body #djmaze-site.maze-contact-page-wrap .biography-hero-v3 .biography-hero-v3__bg { background-image: url("assets/images/contact/booking-bg-2.jpg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; filter: none !important; } /* Discographie: the section after the hero starts pure black; only the bottom ends in dark purple-black. */ html body #djmaze-site.maze-discography-page, html body #djmaze-site.maze-discography-page-hero-wide { background: #000000 !important; color: #ffffff !important; } html body #djmaze-site.maze-discography-page .discography-hero-v2, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2 { margin-bottom: 0 !important; } html body #djmaze-site.maze-discography-page .maze-full-discography, html body #djmaze-site.maze-discography-page-hero-wide .maze-full-discography { position: relative !important; isolation: isolate !important; overflow: hidden !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: clamp(82px, 8vw, 128px) max(26px, calc((100vw - 1320px) / 2)) 150px !important; background: linear-gradient(180deg, #000000 0%, #000000 72%, #070011 100%) !important; color: #ffffff !important; } html body #djmaze-site.maze-discography-page .maze-full-discography::before, html body #djmaze-site.maze-discography-page-hero-wide .maze-full-discography::before { content: "" !important; position: absolute !important; inset: auto -12% -18% -12% !important; height: 42% !important; z-index: -1 !important; pointer-events: none !important; background: radial-gradient(circle at 72% 78%, rgba(157,78,221,.22), transparent 34%), radial-gradient(circle at 28% 96%, rgba(76,25,130,.20), transparent 32%) !important; filter: blur(12px) !important; } html body #djmaze-site.maze-discography-page .maze-discography-category, html body #djmaze-site.maze-discography-page-hero-wide .maze-discography-category { border-top: 1px solid rgba(255,255,255,.10) !important; } html body #djmaze-site.maze-discography-page .maze-category-title-row h2, html body #djmaze-site.maze-discography-page-hero-wide .maze-category-title-row h2, html body #djmaze-site.maze-discography-page .maze-release-card strong, html body #djmaze-site.maze-discography-page-hero-wide .maze-release-card strong, html body #djmaze-site.maze-discography-page .maze-empty-discography, html body #djmaze-site.maze-discography-page-hero-wide .maze-empty-discography { color: #ffffff !important; } /* Vidéos + Contact: remove the big gap directly under the hero. */ html body #djmaze-site.maze-videos-page-wrap .biography-hero-v3, html body #djmaze-site.maze-contact-page-wrap .biography-hero-v3 { margin-bottom: 0 !important; } html body #djmaze-site.maze-videos-page-wrap .maze-videos-page-main, html body #djmaze-site.maze-contact-page-wrap .maze-contact-main { margin-top: 0 !important; padding-top: 0 !important; } html body #djmaze-site.maze-videos-page-wrap section#videos.maze-videos-page-section { margin-top: 0 !important; padding-top: clamp(56px, 5.5vw, 88px) !important; } html body #djmaze-site.maze-contact-page-wrap .maze-contact-modern-section { margin-top: 0 !important; padding-top: clamp(56px, 5.5vw, 88px) !important; } /* Vidéos page: match homepage video-card design and keep play buttons inside the boxes. */ html body #djmaze-site.maze-videos-page-wrap section#videos.maze-videos-page-section { background: #000000 !important; background-image: radial-gradient(circle at 22% 34%, rgba(157,78,221,.18), transparent 25%), radial-gradient(circle at 80% 38%, rgba(0,212,255,.10), transparent 25%), linear-gradient(180deg, #000000 0%, #05020a 100%) !important; color: #ffffff !important; overflow: hidden !important; } html body #djmaze-site.maze-videos-page-wrap section#videos.maze-videos-page-section .maze-video-minimal-row { width: min(1640px, 100%) !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; margin: 0 auto !important; padding: 0 !important; overflow: visible !important; } html body #djmaze-site.maze-videos-page-wrap section#videos.maze-videos-page-section .maze-video-minimal-card { position: relative !important; display: block !important; min-width: 0 !important; width: auto !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #09050f !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-decoration: none !important; } html body #djmaze-site.maze-videos-page-wrap section#videos.maze-videos-page-section .maze-video-minimal-thumb { position: relative !important; display: block !important; width: 100% !important; aspect-ratio: 16 / 9 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; background: #09050f !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; } html body #djmaze-site.maze-videos-page-wrap section#videos.maze-videos-page-section .maze-video-minimal-thumb > img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; border: 0 !important; border-radius: 0 !important; filter: saturate(1.04) contrast(1.04) brightness(.92) !important; } html body #djmaze-site.maze-videos-page-wrap section#videos.maze-videos-page-section .maze-video-minimal-card h3 { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 3 !important; margin: 0 !important; padding: 18px 14px 12px 58px !important; color: #ffffff !important; font-family: 'Orbitron', 'Inter', sans-serif !important; text-transform: uppercase !important; font-size: clamp(10px, .72vw, 13px) !important; line-height: 1.22 !important; letter-spacing: .035em !important; background: linear-gradient(180deg, transparent, rgba(0,0,0,.78)) !important; text-shadow: 0 2px 14px rgba(0,0,0,.75) !important; } html body #djmaze-site.maze-videos-page-wrap section#videos.maze-videos-page-section .maze-video-minimal-play { position: absolute !important; left: 10px !important; bottom: 10px !important; top: auto !important; right: auto !important; z-index: 4 !important; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; max-width: 34px !important; max-height: 34px !important; display: grid !important; place-items: center !important; border-radius: 0 !important; border: 0 !important; background: rgba(255,255,255,.92) !important; box-shadow: 0 10px 24px rgba(0,0,0,.22) !important; transform: none !important; overflow: hidden !important; } html body #djmaze-site.maze-videos-page-wrap section#videos.maze-videos-page-section .maze-video-minimal-play img { width: 15px !important; height: 15px !important; max-width: 15px !important; max-height: 15px !important; object-fit: contain !important; display: block !important; filter: none !important; } /* Photos page: purple/white hero text treatment. */ html body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .biography-hero-v3__eyebrow { color: #d9c5ff !important; background: linear-gradient(90deg, #ffffff 0%, #c7a8ff 45%, #9d4edd 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } html body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .biography-hero-v3__copy h1 { background: linear-gradient(90deg, #ffffff 0%, #e6dcff 34%, #b98cff 66%, #ffffff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-shadow: 0 0 34px rgba(157,78,221,.28) !important; } html body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .biography-hero-v3__copy h2, html body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .biography-hero-v3__divider { color: #f4efff !important; border-color: rgba(200,168,255,.88) !important; } @media (max-width: 980px) { html body #djmaze-site.maze-videos-page-wrap section#videos.maze-videos-page-section .maze-video-minimal-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 760px) { html body #djmaze-site.maze-bio-page-wrap .biography-hero-v3 .biography-hero-v3__bg, html body #djmaze-site.maze-videos-page-wrap .biography-hero-v3 .biography-hero-v3__bg, html body #djmaze-site.maze-contact-page-wrap .biography-hero-v3 .biography-hero-v3__bg, html body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .biography-hero-v3__bg, html body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .photos-hero-v3__bg { background-position: 64% center !important; } html body #djmaze-site.maze-discography-page .discography-hero-v2 .discography-hero-v2__bg, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2 .discography-hero-v2__bg { background-position: 64% center !important; } html body #djmaze-site.maze-videos-page-wrap section#videos.maze-videos-page-section .maze-video-minimal-row { grid-template-columns: 1fr !important; gap: 8px !important; } html body #djmaze-site.maze-videos-page-wrap section#videos.maze-videos-page-section, html body #djmaze-site.maze-contact-page-wrap .maze-contact-modern-section { padding-top: 42px !important; } } /* === Final page corrections: local footer video, hero links, video/photos/disco refinements === */ /* Footer: use direct MP4 as a background video, no iframe controls, no YouTube UI. */ html body .maze-footer-bg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; background: #000 !important; } html body .maze-footer-bg iframe { display: none !important; } html body .maze-footer-bg-video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; border: 0 !important; outline: 0 !important; transform: none !important; filter: none !important; opacity: 1 !important; pointer-events: none !important; } /* Footer socials: thinner, lighter, more visible icons. */ html body .maze-footer-socials a { border-color: rgba(255,255,255,.20) !important; background: rgba(255,255,255,.055) !important; color: rgba(255,255,255,.96) !important; box-shadow: 0 12px 34px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10) !important; } html body .maze-footer-socials svg { width: 18px !important; height: 18px !important; fill: currentColor !important; opacity: .92 !important; transform: scale(.88) !important; filter: none !important; } html body .maze-footer-socials a:hover { color: #ffffff !important; border-color: rgba(201,168,255,.50) !important; background: rgba(157,78,221,.16) !important; } /* Contact: make Dubai / International number and main title refined. */ html body #djmaze-site.maze-contact-page-wrap .maze-contact-info h2 { font-size: clamp(30px, 4.3vw, 60px) !important; line-height: 1 !important; } /* Discographie body: stay pure black from the hero, with dark purple only starting from the middle/end. */ html body #djmaze-site.maze-discography-page, html body #djmaze-site.maze-discography-page-hero-wide { background: #000000 !important; } html body #djmaze-site.maze-discography-page .maze-full-discography, html body #djmaze-site.maze-discography-page-hero-wide .maze-full-discography { background: linear-gradient(180deg, #000000 0%, #000000 52%, #020005 70%, #070011 100%) !important; color: #ffffff !important; } html body #djmaze-site.maze-discography-page .maze-full-discography::before, html body #djmaze-site.maze-discography-page-hero-wide .maze-full-discography::before { inset: 45% -16% -20% -16% !important; height: 62% !important; background: radial-gradient(circle at 70% 74%, rgba(157,78,221,.18), transparent 34%), radial-gradient(circle at 24% 92%, rgba(80,28,140,.16), transparent 36%) !important; } /* Vidéos page: Streaming text purple, remove the left purple line under the Vidéos title. */ html body #djmaze-site.maze-videos-page-wrap section#videos.maze-videos-page-section .maze-kicker, html body #djmaze-site.maze-videos-page-wrap section#videos.maze-videos-page-section .maze-videos-minimal-head .maze-kicker { color: #b98cff !important; -webkit-text-fill-color: #b98cff !important; background: none !important; } html body #djmaze-site.maze-videos-page-wrap section#videos.maze-videos-page-section .maze-kicker::after, html body #djmaze-site.maze-videos-page-wrap section#videos.maze-videos-page-section .maze-videos-minimal-head .maze-kicker::after, html body #djmaze-site.maze-videos-page-wrap section#videos.maze-videos-page-section .maze-section-head h2::after, html body #djmaze-site.maze-videos-page-wrap section#videos.maze-videos-page-section .maze-videos-minimal-head h2::after { display: none !important; content: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; background: none !important; box-shadow: none !important; } /* Vidéos + Photos page hero: change blue divider/gradient lines to white-purple. */ html body #djmaze-site.maze-videos-page-wrap .biography-hero-v3__divider, html body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .biography-hero-v3__divider, html body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .photos-hero-v3__divider { width: 132px !important; height: 3px !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient(90deg, #ffffff 0%, #d8c5ff 42%, #9d4edd 78%, transparent 100%) !important; box-shadow: 0 0 28px rgba(157,78,221,.55) !important; } html body #djmaze-site.maze-videos-page-wrap .biography-hero-v3__copy h1, html body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .biography-hero-v3__copy h1 { background: linear-gradient(90deg, #ffffff 0%, #efe8ff 34%, #b98cff 66%, #ffffff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* Photos page: new hero background image. */ html body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .biography-hero-v3__bg, html body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .photos-hero-v3__bg { background-image: url("assets/images/photos/djmaze-photo-hero-3.jpg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* Discographie hero secondary video button: clean text-only button after removing icon. */ html body #djmaze-site.maze-discography-page .discography-hero-v2__btn--ghost, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__btn--ghost { gap: 0 !important; } html body #djmaze-site.maze-discography-page .discography-hero-v2__btn--ghost .play, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__btn--ghost .play { display: none !important; } /* === Video and Photos purple hero lines + section gradients final === */ /* Videos + Photos page hero: keep the original long line length, only change both blue lines to purple. */ html body #djmaze-site.maze-videos-page-wrap .biography-hero-v3__eyebrow::before, html body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .biography-hero-v3__eyebrow::before, html body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .photos-hero-v3__eyebrow::before { content: "" !important; display: inline-block !important; flex: 0 0 50px !important; width: 50px !important; height: 2px !important; border-radius: 999px !important; background: linear-gradient(90deg, #ffffff 0%, #c9a8ff 35%, #9d4edd 78%, rgba(157,78,221,0) 100%) !important; box-shadow: 0 0 16px rgba(157,78,221,.48) !important; } html body #djmaze-site.maze-videos-page-wrap .biography-hero-v3__divider, html body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .biography-hero-v3__divider, html body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .photos-hero-v3__divider { width: min(720px, 100%) !important; max-width: 720px !important; height: 2px !important; margin: 28px 0 28px !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient(90deg, #ffffff 0%, #c9a8ff 30%, #9d4edd 58%, rgba(157,78,221,0) 100%) !important; box-shadow: 0 0 22px rgba(157,78,221,.42) !important; } /* Photos page body: apply the same premium dark gradient atmosphere as the Contact page after the hero. */ html body #djmaze-site.maze-photos-page-wrap, html body #djmaze-site.photos-page-as-bio { background: radial-gradient(circle at 86% 10%, rgba(126, 43, 180, .30), transparent 34%), radial-gradient(circle at 6% 45%, rgba(31,111,255,.14), transparent 32%), linear-gradient(180deg, #05020a 0%, #080315 50%, #030108 100%) !important; color: #ffffff !important; } html body #djmaze-site.maze-photos-page-wrap .maze-gallery-page-slider-main, html body #djmaze-site.photos-page-as-bio .maze-gallery-page-slider-main { position: relative !important; isolation: isolate !important; overflow: hidden !important; margin-top: 0 !important; background: radial-gradient(circle at 88% 4%, rgba(157,78,221,.22), transparent 30%), radial-gradient(circle at 10% 44%, rgba(0,212,255,.10), transparent 28%), linear-gradient(180deg, #05020a 0%, #080315 58%, #030108 100%) !important; color: #ffffff !important; } html body #djmaze-site.maze-photos-page-wrap .maze-gallery-page-slider-main::before, html body #djmaze-site.photos-page-as-bio .maze-gallery-page-slider-main::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; pointer-events: none !important; background: radial-gradient(circle at 84% 12%, rgba(157,78,221,.18), transparent 30%), radial-gradient(circle at 12% 70%, rgba(83,34,154,.14), transparent 34%) !important; } html body #djmaze-site.maze-photos-page-wrap .maze-gallery-page-head, html body #djmaze-site.maze-photos-page-wrap .maze-photo-3slider, html body #djmaze-site.photos-page-as-bio .maze-gallery-page-head, html body #djmaze-site.photos-page-as-bio .maze-photo-3slider { position: relative !important; z-index: 2 !important; } /* Discographie page body: similar effect, with the top staying black so it blends cleanly with the hero. */ html body #djmaze-site.maze-discography-page, html body #djmaze-site.maze-discography-page-hero-wide { background: #000000 !important; color: #ffffff !important; } html body #djmaze-site.maze-discography-page .maze-full-discography, html body #djmaze-site.maze-discography-page-hero-wide .maze-full-discography { position: relative !important; isolation: isolate !important; overflow: hidden !important; background: radial-gradient(circle at 88% 54%, rgba(157,78,221,.20), transparent 32%), radial-gradient(circle at 10% 70%, rgba(0,212,255,.08), transparent 30%), linear-gradient(180deg, #000000 0%, #000000 34%, #05020a 58%, #080315 82%, #030108 100%) !important; color: #ffffff !important; } html body #djmaze-site.maze-discography-page .maze-full-discography::before, html body #djmaze-site.maze-discography-page-hero-wide .maze-full-discography::before { content: "" !important; position: absolute !important; inset: 32% -16% -16% -16% !important; height: auto !important; z-index: -1 !important; pointer-events: none !important; background: radial-gradient(circle at 78% 34%, rgba(157,78,221,.18), transparent 34%), radial-gradient(circle at 20% 74%, rgba(83,34,154,.16), transparent 34%), radial-gradient(circle at 50% 100%, rgba(157,78,221,.12), transparent 30%) !important; } html body #djmaze-site.maze-discography-page .maze-discography-category, html body #djmaze-site.maze-discography-page .maze-category-title-row, html body #djmaze-site.maze-discography-page .maze-release-grid, html body #djmaze-site.maze-discography-page-hero-wide .maze-discography-category, html body #djmaze-site.maze-discography-page-hero-wide .maze-category-title-row, html body #djmaze-site.maze-discography-page-hero-wide .maze-release-grid { position: relative !important; z-index: 2 !important; } /* === Videos page hero restore biography blue shades === */ /* Restore only the Vidéos page hero colors to the same blue/white direction as the Biographie hero. */ html body #djmaze-site.maze-videos-page-wrap .biography-hero-v3__eyebrow { color: #4b9eff !important; -webkit-text-fill-color: #4b9eff !important; background: none !important; } html body #djmaze-site.maze-videos-page-wrap .biography-hero-v3__eyebrow::before { content: "" !important; display: inline-block !important; flex: 0 0 50px !important; width: 50px !important; height: 2px !important; border-radius: 999px !important; background: linear-gradient(90deg, #62b2ff, rgba(98,178,255,.18)) !important; box-shadow: 0 0 12px rgba(86,176,255,.36) !important; } html body #djmaze-site.maze-videos-page-wrap .biography-hero-v3__copy h1, html body #djmaze-site.maze-videos-page-wrap .biography-hero-v3 h1 { color: transparent !important; background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(250,252,255,.98) 22%, #73b1ff 62%, #3f87ff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-shadow: 0 8px 50px rgba(55,120,255,.16) !important; } html body #djmaze-site.maze-videos-page-wrap .biography-hero-v3__divider { width: min(720px, 100%) !important; max-width: 720px !important; height: 2px !important; margin: 28px 0 28px !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(72,141,255,.85), rgba(72,141,255,0)) !important; box-shadow: 0 0 18px rgba(79,153,255,.3) !important; } html body #djmaze-site.maze-videos-page-wrap .biography-hero-v3__copy h2, html body #djmaze-site.maze-videos-page-wrap .biography-hero-v3 h2 { color: #4ea3ff !important; -webkit-text-fill-color: #4ea3ff !important; } /* === DJ Maze SVG logo replacement final === */ /* SVG logo replaces DJ MAZE text while keeping the existing page gradients through gradient SVG variants. */ .djmaze-logo-heading { display: block !important; color: transparent !important; background: none !important; -webkit-background-clip: initial !important; background-clip: border-box !important; -webkit-text-fill-color: initial !important; text-shadow: none !important; letter-spacing: 0 !important; line-height: 1 !important; overflow: visible !important; } .djmaze-svg-logo-img { display: block !important; width: 100% !important; height: auto !important; object-fit: contain !important; object-position: left center !important; border: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } /* Home / Accueil hero */ html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .copy-block h1.djmaze-logo-heading, html body #djmaze-site.djmaze-home-site .djmaze-wp-hero h1.djmaze-logo-heading { margin: 26px 0 22px !important; max-width: min(100%, 650px) !important; } html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .copy-block h1.djmaze-logo-heading .djmaze-svg-logo-img { width: clamp(295px, 34vw, 650px) !important; max-width: 100% !important; filter: drop-shadow(0 0 34px rgba(138,86,255,.36)) !important; } /* Biographie, Vidéos, Photos, Contact hero logo sizing */ html body #djmaze-site.maze-bio-page-wrap .biography-hero-v3__copy h1.djmaze-logo-heading, html body #djmaze-site.maze-videos-page-wrap .biography-hero-v3__copy h1.djmaze-logo-heading, html body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .biography-hero-v3__copy h1.djmaze-logo-heading, html body #djmaze-site.maze-contact-page-wrap .biography-hero-v3__copy h1.djmaze-logo-heading { margin: 0 !important; max-width: min(100%, 660px) !important; white-space: normal !important; } html body #djmaze-site.maze-bio-page-wrap .biography-hero-v3__copy h1.djmaze-logo-heading .djmaze-svg-logo-img, html body #djmaze-site.maze-videos-page-wrap .biography-hero-v3__copy h1.djmaze-logo-heading .djmaze-svg-logo-img, html body #djmaze-site.maze-contact-page-wrap .biography-hero-v3__copy h1.djmaze-logo-heading .djmaze-svg-logo-img { width: clamp(300px, 35vw, 660px) !important; max-width: 100% !important; filter: drop-shadow(0 8px 42px rgba(55,120,255,.18)) !important; } html body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .biography-hero-v3__copy h1.djmaze-logo-heading .djmaze-svg-logo-img { width: clamp(300px, 35vw, 660px) !important; max-width: 100% !important; filter: drop-shadow(0 0 34px rgba(157,78,221,.28)) !important; } /* Discographie hero */ html body #djmaze-site.maze-discography-page .discography-hero-v2__copy h1.djmaze-logo-heading, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__copy h1.djmaze-logo-heading { margin: 0 0 26px !important; max-width: min(100%, 670px) !important; } html body #djmaze-site.maze-discography-page .discography-hero-v2__copy h1.djmaze-logo-heading .djmaze-svg-logo-img, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__copy h1.djmaze-logo-heading .djmaze-svg-logo-img { width: clamp(300px, 35vw, 670px) !important; max-width: 100% !important; filter: drop-shadow(0 8px 42px rgba(157,78,221,.22)) !important; } /* Shop hero */ html body #djmaze-site.maze-shop-page-v2 .maze-shop-hero-v2__svg-logo-stack { position: absolute !important; left: 0 !important; top: clamp(6px, 1.3vw, 18px) !important; width: min(86vw, 1120px) !important; max-width: 1120px !important; pointer-events: none !important; } html body #djmaze-site.maze-shop-page-v2 .maze-shop-hero-v2__svg-logo-stack .djmaze-svg-logo-img, html body #djmaze-site.maze-shop-page-v2 .djmaze-svg-logo-shop { width: min(86vw, 1120px) !important; max-width: 1120px !important; filter: drop-shadow(0 22px 46px rgba(0,0,0,.22)) !important; } html body #djmaze-site.maze-shop-page-v2 .maze-shop-hero-v2__svg-logo-stack span, html body #djmaze-site.maze-shop-page-v2 .maze-shop-hero-v2__title-stack .djmaze-svg-logo-img { display: block !important; color: initial !important; background: transparent !important; -webkit-text-fill-color: initial !important; } /* Footer logo */ html body .maze-footer-video .maze-footer-content h2.djmaze-logo-heading { margin: 0 auto 28px !important; width: min(88vw, 820px) !important; max-width: 820px !important; } html body .maze-footer-video .maze-footer-content h2.djmaze-logo-heading .djmaze-svg-logo-img { width: min(88vw, 820px) !important; margin: 0 auto !important; object-position: center center !important; filter: drop-shadow(0 24px 80px rgba(157,78,221,.42)) !important; } @media (max-width: 760px) { html body #djmaze-site.djmaze-home-site .djmaze-wp-hero .copy-block h1.djmaze-logo-heading .djmaze-svg-logo-img { width: min(90vw, 390px) !important; } html body #djmaze-site.maze-bio-page-wrap .biography-hero-v3__copy h1.djmaze-logo-heading .djmaze-svg-logo-img, html body #djmaze-site.maze-videos-page-wrap .biography-hero-v3__copy h1.djmaze-logo-heading .djmaze-svg-logo-img, html body #djmaze-site.photos-page-as-bio .photos-hero-biography-clone .biography-hero-v3__copy h1.djmaze-logo-heading .djmaze-svg-logo-img, html body #djmaze-site.maze-contact-page-wrap .biography-hero-v3__copy h1.djmaze-logo-heading .djmaze-svg-logo-img, html body #djmaze-site.maze-discography-page .discography-hero-v2__copy h1.djmaze-logo-heading .djmaze-svg-logo-img, html body #djmaze-site.maze-discography-page-hero-wide .discography-hero-v2__copy h1.djmaze-logo-heading .djmaze-svg-logo-img { width: min(88vw, 390px) !important; } html body #djmaze-site.maze-shop-page-v2 .maze-shop-hero-v2__svg-logo-stack, html body #djmaze-site.maze-shop-page-v2 .maze-shop-hero-v2__svg-logo-stack .djmaze-svg-logo-img { width: min(92vw, 430px) !important; max-width: 430px !important; } html body .maze-footer-video .maze-footer-content h2.djmaze-logo-heading, html body .maze-footer-video .maze-footer-content h2.djmaze-logo-heading .djmaze-svg-logo-img { width: min(88vw, 420px) !important; } }
| ver. 1.4 |
Github
|
.
| PHP 8.5.7 | Generation time: 0.01 |
proxy
|
phpinfo
|
Settings