/*
  About 14 — Alexy Costa, 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;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

  @keyframes al-about14-float {
    0% {
      opacity: 0;
      transform: translateY(14px) scale(0.92);
    }
    60% {
      opacity: 1;
      transform: translateY(-3px) scale(1.02);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .about14--js .about14__reveal,
  .about14--js .about14__badge {
    opacity: 0;
  }

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

  .about14--js.about14--inview .about14__badge {
    animation: al-about14-float 650ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

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

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

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

.about14__photo {
  position: relative;
  width: 100%;
  max-width: 24rem;
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 1rem;
}

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

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

.about14__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;
}

.about14__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);
}

.about14__intro {
  margin: 1.25rem 0 0;
  max-width: 36rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.about14__bio {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 2rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}

.about14__bio-row dt {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

.about14__bio-row dd {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
}

.about14__badges {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.about14__badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
}

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

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

  .about14__photo {
    margin: 0;
    max-width: none;
  }
}
About 14

Requirements

Dependencies

Usage
