Spaces:
Running
Running
| <html lang="en" data-theme="system"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>UFO.ZIP — by @archive / Cosmos</title> | |
| <meta name="description" content="[CLEARED FOR RELEASE] · 252 elements"> | |
| <!-- OpenGraph --> | |
| <meta property="og:title" content="UFO.ZIP — by @archive / Cosmos"> | |
| <meta property="og:description" content="[CLEARED FOR RELEASE] · 252 elements"> | |
| <meta property="og:image" content="https://cdn.cosmos.so/98c7ffea-0f17-46ae-b60f-9ddb3c501866?format=webp&w=400"> | |
| <meta property="og:type" content="website"> | |
| <meta property="og:url" content="https://www.cosmos.so/archive/ufo-zip/canvas"> | |
| <!-- Twitter Card --> | |
| <meta name="twitter:card" content="summary_large_image"> | |
| <meta name="twitter:title" content="UFO.ZIP — by @archive / Cosmos"> | |
| <meta name="twitter:description" content="[CLEARED FOR RELEASE] · 252 elements"> | |
| <meta name="twitter:image" content="https://cdn.cosmos.so/98c7ffea-0f17-46ae-b60f-9ddb3c501866?format=webp&w=400"> | |
| <!-- Schema.org --> | |
| <script type="application/ld+json"> | |
| { | |
| "@context": "https://schema.org", | |
| "@type": "CollectionPage", | |
| "name": "UFO.ZIP", | |
| "description": "[CLEARED FOR RELEASE] · 252 elements", | |
| "url": "https://www.cosmos.so/archive/ufo-zip/canvas", | |
| "author": { | |
| "@type": "Person", | |
| "name": "@archive", | |
| "identifier": "archive" | |
| }, | |
| "isPartOf": { | |
| "@type": "WebSite", | |
| "name": "Cosmos", | |
| "url": "https://www.cosmos.so" | |
| } | |
| } | |
| </script> | |
| <!-- Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> | |
| <!-- Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> | |
| <style> | |
| /* ═══════════════════════════════════════════════════════════ | |
| COSMOS DESIGN SYSTEM — UFO.ZIP THEME | |
| A rebellious, declassified-aesthetic visual platform | |
| ═══════════════════════════════════════════════════════════ */ | |
| /* ── Custom Properties (Design Tokens) ── */ | |
| :root { | |
| /* Layout */ | |
| --layout-header-height: 64px; | |
| --nav-padding-horizontal: 24px; | |
| --content-max-width: 1400px; | |
| --grid-gap: 16px; | |
| /* Easing Curves */ | |
| --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); | |
| --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); | |
| --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55); | |
| /* Timing */ | |
| --duration-fast: 150ms; | |
| --duration-normal: 300ms; | |
| --duration-slow: 500ms; | |
| --duration-dramatic: 800ms; | |
| /* Spacing Scale */ | |
| --space-1: 4px; | |
| --space-2: 8px; | |
| --space-3: 12px; | |
| --space-4: 16px; | |
| --space-5: 20px; | |
| --space-6: 24px; | |
| --space-8: 32px; | |
| --space-10: 40px; | |
| --space-12: 48px; | |
| --space-16: 64px; | |
| /* Border Radius */ | |
| --radius-sm: 6px; | |
| --radius-md: 12px; | |
| --radius-lg: 16px; | |
| --radius-xl: 24px; | |
| --radius-full: 9999px; | |
| /* Shadows */ | |
| --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); | |
| --shadow-md: 0 4px 12px rgba(0,0,0,0.08); | |
| --shadow-lg: 0 8px 24px rgba(0,0,0,0.12); | |
| --shadow-glow: 0 0 40px rgba(0, 255, 136, 0.15); | |
| /* Z-Index Scale */ | |
| --z-base: 0; | |
| --z-dropdown: 100; | |
| --z-sticky: 200; | |
| --z-modal: 300; | |
| --z-toast: 400; | |
| --z-tooltip: 500; | |
| } | |
| /* ── Light Theme (Default) ── */ | |
| :root[data-theme="light"], :root[data-theme="system"] { | |
| --bg-primary: #fafafa; | |
| --bg-secondary: #f5f5f5; | |
| --bg-tertiary: #eeeeee; | |
| --bg-elevated: #ffffff; | |
| --bg-overlay: rgba(0, 0, 0, 0.6); | |
| --text-primary: #1a1a1a; | |
| --text-secondary: #666666; | |
| --text-tertiary: #999999; | |
| --text-inverse: #ffffff; | |
| --border-primary: #e5e5e5; | |
| --border-secondary: #d4d4d4; | |
| --border-tertiary: #cccccc; | |
| --accent-primary: #00ff88; | |
| --accent-secondary: #00cc6a; | |
| --accent-tertiary: #009952; | |
| --accent-glow: rgba(0, 255, 136, 0.3); | |
| --hover-primary: rgba(0, 0, 0, 0.04); | |
| --hover-secondary: rgba(0, 0, 0, 0.08); | |
| --hover-tertiary: rgba(0, 0, 0, 0.12); | |
| --error: #ff4444; | |
| --warning: #ffaa00; | |
| --success: #00ff88; | |
| --masonry-bg-1: #f0f0f0; | |
| --masonry-bg-2: #e8e8e8; | |
| --masonry-bg-3: #f5f5f5; | |
| } | |
| /* ── Dark Theme ── */ | |
| :root[data-theme="dark"] { | |
| --bg-primary: #0a0a0a; | |
| --bg-secondary: #141414; | |
| --bg-tertiary: #1a1a1a; | |
| --bg-elevated: #1f1f1f; | |
| --bg-overlay: rgba(0, 0, 0, 0.8); | |
| --text-primary: #f5f5f5; | |
| --text-secondary: #a0a0a0; | |
| --text-tertiary: #666666; | |
| --text-inverse: #0a0a0a; | |
| --border-primary: #2a2a2a; | |
| --border-secondary: #333333; | |
| --border-tertiary: #404040; | |
| --accent-primary: #00ff88; | |
| --accent-secondary: #00dd77; | |
| --accent-tertiary: #00bb66; | |
| --accent-glow: rgba(0, 255, 136, 0.2); | |
| --hover-primary: rgba(255, 255, 255, 0.04); | |
| --hover-secondary: rgba(255, 255, 255, 0.08); | |
| --hover-tertiary: rgba(255, 255, 255, 0.12); | |
| --masonry-bg-1: #1a1a1a; | |
| --masonry-bg-2: #222222; | |
| --masonry-bg-3: #181818; | |
| } | |
| /* System preference detection */ | |
| @media (prefers-color-scheme: dark) { | |
| :root[data-theme="system"] { | |
| --bg-primary: #0a0a0a; | |
| --bg-secondary: #141414; | |
| --bg-tertiary: #1a1a1a; | |
| --bg-elevated: #1f1f1f; | |
| --bg-overlay: rgba(0, 0, 0, 0.8); | |
| --text-primary: #f5f5f5; | |
| --text-secondary: #a0a0a0; | |
| --text-tertiary: #666666; | |
| --text-inverse: #0a0a0a; | |
| --border-primary: #2a2a2a; | |
| --border-secondary: #333333; | |
| --border-tertiary: #404040; | |
| --accent-primary: #00ff88; | |
| --accent-secondary: #00dd77; | |
| --accent-tertiary: #00bb66; | |
| --accent-glow: rgba(0, 255, 136, 0.2); | |
| --hover-primary: rgba(255, 255, 255, 0.04); | |
| --hover-secondary: rgba(255, 255, 255, 0.08); | |
| --hover-tertiary: rgba(255, 255, 255, 0.12); | |
| --masonry-bg-1: #1a1a1a; | |
| --masonry-bg-2: #222222; | |
| --masonry-bg-3: #181818; | |
| } | |
| } | |
| /* ── Reset & Base ── */ | |
| *, *::before, *::after { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| font-size: 16px; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| text-rendering: optimizeLegibility; | |
| } | |
| body { | |
| font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| line-height: 1.5; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| /* Scrollbar Styling */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--border-secondary); | |
| border-radius: var(--radius-full); | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--border-tertiary); | |
| } | |
| /* Selection */ | |
| ::selection { | |
| background: var(--accent-primary); | |
| color: var(--text-inverse); | |
| } | |
| /* ── Animations ── */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(12px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes fadeInScale { | |
| from { opacity: 0; transform: scale(0.96); } | |
| to { opacity: 1; transform: scale(1); } | |
| } | |
| @keyframes slideDown { | |
| from { opacity: 0; transform: translateY(-8px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes pulseGlow { | |
| 0%, 100% { box-shadow: 0 0 20px var(--accent-glow); } | |
| 50% { box-shadow: 0 0 40px var(--accent-glow), 0 0 60px var(--accent-glow); } | |
| } | |
| @keyframes scanline { | |
| 0% { transform: translateY(-100%); } | |
| 100% { transform: translateY(100vh); } | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-6px); } | |
| } | |
| @keyframes typewriter { | |
| from { width: 0; } | |
| to { width: 100%; } | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| @keyframes grain { | |
| 0%, 100% { transform: translate(0, 0); } | |
| 10% { transform: translate(-5%, -10%); } | |
| 20% { transform: translate(-15%, 5%); } | |
| 30% { transform: translate(7%, -25%); } | |
| 40% { transform: translate(-5%, 25%); } | |
| 50% { transform: translate(-15%, 10%); } | |
| 60% { transform: translate(15%, 0%); } | |
| 70% { transform: translate(0%, 15%); } | |
| 80% { transform: translate(3%, 35%); } | |
| 90% { transform: translate(-10%, 10%); } | |
| } | |
| @keyframes holographic { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn var(--duration-normal) var(--ease-out-quint) forwards; | |
| } | |
| .animate-fade-in-scale { | |
| animation: fadeInScale var(--duration-slow) var(--ease-out-expo) forwards; | |
| } | |
| .animate-slide-down { | |
| animation: slideDown var(--duration-fast) var(--ease-out-quint) forwards; | |
| } | |
| .animate-float { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| /* Reduced motion respect */ | |
| @media (prefers-reduced-motion: reduce) { | |
| *, *::before, *::after { | |
| animation-duration: 0.01ms ; | |
| animation-iteration-count: 1 ; | |
| transition-duration: 0.01ms ; | |
| } | |
| } | |
| /* ── Header ── */ | |
| .header { | |
| position: sticky; | |
| top: 0; | |
| z-index: var(--z-sticky); | |
| height: var(--layout-header-height); | |
| background: var(--bg-primary); | |
| border-bottom: 1px solid var(--border-primary); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| } | |
| .header::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(90deg, | |
| transparent 0%, | |
| var(--accent-glow) 50%, | |
| transparent 100% | |
| ); | |
| opacity: 0; | |
| transition: opacity var(--duration-slow); | |
| pointer-events: none; | |
| } | |
| .header--scrolled::before { | |
| opacity: 0.03; | |
| } | |
| .header__inner { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| height: 100%; | |
| max-width: var(--content-max-width); | |
| margin: 0 auto; | |
| padding: 0 var(--nav-padding-horizontal); | |
| } | |
| /* ── Logo ── */ | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| text-decoration: none; | |
| color: var(--text-primary); | |
| font-weight: 600; | |
| font-size: 1.125rem; | |
| letter-spacing: -0.02em; | |
| transition: color var(--duration-fast); | |
| } | |
| .logo:hover { | |
| color: var(--accent-primary); | |
| } | |
| .logo__icon { | |
| width: 32px; | |
| height: 32px; | |
| position: relative; | |
| } | |
| .logo__icon svg { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .logo__icon::after { | |
| content: ''; | |
| position: absolute; | |
| inset: -4px; | |
| border-radius: var(--radius-md); | |
| background: var(--accent-glow); | |
| opacity: 0; | |
| transition: opacity var(--duration-fast); | |
| z-index: -1; | |
| } | |
| .logo:hover .logo__icon::after { | |
| opacity: 1; | |
| } | |
| /* ── Search ── */ | |
| .search { | |
| position: relative; | |
| flex: 1; | |
| max-width: 480px; | |
| margin: 0 var(--space-6); | |
| } | |
| .search__trigger { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| width: 100%; | |
| padding: var(--space-2) var(--space-4); | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-primary); | |
| border-radius: var(--radius-full); | |
| color: var(--text-tertiary); | |
| font-family: inherit; | |
| font-size: 0.875rem; | |
| cursor: pointer; | |
| transition: all var(--duration-fast); | |
| } | |
| .search__trigger:hover { | |
| background: var(--bg-tertiary); | |
| border-color: var(--border-secondary); | |
| } | |
| .search__trigger:focus-visible { | |
| outline: 2px solid var(--accent-primary); | |
| outline-offset: 2px; | |
| } | |
| .search__shortcut { | |
| margin-left: auto; | |
| padding: var(--space-1) var(--space-2); | |
| background: var(--bg-tertiary); | |
| border-radius: var(--radius-sm); | |
| font-size: 0.75rem; | |
| font-family: 'JetBrains Mono', monospace; | |
| color: var(--text-tertiary); | |
| } | |
| .search__popup { | |
| position: absolute; | |
| top: calc(100% + var(--space-2)); | |
| left: 0; | |
| right: 0; | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border-primary); | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--shadow-lg); | |
| opacity: 0; | |
| transform: translateY(-8px); | |
| pointer-events: none; | |
| transition: all var(--duration-fast) var(--ease-out-quint); | |
| z-index: var(--z-dropdown); | |
| } | |
| .search__popup--active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| pointer-events: all; | |
| } | |
| .search__input-wrapper { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| padding: var(--space-3) var(--space-4); | |
| border-bottom: 1px solid var(--border-primary); | |
| } | |
| .search__input { | |
| flex: 1; | |
| background: none; | |
| border: none; | |
| color: var(--text-primary); | |
| font-family: inherit; | |
| font-size: 0.9375rem; | |
| outline: none; | |
| } | |
| .search__input::placeholder { | |
| color: var(--text-tertiary); | |
| } | |
| .search__modes { | |
| display: flex; | |
| gap: var(--space-1); | |
| padding: var(--space-2); | |
| } | |
| .search__mode { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| padding: var(--space-2) var(--space-3); | |
| border-radius: var(--radius-md); | |
| font-size: 0.8125rem; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: all var(--duration-fast); | |
| border: none; | |
| background: none; | |
| font-family: inherit; | |
| } | |
| .search__mode:hover { | |
| background: var(--hover-primary); | |
| } | |
| .search__mode--active { | |
| background: var(--accent-primary) ; | |
| color: var(--text-inverse) ; | |
| } | |
| /* ── Nav Actions ── */ | |
| .nav-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| } | |
| .nav-btn { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 36px; | |
| height: 36px; | |
| border-radius: var(--radius-full); | |
| border: none; | |
| background: none; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: all var(--duration-fast); | |
| position: relative; | |
| } | |
| .nav-btn:hover { | |
| background: var(--hover-primary); | |
| color: var(--text-primary); | |
| } | |
| .nav-btn--primary { | |
| padding: 0 var(--space-4); | |
| width: auto; | |
| background: var(--text-primary); | |
| color: var(--bg-primary); | |
| font-weight: 500; | |
| font-size: 0.875rem; | |
| } | |
| .nav-btn--primary:hover { | |
| background: var(--accent-primary); | |
| color: var(--text-inverse); | |
| } | |
| .nav-btn--ghost { | |
| padding: 0 var(--space-4); | |
| width: auto; | |
| border: 1px solid var(--border-secondary); | |
| font-weight: 500; | |
| font-size: 0.875rem; | |
| } | |
| /* Theme toggle indicator */ | |
| .theme-indicator { | |
| position: absolute; | |
| bottom: 2px; | |
| right: 2px; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: var(--radius-full); | |
| background: var(--accent-primary); | |
| border: 2px solid var(--bg-primary); | |
| } | |
| /* ── Main Content ── */ | |
| .main { | |
| min-height: calc(100vh - var(--layout-header-height)); | |
| } | |
| /* ── Hero Section ── */ | |
| .hero { | |
| position: relative; | |
| padding: var(--space-16) var(--space-6); | |
| overflow: hidden; | |
| } | |
| /* CRT scanline effect */ | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: repeating-linear-gradient( | |
| 0deg, | |
| transparent, | |
| transparent 2px, | |
| rgba(0, 0, 0, 0.03) 2px, | |
| rgba(0, 0, 0, 0.03) 4px | |
| ); | |
| pointer-events: none; | |
| z-index: 1; | |
| } | |
| /* Animated grain */ | |
| .hero__grain { | |
| position: absolute; | |
| inset: -200%; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); | |
| opacity: 0.025; | |
| animation: grain 8s steps(10) infinite; | |
| pointer-events: none; | |
| } | |
| .hero__inner { | |
| position: relative; | |
| z-index: 2; | |
| max-width: var(--content-max-width); | |
| margin: 0 auto; | |
| } | |
| /* ── Cluster Header ── */ | |
| .cluster-header { | |
| display: grid; | |
| grid-template-columns: 280px 1fr; | |
| gap: var(--space-10); | |
| align-items: start; | |
| } | |
| /* Cover Image */ | |
| .cover { | |
| position: relative; | |
| border-radius: var(--radius-xl); | |
| overflow: hidden; | |
| aspect-ratio: 1; | |
| background: var(--bg-secondary); | |
| } | |
| .cover__image { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform var(--duration-slow) var(--ease-out-expo); | |
| } | |
| .cover:hover .cover__image { | |
| transform: scale(1.03); | |
| } | |
| .cover__overlay { | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient( | |
| 180deg, | |
| transparent 60%, | |
| rgba(0, 0, 0, 0.4) 100% | |
| ); | |
| } | |
| .cover__badge { | |
| position: absolute; | |
| top: var(--space-4); | |
| left: var(--space-4); | |
| padding: var(--space-2) var(--space-3); | |
| background: rgba(0, 0, 0, 0.6); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border-radius: var(--radius-sm); | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| color: var(--accent-primary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| border: 1px solid rgba(0, 255, 136, 0.2); | |
| } | |
| .cover__count { | |
| position: absolute; | |
| bottom: var(--space-4); | |
| left: var(--space-4); | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| color: var(--text-inverse); | |
| } | |
| /* Cluster Info */ | |
| .cluster-info { | |
| padding-top: var(--space-4); | |
| } | |
| .cluster-info__eyebrow { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| margin-bottom: var(--space-4); | |
| } | |
| .cluster-info__owner { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| text-decoration: none; | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| transition: color var(--duration-fast); | |
| } | |
| .cluster-info__owner:hover { | |
| color: var(--accent-primary); | |
| } | |
| .cluster-info__owner-avatar { | |
| width: 24px; | |
| height: 24px; | |
| border-radius: var(--radius-full); | |
| background: var(--bg-tertiary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.625rem; | |
| font-weight: 600; | |
| color: var(--text-tertiary); | |
| } | |
| .cluster-info__divider { | |
| width: 4px; | |
| height: 4px; | |
| border-radius: var(--radius-full); | |
| background: var(--border-tertiary); | |
| } | |
| .cluster-info__privacy { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| font-size: 0.875rem; | |
| color: var(--text-tertiary); | |
| } | |
| .cluster-info__title { | |
| font-size: clamp(2.5rem, 5vw, 4rem); | |
| font-weight: 700; | |
| letter-spacing: -0.03em; | |
| line-height: 1.1; | |
| margin-bottom: var(--space-4); | |
| position: relative; | |
| } | |
| /* Holographic text effect */ | |
| .cluster-info__title::after { | |
| content: 'UFO.ZIP'; | |
| position: absolute; | |
| left: 2px; | |
| top: 2px; | |
| color: transparent; | |
| background: linear-gradient( | |
| 90deg, | |
| var(--accent-primary), | |
| #00ffff, | |
| var(--accent-primary) | |
| ); | |
| background-size: 200% 100%; | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| opacity: 0.3; | |
| animation: holographic 3s linear infinite; | |
| z-index: -1; | |
| filter: blur(8px); | |
| } | |
| .cluster-info__description { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.9375rem; | |
| color: var(--accent-primary); | |
| margin-bottom: var(--space-6); | |
| position: relative; | |
| display: inline-block; | |
| } | |
| /* Typewriter cursor */ | |
| .cluster-info__description::after { | |
| content: '█'; | |
| animation: blink 1s step-end infinite; | |
| margin-left: 2px; | |
| color: var(--accent-primary); | |
| } | |
| .cluster-info__meta { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-6); | |
| margin-bottom: var(--space-8); | |
| } | |
| .cluster-info__meta-item { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| } | |
| .cluster-info__meta-item i { | |
| color: var(--text-tertiary); | |
| } | |
| /* Action Buttons */ | |
| .cluster-actions { | |
| display: flex; | |
| gap: var(--space-3); | |
| } | |
| .cluster-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| padding: var(--space-3) var(--space-5); | |
| border-radius: var(--radius-full); | |
| font-family: inherit; | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all var(--duration-fast); | |
| border: none; | |
| } | |
| .cluster-btn--primary { | |
| background: var(--text-primary); | |
| color: var(--bg-primary); | |
| } | |
| .cluster-btn--primary:hover { | |
| background: var(--accent-primary); | |
| color: var(--text-inverse); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .cluster-btn--secondary { | |
| background: var(--bg-secondary); | |
| color: var(--text-primary); | |
| border: 1px solid var(--border-primary); | |
| } | |
| .cluster-btn--secondary:hover { | |
| background: var(--bg-tertiary); | |
| border-color: var(--border-secondary); | |
| } | |
| /* ── Filters ── */ | |
| .filters { | |
| position: sticky; | |
| top: var(--layout-header-height); | |
| z-index: calc(var(--z-sticky) - 1); | |
| background: var(--bg-primary); | |
| border-bottom: 1px solid var(--border-primary); | |
| padding: var(--space-4) var(--space-6); | |
| } | |
| .filters__inner { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-4); | |
| max-width: var(--content-max-width); | |
| margin: 0 auto; | |
| } | |
| .filter-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| padding: var(--space-2) var(--space-4); | |
| border-radius: var(--radius-full); | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-primary); | |
| color: var(--text-secondary); | |
| font-family: inherit; | |
| font-size: 0.8125rem; | |
| cursor: pointer; | |
| transition: all var(--duration-fast); | |
| white-space: nowrap; | |
| } | |
| .filter-btn:hover { | |
| background: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| } | |
| .filter-btn--active { | |
| background: var(--accent-primary); | |
| color: var(--text-inverse); | |
| border-color: var(--accent-primary); | |
| } | |
| .filter-divider { | |
| width: 1px; | |
| height: 24px; | |
| background: var(--border-primary); | |
| margin: 0 var(--space-2); | |
| } | |
| .filter-sort { | |
| margin-left: auto; | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| } | |
| /* ── Masonry Grid ── */ | |
| .gallery { | |
| padding: var(--space-6); | |
| max-width: var(--content-max-width); | |
| margin: 0 auto; | |
| } | |
| .masonry { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| grid-auto-rows: 10px; | |
| gap: 0 var(--grid-gap); | |
| } | |
| .masonry-item { | |
| grid-row: span var(--row-span, 30); | |
| padding-bottom: var(--grid-gap); | |
| opacity: 0; | |
| animation: fadeInScale var(--duration-normal) var(--ease-out-quint) forwards; | |
| } | |
| .masonry-item:nth-child(1) { animation-delay: 0ms; } | |
| .masonry-item:nth-child(2) { animation-delay: 50ms; } | |
| .masonry-item:nth-child(3) { animation-delay: 100ms; } | |
| .masonry-item:nth-child(4) { animation-delay: 150ms; } | |
| .masonry-item:nth-child(5) { animation-delay: 200ms; } | |
| .masonry-item:nth-child(6) { animation-delay: 250ms; } | |
| .card { | |
| position: relative; | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| background: var(--bg-secondary); | |
| cursor: pointer; | |
| transition: all var(--duration-normal) var(--ease-out-quint); | |
| } | |
| .card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .card__image { | |
| width: 100%; | |
| aspect-ratio: var(--aspect, 4/5); | |
| object-fit: cover; | |
| transition: transform var(--duration-slow) var(--ease-out-expo); | |
| } | |
| .card:hover .card__image { | |
| transform: scale(1.05); | |
| } | |
| .card__overlay { | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient( | |
| 180deg, | |
| transparent 40%, | |
| rgba(0, 0, 0, 0.6) 100% | |
| ); | |
| opacity: 0; | |
| transition: opacity var(--duration-fast); | |
| } | |
| .card:hover .card__overlay { | |
| opacity: 1; | |
| } | |
| .card__actions { | |
| position: absolute; | |
| top: var(--space-3); | |
| right: var(--space-3); | |
| display: flex; | |
| gap: var(--space-2); | |
| opacity: 0; | |
| transform: translateY(-8px); | |
| transition: all var(--duration-fast) var(--ease-out-quint); | |
| } | |
| .card:hover .card__actions { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .card__action-btn { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: var(--radius-full); | |
| background: rgba(0, 0, 0, 0.6); | |
| backdrop-filter: blur(8px); | |
| -webkit-backdrop-filter: blur(8px); | |
| border: none; | |
| color: var(--text-inverse); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: all var(--duration-fast); | |
| } | |
| .card__action-btn:hover { | |
| background: var(--accent-primary); | |
| color: var(--text-inverse); | |
| } | |
| .card__info { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| padding: var(--space-4); | |
| transform: translateY(100%); | |
| transition: transform var(--duration-normal) var(--ease-out-quint); | |
| } | |
| .card:hover .card__info { | |
| transform: translateY(0); | |
| } | |
| .card__title { | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| color: var(--text-inverse); | |
| margin-bottom: var(--space-1); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .card__source { | |
| font-size: 0.75rem; | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| /* Loading skeleton */ | |
| .skeleton { | |
| background: linear-gradient( | |
| 90deg, | |
| var(--bg-secondary) 25%, | |
| var(--bg-tertiary) 50%, | |
| var(--bg-secondary) 75% | |
| ); | |
| background-size: 200% 100%; | |
| animation: skeleton-loading 1.5s infinite; | |
| } | |
| @keyframes skeleton-loading { | |
| 0% { background-position: 200% 0; } | |
| 100% { background-position: -200% 0; } | |
| } | |
| /* ── Footer ── */ | |
| .footer { | |
| padding: var(--space-16) var(--space-6) var(--space-8); | |
| border-top: 1px solid var(--border-primary); | |
| } | |
| .footer__inner { | |
| max-width: var(--content-max-width); | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr 1fr; | |
| gap: var(--space-10); | |
| } | |
| .footer__brand { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-4); | |
| } | |
| .footer__logo { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .footer__tagline { | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| max-width: 280px; | |
| line-height: 1.6; | |
| } | |
| .footer__links { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-3); | |
| } | |
| .footer__links-title { | |
| font-size: 0.8125rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--text-tertiary); | |
| margin-bottom: var(--space-2); | |
| } | |
| .footer__link { | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| font-size: 0.875rem; | |
| transition: color var(--duration-fast); | |
| } | |
| .footer__link:hover { | |
| color: var(--accent-primary); | |
| } | |
| .footer__bottom { | |
| grid-column: 1 / -1; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding-top: var(--space-8); | |
| border-top: 1px solid var(--border-primary); | |
| font-size: 0.8125rem; | |
| color: var(--text-tertiary); | |
| } | |
| .footer__built-with a { | |
| color: var(--accent-primary); | |
| text-decoration: none; | |
| transition: opacity var(--duration-fast); | |
| } | |
| .footer__built-with a:hover { | |
| opacity: 0.8; | |
| } | |
| /* ── Toast Notification ── */ | |
| .toast { | |
| position: fixed; | |
| bottom: var(--space-6); | |
| left: 50%; | |
| transform: translateX(-50%) translateY(100px); | |
| padding: var(--space-3) var(--space-6); | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border-primary); | |
| border-radius: var(--radius-full); | |
| box-shadow: var(--shadow-lg); | |
| font-size: 0.875rem; | |
| color: var(--text-primary); | |
| opacity: 0; | |
| transition: all var(--duration-normal) var(--ease-out-quint); | |
| z-index: var(--z-toast); | |
| pointer-events: none; | |
| } | |
| .toast--visible { | |
| opacity: 1; | |
| transform: translateX(-50%) translateY(0); | |
| } | |
| /* ── Responsive ── */ | |
| @media (max-width: 768px) { | |
| :root { | |
| --nav-padding-horizontal: 16px; | |
| --layout-header-height: 56px; | |
| } | |
| .header__inner { | |
| gap: var(--space-3); | |
| } | |
| .search { | |
| margin: 0; | |
| max-width: none; | |
| } | |
| .search__trigger { | |
| padding: var(--space-2) var(--space-3); | |
| } | |
| .search__shortcut { | |
| display: none; | |
| } | |
| .nav-btn--ghost { | |
| display: none; | |
| } | |
| .cluster-header { | |
| grid-template-columns: 1fr; | |
| gap: var(--space-6); | |
| } | |
| .cover { | |
| max-width: 200px; | |
| margin: 0 auto; | |
| } | |
| .cluster-info { | |
| text-align: center; | |
| } | |
| .cluster-info__eyebrow { | |
| justify-content: center; | |
| } | |
| .cluster-info__meta { | |
| justify-content: center; | |
| } | |
| .cluster-actions { | |
| justify-content: center; | |
| } | |
| .filters__inner { | |
| overflow-x: auto; | |
| -webkit-overflow-scrolling: touch; | |
| scrollbar-width: none; | |
| } | |
| .filters__inner::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .masonry { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .footer__inner { | |
| grid-template-columns: 1fr; | |
| gap: var(--space-8); | |
| } | |
| .footer__bottom { | |
| flex-direction: column; | |
| gap: var(--space-4); | |
| text-align: center; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .masonry { | |
| grid-template-columns: 1fr; | |
| } | |
| .cluster-btn span { | |
| display: none; | |
| } | |
| } | |
| /* ── Utility Classes ── */ | |
| .sr-only { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| padding: 0; | |
| margin: -1px; | |
| overflow: hidden; | |
| clip: rect(0, 0, 0, 0); | |
| white-space: nowrap; | |
| border: 0; | |
| } | |
| .text-gradient { | |
| background: linear-gradient(135deg, var(--accent-primary), #00ffff); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| /* ── Color Search Picker ── */ | |
| .color-picker { | |
| display: grid; | |
| grid-template-columns: repeat(8, 1fr); | |
| gap: var(--space-2); | |
| padding: var(--space-4); | |
| } | |
| .color-swatch { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: var(--radius-full); | |
| cursor: pointer; | |
| transition: transform var(--duration-fast); | |
| border: 2px solid transparent; | |
| } | |
| .color-swatch:hover { | |
| transform: scale(1.15); | |
| } | |
| .color-swatch--selected { | |
| border-color: var(--text-primary); | |
| transform: scale(1.15); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- ═══════════════════════════════════════════════════════════ | |
| HEADER — Sticky navigation with search & auth | |
| ═══════════════════════════════════════════════════════════ --> | |
| <header class="header" id="header"> | |
| <div class="header__inner"> | |
| <!-- Logo --> | |
| <a href="/" class="logo" aria-label="Cosmos home"> | |
| <div class="logo__icon"> | |
| <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <circle cx="16" cy="16" r="14" stroke="currentColor" stroke-width="2"/> | |
| <circle cx="16" cy="16" r="6" fill="currentColor"/> | |
| <path d="M16 2v6M16 24v6M2 16h6M24 16h6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> | |
| </svg> | |
| </div> | |
| <span>Cosmos</span> | |
| </a> | |
| <!-- Search --> | |
| <div class="search" id="search"> | |
| <button class="search__trigger" id="searchTrigger" aria-expanded="false" aria-controls="searchPopup"> | |
| <i class="fas fa-search" aria-hidden="true"></i> | |
| <span>Search cosmos...</span> | |
| <span class="search__shortcut">⌘K</span> | |
| </button> | |
| <div class="search__popup" id="searchPopup" role="dialog" aria-label="Search"> | |
| <div class="search__input-wrapper"> | |
| <i class="fas fa-search" aria-hidden="true"></i> | |
| <input type="text" class="search__input" placeholder="Search for anything..." autofocus> | |
| <button class="nav-btn" aria-label="Close search"> | |
| <i class="fas fa-times" aria-hidden="true"></i> | |
| </button> | |
| </div> | |
| <div class="search__modes"> | |
| <button class="search__mode search__mode--active" data-mode="text"> | |
| <i class="fas fa-font" aria-hidden="true"></i> | |
| <span>Text |