/** * Transtoyou Accessibility Stylesheet * Styling for accessibility features + cookie consent banner */ /* ============================================================ HIDE IN APPS ============================================================ */ /** * Elements with .hide-in-apps are hidden inside webview-based apps. * The theme/app sets (or similar) and this * rule hides the cookie banner and cookie-settings tab completely. * Alternatively a meta tag / JS can add the class to . */ /* Hidden inside webview apps — set from the app to activate */ .tty-is-app .hide-in-apps { display: none !important; } /* ============================================================ ACCESSIBILITY BUTTON ============================================================ */ .tty-accessibility-button { position: fixed; bottom: 20px; left: 20px; width: 50px; height: 50px; border-radius: 50%; background: var(--tty-bg-linear-graniet); color: #ffffff; border: none; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 9999; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease, transform 0.3s ease; padding: 0px !important; } .tty-accessibility-button:hover { background-color: #247772; transform: scale(1.1); } .tty-accessibility-button svg { width: 24px; height: 24px; fill: var(--tty-text-light); } /* ============================================================ PROFILE VIEW ============================================================ */ .tty-accessibility-profiles-view { max-width: 800px; width: 100%; max-height: 100%; background: #fff; border-radius: 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; } [data-theme="dark"] .tty-accessibility-profiles-view { background: #121212; color: #f0f0f0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); } .tty-accessibility-profiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; } .tty-accessibility-profile-option { border-radius: 12px; background-color: #f9f9f9; padding: 15px; transition: box-shadow 0.3s ease, transform 0.3s ease; } [data-theme="dark"] .tty-accessibility-profile-option { background-color: #1e2a2e; } .tty-accessibility-profile-option:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } [data-theme="dark"] .tty-accessibility-profile-option:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); } .tty-accessibility-profile { width: 100%; display: flex; align-items: center; gap: 15px; padding: 0px !important; margin: 0px; background: none; border: none; cursor: pointer; color: #333; text-align: left; font-size: 16px; font-weight: 500; } [data-theme="dark"] .tty-accessibility-profile { color: #f0f0f0; } .tty-accessibility-back { padding: 10px 20px; border-radius: 30px; background-color: #f2f2f2; color: #333; border: none; cursor: pointer; font-weight: 500; transition: background-color 0.3s ease; } .tty-accessibility-back:hover { background-color: #e6e6e6; } [data-theme="dark"] .tty-accessibility-back { background-color: #2a2a2a; color: #f0f0f0; } [data-theme="dark"] .tty-accessibility-back:hover { background-color: #3a3a3a; } .tty-accessibility-profiles-btn { padding: 10px 20px; border-radius: 30px; background-color: #247772; color: white; border: none; cursor: pointer; font-weight: 500; transition: background-color 0.3s ease; margin-right: auto; } .tty-accessibility-profiles-btn:hover { background-color: #006e6e; } [data-theme="dark"] .tty-accessibility-profiles-btn { background-color: #006e6e; } [data-theme="dark"] .tty-accessibility-profiles-btn:hover { background-color: #008f8f; } /* ============================================================ POPUP ============================================================ */ .tty-accessibility-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; display: none; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .tty-accessibility-popup[aria-hidden="false"] { display: flex; opacity: 1; visibility: visible; } .tty-accessibility-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); z-index: -1; backdrop-filter: blur(4px); } .tty-accessibility-popup-content { max-width: 800px; width: 90%; max-height: 80vh; position: relative; margin: 20px auto !important; top: 0; padding: 0; border-radius: 30px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; } [data-theme="dark"] .tty-accessibility-popup-content { background: #121212; color: #f0f0f0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); } /* Header */ .tty-accessibility-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 30px; border-bottom: 1px solid #eaeaea; } [data-theme="dark"] .tty-accessibility-header { border-bottom-color: #2e2e2e; } .tty-accessibility-header h2 { margin: 0; font-size: 24px; color: #247772; } [data-theme="dark"] .tty-accessibility-header h2 { color: #4aadad; } .tty-accessibility-close { background: rgba(22, 51, 0, .078) !important; border: none; color: #555; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: 0.3s; padding: 0px !important; } .tty-accessibility-close:hover { fill: #d44646 !important; transform: rotate(90deg); } [data-theme="dark"] .tty-accessibility-close { color: #121212; background: #006e6e !important; } [data-theme="dark"] .tty-accessibility-close:hover { background-color: #2a2a2a; } /* Body */ .tty-accessibility-body { padding: 20px 30px; flex: 1; overflow-y: auto; } .tty-accessibility-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; } /* Option */ .tty-accessibility-option { border-radius: 12px; background-color: #f9f9f9; padding: 15px; transition: box-shadow 0.3s ease, transform 0.3s ease; } [data-theme="dark"] .tty-accessibility-option { background-color: #1e2a2e; } .tty-accessibility-option:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } [data-theme="dark"] .tty-accessibility-option:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); } /* Toggle Button */ .tty-accessibility-toggle { width: 100%; display: flex; align-items: center; gap: 15px; padding: 0px !important; margin: 0px; background: none; border: none; cursor: pointer; color: #333; text-align: left; font-size: 16px; font-weight: 500; position: relative; } [data-theme="dark"] .tty-accessibility-toggle { color: #f0f0f0; } .tty-accessibility-toggle::after { content: ''; position: absolute; right: 0; width: 52px; height: 26px; background-color: #ccc; border-radius: 34px; transition: background-color 0.3s ease; box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.2); } .tty-accessibility-toggle::before { content: ''; position: absolute; right: 30px; width: 18px; height: 18px; background-color: white; border-radius: 50%; transition: transform 0.3s ease, right 0.3s ease; top: 11px; z-index: 1; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2); } .tty-accessibility-toggle.active::after { background-color: #22b189; } .tty-accessibility-toggle.active::before { transform: translateX(18px); right: 22px; } [data-theme="dark"] .tty-accessibility-toggle::after { background-color: #2e2e2e; } [data-theme="dark"] .tty-accessibility-toggle.active::after { background-color: #006e6e; } /* Option Header */ .tty-accessibility-option-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; } /* Icon */ .tty-accessibility-icon { width: 40px; height: 40px; border-radius: 50%; background-color: #e6efef; display: flex; align-items: center; justify-content: center; color: var(--tty-primary); font-size: 18px; flex-shrink: 0; } [data-theme="dark"] .tty-accessibility-icon { background-color: #062c2a; color: #4aadad; } .tty-accessibility-icon svg { width: 20px; height: 20px; } /* Controls */ .tty-accessibility-option-controls { display: flex; gap: 10px; margin-top: 10px; } /* Text Size Buttons */ .tty-accessibility-text-size { flex: 1; padding: 0px; border-radius: 6px; background-color: #ffffff; border: 1px solid #ddd; cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease; } [data-theme="dark"] .tty-accessibility-text-size { background-color: #2a2a2a; border-color: #3a3a3a; color: #f0f0f0; } .tty-accessibility-text-size:hover { background-color: #f2f2f2; } [data-theme="dark"] .tty-accessibility-text-size:hover { background-color: #3a3a3a; } .tty-accessibility-text-size.active { background-color: #247772; color: white; border-color: #247772; } [data-theme="dark"] .tty-accessibility-text-size.active { background-color: #006e6e; border-color: #006e6e; } .tty-accessibility-text-size[data-size="0"] { font-size: 14px; white-space: nowrap; } .tty-accessibility-text-size[data-size="1"] { font-size: 20px; } .tty-accessibility-text-size[data-size="2"] { font-size: 26px; } .tty-accessibility-text-size[data-size="3"] { font-size: 26px; } /* Line Height Buttons */ .tty-accessibility-line-height { flex: 1; padding: 8px; border-radius: 6px; background-color: #ffffff; border: 1px solid #ddd; cursor: pointer; font-size: 14px; transition: background-color 0.3s ease, border-color 0.3s ease; white-space: nowrap; } [data-theme="dark"] .tty-accessibility-line-height { background-color: #2a2a2a; border-color: #3a3a3a; color: #f0f0f0; } .tty-accessibility-line-height:hover { background-color: #f2f2f2; } [data-theme="dark"] .tty-accessibility-line-height:hover { background-color: #3a3a3a; } .tty-accessibility-line-height.active { background-color: #247772; color: white; border-color: #247772; } [data-theme="dark"] .tty-accessibility-line-height.active { background-color: #006e6e; border-color: #006e6e; } /* Footer */ .tty-accessibility-footer { padding: 20px 30px; border-top: 1px solid #eaeaea; justify-content: space-between; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } [data-theme="dark"] .tty-accessibility-footer { border-top-color: #2e2e2e; } .tty-accessibility-reset { padding: 10px 20px; border-radius: 30px; background-color: #f2f2f2; color: #333; border: none; cursor: pointer; font-weight: 500; transition: background-color 0.3s ease; } .tty-accessibility-reset:hover { background-color: #e6e6e6; } [data-theme="dark"] .tty-accessibility-reset { background-color: #2a2a2a; color: #f0f0f0; } [data-theme="dark"] .tty-accessibility-reset:hover { background-color: #3a3a3a; } /* Cookie settings button inside the accessibility popup footer */ .tty-a11y-cookie-settings-btn { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 30px; background-color: #f2f2f2; color: #333; border: none; cursor: pointer; font-size: 14px; font-weight: 500; transition: background-color 0.3s ease; margin-left: auto; } .tty-a11y-cookie-settings-btn:hover { background-color: #e6e6e6; } [data-theme="dark"] .tty-a11y-cookie-settings-btn { background-color: #2a2a2a; color: #f0f0f0; } [data-theme="dark"] .tty-a11y-cookie-settings-btn:hover { background-color: #3a3a3a; } .tty-a11y-cookie-settings-btn.consent-given svg { stroke: #22b189; } /* ============================================================ TEXT-TO-SPEECH ============================================================ */ .tty-a11y-text-to-speech-active { background-color: rgba(0, 72, 72, 0.1) !important; border-radius: 3px !important; } .tty-text-to-speech-button { display: inline-flex; align-items: center; justify-content: center; background-color: #006e6e; color: white; border: none; border-radius: 4px; padding: 5px 10px; margin: 5px 0; cursor: pointer; font-size: 14px; } .tty-text-to-speech-button svg { margin-right: 5px; width: 16px; height: 16px; } .tty-text-to-speech-controls { position: fixed; bottom: 80px; left: 20px; z-index: 999; display: flex; align-items: center; background-color: #fff; border-radius: 30px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 8px 12px; visibility: hidden; opacity: 0; transition: visibility 0.3s, opacity 0.3s; } .tty-text-to-speech-controls.active { visibility: visible; opacity: 1; } [data-theme="dark"] .tty-text-to-speech-controls { background-color: #121212; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); } .tty-tts-btn { background: none; border: none; color: #333; cursor: pointer; margin: 0 5px; padding: 5px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s; } [data-theme="dark"] .tty-tts-btn { color: #f0f0f0; } .tty-tts-btn:hover { background-color: rgba(0, 72, 72, 0.1); } [data-theme="dark"] .tty-tts-btn:hover { background-color: rgba(0, 110, 110, 0.15); } .tty-tts-btn svg { width: 16px; height: 16px; } .tty-tts-speed { margin: 0 5px; font-size: 12px; color: #333; } [data-theme="dark"] .tty-tts-speed { color: #f0f0f0; } /* ============================================================ READING GUIDE ============================================================ */ .tty-reading-guide { position: fixed; left: 0; width: 100%; height: 30px; background-color: rgba(0, 72, 72, 0.1); pointer-events: none; z-index: 9990; border-top: 1px solid rgba(0, 72, 72, 0.3); border-bottom: 1px solid rgba(0, 72, 72, 0.3); } [data-theme="dark"] .tty-reading-guide { background-color: rgba(0, 110, 110, 0.15); border-top-color: rgba(0, 110, 110, 0.4); border-bottom-color: rgba(0, 110, 110, 0.4); } /* ============================================================ ACCESSIBILITY CLASSES ============================================================ */ /* Text Size */ .tty-a11y-text-size-1 { --tty-a11y-text-scale: 1.2; } .tty-a11y-text-size-2 { --tty-a11y-text-scale: 1.4; } .tty-a11y-text-size-3 { --tty-a11y-text-scale: 1.6; } .tty-a11y-text-size-1 p,.tty-a11y-text-size-1 h1,.tty-a11y-text-size-1 h2, .tty-a11y-text-size-1 h3,.tty-a11y-text-size-1 h4,.tty-a11y-text-size-1 h5, .tty-a11y-text-size-1 h6,.tty-a11y-text-size-1 span,.tty-a11y-text-size-1 a, .tty-a11y-text-size-1 label,.tty-a11y-text-size-1 input,.tty-a11y-text-size-1 select, .tty-a11y-text-size-1 textarea,.tty-a11y-text-size-1 button,.tty-a11y-text-size-1 li, html.tty-a11y-text-size-1 body { font-size: calc(var(--tty-a11y-text-scale) * 16px) !important; } .tty-a11y-text-size-2 p,.tty-a11y-text-size-2 h1,.tty-a11y-text-size-2 h2, .tty-a11y-text-size-2 h3,.tty-a11y-text-size-2 h4,.tty-a11y-text-size-2 h5, .tty-a11y-text-size-2 h6,.tty-a11y-text-size-2 span,.tty-a11y-text-size-2 a, .tty-a11y-text-size-2 label,.tty-a11y-text-size-2 input,.tty-a11y-text-size-2 select, .tty-a11y-text-size-2 textarea,.tty-a11y-text-size-2 button,.tty-a11y-text-size-2 li, html.tty-a11y-text-size-2 body { font-size: calc(var(--tty-a11y-text-scale) * 18px) !important; } .tty-a11y-text-size-3 p,.tty-a11y-text-size-3 h1,.tty-a11y-text-size-3 h2, .tty-a11y-text-size-3 h3,.tty-a11y-text-size-3 h4,.tty-a11y-text-size-3 h5, .tty-a11y-text-size-3 h6,.tty-a11y-text-size-3 span,.tty-a11y-text-size-3 a, .tty-a11y-text-size-3 label,.tty-a11y-text-size-3 input,.tty-a11y-text-size-3 select, .tty-a11y-text-size-3 textarea,.tty-a11y-text-size-3 button,.tty-a11y-text-size-3 li, html.tty-a11y-text-size-3 body { font-size: calc(var(--tty-a11y-text-scale) * 1em) !important; } /* Letter Spacing */ .tty-a11y-letter-spacing { --tty-a11y-letter-spacing: 0.12em; } .tty-a11y-letter-spacing p,.tty-a11y-letter-spacing h1,.tty-a11y-letter-spacing h2, .tty-a11y-letter-spacing h3,.tty-a11y-letter-spacing h4,.tty-a11y-letter-spacing h5, .tty-a11y-letter-spacing h6,.tty-a11y-letter-spacing span,.tty-a11y-letter-spacing a, .tty-a11y-letter-spacing label,.tty-a11y-letter-spacing input,.tty-a11y-letter-spacing select, .tty-a11y-letter-spacing textarea,.tty-a11y-letter-spacing button,.tty-a11y-letter-spacing li, html.tty-a11y-letter-spacing body { letter-spacing: var(--tty-a11y-letter-spacing) !important; } /* Stop Animations */ .tty-a11y-stop-animations *, .tty-a11y-stop-animations *::before, .tty-a11y-stop-animations *::after, html.tty-a11y-stop-animations *, html.tty-a11y-stop-animations *::before, html.tty-a11y-stop-animations *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; scroll-behavior: auto !important; } /* Hide Images */ .tty-a11y-hide-images img, .tty-a11y-hide-images svg:not(.tty-accessibility-button svg):not(.tty-accessibility-icon svg), .tty-a11y-hide-images .transtoyou-image, .tty-a11y-hide-images .category-icon, .tty-a11y-hide-images figure, .tty-a11y-hide-images canvas, .tty-a11y-hide-images video, .tty-a11y-hide-images iframe { opacity: 0 !important; visibility: hidden !important; } /* Larger Cursor */ .tty-a11y-larger-cursor { cursor: url('data:image/svg+xml;utf8,') 16 16, auto !important; } .tty-a11y-larger-cursor a, .tty-a11y-larger-cursor button, .tty-a11y-larger-cursor input, .tty-a11y-larger-cursor select, .tty-a11y-larger-cursor [role="button"] { cursor: url('data:image/svg+xml;utf8,') 16 16, pointer !important; } /* Line Height */ .tty-a11y-line-height-1 { --tty-a11y-line-height: 1.5; } .tty-a11y-line-height-2 { --tty-a11y-line-height: 1.75; } .tty-a11y-line-height-3 { --tty-a11y-line-height: 2; } .tty-a11y-line-height-1 p,.tty-a11y-line-height-1 h1,.tty-a11y-line-height-1 h2, .tty-a11y-line-height-1 h3,.tty-a11y-line-height-1 h4,.tty-a11y-line-height-1 h5, .tty-a11y-line-height-1 h6,.tty-a11y-line-height-1 span,.tty-a11y-line-height-1 a, .tty-a11y-line-height-1 label,.tty-a11y-line-height-1 li, html.tty-a11y-line-height-1 body { line-height: var(--tty-a11y-line-height) !important; } .tty-a11y-line-height-2 p,.tty-a11y-line-height-2 h1,.tty-a11y-line-height-2 h2, .tty-a11y-line-height-2 h3,.tty-a11y-line-height-2 h4,.tty-a11y-line-height-2 h5, .tty-a11y-line-height-2 h6,.tty-a11y-line-height-2 span,.tty-a11y-line-height-2 a, .tty-a11y-line-height-2 label,.tty-a11y-line-height-2 li, html.tty-a11y-line-height-2 body { line-height: var(--tty-a11y-line-height) !important; } .tty-a11y-line-height-3 p,.tty-a11y-line-height-3 h1,.tty-a11y-line-height-3 h2, .tty-a11y-line-height-3 h3,.tty-a11y-line-height-3 h4,.tty-a11y-line-height-3 h5, .tty-a11y-line-height-3 h6,.tty-a11y-line-height-3 span,.tty-a11y-line-height-3 a, .tty-a11y-line-height-3 label,.tty-a11y-line-height-3 li, html.tty-a11y-line-height-3 body { line-height: var(--tty-a11y-line-height) !important; } /* Highlight Links */ .tty-a11y-highlight-links a { background-color: rgba(0, 72, 72, 0.1) !important; color: #247772 !important; border: 2px solid #247772 !important; border-radius: 4px !important; padding: 0 4px !important; text-decoration: underline !important; } [data-theme="dark"] .tty-a11y-highlight-links a { background-color: rgba(0, 110, 110, 0.2) !important; color: #4aadad !important; border: 2px solid #006e6e !important; } /* High Contrast */ .tty-a11y-high-contrast, .tty-a11y-high-contrast *, html.tty-a11y-high-contrast body { background-color: #000000 !important; color: #ffffff !important; border-color: #ffffff !important; } .tty-a11y-high-contrast a, .tty-a11y-high-contrast button, .tty-a11y-high-contrast [role="button"] { background-color: #000000 !important; color: #ffff00 !important; border: 2px solid #ffff00 !important; text-decoration: underline !important; } .tty-a11y-high-contrast img, .tty-a11y-high-contrast video, .tty-a11y-high-contrast iframe, .tty-a11y-high-contrast canvas { filter: grayscale(100%) contrast(150%) !important; } /* Dyslexia Font */ .tty-a11y-dyslexia-font, .tty-a11y-dyslexia-font p,.tty-a11y-dyslexia-font h1,.tty-a11y-dyslexia-font h2, .tty-a11y-dyslexia-font h3,.tty-a11y-dyslexia-font h4,.tty-a11y-dyslexia-font h5, .tty-a11y-dyslexia-font h6,.tty-a11y-dyslexia-font span,.tty-a11y-dyslexia-font a, .tty-a11y-dyslexia-font label,.tty-a11y-dyslexia-font input,.tty-a11y-dyslexia-font select, .tty-a11y-dyslexia-font textarea,.tty-a11y-dyslexia-font button,.tty-a11y-dyslexia-font li, html.tty-a11y-dyslexia-font body { font-family: 'OpenDyslexic', Arial, sans-serif !important; font-weight: normal !important; } /* ============================================================ COOKIE CONSENT BANNER ============================================================ */ .tty-cookie-banner { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(calc(100% + 40px)); width: calc(100% - 40px); max-width: 900px; z-index: 9998; background: linear-gradient(135deg, #247772 0%, #227470 35%, #20716D 70%, #1E6E6A 100%); border-radius: 30px; box-shadow: 0 8px 40px rgba(30, 110, 106, 0.4), 0 2px 12px rgba(0, 0, 0, 0.15); padding: 18px 22px; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; opacity: 0; } .tty-cookie-banner.visible { transform: translateX(-50%) translateY(0); opacity: 1; } [data-theme="dark"] .tty-cookie-banner { background: linear-gradient(135deg, #1a5653 0%, #185250 35%, #154e4c 70%, #134b48 100%); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 2px 12px rgba(0, 0, 0, 0.3); } .tty-cookie-banner-inner { display: flex; align-items: center; gap: 16px; } .tty-cookie-banner-icon { flex-shrink: 0; width: 64px; height: 64px; background: rgba(255, 255, 255, 0.15); border-radius: 14px; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); } .tty-cookie-banner-icon i { font-size: 44px; color: #ffffff; } .tty-cookie-banner-text { flex: 1; min-width: 0; } .tty-cookie-banner-title { display: block; font-size: 18px; font-weight: 600; color: #ffffff; margin-bottom: 2px; letter-spacing: -0.01em; } .tty-cookie-banner-desc { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.72); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; } .tty-cookie-banner-right { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; flex-shrink: 0; } .tty-cookie-banner-actions { display: flex; align-items: center; gap: 14px; } /* Cookie Buttons */ .tty-cookie-btn { padding: 9px 20px; border-radius: 30px; border: none; cursor: pointer; font-size: 13px; font-weight: 600; transition: all 0.2s ease; white-space: nowrap; letter-spacing: 0.01em; } .tty-cookie-btn-accept { background: rgba(255, 255, 255, 0.9); color: #1a5653; } .tty-cookie-btn-accept:hover { background: rgba(241, 237, 237, 0.9); } [data-theme="dark"] .tty-cookie-btn-accept { background: rgba(255, 255, 255, 0.9); color: #1a5653; } [data-theme="dark"] .tty-cookie-btn-accept:hover { background: #ffffff; } .tty-cookie-btn-decline { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); color: white; } .tty-cookie-btn-decline:hover { background: rgba(170, 116, 116, 0.67); } .tty-cookie-settings-footer .tty-cookie-btn-decline { background: #989898; } .tty-cookie-settings-footer .tty-cookie-btn-accept { background: var(--tty-primary); color: var(--tty-text-light); } .tty-cookie-settings-footer .tty-cookie-btn-accept:hover { background: var(--tty-primary-dark); color: var(--tty-text-light); } [data-theme="dark"] .tty-cookie-btn-decline { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); } [data-theme="dark"] .tty-cookie-btn-decline:hover { background: rgba(255, 255, 255, 0.15); } /* Settings + privacy link row below buttons */ .tty-cookie-banner-footer { display: flex; align-items: center; gap: 18px; } .tty-cookie-btn-settings { background: none; border: none; cursor: pointer; font-size: 12px; color: rgba(255, 255, 255, 0.55); padding: 0; display: inline-flex; align-items: center; gap: 5px; transition: color 0.2s ease; } .tty-cookie-btn-settings:hover { color: #ffffff; } [data-theme="dark"] .tty-cookie-btn-settings { color: rgba(255, 255, 255, 0.45); } [data-theme="dark"] .tty-cookie-btn-settings:hover { color: rgba(255, 255, 255, 0.9); } .tty-cookie-btn-settings-link { background: none; border: none; cursor: pointer; font-size: 14px; color: rgba(255, 255, 255, 0.55); padding: 0; display: inline-flex; align-items: center; gap: 5px; transition: color 0.2s ease; } .tty-cookie-btn-settings-link i { font-size: 11px; } .tty-cookie-btn-settings-link:hover { color: #ffffff; } [data-theme="dark"] .tty-cookie-btn-settings-link { color: rgba(255, 255, 255, 0.45); } [data-theme="dark"] .tty-cookie-btn-settings-link:hover { color: rgba(255, 255, 255, 0.9); } .tty-cookie-privacy-link { font-size: 14px; color: rgba(255, 255, 255, 0.55); text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s ease; } .tty-cookie-privacy-link:hover { color: #ffffff; } [data-theme="dark"] .tty-cookie-privacy-link { color: rgba(255, 255, 255, 0.45); } [data-theme="dark"] .tty-cookie-privacy-link:hover { color: rgba(255, 255, 255, 0.9); } /* ============================================================ COOKIE SETTINGS MODAL ============================================================ */ .tty-cookie-settings-modal { position: fixed; inset: 0; z-index: 999999; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .tty-cookie-settings-modal.visible { display: flex !important; opacity: 1; } .tty-cookie-settings-modal.visible { opacity: 1; } .tty-cookie-settings-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); } .tty-cookie-settings-content { position: relative; z-index: 1; background: #ffffff; border-radius: 30px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); width: 90%; max-width: 520px; max-height: 90vh; display: flex; flex-direction: column; } [data-theme="dark"] .tty-cookie-settings-content { background: #1a1a1a; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); color: #f0f0f0; } .tty-cookie-settings-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px 16px; border-bottom: 1px solid #eaeaea; } [data-theme="dark"] .tty-cookie-settings-header { border-bottom-color: #333; } .tty-cookie-settings-header h2 { margin: 0; font-size: 24px; color: var(--tty-header-primary); } [data-theme="dark"] .tty-cookie-settings-header h2 { color: #4aadad; } .tty-cookie-settings-close { background: rgba(0, 0, 0, 0.06); border: none; border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #555; transition: background 0.2s ease, transform 0.2s ease; padding: 0; } .tty-cookie-settings-close:hover { background: rgba(0, 0, 0, 0.12); transform: rotate(90deg); } [data-theme="dark"] .tty-cookie-settings-close { background: rgba(255, 255, 255, 0.08); color: #f0f0f0; } .tty-cookie-settings-body { padding: 20px 28px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 16px; } /* Cookie Category */ .tty-cookie-category { border-radius: 12px; background: #f9f9f9; padding: 16px; } [data-theme="dark"] .tty-cookie-category { background: #242424; } .tty-cookie-category-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .tty-cookie-category-name { font-weight: 600; font-size: 17px; color: #1a1a1a; } [data-theme="dark"] .tty-cookie-category-name { color: #f0f0f0; } .tty-cookie-category-badge { font-size: 12px; color: #22b189; font-weight: 600; background: rgba(34, 177, 137, 0.21); padding: 6px 12px; border-radius: 20px; } .tty-cookie-category-desc { margin: 0; font-size: 14px; color: #666; line-height: 1.5; } [data-theme="dark"] .tty-cookie-category-desc { color: #999; } /* Cookie Toggle (per-category) */ .tty-cookie-toggle-wrap { position: relative; display: inline-block; width: 46px; height: 24px; flex-shrink: 0; cursor: pointer; } .tty-cookie-toggle-input { opacity: 0; width: 0; height: 0; position: absolute; } .tty-cookie-toggle-slider { position: absolute; inset: 0; background-color: #ccc; border-radius: 24px; transition: background-color 0.3s ease; box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.2); } .tty-cookie-toggle-slider::before { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; background: white; border-radius: 50%; transition: transform 0.3s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .tty-cookie-toggle-input:checked + .tty-cookie-toggle-slider { background-color: #22b189; } .tty-cookie-toggle-input:checked + .tty-cookie-toggle-slider::before { transform: translateX(22px); } [data-theme="dark"] .tty-cookie-toggle-slider { background-color: #3a3a3a; } [data-theme="dark"] .tty-cookie-toggle-input:checked + .tty-cookie-toggle-slider { background-color: #006e6e; } /* Modal Footer */ .tty-cookie-settings-footer { padding: 16px 28px 24px; border-top: 1px solid #eaeaea; display: flex; justify-content: flex-end; gap: 10px; } [data-theme="dark"] .tty-cookie-settings-footer { border-top-color: #333; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 768px) { .tty-accessibility-button { bottom: 20px; left: 20px; width: 40px; height: 40px; } .hide-mobile, .tty-accessibility-button { display: none !important; } .tty-accessibility-popup-content { width: 100%; max-height: 100%; overflow-y: auto; border-radius: 0px; box-shadow: none; } .tty-accessibility-body { padding: 20px 10px; } .tty-accessibility-header { padding: 20px 15px; } .tty-text-to-speech-controls { bottom: 70px; left: 10px; padding: 6px 10px; } .tty-text-to-speech-button { padding: 4px 8px; font-size: 12px; } .tty-tts-btn { width: 28px; height: 28px; } .tty-accessibility-options { grid-template-columns: 1fr; } .tty-accessibility-option-controls { flex-wrap: wrap; } /* Cookie banner responsive */ .tty-cookie-banner { bottom: 12px; width: calc(100% - 24px); padding: 16px; border-radius: 16px; } .tty-cookie-banner-inner { flex-wrap: wrap; gap: 12px; } .tty-cookie-banner-icon { display: none; } .tty-cookie-banner-desc { white-space: normal; } .tty-cookie-banner-right { width: 100%; align-items: stretch; } .tty-cookie-banner-actions { width: 100%; } .tty-cookie-btn { flex: 1; text-align: center; padding: 10px 14px; font-size: 13px; } .tty-cookie-banner-footer { justify-content: center; gap: 20px; } .tty-cookie-settings-content { width: 100%; max-width: 100%; border-radius: 20px 20px 0 0; position: fixed; bottom: 0; left: 0; right: 0; max-height: 85vh; } .tty-cookie-settings-modal { align-items: flex-end; } .tty-accessibility-footer { gap: 8px; padding: 16px 15px; } .tty-a11y-cookie-settings-btn { font-size: 13px; padding: 8px 12px; } .tty-accessibility-profiles { grid-template-columns: 1fr; padding: 20px 10px; } }