|
|
| Line 1: |
Line 1: |
| /* Header styles */ | | /* ============================================ */ |
| | /* MAIN PAGE HEADER STYLES ONLY */ |
| | /* (home cards are styled in Template:Home/Cards - styles/styles.css) */ |
| | /* ============================================ */ |
| | |
| | /* Header wrapper */ |
| .main-header-logo { | | .main-header-logo { |
| text-align: center; | | text-align: center; |
| Line 7: |
Line 12: |
| } | | } |
|
| |
|
| | /* Logo block */ |
| .logo-container { | | .logo-container { |
| text-align: center; | | text-align: center; |
| Line 19: |
Line 25: |
| } | | } |
|
| |
|
| | /* Text block */ |
| .header-text { | | .header-text { |
| max-width: 800px; | | max-width: 800px; |
| Line 26: |
Line 33: |
|
| |
|
| .site-title { | | .site-title { |
| font-family: 'Georgia', 'Times New Roman', serif; | | font-family: "Georgia", "Times New Roman", serif; |
| font-size: 5rem; | | font-size: 5rem; |
| font-weight: 400; | | font-weight: 400; |
| Line 37: |
Line 44: |
|
| |
|
| .site-title::after { | | .site-title::after { |
| content: ''; | | content: ""; |
| display: block; | | display: block; |
| width: 100%; | | width: 100%; |
| Line 70: |
Line 77: |
| } | | } |
|
| |
|
| /* Navigation grid */ | | /* ============================================ */ |
| .home-grid {
| | /* RESPONSIVE TWEAKS */ |
| display: grid;
| | /* ============================================ */ |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
| |
| grid-gap: 0.625rem;
| |
| margin-top: 2.4rem;
| |
| }
| |
| | |
| /* Navigation button cards */ | |
| .home-card--button {
| |
| overflow: hidden;
| |
| padding: 0;
| |
| background: #242a31;
| |
| position: relative;
| |
| border-radius: 8px;
| |
| min-height: 200px;
| |
| line-height: 0;
| |
| font-size: 0;
| |
| }
| |
| | |
| .home-card--button a {
| |
| display: block;
| |
| width: 100%;
| |
| height: 100%;
| |
| min-height: 200px;
| |
| text-decoration: none;
| |
| color: inherit;
| |
| line-height: 0;
| |
| font-size: 0;
| |
| }
| |
| | |
| .home-card__background {
| |
| position: absolute;
| |
| top: 0;
| |
| right: 0;
| |
| bottom: 0;
| |
| left: 0;
| |
| background: #242a31;
| |
| border-radius: 8px;
| |
| line-height: 0;
| |
| font-size: 0;
| |
| }
| |
| | |
| .home-card__background * {
| |
| display: block;
| |
| line-height: 0;
| |
| }
| |
|
| |
|
| .home-card__background img {
| |
| width: 100%;
| |
| height: 100%;
| |
| object-fit: cover;
| |
| display: block;
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| margin: 0;
| |
| padding: 0;
| |
| vertical-align: top;
| |
| }
| |
|
| |
| .home-card--button:hover .home-card__background img {
| |
| transform: scale(1.05);
| |
| }
| |
|
| |
| .home-card__foreground {
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| bottom: 0;
| |
| display: flex;
| |
| align-items: center;
| |
| padding: 0 15px;
| |
| color: #fff;
| |
| font-weight: 700;
| |
| font-size: 1.1rem;
| |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
| |
| background: linear-gradient(to right, rgba(0,0,0,0.7), transparent);
| |
| z-index: 10;
| |
| }
| |
|
| |
| /* Content cards */
| |
| .home-card {
| |
| position: relative;
| |
| padding: 20px;
| |
| background: #f8f9fa;
| |
| border-radius: 8px;
| |
| box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04), 0 3px 6px rgba(0, 0, 0, 0.0575);
| |
| font-size: 0.875rem;
| |
| transition: transform 0.2s ease, box-shadow 0.2s ease;
| |
| border: 1px solid #dee2e6;
| |
| min-height: 120px;
| |
| }
| |
|
| |
| .home-card--col2 {
| |
| grid-column: span 2;
| |
| }
| |
|
| |
| .home-card:hover {
| |
| transform: translateY(-2px);
| |
| box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08), 0 6px 12px rgba(0, 0, 0, 0.115);
| |
| }
| |
|
| |
| .home-card__label {
| |
| color: #6c757d;
| |
| font-size: 0.8125rem;
| |
| letter-spacing: 0.75px;
| |
| text-transform: uppercase;
| |
| font-weight: 500;
| |
| margin-bottom: 0.5rem;
| |
| }
| |
|
| |
| .home-card__header {
| |
| margin: 0 0 1rem 0;
| |
| font-size: 1.1rem;
| |
| color: #2d5016;
| |
| font-weight: 600;
| |
| }
| |
|
| |
| .home-card__header a {
| |
| color: inherit;
| |
| text-decoration: none;
| |
| }
| |
|
| |
| .home-card__header a:hover {
| |
| color: #3d6b1f;
| |
| }
| |
|
| |
| .home-card__body {
| |
| color: #495057;
| |
| line-height: 1.6;
| |
| margin-bottom: 1rem;
| |
| }
| |
|
| |
| .home-card__links {
| |
| font-size: 0.8125rem;
| |
| color: #6c757d;
| |
| border-top: 1px solid #dee2e6;
| |
| padding-top: 0.75rem;
| |
| }
| |
|
| |
| .home-card__links a {
| |
| color: #2d5016;
| |
| text-decoration: none;
| |
| font-weight: 500;
| |
| }
| |
|
| |
| .home-card__links a:hover {
| |
| text-decoration: underline;
| |
| }
| |
|
| |
| /* Container for cards with image headers */
| |
| .home-card--image-header {
| |
| padding: 0;
| |
| overflow: hidden;
| |
| }
| |
|
| |
| /* Image header link wrapper */
| |
| .home-card__image-link {
| |
| display: block;
| |
| position: relative;
| |
| width: 100%;
| |
| height: 180px;
| |
| overflow: hidden;
| |
| text-decoration: none;
| |
| line-height: 0;
| |
| font-size: 0;
| |
| }
| |
|
| |
| /* Image background container */
| |
| .home-card__image-header-bg {
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| width: 100%;
| |
| height: 100%;
| |
| line-height: 0;
| |
| font-size: 0;
| |
| }
| |
|
| |
| .home-card__image-header-bg * {
| |
| display: block;
| |
| line-height: 0;
| |
| }
| |
|
| |
| .home-card__image-header-bg img {
| |
| width: 100%;
| |
| height: 100%;
| |
| object-fit: cover;
| |
| display: block;
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| margin: 0;
| |
| padding: 0;
| |
| vertical-align: top;
| |
| transition: transform 0.3s ease;
| |
| }
| |
|
| |
| /* Hover effect on image */
| |
| .home-card__image-link:hover .home-card__image-header-bg img {
| |
| transform: scale(1.05);
| |
| }
| |
|
| |
| /* Text overlay on image */
| |
| .home-card__image-overlay {
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| bottom: 0;
| |
| display: flex;
| |
| align-items: center;
| |
| padding: 0 20px;
| |
| color: #fff;
| |
| font-weight: 700;
| |
| font-size: 1.3rem;
| |
| text-shadow: 2px 2px 6px rgba(0,0,0,0.9);
| |
| background: linear-gradient(to right, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
| |
| z-index: 1;
| |
| }
| |
|
| |
| /* Content section below image */
| |
| .home-card__content {
| |
| padding: 20px;
| |
| }
| |
|
| |
| /* Ensure labels, headers, body, and links work within content section */
| |
| .home-card__content .home-card__label {
| |
| color: #6c757d;
| |
| font-size: 0.8125rem;
| |
| letter-spacing: 0.75px;
| |
| text-transform: uppercase;
| |
| font-weight: 500;
| |
| margin-bottom: 0.5rem;
| |
| }
| |
|
| |
| .home-card__content .home-card__header {
| |
| margin: 0 0 1rem 0;
| |
| font-size: 1.1rem;
| |
| color: #2d5016;
| |
| font-weight: 600;
| |
| }
| |
|
| |
| .home-card__content .home-card__body {
| |
| color: #495057;
| |
| line-height: 1.6;
| |
| margin-bottom: 1rem;
| |
| }
| |
|
| |
| .home-card__content .home-card__links {
| |
| font-size: 0.8125rem;
| |
| color: #6c757d;
| |
| border-top: 1px solid #dee2e6;
| |
| padding-top: 0.75rem;
| |
| }
| |
|
| |
| .home-card__content .home-card__links a {
| |
| color: #2d5016;
| |
| text-decoration: none;
| |
| font-weight: 500;
| |
| }
| |
|
| |
| .home-card__content .home-card__links a:hover {
| |
| text-decoration: underline;
| |
| }
| |
|
| |
| /* Mobile responsiveness */
| |
| @media (max-width: 768px) { | | @media (max-width: 768px) { |
| .home-card__image-link { | | .main-header-logo { |
| height: 150px; | | padding: 2rem 1rem 1.5rem 1rem; |
| | margin-bottom: 1.5rem; |
| } | | } |
|
| | |
| .home-card__image-overlay { | | .site-title { |
| font-size: 1.1rem; | | font-size: 3rem; |
| padding: 0 15px;
| |
| } | | } |
|
| | |
| .home-card__content { | | .main-tagline { |
| padding: 15px; | | font-size: 1.05rem; |
| } | | } |
| } | | } |
|
| |
|
| @media (max-width: 480px) { | | @media (max-width: 480px) { |
| .home-card__image-link { | | .site-title { |
| height: 120px; | | font-size: 2.4rem; |
| } | | } |
|
| | |
| .home-card__image-overlay { | | .main-tagline { |
| font-size: 1rem; | | font-size: 0.95rem; |
| } | | } |
| }
| |
|
| |
|
| | | .sub-tagline { |
| /* Conservation Panel - Mobile-Optimized TemplateStyles */
| | font-size: 0.9rem; |
| | | } |
| /* Panel shell */
| |
| .mw-parser-output .lw-cons-panel {
| |
| background:#fff; border:1px solid #e6ebea; border-radius:14px;
| |
| padding:18px 18px 16px; margin:24px 0; box-shadow:0 1px 2px rgba(0,0,0,.03);
| |
| color:#26421a;
| |
| }
| |
| .mw-parser-output .lw-cons-title{
| |
| font-family:Georgia,"Times New Roman",serif; font-size:1.6rem; line-height:1.2; margin:4px 2px 14px;
| |
| }
| |
| | |
| /* KPIs - responsive 3-column to 1-column */
| |
| .mw-parser-output .lw-kpis{
| |
| display:flex; gap:12px; flex-wrap:wrap; margin:4px 0 10px;
| |
| }
| |
| .mw-parser-output .lw-kpi{
| |
| flex:1 1 180px; background:#f8fbf7; border:1px solid #e6ebea;
| |
| border-radius:10px; padding:12px 14px; min-width:0;
| |
| }
| |
| .mw-parser-output .lw-kpi__num{
| |
| font-size:1.6rem; font-weight:700; line-height:1;
| |
| }
| |
| .mw-parser-output .lw-kpi__label{
| |
| font-size:.9rem; color:#44613a; margin-top:6px;
| |
| word-wrap:break-word; hyphens:auto;
| |
| }
| |
| | |
| /* Status bar - maintains proportions, readable labels */
| |
| .mw-parser-output .lw-statusbar{
| |
| display:flex; height:28px; border-radius:999px; overflow:hidden;
| |
| border:1px solid #e6ebea; background:#f4f7f4; margin:8px 0;
| |
| }
| |
| .mw-parser-output .lw-statusbar .seg{
| |
| display:flex; align-items:center; justify-content:center;
| |
| font-size:.85rem; font-weight:600; color:#17320f;
| |
| border-right:1px solid rgba(0,0,0,.06); min-width:24px;
| |
| }
| |
| .mw-parser-output .lw-statusbar .seg:last-child{border-right:none}
| |
| .mw-parser-output .seg--stable{background:#e9f7ee}
| |
| .mw-parser-output .seg--vulnerable{background:#fff6df}
| |
| .mw-parser-output .seg--endangered{background:#ffeade}
| |
| .mw-parser-output .seg--critical{background:#ffe3e3}
| |
| | |
| /* Legend - responsive wrapping with better touch targets */
| |
| .mw-parser-output .lw-legend{
| |
| display:flex; flex-wrap:wrap; gap:14px 18px; list-style:none;
| |
| padding:10px 4px 4px; margin:0;
| |
| }
| |
| .mw-parser-output .lw-legend li{
| |
| display:flex; align-items:center; gap:8px; font-size:.92rem;
| |
| color:#35522b; min-height:28px; /* Better touch target */
| |
| }
| |
| .mw-parser-output .dot{
| |
| width:10px; height:10px; border-radius:50%; display:inline-block;
| |
| border:1px solid rgba(0,0,0,.1); flex-shrink:0;
| |
| }
| |
| .mw-parser-output .dot--stable{background:#2ecc71}
| |
| .mw-parser-output .dot--vulnerable{background:#f1c40f}
| |
| .mw-parser-output .dot--endangered{background:#f39c12}
| |
| .mw-parser-output .dot--critical{background:#e74c3c}
| |
| | |
| /* Mobile breakpoints */
| |
| @media (max-width: 480px) {
| |
| .mw-parser-output .lw-cons-panel {
| |
| padding:16px 14px; margin:16px 0; border-radius:12px;
| |
| }
| |
|
| |
| .mw-parser-output .lw-cons-title{
| |
| font-size:1.4rem; margin:2px 0 12px;
| |
| }
| |
|
| |
| /* Stack KPIs on very small screens */
| |
| .mw-parser-output .lw-kpis{
| |
| gap:8px; margin:2px 0 12px;
| |
| }
| |
| .mw-parser-output .lw-kpi{
| |
| flex:1 1 100%; padding:10px 12px;
| |
| }
| |
| .mw-parser-output .lw-kpi__num{font-size:1.4rem}
| |
| .mw-parser-output .lw-kpi__label{font-size:.85rem; margin-top:4px}
| |
|
| |
| /* Adjust status bar for small screens */
| |
| .mw-parser-output .lw-statusbar{
| |
| height:24px; margin:6px 0;
| |
| }
| |
| .mw-parser-output .lw-statusbar .seg{
| |
| font-size:.8rem; min-width:20px;
| |
| }
| |
|
| |
| /* Legend adjustments */
| |
| .mw-parser-output .lw-legend{
| |
| gap:10px 14px; padding:8px 2px 2px;
| |
| }
| |
| .mw-parser-output .lw-legend li{
| |
| font-size:.88rem; gap:6px;
| |
| }
| |
| }
| |
| | |
| @media (max-width: 360px) {
| |
| .mw-parser-output .lw-cons-panel {
| |
| padding:14px 12px; margin:12px 0;
| |
| }
| |
|
| |
| /* Force single column for KPIs */
| |
| .mw-parser-output .lw-kpi{
| |
| flex-basis:100%; margin-bottom:0;
| |
| }
| |
|
| |
| /* Hide numbers in status bar if too cramped, keep colors visible */
| |
| .mw-parser-output .lw-statusbar .seg{
| |
| font-size:0; /* Hide text but keep color bars */
| |
| }
| |
|
| |
| /* Compact legend */
| |
| .mw-parser-output .lw-legend{
| |
| gap:8px 12px;
| |
| }
| |
| .mw-parser-output .lw-legend li{
| |
| font-size:.82rem; | |
| }
| |
| } | | } |
