feat: Statischer One-Pager für sonith.de

Kompletter Relaunch als statische Website: - index.html: One-Pager mit Hero, Leistungen, USPs, Team, Kontakt - impressum.html + datenschutz.html: Separate Unterseiten - TailwindCSS via CDN, Custom Styles, Scroll-Animationen - Mobile Menu, Scroll-Spy, Fade-in Animationen - Farbschema: Dunkel-modern mit Sonith-Gelb (#DEDC1B) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-18 07:45:25 +01:00
commit dc51be2da1
11 changed files with 1056 additions and 0 deletions
@@ -0,0 +1,125 @@
+/* ============================================================
+   sonith.de — Custom Styles
+   ============================================================ */
+
+/* Smooth scrolling offset for fixed nav */
+html {
+    scroll-padding-top: 5rem;
+}
+
+/* ---- Navbar ---- */
+#navbar {
+    background: rgba(15, 23, 42, 0.8);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+}
+
+#navbar.scrolled {
+    background: rgba(15, 23, 42, 0.95);
+    box-shadow: 0 1px 0 rgba(100, 116, 139, 0.1);
+}
+
+/* Active nav link */
+.nav-link.active {
+    color: #DEDC1B;
+}
+
+/* ---- Fade-in Animation ---- */
+.fade-in {
+    opacity: 0;
+    transform: translateY(24px);
+    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+}
+
+.fade-in.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+/* Staggered children */
+.fade-in:nth-child(2) { transition-delay: 0.1s; }
+.fade-in:nth-child(3) { transition-delay: 0.2s; }
+.fade-in:nth-child(4) { transition-delay: 0.3s; }
+
+/* ---- Service Cards ---- */
+.service-card {
+    opacity: 0;
+    transform: translateY(24px);
+    transition: opacity 0.5s ease-out, transform 0.5s ease-out,
+                border-color 0.3s, box-shadow 0.3s;
+}
+
+.service-card.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.service-card:nth-child(1) { transition-delay: 0.0s; }
+.service-card:nth-child(2) { transition-delay: 0.08s; }
+.service-card:nth-child(3) { transition-delay: 0.16s; }
+.service-card:nth-child(4) { transition-delay: 0.24s; }
+.service-card:nth-child(5) { transition-delay: 0.32s; }
+.service-card:nth-child(6) { transition-delay: 0.40s; }
+
+.service-card:hover {
+    box-shadow: 0 0 24px rgba(222, 220, 27, 0.06);
+}
+
+/* ---- USP Cards ---- */
+.usp-card {
+    transition: transform 0.3s ease;
+}
+
+.usp-card:hover {
+    transform: translateY(-4px);
+}
+
+/* ---- Team Cards ---- */
+.team-card {
+    transition: transform 0.3s ease;
+}
+
+.team-card:hover {
+    transform: translateY(-4px);
+}
+
+/* ---- Contact Cards ---- */
+.contact-card {
+    transition: all 0.3s ease;
+}
+
+.contact-card:hover {
+    transform: translateY(-2px);
+}
+
+/* ---- Selection Color ---- */
+::selection {
+    background: rgba(222, 220, 27, 0.3);
+    color: #fff;
+}
+
+/* ---- Scrollbar ---- */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #0f172a;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #334155;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #475569;
+}
+
+/* ---- Focus Styles ---- */
+a:focus-visible,
+button:focus-visible {
+    outline: 2px solid #DEDC1B;
+    outline-offset: 2px;
+    border-radius: 4px;
+}