mockup on pages without one. */
.case-hero-mockup.js-video-trigger {
cursor: pointer;
}
.case-hero-mockup img,
.case-hero-mockup video {
width: 100%;
display: block;
filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.35));
}
/* Screen content laid on top of a transparent-background laptop frame
(see zefr.html) instead of baked into one video — MP4/H.264 has no
alpha channel, so baking the frame in would mean either cropping the
UI to match the screen's aspect ratio or flattening the frame's
transparency to solid black. Positioned by percentage over the
frame image's own screen cutout; object-fit:contain keeps the
recording's full, uncropped width and letterboxes above/below with
the frame's own black screen fill showing through — no padding math
needed in the video itself. */
.case-hero-mockup-screen {
position: absolute;
left: 16.53%;
top: 14.3%;
width: 67.21%;
height: 71.85%;
object-fit: contain;
border-radius: 10px;
}
/* Solid black circle + white arrow, matching the site's other black-
turns-red hover treatment (nav links, logo, LinkedIn icon) rather
than the glass treatment used elsewhere — reused everywhere a play
button appears (hero mockups and .case-video-play-btn alike). */
.case-hero-play {
position: absolute;
top: 42%;
left: 50%;
transform: translate(-50%, -50%);
width: 64px;
height: 64px;
border-radius: 50%;
background: #000;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
transition: transform 0.25s var(--ease-out), background-color 0.2s var(--ease-out);
}
.case-hero-play::after {
content: "";
width: 0;
height: 0;
margin-left: 4px;
border-style: solid;
border-width: 11px 0 11px 18px;
border-color: transparent transparent transparent #fff;
}
.case-hero-mockup:hover .case-hero-play,
.case-hero-mockup:focus-visible .case-hero-play,
.case-video-play-btn:hover .case-hero-play,
.case-video-play-btn:focus-visible .case-hero-play {
transform: translate(-50%, -50%) scale(1.08);
background: var(--color-accent);
}
/* Frosted glass, same family as .glass but a more opaque/whiter tint so
the text stays readable over a busy photo — not the flat, unblurred
translucency it had before (backdrop-filter is what actually makes it
read as "frosted" rather than just a plain low-opacity fill).
--case-card-bg is overridden per project alongside --glass-bg and the
gradient vars (see each page's ).
Positioned absolutely off .case-hero-panel (bottom-right) rather than
sitting in the flex row with the mockup — that's what lets it run
wider (right up to, or slightly over, the mockup's own edge) and grow
upward with longer copy (Solex, HireVue) without ever pushing the
shelf/mockup/dots down. z-index above the mockup so an overlap reads
as the card sitting on top of the device image, not under it. */
.case-hero-text {
position: absolute;
z-index: 2;
right: clamp(24px, 4vw, 60px);
bottom: 40px;
/* Ceiling raised from 612px to 720px, same rate/reference as the
photo/shelf/wrap ceilings above. */
width: clamp(396px, 36vw, 720px);
background: var(--case-card-bg, rgba(255, 250, 248, 0.75));
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: var(--radius-lg);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
padding: clamp(24px, 3vw, 40px);
display: flex;
flex-direction: column;
/* Keeps this card's blur on its own stable GPU layer — without it,
Chrome can drop/reapply the backdrop-filter (a visible flicker) on
pages with an autoplaying