/* whatcha.io. One page, no build step. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --paper: #f3f0e8;
  --ink: #15140f;
  --muted: #66625a;
  --rule: rgb(21 20 15 / 0.16);
  /* The one loud colour. Large glyphs and hover states only, never body text. */
  --accent: #f0420f;
  --sans: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: clamp(20px, 5vw, 64px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12110d;
    --ink: #f3f0e8;
    --muted: #a39e92;
    --rule: rgb(243 240 232 / 0.18);
    --accent: #ff5a2b;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--accent);
  color: var(--paper);
}

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

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 2px;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

main {
  flex: 1;
}

/* Header and footer share the small mono voice. */
.top,
.bottom,
.label,
.url {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.top,
.bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
}

.top {
  align-items: center;
  padding: 28px 0;
}

/* The name runs a size up from the rest of the header so it holds its own
   next to the mark. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 600;
}

/* Drawn in the text colour, so it follows light and dark. */
.mark {
  display: block;
  width: 28px;
  height: auto;
}

.top-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.top-link:hover {
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}

.bottom {
  padding: 28px 0 32px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
}

/* Hero */
.hero {
  container-type: inline-size;
  padding: clamp(40px, 9vh, 112px) 0 clamp(56px, 10vh, 120px);
}

/* One line, always. The size is a share of the column's width, so the
   headline runs from the left edge to the right edge at every screen size.
   The vw line is the fallback for browsers without container units. */
h1 {
  margin: 0;
  font-size: min(10.2vw, 7.9rem);
  font-size: 11.9cqw;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.q {
  display: inline-block;
  color: var(--accent);
  transform-origin: 50% 85%;
}

/* Runs the full width under the headline. Balanced, so two lines come out
   about the same length instead of one long line and a stub. */
.lede {
  margin: clamp(28px, 5vh, 48px) 0 0;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Hyphenated pairs stay whole. */
.nw {
  white-space: nowrap;
}

/* Products */
.label {
  margin: 0 0 16px;
  font-weight: 400;
  color: var(--muted);
}

.products {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--rule);
}

.products a {
  display: grid;
  /* Fixed outer columns so the three rows share the same columns. */
  grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1.35fr) 9rem;
  align-items: center;
  column-gap: clamp(16px, 2.4vw, 32px);
  padding: clamp(22px, 3.2vw, 34px) 0;
  border-top: 1px solid var(--rule);
}

/* Each product's own app icon. The hairline keeps a black tile visible on
   the dark ground. */
.logo {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 22%;
  box-shadow: 0 0 0 1px var(--rule);
}

.name {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.desc {
  max-width: 44ch;
  color: var(--muted);
  transition: color 0.25s ease;
}

.url {
  justify-self: end;
  white-space: nowrap;
}

.arrow {
  display: inline-block;
  margin-left: 0.35em;
  transition:
    transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    color 0.25s ease;
}

@media (hover: hover) {
  .products a:hover .name {
    transform: translateX(10px);
  }

  .products a:hover .desc {
    color: var(--ink);
  }

  .products a:hover .arrow {
    color: var(--accent);
    transform: translate(3px, -3px);
  }
}

/* Contact */
.contact {
  padding: clamp(72px, 13vh, 150px) 0 clamp(64px, 11vh, 130px);
}

.contact h2 {
  margin: 0;
  /* The 9.6vw cap keeps it on one line on the narrowest phones. */
  font-size: min(9.6vw, clamp(2.25rem, 7vw, 5rem));
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.email {
  display: inline-block;
  margin-top: clamp(16px, 2.5vh, 24px);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

.email:hover {
  text-decoration-thickness: 4px;
}

/* Phones. The headline is smaller here, so it sits closer to the header and
   to the line under it. Each product stacks: logo and name, line, address. */
@media (max-width: 760px) {
  .hero {
    padding-top: 20px;
    padding-bottom: 36px;
  }

  .lede {
    margin-top: 18px;
  }

  .products a {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 12px;
  }

  .logo {
    width: 40px;
    height: 40px;
  }

  .desc,
  .url {
    grid-column: 1 / -1;
  }

  .url {
    justify-self: start;
    margin-top: 2px;
  }
}

/* One entrance, then the question mark tips its head. */
@media (prefers-reduced-motion: no-preference) {
  .rise {
    animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 70ms);
  }

  h1 .q {
    animation: tilt 0.9s cubic-bezier(0.3, 0.6, 0.3, 1) 0.75s both;
  }

  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes tilt {
    0% {
      transform: rotate(0);
    }
    35% {
      transform: rotate(14deg);
    }
    70% {
      transform: rotate(-5deg);
    }
    100% {
      transform: rotate(0);
    }
  }
}