/** * cashlog.org — gemeinsame Tokens, Flächen & Landing-spezifische UI * HTML: als erstes Kind im * (nach Tailwind-CDN im ), damit diese Regeln nach der CDN-Injection sortiert werden. * Version in der Query bei CSS-Änderungen erhöhen (Cache-Bust). * CTA-Regeln: hohe Spezifität + !important gegen späte Tailwind-Regeln. */ :root { --mercury-ease: cubic-bezier(0.22, 1, 0.36, 1); --surface-border: #e2e8f0; /* Primär-CTAs: Logo-Mint (#00f0c8), Hover etwas tiefer */ --cta-primary: #00f0c8; --cta-primary-hover: #00d4b8; --cta-primary-text: #0f172a; /* Logo „C“ (sichtbar im Favicon / Nav-SVG) */ --logo-c: #00f0c8; --logo-c-rgb: 0, 240, 200; } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', system-ui, -apple-system, sans-serif; } .font-display { font-family: 'DM Serif Display', Georgia, serif; letter-spacing: 0.02em; } .heading-display { letter-spacing: 0.03em; } /* Unterseiten (Kauf, Legal, Kontakt) */ .legal-page { background-color: #fafbfc; background-image: linear-gradient(180deg, #fafbfc 0%, #f4f6f8 100%); min-height: 100vh; } /* Startseite: sichtbarer Verlauf links (Mint) → rechts (neutral) + vertikale Tiefe */ body.landing-page { background-color: #f3faf8; background-image: linear-gradient( 90deg, rgba(var(--logo-c-rgb), 0.2) 0%, rgba(var(--logo-c-rgb), 0.08) 18%, rgba(255, 255, 255, 0.45) 42%, rgba(250, 251, 252, 0.92) 62%, rgba(241, 244, 247, 0.98) 100% ), linear-gradient(180deg, #fafbfc 0%, #f0f4f6 52%, #e8eef2 100%); background-attachment: fixed; } .mercury-surface { background: rgba(255, 255, 255, 0.55); border: 1px solid var(--surface-border); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } .mercury-surface-elevated { background: rgba(255, 255, 255, 0.82); border: 1px solid var(--surface-border); box-shadow: 0 4px 24px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03); } .mercury-pill { border: 1px solid var(--surface-border); background: rgba(255, 255, 255, 0.45); color: #64748b; } .mercury-ease-transition { transition-property: color, background-color, border-color, box-shadow; transition-duration: 0.3s; transition-timing-function: var(--mercury-ease); } /* Hohe Spezifität + !important: Tailwind-CDN kann sonst später gewinnen (Buttons wirken „blau“ / Link-Default). */ a.btn-cta-primary, button.btn-cta-primary, input[type='submit'].btn-cta-primary, input[type='button'].btn-cta-primary { -webkit-appearance: none; appearance: none; text-decoration: none; border: 0 solid transparent; background-color: var(--cta-primary) !important; color: var(--cta-primary-text) !important; font-weight: 600; border-radius: 0.75rem; transition-property: background-color, box-shadow, transform; transition-duration: 0.28s; transition-timing-function: var(--mercury-ease); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 18px rgba(var(--logo-c-rgb), 0.35); } a.btn-cta-primary:hover:not(:disabled), button.btn-cta-primary:hover:not(:disabled), input[type='submit'].btn-cta-primary:hover:not(:disabled), input[type='button'].btn-cta-primary:hover:not(:disabled) { background-color: var(--cta-primary-hover) !important; color: var(--cta-primary-text) !important; box-shadow: 0 4px 20px rgba(var(--logo-c-rgb), 0.42), 0 1px 2px rgba(15, 23, 42, 0.05); } .btn-cta-primary:disabled { opacity: 0.42; cursor: not-allowed; box-shadow: none; } /* ——— Hero: stärkeres Mint (Logo‑C), CSS‑Einstiegs‑Animation (ohne JS), Hover‑Zoom ——— */ .hero-section { position: relative; isolation: isolate; } .hero-section::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; /* Mint (Logo‑C) stärker, mehrfach gelagert */ background: radial-gradient( ellipse 128% 95% at 58% 34%, rgba(var(--logo-c-rgb), 0.36) 0%, rgba(var(--logo-c-rgb), 0.2) 28%, rgba(var(--logo-c-rgb), 0.09) 46%, rgba(255, 255, 255, 0) 64% ), radial-gradient( ellipse 72% 55% at 18% 72%, rgba(var(--logo-c-rgb), 0.14) 0%, rgba(var(--logo-c-rgb), 0.04) 42%, transparent 58% ), linear-gradient(185deg, #e4fbf5 0%, #f2fdf9 38%, #fbfffe 72%, #ffffff 100%); } .hero-section::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient( ellipse 80% 58% at 82% 48%, rgba(59, 130, 246, 0.065) 0%, transparent 72% ), radial-gradient( ellipse 52% 42% at 68% 18%, rgba(var(--logo-c-rgb), 0.14) 0%, transparent 68% ); } .hero-section .container { position: relative; z-index: 1; } .hero-section .hero-orb { z-index: 0; } .hero-orb { position: absolute; border-radius: 9999px; filter: blur(64px); opacity: 0.055; pointer-events: none; } .hero-orb-secondary { opacity: 0.035; } .hero-dashboard-shell { padding: clamp(1.25rem, 3.5vw, 3rem); } .hero-dashboard-shell--compact { padding: 0.75rem 0.5rem 1rem; } .hero-dashboard-shell--compact .hero-dashboard-float { animation-delay: 0.9s; } [data-hero-count] { font-variant-numeric: tabular-nums; display: inline-block; } .hero-count-ch { display: inline-block; min-width: 0.52em; text-align: center; } .hero-count-ch--sep { min-width: 0; } .hero-count-ch--pending { opacity: 0.28; } .hero-count-ch--tick { animation: heroCountDigitIn 0.1s var(--mercury-ease) both; } @keyframes heroCountDigitIn { from { opacity: 0.4; transform: translateY(0.12em); } to { opacity: 1; transform: translateY(0); } } .hero-mock-sharpe { box-shadow: 0 0 0 1px rgba(var(--logo-c-rgb), 0.12); } .hero-mock-ampel span:last-child { box-shadow: 0 0 6px rgba(52, 211, 153, 0.45); } [data-hero-count].hero-count-live { opacity: 1; } .hero-mock-card.hero-count-focus, .hero-mock-kpi-tile.hero-count-focus, .hero-mock-kpi-xirr.hero-count-focus { border-color: rgba(var(--logo-c-rgb), 0.42) !important; box-shadow: 0 0 0 1px rgba(var(--logo-c-rgb), 0.14), 0 8px 28px rgba(var(--logo-c-rgb), 0.1); transition: border-color 0.35s var(--mercury-ease), box-shadow 0.35s var(--mercury-ease); } [data-hero-count].hero-count-done { animation: heroCountSettle 0.55s var(--mercury-ease) both; } @keyframes heroCountSettle { 0% { transform: scale(1.02); } 55% { transform: scale(1); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { [data-hero-count], [data-hero-count].hero-count-done, .hero-count-ch--tick { animation: none !important; transition: none !important; } .hero-count-ch--pending { opacity: 1; } } /* Radialer Produkt‑Glow (Spezifikation + leichter C‑Ton) */ .hero-dashboard-shell::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: 50%; background: radial-gradient( circle at 50% 48%, rgba(59, 130, 246, 0.08) 0%, rgba(255, 255, 255, 0) 70% ), radial-gradient( circle at 50% 52%, rgba(var(--logo-c-rgb), 0.16) 0%, rgba(var(--logo-c-rgb), 0.05) 45%, rgba(255, 255, 255, 0) 70% ); } .hero-dashboard-float-outer { position: relative; z-index: 1; } .hero-dashboard-scroll-zoom { transform: scale(1); transform-origin: 50% 50%; border-radius: 1rem; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } @media (min-width: 768px) and (hover: hover) { .hero-dashboard-shell:hover .hero-dashboard-scroll-zoom { transform: scale(1.02); } } /* Dashboard-Grafik (Hero-Mock): rein CSS, Klasse mercury-animation am umschließenden Tag */ .hero-dashboard-mercury.hero-dashboard-image { border-radius: 1rem; border: 1px solid var(--surface-border); background: #ffffff; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1), 0 50px 100px -20px rgba(50, 50, 93, 0.12), 0 30px 60px -30px rgba(0, 0, 0, 0.18); } @keyframes slideUpFade { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .mercury-animation { animation: slideUpFade 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; } /* ——— Phase 1: Hero-Lifecycle (nur CSS, gestaffelt) ——— */ @keyframes heroReveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes heroHeatIn { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: scale(1); } } @keyframes heroOrbDrift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(14px, -10px); } } @keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes heroGlowBreath { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } } @keyframes heroXirrGlow { 0%, 100% { box-shadow: 0 0 0 rgba(var(--logo-c-rgb), 0); border-color: rgba(var(--logo-c-rgb), 0.2); } 45% { box-shadow: 0 0 22px rgba(var(--logo-c-rgb), 0.38); border-color: rgba(var(--logo-c-rgb), 0.45); } } @keyframes heroPillActive { 0%, 100% { box-shadow: 0 0 0 rgba(var(--logo-c-rgb), 0); } 50% { box-shadow: 0 0 14px rgba(var(--logo-c-rgb), 0.28); } } @keyframes heroNavEnter { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes heroTrafficDot { from { opacity: 0.45; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } .hero-nav-enter { animation: heroNavEnter 0.45s var(--mercury-ease) forwards; } .hero-reveal, .hero-mock-boot { opacity: 0; animation: heroReveal 0.52s var(--mercury-ease) forwards; } .hero-mock-heatcell.hero-mock-boot { animation: heroHeatIn 0.48s var(--mercury-ease) forwards; } .hero-delay-01 { animation-delay: 0.05s; } .hero-delay-02 { animation-delay: 0.12s; } .hero-delay-03 { animation-delay: 0.2s; } .hero-delay-04 { animation-delay: 0.28s; } .hero-delay-05 { animation-delay: 0.36s; } .hero-delay-06 { animation-delay: 0.44s; } .hero-delay-07 { animation-delay: 0.38s; } .hero-delay-08 { animation-delay: 0.45s; } .hero-delay-09 { animation-delay: 0.52s; } .hero-delay-10 { animation-delay: 0.58s; } .hero-delay-11 { animation-delay: 0.64s; } .hero-delay-12 { animation-delay: 0.7s; } .hero-delay-13 { animation-delay: 0.76s; } .hero-delay-14 { animation-delay: 0.82s; } .hero-delay-15 { animation-delay: 0.88s; } .hero-delay-16 { animation-delay: 0.94s; } .hero-delay-17 { animation-delay: 1s; } .hero-delay-18 { animation-delay: 1.06s; } .hero-delay-19 { animation-delay: 1.12s; } .hero-delay-20 { animation-delay: 1.18s; } .hero-delay-21 { animation-delay: 1.24s; } .hero-delay-22 { animation-delay: 1.3s; } .hero-delay-23 { animation-delay: 1.36s; } .hero-delay-24 { animation-delay: 1.42s; } .hero-delay-25 { animation-delay: 1.48s; } .hero-delay-26 { animation-delay: 1.54s; } .hero-delay-27 { animation-delay: 1.6s; } .hero-delay-28 { animation-delay: 1.66s; } .hero-delay-29 { animation-delay: 1.72s; } .hero-delay-30 { animation-delay: 1.78s; } .hero-delay-31 { animation-delay: 1.84s; } .hero-delay-32 { animation-delay: 1.9s; } .hero-orb { animation: heroOrbDrift 26s ease-in-out infinite; } .hero-orb-secondary { animation: heroOrbDrift 32s ease-in-out infinite reverse; animation-delay: -6s; } .hero-dashboard-shell::before { animation: heroGlowBreath 5.5s ease-in-out 1.1s infinite; } @media (min-width: 768px) { .hero-dashboard-float { animation: heroFloat 5.5s ease-in-out 1.15s infinite; } } .hero-mock-kpi-xirr.hero-mock-boot { animation: heroReveal 0.52s var(--mercury-ease) forwards, heroXirrGlow 2.2s ease-out 1.35s 1; } .hero-mock-pill-active.hero-mock-boot { animation: heroReveal 0.52s var(--mercury-ease) forwards, heroPillActive 2.4s ease-in-out 1.05s 2; } .hero-mock-traffic span:nth-child(1) { animation: heroTrafficDot 0.35s ease-out 0.48s forwards; opacity: 0.45; } .hero-mock-traffic span:nth-child(2) { animation: heroTrafficDot 0.35s ease-out 0.56s forwards; opacity: 0.45; } .hero-mock-traffic span:nth-child(3) { animation: heroTrafficDot 0.35s ease-out 0.64s forwards; opacity: 0.45; } .hero-mock-glow-accent { text-shadow: 0 0 18px rgba(0, 240, 200, 0.35); } @media (prefers-reduced-motion: reduce) { .mercury-animation, .hero-nav-enter, .hero-reveal, .hero-mock-boot, .hero-mock-heatcell.hero-mock-boot, .hero-mock-kpi-xirr.hero-mock-boot, .hero-mock-pill-active.hero-mock-boot, .hero-orb, .hero-orb-secondary, .hero-dashboard-shell::before, .hero-dashboard-float, .hero-mock-traffic span { animation: none !important; opacity: 1 !important; transform: none !important; box-shadow: none; } .hero-mock-kpi-xirr { border-color: rgba(var(--logo-c-rgb), 0.2); } .hero-dashboard-scroll-zoom { transition: none !important; transform: scale(1) !important; } } .dash-bar { transform-origin: bottom; } button.btn-founder-feedback { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.65rem 1.35rem; border-radius: 9999px; font-weight: 600; font-size: 0.875rem; -webkit-appearance: none; appearance: none; color: var(--cta-primary-text) !important; background-color: var(--cta-primary) !important; border: 1px solid rgba(var(--logo-c-rgb), 0.45) !important; transition-property: background-color, border-color, color, box-shadow; transition-duration: 0.28s; transition-timing-function: var(--mercury-ease); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 18px rgba(var(--logo-c-rgb), 0.3); } button.btn-founder-feedback:hover { background-color: var(--cta-primary-hover) !important; border-color: rgba(var(--logo-c-rgb), 0.55) !important; color: var(--cta-primary-text) !important; box-shadow: 0 4px 20px rgba(var(--logo-c-rgb), 0.38), 0 1px 2px rgba(15, 23, 42, 0.04); } .btn-founder-feedback .spark { width: 1.1rem; height: 1.1rem; opacity: 0.75; } /* FAQ Akkordeon (Landing) */ details.faq-item > summary { list-style: none; } details.faq-item > summary::-webkit-details-marker { display: none; } details.faq-item .faq-toggle-icon::before { content: '+'; display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 9999px; border: 1px solid var(--surface-border); font-size: 1.125rem; font-weight: 300; line-height: 1; color: #64748b; background: rgba(255, 255, 255, 0.8); } details.faq-item[open] > summary .faq-toggle-icon::before { content: '−'; font-size: 1.25rem; padding-bottom: 2px; } /* Kontaktseite: Turnstile */ .cf-turnstile iframe { border-radius: 0.5rem; }