Template:Accession

Template:Accession - Complete Clean Version

🌿

No primary image available

Accession

Accession ID not specified

           ,  •

🛡️

Conservation Status

Unknown

Status unknown

📅

Collection

Date unknown

Type unknown • Collector unknown

📍

Location

Unknown

Coordinates not specified

📋

Documentation

Unknown

         ✗ Origin • 
         ✗ Photos • 
         ✗ Custody

📍

Location coordinates not available

     <button class="action-btn secondary">📁 Download Data</button>

📋 Detailed Information

Additional sections (botanical description, cultural context, conservation details) will be added here with beautiful, scannable design.

For now, all essential information is displayed in the hero section above.

 margin-bottom: 2rem;

}

/* Gallery Styles */ .hero-gallery {

 margin-bottom: 1.5rem;

}

.hero-image {

 position: relative;
 width: 100%;
 height: 400px;
 border-radius: 12px;
 overflow: hidden;
 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);

}

.hero-img {

 width: 100%;
 height: 100%;
 object-fit: cover;

}

.hero-placeholder {

 width: 100%;
 height: 100%;
 background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 color: #64748b;

}

.placeholder-icon {

 font-size: 4rem;
 margin-bottom: 1rem;

}

.placeholder-text {

 font-size: 1.1rem;
 font-weight: 500;

}

.hero-overlay {

 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
 color: white;
 padding: 2rem;

}

.hero-title {

 font-size: 2.5rem;
 font-weight: 700;
 margin-bottom: 0.5rem;
 text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);

}

.hero-subtitle {

 font-size: 1.1rem;
 opacity: 0.9;
 font-family: 'SF Mono', monospace;
 margin-bottom: 0.5rem;

}

.hero-location {

 font-size: 1rem;
 opacity: 0.8;

}

.gallery-thumbs {

 display: flex;
 gap: 0.75rem;
 margin-top: 1rem;
 overflow-x: auto;
 padding: 0.5rem 0;

}

.thumb {

 flex-shrink: 0;
 width: 80px;
 height: 60px;
 border-radius: 8px;
 overflow: hidden;
 cursor: pointer;
 opacity: 0.7;
 transition: all 0.3s ease;
 position: relative;

}

.thumb:hover, .thumb.active {

 opacity: 1;
 transform: scale(1.05);

}

.thumb img {

 width: 100%;
 height: 100%;
 object-fit: cover;

}

.thumb-label {

 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 background: rgba(0, 0, 0, 0.7);
 color: white;
 font-size: 0.7rem;
 padding: 0.25rem;
 text-align: center;

}

/* Stats Dashboard */ .hero-stats {

 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 1rem;
 margin-bottom: 1.5rem;

}

.stat-card {

 background: white;
 border-radius: 12px;
 padding: 1.5rem;
 display: flex;
 align-items: center;
 gap: 1rem;
 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
 transition: transform 0.3s ease;

}

.stat-card:hover {

 transform: translateY(-2px);

}

.stat-icon {

 font-size: 2.5rem;
 flex-shrink: 0;

}

.stat-content {

 flex: 1;

}

.stat-label {

 font-size: 0.9rem;
 color: #64748b;
 font-weight: 500;
 margin-bottom: 0.25rem;

}

.stat-value {

 font-size: 1.3rem;
 font-weight: 700;
 color: #1e293b;
 margin-bottom: 0.25rem;

}

.stat-detail {

 font-size: 0.85rem;
 color: #64748b;

}

/* Conservation Status Colors */ .status-card.critical {

 border-left: 4px solid #ef4444;
 background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);

}

.status-card.high {

 border-left: 4px solid #f97316;
 background: linear-gradient(135deg, #fffbeb 0%, #fed7aa 100%);

}

.status-card.medium {

 border-left: 4px solid #eab308;
 background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);

}

.status-card.low {

 border-left: 4px solid #22c55e;
 background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);

}

/* Breadcrumb */ .hero-breadcrumb {

 background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
 border-radius: 12px;
 padding: 1rem 1.5rem;
 margin-bottom: 1.5rem;
 border: 1px solid #e2e8f0;

}

.breadcrumb-container {

 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 0.5rem;

}

.breadcrumb-item {

 display: flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.5rem 0.75rem;
 background: white;
 border-radius: 6px;
 font-size: 0.9rem;
 font-weight: 500;
 color: #475569;
 border: 1px solid #e2e8f0;

}

.breadcrumb-item.current {

 background: #2c5530;
 color: white;
 font-weight: 600;

}

.breadcrumb-arrow {

 color: #94a3b8;
 font-weight: bold;

}

.breadcrumb-icon {

 font-size: 1rem;

}

/* Map Section */ .hero-map {

 background: white;
 border-radius: 12px;
 overflow: hidden;
 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

}

.map-container {

 height: 200px;
 background: #f1f5f9;
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;

}

.map-placeholder, .map-unavailable {

 text-align: center;
 color: #64748b;

}

.map-icon {

 font-size: 3rem;
 margin-bottom: 0.5rem;

}

.map-coords {

 font-family: 'SF Mono', monospace;
 font-size: 0.9rem;
 margin-bottom: 0.5rem;
 font-weight: 600;
 color: #1e293b;

}

.map-text {

 font-size: 1rem;
 font-weight: 500;

}

.map-actions {

 padding: 1rem;
 display: flex;
 gap: 0.75rem;
 flex-wrap: wrap;

}

.action-btn {

 padding: 0.75rem 1.5rem;
 border-radius: 8px;
 font-weight: 600;
 font-size: 0.9rem;
 cursor: pointer;
 transition: all 0.3s ease;
 border: none;

}

.action-btn.primary {

 background: #2c5530;
 color: white;

}

.action-btn.primary:hover {

 background: #22452a;
 transform: translateY(-1px);

}

.action-btn.secondary {

 background: #f1f5f9;
 color: #475569;
 border: 1px solid #e2e8f0;

}

.action-btn.secondary:hover {

 background: #e2e8f0;
 transform: translateY(-1px);

}

/* Coming Soon Placeholder */ .coming-soon {

 background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
 border: 2px dashed #cbd5e0;
 border-radius: 12px;
 padding: 2rem;
 margin: 2rem 0;
 text-align: center;

}

.coming-soon-content {

 max-width: 500px;
 margin: 0 auto;

}

.coming-soon h3 {

 color: #475569;
 margin-bottom: 1rem;

}

.coming-soon p {

 color: #64748b;
 margin-bottom: 0.5rem;

}

/* Mobile Responsive */ @media (max-width: 768px) {

 .hero-title {
   font-size: 1.8rem;
 }
 
 .hero-stats {
   grid-template-columns: 1fr;
 }
 
 .breadcrumb-container {
   flex-direction: column;
   align-items: stretch;
 }
 
 .breadcrumb-arrow {
   transform: rotate(90deg);
   align-self: center;
 }
 
 .map-actions {
   flex-direction: column;
 }

} </style>

Clean Accession Template

This is the new, clean accession template with beautiful hero section and all CSS included.

Usage

{{Accession|{{PAGENAME}}}}

Features

Beautiful hero section with photo gallery
Key statistics dashboard
Geographic breadcrumb navigation
Conservation status indicators
Location map integration
Mobile-responsive design
All CSS included in template