/* Card Component Styles */ .terra-card { background: rgba(255, 255, 255, 0.95); border-radius: var(--radius-lg); border: 1px solid rgba(74, 124, 35, 0.1); box-shadow: var(--shadow-md); transition: all var(--transition-bounce); position: relative; overflow: hidden; backdrop-filter: blur(10px); } .terra-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--color-mint-light) 0%, var(--color-nature-green) 100%); opacity: 0; transition: opacity var(--transition-normal); } /* Card Variants */ .terra-card--default { /* Default styling already applied */ } .terra-card--elevated { box-shadow: var(--shadow-lg); border: none; } .terra-card--outlined { border: 2px solid var(--color-mint-light); box-shadow: none; } .terra-card--filled { background: var(--color-eco-soft); border: 1px solid var(--color-mint-light); } .terra-card--gradient { background: linear-gradient(135deg, var(--color-eco-soft) 0%, var(--color-eco-lighter) 100%); border: 1px solid var(--color-mint-light); } .terra-card--analysis { background: linear-gradient(135deg, var(--color-eco-soft) 0%, var(--color-eco-lighter) 100%); border: 2px solid var(--color-mint-light); position: relative; } .terra-card--analysis::after { content: ''; position: absolute; top: -50%; right: -50%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(168, 230, 163, 0.1) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .terra-card--success { border-left: 4px solid var(--color-success-green); background: rgba(76, 175, 80, 0.05); } .terra-card--warning { border-left: 4px solid var(--color-sunset-orange); background: rgba(255, 152, 0, 0.05); } .terra-card--error { border-left: 4px solid var(--color-warning-red); background: rgba(244, 67, 54, 0.05); } .terra-card--info { border-left: 4px solid var(--color-ocean-blue); background: rgba(33, 150, 243, 0.05); } /* Padding Variants */ .terra-card--padding-none { padding: 0; } .terra-card--padding-sm { padding: var(--spacing-md); } .terra-card--padding-md { padding: var(--spacing-lg); } .terra-card--padding-lg { padding: var(--spacing-xl); } .terra-card--padding-xl { padding: var(--spacing-2xl); } /* Interactive States */ .terra-card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); } .terra-card--hover:hover::before { opacity: 1; } .terra-card--clickable { cursor: pointer; } .terra-card--clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .terra-card--clickable:active { transform: translateY(0); box-shadow: var(--shadow-md); } /* Card Components */ .terra-card__header { padding: var(--spacing-lg) var(--spacing-lg) 0; border-bottom: 1px solid rgba(74, 124, 35, 0.1); margin-bottom: var(--spacing-lg); } .terra-card__body { flex: 1; } .terra-card__footer { padding: 0 var(--spacing-lg) var(--spacing-lg); border-top: 1px solid rgba(74, 124, 35, 0.1); margin-top: var(--spacing-lg); display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); } .terra-card__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-forest-primary); margin: 0 0 var(--spacing-sm) 0; line-height: 1.3; } .terra-card__subtitle { font-size: var(--font-size-sm); color: var(--color-gray-600); margin: 0; line-height: 1.4; } /* Special Card Types */ .terra-card--tool { transition: all var(--transition-bounce); cursor: pointer; position: relative; overflow: hidden; } .terra-card--tool::before { content: ''; position: absolute; top: -30px; right: -30px; width: 100px; height: 100px; background: var(--color-mint-light); opacity: 0.1; border-radius: 50%; transition: all var(--transition-normal); } .terra-card--tool:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); } .terra-card--tool:hover::before { opacity: 0.2; transform: scale(1.2); } .terra-card--stat { text-align: center; background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(74, 124, 35, 0.2); transition: all var(--transition-normal); } .terra-card--stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-nature-green); } .terra-card--impact { background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(129, 199, 132, 0.05) 100%); border: 2px solid var(--color-success-green); position: relative; } .terra-card--impact::before { background: linear-gradient(90deg, var(--color-success-green) 0%, var(--color-nature-green) 100%); opacity: 1; } /* Loading State */ .terra-card--loading { position: relative; overflow: hidden; } .terra-card--loading::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(168, 230, 163, 0.2), transparent ); animation: shimmer 1.5s infinite; } @keyframes shimmer { 0% { left: -100%; } 100% { left: 100%; } } /* Card Grid */ .terra-card-grid { display: grid; gap: var(--spacing-lg); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .terra-card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); } .terra-card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); } .terra-card-grid--4 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* Responsive Design */ @media (max-width: 640px) { .terra-card { border-radius: var(--radius-md); } .terra-card--padding-lg { padding: var(--spacing-lg); } .terra-card--padding-xl { padding: var(--spacing-lg); } .terra-card__header, .terra-card__footer { padding-left: var(--spacing-md); padding-right: var(--spacing-md); } .terra-card__title { font-size: var(--font-size-lg); } .terra-card-grid, .terra-card-grid--2, .terra-card-grid--3, .terra-card-grid--4 { grid-template-columns: 1fr; gap: var(--spacing-md); } } @media (max-width: 768px) { .terra-card-grid--2, .terra-card-grid--3, .terra-card-grid--4 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } } /* High Contrast Mode */ @media (prefers-contrast: high) { .terra-card { border-width: 2px; border-color: var(--color-forest-primary); } .terra-card--outlined { border-width: 3px; } } /* Reduced Motion */ @media (prefers-reduced-motion: reduce) { .terra-card { transition: none; } .terra-card--hover:hover, .terra-card--clickable:hover, .terra-card--tool:hover, .terra-card--stat:hover { transform: none; } .terra-card--loading::after { animation: none; } } /* Dark Mode Support (Future Enhancement) */ @media (prefers-color-scheme: dark) { .terra-card { background: rgba(26, 61, 15, 0.9); border-color: rgba(168, 230, 163, 0.2); color: var(--color-eco-soft); } .terra-card__title { color: var(--color-mint-light); } .terra-card__subtitle { color: var(--color-eco-soft); } }