0xacfba7ce…4082·#25,798,769·view on Etherscan
<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Firstfruits — Charitable Giving on Ethereum</title>
<meta name="description" content="Charitable giving on Ethereum. Stake ETH or rETH into the vault — your principal stays withdrawable, and the Rocket Pool staking yield it earns is routed to causes you choose.">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='%2338a83c'%3E%3Cpath d='M20.5 2.5C21.6 11 17.5 18 11 21.5 10 13 14 6 20.5 2.5Z'/%3E%3Cpath d='M2.2 8.5C7.6 9.8 10.6 14.4 10.9 21.4 5.6 20.1 2.5 15.5 2.2 8.5Z'/%3E%3C/g%3E%3C/svg%3E" type="image/svg+xml">
<meta name="theme-color" id="tc" content="#fcfcfc">
<style>
/* Palette lifted from the production build's Skeleton "cerberus" theme:
neutral surfaces at chroma 0, a single blue primary at hue 258. */
:root{
color-scheme:light;
--s50:oklch(99% 0 0);--s100:oklch(91% 0 0);--s200:oklch(81% 0 0);--s300:oklch(72% 0 0);
--s800:oklch(32% 0 0);--s900:oklch(25% 0 0);--s950:oklch(18% 0 0);
--p400:oklch(63% .19 255.71);--p500:oklch(57% .21 258.29);
--bg:oklch(96.5% 0 0);--card:var(--s50);--sunk:oklch(93.5% 0 0);--line:oklch(87% 0 0);
--fg:oklch(18% 0 0);--mut:oklch(45% 0 0);--pri:var(--p500);
--k:oklch(18% 0 0);--kf:#fff;--kh:oklch(30% 0 0);
--good:oklch(52% .16 149);--bad:oklch(55% .21 25);
--shadow:0 1px 2px #0000000a,0 4px 16px #0000000d;
--r:.75rem;--r-lg:1rem;
}
.d{
color-scheme:dark;
--bg:oklch(13% 0 0);--card:oklch(17.5% 0 0);--sunk:oklch(22.5% 0 0);--line:oklch(29% 0 0);
--fg:oklch(97% 0 0);--mut:oklch(70% 0 0);--pri:var(--p400);
--k:oklch(97% 0 0);--kf:oklch(13% 0 0);--kh:oklch(85% 0 0);
--good:oklch(75% .16 149);--bad:oklch(70% .18 25);
--shadow:0 1px 2px #00000059,0 12px 32px #0000004d;
}
*{box-sizing:border-box}
:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif;
line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,p{margin:0}
/* Full bleed with generous gutters, as the hosted build does (lg:px-18).
A centred max-width column was the single thing that made this page read
cramped next to it: the hero has to be able to breathe. */
.wrap{padding:0 1rem}
@media(min-width:640px){.wrap{padding:0 1.5rem}}
@media(min-width:1024px){.wrap{padding:0 4.5rem}}
.mut{color:var(--mut)}
.hide{display:none!important}
/* --------------------------------------------------------------- app bar */
.bar{position:sticky;top:0;z-index:20;background:color-mix(in oklab,var(--sunk) 90%,transparent);
backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar .wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;height:4.25rem}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;font-size:1.125rem;font-weight:600}
.brand svg{width:2rem;height:2rem;flex:0 0 auto}
.nav{display:none;justify-content:center;gap:1.75rem}
@media(min-width:768px){.nav{display:flex}}
.nav a{font-size:.875rem;text-decoration:none;opacity:.75;padding:.4rem 0;
display:inline-flex;align-items:center;min-height:1.75rem;
border-bottom:2px solid transparent;transition:opacity .15s,border-color .15s}
.nav a:hover{opacity:1;border-bottom-color:var(--pri)}
.trail{display:flex;align-items:center;gap:.5rem;justify-self:end;min-width:0}
.chip{display:inline-flex;align-items:center;gap:.5rem;background:var(--card);
border:1px solid var(--line);border-radius:var(--r);padding:.5rem .85rem;font:inherit;
font-size:.875rem;cursor:pointer;color:var(--fg);min-width:0;max-width:min(16rem,42vw);
transition:border-color .15s}
.chip:hover{border-color:var(--pri)}
.chip b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip .bal{color:var(--mut);font-variant-numeric:tabular-nums}
@media(max-width:560px){.chip .bal{display:none}}
/* A name in the chip is as long as somebody chose to make it. Below this the
bar has no room to spare, so the controls shrink and the name truncates
rather than pushing the page sideways. */
@media(max-width:430px){
.bar .wrap{gap:.45rem;height:3.85rem}
.chip{padding:.4rem .6rem;font-size:.8125rem}
.icon-btn{width:2.35rem;height:2.35rem}
.brand{font-size:1.0625rem;gap:.4rem}
.brand svg{width:1.75rem;height:1.75rem}}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;
border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--fg);
cursor:pointer;transition:border-color .15s,color .15s}
.icon-btn:hover{border-color:var(--pri);color:var(--pri)}
/* ---------------------------------------------------------------- pieces */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:var(--shadow)}
.badge{display:inline-flex;align-items:center;gap:.75rem;background:var(--sunk);
border-radius:999px;padding:.4rem 1.15rem .4rem .4rem;font-weight:600}
.badge svg{width:2rem;height:2rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
background:var(--sunk);color:var(--fg);border:1px solid transparent;border-radius:var(--r);
padding:.65rem 1.1rem;font:inherit;font-weight:500;cursor:pointer;text-decoration:none;
white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.btn:hover:not(:disabled){border-color:var(--line);background:color-mix(in oklab,var(--sunk) 82%,var(--fg) 8%)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-lg{padding:.9rem 1.6rem;font-size:1.0625rem}
.btn-block{width:100%}
.btn-pri{background:var(--k);color:var(--kf)}
.btn-pri:hover:not(:disabled){background:var(--kh);border-color:transparent}
.btn-sm{padding:.4rem .8rem;font-size:.8125rem;font-weight:600}
/* ----------------------------------------------------------------- hero */
.hero{padding:2.5rem 0 3rem}
@media(min-width:1024px){.hero{padding:4.5rem 0 5rem}}
.hero-grid{display:grid;gap:3rem;align-items:center}
@media(min-width:1024px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:4rem}}
h1.big{font-size:2.5rem;line-height:1.08;font-weight:700;letter-spacing:-.025em;margin-top:1.5rem}
@media(min-width:640px){h1.big{font-size:3.25rem}}
@media(min-width:1024px){h1.big{font-size:4rem}}
h1.big .accent{color:var(--pri)}
.lead{margin-top:1.5rem;font-size:1.125rem;color:var(--mut);max-width:38rem}
@media(min-width:640px){.lead{font-size:1.1875rem}}
.ctas{margin-top:2rem;display:flex;flex-direction:column;gap:1rem}
@media(min-width:640px){.ctas{flex-direction:row;flex-wrap:wrap;align-items:center}}
.feats{margin-top:2.75rem;display:grid;gap:1.5rem;font-size:.9375rem}
@media(min-width:640px){.feats{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
.feat{display:flex;align-items:flex-start;gap:.85rem}
.feat .ico{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;
flex:0 0 auto;border-radius:var(--r)}
.feat p{font-weight:600;line-height:1.35}
.feat p+p{margin-top:.15rem;font-weight:400;font-size:.875rem;color:var(--mut)}
.i-blue{background:color-mix(in oklab,oklch(60% .2 258) 13%,transparent);color:oklch(52% .2 258)}
.i-green{background:color-mix(in oklab,oklch(60% .17 149) 13%,transparent);color:oklch(48% .16 149)}
.i-amber{background:color-mix(in oklab,oklch(75% .16 70) 16%,transparent);color:oklch(55% .15 70)}
.d .i-blue{color:oklch(74% .16 258)}
.d .i-green{color:oklch(78% .15 149)}
.d .i-amber{color:oklch(84% .13 70)}
/* -------------------------------------------------------- overview card */
.ov{padding:1.75rem}
.ov-hd{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
border-bottom:1px solid var(--line);padding-bottom:1.1rem}
.ov-hd h2{font-size:1.1875rem;font-weight:600}
.tvl{padding-top:1.25rem}
.tvl .big{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;margin-top:.15rem}
.tvl .big b{font-size:2.25rem;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.tvl .big .sym{font-size:1.375rem;color:var(--mut)}
.tvl .big .usd{font-size:1rem;color:var(--mut);font-variant-numeric:tabular-nums}
.tiles{margin-top:1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.tile{background:var(--sunk);border-radius:var(--r);padding:1.05rem 1.15rem}
.tile span{font-size:.75rem;color:var(--mut)}
.tile b{display:block;margin-top:.3rem;font-size:1.1875rem;font-weight:600;
font-variant-numeric:tabular-nums;overflow-wrap:anywhere;line-height:1.3}
.tile .usd{font-size:.8125rem;font-weight:400;color:var(--mut)}
/* -------------------------------------------------------------- section */
section{padding:0 0 3.5rem}
@media(min-width:1024px){section{padding:0 0 4.5rem}}
.sec-h{font-size:1.625rem;font-weight:600;letter-spacing:-.01em}
.sec-sub{margin-top:.35rem;color:var(--mut);font-size:.9375rem}
/* ---------------------------------------------------------- manage panes */
/* Grid and flex children default to min-width:auto, i.e. min-content. A pane
holding a big number input and a row of nowrap buttons therefore refuses to
go below ~520px and drags the whole document sideways on a phone. Letting
them shrink is what keeps the page one column wide. */
.manage{display:grid;gap:1.25rem;margin-top:1.75rem}
.manage>*,.split-2>*,.hero-grid>*,.cz-grid>*,.kv>*,.foot-grid>*{min-width:0}
.field,.field-row,.field-hd,.tabs,.tabs button,.split,.acts,.act,.act .who{min-width:0}
@media(min-width:1024px){.manage{grid-template-columns:1.15fr .85fr;gap:1.5rem;align-items:start}}
.pane{padding:1.75rem}
.tabs{display:flex;gap:.2rem;background:var(--sunk);padding:.28rem;border-radius:var(--r);margin-bottom:1.25rem}
.tabs button{flex:1;padding:.6rem .3rem;font:inherit;font-size:.75rem;font-weight:600;
text-transform:uppercase;letter-spacing:.06em;border:0;border-radius:calc(var(--r) - .28rem);
background:transparent;color:var(--mut);cursor:pointer;transition:background .15s,color .15s}
.tabs button.on{background:var(--k);color:var(--kf)}
.tabs button:hover:not(.on){color:var(--fg)}
.field{background:var(--sunk);border:1px solid transparent;border-radius:var(--r);
padding:.95rem 1.1rem;margin:.6rem 0;transition:border-color .15s}
.field:hover{border-color:var(--line)}
.field:focus-within{border-color:var(--pri)}
.field-hd{display:flex;justify-content:space-between;align-items:center;gap:.5rem;
font-size:.75rem;color:var(--mut)}
.field-hd .lbl{text-transform:uppercase;letter-spacing:.07em}
.field-row{display:flex;gap:.6rem;align-items:center;margin-top:.5rem}
.field input{flex:1;min-width:0;width:100%;font:inherit;font-size:1.75rem;font-weight:500;
letter-spacing:-.02em;border:0;background:transparent;color:var(--fg);outline:0;padding:0;
font-variant-numeric:tabular-nums}
.field input::placeholder{color:var(--mut);opacity:.4}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
select{appearance:none;-webkit-appearance:none;font:inherit;font-size:.9375rem;font-weight:600;
color:var(--fg);cursor:pointer;border:0;padding:0 1rem 0 0;max-width:9rem;text-overflow:ellipsis;
background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23888'/%3E%3C/svg%3E") no-repeat right center}
option{background:var(--card);color:var(--fg)}
.hint{font-size:.8125rem;color:var(--mut);margin-top:.65rem;line-height:1.6}
.tin{width:100%;padding:.7rem .85rem;font:inherit;font-size:.9375rem;border:1px solid var(--line);
border-radius:var(--r);background:var(--sunk);color:var(--fg);outline:0;transition:border-color .15s}
.tin:focus{border-color:var(--pri)}
.rowline{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
padding:.55rem 0;font-size:.9375rem;color:var(--mut);border-bottom:1px solid var(--line)}
.rowline:last-child{border-bottom:0}
.rowline b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.split{display:flex;gap:.6rem;align-items:center;margin:.45rem 0}
/* A <select> is as wide as its longest option, and cause names are chosen by
strangers. Basis zero plus min-width zero lets it take the row's leftovers
instead of setting the row's width. */
.split select{flex:1 1 0;min-width:0;width:100%;max-width:none}
.split input{flex:0 0 3.75rem;width:3.75rem;text-align:right;font:inherit;font-size:.9375rem;font-weight:600;
border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--fg);outline:0;
font-variant-numeric:tabular-nums;padding:.1rem 0}
.split input:focus{border-bottom-color:var(--pri)}
.bar-track{position:relative;height:.375rem;border-radius:999px;background:var(--line);
margin:.85rem 0 .3rem;overflow:hidden}
.bar-track>i{position:absolute;inset:0 auto 0 0;background:var(--pri);border-radius:999px;
transition:width .2s}
.acts{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap}
.acts>*{flex:1 1 7rem}
#stat{margin-top:1.1rem;font-size:.875rem;color:var(--mut);text-align:center;overflow-wrap:anywhere}
#stat a{color:var(--pri)}
#stat.err{color:var(--bad)}
#stat.ok{color:var(--good)}
.pos-empty{padding:2rem 0;text-align:center;color:var(--mut);font-size:.9375rem}
/* ---------------------------------------------------------------- steps */
/* Horizontal with arrows on wide screens, exactly as the hosted build does;
stacked rows below that, where a five-across row would be unreadable. */
.steps{margin-top:1.75rem;display:grid;gap:1.5rem}
@media(min-width:640px){.steps{grid-template-columns:repeat(3,1fr);gap:2rem 1.25rem}}
@media(min-width:1100px){.steps{display:flex;align-items:flex-start;gap:.5rem}}
.step{display:flex;align-items:center;gap:1rem}
@media(min-width:640px){.step{flex-direction:column;text-align:center;gap:1rem}}
@media(min-width:1100px){.step{flex:1;min-width:0}}
.step .ico{display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;
flex:0 0 auto;border-radius:var(--r-lg);
background:color-mix(in oklab,var(--pri) 13%,transparent);color:var(--pri)}
@media(min-width:640px){.step .ico{width:5rem;height:5rem}}
.step p{font-size:1rem;font-weight:600}
.step p+p{margin-top:.4rem;font-weight:400;font-size:.875rem;color:var(--mut)}
.arrow{display:none;color:var(--mut);opacity:.45;height:5rem;align-items:center;flex:0 0 1.25rem}
@media(min-width:1100px){.arrow{display:flex}}
/* --------------------------------------------------------------- causes */
.cz-grid{display:grid;gap:1.25rem;margin-top:1.75rem;
grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr))}
.cz{padding:1.35rem;display:flex;flex-direction:column;gap:.85rem}
.cz.off{opacity:.55}
.cz-t{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}
.cz-t h3{font-size:1.0625rem;font-weight:600;overflow-wrap:anywhere;line-height:1.3}
.cz-n{font-size:.75rem;color:var(--mut);font-variant-numeric:tabular-nums;flex:0 0 auto;
padding-top:.15rem}
.cz-rows{margin-top:auto}
.cz .rowline{font-size:.875rem;padding:.4rem 0}
.cz-to{font-size:.8125rem;color:var(--mut);text-decoration:none;align-self:flex-start;
display:inline-flex;align-items:center;min-height:1.75rem;padding:.2rem 0;
border-bottom:1px solid var(--line)}
.cz-to:hover{color:var(--pri)}
.cz .acts{margin-top:.35rem}
/* ---------------------------------------------------- transparency / cta */
.kv{display:grid;gap:1rem;margin-top:1.5rem;
grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.kv div{background:var(--sunk);border-radius:var(--r);padding:1rem 1.15rem}
.kv span{display:block;font-size:.75rem;color:var(--mut)}
.kv a{font-size:.875rem;color:var(--pri);overflow-wrap:anywhere;text-decoration:none;
display:inline-block;min-height:1.75rem;padding-top:.15rem}
.kv a:hover{text-decoration:underline}
.band{background:color-mix(in oklab,var(--pri) 12%,var(--bg))}
.band .wrap{display:flex;flex-direction:column;align-items:center;gap:1.5rem;text-align:center;
padding-top:3rem;padding-bottom:3rem}
@media(min-width:640px){.band .wrap{flex-direction:row;justify-content:space-between;text-align:left}}
.band b{font-size:1.375rem;font-weight:700}
/* --------------------------------------------------------------- footer */
footer{border-top:1px solid var(--line);background:var(--card)}
footer .wrap{padding-top:3rem;padding-bottom:3rem}
.foot-grid{display:grid;gap:2.5rem}
@media(min-width:640px){.foot-grid{grid-template-columns:2fr 1fr 1fr}}
footer h2{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
footer ul{margin:1rem 0 0;padding:0;list-style:none;display:grid;gap:.75rem;font-size:.875rem}
footer ul a{opacity:.8;text-decoration:none;display:inline-flex;align-items:center;min-height:1.75rem}
footer ul a:hover{opacity:1;color:var(--pri)}
.foot-end{margin-top:2.5rem;border-top:1px solid var(--line);padding-top:1.5rem;
display:flex;flex-direction:column;gap:.5rem;font-size:.75rem;color:var(--mut)}
@media(min-width:640px){.foot-end{flex-direction:row;align-items:center;justify-content:space-between}}
/* ------------------------------------------------------------- sparkline */
.spark{margin-top:.9rem;width:100%;height:5.5rem;display:block}
.spark .ln{fill:none;stroke:var(--pri);stroke-width:2;vector-effect:non-scaling-stroke;
stroke-linejoin:round;stroke-linecap:round}
.spark .fl{fill:url(#sparkfill);stroke:none}
.delta{font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--good)}
.delta.dn{color:var(--bad)}
.delta.flat{color:var(--mut)}
/* --------------------------------------------------------------- marquee */
/* The hosted build scrolls its causes; same idea, and it pauses on hover so a
name can actually be read. Duplicated once so the loop has no seam. */
.marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6rem,#000 calc(100% - 6rem),transparent);
mask-image:linear-gradient(90deg,transparent,#000 6rem,#000 calc(100% - 6rem),transparent);
padding:.25rem 0 3rem}
.marq-in{display:flex;gap:1rem;width:max-content;animation:marq 48s linear infinite}
.marq:hover .marq-in,.marq:focus-within .marq-in{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marq-in{animation:none}.marq{overflow-x:auto;mask-image:none;-webkit-mask-image:none}}
.marq-i{display:inline-flex;align-items:center;gap:.6rem;background:var(--sunk);
border:1px solid transparent;border-radius:999px;padding:.6rem 1.1rem;font-size:.875rem;
white-space:nowrap;text-d