/* Hallmark · scope: APP-WIDE · designed-as-app * pre-emit critique: P5 H5 E4 S4 R5 V5 * DEFAULT-ON, APP-WIDE: every rule lives under `body.hallmark`, a class now set on EVERY * layout's via `body_theme_class` (ApplicationController::HALLMARK_UI). The token remap * re-skins all var()-driven chrome/components; the component + responsive layers below carry * the look onto the inner pages. * * TYPOGRAPHY — single typeface (Archivo) per the app-wide Archivo type system in * app/assets/stylesheets/typography.css. Display = Archivo 900, body = Archivo 400/500, * mono role = Archivo with tabular-nums. The prior Fraunces/IBM Plex/JetBrains stack was * retired when Archivo went app-wide; layout/colour identity (royal blue accent, gold * flourishes, oklch palette) stays intact. * * ONE-LINE REVERT: set ApplicationController::HALLMARK_UI = false (drops the body class * everywhere; this file stays imported but inert since all rules are scoped to body.hallmark). */ body.hallmark { /* Archivo for all three roles — semantic aliases kept so downstream selectors don't churn. */ --hh-display: var(--font-sans); --hh-body: var(--font-sans); --hh-mono: var(--font-sans); /* fresh palette — broadsheet after dark (cool / royal-blue editorial) */ --hh-paper: oklch(15% 0.015 258); --hh-paper-2: oklch(19% 0.018 258); --hh-paper-3: oklch(24% 0.020 258); --hh-ink: oklch(94% 0.010 255); --hh-ink-2: oklch(70% 0.018 255); --hh-rule: oklch(34% 0.016 258); --hh-accent: oklch(66% 0.160 255); --hh-accent-ink: oklch(18% 0.03 258); /* secondary accent (locked: gold) — warm editorial flourish: dateline, section numbers, league ranks, sidebar section eyebrows, BETA badge. Blue stays the dominant accent. */ --hh-accent-2: oklch(80% 0.13 85); /* teal — the Biff Command Centre's signature accent (≈ #00d4aa from the console). A third, page-scoped accent kept alongside blue + gold for the tipster console. */ --hh-teal: oklch(78% 0.13 175); --hh-teal-soft: color-mix(in oklab, var(--hh-teal) 15%, transparent); /* remap the layout's :root tokens → re-skins sidebar / top nav / cards (all var()-driven) */ --bg-primary: var(--hh-paper); --bg-secondary: var(--hh-paper-2); --bg-tertiary: var(--hh-paper-3); --bg-elevated: oklch(28% 0.022 258); --text-primary: var(--hh-ink); --text-secondary: var(--hh-ink-2); --text-muted: oklch(58% 0.016 255); --accent-primary: var(--hh-accent); --accent-orange: var(--hh-accent); /* additional token names used across the app (application.css / components / tailwind) */ --accent-blue: var(--hh-accent); --accent-blue-hover: oklch(73% 0.15 255); --bg-card: var(--hh-paper-2); --bg-card-hover: var(--hh-paper-3); --border-card: var(--hh-rule); --border-card-hover: oklch(44% 0.04 258); --border: var(--hh-rule); /* semantic signals — kept meaningful (win/loss/live), only lightly cool-tuned */ --accent-secondary: oklch(72% 0.15 155); /* green / win */ --accent-danger: oklch(64% 0.18 25); /* red / loss / live */ --accent-warning: oklch(80% 0.13 80); /* amber / draw */ --accent-purple: oklch(66% 0.14 290); --accent-gold: oklch(82% 0.12 85); --win: oklch(72% 0.15 155); --loss: oklch(64% 0.18 25); --draw: oklch(80% 0.13 80); font-family: var(--hh-body); color: var(--hh-ink); } body.hallmark .homepage { counter-reset: dept; font-family: var(--hh-body); } /* ── Masthead — broadsheet nameplate ────────────────────────────────── */ body.hallmark .hh-masthead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 4px double var(--hh-ink); padding-bottom: 12px; margin-bottom: 0; } body.hallmark .hh-wordmark { font-family: var(--hh-display); font-optical-sizing: auto; font-weight: 700; font-style: normal; letter-spacing: -0.01em; font-size: 40px; line-height: 0.9; color: var(--hh-ink); } body.hallmark .hh-wordmark .dot { color: var(--hh-accent); } body.hallmark .hh-kicker { font-family: var(--hh-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--hh-accent-2); white-space: nowrap; } /* ── Section tabs — mono small-caps with amber rule ─────────────────── */ body.hallmark .hero-state-selector { display: flex; gap: 28px; margin: 16px 0 24px; border-bottom: 1px solid var(--hh-rule); } body.hallmark .hero-state-btn { flex: 0 0 auto; text-align: left; background: transparent; border: 0; border-radius: 0; padding: 0 0 12px; font-family: var(--hh-mono); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--hh-ink-2); position: relative; } body.hallmark .hero-state-btn:hover { background: transparent; border: 0; color: var(--hh-ink); } body.hallmark .hero-state-btn.active { background: transparent; border: 0; color: var(--hh-ink); } body.hallmark .hero-state-btn.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--hh-accent); } /* ── Hero: Welcome — the lead story ─────────────────────────────────── */ body.hallmark .hero-welcome { background: var(--hh-paper); border: 1px solid var(--hh-rule); border-radius: 6px; padding: 56px 48px; } body.hallmark .hero-welcome::before, body.hallmark .hero-welcome::after { display: none; } /* drop the glossy glows — editorial is flat */ body.hallmark .welcome-title { /* Hero welcome: Archivo 600 (not the heavy 900) so it stays readable at large sizes without competing with the masthead's display weight. */ font-family: var(--hh-display); font-weight: 600; font-size: clamp(34px, 6vw + 6px, 68px); line-height: 1.05; letter-spacing: -0.02em; color: var(--hh-ink); overflow-wrap: anywhere; min-width: 0; } body.hallmark .welcome-title-orange { color: var(--hh-accent); font-style: normal; } body.hallmark .welcome-subtitle { font-family: var(--hh-body); color: var(--hh-ink-2); max-width: 60ch; margin-inline: auto; text-align: center; font-size: clamp(15px, 1.2vw + 12px, 18px); line-height: 1.6; } body.hallmark .welcome-subtitle strong { color: var(--hh-ink); font-weight: 600; } body.hallmark .welcome-btn { font-family: var(--hh-mono); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; border-radius: 2px; border: 1px solid var(--hh-rule); transition: background 0.15s ease, color 0.15s ease; } body.hallmark .welcome-btn-orange { background: var(--hh-accent); color: var(--hh-accent-ink); border-color: var(--hh-accent); } body.hallmark .welcome-btn-orange:hover { background: oklch(73% 0.15 255); } body.hallmark .welcome-btn-blue, body.hallmark .welcome-btn-dark { background: transparent; color: var(--hh-ink); border-color: var(--hh-rule); } body.hallmark .welcome-btn-blue:hover, body.hallmark .welcome-btn-dark:hover { background: var(--hh-paper-2); border-color: var(--hh-ink-2); } /* ── Hero: Live + Upcoming — match-report leads ─────────────────────── */ /* PRESERVE the live MM:SS clock markup/script — surfaces + type only. */ /* Fancy editorial backdrop — a layered blue→gold "mesh" over the deep paper (replaces the old crude 135deg purple + flat blue glow). Blue dominant, gold a whisper; low alpha so logos/VS/badge stay legible. The match rows are transparent so this shows through behind them. 6px to match Welcome. */ body.hallmark .hero-live, body.hallmark .hero-preview { background-color: var(--hh-paper); background-image: radial-gradient(140% 120% at 0% 0%, oklch(66% 0.16 255 / 0.20), transparent 52%), radial-gradient(120% 120% at 100% 100%, oklch(80% 0.13 85 / 0.10), transparent 52%), linear-gradient(160deg, var(--hh-paper-2) 0%, transparent 42%); border: 1px solid var(--hh-rule); border-radius: 6px; } /* Live leans a touch warmer — a faint ember echoing the live-red, layered under the blue bloom. */ body.hallmark .hero-live { background-image: radial-gradient(120% 120% at 100% 0%, oklch(62% 0.17 25 / 0.10), transparent 50%), radial-gradient(140% 120% at 0% 0%, oklch(66% 0.16 255 / 0.20), transparent 52%), radial-gradient(120% 120% at 100% 100%, oklch(80% 0.13 85 / 0.10), transparent 52%), linear-gradient(160deg, var(--hh-paper-2) 0%, transparent 42%); } /* Drop the leftover hard blue radial glow — the layered mesh above replaces it. */ body.hallmark .hero-live::before, body.hallmark .hero-preview::before { display: none; } body.hallmark .matchup { background: transparent !important; border-left: 0 !important; } body.hallmark .upcoming-games-grid .matchup + .matchup { border-top: 1px solid var(--hh-rule); } body.hallmark .hero-greeting { font-family: var(--hh-display); font-weight: 700; color: var(--hh-ink); } /* Team labels under the match emblems match the team-page LIVE window (sans body font), not the editorial serif — keeps the Upcoming/Live card cohesive. */ body.hallmark .matchup-team .team-name { font-family: var(--hh-body); font-weight: 700; color: var(--hh-ink); } body.hallmark .vs-text { font-family: var(--hh-mono); color: var(--hh-accent); background: oklch(66% 0.16 255 / 0.12); border-color: oklch(66% 0.16 255 / 0.4); } body.hallmark .team-logo-placeholder { background: oklch(66% 0.16 255 / 0.12); border-color: oklch(66% 0.16 255 / 0.35); } body.hallmark .match-league, body.hallmark .match-venue { font-family: var(--hh-mono); text-transform: uppercase; letter-spacing: 1px; } body.hallmark .match-datetime { font-family: var(--hh-mono); color: var(--hh-ink); font-variant-numeric: tabular-nums; } /* ── Hero: Top Biffs — editorial league table ───────────────────────── */ body.hallmark .hero-biffs { background: var(--hh-paper); border: 1px solid var(--hh-rule); border-radius: 6px; /* match the Welcome card */ } body.hallmark .hero-biffs::before, body.hallmark .hero-biffs::after { display: none; } body.hallmark .hero-biffs-intro-title { font-family: var(--hh-display); font-weight: 900; color: var(--hh-ink); } body.hallmark .hero-biffs-intro-subtitle { font-family: var(--hh-mono); text-transform: uppercase; letter-spacing: 1px; font-size: 12px; color: var(--hh-ink-2); } body.hallmark .hero-biff-card { background: var(--hh-paper-2); border: 1px solid var(--hh-rule); border-radius: 4px; } body.hallmark .hero-biff-card:hover { border-color: var(--hh-accent); box-shadow: none; transform: none; } body.hallmark .hero-biff-rank { background: none !important; color: var(--hh-accent-2); font-family: var(--hh-display); font-weight: 900; font-size: 22px; } body.hallmark .hero-biff-name { font-family: var(--hh-display); font-weight: 700; color: var(--hh-ink); } body.hallmark .hero-biff-specialty { font-family: var(--hh-mono); text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; color: var(--hh-ink-2); } body.hallmark .hero-biff-stat-value { font-family: var(--hh-mono); font-variant-numeric: tabular-nums; color: var(--hh-ink); } body.hallmark .hero-biff-stat-label { font-family: var(--hh-mono); text-transform: uppercase; letter-spacing: 0.5px; color: var(--hh-ink-2); } body.hallmark .hero-biff-streak { background: oklch(66% 0.16 255 / 0.18); color: var(--hh-accent); font-family: var(--hh-mono); } body.hallmark .hero-biffs-cta-text { font-family: var(--hh-body); color: var(--hh-ink-2); } body.hallmark .hero-biffs-btn-orange { background: var(--hh-accent); color: var(--hh-accent-ink); border-radius: 2px; font-family: var(--hh-mono); text-transform: uppercase; letter-spacing: 1px; font-size: 12px; } body.hallmark .hero-biffs-btn-orange:hover { background: oklch(73% 0.15 255); } body.hallmark .hero-biffs-btn-secondary { background: transparent; color: var(--hh-ink); border: 1px solid var(--hh-rule); border-radius: 2px; font-family: var(--hh-mono); text-transform: uppercase; letter-spacing: 1px; font-size: 12px; } /* ── Departments (the four cards → hairline broadsheet columns) ──────── */ body.hallmark .homepage-card { counter-increment: dept; background: var(--hh-paper); border: 1px solid var(--hh-rule); border-top: 3px solid var(--hh-ink); border-radius: 4px; } body.hallmark .card-header { border-bottom: 1px solid var(--hh-rule); padding-bottom: 12px; margin-bottom: 16px; } body.hallmark .card-title { font-family: var(--hh-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--hh-ink); } body.hallmark .card-title::before { content: counter(dept, decimal-leading-zero) " "; font-family: var(--hh-mono); font-weight: 500; font-size: 0.6em; color: var(--hh-accent-2); vertical-align: 2px; } body.hallmark .card-link { font-family: var(--hh-mono); text-transform: uppercase; letter-spacing: 1px; font-size: 11px; color: var(--hh-accent); } /* My Teams — hairline tiles */ body.hallmark .team-card { background: var(--hh-paper-2); border: 1px solid var(--hh-rule); border-radius: 4px; } body.hallmark .team-card:hover { border-color: var(--hh-accent); transform: none; } body.hallmark .team-card-placeholder { background: transparent; border: 1px dashed var(--hh-rule); } body.hallmark .add-icon, body.hallmark .add-text { color: var(--hh-accent); font-family: var(--hh-mono); } /* The Desk (AI) — editorial ask box + ruled prompt index */ body.hallmark .ai-search-bar { background: var(--hh-paper-2); border: 1px solid var(--hh-rule); border-radius: 4px; } body.hallmark .ai-search-placeholder { font-family: var(--hh-mono); color: var(--hh-ink-2); } body.hallmark .ai-feature-item { background: transparent; border: 0; border-bottom: 1px solid var(--hh-rule); border-radius: 0; padding: 12px 2px; } body.hallmark .ai-feature-item:last-child { border-bottom: 0; } body.hallmark .feature-text strong { font-family: var(--hh-display); font-weight: 600; color: var(--hh-ink); } body.hallmark .feature-text span { font-family: var(--hh-body); color: var(--hh-ink-2); } /* Your Roster (Players) — ruled roster list */ body.hallmark .player-row { border-bottom: 1px solid var(--hh-rule); } body.hallmark .player-name { font-family: var(--hh-display); font-weight: 600; color: var(--hh-ink); } body.hallmark .player-meta { font-family: var(--hh-mono); text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; color: var(--hh-ink-2); } body.hallmark .player-last { font-family: var(--hh-mono); text-transform: uppercase; letter-spacing: 1px; font-size: 11px; color: var(--hh-accent); } /* The Tip Sheet (Hot Tips) — tabular tip rows */ body.hallmark .tips-filter-note { font-family: var(--hh-mono); text-transform: uppercase; letter-spacing: 1px; font-size: 11px; color: var(--hh-ink-2); } body.hallmark .tip-card { background: transparent; border: 0; border-bottom: 1px solid var(--hh-rule); border-radius: 0; padding: 14px 2px; } body.hallmark .tip-biff-name { font-family: var(--hh-display); font-weight: 600; color: var(--hh-ink); } body.hallmark .tip-roi { font-family: var(--hh-mono); font-variant-numeric: tabular-nums; color: var(--hh-accent); } body.hallmark .tip-match { font-family: var(--hh-mono); text-transform: uppercase; letter-spacing: 0.5px; color: var(--hh-ink-2); } body.hallmark .tip-selection { font-family: var(--hh-display); font-weight: 600; color: var(--hh-ink); } body.hallmark .tip-time { font-family: var(--hh-mono); font-variant-numeric: tabular-nums; color: var(--hh-ink-2); } body.hallmark .empty-state { font-family: var(--hh-body); color: var(--hh-ink-2); } /* ── Chrome accents (sidebar/top-nav re-skinned via tokens; small type touches) ── */ body.hallmark .nav-queries .font-semibold { font-family: var(--hh-mono); font-variant-numeric: tabular-nums; } /* focus-visible: instant ring, never animated */ body.hallmark .hero-state-btn:focus-visible, body.hallmark .welcome-btn:focus-visible, body.hallmark .card-link:focus-visible { outline: 2px solid var(--hh-accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { body.hallmark * { transition: none !important; } } /* ── Mobile (Hallmark hard floor: 320 / 375 / 414 / 768) ─────────────── */ @media (max-width: 768px) { body.hallmark .hh-masthead { flex-direction: column; align-items: flex-start; gap: 4px; } body.hallmark .hh-wordmark { font-size: 32px; } body.hallmark .hero-state-selector { gap: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body.hallmark .hero-state-selector::-webkit-scrollbar { display: none; } body.hallmark .hero-state-btn { white-space: nowrap; } body.hallmark .hero-welcome { padding: 36px 22px; } } @media (max-width: 414px) { body.hallmark .welcome-btn { width: 100%; text-align: center; } } /* ══════════════════════════════════════════════════════════════════════════ APP-WIDE LAYER — carries the editorial look onto every inner page (dashboard, biffs, following, profile, onboarding, chat). Token remap above already recolours var()-driven surfaces; this adds the type system + a few component/responsive nets. Kept conservative so data-dense pages don't break. (Inline hardcoded colours are converted to tokens in the views; see the hex→token pass.) ══════════════════════════════════════════════════════════════════════════ */ /* Body copy → IBM Plex everywhere; reduce weight a touch for dark mode. */ body.hallmark { font-family: var(--hh-body); -webkit-font-smoothing: antialiased; } /* Headings & section titles → Fraunces editorial display. */ body.hallmark h1, body.hallmark h2, body.hallmark h3, body.hallmark .team-header-name, body.hallmark .card-title, body.hallmark .soccer-overview-header h3, body.hallmark .wc-card-head h3, body.hallmark .section-title, body.hallmark .biff-name, body.hallmark .page-title { font-family: var(--hh-display); font-optical-sizing: auto; letter-spacing: -0.01em; font-weight: 700; } /* Mono for small eyebrow/label/stat text & tabular numerics. */ body.hallmark .stat-label, body.hallmark .eyebrow, body.hallmark .meta-label, body.hallmark .team-tab-btn { font-family: var(--hh-mono); letter-spacing: 0.5px; } body.hallmark .stat-value, body.hallmark .tabular { font-variant-numeric: tabular-nums; } /* Links pick up the accent on inner pages. */ body.hallmark a:not(.btn):not(.welcome-btn):hover { color: var(--accent-primary); } /* Generic surfaces/rules for the class-based components (flat + hairline editorial). */ body.hallmark .glass-card, body.hallmark .soccer-overview-card, body.hallmark .wc-card { background: var(--bg-secondary); border: 1px solid var(--hh-rule); border-radius: 8px; backdrop-filter: none; box-shadow: none; } /* Active tab underline → accent (team dashboard tabs). */ body.hallmark .team-tab-btn.active-tab { color: var(--text-primary); } /* ── Responsive safety-net (Hallmark hard floors 320/375/414/768) ─────────── Keep team logos visible and stop common clipping on phones, app-wide. */ body.hallmark img[src*="logo"], body.hallmark .team-logo, body.hallmark .team-header-logo { object-fit: contain; flex-shrink: 0; } @media (max-width: 768px) { /* Any 2+ column grid collapses to a single column unless it already opts out. */ body.hallmark .dashboard-grid, body.hallmark .homepage-row-2, body.hallmark .overview-two-col { grid-template-columns: 1fr !important; } /* Opt-in wide-table wrapper scrolls horizontally instead of overflowing the viewport. */ body.hallmark .table-scroll { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Matchup/fixture logos: fluid floor so they never blow out a phone row. */ body.hallmark .matchup-team .team-logo { width: clamp(56px, 18vw, 96px) !important; height: clamp(56px, 18vw, 96px) !important; } } /* ══════════════════════════════════════════════════════════════════════════ CHROME — top-nav, sidebar & the team-page banner. These are styled with Tailwind default grays + CSS-file rules that bypass the tokens; this section pulls them into the editorial theme. (body.hallmark .x beats a bare .x utility on specificity, so no !important needed for the color overrides.) ══════════════════════════════════════════════════════════════════════════ */ /* Tailwind default gray text utilities → theme tokens (chrome nav + anywhere they leak in). */ body.hallmark .text-white { color: var(--text-primary); } body.hallmark .text-gray-300, body.hallmark .text-gray-400 { color: var(--text-secondary); } body.hallmark .text-gray-500, body.hallmark .text-gray-600 { color: var(--text-muted); } body.hallmark .hover\:text-white:hover { color: var(--text-primary); } body.hallmark .hover\:bg-gray-700:hover, body.hallmark .hover\:bg-gray-800:hover { background: var(--bg-tertiary); } /* Chrome recedes into the page "paper" — the nav is part of the sheet, delineated by hairlines (not a raised panel), so the content cards are the only floating elements. (!important to beat the inline background: var(--bg-secondary) on the partials.) */ body.hallmark header.fixed.top-0, body.hallmark .app-sidebar { background: var(--bg-primary) !important; } /* Top-nav: flat + hairline; editorial wordmark. */ body.hallmark header.fixed.top-0 { border-bottom: 1px solid var(--hh-rule); } body.hallmark .hh-nav-wordmark { font-family: var(--hh-display); font-weight: 900; letter-spacing: -0.01em; } body.hallmark .nav-queries .font-semibold, body.hallmark .nav-queries { font-family: var(--hh-mono); font-variant-numeric: tabular-nums; } /* Sidebar: hairline edge, mono section eyebrows, flat. */ body.hallmark .app-sidebar { border-right: 1px solid var(--hh-rule); } body.hallmark .app-sidebar .tracking-wider { font-family: var(--hh-mono); letter-spacing: 1.5px; } /* Sidebar sections → broadsheet cards: hairline box + bright top edge (same language as the dashboard .homepage-card) so each group reads as a clearly separated panel. Slightly lighter than the paper sidebar so the box stands out. */ body.hallmark .sidebar-section { background: var(--hh-paper); /* match the dashboard .homepage-card background */ border: 1px solid var(--hh-rule); border-top: 2px solid var(--hh-ink); border-radius: 8px; padding: 12px 8px; margin-bottom: 12px; } /* Team-page banner → editorial nameplate, tinted to the club's emblem colours. --team-c1 / --team-c2 are set inline by the view (see ApplicationHelper#team_banner_colors, which also drops a near-white secondary — half the league lists #FFFFFF and washing white over dark paper reads as grey haze, not a club colour). The SOLID RAIL is what makes the identity legible: the previous design relied purely on a 36%-alpha wash pooled in the corners, so navy clubs (Chelsea #034694, Spurs #132257) mixed to something indistinguishable from the default accent and the banner looked un-themed no matter which team you opened. The rail states the colour outright; the wash supports it. */ body.hallmark .team-header { background-color: var(--hh-paper-2); border: 1px solid var(--hh-rule); border-left: 4px solid var(--team-c1, var(--hh-accent)); border-radius: 6px; } /* The tint is gated on color-mix support. Unguarded, an unsupported browser (Safari < 16.4) drops the WHOLE background-image — every layer — leaving a flat banner identical to the page behind it. Outside this block the rail and paper still carry the design. */ @supports (background: color-mix(in oklab, red, blue)) { body.hallmark .team-header { background-image: /* Primary sweeps out of the rail across the nameplate, rather than pooling in a corner. */ linear-gradient(100deg, color-mix(in oklab, var(--team-c1, var(--hh-accent)) 58%, transparent) 0%, color-mix(in oklab, var(--team-c1, var(--hh-accent)) 24%, transparent) 40%, transparent 74%), /* Secondary answers it from the far corner. */ radial-gradient(90% 190% at 100% 115%, color-mix(in oklab, var(--team-c2, var(--hh-accent-2)) 30%, transparent), transparent 68%); } } /* Stats → editorial scoreboard: hairline dividers between Position / Points / GD. Number colours stay semantic (green / red / white) — only the layout changes. */ body.hallmark .team-header-stats { gap: 0 !important; } body.hallmark .team-header-stats > div { padding: 0 22px; } body.hallmark .team-header-stats > div + div { border-left: 1px solid var(--hh-rule); } @media (max-width: 768px) { body.hallmark .team-header-stats > div { padding: 0 10px; } /* keep the dividers, avoid overflow on phones */ } /* ══════════════════════════════════════════════════════════════════════════ PAGE EDITORIAL LAYER — Profile / Leaderboard / Directory / Following. Brings these pages to the team-dashboard voice: flat hairline cards on the receding paper, Fraunces titles, mono/gold eyebrows, tight radii. Scoped to body.hallmark.pg-* (set via content_for :body_class) so there are no global side-effects. Semantic colours (win/loss/pending, rank medals) are untouched. `!important` only where it must beat an inline style or a Tailwind utility. ══════════════════════════════════════════════════════════════════════════ */ /* ── Profile ─────────────────────────────────────────────────────────────── */ /* Cards: Tailwind gray → editorial navy hairline card. */ body.hallmark.pg-profile .bg-gray-800 { background: var(--bg-secondary) !important; border: 1px solid var(--hh-rule); border-radius: 10px !important; box-shadow: none; } /* List rows (teams / players): subtle hairline tiles. */ body.hallmark.pg-profile .bg-gray-700 { background: var(--bg-tertiary) !important; border: 1px solid var(--hh-rule); border-radius: 8px !important; } /* "+ Add" buttons → accent. */ body.hallmark.pg-profile .bg-blue-600 { background: var(--accent-primary) !important; } body.hallmark.pg-profile .bg-blue-600:hover { background: var(--accent-blue-hover) !important; } /* ── Leaderboard ─────────────────────────────────────────────────────────── */ /* Table shell + segmented filters → flat hairline, tighter radius. Applies on both the Leaderboard and the Directory (which now reuses the same table). */ body.hallmark.pg-leaderboard .rounded-2xl, body.hallmark.pg-directory .rounded-2xl { border-radius: 10px !important; border-color: var(--hh-rule) !important; } body.hallmark.pg-leaderboard .rounded-xl { border-radius: 8px !important; } body.hallmark.pg-leaderboard .lb-header, body.hallmark.pg-directory .lb-header { font-family: var(--hh-mono); letter-spacing: 1px; background: var(--bg-secondary) !important; } body.hallmark.pg-leaderboard .lb-header, body.hallmark.pg-leaderboard .lb-row, body.hallmark.pg-directory .lb-header, body.hallmark.pg-directory .lb-row { border-bottom-color: var(--hh-rule) !important; } /* ── Directory ───────────────────────────────────────────────────────────── */ body.hallmark.pg-directory #dir-list, body.hallmark.pg-directory .dir-featured-card { border-radius: 10px !important; border-color: var(--hh-rule) !important; } body.hallmark.pg-directory .dir-biff-row { border-bottom-color: var(--hh-rule) !important; } /* Section eyebrows (the small uppercase

s "Featured" / "All Biffs") → mono + gold. / body.hallmark.pg-directory h2 { font-family: var(--hh-mono) !important; color: var(--hh-accent-2) !important; letter-spacing: 1px; } / Sport filter is a segmented control (matches the leaderboard) — styled inline; no per-pill border. / body.hallmark.pg-directory #dir-search { border-radius: 8px !important; border-color: var(--hh-rule) !important; } / ── Following ───────────────────────────────────────────────────────────── / / Biff filter tabs + tip cards → editorial. / body.hallmark.pg-following .biff-tab { font-family: var(--hh-mono); letter-spacing: 0.5px; } body.hallmark.pg-following .tip-card { border-radius: 8px !important; } / Summary-strip eyebrows + section labels handled inline (mono/gold) in the view. / / ── Biff Command Centre ─────────────────────────────────────────────────── / / Hallmark · macrostructure: Stat-Led · tone: editorial-console · anchor hue: teal * The tipster console joins the editorial system: navy paper, Fraunces display, mono+gold * eyebrows + 01— section numbers, hairline tiles. Teal (--hh-teal) is the page's signature * accent (tabs / positive figures / avatar ring). Full styling lives in the view's scoped *