/* ============================================================================ North American Coating Solutions - site stylesheet AppWT Web & AI Solutions, 2026-07-31 Tony 2026-07-31: "colors changed from orange and white to blue and white". The old theme was orange (#F26522 family) on white. Everything below is one blue family plus generous white. Changing the palette later is one block of custom properties, not a search-and-replace across templates. HARD RULE - NEVER ALLOW HORIZONTAL SCROLL. html/body carry max-width:100% and overflow-x:hidden. Note that overflow-x:CLIP would blind a scrollWidth audit, so hidden is deliberate here; wide children (tables, the shop grid, code) get their own overflow-x:auto container instead of being allowed to push the page. ========================================================================== */ :root { --nacs-ink: #0B2138; /* CONTRAST 2026-08-23, measured from painted pixels: #2C93FA gave WCAG 3.15 BOTH as link text on white AND as a button background under white text — including the "Call (586) 226-9416" phone link at 16px/650. Used 46x as a color and 22x as a background, and darkening improves both with no trade-off, so the fix belongs in the token. #1565C0 measures 5.75 both ways. */ --nacs-primary: #1565C0; --nacs-primary-dk: #0B63C4; --nacs-accent: #6FB4FC; --nacs-wash: #F2F8FF; --nacs-line: #D7E7FA; --nacs-body: #3E5468; --nacs-white: #FFFFFF; --nacs-radius: 10px; --nacs-radius-lg: 16px; --nacs-shadow: 0 1px 2px rgba(10,37,64,.06), 0 8px 24px rgba(10,37,64,.08); --nacs-shadow-lg: 0 2px 4px rgba(10,37,64,.06), 0 18px 48px rgba(10,37,64,.14); --nacs-maxw: 1180px; --nacs-gap: clamp(1rem, 2.5vw, 2rem); --nacs-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --nacs-font-head: "Segoe UI Semibold", system-ui, -apple-system, Roboto, Arial, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html, body { max-width: 100%; overflow-x: hidden; /* hard rule: no horizontal scroll, ever */ } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { margin: 0; font-family: var(--nacs-font); font-size: clamp(1rem, .97rem + .15vw, 1.0625rem); line-height: 1.65; color: var(--nacs-body); background: var(--nacs-white); -webkit-font-smoothing: antialiased; } /* ------------------------------------------------------------ typography -- */ h1, h2, h3, h4, h5, h6 { font-family: var(--nacs-font-head); color: var(--nacs-ink); line-height: 1.2; margin: 0 0 .6em; font-weight: 700; letter-spacing: -.015em; } h1 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.25rem); } h2 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.35rem); } h3 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); } h4 { font-size: 1.15rem; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } a { color: var(--nacs-primary); text-decoration: none; } a:hover, a:focus-visible { color: var(--nacs-primary-dk); text-decoration: underline; } /* Visible focus for keyboard users. Never remove this without a replacement. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--nacs-accent); outline-offset: 2px; border-radius: 4px; } img { max-width: 100%; height: auto; display: block; } .nacs-lede { font-size: 1.15em; color: var(--nacs-body); } .nacs-eyebrow { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--nacs-primary); margin-bottom: .6rem; } /* Skip link - first focusable element on every page (WCAG 2.4.1) */ .nacs-skip { position: absolute; left: -9999px; top: 0; z-index: 10000; background: var(--nacs-ink); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--nacs-radius) 0; font-weight: 600; } .nacs-skip:focus { left: 0; } /* ---------------------------------------------------------------- layout -- */ .nacs-wrap { width: 100%; max-width: var(--nacs-maxw); margin-inline: auto; padding-inline: var(--nacs-gap); } .nacs-section { padding-block: clamp(3rem, 6vw, 5.5rem); } .nacs-section--wash { background: var(--nacs-wash); } .nacs-section--ink { background: var(--nacs-ink); color: #C9D8E8; } .nacs-section--ink h2, .nacs-section--ink h3 { color: #fff; } .nacs-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); } .nacs-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); } .nacs-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .nacs-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } .nacs-center { text-align: center; } .nacs-section > .nacs-wrap > header { max-width: 46rem; margin-bottom: 2.5rem; } .nacs-center > header, header.nacs-center { margin-inline: auto; } /* --------------------------------------------------------------- buttons -- */ .nacs-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem 1.6rem; border-radius: var(--nacs-radius); font-weight: 650; font-size: 1rem; line-height: 1.2; border: 2px solid transparent; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; text-decoration: none; min-height: 48px; /* touch target */ } .nacs-btn:hover { text-decoration: none; transform: translateY(-1px); } .nacs-btn--primary { background: var(--nacs-primary); color: #fff; } .nacs-btn--primary:hover, .nacs-btn--primary:focus-visible { background: var(--nacs-primary-dk); color: #fff; } .nacs-btn--ghost { background: transparent; color: var(--nacs-primary); border-color: var(--nacs-line); } .nacs-btn--ghost:hover { border-color: var(--nacs-primary); color: var(--nacs-primary-dk); } .nacs-btn--light { background: #fff; color: var(--nacs-primary); } .nacs-btn--light:hover { background: var(--nacs-wash); color: var(--nacs-primary-dk); } /* ----------------------------------------------------------------- cards -- */ .nacs-card { background: #fff; border: 1px solid var(--nacs-line); border-radius: var(--nacs-radius-lg); padding: 1.6rem; box-shadow: var(--nacs-shadow); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; display: flex; flex-direction: column; gap: .6rem; } .nacs-card:hover { box-shadow: var(--nacs-shadow-lg); transform: translateY(-3px); border-color: var(--nacs-accent); } .nacs-card h3 { margin-bottom: .25rem; } .nacs-card p { font-size: .96rem; } .nacs-card__more { margin-top: auto; padding-top: .6rem; font-weight: 650; } .nacs-card__icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--nacs-wash); color: var(--nacs-primary); margin-bottom: .4rem; } .nacs-card--link { color: inherit; } .nacs-card--link:hover { text-decoration: none; } /* ---------------------------------------------------------------- header -- */ .nacs-topbar { background: var(--nacs-ink); color: #C9D8E8; font-size: .875rem; padding-block: .5rem; } .nacs-topbar a { color: #fff; font-weight: 600; } .nacs-topbar__row { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between; } .nacs-openflag { display: inline-flex; align-items: center; gap: .4rem; } .nacs-openflag::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: #63C68A; } .nacs-openflag--shut::before { background: #E2A33C; } .nacs-header { position: sticky; top: 0; z-index: 900; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--nacs-line); } .nacs-header__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; } .nacs-logo { display: flex; align-items: center; flex: 0 0 auto; } /* The wordmark carries the brand on its own, so give it real size. It was a 40px icon next to small text, which read as an afterthought. Height-driven so it stays crisp. */ .nacs-logo img { height: clamp(38px, 3.4vw, 54px); width: auto; display: block; } @media (max-width: 480px) { .nacs-logo img { height: 34px; } } .nacs-logo:hover { text-decoration: none; } .nacs-nav ul { list-style: none; display: flex; gap: .25rem; margin: 0; padding: 0; align-items: center; } .nacs-nav a { display: block; padding: .6rem .8rem; border-radius: 8px; font-weight: 600; color: var(--nacs-ink); font-size: .95rem; } .nacs-nav a:hover, .nacs-nav a[aria-current="page"] { background: var(--nacs-wash); color: var(--nacs-primary); text-decoration: none; } .nacs-has-sub { position: relative; } .nacs-sub { position: absolute; top: calc(100% + .35rem); left: 0; min-width: 20rem; background: #fff; border: 1px solid var(--nacs-line); border-radius: var(--nacs-radius); box-shadow: var(--nacs-shadow-lg); padding: .5rem; display: none; flex-direction: column; max-height: 70vh; overflow-y: auto; } .nacs-has-sub:hover > .nacs-sub, .nacs-has-sub:focus-within > .nacs-sub { display: flex; } .nacs-sub a { white-space: nowrap; font-weight: 500; } /* ---------------------------------------------------------------- submenu caret ---- Tony 2026-07-31: "nacs dropdown for areas needs an arrow to indicate submenu ... nobody is going to fucking know that". Two separate defects were behind that sentence: 1. NO VISUAL AFFORDANCE. The markup carried aria-haspopup, so assistive tech was told a submenu existed and a sighted mouse user was told nothing at all. The caret is the visual half of a message that was already half-sent. 2. THE PANEL COULD NOT BE LATCHED OPEN. The stylesheet opened it on :hover and :focus-within only, and the JS-injected rule was a force-CLOSE ([data-sub-open="false"]) with no force-OPEN counterpart. So a click set aria-expanded="true" while the panel's visibility stayed entirely at the mercy of the pointer - ARIA claiming open, mouse deciding otherwise. Moving diagonally toward the submenu clips the corner of the parent
  • and the menu vanishes mid-reach, which is precisely the "does not stay open" Tony hit. The [data-sub-open="true"] rule below is that missing counterpart: once clicked, the panel stays open until it is dismissed deliberately. */ .nacs-nav a { display: inline-flex; align-items: center; } .nacs-caret { margin-left: .34rem; flex: none; opacity: .65; transition: transform .18s ease, opacity .18s ease; } /* The matching display rule lives in site.js injectStates(), desktop-scoped, because a latched-open panel is a state that cannot exist without JS - the same reason the force-close rule is injected rather than sitting here as a dead selector. */ .nacs-has-sub:hover > a > .nacs-caret, .nacs-has-sub:focus-within > a > .nacs-caret, .nacs-has-sub[data-sub-open="true"] > a > .nacs-caret { opacity: 1; transform: rotate(180deg); } .nacs-has-sub[data-sub-open="false"] > a > .nacs-caret { transform: none; } @media (prefers-reduced-motion: reduce) { .nacs-caret { transition: none; } } .nacs-burger { display: none; background: none; border: 0; padding: .6rem; cursor: pointer; color: var(--nacs-ink); } @media (max-width: 1020px) { .nacs-burger { display: block; } .nacs-nav { position: fixed; inset: 76px 0 auto 0; background: #fff; border-bottom: 1px solid var(--nacs-line); max-height: calc(100dvh - 76px); overflow-y: auto; padding: 1rem var(--nacs-gap) 2rem; transform: translateY(-120%); transition: transform .25s ease; box-shadow: var(--nacs-shadow-lg); } .nacs-nav[data-open="true"] { transform: translateY(0); } .nacs-nav ul { flex-direction: column; align-items: stretch; gap: .1rem; } .nacs-nav a { padding: .8rem .6rem; } .nacs-sub { position: static; display: flex; box-shadow: none; border: 0; border-left: 2px solid var(--nacs-line); border-radius: 0; margin-left: .6rem; padding-left: .6rem; max-height: none; } } /* The header CTA hides EARLIER than the nav collapses, and the two breakpoints are deliberately different numbers. MEASURED 2026-07-31: with the CTA visible, the logo + nine nav items + the phone button overflow the viewport from 1021px up to about 1140px (confirmed overflowing at 1021, 1041, 1061, 1081, 1101 and 1121; clean from 1141). The nav itself only collapses to a burger at 1020px, so tying the CTA to that same number left a ~120px band where the phone button was cut off on a small laptop. WHY IT WAS INVISIBLE: html/body carry overflow-x:hidden, which CLIPS the overflow instead of scrolling it. There is no scrollbar, so a scrollWidth check reads clean while the button is genuinely chopped. Same shape as the canon lesson that overflow-x:clip blinds the scrollWidth test - the page must be measured with per-element rects, not a document-level width. The number is 1140 because that is where it measured clean, not a round guess. */ @media (max-width: 1140px) { .nacs-header__cta { display: none; } } /* ------------------------------------------------------------------ hero -- */ .nacs-hero { position: relative; color: #fff; isolation: isolate; background: linear-gradient(135deg, #0B2138 0%, #123B66 45%, #2C93FA 100%); padding-block: clamp(3.5rem, 8vw, 7rem); } .nacs-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M0 30h60M30 0v60' stroke='%23fff' stroke-width='.5' fill='none'/%3E%3C/svg%3E"); } .nacs-hero h1 { color: #fff; max-width: 18ch; } .nacs-hero p { color: #D3E2F2; max-width: 56ch; font-size: 1.12em; } .nacs-hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.8rem; } .nacs-hero__stats { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.18); } .nacs-hero__stat b { display: block; font-size: 1.9rem; color: #fff; font-family: var(--nacs-font-head); line-height: 1; } .nacs-hero__stat span { font-size: .88rem; color: #A8C4E0; } /* --------------------------------------------------------------- footer --- */ .nacs-footer { background: var(--nacs-ink); color: #A8C0D8; padding-block: clamp(2.5rem, 5vw, 4rem) 0; } .nacs-footer h4 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 1rem; } .nacs-footer a { color: #C9D8E8; } .nacs-footer a:hover { color: #fff; } .nacs-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .93rem; } .nacs-footer__bottom { margin-top: 2.5rem; padding-block: 1.25rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; } /* ----------------------------------------------------------------- forms -- */ .nacs-field { display: grid; gap: .4rem; margin-bottom: 1.05rem; } .nacs-field label { font-weight: 650; color: var(--nacs-ink); font-size: .93rem; } .nacs-field .req { color: #C0392B; } .nacs-input, .nacs-select, .nacs-textarea { width: 100%; padding: .8rem .95rem; font: inherit; color: var(--nacs-ink); background: #fff; border: 1.5px solid var(--nacs-line); border-radius: var(--nacs-radius); transition: border-color .15s ease, box-shadow .15s ease; min-height: 48px; } .nacs-input:focus, .nacs-select:focus, .nacs-textarea:focus { border-color: var(--nacs-primary); box-shadow: 0 0 0 4px rgba(18,87,160,.13); outline: none; } .nacs-textarea { min-height: 8rem; resize: vertical; } .nacs-help { font-size: .85rem; color: #7D8FA3; } .nacs-error { color: #C0392B; font-size: .88rem; font-weight: 600; } /* HONEYPOT (item 7). Must be reachable by nothing a human does, and invisible to assistive tech as well as to sighted users - aria-hidden + tabindex -1 on the input itself. Never use display:none alone: some bots skip display:none fields specifically because it is the classic tell. */ .nacs-hp { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } .nacs-captcha { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; } .nacs-captcha__q { font-weight: 700; color: var(--nacs-ink); background: var(--nacs-wash); border: 1.5px solid var(--nacs-line); border-radius: var(--nacs-radius); padding: .8rem 1rem; min-height: 48px; display: flex; align-items: center; white-space: nowrap; } .nacs-captcha .nacs-input { max-width: 8rem; } .nacs-alert { padding: 1rem 1.15rem; border-radius: var(--nacs-radius); margin-bottom: 1.25rem; font-weight: 600; } .nacs-alert--ok { background: #E8F6EE; color: #1E6B41; border: 1px solid #BFE3CF; } .nacs-alert--bad { background: #FDECEA; color: #A2342A; border: 1px solid #F3C7C1; } /* ---------------------------------------------------------------- tables -- */ /* Wide content scrolls inside its own container so the PAGE never scrolls. */ .nacs-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { border-collapse: collapse; width: 100%; } th, td { padding: .7rem .9rem; border-bottom: 1px solid var(--nacs-line); text-align: left; } th { color: var(--nacs-ink); font-weight: 700; background: var(--nacs-wash); } /* ------------------------------------------------------------------ shop -- */ .nacs-product { display: flex; flex-direction: column; } .nacs-product__img { aspect-ratio: 4/3; object-fit: contain; background: var(--nacs-wash); border-radius: var(--nacs-radius); padding: .75rem; } .nacs-product__price { font-family: var(--nacs-font-head); font-size: 1.3rem; color: var(--nacs-ink); font-weight: 800; } .nacs-product__note { font-size: .84rem; color: #7D8FA3; } /* ------------------------------------------------------------- utilities -- */ .nacs-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .nacs-stack > * + * { margin-top: 1rem; } /* ── Cookie consent must not eat the conversion buttons on mobile (2026-08-24) ─────── MEASURED on a 390x844 iPhone viewport: #nacs-cookie-consent renders position:fixed, bottom:0, z-index 999999 at 325px tall - 38% of the entire screen. The page's own CTAs sit underneath it, and document.elementFromPoint() at the centre of those buttons returned the consent banner's own children, so a first-time mobile visitor could not tap them at all until the notice was dismissed. Found by appwt-tap-test.sh. The site sweep had passed nacoatingsolutions.com as OK, because every check it runs was genuinely fine - none of them asks whether a finger can reach the button, and a screenshot cannot show it because two stacked elements look like one. THE FIX CAPS THE BANNER, IT DOES NOT REMOVE A CONTROL. Hiding the title or the customize toggle would shrink it faster, but those are consent controls and a compliance control is never weakened to make a marketing element reachable. The banner gets a height ceiling with its own internal scroll, so every category, checkbox and button stays present and operable in a smaller footprint. */ @media (max-width: 760px){ /* 200px left the banner top at y=644 while this site's CTAs sit at y=653-655, still ~10px inside it. Tightened to 150px, which puts the top at y=694 and clears them. Internal scroll keeps every control operable at the smaller height. */ #nacs-cookie-consent{ max-height: 150px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; padding: 10px 0 !important; } #nacs-cookie-consent .nacs-consent-title{ font-size: 15px !important; margin: 0 0 2px !important; } #nacs-cookie-consent .nacs-consent-text{ font-size: 12.5px !important; line-height: 1.35 !important; margin: 0 !important; } #nacs-cookie-consent .nacs-consent-actions{ display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; width: 100% !important; } #nacs-cookie-consent .nacs-consent-btn{ margin: 0 !important; width: 100% !important; padding: 10px 8px !important; } } /* ── A CLOSED MOBILE NAV MUST NOT CAPTURE TAPS (2026-08-24) ────────────────────────── The mobile nav is hidden with `transform: translateY(...)` and reopened by `.nacs-nav[data-open="true"] { transform: translateY(0); }`. A transform moves the paint, it does NOT remove the element from hit-testing, and pointer-events stayed `auto`, so the closed drawer's links still answered taps where they overlapped the page beneath. MEASURED at 390x844, 414x896 and 360x800, reproducible across three consecutive runs: document.elementFromPoint() at the centre of the nav's "Contact" link (y=653) returned A.nacs-btn - the "Get a free quote" button painted over it. Two different links answered the same pixel, and which one a visitor got was not something the page decided. pointer-events:none while closed makes the hidden drawer inert without touching the transform, the animation, or the open state. */ @media (max-width: 900px){ .nacs-nav:not([data-open="true"]){ pointer-events: none; } .nacs-nav[data-open="true"]{ pointer-events: auto; } } /* ── HERO BACKGROUND VIDEO, EXISTING HERO KEPT AS A PARTIAL TRANSPARENT OVERLAY ────── Tony 2026-08-26: "leave the current hero as a partial transparent overlay and find us either one video or a slideshow made into a video without audio on loop for the hero". Nothing above this block changed. .nacs-hero keeps its opaque gradient, so a browser that refuses to autoplay, a visitor on a blocked network, or a 404 on the media file all land on exactly the hero that shipped before. LAYER ORDER inside .nacs-hero (position:relative + isolation:isolate, so these z-index values are scoped to the section and cannot fight the header, the chat or the consent bar, all of which sit far above in the global stack): 0 the original gradient background (fallback, unchanged) 1 .nacs-hero__media the looping clip 2 .nacs-hero__veil the SAME brand gradient at partial alpha <- the overlay 3 ::after the original grid texture, moved from -1 so it stays on top 4 .nacs-wrap the untouched heading, lede, buttons and stats The ::after rule is written with BOTH classes so it out-specifies the base `.nacs-hero::after { z-index:-1 }` on specificity rather than on source order. Source order is the kind of thing a later edit quietly breaks. */ .nacs-hero--video .nacs-hero__media { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #0B2138 center center / cover no-repeat; } .nacs-hero--video .nacs-hero__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; pointer-events: none; /* the hero is content, not a media player */ } /* THE OVERLAY. Heaviest over the left column where the white heading and lede sit, and thinning toward the right so the footage is genuinely visible rather than merely present. The second gradient darkens the top and bottom edges, which is what keeps the header and the stats row legible over a bright frame. */ .nacs-hero--video .nacs-hero__veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(100deg, rgba(11,33,56,.94) 0%, rgba(11,33,56,.90) 38%, rgba(18,59,102,.78) 64%, rgba(21,101,192,.46) 100%), linear-gradient(180deg, rgba(6,20,35,.46) 0%, rgba(6,20,35,.14) 42%, rgba(6,20,35,.58) 100%); } .nacs-hero.nacs-hero--video::after { z-index: 3; } .nacs-hero--video > .nacs-wrap { position: relative; z-index: 4; } /* Below 900px the copy runs the full width instead of sitting in a left column, so a left-to-right veil would leave the end of every line over bare footage. The veil goes vertical and near-solid there. Measured at 390px against the brightest frame in the loop, not eyeballed. */ @media (max-width: 900px) { .nacs-hero--video .nacs-hero__veil { background: linear-gradient(180deg, rgba(9,27,46,.84) 0%, rgba(11,33,56,.86) 50%, rgba(18,59,102,.90) 100%); } } /* A visitor who has asked their operating system for less motion gets the poster frame and no playback. The inline script beside the element also drops the source, because `display:none` stops the paint and does not reliably stop the download. */ @media (prefers-reduced-motion: reduce) { .nacs-hero--video .nacs-hero__media { background-image: url("/assets/video/nacs-hero-poster.jpg"); } .nacs-hero--video .nacs-hero__video { display: none; } }