Onze oplossingen voor de industrie.

/* ══════════════════════════════════════════════════════════════ HERO VISUAL — INDUSTRY PAGE · Four Data (dark background) ══════════════════════════════════════════════════════════════ */ .fdi-hero-visual{ /* — palette — */ --fd-blue:#1BA1DC; --fd-blue-lit:#3CBBEE; /* line on dark background */ --fd-blue-soft:#85D1F4; --fd-amber:#F5B942; --fd-green:#34D399; --fd-surface:rgba(16,38,58,.72); /* panels background */ --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:560px; margin-inline:auto; min-width:0; /* prevents overflow in grid */ font-family:"DM Sans","Inter","Montserrat",system-ui,Arial,sans-serif; color:var(--fd-text); } .fdi-hero-visual,.fdi-hero-visual *{box-sizing:border-box;} /* blue glow behind the scene */ .fdi-hero-visual::before{ content:"";position:absolute;inset:2% 0 4% 0; background:radial-gradient(58% 52% at 52% 48%,rgba(27,161,220,.28),transparent 68%); filter:blur(10px);z-index:0;pointer-events:none; } /* ── SVG ── */ .fdi-scene{position:relative;z-index:1;display:block;width:100%;height:auto;overflow:visible;} .fdi-asset{filter:drop-shadow(0 0 7px rgba(60,187,238,.28));} .fdi-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:fdiDraw 1s var(--fd-ease) forwards; animation-delay:calc(var(--gd,0s) + var(--i,0) * .018s); } @keyframes fdiDraw{to{stroke-dashoffset:0}} /* ── Sensors + wifi waves ── */ .fdi-wifi{opacity:0;animation:fdiFade .5s var(--fd-ease) forwards;animation-delay:var(--wd); filter:drop-shadow(0 0 5px rgba(60,187,238,.65));} .fdi-sensor{fill:#7BD5FA;stroke:none;} .fdi-wave{ fill:none;stroke:#7BD5FA;stroke-width:3.2;stroke-linecap:round; transform-origin:0 6px; animation:fdiPing 2.4s ease-out infinite; } .fdi-w1{animation-delay:calc(var(--wd) + 0s)} .fdi-w2{animation-delay:calc(var(--wd) + .28s)} .fdi-w3{animation-delay:calc(var(--wd) + .56s)} @keyframes fdiPing{ 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 (dark glassmorphism) ── */ .fdi-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:fdiCardIn .6s var(--fd-ease) forwards; animation-delay:var(--cd); } @keyframes fdiCardIn{to{opacity:1;transform:none}} @keyframes fdiFade{to{opacity:1}} .fdi-card__head{ display:flex;align-items:center;gap:6px; font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--fd-muted); } .fdi-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:fdiLive 2s ease-out infinite; } @keyframes fdiLive{70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}} /* — 1. silo chart — */ .fdi-card--chart{top:1%;left:35%;width:44%;min-width:158px;padding:12px 13px 10px;} .fdi-card__val{ font-size:26px;font-weight:700;line-height:1.1;margin:2px 0 4px; font-variant-numeric:tabular-nums; } .fdi-card__val span{font-size:14px;font-weight:600;color:var(--fd-muted);margin-left:2px;} .fdi-spark{display:block;width:100%;height:auto;overflow:visible;} .fdi-spark__line{ fill:none;stroke:var(--fd-blue-lit);stroke-width:2;stroke-linejoin:round;stroke-linecap:round; stroke-dasharray:340;stroke-dashoffset:340; animation:fdiDraw 1.4s var(--fd-ease) forwards;animation-delay:calc(var(--cd) + .2s); } .fdi-spark__fill{fill:rgba(60,187,238,.20);stroke:none;opacity:0;animation:fdiFade .8s ease forwards;animation-delay:calc(var(--cd) + .9s);} .fdi-spark__dot{fill:#7BD5FA;opacity:0;animation:fdiFade .4s ease forwards;animation-delay:calc(var(--cd) + 1.4s);} .fdi-card__foot{margin-top:7px;font-size:10.5px;color:var(--fd-muted);} /* — 2. H₂ alert — */ .fdi-card--alert{ top:37%;right:0;width:47%;min-width:168px; display:flex;align-items:center;gap:10px;padding:10px 12px; border-color:rgba(245,185,66,.42); background:linear-gradient(rgba(245,185,66,.10),rgba(245,185,66,.10)),var(--fd-surface); } .fdi-alert__ico{ flex:none;width:28px;height:28px;border-radius:9px; display:grid;place-items:center;background:rgba(245,185,66,.16); animation:fdiBlink 1.8s ease-in-out infinite;animation-delay:calc(var(--cd) + .6s); } .fdi-alert__ico svg{width:15px;height:15px;fill:none;stroke:var(--fd-amber);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} @keyframes fdiBlink{0%,100%{background:rgba(245,185,66,.16)}50%{background:rgba(245,185,66,.40)}} .fdi-alert__txt{display:flex;flex-direction:column;line-height:1.25;min-width:0;} .fdi-alert__txt strong{font-size:12.5px;font-weight:700;} .fdi-alert__txt span{font-size:11px;color:var(--fd-muted);} /* — 3. tank: level + ullage + delivery — */ .fdi-card--tank{bottom:2%;left:0;width:47%;min-width:186px;padding:12px 13px 11px;} .fdi-tank__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; } .fdi-tank__val span{font-size:13px;font-weight:600;color:var(--fd-muted);} .fdi-tank__val em{font-style:normal;font-size:12px;font-weight:500;color:var(--fd-muted);margin-left:4px;} .fdi-gauge{height:6px;border-radius:99px;background:rgba(133,209,244,.16);overflow:hidden;} .fdi-gauge i{ display:block;height:100%;width:0;border-radius:99px; background:linear-gradient(90deg,#F5B942,#F58C42); box-shadow:0 0 8px rgba(245,185,66,.55); animation:fdiGauge .9s var(--fd-ease) forwards;animation-delay:calc(var(--cd) + .25s); } @keyframes fdiGauge{to{width:var(--w)}} .fdi-tank__row{ display:flex;align-items:baseline;justify-content:space-between;gap:8px; margin-top:9px;font-size:11px;color:var(--fd-muted); } .fdi-tank__row strong{font-size:13px;font-weight:700;color:var(--fd-text);font-variant-numeric:tabular-nums;} .fdi-tank__deliv{ display:flex;align-items:center;gap:7px; margin-top:9px;padding-top:8px;border-top:1px solid rgba(133,209,244,.16); font-size:11px;color:var(--fd-muted); } .fdi-tank__deliv b{color:var(--fd-blue-soft);font-weight:700;} .fdi-tank__deliv svg{ flex:none;width:19px;height:15px;fill:none;stroke:var(--fd-blue-soft); stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round; animation:fdiTruck 3.4s ease-in-out infinite;animation-delay:calc(var(--cd) + 1s); } @keyframes fdiTruck{0%,72%,100%{transform:translateX(0)}84%{transform:translateX(3px)}} /* ── Responsive ── */ @media (max-width:860px){ .fdi-hero-visual{max-width:460px;} .fdi-card--chart{left:32%;width:46%;} .fdi-card--tank{width:52%;} } @media (max-width:600px){ .fdi-hero-visual{max-width:340px;} .fdi-scene .ln{stroke-width:4;} .fdi-card{border-radius:13px;} .fdi-card--chart{top:0;left:auto;right:0;width:54%;min-width:0;padding:9px 10px 8px;} .fdi-card__val{font-size:19px;} .fdi-card__val span{font-size:11px;} .fdi-card__foot{display:none;} .fdi-card--alert{top:40%;right:0;width:62%;min-width:0;padding:8px 10px;gap:8px;} .fdi-alert__ico{width:24px;height:24px;border-radius:8px;} .fdi-alert__txt strong{font-size:11.5px;} .fdi-alert__txt span{font-size:10px;} .fdi-card--tank{bottom:0;left:0;width:66%;min-width:0;padding:9px 10px 9px;} .fdi-tank__val{font-size:18px;margin-bottom:6px;} .fdi-tank__val span{font-size:11px;} .fdi-tank__val em{font-size:10.5px;} .fdi-tank__row{margin-top:7px;} .fdi-tank__row strong{font-size:11.5px;} .fdi-tank__deliv{margin-top:7px;padding-top:6px;font-size:10px;} } @media (prefers-reduced-motion:reduce){ .fdi-hero-visual *{animation:none !important;} .fdi-scene .ln{stroke-dashoffset:0 !important;} .fdi-card,.fdi-wifi{opacity:1 !important;transform:none !important;} .fdi-gauge i{width:var(--w) !important;} .fdi-spark__fill,.fdi-spark__dot{opacity:1 !important;} }