/*
  About 22 — standalone HTML/CSS implementation.
  No build step, no framework, no external dependency: copy this file and
  index.html into any project and open it as-is.
*/

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

:root {
  --background: #ffffff;
  --foreground: #0a0a0a;
  --foreground-90: rgba(10, 10, 10, 0.9);
  --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;
}

/* Motion — disabled entirely under reduced motion; every element already
   renders at its final, fully visible state outside this media query.
   "Panel expansion": the banner starts clipped to a short band and
   expands to its full height, like a panel unfurling, before the
   headline/body content fades in. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes al-unfurl {
    from {
      clip-path: inset(38% 0% 38% 0%);
    }
    to {
      clip-path: inset(0% 0% 0% 0%);
    }
  }

  @keyframes al-zoom {
    from {
      transform: scale(1.08);
    }
    to {
      transform: scale(1);
    }
  }

  @keyframes al-up {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .about__panel {
    animation: al-unfurl 900ms cubic-bezier(0.65, 0, 0.35, 1) both;
  }

  .about__panel img {
    animation: al-zoom 1200ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .about__eyebrow,
  .about__heading,
  .about__byline,
  .about__body {
    animation: al-up 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .about__eyebrow {
    animation-delay: 820ms;
  }
  .about__heading {
    animation-delay: 900ms;
  }
  .about__byline {
    animation-delay: 980ms;
  }
  .about__body {
    animation-delay: 1060ms;
  }
}

.about__panel {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.about__panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__article {
  max-width: 48rem;
  margin: 0 auto;
  padding: clamp(3rem, 2.4rem + 2.4vw, 4rem) clamp(1rem, 0.3rem + 3vw, 2rem);
}

.about__eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand);
}

.about__heading {
  margin: 1rem 0 0;
  font-size: clamp(1.875rem, 1.4rem + 2.3vw, 3rem);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--foreground);
}

.about__byline {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.about__body {
  margin-top: 2rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--foreground-90);
}

.about__body p {
  margin: 0;
}

.about__body p + p {
  margin-top: 1.25rem;
}

.about__inset {
  float: right;
  margin: 0.25rem 0 1rem 1.5rem;
  width: 45%;
  max-width: 220px;
  overflow: hidden;
  border-radius: 0.75rem;
}

.about__inset img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__clear {
  clear: both;
}

@media (min-width: 640px) {
  .about__panel {
    aspect-ratio: 16 / 6;
  }

  .about__inset {
    width: 40%;
  }
}

@media (min-width: 1024px) {
  .about__panel {
    aspect-ratio: 21 / 7;
  }
}
About 22

Requirements

Dependencies

Usage
