/* ════════════════════════════════════════════════════════════════════
home-imagery.css
────────────────────────────────────────────────────────────────────
Adds photography to the existing Imprint Digital homepage WITHOUT
altering colours, typography, grid structure, or hover states.
Respects:
- .services-grid's shared outer border (.5px solid var(--rule-lt))
- .service cards' shared inner borders on right/bottom
- .service:hover sliding red underline (::after at bottom)
- .process-step's absolute-positioned dot at top:0 left:0
- .quality / .about 2-column grids
- All CSS variables from base.css (--red, --paper, --mute, --fd, --fb)
Load order in :
← last
════════════════════════════════════════════════════════════════════ */
/* ═══════════════ SERVICES ═══════════════════════════════════════════
Insert .service-img at the TOP of each .service card.
Cards keep 44px padding. Image sits INSIDE the padding (not bleeding
to edges) so the shared grid border stays intact. The hover red
underline (.service::after) is untouched.
═══════════════════════════════════════════════════════════════════ */
.service-img {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--paper-2);
margin-bottom: 28px; /* matches .service-num margin-bottom */
position: relative;
}
.service-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .6s var(--ease);
}
/* Very subtle zoom on hover — matches existing hover states */
.service:hover .service-img img {
transform: scale(1.02);
}
/* ═══════════════ PROCESS ════════════════════════════════════════════
.process-dot is absolutely positioned top:0 left:0.
.process-step has padding-top:60px already (to clear the dot).
Photo slots BELOW the dot/heading/paragraph as a subtle footer image.
═══════════════════════════════════════════════════════════════════ */
.process-img {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--paper-2);
margin-top: 24px;
}
.process-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ═══════════════ SHOP-FLOOR STRIP ═══════════════════════════════════
Full-bleed horizontal photo band for use between sections.
Use SPARINGLY — one per page maximum. Recommended between .process
and .quality, OR between .quality and .about.
═══════════════════════════════════════════════════════════════════ */
.shop-floor-strip {
width: 100%;
height: clamp(220px, 28vw, 380px);
overflow: hidden;
background: var(--ink);
position: relative;
}
.shop-floor-strip img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
display: block;
}
/* Subtle fade at top and bottom to blend into adjacent sections */
.shop-floor-strip::before,
.shop-floor-strip::after {
content: "";
position: absolute;
left: 0; right: 0;
height: 40px;
pointer-events: none;
z-index: 1;
}
.shop-floor-strip::before {
top: 0;
background: linear-gradient(180deg, rgba(245,245,245,.25), transparent);
}
.shop-floor-strip::after {
bottom: 0;
background: linear-gradient(0deg, rgba(238,238,238,.25), transparent);
}
/* ═══════════════ ABOUT — TEAM PHOTO ═════════════════════════════════
Full-bleed horizontal band at the top of the .about section,
visually consistent with .shop-floor-strip. The existing 2-col
.about-inner grid sits below, unchanged. Photo is outside the
container so it spans the full viewport width.
═══════════════════════════════════════════════════════════════════ */
.about-team-strip {
width: 100%;
aspect-ratio: 21 / 7;
max-height: 520px;
overflow: hidden;
background: var(--paper-2);
position: relative;
}
.about-team-strip img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
display: block;
}
/* Subtle fade at the bottom so the photo connects into the about
section rather than ending at a hard edge. */
.about-team-strip::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 60px;
background: linear-gradient(0deg, var(--paper-2), transparent);
pointer-events: none;
}
/* ═══════════════ RESPONSIVE ═════════════════════════════════════════ */
@media (max-width: 1024px) {
.about-team-strip { aspect-ratio: 16 / 7; }
}
@media (max-width: 640px) {
.about-team-strip { aspect-ratio: 16 / 9; }
.service-img { aspect-ratio: 16 / 9; margin-bottom: 20px; }
.process-img { aspect-ratio: 16 / 9; margin-top: 18px; }
.shop-floor-strip { height: clamp(180px, 45vw, 260px); }
}
/* ═══════════════ REDUCED MOTION ═════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.service-img img { transition: none; }
.service:hover .service-img img { transform: none; }
}