ReVoltVPN website

The landing page for ReVoltVPN, live at userevolt.app.

Vanilla HTML, CSS and JavaScript: no framework, no build step, no
dependencies. Every claim on the page is checked against the app it
describes, which is the reason this is public.

GPL-3.0, same as the app.

Co-Authored-By: Claude Opus 5 <[email protected]>

assets/css/nav.css

@@ -0,0 +1,151 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   nav.css — Top navigation bar with tabs (matching scraped2 style)
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.nav {
+  position: relative;
+  z-index: 100;
+  flex-shrink: 0;
+  background: rgba(13, 17, 23, 0.75);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.nav__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 1rem;
+  min-height: 56px;
+  max-width: 880px;
+  margin-inline: auto;
+}
+
+/* Brand / logo */
+.nav__brand {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 700;
+  font-size: 1.15rem;
+  color: var(--color-text);
+  flex-shrink: 0;
+  cursor: pointer;
+  margin-right: 2rem;
+}
+
+.nav__logo {
+  display: block;
+  flex-shrink: 0;
+}
+
+/* Tab buttons */
+.nav__tabs {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+
+.nav__tab {
+  display: inline-block;
+  background: none;
+  border: none;
+  text-decoration: none;
+  color: var(--color-text-dim);
+  font-family: var(--font-body);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: 6px;
+  white-space: nowrap;
+  padding: 0.5rem 0.625rem;
+  min-height: 40px;
+  display: inline-flex;
+  align-items: center;
+}
+
+.nav__tab.active {
+  color: var(--color-accent);
+  background: var(--color-accent-dim);
+}
+
+/* ── Hamburger button ──────────────────────────────────────────────────── */
+.nav__hamburger {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+}
+
+.nav__hamburger span {
+  display: block;
+  width: 22px;
+  height: 2px;
+  background: var(--color-text);
+  border-radius: 1px;
+  transition: transform 0.25s, opacity 0.25s;
+}
+
+/* Animate to X when open */
+.nav--open .nav__hamburger span:nth-child(1) {
+  transform: translateY(7px) rotate(45deg);
+}
+.nav--open .nav__hamburger span:nth-child(2) {
+  opacity: 0;
+}
+.nav--open .nav__hamburger span:nth-child(3) {
+  transform: translateY(-7px) rotate(-45deg);
+}
+
+/* ── Mobile: hamburger menu ────────────────────────────────────────────── */
+@media (max-width: 575px) {
+  .nav__hamburger {
+    display: flex;
+  }
+
+  .nav__tabs {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    flex-direction: column;
+    background: rgba(13, 17, 23, 0.95);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    padding: 0.5rem 0;
+    z-index: 200;
+  }
+
+  .nav--open .nav__tabs {
+    display: flex;
+  }
+
+  .nav__tabs .nav__tab {
+    width: 100%;
+    text-align: left;
+    padding: 0.75rem 1.5rem;
+    font-size: 0.9375rem;
+    border-radius: 0;
+    min-height: 44px;
+  }
+
+  .nav__tabs .nav__tab.active {
+    background: var(--color-accent-dim);
+  }
+}
+
+/* ── Responsive ─────────────────────────────────────────────────────────── */
+@media (min-width: 576px) {
+  .nav__tab { font-size: 0.875rem; padding: 0.5rem 1rem; }
+  .nav__brand { font-size: 1.25rem; }
+}