/* ============================================================ TEAM PAGES — jaialai.com Uses --team-color and --team-ink set inline on . ============================================================ */ .page-team { --team-color: #0e1a2b; --team-ink: #ffffff; background: var(--bg); color: var(--ink); } .page-team-index { background: var(--bg); color: var(--ink); } /* ---------- TEAM DIRECTORY ---------- */ .teams-cover { padding: clamp(80px, 12vw, 160px) var(--pad-x) clamp(48px, 6vw, 80px); border-bottom: 1px solid rgba(14, 26, 43, 0.08); } .teams-cover__eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--red); margin: 0 0 24px; text-transform: uppercase; } .teams-cover h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(48px, 8vw, 112px); line-height: 0.94; letter-spacing: -0.02em; margin: 0 0 32px; max-width: 18ch; } .teams-cover__lede { font-family: var(--font-body); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; color: var(--ink-muted); max-width: 62ch; margin: 0; } .team-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(14, 26, 43, 0.08); border-bottom: 1px solid rgba(14, 26, 43, 0.08); } @media (min-width: 720px) { .team-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1080px) { .team-grid { grid-template-columns: 1fr 1fr 1fr; } } .team-tile { display: block; background: var(--bg); padding: clamp(28px, 3.4vw, 44px); color: var(--ink); text-decoration: none; transition: background 0.24s ease; position: relative; overflow: hidden; min-height: 460px; display: flex; flex-direction: column; } .team-tile:hover { background: color-mix(in srgb, var(--tile-color) 8%, var(--bg)); } .team-tile__bar { position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--tile-color); } .team-tile__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--ink-muted); text-transform: uppercase; margin: 8px 0 24px; } .team-tile__name { font-family: var(--font-serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.02; letter-spacing: -0.01em; margin: 0 0 12px; } .team-tile__tag { font-family: var(--font-body); font-style: italic; font-size: 17px; color: var(--ink-muted); margin: 0 0 24px; max-width: 26ch; } .team-tile__meta { display: flex; gap: 24px; margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(14, 26, 43, 0.1); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); } .team-tile__meta strong { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--tile-color); text-transform: none; margin-top: 4px; } .team-tile__meta span { display: block; color: var(--ink-muted); font-weight: 500; } .team-tile__cta { position: absolute; bottom: clamp(28px, 3.4vw, 44px); right: clamp(28px, 3.4vw, 44px); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tile-color); opacity: 0; transform: translateX(-4px); transition: all 0.24s ease; } .team-tile:hover .team-tile__cta { opacity: 1; transform: translateX(0); } /* ---------- SINGLE TEAM PAGE ---------- */ .team-hero { background: var(--team-color); color: var(--team-ink); padding: clamp(72px, 10vw, 128px) var(--pad-x) clamp(56px, 8vw, 96px); position: relative; overflow: hidden; } .team-hero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 4vw, 56px); align-items: end; max-width: 1400px; margin: 0 auto; } @media (min-width: 960px) { .team-hero__grid { grid-template-columns: 1.35fr 1fr; } } .team-hero__eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.8; margin: 0 0 32px; } .team-hero__eyebrow .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin: 0 12px; vertical-align: middle; } .team-hero h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(56px, 9vw, 132px); line-height: 0.9; letter-spacing: -0.025em; margin: 0 0 24px; } .team-hero__tag { font-family: var(--font-body); font-style: italic; font-size: clamp(20px, 2vw, 28px); opacity: 0.85; margin: 0 0 40px; max-width: 28ch; } .team-hero__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.18); max-width: 780px; } @media (max-width: 900px) { .team-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; } } .team-hero__stat { min-width: 0; overflow: hidden; } .team-hero__stat span { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.65; margin-bottom: 6px; } .team-hero__stat strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(14px, 1.4vw, 18px); letter-spacing: -0.01em; line-height: 1.15; overflow-wrap: anywhere; hyphens: auto; max-width: 100%; } .team-hero__image { aspect-ratio: 3 / 4; max-height: 540px; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, 0.05); justify-self: end; width: 100%; max-width: 380px; } .team-hero__image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Ink override for very light team colors */ .team-hero[data-ink="dark"] { color: #0e1a2b; } .team-hero[data-ink="dark"] .team-hero__stats { border-top-color: rgba(14, 26, 43, 0.18); } /* ---------- TEAM IDENTITY BAND ---------- */ .team-identity { background: var(--bg); padding: clamp(48px, 6vw, 80px) var(--pad-x); border-bottom: 1px solid rgba(14, 26, 43, 0.08); } .team-identity__grid { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 4vw, 64px); max-width: 1400px; margin: 0 auto; } @media (min-width: 800px) { .team-identity__grid { grid-template-columns: 220px 1fr 1fr; } } .team-identity__mono { aspect-ratio: 1 / 1; background: var(--team-color); color: var(--team-ink); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: clamp(60px, 6vw, 96px); font-weight: 400; letter-spacing: -0.02em; max-width: 220px; } .team-facts { display: grid; gap: 20px; } .team-facts__row { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(14, 26, 43, 0.08); } .team-facts__row:last-child { border-bottom: none; padding-bottom: 0; } .team-facts__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); padding-top: 2px; } .team-facts__value { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--ink); } .team-facts__value strong { font-weight: 600; } /* ---------- STORY ---------- */ .team-story { background: var(--bg); padding: clamp(56px, 8vw, 112px) var(--pad-x); border-bottom: 1px solid rgba(14, 26, 43, 0.08); } .team-story__inner { max-width: 720px; margin: 0 auto; } .team-story__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--team-color); margin: 0 0 24px; } .team-story__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 40px; } .team-story p { font-family: var(--font-serif); font-weight: 300; font-size: 20px; line-height: 1.6; color: var(--ink); margin: 0 0 24px; } .team-story p:first-of-type::first-letter { font-family: var(--font-serif); font-size: 4.4em; line-height: 0.86; float: left; margin: 0.06em 0.08em 0 -0.02em; color: var(--team-color); font-weight: 400; } /* ---------- STAR PLAYER ---------- */ .star-callout { background: var(--bg-dark); color: #f5efe1; padding: clamp(56px, 8vw, 96px) var(--pad-x); } .star-callout__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; } @media (min-width: 800px) { .star-callout__inner { grid-template-columns: auto 1fr auto; } } .star-callout__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--team-color); margin: 0 0 16px; } .star-callout__name { font-family: var(--font-serif); font-weight: 400; font-size: clamp(36px, 4.6vw, 60px); line-height: 1; letter-spacing: -0.02em; margin: 0 0 12px; } .star-callout__role { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245, 239, 225, 0.65); margin: 0 0 20px; } .star-callout__note { font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: rgba(245, 239, 225, 0.85); margin: 0; max-width: 46ch; } .star-callout__cta { align-self: center; } /* ---------- ROSTER TABLE ---------- */ .roster { background: var(--bg); padding: clamp(56px, 8vw, 96px) var(--pad-x); border-bottom: 1px solid rgba(14, 26, 43, 0.08); } .roster__head { max-width: 1200px; margin: 0 auto 40px; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; } .roster__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--team-color); display: block; margin-bottom: 12px; } .roster__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 44px); margin: 0; letter-spacing: -0.015em; } .roster__count { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--ink-muted); text-transform: uppercase; } .roster__table { max-width: 1200px; margin: 0 auto; border-collapse: collapse; width: 100%; font-family: var(--font-body); } .roster__table thead th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); font-weight: 500; text-align: left; padding: 12px 16px; border-bottom: 2px solid var(--team-color); } .roster__table thead th:last-child { text-align: right; } .roster__table tbody tr { border-bottom: 1px solid rgba(14, 26, 43, 0.08); transition: background 0.15s ease; } .roster__table tbody tr:hover { background: color-mix(in srgb, var(--team-color) 6%, transparent); } .roster__table tbody tr.roster__row--captain { background: color-mix(in srgb, var(--team-color) 4%, transparent); } .roster__table tbody td { padding: 14px 16px; font-size: 15px; vertical-align: middle; } .roster__num { font-family: var(--font-mono); font-weight: 700; color: var(--team-color); width: 60px; font-size: 16px; } .roster__name a { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s ease; font-weight: 500; } .roster__name a:hover { border-bottom-color: var(--team-color); } .roster__name .no-profile { color: var(--ink); font-weight: 500; } .roster__role { color: var(--ink-muted); font-size: 14px; font-family: var(--font-mono); letter-spacing: 0.02em; } .roster__hometown { color: var(--ink-muted); font-size: 14px; } .roster__age { text-align: right; font-family: var(--font-mono); color: var(--ink); } .roster__cap { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; padding: 2px 6px; background: var(--team-color); color: var(--team-ink); border-radius: 3px; margin-left: 8px; vertical-align: middle; } /* Responsive roster — collapse role and hometown on small screens */ @media (max-width: 640px) { .roster__table .col-role, .roster__table .col-age { display: none; } } /* ---------- DOUBLES PAIRINGS ---------- */ .doubles { background: var(--bg); padding: clamp(48px, 6vw, 80px) var(--pad-x); border-bottom: 1px solid rgba(14, 26, 43, 0.08); } .doubles__head { max-width: 1200px; margin: 0 auto 32px; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; } .doubles__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--team-color); display: block; margin-bottom: 12px; } .doubles__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 3vw, 38px); margin: 0; letter-spacing: -0.015em; } .doubles__note { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--ink-muted); text-transform: uppercase; } .doubles__list { max-width: 1200px; margin: 0 auto; list-style: none; padding: 0; display: grid; gap: 12px; } .doubles__row { display: grid; grid-template-columns: 72px 1fr 32px 1fr; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-left: 3px solid var(--team-color); background: color-mix(in srgb, var(--team-color) 4%, transparent); transition: background 0.15s ease; font-family: var(--font-body); font-size: 15px; } .doubles__row:hover { background: color-mix(in srgb, var(--team-color) 10%, transparent); } .doubles__tag { font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--team-color); } .doubles__front, .doubles__back { display: flex; flex-direction: column; gap: 2px; } .doubles__front a, .doubles__back a { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s ease; font-weight: 500; font-size: 15px; } .doubles__front a:hover, .doubles__back a:hover { border-bottom-color: var(--team-color); } .doubles__role { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } .doubles__and { font-family: var(--font-serif); color: var(--ink-muted); text-align: center; font-size: 18px; } @media (max-width: 640px) { .doubles__row { grid-template-columns: 56px 1fr; gap: 8px 12px; } .doubles__and { display: none; } .doubles__front, .doubles__back { grid-column: 2; } .doubles__tag { grid-row: span 2; align-self: start; padding-top: 4px; } } /* ---------- SEASON — RECENT + UPCOMING ---------- */ .team-season { background: var(--bg); padding: clamp(56px, 8vw, 96px) var(--pad-x); border-bottom: 1px solid rgba(14, 26, 43, 0.08); } .team-season__grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: clamp(32px, 4vw, 64px); } @media (min-width: 800px) { .team-season__grid { grid-template-columns: 1fr 1fr; } } .season-block__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--team-color); margin: 0 0 12px; } .season-block__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.01em; margin: 0 0 28px; } .season-block__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; } .season-block__item { display: grid; grid-template-columns: 88px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid rgba(14, 26, 43, 0.08); } .season-block__item:first-child { padding-top: 0; border-top: none; } .season-block__date { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); padding-top: 4px; } .season-block__body strong { display: block; font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--ink); margin-bottom: 4px; } .season-block__body span { display: block; font-family: var(--font-body); font-size: 14px; color: var(--ink-muted); line-height: 1.5; } .season-block__item--win { border-left: 3px solid var(--team-color); padding-left: 16px; } .season-block__item--loss { border-left: 3px solid transparent; padding-left: 16px; } /* ---------- CTA BAND ---------- */ .team-cta { background: var(--team-color); color: var(--team-ink); padding: clamp(48px, 6vw, 80px) var(--pad-x); text-align: center; } .team-cta[data-ink="dark"] { color: #0e1a2b; } .team-cta__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.75; margin: 0 0 12px; } .team-cta__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 32px; max-width: 26ch; margin-left: auto; margin-right: auto; } .team-cta__buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .team-cta .btn--primary { background: var(--bg); color: var(--team-color); border-color: transparent; } .team-cta[data-ink="dark"] .btn--primary { background: #0e1a2b; color: #f5efe1; } .team-cta .btn--ghost { border-color: currentColor; color: currentColor; } /* ---------- BREADCRUMB ---------- */ .team-crumb { padding: 24px var(--pad-x) 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } .team-crumb a { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; } .team-crumb a:hover { border-bottom-color: var(--team-color); } .team-crumb .sep { margin: 0 12px; opacity: 0.4; } /* ============================================================== FRONTON AFTER DARK — TEAM PAGE OVERRIDES Every team page is obsidian primary with team color as accent. ============================================================== */ /* Team index — teams-cover */ .page-team-index { background: #0a0b0d !important; color: #f4efe1 !important; } .page-team-index .teams-cover { border-bottom: 1px solid #23252c !important; } .page-team-index .teams-cover__eyebrow { color: #c9a24a !important; font-family: "JetBrains Mono", monospace; font-weight: 700; letter-spacing: 0.24em; } .page-team-index .teams-cover h1 { font-family: "Anton", sans-serif !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: -0.005em !important; color: #f4efe1 !important; font-size: clamp(48px, 8.5vw, 128px) !important; line-height: 0.9 !important; } .page-team-index .teams-cover__lede { color: #d6cfba !important; } /* Team tile grid */ .page-team-index .team-grid { background: #23252c !important; border-color: #23252c !important; } .page-team-index .team-tile { background: #101115 !important; color: #f4efe1 !important; border-color: #23252c !important; } .page-team-index .team-tile:hover { background: color-mix(in srgb, var(--tile-color, #c9a24a) 12%, #101115) !important; } .page-team-index .team-tile__bar { background: var(--tile-color, #c9a24a) !important; height: 3px !important; } .page-team-index .team-tile__eyebrow { color: #c9a24a !important; font-family: "JetBrains Mono", monospace; letter-spacing: 0.20em; font-weight: 700; font-size: 11px; } .page-team-index .team-tile__name { color: var(--tile-color, #f4efe1) !important; font-family: "Anton", sans-serif !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: 0.005em !important; font-size: clamp(40px, 4.5vw, 68px) !important; line-height: 0.95 !important; } .page-team-index .team-tile__tag { color: #d6cfba !important; font-family: "Fraunces", serif; font-style: italic; font-weight: 300; } .page-team-index .team-tile__meta strong { color: #f4efe1 !important; font-family: "JetBrains Mono", monospace; } .page-team-index .team-tile__meta span { color: #8a8578 !important; font-family: "JetBrains Mono", monospace; } .page-team-index .team-tile__cta { color: #c9a24a !important; font-family: "JetBrains Mono", monospace; letter-spacing: 0.20em; font-weight: 700; } /* CTA strip at bottom */ .page-team-index .teams-cta { background: #06070a !important; border-top: 1px solid #23252c !important; } .page-team-index .teams-cta__eyebrow { color: #c9a24a !important; } .page-team-index .teams-cta h2 { color: #f4efe1 !important; font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; } /* Team detail page */ .page-team { background: #0a0b0d !important; color: #f4efe1 !important; } .page-team .team-hero { background: #06070a !important; color: #f4efe1 !important; position: relative; overflow: hidden; } .page-team .team-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, color-mix(in srgb, var(--team-color) 22%, transparent) 0%, transparent 55%); pointer-events: none; z-index: 0; } .page-team .team-hero > * { position: relative; z-index: 1; } .page-team .team-hero__eyebrow { color: #c9a24a !important; font-family: "JetBrains Mono", monospace; letter-spacing: 0.22em; font-weight: 700; } .page-team .team-hero__eyebrow .dot { background: var(--team-color) !important; } .page-team .team-hero h1 { color: var(--team-color) !important; font-family: "Anton", sans-serif !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: -0.005em !important; font-size: clamp(64px, 12vw, 200px) !important; line-height: 0.85 !important; text-shadow: 0 2px 40px rgba(0, 0, 0, 0.6); } .page-team .team-hero__tag { color: #d6cfba !important; font-family: "Fraunces", serif; font-style: italic; font-weight: 300; } .page-team .team-hero__stats { border-top: 1px solid #33363f !important; } .page-team .team-hero__stat span { color: #c9a24a !important; font-family: "JetBrains Mono", monospace; letter-spacing: 0.14em; font-weight: 700; font-size: 11px; text-transform: uppercase; } .page-team .team-hero__stat strong { color: #f4efe1 !important; font-family: "Anton", sans-serif !important; font-weight: 400 !important; text-transform: uppercase !important; font-size: clamp(14px, 1.3vw, 18px) !important; line-height: 1.15 !important; overflow-wrap: anywhere !important; word-break: break-word !important; white-space: normal !important; hyphens: auto !important; max-width: 100% !important; } .page-team .team-hero[data-ink="dark"] { color: #f4efe1 !important; } .page-team .team-hero[data-ink="dark"] h1 { color: var(--team-color) !important; } .page-team .team-hero[data-ink="dark"] .team-hero__stats { border-top-color: #33363f !important; } /* Team image treatment — remove the cream studio backdrop */ .page-team .team-hero__image { border: 1px solid #33363f; overflow: hidden; } .page-team .team-hero__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.35) 100%); } /* Team facts strip — was full-team-color band, now obsidian panel */ .page-team .team-facts, .page-team .team-vitals, .page-team .team-info { background: #101115 !important; color: #f4efe1 !important; border-top: 1px solid #23252c; border-bottom: 1px solid #23252c; } .page-team .team-facts dt, .page-team .team-vitals dt { color: #c9a24a !important; font-family: "JetBrains Mono", monospace; letter-spacing: 0.20em; font-weight: 700; font-size: 11px; text-transform: uppercase; } .page-team .team-facts dd, .page-team .team-vitals dd { color: #f4efe1 !important; } .page-team .team-facts strong, .page-team .team-vitals strong { color: #f4efe1 !important; font-weight: 600; } /* Team crest block (the "CHG" letters) */ .page-team .team-crest, .page-team .crest { background: var(--team-color) !important; color: #06070a !important; } .page-team .team-crest__mark, .page-team .crest__mark { font-family: "Anton", sans-serif !important; font-weight: 400 !important; color: #06070a !important; text-shadow: 0 2px 20px rgba(0,0,0,0.15); } /* Story section */ .page-team .team-story, .page-team .team-narrative { background: #0a0b0d !important; border-top: 1px solid #23252c; } .page-team .team-story__eyebrow, .page-team .team-narrative .eyebrow { color: #c9a24a !important; } .page-team .team-story h2, .page-team .team-narrative h2 { color: #f4efe1 !important; font-family: "Anton", sans-serif !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: -0.005em; } .page-team .team-story h2::first-letter { color: var(--team-color) !important; } .page-team .team-narrative p, .page-team .team-story p { color: #d6cfba !important; } .page-team .team-narrative strong, .page-team .team-story strong { color: #f4efe1 !important; } .page-team .team-narrative em, .page-team .team-story em { color: var(--team-color) !important; font-family: "Fraunces", serif; font-style: italic; } /* Player callout — captain feature */ .page-team .team-captain, .page-team .captain-card { background: #101115 !important; border: 1px solid #23252c !important; border-left: 2px solid var(--team-color) !important; border-radius: 0 !important; } .page-team .team-captain__eyebrow, .page-team .captain-card .eyebrow { color: var(--team-color) !important; font-family: "JetBrains Mono", monospace; letter-spacing: 0.22em; font-weight: 700; } .page-team .team-captain h3, .page-team .captain-card h3 { color: #f4efe1 !important; font-family: "Anton", sans-serif !important; font-weight: 400 !important; text-transform: uppercase !important; } .page-team .team-captain p, .page-team .captain-card p { color: #d6cfba !important; } .page-team .team-captain .link, .page-team .captain-card .link { color: var(--team-color) !important; font-family: "JetBrains Mono", monospace; letter-spacing: 0.20em; font-weight: 700; } /* Roster grid on team page */ .page-team .roster, .page-team .team-roster { background: #0a0b0d !important; border-top: 1px solid #23252c; } .page-team .roster h2, .page-team .team-roster h2 { color: #f4efe1 !important; font-family: "Anton", sans-serif !important; font-weight: 400 !important; text-transform: uppercase !important; } .page-team .roster table, .page-team .team-roster table { background: #101115; border: 1px solid #23252c; } .page-team .roster th, .page-team .team-roster th { color: #c9a24a !important; font-family: "JetBrains Mono", monospace; letter-spacing: 0.20em; font-weight: 700; font-size: 10px; border-color: #33363f !important; } .page-team .roster td, .page-team .team-roster td { color: #f4efe1 !important; border-color: #23252c !important; } .page-team .roster tbody tr:hover, .page-team .team-roster tbody tr:hover { background: rgba(201, 162, 74, 0.08); } /* Breadcrumbs */ .page-team .breadcrumbs, .page-team .breadcrumb, .page-team-index .breadcrumbs, .page-team-index .breadcrumb { color: #8a8578 !important; font-family: "JetBrains Mono", monospace; letter-spacing: 0.14em; font-size: 11px; text-transform: uppercase; } .page-team .breadcrumbs a, .page-team .breadcrumb a { color: #c9a24a !important; } /* Any remaining red → brass (unless it's an intentional CTA) */ .page-team .btn--red, .page-team .btn--primary { background: #D8202A !important; color: #ffffff !important; border-radius: 0 !important; } .page-team .btn--outline, .page-team .btn--ghost { border-color: #33363f !important; color: #f4efe1 !important; border-radius: 0 !important; } /* Team footer bar */ .page-team .team-cta-bar { background: var(--team-color) !important; color: #06070a !important; border-radius: 0; } .page-team .team-cta-bar strong { color: #06070a !important; font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; } .page-team .team-cta-bar .btn { background: #06070a !important; color: var(--team-color) !important; border: 1px solid #06070a; } /* Mobile refinements for team hero stats */ .page-team .team-hero__stats { grid-template-columns: repeat(2, 1fr) !important; gap: 20px 24px; } @media (min-width: 720px) { .page-team .team-hero__stats { grid-template-columns: repeat(4, 1fr) !important; } } .page-team .team-hero__stat { min-width: 0; } .page-team .team-hero__stat strong { white-space: normal !important; } .page-team .team-hero__stat:has(strong) { min-width: 0; } /* ========================================================================== Fronton After Dark — city + team-name treatment (nike-tier polish) ========================================================================== */ /* City label on team-detail hero — sits above the massive team name */ .page-team .team-hero__city { font-family: "Barlow Condensed", "Anton", sans-serif !important; font-weight: 500 !important; font-size: clamp(20px, 2.2vw, 32px) !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #c9a24a !important; margin: 12px 0 4px !important; line-height: 1 !important; } /* City label on team-index tile — sits above tile name */ .team-tile__city { font-family: "Barlow Condensed", "Anton", sans-serif !important; font-weight: 500 !important; font-size: 18px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #c9a24a !important; margin: 8px 0 -2px !important; line-height: 1 !important; } /* Chargers hero H1 uses default purple team color — no rim needed */ /* Chargers tile on teams index — uses standard tile-color fill (purple), matching all other teams */ /* Mobile team hero stat tightening — 2×2 compact grid, no wrap */ @media (max-width: 719px) { .page-team .team-hero__stats { grid-template-columns: repeat(2, 1fr) !important; gap: 16px 20px !important; padding-top: 20px !important; border-top: 1px solid #23252c; } .page-team .team-hero__stat { min-width: 0; padding: 0 !important; } .page-team .team-hero__stat span { font-size: 10px !important; letter-spacing: 0.16em !important; color: #c9a24a !important; font-family: "JetBrains Mono", monospace !important; font-weight: 700 !important; text-transform: uppercase !important; display: block; margin-bottom: 6px; } .page-team .team-hero__stat strong { font-family: "Anton", sans-serif !important; font-weight: 400 !important; font-size: clamp(24px, 7vw, 40px) !important; line-height: 1 !important; letter-spacing: -0.005em !important; color: #f4efe1 !important; display: block; max-width: 100%; overflow-wrap: break-word; word-break: keep-all; } /* Numeric records stay one line, letter-only streak labels can shrink */ .page-team .team-hero__stat:nth-child(4) strong { font-size: clamp(18px, 5vw, 30px) !important; } /* City label smaller on mobile */ .page-team .team-hero__city { font-size: 16px !important; margin: 8px 0 2px !important; } } /* Ensure team hero H1 fits mobile viewport */ @media (max-width: 719px) { .page-team .team-hero h1 { font-size: clamp(48px, 15vw, 88px) !important; line-height: 0.92 !important; max-width: 100%; overflow-wrap: break-word; word-break: keep-all; } .page-team .team-hero { padding-left: 20px !important; padding-right: 20px !important; } .page-team .team-hero__grid { grid-template-columns: 1fr !important; } .page-team .team-hero__image { margin-top: 24px; } .page-team .team-hero__image img { max-width: 100%; height: auto; } } /* Mobile eyebrow wrapping */ @media (max-width: 719px) { .page-team .team-hero__eyebrow { font-size: 10px !important; letter-spacing: 0.14em !important; line-height: 1.5 !important; white-space: normal !important; } .page-team .team-hero__eyebrow .dot { display: inline-block; margin: 0 8px; opacity: 0.5; } }