/* =============================================================================
NESHARIM FOUNDATION — STYLESHEET
=============================================================================
Site: Nesharim Foundation (nesharimfoundation.com)
File: stylesheet.css
Description: Global styles for the single-page Nesharim Foundation site.
Fonts: Newsreader (display/serif, variable), Karla (body) —
self-hosted via fonts.css in index.html .
TABLE OF CONTENTS
-----------------
1. Design Tokens — colour, spacing, and measure custom properties
2. Reset & Base — box-sizing reset, scroll behaviour, body defaults
3. Layout Utilities — .wrap page-width container
4. Accessibility — focus states, skip link
5. Header & Navigation — sticky header bar, logo mark, nav links,
mobile burger button & slide-in nav panel
6. Hero — top banner, animated "thermal" lines, headline
7. Section Base — shared section/heading/paragraph rules used
across About, Mission, Work, and Contact
8. Mission & Values — "Our Values" 3-column grid, icon boxes
9. What We Do / Partners — full-width partner rows, logo placeholders,
focus list, verse citation
9b. Image Placeholders — reusable section imagery placeholder box
10. Callout Note — highlighted note box (governance link)
11. Contact — email link, contact section spacing
12. Footer — copyright bar, Hebrew wordmark
13. Scroll Reveal — fade-in-on-scroll for section headings
========================================================================== */
/* -----------------------------------------------------------------------
1. DESIGN TOKENS
----------------------------------------------------------------------- */
:root{
--ink:#14234A;
--ink-soft:#5A6480;
--sky:#ECEEF3;
--thermal:#A88B5C;
--thermal-pale:#F3EDE1;
--paper:#FBFAF7;
--rule:#DBDDE4;
--measure:34rem;
--font-heading: 'Newsreader', 'Newsreader Fallback', Georgia, serif;
--font-body: 'Karla', 'Karla Fallback', Arial, sans-serif;
}
/* -----------------------------------------------------------------------
2. RESET & BASE
----------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1, h2, h3 {
font-family: var(--font-heading);
}
h1{
padding-bottom: .75rem;
}
/* -----------------------------------------------------------------------
3. LAYOUT UTILITIES
----------------------------------------------------------------------- */
.wrap{width:min(70% - 2.5rem,68rem);margin-inline:auto}
.hero-wrap{width:min(100% - 2.5rem,68rem);margin-inline:auto}
/* Mobile: the 70%-width container, justified text, and 70%-width images
are a desktop-only refinement — on small screens they just waste
space and make the type harder to read, so give paragraphs and
images the full wrap width and align text left. */
@media(max-width:780px){
.wrap{width:min(100% - 2.5rem,68rem)}
p{max-width:100%;text-align:left}
}
/* -----------------------------------------------------------------------
4. ACCESSIBILITY
----------------------------------------------------------------------- */
:focus-visible{outline:2px solid var(--thermal);outline-offset:3px;border-radius:2px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.75rem 1.25rem;z-index:1000;text-decoration:none}
.skip-link:focus{left:1rem;top:1rem}
/* -----------------------------------------------------------------------
5. HEADER & NAVIGATION
----------------------------------------------------------------------- */
header{position:sticky;top:0;z-index:20;background:rgba(251,250,247,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;justify-content:space-between;padding:.95rem 0;gap:1rem}
.mark{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.mark img{height:auto;width:210px;flex:none;display:block}
.mark .name{display:none; font-family:var(--font-heading);font-weight:600;font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);line-height:1}
nav{display:flex;gap:1.5rem;flex-wrap:wrap}
nav a{font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;font-weight:500;color:var(--ink-soft);text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent;transition:.25s}
nav a:hover,nav a:focus-visible{color:var(--ink);border-color:var(--thermal)}
/* Burger button — hidden on desktop, shown at the mobile breakpoint below */
.burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;padding:0;border:0;background:none;cursor:pointer;flex:none;z-index:30}
.burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s ease,opacity .3s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Backdrop behind the mobile nav panel — inert and invisible until opened */
.nav-backdrop{position:fixed;inset:0;background:rgba(20,35,74,.35);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:19}
.nav-backdrop.is-open{opacity:1;pointer-events:auto}
@media(max-width:780px){
.burger{display:flex}
nav{position:fixed;top:0;right:0;height:100vh;width:min(78vw,320px);background:var(--paper);flex-direction:column;align-items:flex-start;gap:0;padding:6.5rem 2rem 2rem;margin:0;transform:translateX(100%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s linear .35s;box-shadow:-12px 0 32px rgba(20,35,74,.1);overflow-y:auto;z-index:25}
nav.is-open{transform:translateX(0);visibility:visible;transition:transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s linear 0s}
nav a{width:100%;padding:.9rem 0;border-bottom:1px solid var(--rule)}
body.nav-open{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){
nav{transition:none}
.nav-backdrop{transition:none}
.burger span{transition:none}
}
/* -----------------------------------------------------------------------
6. HERO
----------------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding:4rem 0 7rem;background:linear-gradient(180deg,var(--sky) 0%,var(--paper) 100%);border-bottom:1px solid var(--rule)}
/* Background image layer. Fades in once on page load (not scroll-triggered,
since the hero is visible immediately). --hero-bg is shown behind the
![]()
while it loads, avoiding a flash of white. */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--sky)}
.hero-bg img{width:100%;height:100%;object-fit:cover;display:block;animation:heroBgFade 1.8s ease .2s both}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(251,250,247,.3) 0%,var(--paper) 94%)}
@keyframes heroBgFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-bg img{animation:none}}
.thermal{position:absolute;inset:0;pointer-events:none;opacity:.3;z-index:1}
.thermal svg{width:100%;height:100%}
.thermal path{fill:none;stroke:var(--thermal);stroke-width:1;stroke-dasharray:5 320;animation:rise 14s linear infinite}
.thermal path:nth-child(2){animation-duration:19s;animation-delay:-4s;stroke-width:.75}
.thermal path:nth-child(3){animation-duration:16s;animation-delay:-9s;opacity:.6}
.thermal path:nth-child(4){animation-duration:22s;animation-delay:-2s;stroke-width:.75;opacity:.5}
@keyframes rise{from{stroke-dashoffset:650}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.thermal{opacity:.16}.thermal path{stroke-dasharray:none}}
.hero .hero-wrap{position:relative;z-index:2}
.lockup{width:min(230px,52vw);height:auto;display:block;margin:0 0 3.2rem;animation:settle 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes settle{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lockup{animation:none}}
.verse{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--thermal);font-weight:600;margin-bottom:1.8rem; min-width:0;max-width:100%;text-align:left}
.hero p.verse{font-size:1rem;letter-spacing:.2em;text-transform:uppercase;color:var(--thermal);font-weight:600;margin-bottom:1.8rem;min-width:0;max-width:100%;text-align:left}
h1{font-family:var(--font-heading);font-weight:300;font-size:clamp(2.4rem,6vw,4.5rem);line-height:1.08;letter-spacing:-.02em;max-width:30ch}
h1 em, h2 em{font-style:italic;font-weight:400;color:var(--thermal)}
.rise-group{white-space:nowrap}
.hero p{margin-top:1.9rem;max-width:44rem;font-size:1.075rem;color:var(--ink-soft);font-weight:300;margin-left:0}
/* -----------------------------------------------------------------------
7. SECTION BASE
Shared rules for every below the hero: About, Mission & Values,
What We Do, and Contact all inherit these headings/paragraph/eyebrow styles.
----------------------------------------------------------------------- */
section{padding:6rem 0;border-bottom:1px solid var(--rule)}
.eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--thermal);margin-bottom:1.4rem}
h2{font-family:var(--font-heading);font-weight:400;font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.2;letter-spacing:-.01em;margin-bottom:1.8rem;max-width:22ch}
h3{font-family:var(--font-heading);font-weight:400;font-size:1.2rem;line-height:1.3;margin-bottom:.55rem}
p{max-width:38rem;color:var(--ink-soft);font-weight:300;text-align:justify}
p + p{margin-top:1.15rem}
.lede{color:var(--ink);font-size:1.075rem}
.split{display:flex;align-items:flex-start;gap:4rem}
.split > *{flex:1;min-width:0}
.split > :last-child{flex:1.5}
.split--text-image > :first-child{flex:1.5}
.split--text-image > :last-child{flex:1}
@media(max-width:820px){.split{flex-direction:column;gap:1.5rem}}
/* Stacked variant — text block full-width on top, image full-width
below, at every viewport width (used by the Mission intro). */
.split--stacked{flex-direction:column;gap:2.5rem}
.split--stacked > *{flex:none;width:100%}
.split--stacked h2{max-width:none}
.split--stacked p{max-width:none}
/* -----------------------------------------------------------------------
8. MISSION & VALUES
3-column grid ("Our Values") pairing Faith/Hope, Love/Joy, and
Dignity/Stewardship, each value with a placeholder icon box above its
heading. .value-item controls the vertical gap between the two stacked
values in each column.
----------------------------------------------------------------------- */
.values{display:grid;grid-template-columns:repeat(3,1fr);row-gap:2.4rem;column-gap:0;margin-top:1rem;margin-bottom:2.4rem;align-items:stretch}
.value-item{padding:2rem 1.8rem 2rem 0}
.value-item:nth-child(3n+2),.value-item:nth-child(3n+3){padding-left:1.8rem;border-left:1px solid var(--rule)}
.values p{font-size:.94rem}
.values-label{font-family:var(--font-heading);font-style:italic;font-weight:400;font-size:.95rem;color:var(--ink-soft);margin-top:1rem}
.value-icon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin-bottom:.9rem}
@media(max-width:820px){.values{grid-template-columns:1fr;row-gap:0}.value-item{padding:1.6rem 0!important;border-left:none!important}}
/* -----------------------------------------------------------------------
9. WHAT WE DO / PARTNERS
Full-width partner rows (logo placeholder + name/role/description),
the "support focuses on" list, and the verse citation above it.
----------------------------------------------------------------------- */
.verse-cite{font-style:italic;color:var(--thermal);margin-bottom:1.6rem}
.focus-block > .img-placeholder{margin-top:0;margin-bottom:1.75rem}
.focus-block > h3{margin-bottom:.75rem}
.focus-list{margin:0 0 1.5rem;padding-left:1.25rem;max-width:var(--measure)}
.focus-list li{margin-bottom:.4rem;color:var(--ink-soft);font-weight:300}
.focus-list + p{margin-top:0}
.partners{display:flex;flex-direction:column;gap:0;margin-top:2.5rem}
.partners-title{margin-bottom:0}
.partner{display:flex;align-items:flex-start;gap:2.4rem;width:100%;padding:2.4rem 0;border-top:1px solid var(--rule)}
.partner:first-of-type{border-top:none;padding-top:0}
.partner:last-of-type{padding-bottom:0}
.partner h3{margin-bottom:.35rem}
.partner .role{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--thermal);font-weight:600;margin-bottom:.7rem}
.partner-logo{flex:0 0 260px; border:1px dashed var(--rule);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);text-align:center;padding:.5rem}
.partner-body{flex:1 1 auto;min-width:0}
.partner-body p{max-width:none}
@media(max-width:820px){.partner{flex-direction:column;gap:1.1rem}.partner-logo{width:250px}}
/* -----------------------------------------------------------------------
9b. IMAGE PLACEHOLDERS
Reusable placeholder box for section imagery (About, Mission, What We
Do, Contact). Swap for a real ![]()
(object-fit: cover) when photos are
ready — the aspect-ratio variants below keep layout stable so doing so
causes no reflow.
----------------------------------------------------------------------- */
.img-placeholder{
margin: 2rem auto 2.5rem;
border-radius:12px;
display:block;
width:70%;
overflow:hidden; /* makes the border-radius actually clip the image */
}
@media(max-width:780px){
.img-placeholder{width:100%;margin-left:0;margin-right:0}
}
.img-placeholder img{
display:block;
width:100%;
height:100%;
object-fit:cover; /* fills the box without distorting the image */
}
.img-placeholder--portrait{aspect-ratio:3/4}
.img-placeholder--landscape{aspect-ratio:4/3}
.img-placeholder--wide{aspect-ratio:16/9}
@media(max-width:820px){.img-placeholder--portrait,.img-placeholder--landscape,.img-placeholder--wide{aspect-ratio:16/10}}
/* -----------------------------------------------------------------------
10. CALLOUT NOTE
Highlighted note box
----------------------------------------------------------------------- */
.note{max-width:fit-content;min-width:200px;padding:1.9rem 2rem;background:var(--thermal-pale);border-left:3px solid var(--thermal)}
.note p{color:var(--ink);max-width:48rem;margin:0}
.note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* Hero note — fixed width override so the box reads as a deliberate
pull-quote rather than stretching to the full hero column. */
.note--hero{max-width:50rem}
@media(max-width:820px){.note-break{display:none}}
/* -----------------------------------------------------------------------
11. CONTACT
----------------------------------------------------------------------- */
#contact{border-bottom:none;padding-bottom:4rem}
.mail{display:inline-block;margin-top:1.6rem;font-family:var(--font-heading);font-size:clamp(1.0rem, 1.4vw, 1.8rem);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--thermal);padding-bottom:.2rem;transition:.25s}
.mail:hover,.mail:focus-visible{color:var(--thermal)}
/* -----------------------------------------------------------------------
12. FOOTER
----------------------------------------------------------------------- */
footer{padding:2.2rem 0;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:var(--ink-soft)}
footer p{max-width:none}
footer .heb{font-family:var(--font-heading);font-style:italic}
footer a{color:var(--ink-soft)}
@media(max-width:820px){footer{flex-direction:column;align-items:flex-start;gap:.5rem}}
/* -----------------------------------------------------------------------
13. SCROLL REVEAL
Fade-in-on-scroll applied to each section's first heading (see JS,
IntersectionObserver-driven). Only opacity/transform are animated so
the browser never has to recompute layout for these elements — this
keeps the effect off the Cumulative Layout Shift and INP budgets.
----------------------------------------------------------------------- */
.reveal{
opacity:0;
transform:translateY(18px);
transition:opacity 2s cubic-bezier(.2,.7,.2,1), transform 2s cubic-bezier(.2,.7,.2,1);
will-change:opacity,transform
}
.reveal.is-visible{opacity:1;transform:none}
.reveal--left{transform:translateX(-26px)}
.reveal--left.is-visible{transform:none}
.reveal--right{transform:translateX(26px)}
.reveal--right.is-visible{transform:none}
/* Left/right image reveals — match the slow image fade */
.reveal--left,
.reveal--right{
transition:opacity 7s cubic-bezier(.2,.7,.2,1), transform 7s cubic-bezier(.2,.7,.2,1);
}
/* Hero — slower, more dramatic entrance */
.reveal--hero{
transition:opacity 8s cubic-bezier(.2,.7,.2,1), transform 8s cubic-bezier(.2,.7,.2,1);
}
/* Section headings — 4s each */
.reveal--heading{
transition:opacity 5.5s cubic-bezier(.2,.7,.2,1), transform 5.5s cubic-bezier(.2,.7,.2,1);
}
/* Bible verses and subheadings — dissolve in place only, no movement,
so the words stay put and simply fade up. Shorter duration than
headings so a cascade of several of these in sequence reads briskly
rather than sluggishly. */
.reveal--text{
transform:none;
transition:opacity 3s cubic-bezier(.2,.7,.2,1);
}
/* Image (below the fold) — stays still, dissolves in only (15% longer: 7s -> 8.05s) */
.reveal--image{
transform:none;
transition:opacity 8.05s cubic-bezier(.2,.7,.2,1);
}
/* Contact-section closing image — dissolves 20% slower than the standard
image reveal (8.05s -> 9.66s). Applied alongside .reveal--image. */
.reveal--image-slow{
transition:opacity 11.592s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none;transition:none;will-change:auto}
}
/* -----------------------------------------------------------------------
14. GRANULAR REVEAL VARIANTS
Fine-grained modifiers layered on top of .reveal for a more choreographed
entrance: the hero headline and section heading two-part reveal (still
words dissolving in, thermal emphasis words rising up from further
below), and the note callouts sliding in from further off to the side.
Paragraphs, values, partner cards, and focus-list bullet items are
static (no .reveal classes) and simply display normally.
----------------------------------------------------------------------- */
/* Hero headline, part 1 — the lead-in text stays put and only dissolves
in, so the emphasis stays on the word that follows it. */
.reveal--hero-text{
display:inline-block;
transform:none;
transition:opacity 4.56s cubic-bezier(.2,.7,.2,1);
}
.reveal--hero-text.is-visible{opacity:1}
/* Hero headline, part 2 — "rise": fades in AND rises up from well below
its resting spot, a beat slower than the lead-in text so the movement
is easy to catch as it lands after it. */
.reveal--hero-rise{
display:inline-block;
transform:translateY(60px);
transition:opacity 4.3s cubic-bezier(.2,.7,.2,1), transform 4.3s cubic-bezier(.2,.7,.2,1);
}
.reveal--hero-rise.is-visible{opacity:1;transform:none}
/* Section headings (h2) & subheading em emphasis — split the same way
as the hero headline: plain words stay still and dissolve in, while
the thermal (orange) emphasised word rises up from well below its
resting spot so the movement is easy to catch. */
.reveal--heading-fade{
display:inline-block;
transform:none;
transition:opacity 8.001125s cubic-bezier(.2,.7,.2,1);
}
.reveal--heading-fade.is-visible{opacity:1}
.reveal--heading-rise{
display:inline-block;
transform:translateY(28.04203125px);
transition:opacity 6.00084375s cubic-bezier(.2,.7,.2,1), transform 6.00084375s cubic-bezier(.2,.7,.2,1);
}
.reveal--heading-rise.is-visible{opacity:1;transform:none}
/* Note callouts — slide in from further right as they fade in, so the
movement is clearly visible before settling into place */
.reveal--note{
transform:translateX(110px);
transition:opacity 3.5s cubic-bezier(.2,.7,.2,1), transform 3.5s cubic-bezier(.2,.7,.2,1);
}
.reveal--note.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
.reveal--hero-text,
.reveal--hero-rise,
.reveal--heading-fade,
.reveal--heading-rise,
.reveal--note{opacity:1;transform:none;transition:none}
}