/** * 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); } /* 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: reine CSS-Animation beim ersten Paint (kein JS) */ .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); animation: hero-dashboard-image-enter 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both; } @keyframes hero-dashboard-image-enter { from { opacity: 0; transform: translateY(40px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .hero-mock-glow-accent { text-shadow: 0 0 18px rgba(0, 240, 200, 0.35); } @media (prefers-reduced-motion: reduce) { .hero-dashboard-mercury.hero-dashboard-image { animation: none !important; opacity: 1; transform: none; } .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; }