/* Industry family (industries.html and the eight use-*.html playbooks): refinements on top of the
site-wide premium engine (src/premium-motion.*), loaded after it on this family's pages only
(scripts/build.py). Saqib, 2026-09-29/30: every page gets Melissa's animation and premium feel while
Mart's design stays; the motion numbers are the engine's and Melissa's (facility-premium.css).
Unlayered, like premium-motion.css, so it wins over the shared market-continuity and
site-consistency rules without !important. Motion here is hover and press only (transform,
opacity, colour); every entrance is an engine token written by scripts/premium/industry.py, so the
engine's guard covers it. Nothing here hides content. */
/* ======================================================================================
industries.html: the tile band along the bottom edge of the hero (Mart, 2026-09-29 call item I1;
Design/Usecase Page.psd; Saqib 2026-09-30 "follow the original design as in the psd").
The hero video runs behind the whole hero, band included; the band is glass over it: one
backdrop blur on the band (never per tile), a navy tint for legible white labels, hairline joins,
display-face uppercase. The markup is moved into the hero by scripts/market_continuity.py.
====================================================================================== */
/* Nine tiles (eight industries and the orange ask): 3 x 3 from 851px, 2 columns with the ask across
the last row below. --uf-band-cols and --uf-band-rows size the band; the chevron and the video
caption stop where it begins. */
body.uf-site[data-page=industries]{--uf-band-row:84px;--uf-band-rows:3;--uf-band-line:rgba(255,255,255,.26)}
body.uf-site[data-page=industries] main>.uf-mc-use-hero{padding-bottom:0;min-height:0}
body.uf-site[data-page=industries] main>.uf-mc-use-hero>.wrap{min-height:520px;padding-bottom:64px}
/* Mart's navy chevron frames the copy above the band, as in the PSD; it stops where the band begins. */
body.uf-site[data-page=industries] .uf-mc-geometry-use{height:calc(100% - var(--uf-band-row) * var(--uf-band-rows))}
/* The video caption sits on the footage above the band instead of under a tile. */
body.uf-site[data-page=industries] .uf-mc-use-hero .hfr .cap{bottom:calc(var(--uf-band-row) * var(--uf-band-rows) + 18px)}
body.uf-site[data-page=industries] .uf-industries-band{
position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
grid-auto-rows:var(--uf-band-row);padding-inline:0;background:transparent;
border-top:1px solid var(--uf-band-line);
-webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%)}
/* The dimming under the labels: the video stays visible through it. */
body.uf-site[data-page=industries] .uf-industries-band::after{background:rgba(0,21,35,.46)}
/* The blurred copy of the hero still (market-continuity.css) is never shown: it repeated the hero photo under a navy
wash (2026-10-03 polish, P2; C2). Browsers without backdrop blur get a deeper navy behind the labels instead. */
body.uf-site[data-page=industries] .uf-industries-band::before{display:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
body.uf-site[data-page=industries] .uf-industries-band::after{background:rgba(0,21,35,.86)}
}
body.uf-site[data-page=industries] .uf-industries-band a{
--uf-tile-wipe:var(--uf-orange);--uf-tile-wipe-fg:var(--uf-navy);
position:relative;isolation:isolate;overflow:hidden;min-height:0;
display:flex;align-items:center;justify-content:flex-start;
padding:0 20px 0 clamp(24px,6.6vw,96px);border:0;
border-right:1px solid var(--uf-band-line);border-bottom:1px solid var(--uf-band-line);
background:transparent;color:#fff;font:18px/1.12 var(--uf-display);text-transform:uppercase;letter-spacing:.02em;
text-wrap:balance;transition:color .45s var(--mx-ease)}
body.uf-site[data-page=industries] .uf-industries-band a:nth-child(3n){border-right:0}
body.uf-site[data-page=industries] .uf-industries-band a:nth-last-child(-n+3){border-bottom:0}
/* The PSD's solid orange last tile. Melissa's orange button: deep navy label, white wipe on hover. */
body.uf-site[data-page=industries] .uf-industries-band a.uf-industries-ask{
--uf-tile-wipe:#fff;--uf-tile-wipe-fg:var(--uf-navy);background:var(--uf-orange);color:var(--uf-navy)}
/* Hover and keyboard focus: Melissa's button fill wipe (.mxbtn::before, .65s, no bounce) from the left. */
body.uf-site[data-page=industries] .uf-industries-band a::before{
content:'';position:absolute;inset:0;z-index:-1;background:var(--uf-tile-wipe);
transform:translateX(-102%);transition:transform .65s var(--mx-ease)}
@media (hover:hover) and (pointer:fine){
body.uf-site[data-page=industries] .uf-industries-band a:hover{color:var(--uf-tile-wipe-fg)}
body.uf-site[data-page=industries] .uf-industries-band a:not(.uf-industries-ask):hover{background:transparent}
body.uf-site[data-page=industries] .uf-industries-band a:hover::before{transform:none}
}
body.uf-site[data-page=industries] .uf-industries-band a:focus-visible{color:var(--uf-tile-wipe-fg);outline:2px solid #fff;outline-offset:-4px}
body.uf-site[data-page=industries] .uf-industries-band a.uf-industries-ask:focus-visible{outline-color:var(--uf-navy)}
body.uf-site[data-page=industries] .uf-industries-band a:focus-visible::before{transform:none}
body.uf-site[data-page=industries] .uf-industries-band a:active{transform:scale(.98)}
@media (max-width:1100px){
body.uf-site[data-page=industries]{--uf-band-row:78px}
body.uf-site[data-page=industries] .uf-industries-band a{padding:0 16px 0 32px;font-size:16px}
}
@media (max-width:850px){
body.uf-site[data-page=industries]{--uf-band-row:76px;--uf-band-rows:5}
body.uf-site[data-page=industries] .uf-industries-band{grid-template-columns:repeat(2,minmax(0,1fr))}
body.uf-site[data-page=industries] .uf-industries-band a{padding:0 16px 0 24px;font-size:15px}
body.uf-site[data-page=industries] .uf-industries-band a:nth-child(3n){border-right:1px solid var(--uf-band-line)}
body.uf-site[data-page=industries] .uf-industries-band a:nth-child(2n){border-right:0}
body.uf-site[data-page=industries] .uf-industries-band a:nth-last-child(-n+3){border-bottom:1px solid var(--uf-band-line)}
body.uf-site[data-page=industries] .uf-industries-band a.uf-industries-ask{grid-column:1/-1;border:0}
}
/* Phones (Mart left mobile to Saqib, [12:34]): the video stacks under the copy as a 300px block
(market-continuity.css), so the band follows it as a 2-column grid on the blurred, dimmed still of
the same footage, the orange ask across the last row. No label sits on moving footage undimmed. */
@media (max-width:540px){
body.uf-site[data-page=industries] main>.uf-mc-use-hero>.wrap{min-height:0;padding-bottom:0}
body.uf-site[data-page=industries] .uf-mc-use-hero .hfr .cap{bottom:auto}
body.uf-site[data-page=industries] .uf-industries-band{-webkit-backdrop-filter:none;backdrop-filter:none;border-top:0}
body.uf-site[data-page=industries] .uf-industries-band{background:var(--uf-navy,#001523)}
body.uf-site[data-page=industries] .uf-industries-band::after{background:transparent}
body.uf-site[data-page=industries] .uf-industries-band a{padding:0 12px 0 var(--uf-gutter,20px);font-size:14px;letter-spacing:.01em}
}
@media (prefers-reduced-motion:reduce){
body.uf-site[data-page=industries] .uf-industries-band a,
body.uf-site[data-page=industries] .uf-industries-band a::before{transition:none}
}
/* ======================================================================================
Every page in the family: hover feel in Melissa's timing (facility-premium.css). Only transform
and scale move; colours keep Mart's palette. Mouse pointers only; touch never sees a stuck state.
====================================================================================== */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
/* Photo cards and Shop Manual cards: the photograph eases in to 1.04 over .8s (Melissa .mxgrid).
The industries trade cards keep their authored crop (transform: scale(1.3)); `scale` multiplies it. */
body.uf-site[data-page-family=industry] :is(.uf-mc-photo-stories .wc .ph,.gbc .ph) img{transition:scale .8s var(--mx-ease)}
body.uf-site[data-page-family=industry] :is(.uf-mc-photo-stories .wc:hover .ph,.gbc:hover .ph) img{scale:1.04}
/* The gallery triptych: the source's 900ms transform zoom is rebuilt on `scale`, and only once the
engine has finished the wipe (the wipe drives the same property). */
body.uf-site[data-page-family=industry] .gal3 .g img{transition:none}
body.uf-site[data-page-family=industry] .gal3 .g:hover img{transform:none}
body.uf-site[data-page-family=industry] .gal3 .g img[data-mx-done],
html:not(.mx-js) body.uf-site[data-page-family=industry] .gal3 .g img{transition:scale .8s var(--mx-ease)}
body.uf-site[data-page-family=industry] .gal3 .g:hover img[data-mx-done],
html:not(.mx-js) body.uf-site[data-page-family=industry] .gal3 .g:hover img{scale:1.04}
/* Spec tables and availability rows: a faint tint and the first cell steps in 6px (Melissa .mxtable). */
body.uf-site[data-page-family=industry] .tbl tbody td:first-child,
body.uf-site[data-page-family=industry] .avr .pk{transition:transform .5s var(--mx-ease)}
body.uf-site[data-page-family=industry] :is(.tbl tbody tr,.avl .avr){transition:background-color .4s var(--mx-ease)}
body.uf-site[data-page-family=industry] :is(.tbl tbody tr,.avl .avr):hover{background-color:rgba(0,21,35,.035)}
body.uf-site[data-page-family=industry] .tbl tbody tr:hover td:first-child,
body.uf-site[data-page-family=industry] .avr:hover .pk{transform:translateX(6px)}
/* The use-page industry directory: the colour change keeps Mart's orange, eased like Melissa's
links, and the arrow nudges out (.45s, the .mxbtn arrow). */
body.uf-site[data-page-family=industry] .uf-industry-directory .uf-mc-use-strip a{transition:color .35s var(--mx-ease)}
body.uf-site[data-page-family=industry] .uf-industry-link-arrow{transition:transform .45s var(--mx-ease)}
body.uf-site[data-page-family=industry] .uf-industry-directory .uf-mc-use-strip a:hover .uf-industry-link-arrow{transform:translate(3px,-3px)}
}
/* ======================================================================================
Pre-existing layout fix, every page in the family: the photo-story frames take their height from
aspect-ratio (market-continuity.css), which the photo's height:100% did not resolve against, so
the photo kept its own ratio and left a navy strip above the orange rule (237 to 275px of a 295px
frame at 390). The photo is pinned to the frame instead; no box changes size.
====================================================================================== */
body.uf-site[data-page-family=industry] .uf-mc-photo-stories .wc .ph{position:relative}
body.uf-site[data-page-family=industry] .uf-mc-photo-stories .wc .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* ======================================================================================
Industry photos (Saqib, 2026-10-05; files from scripts/industry_images.py). Framing for the new photos. Each
rule names its page, so it outranks the shared hero and band rules (market-continuity.css
`.uf-site .uf-mc-use-hero .hfr img`, specificity 0,3,1; the page's own stylesheet loads first and loses to it)
and touches no other photo on the page. tests/rick-call-1002-pages.cjs reads the computed values.
====================================================================================== */
/* Auto hero: the lifted car keeps its roof on wide screens (1920 and 2560). */
body.uf-site[data-page=use-auto] main>.uf-mc-use-hero .hfr img{object-position:50% 30%}
/* Auto, "The problem we built for" (the dark band only): doors 3 and 4 with the lifted SUV fill the box. */
body.uf-site[data-page=use-auto] .sec.dark.uf-mc-copy-photo .sim img{object-position:65% 60%}
/* Fitness, "Why flex parks fit fitness" (the dark band only): the open turf bay fills the box. */
body.uf-site[data-page=use-fitness] .sec.dark.uf-mc-copy-photo .sim img{object-position:40% 50%}
/* E-commerce hero: a whose source up to 760px is a cut without the tree-blocked door. The picture box
steps aside so the image fills the hero frame exactly as a plain image does. */
body.uf-site[data-page=use-ecommerce] main>.uf-mc-use-hero .hfr picture{display:contents}