Analysers | Autoflo Technology
/* ===== AUTOFLO TEMPLATE 3 — SHARED DESIGN SYSTEM =====
Injected once into the Hero section's block on every Template 3
product-category page. CSS cascades across all 5 Elementor Custom-HTML
widgets on the page (they render as raw markup in the same document, not
iframes), so this block must NOT be repeated in Category Overview,
Context Strip, Product Grid, or CTA — those sections should only define
their own unique classes (e.g. .cat-intro, .context-strip, .product-card,
.footer-cta).
Do not edit by hand without also updating the copy referenced in memory
(feedback_token_efficiency.md). */
:root {
--accent: #800059;
--accent-dk: #5A003E;
--accent-tint: #FAEEF5;
--cta-bg: #FEBE4F;
--cta-text: #331A00;
--dark-bg: #2A001D;
--bg: #FFFFFF;
--bg-section: #F8F9FA;
--bg-alt: #F3F4F6;
--text: #111827;
--muted: #4B5563;
--border: #E5E7EB;
--container: 1240px;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; width: 100%; margin: 0; padding: 0; }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; overflow-x: clip; line-height: 1.7; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 40px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; border-radius: 4px; padding: 13px 28px; transition: all 0.3s var(--ease); white-space: nowrap; cursor: pointer; position: relative; overflow: hidden; font-family: inherit; border: none; }
.btn::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%); transform: skewX(-25deg); transition: left 0.6s var(--ease); pointer-events: none; }
.btn:hover::after { left: 150%; }
.btn-accent { background: linear-gradient(135deg, #ffd080 0%, #FEBE4F 100%); color: var(--cta-text); box-shadow: 0 4px 12px rgba(254,190,79,0.2); border: 1px solid rgba(255,255,255,0.3); }
.btn-accent:hover { background: linear-gradient(135deg, #ffe9a8 0%, #ffd080 100%); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(254,190,79,0.3); }
.btn-outline-dark { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.35); }
.btn-outline-dark:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.6); transform: translateY(-2px); }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.65s ease, transform 0.65s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.stagger.is-visible > *:nth-child(1) { opacity:1; transform:none; transition-delay:0.04s; }
.stagger.is-visible > *:nth-child(2) { opacity:1; transform:none; transition-delay:0.08s; }
.stagger.is-visible > *:nth-child(3) { opacity:1; transform:none; transition-delay:0.12s; }
.stagger.is-visible > *:nth-child(4) { opacity:1; transform:none; transition-delay:0.16s; }
@media (max-width: 1024px) { .container { padding: 0 24px; } }
/* ===== HERO-SPECIFIC ===== */
.page-hero { background: var(--dark-bg); padding: 130px 0 0; position: relative; overflow: hidden; min-height: 550px; }
.page-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(42,0,29,0.95) 0%, rgba(128,0,89,0.75) 100%); }
.page-hero-inner { position: relative; z-index: 2; padding-bottom: 0; }
.breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 13px; color: rgba(255,255,255,0.45); flex-wrap: wrap; }
.breadcrumb a { color: rgba(255,255,255,0.45); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--cta-bg); }
.breadcrumb-sep { color: rgba(255,255,255,0.25); }
.page-hero-label { display: block; color: var(--cta-bg); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; }
.page-hero h1 { font-family: 'Outfit', sans-serif; font-size: 56px; font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1.08; margin-bottom: 20px; }
.page-hero-desc { font-size: 17px; color: rgba(255,255,255,0.7); line-height: 1.65; max-width: 620px; margin-bottom: 40px; }
@media (max-width: 767px) { .page-hero h1 { font-size: 40px; } }
Control Technologies · Pyxis Online Analysers
Analysers
Turn-key panel analysers for continuous, real-time monitoring — from data centre coolant loops to cooling towers, boiler feedwater and pump-free colorimetric chemistry. Pyxis online analysers for water treatment sites across Malaysia.
(function () {
const obs = new IntersectionObserver(entries => {
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('is-visible'); obs.unobserve(e.target); } });
}, { threshold: 0.08 });
document.querySelectorAll('.reveal, .stagger').forEach(el => obs.observe(el));
})();
