57 lines
1.2 KiB
CSS
57 lines
1.2 KiB
CSS
:root {
|
|
/* Farbpalette: warm, kindgerecht, kontrastreich */
|
|
--c-sky-top: #1a2c5c;
|
|
--c-sky-bottom: #6fb3ff;
|
|
--c-ground: #6cc26c;
|
|
--c-cloud: #f5f9ff;
|
|
--c-rocket-body: #ff6b6b;
|
|
--c-rocket-window: #ffe566;
|
|
--c-rocket-fin: #4a4a6e;
|
|
--c-flame-inner: #fff4b3;
|
|
--c-flame-outer: #ff8a3d;
|
|
--c-star: #ffe34a;
|
|
--c-correct: #5fd07a;
|
|
--c-text: #1f1f3a;
|
|
--c-text-on-dark: #ffffff;
|
|
|
|
--shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.18);
|
|
--radius-card: 24px;
|
|
--radius-pill: 999px;
|
|
--tap-min: 96px;
|
|
|
|
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
|
-webkit-tap-highlight-color: transparent;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
html, body, #app {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(to bottom, var(--c-sky-top) 0%, var(--c-sky-bottom) 100%);
|
|
color: var(--c-text);
|
|
overflow: hidden;
|
|
}
|
|
|
|
button {
|
|
font-family: inherit;
|
|
border: none;
|
|
cursor: pointer;
|
|
background: none;
|
|
padding: 0;
|
|
color: inherit;
|
|
}
|
|
|
|
button:focus-visible {
|
|
outline: 4px solid var(--c-rocket-window);
|
|
outline-offset: 4px;
|
|
}
|