/** * Attune - what the preferences actually do to the site. * * The base state of this file IS the default experience. Every preference is * an attribute on , so an untouched page carries no attributes and * nothing below applies. * * PANEL ISOLATION * Every rule that restyles the site is guarded with :not(.attune-ui, .attune-ui *). * The panel and trigger carry .attune-ui, so no preference can reach inside the * control that sets it. This is why the panel no longer turns black in high * contrast, and it means new effects stay safe by following the same pattern. * * Page builders write typography and colour into generated stylesheets rather * than inline styles, so !important here wins where it has to. It is used only * inside preference-scoped selectors, never in the base. */ :root { --atn-text-scale: 1; --atn-line-height: 1.6; --atn-letter-spacing: 0em; --atn-caption-scale: 1; --atn-caption-bg-alpha: 1; --atn-focus: #0b57d0; --atn-hl: #ffd666; --atn-hl-hover: #f7be2e; --atn-hl-ink: #1b1b1b; } /* ------------------------------------------------------------------------- Text ----------------------------------------------------------------------- */ /* * Text size is applied by JavaScript, not here. Page builders write px into * their stylesheets, so scaling the root font size reaches almost nothing. * See assets/js/attune-text-scale.js. */ /* * Matches letter-spacing's scope rather than the narrower list this used to * carry. p/li/etc alone left every heading and every link at the theme's own * line-height, so a page of nothing but headings and nav links - which is * most of a LearnDash sidebar - never changed at all. */ html[data-atn-line-height] :is(body, div, span, section, article, h1, h2, h3, h4, h5, h6, p, li, dd, dt, blockquote, figcaption, td, th, label, a, button):not(.attune-ui, .attune-ui *) { line-height: var(--atn-line-height) !important; } html[data-atn-letter-spacing] :is(body, p, li, h1, h2, h3, h4, h5, h6, a, button, label, td, th):not(.attune-ui, .attune-ui *) { letter-spacing: var(--atn-letter-spacing) !important; word-spacing: calc(var(--atn-letter-spacing) * 2) !important; } html[data-atn-font-family="sans"] :is(body, h1, h2, h3, h4, h5, h6, p, li, a, button, input, select, textarea, label):not(.attune-ui, .attune-ui *) { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; } html[data-atn-font-family="serif"] :is(body, h1, h2, h3, h4, h5, h6, p, li, a, button, input, select, textarea, label):not(.attune-ui, .attune-ui *) { font-family: Georgia, "Times New Roman", "Noto Serif", serif !important; } /* ------------------------------------------------------------------------- Visual ----------------------------------------------------------------------- */ /* * Highlight links. * * FOUR `:is(#atn-x, …)`, giving this four ids - see the contrast section for * how and why that construction works. It changes nothing about what matches; * it only raises specificity, so this out-weighs both LearnDash's own long * `!important` chains AND Attune's own contrast rules. * * BEATING CONTRAST IS THE POINT, and it is one more id than contrast carries * on purpose. Both preferences colour links, so when a visitor has both on, * one has to win - and it must be this one: switching on "Highlight links" is * a specific request to make links stand out, where a contrast mode is a * general repaint of the page. When contrast briefly won this fight, links * lost their highlight entirely wherever a contrast mode was on, and the * dark 2px outline below was left stranded on the flattened page background - * measured at 1.03:1 under Dark contrast, an invisible focus indicator and a * WCAG 1.4.11 failure. The combination stays high-contrast either way: the * highlight fill against its ink is roughly 11:1. * * Targets anchors AND button-like elements. Page builders and LMS plugins * render navigation controls as buttons, div[role=button] or classed anchors * with their own backgrounds - LearnDash's next/previous lesson controls being * the case that caught this - so anchors alone leaves gaps exactly where a * visitor most needs the cue. */ html:is(#atn-x,[data-atn-highlight-links="on"]):is(#atn-x,[data-atn-highlight-links="on"]):is(#atn-x,[data-atn-highlight-links="on"]):is(#atn-x,[data-atn-highlight-links="on"]) :is( a[href], button, summary, [role="button"], [role="link"], input[type="submit"], input[type="button"], .ld-button, .elementor-button ):not(.attune-ui, .attune-ui *) { background: var(--atn-hl) !important; background-image: none !important; color: var(--atn-hl-ink) !important; outline: 2px solid var(--atn-hl-ink) !important; outline-offset: 0; border-color: var(--atn-hl-ink) !important; border-radius: 2px; text-decoration: underline !important; text-underline-offset: 0.15em; text-shadow: none !important; box-shadow: none !important; } /* Children inherit the ink rather than keeping a colour meant for a different background. */ html:is(#atn-x,[data-atn-highlight-links="on"]):is(#atn-x,[data-atn-highlight-links="on"]):is(#atn-x,[data-atn-highlight-links="on"]):is(#atn-x,[data-atn-highlight-links="on"]) :is(a[href], button, [role="button"], .ld-button, .elementor-button):not(.attune-ui, .attune-ui *) * { color: var(--atn-hl-ink) !important; fill: var(--atn-hl-ink) !important; text-shadow: none !important; } /* * Only children that actually CONTAIN something get their background cleared. * * An empty child is usually a drawn shape whose background colour IS the * graphic. LearnDash's mobile menu button is exactly that - three empty * 25x4px spans forming the hamburger - and blanking them left a plain yellow * square with no icon in it wherever Highlight links was on, which on a phone * is the button that opens the course navigation. * * They keep their own colour rather than being repainted in the ink colour, * which would be the other way to make them visible: an empty span is just as * often an icon-font holder drawing its glyph through ::before with no * background at all, and giving THOSE a solid fill would stamp a dark box over * the glyph. Leaving them untouched is right in both cases - LearnDash's bars * are #333, about 9.7:1 against the highlight fill. */ html:is(#atn-x,[data-atn-highlight-links="on"]):is(#atn-x,[data-atn-highlight-links="on"]):is(#atn-x,[data-atn-highlight-links="on"]):is(#atn-x,[data-atn-highlight-links="on"]) :is(a[href], button, [role="button"], .ld-button, .elementor-button):not(.attune-ui, .attune-ui *) *:not(:empty) { background: transparent !important; background-image: none !important; } /* * Hover shifts on two channels - darker fill and a thicker outline - so the * change does not depend on perceiving colour alone. */ html:is(#atn-x,[data-atn-highlight-links="on"]):is(#atn-x,[data-atn-highlight-links="on"]):is(#atn-x,[data-atn-highlight-links="on"]):is(#atn-x,[data-atn-highlight-links="on"]) :is( a[href], button, summary, [role="button"], [role="link"], input[type="submit"], input[type="button"], .ld-button, .elementor-button ):not(.attune-ui, .attune-ui *):is(:hover, :focus-visible) { background: var(--atn-hl-hover) !important; outline-width: 4px !important; } /* * Hide images: replaced with a flat block rather than removed, so layout does * not collapse and the page keeps its shape. * * svg is deliberately NOT in this list. The media library does not accept SVG * uploads, so every on a page like this is interface iconography - menu * chevrons, the cookie banner's open/close controls, social icons - never a * content image. Hiding svg indiscriminately took those out along with actual * pictures, which is a different preference (an icon carries no information * to lose; a photo does) and broke controls that happened to be drawn as SVG. */ html[data-atn-hide-images="on"] :is(img, picture, video):not(.attune-ui, .attune-ui *) { visibility: hidden !important; } html[data-atn-hide-images="on"] :is(figure, .wp-block-image, [class*="image"]):not(.attune-ui, .attune-ui *) { background-image: none !important; } html[data-atn-hide-images="on"] *:not(.attune-ui, .attune-ui *)::before, html[data-atn-hide-images="on"] *:not(.attune-ui, .attune-ui *)::after { background-image: none !important; } /* * Big cursor. * * The arrow is set on the root and inherited, NOT forced onto every element * with `*`. Forcing it meant an image or span inside a link matched the arrow * rule and won, so a link showed a hand over its bare text but an arrow over * its picture - and it also destroyed the pointer that themes set on clickable * divs, which is how most list rows and cards are built. * * Inheriting instead leaves those pointers intact, so attune-cursor.js can find * them: it tags anything whose computed cursor is `pointer` with * data-atn-cursor, and the rule below turns it into the big hand. That covers * clickable elements that carry no semantic markup at all. * * The panel is deliberately NOT excluded here. Every other preference stops at * the panel edge, but a cursor is global by nature - a big arrow that shrinks * to a small hand over the panel's own buttons is just a bug. */ html[data-atn-big-cursor="on"], html[data-atn-big-cursor="on"] body { 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 2l13 9-5.6 1.4L15 20l-3 1.2-2.5-6.9L5 18z' fill='%23fff' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto !important; } html[data-atn-big-cursor="on"] :is( a[href], button, summary, label[for], select, [onclick], [role="button"], [role="link"], [role="tab"], [role="menuitem"], [role="option"], input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"], [data-atn-cursor="pointer"] ), html[data-atn-big-cursor="on"] :is( a[href], button, summary, label[for], select, [onclick], [role="button"], [role="link"], [role="tab"], [role="menuitem"], [role="option"], input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"], [data-atn-cursor="pointer"] ) * { 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='M10 2.5a1.5 1.5 0 013 0V10h1V8a1.5 1.5 0 013 0v2.6h1a1.5 1.5 0 011.5 1.5v3.5a5.4 5.4 0 01-5.4 5.4h-2.4a5 5 0 01-3.9-1.9L5 15.4a1.5 1.5 0 012.2-2l1.8 1.7z' fill='%23fff' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 10 2, pointer !important; } /* Text entry keeps a caret, scaled to match. */ html[data-atn-big-cursor="on"] :is( textarea, input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], [contenteditable="true"] ) { 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='M12 4v16M9 4h6M9 20h6' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M12 4v16M9 4h6M9 20h6' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 12 12, text !important; } /* * Image tooltips. * * The affordance is the cursor, not a border. An earlier version outlined every * image in red, grey or blue by alt state - useful for auditing a site, wrong * for a visitor, who is reading a page rather than inspecting it and does not * need every picture ringed in a warning colour. * * cursor: help is the long-standing convention for "there is an explanation * here if you want it", it adds no visual noise, and it appears exactly where * the visitor is already looking. Decorative images are excluded: they have no * tooltip, so promising one would be a lie. * * Skipped entirely while big cursor is on. That preference sets the cursor on * the root and lets it inherit, so a cursor forced onto images here would * punch a hole in it - the pointer would shrink back to a small default over * every picture on the page. */ html[data-atn-image-tips="on"]:not([data-atn-big-cursor="on"]) img:not([alt=""]):not(.attune-ui, .attune-ui *) { cursor: help; } /* * An image that is focusable only because image tooltips are on gets a visible * focus ring - it is a new tab stop, and a tab stop nobody can see is worse * than no tab stop. attune-image-tips.js marks the ones it made focusable, so * this never touches an image the site itself made interactive. */ html[data-atn-image-tips="on"] img[data-atn-tip-tab]:not(.attune-ui, .attune-ui *):focus-visible { outline: 4px solid var(--atn-focus) !important; outline-offset: 2px; } html[data-atn-focus-ring="on"] { --atn-focus-width: 4px; } html[data-atn-focus-ring="on"] :is(a, button, input, select, textarea, summary, [tabindex]):not(.attune-ui, .attune-ui *):focus-visible { outline: 4px solid var(--atn-focus) !important; outline-offset: 3px !important; border-radius: 2px; box-shadow: 0 0 0 6px #fff !important; } /* * Contrast modes are blunt by necessity: they have to beat a page builder * writing colour onto nearly every wrapper. Backgrounds are flattened and * background images dropped, because text over a photograph is exactly what a * contrast preference exists to fix. * * Add site-specific selectors to the exclusions setting rather than editing * these rules. * * EVERY RULE BELOW OPENS WITH `html:is(#atn-x,[…]):is(#atn-x,[…]):is(#atn-x,[…])`, * ON PURPOSE. It matches exactly what `html[data-atn-contrast="x"]` matches * and nothing more - the leading `html` type selector means only the root * element can ever match, so the `#atn-x` id (which exists nowhere) can never * pull in an element of its own. What it changes is SPECIFICITY: `:is()` * takes the weight of its heaviest argument, so each one counts as an id, * and three of them give the selector three ids. * * Why three, measured rather than guessed. Every rule here is already * `!important`, so only another `!important` declaration can beat it - and * among those, specificity decides. Scanning every stylesheet actually loaded * on this site for `!important` colour rules, the heaviest is LearnDash's * `.learndash-wrapper .ld-focus .ld-focus-header #sfwd-mark-complete * #learndash_mark_complete_button` at TWO IDS plus three classes. Ids outrank * classes outright, so the previous approach here - repeating the attribute * selector four times, which only ever adds to the class column - could not * beat it however many times it was repeated. Three ids clears two. * * This replaced that four-times repeat after a link in the focus header * ("Course Home") was measured at 1.99:1 against its own background under * Light contrast: LearnDash styles it through a six-class chain plus * !important, out-weighing the five the repeat trick reached. Do not tidy * these away, and do not "simplify" them back to a plain attribute selector. * * BUTTON_LIKE reuses the exact selector list highlight-links already * established for "this reads as a button even though the tag says " - * LearnDash's Previous/Next Lesson controls chief among them. Each mode's * BUTTON_LIKE rule is followed by a "children inherit" rule for the same * reason highlight-links has one: without it, a sitting inside a * button-coloured element gets caught by the general heading/text rule * instead of the button's own ink colour, and ends up the wrong colour for * the background it's actually sitting on - confirmed live on the "N Topics" * expand control, whose label was landing in dark ink on the button's own * accent-coloured fill. */ html:is(#atn-x,[data-atn-contrast="high"]):is(#atn-x,[data-atn-contrast="high"]):is(#atn-x,[data-atn-contrast="high"]) { --atn-focus: #ff0; } html:is(#atn-x,[data-atn-contrast="high"]):is(#atn-x,[data-atn-contrast="high"]):is(#atn-x,[data-atn-contrast="high"]) :is(body, div, section, article, aside, header, footer, main, nav, li, td, th, form, figure):not(.attune-ui, .attune-ui *) { background-color: #000 !important; background-image: none !important; color: #fff !important; border-color: #fff !important; text-shadow: none !important; box-shadow: none !important; } html:is(#atn-x,[data-atn-contrast="high"]):is(#atn-x,[data-atn-contrast="high"]):is(#atn-x,[data-atn-contrast="high"]) :is(h1, h2, h3, h4, h5, h6, p, span, label, strong, em, dt, dd, blockquote, figcaption):not(.attune-ui, .attune-ui *) { color: #fff !important; background-color: transparent !important; } /* * Plain links reset their OWN background to transparent, not just their * text colour. `a` is deliberately not in the block-flatten list above - * filling every inline link with a solid block colour would turn ordinary * text into a strip of chips - but some site buttons render as a bare `` * with no class at all, styled entirely through a wrapper (LearnDash's own * "Continue Study" control among them), carrying their own background colour * that neither the flatten list nor BUTTON_LIKE below ever touches. Left * alone, the link colour above lands on whatever that background happened to * be - confirmed live as unreadable blue-on-navy. Resetting it to transparent * lets the page background it's actually sitting on (already flattened) * show through instead. */ html:is(#atn-x,[data-atn-contrast="high"]):is(#atn-x,[data-atn-contrast="high"]):is(#atn-x,[data-atn-contrast="high"]) a:not(.attune-ui, .attune-ui *) { background-color: transparent !important; background-image: none !important; color: #ffd666 !important; text-decoration: underline !important; } /* background-image is deliberately absent here: browsers refuse to let :visited touch it (or almost anything besides colour) as a history-sniffing protection, so it would be silently ignored - background-color is one of the few properties :visited is actually allowed to change. */ html:is(#atn-x,[data-atn-contrast="high"]):is(#atn-x,[data-atn-contrast="high"]):is(#atn-x,[data-atn-contrast="high"]) a:visited:not(.attune-ui, .attune-ui *) { background-color: transparent !important; color: #d6a8ff !important; } html:is(#atn-x,[data-atn-contrast="high"]):is(#atn-x,[data-atn-contrast="high"]):is(#atn-x,[data-atn-contrast="high"]) :is(button, input[type="submit"], input[type="button"], summary, [role="button"], .ld-button, .elementor-button):not(.attune-ui, .attune-ui *) { background-color: #ffd666 !important; background-image: none !important; color: #000 !important; border: 2px solid #fff !important; } html:is(#atn-x,[data-atn-contrast="high"]):is(#atn-x,[data-atn-contrast="high"]):is(#atn-x,[data-atn-contrast="high"]) :is(button, input[type="submit"], input[type="button"], summary, [role="button"], .ld-button, .elementor-button):not(.attune-ui, .attune-ui *) * { background: transparent !important; color: #000 !important; fill: #000 !important; } /* * AN ICON THAT IS DRAWN WITH ITS BACKGROUND, NOT WITH ITS TEXT. * * The rule above blanks the background of everything inside a button, which is * right for the usual case: a label or an icon-font glyph carries its own * colour and a leftover fill behind it only muddies the button. LearnDash's * mobile sidebar toggle is the exception. Its three bars are empty spans whose * background-color IS the picture, so blanking it erased the icon and left a * plain coloured rectangle where the menu control had been. Measured on live * on 22 September 2026: 1.01:1 in Dark, 1.48:1 in Light - the control was * invisible in every contrast mode, on the one layout where it is the only way * to reach the course navigation. * * Painted in the same ink the rule above gives that button's contents, so the * bars are exactly as visible as the button's own label: 8.53:1 in Light, * 10.39:1 in Dark, 15.06:1 in High. * * NAMED RATHER THAN MATCHED BY SHAPE. `span:empty` inside a button would have * caught this without naming LearnDash - and would also have caught the * icon-font arrows beside it, painting a solid block over glyphs that were * rendering correctly. CSS cannot ask whether an element's background is its * content, so the honest version names the one control where it is. Attune's * selector lists already name .ld-button and .elementor-button for the same * reason. */ html:is(#atn-x,[data-atn-contrast="high"]):is(#atn-x,[data-atn-contrast="high"]):is(#atn-x,[data-atn-contrast="high"]) .ld-trigger-mobile-nav span:not(.attune-ui, .attune-ui *) { background-color: #000 !important; } html:is(#atn-x,[data-atn-contrast="high"]):is(#atn-x,[data-atn-contrast="high"]):is(#atn-x,[data-atn-contrast="high"]) :is(input, select, textarea):not(.attune-ui, .attune-ui *) { background-color: #000 !important; color: #fff !important; border: 2px solid #fff !important; } /* * Light contrast: the same flatten-backgrounds, drop-photos-behind-text * treatment as "high", starting from white instead of black. This is the mode * "high" and "dark" left uncovered - a visitor who wants a busy or low- * contrast theme reset to one plain, predictable palette, but finds a forced * black background uncomfortable rather than helpful. Not the same thing as * "site colours": that leaves the theme's own palette, images and all, alone. * * Link colour is #0645AD (Wikipedia's link blue), not an arbitrary blue - * checked at 8.53:1 against white, clearing WCAG AAA (7:1). The first colour * tried here, #0b57d0, only reached 6.39:1 - AA, but short of the AAA rigor * High contrast and Dark both hit, which was the one inconsistency an actual * contrast-ratio check turned up across all three modes. */ html:is(#atn-x,[data-atn-contrast="light"]):is(#atn-x,[data-atn-contrast="light"]):is(#atn-x,[data-atn-contrast="light"]) { --atn-focus: #0645ad; } html:is(#atn-x,[data-atn-contrast="light"]):is(#atn-x,[data-atn-contrast="light"]):is(#atn-x,[data-atn-contrast="light"]) :is(body, div, section, article, aside, header, footer, main, nav, li, td, th, form, figure):not(.attune-ui, .attune-ui *) { background-color: #fff !important; background-image: none !important; color: #1a1a1a !important; border-color: #767676 !important; text-shadow: none !important; box-shadow: none !important; } html:is(#atn-x,[data-atn-contrast="light"]):is(#atn-x,[data-atn-contrast="light"]):is(#atn-x,[data-atn-contrast="light"]) :is(h1, h2, h3, h4, h5, h6, p, span, label, strong, em, dt, dd, blockquote, figcaption):not(.attune-ui, .attune-ui *) { color: #1a1a1a !important; background-color: transparent !important; } html:is(#atn-x,[data-atn-contrast="light"]):is(#atn-x,[data-atn-contrast="light"]):is(#atn-x,[data-atn-contrast="light"]) a:not(.attune-ui, .attune-ui *) { background-color: transparent !important; background-image: none !important; color: #0645ad !important; text-decoration: underline !important; } html:is(#atn-x,[data-atn-contrast="light"]):is(#atn-x,[data-atn-contrast="light"]):is(#atn-x,[data-atn-contrast="light"]) a:visited:not(.attune-ui, .attune-ui *) { background-color: transparent !important; color: #6b21a8 !important; } html:is(#atn-x,[data-atn-contrast="light"]):is(#atn-x,[data-atn-contrast="light"]):is(#atn-x,[data-atn-contrast="light"]) :is(button, input[type="submit"], input[type="button"], summary, [role="button"], .ld-button, .elementor-button):not(.attune-ui, .attune-ui *) { background-color: #0645ad !important; background-image: none !important; color: #fff !important; border: 2px solid #1a1a1a !important; } html:is(#atn-x,[data-atn-contrast="light"]):is(#atn-x,[data-atn-contrast="light"]):is(#atn-x,[data-atn-contrast="light"]) :is(button, input[type="submit"], input[type="button"], summary, [role="button"], .ld-button, .elementor-button):not(.attune-ui, .attune-ui *) * { background: transparent !important; color: #fff !important; fill: #fff !important; } /* The mobile sidebar toggle's bars are drawn with their background; see the note in the high-contrast section above. */ html:is(#atn-x,[data-atn-contrast="light"]):is(#atn-x,[data-atn-contrast="light"]):is(#atn-x,[data-atn-contrast="light"]) .ld-trigger-mobile-nav span:not(.attune-ui, .attune-ui *) { background-color: #fff !important; } html:is(#atn-x,[data-atn-contrast="light"]):is(#atn-x,[data-atn-contrast="light"]):is(#atn-x,[data-atn-contrast="light"]) :is(input, select, textarea):not(.attune-ui, .attune-ui *) { background-color: #fff !important; color: #1a1a1a !important; border: 2px solid #1a1a1a !important; } html:is(#atn-x,[data-atn-contrast="dark"]):is(#atn-x,[data-atn-contrast="dark"]):is(#atn-x,[data-atn-contrast="dark"]) { --atn-focus: #8ab4f8; } html:is(#atn-x,[data-atn-contrast="dark"]):is(#atn-x,[data-atn-contrast="dark"]):is(#atn-x,[data-atn-contrast="dark"]) :is(body, div, section, article, aside, header, footer, main, nav, li, td, th, form, figure):not(.attune-ui, .attune-ui *) { background-color: #16181c !important; background-image: none !important; color: #e8eaed !important; border-color: #3c4043 !important; } html:is(#atn-x,[data-atn-contrast="dark"]):is(#atn-x,[data-atn-contrast="dark"]):is(#atn-x,[data-atn-contrast="dark"]) :is(h1, h2, h3, h4, h5, h6, p, span, label, strong, em, dt, dd, blockquote, figcaption):not(.attune-ui, .attune-ui *) { color: #e8eaed !important; background-color: transparent !important; } html:is(#atn-x,[data-atn-contrast="dark"]):is(#atn-x,[data-atn-contrast="dark"]):is(#atn-x,[data-atn-contrast="dark"]) a:not(.attune-ui, .attune-ui *) { background-color: transparent !important; background-image: none !important; color: #8ab4f8 !important; } html:is(#atn-x,[data-atn-contrast="dark"]):is(#atn-x,[data-atn-contrast="dark"]):is(#atn-x,[data-atn-contrast="dark"]) :is(button, input[type="submit"], input[type="button"], summary, [role="button"], .ld-button, .elementor-button):not(.attune-ui, .attune-ui *) { background-color: #263257 !important; background-image: none !important; color: #e8eaed !important; border: 2px solid #8ab4f8 !important; } html:is(#atn-x,[data-atn-contrast="dark"]):is(#atn-x,[data-atn-contrast="dark"]):is(#atn-x,[data-atn-contrast="dark"]) :is(button, input[type="submit"], input[type="button"], summary, [role="button"], .ld-button, .elementor-button):not(.attune-ui, .attune-ui *) * { background: transparent !important; color: #e8eaed !important; fill: #e8eaed !important; } /* The mobile sidebar toggle's bars are drawn with their background; see the note in the high-contrast section above. */ html:is(#atn-x,[data-atn-contrast="dark"]):is(#atn-x,[data-atn-contrast="dark"]):is(#atn-x,[data-atn-contrast="dark"]) .ld-trigger-mobile-nav span:not(.attune-ui, .attune-ui *) { background-color: #e8eaed !important; } html:is(#atn-x,[data-atn-contrast="dark"]):is(#atn-x,[data-atn-contrast="dark"]):is(#atn-x,[data-atn-contrast="dark"]) :is(input, select, textarea):not(.attune-ui, .attune-ui *) { background-color: #202124 !important; color: #e8eaed !important; border: 1px solid #5f6368 !important; } html:is(#atn-x,[data-atn-contrast="dark"]):is(#atn-x,[data-atn-contrast="dark"]):is(#atn-x,[data-atn-contrast="dark"]) img:not(.attune-ui, .attune-ui *) { filter: brightness(0.88); } /* * PROGRESS BARS DRAWN WITH A BACKGROUND COLOUR. * * The rules above force backgrounds off page content, which is how a theme's * own colours stop wrecking the ratio the visitor asked for. An element whose * background IS the graphic disappears entirely under that - the same failure * as the empty-span hamburger higher up this file, and it hits LearnDash's * progress bar: the fill goes transparent while the page still announces * "15% complete" to a screen reader. * * Repainting the background is not the fix, because background on these * elements is exactly what was cleared. The fill is drawn instead with an * inset box-shadow, which nothing here touches and which follows the ink * colour each mode has already set. The track keeps a border so the bar's * full extent stays readable rather than only its filled part. * * Named selectors rather than something generic: guessing at "anything that * looks like a progress bar" would repaint decorative rules and dividers too. * These are LearnDash's own classes plus the standard element. */ html:is(#atn-x,[data-atn-contrast]):is(#atn-x,[data-atn-contrast]):is(#atn-x,[data-atn-contrast]) :is(.ld-progress-bar, progress):not(.attune-ui, .attune-ui *) { border: 1px solid currentColor !important; background: transparent !important; overflow: hidden; } html:is(#atn-x,[data-atn-contrast]):is(#atn-x,[data-atn-contrast]):is(#atn-x,[data-atn-contrast]) .ld-progress-bar-percentage:not(.attune-ui, .attune-ui *) { box-shadow: inset 0 0 0 100vmax currentColor !important; } /* * Motion. Off (no attribute) follows the OS: prefers-reduced-motion alone * decides. On forces animations and transitions off regardless of what the * OS reports - this used to also carry a third state that forced animations * to play despite the OS asking for less motion; dropped along with the * schema's move to a plain bool, because it read as a scale for what is * really a single override. */ @media (prefers-reduced-motion: reduce) { html *:not(.attune-ui, .attune-ui *), html *:not(.attune-ui, .attune-ui *)::before, html *:not(.attune-ui, .attune-ui *)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } html[data-atn-motion="on"] *:not(.attune-ui, .attune-ui *), html[data-atn-motion="on"] *:not(.attune-ui, .attune-ui *)::before, html[data-atn-motion="on"] *:not(.attune-ui, .attune-ui *)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } html[data-atn-motion="on"] video[autoplay]:not(.attune-ui, .attune-ui *) { display: none !important; } /* ------------------------------------------------------------------------- Hearing ----------------------------------------------------------------------- */ video::cue { font-size: calc(1em * var(--atn-caption-scale)); background-color: rgba(0, 0, 0, var(--atn-caption-bg-alpha)); color: #fff; line-height: 1.4; } html[data-atn-caption-bg="none"] video::cue { text-shadow: 0 0 4px #000, 0 0 8px #000; } /* * Visual alternatives to sound. Any component that plays a sound to signal * something should also render an element carrying .attune-cue. */ html[data-atn-visual-cues="off"] .attune-cue { display: none !important; } .attune-cue { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.35em 0.7em; border-radius: 4px; border: 2px solid currentColor; font-weight: 600; line-height: 1.3; } .attune-cue--positive { color: #0b6b3a; } .attune-cue--negative { color: #9a1c1c; } .attune-cue--info { color: #0b57d0; } /* ------------------------------------------------------------------------- Understanding ----------------------------------------------------------------------- */ /* * Read aloud: the sentence currently being spoken. * * Painted with the CSS Custom Highlight API. The script hands the browser a * Range and the browser paints it - no wrapper element, no class on the * content, no change to the DOM or the accessibility tree. That is the whole * reason this approach was chosen over wrapping sentences in spans: a real * screen reader running alongside sees the document it saw before, unaltered. * * There is no :not(.attune-ui, .attune-ui *) guard here because this rule * selects no elements at all - it styles ranges, and the script never builds a * range inside the panel. * * Where the API is missing the highlight simply does not appear and the reading * still works. Only these four properties are paintable on a highlight, which * is why the emphasis is carried by background and underline rather than by a * box. */ /* * Two levels: the sentence, and the word inside it. * * The sentence is a quiet wash - enough to say "you are here", not enough to * compete. The word carries the full highlight colour, so the eye can follow * the voice rather than hunting through a solid yellow block for it. * * The word highlight is registered with a higher priority in JavaScript, which * is what decides the winner where two highlights cover the same character. * Only four properties are paintable on a highlight, so the emphasis has to be * carried by colour and underline rather than by weight or a box. */ ::highlight(attune-read) { background-color: color-mix(in srgb, var(--atn-hl) 32%, transparent); color: var(--atn-hl-ink); } ::highlight(attune-read-word) { background-color: var(--atn-hl); color: var(--atn-hl-ink); text-decoration: underline; } /* * The sentence, in full colour, for voices that cannot report which word they * are on - Chrome's Google set among them. There is no word marker in this * mode, so the sentence carries the emphasis on its own rather than sitting in * a pale wash waiting for a marker that is never coming. */ ::highlight(attune-read-solid) { background-color: var(--atn-hl); color: var(--atn-hl-ink); } /* * Where color-mix is not supported the wash falls back to the full colour, * which is the pre-2.16 behaviour: the whole sentence highlighted, readable, * just without the word standing out inside it. */ @supports not (background-color: color-mix(in srgb, red 30%, transparent)) { ::highlight(attune-read) { background-color: var(--atn-hl); } } /* * Make room at the bottom of the page for the read-aloud bar. * * The bar is fixed to the bottom of the viewport, so without this the page * simply ends underneath it and whatever sits last is covered with no way to * scroll it clear. Measured on a phone: at maximum scroll the "Previous * Lesson" control sat entirely behind the bar and could not be reached at all * - a navigation control lost outright, not merely awkward. * * --atn-read-bar-h is the bar's measured height, published by * attune-panel.js; see the trigger's matching offset in attune-panel.css, * which gets out of the bar's way the same way and for the same reason. The * extra 16px is breathing room so the last line does not sit flush against * the bar's edge. * * This is a site rule rather than a panel one, which is why it lives here: it * changes the page's own layout, and only while read aloud is switched on. */ html[data-atn-read-aloud="on"]:not([data-atn-tts="no"]) body:not(.attune-ui, .attune-ui *) { padding-block-end: calc(var(--atn-read-bar-h, 62px) + 16px) !important; } .attune-lesson--plain { display: none; } html[data-atn-plain-language="on"] .attune-lesson--plain { display: block; } html[data-atn-plain-language="on"] .attune-lesson--standard { display: none; } /* ------------------------------------------------------------------------- Utilities ----------------------------------------------------------------------- */ .attune-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; } .attune-skip { position: absolute; left: -9999px; top: 0; z-index: 100001; padding: 0.75rem 1.25rem; background: #111; color: #fff; font: 500 1rem/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; text-decoration: none; } .attune-skip:focus { left: 0.5rem; top: 0.5rem; outline: 3px solid var(--atn-focus); outline-offset: 2px; }