/* Theme Name: Debsan Design Center Theme URI: https://wemarketma.com Author: We Market MA Author URI: https://wemarketma.com Description: Child theme of Hello Elementor. Header, footer, menu and page layouts are edited in Elementor (Theme Builder); business details are under Settings > Business Details; colours and fonts are Elementor's Global Colors and Fonts. Template: hello-elementor Version: 1.0.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: wmm-child */ /* The Global Colors as CSS variables, for the client's own CSS below. Change a colour in Elementor and these follow. */ :root { --wmm-base: var(--e-global-color-wmm_base, #F6F5F2); --wmm-surface: var(--e-global-color-wmm_surface, #F7F7F7); --wmm-contrast: var(--e-global-color-wmm_contrast, #232643); --wmm-heading: var(--e-global-color-wmm_heading, #232643); --wmm-muted: var(--e-global-color-wmm_muted, #6D6E80); --wmm-line: var(--e-global-color-wmm_line, #B7B7BD); --wmm-accent: var(--e-global-color-wmm_accent, #121247); --wmm-accent-hi: var(--e-global-color-wmm_accent_hi, #E3DBC7); --wmm-on-accent: var(--e-global-color-wmm_on_accent, #F6F5F2); --wp--preset--color--base: var(--wmm-base); --wp--preset--color--surface: var(--wmm-surface); --wp--preset--color--contrast: var(--wmm-contrast); --wp--preset--color--heading: var(--wmm-heading); --wp--preset--color--muted: var(--wmm-muted); --wp--preset--color--line: var(--wmm-line); --wp--preset--color--accent: var(--wmm-accent); --wp--preset--color--accent-hi: var(--wmm-accent-hi); --wp--preset--color--on-accent: var(--wmm-on-accent); --wp--preset--font-family--display: var(--e-global-typography-wmm_heading-font-family, 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif); --wp--preset--font-family--body: var(--e-global-typography-wmm_body-font-family, 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif); } /* Client-specific CSS (wp-build/theme-overrides/style.css) */ /* Debsan Design Center: client CSS for the Elementor child theme. Generated by theme-overrides/build_css.py from design-preview/duplicate/src (the approved preview) and theme-overrides/src/elementor.css. Do not edit by hand. */ /* ==================== Elementor adapter (theme-overrides/src/elementor.css) ==================== Fits the kit's header, footer, call bar and page-type sections (the wmm-site plugin's sections.css and menu.css) to the approved preview (design-preview/duplicate). Sizes are the preview's design pixels ("Nuu"), turned into calc(var(--u) * N) by build_css.py: 1/1440 of the page width on desktop, 1/900 on tablet, 1/390 on phones, as on live. Colours: the nine Global Colors, re-pointed inside a band where the preview uses another of Debsan's colours (sand buttons on the navy bands, white form card, mist contact band), so editors still change them in one place. */ /* ---------- the preview's colour tokens (dup.css :root), used by the carried pages' own CSS ---------- */ :root { --navy: #232643; --sand: #E3DBC7; --off: #F6F5F2; --grey: #F7F7F7; --slate: #6D6E80; --mist: #E1E0E1; --button: #121247; --rule: #B7B7BD; --font: "Nunito", "Helvetica Neue", Arial, sans-serif; } /* ---------- the page: Debsan's background, text colour, font and letter spacing; the body is the size container ---------- */ body { container-type: inline-size; --u: calc(100cqw / 1440); background: #F6F5F2; color: #232643; font-family: "Nunito", "Helvetica Neue", Arial, sans-serif; letter-spacing: .02em; } @media (max-width: 1000px) { body { --u: calc(100cqw / 390); } } @media (min-width: 751px) and (max-width: 1000px) { body { --u: calc(100cqw / 900); } } :focus-visible { outline: 2px solid #232643; outline-offset: 2px; } /* ---------- carried live pages: the page's own markup, full width, with the preview's resets ---------- */ /* the post content band holds the page as it is: no band padding, no reading column */ .e-con.e-con.wmm-post-content:has(.dup-page) { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; } .elementor.elementor .e-con > .wmm-article:has(.dup-page) { max-width: none; margin: 0; font-size: 16px; line-height: normal; color: #232643; font-family: inherit; } .e-con.e-con.wmm-post-content:has(.dup-page) > .wmm-links:not(:has(li)) { display: none; } /* the preview's resets (dup.css), only inside a carried page: they never touch the kit's own widgets */ .dup-page.dup-page { line-height: normal; } .dup-page.dup-page :where(*) { box-sizing: border-box; } .dup-page.dup-page :where(img) { display: block; max-width: none; border-radius: 0; } .dup-page.dup-page :where(a) { color: inherit; text-decoration: none; } .dup-page.dup-page :where(h1, h2, h3, h4, h5, h6, p) { margin: 0; font-weight: 400; font-family: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; font-size: inherit; text-transform: none; } .dup-page.dup-page :where(ul, ol) { margin: 1em 0; padding-left: 40px; } /* the browser defaults the preview relies on */ .dup-page.dup-page :where(li) { margin: 0; } .dup-page .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- header (preview .hdr: 104 high, grey, logo 118, menu centred, call + consultation buttons) ---------- */ .e-con.e-con.wmm-header { min-height: calc(var(--u) * 104); --padding-left: calc(var(--u) * 48); --padding-right: calc(var(--u) * 40); --column-gap: calc(var(--u) * 32); box-shadow: 0 1px 0 rgba(35, 38, 67, .08); --e-global-color-wmm_accent_hi: #2A2A6B; } .wmm-header .wmm-logo img { width: calc(var(--u) * 118); max-width: none; max-height: none; height: auto; } @media (min-width: 1025px) { .wmm-nav nav.elementor-nav-menu--main { display: flex; justify-content: center; } } /* the menu centred between logo and buttons */ .wmm-nav .elementor-nav-menu--main .elementor-nav-menu { column-gap: calc(var(--u) * 30); } .wmm-nav .elementor-nav-menu--main .elementor-nav-menu::after { content: none; } /* Elementor's clearfix would add one more gap */ .wmm-nav .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item { padding: 0; font-size: calc(var(--u) * 17); color: #232643; } /* the preview's thin chevron in place of the icon font's */ .wmm-nav .elementor-nav-menu--main .elementor-nav-menu > li > a .sub-arrow { margin-left: calc(var(--u) * 7); padding: 0; font-size: 0; line-height: 0; } .wmm-nav .elementor-nav-menu--main .elementor-nav-menu > li > a .sub-arrow svg { display: none; } .wmm-nav .elementor-nav-menu--main .elementor-nav-menu > li > a .sub-arrow::after { content: ""; display: block; width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(calc(var(--u) * -2)) rotate(45deg); transition: transform .2s; } .wmm-nav .elementor-nav-menu--main .elementor-nav-menu > li > a.highlighted .sub-arrow { transform: none; } .wmm-nav .elementor-nav-menu--main .elementor-nav-menu > li > a.highlighted .sub-arrow::after { transform: translateY(calc(var(--u) * 1)) rotate(225deg); } .e-con.e-con.wmm-header-cta { --column-gap: calc(var(--u) * 12); } .wmm-header-cta .wmm-btn .elementor-button { min-height: calc(var(--u) * 46); padding: 0 calc(var(--u) * 22); font-size: calc(var(--u) * 16); } /* the dropdown opens at the header's lower edge, 18 to the left of its item (preview .dd-panel); a transparent bridge keeps it open while the pointer crosses the gap */ @media (min-width: 1025px) { .wmm-nav .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu { margin-top: calc(var(--u) * 34) !important; margin-left: calc(var(--u) * -18) !important; } /* SmartMenus writes zero margins inline */ .wmm-nav .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children::after { content: ""; position: absolute; left: calc(var(--u) * -18); right: 0; top: 100%; height: calc(var(--u) * 36); border: 0; } /* no divider: Elementor draws one on li::after */ } /* the dropdowns: white lists, the sand highlight (preview menu.css) */ .wmm-nav .elementor-nav-menu--main ul.sub-menu { background: #FFFFFF; --e-global-color-wmm_accent: #E3DBC7; --e-global-color-wmm_on_accent: #232643; } .wmm-nav .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item:hover, .wmm-nav .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item:focus-visible, .wmm-nav .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item.highlighted { background: #E3DBC7; color: #232643; } /* ---------- buttons: the preview's pill sizes and hover colours ---------- */ /* the buttons' weight: Elementor prints the Body global font's weight (400) on each button, so the variable is re-pointed */ .wmm-btn { --e-global-typography-wmm_body-font-weight: 700; } .wmm-btn .elementor-button { line-height: 1.35; letter-spacing: .02em; } .wmm-btn-call .elementor-button-content-wrapper::before { margin-right: calc(var(--u) * 8); } /* the navy bands (hero, call-to-action): the call button is sand with navy text, white on hover */ .e-con.wmm-hero, .e-con.wmm-cta { --e-global-color-wmm_accent: #E3DBC7; --e-global-color-wmm_on_accent: #232643; --e-global-color-wmm_accent_hi: #FFFFFF; } .e-con.wmm-hero .wmm-btn--ghost .elementor-button, .e-con.wmm-cta .wmm-btn--ghost .elementor-button { box-shadow: inset 0 0 0 1.5px rgba(246, 245, 242, .8); } /* light bands: the navy button turns #2A2A6B on hover, as on the preview */ .e-con.wmm-footer, .e-con.wmm-split, .e-con.wmm-contact { --e-global-color-wmm_accent_hi: #2A2A6B; } /* ---------- hero (preview .lp-hero: 1fr + 540 form, 64/68/72 padding, white H1 58, lede 20) ---------- */ .e-con.e-con.wmm-hero { --padding-top: calc(var(--u) * 64); --padding-bottom: calc(var(--u) * 72); --padding-left: calc(var(--u) * 68); --padding-right: calc(var(--u) * 68); --column-gap: calc(var(--u) * 72); grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--u) * 540)); } .e-con.e-con.wmm-hero--solo { grid-template-columns: minmax(0, calc(var(--u) * 860)); --padding-top: calc(var(--u) * 88); --padding-bottom: calc(var(--u) * 96); } .wmm-hero-text > .elementor-widget-heading { --e-global-color-wmm_base: #FFFFFF; } .wmm-hero h1.elementor-heading-title { font-size: calc(var(--u) * 58); line-height: 1.06; letter-spacing: -.005em; font-weight: 800; } .elementor.elementor .e-con > .wmm-lede { margin-top: calc(var(--u) * 22); max-width: calc(var(--u) * 620); font-size: calc(var(--u) * 20); line-height: 1.55; opacity: .88; } .e-con.wmm-ctas { margin-top: calc(var(--u) * 30); --row-gap: calc(var(--u) * 12); --column-gap: calc(var(--u) * 12); } .wmm-hero .wmm-ctas .wmm-btn .elementor-button, .wmm-cta .wmm-ctas .wmm-btn .elementor-button { min-height: calc(var(--u) * 54); padding: 0 calc(var(--u) * 28); font-size: calc(var(--u) * 17); } .e-con.e-con.wmm-formcard { --e-global-color-wmm_base: #FFFFFF; --padding-top: calc(var(--u) * 26); --padding-bottom: calc(var(--u) * 10); --padding-left: calc(var(--u) * 26); --padding-right: calc(var(--u) * 26); border-radius: calc(var(--u) * 10); box-shadow: 0 18px 40px rgba(10, 12, 30, .28); } .wmm-formcard h2.elementor-heading-title { font-size: calc(var(--u) * 24); line-height: 1.2; font-weight: 800; } .wmm-formcard .elementor-widget-text-editor { font-size: calc(var(--u) * 15); line-height: 1.5; } .wmm-form iframe { max-height: 860px; } /* the preview's cap on the HighLevel form's height */ .wmm-formcard .wmm-form .wmm-embed-form { min-height: 860px; } /* its space kept while the form loads, so nothing moves */ .wmm-form-wrap a, .wmm-form a { color: #232643; text-decoration: underline; text-underline-offset: .15em; } /* the A2P links beside the form */ /* ---------- bands (preview .lp-sec: 88/68 padding; heads 44 bold, centred) ---------- */ .e-con.e-con:is(.wmm-header, .wmm-footer, .wmm-callbar, .wmm-band, .wmm-hero) { --wmm-gutter: calc(var(--u) * 68); } .e-con.e-con.wmm-band { --padding-top: calc(var(--u) * 88); --padding-bottom: calc(var(--u) * 88); } .e-con.e-con.wmm-head { margin-bottom: calc(var(--u) * 44); max-width: calc(var(--u) * 860); } .wmm-head h2.elementor-heading-title, .wmm-pcards-title { font-size: calc(var(--u) * 44); line-height: 1.12; font-weight: 800; } .wmm-head .elementor-widget-text-editor { font-size: calc(var(--u) * 18); } .e-con.wmm-reviews { --e-global-color-wmm_surface: #F6F5F2; } /* ---------- long content (preview .lp-article: 780 column, 18/1.75 text, 34 and 22 headings) ---------- */ .elementor.elementor .e-con > .wmm-article { max-width: calc(var(--u) * 780); font-size: calc(var(--u) * 18); line-height: 1.75; } .wmm-article h2 { font-size: calc(var(--u) * 34); line-height: 1.18; margin-top: calc(var(--u) * 64); font-weight: 800; } .wmm-article h3 { font-size: calc(var(--u) * 22); line-height: 1.25; margin-top: calc(var(--u) * 30); font-weight: 800; } .wmm-article p, .wmm-article ul, .wmm-article ol { margin-top: calc(var(--u) * 16); } .wmm-article .lp-tiles a { position: relative; display: block; overflow: hidden; border-radius: calc(var(--u) * 10); text-decoration: none; color: #fff; } .wmm-article .lp-fig img, .wmm-article .lp-tiles img { max-width: none; } /* the preview's lp-article lists and captions (the location content has no lp-article wrapper): lists beside a floated photo */ .wmm-article :is(ul, ol):not([class]):not(.dup-page *) { display: flow-root; padding-left: 1.25em; } .wmm-article :is(ul, ol):not([class]):not(.dup-page *) li + li { margin-top: calc(var(--u) * 6); } .wmm-article figcaption { font-style: normal; } /* ---------- the location page's own bands (::split, ::cards, ::faq in the page; the preview's lp-split, lp-cards, lp-faq) ---------- */ .wmm-content-band { --wmm-band-gap: calc(var(--u) * 88); padding-left: calc(var(--u) * 68); padding-right: calc(var(--u) * 68); } /* the preview's lp-sec: 88 / 68 */ .wmm-article .wmm-content-band .wmm-band-title { max-width: calc(var(--u) * 860); margin-bottom: calc(var(--u) * 44); font-size: calc(var(--u) * 44); line-height: 1.12; font-weight: 800; letter-spacing: .005em; } .wmm-band-split { column-gap: calc(var(--u) * 72); } .wmm-split-media { top: calc(var(--u) * 130); } .wmm-split-media img { border-radius: calc(var(--u) * 10); } .wmm-split-text { font-size: calc(var(--u) * 18); line-height: 1.7; } .wmm-article .wmm-split-text h2 { font-size: calc(var(--u) * 38); line-height: 1.15; font-weight: 800; letter-spacing: .005em; } .wmm-article .wmm-split-text p, .wmm-article .wmm-split-text ul, .wmm-article .wmm-split-text ol { margin-top: calc(var(--u) * 18); } .wmm-article .wmm-split-text h3 { margin: 0; font-size: 1.17em; font-weight: 400; line-height: 1.7; } /* the preview's plain h3 in lp-prose */ .wmm-split-text .wp-block-buttons { margin-top: calc(var(--u) * 28); } .wmm-split-text .wp-block-button__link { display: inline-flex; align-items: center; height: calc(var(--u) * 50); padding: 0 calc(var(--u) * 26); border-radius: 999px; background: #121247; color: #F6F5F2; font-size: calc(var(--u) * 17); font-weight: 700; line-height: 1.35; text-decoration: none; } .wmm-split-text .wp-block-button__link:hover { background: #2a2a6b; color: #F6F5F2; } /* cards: the preview's sand band with off-white cards (Debsan's accent_hi is its sand) */ .wmm-band-cards { background: var(--e-global-color-wmm_accent_hi); } .wmm-band-cards .wmm-cards { gap: calc(var(--u) * 28); max-width: calc(var(--u) * 1240); margin: 0 auto; container-type: normal; } /* WordPress's grid layout makes it a size container: --u must stay the page's */ .wmm-band-cards .wmm-card { gap: calc(var(--u) * 10); padding: calc(var(--u) * 22) 0 calc(var(--u) * 26); border-radius: calc(var(--u) * 10); background: var(--e-global-color-wmm_base); } .wmm-band-cards .wmm-card > * { padding-left: calc(var(--u) * 24); padding-right: calc(var(--u) * 24); } .wmm-band-cards .wmm-card > .wp-block-image { margin-bottom: calc(var(--u) * 22); } .wmm-article .wmm-band-cards .wmm-card h3 { font-size: calc(var(--u) * 22); font-weight: 800; } .wmm-band-cards .wmm-card { gap: 0; } .wmm-article .wmm-band-cards .wmm-card p { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 16); } .wmm-band-cards .wmm-card .wp-block-buttons { padding-top: calc(var(--u) * 16); } .wmm-band-cards .wmm-card .wp-block-button__link { font-size: calc(var(--u) * 16); } /* "More for homes": the card holding a list of links, as the preview's centred row of pills under the cards */ .wmm-band-cards .wmm-card:has(> .wp-block-list) { grid-column: 1 / -1; margin-top: calc(var(--u) * 16); gap: calc(var(--u) * 16); padding: 0; background: none; border-radius: 0; text-align: center; } .wmm-band-cards .wmm-card:has(> .wp-block-list) > * { padding: 0; } .wmm-article .wmm-band-cards .wmm-card:has(> .wp-block-list) h3 { font-size: calc(var(--u) * 20); } .wmm-article .wmm-band-cards .wmm-card > ul.wp-block-list { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 10); margin: 0; padding: 0; list-style: none; } .wmm-band-cards .wmm-card > ul.wp-block-list li { margin: 0; } .wmm-band-cards .wmm-card > ul.wp-block-list a { display: inline-flex; align-items: center; height: calc(var(--u) * 40); padding: 0 calc(var(--u) * 18); border-radius: 999px; background: #F6F5F2; color: #232643; font-size: calc(var(--u) * 15); font-weight: 700; line-height: 1; text-decoration: none; } .wmm-band-cards .wmm-card > ul.wp-block-list a:hover { background: #232643; color: #F6F5F2; } .wmm-band-faq .wmm-faq-list { max-width: calc(var(--u) * 900); } .wmm-band-faq summary { gap: calc(var(--u) * 20); padding: calc(var(--u) * 22) calc(var(--u) * 4); } .wmm-band-faq summary::after { width: calc(var(--u) * 14); height: calc(var(--u) * 14); } .wmm-article .wmm-band-faq details p { padding: 0 calc(var(--u) * 44) calc(var(--u) * 24) calc(var(--u) * 4); font-size: calc(var(--u) * 18); } /* ---------- call-to-action band (preview .lp-cta: 72/68, white 40 heading, 18 text) ---------- */ .e-con.e-con.wmm-cta { --padding-top: calc(var(--u) * 72); --padding-bottom: calc(var(--u) * 72); } .wmm-cta h2.elementor-heading-title { font-size: calc(var(--u) * 40); line-height: 1.15; font-weight: 800; } .wmm-cta > .elementor-widget-heading { --e-global-color-wmm_base: #FFFFFF; } .elementor.elementor .e-con.wmm-cta > .elementor-widget-text-editor { max-width: calc(var(--u) * 640); margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 18); opacity: .85; } /* ---------- form and map (preview .lp-contact: mist band, white cards) ---------- */ .e-con.wmm-contact { --e-global-color-wmm_surface: #E1E0E1; } .e-con.wmm-contact .e-con.wmm-formcard, .e-con.wmm-contact .e-con.wmm-mapcard { --e-global-color-wmm_base: #FFFFFF; } .e-con.e-con.wmm-contact-in { gap: calc(var(--u) * 40); } .wmm-map iframe { min-height: calc(var(--u) * 420); } .wmm-contact .wmm-formcard > .elementor-widget-heading { display: none; } /* the preview's contact form card has no title */ .e-con.e-con.wmm-contact-details { --e-global-color-wmm_contrast: #232643; line-height: 1.5; --padding-top: calc(var(--u) * 22); --padding-bottom: calc(var(--u) * 22); --padding-left: calc(var(--u) * 26); --padding-right: calc(var(--u) * 26); font-size: calc(var(--u) * 16); } /* ---------- footer (preview .ftr: grey, four columns, the towns, the navy base line with sand text) ---------- */ .e-con.e-con.wmm-footer { border-top: 1px solid #E8E4DA; font-size: calc(var(--u) * 16); line-height: 1.6; } .e-con.e-con.wmm-footer-grid { gap: calc(var(--u) * 56); --padding-top: calc(var(--u) * 64); --padding-bottom: calc(var(--u) * 52); } .wmm-footer h2.elementor-heading-title { font-size: calc(var(--u) * 18); line-height: 1.2; font-weight: 800; margin-bottom: calc(var(--u) * 4); } .wmm-footer .wmm-logo img { width: calc(var(--u) * 150); max-width: none; } .wmm-footer-name { display: none; } .e-con.wmm-footer-contact { --e-global-color-wmm_muted: #232643; } /* address and hours in navy, as on the preview */ .wmm-footer-tel a, .wmm-contact-tel a { text-decoration: none; } .wmm-footer-tel .elementor-heading-title { font-size: calc(var(--u) * 18); font-weight: 800; } .wmm-legal-links .wmm-sep { display: none; } .wmm-legal-links a + .wmm-sep + a, .wmm-legal-links a + a { margin-left: calc(var(--u) * 24); } .wmm-footer-base a { text-decoration: none; } .wmm-footer-base .wmm-footer-credit a { text-decoration: underline; } /* the preview's footer shows the logo, not the name in text */ .elementor.elementor .e-con.wmm-footer-brand > .elementor-widget-text-editor { max-width: calc(var(--u) * 340); margin-top: 0; } .wmm-footer-disclaimer:not(:has(.wmm-footer-disclaimer-text)) { display: none; } /* no disclaimer: no empty slot in the base line */ .wmm-footer-cta .wmm-btn-call { display: none; } /* the preview's consultation column has one button */ /* the preview's brand icons: Facebook's blue circle, Instagram's gradient square */ .wmm-social { gap: calc(var(--u) * 14); margin-top: calc(var(--u) * 14); } .wmm-social a, .wmm-social a:hover, .wmm-social a:focus-visible { width: calc(var(--u) * 30); height: calc(var(--u) * 30); border: 0; border-radius: calc(var(--u) * 6); color: #FFFFFF; } .wmm-social a svg { width: 62%; height: 62%; } .wmm-social a[href*="facebook.com"] { border-radius: 50%; background: #1877F2; } .wmm-social a[href*="facebook.com"] svg { width: 70%; height: 70%; transform: translateY(12%); } .wmm-social a[href*="instagram.com"] { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); } .wmm-footer-note.wmm-footer-note, .wmm-footer-note p { --e-global-color-wmm_muted: #232643; color: #232643; } /* the preview's consultation line is navy */ .wmm-footer-cta .wmm-btn { margin-top: calc(var(--u) * 6); } .wmm-footer-cta .wmm-btn .elementor-button { min-height: calc(var(--u) * 44); padding: 0 calc(var(--u) * 22); font-size: calc(var(--u) * 16); } .wmm-footer-towns { padding: 0 calc(var(--u) * 68) calc(var(--u) * 40); } .wmm-towns-title { font-size: calc(var(--u) * 18); font-weight: 800; margin-bottom: calc(var(--u) * 10); } .wmm-towns-nav--list ul { gap: calc(var(--u) * 6) calc(var(--u) * 22); } .wmm-towns-nav--list a { font-size: calc(var(--u) * 15); color: #6D6E80; } .e-con.e-con.wmm-footer-base { --e-global-color-wmm_base: #E3DBC7; --padding-top: calc(var(--u) * 16); --padding-bottom: calc(var(--u) * 16); font-size: calc(var(--u) * 14); color: #E3DBC7; } .wmm-footer-base p { font-size: calc(var(--u) * 14); } /* ---------- phone (the preview's mobile layout, 390 base) ---------- */ @media (max-width: 1024px) { .e-con.e-con.wmm-header { min-height: calc(var(--u) * 64); --padding-left: calc(var(--u) * 20); --padding-right: calc(var(--u) * 8); --column-gap: calc(var(--u) * 6); } .wmm-header .wmm-logo img { width: calc(var(--u) * 70); } .wmm-header .wmm-callicon { --e-global-color-wmm_accent: #232643; } .wmm-callicon .wmm-phone-link { width: calc(var(--u) * 44); height: calc(var(--u) * 44); } .wmm-callicon .wmm-phone-link::before { width: calc(var(--u) * 20); height: calc(var(--u) * 20); } /* the preview's burger: three thin lines (2px of #6F7187, 7px apart) */ .wmm-nav .elementor-menu-toggle { width: calc(var(--u) * 48); height: calc(var(--u) * 44); color: #6F7187; } .wmm-nav .elementor-menu-toggle:not(.elementor-active) svg { display: none; } .wmm-nav .elementor-menu-toggle:not(.elementor-active) { background: linear-gradient(#6F7187, #6F7187) calc(var(--u) * 12) calc(var(--u) * 14) / calc(var(--u) * 24) calc(var(--u) * 2) no-repeat, linear-gradient(#6F7187, #6F7187) calc(var(--u) * 12) calc(var(--u) * 21) / calc(var(--u) * 24) calc(var(--u) * 2) no-repeat, linear-gradient(#6F7187, #6F7187) calc(var(--u) * 12) calc(var(--u) * 28) / calc(var(--u) * 24) calc(var(--u) * 2) no-repeat; } /* the phone menu as the preview's: a full-screen off-white overlay under the close button, items centred, the Services and Service Areas lists in white boxes and each town's pages in a sand box; no navy highlight */ .wmm-nav .elementor-menu-toggle.elementor-active { position: relative; z-index: 101; color: #232643; } .wmm-nav .elementor-menu-toggle.elementor-active svg { display: none; } /* the preview's thin close cross */ .wmm-nav .elementor-menu-toggle.elementor-active::before, .wmm-nav .elementor-menu-toggle.elementor-active::after { content: ""; position: absolute; left: calc(var(--u) * 11); top: calc(var(--u) * 21); width: calc(var(--u) * 24); height: calc(var(--u) * 2); background: #232643; transform: rotate(45deg); } .wmm-nav .elementor-menu-toggle.elementor-active::after { transform: rotate(-45deg); } .wmm-nav .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown.elementor-nav-menu__container { position: fixed; inset: 0; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 100; margin: 0; max-height: none; height: 100vh; height: 100dvh; overflow-y: auto; padding: calc(var(--u) * 112) 0 calc(var(--u) * 60); background: #F6F5F2; box-shadow: none; } .wmm-header .wmm-nav nav.elementor-nav-menu--dropdown { --e-global-color-wmm_accent: transparent; --e-global-color-wmm_on_accent: #232643; --e-global-color-wmm_surface: transparent; } .wmm-header .wmm-nav nav.elementor-nav-menu--dropdown .elementor-nav-menu > li > a { padding: calc(var(--u) * 7.35) calc(var(--u) * 20); font-size: calc(var(--u) * 16); } .wmm-header .wmm-nav nav.elementor-nav-menu--dropdown a, .wmm-header .wmm-nav nav.elementor-nav-menu--dropdown a:hover, .wmm-header .wmm-nav nav.elementor-nav-menu--dropdown a.highlighted, .wmm-header .wmm-nav nav.elementor-nav-menu--dropdown a:focus { background: transparent; color: #232643; text-decoration: none; } .wmm-header .wmm-nav nav.elementor-nav-menu--dropdown a.elementor-item-active { text-decoration: underline; text-underline-offset: .12em; } .wmm-header .wmm-nav nav.elementor-nav-menu--dropdown ul.sub-menu { width: calc(var(--u) * 300) !important; margin: calc(var(--u) * 6) auto 0; padding: calc(var(--u) * 8) calc(var(--u) * 10); border-radius: calc(var(--u) * 10); background: #FFFFFF; } .wmm-header .wmm-nav nav.elementor-nav-menu--dropdown ul.sub-menu a { padding: calc(var(--u) * 7) calc(var(--u) * 10); font-size: calc(var(--u) * 15); } /* the town's overview row as the preview's: a plain row like the town's other pages */ .wmm-header .wmm-nav nav.elementor-nav-menu--dropdown ul.sub-menu ul.sub-menu li.wmm-overview { border-bottom: 0; margin-bottom: 0; } .wmm-header .wmm-nav nav.elementor-nav-menu--dropdown ul.sub-menu ul.sub-menu li.wmm-overview a { font-weight: inherit; } .wmm-header .wmm-nav nav.elementor-nav-menu--dropdown ul.sub-menu ul.sub-menu { width: auto !important; margin: calc(var(--u) * 5) 0 calc(var(--u) * 2); padding: calc(var(--u) * 12) calc(var(--u) * 8); border-radius: calc(var(--u) * 8); background: #E3DBC7; } .wmm-header .wmm-nav nav.elementor-nav-menu--dropdown ul.sub-menu ul.sub-menu a { padding: calc(var(--u) * 5) 0; font-size: calc(var(--u) * 14); white-space: nowrap; } .wmm-header .wmm-nav nav.elementor-nav-menu--dropdown .sub-arrow { margin-left: calc(var(--u) * 8); padding: 0; font-size: 0; line-height: 0; } .wmm-header .wmm-nav nav.elementor-nav-menu--dropdown .sub-arrow svg { display: none; } .wmm-header .wmm-nav nav.elementor-nav-menu--dropdown .sub-arrow::after { content: ""; display: block; width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(calc(var(--u) * -2)) rotate(45deg); } .wmm-header .wmm-nav nav.elementor-nav-menu--dropdown a.highlighted .sub-arrow { transform: none; } .wmm-header .wmm-nav nav.elementor-nav-menu--dropdown a.highlighted .sub-arrow::after { transform: translateY(calc(var(--u) * 1)) rotate(225deg); } .e-con.e-con:is(.wmm-header, .wmm-footer, .wmm-callbar, .wmm-band, .wmm-hero) { --wmm-gutter: calc(var(--u) * 20); } .e-con.e-con.wmm-band { --padding-top: calc(var(--u) * 52); --padding-bottom: calc(var(--u) * 52); } .e-con.e-con.wmm-head { margin-bottom: calc(var(--u) * 28); } .wmm-head h2.elementor-heading-title, .wmm-pcards-title { font-size: calc(var(--u) * 28); } .wmm-head .elementor-widget-text-editor { font-size: calc(var(--u) * 16); } .e-con.e-con.wmm-hero, .e-con.e-con.wmm-hero--solo { --padding-top: calc(var(--u) * 40); --padding-bottom: calc(var(--u) * 36); --padding-left: calc(var(--u) * 20); --padding-right: calc(var(--u) * 20); } .wmm-hero h1.elementor-heading-title { font-size: calc(var(--u) * 32); line-height: 1.1; } .elementor.elementor .e-con > .wmm-lede { margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 16); } .e-con.wmm-ctas { margin-top: calc(var(--u) * 22); --row-gap: calc(var(--u) * 10); } .wmm-hero .wmm-ctas .wmm-btn .elementor-button, .wmm-cta .wmm-ctas .wmm-btn .elementor-button { min-height: calc(var(--u) * 50); font-size: calc(var(--u) * 16); } .e-con.e-con.wmm-formcard { margin-top: calc(var(--u) * 30); --padding-top: calc(var(--u) * 20); --padding-left: calc(var(--u) * 16); --padding-right: calc(var(--u) * 16); --padding-bottom: calc(var(--u) * 6); border-radius: calc(var(--u) * 8); } .wmm-formcard h2.elementor-heading-title { font-size: calc(var(--u) * 21); } .wmm-formcard .elementor-widget-text-editor { font-size: calc(var(--u) * 14); } .elementor.elementor .e-con > .wmm-article { font-size: calc(var(--u) * 16); line-height: 1.7; } .wmm-article h2 { font-size: calc(var(--u) * 25); margin-top: calc(var(--u) * 44); } .wmm-article h3 { font-size: calc(var(--u) * 19); margin-top: calc(var(--u) * 24); } .wmm-article p, .wmm-article ul, .wmm-article ol { margin-top: calc(var(--u) * 12); } .wmm-content-band { --wmm-band-gap: calc(var(--u) * 52); padding-left: calc(var(--u) * 20); padding-right: calc(var(--u) * 20); } .wmm-article .wmm-content-band .wmm-band-title { margin-bottom: calc(var(--u) * 28); font-size: calc(var(--u) * 28); } .wmm-band-split { grid-template-columns: 1fr; row-gap: calc(var(--u) * 24); } .wmm-split-media img { border-radius: calc(var(--u) * 8); } .wmm-split-text { font-size: calc(var(--u) * 16); line-height: 1.65; } .wmm-article .wmm-split-text h2 { font-size: calc(var(--u) * 26); } .wmm-article .wmm-split-text p, .wmm-article .wmm-split-text ul, .wmm-article .wmm-split-text ol { margin-top: calc(var(--u) * 14); } .wmm-split-text .wp-block-buttons { margin-top: calc(var(--u) * 22); } .wmm-split-text .wp-block-button { width: 100%; } .wmm-split-text .wp-block-button__link { width: 100%; justify-content: center; height: calc(var(--u) * 48); font-size: calc(var(--u) * 16); } .wmm-band-cards .wmm-cards { grid-template-columns: 1fr; gap: calc(var(--u) * 18); } .wmm-band-cards .wmm-card { padding: calc(var(--u) * 18) 0 calc(var(--u) * 20); } .wmm-band-cards .wmm-card > * { padding-left: calc(var(--u) * 18); padding-right: calc(var(--u) * 18); } .wmm-article .wmm-band-cards .wmm-card h3 { font-size: calc(var(--u) * 20); } .wmm-article .wmm-band-cards .wmm-card p, .wmm-band-cards .wmm-card .wp-block-button__link { font-size: calc(var(--u) * 15); } .wmm-band-cards .wmm-card:has(> .wp-block-list) { margin-top: calc(var(--u) * 12); } .wmm-article .wmm-band-cards .wmm-card:has(> .wp-block-list) h3 { font-size: calc(var(--u) * 18); } .wmm-band-cards .wmm-card > ul.wp-block-list a { height: calc(var(--u) * 38); padding: 0 calc(var(--u) * 14); font-size: calc(var(--u) * 14); } .wmm-band-faq summary { font-size: calc(var(--u) * 17); padding: calc(var(--u) * 18) calc(var(--u) * 2); } .wmm-band-faq summary::after { width: calc(var(--u) * 11); height: calc(var(--u) * 11); } .wmm-article .wmm-band-faq details p { padding: 0 calc(var(--u) * 20) calc(var(--u) * 20) calc(var(--u) * 2); font-size: calc(var(--u) * 16); } .e-con.e-con.wmm-cta { --padding-top: calc(var(--u) * 52); --padding-bottom: calc(var(--u) * 52); } .wmm-cta h2.elementor-heading-title { font-size: calc(var(--u) * 27); } .elementor.elementor .e-con.wmm-cta > .elementor-widget-text-editor { font-size: calc(var(--u) * 16); } .e-con.e-con.wmm-contact-in { gap: calc(var(--u) * 24); } .wmm-map iframe { min-height: calc(var(--u) * 300); } .wmm-contact .wmm-formcard > .elementor-widget-heading { display: none; } /* the preview's contact form card has no title */ .e-con.e-con.wmm-contact-details { --e-global-color-wmm_contrast: #232643; line-height: 1.5; --padding-top: calc(var(--u) * 18); --padding-bottom: calc(var(--u) * 18); --padding-left: calc(var(--u) * 18); --padding-right: calc(var(--u) * 18); font-size: calc(var(--u) * 15); } .e-con.e-con.wmm-footer-grid { gap: calc(var(--u) * 30); --padding-top: calc(var(--u) * 40); --padding-bottom: calc(var(--u) * 32); --padding-left: calc(var(--u) * 24); --padding-right: calc(var(--u) * 24); } .wmm-footer .wmm-logo img { width: calc(var(--u) * 130); } .wmm-social a, .wmm-social a:hover, .wmm-social a:focus-visible { width: calc(var(--u) * 32); height: calc(var(--u) * 32); } /* the Explore list in two columns, as the preview's */ .elementor-widget.wmm-footer-menu { width: 100%; } .wmm-footer-menu ul.elementor-nav-menu { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: calc(var(--u) * 8); width: 100%; } .wmm-footer-cta .wmm-btn { margin-top: calc(var(--u) * 8); } .wmm-footer-towns { padding: 0 calc(var(--u) * 24) calc(var(--u) * 32); } .e-con.e-con.wmm-footer-base { --align-items: center; text-align: center; --row-gap: calc(var(--u) * 8); --padding-left: calc(var(--u) * 24); --padding-right: calc(var(--u) * 24); font-size: calc(var(--u) * 13); } .wmm-footer-base p { font-size: calc(var(--u) * 13); } body:has(.wmm-callbar) { padding-bottom: calc(var(--u) * 56); } .wmm-callbar .elementor-button { min-height: calc(var(--u) * 56); font-size: calc(var(--u) * 16); } .wmm-callbar .wmm-btn-consult .elementor-button { background-color: #E3DBC7 !important; color: #232643 !important; box-shadow: none; } } /* ==================== from the preview: dup.css (bold class, buttons, keyword line, entrance effects) ==================== */ :is(.dup-page, .wmm-article) .b { font-weight: 800; letter-spacing: .005em; } /* ---------- buttons ---------- */ :is(.dup-page, .wmm-article) .btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8); background: var(--button); color: var(--off); border-radius: 999px; font-size: calc(var(--u) * 18); line-height: 1.35; font-weight: 700; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; } :is(.dup-page, .wmm-article) .btn:hover { background: #2a2a6b; } :is(.dup-page, .wmm-article) .btn svg { width: 1em; height: 1em; fill: currentColor; flex: 0 0 auto; } :is(.dup-page, .wmm-article) .btn-line { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); } :is(.dup-page, .wmm-article) .btn-line:hover { background: var(--navy); color: var(--off); } :is(.dup-page, .wmm-article) .btn-sand { background: var(--sand); color: var(--navy); } :is(.dup-page, .wmm-article) .btn-sand:hover { background: #fff; } :is(.dup-page, .wmm-article) .btn-ghost { background: transparent; color: var(--off); box-shadow: inset 0 0 0 1.5px rgba(246, 245, 242, .8); } :is(.dup-page, .wmm-article) .btn-ghost:hover { background: var(--off); color: var(--navy); } /* ---------- entrance effects, as on live (recorded from the live page) ---------- fade: opacity over 1.2s, easeInOutSine. blur: opacity over 1.05s and a 6px blur clearing over 1.5s, easeInSine (blur-slow: 1.4s / 2s). Each starts when the element scrolls into view, after its data-fx-delay. Only applied once the script has marked the page (html.fx), so without JavaScript everything simply shows. */ html.fx :is(.dup-page, .wmm-article) [data-fx] { opacity: 0; } html.fx :is(.dup-page, .wmm-article) [data-fx].fx-in { opacity: 1; } html.fx :is(.dup-page, .wmm-article) [data-fx="fade"].fx-in { animation: fx-fade 1.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) both; } html.fx :is(.dup-page, .wmm-article) [data-fx="blur"].fx-in { animation: fx-fade 1.05s cubic-bezier(0.47, 0, 0.745, 0.715) both, fx-blur 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) both; } html.fx :is(.dup-page, .wmm-article) [data-fx="blur-slow"].fx-in { animation: fx-fade 1.4s cubic-bezier(0.47, 0, 0.745, 0.715) both, fx-blur 2s cubic-bezier(0.47, 0, 0.745, 0.715) both; } @keyframes fx-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes fx-blur { from { filter: blur(6px); } to { filter: blur(0); } } @media (prefers-reduced-motion: reduce) { :is(.dup-page, .wmm-article) * { animation: none !important; transition: none !important; } html.fx :is(.dup-page, .wmm-article) [data-fx] { opacity: 1; } } /* ---------- keyword line inside the H1 (SEO rule 3, Mike, 25 October 2026) ---------- The live display word keeps its size and place; the H1 moves up by the height of the added line so nothing below moves. */ :is(.dup-page, .wmm-article) .h1-loc, :is(.dup-page, .wmm-article) .h1-kw { display: block; font-size: max(.3em, calc(var(--u) * 15)); line-height: 1.2; letter-spacing: .01em; text-transform: none; } :is(.dup-page, .wmm-article) .h1-loc { margin-top: .3em; } :is(.dup-page, .wmm-article) .h1-kw { margin-bottom: .45em; } :is(.dup-page, .wmm-article) h1:has(.h1-loc), :is(.dup-page, .wmm-article) h1:has(.h1-kw) { margin-top: -.62em; } :is(.dup-page, .wmm-article) .pg-home .h-hero h1:has(.h1-kw) { margin-top: 0; } :is(.dup-page, .wmm-article) .pg-home .h1-kw { font-size: max(.27em, calc(var(--u) * 15)); color: var(--off); } /* ==================== from the preview: home.css ==================== */ /* ---------- home (desktop, 1440 base) ---------- */ :is(.dup-page, .wmm-article) .pg-home .h-hero { position: relative; height: calc(var(--u) * 738); background: var(--navy); color: var(--sand); padding: calc(var(--u) * 112) 0 0 calc(var(--u) * 68); overflow: hidden; } :is(.dup-page, .wmm-article) .pg-home .h-hero h1 { width: calc(var(--u) * 600); font-size: calc(var(--u) * 81); line-height: 1; text-transform: lowercase; } :is(.dup-page, .wmm-article) .pg-home .h-hero > p { width: calc(var(--u) * 733); margin-top: calc(var(--u) * 36); font-size: calc(var(--u) * 20.25); line-height: 1.35; text-transform: lowercase; } :is(.dup-page, .wmm-article) .pg-home .ticker { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 23); overflow: hidden; font-weight: 800; font-size: calc(var(--u) * 20.25); line-height: 1.2; white-space: nowrap; } :is(.dup-page, .wmm-article) .pg-home .ticker-run { display: inline-flex; gap: calc(var(--u) * 40); animation: ticker 11.9s linear infinite; /* live: 16.6s per 2082px unit at 1440 = the same speed */ } @keyframes ticker { to { transform: translateX(-50%); } } :is(.dup-page, .wmm-article) .pg-home .h-coll { position: relative; height: calc(var(--u) * 1383); background: var(--sand); padding: calc(var(--u) * 68) calc(var(--u) * 69) 0 calc(var(--u) * 68); text-align: center; } :is(.dup-page, .wmm-article) .pg-home .h-coll h2 { font-size: calc(var(--u) * 63); line-height: 1; } :is(.dup-page, .wmm-article) .pg-home .h-coll > p { margin-top: calc(var(--u) * 18); font-size: calc(var(--u) * 20.25); line-height: 1.35; } :is(.dup-page, .wmm-article) .pg-home .h-coll .row { display: flex; justify-content: space-between; } :is(.dup-page, .wmm-article) .pg-home .h-coll .r1 { margin-top: calc(var(--u) * 55); } :is(.dup-page, .wmm-article) .pg-home .h-coll .r2 { margin: calc(var(--u) * 97) calc(var(--u) * 69) 0 calc(var(--u) * 69); } :is(.dup-page, .wmm-article) .pg-home .card { position: relative; } :is(.dup-page, .wmm-article) .pg-home .card img { width: calc(var(--u) * 410); height: calc(var(--u) * 410); object-fit: cover; } :is(.dup-page, .wmm-article) .pg-home .r2 .card img { width: calc(var(--u) * 565); height: calc(var(--u) * 565); } :is(.dup-page, .wmm-article) .pg-home .card h5 { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--u) * 366); width: calc(var(--u) * 328); height: calc(var(--u) * 57); background: var(--off); display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 27); line-height: 1.1; } :is(.dup-page, .wmm-article) .pg-home .r2 .card h5 { top: calc(var(--u) * 519); width: calc(var(--u) * 452); } :is(.dup-page, .wmm-article) .pg-home .card a:hover img { opacity: .92; } :is(.dup-page, .wmm-article) .pg-home .h-story { position: relative; height: calc(var(--u) * 494); background: var(--slate); color: var(--mist); } :is(.dup-page, .wmm-article) .pg-home .h-story h2 { position: absolute; left: calc(var(--u) * 55); top: calc(var(--u) * 69); font-size: calc(var(--u) * 20.25); line-height: 1.35; } :is(.dup-page, .wmm-article) .pg-home .h-story .about { position: absolute; left: calc(var(--u) * 55); top: calc(var(--u) * 136); font-size: calc(var(--u) * 36); line-height: 1.1; } :is(.dup-page, .wmm-article) .pg-home .h-story .text { position: absolute; left: calc(var(--u) * 374); top: calc(var(--u) * 136); width: calc(var(--u) * 986); font-size: calc(var(--u) * 20.25); line-height: 1.35; } :is(.dup-page, .wmm-article) .pg-home .h-story .text p + p { margin-top: calc(var(--u) * 27.3); } :is(.dup-page, .wmm-article) .pg-home .h-story .btn { position: absolute; left: calc(var(--u) * 714); top: calc(var(--u) * 394); width: calc(var(--u) * 153); height: calc(var(--u) * 42); } :is(.dup-page, .wmm-article) .pg-home .h-show { position: relative; height: calc(var(--u) * 850); background: var(--sand); } :is(.dup-page, .wmm-article) .pg-home .h-show h2 { position: absolute; left: calc(var(--u) * 46); top: calc(var(--u) * 91); font-size: calc(var(--u) * 63); line-height: 1; white-space: nowrap; } :is(.dup-page, .wmm-article) .pg-home .h-show > p { position: absolute; left: calc(var(--u) * 46); top: calc(var(--u) * 163); width: calc(var(--u) * 656); font-size: calc(var(--u) * 20.25); line-height: 1.35; } :is(.dup-page, .wmm-article) .pg-home .h-show .map { position: absolute; left: calc(var(--u) * 191); top: calc(var(--u) * 272); width: calc(var(--u) * 363); height: calc(var(--u) * 487); object-fit: contain; border-radius: calc(var(--u) * 8); } :is(.dup-page, .wmm-article) .pg-home .h-show .list { position: absolute; left: calc(var(--u) * 747); top: calc(var(--u) * 273); height: calc(var(--u) * 485); margin: 0; padding: calc(var(--u) * 27) 0 0 calc(var(--u) * 28); list-style: none; border-left: 1px solid var(--rule); } :is(.dup-page, .wmm-article) .pg-home .h-show .list li + li { margin-top: calc(var(--u) * 27.7); } :is(.dup-page, .wmm-article) .pg-home .h-show h5 { font-size: calc(var(--u) * 27); line-height: 1.1; } :is(.dup-page, .wmm-article) .pg-home .h-show li p { margin-top: calc(var(--u) * 4.3); font-size: calc(var(--u) * 15.75); line-height: 1.35; } /* ---------- home, phone (390 base) ---------- */ @media (max-width: 1000px) { :is(.dup-page, .wmm-article) .pg-home .h-hero { height: calc(var(--u) * 476); padding: calc(var(--u) * 98) calc(var(--u) * 24) 0; } :is(.dup-page, .wmm-article) .pg-home .h-hero h1 { width: calc(var(--u) * 342); font-size: calc(var(--u) * 32); } :is(.dup-page, .wmm-article) .pg-home .h-hero > p { width: calc(var(--u) * 342); margin-top: calc(var(--u) * 12); font-size: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .pg-home .ticker { position: relative; bottom: auto; margin: calc(var(--u) * 12) 0 0 calc(var(--u) * -24); width: calc(100% + calc(var(--u) * 48)); font-size: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .pg-home .ticker-run { gap: calc(var(--u) * 32); } :is(.dup-page, .wmm-article) .pg-home .h-coll { height: calc(var(--u) * 2375); padding: calc(var(--u) * 60) calc(var(--u) * 24) 0; } :is(.dup-page, .wmm-article) .pg-home .h-coll h2 { font-size: calc(var(--u) * 30); } :is(.dup-page, .wmm-article) .pg-home .h-coll > p { margin-top: calc(var(--u) * 12); font-size: calc(var(--u) * 16); line-height: 1.35; } :is(.dup-page, .wmm-article) .pg-home .h-coll .row { display: block; } :is(.dup-page, .wmm-article) .pg-home .h-coll .r1 { margin-top: calc(var(--u) * 40); } :is(.dup-page, .wmm-article) .pg-home .h-coll .r2 { margin: 0; } :is(.dup-page, .wmm-article) .pg-home .card { margin-top: calc(var(--u) * 40); } :is(.dup-page, .wmm-article) .pg-home .h-coll .r1 .card:first-child { margin-top: 0; } :is(.dup-page, .wmm-article) .pg-home .card img, :is(.dup-page, .wmm-article) .pg-home .r2 .card img { width: calc(var(--u) * 342); height: calc(var(--u) * 300); } :is(.dup-page, .wmm-article) .pg-home .card h5, :is(.dup-page, .wmm-article) .pg-home .r2 .card h5 { position: static; transform: none; width: calc(var(--u) * 342); height: calc(var(--u) * 70); margin-top: calc(var(--u) * 24); font-size: calc(var(--u) * 20); } :is(.dup-page, .wmm-article) .pg-home .h-story { height: calc(var(--u) * 659); } :is(.dup-page, .wmm-article) .pg-home .h-story h2 { left: calc(var(--u) * 24); top: calc(var(--u) * 61); font-size: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .pg-home .h-story .about { left: calc(var(--u) * 24); top: calc(var(--u) * 123); font-size: calc(var(--u) * 24); } :is(.dup-page, .wmm-article) .pg-home .h-story .text { left: calc(var(--u) * 24); top: calc(var(--u) * 161); width: calc(var(--u) * 342); font-size: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .pg-home .h-story .text p + p { margin-top: calc(var(--u) * 21.6); } :is(.dup-page, .wmm-article) .pg-home .h-story .btn { left: calc(var(--u) * 24); top: calc(var(--u) * 560); width: calc(var(--u) * 135); height: calc(var(--u) * 37); font-size: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .pg-home .h-show { height: calc(var(--u) * 1163); } :is(.dup-page, .wmm-article) .pg-home .h-show h2 { left: calc(var(--u) * 24); top: calc(var(--u) * 80); width: calc(var(--u) * 342); font-size: calc(var(--u) * 30); white-space: normal; } :is(.dup-page, .wmm-article) .pg-home .h-show > p { left: calc(var(--u) * 24); top: calc(var(--u) * 182); width: calc(var(--u) * 342); font-size: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .pg-home .h-show .map { left: calc(var(--u) * 24); top: calc(var(--u) * 286); width: calc(var(--u) * 342); height: calc(var(--u) * 300); border-radius: 0; } :is(.dup-page, .wmm-article) .pg-home .h-show .list { left: calc(var(--u) * 24); top: calc(var(--u) * 611); height: calc(var(--u) * 470); padding: calc(var(--u) * 23) 0 0 calc(var(--u) * 24); } :is(.dup-page, .wmm-article) .pg-home .h-show .list li + li { margin-top: calc(var(--u) * 40); } :is(.dup-page, .wmm-article) .pg-home .h-show h5 { font-size: calc(var(--u) * 20); } :is(.dup-page, .wmm-article) .pg-home .h-show li p { margin-top: calc(var(--u) * 12); font-size: calc(var(--u) * 14); } } /* ---------- home, tablet (900 base) ---------- */ @media (min-width: 751px) and (max-width: 1000px) { :is(.dup-page, .wmm-article) .pg-home .h-hero { height: calc(var(--u) * 777); padding: calc(var(--u) * 176) calc(var(--u) * 55) 0; } :is(.dup-page, .wmm-article) .pg-home .h-hero h1 { width: calc(var(--u) * 789); font-size: calc(var(--u) * 57.44); } :is(.dup-page, .wmm-article) .pg-home .h-hero > p { width: calc(var(--u) * 789); margin-top: calc(var(--u) * 21); font-size: calc(var(--u) * 28.72); } :is(.dup-page, .wmm-article) .pg-home .ticker { margin: calc(var(--u) * 21) 0 0 calc(var(--u) * -55); width: calc(100% + calc(var(--u) * 110)); font-size: calc(var(--u) * 28.72); } :is(.dup-page, .wmm-article) .pg-home .ticker-run { gap: calc(var(--u) * 57); } :is(.dup-page, .wmm-article) .pg-home .h-coll { height: calc(var(--u) * 5032); padding: calc(var(--u) * 108) calc(var(--u) * 55) 0; } :is(.dup-page, .wmm-article) .pg-home .h-coll h2 { font-size: calc(var(--u) * 53.85); } :is(.dup-page, .wmm-article) .pg-home .h-coll > p { margin-top: calc(var(--u) * 21); font-size: calc(var(--u) * 28.72); } :is(.dup-page, .wmm-article) .pg-home .h-coll .r1 { margin-top: calc(var(--u) * 72); } :is(.dup-page, .wmm-article) .pg-home .card { margin-top: calc(var(--u) * 71); } :is(.dup-page, .wmm-article) .pg-home .card img, :is(.dup-page, .wmm-article) .pg-home .r2 .card img { width: calc(var(--u) * 789); height: calc(var(--u) * 692); } :is(.dup-page, .wmm-article) .pg-home .card h5, :is(.dup-page, .wmm-article) .pg-home .r2 .card h5 { width: calc(var(--u) * 789); height: calc(var(--u) * 126); margin-top: calc(var(--u) * 43); font-size: calc(var(--u) * 35.9); } :is(.dup-page, .wmm-article) .pg-home .h-story { height: calc(var(--u) * 1027); } :is(.dup-page, .wmm-article) .pg-home .h-story h2 { left: calc(var(--u) * 55); top: calc(var(--u) * 110); font-size: calc(var(--u) * 28.72); } :is(.dup-page, .wmm-article) .pg-home .h-story .about { left: calc(var(--u) * 55); top: calc(var(--u) * 221); font-size: calc(var(--u) * 43.08); } :is(.dup-page, .wmm-article) .pg-home .h-story .text { left: calc(var(--u) * 55); top: calc(var(--u) * 290); width: calc(var(--u) * 789); font-size: calc(var(--u) * 28.72); } :is(.dup-page, .wmm-article) .pg-home .h-story .text p + p { margin-top: calc(var(--u) * 38); } :is(.dup-page, .wmm-article) .pg-home .h-story .btn { left: calc(var(--u) * 55); top: calc(var(--u) * 851); width: calc(var(--u) * 311); height: calc(var(--u) * 67); } :is(.dup-page, .wmm-article) .pg-home .h-show { height: calc(var(--u) * 2149); } :is(.dup-page, .wmm-article) .pg-home .h-show h2 { left: calc(var(--u) * 55); top: calc(var(--u) * 144); width: calc(var(--u) * 789); font-size: calc(var(--u) * 53.85); } :is(.dup-page, .wmm-article) .pg-home .h-show > p { left: calc(var(--u) * 55); top: calc(var(--u) * 273); width: calc(var(--u) * 789); font-size: calc(var(--u) * 28.72); } :is(.dup-page, .wmm-article) .pg-home .h-show .map { left: calc(var(--u) * 55); top: calc(var(--u) * 423); width: calc(var(--u) * 789); height: calc(var(--u) * 692); } :is(.dup-page, .wmm-article) .pg-home .h-show .list { left: calc(var(--u) * 55); top: calc(var(--u) * 1160); height: calc(var(--u) * 843); padding: calc(var(--u) * 41) 0 0 calc(var(--u) * 56); } :is(.dup-page, .wmm-article) .pg-home .h-show .list li + li { margin-top: calc(var(--u) * 72); } :is(.dup-page, .wmm-article) .pg-home .h-show h5 { font-size: calc(var(--u) * 35.9); } :is(.dup-page, .wmm-article) .pg-home .h-show li p { margin-top: calc(var(--u) * 21.5); font-size: calc(var(--u) * 25.13); } } /* ---------- HighLevel review widget (Mike, 25 October 2026; the live site has none, so it goes on the home page) ---------- */ :is(.dup-page, .wmm-article) .pg-home .h-reviews { background: var(--mist); padding: calc(var(--u) * 68) calc(var(--u) * 68); } :is(.dup-page, .wmm-article) .pg-home .h-reviews .widget { width: 100%; min-height: calc(var(--u) * 200); } :is(.dup-page, .wmm-article) .pg-home .h-reviews iframe { display: block; width: 100%; border: 0; } @media (max-width: 1000px) { :is(.dup-page, .wmm-article) .pg-home .h-reviews { padding: calc(var(--u) * 40) calc(var(--u) * 24); } } @media (min-width: 751px) and (max-width: 1000px) { :is(.dup-page, .wmm-article) .pg-home .h-reviews { padding: calc(var(--u) * 72) calc(var(--u) * 55); } } /* ---------- call and consultation buttons in the hero (Mike, 25 October 2026: conversion) ---------- */ :is(.dup-page, .wmm-article) .pg-home .h-ctas { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 30); } :is(.dup-page, .wmm-article) .pg-home .h-ctas .btn { height: calc(var(--u) * 54); padding: 0 calc(var(--u) * 28); font-size: calc(var(--u) * 17); } @media (max-width: 1000px) { :is(.dup-page, .wmm-article) .pg-home .h-hero { height: auto; padding-bottom: calc(var(--u) * 28); } :is(.dup-page, .wmm-article) .pg-home .h-ctas { margin-top: calc(var(--u) * 18); gap: calc(var(--u) * 10); } :is(.dup-page, .wmm-article) .pg-home .h-ctas .btn { flex: 1 1 100%; height: calc(var(--u) * 48); font-size: calc(var(--u) * 16); } } @media (min-width: 751px) and (max-width: 1000px) { :is(.dup-page, .wmm-article) .pg-home .h-hero { padding-bottom: calc(var(--u) * 60); } :is(.dup-page, .wmm-article) .pg-home .h-ctas { margin-top: calc(var(--u) * 32); gap: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .pg-home .h-ctas .btn { height: calc(var(--u) * 80); font-size: calc(var(--u) * 28.72); } } /* ---------- the form in the first fold (Mike, 25 October 2026) ---------- Desktop: the live hero text on the left, the form card on the right; the ticker stays along the bottom. Phone and tablet: the form follows the buttons. */ :is(.dup-page, .wmm-article) .pg-home .h-hero { height: auto; min-height: calc(var(--u) * 738); display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 500); column-gap: calc(var(--u) * 64); align-content: start; padding: calc(var(--u) * 96) calc(var(--u) * 68) calc(var(--u) * 104); } :is(.dup-page, .wmm-article) .pg-home .h-hero > h1, :is(.dup-page, .wmm-article) .pg-home .h-hero > p, :is(.dup-page, .wmm-article) .pg-home .h-ctas, :is(.dup-page, .wmm-article) .pg-home .h-trust { grid-column: 1; } :is(.dup-page, .wmm-article) .pg-home .h-trust { margin-top: calc(var(--u) * 34); font-size: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .pg-home .h-hero > p { width: auto; max-width: calc(var(--u) * 733); } :is(.dup-page, .wmm-article) .pg-home .h-form { grid-column: 2; grid-row: 1 / span 5; align-self: start; margin-top: calc(var(--u) * -40); } :is(.dup-page, .wmm-article) .pg-home .h-form h2 { text-transform: none; } @media (max-width: 1000px) { :is(.dup-page, .wmm-article) .pg-home .h-hero { display: block; min-height: 0; padding: calc(var(--u) * 40) calc(var(--u) * 24) calc(var(--u) * 28); } :is(.dup-page, .wmm-article) .pg-home .h-hero > p { max-width: none; } :is(.dup-page, .wmm-article) .pg-home .h-form { margin: calc(var(--u) * 26) 0 0; } } @media (min-width: 751px) and (max-width: 1000px) { :is(.dup-page, .wmm-article) .pg-home .h-hero { padding: calc(var(--u) * 80) calc(var(--u) * 55) calc(var(--u) * 60); } :is(.dup-page, .wmm-article) .pg-home .h-hero > p { width: calc(var(--u) * 789); } } /* ==================== from the preview: blinds.css ==================== */ /* ---------- blinds (desktop, 1440 base) ---------- */ :is(.dup-page, .wmm-article) .pg-blinds .bl-main { position: relative; height: calc(var(--u) * 1448); background: var(--mist); text-align: center; } :is(.dup-page, .wmm-article) .pg-blinds .bl-main h1 { position: absolute; left: calc(var(--u) * 392); top: calc(var(--u) * 137); width: calc(var(--u) * 656); font-size: calc(var(--u) * 81); line-height: 1; letter-spacing: -.015em; } :is(.dup-page, .wmm-article) .pg-blinds .bl-main p { position: absolute; width: calc(var(--u) * 656); font-size: calc(var(--u) * 20.25); line-height: 1.35; color: var(--slate); } :is(.dup-page, .wmm-article) .pg-blinds .bl-main .p1 { left: calc(var(--u) * 392); top: calc(var(--u) * 317); } :is(.dup-page, .wmm-article) .pg-blinds .bl-main .p2 { left: calc(var(--u) * 407); top: calc(var(--u) * 451); } :is(.dup-page, .wmm-article) .pg-blinds .bl-main .tel { left: calc(var(--u) * 407); top: calc(var(--u) * 615); } :is(.dup-page, .wmm-article) .pg-blinds .it { position: absolute; top: calc(var(--u) * 682); width: calc(var(--u) * 435); } :is(.dup-page, .wmm-article) .pg-blinds .i1 { left: calc(var(--u) * 46); } :is(.dup-page, .wmm-article) .pg-blinds .i2 { left: calc(var(--u) * 503); } :is(.dup-page, .wmm-article) .pg-blinds .i3 { left: calc(var(--u) * 960); } :is(.dup-page, .wmm-article) .pg-blinds .it img { display: block; width: calc(var(--u) * 435); height: calc(var(--u) * 543); object-fit: cover; border-radius: calc(var(--u) * 3); } :is(.dup-page, .wmm-article) .pg-blinds .it h6 { margin: calc(var(--u) * 19) 0 0; font-size: calc(var(--u) * 20.25); line-height: 1.1; } :is(.dup-page, .wmm-article) .pg-blinds .bl-band { height: calc(var(--u) * 450); background: var(--off); } /* ---------- blinds, phone (390 base) ---------- */ @media (max-width: 1000px) { :is(.dup-page, .wmm-article) .pg-blinds .bl-main { height: calc(var(--u) * 1786); } :is(.dup-page, .wmm-article) .pg-blinds .bl-main h1 { left: calc(var(--u) * 24); top: calc(var(--u) * 120); width: calc(var(--u) * 342); font-size: calc(var(--u) * 32); } :is(.dup-page, .wmm-article) .pg-blinds .bl-main p { left: calc(var(--u) * 24); width: calc(var(--u) * 342); font-size: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .pg-blinds .bl-main .p1 { left: calc(var(--u) * 24); top: calc(var(--u) * 164); } :is(.dup-page, .wmm-article) .pg-blinds .bl-main .p2 { left: calc(var(--u) * 24); top: calc(var(--u) * 284); } :is(.dup-page, .wmm-article) .pg-blinds .bl-main .tel { left: calc(var(--u) * 24); top: calc(var(--u) * 457); } :is(.dup-page, .wmm-article) .pg-blinds .it { left: calc(var(--u) * 24); width: calc(var(--u) * 342); } :is(.dup-page, .wmm-article) .pg-blinds .i1 { top: calc(var(--u) * 561); } :is(.dup-page, .wmm-article) .pg-blinds .i2 { top: calc(var(--u) * 943); } :is(.dup-page, .wmm-article) .pg-blinds .i3 { top: calc(var(--u) * 1325); } :is(.dup-page, .wmm-article) .pg-blinds .it img { width: calc(var(--u) * 342); height: calc(var(--u) * 300); border-radius: calc(var(--u) * 2); } :is(.dup-page, .wmm-article) .pg-blinds .it h6 { margin-top: calc(var(--u) * 24); font-size: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .pg-blinds .bl-band { height: calc(var(--u) * 200); } } /* ---------- blinds, tablet (900 base) ---------- */ @media (min-width: 751px) and (max-width: 1000px) { :is(.dup-page, .wmm-article) .pg-blinds .bl-main { height: calc(var(--u) * 3590); } :is(.dup-page, .wmm-article) .pg-blinds .bl-main h1 { left: calc(var(--u) * 55); top: calc(var(--u) * 215); width: calc(var(--u) * 789); font-size: calc(var(--u) * 57.44); } :is(.dup-page, .wmm-article) .pg-blinds .bl-main p { left: calc(var(--u) * 55); width: calc(var(--u) * 789); font-size: calc(var(--u) * 28.72); } :is(.dup-page, .wmm-article) .pg-blinds .bl-main .p1 { left: calc(var(--u) * 55); top: calc(var(--u) * 294); } :is(.dup-page, .wmm-article) .pg-blinds .bl-main .p2 { left: calc(var(--u) * 55); top: calc(var(--u) * 471); } :is(.dup-page, .wmm-article) .pg-blinds .bl-main .tel { left: calc(var(--u) * 55); top: calc(var(--u) * 742); } :is(.dup-page, .wmm-article) .pg-blinds .it { left: calc(var(--u) * 55); width: calc(var(--u) * 789); } :is(.dup-page, .wmm-article) .pg-blinds .i1 { top: calc(var(--u) * 930); } :is(.dup-page, .wmm-article) .pg-blinds .i2 { top: calc(var(--u) * 1769); } :is(.dup-page, .wmm-article) .pg-blinds .i3 { top: calc(var(--u) * 2607); } :is(.dup-page, .wmm-article) .pg-blinds .it img { width: calc(var(--u) * 789); height: calc(var(--u) * 692); border-radius: calc(var(--u) * 5); } :is(.dup-page, .wmm-article) .pg-blinds .it h6 { margin-top: calc(var(--u) * 43); font-size: calc(var(--u) * 28.72); } :is(.dup-page, .wmm-article) .pg-blinds .bl-band { height: calc(var(--u) * 359); } } /* ---------- buttons in place of the phone line (Mike, 25 October 2026: conversion) ---------- */ :is(.dup-page, .wmm-article) .pg-blinds .bl-main .ctas { display: flex; justify-content: center; gap: calc(var(--u) * 12); } :is(.dup-page, .wmm-article) .pg-blinds .bl-main .ctas .btn { height: calc(var(--u) * 50); padding: 0 calc(var(--u) * 24); font-size: calc(var(--u) * 17); } :is(.dup-page, .wmm-article) .pg-blinds .bl-main .ctas .btn-line { color: var(--navy); } @media (max-width: 1000px) { :is(.dup-page, .wmm-article) .pg-blinds .bl-main { height: calc(var(--u) * 1846); } :is(.dup-page, .wmm-article) .pg-blinds .bl-main .ctas { flex-direction: column; gap: calc(var(--u) * 10); } :is(.dup-page, .wmm-article) .pg-blinds .bl-main .ctas .btn { height: calc(var(--u) * 48); font-size: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .pg-blinds .i1 { top: calc(var(--u) * 621); } :is(.dup-page, .wmm-article) .pg-blinds .i2 { top: calc(var(--u) * 1003); } :is(.dup-page, .wmm-article) .pg-blinds .i3 { top: calc(var(--u) * 1385); } } @media (min-width: 751px) and (max-width: 1000px) { :is(.dup-page, .wmm-article) .pg-blinds .bl-main { height: calc(var(--u) * 3660); } :is(.dup-page, .wmm-article) .pg-blinds .bl-main .ctas { gap: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .pg-blinds .bl-main .ctas .btn { height: calc(var(--u) * 76); font-size: calc(var(--u) * 28.72); } :is(.dup-page, .wmm-article) .pg-blinds .i1 { top: calc(var(--u) * 1000); } :is(.dup-page, .wmm-article) .pg-blinds .i2 { top: calc(var(--u) * 1839); } :is(.dup-page, .wmm-article) .pg-blinds .i3 { top: calc(var(--u) * 2677); } } /* ==================== from the preview: fabrics.css ==================== */ /* ---------- fabrics (desktop, 1440 base) ---------- */ :is(.dup-page, .wmm-article) .pg-fabrics .f-hero { position: relative; height: calc(var(--u) * 684); background: var(--off); overflow: hidden; } :is(.dup-page, .wmm-article) .pg-fabrics .f-hero h1 { position: absolute; left: calc(var(--u) * 46); top: calc(var(--u) * 149); width: calc(var(--u) * 563); font-size: calc(var(--u) * 81); line-height: 1; letter-spacing: -.02em; color: #d1d1d4; text-transform: lowercase; } :is(.dup-page, .wmm-article) .pg-fabrics .f-hero > p { position: absolute; left: calc(var(--u) * 46); top: calc(var(--u) * 257); width: calc(var(--u) * 548); font-size: calc(var(--u) * 20.25); line-height: 1.35; color: var(--slate); } :is(.dup-page, .wmm-article) .pg-fabrics .f-hero img { position: absolute; left: calc(var(--u) * 655); top: 0; width: calc(var(--u) * 786); height: calc(var(--u) * 683); object-fit: cover; } :is(.dup-page, .wmm-article) .pg-fabrics .f-brands { position: relative; height: calc(var(--u) * 913); background: var(--grey); text-align: center; color: var(--slate); } :is(.dup-page, .wmm-article) .pg-fabrics .f-brands h2 { position: absolute; left: calc(var(--u) * 216); top: calc(var(--u) * 182); width: calc(var(--u) * 1008); font-size: calc(var(--u) * 63); line-height: 1; color: var(--navy); } :is(.dup-page, .wmm-article) .pg-fabrics .f-brands > p { position: absolute; left: calc(var(--u) * 360); top: calc(var(--u) * 263); width: calc(var(--u) * 720); font-size: calc(var(--u) * 20.25); line-height: 1.35; } :is(.dup-page, .wmm-article) .pg-fabrics .f-brands ul { position: absolute; left: 0; right: 0; top: calc(var(--u) * 339.3); margin: 0; padding: 0 0 0 calc(var(--u) * 97); list-style: none; font-size: calc(var(--u) * 20.25); line-height: 1.35; } :is(.dup-page, .wmm-article) .pg-fabrics .f-brands li p { display: inline-block; position: relative; } :is(.dup-page, .wmm-article) .pg-fabrics .f-brands li p::before { content: ""; position: absolute; left: calc(var(--u) * -26); top: calc(var(--u) * 11); width: calc(var(--u) * 5); height: calc(var(--u) * 5); border-radius: 50%; background: currentColor; } :is(.dup-page, .wmm-article) .pg-fabrics .f-end { height: calc(var(--u) * 450); background: var(--off); } /* ---------- fabrics, phone (390 base) ---------- */ @media (max-width: 1000px) { :is(.dup-page, .wmm-article) .pg-fabrics .f-hero { height: calc(var(--u) * 613); } :is(.dup-page, .wmm-article) .pg-fabrics .f-hero h1 { left: calc(var(--u) * 24); top: calc(var(--u) * 377); width: calc(var(--u) * 342); font-size: calc(var(--u) * 32); } :is(.dup-page, .wmm-article) .pg-fabrics .f-hero > p { left: calc(var(--u) * 24); top: calc(var(--u) * 421); width: calc(var(--u) * 336); font-size: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .pg-fabrics .f-hero img { left: calc(var(--u) * 24); top: calc(var(--u) * 40); width: calc(var(--u) * 342); height: calc(var(--u) * 297); } :is(.dup-page, .wmm-article) .pg-fabrics .f-brands { height: calc(var(--u) * 769); } :is(.dup-page, .wmm-article) .pg-fabrics .f-brands h2 { left: calc(var(--u) * 24); top: calc(var(--u) * 160); width: calc(var(--u) * 342); font-size: calc(var(--u) * 30); } :is(.dup-page, .wmm-article) .pg-fabrics .f-brands > p { left: calc(var(--u) * 30); top: calc(var(--u) * 230); width: calc(var(--u) * 330); font-size: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .pg-fabrics .f-brands ul { top: calc(var(--u) * 305.2); padding-left: calc(var(--u) * 49); font-size: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .pg-fabrics .f-brands li p::before { left: calc(var(--u) * -21); top: calc(var(--u) * 9); width: calc(var(--u) * 4); height: calc(var(--u) * 4); } :is(.dup-page, .wmm-article) .pg-fabrics .f-end { height: calc(var(--u) * 200); } } /* ---------- fabrics, tablet (900 base) ---------- */ @media (min-width: 751px) and (max-width: 1000px) { :is(.dup-page, .wmm-article) .pg-fabrics .f-hero { height: calc(var(--u) * 1174); } :is(.dup-page, .wmm-article) .pg-fabrics .f-hero h1 { left: calc(var(--u) * 55); top: calc(var(--u) * 830); width: calc(var(--u) * 789); font-size: calc(var(--u) * 57.44); } :is(.dup-page, .wmm-article) .pg-fabrics .f-hero > p { left: calc(var(--u) * 55); top: calc(var(--u) * 909); width: calc(var(--u) * 765); font-size: calc(var(--u) * 28.72); } :is(.dup-page, .wmm-article) .pg-fabrics .f-hero img { left: calc(var(--u) * 55); top: calc(var(--u) * 71); width: calc(var(--u) * 789); height: calc(var(--u) * 686); } :is(.dup-page, .wmm-article) .pg-fabrics .f-brands { height: calc(var(--u) * 1342); } :is(.dup-page, .wmm-article) .pg-fabrics .f-brands h2 { left: calc(var(--u) * 55); top: calc(var(--u) * 287); width: calc(var(--u) * 789); font-size: calc(var(--u) * 53.85); } :is(.dup-page, .wmm-article) .pg-fabrics .f-brands > p { left: calc(var(--u) * 55); top: calc(var(--u) * 413); width: calc(var(--u) * 789); font-size: calc(var(--u) * 28.72); } :is(.dup-page, .wmm-article) .pg-fabrics .f-brands ul { top: calc(var(--u) * 511.1); padding-left: calc(var(--u) * 89); font-size: calc(var(--u) * 28.72); } :is(.dup-page, .wmm-article) .pg-fabrics .f-brands li p::before { left: calc(var(--u) * -37); top: calc(var(--u) * 17); width: calc(var(--u) * 7); height: calc(var(--u) * 7); } :is(.dup-page, .wmm-article) .pg-fabrics .f-end { height: calc(var(--u) * 359); } } :is(.dup-page, .wmm-article) .pg-fabrics .h1-loc { color: var(--slate); } /* ==================== from the preview: wallpaper.css ==================== */ /* ---------- wallpaper (desktop, 1440 base) ---------- */ :is(.dup-page, .wmm-article) .pg-wallpaper .w-top { position: relative; height: calc(var(--u) * 712); background: var(--off); } :is(.dup-page, .wmm-article) .pg-wallpaper .w-top h1 { position: absolute; left: calc(var(--u) * 46); top: calc(var(--u) * 126); width: calc(var(--u) * 629); font-size: calc(var(--u) * 81); line-height: 1; text-transform: lowercase; } :is(.dup-page, .wmm-article) .pg-wallpaper .w-top > p { position: absolute; left: calc(var(--u) * 46); top: calc(var(--u) * 243); width: calc(var(--u) * 510); font-size: calc(var(--u) * 20.25); line-height: 1.35; color: var(--slate); } :is(.dup-page, .wmm-article) .pg-wallpaper .w-top .hero { position: absolute; left: calc(var(--u) * 720); top: 0; width: calc(var(--u) * 720); height: calc(var(--u) * 683); object-fit: cover; } :is(.dup-page, .wmm-article) .pg-wallpaper .w-brands { position: relative; height: calc(var(--u) * 837); background: var(--off); } :is(.dup-page, .wmm-article) .pg-wallpaper .w-brands h2 { position: absolute; left: calc(var(--u) * 159); top: calc(var(--u) * 111); width: calc(var(--u) * 1152); font-size: calc(var(--u) * 63); line-height: 1; text-align: center; } /* list centred on the live text centre; bullets sit 1.3em left of each name */ :is(.dup-page, .wmm-article) .pg-wallpaper .w-brands .list { position: absolute; left: calc(var(--u) * 451); top: calc(var(--u) * 198); width: calc(var(--u) * 600); margin: 0; padding: 0; list-style: none; text-align: center; font-size: calc(var(--u) * 20.25); line-height: 1.35; } :is(.dup-page, .wmm-article) .pg-wallpaper .w-brands .list p { display: inline; position: relative; } :is(.dup-page, .wmm-article) .pg-wallpaper .w-brands .list p::before { content: ""; position: absolute; left: -1.28em; top: 50%; width: .24em; height: .24em; margin-top: -.12em; border-radius: 50%; background: currentColor; } :is(.dup-page, .wmm-article) .pg-wallpaper .w-end { height: calc(var(--u) * 450); background: var(--off); } /* ---------- wallpaper, phone (390 base) ---------- */ @media (max-width: 1000px) { :is(.dup-page, .wmm-article) .pg-wallpaper .w-top { height: calc(var(--u) * 615); } :is(.dup-page, .wmm-article) .pg-wallpaper .w-top .hero { left: calc(var(--u) * 24); top: calc(var(--u) * 40); width: calc(var(--u) * 342); height: calc(var(--u) * 300); } :is(.dup-page, .wmm-article) .pg-wallpaper .w-top h1 { left: calc(var(--u) * 24); top: calc(var(--u) * 380); width: calc(var(--u) * 342); font-size: calc(var(--u) * 32); } :is(.dup-page, .wmm-article) .pg-wallpaper .w-top > p { left: calc(var(--u) * 24); top: calc(var(--u) * 424); width: calc(var(--u) * 342); font-size: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .pg-wallpaper .w-brands { height: calc(var(--u) * 634); } :is(.dup-page, .wmm-article) .pg-wallpaper .w-brands h2 { left: calc(var(--u) * 24); top: calc(var(--u) * 80); width: calc(var(--u) * 342); font-size: calc(var(--u) * 30); } :is(.dup-page, .wmm-article) .pg-wallpaper .w-brands .list { left: calc(var(--u) * 70); top: calc(var(--u) * 122); width: calc(var(--u) * 300); font-size: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .pg-wallpaper .w-end { height: calc(var(--u) * 200); } } /* ---------- wallpaper, tablet (900 base) ---------- */ @media (min-width: 751px) and (max-width: 1000px) { :is(.dup-page, .wmm-article) .pg-wallpaper .w-top { height: calc(var(--u) * 1219); } :is(.dup-page, .wmm-article) .pg-wallpaper .w-top .hero { left: calc(var(--u) * 55); top: calc(var(--u) * 71); width: calc(var(--u) * 789); height: calc(var(--u) * 692); } :is(.dup-page, .wmm-article) .pg-wallpaper .w-top h1 { left: calc(var(--u) * 55); top: calc(var(--u) * 836); width: calc(var(--u) * 789); font-size: calc(var(--u) * 57.44); } :is(.dup-page, .wmm-article) .pg-wallpaper .w-top > p { left: calc(var(--u) * 55); top: calc(var(--u) * 914); width: calc(var(--u) * 789); font-size: calc(var(--u) * 28.72); } :is(.dup-page, .wmm-article) .pg-wallpaper .w-brands { height: calc(var(--u) * 1138); } :is(.dup-page, .wmm-article) .pg-wallpaper .w-brands h2 { left: calc(var(--u) * 55); top: calc(var(--u) * 143); width: calc(var(--u) * 789); font-size: calc(var(--u) * 53.85); } :is(.dup-page, .wmm-article) .pg-wallpaper .w-brands .list { left: calc(var(--u) * 194); top: calc(var(--u) * 218); width: calc(var(--u) * 600); font-size: calc(var(--u) * 28.72); } :is(.dup-page, .wmm-article) .pg-wallpaper .w-end { height: calc(var(--u) * 359); } } /* ==================== from the preview: paint.css ==================== */ /* ---------- paint (desktop, 1440 base) ---------- */ :is(.dup-page, .wmm-article) .pg-paint .p-intro { position: relative; height: calc(var(--u) * 315); background: var(--sand); } :is(.dup-page, .wmm-article) .pg-paint .p-intro h1 { position: absolute; left: calc(var(--u) * 72); top: calc(var(--u) * 91); width: calc(var(--u) * 1296); font-size: calc(var(--u) * 63); line-height: 1; text-align: center; } :is(.dup-page, .wmm-article) .pg-paint .p-intro p { position: absolute; left: calc(var(--u) * 149); top: calc(var(--u) * 184); width: calc(var(--u) * 1141); font-size: calc(var(--u) * 20.25); line-height: 1.35; } :is(.dup-page, .wmm-article) .pg-paint .p-adv { position: relative; height: calc(var(--u) * 847); background: var(--off); } :is(.dup-page, .wmm-article) .pg-paint .p-adv h2 { position: absolute; left: calc(var(--u) * 91); top: calc(var(--u) * 91); width: calc(var(--u) * 1258); font-size: calc(var(--u) * 63); line-height: 1; text-align: center; } :is(.dup-page, .wmm-article) .pg-paint .p-adv .sub { position: absolute; left: calc(var(--u) * 91); top: calc(var(--u) * 209); width: calc(var(--u) * 1258); font-size: calc(var(--u) * 20.25); line-height: 1.35; text-align: center; } :is(.dup-page, .wmm-article) .pg-paint .p-adv img { position: absolute; top: calc(var(--u) * 382); height: calc(var(--u) * 377); object-fit: cover; border-radius: calc(var(--u) * 8); } :is(.dup-page, .wmm-article) .pg-paint .p-adv .i1 { left: calc(var(--u) * 128); width: calc(var(--u) * 328); } :is(.dup-page, .wmm-article) .pg-paint .p-adv .i2 { left: calc(var(--u) * 822); width: calc(var(--u) * 304); } :is(.dup-page, .wmm-article) .pg-paint .p-adv h4 { position: absolute; top: calc(var(--u) * 382); font-size: calc(var(--u) * 36); line-height: 1.1; } :is(.dup-page, .wmm-article) .pg-paint .p-adv .t2 { top: calc(var(--u) * 383); } :is(.dup-page, .wmm-article) .pg-paint .p-adv .d1, :is(.dup-page, .wmm-article) .pg-paint .p-adv .d2 { position: absolute; top: calc(var(--u) * 498); font-size: calc(var(--u) * 18); line-height: 1.35; color: var(--slate); } :is(.dup-page, .wmm-article) .pg-paint .p-adv .t1, :is(.dup-page, .wmm-article) .pg-paint .p-adv .d1 { left: calc(var(--u) * 492); width: calc(var(--u) * 205); } :is(.dup-page, .wmm-article) .pg-paint .p-adv .t2, :is(.dup-page, .wmm-article) .pg-paint .p-adv .d2 { left: calc(var(--u) * 1161); width: calc(var(--u) * 188); } /* ---------- paint, phone (390 base) ---------- */ @media (max-width: 1000px) { :is(.dup-page, .wmm-article) .pg-paint .p-intro { height: calc(var(--u) * 331); } :is(.dup-page, .wmm-article) .pg-paint .p-intro h1 { left: calc(var(--u) * 24); top: calc(var(--u) * 80); width: calc(var(--u) * 342); font-size: calc(var(--u) * 30); } :is(.dup-page, .wmm-article) .pg-paint .p-intro p { left: calc(var(--u) * 24); top: calc(var(--u) * 122); width: calc(var(--u) * 342); font-size: calc(var(--u) * 16); text-align: center; } :is(.dup-page, .wmm-article) .pg-paint .p-adv { height: calc(var(--u) * 1247); } :is(.dup-page, .wmm-article) .pg-paint .p-adv h2 { left: calc(var(--u) * 24); top: calc(var(--u) * 80); width: calc(var(--u) * 342); font-size: calc(var(--u) * 30); } :is(.dup-page, .wmm-article) .pg-paint .p-adv .sub { left: calc(var(--u) * 24); top: calc(var(--u) * 152); width: calc(var(--u) * 342); font-size: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .pg-paint .p-adv img, :is(.dup-page, .wmm-article) .pg-paint .p-adv .i1, :is(.dup-page, .wmm-article) .pg-paint .p-adv .i2 { left: calc(var(--u) * 24); width: calc(var(--u) * 342); height: calc(var(--u) * 300); border-radius: calc(var(--u) * 5); } :is(.dup-page, .wmm-article) .pg-paint .p-adv .i1 { top: calc(var(--u) * 228); } :is(.dup-page, .wmm-article) .pg-paint .p-adv .i2 { top: calc(var(--u) * 724); } :is(.dup-page, .wmm-article) .pg-paint .p-adv h4 { font-size: calc(var(--u) * 24); text-align: center; } :is(.dup-page, .wmm-article) .pg-paint .p-adv .d1, :is(.dup-page, .wmm-article) .pg-paint .p-adv .d2 { font-size: calc(var(--u) * 16); text-align: center; } :is(.dup-page, .wmm-article) .pg-paint .p-adv .t1, :is(.dup-page, .wmm-article) .pg-paint .p-adv .d1, :is(.dup-page, .wmm-article) .pg-paint .p-adv .t2, :is(.dup-page, .wmm-article) .pg-paint .p-adv .d2 { left: calc(var(--u) * 24); width: calc(var(--u) * 342); } :is(.dup-page, .wmm-article) .pg-paint .p-adv .t1 { top: calc(var(--u) * 568); } :is(.dup-page, .wmm-article) .pg-paint .p-adv .d1 { top: calc(var(--u) * 606); } :is(.dup-page, .wmm-article) .pg-paint .p-adv .t2 { top: calc(var(--u) * 1064); } :is(.dup-page, .wmm-article) .pg-paint .p-adv .d2 { top: calc(var(--u) * 1103); } } /* ---------- paint, tablet (900 base) ---------- */ @media (min-width: 751px) and (max-width: 1000px) { :is(.dup-page, .wmm-article) .pg-paint .p-intro { height: calc(var(--u) * 556); } :is(.dup-page, .wmm-article) .pg-paint .p-intro h1 { left: calc(var(--u) * 55); top: calc(var(--u) * 143); width: calc(var(--u) * 789); font-size: calc(var(--u) * 53.85); } :is(.dup-page, .wmm-article) .pg-paint .p-intro p { left: calc(var(--u) * 55); top: calc(var(--u) * 219); width: calc(var(--u) * 789); font-size: calc(var(--u) * 28.72); } :is(.dup-page, .wmm-article) .pg-paint .p-adv { height: calc(var(--u) * 2507); } :is(.dup-page, .wmm-article) .pg-paint .p-adv h2 { left: calc(var(--u) * 55); top: calc(var(--u) * 143); width: calc(var(--u) * 789); font-size: calc(var(--u) * 53.85); } :is(.dup-page, .wmm-article) .pg-paint .p-adv .sub { left: calc(var(--u) * 55); top: calc(var(--u) * 273); width: calc(var(--u) * 789); font-size: calc(var(--u) * 28.72); } :is(.dup-page, .wmm-article) .pg-paint .p-adv img, :is(.dup-page, .wmm-article) .pg-paint .p-adv .i1, :is(.dup-page, .wmm-article) .pg-paint .p-adv .i2 { left: calc(var(--u) * 55); width: calc(var(--u) * 789); height: calc(var(--u) * 692); border-radius: calc(var(--u) * 13); } :is(.dup-page, .wmm-article) .pg-paint .p-adv .i1 { top: calc(var(--u) * 408); } :is(.dup-page, .wmm-article) .pg-paint .p-adv .i2 { top: calc(var(--u) * 1414); } :is(.dup-page, .wmm-article) .pg-paint .p-adv h4 { font-size: calc(var(--u) * 43.08); } :is(.dup-page, .wmm-article) .pg-paint .p-adv .d1, :is(.dup-page, .wmm-article) .pg-paint .p-adv .d2 { font-size: calc(var(--u) * 28.72); } :is(.dup-page, .wmm-article) .pg-paint .p-adv .t1, :is(.dup-page, .wmm-article) .pg-paint .p-adv .d1, :is(.dup-page, .wmm-article) .pg-paint .p-adv .t2, :is(.dup-page, .wmm-article) .pg-paint .p-adv .d2 { left: calc(var(--u) * 55); width: calc(var(--u) * 789); } :is(.dup-page, .wmm-article) .pg-paint .p-adv .t1 { top: calc(var(--u) * 1172); } :is(.dup-page, .wmm-article) .pg-paint .p-adv .d1 { top: calc(var(--u) * 1241); } :is(.dup-page, .wmm-article) .pg-paint .p-adv .t2 { top: calc(var(--u) * 2178); } :is(.dup-page, .wmm-article) .pg-paint .p-adv .d2 { top: calc(var(--u) * 2247); } } /* ==================== from the preview: about-us.css ==================== */ /* ---------- about-us (desktop, 1440 base) ---------- */ /* live image crop: x 0, y 95, w 2437, h 3046 of the 2437x3237 original, then cover; the img is sized to the crop's width and shifted up by the cropped-off top plus half of the cover overflow */ :is(.dup-page, .wmm-article) .pg-about-us .a-story { position: relative; height: calc(var(--u) * 929); background: var(--mist); } :is(.dup-page, .wmm-article) .pg-about-us .a-story h1 { position: absolute; left: calc(var(--u) * 731); top: calc(var(--u) * 69); width: calc(var(--u) * 597); font-size: calc(var(--u) * 63); line-height: 1; color: var(--navy); } :is(.dup-page, .wmm-article) .pg-about-us .a-story .text { position: absolute; left: calc(var(--u) * 731); font-size: calc(var(--u) * 18); line-height: 1.35; color: var(--button); } :is(.dup-page, .wmm-article) .pg-about-us .a-story .t1 { top: calc(var(--u) * 149); width: calc(var(--u) * 546); } :is(.dup-page, .wmm-article) .pg-about-us .a-story .t2 { top: calc(var(--u) * 486); width: calc(var(--u) * 567); } :is(.dup-page, .wmm-article) .pg-about-us .a-story .photo { position: absolute; left: calc(var(--u) * 200); top: calc(var(--u) * 208); width: calc(var(--u) * 373); height: calc(var(--u) * 466); overflow: hidden; } :is(.dup-page, .wmm-article) .pg-about-us .a-story .photo img { position: absolute; left: 0; top: calc(var(--u) * -14.65); width: calc(var(--u) * 373); height: auto; } /* ---------- about-us, phone (390 base) ---------- */ @media (max-width: 1000px) { :is(.dup-page, .wmm-article) .pg-about-us .a-story { height: calc(var(--u) * 1262); } :is(.dup-page, .wmm-article) .pg-about-us .a-story h1 { left: calc(var(--u) * 24); top: calc(var(--u) * 60); width: calc(var(--u) * 342); font-size: calc(var(--u) * 30); } :is(.dup-page, .wmm-article) .pg-about-us .a-story .text { left: calc(var(--u) * 24); width: calc(var(--u) * 342); font-size: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .pg-about-us .a-story .t1 { top: calc(var(--u) * 102); width: calc(var(--u) * 342); } :is(.dup-page, .wmm-article) .pg-about-us .a-story .t2 { top: calc(var(--u) * 524); width: calc(var(--u) * 342); } :is(.dup-page, .wmm-article) .pg-about-us .a-story .photo { left: calc(var(--u) * 24); top: calc(var(--u) * 902); width: calc(var(--u) * 342); height: calc(var(--u) * 300); } :is(.dup-page, .wmm-article) .pg-about-us .a-story .photo img { top: calc(var(--u) * -77.07); width: calc(var(--u) * 342); } } /* ---------- about-us, tablet (900 base) ---------- */ @media (min-width: 751px) and (max-width: 1000px) { :is(.dup-page, .wmm-article) .pg-about-us .a-story { height: calc(var(--u) * 2109); } :is(.dup-page, .wmm-article) .pg-about-us .a-story h1 { left: calc(var(--u) * 55); top: calc(var(--u) * 107); width: calc(var(--u) * 789); font-size: calc(var(--u) * 53.85); } :is(.dup-page, .wmm-article) .pg-about-us .a-story .text { left: calc(var(--u) * 55); width: calc(var(--u) * 789); font-size: calc(var(--u) * 28.72); } :is(.dup-page, .wmm-article) .pg-about-us .a-story .t1 { top: calc(var(--u) * 183); width: calc(var(--u) * 789); } :is(.dup-page, .wmm-article) .pg-about-us .a-story .t2 { top: calc(var(--u) * 747); width: calc(var(--u) * 789); } :is(.dup-page, .wmm-article) .pg-about-us .a-story .photo { left: calc(var(--u) * 55); top: calc(var(--u) * 1308); width: calc(var(--u) * 789); height: calc(var(--u) * 692); } :is(.dup-page, .wmm-article) .pg-about-us .a-story .photo img { top: calc(var(--u) * -177.84); width: calc(var(--u) * 789); } } /* ==================== from the preview: flooring.css ==================== */ /* ---------- flooring (desktop, 1440 base) ---------- */ :is(.dup-page, .wmm-article) .pg-flooring .f-main { position: relative; height: calc(var(--u) * 938); background: var(--grey); text-align: center; } :is(.dup-page, .wmm-article) .pg-flooring .f-main h1 { position: absolute; left: calc(var(--u) * 68); top: calc(var(--u) * 91); width: calc(var(--u) * 1310); font-size: calc(var(--u) * 63); line-height: 1; } :is(.dup-page, .wmm-article) .pg-flooring .f-main > p { position: absolute; left: calc(var(--u) * 68); top: calc(var(--u) * 173); width: calc(var(--u) * 1310); font-size: calc(var(--u) * 20.25); line-height: 1.35; } :is(.dup-page, .wmm-article) .pg-flooring .cards { position: absolute; left: calc(var(--u) * 68); top: calc(var(--u) * 291); display: flex; gap: calc(var(--u) * 36); } :is(.dup-page, .wmm-article) .pg-flooring .card { width: calc(var(--u) * 413); height: calc(var(--u) * 556); padding: calc(var(--u) * 23) calc(var(--u) * 23) 0; background: var(--off); } :is(.dup-page, .wmm-article) .pg-flooring .card img { display: block; width: calc(var(--u) * 367); height: calc(var(--u) * 367); object-fit: cover; } :is(.dup-page, .wmm-article) .pg-flooring .card h5 { margin-top: calc(var(--u) * 27); font-size: calc(var(--u) * 27); line-height: 1.1; } :is(.dup-page, .wmm-article) .pg-flooring .f-end { height: calc(var(--u) * 450); background: var(--off); } /* ---------- flooring, phone (390 base) ---------- */ @media (max-width: 1000px) { :is(.dup-page, .wmm-article) .pg-flooring .f-main { height: calc(var(--u) * 1605); } :is(.dup-page, .wmm-article) .pg-flooring .f-main h1 { left: calc(var(--u) * 24); top: calc(var(--u) * 80); width: calc(var(--u) * 342); font-size: calc(var(--u) * 30); } :is(.dup-page, .wmm-article) .pg-flooring .f-main > p { left: calc(var(--u) * 24); top: calc(var(--u) * 122); width: calc(var(--u) * 342); font-size: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .pg-flooring .cards { left: calc(var(--u) * 24); top: calc(var(--u) * 313); flex-direction: column; gap: calc(var(--u) * 24); } :is(.dup-page, .wmm-article) .pg-flooring .card { width: calc(var(--u) * 342); height: calc(var(--u) * 388); padding: calc(var(--u) * 24) calc(var(--u) * 24) 0; } :is(.dup-page, .wmm-article) .pg-flooring .card img { width: calc(var(--u) * 294); height: calc(var(--u) * 294); } :is(.dup-page, .wmm-article) .pg-flooring .card h5 { margin-top: calc(var(--u) * 24); font-size: calc(var(--u) * 20); } :is(.dup-page, .wmm-article) .pg-flooring .f-end { height: calc(var(--u) * 200); } } /* ---------- flooring, tablet (900 base) ---------- */ @media (min-width: 751px) and (max-width: 1000px) { :is(.dup-page, .wmm-article) .pg-flooring .f-main { height: calc(var(--u) * 3255); } :is(.dup-page, .wmm-article) .pg-flooring .f-main h1 { left: calc(var(--u) * 55); top: calc(var(--u) * 143); width: calc(var(--u) * 789); font-size: calc(var(--u) * 53.85); } :is(.dup-page, .wmm-article) .pg-flooring .f-main > p { left: calc(var(--u) * 55); top: calc(var(--u) * 219); width: calc(var(--u) * 789); font-size: calc(var(--u) * 28.72); } :is(.dup-page, .wmm-article) .pg-flooring .cards { left: calc(var(--u) * 55); top: calc(var(--u) * 484); gap: calc(var(--u) * 43); } :is(.dup-page, .wmm-article) .pg-flooring .card { width: calc(var(--u) * 789); height: calc(var(--u) * 847); padding: calc(var(--u) * 43) calc(var(--u) * 55.5) 0; } :is(.dup-page, .wmm-article) .pg-flooring .card img { width: calc(var(--u) * 678); height: calc(var(--u) * 678); } :is(.dup-page, .wmm-article) .pg-flooring .card h5 { margin-top: calc(var(--u) * 44); font-size: calc(var(--u) * 35.9); } :is(.dup-page, .wmm-article) .pg-flooring .f-end { height: calc(var(--u) * 359); } } /* ==================== from the preview: lp.css (bands in carried pages; photo blocks in the long content) ==================== */ /* ---------- landing-page sections for Location, Town hub and Service pages (Mike, 25 October 2026) ---------- Modelled on the structure Mike sent (seans-miracle-painting.com/cabinet-painting-venice-fl/): a photo hero with the form, reviews, why-us, service cards, the long content, a call-to-action band, FAQs, and the form beside a map. Built from the live site's colours, font and pill buttons. Fluid widths: desktop sizes at a 1440 base, phone at 390; tablet uses the phone layout at the live tablet text scale (x1.795). */ :is(.dup-page, .wmm-article) .lp-hero { position: relative; overflow: hidden; color: var(--off); background: var(--navy); } :is(.dup-page, .wmm-article) .lp-hero > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; } :is(.dup-page, .wmm-article) .lp-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(35, 38, 67, .94) 0%, rgba(35, 38, 67, .86) 46%, rgba(35, 38, 67, .55) 100%); } :is(.dup-page, .wmm-article) .lp-hero .in { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr calc(var(--u) * 540); gap: calc(var(--u) * 72); align-items: center; padding: calc(var(--u) * 64) calc(var(--u) * 68) calc(var(--u) * 72); } :is(.dup-page, .wmm-article) .lp-crumbs { font-size: calc(var(--u) * 15); color: var(--sand); margin-bottom: calc(var(--u) * 22); } :is(.dup-page, .wmm-article) .lp-crumbs a:hover { text-decoration: underline; } :is(.dup-page, .wmm-article) .lp-hero h1 { font-weight: 800; letter-spacing: -.005em; font-size: calc(var(--u) * 58); line-height: 1.06; color: #fff; } :is(.dup-page, .wmm-article) .lp-hero .lede { margin-top: calc(var(--u) * 22); max-width: calc(var(--u) * 620); font-size: calc(var(--u) * 20); line-height: 1.55; color: rgba(246, 245, 242, .88); } :is(.dup-page, .wmm-article) .lp-hero .ctas { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 30); } :is(.dup-page, .wmm-article) .lp-hero .ctas .btn { height: calc(var(--u) * 54); padding: 0 calc(var(--u) * 28); font-size: calc(var(--u) * 17); } :is(.dup-page, .wmm-article) .lp-trust { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 10) calc(var(--u) * 28); margin: calc(var(--u) * 30) 0 0; padding: 0; list-style: none; font-size: calc(var(--u) * 15); color: var(--sand); } :is(.dup-page, .wmm-article) .lp-trust li { display: flex; align-items: center; gap: calc(var(--u) * 8); } :is(.dup-page, .wmm-article) .lp-trust li::before { content: ""; width: calc(var(--u) * 16); height: calc(var(--u) * 16); flex: 0 0 auto; border-radius: 50%; background: var(--sand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23232643' stroke-width='2'/%3E%3C/svg%3E") center / 100% no-repeat; } :is(.dup-page, .wmm-article) .lp-formcard { background: #fff; color: var(--navy); border-radius: calc(var(--u) * 10); padding: calc(var(--u) * 26) calc(var(--u) * 26) calc(var(--u) * 10); box-shadow: 0 18px 40px rgba(10, 12, 30, .28); } :is(.dup-page, .wmm-article) .lp-formcard h2 { font-weight: 800; letter-spacing: .005em; font-size: calc(var(--u) * 24); line-height: 1.2; } :is(.dup-page, .wmm-article) .lp-formcard > p { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 15); line-height: 1.5; color: var(--slate); } :is(.dup-page, .wmm-article) .lp-formcard iframe { display: block; width: 100%; min-height: 640px; max-height: 860px; border: 0; margin-top: calc(var(--u) * 8); } :is(.dup-page, .wmm-article) .lp-sec { padding: calc(var(--u) * 88) calc(var(--u) * 68); } :is(.dup-page, .wmm-article) .lp-sec.off { background: var(--off); } :is(.dup-page, .wmm-article) .lp-sec.sand { background: var(--sand); } :is(.dup-page, .wmm-article) .lp-sec.mist { background: var(--mist); } :is(.dup-page, .wmm-article) .lp-sec.grey { background: var(--grey); } :is(.dup-page, .wmm-article) .lp-head { text-align: center; max-width: calc(var(--u) * 860); margin: 0 auto calc(var(--u) * 44); } :is(.dup-page, .wmm-article) .lp-head h2 { font-weight: 800; letter-spacing: .005em; font-size: calc(var(--u) * 44); line-height: 1.12; } :is(.dup-page, .wmm-article) .lp-head p { margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 18); line-height: 1.6; color: var(--slate); } :is(.dup-page, .wmm-article) .lp-reviews .widget { max-width: calc(var(--u) * 1240); margin: 0 auto; } :is(.dup-page, .wmm-article) .lp-reviews iframe { display: block; width: 100%; border: 0; } :is(.dup-page, .wmm-article) .lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 72); align-items: start; } :is(.dup-page, .wmm-article) .lp-split figure { position: sticky; top: calc(var(--u) * 130); } :is(.dup-page, .wmm-article) .lp-split.flip > figure { order: 2; } :is(.dup-page, .wmm-article) .lp-split figure { margin: 0; } :is(.dup-page, .wmm-article) .lp-split img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: calc(var(--u) * 10); } :is(.dup-page, .wmm-article) .lp-split h2 { font-weight: 800; letter-spacing: .005em; font-size: calc(var(--u) * 38); line-height: 1.15; } :is(.dup-page, .wmm-article) .lp-prose { font-size: calc(var(--u) * 18); line-height: 1.7; } :is(.dup-page, .wmm-article) .lp-prose p, :is(.dup-page, .wmm-article) .lp-prose ul { margin: calc(var(--u) * 18) 0 0; } :is(.dup-page, .wmm-article) .lp-prose ul { padding-left: 1.25em; } :is(.dup-page, .wmm-article) .lp-prose li + li { margin-top: calc(var(--u) * 6); } :is(.dup-page, .wmm-article) .lp-prose a { text-decoration: underline; text-underline-offset: .15em; } :is(.dup-page, .wmm-article) .lp-split .btn { margin-top: calc(var(--u) * 28); height: calc(var(--u) * 50); padding: 0 calc(var(--u) * 26); font-size: calc(var(--u) * 17); } :is(.dup-page, .wmm-article) .lp-cards .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 28); max-width: calc(var(--u) * 1240); margin: 0 auto; } :is(.dup-page, .wmm-article) .lp-card { display: flex; flex-direction: column; background: var(--off); border-radius: calc(var(--u) * 10); overflow: hidden; } :is(.dup-page, .wmm-article) .lp-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } :is(.dup-page, .wmm-article) .lp-card .body { padding: calc(var(--u) * 22) calc(var(--u) * 24) calc(var(--u) * 26); display: flex; flex-direction: column; flex: 1; } :is(.dup-page, .wmm-article) .lp-card h3 { font-weight: 800; letter-spacing: .005em; font-size: calc(var(--u) * 22); line-height: 1.2; } :is(.dup-page, .wmm-article) .lp-card p { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 16); line-height: 1.6; color: var(--slate); flex: 1; } :is(.dup-page, .wmm-article) .lp-card .more { margin-top: calc(var(--u) * 16); font-weight: 700; font-size: calc(var(--u) * 16); text-decoration: underline; text-underline-offset: .2em; } :is(.dup-page, .wmm-article) .lp-also { max-width: calc(var(--u) * 1240); margin: calc(var(--u) * 44) auto 0; text-align: center; } :is(.dup-page, .wmm-article) .lp-also h3 { font-weight: 800; font-size: calc(var(--u) * 20); } :is(.dup-page, .wmm-article) .lp-also ul { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 10); margin: calc(var(--u) * 16) 0 0; padding: 0; list-style: none; } :is(.dup-page, .wmm-article) .lp-also a { display: inline-flex; align-items: center; height: calc(var(--u) * 40); padding: 0 calc(var(--u) * 18); border-radius: 999px; background: var(--off); font-size: calc(var(--u) * 15); font-weight: 700; } :is(.dup-page, .wmm-article) .lp-also a:hover { background: var(--navy); color: var(--off); } :is(.dup-page, .wmm-article) .lp-article { max-width: calc(var(--u) * 780); margin: 0 auto; } :is(.dup-page, .wmm-article) .lp-article > h2 { font-weight: 800; letter-spacing: .005em; font-size: calc(var(--u) * 34); line-height: 1.18; margin-top: calc(var(--u) * 64); } :is(.dup-page, .wmm-article) .lp-article > h2:first-child { margin-top: 0; } :is(.dup-page, .wmm-article) .lp-article h3 { font-weight: 800; letter-spacing: .005em; font-size: calc(var(--u) * 22); line-height: 1.25; margin-top: calc(var(--u) * 30); } :is(.dup-page, .wmm-article) .lp-article p, :is(.dup-page, .wmm-article) .lp-article ul { margin: calc(var(--u) * 16) 0 0; font-size: calc(var(--u) * 18); line-height: 1.75; } :is(.dup-page, .wmm-article) .lp-article ul { padding-left: 1.25em; } :is(.dup-page, .wmm-article) .lp-article li + li { margin-top: calc(var(--u) * 6); } :is(.dup-page, .wmm-article) .lp-article a { text-decoration: underline; text-underline-offset: .15em; } :is(.dup-page, .wmm-article) .lp-cta { background: var(--navy); color: var(--off); text-align: center; padding: calc(var(--u) * 72) calc(var(--u) * 68); } :is(.dup-page, .wmm-article) .lp-cta h2 { font-weight: 800; letter-spacing: .005em; font-size: calc(var(--u) * 40); line-height: 1.15; color: #fff; } :is(.dup-page, .wmm-article) .lp-cta p { margin: calc(var(--u) * 14) auto 0; max-width: calc(var(--u) * 640); font-size: calc(var(--u) * 18); line-height: 1.6; color: rgba(246, 245, 242, .85); } :is(.dup-page, .wmm-article) .lp-cta .ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 30); } :is(.dup-page, .wmm-article) .lp-cta .btn { height: calc(var(--u) * 54); padding: 0 calc(var(--u) * 28); font-size: calc(var(--u) * 17); } :is(.dup-page, .wmm-article) .lp-faq .list { max-width: calc(var(--u) * 900); margin: 0 auto; border-top: 1px solid var(--rule); } :is(.dup-page, .wmm-article) .lp-faq details { border-bottom: 1px solid var(--rule); } :is(.dup-page, .wmm-article) .lp-faq summary { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 20); padding: calc(var(--u) * 22) calc(var(--u) * 4); cursor: pointer; list-style: none; font-weight: 800; letter-spacing: .005em; font-size: calc(var(--u) * 20); line-height: 1.3; } :is(.dup-page, .wmm-article) .lp-faq summary::-webkit-details-marker { display: none; } :is(.dup-page, .wmm-article) .lp-faq summary::after { content: ""; flex: 0 0 auto; width: calc(var(--u) * 14); height: calc(var(--u) * 14); border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(45deg) translate(calc(var(--u) * -3), calc(var(--u) * -3)); transition: transform .25s; } :is(.dup-page, .wmm-article) .lp-faq details[open] summary::after { transform: rotate(225deg) translate(calc(var(--u) * -3), calc(var(--u) * -3)); } :is(.dup-page, .wmm-article) .lp-faq details p { margin: 0; padding: 0 calc(var(--u) * 44) calc(var(--u) * 24) calc(var(--u) * 4); font-size: calc(var(--u) * 18); line-height: 1.7; color: var(--slate); } :is(.dup-page, .wmm-article) .lp-contact .in { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 40); max-width: calc(var(--u) * 1240); margin: 0 auto; align-items: stretch; } :is(.dup-page, .wmm-article) .lp-contact .map { display: flex; flex-direction: column; border-radius: calc(var(--u) * 10); overflow: hidden; background: #fff; } :is(.dup-page, .wmm-article) .lp-contact .map iframe { display: block; width: 100%; flex: 1; min-height: calc(var(--u) * 420); border: 0; } :is(.dup-page, .wmm-article) .lp-contact .lp-formcard iframe { margin-top: 0; } :is(.dup-page, .wmm-article) .lp-contact .map ul { margin: 0; padding: calc(var(--u) * 22) calc(var(--u) * 26); list-style: none; display: grid; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 16); line-height: 1.5; } :is(.dup-page, .wmm-article) .lp-contact .map b { font-weight: 800; } :is(.dup-page, .wmm-article) .lp-contact .map a { text-decoration: underline; text-underline-offset: .15em; } /* ---------- phone (390 base); tablet reuses it at the live tablet scale ---------- */ @media (max-width: 1000px) { :is(.dup-page, .wmm-article) .lp-hero::before { background: rgba(35, 38, 67, .9); } :is(.dup-page, .wmm-article) .lp-hero .in { display: block; padding: calc(var(--u) * 40) calc(var(--u) * 20) calc(var(--u) * 36); } :is(.dup-page, .wmm-article) .lp-crumbs { font-size: calc(var(--u) * 13); margin-bottom: calc(var(--u) * 14); } :is(.dup-page, .wmm-article) .lp-hero h1 { font-size: calc(var(--u) * 32); line-height: 1.1; } :is(.dup-page, .wmm-article) .lp-hero .lede { margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .lp-hero .ctas { margin-top: calc(var(--u) * 22); gap: calc(var(--u) * 10); } :is(.dup-page, .wmm-article) .lp-hero .ctas .btn { flex: 1 1 100%; height: calc(var(--u) * 50); font-size: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .lp-trust { flex-direction: column; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 22); font-size: calc(var(--u) * 14); } :is(.dup-page, .wmm-article) .lp-trust li::before { width: calc(var(--u) * 15); height: calc(var(--u) * 15); } :is(.dup-page, .wmm-article) .lp-formcard { margin-top: calc(var(--u) * 30); padding: calc(var(--u) * 20) calc(var(--u) * 16) calc(var(--u) * 6); border-radius: calc(var(--u) * 8); } :is(.dup-page, .wmm-article) .lp-formcard h2 { font-size: calc(var(--u) * 21); } :is(.dup-page, .wmm-article) .lp-formcard > p { font-size: calc(var(--u) * 14); } :is(.dup-page, .wmm-article) .lp-sec { padding: calc(var(--u) * 52) calc(var(--u) * 20); } :is(.dup-page, .wmm-article) .lp-head { margin-bottom: calc(var(--u) * 28); } :is(.dup-page, .wmm-article) .lp-head h2 { font-size: calc(var(--u) * 28); } :is(.dup-page, .wmm-article) .lp-head p { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .lp-split { grid-template-columns: 1fr; gap: calc(var(--u) * 24); } :is(.dup-page, .wmm-article) .lp-split.flip > figure { order: 0; } :is(.dup-page, .wmm-article) .lp-split figure { position: static; } :is(.dup-page, .wmm-article) .lp-split img { aspect-ratio: 4 / 3; } :is(.dup-page, .wmm-article) .lp-split img { border-radius: calc(var(--u) * 8); } :is(.dup-page, .wmm-article) .lp-split h2 { font-size: calc(var(--u) * 26); } :is(.dup-page, .wmm-article) .lp-prose { font-size: calc(var(--u) * 16); line-height: 1.65; } :is(.dup-page, .wmm-article) .lp-prose p, :is(.dup-page, .wmm-article) .lp-prose ul { margin-top: calc(var(--u) * 14); } :is(.dup-page, .wmm-article) .lp-split .btn { margin-top: calc(var(--u) * 22); height: calc(var(--u) * 48); font-size: calc(var(--u) * 16); width: 100%; } :is(.dup-page, .wmm-article) .lp-cards .grid { grid-template-columns: 1fr; gap: calc(var(--u) * 18); } :is(.dup-page, .wmm-article) .lp-card .body { padding: calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 20); } :is(.dup-page, .wmm-article) .lp-card h3 { font-size: calc(var(--u) * 20); } :is(.dup-page, .wmm-article) .lp-card p { font-size: calc(var(--u) * 15); } :is(.dup-page, .wmm-article) .lp-card .more { font-size: calc(var(--u) * 15); } :is(.dup-page, .wmm-article) .lp-also { margin-top: calc(var(--u) * 30); } :is(.dup-page, .wmm-article) .lp-also h3 { font-size: calc(var(--u) * 18); } :is(.dup-page, .wmm-article) .lp-also a { height: calc(var(--u) * 38); padding: 0 calc(var(--u) * 14); font-size: calc(var(--u) * 14); } :is(.dup-page, .wmm-article) .lp-article > h2 { font-size: calc(var(--u) * 25); margin-top: calc(var(--u) * 44); } :is(.dup-page, .wmm-article) .lp-article h3 { font-size: calc(var(--u) * 19); margin-top: calc(var(--u) * 24); } :is(.dup-page, .wmm-article) .lp-article p, :is(.dup-page, .wmm-article) .lp-article ul { margin-top: calc(var(--u) * 12); font-size: calc(var(--u) * 16); line-height: 1.7; } :is(.dup-page, .wmm-article) .lp-cta { padding: calc(var(--u) * 52) calc(var(--u) * 20); } :is(.dup-page, .wmm-article) .lp-cta h2 { font-size: calc(var(--u) * 27); } :is(.dup-page, .wmm-article) .lp-cta p { font-size: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .lp-cta .ctas { margin-top: calc(var(--u) * 22); } :is(.dup-page, .wmm-article) .lp-cta .btn { flex: 1 1 100%; height: calc(var(--u) * 50); font-size: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .lp-faq summary { font-size: calc(var(--u) * 17); padding: calc(var(--u) * 18) calc(var(--u) * 2); } :is(.dup-page, .wmm-article) .lp-faq summary::after { width: calc(var(--u) * 11); height: calc(var(--u) * 11); } :is(.dup-page, .wmm-article) .lp-faq details p { padding: 0 calc(var(--u) * 20) calc(var(--u) * 20) calc(var(--u) * 2); font-size: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .lp-contact .in { grid-template-columns: 1fr; gap: calc(var(--u) * 24); } :is(.dup-page, .wmm-article) .lp-contact .map iframe { min-height: calc(var(--u) * 300); } :is(.dup-page, .wmm-article) .lp-contact .map ul { padding: calc(var(--u) * 18); font-size: calc(var(--u) * 15); } } @media (min-width: 751px) and (max-width: 1000px) { :is(.dup-page, .wmm-article) .lp-hero, :is(.dup-page, .wmm-article) .lp-sec, :is(.dup-page, .wmm-article) .lp-cta { --u: calc(100cqw / 501.4); } } /* jump links to the form stop below the sticky header */ :is(.dup-page, .wmm-article) .lp-contact { scroll-margin-top: calc(var(--u) * 120); } @media (max-width: 1000px) { :is(.dup-page, .wmm-article) .lp-contact { scroll-margin-top: calc(var(--u) * 76); } } /* ---------- photos and visual blocks inside the long content (Mike, 25 October 2026) ---------- */ :is(.dup-page, .wmm-article) .lp-article h2, :is(.dup-page, .wmm-article) .lp-article h3 { clear: both; } :is(.dup-page, .wmm-article) .lp-article ul { display: flow-root; } :is(.dup-page, .wmm-article) .lp-fig { margin: calc(var(--u) * 32) 0 0; } :is(.dup-page, .wmm-article) .lp-fig img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: calc(var(--u) * 10); } :is(.dup-page, .wmm-article) .lp-fig figcaption { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 14); line-height: 1.4; color: var(--slate); } :is(.dup-page, .wmm-article) .lp-fig.side { width: calc(var(--u) * 330); margin: calc(var(--u) * 6) 0 calc(var(--u) * 18); } :is(.dup-page, .wmm-article) .lp-fig.side img { aspect-ratio: 4 / 5; } :is(.dup-page, .wmm-article) .lp-fig.side.sq img { aspect-ratio: 1; } :is(.dup-page, .wmm-article) .lp-fig.right { float: right; margin-left: calc(var(--u) * 40); } :is(.dup-page, .wmm-article) .lp-fig.left { float: left; margin-right: calc(var(--u) * 40); } :is(.dup-page, .wmm-article) .lp-gallery { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 20); margin: calc(var(--u) * 36) calc(var(--u) * -160) calc(var(--u) * 8); } :is(.dup-page, .wmm-article) .lp-gallery .lp-fig { margin: 0; } :is(.dup-page, .wmm-article) .lp-gallery img { aspect-ratio: 4 / 3; } :is(.dup-page, .wmm-article) .lp-steps { clear: both; list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 16); margin: calc(var(--u) * 22) calc(var(--u) * -160) 0; padding: 0; } :is(.dup-page, .wmm-article) .lp-steps li { counter-increment: step; background: var(--sand); border-radius: calc(var(--u) * 10); padding: calc(var(--u) * 24) calc(var(--u) * 22) calc(var(--u) * 26); margin: 0; } :is(.dup-page, .wmm-article) .lp-steps li::before { content: counter(step); display: grid; place-items: center; width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: 50%; background: var(--navy); color: var(--off); font-weight: 800; font-size: calc(var(--u) * 18); } :is(.dup-page, .wmm-article) .lp-steps b { display: block; margin-top: calc(var(--u) * 16); font-weight: 800; font-size: calc(var(--u) * 18); line-height: 1.3; } :is(.dup-page, .wmm-article) .lp-steps span { display: block; margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 16); line-height: 1.6; } :is(.dup-page, .wmm-article) .lp-tiles { clear: both; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 20); margin: calc(var(--u) * 32) calc(var(--u) * -160) calc(var(--u) * 8); } :is(.dup-page, .wmm-article) .lp-article .lp-tiles a { position: relative; display: block; overflow: hidden; border-radius: calc(var(--u) * 10); text-decoration: none; color: #fff; } :is(.dup-page, .wmm-article) .lp-tiles img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform .5s; } :is(.dup-page, .wmm-article) .lp-tiles a:hover img { transform: scale(1.04); } :is(.dup-page, .wmm-article) .lp-tiles span { position: absolute; inset: auto 0 0; padding: calc(var(--u) * 40) calc(var(--u) * 20) calc(var(--u) * 18); font-weight: 800; font-size: calc(var(--u) * 19); background: linear-gradient(transparent, rgba(35, 38, 67, .85)); } :is(.dup-page, .wmm-article) .lp-tiles span::after { content: ""; display: inline-block; width: calc(var(--u) * 8); height: calc(var(--u) * 8); margin-left: calc(var(--u) * 10); border-top: 2px solid; border-right: 2px solid; transform: translateY(calc(var(--u) * -2)) rotate(45deg); } @media (max-width: 1000px) { :is(.dup-page, .wmm-article) .lp-fig { margin-top: calc(var(--u) * 24); } :is(.dup-page, .wmm-article) .lp-fig.side, :is(.dup-page, .wmm-article) .lp-fig.right, :is(.dup-page, .wmm-article) .lp-fig.left { float: none; width: 100%; margin: calc(var(--u) * 16) 0 calc(var(--u) * 4); } :is(.dup-page, .wmm-article) .lp-fig.side img, :is(.dup-page, .wmm-article) .lp-fig.side.sq img { aspect-ratio: 4 / 3; border-radius: calc(var(--u) * 8); } :is(.dup-page, .wmm-article) .lp-fig.side.sq img { aspect-ratio: 1; } :is(.dup-page, .wmm-article) .lp-fig figcaption { font-size: calc(var(--u) * 13); } :is(.dup-page, .wmm-article) .lp-gallery, :is(.dup-page, .wmm-article) .lp-steps, :is(.dup-page, .wmm-article) .lp-tiles { margin-left: 0; margin-right: 0; grid-template-columns: 1fr; gap: calc(var(--u) * 14); } :is(.dup-page, .wmm-article) .lp-steps li { padding: calc(var(--u) * 18); } :is(.dup-page, .wmm-article) .lp-steps li::before { width: calc(var(--u) * 34); height: calc(var(--u) * 34); font-size: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .lp-steps b { margin-top: calc(var(--u) * 12); font-size: calc(var(--u) * 17); } :is(.dup-page, .wmm-article) .lp-steps span { font-size: calc(var(--u) * 15); } :is(.dup-page, .wmm-article) .lp-tiles img { aspect-ratio: 16 / 9; } :is(.dup-page, .wmm-article) .lp-tiles span { font-size: calc(var(--u) * 17); padding: calc(var(--u) * 30) calc(var(--u) * 16) calc(var(--u) * 14); } } /* ---------- core and education pages on the landing-page sections (Mike, 25 October 2026: images on every page) ---------- */ :is(.dup-page, .wmm-article) .lp-hero.solo .in { grid-template-columns: minmax(0, calc(var(--u) * 860)); padding-top: calc(var(--u) * 88); padding-bottom: calc(var(--u) * 96); } :is(.dup-page, .wmm-article) .lp-steps.wide { grid-template-columns: repeat(3, 1fr); max-width: calc(var(--u) * 1100); margin: 0 auto; gap: calc(var(--u) * 20); } :is(.dup-page, .wmm-article) .lp-split figcaption { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 14); color: var(--slate); } :is(.dup-page, .wmm-article) .lp-contact.solo .photo { margin: 0; border-radius: calc(var(--u) * 10); overflow: hidden; } :is(.dup-page, .wmm-article) .lp-contact.solo .photo img { display: block; width: 100%; height: 100%; min-height: calc(var(--u) * 420); object-fit: cover; } :is(.dup-page, .wmm-article) .lp-areas .in { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 40); max-width: calc(var(--u) * 1240); margin: 0 auto; align-items: stretch; } :is(.dup-page, .wmm-article) .lp-areas .map { border-radius: calc(var(--u) * 10); overflow: hidden; min-height: calc(var(--u) * 440); } :is(.dup-page, .wmm-article) .lp-areas .map iframe { display: block; width: 100%; height: 100%; min-height: calc(var(--u) * 440); border: 0; } :is(.dup-page, .wmm-article) .lp-areas .towns { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 10); align-content: start; } :is(.dup-page, .wmm-article) .lp-areas .towns a { display: flex; flex-direction: column; gap: calc(var(--u) * 2); padding: calc(var(--u) * 12) calc(var(--u) * 14); border-radius: calc(var(--u) * 8); background: #fff; } :is(.dup-page, .wmm-article) .lp-areas .towns a:hover { background: var(--sand); } :is(.dup-page, .wmm-article) .lp-areas .towns b { font-weight: 800; font-size: calc(var(--u) * 16); } :is(.dup-page, .wmm-article) .lp-areas .towns span { font-size: calc(var(--u) * 13); color: var(--slate); } @media (max-width: 1000px) { :is(.dup-page, .wmm-article) .lp-hero.solo .in { padding-top: calc(var(--u) * 44); padding-bottom: calc(var(--u) * 40); } :is(.dup-page, .wmm-article) .lp-steps.wide { grid-template-columns: 1fr; } :is(.dup-page, .wmm-article) .lp-contact.solo .photo img { min-height: 0; aspect-ratio: 4 / 3; height: auto; } :is(.dup-page, .wmm-article) .lp-areas .in { grid-template-columns: 1fr; gap: calc(var(--u) * 20); } :is(.dup-page, .wmm-article) .lp-areas .map, :is(.dup-page, .wmm-article) .lp-areas .map iframe { min-height: calc(var(--u) * 300); } :is(.dup-page, .wmm-article) .lp-areas .towns { grid-template-columns: repeat(2, 1fr); } } /* approved preview: an H1 whose display word stays beside it (carry), styled like the H1 */ :where(.dup-page.dup-page :where(div:where(.wmm-h1-box))){ margin: 0; font-weight: 400; font-family: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; font-size: inherit; text-transform: none; } .wmm-hero div:where(.wmm-h1-box).elementor-heading-title{ font-size: calc(var(--u) * 58); line-height: 1.06; letter-spacing: -.005em; font-weight: 800; } @media (max-width: 1024px){.wmm-hero div:where(.wmm-h1-box).elementor-heading-title{ font-size: calc(var(--u) * 32); line-height: 1.1; }} :is(.dup-page, .wmm-article) div:where(.wmm-h1-box):has(.h1-loc),:is(.dup-page, .wmm-article) div:where(.wmm-h1-box):has(.h1-kw){ margin-top: -.62em; } :is(.dup-page, .wmm-article) .pg-home .h-hero div:where(.wmm-h1-box):has(.h1-kw){ margin-top: 0; } :is(.dup-page, .wmm-article) .pg-home .h-hero div:where(.wmm-h1-box){ width: calc(var(--u) * 600); font-size: calc(var(--u) * 81); line-height: 1; text-transform: lowercase; } @media (max-width: 1000px){:is(.dup-page, .wmm-article) .pg-home .h-hero div:where(.wmm-h1-box){ width: calc(var(--u) * 342); font-size: calc(var(--u) * 32); }} @media (min-width: 751px) and (max-width: 1000px){:is(.dup-page, .wmm-article) .pg-home .h-hero div:where(.wmm-h1-box){ width: calc(var(--u) * 789); font-size: calc(var(--u) * 57.44); }} :is(.dup-page, .wmm-article) .pg-home .h-hero > div:where(.wmm-h1-box){ grid-column: 1; } :is(.dup-page, .wmm-article) .pg-blinds .bl-main div:where(.wmm-h1-box){ position: absolute; left: calc(var(--u) * 392); top: calc(var(--u) * 137); width: calc(var(--u) * 656); font-size: calc(var(--u) * 81); line-height: 1; letter-spacing: -.015em; } @media (max-width: 1000px){:is(.dup-page, .wmm-article) .pg-blinds .bl-main div:where(.wmm-h1-box){ left: calc(var(--u) * 24); top: calc(var(--u) * 120); width: calc(var(--u) * 342); font-size: calc(var(--u) * 32); }} @media (min-width: 751px) and (max-width: 1000px){:is(.dup-page, .wmm-article) .pg-blinds .bl-main div:where(.wmm-h1-box){ left: calc(var(--u) * 55); top: calc(var(--u) * 215); width: calc(var(--u) * 789); font-size: calc(var(--u) * 57.44); }} :is(.dup-page, .wmm-article) .pg-fabrics .f-hero div:where(.wmm-h1-box){ position: absolute; left: calc(var(--u) * 46); top: calc(var(--u) * 149); width: calc(var(--u) * 563); font-size: calc(var(--u) * 81); line-height: 1; letter-spacing: -.02em; color: #d1d1d4; text-transform: lowercase; } @media (max-width: 1000px){:is(.dup-page, .wmm-article) .pg-fabrics .f-hero div:where(.wmm-h1-box){ left: calc(var(--u) * 24); top: calc(var(--u) * 377); width: calc(var(--u) * 342); font-size: calc(var(--u) * 32); }} @media (min-width: 751px) and (max-width: 1000px){:is(.dup-page, .wmm-article) .pg-fabrics .f-hero div:where(.wmm-h1-box){ left: calc(var(--u) * 55); top: calc(var(--u) * 830); width: calc(var(--u) * 789); font-size: calc(var(--u) * 57.44); }} :is(.dup-page, .wmm-article) .pg-wallpaper .w-top div:where(.wmm-h1-box){ position: absolute; left: calc(var(--u) * 46); top: calc(var(--u) * 126); width: calc(var(--u) * 629); font-size: calc(var(--u) * 81); line-height: 1; text-transform: lowercase; } @media (max-width: 1000px){:is(.dup-page, .wmm-article) .pg-wallpaper .w-top div:where(.wmm-h1-box){ left: calc(var(--u) * 24); top: calc(var(--u) * 380); width: calc(var(--u) * 342); font-size: calc(var(--u) * 32); }} @media (min-width: 751px) and (max-width: 1000px){:is(.dup-page, .wmm-article) .pg-wallpaper .w-top div:where(.wmm-h1-box){ left: calc(var(--u) * 55); top: calc(var(--u) * 836); width: calc(var(--u) * 789); font-size: calc(var(--u) * 57.44); }} :is(.dup-page, .wmm-article) .pg-paint .p-intro div:where(.wmm-h1-box){ position: absolute; left: calc(var(--u) * 72); top: calc(var(--u) * 91); width: calc(var(--u) * 1296); font-size: calc(var(--u) * 63); line-height: 1; text-align: center; } @media (max-width: 1000px){:is(.dup-page, .wmm-article) .pg-paint .p-intro div:where(.wmm-h1-box){ left: calc(var(--u) * 24); top: calc(var(--u) * 80); width: calc(var(--u) * 342); font-size: calc(var(--u) * 30); }} @media (min-width: 751px) and (max-width: 1000px){:is(.dup-page, .wmm-article) .pg-paint .p-intro div:where(.wmm-h1-box){ left: calc(var(--u) * 55); top: calc(var(--u) * 143); width: calc(var(--u) * 789); font-size: calc(var(--u) * 53.85); }} :is(.dup-page, .wmm-article) .pg-about-us .a-story div:where(.wmm-h1-box){ position: absolute; left: calc(var(--u) * 731); top: calc(var(--u) * 69); width: calc(var(--u) * 597); font-size: calc(var(--u) * 63); line-height: 1; color: var(--navy); } @media (max-width: 1000px){:is(.dup-page, .wmm-article) .pg-about-us .a-story div:where(.wmm-h1-box){ left: calc(var(--u) * 24); top: calc(var(--u) * 60); width: calc(var(--u) * 342); font-size: calc(var(--u) * 30); }} @media (min-width: 751px) and (max-width: 1000px){:is(.dup-page, .wmm-article) .pg-about-us .a-story div:where(.wmm-h1-box){ left: calc(var(--u) * 55); top: calc(var(--u) * 107); width: calc(var(--u) * 789); font-size: calc(var(--u) * 53.85); }} :is(.dup-page, .wmm-article) .pg-flooring .f-main div:where(.wmm-h1-box){ position: absolute; left: calc(var(--u) * 68); top: calc(var(--u) * 91); width: calc(var(--u) * 1310); font-size: calc(var(--u) * 63); line-height: 1; } @media (max-width: 1000px){:is(.dup-page, .wmm-article) .pg-flooring .f-main div:where(.wmm-h1-box){ left: calc(var(--u) * 24); top: calc(var(--u) * 80); width: calc(var(--u) * 342); font-size: calc(var(--u) * 30); }} @media (min-width: 751px) and (max-width: 1000px){:is(.dup-page, .wmm-article) .pg-flooring .f-main div:where(.wmm-h1-box){ left: calc(var(--u) * 55); top: calc(var(--u) * 143); width: calc(var(--u) * 789); font-size: calc(var(--u) * 53.85); }} :is(.dup-page, .wmm-article) .lp-hero div:where(.wmm-h1-box){ font-weight: 800; letter-spacing: -.005em; font-size: calc(var(--u) * 58); line-height: 1.06; color: #fff; } @media (max-width: 1000px){:is(.dup-page, .wmm-article) .lp-hero div:where(.wmm-h1-box){ font-size: calc(var(--u) * 32); line-height: 1.1; }} .wmm-h1-box > h1.wmm-h1-in{position:static!important;inset:auto!important;width:auto!important;max-width:none!important;margin:0!important;padding:0!important;font:inherit!important;color:inherit!important;letter-spacing:inherit!important;line-height:inherit!important;text-transform:inherit!important;text-align:inherit!important;transform:none!important;animation:none!important;opacity:1!important;filter:none!important;display:block}