/** * ICSD Accessibility widget — fully namespaced (.icsd-a11y-*). * Effect classes live on and only target #wrapper so chrome/widget stay intact. */ /* -------------------------------------------------------------------------- */ /* Widget chrome */ /* -------------------------------------------------------------------------- */ .icsd-a11y-root { --icsd-a11y-brand: #003366; --icsd-a11y-brand-mid: #0b3f78; --icsd-a11y-brand-soft: #e8eef5; --icsd-a11y-ink: #1a2332; --icsd-a11y-muted: #5a6a7a; --icsd-a11y-line: #d7dee8; --icsd-a11y-surface: #f4f7fb; --icsd-a11y-radius: 12px; --icsd-a11y-shadow: 0 8px 28px rgba(0, 51, 102, 0.22); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.4; color: var(--icsd-a11y-ink); -webkit-tap-highlight-color: transparent; } .icsd-a11y-fab { position: fixed; left: 1rem; bottom: 1rem; z-index: 1060; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: linear-gradient(145deg, var(--icsd-a11y-brand-mid) 0%, var(--icsd-a11y-brand) 100%); color: #fff; box-shadow: var(--icsd-a11y-shadow); cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; } .icsd-a11y-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(0, 51, 102, 0.3); filter: brightness(1.05); } .icsd-a11y-fab:active { transform: translateY(0); } .icsd-a11y-fab:focus { outline: none; } .icsd-a11y-fab:focus-visible { outline: 3px solid #7eb6ff; outline-offset: 3px; } .icsd-a11y-fab__icon { display: flex; line-height: 0; } .icsd-a11y-offcanvas { width: min(360px, 100vw); border-right: 0; box-shadow: 8px 0 32px rgba(15, 34, 58, 0.12); } .icsd-a11y-offcanvas__header { background: linear-gradient(135deg, var(--icsd-a11y-brand) 0%, var(--icsd-a11y-brand-mid) 100%); color: #fff; padding: 1rem 1.1rem; } .icsd-a11y-offcanvas__heading { display: flex; align-items: center; gap: 0.65rem; min-width: 0; } .icsd-a11y-offcanvas__badge { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); } .icsd-a11y-offcanvas__title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; color: #fff; } .icsd-a11y-offcanvas__body { display: flex; flex-direction: column; gap: 1.35rem; padding: 1.15rem 1.1rem 1.35rem; background: #fff; } .icsd-a11y-section__title { margin: 0 0 0.7rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--icsd-a11y-muted); } .icsd-a11y-font { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 0.75rem; padding: 0.85rem 0.9rem; border: 1px solid var(--icsd-a11y-line); border-radius: var(--icsd-a11y-radius); background: var(--icsd-a11y-surface); } .icsd-a11y-font__label { font-size: 0.82rem; font-weight: 600; color: var(--icsd-a11y-ink); } .icsd-a11y-font__controls { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 0.5rem; } .icsd-a11y-font__btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--icsd-a11y-line); border-radius: 10px; background: #fff; color: var(--icsd-a11y-brand); font-size: 1.35rem; font-weight: 600; line-height: 1; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .icsd-a11y-font__btn:hover:not(:disabled) { background: var(--icsd-a11y-brand-soft); border-color: #b8c9dc; } .icsd-a11y-font__btn:disabled { opacity: 0.4; cursor: not-allowed; } .icsd-a11y-font__btn:focus-visible { outline: 2px solid var(--icsd-a11y-brand); outline-offset: 2px; } .icsd-a11y-font__value { text-align: center; font-size: 0.86rem; font-weight: 600; color: var(--icsd-a11y-ink); } .icsd-a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; } .icsd-a11y-grid--single { grid-template-columns: 1fr; } .icsd-a11y-grid--colors { grid-template-columns: repeat(3, 1fr); } .icsd-a11y-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; min-height: 96px; padding: 0.75rem 0.55rem; border: 1px solid var(--icsd-a11y-line); border-radius: var(--icsd-a11y-radius); background: var(--icsd-a11y-surface); color: var(--icsd-a11y-ink); text-align: center; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .icsd-a11y-tile:hover { border-color: #b8c9dc; background: #eef3f9; } .icsd-a11y-tile:focus-visible { outline: 2px solid var(--icsd-a11y-brand); outline-offset: 2px; } .icsd-a11y-tile.is-active, .icsd-a11y-tile[aria-pressed="true"] { border-color: var(--icsd-a11y-brand); background: #e7eef8; box-shadow: inset 0 0 0 1px var(--icsd-a11y-brand); } .icsd-a11y-tile__icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--icsd-a11y-brand); font-size: 1.25rem; box-shadow: 0 1px 3px rgba(15, 34, 58, 0.08); } .icsd-a11y-tile__icon em { font-style: normal; line-height: 1; } .icsd-a11y-tile__label { font-size: 0.78rem; font-weight: 600; line-height: 1.25; } .icsd-a11y-reset { display: block; width: 100%; margin-top: auto; padding: 0.75rem 1rem; border: 0; border-radius: 10px; background: linear-gradient(135deg, var(--icsd-a11y-brand-mid) 0%, var(--icsd-a11y-brand) 100%); color: #fff; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: filter 0.15s ease; } .icsd-a11y-reset:hover { filter: brightness(1.06); } .icsd-a11y-reset:focus-visible { outline: 2px solid #7eb6ff; outline-offset: 3px; } @media (max-width: 575.98px) { .icsd-a11y-fab { left: 0.75rem; bottom: 0.75rem; width: 48px; height: 48px; } } @media (prefers-reduced-motion: reduce) { .icsd-a11y-fab, .icsd-a11y-tile, .icsd-a11y-font__btn, .icsd-a11y-reset { transition: none; } } /* -------------------------------------------------------------------------- */ /* Page effects */ /* Font-size uses (rem). Everything else is scoped to #main only. */ /* Navbar / topbar / footer are never restyled. */ /* -------------------------------------------------------------------------- */ html.icsd-a11y-fs-1 { font-size: 15.5px; } html.icsd-a11y-fs-2 { font-size: 17px; } html.icsd-a11y-fs-3 { font-size: 18.5px; } html.icsd-a11y-fs--1 { font-size: 12.5px; } /* Readable typeface — #main only; icons keep Remix */ html.icsd-a11y-readable #main, html.icsd-a11y-readable #main p, html.icsd-a11y-readable #main span, html.icsd-a11y-readable #main a, html.icsd-a11y-readable #main li, html.icsd-a11y-readable #main td, html.icsd-a11y-readable #main th, html.icsd-a11y-readable #main label, html.icsd-a11y-readable #main button, html.icsd-a11y-readable #main input, html.icsd-a11y-readable #main textarea, html.icsd-a11y-readable #main select, html.icsd-a11y-readable #main h1, html.icsd-a11y-readable #main h2, html.icsd-a11y-readable #main h3, html.icsd-a11y-readable #main h4, html.icsd-a11y-readable #main h5, html.icsd-a11y-readable #main h6 { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: 0.03em; word-spacing: 0.04em; line-height: 1.65; } html.icsd-a11y-readable #main [class^="ri-"], html.icsd-a11y-readable #main [class*=" ri-"], html.icsd-a11y-readable #main em[class^="ri-"], html.icsd-a11y-readable #main i[class^="ri-"] { font-family: remixicon !important; letter-spacing: normal; word-spacing: normal; line-height: 1; } /* Letter spacing — #main text only */ html.icsd-a11y-letter-spacing #main p, html.icsd-a11y-letter-spacing #main li, html.icsd-a11y-letter-spacing #main td, html.icsd-a11y-letter-spacing #main th, html.icsd-a11y-letter-spacing #main label, html.icsd-a11y-letter-spacing #main a, html.icsd-a11y-letter-spacing #main h1, html.icsd-a11y-letter-spacing #main h2, html.icsd-a11y-letter-spacing #main h3, html.icsd-a11y-letter-spacing #main h4, html.icsd-a11y-letter-spacing #main h5, html.icsd-a11y-letter-spacing #main h6 { letter-spacing: 0.12em !important; } /* Line height — #main text only */ html.icsd-a11y-line-height #main p, html.icsd-a11y-line-height #main li, html.icsd-a11y-line-height #main td, html.icsd-a11y-line-height #main th, html.icsd-a11y-line-height #main label, html.icsd-a11y-line-height #main a, html.icsd-a11y-line-height #main h1, html.icsd-a11y-line-height #main h2, html.icsd-a11y-line-height #main h3, html.icsd-a11y-line-height #main h4, html.icsd-a11y-line-height #main h5, html.icsd-a11y-line-height #main h6 { line-height: 1.9 !important; } /* * Color modes — ONLY #main via filter (no color overrides on chrome). * Mutually exclusive in JS (one at a time). */ html.icsd-a11y-contrast-light #main { filter: brightness(1.12) contrast(0.92); } html.icsd-a11y-contrast #main { filter: contrast(1.28); } html.icsd-a11y-monochrome #main { filter: grayscale(1); } /* Hide content images only — never logos in chrome */ html.icsd-a11y-hide-images #main img, html.icsd-a11y-hide-images #main picture, html.icsd-a11y-hide-images #main video { opacity: 0 !important; visibility: hidden !important; } html.icsd-a11y-hide-images #main [style*="background-image"] { background-image: none !important; } /* Stop animations / transitions inside #main only */ html.icsd-a11y-stop-motion #main, html.icsd-a11y-stop-motion #main *, html.icsd-a11y-stop-motion #main *::before, html.icsd-a11y-stop-motion #main *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }