/* * TownFront Accessibility toolbar. * Everything the visitor turns on is a class on , so the rules below are * the only place the site's appearance is changed, and !important is used * deliberately: these have to beat theme styles by design. */ /* Fixed, and deliberately not inside any transformed or clipping ancestor: the script moves it to the end of for exactly that reason. */ /* Behind a full-screen panel, and only then. The launcher belongs to the page, so once something covers the page it is a control for a thing the reader can no longer see -- and at this z-index it lands on top of whatever they opened, over the rows they are reading. tf-overlay-open is set by the theme while such a panel is up, on a phone, and cleared when it closes. The launcher's own dialog is not lowered: somebody who already has it open keeps it. */ body.tf-overlay-open .tfa-btn { z-index: 1; } .tfa-btn { position: fixed; z-index: 2147483000; width: var(--tfa-size, 56px); height: var(--tfa-size, 56px); display: flex; align-items: center; justify-content: center; padding: 0; border: 0; cursor: pointer; border-radius: var(--tfa-radius, 50%); background: var(--tfa-button, #5C7F56); color: var(--tfa-icon, #fff); box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(255, 255, 255, 0.9); transition: transform .2s ease, box-shadow .2s ease; } .tfa-btn:hover { transform: scale(1.06); } .tfa-btn:focus-visible { outline: 3px solid var(--tfa-accent, #5C7F56); outline-offset: 3px; } .tfa-btn svg { width: 58%; height: 58%; } .tfa-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .tfa-panel { position: fixed; z-index: 2147483001; right: 20px; bottom: 20px; width: min(var(--tfa-panel-w, 320px), calc(100vw - 2rem)); max-height: min(34rem, calc(100vh - 2rem)); display: flex; flex-direction: column; overflow: hidden; background: #fff; color: #23303C; border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.06); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: var(--tfa-panel-fs, 14.1px); line-height: 1.5; } .tfa-panel[hidden] { display: none; } @media (min-width: 641px) { .tfa-panel[data-pos^="top"] { top: 20px; bottom: auto; } .tfa-panel[data-pos$="left"] { left: 20px; right: auto; } } .tfa-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 0.95rem; background: var(--tfa-color, #0F2D4A); color: #fff; } .tfa-head h2 { margin: 0; font-size: 1rem; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .tfa-head__ico { width: 20px; height: 20px; flex-shrink: 0; } .tfa-close { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.14); border: 0; border-radius: 8px; color: #fff; cursor: pointer; } .tfa-close:hover { background: rgba(255, 255, 255, 0.26); } .tfa-close svg { width: 15px; height: 15px; } .tfa-close:focus-visible, .tfa-panel button:focus-visible, .tfa-panel a:focus-visible { outline: 3px solid var(--tfa-accent, #5C7F56); outline-offset: 2px; } /* No padding of its own now: it is a grid item in .tfa-body and inherits that block's own padding and gap. */ .tfa-intro { margin: 0; padding: 0; font-size: 0.85rem; color: #5A6773; } .tfa-body { padding: 0.9rem 0.95rem; overflow-y: auto; display: grid; gap: 0.9rem; } .tfa-group > b { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #78838F; margin-bottom: 0.55rem; } .tfa-stepper { display: flex; align-items: center; gap: 0.5rem; } .tfa-stepper button { width: 38px; height: 38px; flex-shrink: 0; border: 1px solid #D7D8DF; border-radius: 10px; background: #fff; font-size: 1.15rem; font-weight: 700; color: #23303C; cursor: pointer; } .tfa-stepper button:hover { border-color: var(--tfa-accent, #5C7F56); background: #F4F6F9; } .tfa-stepper output { flex: 1; text-align: center; font-weight: 700; font-size: 0.92rem; padding: 0.55rem; border-radius: 10px; background: #F4F6F9; } /* Four choices on one row. At the default 320px panel the labels came to a few pixels over the width and Grayscale dropped to a second line, which reads as a fifth option that got separated rather than as one set of four. Smaller type, tighter padding, and no wrapping; they may shrink but they stay in line, and a narrower panel clips a label rather than breaking the row. */ .tfa-choices { display: flex; flex-wrap: nowrap; gap: 0.32rem; } .tfa-choices button { flex: 0 1 auto; min-width: 0; padding: 0.44rem 0.6rem; border-radius: 999px; border: 1px solid #D7D8DF; background: #fff; font-size: 0.82rem; font-weight: 600; color: #23303C; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Contrast and Text alignment fit one row at this size -- 268px and 193px of pills inside 290px of panel. The hide durations do not and never will: "Only for this session" is a sentence, and shrinking the type until three of those fit would drag the other two groups down with it. That row wraps instead, which is what wrapping is for. */ .tfa-group--hide .tfa-choices { flex-wrap: wrap; } .tfa-choices button:hover { border-color: var(--tfa-accent, #5C7F56); } .tfa-choices button[aria-pressed="true"] { background: var(--tfa-accent, #5C7F56); border-color: var(--tfa-accent, #5C7F56); color: #fff; } .tfa-group--toggles { display: grid; gap: 0.4rem; } .tfa-toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; padding: 0.58rem 0.75rem; border-radius: 10px; border: 1px solid #E8EAEF; background: #fff; font-size: 0.92rem; font-weight: 600; color: #23303C; text-align: left; cursor: pointer; } .tfa-toggle:hover { border-color: var(--tfa-accent, #5C7F56); background: #F8FAF8; } .tfa-switch { flex-shrink: 0; width: 36px; height: 21px; border-radius: 999px; background: #D7D8DF; position: relative; transition: background-color .18s ease; } .tfa-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform .18s ease; } .tfa-toggle[aria-pressed="true"] { border-color: var(--tfa-accent, #5C7F56); background: #F1F6F0; } .tfa-toggle[aria-pressed="true"] .tfa-switch { background: var(--tfa-accent, #5C7F56); } .tfa-toggle[aria-pressed="true"] .tfa-switch::after { transform: translateX(15px); } /* One row, and it has to stay one row: the panel is 320px by default and the two labels together were a few pixels over, so they wrapped and the footer became two lines of controls for no reason. Both a size smaller, the button tighter, and no wrapping. If somebody sets a narrower panel in the settings the link truncates rather than the row breaking -- a clipped word still reads as a link, where a stacked footer reads as a mistake. */ .tfa-foot { padding: 0.8rem 0.8rem 0.95rem; border-top: 1px solid #E8EAEF; display: flex; align-items: center; gap: 0.55rem; flex-wrap: nowrap; } .tfa-foot .tfa-reset { margin-left: auto; flex-shrink: 0; } /* A size down again to pay for the icon the statement button now carries: at 0.78rem the two labels plus the mark came to 297px inside 290px of footer, and the label would have been clipped mid-word. 269px at 0.74rem. */ .tfa-reset { justify-self: start; padding: 0.46rem 0.58rem; border-radius: 8px; border: 1px solid #D7D8DF; background: #fff; font-size: 0.74rem; font-weight: 600; color: #23303C; cursor: pointer; white-space: nowrap; } .tfa-reset:hover { border-color: #C0563F; color: #A8452F; } .tfa-foot a { font-size: 0.74rem; font-weight: 600; color: var(--tfa-accent, #5C7F56); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The note earns a heading. Unlabelled small print at the end of a list of controls reads as a disclaimer somebody was obliged to add; titled, it is an answer to the question the controls raise -- how far does this go. */ .tfa-scope { padding-top: 0.85rem; border-top: 1px solid #E8EAEF; } .tfa-scope > b { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #78838F; margin-bottom: 0.35rem; } .tfa-note { margin: 0; font-size: 0.74rem; color: #78838F; line-height: 1.45; } /* The statement takes the body's place, so it scrolls the same way and the footer stays where it was. */ /* Inside the scrolling body rather than beside it, with the groups hidden around it. Two scroll containers meant two sets of height rules to keep in step, and the statement kept collapsing to the height of its own prose. */ .tfa-body.is-statement > .tfa-group, .tfa-body.is-statement > .tfa-intro { display: none; } .tfa-statement { padding-bottom: 0.2rem; } /* The panel is content-height by default, which is right for the controls and wrong here: the prose is shorter than the tool list, so the panel collapsed and the footer rode up to meet it. Held at the same height it reaches with the tools open -- and only where it is a floating card, because below 641px it is already a full-screen sheet and this would shrink it. */ @media (min-width: 641px) { .tfa-panel.is-statement { height: min(34rem, calc(100vh - 2rem)); } } .tfa-statement[hidden] { display: none; } .tfa-statement h3 { margin: 0 0 0.3rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #23303C; } .tfa-statement h3 + p { margin-top: 0; } .tfa-statement p { margin: 0 0 0.95rem; font-size: 0.8rem; line-height: 1.55; color: #5A6773; } .tfa-statement p:last-child { margin-bottom: 0; } .tfa-statement a { color: var(--tfa-accent, #5C7F56); font-weight: 600; } /* Reads as a link, behaves as a button: it opens a view rather than going anywhere, and calling it a link would be a small lie to a screen reader. */ /* The label sits tight against its mark: at 0.26rem the gap read as a space in the sentence rather than as an icon beside a label. */ .tfa-statement-btn { display: inline-flex; align-items: center; gap: 0.18rem; border: 0; background: none; padding: 0; margin: 0; font: inherit; font-size: 0.74rem; font-weight: 600; color: var(--tfa-accent, #5C7F56); cursor: pointer; min-width: 0; white-space: nowrap; } .tfa-statement-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; text-decoration: underline; text-underline-offset: 2px; } .tfa-statement-btn:hover span { text-decoration-thickness: 2px; } /* Two marks, one slot: a page on the way in, a chevron on the way back. Both animate from zero width rather than toggling display, so the label does not jump as they swap, and both sit outside the underline -- an underlined chevron reads as a broken character rather than as an arrow. */ .tfa-doc-ico, .tfa-back-ico { width: 0; height: 13px; flex-shrink: 0; opacity: 0; transition: width .14s ease, opacity .14s ease; } .tfa-doc-ico { width: 13px; opacity: 1; } .tfa-statement-btn.is-back .tfa-doc-ico { width: 0; opacity: 0; } .tfa-statement-btn.is-back .tfa-back-ico { width: 13px; opacity: 1; } /* Put away, and the way back. The button is hidden by attribute as well as by class, so it is out of the accessibility tree rather than merely invisible. The restore control is a skip link: off the screen until it takes focus, which costs a visitor who asked for a clean page nothing and gives a keyboard user the button back on the first Tab. */ html.tfa-hidden .tfa-btn { display: none !important; } .tfa-restore { position: fixed; z-index: 2147483002; top: 0; left: 0; transform: translateY(-120%); margin: 0.5rem; padding: 0.7rem 1.05rem; border: 0; border-radius: 10px; background: var(--tfa-button, #5C7F56); color: var(--tfa-icon, #fff); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 0.9rem; font-weight: 700; cursor: pointer; box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.6); transition: transform .16s ease; } .tfa-restore[hidden] { display: none; } .tfa-restore:focus, .tfa-restore:focus-visible { transform: translateY(0); outline: 3px solid var(--tfa-accent, #5C7F56); outline-offset: 3px; } .tfa-mini { margin: 0.55rem 0 0; font-size: 0.72rem; line-height: 1.45; color: #78838F; } /* The reading guide follows the pointer. */ .tfa-guide { display: none; position: fixed; left: 0; right: 0; height: 2.6rem; z-index: 2147482999; pointer-events: none; } html.tfa-guide-on .tfa-guide { display: block; background: rgba(15, 45, 74, 0.10); border-top: 2px solid rgba(15, 45, 74, 0.55); border-bottom: 2px solid rgba(15, 45, 74, 0.55); } /* ---- what the visitor's choices actually do ---- */ html.tfa-text-1 { font-size: 108% !important; } html.tfa-text-2 { font-size: 118% !important; } html.tfa-text-3 { font-size: 130% !important; } html.tfa-text-4 { font-size: 145% !important; } html.tfa-text--1 { font-size: 92% !important; } html.tfa-space-1 body * { line-height: 1.7 !important; letter-spacing: 0.02em !important; } html.tfa-space-2 body * { line-height: 1.9 !important; letter-spacing: 0.06em !important; word-spacing: 0.14em !important; } html.tfa-space-3 body * { line-height: 2.2 !important; letter-spacing: 0.1em !important; word-spacing: 0.24em !important; } html.tfa-font body, html.tfa-font body * { font-family: Verdana, Tahoma, "Trebuchet MS", sans-serif !important; letter-spacing: 0.015em; } html.tfa-links a { text-decoration: underline !important; text-underline-offset: 3px !important; outline: 2px solid currentColor !important; outline-offset: 2px !important; } html.tfa-headings h1, html.tfa-headings h2, html.tfa-headings h3, html.tfa-headings h4, html.tfa-headings h5, html.tfa-headings h6 { outline: 2px dashed var(--tfa-accent, #5C7F56) !important; outline-offset: 4px !important; } html.tfa-cursor, html.tfa-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M6 2l24 14-11 2 6 12-5 2-6-12-8 7z' fill='%23000' stroke='%23fff' stroke-width='2.2'/%3E%3C/svg%3E") 4 2, auto !important; } /* Stop animation, deliberately sweeping, but never applied to the toolbar itself: a visitor needs to see the panel respond in order to switch it back off again. */ html.tfa-motion *:not(.tfa-panel):not(.tfa-panel *):not(.tfa-btn):not(.tfa-btn *), html.tfa-motion *:not(.tfa-panel):not(.tfa-panel *)::before, html.tfa-motion *:not(.tfa-panel):not(.tfa-panel *)::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.tfa-noimg img, html.tfa-noimg picture, html.tfa-noimg svg:not(.tfa-panel svg):not(.tfa-btn svg) { visibility: hidden !important; } html.tfa-noimg [style*="background-image"] { background-image: none !important; } html.tfa-align-left body :is(p, li, h1, h2, h3, h4, td, dd, blockquote) { text-align: left !important; } html.tfa-align-center body :is(p, li, h1, h2, h3, h4, td, dd, blockquote) { text-align: center !important; } /* Contrast modes. The panel itself is excluded so its controls stay legible. */ html.tfa-contrast-high body :not(.tfa-panel):not(.tfa-panel *) { background-color: #000 !important; color: #fff !important; border-color: #fff !important; } html.tfa-contrast-high body a:not(.tfa-panel a) { color: #FFE86B !important; } html.tfa-contrast-high body :is(img, picture, video) { filter: none !important; } html.tfa-contrast-dark body :not(.tfa-panel):not(.tfa-panel *) { background-color: #14181D !important; color: #E7ECF1 !important; } html.tfa-contrast-dark body a:not(.tfa-panel a) { color: #9DC694 !important; } html.tfa-contrast-dark body :is(img, picture, video) { filter: brightness(0.86) !important; } html.tfa-contrast-grey body :not(.tfa-panel):not(.tfa-panel *) { filter: grayscale(1); } /* A full-height sheet on a phone. Anchored to the bottom with a max-height it could grow past the top of the screen and take its own header with it, which is exactly what happened. Filling the screen instead means the header is pinned, the tools scroll under it, and the close button is always reachable. */ @media (max-width: 640px) { .tfa-panel { inset: 0 !important; width: auto; max-width: none; height: 100vh; height: 100svh; max-height: none; border-radius: 0; } .tfa-head { position: sticky; top: 0; z-index: 2; padding: 1rem 1.1rem; } .tfa-head h2 { font-size: 1.15rem; } .tfa-close { width: 40px; height: 40px; } .tfa-close svg { width: 17px; height: 17px; } .tfa-body { flex: 1 1 auto; } .tfa-foot { position: sticky; bottom: 0; background: #fff; } } @media (prefers-reduced-motion: reduce) { .tfa-btn, .tfa-switch, .tfa-switch::after { transition: none; } } /* A floating control has no business on paper, and the reading guide would print as a grey bar across whatever line the pointer last rested on. */ @media print { .tfa-btn, .tfa-panel, .tfa-restore, .tfa-guide { display: none !important; } }