/* ============================================================ TEAM STRUCTURE SECTION — team_structure.css Import in main.css or link directly in : ============================================================ */ /* ── Section shell ────────────────────────────────────────── */ .ts-section { background: var(--dark-bg); position: relative; overflow: hidden; } /* Atmospheric blobs */ .ts-section::before, .ts-section::after { content: ''; position: absolute; border-radius: 50%; filter: blur(130px); pointer-events: none; z-index: 0; } .ts-section::before { width: 700px; height: 700px; background: radial-gradient(circle, rgba(124,58,237,.14) 0%, transparent 70%); top: -180px; left: -220px; } .ts-section::after { width: 500px; height: 500px; background: radial-gradient(circle, rgba(236,72,153,.10) 0%, transparent 70%); bottom: -100px; right: -160px; } .ts-section .container { position: relative; z-index: 1; } /* ── Tab navigation bar ───────────────────────────────────── */ .ts-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 52px; } .ts-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 50px; font-size: 13px; font-weight: 600; font-family: 'Poppins', sans-serif; cursor: pointer; border: 1.5px solid rgba(124,58,237,.22); background: rgba(13,7,32,.8); color: var(--text-gray); transition: all .3s ease; white-space: nowrap; position: relative; overflow: hidden; } /* shimmer on hover */ .ts-tab::before { content: ''; position: absolute; inset: 0; border-radius: 50px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); transform: translateX(-120%); transition: transform .5s ease; } .ts-tab:hover::before { transform: translateX(120%); } .ts-tab i { font-size: 12px; color: var(--tab-color, var(--light-purple)); transition: color .3s; } .ts-tab:hover { border-color: var(--tab-color, var(--primary-purple)); color: #fff; background: rgba(124,58,237,.1); box-shadow: 0 4px 18px rgba(124,58,237,.2); } .ts-tab.active { border-color: var(--tab-color, var(--primary-purple)); background: color-mix(in srgb, var(--tab-color, var(--primary-purple)) 18%, transparent); color: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--tab-color, var(--primary-purple)) 30%, transparent), 0 8px 28px rgba(124,58,237,.25); } .ts-tab.active i { color: var(--tab-color, var(--light-purple)); } /* ── Panel ────────────────────────────────────────────────── */ .ts-panel { display: none; animation: tsPanelIn .45s ease forwards; } .ts-panel.active { display: block; } @keyframes tsPanelIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* Panel header row */ .ts-panel-head { display: flex; align-items: center; gap: 18px; margin-bottom: 36px; padding-bottom: 24px; border-bottom: 1px solid rgba(124,58,237,.15); } .ts-panel-icon { width: 58px; height: 58px; border-radius: 16px; border: 1px solid transparent; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; transition: transform .3s; } .ts-panel-icon:hover { transform: rotate(-6deg) scale(1.08); } .ts-panel-title { font-size: 26px; font-weight: 800; margin: 0 0 4px; letter-spacing: -.5px; } .ts-panel-count { font-size: 13px; color: var(--text-gray); margin: 0; } /* ── Members grid ─────────────────────────────────────────── */ .ts-grid { display: grid; gap: 24px; justify-items: center; } /* Dynamic column count based on member count */ .ts-grid-1 { grid-template-columns: repeat(1, minmax(0, 320px)); } .ts-grid-2 { grid-template-columns: repeat(2, minmax(0, 280px)); } .ts-grid-3 { grid-template-columns: repeat(3, minmax(0, 280px)); } .ts-grid-4 { grid-template-columns: repeat(4, minmax(0, 260px)); } .ts-grid-5 { grid-template-columns: repeat(5, minmax(0, 240px)); } .ts-grid-6 { grid-template-columns: repeat(6, minmax(0, 220px)); } /* fallback for 7+ */ .ts-grid:not([class*="ts-grid-"]) { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } /* ── Member card ──────────────────────────────────────────── */ .ts-card { position: relative; width: 100%; background: var(--darker-bg); border: 1px solid rgba(124,58,237,.22); border-radius: 22px; padding: 34px 24px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; overflow: hidden; transition: transform .38s ease, border-color .38s ease, box-shadow .38s ease; cursor: default; } .ts-card:hover { transform: translateY(-10px); border-color: var(--card-accent, var(--primary-purple)); box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--card-accent, var(--primary-purple)) 25%, transparent), 0 0 50px color-mix(in srgb, var(--card-accent, var(--primary-purple)) 15%, transparent); } /* floating inner glow (hidden by default, visible on hover) */ .ts-card-glow { position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--card-accent, var(--primary-purple)) 35%, transparent) 0%, transparent 70%); opacity: 0; transition: opacity .4s ease; pointer-events: none; z-index: 0; } .ts-card:hover .ts-card-glow { opacity: 1; } /* Bottom accent bar */ .ts-card-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; opacity: 0; transition: opacity .35s; } .ts-card:hover .ts-card-bar { opacity: 1; } /* ── Avatar ───────────────────────────────────────────────── */ .ts-avatar-wrap { position: relative; width: 100px; height: 100px; z-index: 1; } /* real image */ .ts-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; position: relative; z-index: 1; transition: transform .35s ease; } .ts-card:hover .ts-avatar-img { transform: scale(1.06); } /* initials placeholder */ .ts-avatar-init { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 800; color: #fff; letter-spacing: 1px; position: relative; z-index: 1; transition: transform .35s ease; user-select: none; } .ts-card:hover .ts-avatar-init { transform: scale(1.06); } /* decorative ring */ .ts-avatar-ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid transparent; transition: border-color .35s, transform .35s; z-index: 0; } .ts-card:hover .ts-avatar-ring { transform: scale(1.08); } /* ── Card info ────────────────────────────────────────────── */ .ts-card-info { position: relative; z-index: 1; } .ts-card-name { font-size: 16px; font-weight: 700; margin: 0 0 6px; line-height: 1.3; transition: color .3s; } .ts-card-role { font-size: 13px; color: var(--text-gray); margin: 0; line-height: 1.5; } /* ── RESPONSIVE ───────────────────────────────────────────── */ @media (max-width: 1100px) { .ts-grid-5, .ts-grid-6 { grid-template-columns: repeat(3, minmax(0, 260px)); } } @media (max-width: 900px) { .ts-grid-4, .ts-grid-5, .ts-grid-6 { grid-template-columns: repeat(3, 1fr); } .ts-grid-3 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .ts-tab span { display: none; } .ts-tab { padding: 10px 16px; } .ts-tab i { font-size: 15px; } .ts-grid-1, .ts-grid-2 { grid-template-columns: repeat(2, 1fr); } .ts-grid-3, .ts-grid-4, .ts-grid-5, .ts-grid-6 { grid-template-columns: repeat(2, 1fr); } .ts-panel-title { font-size: 22px; } .ts-card { padding: 28px 18px 22px; } } @media (max-width: 480px) { .ts-nav { gap: 6px; } .ts-tab { padding: 8px 12px; } .ts-grid-1 { grid-template-columns: 1fr; } .ts-grid-2, .ts-grid-3, .ts-grid-4, .ts-grid-5, .ts-grid-6 { grid-template-columns: repeat(2, 1fr); } .ts-avatar-wrap { width: 80px; height: 80px; } .ts-avatar-init { font-size: 26px; } .ts-card-name { font-size: 14px; } .ts-card-role { font-size: 12px; } }