From 0bc4dc05d711448ee8b9a684f94dec99d3663009 Mon Sep 17 00:00:00 2001 From: oliver Date: Sun, 25 Oct 2026 11:39:40 +0000 Subject: [PATCH] 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. --- de/odoo-erp-automation-bootcamp/index.html | 44 ++++++++++++++++++++++ es/odoo-erp-automation-bootcamp/index.html | 44 ++++++++++++++++++++++ odoo-erp-automation-bootcamp/index.html | 33 +++++++++++++--- 3 files changed, 115 insertions(+), 6 deletions(-) diff --git a/de/odoo-erp-automation-bootcamp/index.html b/de/odoo-erp-automation-bootcamp/index.html index b25b748..03433cb 100644 --- a/de/odoo-erp-automation-bootcamp/index.html +++ b/de/odoo-erp-automation-bootcamp/index.html @@ -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 { diff --git a/es/odoo-erp-automation-bootcamp/index.html b/es/odoo-erp-automation-bootcamp/index.html index 13b2638..61dba5f 100644 --- a/es/odoo-erp-automation-bootcamp/index.html +++ b/es/odoo-erp-automation-bootcamp/index.html @@ -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 { diff --git a/odoo-erp-automation-bootcamp/index.html b/odoo-erp-automation-bootcamp/index.html index 78294c1..3c12770 100644 --- a/odoo-erp-automation-bootcamp/index.html +++ b/odoo-erp-automation-bootcamp/index.html @@ -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%; }