chore: switch iqon live design

2026-05-20 18:43:18 +03:00
parent b5144a501b
commit 23bd3925df
5 changed files with 673 additions and 420 deletions
@@ -8,26 +8,27 @@
      name="description"
      content="IQON helps organizations align technology decisions with measurable business outcomes through strategy, architecture, and transformation consulting."
    />
+    <meta name="theme-color" content="#09090b" />
    <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=Space+Grotesk:wght@400;500;700&family=Sora:wght@300;400;600;700;800&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Sora:wght@300;400;600;700;800&display=swap"
      rel="stylesheet"
    />
-    <link rel="stylesheet" href="./styles.css?v=20260520-qa7" />
+    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <a class="skip-link" href="#main">Skip to content</a>
-    <header class="topbar">
-      <a class="brand" href="/">
+    <header class="topbar" id="topbar">
+      <a class="brand" href="#">
        <svg class="brand-mark" viewBox="0 0 44 44" aria-hidden="true">
-          <circle cx="22" cy="22" r="21" fill="#0A0A0A" stroke="#0A0A0A" stroke-width="1"></circle>
+          <circle cx="22" cy="22" r="21" fill="#09090b" stroke="#09090b" stroke-width="1"></circle>
          <circle cx="22" cy="22" r="20" stroke="#FFD000" stroke-width="1.5" fill="none"></circle>
          <ellipse cx="22" cy="22" rx="13" ry="12" fill="#FFD000"></ellipse>
          <ellipse cx="22" cy="22" rx="13" ry="12" fill="url(#eyeGlow)"></ellipse>
          <path
            d="M22 10.5 C19.2 14 18.2 18 18.2 22 C18.2 26 19.2 30 22 33.5 C24.8 30 25.8 26 25.8 22 C25.8 18 24.8 14 22 10.5Z"
-            fill="#0A0A0A"
+            fill="#09090b"
          ></path>
          <ellipse
            cx="17"
@@ -49,13 +50,12 @@
        <span class="brand-name">iqon</span>
      </a>
      <nav class="main-nav" aria-label="Primary">
-        <a href="/" aria-current="page">Home</a>
-        <a href="/services/">Services</a>
-        <a href="/industries/">Industries</a>
-        <a href="/case-studies/">Cases</a>
-        <a href="/contact/">Contact</a>
+        <a href="#approach">How's Business?</a>
+        <a href="#services">Services & Solutions</a>
+        <a href="#cases">Case Studies</a>
+        <a href="#contacts">Contacts</a>
      </nav>
-      <a class="nav-cta" href="/contact/">Book Discovery Call</a>
+      <a class="nav-cta" href="#contacts">Book Discovery Call</a>
    </header>

    <main id="main">
@@ -68,8 +68,11 @@
            predictable outcomes for leadership teams.
          </p>
          <div class="hero-actions">
-            <a class="btn btn-solid" href="/contact/">Start a conversation</a>
-            <a class="btn btn-outline" href="/services/">Explore services</a>
+            <a class="btn btn-solid" href="#contacts">
+              <span>Start a conversation</span>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+            </a>
+            <a class="btn btn-outline" href="#services">Explore services</a>
          </div>
        </div>
        <div class="hero-cloud reveal">
@@ -84,29 +87,29 @@

      <section class="service-strip" id="services">
        <article class="service-tile reveal">
+          <span class="service-num">01</span>
          <h2>Enterprise Management & Decision Support</h2>
          <p>Executive visibility, governance rhythm, and strategic decision intelligence.</p>
-          <a href="/services/data-analytics/">Explore data and decision support</a>
        </article>
        <article class="service-tile reveal">
+          <span class="service-num">02</span>
          <h2>Industry Specific Services</h2>
          <p>Domain-led delivery models for regulated and high-complexity sectors.</p>
-          <a href="/industries/">View industry experience</a>
        </article>
        <article class="service-tile reveal">
+          <span class="service-num">03</span>
          <h2>IS Advisory Services</h2>
          <p>Architecture guidance that links platform choices to growth goals.</p>
-          <a href="/services/strategy-governance/">Explore advisory services</a>
        </article>
        <article class="service-tile reveal">
+          <span class="service-num">04</span>
          <h2>IT Infrastructure Services</h2>
          <p>Resilient, right-sized infrastructure with cost and risk under control.</p>
-          <a href="/services/infrastructure-cloud/">Explore infrastructure services</a>
        </article>
        <article class="service-tile reveal">
+          <span class="service-num">05</span>
          <h2>Mobility Consulting Services</h2>
          <p>Modern digital experiences and field-ready operating models.</p>
-          <a href="/services/enterprise-architecture/">Explore transformation services</a>
        </article>
      </section>

@@ -176,7 +179,10 @@
      <section class="cta-band">
        <h3>Need clarity on your next IT move?</h3>
        <p>We can turn ambiguity into a practical roadmap in a two-week advisory sprint.</p>
-        <a class="btn btn-dark" href="/contact/">Talk to IQON</a>
+        <a class="btn btn-solid" href="#contacts">
+          <span>Talk to IQON</span>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+        </a>
      </section>
    </main>

@@ -207,11 +213,11 @@
        </section>
      </div>
      <div class="footer-bottom">
-          <p><a href="/">Home</a> | <a href="/services/">Services</a> | <a href="/case-studies/">Cases</a> | <a href="/contact/">Contact</a></p>
+        <p>Home | Services & Solutions | Case Studies | Contacts</p>
        <p>2011-2026 Copyright IQON. All Rights Reserved.</p>
      </div>
    </footer>

-    <script src="./script.js?v=20260520-qa7"></script>
+    <script src="./script.js"></script>
  </body>
 </html>
@@ -138,6 +138,20 @@ Final signal:
 - `/homepage/` redirected to `/`.
 - `/services-solutions/` redirected to `/services/`.

+## Live Redesign Switch
+
+After owner feedback that the first static upload was not the intended design, live was rolled back to the WordPress entrypoint first, then switched to the `new_redesign` visual direction.
+
+Observed signal:
+
+- `https://iqon.com/` returns the dark `new_redesign` homepage.
+- Live HTML contains `theme-color` `#09090b`.
+- Live HTML contains `.topbar`, `.hero-cloud`, and `.skip-link`.
+- `/styles.css` returns `200 text/css`.
+- `/script.js` returns `200 application/javascript`.
+- `scripts/iqon-phase1-verify.sh https://iqon.com` returns `[OK]`.
+- Headless screenshot captured at `reports/screenshots/2026-05-20/live-new-redesign-home.png`.
+
 ---

 *Created: 20 May 2026*
@@ -1,49 +1,115 @@
+/* ===== IQON — Interactive Scripts ===== */
+
+// ——— Scroll Reveal ———
 const reveals = document.querySelectorAll(".reveal");

-const observer =
-  "IntersectionObserver" in window
-    ? new IntersectionObserver(
+const revealObserver = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("on");
-              observer.unobserve(entry.target);
+        revealObserver.unobserve(entry.target);
      }
    });
  },
-        { threshold: 0.18 }
-      )
-    : null;
+  { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
+);

-reveals.forEach((item, idx) => {
-  item.style.transitionDelay = `${Math.min(idx * 45, 280)}ms`;
-  if (observer) {
-    observer.observe(item);
-  } else {
-    item.classList.add("on");
-  }
+reveals.forEach((item) => {
+  revealObserver.observe(item);
 });

+// ——— Active Nav Section Tracking ———
 const navLinks = document.querySelectorAll(".main-nav a");
+const sectionIds = ["approach", "services", "cases", "contacts"];

-if ("IntersectionObserver" in window) {
-  const sectionObserver = new IntersectionObserver(
+const sectionObserver = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        navLinks.forEach((link) => {
-            link.classList.toggle("active", link.getAttribute("href") === `#${entry.target.id}`);
+          link.classList.toggle(
+            "active",
+            link.getAttribute("href") === `#${entry.target.id}`
+          );
        });
      }
    });
  },
-    { threshold: 0.55 }
-  );
+  { threshold: 0.35, rootMargin: "-80px 0px 0px 0px" }
+);

-  ["approach", "services", "cases", "contacts"].forEach((id) => {
+sectionIds.forEach((id) => {
  const section = document.getElementById(id);
  if (section) {
    sectionObserver.observe(section);
  }
-  });
+});
+
+// ——— Navbar Shrink on Scroll ———
+const topbar = document.getElementById("topbar") || document.querySelector(".topbar");
+let lastScrollY = 0;
+let ticking = false;
+
+function handleScroll() {
+  if (!topbar) {
+    ticking = false;
+    return;
+  }
+  const scrolled = window.scrollY > 60;
+  topbar.classList.toggle("scrolled", scrolled);
+  ticking = false;
 }
+
+window.addEventListener("scroll", () => {
+  if (!ticking) {
+    requestAnimationFrame(handleScroll);
+    ticking = true;
+  }
+});
+
+// ——— Smooth Scroll for Anchor Links ———
+document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
+  anchor.addEventListener("click", function (e) {
+    const target = document.querySelector(this.getAttribute("href"));
+    if (target) {
+      e.preventDefault();
+      const offset = (topbar ? topbar.offsetHeight : 0) + 12;
+      const top = target.getBoundingClientRect().top + window.scrollY - offset;
+      window.scrollTo({ top, behavior: "smooth" });
+    }
+  });
+});
+
+// ——— Chart Bar Animation ———
+const chartBox = document.querySelector(".chart-box");
+if (chartBox) {
+  const chartObserver = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const bars = chartBox.querySelectorAll("span");
+          bars.forEach((bar, i) => {
+            bar.style.transition = `height 0.8s ${0.1 + i * 0.08}s cubic-bezier(0.34, 1.56, 0.64, 1)`;
+            bar.style.height = bar.style.height; // trigger reflow
+          });
+          chartObserver.unobserve(entry.target);
+        }
+      });
+    },
+    { threshold: 0.5 }
+  );
+  chartObserver.observe(chartBox);
+}
+
+// ——— Service Tile Hover Glow ———
+const serviceTiles = document.querySelectorAll(".service-tile");
+serviceTiles.forEach((tile) => {
+  tile.addEventListener("mousemove", (e) => {
+    const rect = tile.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    tile.style.setProperty("--mouse-x", `${x}px`);
+    tile.style.setProperty("--mouse-y", `${y}px`);
+  });
+});