c3cat-landingpage/assets/css/style.css

:root {
  /* Use a shade of the c3cat logos pink, which works nicely as a link color. */
  --accent-color-light: #DC049B;
  /* A modified version of accent-color-light, which works nicely as a link color
   * and with the dark theme */
  --accent-color-dark: #dc49b0;
}

body {
  font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif;

  text-align: left;
  line-height: 1.4;

  /* Use dark grey instead of black to be lighter on the eyes. But also a grey
   * which still works with the link color nicely. */
  --bg-color: #ffffff;
  --fg-color: #2b2b2b;
  --accent-color: var(--accent-color-light);
  background-color: var(--bg-color);
  color: var(--fg-color);

  @media (prefers-color-scheme: dark) {
    /* Colors for dark theme, which have enough contrast, but also aren't too harsh on the eyes. */
    /* See: https://seirdy.one/posts/2020/11/23/website-best-practices/#dark-themes */
    --bg-color: #1b1b1b;
    --fg-color: #ebebeb;
    --accent-color: var(--accent-color-dark);
  }
}

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 5px;
}

footer {
  margin-top: 4rem;
}

img {
  width: 100%;
}


a:link, a:visited {
  color: var(--accent-color);
}

u {
  text-decoration-color: var(--accent-color);
}

.title {
  text-align: center;
}

.hero-img {
  max-width: 500px;
  display: block;
  margin: 0 auto;
}

p.bigger {
  font-size: 1.2rem;
}

section {
  margin-top: 3rem;
}

details {
  border: 1px solid var(--accent-color);
  border-radius: 8px;
  background-color: color-mix(in hsl, var(--accent-color) 20%, var(--bg-color) 80%);

  & > * {
    padding: 0.5rem 1ch;
  }

  & > summary {
    cursor: pointer;
    user-select: none;
  }

  &[open] > summary {
    border-bottom: 1px solid var(--accent-color);
    margin-left: 0;
    margin-right: 0;
  }
}

ol.step-by-step-instructions {
  margin-top: 1rem;

  li {
    margin-top: 0.5rem;
    margin-bottom: 1rem;

    &::marker {
      color: color-mix(in hsl, var(--accent-color) 50%, var(--fg-color) 50%);
      font-size: larger;
    }

    &>div {
      display: flex;
      flex-direction: row;
      gap: 1ch;
      justify-content: space-between;
    }

    input[type="checkbox"] {
      margin: 4px;
      width: 2rem;
      height: 2rem;
      flex-shrink: 0;
      flex-grow: 0;
    }
  }
}

dl.key-value {
  display: grid;
  grid-template-columns: 2ch [keys] fit-content(30ch) [values] auto;
  column-gap: 2ch;
  row-gap: 0.2rem;

  &>dt {
    text-decoration-line: underline;
    text-decoration-color: var(--accent-color);
    grid-column-start: keys;
    text-align: end;
  }
  &>dd {
    margin-left: 0;
    grid-column-start: values;
    &::before {
      content: "➡";
      margin-right: 2ch;
      color: color-mix(in hsl, var(--bg-color) 30%, var(--fg-color) 70%);
    }
  }
}

fieldset#detail-grade-picker {
  border-color: color-mix(in hsl, var(--accent-color) 50%, var(--fg-color) 50%);
  display: flex;
  align-items: baseline;

  label {
    flex-grow: 1;
    margin-left: 0.5ch;
  }

  input,label {
    cursor: pointer;
  }

  /* input[type="radio"]:checked+label {
    text-decoration-line: underline;
    text-decoration-color: var(--accent-color);
  } */
}


/* hide items with .detail-default-hide if the corresponding .detail-show-(all|simplified|short) is not currently active */
body:not(:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="all"]:checked)) .detail-default-hide.detail-show-all {
  display: none;
}
body:not(:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="simplified"]:checked)) .detail-default-hide.detail-show-simplified {
  display: none;
}
body:not(:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="short"]:checked)) .detail-default-hide.detail-show-short {
  display: none;
}

/* hide items with .detail-hide-(all|simplified|short) if the corresponding radio button is active */
body:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="all"]:checked) .detail-hide-all {
  display: none;
}
body:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="simplified"]:checked) .detail-hide-simplified {
  display: none;
}
body:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="short"]:checked) .detail-hide-short {
  display: none;
}