/*
  About 17 — Alexy Voss, standalone HTML/CSS/JS implementation.
  No build step, no framework, no external dependency: copy this file and
  index.html (and script.js) into any project and open it as-is.
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --background: #ffffff;
  --foreground: #0a0a0a;
  --muted-foreground: #737373;
  --brand: #39ff14;
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji";
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--foreground);
  background-color: var(--background);
  line-height: 1.5;
}

img {
  display: block;
  max-width: 100%;
}

*:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Motion — gated on `.about17--js` (added only once script.js actually
   runs) and `.about17--inview` (added once the section enters the
   viewport). With JS disabled or blocked, neither class is ever present,
   so no rule inside this media query can apply and every element keeps
   its plain, fully-visible base styling below. Reduced motion additionally
   short-circuits the whole block regardless of either class. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes al-about17-fade {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes al-about17-in-left {
    from {
      opacity: 0;
      transform: translateX(-56px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes al-about17-in-right {
    from {
      opacity: 0;
      transform: translateX(56px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .about17--js .about17__fade,
  .about17--js .about17__slide-left,
  .about17--js .about17__slide-right {
    opacity: 0;
  }

  .about17--js.about17--inview .about17__fade {
    animation: al-about17-fade 650ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .about17--js.about17--inview .about17__slide-left {
    animation: al-about17-in-left 850ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .about17--js.about17--inview .about17__slide-right {
    animation: al-about17-in-right 850ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

.about17 {
  overflow: hidden;
  background-color: var(--background);
}

.about17__inner {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 3rem + 2.5vw, 5rem) clamp(1rem, 0.3rem + 3vw, 2rem);
}

.about17__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* Editorial 2-column composition: mobile is a plain single-column grid
   (headline, portrait, body follow source order); at 1024px it becomes a
   3fr/2fr grid where the headline sits beside a real, generously sized
   portrait (its own aspect ratio, not stretched to match text height — a
   stretched image collides with CSS Grid's row auto-sizing and inflates
   the row far past the text's own height), and the closing statement spans
   the full width below once the portrait's row completes. */
.about17__grid {
  display: grid;
  row-gap: 1.5rem;
  grid-template-areas: "headline" "portrait" "body";
  margin-top: 1.5rem;
}

.about17__headline {
  grid-area: headline;
  margin: 0;
  font-weight: 600;
  font-size: clamp(2.25rem, 1.6rem + 3.4vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--foreground);
}

.about17__photo {
  grid-area: portrait;
  width: 100%;
  max-width: 24rem;
  margin-top: 2rem;
  aspect-ratio: 4 / 5;
}

.about17__photo-frame {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 1rem;
}

.about17__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.about17__body {
  grid-area: body;
  margin-top: 1.5rem;
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

@media (min-width: 1024px) {
  .about17__grid {
    grid-template-columns: 3fr 2fr;
    column-gap: 3rem;
    row-gap: 1.25rem;
    align-items: start;
    grid-template-areas:
      "headline portrait"
      "body body";
    margin-top: 2rem;
  }

  .about17__photo {
    max-width: none;
    aspect-ratio: 4 / 3;
    margin-top: 0;
  }

  .about17__body {
    margin-top: 0;
  }
}

@media (min-width: 1280px) {
  .about17__grid {
    column-gap: 4.5rem;
  }
}
About 17

Requirements

Dependencies

Usage
