.zp-tabs{display:grid;gap:16px} .zp-tabs__list{ position:relative; display:flex; gap:6px; flex-wrap:wrap; align-items:center; padding:8px; border-radius:999px; background:rgba(16,21,20,.55); border:1px solid rgba(235,241,228,.08); box-shadow:0 18px 70px rgba(0,0,0,.35); } .zp-tabs__tab{ position:relative; appearance:none; border:0; background:transparent; padding:10px 12px; border-radius:999px; cursor:pointer; color:rgba(235,233,223,.80); font-weight:820; letter-spacing:.14em; text-transform:uppercase; font-size:.8rem; transition:transform .2s ease,color .2s ease; z-index:1; } .zp-tabs__tab:hover{transform:translateY(-1px);color:rgba(235,233,223,.96)} .zp-tabs__tab.is-active{color:rgba(8,10,8,.92)} .zp-tabs__indicator{ position:absolute; inset:8px auto 8px 8px; width:110px; border-radius:999px; background:var(--grad-accent); box-shadow:var(--shadow-neon); transform:translateX(0); transition:transform .55s cubic-bezier(.2,.9,.2,1),width .55s cubic-bezier(.2,.9,.2,1); } .zp-tabs__panels{min-height:1px} .zp-tabs__panel{display:none} .zp-tabs__panel.is-active{display:block}