admin
c998242cc6
WebView öffnete zoomed-in → Inhalt größer als Viewport → scrollbar. maximum-scale/user-scalable=no im Viewport-Meta + text-size-adjust und touch-action: manipulation sperren Pinch-/Auto-Zoom. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
129 lines
3.6 KiB
CSS
129 lines
3.6 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Nunito:wght@400;500;600;700;800&display=swap');
|
||
|
||
/* ── Design Tokens ──────────────────────────────────────────────
|
||
Single source of truth. Warmes, ruhiges Konzept – nur diszipliniert.
|
||
Bestehende Palette normalisiert (ein Grün, ein Rot, klare Skalen). */
|
||
:root {
|
||
/* Flächen & Hintergrund */
|
||
--bg: #EDE0CE; /* warmes Creme – App-Hintergrund */
|
||
--bg-2: #F2E8DA; /* leicht heller, für Sektionen */
|
||
--surface: #FBF7F0; /* Karten / Panels */
|
||
--surface-2: #F4EEE3; /* eingelassene Flächen, Tracks */
|
||
--surface-sunk: #ECE3D4; /* Vertiefungen / Heatmap-Leerzelle */
|
||
|
||
/* Text */
|
||
--text: #4A3728; /* primärer warmer Braunton */
|
||
--text-strong: #3A2515; /* Überschriften / Betonung */
|
||
--text-muted: #8C7A65; /* sekundär */
|
||
--text-soft: #A89F8C; /* tertiär / Hints */
|
||
|
||
/* Akzente */
|
||
--accent: #7A5C3A; /* Aktion / aktiv */
|
||
--accent-strong: #5C3D22;
|
||
--accent-soft: #EFE6D6; /* heller Akzent-Hintergrund (Pills) */
|
||
--gold: #C4A85A; /* EP / Belohnung */
|
||
--gold-soft: #F0E4C4;
|
||
--success: #3D7055; /* genau ein Grün */
|
||
--success-soft: #E4EDE5;
|
||
--danger: #C0544A; /* genau ein warmes Rot */
|
||
--danger-soft: #FBF0EF;
|
||
|
||
/* Linien */
|
||
--border: #DDD0BF;
|
||
--border-soft: #E7DDCD;
|
||
|
||
/* Spacing-Skala */
|
||
--sp-1: 4px;
|
||
--sp-2: 8px;
|
||
--sp-3: 12px;
|
||
--sp-4: 16px;
|
||
--sp-5: 24px;
|
||
--sp-6: 32px;
|
||
|
||
/* Radien */
|
||
--r-sm: 12px;
|
||
--r-md: 16px;
|
||
--r-lg: 22px;
|
||
--r-pill: 999px;
|
||
|
||
/* Schatten – warm getönt, nie hartes Schwarz */
|
||
--shadow-soft: 0 1px 2px rgba(60, 40, 20, 0.05), 0 2px 8px rgba(60, 40, 20, 0.06);
|
||
--shadow-card: 0 1px 2px rgba(60, 40, 20, 0.06), 0 4px 16px rgba(60, 40, 20, 0.09), 0 12px 40px rgba(60, 40, 20, 0.06);
|
||
--shadow-pop: 0 6px 24px rgba(60, 40, 20, 0.16);
|
||
|
||
/* Typografie */
|
||
--font-ui: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
--font-display: 'Lora', Georgia, serif;
|
||
|
||
/* Bewegung */
|
||
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
|
||
--dur-fast: 0.15s;
|
||
--dur: 0.28s;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
height: 100%;
|
||
width: 100%;
|
||
position: fixed;
|
||
inset: 0;
|
||
overflow: hidden;
|
||
overscroll-behavior: none;
|
||
-webkit-text-size-adjust: 100%;
|
||
text-size-adjust: 100%;
|
||
touch-action: manipulation;
|
||
}
|
||
|
||
body {
|
||
font-family: var(--font-ui);
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
height: 100dvh;
|
||
width: 100%;
|
||
position: fixed;
|
||
inset: 0;
|
||
overflow: hidden;
|
||
overscroll-behavior: none;
|
||
line-height: 1.7;
|
||
-webkit-font-smoothing: antialiased;
|
||
text-rendering: optimizeLegibility;
|
||
}
|
||
|
||
#root {
|
||
height: 100dvh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* Gemeinsamer, ruhiger Loader/Spinner */
|
||
@keyframes spin { to { transform: rotate(360deg); } }
|
||
|
||
.app-spinner {
|
||
width: 32px;
|
||
height: 32px;
|
||
border: 2px solid var(--border-soft);
|
||
border-top-color: var(--accent);
|
||
border-radius: 50%;
|
||
animation: spin 0.7s linear infinite;
|
||
}
|
||
|
||
/* Dezenter Seitenwechsel */
|
||
@keyframes pageEnter {
|
||
from { opacity: 0; transform: translateY(6px); }
|
||
to { opacity: 1; transform: none; }
|
||
}
|
||
.page-enter { animation: pageEnter var(--dur) var(--ease); }
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*, *::before, *::after {
|
||
animation-duration: 0.001ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: 0.001ms !important;
|
||
}
|
||
}
|