Complete GeoIntel visual system and portfolio case study
This commit is contained in:
Jens
@@ -1301,3 +1301,117 @@
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Sprint 231 - motion language and interactive AI pipeline
|
||||
========================================================================== */
|
||||
|
||||
.ai-pipeline {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
overflow: hidden;
|
||||
padding: clamp(1rem, 2vw, 1.5rem);
|
||||
border: 1px solid color-mix(in srgb, var(--gi-brand-500) 25%, var(--gi-line));
|
||||
border-radius: var(--gi-radius-lg);
|
||||
color: #edfdf8;
|
||||
background:
|
||||
linear-gradient(115deg, rgba(255,255,255,.035), transparent 38%),
|
||||
radial-gradient(circle at 82% 10%, rgba(69, 209, 177, .15), transparent 20rem),
|
||||
#082f2b;
|
||||
box-shadow: var(--gi-shadow-md);
|
||||
}
|
||||
|
||||
.overview-command-center { display: grid; gap: var(--gi-space-4); padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--gi-line); border-radius: var(--gi-radius-lg); background: var(--gi-surface); box-shadow: var(--gi-shadow-sm); }
|
||||
.overview-command-heading { display: flex; gap: var(--gi-space-4); align-items: end; justify-content: space-between; }
|
||||
.overview-command-heading h2 { margin: .2rem 0 0; font: 700 clamp(1.15rem, 2vw, 1.55rem)/1.2 Manrope, sans-serif; }
|
||||
.overview-command-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--gi-space-3); }
|
||||
.overview-command-card { position: relative; display: grid; gap: .35rem; min-width: 0; min-height: 8rem; padding: var(--gi-space-4); border: 1px solid var(--gi-line); border-radius: var(--gi-radius-md); color: var(--gi-ink-800); background: var(--gi-surface-soft); text-align: left; transition: transform .2s var(--gi-ease), border-color .2s var(--gi-ease), box-shadow .2s var(--gi-ease); }
|
||||
button.overview-command-card { cursor: pointer; }
|
||||
.overview-command-card:hover { transform: translateY(-2px); border-color: var(--gi-line-accent); box-shadow: var(--gi-shadow-md); }
|
||||
.overview-command-card > span { color: var(--gi-ink-400); font-size: var(--gi-text-3xs); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
|
||||
.overview-command-card > strong { overflow: hidden; color: var(--gi-ink-950); font: 700 1.2rem/1.2 Manrope,sans-serif; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.overview-command-card > p { margin: 0; color: var(--gi-ink-400); font-size: var(--gi-text-2xs); line-height: 1.55; }
|
||||
.overview-command-card-progress { color: #fff; background: linear-gradient(145deg,var(--gi-brand-800),#0a5148); }
|
||||
.overview-command-card-progress > :where(span,strong,p) { color: inherit; }
|
||||
.overview-command-card-progress > span, .overview-command-card-progress > p { color: rgba(239,255,250,.66); }
|
||||
.overview-command-card-progress > div { align-self: end; height: 4px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.14); }
|
||||
.overview-command-card-progress > div > i { display: block; height: 100%; border-radius: inherit; background: #84e0c9; transition: width .5s var(--gi-ease-out); }
|
||||
|
||||
.ai-pipeline::before {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(150, 232, 212, .055) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(150, 232, 212, .055) 1px, transparent 1px);
|
||||
background-size: 3rem 3rem;
|
||||
content: '';
|
||||
mask-image: linear-gradient(90deg, transparent, #000 25%, #000);
|
||||
}
|
||||
|
||||
.ai-pipeline-heading {
|
||||
display: flex;
|
||||
gap: var(--gi-space-5);
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.ai-pipeline-heading .eyebrow { color: #84dfca; }
|
||||
.ai-pipeline-heading h3 { margin: .25rem 0 0; color: #fff; font: 700 clamp(1.15rem, 2vw, 1.55rem)/1.15 Manrope, sans-serif; }
|
||||
.ai-pipeline-heading p:last-child { max-width: 68ch; margin: .45rem 0 0; color: rgba(231, 251, 245, .65); font-size: var(--gi-text-xs); line-height: 1.6; }
|
||||
.ai-pipeline-gpu { display: inline-flex; flex: 0 0 auto; gap: .45rem; align-items: center; padding: .48rem .65rem; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.06); font-size: var(--gi-text-2xs); font-weight: 700; }
|
||||
.ai-pipeline-gpu i { width: .48rem; height: .48rem; border-radius: 50%; background: #e3b867; }
|
||||
.ai-pipeline-gpu-ready i { background: #67e0bc; box-shadow: 0 0 0 5px rgba(103,224,188,.12); animation: ai-gpu-pulse 2.4s ease-out infinite; }
|
||||
|
||||
.ai-pipeline-track { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .55rem; margin-top: 1.35rem; }
|
||||
.ai-pipeline-flow { position: absolute; top: 1.55rem; right: 8%; left: 8%; height: 2px; overflow: hidden; background: rgba(154, 228, 211, .15); }
|
||||
.ai-pipeline-flow::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #76e1c7, transparent); content: ''; transform: translateX(-100%); animation: ai-flow 4.8s ease-in-out infinite; }
|
||||
.ai-pipeline-stage { position: relative; z-index: 1; display: grid; gap: .28rem; justify-items: center; min-width: 0; padding: .65rem .4rem; border: 1px solid rgba(190, 235, 224, .12); border-radius: .8rem; color: rgba(232, 249, 244, .58); background: rgba(4, 39, 36, .82); text-align: center; cursor: pointer; transition: transform .22s ease, border-color .22s ease, background .22s ease; }
|
||||
.ai-pipeline-stage:hover, .ai-pipeline-stage:focus-visible { transform: translateY(-3px); border-color: rgba(131, 226, 204, .52); }
|
||||
.ai-pipeline-stage[aria-selected='true'] { border-color: #79d9c3; color: #fff; background: rgba(25, 102, 89, .88); box-shadow: 0 12px 30px rgba(0,0,0,.2); }
|
||||
.ai-pipeline-stage > span { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: .65rem; background: rgba(255,255,255,.06); }
|
||||
.ai-pipeline-stage-ready > span { color: #8ce6d1; }
|
||||
.ai-pipeline-stage svg { width: 1rem; height: 1rem; }
|
||||
.ai-pipeline-stage strong { overflow: hidden; max-width: 100%; font-size: var(--gi-text-2xs); text-overflow: ellipsis; white-space: nowrap; }
|
||||
.ai-pipeline-stage small { color: rgba(231, 250, 245, .45); font-size: var(--gi-text-3xs); text-transform: uppercase; }
|
||||
.ai-pipeline-detail { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .8rem; align-items: center; margin-top: .8rem; padding: .8rem; border-left: 2px solid #76dfc6; border-radius: 0 .7rem .7rem 0; background: rgba(255,255,255,.055); animation: ai-detail-in .36s ease both; }
|
||||
.ai-pipeline-detail > span { color: #7edfc9; font: 700 1.35rem/1 Manrope, sans-serif; }
|
||||
.ai-pipeline-detail strong { color: #fff; font-size: var(--gi-text-sm); }
|
||||
.ai-pipeline-detail p { margin: .2rem 0 0; color: rgba(233, 250, 246, .61); font-size: var(--gi-text-2xs); line-height: 1.55; }
|
||||
|
||||
/* Micro-interactions stay functional rather than decorative. */
|
||||
.workbench-content > * { animation: gi-workspace-enter .32s var(--gi-ease-out) both; }
|
||||
.status-tile, .workflow-guidance-step, .quality-history-list > *, .latest-artifact-card { transition: transform .2s var(--gi-ease), box-shadow .2s var(--gi-ease), border-color .2s var(--gi-ease); }
|
||||
.status-tile:hover, .workflow-guidance-step:hover, .quality-history-list > *:hover, .latest-artifact-card:hover { transform: translateY(-2px); box-shadow: var(--gi-shadow-md); }
|
||||
.result-state-loading, .geo-results-loading { position: relative; overflow: hidden; }
|
||||
.result-state-loading::after, .geo-results-loading::after { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 20%, rgba(116, 218, 194, .13) 42%, transparent 64%); content: ''; transform: translateX(-100%); animation: gi-skeleton-sweep 1.8s ease-in-out infinite; }
|
||||
.result-state-error { animation: gi-error-enter .32s ease both; }
|
||||
.geo-results-panel:not(:has(.geo-results-empty)) { animation: gi-drawer-enter .3s var(--gi-ease-out) both; }
|
||||
|
||||
@keyframes ai-flow { 55%,100% { transform: translateX(100%); } }
|
||||
@keyframes ai-gpu-pulse { 70% { box-shadow: 0 0 0 9px rgba(103,224,188,0); } }
|
||||
@keyframes ai-detail-in { from { opacity: 0; transform: translateY(5px); } }
|
||||
@keyframes gi-workspace-enter { from { opacity: 0; transform: translateY(6px); } }
|
||||
@keyframes gi-skeleton-sweep { 60%,100% { transform: translateX(100%); } }
|
||||
@keyframes gi-error-enter { from { opacity: 0; transform: translateX(-4px); } }
|
||||
@keyframes gi-drawer-enter { from { opacity: .4; transform: translateX(12px); } }
|
||||
|
||||
@media (max-width: 840px) {
|
||||
.ai-pipeline-heading { flex-direction: column; }
|
||||
.ai-pipeline-track { grid-template-columns: repeat(5, minmax(6.5rem, 1fr)); overflow-x: auto; padding-bottom: .35rem; }
|
||||
.ai-pipeline-flow { display: none; }
|
||||
.overview-command-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.overview-command-heading { align-items: stretch; flex-direction: column; }
|
||||
.overview-command-grid { grid-template-columns: minmax(0,1fr); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ai-pipeline *, .ai-pipeline *::before, .ai-pipeline *::after,
|
||||
.workbench-content > *, .result-state-loading::after, .geo-results-loading::after,
|
||||
.geo-results-panel:not(:has(.geo-results-empty)) {
|
||||
animation: none !important;
|
||||
transition-duration: .01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user