setup onboarding page
This commit is contained in:
232
src/index.css
232
src/index.css
@@ -1179,3 +1179,235 @@ main {
|
||||
.demo-flag:hover .demo-flag-exit {
|
||||
background: #6b4600;
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────────────────────────────────
|
||||
Store setup
|
||||
|
||||
Layout only. Every colour is an existing token — brand purple for the
|
||||
current step, the ink scale for text, --color-line for anything at rest —
|
||||
so the flow reads as part of the console rather than a microsite bolted
|
||||
onto it.
|
||||
───────────────────────────────────────────────────────────────────────── */
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* The compact indicator is the phone's, and the full one everything above it.
|
||||
Not a squeeze of the same markup: five labelled nodes are unreadable at
|
||||
360px, and "Step 2 of 5" answers the same question in the space there is. */
|
||||
.ob-stepper-compact { display: block; }
|
||||
.ob-stepper { display: none; }
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.ob-stepper-compact { display: none; }
|
||||
.ob-stepper {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ob-step {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ob-step-node {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 999px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font: 600 12px/1 var(--font-sans);
|
||||
font-variant-numeric: tabular-nums;
|
||||
border: 1px solid var(--color-line);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-ink-4);
|
||||
transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
|
||||
}
|
||||
|
||||
.ob-step-label {
|
||||
font: 500 12.5px/1.3 var(--font-sans);
|
||||
color: var(--color-ink-4);
|
||||
text-align: center;
|
||||
transition: color .2s;
|
||||
}
|
||||
|
||||
/* The connector sits behind the nodes and stops short of both, so it reads as
|
||||
a join rather than an underline. */
|
||||
.ob-step-line {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: calc(50% + 22px);
|
||||
right: calc(-50% + 22px);
|
||||
height: 1px;
|
||||
background: var(--color-line);
|
||||
transition: background .3s;
|
||||
}
|
||||
.ob-step-line[data-filled='yes'] { background: var(--color-brand); }
|
||||
|
||||
.ob-step[data-state='current'] .ob-step-node {
|
||||
background: var(--color-brand);
|
||||
border-color: var(--color-brand);
|
||||
color: #fff;
|
||||
/* A soft ring rather than a heavier border: it marks the position without
|
||||
making the node look like a button waiting to be pressed. */
|
||||
box-shadow: 0 0 0 4px var(--color-brand-tint);
|
||||
}
|
||||
.ob-step[data-state='current'] .ob-step-label {
|
||||
color: var(--color-ink-1);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ob-step[data-state='done'] .ob-step-node {
|
||||
background: var(--color-brand);
|
||||
border-color: var(--color-brand);
|
||||
color: #fff;
|
||||
}
|
||||
.ob-step[data-state='done'] .ob-step-label { color: var(--color-ink-2); }
|
||||
|
||||
/* Selectable cards — the catalogue choice and the delivery question. Hover and
|
||||
selection are carried by the border and a tint, never by a shadow that would
|
||||
make one card float above the others. */
|
||||
.ob-choice {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 20px;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 14px;
|
||||
background: var(--color-surface);
|
||||
cursor: pointer;
|
||||
transition: border-color .18s, background .18s, transform .18s;
|
||||
}
|
||||
.ob-choice:hover { border-color: var(--color-brand); background: var(--color-brand-tint); }
|
||||
.ob-choice:focus-visible {
|
||||
outline: 2px solid var(--color-brand);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.ob-choice[aria-pressed='true'],
|
||||
.ob-choice[data-selected='true'] {
|
||||
border-color: var(--color-brand);
|
||||
background: var(--color-brand-tint);
|
||||
}
|
||||
|
||||
/* The drop zone. The dashed edge is the only place in the console that uses
|
||||
one, and it earns it: it says "put something here" before any label is
|
||||
read. */
|
||||
.ob-drop {
|
||||
border: 1.5px dashed var(--color-slate-300);
|
||||
border-radius: 14px;
|
||||
background: var(--color-surface-subtle);
|
||||
padding: 32px 20px;
|
||||
text-align: center;
|
||||
transition: border-color .18s, background .18s;
|
||||
}
|
||||
.ob-drop[data-over='true'] {
|
||||
border-color: var(--color-brand);
|
||||
background: var(--color-brand-tint);
|
||||
}
|
||||
|
||||
/* One step in, one step out. Short enough not to be waited on. */
|
||||
@keyframes ob-step-in {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
.ob-panel { animation: ob-step-in .22s cubic-bezier(.4,0,.2,1); }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ob-panel { animation: none; }
|
||||
.ob-step-line, .ob-step-node, .ob-choice { transition: none; }
|
||||
}
|
||||
|
||||
/* Three benefit cards on the welcome screen: one column on a phone, three
|
||||
across from tablet. Same grid rhythm as .card-grid elsewhere. */
|
||||
.ob-benefits {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
@media (min-width: 720px) {
|
||||
.ob-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
/* Two large choices — upload or add by hand. Stacked on a phone so neither is
|
||||
the cramped one. */
|
||||
.ob-choices {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
@media (min-width: 720px) {
|
||||
.ob-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
/* The stock routine, drawn. Vertical on a phone so each stage reads as a line;
|
||||
a row from tablet, where six across still fits without shrinking the text. */
|
||||
.ob-flow {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
.ob-flow-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
background: var(--color-surface-subtle);
|
||||
border: 1px solid var(--color-line);
|
||||
}
|
||||
.ob-flow-num {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
flex: none;
|
||||
border-radius: 999px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: var(--color-brand-tint);
|
||||
color: var(--color-brand);
|
||||
font: 600 11px/1 var(--font-sans);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
@media (min-width: 900px) {
|
||||
.ob-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
/* One tick, drawn once. A business tool does not need confetti, and anything
|
||||
longer than this delays the three actions the screen exists to offer. */
|
||||
.ob-tick {
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
border-radius: 999px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #10b981;
|
||||
color: #fff;
|
||||
animation: ob-pop .38s cubic-bezier(.34, 1.56, .64, 1);
|
||||
}
|
||||
@keyframes ob-pop {
|
||||
0% { transform: scale(.6); opacity: 0; }
|
||||
100% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ob-tick { animation: none; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user