Páginas Medio

Wiki — Knowledge-Base Home / Portal

A welcoming knowledge-base home and help-center portal with a big central search bar that live-previews matching articles in a dropdown, popular-search chips that run demo queries, a responsive grid of topic cards with article counts and hover-lift, a ranked popular-articles list, a four-step getting-started path, and a support footer band — built in clean semantic HTML, CSS, and vanilla JavaScript with full keyboard navigation.

Abrir en Lab

html css vanilla-js

Targets: JS HTML

Código

:root {
  --bg: #ffffff;
  --bg-2: #f7f8fa;
  --panel: #ffffff;
  --ink: #1a1a1f;
  --ink-2: #3a3a42;
  --muted: #6b7280;
  --line: rgba(20, 20, 30, 0.10);
  --line-2: rgba(20, 20, 30, 0.18);
  --link: #2563eb;
  --link-hover: #1d4ed8;
  --accent: #2563eb;
  --note: #2563eb;
  --tip: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;
  --code-bg: #f4f4f6;
  --kbd-bg: #eceef2;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.06);
  --shadow-md: 0 6px 24px rgba(20, 20, 30, 0.08);
  --shadow-lg: 0 18px 48px rgba(20, 20, 30, 0.12);
  --maxw: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.86em;
  background: var(--code-bg);
  padding: 0.1em 0.4em;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 var(--r-md) 0;
  z-index: 100;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── TOPBAR ────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 17px;
}
.brand__mark { color: var(--accent); font-size: 15px; }
.brand__sub { color: var(--muted); font-weight: 600; }
.topnav {
  display: flex;
  gap: 22px;
  margin-right: auto;
  font-size: 14px;
  font-weight: 500;
}
.topnav a { color: var(--ink-2); transition: color 0.15s; }
.topnav a:hover { color: var(--accent); }
.topbar__actions { display: flex; gap: 10px; align-items: center; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.08s, box-shadow 0.15s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--link-hover); box-shadow: var(--shadow-sm); }
.btn--ghost { background: transparent; color: var(--ink-2); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--bg-2); }
.btn--block { width: 100%; margin-top: 6px; }

/* ── HERO ──────────────────────────────────── */
.hero {
  background:
    radial-gradient(1100px 380px at 50% -120px, rgba(37, 99, 235, 0.14), transparent 70%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  border-bottom: 1px solid var(--line);
  padding: 64px 24px 56px;
}
.hero__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.hero__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.hero h1 {
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.1;
}
.hero__lede {
  color: var(--muted);
  font-size: 16px;
  margin-top: 12px;
  margin-bottom: 28px;
}

/* ── SEARCH ────────────────────────────────── */
.search { position: relative; max-width: 600px; margin: 0 auto; text-align: left; }
.search__field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 0 14px;
  height: 56px;
  box-shadow: var(--shadow-md);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search__field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14), var(--shadow-md);
}
.search__icon { width: 22px; height: 22px; fill: var(--muted); flex: none; }
.search input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  min-width: 0;
}
.search input::placeholder { color: var(--muted); }
.search__hint {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  background: var(--kbd-bg);
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  padding: 2px 7px;
  color: var(--ink-2);
  flex: none;
}

.search__results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  z-index: 30;
  max-height: 340px;
  overflow-y: auto;
}
.search__results li { margin: 0; }
.result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.result:hover, .result.is-active { background: var(--bg-2); }
.result__icon { font-size: 17px; flex: none; }
.result__body { min-width: 0; flex: 1; }
.result__title { font-size: 14px; font-weight: 600; color: var(--ink); }
.result__title mark { background: rgba(37, 99, 235, 0.18); color: inherit; border-radius: 3px; padding: 0 1px; }
.result__cat { font-size: 12px; color: var(--muted); }
.result__go { color: var(--muted); flex: none; font-size: 14px; }
.result--empty {
  padding: 16px 12px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  cursor: default;
}
.result--empty:hover { background: transparent; }

/* ── CHIPS ─────────────────────────────────── */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
}
.chips__label { font-size: 13px; color: var(--muted); font-weight: 500; }
.chip {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.08s;
}
.chip:hover { background: rgba(37, 99, 235, 0.08); border-color: var(--accent); color: var(--accent); }
.chip:active { transform: translateY(1px); }

/* ── SECTIONS ──────────────────────────────── */
.section { max-width: var(--maxw); margin: 0 auto; padding: 56px 24px; }
.section--flush { padding: 0; }
.section__head { margin-bottom: 26px; }
.section__head h2 { font-size: 24px; }
.section__head p { color: var(--muted); margin-top: 6px; font-size: 15px; }

/* ── TOPIC CARDS ───────────────────────────── */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-2);
}
.card__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  font-size: 22px;
  margin-bottom: 4px;
}
.card__icon--blue   { background: rgba(37, 99, 235, 0.10); }
.card__icon--green  { background: rgba(22, 163, 74, 0.12); }
.card__icon--violet { background: rgba(124, 58, 237, 0.12); }
.card__icon--amber  { background: rgba(217, 119, 6, 0.13); }
.card__icon--pink   { background: rgba(219, 39, 119, 0.12); }
.card__icon--red    { background: rgba(220, 38, 38, 0.11); }
.card__title { font-size: 17px; }
.card__desc { color: var(--muted); font-size: 14px; line-height: 1.55; flex: 1; }
.card__count {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  margin-top: 4px;
}

/* ── SPLIT: POPULAR + GET STARTED ──────────── */
.split {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px 56px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}

.articles { list-style: none; margin: 0; padding: 0; }
.article + .article { border-top: 1px solid var(--line); }
.article a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 8px;
  border-radius: var(--r-sm);
  transition: background 0.14s;
}
.article a:hover { background: var(--bg-2); }
.article__rank {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  width: 22px;
  flex: none;
}
.article__body { flex: 1; min-width: 0; }
.article__title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.article a:hover .article__title { color: var(--accent); }
.article__meta { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.article__views {
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* ── GET STARTED ───────────────────────────── */
.getstarted {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  font-family: "Source Serif 4", Georgia, serif;
}
.getstarted h2 { font-family: "Inter", sans-serif; font-size: 20px; }
.getstarted__lede { color: var(--muted); font-size: 14px; margin-top: 8px; margin-bottom: 18px; line-height: 1.6; }
.path { list-style: none; margin: 0 0 4px; padding: 0; counter-reset: step; }
.path__step { display: flex; gap: 14px; padding: 12px 0; position: relative; }
.path__step + .path__step { border-top: 1px dashed var(--line-2); }
.path__num {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
}
.path__step h3 { font-family: "Inter", sans-serif; font-size: 14.5px; }
.path__step p { color: var(--ink-2); font-size: 13.5px; margin-top: 3px; line-height: 1.55; }

/* ── SUPPORT BAND ──────────────────────────── */
.support {
  background:
    radial-gradient(800px 300px at 80% -40px, rgba(37, 99, 235, 0.12), transparent 70%),
    var(--bg-2);
  border-top: 1px solid var(--line);
}
.support__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 52px 24px;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 40px;
  align-items: center;
}
.support__copy h2 { font-size: 26px; }
.support__copy p { color: var(--muted); margin-top: 10px; font-size: 15px; line-height: 1.6; max-width: 38ch; }
.support__channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.channel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  align-items: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.channel:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.channel__icon { font-size: 24px; }
.channel__title { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.channel__meta { font-size: 12.5px; color: var(--muted); }

/* ── FOOTER ────────────────────────────────── */
.footer { border-top: 1px solid var(--line); background: var(--bg); }
.footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.footer__inner p { font-size: 13px; color: var(--muted); }
.footer__nav { display: flex; gap: 18px; font-size: 13px; }
.footer__nav a { color: var(--muted); transition: color 0.15s; }
.footer__nav a:hover { color: var(--accent); }

/* ── TOAST ─────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 20px);
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 11px 18px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s, transform 0.22s;
  z-index: 80;
  max-width: calc(100vw - 32px);
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ── RESPONSIVE ────────────────────────────── */
@media (max-width: 820px) {
  .topnav { display: none; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .support__inner { grid-template-columns: 1fr; gap: 28px; }
  .hero { padding: 48px 20px 44px; }
}

@media (max-width: 520px) {
  .topbar__inner { padding: 0 16px; gap: 12px; }
  .btn--ghost { display: none; }
  .section { padding: 40px 16px; }
  .split { padding: 0 16px 40px; }
  .cards { grid-template-columns: 1fr; }
  .support__channels { grid-template-columns: 1fr; }
  .support__inner { padding: 40px 16px; }
  .hero h1 { font-size: 28px; }
  .search__field { height: 52px; }
  .search__hint { display: none; }
  .chips { justify-content: flex-start; }
  .footer__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
}

(function () {
  "use strict";

  // ── Searchable index (fictional Nimbus knowledge base) ──────────
  var ARTICLES = [
    { t: "Generating and rotating API keys", c: "API & SDKs", i: "🔑", kw: "api keys token auth rotate secret" },
    { t: "Authenticating with bearer tokens", c: "API & SDKs", i: "🔌", kw: "api auth token bearer header" },
    { t: "Paginating large result sets", c: "API & SDKs", i: "🔌", kw: "api pagination cursor limit offset" },
    { t: "Subscribing to webhooks", c: "Integrations", i: "🧩", kw: "webhooks events payload subscribe callback" },
    { t: "Verifying webhook signatures", c: "Integrations", i: "🧩", kw: "webhooks signature hmac security verify" },
    { t: "Understanding usage-based billing", c: "Account & billing", i: "💳", kw: "billing invoice usage pricing cost plan" },
    { t: "Downloading past invoices", c: "Account & billing", i: "💳", kw: "billing invoices receipts download pdf" },
    { t: "Upgrading or downgrading your plan", c: "Account & billing", i: "💳", kw: "billing plan upgrade downgrade seats" },
    { t: "Configuring SAML SSO with Okta", c: "Security & access", i: "🔐", kw: "sso saml okta security login identity" },
    { t: "Provisioning users with SCIM", c: "Security & access", i: "🔐", kw: "sso scim provisioning users access security" },
    { t: "Reading the audit log", c: "Security & access", i: "🔐", kw: "audit log security events access" },
    { t: "Handling 429 rate-limit responses", c: "Troubleshooting", i: "🛠️", kw: "rate limits 429 throttle retry backoff" },
    { t: "Raising your rate limits", c: "API & SDKs", i: "🔌", kw: "rate limits quota increase throughput" },
    { t: "Debugging deploy failures", c: "Troubleshooting", i: "🛠️", kw: "deploy failure error build troubleshoot" },
    { t: "Fixing connection timeouts", c: "Troubleshooting", i: "🛠️", kw: "timeout connection network troubleshoot" },
    { t: "Deploying Aurora DB to a new region", c: "Getting started", i: "🚀", kw: "aurora db deploy region database start" },
    { t: "Creating your first workspace", c: "Getting started", i: "🚀", kw: "workspace org start setup onboarding" },
    { t: "Inviting teammates to your org", c: "Getting started", i: "🚀", kw: "invite team members seats workspace" },
    { t: "Connecting the Slack integration", c: "Integrations", i: "🧩", kw: "slack integration notifications connect" },
    { t: "Linking a GitHub repository", c: "Integrations", i: "🧩", kw: "github repo integration deploy connect" }
  ];

  var input = document.getElementById("search-input");
  var results = document.getElementById("search-results");
  var activeIndex = -1;
  var current = [];

  // ── Toast helper ────────────────────────────────────────────────
  var toastEl = document.getElementById("toast");
  var toastTimer = null;
  function toast(msg) {
    toastEl.textContent = msg;
    toastEl.classList.add("is-show");
    clearTimeout(toastTimer);
    toastTimer = setTimeout(function () {
      toastEl.classList.remove("is-show");
    }, 2400);
  }

  function escapeHtml(s) {
    return s.replace(/[&<>"]/g, function (ch) {
      return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[ch];
    });
  }

  function highlight(title, q) {
    var safe = escapeHtml(title);
    if (!q) return safe;
    var idx = title.toLowerCase().indexOf(q.toLowerCase());
    if (idx === -1) return safe;
    var end = idx + q.length;
    return escapeHtml(title.slice(0, idx)) +
      "<mark>" + escapeHtml(title.slice(idx, end)) + "</mark>" +
      escapeHtml(title.slice(end));
  }

  function search(q) {
    q = q.trim().toLowerCase();
    if (!q) return [];
    var terms = q.split(/\s+/);
    return ARTICLES
      .map(function (a) {
        var hay = (a.t + " " + a.c + " " + a.kw).toLowerCase();
        var score = 0;
        terms.forEach(function (term) {
          if (a.t.toLowerCase().indexOf(term) !== -1) score += 3;
          else if (hay.indexOf(term) !== -1) score += 1;
        });
        return { a: a, score: score };
      })
      .filter(function (r) { return r.score > 0; })
      .sort(function (x, y) { return y.score - x.score; })
      .slice(0, 6)
      .map(function (r) { return r.a; });
  }

  function render(list, q) {
    current = list;
    activeIndex = -1;
    if (!q.trim()) {
      closeResults();
      return;
    }
    if (!list.length) {
      results.innerHTML =
        '<li class="result result--empty" role="option">' +
        "No articles match &ldquo;" + escapeHtml(q.trim()) + "&rdquo;. Try another keyword." +
        "</li>";
      openResults();
      return;
    }
    results.innerHTML = list.map(function (a, i) {
      return '<li role="option" id="result-' + i + '" data-i="' + i + '">' +
        '<div class="result">' +
          '<span class="result__icon" aria-hidden="true">' + a.i + "</span>" +
          '<span class="result__body">' +
            '<span class="result__title">' + highlight(a.t, q.trim()) + "</span>" +
            '<span class="result__cat">' + escapeHtml(a.c) + "</span>" +
          "</span>" +
          '<span class="result__go" aria-hidden="true">↵</span>' +
        "</div>" +
      "</li>";
    }).join("");
    openResults();
  }

  function openResults() {
    results.hidden = false;
    input.setAttribute("aria-expanded", "true");
  }
  function closeResults() {
    results.hidden = true;
    results.innerHTML = "";
    input.setAttribute("aria-expanded", "false");
    input.removeAttribute("aria-activedescendant");
    activeIndex = -1;
  }

  function setActive(i) {
    var nodes = results.querySelectorAll(".result");
    nodes.forEach(function (n) { n.classList.remove("is-active"); });
    if (i >= 0 && i < nodes.length) {
      nodes[i].classList.add("is-active");
      input.setAttribute("aria-activedescendant", "result-" + i);
      nodes[i].scrollIntoView({ block: "nearest" });
    }
  }

  function openArticle(a) {
    closeResults();
    toast("Opening: " + a.t);
  }

  // ── Input events ────────────────────────────────────────────────
  input.addEventListener("input", function () {
    render(search(input.value), input.value);
  });

  input.addEventListener("keydown", function (e) {
    if (results.hidden && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
      render(search(input.value), input.value);
      return;
    }
    if (e.key === "ArrowDown") {
      e.preventDefault();
      if (!current.length) return;
      activeIndex = (activeIndex + 1) % current.length;
      setActive(activeIndex);
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      if (!current.length) return;
      activeIndex = (activeIndex - 1 + current.length) % current.length;
      setActive(activeIndex);
    } else if (e.key === "Enter") {
      if (activeIndex >= 0 && current[activeIndex]) {
        e.preventDefault();
        openArticle(current[activeIndex]);
      } else if (input.value.trim()) {
        toast("Searching for “" + input.value.trim() + "”…");
      }
    } else if (e.key === "Escape") {
      if (!results.hidden) { closeResults(); }
      else { input.blur(); }
    }
  });

  results.addEventListener("click", function (e) {
    var li = e.target.closest("[data-i]");
    if (!li) return;
    var a = current[parseInt(li.getAttribute("data-i"), 10)];
    if (a) openArticle(a);
  });

  results.addEventListener("mousemove", function (e) {
    var li = e.target.closest("[data-i]");
    if (!li) return;
    var i = parseInt(li.getAttribute("data-i"), 10);
    if (i !== activeIndex) { activeIndex = i; setActive(i); }
  });

  // Close on outside click
  document.addEventListener("click", function (e) {
    if (!e.target.closest(".search")) closeResults();
  });

  // ── "/" focuses search ──────────────────────────────────────────
  document.addEventListener("keydown", function (e) {
    if (e.key === "/" && document.activeElement !== input &&
        !/^(INPUT|TEXTAREA)$/.test(document.activeElement.tagName)) {
      e.preventDefault();
      input.focus();
    }
  });

  // ── Popular-search chips run a demo search ──────────────────────
  document.querySelectorAll(".chip").forEach(function (chip) {
    chip.addEventListener("click", function () {
      var q = chip.getAttribute("data-query");
      input.value = q;
      input.focus();
      render(search(q), q);
      toast("Running search: “" + q + "”");
    });
  });

  // ── Topic cards ─────────────────────────────────────────────────
  document.querySelectorAll(".card").forEach(function (card) {
    card.addEventListener("click", function (e) {
      e.preventDefault();
      toast("Browsing topic: " + card.querySelector(".card__title").textContent);
    });
  });

  // ── Popular article rows ────────────────────────────────────────
  document.querySelectorAll("[data-article]").forEach(function (a) {
    a.addEventListener("click", function (e) {
      e.preventDefault();
      toast("Opening: " + a.querySelector(".article__title").textContent);
    });
  });

  // ── Demo links (buttons, channels) ──────────────────────────────
  var DEMO = {
    signin: "Sign-in is disabled in this demo.",
    guide: "Launching the Getting Started guide…",
    chat: "Live chat — a support agent would join here.",
    email: "Opening your mail client to [email protected]…",
    community: "Heading to the community forum…"
  };
  document.querySelectorAll("[data-demo]").forEach(function (el) {
    el.addEventListener("click", function (e) {
      e.preventDefault();
      toast(DEMO[el.getAttribute("data-demo")] || "Demo action");
    });
  });

  // Contact-us button (no data-demo) → support section anchor already works.
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Nimbus Docs — Help Center</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&family=Source+Serif+4:opsz,[email protected],400;8..60,500;8..60,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <a class="skip-link" href="#main">Skip to content</a>

  <header class="topbar">
    <div class="topbar__inner">
      <a class="brand" href="#" aria-label="Nimbus Docs home">
        <span class="brand__mark" aria-hidden="true">◆</span>
        <span class="brand__name">Nimbus<span class="brand__sub">Docs</span></span>
      </a>
      <nav class="topnav" aria-label="Primary">
        <a href="#topics">Topics</a>
        <a href="#popular">Popular</a>
        <a href="#start">Get started</a>
        <a href="#support">Support</a>
      </nav>
      <div class="topbar__actions">
        <a class="btn btn--ghost" href="#" data-demo="signin">Sign in</a>
        <a class="btn btn--primary" href="#support">Contact us</a>
      </div>
    </div>
  </header>

  <main id="main">
    <!-- HERO -->
    <section class="hero" aria-labelledby="hero-title">
      <div class="hero__inner">
        <p class="hero__eyebrow">Nimbus Cloud · Help Center</p>
        <h1 id="hero-title">How can we help?</h1>
        <p class="hero__lede">Search 480+ guides, API references, and troubleshooting articles for the Nimbus platform.</p>

        <div class="search" role="search">
          <div class="search__field">
            <svg class="search__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M11 4a7 7 0 1 0 4.2 12.6l4.1 4.1 1.4-1.4-4.1-4.1A7 7 0 0 0 11 4Zm0 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10Z"/></svg>
            <input
              id="search-input"
              type="text"
              autocomplete="off"
              spellcheck="false"
              placeholder="Search for articles, e.g. “reset API key”"
              aria-label="Search the knowledge base"
              aria-expanded="false"
              aria-controls="search-results"
              aria-autocomplete="list"
              role="combobox"
            />
            <kbd class="search__hint" aria-hidden="true">/</kbd>
          </div>
          <ul id="search-results" class="search__results" role="listbox" aria-label="Search results" hidden></ul>
        </div>

        <div class="chips" aria-label="Popular searches">
          <span class="chips__label">Popular:</span>
          <button class="chip" data-query="API keys">API keys</button>
          <button class="chip" data-query="billing">Billing &amp; invoices</button>
          <button class="chip" data-query="SSO">SSO setup</button>
          <button class="chip" data-query="rate limits">Rate limits</button>
          <button class="chip" data-query="webhooks">Webhooks</button>
        </div>
      </div>
    </section>

    <!-- TOPIC CARDS -->
    <section id="topics" class="section" aria-labelledby="topics-title">
      <div class="section__head">
        <h2 id="topics-title">Browse by topic</h2>
        <p>Pick a category to explore step-by-step guides and reference docs.</p>
      </div>

      <div class="cards" id="topic-cards">
        <a class="card" href="#" data-topic="Getting started">
          <span class="card__icon card__icon--blue" aria-hidden="true">🚀</span>
          <h3 class="card__title">Getting started</h3>
          <p class="card__desc">Create your first project, deploy Aurora DB, and ship in minutes.</p>
          <span class="card__count">38 articles</span>
        </a>
        <a class="card" href="#" data-topic="Account &amp; billing">
          <span class="card__icon card__icon--green" aria-hidden="true">💳</span>
          <h3 class="card__title">Account &amp; billing</h3>
          <p class="card__desc">Plans, invoices, seats, and how usage-based pricing is calculated.</p>
          <span class="card__count">52 articles</span>
        </a>
        <a class="card" href="#" data-topic="API &amp; SDKs">
          <span class="card__icon card__icon--violet" aria-hidden="true">🔌</span>
          <h3 class="card__title">API &amp; SDKs</h3>
          <p class="card__desc">REST &amp; GraphQL endpoints, auth, pagination, and official clients.</p>
          <span class="card__count">74 articles</span>
        </a>
        <a class="card" href="#" data-topic="Security &amp; access">
          <span class="card__icon card__icon--amber" aria-hidden="true">🔐</span>
          <h3 class="card__title">Security &amp; access</h3>
          <p class="card__desc">SSO, SCIM provisioning, audit logs, and role-based permissions.</p>
          <span class="card__count">41 articles</span>
        </a>
        <a class="card" href="#" data-topic="Integrations">
          <span class="card__icon card__icon--pink" aria-hidden="true">🧩</span>
          <h3 class="card__title">Integrations</h3>
          <p class="card__desc">Connect Slack, GitHub, Project Nimbus webhooks, and Zapier.</p>
          <span class="card__count">29 articles</span>
        </a>
        <a class="card" href="#" data-topic="Troubleshooting">
          <span class="card__icon card__icon--red" aria-hidden="true">🛠️</span>
          <h3 class="card__title">Troubleshooting</h3>
          <p class="card__desc">Diagnose deploy failures, 429 errors, and connection timeouts.</p>
          <span class="card__count">63 articles</span>
        </a>
      </div>
    </section>

    <!-- POPULAR + START -->
    <div class="split">
      <section id="popular" class="section section--flush" aria-labelledby="popular-title">
        <div class="section__head">
          <h2 id="popular-title">Popular articles</h2>
          <p>The guides our customers open most this week.</p>
        </div>
        <ul class="articles" id="popular-list">
          <li class="article">
            <a href="#" data-article>
              <span class="article__rank">01</span>
              <span class="article__body">
                <span class="article__title">Generating and rotating API keys</span>
                <span class="article__meta">API &amp; SDKs · 4 min read · Updated 3 days ago</span>
              </span>
              <span class="article__views">12.4k</span>
            </a>
          </li>
          <li class="article">
            <a href="#" data-article>
              <span class="article__rank">02</span>
              <span class="article__body">
                <span class="article__title">Understanding usage-based billing</span>
                <span class="article__meta">Account &amp; billing · 6 min read · Updated 1 wk ago</span>
              </span>
              <span class="article__views">9.8k</span>
            </a>
          </li>
          <li class="article">
            <a href="#" data-article>
              <span class="article__rank">03</span>
              <span class="article__body">
                <span class="article__title">Configuring SAML SSO with Okta</span>
                <span class="article__meta">Security &amp; access · 8 min read · Updated 2 wk ago</span>
              </span>
              <span class="article__views">7.1k</span>
            </a>
          </li>
          <li class="article">
            <a href="#" data-article>
              <span class="article__rank">04</span>
              <span class="article__body">
                <span class="article__title">Handling 429 rate-limit responses</span>
                <span class="article__meta">Troubleshooting · 5 min read · Updated 5 days ago</span>
              </span>
              <span class="article__views">6.3k</span>
            </a>
          </li>
          <li class="article">
            <a href="#" data-article>
              <span class="article__rank">05</span>
              <span class="article__body">
                <span class="article__title">Deploying Aurora DB to a new region</span>
                <span class="article__meta">Getting started · 7 min read · Updated 4 days ago</span>
              </span>
              <span class="article__views">5.9k</span>
            </a>
          </li>
        </ul>
      </section>

      <aside id="start" class="getstarted" aria-labelledby="start-title">
        <h2 id="start-title">Getting started path</h2>
        <p class="getstarted__lede">New to Nimbus? Follow these four steps to your first deploy.</p>
        <ol class="path">
          <li class="path__step">
            <span class="path__num">1</span>
            <div>
              <h3>Create a workspace</h3>
              <p>Spin up an org and invite your team.</p>
            </div>
          </li>
          <li class="path__step">
            <span class="path__num">2</span>
            <div>
              <h3>Provision Aurora DB</h3>
              <p>Pick a region and your first database boots in ~40s.</p>
            </div>
          </li>
          <li class="path__step">
            <span class="path__num">3</span>
            <div>
              <h3>Add an API key</h3>
              <p>Authenticate the SDK and run a test query.</p>
            </div>
          </li>
          <li class="path__step">
            <span class="path__num">4</span>
            <div>
              <h3>Deploy Project Nimbus</h3>
              <p>Push to <code>main</code> and watch it go live.</p>
            </div>
          </li>
        </ol>
        <a class="btn btn--primary btn--block" href="#" data-demo="guide">Open the guide</a>
      </aside>
    </div>
  </main>

  <!-- SUPPORT FOOTER BAND -->
  <section id="support" class="support" aria-labelledby="support-title">
    <div class="support__inner">
      <div class="support__copy">
        <h2 id="support-title">Still need a hand?</h2>
        <p>Our support team replies in under 2 hours on business days. The Verdant Empire community forum is open 24/7.</p>
      </div>
      <div class="support__channels">
        <a class="channel" href="#" data-demo="chat">
          <span class="channel__icon" aria-hidden="true">💬</span>
          <span class="channel__title">Live chat</span>
          <span class="channel__meta">Avg. wait 2 min</span>
        </a>
        <a class="channel" href="#" data-demo="email">
          <span class="channel__icon" aria-hidden="true">✉️</span>
          <span class="channel__title">Email support</span>
          <span class="channel__meta">[email protected]</span>
        </a>
        <a class="channel" href="#" data-demo="community">
          <span class="channel__icon" aria-hidden="true">👥</span>
          <span class="channel__title">Community forum</span>
          <span class="channel__meta">18k members</span>
        </a>
      </div>
    </div>
  </section>

  <footer class="footer">
    <div class="footer__inner">
      <p>© 2026 Nimbus Cloud, Inc. · Illustrative demo, fictional data.</p>
      <nav class="footer__nav" aria-label="Footer">
        <a href="#">Status</a>
        <a href="#">Changelog</a>
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
      </nav>
    </div>
  </footer>

  <div id="toast" class="toast" role="status" aria-live="polite"></div>

  <script src="script.js"></script>
</body>
</html>

Knowledge-Base Home / Portal

A clean, well-organized help-center landing page for the fictional Nimbus Cloud platform. The hero centers a large “How can we help?” search field with a row of popular-search chips beneath it. Below, a responsive grid of topic cards (each with an icon, description, and live article count) sits above a ranked “popular articles” list, a four-step “getting started” path rail, and a support footer band offering live chat, email, and community channels.

The search bar is the centerpiece: typing live-filters a fictional index of API, billing, security, and troubleshooting guides and previews up to six matches in a dropdown, with the typed query highlighted in each result. The dropdown is a full ARIA combobox — arrow keys move the active option, Enter opens it, Esc closes, and pressing / anywhere on the page focuses the field. The popular chips drop their term into the search and run a demo query; topic cards hover-lift and announce navigation through a small toast helper.

Everything is vanilla HTML, CSS, and JavaScript with no dependencies. The layout uses semantic landmarks, visible focus rings, and WCAG-AA contrast, and collapses gracefully down to ~360px — the top nav hides, the card grid stacks to a single column, and the support channels reflow.

Illustrative UI only — fictional articles, products, and data.