/* ========================================= 1. WIDGET UI STYLING ========================================= */ :root { --primary-purple: #7a4bff; --bg-light: #f3f4f6; --btn-bg: #ffffff; --text-main: #333333; --text-light: #9ca3af; --panel-width: 380px; } .access-fab { position: fixed; bottom: 20px; right: 20px; background-color: var(--primary-purple); color: white; border: none; border-radius: 50%; width: 70px; height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.2); cursor: pointer; z-index: 9999; transition: transform 0.2s ease; } .access-fab:hover { transform: scale(1.05); } .access-fab i { font-size: 28px; } .access-fab span { font-size: 10px; font-weight: bold; margin-top: -2px; } .access-panel { position: fixed; top: 0; left: 0; width: var(--panel-width); height: 100vh; background-color: var(--bg-light); box-shadow: 2px 0 15px rgba(0,0,0,0.1); display: flex; flex-direction: column; z-index: 10000; transition: transform 0.3s ease-in-out; transform: translateX(-100%); font-family: Arial, sans-serif; } .access-panel:not(.hidden) { transform: translateX(0); } .access-header { background-color: var(--primary-purple); color: white; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; } .access-header h2 { font-size: 16px; margin: 0; font-weight: 500; } .access-shortcut { background-color: rgba(255,255,255,0.2); padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: bold; } .access-close-btn { background: none; border: none; color: white; font-size: 24px; cursor: pointer; } .access-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 20px; overflow-y: auto; } .access-btn { background-color: var(--btn-bg); border: 1px solid #e5e7eb; border-radius: 10px; padding: 15px 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; color: var(--text-main); font-size: 12px; transition: all 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.02); } .access-btn:hover { border-color: var(--primary-purple); box-shadow: 0 2px 6px rgba(122, 75, 255, 0.2); } .access-btn .icon { font-size: 24px; margin-bottom: 8px; color: #000; } .access-btn.active-setting { border: 2px solid var(--primary-purple) !important; background-color: #f3e8ff; } .icon.font-large { font-weight: bold; font-size: 26px; } .icon.custom-txt { font-weight: bold; font-family: serif; } .line-through { text-decoration: line-through; } .access-footer { margin-top: auto; padding: 20px; background-color: #fff; border-top: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; } .access-reset { background-color: #f3e8ff; color: var(--text-main); border: none; padding: 10px 15px; border-radius: 6px; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 8px; font-weight: 600; } .access-credits { font-size: 12px; color: var(--text-main); } /* ========================================= 2. FUNCTIONAL ACCESSIBILITY CLASSES These classes are applied to the ========================================= */ /* Bigger Text */ body.a11y-bigger-text { font-size: 120% !important; } body.a11y-bigger-text h1 { font-size: 2.5em !important; } body.a11y-bigger-text h2 { font-size: 2em !important; } body.a11y-bigger-text p, body.a11y-bigger-text a, body.a11y-bigger-text span { font-size: 1.2em !important; } /* Text Spacing */ body.a11y-text-spacing * { letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } /* Line Height */ body.a11y-line-height * { line-height: 2 !important; } /* Dyslexia Friendly */ @import url('https://fonts.cdnfonts.com/css/opendyslexic'); body.a11y-dyslexia * { font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif !important; } /* Invert Colors */ body.a11y-invert-colors { filter: invert(100%) hue-rotate(180deg) !important; background-color: #000 !important; } body.a11y-invert-colors img, body.a11y-invert-colors video { filter: invert(100%) hue-rotate(180deg) !important; } /* Re-invert images to normal */ /* Highlight Links */ body.a11y-highlight-links a { background-color: yellow !important; color: black !important; text-decoration: underline !important; font-weight: bold !important; } /* Hide Images */ body.a11y-hide-images img, body.a11y-hide-images svg, body.a11y-hide-images [style*="background-image"] { opacity: 0 !important; visibility: hidden !important; } /* Pause Animation */ body.a11y-pause-animation * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* Cursor */ body.a11y-cursor, body.a11y-cursor * { cursor: url('data:image/svg+xml;utf8,'), auto !important; }