/* * Plugmind: reading options, the panel behind the header's "Aa" button (assets/js/reading.js). The same choices as * Plugmind Calm and the apps, minus the calmer ticket view. Each is a class on , set from this browser's saved * choices before the page is drawn (the early script in functions.php), so nothing flashes. * * pm-r-scaled + --pm-r-scale text size (the page below the header, zoomed: Divi sizes in px) * pm-r-font-atkinson / -opendyslexic * pm-r-spacing more space between lines * pm-r-contrast stronger text, borders and links * pm-r-motion no animations or transitions * * The fonts are under the SIL Open Font Licence (fonts/*-OFL.txt), and only download once chosen. */ @font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/AtkinsonHyperlegible-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/AtkinsonHyperlegible-Bold.ttf") format("truetype"); font-weight: 500 900; font-style: normal; font-display: swap; } @font-face { font-family: "OpenDyslexic"; src: url("../fonts/OpenDyslexic-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "OpenDyslexic"; src: url("../fonts/OpenDyslexic-Bold.otf") format("opentype"); font-weight: 500 900; font-style: normal; font-display: swap; } /* Text size: the page below the header grows like the browser's zoom; the header and its menu stay as they are, so the links still fit on one line. */ html.pm-r-scaled #et-main-area { zoom: var(--pm-r-scale, 1); } /* Font: everything except icons (Divi's ETmodules, SVG) and code. */ html.pm-r-font-atkinson { --pm-r-font: "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif; } html.pm-r-font-opendyslexic { --pm-r-font: "OpenDyslexic", ui-sans-serif, system-ui, sans-serif; } html[class*="pm-r-font-"] body, html[class*="pm-r-font-"] body :where(*):not(svg, svg *, code, pre, kbd, samp, .et-pb-icon, .et_pb_font_icon, [class*="et-pb-icon"], [data-icon]) { font-family: var(--pm-r-font) !important; } /* OpenDyslexic is a wide font: the menu gets a little smaller and closer, and may take two lines rather than run off the screen. */ html.pm-r-font-opendyslexic .plugmind-nav :is(.plugmind-nav-link, .plugmind-nav-account) { font-size: 14px; letter-spacing: 0; } html.pm-r-font-opendyslexic .plugmind-nav .plugmind-nav-list { flex-wrap: wrap; gap: 8px 12px; } html.pm-r-font-opendyslexic body :is(h1, h2, h3) { line-height: 1.3 !important; } /* More space between lines (and a little between letters and words), in running text. */ html.pm-r-spacing body :is(p, li, dd, dt, td, th, blockquote, figcaption, label, .et_pb_text_inner, .woocommerce-product-details__short-description) { line-height: 1.75 !important; letter-spacing: .02em; word-spacing: .06em; } html.pm-r-spacing body :is(h1, h2, h3, h4) { line-height: 1.35 !important; } /* High contrast: the greys go to the brand's darkest text on light sections and to white on dark ones, borders get stronger, and links in text are underlined. The pages' colours are variables named after the colour (the site generator, Website/divi/build.py: --pm-t- for text, --pm-b- backgrounds, --pm-l- borders; classes pm-t-, pm-bg- and pm-bd- on the builder's modules), so changing one changes it everywhere it's used. */ html.pm-r-contrast { --pm-slate: #141A2E; --pm-muted-on-dark: #FFFFFF; --pm-line: #8A8FA3; --pm-t-535a6e: #141A2E; --pm-t-353b4e: #141A2E; --pm-t-a9aec0: #FFFFFF; --pm-t-c4c8d6: #FFFFFF; --pm-t-b9b4cc: #FFFFFF; --pm-l-e6e4ee: #8A8FA3; --pm-l-e1deec: #8A8FA3; --pm-l-eeecf4: #8A8FA3; --pm-l-dedce8: #8A8FA3; } html.pm-r-contrast .et_pb_text:is(.pm-t-535a6e, .pm-t-353b4e) { color: #141A2E !important; } html.pm-r-contrast .et_pb_text:is(.pm-t-a9aec0, .pm-t-c4c8d6) { color: #FFFFFF !important; } html.pm-r-contrast .et_pb_column.pm-bd-e6e4ee { border-color: #8A8FA3 !important; } html.pm-r-contrast .et-l--body .et_pb_section:first-of-type :is(.woocommerce-product-details__short-description, .et_pb_wc_description), html.pm-r-contrast .et-l--body .et_pb_section:first-of-type :is(.woocommerce-product-details__short-description, .et_pb_wc_description) p, html.pm-r-contrast .et-l--body .et_pb_section:first-of-type .price del { color: #FFFFFF !important; } html.pm-r-contrast :is(#main-content, .et-l--footer) :is(p, li, td, dd) a:not(.et_pb_button) { text-decoration: underline; text-underline-offset: .18em; } html.pm-r-contrast body :is(input, select, textarea) { border-color: #535A6E !important; } html.pm-r-contrast body :focus-visible { outline: 3px solid currentColor !important; outline-offset: 3px; } /* Reduce motion (as the theme already does for people who ask their system for it). */ html.pm-r-motion, html.pm-r-motion *, html.pm-r-motion *::before, html.pm-r-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } /* ---------- Dark mode (pm-r-dark: chosen in the panel, or the device's setting with "Match my device") ---------- The dark sections (the heroes and the footer) stay as they are; the light ones go dark, a little deeper than the heroes so those still stand out, with cards a step lighter. The brand's purple gets lighter for text, so it reads. */ html.pm-r-dark { color-scheme: dark; --pm-slate: #A9AEC0; --pm-line: #2A3352; /* Text */ --pm-t-141a2e: #F5F4FA; --pm-t-353b4e: #C9CDDA; --pm-t-535a6e: #A9AEC0; --pm-t-5b3fe0: #B3A3FF; --pm-t-7c5cff: #B3A3FF; --pm-t-0b7a6e: #3FD1BF; --pm-t-c2431f: #FF8A6B; /* Backgrounds */ --pm-b-ffffff: #182038; --pm-b-f5f4fa: #141B31; --pm-b-fff6d6: #3A3118; /* Borders */ --pm-l-e6e4ee: #2A3352; --pm-l-e1deec: #2A3352; --pm-l-eeecf4: #2A3352; --pm-l-f5f4fa: #2A3352; --pm-l-dedce8: #39425F; --pm-l-b9b4cc: #4A5274; } html.pm-r-dark.pm-r-contrast { --pm-slate: #FFFFFF; --pm-line: #6B7392; --pm-t-141a2e: #FFFFFF; --pm-t-353b4e: #FFFFFF; --pm-t-535a6e: #FFFFFF; --pm-l-e6e4ee: #6B7392; --pm-l-e1deec: #6B7392; --pm-l-eeecf4: #6B7392; --pm-l-dedce8: #6B7392; } html.pm-r-dark, html.pm-r-dark body, html.pm-r-dark #page-container, html.pm-r-dark #et-main-area, html.pm-r-dark #main-content { background-color: #0B1020 !important; } html.pm-r-dark body { color: #C9CDDA; } html.pm-r-dark body :is(h1, h2, h3, h4, h5, h6) { color: #F5F4FA; } html.pm-r-dark body a:not([class]) { color: #B3A3FF; } /* The builder's sections and cards, by the colour each was made with. (Divi's own rule for a section's background has five classes and !important, so these repeat the class to outrank it.) */ html.pm-r-dark body .et-l .et_pb_section.pm-bg-ffffff.pm-bg-ffffff { background-color: #10162A !important; } html.pm-r-dark body .et-l .et_pb_section.pm-bg-f5f4fa.pm-bg-f5f4fa { background-color: #0B1020 !important; } html.pm-r-dark .et_pb_column.pm-bg-ffffff { background-color: #182038 !important; } html.pm-r-dark .et_pb_column.pm-bg-f5f4fa { background-color: #141B31 !important; } html.pm-r-dark .et_pb_column:is(.pm-bd-e6e4ee, .pm-bd-e1deec) { border-color: #2A3352 !important; } html.pm-r-dark .et_pb_column.pm-bd-b9b4cc { border-color: #4A5274 !important; } html.pm-r-dark.pm-r-contrast .et_pb_column:is(.pm-bd-e6e4ee, .pm-bd-e1deec) { border-color: #6B7392 !important; } html.pm-r-dark .et_pb_text.pm-t-141a2e, html.pm-r-dark .et_pb_text.pm-t-141a2e .et_pb_text_inner { color: #F5F4FA !important; } html.pm-r-dark .et_pb_text.pm-t-353b4e, html.pm-r-dark .et_pb_text.pm-t-353b4e .et_pb_text_inner { color: #C9CDDA !important; } html.pm-r-dark .et_pb_text.pm-t-535a6e, html.pm-r-dark .et_pb_text.pm-t-535a6e .et_pb_text_inner { color: #A9AEC0 !important; } html.pm-r-dark .et_pb_text.pm-t-5b3fe0, html.pm-r-dark .et_pb_text.pm-t-5b3fe0 .et_pb_text_inner { color: #B3A3FF !important; } html.pm-r-dark.pm-r-contrast .et_pb_text:is(.pm-t-141a2e, .pm-t-353b4e, .pm-t-535a6e), html.pm-r-dark.pm-r-contrast .et_pb_text:is(.pm-t-141a2e, .pm-t-353b4e, .pm-t-535a6e) .et_pb_text_inner { color: #FFFFFF !important; } /* Buttons made dark on light sections turn light; white ones turn dark. */ html.pm-r-dark .pm-btn-141a2e { background: #F5F4FA !important; color: #141A2E !important; } html.pm-r-dark .pm-btn-ffffff { background: #182038 !important; color: #F5F4FA !important; border-color: #39425F !important; } html.pm-r-dark .pm-btn-transparent.pm-btn-fg-141a2e { color: #F5F4FA !important; border-color: #F5F4FA !important; } /* The header: the logo's dark strokes go light, and the menu (Plugmind Product Pages) follows. */ html.pm-r-dark .et-l--header .et_pb_section { border-bottom: 1px solid #1F2742; } html.pm-r-dark .et-l--header svg [stroke="#141A2E"] { stroke: #F5F4FA; } html.pm-r-dark .et-l--header svg [fill="#141A2E"] { fill: #F5F4FA; } html.pm-r-dark .et-l--header svg [fill="#F5F4FA"] { fill: #141A2E; } html.pm-r-dark .et-l--header svg [stroke="#F5F4FA"] { stroke: #141A2E; } html.pm-r-dark .plugmind-nav-link { color: #F5F4FA; } html.pm-r-dark .plugmind-nav-link:hover, html.pm-r-dark .plugmind-nav-item.is-open .plugmind-nav-link { color: #B3A3FF; } html.pm-r-dark .plugmind-nav-toggle:hover { background: #1F2742; color: #F5F4FA; } html.pm-r-dark .plugmind-nav-account { background: #F5F4FA; color: #141A2E !important; } html.pm-r-dark .plugmind-nav-basket { background: transparent; border-color: #2A3352; color: #F5F4FA; } html.pm-r-dark .plugmind-nav-basket:hover { border-color: #B3A3FF; color: #B3A3FF; } html.pm-r-dark .plugmind-basket-badge { background: #B3A3FF; color: #141A2E; } html.pm-r-dark .plugmind-mega { background: #141B31; border-color: #2A3352; box-shadow: 0 18px 48px rgba(0, 0, 0, .45); } html.pm-r-dark .plugmind-mega-card { color: #F5F4FA; } html.pm-r-dark .plugmind-mega-card:hover, html.pm-r-dark .plugmind-mega-card:focus-visible { background: #1F2742; } html.pm-r-dark .plugmind-mega-icon { background: #1F2742; } html.pm-r-dark .plugmind-mega-foot { border-top-color: #2A3352; } html.pm-r-dark .plugmind-basket-panel { background: #141B31; border-color: #2A3352; box-shadow: 0 18px 48px rgba(0, 0, 0, .45); color: #F5F4FA; } html.pm-r-dark .plugmind-basket-item, html.pm-r-dark .plugmind-basket-actions { border-top-color: #2A3352; } html.pm-r-dark .plugmind-basket-name { color: #F5F4FA; } html.pm-r-dark .plugmind-basket-options, html.pm-r-dark .plugmind-basket-price, html.pm-r-dark .plugmind-basket-remove, html.pm-r-dark .plugmind-basket-empty { color: #A9AEC0; } html.pm-r-dark .plugmind-basket-button--ghost { background: #1F2742; border-color: #2A3352; color: #F5F4FA !important; } html.pm-r-dark .plugmind-mega-foot a { color: #B3A3FF; } html.pm-r-dark .pm-menu-toggle { background: #F5F4FA; color: #141A2E; } /* Product cards and badges (Plugmind Product Pages). */ html.pm-r-dark .plugmind-card { background: #182038; border-color: #2A3352; color: #F5F4FA; } html.pm-r-dark .plugmind-card .plugmind-card-title, html.pm-r-dark .plugmind-card-foot a { color: #F5F4FA; } html.pm-r-dark .plugmind-card .plugmind-card-title a:hover { color: #B3A3FF; } html.pm-r-dark .plugmind-switch-label, html.pm-r-dark .plugmind-tax { color: #A9AEC0; } html.pm-r-dark .plugmind-switch-button { background: transparent; border-color: #2A3352; color: #F5F4FA; } html.pm-r-dark .plugmind-switch-button:hover { border-color: #B3A3FF; color: #B3A3FF; } html.pm-r-dark .plugmind-switch-button[aria-pressed="true"] { background: #F5F4FA; border-color: #F5F4FA; color: #141A2E; } html.pm-r-dark .plugmind-platform { background: #1F2742; color: #C9CDDA; } /* WooCommerce: basket, checkout, My Account and the product page below its hero. */ html.pm-r-dark .woocommerce :is(form .form-row input.input-text, form .form-row textarea, form .form-row select), html.pm-r-dark .woocommerce-checkout .select2-container .select2-selection--single, html.pm-r-dark .select2-dropdown, html.pm-r-dark .et_pb_contact_form :is(input, textarea, select) { background: #10162A !important; color: #F5F4FA !important; border-color: #39425F !important; } html.pm-r-dark .select2-container--default .select2-selection--single .select2-selection__rendered { color: #F5F4FA; } html.pm-r-dark .woocommerce :is(a.button, button.button, input.button):not(.alt, .single_add_to_cart_button, #place_order, .checkout-button) { background: transparent !important; color: #F5F4FA !important; border-color: #F5F4FA !important; } html.pm-r-dark .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: #182038; } html.pm-r-dark .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #B3A3FF; } html.pm-r-dark .woocommerce table.shop_table, html.pm-r-dark .woocommerce table.shop_table :is(td, th) { border-color: #2A3352; color: #C9CDDA; } html.pm-r-dark .woocommerce-checkout #payment { background: #141B31; } html.pm-r-dark .woocommerce-checkout #payment div.payment_box { background: #1F2742; color: #C9CDDA; } html.pm-r-dark .woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #1F2742; } html.pm-r-dark #page-container :is(.woocommerce-info, .woocommerce-message) { background: #1F2742 !important; color: #F5F4FA !important; } html.pm-r-dark #page-container .woocommerce-error { background: #2A1714 !important; color: #F5F4FA !important; } html.pm-r-dark #page-container :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) { color: #B3A3FF !important; } html.pm-r-dark .woocommerce-account .woocommerce-MyAccount-navigation li a { color: #F5F4FA; } html.pm-r-dark .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: #182038; } html.pm-r-dark .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: #F5F4FA; color: #141A2E; } html.pm-r-dark .woocommerce-account .woocommerce-MyAccount-content { background: #10162A; border-color: #2A3352; } html.pm-r-dark #page-container :is(.woocommerce-MyAccount-content, .woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce) a:not([class]) { color: #B3A3FF; } html.pm-r-dark .ndc-key-choice { border-color: #2A3352; } html.pm-r-dark .ndc-key-choice legend { color: #F5F4FA; } html.pm-r-dark :is(.ndc-key-choice__lead, .ndc-key-choice__option label span) { color: #C9CDDA; } html.pm-r-dark #page-container :is(.woocommerce-MyAccount-content, .woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce) a:not([class]):hover { color: #D4CAFF; } html.pm-r-dark .woocommerce-account .ndc-licence h3 { background: #1F2742; } html.pm-r-dark .woocommerce :is(label, legend, .woocommerce-form-login, .woocommerce-form-register) { color: #C9CDDA; } html.pm-r-dark .woocommerce :is(form.login, form.register, form.checkout_coupon, form.lost_reset_password, fieldset) { border-color: #2A3352 !important; } /* The docs (BetterDocs). BetterDocs writes its colours into each page from its settings, with long selectors, so these start from the page's ID (#et-main-area) to outrank them: its boxes lose their light backgrounds, then the cards, searches and summaries get the dark card colour back. */ html.pm-r-dark #et-main-area [class*="betterdocs"]:not(svg, svg *, button, [class*="btn"], [class*="submit"]) { background-color: transparent !important; border-color: #2A3352 !important; box-shadow: none !important; } html.pm-r-dark #et-main-area :is(.betterdocs-single-category-inner, .category-box, .betterdocs-title-excerpt-list, .betterdocs-article-summary, .betterdocs-breadcrumb-list, .betterdocs-searchform, .betterdocs-search-field) { background-color: #141B31 !important; } html.pm-r-dark #et-main-area [class*="betterdocs"], html.pm-r-dark #et-main-area .betterdocs-entry-content :is(p, li, td, th, dd, span) { color: #C9CDDA !important; } html.pm-r-dark #et-main-area [class*="betterdocs"] :is(h1, h2, h3, h4, h5, h6, strong, b), html.pm-r-dark #et-main-area :is(.betterdocs-entry-title, .betterdocs-category-title, .betterdocs-category-title a, .betterdocs-sidebar-list .betterdocs-category-title) { color: #F5F4FA !important; } html.pm-r-dark #et-main-area :is(.betterdocs-entry-content a, .betterdocs-articles-list li.active > a, .betterdocs-articles-list li a.active, li.active > a) { color: #B3A3FF !important; } html.pm-r-dark #et-main-area [class*="betterdocs"] :is(input[type=search], input[type=text]) { background: #10162A !important; color: #F5F4FA !important; border-color: #39425F !important; } html.pm-r-dark #et-main-area [class*="betterdocs"] :is(code, pre) { background: #141B31 !important; color: #F5F4FA !important; } html.pm-r-dark #et-main-area [class*="betterdocs"] :is(table, td, th) { border-color: #2A3352 !important; } /* Tables the builder draws with its own light lines. */ html.pm-r-dark .et-l :is(table, th, td, tr) { border-color: #2A3352 !important; } html.pm-r-dark .et-l thead th, html.pm-r-contrast .et-l thead th { color: inherit; } /* The docs' search (drawn by BetterDocs' script) and the page you're on in the docs' list. */ html.pm-r-dark #et-main-area :is(.betterdocs-search-layout-1, .betterdocs-search-layout-1 .search-bar, .betterdocs-search-layout-1 .search-bar .search-input-wrapper, .betterdocs-search-popup .betterdocs-searchform, .betterdocs-search-details, .betterdocs-search-header) { background-color: #141B31 !important; border-color: #39425F !important; } html.pm-r-dark #et-main-area .betterdocs-search-layout-1 .search-bar input, html.pm-r-dark .betterdocs-search-wrapper :is(input, .betterdocs-search-item-list) { background: transparent !important; color: #F5F4FA !important; } html.pm-r-dark :is(.betterdocs-search-popup .betterdocs-searchform .command-key, .betterdocs-search-wrapper .keywords span, .betterdocs-search-wrapper .esc-button) { background: #1F2742 !important; color: #C9CDDA !important; } html.pm-r-dark .betterdocs-search-wrapper :is(.betterdocs-search-details, .betterdocs-search-header) { background-color: #141B31 !important; color: #F5F4FA; } html.pm-r-dark #et-main-area [class*="betterdocs"] li.active, html.pm-r-dark #et-main-area [class*="betterdocs"] li.active > a { background-color: #1F2742 !important; } /* ---------- The "Aa" button: at the end of the menu on wide screens, beside the ☰ button below 981px ---------- */ .pm-reading-button { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--pm-line); border-radius: 999px; background: #FFFFFF; color: var(--pm-midnight); font: 700 16px/1 'Outfit', system-ui, sans-serif; letter-spacing: -.02em; cursor: pointer; } .pm-reading-button:hover { border-color: var(--pm-synapse-deep); color: var(--pm-synapse-deep); } .pm-reading-button--bar { display: none; } @media (max-width: 980px) { .plugmind-nav-item.pm-reading-item { display: none !important; } .pm-reading-button--bar { display: inline-flex; position: absolute; top: 12px; right: calc(4% + 56px); z-index: 20; height: 44px; min-width: 44px; } /* With the basket beside ☰ (plugmind-menu.js), Aa moves one place along. */ .pm-has-basket .pm-reading-button--bar { right: calc(4% + 108px); } } /* ---------- The panel ---------- */ .pm-reading { position: fixed; inset: 0; width: min(26rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); margin: auto; padding: 0; overflow: auto; border: 1px solid var(--pm-line); border-radius: 18px; background: #FFFFFF; color: var(--pm-midnight); box-shadow: 0 24px 60px rgba(14, 19, 36, .28); } .pm-reading::backdrop { background: rgba(14, 19, 36, .45); } .pm-reading-inner { display: grid; gap: 18px; padding: 20px 22px 22px; } .pm-reading-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .pm-reading h2 { margin: 0; padding: 0; color: var(--pm-midnight); font-size: 21px; font-weight: 700; line-height: 1.25; } .pm-reading-note { margin: 4px 0 0; padding: 0; color: var(--pm-slate); font-size: 14px; } .pm-reading-close { flex: none; width: 36px; height: 36px; border: 0; border-radius: 999px; background: transparent; color: var(--pm-slate); font-size: 24px; line-height: 1; cursor: pointer; } .pm-reading-close:hover { background: var(--pm-mist); color: var(--pm-midnight); } .pm-reading-row { display: grid; gap: 6px; } .pm-reading-row > label { display: flex; justify-content: space-between; gap: 16px; margin: 0; font-weight: 600; } .pm-reading-row output { color: var(--pm-slate); font-weight: 400; font-variant-numeric: tabular-nums; } /* The slider, drawn in full (Divi's form styles leave only the thumb). */ .pm-reading input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; } .pm-reading input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--pm-line); } .pm-reading input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--pm-line); } .pm-reading input[type=range]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--pm-synapse-deep); } .pm-reading input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border: 0; border-radius: 50%; background: var(--pm-synapse-deep); } .pm-reading input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--pm-synapse-deep); } .pm-reading select { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--pm-line); border-radius: 10px; background: #FFFFFF; color: var(--pm-midnight); font-size: 15px; } .pm-reading-hint { margin: 0; padding: 0; color: var(--pm-slate); font-size: 14px; line-height: 1.5; } .pm-reading-switch { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 0; border-top: 1px solid var(--pm-line); font-weight: normal; cursor: pointer; } .pm-reading-switch input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--pm-synapse-deep); } .pm-reading-switch strong { display: block; font-weight: 600; } .pm-reading-switch small { display: block; margin-top: 2px; color: var(--pm-slate); font-size: 14px; line-height: 1.5; } .pm-reading-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 12px; border-top: 1px solid var(--pm-line); } .pm-reading-foot button { min-height: 42px; padding: 0 18px; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; } .pm-reading-reset { border: 1px solid var(--pm-line); background: #FFFFFF; color: var(--pm-midnight); } .pm-reading-done { border: 0; background: var(--pm-midnight); color: #FFFFFF; } .pm-reading-done:hover { background: var(--pm-synapse-deep); } .pm-reading :is(button, select, input):focus-visible { outline: 3px solid var(--pm-synapse); outline-offset: 2px; } /* The button and the panel in dark mode. */ html.pm-r-dark .pm-reading-button { background: #182038; color: #F5F4FA; border-color: #39425F; } html.pm-r-dark .pm-reading-button:hover { border-color: #B3A3FF; color: #B3A3FF; } html.pm-r-dark .pm-reading { background: #141B31; color: #F5F4FA; border-color: #2A3352; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); } html.pm-r-dark .pm-reading h2 { color: #F5F4FA; } html.pm-r-dark .pm-reading-close:hover { background: #1F2742; color: #F5F4FA; } html.pm-r-dark .pm-reading select, html.pm-r-dark .pm-reading-reset { background: #10162A; color: #F5F4FA; border-color: #39425F; } html.pm-r-dark .pm-reading-done { background: #F5F4FA; color: #141A2E; } html.pm-r-dark .pm-reading-done:hover { background: #B3A3FF; } html.pm-r-dark .pm-reading input[type=range]::-webkit-slider-runnable-track { background: #39425F; } html.pm-r-dark .pm-reading input[type=range]::-moz-range-track { background: #39425F; } html.pm-r-dark .pm-reading input[type=range]::-webkit-slider-thumb { background: #B3A3FF; } html.pm-r-dark .pm-reading input[type=range]::-moz-range-thumb { background: #B3A3FF; } /* The theme choice: three buttons in a row, the chosen one filled. */ .pm-reading-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; border: 0; } .pm-reading-themes legend { margin: 0 0 6px; padding: 0; font-weight: 600; } .pm-reading-themes label { position: relative; margin: 0; } .pm-reading-themes input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .pm-reading-themes span { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 6px 8px; border: 1px solid var(--pm-line); background: #FFFFFF; color: var(--pm-midnight); font-size: 14px; font-weight: 600; text-align: center; line-height: 1.2; } .pm-reading-themes label:first-of-type span { border-radius: 10px 0 0 10px; } .pm-reading-themes label:last-of-type span { border-radius: 0 10px 10px 0; } .pm-reading-themes label + label span { border-left-width: 0; } .pm-reading-themes input:checked + span { background: var(--pm-midnight); border-color: var(--pm-midnight); color: #FFFFFF; } .pm-reading-themes input:focus-visible + span { outline: 3px solid var(--pm-synapse); outline-offset: 2px; } html.pm-r-dark .pm-reading-themes span { background: #10162A; color: #F5F4FA; border-color: #39425F; } html.pm-r-dark .pm-reading-themes input:checked + span { background: #F5F4FA; border-color: #F5F4FA; color: #141A2E; } html.pm-r-dark :is(input, textarea)::placeholder { color: #8A8FA3; opacity: 1; } /* Divi's Cart Notice module colours its button with #et-boc and four classes, so this names both IDs. */ html.pm-r-dark #page-container #et-boc :is(.woocommerce-message, .woocommerce-info) a.button, html.pm-r-dark #page-container :is(.woocommerce-message, .woocommerce-info) a.button { background: transparent !important; color: #F5F4FA !important; border: 1px solid #F5F4FA !important; } html.pm-r-dark :is(.woocommerce-order-pay, .woocommerce-order-received) ul.order_details li strong { color: #F5F4FA; }