AegisSight/Website
3
0
Fork 0
Code Issues Pull-Requests Actions Pakete Projekte Releases Wiki Aktivität

Vorschau: Helligkeits-Tonleiter fuer helle Sections + Contact als heller Akzent

Quellcode durchsuchen 
- Vier Tonstufen (--tone-1 bis --tone-4) fuer Problem, Workflow, Demos, Contact: Seite atmet beim Scrollen sanft von hell nach kuehler
- Contact in hellem Blau-Grau-Weiss (#ECF2F9) als frischer Akzent vor dem dunklen Trust
- Divider-Uebergaenge per Adjacent-Sibling an die neuen Tonstufen angepasst
- Trust und Contact in Page-Reihenfolge zurueckgetauscht: Contact vor Trust (Trust bleibt visueller Schluss-Anker), Navbar-Reihenfolge bleibt aber Funktionen-Live-Lagebilder-Ueber-uns-Kontakt
- Subpixel-Luecke unter dem Diagonal-Divider Contact->Trust mit margin-top:-1px geschlossen

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Code
2026-04-26 10:02:18 +02:00
Ursprung 12dc13c089
Commit 5367b91945
2 geänderte Dateien mit 34 neuen und 18 gelöschten Zeilen
Patch-Datei herunterladen Vergleichs-Datei herunterladen Alle Dateien ausklappen Alle Dateien einklappen

21
vorschau/css/style.css
Datei anzeigen

@@ -435,3 +435,24 @@ a.dev-source-pill:hover {
line-height: 1.45;
color: #E8ECF4;
}
/* ==================== HELLIGKEITS-TONLEITER (Test) ==================== */
/* Vier helle Sections in vier Helligkeitsstufen — Seite "atmet" beim Scrollen
sanft von hell nach kühler, mündet hart in den dunklen Footer. */
:root {
--tone-1: #F5F7FA; /* Problem (hellster) */
--tone-2: #ECF0F5; /* Workflow */
--tone-3: #E4EAF1; /* Demos */
--tone-4: #ECF2F9; /* Contact (hell blau-grau-weiß, frischer Akzent vor Trust) */
}
#problem { background: var(--tone-1); }
#solution { background: var(--tone-2); }
#demos { background: var(--tone-3); }
#contact { background: var(--tone-4); }
/* Divider-Übergänge an die Tonstufen anpassen (Adjacent-Sibling) */
#problem + .divider { background: linear-gradient(to bottom, var(--tone-1), var(--tone-2)); }
#solution + .divider { background: linear-gradient(to bottom, var(--tone-2), var(--tone-3)); }
#demos + .divider { background: linear-gradient(to bottom, var(--tone-3), var(--tone-4)); height: 60px; }
#contact + .divider { background: var(--tone-4); } /* diagonal-dark Contact->Trust, Top-Farbe an Contact angleichen */
#trust { margin-top: -1px; } /* schließt Subpixel-Lücke zum Diagonal-Divider darüber */

31
vorschau/index.html
Datei anzeigen

@@ -365,7 +365,19 @@
</div>
</section>
<!-- Diagonal: Demos -> Trust -->
<!-- Gradient: Demos -> Contact -->
<div class="divider"></div>
<!-- Contact CTA -->
<section class="section section-base" id="contact">
<div class="container cta-container">
<h2 class="section-title">Interesse am AegisSight Monitor?</h2>
<p class="cta-text">Sprechen Sie mit uns über Ihren Einsatzfall.</p>
<button class="btn btn-primary btn-lg" onclick="openContactModal()">Kontakt aufnehmen</button>
</div>
</section>
<!-- Diagonal: Contact -> Trust -->
<div class="divider divider-diagonal-dark">
<svg viewBox="0 0 1440 60" preserveAspectRatio="none"><path d="M0,60 L1440,0 L1440,60 Z" fill="#132844"/></svg>
</div>
@@ -407,23 +419,6 @@
</div>
</section>
<!-- Gradient: Trust -> Contact -->
<div class="divider divider-gradient-dark-to-base"></div>
<!-- Contact CTA -->
<section class="section section-base" id="contact">
<div class="container cta-container">
<h2 class="section-title">Interesse am AegisSight Monitor?</h2>
<p class="cta-text">Sprechen Sie mit uns über Ihren Einsatzfall.</p>
<button class="btn btn-primary btn-lg" onclick="openContactModal()">Kontakt aufnehmen</button>
</div>
</section>
<!-- Diagonal: Contact -> Footer -->
<div class="divider divider-diagonal-dark">
<svg viewBox="0 0 1440 60" preserveAspectRatio="none"><path d="M0,60 L1440,0 L1440,60 Z" fill="#0A1832"/></svg>
</div>
<!-- Footer -->
<footer class="footer">
<div class="container">