/* =================================================================== Accessibility toolbar - Toggle button in nav (desktop + mobile, mobile sits left of burger) - Popover panel anchored under the nav - Modes applied as classes on : a11y-light, a11y-contrast, a11y-text-110, a11y-text-125 =================================================================== */ /* ---------- Toggle button ---------- */ .a11y-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(34, 197, 94, 0.10); border: 1px solid rgba(34, 197, 94, 0.30); color: #4ade80; cursor: pointer; padding: 0; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; flex-shrink: 0; } .a11y-toggle:hover { background: rgba(34, 197, 94, 0.18); border-color: rgba(34, 197, 94, 0.55); } .a11y-toggle:focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; } .a11y-toggle.is-open { background: rgba(34, 197, 94, 0.25); border-color: rgba(34, 197, 94, 0.7); } .a11y-toggle--mobile { display: none; } .a11y-toggle--desktop { display: inline-flex; } @media (max-width: 992px) { .a11y-toggle--mobile { display: inline-flex !important; margin-left: auto; margin-right: 0.85rem; width: 44px; height: 44px; background: transparent; border: none; color: #4ade80; position: relative; z-index: 2400; } .a11y-toggle--mobile:hover { background: transparent; border: none; color: #22c55e; } .a11y-toggle--mobile.is-open { background: rgba(34, 197, 94, 0.18); border-radius: 8px; } .a11y-toggle--desktop { display: none; } /* Pull the burger (which becomes the X when open) slightly inward so the close icon doesn't sit right at the screen edge */ .nav-bar.menu-open .nav-toggle { transform: translateX(-6px); } } /* ---------- Panel ---------- */ .a11y-panel { position: fixed; top: 84px; right: 1.5rem; z-index: 2400; width: min(320px, calc(100vw - 2rem)); background: linear-gradient(160deg, rgba(15, 23, 42, 0.98), rgba(10, 14, 39, 0.96)); border: 1px solid rgba(34, 197, 94, 0.35); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(34, 197, 94, 0.08); padding: 1rem; color: #fff; opacity: 0; transform: translateY(-8px); transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none; } .a11y-panel:not([hidden]) { opacity: 1; transform: translateY(0); pointer-events: auto; } @media (max-width: 480px) { .a11y-panel { right: 0.75rem; left: 0.75rem; width: auto; } } .a11y-panel-inner { display: flex; flex-direction: column; gap: 0.4rem; } .a11y-panel-title { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: #4ade80; font-weight: 600; margin: 0 0 0.4rem; } .a11y-option, .a11y-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.75rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(34, 197, 94, 0.15); border-radius: 10px; color: #e5e7eb; font-size: 0.95rem; text-align: left; width: 100%; cursor: pointer; font-family: inherit; transition: background 0.2s ease, border-color 0.2s ease; } .a11y-option:hover { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.35); } .a11y-option[aria-pressed="true"] { background: rgba(34, 197, 94, 0.15); border-color: rgba(34, 197, 94, 0.55); color: #fff; } .a11y-option-icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: #4ade80; flex-shrink: 0; } .a11y-option-label { flex: 1; } .a11y-option-state { width: 32px; height: 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); position: relative; flex-shrink: 0; transition: background 0.2s ease; } .a11y-option-state::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 0.2s ease; } .a11y-option[aria-pressed="true"] .a11y-option-state { background: #22c55e; } .a11y-option[aria-pressed="true"] .a11y-option-state::after { transform: translateX(14px); } .a11y-row { cursor: default; } .a11y-text-controls { display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; } .a11y-text-btn { width: 32px; height: 32px; border-radius: 8px; background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.35); color: #4ade80; font-weight: 700; font-size: 0.85rem; cursor: pointer; font-family: inherit; transition: background 0.2s ease, border-color 0.2s ease; } .a11y-text-btn:hover { background: rgba(34, 197, 94, 0.22); border-color: rgba(34, 197, 94, 0.55); } .a11y-text-btn:disabled { opacity: 0.4; cursor: not-allowed; } .a11y-text-current { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; font-size: 0.85rem; color: #cbd5e1; } .a11y-reset { margin-top: 0.4rem; padding: 0.5rem 0.75rem; background: transparent; border: 1px solid rgba(148, 163, 184, 0.3); color: #cbd5e1; border-radius: 8px; cursor: pointer; font-size: 0.85rem; font-family: inherit; transition: border-color 0.2s ease, color 0.2s ease; } .a11y-reset:hover { border-color: rgba(34, 197, 94, 0.5); color: #fff; } /* =================================================================== Modes (applied to ) =================================================================== */ /* Lighter background: lifts the navy gradient and card tints */ html.a11y-light body { background: linear-gradient(to bottom, #162847 0%, #1f3a6b 50%, #25437c 100%) !important; } html.a11y-light .hero-viewport::after, html.a11y-light .br-hero::after { background: linear-gradient(to bottom, transparent 0%, rgba(22, 40, 71, 0.4) 55%, #1f3a6b 100%) !important; } /* Higher contrast: stronger text, tighter borders, less translucency */ html.a11y-contrast { --c-text-muted: #ffffff; --c-text-dim: #e5e7eb; } html.a11y-contrast body, html.a11y-contrast p, html.a11y-contrast li, html.a11y-contrast .sp-lead, html.a11y-contrast .sp-card p, html.a11y-contrast .srv-card p, html.a11y-contrast .section-subtitle, html.a11y-contrast .footer-tagline, html.a11y-contrast .footer-links a { color: #ffffff !important; } html.a11y-contrast .sp-card, html.a11y-contrast .srv-card, html.a11y-contrast .benefit-card, html.a11y-contrast .service-card, html.a11y-contrast .nav-dropdown-menu { border-color: rgba(74, 222, 128, 0.6) !important; background: rgba(10, 14, 39, 0.92) !important; } html.a11y-contrast a:not(.btn):not(.sp-btn):not(.nav-link-cta):not(.lang-btn) { text-decoration: underline; text-underline-offset: 2px; } /* Text scaling — applied to the root font-size so rem-based sizes scale */ html.a11y-text-110 { font-size: 110%; } html.a11y-text-125 { font-size: 125%; }