SMART INDUSTRY : FAB

/* ══════════════════════════════════════════════════════════════ HERO VISUAL — SMART ASSETS PAGE · Four Data (dark background) ══════════════════════════════════════════════════════════════ */ .fda-hero-visual{ --fd-blue:#1BA1DC; --fd-blue-lit:#3CBBEE; --fd-blue-soft:#85D1F4; --fd-amber:#F5B942; --fd-green:#34D399; --fd-surface:rgba(16,38,58,.72); --fd-stroke:rgba(133,209,244,.24); --fd-text:#EAF6FD; --fd-muted:#8FB0C6; --fd-ease:cubic-bezier(.22,1,.36,1); position:relative; width:100%; max-width:570px; margin-inline:auto; min-width:0; font-family:"DM Sans","Inter","Montserrat",system-ui,Arial,sans-serif; color:var(--fd-text); } .fda-hero-visual,.fda-hero-visual *{box-sizing:border-box;} .fda-hero-visual::before{ content:"";position:absolute;inset:4% 0 6% 0; background:radial-gradient(54% 52% at 46% 48%,rgba(27,161,220,.28),transparent 68%); filter:blur(10px);z-index:0;pointer-events:none; } /* ── SVG ── */ .fda-scene{position:relative;z-index:1;display:block;width:100%;height:auto;overflow:visible;} .fda-asset{filter:drop-shadow(0 0 7px rgba(60,187,238,.28));} /* continuous rotation of the gear, around its hub (422,452) */ .fda-gear{ transform-box:view-box; transform-origin:422px 452px; animation:fdaSpin 30s linear 1.7s infinite; } @keyframes fdaSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} .fda-scene .ln{ fill:none;stroke:var(--fd-blue-lit);stroke-width:3; stroke-miterlimit:10;stroke-linecap:round; stroke-dasharray:100;stroke-dashoffset:100; animation:fdaDraw 1s var(--fd-ease) forwards; animation-delay:calc(var(--gd,0s) + var(--i,0) * .016s); } .fda-scene .ln--thin{stroke-width:1.6;opacity:.72;} @keyframes fdaDraw{to{stroke-dashoffset:0}} @keyframes fdaFade{to{opacity:1}} /* ── Sensors + waves ── */ .fda-wifi{opacity:0;animation:fdaFade .5s var(--fd-ease) forwards;animation-delay:var(--wd); filter:drop-shadow(0 0 5px rgba(60,187,238,.65));} .fda-sensor{fill:#7BD5FA;stroke:none;} .fda-wave{fill:none;stroke:#7BD5FA;stroke-width:3.2;stroke-linecap:round; transform-origin:0 6px;animation:fdaPing 2.4s ease-out infinite;} .fda-w1{animation-delay:calc(var(--wd) + 0s)} .fda-w2{animation-delay:calc(var(--wd) + .28s)} .fda-w3{animation-delay:calc(var(--wd) + .56s)} @keyframes fdaPing{ 0%{opacity:0;transform:scale(.55)} 22%{opacity:1;transform:scale(1)} 62%{opacity:.55;transform:scale(1.06)} 100%{opacity:0;transform:scale(1.14)} } /* ── Floating panels ── */ .fda-card{ position:absolute;z-index:4;margin:0; background:var(--fd-surface); -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3); border:1px solid var(--fd-stroke);border-radius:16px; box-shadow:0 18px 40px -16px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.07); opacity:0;transform:translateY(10px) scale(.97); animation:fdaCardIn .6s var(--fd-ease) forwards;animation-delay:var(--cd); padding:12px 13px 11px; } @keyframes fdaCardIn{to{opacity:1;transform:none}} .fda-card__head{display:flex;align-items:center;gap:6px; font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--fd-muted);} .fda-live{width:6px;height:6px;border-radius:50%;background:var(--fd-green);flex:none; box-shadow:0 0 0 0 rgba(52,211,153,.55);animation:fdaLive 2s ease-out infinite;} @keyframes fdaLive{70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}} .fda-card__val{display:flex;align-items:baseline;gap:3px;margin:3px 0 8px; font-size:24px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;} .fda-card__val em{font-style:normal;font-size:14px;font-weight:600;color:var(--fd-muted);} .fda-card__val span{font-size:12px;font-weight:600;color:var(--fd-muted);margin-left:4px;} .fda-up{margin-left:auto;font-size:11px;font-weight:700;color:var(--fd-green);} .fda-card__foot{margin-top:8px;font-size:10.5px;color:var(--fd-muted);} .fda-card__foot b{color:var(--fd-text);font-weight:700;} /* — 1. machine fleet — */ .fda-card--fleet{top:0;right:0;width:46%;min-width:182px;} .fda-dots{display:flex;flex-wrap:wrap;gap:5px;} .fda-dots i{ width:11px;height:11px;border-radius:4px;background:var(--fd-green); box-shadow:0 0 6px rgba(52,211,153,.5); transform:scale(0);animation:fdaPop .4s var(--fd-ease) forwards; animation-delay:calc(var(--cd) + var(--d)); } .fda-dots i.off{background:var(--fd-amber);box-shadow:0 0 6px rgba(245,185,66,.6);} @keyframes fdaPop{to{transform:scale(1)}} /* — 2. power + flow meter — */ .fda-card--power{bottom:0;left:0;width:46%;min-width:186px;} .fda-spark{display:block;width:100%;height:auto;overflow:visible;} .fda-spark__line{fill:none;stroke:var(--fd-blue-lit);stroke-width:2; stroke-linejoin:round;stroke-linecap:round; stroke-dasharray:100;stroke-dashoffset:100; animation:fdaDraw 1.5s linear forwards;animation-delay:calc(var(--cd) + .2s);} .fda-spark__fill{fill:rgba(60,187,238,.16);stroke:none;opacity:0; animation:fdaFade .8s ease forwards;animation-delay:calc(var(--cd) + 1.1s);} .fda-card__row{display:flex;align-items:center;gap:6px;margin-top:10px;padding-top:8px; border-top:1px solid rgba(133,209,244,.16);font-size:11px;color:var(--fd-muted);} .fda-card__row strong{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--fd-text); font-variant-numeric:tabular-nums;} .fda-ico{flex:none;width:15px;height:15px;fill:none;stroke:var(--fd-blue-soft); stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;} /* — 3. production rate — */ .fda-card--prod{bottom:0;right:0;width:46%;min-width:186px;} .fda-bars{display:flex;align-items:flex-end;gap:6px;height:46px;} .fda-bars i{ flex:1;height:var(--h);border-radius:3px 3px 2px 2px; background:linear-gradient(180deg,rgba(60,187,238,.85),rgba(27,161,220,.35)); transform:scaleY(0);transform-origin:bottom; animation:fdaBar .55s var(--fd-ease) forwards; animation-delay:calc(var(--cd) + var(--d)); } .fda-bars i.now{background:linear-gradient(180deg,#7BD5FA,#1BA1DC); box-shadow:0 0 10px rgba(123,213,250,.55);} @keyframes fdaBar{to{transform:scaleY(1)}} /* ── Responsive ── */ @media (max-width:860px){ .fda-hero-visual{max-width:470px;} .fda-card--fleet{width:50%;} .fda-card--power{width:50%;} .fda-card--prod{width:48%;} } @media (max-width:600px){ .fda-hero-visual{max-width:344px;padding-bottom:20%;} .fda-scene .ln{stroke-width:4;} .fda-scene .ln--thin{stroke-width:2.2;} .fda-card{border-radius:13px;padding:9px 10px;} .fda-card__val{font-size:18px;margin-bottom:6px;} .fda-card__val em{font-size:11px;} .fda-card__val span{font-size:10.5px;} .fda-card__foot{margin-top:6px;font-size:10px;} .fda-card--fleet{top:0;right:0;width:60%;min-width:0;} .fda-dots i{width:9px;height:9px;border-radius:3px;} .fda-card--power{bottom:0;left:auto;right:0;width:60%;min-width:0;} .fda-card__row{margin-top:8px;padding-top:6px;font-size:10px;} .fda-card--prod{bottom:auto;top:32%;right:auto;left:0;width:58%;min-width:0;} .fda-bars{height:34px;gap:4px;} } @media (prefers-reduced-motion:reduce){ .fda-hero-visual *{animation:none !important;} .fda-scene .ln{stroke-dashoffset:0 !important;} .fda-card,.fda-wifi{opacity:1 !important;transform:none !important;} .fda-dots i{transform:scale(1) !important;} .fda-bars i{transform:scaleY(1) !important;} .fda-spark__line{stroke-dashoffset:0 !important;} .fda-spark__fill{opacity:1 !important;} }