/** * Comfort View — frontend styles * * Two concerns live here: * 1. The widget itself (.cv-root and children), which is appended to * rather than so page-level colour filters never touch it. * 2. The accessibility modes, applied as classes on . * * Colour filters are applied to , never , because a filtered * ancestor becomes the containing block for position:fixed descendants and * would break sticky headers and the widget itself. */ /* ------------------------------------------------------------------------- Fonts ------------------------------------------------------------------------- */ @font-face { font-family: "CV OpenDyslexic"; src: url("../fonts/OpenDyslexic-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "CV OpenDyslexic"; src: url("../fonts/OpenDyslexic-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "CV OpenDyslexic"; src: url("../fonts/OpenDyslexic-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "CV OpenDyslexic"; src: url("../fonts/OpenDyslexic-Bold-Italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } /* ------------------------------------------------------------------------- Widget shell ------------------------------------------------------------------------- */ .cv-root { /* --cv-accent and --cv-btn-size are inherited from :root, where the plugin writes the admin's chosen values. Do NOT redeclare them here: a local declaration would shadow the inherited value and the setting would silently do nothing. Fallbacks live at each point of use instead. */ --cv-ink: #0f172a; --cv-ink-soft: #64748b; --cv-line: #e8ecf3; --cv-line-strong: #dbe2ec; --cv-surface: #ffffff; --cv-tint: #eef2ff; --cv-track: #d7dde7; --cv-radius-lg: 18px; --cv-radius: 12px; --cv-radius-sm: 10px; position: fixed; z-index: 2147483000; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.45; color: var(--cv-ink); -webkit-font-smoothing: antialiased; } .cv-root *, .cv-root *::before, .cv-root *::after { box-sizing: border-box; } /* Safety net: every icon in the widget is explicitly sized below, but this stops an unstyled or partially-loaded SVG from rendering at its natural size and blowing the layout apart. */ .cv-root svg, .cv-root img { width: 20px; height: 20px; flex: none; display: block; } /* Positions. "right" and "left" are physical on purpose: an admin choosing "bottom right" means the right of the screen regardless of text direction, and moving the button when the site switches language would be surprising. Only the panel's internal layout mirrors for RTL. */ .cv-root[data-position="bottom-right"] { top: auto; right: 22px; bottom: 22px; left: auto; } .cv-root[data-position="bottom-left"] { top: auto; right: auto; bottom: 22px; left: 22px; } .cv-root[data-position="top-right"] { top: 22px; right: 22px; bottom: auto; left: auto; } .cv-root[data-position="top-left"] { top: 22px; right: auto; bottom: auto; left: 22px; } .cv-root[data-position="middle-right"] { top: 50%; right: 22px; bottom: auto; left: auto; transform: translateY(-50%); } .cv-root[data-position="middle-left"] { top: 50%; right: auto; bottom: auto; left: 22px; transform: translateY(-50%); } /* ------------------------------------------------------------------------- Trigger button ------------------------------------------------------------------------- */ .cv-toggle { width: var(--cv-btn-size, 56px); height: var(--cv-btn-size, 56px); border-radius: 50%; border: 0; background: var(--cv-accent, #2C1ADC); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 8px 24px -6px rgba(44, 26, 220, .55), 0 2px 6px rgba(15, 23, 42, .18); transition: transform .18s ease, box-shadow .18s ease; } .cv-toggle:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 30px -6px rgba(44, 26, 220, .6), 0 3px 8px rgba(15, 23, 42, .2); } .cv-toggle:active { transform: translateY(0) scale(.98); } .cv-toggle:focus-visible { outline: 3px solid #fff; outline-offset: -7px; box-shadow: 0 0 0 5px var(--cv-accent, #2C1ADC); } .cv-toggle svg, .cv-toggle img { width: 58%; height: 58%; object-fit: contain; pointer-events: none; } /* ------------------------------------------------------------------------- Panel ------------------------------------------------------------------------- */ .cv-panel { position: absolute; width: 384px; max-width: calc(100vw - 28px); max-height: min(80vh, 700px); display: none; flex-direction: column; background: var(--cv-surface); border: 1px solid var(--cv-line); border-radius: var(--cv-radius-lg); box-shadow: 0 32px 64px -12px rgba(15, 23, 42, .22), 0 8px 20px -8px rgba(15, 23, 42, .12); overflow: hidden; } .cv-root.is-open .cv-panel { display: flex; } .cv-root[data-position$="-right"] .cv-panel { right: 0; } .cv-root[data-position$="-left"] .cv-panel { left: 0; } .cv-root[data-position^="bottom"] .cv-panel { bottom: calc(var(--cv-btn-size, 56px) + 16px); } .cv-root[data-position^="top"] .cv-panel { top: calc(var(--cv-btn-size, 56px) + 16px); } .cv-root[data-position^="middle"] .cv-panel { top: 50%; transform: translateY(-50%); } /* --- Header --- */ .cv-header { display: flex; align-items: center; gap: 13px; padding: 18px 18px 17px; border-bottom: 1px solid var(--cv-line); flex: none; } .cv-badge { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--cv-accent, #2C1ADC); color: #fff; display: flex; align-items: center; justify-content: center; } .cv-badge svg, .cv-badge img { width: 27px; height: 27px; object-fit: contain; } .cv-heading { flex: 1; min-width: 0; } .cv-title { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; color: var(--cv-ink); } .cv-subtitle { margin: 3px 0 0; font-size: 13px; color: var(--cv-ink-soft); line-height: 1.35; } .cv-close { width: 42px; height: 42px; flex: none; background: var(--cv-surface); border: 1px solid var(--cv-line-strong); border-radius: var(--cv-radius); cursor: pointer; color: var(--cv-ink); display: flex; align-items: center; justify-content: center; transition: background .15s ease, border-color .15s ease; } .cv-close svg { width: 18px; height: 18px; } .cv-close:hover { background: #f6f8fb; border-color: var(--cv-track); } .cv-close:focus-visible { outline: 3px solid var(--cv-accent, #2C1ADC); outline-offset: 2px; } /* --- Scroll body --- */ .cv-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .cv-body::-webkit-scrollbar { width: 10px; } .cv-body::-webkit-scrollbar-thumb { background: var(--cv-track); border-radius: 99px; border: 3px solid var(--cv-surface); } /* --- Sections --- */ .cv-section { padding: 18px; } .cv-section + .cv-section { border-top: 1px solid var(--cv-line); } .cv-section-head { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; } .cv-section-icon { width: 38px; height: 38px; flex: none; border-radius: var(--cv-radius); background: var(--cv-tint); color: var(--cv-accent, #2C1ADC); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; } .cv-section-icon svg { width: 20px; height: 20px; } .cv-section-title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; } /* --- Field scaffolding --- */ .cv-field + .cv-field { margin-top: 14px; } .cv-field-label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; color: var(--cv-ink); } /* --- Choice pills --- */ .cv-options { display: flex; flex-wrap: wrap; gap: 9px; } .cv-option { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; font: inherit; font-size: 13.5px; font-weight: 500; white-space: nowrap; background: var(--cv-surface); border: 1px solid var(--cv-line-strong); border-radius: var(--cv-radius); cursor: pointer; color: var(--cv-ink); transition: border-color .15s ease, background .15s ease, color .15s ease; } .cv-option svg { width: 17px; height: 17px; flex: none; } .cv-option:hover { border-color: var(--cv-accent, #2C1ADC); } .cv-option:focus-visible { outline: 3px solid var(--cv-accent, #2C1ADC); outline-offset: 2px; } .cv-option[aria-checked="true"] { background: var(--cv-accent, #2C1ADC); border-color: var(--cv-accent, #2C1ADC); color: #fff; font-weight: 600; } /* --- Stepper --- */ .cv-stepper { display: flex; align-items: stretch; border: 1px solid var(--cv-line-strong); border-radius: var(--cv-radius); overflow: hidden; background: var(--cv-surface); } .cv-step-btn { width: 58px; flex: none; background: var(--cv-surface); border: 0; cursor: pointer; color: var(--cv-ink); display: flex; align-items: center; justify-content: center; transition: background .15s ease; } .cv-step-btn svg { width: 16px; height: 16px; } .cv-step-btn:first-child { border-inline-end: 1px solid var(--cv-line-strong); } .cv-step-btn:last-child { border-inline-start: 1px solid var(--cv-line-strong); } .cv-step-btn:hover:not(:disabled) { background: var(--cv-tint); } .cv-step-btn:disabled { opacity: .35; cursor: not-allowed; } .cv-step-btn:focus-visible { outline: 3px solid var(--cv-accent, #2C1ADC); outline-offset: -3px; } .cv-step-value { flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px 6px; font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cv-ink); } /* --- Toggle rows --- */ .cv-switch { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--cv-surface); border: 1px solid var(--cv-line-strong); border-radius: var(--cv-radius); padding: 12px 14px; font: inherit; font-size: 14px; text-align: start; color: var(--cv-ink); cursor: pointer; transition: border-color .15s ease, background .15s ease; } .cv-switch + .cv-switch { margin-top: 9px; } .cv-switch:hover { border-color: var(--cv-accent, #2C1ADC); } .cv-switch:focus-visible { outline: 3px solid var(--cv-accent, #2C1ADC); outline-offset: 2px; } .cv-switch-icon { width: 21px; height: 21px; flex: none; color: var(--cv-ink); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; } .cv-switch-icon svg { width: 19px; height: 19px; } .cv-switch-text { flex: 1; min-width: 0; font-weight: 500; } .cv-switch-track { flex: none; width: 44px; height: 26px; border-radius: 99px; background: var(--cv-track); position: relative; transition: background .18s ease; } .cv-switch-track::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .3); transition: transform .18s ease; } .cv-switch[aria-pressed="true"] { border-color: var(--cv-accent, #2C1ADC); background: #f7f8ff; } .cv-switch[aria-pressed="true"] .cv-switch-icon { color: var(--cv-accent, #2C1ADC); } .cv-switch[aria-pressed="true"] .cv-switch-track { background: var(--cv-accent, #2C1ADC); } .cv-switch[aria-pressed="true"] .cv-switch-track::after { transform: translateX(18px); } .cv-root[dir="rtl"] .cv-switch[aria-pressed="true"] .cv-switch-track::after { transform: translateX(-18px); } /* --- Speech controls --- */ .cv-speech-controls { display: flex; gap: 8px; margin-top: 10px; } .cv-speech-controls[hidden], .cv-speech-speed[hidden], .cv-speech-hint[hidden] { display: none; } .cv-speech-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; font: inherit; font-size: 13.5px; font-weight: 600; background: var(--cv-surface); border: 1px solid var(--cv-line-strong); border-radius: var(--cv-radius); color: var(--cv-ink); cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; } .cv-speech-btn svg { width: 16px; height: 16px; } .cv-speech-play { flex: 1; } .cv-speech-btn:hover:not(:disabled) { border-color: var(--cv-accent, #2C1ADC); color: var(--cv-accent, #2C1ADC); } .cv-speech-btn:disabled { opacity: .4; cursor: not-allowed; } .cv-speech-btn:focus-visible { outline: 3px solid var(--cv-accent, #2C1ADC); outline-offset: 2px; } .cv-speech-speed { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .cv-speech-speed-label { font-size: 13px; font-weight: 600; flex: none; } .cv-speech-speed .cv-stepper { flex: 1; } .cv-speech-speed .cv-step-btn { width: 44px; } .cv-speech-speed .cv-step-value { padding: 9px 4px; } .cv-speech-engine { display: inline-block; margin-top: 9px; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; background: #eef1f6; color: var(--cv-ink-soft); } .cv-speech-engine.is-natural { background: var(--cv-tint); color: var(--cv-accent, #2C1ADC); } .cv-speech-engine[hidden] { display: none; } .cv-speech-voicerow { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .cv-speech-voicerow[hidden] { display: none; } .cv-speech-voice { flex: 1; min-width: 0; padding: 9px 10px; font: inherit; font-size: 13.5px; color: var(--cv-ink); background: var(--cv-surface); border: 1px solid var(--cv-line-strong); border-radius: var(--cv-radius); cursor: pointer; } .cv-speech-voice:focus-visible { outline: 3px solid var(--cv-accent, #2C1ADC); outline-offset: 2px; } .cv-speech-hint { margin: 9px 0 0; font-size: 12px; line-height: 1.45; color: var(--cv-ink-soft); } /* The block currently being spoken. Scoped tightly so it cannot leak into the page when the feature is off. */ .cv-speaking { background: rgba(44, 26, 220, .1) !important; box-shadow: 0 0 0 2px var(--cv-accent, #2C1ADC) !important; border-radius: 3px; } /* --- Promo card --- */ .cv-promo { margin: 0 18px 18px; padding: 17px; border: 1px solid var(--cv-line); border-radius: var(--cv-radius); background: linear-gradient(170deg, #f8faff 0%, #f2f5ff 100%); } .cv-promo-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; font-size: 14.5px; font-weight: 700; color: var(--cv-ink); } .cv-promo-head svg { width: 19px; height: 19px; flex: none; color: var(--cv-accent, #2C1ADC); } .cv-promo-text { margin: 0 0 15px; font-size: 13.5px; line-height: 1.5; color: #475569; } .cv-promo-art { display: block; width: 100%; height: auto; border-radius: var(--cv-radius-sm); overflow: hidden; } /* --- Footer --- */ .cv-footer { flex: none; border-top: 1px solid var(--cv-line); padding: 15px 18px 16px; background: var(--cv-surface); } .cv-reset { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px; font: inherit; font-size: 14.5px; font-weight: 600; background: var(--cv-surface); border: 1.5px solid var(--cv-accent, #2C1ADC); color: var(--cv-accent, #2C1ADC); border-radius: var(--cv-radius); cursor: pointer; transition: background .15s ease, color .15s ease; } .cv-reset svg { width: 17px; height: 17px; } .cv-reset:hover { background: var(--cv-accent, #2C1ADC); color: #fff; } .cv-reset:focus-visible { outline: 3px solid var(--cv-accent, #2C1ADC); outline-offset: 2px; } .cv-statement-link { display: block; margin-top: 11px; text-align: center; font-size: 13px; font-weight: 500; color: var(--cv-accent, #2C1ADC); text-decoration: underline; text-underline-offset: 2px; } .cv-statement-link:hover { text-decoration-thickness: 2px; } .cv-statement-link:focus-visible { outline: 3px solid var(--cv-accent, #2C1ADC); outline-offset: 2px; border-radius: 4px; } .cv-note { margin: 11px 0 0; font-size: 12px; color: #94a3b8; text-align: center; } .cv-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; } @media (max-width: 460px) { .cv-panel { width: calc(100vw - 28px); } .cv-option { flex: 1 1 100%; justify-content: flex-start; } } /* --- Profiles --- */ .cv-section-profiles { background: #fbfcfe; } .cv-profiles { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .cv-profile { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 13px; font: inherit; font-size: 13.5px; font-weight: 600; text-align: start; background: var(--cv-surface); border: 1px solid var(--cv-line-strong); border-radius: var(--cv-radius); color: var(--cv-ink); cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; } .cv-profile:hover { border-color: var(--cv-accent, #2C1ADC); } .cv-profile:focus-visible { outline: 3px solid var(--cv-accent, #2C1ADC); outline-offset: 2px; } .cv-profile-icon { width: 32px; height: 32px; border-radius: 9px; background: var(--cv-tint); color: var(--cv-accent, #2C1ADC); display: flex; align-items: center; justify-content: center; } .cv-profile-icon svg { width: 18px; height: 18px; } .cv-profile[aria-pressed="true"] { background: var(--cv-accent, #2C1ADC); border-color: var(--cv-accent, #2C1ADC); color: #fff; } .cv-profile[aria-pressed="true"] .cv-profile-icon { background: rgba(255, 255, 255, .22); color: #fff; } .cv-profile-hint { margin: 11px 0 0; font-size: 12px; line-height: 1.45; color: var(--cv-ink-soft); } /* ------------------------------------------------------------------------- RTL The widget mirrors from the dir attribute set on .cv-root by the script, which reads the page direction. Only layout mirrors; the button stays on the screen edge the admin chose. ------------------------------------------------------------------------- */ .cv-root[dir="rtl"] .cv-profile, .cv-root[dir="rtl"] .cv-switch, .cv-root[dir="rtl"] .cv-option { text-align: start; } .cv-root[dir="rtl"] .cv-note, .cv-root[dir="rtl"] .cv-step-value { text-align: center; } /* Mirror glyph-only icons that imply direction. */ .cv-root[dir="rtl"] .cv-reset svg, .cv-root[dir="rtl"] .cv-profile-icon svg.cv-flip { transform: scaleX(-1); } /* ========================================================================= ACCESSIBILITY MODES Applied to . Filters target body so fixed positioning survives. ========================================================================= */ /* --- Contrast: invert --- */ html.cv-contrast-invert body { filter: invert(1) hue-rotate(180deg); background: #fff; } html.cv-contrast-invert body img, html.cv-contrast-invert body video, html.cv-contrast-invert body iframe, html.cv-contrast-invert body svg image { filter: invert(1) hue-rotate(180deg); } /* --- Contrast: greyscale --- */ html.cv-contrast-gray body { filter: grayscale(1); } /* --- Contrast: high --- */ html.cv-contrast-high body { background: #000 !important; color: #fff !important; } html.cv-contrast-high body *:not(.cv-root):not(.cv-root *) { background-color: transparent !important; background-image: none !important; color: #fff !important; border-color: #fff !important; text-shadow: none !important; box-shadow: none !important; } html.cv-contrast-high body a:not(.cv-root *), html.cv-contrast-high body a *:not(.cv-root *) { color: #ffff00 !important; } html.cv-contrast-high body a:hover:not(.cv-root *) { color: #ffffff !important; background: #333 !important; } html.cv-contrast-high body button:not(.cv-root *), html.cv-contrast-high body input:not(.cv-root *), html.cv-contrast-high body select:not(.cv-root *), html.cv-contrast-high body textarea:not(.cv-root *) { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; } html.cv-contrast-high body :focus-visible:not(.cv-root *) { outline: 3px solid #ffff00 !important; } /* --- Contrast: dark --- */ html.cv-contrast-dark body { background: #14171c !important; color: #e8eaed !important; } html.cv-contrast-dark body *:not(.cv-root):not(.cv-root *) { background-color: transparent !important; color: #e8eaed !important; border-color: #3a4048 !important; } html.cv-contrast-dark body header:not(.cv-root *), html.cv-contrast-dark body footer:not(.cv-root *), html.cv-contrast-dark body aside:not(.cv-root *), html.cv-contrast-dark body nav:not(.cv-root *) { background-color: #1b1f26 !important; } html.cv-contrast-dark body a:not(.cv-root *), html.cv-contrast-dark body a *:not(.cv-root *) { color: #79b8ff !important; } html.cv-contrast-dark body button:not(.cv-root *), html.cv-contrast-dark body input:not(.cv-root *), html.cv-contrast-dark body select:not(.cv-root *), html.cv-contrast-dark body textarea:not(.cv-root *) { background: #1b1f26 !important; border: 1px solid #3a4048 !important; } html.cv-contrast-dark body img:not(.cv-root *), html.cv-contrast-dark body video:not(.cv-root *) { opacity: .88; } /* --- Fonts --- */ html.cv-dyslexic body *:not(.cv-root):not(.cv-root *):not(i):not(.fa):not([class*="icon"]) { font-family: "CV OpenDyslexic", Comic Sans MS, sans-serif !important; } html.cv-readablefont body *:not(.cv-root):not(.cv-root *):not(i):not(.fa):not([class*="icon"]) { font-family: Verdana, Tahoma, "Segoe UI", Arial, sans-serif !important; } /* --- Spacing. Set as custom properties by JS. --- */ html.cv-lineheight body *:not(.cv-root):not(.cv-root *) { line-height: var(--cv-line-height, 1.5) !important; } html.cv-letterspacing body *:not(.cv-root):not(.cv-root *) { letter-spacing: var(--cv-letter-spacing, 0) !important; } html.cv-wordspacing body *:not(.cv-root):not(.cv-root *) { word-spacing: var(--cv-word-spacing, 0) !important; } /* --- Highlighting --- */ html.cv-linkhighlight body a:not(.cv-root *) { outline: 2px solid #ffdd00 !important; outline-offset: 1px; background: rgba(255, 221, 0, .22) !important; text-decoration: underline !important; text-underline-offset: 2px; } html.cv-headinghighlight body :is(h1, h2, h3, h4, h5, h6):not(.cv-root *) { outline: 2px dashed #00a3ff !important; outline-offset: 3px; background: rgba(0, 163, 255, .1) !important; } html.cv-focusoutline body :focus-visible:not(.cv-root *) { outline: 4px solid #ff6b00 !important; outline-offset: 3px !important; border-radius: 2px; } /* --- Cursor --- */ html.cv-bigcursor body, html.cv-bigcursor body *:not(.cv-root):not(.cv-root *) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3E%3Cpath d='M8 4 L8 42 L18 33 L25 48 L33 44 L26 30 L40 29 Z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, auto !important; } html.cv-bigcursor body a:not(.cv-root *), html.cv-bigcursor body button:not(.cv-root *), html.cv-bigcursor body [role="button"]:not(.cv-root *) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3E%3Cpath d='M20 4 c-3 0-5 2-5 5 v18 l-4-5 c-2-2-6-1-6 3 l0 4 c0 8 6 17 13 19 h13 c6 0 9-5 9-11 V22 c0-3-4-4-5-1 0-3-4-4-5-1 0-3-4-4-5-1 V9 c0-3-2-5-5-5z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 18 4, pointer !important; } /* --- Motion --- */ html.cv-stopmotion body *:not(.cv-root):not(.cv-root *), html.cv-stopmotion body *:not(.cv-root):not(.cv-root *)::before, html.cv-stopmotion body *:not(.cv-root):not(.cv-root *)::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } html.cv-stopmotion body :is(video, [autoplay]):not(.cv-root *) { /* paused by JS */ } /* --- Hide images --- */ html.cv-hideimages body :is(img, picture, svg:not(.cv-root svg), video, canvas):not(.cv-root *) { visibility: hidden !important; } html.cv-hideimages body *:not(.cv-root):not(.cv-root *) { background-image: none !important; } /* --- Reading guide --- */ .cv-guide { position: fixed; left: 0; /* 100vw rather than 100%: belt and braces, so the bar spans the viewport even if a future ancestor ends up establishing a containing block. */ width: 100vw; height: 0; border-top: 4px solid var(--cv-accent, #2C1ADC); border-bottom: 4px solid var(--cv-accent, #2C1ADC); pointer-events: none; z-index: 2147482999; display: none; } html.cv-readingguide .cv-guide { display: block; } /* --- Reading mask --- */ .cv-mask { position: fixed; left: 0; width: 100vw; background: rgba(0, 0, 0, .72); pointer-events: none; z-index: 2147482998; display: none; } html.cv-readingmask .cv-mask { display: block; } /* Respect the OS-level preference out of the box. */ @media (prefers-reduced-motion: reduce) { .cv-toggle, .cv-switch-track, .cv-switch-track::after { transition: none; } } @media print { .cv-root, .cv-guide, .cv-mask { display: none !important; } }