trust

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>TRUST FUND ARTISTS</title>

<style>

/* =========================================================
   TRUST FUND ARTISTS
   Art Patronage Institution
   ========================================================= */

:root {
  --paper: #e8e6df;
  --ink: #111111;
  --grey: #777777;
  --line: rgba(17,17,17,.28);
  --white: #f4f3ee;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

/* =========================================================
   HEADER
   ========================================================= */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 58px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  padding: 0 18px;

  z-index: 100;

  background: rgba(232,230,223,.9);
  backdrop-filter: blur(8px);

  border-bottom: 1px solid var(--line);

  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.header-left {
  justify-self: start;
}

.header-center {
  justify-self: center;
  font-weight: bold;
}

.header-right {
  justify-self: end;
  display: flex;
  gap: 18px;
}

header a:hover {
  text-decoration: underline;
}

/* =========================================================
   HERO
   ========================================================= */

.hero {
  min-height: 100vh;

  padding: 100px 18px 20px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  position: relative;
}

.hero-small {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.hero-title {
  font-size: clamp(80px, 15vw, 245px);

  line-height: .73;

  letter-spacing: -.085em;

  font-weight: 400;

  text-transform: uppercase;

  margin-left: -8px;
}

.hero-title span {
  display: block;
}

.hero-title .indent {
  margin-left: 9vw;
}

.hero-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

  border-top: 1px solid var(--line);

  padding-top: 12px;

  font-size: 11px;
  line-height: 1.25;

  text-transform: uppercase;
}

.hero-bottom div:nth-child(2) {
  max-width: 300px;
}

.hero-bottom div:last-child {
  text-align: right;
}

/* =========================================================
   MARQUEE
   ========================================================= */

.marquee {
  overflow: hidden;

  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);

  white-space: nowrap;

  padding: 10px 0;

  font-size: 12px;

  text-transform: uppercase;
}

.marquee-track {
  display: inline-block;

  animation: marquee 20s linear infinite;
}

@keyframes marquee {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }

}

/* =========================================================
   GENERAL SECTION
   ========================================================= */

section {
  border-bottom: 1px solid var(--line);
}

.section-header {
  display: grid;
  grid-template-columns: 80px 1fr;

  padding: 16px 18px;

  border-bottom: 1px solid var(--line);

  font-size: 10px;
  text-transform: uppercase;
}

.section-header span:last-child {
  color: var(--grey);
}

/* =========================================================
   MANIFESTO
   ========================================================= */

.manifesto {
  padding: 120px 18px 150px;
}

.manifesto-text {
  max-width: 1200px;

  font-size: clamp(48px, 8vw, 125px);

  line-height: .87;

  letter-spacing: -.075em;
}

.manifesto-text i {
  font-family: Georgia, serif;
  font-weight: normal;
}

/* =========================================================
   IMAGE / ARTWORK PLACEHOLDER
   ========================================================= */

.visual {
  width: 100%;
  height: 78vh;

  background:
    linear-gradient(
      135deg,
      #c9c6bc 0%,
      #e0ded5 48%,
      #aaa79d 49%,
      #d7d5cc 100%
    );

  position: relative;

  overflow: hidden;
}

.visual::after {
  content: "TFA / 001";

  position: absolute;

  right: 14px;
  bottom: 12px;

  font-size: 10px;
  letter-spacing: .06em;
}

.visual-word {
  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  font-size: clamp(60px, 12vw, 180px);

  letter-spacing: -.08em;

  mix-blend-mode: multiply;
}

/* =========================================================
   MODEL
   ========================================================= */

.model {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.model-left {
  padding: 100px 18px;
  border-right: 1px solid var(--line);
}

.model-right {
  padding: 100px 18px;
}

.model-heading {
  font-size: clamp(55px, 7vw, 110px);

  line-height: .82;

  letter-spacing: -.07em;

  max-width: 700px;
}

.model-copy {
  max-width: 500px;

  font-size: 16px;

  line-height: 1.25;
}

.model-copy p {
  margin-bottom: 28px;
}

.model-list {
  margin-top: 70px;
}

.model-row {
  display: grid;
  grid-template-columns: 45px 1fr;

  padding: 16px 0;

  border-top: 1px solid var(--line);

  font-size: 12px;
}

.model-row:last-child {
  border-bottom: 1px solid var(--line);
}

.model-number {
  color: var(--grey);
}

/* =========================================================
   ARTISTS
   ========================================================= */

.artists {
  padding-bottom: 100px;
}

.artist-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 1px;

  background: var(--line);
}

.artist {
  background: var(--paper);

  padding: 12px;
}

.artist-image {
  height: 500px;

  background: #d0cec5;

  margin-bottom: 10px;

  position: relative;

  overflow: hidden;
}

.artist-image.one {
  background:
    radial-gradient(
      ellipse at 35% 35%,
      #666 0%,
      #aaa 20%,
      #d8d5cb 48%,
      #888 49%,
      #c7c4ba 100%
    );
}

.artist-image.two {
  background:
    linear-gradient(
      160deg,
      #b9b6ad,
      #e1dfd7 35%,
      #79776f 36%,
      #c4c1b8 65%,
      #aaa79f
    );
}

.artist-image.three {
  background:
    radial-gradient(
      circle at 65% 55%,
      #777 0,
      #777 15%,
      #d5d2c8 16%,
      #aaa79f 60%,
      #dcd9d0 100%
    );
}

.artist-number {
  position: absolute;

  top: 10px;
  left: 10px;

  font-size: 10px;
}

.artist-info {
  display: flex;
  justify-content: space-between;

  font-size: 10px;

  text-transform: uppercase;
}

.artist-info span:last-child {
  color: var(--grey);
}

/* =========================================================
   PATRONS
   ========================================================= */

.patrons {
  background: var(--ink);
  color: var(--white);

  border-color: #444;
}

.patrons .section-header {
  border-color: #444;
}

.patrons .section-header span:last-child {
  color: #999;
}

.patron-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.patron-title {
  padding: 100px 18px;

  border-right: 1px solid #444;

  font-size: clamp(65px, 9vw, 145px);

  line-height: .77;

  letter-spacing: -.08em;
}

.patron-copy {
  padding: 100px 18px;

  font-size: 18px;

  line-height: 1.2;
}

.patron-copy p {
  max-width: 500px;

  margin-bottom: 30px;
}

.patron-price {
  margin-top: 100px;

  border-top: 1px solid #444;

  padding-top: 15px;

  font-size: 10px;

  text-transform: uppercase;
}

.patron-price strong {
  display: block;

  font-size: 70px;

  letter-spacing: -.07em;

  font-weight: normal;

  margin-top: 5px;
}

/* =========================================================
   TRANSPARENCY
   ========================================================= */

.transparency {
  padding: 100px 18px;
}

.transparency-grid {
  display: grid;

  grid-template-columns: 1fr 2fr;

  gap: 30px;
}

.transparency-heading {
  font-size: 12px;
  text-transform: uppercase;
}

.transparency-text {
  max-width: 850px;

  font-size: clamp(30px, 4vw, 60px);

  line-height: .95;

  letter-spacing: -.055em;
}

/* =========================================================
   APPLICATION
   ========================================================= */

.application {
  padding: 130px 18px;
}

.application-heading {
  font-size: clamp(70px, 13vw, 200px);

  line-height: .75;

  letter-spacing: -.08em;

  margin-bottom: 100px;
}

.application-buttons {
  display: flex;

  gap: 8px;

  flex-wrap: wrap;
}

.button {
  display: inline-block;

  border: 1px solid var(--ink);

  padding: 14px 20px;

  border-radius: 100px;

  font-size: 10px;

  text-transform: uppercase;

  transition: .2s ease;
}

.button:hover {
  background: var(--ink);
  color: var(--paper);
}

/* =========================================================
   FOOTER
   ========================================================= */

footer {
  min-height: 180px;

  padding: 18px;

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  font-size: 9px;

  text-transform: uppercase;
}

footer div:nth-child(2) {
  text-align: center;
}

footer div:last-child {
  text-align: right;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  header {
    grid-template-columns: 1fr auto;
  }

  .header-center {
    display: none;
  }

  .header-right {
    gap: 10px;
  }

  .hero {
    padding-left: 12px;
    padding-right: 12px;
  }

  .hero-title {
    font-size: 23vw;
  }

  .hero-title .indent {
    margin-left: 5vw;
  }

  .hero-bottom {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hero-bottom div:last-child {
    text-align: left;
  }

  .section-header {
    grid-template-columns: 50px 1fr;
  }

  .manifesto {
    padding: 90px 12px;
  }

  .model {
    grid-template-columns: 1fr;
  }

  .model-left {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .artist-grid {
    grid-template-columns: 1fr;
  }

  .artist-image {
    height: 110vw;
  }

  .patron-layout {
    grid-template-columns: 1fr;
  }

  .patron-title {
    border-right: none;
    border-bottom: 1px solid #444;
  }

  .transparency-grid {
    grid-template-columns: 1fr;
  }

  footer {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  footer div {
    text-align: left !important;
  }

}

</style>
</head>


<body>


<!-- ======================================================
     HEADER
     ====================================================== -->

<header>

  <div class="header-left">
    Independent Patronage
  </div>

  <div class="header-center">
    Trust Fund Artists
  </div>

  <div class="header-right">
    <a href="#artists">Artists</a>
    <a href="#patrons">Patrons</a>
    <a href="#contact">Join</a>
  </div>

</header>



<!-- ======================================================
     HERO
     ====================================================== -->

<section class="hero">

  <div class="hero-small">
    Los Angeles / New York / Everywhere
  </div>

  <h1 class="hero-title">

    <span>Trust</span>

    <span class="indent">Fund</span>

    <span>Artists</span>

  </h1>

  <div class="hero-bottom">

    <div>
      An independent patronage institution.
    </div>

    <div>
      Financial freedom for artists
      without the requirement of wealth.
    </div>

    <div>
      Est. 2026
    </div>

  </div>

</section>



<!-- ======================================================
     MARQUEE
     ====================================================== -->

<div class="marquee">

  <div class="marquee-track">

    ARTISTS NEED TIME &nbsp; / &nbsp;
    PATRONAGE IS A PRACTICE &nbsp; / &nbsp;
    FUND THE PERSON &nbsp; / &nbsp;
    MAKE SOMETHING POSSIBLE &nbsp; / &nbsp;
    ARTISTS NEED TIME &nbsp; / &nbsp;
    PATRONAGE IS A PRACTICE &nbsp; / &nbsp;
    FUND THE PERSON &nbsp; / &nbsp;
    MAKE SOMETHING POSSIBLE &nbsp; / &nbsp;

  </div>

</div>



<!-- ======================================================
     MANIFESTO
     ====================================================== -->

<section>

  <div class="section-header">

    <span>01</span>

    <span>The proposition</span>

  </div>


  <div class="manifesto">

    <div class="manifesto-text">

      What if the thing
      we gave artists
      was not another
      <i>opportunity</i>
      —
      but time?

    </div>

  </div>

</section>



<!-- ======================================================
     VISUAL
     ====================================================== -->

<section>

  <div class="visual">

    <div class="visual-word">
      MAKE.
    </div>

  </div>

</section>



<!-- ======================================================
     MODEL
     ====================================================== -->

<section>

  <div class="section-header">

    <span>02</span>

    <span>The model</span>

  </div>


  <div class="model">

    <div class="model-left">

      <div class="model-heading">

        FUND<br>
        THE<br>
        PERSON.

      </div>

    </div>


    <div class="model-right">

      <div class="model-copy">

        <p>
          Trust Fund Artists redirects a familiar
          mechanism — private wealth — toward
          artistic freedom.
        </p>

        <p>
          Instead of asking an artist to make something
          commercially viable, a patron helps make
          uninterrupted creative work possible.
        </p>

        <p>
          The artist receives support.
          The artist retains creative autonomy.
        </p>

      </div>


      <div class="model-list">

        <div class="model-row">

          <div class="model-number">01</div>

          <div>
            PATRON CONTRIBUTES
          </div>

        </div>


        <div class="model-row">

          <div class="model-number">02</div>

          <div>
            ARTIST RECEIVES SUPPORT
          </div>

        </div>


        <div class="model-row">

          <div class="model-number">03</div>

          <div>
            ARTIST MAKES WORK
          </div>

        </div>


        <div class="model-row">

          <div class="model-number">04</div>

          <div>
            WORK ENTERS THE WORLD
          </div>

        </div>

      </div>

    </div>

  </div>

</section>



<!-- ======================================================
     ARTISTS
     ====================================================== -->

<section id="artists" class="artists">

  <div class="section-header">

    <span>03</span>

    <span>Artists</span>

  </div>


  <div class="artist-grid">


    <article class="artist">

      <div class="artist-image one">

        <div class="artist-number">
          TFA / 001
        </div>

      </div>

      <div class="artist-info">

        <span>Artist Name</span>

        <span>Painting</span>

      </div>

    </article>



    <article class="artist">

      <div class="artist-image two">

        <div class="artist-number">
          TFA / 002
        </div>

      </div>

      <div class="artist-info">

        <span>Artist Name</span>

        <span>Sculpture</span>

      </div>

    </article>



    <article class="artist">

      <div class="artist-image three">

        <div class="artist-number">
          TFA / 003
        </div>

      </div>

      <div class="artist-info">

        <span>Artist Name</span>

        <span>Film</span>

      </div>

    </article>


  </div>

</section>



<!-- ======================================================
     PATRONS
     ====================================================== -->

<section id="patrons" class="patrons">

  <div class="section-header">

    <span>04</span>

    <span>For patrons</span>

  </div>


  <div class="patron-layout">


    <div class="patron-title">

      YOU<br>
      DON'T<br>
      BUY<br>
      THE<br>
      ART.

    </div>


    <div class="patron-copy">

      <p>
        You help make it possible.
      </p>

      <p>
        Traditional collecting asks:
        <br><br>
        <strong>What can I acquire?</strong>
      </p>

      <p>
        Trust Fund Artists asks:
        <br><br>
        <strong>
          What can I make possible?
        </strong>
      </p>

      <p>
        Patronage becomes participation
        in the life of an artist.
      </p>


      <div class="patron-price">

        Example annual patron contribution

        <strong>
          $25,000
        </strong>

      </div>

    </div>

  </div>

</section>



<!-- ======================================================
     TRANSPARENCY
     ====================================================== -->

<section>

  <div class="section-header">

    <span>05</span>

    <span>Transparency</span>

  </div>


  <div class="transparency">

    <div class="transparency-grid">

      <div class="transparency-heading">

        Money should be visible.
      </div>

      <div class="transparency-text">

        Every patron dollar should have
        a destination that can be understood.

      </div>

    </div>

  </div>

</section>



<!-- ======================================================
     APPLICATION
     ====================================================== -->

<section id="contact" class="application">

  <div class="section-header">

    <span>06</span>

    <span>Participate</span>

  </div>


  <div class="application-heading">

    MAKE<br>
    SOMETHING<br>
    POSSIBLE.

  </div>


  <div class="application-buttons">

    <a
      class="button"
      href="mailto:patrons@trustfundartists.org"
    >
      Become a Patron
    </a>


    <a
      class="button"
      href="mailto:artists@trustfundartists.org"
    >
      Artist Application
    </a>


    <a
      class="button"
      href="mailto:hello@trustfundartists.org"
    >
      General Inquiry
    </a>

  </div>

</section>



<!-- ======================================================
     FOOTER
     ====================================================== -->

<footer>

  <div>
    © 2026 Trust Fund Artists
  </div>

  <div>
    Independent Artist Patronage
  </div>

  <div>
    Los Angeles / USA
  </div>

</footer>


</body>
</html>