/* ============================================================ MP13 — Widgets for the inner pages Radio and WhatsApp, copied from the homepage's own styles so both widgets look and behave the same on every page, plus the glass scrollbar the inner pages use in place of the native one. ============================================================ */ /* ---------- Radio widget ---------- Glass pill, bottom-right beside WhatsApp. Collapsed to a play button until opened. */ #radio{position:fixed;right:calc(2.4vw + 56px + .8rem);bottom:2.6vh;z-index:45; display:flex;align-items:center;gap:0; padding:7px;border-radius:99px; transition:gap .45s cubic-bezier(.22,.61,.36,1), padding .45s cubic-bezier(.22,.61,.36,1), background .45s ease,border-color .45s ease; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.26); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); box-shadow:0 .6vw 2vw -.6vw rgba(0,12,32,.55), inset 0 1px 0 rgba(255,255,255,.3); transition:background .45s ease,border-color .45s ease} #radio:hover,#radio.on{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.44); gap:.7rem;padding:7px 1rem 7px 7px} /* Everything except the play button collapses away when idle. */ #rEq,#rMeta{max-width:0;opacity:0;overflow:hidden; transition:max-width .45s cubic-bezier(.22,.61,.36,1),opacity .3s ease} #radio:hover #rEq,#radio.on #rEq{max-width:16px;opacity:1} #radio:hover #rMeta,#radio.on #rMeta{max-width:120px;opacity:1} /* ---------- WhatsApp ---------- */ #wa{position:fixed;right:2.4vw;bottom:2.6vh;z-index:45; width:56px;height:56px;border-radius:50%;border:0;padding:0;cursor:pointer;display:grid;place-items:center; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.26); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); box-shadow:0 .6vw 2vw -.6vw rgba(0,12,32,.55), inset 0 1px 0 rgba(255,255,255,.3); transition:background .45s ease,border-color .45s ease, transform .45s cubic-bezier(.22,.61,.36,1)} #wa:hover{background:rgba(37,211,102,.9);border-color:rgba(37,211,102,1); transform:translateY(-3px) scale(1.06)} #wa svg{width:27px;height:27px;fill:#fff;display:block} #rPlay{width:42px;height:42px;flex:0 0 auto;border:0;border-radius:50%; cursor:pointer;display:grid;place-items:center; background:rgba(255,255,255,.92);color:#04101f; transition:background .3s ease,transform .3s cubic-bezier(.22,.61,.36,1)} #rPlay:hover{transform:scale(1.08)} #rPlay svg{width:15px;height:15px;fill:currentColor;display:block} #rPlay .ic-pause{display:none} #radio.on #rPlay .ic-play{display:none} #radio.on #rPlay .ic-pause{display:block} #rMeta{display:grid;gap:.15rem;min-width:0} #rMeta b{font-size:.58rem;font-weight:500;letter-spacing:.22em; text-transform:uppercase;opacity:.75;white-space:nowrap} #rMeta span{font-size:.62rem;font-weight:500;opacity:.55;white-space:nowrap} /* Equaliser bars — only animate while playing. */ #rEq{display:flex;align-items:flex-end;gap:2px;height:14px;width:16px;flex:0 0 auto} #rEq i{display:block;width:3px;border-radius:2px;background:#fff;height:3px;opacity:.5} #radio.on #rEq i{animation:eq .9s ease-in-out infinite} #radio.on #rEq i:nth-child(2){animation-delay:.15s} #radio.on #rEq i:nth-child(3){animation-delay:.3s} #radio.on #rEq i:nth-child(4){animation-delay:.45s} @keyframes eq{0%,100%{height:3px;opacity:.5}50%{height:14px;opacity:1}} /* Station chooser — revealed with the rest of the pill on hover. */ #rStations{display:flex;gap:.3rem;max-width:0;opacity:0;overflow:hidden; transition:max-width .45s cubic-bezier(.22,.61,.36,1),opacity .3s ease} #radio:hover #rStations{max-width:220px;opacity:1} #rStations button{border:0;cursor:pointer;white-space:nowrap; padding:.34rem .6rem;border-radius:99px; font:500 .54rem/1 'Montserrat',sans-serif; letter-spacing:.14em;text-transform:uppercase; color:#fff;background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); transition:background .3s ease,color .3s ease,border-color .3s ease} #rStations button:hover{background:rgba(255,255,255,.28)} #rStations button.sel{background:#fff;color:#04101f;border-color:#fff} #rVol{width:0;opacity:0;overflow:hidden; transition:width .45s cubic-bezier(.22,.61,.36,1),opacity .3s ease} #radio:hover #rVol{width:74px;opacity:1} #rVol input{width:74px;height:3px;-webkit-appearance:none;appearance:none; background:rgba(255,255,255,.3);border-radius:99px;outline:none;cursor:pointer} #rVol input::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px; border-radius:50%;background:#fff;cursor:pointer; box-shadow:0 1px 4px rgba(0,12,32,.5)} #rVol input::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%; background:#fff;cursor:pointer} /* ---------- WhatsApp drop-up ---------- First click previews the message; a second action opens WhatsApp. */ #waPanel{position:fixed;right:2.4vw;bottom:calc(2.6vh + 56px + .9rem);z-index:46; width:min(30vw,340px);padding:1.2rem 1.2rem 1.1rem; border-radius:1.2vw;transform-origin:100% 100%; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.26); -webkit-backdrop-filter:blur(28px) saturate(160%); backdrop-filter:blur(28px) saturate(160%); box-shadow:0 2vw 5vw -1.5vw rgba(0,12,32,.6), inset 0 1px 0 rgba(255,255,255,.3); opacity:0;transform:translateY(12px) scale(.96);pointer-events:none; transition:opacity .4s cubic-bezier(.22,.61,.36,1), transform .4s cubic-bezier(.22,.61,.36,1)} #waPanel.open{opacity:1;transform:none;pointer-events:auto} #waPanel .eyebrow{margin:0 0 .7rem} /* The pre-written message, shown as an editable field. */ #waPanel textarea{width:100%;min-height:76px;resize:none; background:rgba(255,255,255,.10);color:#fff; border:1px solid rgba(255,255,255,.22);border-radius:.7rem; padding:.7rem .8rem;font:300 .84rem/1.5 'Montserrat',sans-serif; outline:none;caret-color:#fff; -webkit-user-select:text;user-select:text} #waPanel textarea:focus{border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.16)} #waSend{display:inline-flex;align-items:center;gap:.5rem;margin-top:.9rem; padding:.6rem 1.1rem;border:0;border-radius:99px;cursor:pointer; background:#25D366;color:#04231a; font:500 .64rem/1 'Montserrat',sans-serif; letter-spacing:.18em;text-transform:uppercase;text-decoration:none; transition:transform .35s cubic-bezier(.22,.61,.36,1),filter .35s ease} #waSend:hover{transform:translateY(-2px);filter:brightness(1.08)} #waSend svg{width:14px;height:14px;fill:currentColor} #waPanel small{display:block;margin-top:.7rem;font-size:.56rem; letter-spacing:.2em;text-transform:uppercase;opacity:.55} /* The inner pages only style their own eyebrows, so the panel's label carries the homepage's type here. */ #waPanel .eyebrow{font-size:.7rem;font-weight:500;text-transform:uppercase; letter-spacing:.38em;opacity:.8} @media (max-width:760px){ /* WhatsApp rises from its button, full width. */ #waPanel{left:4vw;right:4vw;width:auto;max-width:none; bottom:calc(2.6vh + 56px + 1rem); padding:1.3rem 1.3rem 1.2rem;border-radius:1.1rem; transform-origin:50% 100%} #waPanel input,#waPanel textarea,#waPanel button{font-size:16px} /* Back beside the WhatsApp button, and held to the same height so the two read as a pair rather than one floating above the other. */ #radio{left:auto;right:calc(4vw + 50px + .6rem);bottom:2.6vh; max-width:calc(92vw - 50px - 1rem); flex-wrap:nowrap} /* Collapsed to just the play button until tapped, since there is no hover on touch. The .open class is set by radio.js on first tap; the row then scrolls sideways so the title and all three stations stay reachable. */ #radio{gap:.4rem;padding:6px; max-width:calc(92vw - 50px - 1rem); overflow-x:auto;overflow-y:hidden; scrollbar-width:none;-webkit-overflow-scrolling:touch; justify-content:flex-start} #radio::-webkit-scrollbar{display:none} #radio.open{padding:6px 10px 6px 6px} /* The play button stays put while the rest scrolls under it. */ #rPlay{position:sticky;left:0;z-index:2;flex:0 0 auto} /* Hidden until opened. */ #radio #rEq,#radio #rMeta,#radio #rStations{max-width:0;opacity:0;flex:0 0 auto} #radio.open #rEq{max-width:14px;opacity:1} #radio.open #rMeta{display:grid;max-width:none;opacity:1;white-space:nowrap} #radio.open #rStations{max-width:none;opacity:1;flex-wrap:nowrap} #rStations button{font-size:.5rem;padding:.35rem .6rem} #rMeta b{font-size:.62rem} #rMeta span{font-size:.54rem} #rVol{display:none} /* Sized to match the radio beside it, rather than scaled down. */ #wa{transform:none;width:56px;height:56px} #wa svg,#wa img{width:26px;height:26px} } /* ---------- Glass scrollbar ---------- A native thumb cannot blur what sits behind it, and the page bar's "transparent" track still shows the root background as a solid strip beside the footage. So the native bar is hidden and v2-bar.js floats a glass pill over the page instead: no track at all, only the pill. */ html{scrollbar-width:none} html::-webkit-scrollbar{display:none} #gbar{position:fixed;top:0;right:0;bottom:0;width:18px;z-index:48; pointer-events:none} #gbar.none{display:none} #gbar i{position:absolute;top:0;right:5px;width:8px;height:44px; border-radius:99px;pointer-events:auto;touch-action:none; cursor:grab;will-change:transform; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%); box-shadow:0 .4vw 1.4vw -.4vw rgba(0,12,32,.55), inset 0 1px 0 rgba(255,255,255,.35); transition:background .3s ease,border-color .3s ease} #gbar i:hover,#gbar.drag i{background:rgba(255,255,255,.26); border-color:rgba(255,255,255,.5)} #gbar.drag i{cursor:grabbing} /* A drag that strays over text must not select it. */ html.gbar-drag,html.gbar-drag *{-webkit-user-select:none;user-select:none} @media (max-width:760px){ #gbar{width:10px} #gbar i{right:2px;width:5px} }