/* SEC Baseball — editorial sports almanac aesthetic. Cream + deep ink + NCAA-blue accent; serif display, mono numbers, sans UI. */ :root { --bg: #f3efe6; --bg-2: #ebe6d9; --paper: #fbf9f4; --ink: #0f1820; --ink-2: #2c3a45; --muted: #74808a; --line: rgba(15, 24, 32, 0.12); --line-2: rgba(15, 24, 32, 0.22); --hover: rgba(15, 24, 32, 0.04); --accent: #0033a0; /* NCAA blue — primary accent */ --accent-2: #00256f; --win: oklch(0.5 0.12 145); --loss: oklch(0.5 0.13 30); --ncaa-blue: var(--accent); /* ranking chip tracks the primary accent */ --font-serif: "DM Serif Display", "Big Caslon", "Hoefler Text", Georgia, serif; --font-sans: "Inter Tight", "Inter", "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; --radius: 4px; } /* Dark mode — warm darks to keep the almanac feel; just overrides the palette vars, since the whole UI is built on them. Toggled via [data-theme] on . */ :root[data-theme="dark"] { --bg: #15171a; --bg-2: #1d2024; --paper: #202529; --ink: #ece7db; --ink-2: #c4c9ce; --muted: #8b949d; --line: rgba(255, 255, 255, 0.13); --line-2: rgba(255, 255, 255, 0.26); --hover: rgba(255, 255, 255, 0.06); --accent: #3d7be0; /* brighter NCAA blue for the dark bg */ --accent-2: #2f63c0; --win: oklch(0.72 0.14 145); --loss: oklch(0.7 0.16 30); /* --ncaa-blue inherits var(--accent) from :root, so it follows this too */ } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } a { color: inherit; text-decoration: none; } .app { min-height: 100vh; display: flex; flex-direction: column; } .container { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 28px 32px 64px; } /* ─── Topbar ─── */ .topbar { display: flex; align-items: center; gap: 32px; padding: 14px 32px; background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(8px); } .topbar__brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-serif); font-size: 22px; letter-spacing: -0.01em; } .topbar__mark { color: var(--accent); font-size: 18px; transform: translateY(-1px); } .topbar__title { font-weight: 400; } .topbar__title-thin { color: var(--muted); font-style: italic; font-size: 18px; } .topbar__nav { display: flex; gap: 24px; font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; font-weight: 500; } .topbar__link { cursor: pointer; padding: 4px 0; border-bottom: 2px solid transparent; transition: 120ms; } .topbar__link--active { border-bottom-color: var(--accent); } .topbar__link:hover { color: var(--ink); } .topbar__right { margin-left: auto; display: flex; align-items: center; gap: 16px; } .topbar__date { font-size: 11px; letter-spacing: 0.12em; color: var(--muted); } .topbar__theme { width: 30px; height: 30px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; line-height: 1; color: var(--ink-2); transition: 120ms; } .topbar__theme:hover { background: var(--hover); border-color: var(--line-2); color: var(--accent); } /* ─── Display type ─── */ .display { font-family: var(--font-serif); font-weight: 400; font-size: 64px; line-height: 0.95; letter-spacing: -0.02em; margin: 4px 0 8px; } .eyebrow { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; } .eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; display: inline-block; } .muted { color: var(--muted); } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .bold { font-weight: 700; } .small { font-size: 12px; } /* ─── Monogram ─── */ .monogram { display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.04em; flex: 0 0 auto; position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); } .monogram span { position: relative; z-index: 1; } .monogram--logo { background: transparent; box-shadow: none; padding: 2px; } .monogram--logo img { width: 100%; height: 100%; object-fit: contain; display: block; } /* ─── Loading / empty states ─── */ .loading-block { padding: 48px 16px; text-align: center; color: var(--muted); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; } /* ─── Rank chip ─── */ .rank-chip { display: inline-flex; align-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 11px; color: var(--ncaa-blue); letter-spacing: 0.02em; line-height: 1.4; } .rank-sm { font-size: 10px; } .rank-md { font-size: 11px; } .rank-lg { font-size: 13px; } .rank-unranked { color: var(--muted); font-weight: 400; } /* ─── Standings ─── */ .standings__header { margin-bottom: 28px; } .standings__sub { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); margin-top: 4px; } .dot { opacity: 0.6; } .standings__legend { display: flex; gap: 28px; padding: 12px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px; font-size: 12px; color: var(--muted); } .legend-item { display: flex; align-items: center; gap: 8px; } .legend-streak { display: inline-block; font-family: var(--font-mono); font-weight: 600; font-size: 11px; padding: 1px 5px; border-radius: 2px; letter-spacing: 0.02em; } .legend-streak.win { color: var(--win); background: oklch(0.5 0.12 145 / 0.12); } .legend-streak.loss { color: var(--loss); background: oklch(0.5 0.13 30 / 0.10); } .table-wrap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .stand-table, .sched-table, .box-table { width: 100%; border-collapse: collapse; font-size: 14px; } .th { text-align: left; font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--bg-2); cursor: default; user-select: none; } .th--right { text-align: right; } .th--left { text-align: left; } .stand-table .th { cursor: pointer; } .stand-table .th:hover { color: var(--ink); } .th--active { color: var(--ink) !important; } .th__sort { color: var(--accent); } .td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; } .td--right { text-align: right; } .td--pos { font-family: var(--font-mono); color: var(--muted); font-size: 12px; width: 36px; } .td--chev { color: var(--muted); width: 24px; font-size: 18px; transition: 150ms; } .row { cursor: pointer; transition: 100ms; } .row:hover { background: var(--hover); } .row:hover .td--chev { color: var(--accent); transform: translateX(2px); } .row:last-child .td { border-bottom: 0; } .team-cell { display: flex; align-items: center; gap: 12px; } .team-cell--sm { gap: 10px; } .team-cell__name { font-weight: 600; font-size: 15px; letter-spacing: -0.005em; display: flex; align-items: center; gap: 8px; } .team-cell__city { font-size: 12px; color: var(--muted); margin-top: 1px; } .standings__footer { margin-top: 16px; font-size: 12px; color: var(--muted); text-align: right; font-style: italic; } /* ─── Team Detail ─── */ .back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 16px; transition: 120ms; } .back-link:hover { color: var(--accent); } .back-link__arrow { font-size: 16px; } .team-hero { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; } .team-hero__band { height: 6px; background: var(--team-color); } .team-hero__inner { display: flex; gap: 28px; padding: 28px 32px 32px; align-items: center; } .team-hero__text { flex: 1; } .team-hero__kicker { display: flex; align-items: center; gap: 12px; font-size: 13px; margin-bottom: 6px; } .team-hero__name { font-size: 56px; margin: 0 0 18px; } .team-hero__stats { display: flex; gap: 40px; } .micro-stat__label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 2px; } .micro-stat__value { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; } .tabs { display: flex; align-items: flex-end; border-bottom: 1px solid var(--line); margin-bottom: 24px; gap: 4px; } .tab { padding: 12px 18px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: 120ms; } .tab:hover { color: var(--ink); } .tab--active { color: var(--ink); border-bottom-color: var(--accent); } .tab-spacer { flex: 1; } /* Segmented control in tab bar (Team / Players) */ .segmented { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line); border-radius: 3px; padding: 2px; margin-bottom: 8px; } .segmented__btn { padding: 6px 14px; font-size: 12px; letter-spacing: 0.04em; font-weight: 600; color: var(--muted); border-radius: 2px; transition: 100ms; } .segmented__btn:hover { color: var(--ink); } .segmented__btn--active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(15, 24, 32, 0.08); } /* Row holding the batting/pitching tabs (left) and Basic/Advanced toggle (right) */ .player-statsbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; border-bottom: 1px solid var(--line); } .player-statsbar .player-toggle { border-bottom: none; margin-bottom: 0; width: auto; } .player-statsbar .segmented { margin-bottom: 6px; flex: none; } .segmented--sm { padding: 2px; } .segmented--sm .segmented__btn { padding: 4px 12px; font-size: 11px; } /* Player batting/pitching toggle */ .player-toggle { display: inline-flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--line); padding-bottom: 0; width: 100%; } .player-toggle__btn { padding: 10px 16px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: 120ms; } .player-toggle__btn:hover { color: var(--ink); } .player-toggle__btn--active { color: var(--ink); border-bottom-color: var(--accent); } .player-table { font-size: 13px; } .player-table .th { padding: 8px 8px; font-size: 10px; letter-spacing: 0.08em; } .player-table .td { padding: 8px 8px; } .player-table .th--sortable { cursor: pointer; } .player-table .th--sortable:hover { color: var(--ink); } /* Stat header help tooltip (advanced columns) */ .th-help { position: relative; border-bottom: 1px dotted var(--line-2); cursor: help; } .th-tip { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: 220px; padding: 8px 10px; background: var(--ink); color: var(--bg); border-radius: 4px; font-family: var(--font-sans); font-weight: 400; font-size: 11px; line-height: 1.45; letter-spacing: 0; text-transform: none; text-align: left; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28); opacity: 0; visibility: hidden; transition: opacity 120ms; pointer-events: none; } .th-tip::after { content: ""; position: absolute; bottom: 100%; right: 14px; border: 5px solid transparent; border-bottom-color: var(--ink); } .th-help:hover .th-tip, .th-help:focus .th-tip { opacity: 1; visibility: visible; } .player-name { font-weight: 600; } .player-note { margin-top: 10px; } /* ─── Schedule (continuous list) ─── */ .sched-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 18px; overflow: hidden; } .sched-summary__item { background: var(--paper); padding: 12px 16px; } .sched-summary__label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 2px; } .sched-summary__value { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; } .sched-list { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .sched-row { display: grid; grid-template-columns: 90px 32px minmax(0, 1fr) 160px 24px; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); transition: 100ms; cursor: pointer; } .sched-row:last-child { border-bottom: 0; } .sched-row:hover { background: var(--hover); } .sched-row--upcoming { cursor: default; background: var(--bg-2); } .sched-row--upcoming:hover { background: var(--bg-2); } .sched-row__date {} .sched-row__date-main { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; } .sched-row__date-sub { font-size: 10px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; } .sched-row__vs {} .sched-row__vs-text { font-size: 11px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; } .sched-row__opp { display: flex; align-items: center; gap: 12px; min-width: 0; } .sched-row__opp-text { min-width: 0; } .sched-row__opp-name { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sched-row__opp-conf { font-size: 11px; color: var(--muted); margin-top: 1px; } .sched-row__result { display: flex; align-items: center; gap: 12px; justify-content: flex-end; } .sched-row__score { font-size: 15px; font-weight: 600; min-width: 50px; text-align: right; } .sched-row__upcoming-pill { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; border: 1px dashed var(--line-2); border-radius: 999px; color: var(--muted); font-weight: 600; } .sched-row__chev { color: var(--muted); font-size: 18px; text-align: right; transition: 120ms; } .sched-row:not(.sched-row--upcoming):hover .sched-row__chev { color: var(--accent); transform: translateX(2px); } .sched-divider { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: linear-gradient(to right, var(--bg-2), var(--paper) 50%, var(--bg-2)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .sched-divider__line { flex: 1; height: 1px; background: var(--line-2); } .sched-divider__label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 700; white-space: nowrap; } .sched-divider--phase { padding: 14px 18px; } .sched-divider--phase .sched-divider__label { font-size: 12px; letter-spacing: 0.2em; } .result-chip { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 2px; font-family: var(--font-mono); font-weight: 700; font-size: 11px; } .result-chip.win { background: var(--win); color: white; } .result-chip.loss { background: var(--loss); color: white; } /* ─── Scores (daily scoreboard) ─── */ .scores__header { margin-bottom: 18px; } .scores__nav { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 20px; padding: 12px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); } .scores__arrow { font-size: 24px; line-height: 1; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; transition: 120ms; } .scores__arrow:hover:not(:disabled) { background: var(--hover); border-color: var(--line-2); color: var(--accent); } .scores__arrow:disabled { opacity: 0.3; cursor: default; } .scores__date-wrap { position: relative; text-align: center; min-width: 260px; } .scores__date-main { font-family: var(--font-serif); font-size: 24px; line-height: 1.1; } .scores__date-sub { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 3px; } /* The native