/* Theme Name: Diverge Theme URI: https://shopdiverge.com Author: Diverge Description: Calm, sensory-friendly WooCommerce theme for Diverge. Comfort for every mind. Version: 0.17.7 Requires at least: 6.6 Tested up to: 6.9 Requires PHP: 8.1 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: diverge */ /* ---------- Base ---------- */ body { -webkit-font-smoothing: antialiased; } :where(h1,h2,h3,h4) { text-wrap: balance; } p { text-wrap: pretty; } /* Visible keyboard focus everywhere */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 3px; border-radius: 6px; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ---------- Buttons ---------- */ .wp-element-button, .wp-block-button__link, .button, button.button, .woocommerce a.button, .woocommerce button.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .is-style-outline > .wp-block-button__link, .wp-block-button__link.is-style-outline { background: transparent !important; color: var(--wp--preset--color--ink) !important; border: 2px solid var(--wp--preset--color--ink) !important; } .dv-btn-peach > .wp-block-button__link { background: var(--wp--preset--color--peach) !important; } .dv-btn-navy > .wp-block-button__link { background: var(--wp--preset--color--ink) !important; color: var(--dv-on-ink, #fff) !important; } /* ---------- Forms (large, labelled, calm) ---------- */ input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], select, textarea, .woocommerce form .form-row .input-text, .wc-block-components-text-input input { min-height: 52px; border: 2px solid var(--dv-field-line, #C9C1B5) !important; border-radius: 12px !important; background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); font-size: 17px; padding: 0 16px; } textarea { padding: 14px 16px; } .woocommerce-invalid input, input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: #B42318 !important; } /* ---------- Announcement bar ---------- */ .dv-announce { font-size: 14px; font-weight: 700; } .dv-announce p { margin: 0; } /* ---------- Header ---------- */ .dv-header { border-bottom: 1px solid var(--wp--preset--color--line); } .dv-logo a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--wp--preset--color--ink); } .dv-logo svg { width: 44px; height: 44px; flex-shrink: 0; } .dv-logo .dv-wordmark { font-family: var(--wp--preset--font-family--fredoka); font-weight: 700; font-size: 36px; letter-spacing: -0.01em; line-height: 1; } .dv-header .wp-block-navigation a { font-weight: 700; text-decoration: none; padding: 10px 2px; border-bottom: 3px solid transparent; } .dv-header .wp-block-navigation .current-menu-item > a, .dv-header .wp-block-navigation a[aria-current="page"] { border-bottom-color: var(--wp--preset--color--mint); } .dv-header .wp-block-search__inside-wrapper { border: 1px solid var(--wp--preset--color--line) !important; border-radius: 999px; background: var(--wp--preset--color--oat); padding: 2px 4px 2px 14px; } .dv-header .wp-block-search__input { border: none !important; background: transparent; min-height: 40px; } .dv-header .wp-block-search__button { background: transparent; color: var(--wp--preset--color--ink); min-height: 40px; } @media (max-width: 781px) { .dv-logo .dv-wordmark { font-size: 28px; } .dv-logo svg { width: 34px; height: 34px; } } /* ---------- Tiles and cards ---------- */ .dv-tile { border-radius: 22px; } .dv-tile a { text-decoration: none; } .dv-card { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 20px; } .dv-need a { color: var(--wp--preset--color--ink); text-decoration: none; } .dv-need a:hover .dv-need-title { text-decoration: underline; text-underline-offset: 3px; } .dv-icon-chip { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--wp--preset--color--mint-mist); flex-shrink: 0; } .dv-icon-chip svg { width: 26px; height: 26px; } .dv-eyebrow { font-size: 14px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--slate); margin: 0; } /* Placeholder photo tiles until real photos exist */ .dv-photo { aspect-ratio: 1 / 1; border-radius: 22px; display: flex; align-items: center; justify-content: center; } .dv-photo svg { width: 42%; height: auto; opacity: .55; } /* ---------- WooCommerce product grids (shortcode output) ---------- */ .woocommerce ul.products li.product a img { border-radius: 18px; background: var(--wp--preset--color--mint-mist); } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--wp--preset--font-family--fredoka); font-weight: 600; font-size: 19px; color: var(--wp--preset--color--ink); } .woocommerce ul.products li.product .price { color: var(--wp--preset--color--ink); font-weight: 800; font-size: 17px; } .woocommerce ul.products li.product .button { background: transparent; color: var(--wp--preset--color--ink); border: 2px solid var(--wp--preset--color--ink); border-radius: 999px; font-weight: 800; } .woocommerce span.onsale { display: none; } /* no pressure badges */ /* ---------- Notices: stay put, never flash ---------- */ .woocommerce-message, .woocommerce-info, .wc-block-components-notice-banner { border-radius: 16px; border: none; background: var(--wp--preset--color--mint-mist); color: var(--wp--preset--color--ink); } .woocommerce-error { border-radius: 16px; border: none; background: #FDECEA; color: #B42318; } /* ---------- Footer ---------- */ .dv-footer a { color: #D5DAE3; text-decoration: none; } .dv-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .dv-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .dv-footer .dv-rule { border-top: 1px solid #3A4862; } /* ---------- Homepage grids ---------- */ .dv-cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; } .dv-cat { display: flex; flex-direction: column; gap: 12px; color: var(--wp--preset--color--ink); text-decoration: none; } .dv-cat .dv-photo svg { width: 30%; } .dv-cat-name { font-family: var(--wp--preset--font-family--fredoka); font-weight: 600; font-size: 20px; } .dv-cat:hover .dv-cat-name { text-decoration: underline; text-underline-offset: 3px; } .dv-need-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .dv-need-tile { display: flex; gap: 16px; align-items: flex-start; padding: 22px; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 20px; color: var(--wp--preset--color--ink); text-decoration: none; } .dv-need-tile > span:last-child { display: flex; flex-direction: column; gap: 4px; } .dv-need-title { font-family: var(--wp--preset--font-family--fredoka); font-weight: 600; font-size: 20px; } .dv-need-desc { font-size: 16px; line-height: 1.5; color: var(--wp--preset--color--slate); } .dv-need-tile:hover .dv-need-title { text-decoration: underline; text-underline-offset: 3px; } .dv-trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } .dv-trust-item { display: flex; flex-direction: column; gap: 10px; } .dv-trust-title { font-family: var(--wp--preset--font-family--fredoka); font-weight: 600; font-size: 20px; } @media (max-width: 1000px) { .dv-cat-grid, .dv-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dv-need-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .dv-need-grid, .dv-trust-grid { grid-template-columns: 1fr; } .dv-story { padding: 28px !important; } } /* ---------- v0.1.1: mobile header - menu button sits just left of the account icon ---------- */ @media (max-width: 599px) { .dv-announce p { font-size: 13px; } } /* ========================================================================= * v0.2 – category and product pages * ========================================================================= */ .dv-intro { max-width: 760px; margin: 0; } .dv-archive-top h1 { margin: 0; } .woocommerce-breadcrumb, .wc-block-breadcrumbs { font-size: 15px; color: var(--wp--preset--color--slate); } .woocommerce-breadcrumb a, .wc-block-breadcrumbs a { color: var(--wp--preset--color--slate); text-underline-offset: 3px; } /* Filter column */ .dv-filters h2 { margin-top: 0; } .dv-filter-placeholder { background: var(--wp--preset--color--peach-mist); border-radius: 14px; padding: 14px 16px; } .dv-side-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .dv-side-links a { display: block; padding: 10px 0; border-bottom: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--ink); font-weight: 700; text-decoration: none; } .dv-side-links a:hover { text-decoration: underline; text-underline-offset: 3px; } .dv-toolbar { margin-bottom: 24px; } .dv-toolbar .woocommerce-result-count { font-weight: 800; margin: 0; } .dv-toolbar select { min-width: 220px; } /* Product cards in the grid */ .wc-block-product-template .wc-block-components-product-image img { border-radius: 18px; background: var(--wp--preset--color--mint-mist); aspect-ratio: 1; object-fit: cover; } .wc-block-product-template .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--ink); } .wc-block-product-template .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 3px; } .wc-block-product-template .wc-block-components-product-price { font-weight: 800; font-size: 17px; } .wc-block-product-template .wp-block-button__link, .wc-block-components-product-button .wp-block-button__link { background: transparent !important; color: var(--wp--preset--color--ink) !important; border: 2px solid var(--wp--preset--color--ink) !important; font-size: 15px; padding: 10px 18px; } .wc-block-product-template { row-gap: 40px !important; } .wp-block-query-pagination { margin-top: 40px; font-weight: 800; } .wp-block-query-pagination a, .wp-block-query-pagination .current { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border-radius: 999px; } .wp-block-query-pagination .current { background: var(--wp--preset--color--ink); color: var(--dv-on-ink, #fff); } @media (max-width: 781px) { .dv-archive { flex-direction: column-reverse; } .dv-filters { flex-basis: auto !important; } } /* Product page */ .dv-product-info > * + * { margin-top: 20px; } .dv-product-info .wp-block-post-title { margin: 0; } .dv-product-info .wc-block-components-product-price, .dv-product-info .price { font-size: 28px; font-weight: 800; color: var(--wp--preset--color--ink); } .woocommerce-product-gallery img { border-radius: 24px; background: var(--wp--preset--color--peach-mist); } .woocommerce-product-gallery .flex-control-thumbs { display: flex; gap: 12px; margin-top: 12px; } .woocommerce-product-gallery .flex-control-thumbs li img { border-radius: 14px; border: 2px solid transparent; } .woocommerce-product-gallery .flex-control-thumbs li img.flex-active { border-color: var(--wp--preset--color--ink); } .dv-good-for-label { display: block; font-weight: 800; font-size: 16px; margin-bottom: 8px; } .dv-chips { display: flex; flex-wrap: wrap; gap: 8px; } .dv-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px; background: var(--wp--preset--color--mint-mist); color: var(--wp--preset--color--ink); font-weight: 700; font-size: 15px; text-decoration: none; } .dv-chip:hover { text-decoration: underline; text-underline-offset: 3px; } /* Add to basket: big, clear controls */ .dv-product-info form.cart { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .dv-product-info form.cart .quantity input.qty { width: 88px; min-height: 56px; text-align: center; font-weight: 800; } .dv-product-info form.cart .single_add_to_cart_button { flex-grow: 1; min-height: 60px; font-size: 19px; background: var(--wp--preset--color--mint) !important; color: var(--wp--preset--color--ink) !important; border-radius: 999px; } .dv-product-info .variations select { min-width: 220px; } .dv-product-info .stock.in-stock { color: #1F6B55; font-weight: 700; } .dv-delivery-note { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 18px; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; font-size: 16px; } .dv-delivery-note p { margin: 0; display: flex; gap: 12px; align-items: flex-start; } .dv-delivery-note svg { flex-shrink: 0; margin-top: 2px; } /* All product detail sections visible at once (no hidden tabs) */ .dv-product-details .woocommerce-tabs ul.tabs { display: none; } .dv-product-details .woocommerce-Tabs-panel { display: block !important; padding: 0 0 40px; margin: 0 0 40px; border-bottom: 1px solid var(--wp--preset--color--line); } .dv-product-details .woocommerce-Tabs-panel:last-child { border-bottom: none; } .dv-product-details .woocommerce-Tabs-panel h2 { font-size: var(--wp--preset--font-size--x-large); margin-top: 0; } .dv-product-details table.shop_attributes { width: 100%; border-collapse: collapse; border: none; } .dv-product-details table.shop_attributes th, .dv-product-details table.shop_attributes td { text-align: left; padding: 16px 0; border: none; border-bottom: 1px solid var(--wp--preset--color--line); font-size: 17px; vertical-align: top; background: none; } .dv-product-details table.shop_attributes th { width: 200px; font-weight: 800; } .dv-product-details table.shop_attributes td { color: var(--wp--preset--color--slate); font-style: normal; } .dv-product-details table.shop_attributes td p { margin: 0; } .dv-safety-box { background: var(--wp--preset--color--peach-mist); border-radius: 22px; padding: 24px 28px; } .dv-safety-box p:last-child { margin-bottom: 0; } #reviews .woocommerce-noreviews { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 18px; padding: 20px 24px; } /* v0.2.1 – reviews list (display only) */ #reviews .commentlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } #reviews .commentlist li .comment_container { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 18px; padding: 20px 24px; } #reviews .commentlist img.avatar { display: none; } #reviews .comment-text { margin: 0 !important; border: none !important; padding: 0 !important; } #review_form_wrapper, .woocommerce-verification-required { display: none; } /* ========================================================================= * v0.3 – digital fidget tray in the homepage banner * ========================================================================= */ /* ---- Fidget tray ---- */ .dv-fidget{display:flex;flex-direction:column;gap:14px} .dv-tray{position:relative;width:100%;aspect-ratio:6/5;max-height:520px;border-radius:32px;background:var(--dv-tray, #F4EEE6); box-shadow:inset 0 2px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(34,48,74,.05), inset 0 10px 30px rgba(34,48,74,.06); overflow:hidden;touch-action:pan-y;cursor:grab} .dv-tray.dv-grabbing{cursor:grabbing} .dv-tray canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .dv-tray-hint{position:absolute;left:18px;top:14px;font-size:13px;font-weight:700;color:var(--wp--preset--color--slate);background:rgba(251,247,242,.85);padding:6px 12px;border-radius:999px;pointer-events:none} @media (max-width:900px){.dv-tray{aspect-ratio:1/1;max-height:420px} } .dv-controls{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between} .dv-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .dv-label{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--wp--preset--color--slate)} .dv-seg{display:inline-flex;background: var(--wp--preset--color--white);border:1px solid var(--wp--preset--color--line);border-radius:999px;padding:4px;gap:2px} .dv-seg button{appearance:none;border:0;background:transparent;font:inherit;font-weight:800;font-size:15px;color:var(--wp--preset--color--ink);min-height:40px;padding:0 16px;border-radius:999px;cursor:pointer} .dv-seg button[aria-pressed="true"]{background:var(--wp--preset--color--ink);color: var(--dv-on-ink, #fff)} .dv-toggle{appearance:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--wp--preset--color--line);background: var(--wp--preset--color--white);font:inherit;font-weight:800;font-size:15px;color:var(--wp--preset--color--ink);cursor:pointer} .dv-toggle svg{width:18px;height:18px} .dv-state-line{font-size:15px;color:var(--wp--preset--color--slate);margin:0;min-height:3.2em} /* v0.3.1 – header search: give the placeholder room so "Search" never gets cut off */ .dv-header .wp-block-search__inside-wrapper { width: 100% !important; max-width: 100%; } .dv-header .wp-block-search__input { flex: 1 1 auto !important; width: 100% !important; padding: 0 6px 0 2px !important; min-width: 0; font-size: 15px !important; min-height: 40px !important; } .dv-header .wp-block-search__input::placeholder { color: var(--wp--preset--color--slate); opacity: 1; } .dv-header .wp-block-search__button { padding: 0 10px !important; min-width: 40px; } /* ========================================================================= * v0.4 – basket, checkout and order confirmed * ========================================================================= */ /* Step indicator */ .dv-steps { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 12px; } .dv-step { display: flex; align-items: center; gap: 10px; color: var(--wp--preset--color--slate); font-weight: 600; font-size: 16px; } .dv-step + .dv-step::before { content: ""; width: 40px; height: 2px; background: var(--dv-field-line, #C9C1B5); margin-right: 2px; } .dv-step.is-done + .dv-step::before { background: var(--wp--preset--color--ink); } .dv-step-dot { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--dv-field-line, #C9C1B5); background: var(--wp--preset--color--white); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; } .dv-step.is-done .dv-step-dot, .dv-step.is-current .dv-step-dot { background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); color: var(--dv-on-ink, #fff); } .dv-step.is-current, .dv-step.is-done { color: var(--wp--preset--color--ink); } .dv-step.is-current { font-weight: 800; } @media (max-width: 600px) { .dv-step + .dv-step::before { width: 24px; } } /* Simple checkout header and footer */ .dv-checkout-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .dv-secure { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; color: var(--wp--preset--color--slate); } .dv-back { font-weight: 800; font-size: 16px; } .dv-checkout-footer { border-top: 1px solid var(--wp--preset--color--line); } .dv-checkout-footer-links { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 15px; } .dv-checkout-footer-links a { color: var(--wp--preset--color--slate); } @media (max-width: 600px) { .dv-secure { display: none; } } /* Cart and checkout blocks */ .wc-block-cart, .wc-block-checkout { font-size: 17px; } .wc-block-components-sidebar { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 24px; padding: 28px !important; } .wc-block-cart-items { background: transparent; } .wc-block-cart-items th { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--slate); } .wc-block-cart-item__image img { border-radius: 16px; background: var(--wp--preset--color--mint-mist); } .wc-block-components-product-name { font-family: var(--wp--preset--font-family--fredoka); font-weight: 600; font-size: 20px; color: var(--wp--preset--color--ink) !important; text-decoration: none; } .wc-block-components-quantity-selector { border-radius: 14px !important; border: 2px solid var(--dv-field-line, #C9C1B5) !important; min-height: 48px; } .wc-block-components-quantity-selector input { font-weight: 800; } .wc-block-components-quantity-selector__button { min-width: 44px; } .wc-block-cart-item__remove-link { font-size: 15px !important; font-weight: 700; color: var(--wp--preset--color--slate) !important; text-decoration: underline !important; } .wc-block-components-totals-footer-item { font-size: 20px; font-weight: 800; } .wc-block-components-button:not(.is-link), .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button { background: var(--wp--preset--color--mint) !important; color: var(--wp--preset--color--ink) !important; border-radius: 999px !important; min-height: 60px; font-weight: 800 !important; font-size: 19px !important; border: none !important; } .wc-block-components-button:not(.is-link):hover { background: #5BB595 !important; } .wc-block-components-text-input label, .wc-block-components-combobox label { font-weight: 700; } .wc-block-components-text-input input, .wc-block-components-combobox .components-combobox-control input, .wc-blocks-components-select__select { border: 2px solid var(--dv-field-line, #C9C1B5) !important; border-radius: 12px !important; min-height: 56px !important; background: var(--wp--preset--color--white) !important; font-size: 17px !important; } .wc-block-components-text-input.has-error input { border-color: #B42318 !important; } .wc-block-components-validation-error { color: #B42318; font-weight: 700; font-size: 15px; } .wc-block-components-checkout-step { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 24px; padding: 28px 32px !important; margin-bottom: 24px !important; } .wc-block-components-checkout-step__title { font-family: var(--wp--preset--font-family--fredoka); font-weight: 600; font-size: 26px !important; } .wc-block-components-checkout-step__container::after { display: none !important; } .wc-block-components-radio-control__option { border: 2px solid var(--dv-field-line, #C9C1B5) !important; border-radius: 16px !important; margin-bottom: 10px !important; background: var(--wp--preset--color--white); } .wc-block-components-radio-control__option-checked { border-color: var(--wp--preset--color--ink) !important; background: var(--wp--preset--color--mint-mist) !important; } .wc-block-components-express-payment { border-radius: 16px; } .wc-block-components-notice-banner { border-radius: 16px !important; } .wc-block-components-panel__button { font-weight: 800; } /* Order confirmed */ .wc-block-order-confirmation-status h1, .woocommerce-thankyou-order-received { font-family: var(--wp--preset--font-family--fredoka); font-weight: 600; } .dv-next { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 24px; padding: 28px 32px; margin: 32px 0; } .dv-next h2 { margin-top: 0; } .dv-next ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; } .dv-next li { display: flex; gap: 18px; align-items: flex-start; } .dv-next li > span:last-child { display: flex; flex-direction: column; gap: 2px; } .dv-next li strong { font-family: var(--wp--preset--font-family--fredoka); font-weight: 600; font-size: 21px; } .dv-next li > span:last-child > span { color: var(--wp--preset--color--slate); } .dv-next-icon { width: 56px; height: 56px; border-radius: 18px; background: var(--wp--preset--color--mint-mist); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .dv-next li:nth-child(2) .dv-next-icon { background: var(--wp--preset--color--peach-mist); } /* My account */ .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .woocommerce-MyAccount-navigation a { display: block; padding: 14px 18px; border-radius: 14px; font-weight: 700; text-decoration: none; color: var(--wp--preset--color--ink); } .woocommerce-MyAccount-navigation .is-active a { background: var(--wp--preset--color--mint-mist); font-weight: 800; } .woocommerce-orders-table { border-collapse: collapse; width: 100%; background: var(--wp--preset--color--white); border-radius: 20px; } .woocommerce-orders-table th, .woocommerce-orders-table td { padding: 16px 12px; border-bottom: 1px solid var(--wp--preset--color--line); text-align: left; } .woocommerce form.login, .woocommerce form.register { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line) !important; border-radius: 28px !important; padding: 36px !important; } /* ------------------------------------------------------------------ * v0.5 Order confirmation * ------------------------------------------------------------------ */ .dv-order-verified .wc-block-order-confirmation-status { display: none; } .dv-confirm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; align-items: start; margin-top: 12px; } .dv-confirm-grid > * { margin-block: 0; } .dv-confirm-main, .dv-confirm-side { display: flex; flex-direction: column; gap: 28px; } .dv-confirm-main > *, .dv-confirm-side > * { margin-block: 0 !important; } .dv-confirm-hero { display: flex; flex-direction: column; gap: 14px; } .dv-confirm-hero > * { margin: 0; } .dv-confirm-tick { width: 72px; height: 72px; border-radius: 50%; background: var(--wp--preset--color--mint); color: var(--wp--preset--color--ink); display: inline-flex; align-items: center; justify-content: center; } .dv-confirm-title { font-size: clamp(32px, 4vw, 48px); line-height: 1.12; } .dv-confirm-lead { font-size: 19px; color: var(--wp--preset--color--slate); } .dv-confirm-lead strong { color: var(--wp--preset--color--ink); overflow-wrap: anywhere; } .dv-confirm-small { font-size: 16px; color: var(--wp--preset--color--slate); } .dv-confirm .dv-next { margin: 0; } /* Addresses as two soft cards */ .dv-confirm-addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .dv-confirm-addresses > * { margin: 0 !important; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 24px; padding: 24px 28px; } .dv-confirm-addresses h2 { margin: 0 0 10px; font-size: 22px !important; } .dv-confirm-addresses address, .dv-confirm-addresses .wc-block-order-confirmation-address { border: 0 !important; padding: 0 !important; margin: 0; font-style: normal; line-height: 1.6; text-transform: capitalize; } /* Payment instructions / notes */ .dv-confirm .wc-block-order-confirmation-additional-information { background: var(--wp--preset--color--oat); border-radius: 16px; padding: 14px 20px; font-size: 16px; color: var(--wp--preset--color--slate); } .dv-confirm .wc-block-order-confirmation-additional-information:empty { display: none; } .dv-confirm .wc-block-order-confirmation-additional-information > *:first-child { margin-top: 0; } .dv-confirm .wc-block-order-confirmation-additional-information > *:last-child { margin-bottom: 0; } /* Account prompt + buttons */ .dv-confirm-account { background: var(--wp--preset--color--peach-mist); border-radius: 24px; padding: 26px 30px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .dv-confirm-account h2 { margin: 0 0 6px; font-size: 22px; } .dv-confirm-account p { margin: 0; } .dv-confirm-buttons { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; } .dv-confirm-account + .dv-confirm-buttons { margin-top: 28px; } .dv-confirm .dv-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px; font: inherit; font-weight: 800; font-size: 17px; text-decoration: none; cursor: pointer; border: 2px solid transparent; } .dv-confirm .dv-btn-primary { background: var(--wp--preset--color--mint); color: var(--wp--preset--color--ink); } .dv-confirm .dv-btn-navy { background: var(--wp--preset--color--ink); color: var(--dv-on-ink, #fff); } .dv-confirm .dv-btn-outline { background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); } .dv-confirm .dv-btn:hover { filter: brightness(0.96); } /* Sidebar: order card */ .dv-confirm-card { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 24px; padding: 28px; } .dv-confirm-card > * { margin-block: 0 !important; } .dv-confirm-card > * + * { margin-top: 20px !important; } .dv-confirm-card h2 { font-size: 24px !important; } .dv-confirm-card .wc-block-order-confirmation-summary-list { display: flex !important; flex-direction: column; gap: 10px; margin: 0; padding: 0 0 20px; list-style: none; border-bottom: 1px solid var(--wp--preset--color--line); } .dv-confirm-card .wc-block-order-confirmation-summary-list-item { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 0; border: 0; } .dv-confirm-card .wc-block-order-confirmation-summary-list-item__key { font-weight: 700; color: var(--wp--preset--color--slate); } .dv-confirm-card .wc-block-order-confirmation-summary-list-item__value { text-align: right; overflow-wrap: anywhere; } .dv-confirm-card .wc-block-order-confirmation-totals__table { border: 0 !important; width: 100%; } .dv-confirm-card .wc-block-order-confirmation-totals__table th, .dv-confirm-card .wc-block-order-confirmation-totals__table td { border: 0 !important; border-bottom: 1px solid var(--wp--preset--color--line) !important; padding: 12px 0 !important; } .dv-confirm-card .wc-block-order-confirmation-totals__table thead { display: none; } .dv-confirm-card .wc-block-order-confirmation-totals__table tfoot tr:last-child th, .dv-confirm-card .wc-block-order-confirmation-totals__table tfoot tr:last-child td { border-bottom: 0 !important; font-size: 20px; font-weight: 800; } .dv-confirm-card .wc-block-order-confirmation-totals__table a { color: var(--wp--preset--color--ink); } /* Sidebar: help */ .dv-confirm-help { background: var(--wp--preset--color--mint-mist); border-radius: 24px; padding: 26px 28px; } .dv-confirm-help h2 { margin: 0 0 8px; font-size: 22px; } .dv-confirm-help p { margin: 0 0 8px; } .dv-confirm-help p:last-child { margin: 0; } .dv-confirm-help a { font-weight: 800; color: var(--wp--preset--color--ink); overflow-wrap: anywhere; } @media (max-width: 960px) { .dv-confirm-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } } @media (max-width: 600px) { .dv-confirm-addresses { grid-template-columns: minmax(0, 1fr); } .dv-confirm-buttons .dv-btn { width: 100%; } } @media print { .dv-checkout-header, .dv-checkout-footer, .dv-steps, .dv-confirm-buttons, .dv-confirm-account, .dv-confirm-help, .dv-confirm-tick { display: none !important; } .dv-confirm-grid { grid-template-columns: 1fr; gap: 20px; } body { background: #fff !important; } } .woocommerce-order-received .dv-back { display: none; } .dv-confirm-account > div { flex: 1 1 320px; } .dv-confirm-help p, .dv-confirm-account p { line-height: 1.55; } .dv-confirm-card .wc-block-order-confirmation-totals__table { border-collapse: collapse; } /* ------------------------------------------------------------------ * v0.6 Content pages: Our Story, Contact, FAQ, Delivery & returns * ------------------------------------------------------------------ */ .dv-page > * + * { margin-block-start: 0; } .dv-page .woocommerce-breadcrumb { margin-bottom: 24px; } .dv-page section.wp-block-group { margin: 0 0 64px; } .dv-page-title { font-size: clamp(36px, 5vw, 60px); line-height: 1.08; margin: 0 0 16px; } .dv-page-lead { font-size: clamp(18px, 2vw, 21px); color: var(--wp--preset--color--slate); max-width: 720px; margin: 0; } .dv-page-head { margin-bottom: 40px !important; } .dv-page h2 { font-size: clamp(26px, 3vw, 34px); margin: 0 0 20px; } .dv-page h3 { font-size: 22px; margin: 0 0 8px; } .dv-small { font-size: 16px; color: var(--wp--preset--color--slate); } /* Our Story */ .dv-page-hero { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 64px; align-items: center; } .dv-page-hero .dv-eyebrow { margin-bottom: 14px; } .dv-hero-mark { width: 400px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--wp--preset--color--mint-mist); display: flex; align-items: center; justify-content: center; } .dv-hero-mark span { display: block; width: 56%; } .dv-story-body { background: var(--wp--preset--color--white); border-radius: 32px; padding: 64px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 64px; } .dv-story-text p { font-size: 19px; line-height: 1.75; color: #3A4458; margin: 0 0 22px; max-width: 720px; } .dv-story-text p:last-child { margin: 0; } .dv-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .dv-value { border-radius: 24px; padding: 30px; background: var(--wp--preset--color--mint-mist); } .dv-value:nth-child(even) { background: var(--wp--preset--color--peach-mist); } .dv-value p { margin: 0; } /* v0.17.1 Grid items are not stacked blocks: stop WordPress adding space above all but the first card. */ .dv-values > *, .dv-rsteps > *, .dv-page-hero > *, .dv-story-body > *, .dv-founder > *, .dv-contact-grid > *, .dv-notice > *, .dv-guide-top > *, .dv-guides-top > *, .dv-display-head > * { margin-block-start: 0 !important; margin-top: 0 !important; } .dv-value > h3 { margin-top: 0; } .dv-checks { background: var(--wp--preset--color--ink); color: var(--dv-on-ink, #fff); border-radius: 32px; padding: 56px; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 56px; } .dv-checks h2 { color: #fff; } .dv-checks-intro p { color: #D5DCE8; font-size: 18px; margin: 0; } .dv-checks-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .dv-checks-list li { display: flex; gap: 14px; align-items: center; font-size: 18px; background: #2B3A56; border-radius: 16px; padding: 16px 20px; } .dv-check-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--wp--preset--color--mint); color: var(--wp--preset--color--ink); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .dv-founder { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 56px; align-items: center; } .dv-founder-photo { aspect-ratio: 6 / 7; border-radius: 28px; background: var(--wp--preset--color--peach-mist); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--wp--preset--color--slate); } .dv-founder-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 28px; } .dv-founder-text p:not(.dv-eyebrow) { font-size: 19px; max-width: 680px; } .dv-founder-text .dv-eyebrow { margin-bottom: 10px; } .dv-cta { background: var(--wp--preset--color--mint-mist); border-radius: 32px; padding: 44px 56px; display: flex; justify-content: space-between; align-items: center; gap: 24px 32px; flex-wrap: wrap; } .dv-cta h2 { margin-bottom: 6px; } .dv-cta p { margin: 0; } .dv-cta .wp-block-buttons { margin: 0; } .dv-cta-white { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); padding: 32px 40px; } .dv-cta-white h2 { font-size: 24px; } /* Contact */ .dv-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 56px; } .dv-way { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 22px; padding: 26px; } .dv-way > * { margin: 0 0 8px; } .dv-way-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--wp--preset--color--mint-mist); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; } .dv-page .dv-way-title { font-size: 21px; margin: 0 0 6px; } .dv-way-value { font-weight: 800; overflow-wrap: anywhere; } .dv-way-value a { color: var(--wp--preset--color--ink); } .dv-way-desc { color: var(--wp--preset--color--slate); font-size: 16px; margin: 0; } .dv-contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; } .dv-contact-faq h2 { font-size: 28px; } .dv-more-link { margin-top: 8px; font-weight: 800; } /* Form */ .dv-form-wrap { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 28px; padding: 40px; scroll-margin-top: 24px; } .dv-form-wrap h2 { font-size: 28px; } .dv-form { display: flex; flex-direction: column; gap: 20px; } .dv-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .dv-field { display: flex; flex-direction: column; gap: 6px; margin: 0; } .dv-field label { font-weight: 700; font-size: 16px; } .dv-field input, .dv-field select, .dv-field textarea { font: inherit; font-size: 17px; color: var(--wp--preset--color--ink); background: var(--wp--preset--color--white); border: 2px solid var(--dv-field-line, #C9C1B5); border-radius: 12px; padding: 12px 16px; min-height: 52px; width: 100%; box-sizing: border-box; } .dv-field textarea { min-height: 160px; resize: vertical; } .dv-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322304A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; padding-right: 44px; } .dv-field input:focus, .dv-field select:focus, .dv-field textarea:focus { border-color: var(--wp--preset--color--ink); } .dv-field-help { font-size: 14px; font-weight: 600; color: var(--wp--preset--color--slate); } .dv-field.has-error input, .dv-field.has-error textarea { border-color: #B3261E; } .dv-field-error { color: #B3261E; font-weight: 700; font-size: 15px; } .dv-field-error::before { content: "! "; } .dv-form-errors { border: 2px solid #B3261E; background: #FDF1F0; border-radius: 16px; padding: 18px 22px; margin-bottom: 20px; } .dv-form-errors ul { margin: 8px 0 0; padding-left: 20px; } .dv-form-errors a { color: #8C1D17; font-weight: 700; } .dv-form-success { background: var(--wp--preset--color--mint-mist); border-radius: 16px; padding: 22px 24px; } .dv-form-success strong { font-size: 19px; } .dv-form-success p { margin: 8px 0 0; } .dv-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .dv-form-submit { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; } .dv-form-submit span { font-size: 15px; color: var(--wp--preset--color--slate); } .dv-btn-submit { font: inherit; font-weight: 800; font-size: 18px; color: var(--wp--preset--color--ink); background: var(--wp--preset--color--mint); border: 0; border-radius: 999px; min-height: 56px; padding: 0 36px; cursor: pointer; } .dv-btn-submit:hover { filter: brightness(0.96); } /* FAQ (core Details block) */ .dv-faq { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 18px; margin: 0 0 12px !important; } .dv-faq summary { list-style: none; cursor: pointer; min-height: 64px; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 22px; font-weight: 800; font-size: 18px; } .dv-faq summary::-webkit-details-marker { display: none; } .dv-faq summary::after { content: ""; width: 22px; height: 22px; flex-shrink: 0; background: no-repeat center / 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322304A' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); } .dv-faq[open] summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322304A' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); } .dv-faq > p { margin: 0; padding: 0 22px 20px; color: var(--wp--preset--color--slate); line-height: 1.65; } .dv-faq-group { max-width: 860px; } /* Delivery & returns */ .dv-short { background: var(--wp--preset--color--mint-mist); border-radius: 24px; padding: 30px 36px; max-width: 900px; } .dv-page .dv-short-title { font-size: 24px; margin-bottom: 12px; } .dv-short ul { margin: 0; padding-left: 22px; } .dv-short li { margin: 0 0 6px; font-size: 18px; } .dv-table { margin: 0 0 20px; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 22px; padding: 8px 16px; overflow-x: auto; } .dv-table table { border-collapse: collapse; width: 100%; font-size: 17px; } .dv-table th, .dv-table td { border: 0; border-bottom: 1px solid var(--wp--preset--color--line); padding: 16px; text-align: left; vertical-align: top; } .dv-table thead th { color: var(--wp--preset--color--slate); font-size: 15px; border-bottom-width: 2px; } .dv-table tbody tr:last-child td { border-bottom: 0; } .dv-rsteps { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .dv-rsteps li { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 10px; } .dv-rstep-num { width: 40px; height: 40px; border-radius: 50%; background: var(--wp--preset--color--ink); color: var(--dv-on-ink, #fff); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } .dv-rstep-title { font-family: var(--wp--preset--font-family--fredoka); font-weight: 600; font-size: 21px; } .dv-rstep-desc { color: var(--wp--preset--color--slate); font-size: 16px; line-height: 1.55; } .dv-notice { background: var(--wp--preset--color--peach-mist); border-radius: 22px; padding: 28px 32px; display: flex; gap: 18px; align-items: flex-start; } .dv-notice-icon { flex-shrink: 0; display: inline-flex; } .dv-notice p { margin: 0; } @media (max-width: 1000px) { .dv-page-hero, .dv-story-body, .dv-checks, .dv-founder, .dv-contact-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .dv-hero-mark { width: 260px; } .dv-founder-photo { max-width: 340px; } .dv-values, .dv-rsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dv-ways { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 600px) { .dv-page section.wp-block-group { margin-bottom: 44px; } .dv-story-body, .dv-checks { padding: 32px 24px; border-radius: 24px; } .dv-values, .dv-rsteps, .dv-form-row { grid-template-columns: minmax(0, 1fr); } .dv-form-wrap { padding: 26px 20px; } .dv-cta { padding: 30px 24px; } .dv-btn-submit { width: 100%; } } .dv-page-faq .dv-cta { max-width: 860px; } .dv-page .wp-block-post-content > * { margin-block-start: 0; } /* v0.7.1 WooCommerce "Create account" block on the order-confirmed page */ .wc-block-order-confirmation-create-account { background: var(--wp--preset--color--peach-mist) !important; border-radius: 20px; padding: 26px 24px !important; gap: 20px !important; margin: 0 !important; color: var(--wp--preset--color--ink); } .wc-block-order-confirmation-create-account > div { flex: 0 0 100% !important; min-width: 0; } .dv-confirm-card > * + .wc-block-order-confirmation-create-account { margin-top: 20px !important; } .wc-block-order-confirmation-create-account h2, .wc-block-order-confirmation-create-account h3 { font-size: 22px !important; line-height: 1.25; margin: 0 0 12px !important; } .wc-block-order-confirmation-create-account-content ul { list-style: none; padding-left: 0 !important; margin: 0; } .wc-block-order-confirmation-create-account-content li { position: relative; padding-left: 30px; margin-bottom: 8px !important; } .wc-block-order-confirmation-create-account-content li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--wp--preset--color--mint) no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322304A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); } .wc-block-order-confirmation-create-account form .wc-block-components-button { background: var(--wp--preset--color--ink) !important; color: var(--dv-on-ink, #fff) !important; border-radius: 999px !important; min-height: 52px; font-weight: 800; } .wc-block-order-confirmation-create-account-description p { color: var(--wp--preset--color--slate) !important; line-height: 1.5; } /* v0.7.1 Address cards: remove WooCommerce's inner border */ .dv-confirm-addresses [class*="order-confirmation-shipping-address"], .dv-confirm-addresses [class*="order-confirmation-billing-address"], .dv-confirm-addresses address { border: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } @media print { .wc-block-order-confirmation-create-account { display: none !important; } } /* v0.9 Visually hidden text for screen readers (headings that give structure without adding clutter). */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } /* ------------------------------------------------------------------ * v0.10 Legal pages: "On this page" list, short version, numbered sections * ------------------------------------------------------------------ */ .dv-legal-updated { font-size: 15px; color: var(--wp--preset--color--slate); margin: 10px 0 0; } .dv-legal { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; } .dv-legal > * { margin-block: 0 !important; } .dv-legal-aside { position: sticky; top: 24px; } .dv-legal-nav { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 20px; padding: 22px; } .dv-legal-nav-title { font-weight: 800; margin: 0 0 10px; } .dv-legal-nav ol { margin: 0 0 18px; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.4; } .dv-legal-nav a { color: var(--wp--preset--color--ink); } .dv-legal-print { font: inherit; font-weight: 800; font-size: 15px; color: var(--wp--preset--color--ink); background: var(--wp--preset--color--white); border: 2px solid var(--wp--preset--color--ink); border-radius: 999px; min-height: 44px; padding: 0 18px; cursor: pointer; } .dv-legal-body { max-width: 780px; } .dv-legal-body > * { margin-block: 0 !important; } .dv-page .dv-legal-body .dv-short { margin: 0 0 44px !important; } .dv-page .dv-legal-section { margin: 0 0 36px !important; } .dv-page .dv-legal-section h2 { font-size: 26px; margin: 0 0 12px; scroll-margin-top: 24px; } .dv-legal-section p, .dv-legal-section li { font-size: 17px; line-height: 1.7; } .dv-legal-section ul { padding-left: 22px; } .dv-legal-section .dv-table { margin-top: 8px; } @media (max-width: 1000px) { .dv-legal { grid-template-columns: minmax(0, 1fr); gap: 28px; } .dv-legal-aside { position: static; } } @media print { .dv-header, .dv-footer, .dv-announce, .dv-legal-aside, .woocommerce-breadcrumb { display: none !important; } .dv-legal { display: block; } .dv-short { border: 1px solid #999; } } .dv-legal-form { background: var(--wp--preset--color--white); border: 1px dashed var(--wp--preset--color--slate); border-radius: 16px; padding: 18px 22px; margin: 4px 0 8px; } .dv-legal-form p { margin: 0 0 6px; font-size: 16px; } .dv-legal-form p:last-child { margin: 0; } /* v0.11 Light colours only: asks phone browsers in dark mode not to repaint the site. */ :root { color-scheme: only light; } /* ================================================================== * v0.12 Display settings: button, panel and the visitor's choices * ================================================================== */ .dv-display-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--wp--preset--color--ink); background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; white-space: nowrap; } .dv-display-btn[aria-expanded="true"] { background: var(--wp--preset--color--ink); color: var(--dv-on-ink, #fff); } .dv-display-btn svg { flex-shrink: 0; } .dv-display { background: var(--wp--preset--color--mint-mist); border-bottom: 1px solid var(--wp--preset--color--line); } .dv-display[hidden] { display: none; } .dv-display-inner { max-width: 1248px; margin: 0 auto; padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 18px; } .dv-display-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .dv-display-head h2 { font-size: 24px; margin: 0; } .dv-display-close, .dv-d-reset { font: inherit; font-weight: 800; font-size: 16px; min-height: 44px; cursor: pointer; color: var(--wp--preset--color--ink); } .dv-display-close { padding: 0 18px; border-radius: 999px; border: 2px solid var(--wp--preset--color--ink); background: var(--wp--preset--color--white); } .dv-d-reset { background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; } .dv-display-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; } .dv-display fieldset { border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--white); border-radius: 18px; padding: 14px 16px 16px; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .dv-display legend { font-weight: 800; font-size: 15px; padding: 0 6px; } .dv-d-seg { display: flex; flex-wrap: wrap; gap: 6px; } .dv-d-seg label { position: relative; } .dv-d-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .dv-d-seg span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--wp--preset--color--line); background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); font-weight: 800; font-size: 15px; } .dv-d-seg input:checked + span { background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); color: var(--dv-on-ink, #fff); } .dv-d-seg input:focus-visible + span { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 2px; } .dv-d-swatch { width: 14px; height: 14px; border-radius: 50%; margin-right: 8px; border: 1px solid rgba(0, 0, 0, 0.3); display: inline-block; } .dv-d-hint { font-size: 14px; color: var(--wp--preset--color--slate); margin: 0; } .dv-d-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; font-size: 15px; cursor: pointer; } .dv-d-switch input { appearance: none; width: 48px; height: 28px; border-radius: 999px; background: var(--wp--preset--color--line); border: 2px solid var(--wp--preset--color--ink); position: relative; flex-shrink: 0; cursor: pointer; margin: 0; } .dv-d-switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--wp--preset--color--white); transition: left 0.15s; } .dv-d-switch input:checked { background: var(--wp--preset--color--mint); } .dv-d-switch input:checked::after { left: 22px; } .dv-display-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .dv-d-saved { font-weight: 700; font-size: 15px; color: var(--wp--preset--color--slate); } @media (max-width: 782px) { .dv-display-btn { width: 44px; padding: 0; justify-content: center; } .dv-display-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .dv-display-inner { padding: 18px 16px 20px; } } /* ---------- Text size (scales the whole page, like browser zoom) ---------- */ html[data-dv-text="large"] .wp-site-blocks { zoom: 1.15; } html[data-dv-text="largest"] .wp-site-blocks { zoom: 1.3; } /* ---------- Spacing ---------- */ html[data-dv-spacing="extra"] body { letter-spacing: 0.03em; word-spacing: 0.12em; } html[data-dv-spacing="extra"] :is(p, li, dd, td, label, blockquote, .wp-block-post-excerpt__excerpt) { line-height: 1.85 !important; } /* ---------- Less going on ---------- */ html[data-dv-motion="reduce"] *, html[data-dv-motion="reduce"] *::before, html[data-dv-motion="reduce"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } html[data-dv-badges="hide"] :is(.dv-good-for, .dv-chips, .dv-badge, .onsale, .wc-block-components-product-sale-badge, .wc-block-components-product-badge) { display: none !important; } /* ---------- Colours: Calm (softer, less saturated) ---------- */ html[data-dv-colours="calm"], html[data-dv-colours="calm"] body { --wp--preset--color--oat: #F5F3F0; --wp--preset--color--ink: #2E3645; --wp--preset--color--slate: #646B78; --wp--preset--color--mint: #A7D3C3; --wp--preset--color--peach: #E6C2AE; --wp--preset--color--mint-mist: #EDF3F0; --wp--preset--color--peach-mist: #F4ECE6; --wp--preset--color--line: #E4E0DA; --wp--preset--color--white: #FCFBF9; --dv-tray: #F1EEE9; } /* ---------- Colours: High contrast (black on white, strong outlines) ---------- */ html[data-dv-colours="contrast"], html[data-dv-colours="contrast"] body { --wp--preset--color--oat: #FFFFFF; --wp--preset--color--white: #FFFFFF; --wp--preset--color--ink: #000000; --wp--preset--color--slate: #1A1A1A; --wp--preset--color--line: #000000; --wp--preset--color--mint: #CDEFE2; --wp--preset--color--peach: #FAD9C6; --wp--preset--color--mint-mist: #FFFFFF; --wp--preset--color--peach-mist: #FFFFFF; --wp--preset--color--soft: #FFFFFF; --dv-field-line: #000000; --dv-tray: #FFFFFF; } html[data-dv-colours="contrast"] a:not(.wp-element-button):not(.wp-block-button__link):not(.dv-btn) { text-decoration: underline !important; text-underline-offset: 3px; } html[data-dv-colours="contrast"] :is(.wp-element-button, .wp-block-button__link, .wc-block-components-button:not(.is-link), .dv-btn, .dv-btn-submit, .dv-toggle, .dv-seg) { border: 2px solid #000 !important; } html[data-dv-colours="contrast"] :is(.has-mint-mist-background-color, .has-peach-mist-background-color, .dv-short, .dv-value, .dv-cta, .dv-notice, .dv-confirm-help, .dv-form-success, .dv-confirm-account, .dv-display fieldset, .dv-tray, .dv-icon-chip, .dv-next-icon, .dv-way-icon, .wc-block-order-confirmation-create-account) { border: 2px solid #000 !important; } html[data-dv-colours="contrast"] .dv-display { border-bottom: 2px solid #000; } html[data-dv-colours="contrast"] :is(input, select, textarea) { border-color: #000 !important; } html[data-dv-colours="contrast"] :is(.dv-icon-chip) { background: #FFFFFF !important; } /* ---------- Colours: Dim (our own darker look for low light and light sensitivity) ---------- */ html[data-dv-colours="dim"] { color-scheme: only dark; } html[data-dv-colours="dim"], html[data-dv-colours="dim"] body { --wp--preset--color--oat: #1C2230; --wp--preset--color--white: #252D3D; --wp--preset--color--ink: #ECE6DD; --wp--preset--color--slate: #B9BFCA; --wp--preset--color--line: #39425A; --wp--preset--color--mint: #7FC4AC; --wp--preset--color--peach: #E3A583; --wp--preset--color--mint-mist: #22363A; --wp--preset--color--peach-mist: #3A2F2D; --wp--preset--color--soft: #B9BFCA; --dv-on-ink: #1C2230; --dv-field-line: #4A5470; --dv-tray: #232A3A; } /* Text on mint and peach fills stays dark, so it keeps its contrast. */ html[data-dv-colours="dim"] :is(.wp-element-button, .wp-block-button__link, .wc-block-components-button:not(.is-link), .dv-btn-primary, .dv-btn-submit, .dv-confirm-tick, .dv-check-dot) { color: #1C2230 !important; } html[data-dv-colours="dim"] .is-style-outline .wp-block-button__link, html[data-dv-colours="dim"] .dv-btn-outline { color: var(--wp--preset--color--ink) !important; background: transparent !important; } html[data-dv-colours="dim"] .dv-header .wp-block-search__button { color: var(--wp--preset--color--ink) !important; } /* Dark surfaces that are navy in Brand stay dark, a step deeper than the page. */ html[data-dv-colours="dim"] .dv-footer, html[data-dv-colours="dim"] .dv-checkout-footer { background: #141925 !important; color: var(--wp--preset--color--soft) !important; } html[data-dv-colours="dim"] .dv-checks { background: #141925; color: var(--wp--preset--color--ink); } html[data-dv-colours="dim"] .dv-logo svg path { stroke: var(--wp--preset--color--ink); } html[data-dv-colours="dim"] .dv-icon-chip { background: var(--wp--preset--color--peach-mist) !important; } html[data-dv-colours="dim"] .dv-icon-chip svg { stroke: var(--wp--preset--color--ink); } html[data-dv-colours="dim"] .dv-field-error { color: #FF9C8F; } html[data-dv-colours="dim"] .dv-form-errors { background: #3A2326; border-color: #FF9C8F; } html[data-dv-colours="dim"] .dv-form-errors a { color: #FFC2B8; } /* Menus and drawers that WordPress and WooCommerce paint white by default. */ html:is([data-dv-colours="dim"], [data-dv-colours="contrast"]) :is(.wp-block-navigation__responsive-container.is-menu-open, .wc-block-components-drawer, .wc-block-mini-cart__drawer .components-modal__frame) { background: var(--wp--preset--color--white) !important; color: var(--wp--preset--color--ink) !important; } /* Dim: things painted "white" in the page designs. */ html[data-dv-colours="dim"] .has-white-color { color: #ECE6DD !important; } html[data-dv-colours="dim"] [style*="background:#fff"], html[data-dv-colours="dim"] [style*="background: #fff"] { background: var(--wp--preset--color--white) !important; } html[data-dv-colours="dim"] svg [stroke="#22304A"] { stroke: var(--wp--preset--color--ink); } html[data-dv-colours="dim"] svg [fill="#22304A"] { fill: var(--wp--preset--color--ink); } html[data-dv-colours="dim"] .dv-tray-hint { background: rgba(28, 34, 48, 0.85); color: var(--wp--preset--color--ink); } /* ================================================================== * v0.12.1 Two-row header: logo, search and tools on top, categories on * their own line underneath. Phones keep the menu button, with search * on its own full-width row. * ================================================================== */ .dv-header-inner { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo search tools" "nav nav nav"; column-gap: 28px; row-gap: 4px; align-items: center; } .dv-header-inner > * { margin: 0 !important; min-width: 0; } .dv-header-inner > .dv-logo { grid-area: logo; } .dv-header-inner > .dv-header-search { grid-area: search; justify-self: center; width: min(100%, 460px); } .dv-header-inner > .dv-header-tools { grid-area: tools; justify-self: end; } .dv-header-inner > .wp-block-navigation { grid-area: nav; } .dv-header .wp-block-search__inside-wrapper { min-height: 46px; } .dv-header-tools > p { margin: 0; } .dv-header .wp-block-search__input { font-size: 16px !important; } @media (min-width: 600px) { .dv-header { padding-bottom: 0 !important; } .dv-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container { flex-wrap: wrap; row-gap: 4px; } .dv-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content { padding: 10px 2px 12px; white-space: nowrap; } } @media (min-width: 600px) and (max-width: 1023px) { .dv-header-inner { column-gap: 20px; } .dv-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container { justify-content: center; column-gap: 16px; } .dv-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content { font-size: 16px; } .dv-header-inner > .dv-header-search { width: 100%; } } /* Small tablets: two even rows of categories rather than one straggler. */ @media (min-width: 600px) and (max-width: 819px) { .dv-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; column-gap: 28px; } .dv-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item { justify-content: center; } .dv-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container { row-gap: 0; } .dv-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content { padding: 8px 2px 9px; } } @media (max-width: 599px) { .dv-header-inner { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "logo . tools nav" "search search search search"; column-gap: 4px; row-gap: 12px; } .dv-header-inner > .dv-header-search { width: 100%; } .dv-header-tools { gap: 2px !important; } } /* Larger text on tablets: there is not room for the categories, so use the phone layout (menu button, search on its own row). */ @media (min-width: 600px) and (max-width: 1023px) { html[data-dv-text] .dv-header { padding-bottom: 16px !important; } html[data-dv-text] .dv-header-inner { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "logo . tools nav" "search search search search"; column-gap: 4px; row-gap: 12px; } html[data-dv-text] .dv-header-inner > .dv-header-search { width: 100%; } html[data-dv-text] .dv-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } html[data-dv-text] .dv-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } } /* Phones: keep the logo, icons and menu button on one line at every text size. */ @media (max-width: 359px) { .dv-logo .dv-wordmark { font-size: 22px; } .dv-logo svg { width: 30px; height: 30px; } } @media (max-width: 599px) { html[data-dv-text] .dv-logo .dv-wordmark { font-size: 22px; } html[data-dv-text] .dv-logo svg { width: 30px; height: 30px; } } @media (max-width: 389px) { html[data-dv-text="large"] .dv-logo .dv-wordmark { display: none; } } @media (max-width: 459px) { html[data-dv-text="largest"] .dv-logo .dv-wordmark { display: none; } } /* Larger text: tighten the category spacing so they can stay on one line. */ html[data-dv-text] .dv-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container { column-gap: 20px; } /* v0.12.2 Footer: tagline sits close to the logo; the company line only breaks between its parts. */ .dv-footer .wp-block-column > .dv-logo + p { margin-block-start: 10px; } @media (min-width: 782px) { .dv-footer .dv-nowrap { white-space: nowrap; } } /* v0.13 Footer link lists are now menus you can edit in the Site Editor; keep them looking the same. */ .dv-footer .dv-footer-nav { font-size: inherit; font-weight: 400; margin-block-start: 0; } .dv-footer .dv-footer-nav .wp-block-navigation__container { gap: 10px; } .dv-footer .dv-footer-nav .wp-block-navigation-item__content { color: #D5DAE3; padding: 0; font-weight: inherit; } .dv-footer .dv-footer-nav .wp-block-navigation-item__content:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } /* ================================================================== * v0.14 Guides: pictures first, detail folded away * ================================================================== */ .dv-guide h2, .dv-guides h2 { font-family: var(--wp--preset--font-family--fredoka); font-weight: 600; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; margin: 0; text-wrap: balance; } .dv-guide h3 { font-family: var(--wp--preset--font-family--fredoka); font-weight: 600; margin: 0; line-height: 1.25; } .dv-guide p { margin: 0; } .dv-ill { display: block; flex-shrink: 0; } .dv-ill-tile { display: flex; align-items: center; justify-content: center; border-radius: 16px; } .dv-tone-mm { background: var(--wp--preset--color--mint-mist); } .dv-tone-pm { background: var(--wp--preset--color--peach-mist); } .dv-tone-white { background: var(--wp--preset--color--white); } .dv-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } .dv-icon-tile { width: 48px; height: 48px; border-radius: 14px; background: var(--wp--preset--color--mint-mist); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--wp--preset--color--ink); } .dv-chip-static { gap: 6px; } .dv-chip-peach { background: var(--wp--preset--color--peach-mist); } .dv-pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--wp--preset--color--ink); background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); font-weight: 800; font-size: 15px; text-decoration: none; } .dv-pill:hover { text-decoration: underline; text-underline-offset: 3px; } .dv-pill.is-current { background: var(--wp--preset--color--ink); color: var(--dv-on-ink, #fff); } /* Top of a guide */ .dv-guide-top { display: flex; gap: 48px; align-items: center; margin-bottom: 40px; } .dv-guide-intro { flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px; min-width: 0; } .dv-guide-intro > * { margin: 0 !important; } .dv-crumbs { font-size: 15px; color: var(--wp--preset--color--slate); } .dv-crumbs a { color: var(--wp--preset--color--slate); } .dv-guide-title { font-family: var(--wp--preset--font-family--fredoka); font-weight: 700; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; text-wrap: balance; margin: 0; } .dv-guide-sub { font-size: 20px; line-height: 1.5; color: var(--wp--preset--color--slate); max-width: 40em; } .dv-guide-chips { display: flex; flex-wrap: wrap; gap: 10px; } .dv-guide-hero { width: 300px; height: 240px; flex-shrink: 0; border-radius: 28px; background: var(--wp--preset--color--mint-mist); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 26px; box-sizing: border-box; } .dv-guide-content > * + * { margin-top: 56px; } /* Guide building blocks space themselves with gap, not the editor's default margins. */ .dv-guide-content :is(.dv-quick, .dv-quick-text, .dv-quick-cols > .wp-block-column, .dv-cc-row, .dv-cc, .dv-place-grid, .dv-place, .dv-look-list, .dv-look, .dv-look-text, .dv-tip-list, .dv-tip, .dv-tip-head, .dv-gsec, .dv-look-cols > .wp-block-column) > * { margin-block: 0; } /* The 20-second answer */ .dv-quick { background: var(--wp--preset--color--mint-mist); border-radius: 24px; padding: 26px 28px; display: flex; flex-direction: column; gap: 18px; } .dv-quick-label { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .dv-quick-cols { gap: 22px !important; margin: 0 !important; } .dv-quick-cols > .wp-block-column { display: flex; flex-direction: column; gap: 12px; } .dv-quick .dv-ill-tile { width: 72px; height: 72px; border-radius: 18px; } .dv-quick-q { font-size: 16px; color: var(--wp--preset--color--slate); } .dv-quick-a { font-family: var(--wp--preset--font-family--fredoka); font-size: 19px; } .dv-quick-a strong { font-weight: 600; } .dv-quick-text { display: flex; flex-direction: column; gap: 4px; } .dv-quick-sum { font-size: 17px; line-height: 1.6; border-top: 1px solid rgba(34, 48, 74, .15); padding-top: 16px; } /* Jump to */ .dv-toc { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .dv-toc strong { font-size: 15px; margin-right: 6px; } /* Sections */ .dv-gsec { display: flex; flex-direction: column; gap: 22px; scroll-margin-top: 24px; } .dv-gsec > .dv-eyebrow + h2 { margin-top: -14px; } .dv-gsec-sub { font-size: 18px; color: var(--wp--preset--color--slate); line-height: 1.5; margin-top: -10px !important; } /* Comparison cards */ .dv-cc-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .dv-cc { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; } .dv-cc .dv-ill-tile { height: 150px; } .dv-cc h3 { font-size: 24px; } .dv-cc-desc { font-size: 16px; line-height: 1.5; color: var(--wp--preset--color--slate); } .dv-meter { display: flex; flex-direction: column; gap: 6px; } .dv-meter-label { font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--slate); } .dv-meter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 15px; } .dv-dots { display: inline-flex; gap: 6px; } .dv-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--wp--preset--color--ink); box-sizing: border-box; background: var(--wp--preset--color--white); } .dv-dot.is-on { background: var(--wp--preset--color--ink); } .dv-pros, .dv-cons { list-style: none; margin: 0 !important; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 16px; } .dv-cons { margin-top: -4px !important; } .dv-pros li, .dv-cons li { position: relative; padding-left: 38px; min-height: 28px; display: flex; align-items: center; } .dv-pros li::before, .dv-cons li::before { content: ""; position: absolute; left: 0; top: 50%; margin-top: -14px; width: 28px; height: 28px; border-radius: 50%; background: var(--wp--preset--color--mint-mist); } .dv-cons li::before { background: var(--wp--preset--color--peach-mist); } .dv-pros li::after, .dv-cons li::after { content: ""; position: absolute; left: 5px; top: 50%; margin-top: -9px; width: 18px; height: 18px; background: var(--wp--preset--color--ink); -webkit-mask: no-repeat center / 18px var(--dv-mask); mask: no-repeat center / 18px var(--dv-mask); } .dv-pros li::after { --dv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); } .dv-cons li::after { --dv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); } .dv-cc-good { border-top: 1px solid var(--wp--preset--color--line); padding-top: 14px; font-size: 15px; margin-top: auto !important; } /* Read more, text versions and questions */ .dv-more, .dv-textver { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 16px; padding: 0; } .dv-more summary, .dv-textver summary { cursor: pointer; min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 12px 20px; font-weight: 800; font-size: 17px; list-style: none; } .dv-more summary::-webkit-details-marker, .dv-textver summary::-webkit-details-marker { display: none; } .dv-more summary::before, .dv-textver summary::before { content: ""; width: 20px; height: 20px; flex-shrink: 0; background: var(--wp--preset--color--ink); -webkit-mask: no-repeat center / 20px var(--dv-mask); mask: no-repeat center / 20px var(--dv-mask); --dv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); } .dv-more[open] summary::before, .dv-textver[open] summary::before { --dv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); } .dv-more > p, .dv-textver > * { padding: 0 20px 16px 50px; font-size: 17px; line-height: 1.65; max-width: 68ch; margin: 0; } .dv-textver ol { padding-left: 70px; } .dv-textver .dv-table { margin: 0 20px 16px 50px; padding: 0 12px; } .dv-textver summary { font-size: 15px; min-height: 48px; } .dv-faq-group { display: flex; flex-direction: column; } /* Charts: the drawing on wide screens, a stacked version on narrow ones */ .dv-chart { margin: 0; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 24px; padding: 28px 20px 18px; } .dv-chart-svg { display: block; width: 100%; height: auto; font-family: inherit; } .dv-chart-narrow { display: none; } .dv-chart + .dv-textver { margin-top: -8px; } .dv-dbbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .dv-dbrow { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-items: center; } .dv-dblabel { font-size: 16px; color: var(--wp--preset--color--slate); } .dv-dblabel strong { color: var(--wp--preset--color--ink); margin-right: 4px; } .dv-dbbar { grid-column: 2; height: 14px; border-radius: 7px; background: var(--wp--preset--color--oat); border: 1px solid var(--wp--preset--color--line); overflow: hidden; } .dv-dbbar span, .dv-key { display: block; height: 100%; border-radius: 7px; } .dv-dbbar .z1, .dv-key.z1 { background: var(--wp--preset--color--mint-mist); } .dv-dbbar .z2, .dv-key.z2 { background: var(--wp--preset--color--mint); } .dv-dbbar .z3, .dv-key.z3 { background: var(--wp--preset--color--peach); } .dv-chart-note { font-size: 15px; margin-top: 16px !important; line-height: 1.8; } .dv-key { display: inline-block; width: 22px; height: 12px; vertical-align: middle; margin: 0 4px 0 0; } .dv-key.z3 { margin-left: 10px; } .dv-flowsteps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; } .dv-flowstep { display: flex; flex-direction: column; gap: 10px; } .dv-flowstep-q { background: var(--wp--preset--color--peach-mist); border: 2px solid var(--wp--preset--color--ink); border-radius: 16px; padding: 14px 16px; font-weight: 800; font-size: 17px; text-align: center; } .dv-flowstep-a { display: flex; gap: 10px; } .dv-flowstep-a > div { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; } .dv-flowstep-yn { font-weight: 800; font-size: 15px; color: var(--wp--preset--color--slate); } .dv-flowstep-a p { background: var(--wp--preset--color--mint-mist); border: 2px solid var(--wp--preset--color--ink); border-radius: 14px; padding: 12px; text-align: center; font-weight: 700; font-size: 15px; align-self: stretch; } @media (max-width: 899px) { .dv-chart-wide { display: none; } .dv-chart-narrow { display: block; } .dv-chart { padding: 20px 16px; } .dv-chart + .dv-textver { display: none; } } /* Pick by place */ .dv-place-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .dv-place { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; } .dv-place .dv-icon-tile { width: 52px; height: 52px; border-radius: 16px; } .dv-place h3 { font-size: 20px; } .dv-place p { font-size: 16px; line-height: 1.5; color: var(--wp--preset--color--slate); } /* What to look for, and tips */ .dv-look-cols { gap: 40px !important; margin: 0 !important; } .dv-look-list, .dv-tip-list { display: flex; flex-direction: column; gap: 18px; } .dv-tip-list { gap: 16px; } .dv-look { display: flex; gap: 14px; align-items: flex-start; } .dv-look .dv-icon-tile { width: 44px; height: 44px; } .dv-look-text { display: flex; flex-direction: column; gap: 2px; } .dv-look h3 { font-family: inherit; font-weight: 800; font-size: 17px; } .dv-look p { font-size: 16px; line-height: 1.5; color: var(--wp--preset--color--slate); } .dv-tip { background: var(--wp--preset--color--peach-mist); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 10px; } .dv-tip-head { display: flex; align-items: center; gap: 10px; } .dv-tip h3 { font-size: 20px; } .dv-tip p { font-size: 16px; line-height: 1.55; } /* Products, byline, more guides */ .dv-guide-products, .dv-guide-related { margin-top: 56px; } .dv-guide-products > .dv-eyebrow + h2, .dv-guide-related > .dv-eyebrow + h2 { margin: 8px 0 24px; } .dv-guide-byline { margin-top: 48px !important; border-top: 1px solid var(--wp--preset--color--line); padding-top: 24px; font-size: 15px; color: var(--wp--preset--color--slate); } /* Guides page */ .dv-guides-top { display: flex; gap: 48px; align-items: center; margin-bottom: 32px; } .dv-guides-intro { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; } .dv-guides-intro > * { margin: 0 !important; } .dv-guides-title { font-family: var(--wp--preset--font-family--fredoka); font-weight: 700; font-size: clamp(36px, 5vw, 56px); line-height: 1.05; margin: 0; text-wrap: balance; } .dv-guides-lead { font-size: 20px; line-height: 1.5; color: var(--wp--preset--color--slate); max-width: 36em; } .dv-guides-facts { display: flex; gap: 12px; flex-shrink: 0; } .dv-fact { display: flex; flex-direction: column; gap: 6px; border-radius: 20px; padding: 18px 20px; width: 172px; box-sizing: border-box; } .dv-fact strong { font-size: 17px; } .dv-fact span { font-size: 14px; color: var(--wp--preset--color--slate); } .dv-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; } .dv-guides-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .dv-gcard { position: relative; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 24px; padding: 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; } .dv-gcard-art { border-radius: 18px; height: 170px; display: flex; align-items: center; justify-content: center; } .dv-gcard-body { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; } .dv-gcard-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .dv-gcard-mins { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--wp--preset--color--slate); } .dv-gcard-title { font-family: var(--wp--preset--font-family--fredoka); font-weight: 600; font-size: 21px !important; line-height: 1.25 !important; margin: 0; } .dv-gcard-title a { color: var(--wp--preset--color--ink); text-decoration: none; } .dv-gcard-title a::after { content: ""; position: absolute; inset: 0; border-radius: 24px; } /* the whole card is clickable, one link for screen readers */ .dv-gcard:hover .dv-gcard-title a { text-decoration: underline; text-underline-offset: 3px; } .dv-gcard:focus-within { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 3px; } .dv-gcard-title a:focus-visible { outline: none; } .dv-gcard-excerpt { font-size: 17px; color: var(--wp--preset--color--slate); line-height: 1.5; margin: 0; } .dv-gcard-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 15px; margin-top: auto; } .dv-gcard.is-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 28px; } .dv-gcard.is-wide .dv-gcard-art { width: 300px; height: 190px; flex-shrink: 0; } .dv-gcard.is-wide .dv-gcard-title { font-size: 28px !important; } .dv-guides-pages ul { list-style: none; display: flex; gap: 8px; padding: 0; margin: 32px 0 0; } .dv-empty { font-size: 18px; } @media (max-width: 1000px) { .dv-cc-row, .dv-guides-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dv-cc-row > .dv-cc:last-child { grid-column: 1 / -1; } .dv-place-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dv-guide-top, .dv-guides-top { gap: 28px; } .dv-guide-hero { width: 240px; height: 200px; } } @media (max-width: 781px) { .dv-guide-top { flex-direction: column-reverse; align-items: stretch; } .dv-guide-hero { width: 100%; height: 150px; padding-bottom: 16px; } .dv-guide-hero .dv-ill { width: 76px; height: 76px; } .dv-guide-sub { font-size: 17px; } .dv-guides-top { flex-direction: column; align-items: stretch; } .dv-place-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dv-quick { padding: 22px 20px; } .dv-quick-cols > .wp-block-column { flex-direction: row; align-items: center; } .dv-guide-content > * + * { margin-top: 44px; } .dv-gcard.is-wide { flex-direction: column; align-items: stretch; } .dv-gcard.is-wide .dv-gcard-art { width: auto; height: 170px; } .dv-more > p, .dv-textver > * { padding-left: 20px; } } @media (max-width: 600px) { .dv-cc-row, .dv-guides-grid, .dv-place-grid { grid-template-columns: minmax(0, 1fr); } .dv-cc-row > .dv-cc:last-child { grid-column: auto; } .dv-guides-facts .dv-fact { flex: 1 1 0; width: auto; } } @media print { .dv-toc, .dv-guide-related, .dv-guide-products { display: none !important; } .dv-more, .dv-textver { break-inside: avoid; } } /* v0.15 More guide building blocks */ .dv-guide-content :is(.dv-grid3, .dv-grid4, .dv-callout) > * { margin-block: 0; } .dv-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .dv-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } :is(.dv-grid3, .dv-grid4) > .dv-place { min-width: 0; } .dv-cc-amount { display: flex; flex-direction: column; gap: 4px; font-size: 18px; } .dv-cc-amount strong { font-family: var(--wp--preset--font-family--fredoka); font-weight: 600; font-size: 22px; } .dv-callout { border-radius: 20px; padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; } .dv-callout h3 { font-size: 20px; } .dv-callout p { font-size: 17px; line-height: 1.6; } /* Checks */ .dv-gchecks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .dv-gchecks li { display: flex; gap: 16px; align-items: flex-start; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 18px; padding: 18px 20px; } .dv-gcheck-n { width: 40px; height: 40px; border-radius: 50%; background: var(--wp--preset--color--mint); color: var(--wp--preset--color--ink); font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dv-gchecks li > div { display: flex; flex-direction: column; gap: 6px; } .dv-gcheck-q { font-weight: 800; font-size: 18px; line-height: 1.4; } .dv-gcheck-no { display: flex; gap: 8px; align-items: flex-start; font-size: 16px; color: var(--wp--preset--color--slate); } .dv-gcheck-no .dv-icon { color: #B2541F; margin-top: 1px; } html[data-dv-colours="dim"] .dv-gcheck-no .dv-icon { color: var(--wp--preset--color--peach); } /* Timeline */ .dv-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .dv-timeline li { display: flex; gap: 18px; position: relative; padding-bottom: 22px; } .dv-timeline li:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 3px; border-radius: 2px; background: var(--wp--preset--color--mint); } .dv-tl-n { width: 44px; height: 44px; border-radius: 50%; background: var(--wp--preset--color--ink); color: var(--dv-on-ink, #fff); font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dv-tl-body { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 18px; padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; } .dv-tl-head { display: flex; align-items: center; gap: 10px; font-size: 18px; } .dv-tl-body p { font-size: 16px; line-height: 1.55; color: var(--wp--preset--color--slate); margin: 0; } /* Bands */ .dv-bands { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 20px; } .dv-bands-row { display: flex; flex-direction: column; gap: 8px; } .dv-bands-label { font-weight: 800; font-size: 16px; margin: 0; } .dv-bands-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .dv-band { border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; } .dv-band strong { font-size: 16px; } .dv-band span { font-size: 15px; } .dv-band-0 { background: var(--wp--preset--color--mint-mist); } .dv-band-1 { background: var(--wp--preset--color--mint); } .dv-band-2 { background: var(--wp--preset--color--peach); } html[data-dv-colours="dim"] :is(.dv-band-1, .dv-band-2) { color: #1C2230; } .dv-bands .dv-chart-note { margin: 0 !important; color: var(--wp--preset--color--slate); } /* Links */ .dv-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .dv-links li { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 16px; padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; } .dv-links a { font-weight: 800; font-size: 17px; color: var(--wp--preset--color--ink); text-underline-offset: 3px; } .dv-links span { font-size: 15px; color: var(--wp--preset--color--slate); } /* Matrix */ .dv-matrix { margin: 0; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 24px; padding: 8px 16px; overflow-x: auto; } .dv-matrix table { border-collapse: collapse; width: 100%; font-size: 17px; } .dv-matrix th, .dv-matrix td { text-align: left; padding: 16px; border-bottom: 1px solid var(--wp--preset--color--line); vertical-align: top; } .dv-matrix thead th { font-size: 15px; color: var(--wp--preset--color--slate); } .dv-matrix tbody tr:last-child > * { border-bottom: 0; } .dv-matrix tbody th { font-weight: 800; } .dv-matrix td { font-weight: 700; } /* Groups (narrow version of the fidget map) */ .dv-mapgroups { display: flex; flex-direction: column; gap: 10px; } .dv-mapgroup { border-radius: 16px; padding: 14px 16px; border: 1px solid var(--wp--preset--color--line); } .dv-mapgroup strong { font-size: 17px; } .dv-mapgroup p { font-size: 16px; margin: 4px 0 0; color: var(--wp--preset--color--slate); } /* Clothing hotspots */ .dv-hotspots { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: start; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 24px; padding: 24px; } .dv-body-svg { width: 100%; height: auto; display: block; } .dv-hs-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .dv-hs-list li { display: flex; gap: 12px; align-items: flex-start; } .dv-hs-n { width: 32px; height: 32px; border-radius: 50%; background: var(--wp--preset--color--peach); border: 2px solid var(--wp--preset--color--ink); font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; } .dv-hs-list strong { font-size: 17px; } .dv-hs-list p { font-size: 16px; line-height: 1.5; color: var(--wp--preset--color--slate); margin: 2px 0 0; } @media (max-width: 1000px) { .dv-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dv-hotspots { grid-template-columns: 220px minmax(0, 1fr); } .dv-hs-list { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 899px) { .dv-chart-only-wide { display: none; } } @media (max-width: 781px) { .dv-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dv-links { grid-template-columns: minmax(0, 1fr); } .dv-hotspots { grid-template-columns: minmax(0, 1fr); } .dv-hs-figure { max-width: 220px; margin: 0 auto; } .dv-bands-track { grid-template-columns: minmax(0, 1fr); } .dv-matrix { padding: 0; border: 0; background: none; } .dv-matrix thead { display: none; } .dv-matrix tr { display: block; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 18px; padding: 14px 16px; margin-bottom: 12px; } .dv-matrix th, .dv-matrix td { display: block; padding: 4px 0; border: 0; } .dv-matrix tbody th { font-size: 18px; padding-bottom: 8px; } .dv-matrix td::before { content: attr(data-label) ": "; font-weight: 400; color: var(--wp--preset--color--slate); } } @media (max-width: 600px) { .dv-grid3, .dv-grid4 { grid-template-columns: minmax(0, 1fr); } } /* v0.15 Older copies of the noise guide (inserted with v0.14) used these names; styled only inside guides, so the checkout steps are unaffected. */ .dv-guide-content .dv-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 22px; } .dv-guide-content .dv-step { display: flex; flex-direction: column; align-items: stretch; gap: 10px; color: inherit; font-weight: 400; } .dv-guide-content .dv-step + .dv-step::before { display: none; } .dv-guide-content .dv-step-q { background: var(--wp--preset--color--peach-mist); border: 2px solid var(--wp--preset--color--ink); border-radius: 16px; padding: 14px 16px; font-weight: 800; font-size: 17px; text-align: center; } .dv-guide-content .dv-step-a { display: flex; gap: 10px; } .dv-guide-content .dv-step-a > div { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; } .dv-guide-content .dv-step-yn { font-weight: 800; font-size: 15px; color: var(--wp--preset--color--slate); } .dv-guide-content .dv-step-a p { background: var(--wp--preset--color--mint-mist); border: 2px solid var(--wp--preset--color--ink); border-radius: 14px; padding: 12px; text-align: center; font-weight: 700; font-size: 15px; align-self: stretch; } /* Phones: picture tiles become compact rows, icon on the left, so lists stay short. */ @media (max-width: 600px) { .dv-place { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 14px 16px; align-items: start; } .dv-place > .dv-icon-tile { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 14px; } .dv-place h3 { font-size: 18px; align-self: end; } .dv-place-grid, .dv-grid3, .dv-grid4 { gap: 10px; } } /* ================================================================== * v0.16 Search suggestions (header search box) and results page * ================================================================== */ .dv-header-search { position: relative; } .dv-sugg { position: absolute; z-index: 60; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); max-height: min(70vh, 640px); overflow-y: auto; background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); border: 1px solid var(--wp--preset--color--line); border-radius: 22px; box-shadow: 0 12px 32px rgba(34, 48, 74, 0.12); padding: 16px; box-sizing: border-box; text-align: left; } .dv-sugg[hidden] { display: none; } .dv-sugg-list { display: flex; flex-direction: column; gap: 10px; } .dv-sugg-group { display: flex; flex-direction: column; gap: 2px; } .dv-sugg-label { margin: 4px 0 0; font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--slate); } .dv-sugg-opt { display: flex; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 14px; color: var(--wp--preset--color--ink); text-decoration: none; min-height: 44px; } .dv-sugg-opt:hover, .dv-sugg-opt.is-active { background: var(--wp--preset--color--mint-mist); } .dv-sugg-opt.is-active { outline: 3px solid var(--wp--preset--color--ink); outline-offset: -3px; } .dv-sugg-pic { width: 56px; height: 56px; border-radius: 12px; background: var(--wp--preset--color--mint-mist); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .dv-sugg-pic img { width: 56px; height: 56px; object-fit: cover; display: block; } .dv-sugg-pic-guide { background: var(--wp--preset--color--oat); border: 1px solid var(--wp--preset--color--line); box-sizing: border-box; } .dv-sugg-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; } .dv-sugg-txt strong { font-size: 17px; line-height: 1.3; } .dv-sugg-sub { font-size: 14px; color: var(--wp--preset--color--slate); } .dv-sugg-price { font-size: 16px; flex-shrink: 0; } .dv-sugg-hit { background: none; color: inherit; text-decoration: underline; text-decoration-color: var(--wp--preset--color--mint); text-decoration-thickness: 3px; text-underline-offset: 4px; } .dv-sugg-fix { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 2px; background: var(--wp--preset--color--peach-mist); border-radius: 14px; padding: 10px 14px; font-size: 16px; } .dv-sugg-fix-icon { display: inline-flex; } .dv-sugg-exact.dv-sugg-opt { flex-basis: 100%; min-height: 32px; padding: 2px 30px; font-size: 14px; color: var(--wp--preset--color--slate); text-decoration: underline; } .dv-sugg-needs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .dv-sugg-needs-label { font-size: 15px; font-weight: 700; margin-right: 2px; } .dv-sugg-chip.dv-sugg-opt { min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--wp--preset--color--mint-mist); font-weight: 700; font-size: 15px; } .dv-sugg-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--wp--preset--color--line); padding-top: 12px; margin-top: 2px; } .dv-sugg-note { font-size: 13px; color: var(--wp--preset--color--slate); line-height: 1.4; } .dv-sugg-note kbd { font: inherit; font-weight: 800; border: 1px solid var(--dv-field-line, #C9C1B5); border-radius: 6px; padding: 0 6px; margin-right: 3px; background: var(--wp--preset--color--oat); } .dv-sugg-all.dv-sugg-opt { flex-shrink: 0; background: var(--wp--preset--color--ink); color: var(--dv-on-ink, #fff); font-weight: 800; font-size: 15px; padding: 0 18px; border-radius: 999px; } .dv-sugg-all.dv-sugg-opt:hover, .dv-sugg-all.dv-sugg-opt.is-active { background: var(--wp--preset--color--ink); outline-color: var(--wp--preset--color--mint); } .dv-sugg-smart { background: var(--wp--preset--color--mint-mist); border-radius: 16px; padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; } .dv-sugg-smart-head { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .dv-sugg-smart p { margin: 0; font-size: 17px; line-height: 1.5; } .dv-sugg-looking, .dv-sugg-none { margin: 0; font-size: 15px; color: var(--wp--preset--color--slate); } @media (max-width: 599px) { .dv-sugg { left: 0; right: 0; width: auto; transform: none; max-height: 70vh; padding: 14px; } .dv-sugg-price { display: none; } .dv-sugg-foot { flex-direction: column; align-items: stretch; } .dv-sugg-all.dv-sugg-opt { justify-content: center; min-height: 48px; } .dv-sugg-note kbd, .dv-sugg-foot .dv-sugg-note[aria-hidden] { display: none; } } /* Results page */ .dv-search-title { font-family: var(--wp--preset--font-family--fredoka); font-weight: 700; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; margin: 0; } .dv-search-typed { margin: 0; font-size: 17px; color: var(--wp--preset--color--slate); } .dv-search-typed a { color: var(--wp--preset--color--ink); font-weight: 700; } .dv-search-empty { display: flex; flex-direction: column; gap: 16px; max-width: 720px; } .dv-search-empty h2 { font-family: var(--wp--preset--font-family--fredoka); font-weight: 700; font-size: 28px; line-height: 1.15; margin: 0; } .dv-search-empty > p { margin: 0; font-size: 17px; color: var(--wp--preset--color--slate); } .dv-empty-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .dv-empty-tile { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 14px; border-radius: 16px; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--ink); text-decoration: none; font-weight: 800; } .dv-empty-tile:hover span { text-decoration: underline; text-underline-offset: 3px; } .dv-empty-ask { background: var(--wp--preset--color--mint-mist); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .dv-empty-ask strong { font-family: var(--wp--preset--font-family--fredoka); font-weight: 600; font-size: 20px; } .dv-empty-ask p { margin: 0; } .dv-empty-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--wp--preset--color--ink); color: var(--dv-on-ink, #fff) !important; font-weight: 800; text-decoration: none; } @media (max-width: 600px) { .dv-empty-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* v0.16.4 Checkout order summary: one rounded card. WooCommerce 11 added its own square box inside our sidebar card, so it is removed here, only inside the sidebar. */ .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block, .wc-block-checkout__sidebar .checkout-order-summary-block-fill { border: 0 !important; border-radius: 0 !important; } .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title { margin-top: 0 !important; } .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-text { font-family: var(--wp--preset--font-family--fredoka); font-weight: 600 !important; font-size: 26px !important; color: var(--wp--preset--color--ink); } .wc-block-checkout__sidebar .wc-block-components-order-summary, .wc-block-checkout__sidebar .wc-block-components-totals-item, .wc-block-checkout__sidebar .wc-block-components-totals-coupon { padding-left: 0 !important; padding-right: 0 !important; } .wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, .wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 20px; font-weight: 800; } /* v0.16.5 Checkout boxes: rounded like the rest of the site. WooCommerce 11 draws its own square outlines around the shipping and payment choices and the Express Checkout box. */ .wc-block-checkout .wc-block-components-radio-control--highlight-checked::after, .wc-block-checkout .wc-block-components-radio-control-accordion-option::after { display: none !important; } .wc-block-checkout .wc-block-components-radio-control-accordion-option { border: 2px solid var(--dv-field-line, #C9C1B5); border-radius: 16px !important; overflow: hidden; box-shadow: none !important; background: var(--wp--preset--color--white); margin-bottom: 10px; } .wc-block-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted { border-color: var(--wp--preset--color--ink); } .wc-block-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option { border: 0 !important; border-radius: 0 !important; margin-bottom: 0 !important; } .wc-block-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted .wc-block-components-radio-control__option { border-bottom: 1px solid var(--wp--preset--color--line) !important; } .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-text { margin-left: 0 !important; margin-right: 0 !important; } /* Express Checkout: one rounded box, with the title sitting in a gap in the top line */ .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container { top: 0 !important; justify-content: center; z-index: 1; } .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::before, .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::after { border: 0 !important; } .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title { background: var(--wp--preset--color--oat); padding: 0 12px !important; } .wc-block-components-express-payment--checkout .wc-block-components-express-payment__content { border: 1px solid var(--wp--preset--color--line) !important; border-radius: 16px !important; margin-top: 0 !important; } /* Phones: the folded "Order summary" at the top sits in our card without extra lines, and the summary above "Place order" is a rounded card too. */ .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title { border-top: 0 !important; border-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__content.is-open { border-bottom: 0 !important; } .wc-block-checkout__main .checkout-order-summary-block-fill { border: 1px solid var(--wp--preset--color--line) !important; border-radius: 16px !important; background: var(--wp--preset--color--white); overflow: hidden; } /* v0.16.8 Basket quantity and remove: the quantity box no longer picks up the big form-field style (which pushed "+" under the bin), and "Remove" is a separate, labelled button with space around it. Applies to the basket page and the slide-out basket. */ .wc-block-components-quantity-selector:where(:has(input:not([type=hidden]))) { width: auto !important; } .wc-block-components-quantity-selector { display: inline-flex; align-items: stretch; flex: none; min-height: 48px !important; overflow: hidden; background: var(--wp--preset--color--white); } .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; min-height: 0 !important; height: auto; padding: 0 !important; width: 44px !important; min-width: 44px !important; flex: 0 0 44px !important; font-size: 17px !important; font-weight: 800; color: var(--wp--preset--color--ink); } .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button { width: 44px; min-width: 44px !important; flex: 0 0 44px; font-size: 22px !important; font-weight: 700 !important; color: var(--wp--preset--color--ink) !important; opacity: .85; } .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover { background: var(--wp--preset--color--mint-mist) !important; opacity: 1; } .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus-visible, .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:focus-visible { outline: 3px solid var(--wp--preset--color--ink); outline-offset: -3px; box-shadow: none !important; } .wc-block-cart-item__quantity { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px !important; } .wc-block-cart-item__quantity .wc-block-cart-item__remove-link { display: inline-flex; } table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link { align-items: center; gap: 6px; min-height: 44px; padding: 0 14px !important; border-radius: 999px !important; font-family: inherit; font-size: 15px !important; line-height: 1 !important; font-weight: 700; color: var(--wp--preset--color--slate) !important; text-decoration: none !important; } table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link::after { content: "Remove"; vertical-align: middle; } table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover { background: var(--wp--preset--color--peach-mist) !important; color: var(--wp--preset--color--ink) !important; } table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:focus-visible { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 2px; } table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link svg { width: 20px; height: 20px; display: inline-block; vertical-align: middle; margin-right: 6px; } /* v0.16.9 My account: log in and create an account */ .woocommerce-account .u-columns.col2-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } .woocommerce-account .u-columns.col2-set::before, .woocommerce-account .u-columns.col2-set::after { display: none; } .woocommerce-account .u-columns.col2-set > .u-column1, .woocommerce-account .u-columns.col2-set > .u-column2 { width: auto; float: none; margin: 0; } @media (max-width: 781px) { .woocommerce-account .u-columns.col2-set { grid-template-columns: minmax(0, 1fr); } } .dv-account-why { background: var(--wp--preset--color--mint-mist); border-radius: 18px; padding: 18px 20px; margin-bottom: 24px; display: flex; flex-direction: column; gap: 10px; } .dv-account-why p { margin: 0; } .dv-account-why-title { font-weight: 800; } .dv-account-why ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .dv-account-why li { display: flex; align-items: flex-start; gap: 10px; } .dv-account-tick { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--wp--preset--color--mint); color: var(--wp--preset--color--ink); display: inline-flex; align-items: center; justify-content: center; } .dv-account-tick svg { width: 14px; height: 14px; } .dv-account-guest { font-size: 15px; color: var(--wp--preset--color--slate); } .woocommerce form.login .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; } .woocommerce form.login .woocommerce-form__label-for-checkbox input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--wp--preset--color--ink); } .woocommerce form.login .form-row:has(.woocommerce-form-login__submit) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; } .woocommerce form.login .form-row:has(.woocommerce-form-login__submit) .woocommerce-form-login__rememberme { order: -1; flex-basis: 100%; } .woocommerce form.login .woocommerce-form-login__submit, .woocommerce form.register .woocommerce-form-register__submit { margin: 0 !important; min-height: 52px; padding: 0 32px !important; font-size: 17px !important; font-weight: 800 !important; } .woocommerce form.login .lost_password { margin: 16px 0 0; padding: 0; } .woocommerce form.login .form-row:has(.woocommerce-form-login__submit)::before, .woocommerce form.login .form-row:has(.woocommerce-form-login__submit)::after { display: none; } /* v0.16.10 My account: tidy menu, orders table and small action buttons */ .woocommerce-MyAccount-navigation ul { gap: 4px; } .woocommerce-MyAccount-navigation li { margin: 0 !important; padding: 0 !important; } .woocommerce-MyAccount-navigation a { padding: 12px 16px; min-height: 44px; box-sizing: border-box; display: flex; align-items: center; text-decoration: none !important; } .woocommerce-MyAccount-navigation a:hover { background: var(--wp--preset--color--mint-mist); } .woocommerce-orders-table { border-collapse: separate !important; border-spacing: 0; border: 1px solid var(--wp--preset--color--line) !important; border-radius: 20px !important; overflow: hidden; } .woocommerce-orders-table thead th { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--slate); padding: 14px 16px !important; border-bottom: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--white); } .woocommerce-orders-table tbody th, .woocommerce-orders-table tbody td { padding: 16px !important; vertical-align: middle !important; border-bottom: 1px solid var(--wp--preset--color--line); border-top: 0 !important; } .woocommerce-orders-table tbody tr:last-child > * { border-bottom: 0; } .woocommerce-orders-table__cell-order-number a { font-weight: 800; } .woocommerce-orders-table__header-order-actions { text-align: right !important; } .woocommerce-orders-table__cell-order-actions { text-align: right !important; } .woocommerce-orders-table__cell-order-date, .woocommerce-orders-table__cell-order-total, .dv-status { white-space: nowrap; } .woocommerce-orders-table tbody th, .woocommerce-orders-table tbody td, .woocommerce-orders-table thead th { padding-left: 12px !important; padding-right: 12px !important; } @media (min-width: 769px) { .woocommerce-account .woocommerce-MyAccount-navigation { width: 22%; } .woocommerce-account .woocommerce-MyAccount-content { width: 74%; } } .woocommerce-orders-table__cell-order-actions .button { display: inline-flex !important; align-items: center; justify-content: center; min-height: 40px !important; height: auto !important; padding: 0 18px !important; margin: 4px 0 4px 8px !important; border-radius: 999px !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1 !important; text-decoration: none !important; background: var(--wp--preset--color--white) !important; color: var(--wp--preset--color--ink) !important; border: 2px solid var(--wp--preset--color--ink) !important; } .woocommerce-orders-table__cell-order-actions .button:hover { background: var(--wp--preset--color--mint-mist) !important; } .woocommerce-orders-table__cell-order-actions .button.pay { background: var(--wp--preset--color--mint) !important; border-color: var(--wp--preset--color--mint) !important; } .woocommerce-orders-table__cell-order-actions .button.cancel { border-color: transparent !important; background: transparent !important; color: var(--wp--preset--color--slate) !important; text-decoration: underline !important; padding: 0 8px !important; } .dv-status { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1.3; background: var(--wp--preset--color--mint-mist); color: var(--wp--preset--color--ink); } .dv-status--completed { background: var(--wp--preset--color--mint); } .dv-status--failed, .dv-status--pending, .dv-status--on-hold { background: var(--wp--preset--color--peach-mist); } .dv-status--cancelled, .dv-status--refunded { background: var(--wp--preset--color--soft, #F1ECE4); color: var(--wp--preset--color--slate); } @media (max-width: 781px) { .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .woocommerce-MyAccount-navigation a { border: 2px solid var(--wp--preset--color--line); border-radius: 999px; padding: 8px 16px; min-height: 44px; background: var(--wp--preset--color--white); } .woocommerce-MyAccount-navigation .is-active a { border-color: var(--wp--preset--color--ink); background: var(--wp--preset--color--mint-mist); } } @media (max-width: 768px) { .woocommerce-orders-table, .woocommerce-orders-table tbody { display: block; border: 0 !important; border-radius: 0 !important; overflow: visible; background: transparent; } .woocommerce-orders-table thead { display: none; } .woocommerce-orders-table tbody tr { display: block; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 18px; padding: 8px 16px 12px; margin-bottom: 12px; } .woocommerce-orders-table tbody tr > * { display: block !important; padding: 10px 0 !important; border-bottom: 1px solid var(--wp--preset--color--line) !important; text-align: right !important; background: transparent !important; overflow: hidden; } .woocommerce-orders-table tbody tr > *::before { content: attr(data-title); font-weight: 800; float: left !important; margin-right: 12px; } .woocommerce-orders-table tbody tr > .woocommerce-orders-table__cell-order-number { font-family: var(--wp--preset--font-family--fredoka); font-size: 20px; } .woocommerce-orders-table tbody tr > .woocommerce-orders-table__cell-order-number::before { font-family: var(--wp--preset--font-family--nunito); font-size: 16px; } .woocommerce-orders-table tbody tr > .woocommerce-orders-table__cell-order-actions { border-bottom: 0 !important; display: flex !important; justify-content: flex-start; flex-wrap: wrap; white-space: normal; gap: 8px; padding-bottom: 0 !important; text-align: left !important; } .woocommerce-orders-table tbody tr > .woocommerce-orders-table__cell-order-actions::before { display: none; } .woocommerce-orders-table__cell-order-actions .button { margin: 0 !important; } } /* v0.16.11 My account dashboard */ .dv-dash { display: flex; flex-direction: column; gap: 24px; } .dv-dash p { margin: 0; } .dv-dash-hello { display: flex; flex-direction: column; gap: 4px; } .dv-dash-title { margin: 0; font-size: clamp(26px, 3vw, 32px); } .dv-dash-notyou { color: var(--wp--preset--color--slate); font-size: 15px; } .dv-dash-card { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; } .dv-dash-card-title { margin: 0; font-size: 14px; font-family: inherit; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--slate); } .dv-dash-order { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; } .dv-dash-order-main { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .dv-dash-order-no { font-family: var(--wp--preset--font-family--fredoka); font-weight: 600; font-size: 22px; } .dv-dash-order-meta { color: var(--wp--preset--color--slate); } .dv-dash-order-actions { display: flex; flex-wrap: wrap; gap: 8px; } .dv-dash-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 2px solid var(--wp--preset--color--ink); background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); font-weight: 800; font-size: 16px; text-decoration: none !important; } .dv-dash-btn:hover { background: var(--wp--preset--color--mint-mist); } .dv-dash-btn--mint { background: var(--wp--preset--color--mint); border-color: var(--wp--preset--color--mint); } .dv-dash-btn--mint:hover { background: #5BB595; } .dv-dash-btn:focus-visible, .dv-dash-links a:focus-visible { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 3px; } .dv-dash-empty { color: var(--wp--preset--color--slate); } .dv-dash-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .dv-dash-links li { margin: 0; } .dv-dash-links a { height: 100%; box-sizing: border-box; display: flex; gap: 12px; align-items: flex-start; padding: 18px; border-radius: 18px; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); text-decoration: none !important; color: var(--wp--preset--color--ink); } .dv-dash-links a:hover { border-color: var(--wp--preset--color--ink); } .dv-dash-link-icon { flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--wp--preset--color--mint-mist); display: inline-flex; align-items: center; justify-content: center; } .dv-dash-link-text { display: flex; flex-direction: column; gap: 2px; } .dv-dash-link-text span { color: var(--wp--preset--color--slate); font-size: 15px; line-height: 1.45; } .dv-dash-help { background: var(--wp--preset--color--peach-mist); border-radius: 16px; padding: 16px 20px; } @media (max-width: 900px) { .dv-dash-links { grid-template-columns: minmax(0, 1fr); } } /* v0.16.12 My account → View order */ .woocommerce-MyAccount-content > p:empty { display: none; } .dv-vo { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 18px; margin-bottom: 32px; } .dv-vo p { margin: 0; } .dv-vo-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; } .dv-vo-meta { color: var(--wp--preset--color--slate); } .dv-vo-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .dv-vo-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-weight: 700; color: var(--wp--preset--color--slate); } .dv-vo-step::before { content: ""; position: absolute; top: 17px; left: 36px; right: -8px; height: 3px; border-radius: 3px; background: var(--wp--preset--color--line); } .dv-vo-step:last-child::before { display: none; } .dv-vo-step.is-done::before { background: var(--wp--preset--color--mint); } .dv-vo-dot { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: var(--wp--preset--color--white); border: 2px solid var(--dv-field-line, #C9C1B5); color: var(--wp--preset--color--slate); } .dv-vo-step.is-done .dv-vo-dot { background: var(--wp--preset--color--mint); border-color: var(--wp--preset--color--mint); color: var(--wp--preset--color--ink); } .dv-vo-step.is-now .dv-vo-dot { border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--ink); background: var(--wp--preset--color--mint-mist); } .dv-vo-step.is-done, .dv-vo-step.is-now { color: var(--wp--preset--color--ink); } .dv-vo-line { font-size: 17px; } .woocommerce-view-order .woocommerce-order-details, .woocommerce-view-order .woocommerce-customer-details { margin: 0 0 32px; } .woocommerce-view-order .woocommerce-order-details__title, .woocommerce-view-order .woocommerce-column__title, .woocommerce-view-order .woocommerce-OrderUpdates + *, .woocommerce-view-order .woocommerce-MyAccount-content > h2 { font-size: 24px !important; margin: 0 0 14px !important; } .woocommerce-view-order table.order_details { border-collapse: separate !important; border-spacing: 0; width: 100%; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line) !important; border-radius: 20px !important; overflow: hidden; } .woocommerce-view-order table.order_details th, .woocommerce-view-order table.order_details td { padding: 14px 20px !important; border: 0 !important; border-bottom: 1px solid var(--wp--preset--color--line) !important; vertical-align: middle; text-align: left; } .woocommerce-view-order table.order_details thead th { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--slate); } .woocommerce-view-order table.order_details .product-total, .woocommerce-view-order table.order_details tfoot td { text-align: right !important; } .woocommerce-view-order table.order_details tfoot th { font-weight: 700; } .woocommerce-view-order table.order_details tfoot tr:last-child > * { border-bottom: 0 !important; } .woocommerce-view-order table.order_details tfoot tr:has(.dv-vo-total) > * { font-size: 20px; font-weight: 800; } .woocommerce-view-order .woocommerce-column__title { font-family: var(--wp--preset--font-family--fredoka); font-weight: 600 !important; } .dv-vo-item { display: inline-flex; align-items: center; gap: 14px; vertical-align: middle; } .dv-vo-item a { font-weight: 700; } img.dv-vo-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; background: var(--wp--preset--color--mint-mist); flex: none; } .woocommerce-view-order .woocommerce-customer-details .col2-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .woocommerce-view-order .woocommerce-customer-details .col2-set::before, .woocommerce-view-order .woocommerce-customer-details .col2-set::after { display: none; } .woocommerce-view-order .woocommerce-customer-details .col2-set > * { width: auto !important; float: none !important; margin: 0 !important; } .woocommerce-view-order .woocommerce-customer-details address { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line) !important; border-radius: 20px !important; padding: 20px 22px !important; font-style: normal; line-height: 1.7; box-shadow: none !important; } .woocommerce-view-order .order-again .button { display: inline-flex !important; align-items: center; min-height: 44px !important; padding: 0 22px !important; border-radius: 999px !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1 !important; } .woocommerce-view-order .woocommerce-OrderUpdates { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 10px; } .woocommerce-view-order .woocommerce-OrderUpdate { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 16px; padding: 14px 18px; } .woocommerce-view-order .woocommerce-OrderUpdate-meta { font-size: 14px; color: var(--wp--preset--color--slate); margin: 0 0 4px; } .dv-vo-help { margin-top: 0; } @media (max-width: 600px) { .woocommerce-view-order .woocommerce-customer-details .col2-set { grid-template-columns: minmax(0, 1fr); } .dv-vo { padding: 20px; } .dv-vo-step { font-size: 14px; } .woocommerce-view-order table.order_details th, .woocommerce-view-order table.order_details td { padding: 12px 14px !important; } img.dv-vo-thumb { width: 48px; height: 48px; } } /* v0.16.13 My account → Addresses and Account details */ .woocommerce-Addresses.col2-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; } .woocommerce-Addresses.col2-set::before, .woocommerce-Addresses.col2-set::after { display: none; } .woocommerce-Addresses .woocommerce-Address { width: auto !important; float: none !important; margin: 0 !important; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 20px; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; } .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .woocommerce-Address-title::before, .woocommerce-Address-title::after { display: none !important; } .woocommerce-Address-title h2 { margin: 0 !important; font-size: 22px !important; float: none !important; } .woocommerce-Address-title a.edit { float: none !important; display: inline-flex !important; align-items: center; line-height: 1 !important; flex: none; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--wp--preset--color--ink); font-weight: 800; font-size: 15px; text-decoration: none !important; color: var(--wp--preset--color--ink); } .woocommerce-Address-title a.edit:hover { background: var(--wp--preset--color--mint-mist); } .woocommerce-Address address { font-style: normal; line-height: 1.7; margin: 0; } .woocommerce-MyAccount-content .woocommerce-address-fields, .woocommerce-MyAccount-content form.woocommerce-EditAccountForm { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 20px; padding: 28px; } .woocommerce-MyAccount-content form > h2 { font-size: 24px !important; margin: 0 0 16px !important; } .woocommerce-MyAccount-content select.country_to_state--single { border: 0 !important; background: transparent !important; padding: 0 !important; min-height: 0 !important; appearance: none; -webkit-appearance: none; font-weight: 700; pointer-events: none; } .woocommerce-EditAccountForm fieldset { border: 1px solid var(--wp--preset--color--line); border-radius: 16px; padding: 8px 20px 16px; margin: 20px 0; } .woocommerce-EditAccountForm legend { font-weight: 800; padding: 0 8px; } .woocommerce-MyAccount-content .form-row em, .woocommerce-MyAccount-content #account_display_name_description { font-style: normal; font-size: 15px; color: var(--wp--preset--color--slate); } .woocommerce-MyAccount-content .woocommerce-address-fields button[type="submit"], .woocommerce-MyAccount-content .woocommerce-EditAccountForm button[type="submit"] { min-height: 52px; padding: 0 32px !important; font-size: 17px !important; font-weight: 800 !important; margin-top: 8px; } @media (max-width: 781px) { .woocommerce-Addresses.col2-set { grid-template-columns: minmax(0, 1fr); } .woocommerce-MyAccount-content .woocommerce-address-fields, .woocommerce-MyAccount-content form.woocommerce-EditAccountForm { padding: 20px; } } /* ================================================================== * v0.17.0 Homepage: hero left side, Shop by category, Shop by need. * Tiles switch layout by the space they have (container queries), so * they also behave when the Text size setting zooms the page. * ================================================================== */ .dv-tone-mm { background: var(--wp--preset--color--mint-mist); } .dv-tone-pm { background: var(--wp--preset--color--peach-mist); } .dv-tone-white { background: var(--wp--preset--color--white); } /* ---- Hero ---- */ .dv-hero-main { display: flex; flex-direction: column; gap: 22px; } .dv-hero-main > * { margin: 0 !important; } .dv-hero-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); font-size: 15px; font-weight: 700; line-height: 1.3; } .dv-hero-dots { display: inline-flex; flex-direction: column; gap: 4px; flex: none; } .dv-hero-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--mint); } .dv-hero-dots span + span { background: var(--wp--preset--color--peach); } .dv-hero-title { line-height: 1.04 !important; letter-spacing: -0.01em; } .dv-underline { position: relative; display: inline-block; white-space: nowrap; } .dv-underline::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.13em; height: 0.24em; background: var(--wp--preset--color--mint); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'%3E%3Cpath d='M4 16C80 6 170 4 250 9s110 6 146 2' stroke='%23000' stroke-width='8' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'%3E%3Cpath d='M4 16C80 6 170 4 250 9s110 6 146 2' stroke='%23000' stroke-width='8' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .dv-hero-lead { line-height: 1.55 !important; max-width: 560px; } .dv-hero-needs { display: flex; flex-direction: column; gap: 10px; margin-top: 8px !important; } .dv-hero-needs-label { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--slate); } .dv-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .dv-need-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 13px 0 10px; border-radius: 999px; font-weight: 700; font-size: 15px; color: var(--wp--preset--color--ink); text-decoration: none; } .dv-need-chip:hover { box-shadow: inset 0 0 0 2px var(--wp--preset--color--ink); } .dv-need-chip svg { flex: none; } .dv-promises { container-type: inline-size; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .dv-promise { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); } .dv-promise-icon { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--wp--preset--color--ink); } .dv-promise-text { font-size: 14px; font-weight: 800; line-height: 1.3; } @container (max-width: 579px) { .dv-promise { flex-direction: column; justify-content: flex-start; gap: 8px; padding: 14px 6px; text-align: center; } .dv-promise-text { font-size: 13px; } } @media (max-width: 781px) { .dv-hero-main { gap: 18px; } .dv-hero-pill { font-size: 13px; gap: 8px; padding: 7px 14px 7px 10px; } .dv-hero-dots { gap: 3px; } .dv-hero-dots span { width: 7px; height: 7px; } .dv-hero-needs-label { font-size: 13px; } } @media (max-width: 599px) { .dv-hero-buttons { flex-direction: column; align-items: stretch !important; gap: 10px !important; } .dv-hero-buttons .wp-block-button, .dv-hero-buttons .wp-block-button__link { width: 100%; justify-content: center; text-align: center; } } /* ---- Section headings ---- */ .dv-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 32px !important; } .dv-sec-head.is-stacked { flex-direction: column; align-items: flex-start; gap: 10px; } .dv-sec-head.is-stacked > * { max-width: 720px; } .dv-sec-title { margin: 0 !important; } .dv-sec-sub { margin: 8px 0 0; font-size: 18px; line-height: 1.55; color: var(--wp--preset--color--slate); } .dv-sec-head.is-stacked .dv-sec-sub { margin: 0; } .dv-sec-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 800; font-size: 17px; color: var(--wp--preset--color--ink); } .dv-needs-eyebrow { letter-spacing: .08em; } .dv-sec-link-short { display: none; } @media (max-width: 599px) { .dv-sec-head { flex-wrap: nowrap; margin-bottom: 20px !important; } .dv-sec-head:not(.is-stacked) .dv-sec-sub { display: none; } .dv-sec-link { flex: none; font-size: 15px; } .dv-sec-link-long { display: none; } .dv-sec-link-short { display: inline; } } /* ---- Shop by category ---- */ .dv-cats-wrap { container-type: inline-size; } .dv-cats { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .dv-catc-li { display: flex; } .dv-catc-li.is-feature { grid-column: span 2; } .dv-catc { flex: 1; min-height: 272px; box-sizing: border-box; border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 10px; color: var(--wp--preset--color--ink); text-decoration: none; } .dv-catc.dv-tone-white { border: 1px solid var(--wp--preset--color--line); } .dv-catc:hover .dv-catc-title, .dv-catc:focus-visible .dv-catc-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } .dv-catc-art { align-self: flex-start; display: inline-flex; padding: 10px; border-radius: 22px; } .dv-catc-body { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; } .dv-catc-title { font-family: var(--wp--preset--font-family--fredoka); font-weight: 600; font-size: 26px; line-height: 1.15; } .dv-catc-desc { font-size: 16px; line-height: 1.5; color: var(--wp--preset--color--slate); } .dv-catc-go { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 16px; } .dv-catc.is-feature { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 36px; } .dv-catc.is-feature .dv-catc-text { display: flex; flex-direction: column; gap: 10px; max-width: 380px; } .dv-catc.is-feature .dv-catc-title { font-size: 34px; line-height: 1.1; } .dv-catc.is-feature .dv-catc-desc { font-size: 17px; } .dv-catc-btn { margin-top: 8px; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--wp--preset--color--ink); color: var(--dv-on-ink, #FFFFFF); font-weight: 800; font-size: 16px; } .dv-catc.is-feature:hover .dv-catc-title { text-decoration: none; } .dv-catc.is-feature:hover .dv-catc-btn { text-decoration: underline; text-underline-offset: 3px; } .dv-catc-trio { flex: none; display: flex; align-items: flex-end; gap: 4px; padding: 20px 24px; border-radius: 28px; } .dv-catc-trio svg { flex: none; } /* Narrower three-across: one picture in the big tile, smaller need pictures */ @container (min-width: 860px) and (max-width: 1139px) { .dv-catc-trio { padding: 14px; } .dv-catc-trio svg:nth-child(1), .dv-catc-trio svg:nth-child(3) { display: none; } .dv-catc.is-feature .dv-catc-text { flex: 1 1 auto; max-width: none; } } /* Two across: tablets and big phones */ @container (max-width: 859px) { .dv-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .dv-catc-li.is-last { grid-column: span 2; } .dv-catc { min-height: 0; padding: 20px; border-radius: 24px; } .dv-catc.is-feature { padding: 24px; } .dv-catc.is-feature .dv-catc-title { font-size: 28px; } .dv-catc-trio { padding: 12px 14px; border-radius: 22px; } .dv-catc-trio svg:nth-child(1), .dv-catc-trio svg:nth-child(3) { width: 84px; height: 84px; } .dv-catc-trio svg:nth-child(2) { width: 104px; height: 104px; } .dv-catc-li.is-last .dv-catc { flex-direction: row; align-items: center; } .dv-catc-li.is-last .dv-catc-art { order: 2; margin-left: auto; } .dv-catc-li.is-last .dv-catc-body { margin-top: 0; } .dv-catc-li.is-last .dv-catc-go { display: none; } } /* Phones: compact tiles, name only */ @container (max-width: 559px) { .dv-catc { padding: 16px; border-radius: 22px; gap: 10px; } .dv-catc-art { padding: 6px; border-radius: 16px; } .dv-catc-art svg { width: 64px; height: 64px; } .dv-catc-body { margin-top: 0; gap: 4px; } .dv-catc-title { font-size: 19px; } .dv-catc-desc, .dv-catc-go { display: none; } .dv-catc-li.is-last .dv-catc { padding: 16px 20px; } .dv-catc-li.is-last .dv-catc-title { font-size: 21px; } .dv-catc-li.is-last .dv-catc-desc { display: block; font-size: 15px; } .dv-catc-li.is-last .dv-catc-art svg { width: 56px; height: 56px; } .dv-catc.is-feature { padding: 20px; gap: 12px; } .dv-catc.is-feature .dv-catc-title { font-size: 24px; } .dv-catc.is-feature .dv-catc-desc { display: block; font-size: 15px; line-height: 1.45; } .dv-catc-btn { margin-top: 4px; min-height: 0; padding: 0; background: none; color: var(--wp--preset--color--ink); font-size: 15px; gap: 6px; } .dv-catc-trio { padding: 8px; border-radius: 20px; } .dv-catc-trio svg:nth-child(1), .dv-catc-trio svg:nth-child(3) { display: none; } .dv-catc-trio svg:nth-child(2) { width: 84px; height: 84px; } } @container (max-width: 299px) { .dv-cats { grid-template-columns: minmax(0, 1fr); } .dv-catc-li.is-feature, .dv-catc-li.is-last { grid-column: auto; } } /* ---- Shop by need ---- */ .dv-needs-wrap { container-type: inline-size; } .dv-needs { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .dv-needc { position: relative; border-radius: 24px; background: var(--wp--preset--color--oat); padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto 1fr; column-gap: 12px; align-content: start; } .dv-needc-tag { grid-column: 1; grid-row: 1; align-self: start; justify-self: start; display: inline-flex; white-space: nowrap; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; line-height: 1.4; } .dv-needc-art { grid-column: 2; grid-row: 1; width: 84px; height: 84px; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; } .dv-needc-q { grid-column: 1 / -1; margin: 10px 0 0 !important; font-family: var(--wp--preset--font-family--fredoka); font-weight: 600; font-size: 25px !important; line-height: 1.2 !important; } .dv-needc-desc { grid-column: 1 / -1; margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--wp--preset--color--slate); } .dv-needc-actions { grid-column: 1 / -1; align-self: end; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-top: 16px; } .dv-needc-shop { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--wp--preset--color--ink); color: var(--dv-on-ink, #FFFFFF) !important; font-weight: 800; font-size: 15px; text-decoration: none; } .dv-needc-shop:hover .dv-needc-shop-word { text-decoration: underline; text-underline-offset: 3px; } .dv-needc-guide { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 15px; color: var(--wp--preset--color--ink); } @container (min-width: 860px) and (max-width: 1139px) { .dv-needc { padding: 20px; } .dv-needc-tag { font-size: 12px; padding: 5px 10px; letter-spacing: .04em; } .dv-needc-art { width: 64px; height: 64px; border-radius: 18px; } .dv-needc-art svg { width: 54px; height: 54px; } .dv-needc-q { font-size: 22px !important; } } @container (max-width: 859px) { .dv-needs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .dv-needc:last-child:nth-child(odd) { grid-column: span 2; } .dv-needc { padding: 20px; } .dv-needc-q { font-size: 22px !important; } } /* Phones: one row per need; the whole row opens the products */ @container (max-width: 559px) { .dv-needs { grid-template-columns: minmax(0, 1fr); gap: 10px; } .dv-needc:last-child:nth-child(odd) { grid-column: auto; } .dv-needc { grid-template-columns: 60px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center; padding: 12px 14px; border-radius: 20px; } .dv-needc-art { grid-column: 1; grid-row: 1 / span 2; width: 60px; height: 60px; border-radius: 16px; } .dv-needc-art svg { width: 50px; height: 50px; } .dv-needc-tag { grid-column: 2; grid-row: 1; align-self: end; padding: 0; background: none; font-size: 12px; color: var(--wp--preset--color--slate); } .dv-needc-q { grid-column: 2; grid-row: 2; align-self: start; margin: 0 !important; font-size: 19px !important; } .dv-needc-desc, .dv-needc-guide { display: none; } .dv-needc-actions { grid-column: 3; grid-row: 1 / span 2; align-self: center; padding: 0; } .dv-needc-shop { position: static; width: 44px; min-height: 44px; padding: 0; justify-content: center; background: none; color: var(--wp--preset--color--ink) !important; } .dv-needc-shop svg { width: 22px; height: 22px; } .dv-needc-shop-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .dv-needc-shop::after { content: ""; position: absolute; inset: 0; border-radius: 20px; } .dv-needc-shop:focus-visible { outline: none; } .dv-needc-shop:focus-visible::after { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 2px; } .dv-needc:hover .dv-needc-q { text-decoration: underline; text-underline-offset: 3px; } } /* ---- Display settings: high contrast and dim ---- */ html[data-dv-colours="contrast"] :is(.dv-need-chip, .dv-promise, .dv-catc, .dv-catc-art, .dv-catc-trio, .dv-needc, .dv-needc-tag, .dv-needc-art, .dv-promise-icon, .dv-hero-pill) { border: 2px solid #000 !important; } html[data-dv-colours="contrast"] .dv-underline::after { background: #000; } html[data-dv-colours="contrast"] a:is(.dv-catc, .dv-need-chip, .dv-needc-shop):not(#dv-none) { text-decoration: none !important; } html[data-dv-colours="contrast"] .dv-catc .dv-catc-title, html[data-dv-colours="contrast"] .dv-need-chip { text-decoration: underline; text-underline-offset: 3px; } @container (max-width: 559px) { html[data-dv-colours="contrast"] .dv-needc-tag { border: 0 !important; } } html[data-dv-colours="dim"] .dv-catc-btn, html[data-dv-colours="dim"] .dv-needc-shop { background: var(--wp--preset--color--mint); color: #1C2230 !important; } @container (max-width: 559px) { html[data-dv-colours="dim"] .dv-catc-btn { background: none; color: var(--wp--preset--color--ink) !important; } html[data-dv-colours="dim"] .dv-needc-shop { background: none; color: var(--wp--preset--color--ink) !important; } } @media (prefers-reduced-motion: no-preference) { .dv-catc, .dv-need-chip { transition: box-shadow .15s ease; } } .dv-catc:hover { box-shadow: inset 0 0 0 2px var(--wp--preset--color--line); } @media print { .dv-hero-needs, .dv-promises { break-inside: avoid; } } /* v0.17.3 Legal tables with three columns: on phones each row becomes a small card. */ @media (max-width: 600px) { .dv-tstack { padding: 4px 18px; overflow: visible; } .dv-tstack table { font-size: 16px; } .dv-tstack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .dv-tstack tr { display: block; padding: 16px 0; border-bottom: 1px solid var(--wp--preset--color--line); } .dv-tstack tbody tr:last-child { border-bottom: 0; } .dv-tstack td { display: block; padding: 0; border: 0 !important; } .dv-tstack td + td { margin-top: 6px; } .dv-tstack td:first-child { font-weight: 800; font-size: 17px; } .dv-tstack td::before { display: block; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--wp--preset--color--slate); } .dv-tstack-collect td:nth-child(2)::before { content: "Examples"; } .dv-tstack-collect td:nth-child(3)::before { content: "Where it goes"; } .dv-tstack-share td:nth-child(3)::before { content: "Based in"; } .dv-tstack-basis td:nth-child(2)::before { content: "Lawful basis"; } }