Embed

<style>
  .s55pl[data-theme="dark"]{--bg:#16181d;--panel:#1a1e25;--panel-2:#1c2027;--border:#262a31;--text:#e9edf1;--muted:#aab2bd;--chip:#c8ced8;--surface:#0b0d11;--bar:#394150;--green:#44d17a;--accent:#ff2d55}
  .s55pl[data-theme="light"]{--bg:#f5f7fb;--panel:#fff;--panel-2:#f5f7fb;--border:#dbe0e8;--text:#0b1220;--muted:#536072;--chip:#3c4756;--surface:#eef2f8;--bar:#c6d0df;--green:#1fa971;--accent:#ff2d55}
  .s55pl-mini[data-theme="dark"]{--bg:#16181d;--panel:#1a1e25;--panel-2:#1c2027;--border:#262a31;--text:#e9edf1;--muted:#aab2bd;--chip:#c8ced8;--surface:#0b0d11;--bar:#394150;--green:#44d17a;--accent:#ff2d55}
  .s55pl-mini[data-theme="light"]{--bg:#f5f7fb;--panel:#fff;--panel-2:#f5f7fb;--border:#dbe0e8;--text:#0b1220;--muted:#536072;--chip:#3c4756;--surface:#eef2f8;--bar:#c6d0df;--green:#1fa971;--accent:#ff2d55}

  .s55pl{background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:14px;width:min(100%,900px);margin:0 auto;box-sizing:border-box}
  .s55pl h2{margin:0 0 10px;color:var(--text);font:600 18px/1.2 system-ui}
  .s55pl-cover{width:100%;height:300px;border-radius:12px;object-fit:cover;display:block;margin-bottom:10px}
  .s55pl-controls{display:grid;grid-template-columns:176px minmax(0,1fr) 300px;gap:12px;align-items:center;margin-bottom:8px}
  .s55pl-btns{display:flex;gap:8px}
  .s55pl-btn{height:40px;width:40px;border-radius:999px;border:0;background:var(--accent);color:#fff;font-size:18px;cursor:pointer}
  .s55pl-btn.secondary{background:var(--panel-2);border:1px solid var(--border);color:var(--text)}
  .s55pl-title{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .s55pl-right{display:flex;align-items:center;justify-content:flex-end;gap:8px}
  .s55pl-time{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px;min-width:90px;text-align:right}
  .s55pl-mute{height:28px;width:28px;border-radius:999px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);cursor:pointer}
  .s55pl-vol{accent-color:var(--green);width:120px;max-width:160px}
  .s55pl-theme{height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--border);background:var(--panel-2);color:var(--text)}

  .s55pl-wavebox{position:relative;height:64px;border-radius:10px;background:var(--surface);overflow:hidden;margin:8px 0 12px}
  .s55pl-bars,.s55pl-bars--prog{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px;padding:0;box-sizing:border-box;pointer-events:none}
  .s55pl-bars i{display:block;width:2px;background:var(--bar);border-radius:1px}
  .s55pl-bars--prog{transform-origin:left center;transform:scaleX(0);will-change:transform;z-index:2}
  .s55pl-bars--prog i{background:var(--green)}
  .s55pl-cursor{position:absolute;top:0;bottom:0;width:2px;background:var(--green);opacity:.9;pointer-events:none;z-index:3}
  .s55pl-wavebox[data-seekable="1"]{cursor:pointer}

  .s55pl-err{color:#ff3b57;font-size:12px;margin:4px 0;min-height:16px}
  .s55pl-list{display:flex;flex-direction:column;gap:6px}
  .s55pl-item{display:grid;grid-template-columns:28px 1fr 280px 90px;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text);cursor:pointer}
  .s55pl-item:hover{background:color-mix(in oklab,var(--panel) 90%, var(--text) 10%)}
  .s55pl-item.active{box-shadow:inset 0 0 0 2px var(--accent)}
  .s55pl-idx{color:var(--muted);text-align:center}
  .s55pl-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .s55pl-rowwave{position:relative;height:28px;border-radius:6px;background:var(--surface);overflow:hidden}
  .s55pl-rowbars,.s55pl-rowbars--prog{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px;padding:0;box-sizing:border-box;pointer-events:none}
  .s55pl-rowbars i{display:block;width:2px;background:var(--bar);border-radius:1px}
  .s55pl-rowbars--prog{transform-origin:left center;transform:scaleX(0);will-change:transform;z-index:2}
  .s55pl-rowcursor{position:absolute;top:0;bottom:0;width:2px;background:var(--green);opacity:.9;pointer-events:none;z-index:3}
  .s55pl-badge{justify-self:end;color:var(--chip);background:var(--panel-2);border:1px solid var(--border);border-radius:999px;font-size:11px;padding:3px 8px}
  @media (max-width:760px){.s55pl-item{grid-template-columns:28px 1fr 60px}.s55pl-rowwave{display:none}}
  @media (max-width:600px){.s55pl-controls{grid-template-columns:160px minmax(0,1fr) 200px}.s55pl-vol{width:90px}.s55pl-cover{height:200px}}

  .s55pl-mini[hidden]{display:none!important}
  .s55pl-mini{position:fixed;left:env(safe-area-inset-left,0);right:env(safe-area-inset-right,0);bottom:0;z-index:99999;display:flex;align-items:center;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0));background:var(--panel);border-top:1px solid var(--border);box-shadow:0 -8px 24px rgba(0,0,0,.35)}
  .s55pl-mini .s55pl-btn{height:36px;width:36px}
  .s55pl-mini-wave{position:relative;height:36px;flex:1;border-radius:8px;background:var(--surface);overflow:hidden}
  .s55pl-mini-bars,.s55pl-mini-bars--prog{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px;padding:0;box-sizing:border-box;pointer-events:none}
  .s55pl-mini-bars i{display:block;width:2px;background:var(--bar);border-radius:1px}
  .s55pl-mini-bars--prog{transform-origin:left center;transform:scaleX(0);will-change:transform;z-index:2}
  .s55pl-mini-cursor{position:absolute;top:0;bottom:0;width:2px;background:var(--green);opacity:.9;pointer-events:none;z-index:3}
  .s55pl-mini-title{color:var(--text);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
  body.s55pl--mini-open{padding-bottom:calc(76px + env(safe-area-inset-bottom,0))}
</style>

<div class="s55pl" id="s55pl-podyt" tabindex="0" data-theme="dark">
  <h2>PODCAST & YOUTUBE — Studio 55</h2>
  <img class="s55pl-cover"
       src="https://cdn.commoninja.com/asset/f0739725-9f14-4337-a785-48c26ed1f279.png"
       alt="Podcast & YouTube cover" loading="lazy"/>

  <div class="s55pl-controls">
    <div class="s55pl-btns">
      <button class="s55pl-btn secondary" data-action="prev" aria-label="Previous">⏮</button>
      <button class="s55pl-btn" data-action="play" aria-label="Play/Pause">▶</button>
      <button class="s55pl-btn secondary" data-action="next" aria-label="Next">⏭</button>
    </div>
    <div class="s55pl-title" data-role="title">Loading…</div>
    <div class="s55pl-right">
      <div class="s55pl-time" data-role="time">00:00 / 00:00</div>
      <button class="s55pl-mute" data-action="mute" aria-label="Mute/Unmute">🔇</button>
      <input class="s55pl-vol" type="range" min="0" max="1" step="0.01" value="0.8" aria-label="Volume"/>
      <button class="s55pl-theme" id="s55pl-theme-podyt" aria-label="Toggle theme">🌙 Dark</button>
    </div>
  </div>

  <div class="s55pl-wavebox" id="s55pl-wavebox-podyt" data-seekable="1" title="Click to seek">
    <div class="s55pl-bars" id="s55pl-bars-podyt"></div>
    <div class="s55pl-bars s55pl-bars--prog" id="s55pl-bars-prog-podyt"></div>
    <i class="s55pl-cursor" id="s55pl-cursor-podyt"></i>
  </div>

  <div class="s55pl-err" id="s55pl-err-podyt"></div>
  <div class="s55pl-list" id="s55pl-list-podyt"></div>
</div>

<div class="s55pl-mini" id="s55pl-mini-podyt" hidden data-theme="dark">
  <button class="s55pl-btn" id="mini-play-podyt" aria-label="Play/Pause">▶</button>
  <div class="s55pl-mini-wave" id="mini-wave-podyt" title="Tap to seek">
    <div class="s55pl-mini-bars" id="mini-bg-podyt"></div>
    <div class="s55pl-mini-bars s55pl-mini-bars--prog" id="mini-fg-podyt"></div>
    <i class="s55pl-mini-cursor" id="mini-cur-podyt"></i>
  </div>
  <div class="s55pl-mini-title" id="mini-title-podyt">—</div>
</div>

<script>
(function(){
  const PLAYLIST = [
    { title:'Clean Soul',         artist:'Studio 55', file:'https://cdn.commoninja.com/asset/8e9a5acf-4926-4d13-81ad-7507a0c961bd.mp3' },
    { title:'Fairytales',         artist:'Studio 55', file:'https://cdn.commoninja.com/asset/ecd65198-c98b-4082-bb84-13dc02071b0d.mp3' },
    { title:'Back-on-track',      artist:'Studio 55', file:'https://cdn.commoninja.com/asset/c96e81ee-e866-4ab0-9052-8900110d7481.mp3' },
    { title:'Vacant-the-breed',   artist:'Studio 55', file:'https://cdn.commoninja.com/asset/e695c595-fef1-4898-8e72-b3434e4ecb64.mp3' },
    { title:'Lush-kidcut',        artist:'Studio 55', file:'https://cdn.commoninja.com/asset/433bc128-52ab-4aa0-a218-64208410d6d4.mp3' },
    { title:'Borders',            artist:'Studio 55', file:'https://cdn.commoninja.com/asset/e915a1fd-5ebb-4e5c-802c-dcb37a8928e9.mp3' },
    { title:'Another Life',       artist:'Studio 55', file:'https://cdn.commoninja.com/asset/70448994-9737-4f70-a9af-9ca1c0ce95b4.mp3' },
    { title:'August',             artist:'Studio 55', file:'https://cdn.commoninja.com/asset/1d025fd5-5f3b-4d27-9368-14040607656d.mp3' },
    { title:'Marlton',            artist:'Studio 55', file:'https://cdn.commoninja.com/asset/5a767f69-d9fb-4b59-8d38-a69c347746be.mp3' },
  ];

  const fmt=s=>(!isFinite(s)||s<0)?'00:00':String(Math.floor(s/60)).padStart(2,'0')+':'+String(Math.floor(s%60)).padStart(2,'0');
  const clamp=(v,min,max)=>Math.min(max,Math.max(min,v));

  const root=document.getElementById('s55pl-podyt');
  const listEl=document.getElementById('s55pl-list-podyt');
  const errEl=document.getElementById('s55pl-err-podyt');
  const titleEl=root.querySelector('[data-role="title"]');
  const timeEl=root.querySelector('[data-role="time"]');
  const playBtn=root.querySelector('[data-action="play"]');
  const prevBtn=root.querySelector('[data-action="prev"]');
  const nextBtn=root.querySelector('[data-action="next"]');
  const muteBtn=root.querySelector('[data-action="mute"]');
  const volEl=root.querySelector('.s55pl-vol');
  const themeBtn=document.getElementById('s55pl-theme-podyt');

  const waveBox=document.getElementById('s55pl-wavebox-podyt');
  const barsBG=document.getElementById('s55pl-bars-podyt');
  const barsFG=document.getElementById('s55pl-bars-prog-podyt');
  const bigCur=document.getElementById('s55pl-cursor-podyt');

  const mini=document.getElementById('s55pl-mini-podyt');
  const miniPlay=document.getElementById('mini-play-podyt');
  const miniWave=document.getElementById('mini-wave-podyt');
  const miniBg=document.getElementById('mini-bg-podyt');
  const miniFg=document.getElementById('mini-fg-podyt');
  const miniCur=document.getElementById('mini-cur-podyt');
  const miniTitle=document.getElementById('mini-title-podyt');
  if (mini && mini.parentElement!==document.body) document.body.appendChild(mini);

  const media=new Audio(); media.preload='metadata'; media.volume=parseFloat(volEl.value||'0.8');

  function seedInt(str){let h=0; for(let i=0;i<str.length;i++){h=(h<<5)-h+str.charCodeAt(i);h|=0;} return Math.abs(h);}
  function prng(n){return()=>{n=(n*16807)%2147483647;return(n-1)/2147483646;};}
  const BAR_W=2,BAR_G=2;
  function barCount(el){return Math.max(40,Math.floor((el.clientWidth||0)/(BAR_W+BAR_G)));}
  function buildBars(container,count,seed){container.innerHTML='';container.style.gap=BAR_G+'px';const r=prng(seed);for(let i=0;i<count;i++){const v=Math.pow(r(),0.6);const h=Math.max(.12,Math.min(.98,v))*100;const b=document.createElement('i');b.style.height=h+'%';b.style.width=BAR_W+'px';container.appendChild(b);}}

  function isMobile(){return window.matchMedia('(max-width: 760px)').matches||/Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);}
  function showMini(){if(!isMobile())return;if(mini.hidden){mini.hidden=false;document.body.classList.add('s55pl--mini-open');requestAnimationFrame(()=>{renderMini(idx);paintMini(PROG[idx]||0);});}}

  let idx=0,duration=0; const PROG=new Array(PLAYLIST.length).fill(0);
  const rowBox=[],rowBG=[],rowFG=[],rowCur=[];
  listEl.innerHTML='';
  PLAYLIST.forEach((t,i)=>{
    const row=document.createElement('div'); row.className='s55pl-item'; row.dataset.idx=i;
    row.innerHTML=`<div class="s55pl-idx">${i+1}</div>
      <div class="s55pl-name">${t.title}</div>
      <div class="s55pl-rowwave" title="Click to play/seek">
        <div class="s55pl-rowbars"></div>
        <div class="s55pl-rowbars s55pl-rowbars--prog"></div>
        <i class="s55pl-rowcursor"></i>
      </div>
      <div class="s55pl-badge">Podcast/YT</div>`;
    listEl.appendChild(row);
    rowBox[i]=row.querySelector('.s55pl-rowwave'); rowBG[i]=row.querySelector('.s55pl-rowbars'); rowFG[i]=row.querySelector('.s55pl-rowbars--prog'); rowCur[i]=row.querySelector('.s55pl-rowcursor');

    row.addEventListener('click',e=>{ if(e.target.closest('.s55pl-rowwave'))return; const k=Number(row.dataset.idx); if(k===idx){media.paused?media.play().catch(()=>{}):media.pause();} else {setActive(k,true);} });
    rowBox[i].addEventListener('click',e=>{ const r=rowBox[i].getBoundingClientRect(); const p=clamp((e.clientX-r.left)/r.width,0,1); if(i!==idx){setActive(i,true);} if(isFinite(duration)&&duration>0){media.currentTime=duration*p;} else {PROG[i]=p; paintRow(i,p);} e.stopPropagation(); });
  });

  function renderBig(i){const key=PLAYLIST[i].title+PLAYLIST[i].file,seed=seedInt(key); buildBars(barsBG,barCount(waveBox),seed); buildBars(barsFG,barsBG.childElementCount,seed);}
  function renderRow(i){const key=PLAYLIST[i].title+PLAYLIST[i].file,seed=seedInt(key); buildBars(rowBG[i],barCount(rowBox[i]),seed); buildBars(rowFG[i],rowBG[i].childElementCount,seed);}
  function renderAllRows(){for(let i=0;i<PLAYLIST.length;i++){renderRow(i);paintRow(i,PROG[i]||0);}}
  function renderMini(i){const key=PLAYLIST[i].title+PLAYLIST[i].file,seed=seedInt(key); buildBars(miniBg,barCount(miniWave),seed); buildBars(miniFg,miniBg.childElementCount,seed);}

  function paintBig(p){const pp=clamp(p,0,1); barsFG.style.transform=`scaleX(${pp})`; bigCur.style.left=(pp*100)+'%';}
  function paintRow(i,p){const pp=clamp(p,0,1); if(!rowFG[i]||!rowCur[i])return; rowFG[i].style.transform=`scaleX(${pp})`; rowCur[i].style.left=(pp*100)+'%';}
  function paintMini(p){const pp=clamp(p,0,1); miniFg.style.transform=`scaleX(${pp})`; miniCur.style.left=(pp*100)+'%';}
  function paintActive(p){paintBig(p);paintRow(idx,p);paintMini(p);}

  function setActive(i,playNow=false){
    if(isFinite(duration)&&duration>0) PROG[idx]=(media.currentTime||0)/duration;
    idx=(i+PLAYLIST.length)%PLAYLIST.length; const tr=PLAYLIST[idx]; errEl.textContent='';
    titleEl.textContent=tr.title+(tr.artist?(' — '+tr.artist):''); miniTitle.textContent=tr.title;
    [...listEl.children].forEach(el=>el.classList.toggle('active',Number(el.dataset.idx)===idx));
    media.src=tr.file; media.load();
    renderBig(idx); renderRow(idx); renderMini(idx); paintActive(PROG[idx]||0);
    if(playNow){ const p=media.play(); if(p&&p.catch)p.catch(()=>{}); showMini(); }
  }

  playBtn.addEventListener('click',()=>{media.paused?media.play():media.pause();});
  prevBtn.addEventListener('click',()=>setActive(idx-1,false));
  nextBtn.addEventListener('click',()=>setActive(idx+1,true));
  muteBtn.addEventListener('click',()=>{media.muted=!media.muted; muteBtn.textContent=media.muted?'🔈':'🔇';});
  volEl.addEventListener('input',e=>media.volume=parseFloat(e.target.value||'0.8'));

  waveBox.addEventListener('click',e=>{if(!isFinite(duration)||duration<=0)return; const r=waveBox.getBoundingClientRect(); const p=clamp((e.clientX-r.left)/r.width,0,1); media.currentTime=duration*p;});
  miniPlay.addEventListener('click',()=>{media.paused?media.play():media.pause();});
  miniWave.addEventListener('click',e=>{if(!isFinite(duration)||duration<=0)return; const r=miniWave.getBoundingClientRect(); const p=clamp((e.clientX-r.left)/r.width,0,1); media.currentTime=duration*p;});

  document.addEventListener('keydown',e=>{
    const tag=(e.target&&e.target.tagName||'').toLowerCase(); const editing=e.target?.isContentEditable||tag==='input'||tag==='textarea'||tag==='select';
    if(editing||e.metaKey||e.ctrlKey||e.altKey) return;
    if(e.code==='Space'){e.preventDefault(); media.paused?media.play().catch(()=>{}):media.pause();}
    else if(e.key==='ArrowRight'){e.preventDefault(); if(isFinite(duration)&&duration>0) media.currentTime=clamp((media.currentTime||0)+5,0,duration);}
    else if(e.key==='ArrowLeft'){e.preventDefault(); if(isFinite(duration)&&duration>0) media.currentTime=clamp((media.currentTime||0)-5,0,duration);}
    else if(e.key==='ArrowUp'){e.preventDefault(); media.volume=clamp((media.volume||0)+.05,0,1); volEl.value=String(media.volume);}
    else if(e.key==='ArrowDown'){e.preventDefault(); media.volume=clamp((media.volume||0)-.05,0,1); volEl.value=String(media.volume);}
  });

  let raf=null; function loop(){ if(isFinite(duration)&&duration>0){const p=(media.currentTime||0)/duration; PROG[idx]=p; paintActive(p); timeEl.textContent=fmt(media.currentTime)+' / '+fmt(duration);} raf=requestAnimationFrame(loop);}
  function startLoop(){cancelAnimationFrame(raf); raf=requestAnimationFrame(loop);}
  function stopLoop(){cancelAnimationFrame(raf); raf=null;}

  media.addEventListener('play',()=>{playBtn.textContent='⏸'; miniPlay.textContent='⏸'; showMini(); startLoop();});
  media.addEventListener('pause',()=>{playBtn.textContent='▶'; miniPlay.textContent='▶'; stopLoop(); PROG[idx]=(isFinite(duration)&&duration>0)?(media.currentTime||0)/duration:PROG[idx];});
  media.addEventListener('loadedmetadata',()=>{duration=Number.isFinite(media.duration)?media.duration:0; timeEl.textContent='00:00 / '+fmt(duration); waveBox.dataset.seekable=(isFinite(duration)&&duration>0)?'1':'0'; paintActive(PROG[idx]||0);});
  media.addEventListener('ended',()=>{PROG[idx]=0; setActive(idx+1,true);});
  media.addEventListener('error',()=>{const m=media.error; const map={1:'Playback aborted.',2:'Network error.',3:'Decoding error.',4:'Source not supported/blocked.'}; errEl.textContent='Audio error: '+(map[m&&m.code]||'Unknown.');});

  const THEME_KEY='s55pl_theme_podyt';
  function applyTheme(t){root.setAttribute('data-theme',t); mini.setAttribute('data-theme',t); themeBtn.textContent=(t==='dark'?'🌙 Dark':'☀️ Light');}
  const savedTheme=localStorage.getItem(THEME_KEY)||'dark'; applyTheme(savedTheme);
  themeBtn.addEventListener('click',()=>{const t=root.getAttribute('data-theme')==='dark'?'light':'dark'; localStorage.setItem(THEME_KEY,t); applyTheme(t);});

  let rAF=null; function reflowAll(){renderBig(idx); renderAllRows(); renderMini(idx); paintActive(PROG[idx]||0);}
  window.addEventListener('resize',()=>{if(rAF)cancelAnimationFrame(rAF); rAF=requestAnimationFrame(reflowAll);});
  window.addEventListener('orientationchange',()=>setTimeout(reflowAll,150));

  for(let i=0;i<PLAYLIST.length;i++){renderRow(i);} setActive(0,false);
})();
</script>

Text

<h3 style="white-space:pre-line">🎙️ Podcast &amp; YouTube Audio Branding – Sound That Builds Your Identity</h3>
<p class="large" style="white-space:pre-line">Stand out in the crowded digital space with audio branding made for you. From impactful intros and outros to subtle background themes, we design sound that strengthens your brand presence and gives your audience a consistent, professional listening experience.</p>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');

  .s55-links{
    background:#1a1a1a; /* charcoal dark grey background */
    color:#fff;
    padding:48px 16px;
    border-radius:16px;
    font-family:'Silkscreen', sans-serif;
  }

  .s55-links h2{
    font-size:clamp(22px,2.6vw,32px);
    text-align:center;
    line-height:1.4;
    margin:0 0 32px;
    color:#fff;
  }

  .s55-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    max-width:980px;
    margin:0 auto;
  }

  @media(min-width:720px){
    .s55-grid{grid-template-columns:1fr 1fr}
  }

  .s55-card{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:18px 20px;
    border:1px solid #262a31;
    border-radius:14px;
    text-decoration:none;
    color:#fff;
    transition:transform .1s ease-in, box-shadow .15s ease-in, filter .15s ease-in;
  }

  /* Press-in hover effect */
  .s55-card:hover{
    transform:translateY(2px) scale(0.98);
    box-shadow:inset 0 4px 10px rgba(0,0,0,0.4);
    filter:brightness(0.9);
  }

  /* DARKER mid-tone palette for white text */
  .s55-card:nth-child(1){ background:#7a1f5c; } /* deep rose plum */
  .s55-card:nth-child(2){ background:#146b6c; } /* teal ocean */
  .s55-card:nth-child(3){ background:#b07b17; } /* golden amber */
  .s55-card:nth-child(4){ background:#4a2a85; } /* royal violet */
  .s55-card:nth-child(5){ background:#a7521e; } /* warm burnt orange */
  .s55-card:nth-child(6){ background:#356b2b; } /* forest green */

  .s55-card span{
    font-size:clamp(16px,1.8vw,20px);
    font-weight:600;
    letter-spacing:.2px;
  }

  .s55-arrow{
    width:22px;
    height:22px;
    flex:0 0 22px;
    border:1px solid #fff;
    border-radius:50%;
    display:grid;
    place-items:center;
  }

  .s55-arrow svg{
    width:14px;
    height:14px;
  }

  .s55-sub{
    display:block;
    opacity:.75;
    font-weight:400;
    font-size:clamp(13px,1.3vw,14px);
  }
</style>

<section class="s55-links" aria-label="Studio 55 Music Services">
  <h2>
    🎧 From Jingles to Full Songs — Click a Category <br>
    Below to Listen & Explore Our Sound.
  </h2>
  <div class="s55-grid">
    <a class="s55-card" href="/music/custom-jingles">
      <span>Custom Jingles</span>
      <div class="s55-arrow" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M5 12h14M13 5l7 7-7 7"/>
        </svg>
      </div>
    </a>

    <a class="s55-card" href="/music/podcast-youtube">
      <span>Podcast &amp; YouTube</span>
      <div class="s55-arrow" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M5 12h14M13 5l7 7-7 7"/>
        </svg>
      </div>
    </a>

    <a class="s55-card" href="/music/cinematic-music">
      <span>Cinematic Music</span>
      <div class="s55-arrow" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M5 12h14M13 5l7 7-7 7"/>
        </svg>
      </div>
    </a>

    <a class="s55-card" href="/music/social-media-audio">
      <span>Social Media Audio</span>
      <div class="s55-arrow" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M5 12h14M13 5l7 7-7 7"/>
        </svg>
      </div>
    </a>

    <a class="s55-card" href="/music/custom-songs">
      <span>Custom Songs</span>
      <div class="s55-arrow" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M5 12h14M13 5l7 7-7 7"/>
        </svg>
      </div>
    </a>

    <a class="s55-card" href="/music/ambient-background">
      <span>Ambient &amp; Background</span>
      <div class="s55-arrow" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M5 12h14M13 5l7 7-7 7"/>
        </svg>
      </div>
    </a>
  </div>
</section>

<script>
  (function(){
    var topLevelFix=[
      'custom-jingles','podcast-youtube','cinematic-music',
      'social-media-audio','custom-songs','ambient-background'
    ];
    var p=location.pathname.replace(/^\/+|\/+$/g,'');
    if(topLevelFix.includes(p)){
      location.replace('/music/'+p);
    }
  })();
</script>

Banner

Podcast Youtube & Branding

Bright red gradient background with subtle transitions

<script src="https://elfsightcdn.com/platform.js" async></script>
<div class="elfsight-app-5178cb34-e179-43f5-9ac7-526e6f5df995" data-elfsight-app-lazy></div>

PODCAST & YOUTUBE — Studio 55

🎙️ Podcast & YouTube Audio Branding – Sound That Builds Your Identity

🎧 From Jingles to Full Songs — Click a Category
Below to Listen & Explore Our Sound.

Podcast Youtube & Branding

PODCAST & YOUTUBE — Studio 55

🎙️ Podcast & YouTube Audio Branding – Sound That Builds Your Identity

🎧 From Jingles to Full Songs — Click a Category Below to Listen & Explore Our Sound.

Podcast Youtube & Branding

🎧 From Jingles to Full Songs — Click a Category
Below to Listen & Explore Our Sound.