.gvhl-shell{ --bg:#121313; --bg2:#151616; --panel:#191a1a; --panel-hi:#1d1e1e; --line:rgba(214,216,218,.105); --line-hi:rgba(214,216,218,.17); --text:#d9dbdc; --soft:rgba(204,207,209,.70); --muted:rgba(164,168,171,.60); --cyan:#79c9cf; --orange:#f2a948; --orange-hi:#efbea4; --yellow:#d8b84f; --green:#70cf82; position:relative; left:50%; width:100vw; max-width:none !important; margin-left:-50vw; margin-right:-50vw; background: radial-gradient(circle at 80% 12%,rgba(121,201,207,.035),transparent 20%), linear-gradient(180deg,#121313 0%,#141515 100%); color:var(--text); font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; overflow:hidden; } .gvhl-shell *{box-sizing:border-box} .gvhl-shell a{color:inherit} .gvhl-shell button{font:inherit} .gvhl-shell .gvhl-wrap{width:min(1360px,calc(100vw - 48px));margin:0 auto} /* HEADER */ .gvhl-shell .gvhl-nav{ height:64px;border-bottom:1px solid var(--line);background:rgba(16,17,17,.96); display:flex;align-items:center;position:relative;z-index:60;overflow:visible } .gvhl-shell .gvhl-nav-inner{ width:min(1360px,calc(100vw - 48px));margin:0 auto; display:grid;grid-template-columns:300px 1fr;align-items:center;gap:16px } .gvhl-shell .gvhl-brand{ display:flex;align-items:center;gap:14px;text-decoration:none } .gvhl-shell .gvhl-mark{width:31px;height:31px;position:relative;display:block} .gvhl-shell .gvhl-mark:before, .gvhl-shell .gvhl-mark:after{ content:"";position:absolute;left:4px;top:3px;width:20px;height:20px; border-left:3px solid rgba(217,219,220,.76);border-bottom:3px solid rgba(217,219,220,.76); transform:rotate(-45deg) } .gvhl-shell .gvhl-mark:after{ left:10px;top:7px;width:12px;height:12px;border-width:2px;opacity:.55 } .gvhl-shell .gvhl-brand-text{ font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:700;letter-spacing:.18em;color:rgba(217,219,220,.88) } .gvhl-shell .gvhl-nav-links{display:flex;justify-content:center;align-items:center;gap:18px} .gvhl-shell .gvhl-nav-links a{ text-decoration:none;text-transform:uppercase;font-size:11px;line-height:1.35;color:rgba(205,208,210,.70);letter-spacing:.035em;white-space:nowrap } .gvhl-shell .gvhl-nav-links a:after{content:"";margin-left:34px;color:rgba(242,169,72,.62)} .gvhl-shell .gvhl-nav-links a:hover{color:#fff} .gvhl-shell .gvhl-nav-archive{position:relative;display:flex;align-items:center} .gvhl-shell .gvhl-nav-archive-trigger{ appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:0; color:rgba(205,208,210,.70);text-transform:uppercase;font-size:11px;line-height:1.35;letter-spacing:.035em; white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;gap:7px } .gvhl-shell .gvhl-nav-archive-trigger:hover, .gvhl-shell .gvhl-nav-archive-trigger:focus-visible, .gvhl-shell .gvhl-nav-archive.is-open .gvhl-nav-archive-trigger{color:#fff;outline:none} .gvhl-shell .gvhl-nav-archive-caret{ width:7px;height:7px;border-right:1.5px solid var(--orange);border-bottom:1.5px solid var(--orange); transform:rotate(45deg) translateY(-1px);transform-origin:center;transition:transform .16s ease } .gvhl-shell .gvhl-nav-archive.is-open .gvhl-nav-archive-caret{transform:rotate(225deg) translate(-1px,-1px)} .gvhl-shell .gvhl-nav-archive-menu{ position:absolute;top:calc(100% + 18px);right:-12px;width:330px;padding:7px; border:1px solid rgba(214,216,218,.23);border-radius:5px;background:#1a1b1b; box-shadow:0 18px 40px rgba(0,0,0,.42);opacity:0;visibility:hidden;transform:translateY(-5px); transition:opacity .14s ease,transform .14s ease,visibility .14s;z-index:80 } .gvhl-shell .gvhl-nav-archive.is-open .gvhl-nav-archive-menu{opacity:1;visibility:visible;transform:translateY(0)} .gvhl-shell .gvhl-nav-archive-menu a{ display:block;padding:10px 11px;border:1px solid rgba(214,216,218,.16);border-radius:3px; background:#202121;text-decoration:none;text-transform:none;letter-spacing:normal;white-space:normal } .gvhl-shell .gvhl-nav-archive-menu a + a{margin-top:7px} .gvhl-shell .gvhl-nav-archive-menu a:after{display:none} .gvhl-shell .gvhl-nav-archive-menu a:hover, .gvhl-shell .gvhl-nav-archive-menu a:focus-visible{border-color:rgba(242,169,72,.55);background:#252525;outline:none} .gvhl-shell .gvhl-nav-archive-kicker{ display:block;margin-bottom:5px;color:var(--orange);font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase } .gvhl-shell .gvhl-nav-archive-title{ display:block;color:#e0e2e3;font-size:15px;font-weight:800;line-height:1.25;letter-spacing:.01em } .gvhl-shell .gvhl-nav-archive-meta{ display:block;margin-top:5px;color:#a7aaac;font-size:12px;line-height:1.45;letter-spacing:.01em } /* HERO */ .gvhl-shell .gvhl-hero{ height:224px;border-bottom:1px solid var(--line);position:relative;overflow:hidden } .gvhl-shell .gvhl-hero-inner{ height:100%;display:grid;grid-template-columns:minmax(0,1fr) 455px;gap:30px;align-items:center } .gvhl-shell .gvhl-title{ margin:0;font-family:Arial,Helvetica,sans-serif;text-transform:uppercase; font-size:49px;line-height:.91;font-weight:800;letter-spacing:.07em;color:#e3e5e6 } .gvhl-shell .gvhl-title span{ display:block;margin-top:9px;font-size:39px;letter-spacing:.035em;color:var(--orange) } .gvhl-shell .gvhl-hero-copy{ margin:13px 0 0;color:#b8bbbd;font-size:14px;line-height:1.55;letter-spacing:.02em } .gvhl-shell .gvhl-hero-copy span{display:block} .gvhl-shell .gvhl-actions{display:flex;gap:14px;margin-top:13px} .gvhl-shell .gvhl-btn{ min-height:38px;height:38px;padding:0 17px;display:inline-flex;align-items:center;gap:12px; border:1px solid var(--line-hi);background:#181919;text-decoration:none; font-size:12px;text-transform:uppercase;font-weight:900;letter-spacing:.065em } .gvhl-shell .gvhl-btn-primary{background:var(--orange);border-color:var(--orange);color:#121313} .gvhl-shell .gvhl-hero-right{height:100%;position:relative} .gvhl-shell .gvhl-deck-svg{ position:absolute;right:0;top:5px;width:420px;height:198px;opacity:.70 } .gvhl-shell .gvhl-deck-svg{overflow:visible} .gvhl-shell .gvhl-platter-trigger{cursor:pointer;pointer-events:auto;outline:none} .gvhl-shell .gvhl-platter-hit{fill:transparent} .gvhl-shell .gvhl-platter-art{transform-origin:215px 100px;transform-box:fill-box} .gvhl-shell .gvhl-platter-trigger:focus-visible .gvhl-platter-focus, .gvhl-shell .gvhl-platter-trigger:hover .gvhl-platter-focus{opacity:.45} .gvhl-shell .gvhl-platter-focus{opacity:0;transition:opacity .18s ease} .gvhl-shell .gvhl-deck-svg.is-bside-spin .gvhl-platter-art{animation:gvhlBsideSpin 1.15s linear 2} @keyframes gvhlBsideSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} .gvhl-shell .gvhl-bside-toast{ position:absolute;right:76px;top:22px;padding:8px 12px;border:1px solid rgba(216,184,79,.55); background:rgba(18,19,19,.94);color:var(--yellow);font-size:11px;font-weight:900;letter-spacing:.08em; text-transform:uppercase;opacity:0;transform:translateY(-6px);pointer-events:none; transition:opacity .2s ease,transform .2s ease;white-space:nowrap } .gvhl-shell .gvhl-bside-toast.is-visible{opacity:1;transform:translateY(0)} @media (prefers-reduced-motion:reduce){ .gvhl-shell .gvhl-deck-svg.is-bside-spin .gvhl-platter-art{animation:none} .gvhl-shell .gvhl-bside-toast{transition:none} } .gvhl-shell .gvhl-wave{ position:absolute;left:36%;right:26%;top:117px;height:25px;background:rgba(197,201,204,.35); clip-path:polygon(0 52%,4% 44%,8% 57%,12% 38%,16% 66%,20% 48%,24% 60%,28% 25%,32% 75%,36% 44%,40% 63%,44% 34%,48% 70%,52% 39%,56% 61%,60% 29%,64% 74%,68% 46%,72% 64%,76% 37%,80% 68%,84% 45%,88% 59%,92% 43%,96% 58%,100% 50%,100% 56%,96% 64%,92% 49%,88% 66%,84% 52%,80% 75%,76% 44%,72% 70%,68% 52%,64% 81%,60% 36%,56% 68%,52% 46%,48% 77%,44% 41%,40% 70%,36% 50%,32% 82%,28% 32%,24% 67%,20% 55%,16% 73%,12% 45%,8% 64%,4% 50%,0 58%); opacity:.18; user-select:none; -webkit-user-select:none; } /* Hidden hero Easter egg: no hover/click clue. */ .gvhl-shell .gvhl-wave.is-secret-playing{ animation:gvhlSecretPulse .72s ease-in-out infinite alternate; } @keyframes gvhlSecretPulse{ from{opacity:.18;filter:brightness(1)} to{opacity:.34;filter:brightness(1.18)} } @media (prefers-reduced-motion:reduce){ .gvhl-shell .gvhl-wave.is-secret-playing{animation:none;opacity:.28} } /* COMMON SECTION */ .gvhl-shell .gvhl-section{padding:12px 0 14px;border-bottom:1px solid var(--line)} .gvhl-shell .gvhl-head{height:auto;min-height:26px;display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .gvhl-shell .gvhl-head-left{display:flex;align-items:center;gap:9px} .gvhl-shell .gvhl-dot{width:6px;height:10px;background:var(--cyan)} .gvhl-shell .gvhl-head h2{ margin:0;font-size:13px;text-transform:uppercase;font-weight:800;letter-spacing:.045em;color:#cfd2d3 } .gvhl-shell .gvhl-head a{ color:var(--orange);font-size:11px;text-decoration:none;text-transform:uppercase;font-weight:900;letter-spacing:.055em } /* TOOLS */ .gvhl-shell .gvhl-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .gvhl-shell .gvhl-tool{ height:112px;border:1px solid var(--line);background:linear-gradient(180deg,#1a1b1b,#181919); display:grid;grid-template-columns:126px minmax(0,1fr);align-items:center;gap:18px;padding:10px 16px; text-decoration:none;position:relative } .gvhl-shell .gvhl-tool:hover{border-color:rgba(121,201,207,.24);background:#1d1e1e} .gvhl-shell .gvhl-tool-visual{ height:84px;border:1px solid rgba(214,216,218,.055);background:#151616;display:grid;place-items:center } .gvhl-shell .gvhl-tool-visual.gvhl-pattern-visual{overflow:hidden} .gvhl-shell .gvhl-tool-visual.gvhl-pattern-visual picture{display:block;width:100%;height:100%} .gvhl-shell .gvhl-tool-visual.gvhl-pattern-visual img{ display:block;width:100%;height:100%;object-fit:contain;background:#151616 } .gvhl-shell .gvhl-dots{display:grid;grid-template-columns:repeat(5,7px);gap:5px;color:#69aee8} .gvhl-shell .gvhl-dots i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.27} .gvhl-shell .gvhl-dots i:nth-child(3n){opacity:.95} .gvhl-shell .gvhl-gridicon{display:grid;grid-template-columns:repeat(5,10px);gap:5px;color:#75d1d8} .gvhl-shell .gvhl-gridicon i{width:10px;height:10px;border:1px solid rgba(214,216,218,.12);background:currentColor;opacity:.10} .gvhl-shell .gvhl-gridicon i:nth-child(4n+1){opacity:.88} .gvhl-shell .gvhl-signal{width:95px;height:35px;background:#c9cbcc;opacity:.85;clip-path:polygon(0 55%,8% 43%,16% 66%,24% 28%,32% 75%,40% 48%,48% 59%,56% 31%,64% 68%,72% 42%,80% 61%,88% 45%,100% 53%,100% 61%,88% 52%,80% 69%,72% 49%,64% 75%,56% 38%,48% 66%,40% 55%,32% 82%,24% 35%,16% 73%,8% 50%,0 63%)} .gvhl-shell .gvhl-tool h3{margin:0 0 7px;font-size:14px;text-transform:uppercase;letter-spacing:.02em} .gvhl-shell .gvhl-tool p{margin:0 0 8px;color:#a9acae;font-size:12px;line-height:1.45} .gvhl-shell .gvhl-launch{color:var(--orange);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.04em} /* RELEASES */ .gvhl-shell .gvhl-releases{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .gvhl-shell .gvhl-release{ height:108px;border:1px solid var(--line);background:linear-gradient(180deg,#1a1b1b,#181919); display:grid;grid-template-columns:128px minmax(0,1fr) 42px;align-items:stretch;text-decoration:none;overflow:hidden } .gvhl-shell .gvhl-release-img{background:#151616;overflow:hidden} .gvhl-shell .gvhl-release-img img{display:block;width:100%;height:100%;object-fit:contain;object-position:center} .gvhl-shell .gvhl-release-placeholder{height:100%;display:grid;place-items:center;color:rgba(255,255,255,.15);font-size:22px;font-weight:900} .gvhl-shell .gvhl-release-meta{min-width:0;padding:13px 12px;display:flex;flex-direction:column;justify-content:center} .gvhl-shell .gvhl-release-id{font-size:12px;letter-spacing:.06em;color:#c9cbcc} .gvhl-shell .gvhl-release-title{margin:5px 0 8px;font-size:12px;color:#a9acae;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gvhl-shell .gvhl-release-type{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.065em;color:var(--cyan)} .gvhl-shell .gvhl-release:nth-child(2) .gvhl-release-type{color:var(--yellow)} .gvhl-shell .gvhl-release-play{display:grid;place-items:center} .gvhl-shell .gvhl-release-play span{ box-sizing:border-box; width:32px;height:32px; min-width:32px;min-height:32px; border:1px solid rgba(214,216,218,.32); border-radius:999px; background:rgba(255,255,255,.015); display:inline-flex;align-items:center;justify-content:center; color:#d4d6d7; padding:0; } .gvhl-shell .gvhl-release-play span::before{ content:""; display:block; width:0;height:0; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:6px solid currentColor; margin-left:2px; } /* HOMEPAGE BEAT TRANSPORT / CRATE */ .gvhl-shell .gvhl-beat-toolbar{ min-height:34px;margin-bottom:7px;display:flex;align-items:center;justify-content:space-between;gap:12px } .gvhl-shell .gvhl-beat-toolbar-left{ display:flex;align-items:center;gap:8px;flex-wrap:wrap } .gvhl-shell .gvhl-crate-toggle, .gvhl-shell .gvhl-player-close{ -webkit-appearance:none;appearance:none; min-height:34px;padding:0 11px;border:1px solid var(--line-hi);background:#191a1a;color:var(--soft); text-transform:uppercase;font-size:11px;font-weight:900;letter-spacing:.065em;cursor:pointer } .gvhl-shell .gvhl-crate-toggle:hover, .gvhl-shell .gvhl-player-close:hover{border-color:rgba(242,169,72,.58);color:var(--orange)} .gvhl-shell .gvhl-crate-count{ display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;margin-left:5px; padding:0 4px;border:1px solid rgba(242,169,72,.42);color:var(--orange);font-size:10px } .gvhl-shell .gvhl-crate-add{ -webkit-appearance:none;appearance:none;width:70px;height:30px;padding:0;border:1px solid var(--line-hi); background:transparent;color:var(--muted);text-transform:uppercase;font-size:10px;font-weight:900;letter-spacing:.055em;cursor:pointer } .gvhl-shell .gvhl-crate-add:hover{border-color:rgba(121,201,207,.48);color:var(--cyan)} .gvhl-shell .gvhl-crate-add[aria-pressed="true"]{ border-color:rgba(216,184,79,.68);background:rgba(216,184,79,.08);color:var(--yellow) } .gvhl-shell .gvhl-active-player[hidden]{display:none !important} .gvhl-shell .gvhl-active-player{ border:1px solid var(--line);border-top:0;background:#151616;padding:9px 12px 10px } .gvhl-shell .gvhl-player-toggle{ display:none;-webkit-appearance:none;appearance:none;width:34px;height:34px;padding:0;border:1px solid var(--line-hi); border-radius:50%;background:#191a1a;color:#d7d9da;place-items:center;cursor:pointer } .gvhl-shell .gvhl-player-toggle::before{ content:"";display:block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent; border-left:8px solid currentColor;margin-left:2px } .gvhl-shell .gvhl-player-toggle.is-playing{color:var(--orange);border-color:rgba(242,169,72,.62)} .gvhl-shell .gvhl-player-toggle.is-playing::before{ width:3px;height:11px;border:0;background:currentColor;box-shadow:6px 0 0 currentColor;margin-left:-3px } .gvhl-shell .gvhl-active-head{ display:grid;grid-template-columns:minmax(160px,1fr) auto auto;gap:12px;align-items:center;margin-bottom:7px } .gvhl-shell .gvhl-active-title{ min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#d7d9da;font-size:12px;font-weight:800 } .gvhl-shell .gvhl-active-time{ color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums } .gvhl-shell .gvhl-active-body{ display:grid;grid-template-columns:minmax(260px,1fr) 120px 158px;gap:14px;align-items:center } .gvhl-shell .gvhl-waveform{ position:relative;height:34px;display:flex;align-items:center;cursor:pointer;overflow:hidden; border:1px solid rgba(214,216,218,.075);background:#121313;padding:0 4px;touch-action:pan-y } .gvhl-shell .gvhl-wave-bars{ width:100%;height:100%;display:flex;align-items:center;gap:1px;pointer-events:none } .gvhl-shell .gvhl-wave-bar{ flex:1 1 0;min-width:1px;background:#34383b;transform-origin:center;opacity:.94 } .gvhl-shell .gvhl-wave-bar.is-played{background:#4f8fd8} .gvhl-shell .gvhl-wave-bar.is-current{background:var(--orange)} .gvhl-shell .gvhl-wave-playhead{ position:absolute;top:0;bottom:0;width:1px;background:rgba(242,169,72,.90);left:0;pointer-events:none } .gvhl-shell .gvhl-volume-wrap{ display:grid;grid-template-columns:22px minmax(0,1fr);gap:7px;align-items:center } .gvhl-shell .gvhl-volume-icon{ color:var(--muted);font-size:12px;text-align:center } .gvhl-shell .gvhl-volume{ width:100%;height:18px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer } .gvhl-shell .gvhl-volume::-webkit-slider-runnable-track{ height:3px;background:linear-gradient(90deg,var(--cyan) 0 80%,#34383b 80% 100%) } .gvhl-shell .gvhl-volume::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:11px;height:11px;margin-top:-4px;border:0;border-radius:50%;background:#d7d9da } .gvhl-shell .gvhl-volume::-moz-range-track{height:3px;background:#34383b} .gvhl-shell .gvhl-volume::-moz-range-progress{height:3px;background:var(--cyan)} .gvhl-shell .gvhl-volume::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:#d7d9da} .gvhl-shell .gvhl-practice{ min-height:32px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center; border:1px solid #464646;border-radius:2px;background:#252525;color:#a7a7a7;text-decoration:none; text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.055em;white-space:nowrap } .gvhl-shell .gvhl-practice:after{content:none} .gvhl-shell .gvhl-practice:hover, .gvhl-shell .gvhl-practice:focus-visible{ color:#f3b642;border-color:rgba(243,182,66,.48);background:rgba(243,182,66,.07);outline:none } /* CRATE DIALOG - shares storage with full Beat Browser */ .gvhl-shell .gvhl-crate-dialog[hidden]{display:none !important} .gvhl-shell .gvhl-crate-dialog{ position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:18px } .gvhl-shell .gvhl-crate-backdrop{ position:absolute;inset:0;background:rgba(0,0,0,.76);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px) } .gvhl-shell .gvhl-crate-window{ position:relative;z-index:1;width:min(690px,96vw);max-height:min(640px,86vh);display:flex;flex-direction:column; border:1px solid #484949;background:#1b1c1c;color:var(--text);box-shadow:0 24px 70px rgba(0,0,0,.56) } .gvhl-shell .gvhl-crate-head, .gvhl-shell .gvhl-crate-foot{ min-height:48px;padding:8px 11px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#202121 } .gvhl-shell .gvhl-crate-head{border-bottom:1px solid #383a3a} .gvhl-shell .gvhl-crate-foot{border-top:1px solid #383a3a} .gvhl-shell .gvhl-crate-kicker{font-size:11px;color:var(--orange);text-transform:uppercase;letter-spacing:.11em} .gvhl-shell .gvhl-crate-title{margin:2px 0 0;font-size:16px} .gvhl-shell .gvhl-crate-close, .gvhl-shell .gvhl-crate-clear{ -webkit-appearance:none;appearance:none;min-height:34px;padding:0 9px;border:1px solid #4a4b4b;background:#181919; color:var(--soft);font-size:11px;text-transform:uppercase;cursor:pointer } .gvhl-shell .gvhl-crate-list{overflow:auto;padding:8px} .gvhl-shell .gvhl-crate-empty{padding:18px;color:#a4a7a9;font-size:12px} .gvhl-shell .gvhl-crate-item{ min-height:46px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center; padding:7px 9px;border-bottom:1px solid rgba(214,216,218,.075) } .gvhl-shell .gvhl-crate-item-title{font-size:12px;color:#d5d7d8} .gvhl-shell .gvhl-crate-item-meta{margin-top:3px;font-size:11px;color:#999d9f} .gvhl-shell .gvhl-crate-actions{display:flex;align-items:center;gap:6px} .gvhl-shell .gvhl-crate-remove{ -webkit-appearance:none;appearance:none;height:32px;padding:0 8px;border:1px solid var(--line-hi); background:transparent;color:var(--muted);font-size:10px;text-transform:uppercase;cursor:pointer } .gvhl-shell .gvhl-crate-remove:hover{border-color:rgba(242,169,72,.55);color:var(--orange)} .gvhl-shell .gvhl-crate-note{font-size:11px;color:#999d9f;line-height:1.4} /* BEAT LIBRARY */ .gvhl-shell .gvhl-beats{border:1px solid var(--line);background:#171818} .gvhl-shell .gvhl-beat-head, .gvhl-shell .gvhl-beat{ display:grid;grid-template-columns:minmax(240px,1fr) 66px 72px 76px 40px 180px 70px; gap:10px;align-items:center;padding:0 14px } .gvhl-shell .gvhl-beat-head{ height:31px;background:#1c1d1d;border-bottom:1px solid var(--line); color:#9b9ea0;font-size:11px;text-transform:uppercase;letter-spacing:.08em } .gvhl-shell .gvhl-beat{ min-height:48px;border-bottom:1px solid rgba(214,216,218,.075) } .gvhl-shell .gvhl-beat:last-child{border-bottom:0} .gvhl-shell .gvhl-beat:hover{background:rgba(121,201,207,.025)} .gvhl-shell .gvhl-beat-title{ display:flex;align-items:center;gap:11px;min-width:0;text-decoration:none;font-size:12px;color:#d2d4d5 } .gvhl-shell .gvhl-beat-title span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gvhl-shell .gvhl-mini-wave{width:28px;height:10px;background:var(--orange);flex:0 0 auto;clip-path:polygon(0 55%,12% 25%,24% 73%,36% 40%,48% 66%,60% 20%,72% 80%,84% 38%,100% 55%,100% 64%,84% 47%,72% 87%,60% 27%,48% 73%,36% 47%,24% 80%,12% 32%,0 63%)} .gvhl-shell .gvhl-beat-bpm, .gvhl-shell .gvhl-format, .gvhl-shell .gvhl-duration{font-size:11px;color:#a8abad;font-variant-numeric:tabular-nums} .gvhl-shell .gvhl-play{ -webkit-appearance:none !important; appearance:none !important; box-sizing:border-box !important; width:32px !important; min-width:32px !important; max-width:32px !important; height:32px !important; min-height:32px !important; max-height:32px !important; margin:0 !important; padding:0 0 0 2px !important; border:1px solid rgba(214,216,218,.32) !important; border-radius:999px !important; outline:0 !important; background:rgba(255,255,255,.015) !important; background-image:none !important; box-shadow:none !important; color:#d5d7d8 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; line-height:1 !important; font-family:Arial,Helvetica,sans-serif !important; font-size:11px !important; font-weight:400 !important; cursor:pointer; vertical-align:middle; text-decoration:none !important; text-shadow:none !important; transform:none !important; transition:border-color .15s ease,color .15s ease,background .15s ease !important; } .gvhl-shell .gvhl-play::before{ content:""; display:block; width:0;height:0; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:6px solid currentColor; margin-left:2px; } .gvhl-shell .gvhl-play.is-playing::before{ width:2px; height:9px; border:0; background:currentColor; box-shadow:4px 0 0 currentColor; margin-left:-2px; } .gvhl-shell .gvhl-play:hover, .gvhl-shell .gvhl-play:focus{ border-color:rgba(214,216,218,.52) !important; background:rgba(255,255,255,.035) !important; color:#f0f1f2 !important; box-shadow:none !important; transform:none !important; } .gvhl-shell .gvhl-play.is-playing{ color:var(--orange) !important; border-color:rgba(242,169,72,.72) !important; background:rgba(242,169,72,.045) !important; padding-left:0 !important; } .gvhl-shell .gvhl-download{ width:180px;min-width:180px;height:42px;padding:0;display:grid;grid-template-columns:minmax(0,1fr) 34px; align-items:stretch;border:1px solid #303233;border-radius:8px;overflow:hidden; background:#181818;color:#f2f3f4;text-decoration:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.025); transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease } .gvhl-shell .gvhl-download-copy{ min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 16px; background:linear-gradient(90deg,#191919 0%,#171818 100%) } .gvhl-shell .gvhl-download-label{ display:block;color:#f2f3f4;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.13em;line-height:1 } .gvhl-shell .gvhl-download-meta{ display:block;color:var(--orange);text-transform:uppercase;font-size:8.5px;font-weight:800;letter-spacing:.18em;line-height:1 } .gvhl-shell .gvhl-download-arrow{ position:relative;display:grid;place-items:center;background:#f2a948;border-left:1px solid rgba(0,0,0,.30); color:#111213;transition:background-color .15s ease } .gvhl-shell .gvhl-download-arrow::before{ content:"";position:absolute;width:18px;height:2px;background:#111213;border-radius:2px;left:50%;top:50%; transform:translate(-58%,-50%);transition:transform .15s ease } .gvhl-shell .gvhl-download-arrow::after{ content:"";position:absolute;width:9px;height:9px;border-top:2px solid #111213;border-right:2px solid #111213; left:50%;top:50%;transform:translate(6%,-50%) rotate(45deg);transition:transform .15s ease } .gvhl-shell .gvhl-download:hover, .gvhl-shell .gvhl-download:focus-visible{ border-color:#4b4d4e;background:#1a1a1a;box-shadow:0 7px 18px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.03); outline:none } .gvhl-shell .gvhl-download:hover .gvhl-download-arrow, .gvhl-shell .gvhl-download:focus-visible .gvhl-download-arrow{ background:#f7bd72 } .gvhl-shell .gvhl-download:hover .gvhl-download-arrow::before, .gvhl-shell .gvhl-download:focus-visible .gvhl-download-arrow::before{ transform:translate(-48%,-50%) } .gvhl-shell .gvhl-download:hover .gvhl-download-arrow::after, .gvhl-shell .gvhl-download:focus-visible .gvhl-download-arrow::after{ transform:translate(16%,-50%) rotate(45deg) } /* ARCHIVE */ .gvhl-shell .gvhl-archives{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .gvhl-shell .gvhl-archive{ height:82px;border:1px solid var(--line);background:linear-gradient(180deg,#1a1b1b,#181919); display:grid;grid-template-columns:185px minmax(0,1fr) 40px;align-items:stretch;text-decoration:none;overflow:hidden } .gvhl-shell .gvhl-archive-screen{ display:grid;place-items:center;border-right:1px solid var(--line); background: repeating-linear-gradient(0deg,rgba(106,215,141,.018) 0 1px,transparent 1px 4px), radial-gradient(circle at center,#102018,#0d1511 68%,#111 100%); color:#6cd88d;font-size:14px;letter-spacing:.05em;text-shadow:0 0 7px rgba(108,216,141,.18) } .gvhl-shell .gvhl-archive-copy{padding:0 18px;display:flex;flex-direction:column;justify-content:center} .gvhl-shell .gvhl-archive-copy strong{font-size:13px;margin-bottom:5px;color:#d0d2d3} .gvhl-shell .gvhl-archive-copy span{font-size:11px;color:var(--cyan);text-transform:uppercase;letter-spacing:.065em} .gvhl-shell .gvhl-arrow{display:grid;place-items:center;color:rgba(214,216,218,.55);font-size:15px} /* IN-PLUGIN FOOTER MATCHING MOCKUP PROPORTIONS */ .gvhl-shell .gvhl-system-footer{ height:112px;background:#121313;border-bottom:1px solid var(--line) } .gvhl-shell .gvhl-footer-inner{ height:100%;display:grid;grid-template-columns:310px 1fr 250px;align-items:center;gap:30px } .gvhl-shell .gvhl-foot-brand{display:flex;align-items:center;gap:16px} .gvhl-shell .gvhl-foot-brand .gvhl-mark{transform:scale(.85)} .gvhl-shell .gvhl-foot-copy{font-size:12px;line-height:1.5;color:#9fa2a4} .gvhl-shell .gvhl-foot-links{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .gvhl-shell .gvhl-foot-links div{border-left:1px solid var(--line);padding-left:28px} .gvhl-shell .gvhl-foot-links a{display:block;text-decoration:none;text-transform:uppercase;font-size:11px;color:#9fa2a4;line-height:1.7} .gvhl-shell .gvhl-foot-status{border-left:1px solid var(--line);padding-left:28px;font-size:11px;color:#9fa2a4;line-height:1.6;text-transform:uppercase} .gvhl-shell .gvhl-foot-status b{color:#7ed77d;font-weight:700} /* RESPONSIVE */ @media(max-width:1180px){ .gvhl-shell .gvhl-nav-links{gap:13px} .gvhl-shell .gvhl-nav-links a, .gvhl-shell .gvhl-nav-archive-trigger{font-size:10px} .gvhl-shell .gvhl-tool{grid-template-columns:130px minmax(0,1fr);padding:10px 12px;gap:14px} .gvhl-shell .gvhl-release{grid-template-columns:108px minmax(0,1fr) 38px} } @media(max-width:1000px){ .gvhl-shell .gvhl-nav-inner{grid-template-columns:minmax(0,1fr) auto;position:relative} .gvhl-shell .gvhl-nav-links{display:none} .gvhl-shell .gvhl-hero-inner{grid-template-columns:1fr 330px} .gvhl-shell .gvhl-tools,.gvhl-shell .gvhl-releases{gap:10px} .gvhl-shell .gvhl-tool{grid-template-columns:112px minmax(0,1fr)} .gvhl-shell .gvhl-release{grid-template-columns:100px minmax(0,1fr) 38px} } @media(max-width:760px){ .gvhl-shell .gvhl-wrap,.gvhl-shell .gvhl-nav-inner{width:min(100vw - 22px,1360px)} .gvhl-shell .gvhl-hero{height:auto;padding:26px 0} .gvhl-shell .gvhl-hero-inner{grid-template-columns:1fr} .gvhl-shell .gvhl-hero-right{display:none} .gvhl-shell .gvhl-title{font-size:39px} .gvhl-shell .gvhl-title span{font-size:25px} .gvhl-shell .gvhl-tools,.gvhl-shell .gvhl-releases,.gvhl-shell .gvhl-archives{grid-template-columns:1fr} .gvhl-shell .gvhl-tool{height:116px;grid-template-columns:100px minmax(0,1fr);padding:10px 12px;gap:12px} .gvhl-shell .gvhl-release{height:104px;grid-template-columns:104px minmax(0,1fr) 36px} .gvhl-shell .gvhl-beat-head{display:none} .gvhl-shell .gvhl-beat{min-height:54px;grid-template-columns:minmax(0,1fr) 34px 158px 68px;gap:6px;padding:5px 8px} .gvhl-shell .gvhl-beat-bpm,.gvhl-shell .gvhl-format,.gvhl-shell .gvhl-duration{display:none} .gvhl-shell .gvhl-download{width:158px;min-width:158px;height:42px;grid-template-columns:minmax(0,1fr) 30px;border-radius:8px} .gvhl-shell .gvhl-download-copy{padding:0 13px} .gvhl-shell .gvhl-download-label{font-size:10px} .gvhl-shell .gvhl-download-meta{font-size:8px} .gvhl-shell .gvhl-crate-add{width:68px;height:34px} .gvhl-shell .gvhl-archive{grid-template-columns:125px minmax(0,1fr) 30px} /* Mobile homepage Now Playing: true viewport-sticky transport. */ .gvhl-shell .gvhl-active-player{ position:fixed; left:max(8px,env(safe-area-inset-left)); right:max(8px,env(safe-area-inset-right)); bottom:calc(8px + env(safe-area-inset-bottom)); z-index:2147482000; width:auto;max-width:720px;margin:0 auto; border:1px solid rgba(214,216,218,.20); border-radius:10px; background:rgba(20,21,21,.97); padding:8px 9px 9px; box-shadow:0 14px 42px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.025); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px) } .gvhl-shell .gvhl-active-head{ display:grid;grid-template-columns:34px minmax(0,1fr) auto 30px;gap:8px;align-items:center;margin-bottom:7px } .gvhl-shell .gvhl-player-toggle{display:grid} .gvhl-shell .gvhl-active-title{font-size:11px} .gvhl-shell .gvhl-active-time{display:block;font-size:9px;white-space:nowrap} .gvhl-shell .gvhl-player-close{ width:30px;min-width:30px;height:30px;min-height:30px;padding:0;font-size:0;line-height:1;border-radius:4px } .gvhl-shell .gvhl-player-close::before{content:"×";font-size:18px;font-weight:500;line-height:1} .gvhl-shell .gvhl-active-body{grid-template-columns:minmax(0,1fr) 104px;gap:9px;align-items:center} .gvhl-shell .gvhl-waveform{height:30px} .gvhl-shell .gvhl-volume-wrap{max-width:none;grid-template-columns:18px minmax(0,1fr);gap:5px} .gvhl-shell .gvhl-practice{display:none} .gvhl-shell .gvhl-system-footer{height:auto;padding:24px 0} .gvhl-shell .gvhl-footer-inner{grid-template-columns:1fr;gap:18px} .gvhl-shell .gvhl-foot-links{grid-template-columns:repeat(3,1fr)} .gvhl-shell .gvhl-foot-status{border-left:0;padding-left:0} } @media(max-width:420px){ .gvhl-shell .gvhl-nav{height:58px} .gvhl-shell .gvhl-brand-text{font-size:14px;letter-spacing:.14em} .gvhl-shell .gvhl-title{font-size:34px} .gvhl-shell .gvhl-title span{font-size:22px} .gvhl-shell .gvhl-beat{ min-height:104px; grid-template-columns:minmax(0,1fr) 34px 68px; grid-template-areas:"title play crate" "download download download"; grid-template-rows:auto 46px; gap:7px 7px; padding:9px 8px } .gvhl-shell .gvhl-beat-title{grid-area:title;min-width:0} .gvhl-shell .gvhl-play{grid-area:play;justify-self:end} .gvhl-shell .gvhl-download{grid-area:download;width:100%;min-width:0;max-width:none;height:42px} .gvhl-shell .gvhl-crate-add{grid-area:crate;justify-self:end;width:68px;height:32px} .gvhl-shell .gvhl-mini-wave{width:22px} .gvhl-shell .gvhl-section{padding-left:0;padding-right:0} .gvhl-shell .gvhl-active-player{left:6px;right:6px;bottom:calc(6px + env(safe-area-inset-bottom));padding:7px 8px 8px} .gvhl-shell .gvhl-active-head{grid-template-columns:32px minmax(0,1fr) auto 28px;gap:6px} .gvhl-shell .gvhl-player-toggle{width:32px;height:32px} .gvhl-shell .gvhl-player-close{width:28px;min-width:28px;height:28px;min-height:28px} .gvhl-shell .gvhl-active-body{grid-template-columns:minmax(0,1fr) 92px;gap:7px} }