:root { color-scheme: light; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } body { font-family: "Atkinson Hyperlegible", ui-sans-serif, sans-serif; font-size: 18px; line-height: 1.5; background-color: #F4F7FA; color: #16293F; } /* Visible, high-contrast focus ring everywhere (AAA keyboard accessibility) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .peer:focus-visible ~ * { outline: 3px solid #1E3A5F; outline-offset: 3px; border-radius: 4px; } /* Skip link */ .skip-link { position: absolute; left: -9999px; top: 0; background: #16293F; color: #fff; padding: 0.75rem 1.25rem; z-index: 100; font-weight: 700; border-radius: 0 0 0.5rem 0; } .skip-link:focus { left: 0; } /* Top navigation */ .nav-link { padding: 0.5rem 0.75rem; border-radius: 0.5rem; color: #DCE5F0; } .nav-link:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; } .nav-link[aria-current="page"] { color: #ffffff; background: rgba(255, 255, 255, 0.12); text-decoration: underline; text-decoration-color: #4CC896; text-decoration-thickness: 3px; text-underline-offset: 4px; } /* ============================================================ DISPLAY SETTINGS: color theme, text size, and font style ------------------------------------------------------------ Applied via data-theme / data-text-size / data-font attributes on , set by assets/js/site.js and persisted in localStorage. Defaults below match the original Navy & Emerald design, so no attribute = no visual change. ============================================================ */ :root { --t-navy-900: #0F1C2B; --t-navy-800: #16293F; --t-navy-700: #1E3A5F; --t-navy-600: #2C4A76; --t-navy-500: #3E5F87; --t-emerald-800: #123D2E; --t-emerald-700: #1C6249; --t-emerald-600: #25805F; --t-emerald-500: #2F9E77; --t-emerald-400: #4CC896; } body[data-theme="ocean"] { --t-navy-900: #071B2B; --t-navy-800: #0C2E47; --t-navy-700: #134463; --t-navy-600: #1A5476; --t-navy-500: #256789; --t-emerald-800: #073F44; --t-emerald-700: #0A5C63; --t-emerald-600: #0E7C86; --t-emerald-500: #0E7C86; --t-emerald-400: #5FD1D6; } body[data-theme="warm"] { --t-navy-900: #2B1710; --t-navy-800: #3F2318; --t-navy-700: #5C3320; --t-navy-600: #6B3D26; --t-navy-500: #82492E; --t-emerald-800: #622C0D; --t-emerald-700: #8A3E12; --t-emerald-600: #B8531C; --t-emerald-500: #B8531C; --t-emerald-400: #F0B27A; } body[data-theme="highcontrast"] { --t-navy-900: #000000; --t-navy-800: #0A0A0A; --t-navy-700: #1A1A1A; --t-navy-600: #2A2A2A; --t-navy-500: #3D3D3D; --t-emerald-800: #1A1A1A; --t-emerald-700: #000000; --t-emerald-600: #000000; --t-emerald-500: #000000; --t-emerald-400: #FFFFFF; } /* Re-skin the exact utility classes used for header/footer/button/accent roles so a theme choice applies everywhere at once. Text, cards, and form borders deliberately stay neutral for consistent readability. */ .bg-navy-900 { background-color: var(--t-navy-900) !important; } .bg-navy-800 { background-color: var(--t-navy-800) !important; } .bg-navy-700 { background-color: var(--t-navy-700) !important; } .border-navy-900 { border-color: var(--t-navy-900) !important; } .border-navy-500 { border-color: var(--t-navy-500) !important; } .hover\:bg-navy-800:hover { background-color: var(--t-navy-800) !important; } .hover\:bg-navy-600:hover { background-color: var(--t-navy-600) !important; } .bg-emerald-500 { background-color: var(--t-emerald-500) !important; } .bg-emerald-700 { background-color: var(--t-emerald-700) !important; } .border-emerald-500 { border-color: var(--t-emerald-500) !important; } .hover\:bg-emerald-800:hover { background-color: var(--t-emerald-800) !important; } .text-emerald-600 { color: var(--t-emerald-600) !important; } .text-emerald-400 { color: var(--t-emerald-400) !important; } .marker\:text-emerald-600::marker { color: var(--t-emerald-600) !important; } /* Text size (3 steps, replaces the old binary Large Font toggle) */ body[data-text-size="large"] { font-size: 21px; } body[data-text-size="xlarge"] { font-size: 25px; } body[data-text-size="large"] .senior-border, body[data-text-size="xlarge"] .senior-border { border-width: 3px !important; border-color: var(--t-navy-900) !important; } /* Font style */ body[data-font="standard"], body[data-font="standard"] .font-display, body[data-font="standard"] .font-label { font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; } body[data-font="serif"], body[data-font="serif"] .font-display, body[data-font="serif"] .font-label { font-family: Georgia, "Times New Roman", serif; } /* Display Settings popover */ #displaySettingsPanel { transition: opacity 150ms ease, transform 150ms ease; } #displaySettingsPanel[data-open="false"] { display: none; } #displaySettingsPanel[data-open="true"] { display: block; } /* PDF preview modal */ .modal-overlay { position: fixed; inset: 0; background: rgba(15, 28, 43, 0.7); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; } .modal-overlay[data-open="false"] { display: none; } .modal-panel { background: #ffffff; border-radius: 1rem; max-width: 900px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; } .pdf-preview-frame { width: 100%; flex: 1 1 auto; min-height: 60vh; border: 1px solid #90ABC9; background: #90ABC9; } /* A plain, print-safe empty checkbox glyph used by the Weekly Checklist template */ .chk-box { display: inline-block; width: 18px; height: 18px; border: 2px solid #16293F; border-radius: 3px; vertical-align: middle; } /* Toast */ #toast { transition: opacity 200ms ease, transform 200ms ease; } #toast[data-visible="false"] { opacity: 0; transform: translateY(0.5rem); pointer-events: none; } #toast[data-visible="true"] { opacity: 1; transform: translateY(0); } /* Ad slot placeholder framing */ .ad-slot { border: 1px dashed #90ABC9; border-radius: 0.5rem; background: #EEF2F7; } /* Print styles: only the schedule chart (#printArea, on builder.php) is printed */ @media print { @page { size: letter landscape; margin: 0.4in; } html, body { background: #ffffff !important; font-size: 13pt !important; } .no-print, .no-print * { display: none !important; } #app-shell { display: block !important; } #printArea { width: 100% !important; box-shadow: none !important; border: none !important; padding: 0 !important; margin: 0 !important; } * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; } /* Force maximum-contrast borders and body text everywhere in the chart, regardless of the chosen chart palette or a printer's own grayscale / black-ink-only mode. Deliberately does NOT touch SVG pill-badge fill colors or header-bar background colors, which stay as chosen. */ table, th, td { border: 2px solid #000000 !important; } #printArea *:not(svg):not(circle):not(rect):not(ellipse):not(path) { border-color: #000000 !important; } #printArea p, #printArea span, #printArea div, #printArea th, #printArea td, #printArea li { color: #000000 !important; } #printArea thead th, #printArea .text-white, #printArea .no-print { color: inherit !important; } .chk-box { border-color: #000000 !important; border-width: 2px !important; } }