/* Hey Tablo landing page. White, black, and the blue of the logo's message bubble. No scripts. */
:root {
  --blue: #007aff;
  --ink: #000;
  --paper: #fff;
  /* Rounded system face where the device has one (iPhone, Mac): it echoes the logo's hand lettering. */
  --face: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color-scheme: light; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 48px 24px calc(64px + env(safe-area-inset-bottom));
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face);
  -webkit-font-smoothing: antialiased;
}

main { width: 100%; max-width: 340px; text-align: center; }

h1 { margin: 0; }
h1 img {
  display: block;
  width: 100%;
  height: auto;
  /* The bubble's tail sits bottom-left, so nudge the artwork to look centred by eye. */
  transform-origin: 12% 92%;
  animation: sent 420ms cubic-bezier(.2, .9, .3, 1.25) both;
}

/* The line under the bubble is Tablo's own handwriting, taken from the channel artwork. */
.tagline { margin: 22px 0 0; }
.tagline img { display: block; width: 89%; height: auto; margin: 0 auto; }

nav { display: grid; gap: 12px; margin-top: 44px; }

nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 22px;
  border: 1.5px solid var(--ink);
  border-radius: 28px;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}
/* The platform marks keep their own colours; the Apple one is a rounded square, so it sits a touch smaller. */
nav svg { flex: none; width: 22px; height: 22px; }
nav a:nth-child(2) svg { width: 21px; height: 21px; border-radius: 5px; }

@media (hover: hover) {
  nav a:hover { background: var(--blue); border-color: var(--blue); color: var(--paper); }
}
nav a:active { background: var(--blue); border-color: var(--blue); color: var(--paper); transform: scale(.98); }
nav a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* The one moment of motion: the bubble arrives the way a sent message does. */
@keyframes sent {
  from { opacity: 0; transform: scale(.9); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  h1 img { animation: none; }
  nav a { transition: none; }
}

@media (min-width: 700px) {
  main { max-width: 380px; }
  nav { margin-top: 52px; }
}