diff --git a/index.html b/index.html index 1a2b44e..17da393 100644 --- a/index.html +++ b/index.html @@ -93,20 +93,59 @@
+
+ + + + + +
1,247 תורמים פעילים - +12% + + + +12% +
+
+ + + +
₪847K תרומות החודש - +8% + + + +8% +
+
+ + + + + +
384 מתנדבים —
+
+
+ + + + +
+ 23 + פרויקטים פעילים + + + +3 + +
מגמת תרומות — 6 חודשים אחרונים
@@ -389,4 +428,4 @@ - \ No newline at end of file + diff --git a/style.css b/style.css index 5e86c39..8ccba7a 100644 --- a/style.css +++ b/style.css @@ -7,6 +7,7 @@ --color-accent-light: #cffafe; --color-success: #059669; --color-success-light: #d1fae5; + --color-teal: #14b8a6; --color-text: #1e293b; --color-text-muted: #64748b; @@ -134,6 +135,24 @@ button { background: none; } +/* Skip Link */ +.skip-link { + position: absolute; + top: -100%; + left: 50%; + transform: translateX(-50%); + background: var(--color-primary); + color: white; + padding: var(--space-sm) var(--space-lg); + border-radius: var(--radius-md); + z-index: 9999; + transition: top var(--transition-fast); +} + +.skip-link:focus { + top: var(--space-md); +} + /* Utility Classes */ .container { max-width: var(--max-width); @@ -368,6 +387,31 @@ button { font-size: var(--font-size-lg); } +.btn-cta-primary { + background: white; + color: var(--color-primary-dark); + padding: var(--space-md) var(--space-2xl); + font-weight: 600; +} + +.btn-cta-primary:hover { + background: var(--color-surface); + transform: translateY(-2px); + box-shadow: var(--shadow-lg); +} + +.btn-cta-secondary { + background: transparent; + color: white; + border: 2px solid rgba(255, 255, 255, 0.4); + padding: var(--space-md) var(--space-xl); +} + +.btn-cta-secondary:hover { + background: rgba(255, 255, 255, 0.1); + border-color: white; +} + /* Hero Section */ .hero { padding-block-start: calc(var(--header-height) + var(--space-4xl)); @@ -415,16 +459,324 @@ button { display: flex; gap: var(--space-md); flex-wrap: wrap; + margin-block-end: var(--space-2xl); +} + +.hero-trust { + padding-block-start: var(--space-xl); + border-block-start: 1px solid var(--color-border); +} + +.hero-trust-label { + display: block; + font-size: var(--font-size-sm); + color: var(--color-text-muted); + margin-block-end: var(--space-md); +} + +.hero-trust-logos { + display: flex; + gap: var(--space-lg); +} + +.trust-logo-placeholder { + width: 60px; + height: 32px; + background: var(--color-surface); + border-radius: var(--radius-sm); } .hero-visual { position: relative; } -.dashboard-illustration { - width: 100%; - height: auto; - filter: drop-shadow(var(--shadow-xl)); +/* Dashboard Mockup */ +.dashboard-mockup { + background: var(--color-dark); + border-radius: var(--radius-xl); + overflow: hidden; + box-shadow: var(--shadow-xl), 0 0 60px rgba(13, 148, 136, 0.15); +} + +.mockup-header { + display: flex; + align-items: center; + gap: var(--space-md); + padding: var(--space-md) var(--space-lg); + background: var(--color-dark-muted); + border-block-end: 1px solid rgba(255, 255, 255, 0.1); +} + +.mockup-dots { + display: flex; + gap: 6px; +} + +.mockup-dots span { + width: 10px; + height: 10px; + border-radius: var(--radius-full); + background: rgba(255, 255, 255, 0.2); +} + +.mockup-dots span:first-child { + background: #ff5f57; +} + +.mockup-dots span:nth-child(2) { + background: #febc2e; +} + +.mockup-dots span:nth-child(3) { + background: #28c840; +} + +.mockup-title { + color: var(--color-text-light); + font-size: var(--font-size-xs); + margin-inline-start: auto; +} + +.mockup-body { + display: flex; + min-height: 360px; +} + +.mockup-sidebar { + width: 56px; + background: rgba(255, 255, 255, 0.03); + border-inline-end: 1px solid rgba(255, 255, 255, 0.08); + padding: var(--space-md) var(--space-sm); + display: flex; + flex-direction: column; + gap: var(--space-sm); +} + +.sidebar-item { + width: 40px; + height: 40px; + border-radius: var(--radius-md); + display: flex; + align-items: center; + justify-content: center; + color: var(--color-text-light); + transition: all var(--transition-fast); +} + +.sidebar-item.active { + background: var(--color-primary); + color: white; +} + +.mockup-content { + flex: 1; + padding: var(--space-lg); + display: flex; + flex-direction: column; + gap: var(--space-lg); +} + +/* Dashboard Stats Cards */ +.mockup-stats { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--space-md); +} + +.mockup-stat { + background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: var(--radius-lg); + padding: var(--space-lg); + display: flex; + flex-direction: column; + gap: var(--space-xs); + position: relative; + overflow: hidden; + transition: transform var(--transition-fast), box-shadow var(--transition-fast); +} + +.mockup-stat:hover { + transform: translateY(-2px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); +} + +.mockup-stat::before { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 80px; + height: 80px; + background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%); + opacity: 0.1; + transform: translate(30%, -30%); +} + +.stat-icon { + width: 36px; + height: 36px; + border-radius: var(--radius-md); + display: flex; + align-items: center; + justify-content: center; + margin-block-end: var(--space-sm); +} + +.stat-icon svg { + width: 20px; + height: 20px; +} + +.stat-icon-donors { + background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%); + color: white; +} + +.stat-icon-donations { + background: linear-gradient(135deg, #059669 0%, #10b981 100%); + color: white; +} + +.stat-icon-volunteers { + background: linear-gradient(135deg, #0891b2 0%, #22d3ee 100%); + color: white; +} + +.stat-icon-projects { + background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%); + color: white; +} + +.mockup-stat .stat-value { + font-size: var(--font-size-2xl); + font-weight: 600; + color: white; + line-height: 1.2; +} + +.mockup-stat .stat-label { + font-size: var(--font-size-xs); + color: var(--color-text-light); +} + +.mockup-stat .stat-trend { + display: inline-flex; + align-items: center; + gap: 2px; + font-size: var(--font-size-xs); + font-weight: 500; + margin-block-start: var(--space-xs); +} + +.mockup-stat .stat-trend svg { + width: 12px; + height: 12px; +} + +.mockup-stat .stat-trend.positive { + color: #34d399; +} + +.mockup-stat .stat-trend.neutral { + color: var(--color-text-light); +} + +/* Dashboard Chart */ +.mockup-chart { + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: var(--radius-lg); + padding: var(--space-md); +} + +.chart-header { + font-size: var(--font-size-xs); + color: var(--color-text-light); + margin-block-end: var(--space-md); +} + +.chart-bars { + display: flex; + align-items: flex-end; + gap: var(--space-sm); + height: 80px; +} + +.chart-bar { + flex: 1; + height: var(--height); + background: linear-gradient(180deg, var(--color-primary) 0%, rgba(13, 148, 136, 0.3) 100%); + border-radius: var(--radius-sm) var(--radius-sm) 0 0; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; + position: relative; + transition: opacity var(--transition-fast); +} + +.chart-bar span { + position: absolute; + bottom: -20px; + font-size: 9px; + color: var(--color-text-light); +} + +.chart-bar.active { + background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); + box-shadow: 0 0 12px rgba(13, 148, 136, 0.5); +} + +/* Dashboard Tasks */ +.mockup-tasks { + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: var(--radius-lg); + padding: var(--space-md); +} + +.task-header { + font-size: var(--font-size-xs); + color: var(--color-text-light); + margin-block-end: var(--space-sm); +} + +.task-item { + display: flex; + align-items: center; + gap: var(--space-sm); + padding: var(--space-sm) 0; + border-block-end: 1px solid rgba(255, 255, 255, 0.05); + font-size: var(--font-size-xs); + color: rgba(255, 255, 255, 0.8); +} + +.task-item:last-child { + border: none; +} + +.task-check { + width: 16px; + height: 16px; + border-radius: var(--radius-sm); + border: 1px solid rgba(255, 255, 255, 0.3); + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + color: transparent; +} + +.task-item.done .task-check { + background: var(--color-success); + border-color: var(--color-success); + color: white; +} + +.task-item.done span:last-child { + text-decoration: line-through; + opacity: 0.5; } @media (max-width: 900px) { @@ -446,61 +798,95 @@ button { justify-content: center; } + .hero-trust { + display: flex; + flex-direction: column; + align-items: center; + } + .hero-visual { order: -1; max-width: 500px; margin-inline: auto; } + + .mockup-stats { + grid-template-columns: 1fr 1fr; + } } -/* Stats Bar */ -.stats-bar { +@media (max-width: 500px) { + .mockup-stats { + grid-template-columns: 1fr; + } + + .mockup-body { + flex-direction: column; + } + + .mockup-sidebar { + width: 100%; + flex-direction: row; + justify-content: center; + border-inline-end: none; + border-block-end: 1px solid rgba(255, 255, 255, 0.08); + } +} + +/* Social Proof Bar */ +.social-proof { background: var(--color-surface); padding-block: var(--space-3xl); border-block: 1px solid var(--color-border); } -.stats-container { +.proof-container { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-lg); - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: var(--space-xl); + display: flex; + justify-content: center; + align-items: center; + gap: var(--space-3xl); + flex-wrap: wrap; } -.stat-item { +.proof-item { text-align: center; } -.stat-number { +.proof-number { display: block; - font-size: var(--font-size-4xl); + font-size: var(--font-size-3xl); font-weight: 600; color: var(--color-primary); line-height: 1.2; } -.stat-suffix { - font-size: var(--font-size-2xl); - font-weight: 600; - color: var(--color-primary); -} - -.stat-label { +.proof-label { display: block; font-size: var(--font-size-sm); color: var(--color-text-muted); - margin-block-start: var(--space-sm); + margin-block-start: var(--space-xs); +} + +.proof-divider { + width: 1px; + height: 48px; + background: var(--color-border); } @media (max-width: 768px) { - .stats-container { - grid-template-columns: repeat(2, 1fr); + .proof-container { + gap: var(--space-xl); } - .stat-number { - font-size: var(--font-size-3xl); + .proof-divider { + display: none; + } + + .proof-item { + flex: 1 1 40%; } } @@ -512,6 +898,17 @@ button { margin-block-end: var(--space-3xl); } +.section-label { + display: inline-block; + background: var(--color-primary-light); + color: var(--color-primary-dark); + padding: var(--space-xs) var(--space-md); + border-radius: var(--radius-full); + font-size: var(--font-size-sm); + font-weight: 500; + margin-block-end: var(--space-md); +} + .section-header h2 { margin-block-end: var(--space-md); } @@ -521,7 +918,7 @@ button { font-size: var(--font-size-lg); } -/* Features Preview */ +/* Features Bento Grid */ .features-preview { padding-block: var(--space-4xl); padding-inline: var(--space-lg); @@ -529,46 +926,54 @@ button { margin-inline: auto; } -.features-grid { +.features-bento { display: grid; grid-template-columns: repeat(3, 1fr); - gap: var(--space-xl); + gap: var(--space-lg); } -.feature-card { +.bento-card { background: var(--color-bg); border: 1px solid var(--color-border); - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); padding: var(--space-2xl); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); } -.feature-card:hover { +.bento-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-primary-light); } -.feature-icon { +.bento-card.bento-large { + grid-column: span 2; +} + +.bento-card.bento-wide { + grid-column: span 2; +} + +.bento-icon { width: 56px; height: 56px; color: var(--color-primary); margin-block-end: var(--space-lg); } -.feature-card h3 { +.bento-card h3 { margin-block-end: var(--space-sm); font-weight: 600; } -.feature-card p { +.bento-card p { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-block-end: var(--space-lg); line-height: 1.7; } -.feature-link { +.bento-link { color: var(--color-primary); font-size: var(--font-size-sm); font-weight: 500; @@ -578,7 +983,7 @@ button { transition: gap var(--transition-fast); } -.feature-link:hover { +.bento-link:hover { gap: var(--space-md); } @@ -588,15 +993,25 @@ button { } @media (max-width: 900px) { - .features-grid { + .features-bento { grid-template-columns: repeat(2, 1fr); } + + .bento-card.bento-large, + .bento-card.bento-wide { + grid-column: span 2; + } } @media (max-width: 600px) { - .features-grid { + .features-bento { grid-template-columns: 1fr; } + + .bento-card.bento-large, + .bento-card.bento-wide { + grid-column: span 1; + } } /* Testimonials */ @@ -621,6 +1036,12 @@ button { box-shadow: var(--shadow-sm); display: flex; flex-direction: column; + border: 1px solid var(--color-border); +} + +.testimonial-card.featured { + border-color: var(--color-primary-light); + box-shadow: var(--shadow-md); } .testimonial-content { @@ -635,17 +1056,6 @@ button { position: relative; } -.testimonial-content p::before { - content: '"'; - position: absolute; - top: -20px; - right: -10px; - font-size: 60px; - color: var(--color-primary-light); - font-family: Georgia, serif; - line-height: 1; -} - .testimonial-author { display: flex; align-items: center; @@ -702,6 +1112,17 @@ button { overflow: hidden; } +.cta-section::before { + content: ''; + position: absolute; + top: -50%; + right: -20%; + width: 60%; + height: 200%; + background: radial-gradient(ellipse, rgba(255, 255, 255, 0.1) 0%, transparent 60%); + pointer-events: none; +} + .cta-content { max-width: 700px; margin-inline: auto; @@ -710,12 +1131,23 @@ button { z-index: 1; } +.cta-label { + display: inline-block; + background: rgba(255, 255, 255, 0.15); + color: white; + padding: var(--space-xs) var(--space-md); + border-radius: var(--radius-full); + font-size: var(--font-size-sm); + font-weight: 500; + margin-block-end: var(--space-lg); +} + .cta-content h2 { color: white; margin-block-end: var(--space-lg); } -.cta-content p { +.cta-content > p { color: rgba(255, 255, 255, 0.9); font-size: var(--font-size-lg); margin-block-end: var(--space-2xl); @@ -728,30 +1160,6 @@ button { flex-wrap: wrap; } -.cta-actions .btn-primary { - background: white; - color: var(--color-primary-dark); -} - -.cta-actions .btn-primary:hover { - background: var(--color-surface); - transform: translateY(-2px); -} - -.cta-decoration { - position: absolute; - inset: 0; - display: flex; - align-items: center; - justify-content: center; - opacity: 0.5; -} - -.cta-decoration svg { - width: 100%; - max-width: 600px; -} - /* Footer */ .site-footer { background: var(--color-dark); @@ -1655,4 +2063,4 @@ button { .newsletter-form .btn { width: 100%; } -} \ No newline at end of file +}