/* Tohar Brands — the accessibility key and its panel. It replaces UserWay, which was a paid service on somebody else's account and only ever half-loaded here. This one is ours: two files, no network, nothing to expire. The key is the mirror image of the WhatsApp bubble — same 60px circle, same 24px off the floor, on the other side of the screen. Everything is scoped under `.tb-a11y`, and what the panel switches lives on as `tb-a11y-*` classes, so the page itself is never edited. */ .tb-a11y__key { position: fixed; bottom: 24px; left: 20px; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 200px; background: #111; color: #fff; cursor: pointer; z-index: 9999998; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 6px rgba(0, 0, 0, .06), 0 2px 32px rgba(0, 0, 0, .16); transition: transform .25s cubic-bezier(.22, .61, .36, 1), background .25s ease; } .tb-a11y__key:hover, .tb-a11y__key:focus-visible { background: #000; transform: translateY(-2px) } .tb-a11y__key svg { width: 30px; height: 30px; fill: currentColor; display: block } .tb-a11y__panel { position: fixed; bottom: 96px; left: 20px; width: min(320px, calc(100vw - 40px)); max-height: min(74vh, 560px); overflow-y: auto; background: #fff; color: #171717; border: 1px solid rgba(0, 0, 0, .09); box-shadow: 0 1px 6px rgba(0, 0, 0, .06), 0 18px 48px rgba(0, 0, 0, .18); z-index: 9999998; direction: rtl; text-align: right; font-size: 14px; line-height: 1.45; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .28s ease, transform .28s cubic-bezier(.22, .61, .36, 1), visibility .28s; } .tb-a11y.is-open .tb-a11y__panel { opacity: 1; visibility: visible; transform: translateY(0) } .tb-a11y__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 18px 18px 14px; border-bottom: 1px solid rgba(0, 0, 0, .08); } .tb-a11y__eyebrow { margin: 0 0 3px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #8d8478; } .tb-a11y__title { margin: 0; font-family: "Tohar Display", "Playfair Display", Georgia, serif; font-size: 21px; font-weight: 500; line-height: 1.1; color: #111; } .tb-a11y__x { flex: none; width: 30px; height: 30px; border: 0; background: transparent; color: #6d675e; font-size: 20px; line-height: 1; cursor: pointer; } .tb-a11y__x:hover { color: #111 } .tb-a11y__body { padding: 14px 18px 18px } /* the text-size row */ .tb-a11y__size { display: flex; align-items: center; gap: 8px; padding: 4px 0 14px; margin-bottom: 12px; border-bottom: 1px solid rgba(0, 0, 0, .08); } .tb-a11y__size span { flex: 1; color: #57524a; font-size: 13px } .tb-a11y__step { width: 36px; height: 34px; border: 1px solid rgba(0, 0, 0, .16); background: #fff; color: #111; font-size: 15px; cursor: pointer; transition: background .2s ease, border-color .2s ease; } .tb-a11y__step:hover { background: #f2efe9; border-color: rgba(0, 0, 0, .3) } .tb-a11y__pct { min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; color: #111 } .tb-a11y__opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; margin-bottom: 6px; border: 1px solid rgba(0, 0, 0, .1); background: #fff; color: #171717; font: inherit; text-align: right; cursor: pointer; transition: background .2s ease, border-color .2s ease; } .tb-a11y__opt:hover { background: #f6f3ee; border-color: rgba(0, 0, 0, .24) } .tb-a11y__opt[aria-pressed="true"] { background: #111; border-color: #111; color: #fff } .tb-a11y__mark { flex: none; width: 18px; height: 18px; border: 1px solid rgba(0, 0, 0, .28); position: relative; } .tb-a11y__opt[aria-pressed="true"] .tb-a11y__mark { border-color: #fff; background: #fff } .tb-a11y__opt[aria-pressed="true"] .tb-a11y__mark::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #111; border-width: 0 2px 2px 0; transform: rotate(45deg); } .tb-a11y__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, .08); font-size: 13px; } .tb-a11y__reset { border: 0; background: transparent; color: #6d675e; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; } .tb-a11y__reset:hover { color: #111 } .tb-a11y__foot a { color: #6d675e; text-decoration: underline } .tb-a11y__foot a:hover { color: #111 } /* the key keeps the WhatsApp bubble's size and height off the floor at every width - the two are meant to read as a pair */ @media (max-width: 520px) { .tb-a11y__panel { width: calc(100vw - 40px) } } @media print { .tb-a11y { display: none } } /* ---------------------------------------------------------------- what it does Every setting is aimed at `body > *` rather than at `body`, so the panel itself keeps its own colours, its own type and its own scale while the page changes. */ html.tb-a11y-fs body > *:not(.tb-a11y):not(.tb-intro) { zoom: var(--tb-a11y-z, 1) } html.tb-a11y-gray body > *:not(.tb-a11y):not(.tb-intro) { filter: grayscale(1) } html.tb-a11y-contrast body > *:not(.tb-a11y):not(.tb-intro), html.tb-a11y-contrast body > *:not(.tb-a11y):not(.tb-intro) * { background-color: #000 !important; color: #fff !important; border-color: #fff !important; text-shadow: none !important; } html.tb-a11y-contrast body > *:not(.tb-a11y):not(.tb-intro) a, html.tb-a11y-contrast body > *:not(.tb-a11y):not(.tb-intro) a * { color: #ffe14d !important } html.tb-a11y-contrast body > *:not(.tb-a11y):not(.tb-intro) img, html.tb-a11y-contrast body > *:not(.tb-a11y):not(.tb-intro) video { background: transparent !important } html.tb-a11y-links body > *:not(.tb-a11y):not(.tb-intro) a { text-decoration: underline !important; text-underline-offset: 3px; outline: 1px dashed currentColor; outline-offset: 2px; } html.tb-a11y-font body > *:not(.tb-a11y):not(.tb-intro), html.tb-a11y-font body > *:not(.tb-a11y):not(.tb-intro) * { font-family: Arial, "Segoe UI", Tahoma, sans-serif !important; letter-spacing: normal !important; } html.tb-a11y-cursor body > *:not(.tb-a11y):not(.tb-intro), html.tb-a11y-cursor body > *:not(.tb-a11y):not(.tb-intro) * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 9-6.2 1.2L15 20l-2.6 1-2.2-7L5 18z' fill='%23fff' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") 4 2, auto !important; } html.tb-a11y-still body > *:not(.tb-a11y):not(.tb-intro), html.tb-a11y-still body > *:not(.tb-a11y):not(.tb-intro) * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.tb-a11y-still body > *:not(.tb-a11y):not(.tb-intro) video { display: none }