/* ───────────────────────────────────────────────────────────── Home page photography. Every photo is switched on by name in index.html: Remove a name and that section returns to exactly how it looked before the photos were added: its photo element is hidden, and every rule below that changes anything else is scoped to the same name. hero background behind the headline and the live panel sectors the four "Where our systems run" cards (one switch, so the cards in a row always stay the same height) outcomes background behind "What our clients actually got" engineering portrait beside the engineering stack Treatment: photos keep their original colour and contrast, except where text sits on top of them (hero, outcomes). Those two are toned toward the brand's steel greys and darkened behind the text so it stays legible. ───────────────────────────────────────────────────────────── */ .photo{ display:none; } /* ── Hero ─────────────────────────────────────────────────── */ [data-photos~="hero"] .photo--hero{ display:block; position:absolute; inset:0; isolation:isolate; pointer-events:none; } [data-photos~="hero"] .photo--hero::before{ content:''; position:absolute; inset:0; background-image: linear-gradient(rgb(168 190 176), rgb(168 190 176)), url('../images/web/hero-shopfloor.webp'); background-blend-mode:multiply, normal; background-size:cover; background-position:center 45%; filter:saturate(.75) brightness(.95); } [data-photos~="hero"] .photo--hero::after{ content:''; position:absolute; inset:0; background: /* headline side stays near-solid, the live panel side lets the floor through */ linear-gradient(90deg, rgb(17 17 17 / .9) 0%, rgb(17 17 17 / .7) 34%, rgb(17 17 17 / .22) 64%, rgb(17 17 17 / .4) 100%), /* under the nav, and a seamless hand-off to the protocol strip below */ linear-gradient(180deg, rgb(17 17 17 / .72) 0%, rgb(17 17 17 / 0) 22%, rgb(17 17 17 / 0) 70%, #111111 100%); } @media (max-width: 900px){ [data-photos~="hero"] .photo--hero::before{ background-image: linear-gradient(rgb(168 190 176), rgb(168 190 176)), url('../images/web/hero-shopfloor-960.webp'); background-position:68% 45%; } /* stacked layout: text sits over the whole width, so darken evenly */ [data-photos~="hero"] .photo--hero::after{ background:linear-gradient(180deg, rgb(17 17 17 / .8) 0%, rgb(17 17 17 / .66) 45%, #111111 100%); } } /* ── Sector cards ───────────────────────────────────────── Four horizontal cards, photo left and text right. As the reader scrolls, each card slides up and settles over the one before it, leaving a thin edge of every earlier card showing, so the set builds into one stack while the heading stays pinned beside it. Sticky positioning does the stacking; where the browser supports scroll-linked animation, each card also fades up as it arrives. Photos keep their original colour and contrast: no text sits on them, so they need no overlay. */ @media (min-width: 1024px){ [data-photos~="sectors"] .sectors-intro{ position:sticky; top:8.5rem; } } [data-photos~="sectors"] .sector-cards{ --step:3.5rem; /* how much of each earlier card stays visible */ --pin:6.75rem; /* 78px nav plus breathing room */ display:flex; flex-direction:column; gap:1rem; background:transparent; border:0; } [data-photos~="sectors"] .sector-cards > .panel{ --i:0; position:sticky; top:calc(var(--pin) + var(--i) * var(--step)); z-index:calc(1 + var(--i)); isolation:isolate; display:grid; grid-template-columns:minmax(0, 40%) minmax(0, 1fr); grid-template-rows:auto 1fr auto auto; /* number and sector at the top, the story at the bottom */ column-gap:1.9rem; min-height:max(13rem, var(--card-h, 0px)); /* --card-h: tallest card, set by photos.js */ padding:1.6rem 1.75rem 1.6rem 0; outline:1px solid var(--hairline); outline-offset:-1px; /* the upward shadow falls on the edge of the card underneath, so the stack reads in depth */ box-shadow:0 -20px 40px -26px rgb(0 0 0 / .95), 0 34px 60px -44px rgb(0 0 0 / .85); /* Every card gets a bottom margin that shrinks by one step per card, cancelled by the next card's negative top margin. Spacing in the page is unchanged, but all four cards now reach the end of the list at the same moment, so the stack leaves intact instead of collapsing. */ margin-bottom:calc((3 - var(--i)) * var(--step)); } [data-photos~="sectors"] .sector-cards > .panel:nth-child(2){ --i:1; margin-top:calc(-3 * var(--step)); } [data-photos~="sectors"] .sector-cards > .panel:nth-child(3){ --i:2; margin-top:calc(-2 * var(--step)); } [data-photos~="sectors"] .sector-cards > .panel:nth-child(4){ --i:3; margin-top:calc(-1 * var(--step)); } [data-photos~="sectors"] .sector-cards > .panel:hover{ outline-color:var(--hairline-strong); } [data-photos~="sectors"] .sector-cards > .panel > :not(.photo){ grid-column:2; } [data-photos~="sectors"] .sector-cards > .panel > h3{ grid-row:3; margin-top:1rem; font-size:1.2rem; line-height:1.3; } [data-photos~="sectors"] .sector-cards > .panel > p{ grid-row:4; margin-top:.5rem; } [data-photos~="sectors"] .sector-cards .photo--sector{ display:block; position:relative; overflow:hidden; grid-column:1; grid-row:1 / -1; margin:-1.6rem 0; /* run the full height of the card */ background:var(--surface-base); } [data-photos~="sectors"] .sector-cards .photo--sector::before{ content:''; position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.001); transition:transform 1.1s var(--ease-spring); } [data-photos~="sectors"] .photo--amr::before{ background-image:url('../images/web/sector-automotive-amr.webp'); background-position:38% 60%; } [data-photos~="sectors"] .photo--linepipe::before{ background-image:url('../images/web/sector-linepipe.webp'); background-position:52% 45%; } [data-photos~="sectors"] .photo--batteries::before{ background-image:url('../images/web/sector-batteries.webp'); background-position:40% 45%; } [data-photos~="sectors"] .photo--autocomponents::before{ background-image:url('../images/web/sector-autocomponents.webp'); background-position:58% 50%; } /* the card's green hover corner draws above the photo, not under it */ [data-photos~="sectors"] .sector-cards .panel::before{ z-index:2; } [data-photos~="sectors"] .sector-cards .panel:hover .photo--sector::before{ transform:scale(1.045); } @media (max-width: 639px){ [data-photos~="sectors"] .sector-cards{ --step:3.3rem; --pin:5.9rem; gap:.85rem; } /* tall enough to show both lines of each sector label */ [data-photos~="sectors"] .sector-cards > .panel{ grid-template-columns:minmax(0, 34%) minmax(0, 1fr); column-gap:1.1rem; min-height:max(15.5rem, var(--card-h, 0px)); padding:1.15rem 1.15rem 1.15rem 0; } [data-photos~="sectors"] .sector-cards .photo--sector{ margin:-1.15rem 0; } [data-photos~="sectors"] .sector-cards > .panel > h3{ margin-top:.8rem; font-size:1.0625rem; } [data-photos~="sectors"] .sector-cards > .panel > p{ font-size:.8125rem; } } @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ [data-photos~="sectors"] .sector-cards > .panel{ animation:sector-arrive linear both; animation-timeline:view(); animation-range:entry 5% entry 85%; } } } @keyframes sector-arrive{ from{ opacity:0; translate:0 2.5rem; scale:.97; } to { opacity:1; translate:0 0; scale:1; } } /* ── Measured outcomes ────────────────────────────────────── */ [data-photos~="outcomes"] .photo--outcomes{ display:block; position:absolute; inset:0; isolation:isolate; pointer-events:none; } [data-photos~="outcomes"] .photo--outcomes::before{ content:''; position:absolute; inset:0; background-image: linear-gradient(rgb(150 176 160), rgb(150 176 160)), url('../images/web/outcomes-machine-aisle.webp'); background-blend-mode:multiply, normal; background-size:cover; background-position:center 58%; filter:saturate(.8) brightness(.8); } [data-photos~="outcomes"] .photo--outcomes::after{ content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 55% at 50% 30%, rgb(17 17 17 / .55), rgb(17 17 17 / 0) 70%), linear-gradient(180deg, #111111 0%, rgb(17 17 17 / .35) 22%, rgb(17 17 17 / .45) 70%, #111111 100%); } /* readouts become smoked glass so the floor shows faintly behind the numbers */ [data-photos~="outcomes"] .outcomes-grid > div{ background:rgb(17 17 17 / .8); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); } @media (max-width: 900px){ [data-photos~="outcomes"] .photo--outcomes::before{ background-image: linear-gradient(rgb(150 176 160), rgb(150 176 160)), url('../images/web/outcomes-machine-aisle-960.webp'); } } /* ── Engineering ──────────────────────────────────────────── */ [data-photos~="engineering"] .photo--engineering{ display:block; position:relative; overflow:hidden; aspect-ratio:4 / 3; border:1px solid var(--hairline); background:var(--surface-base); isolation:isolate; } [data-photos~="engineering"] .photo--engineering::before{ content:''; position:absolute; inset:0; background-image:url('../images/web/engineering-at-the-cabinet.webp'); background-size:cover; background-position:50% 38%; } /* Desktop: the portrait takes the left column; heading and stack move right. */ @media (min-width: 1024px){ [data-photos~="engineering"] #build .build-grid{ row-gap:2.75rem; } [data-photos~="engineering"] #build .photo--engineering{ grid-column:1 / span 5; grid-row:1 / span 2; align-self:stretch; aspect-ratio:auto; min-height:36rem; } [data-photos~="engineering"] #build .build-copy{ grid-column:6 / span 7; grid-row:1; } [data-photos~="engineering"] #build .build-stack{ grid-column:6 / span 7; grid-row:2; } } @media (prefers-reduced-motion: reduce){ [data-photos~="sectors"] .sector-cards .photo--sector::before{ transition:none; } [data-photos~="sectors"] .sector-cards .panel:hover .photo--sector::before{ transform:scale(1.001); } }