pay/web/static/styles.css

:root {
  --ratio: 1.5;
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --measure: 60ch;
  /* System font stack, see: https://systemfontstack.com/ */
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    avenir next,
    avenir,
    segoe ui,
    helvetica neue,
    helvetica,
    Cantarell,
    Ubuntu,
    roboto,
    noto,
    arial,
    sans-serif;
  font-size: calc(1rem + 0.5vw);
  line-height: var(--ratio);
  color-scheme: light;
}

* {
  box-sizing: border-box;
  max-inline-size: var(--measure);
}

html,
body,
div,
header,
nav,
main,
footer {
  max-inline-size: none;
}

svg {
  height: 1em;
  width: 1em;
}

/* Input */
input,
select {
  font-size: inherit;
}

/* Button */
.button,
button {
  --_background: var(--background, hsl(0, 0%, 80%));
  --_color: var(--color, hsl(0, 0%, 0%));
  /* NOTE(toby3d): reset everything */
  all: unset;
  /* NOTE(toby3d): start from scratch */
  align-items: center;
  background: var(--_background);
  border-radius: 0.3125em;
  color: var(--_color);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 1rem;
  justify-content: center;
  list-style: 1.1;
  min-width: 6.25em;
  padding: 0.625em 1em;
  text-align: center;
}

.button[href*='liberapay.com'],
button[href*='liberapay.com'] {
  --background: hsl(48, 93%, 52%);
  --color: hsl(285, 8%, 10%);
}

.button[href*='paypal.me'],
button[href*='paypal.me'] {
  --background: hsl(46, 100%, 63%);
  --color: hsl(217, 100%, 10%);
}

.button[href*='yoomoney.ru'],
button[href*='yoomoney.ru'] {
  --background: hsl(264, 98%, 62%);
  --color: hsl(0, 0%, 100%);
}

.button[href*='ko-fi.com'],
button[href*='ko-fi.com'] {
  --background: hsl(199, 100%, 42%);
  --color: hsl(0, 0%, 100%);
}

.with-icon .icon,
.button .icon,
.button svg,
button .icon,
button svg {
  height: 0.8lh;
  margin-inline-end: 0.25rem;
  width: auto;
}

/* Button behavior, see: https://bitsofco.de/when-do-the-hover-focus-and-active-pseudo-classes-apply/ */
.button:hover,
button:hover {
  /* TODO(toby3d): better color mathing with good WCAG grading */
  --background: #1d49aa;
}

/* See: https://bitsofco.de/when-is-focus-visible-visible/ */
.button:focus-visible,
.button:focus,
button:focus-visible,
button:focus {
  outline: 4px solid #cbd6ee;
}

/* See: https://bitsofco.de/when-is-focus-visible-visible/ */
.button:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

.button:active,
button:active {
  /* TODO(toby3d): better color mathing with good WCAG grading */
  --background: green;
}

.button:not([href]),
button[disabled] {
  /* TODO(toby3d): better color mathing with good WCAG grading */
  --background: hsl(0, 0%, 60%);
  --color: hsl(0, 0%, 15%);
  cursor: not-allowed;
}

.button:not([href]) .icon,
.button:not([href]) svg,
button[disabled] .icon,
button[disabled] svg {
  filter: grayscale(1);
}

/* Cluster */
.cluster {
  --_align: var(--align, flex-start);
  --_justify: var(--justify, flex-start);
  --_space: var(--space, var(--s1));
  align-items: var(--_align);
  display: flex;
  flex-wrap: wrap;
  gap: var(--_space);
  justify-content: var(--_justify);
}

/* Blocks */
.visually-hidden {
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.form {
  --space: 1cap;
}

.form__amount {
  width: 7ch;
}

/* Utilities */
.list-style-type\:none {
  list-style-type: none;
}

.padding-inline-start\:unset {
  padding-inline-start: unset;
}

.display\:none,
[hidden] {
  display: none !important;
}