/* ========================================================================== NavRun Utility Classes ========================================================================== */ /* ------------------------------------------------------------------------- Text Utilities ------------------------------------------------------------------------- */ .text-muted { color: var(--color-text-muted) !important; } .text-subtle { color: var(--color-text-subtle) !important; } /* ------------------------------------------------------------------------- Semantic text, backgrounds and badges -- readable in both themes. base.html loads bootstrap@5.3.8 from jsDelivr and never sets `data-bs-theme` on , so Bootstrap's own dark palette never switches on. Every stock semantic value below is therefore the LIGHT one in NavRun's dark mode as well, and each one is wrong in one theme or the other. The injury-risk ACWR number is rendered with these classes, so this was a safety number nobody could read. Measured with the WCAG 2.x relative-luminance formula, on the four real surfaces (--color-bg, --color-bg-subtle, --color-surface, --color-surface-raised). Ranges below are worst to best across those four. class light before light after dark before dark after .text-warning 1.45 - 1.63 6.30 - 7.09 8.14 - 10.63 7.95 - 10.38 .text-info 1.74 - 1.96 9.20 - 10.36 6.77 - 8.85 5.22 - 6.82 .text-success 4.02 - 4.53 6.82 - 7.68 2.93 - 3.83 6.90 - 9.02 .text-danger 4.02 - 4.53 7.38 - 8.31 2.93 - 3.83 4.80 - 6.27 .text-secondary 4.17 - 4.69 4.60 - 5.17 2.83 - 3.70 5.51 - 7.20 .text-body 13.70 - 15.43 12.00 - 13.51 1.02 - 1.16 11.52 - 15.06 --color-X-ink is the token minted for exactly this: readable ink for that semantic, already defined per theme, so there is no second copy of a colour here. "secondary" has no semantic ink because it is not a semantic; it is NavRun's muted body ink. .text-body follows --color-text for the same reason: its stock rule reads --bs-body-color-rgb, which the bridge in variables.css cannot reach, so the label went near-black on a dark page. ------------------------------------------------------------------------- */ .text-success { color: var(--color-success-ink) !important; } .text-warning { color: var(--color-warning-ink) !important; } .text-danger { color: var(--color-danger-ink) !important; } .text-info { color: var(--color-info-ink) !important; } .text-secondary { color: var(--color-text-muted) !important; } .text-body { color: var(--color-text) !important; } /* The tinted chips those inks sit on. Bootstrap's --bs-X-bg-subtle values are pale (#d1e7dd, #fff3cd, #f8d7da, #cff4fc) and, with no data-bs-theme, they stay pale at night: a dark-mode .text-success on one measured 1.48:1. The --color-X-bg tokens are the opaque, per-theme version of the same idea, so the pairing holds in both themes. Measured ink on bg: light success 6.78 warning 6.37 danger 6.80 info 8.49 dark success 6.45 warning 6.56 danger 4.62 info 4.83 */ .bg-success-subtle { background-color: var(--color-success-bg) !important; } .bg-warning-subtle { background-color: var(--color-warning-bg) !important; } .bg-danger-subtle { background-color: var(--color-danger-bg) !important; } .bg-info-subtle { background-color: var(--color-info-bg) !important; } /* Solid semantic badges keep Bootstrap's fill, which does not follow the theme, so their ink must not follow it either. --brand-pine-deep is the one ink in the palette that is declared in :root and never redefined in either dark block. White on those two fills measured 1.63:1 (warning) and 1.96:1 (info); pine-deep measures 9.67:1 and 8.05:1. .badge.bg-success, .bg-danger and .bg-secondary already clear the bar on white (4.53, 4.53, 4.69) and are left alone. The :not() is load-bearing. A bg-opacity-* modifier makes the fill translucent, so the real background is a blend with whatever is behind it and a fixed dark ink stops being safe: on the plan-legend chips in home.html, 50% amber over the dark page blends to #8e7417, where pine-deep is 3.50:1 against white's 4.51:1. Those chips have a separate, older problem of their own (in LIGHT mode white on the same blend measures 1.31:1, and the same is true of all six legend colours including the ones nothing here touches), which is a redesign of that legend rather than a colour swap. This rule stays off them. !important is needed because components.css flips `.text-dark` to --color-text in dark mode, with !important, and nine templates spell these badges `bg-warning text-dark`. That flip is right for `bg-light text-dark`, whose fill does follow the theme, and wrong here, where it put cream on amber at 1.42:1. */ .badge.bg-warning:not([class*="bg-opacity"]), .badge.bg-info:not([class*="bg-opacity"]) { color: var(--brand-pine-deep) !important; } .font-medium { font-weight: var(--font-medium) !important; } .font-semibold { font-weight: var(--font-semibold) !important; } .font-bold { font-weight: var(--font-bold) !important; } /* ------------------------------------------------------------------------- Spacing Utilities ------------------------------------------------------------------------- */ .gap-xs { gap: var(--space-xs) !important; } .gap-sm { gap: var(--space-sm) !important; } .gap-md { gap: var(--space-md) !important; } .gap-lg { gap: var(--space-lg) !important; } .gap-xl { gap: var(--space-xl) !important; } /* ------------------------------------------------------------------------- Border Utilities ------------------------------------------------------------------------- */ .rounded-sm { border-radius: var(--radius-sm) !important; } .rounded-md { border-radius: var(--radius-md) !important; } .rounded-lg { border-radius: var(--radius-lg) !important; } .rounded-xl { border-radius: var(--radius-xl) !important; } .rounded-full { border-radius: var(--radius-full) !important; } /* ------------------------------------------------------------------------- Shadow Utilities ------------------------------------------------------------------------- */ .shadow-xs { box-shadow: var(--shadow-xs) !important; } .shadow-sm { box-shadow: var(--shadow-sm) !important; } .shadow-md { box-shadow: var(--shadow-md) !important; } .shadow-lg { box-shadow: var(--shadow-lg) !important; } .shadow-xl { box-shadow: var(--shadow-xl) !important; } /* ------------------------------------------------------------------------- Background Utilities ------------------------------------------------------------------------- */ .bg-subtle { background-color: var(--color-bg-subtle) !important; } .bg-surface { background-color: var(--color-surface) !important; } /* ------------------------------------------------------------------------- Run Type Colors ------------------------------------------------------------------------- */ .run-type-easy { border-left: 4px solid var(--color-easy); } .run-type-long { border-left: 4px solid var(--color-long); } .run-type-tempo { border-left: 4px solid var(--color-tempo); } .run-type-interval { border-left: 4px solid var(--color-interval); } .run-type-recovery { border-left: 4px solid var(--color-recovery); } .run-type-rest { border-left: 4px solid var(--color-rest); } /* ------------------------------------------------------------------------- Accessibility ------------------------------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } *:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* ------------------------------------------------------------------------- Reduced Motion Support ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ------------------------------------------------------------------------- Responsive Utilities ------------------------------------------------------------------------- */ @media (max-width: 576px) { .hide-mobile { display: none !important; } } @media (min-width: 577px) and (max-width: 768px) { .hide-tablet { display: none !important; } } @media (min-width: 769px) { .hide-desktop { display: none !important; } } /* ------------------------------------------------------------------------- Mobile-First Responsive Enhancements ------------------------------------------------------------------------- */ /* Touch-friendly tap targets - minimum 44x44px */ @media (max-width: 768px) { .btn, .nav-link:not(.dropdown-toggle), .dropdown-item, .badge, a.card, button:not(.navbar-toggler) { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1rem; } .btn-sm, .btn-group-sm > .btn { min-height: 40px; padding: 0.625rem 0.875rem; } /* Larger form inputs for mobile */ .form-control, .form-select { min-height: 44px; font-size: 16px; /* Prevents zoom on iOS */ padding: 0.75rem 1rem; } textarea.form-control { min-height: 88px; /* 2x tap target */ } /* Touch-friendly checkboxes and radios */ .form-check-input { width: 24px; height: 24px; margin-top: 0.125rem; } .form-check-label { padding-left: 0.5rem; min-height: 44px; display: flex; align-items: center; } /* Larger navbar toggle */ .navbar-toggler { min-height: 44px; min-width: 44px; padding: 0.5rem; } /* Dropdown items */ .dropdown-item { padding: 0.75rem 1rem; min-height: 44px; } } /* ------------------------------------------------------------------------- Mobile Tables - Horizontal Scroll ------------------------------------------------------------------------- */ @media (max-width: 768px) { .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); margin-bottom: var(--space-md); } /* Add visual indicator for scrollable tables */ .table-responsive::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 30px; background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.05) 100%); pointer-events: none; } /* Ensure tables don't squish on mobile */ .table { min-width: 600px; } .activity-list-table { min-width: 700px; } .splits-table { min-width: 500px; } /* Make table cells more readable on mobile */ .table td, .table th { white-space: nowrap; padding: 0.75rem 0.5rem; } .table thead th { position: sticky; top: 0; background: var(--color-bg-subtle); z-index: 10; font-size: 0.7rem; } } /* ------------------------------------------------------------------------- Mobile Card Stacking ------------------------------------------------------------------------- */ @media (max-width: 768px) { /* Force cards to stack on mobile */ .row > .col, .row > [class*="col-"] { width: 100%; max-width: 100%; } /* Preserve 2-column layout for metric cards */ .row.g-3 > .col-md-4, .row.g-3 > .col-sm-6 { flex: 0 0 100%; max-width: 100%; } /* Metric cards - stack on mobile */ .metric-card { padding: 1rem !important; margin-bottom: var(--space-sm); } .metric-card .metric-value { font-size: 1.5rem !important; } .metric-card .metric-icon { width: 36px !important; height: 36px !important; font-size: 1.125rem !important; } .metric-card .metric-label { font-size: 0.7rem !important; } /* Activity hero - reduce padding */ .activity-hero { padding: var(--space-xl) var(--space-md) !important; } .activity-hero-title { font-size: var(--text-xl) !important; } .hero-stat-value { font-size: var(--text-3xl) !important; } .hero-stat-label { font-size: var(--text-xs) !important; } /* Cards - reduce padding */ .card-body { padding: var(--space-md); } .card-header { padding: var(--space-sm) var(--space-md); } } /* ------------------------------------------------------------------------- Mobile Calendar Styles ------------------------------------------------------------------------- */ @media (max-width: 768px) { /* Calendar - horizontal scroll with fixed column width */ .calendar-table { min-width: 700px; } .calendar-table th, .calendar-table td { min-width: 100px; padding: 0.5rem !important; } .calendar-day { min-height: 80px !important; } .calendar-run, .calendar-race { font-size: 0.7rem !important; padding: 0.25rem !important; margin-bottom: 0.25rem !important; } .weather-badge { font-size: 0.65rem !important; padding: 0.15rem 0.3rem !important; } } /* ------------------------------------------------------------------------- Mobile Typography ------------------------------------------------------------------------- */ @media (max-width: 768px) { h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); } h3 { font-size: var(--text-lg); } h4, h5, h6 { font-size: var(--text-base); } /* Reduce spacing on mobile */ .container, .container-fluid { padding-left: var(--space-md); padding-right: var(--space-md); } .py-4 { padding-top: var(--space-md) !important; padding-bottom: var(--space-md) !important; } .mb-4 { margin-bottom: var(--space-md) !important; } .mb-5 { margin-bottom: var(--space-lg) !important; } } /* ------------------------------------------------------------------------- Small Mobile Screens (< 480px) ------------------------------------------------------------------------- */ @media (max-width: 480px) { /* Very small screens - make stats 2-column grid */ .row.g-3.mb-4 > .col { flex: 0 0 100%; max-width: 100%; } /* Reduce padding further on very small screens */ .container, .container-fluid { padding-left: var(--space-sm); padding-right: var(--space-sm); } .metric-card { padding: 0.75rem !important; } .metric-card .metric-value { font-size: 1.25rem !important; } .metric-card .metric-icon { width: 32px !important; height: 32px !important; font-size: 1rem !important; } .card-body { padding: var(--space-sm); } /* Smaller buttons on very small screens */ .btn { padding: 0.625rem 0.875rem; font-size: var(--text-sm); } /* Hide decorative elements on very small screens */ .activity-hero::before { display: none; } } /* ------------------------------------------------------------------------- Mobile Navigation Enhancements ------------------------------------------------------------------------- */ @media (max-width: 991px) { .navbar-collapse { margin-top: var(--space-md); } .navbar-nav .nav-link { padding: 0.75rem 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .navbar-nav .nav-link:last-child { border-bottom: none; } .dropdown-menu { border: none; box-shadow: none; background: rgba(32, 43, 42, 0.95); margin-left: var(--space-md); } .dropdown-item { padding: 0.75rem 1rem; } } /* ------------------------------------------------------------------------- Mobile Alerts & Modals ------------------------------------------------------------------------- */ @media (max-width: 768px) { .alert { padding: var(--space-md); font-size: var(--text-sm); } .modal-dialog { margin: var(--space-md); } .modal-body { padding: var(--space-md); } .modal-footer { flex-direction: column; gap: var(--space-sm); } .modal-footer .btn { width: 100%; margin: 0; } } /* ------------------------------------------------------------------------- Landscape Orientation Optimizations ------------------------------------------------------------------------- */ @media (max-height: 500px) and (orientation: landscape) { .navbar { min-height: 50px; } .navbar-brand { font-size: var(--text-base); } .modal-dialog { max-height: 90vh; overflow-y: auto; } } /* ------------------------------------------------------------------------- High-DPI Display Optimizations ------------------------------------------------------------------------- */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .metric-icon, .weather-badge .emoji { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } /* ------------------------------------------------------------------------- Safe Area Insets for Notched Devices ------------------------------------------------------------------------- */ @supports (padding: max(0px)) { .navbar, .container, .container-fluid { padding-left: max(var(--space-md), env(safe-area-inset-left)); padding-right: max(var(--space-md), env(safe-area-inset-right)); } footer { padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom)); } }