|
|
| :root { |
| |
| --color-background: rgba(252, 252, 249, 1); |
| --color-surface: rgba(255, 255, 253, 1); |
| --color-text: rgba(19, 52, 59, 1); |
| --color-text-secondary: rgba(98, 108, 113, 1); |
| --color-primary: rgba(33, 128, 141, 1); |
| --color-primary-hover: rgba(29, 116, 128, 1); |
| --color-primary-active: rgba(26, 104, 115, 1); |
| --color-secondary: rgba(94, 82, 64, 0.12); |
| --color-secondary-hover: rgba(94, 82, 64, 0.2); |
| --color-secondary-active: rgba(94, 82, 64, 0.25); |
| --color-border: rgba(94, 82, 64, 0.2); |
| --color-btn-primary-text: rgba(252, 252, 249, 1); |
| --color-card-border: rgba(94, 82, 64, 0.12); |
| --color-card-border-inner: rgba(94, 82, 64, 0.12); |
| --color-error: rgba(192, 21, 47, 1); |
| --color-success: rgba(33, 128, 141, 1); |
| --color-warning: rgba(168, 75, 47, 1); |
| --color-info: rgba(98, 108, 113, 1); |
| --color-focus-ring: rgba(33, 128, 141, 0.4); |
| --color-select-caret: rgba(19, 52, 59, 0.8); |
|
|
| |
| --focus-ring: 0 0 0 3px var(--color-focus-ring); |
| --focus-outline: 2px solid var(--color-primary); |
| --status-bg-opacity: 0.15; |
| --status-border-opacity: 0.25; |
| --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
| --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
|
|
| |
| --color-success-rgb: 33, 128, 141; |
| --color-error-rgb: 192, 21, 47; |
| --color-warning-rgb: 168, 75, 47; |
| --color-info-rgb: 98, 108, 113; |
|
|
| |
| --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system, |
| BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; |
| --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, |
| Monaco, Consolas, monospace; |
| --font-size-xs: 11px; |
| --font-size-sm: 12px; |
| --font-size-base: 14px; |
| --font-size-md: 14px; |
| --font-size-lg: 16px; |
| --font-size-xl: 18px; |
| --font-size-2xl: 20px; |
| --font-size-3xl: 24px; |
| --font-size-4xl: 30px; |
| --font-weight-normal: 400; |
| --font-weight-medium: 500; |
| --font-weight-semibold: 550; |
| --font-weight-bold: 600; |
| --line-height-tight: 1.2; |
| --line-height-normal: 1.5; |
| --letter-spacing-tight: -0.01em; |
|
|
| |
| --space-0: 0; |
| --space-1: 1px; |
| --space-2: 2px; |
| --space-4: 4px; |
| --space-6: 6px; |
| --space-8: 8px; |
| --space-10: 10px; |
| --space-12: 12px; |
| --space-16: 16px; |
| --space-20: 20px; |
| --space-24: 24px; |
| --space-32: 32px; |
|
|
| |
| --radius-sm: 6px; |
| --radius-base: 8px; |
| --radius-md: 10px; |
| --radius-lg: 12px; |
| --radius-full: 9999px; |
|
|
| |
| --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02); |
| --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02); |
| --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), |
| 0 2px 4px -1px rgba(0, 0, 0, 0.02); |
| --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), |
| 0 4px 6px -2px rgba(0, 0, 0, 0.02); |
| --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15), |
| inset 0 -1px 0 rgba(0, 0, 0, 0.03); |
|
|
| |
| --duration-fast: 150ms; |
| --duration-normal: 250ms; |
| --ease-standard: cubic-bezier(0.16, 1, 0.3, 1); |
|
|
| |
| --container-sm: 640px; |
| --container-md: 768px; |
| --container-lg: 1024px; |
| --container-xl: 1280px; |
| } |
|
|
| |
| @media (prefers-color-scheme: dark) { |
| :root { |
| --color-background: rgba(31, 33, 33, 1); |
| --color-surface: rgba(38, 40, 40, 1); |
| --color-text: rgba(245, 245, 245, 1); |
| --color-text-secondary: rgba(167, 169, 169, 0.7); |
| --color-primary: rgba(50, 184, 198, 1); |
| --color-primary-hover: rgba(45, 166, 178, 1); |
| --color-primary-active: rgba(41, 150, 161, 1); |
| --color-secondary: rgba(119, 124, 124, 0.15); |
| --color-secondary-hover: rgba(119, 124, 124, 0.25); |
| --color-secondary-active: rgba(119, 124, 124, 0.3); |
| --color-border: rgba(119, 124, 124, 0.3); |
| --color-error: rgba(255, 84, 89, 1); |
| --color-success: rgba(50, 184, 198, 1); |
| --color-warning: rgba(230, 129, 97, 1); |
| --color-info: rgba(167, 169, 169, 1); |
| --color-focus-ring: rgba(50, 184, 198, 0.4); |
| --color-btn-primary-text: rgba(19, 52, 59, 1); |
| --color-card-border: rgba(119, 124, 124, 0.2); |
| --color-card-border-inner: rgba(119, 124, 124, 0.15); |
| --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1), |
| inset 0 -1px 0 rgba(0, 0, 0, 0.15); |
| --button-border-secondary: rgba(119, 124, 124, 0.2); |
| --color-border-secondary: rgba(119, 124, 124, 0.2); |
| --color-select-caret: rgba(245, 245, 245, 0.8); |
|
|
| |
| --focus-ring: 0 0 0 3px var(--color-focus-ring); |
| --focus-outline: 2px solid var(--color-primary); |
| --status-bg-opacity: 0.15; |
| --status-border-opacity: 0.25; |
| --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
| --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
|
|
| |
| --color-success-rgb: 50, 184, 198; |
| --color-error-rgb: 255, 84, 89; |
| --color-warning-rgb: 230, 129, 97; |
| --color-info-rgb: 167, 169, 169; |
| } |
| } |
|
|
| |
| [data-color-scheme="dark"] { |
| --color-background: rgba(31, 33, 33, 1); |
| --color-surface: rgba(38, 40, 40, 1); |
| --color-text: rgba(245, 245, 245, 1); |
| --color-text-secondary: rgba(167, 169, 169, 0.7); |
| --color-primary: rgba(50, 184, 198, 1); |
| --color-primary-hover: rgba(45, 166, 178, 1); |
| --color-primary-active: rgba(41, 150, 161, 1); |
| --color-secondary: rgba(119, 124, 124, 0.15); |
| --color-secondary-hover: rgba(119, 124, 124, 0.25); |
| --color-secondary-active: rgba(119, 124, 124, 0.3); |
| --color-border: rgba(119, 124, 124, 0.3); |
| --color-error: rgba(255, 84, 89, 1); |
| --color-success: rgba(50, 184, 198, 1); |
| --color-warning: rgba(230, 129, 97, 1); |
| --color-info: rgba(167, 169, 169, 1); |
| --color-focus-ring: rgba(50, 184, 198, 0.4); |
| --color-btn-primary-text: rgba(19, 52, 59, 1); |
| --color-card-border: rgba(119, 124, 124, 0.15); |
| --color-card-border-inner: rgba(119, 124, 124, 0.15); |
| --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1), |
| inset 0 -1px 0 rgba(0, 0, 0, 0.15); |
| --color-border-secondary: rgba(119, 124, 124, 0.2); |
| --color-select-caret: rgba(245, 245, 245, 0.8); |
|
|
| |
| --focus-ring: 0 0 0 3px var(--color-focus-ring); |
| --focus-outline: 2px solid var(--color-primary); |
| --status-bg-opacity: 0.15; |
| --status-border-opacity: 0.25; |
| --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
| --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
|
|
| |
| --color-success-rgb: 50, 184, 198; |
| --color-error-rgb: 255, 84, 89; |
| --color-warning-rgb: 230, 129, 97; |
| --color-info-rgb: 167, 169, 169; |
| } |
|
|
| [data-color-scheme="light"] { |
| --color-background: rgba(252, 252, 249, 1); |
| --color-surface: rgba(255, 255, 253, 1); |
| --color-text: rgba(19, 52, 59, 1); |
| --color-text-secondary: rgba(98, 108, 113, 1); |
| --color-primary: rgba(33, 128, 141, 1); |
| --color-primary-hover: rgba(29, 116, 128, 1); |
| --color-primary-active: rgba(26, 104, 115, 1); |
| --color-secondary: rgba(94, 82, 64, 0.12); |
| --color-secondary-hover: rgba(94, 82, 64, 0.2); |
| --color-secondary-active: rgba(94, 82, 64, 0.25); |
| --color-border: rgba(94, 82, 64, 0.2); |
| --color-btn-primary-text: rgba(252, 252, 249, 1); |
| --color-card-border: rgba(94, 82, 64, 0.12); |
| --color-card-border-inner: rgba(94, 82, 64, 0.12); |
| --color-error: rgba(192, 21, 47, 1); |
| --color-success: rgba(33, 128, 141, 1); |
| --color-warning: rgba(168, 75, 47, 1); |
| --color-info: rgba(98, 108, 113, 1); |
| --color-focus-ring: rgba(33, 128, 141, 0.4); |
|
|
| |
| --color-success-rgb: 33, 128, 141; |
| --color-error-rgb: 192, 21, 47; |
| --color-warning-rgb: 168, 75, 47; |
| --color-info-rgb: 98, 108, 113; |
| } |
|
|
| |
| html { |
| font-size: var(--font-size-base); |
| font-family: var(--font-family-base); |
| line-height: var(--line-height-normal); |
| color: var(--color-text); |
| background-color: var(--color-background); |
| -webkit-font-smoothing: antialiased; |
| box-sizing: border-box; |
| } |
|
|
| body { |
| margin: 0; |
| padding: 0; |
| } |
|
|
| *, |
| *::before, |
| *::after { |
| box-sizing: inherit; |
| } |
|
|
| |
| h1, |
| h2, |
| h3, |
| h4, |
| h5, |
| h6 { |
| margin: 0; |
| font-weight: var(--font-weight-semibold); |
| line-height: var(--line-height-tight); |
| color: var(--color-text); |
| letter-spacing: var(--letter-spacing-tight); |
| } |
|
|
| h1 { |
| font-size: var(--font-size-4xl); |
| } |
| h2 { |
| font-size: var(--font-size-3xl); |
| } |
| h3 { |
| font-size: var(--font-size-2xl); |
| } |
| h4 { |
| font-size: var(--font-size-xl); |
| } |
| h5 { |
| font-size: var(--font-size-lg); |
| } |
| h6 { |
| font-size: var(--font-size-md); |
| } |
|
|
| p { |
| margin: 0 0 var(--space-16) 0; |
| } |
|
|
| a { |
| color: var(--color-primary); |
| text-decoration: none; |
| transition: color var(--duration-fast) var(--ease-standard); |
| } |
|
|
| a:hover { |
| color: var(--color-primary-hover); |
| } |
|
|
| code, |
| pre { |
| font-family: var(--font-family-mono); |
| font-size: calc(var(--font-size-base) * 0.95); |
| background-color: var(--color-secondary); |
| border-radius: var(--radius-sm); |
| } |
|
|
| code { |
| padding: var(--space-1) var(--space-4); |
| } |
|
|
| pre { |
| padding: var(--space-16); |
| margin: var(--space-16) 0; |
| overflow: auto; |
| border: 1px solid var(--color-border); |
| } |
|
|
| pre code { |
| background: none; |
| padding: 0; |
| } |
|
|
| |
| .btn { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| padding: var(--space-8) var(--space-16); |
| border-radius: var(--radius-base); |
| font-size: var(--font-size-base); |
| font-weight: 500; |
| line-height: 1.5; |
| cursor: pointer; |
| transition: all var(--duration-normal) var(--ease-standard); |
| border: none; |
| text-decoration: none; |
| position: relative; |
| } |
|
|
| .btn:focus-visible { |
| outline: none; |
| box-shadow: var(--focus-ring); |
| } |
|
|
| .btn--primary { |
| background: var(--color-primary); |
| color: var(--color-btn-primary-text); |
| } |
|
|
| .btn--primary:hover { |
| background: var(--color-primary-hover); |
| } |
|
|
| .btn--primary:active { |
| background: var(--color-primary-active); |
| } |
|
|
| .btn--secondary { |
| background: var(--color-secondary); |
| color: var(--color-text); |
| } |
|
|
| .btn--secondary:hover { |
| background: var(--color-secondary-hover); |
| } |
|
|
| .btn--secondary:active { |
| background: var(--color-secondary-active); |
| } |
|
|
| .btn--outline { |
| background: transparent; |
| border: 1px solid var(--color-border); |
| color: var(--color-text); |
| } |
|
|
| .btn--outline:hover { |
| background: var(--color-secondary); |
| } |
|
|
| .btn--sm { |
| padding: var(--space-4) var(--space-12); |
| font-size: var(--font-size-sm); |
| border-radius: var(--radius-sm); |
| } |
|
|
| .btn--lg { |
| padding: var(--space-10) var(--space-20); |
| font-size: var(--font-size-lg); |
| border-radius: var(--radius-md); |
| } |
|
|
| .btn--full-width { |
| width: 100%; |
| } |
|
|
| .btn:disabled { |
| opacity: 0.5; |
| cursor: not-allowed; |
| } |
|
|
| |
| .form-control { |
| display: block; |
| width: 100%; |
| padding: var(--space-8) var(--space-12); |
| font-size: var(--font-size-md); |
| line-height: 1.5; |
| color: var(--color-text); |
| background-color: var(--color-surface); |
| border: 1px solid var(--color-border); |
| border-radius: var(--radius-base); |
| transition: border-color var(--duration-fast) var(--ease-standard), |
| box-shadow var(--duration-fast) var(--ease-standard); |
| } |
|
|
| textarea.form-control { |
| font-family: var(--font-family-base); |
| font-size: var(--font-size-base); |
| } |
|
|
| select.form-control { |
| padding: var(--space-8) var(--space-12); |
| -webkit-appearance: none; |
| -moz-appearance: none; |
| appearance: none; |
| background-image: var(--select-caret-light); |
| background-repeat: no-repeat; |
| background-position: right var(--space-12) center; |
| background-size: 16px; |
| padding-right: var(--space-32); |
| } |
|
|
| |
| @media (prefers-color-scheme: dark) { |
| select.form-control { |
| background-image: var(--select-caret-dark); |
| } |
| } |
|
|
| |
| [data-color-scheme="dark"] select.form-control { |
| background-image: var(--select-caret-dark); |
| } |
|
|
| [data-color-scheme="light"] select.form-control { |
| background-image: var(--select-caret-light); |
| } |
|
|
| .form-control:focus { |
| border-color: var(--color-primary); |
| outline: var(--focus-outline); |
| } |
|
|
| .form-label { |
| display: block; |
| margin-bottom: var(--space-8); |
| font-weight: var(--font-weight-medium); |
| font-size: var(--font-size-sm); |
| } |
|
|
| .form-group { |
| margin-bottom: var(--space-16); |
| } |
|
|
| |
| .card { |
| background-color: var(--color-surface); |
| border-radius: var(--radius-lg); |
| border: 1px solid var(--color-card-border); |
| box-shadow: var(--shadow-sm); |
| overflow: hidden; |
| transition: box-shadow var(--duration-normal) var(--ease-standard); |
| } |
|
|
| .card:hover { |
| box-shadow: var(--shadow-md); |
| } |
|
|
| .card__body { |
| padding: var(--space-16); |
| } |
|
|
| .card__header, |
| .card__footer { |
| padding: var(--space-16); |
| border-bottom: 1px solid var(--color-card-border-inner); |
| } |
|
|
| |
| .status { |
| display: inline-flex; |
| align-items: center; |
| padding: var(--space-6) var(--space-12); |
| border-radius: var(--radius-full); |
| font-weight: var(--font-weight-medium); |
| font-size: var(--font-size-sm); |
| } |
|
|
| .status--success { |
| background-color: rgba( |
| var(--color-success-rgb, 33, 128, 141), |
| var(--status-bg-opacity) |
| ); |
| color: var(--color-success); |
| border: 1px solid |
| rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity)); |
| } |
|
|
| .status--error { |
| background-color: rgba( |
| var(--color-error-rgb, 192, 21, 47), |
| var(--status-bg-opacity) |
| ); |
| color: var(--color-error); |
| border: 1px solid |
| rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity)); |
| } |
|
|
| .status--warning { |
| background-color: rgba( |
| var(--color-warning-rgb, 168, 75, 47), |
| var(--status-bg-opacity) |
| ); |
| color: var(--color-warning); |
| border: 1px solid |
| rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity)); |
| } |
|
|
| .status--info { |
| background-color: rgba( |
| var(--color-info-rgb, 98, 108, 113), |
| var(--status-bg-opacity) |
| ); |
| color: var(--color-info); |
| border: 1px solid |
| rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity)); |
| } |
|
|
| |
| .container { |
| width: 100%; |
| margin-right: auto; |
| margin-left: auto; |
| padding-right: var(--space-16); |
| padding-left: var(--space-16); |
| } |
|
|
| @media (min-width: 640px) { |
| .container { |
| max-width: var(--container-sm); |
| } |
| } |
| @media (min-width: 768px) { |
| .container { |
| max-width: var(--container-md); |
| } |
| } |
| @media (min-width: 1024px) { |
| .container { |
| max-width: var(--container-lg); |
| } |
| } |
| @media (min-width: 1280px) { |
| .container { |
| max-width: var(--container-xl); |
| } |
| } |
|
|
| |
| .flex { |
| display: flex; |
| } |
| .flex-col { |
| flex-direction: column; |
| } |
| .items-center { |
| align-items: center; |
| } |
| .justify-center { |
| justify-content: center; |
| } |
| .justify-between { |
| justify-content: space-between; |
| } |
| .gap-4 { |
| gap: var(--space-4); |
| } |
| .gap-8 { |
| gap: var(--space-8); |
| } |
| .gap-16 { |
| gap: var(--space-16); |
| } |
|
|
| .m-0 { |
| margin: 0; |
| } |
| .mt-8 { |
| margin-top: var(--space-8); |
| } |
| .mb-8 { |
| margin-bottom: var(--space-8); |
| } |
| .mx-8 { |
| margin-left: var(--space-8); |
| margin-right: var(--space-8); |
| } |
| .my-8 { |
| margin-top: var(--space-8); |
| margin-bottom: var(--space-8); |
| } |
|
|
| .p-0 { |
| padding: 0; |
| } |
| .py-8 { |
| padding-top: var(--space-8); |
| padding-bottom: var(--space-8); |
| } |
| .px-8 { |
| padding-left: var(--space-8); |
| padding-right: var(--space-8); |
| } |
| .py-16 { |
| padding-top: var(--space-16); |
| padding-bottom: var(--space-16); |
| } |
| .px-16 { |
| padding-left: var(--space-16); |
| padding-right: var(--space-16); |
| } |
|
|
| .block { |
| display: block; |
| } |
| .hidden { |
| display: none; |
| } |
|
|
| |
| .sr-only { |
| position: absolute; |
| width: 1px; |
| height: 1px; |
| padding: 0; |
| margin: -1px; |
| overflow: hidden; |
| clip: rect(0, 0, 0, 0); |
| white-space: nowrap; |
| border-width: 0; |
| } |
|
|
| :focus-visible { |
| outline: var(--focus-outline); |
| outline-offset: 2px; |
| } |
|
|
| |
| [data-color-scheme="dark"] .btn--outline { |
| border: 1px solid var(--color-border-secondary); |
| } |
|
|
| @font-face { |
| font-family: 'FKGroteskNeue'; |
| src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2') |
| format('woff2'); |
| } |
|
|
| :root { |
| |
| --color-background: rgba(252, 252, 249, 1); |
| --color-surface: rgba(255, 255, 253, 1); |
| --color-text: rgba(19, 52, 59, 1); |
| --color-text-secondary: rgba(98, 108, 113, 1); |
| --color-primary: rgba(33, 128, 141, 1); |
| --color-primary-hover: rgba(29, 116, 128, 1); |
| --color-primary-active: rgba(26, 104, 115, 1); |
| --color-secondary: rgba(94, 82, 64, 0.12); |
| --color-secondary-hover: rgba(94, 82, 64, 0.2); |
| --color-secondary-active: rgba(94, 82, 64, 0.25); |
| --color-border: rgba(94, 82, 64, 0.2); |
| --color-btn-primary-text: rgba(252, 252, 249, 1); |
| --color-card-border: rgba(94, 82, 64, 0.12); |
| --color-card-border-inner: rgba(94, 82, 64, 0.12); |
| --color-error: rgba(192, 21, 47, 1); |
| --color-success: rgba(33, 128, 141, 1); |
| --color-warning: rgba(168, 75, 47, 1); |
| --color-info: rgba(98, 108, 113, 1); |
| --color-focus-ring: rgba(33, 128, 141, 0.4); |
| --color-select-caret: rgba(19, 52, 59, 0.8); |
|
|
| |
| --color-nature-green: rgba(76, 120, 68, 1); |
| --color-nature-forest: rgba(52, 73, 94, 1); |
| --color-nature-earth: rgba(139, 126, 102, 1); |
| --color-nature-water: rgba(52, 152, 219, 1); |
|
|
| |
| --focus-ring: 0 0 0 3px var(--color-focus-ring); |
| --focus-outline: 2px solid var(--color-primary); |
| --status-bg-opacity: 0.15; |
| --status-border-opacity: 0.25; |
| --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
| --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
|
|
| |
| --color-success-rgb: 33, 128, 141; |
| --color-error-rgb: 192, 21, 47; |
| --color-warning-rgb: 168, 75, 47; |
| --color-info-rgb: 98, 108, 113; |
|
|
| |
| --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system, |
| BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; |
| --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, |
| Monaco, Consolas, monospace; |
| --font-size-xs: 11px; |
| --font-size-sm: 12px; |
| --font-size-base: 14px; |
| --font-size-md: 14px; |
| --font-size-lg: 16px; |
| --font-size-xl: 18px; |
| --font-size-2xl: 20px; |
| --font-size-3xl: 24px; |
| --font-size-4xl: 30px; |
| --font-weight-normal: 400; |
| --font-weight-medium: 500; |
| --font-weight-semibold: 550; |
| --font-weight-bold: 600; |
| --line-height-tight: 1.2; |
| --line-height-normal: 1.5; |
| --letter-spacing-tight: -0.01em; |
|
|
| |
| --space-0: 0; |
| --space-1: 1px; |
| --space-2: 2px; |
| --space-4: 4px; |
| --space-6: 6px; |
| --space-8: 8px; |
| --space-10: 10px; |
| --space-12: 12px; |
| --space-16: 16px; |
| --space-20: 20px; |
| --space-24: 24px; |
| --space-32: 32px; |
|
|
| |
| --radius-sm: 6px; |
| --radius-base: 8px; |
| --radius-md: 10px; |
| --radius-lg: 12px; |
| --radius-full: 9999px; |
|
|
| |
| --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02); |
| --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02); |
| --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), |
| 0 2px 4px -1px rgba(0, 0, 0, 0.02); |
| --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), |
| 0 4px 6px -2px rgba(0, 0, 0, 0.02); |
| --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15), |
| inset 0 -1px 0 rgba(0, 0, 0, 0.03); |
|
|
| |
| --duration-fast: 150ms; |
| --duration-normal: 250ms; |
| --ease-standard: cubic-bezier(0.16, 1, 0.3, 1); |
|
|
| |
| --container-sm: 640px; |
| --container-md: 768px; |
| --container-lg: 1024px; |
| --container-xl: 1280px; |
| } |
|
|
| |
| @media (prefers-color-scheme: dark) { |
| :root { |
| --color-background: rgba(31, 33, 33, 1); |
| --color-surface: rgba(38, 40, 40, 1); |
| --color-text: rgba(245, 245, 245, 1); |
| --color-text-secondary: rgba(167, 169, 169, 0.7); |
| --color-primary: rgba(50, 184, 198, 1); |
| --color-primary-hover: rgba(45, 166, 178, 1); |
| --color-primary-active: rgba(41, 150, 161, 1); |
| --color-secondary: rgba(119, 124, 124, 0.15); |
| --color-secondary-hover: rgba(119, 124, 124, 0.25); |
| --color-secondary-active: rgba(119, 124, 124, 0.3); |
| --color-border: rgba(119, 124, 124, 0.3); |
| --color-error: rgba(255, 84, 89, 1); |
| --color-success: rgba(50, 184, 198, 1); |
| --color-warning: rgba(230, 129, 97, 1); |
| --color-info: rgba(167, 169, 169, 1); |
| --color-focus-ring: rgba(50, 184, 198, 0.4); |
| --color-btn-primary-text: rgba(19, 52, 59, 1); |
| --color-card-border: rgba(119, 124, 124, 0.2); |
| --color-card-border-inner: rgba(119, 124, 124, 0.15); |
| --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1), |
| inset 0 -1px 0 rgba(0, 0, 0, 0.15); |
| --button-border-secondary: rgba(119, 124, 124, 0.2); |
| --color-border-secondary: rgba(119, 124, 124, 0.2); |
| --color-select-caret: rgba(245, 245, 245, 0.8); |
|
|
| |
| --focus-ring: 0 0 0 3px var(--color-focus-ring); |
| --focus-outline: 2px solid var(--color-primary); |
| --status-bg-opacity: 0.15; |
| --status-border-opacity: 0.25; |
| --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
| --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
|
|
| |
| --color-success-rgb: 50, 184, 198; |
| --color-error-rgb: 255, 84, 89; |
| --color-warning-rgb: 230, 129, 97; |
| --color-info-rgb: 167, 169, 169; |
| } |
| } |
|
|
| |
| [data-color-scheme="dark"] { |
| --color-background: rgba(31, 33, 33, 1); |
| --color-surface: rgba(38, 40, 40, 1); |
| --color-text: rgba(245, 245, 245, 1); |
| --color-text-secondary: rgba(167, 169, 169, 0.7); |
| --color-primary: rgba(50, 184, 198, 1); |
| --color-primary-hover: rgba(45, 166, 178, 1); |
| --color-primary-active: rgba(41, 150, 161, 1); |
| --color-secondary: rgba(119, 124, 124, 0.15); |
| --color-secondary-hover: rgba(119, 124, 124, 0.25); |
| --color-secondary-active: rgba(119, 124, 124, 0.3); |
| --color-border: rgba(119, 124, 124, 0.3); |
| --color-error: rgba(255, 84, 89, 1); |
| --color-success: rgba(50, 184, 198, 1); |
| --color-warning: rgba(230, 129, 97, 1); |
| --color-info: rgba(167, 169, 169, 1); |
| --color-focus-ring: rgba(50, 184, 198, 0.4); |
| --color-btn-primary-text: rgba(19, 52, 59, 1); |
| --color-card-border: rgba(119, 124, 124, 0.15); |
| --color-card-border-inner: rgba(119, 124, 124, 0.15); |
| --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1), |
| inset 0 -1px 0 rgba(0, 0, 0, 0.15); |
| --color-border-secondary: rgba(119, 124, 124, 0.2); |
| --color-select-caret: rgba(245, 245, 245, 0.8); |
|
|
| |
| --focus-ring: 0 0 0 3px var(--color-focus-ring); |
| --focus-outline: 2px solid var(--color-primary); |
| --status-bg-opacity: 0.15; |
| --status-border-opacity: 0.25; |
| --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
| --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
|
|
| |
| --color-success-rgb: 50, 184, 198; |
| --color-error-rgb: 255, 84, 89; |
| --color-warning-rgb: 230, 129, 97; |
| --color-info-rgb: 167, 169, 169; |
| } |
|
|
| [data-color-scheme="light"] { |
| --color-background: rgba(252, 252, 249, 1); |
| --color-surface: rgba(255, 255, 253, 1); |
| --color-text: rgba(19, 52, 59, 1); |
| --color-text-secondary: rgba(98, 108, 113, 1); |
| --color-primary: rgba(33, 128, 141, 1); |
| --color-primary-hover: rgba(29, 116, 128, 1); |
| --color-primary-active: rgba(26, 104, 115, 1); |
| --color-secondary: rgba(94, 82, 64, 0.12); |
| --color-secondary-hover: rgba(94, 82, 64, 0.2); |
| --color-secondary-active: rgba(94, 82, 64, 0.25); |
| --color-border: rgba(94, 82, 64, 0.2); |
| --color-btn-primary-text: rgba(252, 252, 249, 1); |
| --color-card-border: rgba(94, 82, 64, 0.12); |
| --color-card-border-inner: rgba(94, 82, 64, 0.12); |
| --color-error: rgba(192, 21, 47, 1); |
| --color-success: rgba(33, 128, 141, 1); |
| --color-warning: rgba(168, 75, 47, 1); |
| --color-info: rgba(98, 108, 113, 1); |
| --color-focus-ring: rgba(33, 128, 141, 0.4); |
|
|
| |
| --color-success-rgb: 33, 128, 141; |
| --color-error-rgb: 192, 21, 47; |
| --color-warning-rgb: 168, 75, 47; |
| --color-info-rgb: 98, 108, 113; |
| } |
|
|
| |
| html { |
| font-size: var(--font-size-base); |
| font-family: var(--font-family-base); |
| line-height: var(--line-height-normal); |
| color: var(--color-text); |
| background-color: var(--color-background); |
| -webkit-font-smoothing: antialiased; |
| box-sizing: border-box; |
| scroll-behavior: smooth; |
| } |
|
|
| body { |
| margin: 0; |
| padding: 0; |
| } |
|
|
| *, |
| *::before, |
| *::after { |
| box-sizing: inherit; |
| } |
|
|
| |
| h1, |
| h2, |
| h3, |
| h4, |
| h5, |
| h6 { |
| margin: 0; |
| font-weight: var(--font-weight-semibold); |
| line-height: var(--line-height-tight); |
| color: var(--color-text); |
| letter-spacing: var(--letter-spacing-tight); |
| } |
|
|
| h1 { |
| font-size: var(--font-size-4xl); |
| } |
| h2 { |
| font-size: var(--font-size-3xl); |
| } |
| h3 { |
| font-size: var(--font-size-2xl); |
| } |
| h4 { |
| font-size: var(--font-size-xl); |
| } |
| h5 { |
| font-size: var(--font-size-lg); |
| } |
| h6 { |
| font-size: var(--font-size-md); |
| } |
|
|
| p { |
| margin: 0 0 var(--space-16) 0; |
| } |
|
|
| a { |
| color: var(--color-primary); |
| text-decoration: none; |
| transition: color var(--duration-fast) var(--ease-standard); |
| } |
|
|
| a:hover { |
| color: var(--color-primary-hover); |
| } |
|
|
| code, |
| pre { |
| font-family: var(--font-family-mono); |
| font-size: calc(var(--font-size-base) * 0.95); |
| background-color: var(--color-secondary); |
| border-radius: var(--radius-sm); |
| } |
|
|
| code { |
| padding: var(--space-1) var(--space-4); |
| } |
|
|
| pre { |
| padding: var(--space-16); |
| margin: var(--space-16) 0; |
| overflow: auto; |
| border: 1px solid var(--color-border); |
| } |
|
|
| pre code { |
| background: none; |
| padding: 0; |
| } |
|
|
| |
| .btn { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| padding: var(--space-8) var(--space-16); |
| border-radius: var(--radius-base); |
| font-size: var(--font-size-base); |
| font-weight: 500; |
| line-height: 1.5; |
| cursor: pointer; |
| transition: all var(--duration-normal) var(--ease-standard); |
| border: none; |
| text-decoration: none; |
| position: relative; |
| } |
|
|
| .btn:focus-visible { |
| outline: none; |
| box-shadow: var(--focus-ring); |
| } |
|
|
| .btn--primary { |
| background: var(--color-primary); |
| color: var(--color-btn-primary-text); |
| } |
|
|
| .btn--primary:hover { |
| background: var(--color-primary-hover); |
| } |
|
|
| .btn--primary:active { |
| background: var(--color-primary-active); |
| } |
|
|
| .btn--secondary { |
| background: var(--color-secondary); |
| color: var(--color-text); |
| } |
|
|
| .btn--secondary:hover { |
| background: var(--color-secondary-hover); |
| } |
|
|
| .btn--secondary:active { |
| background: var(--color-secondary-active); |
| } |
|
|
| .btn--outline { |
| background: transparent; |
| border: 1px solid var(--color-border); |
| color: var(--color-text); |
| } |
|
|
| .btn--outline:hover { |
| background: var(--color-secondary); |
| } |
|
|
| .btn--sm { |
| padding: var(--space-4) var(--space-12); |
| font-size: var(--font-size-sm); |
| border-radius: var(--radius-sm); |
| } |
|
|
| .btn--lg { |
| padding: var(--space-10) var(--space-20); |
| font-size: var(--font-size-lg); |
| border-radius: var(--radius-md); |
| } |
|
|
| .btn--full-width { |
| width: 100%; |
| } |
|
|
| .btn:disabled { |
| opacity: 0.5; |
| cursor: not-allowed; |
| } |
|
|
| |
| .form-control { |
| display: block; |
| width: 100%; |
| padding: var(--space-8) var(--space-12); |
| font-size: var(--font-size-md); |
| line-height: 1.5; |
| color: var(--color-text); |
| background-color: var(--color-surface); |
| border: 1px solid var(--color-border); |
| border-radius: var(--radius-base); |
| transition: border-color var(--duration-fast) var(--ease-standard), |
| box-shadow var(--duration-fast) var(--ease-standard); |
| } |
|
|
| textarea.form-control { |
| font-family: var(--font-family-base); |
| font-size: var(--font-size-base); |
| } |
|
|
| select.form-control { |
| padding: var(--space-8) var(--space-12); |
| -webkit-appearance: none; |
| -moz-appearance: none; |
| appearance: none; |
| background-image: var(--select-caret-light); |
| background-repeat: no-repeat; |
| background-position: right var(--space-12) center; |
| background-size: 16px; |
| padding-right: var(--space-32); |
| } |
|
|
| |
| @media (prefers-color-scheme: dark) { |
| select.form-control { |
| background-image: var(--select-caret-dark); |
| } |
| } |
|
|
| |
| [data-color-scheme="dark"] select.form-control { |
| background-image: var(--select-caret-dark); |
| } |
|
|
| [data-color-scheme="light"] select.form-control { |
| background-image: var(--select-caret-light); |
| } |
|
|
| .form-control:focus { |
| border-color: var(--color-primary); |
| outline: var(--focus-outline); |
| } |
|
|
| .form-label { |
| display: block; |
| margin-bottom: var(--space-8); |
| font-weight: var(--font-weight-medium); |
| font-size: var(--font-size-sm); |
| } |
|
|
| .form-group { |
| margin-bottom: var(--space-16); |
| } |
|
|
| |
| .card { |
| background-color: var(--color-surface); |
| border-radius: var(--radius-lg); |
| border: 1px solid var(--color-card-border); |
| box-shadow: var(--shadow-sm); |
| overflow: hidden; |
| transition: box-shadow var(--duration-normal) var(--ease-standard); |
| } |
|
|
| .card:hover { |
| box-shadow: var(--shadow-md); |
| } |
|
|
| .card__body { |
| padding: var(--space-16); |
| } |
|
|
| .card__header, |
| .card__footer { |
| padding: var(--space-16); |
| border-bottom: 1px solid var(--color-card-border-inner); |
| } |
|
|
| |
| .status { |
| display: inline-flex; |
| align-items: center; |
| padding: var(--space-6) var(--space-12); |
| border-radius: var(--radius-full); |
| font-weight: var(--font-weight-medium); |
| font-size: var(--font-size-sm); |
| } |
|
|
| .status--success { |
| background-color: rgba( |
| var(--color-success-rgb, 33, 128, 141), |
| var(--status-bg-opacity) |
| ); |
| color: var(--color-success); |
| border: 1px solid |
| rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity)); |
| } |
|
|
| .status--error { |
| background-color: rgba( |
| var(--color-error-rgb, 192, 21, 47), |
| var(--status-bg-opacity) |
| ); |
| color: var(--color-error); |
| border: 1px solid |
| rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity)); |
| } |
|
|
| .status--warning { |
| background-color: rgba( |
| var(--color-warning-rgb, 168, 75, 47), |
| var(--status-bg-opacity) |
| ); |
| color: var(--color-warning); |
| border: 1px solid |
| rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity)); |
| } |
|
|
| .status--info { |
| background-color: rgba( |
| var(--color-info-rgb, 98, 108, 113), |
| var(--status-bg-opacity) |
| ); |
| color: var(--color-info); |
| border: 1px solid |
| rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity)); |
| } |
|
|
| |
| .container { |
| width: 100%; |
| margin-right: auto; |
| margin-left: auto; |
| padding-right: var(--space-16); |
| padding-left: var(--space-16); |
| } |
|
|
| @media (min-width: 640px) { |
| .container { |
| max-width: var(--container-sm); |
| } |
| } |
| @media (min-width: 768px) { |
| .container { |
| max-width: var(--container-md); |
| } |
| } |
| @media (min-width: 1024px) { |
| .container { |
| max-width: var(--container-lg); |
| } |
| } |
| @media (min-width: 1280px) { |
| .container { |
| max-width: var(--container-xl); |
| } |
| } |
|
|
| |
| .flex { |
| display: flex; |
| } |
| .flex-col { |
| flex-direction: column; |
| } |
| .items-center { |
| align-items: center; |
| } |
| .justify-center { |
| justify-content: center; |
| } |
| .justify-between { |
| justify-content: space-between; |
| } |
| .gap-4 { |
| gap: var(--space-4); |
| } |
| .gap-8 { |
| gap: var(--space-8); |
| } |
| .gap-16 { |
| gap: var(--space-16); |
| } |
|
|
| .m-0 { |
| margin: 0; |
| } |
| .mt-8 { |
| margin-top: var(--space-8); |
| } |
| .mb-8 { |
| margin-bottom: var(--space-8); |
| } |
| .mx-8 { |
| margin-left: var(--space-8); |
| margin-right: var(--space-8); |
| } |
| .my-8 { |
| margin-top: var(--space-8); |
| margin-bottom: var(--space-8); |
| } |
|
|
| .p-0 { |
| padding: 0; |
| } |
| .py-8 { |
| padding-top: var(--space-8); |
| padding-bottom: var(--space-8); |
| } |
| .px-8 { |
| padding-left: var(--space-8); |
| padding-right: var(--space-8); |
| } |
| .py-16 { |
| padding-top: var(--space-16); |
| padding-bottom: var(--space-16); |
| } |
| .px-16 { |
| padding-left: var(--space-16); |
| padding-right: var(--space-16); |
| } |
|
|
| .block { |
| display: block; |
| } |
| .hidden { |
| display: none; |
| } |
|
|
| |
| .sr-only { |
| position: absolute; |
| width: 1px; |
| height: 1px; |
| padding: 0; |
| margin: -1px; |
| overflow: hidden; |
| clip: rect(0, 0, 0, 0); |
| white-space: nowrap; |
| border-width: 0; |
| } |
|
|
| :focus-visible { |
| outline: var(--focus-outline); |
| outline-offset: 2px; |
| } |
|
|
| |
| [data-color-scheme="dark"] .btn--outline { |
| border: 1px solid var(--color-border-secondary); |
| } |
|
|
| @font-face { |
| font-family: 'FKGroteskNeue'; |
| src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2') |
| format('woff2'); |
| } |
|
|
| |
|
|
| |
| .header { |
| background: linear-gradient(135deg, var(--color-nature-green), var(--color-primary)); |
| color: white; |
| padding: var(--space-16) 0; |
| box-shadow: var(--shadow-lg); |
| } |
|
|
| .logo h1 { |
| color: white; |
| font-size: var(--font-size-3xl); |
| margin-bottom: var(--space-4); |
| } |
|
|
| .logo p { |
| color: rgba(255, 255, 255, 0.9); |
| font-size: var(--font-size-sm); |
| margin: 0; |
| } |
|
|
| .nav-menu { |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| .nav-link { |
| color: white; |
| font-weight: var(--font-weight-medium); |
| padding: var(--space-8) var(--space-12); |
| border-radius: var(--radius-base); |
| transition: background-color var(--duration-fast) var(--ease-standard); |
| } |
|
|
| .nav-link:hover { |
| background-color: rgba(255, 255, 255, 0.1); |
| color: white; |
| } |
|
|
| |
| .hero { |
| background: linear-gradient(45deg, var(--color-nature-forest), var(--color-nature-water)); |
| color: white; |
| padding: 4rem 0; |
| text-align: center; |
| } |
|
|
| .hero-content h1 { |
| color: white; |
| font-size: var(--font-size-4xl); |
| margin-bottom: var(--space-24); |
| } |
|
|
| .hero-content p { |
| font-size: var(--font-size-lg); |
| margin-bottom: 2rem; |
| max-width: 800px; |
| margin-left: auto; |
| margin-right: auto; |
| opacity: 0.95; |
| } |
|
|
| .hero-stats { |
| justify-content: center; |
| flex-wrap: wrap; |
| margin-top: 2rem; |
| } |
|
|
| .stat-card { |
| text-align: center; |
| min-width: 200px; |
| } |
|
|
| .stat-card h3 { |
| font-size: var(--font-size-3xl); |
| color: var(--color-primary); |
| margin-bottom: var(--space-8); |
| } |
|
|
| .stat-card p { |
| color: var(--color-text-secondary); |
| margin: 0; |
| } |
|
|
| |
| .explorar, |
| .mapa, |
| .subir, |
| .foro, |
| .recursos { |
| min-height: 100vh; |
| padding: 4rem 0; |
| } |
|
|
| .explorar { |
| background: var(--color-background); |
| } |
|
|
| .mapa { |
| background: var(--color-surface); |
| } |
|
|
| .subir { |
| background: var(--color-background); |
| } |
|
|
| .foro { |
| background: var(--color-surface); |
| } |
|
|
| .recursos { |
| background: var(--color-background); |
| } |
|
|
| |
| .search-filters { |
| margin-bottom: var(--space-24); |
| } |
|
|
| .filters-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| gap: var(--space-16); |
| } |
|
|
| |
| .especies-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
| gap: var(--space-24); |
| } |
|
|
| .especie-card { |
| border: 1px solid var(--color-card-border); |
| border-radius: var(--radius-lg); |
| overflow: hidden; |
| background: var(--color-surface); |
| transition: transform var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard); |
| } |
|
|
| .especie-card:hover { |
| transform: translateY(-4px); |
| box-shadow: var(--shadow-lg); |
| } |
|
|
| .especie-image { |
| width: 100%; |
| height: 200px; |
| background: linear-gradient(45deg, var(--color-nature-green), var(--color-nature-earth)); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: white; |
| font-weight: var(--font-weight-semibold); |
| } |
|
|
| .especie-info { |
| padding: var(--space-16); |
| } |
|
|
| .especie-nombre { |
| font-size: var(--font-size-lg); |
| font-weight: var(--font-weight-semibold); |
| margin-bottom: var(--space-8); |
| } |
|
|
| .especie-cientifico { |
| font-style: italic; |
| color: var(--color-text-secondary); |
| margin-bottom: var(--space-8); |
| } |
|
|
| .especie-meta { |
| display: flex; |
| flex-direction: column; |
| gap: var(--space-4); |
| } |
|
|
| .meta-item { |
| font-size: var(--font-size-sm); |
| color: var(--color-text-secondary); |
| } |
|
|
| .meta-label { |
| font-weight: var(--font-weight-medium); |
| } |
|
|
| |
| .conservacion-peligro { |
| background-color: rgba(var(--color-error-rgb), 0.1); |
| color: var(--color-error); |
| padding: var(--space-4) var(--space-8); |
| border-radius: var(--radius-full); |
| font-size: var(--font-size-sm); |
| font-weight: var(--font-weight-medium); |
| display: inline-block; |
| margin-top: var(--space-8); |
| } |
|
|
| .conservacion-vulnerable { |
| background-color: rgba(var(--color-warning-rgb), 0.1); |
| color: var(--color-warning); |
| padding: var(--space-4) var(--space-8); |
| border-radius: var(--radius-full); |
| font-size: var(--font-size-sm); |
| font-weight: var(--font-weight-medium); |
| display: inline-block; |
| margin-top: var(--space-8); |
| } |
|
|
| .conservacion-menor { |
| background-color: rgba(var(--color-success-rgb), 0.1); |
| color: var(--color-success); |
| padding: var(--space-4) var(--space-8); |
| border-radius: var(--radius-full); |
| font-size: var(--font-size-sm); |
| font-weight: var(--font-weight-medium); |
| display: inline-block; |
| margin-top: var(--space-8); |
| } |
|
|
| |
| .mapa-container { |
| height: 500px; |
| } |
|
|
| .mapa-placeholder { |
| height: 100%; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| background: linear-gradient(135deg, rgba(33, 128, 141, 0.1), rgba(76, 120, 68, 0.1)); |
| border-radius: var(--radius-base); |
| text-align: center; |
| } |
|
|
| .mapa-leyenda { |
| margin-top: var(--space-16); |
| } |
|
|
| .leyenda-items { |
| display: flex; |
| gap: var(--space-16); |
| margin-top: var(--space-8); |
| } |
|
|
| .leyenda-item { |
| display: flex; |
| align-items: center; |
| gap: var(--space-8); |
| } |
|
|
| .marker-animalia, |
| .marker-plantae, |
| .marker-fungi { |
| width: 16px; |
| height: 16px; |
| border-radius: 50%; |
| } |
|
|
| .marker-animalia { |
| background: var(--color-error); |
| } |
|
|
| .marker-plantae { |
| background: var(--color-nature-green); |
| } |
|
|
| .marker-fungi { |
| background: var(--color-warning); |
| } |
|
|
| |
| .form-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| gap: var(--space-16); |
| } |
|
|
| .form-group-full { |
| grid-column: 1 / -1; |
| } |
|
|
| |
| .foro-post { |
| margin-bottom: var(--space-16); |
| } |
|
|
| .post-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: flex-start; |
| margin-bottom: var(--space-12); |
| } |
|
|
| .post-author { |
| font-weight: var(--font-weight-medium); |
| color: var(--color-primary); |
| } |
|
|
| .post-date { |
| font-size: var(--font-size-sm); |
| color: var(--color-text-secondary); |
| } |
|
|
| .post-content { |
| margin-bottom: var(--space-12); |
| } |
|
|
| .post-actions { |
| display: flex; |
| gap: var(--space-8); |
| } |
|
|
| |
| .recursos-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
| gap: var(--space-24); |
| } |
|
|
| |
| .footer { |
| background: var(--color-nature-forest); |
| color: white; |
| padding: 2rem 0; |
| margin-top: 4rem; |
| } |
|
|
| .footer-content { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| gap: var(--space-24); |
| } |
|
|
| .footer-section h3, |
| .footer-section h4 { |
| color: white; |
| margin-bottom: var(--space-16); |
| } |
|
|
| .footer-section ul { |
| list-style: none; |
| padding: 0; |
| margin: 0; |
| } |
|
|
| .footer-section li { |
| margin-bottom: var(--space-8); |
| } |
|
|
| .footer-section a { |
| color: rgba(255, 255, 255, 0.8); |
| transition: color var(--duration-fast) var(--ease-standard); |
| } |
|
|
| .footer-section a:hover { |
| color: white; |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .nav-menu { |
| display: none; |
| } |
| |
| .hero-stats { |
| flex-direction: column; |
| align-items: center; |
| } |
| |
| .stat-card { |
| margin-bottom: var(--space-16); |
| } |
| |
| .filters-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .especies-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .form-grid { |
| grid-template-columns: 1fr; |
| } |
| } |
