sergey_v/iqon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: switch iqon live design

Browse Source
This commit is contained in:
Sergei Vasilev
2026-05-20 18:43:18 +03:00
parent b5144a501b
commit 23bd3925df
5 changed files with 673 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+28 -22
View File
@@ -8,26 +8,27 @@
name="description" name="description"
content="IQON helps organizations align technology decisions with measurable business outcomes through strategy, architecture, and transformation consulting." 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.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link <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" rel="stylesheet"
/> />
<link rel="stylesheet" href="./styles.css?v=20260520-qa7" /> <link rel="stylesheet" href="./styles.css" />
</head> </head>
<body> <body>
<a class="skip-link" href="#main">Skip to content</a> <a class="skip-link" href="#main">Skip to content</a>
<header class="topbar"> <header class="topbar" id="topbar">
<a class="brand" href="/"> <a class="brand" href="#">
<svg class="brand-mark" viewBox="0 0 44 44" aria-hidden="true"> <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> <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="#FFD000"></ellipse>
<ellipse cx="22" cy="22" rx="13" ry="12" fill="url(#eyeGlow)"></ellipse> <ellipse cx="22" cy="22" rx="13" ry="12" fill="url(#eyeGlow)"></ellipse>
<path <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" 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> ></path>
<ellipse <ellipse
cx="17" cx="17"
@@ -49,13 +50,12 @@
<span class="brand-name">iqon</span> <span class="brand-name">iqon</span>
</a> </a>
<nav class="main-nav" aria-label="Primary"> <nav class="main-nav" aria-label="Primary">
<a href="/" aria-current="page">Home</a> <a href="#approach">How's Business?</a>
<a href="/services/">Services</a> <a href="#services">Services & Solutions</a>
<a href="/industries/">Industries</a> <a href="#cases">Case Studies</a>
<a href="/case-studies/">Cases</a> <a href="#contacts">Contacts</a>
<a href="/contact/">Contact</a>
</nav> </nav>
<a class="nav-cta" href="/contact/">Book Discovery Call</a> <a class="nav-cta" href="#contacts">Book Discovery Call</a>
</header> </header>
<main id="main"> <main id="main">
@@ -68,8 +68,11 @@
predictable outcomes for leadership teams. predictable outcomes for leadership teams.
</p> </p>
<div class="hero-actions"> <div class="hero-actions">
<a class="btn btn-solid" href="/contact/">Start a conversation</a> <a class="btn btn-solid" href="#contacts">
<a class="btn btn-outline" href="/services/">Explore services</a> <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> </div>
<div class="hero-cloud reveal"> <div class="hero-cloud reveal">
@@ -84,29 +87,29 @@
<section class="service-strip" id="services"> <section class="service-strip" id="services">
<article class="service-tile reveal"> <article class="service-tile reveal">
<span class="service-num">01</span>
<h2>Enterprise Management & Decision Support</h2> <h2>Enterprise Management & Decision Support</h2>
<p>Executive visibility, governance rhythm, and strategic decision intelligence.</p> <p>Executive visibility, governance rhythm, and strategic decision intelligence.</p>
<a href="/services/data-analytics/">Explore data and decision support</a>
</article> </article>
<article class="service-tile reveal"> <article class="service-tile reveal">
<span class="service-num">02</span>
<h2>Industry Specific Services</h2> <h2>Industry Specific Services</h2>
<p>Domain-led delivery models for regulated and high-complexity sectors.</p> <p>Domain-led delivery models for regulated and high-complexity sectors.</p>
<a href="/industries/">View industry experience</a>
</article> </article>
<article class="service-tile reveal"> <article class="service-tile reveal">
<span class="service-num">03</span>
<h2>IS Advisory Services</h2> <h2>IS Advisory Services</h2>
<p>Architecture guidance that links platform choices to growth goals.</p> <p>Architecture guidance that links platform choices to growth goals.</p>
<a href="/services/strategy-governance/">Explore advisory services</a>
</article> </article>
<article class="service-tile reveal"> <article class="service-tile reveal">
<span class="service-num">04</span>
<h2>IT Infrastructure Services</h2> <h2>IT Infrastructure Services</h2>
<p>Resilient, right-sized infrastructure with cost and risk under control.</p> <p>Resilient, right-sized infrastructure with cost and risk under control.</p>
<a href="/services/infrastructure-cloud/">Explore infrastructure services</a>
</article> </article>
<article class="service-tile reveal"> <article class="service-tile reveal">
<span class="service-num">05</span>
<h2>Mobility Consulting Services</h2> <h2>Mobility Consulting Services</h2>
<p>Modern digital experiences and field-ready operating models.</p> <p>Modern digital experiences and field-ready operating models.</p>
<a href="/services/enterprise-architecture/">Explore transformation services</a>
</article> </article>
</section> </section>
@@ -176,7 +179,10 @@
<section class="cta-band"> <section class="cta-band">
<h3>Need clarity on your next IT move?</h3> <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> <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> </section>
</main> </main>
@@ -207,11 +213,11 @@
</section> </section>
</div> </div>
<div class="footer-bottom"> <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> <p>2011-2026 Copyright IQON. All Rights Reserved.</p>
</div> </div>
</footer> </footer>
<script src="./script.js?v=20260520-qa7"></script> <script src="./script.js"></script>
</body> </body>
</html> </html>
reports/deployment-readiness-2026-05-20.md
+14
View File
@@ -138,6 +138,20 @@ Final signal:
- `/homepage/` redirected to `/`. - `/homepage/` redirected to `/`.
- `/services-solutions/` redirected to `/services/`. - `/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* *Created: 20 May 2026*
reports/screenshots/2026-05-20/live-new-redesign-home.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 734 KiB

script.js
+99 -33
View File
@@ -1,49 +1,115 @@
/* ===== IQON — Interactive Scripts ===== */
// ——— Scroll Reveal ———
const reveals = document.querySelectorAll(".reveal"); const reveals = document.querySelectorAll(".reveal");
const observer = const revealObserver = new IntersectionObserver(
"IntersectionObserver" in window (entries) => {
? new IntersectionObserver( entries.forEach((entry) => {
(entries) => { if (entry.isIntersecting) {
entries.forEach((entry) => { entry.target.classList.add("on");
if (entry.isIntersecting) { revealObserver.unobserve(entry.target);
entry.target.classList.add("on"); }
observer.unobserve(entry.target); });
} },
}); { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
}, );
{ threshold: 0.18 }
)
: null;
reveals.forEach((item, idx) => { reveals.forEach((item) => {
item.style.transitionDelay = `${Math.min(idx * 45, 280)}ms`; revealObserver.observe(item);
if (observer) { });
observer.observe(item);
} else { // ——— Active Nav Section Tracking ———
item.classList.add("on"); const navLinks = document.querySelectorAll(".main-nav a");
const sectionIds = ["approach", "services", "cases", "contacts"];
const sectionObserver = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
navLinks.forEach((link) => {
link.classList.toggle(
"active",
link.getAttribute("href") === `#${entry.target.id}`
);
});
}
});
},
{ threshold: 0.35, rootMargin: "-80px 0px 0px 0px" }
);
sectionIds.forEach((id) => {
const section = document.getElementById(id);
if (section) {
sectionObserver.observe(section);
} }
}); });
const navLinks = document.querySelectorAll(".main-nav a"); // ——— Navbar Shrink on Scroll ———
const topbar = document.getElementById("topbar") || document.querySelector(".topbar");
let lastScrollY = 0;
let ticking = false;
if ("IntersectionObserver" in window) { function handleScroll() {
const sectionObserver = new IntersectionObserver( 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) => {
entries.forEach((entry) => { entries.forEach((entry) => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
navLinks.forEach((link) => { const bars = chartBox.querySelectorAll("span");
link.classList.toggle("active", link.getAttribute("href") === `#${entry.target.id}`); 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.55 } { threshold: 0.5 }
); );
chartObserver.observe(chartBox);
["approach", "services", "cases", "contacts"].forEach((id) => {
const section = document.getElementById(id);
if (section) {
sectionObserver.observe(section);
}
});
} }
// ——— 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`);
});
});
styles.css
+532 -365
View File
File diff suppressed because it is too large Load Diff