Add Use Cases Showcase block with animated circles and descriptions
This commit is contained in:
Matt Batchelder
@@ -3874,3 +3874,404 @@ p:last-child { margin-bottom: 0; }
|
||||
transform: rotate(-12deg) translateY(0) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
USE CASES SHOWCASE (uc-*)
|
||||
Four animated circles in a rounded-border track beneath the hero.
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.uc-track {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 1.5rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-xl, 1.25rem);
|
||||
padding: 2.5rem 3rem;
|
||||
background: var(--color-bg-alt);
|
||||
}
|
||||
|
||||
.uc-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.uc-circle {
|
||||
width: 158px;
|
||||
height: 158px;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid var(--color-border);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: var(--color-bg);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.uc-item-body {
|
||||
margin-top: 1.1rem;
|
||||
text-align: center;
|
||||
}
|
||||
.uc-item-title {
|
||||
font-size: .875rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-heading);
|
||||
}
|
||||
.uc-item-desc {
|
||||
font-size: .75rem;
|
||||
color: var(--color-muted);
|
||||
margin-top: .3rem;
|
||||
line-height: 1.45;
|
||||
max-width: 160px;
|
||||
}
|
||||
|
||||
/* ── Shared inner wrapper ─────────────────────────────────────────────── */
|
||||
.uc-inner {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 18px;
|
||||
box-sizing: border-box;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════
|
||||
1 — MENU BOARD
|
||||
══════════════════════════════════ */
|
||||
.uc-inner--menu { gap: 0; padding: 14px 18px; }
|
||||
|
||||
.uc-menu-header {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
border-radius: 3px;
|
||||
background: var(--color-primary);
|
||||
margin-bottom: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.uc-menu-row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px 4px;
|
||||
border-radius: 3px;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.uc-menu-row + .uc-menu-row { margin-top: 4px; }
|
||||
|
||||
.uc-menu-divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: var(--color-border);
|
||||
margin: 6px 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.uc-menu-name {
|
||||
height: 7px;
|
||||
flex: 1;
|
||||
border-radius: 3px;
|
||||
background: var(--color-border);
|
||||
}
|
||||
.uc-menu-name--sm { max-width: 55%; }
|
||||
.uc-menu-price {
|
||||
height: 7px;
|
||||
width: 22px;
|
||||
border-radius: 3px;
|
||||
background: var(--color-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.uc-menu-row--highlight {
|
||||
background: color-mix(in srgb, var(--color-primary) 15%, transparent);
|
||||
animation: uc-menu-highlight 3s ease-in-out infinite;
|
||||
}
|
||||
.uc-menu-row--highlight .uc-menu-name,
|
||||
.uc-menu-row--highlight .uc-menu-price {
|
||||
background: var(--color-primary);
|
||||
animation: uc-menu-price-update 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes uc-menu-highlight {
|
||||
0%, 100% { background: color-mix(in srgb, var(--color-primary) 15%, transparent); }
|
||||
45%, 55% { background: color-mix(in srgb, var(--color-accent) 25%, transparent); }
|
||||
}
|
||||
@keyframes uc-menu-price-update {
|
||||
0%, 38% { opacity: 1; }
|
||||
42% { opacity: 0; }
|
||||
48% { opacity: 1; }
|
||||
52% { opacity: 0; }
|
||||
58%, 100%{ opacity: 1; }
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════
|
||||
2 — EVENT DISPLAY
|
||||
══════════════════════════════════ */
|
||||
.uc-inner--event { gap: 0; padding: 16px 18px; }
|
||||
|
||||
.uc-event-header {
|
||||
width: 100%;
|
||||
height: 13px;
|
||||
border-radius: 3px;
|
||||
background: var(--color-border);
|
||||
margin-bottom: 10px;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.uc-event-header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
height: 100%;
|
||||
width: 45%;
|
||||
background: var(--color-primary);
|
||||
border-radius: 3px;
|
||||
animation: uc-event-hdr-move 4s ease-in-out infinite;
|
||||
}
|
||||
.uc-event-row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.uc-event-row + .uc-event-row { margin-top: 7px; }
|
||||
.uc-event-time {
|
||||
height: 7px;
|
||||
width: 22px;
|
||||
border-radius: 2px;
|
||||
background: var(--color-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.uc-event-bar {
|
||||
height: 14px;
|
||||
flex: 1;
|
||||
border-radius: 3px;
|
||||
background: var(--color-border);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.uc-event-bar::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.3) 50%, transparent 100%);
|
||||
transform: translateX(-150%);
|
||||
}
|
||||
.uc-event-bar--active { background: var(--color-primary); }
|
||||
.uc-event-bar--accent { background: color-mix(in srgb, var(--color-accent) 55%, var(--color-border)); }
|
||||
.uc-event-bar--active::after { animation: uc-event-shimmer 2.2s linear infinite; }
|
||||
.uc-event-bar--accent::after { animation: uc-event-shimmer 2.2s linear infinite 1.1s; }
|
||||
|
||||
.uc-event-cursor {
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
left: 26px;
|
||||
width: 1.5px;
|
||||
height: calc(100% - 44px);
|
||||
background: var(--color-accent);
|
||||
opacity: .75;
|
||||
pointer-events: none;
|
||||
animation: uc-event-cursor-move 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes uc-event-hdr-move {
|
||||
0%, 20% { transform: translateX(0%); }
|
||||
55%, 80% { transform: translateX(125%); }
|
||||
100% { transform: translateX(0%); }
|
||||
}
|
||||
@keyframes uc-event-shimmer {
|
||||
0% { transform: translateX(-150%); }
|
||||
100% { transform: translateX(250%); }
|
||||
}
|
||||
@keyframes uc-event-cursor-move {
|
||||
0%, 10% { left: 26px; opacity: .5; }
|
||||
50% { left: calc(100% - 22px); opacity: .9; }
|
||||
90%, 100%{ left: 26px; opacity: .5; }
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════
|
||||
3 — OFFICE DASHBOARD
|
||||
══════════════════════════════════ */
|
||||
.uc-inner--dashboard {
|
||||
justify-content: flex-end;
|
||||
padding: 18px 16px 12px;
|
||||
}
|
||||
.uc-db-bars {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 9px;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
}
|
||||
.uc-db-bar {
|
||||
flex: 1;
|
||||
border-radius: 4px 4px 0 0;
|
||||
transform-origin: bottom;
|
||||
transform: scaleY(.55);
|
||||
}
|
||||
.uc-db-bar--1, .uc-db-bar--3 { background: var(--color-primary); }
|
||||
.uc-db-bar--2, .uc-db-bar--4 { background: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
|
||||
|
||||
.uc-db-bar--1 { animation: uc-db-scale-1 3s ease-in-out infinite; }
|
||||
.uc-db-bar--2 { animation: uc-db-scale-2 3s ease-in-out infinite .4s; }
|
||||
.uc-db-bar--3 { animation: uc-db-scale-3 3s ease-in-out infinite .8s; }
|
||||
.uc-db-bar--4 { animation: uc-db-scale-4 3s ease-in-out infinite 1.2s; }
|
||||
|
||||
.uc-db-baseline {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: var(--color-border);
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.uc-db-labels {
|
||||
display: flex;
|
||||
gap: 9px;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.uc-db-lbl {
|
||||
flex: 1;
|
||||
height: 5px;
|
||||
border-radius: 2px;
|
||||
background: var(--color-border);
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
@keyframes uc-db-scale-1 {
|
||||
0%, 100% { transform: scaleY(.55); }
|
||||
40% { transform: scaleY(.82); }
|
||||
70% { transform: scaleY(.42); }
|
||||
}
|
||||
@keyframes uc-db-scale-2 {
|
||||
0%, 100% { transform: scaleY(.70); }
|
||||
40% { transform: scaleY(.38); }
|
||||
70% { transform: scaleY(.78); }
|
||||
}
|
||||
@keyframes uc-db-scale-3 {
|
||||
0%, 100% { transform: scaleY(.40); }
|
||||
40% { transform: scaleY(.68); }
|
||||
70% { transform: scaleY(.58); }
|
||||
}
|
||||
@keyframes uc-db-scale-4 {
|
||||
0%, 100% { transform: scaleY(.62); }
|
||||
40% { transform: scaleY(.50); }
|
||||
70% { transform: scaleY(.88); }
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════
|
||||
4 — WAYFINDING
|
||||
══════════════════════════════════ */
|
||||
.uc-inner--wayfinding { padding: 0; }
|
||||
|
||||
/* Corridor lines */
|
||||
.uc-wf-corridor {
|
||||
position: absolute;
|
||||
background: var(--color-border);
|
||||
}
|
||||
.uc-wf-corridor--h {
|
||||
height: 8px;
|
||||
width: 70%;
|
||||
top: 50%;
|
||||
left: 15%;
|
||||
transform: translateY(-50%);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.uc-wf-corridor--v {
|
||||
width: 8px;
|
||||
height: 54%;
|
||||
left: 50%;
|
||||
top: 23%;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Rooms */
|
||||
.uc-wf-room {
|
||||
position: absolute;
|
||||
border: 1.5px solid var(--color-border);
|
||||
border-radius: 3px;
|
||||
background: var(--color-bg-alt);
|
||||
}
|
||||
.uc-wf-room--1 { width: 32px; height: 28px; top: 17%; left: 17%; }
|
||||
.uc-wf-room--2 { width: 28px; height: 26px; top: 17%; right: 17%; }
|
||||
.uc-wf-room--3 { width: 30px; height: 28px; bottom: 17%; left: 50%; transform: translateX(-50%); }
|
||||
|
||||
/* Location dot */
|
||||
.uc-wf-dot {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary);
|
||||
top: 50%;
|
||||
left: 36%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.uc-wf-dot::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -5px;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid var(--color-primary);
|
||||
animation: uc-wf-pulse 2s ease-out infinite;
|
||||
}
|
||||
|
||||
/* Direction arrow */
|
||||
.uc-wf-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 36%;
|
||||
transform: translate(-50%, calc(-50% - 18px));
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 11px solid var(--color-accent);
|
||||
animation: uc-wf-arrow-bob 1.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes uc-wf-pulse {
|
||||
0% { transform: scale(1); opacity: .7; }
|
||||
70% { transform: scale(2.4); opacity: 0; }
|
||||
100% { transform: scale(1); opacity: 0; }
|
||||
}
|
||||
@keyframes uc-wf-arrow-bob {
|
||||
0%, 100% { transform: translate(-50%, calc(-50% - 18px)); }
|
||||
50% { transform: translate(-50%, calc(-50% - 24px)); }
|
||||
}
|
||||
|
||||
/* ── Responsive ──────────────────────────────────────────── */
|
||||
@media (max-width: 900px) {
|
||||
.uc-track { flex-wrap: wrap; justify-content: center; gap: 2rem; padding: 2.5rem 2rem; }
|
||||
.uc-item { width: calc(50% - 1rem); flex: none; }
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
.uc-track { padding: 2rem 1.5rem; }
|
||||
.uc-item { width: 100%; }
|
||||
.uc-item-desc { max-width: none; }
|
||||
}
|
||||
|
||||
/* ── Reduced-motion overrides ────────────────────────────── */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.uc-menu-row--highlight,
|
||||
.uc-menu-row--highlight .uc-menu-name,
|
||||
.uc-menu-row--highlight .uc-menu-price,
|
||||
.uc-event-header::after,
|
||||
.uc-event-bar--active::after,
|
||||
.uc-event-bar--accent::after,
|
||||
.uc-event-cursor,
|
||||
.uc-db-bar--1, .uc-db-bar--2, .uc-db-bar--3, .uc-db-bar--4,
|
||||
.uc-wf-dot::after,
|
||||
.uc-wf-arrow { animation: none !important; }
|
||||
/* Static bar heights when animation is off */
|
||||
.uc-db-bar--1 { transform: scaleY(.55) !important; }
|
||||
.uc-db-bar--2 { transform: scaleY(.70) !important; }
|
||||
.uc-db-bar--3 { transform: scaleY(.40) !important; }
|
||||
.uc-db-bar--4 { transform: scaleY(.62) !important; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user