Created
February 21, 2026 06:13
-
-
Save davekennewell/23529dbe61a041d814d5dfa96e795128 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hydrata - Open Source Hydraulic Modeling Platform</title> | |
| <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=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"> | |
| <style> | |
| *, *::before, *::after { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --blue-900: #1a3254; | |
| --blue-800: #1e3a5f; | |
| --blue-700: #274a78; | |
| --blue-600: #346094; | |
| --blue-500: #4078b4; | |
| --blue-400: #5a92c8; | |
| --blue-300: #7db0dc; | |
| --blue-200: #a8cce8; | |
| --blue-100: #d4e6f4; | |
| --blue-50: #eef5fb; | |
| --gray-900: #111827; | |
| --gray-800: #1f2937; | |
| --gray-700: #374151; | |
| --gray-600: #4b5563; | |
| --gray-500: #6b7280; | |
| --gray-400: #9ca3af; | |
| --gray-300: #d1d5db; | |
| --gray-200: #e5e7eb; | |
| --gray-100: #f3f4f6; | |
| --gray-50: #f9fafb; | |
| --white: #ffffff; | |
| --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| body { | |
| font-family: var(--font); | |
| color: var(--gray-800); | |
| background: var(--white); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| /* ── Navigation ── */ | |
| nav { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 100; | |
| padding: 0 2rem; | |
| height: 72px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| background: rgba(255, 255, 255, 0.85); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.06); | |
| transition: background 0.3s ease; | |
| } | |
| .nav-logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| text-decoration: none; | |
| color: var(--blue-800); | |
| } | |
| .nav-logo svg { | |
| width: 32px; | |
| height: 32px; | |
| } | |
| .nav-logo span { | |
| font-size: 1.25rem; | |
| font-weight: 800; | |
| letter-spacing: -0.03em; | |
| } | |
| .nav-links { | |
| display: flex; | |
| align-items: center; | |
| gap: 2rem; | |
| list-style: none; | |
| } | |
| .nav-links a { | |
| text-decoration: none; | |
| color: var(--gray-600); | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| transition: color 0.2s; | |
| } | |
| .nav-links a:hover { | |
| color: var(--blue-600); | |
| } | |
| .nav-cta { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 0.5rem 1.25rem; | |
| background: var(--blue-600); | |
| color: var(--white) !important; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| font-size: 0.875rem; | |
| transition: background 0.2s, transform 0.15s; | |
| } | |
| .nav-cta:hover { | |
| background: var(--blue-700); | |
| transform: translateY(-1px); | |
| } | |
| /* ── Hero ── */ | |
| .hero { | |
| position: relative; | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 8rem 2rem 6rem; | |
| overflow: hidden; | |
| background: linear-gradient(168deg, var(--white) 0%, var(--blue-50) 40%, var(--blue-100) 100%); | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: -20%; | |
| right: -10%; | |
| width: 800px; | |
| height: 800px; | |
| border-radius: 50%; | |
| background: radial-gradient(circle, rgba(52, 96, 148, 0.06) 0%, transparent 70%); | |
| pointer-events: none; | |
| } | |
| .hero::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -10%; | |
| left: -5%; | |
| width: 600px; | |
| height: 600px; | |
| border-radius: 50%; | |
| background: radial-gradient(circle, rgba(64, 120, 180, 0.05) 0%, transparent 70%); | |
| pointer-events: none; | |
| } | |
| /* Grid pattern overlay */ | |
| .hero-grid { | |
| position: absolute; | |
| inset: 0; | |
| background-image: | |
| linear-gradient(rgba(52, 96, 148, 0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(52, 96, 148, 0.03) 1px, transparent 1px); | |
| background-size: 60px 60px; | |
| pointer-events: none; | |
| } | |
| .hero-content { | |
| position: relative; | |
| z-index: 2; | |
| max-width: 800px; | |
| text-align: center; | |
| } | |
| .hero-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.4rem 1rem; | |
| background: var(--white); | |
| border: 1px solid var(--blue-200); | |
| border-radius: 100px; | |
| font-size: 0.8125rem; | |
| font-weight: 600; | |
| color: var(--blue-600); | |
| margin-bottom: 2rem; | |
| animation: fadeInUp 0.8s ease both; | |
| } | |
| .hero-badge-dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: var(--blue-500); | |
| animation: pulse-dot 2s ease-in-out infinite; | |
| } | |
| @keyframes pulse-dot { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.4; } | |
| } | |
| .hero h1 { | |
| font-size: clamp(2.75rem, 6vw, 4.5rem); | |
| font-weight: 900; | |
| line-height: 1.08; | |
| letter-spacing: -0.04em; | |
| color: var(--gray-900); | |
| margin-bottom: 1.5rem; | |
| animation: fadeInUp 0.8s ease 0.1s both; | |
| } | |
| .hero h1 .gradient-text { | |
| background: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-400) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .hero p { | |
| font-size: clamp(1.05rem, 2vw, 1.3rem); | |
| color: var(--gray-600); | |
| max-width: 580px; | |
| margin: 0 auto 2.5rem; | |
| line-height: 1.65; | |
| font-weight: 400; | |
| animation: fadeInUp 0.8s ease 0.2s both; | |
| } | |
| .hero-cta-group { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 1rem; | |
| animation: fadeInUp 0.8s ease 0.3s both; | |
| } | |
| .btn-primary { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.9rem 2rem; | |
| background: var(--blue-600); | |
| color: var(--white); | |
| font-family: var(--font); | |
| font-size: 1rem; | |
| font-weight: 600; | |
| border: none; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| text-decoration: none; | |
| transition: all 0.2s ease; | |
| box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(52, 96, 148, 0.2); | |
| } | |
| .btn-primary:hover { | |
| background: var(--blue-700); | |
| transform: translateY(-2px); | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 8px 24px rgba(52, 96, 148, 0.25); | |
| } | |
| .btn-primary svg { | |
| width: 18px; | |
| height: 18px; | |
| transition: transform 0.2s; | |
| } | |
| .btn-primary:hover svg { | |
| transform: translateX(3px); | |
| } | |
| .btn-secondary { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.9rem 2rem; | |
| background: var(--white); | |
| color: var(--gray-700); | |
| font-family: var(--font); | |
| font-size: 1rem; | |
| font-weight: 600; | |
| border: 1px solid var(--gray-300); | |
| border-radius: 10px; | |
| cursor: pointer; | |
| text-decoration: none; | |
| transition: all 0.2s ease; | |
| } | |
| .btn-secondary:hover { | |
| background: var(--gray-50); | |
| border-color: var(--gray-400); | |
| transform: translateY(-2px); | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* ── Trusted By ── */ | |
| .trusted { | |
| padding: 3.5rem 2rem; | |
| text-align: center; | |
| background: var(--white); | |
| border-top: 1px solid var(--gray-100); | |
| border-bottom: 1px solid var(--gray-100); | |
| } | |
| .trusted p { | |
| font-size: 0.8125rem; | |
| font-weight: 600; | |
| color: var(--gray-400); | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| margin-bottom: 2rem; | |
| } | |
| .trusted-logos { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 3.5rem; | |
| flex-wrap: wrap; | |
| max-width: 900px; | |
| margin: 0 auto; | |
| } | |
| .trusted-logo { | |
| font-size: 0.95rem; | |
| font-weight: 700; | |
| color: var(--gray-300); | |
| letter-spacing: -0.01em; | |
| white-space: nowrap; | |
| } | |
| /* ── Features ── */ | |
| .features { | |
| padding: 7rem 2rem; | |
| background: var(--white); | |
| } | |
| .section-container { | |
| max-width: 1120px; | |
| margin: 0 auto; | |
| } | |
| .section-header { | |
| text-align: center; | |
| margin-bottom: 4rem; | |
| } | |
| .section-label { | |
| display: inline-block; | |
| font-size: 0.8125rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--blue-600); | |
| margin-bottom: 1rem; | |
| } | |
| .section-title { | |
| font-size: clamp(1.75rem, 3.5vw, 2.5rem); | |
| font-weight: 800; | |
| color: var(--gray-900); | |
| letter-spacing: -0.03em; | |
| line-height: 1.2; | |
| margin-bottom: 1rem; | |
| } | |
| .section-subtitle { | |
| font-size: 1.1rem; | |
| color: var(--gray-500); | |
| max-width: 560px; | |
| margin: 0 auto; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 2rem; | |
| } | |
| .feature-card { | |
| padding: 2.5rem 2rem; | |
| background: var(--gray-50); | |
| border: 1px solid var(--gray-200); | |
| border-radius: 16px; | |
| transition: all 0.3s ease; | |
| } | |
| .feature-card:hover { | |
| background: var(--white); | |
| border-color: var(--blue-200); | |
| box-shadow: 0 4px 24px rgba(52, 96, 148, 0.08); | |
| transform: translateY(-4px); | |
| } | |
| .feature-icon { | |
| width: 48px; | |
| height: 48px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--blue-50); | |
| border: 1px solid var(--blue-100); | |
| border-radius: 12px; | |
| margin-bottom: 1.5rem; | |
| color: var(--blue-600); | |
| } | |
| .feature-icon svg { | |
| width: 24px; | |
| height: 24px; | |
| } | |
| .feature-card h3 { | |
| font-size: 1.15rem; | |
| font-weight: 700; | |
| color: var(--gray-900); | |
| margin-bottom: 0.75rem; | |
| letter-spacing: -0.01em; | |
| } | |
| .feature-card p { | |
| font-size: 0.95rem; | |
| color: var(--gray-500); | |
| line-height: 1.65; | |
| } | |
| /* ── Platform Preview ── */ | |
| .preview { | |
| padding: 7rem 2rem; | |
| background: linear-gradient(180deg, var(--gray-50) 0%, var(--white) 100%); | |
| } | |
| .preview .section-container { | |
| max-width: 1000px; | |
| } | |
| .preview-window { | |
| position: relative; | |
| background: var(--white); | |
| border: 1px solid var(--gray-200); | |
| border-radius: 16px; | |
| overflow: hidden; | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.04), 0 16px 40px rgba(0,0,0,0.06); | |
| } | |
| .preview-titlebar { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 14px 18px; | |
| background: var(--gray-50); | |
| border-bottom: 1px solid var(--gray-200); | |
| } | |
| .preview-dot { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background: var(--gray-300); | |
| } | |
| .preview-dot:nth-child(1) { background: #ff5f57; } | |
| .preview-dot:nth-child(2) { background: #febc2e; } | |
| .preview-dot:nth-child(3) { background: #28c840; } | |
| .preview-url { | |
| flex: 1; | |
| text-align: center; | |
| font-size: 0.75rem; | |
| color: var(--gray-400); | |
| font-weight: 500; | |
| } | |
| .preview-body { | |
| position: relative; | |
| aspect-ratio: 16 / 9; | |
| background: linear-gradient(145deg, var(--blue-50) 0%, var(--blue-100) 100%); | |
| display: flex; | |
| align-items: stretch; | |
| overflow: hidden; | |
| } | |
| /* Simulated map interface */ | |
| .mock-sidebar { | |
| width: 260px; | |
| background: var(--white); | |
| border-right: 1px solid var(--gray-200); | |
| padding: 1.25rem; | |
| flex-shrink: 0; | |
| } | |
| .mock-sidebar-title { | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| color: var(--gray-400); | |
| margin-bottom: 1rem; | |
| } | |
| .mock-layer { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.625rem; | |
| padding: 0.5rem 0.625rem; | |
| border-radius: 6px; | |
| margin-bottom: 0.375rem; | |
| font-size: 0.78rem; | |
| font-weight: 500; | |
| color: var(--gray-700); | |
| cursor: default; | |
| } | |
| .mock-layer:nth-child(2) { | |
| background: var(--blue-50); | |
| color: var(--blue-700); | |
| } | |
| .mock-layer-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 2px; | |
| flex-shrink: 0; | |
| } | |
| .mock-layer:nth-child(2) .mock-layer-dot { background: var(--blue-500); } | |
| .mock-layer:nth-child(3) .mock-layer-dot { background: #10b981; } | |
| .mock-layer:nth-child(4) .mock-layer-dot { background: #f59e0b; } | |
| .mock-layer:nth-child(5) .mock-layer-dot { background: #8b5cf6; } | |
| .mock-legend { | |
| margin-top: 1.25rem; | |
| padding-top: 1rem; | |
| border-top: 1px solid var(--gray-100); | |
| } | |
| .mock-legend-title { | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| color: var(--gray-400); | |
| margin-bottom: 0.75rem; | |
| } | |
| .mock-gradient-bar { | |
| height: 10px; | |
| border-radius: 3px; | |
| background: linear-gradient(90deg, #2563eb 0%, #06b6d4 30%, #10b981 50%, #f59e0b 75%, #ef4444 100%); | |
| margin-bottom: 0.375rem; | |
| } | |
| .mock-gradient-labels { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.625rem; | |
| color: var(--gray-400); | |
| font-weight: 600; | |
| } | |
| .mock-map { | |
| flex: 1; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| /* Topographic/flood contour visualization */ | |
| .mock-map-bg { | |
| position: absolute; | |
| inset: 0; | |
| background: | |
| radial-gradient(ellipse 70% 50% at 55% 45%, rgba(6, 182, 212, 0.15) 0%, transparent 100%), | |
| radial-gradient(ellipse 40% 35% at 40% 55%, rgba(37, 99, 235, 0.12) 0%, transparent 100%), | |
| radial-gradient(ellipse 30% 25% at 65% 35%, rgba(16, 185, 129, 0.1) 0%, transparent 100%), | |
| linear-gradient(145deg, var(--blue-50) 0%, #f0f7ff 100%); | |
| } | |
| .mock-contour { | |
| position: absolute; | |
| border-radius: 50%; | |
| border: 1px solid; | |
| opacity: 0.3; | |
| } | |
| .mock-contour:nth-child(1) { | |
| width: 400px; height: 280px; | |
| top: 15%; left: 20%; | |
| border-color: #2563eb; | |
| } | |
| .mock-contour:nth-child(2) { | |
| width: 300px; height: 200px; | |
| top: 22%; left: 28%; | |
| border-color: #06b6d4; | |
| opacity: 0.35; | |
| } | |
| .mock-contour:nth-child(3) { | |
| width: 200px; height: 130px; | |
| top: 30%; left: 35%; | |
| border-color: #10b981; | |
| opacity: 0.4; | |
| } | |
| .mock-contour:nth-child(4) { | |
| width: 100px; height: 70px; | |
| top: 38%; left: 42%; | |
| border-color: #f59e0b; | |
| opacity: 0.45; | |
| } | |
| /* Flow arrows */ | |
| .mock-arrow { | |
| position: absolute; | |
| font-size: 0.75rem; | |
| color: var(--blue-400); | |
| opacity: 0.5; | |
| font-weight: 500; | |
| } | |
| .mock-arrow:nth-of-type(5) { top: 20%; right: 20%; transform: rotate(-30deg); } | |
| .mock-arrow:nth-of-type(6) { top: 50%; right: 15%; transform: rotate(-15deg); } | |
| .mock-arrow:nth-of-type(7) { bottom: 25%; right: 30%; transform: rotate(-45deg); } | |
| .mock-toolbar { | |
| position: absolute; | |
| top: 12px; | |
| right: 12px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .mock-tool-btn { | |
| width: 32px; | |
| height: 32px; | |
| background: var(--white); | |
| border: 1px solid var(--gray-200); | |
| border-radius: 6px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.7rem; | |
| color: var(--gray-500); | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.06); | |
| } | |
| .mock-coords { | |
| position: absolute; | |
| bottom: 10px; | |
| left: 12px; | |
| font-size: 0.625rem; | |
| color: var(--gray-400); | |
| font-family: 'SF Mono', 'Fira Code', monospace; | |
| background: rgba(255,255,255,0.85); | |
| padding: 3px 8px; | |
| border-radius: 4px; | |
| backdrop-filter: blur(4px); | |
| } | |
| .mock-scale { | |
| position: absolute; | |
| bottom: 10px; | |
| right: 12px; | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| font-size: 0.625rem; | |
| color: var(--gray-400); | |
| background: rgba(255,255,255,0.85); | |
| padding: 3px 8px; | |
| border-radius: 4px; | |
| } | |
| .mock-scale-line { | |
| width: 40px; | |
| height: 2px; | |
| background: var(--gray-400); | |
| position: relative; | |
| } | |
| .mock-scale-line::before, | |
| .mock-scale-line::after { | |
| content: ''; | |
| position: absolute; | |
| width: 2px; | |
| height: 6px; | |
| background: var(--gray-400); | |
| top: -2px; | |
| } | |
| .mock-scale-line::before { left: 0; } | |
| .mock-scale-line::after { right: 0; } | |
| /* ── Final CTA ── */ | |
| .cta-section { | |
| padding: 7rem 2rem; | |
| text-align: center; | |
| background: var(--white); | |
| } | |
| .cta-card { | |
| max-width: 720px; | |
| margin: 0 auto; | |
| padding: 4rem 3rem; | |
| background: linear-gradient(135deg, var(--blue-800) 0%, var(--blue-600) 100%); | |
| border-radius: 24px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .cta-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| right: -20%; | |
| width: 400px; | |
| height: 400px; | |
| border-radius: 50%; | |
| background: rgba(255,255,255,0.05); | |
| pointer-events: none; | |
| } | |
| .cta-card::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -30%; | |
| left: -10%; | |
| width: 300px; | |
| height: 300px; | |
| border-radius: 50%; | |
| background: rgba(255,255,255,0.03); | |
| pointer-events: none; | |
| } | |
| .cta-card h2 { | |
| font-size: clamp(1.5rem, 3vw, 2.25rem); | |
| font-weight: 800; | |
| color: var(--white); | |
| letter-spacing: -0.03em; | |
| margin-bottom: 1rem; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .cta-card p { | |
| font-size: 1.05rem; | |
| color: var(--blue-200); | |
| margin-bottom: 2rem; | |
| max-width: 480px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .btn-white { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.9rem 2rem; | |
| background: var(--white); | |
| color: var(--blue-700); | |
| font-family: var(--font); | |
| font-size: 1rem; | |
| font-weight: 700; | |
| border: none; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| text-decoration: none; | |
| transition: all 0.2s ease; | |
| position: relative; | |
| z-index: 1; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.1); | |
| } | |
| .btn-white:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 16px rgba(0,0,0,0.15); | |
| } | |
| .btn-white svg { | |
| width: 18px; | |
| height: 18px; | |
| transition: transform 0.2s; | |
| } | |
| .btn-white:hover svg { | |
| transform: translateX(3px); | |
| } | |
| /* ── Footer ── */ | |
| footer { | |
| padding: 2.5rem 2rem; | |
| border-top: 1px solid var(--gray-100); | |
| background: var(--gray-50); | |
| } | |
| .footer-content { | |
| max-width: 1120px; | |
| margin: 0 auto; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .footer-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.625rem; | |
| } | |
| .footer-left svg { | |
| width: 20px; | |
| height: 20px; | |
| color: var(--blue-600); | |
| } | |
| .footer-left span { | |
| font-size: 0.8125rem; | |
| color: var(--gray-400); | |
| } | |
| .footer-links { | |
| display: flex; | |
| gap: 2rem; | |
| list-style: none; | |
| } | |
| .footer-links a { | |
| font-size: 0.8125rem; | |
| color: var(--gray-400); | |
| text-decoration: none; | |
| transition: color 0.2s; | |
| } | |
| .footer-links a:hover { | |
| color: var(--gray-600); | |
| } | |
| /* ── Scroll Reveal ── */ | |
| .reveal { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: opacity 0.7s ease, transform 0.7s ease; | |
| } | |
| .reveal.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .reveal-delay-1 { transition-delay: 0.1s; } | |
| .reveal-delay-2 { transition-delay: 0.2s; } | |
| .reveal-delay-3 { transition-delay: 0.3s; } | |
| /* ── Responsive ── */ | |
| @media (max-width: 900px) { | |
| .features-grid { | |
| grid-template-columns: 1fr; | |
| gap: 1.5rem; | |
| } | |
| .mock-sidebar { | |
| display: none; | |
| } | |
| .nav-links .nav-link-text { | |
| display: none; | |
| } | |
| } | |
| @media (max-width: 640px) { | |
| nav { | |
| padding: 0 1.25rem; | |
| } | |
| .hero { | |
| padding: 7rem 1.25rem 4rem; | |
| } | |
| .hero-cta-group { | |
| flex-direction: column; | |
| } | |
| .btn-primary, .btn-secondary, .btn-white { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| .trusted-logos { | |
| gap: 2rem; | |
| } | |
| .features, .preview, .cta-section { | |
| padding: 4rem 1.25rem; | |
| } | |
| .cta-card { | |
| padding: 3rem 1.5rem; | |
| } | |
| .footer-content { | |
| flex-direction: column; | |
| gap: 1rem; | |
| text-align: center; | |
| } | |
| .preview-body { | |
| aspect-ratio: 4 / 3; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav> | |
| <a href="/" class="nav-logo"> | |
| <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <rect width="32" height="32" rx="8" fill="#346094"/> | |
| <path d="M8 22C8 22 10 14 16 14C22 14 24 22 24 22" stroke="white" stroke-width="2.5" stroke-linecap="round"/> | |
| <path d="M6 18C6 18 9 10 16 10C23 10 26 18 26 18" stroke="white" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/> | |
| <circle cx="16" cy="14" r="2" fill="white"/> | |
| </svg> | |
| <span>Hydrata</span> | |
| </a> | |
| <ul class="nav-links"> | |
| <li><a href="/catalogue/#/?f=map" class="nav-link-text">Maps</a></li> | |
| <li><a href="#features" class="nav-link-text">Features</a></li> | |
| <li><a href="/account/signup/" class="nav-cta">Get Started</a></li> | |
| </ul> | |
| </nav> | |
| <!-- Hero --> | |
| <section class="hero"> | |
| <div class="hero-grid"></div> | |
| <div class="hero-content"> | |
| <div class="hero-badge"> | |
| <span class="hero-badge-dot"></span> | |
| Powered by ANUGA Open Source Engine | |
| </div> | |
| <h1> | |
| Surface water modeling,<br> | |
| <span class="gradient-text">built for collaboration.</span> | |
| </h1> | |
| <p> | |
| Run production-grade hydraulic simulations in the cloud. No installs, no licensing fees. Just science. | |
| </p> | |
| <div class="hero-cta-group"> | |
| <a href="/account/signup/" class="btn-primary"> | |
| Get Started Free | |
| <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M5 10h10M11 6l4 4-4 4"/> | |
| </svg> | |
| </a> | |
| <a href="/catalogue/#/?f=map" class="btn-secondary"> | |
| Explore Maps | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Trusted By --> | |
| <section class="trusted"> | |
| <p>Trusted by government agencies and research institutions worldwide</p> | |
| <div class="trusted-logos"> | |
| <span class="trusted-logo">City of Decatur</span> | |
| <span class="trusted-logo">CODELCO</span> | |
| <span class="trusted-logo">National Geophysical Research Institute</span> | |
| <span class="trusted-logo">ANU</span> | |
| </div> | |
| </section> | |
| <!-- Features --> | |
| <section class="features" id="features"> | |
| <div class="section-container"> | |
| <div class="section-header"> | |
| <span class="section-label">Platform</span> | |
| <h2 class="section-title">Hydraulic modeling,<br>without the overhead.</h2> | |
| <p class="section-subtitle"> | |
| Everything you need to build, run, and share flood and surface water models -- in one place. | |
| </p> | |
| </div> | |
| <div class="features-grid"> | |
| <!-- Card 1: Open Source --> | |
| <div class="feature-card reveal"> | |
| <div class="feature-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/> | |
| <path d="M12 6v2"/> | |
| <path d="M12 16v2"/> | |
| <path d="M6 12h2"/> | |
| <path d="M16 12h2"/> | |
| <circle cx="12" cy="12" r="3"/> | |
| </svg> | |
| </div> | |
| <h3>Open Source Engine</h3> | |
| <p> | |
| Built on ANUGA, the peer-reviewed hydrodynamic engine developed by Geoscience Australia and the Australian National University. Full transparency, no black boxes. | |
| </p> | |
| </div> | |
| <!-- Card 2: Cloud-Based --> | |
| <div class="feature-card reveal reveal-delay-1"> | |
| <div class="feature-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/> | |
| </svg> | |
| </div> | |
| <h3>Cloud-Based Modeling</h3> | |
| <p> | |
| Run compute-intensive simulations on scalable cloud infrastructure. No desktop installs, no hardware constraints. Access your models from anywhere. | |
| </p> | |
| </div> | |
| <!-- Card 3: Collaborative --> | |
| <div class="feature-card reveal reveal-delay-2"> | |
| <div class="feature-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/> | |
| <circle cx="9" cy="7" r="4"/> | |
| <path d="M23 21v-2a4 4 0 0 0-3-3.87"/> | |
| <path d="M16 3.13a4 4 0 0 1 0 7.75"/> | |
| </svg> | |
| </div> | |
| <h3>Collaborative by Design</h3> | |
| <p> | |
| Share models with your team, stakeholders, and the public. Built-in permissions, version history, and real-time access to results through interactive maps. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Platform Preview --> | |
| <section class="preview"> | |
| <div class="section-container"> | |
| <div class="section-header"> | |
| <span class="section-label">Interface</span> | |
| <h2 class="section-title">See your data come to life.</h2> | |
| <p class="section-subtitle"> | |
| Interactive flood maps, depth grids, and velocity fields -- all rendered in your browser. | |
| </p> | |
| </div> | |
| <div class="preview-window reveal"> | |
| <div class="preview-titlebar"> | |
| <span class="preview-dot"></span> | |
| <span class="preview-dot"></span> | |
| <span class="preview-dot"></span> | |
| <span class="preview-url">hydrata.com/catalogue/#/?f=map</span> | |
| </div> | |
| <div class="preview-body"> | |
| <div class="mock-sidebar"> | |
| <div class="mock-sidebar-title">Layers</div> | |
| <div class="mock-layer"> | |
| <span class="mock-layer-dot" style="background: var(--gray-300);"></span> | |
| Base Terrain (DEM) | |
| </div> | |
| <div class="mock-layer"> | |
| <span class="mock-layer-dot"></span> | |
| Flood Depth Grid | |
| </div> | |
| <div class="mock-layer"> | |
| <span class="mock-layer-dot"></span> | |
| Velocity Field | |
| </div> | |
| <div class="mock-layer"> | |
| <span class="mock-layer-dot"></span> | |
| Rainfall Boundary | |
| </div> | |
| <div class="mock-layer"> | |
| <span class="mock-layer-dot"></span> | |
| Catchment Boundary | |
| </div> | |
| <div class="mock-legend"> | |
| <div class="mock-legend-title">Depth (m)</div> | |
| <div class="mock-gradient-bar"></div> | |
| <div class="mock-gradient-labels"> | |
| <span>0.0</span> | |
| <span>0.5</span> | |
| <span>1.0</span> | |
| <span>2.0+</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mock-map"> | |
| <div class="mock-map-bg"></div> | |
| <div class="mock-contour"></div> | |
| <div class="mock-contour"></div> | |
| <div class="mock-contour"></div> | |
| <div class="mock-contour"></div> | |
| <div class="mock-arrow">⟶</div> | |
| <div class="mock-arrow">⟶</div> | |
| <div class="mock-arrow">⟶</div> | |
| <div class="mock-toolbar"> | |
| <div class="mock-tool-btn">+</div> | |
| <div class="mock-tool-btn">−</div> | |
| </div> | |
| <div class="mock-coords">33.7708° N, 84.2963° W</div> | |
| <div class="mock-scale"> | |
| <div class="mock-scale-line"></div> | |
| 500m | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Final CTA --> | |
| <section class="cta-section"> | |
| <div class="cta-card reveal"> | |
| <h2>Start modeling in minutes.</h2> | |
| <p> | |
| Create your free account and run your first hydraulic simulation today. No credit card required. | |
| </p> | |
| <a href="/account/signup/" class="btn-white"> | |
| Create Free Account | |
| <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M5 10h10M11 6l4 4-4 4"/> | |
| </svg> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="footer-content"> | |
| <div class="footer-left"> | |
| <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <rect width="32" height="32" rx="8" fill="#346094"/> | |
| <path d="M8 22C8 22 10 14 16 14C22 14 24 22 24 22" stroke="white" stroke-width="2.5" stroke-linecap="round"/> | |
| <circle cx="16" cy="14" r="2" fill="white"/> | |
| </svg> | |
| <span>© 2026 Hydrata. All rights reserved.</span> | |
| </div> | |
| <ul class="footer-links"> | |
| <li><a href="/catalogue/#/?f=map">Maps</a></li> | |
| <li><a href="/about/">About</a></li> | |
| <li><a href="/privacy/">Privacy</a></li> | |
| </ul> | |
| </div> | |
| </footer> | |
| <!-- Scroll Reveal Script (minimal, no dependencies) --> | |
| <script> | |
| (function() { | |
| var els = document.querySelectorAll('.reveal'); | |
| if (!els.length) return; | |
| var observer = new IntersectionObserver(function(entries) { | |
| entries.forEach(function(entry) { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('visible'); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' }); | |
| els.forEach(function(el) { observer.observe(el); }); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment