/* ============================================================================= MercyCreation — Design System Signatur-Konzept: die kantige, facettierte Geometrie des Markenzeichens zieht sich durch Hintergrund, Karten und Formensprache — wie ein geschliffener Stein statt eines generischen dunklen SaaS-Interfaces. ============================================================================= */ :root { --bg-base: #0a0d12; --bg-surface: #12161f; --bg-surface-2: #171c27; --bg-surface-3: #1d2430; /* Primärer Markenakzent: dunkles, kräftiges Blau */ --accent-cyan: #4a6fe3; --accent-cyan-dim: rgba(74, 111, 227, 0.14); /* Sekundärer Akzent: dunkles Rot, bewusst sparsam eingesetzt */ --accent-violet: #9c2b33; --accent-violet-dim: rgba(156, 43, 51, 0.14); /* Silber: neutrale Metall-Note für Kanten/Hairlines */ --accent-silver: #b8c0cc; --accent-silver-dim: rgba(184, 192, 204, 0.14); --accent-amber: #f0b429; --accent-amber-dim: rgba(240, 180, 41, 0.14); --accent-red: #f0555a; --accent-red-dim: rgba(240, 85, 90, 0.14); --text-primary: #f5f7fa; --text-secondary: #8a93a6; --text-tertiary: #545e70; --border-subtle: #1f2530; --border-default: #2a3140; --border-strong: #3a4356; --font-display: 'Space Grotesk', var(--font-sans); --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --radius-sm: 7px; --radius-md: 12px; --radius-lg: 18px; --facet-cut: 22px; } /* ----------------------------------------------------------------------- Light Theme — aktiviert via ----------------------------------------------------------------------- */ :root[data-theme='light'] { --bg-base: #f6f7fa; --bg-surface: #ffffff; --bg-surface-2: #f0f2f6; --bg-surface-3: #e7eaf0; --text-primary: #12161f; --text-secondary: #5b6472; --text-tertiary: #8a93a6; --border-subtle: #e7eaf0; --border-default: #d8dce4; --border-strong: #c3c9d4; } :root[data-theme='light'] .cell-grid .cell { background: var(--bg-surface-3); } :root[data-theme='light'] .btn-google { border: 1px solid var(--border-default); } :root[data-theme='light'] ::selection { background: var(--accent-cyan-dim); color: #0a5c54; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg-base); color: var(--text-primary); font-family: var(--font-sans); min-height: 100vh; transition: background-color 0.25s ease, color 0.25s ease; } ::selection { background: var(--accent-cyan-dim); color: var(--accent-cyan); } /* ----------------------------------------------------------------------- Facet Background — das Signatur-Hintergrundelement, abgeleitet aus der Geometrie des Markenzeichens (echte Dreiecks-Triangulation, kein Muster) ----------------------------------------------------------------------- */ .facet-bg { position: fixed; inset: 0; z-index: 0; background-image: url('/assets/facet-bg.svg'); background-size: cover; background-position: center; pointer-events: none; } .facet-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 65% 55% at 50% 38%, rgba(10, 13, 18, 0.55) 0%, var(--bg-base) 82%); } /* Zellen-Raster bleibt für das Dashboard erhalten (Kontext: laufende Container) */ .cell-grid { position: fixed; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; padding: 6px; overflow: hidden; pointer-events: none; } .cell-grid .cell { aspect-ratio: 1; border-radius: 4px; background: var(--bg-surface); opacity: 0.25; } .cell-grid .cell.lit { animation: cell-pulse 4.5s ease-in-out infinite; } .cell-grid .cell.lit.cyan { background: var(--accent-cyan); } .cell-grid .cell.lit.violet { background: var(--accent-violet); } @keyframes cell-pulse { 0%, 100% { opacity: 0.06; } 50% { opacity: 0.55; } } .cell-grid::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 35%, transparent 0%, var(--bg-base) 78%); } @media (prefers-reduced-motion: reduce) { .cell-grid .cell.lit { animation: none; opacity: 0.2; } } /* ----------------------------------------------------------------------- Typography ----------------------------------------------------------------------- */ .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); } .display-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; background: linear-gradient(120deg, var(--text-primary) 30%, var(--accent-cyan) 65%, var(--accent-violet) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ----------------------------------------------------------------------- Faceted card — angeschnittene Ecke als durchgängiges Marken-Motiv, abgeleitet aus der Geometrie des Logos ----------------------------------------------------------------------- */ .terminal-card { position: relative; background: var(--bg-surface); border: 1px solid var(--border-subtle); clip-path: polygon( 0 0, calc(100% - var(--facet-cut)) 0, 100% var(--facet-cut), 100% 100%, 0 100% ); overflow: hidden; box-shadow: 0 24px 70px -24px rgba(0, 0, 0, 0.65); } /* Feine Goldkante entlang des Facettenschnitts als Signatur-Detail */ .terminal-card::before { content: ''; position: absolute; top: 0; right: 0; width: calc(var(--facet-cut) * 1.42); height: calc(var(--facet-cut) * 1.42); background: linear-gradient(135deg, transparent 48%, rgba(184, 192, 204, 0.5) 49.5%, transparent 51%); pointer-events: none; } .terminal-tab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 16px; background: var(--bg-surface-2); border-bottom: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); } .terminal-tab .dot-row { display: none; } /* ----------------------------------------------------------------------- LED status indicator ----------------------------------------------------------------------- */ .led { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; position: relative; } .led.running { background: var(--accent-cyan); box-shadow: 0 0 8px 1px var(--accent-cyan); } .led.running::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--accent-cyan); animation: led-ring 2s ease-out infinite; } .led.starting { background: var(--accent-amber); box-shadow: 0 0 8px 1px var(--accent-amber); animation: led-blink 1s ease-in-out infinite; } .led.stopped { background: var(--border-strong); } .led.error { background: var(--accent-red); box-shadow: 0 0 8px 1px var(--accent-red); } @keyframes led-ring { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0; transform: scale(2.2); } } @keyframes led-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .led.running::after, .led.starting { animation: none; } } /* ----------------------------------------------------------------------- Form elements ----------------------------------------------------------------------- */ .field { width: 100%; background: var(--bg-surface-2); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 11px 14px; font-size: 14px; font-family: var(--font-sans); color: var(--text-primary); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .field::placeholder { color: var(--text-tertiary); } .field:focus { outline: none; border-color: var(--accent-cyan); box-shadow: 0 0 0 3px var(--accent-cyan-dim); } .field:-webkit-autofill, .field:-webkit-autofill:hover, .field:-webkit-autofill:focus { -webkit-text-fill-color: var(--text-primary); -webkit-box-shadow: 0 0 0px 1000px var(--bg-surface-2) inset; transition: background-color 5000s ease-in-out 0s; } /* ----------------------------------------------------------------------- Buttons ----------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 14px; font-weight: 500; cursor: pointer; transition: transform 0.12s ease, filter 0.15s ease, background 0.15s ease; } .btn:active { transform: scale(0.98); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--accent-cyan), var(--accent-violet)); color: #0a0d12; padding: 12px 18px; } .btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.5s ease; } .btn-primary:hover::before { transform: translateX(100%); } .btn-primary:hover { filter: brightness(1.05); } .btn-google { background: #f5f7fa; color: #1a1d24; padding: 11px 16px; } .btn-google:hover { background: #ffffff; } .btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-default); padding: 8px 14px; } .btn-ghost:hover { border-color: var(--border-strong); color: var(--text-primary); } .btn-danger-ghost { background: transparent; color: var(--text-tertiary); padding: 8px; } .btn-danger-ghost:hover { color: var(--accent-red); } /* ----------------------------------------------------------------------- Segmented tab toggle (Anmelden / Registrieren) ----------------------------------------------------------------------- */ .segmented { display: flex; background: var(--bg-surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 3px; gap: 3px; } .segmented button { flex: 1; background: transparent; border: none; border-radius: 6px; padding: 7px 0; font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .segmented button.active { background: var(--bg-surface-3); color: var(--text-primary); } /* ----------------------------------------------------------------------- Hero logo — moderates, freistehendes Markenzeichen mit facettiertem Glow ----------------------------------------------------------------------- */ .hero-logo-wrap { position: relative; display: inline-block; margin-bottom: 20px; } .hero-logo-glow { position: absolute; top: 50%; left: 50%; width: 220px; height: 220px; transform: translate(-50%, -50%) rotate(45deg); background: linear-gradient(135deg, rgba(74, 111, 227, 0.4), rgba(156, 43, 51, 0.28)); filter: blur(38px); z-index: 0; opacity: 0.85; } .hero-logo-wrap img { position: relative; z-index: 1; display: block; width: 155px; height: auto; margin: 0 auto; filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.55)); } /* ----------------------------------------------------------------------- Theme toggle ----------------------------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--bg-surface-2); border: 1px solid var(--border-default); color: var(--text-secondary); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .theme-toggle:hover { color: var(--accent-cyan); border-color: var(--border-strong); } .theme-toggle svg { display: block; } .theme-toggle .icon-sun { display: none; } :root[data-theme='light'] .theme-toggle .icon-moon { display: none; } :root[data-theme='light'] .theme-toggle .icon-sun { display: block; } /* ----------------------------------------------------------------------- Orchestrierte Eingangs-Sequenz: Logo → Name → Untertitel → Karte, nacheinander statt alles gleichzeitig ----------------------------------------------------------------------- */ @keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .rise-in { animation: rise-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; } .rise-in-1 { animation: rise-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both; } .rise-in-2 { animation: rise-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both; } .rise-in-3 { animation: rise-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both; } .rise-in-4 { animation: rise-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; } .accent-line { width: 0; height: 1px; margin: 10px auto 0; background: linear-gradient(90deg, transparent, var(--accent-violet), transparent); animation: draw-line 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards; } @keyframes draw-line { from { width: 0; opacity: 0; } to { width: 120px; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .rise-in, .rise-in-1, .rise-in-2, .rise-in-3, .rise-in-4 { animation: none; } .accent-line { width: 120px; animation: none; } .btn-primary::before { display: none; } }