/** Shopify CDN: Minification failed Line 6:841 Unexpected "}" **/ .m-header__desktop .m-header__center{flex:0 1 auto!important} .m-header__desktop .m-header__right{justify-content:flex-start!important;padding-left:26px} .m-header__desktop .m-header__right>.m-header__search{width:auto!important;flex:0 0 auto!important;justify-content:flex-start!important} body.ed-top .m-header__mobile .m-hamburger-box__inner,body.ed-top .m-header__mobile .m-hamburger-box__inner:before,body.ed-top .m-header__mobile .m-hamburger-box__inner:after{background-color:#fff!important} body.ed-top .m-header__mobile-right a,body.ed-top .m-header__mobile-right svg{color:#fff!important;fill:#fff!important;stroke:#fff!important} body.ed-top .m-header__mobile .m-hamburger-box,body.ed-top .m-header__mobile-right{filter:drop-shadow(0 1px 4px rgba(0,0,0,.55))} h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-weight:400!important} }body.contact-information #MainContent{display:flex;flex-direction:column} body.contact-information #MainContent>.shopify-section{order:3} body.contact-information #MainContent>.shopify-section:has(.m-custom-liquid){order:1} body.contact-information #MainContent>.shopify-section:has(.m-contact-form){order:2} body.contact-information .m-richtext{display:block!important} body.contact-information .m-richtext__description{margin-left:0!important;padding-left:0!important;max-width:68ch} body.contact-information .m-richtext__title{margin-bottom:16px!important} body.contact-information .m-contact-form__main{margin-left:0!important;max-width:760px;width:100%!important;flex:0 0 auto!important;padding-left:0!important} body.contact-information .m-contact-form .m-row{justify-content:flex-start!important} body.contact-information .m-section.m-custom-liquid{padding:36px clamp(20px,5.8vw,95px) 0!important} body.contact-information .m-section.m-contact-form{padding-top:28px!important;padding-bottom:24px!important} body.contact-information .m-section.m-rich-text{padding-top:8px!important;padding-bottom:40px!important} body.contact-information .m-section-my{margin-top:0!important;margin-bottom:0!important} body.contact-information #MainContent{display:flex;flex-direction:column} body.contact-information #MainContent>.shopify-section{order:3} body.contact-information #MainContent>.shopify-section:has(.m-custom-liquid){order:1} body.contact-information #MainContent>.shopify-section:has(.m-contact-form){order:2} body.contact-information .m-richtext{display:block!important} body.contact-information .m-richtext__description{margin-left:0!important;padding-left:0!important;max-width:68ch} body.contact-information .m-richtext__title{margin-bottom:16px!important} body.contact-information .m-contact-form__main{margin-left:0!important;max-width:760px;width:100%!important;flex:0 0 auto!important;padding-left:0!important} body.contact-information .m-contact-form .m-row{justify-content:flex-start!important} body.contact-information .m-section.m-custom-liquid{padding:36px clamp(20px,5.8vw,95px) 0!important} body.contact-information .m-section.m-contact-form{padding-top:28px!important;padding-bottom:24px!important} body.contact-information .m-section.m-rich-text{padding-top:8px!important;padding-bottom:40px!important} body.contact-information .m-section-my{margin-top:0!important;margin-bottom:0!important} body.template-collection .m-collection-page-header__inner,body.template-collection .m-collection-page-header__inner *{text-align:left!important} body.template-collection .m-collection-page-header__inner{padding-left:0!important;padding-right:0!important;padding-bottom:8px!important} body.template-collection [class*=breadcrumb]{text-align:left!important;justify-content:flex-start!important} body.template-collection .m-section.m-custom-liquid{padding:16px 0 8px 0!important} body.template-collection .m-section.m-custom-liquid,body.template-collection .m-section.m-custom-liquid *{text-align:left!important} body.template-collection .m-section.m-custom-liquid>div{max-width:1280px!important;margin:0 auto!important;padding:0 15px!important} body.template-collection .m-section.m-custom-liquid p{max-width:80ch} body.template-collection .m-collection--wrapper{margin-top:8px!important} body.template-collection .m-collection-products{margin-top:8px!important} body.template-collection .m-collection-page-header__inner,body.template-collection .m-collection-page-header__inner *{text-align:left!important} body.template-collection .m-collection-page-header__inner{padding-left:0!important;padding-right:0!important;padding-bottom:8px!important} body.template-collection [class*=breadcrumb]{text-align:left!important;justify-content:flex-start!important} body.template-collection .m-section.m-custom-liquid{padding:16px 0 8px 0!important} body.template-collection .m-section.m-custom-liquid,body.template-collection .m-section.m-custom-liquid *{text-align:left!important} body.template-collection .m-section.m-custom-liquid>div{max-width:1280px!important;margin:0 auto!important;padding:0 15px!important} body.template-collection .m-section.m-custom-liquid p{max-width:80ch} body.template-collection .m-collection--wrapper{margin-top:8px!important} body.template-collection .m-collection-products{margin-top:8px!important} .m-product-card__name{display:flex!important;flex-direction:column;align-items:center;width:100%} .m-product-card__name::after{content:"Get a quote";margin-top:14px;padding:9px 20px;border:1px solid rgba(18,16,14,.35);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#12100e;line-height:1;white-space:nowrap;transition:.22s ease} .m-product-card:hover .m-product-card__name::after{background:#12100e;color:#fff;border-color:#12100e} .m-product-card__name{display:flex!important;flex-direction:column;align-items:center;width:100%} .m-product-card__name::after{content:"Get a quote";margin-top:14px;padding:9px 20px;border:1px solid rgba(18,16,14,.35);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#12100e;line-height:1;white-space:nowrap;transition:.22s ease} .m-product-card:hover .m-product-card__name::after{background:#12100e;color:#fff;border-color:#12100e} body.template-index .container-fluid,body.template-index .m-collection-list{max-width:1280px!important;margin-left:auto!important;margin-right:auto!important;padding-left:15px!important;padding-right:15px!important} body.template-index .shopify-section:not(:first-child) .m-section{padding-top:clamp(32px,3.4vw,48px)!important;padding-bottom:clamp(32px,3.4vw,48px)!important} body.template-index .m-section-my{margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important} body.template-index .m-section__header{margin-bottom:26px!important;padding-left:0!important;padding-right:0!important} body.template-index .m-collection-list__header-container{padding-left:0!important;padding-right:0!important} body.template-index .m-collection-list{padding-left:0!important;padding-right:0!important} body.template-index .m-collection-list__container{margin-left:-15px!important;margin-right:-15px!important} .ed-hero__inner{max-width:1280px!important;padding-left:15px!important;padding-right:15px!important} .ed-hero__bar-inner{max-width:1280px!important;padding-left:15px!important;padding-right:15px!important} body.template-index .container-fluid,body.template-index .m-collection-list{max-width:1280px!important;margin-left:auto!important;margin-right:auto!important;padding-left:15px!important;padding-right:15px!important} body.template-index .shopify-section:not(:first-child) .m-section{padding-top:clamp(32px,3.4vw,48px)!important;padding-bottom:clamp(32px,3.4vw,48px)!important} body.template-index .m-section-my{margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important} body.template-index .m-section__header{margin-bottom:26px!important;padding-left:0!important;padding-right:0!important} body.template-index .m-collection-list__header-container{padding-left:0!important;padding-right:0!important} body.template-index .m-collection-list{padding-left:0!important;padding-right:0!important} body.template-index .m-collection-list__container{margin-left:-15px!important;margin-right:-15px!important} .ed-hero__inner{max-width:1280px!important;padding-left:15px!important;padding-right:15px!important} .ed-hero__bar-inner{max-width:1280px!important;padding-left:15px!important;padding-right:15px!important} /* ========================================================================== Element Decor — accessibility, contrast, touch & motion patch -------------------------------------------------------------------------- Where to paste: Shopify admin → Online Store → Themes → ⋯ → Edit code → Assets → custom.css → paste at the END of the file. To roll back: delete everything between the two ED-PATCH markers. Every number in the comments was measured on the live site (2026-08-20) and re-measured after applying this file: contrast failures 17 → 0 tap targets under 44px 23 → 3 (the 3 remaining meet WCAG 2.5.8) NOTE ON SPECIFICITY. The custom `ed-*` sections ship their CSS in inline inline style blocks inside the page body, which come AFTER custom.css in the cascade. A single-class selector therefore loses. Selectors below are deliberately doubled (.ed-rv__src.ed-rv__src) to raise specificity without !important. ========================================================================== */ /* === ED-PATCH START ====================================================== */ /* -------------------------------------------------------------------------- 1. VISIBLE KEYBOARD FOCUS — WCAG 2.4.7 (A) The theme defines NO :focus-visible styles anywhere (0 occurrences in main.css, vendor.css and all inline CSS), and `.m-button` sets `outline:none` in its base rule, so every theme button loses the browser's default ring. Everything else falls back to the UA ring, which is near-invisible on the dark hero. This gives one consistent brand ring. -------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ed-accent) !important; outline-offset: 3px !important; border-radius: 2px; } /* Inverted ring where the background is dark photography. */ .ed-hero a:focus-visible, .ed-hero button:focus-visible, .m-footer a:focus-visible, .m-footer button:focus-visible { outline-color: #FFFFFF !important; box-shadow: 0 0 0 5px rgba(0, 0, 0, .6); } /* Focus must not land under the header — WCAG 2.4.11 (AA). */ html { scroll-padding-top: 96px; } /* -------------------------------------------------------------------------- 2. TEXT CONTRAST — WCAG 1.4.3 (AA) Measured failure → lightest replacement that reaches 4.5:1 on the same background while keeping the original warm hue. -------------------------------------------------------------------------- */ /* "Google review" byline: #9A938B on #FFF = 3.03:1 → var(--ed-muted) = 4.53:1 */ .ed-rv__src.ed-rv__src { color: var(--ed-muted); } /* "Rough measurements are fine": #8B837B on #FFF = 3.73:1 → var(--ed-muted) = 4.52:1 */ .ed-uw__s.ed-uw__s, .ed-uw__box p, .ed-uw__done p { color: var(--ed-muted); } /* Category descriptions: #8B837B on #F6F1E9 = 3.32:1 → var(--ed-muted) = 4.53:1 */ .ed-sc__sub.ed-sc__sub { color: var(--ed-muted); } /* 01–07 numerals: #B3A99E on #F6F1E9 = 2.06:1 → var(--ed-muted) = 4.53:1 */ .ed-sc__num.ed-sc__num { color: var(--ed-muted); } .ed-sc__it.on .ed-sc__num.ed-sc__num { color: var(--ed-accent); } /* 5.18:1, passes */ /* -------------------------------------------------------------------------- 3. MINIMUM TEXT SIZE 73 text nodes measured below 14px, including 10.5px uppercase labels with .2em tracking. 12px is the floor for tracked uppercase micro-copy. -------------------------------------------------------------------------- */ .ed-sc__num.ed-sc__num, .ed-rv__src.ed-rv__src, .ed-rv__lab.ed-rv__lab, .ed-sc .lab.lab, .ed-uw__f label, .ed-hero__eyebrow.ed-hero__eyebrow { font-size: 12px; } /* -------------------------------------------------------------------------- 4. TOUCH TARGETS — WCAG 2.5.8 (AA, 24px) / iOS 44pt / Android 48dp 23 controls measured under 44px at 375px wide: the hero's secondary CTA was 107x24, the whole footer nav 22px tall, the header phone icon 52x20. Sizing uses min-height + inline-flex so no layout position changes. -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .ed-btn--line.ed-btn--line { min-height: 44px; display: inline-flex; align-items: center; padding: 10px 0 8px; } .ed-rv__link.ed-rv__link, .m-footer a, .m-footer--block-menu a, .m-footer__bottom a { min-height: 44px; display: inline-flex; align-items: center; } .m-footer .social-media-links--item, .m-footer .social-media-links--item a { min-width: 44px; justify-content: center; } } /* Header phone icon (was 52x20) and back-to-top (was 40x40). */ .m-topbar__phone { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } #scroll-to-top-button.m-button--scroll-top { min-width: 44px; min-height: 44px; } /* -------------------------------------------------------------------------- 5. REDUCED MOTION — WCAG 2.3.3 / 2.2.2 The custom ed-* sections contain zero reduced-motion handling: a 46s auto-scrolling review marquee runs for everyone, and every block enters from opacity:0. The theme's own scroll-trigger animations already respect the preference; these do not. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* Show the final state at once. Never leave content at opacity:0. */ .ed-r { animation: none !important; opacity: 1 !important; transform: none !important; } /* Stop the review marquee and let the cards wrap instead. */ .ed-rv__track { animation: none !important; transform: none !important; flex-wrap: wrap; width: auto; } .ed-sc__stage img, .ed-sc__it, .ed-sc__ar, .ed-btn { transition-duration: .01ms !important; } } /* The marquee pauses on hover, which does not exist for keyboard users, so it pauses on focus-within too. An explicit pause control was built and then removed at the client's request: it did not belong in the design. WCAG 2.2.2 still wants one, so that finding stays open rather than fixed. */ .ed-rv__view:focus-within .ed-rv__track { animation-play-state: paused; } /* -------------------------------------------------------------------------- 6. LCP — the hero H1 starts at opacity:0 and animates in with a 150ms delay plus a 900ms duration. Largest Contentful Paint cannot be recorded until it is visible, so the page reports ~1s worse than it renders. The eyebrow, sub-headline and CTAs keep their stagger; only the H1 comes in early. -------------------------------------------------------------------------- */ .ed-hero__title.ed-r { animation-duration: .45s; animation-delay: 0s; } /* -------------------------------------------------------------------------- 7. "MATERIALS" HIDDEN FROM NAVIGATION — temporary, at the client's request. The whole list item goes, not just the link, so no empty gap is left in the menu. display:none also removes it from the accessibility tree, so screen readers and keyboard users see the same menu as everyone else. This only hides the entry. /pages/materials still exists, is still reachable by direct link and still indexable. To remove it for good, delete the item in Content -> Menus -> Main menu and drop this block. -------------------------------------------------------------------------- */ li:has(> a[href="/pages/materials"]), .m-menu__item:has(a[href="/pages/materials"]), .m-menu-mobile__item:has(a[href="/pages/materials"]) { display: none !important; } .m-footer a[href="/pages/materials"] { display: none !important; } /* -------------------------------------------------------------------------- 8. QUOTE FORM on /pages/custom-design The markup lives in the page body (Content -> Pages), because Shopify page content is not part of the theme. These are its styles; the inline validation lives at the end of theme.liquid. Inputs are 48px tall and 16px, which is what stops iOS zooming the page on focus. -------------------------------------------------------------------------- */ .ed-quote-form { max-width: 640px; } .ed-qf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin: 0 0 8px; } .ed-qf__field { display: flex; flex-direction: column; margin: 0; } .ed-qf__field--full { grid-column: 1 / -1; } @media (max-width: 640px) { .ed-qf__grid { grid-template-columns: 1fr; } } .ed-quote-form label { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ed-body); /* 9.6:1 on white */ margin-bottom: 7px; } .ed-qf__req { color: var(--ed-accent); } .ed-quote-form input, .ed-quote-form textarea { min-height: 48px; padding: 12px 14px; font-size: 16px; font-family: inherit; color: var(--ed-ink); background: #fff; border: 1px solid var(--ed-rule); border-radius: 4px; } .ed-quote-form textarea { min-height: 128px; resize: vertical; } .ed-quote-form input:focus-visible, .ed-quote-form textarea:focus-visible { outline: 2px solid var(--ed-accent); outline-offset: 2px; border-color: var(--ed-accent); } .ed-qf__hint { font-size: 13px; line-height: 1.5; color: var(--ed-muted); margin-top: 6px; } .ed-qf__error { font-size: 13px; line-height: 1.5; color: #A32116; margin-top: 6px; display: none; } .ed-qf__field.is-invalid .ed-qf__error { display: block; } .ed-qf__field.is-invalid input, .ed-qf__field.is-invalid textarea { border-color: #A32116; } .ed-qf__errors { border: 1px solid #A32116; border-left-width: 4px; background: #FDF6F5; padding: 18px 20px; margin: 0 0 26px; border-radius: 4px; } .ed-qf__errors h4 { margin: 0 0 8px; font-size: 17px; color: #A32116; } .ed-qf__errors ul { margin: 0; padding-left: 18px; } .ed-qf__errors a { color: #A32116; } /* Honeypot: off-screen for people, still fillable by a bot. */ .ed-qf__hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ed-qf__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin: 26px 0 0; } .ed-qf__submit { min-height: 52px; padding: 15px 30px; background: var(--ed-ink); color: #fff; border: 0; border-radius: 6px; font-size: 15px; font-family: inherit; letter-spacing: .04em; cursor: pointer; transition: background .2s ease; } .ed-qf__submit:hover { background: var(--ed-accent); } .ed-qf__submit[aria-disabled="true"] { opacity: .6; cursor: progress; } .ed-qf__attach { min-height: 44px; display: inline-flex; align-items: center; color: var(--ed-accent); font-size: 15px; } .ed-qf__note { margin: 16px 0 0; color: var(--ed-muted); } /* -------------------------------------------------------------------------- 9. DESIGN TOKENS Not invented: measured off the pages this brand already gets right, then reduced to one ladder. The site was running six near-identical dark greys (var(--ed-ink) #3B3530 var(--ed-body) #6F665E var(--ed-muted) var(--ed-muted)) and body text at 11, 12, 13, 15, 16, 17, 18 and 30px. Values that close together read as mistakes rather than decisions, which is exactly what made new sections look bolted on. Type sizes below are the homepage's own: 92 / 40 / 26 / 20 / 15 / 13 / 12. Greys are cut to three, each one checked against white: --ed-ink var(--ed-ink) 18.9:1 --ed-body var(--ed-body) 9.6:1 --ed-muted #6F665E 5.0:1 -------------------------------------------------------------------------- */ :root{ /* ink */ --ed-ink:#12100E; --ed-body:#4A443E; --ed-muted:#6F665E; --ed-accent:#8A5A3B; --ed-rule:#DDD5CA; --ed-cream:#F6F1E9; --ed-cream-2:#EFECE7; --ed-white:#FFFFFF; --ed-dark:#0F0D0C; /* display type, serif */ --ed-t-xl:clamp(42px,6vw,92px); --ed-t-display:clamp(30px,4.4vw,60px); --ed-t-l:clamp(28px,3.6vw,40px); --ed-t-m:clamp(20px,2vw,26px); --ed-t-s:20px; /* running type, sans */ --ed-t-body:15px; --ed-t-small:13px; --ed-t-micro:12px; --ed-track:.2em; /* space */ --ed-1:4px; --ed-2:8px; --ed-3:12px; --ed-4:16px; --ed-5:24px; --ed-6:32px; --ed-7:48px; --ed-8:64px; --ed-9:clamp(56px,7vw,96px); --ed-10:clamp(72px,9vw,128px); /* one container width for the whole site */ --ed-container:1280px; --ed-gutter:clamp(18px,4vw,56px); } /* === ED-PATCH END ======================================================== */