:root{ --mf-black:#000;--mf-white:#fff;--mf-grey:#e4e4e4;--mf-ink:#33373d;--mf-gold:#a28114; --mf-bg:var(--mf-white);--mf-fg:var(--mf-black); --mf-font:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --mf-display:"DM Sans","Helvetica Neue",Arial,sans-serif; /* Measured from the live sites: 12px labels, 16px body, 20px card titles, 35px section headings, 80px display. Line-heights are tight. */ --mf-step--2:12px; --mf-step--1:14px; --mf-step-0:16px; --mf-step-1:20px; --mf-step-2:clamp(1.6rem,1.1rem + 1.6vw,35px); --mf-step-3:clamp(2.4rem,1rem + 4.6vw,80px); --mf-container:1152px; --mf-gutter:20px; --mf-section-y:0rem; --mf-flow:10px; } .mf-grid{display:grid;gap:var(--mf-gutter); grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))} .mf-eyebrow{font-family:var(--mf-font);font-size:var(--mf-step--1);letter-spacing:.18em; text-transform:uppercase;font-weight:500;opacity:.8} .mf-text>*+*{margin-block-start:.75em} .mf-button{display:inline-block;padding:15px 20px;border:1px solid var(--mf-gold); border-radius:2px;background:transparent;color:var(--mf-gold);font:inherit;font-size:12px; letter-spacing:.5px;text-transform:uppercase;text-decoration:none;cursor:pointer; transition:background-color .18s ease,color .18s ease} .mf-button:hover,.mf-button:focus-visible{background:var(--mf-gold);color:var(--mf-black)} .mf-card{background:none;color:inherit;display:flex;flex-direction:column;padding-inline:35px} .mf-card__media{aspect-ratio:316/300;background:var(--mf-grey);overflow:hidden} .mf-card__media img{width:100%;height:100%;object-fit:cover} .mf-card__body{padding:14px 0 0} .mf-card__title{font-family:var(--mf-display);font-size:var(--mf-step-1);font-weight:700;margin:0;line-height:1.1;letter-spacing:-.02em} .mf-card a{text-decoration:none;display:block;color:inherit} .mf-nav{display:flex;gap:1.1rem;flex-wrap:wrap;list-style:none;margin:0;padding:0} .mf-nav a{text-decoration:none;font-size:var(--mf-step--1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:18px} .mf-nav a:hover{color:var(--mf-gold)} .mf-switch{display:flex;gap:.5rem;list-style:none;margin:0 0 0 auto;padding:0;align-items:center} .mf-switch a{text-decoration:none;font-size:var(--mf-step--1);letter-spacing:.1em;opacity:.55} .mf-switch .is-current a{opacity:1;color:var(--mf-gold);font-weight:500} .mf-form{display:grid;gap:1.1rem;max-width:42rem} .mf-field label{display:block;margin-block-end:.35rem;font-size:var(--mf-step--2); letter-spacing:.08em;text-transform:uppercase} .mf-form input,.mf-form textarea,.mf-form select{width:100%;padding:.7rem .8rem;font:inherit; border:1px solid var(--mf-fg);border-radius:2px;background:transparent;color:inherit} .mf-form input:focus-visible,.mf-form textarea:focus-visible,.mf-form select:focus-visible{ outline:2px solid var(--mf-gold);outline-offset:1px} .mf-form-errors{border:1px solid #b00020;color:#b00020;padding:.75rem 1rem} .mf-form-done{border:1px solid var(--mf-gold);padding:1rem} /* Icon rows (market flags) - Elementor stacked these vertically. */ .mf-iconrow{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:center} .mf-iconrow img{width:26px;height:auto} /* Mobile navigation: a disclosure button, as production uses. Implemented with a checkbox so it works without JavaScript. */ .mf-navtoggle{display:none} .mf-navtoggle-label{display:none;cursor:pointer;padding:.5rem;margin-inline:auto;width:max-content} .mf-navtoggle-label span{display:block;width:26px;height:2px;background:var(--mf-gold);margin:5px 0} /* Header breakpoint - see the block at the end of this file, which matches the production sites: burger at 1024px and below, inline menu above. */ /* Gallery lightbox */ .mf-lb{border:0;padding:0;max-width:100vw;max-height:100vh;width:100vw;height:100vh; background:rgba(0,0,0,.94);color:var(--mf-white); display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem} .mf-lb::backdrop{background:rgba(0,0,0,.9)} .mf-lb:not([open]){display:none} .mf-lb__fig{margin:0;display:grid;place-items:center;gap:.75rem;max-height:88vh} .mf-lb__img{max-width:min(92vw,1400px);max-height:80vh;width:auto;height:auto;object-fit:contain} .mf-lb__cap{font-size:var(--mf-step--1);opacity:.8;text-align:center} .mf-lb__close{position:absolute;top:.75rem;right:1rem;font-size:2rem;line-height:1; background:none;border:0;color:inherit;cursor:pointer;padding:.25rem .6rem} .mf-lb__nav{background:none;border:0;color:inherit;font-size:3rem;line-height:1;cursor:pointer; padding:.5rem .9rem;opacity:.75} .mf-lb__nav:hover,.mf-lb__close:hover{opacity:1;color:var(--mf-gold)} .mf-lb__count{position:absolute;bottom:1rem;left:0;right:0;text-align:center; font-size:var(--mf-step--1);opacity:.7;margin:0} .mf-gallery-item{display:block;cursor:zoom-in} @media (max-width:640px){.mf-lb{grid-template-columns:1fr}.mf-lb__nav{position:absolute;top:50%} .mf-lb__nav--prev{left:.25rem}.mf-lb__nav--next{right:.25rem}} /* Specification lists */ .mf-specs{display:grid;grid-template-columns:minmax(9rem,auto) 1fr;gap:.4rem 1.25rem; border-top:1px solid var(--mf-grey);padding-block-start:1rem} .mf-specs dt{font-size:var(--mf-step--1);letter-spacing:.08em;text-transform:uppercase;opacity:.7} .mf-specs dd{margin:0} @media (max-width:560px){.mf-specs{grid-template-columns:1fr;gap:.15rem} .mf-specs dd{margin-block-end:.6rem}} /* Listing carousel */ .mf-carousel{position:relative} /* A slide is one grid cell wide: the track spans the same -10px gutter the grid does, and each slide takes a whole column. Fixing the slide at 386px made the projects strip 5px narrower than the source's on every page. */ .mf-carousel__track{display:grid;grid-auto-flow:column; grid-auto-columns:calc(100% / var(--mf-slides-mobile,1)); margin-inline:-10px;gap:0; overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth; padding-block-end:.5rem;scrollbar-width:thin} @media (min-width:601px){ .mf-carousel__track{grid-auto-columns:calc(100% / var(--mf-slides-tablet,3))} } @media (min-width:1025px){ .mf-carousel__track{grid-auto-columns:calc(100% / var(--mf-slides,3))} } .mf-carousel__track>*{scroll-snap-align:start} .mf-carousel__track::-webkit-scrollbar{height:4px} .mf-carousel__track::-webkit-scrollbar-thumb{background:var(--mf-grey)} .mf-carousel__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2; background:rgba(0,0,0,.55);color:var(--mf-white);border:0;cursor:pointer; font-size:1.6rem;line-height:1;padding:.5rem .75rem;border-radius:2px} .mf-carousel__nav:hover,.mf-carousel__nav:focus-visible{background:var(--mf-gold);color:var(--mf-black)} .mf-carousel__prev{left:-.25rem} .mf-carousel__next{right:-.25rem} .mf-carousel.is-static .mf-carousel__nav{display:none} @media (prefers-reduced-motion:reduce){.mf-carousel__track{scroll-behavior:auto}} .mf-carousel{max-width:100%;overflow:hidden;width:100%} /* The track is one gutter wider than its column, like the grid. */ .mf-carousel__track{width:calc(100% + 20px);max-width:none} /* No inset on the track: the slides carry their own 10px. */ /* Card titles are labels, not underlined links. */ .mf-card a,.mf-card a:hover{text-decoration:none} .mf-card__title{text-decoration:none} /* Arrows sit against the track edge and stay inside the band. */ .mf-carousel__prev{left:0} .mf-carousel__next{right:0} .mf-carousel__nav{box-shadow:0 0 0 1px rgba(255,255,255,.12)} /* Keep the last row of a grid from leaving a single orphan card stretched. */ .mf-grid{align-items:start} /* Card links are whole-card targets; underlining the title looks unfinished. */ .mf-card a,.mf-card a *,.mf-listing a,.mf-carousel a,.mf-carousel a *{text-decoration:none!important} .mf-card__title{position:relative;display:inline-block;padding-block-end:2px} .mf-card a:hover .mf-card__title{box-shadow:inset 0 -1px 0 currentColor} /* Arrows: solid, quiet, inside the band. */ .mf-carousel__nav{background:rgba(0,0,0,.72);color:#fff;box-shadow:none;border-radius:0; width:44px;height:44px;display:grid;place-items:center;padding:0;font-size:1.5rem} .mf-carousel__nav:focus-visible{outline:2px solid var(--mf-gold);outline-offset:2px} /* The theme's button reset outranks the component rules above, so the carousel arrows need explicit specificity rather than relying on source order. */ .mf .mf-carousel button.mf-carousel__nav{ background:rgba(0,0,0,.72)!important;color:#fff!important;border:0!important; border-radius:0!important;width:44px;height:44px;padding:0;font-size:1.5rem; display:grid;place-items:center;box-shadow:none!important;opacity:1} .mf .mf-carousel button.mf-carousel__nav:hover{background:var(--mf-gold)!important;color:#000!important} .mf .mf-carousel button.mf-carousel__nav:focus-visible{outline:2px solid var(--mf-gold);outline-offset:2px} /* Live paragraph rhythm is 26px, not the 10px stack gap. */ .mf-text>*+*,.mf-text p+p{margin-block-start:26px} /* ========================================================================== Measured-parity block. Every value here was read off the computed styles of https://www.metalform.uk at 1440px rather than estimated, so this section is the authority where it overlaps with the approximations further up. ========================================================================== */ /* Live sets card and section titles in the MONO face - 20/22, 700, 0.5px tracking, uppercase. The earlier display-face treatment with negative tracking is what read as generic. */ .mf .mf-card__title, .mf .mf-listing .mf-card__title, .mf-carousel .mf-card__title{ font-family:var(--mf-font);font-size:20px;line-height:22px;font-weight:700; letter-spacing:.5px;text-transform:uppercase} .mf-eyebrow{font-size:10px;line-height:12px;font-weight:500;letter-spacing:.5px; text-transform:uppercase} /* Cards: the image is flush at 316px. No inset padding, and no placeholder fill - the grey block behind each image was showing as a border. */ .mf .mf-card{padding-inline:0} .mf .mf-card__media{background:none} /* The slide pitch comes from the column count, not a fixed width. */ /* Image rows sit flush - no vertical gap between pictures. */ .mf-grid{row-gap:0} .mf-grid>*{margin-block:0} .mf-grid .mf-card__media{margin:0} /* The parent theme boxes all content in .site-main{max-width:1140px}. The production sites run their sections full-bleed and inset only the inner container, so that wrapper has to step out of the way. */ body.mf #content.site-main, body.mf .site-main, body.mf .page-content{max-width:none;width:100%;margin:0;padding:0} /* Listing geometry, measured from production: each item is exactly 386px wide with 10px of its own side padding, and the cards sit flush - the 70px the eye reads between two images is 2x10px item padding plus 2x25px card padding, not a track gap. Adding a gap on top of that made every card 20px too wide and every gutter 50px too large. */ .mf-carousel__track,.mf-listing{gap:0} /* A carousel is a single row, so its items are inset horizontally only; a grid is multi-row and production insets its items on all four sides, which is what separates the rows. Measured: carousel item padding 0 10px, grid item 10px. */ .mf-carousel .jet-listing-grid__item{padding:0 10px;box-sizing:border-box} .mf-listing .jet-listing-grid__item{padding:10px;box-sizing:border-box} .mf-carousel__track{display:grid;grid-auto-flow:column; overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth} .mf-listing{display:grid;grid-template-columns:repeat(auto-fill,minmax(386px,1fr)); row-gap:0;column-gap:0} /* Gallery items are anchors so the native lightbox still works; they must not inherit the inline-link treatment, and the image box needs a height because a background image contributes none. */ .e-gallery-item.mf-gallery-item{display:block;text-decoration:none;line-height:0} /* Height comes from the framework's padding-bottom aspect box - setting an explicit height here overrode it and made every tile too tall. */ .e-gallery-item .e-gallery-image{width:100%; background-size:cover;background-position:50% 50%;background-repeat:no-repeat} /* The builder gives every widget type its own rule of this shape so a widget fills its flex container; the gallery's copy lives in a widget stylesheet that is not part of the harvested bundle. Without it the gallery collapses to zero width inside a centred column. */ .e-con>.elementor-widget-gallery, .e-con-inner>.elementor-widget-gallery{width:var(--container-widget-width,100%)} /* Belt and braces for the parent theme's own header, footer and page title: the production sites render neither, and the ported header/footer templates replace them. */ body.mf > header.site-header, body.mf > footer.site-footer, body.mf .site-branding, body.mf .page-header{display:none!important} /* Except on JetThemeCore's "hhh" template, which is the one page any of the four sites renders through the theme's own wrapper: there the theme's page title is the page's only heading, and all four sites show it. */ body.mf main.jet-theme-core > .page-header{display:block!important} /* The heading itself is switched by Elementor's --page-title-display, and this request still resolves to the home page, so the home page's own document CSS is enqueued and sets that variable to none at :root. Setting it on the main element puts the nearer definition on the heading's own ancestor chain. */ body.mf main.jet-theme-core{--page-title-display:block} /* The header nav is generated here rather than by the source's menu widget, so the production stylesheets do not reach it. Values measured from live: 12px/12px DM Mono 500, 0.5px tracking, uppercase, white on the black bar. */ /* Spacing between items comes from .elementor-item's own padding, exactly as production does it; adding a gap on top pushed the row past the container and wrapped it onto a second line. */ .mf-chrome--header .mf-nav{align-items:center;gap:0;margin:0;padding:0;list-style:none} .mf-chrome--header .mf-nav>li{margin:0;padding:0;list-style:none} .mf-chrome--header .mf-nav a{display:inline-block;font-family:var(--mf-font); font-size:12px;line-height:12px;font-weight:500;letter-spacing:.5px; text-transform:uppercase;text-decoration:none;white-space:nowrap; color:var(--mf-white)} .mf-chrome--header .mf-nav a:hover{color:var(--mf-gold)} .mf-chrome--footer .mf-nav a{color:var(--mf-white);text-decoration:none} /* Live spaces the logo and the nav by 57px (logo ends at 259, first link at 316); without a gap on the header row they render flush together. */ @media (min-width:1024px){ .mf-chrome--header>.mf-row, .mf-chrome--header>.mf-row>.mf-row{display:flex;align-items:center;gap:56px} .mf-chrome--header .mf-iconrow{display:flex;align-items:center;gap:10px} } /* Images are inline by default, so each card image carried a 4px baseline gap and every card ran 4px taller than production. */ .elementor img,.mf img,.jet-listing-dynamic-image__img{display:block} /* Production pins the header to the top of the viewport (fixed, z-index 99), but its sticky setting is sticky_on:["desktop"] - on a phone the bar scrolls away with the page. Applying it at every width was a behaviour difference. Sticky reaches the same result as fixed while staying in flow, so the first section still begins 77px down rather than underneath the bar. */ @media (min-width:1025px){ body.mf .mf-chrome--header{position:sticky;top:0;z-index:99} } /* Only the top-level containers are capped on live; applying this to every container set max-width on 54 elements that have none. */ .e-con.e-parent{max-width:100%} /* Footer menu: the list item's inherited 18px line-height built a taller line box around the 12px links, making the bottom bar 5px deeper than production. Making the items flex removes the anonymous line box. */ .mf-chrome--footer .elementor-nav-menu{display:flex;flex-wrap:wrap;align-items:center; margin:0;padding:0;list-style:none} .mf-chrome--footer .elementor-nav-menu>li{display:flex;align-items:center;margin:0;padding:0} .mf-chrome--footer .elementor-nav-menu>li>.elementor-item{display:block} /* Background video: the source's script normally sizes the injected player. These are the same rules it applies - cover the container, sit behind the content, and ignore pointer events. */ .elementor-background-video-container{position:absolute;inset:0;overflow:hidden; z-index:0;pointer-events:none;direction:ltr} .elementor-background-video-embed, .elementor-background-video-hosted{position:absolute;top:50%;left:50%; transform:translate(-50%,-50%);width:100%;height:100%;min-width:100%;min-height:100%; border:0;object-fit:cover;pointer-events:none} .elementor-background-video-embed{aspect-ratio:16/9;width:max(100%,177.78vh);height:max(100%,56.25vw)} /* A hosted file shows whole, as the YouTube player did inside its frame: the hero panel is portrait and the video landscape, and covering it enlarged the picture 1.7x and cut both sides off. The letterbox is the panel's own black, so nothing reads as a bar. */ .elementor-background-video-hosted{object-fit:contain;background:#000} .e-con:has(> .elementor-background-video-container){position:relative} .e-con > .elementor-background-video-container ~ *{position:relative;z-index:1} @media (max-width:767px){.elementor-hidden-mobile{display:none}} /* --------------------------------------------------------------------------- Header responsiveness, matched to the production sites. Live switches to the burger at 1024px and below. Above that the menu sits inline and is allowed to WRAP onto a second row - live's header grows from 77px to 145px between roughly 1025px and 1300px rather than letting the menu run into the flags and the Contact/Quote buttons. Previously this switched at 780px and never wrapped, so between about 900px and 1200px the menu overlapped the buttons. --------------------------------------------------------------------------- */ @media (max-width:1024px){ .mf-chrome--header .mf-nav{display:none} .mf-chrome--header .mf-navtoggle-label{display:block} /* The list now sits inside a