home.css

/* Space Grotesk is loaded via <link> in the HTML head,
   not @import, so it starts fetching immediately instead
   of waiting on this stylesheet to load first. */


/* =================================================
   MAIN CONTROLS
================================================= */

:root {
  /* Colors */
  --green: #195c33;
  --orange: #de7628;
  --white: #ffffff;
  --grey: #b7b7b7;

  /* Font */
  --font-family:
    "Space Grotesk",
    Arial,
    sans-serif;

  /* Main column */
  --column-width: 980px;
  --page-gutter: 36px;

  /* Paragraphs */
  --text-width: 985px;
  --text-size: clamp(21px, 2.1vw, 29px);
  --text-weight: 600;
  --text-line-height: 1.45;
  --text-letter-spacing: -0.022em;

  /* Main title */
  --title-size: clamp(84px, 6.2vw, 150px);
  --title-weight: 700;
  --title-line-height: 0.82;
  --title-letter-spacing: 0;

  /* Section titles */
  --section-title-size: clamp(20px, 1.9vw, 25px);

  /* Edition links */
  --edition-size: clamp(22px, 3.7vw, 52px);
  --edition-line-height: 1;

  /* Vertical spacing */
  --content-top: 100px;
  --content-bottom: 60px;
  --title-bottom: 70px;
  --section-bottom: 90px;

  /* Trophy */
  --trophy-size: clamp(60px, 6vw, 90px);
  --trophy-top: 24px;
  --trophy-right: 24px;

  /* Footer */
  --footer-height-padding: 9px;
  --footer-text-size: 13px;
  --footer-line-height: 1.3;
  --footer-align: center;

  /* Bee */
  --bee-size: clamp(26px, 2.7vw, 42px);
  --trail-width: 1.8;
}


/* =================================================
   Base
================================================= */

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  position: relative;

  display: flex;
  flex-direction: column;

  min-height: 100vh;
  min-height: 100svh;
  margin: 0;

  color: var(--green);
  background-color: var(--white);

  font-family: var(--font-family);
  font-weight: 700;
}


/* =================================================
   Main content
================================================= */

.content {
  position: relative;
  z-index: 2;

  flex: 1;

  width: min(
    calc(100% - (var(--page-gutter) * 2)),
    var(--column-width)
  );

  margin-inline: auto;

  padding:
    var(--content-top)
    0
    var(--content-bottom);
}

section {
  margin-bottom: var(--section-bottom);
}

.content > section:last-child {
  margin-bottom: 0;
}

.friends-section {
  margin-bottom: calc(var(--section-bottom) * 1.5);
}


/* =================================================
   Typography
================================================= */

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: var(--title-bottom);

  font-size: var(--title-size);
  font-weight: var(--title-weight);
  line-height: var(--title-line-height);
  letter-spacing: var(--title-letter-spacing);
}

.title-logo {
  display: block;

  height: 1.29em;
  width: auto;
  aspect-ratio: 404.99 / 137.17;
  margin-left: -0.265em;
}

h2 {
  margin-bottom: 28px;

  font-size: var(--section-title-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

p {
  max-width: var(--text-width);
  margin-bottom: 1.25em;

  font-size: var(--text-size);
  font-weight: var(--text-weight);
  line-height: var(--text-line-height);
  letter-spacing: var(--text-letter-spacing);
}

p:last-child {
  margin-bottom: 0;
}


.motto {
  font-style: italic;
}

/* =================================================
   Dictionary definition
================================================= */

.definition {
  margin-bottom: 4em;
  color: var(--grey);
}

.definition-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35em;

  margin-bottom: 0.35em;
}

.definition-heading strong {
  font-size: 2.2em;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.pronunciation {
  font-family: Georgia, serif;
  font-size: 1.3em;
  font-weight: 400;
}

.word-type {
  font-family: Georgia, serif;
  font-size: 1.3em;
  font-style: italic;
  font-weight: 400;
}

.definition-text {
  margin: 0;
  padding-left: 1.25em;

  font-size: 1.4em;
  line-height: 1.35;
}

.definition-text::before {
  content: "1";

  margin-left: -1.35em;
  margin-right: 0.2em;

  font-family: Georgia, serif;
  font-size: 0.75em;
  font-weight: 400;
}


/* =================================================
   Links
================================================= */

a {
  color: var(--green);
  text-decoration: none;
  font-weight: 700;
}

a:hover,
a:focus-visible {
  color: var(--orange);
}

a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

.office-text a {
  font-weight: 700;
}


/* =================================================
   Editions
================================================= */

.edition-list {
  display: grid;
  gap: 6px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.edition-list a {
  font-size: var(--edition-size);
  font-weight: 700;
  line-height: var(--edition-line-height);
  letter-spacing: -0.045em;
  
}


/* =================================================
   Trophy
================================================= */

.trophy-link {
  position: fixed;
  z-index: 20;

  top: var(--trophy-top);
  right: var(--trophy-right);
  left: auto;

  width: var(--trophy-size);

  transform-origin: 50% 90%;
}

.trophy-link img {
  display: block;

  width: 100%;
  height: auto;
}

.trophy-link:hover {
  animation:
    trophy-tilt
    520ms
    ease-in-out;
}

@keyframes trophy-tilt {
  0% {
    transform: rotate(0);
  }

  30% {
    transform: rotate(-9deg);
  }

  65% {
    transform: rotate(5deg);
  }

  100% {
    transform: rotate(0);
  }
}


/* =================================================
   Flying bee
================================================= */

.fly-layer {
  position: fixed;
  z-index: 1;
  inset: 0;

  overflow: hidden;
  pointer-events: none;
}

.fly-trail {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible;
}

.trail-dash {
  stroke: var(--orange);
  stroke-width: var(--trail-width);
  stroke-linecap: round;
}

.flying-bee {
  position: absolute;

  top: 0;
  left: 0;

  width: var(--bee-size);
  height: auto;

  opacity: 0;

  /*
  The visual "anchor" of the bee — the point that stays pinned
  to the path and that rotate() pivots around. bee.js reads
  these same two variables for its translate offset, so tuning
  them here (e.g. live in DevTools) moves the pivot and the
  anchor together, in sync, instead of drifting apart.
  */
  --bee-anchor-x: 52%;
  --bee-anchor-y: 100%;
  transform-origin: var(--bee-anchor-x) var(--bee-anchor-y);

  backface-visibility: hidden;
  will-change: transform, opacity;
}


/* =================================================
   Footer
================================================= */

.site-footer {
  position: relative;
  z-index: 10;

  width: 100%;

  padding:
    var(--footer-height-padding)
    0;

  color: var(--white);
  background-color: var(--grey);
}

.site-footer p {
  width: min(
    calc(100% - (var(--page-gutter) * 2)),
    var(--column-width)
  );

  max-width: none;
  margin: 0 auto;

  color: inherit;

  font-size: var(--footer-text-size);
  font-weight: 500;
  line-height: var(--footer-line-height);
  letter-spacing: -0.01em;

  text-align: var(--footer-align);
  white-space: nowrap;
}

.footer-link {
  color: var(--white);
}

.footer-link:hover,
.footer-link:focus-visible {
  color: var(--green);
}

/* =================================================
   Winning editions
================================================= */

.edition-list .is-winner > a {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
}

.edition-cup {
  flex: 0 0 auto;

  width: auto;
  height: 0.8em;
  margin-left: 0.3em;

  overflow: visible;

  fill: var(--orange);
}

#manual {
  word-spacing: 0.05em;
}

/* =================================================
   Tablet / narrow desktop
================================================= */

@media (max-width: 1180px) and (min-width: 701px) {
  :root {
    /*
    Keeps the composition visually narrow
    and centred as the viewport contracts.
    */
    --column-width: 760px;
    --page-gutter: clamp(40px, 7vw, 70px);

    --text-size: clamp(20px, 2.5vw, 26px);
    --edition-size: clamp(24px, 4.2vw, 44px);

    --content-top: 90px;
  }

  /*
  The trophy remains in the upper-right corner,
  but scrolls with the page on narrower screens.
  */

  .trophy-link {
    position: absolute;
  }
}


.superfluo {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 700;
  font-size: 0.9em;
  letter-spacing: 0.02em;  
}


/* =================================================
   Mobile
================================================= */

@media (max-width: 700px) {
  :root {
    /*
    Narrow, centred mobile composition.
    */
    --column-width: 560px;
    --page-gutter: clamp(26px, 7vw, 40px);

    /* Main text */
    --text-size: clamp(20px, 5.6vw, 24px);
    --text-weight: 600;
    --text-line-height: 1.4;
    --text-letter-spacing: -0.016em;

    /* Title */
    --title-size: clamp(64px, 18.5vw, 84px);
    --title-bottom: 56px;

    /* Section title */
    --section-title-size: 17px;

    /* Editions */
    --edition-size: clamp(22px, 6.6vw, 32px);
    --edition-line-height: 1.05;

    /* Spacing */
    --content-top: 54px;
    --content-bottom: 100px;

    --section-bottom: 58px;

    /* Footer */
    --footer-height-padding: 11px;
    --footer-text-size: clamp(10px, 3vw, 12px);
    --footer-line-height: 1.35;
    --footer-align: center;

    /* Decorative elements */
    --bee-size: 29px;
    --trophy-size: 48px;
  }


  /* ---------------------------------
     Main text flow
  --------------------------------- */

  p {
    max-width: 100%;

    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;

    text-wrap: pretty;
  }


  /* ---------------------------------
     Definition
  --------------------------------- */

  .definition {
    margin-bottom: 3em;
  }

  .definition-heading {
    gap: 0.28em;
    margin-bottom: 0.3em;
  }

  .definition-heading strong {
    font-size: 1.8em;
  }

  .pronunciation,
  .word-type {
    font-size: 0.95em;
  }

  .definition-text {
    max-width: 100%;
    padding-left: 1.15em;

    font-size: 1.05em;
    line-height: 1.4;

    text-wrap: pretty;
  }

  .definition-text::before {
    margin-left: -1.15em;
    margin-right: 0.18em;
  }


  /* ---------------------------------
     Editions
  --------------------------------- */

  .edition-list {
    gap: 9px;
  }

  .edition-list a {
    display: block;

    font-size: var(--edition-size);
    line-height: var(--edition-line-height);
    letter-spacing: -0.035em;

    white-space: nowrap;
  }


  /* ---------------------------------
     Trophy
  --------------------------------- */

  .trophy-link {
    position: fixed;
    z-index: 20;

    top: auto;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    left: auto;

    width: var(--trophy-size);

    transform-origin: 50% 90%;
  }

  .trophy-link:active {
    animation:
      trophy-tilt
      520ms
      ease-in-out;
  }


  /* ---------------------------------
     Footer
  --------------------------------- */

  .site-footer {
    position: relative;
    z-index: 10;

    overflow: visible;

    padding:
      var(--footer-height-padding)
      0
      calc(
        var(--footer-height-padding) +
        env(safe-area-inset-bottom)
      );
  }

  .site-footer p {
    position: static;

    width: min(
      calc(100% - (var(--page-gutter) * 2)),
      var(--column-width)
    );

    max-width: none;
    margin: 0 auto;

    color: inherit;

    font-size: var(--footer-text-size);
    font-weight: 500;
    line-height: var(--footer-line-height);

    text-align: var(--footer-align);
    white-space: normal;

    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;

    text-wrap: balance;
  }


  /* ---------------------------------
     Flying bee
  --------------------------------- */

  .flying-bee {
    width: var(--bee-size);
  }
}


/* =================================================
   Reduced motion
================================================= */

@media (prefers-reduced-motion: reduce) {
  .fly-layer {
    display: none;
  }

  .trophy-link:hover,
  .trophy-link:active {
    animation: none;
  }
}