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/layout.css

@@ -0,0 +1,71 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   layout.css — Shell layout, tab content area, responsive breakpoints
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Body is the tab viewport, no page scroll ───────────────────────────── */
+html, body {
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── Tab content area (fills remaining space below nav) ─────────────────── */
+.tab-content {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* ── Tab pane (injected by tabs.js) ─────────────────────────────────────── */
+.tab-pane {
+  display: none;
+  padding: 1.5rem 1rem;
+}
+
+.tab-pane.active {
+  display: block;
+}
+
+/* Home tab specifically fills the viewport */
+.tab-pane--fill {
+  display: none;
+  padding: 0;
+  height: 100%;
+}
+.tab-pane--fill.active {
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── Container (shared across all tabs) ─────────────────────────────────── */
+.container {
+  width: 100%;
+  max-width: 720px;
+  margin-inline: auto;
+}
+
+/* ── Responsive ─────────────────────────────────────────────────────────── */
+@media (min-width: 576px) {
+  .tab-pane { padding: 2rem 1.5rem; }
+}
+
+@media (min-width: 768px) {
+  .container  { max-width: 704px; }
+  .tab-pane   { padding: 2rem 2rem; }
+}
+
+@media (min-width: 992px) {
+  .container  { max-width: 800px; }
+  .tab-pane   { padding: 2.5rem 2rem; }
+}
+
+@media (min-width: 1200px) {
+  .container  { max-width: 880px; }
+}