<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to Access & Log In to zConnect</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
--ink: #000000;
--paper: #FFFFFF;
--lime: #AFF44A;
--lav: #D5B3FF;
--mist: #F4F4F1;
--rule: #E3E3DF;
--muted: #5C5C58;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); }
body {
font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
color: var(--ink);
font-size: 17px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.kb { max-width: 920px; margin: 0 auto; padding: 40px 24px 64px; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--lime); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
code {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.92em;
background: var(--mist);
padding: 2px 6px;
border-radius: 4px;
}
h1 {
font-size: clamp(38px, 6vw, 60px);
line-height: 1.02;
font-weight: 800;
letter-spacing: -0.025em;
margin: 0 0 28px;
}
/* ---------- Two-column hero: steps left, screen right ---------- */
.hero {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
gap: clamp(24px, 5%, 48px);
}
.hero-copy { flex: 3 1 280px; min-width: 0; }
.shot-wrap {
flex: 1 1 260px;
min-width: 240px;
max-width: 340px;
}
/* Steps */
ol.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
ol.steps li {
counter-increment: step;
position: relative;
padding: 0 0 22px 50px;
font-size: 18px;
}
ol.steps li::before {
content: counter(step);
position: absolute; left: 0; top: 0;
width: 34px; height: 34px;
border-radius: 50%;
background: var(--lime); color: var(--ink);
font-size: 15px; font-weight: 800;
display: grid; place-items: center;
}
ol.steps li strong { display: block; font-weight: 700; font-size: 20px; line-height: 1.3; margin: 3px 0 4px; }
ol.steps li span { color: #2A2A28; }
ol.steps li:last-child { padding-bottom: 0; }
.note {
background: var(--lav);
border-radius: 12px;
padding: 18px 22px;
font-size: 17px;
font-weight: 500;
margin-top: 32px;
max-width: 40em;
}
.note b { font-weight: 700; }
/* ---------- Login screen mockup ---------- */
.shot {
position: relative;
padding-right: 18px;
}
.browser {
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.chrome {
position: relative;
display: flex; align-items: center; gap: 8px;
padding: 9px 10px;
background: #DCDCD8;
border-radius: 12px 12px 0 0;
}
.chrome .dots { display: flex; gap: 5px; }
.chrome .dots i { width: 9px; height: 9px; border-radius: 50%; background: #B9B9B4; display: block; }
.chrome .url {
flex: 1 1 auto;
background: #F7F7F4;
border-radius: 6px;
padding: 5px 10px;
font-size: 11.5px;
font-weight: 500;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.login {
background: #3A3A3A;
color: #E9E9E9;
padding: 22px 18px 20px;
font-size: 12px;
border-radius: 0 0 12px 12px;
}
.fields { position: relative; }
.login h4 {
margin: 0 0 12px;
font-size: 13.5px;
font-weight: 600;
color: #F2F2F2;
}
.login h4.social { margin-top: 20px; }
.field {
border: 1px solid #6E6E6E;
border-radius: 4px;
padding: 8px 10px;
color: #9A9A9A;
font-size: 11px;
margin-bottom: 9px;
background: #3D3D3D;
}
.login .link { color: #7EE0BB; font-size: 11px; margin: 0 0 12px; }
.btn {
display: block;
text-align: center;
border-radius: 4px;
padding: 9px 10px;
font-size: 12.5px;
font-weight: 600;
}
.btn.primary { background: #7EE0BB; color: #1E1E1E; }
.btn.ghost {
position: relative;
background: #3A3A3A;
color: #E9E9E9;
border: 1px solid #6E6E6E;
margin-top: 8px;
font-weight: 500;
display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn.ghost svg { width: 13px; height: 13px; flex: 0 0 13px; }
.login .tiny { font-size: 10.5px; color: #CFCFCF; margin: 10px 0 0; }
.login .tiny span { color: #7EE0BB; margin-left: 8px; }
/* Callout badges pinned to the mockup, numbered to match the steps */
.callout {
position: absolute;
width: 30px; height: 30px;
border-radius: 50%;
background: var(--lime);
color: var(--ink);
font-size: 14px; font-weight: 800;
display: grid; place-items: center;
box-shadow: 0 0 0 3px var(--paper);
z-index: 2;
}
.callout { top: 50%; transform: translateY(-50%); right: -33px; }
.callout.c1 { right: -15px; }
.shot-caption {
font-size: 14px;
color: var(--muted);
margin-top: 12px;
padding-right: 18px;
}
@media (max-width: 700px) {
h1 { font-size: 36px; }
}
</style>
</head>
<body>
<div class="kb">
<h1>How to Access & Log In <span style="white-space:nowrap">to zConnect</span></h1>
<div class="hero">
<div class="hero-copy">
<ol class="steps">
<li>
<strong>Go to the zConnect portal</strong>
<span>Open <a href="https://portal.zioskconnect.com/apps" rel="noopener">portal.zioskconnect.com/apps</a> in your browser. Worth bookmarking.</span>
</li>
<li>
<strong>Enter your email address and password</strong>
<span>Type them into the two fields, then select <b>Sign in</b>.</span>
</li>
<li>
<strong>Using Single Sign-On (SSO)?</strong>
<span>Skip the fields and select <b>Work Account</b> under "Sign in with your social account" instead.</span>
</li>
</ol>
<div class="note"><b>Not sure which option is yours?</b> Check with your IT team or your Ziosk Client Director and they'll point you the right way.</div>
</div>
<div class="shot-wrap" aria-hidden="true">
<div class="shot">
<div class="browser">
<div class="chrome">
<div class="dots"><i></i><i></i><i></i></div>
<div class="url">portal.zioskconnect.com/apps</div>
<span class="callout c1">1</span>
</div>
<div class="login">
<h4>Sign in with your existing account</h4>
<div class="fields">
<div class="field">Email Address</div>
<div class="field">Password</div>
<span class="callout c2">2</span>
</div>
<p class="link">Forgot password?</p>
<span class="btn primary">Sign in</span>
<p class="tiny">Don't have an account? <span>Create account</span></p>
<h4 class="social">Sign in with your social account</h4>
<span class="btn ghost" id="work">
<svg viewBox="0 0 24 24" fill="none" stroke="#E9E9E9" stroke-width="2" stroke-linejoin="round"><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
Work Account
<span class="callout c3">3</span>
</span>
<span class="btn ghost">Microsoft Account</span>
<span class="btn ghost">Google</span>
</div>
</div>
</div>
<p class="shot-caption">Numbered to match the steps.</p>
</div>
</div>
</div>
</body>
</html>
