Level Sensors | 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; }
.stagger.is-visible > *:nth-child(n+5) { opacity:1; transform:none; transition-delay:0.20s; }
@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 Level Sensors
Level Sensors
Non-contact radar and ultrasonic level sensing for tanks, sumps and remote sites across Malaysia — from wired 4–20mA transmitters to solar-friendly IoT radar and handheld inventory scanners, all configurable through the uPyxis app.
(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));
})();
