/* ========================================================================== KINGDOM GLOBAL FELLOWSHIP — EDITORIAL LAYER (v3.2) -------------------------------------------------------------------------- Loaded after style.css and 08-pages.css on every public page. It does two things KGF asked for: 1 Page heroes carry NO photograph. They are a composed navy field — light, rings and the horizon line — with large display type. (The home-page film is a different element, .hero, and is untouched.) 2 Photographs move INTO the pages, placed through the reading: split features, framed pairs, mosaics, full-bleed bands and film strips. Every photograph is an inside an element with a data-slot name, so an administrator can replace it in Admin → Site Media. Nothing here is gold; colours are the Horizon tokens. A Page hero (no photograph) .pagehero B Section heads .ed-head C Split feature with framed photos .ed-split .ed-frame .ed-frame-sm D Mosaic .ed-mosaic.m3 / .m4 / .m5 E Full-bleed photo band .ed-band F Film strip .ed-strip G Single figure, inline figure .ed-figure .ed-inline H Finish: cards, links, quotes (refinements of existing classes) ========================================================================== */ /* A — PAGE HERO, NO PHOTOGRAPH ============================================ */ .pagehero{ background-color:var(--kgf-navy-950); background-image: radial-gradient(1100px 560px at 88% -12%,rgba(47,111,220,.42),transparent 62%), radial-gradient(760px 420px at -6% 118%,rgba(105,196,235,.16),transparent 60%), linear-gradient(165deg,var(--kgf-navy-900) 0%,var(--kgf-navy-950) 72%)!important; background-size:auto!important;background-position:center!important; padding-bottom:clamp(72px,8vw,112px); } /* Concentric rings on the right: the fellowship reaching outward. */ .pagehero::before{ opacity:1; background-image:repeating-radial-gradient(circle at 96% 38%,rgba(157,189,242,.10) 0 1px,transparent 1.5px 58px); background-size:auto; -webkit-mask-image:radial-gradient(640px 520px at 96% 38%,#000 0%,transparent 72%); mask-image:radial-gradient(640px 520px at 96% 38%,#000 0%,transparent 72%); } .pagehero h1{font-weight:500;letter-spacing:-.018em;line-height:1.06;font-size:clamp(2.4rem,5vw,4.1rem);max-width:21ch} .pagehero.ph-compact h1{max-width:22ch} .pagehero .eyebrow{display:inline-flex;align-items:center;gap:12px;letter-spacing:.2em} .pagehero .eyebrow::before{content:"";width:34px;height:1px;background:var(--kgf-sky);opacity:.8} .pagehero p{color:#c6d4ea} .pagehero .actions{margin-top:30px} @media (max-width:720px){.pagehero::before{opacity:.55}.pagehero h1{max-width:none}} /* B — SECTION HEADS ======================================================== Heading on the left, the explanation on the right, on wide screens. */ .ed-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(36px,4.5vw,60px)} .ed-head h2{margin:14px 0 0} .ed-head .lead,.ed-head p{margin:0;color:var(--kgf-slate-700)} .section.navy .ed-head p{color:#c6d4ea} @media (max-width:860px){.ed-head{grid-template-columns:1fr;gap:14px}} /* Shared photograph behaviour ---------------------------------------------- */ .ed-frame,.ed-frame-sm,.ed-mosaic figure,.ed-strip figure,.ed-figure,.ed-inline{position:relative;margin:0;overflow:hidden;background:linear-gradient(150deg,var(--kgf-navy-800),var(--kgf-blue-700))} .ed-frame img,.ed-frame-sm img,.ed-mosaic img,.ed-strip img,.ed-figure img,.ed-inline img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)} .ed-frame:hover img,.ed-mosaic figure:hover img,.ed-strip figure:hover img,.ed-figure:hover img{transform:scale(1.035)} .ed-cap{position:absolute;left:16px;bottom:16px;z-index:2;max-width:calc(100% - 32px);padding:8px 14px;border-radius:var(--kgf-radius-pill); background:rgba(3,13,32,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16); color:#e3ecfb;font-size:.74rem;font-weight:600;letter-spacing:.04em} /* C — SPLIT FEATURE ======================================================== */ .ed-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(36px,6vw,96px);align-items:center} .ed-split.flip > :first-child{order:2} .ed-split .ed-copy h2{margin-top:14px} .ed-split .ed-copy .lead{color:var(--kgf-slate-700)} .ed-media{position:relative;padding:0 0 clamp(28px,4vw,56px) clamp(28px,4vw,56px)} .ed-split.flip .ed-media{padding:0 clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0} .ed-frame{border-radius:22px;aspect-ratio:4/5;box-shadow:var(--kgf-shadow-lg)} .ed-frame.land{aspect-ratio:5/4} .ed-frame-sm{position:absolute;left:0;bottom:0;width:44%;aspect-ratio:1/1;border-radius:18px;border:6px solid #fff;box-shadow:var(--kgf-shadow-lg);z-index:2} .ed-split.flip .ed-frame-sm{left:auto;right:0} .section.light .ed-frame-sm,.section.sky .ed-frame-sm{border-color:var(--kgf-mist)} .section.navy .ed-frame-sm{border-color:var(--kgf-navy-900)} /* The horizon line under the main frame */ .ed-media::after{content:"";position:absolute;right:0;top:-14px;width:38%;height:4px;border-radius:4px;background:var(--kgf-horizon)} .ed-split.flip .ed-media::after{right:auto;left:0} .ed-split .pg-tiers{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px} .ed-split .pg-tier::before,.ed-split .pg-tier::after{display:none!important} @media (max-width:900px){ .ed-split{grid-template-columns:1fr} .ed-split.flip > :first-child{order:0} .ed-frame{aspect-ratio:4/3} } /* D — MOSAIC =============================================================== */ .ed-mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(120px,15vw,210px);gap:clamp(10px,1.4vw,18px)} .ed-mosaic figure{border-radius:18px} .ed-mosaic.m3 figure:nth-child(1){grid-column:1/8;grid-row:span 2} .ed-mosaic.m3 figure:nth-child(2){grid-column:8/13} .ed-mosaic.m3 figure:nth-child(3){grid-column:8/13} .ed-mosaic.m4 figure:nth-child(1){grid-column:1/6;grid-row:span 2} .ed-mosaic.m4 figure:nth-child(2){grid-column:6/13} .ed-mosaic.m4 figure:nth-child(3){grid-column:6/9} .ed-mosaic.m4 figure:nth-child(4){grid-column:9/13} .ed-mosaic.m5 figure:nth-child(1){grid-column:1/5;grid-row:span 2} .ed-mosaic.m5 figure:nth-child(2){grid-column:5/9} .ed-mosaic.m5 figure:nth-child(3){grid-column:9/13;grid-row:span 2} .ed-mosaic.m5 figure:nth-child(4){grid-column:5/7} .ed-mosaic.m5 figure:nth-child(5){grid-column:7/9} @media (max-width:720px){ .ed-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px} .ed-mosaic figure{grid-column:auto!important;grid-row:auto!important} .ed-mosaic figure:first-child{grid-column:1/-1!important;grid-row:span 2!important} } /* E — FULL-BLEED PHOTO BAND ================================================ A photograph across the page with words on it: a pause between sections. */ .ed-band{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(380px,56vh,560px);display:flex;align-items:flex-end;color:#fff;background:var(--kgf-navy-900)} .ed-band > figure{position:absolute;inset:0;z-index:-2;margin:0} .ed-band > figure img{width:100%;height:100%;object-fit:cover;display:block} .ed-band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(3,13,32,.92) 0%,rgba(3,13,32,.55) 42%,rgba(3,13,32,.12) 100%)} .ed-band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--kgf-horizon)} .ed-band .container{padding-top:clamp(64px,8vw,120px);padding-bottom:clamp(44px,6vw,80px)} .ed-band blockquote,.ed-band .ed-band-title{margin:0;max-width:880px;font-family:var(--kgf-font-display);font-weight:500;font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.18;letter-spacing:-.01em;color:#fff} .ed-band .eyebrow{color:var(--kgf-blue-300);margin-bottom:16px} .ed-band p{max-width:640px;margin:16px 0 0;color:#d3def0} .ed-band .actions{margin-top:26px} /* F — FILM STRIP =========================================================== A row of photographs that scrolls sideways; keyboard users can focus it and use the arrow keys. */ .ed-strip{display:flex;gap:clamp(12px,1.6vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;padding:4px max(16px,calc((100vw - var(--kgf-width))/2)) 18px;margin:0; scrollbar-width:thin;scrollbar-color:var(--kgf-blue-200) transparent;-webkit-overflow-scrolling:touch} .ed-strip:focus-visible{outline:none;box-shadow:inset var(--kgf-ring)} .ed-strip figure{flex:0 0 auto;width:clamp(240px,26vw,360px);aspect-ratio:4/5;border-radius:18px;scroll-snap-align:center} .ed-strip figure:nth-child(3n+2){aspect-ratio:4/3;width:clamp(300px,34vw,480px);align-self:center} .ed-strip-wrap{overflow:hidden} /* G — SINGLE AND INLINE FIGURES =========================================== */ .ed-figure{border-radius:22px;aspect-ratio:16/8;box-shadow:var(--kgf-shadow)} .ed-figure.tall{aspect-ratio:4/5} figure.ed-figure + figcaption,.ed-figcap{margin:12px 2px 0;color:var(--kgf-slate-500);font-size:.86rem} .ed-inline{float:right;width:min(42%,380px);aspect-ratio:4/5;margin:6px 0 20px 36px;border-radius:18px;box-shadow:var(--kgf-shadow)} .ed-inline.left{float:left;margin:6px 36px 20px 0} @media (max-width:720px){.ed-inline,.ed-inline.left{float:none;width:100%;aspect-ratio:4/3;margin:0 0 24px}} .ed-clear{clear:both} /* Photo header on a card grid: one photograph on top of a set of cards */ .ed-cards-photo{border-radius:22px 22px 0 0;aspect-ratio:21/8;margin:0} /* H — FINISH ============================================================== */ .section h2{letter-spacing:-.012em} .lead{font-size:clamp(1.08rem,1.35vw,1.22rem);line-height:1.7} .eyebrow{letter-spacing:.18em} /* Cards: softer corners, crisper hover, an arrow on linked cards */ .card{border-radius:18px} a.card{padding-right:0} a.card .card-body h3::after{content:"";display:inline-block;width:.5em;height:.5em;margin-left:.45em;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateY(-.1em) rotate(45deg);opacity:0;transition:opacity .2s ease,transform .2s ease} a.card:hover .card-body h3::after{opacity:.7;transform:translate(3px,-.1em) rotate(45deg)} .card.media .photo{aspect-ratio:4/3} /* Quotes: large serif with a hairline instead of a heavy bar */ .quote{background:none;border-left:0;padding:8px 0 8px 34px;position:relative;font-size:clamp(1.35rem,2.2vw,1.8rem)} .quote::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--kgf-horizon)} /* Sections alternate with a quiet top hairline so long pages keep rhythm */ .section.light,.section.sky{background:var(--kgf-mist)} /* Reveal a little quicker so the page never looks greyed while reading */ .reveal{transition-duration:.55s} /* Splits on navy sections: light copy */ .section.navy .ed-split .ed-copy .lead,.section.navy .ed-split .lead{color:#c6d4ea} .ed-split .ed-copy-navy h2{margin-top:14px} .section.navy .ed-media::after{background:linear-gradient(90deg,var(--kgf-blue-500),var(--kgf-sky))}