/* css/team.css Meet JJ & CC — two-profile responsive section Uses Inter font (load via Google Fonts in ) */ :root{ --brand: #3448C5; --accent: #7c5cff; --muted: #6b7280; --fg: #071037; --card-bg: #ffffff; --soft: rgba(12,22,59,0.06); --maxw: 1200px; --ff: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; } /* Section container */ .meet-section{ padding: 72px 20px; background: linear-gradient(180deg, rgba(124,92,255,0.02), rgba(52,72,197,0.01)); color: var(--fg); font-family: var(--ff); } .meet-inner{ max-width: var(--maxw); margin: 0 auto; display:flex; flex-direction:column; gap:30px; align-items:stretch; } .meet-head{ text-align:center; margin-bottom:0; } .meet-head h2{ font-size:32px; margin:0; font-weight:800; letter-spacing:-0.02em; } .meet-sub{ margin-top:8px; color:var(--muted); max-width:900px; margin-left:auto; margin-right:auto; font-size:15px; } /* Grid: two columns on desktop, stacked on mobile */ .meet-grid{ display:grid; grid-template-columns: 1fr; gap: 28px; align-items:stretch; margin-top:6px; } @media(min-width:980px){ .meet-grid{ grid-template-columns: 1fr 1fr; } } /* Character card */ .char-card{ display:flex; gap:20px; align-items:center; background: linear-gradient(180deg, var(--card-bg), #fbfdff); padding: 20px; border-radius: 14px; border: 1px solid var(--soft); box-shadow: 0 12px 30px rgba(12,22,59,0.06); transition: transform .28s ease, box-shadow .28s ease; position:relative; overflow:visible; } .char-card:hover{ transform: translateY(-8px); box-shadow: 0 22px 60px rgba(12,22,59,0.10); } /* For CC card on larger screens, mirror layout (image right) */ .char-card.cc{ flex-direction: row-reverse; text-align:left; } /* Figure / art */ .char-figure{ min-width:140px; width: 140px; display:flex; align-items:center; justify-content:center; margin:0; } .char-art{ width:140px; height:140px; border-radius:18px; box-shadow: 0 12px 30px rgba(12,22,59,0.08); transform: translateY(-6px); transition: transform .32s cubic-bezier(.2,.9,.26,1); } .char-card:hover .char-art{ transform: translateY(-10px) scale(1.02); } /* Content */ .char-content{ flex:1; display:flex; flex-direction:column; gap:8px; padding:6px 4px; } .char-badge{ display:inline-block; background: linear-gradient(90deg,var(--brand),var(--accent)); color:#fff; padding:6px 10px; border-radius:999px; font-weight:800; font-size:13px; width:fit-content; } .char-content h3{ margin:0; font-size:20px; font-weight:800; color:#071037; } .char-role{ color:var(--muted); font-weight:700; margin-top:2px; font-size:13px; } /* Paragraphs */ .char-text{ margin:0; color:#0f1a3b; line-height:1.6; font-size:15px; } .char-quote{ margin:8px 0 0; font-weight:700; color:var(--brand); font-size:14px; } /* Accessibility / focus styles */ .char-card:focus-within{ outline: 3px solid rgba(88,77,255,0.10); outline-offset:6px; } /* Mobile adjustments */ @media(max-width:640px){ .char-card{ padding:16px; gap:12px; } .char-figure{ width:110px; min-width:110px; } .char-art{ width:110px; height:110px; border-radius:14px; } .char-content h3{ font-size:18px; } .meet-head h2{ font-size:24px; } } /* Swap order so JJ always appears left on narrow screens if desired: (we keep natural DOM order; this is only for large-screen mirroring) */ @media(min-width:980px){ .char-card.jj{ order: 0; } .char-card.cc{ order: 1; } }