/* ============================================================ DJ Beyond Capo — bundled stylesheet 1:1 port of the Lovable design (src/index.css + per-component CSS) ============================================================ */ /* ---- Reset + base body ------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body.djbc-theme { margin: 0; background: #0a0a0a; color: #f5e6d3; font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.6; min-height: 100vh; padding-bottom: 68px; /* room for bottom player */ overflow-x: hidden; } body.djbc-theme img { max-width: 100%; height: auto; display: block; } body.djbc-theme a { color: inherit; text-decoration: none; } body.djbc-theme h1, body.djbc-theme h2, body.djbc-theme h3, body.djbc-theme h4 { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: #ffffff; margin: 0; } body.djbc-theme p { margin: 0; } body.djbc-theme button { font-family: inherit; cursor: pointer; } /* ---- Bilingual visibility: data-lang on hides the inverse ---- */ html[data-lang="hu"] [data-lang="en"] { display: none !important; } html[data-lang="en"] [data-lang="hu"] { display: none !important; } /* ---- Reduced motion -------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================ Shiny CTA Button — exact 1:1 port of Lovable's .shiny-cta ============================================================ */ @property --gradient-angle { syntax: ""; initial-value: 0deg; inherits: false; } @property --gradient-angle-offset { syntax: ""; initial-value: 0deg; inherits: false; } @property --gradient-percent { syntax: ""; initial-value: 5%; inherits: false; } @property --gradient-shine { syntax: ""; initial-value: white; inherits: false; } .shiny-cta { --shiny-cta-bg: #000000; --shiny-cta-bg-subtle: #1a1818; --shiny-cta-fg: #ffffff; --shiny-cta-highlight: #f97316; --shiny-cta-highlight-subtle: #ffb27a; --animation: gradient-angle linear infinite; --duration: 3s; --shadow-size: 2px; --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1); isolation: isolate; position: relative; overflow: hidden; cursor: pointer; outline-offset: 4px; padding: 1rem 2.25rem; font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.2; font-weight: 500; border: 1px solid transparent; border-radius: 360px; color: var(--shiny-cta-fg); background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box, conic-gradient( from calc(var(--gradient-angle) - var(--gradient-angle-offset)), transparent, var(--shiny-cta-highlight) var(--gradient-percent), var(--gradient-shine) calc(var(--gradient-percent) * 2), var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3), transparent calc(var(--gradient-percent) * 4) ) border-box; box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle); transition: var(--transition); transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .shiny-cta::before, .shiny-cta::after, .shiny-cta span::before { content: ""; pointer-events: none; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; translate: -50% -50%; z-index: -1; } .shiny-cta:active { translate: 0 1px; } .shiny-cta::before { --size: calc(100% - var(--shadow-size) * 3); --position: 2px; --space: calc(var(--position) * 2); width: var(--size); height: var(--size); background: radial-gradient(circle at var(--position) var(--position), white calc(var(--position) / 4), transparent 0) padding-box; background-size: var(--space) var(--space); background-repeat: space; mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black); border-radius: inherit; opacity: 0.4; z-index: -1; } .shiny-cta::after { width: 100%; height: 100%; background: linear-gradient(-50deg, transparent, var(--shiny-cta-highlight), transparent); mask-image: radial-gradient(ellipse at bottom, transparent 40%, black); border-radius: inherit; opacity: 0.6; } .shiny-cta span { z-index: 1; position: relative; display: inline-flex; align-items: center; gap: 0.5rem; } .shiny-cta span::before { --size: calc(100% + 1rem); width: var(--size); height: var(--size); box-shadow: inset 0 -1ex 2rem 4px var(--shiny-cta-highlight); opacity: 0; transition: opacity var(--transition); animation: calc(var(--duration) * 1.5) breathe linear infinite; } .shiny-cta, .shiny-cta::before { animation: var(--animation) var(--duration), var(--animation) calc(var(--duration) / 0.4) reverse paused; animation-composition: add; } .shiny-cta:is(:hover, :focus-visible) { --gradient-percent: 20%; --gradient-angle-offset: 95deg; --gradient-shine: var(--shiny-cta-highlight-subtle); } .shiny-cta:is(:hover, :focus-visible), .shiny-cta:is(:hover, :focus-visible)::before { animation-play-state: running; } .shiny-cta:is(:hover, :focus-visible) span::before { opacity: 1; } @keyframes gradient-angle { to { --gradient-angle: 360deg; } } @keyframes shimmer { to { rotate: 360deg; } } @keyframes breathe { from, to { scale: 1; } 50% { scale: 1.2; } } /* ============================================================ Genre page animations (1:1 from Lovable index.css) ============================================================ */ @keyframes eqBounce { 0% { transform: scaleY(0.3); } 100% { transform: scaleY(1); } } @keyframes gridMove { 0% { transform: translate(0, 0); } 100% { transform: translate(60px, 60px); } } @keyframes starDrift { 0% { transform: translateY(0); opacity: 0.3; } 100% { transform: translateY(-100vh); opacity: 0; } } @keyframes waveMove { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes pulseOut { 0% { transform: scale(0.5); opacity: 0.4; } 100% { transform: scale(2.5); opacity: 0; } } @keyframes barWidth { 0% { width: 20%; } 100% { width: 80%; } } @keyframes scanLine { 0% { top: 0%; } 50% { top: 100%; } 100% { top: 0%; } } @keyframes orbit { 0% { transform: rotate(0deg) translateX(80px); } 100% { transform: rotate(360deg) translateX(80px); } } /* Fade-in used by motion.div initial/animate stand-ins */ @keyframes djbcFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .djbc-fade-in { animation: djbcFadeIn 0.6s cubic-bezier(0.25, 1, 0.5, 1) both; } /* whileInView analogue — applied via IntersectionObserver in main.js */ .djbc-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; } .djbc-reveal.is-visible { opacity: 1; transform: none; } /* ============================================================ Layout primitives ============================================================ */ .djbc-page { background: #0a0a0a; min-height: 100vh; } .djbc-empty { color: rgba(245,230,211,0.4); text-align: center; padding: 4rem 1rem; font-size: 0.95rem; } .djbc-mt-1 { margin-top: 1rem; } .djbc-mb-7 { margin-bottom: 1.75rem; } /* ============================================================ Header (default + variants) ============================================================ */ .djbc-header { position: sticky; top: 0; z-index: 40; background: rgba(10,10,10,0.9); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid rgba(255,255,255,0.05); } .djbc-header-narrow .djbc-header-inner { max-width: 768px; } .djbc-header-inner { max-width: 1280px; margin: 0 auto; height: 56px; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .djbc-header-left, .djbc-header-right { display: flex; align-items: center; gap: 1rem; } .djbc-wordmark { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em; color: rgba(255,255,255,0.9); font-family: 'Space Grotesk', sans-serif; text-decoration: none; } .djbc-wordmark:hover { color: rgba(255,255,255,1); } .djbc-wordmark-genred { color: var(--djbc-g-accent, #f97316); } .djbc-nav { display: flex; align-items: center; gap: 1rem; } @media (min-width: 640px) { .djbc-nav { gap: 1.5rem; } } .djbc-nav-link { font-size: 0.75rem; color: rgba(255,255,255,0.55); letter-spacing: 0.05em; text-transform: uppercase; transition: color 0.2s ease; display: inline-block; } .djbc-nav-link:hover { color: rgba(255,255,255,0.85); } .djbc-header-back { font-size: 0.75rem; color: rgba(255,255,255,0.3); display: inline-flex; align-items: center; gap: 0.5rem; transition: color 0.2s ease; } .djbc-header-back:hover { color: rgba(255,255,255,0.6); } /* ============================================================ Language toggle (HU/EN) — 1:1 port of GradientToggle.tsx ============================================================ */ .djbc-lang-toggle { display: inline-flex; gap: 0.125rem; padding: 0.125rem; border-radius: 9999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); } .djbc-lang-btn { flex: 1; border-radius: 9999px; padding: 0.25rem 0.625rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); background: transparent; border: 0; transition: all 0.3s ease-out; cursor: pointer; } .djbc-lang-btn:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.05); } .djbc-lang-btn.is-active { color: #000; background: linear-gradient(to right, #fb923c, #f97316, #f59e0b); box-shadow: 0 4px 6px -1px rgba(249,115,22,0.3); } .djbc-lang-btn.is-active:hover { background: linear-gradient(to right, #f97316, #ea580c, #d97706); } .djbc-lang-btn:focus-visible { outline: 2px solid rgba(251,146,60,0.6); outline-offset: 2px; } /* ============================================================ Hero (home + genre) ============================================================ */ .djbc-hero { position: relative; overflow: hidden; } .djbc-hero-home { height: 50vh; min-height: 400px; } .djbc-hero-genre { height: 60vh; min-height: 450px; display: flex; align-items: flex-end; } .djbc-hero-mix { height: 40vh; min-height: 320px; padding-top: 56px; display: flex; align-items: flex-end; } .djbc-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5); } .djbc-hero-bg-genre { filter: brightness(0.45); } .djbc-hero-bg-mix { filter: brightness(0.35) saturate(0.7); } .djbc-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, #0a0a0a 0%, transparent 100%); } .djbc-hero-overlay-mix { position: absolute; inset: 0; } .djbc-hero-inner { position: relative; z-index: 10; max-width: 1280px; margin: 0 auto; padding: 0 1.5rem 3rem; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } .djbc-hero-mix .djbc-hero-inner { max-width: 1024px; padding-bottom: 2rem; } .djbc-hero-title { font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem); font-weight: 700; color: #fff; margin-bottom: 0.75rem; font-family: 'Space Grotesk', sans-serif; } .djbc-hero-subtitle { color: rgba(255,255,255,0.66); /* AA contrast on the dark hero */ font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem); max-width: 32rem; margin-bottom: 1.5rem; } .djbc-hero-cta { width: fit-content; --shiny-cta-highlight: #f97316; --shiny-cta-highlight-subtle: #ffb27a; } /* Genre hero specifics */ .djbc-genre-back { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: rgba(255,255,255,0.3); margin-bottom: 1.5rem; transition: color 0.2s ease; } .djbc-genre-back:hover { color: rgba(255,255,255,0.6); } .djbc-genre-h1 { font-size: clamp(3rem, 6vw + 1rem, 4.5rem); font-weight: 700; color: #fff; margin-bottom: 0.75rem; letter-spacing: -0.025em; font-family: 'Space Grotesk', sans-serif; } .djbc-genre-tagline { font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem); color: rgba(255,255,255,0.66); /* AA contrast on the dark hero */ margin-bottom: 1.5rem; max-width: 32rem; } .djbc-genre-accent-line { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; } .djbc-genre-play { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600; color: #000; border: 0; cursor: pointer; transition: all 0.3s ease; } .djbc-genre-play:hover { transform: translateY(-2px); box-shadow: 0 20px 35px -5px rgba(0,0,0,0.6); } /* Mix hero specifics */ .djbc-mix-eyebrow { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.75rem; display: block; } .djbc-mix-h1 { font-size: clamp(1.875rem, 4vw + 0.5rem, 3rem); font-weight: 700; margin-bottom: 0.75rem; } .djbc-mix-meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; } .djbc-mix-meta-item { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; } .djbc-mix-meta-date { font-size: 0.75rem; } .djbc-mix-play-cta { width: fit-content; } /* ============================================================ About + Stats ============================================================ */ .djbc-about { max-width: 1280px; margin: 0 auto; padding: 5rem 1.5rem; } .djbc-section-title { font-size: clamp(1.875rem, 2vw + 1rem, 2.25rem); margin-bottom: 2rem; color: #fff; font-family: 'Space Grotesk', sans-serif; } .djbc-about-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; } @media (min-width: 768px) { .djbc-about-grid { grid-template-columns: 1fr 1fr; } } .djbc-about-copy { display: flex; flex-direction: column; gap: 1rem; } .djbc-about-copy p { font-size: 0.875rem; color: rgba(255,255,255,0.6); line-height: 1.7; margin: 0; } .djbc-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .djbc-stat { border-radius: 0.5rem; padding: 1.5rem; text-align: center; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); } .djbc-stat-value { font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 0.25rem; font-family: 'Space Grotesk', sans-serif; } .djbc-stat-label { font-size: 0.6875rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.1em; } /* ============================================================ Eyebrow + section title styles ============================================================ */ .djbc-eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,255,255,0.3); margin: 0 0 1.5rem; font-weight: 500; font-family: 'Inter', sans-serif; } /* ============================================================ Pills ============================================================ */ .djbc-pill-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .djbc-pill-row-stats { gap: 0.5rem; flex-shrink: 0; } .djbc-pill { font-size: 0.625rem; padding: 0.25rem 0.75rem; border-radius: 0.25rem; color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.06); font-weight: 500; display: inline-flex; align-items: center; } .djbc-stat-pill { padding: 0.375rem 0.75rem; } /* ============================================================ Genre grids ============================================================ */ .djbc-genre-grid-section { max-width: 1280px; margin: 0 auto; padding: 3rem 1.5rem; } .djbc-genre-grid { display: grid; gap: 0.5rem; } .djbc-genre-grid-5col { grid-template-columns: 1fr; } @media (min-width: 640px) { .djbc-genre-grid-5col { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .djbc-genre-grid-5col { grid-template-columns: repeat(5, 1fr); } } .djbc-genre-grid-2col { grid-template-columns: 1fr; gap: 0.75rem; } @media (min-width: 768px) { .djbc-genre-grid-2col { grid-template-columns: 1fr 1fr; } } .djbc-genre-grid-3col { grid-template-columns: 1fr; gap: 0.5rem; } @media (min-width: 640px) { .djbc-genre-grid-3col { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .djbc-genre-grid-3col { grid-template-columns: repeat(3, 1fr); } } /* Card */ .djbc-genre-card { position: relative; display: block; border-radius: 4px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; color: inherit; text-decoration: none; background: var(--djbc-card-bg, #0a0a0a); } .djbc-genre-card:hover { transform: scale(1.01); } .djbc-genre-card-sm { height: 9rem; } .djbc-genre-card-md { height: 7rem; } .djbc-genre-card-lg { height: 260px; border-radius: 0.5rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); } .djbc-genre-card-lg:hover { transform: scale(1.025) translateY(-4px); box-shadow: 0 25px 50px -12px var(--djbc-card-accent), 0 0 0 1px var(--djbc-card-accent); border-color: rgba(255,255,255,0.25); } .djbc-genre-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; filter: brightness(0.6); } .djbc-genre-card-lg .djbc-genre-card-img { filter: brightness(0.55) saturate(1.05); transition: transform 0.7s ease; } .djbc-genre-card-md .djbc-genre-card-img { filter: brightness(0.4); } .djbc-genre-card:hover .djbc-genre-card-img { transform: scale(1.05); } .djbc-genre-card-lg:hover .djbc-genre-card-img { transform: scale(1.1); } .djbc-genre-card-grad { position: absolute; inset: 0; background: linear-gradient(135deg, var(--djbc-card-bg) 0%, transparent 100%); opacity: 0.8; transition: opacity 0.3s ease; } .djbc-genre-card-lg .djbc-genre-card-grad { opacity: 0.5; } .djbc-genre-card-lg:hover .djbc-genre-card-grad { opacity: 0.7; } .djbc-genre-card-grad-md { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,0.8) 0%, transparent 100%); } .djbc-genre-card-bar { position: absolute; bottom: 0; left: 0; height: 2px; width: 0; background-color: var(--djbc-card-accent, #f97316); transition: width 0.3s ease; } .djbc-genre-card-lg .djbc-genre-card-bar { transition: width 0.5s ease; } .djbc-genre-card:hover .djbc-genre-card-bar { width: 100%; } .djbc-genre-card-body { position: relative; z-index: 10; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 1rem; } .djbc-genre-card-lg .djbc-genre-card-body { padding: 1.5rem; } .djbc-genre-card-title { font-size: 1rem; font-weight: 700; color: rgba(255,255,255,0.9); margin: 0; } .djbc-genre-card-title-lg { font-size: 1.5rem; font-weight: 700; color: #fff; margin: 0 0 0.5rem; } @media (min-width: 768px) { .djbc-genre-card-title-lg { font-size: 1.875rem; } } .djbc-genre-card-tagline { font-size: 0.875rem; color: rgba(255,255,255,0.4); max-width: 24rem; margin: 0; } .djbc-genre-card-foot { display: flex; align-items: center; justify-content: space-between; } .djbc-genre-card-foot-lg { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; } .djbc-genre-card-bpm { font-size: 0.625rem; color: rgba(255,255,255,0.3); } .djbc-genre-card-arrow { color: rgba(255,255,255,0); transition: color 0.3s ease, transform 0.3s ease; transform: translateX(-4px); } .djbc-genre-card:hover .djbc-genre-card-arrow { color: rgba(255,255,255,0.6); transform: translateX(0); } .djbc-genre-card-actions { display: flex; align-items: center; gap: 0.5rem; } .djbc-genre-play-orb { position: relative; width: 2rem; height: 2rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3); } .djbc-genre-play-orb svg { position: relative; z-index: 10; margin-left: 2px; } /* ============================================================ Genres-hub-specific ============================================================ */ .djbc-page-genres { padding-bottom: 4rem; } .djbc-genreshub-head { max-width: 1280px; margin: 0 auto; padding: 4rem 1.5rem 2.5rem; } .djbc-genreshub-title { font-size: clamp(1.875rem, 3vw + 1rem, 3rem); font-weight: 700; color: #fff; margin: 0 0 0.75rem; font-family: 'Space Grotesk', sans-serif; } .djbc-genreshub-subtitle { color: rgba(255,255,255,0.3); font-size: 0.875rem; margin: 0; } .djbc-genreshub-grid-wrap { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem 5rem; } /* ============================================================ Genre page: navbar, intro bar, related ============================================================ */ .djbc-genre-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background 0.3s ease; background: rgba(10,10,10,0.6); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid rgba(255,255,255,0.05); } .djbc-genre-nav.is-scrolled { background: rgba(10,10,10,0.95); } .djbc-genre-nav-inner { max-width: 1280px; margin: 0 auto; height: 56px; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .djbc-page-genre .djbc-hero-genre { padding-top: 0; } .djbc-page-genre { padding-top: 56px; padding-bottom: 4rem; } .djbc-intro-bar { padding: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.05); background: #0a0a0a; } .djbc-intro-bar-inner { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 1rem; } @media (min-width: 768px) { .djbc-intro-bar-inner { flex-direction: row; align-items: center; } } .djbc-intro-desc { font-size: 0.875rem; line-height: 1.7; max-width: 32rem; color: rgba(255,255,255,0.62); /* AA contrast */ margin: 0; } .djbc-mix-grid-section { padding: 3rem 1.5rem; background: #0a0a0a; } .djbc-mix-grid-inner { max-width: 1280px; margin: 0 auto; } .djbc-mix-grid-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; } .djbc-sort-tabs { display: flex; gap: 0.25rem; } .djbc-sort-tab { padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.6875rem; background: transparent; color: rgba(255,255,255,0.3); border: 0; transition: background 0.2s ease, color 0.2s ease; } .djbc-sort-tab.is-active { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); } .djbc-mix-list { display: flex; flex-direction: column; gap: 1px; } .djbc-mix-row { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto auto auto; gap: 1rem; align-items: center; padding: 0.75rem 1rem; border-radius: 4px; transition: background 0.2s ease; } @media (min-width: 768px) { .djbc-mix-row { grid-template-columns: 3rem minmax(11rem, 11rem) minmax(0, 1fr) auto auto; } } .djbc-mix-row:hover { background: rgba(255,255,255,0.02); } .djbc-mix-row.is-playing { background: rgba(255,255,255,0.04); } .djbc-mix-row-link { min-width: 0; } .djbc-mix-row-title { font-size: 0.875rem; font-weight: 500; color: rgba(255,255,255,0.85); margin: 0; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .djbc-mix-row.is-playing .djbc-mix-row-title { color: var(--djbc-row-accent, #f97316); } .djbc-mix-row-sub { font-size: 0.625rem; color: rgba(255,255,255,0.25); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .djbc-mix-row-wave { display: none; flex: 1; align-items: flex-end; gap: 1px; height: 1.25rem; } @media (min-width: 768px) { .djbc-mix-row-wave { display: flex; } } .djbc-mix-row-bar { flex: 1; border-radius: 1px; background: rgba(255,255,255,0.06); } .djbc-mix-row-plays { font-size: 0.625rem; color: rgba(255,255,255,0.25); flex-shrink: 0; } .djbc-mix-row-dur { font-size: 0.625rem; color: rgba(255,255,255,0.2); flex-shrink: 0; width: 3rem; text-align: right; } /* Related */ .djbc-related { padding: 3rem 1.5rem; border-top: 1px solid rgba(255,255,255,0.05); background: #0a0a0a; } .djbc-related-inner { max-width: 1280px; margin: 0 auto; } /* Footer CTA */ .djbc-footer-cta { padding: 4rem 1.5rem; border-top: 1px solid rgba(255,255,255,0.05); background: #0a0a0a; } .djbc-footer-cta-inner { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; } @media (min-width: 768px) { .djbc-footer-cta-inner { flex-direction: row; align-items: center; } .djbc-footer-cta-text { text-align: center; flex: 1; } } .djbc-footer-cta-title { font-size: 1.25rem; font-weight: 700; color: rgba(255,255,255,0.9); margin: 0 0 0.25rem; font-family: 'Space Grotesk', sans-serif; } .djbc-footer-cta-sub { font-size: 0.875rem; color: rgba(255,255,255,0.3); margin: 0; } .djbc-pill-cta { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600; color: #000; border: 0; cursor: pointer; background: #f97316; transition: all 0.3s ease; text-decoration: none; box-shadow: 0 10px 25px -5px rgba(249,115,22,0.4); } .djbc-pill-cta:hover { transform: translateY(-2px); box-shadow: 0 20px 35px -5px rgba(249,115,22,0.5); } .djbc-pill-cta:focus-visible { outline: 2px solid rgba(251,146,60,0.6); outline-offset: 4px; } /* ============================================================ Mix page: navbar, waveform, tracklist, comments ============================================================ */ .djbc-mix-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid rgba(255,255,255,0.05); } .djbc-mix-nav-inner { max-width: 1024px; margin: 0 auto; height: 56px; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; } .djbc-mix-nav-back { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; transition: opacity 0.2s ease; } .djbc-mix-nav-back:hover { opacity: 0.8; } /* Tracklist */ .djbc-tracklist { padding: 2.5rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.05); background: #0a0a0a; } .djbc-tracklist-inner { max-width: 1024px; margin: 0 auto; } .djbc-tracklist-h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 600; color: rgba(255,255,255,0.9); margin: 0 0 1.5rem; } .djbc-tracklist-count { margin-left: 0.5rem; font-size: 0.75rem; font-weight: 400; color: rgba(255,255,255,0.25); } .djbc-tracklist-table { border-radius: 0.5rem; overflow: hidden; border: 1px solid rgba(255,255,255,0.05); background: rgba(255,255,255,0.02); } .djbc-tracklist-thead, .djbc-tracklist-row { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: 0.5rem; padding: 0.75rem 1rem; align-items: center; } @media (min-width: 768px) { .djbc-tracklist-thead, .djbc-tracklist-row { grid-template-columns: 3rem 1fr minmax(200px, 1fr); } } .djbc-tracklist-thead { padding-top: 0.625rem; padding-bottom: 0.625rem; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,255,255,0.25); } .djbc-tracklist-row { border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.2s ease; } .djbc-tracklist-row:last-child { border-bottom: 0; } .djbc-tracklist-row:hover { background: rgba(255,255,255,0.04); } .djbc-tracklist-num { font-size: 0.875rem; font-weight: 700; font-variant-numeric: tabular-nums; } .djbc-tracklist-title { font-size: 0.9375rem; font-weight: 500; color: rgba(255,255,255,0.88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 1rem; transition: color 0.2s ease; } .djbc-tracklist-row:hover .djbc-tracklist-title { color: rgba(255,255,255,1); } .djbc-tracklist-style-col { display: flex; justify-content: flex-end; } @media (min-width: 768px) { .djbc-tracklist-style-col { justify-content: flex-start; } } .djbc-tracklist-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.125rem 0.5rem; border-radius: 4px; font-size: 0.6875rem; font-weight: 500; } .djbc-tracklist-summary { margin-top: 1.5rem; padding: 1.25rem; border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.05); background: rgba(255,255,255,0.02); } .djbc-tracklist-summary-h3 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; margin: 0 0 0.75rem; font-weight: 700; } .djbc-tracklist-summary-text { font-size: 0.875rem; line-height: 1.7; color: rgba(255,255,255,0.6); margin: 0 0 1rem; } .djbc-tracklist-styles { display: flex; flex-wrap: wrap; gap: 0.5rem; } .djbc-tracklist-style-pill { padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 600; } /* Comments */ .djbc-comments { padding: 2.5rem 1.5rem; } .djbc-comments-inner { max-width: 1024px; margin: 0 auto; } .djbc-comments-h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 600; margin: 0 0 1.5rem; } .djbc-comments-count { font-size: 0.875rem; font-weight: 400; opacity: 0.6; } .djbc-comments-form { margin-bottom: 2rem; padding: 1rem; border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.05); } .djbc-comments-name { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 0.5rem; margin-bottom: 0.75rem; font-size: 0.875rem; outline: none; } .djbc-comments-name::placeholder { color: rgba(255,255,255,0.2); } .djbc-comments-row { display: flex; gap: 0.5rem; align-items: center; } .djbc-comments-text { flex: 1; background: transparent; border: 0; font-size: 0.875rem; outline: none; } .djbc-comments-text::placeholder { color: rgba(255,255,255,0.2); } .djbc-comments-submit { width: 2rem; height: 2rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 0; cursor: pointer; transition: opacity 0.2s ease; } .djbc-comments-submit:hover { opacity: 0.8; } .djbc-comments-submit:disabled { opacity: 0.3; cursor: not-allowed; } .djbc-comments-list { display: flex; flex-direction: column; gap: 0.75rem; } .djbc-comments-empty { font-size: 0.875rem; text-align: center; padding: 2rem 0; margin: 0; } .djbc-comment { padding: 1rem; border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.05); } .djbc-comment-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .djbc-comment-author { font-size: 0.75rem; font-weight: 500; } .djbc-comment-date { font-size: 0.625rem; } .djbc-comment-text { font-size: 0.875rem; margin: 0; } /* ============================================================ Booking page ============================================================ */ .djbc-page-booking { padding-bottom: 5rem; min-height: 100vh; } .djbc-booking-wrap { max-width: 768px; margin: 0 auto; padding: 3rem 1.5rem 0; } .djbc-booking-title { font-size: 1.875rem; font-weight: 700; color: #fff; margin: 0 0 0.5rem; font-family: 'Space Grotesk', sans-serif; } .djbc-booking-subtitle { font-size: 0.875rem; color: rgba(255,255,255,0.3); margin: 0 0 2.5rem; } .djbc-booking-form { display: flex; flex-direction: column; gap: 1.25rem; } .djbc-form-row { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { .djbc-form-row { grid-template-columns: 1fr 1fr; } } .djbc-field { display: flex; flex-direction: column; gap: 0.5rem; } .djbc-field-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,255,255,0.3); font-weight: 500; } .djbc-input { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.05); border-radius: 4px; padding: 0.625rem 0.75rem; font-size: 0.875rem; color: rgba(255,255,255,0.8); outline: none; transition: border-color 0.2s ease; font-family: inherit; } .djbc-input:focus { border-color: rgba(255,255,255,0.2); } .djbc-textarea { resize: none; } .djbc-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; padding-right: 2.5rem; } .djbc-select option { background: #171717; color: #fff; } .djbc-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .djbc-booking-error { color: #fca5a5; font-size: 0.8125rem; background: rgba(252,165,165,0.08); border: 1px solid rgba(252,165,165,0.2); padding: 0.625rem 0.875rem; border-radius: 4px; } .djbc-booking-success { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; max-width: 28rem; margin: 0 auto; padding: 2rem 1.5rem; gap: 0.75rem; } .djbc-booking-success svg { margin-bottom: 0.5rem; } .djbc-booking-back { font-size: 0.875rem; color: rgba(255,255,255,0.3); transition: color 0.2s ease; margin-top: 1.5rem; } .djbc-booking-back:hover { color: rgba(255,255,255,0.6); } /* ============================================================ Bottom Player ============================================================ */ .djbc-bottom-player { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; border-top: 1px solid rgba(255,255,255,0.05); background: rgba(10,10,10,0.95); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); } .djbc-bottom-player[hidden] { display: none; } .djbc-seekbar-mobile { height: 0.5rem; cursor: pointer; } @media (min-width: 640px) { .djbc-seekbar-mobile { display: none; } } .djbc-seekbar-mobile-fill { height: 100%; background: rgba(255,255,255,0.05); position: relative; } .djbc-seekbar-mobile-fill::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: var(--seek, 0%); background: #f97316; transition: width 0.15s ease; } .djbc-bp-row { max-width: 1536px; margin: 0 auto; height: 4rem; padding: 0 1rem; display: flex; align-items: center; gap: 1rem; } .djbc-bp-meta { min-width: 0; flex: 1 1 auto; } @media (min-width: 640px) { .djbc-bp-meta { flex: 0 0 auto; max-width: 14rem; } } .djbc-bp-title { font-size: 0.75rem; font-weight: 500; color: rgba(255,255,255,0.9); margin: 0; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .djbc-bp-sub { font-size: 0.625rem; color: rgba(255,255,255,0.4); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .djbc-bp-wave { display: none; flex: 1; align-items: flex-end; gap: 1px; height: 2rem; margin: 0 1rem; cursor: pointer; } @media (min-width: 640px) { .djbc-bp-wave { display: flex; } } .djbc-bp-bar { flex: 1; border-radius: 1px; background: rgba(255,255,255,0.08); transition: background 0.1s ease; } .djbc-bp-bar.is-played { background: #f97316; } .djbc-bp-time { font-size: 0.625rem; color: rgba(255,255,255,0.3); flex-shrink: 0; display: none; } @media (min-width: 768px) { .djbc-bp-time { display: inline; } } .djbc-bp-volume { position: relative; flex-shrink: 0; display: flex; align-items: center; } .djbc-bp-volbtn { color: rgba(255,255,255,0.4); background: transparent; border: 0; padding: 0.25rem; transition: color 0.2s ease; } .djbc-bp-volbtn:hover { color: rgba(255,255,255,0.8); } .djbc-bp-volslider { display: none; } @media (min-width: 768px) { .djbc-bp-volume:hover .djbc-bp-volslider { display: block; width: 6rem; margin-left: 0.5rem; } } .djbc-bp-volslider input[type="range"] { width: 6rem; height: 4px; accent-color: #f97316; cursor: pointer; } /* ============================================================ Sticky booking button ============================================================ */ .djbc-sticky-book { position: fixed; bottom: 6rem; right: 1.5rem; z-index: 50; display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 600; color: #000; background: #f97316; box-shadow: 0 10px 25px -5px rgba(249,115,22,0.4); transition: all 0.3s ease; text-decoration: none; } @media (min-width: 640px) { .djbc-sticky-book { padding: 0.75rem 1.5rem; font-size: 1rem; } } .djbc-sticky-book:hover { transform: translateY(-2px); box-shadow: 0 20px 35px -5px rgba(249,115,22,0.5); } .djbc-sticky-book:focus-visible { outline: 2px solid rgba(251,146,60,0.6); outline-offset: 4px; } /* ============================================================ 404 ============================================================ */ .djbc-page-404 { display: flex; align-items: center; justify-content: center; min-height: 80vh; } .djbc-404-inner { text-align: center; } .djbc-404-h1 { font-size: 2.5rem; font-weight: 700; margin: 0 0 1rem; color: #fff; font-family: 'Space Grotesk', sans-serif; } .djbc-404-sub { font-size: 1.25rem; color: rgba(255,255,255,0.6); margin: 0 0 1rem; } .djbc-404-link { color: #f97316; text-decoration: underline; } .djbc-404-link:hover { color: #ea580c; } /* ============================================================ v1.2.1 — Shiny-CTA rectangle fix (the *actual* root cause) What I got wrong in v1.2.0: I reshaped the ::after diagonal shine thinking that was the rectangle. It wasn't. There are three decorative pseudo-elements on this button: .shiny-cta::before — dotted shimmer (top layer) .shiny-cta::after — diagonal shine (Lovable's design) .shiny-cta span::before — inset "breathing" glow around the text ← the bug The span has no border-radius declared, so its ::before defaults to border-radius: 0 — a literal rectangle. On hover, opacity goes 0→1 and the inset orange box-shadow draws along that rectangle's edges. The pill's overflow:hidden clips the rectangle's corners but the straight top/bottom edges remain visible against the pill's curve. Fix: give span::before a pill border-radius. The inset glow then follows a curve and is naturally bounded by the button shape. ============================================================ */ .djbc-theme .shiny-cta { clip-path: inset(0 round 9999px); -webkit-clip-path: inset(0 round 9999px); } /* Defence-in-depth: clip the decorative pseudo-elements to the pill too. No visual change vs. Lovable's original — guards against the mask-image compositing edge case where parent clip-path can fail to propagate (Safari especially). Inert when the rest of the cascade works. */ .djbc-theme .shiny-cta::before, .djbc-theme .shiny-cta::after { clip-path: inset(0 round 9999px); -webkit-clip-path: inset(0 round 9999px); } /* The actual fix. */ .djbc-theme .shiny-cta span::before { border-radius: 9999px; } /* ============================================================ v1.2.2 — Shiny-CTA hover: instant solid-orange fill At rest: Lovable original (conic-gradient ring, dark interior). On hover/focus: instant swap to a solid orange pill with black text. No fade, no animation, no mid-states — both directions are instant. Achieved by killing the 800ms transition on the button entirely and overriding background/colour/decorations together on :hover. ============================================================ */ .djbc-theme .shiny-cta { transition: none; } .djbc-theme .shiny-cta:hover, .djbc-theme .shiny-cta:focus-visible { background: var(--shiny-cta-highlight, #f97316); color: #000; border-color: var(--shiny-cta-highlight, #f97316); box-shadow: none; } /* Hide all three decorative pseudo-elements on hover so the pill is uniformly orange — no leftover shimmer dots (::before), diagonal shine (::after), or inset breathing glow (span::before) showing through. */ .djbc-theme .shiny-cta:hover::before, .djbc-theme .shiny-cta:focus-visible::before, .djbc-theme .shiny-cta:hover::after, .djbc-theme .shiny-cta:focus-visible::after, .djbc-theme .shiny-cta:hover span::before, .djbc-theme .shiny-cta:focus-visible span::before { display: none; } /* ============================================================ v1.1.0 — Threaded comments + likes + admin badge ============================================================ */ /* Author + admin row */ .djbc-comment-author-row { display: flex; align-items: center; gap: 0.5rem; } .djbc-comment-admin-badge { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.125rem 0.4375rem; border-radius: 9999px; color: #000; background: linear-gradient(to right, #fb923c, #f97316, #f59e0b); box-shadow: 0 2px 6px -2px rgba(249,115,22,0.5); } /* Avatar */ .djbc-comment { position: relative; } .djbc-comment-avatar { width: 32px; height: 32px; border-radius: 9999px; overflow: hidden; flex-shrink: 0; background: rgba(255,255,255,0.06); display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: rgba(255,255,255,0.6); } .djbc-comment-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Comment now uses 2-col layout: avatar | body */ .djbc-comment { display: grid; grid-template-columns: 32px 1fr; gap: 0.875rem; padding: 1rem; border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.05); } .djbc-comment-body { min-width: 0; } .djbc-comment-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; } /* Admin-flagged comment subtle accent border */ .djbc-comment-admin { border-color: var(--djbc-c-accent, rgba(249,115,22,0.25)); box-shadow: inset 2px 0 0 0 var(--djbc-c-accent, #f97316); } /* Replies indented + visually nested */ .djbc-comment-children { margin-top: 0.625rem; display: flex; flex-direction: column; gap: 0.5rem; padding-left: 0; } .djbc-comment-reply { background: rgba(255,255,255,0.02); } /* Action row: like + reply */ .djbc-comment-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.625rem; } .djbc-comment-like, .djbc-comment-reply-btn { display: inline-flex; align-items: center; gap: 0.3125rem; padding: 0.25rem 0.625rem; border-radius: 9999px; background: transparent; border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.45); font-size: 0.6875rem; font-weight: 500; cursor: pointer; transition: all 0.18s ease; font-family: inherit; } .djbc-comment-like:hover, .djbc-comment-reply-btn:hover { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.18); } .djbc-comment-like svg { transition: fill 0.18s ease, stroke 0.18s ease; } .djbc-comment-like.is-liked { color: var(--djbc-c-accent, #f97316); border-color: var(--djbc-c-accent, #f97316); background: rgba(249,115,22,0.08); } .djbc-comment-like.is-liked svg { fill: currentColor; stroke: currentColor; } .djbc-comment-like-count { font-variant-numeric: tabular-nums; } .djbc-comment-like:disabled { opacity: 0.5; cursor: wait; } /* Inline reply state — when a comment is being replied to, the form sticks visually */ .djbc-comments-form.is-replying { box-shadow: 0 0 0 1px var(--djbc-c-accent, rgba(249,115,22,0.4)); } .djbc-comments-replying-to { display: none; font-size: 0.6875rem; color: rgba(255,255,255,0.55); margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.05); } .djbc-comments-form.is-replying .djbc-comments-replying-to { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .djbc-comments-replying-cancel { background: transparent; border: 0; cursor: pointer; color: rgba(255,255,255,0.4); padding: 0; font-size: 0.625rem; text-decoration: underline; text-underline-offset: 2px; font-family: inherit; } .djbc-comments-replying-cancel:hover { color: rgba(255,255,255,0.8); } /* Email field added to form */ .djbc-comments-email { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 0.5rem; margin-bottom: 0.75rem; font-size: 0.8125rem; outline: none; font-family: inherit; color: inherit; } .djbc-comments-email::placeholder { color: rgba(255,255,255,0.2); } /* Pending state — comments awaiting moderation */ .djbc-comment-pending { opacity: 0.6; border-style: dashed; } .djbc-comment-pending::before { content: 'Pending moderation'; display: block; font-size: 0.625rem; font-style: italic; color: rgba(255,255,255,0.45); margin-bottom: 0.5rem; } /* Generic error message inside the comments form */ .djbc-comments-error { color: #fca5a5; font-size: 0.75rem; background: rgba(252,165,165,0.08); border: 1px solid rgba(252,165,165,0.2); padding: 0.5rem 0.75rem; border-radius: 4px; margin-top: 0.5rem; } /* ============================================================ v1.2.0 — Az én utam (/rolam/) magazine-style about page ============================================================ */ .djbc-page-rolam { padding-bottom: 4rem; min-height: 100vh; background: #0a0a0a; } .djbc-rolam-wrap { max-width: 720px; margin: 0 auto; padding: 4rem 1.5rem 0; } .djbc-rolam-hero { margin-bottom: 4rem; } .djbc-rolam-eyebrow { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.25em; color: rgba(255,255,255,0.35); display: inline-block; margin-bottom: 1.25rem; } .djbc-rolam-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(2.5rem, 5vw + 1rem, 4.25rem); font-weight: 700; color: #fff; margin: 0 0 1rem; letter-spacing: -0.025em; line-height: 1.05; } .djbc-rolam-subtitle { font-size: clamp(1rem, 0.5vw + 0.875rem, 1.25rem); color: rgba(255,255,255,0.55); margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; } /* Body — editorial serif, optimised for long-form reading */ .djbc-rolam-body { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.1875rem; line-height: 1.7; color: rgba(255,255,255,0.78); } .djbc-rolam-body p { margin: 0 0 1.5rem; } /* Lead paragraph — drop cap */ .djbc-rolam-lead { font-size: 1.3125rem; line-height: 1.6; } .djbc-rolam-lead::first-letter { float: left; font-family: 'Space Grotesk', sans-serif; font-size: 5rem; line-height: 0.85; font-weight: 700; color: #f97316; margin: 0.25rem 0.625rem 0 -0.125rem; padding: 0; } /* Section headings */ .djbc-rolam-h2 { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; color: #fff; margin: 3.25rem 0 1.25rem; letter-spacing: -0.015em; font-weight: 700; position: relative; padding-left: 1rem; } .djbc-rolam-h2::before { content: ''; position: absolute; left: 0; top: 0.625rem; width: 4px; height: calc(100% - 1.25rem); background: #f97316; border-radius: 2px; } /* Pull quote — the "Come down every Saturday" moment */ .djbc-rolam-pullquote { margin: 3rem -0.5rem; padding: 2rem 2.25rem; border-left: 3px solid #f97316; background: linear-gradient(135deg, rgba(249,115,22,0.08), rgba(249,115,22,0.02)); border-radius: 0 12px 12px 0; position: relative; } .djbc-rolam-pullquote::before { content: '“'; position: absolute; top: -1rem; left: 1.5rem; font-family: 'Playfair Display', Georgia, serif; font-size: 5rem; font-weight: 700; color: #f97316; line-height: 1; opacity: 0.3; pointer-events: none; } .djbc-rolam-pullquote p { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.625rem; font-style: italic; color: #ffe4cc; line-height: 1.4; margin: 0 0 0.875rem; font-weight: 400; } .djbc-rolam-pullquote cite { font-size: 0.75rem; color: rgba(249,115,22,0.85); font-style: normal; font-family: 'Inter', sans-serif; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; } /* Closing — set off with a top border + italic */ .djbc-rolam-closing { font-size: 1.25rem !important; font-style: italic; color: rgba(255,255,255,0.85) !important; margin-top: 3.5rem !important; padding-top: 2rem !important; border-top: 1px solid rgba(255,255,255,0.08); } /* Stats strip after the story */ .djbc-rolam-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; max-width: 720px; margin: 4rem auto 2.5rem; padding: 0 1.5rem; } @media (min-width: 640px) { .djbc-rolam-stats { grid-template-columns: repeat(4, 1fr); gap: 1rem; } } .djbc-rolam-stats .djbc-stat { padding: 1.25rem 1rem; } /* CTA at the bottom — book now */ .djbc-rolam-cta-wrap { text-align: center; max-width: 720px; margin: 0 auto; padding: 2rem 1.5rem 3rem; } .djbc-rolam-cta-text { font-size: 1rem; color: rgba(255,255,255,0.55); margin: 0 0 1.5rem; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; } /* Read-more link on the homepage About section */ .djbc-about-readmore { display: inline-flex; align-items: center; gap: 0.4375rem; font-size: 0.8125rem; color: rgba(255,255,255,0.55); margin: 0.25rem 0 1.25rem; font-weight: 500; transition: color 0.2s ease, gap 0.2s ease; width: fit-content; padding-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,0.12); } .djbc-about-readmore:hover { color: #f97316; border-bottom-color: rgba(249,115,22,0.6); gap: 0.625rem; } /* ============================================================ Bottom player waveform: at-rest, played, playhead ============================================================ */ .djbc-theme .djbc-bp-bar { background: rgba(255,255,255,0.16); transition: background 0.12s ease, transform 0.12s ease; } .djbc-theme .djbc-bp-bar.is-played { background: linear-gradient(to top, #f97316, #fb923c); } /* Playhead — the bar at the current position. Brighter, slight glow, subtle scale so it's unmistakable as the cursor location. */ .djbc-theme .djbc-bp-bar.is-current { background: #fde68a; transform: scaleY(1.18); box-shadow: 0 0 8px rgba(253,224,71,0.55); z-index: 2; } /* Hover the seekbar — lift the upcoming bars slightly so the seek target is more obvious. */ .djbc-theme .djbc-bp-wave:hover .djbc-bp-bar:not(.is-played) { background: rgba(255,255,255,0.24); } /* Cursor on the seekbar */ .djbc-theme .djbc-bp-wave[data-seek] { cursor: pointer; } /* ---- Plays stat pill on genre page: tabular numbers so the live bump from "999" → "1k" doesn't shift the layout. ---- */ .djbc-theme .djbc-stat-pill-plays [data-genre-plays-display] { font-variant-numeric: tabular-nums; } /* ============================================================ v1.7.0 — Orb play/pause buttons (fresh design) ------------------------------------------------------------ Cloned from the working .djbc-genre-play-orb on genre cards. Inline `style="width;height;background"` on each instance guarantees size + colour regardless of any external CSS. This block only handles secondary properties (border-radius, flex centring, hover, state-driven icon swap). NO width/height declarations here — those live inline on the element. ============================================================ */ .djbc-orb { position: relative; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; border: 0; padding: 0; cursor: pointer; box-shadow: 0 4px 12px -2px rgba(0,0,0,0.45); transition: transform 0.15s ease, box-shadow 0.2s ease; -webkit-appearance: none; appearance: none; } .djbc-orb:hover { transform: scale(1.08); box-shadow: 0 8px 20px -4px rgba(0,0,0,0.55); } .djbc-orb:active { transform: scale(0.94); } .djbc-orb:focus-visible { outline: 2px solid rgba(255,255,255,0.85); outline-offset: 3px; } .djbc-orb-icon { position: relative; z-index: 10; pointer-events: none; display: block; color: #ffffff; } .djbc-orb-play { margin-left: 2px; } /* visually centre the triangle */ .djbc-orb-pause { display: none; } /* ---- Playing-state icon swap ---- */ .djbc-mix-row.is-playing [data-mix-orb] .djbc-orb-play { display: none; } .djbc-mix-row.is-playing [data-mix-orb] .djbc-orb-pause { display: block; margin-left: 0; } body.djbc-playing [data-bp-orb] .djbc-orb-play { display: none; } body.djbc-playing [data-bp-orb] .djbc-orb-pause { display: block; margin-left: 0; } /* ============================================================ v1.9.0 — Embedded players (SoundCloud / Mixcloud iframes) On the single-mix detail page only. The SC iframe here is the VISIBLE artwork-and-comments player (separate from the hidden #djbc-sc-widget in the footer that powers the bottom player). Two SC iframes on one page don't conflict. ============================================================ */ .djbc-mix-embed-section { padding: 2rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.05); } .djbc-mix-embed-inner { max-width: 1024px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; } .djbc-mix-embed { border-radius: 6px; overflow: hidden; box-shadow: 0 8px 24px -8px rgba(0,0,0,0.4); } .djbc-mix-embed iframe { display: block; width: 100%; border: 0; } /* ============================================================ v2.1.0 — Brand logo (image) ------------------------------------------------------------ Renders when an admin uploads a logo in Site Content → General. If no logo set, the text wordmark (DJBC_ARTIST_WORDMARK) renders instead — no CSS changes needed for the fallback path. The .djbc-logo base class is shared; per-placement classes set the size constraint. SVG and PNG both work the same way: width is constrained, height auto-scales. ============================================================ */ .djbc-logo { display: block; max-width: 100%; height: auto; } /* Header — small, fits the existing wordmark slot. The container .djbc-wordmark-has-logo strips the default text styling. */ .djbc-theme .djbc-wordmark-has-logo { display: inline-flex; align-items: center; padding: 0; font-size: 0; /* eat any whitespace */ line-height: 0; } .djbc-theme .djbc-logo-header { height: 32px; width: auto; max-width: 200px; object-fit: contain; } @media (min-width: 768px) { .djbc-theme .djbc-logo-header { height: 40px; max-width: 240px; } } /* Hero — big, centered, scales with the artwork. The H1 wrapper loses its default font sizing in favour of the image dimensions. */ .djbc-theme .djbc-hero-title-logo { display: flex; justify-content: center; margin: 0 0 1.25rem; } .djbc-theme .djbc-logo-hero { width: 100%; max-width: 420px; height: auto; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.45)); } @media (min-width: 768px) { .djbc-theme .djbc-logo-hero { max-width: 540px; } } /* Booking page — medium, centered above the form title. */ .djbc-theme .djbc-booking-logo-wrap { display: flex; justify-content: center; margin: 0 0 1.5rem; } .djbc-theme .djbc-logo-booking { width: 100%; max-width: 200px; height: auto; } /* ============================================================ v2.2.0 — Mobile responsiveness fixes ------------------------------------------------------------ Addresses tester feedback on overlay and functionality issues: - Bottom player was clipping the last bit of page content on narrow screens (body padding-bottom was 68px but the actual mobile player height with seekbar is ~72px, +safe-area on iPhones). - Sticky "Foglalj időpontot" book button was overlapping the bottom player when the player's title wrapped to 2 lines. - No iOS safe-area-inset-bottom handling — the bottom player sat under the home indicator on iPhone X+. - Header would wrap/overflow on 320px screens because the wordmark, back link, lang switch and logo competed for space. - iframe embed section had 1.5rem horizontal padding that ate screen width on narrow devices. ============================================================ */ /* --- Body padding accounts for mobile bp height + iOS safe area --- */ body.djbc-theme { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } /* --- Bottom player itself respects iOS home indicator --- */ .djbc-theme .djbc-bottom-player { padding-bottom: env(safe-area-inset-bottom, 0px); } /* --- Bottom player meta — keep titles single-line on mobile --- */ .djbc-theme .djbc-bp-title, .djbc-theme .djbc-bp-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --- Sticky book button sits above the bp + safe area --- */ .djbc-theme .djbc-sticky-book { bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 1rem); } @media (max-width: 480px) { /* Narrower screens: shorter button, smaller right offset */ .djbc-theme .djbc-sticky-book { right: 0.75rem; padding: 0.5rem 0.875rem; font-size: 0.8125rem; } } /* --- Header on narrow screens --- */ @media (max-width: 480px) { .djbc-theme .djbc-header-inner { padding: 0 0.75rem; gap: 0.5rem; } /* Hide the "← Home" text on tightest screens — the wordmark itself links home. Keep the arrow for affordance. */ .djbc-theme .djbc-header-back { font-size: 0; gap: 0; } .djbc-theme .djbc-header-back::before { content: "←"; font-size: 1.25rem; line-height: 1; } /* Logo: cap header logo more aggressively on tightest screens */ .djbc-theme .djbc-logo-header { height: 28px; max-width: 140px; } /* Text wordmark: shrink slightly */ .djbc-theme .djbc-wordmark:not(.djbc-wordmark-has-logo) { font-size: 0.875rem; letter-spacing: 0.05em; } } /* --- iframe embed section: less side padding on mobile --- */ @media (max-width: 640px) { .djbc-theme .djbc-mix-embed-section { padding: 1.25rem 0.75rem; } } /* --- Genre cards / mix rows: ensure no horizontal overflow --- */ @media (max-width: 480px) { .djbc-theme .djbc-mix-row { padding: 0.625rem 0.5rem; gap: 0.75rem; } /* Reduce duration / plays column gap on very narrow screens */ .djbc-theme .djbc-mix-row > * { min-width: 0; } } /* --- Bottom player row: prevent overflow if a title is unusually long --- */ @media (max-width: 480px) { .djbc-theme .djbc-bp-row { padding: 0 0.75rem; gap: 0.75rem; } /* Hide volume button on tightest screens — most mobile users use the device hardware volume buttons anyway, and this gives the title meta more room. */ .djbc-theme .djbc-bp-volume { display: none; } } /* --- Hero logo cap on narrow screens (avoid eating the whole viewport) --- */ @media (max-width: 480px) { .djbc-theme .djbc-logo-hero { max-width: 280px; } } /* --- Cookie/lang switch tap targets — ensure 44x44 minimum on touch --- */ @media (max-width: 480px) { .djbc-theme .djbc-lang-switch button, .djbc-theme .djbc-lang-switch .djbc-lang-option { min-height: 32px; padding: 0.25rem 0.5rem; } } /* --- Booking page logo: smaller on mobile so it doesn't dwarf the form --- */ @media (max-width: 480px) { .djbc-theme .djbc-logo-booking { max-width: 140px; } .djbc-theme .djbc-booking-logo-wrap { margin-bottom: 1rem; } } /* ============================================================ v2.3.0 — Logo sizing, mobile fixes ------------------------------------------------------------ 1. Header logo: bigger (was too small for brand presence) 2. Hero logo: ~30% smaller + max-height (square logos were blowing up vertically because only width was constrained) 3. Genre cards: drop hover indicators on touch devices, drop the 1px white border on cards on mobile (Adam: "lines overlapping with the year and bpm") 4. Bottom player volume button restored on mobile (was hidden in v2.2.0 which broke testers' ability to fix muted iOS widgets) ============================================================ */ /* ---- LOGO: HEADER — bigger ---- */ .djbc-theme .djbc-logo-header { height: 44px; /* was 32px */ width: auto; max-width: 220px; /* was 200px */ object-fit: contain; } @media (min-width: 768px) { .djbc-theme .djbc-logo-header { height: 52px; /* was 40px */ max-width: 260px; /* was 240px */ } } /* ---- LOGO: HERO — ~30% smaller + height-bound for square logos ---- */ .djbc-theme .djbc-logo-hero { width: 100%; max-width: 300px; /* was 420px */ max-height: 220px; /* NEW — prevents square logos from going huge vertically */ height: auto; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.45)); } @media (min-width: 768px) { .djbc-theme .djbc-logo-hero { max-width: 380px; /* was 540px */ max-height: 280px; /* NEW */ } } /* ---- Tightest mobile (<=480px) — overrides above defaults ---- */ @media (max-width: 480px) { .djbc-theme .djbc-logo-header { height: 36px; /* was 28px — Adam: header logo should be bigger */ max-width: 180px; /* was 140px */ } .djbc-theme .djbc-logo-hero { max-width: 240px; max-height: 200px; } } /* ---- GENRE CARDS: kill hover-indicator bar and 1px white border on touch devices (Adam: "no hovering on mobile") ---- */ @media (hover: none) and (pointer: coarse) { .djbc-theme .djbc-genre-card-bar { display: none; } .djbc-theme .djbc-genre-card-lg { border: 0; } /* Also disable the sticky-hover transform that gets stuck on tap */ .djbc-theme .djbc-genre-card:hover { transform: none; } .djbc-theme .djbc-genre-card-lg:hover { transform: none; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4); /* original non-hover shadow */ border-color: transparent; } .djbc-theme .djbc-genre-card:hover .djbc-genre-card-img, .djbc-theme .djbc-genre-card-lg:hover .djbc-genre-card-img { transform: none; } } /* ---- Restore volume button on mobile (Adam: "no volume changer") ---- */ @media (max-width: 480px) { .djbc-theme .djbc-bp-volume { display: flex; /* re-show — was 'display: none' in v2.2.0 */ } /* But: bp-meta needs to flex-shrink more aggressively now to fit it */ .djbc-theme .djbc-bp-meta { min-width: 0; flex: 1 1 auto; overflow: hidden; } } /* ============================================================ v2.4.0 — Hero logo aspect-ratio fix + mute toggle ------------------------------------------------------------ 1. The v2.3.0 hero-logo CSS combined max-width with max-height while leaving width:100%; height:auto. Result for a square source image: width hits max-width first, height tries to match via height:auto, then max-height clamps it shorter WITHOUT rescaling width back down — so a 1:1 image rendered as a squished oval. Drop max-height; let the natural aspect ratio of the source be preserved with max-width alone. 2. Mute toggle: on touch devices the volume button now toggles mute instead of opening a slider. Slider stays for desktop (hover-to-reveal) — desktop users don't have hardware volume buttons. ============================================================ */ /* ---- HERO LOGO: only constrain width; let aspect ratio live ---- */ .djbc-theme .djbc-logo-hero { max-height: none; /* OVERRIDE the v2.3.0 max-height that was squishing it */ } @media (min-width: 768px) { .djbc-theme .djbc-logo-hero { max-height: none; } } @media (max-width: 480px) { .djbc-theme .djbc-logo-hero { max-height: none; } } /* ---- MUTE TOGGLE — icon swap based on body.djbc-muted ---- */ .djbc-theme .djbc-volicon-off { display: none; } body.djbc-muted .djbc-theme .djbc-volicon-on, body.djbc-muted.djbc-theme .djbc-volicon-on { display: none; } body.djbc-muted .djbc-theme .djbc-volicon-off, body.djbc-muted.djbc-theme .djbc-volicon-off { display: block; } /* Slight color shift when muted so the user sees state at a glance */ body.djbc-muted .djbc-theme .djbc-bp-volbtn { color: rgba(255,100,100,0.7); } /* ---- VOLUME SLIDER: hover-reveal on desktop, never on touch ---- */ .djbc-theme .djbc-bp-volslider { display: none; /* default hidden */ } @media (hover: hover) and (pointer: fine) { /* Desktop: show slider when hovering the volume control */ .djbc-theme .djbc-bp-volume:hover .djbc-bp-volslider, .djbc-theme .djbc-bp-volume:focus-within .djbc-bp-volslider { display: block; } } /* ============================================================ v2.5.0 — Final logo sizing + bulletproof mobile line removal ------------------------------------------------------------ Issues reported in tester screenshots: 1. Hero logo top getting clipped on mobile (logo too tall for hero, drop-shadow at bottom creating apparent line). 2. Genre cards STILL showing the accent-bar / border line at bottom on mobile despite v2.3.0 hover:none rule. Device or rendering pipeline isn't honoring (hover: none) + (pointer: coarse) reliably — switching to max-width query + !important so the override can't be missed. ============================================================ */ /* ---- HERO LOGO: smaller so it fits within the 400px-min hero ---- */ .djbc-theme .djbc-logo-hero { max-width: 280px; /* was 380px desktop default — reduce so logo fits */ } @media (min-width: 768px) { .djbc-theme .djbc-logo-hero { max-width: 280px; } } @media (max-width: 767px) { .djbc-theme .djbc-logo-hero { max-width: 220px; } } @media (max-width: 480px) { .djbc-theme .djbc-logo-hero { max-width: 180px; } } /* ---- GENRE CARDS: kill bar + border on mobile — bulletproof version Uses plain max-width query (universally honored) AND !important because the v2.3.0 hover:none rule wasn't getting applied on tester's iPhone. ---- */ @media (max-width: 768px) { .djbc-theme .djbc-genre-card-bar, .djbc-genre-card .djbc-genre-card-bar { display: none !important; } .djbc-theme .djbc-genre-card-lg, .djbc-genre-card-lg { border: 0 !important; } /* Sticky-hover prevention on touch — iOS Safari keeps the :hover state after a tap, which was animating the card-bar to width:100%. Now that the bar is display:none this is moot, but disable the transforms too so taps don't leave cards looking "stuck". */ .djbc-theme .djbc-genre-card:hover, .djbc-theme .djbc-genre-card-lg:hover { transform: none !important; border-color: transparent !important; } .djbc-theme .djbc-genre-card-lg:hover { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4) !important; } .djbc-theme .djbc-genre-card:hover .djbc-genre-card-img, .djbc-theme .djbc-genre-card-lg:hover .djbc-genre-card-img, .djbc-theme .djbc-genre-card:hover .djbc-genre-card-bar { transform: none !important; width: 0 !important; } /* Also force card-bar invisible everywhere on mobile regardless of hover state — defense in depth. */ .djbc-theme .djbc-genre-card-bar, .djbc-genre-card-bar { width: 0 !important; visibility: hidden !important; } } /* Softer drop-shadow on mobile (the heavy shadow under a fitting-but-tight logo can read as a "line" against the dark hero background). */ @media (max-width: 768px) { .djbc-theme .djbc-logo-hero { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35)); } } /* ============================================================ v2.6.0 — Radio rebrand (cosmetic, toggleable) ------------------------------------------------------------ Enabled when admin checks "Radio mode" in Site Content. Does not change any functionality — only adds an "ON AIR" badge to the homepage hero, an optional tagline line, and a body class that CSS can hook into for any further radio-themed styling. ============================================================ */ /* ---- ON AIR badge — appears above the hero title in radio mode ---- */ .djbc-theme .djbc-on-air-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.875rem; border: 1px solid rgba(239, 68, 68, 0.4); border-radius: 999px; background: rgba(239, 68, 68, 0.08); margin: 0 auto 1.25rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; color: rgba(239, 68, 68, 0.95); text-transform: uppercase; } .djbc-theme .djbc-on-air-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.8); animation: djbcOnAirPulse 1.6s ease-in-out infinite; } @keyframes djbcOnAirPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.75); } } /* ---- Hero tagline — optional 2nd subtitle line in radio mode ---- */ .djbc-theme .djbc-hero-tagline { margin: 0.75rem auto 0; max-width: 36rem; font-size: 0.875rem; color: rgba(255,255,255,0.55); font-style: italic; letter-spacing: 0.02em; } /* Mobile tweaks */ @media (max-width: 480px) { .djbc-theme .djbc-on-air-badge { padding: 0.25rem 0.625rem; font-size: 0.6875rem; margin-bottom: 1rem; } .djbc-theme .djbc-hero-tagline { font-size: 0.8125rem; } } /* ============================================================ v2.7.0 — Geo-restriction visual styling ------------------------------------------------------------ When the visitor is geo-blocked: body.djbc-geo-blocked is added by player.js, and inline restriction notices replace audio iframes on mix detail pages. ============================================================ */ /* Restriction notice (replaces SC/MC iframes when geo-blocked) */ .djbc-theme .djbc-geo-notice { display: flex; align-items: center; justify-content: center; gap: 0.625rem; padding: 2.5rem 1.5rem; background: rgba(255,255,255,0.03); border: 1px dashed rgba(255,255,255,0.12); border-radius: 8px; color: rgba(255,255,255,0.6); font-size: 0.875rem; text-align: center; max-width: 36rem; margin: 0 auto; } .djbc-theme .djbc-geo-notice svg { flex-shrink: 0; color: rgba(239, 68, 68, 0.6); } /* Play orbs and CTAs become visibly disabled when geo-blocked */ body.djbc-geo-blocked .djbc-theme [data-mix-orb], body.djbc-geo-blocked .djbc-theme [data-mix-play], body.djbc-geo-blocked .djbc-theme .djbc-genre-play-orb { opacity: 0.35 !important; cursor: not-allowed !important; filter: grayscale(0.7); position: relative; } /* Hide bottom player UI when blocked — it has nothing useful to do */ body.djbc-geo-blocked .djbc-theme .djbc-bottom-player { display: none !important; } /* Restore body padding since bp is hidden */ body.djbc-geo-blocked.djbc-theme { padding-bottom: env(safe-area-inset-bottom, 0px); } /* Mobile tweaks for the notice */ @media (max-width: 480px) { .djbc-theme .djbc-geo-notice { padding: 1.5rem 1rem; font-size: 0.8125rem; flex-direction: column; gap: 0.5rem; } } /* ============================================================ v2.9.0 — Geo-restriction banner + toast ------------------------------------------------------------ Two complementary messages for non-HU visitors: 1. Banner — appears at the top of the page on first arrival, below the header. Always visible until dismissed. Sets sessionStorage on dismissal so it doesn't reappear for the rest of the session (returns on next visit). 2. Toast — appears bottom-right (bottom-centered on mobile) when a non-HU visitor clicks any play button. Auto-dismisses after 6 seconds; can also be dismissed by clicking. Both render only when body.djbc-geo-blocked is set (added by player.js based on window.DJBC.geo.blocked). ============================================================ */ /* ---- BANNER (top of page) ---- */ .djbc-theme .djbc-geo-banner { position: fixed; top: 56px; /* below the header */ left: 0; right: 0; z-index: 45; /* below header (50) and above content */ background: rgba(180, 30, 30, 0.95); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 0.875rem; transform: translateY(-100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 12px rgba(0,0,0,0.3); } body.djbc-geo-blocked.djbc-theme .djbc-geo-banner[data-geo-banner]:not([hidden]) { display: block; transform: translateY(0); } .djbc-theme .djbc-geo-banner-inner { max-width: 1280px; margin: 0 auto; padding: 0.75rem 1.25rem; display: flex; align-items: center; gap: 0.75rem; } .djbc-theme .djbc-geo-banner-icon { flex-shrink: 0; color: rgba(255,255,255,0.9); } .djbc-theme .djbc-geo-banner-text { margin: 0; flex: 1; line-height: 1.5; } .djbc-theme .djbc-geo-banner-close { flex-shrink: 0; background: transparent; border: 0; color: rgba(255,255,255,0.7); padding: 4px; cursor: pointer; border-radius: 4px; display: inline-flex; transition: color 0.2s ease, background 0.2s ease; } .djbc-theme .djbc-geo-banner-close:hover, .djbc-theme .djbc-geo-banner-close:focus { color: #fff; background: rgba(255,255,255,0.15); outline: none; } /* When banner is visible, push the page content down so it doesn't overlap */ body.djbc-geo-blocked.djbc-theme.djbc-geo-banner-shown { padding-top: 48px; /* approximate banner height */ } @media (max-width: 480px) { .djbc-theme .djbc-geo-banner-inner { padding: 0.625rem 0.875rem; gap: 0.5rem; font-size: 0.8125rem; } body.djbc-geo-blocked.djbc-theme.djbc-geo-banner-shown { padding-top: 64px; /* taller because text wraps to 2 lines */ } } /* ---- TOAST (bottom-right desktop, bottom-center mobile) ---- */ .djbc-theme .djbc-geo-toast { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 60; /* above bottom player */ max-width: 380px; padding: 0.875rem 1rem; background: rgba(20, 20, 20, 0.98); color: #fff; border-radius: 8px; border: 1px solid rgba(239, 68, 68, 0.4); box-shadow: 0 12px 28px rgba(0,0,0,0.5); display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.8125rem; line-height: 1.5; opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; cursor: pointer; } .djbc-theme .djbc-geo-toast.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .djbc-theme .djbc-geo-toast-icon { flex-shrink: 0; color: rgba(239, 68, 68, 0.9); margin-top: 1px; } .djbc-theme .djbc-geo-toast-text { margin: 0; } @media (max-width: 640px) { .djbc-theme .djbc-geo-toast { right: 0.75rem; left: 0.75rem; bottom: 0.875rem; max-width: none; } } /* ============================================================ v2.12.0 — Per-genre radio loop + download button ============================================================ */ /* Now-playing-in-loop highlight on a mix row. Slightly stronger than the plain .is-playing state so the looping track is obvious. */ .djbc-theme .djbc-mix-row.is-loop-current { background: rgba(249, 115, 22, 0.07); box-shadow: inset 3px 0 0 var(--djbc-row-accent, #f97316); } .djbc-theme .djbc-mix-row.is-loop-current .djbc-mix-row-title { color: var(--djbc-row-accent, #f97316); } /* Small "ON AIR" pip next to the currently-looping row title. */ .djbc-theme .djbc-mix-row.is-loop-current .djbc-mix-row-title::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.8); vertical-align: middle; animation: djbcOnAirPulse 1.6s ease-in-out infinite; } /* Download button (mix detail page + anywhere a download URL exists). */ .djbc-theme .djbc-download-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.125rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); color: #fff; font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease; } .djbc-theme .djbc-download-btn:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.3); transform: translateY(-1px); } .djbc-theme .djbc-download-btn svg { flex-shrink: 0; } /* Genre-page "broadcasting" indicator — hidden until audio is playing. Dialed-back radio touch: a small live pip + label next to the genre play CTA, only while a loop is actually sounding. */ .djbc-theme .djbc-genre-broadcasting { display: none; align-items: center; gap: 0.4rem; margin-top: 0.75rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(239, 68, 68, 0.95); } body.djbc-playing .djbc-theme .djbc-genre-broadcasting, body.djbc-playing.djbc-theme .djbc-genre-broadcasting { display: inline-flex; } .djbc-theme .djbc-genre-broadcasting-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.8); animation: djbcOnAirPulse 1.6s ease-in-out infinite; } /* ============================================================ v2.13.0 — Broadcast tracklist on genre pages Static list of tracks in the genre's broadcast loop. The .is-now-playing state is toggled by the live now-playing poller once the stream server is connected (until then, the list is simply static — no row is highlighted). ============================================================ */ .djbc-theme .djbc-broadcast-tracklist { padding: 2.5rem 1.25rem 1rem; } .djbc-theme .djbc-broadcast-tracklist-inner { max-width: 760px; margin: 0 auto; } .djbc-theme .djbc-broadcast-tracklist-h2 { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.35rem; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; } .djbc-theme .djbc-broadcast-tracklist-count { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.4); } .djbc-theme .djbc-broadcast-tracklist-sub { font-size: 0.875rem; color: rgba(255,255,255,0.5); margin: 0 0 1.25rem; } .djbc-theme .djbc-broadcast-tracklist-list { list-style: none; margin: 0; padding: 0; } .djbc-theme .djbc-broadcast-track { display: flex; align-items: center; gap: 0.85rem; padding: 0.6rem 0.75rem; border-radius: 6px; border-bottom: 1px solid rgba(255,255,255,0.05); transition: background 0.2s ease; } .djbc-theme .djbc-broadcast-track:last-child { border-bottom: 0; } .djbc-theme .djbc-broadcast-track-num { font-variant-numeric: tabular-nums; font-size: 0.8rem; font-weight: 700; min-width: 1.75rem; } .djbc-theme .djbc-broadcast-track-title { flex: 1; font-size: 0.9rem; color: rgba(255,255,255,0.85); min-width: 0; } .djbc-theme .djbc-broadcast-track-nowplaying { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .djbc-theme .djbc-broadcast-track-pip { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; animation: djbcOnAirPulse 1.6s ease-in-out infinite; } /* Live now-playing row state (toggled by the poller when stream is up) */ .djbc-theme .djbc-broadcast-track.is-now-playing { background: rgba(255,255,255,0.05); } .djbc-theme .djbc-broadcast-track.is-now-playing .djbc-broadcast-track-title { color: #fff; font-weight: 600; } /* Past-broadcasts download archive (genre page) */ .djbc-theme .djbc-broadcast-archive { padding: 1rem 1.25rem 2.5rem; } .djbc-theme .djbc-broadcast-archive-inner { max-width: 760px; margin: 0 auto; } .djbc-theme .djbc-broadcast-archive-h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.3rem; } .djbc-theme .djbc-broadcast-archive-sub { font-size: 0.85rem; color: rgba(255,255,255,0.5); margin: 0 0 1.1rem; } .djbc-theme .djbc-broadcast-archive-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .djbc-theme .djbc-broadcast-archive-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 0.85rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; } .djbc-theme .djbc-broadcast-archive-date { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; color: rgba(255,255,255,0.8); } .djbc-theme .djbc-broadcast-archive-date svg { color: rgba(255,255,255,0.4); flex-shrink: 0; } .djbc-theme .djbc-broadcast-archive-dl { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.95rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); color: #fff; font-size: 0.8rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background 0.2s ease, transform 0.15s ease; } .djbc-theme .djbc-broadcast-archive-dl:hover { background: rgba(255,255,255,0.1); transform: translateY(-1px); } @media (max-width: 480px) { .djbc-theme .djbc-broadcast-archive-item { flex-direction: column; align-items: stretch; gap: 0.6rem; } .djbc-theme .djbc-broadcast-archive-dl { justify-content: center; } } /* Live broadcast badge + offline note (genre hero, when stream configured) */ .djbc-theme .djbc-live-badge { display: none; /* shown by broadcast.js when stream is live + playing */ align-items: center; gap: 0.45rem; padding: 0.3rem 0.8rem; border-radius: 999px; background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.45); color: #fff; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .djbc-theme .djbc-live-badge.is-live { display: inline-flex; } .djbc-theme .djbc-live-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.9); animation: djbcOnAirPulse 1.4s ease-in-out infinite; } /* ============================================================ v2.15.0 — Online Radio identity (always-on motion) ------------------------------------------------------------ Goal: the site reads as a LIVE RADIO the moment a page loads, no hover needed. All motion here is GPU-friendly (transform/ opacity only) and degrades to a tasteful static state under prefers-reduced-motion instead of freezing mid-animation. Pieces: 1. Hero ambient drift — slow Ken-Burns on the hero image 2. Live equalizer — always-bouncing bars glyph 3. Broadcast bar — "ON AIR · GENRE RADIO" in the hero 4. Station header strip — persistent thin bar under the nav ============================================================ */ /* ---------- 1. Hero ambient drift (alive on load) ---------- */ @keyframes djbcHeroDrift { 0% { transform: scale(1.08) translate3d(0, 0, 0); } 50% { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); } 100% { transform: scale(1.08) translate3d(0, 0, 0); } } .djbc-theme .djbc-hero-genre .djbc-hero-bg, .djbc-theme .djbc-hero-home .djbc-hero-bg { animation: djbcHeroDrift 28s ease-in-out infinite; will-change: transform; transform-origin: center center; } /* A subtle animated color wash over the hero so even static images feel broadcast-lit. Uses the genre accent via --djbc-hero-accent (set inline on the hero section); falls back to the orange brand color. */ @keyframes djbcHeroWash { 0%, 100% { opacity: 0.16; } 50% { opacity: 0.30; } } .djbc-theme .djbc-hero-radio-wash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 70% 18%, var(--djbc-hero-accent, #f97316), transparent 70%); mix-blend-mode: screen; animation: djbcHeroWash 9s ease-in-out infinite; z-index: 1; } /* ---------- 2. Live equalizer glyph (always bouncing) ---------- */ .djbc-theme .djbc-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; width: auto; } .djbc-theme .djbc-eq i { display: block; width: 3px; height: 100%; background: currentColor; border-radius: 1px; transform-origin: bottom; animation: djbcEqBar 0.9s ease-in-out infinite; } .djbc-theme .djbc-eq i:nth-child(1) { animation-delay: -0.20s; } .djbc-theme .djbc-eq i:nth-child(2) { animation-delay: -0.65s; } .djbc-theme .djbc-eq i:nth-child(3) { animation-delay: -0.40s; } .djbc-theme .djbc-eq i:nth-child(4) { animation-delay: -0.85s; } .djbc-theme .djbc-eq i:nth-child(5) { animation-delay: -0.10s; } @keyframes djbcEqBar { 0%, 100% { transform: scaleY(0.30); } 50% { transform: scaleY(1); } } /* ---------- 3. Broadcast bar in the hero ---------- */ .djbc-theme .djbc-broadcast-bar { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.4rem 0.95rem; border-radius: 999px; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1rem; z-index: 2; position: relative; } .djbc-theme .djbc-broadcast-bar .djbc-eq { color: var(--djbc-hero-accent, #f97316); } .djbc-theme .djbc-broadcast-bar-live { display: inline-flex; align-items: center; gap: 0.4rem; color: #ff5252; } .djbc-theme .djbc-broadcast-bar-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff5252; box-shadow: 0 0 8px rgba(255, 82, 82, 0.9); animation: djbcLiveBlink 1.4s ease-in-out infinite; } @keyframes djbcLiveBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .djbc-theme .djbc-broadcast-bar-sep { opacity: 0.4; } /* ---------- 4. Persistent station header strip ---------- */ .djbc-theme .djbc-station-strip { position: relative; z-index: 30; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.65rem; padding: 0.4rem 1rem; background: linear-gradient(90deg, rgba(249, 115, 22, 0.10), rgba(249, 115, 22, 0.04) 50%, rgba(249, 115, 22, 0.10)); border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); } .djbc-theme .djbc-station-strip .djbc-eq { color: #f97316; height: 11px; } .djbc-theme .djbc-station-strip-name { color: #fff; } .djbc-theme .djbc-station-strip-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff5252; box-shadow: 0 0 7px rgba(255,82,82,0.9); animation: djbcLiveBlink 1.4s ease-in-out infinite; } @media (max-width: 600px) { .djbc-theme .djbc-station-strip { font-size: 0.62rem; gap: 0.45rem; letter-spacing: 0.08em; } .djbc-theme .djbc-station-strip-tag { display: none; } /* trim on small screens */ } /* ---------- Graceful reduced-motion fallback ---------- Instead of letting the global reduce-motion rule freeze these mid-animation, we explicitly give them a calm resting state: equalizer bars sit at a static mid-height, drifts hold at base, blinkers stay solid. Looks intentional, never "stuck". */ @media (prefers-reduced-motion: reduce) { .djbc-theme .djbc-hero-genre .djbc-hero-bg, .djbc-theme .djbc-hero-home .djbc-hero-bg { animation: none !important; transform: scale(1.08); } .djbc-theme .djbc-hero-radio-wash { animation: none !important; opacity: 0.22; } .djbc-theme .djbc-eq i { animation: none !important; transform: scaleY(0.6); } .djbc-theme .djbc-broadcast-bar-live::before, .djbc-theme .djbc-station-strip-dot { animation: none !important; opacity: 1; } } /* Cross-platform hardening for the radio identity */ @media (max-width: 480px) { .djbc-theme .djbc-broadcast-bar { font-size: 0.62rem; letter-spacing: 0.08em; gap: 0.5rem; padding: 0.35rem 0.7rem; flex-wrap: wrap; max-width: 100%; } .djbc-theme .djbc-broadcast-bar .djbc-eq { height: 11px; } } /* Archive entry actions (play + download) */ .djbc-theme .djbc-broadcast-archive-actions { display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .djbc-theme .djbc-broadcast-archive-play { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.95rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); color: #fff; font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.2s ease, transform 0.15s ease; } .djbc-theme .djbc-broadcast-archive-play:hover { background: rgba(255,255,255,0.1); transform: translateY(-1px); } .djbc-theme .djbc-broadcast-archive-play.is-playing { background: rgba(255,255,255,0.12); } @media (max-width: 480px) { .djbc-theme .djbc-broadcast-archive-actions { width: 100%; } .djbc-theme .djbc-broadcast-archive-play, .djbc-theme .djbc-broadcast-archive-actions .djbc-broadcast-archive-dl { flex: 1; justify-content: center; } } /* ============================================================ v2.17.0 — Háttérvideó (hero background video) A muted, looping video layered over the hero image. The image stays as poster/fallback. Dim overlay + optional blur are set inline per-page from the admin (Site Content → Háttérvideók). ============================================================ */ .djbc-theme .djbc-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; /* above the static image, below wash/overlay/content */ pointer-events: none; /* brightness matches the static hero image so swap-in is seamless; blur (if any) is appended inline via the style attribute. */ -webkit-filter: brightness(0.5); filter: brightness(0.5); } /* When a video is present, the static image sits beneath it as poster. */ .djbc-theme .djbc-hero-video ~ .djbc-hero-bg, .djbc-theme .djbc-hero-bg + .djbc-hero-video { /* harmless ordering aid */ } .djbc-theme .djbc-hero-video-dim { position: absolute; inset: 0; z-index: 1; /* above video, below wash(1)/overlay — darkens for text */ pointer-events: none; } /* Respect reduced motion: many browsers still autoplay muted loops, but if the user asked to reduce motion we pause by hiding the video and letting the poster image show through (calm, not frozen). */ @media (prefers-reduced-motion: reduce) { .djbc-theme .djbc-hero-video { display: none; } } /* ============================================================ v2.18.0 — Two live channels (Dark Side / Bright Side) Homepage "Live Channels" section, the persistent tune-in controls in the station strip, and the genre-page "Airs live on …" link. Each channel exposes --djbc-ch-accent. ============================================================ */ /* ---- Homepage: Live Channels section ---- */ .djbc-theme .djbc-live-channels { padding: 3.5rem 1.5rem 2.5rem; max-width: 1200px; margin: 0 auto; } .djbc-theme .djbc-live-channels-inner { width: 100%; } .djbc-theme .djbc-live-channels-sub { color: #a1a1aa; margin: 0.35rem 0 1.5rem; font-size: 0.95rem; } .djbc-theme .djbc-channel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } @media (max-width: 720px) { .djbc-theme .djbc-channel-grid { grid-template-columns: 1fr; } } .djbc-theme .djbc-channel-card { position: relative; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 1.5rem 1.5rem 1.4rem; background: #101014; /* fallback when color-mix() is unsupported */ background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--djbc-ch-accent) 16%, transparent), transparent 60%), #101014; overflow: hidden; transition: border-color 0.25s ease, transform 0.25s ease; } .djbc-theme .djbc-channel-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--djbc-ch-accent); opacity: 0.85; } .djbc-theme .djbc-channel-card:hover { border-color: var(--djbc-ch-accent); /* fallback when color-mix() is unsupported */ border-color: color-mix(in srgb, var(--djbc-ch-accent) 45%, transparent); transform: translateY(-2px); } .djbc-theme .djbc-channel-card-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; } .djbc-theme .djbc-channel-card-name { margin: 0; font-size: 1.5rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; } .djbc-theme .djbc-channel-card-tagline { margin: 0 0 1rem; color: #b4b4bd; font-size: 0.95rem; line-height: 1.5; } /* Live badge inside a channel card: dim until that channel is playing. */ .djbc-theme .djbc-channel-card .djbc-live-badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--djbc-ch-accent); opacity: 0.55; } .djbc-theme .djbc-channel-card .djbc-live-badge .djbc-live-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--djbc-ch-accent); } .djbc-theme .djbc-channel-card .djbc-live-badge.is-live { opacity: 1; } .djbc-theme .djbc-channel-card .djbc-live-badge.is-live .djbc-live-badge-dot { animation: djbc-ch-pulse 1.4s ease-in-out infinite; } @keyframes djbc-ch-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--djbc-ch-accent) 70%, transparent); opacity: 1; } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--djbc-ch-accent) 0%, transparent); opacity: 0.6; } } .djbc-theme .djbc-channel-nowplaying { display: flex; align-items: baseline; gap: 0.4rem; margin: 0 0 0.9rem; font-size: 0.85rem; color: #d4d4d8; } .djbc-theme .djbc-channel-np-label { color: var(--djbc-ch-accent); font-weight: 600; white-space: nowrap; } .djbc-theme .djbc-channel-np-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .djbc-theme .djbc-channel-card-actions { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; margin-bottom: 0.4rem; } .djbc-theme .djbc-channel-tunein { color: #000; cursor: pointer; border: none; } .djbc-theme .djbc-channel-tunein.is-playing > svg { display: none; } .djbc-theme .djbc-channel-offline { font-size: 0.82rem; color: #aeaeb8; /* AA contrast on the dark card */ font-style: italic; } .djbc-theme .djbc-channel-genres { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.07); } .djbc-theme .djbc-channel-genres-label { display: block; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: #8a8a93; margin-bottom: 0.55rem; } .djbc-theme .djbc-channel-genres-list { display: flex; flex-wrap: wrap; gap: 0.4rem; } .djbc-theme .djbc-channel-genre-chip { display: inline-block; padding: 0.28rem 0.7rem; border-radius: 999px; font-size: 0.8rem; color: #e4e4e7; text-decoration: none; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); transition: border-color 0.2s ease, color 0.2s ease; } .djbc-theme .djbc-channel-genre-chip:hover { color: #fff; border-color: var(--djbc-ch-accent); /* fallback when color-mix() is unsupported */ border-color: color-mix(in srgb, var(--djbc-ch-accent) 55%, transparent); } /* ---- Station strip: persistent tune-in controls ---- */ .djbc-theme .djbc-station-strip-tune { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 0.6rem; flex-wrap: wrap; } .djbc-theme .djbc-strip-tunein { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.6rem; border-radius: 999px; border: 1px solid var(--djbc-ch-accent); /* fallback when color-mix() is unsupported */ border: 1px solid color-mix(in srgb, var(--djbc-ch-accent) 50%, transparent); background: rgba(255, 255, 255, 0.08); /* fallback when color-mix() is unsupported */ background: color-mix(in srgb, var(--djbc-ch-accent) 12%, transparent); color: #fff; font-size: 0.72rem; font-weight: 600; cursor: pointer; line-height: 1.4; transition: background 0.2s ease, border-color 0.2s ease; } .djbc-theme .djbc-strip-tunein:hover { background: rgba(255, 255, 255, 0.14); /* fallback when color-mix() is unsupported */ background: color-mix(in srgb, var(--djbc-ch-accent) 24%, transparent); } .djbc-theme .djbc-strip-tunein.is-playing { background: var(--djbc-ch-accent); color: #000; border-color: var(--djbc-ch-accent); } .djbc-theme .djbc-strip-ico { flex: 0 0 auto; } .djbc-theme .djbc-strip-nowplaying { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72rem; color: #c7c7cf; font-style: italic; } @media (max-width: 600px) { .djbc-theme .djbc-strip-tunein-label { display: none; } .djbc-theme .djbc-strip-nowplaying { display: none; } } /* ---- Genre page: "Airs live on [Channel] →" + softened archive bar ---- */ .djbc-theme .djbc-genre-airs-on { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.85rem; font-size: 0.85rem; color: #c7c7cf; text-decoration: none; } .djbc-theme .djbc-genre-airs-on:hover { color: #fff; } .djbc-theme .djbc-genre-airs-on-name { font-weight: 700; color: var(--djbc-ch-accent); } .djbc-theme .djbc-genre-airs-on svg { color: var(--djbc-ch-accent); } /* The genre hero bar is the ARCHIVE badge now (not live) — calmer tone. */ .djbc-theme .djbc-broadcast-bar-archive { opacity: 0.9; } .djbc-theme .djbc-broadcast-bar-archive .djbc-eq { opacity: 0.55; } /* Geo-block: live channels + archive recordings are audio → disabled outside Hungary. */ .djbc-theme .djbc-channel-tunein[disabled], .djbc-theme .djbc-strip-tunein[disabled], .djbc-theme [data-archive-play][disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ============================================================ v2.19.0 — Listen quality (kbps) picker ------------------------------------------------------------ A channel can expose several pre-encoded AzuraCast mounts (e.g. 320 + 192 kbps); archive recordings can exist at several pre-encoded bitrates. These controls ONLY render when more than one quality actually exists — with today's single 192k mount nothing below appears. Styling reuses the established pill/capsule language: hairline borders, accent fill for the active segment, tabular numerals like broadcast hardware. ============================================================ */ /* ---- Channel card: segmented "QUALITY 320|192 kbps" control ---- */ .djbc-theme .djbc-channel-quality { display: flex; align-items: center; gap: 0.55rem; margin: 0.65rem 0 0.2rem; } .djbc-theme .djbc-channel-quality-label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: #8a8a93; } .djbc-theme .djbc-channel-quality-seg { display: inline-flex; align-items: stretch; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(255, 255, 255, 0.04); overflow: hidden; } .djbc-theme .djbc-quality-btn { appearance: none; -webkit-appearance: none; border: none; background: transparent; padding: 0.28rem 0.85rem; color: #c7c7cf; font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; line-height: 1.4; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .djbc-theme .djbc-quality-btn + .djbc-quality-btn { border-left: 1px solid rgba(255, 255, 255, 0.1); } .djbc-theme .djbc-quality-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); /* fallback when color-mix() is unsupported */ background: color-mix(in srgb, var(--djbc-ch-accent, #f97316) 16%, transparent); } .djbc-theme .djbc-quality-btn.is-active { background: var(--djbc-ch-accent, #f97316); color: #000; } .djbc-theme .djbc-channel-quality-unit { font-size: 0.7rem; letter-spacing: 0.06em; color: #8a8a93; } /* Brief pulse while the live source re-tunes at the new quality. */ @keyframes djbcQualitySwap { 0% { opacity: 1; } 35% { opacity: 0.45; } 100% { opacity: 1; } } .djbc-theme .djbc-channel-quality.is-switching .djbc-channel-quality-seg { animation: djbcQualitySwap 0.6s ease; } @media (prefers-reduced-motion: reduce) { .djbc-theme .djbc-channel-quality.is-switching .djbc-channel-quality-seg { animation: none; } } /* ---- Station strip: compact picker for the playing channel ---- */ .djbc-theme .djbc-strip-quality { display: inline-flex; align-items: center; margin-left: 0.45rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; background: rgba(255, 255, 255, 0.05); overflow: hidden; } .djbc-theme .djbc-strip-quality[hidden] { display: none; } .djbc-theme .djbc-strip-quality .djbc-quality-btn { padding: 0.12rem 0.5rem; font-size: 0.68rem; } .djbc-theme .djbc-strip-quality-unit { font-size: 0.62rem; letter-spacing: 0.06em; color: #8a8a93; padding: 0 0.5rem 0 0.35rem; } @media (max-width: 600px) { .djbc-theme .djbc-strip-quality { display: none; } } /* ---- Archive entry: "Download · 320 | 192 kbps" capsule ---- */ .djbc-theme .djbc-archive-dl-group { display: inline-flex; align-items: stretch; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.04); overflow: hidden; white-space: nowrap; } .djbc-theme .djbc-archive-dl-group-label { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.7rem 0.45rem 0.95rem; color: #fff; font-size: 0.8rem; font-weight: 600; } .djbc-theme .djbc-archive-dl-opt { display: inline-flex; align-items: center; padding: 0.45rem 0.8rem; border-left: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; text-decoration: none; transition: background 0.2s ease; } .djbc-theme .djbc-archive-dl-opt small { font-size: 0.62rem; font-weight: 600; color: rgba(255, 255, 255, 0.5); margin-left: 3px; letter-spacing: 0.04em; } .djbc-theme .djbc-archive-dl-opt:hover { background: rgba(255, 255, 255, 0.1); /* fallback when color-mix() is unsupported */ background: color-mix(in srgb, var(--djbc-arc-accent, #fff) 22%, transparent); } .djbc-theme .djbc-archive-dl-kbps { font-size: 0.65rem; font-weight: 600; color: rgba(255, 255, 255, 0.55); margin-left: 0.15rem; letter-spacing: 0.04em; } @media (max-width: 480px) { /* Let the capsule take its own full-width row under Play (the actions container is inline-flex nowrap everywhere else). */ .djbc-theme .djbc-broadcast-archive-actions { flex-wrap: wrap; } .djbc-theme .djbc-archive-dl-group { flex: 1 1 100%; } .djbc-theme .djbc-archive-dl-group-label { flex: 1; justify-content: center; padding-left: 0.7rem; } } /* Geo-block: quality picking is part of live playback → disabled too. Download links are gated like playback (distribution of the audio is covered by the same contractual HU restriction). */ .djbc-theme [data-quality-pick][disabled], .djbc-theme .djbc-broadcast-archive-dl[disabled], .djbc-theme .djbc-archive-dl-opt[disabled], .djbc-theme .djbc-download-btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ============================================================ v2.22.0 — Polish release Skip link, SR announcer, site footer, live mini-pill, stream-error toast, embed facades, mix search, form validation, listeners + history, genre tune-in, privacy page ============================================================ */ /* ---- Skip link (visually hidden until keyboard focus) ---- */ .djbc-skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 0.6rem 1rem; background: #f97316; color: #000; font-weight: 700; font-size: 0.85rem; border-radius: 0 0 8px 0; text-decoration: none; } .djbc-skip-link:focus { left: 0; } /* ---- Visually-hidden live region (soft-swap announcements) ---- */ .djbc-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- Site footer (legal line + privacy link) ---- */ .djbc-theme .djbc-site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1.25rem; padding: 1.5rem 1.25rem calc(2.25rem + env(safe-area-inset-bottom, 0px)); background: #0a0a0a; color: #6b6b75; font-size: 0.75rem; } .djbc-theme .djbc-site-footer a { color: #9b9ba5; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.18); padding-bottom: 1px; } .djbc-theme .djbc-site-footer a:hover { color: #fff; } /* ---- Persistent live mini-pill (bottom-left, every page) ---- */ .djbc-theme .djbc-live-pill { position: fixed; left: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 70; display: flex; align-items: center; gap: 0.6rem; max-width: min(92vw, 460px); padding: 0.5rem 0.625rem 0.5rem 0.875rem; background: rgba(16, 16, 18, 0.96); border: 1px solid rgba(255, 255, 255, 0.12); border-left: 3px solid var(--djbc-ch-accent, #f97316); border-radius: 999px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.8rem; backdrop-filter: blur(8px); } .djbc-theme .djbc-live-pill[hidden] { display: none; } /* The bottom player bar (fixed, full-width, 4–4.5rem) stays visible once a mix has been revealed even while paused — lift the pill above it so the two never overlap. The pill follows the bar in the footer DOM. */ .djbc-theme #djbc-bottom-player:not([hidden]) ~ .djbc-live-pill { bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)); } .djbc-theme .djbc-live-pill .djbc-eq { color: var(--djbc-ch-accent, #f97316); height: 12px; flex: 0 0 auto; } .djbc-theme .djbc-live-pill-label { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } .djbc-theme .djbc-live-pill-np { min-width: 0; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #b9b9c3; } .djbc-theme .djbc-live-pill-stop { display: inline-flex; align-items: center; gap: 0.3rem; flex: 0 0 auto; padding: 0.35rem 0.7rem; background: var(--djbc-ch-accent, #f97316); color: #000; font-weight: 700; font-size: 0.72rem; border: 0; border-radius: 999px; } .djbc-theme .djbc-live-pill-stop:hover { filter: brightness(1.1); } @media (max-width: 640px) { .djbc-theme .djbc-live-pill { left: 0.6rem; bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); font-size: 0.75rem; gap: 0.45rem; } .djbc-theme .djbc-live-pill-label { max-width: 30vw; } .djbc-theme .djbc-live-pill-np { max-width: 26vw; } } /* ---- Stream-error toast: orange accent variant of the geo toast ---- */ .djbc-theme .djbc-stream-toast { border-color: rgba(249, 115, 22, 0.45); z-index: 65; } .djbc-theme .djbc-stream-toast .djbc-geo-toast-icon { color: rgba(249, 115, 22, 0.95); } .djbc-theme .djbc-stream-toast-msg[hidden] { display: none; } /* ---- Click-to-load embed facades (mix pages, GDPR) ---- */ .djbc-theme .djbc-embed-facade { display: flex; width: 100%; align-items: center; gap: 1rem; padding: 1.25rem; background: rgba(255, 255, 255, 0.04); border: 1px dashed rgba(255, 255, 255, 0.18); border-radius: 12px; color: #fff; text-align: left; transition: border-color 0.2s ease, background 0.2s ease; } .djbc-theme .djbc-embed-facade:hover { border-color: var(--djbc-embed-accent, #f97316); background: rgba(255, 255, 255, 0.07); } .djbc-theme .djbc-embed-facade-play { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--djbc-embed-accent, #f97316); } .djbc-theme .djbc-embed-facade-text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .djbc-theme .djbc-embed-facade-title { font-weight: 700; font-size: 0.95rem; } .djbc-theme .djbc-embed-facade-note { font-size: 0.75rem; color: #9b9ba5; line-height: 1.45; } /* ---- Mix search (genre page) ---- */ .djbc-theme .djbc-mix-grid-tools { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .djbc-theme .djbc-mix-search { width: 210px; max-width: 56vw; padding: 0.45rem 0.875rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; color: #fff; font-size: 0.8rem; } .djbc-theme .djbc-mix-search:focus { outline: none; border-color: #f97316; } .djbc-theme .djbc-mix-search-empty { color: #9b9ba5; font-size: 0.875rem; padding: 1.25rem 0 0; font-style: italic; } .djbc-theme .djbc-mix-row[hidden] { display: none !important; } /* ---- Form validation states + privacy line ---- */ .djbc-theme .djbc-input.is-invalid { border-color: #ef4444 !important; box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35); } .djbc-theme .djbc-field-err { display: block; margin-top: 0.35rem; color: #f87171; font-size: 0.75rem; } .djbc-theme .djbc-field-err[hidden] { display: none; } .djbc-theme .djbc-form-privacy { margin: 0.25rem 0 1rem; font-size: 0.75rem; color: #8b8b95; line-height: 1.5; } .djbc-theme .djbc-form-privacy a { color: #c7c7cf; text-decoration: underline; } .djbc-theme .djbc-form-privacy a:hover { color: #fff; } .djbc-theme .djbc-comments-privacy { margin: 0.6rem 0 0; } /* The card now-playing row is display:flex elsewhere, which would defeat its server-rendered hidden attribute — keep [hidden] authoritative. */ .djbc-theme .djbc-channel-nowplaying[hidden] { display: none !important; } /* Geo-block: the genre broadcast CTA is audio too. */ .djbc-theme [data-genre-play][disabled] { opacity: 0.5; cursor: not-allowed; } /* ---- Channel card: live listener count + recently played ---- */ .djbc-theme .djbc-channel-listeners { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: 0.6rem; font-size: 0.72rem; color: #b9b9c3; } .djbc-theme .djbc-channel-listeners b { color: var(--djbc-ch-accent, #f97316); font-weight: 700; } .djbc-theme .djbc-channel-listeners[hidden] { display: none; } .djbc-theme .djbc-channel-history { margin-top: 0.85rem; } .djbc-theme .djbc-channel-history[hidden] { display: none; } .djbc-theme .djbc-channel-history-toggle { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0; background: none; border: 0; color: #9b9ba5; font-size: 0.75rem; } .djbc-theme .djbc-channel-history-toggle:hover { color: #fff; } .djbc-theme .djbc-channel-history-toggle svg { transition: transform 0.2s ease; } .djbc-theme .djbc-channel-history-toggle.is-open svg { transform: rotate(180deg); } .djbc-theme .djbc-channel-history-list { margin: 0.6rem 0 0; padding-left: 1.1rem; font-size: 0.78rem; color: #b9b9c3; line-height: 1.7; } .djbc-theme .djbc-channel-history-list[hidden] { display: none; } /* ---- Genre page: direct tune-in button (+ homepage link bubble) ---- */ .djbc-theme .djbc-genre-airs-on-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.85rem; } .djbc-theme .djbc-genre-airs-on-row .djbc-genre-airs-on { margin-top: 0; } .djbc-theme button.djbc-genre-airs-on-tunein { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; padding: 0.45rem 0.9rem; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .djbc-theme button.djbc-genre-airs-on-tunein:hover { border-color: var(--djbc-ch-accent); background: rgba(255, 255, 255, 0.1); color: #fff; } .djbc-theme .djbc-genre-airs-on-tunein .djbc-strip-ico { color: var(--djbc-ch-accent); } .djbc-theme .djbc-genre-airs-on-tunein.is-playing { border-color: var(--djbc-ch-accent); box-shadow: 0 0 18px -6px var(--djbc-ch-accent); color: #fff; } .djbc-theme .djbc-genre-airs-on-tunein[disabled] { opacity: 0.5; cursor: not-allowed; } .djbc-theme .djbc-genre-airs-on-more { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.14); color: #9b9ba5; text-decoration: none; } .djbc-theme .djbc-genre-airs-on-more:hover { color: #fff; border-color: rgba(255, 255, 255, 0.35); } /* ---- Homepage hero: CTA pair ---- */ .djbc-theme .djbc-hero-cta-row { display: flex; align-items: center; justify-content: center; gap: 0.875rem; flex-wrap: wrap; margin-top: 0.5rem; } .djbc-theme .djbc-hero-listen-cta { background-color: #f97316; box-shadow: 0 10px 25px -5px rgba(249, 115, 22, 0.45); } /* ---- Privacy page ---- */ .djbc-theme .djbc-page-privacy { background: #0a0a0a; min-height: 100vh; } .djbc-theme .djbc-privacy-wrap { max-width: 760px; margin: 0 auto; padding: 3rem 1.5rem 4rem; } .djbc-theme .djbc-privacy-body { color: #c7c7cf; font-size: 0.925rem; line-height: 1.75; } .djbc-theme .djbc-privacy-body h2 { color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: 1.25rem; margin: 2.25rem 0 0.75rem; } .djbc-theme .djbc-privacy-body h3 { color: #e8e8ee; font-size: 1rem; margin: 1.5rem 0 0.5rem; } .djbc-theme .djbc-privacy-body ul { padding-left: 1.25rem; margin: 0.5rem 0 1rem; } .djbc-theme .djbc-privacy-body li { margin: 0.3rem 0; } .djbc-theme .djbc-privacy-body a { color: #f97316; } .djbc-theme .djbc-privacy-body strong { color: #e8e8ee; } .djbc-theme .djbc-privacy-updated { margin-top: 2.5rem; font-size: 0.78rem; color: #6b6b75; font-style: italic; } /* ============================================================ v2.23.0 — Multi-bitrate downloads on the mix page The capsule reuses the genre-archive classes (and their geo-disable coverage); only hero placement is tuned here. ============================================================ */ .djbc-theme .djbc-mix-dl-group { margin-left: 0.75rem; vertical-align: middle; background: rgba(255, 255, 255, 0.04); } @media (max-width: 640px) { .djbc-theme .djbc-mix-dl-group { margin-left: 0; margin-top: 0.75rem; } } /* ---- Per-mix sub-genre chip (mix hero eyebrow) ---- */ .djbc-theme .djbc-mix-subgenre { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.5rem; border: 1px solid currentColor; border-radius: 999px; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; } /* ---- Genre page: intentional empty state (no mixes aired yet) ---- */ .djbc-theme .djbc-genre-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.85rem; max-width: 30rem; margin: 1rem auto 0; padding: 2.75rem 1.5rem; border: 1px dashed rgba(255, 255, 255, 0.14); border-radius: 16px; background: rgba(255, 255, 255, 0.02); } /* Reuses the base .djbc-eq bars (djbcEqBar animation) — just bigger + accented. */ .djbc-theme .djbc-genre-empty-eq { height: 26px; gap: 3px; color: var(--djbc-empty-accent, #f97316); } .djbc-theme .djbc-genre-empty-eq i { width: 4px; } .djbc-theme .djbc-genre-empty-title { margin: 0; font-size: 1.25rem; font-weight: 700; color: #fff; font-family: 'Space Grotesk', sans-serif; } .djbc-theme .djbc-genre-empty-body { margin: 0; font-size: 0.9rem; line-height: 1.6; color: rgba(255, 255, 255, 0.55); } .djbc-theme .djbc-genre-empty-cta { margin-top: 0.35rem; } @media (prefers-reduced-motion: reduce) { .djbc-theme .djbc-genre-empty-eq i { animation: none; } } /* ============================================================ v2.24.0 — Audit polish: mobile nav, empty-archive note, toast/pill stacking ============================================================ */ /* ---- Mobile hamburger nav ---- Desktop: the links wrapper is display:contents, so the links flow inline in .djbc-nav exactly as before and the burger is hidden. Mobile: the wrapper becomes a dropdown panel toggled by the burger. */ .djbc-theme .djbc-nav-links { display: contents; } .djbc-theme .djbc-nav-burger { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 9px; color: #fff; } .djbc-theme .djbc-nav-burger:hover { background: rgba(255, 255, 255, 0.12); } @media (max-width: 639px) { .djbc-theme .djbc-nav-burger { display: inline-flex; } .djbc-theme .djbc-nav-links { display: none; position: absolute; top: calc(100% + 6px); right: 1rem; min-width: 168px; flex-direction: column; gap: 0.25rem; padding: 0.5rem; background: rgba(12, 12, 14, 0.98); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55); backdrop-filter: blur(10px); z-index: 80; } .djbc-theme .djbc-nav-links.is-open { display: flex; } .djbc-theme .djbc-nav-links .djbc-nav-link { display: block; padding: 0.6rem 0.7rem; font-size: 0.8rem; border-radius: 7px; } .djbc-theme .djbc-nav-links .djbc-nav-link:hover { background: rgba(255, 255, 255, 0.08); } /* No position override needed: .djbc-header is already sticky and .djbc-genre-nav is already fixed — both are the dropdown's positioned ancestor. Overriding them to relative would break the headers. */ } /* ---- Empty "Korábbi adások" note (genre has mixes, no archive yet) ---- */ .djbc-theme .djbc-broadcast-archive-empty { color: rgba(255, 255, 255, 0.5); font-size: 0.9rem; font-style: italic; margin: 0.5rem 0 0; } /* ---- Toast vs live pill: on mobile the pill sits bottom-left and the toasts bottom-(center/right); lift the toasts so they never overlap the pill when both are visible. ---- */ @media (max-width: 640px) { .djbc-theme #djbc-bottom-player:not([hidden]) ~ .djbc-geo-toast, .djbc-theme .djbc-live-pill:not([hidden]) ~ .djbc-geo-toast, .djbc-theme .djbc-live-pill:not([hidden]) ~ .djbc-stream-toast { bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); } }