/* Home Team Construction — hero video The homepage hero's right column: a poster with a play button that opens the Vimeo reel in a lightbox. Built rather than ported — see parts/hero-video.php for what the live ElementsKit widget does and why the artifact left this half of the hero undescribed. 9:16, BECAUSE THE VIDEO IS. Vimeo reports 240x426 for id 1185189860. The artifact's harness stand-in was a 16:9 box, which was a guess made before anyone read the video's dimensions; matching it would letterbox a portrait reel inside a landscape frame and waste half the card. The card is capped rather than fluid. At the hero's 44% column a full-width 9:16 card would be roughly 600 x 1070 and would set the height of the whole hero; 360px keeps it to about 640, which is a hero, not a page. The dark background is load-bearing, not decoration: it is what the card shows if the poster ever 404s, and a dark card with a play button on it is exactly what the live site renders today. */ .htc-video{ display:flex; justify-content:center; width:100%; } .htc-video *, .htc-video *::before, .htc-video *::after{ box-sizing:border-box; } .htc-video__trigger{ position:relative; display:block; width:100%; max-width:360px; aspect-ratio:9 / 16; overflow:hidden; border-radius:var(--htc-radius); background:var(--htc-grey-dark); box-shadow:0 18px 40px rgba(16,16,16,.28); text-decoration:none; cursor:pointer; transition:box-shadow 200ms ease, transform 200ms ease; } .htc-video__trigger:hover{ transform:translateY(-2px); box-shadow:0 22px 48px rgba(16,16,16,.34); } .htc-video__trigger:focus-visible{ outline:2px solid var(--htc-red); outline-offset:3px; } /* height:100% overrides the base img rule, which sets height:auto on every image. Without it the poster keeps its intrinsic ratio and pillarboxes. */ .htc-video__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } /* --- play button --- */ .htc-video__play{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:72px; height:72px; border-radius:50%; background:var(--htc-red); box-shadow:0 0 0 0 rgba(230,57,70,.55); transition:box-shadow 300ms ease, background-color 200ms ease; } /* The triangle, drawn rather than shipped as an icon font — the live button is an ElementsKit glyph, and this is the one place a font would be loaded for a single character. Optically centred: a triangle's visual centre sits left of its bounding box, so it is nudged right by 3px. */ .htc-video__play::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) translateX(3px); border-left:20px solid var(--htc-white); border-top:13px solid transparent; border-bottom:13px solid transparent; } .htc-video__trigger:hover .htc-video__play, .htc-video__trigger:focus-visible .htc-video__play{ box-shadow:0 0 0 12px rgba(230,57,70,.22); } /* --- caption --- */ .htc-video__meta{ position:absolute; right:0; bottom:0; left:0; display:flex; align-items:baseline; justify-content:space-between; gap:var(--htc-s2); padding:var(--htc-s4) var(--htc-s3) var(--htc-s3); /* A scrim, so the caption holds contrast over whatever frame the poster is. */ background:linear-gradient(180deg, rgba(16,16,16,0) 0%, rgba(16,16,16,.78) 60%); color:var(--htc-white); } .htc-video__label{ font-size:var(--htc-eyebrow); font-weight:600; letter-spacing:.08em; text-transform:uppercase; line-height:1.3; } .htc-video__time{ font-size:var(--htc-small); font-weight:600; line-height:1.3; color:rgba(255,255,255,.72); font-variant-numeric:tabular-nums; } .htc-video__sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* --- the lightbox --- The