/* ConsultADHD — accessibility widget + preference styles */ /* Early FOUC helpers are set via data attributes on */ html[data-a11y-text="large"] { font-size: 112.5%; } html[data-a11y-text="xlarge"] { font-size: 125%; } /* Colour / colour-vision modes — apply to page chrome, not the a11y panel */ html[data-a11y-colour="protanopia"] .topbar, html[data-a11y-colour="protanopia"] .site-navbar, html[data-a11y-colour="protanopia"] .router, html[data-a11y-colour="protanopia"] footer, html[data-a11y-colour="protanopia"] .site-notif, html[data-a11y-colour="protanopia"] .loader { filter: url(#a11y-protanopia); } html[data-a11y-colour="deuteranopia"] .topbar, html[data-a11y-colour="deuteranopia"] .site-navbar, html[data-a11y-colour="deuteranopia"] .router, html[data-a11y-colour="deuteranopia"] footer, html[data-a11y-colour="deuteranopia"] .site-notif, html[data-a11y-colour="deuteranopia"] .loader { filter: url(#a11y-deuteranopia); } html[data-a11y-colour="tritanopia"] .topbar, html[data-a11y-colour="tritanopia"] .site-navbar, html[data-a11y-colour="tritanopia"] .router, html[data-a11y-colour="tritanopia"] footer, html[data-a11y-colour="tritanopia"] .site-notif, html[data-a11y-colour="tritanopia"] .loader { filter: url(#a11y-tritanopia); } html[data-a11y-colour="grayscale"] .topbar, html[data-a11y-colour="grayscale"] .site-navbar, html[data-a11y-colour="grayscale"] .router, html[data-a11y-colour="grayscale"] footer, html[data-a11y-colour="grayscale"] .site-notif, html[data-a11y-colour="grayscale"] .loader { filter: grayscale(1); } html[data-a11y-colour="softyellow"] { --nav-bg: #FFF8DC; --sand: #FFF8DC; --text-dark: #2a2410; --text-muted: #5c5340; --brand-teal: #2f6b4f; --brand-teal-dark: #245540; --topbar-bg: #2f6b4f; --footer-upper-bg: #2f6b4f; } html[data-a11y-colour="softyellow"] body { background: #FFF8DC !important; color: #2a2410 !important; } html[data-a11y-colour="dark"] { --nav-bg: #0f1c18; --sand: #0f1c18; --text-dark: #eef6f2; --text-muted: #a8c0b4; --brand-teal: #3dba96; --brand-teal-dark: #2f9a7c; --brand-teal-deep: #eef6f2; --topbar-bg: #0a1411; --footer-upper-bg: #0a1411; --footer-lower-bg: #050a08; } html[data-a11y-colour="dark"] body { background: #0f1c18 !important; color: #eef6f2 !important; } html[data-a11y-colour="dark"] .site-navbar, html[data-a11y-colour="dark"] .adm-card, html[data-a11y-colour="dark"] .adm-modal, html[data-a11y-colour="dark"] .a11y-panel, html[data-a11y-colour="dark"] .a11y-toggle, html[data-a11y-colour="dark"] .a11y-seg { background: #162821 !important; color: #eef6f2; border-color: rgba(255,255,255,0.1) !important; } html[data-a11y-colour="dark"] .a11y-panel-head { background: #1a3028 !important; border-color: rgba(255,255,255,0.1) !important; } html[data-a11y-colour="dark"] .a11y-title, html[data-a11y-colour="dark"] .a11y-toggle strong { color: #eef6f2 !important; } html[data-a11y-colour="dark"] .adm-input, html[data-a11y-colour="dark"] .asmnt-input { background: #0f1c18 !important; color: #eef6f2 !important; border-color: rgba(255,255,255,0.18) !important; } html[data-a11y-contrast] { --brand-teal: #027a5f; --brand-teal-dark: #015c47; --brand-teal-deep: #041610; --text-dark: #000; --text-muted: #1a2e26; --nav-bg: #fff; --sand: #fff; --topbar-bg: #015c47; --footer-upper-bg: #015c47; --footer-lower-bg: #000; } html[data-a11y-contrast] body { background: #fff !important; color: #000 !important; } /* Content / nav text links — keep strong dark colour on light backgrounds */ html[data-a11y-contrast] .router a:not(.btn-preassess):not(.btn-contact):not(.pt-survey-btn):not(.btn-adm-primary):not(.btn-adm-secondary):not(.btn-adm-danger):not(.social-icon):not(.a11y-fab), html[data-a11y-contrast] .site-navbar .nav-link, html[data-a11y-contrast] .cookie-text a, html[data-a11y-contrast] .a11y-more { color: #015c47 !important; text-decoration-thickness: 2px; } html[data-a11y-contrast] .site-navbar, html[data-a11y-contrast] .topbar { border-bottom: 2px solid #000; } /* Dark chrome (topbar + footer) must stay light-on-dark */ html[data-a11y-contrast] .topbar, html[data-a11y-contrast] .topbar a, html[data-a11y-contrast] .topbar .office-hours, html[data-a11y-contrast] .a11y-topbar-btn { color: #fff !important; } html[data-a11y-contrast] footer, html[data-a11y-contrast] footer a, html[data-a11y-contrast] .footer-upper, html[data-a11y-contrast] .footer-lower, html[data-a11y-contrast] .footer-tagline, html[data-a11y-contrast] .footer-heading, html[data-a11y-contrast] .footer-logo-wordmark, html[data-a11y-contrast] .footer-links li a, html[data-a11y-contrast] .footer-contact-item, html[data-a11y-contrast] .footer-lower a, html[data-a11y-contrast] .footer-lower .social-icon { color: #fff !important; } html[data-a11y-contrast] .footer-heading, html[data-a11y-contrast] .footer-tagline, html[data-a11y-contrast] .footer-lower { opacity: 1; } /* Solid CTAs keep white label text */ html[data-a11y-contrast] .btn-preassess, html[data-a11y-contrast] .btn-contact, html[data-a11y-contrast] .a11y-fab, html[data-a11y-contrast] .cookie-btn-primary { color: #fff !important; } html[data-a11y-spacing] body, html[data-a11y-spacing] p, html[data-a11y-spacing] li, html[data-a11y-spacing] .nav-link, html[data-a11y-spacing] label, html[data-a11y-spacing] input, html[data-a11y-spacing] textarea, html[data-a11y-spacing] button, html[data-a11y-spacing] .adm-sub, html[data-a11y-spacing] .success-sub { line-height: 1.85 !important; letter-spacing: 0.03em !important; word-spacing: 0.08em; } html[data-a11y-links] a:not(.btn-preassess):not(.btn-contact):not(.a11y-fab):not(.social-icon):not(.pt-survey-btn):not(.btn-adm-primary):not(.btn-adm-secondary):not(.btn-adm-danger) { text-decoration: underline !important; text-underline-offset: 3px; } html[data-a11y-motion] *, html[data-a11y-motion] *::before, html[data-a11y-motion] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Stronger focus for keyboard users when panel tools are active */ html[data-a11y-contrast] :focus-visible, html[data-a11y-links] :focus-visible { outline: 3px solid #027a5f !important; outline-offset: 3px !important; } /* ── Floating control ─────────────────────────── */ #a11yRoot { position: fixed; z-index: 9500; left: 20px; bottom: 20px; font-family: 'DM Sans', sans-serif; } .a11y-fab { display: inline-flex; align-items: center; gap: 10px; background: #039172; color: #fff; border: none; border-radius: 50px; padding: 12px 18px 12px 14px; font-family: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; box-shadow: 0 8px 28px rgba(11, 47, 35, 0.22); transition: background 0.18s, transform 0.15s, box-shadow 0.18s; } .a11y-fab:hover { background: #027a5f; transform: translateY(-1px); box-shadow: 0 10px 32px rgba(11, 47, 35, 0.28); } .a11y-fab:focus-visible { outline: 3px solid #0B2F23; outline-offset: 3px; } .a11y-fab i { font-size: 1.35rem; line-height: 1; } .a11y-fab-label { letter-spacing: -0.01em; } .a11y-backdrop { position: fixed; inset: 0; background: rgba(11, 47, 35, 0.28); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: -1; } .a11y-panel { position: absolute; left: 0; bottom: calc(100% + 12px); width: min(360px, calc(100vw - 40px)); background: #F2EFE9; border: 1.5px solid rgba(11, 47, 35, 0.1); border-radius: 20px; box-shadow: 0 18px 48px rgba(11, 47, 35, 0.2); overflow: hidden; animation: a11yIn 0.2s ease both; } @keyframes a11yIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .a11y-panel-head { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; padding: 20px 20px 14px; background: #fff; border-bottom: 1px solid rgba(11, 47, 35, 0.08); } .a11y-title { margin: 0 0 4px; font-size: 1.1rem; font-weight: 800; color: #0B2F23; letter-spacing: -0.02em; } .a11y-sub { margin: 0; font-size: 0.8rem; font-weight: 500; color: #4a6358; line-height: 1.45; max-width: 260px; } .a11y-close { width: 36px; height: 36px; border: none; border-radius: 10px; background: rgba(11, 47, 35, 0.06); color: #0B2F23; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .a11y-close:hover { background: rgba(11, 47, 35, 0.12); } .a11y-body { padding: 16px 18px 8px; display: flex; flex-direction: column; gap: 10px; max-height: min(62vh, 520px); overflow-y: auto; } .a11y-group { margin-bottom: 4px; } .a11y-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #4a6358; margin-bottom: 8px; } .a11y-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: #fff; padding: 5px; border-radius: 12px; border: 1.5px solid rgba(11, 47, 35, 0.08); } .a11y-seg-btn { border: none; background: transparent; border-radius: 9px; padding: 9px 6px; font-family: inherit; font-size: 0.78rem; font-weight: 700; color: #4a6358; cursor: pointer; transition: background 0.15s, color 0.15s; } .a11y-seg-btn:hover { color: #0B2F23; background: rgba(3, 145, 114, 0.08); } .a11y-seg-btn.on { background: #039172; color: #fff; } .a11y-colour-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .a11y-colour-btn { display: flex; align-items: center; gap: 8px; border: 1.5px solid rgba(11, 47, 35, 0.1); background: #fff; border-radius: 12px; padding: 9px 10px; font-family: inherit; font-size: 0.75rem; font-weight: 700; color: #4a6358; cursor: pointer; text-align: left; transition: border-color 0.15s, background 0.15s, color 0.15s; } .a11y-colour-btn:hover { border-color: rgba(3, 145, 114, 0.4); color: #0B2F23; } .a11y-colour-btn.on { border-color: #039172; background: rgba(3, 145, 114, 0.08); color: #0B2F23; box-shadow: 0 0 0 1px #039172; } .a11y-swatch { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid rgba(11, 47, 35, 0.15); } .a11y-swatch-default { background: linear-gradient(135deg, #039172 50%, #F2EFE9 50%); } .a11y-swatch-dark { background: #0f1c18; border-color: #3dba96; } .a11y-swatch-yellow { background: #FFE566; } .a11y-swatch-gray { background: linear-gradient(90deg, #222, #bbb); } .a11y-swatch-pro { background: linear-gradient(90deg, #8a7a4a, #6a8a7a); } .a11y-swatch-deu { background: linear-gradient(90deg, #7a8a5a, #5a7a8a); } .a11y-swatch-tri { background: linear-gradient(90deg, #c4a040, #5a8a9a); } .a11y-hint { margin: 8px 0 0; font-size: 0.72rem; color: #4a6358; line-height: 1.4; font-weight: 500; } html[data-a11y-hide-fab] .a11y-fab { display: none !important; } /* When FAB is hidden, keep panel anchored to the corner */ html[data-a11y-hide-fab] .a11y-panel { position: fixed; left: 20px; bottom: 20px; } .a11y-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #fff; border: 1.5px solid rgba(11, 47, 35, 0.08); border-radius: 14px; padding: 12px 14px; cursor: pointer; } .a11y-toggle strong { display: block; font-size: 0.88rem; font-weight: 700; color: #0B2F23; margin-bottom: 2px; } .a11y-toggle small { display: block; font-size: 0.75rem; color: #4a6358; font-weight: 500; line-height: 1.35; } .a11y-toggle input { width: 42px; height: 24px; accent-color: #039172; flex-shrink: 0; cursor: pointer; } .a11y-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px 16px; } .a11y-reset { border: 1.5px solid rgba(11, 47, 35, 0.14); background: transparent; color: #4a6358; font-family: inherit; font-size: 0.8rem; font-weight: 700; border-radius: 50px; padding: 8px 14px; cursor: pointer; } .a11y-reset:hover { background: rgba(11, 47, 35, 0.05); color: #0B2F23; } .a11y-more { font-size: 0.8rem; font-weight: 700; color: #039172; text-decoration: none; } .a11y-more:hover { text-decoration: underline; } /* Topbar shortcut */ .topbar .a11y-topbar-btn { display: inline-flex; align-items: center; gap: 6px; color: #fff; text-decoration: none; opacity: 0.92; font-weight: 600; padding: 4px 10px; border-radius: 50px; background: rgba(255, 255, 255, 0.14); border: none; font-family: inherit; font-size: 0.78rem; cursor: pointer; transition: background 0.2s, opacity 0.2s; } .topbar .a11y-topbar-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.26); } .topbar .a11y-topbar-btn i { font-size: 0.95rem; } @media (max-width: 520px) { #a11yRoot { left: 14px; bottom: 14px; right: 14px; } .a11y-fab { width: auto; } .a11y-fab-label { display: none; } .a11y-fab { padding: 13px; border-radius: 50%; } .a11y-panel { left: 0; right: 0; width: auto; } html[data-a11y-hide-fab] .a11y-panel { left: 14px; right: 14px; bottom: 14px; width: auto; } } /* Hide fab label collision with print */ @media print { #a11yRoot { display: none !important; } }