dogfather-universe/workspace/assets/css/spendenkarte.css

/* =====================================================================
   DIE SPENDENKARTE (28.09.2026)

   Eigenes Stilblatt, weil dieselbe Karte an zwei Orten laeuft: in der
   Reaction-Seite und -- spaeter -- als eigene Seite fuer OBS und
   TikTok Studio. Zweimal gestaltet hiesse: Bei der naechsten
   Aenderung sieht sie an einem der beiden Orte anders aus, und man
   merkt es erst im Livestream.

   SIE IST GROSS, KURZ UND WEG. Wer etwas gibt, soll es sehen; wer
   zusieht, soll das Video nicht verlieren. Deshalb kommt sie von der
   Seite, steht ein paar Sekunden am Rand und geht wieder -- sie
   deckt nie die Mitte zu.
   ===================================================================== */
.spendentafel {
  position: absolute;
  left: 0; right: 0; bottom: 84px;
  z-index: 45;
  display: grid; gap: 10px;
  justify-items: start;
  padding: 0 18px;
  pointer-events: none;
}

/* ==== DIE GROESSE ==================================================

   Filipe: „auch so dass ich das anders gestalten kann oder die
   größe verändern kann."

   EINE SCHRIFTGRÖSSE UND NICHT ZEHN EINZELWERTE. Die Karte setzt
   ihre eigene Grundgröße aus `--sp-gross`, und alles darin rechnet
   in `em` — Abstände, Rundungen, das Zeichen, jede Schrift. Ein
   Faktor, und die ganze Karte wächst gleichmäßig mit.

   Der naheliegende Weg wäre `transform: scale()` gewesen. Der geht
   hier nicht: Die Karte kommt mit `transform: translateX()` herein,
   und zwei `transform` an derselben Stelle schließen einander aus —
   entweder die Größe oder die Bewegung. Außerdem skaliert `scale()`
   auch die Schriftglättung mit, und Text wird dabei sichtbar
   matschig. Eine Schriftgröße tut das nicht. */
.spendenkarte {
  --sp-farbe: #8ec9ff;
  --sp-gross: 1;
  font-size: calc(1rem * var(--sp-gross));
  display: flex; align-items: center; gap: .875em;
  max-width: min(30em, 78%);
  padding: .8125em 1.25em .8125em .875em;
  border-radius: 1.125em;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--sp-farbe) 26%, rgba(10, 8, 16, .92)),
      rgba(10, 8, 16, .92) 58%);
  border: 1px solid color-mix(in srgb, var(--sp-farbe) 55%, transparent);
  box-shadow:
    0 0 40px -14px var(--sp-farbe),
    0 24px 50px -22px #000,
    inset 0 1px 0 color-mix(in srgb, var(--sp-farbe) 40%, transparent);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  /* Die Karte kommt von links herein. `translate` und `opacity`
     rechnet der Browser auf der Grafikkarte -- alles andere
     (Breite, Rand, Abstand) laesst das Bild ruckeln, und ein
     ruckelnder Dank ist schlimmer als keiner. */
  opacity: 0;
  transform: translateX(-28px) scale(.96);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, 1, .3, 1);
}
.spendenkarte[data-da="ja"] { opacity: 1; transform: none; }

.spendenkarte__bild {
  flex: none;
  width: 3.375em; height: 3.375em;
  display: grid; place-items: center;
}
.spendenkarte__bild svg { width: 100%; height: 100%; }
.spendenkarte__bild img {
  width: 100%; height: 100%;
  /* `contain` und nicht `cover`: Ein hochgeladenes Zeichen soll ganz
     zu sehen sein. Wer sein Logo hochlädt, will es nicht beschnitten
     wiederfinden. */
  object-fit: contain;
  border-radius: .625em;
}

.spendenkarte__text { display: grid; gap: 1px; min-width: 0; }
.spendenkarte__wer {
  font-size: .8em; font-weight: 700;
  letter-spacing: .03em;
  color: color-mix(in srgb, var(--sp-farbe) 30%, #ffffff);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spendenkarte__betrag {
  font-size: 1.62em; font-weight: 900;
  letter-spacing: -.02em; line-height: 1.05;
  color: #ffffff;
  /* Der Betrag ist das, worum es geht -- er bekommt als Einziges
     einen eigenen Schein. */
  text-shadow: 0 0 22px color-mix(in srgb, var(--sp-farbe) 60%, transparent);
}
.spendenkarte__stufe {
  font-size: .72em; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--sp-farbe) 22%, #ffffff);
}
.spendenkarte__gruss {
  margin: .3125em 0 0;
  font-size: .86em; line-height: 1.4;
  color: #e9e6f2;
  /* Hoechstens drei Zeilen. Ein langer Gruss darf das Bild nicht
     zuwachsen -- und wer mehr schreiben will, schreibt in den Chat. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Wer weniger Bewegung eingestellt hat, bekommt die Karte trotzdem --
   sie steht dann einfach da. Die Aussage ist wichtiger als der Weg. */
@media (prefers-reduced-motion: reduce) {
  .spendenkarte { transition: opacity .2s linear; transform: none; }
}

@media (max-width: 860px) {
  .spendentafel { bottom: 12px; padding: 0 10px; }
  .spendenkarte {
    max-width: 92%;
    gap: .625em; padding: .625em .875em .625em .625em;
  }
  .spendenkarte__bild { width: 2.625em; height: 2.625em; }
  .spendenkarte__betrag { font-size: 1.3em; }
}