|
Tags: Replaced Manual revert |
| Line 6: |
Line 6: |
| overflow: hidden; | | overflow: hidden; |
| margin: 24px 0; | | margin: 24px 0; |
| }
| |
|
| |
| /* ===== LANDRACE ACCESSION TEMPLATE STYLING ===== */
| |
|
| |
| /* Main Accession Container */
| |
| .accession-container {
| |
| max-width: 1200px;
| |
| margin: 0 auto;
| |
| padding: 0 1rem;
| |
| }
| |
|
| |
| /* ===== ACCESSION HEADER ===== */
| |
| .accession-header {
| |
| background: linear-gradient(135deg, #2c5530 0%, #3a6b3f 100%);
| |
| border-radius: 12px;
| |
| padding: 2rem;
| |
| margin-bottom: 2rem;
| |
| color: white;
| |
| box-shadow: 0 8px 32px rgba(44, 85, 48, 0.3);
| |
| }
| |
|
| |
| .accession-id-banner {
| |
| background: rgba(255, 255, 255, 0.15);
| |
| backdrop-filter: blur(10px);
| |
| border: 1px solid rgba(255, 255, 255, 0.2);
| |
| border-radius: 8px;
| |
| padding: 0.75rem 1.5rem;
| |
| margin-bottom: 1rem;
| |
| font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
| |
| font-size: 0.9rem;
| |
| font-weight: 600;
| |
| letter-spacing: 0.5px;
| |
| }
| |
|
| |
| .accession-title {
| |
| font-size: 2.5rem;
| |
| font-weight: 700;
| |
| margin: 0 0 1rem 0;
| |
| text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
| |
| line-height: 1.2;
| |
| }
| |
|
| |
| .accession-meta {
| |
| font-size: 1rem;
| |
| opacity: 0.9;
| |
| font-weight: 500;
| |
| }
| |
|
| |
| /* ===== GEOGRAPHIC HIERARCHY ===== */
| |
| .geographic-hierarchy {
| |
| background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
| |
| border-radius: 12px;
| |
| padding: 1.5rem;
| |
| margin-bottom: 1.5rem;
| |
| border: 1px solid rgba(226, 232, 240, 0.8);
| |
| }
| |
|
| |
| .hierarchy-breadcrumb {
| |
| background: white;
| |
| border-radius: 8px;
| |
| padding: 1rem 1.5rem;
| |
| margin-bottom: 1rem;
| |
| font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
| |
| font-size: 0.95rem;
| |
| font-weight: 600;
| |
| color: #2d3748;
| |
| border: 1px solid #e2e8f0;
| |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
| |
| }
| |
|
| |
| .geographic-details {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
| |
| gap: 0.75rem;
| |
| font-size: 0.95rem;
| |
| }
| |
|
| |
| /* ===== SECTION STYLING ===== */
| |
| .section {
| |
| background: white;
| |
| border-radius: 12px;
| |
| padding: 1.5rem;
| |
| margin-bottom: 1.5rem;
| |
| border: 1px solid rgba(226, 232, 240, 0.8);
| |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
| |
| transition: box-shadow 0.3s ease;
| |
| }
| |
|
| |
| .section:hover {
| |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
| |
| }
| |
|
| |
| .section h2 {
| |
| color: #2c5530;
| |
| font-size: 1.5rem;
| |
| font-weight: 700;
| |
| margin: 0 0 1.5rem 0;
| |
| padding-bottom: 0.75rem;
| |
| border-bottom: 2px solid #e2e8f0;
| |
| position: relative;
| |
| }
| |
|
| |
| .section h2::after {
| |
| content: '';
| |
| position: absolute;
| |
| bottom: -2px;
| |
| left: 0;
| |
| width: 60px;
| |
| height: 2px;
| |
| background: linear-gradient(90deg, #2c5530, #3a6b3f);
| |
| border-radius: 1px;
| |
| }
| |
|
| |
| .section h3 {
| |
| color: #4a5568;
| |
| font-size: 1.2rem;
| |
| font-weight: 600;
| |
| margin: 1.5rem 0 1rem 0;
| |
| }
| |
|
| |
| /* ===== GRID LAYOUTS ===== */
| |
| .id-grid, .collection-grid, .morphology-grid, .flowering-grid,
| |
| .conservation-grid, .cannabinoid-grid, .terpene-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
| |
| gap: 1rem;
| |
| margin: 1rem 0;
| |
| }
| |
|
| |
| .id-item, .collection-item, .morph-item, .flower-item,
| |
| .conservation-item, .cannabinoid-item, .terpene-item {
| |
| background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
| |
| border-radius: 8px;
| |
| padding: 1rem;
| |
| border: 1px solid #e2e8f0;
| |
| transition: all 0.3s ease;
| |
| }
| |
|
| |
| .id-item:hover, .collection-item:hover, .morph-item:hover,
| |
| .flower-item:hover, .conservation-item:hover,
| |
| .cannabinoid-item:hover, .terpene-item:hover {
| |
| transform: translateY(-2px);
| |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
| |
| border-color: #3a6b3f;
| |
| }
| |
|
| |
| /* ===== CONSERVATION STATUS ===== */
| |
| .conservation-item.priority-critical {
| |
| background: linear-gradient(135deg, #fed7d7 0%, #feb2b2 100%);
| |
| border-color: #fc8181;
| |
| color: #742a2a;
| |
| }
| |
|
| |
| .conservation-item.priority-high {
| |
| background: linear-gradient(135deg, #feebc8 0%, #fbd38d 100%);
| |
| border-color: #f6ad55;
| |
| color: #7b341e;
| |
| }
| |
|
| |
| .conservation-item.priority-medium {
| |
| background: linear-gradient(135deg, #fefcbf 0%, #faf089 100%);
| |
| border-color: #ecc94b;
| |
| color: #744210;
| |
| }
| |
|
| |
| .conservation-item.priority-low {
| |
| background: linear-gradient(135deg, #c6f6d5 0%, #9ae6b4 100%);
| |
| border-color: #68d391;
| |
| color: #22543d;
| |
| }
| |
|
| |
| /* ===== CHEMICAL PROFILES ===== */
| |
| .chemical-profile {
| |
| background: linear-gradient(135deg, #e6fffa 0%, #b2f5ea 100%);
| |
| border: 1px solid #81e6d9;
| |
| }
| |
|
| |
| .cannabinoid-item.total, .terpene-item.total {
| |
| background: linear-gradient(135deg, #2c5530 0%, #3a6b3f 100%);
| |
| color: white;
| |
| font-weight: 700;
| |
| border-color: #2c5530;
| |
| }
| |
|
| |
| .cannabinoid-item.total:hover, .terpene-item.total:hover {
| |
| transform: translateY(-2px);
| |
| box-shadow: 0 6px 20px rgba(44, 85, 48, 0.3);
| |
| }
| |
|
| |
| /* ===== STEM CHARACTERISTICS ===== */
| |
| .stem-characteristics {
| |
| background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%);
| |
| border-radius: 8px;
| |
| padding: 1rem;
| |
| margin: 1rem 0;
| |
| border-left: 4px solid #48bb78;
| |
| }
| |
|
| |
| /* ===== SELECTION DETAILS ===== */
| |
| .selection-details {
| |
| background: linear-gradient(135deg, #faf5ff 0%, #e9d8fd 100%);
| |
| border-radius: 8px;
| |
| padding: 1.5rem;
| |
| margin: 1rem 0;
| |
| border: 1px solid #d6bcfa;
| |
| }
| |
|
| |
| .selection-details h3 {
| |
| color: #553c9a;
| |
| margin-top: 0;
| |
| }
| |
|
| |
| /* ===== DOCUMENTATION QUALITY ===== */
| |
| .documentation-quality {
| |
| background: linear-gradient(135deg, #fffaf0 0%, #feebc8 100%);
| |
| border: 1px solid #f6ad55;
| |
| }
| |
|
| |
| .completion-indicators, .photo-indicators, .verification-indicators,
| |
| .research-indicators, .gaps-indicators, .distribution-indicators {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
| |
| gap: 0.5rem;
| |
| margin: 1rem 0;
| |
| font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
| |
| font-size: 0.9rem;
| |
| }
| |
|
| |
| .completion-indicators div, .photo-indicators div, .verification-indicators div,
| |
| .research-indicators div, .gaps-indicators div, .distribution-indicators div {
| |
| padding: 0.5rem;
| |
| background: rgba(255, 255, 255, 0.7);
| |
| border-radius: 6px;
| |
| border: 1px solid rgba(246, 173, 85, 0.3);
| |
| }
| |
|
| |
| /* Checkmark and X styling */
| |
| .completion-indicators::before, .photo-indicators::before, .verification-indicators::before,
| |
| .research-indicators::before, .gaps-indicators::before, .distribution-indicators::before {
| |
| content: '';
| |
| }
| |
|
| |
| /* ===== PRESERVATION STATUS ===== */
| |
| .preservation-status {
| |
| background: linear-gradient(135deg, #f0f9ff 0%, #dbeafe 100%);
| |
| border: 1px solid #93c5fd;
| |
| }
| |
|
| |
| /* ===== ENVIRONMENTAL CONTEXT ===== */
| |
| .environmental-context {
| |
| background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
| |
| border: 1px solid #cbd5e0;
| |
| }
| |
|
| |
| /* ===== CULTURAL CONTEXT ===== */
| |
| .cultural-context {
| |
| background: linear-gradient(135deg, #fef5e7 0%, #fed7aa 100%);
| |
| border: 1px solid #f6ad55;
| |
| }
| |
|
| |
| /* ===== BOTANICAL DESCRIPTION ===== */
| |
| .botanical-description {
| |
| background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%);
| |
| border: 1px solid #68d391;
| |
| }
| |
|
| |
| /* ===== COLLECTION DETAILS ===== */
| |
| .collection-details {
| |
| background: linear-gradient(135deg, #edf2f7 0%, #e2e8f0 100%);
| |
| border: 1px solid #cbd5e0;
| |
| }
| |
|
| |
| /* ===== TRADITIONAL NOMENCLATURE ===== */
| |
| .traditional-nomenclature {
| |
| background: linear-gradient(135deg, #faf5ff 0%, #e9d8fd 100%);
| |
| border: 1px solid #b794f6;
| |
| }
| |
|
| |
| /* ===== PRIMARY IDENTIFICATION ===== */
| |
| .primary-identification {
| |
| background: linear-gradient(135deg, #e6fffa 0%, #b2f5ea 100%);
| |
| border: 1px solid #4fd1c7;
| |
| }
| |
|
| |
| /* ===== RELATED INFORMATION ===== */
| |
| .related-information {
| |
| background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
| |
| border: 1px solid #e17055;
| |
| }
| |
|
| |
| /* ===== RESEARCH MANAGEMENT ===== */
| |
| .research-management {
| |
| background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
| |
| border: 1px solid #42a5f5;
| |
| }
| |
|
| |
| /* ===== FOOTER ===== */
| |
| .accession-footer {
| |
| text-align: center;
| |
| padding: 2rem 0;
| |
| border-top: 1px solid #e2e8f0;
| |
| margin-top: 2rem;
| |
| color: #718096;
| |
| font-size: 0.9rem;
| |
| }
| |
|
| |
| /* ===== RESPONSIVE DESIGN ===== */
| |
| @media (max-width: 768px) {
| |
| .accession-header {
| |
| padding: 1.5rem;
| |
| }
| |
|
| |
| .accession-title {
| |
| font-size: 2rem;
| |
| }
| |
|
| |
| .id-grid, .collection-grid, .morphology-grid, .flowering-grid,
| |
| .conservation-grid, .cannabinoid-grid, .terpene-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
|
| |
| .completion-indicators, .photo-indicators, .verification-indicators,
| |
| .research-indicators, .gaps-indicators, .distribution-indicators {
| |
| grid-template-columns: 1fr;
| |
| }
| |
|
| |
| .geographic-details {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| }
| |
|
| |
| @media (max-width: 480px) {
| |
| .section {
| |
| padding: 1rem;
| |
| margin-bottom: 1rem;
| |
| }
| |
|
| |
| .accession-header {
| |
| padding: 1rem;
| |
| }
| |
|
| |
| .accession-title {
| |
| font-size: 1.5rem;
| |
| }
| |
|
| |
| .section h2 {
| |
| font-size: 1.3rem;
| |
| }
| |
| }
| |
|
| |
| /* ===== ANIMATION ENHANCEMENTS ===== */
| |
| @keyframes fadeInUp {
| |
| from {
| |
| opacity: 0;
| |
| transform: translateY(20px);
| |
| }
| |
| to {
| |
| opacity: 1;
| |
| transform: translateY(0);
| |
| }
| |
| }
| |
|
| |
| .section {
| |
| animation: fadeInUp 0.6s ease-out;
| |
| }
| |
|
| |
| .section:nth-child(1) { animation-delay: 0.1s; }
| |
| .section:nth-child(2) { animation-delay: 0.2s; }
| |
| .section:nth-child(3) { animation-delay: 0.3s; }
| |
| .section:nth-child(4) { animation-delay: 0.4s; }
| |
| .section:nth-child(5) { animation-delay: 0.5s; }
| |
|
| |
| /* ===== UTILITY CLASSES ===== */
| |
| .highlight {
| |
| background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
| |
| border: 1px solid #fc8181;
| |
| border-radius: 6px;
| |
| padding: 0.75rem;
| |
| margin: 0.5rem 0;
| |
| }
| |
|
| |
| .success {
| |
| color: #22543d;
| |
| font-weight: 600;
| |
| }
| |
|
| |
| .warning {
| |
| color: #744210;
| |
| font-weight: 600;
| |
| }
| |
|
| |
| .error {
| |
| color: #742a2a;
| |
| font-weight: 600;
| |
| }
| |
|
| |
| .info {
| |
| color: #2a4365;
| |
| font-weight: 600;
| |
| }
| |
|
| |
| /* ===== PRINT STYLES ===== */
| |
| @media print {
| |
| .accession-header {
| |
| background: #f7fafc !important;
| |
| color: #2d3748 !important;
| |
| box-shadow: none !important;
| |
| }
| |
|
| |
| .section {
| |
| box-shadow: none !important;
| |
| border: 1px solid #e2e8f0 !important;
| |
| break-inside: avoid;
| |
| }
| |
|
| |
| .id-item, .collection-item, .morph-item, .flower-item,
| |
| .conservation-item, .cannabinoid-item, .terpene-item {
| |
| break-inside: avoid;
| |
| }
| |
| }
| |
|
| |
| /* ===== DARK MODE SUPPORT ===== */
| |
| @media (prefers-color-scheme: dark) {
| |
| .section {
| |
| background: #1a202c;
| |
| border-color: #2d3748;
| |
| color: #e2e8f0;
| |
| }
| |
|
| |
| .section h2 {
| |
| color: #68d391;
| |
| }
| |
|
| |
| .id-item, .collection-item, .morph-item, .flower-item,
| |
| .conservation-item, .cannabinoid-item, .terpene-item {
| |
| background: #2d3748;
| |
| border-color: #4a5568;
| |
| color: #e2e8f0;
| |
| }
| |
|
| |
| .hierarchy-breadcrumb {
| |
| background: #2d3748;
| |
| color: #e2e8f0;
| |
| border-color: #4a5568;
| |
| }
| |
| } | | } |