/** * MIG CO Accessibility Extension Styles * TYPO3 CMS 13.4 - WCAG 2.1 AA Compliant */ /* Google Fonts - Nunito Sans with all needed weights */ @import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800;900&display=swap"); /* CSS Variables for Configuration */ :root { --mig-primary-color: #0A3FA7; --mig-secondary-color: #FFFFFF; --mig-alert-color: #F95812; --mig-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); --mig-border-radius: 8px; --mig-animation-duration: 0.3s; --mig-z-accessibility: 99999; } /* ========================================================================== Accessibility Wrapper - Positioned outside body to avoid transform issues When body has transform: scale() applied, position: fixed breaks for children. Moving elements to via JavaScript and using this wrapper ensures fixed positioning works correctly regardless of body transforms. ========================================================================== */ #mig-accessibility-wrapper { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; z-index: var(--mig-z-accessibility); pointer-events: none; /* Prevent wrapper from being affected by any transforms */ transform: none !important; } #mig-accessibility-wrapper > * { pointer-events: auto; } /* ========================================================================== Panel & Bar Isolation from Accessibility Features These rules protect the accessibility UI from being affected by its own features ========================================================================== */ #mig-accessibility-panel, #mig-accessibility-bar { /* Fixed typography - prevent line-height/letter-spacing/font-size changes */ font-family: 'Nunito Sans', sans-serif !important; font-size: 16px !important; line-height: 1.5 !important; letter-spacing: normal !important; /* Force own stacking context - isolate from body transforms */ isolation: isolate; transform-style: flat; /* Performance optimizations for smooth animations */ will-change: transform, opacity; contain: layout style; /* Ensure text alignment is always left */ text-align: left !important; } #mig-accessibility-panel *, #mig-accessibility-bar * { /* Inherit fixed typography from parent */ font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; text-align: inherit !important; } /* ========================================================================== Local SVG Icons via CSS mask-image ========================================================================== */ .mig-icon { display: inline-block; background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; vertical-align: middle; flex-shrink: 0; } /* Icon definitions */ .mig-icon--keyboard_double_arrow_up { -webkit-mask-image: url('../Icons/keyboard_double_arrow_up.svg'); mask-image: url('../Icons/keyboard_double_arrow_up.svg'); } .mig-icon--support_agent { -webkit-mask-image: url('../Icons/support_agent.svg'); mask-image: url('../Icons/support_agent.svg'); } .mig-icon--accessibility_new { -webkit-mask-image: url('../Icons/accessibility_new.svg'); mask-image: url('../Icons/accessibility_new.svg'); } .mig-icon--settings_accessibility { -webkit-mask-image: url('../Icons/settings_accessibility.svg'); mask-image: url('../Icons/settings_accessibility.svg'); } .mig-icon--close { -webkit-mask-image: url('../Icons/close.svg'); mask-image: url('../Icons/close.svg'); } .mig-icon--contrast { -webkit-mask-image: url('../Icons/contrast.svg'); mask-image: url('../Icons/contrast.svg'); } .mig-icon--text_format { -webkit-mask-image: url('../Icons/text_format.svg'); mask-image: url('../Icons/text_format.svg'); } .mig-icon--remove { -webkit-mask-image: url('../Icons/remove.svg'); mask-image: url('../Icons/remove.svg'); } .mig-icon--add { -webkit-mask-image: url('../Icons/add.svg'); mask-image: url('../Icons/add.svg'); } .mig-icon--format_line_spacing { -webkit-mask-image: url('../Icons/format_line_spacing.svg'); mask-image: url('../Icons/format_line_spacing.svg'); } .mig-icon--format_letter_spacing { -webkit-mask-image: url('../Icons/format_letter_spacing.svg'); mask-image: url('../Icons/format_letter_spacing.svg'); } .mig-icon--zoom_in { -webkit-mask-image: url('../Icons/zoom_in.svg'); mask-image: url('../Icons/zoom_in.svg'); } .mig-icon--format_align_right { -webkit-mask-image: url('../Icons/format_align_right.svg'); mask-image: url('../Icons/format_align_right.svg'); } .mig-icon--format_align_center { -webkit-mask-image: url('../Icons/format_align_center.svg'); mask-image: url('../Icons/format_align_center.svg'); } .mig-icon--format_align_left { -webkit-mask-image: url('../Icons/format_align_left.svg'); mask-image: url('../Icons/format_align_left.svg'); } .mig-icon--hide_image { -webkit-mask-image: url('../Icons/hide_image.svg'); mask-image: url('../Icons/hide_image.svg'); } .mig-icon--link { -webkit-mask-image: url('../Icons/link.svg'); mask-image: url('../Icons/link.svg'); } .mig-icon--title { -webkit-mask-image: url('../Icons/title.svg'); mask-image: url('../Icons/title.svg'); } .mig-icon--restart_alt { -webkit-mask-image: url('../Icons/restart_alt.svg'); mask-image: url('../Icons/restart_alt.svg'); } /* Screen Reader Only Content */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Floating Accessibility Bar */ .mig-accessibility-bar { position: fixed !important; top: 50% !important; right: 0 !important; transform: translateY(-50%); width: 50px; background-color: #0A3FA7; border-top-left-radius: 16px; border-bottom-left-radius: 16px; border-top-right-radius: 0; border-bottom-right-radius: 0; box-shadow: var(--mig-shadow); z-index: var(--mig-z-accessibility); display: flex; flex-direction: column; font-family: 'Nunito Sans', sans-serif; transition: transform var(--mig-animation-duration) ease-in-out, width var(--mig-animation-duration) ease-in-out; opacity: 1; visibility: visible; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .mig-accessibility-bar:hover, .mig-accessibility-bar:focus-within { width: 157px; max-width: 157px; min-width: 52px; background-color: #0A3FA7; } /* Accessibility Bar Buttons */ .mig-accessibility-button { position: relative; display: flex; align-items: center; padding-left: 12px; background: transparent; border: none; color: var(--mig-secondary-color); cursor: pointer; text-decoration: none; transition: all var(--mig-animation-duration) ease; min-height: 60px; outline: none; } .mig-accessibility-button:not(:last-child)::after { content: ''; position: absolute; bottom: 0; left: 12px; right: 8px; height: 1px; background-color: rgba(255, 255, 255, 1); } .mig-accessibility-button:hover, .mig-accessibility-button:focus { background-color: #042871; border-radius: 8px; outline: 2px solid var(--mig-secondary-color); outline-offset: -2px; } .mig-accessibility-button .mig-icon { width: 24px; height: 24px; min-width: 24px; color: var(--mig-secondary-color); } .mig-accessibility-label { margin-left: 12px; font-size: 14px; font-weight: 500; white-space: normal; opacity: 0; transition: opacity var(--mig-animation-duration) ease; } .mig-accessibility-bar:hover .mig-accessibility-label, .mig-accessibility-bar:focus-within .mig-accessibility-label { opacity: 1; } /* Active features indicator on bar - shows orange dot when features are enabled */ .mig-panel-toggle.mig-has-active-features { position: relative; } .mig-panel-toggle.mig-has-active-features::after { content: ''; position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; background-color: var(--mig-alert-color, #F95812); border-radius: 50%; border: 2px solid var(--mig-secondary-color, #FFFFFF); pointer-events: none; } /* Accessibility Panel */ .mig-accessibility-panel { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: 207px; max-width: 207px; height: 100vh; height: 100dvh; /* Dynamic viewport height for better mobile support */ background: #ffffff; border-radius: 0; box-shadow: var(--mig-shadow); z-index: calc(var(--mig-z-accessibility) + 1); transform: translateX(100%); transition: transform var(--mig-animation-duration) ease-in-out, opacity var(--mig-animation-duration) ease-in-out; display: flex; flex-direction: column; overflow: hidden; opacity: 0; visibility: hidden; /* Ensure panel is not affected by body transforms */ backface-visibility: hidden; -webkit-backface-visibility: hidden; } .mig-accessibility-panel[aria-hidden="false"] { transform: translateX(0); opacity: 1; visibility: visible; } /* Panel Header */ .mig-accessibility-panel-header { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 8px 16px 8px 8px; background-color: var(--mig-primary-color); color: var(--mig-secondary-color); border-top-left-radius: 8px; } .mig-header-icon { width: 22px; height: 28px; color: #FFFFFF; } .mig-accessibility-close .mig-icon { width: 22px; height: 22px; color: var(--mig-secondary-color); } .mig-feature-decrease .mig-icon, .mig-feature-increase .mig-icon { width: 18px; height: 18px; } .mig-accessibility-reset .mig-icon { width: 20px; height: 20px; } .mig-accessibility-panel-title { margin: 0; font-family: 'Nunito Sans', sans-serif; font-weight: 800; font-size: 13px; line-height: 110%; color: #FFFFFF; flex: 1; text-align: left !important; padding-left: 8px; } .mig-accessibility-close { background: transparent; border: none; color: var(--mig-secondary-color); cursor: pointer; padding: 4px; border-radius: 4px; transition: background-color var(--mig-animation-duration) ease; } .mig-accessibility-close:hover, .mig-accessibility-close:focus { background-color: rgba(255, 255, 255, 0.1); outline: 2px solid var(--mig-secondary-color); outline-offset: 2px; } /* Panel Body */ #mig-accessibility-panel .mig-accessibility-panel-body { flex: 1; overflow-y: auto; padding: 20px; font-family: Verdana, Geneva, sans-serif !important; } .mig-accessibility-features-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } /* Feature Cards */ .mig-accessibility-feature { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 16px; background: #F0F5FE; border: 2px solid transparent; border-radius: 12px; cursor: pointer; transition: all var(--mig-animation-duration) ease; text-align: center; min-height: 120px; position: relative; } .mig-accessibility-feature:hover { background: #e9ecef; border-color: var(--mig-primary-color); } .mig-accessibility-feature:focus { outline: 2px solid var(--mig-primary-color); outline-offset: 2px; } .mig-accessibility-feature[aria-pressed="true"] { background: #A7C5FA; color: #000000; border-color: var(--mig-primary-color); box-shadow: 0 0 0 2px var(--mig-primary-color); } .mig-accessibility-feature[aria-pressed="true"] .mig-icon { color: var(--mig-primary-color); } .mig-accessibility-feature .mig-icon { width: 32px; height: 32px; margin-bottom: 8px; color: inherit; } .mig-feature-label { font-size: 14px; font-weight: 500; line-height: 1.3; color: inherit; } /* Adjustable Features with Controls */ .mig-feature-adjustable { padding: 16px 12px; } .mig-feature-controls { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; } .mig-feature-decrease, .mig-feature-increase { background: transparent; border: 1px solid #dee2e6; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--mig-animation-duration) ease; } .mig-feature-decrease:hover, .mig-feature-increase:hover, .mig-feature-decrease:focus, .mig-feature-increase:focus { border-color: var(--mig-primary-color); background: var(--mig-primary-color); color: var(--mig-secondary-color); outline: 2px solid var(--mig-primary-color); outline-offset: 2px; } .mig-feature-value { font-size: 12px; font-weight: 600; min-width: 40px; color: inherit; } /* Panel Footer */ .mig-accessibility-panel-footer { padding: 20px; border-top: 1px solid #e9ecef; } .mig-accessibility-reset { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; background: transparent; border: 2px solid var(--mig-primary-color); border-radius: var(--mig-border-radius); color: var(--mig-primary-color); font-size: 16px; font-weight: 500; cursor: pointer; transition: all var(--mig-animation-duration) ease; } .mig-accessibility-reset:hover, .mig-accessibility-reset:focus { background: var(--mig-primary-color); color: var(--mig-secondary-color); outline: 2px solid var(--mig-primary-color); outline-offset: 2px; } /* Accessibility Feature Effects */ body.mig-high-contrast { filter: contrast(150%) brightness(1.2); } body.mig-high-contrast * { background-color: #000000 !important; color: #ffffff !important; border-color: #ffffff !important; } body.mig-high-contrast a { color: #ffff00 !important; } body.mig-align-right * { text-align: right !important; } body.mig-align-center * { text-align: center !important; } body.mig-align-left * { text-align: left !important; } body.mig-hide-images img, body.mig-hide-images [style*="background-image"] { opacity: 0 !important; } /* Preserve images inside main navigation - these should always remain visible */ body.mig-hide-images .main-navigation img, body.mig-hide-images .main-navigation [style*="background-image"], body.mig-hide-images nav.main-navigation img, body.mig-hide-images nav.main-navigation [style*="background-image"] { opacity: 1 !important; } body.mig-highlight-links a { background-color: var(--mig-alert-color) !important; color: white !important; text-decoration: underline !important; padding: 2px 4px !important; border-radius: 3px !important; } body.mig-highlight-titles h1, body.mig-highlight-titles h2, body.mig-highlight-titles h3, body.mig-highlight-titles h4, body.mig-highlight-titles h5, body.mig-highlight-titles h6 { background-color: var(--mig-alert-color) !important; color: white !important; padding: 8px !important; border-radius: 4px !important; border: 2px solid var(--mig-alert-color) !important; } /* Responsive Design */ @media (max-width: 768px) { .mig-accessibility-panel { width: 184px; max-width: 184px; right: 0; left: auto; top: 0; bottom: 0; height: 100vh; height: 100dvh; /* Dynamic viewport height for mobile browsers */ border-radius: 0; /* Ensure panel slides from right on tablet */ transform: translateX(100%); } .mig-accessibility-panel[aria-hidden="false"] { transform: translateX(0); } .mig-accessibility-features-grid { grid-template-columns: 1fr; gap: 12px; } .mig-accessibility-feature { min-height: 100px; padding: 16px 12px; } .mig-accessibility-bar { width: 48px; /* Safe area support for notched devices */ right: env(safe-area-inset-right, 0); } .mig-accessibility-bar:hover, .mig-accessibility-bar:focus-within { width: 140px; max-width: calc(100vw - 20px); } .mig-accessibility-button { min-height: 50px; padding: 12px; } .mig-accessibility-button .mig-icon { width: 20px; height: 20px; } .mig-accessibility-label { font-size: 12px; } } @media (max-width: 480px) { /* Explicit panel positioning for mobile to prevent centering issues */ .mig-accessibility-panel { position: fixed; width: 184px; max-width: 184px; right: 0; left: 0; top: 0; bottom: 0; height: 100vh; border-radius: 0; transform: translateX(100%); /* Safe area padding for iPhone notch/home indicator */ padding-bottom: env(safe-area-inset-bottom, 0); } .mig-accessibility-panel[aria-hidden="false"] { transform: translateX(0); } .mig-accessibility-features-grid { grid-template-columns: 1fr; gap: 10px; } .mig-accessibility-feature { min-height: 90px; padding: 12px 8px; /* Ensure minimum touch target size */ min-width: 44px; } .mig-accessibility-feature .mig-icon { width: 28px; height: 28px; margin-bottom: 6px; } .mig-feature-label { font-size: 12px; } /* Simplify bar on mobile - no expansion on hover/focus */ .mig-accessibility-bar { width: 44px; right: env(safe-area-inset-right, 0); } .mig-accessibility-bar:hover, .mig-accessibility-bar:focus-within { width: 44px; } .mig-accessibility-button { min-height: 44px; padding: 10px; } .mig-accessibility-button .mig-icon { width: 20px; height: 20px; } /* Hide labels on mobile - use tap instead */ .mig-accessibility-bar .mig-accessibility-label { display: none; } } /* High Contrast Mode Adjustments */ @media (prefers-contrast: high) { .mig-accessibility-bar, .mig-accessibility-panel { border: 2px solid #000000; } .mig-accessibility-feature { border-width: 2px; border-color: #000000; } } /* Reduced Motion Preferences */ @media (prefers-reduced-motion: reduce) { .mig-accessibility-bar, .mig-accessibility-panel, .mig-accessibility-button, .mig-accessibility-feature, .mig-feature-decrease, .mig-feature-increase, .mig-accessibility-reset, .mig-accessibility-close { transition: none; } } /* Print Styles */ @media print { .mig-accessibility-bar, .mig-accessibility-panel { display: none !important; } }