/* Stella Mascot — geteiltes CSS fuer alle Sloppy-Sites.
Loads:
Default-Stil: duotone (klar als Mascot lesbar, brand-konform).
*/
:root {
--stella-amber: #A47913; /* Brand-Amber fuer Borders/Akzente */
--stella-amber-dark: #6b4d0c; /* satt-dunkel fuer Text auf hellem BG */
--stella-amber-soft: #f3e3a6;
--stella-bubble-bg: #fff8e8;
--stella-bubble-border: #d9a93b;
--stella-bubble-text: #2d2000;
--stella-tag-text: #1f2937;
--stella-tag-bg: rgba(0,0,0,.06);
/* Tint-Aliase fuer subtile Akzente (Hover, Trenner, Dark-BG).
Diese duerfen NICHT hardcoded werden, sonst sieht jedes Modul
im Hover/Dark-Mode amber aus. */
--stella-tint-soft: rgba(164, 121, 19, 0.08); /* Dark-Mode-BG */
--stella-tint-mid: rgba(217, 169, 59, 0.18); /* Hover-BG */
--stella-tint-border: rgba(217, 169, 59, 0.30); /* Trenner-Border */
--stella-glow: #fde68a; /* Text auf Dark-BG */
}
/* Modul-spezifische Brand-Adoption.
Per matcht die jeweilige App
und ueberschreibt die Stella-CSS-Variablen mit der Brand-Palette
des Moduls. Stella-Block/Card/Bubble/Helper/Tour erben dann den
Modul-Look, statt ueberall amber-gold zu sein.
*/
body[data-app="scan"] {
/* SloppyScan: Indigo */
--stella-amber: #2E3CC6;
--stella-amber-dark: #1e2a8c;
--stella-amber-soft: #d8e0ff;
--stella-bubble-bg: #f1f4ff;
--stella-bubble-border: #6b7be0;
--stella-bubble-text: #1a1f3d;
--stella-tint-soft: rgba(46, 60, 198, 0.08);
--stella-tint-mid: rgba(107, 123, 224, 0.18);
--stella-tint-border: rgba(107, 123, 224, 0.30);
--stella-glow: #c5cdff;
}
body[data-app="fix"] {
/* SloppyFix: Forest-Green */
--stella-amber: #4a5a3a;
--stella-amber-dark: #2f3a23;
--stella-amber-soft: #d8e0c8;
--stella-bubble-bg: #f4f7ec;
--stella-bubble-border: #95a76d;
--stella-bubble-text: #1f2718;
--stella-tint-soft: rgba(74, 90, 58, 0.08);
--stella-tint-mid: rgba(149, 167, 109, 0.20);
--stella-tint-border: rgba(149, 167, 109, 0.32);
--stella-glow: #cfe0a8;
}
body[data-app="rent"] {
/* SloppyRent: Terra-Cotta */
--stella-amber: #A57C60;
--stella-amber-dark: #6e4f3c;
--stella-amber-soft: #ecd5c2;
--stella-bubble-bg: #f9f0e8;
--stella-bubble-border: #c89773;
--stella-bubble-text: #2a1d12;
--stella-tint-soft: rgba(165, 124, 96, 0.08);
--stella-tint-mid: rgba(200, 151, 115, 0.18);
--stella-tint-border: rgba(200, 151, 115, 0.30);
--stella-glow: #e6c8b3;
}
body[data-app="plan"] {
/* SloppyPlan: Purple */
--stella-amber: #824f9a;
--stella-amber-dark: #5a356b;
--stella-amber-soft: #e7d3f0;
--stella-bubble-bg: #f4ebf8;
--stella-bubble-border: #A878C0;
--stella-bubble-text: #2a1834;
--stella-tint-soft: rgba(130, 79, 154, 0.08);
--stella-tint-mid: rgba(168, 120, 192, 0.20);
--stella-tint-border: rgba(168, 120, 192, 0.32);
--stella-glow: #ddc1e8;
}
/* Pay (data-app="pay") + Universe = Default-Amber, kein Override noetig. */
/* Avatar — Default 96 px, runder Rand mit Brand-Akzent.
Default-Stil "wash" (subtle warm) fuer den grossen Avatar,
"original" fuer den kleinen sm-Avatar (User-Auswahl).
*/
.stella-avatar {
width: 96px; height: 96px;
border-radius: 50%;
background: var(--stella-amber-soft) url('https://sloppyuniverse.com/mascots/stella/stella-avatar-wash.jpg') center/cover;
border: 3px solid var(--stella-amber);
box-shadow: 0 2px 6px rgba(0,0,0,.10);
flex: 0 0 auto;
display: inline-block;
}
.stella-avatar.stella-avatar-sm {
width: 56px; height: 56px;
background-image: url('https://sloppyuniverse.com/mascots/stella/stella-avatar-sm-original.jpg');
border-width: 2px;
}
/* Override-Klassen — wenn Du explizit eine andere Stilisierung willst */
.stella-avatar.stella-avatar-warmsoft { background-image: url('https://sloppyuniverse.com/mascots/stella/stella-avatar-warmsoft.jpg'); }
.stella-avatar.stella-avatar-bw { background-image: url('https://sloppyuniverse.com/mascots/stella/stella-avatar-bw.jpg'); }
.stella-avatar.stella-avatar-duotone { background-image: url('https://sloppyuniverse.com/mascots/stella/stella-avatar-duotone.jpg'); }
.stella-avatar.stella-avatar-posterize { background-image: url('https://sloppyuniverse.com/mascots/stella/stella-avatar-posterize.jpg'); }
.stella-avatar.stella-avatar-original { background-image: url('https://sloppyuniverse.com/mascots/stella/stella-avatar-original.jpg'); }
.stella-avatar.stella-avatar-sm.stella-avatar-warmsoft { background-image: url('https://sloppyuniverse.com/mascots/stella/stella-avatar-sm-warmsoft.jpg'); }
.stella-avatar.stella-avatar-sm.stella-avatar-bw { background-image: url('https://sloppyuniverse.com/mascots/stella/stella-avatar-sm-bw.jpg'); }
.stella-avatar.stella-avatar-sm.stella-avatar-wash { background-image: url('https://sloppyuniverse.com/mascots/stella/stella-avatar-sm-wash.jpg'); }
.stella-avatar.stella-avatar-sm.stella-avatar-duotone { background-image: url('https://sloppyuniverse.com/mascots/stella/stella-avatar-sm-duotone.jpg'); }
.stella-avatar.stella-avatar-sm.stella-avatar-posterize { background-image: url('https://sloppyuniverse.com/mascots/stella/stella-avatar-sm-posterize.jpg'); }
/* Sprechblase — Avatar links, Text rechts */
.stella-block {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 16px 18px;
background: var(--stella-bubble-bg);
border: 1px solid var(--stella-bubble-border);
border-left-width: 4px;
border-radius: 12px;
margin: 0 0 18px;
position: relative;
}
.stella-block .stella-bubble {
flex: 1;
position: relative;
}
.stella-block .stella-name,
.stella-card .stella-name {
font-weight: 700;
font-size: .9rem;
letter-spacing: .02em;
color: var(--stella-amber-dark);
margin: 0 0 5px;
display: flex;
align-items: center;
gap: 8px;
}
.stella-block .stella-tag,
.stella-card .stella-tag {
font-size: .7rem;
font-weight: 600;
color: var(--stella-tag-text);
background: var(--stella-tag-bg);
padding: 2px 8px;
border-radius: 999px;
letter-spacing: .03em;
text-transform: uppercase;
}
.stella-block .stella-text,
.stella-card .stella-text {
color: var(--stella-bubble-text);
font-size: .95rem;
line-height: 1.5;
}
.stella-block .stella-text :first-child { margin-top: 0; }
.stella-block .stella-text :last-child { margin-bottom: 0; }
/* Card-Variante: kompakter, mit grossem Foto links */
.stella-card {
display: flex;
gap: 18px;
align-items: stretch;
padding: 0;
background: var(--stella-bubble-bg);
border: 1px solid var(--stella-bubble-border);
border-radius: 14px;
overflow: hidden;
margin: 0 0 18px;
}
.stella-card .stella-card-img {
width: 220px;
min-height: 200px;
flex: 0 0 auto;
/* center top: zeigt den Kopf statt der Brust beim Cover-Crop */
background: var(--stella-amber-soft) url('https://sloppyuniverse.com/mascots/stella/stella-card-wash.jpg') center top/cover;
}
.stella-card.stella-card-warmsoft .stella-card-img { background-image: url('https://sloppyuniverse.com/mascots/stella/stella-card-warmsoft.jpg'); }
.stella-card.stella-card-bw .stella-card-img { background-image: url('https://sloppyuniverse.com/mascots/stella/stella-card-bw.jpg'); }
.stella-card.stella-card-duotone .stella-card-img { background-image: url('https://sloppyuniverse.com/mascots/stella/stella-card-duotone.jpg'); }
.stella-card.stella-card-original .stella-card-img { background-image: url('https://sloppyuniverse.com/mascots/stella/stella-card-original.jpg'); }
.stella-card.stella-card-posterize .stella-card-img { background-image: url('https://sloppyuniverse.com/mascots/stella/stella-card-posterize.jpg'); }
/* Hero — fuer Landing/grossere Auftritte als ![]()
. Default = posterize. */
img.stella-hero,
.stella-hero img {
width: 100%;
max-width: 480px;
height: auto;
border-radius: 12px;
box-shadow: 0 4px 18px rgba(0,0,0,.12);
}
.stella-card .stella-card-body {
flex: 1;
padding: 18px 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Anekdote — kursiv, leicht ausgegraut, hängt unter dem Haupt-Text */
.stella-anecdote-row {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed var(--stella-tint-border);
font-size: .85rem;
color: var(--stella-amber-dark);
font-style: italic;
line-height: 1.45;
}
.stella-anecdote-row::before {
content: "Stella sagt noch: ";
font-style: normal;
font-weight: 600;
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--stella-amber-dark);
display: block;
margin-bottom: 3px;
opacity: .8;
}
[data-bs-theme="dark"] .stella-anecdote-row,
[data-theme="dark"] .stella-anecdote-row {
color: var(--stella-glow);
border-top-color: var(--stella-tint-border);
}
[data-bs-theme="dark"] .stella-anecdote-row::before,
[data-theme="dark"] .stella-anecdote-row::before {
color: var(--stella-glow);
}
/* Footer-Disclaimer */
.stella-disclaimer {
font-size: .8rem;
color: #4b5563;
text-align: center;
margin: 1.2rem auto 0;
max-width: 720px;
line-height: 1.5;
}
.stella-disclaimer strong { color: var(--stella-amber-dark); }
.stella-disclaimer a { color: #1f2937; text-decoration: underline; }
/* Dark-Mode — schaltet auf den EXPLIZITEN Theme-Toggle der App
([data-bs-theme="dark"] ODER [data-theme="dark"]), nicht auf
das OS-Setting. Sonst bekommt eine Light-Page bei Dark-OS-User
helle Stella-Schrift auf cremefarbenem Hintergrund — unlesbar.
*/
[data-bs-theme="dark"] .stella-block,
[data-bs-theme="dark"] .stella-card,
[data-theme="dark"] .stella-block,
[data-theme="dark"] .stella-card {
background: var(--stella-tint-soft);
border-color: var(--stella-tint-border);
color: var(--stella-glow);
}
[data-bs-theme="dark"] .stella-block .stella-name,
[data-bs-theme="dark"] .stella-card .stella-name,
[data-theme="dark"] .stella-block .stella-name,
[data-theme="dark"] .stella-card .stella-name { color: var(--stella-glow); }
[data-bs-theme="dark"] .stella-block .stella-text,
[data-bs-theme="dark"] .stella-card .stella-text,
[data-theme="dark"] .stella-block .stella-text,
[data-theme="dark"] .stella-card .stella-text { color: var(--stella-glow); }
[data-bs-theme="dark"] .stella-block .stella-tag,
[data-bs-theme="dark"] .stella-card .stella-tag,
[data-theme="dark"] .stella-block .stella-tag,
[data-theme="dark"] .stella-card .stella-tag {
color: #e5e7eb;
background: rgba(255, 255, 255, 0.10);
}
[data-bs-theme="dark"] .stella-disclaimer,
[data-theme="dark"] .stella-disclaimer { color: #cbd5e1; }
[data-bs-theme="dark"] .stella-disclaimer strong,
[data-theme="dark"] .stella-disclaimer strong { color: var(--stella-glow); }
/* Mobile: Card stackt. Bild quadratisch + center-Position 25% statt
"center top", damit das Portrait nicht waagrecht durch den Kopf
geschnitten wird. */
@media (max-width: 640px) {
.stella-card { flex-direction: column; }
.stella-card .stella-card-img {
width: 100%;
height: auto;
aspect-ratio: 16 / 11;
background-position: center 22%;
}
.stella-block { flex-direction: column; align-items: stretch; }
.stella-block .stella-avatar { align-self: flex-start; }
}
/* ──────────────────────────────────────────────────────────────
Stella-Helper — Floating-Button + Panel + Tour-Engine
Aktiviert durch