/* =========================================================================== VAPL IoT — sign-in page Vibrant Automations Pvt Ltd --------------------------------------------------------------------------- Same tokens and same faces as the v2 dashboard, so the door matches the room. Self-contained: this page must render if every other stylesheet on the platform is unreachable, because a sign-in screen that half-loads is a sign-in screen nobody can use. =========================================================================== */ @font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap; src:url("fonts/instrument-sans-latin-400-normal.woff2") format("woff2")} @font-face{font-family:"Instrument Sans";font-style:normal;font-weight:500;font-display:swap; src:url("fonts/instrument-sans-latin-500-normal.woff2") format("woff2")} @font-face{font-family:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap; src:url("fonts/instrument-sans-latin-600-normal.woff2") format("woff2")} @font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap; src:url("fonts/dm-mono-latin-500-normal.woff2") format("woff2")} :root{ color-scheme:dark; --ink:#070C10; /* the dashboard's ground, character for character - all of v2 shares one background in each theme, and a person moving from the sign-in page to a station should not see the floor change under them */ --ink-lift:radial-gradient(1400px 780px at 12% -18%, #12222b 0%, #070c10 58%); --pane:#0D151B; --pane-2:#121D25; --pane-3:#18262F; --line:rgba(176,216,230,.085); --line-2:rgba(176,216,230,.16); --sheen:rgba(255,255,255,.05); --ice:#E9F2F6; --mist:#93A9B4; --fog:#5B7280; --aqua:#5EE0C8; --aqua-dim:rgba(94,224,200,.14); --aqua-line:rgba(94,224,200,.34); --brass:#E9B96E; --good:#3FD79B; --fault:#FF5C6E; --fault-dim:rgba(255,92,110,.12); --btn-ink:#04231D; --r-sm:10px; --r:16px; --r-lg:24px; --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; --ease:cubic-bezier(.32,.72,0,1); } /* The light twin. Swap data-vapl-theme on to "light" and the whole page follows - same layout, same everything. */ html[data-vapl-theme="light"]{ color-scheme:light; --ink:#F2F5F7; --ink-lift:radial-gradient(1300px 720px at 12% -18%, #ffffff 0%, #eef2f5 60%); --pane:#FFFFFF; --pane-2:#F6F9FB; --pane-3:#EDF2F5; --line:rgba(11,38,51,.10); --line-2:rgba(11,38,51,.16); --sheen:rgba(255,255,255,.9); --ice:#08161D; --mist:#48606C; --fog:#7C919C; --aqua:#00897B; --aqua-dim:rgba(0,137,123,.10); --aqua-line:rgba(0,137,123,.30); --brass:#A87118; --good:#0E9F6E; --fault:#D42A3D; --fault-dim:rgba(212,42,61,.08); --btn-ink:#FFFFFF; } *,*::before,*::after{box-sizing:border-box} html,body{height:100%;margin:0} body{background:var(--ink);background-image:var(--ink-lift); background-attachment:fixed;color:var(--ice);font-family:var(--sans);font-size:14px; line-height:1.5;letter-spacing:-.005em;font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} a{color:inherit} button{font:inherit;color:inherit;cursor:pointer;background:none;border:0} [hidden]{display:none !important} :focus-visible{outline:2px solid var(--aqua);outline-offset:2px;border-radius:6px} .l-wrap{position:relative;display:grid;grid-template-columns:1.18fr 1fr;min-height:100vh;min-height:100dvh} /* --- canvas ------------------------------------------------------------- */ .l-canvas{position:relative;overflow:hidden;padding:44px 56px; display:flex;flex-direction:column; background: radial-gradient(1100px 620px at 22% 8%, var(--aqua-dim), transparent 62%), linear-gradient(160deg,var(--pane) 0%,var(--ink) 58%)} /* a drawing sheet is ruled; so is this */ .l-canvas::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(var(--line) 1px,transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:52px 52px; -webkit-mask-image:radial-gradient(720px 560px at 30% 40%,#000 20%,transparent 78%); mask-image:radial-gradient(720px 560px at 30% 40%,#000 20%,transparent 78%)} .l-brand{display:flex;align-items:center;gap:13px;position:relative;z-index:1} .l-brandname{font-size:15px;font-weight:600;letter-spacing:-.012em} /* their mark is a dark shield; on ink it needs a light ground to sit on */ .l-mark{width:44px;height:44px;border-radius:13px;background:#fff;flex:0 0 auto; display:grid;place-items:center;overflow:hidden; box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 26px -14px rgba(0,0,0,.85)} .l-mark img{width:34px;height:auto;display:block} .l-head{position:relative;z-index:1;margin-top:auto;max-width:560px} .l-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em; text-transform:uppercase;color:var(--aqua);margin-bottom:16px} .l-head h1{margin:0;font-size:46px;line-height:1.08;font-weight:600;letter-spacing:-.03em} .l-head h1 em{font-style:normal;color:var(--mist)} .l-head p{margin:18px 0 0;font-size:14.5px;line-height:1.6;color:var(--mist);max-width:470px} .l-strip{position:relative;z-index:1;margin-top:38px;display:flex; border:1px solid var(--line);border-radius:var(--r);overflow:hidden; background:color-mix(in srgb,var(--pane) 72%,transparent); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)} .l-cell{flex:1;padding:15px 19px;border-right:1px solid var(--line)} .l-cell:last-child{border-right:0} .l-cell .k{font-family:var(--mono);font-size:9px;letter-spacing:.17em; text-transform:uppercase;color:var(--fog)} .l-cell .c{font-size:12.5px;line-height:1.45;color:var(--mist);margin-top:6px} .l-svc{position:relative;z-index:1;align-self:flex-start;display:inline-flex; align-items:center;gap:9px;margin-top:20px;padding:8px 14px; border:1px solid var(--line);border-radius:99px; background:color-mix(in srgb,var(--good) 6%,transparent); font-size:12.5px;color:var(--mist)} .l-svc .pip{width:7px;height:7px;border-radius:50%;background:var(--good); box-shadow:0 0 0 4px color-mix(in srgb,var(--good) 16%,transparent)} .l-trend{position:relative;z-index:1;margin-top:24px;height:92px} .l-trend svg{width:100%;height:100%;display:block} .t1{fill:none;stroke:var(--aqua);stroke-width:1.6;stroke-linejoin:round} .t2{fill:none;stroke:var(--brass);stroke-width:1.5;stroke-linejoin:round; stroke-dasharray:3 3;opacity:.85} .tf{fill:url(#lg);stroke:none} .l-key{position:relative;z-index:1;display:flex;align-items:center;gap:20px; margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--fog)} .l-key span{display:inline-flex;align-items:center;gap:7px} .l-key i{width:14px;height:2px;border-radius:2px;display:inline-block} .l-key i.ka{background:var(--aqua)} .l-key i.kb{background:var(--brass)} .l-keyr{margin-left:auto;opacity:.7} /* --- form --------------------------------------------------------------- */ .l-side{display:flex;align-items:center;justify-content:center;padding:44px; background:transparent;border-left:1px solid var(--line)} .l-card{width:100%;max-width:392px} .l-brand-sm{display:none;margin-bottom:26px} .l-card h2{margin:0 0 6px;font-size:27px;font-weight:600;letter-spacing:-.026em} .l-sub{margin:0 0 28px;color:var(--mist);font-size:14px} .l-err{display:flex;gap:11px;padding:13px 15px;margin-bottom:22px; border:1px solid color-mix(in srgb,var(--fault) 38%,transparent); border-radius:var(--r-sm);background:var(--fault-dim); font-size:13px;line-height:1.5;color:var(--mist)} .l-err b{display:block;color:var(--ice);font-weight:600;margin-bottom:2px} .l-err a{color:var(--ice)} .l-err svg{width:19px;height:19px;flex:0 0 auto;margin-top:1px;fill:none; stroke:var(--fault);stroke-width:1.9;stroke-linecap:round} .l-fld{margin-bottom:17px} .l-lab{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px} .l-lab label{font-family:var(--mono);font-size:9.5px;font-weight:500; letter-spacing:.17em;text-transform:uppercase;color:var(--fog)} .l-lab a{font-size:12px;color:var(--mist);text-decoration:none} .l-lab a:hover{color:var(--aqua)} /* 16px is not a style choice: below it, iOS zooms the page on focus and the operator is left pinching their way back out. */ .l-in{width:100%;height:52px;padding:0 16px;border-radius:var(--r-sm); border:1px solid var(--line-2);background:var(--pane-2);color:var(--ice); font:400 16px var(--sans);outline:none; transition:border-color .18s var(--ease),box-shadow .18s var(--ease)} .l-in::placeholder{color:var(--fog)} .l-in:focus{border-color:var(--aqua-line);box-shadow:0 0 0 3px var(--aqua-dim)} .l-pw{position:relative} .l-pw .l-in{padding-right:50px} .l-eye{position:absolute;right:6px;top:6px;width:40px;height:40px;border-radius:8px; display:grid;place-items:center;color:var(--fog)} .l-eye:hover{color:var(--ice)} .l-eye.is-on{color:var(--aqua)} .l-eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7} .l-check{display:flex;align-items:center;gap:11px;margin:6px 0 22px;cursor:pointer} .l-check input{width:18px;height:18px;margin:0;accent-color:var(--aqua);flex:0 0 auto} .l-check span{font-size:13.5px;color:var(--mist)} .l-btn{width:100%;height:52px;border-radius:var(--r-sm);background:var(--aqua); color:var(--btn-ink);font:600 15px var(--sans);letter-spacing:-.01em; display:flex;align-items:center;justify-content:center;gap:9px; box-shadow:0 12px 30px -14px color-mix(in srgb,var(--aqua) 60%,transparent); transition:filter .18s var(--ease),transform .12s var(--ease)} .l-btn:hover{filter:brightness(1.06)} .l-btn:active{transform:scale(.99)} .l-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round} .l-hint{margin-top:18px;padding:12px 14px;border:1px solid var(--line); border-radius:var(--r-sm);background:var(--pane);color:var(--mist); font-size:12.2px;line-height:1.55} .l-hint a{color:var(--ice);font-weight:600;text-decoration:none} .l-legal{display:flex;flex-wrap:wrap;align-items:center;gap:11px;margin-top:24px; font-size:11.5px;color:var(--fog)} .l-legal a{color:var(--fog);text-decoration:none} .l-legal a:hover{color:var(--mist)} .l-legal span{opacity:.45} .l-theme{position:absolute;top:22px;right:24px;z-index:3; width:38px;height:38px;border-radius:99px;display:grid;place-items:center; border:1px solid var(--line-2);background:var(--pane-2);color:var(--mist); transition:color .18s var(--ease),border-color .18s var(--ease)} .l-theme:hover{color:var(--ice);border-color:var(--fog)} .l-theme svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round} /* --- narrow ------------------------------------------------------------- Below 980px the canvas is dropped rather than stacked. On a phone it would be a screen and a half of scrolling before the operator reaches the field they came for - and they already know what the product is. -------------- */ @media (max-width:980px){ .l-wrap{grid-template-columns:1fr} .l-canvas{display:none} .l-side{border-left:0;align-items:flex-start;padding:0;background:transparent} .l-card{max-width:440px;margin:0 auto;padding:46px 26px 34px; display:flex;flex-direction:column;min-height:100vh;min-height:100dvh} .l-brand-sm{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px} .l-brand-sm .l-mark{width:56px;height:56px;border-radius:16px} .l-brand-sm .l-mark img{width:42px} .l-brand-sm .l-brandname{font-size:19px} .l-card h2,.l-sub{text-align:center} .l-sub{margin-bottom:26px} .l-hint{margin-top:auto} .l-legal{justify-content:center;margin-top:20px} } @media (max-width:980px){ .l-theme{top:14px;right:14px} } @media (max-width:380px){ .l-card{padding:36px 18px 28px} .l-lab a{font-size:11.5px} } /* Somebody will print this page to put in a file. Give them something sensible rather than a black rectangle. */ @media print{ .l-canvas,.l-eye,.l-btn,.l-svc,.l-theme{display:none !important} body{background:#fff;color:#000} .l-side{border:0} } @media (prefers-reduced-motion:reduce){ *{transition:none !important;animation:none !important} }