Public Access
Bootcamp hero: two-zone scrim so the photo actually reads (EN/DE/ES)
The uniform .72 -> .55 scrim composited the whole hero band to luma ~37 and the right zone to ~35, against a flat midnight of 25.4: a dark photo made darker. The scrim is now two zones on the same photo: .78 0%-88% (copy zone: kicker, H1, value line, the four facts, the CTA) ramp 88%-94% .25 94%-100% (the lit skyline, no copy over it) .78 is the smallest flat alpha that holds every text block over its floor (body 4.5:1, large 3.0:1) at 1920/1440/1024/390 in EN, DE and ES - measured on the rendered page, not modelled. 88% is where the ramp has to start: the longest translated fact line (DE, 1024px) reaches 89.3% of the hero. Measured before -> after (full-range mean luma of the rendered band): whole band 37.3 / 36.8 / 37.6 / 37.3 -> 33.8 / 33.6 / 34.1 / 34.0 right 88-100% 34.8 / 35.9 / 35.5 / 38.4 -> 38.7 / 40.2 / 39.4 / 43.4 plateau 94-100% -> 41.4 / 44.2 / 42.7 / 46.9 (= 1.63x-1.91x the flat-midnight 25.4, was 1.37x-1.51x) Worst text block: 4.87:1 (was 3.13:1). No copy, buy form, JSON-LD, selector, hreflang or price touched: de/ and es/ differ ONLY by this inserted hero block.
This commit is contained in:
oliver committed
1 parent
718059c7e1
commit
0bc4dc05d7
3 files changed
+115
-6
No files matched your search
@@ -108,6 +108,50 @@
|
||||
.bc-hero {
|
||||
min-height: 0;
|
||||
padding: 3.5rem 0 3rem;
|
||||
/* Real London night aerial (our own photo, CI §5) behind the header copy.
|
||||
TWO-ZONE scrim (2026-10-25): the copy zone — kicker, H1, value line, the four
|
||||
facts, the CTA — holds a .78 midnight scrim, then the scrim falls off hard to
|
||||
.25 so the lit skyline on the right actually reads: at the right edge the photo
|
||||
is composited through a quarter-strength scrim instead of a uniform .55-.72, so
|
||||
the lit skyline reads at ~1.6x the flat-midnight luma instead of ~1.4x.
|
||||
Stops: .78 0%-88%, ramp 88%-94%, .25 94%-100%.
|
||||
.78 is the smallest flat alpha that holds every text block over its floor
|
||||
(body 4.5:1, large 3.0:1) at all four widths in all three languages, and 88%
|
||||
is where the ramp has to start: the longest fact line (DE, 1024px) reaches
|
||||
89.3% of the hero, and clear of 88% the copy sits on the flat scrim. The tail of
|
||||
that one DE line rides the top of the ramp at .70+, measured. Numbers:
|
||||
handoffs/2026-10-24-webmaster-to-olchi-bootcamp-page-published.md ("Amendment 6").
|
||||
The old single ramp was .72 -> .55 across the full width and composited the right
|
||||
zone to luma ~35 against a flat midnight of 25.4. */
|
||||
background-image: linear-gradient(90deg,
|
||||
rgba(13, 27, 46, 0.78) 0%,
|
||||
rgba(13, 27, 46, 0.78) 88%,
|
||||
rgba(13, 27, 46, 0.25) 94%,
|
||||
rgba(13, 27, 46, 0.25) 100%),
|
||||
url("/images/hero/bootcamp-hero-desktop-1920.webp");
|
||||
background-size: cover;
|
||||
background-position: 50% 25%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
/* The global .hero::after is a second, 50%-opacity midnight wash for the homepage's
|
||||
flat hero; with the photo + gradient scrim above the copy it only dulls the shot,
|
||||
so it is switched off on this page. One page-scoped rule, no global CSS touched. */
|
||||
.bc-hero::after {
|
||||
content: none;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
/* Portrait crop for narrow viewports: legible cut of the same photo. Same scrim
|
||||
stops as the desktop rule — the ramp at 88% clears every language's copy, whose
|
||||
longest mobile fact line ends at 87.7% of the hero. */
|
||||
.bc-hero {
|
||||
background-image: linear-gradient(90deg,
|
||||
rgba(13, 27, 46, 0.78) 0%,
|
||||
rgba(13, 27, 46, 0.78) 88%,
|
||||
rgba(13, 27, 46, 0.25) 94%,
|
||||
rgba(13, 27, 46, 0.25) 100%),
|
||||
url("/images/hero/bootcamp-hero-mobile-900.webp");
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
}
|
||||
/* wrapped hero-stat labels keep their tick on the first line */
|
||||
.bc-hero .hero-stat {
|
||||
|
||||
@@ -108,6 +108,50 @@
|
||||
.bc-hero {
|
||||
min-height: 0;
|
||||
padding: 3.5rem 0 3rem;
|
||||
/* Real London night aerial (our own photo, CI §5) behind the header copy.
|
||||
TWO-ZONE scrim (2026-10-25): the copy zone — kicker, H1, value line, the four
|
||||
facts, the CTA — holds a .78 midnight scrim, then the scrim falls off hard to
|
||||
.25 so the lit skyline on the right actually reads: at the right edge the photo
|
||||
is composited through a quarter-strength scrim instead of a uniform .55-.72, so
|
||||
the lit skyline reads at ~1.6x the flat-midnight luma instead of ~1.4x.
|
||||
Stops: .78 0%-88%, ramp 88%-94%, .25 94%-100%.
|
||||
.78 is the smallest flat alpha that holds every text block over its floor
|
||||
(body 4.5:1, large 3.0:1) at all four widths in all three languages, and 88%
|
||||
is where the ramp has to start: the longest fact line (DE, 1024px) reaches
|
||||
89.3% of the hero, and clear of 88% the copy sits on the flat scrim. The tail of
|
||||
that one DE line rides the top of the ramp at .70+, measured. Numbers:
|
||||
handoffs/2026-10-24-webmaster-to-olchi-bootcamp-page-published.md ("Amendment 6").
|
||||
The old single ramp was .72 -> .55 across the full width and composited the right
|
||||
zone to luma ~35 against a flat midnight of 25.4. */
|
||||
background-image: linear-gradient(90deg,
|
||||
rgba(13, 27, 46, 0.78) 0%,
|
||||
rgba(13, 27, 46, 0.78) 88%,
|
||||
rgba(13, 27, 46, 0.25) 94%,
|
||||
rgba(13, 27, 46, 0.25) 100%),
|
||||
url("/images/hero/bootcamp-hero-desktop-1920.webp");
|
||||
background-size: cover;
|
||||
background-position: 50% 25%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
/* The global .hero::after is a second, 50%-opacity midnight wash for the homepage's
|
||||
flat hero; with the photo + gradient scrim above the copy it only dulls the shot,
|
||||
so it is switched off on this page. One page-scoped rule, no global CSS touched. */
|
||||
.bc-hero::after {
|
||||
content: none;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
/* Portrait crop for narrow viewports: legible cut of the same photo. Same scrim
|
||||
stops as the desktop rule — the ramp at 88% clears every language's copy, whose
|
||||
longest mobile fact line ends at 87.7% of the hero. */
|
||||
.bc-hero {
|
||||
background-image: linear-gradient(90deg,
|
||||
rgba(13, 27, 46, 0.78) 0%,
|
||||
rgba(13, 27, 46, 0.78) 88%,
|
||||
rgba(13, 27, 46, 0.25) 94%,
|
||||
rgba(13, 27, 46, 0.25) 100%),
|
||||
url("/images/hero/bootcamp-hero-mobile-900.webp");
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
}
|
||||
/* wrapped hero-stat labels keep their tick on the first line */
|
||||
.bc-hero .hero-stat {
|
||||
|
||||
@@ -109,10 +109,25 @@
|
||||
min-height: 0;
|
||||
padding: 3.5rem 0 3rem;
|
||||
/* Real London night aerial (our own photo, CI §5) behind the header copy.
|
||||
Scrim is a single midnight gradient (.72 -> .55, inside CI §5's .55-.75 band),
|
||||
layered OVER the photo and UNDER the copy. The section keeps its --midnight base
|
||||
under the image. Worst p05 measured 5.71:1 (kicker/sub/stats floor 4.5, h1 floor 3.0). */
|
||||
background-image: linear-gradient(90deg, rgba(13, 27, 46, 0.72), rgba(13, 27, 46, 0.55)),
|
||||
TWO-ZONE scrim (2026-10-25): the copy zone — kicker, H1, value line, the four
|
||||
facts, the CTA — holds a .78 midnight scrim, then the scrim falls off hard to
|
||||
.25 so the lit skyline on the right actually reads: at the right edge the photo
|
||||
is composited through a quarter-strength scrim instead of a uniform .55-.72, so
|
||||
the lit skyline reads at ~1.6x the flat-midnight luma instead of ~1.4x.
|
||||
Stops: .78 0%-88%, ramp 88%-94%, .25 94%-100%.
|
||||
.78 is the smallest flat alpha that holds every text block over its floor
|
||||
(body 4.5:1, large 3.0:1) at all four widths in all three languages, and 88%
|
||||
is where the ramp has to start: the longest fact line (DE, 1024px) reaches
|
||||
89.3% of the hero, and clear of 88% the copy sits on the flat scrim. The tail of
|
||||
that one DE line rides the top of the ramp at .70+, measured. Numbers:
|
||||
handoffs/2026-10-24-webmaster-to-olchi-bootcamp-page-published.md ("Amendment 6").
|
||||
The old single ramp was .72 -> .55 across the full width and composited the right
|
||||
zone to luma ~35 against a flat midnight of 25.4. */
|
||||
background-image: linear-gradient(90deg,
|
||||
rgba(13, 27, 46, 0.78) 0%,
|
||||
rgba(13, 27, 46, 0.78) 88%,
|
||||
rgba(13, 27, 46, 0.25) 94%,
|
||||
rgba(13, 27, 46, 0.25) 100%),
|
||||
url("/images/hero/bootcamp-hero-desktop-1920.webp");
|
||||
background-size: cover;
|
||||
background-position: 50% 25%;
|
||||
@@ -125,9 +140,15 @@
|
||||
content: none;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
/* Portrait crop for narrow viewports: legible cut of the same photo. */
|
||||
/* Portrait crop for narrow viewports: legible cut of the same photo. Same scrim
|
||||
stops as the desktop rule — the ramp at 88% clears every language's copy, whose
|
||||
longest mobile fact line ends at 87.7% of the hero. */
|
||||
.bc-hero {
|
||||
background-image: linear-gradient(90deg, rgba(13, 27, 46, 0.72), rgba(13, 27, 46, 0.55)),
|
||||
background-image: linear-gradient(90deg,
|
||||
rgba(13, 27, 46, 0.78) 0%,
|
||||
rgba(13, 27, 46, 0.78) 88%,
|
||||
rgba(13, 27, 46, 0.25) 94%,
|
||||
rgba(13, 27, 46, 0.25) 100%),
|
||||
url("/images/hero/bootcamp-hero-mobile-900.webp");
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user