/* Tabs Page Specific Styles */ .tp-underline { transition: all 0.3s cubic-bezier(0.4,0,0.2,1); } .tp-underline::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2.5px; border-radius:2px 2px 0 0; background:transparent; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); } .tp-underline.active::after { background:#6366f1; } .tp-underline:hover::after { background:#a5b4fc; } .tp-pill { transition:all 0.25s cubic-bezier(0.4,0,0.2,1); } .tp-pill.active { background:#6366f1; color:white; box-shadow:0 2px 8px rgba(99,102,241,0.35); } .tp-pill:not(.active):hover { background:#eef2ff; color:#4f46e5; } .tp-vertical { transition:all 0.25s cubic-bezier(0.4,0,0.2,1); } .tp-vertical.active { background:#eef2ff; color:#4f46e5; } .tp-vertical:not(.active):hover { background:#f9fafb; color:#4f46e5; } .tp-card { transition:all 0.25s cubic-bezier(0.4,0,0.2,1); } .tp-card.active { background:#eef2ff; border-color:#6366f1; } .tp-card:not(.active):hover { background:#f9fafb; border-color:#e5e7eb; } .tp-content { animation:tpFadeIn 0.25s ease-out; } @keyframes tpFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } } .tp-fade { animation:tpAnimFade 0.5s ease-out both; } @keyframes tpAnimFade { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } } .tp-delay-1 { animation-delay:0.1s; } .tp-delay-2 { animation-delay:0.2s; } .tp-delay-3 { animation-delay:0.3s; } .tp-delay-4 { animation-delay:0.4s; } .tp-delay-5 { animation-delay:0.5s; } .tp-skeleton { background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%); background-size:200% 100%; animation:tpShimmer 1.5s infinite; border-radius:6px; } .dark .tp-skeleton { background:linear-gradient(90deg,rgba(255,255,255,0.06) 25%,rgba(255,255,255,0.1) 50%,rgba(255,255,255,0.06) 75%); background-size:200% 100%; } @keyframes tpShimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } } .tp-panel-enter { animation:tpPanelSlideIn 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards; } @keyframes tpPanelSlideIn { from { opacity:0; transform:translateY(12px) scale(0.98); } to { opacity:1; transform:translateY(0) scale(1); } }