Adding in a holding page for a website

2026-03-25 14:27:06 +00:00
parent fae7b3be20
commit 71a6c72614
3 changed files with 278 additions and 0 deletions
--- a/website/style.css
+++ b/website/style.css
@@ -0,0 +1,140 @@
+:root {
+  --bg: #0a0a0a;
+  --fg: #e8e8e8;
+  --muted: #888;
+  --accent: #4f9cf7;
+  --surface: #141414;
+  --border: #222;
+  --max-w: 720px;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: var(--bg);
+  color: var(--fg);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+}
+
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+.container {
+  max-width: var(--max-w);
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+/* ── Header ── */
+header {
+  padding: 48px 0 32px;
+  border-bottom: 1px solid var(--border);
+}
+
+header h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+}
+
+header h1 span { color: var(--accent); }
+
+header p.tagline {
+  color: var(--muted);
+  font-size: 1.1rem;
+  margin-top: 8px;
+}
+
+/* ── Sections ── */
+section {
+  padding: 48px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+section:last-of-type { border-bottom: none; }
+
+section h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 16px;
+  letter-spacing: -0.02em;
+}
+
+section p { color: var(--muted); margin-bottom: 12px; }
+
+/* ── Feature grid ── */
+.features {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  margin-top: 16px;
+}
+
+.feature {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 20px;
+}
+
+.feature h3 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+.feature p {
+  font-size: 0.875rem;
+  color: var(--muted);
+  margin: 0;
+}
+
+/* ── How it works ── */
+.steps {
+  list-style: none;
+  counter-reset: step;
+  margin-top: 16px;
+}
+
+.steps li {
+  counter-increment: step;
+  padding: 12px 0;
+  padding-left: 36px;
+  position: relative;
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+
+.steps li::before {
+  content: counter(step);
+  position: absolute;
+  left: 0;
+  top: 12px;
+  width: 24px;
+  height: 24px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 50%;
+  font-size: 0.75rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--accent);
+}
+
+/* ── Footer ── */
+footer {
+  padding: 32px 0;
+  color: var(--muted);
+  font-size: 0.8rem;
+  text-align: center;
+}
+
+/* ── Responsive ── */
+@media (max-width: 540px) {
+  .features { grid-template-columns: 1fr; }
+  header h1 { font-size: 1.5rem; }
+}