/* ============================================================ A11Y-WIDGET.CSS — Old Town Renovations, LLC Self-built accessibility preferences panel: text size, high contrast, reduced motion, underlined links, simplified font. This is a display-preference convenience tool, not a substitute for the site's underlying WCAG 2.1 AA work — see accessibility.html. ============================================================ */ .a11y-widget { position: fixed; bottom: 2rem; left: 2rem; z-index: 1500; } .a11y-toggle { width: 56px; height: 56px; border-radius: 50%; background: var(--clr-walnut); color: var(--clr-white); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); transition: transform var(--transition), background var(--transition); } .a11y-toggle:hover { background: var(--clr-oak); transform: translateY(-2px); } .a11y-toggle svg { width: 28px; height: 28px; } .a11y-panel { position: absolute; bottom: 68px; left: 0; width: 300px; max-width: calc(100vw - 2rem); max-height: 70vh; overflow-y: auto; background: var(--clr-white); border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid var(--clr-border); padding: 1.5rem; } .a11y-panel[hidden] { display: none; } .a11y-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--clr-border); } .a11y-panel-header h2 { font-size: 1.05rem; margin: 0; } .a11y-panel-close { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--clr-text-lt); transition: background var(--transition), color var(--transition); } .a11y-panel-close:hover { background: var(--clr-cream-dk); color: var(--clr-text); } .a11y-panel-close svg { width: 16px; height: 16px; } .a11y-control-group { margin-bottom: 1.25rem; } .a11y-control-label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--clr-text-md); margin-bottom: 0.5rem; } .a11y-btn-row { display: flex; gap: 0.5rem; } .a11y-btn-row button { flex: 1; padding: 0.55rem 0; border: 1.5px solid var(--clr-border); border-radius: var(--radius-sm); font-weight: 700; font-size: 0.95rem; color: var(--clr-text); background: var(--clr-cream); transition: background var(--transition), border-color var(--transition); } .a11y-btn-row button:hover { background: var(--clr-cream-dk); border-color: var(--clr-amber); } .a11y-switch-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0; font-size: 0.9rem; color: var(--clr-text-md); cursor: pointer; border-bottom: 1px solid var(--clr-cream-dk); } .a11y-switch-row:last-of-type { border-bottom: none; } .a11y-switch-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--clr-amber-dk); flex-shrink: 0; } .a11y-reset-btn { width: 100%; margin-top: 0.5rem; padding: 0.7rem 0; border: 1.5px solid var(--clr-border); border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 700; color: var(--clr-text-md); background: var(--clr-cream); transition: background var(--transition); } .a11y-reset-btn:hover { background: var(--clr-cream-dk); } .a11y-panel-footnote { margin-top: 1rem; font-size: 0.75rem; line-height: 1.5; color: var(--clr-text-lt); } .a11y-panel-footnote a { color: var(--clr-amber-dk); font-weight: 700; } /* ─── EFFECT CLASSES (applied to ) ----------------------------------------- */ html.a11y-text-lg { font-size: 112.5%; } html.a11y-text-xl { font-size: 125%; } html.a11y-underline-links a { text-decoration: underline !important; } html.a11y-simple-font h1, html.a11y-simple-font h2, html.a11y-simple-font h3, html.a11y-simple-font h4, html.a11y-simple-font .nav-logo-name, html.a11y-simple-font .cta-phone, html.a11y-simple-font .stat-number { font-family: var(--font-body) !important; } html.a11y-reduce-motion .reveal { opacity: 1 !important; transform: none !important; } html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html.a11y-high-contrast { --clr-text: #000000; --clr-text-md: #000000; --clr-text-lt: #000000; --clr-cream: #FFFFFF; --clr-cream-dk: #FFFFFF; --clr-border: #000000; --clr-amber-dk: #6B4500; } html.a11y-high-contrast .site-header.scrolled, html.a11y-high-contrast .page-header, html.a11y-high-contrast .cta-banner, html.a11y-high-contrast .site-footer, html.a11y-high-contrast .testimonials, html.a11y-high-contrast .contact-info-card, html.a11y-high-contrast .service-sidebar-card { background: #000000 !important; } html.a11y-high-contrast .cta-banner { background-image: none !important; } html.a11y-high-contrast .btn-primary { background: #000000; color: #FFFFFF; border: 2px solid #FFFFFF; } /* --- RESPONSIVE ----------------------------------------- */ @media (max-width: 480px) { .a11y-widget { bottom: 1.25rem; left: 1.25rem; } .a11y-panel { width: calc(100vw - 2.5rem); } }