/* * Accessibility panel and the preference classes it sets on . * * The preference rules are deliberately blunt and use !important: they exist * to overrule the design when a visitor needs them to, including the parts of * the page that come from WooCommerce or the store plugin. * * The panel is written in rem like the rest of the site, so it grows with the * text-size setting rather than staying a fixed island of small type at 175%. * Its height is capped and its body scrolls, which is what stops that from * turning into a panel taller than the screen. */ /* ------------------------------------------------------------- The widget */ .dlx-a11y { position: fixed; z-index: 100000; /* Sits 16px off the bottom and is lifted clear of the player by a transform that theme.js sets from the player's measured height. A transform rather than `bottom` because it moves the button without a layout pass, and because changing `bottom` on an already-placed fixed element is unreliable in some engines. */ bottom: 16px; left: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--dlx-space-xs); /* No transition on the lift: it is a positioning correction, not an animation, and animating it means the button is briefly in the wrong place (or never arrives at all if the tab is in the background when the player opens). */ } /* The markup ships this hidden and the script reveals it, because a control that cannot do anything is worse than no control at all. That only works if `hidden` is honoured: an author `display` beats the browser's [hidden] rule, so with scripting off the button was appearing and doing nothing. */ .dlx-a11y[hidden] { display: none; } .dlx-a11y__toggle { position: relative; display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid var(--dlx-border-strong); border-radius: var(--dlx-radius-pill); background-color: var(--dlx-surface-2); background-image: var(--dlx-face); color: var(--dlx-text); padding: 0; box-shadow: var(--dlx-z3), var(--dlx-rim-lit); cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease; } .dlx-a11y__toggle:active { background-image: none; box-shadow: var(--dlx-press); } .dlx-a11y__toggle svg { width: 24px; height: 24px; } .dlx-a11y__toggle:hover, .dlx-a11y__toggle:focus-visible { border-color: var(--dlx-accent); background: var(--dlx-accent); color: var(--dlx-accent-contrast); } .dlx-a11y.is-active .dlx-a11y__toggle { border-color: var(--dlx-accent); } /* A settings-are-on marker that does not depend on the border colour alone, because at high contrast every border is already at full strength. */ .dlx-a11y__dot { position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border: 2px solid var(--dlx-bg); border-radius: 50%; background: var(--dlx-signal-deep, var(--dlx-signal)); opacity: 0; } .dlx-a11y.is-active .dlx-a11y__dot { opacity: 1; } .dlx-a11y__panel { order: -1; display: flex; width: min(23rem, calc(100vw - 24px)); /* The space left above the button, not a share of the viewport. The whole widget is lifted clear of the player by --dlx-player-clearance, so a plain 78vh panel hung off the top of the screen the moment something was playing. 72px is the button, the gap and a little air. */ max-height: min(42rem, calc(100vh - var(--dlx-player-clearance, 16px) - 72px)); flex-direction: column; overflow: hidden; border: 1px solid var(--dlx-border); border-radius: var(--dlx-radius-lg); background: var(--dlx-surface); transform-origin: bottom left; box-shadow: var(--dlx-rim-lit), var(--dlx-z4); animation: dlx-surface-forward var(--dlx-dur, 170ms) var(--dlx-ease-out, ease-out) both; } /* The panel is a flex column, and an author `display` beats the [hidden] rule the browser supplies, so closed has to be said again here. Without this line the panel is simply always open. */ .dlx-a11y__panel[hidden] { display: none; } .dlx-a11y__panel:focus { outline: none; } .dlx-a11y__panel:focus-visible { outline: 2px solid var(--dlx-focus); outline-offset: -2px; } .dlx-a11y__head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: var(--dlx-space-sm); border-bottom: 1px solid var(--dlx-border-soft); padding: var(--dlx-space-sm) var(--dlx-space-md); } .dlx-a11y__head h2 { margin: 0; color: var(--dlx-text); font-family: var(--dlx-font); font-size: var(--dlx-fs-lg); font-weight: 700; letter-spacing: -.01em; } .dlx-a11y__close { display: grid; width: 1.875rem; height: 1.875rem; place-items: center; border: 1px solid var(--dlx-border); border-radius: var(--dlx-radius-sm); background: var(--dlx-surface-input); color: var(--dlx-muted); padding: 0; cursor: pointer; } .dlx-a11y__close svg { width: 1rem; height: 1rem; } .dlx-a11y__close:hover { border-color: var(--dlx-border-strong); color: var(--dlx-text); } .dlx-a11y__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; } .dlx-a11y__group + .dlx-a11y__group { border-top: 1px solid var(--dlx-border-soft); } .dlx-a11y__group-title { margin: 0; padding: var(--dlx-space-sm) var(--dlx-space-md) 4px; color: var(--dlx-subtle); font-family: var(--dlx-font); font-size: var(--dlx-fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } /* Presets: three rows that each write a whole set of preferences. */ .dlx-a11y__presets { display: grid; gap: 6px; padding: 0 var(--dlx-space-md) var(--dlx-space-sm); } .dlx-a11y__preset { display: block; border: 1px solid var(--dlx-border-strong); border-radius: var(--dlx-radius); background: var(--dlx-surface-input); color: var(--dlx-text); padding: 8px 10px; font-family: inherit; text-align: left; cursor: pointer; } .dlx-a11y__preset strong { display: block; font-size: var(--dlx-fs-ui); font-weight: 650; } .dlx-a11y__preset small { display: block; margin-top: 1px; color: var(--dlx-subtle); font-size: var(--dlx-fs-xs); } .dlx-a11y__preset:hover { border-color: var(--dlx-accent); } .dlx-a11y__preset[aria-pressed="true"] { border-color: var(--dlx-accent); background: var(--dlx-accent); color: var(--dlx-accent-contrast); } .dlx-a11y__preset[aria-pressed="true"] small { color: inherit; opacity: .75; } .dlx-a11y__list { display: grid; margin: 0; padding: 0 0 4px; list-style: none; } /* Every control shares one label block, so the two columns line up whether the control on the right is a switch, a stepper or a segment. */ .dlx-a11y__text { display: block; min-width: 0; } .dlx-a11y__text strong { display: block; color: var(--dlx-text); font-size: var(--dlx-fs-ui); font-weight: 650; } .dlx-a11y__text small { display: block; margin-top: 1px; color: var(--dlx-subtle); font-size: var(--dlx-fs-xs); line-height: 1.35; } .dlx-a11y__row, .dlx-a11y__switch { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--dlx-space-sm); padding: 7px var(--dlx-space-md); } .dlx-a11y__row--stack { flex-direction: column; align-items: stretch; gap: 6px; } .dlx-a11y__switch { border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; } .dlx-a11y__switch:hover { background: var(--dlx-surface-2); } .dlx-a11y__switch-track { position: relative; flex: none; width: 2.5rem; height: 1.375rem; border: 1px solid var(--dlx-border-strong); border-radius: var(--dlx-radius-pill); background: var(--dlx-surface-input); transition: background .15s ease, border-color .15s ease; } .dlx-a11y__switch-track::after { position: absolute; top: 50%; left: 3px; width: .875rem; height: .875rem; margin-top: -.4375rem; border-radius: 50%; background: var(--dlx-muted); content: ""; transition: transform .15s ease, background .15s ease; } .dlx-a11y__switch[aria-pressed="true"] .dlx-a11y__switch-track { border-color: var(--dlx-accent); background: var(--dlx-accent); } .dlx-a11y__switch[aria-pressed="true"] .dlx-a11y__switch-track::after { transform: translateX(1.125rem); background: var(--dlx-accent-contrast); } /* Stepper */ .dlx-a11y__steps { display: flex; flex: none; align-items: center; gap: 6px; } .dlx-a11y__step { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--dlx-border-strong); border-radius: var(--dlx-radius-sm); background: var(--dlx-surface-input); color: var(--dlx-text); padding: 0; cursor: pointer; } .dlx-a11y__step svg { width: 1rem; height: 1rem; } .dlx-a11y__step:hover:not(:disabled) { border-color: var(--dlx-accent); background: var(--dlx-accent); color: var(--dlx-accent-contrast); } .dlx-a11y__step:disabled { opacity: .38; cursor: default; } .dlx-a11y__value { min-width: 3.125rem; color: var(--dlx-text); font-family: var(--dlx-font); font-size: var(--dlx-fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; } /* Segment */ .dlx-a11y__segment { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; overflow: hidden; border: 1px solid var(--dlx-border-strong); border-radius: var(--dlx-radius-sm); background: var(--dlx-surface-input); } .dlx-a11y__choice { border: 0; background: none; color: var(--dlx-muted); padding: 7px 4px; font-family: inherit; font-size: var(--dlx-fs-xs); font-weight: 650; cursor: pointer; } .dlx-a11y__choice + .dlx-a11y__choice { border-left: 1px solid var(--dlx-border); } .dlx-a11y__choice:hover { color: var(--dlx-text); } .dlx-a11y__choice[aria-checked="true"] { background: var(--dlx-accent); color: var(--dlx-accent-contrast); } .dlx-a11y__foot { display: flex; flex: none; align-items: center; justify-content: space-between; gap: var(--dlx-space-sm); border-top: 1px solid var(--dlx-border-soft); padding: var(--dlx-space-sm) var(--dlx-space-md); } .dlx-a11y__reset { border: 0; background: none; color: var(--dlx-muted); padding: 0; font-family: inherit; font-size: var(--dlx-fs-sm); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .dlx-a11y__reset:hover { color: var(--dlx-text); } .dlx-a11y__foot a { color: var(--dlx-subtle); font-size: var(--dlx-fs-sm); text-decoration: none; } .dlx-a11y__foot a:hover { color: var(--dlx-text); text-decoration: underline; text-underline-offset: 3px; } /* --------------------------------------------------------- Preferences */ /* * Text size works because every font-size in the theme is a rem, which is the * whole point of the conversion that came with this panel: percentages on the * root element reach type expressed in root-relative units and nothing else. * It also means a visitor who has raised the default text size in their own * browser settings now gets a larger site without touching this panel at all. */ html.dlx-a11y-text-90 { font-size: 90%; } html.dlx-a11y-text-112 { font-size: 112.5%; } html.dlx-a11y-text-125 { font-size: 125%; } html.dlx-a11y-text-150 { font-size: 150%; } html.dlx-a11y-text-175 { font-size: 175%; } /* Line spacing. The line-height goes everywhere text runs; the paragraph spacing only goes where there is prose, because adding block margins to the paragraphs inside a card or a drawer moves furniture rather than helping anyone read. */ html.dlx-a11y-lead-1 { --dlx-lh-body: 1.75; --dlx-lh-snug: 1.5; } html.dlx-a11y-lead-2 { --dlx-lh-body: 2.05; --dlx-lh-snug: 1.7; } html.dlx-a11y-lead-1 :is(p, li, dd, dt, blockquote, figcaption, label, td, th), html.dlx-a11y-lead-2 :is(p, li, dd, dt, blockquote, figcaption, label, td, th) { line-height: var(--dlx-lh-body) !important; } html.dlx-a11y-lead-1 :is(.dlx-entry-content, .dlx-guide__body, .dlx-legal, .woocommerce-account) :is(p, ul, ol, blockquote) { margin-block: 1em; } html.dlx-a11y-lead-2 :is(.dlx-entry-content, .dlx-guide__body, .dlx-legal, .woocommerce-account) :is(p, ul, ol, blockquote) { margin-block: 1.45em; } /* Letter and word spacing. The display tracking tokens are zeroed rather than left negative, because -.055em fighting +.05em is a wash and the headline is the line most likely to be the reason someone turned this on. */ html.dlx-a11y-tracking { --dlx-track-display: 0em; --dlx-track-display-tight: 0em; --dlx-track-caps: .09em; } html.dlx-a11y-tracking body, html.dlx-a11y-tracking body * { letter-spacing: .05em !important; word-spacing: .12em !important; } /* The design already tracks its small uppercase labels between .06em and .14em, so the blanket rule above would have made exactly those TIGHTER while claiming to widen them. These are every selector in the theme that sets .06em or more; they are put back above the blanket rather than left to inheritance, because 372 of the roughly 500 text elements on the homepage declare a letter-spacing of their own and inheritance never reaches them. */ html.dlx-a11y-tracking :is( .dlx-eyebrow, .dlx-rule, .dlx-hero__meta, .dlx-hero-quick__label, .dlx-listening__label, .dlx-footer__bar, .dlx-footer__heading, .dlx-license-compare__flag, .dlx-track__flag, .dlx-track__state, .dlx-track__eq, .dlx-track__more-btn, .dlx-featured-card__stamp, .dlx-featured-card__buy, .dlx-featured-card__playhead, .dlx-featured-card__price small, .dlx-signal-rail__item small, .dlx-quick-license__head p, .digitlix-license-modal__header p, .dlxx-modal__eyebrow, .dlx-beat-transfer ), html.dlx-a11y-tracking :is( .dlx-eyebrow, .dlx-rule, .dlx-hero__meta, .dlx-hero-quick__label, .dlx-listening__label, .dlx-footer__bar, .dlx-footer__heading, .dlx-license-compare__flag, .dlx-track__flag, .dlx-track__state, .dlx-track__eq, .dlx-track__more-btn, .dlx-featured-card__stamp, .dlx-featured-card__buy, .dlx-featured-card__playhead, .dlx-featured-card__price small, .dlx-signal-rail__item small, .dlx-quick-license__head p, .digitlix-license-modal__header p, .dlxx-modal__eyebrow, .dlx-beat-transfer ) * { letter-spacing: .14em !important; } /* Wider words in a fixed column have to be allowed to break somewhere. */ html.dlx-a11y-tracking :is(h1, h2, h3, h4) { overflow-wrap: break-word; } /* The display headings are the one place wider tracking does not help. They are already 60 to 100px tall, and at 175% text the extra width carried the hero line 56px past the edge of a 375px screen. Their tracking is taken to zero instead, which is still looser than the -.055em they ship with. */ html.dlx-a11y-tracking :is(h1, h2, .dlx-hero__title, .dlx-hero__line), html.dlx-a11y-tracking :is(h1, h2, .dlx-hero__title, .dlx-hero__line) * { letter-spacing: normal !important; word-spacing: normal !important; } html.dlx-a11y-font, html.dlx-a11y-font body { --dlx-font: Verdana, Tahoma, "Segoe UI", Arial, sans-serif; --dlx-font-display: Verdana, Tahoma, "Segoe UI", Arial, sans-serif; --dlx-track-display: 0; } html.dlx-a11y-font * { font-family: var(--dlx-font) !important; letter-spacing: normal !important; } /* * Higher contrast. * * This works by redefining the design tokens, not by filtering the page: a * filter on or would make every fixed element (the player, the * mini cart, this panel) position against that element instead of the * viewport, which breaks them. * * The site carries two palettes under one set of token names -- paper at * :root, ink on `.dlx-on-ink` and its aliases -- and the earlier version of * this block only re-valued :root. Every section that carries `.dlx-on-paper` * or `.dlx-on-ink` re-declares the same tokens on itself, and a rule that * matches an element always beats a value inherited from an ancestor, so on * the paper-first site the whole preference quietly did nothing across most * of the page. Both worlds are re-valued here, at a specificity that clears * the section-level blocks. * * Each world is pushed to its own extreme rather than inverted into the * other: black on white where the page is paper, white on black where it is * ink. That keeps the several hundred colour literals that sit outside the * token system pointing the right way instead of landing on their opposite. */ html.dlx-a11y-contrast, html.dlx-a11y-contrast .dlx-on-paper { --dlx-bg: #ffffff; --dlx-bg-2: #ffffff; --dlx-surface: #ffffff; --dlx-surface-2: #f1f1f1; --dlx-surface-3: #e6e6e6; --dlx-surface-soft: #ffffff; --dlx-surface-input: #ffffff; --dlx-border: rgba(0, 0, 0, .62); --dlx-border-strong: #000000; --dlx-border-soft: rgba(0, 0, 0, .42); --dlx-text: #000000; --dlx-muted: #171717; /* 17.4:1 */ --dlx-subtle: #1f1f1f; /* 15.7:1 */ --dlx-faint: #2b2b2b; /* 13.1:1, still not body copy */ --dlx-accent: #000000; --dlx-accent-hover: #1a1a1a; --dlx-accent-contrast: #ffffff; --dlx-signal: #0b3ea8; /* 8.9:1 on white, and unmistakably state */ --dlx-signal-hover: #062a75; --dlx-signal-soft: rgba(11, 62, 168, .14); --dlx-signal-ink: #ffffff; --dlx-signal-deep: #062a75; --dlx-green: #0a5732; --dlx-green-bg: #e4f0e9; --dlx-danger: #8c1409; --dlx-info: #1f1f1f; --dlx-focus: #0b3ea8; --dlx-header-bg: #ffffff; --dlx-face: #ffffff; --dlx-face-lit: #ffffff; --dlx-face-ink: #000000; --dlx-rim: rgba(0, 0, 0, .62); --dlx-rim-lit: rgba(0, 0, 0, .82); --dlx-rim-dark: #000000; /* Elevation stops being a soft shadow and becomes a drawn ring: a 50px blur at 10% opacity says nothing at this contrast, and an edge does. */ --dlx-cut: 0 0 0 1px rgba(0, 0, 0, .62); --dlx-cut-deep: 0 0 0 2px #000000; } html.dlx-a11y-contrast :is(.dlx-on-ink, .dlx-collection, .dlx-exclusive-strip, .dlx-footer) { --dlx-bg: #000000; --dlx-bg-2: #000000; --dlx-surface: #0a0a0a; --dlx-surface-2: #141414; --dlx-surface-3: #1e1e1e; --dlx-surface-soft: #000000; --dlx-surface-input: #000000; --dlx-border: rgba(255, 255, 255, .62); --dlx-border-strong: #ffffff; --dlx-border-soft: rgba(255, 255, 255, .42); --dlx-text: #ffffff; --dlx-muted: #f2f2f2; --dlx-subtle: #e8e8e8; --dlx-faint: #d4d4d4; --dlx-accent: #ffffff; --dlx-accent-hover: #e8e8e8; --dlx-accent-contrast: #000000; --dlx-signal: #9dc2ff; --dlx-signal-hover: #c6dcff; --dlx-signal-soft: rgba(157, 194, 255, .2); --dlx-signal-ink: #000000; --dlx-signal-deep: #c6dcff; --dlx-green: #8dffb8; --dlx-green-bg: #06170e; --dlx-danger: #ffadb2; --dlx-info: #f2f2f2; --dlx-focus: #9dc2ff; --dlx-face: #0a0a0a; --dlx-face-lit: #1e1e1e; --dlx-face-ink: #ffffff; --dlx-rim: rgba(255, 255, 255, .62); --dlx-rim-lit: rgba(255, 255, 255, .82); --dlx-rim-dark: #ffffff; --dlx-cut: 0 0 0 1px rgba(255, 255, 255, .62); --dlx-cut-deep: 0 0 0 2px #ffffff; } /* * The literals the tokens cannot reach. The theme sets a colour outside the * token system in a few hundred places, but only these seven land below 4.5:1 * once both worlds are pushed to their extremes -- they are the mid-greys used * for tertiary text on a surface that has just become pure black or white. * Found by measuring every text node on the page against its painted * background, not by reading the stylesheets, so the list is what fails rather * than what looks like it might. */ html.dlx-a11y-contrast :is(.dlx-listening__label, .dlx-listening__time, .dlx-player-state) { color: var(--dlx-muted) !important; } html.dlx-a11y-contrast :is( .dlx-studio-band__empty, .dlx-studio-band__project b, .dlx-studio-band__name b, .dlx-studio-band__ruler span ) { color: var(--dlx-muted) !important; } html.dlx-a11y-contrast :is(.dlx-eyebrow, .dlx-rule) { color: var(--dlx-subtle); } /* * Grayscale: the same paper, with the hue taken out and lightness matched, so * contrast ratios are unchanged. State is then carried by weight, position and * the theme's own written "playing" flag rather than by colour, which is the * point. Only a handful of tokens carry hue at all on this palette. */ html.dlx-a11y-grayscale, html.dlx-a11y-grayscale .dlx-on-paper { --dlx-signal: #6b6b6e; --dlx-signal-hover: #4a4a4d; --dlx-signal-soft: rgba(107, 107, 110, .16); --dlx-signal-deep: #4a4a4d; --dlx-green: #3f3f42; --dlx-green-bg: #ebebeb; --dlx-danger: #3f3f42; --dlx-info: #5f6067; --dlx-focus: #3f3f42; --dlx-offer-border: #6b6b6e; --dlx-offer-gold: #6b6b6e; } html.dlx-a11y-grayscale :is(.dlx-on-ink, .dlx-collection, .dlx-exclusive-strip, .dlx-footer) { --dlx-signal: #b6b6b8; --dlx-signal-hover: #d4d4d6; --dlx-signal-soft: rgba(182, 182, 184, .16); --dlx-signal-deep: #d4d4d6; --dlx-green: #b6b6b8; --dlx-green-bg: #202020; --dlx-danger: #d4d4d6; --dlx-info: #b0b2b8; --dlx-focus: #d4d4d6; } /* Artwork is the one thing left with colour, so it is desaturated directly. Images create no containing block, so fixed positioning is unaffected. */ html.dlx-a11y-grayscale :is(img, canvas, video) { filter: grayscale(1); } html.dlx-a11y-links a:not(.dlx-button):not(.dlx-social__link) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; } html.dlx-a11y-links a:focus-visible, html.dlx-a11y-links a:hover { outline: 2px solid var(--dlx-focus) !important; outline-offset: 2px !important; } /* * Hide images. The artwork boxes keep their size and become plain panels, so * a row still reads as a row: an image replaced by a hole is harder to scan * than an image. Canvas is deliberately left alone -- the player's waveform is * a canvas, and it is a control, not a picture. */ /* Flattened rather than hidden. `visibility: hidden` leaves a hole wherever the image IS the artwork box -- the player's cover art is an with no wrapper to tint, so hiding it took a bite out of the bar. contrast(0) collapses any picture to one flat tone, which fills the box, reads as a deliberate placeholder, and needs no wrapper to exist. */ html.dlx-a11y-noimg :is(img, video) { filter: grayscale(1) contrast(0) brightness(1.6) !important; } html.dlx-a11y-noimg :is( .digitlix-beat__art, .digitlix-player__art, .dlx-beat-card__art, .dlx-beat-single__art, .dlx-daily__art, .dlx-featured-card__art, .dlx-guide-lead__art, .dlx-guide__art, .dlx-post-card__art, .dlx-release__art, .dlx-track__art, .dlx-track__open-art, .dlxx-purchase__art ) { background-color: var(--dlx-surface-2) !important; background-image: none !important; box-shadow: inset 0 0 0 1px var(--dlx-border) !important; } /* * Large pointer. No `!important` and no `*` selector on purpose: the cursor * is inherited, so setting it on reaches everything, and leaving the * declaration weak means the Studio's own resize and grab cursors -- which * say what a drag will do -- still win where they are declared. */ html.dlx-a11y-cursor body { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath d='M3 1.6v20.2l5.2-5 3.5 7.2 3.6-1.7-3.4-7h6.9z' fill='%23fff' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, auto; } html.dlx-a11y-cursor :is(a[href], button, [role="button"], summary, label, select, input[type="checkbox"], input[type="radio"], input[type="submit"]) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath d='M7.2 2.2c-1 0-1.7.8-1.7 1.7v8.7l-1.3-1.4c-.7-.7-1.9-.7-2.6 0s-.7 1.8 0 2.5l4.7 6c.6.8 1.5 1.2 2.5 1.2h5.5c1.9 0 3.4-1.5 3.4-3.4v-5.2c0-.9-.8-1.7-1.7-1.7-.4 0-.7.1-1 .3-.2-.7-.9-1.3-1.7-1.3-.5 0-.9.2-1.2.5-.3-.6-.9-1-1.6-1-.4 0-.7.1-1 .3V3.9c0-1-.8-1.7-1.8-1.7z' fill='%23fff' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 12 3, pointer; } /* Strong focus ring: the same shape the theme already uses, but on :focus rather than :focus-visible, so it shows for a mouse click too. */ html.dlx-a11y-focus :is(a, button, input, select, textarea, summary, [tabindex]):focus { outline: 3px solid var(--dlx-focus) !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px var(--dlx-signal-soft) !important; } html.dlx-a11y-motion, html.dlx-a11y-motion * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* The pointer tilt is driven by custom properties, so killing transitions would not stop it -- it would only make it jump instead of glide. This neutralises the transform itself. Elevation and insets stay: they are how the interface says what is interactive, and they do not move. */ html.dlx-a11y-motion .digitlix-beat__art, html.dlx-a11y-motion .dlx-beat-card, html.dlx-a11y-motion .dlx-beat-card__art, html.dlx-a11y-motion .dlx-listen__art, html.dlx-a11y-motion .dlx-beat-single__art, html.dlx-a11y-motion .dlx-tier, html.dlx-a11y-motion .digitlix-license-card { transform: none !important; } /* * Reading guide. One element, created by the script only when the preference * is on. The dimming is a single enormous spread shadow rather than four * positioned panels: nothing to keep in sync, no layout, and it cannot end up * misaligned with itself. */ .dlx-a11y-guide { position: fixed; z-index: 99990; top: 0; left: 0; width: 100%; height: 4.5rem; margin-top: -2.25rem; border-top: 2px solid var(--dlx-signal-deep, #444); border-bottom: 2px solid var(--dlx-signal-deep, #444); box-shadow: 0 0 0 100vh rgba(8, 8, 10, .45); pointer-events: none; will-change: transform; } /* The Studio is a full-screen tool with its own dark surface; dimming it and drawing a band across it helps nobody. */ body.dlx-studio-open .dlx-a11y-guide { display: none; } /* * Reflow. The catalogue toolbar puts the search field and the facet strip on * one row, and the strip is allowed to shrink to a 90px floor before the row * gives up: at 175% text with a plainer typeface it hit that floor and pushed * the whole page 60px sideways, which is a horizontal scrollbar on a page that * should never have one. It wraps instead -- exactly what it already does on a * narrow screen -- and the facets get a row to themselves. */ html:is(.dlx-a11y-text-150, .dlx-a11y-text-175) .dlxx-toolbar { flex-wrap: wrap; gap: 4px 10px; } html:is(.dlx-a11y-text-150, .dlx-a11y-text-175) .dlxx-toolbar .dlxx-facets { flex: 1 1 100%; } @media (max-width: 620px) { /* * The hero headline sets its own floor in rem (3.5rem on a phone), so at * the top of the text ladder that floor becomes a 98px word on a 375px * screen: one unbreakable line, wider than the phone, tail clipped. Capped * against the viewport it stays whole, and at 67px it is still a third * larger than the 56px it is at 100%. */ html:is(.dlx-a11y-text-150, .dlx-a11y-text-175) :is(.dlx-hero__title, .dlx-hero__line) { font-size: min(3.5rem, 18vw) !important; } } @media (max-width: 780px) { .dlx-a11y { left: 12px; } /* The mini cart becomes a bottom sheet at this width and would sit on top of this button, so it steps aside while the cart is open. */ body.digitlix-cart-open .dlx-a11y { opacity: 0; pointer-events: none; } }