rather than an ![]()
, because the picture is now pure
decoration — the quote beside it is real selectable text, so there is
nothing left for alt text to say.
--------------------------------------------------------------------- */
.hero__media {
position: absolute;
z-index: 0;
/* Pinned to the top band only, not the whole hero — the picture is
deliberately smaller now and the blue field carries on below it. */
top: 0;
left: 0;
right: 0;
/* Taller than the visible picture needs to be. The mask below dissolves
it well before this edge — the extra height is what lets the photo
reach down *behind* the quote and fade out underneath it, instead of
stopping in a line above it. */
height: 72%;
background-image: url("assets/img/charlotte-27.jpg");
background-size: cover;
/* 50% 0% = centred horizontally, pinned to the TOP.
`cover` scales the image until it fills the box, so one axis always
overflows and has to be cropped. background-position decides which
part survives. Anchoring the top means whatever gets cut is always
taken from the bottom — and the bottom is the half we are fading out
anyway. Her face is safe at every viewport size. */
background-position: 50% 0%;
/* Barely any blur: the image is scaled much less than it used to be,
so there is little upscaling to disguise. Drop it to 0 and see
whether you prefer it sharp. */
filter: blur(1px) saturate(0.92);
/* A blurred layer samples transparency past its own edges and goes
pale at the borders. Scaling it slightly larger than its box pushes
those soft edges outside the overflow:hidden clip. */
transform: scale(1.04);
/* --- The fade, done with a mask ---------------------------------
A mask makes pixels genuinely transparent, following the alpha of
the gradient: black keeps, transparent erases. That is what lets
the photo dissolve into the blue field behind it rather than into
a specific colour painted on top of it.
The fade starts early and runs long on purpose. By the time the
photo reaches the quote it is down to roughly a fifth of full
strength — present enough that the two layers genuinely overlap,
faint enough that ink stays readable on top of it. That balance is
the whole trick with text over imagery: you are not choosing
between "readable" and "overlapping", you are tuning how much
picture you can afford underneath. */
-webkit-mask-image: linear-gradient(
to bottom,
#000 0%,
#000 28%,
transparent 88%
);
mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 100%);
}
.hero__content {
position: relative;
z-index: 1; /* lifts the text above the absolutely-positioned backdrop */
width: 100%;
max-width: 38rem;
margin: 0 auto;
}
/* --- Wide screens: photo left, quote centre-right --------------------
Two grid columns. The photo is absolutely positioned so it ignores
the grid entirely and simply occupies the left edge; the columns
exist only to push the text out of the photo's way.
--------------------------------------------------------------------- */
@media (min-width: 820px) {
.hero {
/* Roughly the cropped image's own height plus breathing room. The
picture stays near its native size instead of being stretched. */
min-height: 400px;
grid-template-columns: 38% 1fr;
align-items: center; /* side by side now, so centre vertically again */
padding: 3rem 2rem;
/* Everything rotates 90 degrees: blue at the left, carrying past the
photograph, then dissolving into parchment under the quote. */
background-image: linear-gradient(
to right,
#8fb6bc 0%,
#6f9aa2 30%,
var(--parchment) 74%,
var(--parchment) 100%
);
}
.hero__media {
/* Released from the top band and pinned to the left instead.
`bottom: 0` + `height: auto` undoes the mobile height. */
height: auto;
bottom: 0;
right: auto;
/* The cropped source is 540px wide; capping near that keeps the
upscale small, which is why the blur could come down to 1px. */
width: min(52%, 600px);
/* Top-anchored here too, for the same reason: whatever `cover` has
to crop comes off the bottom. */
background-position: 50% 0%;
/* The fade runs left to right: solid at the left edge, gone before
it reaches the text. */
-webkit-mask-image: linear-gradient(
to right,
#000 0%,
#000 44%,
transparent 96%
);
mask-image: linear-gradient(to right, #000 0%, #000 44%, transparent 96%);
}
.hero__content {
grid-column: 2; /* the right-hand column: centre-right on the page */
max-width: 32rem;
}
}
/* --- The quote --------------------------------------------------------
No card, no border, no shadow: the text sits directly on the page.
This only works because the layout now keeps the quote clear of the
photograph — it lands on the calm beige end of the gradient, where
plain ink is perfectly legible. Contrast is a property of the pair,
not of the text.
If you want a hairline frame back, add:
border-top: 1px solid rgba(176, 145, 79, 0.5);
border-bottom: 1px solid rgba(176, 145, 79, 0.5);
padding: 2rem 0 1.5rem;
---------------------------------------------------------------------- */
.hero__quote {
margin: 0;
padding: 0;
border: 0;
background: none;
}
.hero__quote p {
margin: 0 0 1rem;
color: var(--ink);
font-family: var(--display);
font-style: italic;
font-size: clamp(1.35rem, 4.2vw, 1.95rem);
line-height: 1.35;
/* Balances the ragged right edge across lines instead of leaving one
orphan word on the last line. Browsers without it just wrap normally. */
text-wrap: balance;
}
.hero__quote cite {
display: block;
margin-top: 1.25rem;
color: var(--ink-soft);
font-size: 0.72rem;
font-style: normal;
letter-spacing: 0.18em;
text-transform: uppercase;
}
/* Visually hidden, but present for screen readers, search results and the
link-preview cards some chat apps build from page structure. Occupies
no space and paints nothing — it costs zero pixels.
Why not `display: none`? That removes the element from the
accessibility tree too, which defeats the point. This clip-based
recipe is the standard way to hide something visually while keeping
it readable to assistive software. */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ---------------------------------------------------------------------
3. Content cards
--------------------------------------------------------------------- */
main article {
border: 1px solid var(--rule);
box-shadow: 0 1px 2px rgba(51, 46, 41, 0.04);
}
main h2 {
margin-bottom: 1.1rem;
color: var(--claret);
font-family: var(--display);
font-weight: 600;
font-size: 1.9rem;
line-height: 1.15;
}
main article p:last-child {
margin-bottom: 0;
}
/* --- The date, set apart from the sentence around it -----------------
Three small changes doing one job: caps, letter-spacing, and the
claret accent. Caps alone would just look like shouting — the extra
tracking is what reads as typographic emphasis instead. Uppercase
letters are all the same height, so without added space between them
the eye has no word-shape to latch onto and they become *harder* to
read, not easier. The rule of thumb: never set caps without tracking.
Slightly smaller than the body text, too. Caps occupy more visual
weight at the same point size, so matching sizes makes them loom.
---------------------------------------------------------------------- */
.event-time {
color: var(--claret);
font-size: 0.92em; /* em, not rem: scales with the paragraph it sits in */
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
}
/* ---------------------------------------------------------------------
4. Page rhythm
--------------------------------------------------------------------- */
body {
padding-bottom: 4rem;
}