/* ==========================================================================
   card.slowthings.io
   The look is slowthings.io's: white paper, black ink, the mono face, outlined
   uppercase buttons that fill with yellow. Tokens first: every design decision
   you are likely to change is here.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Colour: the whole palette, as on the main site. */
  --st-paper:  #ffffff;
  --st-ink:    #000000;
  --st-yellow: #ffe600;

  /* Type: the lettering's own family under the squiggle, the mono for everything you press. */
  --ff-display: 'Sulphur Point', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --ff-mono: 'Google Sans Code Variable', ui-monospace, 'SF Mono', 'Menlo', monospace;
  --fs-name: clamp(20px, 1.2vw + 16px, 26px);
  --fs-ui: 14px;

  /* The squiggle. Its box is 218 x 247 units; this is how wide it is drawn. */
  --mark-w: clamp(120px, min(46vw, 28svh), 220px);

  /* Rhythm */
  --gap-name: clamp(18px, 4vw, 28px);   /* squiggle to the name */
  --gap-links: clamp(32px, 6svh, 52px);  /* name to the first link */
  --gap-link: 12px;                      /* between links */
  --measure: 15rem;                      /* the links' width */
  --tap: 52px;                           /* minimum touch target */
  --margin: 24px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* the buttons' yellow wipe */

  /* The motion (the draw, the fades, the timing) is in card.js, under OPEN. */
}

@font-face {
  font-family: 'Sulphur Point';
  src: url('/assets/fonts/sulphur-point-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Google Sans Code Variable';
  src: url('/assets/fonts/google-sans-code-latin-wght-normal.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
}

/* ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* White from the first paint, so nothing flashes before the page is up. */
  background: var(--st-paper);
}

body {
  min-height: 100svh;
  background: var(--st-paper);
  color: var(--st-ink);
  font-family: var(--ff-mono);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  /* Nothing here is meant to be selected, as on the main site; the links still work. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Everything sits on the middle of the screen as one group: the squiggle, its name, the links. (The opening, in card.js, starts
   with the squiggle alone on the middle and moves the group about with transforms; this is where it ends.) On a short screen the
   page simply scrolls. */
.card {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(var(--margin), env(safe-area-inset-top)) var(--margin) max(var(--margin), env(safe-area-inset-bottom));
}

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* --- Squiggle and name --------------------------------------------------- */

.ident {
  /* Above the links, so as they come out of the squiggle they come from behind it. */
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ident__mark {
  display: block;
  width: var(--mark-w);
  height: auto;
  aspect-ratio: 218 / 247;
  overflow: visible;
}

.ident__name {
  margin-top: var(--gap-name);
  font-family: var(--ff-display);
  font-size: var(--fs-name);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
}

/* --- Links --------------------------------------------------------------- */

.links {
  width: 100%;
  max-width: var(--measure);
  padding-top: var(--gap-links);
  display: flex;
  flex-direction: column;
  gap: var(--gap-link);
}

.link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 20px;
  border: 1px solid var(--st-ink);
  color: var(--st-ink);
  font-family: var(--ff-mono);
  font-size: var(--fs-ui);
  font-weight: 300;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;

  /* The site's button: the yellow is a fill with a width, so it grows across the box from the left instead of fading. */
  background-color: transparent;
  background-image: linear-gradient(var(--st-yellow), var(--st-yellow));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  background-origin: border-box;
  background-clip: border-box;
  transition: background-size 140ms var(--ease);

}

/* Saving the contact is what the page is for, so it is the one that is filled. */
.link--primary { background-color: var(--st-ink); color: var(--st-paper); }

@media (hover: hover) {
  .link:hover { background-size: 100% 100%; }
  .link--primary:hover { color: var(--st-ink); }
}
.link:active { background-size: 100% 100%; }
.link--primary:active { color: var(--st-ink); }

.link:focus-visible { outline: 2px solid var(--st-ink); outline-offset: 3px; }
/* No frame after a click or a tap, only for the keyboard (Safari draws one otherwise). */
.link:focus:not(:focus-visible) { outline: none; }

/* --- The opening (card.js) ----------------------------------------------- */

/* Until the script has measured the page and started, the squiggle, the name and the links are not drawn; the page is white.
   Only under html.js, so without scripts the finished page is simply there. */
html.js:not(.is-open):not(.is-opening) .ident__mark,
html.js:not(.is-open):not(.is-opening) .ident__name,
html.js:not(.is-open):not(.is-opening) .link { opacity: 0; }

/* While it plays, the links are not yet there to press. */
html.is-opening .links { pointer-events: none; }

/* --- Accessibility floor ------------------------------------------------- */

/* Anyone who asked the system for less motion gets the finished page at once (card.js does not start the opening). */
@media (prefers-reduced-motion: reduce) {
  html.js .ident__mark, html.js .ident__name, html.js .link { opacity: 1; }
  .link { transition: none; }
}