From 6662ba2dd1787e9e6467152522eb323e9e9706ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20H=C3=B6fling?= Date: Mon, 4 May 2026 23:05:38 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20CI-konformes=20Farbschema=20gem=C3=A4?= =?UTF-8?q?=C3=9F=20Logo=20&=20CI=20Handbuch=20(v1.1.0)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Logo-Gelb auf #DEDC1E korrigiert (Pantone 381 C) - Petrol #067391 als Sekundärakzent eingeführt (CI-Störer-/Gegenfarbe) - Generische Slate-Töne durch CI-Grautöne (#848687, #C8C9CA) ersetzt - Hintergrund von Slate-Navy auf petrol-getöntes Dunkel umgestellt - Sekundär-Button (Helpdesk im Hero) nutzt jetzt Petrol-Outline - Hero-Gradient mit Petrol-Akzent unten links ergänzt - CLAUDE.md mit CI-Quelle und Pantone-Referenzen dokumentiert Co-Authored-By: Claude Opus 4.7 (1M context) --- CLAUDE.md | 29 ++++++++--- css/style.css | 25 +++++---- datenschutz.html | 25 +++++---- impressum.html | 23 +++++---- index.html | 131 ++++++++++++++++++++++++++--------------------- 5 files changed, 134 insertions(+), 99 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 85572dc..1edb13d 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -29,15 +29,28 @@ sonith-website/ └── README.md ``` -## Farbschema +## Farbschema (CI-konform) -- **Primär/Akzent**: #DEDC1B (Sonith Gelb-Grün) -- **Dunkel**: #0f172a / #1e293b (Hintergründe) -- **Text hell**: #f1f5f9 -- **Text dunkel**: #1e293b -- **Grau**: #64748b (Subtexte) +Quelle: `src/Logo und CI Handbuch.pdf` (Sonith UG, Apr 2019). -Grundstimmung: Dunkel-modern mit Sonith-Gelb als Akzent. +**Logofarben** (Primär): +- `#DEDC1E` — Sonith Gelb-Grün (Pantone 381 C) — Hauptakzent +- `#848687` — CI-Grau (Pantone 424 C) — Subtexte +- `#C8C9CA` — CI-Hellgrau (Pantone Coolgray 5 C) — Fließtext auf dunkel + +**Störer-/Gegenfarbe** (Sekundär): +- `#067391` — Petrol (Gegenfarbe Logo) — Sekundär-Buttons, Borders, Akzente +- `#3a96b0` — Petrol hell (Hover) +- `#045066` — Petrol dunkel (Borders/Töne) + +**Hintergrund** (petrol-getöntes Dunkel statt generisches Slate): +- `#0a1f28` — Basis (`bg-dark`) +- `#102b38` — Sektion alternierend (`bg-dark-light`) +- `#1a3d4d` — Akzent-Hintergrund (`bg-dark-lighter`) + +Tailwind-Tokens: `sonith`, `petrol`, `ci-gray`, `dark` — siehe Tailwind-Config inline in den HTML-Dateien. + +Grundstimmung: Dunkel-modern, Sonith-Gelb als Hauptakzent, Petrol als Sekundärakzent (entspricht der CI-Vorgabe „Störer- und Gegenfarbe Logo"). ## Konventionen @@ -53,4 +66,4 @@ Statische Dateien direkt auf Nginx ausliefern. Kein Build-Step notwendig. --- -*Zuletzt aktualisiert: März 2026 — v1.0.0* +*Zuletzt aktualisiert: Mai 2026 — v1.1.0 (CI-konformes Farbschema)* diff --git a/css/style.css b/css/style.css index 5f7e168..ea0c664 100644 --- a/css/style.css +++ b/css/style.css @@ -1,5 +1,7 @@ /* ============================================================ sonith.de — Custom Styles + CI-konform: Logo-Gelb #DEDC1E, Petrol #067391, CI-Grau #848687/#C8C9CA + Hintergrund: petrol-getoentes Dunkel #0a1f28 / #102b38 ============================================================ */ /* Smooth scrolling offset for fixed nav */ @@ -9,19 +11,19 @@ html { /* ---- Navbar ---- */ #navbar { - background: rgba(15, 23, 42, 0.8); + background: rgba(10, 31, 40, 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); + background: rgba(10, 31, 40, 0.95); + box-shadow: 0 1px 0 rgba(6, 115, 145, 0.2); } /* Active nav link */ .nav-link.active { - color: #DEDC1B; + color: #DEDC1E; } /* ---- Fade-in Animation ---- */ @@ -62,7 +64,8 @@ html { .service-card:nth-child(6) { transition-delay: 0.40s; } .service-card:hover { - box-shadow: 0 0 24px rgba(222, 220, 27, 0.06); + box-shadow: 0 0 24px rgba(222, 220, 30, 0.08), + 0 0 48px rgba(6, 115, 145, 0.06); } /* ---- USP Cards ---- */ @@ -94,32 +97,32 @@ html { /* ---- Selection Color ---- */ ::selection { - background: rgba(222, 220, 27, 0.3); + background: rgba(222, 220, 30, 0.3); color: #fff; } -/* ---- Scrollbar ---- */ +/* ---- Scrollbar (CI-Petrol-Toene) ---- */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { - background: #0f172a; + background: #0a1f28; } ::-webkit-scrollbar-thumb { - background: #334155; + background: #1a3d4d; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { - background: #475569; + background: #045066; } /* ---- Focus Styles ---- */ a:focus-visible, button:focus-visible { - outline: 2px solid #DEDC1B; + outline: 2px solid #DEDC1E; outline-offset: 2px; border-radius: 4px; } diff --git a/datenschutz.html b/datenschutz.html index ae7f1f9..2ab1f3a 100644 --- a/datenschutz.html +++ b/datenschutz.html @@ -8,12 +8,15 @@