/* ========================================================== SINGAWA GROUP - Corporate Accessibility & Inclusivity (WCAG 2.1) Lightweight, High-Contrast, Dyslexia-Friendly & Theme Engine ========================================================== */ /* Floating Accessibility Button */ .a11y-floating-trigger { position: fixed; bottom: 28px; left: 28px; width: 54px; height: 54px; background: var(--navy-dark); color: var(--gold-primary); border: 2px solid var(--gold-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); z-index: 1050; cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); text-decoration: none; } .a11y-floating-trigger:hover, .a11y-floating-trigger:focus-visible { transform: scale(1.1); background: var(--gold-primary); color: var(--navy-dark); box-shadow: 0 10px 25px rgba(212, 175, 55, 0.5); outline: 3px solid #FFFFFF; } /* Accessibility Offcanvas / Modal Panel */ .a11y-panel { width: 360px !important; background: #0A192F; color: #FFFFFF; border-right: 2px solid var(--gold-primary); } .a11y-panel-header { border-bottom: 1px solid rgba(212, 175, 55, 0.2); padding: 20px; } .a11y-card-option { background: #112240; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 16px; margin-bottom: 14px; transition: all 0.2s ease; } .a11y-card-option:hover { border-color: var(--gold-primary); } .a11y-btn-group .btn { border-radius: 8px; font-weight: 600; font-size: 0.85rem; } /* ========================================================== Accessibility Modifier Classes Applied to or ========================================================== */ /* 1. Text Resizing */ html.a11y-font-sm { font-size: 14px !important; } html.a11y-font-md { font-size: 16px !important; } html.a11y-font-lg { font-size: 18px !important; } html.a11y-font-xl { font-size: 20px !important; } /* 2. Dyslexia Friendly Mode */ body.a11y-dyslexia, body.a11y-dyslexia * { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: 0.08em !important; word-spacing: 0.15em !important; line-height: 1.85 !important; } /* 3. High Contrast Mode */ body.a11y-high-contrast { background-color: #000000 !important; color: #FFFFFF !important; } body.a11y-high-contrast section, body.a11y-high-contrast div, body.a11y-high-contrast nav, body.a11y-high-contrast footer, body.a11y-high-contrast .corporate-card, body.a11y-high-contrast .dark-luxury-card, body.a11y-high-contrast .triangle-card { background-color: #000000 !important; color: #FFFFFF !important; border-color: #FFFF00 !important; } body.a11y-high-contrast a, body.a11y-high-contrast .text-gold, body.a11y-high-contrast .section-badge, body.a11y-high-contrast .btn-gold { color: #FFFF00 !important; border-color: #FFFF00 !important; } body.a11y-high-contrast .btn-gold { background: #000000 !important; } /* 4. Full Dark Mode Universal */ body.theme-full-dark { background-color: #060D17 !important; color: #F8FAFC !important; } body.theme-full-dark section.bg-white, body.theme-full-dark section.bg-light { background-color: #0A192F !important; color: #FFFFFF !important; } body.theme-full-dark .corporate-card, body.theme-full-dark .triangle-card { background-color: #112240 !important; color: #FFFFFF !important; border-color: rgba(212, 175, 55, 0.25) !important; } body.theme-full-dark .text-navy, body.theme-full-dark .card-title, body.theme-full-dark h1, body.theme-full-dark h2, body.theme-full-dark h3, body.theme-full-dark h4, body.theme-full-dark h5, body.theme-full-dark h6 { color: #FFFFFF !important; } body.theme-full-dark .text-muted, body.theme-full-dark .text-secondary { color: #CBD5E1 !important; } /* 5. Full Light Mode Universal */ body.theme-full-light { background-color: #FFFFFF !important; color: #0F172A !important; } body.theme-full-light section.bg-navy, body.theme-full-light section.bg-navy-dark, body.theme-full-light section.hero-section { background-color: #F8FAFC !important; color: #0F172A !important; background-image: none !important; } body.theme-full-light .dark-luxury-card { background-color: #FFFFFF !important; color: #0F172A !important; border: 1px solid #E2E8F0 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important; } body.theme-full-light .dark-luxury-card h5, body.theme-full-light .dark-luxury-card .text-white, body.theme-full-light .hero-title, body.theme-full-light .section-title { color: #0A192F !important; } body.theme-full-light .hero-subtitle, body.theme-full-light .dark-luxury-card .text-light-subtle { color: #475569 !important; } body.theme-full-light .navbar-custom { background: #FFFFFF !important; border-bottom: 1px solid #E2E8F0 !important; } body.theme-full-light .nav-link-custom { color: #0A192F !important; } body.theme-full-light footer { background-color: #0A192F !important; } /* 6. Reduced Motion */ body.a11y-reduced-motion, body.a11y-reduced-motion * { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; } /* Responsive adjustments */ @media (max-width: 576px) { .a11y-floating-trigger { bottom: 20px; left: 20px; width: 48px; height: 48px; font-size: 20px; } .a11y-panel { width: 100% !important; } }