/* * Low Vision Mode (BTH-25) * * Alternate, accessibility-first rendering of the application. Activated * by adding the `low-vision` class to (see app/helpers/application_helper.rb * and app/views/layouts/application.html.erb). Toggled per-user by an admin * from the user edit form. * * Design goals: * - Bigger default type, buttons, form controls * - Full-screen-width layouts (override Tailwind max-w-* containers) * - Higher contrast, thicker borders, clearer focus rings * - Simplified dashboard: hide charts and secondary stat cards, * keep the primary actions huge and obvious * - Single-column stacking of grid layouts * * Implementation note: every rule is scoped to `body.low-vision` so this * stylesheet is completely inert for users that do not have low vision * mode enabled. All overrides use !important because Tailwind's compiled * utility classes are loaded in the same cascade layer and we want this * file to always win, no matter the markup. */ /* ---------- Base typography & layout -------------------------------- */ body.low-vision { font-size: 28px !important; line-height: 1.7 !important; letter-spacing: 0.02em !important; color: #111827 !important; background-color: #ffffff !important; } body.low-vision main, body.low-vision main.container { max-width: 100% !important; width: 100% !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; } /* Neutralize Tailwind max-width containers so every page uses full width. */ body.low-vision .max-w-xs, body.low-vision .max-w-sm, body.low-vision .max-w-md, body.low-vision .max-w-lg, body.low-vision .max-w-xl, body.low-vision .max-w-2xl, body.low-vision .max-w-3xl, body.low-vision .max-w-4xl, body.low-vision .max-w-5xl, body.low-vision .max-w-6xl, body.low-vision .max-w-7xl, body.low-vision .container { max-width: 100% !important; width: 100% !important; } /* ---------- Headings --------------------------------------------------- */ body.low-vision h1, body.low-vision .text-4xl, body.low-vision .text-3xl { font-size: 3.5rem !important; font-weight: 900 !important; line-height: 1.15 !important; color: #000000 !important; } body.low-vision h2, body.low-vision .text-2xl { font-size: 2.75rem !important; font-weight: 800 !important; line-height: 1.2 !important; color: #000000 !important; } body.low-vision h3, body.low-vision .text-xl, body.low-vision .text-lg { font-size: 2.25rem !important; font-weight: 800 !important; line-height: 1.25 !important; color: #000000 !important; } body.low-vision p, body.low-vision .text-base, body.low-vision .text-sm, body.low-vision .text-xs { font-size: 1.5rem !important; line-height: 1.7 !important; color: #000000 !important; } /* Don't shrink labels down. */ body.low-vision label:not([for="mobile-menu-toggle"]) { font-size: 1.5rem !important; font-weight: 800 !important; color: #000000 !important; margin-bottom: 0.5rem !important; display: inline-block !important; } /* Definition list terms (field labels on client profile) */ body.low-vision dt { font-size: 1.5rem !important; font-weight: 800 !important; color: #000000 !important; } body.low-vision dd { font-size: 1.75rem !important; color: #000000 !important; } /* ---------- Buttons, links, form controls ---------------------------- */ body.low-vision a, body.low-vision button, body.low-vision [role="button"], body.low-vision input[type="submit"], body.low-vision input[type="button"], body.low-vision .btn { font-size: 1.75rem !important; min-height: 4rem !important; padding: 1.25rem 2rem !important; border-width: 3px !important; border-radius: 0.75rem !important; font-weight: 800 !important; letter-spacing: 0.02em !important; } /* Inline links inside paragraphs shouldn't grow to button size. */ body.low-vision p a, body.low-vision li a, body.low-vision span a { min-height: 0 !important; padding: 0 !important; border: none !important; text-decoration: underline !important; text-underline-offset: 3px !important; text-decoration-thickness: 2px !important; color: #1d4ed8 !important; } body.low-vision input[type="text"], body.low-vision input[type="email"], body.low-vision input[type="password"], body.low-vision input[type="number"], body.low-vision input[type="search"], body.low-vision input[type="tel"], body.low-vision input[type="url"], body.low-vision input[type="date"], body.low-vision input[type="datetime-local"], body.low-vision select, body.low-vision textarea { font-size: 1.75rem !important; min-height: 4rem !important; padding: 1rem 1.25rem !important; border-width: 3px !important; border-color: #000000 !important; border-radius: 0.75rem !important; background-color: #ffffff !important; color: #000000 !important; } body.low-vision input[type="checkbox"], body.low-vision input[type="radio"] { width: 2.25rem !important; height: 2.25rem !important; transform: scale(1) !important; accent-color: #1d4ed8 !important; } /* ---------- Focus rings (critical for low-vision users) -------------- */ body.low-vision *:focus, body.low-vision *:focus-visible { outline: 4px solid #f59e0b !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.35) !important; } /* ---------- Contrast boost for Tailwind utility colors --------------- */ body.low-vision .text-gray-400, body.low-vision .text-gray-500, body.low-vision .text-gray-600 { color: #1f2937 !important; } body.low-vision .text-gray-700, body.low-vision .text-gray-800 { color: #000000 !important; } body.low-vision .bg-gray-50, body.low-vision .bg-gray-100 { background-color: #ffffff !important; } body.low-vision .border, body.low-vision .border-gray-100, body.low-vision .border-gray-200, body.low-vision .border-gray-300 { border-color: #111827 !important; border-width: 2px !important; } /* Primary / action color: solid indigo-700 instead of 500/600 for contrast. */ body.low-vision .bg-indigo-500, body.low-vision .bg-indigo-600, body.low-vision .hover\:bg-indigo-600:hover, body.low-vision .hover\:bg-indigo-700:hover { background-color: #1d4ed8 !important; color: #ffffff !important; } body.low-vision .text-indigo-600, body.low-vision .text-indigo-700 { color: #1d4ed8 !important; } /* Danger / destructive color: deep red for contrast. */ body.low-vision .bg-red-500, body.low-vision .bg-red-600 { background-color: #b91c1c !important; color: #ffffff !important; } /* ---------- Collapse multi-column grids to single column ------------- */ body.low-vision .grid.grid-cols-2, body.low-vision .grid.grid-cols-3, body.low-vision .grid.grid-cols-4, body.low-vision .grid.sm\:grid-cols-2, body.low-vision .grid.sm\:grid-cols-3, body.low-vision .grid.sm\:grid-cols-4, body.low-vision .grid.md\:grid-cols-2, body.low-vision .grid.md\:grid-cols-3, body.low-vision .grid.md\:grid-cols-4, body.low-vision .grid.lg\:grid-cols-2, body.low-vision .grid.lg\:grid-cols-3, body.low-vision .grid.lg\:grid-cols-4 { grid-template-columns: 1fr !important; gap: 1.5rem !important; } /* ---------- Cards & panels ------------------------------------------- */ body.low-vision .shadow, body.low-vision .shadow-md, body.low-vision .shadow-lg, body.low-vision .shadow-xl, body.low-vision .shadow-2xl { box-shadow: 0 0 0 3px #111827 !important; } body.low-vision .rounded, body.low-vision .rounded-md, body.low-vision .rounded-lg, body.low-vision .rounded-xl { border-radius: 1rem !important; } /* ---------- Dashboard simplifications (BTH-25) ----------------------- */ /* * Hide the stats-grid counts and the four chart partials so the dashboard * becomes a clean landing page with only the big action buttons. The * underlying DOM is unchanged; we just elide the noise for low-vision * users so they can focus on the primary actions. */ body.low-vision #dashboard-stats, body.low-vision .dashboard-charts, body.low-vision [id$="_chart"], body.low-vision [id$="-chart"], body.low-vision .chart-container, body.low-vision canvas, body.low-vision [data-controller~="chart"] { display: none !important; } /* Dashboard "quick actions" row: stack and supersize. */ body.low-vision .dashboard-quick-actions { display: flex !important; flex-direction: column !important; gap: 1.5rem !important; } body.low-vision .dashboard-quick-actions a, body.low-vision .dashboard-quick-actions button { width: 100% !important; min-height: 5rem !important; font-size: 1.75rem !important; justify-content: center !important; text-align: center !important; } /* ---------- Client profile simplification ----------------------------- */ /* * In low-vision mode the client show page strips away the stats-heavy * right column (event counts, service usage table, attendance calendar) * and shows only the essentials: photo, name, attributes, ban status. * The left column expands to full width. */ body.low-vision .client-stats-column { display: none !important; } /* Make the left info column span full width when stats column is hidden. */ body.low-vision .lg\:col-span-2 { grid-column: 1 / -1 !important; } /* Make the client photo larger and more prominent. */ body.low-vision .lg\:col-span-2 img { width: 100% !important; max-width: 500px !important; } /* Badge / pill text needs to be readable too. */ body.low-vision .rounded-full { font-size: 1.25rem !important; padding: 0.5rem 1rem !important; } /* ---------- Navigation ----------------------------------------------- */ /* Keep nav links and text at a reasonable size so they fit horizontally. */ body.low-vision nav a, body.low-vision nav button { font-size: 1.125rem !important; padding: 0.5rem 0.75rem !important; min-height: 0 !important; border-width: 0 !important; border-radius: 0 !important; } /* Restore border-bottom on active nav links. */ body.low-vision nav a.border-b-2 { border-bottom-width: 2px !important; } /* Keep nav helper text small. */ body.low-vision nav .text-sm, body.low-vision nav .text-xs { font-size: 1rem !important; } /* Shrink the logo block so it doesn't hog space. */ body.low-vision nav .h-10.w-10 { width: 2rem !important; height: 2rem !important; min-height: 0 !important; padding: 0 !important; } body.low-vision nav .ml-3.text-xl { font-size: 1.125rem !important; } /* Keep nav badges readable but compact. */ body.low-vision nav .rounded-full { font-size: 0.75rem !important; padding: 0.125rem 0.5rem !important; min-height: 0 !important; } /* ---------- Tables --------------------------------------------------- */ body.low-vision table { font-size: 1.5rem !important; border-collapse: collapse !important; width: 100% !important; } body.low-vision table th, body.low-vision table td { padding: 1.25rem 1.5rem !important; border: 3px solid #000000 !important; } body.low-vision table th { background-color: #e5e7eb !important; font-weight: 900 !important; color: #000000 !important; text-transform: none !important; letter-spacing: normal !important; } /* ---------- Reduce motion by default for this mode ------------------- */ body.low-vision *, body.low-vision *::before, body.low-vision *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; } /* ---------- Hide decorative SVG icons from assistive tech ------------ */ /* * Any inline without an aria-label or role="img" is decorative and * should be hidden from screen readers. We can't add attributes from * here, but we can enlarge them so sighted low-vision users can still * perceive them. */ body.low-vision svg { width: 2.25rem !important; height: 2.25rem !important; } /* ---------- Services index simplification ----------------------------- */ /* * On the services index, hide the table headers and extra columns * (next event, status, actions) and make the service names huge * so a low-vision user can just tap the one they want. */ body.low-vision .services-index table thead { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } body.low-vision .services-index table td { border: none !important; border-bottom: 3px solid #000000 !important; } /* Hide non-name columns on services index. */ body.low-vision .services-index table td:not(:first-child) { display: none !important; } /* Make service name links giant. */ body.low-vision .services-index table td .text-indigo-600.font-medium { font-size: 2.5rem !important; font-weight: 900 !important; color: #1d4ed8 !important; } /* Make the color dot bigger. */ body.low-vision .services-index table td .w-3.h-3.rounded-full { width: 1.25rem !important; height: 1.25rem !important; } /* colgroup widths become irrelevant in low-vision mode. */ body.low-vision table colgroup { display: none !important; } /* ---------- Clients index simplification ------------------------------ */ /* * Show photo and name big, hide DOB/gender/race/status/actions columns. * Keep the filters panel hidden too — just search + big name list. */ body.low-vision .clients-index table thead { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* Hide DOB (3rd), race (5th), actions (7th) columns. Keep gender (4th) and status (6th). */ body.low-vision .clients-index table td:nth-child(3), body.low-vision .clients-index table td:nth-child(5), body.low-vision .clients-index table td:nth-child(7) { display: none !important; } /* Make gender text bigger. */ body.low-vision .clients-index table td:nth-child(4) { font-size: 1.75rem !important; font-weight: 700 !important; } /* Hide phone number under the name. */ body.low-vision .clients-index table td .text-gray-500 { display: none !important; } /* Make client name link giant. */ body.low-vision .clients-index table td .text-indigo-600 { font-size: 2.5rem !important; font-weight: 900 !important; } /* Make the client name container not clip. */ body.low-vision .clients-index table td { white-space: normal !important; padding: 1.25rem 1rem !important; border: none !important; border-bottom: 3px solid #000000 !important; } /* Bigger photos in the client list. */ body.low-vision .clients-index .h-16.w-16 { width: 5rem !important; height: 5rem !important; } body.low-vision .clients-index .h-16.w-16 img { width: 5rem !important; height: 5rem !important; } /* Hide the advanced filters panel in low vision — just use the search box. */ body.low-vision .clients-index [data-controller="disclosure"] { display: none !important; } /* Hide the export/filter buttons row. */ body.low-vision .clients-index .hidden.sm\:block { display: none !important; } /* ---------- Approval list member rows --------------------------------- */ /* * The approval list has a mobile label and a desktop link for each * client name. In low-vision mode, show only the desktop link (which * is the clickable one) and hide the mobile label to prevent duplication. */ body.low-vision .member-row label.sm\:hidden { display: none !important; } body.low-vision .member-row .hidden.sm\:block { display: block !important; } /* Hide start/end date columns (header + data). */ body.low-vision .approval-list-dates { display: none !important; } body.low-vision .member-row td:nth-child(2), body.low-vision .member-row td:nth-child(3) { display: none !important; } /* Force status and actions columns visible (override Tailwind hidden sm:table-cell). */ body.low-vision .approval-list-table thead th:nth-child(4), body.low-vision .approval-list-table thead th:nth-child(5), body.low-vision .member-row td:nth-child(4), body.low-vision .member-row td:nth-child(5) { display: table-cell !important; } /* The expandable detail rows should stay hidden on desktop. */ body.low-vision .member-detail.sm\:hidden { display: none !important; } /* The hidden checkbox toggle should stay hidden. */ body.low-vision .member-toggle.hidden { display: none !important; } /* ---------- Service show: prominent current event ---------------------- */ /* * In low-vision mode the service show page transforms the current/next * event from a small dt/dd into a huge, prominent banner. The rest of the * Service Information card (type, capacity, times) is hidden as noise. * Recent events (histogram charts) are also hidden. */ /* Hide the service details card items we don't need. */ body.low-vision .service-details-card dl > div:not(.service-current-event) { display: none !important; } /* Collapse the dl grid to single column and remove gaps. */ body.low-vision .service-details-card dl { grid-template-columns: 1fr !important; gap: 0 !important; } /* Make the current event div a big centered banner. */ body.low-vision .service-current-event { text-align: center !important; padding: 2rem 1rem !important; } /* The "Current Event" / "Next Event" label — big and bold. */ body.low-vision .service-current-event dt { font-size: 2.5rem !important; font-weight: 900 !important; color: #000000 !important; margin-bottom: 1rem !important; } /* The event name link — huge. */ body.low-vision .service-current-event dd a { font-size: 3rem !important; font-weight: 900 !important; color: #1d4ed8 !important; text-decoration: none !important; border: none !important; padding: 0 !important; min-height: 0 !important; } /* The "In Progress" badge — make it a huge green pill. */ body.low-vision .service-current-event .rounded-full { font-size: 2.5rem !important; padding: 0.75rem 2rem !important; background-color: #166534 !important; color: #ffffff !important; display: inline-block !important; margin-top: 0.75rem !important; } /* Hide the verbose datetime line — the service name is enough. */ body.low-vision .service-event-datetime { display: none !important; } /* Hide verbose date/badge info in upcoming events list. */ body.low-vision .service-show ul.divide-y .text-gray-500, body.low-vision .service-show ul.divide-y .text-gray-400, body.low-vision .service-show ul.divide-y .rounded-full { display: none !important; } /* In low vision mode, show dates instead of event names in upcoming events. */ body.low-vision .service-show ul.divide-y .upcoming-event-name { display: none !important; } body.low-vision .service-show ul.divide-y .upcoming-event-date { display: inline !important; } /* Make upcoming event text bigger. */ body.low-vision .service-show ul.divide-y .text-sm.font-medium { font-size: 2rem !important; font-weight: 800 !important; } /* Hide recent events section in low vision — not needed. */ body.low-vision .service-show .recent-events-section { display: none !important; } /* ---------- Calendar: convert grid to list ----------------------------- */ /* * The simple_calendar gem renders a 7-column . In low-vision mode * we flatten it into a vertical list: one row per day (empty days hidden), * with the day number as a prominent header and events as large list items. */ /* Flatten table structure to block layout. */ body.low-vision .simple-calendar table, body.low-vision .simple-calendar tbody, body.low-vision .simple-calendar tr { display: block !important; width: 100% !important; } /* Visually hide day-of-week headers — not useful in list view, but keep for screen readers. */ body.low-vision .simple-calendar thead { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* Each day cell becomes a full-width block. */ body.low-vision .simple-calendar td { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; border: none !important; border-bottom: 3px solid #000000 !important; padding: 1rem 1.5rem !important; } /* Hide day cells that have no events (uses :has selector). */ body.low-vision .simple-calendar td:not(:has(.mt-1)) { display: none !important; } /* Hide prev/next month day cells entirely. */ body.low-vision .simple-calendar td.prev-month, body.low-vision .simple-calendar td.next-month { display: none !important; } /* Day number — prominent date header. */ body.low-vision .simple-calendar td .font-semibold.text-gray-700 { font-size: 2.25rem !important; font-weight: 900 !important; color: #000000 !important; margin-bottom: 0.75rem !important; } /* Today highlight. */ body.low-vision .simple-calendar td .bg-yellow-50, body.low-vision .simple-calendar td div[class*="bg-yellow"] { background-color: transparent !important; } body.low-vision .simple-calendar td.today { background-color: #fef9c3 !important; } /* Event blocks — full width, large text, no truncation. */ body.low-vision .simple-calendar td a.block { display: block !important; padding: 0.75rem 1rem !important; margin-bottom: 0.5rem !important; border-radius: 0.75rem !important; border-left-width: 6px !important; min-height: 0 !important; } body.low-vision .simple-calendar td a.block .truncate { overflow: visible !important; text-overflow: unset !important; white-space: normal !important; } body.low-vision .simple-calendar td a.block .font-medium { font-size: 1.75rem !important; font-weight: 800 !important; } body.low-vision .simple-calendar td a.block .truncate:last-child { font-size: 1.5rem !important; } /* The calendar nav description text. */ body.low-vision .simple-calendar + p, body.low-vision p.mt-2.text-sm.text-gray-700 { font-size: 1.5rem !important; } /* Skip link that becomes visible on focus (see layout). */ .skip-link:focus { clip: auto !important; height: auto !important; width: auto !important; overflow: visible !important; }