/* ============================================================
Page heroes: the one shared stylesheet for page headers.
See STYLE_GUIDE.md §3a.
Tier 1 Home (index.html) own slider, styled in index.html
Page banner .hero-t2 EVERY interior page (main-nav pages and the
content pages under them). Model: vibrant-jewish-future.html
(Sharon, 28 Sep 2026: that banner is the standard, structure
and design, with each page's own photo.)
Markup (copy it; the page sets only its photo and focal points):
Wide screens: full-bleed photo, Midnight-to-clear wash from the left,
text column on the left, faces on the right. Every photo banner has
the same minimum height (47vw, between 540px and 672px, the model page's own height at 1440), so a page with
a short text block gets the same band as the model. <=1000px: the same
full-bleed photo and Midnight wash, with the wash rising from the bottom,
the text in the lower part and the faces above it.
No photo? Leave --hero-img off: same structure on a solid Midnight
(#100A4A) field, height from the text.
People in the photo: set --hero-pos (wide) and --hero-banner-pos (phones
and tablets, faces in the upper part) so faces and the tops of heads stay in frame and clear
of the text at 1280 / 1001 / 900 / 375 (.claude/skills/jfsd-images).
============================================================ */
/* ---------- Page banner: photo hero, text left, faces right ---------- */
.hero-crumb{max-width:var(--mw,1200px);margin:0 auto;padding:16px 24px;font-size:.85rem;color:var(--gray,#475569)}
/* A 24px tap target (WCAG 2.5.8) from padding, not a bigger font. */
.hero-crumb a{color:var(--gray,#475569);display:inline-block;padding:3px 0;min-height:24px;box-sizing:border-box}
.hero-crumb a:hover{color:var(--blue,#1E3EAF)}
.hero-t2{position:relative;box-sizing:border-box;min-height:clamp(540px,47vw,672px);display:flex;align-items:center;color:#fff;padding:88px 0 96px;
background:
linear-gradient(100deg,rgba(16,10,74,.93) 0%,rgba(23,34,110,.88) 30%,rgba(27,39,124,.60) 50%,rgba(30,62,175,.22) 70%,rgba(28,136,237,.05) 100%),
var(--hero-src,var(--hero-img,linear-gradient(135deg,var(--blue,#1E3EAF),var(--accent,#1C88ED)))) var(--hero-pos,center 30%) / cover no-repeat}
/* Sharp photos at every width (Sharon, 5 Oct 2026: "some banner images" were
blurry). One file stretched across a 2,560px screen is upscaled, and the
same file on a phone is several times more than it needs. So a bucket
photo carries a set per width band in the page's own style, built with
JFSDImg.imageSet() from assets/img.js (render API, width AND height,
quality 85, never past the original), and this picks the band:
--hero-img-xl wider than 1440 drawn up to 2560 x 672
--hero-img-lg 1001 to 1440 drawn up to 1440 x 672
--hero-img-md 601 to 1000 photo layer up to 1000 x 570
--hero-img-sm 600 and under photo layer up to 600 x 550
Each is an image-set() with 1x, 2x and 3x, so a 2x screen gets twice the
pixels. --hero-img stays the original: it is the fallback for a page with
no set and for a browser without image-set(). tests/sharp-images.test.mjs
checks every set against these sizes. */
.hero-t2{--hero-src:var(--hero-img-xl,var(--hero-img))}
@media (max-width:1440px){.hero-t2{--hero-src:var(--hero-img-lg,var(--hero-img))}}
@media (max-width:1000px){.hero-t2{--hero-src:var(--hero-img-md,var(--hero-img))}}
@media (max-width:600px){.hero-t2{--hero-src:var(--hero-img-sm,var(--hero-img))}}
@supports not (background-image:image-set(url("x.jpg") 1x)){.hero-t2{--hero-src:var(--hero-img)!important}}
.hero-t2-in{box-sizing:border-box;width:100%;max-width:var(--mw,1200px);margin:0 auto;padding:0 24px}
.hero-t2 .hero-eyebrow{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:600;color:#9fc4ff;margin-bottom:.6rem}
.hero-t2 h1{font-family:var(--font-display);color:#fff;font-size:3rem;font-weight:800;line-height:1.2;max-width:540px;margin:0}
.hero-t2 .promise{font-size:1.35rem;color:#dbe6ff;margin:14px 0 22px;font-weight:500;max-width:520px;line-height:1.4}
.hero-t2 .promise:last-child{margin-bottom:0}
.hero-t2 p{color:#e6ecff;max-width:500px;font-size:1.05rem;margin:0}
.hero-t2 p a{color:#fff;text-decoration:underline}
.hero-t2 .herobtns{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.hero-t2 .herobtns .btn{display:inline-block;padding:13px 26px;border-radius:7px;font-family:var(--font-display);font-weight:600;font-size:.98rem;text-decoration:none}
.hero-t2 .herobtns .btn:first-child{background:#fff;color:var(--blue,#1E3EAF)!important;border:1px solid #fff}
.hero-t2 .herobtns .btn:not(:first-child){background:rgba(255,255,255,.12);color:#fff!important;border:1px solid rgba(255,255,255,.5)}
/* No photo: same structure on a solid Midnight field, height from the text */
.hero-t2:not([style*="--hero-img"]){min-height:0;background:var(--midnight,#100A4A)}
/* One look for every photo banner (Sharon, 28 Sep 2026: "the vibrant jewish
future is the correct one"). The split "hero-inset" variant is retired:
a crowded photo gets its crop from --hero-pos so people sit right of the
text, under the same wash as the model. */
/* Narrower (phones and tablets): the SAME banner as wide screens, turned on
its side. Sharon, 1 Oct 2026: "why do banners not match the desktop when
viewed on mobile? its like mobile has its own banner design". The photo
stays full-bleed behind the text under the same Midnight wash; the wash
runs bottom-to-top instead of left-to-right, and the text sits in the
lower part of the banner where the wash is strongest. Faces go in the
upper part: tune --hero-banner-pos so heads sit in the top ~half of the
photo layer. --hero-photo-h is how much photo shows above the eyebrow. */
@media(max-width:1000px){
.hero-t2{--hero-photo-h:clamp(270px,70vw,440px);display:block;min-height:0;padding:var(--hero-photo-h) 0 56px;background:var(--midnight,#100A4A);isolation:isolate}
.hero-t2::before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;height:calc(var(--hero-photo-h) + 130px);
background:
linear-gradient(to top,var(--midnight,#100A4A) 0%,rgba(16,10,74,.93) 16%,rgba(23,34,110,.74) 32%,rgba(27,39,124,.36) 48%,rgba(30,62,175,.12) 68%,rgba(28,136,237,.03) 100%),
var(--hero-src,var(--hero-img,none)) var(--hero-banner-pos,center 30%) / cover no-repeat}
.hero-t2:not([style*="--hero-img"]){padding-top:56px}
.hero-t2:not([style*="--hero-img"])::before{display:none}
.hero-t2 h1,.hero-t2 .promise,.hero-t2 p{max-width:none}
}
@media(max-width:600px){
.hero-t2 h1{font-size:2.15rem}
.hero-t2:not([style*="--hero-img"]){padding-top:44px}
}
/* About, phones only. The shared rules above stay. This page's phone
photo uses the desktop band's shape (1440×672) and the desktop focal
point (20% 30%), so 1x, 2x and 3x show that same wide framing. The
source is the wide photo (--hero-img-sm); nothing is stretched. */
@media(max-width:600px){
header.hero-t2[style*="82899222-Home-Banner-About-Us"]{--hero-photo-h:calc(100% * 672 / 1440)}
header.hero-t2[style*="82899222-Home-Banner-About-Us"]::before{
right:auto;width:100%;height:auto;aspect-ratio:1440 / 672;
background-position:0 0,20% 30%}
}
/* ---------- Retired: Tier 3 and the whole-photo (hero-fit) variants ----------
Kept only so an older page or a branch in flight still renders. Since the
28 Sep 2026 banner standard no page uses them: new and converted pages use
the page banner (.hero-t2) above. Do not add new uses. */
/* ---------- Tier 3: photo band, breadcrumb + tag + title ---------- */
.hero-t3{position:relative;min-height:320px;display:flex;align-items:flex-end;color:#fff;
background:
linear-gradient(to bottom,rgba(27,42,94,.45) 0%,rgba(27,42,94,.82) 100%),
var(--hero-img,linear-gradient(135deg,var(--navy,#27277C),var(--blue,#1E3EAF))) var(--hero-pos,center 30%) / cover no-repeat}
.hero-t3-in{max-width:var(--mw,1200px);margin:0 auto;padding:0 24px 48px;width:100%;position:relative;z-index:1}
.hero-t3 .bc{display:flex;gap:8px;font-size:.8125rem;color:rgba(255,255,255,.85);margin-bottom:14px;flex-wrap:wrap}
.hero-t3 .bc a{color:rgba(255,255,255,.85)}
.hero-t3 .bc a:hover{color:#fff}
.hero-t3 .bc span{color:rgba(255,255,255,.72)}
.hero-t3 .bc span:last-child{color:rgba(255,255,255,.85)}
.hero-t3 .ptag{display:inline-block;background:var(--blue,#1E3EAF);color:#fff;font-family:var(--font-display);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:5px 12px;border-radius:99px;margin-bottom:14px}
.hero-t3 h1{font-family:var(--font-display);color:#fff;font-size:clamp(28px,4.5vw,46px);font-weight:700;line-height:1.15;max-width:680px;margin:0 0 12px}
.hero-t3 p{font-size:1.0625rem;color:rgba(255,255,255,.82);max-width:600px;margin:0}
.hero-t3 p a{color:#fff;text-decoration:underline}
.hero-t3 .herobtns{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
/* ---------- Whole-photo variant (group shots nobody may be cropped out of) ---------- */
/* Tier 2: the whole photo sits on the right at its own shape (contain), text on
the left over the brand blue; the band keeps its normal content height. */
.hero-t2.hero-fit{background:
linear-gradient(100deg,rgba(16,10,74,.95) 0%,rgba(23,34,110,.92) 38%,rgba(27,39,124,.35) 52%,rgba(30,62,175,0) 64%),
var(--hero-img,none) right center / contain no-repeat,
linear-gradient(135deg,var(--navy,#27277C),var(--blue,#1E3EAF))}
/* Tier 3: the band takes the photo's shape, so nothing is cropped */
.hero-t3.hero-fit{background-size:cover,100% auto;background-position:center,center top;aspect-ratio:var(--hero-ratio,2.4);min-height:0}
@media(max-width:1000px){
.hero-t2.hero-fit,.hero-t3.hero-fit{aspect-ratio:auto;display:block;padding:0 0 40px;background:var(--navy,#27277C)}
.hero-t2.hero-fit::before,.hero-t3.hero-fit::before{content:"";display:block;height:auto;aspect-ratio:var(--hero-ratio,2.4);margin-bottom:28px;background:var(--hero-img,none) center / 100% auto no-repeat}
.hero-t3.hero-fit .hero-t3-in{padding-bottom:0}
}