/* ========================================================================== Machinery & Manufacturing — Advertise landing page Built from artboard: "…Landing Pages Designs - Machinery" (1847 × 7601) HOW SIZING WORKS ---------------- The artboard is 1847px wide. Rather than guess whether that maps 1:1 to CSS px (see HANDOFF-NOTES "Grid"), the page uses a fluid root: 1rem = 16px when the viewport is 1847px 1rem scales proportionally below that, with a 12px floor So every value below is written as (design px ÷ 16)rem and the page is a proportional reproduction of the artboard at any width. If the designer confirms 1847 was scaled up from 1440, change nothing — just cap the root font-size lower (see --root-max below). CONTENTS 1. Theme and tokens 2. Type scale in rem 3. Reset and base 4. Host theme reset 5. Layout wrappers 6. Shared type and components 7. Header 8. Hero 9. Client logos 10. Why manufacturing marketing is different 11. Process 12. Service cards 13. Testimonials 14. Enquiry 15. Footer 16. Responsive Design tokens come from design-tokens.css and are NOT redefined here. Values marked "xd" are measured off the artboard and aren't in the token sheet — they're listed at the end of README.md for sign-off. ========================================================================== */ /* ========================================================================== 1. Theme and tokens The Machinery and Measurement artboards are the same layout in two palettes. Everything accent-coloured below points at these four variables, so the second variant is a class on , not a second stylesheet. ========================================================================== */ :root { --accent: var(--color-orange); /* rules, eyebrows, CTAs, numerals */ --accent-hover: #D97A2C; --heading-color: var(--color-purple); /* section H2s */ --submit-bg: var(--color-purple); /* enquiry form submit */ --submit-hover: #5C1B4A; } .theme-measurement { --accent: var(--color-green); --accent-hover: #74AE36; --heading-color: var(--color-blue); --submit-bg: var(--color-green); /* green on this artboard, not purple */ --submit-hover: #74AE36; } /* ========================================================================== 2. Type scale in rem design-tokens.css states every size in px, which would keep type fixed while the layout scales. Same numbers restated as (px ÷ 16)rem so the type takes part in the fluid root below. The token sheet itself is left untouched. ========================================================================== */ :root { --text-display-size: 4rem; /* 64 */ --text-display-line-height: 5rem; /* 80 */ --text-h2-size: 2.625rem; /* 42 */ --text-h2-line-height: 3.125rem; /* 50 */ --text-stat-size: 3.25rem; /* 52 */ --text-stat-line-height: 3.4375rem; /* 55 */ --text-h3-size: 2.0625rem; /* 33 */ --text-h3-line-height: 2.0625rem; /* 33 */ --text-body-lg-size: 1.625rem; /* 26 */ --text-body-lg-line-height: 2.0625rem; /* 33 */ --text-body-size: 1.25rem; /* 20 */ --text-body-line-height: 1.5rem; /* 24 */ --text-body-sm-size: 1.125rem; /* 18 */ --text-body-sm-line-height: 1.5rem; /* 24 */ --text-nav-size: 0.9375rem; /* 15 */ --text-nav-alt-size: 1.0625rem; /* 17 */ --text-button-size: 1.0625rem; /* 17 */ --text-caption-size: 0.875rem; /* 14 */ --text-caption-line-height: 0.75rem; /* 12 */ --text-micro-size: 0.625rem; /* 10 */ --text-micro-line-height: 0.75rem; /* 12 */ } /* ========================================================================== 3. Reset and base ========================================================================== */ html { /* 16 ÷ 1847 × 100 = 0.8663vw */ /* The 12.5px ceiling is the 1440-equivalent scale (16 × 1440 ÷ 1847). A 16px cap only makes sense if the artboard maps 1:1 across the full viewport; boxed to 1140 that is far too large. Body lands at ~15.6px. */ font-size: clamp(11px, 0.8663vw, 12.5px); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } *, *::before, *::after { box-sizing: border-box; } /* ========================================================================== 4. Host theme reset This page runs inside an existing WordPress theme whose style.css targets bare `body`, `section`, `ul`, `a` and heading selectors sitewide. Two different jobs here, deliberately at two different specificities: 1. Body-level properties get `html body.em-advertise` (0,1,2) so they win outright, whatever order the stylesheets end up in. 2. Everything else uses bare element selectors (0,0,1) — matching the host theme's, so ours win on load order (the stylesheet is enqueued at priority 99), while still losing to our own component classes. Raising these any higher would override our own section padding. This stylesheet only loads on pages using the template, so bare element selectors here are safe. ========================================================================== */ /* The page sits on its own wrapper, so the host theme's dark never shows through and there's no specificity fight to lose. */ .em-page { position: relative; z-index: 0; min-height: 100vh; padding-top: 40px; /* clears the theme's gradient nav band */ padding-bottom: 60px; background: var(--color-white); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--text-body-line-height); font-weight: var(--font-weight-regular); letter-spacing: normal; text-align: left; } /* Body keeps only the margin reset. Colour, type and background all live on .em-page above — if they were forced onto , they'd also repaint the theme's own header and footer, which sit outside our wrapper. */ html body.em-advertise { margin: 0; padding: 0; /* The theme sets html { font-size: 10px } and body { line-height: 2.5rem }, i.e. 25px. Our fluid root changes what a rem is worth, which would silently restretch the theme's own header and footer. Pin it back to the original 25px; .em-page sets its own line-height for the page itself. */ line-height: 25px; } /* Scoped with :where(), which adds no specificity — so these stay at plain element level: they beat the host theme's element rules on load order, still lose to our own component classes, and critically they only apply INSIDE our wrapper. The theme's own header and footer are left completely alone. */ :where(.em-page) :is(section, main, header, footer, aside, article) { margin: 0; padding: 0; background: none; background-image: none; background-color: transparent; border: 0; box-shadow: none; text-shadow: none; } /* The theme's style.css carries legacy rules for this specific page ID, left over from the old advertise page: .page-id-18535 header { display: none; } .page-id-18535 main { background: linear-gradient(...); } Both are undone here (0,1,2 and ID specificity respectively) so the page works without editing the theme. Deleting those two rules from style.css is the tidier fix — this is the belt to that braces. */ body.em-advertise header { display: revert; } /* The host theme paints a dark gradient on bare `main`, plus assorted backgrounds elsewhere. `background: none` shorthand at element specificity wasn't reliably beating its longhand `background-image`, so the page surface is reasserted by ID inside our own wrapper — which outranks it outright. */ .em-page > #main, body.em-advertise #main { background: none; background-image: none; background-color: transparent; box-shadow: none; border: 0; padding: 0; margin: 0; } :where(.em-page) :is(blockquote, figure, dl, dd, address) { margin: 0; padding: 0; } body { margin: 0; background: var(--color-white); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--text-body-line-height); -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } img { height: auto; } ul, ol { margin: 0; padding: 0; list-style: none; } p, h1, h2, h3, dl, dd, figure, blockquote { margin: 0; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .u-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1.25rem; border-radius: var(--radius-md); background: var(--color-navy); color: var(--color-white); transition: top .15s ease; } .skip-link:focus { top: 1rem; } .icon { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; } /* ========================================================================== 5. Layout wrappers ========================================================================== */ .wrap { margin-inline: auto; } /* full-width panels: 38px side margins on the artboard */ /* The artboard is 1847 wide edge to edge, but this page sits inside a site whose masthead and nav are boxed to 1100–1140. Full-bleed panels read as wider than the header above them, so the page is boxed to --em-box and the artboard's proportions are kept as ratios of it: panel 1771/1771 = 1 · content 1569/1771 = .886 process 1335/1771 = .754 · cards 1176/1771 = .664 */ :root { --em-box: 1140px; /* matches the theme's .container */ --em-gutter: 20px; } .wrap--panel { width: min(var(--em-box), 100% - var(--em-gutter) * 2); } .wrap--content { width: min(calc(var(--em-box) * 0.886), 100% - var(--em-gutter) * 2); } .wrap--process { width: min(calc(var(--em-box) * 0.754), 100% - var(--em-gutter) * 2); } .wrap--cards { width: min(calc(var(--em-box) * 0.664), 100% - var(--em-gutter) * 2); } /* ========================================================================== 6. Shared type and components ========================================================================== */ .eyebrow { /* xd: 24 / 34 */ font-size: 1.5rem; line-height: 2.125rem; font-weight: var(--font-weight-medium); letter-spacing: .04em; text-transform: uppercase; color: var(--accent); } .section-title { font-family: var(--font-display); font-weight: var(--font-weight-regular); font-size: var(--text-h2-size); line-height: var(--text-h2-line-height); letter-spacing: var(--text-h2-tracking); text-transform: var(--text-h2-transform); color: var(--heading-color); } .section-title--ink { color: var(--color-ink); } .section-title--center { text-align: center; } .rule { display: block; width: 4.9375rem; /* 79 */ height: .375rem; /* 6 */ background: var(--accent); } .rule--center { margin-inline: auto; margin-top: .5625rem; } .btn { display: inline-flex; align-items: center; justify-content: center; min-width: 17.625rem; /* 282 */ min-height: 3.9375rem; /* 63 */ padding-inline: 1.5rem; border: 0; border-radius: var(--radius-md); font-family: var(--font-body); font-weight: var(--text-button-weight); font-size: var(--text-button-size); line-height: normal; letter-spacing: .02em; text-transform: var(--text-button-transform); color: var(--color-white); white-space: nowrap; cursor: pointer; transition: background-color .18s ease, transform .18s ease; } .btn--accent { background: var(--accent); } .btn--accent:hover { background: var(--accent-hover); } .btn--submit { background: var(--submit-bg); min-width: 10.5rem; } .btn--submit:hover { background: var(--submit-hover); } .btn:active { transform: translateY(1px); } .btn--sm { min-width: 12.25rem; /* 196 */ min-height: 2.75rem; /* 44 */ font-size: var(--text-nav-size); } .btn-row { display: flex; flex-wrap: wrap; gap: .625rem; /* 10 */ } .icon-btn { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--color-deep-purple); } .icon-btn:hover { color: var(--accent); } /* carousel dots */ .dots { display: flex; justify-content: center; gap: .5625rem; } .dots__dot { width: .75rem; height: .75rem; /* 12 */ padding: 0; border: 0; border-radius: 50%; background: var(--color-gray-300); cursor: pointer; transition: background-color .18s ease; } .dots__dot.is-active { background: var(--color-gray-400); } /* ========================================================================== 7. Header ========================================================================== */ .site-header { padding-block: 2.25rem 3.5625rem; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .brand { display: block; } .brand__mark { width: 6.375rem; } /* 102 */ .brand__word { display: block; margin-top: .375rem; font-size: .5625rem; /* xd: wordmark is outlined vector */ font-weight: var(--font-weight-bold); letter-spacing: .085em; line-height: 1; text-transform: uppercase; color: var(--color-deep-purple); white-space: nowrap; } .brand--reverse .brand__word { color: var(--color-white); } .site-nav__list { display: flex; gap: 1.5rem; } .site-nav__list a { font-family: var(--font-nav); font-weight: var(--text-nav-weight); font-size: var(--text-nav-size); letter-spacing: .03em; text-transform: var(--text-nav-transform); color: var(--color-ink); transition: color .15s ease; } .site-nav__list a:hover { color: var(--accent); } .site-header__actions { display: flex; align-items: center; gap: .75rem; } .nav-toggle { display: none; } .nav-toggle__close { display: none; } /* ========================================================================== 8. Hero ========================================================================== */ .hero__panel { position: relative; border-radius: var(--radius-lg); /* The artboard's 182/96/104/252 insets are proportionally huge once the panel is boxed to 1140, so they're eased to keep the panel from becoming mostly padding. */ padding: 5.5rem 1rem 4.5rem 1rem; color: var(--color-white); overflow: hidden; /* Sampled from the artwork itself (#232033 → #20243F) so the panel and the image behind the phone are the same navy and the join is invisible. */ /* background: radial-gradient(120% 150% at 78% 45%, rgba(14,54,114,.55) 0%, rgba(23,42,83,0) 62%), linear-gradient(105deg, #232033 0%, #22243C 55%, #20243F 100%); */ } /* The artwork is a right-hand layer rather than a full-bleed background. Boxed to 1140 the panel is proportionally taller than the original 1847 artboard, so `cover` cropped inward and pushed the phone across the headline. Cropping the source and dissolving its left edge into the panel gradient keeps the phone where the design puts it at any panel size. */ /* .hero__panel::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 46%; background: url("../img/hero-art-right.png") right center / contain no-repeat; pointer-events: none; } */ .theme-measurement .hero__panel::before { background-image: url("../img/m-hero-art-right.png"); } /* Capped at 46% of the panel so the headline always clears the artwork layer, whatever the panel width. */ .hero__copy { position: relative; z-index: 2; max-width: 53%; } .hero__title { margin-top: 2rem; font-family: var(--font-display); font-weight: var(--font-weight-regular); font-size: var(--text-display-size); line-height: var(--text-display-line-height); letter-spacing: var(--text-display-tracking); text-transform: var(--text-display-transform); } .hero__copy .rule { margin-top: 1.5rem; } .hero__lead { margin-top: 2.75rem; font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line-height); letter-spacing: var(--text-body-lg-tracking); max-width: 37.5rem; } .hero__copy .btn-row { margin-top: 2.25rem; } .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; z-index: 2; margin-top: 4.5rem; padding-right: 0; } .stats__item + .stats__item { border-left: var(--border-width) solid var(--accent); padding-left: 2.25rem; } .stats__figure { font-family: var(--font-heading); font-size: var(--text-stat-size); line-height: var(--text-stat-line-height); letter-spacing: var(--text-stat-tracking); } .stats__label { margin: .25rem 0 0; max-width: 12rem; padding-right: 1.5rem; font-size: 1.375rem; /* xd: 22 / 25 */ line-height: 1.5625rem; } /* ========================================================================== 9. Client logos ========================================================================== */ .clients { padding-block: 5rem 4rem; } .clients .section-title { text-align: center; } .clients__viewport { overflow: hidden; margin-top: 1.5rem; } .clients__track { --per-view: 7; --logo-gap: 3rem; display: flex; align-items: center; gap: var(--logo-gap); min-height: 10.3125rem; transition: transform .6s cubic-bezier(.4, 0, .2, 1); } .clients__track > li { flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--logo-gap)) / var(--per-view)); display: grid; place-items: center; } .clients__track img { width: auto; max-height: 6.25rem; /* 100 */ object-fit: contain; } .clients__item--tall img { max-height: 10.3125rem; } /* 165 */ .clients .dots { margin-top: 3.5rem; } .clients .dots:empty { display: none; } /* ========================================================================== 10. Why manufacturing marketing is different ========================================================================== */ section.approach{ padding: 40px; } .approach__panel { position: relative; border-radius: var(--radius-lg); background: var(--color-bg-light-alt); min-height: 0; width: 100%; max-width: 1100px; display: flex; justify-content: center; padding: 10px; } .approach-content-wrap{ display: grid; /* grid-template-columns: minmax(0, 1fr) 34%; */ grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; padding: 0rem 1rem 4rem 1rem; max-width: 1100px; margin: 0px auto; } /* 58rem keeps the H2 on the two lines the artboard uses. Univia Pro sets narrower than the Jost fallback, so this can come back to ~46rem once the licensed webfont is in place. */ .approach__copy { position: relative; z-index: 2; max-width: none; } .approach__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; width: 100%; max-width: 100%; margin-top: .75rem; } .approach__item { display: flex; align-items: center; gap: 2.3125rem; /* 37 */ font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line-height); letter-spacing: var(--text-body-lg-tracking); } .approach__icon { flex: none; width: 3.5rem; height: 3.5rem; /* 56 */ color: var(--heading-color); /* purple / blue with the theme */ stroke-width: 1.6; } .approach__copy .btn-row { margin-top: 4.5rem; } .approach__art { position: relative; width: 100%; z-index: 1; pointer-events: none; margin-top: -6rem; } .approach__person { width: 100%; } .approach__mag { position: absolute; left: 47.06%; /* 376 / 799 of the artwork */ top: 52.62%; /* 492 / 935 */ width: 59.07%; /* 472 / 799 */ } .theme-measurement .approach__mag { left: 38.80%; /* 310 / 799 on this artboard */ top: 45.94%; /* 429 / 935 */ width: 69.09%; /* 552 / 799 */ } /* ========================================================================== 11. Process ========================================================================== */ .process { padding: 5rem; } .wrap--process { display: grid; grid-template-columns: 50% 45%; gap: 5%; align-items: start; } .process__media img { width: 100%; height: 26rem; object-fit: cover; border-radius: var(--radius-lg); } .process__copy { padding-top: 2.875rem; } .steps { margin-top: 2.5rem; } .steps__step { display: flex; align-items: center; gap: 1.5rem; } .steps__step + .steps__step { margin-top: 2.0625rem; } /* 33 */ .steps__marker { position: relative; flex: none; display: grid; place-items: center; width: 7rem; height: 7rem; border: var(--border-width) solid var(--accent); border-radius: 50%; } .steps__marker::after { /* 112 navy disc */ content: ""; position: absolute; inset: .375rem; border-radius: 50%; background: var(--color-navy); } .steps__step + .steps__step .steps__marker::before { /* connector */ content: ""; position: absolute; left: 50%; top: -2.0625rem; width: var(--border-width); height: 2.0625rem; background: var(--accent); } .steps__num { position: relative; z-index: 1; font-size: 1.875rem; line-height: 1; font-weight: var(--font-weight-medium); color: var(--accent); } .steps__text { font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line-height); color: var(--color-navy); } .process__note { margin-top: 1.5rem; max-width: 32.3125rem; /* 517 */ font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line-height); } /* ========================================================================== 12. Service cards ========================================================================== */ .services { padding: 5rem; } .services__head { text-align: center; } .services__lead { margin: 1.5rem auto 0; max-width: 48rem; text-align: center; font-size: var(--text-body-lg-size); line-height: 2.75rem; /* xd: 26 / 44 */ } .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6875rem 1.125rem; /* 27 / 18 */ margin-top: 2.375rem; } .card { position: relative; display: flex; flex-direction: column; min-height: 17rem; padding: 2.25rem 1.75rem 1.75rem; border-radius: var(--radius-lg); background: var(--color-navy); color: var(--color-white); overflow: hidden; } .card__watermark { position: absolute; top: 1.5rem; right: 1.25rem; width: 7rem; opacity: 1; } .card__title { font-family: var(--font-heading); font-weight: var(--font-weight-bold); font-size: var(--text-h3-size); line-height: var(--text-h3-line-height); color: var(--accent); } .card__link { margin-top: auto; margin-left: -.3125rem; color: var(--accent); transition: transform .18s ease; } .card__link .icon { width: 3.5rem; height: 3.5rem; } .card__link:hover { transform: translateX(.25rem); } .card__body { margin-top: 1.5rem; font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line-height); } /* ========================================================================== 13. Testimonials ========================================================================== */ .quotes { padding-block: 5.5rem 0; } .quotes__row { display: flex; align-items: center; justify-content: center; margin-top: 3.75rem; } .quote { flex: none; width: 25rem; /* 320 */ min-height: 31.25rem; /* 500 */ padding: 4.6875rem 2.5rem 2rem; border: var(--border-width) solid rgba(137, 137, 137, .35); border-radius: var(--radius-xl); /* background: var(--color-white); */ background: #F4F4F4; box-shadow: 0 1.25rem 2.5rem rgba(2, 18, 44, .07); text-align: center; color: var(--color-slate); }.quote--feature { width: 28rem; /* 400 */ min-height: 38.875rem; /* 622 */ padding: 4.0625rem 1.875rem 2.5rem; margin-inline: -2.5rem; z-index: 2; border-color: rgba(149, 149, 149, .5); background: var(--color-navy); color: var(--color-white); box-shadow: 0 1.875rem 3.75rem rgba(2, 18, 44, .25); } .quote__avatar { width: 9.625rem; height: 9.625rem; /* 154 */ margin-inline: auto; border-radius: 50%; object-fit: cover; } .quote--feature .quote__avatar { width: 11.625rem; height: 11.625rem; } /* 186 */ /* used where a real headshot hasn't been supplied yet */ .quote__avatar--placeholder { display: grid; place-items: center; background: var(--color-bg-light); } .quote--feature .quote__avatar--placeholder { background: rgba(255, 255, 255, .08); } .quote__avatar--placeholder img { width: 55%; height: auto; } .quote__name { margin-top: 2.8125rem; font-size: var(--text-body-size); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: .02em; } .quote--feature .quote__name { margin-top: 3.4375rem; font-size: 2.125rem; /* xd: 34 */ line-height: 1.1; } .quote__company { margin-top: .25rem; font-family: var(--font-fallback); font-size: var(--text-caption-size); line-height: 1.875rem; text-transform: uppercase; letter-spacing: .06em; } .quote--feature .quote__company { font-family: var(--font-body); font-size: 1.5rem; /* xd: 24 / 30 */ } .quote__text { margin: 1.75rem 0 0; font-family: var(--font-fallback); /* per handoff: Arial in these blocks */ font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height); line-height: 1.5rem; } .quote--feature .quote__text { margin-top: 2rem; } .quotes .dots { margin-top: 2.75rem; } /* ========================================================================== 14. Enquiry ========================================================================== */ .enquiry { padding: 40px 40px 0px 40px; } .enquiry__panel { position: relative; overflow: hidden; min-height: 0; border-radius: var(--radius-lg); color: var(--color-white); background: radial-gradient(120% 150% at 78% 45%, rgba(14, 54, 114, .55) 0%, rgba(23, 42, 83, 0) 62%), linear-gradient(105deg, #232033 0%, #22243C 55%, #20243F 100%); width: 100%; max-width: 1100px; margin: 0 auto; display: flex; justify-content: center; padding: 10px 10px 0px 10px; } .enquiry-box-wrap{ padding: 0rem 1rem 0rem 1rem; max-width: 1100px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .enquiry__copy { position: relative; z-index: 2; width: 100%; overflow: hidden; padding: 6rem 0rem; } .enquiry__mark { width: 6.25rem; } /* 100 */ .enquiry__title { margin-top: 2rem; font-family: var(--font-display); font-weight: var(--font-weight-regular); font-size: var(--text-h2-size); line-height: var(--text-h2-line-height); letter-spacing: var(--text-h2-tracking); text-transform: uppercase; } .enquiry__copy .rule { margin-top: .5rem; } .enquiry__lead { margin-top: 1.25rem; font-size: 1.375rem; line-height: 2rem; } .enquiry__phone { width: 80%; z-index: 1; } /* form ------------------------------------------------------------------- */ .form { margin-top: 2rem; max-width: 100%; } .field { margin: .875rem 0 0; } .field:first-child { margin-top: 0; } .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8125rem; margin-top: .875rem; } .field-row .field { margin-top: 0; } .field input, .field select, .field textarea { width: 100%; min-height: 2.9375rem; /* 47 */ padding: .625rem 1.375rem; border: 0; border-radius: 0; background: var(--color-bg-light); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height); } .field textarea { min-height: 8.6875rem; resize: vertical; } .field ::placeholder { color: var(--color-ink); opacity: 1; } .field--select { position: relative; } .field--select select { appearance: none; padding-right: 3rem; cursor: pointer; } .field--select::after { /* the XD caret polygon */ content: ""; position: absolute; right: 1.5rem; top: 50%; width: 0; height: 0; margin-top: -.1875rem; border-left: .5rem solid transparent; border-right: .5rem solid transparent; border-top: .5rem solid var(--color-ink); pointer-events: none; } .form__actions { margin: 3.3125rem 0 0; } /* validation + send states (PHP-rendered, no JS involved) ----------------- */ .form__status { margin: 2rem 0 0; padding: 1.25rem 1.5rem; max-width: 47.75rem; border-left: .25rem solid var(--accent); background: rgba(255, 255, 255, .1); font-size: var(--text-body-sm-size); line-height: 1.5; } .form__status--sent { border-left-color: var(--color-green); } .form__status--error { border-left-color: #E4572E; } .field--error input, .field--error textarea, .field--error select { box-shadow: inset 0 0 0 2px #E4572E; } .field__error { display: block; margin-top: .375rem; font-size: .875rem; line-height: 1.4; color: #FFC9B8; } /* honeypot — off-screen rather than display:none, which some bots skip */ .u-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ========================================================================== 15. Footer ========================================================================== */ .site-footer { margin-top: 3.9375rem; padding-block: 5.3125rem 1.5rem; background: var(--color-navy); color: var(--color-white); overflow: hidden; } .site-footer__top { display: grid; grid-template-columns: 31.5% 10.6% 9.8% 31.8% 16.3%; align-items: start; width: 100%; max-width: 1100px; padding: 0rem 1rem; } .site-footer__logos { display: flex; align-items: flex-start; gap: 3.5rem; } .em-badge { display: flex; align-items: center; gap: .75rem; color: var(--color-white); } .em-badge__mark { width: 3rem; height: 3rem; } .em-badge__word { font-size: .6875rem; font-weight: var(--font-weight-bold); letter-spacing: .1em; line-height: 1.35; text-transform: uppercase; } .site-footer__blurb { margin-top: 4.375rem; max-width: 28rem; /* 315 */ font-size: 1rem; /* xd: 15 / 21 */ line-height: 1.5125rem; } .site-footer__heading { margin: 0 0 1.7rem; font-size: 1.4rem; /* xd: 16 */ font-weight: 700; line-height: 1.2; } .site-footer__col li + li { margin-top: 0; } .site-footer__col a, .site-footer__address { font-size: 1.3rem; line-height: 1.7rem; /* xd: 16 / 24 */ font-style: normal; } footer.site-footer img{ max-width: 95px; margin-bottom: -22px; } footer.site-footer .site-footer__col ul{ column-count: 1; } .site-footer__col a { transition: color .15s ease; } .site-footer__col a:hover { color: var(--accent); } .socials { display: flex; gap: .5rem; } .socials a { display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: 50%; background: var(--color-white); color: var(--color-navy); transition: background-color .15s ease, color .15s ease; } .socials .icon { width: 1.125rem; height: 1.125rem; } .socials a:hover { background: var(--accent); color: var(--color-white); } .site-footer__address { margin-top: 2.8125rem; } .site-footer__address a:hover { color: var(--accent); } .site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: var(--border-width) solid #A7A7A7; /* xd */ width: 100%; max-width: 1100px; padding: 0rem 1rem; } .site-footer__copyright { font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height); line-height: 1.5; color: #BFBFBF; /* xd */ } .to-top { display: grid; place-items: center; width: 2.8125rem; height: 2.8125rem; /* 45 */ background: #565C5D; /* xd */ color: #DEDEDE; transition: background-color .15s ease; } .to-top:hover { background: var(--accent); color: var(--color-white); } /* ========================================================================== 16. Responsive Below 900px the proportional model stops making sense (the artboard has no mobile design), so the root font-size is pinned and the layout reflows. These rules are an interpretation — worth a look from the designer. ========================================================================== */ /* Between 900px and ~1385px the root font-size has hit its 12px floor, so type no longer shrinks with the container and the widest desktop rows run out of room. These rules ease the three that do. */ @media (max-width: 1240px) { .clients__track { --per-view: 5; } .hero__panel { padding: 8rem 3rem 5rem 5rem; background-position: 80% center; } /* the panel gets taller than the artwork's aspect here, so `cover` crops the phone inward — a scrim keeps the headline off it */ .hero__panel::after { content: ""; position: absolute; inset: 0; /* background: linear-gradient(90deg, rgba(2, 18, 44, .94) 0%, rgba(2, 18, 44, .78) 40%, rgba(2, 18, 44, .1) 75%, rgba(2, 18, 44, 0) 100%); */ } .hero__copy, .stats { position: relative; z-index: 2; } .hero__copy { width: 100%; } .hero-banner-img img { width: 100% !important; } .approach-content-wrap { grid-template-columns: 1.5fr 1fr; padding: 3rem 1rem 4rem 1rem; } .approach__art { margin-top: 0rem; } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 3rem; padding-right: 0; } .stats__item + .stats__item { border: 0; padding-left: 0; } .stats__label { max-width: none; } /* the cut-out stops being an overlay and becomes a second column */ .approach__panel { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; padding: 0rem 4rem; min-height: 0; } .approach__copy { max-width: none; } .approach__list { width: 100%; } .approach__art { position: relative; inset: auto; width: 100%; } .approach__panel { overflow: hidden; } .approach__mag { width: 52%; left: 50%; top: 55%; } section.hero { padding: 0px 20px 20px 20px !important; } section.approach { padding: 20px; } .process { padding: 20px; } .services { padding: 20px; } .enquiry { padding: 20px 20px 0px 20px; } } @media (max-width: 899px) { html { font-size: 13px; } .wrap--panel, .wrap--content, .wrap--process, .wrap--cards { width: min(100% - 2.5rem, 56rem); } /* header ---------------------------------------------------------- */ .site-header { padding-block: 1.5rem; } .site-header__inner { position: relative; } .nav-toggle { display: inline-grid; } .site-header__actions .btn--sm { display: none; } .site-nav { position: absolute; inset: 100% 0 auto; z-index: 30; display: none; margin-top: 1rem; padding: 1.5rem; border-radius: var(--radius-md); background: var(--color-white); box-shadow: 0 1rem 2.5rem rgba(2, 18, 44, .16); } .site-nav.is-open { display: block; } .site-nav__list { flex-direction: column; gap: 1.25rem; } .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; } .brand__mark { width: 5rem; } /* hero ------------------------------------------------------------ */ .hero__panel { padding: 2.5rem 1.75rem 3rem; background-position: 68% center; } .hero__panel::after { content: ""; position: absolute; inset: 0; /* background: linear-gradient(180deg, rgba(2,18,44,.86), rgba(2,18,44,.72)); */ } .hero__copy, .stats { position: relative; z-index: 2; } .hero__title { margin-top: 1.5rem; font-size: 2.75rem; line-height: 1.1; } .hero__lead { margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.55; } .hero__copy .btn-row { margin-top: 1.75rem; } .btn { min-width: 0; width: 100%; } .btn-row > .btn { flex: 1 1 14rem; } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; margin-top: 2.5rem; padding-right: 0; } .stats__item + .stats__item { border: 0; padding-left: 0; } .stats__figure { font-size: 2.25rem; line-height: 1.1; } .stats__label { font-size: 1rem; line-height: 1.35; } /* sections -------------------------------------------------------- */ .section-title { font-size: 1.875rem; line-height: 1.2; } .clients { padding-block: 3.5rem; } .clients__track { --per-view: 5; --logo-gap: 1.5rem; min-height: 0; } .clients__track img, .clients__item--tall img { max-height: 3.5rem; } .clients .dots { margin-top: 1.75rem; } .approach__panel { display: block; padding: 2.5rem 1.75rem 3rem; min-height: 0; } .approach__list { width: 100%; grid-template-columns: 1fr; row-gap: 1.5rem; margin-top: 2rem; } .approach__item { font-size: 1.125rem; line-height: 1.4; gap: 1.25rem; } .approach__icon { width: 2.5rem; height: 2.5rem; } .approach__copy .btn-row { margin-top: 2rem; } .approach__art { position: relative; inset: auto; width: 100%; max-width: 22rem; margin: 2.5rem auto 0; } .approach__mag { left: 30%; top: 55%; width: 55%; } .process { padding: 3rem; } .wrap--process { grid-template-columns: 1fr; gap: 2rem; } .process__media img { height: 14rem; } .process__copy { padding-top: 0; } .steps__marker { width: 7rem; height: 7rem; } .steps__marker::after { inset: .3125rem; } .steps__num { font-size: 1.75rem; } .steps__text, .process__note { font-size: 1.125rem; line-height: 1.5; } .steps__step + .steps__step .steps__marker::before { top: -1.25rem; height: 1.25rem; } .steps__step + .steps__step { margin-top: 1.25rem; } .services { padding: 3rem; } .services__lead { font-size: 1.125rem; line-height: 1.6; margin-top: 1.5rem; } .cards { grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; } .card { min-height: 0; padding: 2rem 1.75rem; } .card__title { font-size: 1.75rem; line-height: 1.1; } .card__watermark { top: 1.5rem; right: 1.25rem; width: 4rem; } .card__link { margin-top: 1.5rem; } .card__body { font-size: 1rem; } section.services ul.cards .card{ height: 330px !important; } .quotes { padding-block: 3.5rem 0; } .quotes__row { flex-direction: column; gap: 1.5rem; margin-top: 2rem; } .quote[hidden] { display: block; } /* stacked: show them all */ .quote, .quote--feature { width: 100%; min-height: 0; margin-inline: 0; padding: 2.5rem 1.75rem; } .quote__avatar, .quote--feature .quote__avatar { width: 6.5rem; height: 6.5rem; } .quote__name { margin-top: 1.25rem; } .quote--feature .quote__name { margin-top: 1.25rem; font-size: 1.5rem; } .quotes .dots { display: none; } .enquiry { padding: 40px 0px 0px 0px; } .enquiry__panel { padding: 2.5rem 1.75rem 3rem; min-height: 0; } .enquiry__title { margin-top: 1.5rem; font-size: 2rem; line-height: 1.1; } .enquiry__lead { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.5; } .enquiry__phone { display: block; } .field-row { grid-template-columns: 1fr; } .form__actions { margin-top: 1.75rem; } .btn--submit { width: auto; min-width: 10.5rem; } /* footer ---------------------------------------------------------- */ .site-footer { margin-top: 3rem; padding-block: 3rem 1.5rem; } .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; } .site-footer__brand, .site-footer__contact { grid-column: 1 / -1; } .site-footer__blurb { margin-top: 4rem; max-width: none; } .site-footer__address { margin-top: 1.5rem; } } @media (max-width: 480px) { .site-footer__logos { flex-direction: row; gap: 1.5rem; } .btn-row > .btn { flex: 1 1 100%; } .clients__track { --per-view: 2; } } /* CUstom CSS ADD */ /* Custom CSS Start */ /* .page-template-template-advertise a.site_logo img { max-width: 80px !important; } .page-template-template-advertise .top_bar_socials .marketing-link::after{ display: none; } .page-template-template-advertise .top_bar_socials a:not(.marketing-link) img { width: 25px !important; height: 25px !important; height: 22px; margin-left: 33px; background: #AE705D; border-radius: 50%; } .page-template-template-advertise .header_container_grid { padding: 0px 0 0 0; gap: 85px !important; } .page-template-template-advertise .banner_label { font-size: 8px; } .page-template-template-advertise .topbar_ad { width: 100%; aspect-ratio: 140 / 11 !important; border-radius: 8px; overflow: hidden; } .page-template-template-advertise .top_bar_socials .top_bar_issue { background: linear-gradient(90deg, #7E1F60 0%, #B0206A 26%, #C43E49 62%, #ED8E3F 100%); } .page-template-template-advertise .top_bar_socials .top_bar_issue:hover { background: linear-gradient(90deg, #7E1F60 0%, #B0206A 26%, #C43E49 62%, #ED8E3F 100%); color: #fff; } .page-template-template-advertise .topbar_ad.topbar_ad--mobile { display: none; } .banner { position: relative; } .page-template-template-advertise .banner_label { font-size: 8px; position: absolute; background: white; top: 5px; right: 5px; color: black; padding: 0px 10px; border-radius: 10px; } .page-template-template-advertise .topbar_ad { width: 100%; border-radius: 8px; overflow: hidden; object-fit: cover !important; object-position: center !important; display: flex; height: 70px; justify-content: center; align-items: center; } .page-template-template-advertise .menu_bar { margin-top: 0px; background: linear-gradient(90deg, #7E1F60 0%, #B0206A 26%, #C43E49 62%, #ED8E3F 100%); } .page-template-template-advertise .top_nav { flex: 1; margin-bottom: -8px; } */ /* .page-template-template-advertise .wrap--panel { width: 1300px !important; } */ @media screen and (max-width: 1350px) { /* .page-template-template-advertise .wrap--panel { width: 100% !important; } */ } /* .page-template-template-advertise .hero__panel::before{ background: url(https://machinery-and-manufacturing-staging.onyx-sites.io/wp-content/uploads/2026/08/hero-ar33t-V332.png) right center / contain no-repeat; } */ /* .page-template-template-advertise .container { max-width: 1300px; } .page-template-template-advertise .header_container_grid { max-width: 1300px; padding: 0rem 1rem; } .page-template-template-advertise .menu_bar_inner { max-width: 1300px; padding: 0.7rem 1rem; } */ /* .page-template-template-advertise .hero__panel::before { content: ""; position: absolute; top: 40px; right: 40px; width: 46%; pointer-events: none; bottom: 38%; } */ /* .page-template-template-advertise .stats__label { margin: .25rem 0 0; max-width: 22rem; padding-right: 1.5rem; font-size: 1.275rem; line-height: 1.5625rem; margin-top: 15px; } .page-template-template-advertise .hero a.btn.btn--accent { font-weight: 400; font-size: 15px; } .page-template-template-advertise .hero__title { margin-top: 1rem; } */ .wrap-container-box{ max-width: 1100px; background: radial-gradient(120% 150% at 78% 45%, rgba(14, 54, 114, .55) 0%, rgba(23, 42, 83, 0) 62%), linear-gradient(105deg, #232033 0%, #22243C 55%, #20243F 100%); border-radius: 29px; margin: 0px auto; padding: 10px; } .wrap.wrap--panel.hero__panel { max-width: 1100px !important; width: 100%; } .hero-content-top { display: flex; gap: 20px; align-items: center; } .hero-banner-img { text-align: right; display: flex; justify-content: flex-end; } .hero-banner-img img { width: 85%; } section.hero { padding: 0px 40px 40px 40px; } section.clients .wrap--content{ width: 100%; max-width: 1100px; } h2#approach-title { margin-bottom: 50px; } .wrap.wrap--process { max-width: 1100px !important; width: 100%; } .process__media { width: 100%; height: 100%; } .process__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); } section.services { padding-top: 150px !important; } .wrap.wrap--cards { width: 100%; max-width: 1170px; } section.services ul.cards .card { height: 400px; display: flex; flex-direction: column; justify-content: space-between; } section.quotes { padding-top: 130px; } .enquiry__image_right { text-align: right; display: flex; justify-content: flex-end; align-items: end; } @media (max-width: 950px) { /* .top_bar_socials { display: flex; align-items: center; justify-content: center; width: 100%; } .page-template-template-advertise .header_container_grid { gap: 10px !important; padding-top: 10px; } #menubtn{ top: 65px; } */ } @media (max-width: 700px) { /* .page-template-template-advertise .topbar_ad{ display: none !important; } .page-template-template-advertise .topbar_ad.topbar_ad--mobile{ width: 100%; border-radius: 8px; overflow: hidden; object-fit: cover !important; object-position: center !important; display: flex !important; height: 70px; justify-content: center; align-items: center; } */ } @media (max-width: 550px) { /* .page-template-template-advertise a.site_logo img{ max-width: 65px !important; } */ .hero-content-top { align-items: flex-start !important; flex-direction: column; } .hero-banner-img { display: none !important; } .hero__copy { max-width: 100%; } .stats { margin-top: 4.5rem; } .approach-content-wrap { grid-template-columns: 1fr; } .enquiry-box-wrap { grid-template-columns: 1fr; } .cards { grid-template-columns: 1fr; } a.marketing-link { display: none !important; } a.top_bar_issue { display: none !important; } #menubtn { top: 54px; width: 35px; height: 35px; border-radius: 50px; padding: 8px; gap: 0px; } .hbar { height: 4px; width: 20px; background: #fff; border-radius: 2px; transition: all 350ms ease-in-out; margin-bottom: -2px; } /* .page-template-template-advertise .stats__label { font-size: 1rem; line-height: 1.2625rem; } */ .stats__figure { font-size: 2rem; line-height: 1.1; } .hero__title { font-size: 2.45rem; } .section-title { font-size: 1.575rem; line-height: 1.5; } .enquiry__image_right { display: none; } section.services { padding-top: 80px !important; } section.quotes { padding-top: 70px; } .clients .section-title { text-align: center; max-width: 300px; margin: 0 auto; } .steps__marker { position: relative; flex: none; display: grid; place-items: center; width: 6rem; height: 6rem; border: var(--border-width) solid var(--accent); border-radius: 50%; } } /* Logo Slider CSS Add */ .clients__viewport--marquee { overflow: hidden; } .clients__track--marquee { display: flex; width: auto; animation: clients-marquee 30s linear infinite; } .clients__track--marquee.is-paused { animation-play-state: paused; } @keyframes clients-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Logo Slider CSS End */ @media (max-width: 899px) { section.services ul.cards .card{ height: 330px !important; } .quotes { padding-block: 3.5rem 0; } .quotes__row { margin-top: 2rem; /* no more flex-direction: column — keep it a normal flex row, only one child (the feature quote) will ever be visible */ } /* only the active slide shows — this is what makes it a real one-at-a-time carousel instead of a stacked list */ .quote:not(.quote--feature) { display: none; } .quote, .quote--feature { width: 100%; min-height: 0; margin-inline: 0; padding: 2.5rem 1.75rem; } .quote__avatar, .quote--feature .quote__avatar { width: 6.5rem; height: 6.5rem; } .quote__name { margin-top: 1.25rem; } .quote--feature .quote__name { margin-top: 1.25rem; font-size: 1.5rem; } /* dots stay visible so users can still navigate the carousel */ .quotes .dots { margin-top: 2rem; } .quotes .dots { display: flex; } }