/* ==========================================================================
Augmify Dashboard Mock — styles for tmpl/partials/dashboard-mock.tmpl.html
SELF-CONTAINED: this file owns ALL .dash* styling.
It is loaded two ways:
1. layout.tmpl.html when the cinematic flag is true (home);
2. the dashboard-mock partial itself injects a body so the mock
styles itself on non-cinematic pages (/platform) — pages.css does NOT
include dashboard styles. Never move .dash* rules elsewhere.
Requires tokens.css (custom properties) which the layout always loads.
========================================================================== */
.dash {
padding: 0;
overflow: hidden;
font-size: var(--text-small);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), var(--glass-bg) 30%);
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), 0 0 60px rgba(255, 106, 0, 0.07);
}
/* The mock is a display object, not a real app — neutralise card hover lift. */
.dash:hover,
.dash:focus-within {
transform: none;
}
/* ---- Window chrome ----------------------------------------------------------- */
.dash__chrome {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--glass-stroke);
background: rgba(5, 5, 6, 0.45);
}
.dash__dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex: none;
}
.dash__dot--red { background: #ff5f57; }
.dash__dot--amber { background: #febc2e; }
.dash__dot--green { background: #28c840; }
.dash__url {
margin-left: var(--sp-3);
padding: var(--sp-1) var(--sp-3);
border-radius: var(--radius-pill);
border: 1px solid var(--glass-stroke);
background: rgba(255, 255, 255, 0.04);
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.02em;
color: var(--ink-300);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
/* ---- Panel grid ----------------------------------------------------------------- */
.dash__grid {
display: grid;
gap: var(--sp-3);
padding: var(--sp-4);
grid-template-columns: 1fr;
}
@media (min-width: 40em) {
.dash__grid {
grid-template-columns: repeat(6, 1fr);
}
.dash__panel--prompt { grid-column: span 4; }
.dash__panel--tokens { grid-column: span 2; }
.dash__panel--queue { grid-column: span 3; }
.dash__panel--previews { grid-column: span 3; }
.dash__panel--usage { grid-column: span 6; }
}
.dash__panel {
display: grid;
align-content: start;
gap: var(--sp-3);
padding: var(--sp-4);
border: 1px solid var(--glass-stroke);
border-radius: calc(var(--radius-card) - 8px);
background: rgba(255, 255, 255, 0.03);
min-width: 0;
}
.dash__title {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-500);
}
.dash__foot {
font-family: var(--font-mono);
font-size: 0.6875rem;
color: var(--ink-500);
max-width: none;
}
/* ---- Prompt editor ----------------------------------------------------------------- */
.dash__prompt {
font-family: var(--font-mono);
font-size: 0.8125rem;
line-height: 1.6;
color: var(--ink-300);
min-height: 5.2em;
max-width: none;
}
.dash__caret {
display: inline-block;
width: 7px;
height: 1.05em;
margin-left: 2px;
vertical-align: text-bottom;
background: var(--orange-500);
animation: dash-caret 1s step-end infinite;
}
@keyframes dash-caret {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.dash__prompt-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
flex-wrap: wrap;
}
.dash__chip {
display: inline-flex;
align-items: center;
padding: 2px var(--sp-3);
border-radius: var(--radius-pill);
border: 1px solid var(--glass-stroke);
background: rgba(255, 255, 255, 0.04);
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.04em;
color: var(--ink-300);
white-space: nowrap;
}
.dash__chip--hot {
background: linear-gradient(180deg, var(--orange-400), var(--orange-600));
border-color: var(--orange-600);
color: #140700;
font-weight: 700;
}
/* ---- Token ring ----------------------------------------------------------------- */
.dash__ring-wrap {
position: relative;
display: grid;
place-items: center;
width: 7rem;
margin-inline: auto;
}
.dash__ring {
width: 100%;
height: auto;
transform: rotate(-90deg);
}
.dash__ring circle {
fill: none;
stroke-width: 7;
}
.dash__ring-track {
stroke: rgba(255, 255, 255, 0.08);
}
.dash__ring-fill {
stroke: var(--orange-500);
stroke-linecap: round;
filter: drop-shadow(0 0 6px rgba(255, 106, 0, 0.55));
}
.dash__tokens {
position: absolute;
font-family: var(--font-mono);
font-size: 1.0625rem;
font-weight: 400;
color: var(--ink-100);
letter-spacing: 0.01em;
}
/* ---- Generation queue ----------------------------------------------------------------- */
.dash__queue {
display: grid;
gap: var(--sp-3);
}
.dash__job {
display: grid;
grid-template-columns: minmax(0, 1.2fr) auto minmax(3rem, 1fr) auto;
align-items: center;
gap: var(--sp-2);
}
.dash__job-name {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--ink-300);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dash__bar {
position: relative;
height: 5px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.dash__bar-fill {
position: absolute;
inset: 0 auto 0 0;
border-radius: inherit;
background: linear-gradient(90deg, var(--ember-700), var(--orange-500), var(--gold-400));
overflow: hidden;
}
/* shimmer */
.dash__bar-fill::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
transform: translateX(-100%);
animation: dash-shimmer 2.2s ease-in-out infinite;
}
@keyframes dash-shimmer {
60%, 100% { transform: translateX(100%); }
}
.dash__pct {
font-family: var(--font-mono);
font-size: 0.6875rem;
color: var(--gold-400);
min-width: 3ch;
text-align: right;
}
/* ---- Preview thumbs ----------------------------------------------------------------- */
.dash__thumbs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-3);
}
.dash__thumb {
position: relative;
aspect-ratio: 16 / 9;
border-radius: calc(var(--radius-card) - 10px);
overflow: hidden;
background-size: cover;
background-position: center;
/* Poster sits as the TOP layer of a multi-background; if it 404s that
layer simply doesn't paint and the gradients beneath still render. */
background-color: #0a0a0d;
}
.dash__thumb--luxury {
background-image:
url('/assets/gen/commercial-luxury-poster.webp'),
radial-gradient(120% 90% at 80% 0%, rgba(232, 180, 90, 0.28), transparent 55%),
linear-gradient(160deg, #16110a, #0a0a0d 65%);
}
.dash__thumb--retail {
background-image:
url('/assets/gen/commercial-retail-poster.webp'),
radial-gradient(100% 80% at 78% 6%, rgba(255, 133, 52, 0.26), transparent 55%),
linear-gradient(160deg, #170e0d, #0a0a0d 70%);
}
.dash__thumb::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 26px;
height: 26px;
border-radius: 50%;
background:
rgba(5, 5, 6, 0.55)
url('data:image/svg+xml,')
center / 14px no-repeat;
border: 1px solid rgba(255, 255, 255, 0.25);
}
/* ---- Mini analytics (8 bars) ----------------------------------------------------------- */
.dash__chart {
display: flex;
align-items: flex-end;
gap: var(--sp-2);
height: 64px;
}
.dash__chart span {
flex: 1;
height: var(--h, 40%);
border-radius: 4px 4px 0 0;
background: linear-gradient(180deg, var(--gold-400), var(--orange-500) 55%, var(--ember-700));
opacity: 0.9;
}
/* Staggered height growth once the mock is revealed (.in-view via site.js).
Without JS the bars are full height — content never hidden. */
html.js .dash[data-reveal] .dash__chart span {
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.7s var(--ease-out);
}
html.js .dash.in-view .dash__chart span {
transform: scaleY(1);
}
html.js .dash.in-view .dash__chart span:nth-child(2) { transition-delay: 60ms; }
html.js .dash.in-view .dash__chart span:nth-child(3) { transition-delay: 120ms; }
html.js .dash.in-view .dash__chart span:nth-child(4) { transition-delay: 180ms; }
html.js .dash.in-view .dash__chart span:nth-child(5) { transition-delay: 240ms; }
html.js .dash.in-view .dash__chart span:nth-child(6) { transition-delay: 300ms; }
html.js .dash.in-view .dash__chart span:nth-child(7) { transition-delay: 360ms; }
html.js .dash.in-view .dash__chart span:nth-child(8) { transition-delay: 420ms; }