sbidesigns/test
0
1<!DOCTYPE html>2<html lang="en" itemscope itemtype="https://schema.org/WebSite">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">6 <meta http-equiv="X-UA-Compatible" content="IE=edge">7 8 <!-- Primary Meta Tags -->9 <title>U.S. Climate History Archive | Interactive Timeline & Video Gallery</title>10 <meta name="title" content="U.S. Climate History Archive | Interactive Timeline & Video Gallery">11 <meta name="description" content="Comprehensive archive of U.S. climate history events, from colonial weather records to modern climate science. Explore interactive timelines, videos, and historical documentation.">12 <meta name="keywords" content="climate history, US climate, weather history, climate change archive, environmental history, historical weather data">13 <meta name="author" content="Climate History Archive">14 <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">15 <meta name="googlebot" content="index, follow">16 <meta name="language" content="English">17 <meta name="revisit-after" content="7 days">18 19 <!-- Canonical URL -->20 <link rel="canonical" href="" id="canonical-url">21 22 <!-- Open Graph / Facebook -->23 <meta property="og:type" content="website">24 <meta property="og:url" content="" id="og-url">25 <meta property="og:title" content="U.S. Climate History Archive" id="og-title">26 <meta property="og:description" content="Explore centuries of American climate history through interactive timelines, videos, and historical documentation." id="og-description">27 <meta property="og:image" content="" id="og-image">28 <meta property="og:image:width" content="1200">29 <meta property="og:image:height" content="630">30 <meta property="og:site_name" content="Climate History Archive">31 <meta property="og:locale" content="en_US">32 33 <!-- Twitter -->34 <meta name="twitter:card" content="summary_large_image">35 <meta name="twitter:url" content="" id="twitter-url">36 <meta name="twitter:title" content="U.S. Climate History Archive" id="twitter-title">37 <meta name="twitter:description" content="Explore centuries of American climate history through interactive timelines, videos, and historical documentation." id="twitter-description">38 <meta name="twitter:image" content="" id="twitter-image">39 40 <!-- Favicon -->41 <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='%231a5f7a'/%3E%3Cpath d='M30 70 Q50 30 70 70' stroke='%23ffffff' stroke-width='4' fill='none'/%3E%3Ccircle cx='50' cy='35' r='8' fill='%23ffffff'/%3E%3C/svg%3E">42 <link rel="apple-touch-icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='%231a5f7a'/%3E%3Cpath d='M30 70 Q50 30 70 70' stroke='%23ffffff' stroke-width='4' fill='none'/%3E%3Ccircle cx='50' cy='35' r='8' fill='%23ffffff'/%3E%3C/svg%3E">43 44 <!-- PWA Manifest -->45 <link rel="manifest" href="data:application/json;base64,eyJuYW1lIjoiVS5TLiBDbGltYXRlIEhpc3RvcnkgQXJjaGl2ZSIsInNob3J0X25hbWUiOiJDbGltYXRlIEFyY2hpdmUiLCJzdGFydF91cmwiOiIuIiwiZGlzcGxheSI6InN0YW5kYWxvbmUiLCJiYWNrZ3JvdW5kX2NvbG9yIjoiIzBhMjEyNCIsInRoZW1lX2NvbG9yIjoiIzFhNWY3YSJ9">46 <meta name="theme-color" content="#1a5f7a">47 <meta name="apple-mobile-web-app-capable" content="yes">48 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">49 <meta name="apple-mobile-web-app-title" content="Climate Archive">50 51 <!-- Preconnect for performance -->52 <link rel="preconnect" href="https://www.pbs.org" crossorigin>53 <link rel="preconnect" href="https://www.youtube.com" crossorigin>54 <link rel="dns-prefetch" href="https://www.pbs.org">55 <link rel="dns-prefetch" href="https://www.youtube.com">56 57 <style>58 /* ============================================59 CSS RESET & BASE60 ============================================ */61 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }62 63 :root {64 /* Color Palette - Earth & Climate Tones */65 --color-bg-primary: #0a2124;66 --color-bg-secondary: #0f2d31;67 --color-bg-tertiary: #143a3f;68 --color-bg-card: #132d31;69 --color-bg-card-hover: #1a4045;70 --color-bg-modal: rgba(10, 33, 36, 0.98);71 72 --color-text-primary: #e8f4f6;73 --color-text-secondary: #a3c4c9;74 --color-text-muted: #6a8f95;75 --color-text-accent: #5cc8d4;76 77 --color-accent-primary: #1a5f7a;78 --color-accent-secondary: #2d8fa8;79 --color-accent-highlight: #5cc8d4;80 --color-accent-gold: #d4a95c;81 82 --color-success: #4ade80;83 --color-warning: #fbbf24;84 --color-error: #f87171;85 86 /* Typography */87 --font-primary: 'Segoe UI', system-ui, -apple-system, sans-serif;88 --font-display: 'Georgia', 'Times New Roman', serif;89 90 /* Spacing */91 --space-xs: 0.25rem;92 --space-sm: 0.5rem;93 --space-md: 1rem;94 --space-lg: 1.5rem;95 --space-xl: 2rem;96 --space-2xl: 3rem;97 --space-3xl: 4rem;98 99 /* Borders & Radius */100 --radius-sm: 4px;101 --radius-md: 8px;102 --radius-lg: 12px;103 --radius-xl: 16px;104 --radius-full: 9999px;105 106 /* Shadows */107 --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);108 --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);109 --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);110 --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);111 112 /* Transitions */113 --transition-fast: 150ms ease;114 --transition-normal: 250ms ease;115 --transition-slow: 350ms ease;116 117 /* Z-index layers */118 --z-dropdown: 100;119 --z-sticky: 200;120 --z-modal-backdrop: 900;121 --z-modal: 1000;122 --z-toast: 1100;123 }124 125 /* Light mode preference */126 @media (prefers-color-scheme: light) {127 :root {128 --color-bg-primary: #f0f7f8;129 --color-bg-secondary: #e4f0f2;130 --color-bg-tertiary: #d8e8eb;131 --color-bg-card: #ffffff;132 --color-bg-card-hover: #f5fafa;133 --color-bg-modal: rgba(240, 247, 248, 0.98);134 --color-text-primary: #1a3a3f;135 --color-text-secondary: #3a5a60;136 --color-text-muted: #6a8a90;137 --color-text-accent: #1a7f8a;138 }139 }140 141 html {142 font-size: 16px;143 scroll-behavior: smooth;144 -webkit-text-size-adjust: 100%;145 }146 147 body {148 font-family: var(--font-primary);149 background: var(--color-bg-primary);150 color: var(--color-text-primary);151 line-height: 1.6;152 min-height: 100vh;153 overflow-x: hidden;154 -webkit-font-smoothing: antialiased;155 }156 157 ::selection {158 background: var(--color-accent-primary);159 color: var(--color-text-primary);160 }161 162 :focus-visible {163 outline: 2px solid var(--color-accent-highlight);164 outline-offset: 2px;165 }166 167 .skip-link {168 position: absolute;169 top: -100%;170 left: 50%;171 transform: translateX(-50%);172 padding: var(--space-sm) var(--space-md);173 background: var(--color-accent-primary);174 color: var(--color-text-primary);175 border-radius: var(--radius-md);176 z-index: var(--z-toast);177 transition: top var(--transition-fast);178 text-decoration: none;179 }180 181 .skip-link:focus {182 top: var(--space-md);183 }184 185 /* ============================================186 LAYOUT STRUCTURE187 ============================================ */188 .app-container {189 display: flex;190 flex-direction: column;191 min-height: 100vh;192 }193 194 /* Header */195 .header {196 position: sticky;197 top: 0;198 z-index: var(--z-sticky);199 background: linear-gradient(180deg, var(--color-bg-primary) 0%, rgba(10, 33, 36, 0.95) 100%);200 backdrop-filter: blur(10px);201 -webkit-backdrop-filter: blur(10px);202 border-bottom: 1px solid rgba(92, 200, 212, 0.1);203 padding: var(--space-md) var(--space-lg);204 }205 206 .header-inner {207 max-width: 1600px;208 margin: 0 auto;209 display: flex;210 align-items: center;211 justify-content: space-between;212 gap: var(--space-lg);213 }214 215 .logo {216 display: flex;217 align-items: center;218 gap: var(--space-sm);219 text-decoration: none;220 color: var(--color-text-primary);221 flex-shrink: 0;222 }223 224 .logo-icon {225 width: 40px;226 height: 40px;227 flex-shrink: 0;228 }229 230 .logo-text {231 font-family: var(--font-display);232 font-size: 1.25rem;233 font-weight: 700;234 letter-spacing: -0.02em;235 }236 237 .logo-text span {238 color: var(--color-accent-highlight);239 }240 241 /* Search Bar */242 .search-container {243 flex: 1;244 max-width: 600px;245 position: relative;246 }247 248 .search-input {249 width: 100%;250 padding: var(--space-sm) var(--space-md) var(--space-sm) 2.5rem;251 background: var(--color-bg-secondary);252 border: 1px solid rgba(92, 200, 212, 0.2);253 border-radius: var(--radius-full);254 color: var(--color-text-primary);255 font-size: 0.9375rem;256 transition: all var(--transition-normal);257 }258 259 .search-input:focus {260 border-color: var(--color-accent-highlight);261 box-shadow: 0 0 0 3px rgba(92, 200, 212, 0.15);262 outline: none;263 }264 265 .search-input::placeholder {266 color: var(--color-text-muted);267 }268 269 .search-icon {270 position: absolute;271 left: var(--space-md);272 top: 50%;273 transform: translateY(-50%);274 color: var(--color-text-muted);275 pointer-events: none;276 }277 278 /* Header Controls */279 .header-controls {280 display: flex;281 align-items: center;282 gap: var(--space-sm);283 }284 285 .btn {286 display: inline-flex;287 align-items: center;288 justify-content: center;289 gap: var(--space-xs);290 padding: var(--space-sm) var(--space-md);291 border: none;292 border-radius: var(--radius-md);293 font-size: 0.875rem;294 font-weight: 500;295 cursor: pointer;296 transition: all var(--transition-fast);297 text-decoration: none;298 background: transparent;299 color: var(--color-text-secondary);300 }301 302 .btn:hover {303 background: rgba(92, 200, 212, 0.1);304 color: var(--color-text-primary);305 }306 307 .btn-icon {308 width: 40px;309 height: 40px;310 padding: 0;311 border-radius: var(--radius-full);312 }313 314 /* Navigation */315 .nav-main {316 display: none;317 gap: var(--space-xs);318 }319 320 @media (min-width: 1024px) {321 .nav-main {322 display: flex;323 }324 }325 326 .nav-link {327 padding: var(--space-sm) var(--space-md);328 color: var(--color-text-secondary);329 text-decoration: none;330 font-size: 0.9375rem;331 border-radius: var(--radius-md);332 transition: all var(--transition-fast);333 }334 335 .nav-link:hover, .nav-link.active {336 color: var(--color-text-primary);337 background: rgba(92, 200, 212, 0.1);338 }339 340 .mobile-menu-btn {341 display: flex;342 }343 344 @media (min-width: 1024px) {345 .mobile-menu-btn {346 display: none;347 }348 }349 350 /* ============================================351 MAIN CONTENT AREA352 ============================================ */353 .main-content {354 flex: 1;355 padding: var(--space-lg);356 }357 358 @media (min-width: 768px) {359 .main-content {360 padding: var(--space-xl) var(--space-2xl);361 }362 }363 364 /* Page Header */365 .page-header {366 max-width: 1600px;367 margin: 0 auto var(--space-xl);368 }369 370 .page-title {371 font-family: var(--font-display);372 font-size: clamp(2rem, 5vw, 3rem);373 font-weight: 700;374 line-height: 1.2;375 margin-bottom: var(--space-md);376 }377 378 .page-title span {379 color: var(--color-accent-highlight);380 }381 382 .page-description {383 font-size: 1.125rem;384 color: var(--color-text-secondary);385 max-width: 700px;386 line-height: 1.7;387 }388 389 /* Filter Bar */390 .filter-bar {391 max-width: 1600px;392 margin: 0 auto var(--space-lg);393 display: flex;394 flex-wrap: wrap;395 gap: var(--space-sm);396 padding: var(--space-md);397 background: var(--color-bg-secondary);398 border-radius: var(--radius-lg);399 }400 401 .filter-group {402 display: flex;403 align-items: center;404 gap: var(--space-sm);405 }406 407 .filter-label {408 font-size: 0.875rem;409 color: var(--color-text-muted);410 white-space: nowrap;411 }412 413 .filter-select {414 padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-sm);415 background: var(--color-bg-tertiary);416 border: 1px solid rgba(92, 200, 212, 0.2);417 border-radius: var(--radius-md);418 color: var(--color-text-primary);419 font-size: 0.875rem;420 cursor: pointer;421 transition: all var(--transition-fast);422 }423 424 .filter-select:focus {425 border-color: var(--color-accent-highlight);426 outline: none;427 }428 429 .filter-chip {430 display: inline-flex;431 align-items: center;432 gap: var(--space-xs);433 padding: var(--space-xs) var(--space-sm);434 background: var(--color-bg-tertiary);435 border: 1px solid rgba(92, 200, 212, 0.2);436 border-radius: var(--radius-full);437 font-size: 0.8125rem;438 color: var(--color-text-secondary);439 cursor: pointer;440 transition: all var(--transition-fast);441 }442 443 .filter-chip:hover, .filter-chip.active {444 background: var(--color-accent-primary);445 border-color: var(--color-accent-primary);446 color: var(--color-text-primary);447 }448 449 /* Results Info */450 .results-info {451 max-width: 1600px;452 margin: 0 auto var(--space-md);453 display: flex;454 justify-content: space-between;455 align-items: center;456 flex-wrap: wrap;457 gap: var(--space-sm);458 }459 460 .results-count {461 font-size: 0.875rem;462 color: var(--color-text-muted);463 }464 465 .results-count strong {466 color: var(--color-text-primary);467 }468 469 .view-toggle {470 display: flex;471 gap: var(--space-xs);472 }473 474 .view-btn {475 width: 36px;476 height: 36px;477 display: flex;478 align-items: center;479 justify-content: center;480 background: var(--color-bg-secondary);481 border: 1px solid rgba(92, 200, 212, 0.2);482 border-radius: var(--radius-md);483 color: var(--color-text-muted);484 cursor: pointer;485 transition: all var(--transition-fast);486 }487 488 .view-btn:hover, .view-btn.active {489 background: var(--color-accent-primary);490 border-color: var(--color-accent-primary);491 color: var(--color-text-primary);492 }493 494 /* ============================================495 ARTICLE GRID496 ============================================ */497 .article-grid {498 max-width: 1600px;499 margin: 0 auto;500 display: grid;501 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));502 gap: var(--space-lg);503 }504 505 .article-grid.list-view {506 grid-template-columns: 1fr;507 max-width: 900px;508 }509 510 /* Article Card */511 .article-card {512 position: relative;513 background: var(--color-bg-card);514 border-radius: var(--radius-lg);515 overflow: hidden;516 cursor: pointer;517 transition: all var(--transition-normal);518 border: 1px solid rgba(92, 200, 212, 0.1);519 }520 521 .article-card:hover {522 transform: translateY(-4px);523 background: var(--color-bg-card-hover);524 box-shadow: var(--shadow-lg);525 border-color: rgba(92, 200, 212, 0.2);526 }527 528 .article-card:focus {529 border-color: var(--color-accent-highlight);530 outline: none;531 }532 533 /* Card Media */534 .card-media {535 position: relative;536 aspect-ratio: 16 / 9;537 overflow: hidden;538 background: var(--color-bg-tertiary);539 }540 541 .card-image {542 width: 100%;543 height: 100%;544 object-fit: cover;545 transition: transform var(--transition-slow);546 }547 548 .article-card:hover .card-image {549 transform: scale(1.05);550 }551 552 .card-media-overlay {553 position: absolute;554 inset: 0;555 background: linear-gradient(0deg, rgba(10, 33, 36, 0.8) 0%, transparent 50%);556 pointer-events: none;557 }558 559 .card-play-btn {560 position: absolute;561 top: 50%;562 left: 50%;563 transform: translate(-50%, -50%) scale(0.9);564 width: 60px;565 height: 60px;566 display: flex;567 align-items: center;568 justify-content: center;569 background: rgba(26, 95, 122, 0.9);570 border-radius: var(--radius-full);571 color: var(--color-text-primary);572 opacity: 0;573 transition: all var(--transition-normal);574 }575 576 .article-card:hover .card-play-btn {577 opacity: 1;578 transform: translate(-50%, -50%) scale(1);579 }580 581 .card-badge {582 position: absolute;583 top: var(--space-sm);584 left: var(--space-sm);585 padding: var(--space-xs) var(--space-sm);586 background: rgba(10, 33, 36, 0.85);587 backdrop-filter: blur(4px);588 border-radius: var(--radius-sm);589 font-size: 0.75rem;590 font-weight: 500;591 color: var(--color-accent-highlight);592 text-transform: uppercase;593 letter-spacing: 0.05em;594 }595 596 .card-duration {597 position: absolute;598 bottom: var(--space-sm);599 right: var(--space-sm);600 padding: var(--space-xs) var(--space-sm);601 background: rgba(10, 33, 36, 0.85);602 backdrop-filter: blur(4px);603 border-radius: var(--radius-sm);604 font-size: 0.75rem;605 color: var(--color-text-primary);606 }607 608 /* Card Content */609 .card-content {610 padding: var(--space-md);611 }612 613 .card-category {614 display: inline-block;615 font-size: 0.75rem;616 font-weight: 600;617 color: var(--color-accent-highlight);618 text-transform: uppercase;619 letter-spacing: 0.05em;620 margin-bottom: var(--space-xs);621 }622 623 .card-title {624 font-family: var(--font-display);625 font-size: 1.125rem;626 font-weight: 600;627 line-height: 1.3;628 margin-bottom: var(--space-sm);629 display: -webkit-box;630 -webkit-line-clamp: 2;631 -webkit-box-orient: vertical;632 overflow: hidden;633 }634 635 .card-excerpt {636 font-size: 0.875rem;637 color: var(--color-text-secondary);638 line-height: 1.5;639 display: -webkit-box;640 -webkit-line-clamp: 2;641 -webkit-box-orient: vertical;642 overflow: hidden;643 margin-bottom: var(--space-md);644 }645 646 .card-meta {647 display: flex;648 align-items: center;649 justify-content: space-between;650 flex-wrap: wrap;651 gap: var(--space-sm);652 font-size: 0.8125rem;653 color: var(--color-text-muted);654 }655 656 .card-source {657 display: flex;658 align-items: center;659 gap: var(--space-xs);660 }661 662 .source-icon {663 width: 16px;664 height: 16px;665 border-radius: var(--radius-sm);666 background: var(--color-bg-tertiary);667 }668 669 /* List View Card */670 .article-grid.list-view .article-card {671 display: grid;672 grid-template-columns: 280px 1fr;673 }674 675 .article-grid.list-view .card-media {676 aspect-ratio: 16 / 10;677 }678 679 .article-grid.list-view .card-content {680 display: flex;681 flex-direction: column;682 justify-content: center;683 }684 685 .article-grid.list-view .card-excerpt {686 -webkit-line-clamp: 3;687 }688 689 @media (max-width: 640px) {690 .article-grid.list-view .article-card {691 grid-template-columns: 1fr;692 }693 }694 695 /* ============================================696 MODAL697 ============================================ */698 .modal-backdrop {699 position: fixed;700 inset: 0;701 background: rgba(0, 0, 0, 0.8);702 backdrop-filter: blur(8px);703 -webkit-backdrop-filter: blur(8px);704 z-index: var(--z-modal-backdrop);705 opacity: 0;706 visibility: hidden;707 transition: all var(--transition-normal);708 }709 710 .modal-backdrop.active {711 opacity: 1;712 visibility: visible;713 }714 715 .modal {716 position: fixed;717 inset: 0;718 overflow-y: auto;719 z-index: var(--z-modal);720 padding: var(--space-lg);721 display: flex;722 align-items: flex-start;723 justify-content: center;724 opacity: 0;725 visibility: hidden;726 transition: all var(--transition-normal);727 }728 729 .modal.active {730 opacity: 1;731 visibility: visible;732 }733 734 .modal-content {735 width: 100%;736 max-width: 1100px;737 background: var(--color-bg-card);738 border-radius: var(--radius-xl);739 overflow: hidden;740 transform: translateY(20px);741 transition: transform var(--transition-normal);742 margin: auto;743 }744 745 .modal.active .modal-content {746 transform: translateY(0);747 }748 749 .modal-close {750 position: fixed;751 top: var(--space-lg);752 right: var(--space-lg);753 width: 44px;754 height: 44px;755 display: flex;756 align-items: center;757 justify-content: center;758 background: rgba(0, 0, 0, 0.5);759 border: none;760 border-radius: var(--radius-full);761 color: white;762 cursor: pointer;763 z-index: calc(var(--z-modal) + 1);764 transition: all var(--transition-fast);765 }766 767 .modal-close:hover {768 background: rgba(0, 0, 0, 0.7);769 transform: scale(1.1);770 }771 772 /* Modal Media */773 .modal-media {774 position: relative;775 aspect-ratio: 16 / 9;776 background: var(--color-bg-primary);777 }778 779 .modal-video {780 width: 100%;781 height: 100%;782 background: #000;783 }784 785 .modal-video iframe {786 width: 100%;787 height: 100%;788 border: none;789 }790 791 .modal-image {792 width: 100%;793 height: 100%;794 object-fit: contain;795 background: var(--color-bg-primary);796 }797 798 /* Modal Body */799 .modal-body {800 padding: var(--space-xl);801 }802 803 .modal-category {804 display: inline-block;805 font-size: 0.75rem;806 font-weight: 600;807 color: var(--color-accent-highlight);808 text-transform: uppercase;809 letter-spacing: 0.05em;810 margin-bottom: var(--space-sm);811 }812 813 .modal-title {814 font-family: var(--font-display);815 font-size: clamp(1.5rem, 4vw, 2rem);816 font-weight: 700;817 line-height: 1.2;818 margin-bottom: var(--space-md);819 }820 821 .modal-meta {822 display: flex;823 flex-wrap: wrap;824 gap: var(--space-md);825 margin-bottom: var(--space-lg);826 padding-bottom: var(--space-lg);827 border-bottom: 1px solid rgba(92, 200, 212, 0.1);828 }829 830 .modal-meta-item {831 display: flex;832 align-items: center;833 gap: var(--space-xs);834 font-size: 0.875rem;835 color: var(--color-text-secondary);836 }837 838 .modal-meta-item svg {839 color: var(--color-text-muted);840 }841 842 .modal-description {843 font-size: 1rem;844 line-height: 1.8;845 color: var(--color-text-secondary);846 margin-bottom: var(--space-xl);847 }848 849 .modal-description p {850 margin-bottom: var(--space-md);851 }852 853 /* Source Attribution */854 .source-attribution {855 padding: var(--space-md);856 background: var(--color-bg-secondary);857 border-radius: var(--radius-md);858 margin-bottom: var(--space-lg);859 }860 861 .source-label {862 font-size: 0.75rem;863 color: var(--color-text-muted);864 text-transform: uppercase;865 letter-spacing: 0.05em;866 margin-bottom: var(--space-xs);867 }868 869 .source-link {870 display: flex;871 align-items: center;872 gap: var(--space-sm);873 color: var(--color-accent-highlight);874 text-decoration: none;875 font-weight: 500;876 transition: color var(--transition-fast);877 }878 879 .source-link:hover {880 color: var(--color-accent-secondary);881 }882 883 /* Share Section */884 .share-section {885 display: flex;886 flex-wrap: wrap;887 align-items: center;888 gap: var(--space-md);889 }890 891 .share-label {892 font-size: 0.875rem;893 color: var(--color-text-muted);894 }895 896 .share-buttons {897 display: flex;898 gap: var(--space-sm);899 }900 901 .share-btn {902 width: 40px;903 height: 40px;904 display: flex;905 align-items: center;906 justify-content: center;907 background: var(--color-bg-secondary);908 border: 1px solid rgba(92, 200, 212, 0.2);909 border-radius: var(--radius-md);910 color: var(--color-text-secondary);911 cursor: pointer;912 transition: all var(--transition-fast);913 }914 915 .share-btn:hover {916 background: var(--color-accent-primary);917 border-color: var(--color-accent-primary);918 color: var(--color-text-primary);919 }920 921 .share-btn.twitter:hover { background: #1DA1F2; border-color: #1DA1F2; }922 .share-btn.facebook:hover { background: #4267B2; border-color: #4267B2; }923 .share-btn.linkedin:hover { background: #0077B5; border-color: #0077B5; }924 .share-btn.pinterest:hover { background: #E60023; border-color: #E60023; }925 .share-btn.email:hover { background: var(--color-accent-gold); border-color: var(--color-accent-gold); }926 927 .copy-link-btn {928 display: flex;929 align-items: center;930 gap: var(--space-sm);931 padding: var(--space-sm) var(--space-md);932 background: var(--color-bg-secondary);933 border: 1px solid rgba(92, 200, 212, 0.2);934 border-radius: var(--radius-md);935 color: var(--color-text-secondary);936 font-size: 0.875rem;937 cursor: pointer;938 transition: all var(--transition-fast);939 }940 941 .copy-link-btn:hover {942 background: var(--color-bg-tertiary);943 color: var(--color-text-primary);944 }945 946 /* ============================================947 TOAST NOTIFICATIONS948 ============================================ */949 .toast-container {950 position: fixed;951 bottom: var(--space-lg);952 right: var(--space-lg);953 display: flex;954 flex-direction: column;955 gap: var(--space-sm);956 z-index: var(--z-toast);957 }958 959 .toast {960 padding: var(--space-md) var(--space-lg);961 background: var(--color-bg-card);962 border-radius: var(--radius-md);963 box-shadow: var(--shadow-lg);964 display: flex;965 align-items: center;966 gap: var(--space-sm);967 animation: slideIn 0.3s ease;968 }969 970 .toast.success { border-left: 3px solid var(--color-success); }971 .toast.error { border-left: 3px solid var(--color-error); }972 973 @keyframes slideIn {974 from { transform: translateX(100%); opacity: 0; }975 to { transform: translateX(0); opacity: 1; }976 }977 978 /* ============================================979 EMPTY STATE980 ============================================ */981 .empty-state {982 text-align: center;983 padding: var(--space-3xl) var(--space-xl);984 color: var(--color-text-muted);985 }986 987 .empty-icon {988 width: 80px;989 height: 80px;990 margin: 0 auto var(--space-lg);991 opacity: 0.5;992 }993 994 .empty-title {995 font-family: var(--font-display);996 font-size: 1.5rem;997 color: var(--color-text-secondary);998 margin-bottom: var(--space-sm);999 }1000 1001 .empty-text {1002 max-width: 400px;1003 margin: 0 auto;1004 }1005 1006 /* ============================================1007 FOOTER1008 ============================================ */1009 .footer {1010 background: var(--color-bg-secondary);1011 border-top: 1px solid rgba(92, 200, 212, 0.1);1012 padding: var(--space-xl) var(--space-lg);1013 margin-top: auto;1014 }1015 1016 .footer-inner {1017 max-width: 1600px;1018 margin: 0 auto;1019 display: grid;1020 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));1021 gap: var(--space-xl);1022 }1023 1024 .footer-section h3 {1025 font-size: 0.875rem;1026 font-weight: 600;1027 color: var(--color-text-primary);1028 margin-bottom: var(--space-md);1029 text-transform: uppercase;1030 letter-spacing: 0.05em;1031 }1032 1033 .footer-links {1034 list-style: none;1035 }1036 1037 .footer-links li {1038 margin-bottom: var(--space-sm);1039 }1040 1041 .footer-links a {1042 color: var(--color-text-muted);1043 text-decoration: none;1044 font-size: 0.875rem;1045 transition: color var(--transition-fast);1046 }1047 1048 .footer-links a:hover {1049 color: var(--color-accent-highlight);1050 }1051 1052 .footer-bottom {1053 max-width: 1600px;1054 margin: var(--space-xl) auto 0;1055 padding-top: var(--space-lg);1056 border-top: 1px solid rgba(92, 200, 212, 0.1);1057 display: flex;1058 flex-wrap: wrap;1059 justify-content: space-between;1060 gap: var(--space-md);1061 font-size: 0.8125rem;1062 color: var(--color-text-muted);1063 }1064 1065 /* Mobile Drawer */1066 .mobile-drawer {1067 position: fixed;1068 inset: 0;1069 z-index: var(--z-modal);1070 visibility: hidden;1071 }1072 1073 .mobile-drawer.active {1074 visibility: visible;1075 }1076 1077 .drawer-backdrop {1078 position: absolute;1079 inset: 0;1080 background: rgba(0, 0, 0, 0.6);1081 opacity: 0;1082 transition: opacity var(--transition-normal);1083 }1084 1085 .mobile-drawer.active .drawer-backdrop {1086 opacity: 1;1087 }1088 1089 .drawer-content {1090 position: absolute;1091 top: 0;1092 left: 0;1093 width: 280px;1094 height: 100%;1095 background: var(--color-bg-card);1096 transform: translateX(-100%);1097 transition: transform var(--transition-normal);1098 overflow-y: auto;1099 }1100 1101 .mobile-drawer.active .drawer-content {1102 transform: translateX(0);1103 }1104 1105 .drawer-header {1106 padding: var(--space-lg);1107 border-bottom: 1px solid rgba(92, 200, 212, 0.1);1108 }1109 1110 .drawer-nav {1111 padding: var(--space-md);1112 }1113 1114 .drawer-nav a {1115 display: block;1116 padding: var(--space-md);1117 color: var(--color-text-secondary);1118 text-decoration: none;1119 border-radius: var(--radius-md);1120 transition: all var(--transition-fast);1121 }1122 1123 .drawer-nav a:hover {1124 background: rgba(92, 200, 212, 0.1);1125 color: var(--color-text-primary);1126 }1127 </style>1128</head>1129<body>1130 <!-- Skip Link for Accessibility -->1131 <a href="#main-content" class="skip-link">Skip to main content</a>1132 1133 <div class="app-container">1134 <!-- Header -->1135 <header class="header" role="banner">1136 <div class="header-inner">1137 <a href="#" class="logo" id="home-link" aria-label="Climate History Archive Home">1138 <svg class="logo-icon" viewBox="0 0 100 100" aria-hidden="true">1139 <circle cx="50" cy="50" r="45" fill="#1a5f7a"/>1140 <path d="M30 70 Q50 30 70 70" stroke="#ffffff" stroke-width="4" fill="none"/>1141 <circle cx="50" cy="35" r="8" fill="#ffffff"/>1142 </svg>1143 <span class="logo-text">Climate <span>History</span></span>1144 </a>1145 1146 <div class="search-container">1147 <svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">1148 <circle cx="11" cy="11" r="8"/>1149 <path d="M21 21l-4.35-4.35"/>1150 </svg>1151 <input type="search" class="search-input" id="search-input" placeholder="Search climate events, eras, topics..." aria-label="Search articles">1152 </div>1153 1154 <nav class="nav-main" role="navigation" aria-label="Main navigation">1155 <a href="#" class="nav-link active" data-filter="all">All Events</a>1156 <a href="#" class="nav-link" data-filter="video">Videos</a>1157 <a href="#" class="nav-link" data-filter="article">Articles</a>1158 <a href="#" class="nav-link" data-filter="timeline">Timeline</a>1159 </nav>1160 1161 <div class="header-controls">1162 <button class="btn btn-icon" id="theme-toggle" aria-label="Toggle theme">1163 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">1164 <circle cx="12" cy="12" r="5"/>1165 <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>1166 </svg>1167 </button>1168 <button class="btn btn-icon mobile-menu-btn" id="mobile-menu-btn" aria-label="Open menu">1169 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">1170 <path d="M3 12h18M3 6h18M3 18h18"/>1171 </svg>1172 </button>1173 </div>1174 </div>1175 </header>1176 1177 <!-- Main Content -->1178 <main class="main-content" id="main-content" role="main">1179 <div class="page-header">1180 <h1 class="page-title">U.S. <span>Climate History</span> Archive</h1>1181 <p class="page-description">1182 Explore centuries of American climate history through an interactive archive of events, scientific discoveries, 1183 and pivotal moments that shaped our understanding of climate science. From colonial weather observations to 1184 modern satellite data, discover the stories behind America's climate journey.1185 </p>1186 </div>1187 1188 <!-- Filter Bar -->1189 <div class="filter-bar" role="search" aria-label="Filter articles">1190 <div class="filter-group">1191 <label class="filter-label" for="era-select">Era:</label>1192 <select class="filter-select" id="era-select">1193 <option value="all">All Eras</option>1194 <option value="colonial">Colonial Era</option>1195 <option value="19th">19th Century</option>1196 <option value="20th">20th Century</option>1197 <option value="21st">21st Century</option>1198 </select>1199 </div>1200 <div class="filter-group">