Skip to content

Instantly share code, notes, and snippets.

@davekennewell

davekennewell/hydrata-landing-v3-trust-authority.html

Created February 21, 2026 06:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save davekennewell/4a85cddfe342dad8b272f93538a5e3a0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save davekennewell/4a85cddfe342dad8b272f93538a5e3a0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
hydrata-landing-v3-trust-authority.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hydrata — Trusted Infrastructure for Water Resource Management</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=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--navy: #1a365d;
--navy-deep: #0f2440;
--navy-light: #2a4a7f;
--slate-900: #1e293b;
--slate-700: #334155;
--slate-600: #475569;
--slate-500: #64748b;
--slate-400: #94a3b8;
--slate-300: #cbd5e1;
--slate-200: #e2e8f0;
--slate-100: #f1f5f9;
--slate-50: #f8fafc;
--white: #ffffff;
--gold: #b8860b;
--gold-light: #d4a017;
--teal: #0d9488;
--teal-light: #14b8a6;
--blue-accent: #3b82f6;
--font-sans: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
--font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-sans);
color: var(--slate-700);
background: var(--white);
line-height: 1.6;
font-size: 16px;
}
/* ── Navigation ── */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.97);
border-bottom: 1px solid var(--slate-200);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.nav-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
}
.nav-logo {
display: flex;
align-items: center;
gap: 0.625rem;
text-decoration: none;
color: var(--navy);
}
.nav-logo-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
}
.nav-logo-text {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--navy);
}
.nav-links {
display: flex;
align-items: center;
gap: 2rem;
list-style: none;
}
.nav-links a {
text-decoration: none;
color: var(--slate-600);
font-size: 0.9375rem;
font-weight: 500;
transition: color 0.2s;
letter-spacing: 0.01em;
}
.nav-links a:hover {
color: var(--navy);
}
.nav-cta {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.5rem 1.25rem;
background: var(--navy);
color: var(--white) !important;
border-radius: 6px;
font-weight: 600;
font-size: 0.875rem;
letter-spacing: 0.02em;
transition: background 0.2s;
}
.nav-cta:hover {
background: var(--navy-light) !important;
color: var(--white) !important;
}
.nav-mobile-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
color: var(--navy);
}
.nav-mobile-toggle svg {
width: 24px;
height: 24px;
}
/* ── Hero ── */
.hero {
position: relative;
padding: 10rem 2rem 6rem;
background: linear-gradient(165deg, #f0f4f8 0%, #dce4ee 30%, #c7d5e8 60%, #b0c4de 100%);
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse 80% 60% at 20% 80%, rgba(26, 54, 93, 0.06) 0%, transparent 70%),
radial-gradient(ellipse 60% 50% at 80% 20%, rgba(13, 148, 136, 0.04) 0%, transparent 60%);
pointer-events: none;
}
.hero::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--slate-300), transparent);
}
.hero-grid-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(rgba(26, 54, 93, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(26, 54, 93, 0.03) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
}
.hero-inner {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 1rem 0.375rem 0.75rem;
background: rgba(26, 54, 93, 0.08);
border: 1px solid rgba(26, 54, 93, 0.12);
border-radius: 100px;
font-size: 0.8125rem;
font-weight: 600;
color: var(--navy);
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 1.75rem;
}
.hero-eyebrow-dot {
width: 6px;
height: 6px;
background: var(--teal);
border-radius: 50%;
flex-shrink: 0;
}
.hero h1 {
font-family: var(--font-serif);
font-size: clamp(2.5rem, 5vw, 3.75rem);
font-weight: 700;
color: var(--navy-deep);
line-height: 1.15;
letter-spacing: -0.025em;
max-width: 780px;
margin-bottom: 1.5rem;
}
.hero-sub {
font-size: clamp(1.0625rem, 2vw, 1.25rem);
color: var(--slate-600);
max-width: 620px;
line-height: 1.7;
margin-bottom: 2.5rem;
font-weight: 400;
}
.hero-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
align-items: center;
}
.btn-primary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 2rem;
background: var(--navy);
color: var(--white);
text-decoration: none;
border-radius: 8px;
font-weight: 600;
font-size: 1rem;
letter-spacing: 0.01em;
transition: all 0.2s;
border: 2px solid var(--navy);
}
.btn-primary:hover {
background: var(--navy-light);
border-color: var(--navy-light);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(26, 54, 93, 0.25);
}
.btn-secondary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 2rem;
background: transparent;
color: var(--navy);
text-decoration: none;
border-radius: 8px;
font-weight: 600;
font-size: 1rem;
letter-spacing: 0.01em;
transition: all 0.2s;
border: 2px solid var(--slate-300);
}
.btn-secondary:hover {
border-color: var(--navy);
background: rgba(26, 54, 93, 0.04);
}
.btn-arrow {
font-size: 1.125rem;
transition: transform 0.2s;
}
.btn-primary:hover .btn-arrow,
.btn-secondary:hover .btn-arrow {
transform: translateX(2px);
}
.hero-trust-line {
margin-top: 3.5rem;
padding-top: 2rem;
border-top: 1px solid rgba(26, 54, 93, 0.1);
display: flex;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
}
.hero-trust-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--slate-500);
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}
.hero-trust-logos {
display: flex;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
}
.hero-trust-logos span {
font-size: 0.8125rem;
font-weight: 500;
color: var(--slate-500);
white-space: nowrap;
display: flex;
align-items: center;
gap: 0.375rem;
}
.hero-trust-logos span svg {
width: 16px;
height: 16px;
opacity: 0.6;
}
/* ── Stats Bar ── */
.stats-bar {
background: var(--navy-deep);
padding: 0;
position: relative;
}
.stats-bar::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--teal), var(--gold-light), var(--teal));
}
.stats-inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.stat-item {
text-align: center;
padding: 2.5rem 1.5rem;
position: relative;
}
.stat-item:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 25%;
height: 50%;
width: 1px;
background: rgba(255, 255, 255, 0.12);
}
.stat-number {
font-family: var(--font-serif);
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 700;
color: var(--white);
line-height: 1.1;
margin-bottom: 0.375rem;
}
.stat-label {
font-size: 0.8125rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.6);
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* ── Section Shared ── */
.section {
padding: 6rem 2rem;
}
.section-alt {
background: var(--slate-50);
}
.section-header {
max-width: 680px;
margin: 0 auto 4rem;
text-align: center;
}
.section-eyebrow {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
color: var(--teal);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 1rem;
}
.section-title {
font-family: var(--font-serif);
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
font-weight: 700;
color: var(--navy-deep);
line-height: 1.2;
letter-spacing: -0.02em;
margin-bottom: 1rem;
}
.section-desc {
font-size: 1.0625rem;
color: var(--slate-500);
line-height: 1.7;
}
/* ── Case Studies ── */
.cases-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.case-card {
background: var(--white);
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--slate-200);
transition: all 0.3s;
display: flex;
flex-direction: column;
}
.case-card:hover {
border-color: var(--slate-300);
box-shadow: 0 8px 30px rgba(26, 54, 93, 0.08);
transform: translateY(-2px);
}
.case-card-accent {
height: 4px;
width: 100%;
}
.case-card:nth-child(1) .case-card-accent { background: linear-gradient(90deg, var(--teal), #0ea5e9); }
.case-card:nth-child(2) .case-card-accent { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.case-card:nth-child(3) .case-card-accent { background: linear-gradient(90deg, var(--blue-accent), #6366f1); }
.case-card-body {
padding: 2rem;
flex: 1;
display: flex;
flex-direction: column;
}
.case-card-location {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--slate-500);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 0.75rem;
}
.case-card-location svg {
width: 14px;
height: 14px;
color: var(--slate-400);
}
.case-card h3 {
font-family: var(--font-serif);
font-size: 1.375rem;
font-weight: 700;
color: var(--navy-deep);
line-height: 1.3;
margin-bottom: 0.75rem;
letter-spacing: -0.01em;
}
.case-card p {
font-size: 0.9375rem;
color: var(--slate-600);
line-height: 1.65;
flex: 1;
margin-bottom: 1.5rem;
}
.case-card-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.case-card-tag {
font-size: 0.6875rem;
font-weight: 600;
color: var(--slate-500);
background: var(--slate-100);
padding: 0.25rem 0.625rem;
border-radius: 100px;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.case-card-link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--navy);
text-decoration: none;
transition: gap 0.2s;
}
.case-card-link:hover {
gap: 0.625rem;
color: var(--navy-light);
}
.case-card-link svg {
width: 16px;
height: 16px;
}
/* ── Open Standards ── */
.standards-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.standards-text h3 {
font-family: var(--font-serif);
font-size: 1.75rem;
font-weight: 700;
color: var(--navy-deep);
line-height: 1.3;
margin-bottom: 1.25rem;
letter-spacing: -0.01em;
}
.standards-text > p {
font-size: 1.0625rem;
color: var(--slate-600);
line-height: 1.7;
margin-bottom: 2rem;
}
.standards-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.standards-list li {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.standards-icon {
width: 40px;
height: 40px;
background: rgba(13, 148, 136, 0.08);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--teal);
}
.standards-icon svg {
width: 20px;
height: 20px;
}
.standards-list li strong {
display: block;
font-size: 0.9375rem;
font-weight: 600;
color: var(--navy-deep);
margin-bottom: 0.125rem;
}
.standards-list li span {
font-size: 0.875rem;
color: var(--slate-500);
line-height: 1.5;
}
.standards-visual {
position: relative;
}
.standards-diagram {
background: linear-gradient(135deg, var(--slate-50), var(--white));
border: 1px solid var(--slate-200);
border-radius: 16px;
padding: 3rem 2rem;
text-align: center;
position: relative;
overflow: hidden;
}
.standards-diagram::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 2px 2px, var(--slate-200) 1px, transparent 0);
background-size: 24px 24px;
opacity: 0.5;
pointer-events: none;
}
.standards-diagram-inner {
position: relative;
z-index: 1;
}
.standards-diagram-center {
width: 120px;
height: 120px;
margin: 0 auto 2rem;
background: var(--navy);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 12px rgba(26, 54, 93, 0.08), 0 0 0 24px rgba(26, 54, 93, 0.04);
}
.standards-diagram-center span {
color: var(--white);
font-family: var(--font-serif);
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.standards-orbit {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.standards-orbit-item {
background: var(--white);
border: 1px solid var(--slate-200);
padding: 0.625rem 1rem;
border-radius: 8px;
font-size: 0.8125rem;
font-weight: 600;
color: var(--slate-600);
letter-spacing: 0.02em;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
/* ── Enterprise Features ── */
.features-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
.feature-card {
background: var(--white);
border: 1px solid var(--slate-200);
border-radius: 12px;
padding: 2rem;
transition: all 0.3s;
}
.feature-card:hover {
border-color: var(--slate-300);
box-shadow: 0 4px 20px rgba(26, 54, 93, 0.06);
}
.feature-icon {
width: 48px;
height: 48px;
background: var(--slate-50);
border: 1px solid var(--slate-200);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
color: var(--navy);
}
.feature-icon svg {
width: 24px;
height: 24px;
}
.feature-card h3 {
font-size: 1rem;
font-weight: 700;
color: var(--navy-deep);
margin-bottom: 0.5rem;
letter-spacing: -0.01em;
}
.feature-card p {
font-size: 0.875rem;
color: var(--slate-500);
line-height: 1.6;
}
/* ── CTA ── */
.cta-section {
padding: 6rem 2rem;
background: var(--navy-deep);
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse 60% 80% at 70% 50%, rgba(13, 148, 136, 0.08) 0%, transparent 60%),
radial-gradient(ellipse 50% 70% at 20% 60%, rgba(59, 130, 246, 0.06) 0%, transparent 60%);
pointer-events: none;
}
.cta-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}
.cta-inner {
max-width: 720px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 1;
}
.cta-inner .section-eyebrow {
color: var(--teal-light);
}
.cta-inner h2 {
font-family: var(--font-serif);
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
font-weight: 700;
color: var(--white);
line-height: 1.2;
letter-spacing: -0.02em;
margin-bottom: 1.25rem;
}
.cta-inner p {
font-size: 1.0625rem;
color: rgba(255, 255, 255, 0.65);
line-height: 1.7;
margin-bottom: 2.5rem;
}
.cta-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.btn-cta-primary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.9375rem 2.25rem;
background: var(--white);
color: var(--navy-deep);
text-decoration: none;
border-radius: 8px;
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.01em;
transition: all 0.2s;
border: 2px solid var(--white);
}
.btn-cta-primary:hover {
background: var(--slate-100);
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.btn-cta-secondary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.9375rem 2.25rem;
background: transparent;
color: var(--white);
text-decoration: none;
border-radius: 8px;
font-weight: 600;
font-size: 1rem;
letter-spacing: 0.01em;
transition: all 0.2s;
border: 2px solid rgba(255, 255, 255, 0.25);
}
.btn-cta-secondary:hover {
border-color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.05);
}
/* ── Footer ── */
.footer {
background: var(--slate-900);
padding: 4rem 2rem 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer-inner {
max-width: 1200px;
margin: 0 auto;
}
.footer-top {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
padding-bottom: 3rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-brand .nav-logo-text {
color: var(--white);
margin-bottom: 1rem;
display: block;
}
.footer-brand p {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.45);
line-height: 1.65;
max-width: 300px;
}
.footer-col h4 {
font-size: 0.6875rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 1.25rem;
}
.footer-col ul {
list-style: none;
}
.footer-col ul li {
margin-bottom: 0.625rem;
}
.footer-col ul a {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
transition: color 0.2s;
}
.footer-col ul a:hover {
color: rgba(255, 255, 255, 0.85);
}
.footer-bottom {
padding-top: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.footer-bottom p {
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.3);
}
.footer-legal {
display: flex;
gap: 1.5rem;
}
.footer-legal a {
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.3);
text-decoration: none;
transition: color 0.2s;
}
.footer-legal a:hover {
color: rgba(255, 255, 255, 0.6);
}
/* ── Mobile ── */
@media (max-width: 1024px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.standards-content {
grid-template-columns: 1fr;
gap: 3rem;
}
.footer-top {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}
@media (max-width: 768px) {
.nav-links {
display: none;
}
.nav-mobile-toggle {
display: block;
}
.hero {
padding: 8rem 1.5rem 4rem;
}
.stats-inner {
grid-template-columns: repeat(2, 1fr);
}
.stat-item:nth-child(2)::after {
display: none;
}
.stat-item {
padding: 1.75rem 1rem;
}
.cases-grid {
grid-template-columns: 1fr;
max-width: 480px;
}
.features-grid {
grid-template-columns: 1fr;
max-width: 480px;
margin: 0 auto;
}
.section {
padding: 4rem 1.5rem;
}
.cta-section {
padding: 4rem 1.5rem;
}
.hero-trust-line {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.footer-top {
grid-template-columns: 1fr;
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
}
@media (max-width: 480px) {
.stats-inner {
grid-template-columns: 1fr 1fr;
}
.stat-item::after {
display: none;
}
.hero-actions {
flex-direction: column;
align-items: stretch;
}
.btn-primary, .btn-secondary {
justify-content: center;
}
.cta-actions {
flex-direction: column;
align-items: stretch;
}
.btn-cta-primary, .btn-cta-secondary {
justify-content: center;
}
}
</style>
</head>
<body>
<!-- ── Navigation ── -->
<nav class="nav">
<div class="nav-inner">
<a href="/" class="nav-logo">
<svg class="nav-logo-icon" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="36" height="36" rx="8" fill="#1a365d"/>
<path d="M8 24 C10 16, 14 12, 18 18 C22 24, 26 14, 28 12" stroke="#14b8a6" stroke-width="2.5" stroke-linecap="round" fill="none"/>
<path d="M8 20 C12 22, 16 17, 20 20 C24 23, 26 18, 28 17" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round" fill="none"/>
<circle cx="18" cy="18" r="2" fill="white" opacity="0.9"/>
</svg>
<span class="nav-logo-text">Hydrata</span>
</a>
<ul class="nav-links">
<li><a href="#case-studies">Case Studies</a></li>
<li><a href="#standards">Technology</a></li>
<li><a href="#features">Features</a></li>
<li><a href="/catalogue/#/?f=map">Data Catalogue</a></li>
<li><a href="#contact" class="nav-cta">Request Demo <span class="btn-arrow">&rarr;</span></a></li>
</ul>
<button class="nav-mobile-toggle" onclick="document.querySelector('.nav-links').style.display = document.querySelector('.nav-links').style.display === 'flex' ? 'none' : 'flex'; document.querySelector('.nav-links').style.flexDirection = 'column'; document.querySelector('.nav-links').style.position = 'absolute'; document.querySelector('.nav-links').style.top = '72px'; document.querySelector('.nav-links').style.left = '0'; document.querySelector('.nav-links').style.right = '0'; document.querySelector('.nav-links').style.background = 'white'; document.querySelector('.nav-links').style.padding = '1rem 2rem'; document.querySelector('.nav-links').style.borderBottom = '1px solid #e2e8f0'; document.querySelector('.nav-links').style.gap = '1rem';">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
</button>
</div>
</nav>
<!-- ── Hero ── -->
<section class="hero">
<div class="hero-grid-bg"></div>
<div class="hero-inner">
<div class="hero-eyebrow">
<span class="hero-eyebrow-dot"></span>
Geoscience Australia &amp; Australian National University
</div>
<h1>Trusted Infrastructure for Water Resource Management</h1>
<p class="hero-sub">
Hydrata provides a collaborative, cloud-based interface to the ANUGA hydraulic model, enabling transparent surface water modelling for flood risk assessment, stormwater management, and watershed planning.
</p>
<div class="hero-actions">
<a href="#contact" class="btn-primary">Request a Demo <span class="btn-arrow">&rarr;</span></a>
<a href="/catalogue/#/?f=map" class="btn-secondary">Explore Data Catalogue <span class="btn-arrow">&rarr;</span></a>
</div>
<div class="hero-trust-line">
<span class="hero-trust-label">Trusted by</span>
<div class="hero-trust-logos">
<span>
<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 1a7 7 0 100 14A7 7 0 008 1zm0 12.5a5.5 5.5 0 110-11 5.5 5.5 0 010 11zM7.25 4v4.5l3.5 2.1.75-1.23-2.75-1.63V4h-1.5z"/></svg>
Government Agencies
</span>
<span>
<svg viewBox="0 0 16 16" fill="currentColor"><path d="M2 2v12h12V2H2zm10.5 10.5h-9v-9h9v9zM6 7h4v1H6V7zm0 2h4v1H6V9zm0-4h4v1H6V5z"/></svg>
Research Institutions
</span>
<span>
<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 1L1 5v1h14V5L8 1zM3 7v5h2V7H3zm4 0v5h2V7H7zm4 0v5h2V7h-2zM1 13v2h14v-2H1z"/></svg>
Engineering Firms
</span>
</div>
</div>
</div>
</section>
<!-- ── Stats Bar ── -->
<section class="stats-bar">
<div class="stats-inner">
<div class="stat-item">
<div class="stat-number">4</div>
<div class="stat-label">National Portals</div>
</div>
<div class="stat-item">
<div class="stat-number">3</div>
<div class="stat-label">Countries Served</div>
</div>
<div class="stat-item">
<div class="stat-number">500+</div>
<div class="stat-label">Published Datasets</div>
</div>
<div class="stat-item">
<div class="stat-number">100%</div>
<div class="stat-label">Open Source</div>
</div>
</div>
</section>
<!-- ── Case Studies ── -->
<section class="section section-alt" id="case-studies">
<div class="section-header">
<span class="section-eyebrow">Proven in the Field</span>
<h2 class="section-title">Deployed Across Critical Water Infrastructure Programs</h2>
<p class="section-desc">
From watershed management in the United States to groundwater mapping in Central America and geological surveying in the Caribbean, Hydrata supports decision-making where it matters most.
</p>
</div>
<div class="cases-grid">
<!-- Card 1: SWAMM -->
<div class="case-card">
<div class="case-card-accent"></div>
<div class="case-card-body">
<div class="case-card-location">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 1.5C5.5 1.5 3.5 3.5 3.5 6c0 3.5 4.5 8.5 4.5 8.5s4.5-5 4.5-8.5c0-2.5-2-4.5-4.5-4.5z"/><circle cx="8" cy="6" r="1.5"/></svg>
Decatur, Illinois, USA
</div>
<h3>Lake Decatur Watershed Management</h3>
<p>
Quantifying the effectiveness of best management practices (BMPs) for stormwater control across the Lake Decatur watershed. The SWAMM portal enables multi-stakeholder collaboration on runoff modelling and nutrient load reduction.
</p>
<div class="case-card-tags">
<span class="case-card-tag">Stormwater</span>
<span class="case-card-tag">BMP Analysis</span>
<span class="case-card-tag">Watershed</span>
</div>
<a href="https://theswamm.com" class="case-card-link">
Learn more
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="8" x2="13" y2="8"/><polyline points="9,4 13,8 9,12"/></svg>
</a>
</div>
</div>
<!-- Card 2: Haiti -->
<div class="case-card">
<div class="case-card-accent"></div>
<div class="case-card-body">
<div class="case-card-location">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 1.5C5.5 1.5 3.5 3.5 3.5 6c0 3.5 4.5 8.5 4.5 8.5s4.5-5 4.5-8.5c0-2.5-2-4.5-4.5-4.5z"/><circle cx="8" cy="6" r="1.5"/></svg>
Port-au-Prince, Haiti
</div>
<h3>Haiti National Hydrogeology Portal</h3>
<p>
A centralized geospatial platform for Haiti's geological and hydrogeological data, enabling researchers and government agencies to access, share, and analyze subsurface mapping and water resource data across the country.
</p>
<div class="case-card-tags">
<span class="case-card-tag">Hydrogeology</span>
<span class="case-card-tag">Data Sharing</span>
<span class="case-card-tag">National Portal</span>
</div>
<a href="https://sararaportal.com" class="case-card-link">
Learn more
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="8" x2="13" y2="8"/><polyline points="9,4 13,8 9,12"/></svg>
</a>
</div>
</div>
<!-- Card 3: Nicaragua -->
<div class="case-card">
<div class="case-card-accent"></div>
<div class="case-card-body">
<div class="case-card-location">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 1.5C5.5 1.5 3.5 3.5 3.5 6c0 3.5 4.5 8.5 4.5 8.5s4.5-5 4.5-8.5c0-2.5-2-4.5-4.5-4.5z"/><circle cx="8" cy="6" r="1.5"/></svg>
Managua, Nicaragua
</div>
<h3>Nicaragua Groundwater Resource Portal</h3>
<p>
Supporting sustainable groundwater resource planning through a collaborative geospatial platform. Enables cross-institutional data management for aquifer monitoring, well inventories, and regional water balance assessments.
</p>
<div class="case-card-tags">
<span class="case-card-tag">Groundwater</span>
<span class="case-card-tag">Resource Planning</span>
<span class="case-card-tag">Monitoring</span>
</div>
<a href="https://nicaraguahydroportal.com" class="case-card-link">
Learn more
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="8" x2="13" y2="8"/><polyline points="9,4 13,8 9,12"/></svg>
</a>
</div>
</div>
</div>
</section>
<!-- ── Built on Open Standards ── -->
<section class="section" id="standards">
<div class="section-header">
<span class="section-eyebrow">Technology Foundation</span>
<h2 class="section-title">Built on Open Standards</h2>
<p class="section-desc">
Every component of the Hydrata platform is built on established, peer-reviewed open source technologies, ensuring transparency, reproducibility, and long-term institutional viability.
</p>
</div>
<div class="standards-content">
<div class="standards-text">
<h3>Scientifically Validated. Institutionally Ready.</h3>
<p>
The ANUGA hydrodynamic model, developed by Geoscience Australia and the Australian National University, solves the shallow water wave equations using a finite-volume method on an unstructured triangular mesh. Hydrata wraps ANUGA in a modern geospatial web platform, making it accessible to teams without HPC expertise.
</p>
<ul class="standards-list">
<li>
<div class="standards-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polygon points="12,2 22,8.5 22,15.5 12,22 2,15.5 2,8.5"/><line x1="12" y1="22" x2="12" y2="15.5"/><polyline points="22,8.5 12,15.5 2,8.5"/><polyline points="2,15.5 12,8.5 22,15.5"/></svg>
</div>
<div>
<strong>ANUGA Hydraulic Engine</strong>
<span>Peer-reviewed 2D hydrodynamic solver for flood and flow modelling</span>
</div>
</li>
<li>
<div class="standards-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10A15.3 15.3 0 0112 2z"/></svg>
</div>
<div>
<strong>OGC-Compliant Services</strong>
<span>WMS, WFS, WCS, and CSW for interoperable geospatial data exchange</span>
</div>
</li>
<li>
<div class="standards-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4.03 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5"/></svg>
</div>
<div>
<strong>PostGIS Spatial Database</strong>
<span>Enterprise-grade spatial queries on PostgreSQL with full SQL access</span>
</div>
</li>
<li>
<div class="standards-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
</div>
<div>
<strong>GeoServer Map Services</strong>
<span>High-performance rendering and tile serving for large geospatial datasets</span>
</div>
</li>
</ul>
</div>
<div class="standards-visual">
<div class="standards-diagram">
<div class="standards-diagram-inner">
<div class="standards-diagram-center">
<span>Hydrata</span>
</div>
<div class="standards-orbit">
<div class="standards-orbit-item">ANUGA</div>
<div class="standards-orbit-item">GeoNode</div>
<div class="standards-orbit-item">GeoServer</div>
<div class="standards-orbit-item">PostGIS</div>
<div class="standards-orbit-item">MapStore</div>
<div class="standards-orbit-item">OGC / WMS</div>
<div class="standards-orbit-item">Django</div>
<div class="standards-orbit-item">Celery</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ── Enterprise Features ── -->
<section class="section section-alt" id="features">
<div class="section-header">
<span class="section-eyebrow">Enterprise Capabilities</span>
<h2 class="section-title">Built for Institutional Requirements</h2>
<p class="section-desc">
Hydrata meets the security, governance, and integration requirements of government agencies, research institutions, and engineering firms managing critical water infrastructure.
</p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>
</div>
<h3>Role-Based Access Control</h3>
<p>Granular permissions at the dataset, project, and organization level. Control who can view, edit, publish, and administer resources across your team.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14,2 14,8 20,8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10,9 9,9 8,9"/></svg>
</div>
<h3>Full Audit Trail</h3>
<p>Complete provenance tracking for all datasets and model runs. Every modification, computation, and publication is recorded with timestamps and user attribution.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="16,18 22,12 16,6"/><polyline points="8,6 2,12 8,18"/><line x1="14" y1="4" x2="10" y2="20"/></svg>
</div>
<h3>RESTful API Access</h3>
<p>Programmatic access to all platform capabilities via documented REST APIs. Integrate with existing workflows, automate data pipelines, and build custom applications.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
</div>
<h3>Custom Branding &amp; Portals</h3>
<p>Deploy dedicated, white-labeled portals for your organization or program. Custom domain, branding, and homepage configuration without separate infrastructure.</p>
</div>
</div>
</section>
<!-- ── CTA ── -->
<section class="cta-section" id="contact">
<div class="cta-inner">
<span class="section-eyebrow">Get Started</span>
<h2>Ready to Modernize Your Water Resource Management?</h2>
<p>
Whether you are evaluating platforms for a national data portal, a regional watershed program, or institutional research, our team can walk you through a deployment tailored to your requirements.
</p>
<div class="cta-actions">
<a href="mailto:info@hydrata.com?subject=Demo%20Request" class="btn-cta-primary">
Request a Demo <span class="btn-arrow">&rarr;</span>
</a>
<a href="/account/signup/" class="btn-cta-secondary">
Create an Account <span class="btn-arrow">&rarr;</span>
</a>
</div>
</div>
</section>
<!-- ── Footer ── -->
<footer class="footer">
<div class="footer-inner">
<div class="footer-top">
<div class="footer-brand">
<span class="nav-logo-text">Hydrata</span>
<p>
Cloud-based hydraulic modelling infrastructure built on ANUGA, developed by Geoscience Australia and the Australian National University. Open source. Peer-reviewed. Field-proven.
</p>
</div>
<div class="footer-col">
<h4>Platform</h4>
<ul>
<li><a href="/catalogue/#/?f=map">Data Catalogue</a></li>
<li><a href="#features">Enterprise Features</a></li>
<li><a href="#standards">Technology</a></li>
<li><a href="/account/signup/">Create Account</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Portals</h4>
<ul>
<li><a href="https://hydrata.com">Hydrata</a></li>
<li><a href="https://theswamm.com">SWAMM</a></li>
<li><a href="https://sararaportal.com">Sarara Portal</a></li>
<li><a href="https://nicaraguahydroportal.com">Nicaragua Hydroportal</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Resources</h4>
<ul>
<li><a href="https://anuga.anu.edu.au">ANUGA Documentation</a></li>
<li><a href="https://www.ga.gov.au">Geoscience Australia</a></li>
<li><a href="https://geonode.org">GeoNode Project</a></li>
<li><a href="mailto:info@hydrata.com">Contact</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2026 Hydrata. All rights reserved.</p>
<div class="footer-legal">
<a href="/privacy/">Privacy Policy</a>
<a href="/terms/">Terms of Service</a>
</div>
</div>
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment