/*
  About 16 — Alexy Whitfield, 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;
  --card: #ffffff;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --border: #e5e5e5;
  --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;
}

dl,
dt,
dd {
  margin: 0;
  padding: 0;
}

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

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

/* Motion — gated on `.about16--js` (added only once script.js actually
   runs) and `.about16--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-about16-up {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes al-about16-zoom {
    from {
      opacity: 0;
      transform: scale(1.12);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  .about16--js .about16__reveal,
  .about16--js .about16__photo-img {
    opacity: 0;
  }

  .about16--js.about16--inview .about16__reveal {
    animation: al-about16-up 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .about16--js.about16--inview .about16__photo-img {
    animation: al-about16-zoom 1100ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

.about16 {
  background-color: var(--background);
}

.about16__inner {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(4rem, 3rem + 4vw, 7rem) clamp(1rem, 0.3rem + 3vw, 2rem);
}

.about16__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

.about16__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 1rem;
}

.about16__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about16__main {
  display: flex;
  flex-direction: column;
}

.about16__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  width: fit-content;
  border: 1px solid var(--border);
  background-color: var(--muted);
  color: var(--muted-foreground);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

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

.about16__bio {
  margin-top: 1.5rem;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.about16__metrics {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background-color: var(--card);
}

.about16__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
  padding: 2rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.about16__metric:last-child {
  border-bottom: none;
}

.about16__metric dt {
  order: 2;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

.about16__metric dd {
  order: 1;
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--foreground);
}

@media (min-width: 640px) {
  .about16__metrics {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .about16__metric:last-child {
    border-right: none;
  }
}

@media (min-width: 1024px) {
  .about16__grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  .about16__metrics {
    margin-top: 5rem;
  }
}
About 16

Requirements

Dependencies

Usage
