* - .text-outline-aura sets color:transparent on the SPAN (own rule, not inherited). * - Own rule always beats inherited value — no specificity fight needed. * * SAFE: No @keyframes. No .fbz-fade-up / .fbz-reveal / .fbz-scale-blur rules. * fbz-animations.js owns those. */ /* ========================================================================== 1. HERO — sizing ========================================================================== */ @media (min-width: 768px) { .post-type-archive-series .hero-section { height: 72vh; min-height: 600px; } } /* Mobile hero sizing: see style.css @media max-width:767px block. */ .post-type-archive-series .hero-bg-image { opacity: 0.40; } .post-type-archive-series .hero-gradient { position: absolute; inset: 0; z-index: 1; background: linear-gradient( to bottom, rgba(15,18,31,0.50) 0%, rgba(15,18,31,0.12) 40%, rgba(15,18,31,0.85) 82%, var(--bg-deep, #0f121f) 100% ); } /* ========================================================================== 2. KICKER — yellow NO .hero-seo-title class on this element (that class sets color:#fff). ========================================================================== */ .post-type-archive-series .fbz-mixes-kicker { color: var(--accent, #fdeb19) !important; font-family: var(--font-body, 'Dosis', sans-serif); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; margin: 0; padding: 0; line-height: 1; text-align: center; } .post-type-archive-series .fbz-mixes-kicker-wrap { margin-bottom: 18px; } @media (max-width: 767px) { .post-type-archive-series .fbz-mixes-kicker { font-size: 0.6rem; letter-spacing: 0.14em; white-space: normal; } .post-type-archive-series .fbz-mixes-kicker-wrap { margin-bottom: 10px; } .post-type-archive-series .fbz-mixes-kicker-wrap .hero-line { display: none; } } /* ========================================================================== 3. FERBEATZ OUTLINED LINE Uses .hero-title + .hero-title-accent + .text-outline-aura from style.css. No stroke/color override needed here. .fbz-mixes-outlined-line just fine-tunes the bottom margin on this page. ========================================================================== */ .post-type-archive-series .fbz-mixes-outlined-line { /* hero-title-accent adds margin-top:0.3rem, margin-bottom:1.5rem by default. On the /mixes/ page the bottom margin before subtitle is fine as-is. */ margin-bottom: 0.5rem; /* * Prevent Android Chrome "Tap to Search" / Samsung text selection popup. * When color:transparent text is tapped, the browser detects a text node and * shows the Google search suggestion bar. user-select:none disables selection * on the outlined FERBEATZ line without affecting the :active/:hover fill. */ -webkit-user-select: none; user-select: none; } /* * Same fix for "DJ MIXES" outlined span in the About section h2. * .text-outline = color:transparent + yellow stroke → same Android "Tap to Search" trigger. */ .post-type-archive-series .fbz-mixes-about-header .sec-title .text-outline { -webkit-user-select: none; user-select: none; } /* * FIX: FERBEATZ tap color on mobile (Android Chrome / Firefox Android) * ───────────────────────────────────────────────────────────────────── * .text-outline-aura has color:transparent + yellow stroke at rest. * On desktop, :hover fills it yellow. On Android, :hover does NOT fire * on touch — only :active does (momentary tap highlight). * * :active below fills FERBEATZ yellow during the tap, matching the * desktop hover experience. This rule is scoped to .post-type-archive-series * so it does not affect the home hero "INTO STORIES" outline. * * ::selection overrides the browser's selection rectangle color so that * a long-press text selection shows yellow text on a semi-transparent yellow * background instead of the default "invisible text in dark box". */ .post-type-archive-series .fbz-mixes-outlined-line .text-outline-aura:active { color: var(--accent, #fdeb19); -webkit-text-stroke: 0px; } .post-type-archive-series .fbz-mixes-outlined-line .text-outline-aura::selection { color: var(--accent, #fdeb19); background: rgba(253, 235, 25, 0.25); -webkit-text-stroke: 0px; } /* ========================================================================== 4. HERO SUBTITLE ========================================================================== */ .post-type-archive-series .fbz-mixes-subtitle { color: rgba(255,255,255,0.70); font-family: var(--font-body, 'Dosis', sans-serif); font-size: 1rem; font-weight: 500; line-height: 1.6; margin: 0 auto 0; max-width: 560px; text-align: center; } @media (min-width: 768px) { .post-type-archive-series .fbz-mixes-subtitle { font-size: 1.08rem; } } /* ========================================================================== 5. HERO CTAs — side-by-side Global .hero-btns is column on mobile. Override to row here. ========================================================================== */ .post-type-archive-series .fbz-mixes-ctas { /* Mobile: column (matches home hero-btns default on mobile) */ flex-direction: column; justify-content: center; align-items: center; margin-top: 26px; gap: 12px; width: 100%; } /* Desktop only: side-by-side */ @media (min-width: 768px) { .post-type-archive-series .fbz-mixes-ctas { flex-direction: row !important; flex-wrap: wrap; width: auto; } } /* ========================================================================== 6. GRID SECTION ========================================================================== */ .post-type-archive-series .fbz-mixes-grid-section { padding: 2.5rem 0 5rem; background: var(--bg-deep, #0f121f); position: relative; } .post-type-archive-series .fbz-mixes-grid-section::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 50%; height: 1px; background: linear-gradient(to right, transparent, rgba(253,235,25,0.2), transparent); } @media (min-width: 768px) { .post-type-archive-series .fbz-mixes-grid-section { padding: 4rem 0 6rem; } } @media (max-width: 767px) { .post-type-archive-series .fbz-mixes-grid-section { padding-top: 1.75rem; padding-bottom: 120px; } } /* ========================================================================== 7. FILTER BAR ========================================================================== */ .post-type-archive-series .releases-filter-container { margin-bottom: 2.5rem; } @media (min-width: 768px) { .post-type-archive-series .releases-filter-container { margin-bottom: 3rem; text-align: center; } } .post-type-archive-series .fbz-filter-track { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%); } .post-type-archive-series .fbz-filter-track::-webkit-scrollbar { display: none; } @media (min-width: 768px) { .post-type-archive-series .fbz-filter-track { display: flex; justify-content: center; overflow: visible; -webkit-mask-image: none; mask-image: none; } } .post-type-archive-series .filter-bar { display: inline-flex; flex-wrap: nowrap; gap: 8px; background: rgba(255,255,255,0.05); padding: 8px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.07); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); white-space: nowrap; min-width: max-content; } @media (min-width: 768px) { .post-type-archive-series .filter-bar { flex-wrap: wrap; min-width: unset; justify-content: center; } } .post-type-archive-series .filter-btn { background: transparent; border: none; color: rgba(255,255,255,0.62); padding: 10px 22px; font-family: var(--font-head, 'Nohemi', 'Montserrat', sans-serif); font-weight: 700; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.06em; cursor: pointer; border-radius: 50px; transition: all 0.22s ease; white-space: nowrap; min-height: 42px; display: inline-flex; align-items: center; line-height: 1; } .post-type-archive-series .filter-btn:hover { background: rgba(253,235,25,0.1); color: var(--accent, #fdeb19); } .post-type-archive-series .filter-btn.active { background: var(--accent, #fdeb19); color: #000; box-shadow: 0 3px 18px rgba(253,235,25,0.28); } /* ========================================================================== 8. SERIES CARDS ========================================================================== */ .post-type-archive-series .genres-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 0; } @media (min-width: 520px) { .post-type-archive-series .genres-grid { grid-template-columns: repeat(2,1fr); gap: 22px; } } @media (min-width: 1024px) { .post-type-archive-series .genres-grid { grid-template-columns: repeat(4,1fr); gap: 26px; } } .post-type-archive-series .genre-card { border: 1px solid rgba(255,255,255,0.065); transition: transform .45s cubic-bezier(.165,.84,.44,1), box-shadow .45s cubic-bezier(.165,.84,.44,1), border-color .45s ease; } .post-type-archive-series .genre-card:hover { transform: translateY(-10px) scale(1.01); box-shadow: 0 22px 55px rgba(253,235,25,.15), 0 0 0 1px rgba(253,235,25,.14); border-color: rgba(253,235,25,.14); } .post-type-archive-series .genre-card:hover .genre-bg { transform: scale(1.08); } .post-type-archive-series .genre-overlay { background: linear-gradient( to top, rgba(10,13,28,.97) 0%, rgba(10,13,28,.45) 52%, rgba(10,13,28,.08) 100% ); transition: background .4s ease; } .post-type-archive-series .genre-card:hover .genre-overlay { background: linear-gradient( to top, rgba(10,13,28,.99) 0%, rgba(10,13,28,.62) 52%, rgba(10,13,28,.12) 100% ); } .post-type-archive-series .genre-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, transparent, var(--accent,#fdeb19), transparent); opacity: 0; transition: opacity .38s ease; z-index: 3; } .post-type-archive-series .genre-card:hover::after { opacity: 1; } .post-type-archive-series .genre-content { transform: translateY(5px); transition: transform .38s ease; } .post-type-archive-series .genre-card:hover .genre-content { transform: translateY(0); } .post-type-archive-series .genre-arrow { color: var(--accent,#fdeb19); font-size: 1rem; opacity: 0; transform: translateX(-8px); transition: opacity .28s ease, transform .28s ease; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; } .post-type-archive-series .genre-arrow::after { content: ''; display: block; width: 18px; height: 1px; background: var(--accent,#fdeb19); transition: width .28s ease; } .post-type-archive-series .genre-card:hover .genre-arrow { opacity: 1; transform: translateX(0); } .post-type-archive-series .genre-card:hover .genre-arrow::after { width: 28px; } /* ========================================================================== 9. ABOUT SECTION ========================================================================== */ .post-type-archive-series .fbz-mixes-about-section { background: linear-gradient( 180deg, var(--bg-deep,#0f121f) 0%, var(--bg-dark,#191d31) 35%, var(--bg-dark,#191d31) 65%, var(--bg-deep,#0f121f) 100% ); position: relative; padding: 6rem 0 8rem; overflow: hidden; } /* Watermark */ .post-type-archive-series .fbz-mixes-about-section::before { content: 'MIXES'; position: absolute; font-family: var(--font-head,'Nohemi','Montserrat',sans-serif); font-size: 22vw; font-weight: 900; text-transform: uppercase; color: rgba(253,235,25,.018); white-space: nowrap; pointer-events: none; user-select: none; top: 50%; left: 50%; transform: translate(-50%,-50%); letter-spacing: -.05em; z-index: 0; line-height: 1; } /* Ambient glow */ .post-type-archive-series .fbz-mixes-about-section::after { content: ''; position: absolute; top: 8%; left: -6%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(253,235,25,.06), transparent 65%); border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; } .post-type-archive-series .fbz-mixes-about-header { position: relative; z-index: 1; margin-bottom: 4rem; } /* ========================================================================== 10. GLASS PANEL ========================================================================== */ .post-type-archive-series .fbz-mixes-glass-panel { background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 3rem 2.5rem; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07); transition: transform .45s ease, box-shadow .45s ease; max-width: 920px; margin: 0 auto; position: relative; z-index: 1; } .post-type-archive-series .fbz-mixes-glass-panel:hover { transform: translateY(-5px); box-shadow: 0 28px 72px rgba(0,0,0,.5), 0 0 40px rgba(253,235,25,.07), inset 0 1px 0 rgba(255,255,255,.09); } .post-type-archive-series .fbz-mixes-glass-panel::before { content: ''; position: absolute; left: 0; top: 10%; bottom: 10%; width: 3px; background: linear-gradient( to bottom, transparent, var(--accent,#fdeb19) 30%, var(--accent,#fdeb19) 70%, transparent ); border-radius: 3px; opacity: .65; } @media (min-width: 768px) { .post-type-archive-series .fbz-mixes-glass-panel { padding: 4.5rem 5rem; } } /* ========================================================================== 11. GUTENBERG CONTENT TYPOGRAPHY ========================================================================== */ .post-type-archive-series .fbz-mixes-archive-content h2 { font-family: var(--font-head,'Nohemi','Montserrat',sans-serif); font-size: 1.85rem; font-weight: 900; color: #fff; line-height: 1.1; margin-top: 2.5rem; margin-bottom: 1.25rem; position: relative; padding-left: 1.5rem; text-transform: uppercase; letter-spacing: -.01em; } .post-type-archive-series .fbz-mixes-archive-content h2:first-child { margin-top: 0; } .post-type-archive-series .fbz-mixes-archive-content h2::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(to bottom, var(--accent,#fdeb19), transparent); border-radius: 2px; } .post-type-archive-series .fbz-mixes-archive-content h3 { font-family: var(--font-head,'Nohemi','Montserrat',sans-serif); font-size: 1rem; font-weight: 700; color: var(--accent,#fdeb19); margin-top: 2rem; margin-bottom: .85rem; letter-spacing: .06em; text-transform: uppercase; display: inline-flex; align-items: center; padding: .45rem 1.25rem; background: rgba(253,235,25,.07); border-radius: 50px; border: 1px solid rgba(253,235,25,.18); transition: background .3s ease, transform .3s ease; } .post-type-archive-series .fbz-mixes-archive-content h3:hover { background: rgba(253,235,25,.12); transform: translateX(5px); } .post-type-archive-series .fbz-mixes-archive-content p { font-family: var(--font-body,'Dosis',sans-serif); font-size: 1.05rem; color: #cbd5e1; margin-bottom: 1.5rem; line-height: 1.85; } .post-type-archive-series .fbz-mixes-archive-content p:first-of-type { font-size: 1.1rem; color: #e2e8f0; } .post-type-archive-series .fbz-mixes-archive-content strong { color: #fff; font-weight: 700; background: linear-gradient(to right, rgba(253,235,25,.12), transparent); padding: 0 4px; border-radius: 3px; } .post-type-archive-series .fbz-mixes-archive-content ul, .post-type-archive-series .fbz-mixes-archive-content ol { margin-left: 1.75rem; margin-bottom: 1.75rem; color: #94a3b8; } .post-type-archive-series .fbz-mixes-archive-content li { margin-bottom: .85rem; line-height: 1.7; font-size: 1rem; } .post-type-archive-series .fbz-mixes-archive-content ul li::marker, .post-type-archive-series .fbz-mixes-archive-content ol li::marker { color: var(--accent,#fdeb19); font-weight: 700; } .post-type-archive-series .fbz-mixes-archive-content a { color: var(--accent,#fdeb19); text-decoration: none; border-bottom: 1px solid rgba(253,235,25,.28); transition: color .2s ease, border-color .2s ease; } .post-type-archive-series .fbz-mixes-archive-content a:hover { color: #fff; border-bottom-color: var(--accent,#fdeb19); } @media (min-width: 768px) { .post-type-archive-series .fbz-mixes-archive-content h2 { font-size: 2.4rem; padding-left: 2rem; } .post-type-archive-series .fbz-mixes-archive-content h2::before { width: 5px; } } /* ========================================================================== 12. MOBILE — player clearance ========================================================================== */ @media (max-width: 767px) { .post-type-archive-series .fbz-mixes-about-section { padding-bottom: 140px; } .post-type-archive-series .fbz-mixes-about-section::before { font-size: 40vw; } }