/* ============================================================ LEADERSHIP SECTION — Redesigned File: leadership-section.css Link in : Replaces: #team section styles Depends on homepage CSS for shared variables + .container, .section-tag, .section-heading, .anim-* classes ============================================================ */ /* ============================================================ SECTION WRAPPER ============================================================ */ #leadership { padding: 8rem 0; background: var(--deep-blue, #0F2E63); position: relative; overflow: hidden; } /* Layered background texture */ #leadership::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 80px 80px; pointer-events: none; } #leadership::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 0% 50%, rgba(210,37,46,.12) 0%, transparent 60%), radial-gradient(ellipse 60% 70% at 100% 50%, rgba(63,111,198,.18) 0%, transparent 60%); pointer-events: none; } /* ============================================================ HEADER ============================================================ */ .ls-header { margin-bottom: 5rem; position: relative; z-index: 1; } /* Override section-tag for dark background */ #leadership .section-tag { color: rgba(255,255,255,.5); } #leadership .section-tag::before { background: var(--red, #D2252E); } #leadership .section-heading { color: white; max-width: 640px; } /* ============================================================ LEADERS GRID ============================================================ */ .ls-grid { display: flex; flex-direction: column; gap: 5rem; position: relative; z-index: 1; } /* ============================================================ INDIVIDUAL LEADER CARD ============================================================ */ .ls-card { display: grid; grid-template-columns: 340px 1fr; gap: 5rem; align-items: center; } /* Alternate card: content left, image right */ .ls-card--alt { grid-template-columns: 1fr 340px; } .ls-card--alt .ls-content-col { order: 1; } .ls-card--alt .ls-img-col { order: 2; } /* ============================================================ IMAGE COLUMN ============================================================ */ .ls-img-col { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } /* Photo frame with accent corner */ .ls-img-frame { position: relative; width: 100%; max-width: 300px; } .ls-img-frame img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top center; border-radius: 16px; display: block; filter: grayscale(.15); transition: filter .5s ease; } .ls-card:hover .ls-img-frame img { filter: grayscale(0); } /* Red accent corner */ .ls-img-accent { position: absolute; bottom: -14px; right: -14px; width: 80px; height: 80px; border-right: 3px solid var(--red, #D2252E); border-bottom: 3px solid var(--red, #D2252E); border-radius: 0 0 16px 0; pointer-events: none; } .ls-card--alt .ls-img-accent { right: auto; left: -14px; border-right: none; border-left: 3px solid var(--red, #D2252E); border-radius: 0 0 0 16px; } /* Credential chips */ .ls-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; max-width: 300px; } .ls-chip { font-family: var(--font-heading, 'Barlow', sans-serif); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.65); padding: .28rem .7rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 100px; } /* ============================================================ CONTENT COLUMN ============================================================ */ .ls-content-col { padding: 2rem 0; } /* Large number */ .ls-number { font-family: var(--font-display, 'Barlow Condensed', sans-serif); font-size: 5rem; font-weight: 700; line-height: 1; color: rgba(255,255,255,.06); letter-spacing: -.02em; margin-bottom: -1rem; user-select: none; } /* Role label */ .ls-role { font-family: var(--font-heading, 'Barlow', sans-serif); font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--red, #D2252E); margin-bottom: .4rem; } /* Name */ .ls-name { font-family: var(--font-display, 'Barlow Condensed', sans-serif); font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 700; color: white; line-height: 1.05; letter-spacing: .01em; margin-bottom: 1.5rem; text-transform: uppercase; } /* Animated divider */ .ls-divider { width: 48px; height: 3px; background: var(--red, #D2252E); border-radius: 2px; margin-bottom: 1.5rem; transition: width .55s cubic-bezier(.22,1,.36,1); } .ls-card:hover .ls-divider { width: 90px; } /* Quote */ .ls-quote { font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif); font-size: 1.02rem; font-style: italic; line-height: 1.72; color: rgba(255,255,255,.82); border-left: 2px solid var(--red, #D2252E); padding-left: 1.2rem; margin: 0 0 1.5rem; } /* Bio */ .ls-bio { font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif); font-size: .9rem; line-height: 1.82; color: rgba(255,255,255,.55); margin-bottom: 2.2rem; } /* Stats row */ .ls-stats { display: flex; align-items: center; gap: 2rem; padding: 1.4rem 1.8rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; width: fit-content; } .ls-stat { display: flex; flex-direction: column; align-items: center; gap: .2rem; } .ls-stat-num { font-family: var(--font-display, 'Barlow Condensed', sans-serif); font-size: 1.8rem; font-weight: 700; color: white; line-height: 1; } .ls-stat-num span { font-size: 1rem; color: var(--red, #D2252E); } .ls-stat-lbl { font-family: var(--font-heading, 'Barlow', sans-serif); font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); text-align: center; line-height: 1.4; } /* Divider between stats */ .ls-stat-div { width: 1px; height: 36px; background: rgba(255,255,255,.1); flex-shrink: 0; } /* ============================================================ RESPONSIVE BREAKPOINTS ============================================================ */ /* ≤ 1100px */ @media (max-width: 1100px) { .ls-card, .ls-card--alt { grid-template-columns: 280px 1fr; gap: 3.5rem; } } /* ≤ 900px */ @media (max-width: 900px) { .ls-card, .ls-card--alt { grid-template-columns: 1fr; gap: 2.5rem; } .ls-card--alt .ls-content-col { order: 2; } .ls-card--alt .ls-img-col { order: 1; } .ls-img-col { flex-direction: row; align-items: flex-start; gap: 2rem; } .ls-img-frame { max-width: 180px; } .ls-chips { max-width: 200px; justify-content: flex-start; } .ls-number { font-size: 3.5rem; } } /* ≤ 640px */ @media (max-width: 640px) { #leadership { padding: 5rem 0; } .ls-header { margin-bottom: 3.5rem; } .ls-grid { gap: 3.5rem; } .ls-img-col { flex-direction: column; align-items: center; } .ls-chips { max-width: 280px; justify-content: center; } .ls-stats { gap: 1.2rem; padding: 1.1rem 1.3rem; width: 100%; justify-content: center; } .ls-stat-num { font-size: 1.5rem; } .ls-quote { font-size: .92rem; } } /* ≤ 480px */ @media (max-width: 480px) { .ls-stats { flex-wrap: wrap; gap: 1rem 1.5rem; } .ls-stat-div { display: none; } }