/* ===================================================================== Leveluphost — "nova" Theme (portiert aus Claude Design) Alle Farben sind CSS-Variablen -> das Theme ist komplett hier re-skinbar. mode = data-mode, accent = data-accent auf . Standard: dunkel + violett. ===================================================================== */ /* ---------- AKZENT-RAMPEN (Standard: rot) ---------- */ :root, [data-accent="red"] { --a-50:255 241 241; --a-100:255 224 224; --a-200:254 199 199; --a-300:252 156 156; --a-400:249 96 96; --a-500:239 45 45; --a-600:214 26 26; --a-700:178 20 20; --a-800:147 20 20; --a-900:122 22 22; --a-950:66 8 8; } [data-accent="violet"] { --a-50:245 243 255; --a-100:237 233 254; --a-200:221 214 254; --a-300:196 181 253; --a-400:167 139 250; --a-500:139 92 246; --a-600:124 58 237; --a-700:109 40 217; --a-800:91 33 182; --a-900:76 29 149; --a-950:46 16 101; } [data-accent="pink"] { --a-50:253 242 248; --a-100:252 231 243; --a-200:251 207 232; --a-300:249 168 212; --a-400:244 114 182; --a-500:236 72 153; --a-600:219 39 119; --a-700:190 24 93; --a-800:157 23 77; --a-900:131 24 67; --a-950:80 7 36; } [data-accent="cyan"] { --a-50:236 254 255; --a-100:207 250 254; --a-200:165 243 252; --a-300:103 232 249; --a-400:34 211 238; --a-500:6 182 212; --a-600:8 145 178; --a-700:14 116 144; --a-800:21 94 117; --a-900:22 78 99; --a-950:8 51 68; } /* ---------- FLÄCHEN / INK / LINIEN ---------- */ :root, [data-mode="dark"] { --canvas:8 8 9; --surface:16 16 18; --elevated:24 24 27; --sunken:11 11 13; --ink-strong:250 250 251; --ink:206 206 210; --ink-muted:145 145 152; --ink-subtle:104 104 111; --ink-invert:8 8 9; --line:32 32 36; --line-strong:52 52 58; color-scheme: dark; } [data-mode="light"] { --canvas:249 249 251; --surface:255 255 255; --elevated:255 255 255; --sunken:243 243 246; --ink-strong:17 17 22; --ink:52 52 62; --ink-muted:100 100 112; --ink-subtle:146 146 158; --ink-invert:255 255 255; --line:229 229 234; --line-strong:206 206 214; color-scheme: light; } /* ---------- FONTS (theme-scoped, überschreibt kompiliertes --font-sans) ---------- */ html, body, .font-sans { font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif, "Twemoji Country Flags"; } .font-display{ font-family:"Space Grotesk", ui-sans-serif, system-ui, sans-serif; } .font-mono { font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; } /* ---------- BASE ---------- */ html, body { background: rgb(var(--canvas)); color: rgb(var(--ink)); } /* Sticky-Footer: Footer immer am unteren Rand, auch bei wenig/keinem Inhalt */ html, body { min-height: 100vh; } body { display: flex; flex-direction: column; } body > main { flex: 1 0 auto; } body > footer { flex-shrink: 0; margin-top: auto; } * { -webkit-tap-highlight-color: transparent; } body { font-feature-settings: "cv05","ss01"; text-rendering: optimizeLegibility; } ::selection { background: rgb(var(--a-500) / .28); color: rgb(var(--ink-strong)); } h1,h2,h3,h4,h5,h6 { font-family:"Space Grotesk", ui-sans-serif, system-ui, sans-serif; color: rgb(var(--ink-strong)); letter-spacing:-.01em; } a { transition: color .15s ease; } /* ---------- UTILITIES OHNE VARIANTEN (theme-scoped) ---------- */ .max-w-8xl { max-width: 88rem; } .shadow-soft { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.25); } .shadow-card { box-shadow: 0 1px 0 0 rgb(255 255 255 / 0.02) inset, 0 8px 24px -12px rgb(0 0 0 / 0.5); } .shadow-pop { box-shadow: 0 16px 48px -12px rgb(0 0 0 / 0.55); } .shadow-glow { box-shadow: 0 0 0 1px rgb(var(--a-500) / 0.35), 0 12px 40px -12px rgb(var(--a-500) / 0.45); } .animate-pulse-dot { animation: pulse-dot 1.8s ease-in-out infinite; } @keyframes pulse-dot { 0%,100% { opacity:1 } 50% { opacity:.35 } } /* ---------- SCROLLBAR ---------- */ * { scrollbar-width: thin; scrollbar-color: rgb(var(--line-strong)) transparent; } *::-webkit-scrollbar { width:10px; height:10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: rgb(var(--line-strong)); border:3px solid rgb(var(--canvas)); border-radius:999px; } *::-webkit-scrollbar-thumb:hover { background: rgb(var(--ink-subtle)); } .no-scrollbar::-webkit-scrollbar { display:none; } .no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; } /* ---------- DECOR HELPERS ---------- */ .bg-grid, .bg-dots { background-image: none; } /* ---------- MODERNE, WEICHE GEOMETRIE ---------- */ :root { --r: 10px; --r-lg: 16px; } .bg-surface, .bg-elevated { border-radius: var(--r-lg); overflow: hidden; } .bg-surface { background-image: linear-gradient(180deg, rgb(255 255 255 / .025), rgb(255 255 255 / 0) 44%); } .bg-sunken, .bg-accent-500, .bg-danger-500, .bg-success-500, .bg-warning-500, .border-line-strong, .grid.place-items-center, [class*="-500/1"], [class*="-500/8"], input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea, button { border-radius: var(--r); } .rounded-full { border-radius: 9999px !important; } .accent-text { background: linear-gradient(120deg, rgb(var(--a-300)), rgb(var(--a-500)) 60%, rgb(var(--a-600))); -webkit-background-clip: text; background-clip: text; color: transparent; } .glow-accent { box-shadow: 0 0 0 1px rgb(var(--a-500) / .30), 0 20px 70px -20px rgb(var(--a-500) / .55); } .ring-accent-soft { box-shadow: 0 0 0 1px rgb(var(--a-500) / .20); } .hairline { border-color: rgb(var(--line)); } .divide-hairline > * + * { border-color: rgb(var(--line)); } /* radial accent aura for heroes/CTAs */ .aura::before { content:""; position:absolute; inset:-1px; pointer-events:none; z-index:0; background: radial-gradient(55% 110% at 88% -12%, rgb(var(--a-500) / .26), transparent 60%), radial-gradient(45% 95% at 2% 4%, rgb(var(--a-600) / .14), transparent 55%); } /* ---------- INTERACTIVE PANELS (dropdowns) ---------- */ .menu-panel { opacity:0; transform: translateY(6px) scale(.985); transform-origin: top; pointer-events:none; transition: opacity .16s ease, transform .16s cubic-bezier(.2,.7,.3,1); } .menu-panel[data-open="true"] { opacity:1; transform:none; pointer-events:auto; } /* ---------- MOBILE DRAWER ---------- */ .drawer { transform: translateX(100%); transition: transform .28s cubic-bezier(.3,.8,.3,1); } .drawer[data-open="true"] { transform:none; } .drawer-backdrop { opacity:0; pointer-events:none; transition: opacity .28s ease; } .drawer-backdrop[data-open="true"] { opacity:1; pointer-events:auto; } /* ---------- SEGMENTED CONTROL ---------- */ .seg { position:relative; } .seg input { position:absolute; opacity:0; inset:0; cursor:pointer; } .seg-opt { transition: color .15s ease; } .seg input:checked + .seg-opt { color: rgb(var(--ink-strong)); } /* ---------- TOGGLE SWITCH ---------- */ .switch { width:44px; height:24px; border-radius:999px; background: rgb(var(--line-strong)); position:relative; transition: background .18s ease; cursor:pointer; flex:none; } .switch::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:999px; background:#fff; transition: transform .18s cubic-bezier(.3,.8,.3,1); box-shadow:0 1px 2px rgb(0 0 0/.4); } .switch[aria-checked="true"] { background: rgb(var(--a-500)); } .switch[aria-checked="true"]::after { transform: translateX(20px); } /* ---------- TOASTS ---------- */ #toast-stack { position:fixed; z-index:80; right:16px; bottom:16px; display:flex; flex-direction:column; gap:10px; } .toast { animation: toast-in .28s cubic-bezier(.2,.7,.3,1) both; } @keyframes toast-in { 0%{opacity:0; transform: translateY(12px) scale(.97);} 100%{opacity:1; transform:none;} } /* ---------- FORM NORMALISE (accent-consistent) ---------- */ input[type="checkbox"], input[type="radio"] { accent-color: rgb(var(--a-500)); } input::placeholder, textarea::placeholder { color: rgb(var(--ink-subtle)); } /* reveal-on-scroll (progressive; ohne JS wird alles gezeigt) */ [data-reveal] { opacity:0; transform: translateY(14px); } [data-reveal].is-in { animation: fade-up-r .6s cubic-bezier(.2,.7,.3,1) both; } @keyframes fade-up-r { to { opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } [data-reveal] { opacity:1; transform:none; } } /* ---------- LEGACY-KOMPATIBLE CUSTOM-KLASSEN (auf Design-Tokens) ---------- */ .theme-card { background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: var(--r-lg); padding: 1.5rem; box-shadow: 0 8px 24px -12px rgb(0 0 0 / .5); } .theme-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: rgb(var(--a-500)); color: #fff; border: none; cursor: pointer; border-radius: var(--r); padding: .625rem 1.25rem; font-weight: 600; transition: background .15s ease; } .theme-button:hover { background: rgb(var(--a-400)); } .theme-input { background: rgb(var(--sunken)); border: 1px solid rgb(var(--line)); color: rgb(var(--ink-strong)); border-radius: var(--r); padding: .625rem .875rem; width: 100%; } .theme-input:focus { outline: none; border-color: rgb(var(--a-500)); box-shadow: 0 0 0 2px rgb(var(--a-500) / .30); } .theme-table { width: 100%; border-collapse: collapse; } .theme-table th, .theme-table td { padding: .75rem; text-align: left; border-bottom: 1px solid rgb(var(--line)); color: rgb(var(--ink)); } .theme-table th { color: rgb(var(--ink-strong)); font-weight: 600; } .account-page { padding: 2rem 0; } .account-card { background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: var(--r-lg); padding: 1.5rem; margin-bottom: 1.5rem; } .account-card h1, .account-card h2 { color: rgb(var(--ink-strong)); margin-bottom: 1rem; } .prose { color: rgb(var(--ink-muted)); } .prose h1, .prose h2, .prose h3 { color: rgb(var(--ink-strong)); } .prose i { margin-right: .25rem; } .product-option-select, #laufzeit-select { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; background-color: rgb(var(--sunken)) !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--r) !important; color: rgb(var(--ink-strong)) !important; padding: .75rem 2.5rem .75rem 1rem !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important; background-position: right .75rem center !important; background-repeat: no-repeat !important; background-size: 1.25rem !important; } .product-option-select:focus, #laufzeit-select:focus { outline: none !important; border-color: rgb(var(--a-500)) !important; box-shadow: 0 0 0 2px rgb(var(--a-500) / .30) !important; } /* ---------- Solide Farbflächen (Buttons/Badges) IMMER weiße Schrift ---------- Korrigiert den pauschalen text-white->text-ink-strong-Remap, damit Accent-/Status-Buttons auch im Light-Mode korrekten Kontrast haben. Low-Opacity-Chips (bg-accent-500/15 etc.) sind eine andere Klasse -> unberührt. */ .bg-accent-500, .bg-accent-600, .bg-accent-700, .bg-danger-500, .bg-danger-600, .bg-success-500, .bg-success-600 { color: #fff; }