/*
  About 15 — Freya Lindholm, 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-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;
}

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

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

/* The ambient glow's resting state — always present, at a fixed opacity/
   scale, whether or not motion is reduced. Purely decorative, so it needs
   no JS gate at all; only the `no-preference` block below turns it into a
   slow, continuous pulse. */
.about15__glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(57, 255, 20, 0.35) 0%, rgba(57, 255, 20, 0) 70%);
  filter: blur(20px);
  transform: scale(1.3);
  opacity: 0.5;
}

/* Card entrance — gated on `.about15--js` (added only once script.js
   actually runs) and `.about15--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 card
   keeps its plain, fully-visible base styling below. Reduced motion
   additionally short-circuits the whole block regardless of either class,
   and the ambient glow falls back to its static halo above rather than
   disappearing. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes al-about15-card-in {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes al-about15-pulse {
    0%,
    100% {
      opacity: 0.45;
      transform: scale(1.3);
    }
    50% {
      opacity: 0.8;
      transform: scale(1.55);
    }
  }

  .about15__glow {
    animation: al-about15-pulse 4000ms ease-in-out infinite;
  }

  .about15--js .about15__card {
    opacity: 0;
  }

  .about15--js.about15--inview .about15__card {
    animation: al-about15-card-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

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

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

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

.about15__card {
  border-radius: 1rem;
  border: 1px solid var(--border);
  background-color: var(--card);
}

.about15__profile {
  padding: 1.5rem;
  text-align: center;
}

.about15__avatar {
  position: relative;
  width: 7rem;
  height: 7rem;
  margin: 0 auto;
}

.about15__avatar-photo {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid var(--border);
}

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

.about15__name {
  margin: 1.25rem 0 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--foreground);
}

.about15__role {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

.about15__bio {
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}

.about15__cta-wrap {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}

.about15__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  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;
}

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

.about15__side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.about15__snapshot {
  overflow: hidden;
}

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

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

.about15__snapshot-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.about15__snapshot-footer span:first-child {
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.about15__chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.about15__chip {
  min-width: 0;
  padding: 1rem;
}

.about15__chip-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.about15__chip-value {
  margin-top: 0.375rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--foreground);
}

.about15__dot {
  width: 0.375rem;
  height: 0.375rem;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--brand);
}

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

@media (min-width: 1024px) {
  .about15__grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 1.5rem;
  }
}
About 15

Requirements

Dependencies

Usage
