/*
  About 13 — Alexy Bergström, 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;
}

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

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

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

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

  @keyframes al-about13-card {
    from {
      opacity: 0;
      transform: translateY(20px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes al-about13-rule {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }

  .about13--js .about13__reveal,
  .about13--js .about13__card {
    opacity: 0;
  }

  .about13--js .about13__rule {
    transform: scaleX(0);
  }

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

  .about13--js.about13--inview .about13__card {
    animation: al-about13-card 750ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .about13--js.about13--inview .about13__rule {
    animation: al-about13-rule 650ms cubic-bezier(0.65, 0, 0.35, 1) 550ms both;
  }
}

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

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

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

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

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

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

.about13__eyebrow {
  margin-top: 2rem;
  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;
}

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

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

.about13__cta {
  margin-top: 2rem;
}

.about13__button {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 999px;
  background-color: var(--foreground);
  color: var(--background);
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 150ms ease;
}

.about13__button:hover {
  background-color: #2a2a2a;
}

.about13__button-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.about13__button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

.about13__card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.about13__rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.25rem;
  background-color: var(--brand);
  transform-origin: left;
}

.about13__card-title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--foreground);
}

.about13__rows {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.about13__row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.about13__row-icon {
  margin-top: 0.125rem;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background-color: var(--muted);
  color: var(--muted-foreground);
}

.about13__row-icon svg {
  width: 1rem;
  height: 1rem;
}

.about13__row-icon--accent {
  background-color: color-mix(in srgb, var(--brand) 15%, transparent);
  color: #178a03;
}

.about13__row-text {
  min-width: 0;
}

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

.about13__row-text dd {
  margin-top: 0.125rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.about13__media {
  margin-top: 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background-color: color-mix(in srgb, var(--muted) 40%, transparent);
  padding: 0.75rem;
}

.about13__secondary-photo {
  overflow: hidden;
  border-radius: 0.5rem;
}

.about13__secondary-photo img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

.about13__caption {
  margin: 0.625rem 0 0;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

@media (min-width: 1024px) {
  .about13__grid {
    grid-template-columns: 1.3fr 1fr;
    gap: 3rem;
  }
}
About 13

Requirements

Dependencies

Usage
