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%; }