/** * Chalksta app shell — shared tokens + layout for migrated player pages * (not the index-landing home; use alongside body.chalksta-app) * Theme: body.dark-theme toggled by generalconfig.js (same contract as index-landing) * * Fonts: Do not @import Google Fonts here — it delays parsing and serializes font fetch. * Load Oswald/Roboto in HTML (preconnect + stylesheet) before this file; see STYLES.md. */ .chalksta-app { --espn-red: #e31837; --espn-red-dark: #c41230; font-family: 'Roboto', -apple-system, sans-serif; min-height: 100vh; transition: background-color 0.3s ease; } /* Light (default) */ body.chalksta-app { --idx-bg: #f5f5f7; --idx-fg: #1d1d1f; --idx-surface: #ffffff; --idx-surface-alt: #e8e8ed; --idx-muted: #6e6e73; --idx-border: #d2d2d7; --idx-nav-fg: #1d1d1f; --idx-muted-hover: #424245; background: var(--idx-bg); color: var(--idx-fg); } /* Dark */ body.dark-theme.chalksta-app { --idx-bg: #0d0d0d; --idx-fg: #fff; --idx-surface: #1a1a1a; --idx-surface-alt: #262626; --idx-muted: #999; --idx-border: #2a2a2a; --idx-nav-fg: #fff; --idx-muted-hover: rgba(255, 255, 255, 0.8); background: var(--idx-bg); color: var(--idx-fg); } /* * Loading spinners (Bootstrap .spinner-border / .spinner-grow) * Use ESPN red — not Bootstrap warning orange, legacy cream parents (#f4dbaa), or inherited muted yellow. * Semantic utility colors on the spinner (success/danger/etc.) are left unchanged. */ body.chalksta-app .spinner-border:not(.text-success):not(.text-danger):not(.text-info):not(.text-warning):not(.text-white):not(.text-white-50):not(.text-dark), body.chalksta-app .spinner-grow:not(.text-success):not(.text-danger):not(.text-info):not(.text-warning):not(.text-white):not(.text-white-50):not(.text-dark) { color: var(--espn-red); } /* Bootstrap .text-primary on spinners → Chalksta accent (not default blue) */ body.chalksta-app .spinner-border.text-primary, body.chalksta-app .spinner-grow.text-primary { color: var(--espn-red) !important; } /* Subtle inline loading (opt-in): add .text-muted on the spinner */ body.chalksta-app .spinner-border.text-muted, body.chalksta-app .spinner-grow.text-muted { color: var(--idx-muted) !important; } /* * Inline loading rows: “Loading game scores…”, season stats, CPR chart placeholders * (popindivplayerstats.js / poplifetime.js). Replaces legacy inline #f4dbaa on wrappers. * Spinner keeps --espn-red via rules above; message uses --idx-muted. */ body.chalksta-app .chalksta-loading-inline { display: flex; align-items: center; justify-content: center; gap: 0.4rem; flex-wrap: wrap; color: var(--idx-muted); font-size: 0.875rem; } body.chalksta-app .chalksta-loading-inline .chalksta-loading-inline__msg { color: var(--idx-muted); } body.chalksta-app .chalksta-loading-inline.chalksta-loading-inline--start { justify-content: flex-start; } body.chalksta-app .chalksta-loading-inline.chalksta-loading-inline--stacked { flex-direction: column; align-items: center; gap: 0.75rem; } /* Cross-page toolbar links (matches ↔ schedule ↔ standings) — muted, not a second “card” CTA */ .chalksta-app .chalksta-crossnav-link { color: var(--idx-muted); font-size: 0.8125rem; text-decoration: none; border-bottom: 1px solid transparent; } .chalksta-app .chalksta-crossnav-link:hover { color: var(--espn-red); border-bottom-color: rgba(227, 24, 55, 0.35); } /* Icon + label row, right-aligned (same pattern on matches / standings / schedule pages) */ .chalksta-app .chalksta-ts-toolbar--crossnav { display: flex; justify-content: flex-end; align-items: center; width: 100%; box-sizing: border-box; } /* Max-width shell — align with index-landing */ .chalksta-app .idx-header-wrap, .chalksta-app .idx-content-wrap { max-width: 1400px; margin: 0 auto; padding: 0 1rem; box-sizing: border-box; } .chalksta-app .idx-content-wrap { padding-bottom: 2rem; position: relative; z-index: 0; } /* Keep header + mobile nav above main (CSD .csd-bar etc. use z-index up to ~1050 inside content). */ .chalksta-app .idx-header-wrap { position: relative; z-index: 40; } .chalksta-app .idx-header-wrap .idx-header-inner { width: 100%; max-width: 100%; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; } .chalksta-app .idx-header-wrap .idx-header-row, .chalksta-app .idx-header-wrap .marquee { width: 100%; } .chalksta-app .idx-header-wrap .marquee { background: var(--idx-bg) !important; } .chalksta-app .idx-header-wrap .row { margin-left: 0; margin-right: 0; max-width: 100%; } .chalksta-app .idx-header-wrap .idx-header-inner > div { width: 100%; max-width: 100%; } /* Bootstrap navbar toggler — theme-aware (matches index-landing behavior) */ body.dark-theme.chalksta-app .navbar-toggler { border-color: rgba(255, 255, 255, 0.5) !important; } body.dark-theme.chalksta-app .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; } body.chalksta-app:not(.dark-theme) .navbar-toggler { border-color: rgba(0, 0, 0, 0.2) !important; } body.chalksta-app:not(.dark-theme) .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; } /* ============================================================================= Header chrome — parity with index-landing (migrated pages use body.chalksta-app) Keep in sync with index-landing.css header / user bar / compact nav sections. ============================================================================= */ .chalksta-app .idx-header-wrap .idx-ticker-placeholder { font-size: 0.65rem; font-weight: 500; letter-spacing: 0.14em; text-transform: lowercase; color: var(--idx-muted); opacity: 0.32; user-select: none; margin-right: 0.5rem; vertical-align: middle; } /* Ticker + division picker stack — no inline gap next to select */ .chalksta-app .idx-header-wrap .idx-header-marquee .idx-ticker-placeholder { margin-right: 0; } /* Division picker — token field (overrides sitestyles .mainselectheaderstyle on migrated + index home) */ body.chalksta-app .idx-header-marquee select.mainselectheaderstyle, body.index-landing .idx-header-marquee select.mainselectheaderstyle { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; max-width: 100%; font-size: 0.9rem; font-weight: 500; font-family: inherit; line-height: 1.35; padding: 0.5rem 2.35rem 0.5rem 0.75rem; border-radius: 8px; border: 1px solid var(--idx-border); background-color: var(--idx-surface); color: var(--idx-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; box-sizing: border-box; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='%236e6e73' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.65rem center; background-size: 1rem 1rem; margin: 0; } body.chalksta-app .idx-header-marquee select.mainselectheaderstyle:hover, body.index-landing .idx-header-marquee select.mainselectheaderstyle:hover { border-color: var(--espn-red); } body.dark-theme.chalksta-app .idx-header-marquee select.mainselectheaderstyle, body.dark-theme.index-landing .idx-header-marquee select.mainselectheaderstyle { background-color: var(--idx-surface-alt); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='%23999999' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } body.chalksta-app .idx-header-marquee select.mainselectheaderstyle:focus, body.index-landing .idx-header-marquee select.mainselectheaderstyle:focus { outline: 2px solid var(--espn-red); outline-offset: 2px; } /* Subtle label above division picker — only when select is shown (generalconfig removes .d-none) */ body.chalksta-app .idx-header-marquee label.idx-player-div-select-wrap:has(#player_div_select:not(.d-none)), body.index-landing .idx-header-marquee label.idx-player-div-select-wrap:has(#player_div_select:not(.d-none)) { display: inline-flex; flex-direction: column; align-items: stretch; max-width: min(420px, 100%); vertical-align: middle; } body.chalksta-app .idx-header-marquee label.idx-player-div-select-wrap:has(#player_div_select:not(.d-none))::before, body.index-landing .idx-header-marquee label.idx-player-div-select-wrap:has(#player_div_select:not(.d-none))::before { content: "this division"; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.04em; text-transform: capitalize; color: var(--idx-muted); margin-bottom: 0.35rem; line-height: 1.2; } .chalksta-app .idx-header-row { background-color: var(--idx-surface-alt); border-bottom: 2px solid var(--espn-red); overflow: visible; align-items: center; } .chalksta-app .idx-header-row > .col-auto:first-child { overflow: visible; } .chalksta-app .idx-brand-panel { padding: 0.45rem 1rem 0.45rem 0.5rem; position: relative; min-height: 0; transition: background 0.3s ease, box-shadow 0.3s ease; } body.chalksta-app:not(.dark-theme) .idx-brand-panel { border-radius: 0; background: transparent; box-shadow: none; border: none; outline: none; overflow: visible; } body.chalksta-app:not(.dark-theme) .idx-brand-panel::before { content: ""; position: absolute; inset: 0; right: -18%; z-index: 0; background: linear-gradient( 105deg, #2d2d32 0%, #2d2d32 35%, #38383d 48%, #4a4a50 58%, #6a6a70 68%, #9a9aa0 78%, #c8c8ce 82%, #e0e0e5 88%, #e8e8ed 95%, #e8e8ed 100% ); } body.chalksta-app:not(.dark-theme) .idx-brand-panel > * { position: relative; z-index: 1; } body.chalksta-app:not(.dark-theme) .idx-brand-panel .idx-leaguename { color: rgba(255, 255, 255, 0.9); } body.dark-theme.chalksta-app .idx-brand-panel { border-radius: 0 12px 12px 0; background: linear-gradient( 105deg, #121212 0%, #151515 35%, rgba(38, 38, 38, 0.9) 60%, #262626 100% ); background-color: #262626; box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.04); } body.dark-theme.chalksta-app .idx-brand-panel .idx-leaguename { color: var(--idx-fg); } .chalksta-app .idx-brand-panel #logo_table, .chalksta-app .idx-brand-panel #logotable, .chalksta-app .idx-brand-panel #logotable tbody, .chalksta-app .idx-brand-panel #logotable tr, .chalksta-app .idx-brand-panel #logotable td { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; vertical-align: top; } .chalksta-app .idx-brand-panel #logo_table { padding: 6px !important; } .chalksta-app .idx-brand-panel #logo_table.table-responsive { overflow: visible; border: none; } .chalksta-app .idx-brand-panel .idx-leaguename { margin-left: 12px; font-family: "Oswald", sans-serif; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.875rem; line-height: 1.2; } .chalksta-app .idx-username { color: var(--idx-nav-fg); } .chalksta-app .chalksta_menu_header { color: var(--idx-nav-fg) !important; } .chalksta-app .chalksta_menu_header:hover, .chalksta-app .nav-link.active.chalksta_menu_header { color: var(--espn-red) !important; } /* Beat Navigation-Clean.css `.navbar-light .nav-link:hover { color: #dfe7f1 }` (unreadable on light token shell) */ body.chalksta-app nav.navbar.idx-navbar-theme.navigation-clean.navbar-light .navbar-nav .nav-link.chalksta_menu_header:hover, body.chalksta-app nav.navbar.idx-navbar-theme.navigation-clean.navbar-light .navbar-nav .nav-link.chalksta_menu_header:focus { color: var(--espn-red) !important; } .chalksta-app nav.navbar.idx-navbar-theme, .chalksta-app nav.navbar { background-color: var(--idx-surface-alt) !important; border-bottom: 1px solid var(--idx-border); } /* Tighter bar than stock .navigation-clean (1rem) */ .chalksta-app nav.navbar.idx-navbar-compact.navigation-clean { padding-top: 0.3rem !important; padding-bottom: 0.3rem !important; } @media (min-width: 768px) { .chalksta-app nav.navbar.idx-navbar-compact.navigation-clean { padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; } } /* Below navbar-expand-xl: hamburger menu overlays content — compact panel, left-aligned, no horizontal scroll */ @media (max-width: 1199.98px) { body.chalksta-app nav.navbar.idx-navbar-theme .container-fluid { position: relative; } body.chalksta-app nav.navbar.idx-navbar-theme .navbar-collapse { position: absolute; top: 100%; left: 0; right: auto; width: auto; min-width: 13.5rem; max-width: min(18.5rem, calc(100vw - 1.5rem)); z-index: 1030; margin-top: 0; padding: 0.5rem 0.65rem 0.65rem; background: var(--idx-surface); border: 1px solid var(--idx-border); border-radius: 8px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); max-height: min(70vh, 28rem); overflow-x: hidden; overflow-y: hidden; } /* Scroll only when fully expanded — avoids scrollbar flashing during BS height animation */ body.chalksta-app nav.navbar.idx-navbar-theme .navbar-collapse.collapse.show { overflow-y: auto; overflow-x: hidden; } body.dark-theme.chalksta-app nav.navbar.idx-navbar-theme .navbar-collapse { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45); } body.chalksta-app nav.navbar.idx-navbar-theme .navbar-collapse.collapsing { position: absolute; left: 0; right: auto; width: auto; min-width: 13.5rem; max-width: min(18.5rem, calc(100vw - 1.5rem)); z-index: 1030; overflow: hidden !important; } body.chalksta-app nav.navbar.idx-navbar-theme .navbar-collapse .navbar-nav { margin-left: 0 !important; width: 100%; max-width: 100%; } body.chalksta-app nav.navbar.idx-navbar-theme .navbar-collapse .nav-link { white-space: normal; word-break: normal; overflow-wrap: anywhere; } } .chalksta-app #logincolumn .idx-signin-btn { display: inline-block; padding: 0.5rem 1.25rem; background: var(--espn-red); color: #fff; font-family: "Oswald", sans-serif; font-weight: 600; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; border-radius: 4px; transition: background 0.2s; } .chalksta-app #logincolumn .idx-signin-btn:hover { background: var(--espn-red-dark); color: #fff; text-decoration: none; } .chalksta-app #logincolumn .idx-header-account { width: 100%; } .chalksta-app #logincolumn #FBlogout { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin-left: 0; } .chalksta-app #logincolumn #FBlogout a, .chalksta-app #logincolumn #FBlogout #fblogoutbutton, .chalksta-app #logincolumn .idx-loggedin-wrap a { color: var(--idx-nav-fg); text-decoration: none; font-size: 14px; margin-left: 0; } .chalksta-app #logincolumn #FBlogout a:hover, .chalksta-app #logincolumn #FBlogout #fblogoutbutton:hover, .chalksta-app #logincolumn .idx-loggedin-wrap a:hover { color: var(--espn-red); text-decoration: underline; } .chalksta-app #logincolumn #fbpic { cursor: pointer; } .chalksta-app #fave_div.idx-header-fave-inline { flex: 0 1 auto; min-width: 0; max-width: 100%; } .chalksta-app .idx-fave-inline-inner { gap: 0.25rem 0.45rem; max-width: 100%; } .chalksta-app .idx-fave-inline-info { max-width: 12rem; font-size: 0.8125rem; color: var(--idx-muted); text-align: right; } .chalksta-app #fave_div #notifs-link { font-size: 0.8125rem; color: var(--idx-muted); margin-right: 0; } .chalksta-app .idx-header-fave-icon { width: 1em; height: 1em; margin-right: 0; color: var(--idx-muted); cursor: pointer; vertical-align: -0.125em; } .chalksta-app .idx-header-fave-icon:hover { color: var(--espn-red); } .chalksta-app .idx-header-user-bar { gap: 0.35rem 0.6rem; row-gap: 0.35rem; justify-content: flex-end; width: 100%; } .chalksta-app .idx-navbar-nav-compact { margin-top: 0 !important; } .chalksta-app .idx-navbar-compact .chalksta_menu_header { padding: 0.28rem 0.45rem !important; font-size: 0.8125rem !important; line-height: 1.25; } /* Shared footer on migrated app pages */ .chalksta-app .idx-footer { padding: 2rem 0; text-align: center; border-top: 1px solid var(--idx-border); margin-top: 2rem; color: var(--idx-muted); font-size: 0.9rem; } .chalksta-app .idx-footer a { color: var(--idx-muted); text-decoration: none; } .chalksta-app .idx-footer a:hover { color: var(--espn-red); } /* Top bar label (matches home idx-topbar rhythm) */ .chalksta-app .idx-topbar-wrap .idx-topbar { background: var(--idx-bg) !important; padding: 0.5rem 1rem; font-family: "Oswald", sans-serif; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--idx-muted); border-bottom: 1px solid var(--idx-border); } /* Login modal — same as index-landing (global class names; tokens from body.chalksta-app) */ .idx-login-modal { background: var(--idx-surface); border: 1px solid var(--idx-border); border-radius: 8px; } .idx-login-modal-header { background: var(--idx-surface-alt); border-bottom: 1px solid var(--idx-border); padding: 1.25rem 1.5rem; } .idx-login-modal-header .modal-title { font-family: "Oswald", sans-serif; font-size: 1.5rem; font-weight: 600; color: var(--idx-fg); text-transform: uppercase; letter-spacing: 0.05em; } .idx-login-close { color: var(--idx-fg); opacity: 0.8; } .idx-login-close:hover { color: var(--idx-fg); opacity: 1; } .idx-login-modal-body { padding: 2rem 1.5rem; } .idx-login-subtitle { color: var(--idx-muted); font-size: 0.95rem; margin-bottom: 1.5rem; } .idx-login-buttons { display: flex; flex-direction: column; gap: 0.75rem; } .idx-login-btn { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.875rem 1.25rem; font-size: 1rem; font-weight: 500; border: none; border-radius: 6px; cursor: pointer; transition: opacity 0.2s, transform 0.1s; } .idx-login-btn:hover { opacity: 0.9; transform: translateY(-1px); } .idx-login-fb { background: #1877f2; color: white; } .idx-login-google { background: #fff; color: #333; text-decoration: none; } .idx-login-google:hover { color: #333; text-decoration: none; } .idx-login-google-wrap { margin: 0; } .idx-login-footer { margin-top: 1.5rem; font-size: 0.8rem; color: var(--idx-muted); text-align: center; }