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

Vorschau: Features-Section nach oben mit Gold-Glasmorphism, Problem-Section auf hellem Hintergrund

Quellcode durchsuchen 
- Features (Was der Monitor leistet) wandert direkt unter Hero, bekommt section-dark
- Problem (Warum manuelle OSINT-Auswertung nicht skaliert) rutscht eine Position nach unten, bekommt section-base
- Feature-Cards im dunklen Kontext: Glasmorphism mit dezent transparentem Hintergrund, permanente Gold-Border, Gold-getoente Icon-Box, goldfarbene Icons (CSS-Filter), Hover mit kraeftigerer Gold-Border und Lift
- Neuer Divider divider-gradient-base-to-alt fuer den Uebergang Problem -> Workflow

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Code
2026-04-26 09:23:06 +02:00
Ursprung 980dd3039e
Commit 10e71eecbe
2 geänderte Dateien mit 77 neuen und 69 gelöschten Zeilen
Patch-Datei herunterladen Vergleichs-Datei herunterladen Alle Dateien ausklappen Alle Dateien einklappen

15
vorschau/css/style.css
Datei anzeigen

@@ -139,6 +139,7 @@ a { color:inherit; text-decoration:none; }
.divider-diagonal { background:var(--base); }
.divider-diagonal-dark { background:var(--base); }
.divider-gradient-alt-to-base { height:40px; background:linear-gradient(to bottom, var(--alt-solid), var(--base)); }
.divider-gradient-base-to-alt { height:60px; background:linear-gradient(to bottom, var(--base), var(--alt-solid)); }
.divider-gradient-dark-to-base { height:80px; background:linear-gradient(to bottom, var(--navy), var(--base)); }
.divider-gradient-dark-to-alt { height:60px; background:linear-gradient(to bottom, var(--navy), var(--alt-solid)); }
@@ -172,12 +173,20 @@ a { color:inherit; text-decoration:none; }
.workflow-connector { width:60px; height:2px; background:var(--gold); margin-top:23px; flex-shrink:0; opacity:0.4; }
/* ==================== FEATURES ==================== */
.feature-card { background:var(--white); border-radius:var(--radius-lg); padding:28px 24px; box-shadow:var(--shadow); transition:box-shadow 0.3s,transform 0.3s; }
.feature-card { background:var(--white); border-radius:var(--radius-lg); padding:28px 24px; box-shadow:var(--shadow); transition:box-shadow 0.3s,transform 0.3s,border-color 0.3s,background 0.3s; border:1px solid transparent; }
.feature-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.feature-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:var(--alt-solid); border-radius:var(--radius); margin-bottom:14px; }
.feature-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:var(--alt-solid); border-radius:var(--radius); margin-bottom:14px; border:1px solid transparent; }
.feature-card h3 { font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:8px; }
.feature-card p { font-size:0.88rem; color:var(--text-light); line-height:1.6; }
/* Features im dunklen Section-Kontext: Glasmorphism mit Gold-Akzent */
.section-dark .feature-card { background:rgba(255,255,255,0.04); border-color:rgba(200,168,81,0.2); box-shadow:none; }
.section-dark .feature-card:hover { border-color:rgba(200,168,81,0.5); background:rgba(255,255,255,0.06); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.3); }
.section-dark .feature-card h3 { color:var(--white); }
.section-dark .feature-card p { color:rgba(255,255,255,0.7); }
.section-dark .feature-icon { background:rgba(200,168,81,0.15); border-color:rgba(200,168,81,0.3); }
.section-dark .feature-icon img { filter:brightness(0) saturate(100%) invert(74%) sepia(49%) saturate(471%) hue-rotate(2deg) brightness(91%) contrast(83%); }
/* ==================== DEMOS SECTION ==================== */
#demos { padding-top:48px; }
@@ -193,6 +202,8 @@ a { color:inherit; text-decoration:none; }
.feature-statement { text-align:center; max-width:700px; margin:0 auto 48px; padding:0 24px; }
.feature-statement-text { font-size:1.6rem; font-weight:700; color:var(--navy); line-height:1.35; margin-bottom:12px; letter-spacing:-0.01em; }
.feature-statement-sub { font-size:1rem; color:var(--text-light); line-height:1.6; }
.section-dark .feature-statement-text { color:var(--white); }
.section-dark .feature-statement-sub { color:rgba(255,255,255,0.7); }
@media(max-width:768px) { .feature-statement-text { font-size:1.3rem; } }
/* ==================== 3D CAROUSEL ==================== */