/* MJS industry page — guided protection builder (scoped to .mjs-industry) */ /* The prototype is a standalone, full-bleed page. Inside the Venture theme the content sits in .master-wrapper-content, which is capped at 1200px and padded 80px top / 100px bottom - so the dark hero band would be boxed instead of running edge to edge. html-industry-page is added by the view, exactly as the home page does it, and undoes the wrapper for this page only. */ .html-industry-page .master-wrapper-content{max-width:100%;width:100%;padding:0;margin:0} .html-industry-page .center-1{margin:0} .html-industry-page .page{min-height:0;text-align:left} /* Venture sets text-transform:uppercase, font:15px Fjalla One and letter-spacing:.2px on , so every heading and paragraph on the page inherits them. The prototype is sentence case in Segoe UI, so the scope resets all three. Specificity does the rest: every rule below is at least two classes deep, so the places that genuinely want uppercase - the eyebrows, the step line, the brand line, the buttons - reapply it and win. */ .mjs-industry, .mjs-industry *{text-transform:none;letter-spacing:normal;font-family:inherit} /* Venture also flattens the semantics: strong{font-weight:normal} and em{font-style:normal}. Rich-text copy written in the admin editor is saved as /, so without this the emphasis an administrator applied simply disappears on the storefront. */ .mjs-industry strong,.mjs-industry b{font-weight:700} .mjs-industry em,.mjs-industry i{font-style:italic} .mjs-industry{ --bg:#f4f4f4; --white:#ffffff; --char:#17181b; --ink:#26262c; --dim:#5f5f5f; --faint:#8c8880; --gold:#f3cc2e; --gold-d:#b8890a; --green:#3f9d63; --line:rgba(0,0,0,.10); --line-d:rgba(255,255,255,.10); --maxw:1200px; } .mjs-industry *{box-sizing:border-box;margin:0;padding:0} .mjs-industry{background:var(--bg);color:var(--ink);font-family:'Segoe UI',system-ui,Arial,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased} .mjs-industry h1,.mjs-industry h2,.mjs-industry h3,.mjs-industry h4{font-weight:400;letter-spacing:-.015em;line-height:1.14} .mjs-industry .serif{font-family:Georgia,'Times New Roman',serif} .mjs-industry a{color:inherit;text-decoration:none} .mjs-industry .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px} .mjs-industry .eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-d)} .mjs-industry .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:4px;font-size:13.5px;font-weight:700;letter-spacing:.03em;cursor:pointer;border:1px solid transparent;transition:.18s} .mjs-industry .btn-gold{background:var(--gold);color:#1c1c1e} .mjs-industry .btn-gold:hover{filter:brightness(1.06)} .mjs-industry .btn[disabled]{opacity:.55;cursor:default} /* ---------- intro band ---------- */ .mjs-industry .intro{position:relative;overflow:hidden;background:#0c0d10;color:#fff} .mjs-industry .intro-img{position:absolute;inset:0;background-size:cover;background-position:center} .mjs-industry .intro-img:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,11,14,.94) 0%,rgba(10,11,14,.7) 42%,rgba(10,11,14,.25) 100%)} .mjs-industry .intro .wrap{position:relative;z-index:2;padding:64px 32px} .mjs-industry .crumb{font-size:12px;color:#b9b6b0;letter-spacing:.04em;margin-bottom:16px} .mjs-industry .crumb a{color:#cfccc4} .mjs-industry .crumb a:hover{color:#fff} .mjs-industry .crumb .gold{color:var(--gold)} .mjs-industry .intro h1{font-size:clamp(30px,4vw,46px);max-width:18ch;margin:6px 0 12px} .mjs-industry .intro p{color:#d7d4cc;max-width:52ch;font-size:15px} .mjs-industry .intro .eyebrow{color:var(--gold)} /* ---------- builder ---------- */ .mjs-industry .builder{padding:56px 0 20px} .mjs-industry .b-head{text-align:center;max-width:640px;margin:0 auto 34px} .mjs-industry .b-head h2{font-size:clamp(23px,3vw,33px);margin-top:10px} .mjs-industry .b-head p{color:var(--dim);margin-top:10px;font-size:15px} .mjs-industry .b-head .b-intro{color:var(--dim);margin-top:10px;font-size:15px} .mjs-industry .b-head .b-intro p{margin:0} .mjs-industry .stage{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px;align-items:stretch} @media(max-width:860px){.mjs-industry .stage{grid-template-columns:1fr}} /* ---------- worker figure ---------- */ .mjs-industry .figure{position:relative;background:radial-gradient(120% 85% at 50% 22%,#232a33,#12151a);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column} .mjs-industry .prog{margin-bottom:12px} .mjs-industry .prog .pl{display:flex;justify-content:space-between;font-size:12px;color:#c9c6be;margin-bottom:7px} .mjs-industry .prog .pl b{color:#fff} .mjs-industry .bar{height:6px;background:rgba(255,255,255,.12);border-radius:4px;overflow:hidden} .mjs-industry .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),#ffe27a);border-radius:4px;transition:width .5s ease} .mjs-industry .fw{position:relative;width:100%;max-width:330px;margin:0 auto;aspect-ratio:340/470} .mjs-industry .fw svg.man{position:absolute;inset:0;width:100%;height:100%} .mjs-industry .hot{position:absolute;width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.92);background:rgba(243,204,46,.18);cursor:pointer;transform:translate(-50%,-50%);transition:.2s;z-index:3;padding:0} .mjs-industry .hot:before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:var(--gold);transform:translate(-50%,-50%)} .mjs-industry .hot:after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--gold);opacity:.55;animation:mjs-ind-pulse 2.5s ease-out infinite} @keyframes mjs-ind-pulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.8);opacity:0}} .mjs-industry .hot:hover{transform:translate(-50%,-50%) scale(1.18);border-color:#fff} .mjs-industry .hot:focus-visible{outline:2px solid #fff;outline-offset:3px} .mjs-industry .hot.active{background:var(--gold);border-color:#fff;transform:translate(-50%,-50%) scale(1.2)} .mjs-industry .hot.active:before{background:#1c1c1e} .mjs-industry .hot.done{border-color:var(--green);background:var(--green)} .mjs-industry .hot.done:before{content:"\2713";width:auto;height:auto;color:#fff;font-size:12px;font-weight:800;background:none} .mjs-industry .hot.done:after{border-color:var(--green);animation:none;opacity:1;inset:-3px} .mjs-industry .hl{position:absolute;bottom:150%;left:50%;transform:translateX(-50%) translateY(4px);background:#1c1c1e;color:#fff;font-size:11px;font-weight:600;padding:4px 9px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:.18s} .mjs-industry .hot:hover .hl,.mjs-industry .hot.active .hl,.mjs-industry .hot:focus-visible .hl{opacity:1;transform:translateX(-50%) translateY(0)} .mjs-industry .gear{opacity:0;transform:translateY(-9px) scale(.82);transform-box:fill-box;transform-origin:50% 50%;transition:opacity .4s ease,transform .5s cubic-bezier(.18,1.5,.35,1)} .mjs-industry .gear.on{opacity:1;transform:none} .mjs-industry .confetti{position:absolute;width:9px;height:9px;border-radius:2px;top:44%;left:50%;pointer-events:none;z-index:5;animation:mjs-ind-conf .95s ease-out forwards} @keyframes mjs-ind-conf{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}} .mjs-industry .celebrate{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.8);z-index:6;background:var(--green);color:#fff;font-weight:700;font-size:13px;padding:11px 18px;border-radius:30px;box-shadow:0 12px 30px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:.35s cubic-bezier(.18,1.4,.4,1);white-space:nowrap} .mjs-industry .celebrate.show{opacity:1;transform:translate(-50%,-50%) scale(1)} .mjs-industry .fig-hint{text-align:center;color:#9a968f;font-size:12px;margin-top:8px} .mjs-industry .chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:auto;padding-top:14px} .mjs-industry .chip{font-size:11.5px;font-weight:600;color:#e6e3dd;border:1px solid var(--line-d);background:rgba(255,255,255,.04);padding:8px 12px;border-radius:20px;cursor:pointer;transition:.15s} .mjs-industry .chip:hover{border-color:var(--gold);color:#fff} .mjs-industry .chip.active{background:var(--gold);color:#1c1c1e;border-color:var(--gold)} /* ---------- guidance panel ---------- */ .mjs-industry .panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;display:flex;flex-direction:column;min-height:520px} .mjs-industry .p-step{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d)} .mjs-industry .p-title{font-size:24px;margin:5px 0 16px} .mjs-industry .hz{display:flex;gap:12px;align-items:flex-start;background:#fbf2f0;border:1px solid #f2d9d2;border-radius:10px;padding:13px 15px;margin-bottom:16px} .mjs-industry .hz .hi{flex-shrink:0;color:#c0492e;margin-top:1px;line-height:0} .mjs-industry .hz .ht b{color:#a53c25;font-size:11px;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:2px} .mjs-industry .hz .ht span{font-size:13.5px;color:#5a4a44;line-height:1.55} .mjs-industry .choose{margin-bottom:14px} .mjs-industry .choose .cl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:6px} .mjs-industry .choose p{font-size:14px;color:#3a3a3c;line-height:1.6} .mjs-industry .vsel{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 12px} .mjs-industry .vbtn{border:1px solid var(--line);background:#fff;font-size:12.5px;font-weight:600;padding:8px 13px;border-radius:20px;cursor:pointer;color:#3a3a3c;transition:.15s} .mjs-industry .vbtn:hover{border-color:var(--gold-d)} .mjs-industry .vbtn.on{background:var(--gold);border-color:var(--gold);color:#1c1c1e} .mjs-industry .vout{background:#fbf6e0;border:1px solid #efe2a0;border-radius:8px;padding:11px 14px;font-size:13.5px;color:#5a542e;line-height:1.5} .mjs-industry .vout b{color:#7a6a12} .mjs-industry .std{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--dim);border:1px solid var(--line);border-radius:20px;padding:5px 12px;margin-bottom:16px} .mjs-industry .std b{color:#26262c} /* ---------- product tiles ---------- */ .mjs-industry .p-items{display:flex;flex-direction:column;gap:11px;flex:1} .mjs-industry .pi{display:flex;gap:13px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:11px;transition:.15s} .mjs-industry .pi:hover{border-color:rgba(243,204,46,.6);box-shadow:0 6px 18px rgba(0,0,0,.05)} .mjs-industry .pi-img{width:60px;height:60px;flex-shrink:0;border-radius:8px;background:radial-gradient(circle at 50% 40%,#fff,#eee);display:flex;align-items:center;justify-content:center;overflow:hidden} .mjs-industry .pi-img img{width:100%;height:100%;object-fit:contain} .mjs-industry .pi-img svg{width:34px;height:34px;color:#66707a} .mjs-industry .pi-info{flex:1;min-width:0} .mjs-industry .pi-info .br{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:700} .mjs-industry .pi-info .nm{font-size:13.5px;color:#26262c;margin:2px 0;display:block} .mjs-industry .pi-info .nm:hover{color:var(--gold-d)} .mjs-industry .pi-info .pr{font-size:15px;font-weight:700;color:var(--gold-d)} .mjs-industry .pi-add{border:1px solid var(--gold);color:var(--gold-d);background:#fff;font-weight:700;font-size:12px;padding:9px 14px;border-radius:6px;cursor:pointer;transition:.15s;white-space:nowrap} .mjs-industry .pi-add:hover{background:var(--gold);color:#1c1c1e} .mjs-industry .pi-add.added{background:var(--green);color:#fff;border-color:var(--green)} .mjs-industry .pi-add.busy{opacity:.6;cursor:progress} .mjs-industry .pi-add.link{border-color:var(--line);color:var(--dim)} .mjs-industry .pi-add.link:hover{background:#f4f4f4;color:#26262c} .mjs-industry .p-empty{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--faint);font-size:13.5px;border:1px dashed var(--line);border-radius:10px;padding:24px} .mjs-industry .p-foot{margin-top:16px} .mjs-industry .seeall{font-size:13px;font-weight:600;color:var(--dim)} .mjs-industry .seeall .a{color:var(--gold-d)} /* ---------- glossary ---------- */ .mjs-industry .gloss{border-bottom:1px dashed var(--gold-d);cursor:help;position:relative;font-weight:600;color:#3a3a3c} .mjs-industry .gloss:hover:after,.mjs-industry .gloss:focus-visible:after{content:attr(data-tip);position:absolute;left:0;bottom:150%;width:250px;background:#1c1c1e;color:#fff;font-size:12px;line-height:1.55;padding:10px 12px;border-radius:8px;z-index:9;box-shadow:0 10px 26px rgba(0,0,0,.28);font-weight:400;white-space:normal} .mjs-industry .gloss:hover:before,.mjs-industry .gloss:focus-visible:before{content:"";position:absolute;left:16px;bottom:138%;border:6px solid transparent;border-top-color:#1c1c1e;z-index:9} /* ---------- kit bar ---------- */ .mjs-industry .kitbar{background:var(--char);color:#fff;border-radius:14px;margin:26px 0 8px;padding:22px 26px} .mjs-industry .kitbar .kt{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap} .mjs-industry .kitbar .kt b{font-size:16px} .mjs-industry .kitbar .kt .sub{color:#b9b6b0;font-size:13px} .mjs-industry .zones{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .mjs-industry .zpill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:7px 12px;border-radius:20px;border:1px solid var(--line-d);color:#c9c6be;cursor:pointer;transition:.15s;background:none} .mjs-industry .zpill .tick{width:15px;height:15px;border-radius:50%;border:1.5px solid #6a6a6a;display:flex;align-items:center;justify-content:center;font-size:9px} .mjs-industry .zpill.on{background:rgba(63,157,99,.16);border-color:var(--green);color:#eafff0} .mjs-industry .zpill.on .tick{background:var(--green);border-color:var(--green);color:#fff} .mjs-industry .kc-count{color:var(--gold);font-weight:700} .mjs-industry .kit-actions{margin-top:16px;display:flex;justify-content:flex-end;align-items:center;gap:14px;flex-wrap:wrap} .mjs-industry .kit-msg{font-size:12.5px;color:#b9b6b0} .mjs-industry .kit-msg.err{color:#ff9f8f} /* ---------- standards ---------- */ .mjs-industry .standards{padding:34px 0 66px} .mjs-industry .standards .row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px} .mjs-industry .stdc{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px} .mjs-industry .stdc b{display:block;font-size:13px;color:#26262c;margin-bottom:4px} .mjs-industry .stdc span{font-size:12.5px;color:var(--dim)} @media(max-width:820px){.mjs-industry .standards .row{grid-template-columns:1fr 1fr}} @media(max-width:520px){.mjs-industry .standards .row{grid-template-columns:1fr}} @media (prefers-reduced-motion:reduce){ .mjs-industry .hot:after{animation:none} .mjs-industry .gear,.mjs-industry .bar i,.mjs-industry .celebrate{transition:none} .mjs-industry .confetti{display:none} }