/** * NFL Analytics Textbook * Custom Stylesheet — "modern football data journal" * Bootstrap 5.3 customization. Identity: navy #003366 / blue #0066cc / amber #ffc107 * refined into a calm editorial system. Signature element: the chart-figure frame * with its amber "Data: nflverse" provenance tab. Everything else stays quiet. * * Per-page variation (pv): build_explainers.py stamps deterministic classes on * of each generated explainer page — pv-hero-{0..2} (hero composition), * pv-orn-{0..2} (h2 / figure-frame ornament), pv-a{0..4} (accent palette). * Pages without pv classes get the base (amber) system. */ /* ========================================== CSS Variables / Theme Colors ========================================== */ :root { /* Primary Colors */ --primary: #003366; --primary-hover: #002447; --secondary: #0066cc; --secondary-hover: #0052a3; --accent: #ffc107; --accent-hover: #e0a800; --accent-ink: #8a5a00; /* amber that passes AA on white (5.9:1) */ /* Editorial neutrals */ --ink: #16233a; /* body text — blue-black, 15.7:1 on white */ --paper: #ffffff; --surface: #f6f8fa; /* cool paper for panels */ --line: #dde4ee; /* hairline borders, blue-cast */ --navy-deep: #0a2138; /* dark end of the navy duotone */ /* Legacy variables referenced inline by the betting pages (were undefined — defining them here restores those hero backgrounds). Calm navy duotone. */ --nfl-blue: #0a2138; --nfl-light-blue: #003f7d; /* Semantic Colors */ --success: #28a745; --danger: #dc3545; --warning: #ffc107; --info: #17a2b8; /* Neutral Colors */ --light: #f6f8fa; --dark: #1a1a2e; --gray-100: #f6f8fa; --gray-200: #e9edf3; --gray-300: #dde4ee; --gray-400: #c3cdda; --gray-500: #8d99ab; --gray-600: #5b6472; --gray-700: #46536b; --gray-800: #2b3a52; --gray-900: #16233a; /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Spacing */ --section-padding: 4rem; --card-padding: 1.5rem; /* Borders */ --border-radius: 0.5rem; --border-radius-lg: 0.75rem; --border-color: #dde4ee; /* Shadows — low, cool, paper-like */ --shadow-sm: 0 1px 2px rgba(13, 27, 42, 0.06); --shadow: 0 0.5rem 1.25rem rgba(13, 27, 42, 0.10); --shadow-lg: 0 1rem 2.5rem rgba(13, 27, 42, 0.14); /* Transitions */ --transition: all 0.2s ease; /* Bootstrap bridge: recolor BS utility classes to the brand system (.bg-primary heroes, .text-primary, .bg-dark footer, .border, text-muted). */ --bs-primary: #003366; --bs-primary-rgb: 0, 51, 102; --bs-dark-rgb: 13, 27, 42; --bs-light-rgb: 246, 248, 250; --bs-body-color: #16233a; --bs-body-color-rgb: 22, 35, 58; --bs-secondary-color: rgba(22, 35, 58, 0.72); --bs-link-color: #0059b3; --bs-link-color-rgb: 0, 89, 179; --bs-link-hover-color: #003366; --bs-link-hover-color-rgb: 0, 51, 102; --bs-border-color: #dde4ee; /* Per-page accent (pv) defaults = the brand amber pair. --pv-accent is always AA on white; --pv-accent-bright is for the navy hero + dark mode. */ --pv-accent: #8a5a00; --pv-accent-bright: #ffc107; --pv-accent-soft: #fff7e0; } /* ========================================== pv accent variants (set on by the generator; all AA on white) ========================================== */ .pv-a0 { --pv-accent: #8a5a00; --pv-accent-bright: #ffc107; --pv-accent-soft: #fff7e0; } /* bronze/amber */ .pv-a1 { --pv-accent: #0059b3; --pv-accent-bright: #7cc0ff; --pv-accent-soft: #e8f1fb; } /* blue */ .pv-a2 { --pv-accent: #0d7377; --pv-accent-bright: #4fd1c5; --pv-accent-soft: #e3f4f3; } /* teal */ .pv-a3 { --pv-accent: #b02a37; --pv-accent-bright: #ff8fa3; --pv-accent-soft: #fbeaec; } /* crimson */ .pv-a4 { --pv-accent: #566171; --pv-accent-bright: #b6c2d2; --pv-accent-soft: #eef1f5; } /* slate */ /* ========================================== Base Styles ========================================== */ html { scroll-behavior: smooth; scroll-padding-top: 84px; /* sticky navbar clearance for anchor links */ } body { font-family: var(--font-sans); color: var(--ink); line-height: 1.7; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } main { flex: 1; } ::selection { background: #ffe08a; color: #16233a; } /* Visible keyboard focus, everywhere; amber on dark chrome */ :focus-visible { outline: 2px solid #0059b3; outline-offset: 2px; border-radius: 2px; } .navbar :focus-visible, .footer :focus-visible, .hero :focus-visible, .explainer-hero :focus-visible, .bg-primary :focus-visible, .bg-gradient-primary :focus-visible { outline-color: var(--accent); } :focus:not(:focus-visible) { outline: none; } /* Responsive images: prevent overflow and preserve aspect ratio (width/height attributes set intrinsic ratio to avoid CLS). */ img { max-width: 100%; height: auto; } /* ========================================== Typography — editorial scale, Inter 400–700 only (no faux weights) ========================================== */ h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--ink); margin-bottom: 1rem; letter-spacing: -0.01em; } h1 { font-size: 2.25rem; letter-spacing: -0.02em; } h2 { font-size: 1.65rem; } h3 { font-size: 1.3rem; } h4 { font-size: 1.1rem; } /* Headings on dark/navy surfaces inherit the context's light color instead of the ink default (heroes, navy card headers, betting-page heroes, footer). */ .text-white :is(h1, h2, h3, h4, h5, h6), .text-light :is(h1, h2, h3, h4, h5, h6), .hero :is(h1, h2, h3, h4, h5, h6), .hero-section :is(h1, h2, h3, h4, h5, h6), .explainer-hero :is(h1, h2, h3, h4, h5, h6), .bg-primary :is(h1, h2, h3, h4, h5, h6), .bg-dark :is(h1, h2, h3, h4, h5, h6), .bg-gradient-primary :is(h1, h2, h3, h4, h5, h6), .result-card :is(h1, h2, h3, h4, h5, h6) { color: inherit; } .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-weight: 700; letter-spacing: -0.02em; } .lead { font-size: 1.185rem; font-weight: 400; color: var(--gray-600); } /* Leads on dark surfaces keep their context's light color too */ .text-white .lead, .hero .lead, .hero-section .lead, .bg-primary .lead, .bg-gradient-primary .lead { color: inherit; } a { color: #0059b3; text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--primary); } /* Article links read as editorial underlines */ .article-col section a, .chapter-content a { text-decoration: underline; text-decoration-color: rgba(0, 89, 179, 0.35); text-underline-offset: 0.16em; } .article-col section a:hover, .chapter-content a:hover { text-decoration-color: currentColor; } /* Inline code: quiet slate chip, not Bootstrap pink */ :not(pre) > code { font-family: var(--font-mono); font-size: 0.85em; color: #0f4c81; background: #eef2f7; border-radius: 0.25rem; padding: 0.1em 0.35em; } /* Data is always tabular */ table, .stat-number, .stat-card .stat-value, .result-value, .decision-value, .control-value, .chapter-card .chapter-number { font-variant-numeric: tabular-nums lining-nums; } .opacity-90 { opacity: 0.9; } /* ========================================== Navigation Overrides — flat navy, no gradient ========================================== */ .navbar { background: var(--primary) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .navbar-brand { font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; } .navbar-brand .bi { color: var(--accent); } .nav-link { font-weight: 500; padding: 0.5rem 1rem !important; border-radius: var(--border-radius); transition: var(--transition); } .nav-link:hover, .nav-link.active { background: rgba(255, 255, 255, 0.08); } .dropdown-menu-dark { background: #0d1b2a; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: var(--shadow); } .dropdown-item:hover { background: rgba(255, 255, 255, 0.08); } .dropdown-menu-dark .dropdown-header { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8aa0b8; } /* ========================================== Hero Sections — quiet solid navy, one accent, no patterns ========================================== */ .hero { background: linear-gradient(168deg, var(--navy-deep) 0%, var(--primary) 68%, #06355e 100%); padding: 5rem 0; position: relative; overflow: hidden; border-bottom: 2px solid var(--accent); } .hero::before { content: none; /* retired the plus-sign SVG pattern */ } .hero .display-4 { font-weight: 700; letter-spacing: -0.02em; text-shadow: none; } /* Generic gradient-hero blocks (template + legacy pages), toned down */ .bg-gradient-primary { background: linear-gradient(170deg, var(--navy-deep) 0%, var(--primary) 75%); } /* --- Explainer hero (generator-emitted; base look = pages without pv classes) --- */ .explainer-hero { /* .bg-primary supplies the navy fill via --bs-primary-rgb; layer only a faint top wash for depth — deliberately not a "gradient hero". */ background-image: linear-gradient(180deg, rgba(7, 22, 40, 0.38), rgba(7, 22, 40, 0) 55%); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .explainer-hero .display-5 { font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.45rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.18; text-wrap: balance; max-width: 26em; } .explainer-hero .lead { font-size: 1.04rem; line-height: 1.65; color: #c9d5e6; max-width: 64ch; } .explainer-hero p.small { font-size: 0.8rem; color: #bccadd; } /* Breadcrumbs in the hero: quiet mono wayfinding */ .explainer-hero .breadcrumb-item { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.02em; } .explainer-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, 0.35); } /* Eyebrow ("Stat Explainer" badge): mono chip, accent-keyed */ .explainer-hero .badge.bg-info { background: transparent !important; color: var(--pv-accent-bright); border: 1px solid var(--pv-accent-bright); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.4em 0.65em 0.36em; border-radius: 0.25rem; } /* pv-hero-0 — "keyline": chip eyebrow + short accent rule under the H1 */ .pv-hero-0 .explainer-hero h1::after { content: ""; display: block; width: 76px; height: 3px; margin-top: 0.85rem; border-radius: 2px; background: var(--pv-accent-bright); } /* pv-hero-1 — "dash eyebrow": leading tick on the eyebrow, hairline under the breadcrumb, no H1 rule */ .pv-hero-1 .explainer-hero .badge.bg-info { border: 0; padding-left: 0; border-radius: 0; } .pv-hero-1 .explainer-hero .badge.bg-info::before { content: ""; display: inline-block; width: 26px; height: 2px; background: var(--pv-accent-bright); margin-right: 0.6rem; vertical-align: 0.24em; } .pv-hero-1 .explainer-hero .breadcrumb { border-bottom: 1px solid rgba(255, 255, 255, 0.14); padding-bottom: 0.7rem; margin-bottom: 1.1rem !important; } /* pv-hero-2 — "marginal rule": accent border along the headline block, bare mono eyebrow, breadcrumb untouched */ .pv-hero-2 .explainer-hero .col-lg-9 { border-left: 3px solid var(--pv-accent-bright); padding-left: 1.4rem; } .pv-hero-2 .explainer-hero .badge.bg-info { border: 0; padding: 0; border-radius: 0; } /* ========================================== Cards — hairline discipline, no hover hop ========================================== */ .card { border: 1px solid var(--line); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease; overflow: hidden; } .card:hover { box-shadow: var(--shadow); } .card-header { background: var(--surface); border-bottom: 1px solid var(--line); font-weight: 600; } .card-title { font-size: 1.2rem; font-weight: 700; color: var(--primary); } /* Explainer cards (hub + homepage section, generator-emitted) */ .explainer-card .badge.bg-info { background: var(--surface) !important; color: var(--gray-600); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.35em 0.55em 0.3em; } .explainer-card .card-title { font-size: 0.98rem; line-height: 1.4; } .explainer-card .card-title a { color: var(--ink); } .explainer-card:hover .card-title a { color: #0059b3; } .explainer-card .card-footer small { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; } /* Author bio (generator-emitted E-E-A-T block) */ .author-bio { border-left: 3px solid var(--pv-accent) !important; background: var(--surface) !important; } /* Tool Cards */ .tool-card { border-left: 4px solid var(--secondary); } .tool-card .tool-icon { width: 60px; height: 60px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .tool-card .tool-icon i { font-size: 1.5rem; color: var(--accent); } /* Team Cards */ .team-card { text-align: center; padding: 1.5rem 1rem; } .team-card .team-logo { width: 80px; height: 80px; object-fit: contain; margin-bottom: 1rem; } .team-card .team-name { font-weight: 600; color: var(--ink); } .team-card .team-record { font-size: 0.875rem; color: var(--gray-600); font-variant-numeric: tabular-nums; } /* Chapter Cards */ .chapter-card { border-left: 4px solid var(--secondary); } .chapter-card.completed { border-left-color: var(--success); } .chapter-card .chapter-number { font-size: 2rem; font-weight: 700; color: var(--gray-300); font-family: var(--font-mono); } .chapter-card .badge { font-size: 0.7rem; } /* ========================================== Signature element: the chart-figure frame + provenance tab Every explainer data chart sits in a paper frame whose header strip carries the real "Data: nflverse." citation as an accent-keyed mono tab. ========================================== */ .article-col .figure { position: relative; width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: 0.6rem; padding: 2.7rem 1.1rem 1rem; box-shadow: var(--shadow-sm); } .article-col .figure .figure-img { border-color: var(--line) !important; border-radius: 0.35rem; background: #fff; margin-bottom: 0.65rem; } .article-col .figure-caption { font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.6; color: var(--gray-600); max-width: 66ch; margin-left: auto; margin-right: auto; } /* The provenance tab: the citation itself, pinned in the frame's header strip */ .article-col .figure .figure-caption strong { position: absolute; top: 0.8rem; left: 0.9rem; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--pv-accent); background: var(--pv-accent-soft); border: 1px solid var(--pv-accent); border-radius: 0.3rem; padding: 0.36rem 0.6rem 0.3rem; white-space: nowrap; } /* Ornament variants — frame detail (pv-orn on ) */ .pv-orn-0 .article-col .figure::after { content: ""; position: absolute; pointer-events: none; top: -1px; left: -1px; width: 88px; height: 3px; border-radius: 2px 0 2px 0; background: var(--pv-accent); } .pv-orn-1 .article-col .figure::after { content: ""; position: absolute; pointer-events: none; top: -1px; bottom: -1px; left: -1px; width: 3px; border-radius: 2px; background: var(--pv-accent); } .pv-orn-2 .article-col .figure::after { content: ""; position: absolute; pointer-events: none; top: 6px; right: 6px; width: 14px; height: 14px; border-top: 2px solid var(--pv-accent); border-right: 2px solid var(--pv-accent); border-radius: 0 4px 0 0; } /* ========================================== Article typography — explainers (.article-col) + tutorials (.chapter-content) ========================================== */ .article-col { font-size: 1.0625rem; line-height: 1.75; } /* Measure: ~66–74ch for running text; tables/figures/asides keep full width */ .article-col section > p, .article-col section > ul, .article-col section > ol, .chapter-content > p, .chapter-content > ul, .chapter-content > ol, .chapter-content section > p, .chapter-content section > ul, .chapter-content section > ol { max-width: 70ch; } /* Section heading rhythm: air above, discipline below */ .article-col section > h2 { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.01em; margin-top: 0.4rem; margin-bottom: 1rem; text-wrap: balance; } .article-col section { margin-bottom: 2.75rem !important; /* refine .mb-5 rhythm */ } .chapter-content h2 { font-size: 1.5rem; margin-top: 2.6rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--line); } .chapter-content h3 { margin-top: 2rem; } /* Ornament variants — h2 accents (chart furniture: tick / rule / marker) */ .pv-orn-0 .article-col section > h2::before { content: ""; display: inline-block; width: 17px; height: 3px; border-radius: 2px; background: var(--pv-accent); margin-right: 0.55rem; vertical-align: 0.28em; } .pv-orn-1 .article-col section > h2 { padding-bottom: 0.55rem; background: linear-gradient(90deg, var(--pv-accent) 0 42px, var(--line) 42px) left bottom / 100% 1px no-repeat; } .pv-orn-2 .article-col section > h2::before { content: ""; display: inline-block; width: 9px; height: 9px; background: var(--pv-accent); transform: rotate(45deg); margin: 0 0.6rem 0.12em 0.15em; } /* Neutral asides pick up the page accent; semantic alerts stay semantic */ .article-col .alert { border-radius: 0.45rem; } .article-col .alert-secondary { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--pv-accent); color: inherit; } /* ========================================== Buttons — calm, no levitation ========================================== */ .btn { font-weight: 500; padding: 0.5rem 1.25rem; border-radius: var(--border-radius); transition: var(--transition); } .btn-primary { background: var(--primary); border-color: var(--primary); } .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); } .btn-secondary { background: var(--secondary); border-color: var(--secondary); } .btn-secondary:hover { background: var(--secondary-hover); border-color: var(--secondary-hover); } .btn-outline-primary { color: var(--primary); border-color: var(--primary); } .btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); } /* ========================================== Stats / Metrics ========================================== */ .stat-box { text-align: center; padding: 1.5rem; } .stat-number { display: block; font-size: 2.5rem; font-weight: 700; color: var(--primary); line-height: 1; letter-spacing: -0.02em; } .stat-label { display: block; font-size: 0.72rem; font-family: var(--font-mono); color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.09em; margin-top: 0.5rem; } .stat-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--border-radius); padding: 1.25rem; box-shadow: var(--shadow-sm); } .stat-card .stat-value { font-size: 1.75rem; font-weight: 700; color: var(--primary); } .stat-card .stat-label { font-size: 0.68rem; } .stat-card .stat-rank { font-size: 0.75rem; } /* ========================================== Code Blocks ========================================== */ pre { background: #282c34; border-radius: var(--border-radius); padding: 1rem; overflow-x: auto; position: relative; } pre code { font-family: var(--font-mono); font-size: 0.855rem; line-height: 1.55; } .code-block { position: relative; margin: 1.5rem 0; border-radius: var(--border-radius); box-shadow: var(--shadow-sm); } .code-block .code-header { background: #1f242c; padding: 0.5rem 1rem; border-radius: var(--border-radius) var(--border-radius) 0 0; display: flex; justify-content: space-between; align-items: center; } .code-block .code-header .code-lang { color: var(--gray-400); font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; } .code-block .code-copy-btn { background: transparent; border: 1px solid #454e5c; color: #aab4c2; padding: 0.25rem 0.75rem; font-size: 0.75rem; font-family: var(--font-mono); border-radius: 4px; cursor: pointer; transition: var(--transition); } .code-block .code-copy-btn:hover { background: var(--secondary); border-color: var(--secondary); color: white; } .code-block pre { margin: 0; border-radius: 0 0 var(--border-radius) var(--border-radius); } /* Code Tabs */ .code-tabs .nav-tabs { border-bottom: none; gap: 0.25rem; } .code-tabs .nav-link { background: var(--gray-200); border: none; border-radius: var(--border-radius) var(--border-radius) 0 0; color: var(--gray-700); font-size: 0.875rem; font-weight: 500; padding: 0.5rem 1rem; } .code-tabs .nav-link.active { background: #282c34; color: white; } /* ========================================== Progress Bar ========================================== */ .progress-container { background: var(--surface); padding: 1rem; border-radius: var(--border-radius); border: 1px solid var(--line); } .progress { height: 8px; border-radius: 4px; background: var(--gray-200); } .progress-bar { background: var(--secondary); border-radius: 4px; } /* ========================================== Sidebar ========================================== */ .sidebar-wrapper { background: var(--surface); min-height: calc(100vh - 60px); border-right: 1px solid var(--line); } .sidebar-sticky { position: sticky; top: 80px; padding: 1.5rem; max-height: calc(100vh - 100px); overflow-y: auto; } .sidebar-nav .nav-link { color: var(--gray-700); padding: 0.5rem 1rem; border-radius: var(--border-radius); font-size: 0.875rem; } .sidebar-nav .nav-link:hover { background: var(--gray-200); color: var(--primary); } .sidebar-nav .nav-link.active { background: var(--primary); color: white; } .sidebar-nav .nav-header { font-size: 0.68rem; font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray-500); padding: 0.5rem 1rem; margin-top: 1rem; } /* Explainer sidebar list */ .list-group-item { font-size: 0.875rem; } /* ========================================== Tables — journal style: mono headers, hairline rows, tabular numerals ========================================== */ .table-analytics { font-size: 0.875rem; } .table-analytics th { background: var(--surface); font-weight: 600; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.08em; } .table-analytics td { vertical-align: middle; } .table-analytics .team-cell { display: flex; align-items: center; gap: 0.5rem; } .table-analytics .team-cell img { width: 24px; height: 24px; } .article-col .table, .chapter-content .table { font-size: 0.9rem; --bs-table-striped-bg: rgba(13, 27, 42, 0.026); border-color: var(--line); margin: 1.25rem 0 1.75rem; } .article-col .table thead th, .chapter-content .table thead th { font-family: var(--font-mono); font-weight: 500; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--gray-600); border-bottom: 2px solid var(--ink); white-space: nowrap; } .article-col .table > :not(caption) > * > *, .chapter-content .table > :not(caption) > * > * { padding: 0.5rem 0.75rem; } /* ========================================== Forms / Tool Inputs ========================================== */ .tool-interface { background: var(--surface); border: 1px solid var(--line); border-radius: var(--border-radius); padding: 1.5rem; margin: 1rem 0; } .tool-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .tool-inputs label { display: block; font-weight: 500; margin-bottom: 0.25rem; font-size: 0.875rem; } .tool-inputs input, .tool-inputs select { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius); font-size: 1rem; } .tool-inputs input:focus, .tool-inputs select:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12); } .tool-result { background: var(--paper); border: 1px solid var(--line); border-radius: var(--border-radius); padding: 1.5rem; border-left: 4px solid var(--success); } .tool-result .result-value { font-size: 2rem; font-weight: 700; color: var(--primary); } /* ========================================== Breadcrumbs ========================================== */ .breadcrumb { background: transparent; padding: 0; margin-bottom: 1.5rem; } .breadcrumb-item { font-size: 0.875rem; } .breadcrumb-item a { color: var(--gray-600); } .breadcrumb-item.active { color: var(--ink); } /* ========================================== Badges ========================================== */ .badge-difficulty { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; } .badge-beginner { background: var(--success); } .badge-intermediate { background: var(--warning); color: var(--ink); } .badge-advanced { background: var(--danger); } /* ========================================== Ads (behavioral rules — do not restyle) ========================================== */ .ad-container { text-align: center; min-height: 90px; display: flex; align-items: center; justify-content: center; } .ad-container ins { display: block !important; } /* In-content reserved ad slots (Auto ads fill these). Reserve height to avoid layout shift (CLS) only once a slot is filled. */ .ad-slot { min-height: 280px; margin: 2rem 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* An unfilled slot must not render as an empty box (made-for-ads signal). Collapse it entirely until Auto ads inject content; a filled slot still shows. */ .ad-slot:empty { display: none; min-height: 0; margin: 0; border: 0; } @media (max-width: 575.98px) { .ad-slot:not(:empty) { min-height: 250px; } } .ad-mobile-anchor { position: fixed; bottom: 0; left: 0; right: 0; background: white; z-index: 1000; padding: 0.5rem; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); } /* ========================================== Back to Top Button ========================================== */ .btn-back-to-top { position: fixed; bottom: 80px; right: 20px; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: var(--transition); z-index: 999; box-shadow: var(--shadow); } .btn-back-to-top.show { opacity: 1; visibility: visible; } .btn-back-to-top:hover { transform: translateY(-2px); } /* ========================================== Footer — colophon: deep ink navy under an amber keyline ========================================== */ .footer { border-top: 2px solid var(--accent); } .footer h6 { font-family: var(--font-mono); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.14em; color: #8aa0b8; } .footer a:hover { color: var(--accent) !important; } .footer-brand .bi { color: var(--accent); } /* ========================================== Dark Mode ========================================== */ body.dark-mode { background: var(--dark); color: var(--gray-300); /* accents flip to their bright twins for contrast on dark surfaces */ --pv-accent: var(--pv-accent-bright); --pv-accent-soft: rgba(255, 255, 255, 0.07); --paper: #252540; --surface: #1e1e36; --line: #3a3a5c; } body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: var(--gray-100); } body.dark-mode .card { background: #252540; border-color: #3a3a5c; } body.dark-mode .card-header { background: #1e1e36; border-color: #3a3a5c; } body.dark-mode .bg-light { background: #1e1e36 !important; } body.dark-mode .sidebar-wrapper { background: #1e1e36; } body.dark-mode .tool-interface { background: #252540; } body.dark-mode .tool-result { background: #1e1e36; } body.dark-mode .table { color: var(--gray-300); border-color: #3a3a5c; } body.dark-mode .table-analytics th { background: #252540; } body.dark-mode .article-col .table thead th, body.dark-mode .chapter-content .table thead th { color: #9aa7bd; border-bottom-color: var(--gray-300); } body.dark-mode input, body.dark-mode select { background: #1e1e36; border-color: #3a3a5c; color: var(--gray-200); } body.dark-mode .text-muted { color: var(--gray-500) !important; } body.dark-mode .progress-container { background: #252540; } body.dark-mode .article-col .figure { background: #252540; border-color: #3a3a5c; } body.dark-mode .article-col .figure .figure-img { background: #fff; /* charts are light PNGs; keep the plate white */ border-color: #3a3a5c !important; } body.dark-mode .figure-caption { color: #9aa7bd; } body.dark-mode .article-col .alert-secondary { background: #252540; border-color: #3a3a5c; border-left-color: var(--pv-accent); color: var(--gray-300); } body.dark-mode .explainer-card .badge.bg-info { background: #1e1e36 !important; color: var(--gray-400); border-color: #3a3a5c; } body.dark-mode .explainer-card .card-title a { color: var(--gray-100); } body.dark-mode :not(pre) > code { color: #8ec3ff; background: rgba(255, 255, 255, 0.08); } body.dark-mode .author-bio { background: #252540 !important; } /* ========================================== Animations ========================================== */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.5s ease forwards; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .animate-pulse { animation: pulse 2s infinite; } /* Reduced motion: respect the preference everywhere */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .card:hover, .hover-lift:hover, .btn-back-to-top:hover, .btn-primary:hover { transform: none; } } /* ========================================== Responsive ========================================== */ @media (max-width: 991.98px) { .hero { padding: 3rem 0; } .hero .display-4 { font-size: 2rem; } .sidebar-wrapper { display: none; } .stat-number { font-size: 2rem; } } @media (max-width: 767.98px) { h1 { font-size: 1.75rem; } h2 { font-size: 1.45rem; } h3 { font-size: 1.2rem; } .hero { padding: 2.5rem 0; } .card { margin-bottom: 1rem; } .tool-inputs { grid-template-columns: 1fr; } .footer { text-align: center; } .article-col { font-size: 1rem; } /* Add padding for mobile anchor ad */ body { padding-bottom: 70px; } } @media (max-width: 575.98px) { /* Full-width tap targets in content — but never for chrome controls */ .btn { width: 100%; margin-bottom: 0.5rem; } .navbar .btn, .input-group .btn, .btn-back-to-top, .code-block .code-copy-btn, .breadcrumb .btn { width: auto; margin-bottom: 0; } .stat-box { padding: 1rem; } .stat-number { font-size: 1.5rem; } .article-col .figure { padding: 2.6rem 0.7rem 0.8rem; } .pv-hero-2 .explainer-hero .col-lg-9 { padding-left: 1rem; } } /* ========================================== Print Styles ========================================== */ @media print { .navbar, .ad-container, .btn-back-to-top, .ad-mobile-anchor, .sidebar-wrapper { display: none !important; } body { padding: 0; color: black; background: white; } a { color: black; text-decoration: underline; } .card { box-shadow: none; border: 1px solid #ddd; } } /* ========================================== Utility Classes ========================================== */ .section-padding { padding: var(--section-padding) 0; } .section-title { font-size: 1.85rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 2rem; position: relative; padding-bottom: 0.85rem; } .section-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 44px; height: 3px; background: var(--accent); border-radius: 2px; } .section-title.text-center::after, .text-center .section-title::after { left: 50%; transform: translateX(-50%); } .text-gradient { background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .bg-accent { background-color: var(--accent) !important; } .border-accent { border-color: var(--accent) !important; } .hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; } .hover-lift:hover { transform: translateY(-2px); } /* ========================================== Interactive Tools Styles ========================================== */ .interactive-tool { background-color: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--secondary); border-radius: var(--border-radius-lg); padding: 25px; margin: 2rem 0; } .interactive-tool h3 { color: var(--primary); margin-top: 0; margin-bottom: 15px; font-size: 1.35rem; } .interactive-tool p { color: var(--gray-700); margin-bottom: 20px; } .calculator-controls { display: flex; flex-direction: column; gap: 20px; margin-bottom: 25px; } .control-group { display: flex; flex-direction: column; gap: 8px; } .control-group label { font-weight: 600; color: var(--ink); font-size: 0.95rem; } .control-group input[type="range"] { width: 100%; height: 8px; border-radius: 5px; background: var(--gray-300); outline: none; -webkit-appearance: none; } .control-group input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--secondary); cursor: pointer; } .control-group input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--secondary); cursor: pointer; border: none; } .control-value { display: inline-block; min-width: 60px; font-weight: 700; color: var(--secondary); font-size: 1rem; font-family: var(--font-mono); } .result-display { background-color: var(--paper); border: 1px solid var(--line); border-radius: var(--border-radius); padding: 20px; text-align: center; } .result-value { font-size: 2.5rem; font-weight: 700; color: var(--primary); margin: 10px 0; letter-spacing: -0.02em; } .result-label { font-size: 1.05rem; color: var(--gray-600); margin-bottom: 10px; } .result-explanation { font-size: 0.95rem; color: var(--gray-700); margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line); } .result-card { background: var(--primary); color: white; padding: 20px; border-radius: var(--border-radius); margin-bottom: 15px; } .result-card .result-label { color: rgba(255, 255, 255, 0.8); } .result-card .result-value { color: white; } /* Decision Cards (Fourth Down Tool) */ .decision-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 20px; } .decision-card { background-color: var(--paper); border: 1px solid var(--line); border-radius: var(--border-radius); padding: 15px; text-align: center; transition: box-shadow 0.2s ease, border-color 0.2s ease; } .decision-card:hover { box-shadow: var(--shadow-sm); border-color: var(--gray-400); } .decision-card.best-option { border-color: var(--success); background-color: #e9f6ee; } .decision-option { color: var(--primary); font-weight: 700; font-size: 1rem; margin-bottom: 10px; } .decision-value { font-size: 1.5rem; font-weight: 700; color: var(--secondary); } .decision-card.best-option .decision-value { color: var(--success); } .recommendation { background-color: var(--surface); padding: 15px; border-radius: var(--border-radius); margin-top: 15px; border: 1px solid var(--line); } /* Simulate button */ .btn-simulate { background-color: var(--secondary); color: white; border: none; border-radius: var(--border-radius); padding: 12px 24px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: var(--transition); margin-top: 15px; } .btn-simulate:hover { background-color: var(--primary); } /* Chart containers */ #team-scatter-plot, #win-prob-chart, #field-position-ep, #epa-distribution { width: 100%; min-height: 400px; margin-top: 20px; } .chart-info { background-color: var(--surface); padding: 15px; border-radius: var(--border-radius); margin-top: 15px; font-size: 0.9rem; border: 1px solid var(--line); } .chart-info p { margin-bottom: 5px; } .chart-controls { text-align: center; margin-top: 15px; } /* Callout boxes from tutorials */ .callout { padding: 1rem 1.25rem; margin: 1.5rem 0; border-left: 3px solid; border-radius: 0 var(--border-radius) var(--border-radius) 0; background-color: var(--surface); } .callout h4 { margin-top: 0; margin-bottom: 0.5rem; font-size: 1.05rem; } .callout-note { border-color: var(--info); } .callout-note h4 { color: #10707f; } .callout-important { border-color: var(--warning); background-color: #fff8e6; } .callout-important h4 { color: #856404; } .callout-warning { border-color: var(--danger); background-color: #fdeef0; } .callout-warning h4 { color: #b02a37; } .callout-tip { border-color: var(--success); background-color: #e9f6ee; } .callout-tip h4 { color: #1e7e34; } /* Code tabs in tutorials */ .panel-tabset { margin: 1.5rem 0; } .panel-tabset .nav-tabs { border-bottom: 2px solid var(--gray-300); } .panel-tabset .nav-link { border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; color: var(--gray-600); font-weight: 500; } .panel-tabset .nav-link.active { color: var(--primary); border-bottom-color: var(--primary); background: none; } .panel-tabset .tab-pane { padding-top: 1rem; } /* Responsive adjustments */ @media (max-width: 768px) { .decision-cards { grid-template-columns: 1fr; } .result-value { font-size: 2rem; } #team-scatter-plot, #win-prob-chart, #field-position-ep, #epa-distribution { min-height: 300px; } .interactive-tool { padding: 15px; } } /* Dark mode support for interactive tools */ [data-theme="dark"] .interactive-tool, body.dark-mode .interactive-tool { background-color: #252540; border-color: #3a3a5c; } [data-theme="dark"] .interactive-tool p, body.dark-mode .interactive-tool p { color: var(--gray-300); } [data-theme="dark"] .result-display, body.dark-mode .result-display { background-color: #1e1e36; border-color: #3a3a5c; } [data-theme="dark"] .decision-card, body.dark-mode .decision-card { background-color: #252540; border-color: #3a3a5c; } [data-theme="dark"] .callout, body.dark-mode .callout { background-color: #252540; } /* ========================================== Tutorial Enrichment Components ========================================== */ /* Key Takeaways Box */ .key-takeaways { background: #eef4fb; border: 1px solid #d8e5f4; border-left: 3px solid var(--primary); border-radius: var(--border-radius); padding: 1.5rem; margin-bottom: 2rem; box-shadow: none; } .key-takeaways .alert-heading { color: var(--primary); font-size: 1.15rem; margin-bottom: 1rem; } .key-takeaways ul { padding-left: 1.25rem; } .key-takeaways li { margin-bottom: 0.5rem; line-height: 1.6; color: var(--ink); } .key-takeaways li:last-child { margin-bottom: 0; } /* Practice Problems Section */ .practice-problems { margin-top: 3rem; border-radius: var(--border-radius-lg); overflow: hidden; } .practice-problems .card-header { padding: 1rem 1.5rem; } .practice-problems .card-header h4 { margin: 0; font-size: 1.25rem; } .practice-problems .card-body { padding: 1.5rem; } .practice-problems .problem { padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--border-radius); margin-bottom: 1rem; } .practice-problems .problem:last-child { margin-bottom: 0; } .practice-problems .problem h5 { color: #1e7e34; font-size: 1rem; margin-bottom: 0.75rem; } .practice-problems .problem p { margin-bottom: 1rem; color: var(--ink); } .practice-problems .collapse-container .btn { font-size: 0.875rem; } .practice-problems .card-body.bg-light { font-family: var(--font-mono); font-size: 0.9rem; color: var(--gray-700); white-space: pre-wrap; } /* Related Resources Section */ .related-resources { margin-top: 2rem; border-radius: var(--border-radius); } .related-resources .card-header { padding: 0.75rem 1.25rem; } .related-resources .card-header h5 { margin: 0; font-size: 1rem; } .related-resources .card-body { padding: 1rem; } .related-resources a .d-flex { transition: var(--transition); } .related-resources a:hover .d-flex { background-color: var(--surface); transform: translateX(4px); } .related-resources .hover-shadow:hover { box-shadow: var(--shadow-sm); } /* Dark mode support for enrichment components */ [data-theme="dark"] .key-takeaways, body.dark-mode .key-takeaways { background: #1e2a44; border-color: #2f3f61; border-left-color: var(--secondary); } [data-theme="dark"] .key-takeaways .alert-heading, body.dark-mode .key-takeaways .alert-heading { color: #90caf9; } [data-theme="dark"] .key-takeaways li, body.dark-mode .key-takeaways li { color: var(--gray-200); } [data-theme="dark"] .practice-problems { background-color: #252540; } [data-theme="dark"] .practice-problems .problem, body.dark-mode .practice-problems .problem { background-color: #1e1e36; border-color: #3a3a5c; } [data-theme="dark"] .practice-problems .card-body.bg-light, body.dark-mode .practice-problems .card-body.bg-light { background-color: #1e1e36 !important; color: var(--gray-200); } [data-theme="dark"] .related-resources { background-color: #252540; } [data-theme="dark"] .related-resources a:hover .d-flex, body.dark-mode .related-resources a:hover .d-flex { background-color: #1e1e36; } /* Responsive adjustments */ @media (max-width: 768px) { .key-takeaways { padding: 1rem; } .practice-problems .card-body { padding: 1rem; } .related-resources .col-md-6 { margin-bottom: 0.5rem; } }