#jg-player {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 10001;
background: #f9f7f4; border-top: 2px solid #000;
box-shadow: 0 -8px 40px rgba(80,122,102,0.15);
display: flex; flex-direction: column;
transition: transform var(--jg-player-ms, 400ms) var(--jg-anim-easing, cubic-bezier(0.4,0,0.2,1)), border-top-color 0.5s ease;
}
#jg-player.jg-player-hidden { transform: translateY(100%); }
#jg-player-toggle {
width: 100%; height: 28px;
position: relative;
background: #f0eeeb;
border: none; border-bottom: 1px solid rgba(0,0,0,0.12);
cursor: pointer; padding: 0; margin: 0;
display: flex; align-items: center; justify-content: center;
transition: background 0.2s;
flex-shrink: 0;
}
#jg-player-toggle:hover { background: #e8e5e0; }
#jg-toggle-track {
display: flex; align-items: center; justify-content: center;
gap: 6px;
width: 80px; height: 20px;
transition: opacity 0.2s;
} #jg-toggle-track::before,
#jg-toggle-track::after {
content: '';
display: block; height: 1px; width: 24px;
background: rgba(0,0,0,0.35);
}
#jg-player-toggle svg {
opacity: 0.6;
transition: opacity 0.15s;
flex-shrink: 0;
}
#jg-player-toggle:hover svg { opacity: 1; }
#jg-player-layout { display: grid; grid-template-columns: 400px 280px 200px 1fr 52px; grid-template-rows: minmax(0, 1fr); height: 400px; overflow: hidden; }
#jg-player.minimized #jg-player-layout { height: 0; } #jg-miniplayer {
display: none;
flex-direction: row;
align-items: stretch;
gap: 0;
height: 60px;
padding: 0;
box-sizing: border-box;
width: 100%;
overflow: hidden;
}
#jg-player.minimized #jg-miniplayer { display: flex; }
#jg-player.minimized #jg-player-layout { display: none; }
#jg-player.minimized { height: 88px; } #jg-mini-cover {
width: 60px; height: 100%;
object-fit: cover; flex-shrink: 0;
background: #e0ddd8; display: block;
} #jg-mini-info {
flex: 0 0 160px; min-width: 0;
display: flex; flex-direction: column;
justify-content: center;
gap: 2px;
padding: 0 14px;
border-right: 1px solid rgba(0,0,0,0.07);
}
#jg-mini-title {
font-size: 12px; font-weight: 600; color: #1a1a1a;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
line-height: 1.3;
}
#jg-mini-artist {
font-size: 11px; color: #888;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
line-height: 1.3;
} #jg-mini-progress-bar {
flex: 1; min-width: 0;
height: 20px;
background: rgba(0,0,0,0.12);
border-radius: 2px;
cursor: pointer;
position: relative;
align-self: center;
margin: 0 24px;
}
#jg-mini-progress-fill {
position: absolute; top: 0; left: 0;
height: 100%; width: 0%;
background: #000;
border-radius: 2px;
transition: width 0.1s linear, background 0.5s ease;
} #jg-mini-controls {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 4px;
flex-shrink: 0;
padding: 0 12px;
border-left: 1px solid rgba(0,0,0,0.07);
}
#jg-mini-controls button {
background: none; border: none; cursor: pointer; color: #000;
padding: 4px;
display: flex; align-items: center; justify-content: center;
transition: color 0.2s, transform 0.15s;
}
#jg-mini-controls button:hover { transform: scale(1.1); }
#jg-mini-play {
background: #000 !important; color: #fff !important;
border-radius: 50% !important;
width: 36px !important; height: 36px !important;
transition: background 0.5s ease !important;
} #jg-mini-expand { display: none !important; } #jg-mobile-expand { display: none; background: none; border: none; cursor: pointer; color: #666; padding: 4px; width: 36px; height: 36px; align-items: center; justify-content: center; transition: color 0.2s; flex-shrink: 0; } #jg-mini-vol-btn { display: none; background: none; border: none; cursor: pointer; color: #666; padding: 4px; width: 36px; height: 36px; align-items: center; justify-content: center; transition: color 0.2s; flex-shrink: 0; }
#jg-mini-vol-btn:hover { color: #000; }
#jg-mini-vol-btn.active { color: #000; } #jg-mini-volume {
width: 80px; flex-shrink: 0;
accent-color: #000;
cursor: pointer; margin: 0 16px;
-webkit-appearance: none; appearance: none;
height: 3px; border-radius: 2px;
background: rgba(0,0,0,0.12);
outline: none;
align-self: center;
}
#jg-mini-volume::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 12px; height: 12px;
border-radius: 50%; background: #000; cursor: pointer;
}
#jg-col-cover { position: relative; width: 400px; height: 400px; overflow: hidden; flex-shrink: 0; }
#jg-player-cover { width: 400px; height: 400px; object-fit: cover; display: block; background: #e0ddd8; }
#jg-cover-pulse { position: absolute; inset: 0; pointer-events: none; }
#jg-player.playing #jg-cover-pulse { animation: coverPulse 3s ease-in-out infinite; }
@keyframes coverPulse {
0%,100% { box-shadow: inset 0 0 0 0 rgba(0,0,0,0); }
50%      { box-shadow: inset 0 0 40px 0 rgba(0,0,0,0.1); }
}
#jg-col-info { display: flex; flex-direction: column; justify-content: space-between; padding: 28px 24px; border-right: 1px solid rgba(0,0,0,0.08); min-height: 0; overflow: hidden; }
#jg-info-top { display: flex; flex-direction: column; gap: 6px; }
#jg-player-album { font-size: 15px; font-weight: 800; color: #1a1a1a; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.2; }
#jg-player-title { font-size: 12px; color: #444; line-height: 1.4; }
#jg-player-artist { font-size: 11px; color: #888; font-style: italic; }
#jg-player-year { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: #000; transition: color 0.5s ease; } #jg-player-shop { display: none !important; }
#jg-col-playlist { display: flex; flex-direction: column; border-right: 1px solid rgba(0,0,0,0.08); overflow: hidden; min-height: 0; }
#jg-playlist-items { list-style: none; margin: 0; padding: 0 0 48px; overflow-y: auto; flex: 1; }
#jg-playlist-items::-webkit-scrollbar { width: 4px; }
#jg-playlist-items::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }
#jg-playlist-items li { padding: 9px 20px; font-size: 11px; color: #444; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,0.04); display: flex; align-items: center; gap: 8px; transition: background 0.15s, color 0.15s; overflow: hidden; }
#jg-playlist-items li:hover { background: rgba(0,0,0,0.04); color: #000; }
#jg-playlist-items li.active { background: rgba(0,0,0,0.06); color: #000; font-weight: 600; }
#jg-playlist-items li.active::before { content: '▶'; font-size: 8px; flex-shrink: 0; }
.jg-pl-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.jg-pl-remove { flex-shrink: 0; background: none; border: none; cursor: pointer; padding: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: rgba(0,0,0); opacity: 0; pointer-events: none; transition: color 0.15s, opacity 0.15s; line-height: 1; }
#jg-playlist-items li:hover .jg-pl-remove { opacity: 1; pointer-events: auto; }
.jg-pl-remove:hover { color: rgba(0,0,0,0.75); }
#jg-col-player { display: flex; flex-direction: column; padding: 24px 28px 20px; gap: 12px; overflow: hidden; box-sizing: border-box; min-height: 0; }
#jg-waveform-wrap { position: relative; flex: 1; min-height: 0; cursor: pointer; overflow: hidden; background: rgba(0,0,0,0.03); transition: background 0.5s ease; }
#jg-controls-row { flex-shrink: 0; height: 64px; display: flex; align-items: center; justify-content: space-between; }
#jg-waveform-static { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.35; }
#jg-progress-overlay { position: absolute; top: 0; left: 0; bottom: 0; width: 0%; background: rgba(0,0,0,0.05); pointer-events: none; border-right: 2px solid rgba(0,0,0,0.3); transition: width 0.1s linear; }
#jg-controls-center { display: flex; align-items: center; gap: 16px; }
#jg-time-current, #jg-time-total { font-size: 11px; color: #aaa; font-variant-numeric: tabular-nums; min-width: 36px; }
#jg-time-total { text-align: right; }
#jg-controls-center button { background: none; border: none; cursor: pointer; color: #000; padding: 6px; display: flex; align-items: center; justify-content: center; transition: color 0.2s, transform 0.15s; }
#jg-controls-center button:hover { transform: scale(1.1); }
#jg-play { background: #000 !important; color: #fff !important; width: 52px !important; height: 52px !important; border-radius: 50% !important; box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important; transition: background 0.5s ease, transform 0.15s, box-shadow 0.5s ease !important; }
#jg-play:hover { transform: scale(1.05) !important; } #jg-col-volume {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 12px; padding: 16px 0;
border-left: 1px solid rgba(0,0,0,0.08);
background: rgba(0,0,0,0.01);
height: 100%;
box-sizing: border-box;
}
#jg-col-volume svg { color: #bbb; flex-shrink: 0; }
#jg-volume {
writing-mode: vertical-lr;
direction: rtl;
appearance: slider-vertical;
-webkit-appearance: slider-vertical;
width: 6px;
height: calc(100% - 60px);
min-height: 80px;
accent-color: #000; cursor: pointer;
flex-shrink: 0;
} #jg-playlist-header { padding: 16px 20px 10px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: #000; border-bottom: 1px solid rgba(0,0,0,0.06); flex-shrink: 0; transition: color 0.5s ease; display: flex; align-items: center; justify-content: space-between; }
#jg-playlist-controls { display: flex; align-items: center; gap: 6px; }
#jg-repeat {
background: none; border: none; cursor: pointer;
color: rgba(0,0,0,0.25); padding: 3px; display: flex; align-items: center;
transition: color 0.2s, background 0.2s;
}
#jg-repeat:hover { color: rgba(0,0,0,0.6); }
#jg-repeat[data-mode="all"] { color: #000; }
#jg-repeat[data-mode="one"] { color: #000; background: rgba(0,0,0,0.07); } #jg-playlist-items li { cursor: grab; }
#jg-playlist-items li.dragging { opacity: 0.4; cursor: grabbing; }
#jg-playlist-items li.drag-over { border-top: 2px solid #000; } body { padding-bottom: 402px !important; }
body:has(#jg-player.minimized) { padding-bottom: 90px !important; }
body:has(#jg-player.jg-player-hidden) { padding-bottom: 0 !important; }
.wp-site-blocks { padding-bottom: 0 !important; } #jg-player.jg-player-hidden #jg-player-toggle { display: none; } footer.wp-block-template-part { position: relative; z-index: 0; margin-bottom: 0; } #jg-header-visualizer {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 100%;
pointer-events: none;
z-index: 0;
opacity: 0;
transition: opacity 0.8s ease; clip-path: inset(0);
}
#jg-header-visualizer.active { opacity: 1; }  .uagb-position__sticky,
.jg-header {
z-index: 10000 !important;
} .jg-header > *,
.jg-header .wp-block-site-title,
.jg-header .wp-block-navigation,
.jg-header nav,
.jg-header a,
.jg-header button { position: relative; z-index: 1; }   #jg-cover-panel {
position: fixed;
left: 0; top: calc(50% - var(--jg-player-height, 0px) / 2);
transform: translateY(-50%) translateX(-100%);
height: 50vh;
width: 50vh; z-index: 10000;
transition: transform var(--jg-panel-ms, 450ms) var(--jg-anim-easing, cubic-bezier(0.4,0,0.2,1));
overflow: hidden;
pointer-events: none;
box-shadow: 8px 0 40px rgba(0,0,0,0.25);
}
#jg-cover-panel.open {
transform: translateY(-50%) translateX(0);
pointer-events: auto;
}
#jg-cover-panel-img {
width: 100%; height: 100%;
object-fit: contain;
display: block;
background: #111;
} #jg-player-cover.has-project { cursor: pointer; }
#jg-player-cover.has-project:hover { opacity: 0.88; transition: opacity 0.2s; } #jg-project-panel {
position: fixed; top: 0; right: 0; bottom: 0;
width: min(680px, 100vw);
background: #f9f7f4;
z-index: 10000;
transform: translateX(100%);
transition: transform var(--jg-panel-ms, 450ms) var(--jg-anim-easing, cubic-bezier(0.4,0,0.2,1));
overflow-y: auto;
box-shadow: -8px 0 40px rgba(0,0,0,0.18);
display: flex; flex-direction: column;
}
#jg-project-panel.open { transform: translateX(0); }
#jg-project-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0);
z-index: 9999;
pointer-events: none;
transition: background 0.45s ease;
}
#jg-project-overlay.open {
background: rgba(0,0,0,0.45);
pointer-events: all;
}
#jg-project-close {
position: sticky; top: 0;
display: flex; justify-content: flex-end;
padding: 16px 20px 0;
background: #f9f7f4;
z-index: 2;
flex-shrink: 0;
}
#jg-project-close button {
background: none; border: none;
cursor: pointer; font-size: 22px; line-height: 1;
display: flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
color: #aaa; padding: 0; transition: color 0.2s;
}
#jg-project-close button:hover { color: #000; }
#jg-project-hero {
width: 100%; aspect-ratio: 16/7; object-fit: cover;
display: block; flex-shrink: 0;
}
#jg-project-body { padding: 32px 36px 48px; flex: 1; } #jg-project-title {
font-size: 2rem; font-weight: 800; text-transform: uppercase;
letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 4px;
}
#jg-project-subtitle {
font-size: 0.85rem; font-weight: 500; color: #888;
text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 16px;
}
#jg-project-actions {
display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 28px;
} #jg-project-content { font-size: 0.95rem; line-height: 1.75; color: #333; margin-bottom: 36px; }
#jg-project-content p,
#jg-project-content ul,
#jg-project-content ol { margin: 0 0 1em; }
#jg-project-content ul { padding-left: 1.25em; list-style: disc; }
#jg-project-content ol { padding-left: 1.25em; list-style: decimal; }
#jg-project-content li { margin-bottom: 0.3em; }
#jg-project-content h2 { font-size: 1.15rem; font-weight: 700; line-height: 1.25; margin: 1.6em 0 0.5em; color: #111; }
#jg-project-content h3 { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin: 1.4em 0 0.4em; color: #444; }
#jg-project-content strong { font-weight: 700; }
#jg-project-content em { font-style: italic; }
#jg-project-content a { color: #000; text-decoration: underline; }
#jg-project-content a:hover { opacity: 0.6; }
#jg-project-content p:last-child,
#jg-project-content ul:last-child,
#jg-project-content ol:last-child { margin-bottom: 0; } #jg-project-content .wp-block-embed__wrapper {
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
margin: 0 0 1em;
}
#jg-project-content .wp-block-embed__wrapper iframe,
#jg-project-content .wp-block-embed__wrapper video {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border: 0;
}
#jg-project-content iframe,
#jg-project-content video {
max-width: 100%;
} #jg-project-gallery {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
margin-bottom: 36px;
}
#jg-project-gallery img {
width: 100%; aspect-ratio: 1; object-fit: cover;
cursor: pointer; transition: opacity 0.2s;
}
#jg-project-gallery img:hover { opacity: 0.85; } #jg-project-albums {
border-top: 1px solid rgba(0,0,0,0.08);
padding-top: 24px;
}
#jg-project-albums h3 {
font-size: 20px; font-weight: 800; text-transform: uppercase;
letter-spacing: 0.12em; color: #000; margin: 0 0 16px;
padding-bottom: 0; border-bottom: none;
}
.jg-proj-album {
display: flex; align-items: center; gap: 14px;
padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.05);
}
.jg-proj-album img {
width: 80px; height: 80px; object-fit: cover; flex-shrink: 0;
background: #e0ddd8; cursor: pointer; transition: opacity 0.2s;
border-width: 1px;border-style: solid;border-color: #d8d0d0;
}
}
.jg-proj-album img:hover { opacity: 0.8; }
.jg-proj-album-current { background: transparent; border-radius: 0px; }
.jg-proj-album-current .jg-proj-album-title { font-weight: 800; }
.jg-proj-album-info { flex: 1; min-width: 0; }
.jg-proj-album-title { font-size: 12px; font-weight: 700; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jg-proj-album-year  { font-size: 11px; color: #888; margin-top: 2px; }
.jg-proj-album-actions { display: flex; gap: 8px; flex-shrink: 0; }
.jg-proj-btn-play {
display: flex; align-items: center; gap: 5px;
background: #000; color: #fff; border: none; cursor: pointer;
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.1em; padding: 6px 12px;
transition: background 0.2s;
}
.jg-proj-btn-play:hover { background: #333; }
.jg-proj-btn-shop {
display: flex; align-items: center;
border: 1.5px solid #000; color: #000; background: none; cursor: pointer;
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.1em; padding: 6px 12px;
text-decoration: none; transition: background 0.2s, color 0.2s;
}
.jg-proj-btn-shop:hover { background: #000; color: #fff; } #jg-project-loading {
display: none; flex-direction: column; align-items: center;
justify-content: center; flex: 1; padding: 60px 0; gap: 16px;
color: #aaa; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
}
#jg-project-loading.visible { display: flex; }
#jg-project-spinner {
width: 28px; height: 28px; border: 2px solid rgba(0,0,0,0.1);
border-top-color: #000; border-radius: 50%;
animation: jgSpin 0.8s linear infinite;
}
@keyframes jgSpin { to { transform: rotate(360deg); } } .jg-btn-project {
display: inline-flex; align-items: center; gap: 6px;
background: none; color: rgba(255,255,255,0.75);
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.1em; padding: 6px 14px;
border: 1.5px solid rgba(255,255,255,0.35); cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s; flex-shrink: 0;
}
.jg-btn-project:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.7); }
.jg-flip-card-back .jg-card-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; align-self: end; padding-top: 6px; padding-bottom: 2px; } @media (max-width: 1200px) {
#jg-player-layout { grid-template-columns: 240px 260px 160px 1fr 52px; grid-template-rows: minmax(0, 1fr); height: 240px; }
#jg-col-cover, #jg-player-cover { width: 240px; height: 240px; }
#jg-player-album { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body { padding-bottom: 242px !important; } .wp-site-blocks { padding-bottom: 0 !important; }
}
@media (max-width: 900px) {
#jg-col-playlist { display: none; }
#jg-player-layout { grid-template-columns: 160px 220px 1fr 52px; grid-template-rows: minmax(0, 1fr); height: 160px; }
#jg-col-cover, #jg-player-cover { width: 160px; height: 160px; }
#jg-col-player { padding: 12px 16px 10px; gap: 8px; }
#jg-controls-row { height: 52px; }
#jg-player-album { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body { padding-bottom: 162px !important; } .wp-site-blocks { padding-bottom: 0 !important; }
}
@media (max-width: 600px) {
#jg-col-info, #jg-col-playlist, #jg-col-volume { display: none; }
#jg-player-layout { grid-template-columns: 80px 1fr; height: 80px; }
#jg-col-cover, #jg-player-cover { width: 80px; height: 80px; }
#jg-waveform-wrap { display: none; }
#jg-player-toggle { display: none; }
body { padding-bottom: 82px !important; } .wp-site-blocks { padding-bottom: 0 !important; } #jg-player.mobile-expanded {
height: 100vh; height: 100svh; } #jg-player.mobile-expanded #jg-player-toggle {
display: flex;
background: #e8e5e0; } #jg-player.mobile-expanded #jg-player-layout {
display: flex; flex-direction: column;
height: calc(100% - 28px); overflow: hidden; } #jg-player.mobile-expanded #jg-col-cover { width: 100%; height: min(260px, 40svh); flex-shrink: 0; }
#jg-player.mobile-expanded #jg-player-cover { width: 100%; height: 100%; object-fit: cover; } #jg-player.mobile-expanded #jg-col-info {
display: flex; flex-shrink: 0;
border-right: none; border-bottom: 1px solid rgba(0,0,0,0.08);
padding: 12px 20px 10px;
} #jg-player.mobile-expanded #jg-col-playlist {
display: flex; flex: 1 1 auto; min-height: 60px;
border-right: none; border-bottom: 1px solid rgba(0,0,0,0.08);
overflow: hidden;
} #jg-player.mobile-expanded #jg-col-player { padding: 10px 20px 14px; flex-shrink: 0; }
#jg-player.mobile-expanded #jg-waveform-wrap { display: block; height: 40px; }
#jg-player.mobile-expanded #jg-col-volume { display: none; } body:has(#jg-player.mobile-expanded) { overflow: hidden; }
body:has(#jg-player.mobile-expanded) .wp-site-blocks { padding-bottom: 0 !important; }
#jg-player.mobile-expanded #jg-mini-expand svg { transform: rotate(180deg); } #jg-mobile-expand { display: flex; }
#jg-mobile-expand:hover { color: #000; }
#jg-player.mobile-expanded #jg-mobile-expand svg { transform: rotate(180deg); } #jg-miniplayer { gap: 6px; padding: 0 10px; }
#jg-mini-cover { width: 36px; height: 36px; flex-shrink: 0; }
#jg-mini-info { flex: 1 1 0; min-width: 0; gap: 2px; height: auto; }
#jg-mini-title { font-size: 11px; }
#jg-mini-volume { display: none; }
#jg-mini-controls { gap: 2px; padding: 0 6px; }
#jg-mini-controls button { padding: 2px; }
#jg-mini-play { width: 30px !important; height: 30px !important; }
}   #jg-about-panel {
position: fixed; top: 0; right: 0; bottom: 0;
width: min(680px, 100vw);
background: #f9f7f4;
z-index: 10001;
transform: translateX(100%);
transition: transform var(--jg-panel-ms, 450ms) var(--jg-anim-easing, cubic-bezier(0.4,0,0.2,1));
overflow-y: auto;
display: flex; flex-direction: column;
box-shadow: -8px 0 40px rgba(0,0,0,0.18);
}
#jg-about-panel.open { transform: translateX(0); }
#jg-about-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0);
z-index: 10000;
pointer-events: none;
transition: background 0.45s ease;
}
#jg-about-overlay.open {
background: rgba(0,0,0,0.45);
pointer-events: all;
}
#jg-about-close {
position: sticky; top: 0; z-index: 2;
display: flex; justify-content: flex-end;
padding: 16px 20px 0;
background: #f9f7f4;
}
#jg-about-close button {
background: none; border: none;
cursor: pointer; font-size: 22px; line-height: 1;
display: flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
color: #aaa; padding: 0; transition: color 0.2s;
}
#jg-about-close button:hover { color: #000; }
#jg-about-loading {
display: flex; align-items: center; gap: 12px;
padding: 40px; color: #999; font-size: 13px;
text-transform: uppercase; letter-spacing: 0.1em;
}
#jg-about-spinner {
width: 28px; height: 28px; border: 2px solid rgba(0,0,0,0.1);
border-top-color: #000; border-radius: 50%;
animation: jgSpin 0.8s linear infinite;
}
#jg-about-body {
padding: 32px 36px 80px;
font-size: 15px; line-height: 1.75; color: #1a1a1a;
flex: 1;
}
#jg-about-body h1 { font-size: 2rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 24px; }
#jg-about-body h2 { font-size: 1.2rem; font-weight: 700; margin: 32px 0 12px; }
#jg-about-body p { margin: 0 0 18px; }
#jg-about-body img { max-width: 100%; height: auto; margin: 24px 0; }
@media (max-width: 600px) {
#jg-about-body { padding: 20px 20px 60px; }
}  .wp-block-navigation__container,
.wp-block-navigation > ul {
gap: 20px !important;
margin-left: 0 !important;
}
.wp-block-navigation {
justify-content: flex-start !important;
}
.wp-block-navigation__container .wp-block-navigation-item,
.wp-block-navigation > ul > li {
margin: 0 !important;
padding: 0 !important;
}  @media (min-width: 600px) and (max-width: 900px) { .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
display: none !important;
visibility: hidden !important;
} .wp-block-navigation__responsive-container-open:not(.always-shown) {
display: flex !important;
}
} #jg-contact-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.5);
z-index: 20000; opacity: 0; pointer-events: none;
transition: opacity 0.3s ease;
}
#jg-contact-overlay.open { opacity: 1; pointer-events: all; }
#jg-contact-modal {
position: fixed; top: 50%; left: 50%; z-index: 20001;
transform: translate(-50%, -50%);
width: min(520px, 94vw);
background: #f9f7f4; box-shadow: 0 20px 60px rgba(0,0,0,0.25);
opacity: 0; pointer-events: none;
transition: opacity 0.25s ease;
}
#jg-contact-modal.open {
opacity: 1; pointer-events: all;
}
#jg-contact-header {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 24px; border-bottom: 1px solid rgba(0,0,0,0.08);
}
#jg-contact-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
#jg-contact-close {
background: none; border: none; cursor: pointer; font-size: 18px;
display: flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
color: #666; padding: 0; transition: color 0.2s;
flex-shrink: 0;
}
#jg-contact-close:hover { color: #000; }
#jg-contact-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.jg-contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#jg-contact-body input, #jg-contact-body textarea {
width: 100%; box-sizing: border-box;
border: 1.5px solid rgba(0,0,0,0.15); background: #fff;
padding: 10px 12px; font-size: 13px; font-family: inherit;
outline: none; transition: border-color 0.2s;
}
#jg-contact-body input:focus, #jg-contact-body textarea:focus { border-color: #000; }
#jg-contact-body textarea { resize: vertical; min-height: 100px; }
#jg-contact-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
#jg-contact-error { font-size: 12px; color: #c00; flex: 1; }
#jg-contact-submit {
background: #000; color: #fff; border: none; cursor: pointer;
padding: 10px 28px; font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.1em;
border-radius: 0; transition: background 0.2s; flex-shrink: 0;
}
#jg-contact-submit:hover { background: #333; }
#jg-contact-submit:disabled { opacity: 0.5; cursor: not-allowed; }
#jg-contact-success {
text-align: center; padding: 20px 0; display: flex;
flex-direction: column; align-items: center; gap: 12px;
color: #2a7a4b;
}
#jg-contact-success svg { stroke: #2a7a4b; }
@media (max-width: 480px) {
.jg-contact-row { grid-template-columns: 1fr; }
}  #jg-cta-prefooter {
background: #0d0d0d;
color: #fff;
text-align: center;
padding: 90px 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
}
#jg-cta-prefooter .jg-cta-label {
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
}
#jg-cta-prefooter .jg-cta-title {
font-size: clamp(1.6rem, 4vw, 2.8rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.15;
max-width: 720px;
margin: 0;
}
#jg-cta-prefooter .jg-cta-sub {
color: rgba(255,255,255,0.55);
font-size: 0.92rem;
max-width: 500px;
line-height: 1.65;
margin: 0;
}
#jg-cta-prefooter .jg-cta-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: #fff;
color: #000;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
padding: 14px 36px;
border: none;
cursor: pointer;
transition: background 0.2s, color 0.2s;
margin-top: 8px;
}
#jg-cta-prefooter .jg-cta-btn:hover {
background: rgba(255,255,255,0.85);
}
@media (max-width: 600px) {
#jg-cta-prefooter { padding: 60px 24px; gap: 20px; }
}  @media (max-width: 900px) {
#jg-cover-panel { display: none !important; }
}  @media (max-width: 600px) {
#jg-cover-panel {
width: min(80vw, 80vh);
height: min(80vw, 80vh);
} #jg-player.minimized             { height: 60px; }
body                             { padding-bottom: 62px !important; }
body:has(#jg-player.minimized)   { padding-bottom: 62px !important; } #jg-mini-cover { width: 60px; height: 100%; }
}  @media (max-width: 600px) {
#jg-project-body     { padding: 20px 20px 40px; } #jg-project-hero     { aspect-ratio: 1; object-fit: contain; background: #111; }
#jg-project-gallery  { grid-template-columns: repeat(2, 1fr); } #jg-project-title    { font-size: clamp(1.2rem, 6.5vw, 2rem); } #jg-time-current, #jg-time-total { display: none; }
}
@media (max-width: 360px) { #jg-col-player { padding: 8px 10px 8px; }
.jg-flip-card-back { padding: 14px 8px 10px; }
.jg-btn-listen, .jg-btn-queue, .jg-btn-project { font-size: 8px; padding: 3px 6px; gap: 3px; }
}
����  .jg-action-btn-wrap {
margin-top: 16px;
}
.jg-action-btn {
display:             inline-block;
padding:             12px 32px;
background:          transparent;
border:              2px solid rgba(255, 255, 255, 0.75);
border-radius:       0;
color:               #fff;
font-size:           15px;
font-weight:         300;
letter-spacing:      0.06em;
text-transform:      uppercase;
cursor:              pointer;
text-decoration:     none;
transition:          border-color 0.25s, background 0.25s, transform 0.2s;
backdrop-filter:     blur(4px);
-webkit-backdrop-filter: blur(4px);
min-width:           44px;
min-height:          44px;
line-height:         1.4;
}
.jg-action-btn:hover,
.jg-action-btn:focus {
border-color: #fff;
background:   rgba(255, 255, 255, 0.08);
outline:      none;
}
@media (max-width: 768px) {
.jg-action-btn { font-size: 14px; padding: 10px 24px; }
}  #jg-project-panel.open,
#jg-about-panel.open {
padding-bottom: var(--jg-player-height, 0px);
}  @media (max-width: 1439px) {
#jg-project-panel,
#jg-about-panel { width: min(680px, 55vw); }
}
@media (max-width: 1099px) { #jg-cover-panel { display: none !important; }
} @media (max-width: 1023px) {
#jg-project-panel,
#jg-about-panel { width: min(680px, 80vw); }
} @media (max-width: 767px) {
#jg-project-panel,
#jg-about-panel {
width: 100vw;
box-shadow: none;
}
#jg-project-overlay.open,
#jg-about-overlay.open {
background: transparent;
pointer-events: none;
}
} @media (max-width: 600px) {
#jg-project-actions {
flex-direction: column;
}
#jg-project-actions button {
width: 100%;
justify-content: center;
box-sizing: border-box;
}
} #jg-header-visualizer {
position: absolute;
bottom: 0; left: 0;
width: 100%; height: 100%;
z-index: 0;
display: block;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s ease;
}
#jg-header-visualizer.active {
opacity: 1;
} #jg-volume-popover {
display: none; position: absolute;
bottom: 100%;
right: 0;
width: 200px;
background: #f9f7f4;
border: 1px solid rgba(0,0,0,0.12);
border-bottom: none;
box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
padding: 10px 14px;
box-sizing: border-box;
z-index: 10002;
}
#jg-volume-popover.open { display: flex; }
#jg-vp-row {
display: flex; align-items: center; gap: 8px; width: 100%;
}
#jg-vp-row svg { flex-shrink: 0; color: #666; }
#jg-vp-slider {
flex: 1; min-width: 0;
-webkit-appearance: none; appearance: none;
height: 3px; border-radius: 2px;
background: rgba(0,0,0,0.12);
accent-color: #000; cursor: pointer; outline: none;
}
#jg-vp-slider::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 14px; height: 14px;
border-radius: 50%; background: #000; cursor: pointer;
}
#jg-vp-label {
flex-shrink: 0; width: 32px; text-align: right;
font-size: 11px; font-weight: 600; color: #444;
font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
#jg-mini-vol-btn { display: flex; }
} .jg-discography-nav {
display: inline-block;
position: relative;
}
.jg-dnav-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 12px;
background: transparent;
border: none;
font-size: 16px;
font-weight: 500;
color: inherit;
cursor: pointer;
transition: color 0.2s ease;
}
.jg-dnav-toggle:hover {
color: #666;
}
.jg-dnav-toggle[aria-expanded="true"] .jg-dnav-icon {
transform: rotate(180deg);
}
.jg-dnav-icon {
display: inline-block;
font-size: 12px;
transition: transform 0.2s ease;
}
.jg-dnav-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
margin-top: 8px;
background: #fff;
border: 1px solid rgba(0,0,0,0.12);
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
min-width: 220px;
list-style: none;
padding: 0;
z-index: 1000;
}
.jg-dnav-menu:not([hidden]) {
display: block;
}
.jg-dnav-section {
padding: 4px 0;
}
.jg-dnav-section:not(:last-child) {
border-bottom: 1px solid rgba(0,0,0,0.08);
}
.jg-dnav-section-title {
display: block;
padding: 8px 16px 6px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #999;
}
.jg-dnav-submenu {
list-style: none;
padding: 0;
margin: 0;
}
.jg-dnav-item {
display: block;
width: 100%;
padding: 10px 16px;
background: transparent;
border: none;
text-align: left;
font-size: 14px;
color: #333;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.jg-dnav-item:hover {
background-color: #f5f5f5;
color: #000;
}
.jg-dnav-item:active {
background-color: #eee;
} @media (max-width: 768px) {
.jg-dnav-toggle {
padding: 6px 10px;
font-size: 15px;
}
.jg-dnav-menu {
min-width: 200px;
margin-top: 4px;
}
.jg-dnav-item {
padding: 8px 14px;
font-size: 13px;
}
}