fix: Breitere Lagen-Card, Map-Zoom, gemischte Sektionsübergänge
- Iran-Card deutlich breiter (720px), voller Lagebild-Text mit Überschriften - Weiterlesen-Button entfernt, gesamter Inhalt sichtbar - Mausrad-Zoom auf Leaflet-Karte aktiviert - Sektionsübergänge: Chevron (Hero), Gradient-Fades, Diagonale Schnitte statt einheitlicher Wellen Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
@@ -96,14 +96,14 @@ a { color:inherit; text-decoration:none; }
|
||||
.section-dark .section-title { color:var(--white); }
|
||||
.section-subtitle { font-size:1.05rem; color:var(--text-light); text-align:center; max-width:600px; margin:0 auto 48px; }
|
||||
|
||||
/* ==================== WAVE DIVIDERS ==================== */
|
||||
.wave-divider { line-height:0; margin:0; overflow:hidden; }
|
||||
.wave-divider svg { display:block; width:100%; height:auto; }
|
||||
.wave-dark-to-light { background:var(--alt-solid); }
|
||||
.wave-alt-to-base { background:var(--base); }
|
||||
.wave-base-to-alt { background:var(--base); }
|
||||
.wave-base-to-dark { background:var(--base); }
|
||||
.wave-dark-to-base { background:var(--base); }
|
||||
/* ==================== SECTION DIVIDERS ==================== */
|
||||
.divider { line-height:0; margin:0; overflow:hidden; }
|
||||
.divider svg { display:block; width:100%; height:auto; }
|
||||
.divider-chevron { background:var(--alt-solid); }
|
||||
.divider-diagonal { background:var(--base); }
|
||||
.divider-diagonal-dark { background:var(--base); }
|
||||
.divider-gradient-alt-to-base { height:80px; background:linear-gradient(to bottom, var(--alt-solid), var(--base)); }
|
||||
.divider-gradient-dark-to-base { height:80px; background:linear-gradient(to bottom, var(--navy), var(--base)); }
|
||||
|
||||
/* ==================== GRID ==================== */
|
||||
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
|
||||
@@ -133,7 +133,7 @@ a { color:inherit; text-decoration:none; }
|
||||
/* ==================== 3D CAROUSEL ==================== */
|
||||
.carousel-viewport { perspective:1200px; overflow:visible; padding:40px 0 20px; }
|
||||
.carousel-track { display:flex; justify-content:center; align-items:center; position:relative; min-height:440px; }
|
||||
.carousel-card { width:380px; flex-shrink:0; background:var(--white); border-radius:var(--radius-lg); padding:28px 24px; box-shadow:var(--shadow); position:absolute; display:flex; flex-direction:column; transition:all 0.6s cubic-bezier(0.4,0,0.2,1); cursor:pointer; transform-style:preserve-3d; }
|
||||
.carousel-card { width:720px; flex-shrink:0; background:var(--white); border-radius:var(--radius-lg); padding:28px 24px; box-shadow:var(--shadow); position:absolute; display:flex; flex-direction:column; transition:all 0.6s cubic-bezier(0.4,0,0.2,1); cursor:pointer; transform-style:preserve-3d; }
|
||||
.carousel-card.active { transform:scale(1) translateX(0) rotateY(0); z-index:3; opacity:1; pointer-events:all; }
|
||||
.carousel-card.left { transform:scale(0.78) translateX(-110%) rotateY(12deg); z-index:1; opacity:0.5; pointer-events:all; }
|
||||
.carousel-card.right { transform:scale(0.78) translateX(110%) rotateY(-12deg); z-index:1; opacity:0.5; pointer-events:all; }
|
||||
@@ -153,12 +153,13 @@ a { color:inherit; text-decoration:none; }
|
||||
.stat-label { display:block; font-size:0.72rem; color:var(--text-light); margin-top:3px; }
|
||||
|
||||
.demo-excerpt { margin-bottom:16px; }
|
||||
.excerpt-text { font-size:0.88rem; color:var(--text); line-height:1.65; max-height:120px; overflow:hidden; position:relative; transition:max-height 0.4s ease; }
|
||||
.excerpt-text.expanded { max-height:600px; }
|
||||
.excerpt-text:not(.expanded)::after { content:''; position:absolute; bottom:0; left:0; right:0; height:40px; background:linear-gradient(transparent,var(--white)); }
|
||||
.excerpt-toggle { background:none; border:none; color:var(--gold); font-family:inherit; font-size:0.85rem; font-weight:600; cursor:pointer; padding:6px 0; }
|
||||
.excerpt-toggle:hover { color:var(--gold-dark); }
|
||||
.excerpt-text { font-size:0.88rem; color:var(--text); line-height:1.65; }
|
||||
|
||||
.excerpt-text h2 { font-size:1.05rem; font-weight:700; color:var(--navy); margin:20px 0 8px; }
|
||||
.excerpt-text h3 { font-size:0.95rem; font-weight:600; color:var(--navy); margin:16px 0 6px; }
|
||||
.excerpt-text p { margin-bottom:10px; }
|
||||
.excerpt-text ul { margin:8px 0 12px 20px; }
|
||||
.excerpt-text li { margin-bottom:4px; font-size:0.88rem; color:var(--text); }
|
||||
.demo-updated { font-size:0.82rem; color:var(--text-light); margin-bottom:16px; }
|
||||
.placeholder-title { color:var(--gray-400); }
|
||||
.placeholder-text { font-size:0.95rem; color:var(--gray-400); flex:1; display:flex; align-items:center; justify-content:center; min-height:180px; }
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren