/* ============================================================ GOODLADY FINANCE – ACCESSIBILITY VISION MODES v1.0 Modes: default | black | white | protanopia | deuteranopia | tritanopia Applied via data-a11y-mode="" on Widget triggers these; also auto-respects OS preferences. ============================================================ */ /* --- SVG Filter Definitions (injected via JS, referenced here) --- */ .gl-a11y-filters { position: absolute; width: 0; height: 0; overflow: hidden; } /* ============================================================ MODE: HIGH-CONTRAST BLACK (data-a11y-mode="black") Deep black background, pure white text, gold highlights. ============================================================ */ [data-a11y-mode="black"] { --primary-color: #000000; --primary-dark: #000000; --secondary-color: #ffdd00; --accent-color: #00ffcc; --bg-light: #000000; --bg-white: #0a0a0a; --text-dark: #ffffff; --text-muted: #cccccc; --text-light: #ffffff; --brand-teal: #000000; --brand-gold: #ffdd00; --glass-bg: rgba(0, 0, 0, 0.98); --glass-border: rgba(255, 221, 0, 0.8); --bg-premium-dark: #000000; --card-premium-dark: #0a0a0a; --bg-premium-gradient: #000000; --glow-secondary: rgba(255, 221, 0, 0.5); } [data-a11y-mode="black"] body { background: #000 !important; color: #fff !important; } [data-a11y-mode="black"] header, [data-a11y-mode="black"] nav, [data-a11y-mode="black"] footer, [data-a11y-mode="black"] .announcement-bar { background: #000 !important; border-color: #ffdd00 !important; } [data-a11y-mode="black"] a { color: #ffdd00 !important; } [data-a11y-mode="black"] a:hover { color: #fff !important; text-decoration: underline !important; } [data-a11y-mode="black"] .btn-primary, [data-a11y-mode="black"] .btn-cta, [data-a11y-mode="black"] button[type="submit"] { -webkit-tap-highlight-color: transparent; background: #ffdd00 !important; color: #000 !important; border: 2px solid #ffdd00 !important; font-weight: 800 !important; } [data-a11y-mode="black"] .glass-card, [data-a11y-mode="black"] .tile, [data-a11y-mode="black"] .benefit-card, [data-a11y-mode="black"] .tech-card, [data-a11y-mode="black"] .calc-card, [data-a11y-mode="black"] .faq-item { background: #0a0a0a !important; border: 2px solid #ffdd00 !important; box-shadow: none !important; backdrop-filter: none !important; } [data-a11y-mode="black"] h1, [data-a11y-mode="black"] h2, [data-a11y-mode="black"] h3, [data-a11y-mode="black"] h4, [data-a11y-mode="black"] p, [data-a11y-mode="black"] label, [data-a11y-mode="black"] li, [data-a11y-mode="black"] span { color: #fff !important; } [data-a11y-mode="black"] input, [data-a11y-mode="black"] select, [data-a11y-mode="black"] textarea { background: #000 !important; color: #fff !important; border: 2px solid #ffdd00 !important; } [data-a11y-mode="black"] input:focus, [data-a11y-mode="black"] select:focus, [data-a11y-mode="black"] textarea:focus { outline: 3px solid #ffdd00 !important; outline-offset: 2px !important; } [data-a11y-mode="black"] img { filter: brightness(0.9) contrast(1.2) grayscale(0.1); } /* ============================================================ MODE: HIGH-CONTRAST WHITE (data-a11y-mode="white") Pure white background, near-black text, strong blue-teal accents. ============================================================ */ [data-a11y-mode="white"] { --primary-color: #ffffff; --primary-dark: #f0f0f0; --secondary-color: #0055cc; --accent-color: #007766; --bg-light: #ffffff; --bg-white: #ffffff; --text-dark: #000000; --text-muted: #333333; --text-light: #000000; --brand-teal: #004433; --brand-gold: #0055cc; --glass-bg: rgba(255, 255, 255, 0.98); --glass-border: rgba(0, 85, 204, 0.6); --bg-premium-dark: #ffffff; --card-premium-dark: #f5f5f5; --bg-premium-gradient: #ffffff; --glow-secondary: rgba(0, 85, 204, 0.2); } [data-a11y-mode="white"] body { background: #fff !important; color: #000 !important; } [data-a11y-mode="white"] header, [data-a11y-mode="white"] nav, [data-a11y-mode="white"] footer, [data-a11y-mode="white"] .announcement-bar { background: #fff !important; border-color: #0055cc !important; color: #000 !important; } [data-a11y-mode="white"] a { color: #0055cc !important; } [data-a11y-mode="white"] a:hover { color: #003388 !important; text-decoration: underline !important; } [data-a11y-mode="white"] .btn-primary, [data-a11y-mode="white"] .btn-cta, [data-a11y-mode="white"] button[type="submit"] { -webkit-tap-highlight-color: transparent; background: #0055cc !important; color: #fff !important; border: 2px solid #0055cc !important; font-weight: 800 !important; } [data-a11y-mode="white"] .glass-card, [data-a11y-mode="white"] .tile, [data-a11y-mode="white"] .benefit-card, [data-a11y-mode="white"] .tech-card, [data-a11y-mode="white"] .calc-card, [data-a11y-mode="white"] .faq-item { background: #f5f5f5 !important; border: 2px solid #0055cc !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; backdrop-filter: none !important; } [data-a11y-mode="white"] h1, [data-a11y-mode="white"] h2, [data-a11y-mode="white"] h3, [data-a11y-mode="white"] h4, [data-a11y-mode="white"] p, [data-a11y-mode="white"] label, [data-a11y-mode="white"] li, [data-a11y-mode="white"] span { color: #000 !important; } [data-a11y-mode="white"] input, [data-a11y-mode="white"] select, [data-a11y-mode="white"] textarea { background: #fff !important; color: #000 !important; border: 2px solid #0055cc !important; } [data-a11y-mode="white"] input:focus, [data-a11y-mode="white"] select:focus, [data-a11y-mode="white"] textarea:focus { outline: 3px solid #0055cc !important; outline-offset: 2px !important; } /* ============================================================ MODE: PROTANOPIA – Red-blind (data-a11y-mode="protanopia") Shifts red → blue-yellow spectrum via SVG matrix filter. ============================================================ */ [data-a11y-mode="protanopia"] body, [data-a11y-mode="protanopia"] img, [data-a11y-mode="protanopia"] video, [data-a11y-mode="protanopia"] canvas { filter: url(#gl-protanopia) !important; } [data-a11y-mode="protanopia"] { --secondary-color: #b3b300; --brand-gold: #b3b300; --accent-color: #0077cc; } /* ============================================================ MODE: DEUTERANOPIA – Green-blind (data-a11y-mode="deuteranopia") Shifts green → blue-yellow spectrum. ============================================================ */ [data-a11y-mode="deuteranopia"] body, [data-a11y-mode="deuteranopia"] img, [data-a11y-mode="deuteranopia"] video, [data-a11y-mode="deuteranopia"] canvas { filter: url(#gl-deuteranopia) !important; } [data-a11y-mode="deuteranopia"] { --secondary-color: #cc8800; --brand-gold: #cc8800; --accent-color: #0066bb; } /* ============================================================ MODE: TRITANOPIA – Blue-Yellow blind (data-a11y-mode="tritanopia") Shifts blue → red-green spectrum. ============================================================ */ [data-a11y-mode="tritanopia"] body, [data-a11y-mode="tritanopia"] img, [data-a11y-mode="tritanopia"] video, [data-a11y-mode="tritanopia"] canvas { filter: url(#gl-tritanopia) !important; } [data-a11y-mode="tritanopia"] { --secondary-color: #cc5500; --brand-gold: #cc5500; --accent-color: #008844; } /* ============================================================ OS AUTO DETECTION – prefers-contrast: more Applied in addition to, or instead of, manual mode. ============================================================ */ @media (prefers-contrast: more) { :root:not([data-a11y-mode]) { --glass-border: rgba(255, 255, 255, 0.6); --text-muted: #cccccc; } body { outline: none; } a:focus, button:focus, input:focus, select:focus { -webkit-tap-highlight-color: transparent; outline: 3px solid #ffdd00 !important; outline-offset: 2px !important; } } /* ============================================================ ACCESSIBILITY WIDGET STYLES ============================================================ */ #gl-a11y-widget { position: fixed; bottom: 30px; left: 20px; /* Bottom-left — industry standard for accessibility tools */ z-index: 99999; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-family: "Inter", "Outfit", sans-serif; } #gl-a11y-toggle { width: 44px; height: 44px; border-radius: 50%; /* Gold background — visible against the dark site background in all modes. */ /* The old rgba(14,60,60,0.95) was indistinguishable from #0a0a0a background. */ background: #c5a059; border: 2px solid rgba(255, 255, 255, 0.3); color: #0a1014; font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(197, 160, 89, 0.25); transition: all 0.3s ease; -webkit-tap-highlight-color: transparent; } #gl-a11y-toggle:hover, #gl-a11y-toggle:focus { background: #d4b26a; border-color: rgba(255, 255, 255, 0.5); outline: 3px solid #c5a059; outline-offset: 2px; transform: scale(1.08); } #gl-a11y-panel { display: none; flex-direction: column; gap: 6px; background: rgba(10, 25, 30, 0.97); border: 1px solid rgba(197, 160, 89, 0.35); border-radius: 14px; padding: 16px; min-width: 200px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); backdrop-filter: blur(16px); animation: gl-a11y-slide-in 0.25s cubic-bezier(0.23, 1, 0.32, 1); /* Panel opens upward above the toggle button */ position: absolute; bottom: calc(100% + 10px); left: 0; } #gl-a11y-panel.is-open { display: flex; } @keyframes gl-a11y-slide-in { from { opacity: 0; transform: translateY(10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } #gl-a11y-panel h4 { color: #c5a059 !important; font-size: 0.7rem !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; margin: 0 0 8px 0 !important; padding-bottom: 8px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } .gl-a11y-btn { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.08); background: transparent; color: #cbd5e1; font-size: 0.82rem; cursor: pointer; transition: all 0.2s ease; text-align: left; width: 100%; -webkit-tap-highlight-color: transparent; } .gl-a11y-btn:hover, .gl-a11y-btn:focus { background: rgba(197, 160, 89, 0.12); border-color: rgba(197, 160, 89, 0.4); color: #fff; outline: none; } .gl-a11y-btn.is-active { background: rgba(197, 160, 89, 0.18); border-color: #c5a059; color: #c5a059; font-weight: 700; } .gl-a11y-btn .gl-a11y-swatch { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid rgba(255, 255, 255, 0.2); } /* Swatches */ .gl-a11y-btn[data-mode="default"] .gl-a11y-swatch { background: linear-gradient(135deg, #0e3c3c, #c5a059); } .gl-a11y-btn[data-mode="black"] .gl-a11y-swatch { background: #000; border-color: #ffdd00; } .gl-a11y-btn[data-mode="white"] .gl-a11y-swatch { background: #fff; border-color: #0055cc; } .gl-a11y-btn[data-mode="protanopia"] .gl-a11y-swatch { background: linear-gradient(135deg, #1a3a6a, #b3b300); } .gl-a11y-btn[data-mode="deuteranopia"] .gl-a11y-swatch { background: linear-gradient(135deg, #0033aa, #cc8800); } .gl-a11y-btn[data-mode="tritanopia"] .gl-a11y-swatch { background: linear-gradient(135deg, #cc0044, #008844); } /* Adjust widget colours IN each mode */ [data-a11y-mode="black"] #gl-a11y-toggle { background: #ffdd00; color: #000; border-color: #fff; } [data-a11y-mode="white"] #gl-a11y-toggle { background: #0055cc; color: #fff; border-color: #fff; } [data-a11y-mode="black"] #gl-a11y-panel { background: #0a0a0a; border-color: #ffdd00; } [data-a11y-mode="white"] #gl-a11y-panel { background: #fff; border-color: #0055cc; } [data-a11y-mode="black"] .gl-a11y-btn { color: #fff; border-color: rgba(255, 221, 0, 0.3); } [data-a11y-mode="white"] .gl-a11y-btn { color: #000; border-color: rgba(0, 85, 204, 0.3); } [data-a11y-mode="black"] .gl-a11y-btn.is-active { background: rgba(255, 221, 0, 0.2); color: #ffdd00; border-color: #ffdd00; } [data-a11y-mode="white"] .gl-a11y-btn.is-active { background: rgba(0, 85, 204, 0.12); color: #0055cc; border-color: #0055cc; } [data-a11y-mode="black"] #gl-a11y-panel h4 { color: #ffdd00 !important; border-color: rgba(255, 221, 0, 0.15) !important; } [data-a11y-mode="white"] #gl-a11y-panel h4 { color: #0055cc !important; border-color: rgba(0, 85, 204, 0.15) !important; } /* Mobile responsiveness */ @media (max-width: 480px) { #gl-a11y-widget { bottom: 88px; /* 72px action bar + 16px breathing room */ left: 12px; } #gl-a11y-panel { min-width: 180px; } } /* ============================================================ NAVBAR-MOUNT OVERRIDES When #gl-a11y-widget[data-mount="navbar"] is inside #nav-utility-group — not fixed/floating, opens downward. ============================================================ */ #nav-utility-group { display: flex; align-items: center; gap: 4px; margin-right: 8px; position: relative; /* Anchor for downward-dropping panels */ } #gl-a11y-widget[data-mount="navbar"] { /* Reset fixed positioning — sits naturally in flex row */ position: static; bottom: unset; left: unset; z-index: auto; display: flex; flex-direction: row; align-items: center; } #gl-a11y-widget[data-mount="navbar"] #gl-a11y-toggle { width: 34px; height: 34px; font-size: 1rem; box-shadow: none; border-width: 1px; border-color: rgba(255, 255, 255, 0.15); } #gl-a11y-widget[data-mount="navbar"] #gl-a11y-panel { /* Drop DOWN from navbar, not upward */ position: absolute; top: calc(100% + 8px); bottom: unset; left: auto; right: 0; z-index: 99999; min-width: 210px; } /* Hide utility group on mobile — action bar covers those needs */ @media (max-width: 768px) { #nav-utility-group { display: none; } } /* ── Navbar cookie button ── matches lang + a11y compact style ── */ #gl-nav-cookie-btn { width: 34px; height: 34px; border-radius: 50%; background: rgba(197, 160, 89, 0.12); border: 1px solid rgba(255, 255, 255, 0.15); color: #c5a059; font-size: 1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s, transform 0.2s; -webkit-tap-highlight-color: transparent; } #gl-nav-cookie-btn:hover, #gl-nav-cookie-btn:focus-visible { background: rgba(197, 160, 89, 0.22); border-color: rgba(197, 160, 89, 0.45); transform: scale(1.08); outline: none; }