/*test*/ /* ============== TEMP: hide header search bar sitewide — remove when done ============== */ .ps-header-search, .ps-header-icon-btn { display: none; } /* ============================================================= Optica Accessories — Mobile-First Stylesheet Target: WordPress / Beaver Builder Enqueue via: wp_enqueue_style() in functions.php or Beaver Builder > Global CSS / Custom Layout CSS ============================================================= */ /* ============== Design tokens ============== */ :root { --green-900: #0A4A25; --green-800: #0F824A; --green-700: #13A35A; --green-600: #2DB870; --green-500: #45C884; --green-100: #D4EFDF; --green-050: #EAF7EF; --orange: #E85D2C; --orange-dark: #D8551A; --orange-tint: #FCE6DA; --logo-luxe: #6B4E9E; --picture-perfect: #2E9E9C; --bespoke: #B0276E; --ink: #0C1F16; --text: #1F2B24; --text-muted: #566963; --paper: #F5F5F2; --cream: #F0EBDF; --white: #FFFFFF; --border: #E4E0D6; --border-strong: #B7B3A6; --radius: 14px; --radius-lg: 24px; --shadow: 0 22px 50px -18px rgba(12, 31, 22, 0.22); --container: 1280px; --ease: cubic-bezier(.2, .7, .2, 1); --dur: 220ms; /* Mobile nav */ --nav-h: 60px; --mobile-menu-width: 100vw; } /* ============== Reset ============== */ *, *::before, *::after { box-sizing: border-box; } a:focus, a:active, button:focus, button:active, input:focus, select:focus, textarea:focus, [tabindex]:focus { outline: none !important; box-shadow: none !important; } /* Block BB parent theme from adding border on button:hover */ button:not(.cw-chip):not(.cw-clear):hover, button:not(.cw-chip):not(.cw-clear):focus, button:not(.cw-chip):not(.cw-clear):active, input[type=button]:hover, input[type=submit]:hover { border: none !important; outline: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; } body { margin: 0; background: var(--paper); color: var(--text); font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* Parent bb-theme's base.min.css (Bootstrap) sets a global a:hover, a:focus { text-decoration: underline; } — this file loads after it (WP prints Additional CSS last in ), so this override wins the cascade and kills that inherited underline on every link, everywhere, regardless of what any other stylesheet does or forgets to set. */ a:hover, a:focus { text-decoration: none; } button { font: inherit; cursor: pointer; } /* ============== Typography ============== */ h1 { font-family: "Recursive", "Atkinson Hyperlegible Next", sans-serif; margin: 0; color: var(--green-700); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; font-size: clamp(2rem, 8vw, 3.9rem); font-variation-settings: "CASL" 0, "MONO" 0; } h1 em { font-style: normal; color: var(--ink); } h2, .section-head h2, .subcat-head h2 { font-family: "Recursive", "Atkinson Hyperlegible Next", system-ui, sans-serif; font-variation-settings: "CASL" 0, "MONO" 0; letter-spacing: -0.022em; } /* ============== Layout ============== */ .container { max-width: var(--container); margin: 0 auto; padding: 0 20px; } @media (min-width: 600px) { .container { padding: 0 28px; } } /* ============== Announcement bar ============== */ .bar { background: var(--green-050); border-bottom: 1px solid #DCEFE2; font-size: 16px !important; color: var(--green-800); } .bar-inner { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 28px; align-items: center; padding: 11px 28px; max-width: var(--container); margin: 0 auto; } .bar a { font-weight: 600; color: var(--green-800); } .bar a:hover { text-decoration: none; } .bar .welcome { font-weight: 700; color: var(--green-800); } .bar .trade-tag { font-weight: 700; color: var(--green-800); letter-spacing: 0.02em; } .bar .visit a { color: var(--green-700); } .bar .phone { white-space: nowrap; } .bar .new-badge { display: inline-flex; align-items: center; gap: 6px; } .bar .new-badge::after { content: "NEW"; background: var(--orange); color: #fff; font-size: 16px !important; font-weight: 700; letter-spacing: 0.08em; padding: 3px 7px; border-radius: 999px; } .bar a.account-btn { background: var(--green-700); color: #fff; padding: 5px 18px; border: 0; border-radius: 999px; font-weight: 700; font-size: 16px !important; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 4px 12px -4px rgba(15, 130, 74, 0.45); transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .bar a.account-btn svg { opacity: 1; color: #fff; } .bar a.account-btn:hover { background: var(--green-800); color: #fff; text-decoration: none; box-shadow: 0 6px 16px -4px rgba(15, 130, 74, 0.55); } /* ============== Main nav ============== */ .nav { background: var(--green-700); color: #fff; position: sticky; top: 0; z-index: 50; } .nav-inner { display: flex; align-items: center; gap: 24px; padding: 0 20px; height: var(--nav-h); max-width: var(--container); margin: 0 auto; } @media (min-width: 600px) { .nav-inner { padding: 0 28px; } } .logo { font-family: "Atkinson Hyperlegible Next", sans-serif; font-weight: 700; font-size: 26px; letter-spacing: 0.02em; color: #fff; flex-shrink: 0; } .logo sup { font-size: 16px !important; vertical-align: super; opacity: 0.85; } .menu { display: flex; align-items: center; gap: 22px; margin-left: 10px; font-weight: 600; font-size: 15px !important; } .menu a { display: inline-flex; align-items: center; gap: 5px; padding: 8px 0; } .menu a:hover, .menu a:focus, .menu a:active, .menu a:visited { color: #ffffff !important; } .menu a.no-caret::after { display: none; } .menu a.no-caret:hover { text-decoration: none !important; } .menu .menu-catalogue { gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); white-space: nowrap; transition: background 0.15s ease; } .menu .menu-catalogue:hover { background: rgba(255, 255, 255, 0.18); text-decoration: none !important; } .menu .new-pill { display: inline-block; background: var(--orange); color: #fff; font-size: 11px !important; font-weight: 800; padding: 2px 6px; border-radius: 999px; } .nav-right { margin-left: auto; display: flex; align-items: center; gap: 16px; font-weight: 600; } .book-call { background: #fff; color: var(--green-800); padding: 6px 20px; border-radius: 999px; font-weight: 700; font-size: 15px !important; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; } .book-call:hover { color: var(--green-800, #0F824A); text-decoration: none !important; } .cart { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 14px !important; } @media (max-width: 600px) { .cart { flex-direction: column; align-items: stretch; } .cart .qty-simple { width: 100%; justify-content: flex-start; } .cart .pdp-ctas { width: 100%; grid-template-columns: 1fr; } } /* ==================================================== Cart page — optica-cart custom template ==================================================== */ /* Reset .woocommerce so it doesn't fight our layout */ .woocommerce-cart .woocommerce { display: block !important; } /* Two-column page layout */ .optica-cart { display: flex; align-items: flex-start; gap: 20px; } .optica-cart-form { flex: 1 1 0; min-width: 0; max-width: calc(100% - 320px - 20px); } .optica-cart-sidebar { flex: 0 0 320px; width: 320px; } @media (max-width: 860px) { .optica-cart { flex-direction: column; } .optica-cart-form { max-width: 100%; } .optica-cart-sidebar { flex: 1 1 100%; width: 100%; } } /* Cart table */ .optica-cart-table { width: 100%; border: 1px solid #ddd; background: #fff; } /* Grid columns: product | price | qty | total | remove */ .oct-row { display: grid; grid-template-columns: 1fr 110px 110px 120px 48px; align-items: center; border-bottom: 1px solid #ebebeb; } .oct-body .oct-row:last-child { border-bottom: none; } /* Header row */ .oct-head { background: #f7f7f7; border-bottom: 2px solid #ddd; } .oct-head .oct-col { padding: 13px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #555; } .oct-head .oct-price { text-align: right; padding-right: 16px; } .oct-head .oct-qty { text-align: center; } .oct-head .oct-total { text-align: right; padding-right: 16px; } .oct-head .oct-remove { text-align: center; padding: 13px 0; } /* Body rows */ .oct-body .oct-row:hover { background: #fafafa; } .oct-body .oct-col { padding: 20px 16px; font-size: 14px; color: #444; line-height: 1.4; } .oct-body .oct-price { text-align: right; padding-right: 16px; white-space: nowrap; } .oct-body .oct-qty { text-align: center; padding-left: 8px; padding-right: 8px; } .oct-body .oct-total { text-align: right; padding-right: 16px; font-weight: 600; color: #222; white-space: nowrap; } .oct-body .oct-remove { text-align: center; padding: 20px 0; } /* Product cell: thumbnail + name/meta */ .oct-product { display: flex !important; align-items: center; gap: 16px; padding-left: 16px; padding-right: 12px; } .oct-head .oct-product { padding-left: 16px; } .oct-thumb { flex-shrink: 0; } .oct-thumb img { display: block; width: 72px; height: 72px; object-fit: cover; border: 1px solid #e0e0e0; } .oct-meta { min-width: 0; } .oct-name { display: block; font-weight: 600; font-size: 14px; line-height: 1.35; color: #222 !important; text-decoration: none !important; word-break: break-word; } .oct-name:hover { color: #13A35A !important; } .oct-meta dl, .oct-meta .variation { font-size: 12px; color: #888; margin: 5px 0 0; padding: 0; } .oct-meta dl dt, .oct-meta dl dd { display: inline; margin: 0; } .oct-meta dl dt::after { content: ": "; } .oct-meta dl dd::after { content: " "; } /* Qty input */ .oct-qty .quantity { display: flex; justify-content: center; align-items: center; } .oct-qty .qty { width: 64px; padding: 7px 6px; border: 1px solid #ccc; text-align: center; font-size: 14px; font-family: inherit; background: #fff; color: #333; } .oct-qty .custom-quantity-text { display: none !important; } .oct-qty .screen-reader-text { display: none !important; } /* Remove button */ .oct-remove a.remove { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #eaeaea; color: #999 !important; font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none !important; } .oct-remove a.remove:hover { background: #ffd5d5; color: #c00 !important; } /* Actions bar */ .optica-cart-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; background: #f7f7f7; border: 1px solid #ddd; border-top: 2px solid #ddd; } .optica-cart-actions .coupon { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; } .optica-cart-actions .input-text { padding: 8px 12px; border: 1px solid #ccc; font-size: 13px; font-family: inherit; width: 150px; background: #fff; color: #444; } .btn-ghost { padding: 8px 18px; font-size: 13px; font-family: inherit; font-weight: 600; cursor: pointer; border: 1px solid #ccc; background: #fff; color: #ffffff !important; text-decoration: none !important; line-height: 1.4; } .btn-ghost:hover { background: #13A35A !important; border: 1px solid #303030 !important; color: #ffffff !important; } .optica-cart-actions .update-cart { margin-left: auto; } /* Totals panel */ .optica-cart-sidebar .cart_totals { border: 1px solid #ddd; background: #fff; width: 100% !important; } .optica-cart-sidebar .cart_totals table.shop_table { padding-right: 15px; padding-left: 5px; } .optica-cart-sidebar .cart_totals h2 { margin: 0; padding: 13px 16px; background: #f7f7f7; border-bottom: 2px solid #ddd; font-size: 11px; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: 0.07em; } .optica-cart-sidebar .cart_totals table { width: 100%; border-collapse: collapse; } .optica-cart-sidebar .cart_totals table th, .optica-cart-sidebar .cart_totals table td { padding: 13px 16px; border-bottom: 1px solid #ebebeb; vertical-align: top; font-size: 14px; color: #444; } .optica-cart-sidebar .cart_totals table th { text-align: left; font-weight: 600; color: #555; width: 38%; background: none; white-space: nowrap; } .optica-cart-sidebar .cart_totals table td { text-align: right; } /* Shipping row — label left, amount stacks naturally */ .optica-cart-sidebar .cart_totals .woocommerce-shipping-totals td { text-align: left; } .optica-cart-sidebar .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; } .optica-cart-sidebar .woocommerce-shipping-methods li { font-size: 13px; color: #555; line-height: 1.5; margin-bottom: 4px; } .optica-cart-sidebar .woocommerce-shipping-methods label { font-weight: normal; cursor: default; } .optica-cart-sidebar .woocommerce-shipping-destination { font-size: 12px; color: #999; margin: 6px 0 0; } /* Order total row — heavier, no bottom border */ .optica-cart-sidebar .cart_totals .order-total th, .optica-cart-sidebar .cart_totals .order-total td { font-weight: 700; font-size: 16px; color: #111; border-bottom: none; padding-top: 16px; padding-bottom: 16px; } /* Checkout button */ .optica-cart-sidebar .wc-proceed-to-checkout { padding: 14px 16px; border-top: 2px solid #ddd; } .optica-cart-sidebar .checkout-button { display: block; width: 100%; padding: 12px; background: #E85D2C !important; color: #fff !important; text-align: center; font-weight: 700; font-size: 15px; text-decoration: none !important; border: none; cursor: pointer; font-family: inherit; } .optica-cart-sidebar .checkout-button:hover { background: #D8551A !important; } /* Empty cart state */ .optica-cart-empty { padding: 40px 20px; text-align: center; background: #fff; border: 1px solid #e3e3e3; } .optica-cart-empty .cart-empty { font-size: 16px; color: #555; margin: 0 0 20px; } .btn-return-shop { display: inline-block; padding: 10px 24px; background: #E85D2C; color: #fff !important; font-weight: 600; font-size: 14px; text-decoration: none !important; border-radius: 3px; } .btn-return-shop:hover { background: #D8551A; } /* Nav cart icon — stays white in all states */ a.nav-cart-btn, a.nav-cart-btn:hover, a.nav-cart-btn:focus, a.nav-cart-btn:active, a.nav-cart-btn:visited, .nav a.nav-cart-btn, .nav a.nav-cart-btn:hover { color: #fff !important; text-decoration: none !important; opacity: 1 !important; outline: none !important; box-shadow: none !important; background: transparent !important; display: inline-flex !important; align-items: center; gap: 6px; } .nav-cart-count { font-size: 13px; font-weight: 500; color: #fff; white-space: nowrap; } form.optica-atc::before, form.optica-atc::after { content: none !important; display: none !important; } /* ============== Mobile hamburger button ============== */ .ham-btn { display: none; background: transparent; border: 0; padding: 10px 8px; color: #fff; cursor: pointer; flex-direction: column; gap: 5px; justify-content: center; align-items: center; flex-shrink: 0; min-width: 44px; min-height: 44px; border-radius: 8px; transition: background 0.15s ease; } .ham-btn:hover { background: rgba(255, 255, 255, 0.12); } .ham-btn span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.25s var(--ease), opacity 0.25s var(--ease), width 0.25s var(--ease); transform-origin: center; } .ham-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .ham-btn.is-open span:nth-child(2) { opacity: 0; width: 0; } .ham-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============== Mobile menu overlay ============== */ .mobile-menu { display: none; position: fixed; inset: var(--nav-h) 0 0 0; background: var(--ink); z-index: 49; overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform 0.3s var(--ease); -webkit-overflow-scrolling: touch; } .mobile-menu.is-open { transform: translateX(0); } .mobile-menu-inner { padding: 8px 0 env(safe-area-inset-bottom, 24px); } /* Trade Log in — prominent top item per BRIEF */ .mobile-trade-login { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 20px; background: var(--green-700); text-decoration: none; color: #fff; gap: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .mobile-trade-login .login-label { display: flex; flex-direction: column; gap: 2px; } .mobile-trade-login .login-title { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: #fff; } .mobile-trade-login .login-sub { font-size: 16px !important; color: rgba(255, 255, 255, 0.75); font-weight: 500; } .mobile-trade-login .login-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); display: grid; place-items: center; flex-shrink: 0; border: 1.5px solid rgba(255, 255, 255, 0.30); } .mobile-nav-section { padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .mobile-nav-section:last-child { border-bottom: none; } .mobile-nav-label { font-size: 16px !important; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.40); padding: 12px 24px 6px; } .mobile-nav-link { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; font-size: 18px; font-weight: 600; color: rgba(255, 255, 255, 0.90); text-decoration: none; transition: background 0.15s ease, color 0.15s ease; gap: 16px; } .mobile-nav-link:hover, .mobile-nav-link:active { background: rgba(255, 255, 255, 0.06); color: #fff; } .mobile-nav-link .nav-arrow { width: 20px; height: 20px; opacity: 0.45; flex-shrink: 0; } .mobile-nav-link .new-pill { background: var(--orange); color: #fff; font-size: 16px !important; font-weight: 800; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 999px; line-height: 1.4; } .mobile-contact-strip { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; } .mobile-contact-strip a { display: inline-flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.75); font-size: 16px !important; font-weight: 500; text-decoration: none; } .mobile-contact-strip a:hover { color: #fff; } .mobile-contact-strip svg { width: 18px; height: 18px; opacity: 0.7; flex-shrink: 0; } /* ============== Hero ============== */ .hero { padding: clamp(28px, 5vw, 56px) 0 clamp(32px, 5vw, 64px); } .hero-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; } @media (min-width: 960px) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 64px; } } .eyebrow { display: none !important; align-items: center; gap: 10px; font-size: 16px !important; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green-800); background: var(--green-050); border: 1px solid #C9E5D2; padding: 7px 14px; border-radius: 999px; margin-bottom: 22px; } .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green-700); } .hero h1 { max-width: 16ch; } @media (min-width: 720px) { .hero { padding-top: 50px; } .help { padding: 20px 0 40px !important; } .branded-ranges { padding-top: 10px !important; } .hero h1 { max-width: 18ch; line-height: 1.2; font-size: 46px; } } .hero-sub { margin: 20px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--text); } @media (min-width: 600px) { .hero-sub { font-size: 17.5px; max-width: 56ch; } } .hero-sub strong { color: var(--ink); font-weight: 700; } .hero-ctas { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; } @media (min-width: 480px) { .hero-ctas { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 18px; } } /* ============== Buttons ============== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; border-radius: 999px; font-size: 16px !important; border: 0; transition: background var(--ease), color var(--ease); min-height: 48px; text-decoration: none; cursor: pointer; white-space: nowrap; padding: 14px 22px; font-family: "Atkinson Hyperlegible Next", sans-serif; letter-spacing: -0.005em; } .btn .arrow { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); } .btn:hover .arrow { transform: translateX(3px); } .btn-primary { background: var(--orange); color: #fff; padding: 16px 32px; border: 0 !important; box-shadow: none !important; outline: none !important; transform: none !important; transition: background var(--ease), color var(--ease); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .single_add_to_cart_button:hover, .single_add_to_cart_button:focus, .single_add_to_cart_button:active { background: var(--orange-dark); color: #fff; text-decoration: none; border: 0 !important; outline: none !important; box-shadow: none !important; transform: none !important; } .btn-text { color: var(--green-800); background: transparent; padding: 10px 6px; border: 0; font-size: 16px !important; min-height: 44px; } .btn-text:hover { color: var(--green-700); background: #ffffff; text-decoration: none; } .btn-text .arrow { width: 18px; height: 18px; transition: transform var(--ease); } .btn-text:hover .arrow { transform: translateX(3px); } .btn-secondary { background: transparent; color: var(--ink); border-color: var(--border-strong); } .btn-secondary:hover { border-color: var(--ink); color: #13A35A; background: var(--white); text-decoration: none; } /* ============== Hero trust stats ============== */ .hero-trust { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 16px; align-items: start; } @media (min-width: 600px) { .hero-trust { grid-template-columns: repeat(4, 1fr); } } .hero-trust .stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .hero-trust .num { font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1; } @media (min-width: 600px) { .hero-trust .num { font-size: 22px; } } .hero-trust .lbl { font-size: 16px !important; color: var(--text-muted); } @media (min-width: 600px) { .hero-trust .lbl { font-size: 16px !important; } } /* ============== Hero slider ============== */ .hero-slider-wrap { display: flex; flex-direction: column; gap: 18px; } .slider-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); padding: 0 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .slider-tabs::-webkit-scrollbar { display: none; } .slider-tab { position: relative; background: transparent !important; border: 0px !important; padding: 12px 14px 14px; font-size: 16px !important; font-weight: 600; letter-spacing: 0.01em; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: color var(--ease); white-space: nowrap; flex-shrink: 0; } @media (min-width: 400px) { .slider-tab { font-size: 16px !important; gap: 9px; padding: 12px 16px 14px; } } .slider-tab .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.45; transition: opacity var(--ease), background var(--ease); flex-shrink: 0; } .slider-tab:hover, .slider-tab:focus, .slider-tab:active { color: var(--ink); background: transparent !important; border: 0px !important; outline: none; } .slider-tab.is-active { color: var(--ink); background: transparent !important; border: 0px !important; } .slider-tab.is-active .dot { opacity: 1; } .slider-tab .progress { position: absolute; left: 0; bottom: -1px; height: 3px; width: 0; border-radius: 2px 2px 0 0; background: transparent; pointer-events: none; } .slider-tab.is-active .progress { animation: progress-fill 6000ms linear forwards; animation-play-state: var(--slider-play, running); } .slider-tab[data-slide="0"].is-active .progress, .slider-tab[data-slide="0"].is-active .dot { background: #8977C8; } .slider-tab[data-slide="1"].is-active .progress, .slider-tab[data-slide="1"].is-active .dot { background: var(--green-700); } .slider-tab[data-slide="2"].is-active .progress, .slider-tab[data-slide="2"].is-active .dot { background: #B7552A; } @keyframes progress-fill { from { width: 0%; } to { width: 100%; } } @media (prefers-reduced-motion: reduce) { .slider-tab.is-active .progress { animation: none; width: 100%; } } .hero-slider { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: #E8DEF3; } .slides { position: absolute; inset: 0; } .slide { position: absolute; inset: 0; opacity: 0; z-index: 1; transition: opacity 600ms ease-in-out; pointer-events: none; will-change: opacity; } .slide.is-active { opacity: 1; z-index: 2; pointer-events: auto; } .slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .slide-1 { background: #E8DEF3; } .slide-2 { background: #DDEBE0; } .slide-3 { background: #E6E2D6; } .slide-label { position: absolute; left: 14px; bottom: 14px; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(6px); border-radius: 999px; padding: 7px 12px 7px 10px; font-size: 16px !important; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 10px 24px -12px rgba(12, 31, 22, 0.28); } @media (min-width: 600px) { .slide-label { left: 18px; bottom: 18px; font-size: 16px !important; padding: 8px 14px 8px 12px; } } .slide-label .dot { width: 8px; height: 8px; border-radius: 50%; } .slide-1 .slide-label .dot { background: #8977C8; } .slide-2 .slide-label .dot { background: var(--green-700); } .slide-3 .slide-label .dot { background: #B7552A; } .slide-callout { display: none; } @media (min-width: 500px) { .slide-callout { display: flex; position: absolute; top: 14px; right: 14px; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(6px); border-radius: 12px; padding: 10px 14px; color: var(--ink); box-shadow: 0 12px 28px -12px rgba(12, 31, 22, 0.30); max-width: 200px; flex-direction: column; gap: 2px; } } @media (min-width: 960px) { .slide-callout { max-width: 240px; top: 18px; right: 18px; padding: 12px 16px; border-radius: 14px; } } .slide-callout .callout-title { font-size: 16px !important; font-weight: 700; line-height: 1.2; letter-spacing: -0.005em; } .slide-callout .callout-desc { font-size: 16px !important; font-weight: 500; line-height: 1.4; color: var(--text-muted); } @media (min-width: 600px) { .slide-callout .callout-title { font-size: 16px !important; } .slide-callout .callout-desc { font-size: 16px !important; } } .slide-1 .slide-callout .callout-title { color: #6D58B2; } .slide-2 .slide-callout .callout-title { color: var(--green-700); } .slide-3 .slide-callout .callout-title { color: #B7552A; } .slider-btn { position: absolute !important; top: 50% !important; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.94) !important; border: 1px solid rgba(12, 31, 22, 0.06); display: grid; place-items: center; box-shadow: 0 8px 20px -8px rgba(12, 31, 22, 0.30); cursor: pointer; transition: background var(--ease), transform var(--ease); color: var(--ink) !important; } @media (min-width: 600px) { .slider-btn { width: 44px; height: 44px; } } .slider-btn:hover { background: #fff; transform: translateY(-50%); } .slider-btn svg { width: 18px; height: 18px; color: var(--ink); } @media (min-width: 600px) { .slider-btn svg { width: 20px; height: 20px; } } .slider-btn.prev { left: 10px !important; right: auto !important; } .slider-btn.next { right: 10px !important; left: auto !important; } @media (min-width: 600px) { .slider-btn.prev { left: 14px; } .slider-btn.next { right: 14px; } } .slider-dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; } .slider-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.55); cursor: pointer; padding: 0; min-width: 8px; min-height: 8px; transition: width var(--ease), background var(--ease); } .slider-dots button.is-active { width: 26px; border-radius: 999px; background: #fff; } /* ============== Section shared ============== */ .section-head { max-width: 760px; margin: 0 0 28px; } .section-head .lede { margin-top: 16px; } .section-head h2 { font-size: clamp(1.8rem, 6vw, 3rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); margin: 18px 0 0; } .lede { font-size: 16px !important; color: var(--text-muted); line-height: 1.55; max-width: 58ch; margin: 0; } /* ============== Compare strip ============== */ .compare { background: #fff; border-top: 1px solid var(--border); padding: 16px 0; } .compare-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; justify-content: center; font-size: 16px !important; font-weight: 600; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; } .compare-inner span:first-child { color: var(--ink); } .compare-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--green-050); color: var(--green-800); border-radius: 999px; font-size: 16px !important; } @media (min-width: 600px) { .compare-pill { font-size: 16px !important; } .compare { padding: 18px 0; } } /* ============== Networks strip ============== */ .networks { background: var(--paper); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 28px 0; } .networks-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 40px; } .networks-label { font-size: 16px !important; font-weight: 700; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; margin: 0; text-align: center; } .networks-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 36px; } .networks-logo { font-family: "Atkinson Hyperlegible Next", sans-serif; font-weight: 700; font-size: 16px !important; letter-spacing: 0.02em; color: var(--ink); opacity: 0.78; transition: opacity 0.15s ease; } @media (min-width: 600px) { .networks-logo { font-size: 16px !important; } } .networks-logo:hover { opacity: 1; } /* ============== Categories ============== */ .categories { background: var(--paper); padding: clamp(36px, 6vw, 68px) 0 clamp(32px, 5vw, 60px); border-top: 1px solid var(--border); } .category-grid { display: grid; gap: 2px; grid-template-columns: 1fr; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } @media (min-width: 900px) { .category-grid { grid-template-columns: repeat(3, 1fr); } } .category { background: var(--white); display: flex; flex-direction: column; min-height: 0; transition: background var(--dur) var(--ease); position: relative; overflow: hidden; text-decoration: none; color: inherit; } @media (min-width: 900px) { .category { min-height: 460px; } } .category .cat-visual { position: relative; height: 160px; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--border); transition: transform var(--dur) var(--ease); } @media (min-width: 600px) { .category .cat-visual { height: 180px; } } .category .cat-visual svg { width: 78%; height: 78%; max-width: 320px; } .category:hover { text-decoration: none; } .category:hover .cat-visual { transform: scale(1.015); } .category.branded .cat-visual { background: radial-gradient(60% 80% at 50% 60%, var(--green-100) 0%, var(--green-050) 70%, var(--white) 100%); } .category.retail .cat-visual { background: radial-gradient(60% 80% at 50% 60%, var(--orange-tint) 0%, #FBEFE5 60%, var(--white) 100%); } .category.workshop .cat-visual { background: radial-gradient(60% 80% at 50% 60%, #ECE6D8 0%, #F5F0E3 60%, var(--white) 100%); } .cat-visual-label { position: absolute; top: 16px; left: 20px; display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 16px !important; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #fff !important; } .cat-visual-label .num { display: inline-block; margin-right: 8px; color: #fff !important; font-weight: 700; } .category.branded .cat-visual-label { background: #8977C8; } .category.retail .cat-visual-label { background: var(--green-700); } .category.workshop .cat-visual-label { background: #B7552A; } .category .cat-body { padding: 24px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; } @media (min-width: 600px) { .category .cat-body { padding: 28px; gap: 14px; } } .cat-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; } .cat-pills .pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 16px !important; font-weight: 500; letter-spacing: 0.02em; border: 1px solid var(--border); background: var(--white); color: var(--text); } .cat-pills .pill .pill-dot { display: none !important; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; } .category.branded .cat-pills .pill:nth-child(1) .pill-dot { background: var(--logo-luxe); } .category.branded .cat-pills .pill:nth-child(2) .pill-dot { background: var(--picture-perfect); } .category.branded .cat-pills .pill:nth-child(3) .pill-dot { background: var(--bespoke); } .category.retail .cat-pills .pill .pill-dot { background: var(--orange); } .category.workshop .cat-pills .pill .pill-dot { background: var(--ink); } .category h3 { font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); margin: 0; } @media (min-width: 600px) { .category h3 { font-size: 16px !important; } } .category p { color: var(--text-muted); font-size: 16px !important; line-height: 1.55; margin: 0; } .category .meta-row { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--border); font-size: 16px !important; font-family: "Atkinson Hyperlegible Next", sans-serif; font-weight: 500; color: var(--ink); } .category .meta-row .count { color: var(--text-muted); font-weight: 400; } .category .meta-row .cta-text { display: inline-flex; align-items: center; gap: 6px; color: var(--green-700); font-weight: 600; } .category .meta-row .arrow { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); } .category:hover .meta-row .arrow { transform: translateX(3px); } /* ============== Gallery (customer cases) ============== */ .gallery { background: var(--cream); padding: clamp(36px, 6vw, 68px) 0; } .gallery .section-head { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; margin-bottom: 24px; max-width: none; } @media (min-width: 900px) { .gallery .section-head { grid-template-columns: 1.3fr 1fr; gap: 80px; } } .gallery .section-head h2 { margin-top: 18px; } .gallery-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 480px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } } @media (min-width: 900px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } } .g-case { margin: 0; padding: 18px 14px 16px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; gap: 12px; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); cursor: pointer; } @media (min-width: 600px) { .g-case { padding: 22px 16px 18px; } } .g-case:hover { box-shadow: var(--shadow); border-color: var(--border-strong); } .g-case-shape { aspect-ratio: 2.4 / 1; background: var(--case-bg, #1A1A1A); border-radius: 14% / 46%; display: grid; place-items: center; padding: 0 10%; text-align: center; color: var(--case-fg, #ffffff); font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 16px !important; font-weight: 600; letter-spacing: 0.06em; line-height: 1.15; box-shadow: 0 14px 22px -10px rgba(0, 0, 0, 0.28), 0 3px 6px rgba(0, 0, 0, 0.08); position: relative; overflow: hidden; } .g-case-shape::after { content: ""; position: absolute; inset: 0; background: linear-gradient(175deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, 0.08) 80%, rgba(0, 0, 0, 0.18) 100%); border-radius: inherit; pointer-events: none; } .g-case-shape .g-label { position: relative; z-index: 1; text-transform: uppercase; letter-spacing: 0.08em; } .g-case figcaption { font-size: 16px !important; color: var(--text-muted); text-align: center; line-height: 1.3; } @media (min-width: 600px) { .g-case figcaption { font-size: 16px !important; } } .gallery-footer { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-top: 24px; border-top: 1px solid var(--border-strong); flex-direction: column; } @media (min-width: 700px) { .gallery-footer { flex-direction: row; } } .gallery-footer p { color: var(--text-muted); font-size: 16px !important; margin: 0; max-width: 60ch; } /* ============== Process bar ============== */ .process-bar { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 20px 28px; margin-bottom: 28px; } @media (min-width: 600px) { .process-bar { padding: 28px 32px 32px; margin-bottom: 32px; } } .process-bar-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; padding-bottom: 20px; border-bottom: 1px dashed var(--border-strong); margin-bottom: 24px; flex-direction: column; } @media (min-width: 600px) { .process-bar-header { flex-direction: row; align-items: center; padding-bottom: 22px; margin-bottom: 28px; } } .process-bar-label { font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 16px !important; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-700); display: inline-flex; align-items: center; gap: 12px; } .process-bar-label::before { content: ""; width: 28px; height: 1px; background: var(--green-700); } .process-bar-meta { font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 16px !important; color: var(--text-muted); } .process-bar-meta strong { color: var(--ink); font-weight: 700; } .process-bar-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 600px) { .process-bar-steps { grid-template-columns: repeat(2, 1fr); gap: 24px; } } @media (min-width: 760px) { .process-bar-steps { grid-template-columns: repeat(4, 1fr); gap: 32px; } } .process-step-mini { display: flex; flex-direction: column; gap: 10px; position: relative; } @media (min-width: 760px) { .process-step-mini:not(:last-child)::after { content: ""; position: absolute; top: 14px; right: -22px; width: 11px; height: 11px; border-top: 1.5px solid var(--border-strong); border-right: 1.5px solid var(--border-strong); transform: rotate(45deg); } } .step-mini { width: 40px; height: 40px; border-radius: 50%; background: var(--green-050); border: 1.5px solid var(--green-700); color: var(--green-800); font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 16px !important; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 4px 10px -4px rgba(15, 130, 74, 0.25); } .process-step-title { font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 16px !important; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; margin: 4px 0 0; line-height: 1.2; } .process-step-desc { font-size: 16px !important; line-height: 1.5; color: var(--text-muted); margin: 0; } /* ============== Trust strip ============== */ .trust-strip { background: var(--green-700); color: var(--white); padding: 20px 0; } .trust-strip-inner { display: grid; grid-template-columns: 1fr; justify-content: center; align-items: center; gap: 14px; text-align: center; } @media (min-width: 600px) { .trust-strip-inner { grid-template-columns: repeat(2, 1fr); gap: 16px 40px; } } @media (min-width: 900px) { .trust-strip-inner { display: flex; flex-wrap: nowrap; justify-content: center; gap: 0 40px; } } .trust-pt { display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-family: "Atkinson Hyperlegible Next", sans-serif; font-weight: 600; font-size: 16px !important; letter-spacing: 0.02em; } @media (min-width: 600px) { .trust-pt { justify-content: flex-start; } } @media (min-width: 900px) { .trust-pt { justify-content: center; } } .trust-pt svg { width: 22px; height: 22px; flex-shrink: 0; opacity: 0.95; } /* ============== Branded ranges ============== */ .branded-ranges { background: var(--paper); padding: clamp(36px, 6vw, 68px) 0; } .branded-ranges-head { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: end; margin-bottom: 28px; } @media (min-width: 900px) { .branded-ranges-head { grid-template-columns: 1.2fr 1fr; gap: 80px; margin-bottom: 32px; } } .branded-ranges-head h2 { margin-top: 18px; } .branded-ranges-head .lede { margin: 0; } .technique-grid { display: grid; gap: 18px; grid-template-columns: 1fr; } @media (min-width: 600px) { .technique-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (min-width: 1000px) { .technique-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } } .technique { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); text-decoration: none; color: inherit; } .technique:hover { border-color: var(--border-strong); box-shadow: var(--shadow); text-decoration: none; } .technique-visual { aspect-ratio: 15 / 8; background: var(--cream); position: relative; display: grid; place-items: center; overflow: hidden; } .technique-visual .case { position: absolute; width: 80%; aspect-ratio: 2.4 / 1; border-radius: 14% / 46%; box-shadow: 0 30px 45px -12px rgba(0, 0, 0, 0.32), 0 6px 12px rgba(0, 0, 0, 0.08), inset 0 -3% 0 -1% rgba(0, 0, 0, 0.12); display: grid; place-items: center; padding: 0 10%; text-align: center; color: var(--white); font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 16px !important; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; overflow: hidden; } .technique-visual .case>svg.case-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .technique-visual .case::after { content: ""; position: absolute; inset: 0; background: linear-gradient(175deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.08) 22%, rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, 0.10) 80%, rgba(0, 0, 0, 0.22) 100%); border-radius: inherit; pointer-events: none; } .technique.deboss .technique-visual { background: #E8E0F4; } .technique.deboss .case { background: linear-gradient(160deg, #A99AE0 0%, #8977C8 55%, #6D58B2 100%); color: rgba(255, 255, 255, 0.95); } .technique.deboss .technique-num { color: var(--logo-luxe); } .technique.deboss:hover { border-color: var(--logo-luxe); } .technique.wrap .technique-visual { background: #D7EFEE; } .technique.wrap .case { background: #2C4A6B; color: #fff; } .technique.wrap .case::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 30% at 25% 20%, rgba(255, 255, 255, 0.22), transparent 60%), radial-gradient(50% 25% at 75% 35%, rgba(255, 255, 255, 0.12), transparent 70%); border-radius: inherit; pointer-events: none; z-index: 2; } .technique.wrap .technique-num { color: var(--picture-perfect); } .technique.wrap:hover { border-color: var(--picture-perfect); } .technique.printed .technique-visual { background: #F4D3E0; } .technique.printed .case { background: #1A0F08; color: rgba(255, 255, 255, 0.88); } .technique.printed .technique-num { color: var(--bespoke); } .technique.printed:hover { border-color: var(--bespoke); } .technique-body { padding: 12px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; } @media (min-width: 600px) { .technique-body { padding: 14px 28px 30px; gap: 12px; } } .technique-num { font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 16px !important; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-700); } .technique h3 { font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; margin: 0; color: var(--ink); text-wrap: balance; } @media (min-width: 600px) { .technique h3 { font-size: 16px !important; } } .technique p { color: var(--text-muted); font-size: 16px !important; line-height: 1.55; margin: 0; } .technique .cta-text { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 6px; color: var(--green-700); font-family: "Atkinson Hyperlegible Next", sans-serif; font-weight: 600; font-size: 16px !important; } .technique .cta-text .arrow { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); } .technique:hover .cta-text .arrow { transform: translateX(3px); } .best-seller-pill { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--orange); color: var(--white); font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 16px !important; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; border-radius: 5px; box-shadow: 0 3px 10px rgba(232, 93, 44, 0.30); } .lead-time-pill { position: absolute; top: 14px; right: 14px; z-index: 2; background: var(--green-700); color: var(--white); font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 16px !important; font-weight: 700; letter-spacing: 0.04em; padding: 5px 10px; border-radius: 5px; box-shadow: 0 3px 10px rgba(15, 130, 74, 0.30); display: inline-flex; align-items: center; gap: 6px; } .lead-time-pill svg { width: 13px; height: 13px; opacity: 0.95; } .orange-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--orange-tint); color: var(--orange-dark); font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 16px !important; font-weight: 600; padding: 6px 12px; border-radius: 999px; letter-spacing: 0.02em; margin-top: 20px; } .orange-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); } /* ============== Value callout ============== */ .value-callout { display: inline-flex; align-items: center; gap: 12px; background: var(--orange-tint); border: 1px solid #F8C9A8; padding: 12px 16px 12px 12px; border-radius: 14px; margin-top: 20px; max-width: 100%; flex-wrap: nowrap; } @media (min-width: 600px) { .value-callout { gap: 14px; padding: 14px 20px 14px 14px; border-radius: 16px; margin-top: 22px; } } .value-callout-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 4px 12px -4px rgba(232, 93, 44, 0.45); } @media (min-width: 600px) { .value-callout-icon { width: 40px; height: 40px; } } .value-callout-icon svg { width: 18px; height: 18px; } @media (min-width: 600px) { .value-callout-icon svg { width: 20px; height: 20px; } } .value-callout-text { display: flex; flex-direction: column; gap: 2px; } .value-callout-text strong { font-family: "Atkinson Hyperlegible Next", sans-serif; font-weight: 700; font-size: 16px !important; color: var(--orange-dark); letter-spacing: -0.005em; line-height: 1.25; } @media (min-width: 600px) { .value-callout-text strong { font-size: 16px !important; } } .value-callout-text span { font-size: 16px !important; color: var(--text); font-weight: 500; line-height: 1.35; } @media (min-width: 600px) { .value-callout-text span { font-size: 16px !important; } } /* ============== Testimonials ============== */ .testimonials { background: var(--green-050); padding: clamp(36px, 6vw, 68px) 0; } .testimonials .section-head { text-align: center; max-width: 1100px; margin: 0 auto 48px; } .testimonials .section-head h2 { margin-top: 18px; } .testimonial-grid { display: grid; gap: 20px; grid-template-columns: 1fr; } @media (min-width: 600px) { .testimonial-grid { gap: 24px; } } @media (min-width: 760px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } } .testimonial { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 24px; display: flex; flex-direction: column; gap: 20px; position: relative; } @media (min-width: 600px) { .testimonial { padding: 32px 30px; gap: 22px; } } .testimonial .stars { display: inline-flex; gap: 2px; color: var(--orange); font-size: 16px !important; letter-spacing: 0.1em; line-height: 1; } .testimonial blockquote { margin: 0; font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 16px !important; line-height: 1.55; color: var(--ink); letter-spacing: -0.01em; font-weight: 500; } .testimonial .who { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 14px; } .testimonial .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--green-100); display: grid; place-items: center; font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 16px !important; font-weight: 700; color: var(--green-800); flex-shrink: 0; } .testimonial .name-row { display: flex; flex-direction: column; gap: 2px; } .testimonial .name { font-family: "Atkinson Hyperlegible Next", sans-serif; font-weight: 600; color: var(--ink); font-size: 16px !important; } .testimonial .role { font-size: 16px !important; color: var(--text-muted); } /* ============== Sub-category sections (Retail + Workshop) ============== */ .subcat-section { padding: clamp(36px, 6vw, 68px) 0; } .subcat-section.retail { background: var(--white); } .subcat-section.workshop { background: var(--cream); } .subcat-split { display: grid; grid-template-columns: 1fr; gap: 32px; } @media (min-width: 900px) { .subcat-split { grid-template-columns: 1fr 1.6fr; gap: 64px; } } .subcat-head { display: flex; flex-direction: column; gap: 16px; align-self: start; } @media (min-width: 600px) { .subcat-head { gap: 18px; } } .subcat-head h2 { font-family: "Recursive", "Atkinson Hyperlegible Next", system-ui, sans-serif; font-size: clamp(1.6rem, 5vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); margin: 0; font-variation-settings: "CASL" 0, "MONO" 0; } .subcat-head .lede { margin: 0; max-width: 40ch; } .subcat-head .btn { align-self: flex-start; margin-top: 8px; } .subcat-grid { display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 480px) { .subcat-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } } .subcat-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 18px 18px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } @media (min-width: 600px) { .subcat-card { padding: 24px 22px 22px; gap: 10px; } } .subcat-card:hover { border-color: var(--border-strong); box-shadow: 0 14px 32px -16px rgba(12, 31, 22, 0.18); text-decoration: none; } .subcat-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 4px; } .subcat-icon svg { width: 22px; height: 22px; } .subcat-section.retail .subcat-icon { background: var(--orange-tint); color: var(--orange-dark); } .subcat-section.workshop .subcat-icon { background: var(--green-050); color: var(--green-800); } .subcat-card h4 { font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 16px !important; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--ink); } .subcat-card p { font-size: 16px !important; line-height: 1.5; color: var(--text-muted); margin: 0; } .subcat-card .arrow-hint { margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 16px !important; font-weight: 600; color: var(--green-700); } .subcat-card .arrow-hint svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); } .subcat-card:hover .arrow-hint svg { transform: translateX(3px); } /* ============== Featured product ============== */ .featured { background: var(--paper); padding: clamp(36px, 6vw, 68px) 0; border-top: 1px solid var(--border); } .featured-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; } @media (min-width: 900px) { .featured-grid { grid-template-columns: 1fr 1fr; gap: 64px; } } .featured-visual { background: linear-gradient(135deg, var(--green-050) 0%, var(--cream) 100%); border-radius: var(--radius-lg); aspect-ratio: 4 / 3; position: relative; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--border); } .featured-visual svg { width: 60%; max-width: 280px; height: auto; } .featured-visual-tag { position: absolute; top: 18px; left: 18px; background: var(--white); border-radius: 999px; padding: 6px 12px; font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 16px !important; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--green-800); box-shadow: 0 4px 12px -6px rgba(12, 31, 22, 0.18); } .featured-body { display: flex; flex-direction: column; gap: 16px; } @media (min-width: 600px) { .featured-body { gap: 18px; } } .featured-body h2 { margin: 0; font-family: "Recursive", "Atkinson Hyperlegible Next", system-ui, sans-serif; font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); font-variation-settings: "CASL" 0, "MONO" 0; } .featured-body p.lede { margin: 0; } .featured-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .featured-bullets li { display: flex; gap: 12px; font-size: 16px !important; line-height: 1.5; color: var(--text); } .featured-bullets .check-icon { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; } .featured-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; } /* ============== Distributor strip ============== */ .distributor { background: var(--white); padding: 32px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .distributor-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 48px; } .distributor-label { font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 16px !important; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } .distributor-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 36px; } .distributor-logo { font-family: "Recursive", "Atkinson Hyperlegible Next", system-ui, sans-serif; font-weight: 700; font-size: 17px; letter-spacing: 0.02em; color: var(--ink); opacity: 0.65; transition: opacity 0.15s ease; font-variation-settings: "CASL" 0; } .distributor-logo:hover { opacity: 1; } /* ============== Help section ============== */ /* Full-width BB rows must not have margin:auto or background won't spread */ .fl-row-full-width, .fl-row-full-width > .fl-row-content-wrap { margin-left: 0 !important; margin-right: 0 !important; } .help { background: transparent; padding: clamp(36px, 6vw, 68px) 0; } .help .section-head { text-align: center; max-width: 600px; margin: 0 auto 28px; } .help .section-head h2 { margin-top: 18px; } .help .section-head .lede { margin: 16px auto 0; } .help-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 600px) { .help-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .help-grid { grid-template-columns: repeat(4, 1fr); } } .help-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 20px 20px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); position: relative; } @media (min-width: 600px) { .help-card { padding: 28px 24px 24px; gap: 12px; } } .help-card:hover { border-color: var(--green-700); box-shadow: 0 14px 30px -16px rgba(12, 31, 22, 0.18); text-decoration: none; } .help-card-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--green-050); color: var(--green-700); display: grid; place-items: center; } .help-card-icon svg { width: 22px; height: 22px; } .help-card h3 { font-family: "Recursive", "Atkinson Hyperlegible Next", system-ui, sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; margin: 6px 0 0; color: var(--ink); font-variation-settings: "CASL" 0; } @media (min-width: 600px) { .help-card h3 { font-size: 16px !important; margin: 8px 0 0; } } .help-card p { font-size: 16px !important; line-height: 1.5; color: var(--text-muted); margin: 0; flex: 1; } .help-card-action { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 6px; color: var(--green-700); font-family: "Atkinson Hyperlegible Next", sans-serif; font-weight: 600; font-size: 16px !important; } @media (min-width: 600px) { .help-card-action { padding-top: 12px; } } .help-card-action svg { width: 16px; height: 16px; transition: transform 0.2s var(--ease); } .help-card:hover .help-card-action svg { transform: translateX(3px); } .help-card .coming-soon { position: absolute; top: 20px; right: 20px; background: var(--orange-tint); color: var(--orange-dark); font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 16px !important; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; } /* ============== Footer ============== */ .footer { background: var(--ink); color: rgba(255, 255, 255, 0.85); padding: clamp(36px, 5vw, 72px) 0 0; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; padding-bottom: clamp(28px, 4vw, 56px); border-bottom: 1px solid rgba(255, 255, 255, 0.10); } @media (min-width: 600px) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; } } @media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 48px; } } .footer-brand .footer-logo { font-family: "Recursive", "Atkinson Hyperlegible Next", system-ui, sans-serif; font-weight: 700; font-size: 28px; letter-spacing: 0.02em; color: #fff; text-decoration: none; font-variation-settings: "CASL" 0; } .footer-brand .footer-logo sup { font-size: 16px !important; vertical-align: super; opacity: 0.7; } .footer-brand p { font-size: 16px !important; line-height: 1.6; margin: 14px 0 18px; color: rgba(255, 255, 255, 0.65); max-width: 36ch; } .footer-contact { display: flex; flex-direction: column; gap: 9px; font-size: 16px !important; } .footer-contact a { color: #fff; text-decoration: none; opacity: 0.9; display: inline-flex; align-items: center; gap: 8px; min-height: 0; line-height: 1.35; } .footer-contact a:hover { opacity: 1; color: #fff; text-decoration: underline; text-underline-offset: 3px; } .footer-contact strong { font-weight: 700; opacity: 0.7; min-width: 30px; } .footer-col h4 { font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 16px !important; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin: 0 0 16px; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } @media (min-width: 600px) { .footer-col ul { gap: 12px; } } .footer-col a { color: #fff; text-decoration: none; font-size: 16px !important; opacity: 0.85; transition: opacity 0.15s ease; min-height: 0; line-height: 1.35; display: inline-flex; align-items: center; } /* Footer rhythm (2026-09-02): the list renders as a block, so spacing comes from the items, not the ul gap. Touch devices keep 44px tap targets. */ .footer-col ul li { padding: 5px 0 !important; /* a builder reset pins li padding to 1px otherwise */ } /* The Footer 2 layout inlines ".footer-col ul li { padding: 1px 0 !important }" after this sheet; the extra .fl-builder-content class outranks it. */ .fl-builder-content .footer-col ul li { padding: 5px 0 !important; } @media (hover: none) and (pointer: coarse) { .fl-builder-content .footer-col ul li { padding: 0 !important; } .footer-col a, .footer-contact a { min-height: 44px; } .footer-contact { gap: 0; } } .footer-col a:hover { opacity: 1; color: #fff; text-decoration: underline; text-underline-offset: 3px; } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 0 28px; font-size: 16px !important; color: rgba(255, 255, 255, 0.55); flex-direction: column; } @media (min-width: 600px) { .footer-bottom { flex-direction: row; padding: 22px 0 28px; } } .footer-bottom-links { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; } .footer-bottom-links a { color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: 16px !important; } .footer-bottom-links a:hover { color: #fff; } .footer-badges { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .footer-badge { font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 16px !important; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.20); border-radius: 999px; color: rgba(255, 255, 255, 0.7); } /* ============== Mobile breakpoints ============== */ /* Below 720px: hide desktop bar + menu items, show hamburger */ @media (max-width: 719px) { /* BB framework: zero margins/padding, full width on every BB layer */ .fl-row-content-wrap, .fl-row-content, .fl-row-content.fl-row-fixed-width, .fl-row-content.fl-row-full-width, .fl-col-group, .fl-col, .fl-col-content, .fl-module, .fl-module-content { max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* Container: full width, zero margins — padding scoped per-section below */ .container, .fl-page .container, .fl-content-full.container { max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* 20px side padding on our custom homepage sections — BB row set to 0, padding lives here */ .hero .container, .compare .container, .categories .container, .branded-ranges .container, .gallery .container, .subcat-section .container, .featured .container, .distributor .container, .help .container { padding-left: 20px !important; padding-right: 20px !important; } /* Hero grid: prevent grid items expanding past 1fr cell */ .hero-grid > * { min-width: 0; } /* Networks strip: force children to full row so text-align:center works */ .networks-inner { justify-content: center !important; text-align: center !important; } .networks-label { width: 100% !important; text-align: center !important; } .networks-logos { width: 100% !important; justify-content: center !important; } /* Hero slider: force to viewport width */ .hero-slider-wrap, .hero-slider, .slider-tabs { max-width: 100% !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* Slider tabs: shrink so all 3 tabs fit at 412px without scrolling */ .slider-tab { font-size: 16px !important; padding: 10px 8px 12px !important; gap: 6px !important; } .slider-tab .dot { width: 7px !important; height: 7px !important; } .bar-inner { display: none; } .menu { display: none; } .book-call { display: none; } .nav-inner { padding: 0 16px; } .ham-btn { display: inline-flex; } .mobile-menu { display: block; } /* Tighten section padding on small screens */ .hero { padding: 24px 0 28px; } .categories, .gallery, .testimonials, .featured, .help { padding: 32px 0; } .branded-ranges { padding: 10px 0 32px; } .subcat-section { padding: 50px 0; } .trust-strip { padding: 16px 0; } .trust-strip-inner { justify-content: flex-start; text-align: left; } .trust-pt { justify-content: flex-start; } .networks { padding: 22px 0; } .compare { padding: 14px 0; } .distributor { padding: 24px 0; } /* Hero copy full-width on mobile */ .hero h1 { max-width: none; margin-top: 20px; line-height: 1.2; } #categories-title { line-height: 1.2; } #branded-ranges-title { line-height: 1.4; } #gallery-title, #testimonials-title { line-height: 1.4; } .subcat-section.retail .subcat-head h2, .subcat-section.workshop .subcat-head h2, .featured .featured-body h2 { line-height: 1.4; } .featured-cta { justify-content: flex-start; } /* Slider tabs scrollable row, no gap issues */ .slider-tabs { gap: 0; } /* Gallery 2-col on very small screens */ .gallery-grid { grid-template-columns: repeat(2, 1fr); } } /* 720–959: tablet — show bar but still no desktop menu */ @media (min-width: 720px) and (max-width: 959px) { .bar-inner { display: grid; } .menu { display: none; } .book-call { display: none; } .ham-btn { display: inline-flex; } .mobile-menu { display: block; } } /* 960+: full desktop layout, hide mobile controls */ @media (min-width: 960px) { .ham-btn { display: none !important; } .mobile-menu { display: none !important; } .menu { display: flex; } .book-call { display: inline-flex; } } @media only screen and (min-width: 768px) { .page-id-37124 .container { width: 1280px; } } /* ============== Page header band ============== */ .page-header { background: var(--paper); border-bottom: 1px solid var(--border); padding: clamp(20px, 2.4vw, 32px) 0 clamp(28px, 3.2vw, 44px); margin: 0px 0 20px; } .breadcrumb { font-size: 16px !important; color: var(--text-muted); display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; text-align: left; gap: 8px; margin-bottom: 18px; width: 100%; align-self: flex-start; } .breadcrumb a { color: var(--text-muted); font-weight: 500; transition: color 0.15s ease; } .breadcrumb a:hover { color: var(--green-700); text-decoration: none; } .breadcrumb .sep { opacity: 0.5; font-size: 16px !important; } .breadcrumb .here { color: var(--ink); font-weight: 600; } .page-header-inner { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: end; } @media (min-width: 900px) { .page-header-inner { grid-template-columns: 1.5fr 1fr; gap: 48px; } } .page-lede { margin: 16px 0 0; font-size: 17px; line-height: 1.55; color: var(--text-muted); max-width: 56ch; } .page-lede strong { color: var(--ink); font-weight: 700; } /* ============== Mini-stats ============== */ .mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .mini-stat { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; } .mini-stat .num { font-family: "Recursive", "Atkinson Hyperlegible Next", sans-serif; font-variation-settings: "CASL" 0; font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; } .mini-stat .lbl { font-size: 16px !important; color: var(--text-muted); line-height: 1.3; } /* ============== Catalogue layout ============== */ .catalogue { padding: clamp(28px, 3.2vw, 44px) 0 clamp(40px, 4.5vw, 68px); } .catalogue-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; } @media (min-width: 900px) { .catalogue-grid { grid-template-columns: 280px 1fr; gap: 40px; } } /* ============== Sidebar ============== */ .sidebar { display: flex; flex-direction: column; gap: 24px; } @media (min-width: 900px) { .sidebar { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; padding-right: 6px; } } .filter-block { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 18px 16px; } .filter-title { font-size: 16px !important; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-800); margin: 0 0 14px; } .cat-tree { list-style: none; margin: 0; padding: 0; } .cat-tree>li { margin: 0 0 4px; } .cat-tree>li:last-child { margin-bottom: 0; } .cat-toplevel { display: flex; align-items: center; justify-content: space-between; width: 100%; background: transparent; border: 0; padding: 10px 12px; font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 16px !important; font-weight: 700; color: var(--ink); border-radius: 10px; cursor: pointer; text-align: left; transition: background 0.15s ease; } .cat-toplevel:hover { background: var(--green-050) !important; color: var(--ink); border: 0px; } .cat-toplevel .chev { transition: transform 0.2s ease; flex-shrink: 0; opacity: 0.5; } .cat-toplevel[aria-expanded="true"] .chev { transform: rotate(180deg); } .cat-sub { list-style: none; margin: 4px 0 8px; padding: 0 0 0 12px; display: none; border-left: 1px solid var(--border); margin-left: 12px; } .cat-toplevel[aria-expanded="true"]+.cat-sub { display: block; } .cat-sub li { margin: 0; } .cat-sub a { display: block; padding: 8px 12px; font-size: 16px !important; color: var(--text); border-radius: 8px; transition: background 0.15s ease, color 0.15s ease; } .cat-sub a:hover { background: var(--green-050); color: var(--green-800); } .cat-sub a.is-active { background: #EAF7EF; color: #0F824A; font-weight: 700; box-shadow: inset 3px 0 0 #13A35A; } .cat-sub a.is-active:hover { background: #DDF1E5; } .cat-sub-count { font-size: 16px !important; color: var(--text-muted); margin-left: 6px; font-weight: 500; } .cat-sub a.is-active .cat-sub-count { color: #0F824A; opacity: 0.7; } /* Price filter */ .price-row { display: flex; gap: 12px; align-items: center; margin-top: 16px; } .price-input { flex: 1; display: flex; flex-direction: column; gap: 4px; } .price-input label { font-size: 16px !important; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); font-weight: 600; } .price-input input { font-family: inherit; font-size: 16px !important; border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; background: var(--white); color: var(--ink); width: 100%; } .price-input input:focus { outline: 2px solid var(--green-700); outline-offset: -1px; border-color: var(--green-700); } .price-track { position: relative; height: 4px; background: var(--border); border-radius: 2px; margin: 6px 6px 0; } .price-track .fill { position: absolute; left: 12%; right: 22%; top: 0; bottom: 0; background: var(--green-700); border-radius: 2px; } .price-track .handle { position: absolute; top: 50%; width: 16px; height: 16px; background: var(--white); border: 2px solid var(--green-700); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 2px 6px rgba(12, 31, 22, 0.15); } .price-track .handle.left { left: 12%; } .price-track .handle.right { left: 78%; } .price-currency { margin-top: 12px; font-size: 16px !important; color: var(--text-muted); } /* Checkbox filter list */ .check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .check-list label { display: flex; align-items: center; gap: 10px; font-size: 16px !important; cursor: pointer; padding: 4px 0; color: var(--text); } .check-list input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--green-700); cursor: pointer; } .check-list .count { margin-left: auto; font-size: 16px !important; color: var(--text-muted); } .filter-clear { margin-top: 18px; font-size: 16px !important; font-weight: 600; color: var(--green-800); background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 10px 18px; width: 100%; transition: border-color 0.15s ease, color 0.15s ease; } .filter-clear:hover { border-color: var(--green-700); background: var(--green-050) !important; color: var(--ink); border: 0px; } /* ============== Sort/view bar ============== */ .sort-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px; } .results-count { font-size: 16px !important; color: var(--text); } .results-count strong { color: var(--ink); font-weight: 700; } .sort-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .sort-select { display: inline-flex; align-items: center; gap: 8px; font-size: 16px !important; color: var(--text-muted); } .sort-select select { font-family: inherit; font-size: 16px !important; font-weight: 600; color: var(--ink); background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 8px 36px 8px 12px; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23566963' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .sort-select select:focus { outline: 2px solid var(--green-700); outline-offset: 1px; border-color: var(--green-700); } .view-toggle { display: inline-flex; background: var(--paper); border: 1px solid var(--border); border-radius: 8px; padding: 3px; } .view-toggle button { background: transparent; border: 0; padding: 7px 12px; border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 16px !important; font-weight: 600; color: var(--text-muted); transition: background 0.15s ease, color 0.15s ease; } .view-toggle button:hover { color: var(--ink); } .view-toggle button.is-active { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(12, 31, 22, 0.10); } .view-toggle svg { width: 14px; height: 14px; } /* ============== Product grid ============== */ /* Scoped to div.products only — WooCommerce also puts a bare "products" class on the outer
wrapper, and an unscoped .products rule turns that section's own children (heading, sort bar, product grid) into grid columns instead of stacking them. */ div.products { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 580px) { div.products { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { div.products { grid-template-columns: repeat(3, 1fr); } } .products .product { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); position: relative; text-decoration: none; color: inherit; } .products .product:hover { border-color: var(--green-700); box-shadow: 0 14px 30px -16px rgba(12, 31, 22, 0.18); text-decoration: none; } .products .product .product-link { position: absolute; inset: 0; z-index: 1; text-indent: -999em; overflow: hidden; } .products .product .product-link:focus-visible { outline: 2px solid var(--green-700); outline-offset: -2px; border-radius: var(--radius); } .products .product .product-foot { position: relative; z-index: 2; } .product-media { position: relative; aspect-ratio: 4 / 3; background: var(--paper); display: grid; place-items: center; border-bottom: 1px solid var(--border); overflow: hidden; } .product-media .product-img { width: 70%; height: 78%; display: grid; place-items: center; } .product-media .product-img svg { width: 100%; height: 100%; max-width: 180px; max-height: 160px; } /* Related products cards — white image background */ .pdp-related .product-media { background: #ffffff !important; } /* Related products cards — image fill */ .product-media .product-media-img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; display: block !important; } .product-media.tint-blue { background: linear-gradient(160deg, #EAF2F6, #DDEAF1); } .product-media.tint-amber { background: linear-gradient(160deg, #F8EFE0, #F1E4CB); } .product-media.tint-green { background: linear-gradient(160deg, #ECF4EF, #DCEFE2); } .product-media.tint-cream { background: linear-gradient(160deg, #F5F0E2, #EBE3CF); } .product-media.tint-grey { background: linear-gradient(160deg, #EFEEEA, #E1DFD7); } .product-media.tint-rose { background: linear-gradient(160deg, #F5EAE7, #ECDAD3); } .product-media .product-fallback { display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0.55; } .product-media .fallback-mark { font-family: "Recursive", sans-serif; font-variation-settings: "CASL" 0; font-weight: 700; font-size: 22px; letter-spacing: 0.04em; color: var(--text-muted); } .product-media .fallback-label { font-size: 16px !important; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); } .product-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; } .stock-status { display: inline-flex; align-items: center; gap: 6px; font-size: 16px !important; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; } .stock-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .stock-status.in-stock { color: var(--green-700); } .stock-status.backorder { color: var(--orange-dark); } .range-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 16px !important; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .range-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .range-pill.logo-luxe { color: var(--logo-luxe); background: rgba(107, 78, 158, 0.10); } .range-pill.picture-perfect { color: var(--picture-perfect); background: rgba(46, 158, 156, 0.10); } .range-pill.bespoke { color: var(--bespoke); background: rgba(176, 39, 110, 0.10); } .product-moq { display: flex; align-items: center; gap: 8px; font-size: 16px !important; color: var(--text-muted); font-weight: 500; margin-top: 4px; flex-wrap: wrap; } .product-moq strong { color: var(--ink); font-weight: 700; } .product-moq .sep { opacity: 0.4; } .product-foot.has-moq { align-items: flex-start; } .product-foot.has-moq>.price-stack { display: flex; flex-direction: column; gap: 0; flex: 1; min-width: 0; } .product-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .product-title { font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.3; margin: 0; letter-spacing: -0.005em; } .product-specs { font-size: 16px !important; color: var(--text-muted); line-height: 1.4; margin: 0; } .product-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--border); } .product-price-out { display: inline-flex; align-items: center; gap: 6px; font-size: 16px !important; font-weight: 600; color: var(--green-800); text-decoration: none; transition: color 0.15s ease; } .product-price-out:hover { color: var(--green-700); } .product-price-out svg { width: 13px; height: 13px; } .product-price-in { display: none; flex-direction: column; gap: 2px; } .product-price-in .price { font-family: "Recursive", sans-serif; font-variation-settings: "CASL" 0; font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; line-height: 1; } .product-price-in .price-meta { font-size: 16px !important; color: var(--text-muted); } body.is-logged-in .product-price-out { display: none; } body.is-logged-in .product-price-in { display: flex; } /* ============== List view ============== */ body.view-list div.products { grid-template-columns: 1fr; gap: 12px; } body.view-list .product { flex-direction: row; align-items: flex-start; } body.view-list .product-media { width: 220px; height: 165px; flex-shrink: 0; border-bottom: 0; border-right: 1px solid var(--border); } @media (max-width: 600px) { body.view-list .product-media { width: 150px; height: 112px; } } body.view-list .product-body { padding: 18px 22px; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 4px 24px; flex: 1; } body.view-list .product-body>.product-title-wrap { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 6px; } body.view-list .product-body>.product-foot { border-top: 0; padding-top: 0; margin-top: 0; flex-direction: column; align-items: flex-end; justify-content: center; gap: 12px; flex-shrink: 0; } .product-title-wrap>.product-meta, .product-title-wrap>.product-title, .product-title-wrap>.product-specs { margin: 0; } /* ============== Pagination ============== */ .pagination { margin-top: 32px; display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 14px; border-radius: 10px; font-size: 16px !important; font-weight: 600; color: var(--text); transition: background 0.15s ease, color 0.15s ease; } .pagination a:hover { background: var(--green-050); color: var(--green-800); } .pagination .is-current { background: var(--green-700); color: #fff; } .pagination .pg-prev, .pagination .pg-next { gap: 6px; } .pagination .pg-prev svg, .pagination .pg-next svg { width: 14px; height: 14px; } .pagination .pg-disabled { opacity: 0.4; pointer-events: none; } /* ============== Help card additions ============== */ .help-card-static { cursor: default; } .help-card-static:hover { transform: none; border-color: var(--border); box-shadow: none; } .help-card-phones { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 4px; } .help-card-phones a { display: inline-flex; align-items: center; gap: 10px; font-family: "Atkinson Hyperlegible Next", sans-serif; font-weight: 700; font-size: 16px !important; color: var(--green-700); transition: color 0.15s ease; } .help-card-phones a:hover { color: var(--green-800); text-decoration: none; } .help-card-phones strong { font-weight: 700; font-size: 16px !important; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted); background: var(--green-050); border: 1px solid #C9E5D2; padding: 3px 7px; border-radius: 999px; min-width: 32px; text-align: center; } /* ============== Variant switcher (dev tool — hidden on live site) ============== */ .variant-switch { display: none !important; } .variant-switch-label { font-size: 16px !important; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.65; } .variant-switch-btns { display: flex; gap: 6px; } .variant-switch button { flex: 1; padding: 9px 10px; border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; color: #fff; font-weight: 600; font-size: 16px !important; border-radius: 8px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .variant-switch button:hover { background: rgba(255, 255, 255, 0.08); } .variant-switch button.is-active { background: var(--green-700); border-color: var(--green-700); } .variant-switch-divider { height: 1px; background: rgba(255, 255, 255, 0.12); margin: 2px 0; } /* ============== Mobile: catalogue additions ============== */ @media (max-width: 720px) { .mini-stats { display: none; } .sort-bar { padding: 12px 14px; } .results-count { font-size: 16px !important; } .sort-controls { gap: 10px; } } @media (min-width: 1100px) { .fl-full-width .container { padding-left: 0; padding-right: 0; width: 1820px; } } /* ============================================================ Sidebar accordion ============================================================ */ .filter-block { background: #fff; border: 1px solid #E4E0D6; border-radius: 14px; padding: 18px 18px 16px; } .filter-title { font-size: 16px !important; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #0F824A; margin: 0 0 14px; } /* Cat tree base */ .cat-tree { list-style: none; margin: 0; padding: 0; } .cat-tree>li { margin: 0; } /* ---- Section header (All Branded / Retail-ready / Workshop) ---- */ .cat-section { border-top: 1px solid #E4E0D6; padding-top: 12px; margin-top: 8px; } .cat-section:first-child { border-top: 0; margin-top: 0; padding-top: 0; } .cat-section-link { display: block; font-size: 16px !important; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #0F824A; text-decoration: none; padding: 4px 4px 10px; } .cat-section-link:hover { color: #13A35A; } /* ---- Always-open sub-list under each section header ---- */ .cat-sub--open { display: block !important; margin: 0; padding: 0; border-left: 0; } /* ---- Second-level accordion buttons ---- */ .cat-toplevel { display: flex; align-items: center; justify-content: space-between; width: 100%; background: transparent; border: 0; padding: 8px 10px; font-family: inherit; font-size: 16px !important; font-weight: 600; color: #0C1F16; border-radius: 8px; cursor: pointer; text-align: left; transition: background 0.15s ease; } .cat-toplevel:hover { background: #EAF7EF; } .cat-toplevel .chev { transition: transform 0.2s ease; flex-shrink: 0; opacity: 0.45; } .cat-toplevel[aria-expanded="true"] .chev { transform: rotate(180deg); } /* ---- Third-level leaf links ---- */ .cat-sub { list-style: none; margin: 2px 0 6px 10px; padding: 0 0 0 10px; display: none; border-left: 1px solid #E4E0D6; } .cat-toplevel[aria-expanded="true"]+.cat-sub { display: block; } .cat-sub li { margin: 0; } .cat-sub a { display: block; padding: 6px 10px; font-size: 16px !important; color: #566963; border-radius: 6px; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .cat-sub a:hover { background: #EAF7EF; color: #0F824A; } .cat-sub a.is-active { background: #EAF7EF; color: #0F824A; font-weight: 700; box-shadow: inset 3px 0 0 #13A35A; } .cat-sub a.is-active:hover { background: #DDF1E5; } /* ============================================================ Sort bar ============================================================ */ .sort-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: #fff; border: 1px solid #E4E0D6; border-radius: 14px; padding: 14px 18px; margin-bottom: 20px; } .results-count { font-size: 16px !important; color: #566963; } .results-count strong { color: #0C1F16; font-weight: 700; } .sort-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .sort-select { display: inline-flex; align-items: center; gap: 8px; font-size: 16px !important; color: #566963; } .sort-select select { font-family: inherit; font-size: 16px !important; font-weight: 600; color: #0C1F16; background: #fff; border: 1px solid #E4E0D6; border-radius: 8px; padding: 8px 36px 8px 12px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23566963' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .sort-select select:focus { outline: 2px solid #13A35A; outline-offset: 1px; border-color: #13A35A; } .view-toggle { display: inline-flex; background: #F5F2EC; border: 1px solid #E4E0D6; border-radius: 8px; padding: 3px; } .view-toggle button { background: transparent; border: 0; padding: 7px 12px; border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 16px !important; font-weight: 600; color: #566963; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .view-toggle button:hover { color: #0C1F16; } .view-toggle button.is-active { background: #fff; color: #0C1F16; box-shadow: 0 1px 3px rgba(12, 31, 22, 0.10); } .view-toggle svg { width: 14px; height: 14px; } @media (max-width: 600px) { .sort-bar { padding: 12px 14px; } .results-count { font-size: 16px !important; } .sort-controls { gap: 10px; } } /* ============================================================ Sidebar filter blocks ============================================================ */ .filter-block { background: #fff; border: 1px solid #E4E0D6; border-radius: 14px; padding: 18px 18px 16px; margin-bottom: 12px; } .filter-title { font-size: 16px !important; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #13A35A; margin: 0 0 14px; } .check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .check-list label { display: flex; align-items: center; gap: 10px; font-size: 16px !important; cursor: pointer; padding: 4px 0; color: #0C1F16; } .check-list input[type="checkbox"] { width: 18px; height: 18px; accent-color: #13A35A; cursor: pointer; flex-shrink: 0; } .check-list .count { margin-left: auto; font-size: 16px !important; color: #566963; } .filter-clear { margin-top: 14px; font-size: 16px !important; font-weight: 600; color: #0C432A; background: transparent; border: 1px solid #E4E0D6; border-radius: 999px; padding: 10px 18px; width: 100%; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .filter-clear:hover { border-color: #13A35A; color: #13A35A; } /* ============================================================ Button variants (PDP / catalogue) ============================================================ */ .btn-outline { background: transparent; border: 1px solid var(--border-strong); color: var(--ink); padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 16px !important; letter-spacing: 0.02em; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: border-color 0.15s ease, color 0.15s ease; cursor: pointer; } .btn-outline:hover { border-color: var(--green-700); color: var(--green-700); } .btn-sample:hover, .fq-trigger:hover { border: 1px solid #13A35A !important; } .wpforms-submit { background: #E85D2C !important; color: #ffffff !important; cursor: pointer; margin-top: 10px !important; } .wpforms-submit:hover { background: var(--orange-dark) !important; color: #ffffff !important; border: 1px solid var(--orange-dark) !important; border-radius: 30px !important; } .btn-block { width: 100%; display: flex; } button.btn.btn-outline.btn-block:hover, button.btn.btn-outline.fq-trigger:hover { border: 1px solid var(--green-700) !important; } .btn-large { padding: 16px 24px; font-size: 16px !important; } .btn.is-disabled, .btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* ============================================================ PRODUCT DETAIL PAGE (PDP) ============================================================ */ .pdp-header { background: var(--paper); border-bottom: 1px solid var(--border); padding: 16px 0; } .pdp { padding: clamp(24px, 3vw, 40px) 0 clamp(40px, 4.5vw, 64px); } .pdp-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; } @media (min-width: 900px) { .pdp-grid { grid-template-columns: 1.15fr 1fr; gap: 56px; } } /* Media area */ .pdp-media { display: flex; flex-direction: column; gap: 16px; position: relative; } .pdp-pane { display: none; } .pdp-pane.is-active { display: flex; flex-direction: column; gap: 12px; } .pdp-main-image { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(160deg, #EAF2F6, #DDEAF1); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; align-items: center; justify-content: center; } .pdp-main-image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* contain variant — add class "is-contain" to .pdp-main-image for whitespace-preserving fit */ .pdp-main-image.is-contain img { object-fit: contain; background: transparent; } .pdp-thumbs { display: flex; flex-wrap: nowrap; gap: 10px; width: 100%; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding-top: 10px; padding-bottom: 10px; } .pdp-thumbs::-webkit-scrollbar { display: none; } .pdp-thumbs-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 16px; height: 26px; border-radius: 4px; border: 1px solid var(--border); background: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); z-index: 2; font-size: 10px; line-height: 1; color: var(--text); padding: 0; transition: opacity 0.15s ease, box-shadow 0.15s ease; } .pdp-thumbs-arrow:hover { background: #13A35A !important; border-color: #13A35A !important; color: #ffffff !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22); } .pdp-thumbs-arrow:focus, .pdp-thumbs-arrow:active { position: absolute; background: var(--white); color: var(--text); border: 1px solid var(--border); outline: none; } .pdp-thumbs-arrow--prev { left: -4px; } .pdp-thumbs-arrow--next { right: -4px; } .pdp-thumbs-arrow.is-hidden, .pdp-thumbs-wrap:not(.has-overflow) .pdp-thumbs-arrow { display: none; } .pdp-thumbs-wrap { position: relative; } .pdp-thumb { flex: 0 0 90px; width: 90px; height: 90px; scroll-snap-align: start; background: var(--white); border: 2px solid var(--border); border-radius: var(--radius); padding: 6px; cursor: pointer; display: grid; place-items: center; overflow: hidden; transition: border-color 0.15s ease, transform 0.15s ease; } .pdp-thumbs button.pdp-thumb:hover, .pdp-thumbs button.pdp-thumb:focus, .pdp-thumbs button.pdp-thumb:active, .pdp-thumbs button.pdp-thumb:focus-visible, .pdp-thumbs button.pdp-thumb.is-active:hover, .pdp-thumbs button.pdp-thumb.is-active:focus, .pdp-thumbs button.pdp-thumb.is-active:active, .pdp-thumbs button.pdp-thumb.is-active:focus-visible { border: 1px solid #13A35A !important; outline: none !important; box-shadow: none !important; background: #ffffff !important; } .pdp-thumb.is-active { border-color: var(--green-700); } .pdp-thumb img { width: 100%; height: 100%; object-fit: contain; } .pdp-thumb.tint-amber { background: linear-gradient(160deg, #F8EFE0, #F1E4CB); } .pdp-thumb.tint-cream { background: linear-gradient(160deg, #F5F0E2, #EBE3CF); } .pdp-thumb.tint-blue { background: linear-gradient(160deg, #EAF2F6, #DDEAF1); } .pdp-thumb.tint-grey { background: linear-gradient(160deg, #EFEEEA, #E1DFD7); } /* Info panel */ .pdp-info { display: flex; flex-direction: column; gap: 18px; } .pdp-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pdp-info h1 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin: 0; line-height: 1.1; color: var(--ink); } .pdp-code { font-size: 16px !important; color: var(--text-muted); margin: -8px 0 0; } .pdp-code strong { color: var(--text); font-weight: 700; } /* Auth-aware price */ .pdp-price { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; } .pdp-price-out { display: inline-flex; align-items: center; gap: 8px; color: var(--green-800); font-weight: 700; font-size: 16px !important; } .pdp-price-out svg { width: 16px; height: 16px; } .pdp-price-out:hover { color: var(--green-700); } .pdp-price-in { display: none; flex-direction: column; gap: 4px; } .pdp-price-in .price { font-size: 22px; font-weight: 700; color: #303030 !important; letter-spacing: -0.02em; } .pdp-price-in .price-meta { font-size: 16px !important; color: var(--text-muted); } body.is-logged-in .pdp-price-out { display: none; } body.is-logged-in .pdp-price-in { display: flex; } /* Info panel sections */ .pdp-section { border-top: 1px solid var(--border); padding-top: 18px; display: flex; flex-direction: column; gap: 12px; } .pdp-section h3 { font-size: 16px !important; font-weight: 700; letter-spacing: 0.02em; color: var(--ink); margin: 0; } .pdp-section p { margin: 0; font-size: 16px !important; line-height: 1.55; color: var(--text); } .pdp-section p+p { margin-top: 6px; } .pdp-dims { font-size: 16px !important; color: var(--text-muted) !important; } .pdp-dims strong { color: var(--ink); font-weight: 700; } /* Qty stepper */ .qty-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .qty-simple { display: inline-flex; align-items: stretch; gap: 8px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 4px; width: fit-content; } .qty-simple .qty-step { background: var(--paper); border: 0; width: 38px; height: 38px; border-radius: 8px; font-size: 18px; font-weight: 700; color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background 0.15s ease; } .qty-simple .qty-step:hover { background: var(--green-050); color: var(--green-800); } .qty-simple input { font-family: inherit; font-size: 18px; font-weight: 700; color: var(--ink); width: 70px; border: 0; background: transparent; text-align: center; -moz-appearance: textfield; appearance: textfield; } .qty-simple input::-webkit-outer-spin-button, .qty-simple input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qty-simple .qty-suffix { align-self: center; margin-left: 4px; font-size: 16px !important; color: var(--text-muted); } /* CTAs + trust strip */ .pdp-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 480px) { .pdp-ctas { grid-template-columns: 1fr; } } /* Standard PDP only — hide fast quote, full-width add to cart */ .pdp-info--standard .fq-trigger { display: none !important; } .pdp-info--standard .pdp-ctas { width: 60% !important; grid-template-columns: 1fr !important; } .pdp-info--standard .single_add_to_cart_button { width: 100% !important; grid-column: 1 / -1 !important; border: 0px !important; } /* Variation selects — variable products */ .pdp-var-wrap { width: 100%; display: flex; flex-direction: column; gap: 12px; } .pdp-var-row { display: flex; flex-direction: column; gap: 6px; } .pdp-var-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .pdp-var-select { font-family: inherit; font-size: 14px; color: var(--text); background: var(--paper); border: 1px solid var(--border); border-radius: 4px; padding: 9px 36px 9px 12px; width: 100%; max-width: 280px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; transition: border-color 0.15s; } .pdp-var-select:focus { outline: none; border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(16,185,129,0.12); } /* Variation thumbnail swatches */ .pdp-var-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .pdp-var-thumb-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 80px; } .pdp-var-thumb { width: 80px; height: 80px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--white); padding: 0; color: #303030; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .pdp-var-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .pdp-var-thumb-label { display: block !important; visibility: visible !important; font-size: 10px; line-height: 1.3; text-align: center; color: var(--text) !important; word-break: break-word; width: 80px; } .pdp-var-thumb.is-active { border-color: var(--green-700); box-shadow: none !important; } .pdp-section--variants .pdp-var-thumbs button.pdp-var-thumb:hover, .pdp-section--variants .pdp-var-thumbs button.pdp-var-thumb:focus, .pdp-section--variants .pdp-var-thumbs button.pdp-var-thumb:active { border: 1px solid #13A35A !important; background: transparent !important; outline: none !important; } /* Pill variant: size / numeric attributes render as text chips, no image */ .pdp-var-thumbs--pill .pdp-var-thumb-wrap { width: auto; } .pdp-var-thumb--pill { width: auto; height: auto; min-width: 44px; padding: 7px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; line-height: 1.2; text-align: center; background: transparent; border: 1px solid var(--border); color: var(--ink); transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .pdp-var-thumb--pill.is-active { border-color: var(--green-700); color: var(--green-700); } .pdp-section--variants .pdp-var-thumbs button.pdp-var-thumb--pill:hover, .pdp-section--variants .pdp-var-thumbs button.pdp-var-thumb--pill:focus, .pdp-section--variants .pdp-var-thumbs button.pdp-var-thumb--pill:active { border: 1px solid #13A35A !important; background: transparent !important; color: var(--green-700) !important; outline: none !important; } .pdp-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 24px; padding-top: 6px; } .pdp-trust-item { display: inline-flex; align-items: center; gap: 8px; font-size: 16px !important; color: var(--text-muted); font-weight: 500; } .pdp-trust-item svg { width: 18px; height: 18px; color: var(--green-700); flex-shrink: 0; } /* Specs table */ .pdp-specs { background: var(--paper); border-top: 1px solid var(--border); padding: clamp(36px, 4vw, 56px) 0; } .pdp-specs h2 { font-size: clamp(1.5rem, 2.2vw, 1.8rem); margin: 0 0 20px; color: var(--ink); } .specs-table { width: 100%; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 16px !important; } .specs-table th, .specs-table td { padding: 14px 18px; text-align: left; vertical-align: top; } .specs-table th { width: 240px; background: var(--paper); font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--border); } .specs-table td { color: var(--text); border-bottom: 1px solid var(--border); } .specs-table tr:last-child th, .specs-table tr:last-child td { border-bottom: 0; } @media (max-width: 600px) { .specs-table th, .specs-table td { display: block; padding: 10px 16px; } .specs-table th { width: auto; padding-bottom: 4px; font-size: 16px !important; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); border-bottom: 0; } .specs-table td { padding-top: 0; padding-bottom: 14px; border-bottom: 1px solid var(--border); } } /* BB row background + full-width overrides */ .fl-node-72vxqz416pwc, .fl-node-72vxqz416pwc>.fl-row-content-wrap { background-color: #F5F5F2 !important; background-image: none !important; max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .fl-node-fajr56kqdnwe, .fl-node-fajr56kqdnwe>.fl-row-content-wrap { background-color: #F0EBDF !important; background-image: none !important; max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .fl-builder-content .fl-node-2sg7ked8lwbr > .fl-col-content { background-color: transparent !important; background-image: none !important; } /* Related products grid */ .pdp-related { background: var(--white); padding: clamp(40px, 4.5vw, 64px) 0; border-top: 1px solid var(--border); } .pdp-related .section-head { margin-bottom: 24px; } .related-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 580px) { .related-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .related-grid { grid-template-columns: repeat(4, 1fr); } } /* ============================================================ PDP — Media tabs (Photos / Preview) ============================================================ */ .pdp-tabs { display: inline-flex; background: var(--white); border: 1px solid var(--border); border-radius: 999px; padding: 4px; gap: 4px; align-self: flex-start; } .pdp-tab { background: transparent; border: 0; padding: 9px 18px; border-radius: 999px; font-size: 16px !important; font-weight: 700; letter-spacing: 0.02em; color: var(--text-muted); transition: background 0.15s ease, color 0.15s ease; } .pdp-tab:hover, .pdp-tab:focus, .pdp-tab:active, .pdp-tab:focus-visible { color: var(--ink); border: none !important; outline: none !important; box-shadow: none !important; background-color: transparent !important; } .pdp-tab.is-active:hover, .pdp-tab.is-active:focus, .pdp-tab.is-active:active, .pdp-tab.is-active:focus-visible { background-color: var(--green-700) !important; color: #fff !important; border: none !important; outline: none !important; box-shadow: none !important; } .pdp-tab.is-active { background: var(--green-700); color: #fff; } /* Hide "Preview your logo" tab — temporarily disabled */ .pdp-tab[data-pane="preview"] { display: none; } /* ============== Preview pane toolbar + stage ============== */ .preview-toolbar { display: flex; align-items: center; gap: 6px; background: var(--green-700); color: #fff; padding: 10px 14px; border-radius: var(--radius); flex-wrap: wrap; } .preview-tool { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; padding: 7px 12px; border-radius: 8px; color: rgba(255, 255, 255, 0.92); font-size: 16px !important; font-weight: 600; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .preview-tool:hover { background: rgba(255, 255, 255, 0.15); color: #fff; } .preview-tool svg { width: 16px; height: 16px; } .preview-tool.is-disabled { opacity: 0.4; pointer-events: none; } .preview-tool.ml-auto { margin-left: auto; } .preview-stage { position: relative; aspect-ratio: 4 / 3; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: grid; place-items: center; } /* FPD preview pane — keep in DOM so canvas initializes with real dimensions */ .pdp-pane[data-pane="preview"] { display: block !important; visibility: hidden; position: absolute; top: 0; left: 0; pointer-events: none; width: 100%; overflow: hidden; max-width: 100%; } .pdp-pane[data-pane="preview"].is-active { display: flex !important; visibility: visible; position: relative; pointer-events: auto; } /* Constrain FPD elements inside the pane */ .pdp-pane[data-pane="preview"] > *, [id^="fancy-product-designer"], .fpd-container { max-width: 100% !important; width: 100% !important; position: relative !important; } .preview-stage svg { width: 70%; height: 70%; max-width: 480px; } .preview-helper { font-size: 16px !important; color: var(--text-muted); margin: 0; padding: 0 4px; line-height: 1.5; } /* ============================================================ PDP — Info panel helpers ============================================================ */ .pdp-help { font-size: 16px !important; color: var(--text-muted); margin: 0; line-height: 1.45; } .pdp-help-sub { margin-top: 4px; } /* ── Beat BB parent theme blue on :active/:focus — match model HTML exactly ── */ .pdp-info .btn-primary:hover, .pdp-info .btn-primary:active, .pdp-info .btn-primary:focus { background-color: var(--orange-dark) !important; color: #fff !important; border: 0 !important; outline: none !important; } .pdp-info button.btn-outline:hover, .pdp-info button.btn-outline:active, .pdp-info button.btn-outline:focus { background-color: transparent !important; color: var(--green-700) !important; border: 1px solid var(--green-700) !important; outline: none !important; transform: none !important; } .pdp-info button.pdp-read-more:hover, .pdp-info button.pdp-read-more:active, .pdp-info button.pdp-read-more:focus { background-color: transparent !important; color: #0F824A !important; border: 1px solid #0F824A !important; border-radius: 30px !important; outline: none !important; } .pdp-info .swatch:hover, .pdp-info .swatch:active, .pdp-info .swatch:focus { background-color: var(--c) !important; color: inherit !important; border-color: var(--c) !important; outline: none !important; } .pdp-info .qty-step:hover, .pdp-info .qty-step:active, .pdp-info .qty-step:focus { background-color: var(--green-050) !important; color: var(--green-800) !important; border-color: transparent !important; outline: none !important; } .pdp-info .qty-row-remove:hover, .pdp-info .qty-row-remove:active, .pdp-info .qty-row-remove:focus { background-color: #13A35A !important; color: #ffffff !important; border-color: transparent !important; outline: none !important; } .pdp-info .btn-add-colour:hover, .pdp-info .btn-add-colour:active, .pdp-info .btn-add-colour:focus { background-color: transparent !important; color: var(--green-700) !important; border-color: var(--green-700) !important; outline: none !important; } .pdp-info .pop-cancel:hover, .pdp-info .pop-cancel:active, .pdp-info .pop-cancel:focus { background-color: var(--border) !important; color: var(--ink) !important; border-color: transparent !important; outline: none !important; } .pdp-info .pop-swatch:hover, .pdp-info .pop-swatch:active, .pdp-info .pop-swatch:focus { background-color: var(--green-050) !important; color: var(--ink) !important; border-color: var(--green-700) !important; outline: none !important; } /* ============================================================ PDP — Colour swatches ============================================================ */ .colour-swatches { display: flex; gap: 10px; flex-wrap: wrap; } .swatch { width: 36px; height: 36px; border-radius: 50%; background: var(--c); border: 2px solid var(--border); cursor: pointer; position: relative; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; padding: 0; } .swatch:hover { transform: scale(1.06); } /* 2026-09-02: one ring language. Previewing (the colour the photo shows) = white gap + green ring. Picked (in the order) = ink border. Both together stack cleanly instead of the old triple halo. */ .swatch.is-picked { border-color: var(--ink) !important; } .swatch.is-previewing { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--green-700) !important; } .swatch.is-previewing::after { content: none; } .swatch--img { width: 40px; height: 40px; border-radius: 50%; background: none; overflow: hidden; padding: 0; } .swatch--img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; pointer-events: none; } /* ============================================================ PDP — Multi-colour quantity rows ============================================================ */ .qty-rows { display: flex; flex-direction: column; gap: 8px; } .qty-row { display: flex; align-items: center; gap: 12px; background: var(--paper); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; animation: qty-row-in 0.18s var(--ease); } @keyframes qty-row-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .qty-color { width: 32px; height: 32px; border-radius: 50%; background: var(--c); border: 1.5px solid var(--border); flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } .qty-color img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; pointer-events: none; } .qty-name { font-weight: 700; font-size: 16px !important; color: var(--ink); flex: 1; min-width: 0; } .qty-row input { font-family: inherit; font-size: 16px !important; font-weight: 700; color: var(--ink); width: 80px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; text-align: center; background: var(--white); } .qty-row input:focus { outline: 2px solid var(--green-700); outline-offset: -1px; border-color: var(--green-700); } .qty-suffix { font-size: 16px !important; color: var(--text-muted); } .qty-row-remove { background: transparent; border: 0; color: var(--text-muted); cursor: pointer; font-size: 20px; line-height: 1; padding: 4px 8px; border-radius: 6px; transition: background 0.15s ease, color 0.15s ease; flex-shrink: 0; } .qty-row-remove:hover { background: #13A35A; color: #ffffff; } .qty-row-remove:disabled { opacity: 0.3; cursor: not-allowed; } /* ============================================================ PDP — Add-colour button + inline popover ============================================================ */ .add-colour-wrap { position: relative; margin-top: 8px; align-self: flex-start; } .btn-add-colour { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px dashed var(--border-strong); color: var(--green-800); font-weight: 700; font-size: 16px !important; padding: 9px 14px; border-radius: 8px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .btn-add-colour:hover, .btn-add-colour[aria-expanded="true"] { border: 1px solid #13A35A !important; color: var(--green-700); } .btn-add-colour svg { flex-shrink: 0; } .btn-add-colour.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } .add-colour-pop { margin-top: 10px; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; animation: pop-in 0.18s var(--ease); } @keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .pop-label { font-size: 16px !important; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .pop-cancel { background: transparent; border: 0; color: var(--text-muted); font-weight: 700; font-size: 16px !important; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background 0.15s ease, color 0.15s ease; } .pop-cancel:hover, .pop-cancel:focus, .pop-cancel:active { background: var(--border); color: var(--ink); border: none !important; outline: none !important; box-shadow: none !important; } .pop-swatches { display: flex; flex-wrap: wrap; gap: 8px; } .pop-swatch { display: inline-flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px 6px 6px; cursor: pointer; font-size: 16px !important; font-weight: 600; color: var(--ink); transition: border-color 0.15s ease, background 0.15s ease; } .pop-swatch:hover { border-color: var(--green-700); background: var(--green-050); } .pop-swatch::before { content: ""; width: 28px; height: 28px; border-radius: 50%; background: var(--c); border: 1.5px solid var(--border); flex-shrink: 0; } .pop-swatch--img::before { display: none; } .pop-swatch--img img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: block; flex-shrink: 0; border: 1.5px solid var(--border); pointer-events: none; } .pop-empty { font-size: 16px !important; color: var(--text-muted); font-style: italic; } /* ============================================================ PDP — MOQ progress widget ============================================================ */ .moq-progress { background: var(--green-050); border: 1px solid #C9E5D2; border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .moq-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 16px !important; } .moq-row strong { font-family: "Recursive", sans-serif; font-variation-settings: "CASL" 0; font-size: 22px; color: var(--green-800); font-weight: 700; letter-spacing: -0.02em; margin-right: 2px; } .moq-status { font-size: 16px !important; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange-dark); } .moq-status.is-ready { color: var(--green-800); } .moq-bar { height: 8px; background: var(--white); border-radius: 999px; overflow: hidden; border: 1px solid #C9E5D2; } .moq-fill { height: 100%; background: linear-gradient(90deg, var(--green-600), var(--green-700)); border-radius: 999px; transition: width 0.25s var(--ease); } .moq-fill.is-full { background: linear-gradient(90deg, var(--green-700), var(--green-800)); } .moq-rules summary { font-size: 16px !important; font-weight: 700; color: var(--green-800); cursor: pointer; padding: 4px 0; letter-spacing: 0.02em; list-style: none; } .moq-rules summary::-webkit-details-marker { display: none; } .moq-rules summary::after { content: " +"; font-weight: 700; } .moq-rules[open] summary::after { content: " −"; } .moq-rules ul { margin: 8px 0 0; padding-left: 18px; font-size: 16px !important; line-height: 1.55; color: var(--text); } .moq-rules li { margin-bottom: 4px; } .moq-rules li:last-child { margin-bottom: 0; } /** * Fast Quote Modal — child theme stylesheet addition * * Paste this into your child theme's main CSS file (e.g. optica-bb.css or style.css). * All colours use optica-tokens.css CSS custom properties — no hardcoded values. * * Depends on these tokens being defined: * --white, --paper, --ink, --text-muted, --border, --border-strong, * --green-050, --green-700, --green-800, --orange, --orange-dark */ .fq-overlay { display: none; position: fixed; inset: 0; background: rgba(12,31,22,0.55); z-index: 200; align-items: flex-start; justify-content: flex-end; } .fq-overlay.is-open { display: flex; } .fq-panel { background: var(--white); width: 100%; max-width: 440px; height: 100%; overflow-y: auto; padding: 32px 28px 40px; display: flex; flex-direction: column; gap: 20px; box-shadow: -18px 0 56px -10px rgba(12,31,22,0.22); transform: translateX(100%); transition: transform 280ms cubic-bezier(.2,.7,.2,1); } .fq-overlay.is-open .fq-panel { transform: translateX(0); } .fq-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .fq-head h2 { font-size: 1.4rem; margin: 0; color: var(--ink); line-height: 1.15; } .fq-close { background: var(--paper); border: 1px solid var(--border); border-radius: 8px; width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; cursor: pointer; color: var(--text-muted); transition: background 0.15s ease, color 0.15s ease; } .fq-close:hover { background: var(--border); color: var(--ink); } .fq-close svg { width: 16px; height: 16px; } .fq-subtitle { font-size: 16px !important; color: var(--text-muted); line-height: 1.5; margin: -8px 0 0; } .fq-product-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--green-050); border: 1px solid #C9E5D2; border-radius: 999px; padding: 8px 14px; font-size: 16px !important; font-weight: 600; color: var(--green-800); } .fq-product-pill svg { width: 14px; height: 14px; flex-shrink: 0; } .fq-form { display: flex; flex-direction: column; gap: 16px; } .fq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .fq-field { display: flex; flex-direction: column; gap: 6px; } .fq-field label { font-size: 16px !important; font-weight: 700; color: var(--ink); letter-spacing: 0.02em; } .fq-field label .req { color: var(--orange); margin-left: 2px; } .fq-field input, .fq-field select, .fq-field textarea { font-family: inherit; font-size: 16px !important; color: var(--ink); background: var(--white); border: 1px solid var(--border-strong); border-radius: 10px; padding: 11px 14px; width: 100%; transition: border-color 0.15s ease, box-shadow 0.15s ease; -webkit-appearance: none; } .fq-field input:focus, .fq-field select:focus, .fq-field textarea:focus { outline: none; border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(19,163,90,0.15); } .fq-field textarea { resize: vertical; min-height: 90px; } .fq-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23566963' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; } .fq-submit { background: var(--orange); color: #fff; border: 0; border-radius: 999px; padding: 16px 24px; font-size: 16px !important; font-weight: 700; width: 100%; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(232,93,44,0.55); transition: background 0.15s ease, transform 0.15s ease; letter-spacing: 0.01em; } .fq-submit:hover { background: var(--orange-dark); } .fq-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .fq-success { display: none; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 32px 0; } .fq-success-icon { width: 56px; height: 56px; background: var(--green-050); border-radius: 50%; display: grid; place-items: center; color: var(--green-700); } .fq-success-icon svg { width: 28px; height: 28px; } .fq-success h3 { font-size: 16px !important; margin: 0; color: var(--ink); } .fq-success p { font-size: 16px !important; color: var(--text-muted); margin: 0; max-width: 32ch; line-height: 1.5; } .fq-disclaimer { font-size: 16px !important; color: var(--text-muted); line-height: 1.45; text-align: center; } @media (max-width: 500px) { .fq-panel { max-width: 100%; padding: 24px 18px 32px; } .fq-row { grid-template-columns: 1fr; } } /* ── Fast Quote — WPForms overrides ── */ /* Hide auto-populated backend fields */ #wpforms-40355-field_14-container, #wpforms-40355-field_15-container, #wpforms-40355-field_8-container, #wpforms-40355-field_12-container { display: none !important; } .fq-panel .wpforms-field-container { display: flex; flex-direction: column; gap: 16px; } .fq-panel .wpforms-field { margin: 0 !important; padding: 0 !important; } /* Labels */ .fq-panel .wpforms-field-label, .fq-panel .wpforms-field legend.wpforms-field-label { font-family: "Atkinson Hyperlegible Next", sans-serif !important; font-size: 14px !important; font-weight: 700 !important; color: var(--ink) !important; letter-spacing: 0.02em !important; margin-bottom: 6px !important; display: block !important; } .fq-panel .wpforms-required-label { color: var(--orange) !important; } /* Inputs, selects, textareas */ .fq-panel .wpforms-field input[type="text"], .fq-panel .wpforms-field input[type="email"], .fq-panel .wpforms-field input[type="tel"], .fq-panel .wpforms-field select, .fq-panel .wpforms-field textarea { font-family: "Atkinson Hyperlegible Next", sans-serif !important; font-size: 15px !important; color: var(--ink) !important; background: var(--white) !important; border: 1px solid var(--border-strong) !important; border-radius: 10px !important; padding: 11px 14px !important; width: 100% !important; box-shadow: none !important; transition: border-color 0.15s ease, box-shadow 0.15s ease !important; -webkit-appearance: none !important; height: auto !important; } .fq-panel .wpforms-field input:focus, .fq-panel .wpforms-field select:focus, .fq-panel .wpforms-field textarea:focus { outline: none !important; border-color: var(--green-700) !important; box-shadow: 0 0 0 3px rgba(19,163,90,0.15) !important; } /* Name field — two columns */ .fq-panel .wpforms-field-name .wpforms-field-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 12px !important; width: 100% !important; overflow: hidden !important; } .fq-panel .wpforms-field-name .wpforms-field-row::before, .fq-panel .wpforms-field-name .wpforms-field-row::after { display: none !important; } .fq-panel .wpforms-field-name .wpforms-field-row-block { flex: 1 1 0 !important; width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; min-width: 0 !important; } /* Sublabels hidden */ .fq-panel .wpforms-field-sublabel { display: none !important; } /* Checkboxes */ .fq-panel .wpforms-field-checkbox ul { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 8px 16px !important;a } .fq-panel .wpforms-field-checkbox ul li { display: flex !important; align-items: center !important; gap: 8px !important; } .fq-panel .wpforms-field-checkbox input[type="checkbox"] { width: 16px !important; height: 16px !important; border: 1px solid var(--border-strong) !important; border-radius: 4px !important; padding: 0 !important; flex-shrink: 0 !important; accent-color: var(--green-700) !important; } .fq-panel .wpforms-field-checkbox .wpforms-field-label-inline { font-size: 15px !important; font-weight: 500 !important; color: var(--text) !important; margin: 0 !important; } /* Select dropdown arrow */ .fq-panel .wpforms-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23566963' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; padding-right: 36px !important; cursor: pointer !important; } /* Submit button */ .fq-panel .wpforms-submit-container { margin: 4px 0 0 !important; padding: 0 !important; } .fq-panel .wpforms-submit { background: var(--orange) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: 16px 24px !important; font-size: 16px !important; font-weight: 700 !important; width: 100% !important; cursor: pointer !important; box-shadow: none !important; transition: background 0.15s ease !important; letter-spacing: 0.01em !important; font-family: "Atkinson Hyperlegible Next", sans-serif !important; } .fq-panel .wpforms-submit:hover { background: var(--orange-dark) !important; } /* reCAPTCHA spacing */ .fq-panel .wpforms-recaptcha-container { margin: 4px 0 !important; } /* Hide spinner */ .fq-panel .wpforms-submit-spinner { display: none !important; } @media (min-width: 960px) { .fl-node-ack7ez1b4riy > .fl-col-content, .fl-node-5xr1nk8cvms4 > .fl-col-content { width: 1280px !important; } } .qty-header { padding-top: 10px; } /* Hide same-day despatch note */ .qty-header span { display: none !important; } /* ========================================================================== DESIGN STATE OVERRIDES — added 2026-09-05 The Beaver Builder theme skin styles bare elements: button:focus, button:active { background-color:#13a35a; color:#fff } The design styles classes, never elements, so every state it does not explicitly claim falls through to that theme default. That is why clicking a left-nav parent to expand it turned it solid green with white text. Claim the missing states here, in one place, rather than per component. Scope: bare buttons only. Anything carrying .button (WooCommerce), .fl-button (Beaver Builder) or living in the admin bar paints itself and is deliberately left alone. ========================================================================== */ button:focus:not(.button):not(.fl-button), button:active:not(.button):not(.fl-button), input[type="button"]:focus:not(.button):not(.adminbar-button), input[type="button"]:active:not(.button):not(.adminbar-button), input[type="submit"]:focus:not(.button):not(.adminbar-button), input[type="submit"]:active:not(.button):not(.adminbar-button) { background-color: transparent; color: inherit; border-color: transparent; outline: none; } /* Keyboard users must still see where they are. Brand green, not the browser's blue ring. A mouse click does not trigger :focus-visible. */ button:focus-visible:not(.button):not(.fl-button), input[type="button"]:focus-visible:not(.button):not(.adminbar-button), input[type="submit"]:focus-visible:not(.button):not(.adminbar-button) { outline: 2px solid var(--green-700); outline-offset: 2px; } /* An open left-nav parent reads like the selected child: same pale green, same green text. The inset bar stays exclusive to the current page, so "this section is open" and "you are here" remain distinguishable. */ .cat-toplevel[aria-expanded="true"] { background: var(--green-050); color: var(--green-800); } /* master port 18 Sep 2026: three help cards without Iris; call card carries AU + NZ links */ @media (min-width: 1000px) { #help .help-grid { grid-template-columns: repeat(3, 1fr); } } #help .help-card-call .help-card-action { flex-wrap: wrap; } #help .help-card-call .help-card-action a { color: inherit; text-decoration: none; } #help .help-card-call .help-card-action a:hover, #help .help-card-call .help-card-action a:focus-visible { text-decoration: underline; }