Spaces:
Sleeping
Sleeping
| /* 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); | |
| } | |
| } |