/* Theme Name: Pro Audio Service Theme URI: https://www.proaudioservice.co.uk Description: Block theme for Pro Audio Service Ltd, with WooCommerce support. Version: 5.0.1 Requires at least: 7.0 Requires PHP: 8.1 Author: George Arnall Author URI: http://garnall.co.uk Text Domain: proaudioservice WC requires at least: 10.0 WC tested up to: 11.2 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html */ /* ========================================================================== What theme.json can't express: component and pattern styles, responsive rules and a few resets. Tokens come from theme.json (--wp--preset--*, --wp--custom--*); the short aliases below keep the rules readable. Per-block styles live in assets/css/blocks/. ========================================================================== */ :root { --accent: var(--wp--preset--color--primary); --accent-hover: var(--wp--preset--color--primary-hover); --accent-deep: var(--wp--preset--color--primary-deep); --accent-soft: var(--wp--preset--color--primary-soft); --glow: var(--wp--preset--color--signal); --navy: var(--wp--preset--color--navy); --navy-2: var(--wp--preset--color--navy-2); --navy-3: var(--wp--preset--color--navy-3); --paper: var(--wp--preset--color--base); --tint: var(--wp--preset--color--tint); --line: var(--wp--preset--color--line); --text: var(--wp--preset--color--contrast); --muted: var(--wp--preset--color--muted); --muted-light: var(--wp--preset--color--muted-light); --hero-lead: rgb(201 212 234); --input-border: rgb(201 211 227); --radius: var(--wp--custom--radius--base); --radius-sm: var(--wp--custom--radius--small); --shadow: var(--wp--preset--shadow--card); --shadow-lg: var(--wp--preset--shadow--lifted); --gutter: var(--wp--custom--gutter); --header-h: var(--wp--custom--header-height); --utility-h: var(--wp--custom--utility-height); --admin-bar: var(--wp-admin--admin-bar--height, 0px); } /* Base ------------------------------------------------------------------- */ html { scroll-padding-top: calc(var(--header-h) + var(--admin-bar) + 16px); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { -webkit-font-smoothing: antialiased; overflow-x: clip; } img { max-width: 100%; height: auto; } .wp-site-blocks > * + * { margin-block-start: 0; } :focus-visible { outline: 3px solid var(--glow); outline-offset: 3px; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } h1, h2, h3, h4, h5, h6 { margin-top: 0; } strong, b { font-weight: 650; } @media (max-width: 600px) { :root { --wp--preset--font-size--medium: 16px; } } /* Icons ------------------------------------------------------------------- className "pas-icon pas-icon-" draws the icon before the content; "pas-icon-end pas-icon-" draws it after (e.g. arrows on buttons). Icons are single-colour SVG masks from assets/icons/, so they take currentColor. The release build (bin/build) inlines them as data: URLs. On buttons the icon goes on the link inside the wrapper. */ .pas-icon-alert { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4 3 20h18L12 4z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 9.5V13M12 16.25v.25' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } .pas-icon-amp { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='2.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='7' cy='6.5' r='1' fill='%23000'/%3E%3Ccircle cx='10' cy='6.5' r='1' fill='%23000'/%3E%3Ccircle cx='13' cy='6.5' r='1' fill='%23000'/%3E%3Crect x='6.5' y='10' width='11' height='7.5' rx='1.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); } .pas-icon-arrow { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .pas-icon-bag { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8.5h14l-1 12H6l-1-12zM9 8.5v-2a3 3 0 0 1 6 0v2' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); } .pas-icon-bass { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='3' width='14' height='18' rx='2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='12' cy='7' r='1.5' fill='%23000'/%3E%3Ccircle cx='12' cy='14.25' r='3.25' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); } .pas-icon-calendar { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5' width='16' height='16' rx='2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } .pas-icon-check { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .pas-icon-chevron { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 6 6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .pas-icon-clock { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 7v5l3 2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } .pas-icon-info { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 11v6M12 7.5v.5' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } .pas-icon-keys { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M9 13v6M15 13v6' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M7.25 5h3.5v7.5a.75.75 0 0 1-.75.75h-2a.75.75 0 0 1-.75-.75zM13.25 5h3.5v7.5a.75.75 0 0 1-.75.75h-2a.75.75 0 0 1-.75-.75z' fill='%23000'/%3E%3C/svg%3E"); } .pas-icon-knob { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 12 8.82 8.82' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } .pas-icon-lock { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M8 10.5v-3a4 4 0 0 1 8 0v3' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); } .pas-icon-mail { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='m3 7 9 6 9-6' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); } .pas-icon-phone { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 3.5h2.3a1 1 0 0 1 .93.63l1.6 4a1 1 0 0 1-.4 1.22L9 10.5a11 11 0 0 0 4.5 4.5l1.15-1.93a1 1 0 0 1 1.22-.4l4 1.6a1 1 0 0 1 .63.93v2.3a3 3 0 0 1-3 3A17 17 0 0 1 3.5 6.5a3 3 0 0 1 3-3z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); } .pas-icon-pin { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='12' cy='10' r='2.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); } .pas-icon-plug { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3v4M15 3v4M6 7h12v4a6 6 0 0 1-12 0V7zM12 17v4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .pas-icon-plus { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } .pas-icon-rack { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3.5' width='18' height='17' rx='2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M3 12h18M11 8h6M11 16h6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='7' cy='8' r='1.25' fill='%23000'/%3E%3Ccircle cx='7' cy='16' r='1.25' fill='%23000'/%3E%3C/svg%3E"); } .pas-icon-search { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='m20 20-3.5-3.5' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } .pas-icon-shield { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 4 6v6c0 4.5 3.4 8.3 8 9 4.6-.7 8-4.5 8-9V6l-8-3z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .pas-icon-speaker { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%23000'/%3E%3C/svg%3E"); } .pas-icon-star { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.41 14.51 9.45 21.04 9.97 16.07 14.23 17.58 20.59 12 17.18 6.42 20.59 7.93 14.23 2.96 9.97 9.49 9.45z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); } .pas-icon-truck { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 17H4a1 1 0 0 1-1-1V6.5a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1V17M9 17h6M19 17h1a1 1 0 0 0 1-1v-3.5L18 9h-4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='7' cy='17' r='2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='17' cy='17' r='2' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); } .pas-icon-user { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.5' r='4' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M4 20.5a8 8 0 0 1 16 0' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } .pas-icon-valve { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 14.5V7a4 4 0 0 1 8 0v7.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Crect x='10.5' y='6.5' width='3' height='4.5' rx='.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Crect x='6.5' y='14.5' width='11' height='3.5' rx='1' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M9.5 19v2M12 19v2M14.5 19v2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } .pas-icon-wave { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h2l2-6 3 12 3-14 3 16 2-8h3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .pas-icon-wrench { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.15 12.45A1.5 1.5 0 0 0 9.52 10.94A5.4 5.4 0 0 1 18.82 5.87L14.61 6.99A2.27 2.27 0 0 0 15.78 11.38L20 10.25A5.4 5.4 0 0 1 13.06 14.48A1.5 1.5 0 0 0 11.55 14.85L6.83 19.58A1.7 1.7 0 0 1 4.42 17.17z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); } .pas-icon:not(.wp-block-button, .wp-block-group)::before, .wp-block-button.pas-icon > .wp-block-button__link::before, .pas-icon-end:not(.wp-block-button)::after, .wp-block-button.pas-icon-end > .wp-block-button__link::after { content: ""; display: inline-block; flex-shrink: 0; width: 1.1em; height: 1.1em; background: currentColor; -webkit-mask: var(--pas-icon) center / contain no-repeat; mask: var(--pas-icon) center / contain no-repeat; } p.pas-icon-end, li.pas-icon { display: flex; align-items: center; gap: .5em; } /* Paragraphs keep normal inline flow (they may contain links); the icon hangs in the left padding */ p.pas-icon { position: relative; padding-left: 1.6em; } p.pas-icon::before { position: absolute; left: 0; top: calc((1lh - 1.1em) / 2); } .wp-block-button.pas-icon-end > .wp-block-button__link::after { transition: transform .15s ease; } .wp-block-button.pas-icon-end > .wp-block-button__link:hover::after { transform: translateX(3px); } /* Stars, filled to --pas-rating out of 5 (inc/reviews-render.php) */ .pas-stars { --pas-fill: calc(var(--pas-rating, 5) / 5 * 100%); display: inline-block; width: max-content; letter-spacing: 2px; line-height: 1; background: linear-gradient(90deg, var(--wp--preset--color--star) var(--pas-fill), rgb(170 183 208 / .45) var(--pas-fill)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* The Google "G": the source of the rating and reviews */ .pas-google-g { display: inline-block; flex: none; width: 1em; height: 1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center / contain no-repeat; } /* Text styles ------------------------------------------------------------ */ .is-style-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; } .is-style-eyebrow:not(.has-text-color) { color: var(--accent-deep); } .is-style-eyebrow.pas-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: currentColor; box-shadow: 0 0 0 4px rgb(92 200 255 / .2); } .is-style-lead { font-size: clamp(19px, 1.7vw, 21px); line-height: 1.6; } /* "Browse all parts →": a paragraph whose only content is a link */ .pas-link-arrow a { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; color: var(--accent-deep); text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 2px; } .pas-link-arrow a::after { content: ""; width: 1.1em; height: 1.1em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .15s ease; } .pas-link-arrow a:hover { color: var(--accent-hover); } .pas-link-arrow a:hover::after { transform: translateX(3px); } /* Cards and panels (core/group block styles) ------------------------------ */ .is-style-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 2.4vw, 28px); } .is-style-card-shadow { background: var(--paper); border-radius: var(--radius); padding: clamp(20px, 2.4vw, 28px); box-shadow: var(--shadow); } .is-style-panel { background: var(--tint); border-radius: var(--radius); padding: clamp(20px, 2.6vw, 28px); } /* Badges (stock, order status) ------------------------------------------- */ .pas-badge { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12.5px; font-weight: 600; line-height: 1.4; padding: 4px 10px; border-radius: 999px; background: var(--tint); color: var(--muted); } .pas-badge--success { background: var(--wp--preset--color--success-soft); color: var(--wp--preset--color--success); } .pas-badge--warning { background: var(--wp--preset--color--warning-soft); color: var(--wp--preset--color--warning); } .pas-badge--error { background: var(--wp--preset--color--error-soft); color: var(--wp--preset--color--error); } .pas-badge--blue { background: var(--accent-soft); color: var(--accent-deep); } .pas-badge--success::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } /* Notices ---------------------------------------------------------------- */ .pas-notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-sm); font-size: 15.5px; border: 1px solid; } .pas-notice--info { background: var(--accent-soft); border-color: rgb(199 218 251); color: rgb(11 58 130); } .pas-notice--warning { background: var(--wp--preset--color--warning-soft); border-color: rgb(245 214 168); color: rgb(122 65 0); } /* Classic form controls (My Account, plugin forms, search) ---------------- */ :where(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], select, textarea):not(.wc-block-components-text-input input, .wc-block-components-form input) { box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--text); background: var(--paper); border: 1px solid var(--input-border); border-radius: var(--radius-sm); transition: border-color .15s ease, box-shadow .15s ease; } :where(textarea) { min-height: 120px; resize: vertical; line-height: 1.5; } :where(select):not([multiple]) { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23556178' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; } :where(input, select, textarea):hover { border-color: rgb(159 176 204); } :where(input, select, textarea):focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(11 92 213 / .18); } ::placeholder { color: rgb(138 149 168); opacity: 1; } :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent); width: 20px; height: 20px; } /* Section heads (patterns) ----------------------------------------------- */ .pas-section-head { max-width: 640px; } .pas-section-head > * { margin-block: 0; } .pas-section-head > * + * { margin-block-start: 12px; } .pas-section-head > p:not(.is-style-eyebrow) { font-size: 18px; } .pas-section-head--row { max-width: none; } /* ========================================================================== Header (parts/header.html) ========================================================================== */ .pas-site-header { position: sticky; z-index: 100; top: calc(var(--admin-bar) - var(--utility-h)); } @media (max-width: 600px) { .admin-bar .pas-site-header { top: 0; } } /* the admin bar scrolls away on phones */ .pas-utility { line-height: 1.4; font-size: 13.5px; } .pas-utility__inner { min-height: var(--utility-h); gap: 28px; } .pas-utility__inner > * { margin: 0; } .pas-utility .pas-icon::before { width: 1.05em; height: 1.05em; } .pas-utility a { color: var(--paper); text-decoration: none; } .pas-utility a:hover { color: var(--glow); } .pas-utility__rating { margin-left: auto !important; } .pas-utility__rating a { display: inline-flex; gap: 8px; align-items: center; } .pas-utility__rating .pas-stars { font-size: .95em; } .pas-header { position: relative; } .pas-utility + .pas-header { margin-block-start: 0 !important; } .pas-header__inner { min-height: var(--header-h); } .pas-header .pas-header__inner { gap: 20px; } /* past core's :root :where(.is-layout-flex) gap */ .pas-header__inner > * { margin-block: 0; } .pas-header__actions { gap: 4px; flex-shrink: 0; } .pas-header__actions > * { margin: 0; } /* Brand: the waveform mark is drawn from two SVG masks so it can take two colours */ .pas-brand { margin: 0; flex-shrink: 0; position: relative; } .pas-brand a { display: inline-block; color: inherit; text-decoration: none; white-space: nowrap; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; --mark: 38px; --frame: rgb(255 255 255 / .55); --wave: currentColor; position: relative; padding-left: calc(var(--mark) + 12px); line-height: var(--mark); } .pas-brand a::before, .pas-brand a::after { content: ""; position: absolute; left: 0; top: 50%; width: var(--mark); height: var(--mark); transform: translateY(-50%); } .pas-brand a::before { background: var(--frame); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='1.5' y='1.5' width='37' height='37' rx='7' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='1.5' y='1.5' width='37' height='37' rx='7' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E") center / contain no-repeat; } .pas-brand a::after { background: var(--wave); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M7 22 L11 22 L13.5 15 L16.5 29 L19.5 9 L22.5 31 L25.5 14 L28 24 L30 20 L33 20' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M7 22 L11 22 L13.5 15 L16.5 29 L19.5 9 L22.5 31 L25.5 14 L28 24 L30 20 L33 20' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } .pas-brand em { font-style: normal; font-weight: 500; opacity: .85; } .pas-brand a:hover { color: inherit; } /* On hover, assets/js/brand.js lays a live copy of the wave over the mask and bounces its peaks */ .pas-brand__wave { position: absolute; left: 0; top: 50%; width: var(--mark); height: var(--mark); transform: translateY(-50%); fill: none; stroke: var(--wave); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .pas-brand a:not(.is-live) .pas-brand__wave, .pas-brand a.is-live::after { opacity: 0; } /* Phone: number on wide screens, icon only below 1280px, in the menu overlay below 900px */ .pas-header-phone a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 8px 14px; margin: 0 4px; border-radius: 999px; background: rgb(255 255 255 / .12); color: inherit; font-weight: 600; font-size: 16px; text-decoration: none; } .pas-header-phone a::before { content: ""; width: 1.1em; height: 1.1em; flex-shrink: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 3.5h2.3a1 1 0 0 1 .93.63l1.6 4a1 1 0 0 1-.4 1.22L9 10.5a11 11 0 0 0 4.5 4.5l1.15-1.93a1 1 0 0 1 1.22-.4l4 1.6a1 1 0 0 1 .63.93v2.3a3 3 0 0 1-3 3A17 17 0 0 1 3.5 6.5a3 3 0 0 1 3-3z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 3.5h2.3a1 1 0 0 1 .93.63l1.6 4a1 1 0 0 1-.4 1.22L9 10.5a11 11 0 0 0 4.5 4.5l1.15-1.93a1 1 0 0 1 1.22-.4l4 1.6a1 1 0 0 1 .63.93v2.3a3 3 0 0 1-3 3A17 17 0 0 1 3.5 6.5a3 3 0 0 1 3-3z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } .pas-header-phone a:hover { background: rgb(255 255 255 / .2); color: inherit; } @media (max-width: 1280px) { .pas-header-phone a { width: 44px; height: 44px; padding: 0; margin: 0; justify-content: center; background: none; font-size: 0; } .pas-header-phone a::before { width: 22px; height: 22px; } .pas-header-phone a:hover { background: rgb(255 255 255 / .12); } } @media (max-width: 1000px) { .pas-header .pas-header__inner { gap: 12px; } /* room for the full menu down to 900px */ } @media (max-width: 900px) { :root { --wp--custom--header-height: 64px; } .pas-utility { display: none; } .pas-site-header { top: var(--admin-bar); } .pas-header .pas-header__inner { gap: 8px; } .pas-header .pas-header__actions { margin-left: auto; } /* basket beside the menu button, not spaced into the middle */ .pas-header-phone { display: none; } /* in the menu overlay instead */ } @media (max-width: 600px) { .pas-brand a { --mark: 34px; } .pas-checkout-header .pas-brand em { display: none; } } @media (max-width: 359px) { .pas-brand em { display: none; } /* "Service" fits beside the basket and menu down to 360px */ } /* ========================================================================== Footer (parts/footer.html) ========================================================================== */ .pas-footer { font-size: 15px; } .pas-footer a { color: inherit; text-decoration: none; } .pas-footer a:hover { color: var(--glow); } .pas-footer .pas-brand a { --frame: var(--paper); --wave: var(--glow); color: var(--paper); } .pas-footer .pas-brand a:hover { color: var(--paper); } .pas-footer__blurb { max-width: 320px; } .pas-footer__title { color: var(--paper); font-family: var(--wp--preset--font-family--body); font-size: 14px; font-weight: 600; letter-spacing: 0; margin-bottom: 14px; } .pas-footer__links { list-style: none; padding: 0; margin: 0; } .pas-footer__links li + li { margin-top: 8px; } .pas-footer__base { border-top: 1px solid rgb(255 255 255 / .08); font-size: 13.5px; } .pas-footer__base > * { margin: 0; } @media (max-width: 900px) { .pas-footer__grid { flex-wrap: wrap !important; gap: 40px !important; } .wp-block-columns.pas-footer__grid > .wp-block-column { flex-basis: calc(50% - 20px) !important; flex-grow: 0 !important; } .wp-block-columns.pas-footer__grid > .wp-block-column:first-child { flex-basis: 100% !important; } } @media (max-width: 600px) { .pas-footer__grid { gap: 28px !important; } } /* ========================================================================== Patterns: homepage (patterns/home-*.php) ========================================================================== */ /* Hero: the homepage hero and its oscilloscope live in assets/css/hero.css (front page only). The lead style is shared with the PAT and 404 heroes. */ .pas-hero__lead { font-size: clamp(17px, 1.5vw, 19px); color: var(--hero-lead); max-width: 560px; } /* Brand logo strip: the plugin's pas/brand-marquee block, in a full-width band */ .pas-brands { border-bottom: 1px solid var(--line); } /* Services grid (cards with a stretched link on the heading) -------------- */ .pas-services { gap: 16px; } .pas-service { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 92px 24px 26px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .pas-service > * { margin: 0 !important; } .pas-service:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgb(201 214 234); } .pas-service::before, .pas-service::after { content: ""; position: absolute; left: 24px; top: 26px; width: 56px; height: 56px; border-radius: 10px; } .pas-service::before { background: var(--accent-soft); } .pas-service::after { background: var(--accent); -webkit-mask: var(--pas-icon) center / 40px no-repeat; mask: var(--pas-icon) center / 40px no-repeat; } .pas-service h3 { font-size: 20px; } .pas-service h3 a { color: var(--navy); text-decoration: none; } .pas-service h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; } .pas-service h3 a:focus-visible { outline: 0; } .pas-service:has(a:focus-visible) { outline: 3px solid var(--glow); outline-offset: 3px; } .pas-service p { color: var(--muted); font-size: 15px; line-height: 1.55; } .pas-service p:not(.pas-service__more) { flex: 1; } .pas-service__more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--accent-deep) !important; } .pas-service__more::after { content: ""; width: 1.1em; height: 1.1em; background: currentColor; transition: transform .15s ease; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } .pas-service:hover .pas-service__more::after { transform: translateX(3px); } .pas-service--cta { background: var(--accent); border-color: var(--accent); justify-content: flex-end; padding-top: 26px; } .pas-service--cta::before, .pas-service--cta::after { display: none; } .pas-service--cta h3 { font-size: 24px; } .pas-service--cta h3 a, .pas-service--cta p, .pas-service--cta .pas-service__more { color: var(--paper) !important; } .pas-service--cta p:not(.pas-service__more) { flex: 0; opacity: .86; } .pas-service--cta:hover { background: var(--accent-hover); border-color: var(--accent-hover); } /* Process steps ------------------------------------------------------------ */ .pas-steps { gap: 20px; counter-reset: pas-step; } .pas-step { padding: 30px 28px; border-radius: var(--radius); background: var(--navy-2); border: 1px solid rgb(255 255 255 / .08); } .pas-step > * { margin: 0; } .pas-step__num { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 15px; color: var(--glow); display: inline-block; padding: 4px 10px; border-radius: 8px; background: rgb(92 200 255 / .12); } .pas-step h3 { font-size: 22px; margin: 18px 0 10px; color: var(--paper); } .pas-step p:not(.pas-step__num) { color: var(--muted-light); font-size: 16px; } /* Reviews: rating card + scroll-snap track (no JS; swipe or scroll) ------- */ .pas-reviews__head { gap: 24px; } .pas-rating-card { position: relative; display: flex; align-items: center; gap: 16px; background: var(--paper); padding: 16px 22px; border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .2s ease; } .pas-rating-card:hover { transform: translateY(-2px); } .pas-rating-card > * { margin: 0 !important; } .pas-rating-card__score { display: flex; align-items: center; gap: 12px; font-family: var(--wp--preset--font-family--display); font-size: 44px; font-weight: 700; line-height: 1; color: var(--navy); } .pas-rating-card__score .pas-google-g { width: 30px; height: 30px; } .pas-rating-card__count { font-size: 14px; color: var(--muted); line-height: 1.4; } .pas-rating-card__count .pas-stars { display: block; margin-bottom: 4px; font-size: 16px; } .pas-rating-card__count a { color: inherit; text-decoration: none; } .pas-rating-card__count a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .pas-carousel { display: grid !important; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 4px 4px 16px; margin-inline: -4px; scrollbar-width: thin; scrollbar-color: rgb(170 183 208 / .7) transparent; } .pas-carousel > * { margin: 0 !important; } .pas-review.wp-block-quote { scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; background: var(--paper); border: 0; border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); font-size: 16.5px; line-height: 1.6; } .pas-review.wp-block-quote { position: relative; } .pas-review > .pas-google-g { position: absolute; top: 24px; right: 24px; width: 20px; height: 20px; } .pas-review p { margin: 0; flex: 1; } .pas-review__more { white-space: nowrap; font-size: 14.5px; } .pas-review .pas-review__author { display: flex; align-items: center; gap: 12px; font-size: 13px; font-style: normal; color: var(--muted); } .pas-review__who { display: flex; flex-direction: column; min-width: 0; } .pas-review__who strong { font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pas-review__who a { color: inherit; text-decoration: none; } .pas-review__who a:hover { color: var(--accent); text-decoration: underline; } /* Initials under the photo: they show when there is no photo or it fails to load */ .pas-avatar { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--pas-avatar, var(--accent)); color: var(--paper); font-size: 15px; font-weight: 600; letter-spacing: .02em; } .pas-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Shop teaser: category tiles -------------------------------------------- */ .pas-cats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .pas-cats li { margin: 0; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; border-radius: var(--radius-sm); background: var(--tint); font-weight: 600; font-size: 15px; line-height: 1.3; transition: background .2s ease, transform .2s ease; } .pas-cats li::before { width: 26px !important; height: 26px !important; color: var(--accent); } .pas-cats li:hover { background: var(--accent-soft); transform: translateY(-2px); } .pas-cats a { color: var(--text); text-decoration: none; } .pas-cats a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* "Got a fault?" contact band --------------------------------------------- */ .pas-contact { position: relative; overflow: hidden; } .pas-contact::before { content: ""; position: absolute; right: -10%; top: -50%; width: 60%; height: 200%; background: radial-gradient(closest-side, rgb(92 200 255 / .25), transparent); pointer-events: none; } .pas-contact > * { position: relative; z-index: 1; } .pas-contact h2 { color: inherit; margin: 0 0 14px; } .pas-contact__copy > p { opacity: .9; font-size: 18px; margin: 0; } .pas-contact__copy .wp-block-buttons { margin-top: 32px; } .pas-contact__details { background: var(--paper); color: var(--text); border-radius: 18px; padding: 8px 28px; box-shadow: var(--shadow-lg); } .pas-detail { position: relative; padding: 22px 0 22px 60px; min-height: 88px; } .pas-detail + .pas-detail { border-top: 1px solid var(--line); margin-top: 0 !important; } .pas-detail > * { margin: 0 !important; } .pas-detail::before, .pas-detail::after { content: ""; position: absolute; left: 0; top: 22px; width: 44px; height: 44px; border-radius: 12px; } .pas-detail::before { background: var(--accent-soft); } .pas-detail::after { background: var(--accent); -webkit-mask: var(--pas-icon) center / 22px no-repeat; mask: var(--pas-icon) center / 22px no-repeat; } .pas-detail__label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 4px !important; } .pas-detail__value { font-size: 16.5px; font-weight: 500; line-height: 1.5; } .pas-detail__value a { font-weight: 600; color: var(--accent-deep); text-decoration: none; } /* ========================================================================== Patterns: content pages (patterns/page-*.php, templates/page.html) ========================================================================== */ /* Page header band */ .pas-page-hero { position: relative; overflow: hidden; } .pas-page-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgb(255 255 255 / .04) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .04) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%); mask-image: linear-gradient(180deg, #000, transparent 90%); } .pas-page-hero > * { position: relative; } .pas-page-hero h1 { color: inherit; margin: 12px 0 14px; } .pas-page-hero .wp-block-post-excerpt { color: var(--hero-lead); max-width: 640px; margin: 0; } .pas-page-hero .wp-block-post-excerpt__excerpt { margin: 0; } .pas-page-hero .wp-block-buttons { margin-top: 26px; } .pas-page-hero .is-style-eyebrow { margin: 18px 0 0; } .pas-page-hero .wp-block-group > * { margin-block: 0; } .pas-page-hero .wp-block-group > .wp-block-buttons { margin-top: 26px; } .pas-page-hero .wp-block-group > h1 { margin: 12px 0 14px; } .pas-page-hero .pas-post-date { color: var(--muted-light); font-size: 15px; } /* Blog post (templates/single.html) */ .pas-post-image img { border-radius: var(--radius); } /* Breadcrumbs (woocommerce/breadcrumbs) */ .woocommerce-breadcrumb, .wc-block-breadcrumbs { font-size: 14px; color: var(--muted); } /* WooCommerce's classic CSS gave this 1em below; it isn't loaded on content pages and archives (inc/performance.php) */ .wc-block-breadcrumbs .woocommerce-breadcrumb { margin: 0 0 1em; } .woocommerce-breadcrumb a, .wc-block-breadcrumbs a { color: var(--accent-deep); text-decoration: none; } .woocommerce-breadcrumb a:hover, .wc-block-breadcrumbs a:hover { text-decoration: underline; } .pas-page-hero .woocommerce-breadcrumb, .pas-page-hero .woocommerce-breadcrumb a, .pas-page-hero .wc-block-breadcrumbs, .pas-page-hero .wc-block-breadcrumbs a { color: var(--muted-light); } .pas-page-hero .woocommerce-breadcrumb a:hover, .pas-page-hero .wc-block-breadcrumbs a:hover { color: var(--paper); } /* Long-form content (core/post-content with className pas-prose) */ .pas-prose { font-size: 17.5px; line-height: 1.7; } .pas-prose > * { margin-block: 0; } .pas-prose > * + * { margin-block-start: 1.1em; } .pas-prose > :first-child { margin-top: 0; } .pas-prose h2 { font-size: clamp(26px, 2.8vw, 34px); margin-block-start: 1.8em; clear: both; } .pas-prose h3 { font-size: 22px; margin-block-start: 1.5em; } .pas-prose h2 + *, .pas-prose h3 + * { margin-block-start: .6em; } .pas-prose a:not(.wp-element-button) { text-decoration-color: rgb(11 92 213 / .35); text-underline-offset: 3px; } .pas-prose a:not(.wp-element-button):hover { text-decoration-color: currentColor; } .pas-prose ul:not([class*="is-style-"]), .pas-prose ol { padding-left: 1.3em; } .pas-prose ul li::marker { color: var(--accent); } .pas-prose li + li { margin-top: .4em; } .pas-prose .wp-block-image img { border-radius: var(--radius-sm); } .pas-prose .alignright { float: right; width: min(42%, 300px); margin: .3em 0 1em 28px; } .pas-prose .alignleft { float: left; width: min(42%, 300px); margin: .3em 28px 1em 0; } .pas-prose::after { content: ""; display: table; clear: both; } @media (max-width: 600px) { .pas-prose { font-size: 16.5px; } .pas-prose .alignright, .pas-prose .alignleft { float: none; width: auto; margin: 1.4em 0; } } /* Inline quote CTA (pattern pas/quote-cta) */ .pas-cta-inline { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 28px; align-items: center; border-radius: var(--radius); padding: clamp(24px, 3vw, 32px); } .pas-cta-inline::before { content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; background: radial-gradient(closest-side, rgb(92 200 255 / .22), transparent); pointer-events: none; } .pas-cta-inline > * { position: relative; z-index: 1; margin: 0 !important; } .pas-cta-inline h3 { font-size: 23px; margin: 0 0 6px; color: var(--paper); } .pas-cta-inline p { color: var(--hero-lead); font-size: 16px; line-height: 1.55; margin: 0; } .pas-cta-inline .wp-block-buttons { flex-direction: column; align-items: stretch; gap: 10px; } .pas-cta-inline__copy > * { margin: 0; } @media (max-width: 600px) { .pas-cta-inline { grid-template-columns: 1fr; } } /* ========================================================================== Responsive: patterns ========================================================================== */ @media (max-width: 1100px) { .pas-services { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .pas-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pas-carousel { grid-auto-columns: calc((100% - 20px) / 2); } } @media (max-width: 900px) { .wp-block-columns.pas-contact__inner { flex-wrap: wrap !important; } .wp-block-columns.pas-contact__inner > .wp-block-column { flex-basis: 100% !important; } .wp-block-columns.pas-contact__inner { gap: 36px !important; } .pas-steps { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px; } .pas-step { padding: 24px 20px; } } @media (max-width: 600px) { .pas-contact .wp-block-buttons > .wp-block-button { flex: 1 1 100%; } .pas-contact .wp-block-button__link { width: 100%; } .pas-services { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; } .pas-service { padding: 18px 18px 18px 60px; gap: 6px; } .pas-service::before, .pas-service::after { left: 18px; top: 18px; width: 30px; height: 30px; border-radius: 8px; } .pas-service::after { -webkit-mask-size: 22px; mask-size: 22px; } .pas-service h3 { font-size: 18px; min-height: 30px; display: flex; align-items: center; } .pas-service__more { display: none !important; } .pas-service--cta { padding-left: 18px; } .pas-service--cta .pas-service__more { display: inline-flex !important; } .pas-service--cta h3 { font-size: 20px; } .pas-steps { grid-template-columns: minmax(0, 1fr) !important; } .pas-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pas-cats li { flex-direction: row; align-items: center; padding: 14px; font-size: 14.5px; } .pas-cats li::before { width: 22px !important; height: 22px !important; } .pas-carousel { grid-auto-columns: 86%; gap: 14px; } .pas-contact__details { padding: 4px 20px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* Site Editor: no sticky offset, and no gaps between template-level blocks */ .editor-styles-wrapper .pas-site-header { position: relative; top: auto; } .editor-styles-wrapper .is-root-container > * + * { margin-block-start: 0; } /* ========================================================================== Quick quote (templates/page-quick-quote.html): guided, narrow, centred ========================================================================== */ .pas-qq { background: linear-gradient(180deg, var(--tint) 0, var(--tint) 260px, var(--paper) 260px); } .pas-qq__head { text-align: center; } .pas-qq__head > * { margin-block: 0; } .pas-qq__head h1 { margin: 10px 0 12px; } .pas-qq__head .woocommerce-breadcrumb, .pas-qq__head .wc-block-breadcrumbs { justify-content: center; text-align: center; } .pas-qq__lead { color: var(--muted); font-size: 17.5px; max-width: 54ch; margin-inline: auto !important; } .pas-qq > * + * { margin-block-start: 28px; } .pas-reassure { gap: 24px; } .pas-reassure__item { position: relative; padding-left: 34px; font-size: 14.5px; color: var(--muted); line-height: 1.5; } .pas-reassure__item::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; background: var(--accent); -webkit-mask: var(--pas-icon) center / contain no-repeat; mask: var(--pas-icon) center / contain no-repeat; } .pas-reassure__item > * { margin: 0 !important; } .pas-reassure__item strong { color: var(--text); font-size: 15px; } .pas-qq .wp-block-quote.is-style-review { margin-block: 36px 0; } @media (max-width: 720px) { .pas-reassure { grid-template-columns: minmax(0, 1fr) !important; gap: 14px; } } @media (max-width: 600px) { .pas-qq { background: linear-gradient(180deg, var(--tint) 0, var(--tint) 220px, var(--paper) 220px); } } /* ========================================================================== PAT testing (templates/page-pat-testing.html): instant quote in the hero ========================================================================== */ .pas-pat-hero__copy > * { margin-block: 0; } .pas-pat-hero__copy h1 { margin: 12px 0 14px; } .pas-pat-hero .is-style-checks { margin-top: 26px; color: rgb(219 228 245); font-size: 16px; } .pas-checks-two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 16px; } .pas-pat-hero__foot { margin-top: 14px !important; font-size: 13.5px; color: var(--muted-light); align-items: flex-start !important; } .pas-pat-hero__foot::before { color: var(--glow); margin-top: 2px; } .pas-pat-hero__foot a { color: var(--paper); font-weight: 600; } @media (max-width: 900px) { .wp-block-columns.pas-pat-hero__grid { flex-wrap: wrap !important; } .wp-block-columns.pas-pat-hero__grid > .wp-block-column { flex-basis: 100% !important; } } @media (max-width: 600px) { .pas-checks-two { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== Shop (templates/archive-product.html etc., pattern shop-catalog) ========================================================================== */ .pas-shop-hero { border-bottom: 1px solid var(--line); } .pas-shop-hero__inner { gap: 20px 32px; } .pas-shop-hero__copy > * { margin-block: 0; } .pas-shop-hero h1 { font-size: clamp(32px, 3.6vw, 44px); margin: 10px 0 8px; } .pas-shop-hero .wp-block-term-description { color: var(--muted); max-width: 640px; } .pas-shop-hero .wp-block-term-description p { margin: 0; } .pas-psearch { flex: 0 1 460px; margin: 0; } .pas-psearch .wp-block-search__inside-wrapper { height: 56px; padding: 5px 5px 5px 46px; align-items: center; border-radius: 999px; border: 1px solid var(--input-border); background: var(--paper); box-shadow: var(--shadow); position: relative; } .pas-psearch .wp-block-search__inside-wrapper::before { content: ""; position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); background: var(--muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='m20 20-3.5-3.5' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='m20 20-3.5-3.5' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; } .pas-psearch .wp-block-search__inside-wrapper:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(11 92 213 / .18); } .pas-psearch .wp-block-search__input { border: 0; box-shadow: none; min-height: 0; padding: 0; background: none; font-size: 16px; } .pas-psearch .wp-block-search__input:focus { box-shadow: none; outline: 0; } .pas-psearch .wp-block-search__button { align-self: center; height: 44px; min-height: 44px; margin: 0; border-radius: 999px; padding: 0 22px; } .pas-shop-layout { align-items: flex-start; } .pas-shop-main { min-width: 0; } .pas-toolbar { gap: 12px 16px; margin-bottom: 20px; align-items: center; } .pas-toolbar > * { margin: 0 !important; } .pas-toolbar .woocommerce-result-count { color: var(--muted); font-size: 15px; margin: 0; } .pas-toolbar .woocommerce-ordering { margin: 0; } .pas-toolbar .woocommerce-ordering select { min-height: 44px; padding: 8px 40px 8px 16px; border-radius: 999px; font-size: 15px; width: auto; } /* Can't find the part? band */ .pas-ask { position: relative; overflow: hidden; } .pas-ask::before { content: ""; position: absolute; right: -10%; top: -60%; width: 55%; height: 220%; background: radial-gradient(closest-side, rgb(11 92 213 / .45), transparent); pointer-events: none; } .pas-ask > * { position: relative; } .pas-ask h2 { font-size: clamp(30px, 3.6vw, 42px); margin: 10px 0 12px; } .pas-ask__copy > * { margin-block: 0; } .pas-ask__copy > p:not(.is-style-eyebrow) { color: var(--hero-lead); font-size: 18px; max-width: 540px; } .pas-ask__hours { margin: 12px 0 0 !important; text-align: right; color: var(--muted-light); font-size: 14.5px; } .pas-ask__hours.pas-icon { padding-left: 0; } .pas-ask__hours.pas-icon::before { position: static; display: inline-block; vertical-align: -3px; margin-right: 8px; } @media (max-width: 900px) { .pas-shop-layout { flex-direction: column; gap: 0 !important; } .pas-shop-layout > .wp-block-column { flex-basis: auto !important; width: 100%; } .pas-shop-filters { margin-bottom: 12px; } .wp-block-columns.pas-ask__inner { flex-wrap: wrap !important; gap: 28px !important; } .wp-block-columns.pas-ask__inner > .wp-block-column { flex-basis: 100% !important; } .pas-ask__actions .wp-block-buttons { justify-content: flex-start; } .pas-ask__hours { text-align: left; } .pas-psearch { flex-basis: 100%; } } @media (max-width: 640px) { .pas-shop-hero { padding-top: 20px !important; padding-bottom: 24px !important; } .pas-shop-body { padding-top: 20px !important; padding-bottom: 56px !important; } .pas-toolbar .woocommerce-result-count { order: 3; flex-basis: 100%; font-size: 14.5px; } .pas-toolbar .wp-block-woocommerce-catalog-sorting, .pas-toolbar .woocommerce-ordering, .pas-toolbar select { width: 100%; } .pas-psearch .wp-block-search__button { padding: 0 16px; } } /* ========================================================================== Single product (templates/single-product.html) ========================================================================== */ .pas-pp__gallery { min-width: 0; } .pas-pp__gallery .woocommerce-product-gallery { margin: 0 !important; } /* WooCommerce adds 2em below */ /* The frame goes on what's visible: the slider's viewport, or the wrapper when there's one image (no slider) */ .pas-pp__gallery .flex-viewport, .pas-pp__gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--tint); } .pas-pp__gallery .flex-control-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; } .pas-pp__gallery .flex-control-thumbs li { width: 76px !important; } /* WooCommerce sets 25% */ .pas-pp__gallery .flex-control-thumbs img { border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; opacity: .75; } .pas-pp__gallery .flex-control-thumbs img.flex-active, .pas-pp__gallery .flex-control-thumbs img:hover { border-color: var(--accent); opacity: 1; } .pas-pp__gallery .woocommerce-product-gallery__trigger { top: 12px; right: 12px; background: var(--paper); border-radius: 999px; box-shadow: var(--shadow); } .pas-buybox > * { margin-block: 0; } .pas-buybox > * + * { margin-block-start: 14px; } .pas-buybox__cats { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .pas-buybox__cats a { color: var(--accent-deep); text-decoration: none; } .pas-buybox__title { font-size: clamp(26px, 3vw, 36px) !important; line-height: 1.15; margin-top: 8px !important; } .pas-partno { display: inline-flex; align-items: baseline; gap: 10px; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--tint); border: 1px solid var(--line); } .pas-partno strong, .pas-partno .sku { font-size: 20px !important; } .pas-buybox__price .wc-block-components-product-price { font-size: clamp(28px, 3vw, 34px); color: var(--navy); } .pas-buybox__price .woocommerce-price-suffix { font-family: var(--wp--preset--font-family--body); font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 6px; } .pas-buybox__stock .stock, .pas-buybox__stock { font-size: 15px; font-weight: 600; } .wc-block-components-product-stock-indicator--in-stock { color: var(--wp--preset--color--success); } .wc-block-components-product-stock-indicator--available-on-backorder { color: var(--wp--preset--color--warning); } .wc-block-components-product-stock-indicator--out-of-stock { color: var(--wp--preset--color--error); } .pas-buybox__summary { color: var(--muted); font-size: 16px; } /* Add to basket row (woocommerce/add-to-cart-form, stepper quantity) */ .pas-buy-row form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 6px 0 0; } .pas-buy-row form.cart:not(.variations_form), .pas-buy-row .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .pas-buy-row .quantity { display: inline-flex; align-items: center; height: 56px; border: 1px solid var(--input-border); border-radius: 999px; background: var(--paper); overflow: hidden; margin: 0 !important; } .pas-buy-row .quantity input.qty { width: 48px; min-height: 0; height: 100%; border: 0; text-align: center; padding: 0; font-weight: 600; font-size: 16px; box-shadow: none; -moz-appearance: textfield; background: none; } .pas-buy-row .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; } .pas-buy-row .quantity .wc-block-components-quantity-selector__button, .pas-buy-row .quantity button { width: 44px; height: 100%; border: 0; background: none; color: var(--accent-deep); font-size: 20px; cursor: pointer; opacity: 1; } .pas-buy-row .quantity button:hover { background: var(--accent-soft); } .pas-buy-row .single_add_to_cart_button { flex: 1; min-height: 56px; padding: 0 28px; border-radius: 999px; font-size: 17px; font-weight: 600; background: var(--accent) !important; color: #fff !important; border: 0; box-shadow: 0 8px 24px -8px rgb(11 92 213 / .7); } .pas-buy-row .single_add_to_cart_button:hover { background: var(--accent-hover) !important; } .pas-buy-row table.variations { width: 100%; border: 0; margin: 0 !important; } /* the form's gap spaces it */ .pas-buy-row .single_variation_wrap { flex-basis: 100%; } /* the form is a flex row: take the full width like the table above */ .pas-buy-row .single_variation { margin-bottom: 12px; } .pas-buy-row .single_variation .stock { margin: 0; } .pas-buy-row table.variations th, .pas-buy-row table.variations td { display: block; padding: 0; border: 0; text-align: left; } .pas-buy-row table.variations label { font-size: 14.5px; font-weight: 600; } .pas-buy-row table.variations select { margin: 6px 0 0; } /* "Clear" sits at the end of the label row rather than on a line of its own (it's hidden until an option is chosen) */ .pas-buy-row table.variations tr { position: relative; } .pas-buy-row .reset_variations { position: absolute; top: 0; right: 0; font-size: 14px; } .pas-buy-row .woocommerce-variation-price .price { font-family: var(--wp--preset--font-family--display); font-size: 22px; font-weight: 700; color: var(--navy); } .pas-buy-row .stock { font-weight: 600; font-size: 15px; } .pas-buy-row .stock.in-stock { color: var(--wp--preset--color--success); } .pas-buy-row .stock.available-on-backorder { color: var(--wp--preset--color--warning); } /* Delivery and help lines */ .pas-delivery { border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 18px; margin-top: 22px !important; } .pas-delivery__item { position: relative; padding: 14px 0 14px 36px; font-size: 14.5px; color: var(--muted); line-height: 1.5; } .pas-delivery__item + .pas-delivery__item { border-top: 1px solid var(--line); } .pas-delivery__item > * { margin: 0; } .pas-delivery__item strong { color: var(--text); font-size: 15px; } .pas-delivery__item a { font-weight: 600; } .pas-delivery__item::before { content: ""; position: absolute; left: 0; top: 16px; width: 22px; height: 22px; background: var(--accent); -webkit-mask: var(--pas-icon) center / contain no-repeat; mask: var(--pas-icon) center / contain no-repeat; } /* Description / additional information tabs (woocommerce/product-details) */ .pas-pdetails .woocommerce-tabs { border-top: 1px solid var(--line); } .pas-pdetails .wc-tabs { display: flex; gap: 4px; padding: 0; margin: 0 0 28px; list-style: none; border-bottom: 1px solid var(--line); overflow-x: auto; } .pas-pdetails .wc-tabs li { margin: 0; border: 0; background: none; } .pas-pdetails .wc-tabs li a { display: block; padding: 16px 18px; font-weight: 600; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; } .pas-pdetails .wc-tabs li.active a { color: var(--navy); border-bottom-color: var(--accent); } .pas-pdetails .woocommerce-Tabs-panel { max-width: 760px; font-size: 16.5px; line-height: 1.7; } .pas-pdetails .woocommerce-Tabs-panel > h2:first-child { display: none; } .pas-pdetails .shop_attributes { width: 100%; border-collapse: collapse; } .pas-pdetails .shop_attributes th, .pas-pdetails .shop_attributes td { text-align: left; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; } .pas-pdetails .shop_attributes th { width: 34%; font-weight: 600; } .pas-pdetails .shop_attributes td p { margin: 0; } @media (max-width: 900px) { .wp-block-columns.pas-pp { flex-wrap: wrap !important; row-gap: 0; } .wp-block-columns.pas-pp > .wp-block-column { flex-basis: 100% !important; } .pas-pp__gallery { max-width: 560px; } /* Title, then the photo, then part number, price, stock and the basket button, then the rest: the buy box's blocks join the gallery as items of the columns row so they can be ordered around it. The categories line repeats the breadcrumb. */ .wp-block-columns.pas-pp > .pas-buybox { display: contents; } .pas-buybox > * { order: 4; flex-basis: 100%; } .pas-buybox > .pas-buybox__title { order: 0; margin-top: 0 !important; } .wp-block-columns.pas-pp > .pas-pp__gallery { order: 1; margin-top: 16px; } .pas-buybox > .pas-partno, .pas-buybox > .pas-buybox__price, .pas-buybox > .pas-buybox__stock { order: 2; } .pas-buybox > .pas-partno { margin-top: 16px !important; } .pas-buybox > .pas-buybox__stock { margin-top: 4px !important; } .pas-buybox > .pas-buy-row { order: 3; } .pas-buybox__cats { display: none; } /* A shorter photo, and a single row of small thumbnails */ .pas-pp__gallery .woocommerce-product-gallery__image a { display: block; aspect-ratio: 4 / 3; } .pas-pp__gallery .woocommerce-product-gallery__image img { width: 100%; height: 100% !important; object-fit: contain; } .pas-pp__gallery .woocommerce-product-gallery__image--placeholder img { aspect-ratio: 4 / 3; object-fit: cover; } .pas-pp__gallery .flex-control-thumbs { flex-wrap: nowrap; gap: 8px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; } .pas-pp__gallery .flex-control-thumbs li { width: 52px !important; flex-shrink: 0; } /* Breadcrumb: just a link back to the part's category */ .pas-product-page .woocommerce-breadcrumb { font-size: 0; margin-bottom: 4px; } .pas-product-page .woocommerce-breadcrumb a { display: none; } .pas-product-page .woocommerce-breadcrumb a:last-of-type { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-size: 14.5px; font-weight: 600; } .pas-product-page .woocommerce-breadcrumb a:last-of-type::before { content: ""; width: 16px; height: 16px; background: currentColor; transform: rotate(180deg); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 6 6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 6 6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } } /* Stepper and button share a row down to the narrowest phones */ @media (max-width: 340px) { .pas-buy-row .single_add_to_cart_button { flex-basis: 100%; } } /* The stock indicator block above already shows simple-product stock */ .pas-buy-row > p.stock { display: none; } .pas-buy-row .quantity input.qty { box-sizing: border-box; height: 54px !important; padding: 0 !important; line-height: normal; margin: 0 !important; } .pas-pp__gallery .woocommerce-product-gallery { width: 100% !important; float: none !important; } .pas-buy-row .quantity .wc-block-components-quantity-selector__button { display: grid; place-items: center; line-height: 1; align-self: stretch; height: auto; } /* height: 100% collapsed to the glyph on variable products */ /* No stepper when a stock-managed product has 1 or fewer (often on backorder): a plain box for the number */ .pas-buy-row .quantity:not(.wc-block-components-quantity-selector) input.qty { width: 72px; } .pas-pdetails .wc-tabs::before, .pas-pdetails .wc-tabs::after, .pas-pdetails .wc-tabs li::before, .pas-pdetails .wc-tabs li::after { display: none !important; } .pas-pdetails .wc-tabs li { border: 0 !important; border-radius: 0 !important; padding: 0 !important; background: none !important; } /* ========================================================================== Distraction-free checkout (parts/checkout-header.html, checkout-footer.html) ========================================================================== */ .pas-checkout-header__inner { min-height: 72px; gap: 20px; } .pas-checkout-header__inner > * { margin: 0; } .pas-checkout-header .pas-brand a { color: var(--navy); --frame: rgb(11 92 213 / .45); --wave: var(--accent); } .pas-checkout-header .pas-brand em { color: var(--muted); opacity: 1; } .pas-checkout-header__secure { padding: 6px 12px 6px 32px !important; border-radius: 999px; background: var(--wp--preset--color--success-soft); color: var(--wp--preset--color--success); font-size: 13.5px; font-weight: 600; } .pas-checkout-header__secure.pas-icon::before { left: 12px; width: 15px; height: 15px; top: calc(50% - 7.5px); } .pas-checkout-header__actions { margin-left: auto !important; gap: 6px; } .pas-checkout-header__link a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--navy); text-decoration: none; } .pas-checkout-header__link a::before { content: ""; width: 18px; height: 18px; flex-shrink: 0; background: var(--accent); -webkit-mask: var(--pas-link-icon) center / contain no-repeat; mask: var(--pas-link-icon) center / contain no-repeat; } .pas-checkout-header__phone { --pas-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 3.5h2.3a1 1 0 0 1 .93.63l1.6 4a1 1 0 0 1-.4 1.22L9 10.5a11 11 0 0 0 4.5 4.5l1.15-1.93a1 1 0 0 1 1.22-.4l4 1.6a1 1 0 0 1 .63.93v2.3a3 3 0 0 1-3 3A17 17 0 0 1 3.5 6.5a3 3 0 0 1 3-3z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); } .pas-checkout-header__back { --pas-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8.5h14l-1 12H6l-1-12zM9 8.5v-2a3 3 0 0 1 6 0v2' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); } .pas-checkout-header__link a:hover { background: var(--tint); color: var(--navy); } .pas-checkout-footer { font-size: 14px; } .pas-checkout-footer p { margin: 0; } .pas-checkout-footer a { color: var(--accent-deep); } @media (max-width: 640px) { .pas-checkout-header__inner { min-height: 60px; gap: 10px; } .pas-checkout-header__secure { font-size: 0 !important; width: 36px; height: 36px; padding: 0 !important; } .pas-checkout-header__secure.pas-icon::before { left: 10px; width: 16px; height: 16px; top: 10px; } .pas-checkout-header__link a { font-size: 0; width: 44px; padding: 0; justify-content: center; } .pas-checkout-header__link a::before { width: 20px; height: 20px; } } /* ========================================================================== Order received (templates/order-confirmation.html) ========================================================================== */ .pas-oc-status { position: relative; padding-left: 76px; min-height: 56px; } .pas-oc-status::before { content: ""; position: absolute; left: 0; top: 6px; width: 56px; height: 56px; border-radius: 50%; background: var(--wp--preset--color--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 28px no-repeat; box-shadow: 0 0 0 8px var(--wp--preset--color--success-soft); } .pas-oc-status, .pas-oc-status p { font-family: var(--wp--preset--font-family--display); font-size: clamp(26px, 3.2vw, 40px) !important; font-weight: 700; line-height: 1.15; color: var(--navy); letter-spacing: -.02em; } .pas-oc-status h1, .pas-oc-status h2 { font-size: 13px !important; font-family: var(--wp--preset--font-family--body); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); margin: 0 0 8px; } .pas-oc-lead { display: block; margin-top: 10px; font-family: var(--wp--preset--font-family--body); font-size: clamp(16px, 1.4vw, 18px); font-weight: 400; line-height: 1.6; letter-spacing: 0; color: var(--muted); max-width: 620px; } .pas-oc-lead strong { color: var(--text); } .pas-oc-summary .wc-block-order-confirmation-summary-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .pas-oc-summary .wc-block-order-confirmation-summary-list-item { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; margin: 0; min-width: 0; border-left: 1px solid var(--line); margin-left: -1px; } .pas-oc-summary .wc-block-order-confirmation-summary-list-item__key { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .pas-oc-summary .wc-block-order-confirmation-summary-list-item__value { font-weight: 600; font-size: 16px; overflow-wrap: anywhere; } .pas-oc-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 2.4vw, 28px); } .pas-oc-stack { display: flex; flex-direction: column; gap: 16px; } .pas-oc-stack > * { margin: 0 !important; } .pas-oc-addrs { gap: 16px; } .pas-oc-addrs h3 { font-family: var(--wp--preset--font-family--body); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); margin: 0 0 10px; } .pas-oc-addrs address { font-style: normal; font-size: 15.5px; line-height: 1.65; border: 0 !important; padding: 0 !important; } .wc-block-order-confirmation-totals__table { width: 100%; border-collapse: collapse; font-size: 15.5px; border: 0 !important; } .wc-block-order-confirmation-totals__table th, .wc-block-order-confirmation-totals__table td { padding: 14px 0 !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; text-align: left; vertical-align: top; } .wc-block-order-confirmation-totals__table thead th { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 0 !important; } .wc-block-order-confirmation-totals__table th:last-child, .wc-block-order-confirmation-totals__table td:last-child { text-align: right; padding-left: 16px !important; } .wc-block-order-confirmation-totals__table tbody a { font-weight: 600; color: var(--text); text-decoration: none; } .wc-block-order-confirmation-totals__table tbody a:hover { color: var(--accent-deep); text-decoration: underline; } .wc-block-order-confirmation-totals__table tfoot th { font-weight: 500; color: var(--muted); } .wc-block-order-confirmation-totals__table tfoot tr:last-child th, .wc-block-order-confirmation-totals__table tfoot tr:last-child td { border-bottom: 0 !important; } .wc-block-order-confirmation-totals__table tfoot tr:last-child th { color: var(--text); font-weight: 700; font-size: 17px; } .wc-block-order-confirmation-totals__table tfoot tr:last-child td > .amount:first-child { font-family: var(--wp--preset--font-family--display); font-size: 24px; font-weight: 700; color: var(--navy); } .wc-block-order-confirmation-totals__table .wc-item-meta { list-style: none; padding: 0; margin: 4px 0 0; font-size: 13.5px; color: var(--muted); } .wc-block-order-confirmation-totals__table .wc-item-meta p { display: inline; margin: 0; } .pas-order-help { position: relative; padding-left: 60px !important; border-radius: var(--radius); font-size: 15px; } .pas-order-help > * { margin: 0; } .pas-order-help p + p { margin-top: 4px; color: var(--muted); } .pas-order-help::before { content: ""; position: absolute; left: 24px; top: 22px; width: 22px; height: 22px; background: var(--accent); -webkit-mask: var(--pas-icon) center / contain no-repeat; mask: var(--pas-icon) center / contain no-repeat; } @media (max-width: 900px) { .wp-block-columns.pas-oc-grid { flex-wrap: wrap !important; } .wp-block-columns.pas-oc-grid > .wp-block-column { flex-basis: 100% !important; } } @media (max-width: 600px) { .pas-oc-status { padding-left: 0; padding-top: 72px; } .pas-oc-addrs { grid-template-columns: minmax(0, 1fr) !important; } } /* ========================================================================== My Account (templates/page-my-account.html; classic [woocommerce_my_account]) ========================================================================== */ .pas-account .woocommerce { display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 clamp(28px, 3.5vw, 48px); align-items: start; } .pas-account .woocommerce::before, .pas-account .woocommerce::after { display: none; } .pas-account .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 1; width: auto; float: none; background: var(--tint); border-radius: var(--radius); padding: 10px; } .pas-account .woocommerce-MyAccount-content { grid-column: 2; grid-row: 1 / span 2; width: auto; float: none; min-width: 0; } .pas-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .pas-account .woocommerce-MyAccount-navigation li { margin: 0; } .pas-account .woocommerce-MyAccount-navigation a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 14px; border-radius: var(--radius-sm); font-weight: 500; font-size: 15.5px; color: var(--text); text-decoration: none; } .pas-account .woocommerce-MyAccount-navigation a::before { content: ""; width: 20px; height: 20px; flex-shrink: 0; background: currentColor; opacity: .7; -webkit-mask: var(--pas-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 6 6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")) center / contain no-repeat; mask: var(--pas-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 6 6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")) center / contain no-repeat; } .woocommerce-MyAccount-navigation-link--dashboard { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); } .woocommerce-MyAccount-navigation-link--orders { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8.5h14l-1 12H6l-1-12zM9 8.5v-2a3 3 0 0 1 6 0v2' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); } .woocommerce-MyAccount-navigation-link--downloads { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .woocommerce-MyAccount-navigation-link--edit-address { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='12' cy='10' r='2.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); } .woocommerce-MyAccount-navigation-link--edit-account { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.5' r='4' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M4 20.5a8 8 0 0 1 16 0' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } .woocommerce-MyAccount-navigation-link--customer-logout { --pas-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .pas-account .woocommerce-MyAccount-navigation a:hover { background: var(--paper); color: var(--accent-deep); } .pas-account .woocommerce-MyAccount-navigation .is-active a { background: var(--paper); color: var(--accent-deep); font-weight: 600; box-shadow: var(--shadow); } .pas-account .woocommerce-MyAccount-navigation .is-active a::before { opacity: 1; } .pas-account .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 6px !important; padding-top: 6px; border-top: 1px solid var(--line); } .pas-account .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--muted); } .pas-account-help { grid-column: 1; grid-row: 2; margin: 16px 0 0; padding: 4px 14px; font-size: 14px; color: var(--muted); line-height: 1.5; } .pas-account-help a { display: inline-flex; color: var(--accent-deep); font-weight: 600; text-decoration: none; white-space: nowrap; } /* WooCommerce classic buttons → theme pills */ .pas-account .woocommerce .button, .pas-account .woocommerce button.button, .woocommerce-page .pas-account .button { display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0; font: 600 14.5px/1 var(--wp--preset--font-family--body); white-space: nowrap; cursor: pointer; text-decoration: none; background: var(--paper); color: var(--accent-deep); box-shadow: inset 0 0 0 1.5px var(--accent); } .pas-account .woocommerce .button:hover { background: var(--accent-soft); color: var(--accent-deep); } .pas-account .woocommerce .button.pay, .pas-account .woocommerce button[type="submit"].button, .pas-account .woocommerce .woocommerce-Button { background: var(--accent); color: #fff; box-shadow: none; min-height: 48px; padding: 0 22px; font-size: 16px; } .pas-account .woocommerce .button.pay:hover, .pas-account .woocommerce button[type="submit"].button:hover { background: var(--accent-hover); color: #fff; } .pas-account .woocommerce .button.cancel { background: none; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); } /* Orders table */ .pas-account .woocommerce-orders-table { width: 100%; border-collapse: collapse; font-size: 15.5px; border: 0; } .pas-account .woocommerce-orders-table th, .pas-account .woocommerce-orders-table td { text-align: left; padding: 16px 14px; border: 0; border-bottom: 1px solid var(--line); vertical-align: middle; } .pas-account .woocommerce-orders-table thead th { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-block: 12px; } .pas-account .woocommerce-orders-table tbody tr:hover { background: var(--tint); } .pas-account .woocommerce-orders-table__cell-order-number a { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 17px; color: var(--accent-deep); text-decoration: none; } .pas-account .woocommerce-orders-table__cell-order-total { color: var(--muted); } .pas-account .woocommerce-orders-table__cell-order-total .amount { color: var(--navy); font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 17px; } .pas-account .woocommerce-orders-table__cell-order-actions { text-align: right !important; white-space: nowrap; } .pas-account .woocommerce-orders-table__cell-order-actions .button + .button { margin-left: 6px; } .pas-account .woocommerce-orders-table__cell-order-date { white-space: nowrap; } /* Status badges (orders table; mark.order-status on the order view) */ .pas-status, .pas-account mark.order-status { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 13px; font-weight: 600; line-height: 1; padding: 6px 11px; border-radius: 999px; background: var(--tint); color: var(--muted); } .pas-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .pas-status--processing { background: var(--accent-soft); color: var(--accent-deep); } .pas-status--pending, .pas-status--on-hold { background: var(--wp--preset--color--warning-soft); color: var(--wp--preset--color--warning); } .pas-status--completed { background: var(--wp--preset--color--success-soft); color: var(--wp--preset--color--success); } .pas-status--refunded, .pas-status--failed { background: var(--wp--preset--color--error-soft); color: var(--wp--preset--color--error); } .pas-account mark.order-number, .pas-account mark.order-date { background: none; color: var(--text); font-weight: 600; } /* View order */ .pas-account .woocommerce-order-details__title, .pas-account .woocommerce-column__title, .pas-account .woocommerce-OrderUpdates + h2 { font-size: 22px; margin: 28px 0 14px; } .pas-account .woocommerce-table--order-details { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--radius); font-size: 15.5px; } .pas-account .woocommerce-table--order-details th, .pas-account .woocommerce-table--order-details td { padding: 14px 16px; border: 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; } .pas-account .woocommerce-table--order-details td:last-child, .pas-account .woocommerce-table--order-details th:last-child { text-align: right; } .pas-account .woocommerce-table--order-details thead th { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .pas-account .woocommerce-table--order-details tfoot th { font-weight: 500; color: var(--muted); } .pas-account .woocommerce-table--order-details tfoot tr:last-child .amount { font-family: var(--wp--preset--font-family--display); font-size: 22px; font-weight: 700; color: var(--navy); } .pas-order-item { display: inline-flex; gap: 14px; align-items: center; } .pas-order-item a { font-weight: 600; color: var(--text); text-decoration: none; } .pas-order-thumb { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; background: var(--tint); border: 1px solid var(--line); flex-shrink: 0; } .pas-order-sku { display: block; font-size: 13px; color: var(--muted); } .pas-order-sku b { font-family: var(--wp--preset--font-family--display); color: var(--navy); } .pas-account .woocommerce-customer-details address { font-style: normal; line-height: 1.65; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; } .pas-account .woocommerce-columns--addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .pas-account .woocommerce-columns--addresses::before, .pas-account .woocommerce-columns--addresses::after { display: none; } .pas-account .woocommerce-columns--addresses .woocommerce-column { width: auto; float: none; } .pas-account .woocommerce-OrderUpdates { list-style: none; padding: 0; } /* Forms (login, addresses, account details) */ .pas-account .woocommerce form .form-row { margin: 0 0 16px; padding: 0; } .pas-account .woocommerce form .form-row label { font-size: 14.5px; font-weight: 600; margin-bottom: 6px; display: block; } .pas-account .woocommerce form .required { color: var(--wp--preset--color--error); text-decoration: none; } .pas-account .woocommerce-form-login, .pas-account .woocommerce-form-register, .pas-account .woocommerce-ResetPassword { max-width: 480px; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); margin: 0; } .pas-account .woocommerce > h2 { font-size: 26px; } .pas-account .woocommerce:has(.woocommerce-form-login) { display: block; } .pas-account .woocommerce-info, .pas-account .woocommerce-message, .pas-account .woocommerce-error { border: 1px solid rgb(199 218 251); background: var(--accent-soft); color: rgb(11 58 130); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 15.5px; list-style: none; } .pas-account .woocommerce-info::before, .pas-account .woocommerce-message::before { display: none; } .pas-account .woocommerce-error { background: var(--wp--preset--color--error-soft); border-color: rgb(243 194 194); color: rgb(140 28 28); } @media (max-width: 900px) { .pas-account .woocommerce { display: block; } .pas-account .woocommerce-MyAccount-navigation { margin-bottom: 24px; padding: 6px; } .pas-account .woocommerce-MyAccount-navigation ul { flex-direction: row; overflow-x: auto; scrollbar-width: none; } .pas-account .woocommerce-MyAccount-navigation li { flex-shrink: 0; } .pas-account .woocommerce-MyAccount-navigation a { white-space: nowrap; padding: 8px 14px; } .pas-account .woocommerce-MyAccount-navigation-link--customer-logout { margin: 0 !important; padding: 0; border: 0; } .pas-account-help { display: none; } } @media (max-width: 640px) { .pas-account .woocommerce-orders-table thead { display: none; } .pas-account .woocommerce-orders-table, .pas-account .woocommerce-orders-table tbody { display: block; } .pas-account .woocommerce-orders-table tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 16px 4px; border-bottom: 1px solid var(--line); } .pas-account .woocommerce-orders-table th, .pas-account .woocommerce-orders-table td { display: block; padding: 0; border: 0; text-align: left !important; } .pas-account .woocommerce-orders-table td::before { display: none; } .pas-account .woocommerce-orders-table__cell-order-actions { grid-column: 1 / -1; } .pas-account .woocommerce-columns--addresses { grid-template-columns: 1fr; } } .pas-account .woocommerce-MyAccount-navigation li { padding: 0 !important; margin: 0 !important; border: 0; list-style: none; } .pas-account .woocommerce-MyAccount-navigation li a { margin: 0 !important; } .pas-account .woocommerce .button { display: inline-flex !important; align-items: center !important; line-height: 1 !important; padding-block: 0 !important; } @media (max-width: 768px) { .pas-account .woocommerce-orders-table tbody th.woocommerce-orders-table__cell-order-number { display: block !important; } } @media (max-width: 768px) { .pas-account .woocommerce table.shop_table_responsive tr { display: grid !important; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 16px 4px; border-bottom: 1px solid var(--line); } .pas-account .woocommerce table.shop_table_responsive tr th, .pas-account .woocommerce table.shop_table_responsive tr td { display: block !important; padding: 0 !important; border: 0 !important; text-align: left !important; background: none !important; } .pas-account .woocommerce table.shop_table_responsive tr td::before { display: none !important; } .pas-account .woocommerce table.shop_table_responsive .woocommerce-orders-table__cell-order-status, .pas-account .woocommerce table.shop_table_responsive .woocommerce-orders-table__cell-order-total { text-align: right !important; } .pas-account .woocommerce table.shop_table_responsive .woocommerce-orders-table__cell-order-actions { grid-column: 1 / -1; margin-top: 6px; } } .pas-account .woocommerce-info .button, .pas-account .woocommerce-message .button { float: none; margin: 8px 0 0; min-height: 36px; } .pas-notice.wp-block-group { position: relative; display: block; padding-left: 46px; } .pas-notice.wp-block-group > * { margin: 0; } .pas-notice[class*="pas-icon-"]::before { content: ""; position: absolute; left: 16px; top: 16px; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--pas-icon) center / contain no-repeat; mask: var(--pas-icon) center / contain no-repeat; } .pas-oc-addrs .wc-block-order-confirmation-shipping-address, .pas-oc-addrs .wc-block-order-confirmation-billing-address { border: 0 !important; padding: 0 !important; } .wc-block-order-confirmation-totals__table .includes_tax { display: block; font-size: 13px; color: var(--muted); } /* Yoast FAQ block (FAQs page): matches the core/details FAQ look, always open */ .wp-block-yoast-faq-block { border-top: 1px solid var(--line); } .schema-faq-section { padding: 18px 0; border-bottom: 1px solid var(--line); } .schema-faq-question { display: block; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 19px; line-height: 1.3; letter-spacing: -.01em; color: var(--navy); } .schema-faq-answer { margin: 8px 0 0; color: var(--muted); font-size: 16.5px; }