/* ===== Mitzva.app — styles matched to the live site ===== */ /* Fonts are loaded via in each page's so they download in parallel with this stylesheet instead of waiting for it to parse. */ :root { --bg: #f5f7fb; --surface: #ffffff; --ink: #0a0a0a; /* Both pass WCAG AA (4.5:1) on --bg and on white. Previous --faint (#9ca3af) failed at 2.37:1. */ --muted: #4b5563; /* 7.6:1 on --bg */ --faint: #6b7280; /* 4.51:1 on --bg, 4.83:1 on white */ --line: #e5e7eb; --blue: #2563eb; --dark: #0b1a3a; --radius: 8px; --max: 1080px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* ================================================================ Page transitions Native cross-document View Transitions where supported (Chrome, Safari 18+), with a plain fade-up fallback everywhere else. ================================================================ */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vt-out 200ms cubic-bezier(0.4, 0, 1, 1) both; } ::view-transition-new(root) { animation: vt-in 320ms cubic-bezier(0, 0, 0.2, 1) both; } @keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } } @keyframes vt-in { from { opacity: 0; transform: translateY(12px); } } /* The chrome stays put while the content swaps underneath it */ header { view-transition-name: site-header; } footer { view-transition-name: site-footer; } /* Browsers without View Transitions still get a soft entrance */ @supports not (view-transition-name: none) { @keyframes page-in { from { opacity: 0; transform: translateY(10px); } } main { animation: page-in 340ms cubic-bezier(0, 0, 0.2, 1) both; } } /* Scroll reveal — sections ease in as they come into view */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.65s cubic-bezier(0, 0, 0.2, 1), transform 0.65s cubic-bezier(0, 0, 0.2, 1); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; will-change: auto; } /* Never leave content invisible if JS fails to run */ .no-js .reveal { opacity: 1; transform: none; } /* Anchor targets clear the sticky header instead of hiding beneath it */ [id] { scroll-margin-top: 96px; } /* Skip link — first tab stop for keyboard and screen-reader users */ .skip { position: absolute; left: 50%; transform: translateX(-50%) translateY(-200%); z-index: 100; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 8px; font-size: 14px; font-weight: 500; text-decoration: none; transition: transform 0.15s ease; } .skip:focus { transform: translateX(-50%) translateY(0); } /* Visually hidden, still read by screen readers */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Visible focus ring everywhere, without the permanent outline on mouse click */ :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; } .dark-section :focus-visible { outline-color: #fff; } body { font-family: Inter, -apple-system, system-ui, "Helvetica Neue", sans-serif; background: var(--bg); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; } .serif { font-family: Fraunces, Georgia, serif; font-weight: 500; } /* Horizontal longhand only: .hero and .wrap are used together, and a `padding` shorthand here silently zeroes the hero's vertical padding. */ .wrap { max-width: var(--max); margin: 0 auto; padding-left: 32px; padding-right: 32px; } .narrow { max-width: 720px; margin: 0 auto; } /* ---- Nav ---- */ header { position: sticky; top: 0; z-index: 20; background: rgba(245, 247, 251, 0.88); backdrop-filter: blur(10px); } .nav { max-width: var(--max); margin: 0 auto; padding: 20px 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .brand { display: flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 600; letter-spacing: -0.5px; color: var(--ink); text-decoration: none; } .brand .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); } .nav-right { display: flex; align-items: center; gap: 14px; } .nav-links { display: flex; gap: 22px; font-size: 14px; } .nav-links a { color: var(--muted); text-decoration: none; } .nav-links a:hover { color: var(--ink); } .nav-links a.active { color: var(--ink); font-weight: 500; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; font-size: 14px; font-weight: 500; border-radius: var(--radius); text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: inherit; transition: opacity 0.15s ease, border-color 0.15s ease; } .btn-dark { background: var(--ink); color: #fff; } .btn-dark:hover { opacity: 0.85; } .btn-ghost { background: transparent; color: var(--ink); border-color: #d5d9e0; } .btn-ghost:hover { border-color: var(--ink); } .btn-light { background: #fff; color: var(--ink); } .btn-light:hover { opacity: 0.88; } .btn-sm { height: 38px; padding: 0 16px; font-size: 13px; } /* ---- Pill badge ---- */ .pill { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 18px; font-size: 11px; font-weight: 500; letter-spacing: 1.4px; color: var(--muted); text-transform: uppercase; } .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); } /* ---- Hero ---- */ .hero { text-align: center; padding: 88px 0 72px; position: relative; overflow: hidden; } /* Homepage hero owns the whole first screen at every size. Without this the marquee and the dark section poke into the fold and the hero reads as cut off. svh (not vh) so mobile browser chrome doesn't push it over. */ .hero-full { min-height: calc(100vh - 143px); /* nav 64 + marquee 79 */ min-height: calc(100svh - 143px); display: flex; flex-direction: column; /* Content sits in the upper part so the מצוה watermark below it stays legible rather than being buried behind the copy. */ justify-content: flex-start; padding-top: 4vh; align-items: center; /* shrink-wrap children so the pill doesn't stretch */ } /* Big and dead-centre in the hero. The copy sits over it at rest and lifts away on scroll, so this is what the pinned background reveals. */ .hero .watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: Fraunces, Georgia, serif; font-size: clamp(88px, 20vw, 300px); font-weight: 300; line-height: 1; color: rgba(10, 10, 10, 0.10); pointer-events: none; white-space: nowrap; user-select: none; } .hero > * { position: relative; } h1 { font-size: clamp(34px, 5.5vw, 64px); font-weight: 600; letter-spacing: -1.6px; line-height: 1.05; margin: 26px 0 20px; } .sub { font-size: 18px; color: var(--muted); max-width: 620px; margin: 0 auto 34px; } .cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .cta-row.left { justify-content: flex-start; } .fine { font-size: 13px; color: var(--faint); margin-top: 26px; } /* ---- Marquee ---- */ .marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f0f3f8; overflow: hidden; padding: 20px 0; } .marquee-track { display: flex; gap: 42px; width: max-content; animation: slide 34s linear infinite; } .marquee-item { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 500; letter-spacing: 1.6px; /* --muted, not --faint: at 12px on the marquee's tinted band, --faint lands at 4.35:1 and misses AA. */ color: var(--muted); text-transform: uppercase; white-space: nowrap; } .marquee-item::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); } @keyframes slide { to { transform: translateX(-50%); } } /* ---- Dark section ---- */ .dark-section { background: linear-gradient(160deg, #0b1a3a 0%, #060d1f 100%); color: #fff; padding: 88px 0; text-align: center; } .eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 16px; } .dark-section h2 { font-size: clamp(28px, 4.5vw, 44px); font-weight: 600; letter-spacing: -1.2px; line-height: 1.1; margin-bottom: 12px; } .dark-section .sub { color: rgba(255,255,255,0.62); } /* ================================================================ iPhone 17 Pro — device frame Screen is 402 x 874pt (true logical resolution). The whole device scales with --s so it fits any container without re-doing geometry. ================================================================ */ .phones { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; margin-top: 48px; } .device { --s: 0.62; /* scale factor */ --screen-w: 402px; --screen-h: 874px; --bezel: 11px; /* black border around the glass */ --radius: 60px; position: relative; width: calc((var(--screen-w) + var(--bezel) * 2) * var(--s)); height: calc((var(--screen-h) + var(--bezel) * 2) * var(--s)); flex: none; } /* Titanium rail — the outer band, brushed with a light sweep */ .device-frame { position: absolute; inset: 0; border-radius: calc(var(--radius) * var(--s)); padding: calc(var(--bezel) * var(--s)); background: linear-gradient(148deg, #d9d2c8 0%, #9d958a 14%, #f2ede6 27%, #8e867c 29%, #b8b0a5 42%, #6f6862 58%, #cdc6bb 72%, #8a8279 86%, #ded7cd 100%); box-shadow: 0 2px 3px rgba(255,255,255,0.55) inset, 0 -2px 3px rgba(0,0,0,0.30) inset, 0 30px 70px rgba(0,0,0,0.55), 0 10px 24px rgba(0,0,0,0.35); } /* Inner black bezel between rail and glass */ .device-bezel { position: absolute; inset: calc(var(--bezel) * var(--s) * 0.42); border-radius: calc((var(--radius) - 4px) * var(--s)); background: #05070c; box-shadow: 0 0 0 1px rgba(255,255,255,0.10) inset; } /* The glass. Everything inside is authored at 1pt = 1px, then scaled. */ .device-screen { position: absolute; top: calc(var(--bezel) * var(--s)); left: calc(var(--bezel) * var(--s)); width: calc(var(--screen-w) * var(--s)); height: calc(var(--screen-h) * var(--s)); border-radius: calc((var(--radius) - var(--bezel)) * var(--s)); overflow: hidden; background: #fff; isolation: isolate; } .device-canvas { width: var(--screen-w); height: var(--screen-h); transform: scale(var(--s)); transform-origin: top left; display: flex; flex-direction: column; background: #fff; color: var(--ink); text-align: left; } /* --- Status bar --- */ .status-bar { height: 54px; flex: none; padding: 14px 34px 0; display: flex; align-items: center; justify-content: space-between; font-size: 17px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink); } .status-icons { display: flex; align-items: center; gap: 6px; } .status-icons svg { display: block; } /* --- Dynamic Island --- */ .dynamic-island { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 126px; height: 37px; background: #000; border-radius: 20px; z-index: 5; display: flex; align-items: center; justify-content: flex-end; padding-right: 11px; } .dynamic-island::after { /* front camera lens */ content: ""; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 34% 32%, #23324d 0%, #0d1524 55%, #05080f 100%); box-shadow: 0 0 0 1px rgba(90,120,170,0.22); } /* --- Scrollable app content --- */ .device-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 22px 8px; scrollbar-width: none; } .device-body::-webkit-scrollbar { display: none; } /* --- Home indicator --- */ .home-indicator { flex: none; height: 34px; display: flex; align-items: center; justify-content: center; background: #fff; } .home-indicator::after { content: ""; width: 144px; height: 5px; border-radius: 3px; background: #0d0d12; } /* --- Physical side buttons --- */ .btn-side { position: absolute; background: linear-gradient(180deg, #b3aba0, #6d665f 45%, #cdc5ba); box-shadow: 0 1px 2px rgba(0,0,0,0.4); } .btn-action { left: calc(-2px * var(--s)); top: calc(118px * var(--s)); width: calc(4px * var(--s)); height: calc(32px * var(--s)); border-radius: calc(2px * var(--s)) 0 0 calc(2px * var(--s)); } .btn-vol-up { left: calc(-2px * var(--s)); top: calc(178px * var(--s)); width: calc(4px * var(--s)); height: calc(64px * var(--s)); border-radius: calc(2px * var(--s)) 0 0 calc(2px * var(--s)); } .btn-vol-dn { left: calc(-2px * var(--s)); top: calc(256px * var(--s)); width: calc(4px * var(--s)); height: calc(64px * var(--s)); border-radius: calc(2px * var(--s)) 0 0 calc(2px * var(--s)); } .btn-power { right: calc(-2px * var(--s)); top: calc(210px * var(--s)); width: calc(4px * var(--s)); height: calc(102px * var(--s)); border-radius: 0 calc(2px * var(--s)) calc(2px * var(--s)) 0; } /* Camera Control — the capacitive button, sits flush and glassy */ .btn-camera { right: calc(-2px * var(--s)); top: calc(360px * var(--s)); width: calc(4px * var(--s)); height: calc(44px * var(--s)); border-radius: 0 calc(2px * var(--s)) calc(2px * var(--s)) 0; background: linear-gradient(180deg, #cfd6e0, #8b93a1 50%, #dfe4ec); } /* ================================================================ Donate page ================================================================ */ .donate-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 28px; box-shadow: 0 4px 24px rgba(20,22,40,0.05); } .field-label { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; } /* Segmented one-time / monthly control */ .segment { display: flex; gap: 4px; padding: 4px; background: #f1f3f8; border-radius: 12px; margin-bottom: 24px; } .segment button { flex: 1; padding: 11px 8px; border: none; background: transparent; border-radius: 9px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; min-height: 44px; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .segment button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.10); } /* Amount grid */ .amount-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; } .amount-grid button { padding: 16px 8px; min-height: 60px; border: 1.5px solid var(--line); border-radius: 13px; background: #fff; font-family: inherit; cursor: pointer; color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease; } .amount-grid button .amt { font-size: 19px; font-weight: 700; letter-spacing: -0.4px; } .amount-grid button .sub-amt { font-size: 10px; color: var(--faint); letter-spacing: 0.2px; } .amount-grid button:active { transform: scale(0.97); } .amount-grid button[aria-pressed="true"] { border-color: var(--blue); background: #f0f5ff; } .amount-grid button[aria-pressed="true"] .amt { color: var(--blue); } .amount-grid button[aria-pressed="true"] .sub-amt { color: var(--blue); opacity: 0.75; } /* Custom amount */ .custom-wrap { position: relative; margin-bottom: 18px; } .custom-wrap .cur { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 17px; font-weight: 600; color: var(--faint); pointer-events: none; } .custom-wrap input { padding-left: 32px; margin-bottom: 0; font-size: 16px; font-weight: 600; min-height: 52px; border-radius: 12px; } .impact { display: flex; gap: 10px; align-items: flex-start; background: #f7f9fc; border-radius: 12px; padding: 13px 15px; margin-bottom: 22px; font-size: 13.5px; color: var(--muted); line-height: 1.45; } .impact .ico { color: var(--blue); flex: none; font-size: 14px; line-height: 1.3; } .pay-primary { width: 100%; min-height: 54px; padding: 15px; background: var(--ink); color: #fff; border: none; border-radius: 13px; font-family: inherit; font-size: 16px; font-weight: 650; cursor: pointer; transition: opacity 0.15s ease, transform 0.1s ease; } .pay-primary:hover { opacity: 0.88; } .pay-primary:active { transform: scale(0.99); } .pay-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; color: var(--faint); font-size: 12px; } .pay-divider::before, .pay-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .wallets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .wallets button { min-height: 50px; padding: 13px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; transition: border-color 0.15s ease, background 0.15s ease; } .wallets button:hover { border-color: var(--ink); } .wallets .full { grid-column: 1 / -1; } /* Collapsible card form */ .card-panel { margin-top: 16px; padding-top: 20px; border-top: 1px solid var(--line); } .card-panel[hidden] { display: none; } .card-panel label { font-size: 12px; font-weight: 600; } .trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 22px; font-size: 12.5px; color: var(--faint); } .trust span { display: flex; align-items: center; gap: 6px; } @media (hover: none) { .wallets button:hover { border-color: var(--line); } } @media (max-width: 420px) { .donate-card { padding: 22px 18px; } .amount-grid { grid-template-columns: repeat(2, 1fr); } .wallets { grid-template-columns: 1fr; } } /* ================================================================ Showcase — phone beside the copy on desktop, stacked on mobile ================================================================ */ .showcase { display: grid; gap: 44px; align-items: center; justify-items: center; } .showcase .copy { max-width: 520px; } .showcase .copy h2 { margin-bottom: 14px; } .feature-list { list-style: none; margin: 26px 0 30px; padding: 0; } .feature-list li { display: flex; align-items: flex-start; gap: 13px; padding: 11px 0; font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,0.72); } .feature-list li .tick { flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.10); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .feature-list li strong { color: #fff; font-weight: 600; } /* Stacked (below the two-column breakpoint): keep the list readable — ticked items stay left-aligned, and the CTA centres with everything else. */ @media (max-width: 899px) { .feature-list { max-width: 520px; margin-left: auto; margin-right: auto; } .feature-list li { text-align: left; } .showcase .cta-row.left { justify-content: center; } } @media (min-width: 900px) { .showcase { grid-template-columns: minmax(0, 1fr) auto; gap: 72px; justify-items: start; } .showcase .copy { text-align: center; } .showcase .cta-row.left { justify-content: center; } .feature-list { max-width: 100%; } /* Bigger phone — there's room for it */ .showcase .device { --s: 0.76; } } @media (min-width: 1200px) { .showcase { gap: 96px; } .showcase .device { --s: 0.84; } } /* On the dedicated demo page the phone is the whole point — let it be big. (Scoped to a standalone .phones block, so the showcase rules above win.) */ @media (min-width: 900px) { .phones .device { --s: 0.86; } } @media (min-width: 900px) and (min-height: 900px) { .phones .device { --s: 0.95; } } /* ================================================================ Centred text Headings and prose centre; anything with a leading marker (ticked feature items, numbered allocation rows) keeps its text left so the markers stay aligned and the lines stay readable. ================================================================ */ .why-block, .why-block p, .narrow > h3, .narrow > p, .showcase .copy, .showcase .copy .sub, .allocation > .alloc-row .t, .about-centre { text-align: center; } .narrow > .clean li, .feature-list li, .alloc-row { text-align: left; } /* Track / Do / Inspire cards — centred, with the numbered badge centred too */ .grid-3 .card { text-align: center; } .grid-3 .card .num { margin-left: auto; margin-right: auto; } .narrow > .clean { max-width: 520px; margin-left: auto; margin-right: auto; } .allocation { max-width: 560px; margin-left: auto; margin-right: auto; } .alloc-row .t { text-align: left; } .callout { text-align: left; } /* ---- "Why" story block on the donate page ---- */ /* `auto` on the sides, not 0 — this element is also .narrow, and a `0` here would cancel that rule's centring and shove the block left. */ .why-block { margin: 8px auto 4px; } .why-block p { font-size: 16.5px; line-height: 1.65; } .why-block p.lead-line { font-size: 19px; line-height: 1.5; color: var(--ink); font-weight: 500; margin-bottom: 18px; } /* Prize / challenge cards */ .prizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0 4px; } .prize { background: #fff; border: 1px solid var(--line); border-radius: 15px; padding: 20px 16px; text-align: center; } /* line-height 1 clips emoji glyphs, which render taller than their em box */ .prize .ico { font-size: 22px; line-height: 1.25; margin-bottom: 8px; display: block; } .prize .t { font-size: 15px; font-weight: 650; letter-spacing: -0.2px; margin-bottom: 3px; } .prize .d { font-size: 12.5px; color: var(--faint); line-height: 1.4; } /* Where the money goes */ .allocation { margin: 22px 0 4px; } .alloc-row { display: flex; align-items: flex-start; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); } .alloc-row:last-child { border-bottom: none; } .alloc-row .n { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft, #eef2fb); color: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .alloc-row .t { font-size: 15.5px; font-weight: 650; margin-bottom: 2px; } .alloc-row .d { font-size: 14px; color: var(--muted); line-height: 1.5; } @media (max-width: 560px) { .prizes { grid-template-columns: 1fr; } .why-block p.lead-line { font-size: 17.5px; } } /* ---- Mini donation strip (homepage) ---- */ .give { background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 20px; padding: 34px 32px; margin: 8px 0 8px; text-align: center; box-shadow: 0 4px 20px rgba(20,22,40,0.04); } .give .eyebrow { color: var(--faint); } .give h3 { font-size: 24px; font-weight: 650; letter-spacing: -0.5px; margin: 6px 0 8px; } .give p { font-size: 15px; max-width: 440px; margin: 0 auto 20px; } .give-amounts { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; } .give-amounts a { border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 20px; font-size: 15px; font-weight: 650; color: var(--ink); text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .give-amounts a:hover { border-color: var(--ink); background: var(--ink); color: #fff; } .give-amounts a.chai { border-color: var(--blue); color: var(--blue); } .give-amounts a.chai:hover { background: var(--blue); border-color: var(--blue); color: #fff; } .give .fine { margin-top: 4px; } @media (max-width: 560px) { .give { padding: 26px 20px; } .give-amounts a { flex: 1 1 calc(50% - 5px); } } /* Legacy flat card, still used where no device frame is wanted */ .phone { width: 320px; text-align: left; background: #fff; color: var(--ink); border-radius: 26px; padding: 22px 20px; box-shadow: 0 18px 50px rgba(0,0,0,0.35); } .mode-tag { font-size: 10px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; } .phone-meta { font-size: 10px; letter-spacing: 1.2px; color: var(--faint); text-transform: uppercase; } .phone-title { font-size: 21px; font-weight: 600; letter-spacing: -0.5px; margin: 4px 0 16px; } .next-card { background: var(--dark); color: #fff; border-radius: 14px; padding: 16px; margin-bottom: 18px; } .next-card .k { font-size: 9px; letter-spacing: 1.6px; color: rgba(255,255,255,0.5); text-transform: uppercase; } .next-card .v { font-size: 19px; font-weight: 600; margin: 4px 0 4px; } .next-card .d { font-size: 12px; color: rgba(255,255,255,0.6); } .group-label { font-size: 10px; font-weight: 600; letter-spacing: 1.6px; color: var(--faint); text-transform: uppercase; margin: 16px 0 6px; } .row { display: flex; align-items: center; gap: 11px; padding: 9px 6px; border-radius: 9px; cursor: pointer; transition: background 0.15s ease; } .row:hover { background: #f5f7fb; } .row .mark { width: 20px; height: 20px; flex-shrink: 0; border: 1.5px solid #d5d9e0; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: transparent; } .row.done .mark { background: var(--ink); border-color: var(--ink); color: #fff; } .row .txt { flex: 1; min-width: 0; } .row .name { font-size: 14px; font-weight: 500; } .row.done .name { color: var(--faint); text-decoration: line-through; } .row .when { font-size: 11px; color: var(--faint); } .row .badge { font-size: 10px; font-weight: 600; color: var(--blue); white-space: nowrap; } .stat-row { display: flex; gap: 10px; margin-bottom: 16px; } .stat { flex: 1; background: #f5f7fb; border-radius: 11px; padding: 11px 12px; } .stat .n { font-size: 20px; font-weight: 600; letter-spacing: -0.5px; } .stat .l { font-size: 10px; color: var(--faint); letter-spacing: 0.4px; } .progress-track { height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; margin-bottom: 16px; } .progress-fill { height: 100%; width: 0%; border-radius: 999px; background: var(--ink); transition: width 0.35s ease; } /* ---- Light content ---- */ section { padding: 80px 0; } h2 { font-size: clamp(26px, 4vw, 40px); font-weight: 600; letter-spacing: -1.2px; line-height: 1.1; margin-bottom: 14px; } h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.3px; margin: 36px 0 8px; } p { font-size: 16px; color: var(--muted); margin-bottom: 14px; } p strong { color: var(--ink); font-weight: 600; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; } .card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px 22px; } .card .num { width: 28px; height: 28px; border-radius: 8px; background: #eef2fb; color: var(--blue); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .card h4 { font-size: 15px; font-weight: 600; margin-bottom: 6px; } .card p { font-size: 14px; margin: 0; } ul.clean { list-style: none; margin: 18px 0 26px; } ul.clean li { font-size: 16px; color: var(--muted); padding: 12px 0 12px 28px; position: relative; border-bottom: 1px solid var(--line); } ul.clean li:last-child { border-bottom: none; } ul.clean li::before { content: ""; position: absolute; left: 4px; top: 21px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); } .callout { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: var(--radius); padding: 18px 22px; font-size: 15px; color: var(--muted); margin: 28px 0; } .callout strong { color: var(--ink); } /* ---- Donate ---- */ .amounts { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 30px; } .amount { border: 1px solid var(--line); background: #fff; border-radius: var(--radius); padding: 12px 22px; font-size: 15px; font-weight: 500; color: var(--ink); cursor: pointer; font-family: inherit; transition: all 0.15s ease; } .amount:hover { border-color: var(--ink); } .amount.selected { background: var(--ink); border-color: var(--ink); color: #fff; } .methods { display: flex; flex-direction: column; gap: 10px; max-width: 380px; margin-bottom: 34px; } .method { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); font-size: 15px; font-weight: 500; color: var(--ink); cursor: pointer; text-align: left; font-family: inherit; transition: border-color 0.15s ease; } .method:hover { border-color: var(--ink); } .method .icon { font-size: 17px; width: 22px; text-align: center; } form.card-form { max-width: 380px; } label { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.6px; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; } input { width: 100%; padding: 12px 14px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--radius); /* 16px minimum — anything smaller makes iOS Safari zoom the page on focus */ font-size: 16px; background: #fff; font-family: inherit; color: var(--ink); } input:focus { outline: none; border-color: var(--ink); } .field-row { display: flex; gap: 12px; } button[type="submit"] { width: 100%; height: 48px; background: var(--ink); color: #fff; border: none; border-radius: var(--radius); font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit; } button[type="submit"]:hover { opacity: 0.85; } .note { font-size: 13px; color: var(--faint); margin-top: 26px; line-height: 1.65; } .note a { color: var(--muted); } /* ---- Footer ---- */ footer { border-top: 1px solid var(--line); padding: 48px 0 40px; } .foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; } .foot-col h5 { font-size: 10px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; } .foot-col a, .foot-col span { display: block; font-size: 14px; color: var(--muted); text-decoration: none; margin-bottom: 7px; } .foot-col a.brand { display: flex; font-size: 19px; color: var(--ink); } .foot-col a.brand .dot { flex: 0 0 auto; } .foot-col a:hover { color: var(--ink); } .foot-bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--faint); } @media (max-width: 760px) { .nav-links { gap: 16px; font-size: 13px; } .hero { padding: 56px 0 48px; } /* Longhand only — a `padding` shorthand here would wipe out the vertical padding of any element that is both .hero and .wrap. */ .wrap { padding-left: 20px; padding-right: 20px; } .field-row { flex-direction: column; gap: 0; } } /* Phones: nav stacks under the logo rather than disappearing, so every page stays reachable without a hamburger menu. */ @media (max-width: 560px) { /* Keep the device near full scale on phones so the rows inside stay comfortably tappable (a smaller scale shrinks them below 44px). */ .device { --s: 0.62; } .grid-3 { grid-template-columns: 1fr; } /* Single-row nav. The header CTA is dropped here because the hero's own download buttons sit directly beneath it — two rows of chrome cost ~60px of a phone's first screen. */ .nav { flex-wrap: nowrap; padding: 10px 20px; } .nav-right { width: auto; } .nav .btn-sm { display: none; } .nav-links { gap: 18px; font-size: 14px; } .cta-row .btn { width: 100%; } .phone { width: 100%; } .amounts .amount { flex: 1 1 calc(50% - 5px); } .foot-grid { gap: 26px; } } /* ================================================================ Touch & small-screen hardening ================================================================ */ /* Hover styling only where a real pointer exists. On touch, :hover sticks after a tap and leaves rows looking permanently highlighted. */ @media (hover: none) { .row:hover { background: transparent; } .nav-links a:hover { color: var(--muted); } .give-amounts a:hover { background: transparent; color: var(--ink); border-color: var(--line); } .give-amounts a.chai:hover { background: transparent; color: var(--blue); border-color: var(--blue); } .method:hover { background: #fff; border-color: var(--line); } .amount:hover { border-color: var(--line); } } /* Softer tap flash than the default translucent black box */ a, button, [role="checkbox"] { -webkit-tap-highlight-color: rgba(37, 99, 235, 0.12); } @media (max-width: 760px) { /* 44px minimum touch target (Apple HIG) for every tappable link */ .nav-links a { display: flex; align-items: center; min-height: 44px; } header .brand { min-height: 44px; } /* No `display` here — .btn is already inline-flex, and setting it again would override the display:none that hides this CTA on phones. */ .nav .btn-sm { white-space: nowrap; min-height: 44px; } .foot-col a { min-height: 44px; display: flex; align-items: center; margin-bottom: 0; } .foot-col a.brand { min-height: 44px; } .row { padding-top: 11px; padding-bottom: 11px; } /* Respect the notch and home indicator on modern iPhones */ .nav { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); } .wrap { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); } footer { padding-bottom: max(40px, env(safe-area-inset-bottom)); } } /* Desktop: let the hero own the first screen. Without a min-height the content bunches into the top ~520px and leaves a dead band above the fold, which reads as both crowded and cut off. Centring inside a viewport-tall block spreads the same content over the full screen. */ @media (min-width: 900px) { /* Homepage only. Sub-page heroes stay compact so their content starts above the fold instead of costing a full screen of scrolling. */ .hero-full { min-height: calc(100vh - 160px); /* nav (78) + marquee (79) */ min-height: calc(100svh - 160px); /* honours mobile browser chrome */ display: flex; flex-direction: column; justify-content: center; /* shrink-wrap children: without this the pill and button row stretch to the full container width */ align-items: center; padding-top: 48px; padding-bottom: 48px; } .hero .sub { margin-bottom: 40px; } .hero h1, .hero .sub, .hero .fine { max-width: 900px; } } /* Large desktop — more room to breathe */ @media (min-width: 1440px) { :root { --max: 1160px; } section { padding: 104px 0; } /* Vertical padding only — the min-height rule above owns the first screen */ .hero { padding-top: 56px; padding-bottom: 56px; } .dark-section { padding: 112px 0; } } /* Very narrow phones (iPhone SE and similar) */ @media (max-width: 380px) { .nav-links { gap: 12px; font-size: 13px; } .nav .btn-sm { padding: 9px 13px; font-size: 13px; } h1 { font-size: clamp(30px, 9vw, 38px); } } /* Landscape on a phone: the sticky header eats too much height */ @media (max-height: 460px) and (orientation: landscape) { header { position: static; } .hero { padding: 32px 0 28px; } .device { --s: 0.42; } } /* Respect users who ask for less motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .marquee-track { animation: none; justify-content: center; flex-wrap: wrap; } *, *::before, *::after { transition-duration: 0.01ms !important; } /* No page-transition or reveal motion — content simply appears */ ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } @supports not (view-transition-name: none) { main { animation: none !important; } } .reveal { opacity: 1 !important; transform: none !important; } } /* ================================================================ Print — strip chrome and motion, keep the content legible ================================================================ */ @media print { header, footer, .marquee, .device, .skip, .cta-row { display: none !important; } .reveal { opacity: 1 !important; transform: none !important; } body { background: #fff; color: #000; } .dark-section { background: #fff !important; color: #000 !important; padding: 24px 0; } .dark-section .sub, .feature-list li { color: #000 !important; } .feature-list li .tick { background: #ddd; color: #000; } section { padding: 18px 0 !important; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; } } /* Interim notice for store links that aren't live yet. Remove along with the data-pending attributes once the URLs exist. */ .pending-note { margin-top: 16px; font-size: 14px; color: var(--muted); } .pending-note[hidden] { display: none; } .pending-note a { color: var(--blue); } /* ================================================================ Official-style app store badges ================================================================ */ .store-badges { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .store-badge { display: inline-flex; align-items: center; gap: 11px; height: 56px; padding: 0 18px 0 16px; background: transparent; border: 1.5px solid #0a0a0a; border-radius: 10px; text-decoration: none; color: #0a0a0a; transition: background 0.15s ease, transform 0.1s ease; } .store-badge:hover { background: rgba(10, 10, 10, 0.05); } .store-badge:active { transform: scale(0.985); } .store-badge svg { flex: none; display: block; } .store-badge .txt { display: flex; flex-direction: column; line-height: 1.05; text-align: left; } .store-badge .small { font-size: 11px; font-weight: 500; letter-spacing: 0.2px; text-transform: uppercase; } .store-badge .big { font-size: 19px; font-weight: 600; letter-spacing: -0.3px; } @media (max-width: 560px) { /* Equal-width stacked badges. The width is needed because the hero is a shrink-wrapping flex column. */ .store-badges { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; } .store-badge { justify-content: flex-start; height: 58px; padding-left: 26px; } .hero-full .cta-row { width: 100%; max-width: 320px; } .hero-full .cta-row .btn { width: 100%; } } /* ================================================================ Pinned hero: the copy scrolls away first, leaving the blank background and the מצוה watermark, then the page moves on. ================================================================ */ :root { --nav-h: 64px; } @media (min-width: 900px) { :root { --nav-h: 78px; } } .hero-stage { position: relative; } .hero-inner { display: contents; } @media (prefers-reduced-motion: no-preference) { /* Extra height = how long the hero stays pinned. The copy fades over the first ~55% of a viewport, so the remainder is the blank-background beat before the next section arrives. */ .hero-stage { height: calc(100svh - var(--nav-h) + 90vh); } .hero-stage .hero-full { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); min-height: 0; } /* Becomes a real box so it can be moved and faded as one unit */ .hero-inner { display: flex; flex-direction: column; align-items: center; width: 100%; will-change: opacity, transform; } } /* ================================================================ First screen — composition One centred stack with deliberate rhythm. Sizes step down cleanly: eyebrow → headline → sub → primary action → secondary → footnote. ================================================================ */ .hero-full { justify-content: center; padding-top: 0; padding-bottom: 0; } .hero-full .pill { margin-bottom: 0; } .hero-full h1 { margin: 22px 0 0; max-width: 15ch; /* keeps the headline to two balanced lines */ text-wrap: balance; } .hero-full .sub { margin: 18px auto 0; max-width: 46ch; /* wraps to two lines instead of one long line */ font-size: 19px; line-height: 1.5; } .hero-full .store-badges { margin-top: 36px; } /* Secondary action reads as a link, not a third competing button */ .hero-see { display: inline-flex; align-items: center; gap: 7px; margin-top: 22px; font-size: 15px; font-weight: 500; color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .hero-see:hover { color: var(--ink); border-bottom-color: var(--ink); } .hero-see .arrow { transition: transform 0.15s ease; } .hero-see:hover .arrow { transform: translateY(2px); } .hero-full .fine { margin-top: 30px; } @media (max-width: 560px) { .hero-full h1 { max-width: 14ch; } .hero-full .sub { font-size: 17px; max-width: 34ch; margin-top: 16px; } .hero-full .store-badges { margin-top: 28px; } .hero-full .fine { margin-top: 24px; font-size: 12.5px; } } /* Watermark starts held back so the headline reads cleanly; app.js brings it forward as the copy scrolls away. This value is also the reduced-motion resting state (JS skips the effect entirely there). */ .hero-full .watermark { opacity: 0.42; } /* ================================================================ Typography — EB Garamond (heritage book serif) + Karla (grotesque) Replaces the Inter/Fraunces pairing. Garamond runs small on the body, so display sizes step up and tracking loosens. ================================================================ */ body { font-family: Karla, "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0; } h1, h2, h3, h4, h5, .phone-title, .next-card .v, .give h3, .prize .t, .alloc-row .t, .stat .n { font-family: "EB Garamond", Georgia, "Times New Roman", serif; font-weight: 600; } h1 { font-size: clamp(42px, 6.4vw, 78px); letter-spacing: -0.5px; line-height: 1.02; } h2 { font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -0.3px; line-height: 1.08; } h3 { font-size: 21px; letter-spacing: -0.2px; } /* Accent words inside a heading: italic Garamond rather than a second family */ .serif { font-family: "EB Garamond", Georgia, serif; font-style: italic; font-weight: 500; } /* UI text keeps the grotesque */ .pill, .eyebrow, .btn, .nav-links a, .brand, .field-label, .store-badge, .marquee-item, .mode-tag, .group-label, .phone-meta { font-family: Karla, "Helvetica Neue", Helvetica, Arial, sans-serif; } .brand { font-weight: 700; letter-spacing: -0.2px; } .sub, .hero-full .sub { font-size: 19px; line-height: 1.6; } .watermark { font-family: "EB Garamond", Georgia, serif; } /* ---- First-screen rhythm: more air around the headline block ---- */ .hero-full h1 { margin-top: 30px; } .hero-full .sub { margin-top: 26px; } .hero-full .store-badges { margin-top: 46px; } .hero-full .hero-see { margin-top: 26px; } .hero-full .fine { margin-top: 34px; } @media (max-width: 560px) { .hero-full h1 { margin-top: 24px; } .hero-full .sub { margin-top: 20px; font-size: 17.5px; } .hero-full .store-badges { margin-top: 36px; } .hero-full .hero-see { margin-top: 22px; } .hero-full .fine { margin-top: 26px; } } /* More air between the headline block and the download buttons */ .hero-full .store-badges { margin-top: 64px; } @media (max-width: 560px) { .hero-full .store-badges { margin-top: 50px; } } /* ---- Footer social link ---- */ .foot-col a.social { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--muted); } .foot-col a.social:hover { color: var(--ink); } .foot-col a.social svg { flex: none; } /* The "why" heading sits on its own centred measure */ .why-block h2 { max-width: 22ch; margin-left: auto; margin-right: auto; } /* ================================================================ Tzedaka & transparency ================================================================ */ .flow { display: grid; gap: 14px; margin: 28px 0 8px; } @media (min-width: 780px) { .flow { grid-template-columns: repeat(3, 1fr); } } .flow-step { background: #fff; border: 1px solid var(--line); border-radius: 15px; padding: 22px 20px; text-align: center; } .flow-step .k { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--blue); margin-bottom: 9px; } .flow-step .t { font-size: 17px; font-weight: 600; margin-bottom: 5px; } .flow-step .d { font-size: 14px; color: var(--muted); line-height: 1.5; } /* Ledger */ .ledger-wrap { overflow-x: auto; margin: 22px 0 10px; -webkit-overflow-scrolling: touch; } table.ledger { width: 100%; border-collapse: collapse; min-width: 560px; background: #fff; border: 1px solid var(--line); border-radius: 14px; } table.ledger th, table.ledger td { padding: 13px 16px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--line); } table.ledger th { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); white-space: nowrap; } table.ledger tr:last-child td { border-bottom: none; } table.ledger td.amt { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .ledger-empty { background: #fff; border: 1px dashed #cfd5df; border-radius: 14px; padding: 34px 24px; text-align: center; color: var(--muted); font-size: 15px; } .ledger-empty strong { display: block; color: var(--ink); font-size: 17px; margin-bottom: 6px; } /* Brutally honest list */ .honest { margin: 22px 0 8px; } .honest-row { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line); text-align: left; } .honest-row:last-child { border-bottom: none; } .honest-row .mark { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px; } .honest-row .mark.yes { background: #e7f3ec; color: #1a7f43; } .honest-row .mark.no { background: #fdeaea; color: #b42318; } .honest-row .t { font-size: 16px; font-weight: 600; margin-bottom: 3px; } .honest-row .d { font-size: 14.5px; color: var(--muted); line-height: 1.55; } /* Board */ .board { display: grid; gap: 16px; margin: 24px 0 8px; } .board-member { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px 24px; text-align: left; display: flex; gap: 18px; align-items: flex-start; } .board-member .avatar { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--dark); color: #fff; display: flex; align-items: center; justify-content: center; font-family: "EB Garamond", Georgia, serif; font-size: 21px; font-weight: 600; } .board-member .name { font-family: "EB Garamond", Georgia, serif; font-size: 21px; font-weight: 600; } .board-member .role { font-size: 13px; color: var(--blue); font-weight: 600; margin: 2px 0 8px; } .board-member ul { list-style: none; margin: 0; padding: 0; } .board-member li { font-size: 14.5px; color: var(--muted); line-height: 1.55; padding-left: 15px; position: relative; } .board-member li::before { content: "·"; position: absolute; left: 3px; color: var(--faint); font-weight: 700; } @media (max-width: 560px) { .board-member { flex-direction: column; gap: 12px; } table.ledger th, table.ledger td { padding: 11px 13px; } } /* ================================================================ Multilingual — Hebrew / Yiddish (RTL) support Frank Ruhl Libre is the classic Hebrew book face (pairs with Garamond); Heebo carries the UI text. ================================================================ */ :root[lang="he"], :root[lang="yi"] { --font-body: Heebo, "Noto Sans Hebrew", sans-serif; } :root[lang="he"] body, :root[lang="yi"] body { font-family: Heebo, "Noto Sans Hebrew", "Helvetica Neue", sans-serif; } :root[lang="he"] h1, :root[lang="he"] h2, :root[lang="he"] h3, :root[lang="he"] h4, :root[lang="he"] h5, :root[lang="he"] .serif, :root[lang="yi"] h1, :root[lang="yi"] h2, :root[lang="yi"] h3, :root[lang="yi"] h4, :root[lang="yi"] h5, :root[lang="yi"] .serif { font-family: "Frank Ruhl Libre", "EB Garamond", Georgia, serif; font-style: normal; letter-spacing: 0; line-height: 1.25; } /* Hebrew has no italic tradition — the accent word gets weight instead */ :root[lang="he"] .serif, :root[lang="yi"] .serif { font-weight: 700; } /* ---- Direction flips ---- */ [dir="rtl"] .cta-row.left { justify-content: flex-end; } [dir="rtl"] .honest-row, [dir="rtl"] .alloc-row, [dir="rtl"] .feature-list li, [dir="rtl"] .board-member, [dir="rtl"] .clean li, [dir="rtl"] .callout, [dir="rtl"] .note, [dir="rtl"] .showcase .copy { text-align: right; } [dir="rtl"] .clean li { padding-left: 0; padding-right: 30px; } [dir="rtl"] .clean li::before { left: auto; right: 4px; } [dir="rtl"] .board-member li { padding-left: 0; padding-right: 15px; } [dir="rtl"] .board-member li::before { left: auto; right: 3px; } [dir="rtl"] table.ledger th, [dir="rtl"] table.ledger td { text-align: right; } [dir="rtl"] .store-badge .txt { text-align: right; } [dir="rtl"] .device, [dir="rtl"] .marquee-track { direction: ltr; } /* ---- Language switcher ---- */ .lang-switch { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 2px; gap: 2px; } .lang-switch button { border: none; background: transparent; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 11px; border-radius: 999px; min-height: 32px; line-height: 1; transition: background 0.15s ease, color 0.15s ease; } .lang-switch button[aria-pressed="true"] { background: var(--ink); color: #fff; } .lang-switch button:hover[aria-pressed="false"] { color: var(--ink); } /* Swap feels instant rather than jumpy */ .lang-fade { transition: opacity 0.14s ease; } .lang-fade.swapping { opacity: 0; } @media (prefers-reduced-motion: reduce) { .lang-fade { transition: none; } } @media (max-width: 560px) { .lang-switch button { padding: 6px 9px; font-size: 11.5px; } } /* ================================================================ Pinned first screen: hero + mitzvos marquee travel together, so the marquee is on screen from the very first paint and stays put while the copy scrolls away. ================================================================ */ .hero-pin { position: relative; } @media (prefers-reduced-motion: no-preference) { .hero-pin { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; } /* the hero takes the space left over above the marquee */ .hero-stage .hero-full { position: static; flex: 1 1 auto; min-height: 0; height: auto; } .hero-pin .marquee { flex: none; } } /* A touch taller and more legible */ .marquee { padding: 27px 0; } .marquee-item { font-size: 13px; letter-spacing: 1.7px; } /* ---- Audit fixes ---- */ /* #1a7f43 on #e7f3ec measured 4.43:1 — just under AA. Darkened to clear it. */ .honest-row .mark.yes { background: #e7f3ec; color: #14663a; } .honest-row .mark.no { background: #fdeaea; color: #a3160f; } /* Language buttons must meet the same 44px touch target as the rest of the nav */ @media (max-width: 760px) { .lang-switch button { min-height: 44px; padding: 0 12px; } .lang-switch { padding: 0; } } /* Desktop target sizes: WCAG 2.5.8 wants 24×24 CSS px minimum. Nav and footer links were 22px tall. Scoped to >=761px on purpose — unscoped, these land after the mobile block and would silently undo its 44px touch targets. */ @media (min-width: 761px) { .nav-links a { display: inline-flex; align-items: center; min-height: 32px; } .foot-col a { display: inline-flex; align-items: center; min-height: 30px; } .foot-col a.social { min-height: 32px; } header .brand { min-height: 32px; } .hero-see { min-height: 32px; } .lang-switch button { min-height: 34px; } } @media (max-width: 760px) { .hero-see { min-height: 44px; } } /* ================================================================ Mobile nav with the language switcher Brand + switcher on row one, page links on row two. `display:contents` dissolves .nav-right so its children become direct flex items of .nav and can be arranged independently — without it the switcher is stuck to the links and the row overflows the viewport. ================================================================ */ @media (max-width: 640px) { .nav { flex-wrap: wrap; row-gap: 10px; padding: 12px 20px; } .nav-right { display: contents; } .lang-switch { margin-left: auto; } .nav-links { order: 3; width: 100%; justify-content: space-between; gap: 8px; font-size: 14px; } .lang-switch button { padding: 0 10px; font-size: 12px; min-height: 40px; } } /* RTL: the switcher hugs the other edge */ [dir="rtl"] .lang-switch { margin-left: 0; margin-right: auto; } /* Checkout status / error message under the primary donate button */ .pay-status { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--muted); background: #f7f9fc; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; text-align: left; } .pay-status[hidden] { display: none; } .pay-primary[data-busy="1"] { opacity: 0.6; cursor: progress; } .ledger-net { font-size: 12px; font-weight: 400; color: var(--faint); margin-top: 2px; } table.ledger caption { text-align: left; } /* ================================================================ Language control Pill row on wide screens; native select on phones. Six languages in a pill row needs ~318px, which overflows a 320px viewport. ================================================================ */ .lang-select { display: none; } @media (max-width: 640px) { .lang-switch { display: none; } .lang-select { display: inline-block; margin-left: auto; min-height: 40px; padding: 0 30px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234b5563' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink); -webkit-appearance: none; appearance: none; max-width: 44vw; } [dir="rtl"] .lang-select { margin-left: 0; margin-right: auto; padding: 0 12px 0 30px; background-position: left 12px center; } } /* ================================================================ Showcase fit The demo section was 977px tall in a 900px viewport. Scale the CONTENT to the available height — the dark band still spans full width, only the copy and phone shrink. ================================================================ */ @media (min-width: 900px) { .dark-section { padding: 72px 0; } .showcase { gap: 56px; } .showcase .device { --s: 0.78; } } /* Typical laptop (900px tall and under) */ @media (min-width: 900px) and (max-height: 940px) { .dark-section { padding: 56px 0; } .showcase { gap: 52px; } .showcase .device { --s: 0.80; } .showcase h2 { font-size: clamp(28px, 2.8vw, 40px); } .showcase .sub { font-size: 16.5px; margin-bottom: 0; } .feature-list { margin: 18px 0 22px; } .feature-list li { padding: 7px 0; font-size: 14.5px; line-height: 1.45; } .showcase .cta-row .btn { height: 42px; } } /* Short laptops / large phones in landscape */ @media (min-width: 900px) and (max-height: 800px) { .dark-section { padding: 40px 0; } .showcase .device { --s: 0.62; } .showcase h2 { font-size: 30px; } .feature-list li { padding: 5px 0; font-size: 14px; } }