Spaces:
Sleeping
Sleeping
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', | |
| 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', | |
| sans-serif; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| } | |
| code { | |
| font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', | |
| monospace; | |
| } | |
| /* Your existing styles */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| .btn { | |
| padding: 12px 24px; | |
| border: none; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| text-decoration: none; | |
| display: inline-block; | |
| } | |
| .btn-primary { | |
| background: #2E7D32; | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background: #1B5E20; | |
| transform: translateY(-2px); | |
| } | |
| .btn-secondary { | |
| background: #4CAF50; | |
| color: white; | |
| } | |
| .btn-secondary:hover { | |
| background: #388E3C; | |
| } | |
| .card { | |
| background: white; | |
| border-radius: 12px; | |
| padding: 24px; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.1); | |
| margin-bottom: 20px; | |
| } | |
| .grid { | |
| display: grid; | |
| gap: 20px; | |
| } | |
| .grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } | |
| .grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } | |
| .grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } | |
| /* Dashboard Styles */ | |
| .dashboard { | |
| min-height: 100vh; | |
| background: #ffffff; | |
| padding: 20px; | |
| } | |
| /* Header */ | |
| .dashboard-header { | |
| background: #ffffff; | |
| border-radius: 20px; | |
| padding: 30px; | |
| margin-bottom: 30px; | |
| border: 2px solid #4CAF50; | |
| box-shadow: 0 4px 20px rgba(76, 175, 80, 0.1); | |
| } | |
| .header-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .brand h1 { | |
| font-size: 2.5rem; | |
| color: #2E7D32; | |
| margin-bottom: 5px; | |
| font-weight: 700; | |
| } | |
| .brand p { | |
| color: #4CAF50; | |
| font-size: 1.1rem; | |
| } | |
| .header-info { | |
| text-align: right; | |
| color: #2E7D32; | |
| background: #E8F5E8; | |
| padding: 20px; | |
| border-radius: 15px; | |
| border: 1px solid #4CAF50; | |
| } | |
| .time { | |
| font-size: 2rem; | |
| font-weight: 600; | |
| margin-bottom: 5px; | |
| color: #2E7D32; | |
| } | |
| .date { | |
| font-size: 1rem; | |
| color: #4CAF50; | |
| } | |
| /* Stats Section */ | |
| .stats-section { | |
| margin-bottom: 40px; | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| } | |
| .stat-card { | |
| background: #ffffff; | |
| border-radius: 15px; | |
| padding: 25px; | |
| display: flex; | |
| align-items: center; | |
| border: 2px solid #4CAF50; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| box-shadow: 0 4px 15px rgba(76, 175, 80, 0.1); | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 30px rgba(76, 175, 80, 0.2); | |
| } | |
| .stat-icon { | |
| font-size: 3rem; | |
| margin-right: 20px; | |
| } | |
| .stat-content h3 { | |
| font-size: 2rem; | |
| color: #2E7D32; | |
| font-weight: 700; | |
| margin-bottom: 5px; | |
| } | |
| .stat-content p { | |
| color: #4CAF50; | |
| font-size: 0.9rem; | |
| } | |
| .stat-card.carbon { background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.2)); } | |
| .stat-card.water { background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.2)); } | |
| .stat-card.biodiversity { background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2)); } | |
| .stat-card.waste { background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(147, 51, 234, 0.2)); } | |
| /* Tools Section */ | |
| .tools-section { | |
| margin-bottom: 40px; | |
| } | |
| .tools-section h2 { | |
| color: white; | |
| font-size: 2rem; | |
| margin-bottom: 25px; | |
| text-align: center; | |
| font-weight: 600; | |
| } | |
| .tools-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 25px; | |
| } | |
| .tool-card { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border-radius: 20px; | |
| padding: 30px; | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .tool-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .tool-card:hover::before { | |
| opacity: 1; | |
| } | |
| .tool-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); | |
| } | |
| .tool-header { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| } | |
| .tool-icon { | |
| font-size: 2.5rem; | |
| margin-right: 15px; | |
| } | |
| .tool-card h3 { | |
| color: white; | |
| font-size: 1.3rem; | |
| font-weight: 600; | |
| } | |
| .tool-card p { | |
| color: rgba(255, 255, 255, 0.8); | |
| margin-bottom: 20px; | |
| line-height: 1.5; | |
| } | |
| .tool-button { | |
| background: rgba(255, 255, 255, 0.2); | |
| border: none; | |
| color: white; | |
| padding: 12px 24px; | |
| border-radius: 25px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| } | |
| .tool-button:hover { | |
| background: rgba(255, 255, 255, 0.3); | |
| transform: translateX(5px); | |
| } | |
| /* Actions Section */ | |
| .actions-section h2 { | |
| color: white; | |
| font-size: 2rem; | |
| margin-bottom: 25px; | |
| text-align: center; | |
| font-weight: 600; | |
| } | |
| .actions-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 20px; | |
| } | |
| .action-btn { | |
| background: rgba(255, 255, 255, 0.15); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| color: white; | |
| padding: 20px; | |
| border-radius: 15px; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| } | |
| .action-btn span { | |
| font-size: 1.5rem; | |
| } | |
| .action-btn:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); | |
| background: rgba(255, 255, 255, 0.25); | |
| } | |
| .action-btn.primary:hover { background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.3)); } | |
| .action-btn.secondary:hover { background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.3)); } | |
| .action-btn.tertiary:hover { background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(147, 51, 234, 0.3)); } | |
| .action-btn.quaternary:hover { background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(217, 119, 6, 0.3)); } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .dashboard { | |
| padding: 15px; | |
| } | |
| .header-content { | |
| flex-direction: column; | |
| text-align: center; | |
| gap: 20px; | |
| } | |
| .brand h1 { | |
| font-size: 2rem; | |
| } | |
| .time { | |
| font-size: 1.5rem; | |
| } | |
| .stats-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .tools-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .actions-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* Legacy styles for compatibility */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| .btn { | |
| padding: 12px 24px; | |
| border: none; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| text-decoration: none; | |
| display: inline-block; | |
| } | |
| .btn-primary { | |
| background: #2E7D32; | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background: #1B5E20; | |
| transform: translateY(-2px); | |
| } | |
| .btn-secondary { | |
| background: #4CAF50; | |
| color: white; | |
| } | |
| .btn-secondary:hover { | |
| background: #388E3C; | |
| } | |
| .card { | |
| background: white; | |
| border-radius: 12px; | |
| padding: 24px; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.1); | |
| margin-bottom: 20px; | |
| } | |
| .grid { | |
| display: grid; | |
| gap: 20px; | |
| } | |
| .grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } | |
| .grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } | |
| .grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } |