/* ========================================================================== ATS Pro Equipment — site-wide custom CSS -------------------------------------------------------------------------- Only rules Elementor's own controls cannot express live here. Anything settable in the editor (colour, spacing, typography, borders) is set there so the client can change it without touching code. Contents 1. Design tokens 2. Base / reset 3. Scroll-reveal animation 4. Utility label type 5. Accessibility ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design tokens Mirrors the Elementor global colours so plain CSS can reach them too. Elementor remains the source of truth — edit globals there and update here only if a token is renamed. -------------------------------------------------------------------------- */ :root { --ats-base: #0B0C0D; /* page background */ --ats-ink: #08090A; /* darkest sections */ --ats-surface: #101215; /* cards, panels */ --ats-surface-up: #14161A; /* alternating sections */ --ats-border: #262A2F; /* standard hairline */ --ats-border-dim: #24262A; /* subtler hairline */ --ats-text: #F4F5F6; /* primary text */ --ats-muted: #9AA0A8; /* secondary text */ --ats-dim: #8A9098; /* mono meta labels */ --ats-light: #B9BFC6; /* light grey on near-black */ --ats-hover: #6A7078; /* hover accent / link hover */ --ats-paper: #EDEFF1; /* light product-image plate */ --ats-paper-hi: #F1F3F5; /* light button fill */ /* Blue accent, introduced with the inner pages. Buttons and active states use --ats-accent; headings, icons and links on dark use the lighter tint, which holds contrast against the near-black surfaces. */ --ats-accent: #1E6FD9; --ats-accent-lt: #4C9AFF; --ats-accent-dk: #14509E; --ats-shell: 1400px; /* content max-width */ --ats-gutter: clamp(20px, 3.2vw, 44px); --ats-section-y: clamp(52px, 6.5vw, 88px); --ats-ease: cubic-bezier(0.16, 1, 0.3, 1); } /* -------------------------------------------------------------------------- 2. Base / reset -------------------------------------------------------------------------- */ html { scroll-behavior: smooth; } /* `clip` rather than `hidden`: it stops sideways scrolling without turning the root into a scroll container, so the sticky header keeps working. This is the backstop for sub-pixel spill (the hero carousel leaves ~3px at 768) — real overflow is still fixed at the element that causes it. */ html { overflow-x: clip; } body { background: var(--ats-base); color: var(--ats-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; /* design guarantees no horizontal scroll */ } a { text-decoration: none; transition: color 0.25s; } /* Hello Elementor ships a light-theme link colour; the whole site is dark. Every link lights up on hover rather than dimming, so the affordance is obvious wherever a link appears. Buttons are excluded — they run their own background/foreground hover. */ a:not(.elementor-button):not(.ats-btn):hover, a:not(.elementor-button):not(.ats-btn):focus-visible { color: var(--ats-accent-lt); } /* Elementor colours nav, footer and icon-list links per widget with a `.elementor-{post} .elementor-element.elementor-element-{id}` selector, which no child-theme rule can outrank — so the link areas that are not buttons have their hover forced. */ .ats-footer a:not(.elementor-button):hover, .ats-topbar a:not(.elementor-button):hover, .ats-crumbs a:hover, .ats-prose a:hover, .ats-megapanel a:hover, .elementor-nav-menu a:hover, .elementor-icon-list-item:hover > a, .e-n-menu-title:hover .e-n-menu-title-text { color: var(--ats-accent-lt) !important; } img { max-width: 100%; height: auto; } /* -------------------------------------------------------------------------- 3. Scroll-reveal animation The reference fades sections up as they enter the viewport. Elementor's own entrance animations fire on load rather than on intersection, so this pairs with the observer in custom.js. -------------------------------------------------------------------------- */ @keyframes ats-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } .ats-reveal { opacity: 0; } .ats-reveal.is-visible { opacity: 1; animation: ats-rise 0.75s var(--ats-ease) both; } /* Never leave content invisible if the observer never runs. */ .no-js .ats-reveal, .ats-reveal.is-fallback { opacity: 1; animation: none; } /* -------------------------------------------------------------------------- 4. Utility label type The tracked-out uppercase mono label recurs in every section (eyebrows, meta rows, chips). Defined once rather than restyled per widget. -------------------------------------------------------------------------- */ .ats-eyebrow { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ats-text); } .ats-meta { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ats-dim); } /* -------------------------------------------------------------------------- 5. Card media ratios aspect-ratio and object-fit have no Elementor control, so the product and article plates are set here. Everything else about these cards — colour, spacing, borders, type — stays editable in the editor. -------------------------------------------------------------------------- */ /* Product card: the photo fills the card width and is cropped to a fixed 4:3 plate. Source shots are portrait on white, so containing them left a tall white letterbox and made every card a different shape; cover crops to the product and keeps the grid even. */ .ats-prodimg img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; } /* Article card: 16:10 plate, matching the reference. */ .ats-newsimg img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center; } /* Cards must fill their grid row so footers line up across a row. */ .ats-prodcard, .ats-newscard { height: 100%; } /* Division cards use a 16:9 plate. */ .ats-divisionimg img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } /* The hero headline drops its second line to a muted tint. Two tints are used: the lighter one over photography, the cooler one on the Beta-Press panel. */ .ats-hmuted { color: var(--ats-hero-accent, #a8aeb5); } .ats-hmuted2 { color: var(--ats-muted); } /* The reference cuts the hero button into a parallelogram: the button skews 12° left and its label skews back so the text stays upright. */ .ats-herobtn .elementor-button { transform: skewX(-12deg); transition: background 0.25s, color 0.25s, box-shadow 0.25s, translate 0.25s; } .ats-herobtn .elementor-button-content-wrapper { transform: skewX(12deg); display: flex; align-items: center; gap: 16px; } .ats-herobtn .elementor-button:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45); translate: 0 -3px; } /* Small rotated square used as a bullet in the hero and CTA. */ .ats-diamond .elementor-divider-separator { transform: rotate(45deg); } /* -------------------------------------------------------------------------- 6. Hero carousel Two things here are outside Elementor's controls: a five-stop gradient (the overlay control offers two), and moving the arrows and counter into the bottom corners. Slide content, imagery and copy stay editable. -------------------------------------------------------------------------- */ /* Left-weighted scrim so the headline stays legible over busy tool imagery. Elementor's own overlay is disabled on these slides so this is the single source of truth for the gradient. */ .ats-heroslide::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient( 90deg, rgba(8, 9, 10, 0.92) 0%, rgba(8, 9, 10, 0.8) 34%, rgba(8, 9, 10, 0.42) 60%, rgba(8, 9, 10, 0.18) 82%, rgba(8, 9, 10, 0.1) 100% ); } /* Slide four is the light "engineered quality" panel — no scrim. */ .ats-heroslide--4::before { background: none; } /* Hero height note The reference gives each slide a fixed height of clamp(500px,42vw,800px). At ~1440px its own content is ~90px taller than that, so the reference clips its eyebrow behind the sticky header. The slides here use Min Height instead, so the hero grows to fit and nothing is hidden. To reproduce the reference literally, uncomment the block below. .ats-herocarousel { --e-n-carousel-slide-height: clamp(500px, 42vw, 800px); --e-n-carousel-slide-container-height: clamp(500px, 42vw, 800px); } .e-con.ats-heroslide { overflow: hidden; } */ .ats-heroslide > .e-con-inner, .ats-heroslide > .elementor-widget-wrap { position: relative; z-index: 1; } /* -------------------------------------------------------------------------- Hero height — the whole banner inside the first screen The hero sits under the top bar and the sticky header, so the space it can occupy is the viewport minus those two. Measured at 1366x768 the banner came to 672px against 633px available, putting 40px of it below the fold. The overflow was spacing, not content: of a 646px slide, 416px was the eyebrow, headline, copy, feature strip and button, and 230px was the inner padding — 150px of it under the button alone. So the padding is made fluid against viewport height while the content keeps its own size, and the section is pinned to the available height. Nothing is cropped or hidden. `svh` is the small-viewport height, which stays correct on phones where the browser chrome slides away; the vh line before it is the fallback. -------------------------------------------------------------------------- */ :root { /* Top bar + header. */ --ats-chrome: 135px; } /* The section is pinned to exactly the space under the header. Driving the height through Elementor's `--e-n-carousel-slide-height` was tried first and does not work — the widget writes that variable inline, so a stylesheet rule never wins and it stayed `auto`. Setting the height on the elements is the reliable route. */ #top.ats-hero { /* No strip is reserved under the slides. The arrows, progress rule and counter are absolutely positioned over the carousel (bottom: 34px), so reserving space for them only shrank the slide and left a black band between the photo and the stats bar. The slide now runs the full height and the controls sit on top of the image. */ --ats-hero-controls: 0px; --ats-hero-space: calc(min(100vh, 100svh) - var(--ats-chrome)); --ats-hero-slide: calc(var(--ats-hero-space) - var(--ats-hero-controls)); min-height: var(--ats-hero-space) !important; max-height: var(--ats-hero-space) !important; overflow: hidden; } /* Elementor writes `--e-n-carousel-slide-height: auto` as an inline style on the widget, and an inline custom property beats any stylesheet rule — which is why setting it normally had no effect and the slide stayed at its content height. Custom properties do accept !important, and that wins. */ #top.ats-hero .ats-herocarousel { --e-n-carousel-slide-height: var(--ats-hero-slide) !important; --e-n-carousel-slide-container-height: var(--ats-hero-slide) !important; height: var(--ats-hero-space) !important; } /* Carousel, track and slides all fill that height, so every slide matches. */ #top.ats-hero .e-n-carousel, #top.ats-hero .swiper { height: var(--ats-hero-space) !important; box-sizing: border-box; } #top.ats-hero .swiper-wrapper, #top.ats-hero .swiper-slide, #top.ats-hero .ats-heroslide { height: var(--ats-hero-slide) !important; max-height: var(--ats-hero-slide) !important; min-height: 0 !important; } /* The stats bar is pulled up 27px to tuck under the hero. With the hero now ending exactly at the fold, that overlap was the one thing still showing on load, so it starts flush instead. */ #top.ats-hero + .ats-stats { margin-top: 0 !important; } /* Equal space above and below the content. The block was pinned to the bottom of its slide — measured 289px above the eyebrow against 36px under the button. Centring inside `.ats-heroinner` did nothing, because the inner is content-sized; it is the slide around it that does the positioning. Some slides lay their content out as a column and the one with the product photo as a row, so neither `justify-content` nor `align-items` alone covers both. Auto margins centre a flex item along a column, `align-self` does the same along a row — together they balance every slide whichever way it runs. */ #top.ats-hero .ats-heroinner { align-self: center !important; margin-top: auto !important; margin-bottom: auto !important; justify-content: center !important; padding-top: clamp(20px, 4vh, 56px) !important; padding-bottom: clamp(20px, 4vh, 56px) !important; } /* The photo alongside the last slide is stretched to a fixed height, so as the banner got shorter it ran past the top of the slide. Containing it inside the available height keeps the whole product shot visible, uncropped. */ #top.ats-hero .ats-heroside { overflow: hidden; max-height: 100%; } #top.ats-hero .ats-heroside img { max-height: 100%; height: auto !important; object-fit: contain !important; } /* One button style across every slide — slides 1, 3 and 4 were still rendering the dark variant, which disappears against their darker photographs. */ #top.ats-hero .elementor-button { background-color: #f1f3f5 !important; color: #08090a !important; fill: #08090a !important; } #top.ats-hero .elementor-button:hover, #top.ats-hero .elementor-button:focus { background-color: #262a2f !important; color: #f4f5f6 !important; fill: #f4f5f6 !important; } /* The feature strip and button margins scale with the viewport too. */ .ats-featrow { margin-top: clamp(14px, 3vh, 40px) !important; margin-bottom: clamp(14px, 3vh, 38px) !important; } .ats-herobtn { margin-top: clamp(16px, 3.4vh, 44px) !important; } /* --- Arrows: paired buttons in the bottom-left, on the content gutter --- Elementor's nested-carousel stylesheet targets these as `.elementor-widget-n-carousel .elementor-swiper-button.elementor-swiper-button-prev` (three classes) and loads after this file, so a three-class selector here only ties and loses. Carry the extra class to win outright, and set the logical inset alongside the physical one. */ .elementor-widget-n-carousel.ats-herocarousel .elementor-swiper-button.elementor-swiper-button-prev, .elementor-widget-n-carousel.ats-herocarousel .elementor-swiper-button.elementor-swiper-button-next { top: auto; bottom: 34px; margin: 0; transform: none; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--ats-surface); border: 1px solid var(--ats-border); border-radius: 0; color: var(--ats-text); font-size: 16px; transition: background 0.25s, color 0.25s; } .elementor-widget-n-carousel.ats-herocarousel .elementor-swiper-button.elementor-swiper-button-prev:hover, .elementor-widget-n-carousel.ats-herocarousel .elementor-swiper-button.elementor-swiper-button-next:hover { background: var(--ats-ink); color: #fff; } .elementor-widget-n-carousel.ats-herocarousel .elementor-swiper-button.elementor-swiper-button-prev { left: max(var(--ats-gutter), calc((100% - 1300px) / 2)); inset-inline-start: max(var(--ats-gutter), calc((100% - 1300px) / 2)); right: auto; inset-inline-end: auto; } /* Butt the two buttons together on a shared 1px seam. */ .elementor-widget-n-carousel.ats-herocarousel .elementor-swiper-button.elementor-swiper-button-next { left: calc(max(var(--ats-gutter), calc((100% - 1300px) / 2)) + 47px); inset-inline-start: calc(max(var(--ats-gutter), calc((100% - 1300px) / 2)) + 47px); right: auto; inset-inline-end: auto; } /* --- Fraction counter, bottom-right, with the progress rule --- */ .elementor-widget-n-carousel.ats-herocarousel .swiper-pagination { position: absolute; left: auto; inset-inline-start: auto; right: max(var(--ats-gutter), calc((100% - 1300px) / 2)); inset-inline-end: max(var(--ats-gutter), calc((100% - 1300px) / 2)); bottom: 46px; top: auto; /* Swiper centres the fraction counter with translate(-50%, -50%). The horizontal half fought the inset above and pulled the counter 143px inside the content band at 1920; only the vertical half is kept, so the counter ends exactly on the band edge without moving up or down. */ transform: translateY(-50%); width: auto; display: flex; align-items: center; gap: 18px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; font-weight: 600; letter-spacing: 0.18em; /* The counter sits over the slide photography, which runs from near-black to almost white across the four slides. A dim grey disappeared on the lighter ones, so it is white with a soft shadow instead — the shadow is what keeps it legible where the image behind is pale. */ color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } /* The rule to the right of the counter. Its filled portion is driven by --ats-progress, set from custom.js as slides change. Both halves were dark tokens, which left the rule invisible against a dark image and barely there against a light one. White on translucent white reads on either, and the shadow separates it from a pale background. */ .elementor-widget-n-carousel.ats-herocarousel .swiper-pagination::after { content: ''; display: block; width: clamp(90px, 14vw, 180px); height: 3px; border-radius: 2px; background: linear-gradient( to right, #fff 0 var(--ats-progress, 25%), rgba(255, 255, 255, 0.38) var(--ats-progress, 25%) 100% ); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); transition: --ats-progress 0.85s var(--ats-ease); } @media (max-width: 720px) { .elementor-widget-n-carousel.ats-herocarousel .swiper-pagination::after { display: none; } } /* -------------------------------------------------------------------------- 7. Section heads The supporting paragraph beside a section title is capped here rather than with an inline width, because any width on a flex child in this row makes it drop to its own line. -------------------------------------------------------------------------- */ .ats-secintro, .ats-divintro { max-width: 420px; } #why .ats-secintro { max-width: 400px; } @media (max-width: 900px) { .ats-secintro, .ats-divintro { max-width: none; } } /* Label and trailing arrow always stay on one line. */ .ats-arrowlink .elementor-heading-title { white-space: nowrap; } /* -------------------------------------------------------------------------- 7b. Featured-products filter row Chips on the left, result count and Reset on the right, on one line. The filter widget is a block-level Elementor widget, so it needs to be told to share the row rather than claim it. -------------------------------------------------------------------------- */ /* Chips grow to fill the row so the count and Reset sit hard right. The chip list wraps internally when it runs out of room. Pinning this widget against shrinking (flex-shrink: 0) instead pushes the whole row past the viewport and takes the page's horizontal scroll with it. */ .ats-filterbar > .elementor-widget-taxonomy-filter { flex: 0 1 auto; width: auto; } .ats-filters .e-filter { flex-wrap: wrap; justify-content: flex-start; overflow: visible; } .ats-filters .e-filter-item { flex: 0 0 auto; overflow: visible; } /* Elementor containers default to width:100%, which would drop this onto its own line. */ .ats-filterbar > .ats-filtermeta { flex: 0 0 auto; width: auto; white-space: nowrap; } @media (max-width: 900px) { .ats-filterbar { flex-direction: column; align-items: flex-start; } /* The reference lets the chip row scroll sideways on small screens rather than wrap into a tall block. */ .ats-filters .e-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .ats-filters .e-filter::-webkit-scrollbar { display: none; } .ats-filters .e-filter-item { flex: 0 0 auto; } } /* -------------------------------------------------------------------------- 7c. Mobile menu panel Elementor's dropdown supplies the surface and row typography; the gutter and the rules between rows come from the reference's mobile panel. -------------------------------------------------------------------------- */ @media (max-width: 1024px) { /* The panel is a solid sheet dropped under the header, not an overlay — Elementor leaves it transparent, which puts the menu on top of the hero. */ .ats-nav.ats-nav .e-n-menu-wrapper { /* Elementor generates its own background rule for this panel and loads it after this file, so the override has to be explicit. */ background-color: var(--ats-surface) !important; border-top: 1px solid var(--ats-border); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55); padding: 20px clamp(20px, 3.2vw, 44px) 28px; } .ats-nav .e-n-menu-heading { flex-direction: column; align-items: stretch; gap: 0; } /* One hairline-separated row per item. */ .ats-nav .e-n-menu-item > .e-n-menu-title { justify-content: space-between; border-bottom: 1px solid var(--ats-border); width: 100%; } /* Product categories open on tap, not by default. The panel is closed until its row is tapped — Elementor's own dropdown button drives that, so nothing here forces `display`. The arrow stays visible and is a real 44px tap target. */ .ats-nav .e-n-menu-content { min-height: 0; } /* Inside the mobile menu the panel is a plain block under its row rather than a floating desktop dropdown, and it sits inside the sheet's gutters so it is inset equally from both edges of the screen. */ .ats-nav .e-n-menu-content > .ats-megapanel { position: static !important; width: 100% !important; max-width: 100% !important; box-shadow: none !important; border: 0 !important; background: transparent !important; padding: 4px 0 14px !important; } /* The two rows with a dropdown must sit on exactly the same rhythm as the plain ones. Two things were making them taller: 1. A 44px minimum on the arrow button pushed its row from 50px to 73px. The button keeps a full-size tap area, but takes it from a pseudo element that overlays the row instead of from its own box, so it no longer contributes height. 2. The dropdown's own padding applied even while collapsed, adding 25px under the row. That padding now applies only when the panel is open. */ .ats-nav .e-n-menu-dropdown-icon { min-width: 0; min-height: 0; height: auto; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; flex: 0 0 auto; background: transparent; border: 0; cursor: pointer; position: relative; } /* The tap target: 44px tall and wide, drawn outside the button's own box. */ .ats-nav .e-n-menu-dropdown-icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .ats-nav .e-n-menu-content:not(.e-active) { padding: 0 !important; min-height: 0 !important; height: 0 !important; overflow: hidden !important; } /* Two-up grid of category tiles rather than the desktop showcase. The card box is tightened; the image inside keeps whatever height it is given. */ .ats-nav .ats-megapanel .e-con-inner, .ats-nav .ats-megapanel > .e-con { padding: 0 !important; max-width: 100% !important; } .ats-nav .ats-megapanel .ats-megacard { padding: 8px !important; min-width: 0; } .ats-nav .ats-megapanel .e-grid, .ats-nav .ats-megapanel .e-grid > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; max-width: 100% !important; } /* Elementor sizes the dropdown to the full viewport width, which is right for the desktop full-bleed panel but overshoots inside the mobile sheet: the row starts at the sheet's 20px gutter and is still 100vw wide, so it ran 20px past the right edge. Filling the sheet's content box instead gives equal gutters on both sides. Note this constrains the dropdown row, not the wrapper — the wrapper's containing block is the narrow nav element, so limiting that collapses the whole menu to ~93px. */ .ats-nav .e-n-menu-item, .ats-nav .e-n-menu-content { width: 100% !important; max-width: 100% !important; } .ats-nav .ats-megapanel, .ats-nav .ats-megapanel .e-con, .ats-nav .ats-megapanel .e-grid, .ats-nav .ats-megapanel .ats-megacard { box-sizing: border-box; } /* A 20px icon is not a tap target; 44px is the accepted minimum. */ .ats-nav .e-n-menu-toggle { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } } @media (max-width: 480px) { .ats-nav .e-n-menu-content, .ats-nav .e-n-menu-wrapper { padding: 10px 5px 15px; } } /* -------------------------------------------------------------------------- 8. "Who we are" media column The reference floats two frosted badges over the photo. Elementor can place widgets absolutely, but the glass treatment (blur + translucent fill + hairline) has no control, so the whole overlay is expressed here while the text inside both badges stays editable. -------------------------------------------------------------------------- */ .ats-aboutmedia { position: relative; align-self: flex-start; } .ats-aboutimg img { display: block; width: 100%; height: clamp(360px, 34vw, 560px); object-fit: cover; object-position: 60% 50%; border: 1px solid var(--ats-border); } .ats-badge { position: absolute; z-index: 2; background: rgba(16, 17, 19, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; } .ats-badge--bl { left: 20px; bottom: 20px; padding: 24px 28px; max-width: 272px; } .ats-badge--tr { top: 24px; right: 24px; padding: 13px 17px; } /* -------------------------------------------------------------------------- 9. "Who we are" pillar ledger Three pillars on a rotating slider. Built as Elementor tabs so each pillar stays editable; the reference's chrome — controls below the panel, drawn as a growing rule plus a mono label — is applied here. Rotation lives in custom.js. -------------------------------------------------------------------------- */ .ats-ledgerbox { border-top: 1px solid var(--ats-border); border-bottom: 1px solid var(--ats-border); padding: 26px 0; } /* Panel first, controls after — the reverse of Elementor's default order. */ .ats-ledger .e-n-tabs { display: flex; flex-direction: column-reverse; gap: 0; } .ats-ledger .e-n-tabs-content { min-height: 126px; } .ats-ledger .e-n-tabs-heading { justify-content: flex-start; gap: 10px; margin-top: 22px; border: none; } /* Strip Elementor's default tab chrome back to a bare control. */ .ats-ledger .e-n-tab-title { background: none !important; border: none !important; border-radius: 0 !important; padding: 8px 0 !important; display: flex; align-items: center; gap: 9px; cursor: pointer; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; color: var(--ats-dim); transition: color 0.35s; } /* The rule that grows to mark the active pillar. */ .ats-ledger .e-n-tab-title::before { content: ''; display: block; width: 14px; height: 2px; background: #2c3035; transition: width 0.35s, background 0.35s; } .ats-ledger .e-n-tab-title[aria-selected='true'] { color: var(--ats-text); } .ats-ledger .e-n-tab-title[aria-selected='true']::before { width: 34px; background: var(--ats-paper-hi); } /* Elementor draws its own active indicator; the rule above replaces it. */ .ats-ledger .e-n-tab-title::after { display: none !important; } .ats-ledgerpanel { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-content: center; } @media (max-width: 600px) { .ats-ledgerpanel { grid-template-columns: 1fr; gap: 8px; } } /* -------------------------------------------------------------------------- 10. Line icons These icons are drawn with strokes and an unfilled body. Elementor sets `fill` on icon SVGs, which turns them into solid shapes, so the fill is cleared and the stroke follows the widget's colour through currentColor. -------------------------------------------------------------------------- */ /* Elementor paints icon SVGs with `fill: var(--e-icon-color)` from its own stylesheet, which turns these stroke-drawn icons into solid shapes. The fill has to be cleared on the shapes themselves, and nothing here outranks Elementor's generated per-widget rule — hence !important, scoped to icons explicitly marked as line art. */ .ats-lineicon svg, .ats-lineicon svg * { fill: none !important; } .ats-lineicon svg { stroke: currentColor; } /* -------------------------------------------------------------------------- 11. Card hover One motion for every boxed surface on the site: the whole card lifts and gains a shadow, its border warms, and any image inside eases up ~5%. Everything here is !important. Elementor writes each container's background, border and box-shadow as `.elementor-{post} .elementor-element.elementor-element-{id}`, a three-class selector no child-theme rule can outrank — and cards are built from those containers, so the hover state has to override them explicitly. -------------------------------------------------------------------------- */ /* The client's own effect, used verbatim. `crd-bx` is applied to every card's media well so this block is what actually drives the zoom. */ .crd-bx { overflow: hidden; } .crd-bx img { display: block; width: 100%; height: 100%; object-fit: cover; transform: translateZ(0) scale(1); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 0.6s ease !important; } .crd-bx:hover img { transform: translateZ(0) scale(1.05); cursor: pointer; } /* Media panels clip, so a zooming photo stays inside its own frame. */ .ats-prodplate, .ats-newsplate, .ats-divmedia, .ats-aboutmedia, .ats-storymedia, .ats-megacard, .ats-videocard .elementor-widget-video { overflow: hidden; } /* -------------------------------------------------------------------------- Image hover — the photo zooms inside its panel This runs alongside the whole-card scale below. The panel above clips, so the image never grows beyond the area it already occupies. -------------------------------------------------------------------------- */ .ats-prodplate img, .ats-newsplate img, .ats-divmedia img, .ats-megacard img, .ats-videocard .elementor-custom-embed-image-overlay { transform: translateZ(0) scale(1); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 0.6s ease !important; } .ats-prodcard:hover .ats-prodplate img, .ats-newscard:hover .ats-newsplate img, .ats-divcard:hover .ats-divmedia img, .ats-videocard:hover .elementor-custom-embed-image-overlay, .ats-megacard:hover img, .crd-bx:hover img { transform: translateZ(0) scale(1.05) !important; } /* -------------------------------------------------------------------------- THE card hover — one behaviour everywhere The whole box scales to 1.05 over 0.6s and nothing else changes: no border colour, no outline, no shadow, no colour shift in the contents. The card lifts as a single unit, so its text and icons scale with it. Elementor writes container styles as `.elementor-{post} .elementor-element.elementor-element-{id}` — three classes — so these carry !important to win. -------------------------------------------------------------------------- */ /* The class list is the one an audit of every page actually turned up. Inner media panels (.ats-prodplate, .ats-divmedia …) are deliberately absent — they sit inside these cards and would scale a second time. */ .ats-card, .ats-prodcard, .ats-newscard, .ats-divcard, .ats-whycard, .ats-filecard, .ats-videocard, .ats-helpcard, .ats-enquirycard, .ats-industry, .ats-inforow, .ats-contactrow, .ats-megacard, .ats-stkitem, .ats-sidecta, .ats-pdpcta, .ats-ledgerbox, .ats-splitnarrow.ats-reveal > .e-con, /* Each recent-post entry is the object here. The panel around it (.ats-sideblock) is a container holding a list, so it is deliberately not in this list — scaling it would blow up the whole "Recent Posts" box. */ .ats-recentposts .elementor-post, .crd-bx { object-fit: cover; transform: translateZ(0) scale(1); backface-visibility: hidden; -webkit-backface-visibility: hidden; /* The gap-masking ring has to grow and shrink in step with the scale. Transitioning the transform alone meant the ring switched on and off instantly: moving the pointer from one box straight to its neighbour left the first box still enlarged for 0.6s but already unmasked, so the doubled border flashed back every time — which is what showed up when hovering the two contact boxes alternately. */ transition: transform 0.6s ease, box-shadow 0.6s ease !important; /* Contents stay inside the card frame: with the photo zooming as well, an unclipped card would let the image spill past its own edge. */ overflow: hidden; } .ats-card:hover, .ats-prodcard:hover, .ats-newscard:hover, .ats-divcard:hover, .ats-whycard:hover, .ats-filecard:hover, .ats-videocard:hover, .ats-helpcard:hover, .ats-enquirycard:hover, .ats-industry:hover, .ats-inforow:hover, .ats-contactrow:hover, .ats-megacard:hover, .ats-stkitem:hover, .ats-sidecta:hover, .ats-pdpcta:hover, .ats-ledgerbox:hover, .ats-splitnarrow.ats-reveal > .e-con:hover, .ats-recentposts .elementor-post:hover, .crd-bx:hover { transform: translateZ(0) scale(1.05); transition: transform 0.6s ease, box-shadow 0.6s ease !important; cursor: pointer; /* A scaled card overlaps its neighbours; this keeps it on top rather than sliding under the next tile in the grid. */ position: relative; z-index: 2; /* The pale line people were seeing at the edge of a hovered card. Nothing white is drawn — it is two borders read as one. A 470px card in a 16px grid grows 12px each side at 1.05, so its border ends up just 4px from the neighbour's. Two 1px rules that close together look like a single bright seam against the dark background. This ring is the page colour, painted under the card's own border and above the neighbour behind it, so the neighbour's border is hidden for the width of the gap and only one rule is ever visible. It is not a shadow — there is no blur, spread only, in a flat colour that matches what is already behind the card. */ box-shadow: 0 0 0 14px var(--ats-card-gap, var(--ats-base)) !important; } /* Not every grid sits on the page colour. These four draw their divider lines by letting a lighter parent show through the gaps, so a base-coloured ring would both read as a dark halo and rub out the dividers around the hovered cell. They opt out — they have no doubled-border problem to solve, because the gap itself is the rule. .ats-divcard on rgb(20, 22, 26) .ats-whycard on rgb(36, 38, 42) .ats-industry on rgb(38, 42, 47) .ats-contactrow on rgb(16, 18, 21) */ .ats-divcard, .ats-whycard, .ats-industry, .ats-contactrow { --ats-card-gap: transparent; } /* No colour change on hover — the border stays exactly as it is at rest. Elementor writes a per-element hover border for several of these cards, and on some it is the blue accent. Pinning both states to the resting border is what guarantees no blue outline appears anywhere on the site, whatever a given card was built with. The icon plates inside are pinned too, so nothing within a card changes colour either. */ .ats-card, .ats-card:hover, .ats-prodcard, .ats-prodcard:hover, .ats-newscard, .ats-newscard:hover, .ats-divcard, .ats-divcard:hover, .ats-whycard, .ats-whycard:hover, .ats-filecard, .ats-filecard:hover, .ats-videocard, .ats-videocard:hover, .ats-helpcard, .ats-helpcard:hover, .ats-enquirycard, .ats-enquirycard:hover, .ats-industry, .ats-industry:hover, .ats-inforow, .ats-inforow:hover, .ats-contactrow, .ats-contactrow:hover, .ats-megacard, .ats-megacard:hover, .ats-stkitem, .ats-stkitem:hover, .ats-sideblock, .ats-sideblock:hover, .ats-sidecta, .ats-sidecta:hover, .ats-pdpcta, .ats-pdpcta:hover, .ats-ledgerbox, .ats-ledgerbox:hover { border-color: var(--ats-border) !important; } /* Elementor's own hover shadow is switched on for the loop cards. The scale is the whole effect, so no drop shadow is drawn in either state. The resting value is the masking ring at zero spread rather than `none`. Two reasons: `none` cannot interpolate at full opacity, so the mask would fade in and let the neighbour's border show faintly through the 0.6s; and only the resting state may be pinned here, since pinning :hover would wipe out the ring entirely and bring the doubled border line straight back. With a zero-spread ring at rest, only the spread animates — the mask is fully opaque at every frame. */ .ats-card, .ats-prodcard, .ats-newscard, .ats-divcard, .ats-whycard, .ats-filecard, .ats-videocard, .ats-helpcard, .ats-enquirycard, .ats-industry, .ats-inforow, .ats-contactrow, .ats-megacard, .ats-stkitem, .ats-sidecta, .ats-pdpcta, .ats-ledgerbox, .ats-splitnarrow.ats-reveal > .e-con, .ats-recentposts .elementor-post, .crd-bx { box-shadow: 0 0 0 0 var(--ats-card-gap, var(--ats-base)) !important; } /* And nothing inside a card recolours on hover either. */ .ats-card:hover .ats-iconplate, .ats-whycard:hover .ats-iconplate, .ats-filecard:hover .ats-iconplate, .ats-inforow:hover .ats-iconplate, .ats-stkitem:hover .ats-iconplate, .ats-iconplate:hover { border-color: var(--ats-border) !important; background-color: transparent !important; } /* -------------------------------------------------------------------------- Hero feature strip Four short claims separated by rules. At a readable size they no longer fit on one line inside the hero's text column, so the row wraps between labels while each label stays intact — "MAXIMUM PRECISION" must never break across two lines. -------------------------------------------------------------------------- */ /* The strip sits in the hero's text column, which is 618px of content once its padding is taken off — not enough for four labels on one line at a readable size. So it wraps, and the separator is drawn on the *right* of each label rather than the left: a left rule would appear stranded at the start of the second line. The last label on the row carries no rule. */ .ats-featrow { flex-wrap: wrap !important; row-gap: 10px !important; column-gap: 0 !important; align-items: center !important; } .ats-herofeat { white-space: nowrap !important; border-left: 0 !important; padding-left: 0 !important; border-right: 1px solid rgba(255, 255, 255, 0.3) !important; padding-right: 10px !important; margin-right: 10px !important; } .ats-featrow > .ats-herofeat:last-child { border-right: 0 !important; padding-right: 0 !important; margin-right: 0 !important; } /* Elementor sets the label's tracking on the heading itself, so the override has to reach that element rather than the widget wrapper. */ .ats-herofeat .elementor-heading-title { letter-spacing: 0.06em !important; } /* -------------------------------------------------------------------------- Inline rows Every Elementor container is `width: 100%`, so each item in an inline row claimed a full line — which is why "Trade Pricing / Expert Advice / Fast Response" stacked vertically instead of sitting side by side. Items in a row size to their content and wrap only when they genuinely run out of space. -------------------------------------------------------------------------- */ /* A row lays its items out along one line and wraps only when it has to. Some rows were rendering as columns — an icon and its label stacked with 240px of free space beside them. */ .ats-row { flex-direction: row !important; flex-wrap: wrap; align-items: center; } .ats-row > .e-con, .ats-row > .elementor-widget:not(.elementor-widget-button) { width: auto !important; flex: 0 0 auto !important; max-width: 100%; } /* A promise item is a diamond plus a label. Each was a full-width container, so "Trade pricing / On-site demos / Next-day dispatch" stacked into a column instead of running along one line. Sizing them to their content puts them inline, and they still wrap when the row genuinely runs out of room. */ .e-con:has(> .ats-diamond) { width: auto !important; flex: 0 0 auto !important; align-items: center !important; } /* Same fix expressed structurally, for the homepage CTA where the row carries no class of its own and :has() may not be available. */ .ats-ctagrid .e-con-inner > .e-con:first-child > .e-con { flex-wrap: wrap !important; align-items: center !important; column-gap: 22px; row-gap: 8px; } .ats-ctagrid .e-con-inner > .e-con:first-child > .e-con > .e-con { width: auto !important; flex: 0 0 auto !important; } /* The eyebrow is a short rule followed by its label. The label widget was stretching across the whole row, which threw its text to the far right — out of line with the heading beneath it and with every other eyebrow on the site. Sizing both to their content puts the label back beside its rule. */ .ats-ctagrid .e-con-inner > .e-con:first-child > .e-con:first-child > .elementor-widget { width: auto !important; flex: 0 0 auto !important; text-align: left !important; } .ats-ctagrid .e-con-inner > .e-con:first-child > .e-con:first-child { justify-content: flex-start !important; column-gap: 12px; } /* The diamond marker sits on the label's optical centre, not its baseline. */ .ats-diamond { display: flex !important; align-items: center !important; flex: 0 0 auto !important; width: auto !important; } /* The About page's closing CTA predates that class, so its promise row and button pair are matched structurally: three promises inline, and the two buttons side by side instead of stacked in a 248px column with their labels wrapping. */ #about-cta .e-con-inner > .e-con:first-child > .e-con > .e-con { width: auto !important; flex: 0 0 auto !important; } #about-cta .e-con-inner > .e-con:last-child { flex-direction: row !important; flex-wrap: wrap; align-items: center; width: auto !important; gap: 12px; } #about-cta .e-con-inner > .e-con:last-child > .elementor-widget { width: auto !important; } @media (max-width: 720px) { /* Stacked full-width buttons read better than two half-width ones. */ #about-cta .e-con-inner > .e-con:last-child { flex-direction: column !important; align-items: stretch; width: 100% !important; } #about-cta .e-con-inner > .e-con:last-child > .elementor-widget { width: 100% !important; } .crd-bx img { height: 250px; } } /* -------------------------------------------------------------------------- Card and link hover One treatment everywhere a card appears: a small lift, the accent border and a deeper shadow, with the icon plate warming up at the same time. Links pick up a colour transition rather than snapping. -------------------------------------------------------------------------- */ /* The card hover lives in one place, further up: the whole box scales to 1.05 over 0.6s and nothing else changes. No border, shadow or colour treatment is layered on top of it here. */ /* The media half must clip, or the scaled image spills past the card edge. The two division photos have different native proportions, so one filled its panel and the other left a pale band along the bottom. A fixed ratio plus `cover` makes both crop the same way and keeps the two cards level. */ .ats-divmedia { overflow: hidden; aspect-ratio: 16 / 9.4; position: relative; } /* `line-height: 0` is the important part: the is an inline box, so it sat on the text baseline and left ~17px of descender space showing the panel behind it as a pale band under the photo. The is in this list because linking the image inserts an extra box in the chain. Elementor renders it `display: inline-block` with automatic height, so the image's `height: 100%` resolved against the anchor (which hugs the image's own aspect ratio) instead of against the panel — the photo came up 386px inside a 402px panel and left a 17px band underneath. Making the anchor a full-height block restores the chain panel → anchor → image. */ .ats-divmedia > .elementor-widget-image, .ats-divmedia .elementor-widget-container, .ats-divmedia .elementor-image, .ats-divmedia figure, .ats-divmedia .ats-divimg a, .ats-divmedia figure a, .ats-divmedia .elementor-image a { height: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; font-size: 0 !important; } .ats-divmedia .ats-divimg a, .ats-divmedia figure a, .ats-divmedia .elementor-image a { display: block !important; width: 100% !important; } .ats-divmedia .ats-divimg { width: 100%; height: 100%; } .ats-divmedia img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* The "A" / "B" division marker belongs on the photo. In flow it was a full-width 17px row under the image, showing the panel behind it as a pale band across the bottom of the card. */ .ats-divmedia .ats-divbadge { position: absolute; top: 16px; left: 18px; width: auto; z-index: 2; pointer-events: none; } /* The plate scales with its card and is not styled separately on hover — no border or background change. */ /* Motion is decoration here — the colour change alone carries the state. */ @media (prefers-reduced-motion: reduce) { .ats-card, .ats-inforow, .ats-filecard, .ats-whycard, .ats-prodcard, .ats-newscard, .ats-megacard, .ats-stkitem { transition: border-color 0.2s ease, background-color 0.2s ease; } .ats-card:hover, .ats-inforow:hover, .ats-filecard:hover, .ats-whycard:hover, .ats-prodcard:hover, .ats-newscard:hover, .ats-megacard:hover, .ats-stkitem:hover { transform: none; } } /* Icon plates must be square: a 50% radius only draws a circle on a square box, and a squashed plate reads as misalignment beside its text. They sit in row containers as flex children with `flex: 0 1 auto`, so they were shrinking horizontally while keeping their height — 28x56 on Downloads, 45x54 on Contact. One size everywhere, and no shrinking. */ .ats-iconplate { flex: 0 0 auto !important; box-sizing: border-box !important; width: 56px !important; height: 56px !important; aspect-ratio: 1 / 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } /* The icon itself must sit dead centre. Elementor renders the glyph inside an inline wrapper, so it sat on the text baseline and left the descender gap below it — every icon was 3–5px above the middle of its circle, and the wrappers measured taller than they were wide (47x53, 14x24) for the same reason. Zeroing the line box and centring with flex removes both faults. */ .ats-iconplate .elementor-icon, .ats-iconplate .elementor-icon-wrapper { display: flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; line-height: 0 !important; margin: 0 !important; padding: 0 !important; } .ats-iconplate svg, .ats-iconplate img { display: block !important; width: 24px !important; height: 24px !important; } /* Bare marker icons — stats, journey points, inline bullets — get the same treatment so they are square and vertically centred against their label. */ .ats-lineicon:not(.ats-iconplate), .ats-lineicon:not(.ats-iconplate) .elementor-icon, .ats-lineicon:not(.ats-iconplate) .elementor-icon-wrapper { display: inline-flex !important; align-items: center !important; justify-content: center !important; /* Without this the widget keeps its 24px line box and the icon measures taller than it is wide (47x53, 14x24), which reads as a misalignment against the label beside it. */ line-height: 0 !important; } .ats-lineicon:not(.ats-iconplate) svg { display: block !important; } /* A flex item's min-width defaults to its own content, so the text column beside a now-unshrinkable icon plate pushed past the card edge instead of wrapping. Elementor writes a width on the container, hence !important. */ .ats-filecard > *, .ats-inforow > *, .ats-card > * { min-width: 0 !important; } .ats-filecard > .e-con, .ats-inforow > .e-con { flex: 1 1 auto !important; width: auto !important; } /* The plate itself must keep its fixed size against the rule above. */ .ats-filecard > .ats-iconplate, .ats-inforow > .ats-iconplate, .ats-card > .ats-iconplate { min-width: 56px !important; } .ats-filecard p, .ats-inforow p { overflow-wrap: anywhere; } .ats-card:hover .ats-iconplate, .ats-filecard:hover .ats-iconplate, .ats-whycard:hover .ats-iconplate { border-color: var(--ats-border) !important; } /* The mega-menu brand plates take the same scale as every other card, with no shadow of their own. */ .ats-megacard, .ats-megacard:hover { box-shadow: none !important; } /* -------------------------------------------------------------------------- Mega-menu panel height The eight category plates sit in a 4-column grid, and each plate was mostly a square image sized from the column width — so the wider the screen, the taller the panel. Measured against the space under the sticky header: 1920x1080 945 available 873 panel fitted 1440x900 765 available 805 panel 40px short 1366x768 633 available 765 panel 132px short The fix is to stop the image height following the column width and tie it to the viewport height instead, which is the dimension actually running out, then take the surplus out of the padding and gaps. Nothing is hidden or removed — all eight categories, their images and links stay exactly as they were, just on a tighter rhythm. -------------------------------------------------------------------------- */ .ats-megapanel { padding-top: 18px !important; padding-bottom: 22px !important; /* Never its own scroll container: if it ever did exceed the space, the page should scroll rather than a bar appearing inside the menu. */ overflow: visible !important; } .ats-megapanel > .e-con > .e-con-inner { padding-top: 18px !important; padding-bottom: 20px !important; } /* The heading row above the grid. */ .ats-megapanel .e-con-inner > .e-con:first-child { padding-bottom: 10px !important; } .ats-megapanel .e-grid, .ats-megapanel .e-grid > .e-con-inner { gap: 10px !important; padding: 0 !important; } .ats-megacard { padding: 16px 18px !important; gap: 12px !important; } /* Height from the viewport, not the column. `contain` keeps each category logo whole — these are brand marks, so cropping them is not an option. */ .ats-megacard img { height: clamp(180px, 14vh, 190px) !important; width: 100% !important; object-fit: contain !important; display: block; } .ats-megacard .elementor-widget-image, .ats-megacard .elementor-image, .ats-megacard figure { margin: 0 !important; line-height: 0 !important; } /* Short viewports — laptops at 768px tall — take one more step down. */ @media (max-height: 800px) { .ats-megacard { padding: 12px 14px !important; } .ats-megapanel { padding-top: 14px !important; padding-bottom: 16px !important; } } /* No prefers-reduced-motion override here on purpose: the effect is specified to run for everyone, and Windows' "show animations" setting (plus headless Chrome) reports `reduce` often enough that guarding it would silently disable the zoom on real machines. */ /* -------------------------------------------------------------------------- 11b. Card body layout Product and article cards must be the same height in a row with their footer link on the baseline, whatever the copy does. WooCommerce short descriptions run to several hundred words on some products and are absent on others, so the excerpt is clamped rather than left to set the card height. -------------------------------------------------------------------------- */ .ats-prodcard, .ats-newscard, .ats-videocard, .ats-filecard { height: 100%; } /* The body column has to be the flex context that pushes the footer down. */ .ats-prodbody, .ats-newsbody { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; } /* The category line is a single meta row. Products filed under two categories would otherwise wrap it and make that entire grid row taller than the rest. */ .ats-prodbody > .elementor-widget-heading:first-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; } /* Product titles run from three words to fifteen. Reserving exactly two lines makes every card in the grid the same height, not just every card in a row. */ .ats-prodcard h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: calc(1.35em * 2); } /* Clamp the description to three lines so every card matches. The selector has to hit the widget element itself as well as the inner wrapper: this Elementor build emits the text-editor's content directly inside `.elementor-widget-text-editor` with no `.elementor-widget-container` in between, so a rule written only for the wrapper never matched — which is why some cards showed a 600-word description. max-height backs up the line-clamp for the case where the copy contains block children. */ .ats-prodexcerpt, .ats-prodexcerpt > .elementor-widget-container, .ats-newsexcerpt, .ats-newsexcerpt > .elementor-widget-container { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } .ats-prodexcerpt { max-height: calc(1.6em * 3); } .ats-newsexcerpt { max-height: calc(1.65em * 3); } /* Inside a clamped box the copy must read as one flow, not stacked blocks. */ .ats-prodexcerpt p, .ats-newsexcerpt p { display: inline; margin: 0; } /* Pin the footer link to the bottom of the card. Elementor's margin control cannot express `auto` — it always appends the chosen unit — so it is set here instead. */ .ats-prodmore, .ats-newsmore { margin-top: auto !important; padding-top: 14px; } /* Card text does not change colour when the card is hovered — the card scales, and that is the whole effect. Only pointing directly at the link itself recolours it, which is ordinary link behaviour rather than card styling. */ .ats-prodmore, .ats-prodmore a, .ats-newsmore, .ats-newsmore a, .ats-prodcard h3 a, .ats-newscard h3 a { color: var(--ats-text); transition: color 0.25s ease; } .ats-prodmore a:hover, .ats-newsmore a:hover, .ats-prodcard h3 a:hover, .ats-newscard h3 a:hover { color: var(--ats-accent-lt) !important; } /* The whole product image is a link; strip the inline-image baseline gap. */ .ats-prodimg a, .ats-newsimg a { display: block; line-height: 0; } /* -------------------------------------------------------------------------- 12. Top bar Elementor's inline icon list applies negative side margins to the