/* ========================================================================= mt28 — component styles. Phone-first; desktop enhancements via min-width. Depends on tokens in style.css. ========================================================================= */ /* ---------- Buttons ---------- */ .btn{ display:inline-block;font-family:var(--mt-font-body);font-weight:600;font-size:15px; line-height:1;text-decoration:none;cursor:pointer; padding:14px 26px;border-radius:999px;border:2px solid transparent; transition:transform var(--mt-dur) var(--mt-ease), background-color var(--mt-dur) var(--mt-ease), color var(--mt-dur) var(--mt-ease); } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0) scale(.98)} /* TASTE-STANDARD: tactile press feedback */ .btn-primary{background:var(--mt-teal);color:#fff} .btn-primary:hover{background:#174a4a} .btn-accent{background:var(--mt-gold);color:#1a1205} .btn-accent:hover{background:#b9882f} .btn-ghost{background:transparent;border-color:var(--mt-teal);color:var(--mt-teal)} .btn-ghost:hover{background:var(--mt-teal);color:#fff} .btn-light{background:#fff;color:var(--mt-teal)} /* high-contrast action on dark backdrops (hero) */ .btn-light:hover{background:#eef4f1} .eyebrow,.section__kicker{font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--mt-teal);margin:0 0 10px} /* ---------- Bilingual: FI default, EN via the header toggle (client-side, no plugin) ---------- Every translatable string ships in BOTH languages as .t-fi / .t-en variants. The ACTIVE language is the value — set pre-paint by an inline script and toggled by initLang() (main.js), persisted in localStorage. Only the ROOT gate matches, so a nested lang="en" (footer summary, scripture) is never hidden. We only ever HIDE the inactive variant, so the visible one keeps its natural display (block/inline/flex) with no display:revert guesswork. No-JS fallback: html defaults to lang="fi" → the site reads fully in Finnish. */ html[lang="en"] .t-fi{display:none !important} html[lang="fi"] .t-en{display:none !important} .mt28-lang a{cursor:pointer} /* ---------- Header ---------- */ .site-header{ position:sticky;top:0;z-index:100; background:rgba(255,255,255,.88); backdrop-filter:saturate(140%) blur(10px); -webkit-backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid rgba(0,0,0,.06); transition:box-shadow var(--mt-dur) var(--mt-ease), background-color var(--mt-dur) var(--mt-ease); } .site-header.is-scrolled{box-shadow:0 6px 24px rgba(var(--mt-shadow)/.10);background:rgba(255,255,255,.96)} .site-header__inner{ display:flex;align-items:center;justify-content:space-between;gap:16px; min-height:var(--mt-header-h); } .mt28-brand{display:inline-flex;align-items:center;color:var(--mt-teal);text-decoration:none} /* Logo legibility (user, 2026-06-03: kept reading "unrecognizably small" at 46px). The REAL fix was in logo.svg — its viewBox was cropped to the artwork (was ~44% empty padding) and the embedded "mt28" wordmark enlarged — so a given px now shows a far bigger, readable mark. Header bar bumped to 80px to give a 56px logo room to breathe. */ .site-header__brand{width:56px;height:56px} .site-header__brand svg{width:56px;height:56px} .mt28-logo-fallback{font-family:var(--mt-font-head);font-size:22px;color:var(--mt-teal)} /* Desktop logo size (user, 2026-06-03: "looks right on phone but on computer it's still tiny as shit"). A fixed 56px reads fine on a ~390px phone but is lost in the wide desktop bar, and the wordmark baked into the icon renders ~12px → illegible. Enlarge on desktop ONLY (phone untouched) and grow the bar via --mt-header-h so the home-hero bleed/overlay math stays in sync. */ @media(min-width:768px){ :root{--mt-header-h:104px} .site-header__brand,.site-header__brand svg{width:92px;height:92px} } .site-header__actions{display:flex;align-items:center;gap:14px} .mt28-lang{font-size:13px;font-weight:600;color:var(--mt-muted);display:flex;align-items:center;gap:6px} .mt28-lang a{color:var(--mt-muted);text-decoration:none} .mt28-lang a.is-active{color:var(--mt-teal)} /* CTA hidden on the smallest screens to keep the bar clean; back at >=520px */ .mt28-cta{display:none} @media(min-width:520px){.mt28-cta{display:inline-block;padding:10px 18px;font-size:14px}} /* ---------- Primary nav (mobile drawer by default) ---------- */ .mt28-nav{ position:fixed;inset:var(--mt-header-h) 0 auto 0; background:#fff;border-bottom:1px solid rgba(0,0,0,.08); padding:10px var(--mt-gutter) 22px; transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none; transition:opacity var(--mt-dur) var(--mt-ease), transform var(--mt-dur) var(--mt-ease), visibility var(--mt-dur); box-shadow:0 18px 40px rgba(0,0,0,.10); } .mt28-nav.is-open{transform:none;opacity:1;visibility:visible;pointer-events:auto} .mt28-nav__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} .mt28-nav__list a{ display:block;padding:13px 6px;font-family:var(--mt-font-head);font-size:19px; color:var(--mt-ink);text-decoration:none;border-bottom:1px solid #f0ece4; } .mt28-nav__list a:hover,.mt28-nav__list .current-menu-item>a{color:var(--mt-teal)} /* Hamburger */ .mt28-burger{ width:42px;height:42px;border:0;background:transparent;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;padding:0; } .mt28-burger__box{position:relative;width:24px;height:2px} .mt28-burger__line,.mt28-burger__line::before,.mt28-burger__line::after{ position:absolute;left:0;width:24px;height:2px;background:var(--mt-ink);border-radius:2px; transition:transform var(--mt-dur) var(--mt-ease), opacity .2s linear; } .mt28-burger__line{top:0} .mt28-burger__line::before{content:"";top:-7px} .mt28-burger__line::after{content:"";top:7px} .mt28-burger[aria-expanded="true"] .mt28-burger__line{background:transparent} .mt28-burger[aria-expanded="true"] .mt28-burger__line::before{transform:translateY(7px) rotate(45deg)} .mt28-burger[aria-expanded="true"] .mt28-burger__line::after{transform:translateY(-7px) rotate(-45deg)} /* ---------- Desktop nav ---------- */ @media(min-width:880px){ .mt28-burger{display:none} .mt28-nav{ position:static;inset:auto;background:transparent;border:0;box-shadow:none;padding:0; transform:none;opacity:1;visibility:visible;pointer-events:auto;flex:1; } .mt28-nav__list{flex-direction:row;justify-content:center;gap:6px} .mt28-nav__list a{ border-bottom:0;font-family:var(--mt-font-body);font-weight:600;font-size:15px; padding:8px 14px;border-radius:999px; } .mt28-nav__list a:hover{background:var(--mt-sand)} } /* ---------- Header over the full-screen hero (home only) ---------- Floats transparent on the dark hero, snaps to the solid blurred bar on scroll. JS-gated (html.js): with no JS the header stays solid white — a clean fallback. */ html.js body.home .site-header:not(.is-scrolled){ background:transparent;border-color:transparent;box-shadow:none; backdrop-filter:none;-webkit-backdrop-filter:none; } html.js body.home .site-header:not(.is-scrolled) .mt28-brand{color:#fff} html.js body.home .site-header:not(.is-scrolled) .mt28-lang, html.js body.home .site-header:not(.is-scrolled) .mt28-lang a{color:rgba(255,255,255,.78)} html.js body.home .site-header:not(.is-scrolled) .mt28-lang a.is-active{color:#fff} html.js body.home .site-header:not(.is-scrolled) .mt28-burger__line, html.js body.home .site-header:not(.is-scrolled) .mt28-burger__line::before, html.js body.home .site-header:not(.is-scrolled) .mt28-burger__line::after{background:#fff} @media(min-width:880px){ html.js body.home .site-header:not(.is-scrolled) .mt28-nav__list a{color:rgba(255,255,255,.92)} html.js body.home .site-header:not(.is-scrolled) .mt28-nav__list a:hover{background:rgba(255,255,255,.14)} } /* ===================== HERO — full-screen Europe map (signature) ===================== The faceted Europe fills the whole viewport (ref: concentricglobal.org); Finland is the single gold focal point. Copy is overlaid lower-left — asymmetric, so it stays full-screen yet honours SKILL §3 (anti dead-centre). Motion = transform/opacity only, reduced-motion safe. */ .hero--home{ position:relative; min-height:100dvh; /* SKILL §3: dvh, never vh */ display:flex;align-items:flex-end; /* copy anchored to the lower band */ overflow:hidden;isolation:isolate; padding:0 0 clamp(56px,11vh,116px); color:#fff; background:radial-gradient(128% 94% at 72% 4%, #18524a 0%, #0e3631 44%, #07201d 100%); margin-top:calc(-1 * var(--mt-header-h)); /* bleed the map up under the transparent header */ } /* --- background stack: aurora · faceted map · scrim --- */ .hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none} .hero__map{position:absolute;inset:0;overflow:hidden} .hero__map .eu-map{ /* VARIANT A — FULL-BLEED COVER: the faceted Europe overfills the viewport (no dead space); far edges crop. Finland (69.3%/19.7% of the art) sits upper-centre. Pan via the translate() below. */ position:absolute;left:50%;top:50%; width:max(120vw, calc(118dvh * 0.898));height:auto;max-width:none;max-height:none;overflow:visible; transform:translate(-59%,-44%); /* -59 (was -55): the solid silhouette reaches Finland's true east coast (the old eroded facets stopped ~18px short), so nudge left to keep Finland uncropped on mobile. Desktop uses the @media override below — unaffected. */ filter:drop-shadow(0 24px 58px rgba(0,0,0,.46)); } .eu-layer{will-change:transform} .eu-land path,.eu-fin path{stroke-linejoin:round;shape-rendering:geometricPrecision} /* Finland highlight — the gold bloom behind it breathes slowly. */ .eu-finglow{transform-box:fill-box;transform-origin:center;animation:mt-fin-pulse 7s var(--mt-ease) infinite} @keyframes mt-fin-pulse{0%,100%{opacity:.68}50%{opacity:1}} /* Aurora — a low Nordic light drifting behind the map (parallax depth + its own slow drift). */ .hero__aurora{ position:absolute;top:3%;left:50%;width:min(92vw,1040px);aspect-ratio:1; margin-left:calc(min(92vw,1040px) * -0.5); /* centre WITHOUT transform (free for its own drift) */ background:radial-gradient(circle at 50% 46%, rgba(147,200,187,.22), rgba(214,168,72,.12) 40%, transparent 66%); filter:blur(30px);border-radius:50%;pointer-events:none; animation:mt-aurora 24s ease-in-out infinite; } @keyframes mt-aurora{0%,100%{transform:translate(0,0) scale(1);opacity:.85}50%{transform:translate(2.5%,2%) scale(1.07);opacity:1}} /* Scrim — darkens the lower-left for legible copy; faint washes top (header) and bottom (cue). */ .hero__scrim{position:absolute;inset:0; background: linear-gradient(to top, rgba(5,24,21,.95) 3%, rgba(5,24,21,.58) 24%, rgba(5,24,21,.12) 42%, transparent 54%), linear-gradient(100deg, rgba(5,24,21,.66) 0%, rgba(5,24,21,.14) 34%, transparent 52%), linear-gradient(to bottom, rgba(5,24,21,.5) 0%, transparent 15%); } /* --- overlaid copy --- */ .hero__inner{position:relative;z-index:2;width:100%} .hero__copy{max-width:560px;min-width:0} .hero--home .eyebrow{color:var(--mt-gold)} .hero--home h1{color:#fff;font-size:clamp(30px,4.6vw,50px);line-height:1.08;letter-spacing:.2px;margin:0 0 .4em; text-shadow:0 2px 30px rgba(0,0,0,.45)} .hero__lede{font-size:clamp(16px,2.2vw,21px);color:rgba(228,237,233,.92);max-width:42ch;margin:0} .hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px} /* --- scroll cue (desktop only; decorative) --- */ .hero__cue{display:none} @media(min-width:880px){ .hero__cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:2; display:flex;justify-content:center;align-items:flex-start; width:26px;height:44px;padding-top:8px;border:1px solid rgba(255,255,255,.38);border-radius:999px; transition:border-color var(--mt-dur) var(--mt-ease)} .hero__cue:hover{border-color:#fff} .hero__cue-line{width:2px;height:8px;border-radius:2px;background:rgba(255,255,255,.85); animation:mt-cue 1.9s var(--mt-ease) infinite} @keyframes mt-cue{0%{transform:translateY(0);opacity:0}30%{opacity:1}80%{transform:translateY(13px);opacity:0}100%{opacity:0}} } /* larger viewports — show the WHOLE of Europe (CONTAIN), not a zoomed crop. Europe (Russia/Turkey removed) is taller than wide (art 0.898), so on a landscape desktop COVER would fill the screen but only show Finland+Scandinavia; CONTAIN fits the entire continent and lets it float on the teal aurora field (the L/R space is intentional atmosphere, not dead letterbox). Finland stays gold upper-right (natural framing). Slight right bias keeps the lower-left copy over clean space. Mobile (base rule, cover, top:50%/-44%) is untouched — it already reads well. */ @media(min-width:880px){ .hero--home{padding-bottom:clamp(72px,10vh,120px)} .hero__map .eu-map{ left:57%;top:50%; width:auto;height:108dvh;max-width:96vw;max-height:none; /* >100dvh crops only the empty Arctic/ Mediterranean SEA bands (8% top / 14% bottom) so the LAND fills the height — all land stays visible (verified clip 0), with breathing room above Finland. left:57% biases the continent into the right two-thirds so the lower-left copy gets clean negative space. Width still ~45% atmosphere = Europe is portrait, unavoidable. */ transform:translate(-50%,-50%); } } /* ---------- Sections ---------- */ .section{padding:64px 0} .section__note{color:var(--mt-muted);max-width:60ch} /* ---------- Mission strip ---------- */ .mission{padding:72px 0;background:var(--mt-paper);position:relative;overflow:clip} /* TASTE-STANDARD: no flat empty sections — quiet ambient depth, no clutter */ .mission::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(58% 64% at 50% 6%, rgba(31,93,93,.06), transparent 72%)} .mission__inner{max-width:900px;margin-inline:auto;text-align:center;position:relative} .mission .section__kicker{display:block;margin-bottom:18px} .mission__statement{ font-family:var(--mt-font-head);font-weight:400; font-size:clamp(23px,3.4vw,35px);line-height:1.3;letter-spacing:.3px; color:var(--mt-ink);margin:0;text-wrap:balance; } @media(min-width:880px){.mission{padding:104px 0}} /* ---------- Support CTA band ---------- */ .cta-band{background:var(--mt-teal);color:#fff;padding:56px 0} .cta-band__inner{display:flex;flex-direction:column;gap:22px;align-items:flex-start} .cta-band h2{color:#fff;margin:0 0 .25em} .cta-band p{color:rgba(255,255,255,.85);margin:0;max-width:48ch} .btn-lg{padding:16px 34px;font-size:16px} @media(min-width:760px){ .cta-band{padding:76px 0} .cta-band__inner{flex-direction:row;align-items:center;justify-content:space-between;gap:48px} .cta-band__text{max-width:none} .cta-band .btn-lg{flex:none} } /* ---------- Page / article ---------- */ .page__header{padding:56px 0 8px;background:var(--mt-sand)} .page__content{padding:40px 0 72px;max-width:720px} /* ---------- Footer ---------- */ .site-footer{background:var(--mt-black);color:var(--mt-sand);padding:58px 0 26px;margin-top:40px} /* logo anchors the top row (spanning); the EN summary + nav share the second baseline → deliberate rhythm */ .site-footer__inner{display:grid;grid-template-columns:1fr;gap:20px} .site-footer__logo{width:64px;height:64px;color:var(--mt-aqua)} .site-footer__logo svg{width:64px;height:64px} .site-footer__tagline{max-width:54ch;color:#bdb6aa;margin:0;font-size:15px;line-height:1.6} .site-footer__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px} .site-footer__list a{color:var(--mt-sand);text-decoration:none;transition:color var(--mt-dur) var(--mt-ease)} .site-footer__list a:hover{color:#fff} .site-footer__legal{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:18px;font-size:13px;color:#8f897d} @media(min-width:760px){ .site-footer__inner{grid-template-columns:1.6fr 1fr;column-gap:48px;row-gap:26px} .site-footer__logo{grid-column:1 / -1} .site-footer__tagline{grid-column:1;grid-row:2} .site-footer__nav{grid-column:2;grid-row:2} } /* ---------- Scroll reveal (progressive enhancement; see main.js) ---------- */ [data-reveal]{opacity:1} .js [data-reveal]{opacity:0;transform:translateY(16px)} .js [data-reveal].is-in{opacity:1;transform:none;transition:opacity .7s var(--mt-ease), transform .7s var(--mt-ease)} /* ---------- Film-grain (TASTE-STANDARD: whisper of paper texture; fixed + inert) ---------- */ .mt-grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.018;mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* ========================================================================= INTERIOR PAGES — shared primitives (About · People · Partners · Support · Contact · Accountability). Phone-first, restrained, DENSITY-2. Extends the tokens in style.css — build every page from these, never fork a stylesheet. ========================================================================= */ /* Page intro band — kicker + title + lede, left-aligned (anti-centre, SKILL §3). */ .page-intro{padding:54px 0 14px;background:var(--mt-sand);position:relative;overflow:clip} .page-intro::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(72% 130% at 92% -12%,rgba(31,93,93,.09),transparent 66%)} .page-intro__inner{position:relative;max-width:820px} /* sentence-headlines (not slogans) read best a touch smaller than the home hero H1 */ .page-intro h1{margin:.08em 0 .36em;font-size:clamp(28px,4.2vw,44px);line-height:1.14} .page-intro .lede{font-size:clamp(17px,2.05vw,21px);line-height:1.55;color:#2f3531;max-width:60ch;margin:0} @media(min-width:880px){.page-intro{padding:72px 0 18px}} /* Sections + heads (uses the existing .section{padding:64px 0}). */ .section--alt{background:linear-gradient(180deg,rgba(152,196,198,.18),rgba(152,196,198,.05))} .section--tight{padding:44px 0} .measure{max-width:680px} .measure-wide{max-width:880px} .section__head{margin:0 0 30px;max-width:760px} .section__head h2{margin:.16em 0 0} .section__lead{color:var(--mt-muted);font-size:clamp(16px,1.8vw,19px);margin:.55em 0 0;max-width:58ch} .prose p{max-width:64ch;color:#222824} .prose p + p{margin-top:1.1em} /* Fact list (definition rows) — sober legitimacy display, NOT feature-cards (anti §7). */ .facts{margin:0;max-width:760px} .fact{display:grid;grid-template-columns:1fr;gap:5px;padding:22px 0;border-top:1px solid rgba(16,21,19,.12)} .fact:last-child{border-bottom:1px solid rgba(16,21,19,.12)} .fact dt{font-family:var(--mt-font-head);font-size:19px;color:var(--mt-ink);margin:0;display:flex;align-items:center} .fact dd{margin:0;color:var(--mt-muted);max-width:56ch} .fact__mark{flex:none;width:7px;height:7px;border-radius:1px;background:var(--mt-gold); transform:rotate(45deg);margin-right:12px} @media(min-width:720px){.fact{grid-template-columns:258px 1fr;gap:28px;align-items:baseline} .fact dt{align-items:baseline}} /* Statement + pull-quote (gold is the rare accent — craft band 4). */ .statement{max-width:880px} .statement__lead{font-family:var(--mt-font-head);font-size:clamp(24px,3.4vw,34px);line-height:1.28; letter-spacing:.3px;color:var(--mt-ink);margin:0 0 .55em;text-wrap:balance} .statement__body{color:#222824;max-width:60ch;margin:0} .pull{margin:30px 0 0;padding:4px 0 4px 26px;border-left:3px solid var(--mt-gold);max-width:62ch} .pull p{font-size:clamp(18px,2.2vw,22px);line-height:1.5;color:var(--mt-ink);margin:0} .pull cite{display:block;margin-top:12px;font-style:normal;font-size:14px;color:var(--mt-muted)} /* People roster (board / staff lockups). */ .roster{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 18px;margin:0} .roster__item{margin:0} /* consistent head-and-shoulders crop + a subtle uniform grade so mismatched source portraits read as one deliberate set (panel craft/trust note) */ .roster__photo{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 22%; border-radius:var(--mt-radius);background:var(--mt-aqua);filter:saturate(.9) contrast(1.02); box-shadow:0 12px 30px rgba(var(--mt-shadow)/.14)} .roster__name{font-family:var(--mt-font-head);font-size:19px;color:var(--mt-ink);margin:14px 0 3px} .roster__role{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-teal);margin:0} @media(min-width:760px){.roster{grid-template-columns:repeat(4,1fr);gap:28px 22px}} /* Arrow text-link · note · inline CTA row. */ .text-link{display:inline-flex;align-items:center;gap:.5em;font-weight:600;color:var(--mt-teal); text-decoration:none;font-size:15px} .text-link::after{content:"→";transition:transform var(--mt-dur) var(--mt-ease)} .text-link:hover::after{transform:translateX(4px)} .note{color:var(--mt-muted);font-size:14px;line-height:1.5} .inline-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px; padding:30px 0 0;border-top:1px solid rgba(16,21,19,.1);margin-top:10px} .inline-cta p{margin:0;font-size:clamp(17px,2vw,20px);font-family:var(--mt-font-head);color:var(--mt-ink)} /* ---------- Giving options (Support page) — calm stacked list, NOT 3 cards (anti §7) ---------- */ .give{max-width:740px} .give__list{margin:24px 0 0} .give__option{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px; padding:20px 22px;background:var(--mt-paper);border:1px solid rgba(16,21,19,.12);border-radius:var(--mt-radius); transition:border-color var(--mt-dur) var(--mt-ease),box-shadow var(--mt-dur) var(--mt-ease)} .give__option:hover{border-color:rgba(31,93,93,.4);box-shadow:0 10px 26px rgba(var(--mt-shadow)/.10)} .give__option + .give__option{margin-top:14px} .give__meta{min-width:0} .give__label{font-family:var(--mt-font-head);font-size:18px;color:var(--mt-ink);margin:0 0 3px} .give__cur{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-teal);margin:0} .give__note{margin:14px 0 0;font-size:13px;color:var(--mt-muted)} .give__permit{margin:22px 0 0;font-size:14px;line-height:1.55;color:var(--mt-muted);max-width:62ch} /* ---------- Forms (Support lead form · Contact form) ---------- */ .form{max-width:600px;margin:0} .form__grid{display:grid;gap:18px} .field{display:flex;flex-direction:column;gap:7px;min-width:0} .field label{font-size:13px;font-weight:600;letter-spacing:.03em;color:var(--mt-ink)} .field__opt{font-weight:400;color:var(--mt-muted);letter-spacing:0} .field input,.field textarea{ width:100%;font-family:var(--mt-font-body);font-size:16px;color:var(--mt-ink); background:var(--mt-paper);border:1px solid rgba(16,21,19,.2);border-radius:10px;padding:13px 14px; transition:border-color var(--mt-dur) var(--mt-ease),box-shadow var(--mt-dur) var(--mt-ease)} .field textarea{min-height:128px;resize:vertical} .field input:focus,.field textarea:focus{border-color:var(--mt-teal);box-shadow:0 0 0 3px rgba(31,93,93,.16)} .field--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* honeypot — bots only */ .form__actions{margin-top:6px} .form__note{margin:14px 0 0;font-size:13px;color:var(--mt-muted)} @media(min-width:600px){.form__grid--split{grid-template-columns:1fr 1fr}} /* ---------- Intro people-rotator (About) ---------- */ .rotate{position:relative;border-radius:var(--mt-radius);overflow:hidden;aspect-ratio:16/9; background:var(--mt-aqua);box-shadow:0 18px 44px rgba(var(--mt-shadow)/.16)} .rotate__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0; transition:opacity 1.2s var(--mt-ease)} .rotate__img.is-active{opacity:1} .figure-caption{margin:12px 2px 0;font-size:13px;color:var(--mt-muted)} /* ---------- Scripture block (the mt28 anchor: Matthew 28) ---------- */ .scripture{background:radial-gradient(120% 130% at 78% -10%,#1a564d 0%,#0e3631 46%,#0a2522 100%);color:#e9f1ed} .scripture__inner{max-width:820px} .scripture .eyebrow{color:var(--mt-gold)} .scripture blockquote{margin:0;padding:4px 0 0 24px;border-left:3px solid var(--mt-gold)} .scripture blockquote p{font-family:var(--mt-font-head);font-size:clamp(20px,2.7vw,29px);line-height:1.42; letter-spacing:.2px;color:#f2f7f4;margin:0} .scripture__en{margin:18px 0 0 24px;max-width:64ch;color:#aecbc4;font-size:15px;line-height:1.6} /* ---------- Mission blocks (4, editorial 2-col) ---------- */ .blocks{display:grid;gap:38px;max-width:920px} .block{display:grid;gap:8px} .block__index{font-family:var(--mt-font-head);font-size:14px;letter-spacing:.1em;color:var(--mt-gold)} .block__title{font-family:var(--mt-font-head);font-size:clamp(20px,2.5vw,25px);color:var(--mt-ink);margin:0} .block__body{color:#222824;margin:0;max-width:64ch} @media(min-width:820px){ .blocks{gap:44px} .block{grid-template-columns:230px 1fr;gap:40px;align-items:start} .block__head{position:sticky;top:calc(var(--mt-header-h) + 18px)} } /* ---------- Photo carousel (click the left/right edge) ---------- */ .carousel{position:relative;border-radius:var(--mt-radius);overflow:hidden;background:var(--mt-black); box-shadow:0 18px 44px rgba(var(--mt-shadow)/.18)} .carousel__viewport{overflow:hidden} .carousel__track{display:flex;transition:transform .6s var(--mt-ease)} .carousel__slide{flex:0 0 100%;aspect-ratio:3/2} .carousel__slide img{width:100%;height:100%;object-fit:cover;display:block} .carousel__nav{position:absolute;top:0;bottom:0;width:24%;max-width:160px;border:0;cursor:pointer; background:transparent;display:flex;align-items:center;padding:0 14px;color:#fff; transition:background-color var(--mt-dur) var(--mt-ease)} .carousel__nav--prev{left:0;justify-content:flex-start; background:linear-gradient(90deg,rgba(8,24,21,.34),transparent)} .carousel__nav--next{right:0;justify-content:flex-end; background:linear-gradient(270deg,rgba(8,24,21,.34),transparent)} .carousel__nav:hover{background-color:rgba(8,24,21,.12)} .carousel__chevron{width:42px;height:42px;border-radius:999px;background:rgba(12,16,15,.5); display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1; backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} .carousel__count{position:absolute;right:14px;bottom:12px;z-index:2;font-size:12px;letter-spacing:.08em; color:#fff;background:rgba(12,16,15,.5);padding:5px 11px;border-radius:999px;backdrop-filter:blur(4px)} .carousel__caption{margin:12px 2px 0;font-size:13px;color:var(--mt-muted)} /* ---------- Accordion (single column, +/- toggle) ---------- */ .accordion{max-width:840px;border-top:1px solid rgba(16,21,19,.14)} .accordion__item{border-bottom:1px solid rgba(16,21,19,.14)} .accordion__trigger{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px; background:none;border:0;cursor:pointer;text-align:left;padding:24px 2px; font-family:var(--mt-font-head);font-size:clamp(19px,2.3vw,24px);color:var(--mt-ink)} .accordion__trigger::after{content:"+";font-size:26px;color:var(--mt-gold);flex:none;line-height:1; transition:transform var(--mt-dur) var(--mt-ease)} .accordion__trigger[aria-expanded="true"]::after{content:"−"} .accordion__trigger:hover{color:var(--mt-teal)} .accordion__panel{padding:2px 2px 28px;max-width:72ch} .accordion__panel[hidden]{display:none} .accordion__panel p{color:#222824} .accordion__panel p + p{margin-top:1em} /* ---------- Responsive video embed ---------- */ .video{position:relative;aspect-ratio:16/9;border-radius:var(--mt-radius);overflow:hidden;margin:20px 0 0; background:radial-gradient(120% 120% at 50% 30%,#18524a,#0c2a27)} .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .video__fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px; color:#dfeae6;font-family:var(--mt-font-head);font-size:16px;letter-spacing:.04em} /* ---------- Tabs (People secondary menu) ---------- */ .tabs__list{display:flex;flex-wrap:wrap;gap:4px 6px;border-bottom:1px solid rgba(16,21,19,.14);margin:0 0 38px} .tabs__tab{appearance:none;background:none;border:0;cursor:pointer;font-family:var(--mt-font-body); font-weight:600;font-size:15px;color:var(--mt-muted);padding:13px 16px;border-bottom:2px solid transparent; margin-bottom:-1px;transition:color var(--mt-dur) var(--mt-ease),border-color var(--mt-dur) var(--mt-ease)} .tabs__tab:hover{color:var(--mt-ink)} .tabs__tab[aria-selected="true"]{color:var(--mt-teal);border-bottom-color:var(--mt-gold)} .tabs__panel[hidden]{display:none} .js .tabs__panel:not([hidden]){animation:mt-tab-in .5s var(--mt-ease) both} @keyframes mt-tab-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .panel-intro{max-width:62ch;color:var(--mt-muted);font-size:clamp(16px,1.8vw,19px);margin:0 0 32px} /* ---------- Staff bios (photo + full bio rows) ---------- */ .bios{display:grid;gap:36px;max-width:920px} .bio{display:grid;gap:16px} .bio__photo{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 22%;border-radius:var(--mt-radius); background:var(--mt-aqua);filter:saturate(.92);box-shadow:0 12px 30px rgba(var(--mt-shadow)/.14)} .bio__name{font-family:var(--mt-font-head);font-size:23px;color:var(--mt-ink);margin:0} .bio__role{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-teal);margin:5px 0 12px} .bio__text{color:#222824;margin:0} .bio__text p{margin:0;max-width:62ch} .bio__text p + p{margin-top:.9em} @media(min-width:760px){.bio{grid-template-columns:260px 1fr;gap:36px;align-items:start} .bio__photo{position:sticky;top:calc(var(--mt-header-h) + 18px)}} /* ---------- Person cards (board · mentors · supporters) — circular avatars unify mixed photos ---------- */ .cards{display:grid;gap:20px;grid-template-columns:1fr} @media(min-width:600px){.cards{grid-template-columns:1fr 1fr}} @media(min-width:980px){.cards--3{grid-template-columns:repeat(3,1fr)}} /* flow variant (supporters): centre the last row so an odd count never leaves a left-aligned orphan */ .cards--flow{display:flex;flex-wrap:wrap;justify-content:center;gap:20px} .cards--flow .pcard{flex:0 1 320px} .pcard{background:var(--mt-paper);border:1px solid rgba(16,21,19,.1);border-radius:var(--mt-radius); padding:24px;display:flex;flex-direction:column;gap:15px} .pcard__top{display:flex;align-items:center;gap:14px} .pcard__avatar{width:60px;height:60px;border-radius:999px;object-fit:cover;object-position:center 22%; background:var(--mt-aqua);flex:none;filter:saturate(.9)} .pcard__mono{width:60px;height:60px;border-radius:999px;flex:none;display:flex;align-items:center;justify-content:center; background:var(--mt-sand);color:var(--mt-teal);font-family:var(--mt-font-head);font-size:19px} .pcard__name{font-family:var(--mt-font-head);font-size:18px;color:var(--mt-ink);margin:0;line-height:1.2} .pcard__role{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mt-teal);margin:3px 0 0} .pcard__quote{margin:0;color:#222824;line-height:1.55} .pcard__quote::before{content:"“";color:var(--mt-gold);font-family:var(--mt-font-head); font-size:22px;line-height:0;margin-right:2px;vertical-align:-2px} .people-more{margin:26px 0 0;color:var(--mt-muted);font-size:14px} /* ---------- Partner logo wall (calm static grid; grayscale → colour on hover) ---------- */ .logos{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin:0} /* grow so each wrapped row fills the width evenly — no centred narrow "orphan" row (panel craft note) */ .logo-cell{flex:1 1 210px;max-width:300px;display:flex;align-items:center;justify-content:center;min-height:122px; background:#fcfcfb;border:1px solid rgba(16,21,19,.09);border-radius:var(--mt-radius);padding:24px 26px; transition:transform var(--mt-dur) var(--mt-ease),box-shadow var(--mt-dur) var(--mt-ease),border-color var(--mt-dur) var(--mt-ease)} .logo-cell:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(var(--mt-shadow)/.12);border-color:rgba(31,93,93,.3)} .logo-cell img{max-height:54px;max-width:150px;width:auto;object-fit:contain; filter:grayscale(1) opacity(.7);transition:filter var(--mt-dur) var(--mt-ease)} .logo-cell:hover img{filter:grayscale(0) opacity(1)} /* ---------- Testimonial feature (Concentric) ---------- */ .quote-feature{max-width:860px} .quote-feature__mark{font-family:var(--mt-font-head);font-size:60px;line-height:.5;color:var(--mt-gold);display:block;margin:0 0 14px} .quote-feature p{font-family:var(--mt-font-head);font-size:clamp(21px,2.8vw,30px);line-height:1.4; letter-spacing:.2px;color:var(--mt-ink);margin:0;text-wrap:pretty} .quote-feature__by{display:flex;align-items:center;gap:14px;margin:26px 0 0} .quote-feature__by img{height:30px;width:auto} .quote-feature__name{font-weight:600;color:var(--mt-ink);margin:0} .quote-feature__role{color:var(--mt-muted);font-size:14px;margin:0}