hz/fragalytics
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updating

Browse Source
This commit is contained in:
Zeeshaun
2026-04-22 15:31:12 +00:00
parent 66aac50447
commit 45354397f1
3 changed files with 374 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Fragalytics.Web/Pages/ClipJobs/Index.cshtml
+7
View File
@@ -12,6 +12,13 @@
</div> </div>
</section> </section>
<section class="stats-grid">
<article class="card stat-card"><span class="eyebrow">Queued</span><h2>@Model.ClipJobs.Count(row => row.ClipJob.Status == "pending")</h2><p>Ready For Review</p></article>
<article class="card stat-card"><span class="eyebrow">Active</span><h2>@Model.ClipJobs.Count(row => row.ClipJob.Status == "rendering")</h2><p>Currently Rendering</p></article>
<article class="card stat-card"><span class="eyebrow">Delivered</span><h2>@Model.ClipJobs.Count(row => row.ClipJob.Status == "rendered")</h2><p>Playable Assets</p></article>
<article class="card stat-card"><span class="eyebrow">Attention</span><h2>@Model.ClipJobs.Count(row => row.ClipJob.Status == "failed")</h2><p>Failed Jobs</p></article>
</section>
<section class="card"> <section class="card">
@if (Model.ClipJobs.Count == 0) @if (Model.ClipJobs.Count == 0)
{ {
src/Fragalytics.Web/Pages/Index.cshtml
+18
View File
@@ -31,6 +31,24 @@
</div> </div>
</section> </section>
<section class="workflow-strip">
<article class="stage-panel">
<span class="eyebrow">01</span>
<h3>Ingest</h3>
<p class="muted">Manual `.dem` uploads go straight into the local queue with no external dependency chain.</p>
</article>
<article class="stage-panel">
<span class="eyebrow">02</span>
<h3>Score</h3>
<p class="muted">Parsed events become explainable highlights with visible tags, scores, and clip windows.</p>
</article>
<article class="stage-panel">
<span class="eyebrow">03</span>
<h3>Review</h3>
<p class="muted">Clip jobs stay inspectable and attachable now, so the render workflow is testable before automation lands.</p>
</article>
</section>
@if (!string.IsNullOrWhiteSpace(Model.StatusMessage)) @if (!string.IsNullOrWhiteSpace(Model.StatusMessage))
{ {
<section class="card callout callout-success"> <section class="card callout callout-success">
src/Fragalytics.Web/wwwroot/css/site.css
+349 -203
View File
@@ -1,98 +1,142 @@
:root { :root {
--bg: #efe6d5; --bg-0: #071016;
--panel: rgba(255, 251, 244, 0.92); --bg-1: #0b1820;
--panel-2: #f7efdf; --bg-2: #102430;
--panel-3: #f2e7d1; --panel: rgba(12, 24, 31, 0.88);
--ink: #1b1d1c; --panel-2: rgba(17, 33, 43, 0.9);
--muted: #5c615b; --panel-3: rgba(20, 42, 54, 0.95);
--accent: #b5532f; --ink: #edf5ef;
--accent-2: #1f5a52; --muted: #97afb0;
--accent-3: #846726; --accent: #ff7a3d;
--line: rgba(74, 62, 40, 0.14); --accent-2: #32d0b3;
--soft: rgba(239, 231, 218, 0.85); --accent-3: #ffd166;
--shadow: 0 22px 60px rgba(42, 31, 17, 0.09); --line: rgba(120, 164, 168, 0.18);
--shadow-soft: 0 10px 24px rgba(35, 29, 20, 0.06); --soft: rgba(255, 255, 255, 0.05);
--shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
--shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.22);
} }
* { box-sizing: border-box; } * { box-sizing: border-box; }
html {
color-scheme: dark;
}
body { body {
margin: 0; margin: 0;
font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
color: var(--ink);
background:
radial-gradient(circle at top left, rgba(181, 83, 47, 0.2), transparent 22rem),
radial-gradient(circle at top right, rgba(31, 90, 82, 0.14), transparent 26rem),
linear-gradient(180deg, #f8f3ea, var(--bg));
min-height: 100vh; min-height: 100vh;
color: var(--ink);
font-family: "Avenir Next Condensed", "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
background:
radial-gradient(circle at top left, rgba(255, 122, 61, 0.16), transparent 22rem),
radial-gradient(circle at top right, rgba(50, 208, 179, 0.12), transparent 24rem),
linear-gradient(180deg, var(--bg-2), var(--bg-1) 28%, var(--bg-0));
} }
a { color: var(--accent-2); text-decoration: none; } body::before {
a:hover { text-decoration: underline; }
h1, h2, h3, p { margin-top: 0; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
code { font-family: "Courier New", monospace; font-size: 0.9rem; }
.clip-player { width: 100%; max-width: 100%; border-radius: 14px; background: #000; aspect-ratio: 16 / 9; }
.site-header,
.page {
width: min(1180px, calc(100% - 2rem));
margin: 0 auto;
}
.site-shell {
position: relative;
padding-bottom: 3rem;
}
.site-shell::before {
content: ""; content: "";
position: fixed; position: fixed;
inset: 0; inset: 0;
pointer-events: none; pointer-events: none;
background: background:
linear-gradient(rgba(27, 29, 28, 0.03) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(27, 29, 28, 0.03) 1px, transparent 1px); linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
background-size: 36px 36px; background-size: 28px 28px;
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.32), transparent 70%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 78%);
opacity: 0.24; }
a {
color: var(--accent-2);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1, h2, h3, p {
margin-top: 0;
}
code {
font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
font-size: 0.84rem;
word-break: break-word;
}
.clip-player {
width: 100%;
max-width: 100%;
aspect-ratio: 16 / 9;
border-radius: 16px;
background: #000;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: var(--shadow-soft);
}
.site-header,
.page {
width: min(1240px, calc(100% - 2rem));
margin: 0 auto;
}
.site-shell {
padding-bottom: 3rem;
} }
.site-header { .site-header {
display: flex; display: grid;
justify-content: space-between; grid-template-columns: minmax(0, 1fr) auto;
align-items: flex-start; gap: 1.5rem;
gap: 2rem; align-items: end;
padding: 2rem 0 1.25rem; padding: 1.5rem 0 1.2rem;
} }
.site-branding { .site-branding {
max-width: 44rem;
position: relative; position: relative;
padding-left: 1rem; padding: 1rem 1.1rem 1rem 1.25rem;
border: 1px solid var(--line);
border-radius: 22px;
background:
linear-gradient(140deg, rgba(255, 122, 61, 0.08), transparent 32%),
linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
var(--panel);
box-shadow: var(--shadow-soft);
overflow: hidden;
} }
.site-branding::before { .site-branding::before {
content: ""; content: "";
position: absolute; position: absolute;
left: 0; left: 0;
top: 0.4rem; top: 1rem;
bottom: 0.4rem; bottom: 1rem;
width: 3px; width: 4px;
border-radius: 999px; border-radius: 999px;
background: linear-gradient(180deg, var(--accent), var(--accent-2)); background: linear-gradient(180deg, var(--accent), var(--accent-2));
} }
.brand { .brand {
color: var(--ink);
display: inline-block; display: inline-block;
font-size: clamp(2rem, 4vw, 3rem); color: var(--ink);
font-weight: 700; font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
letter-spacing: -0.04em; font-size: clamp(2.6rem, 6vw, 4.4rem);
line-height: 0.9;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 0.35rem; margin-bottom: 0.35rem;
} }
.brand:hover {
text-decoration: none;
}
.site-tagline {
max-width: 42rem;
font-size: 1rem;
letter-spacing: 0.01em;
}
.nav { .nav {
display: flex; display: flex;
gap: 0.75rem; gap: 0.75rem;
@@ -100,25 +144,23 @@ code { font-family: "Courier New", monospace; font-size: 0.9rem; }
} }
.nav a { .nav a {
padding: 0.65rem 1rem; padding: 0.8rem 1.15rem;
border: 1px solid rgba(31, 36, 33, 0.08);
border-radius: 999px; border-radius: 999px;
background: rgba(255, 251, 244, 0.8); border: 1px solid var(--line);
backdrop-filter: blur(8px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
box-shadow: var(--shadow-soft); box-shadow: var(--shadow-soft);
transition: transform 140ms ease, background 140ms ease, border-color 140ms ease; text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.72rem;
color: var(--ink);
transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
} }
.nav a:hover { .nav a:hover {
text-decoration: none;
transform: translateY(-1px); transform: translateY(-1px);
background: rgba(255, 251, 244, 0.96); border-color: rgba(50, 208, 179, 0.35);
border-color: rgba(31, 90, 82, 0.16); background: linear-gradient(180deg, rgba(50, 208, 179, 0.1), rgba(255, 255, 255, 0.03));
} text-decoration: none;
.site-tagline {
max-width: 38rem;
font-size: 1rem;
} }
.page { .page {
@@ -128,12 +170,14 @@ code { font-family: "Courier New", monospace; font-size: 0.9rem; }
.card { .card {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background: var(--panel);
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 24px; border-radius: 24px;
padding: 1.4rem; padding: 1.35rem;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
var(--panel);
box-shadow: var(--shadow); box-shadow: var(--shadow);
backdrop-filter: blur(10px); backdrop-filter: blur(12px);
} }
.card::after { .card::after {
@@ -141,59 +185,81 @@ code { font-family: "Courier New", monospace; font-size: 0.9rem; }
position: absolute; position: absolute;
inset: 0; inset: 0;
pointer-events: none; pointer-events: none;
background: linear-gradient(140deg, rgba(255, 255, 255, 0.22), transparent 40%); background: linear-gradient(140deg, rgba(255, 255, 255, 0.08), transparent 28%);
} }
.hero, .hero,
.split, .split,
.stats-grid, .stats-grid,
.meta-grid, .meta-grid,
.highlight-body { .highlight-body,
.workflow-strip {
display: grid; display: grid;
gap: 1rem; gap: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.hero { grid-template-columns: 1.45fr 0.95fr; align-items: stretch; } .hero {
.split { grid-template-columns: 1.15fr 1fr; } grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.9fr);
.split-heavy { grid-template-columns: 1.5fr 0.9fr; } background:
.stats-grid { grid-template-columns: repeat(4, 1fr); } radial-gradient(circle at right top, rgba(50, 208, 179, 0.12), transparent 16rem),
.meta-grid { grid-template-columns: repeat(4, 1fr); } linear-gradient(135deg, rgba(255, 122, 61, 0.08), transparent 28%),
.highlight-body { grid-template-columns: 1.2fr 0.8fr; align-items: start; } linear-gradient(180deg, rgba(8, 17, 22, 0.95), rgba(13, 29, 37, 0.92));
}
.split {
grid-template-columns: minmax(0, 1.15fr) minmax(340px, 1fr);
}
.split-heavy {
grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.95fr);
}
.stats-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.meta-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.highlight-body {
grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
align-items: start;
}
.workflow-strip {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.eyebrow { .eyebrow {
display: inline-block; display: inline-block;
font-size: 0.73rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--accent-3);
margin-bottom: 0.45rem; margin-bottom: 0.45rem;
color: var(--accent-3);
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.68rem;
font-weight: 700; font-weight: 700;
} }
.upload-form { .muted {
display: grid; color: var(--muted);
gap: 0.75rem;
align-content: start;
} }
.hero-copy h1, .hero-copy h1,
.detail-hero h1 { .detail-hero h1 {
font-size: clamp(2.2rem, 5vw, 3.6rem); font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
line-height: 0.92; font-size: clamp(3.2rem, 8vw, 5.8rem);
letter-spacing: -0.05em; line-height: 0.88;
margin-bottom: 0.85rem; letter-spacing: 0.03em;
text-transform: uppercase;
margin-bottom: 0.8rem;
} }
.hero-copy p { .hero-copy p {
max-width: 44rem; max-width: 46rem;
font-size: 1.05rem; font-size: 1.05rem;
} line-height: 1.5;
.hero {
background:
radial-gradient(circle at right top, rgba(31, 90, 82, 0.08), transparent 18rem),
linear-gradient(135deg, rgba(255, 251, 244, 0.94), rgba(247, 239, 223, 0.94));
} }
.hero-actions { .hero-actions {
@@ -204,34 +270,78 @@ code { font-family: "Courier New", monospace; font-size: 0.9rem; }
} }
.upload-panel { .upload-panel {
padding: 1.15rem;
border-radius: 20px;
border: 1px solid rgba(50, 208, 179, 0.18);
background: background:
linear-gradient(180deg, rgba(31, 90, 82, 0.07), rgba(181, 83, 47, 0.02)), linear-gradient(180deg, rgba(50, 208, 179, 0.08), rgba(255, 122, 61, 0.04)),
rgba(255, 251, 244, 0.72); var(--panel-2);
border: 1px solid rgba(31, 90, 82, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
border-radius: 18px; }
padding: 1.2rem;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); .upload-panel h2,
.section-head h2 {
font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
font-size: 1.8rem;
line-height: 1;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 0.2rem;
}
.stage-panel,
.stat-card,
.list-card,
.highlight-card,
.round-card {
border: 1px solid var(--line);
border-radius: 20px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
var(--panel-2);
box-shadow: var(--shadow-soft);
}
.stage-panel {
padding: 1rem 1.05rem;
min-height: 10.5rem;
}
.stage-panel h3,
.round-card h3,
.empty-state h3 {
font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
font-size: 1.5rem;
line-height: 1;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 0.35rem;
} }
.stat-card { .stat-card {
background:
linear-gradient(180deg, rgba(255, 251, 244, 0.98), rgba(242, 231, 209, 0.92));
min-height: 10.5rem; min-height: 10.5rem;
padding: 1rem 1.05rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
} }
.stat-card h2 { .stat-card h2 {
font-size: clamp(2rem, 4vw, 3rem); margin: 0.2rem 0;
margin-bottom: 0.25rem; font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
letter-spacing: -0.05em; font-size: clamp(2.8rem, 6vw, 4rem);
line-height: 1; line-height: 0.9;
letter-spacing: 0.04em;
text-transform: uppercase;
} }
.stat-card p { .stat-card p {
margin-bottom: 0; margin-bottom: 0;
color: var(--muted); }
.upload-form {
display: grid;
gap: 0.75rem;
} }
.section-head { .section-head {
@@ -242,96 +352,114 @@ code { font-family: "Courier New", monospace; font-size: 0.9rem; }
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.section-head h2 {
font-size: 1.5rem;
letter-spacing: -0.03em;
margin-bottom: 0;
}
.muted {
color: var(--muted);
}
.section-link { .section-link {
align-self: center; align-self: center;
font-size: 0.95rem; text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.72rem;
color: var(--accent-3);
} }
.pill { .pill {
display: inline-block; display: inline-flex;
padding: 0.28rem 0.72rem; align-items: center;
gap: 0.35rem;
padding: 0.32rem 0.72rem;
border-radius: 999px; border-radius: 999px;
background: var(--soft);
border: 1px solid var(--line); border: 1px solid var(--line);
font-size: 0.8rem; background: var(--soft);
line-height: 1.2; color: var(--ink);
font-weight: 600; text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.68rem;
font-weight: 700;
} }
.status-uploaded, .status-uploaded,
.status-pending { background: #f4e4a7; } .status-pending {
background: rgba(255, 209, 102, 0.16);
}
.status-processing, .status-processing,
.status-rendering { background: #cedef8; } .status-rendering {
background: rgba(115, 184, 255, 0.16);
}
.status-parsed, .status-parsed,
.status-rendered { background: #cbe8d0; } .status-rendered {
.status-failed { background: #efcbc1; } background: rgba(50, 208, 179, 0.16);
}
.status-failed {
background: rgba(255, 122, 61, 0.18);
}
button, button,
.button-link, .button-link,
input[type="submit"] { input[type="submit"] {
display: inline-block; display: inline-flex;
align-items: center;
justify-content: center;
border: none; border: none;
border-radius: 999px; border-radius: 999px;
background: var(--accent); padding: 0.82rem 1.15rem;
color: white; background: linear-gradient(180deg, #ff8c57, #d85e29);
padding: 0.75rem 1.05rem; color: #081015;
font: inherit; font: inherit;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.11em;
font-size: 0.72rem;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
box-shadow: var(--shadow-soft); box-shadow: var(--shadow-soft);
transition: transform 120ms ease, filter 120ms ease;
} }
button:hover, button:hover,
.button-link:hover, .button-link:hover,
input[type="submit"]:hover { input[type="submit"]:hover {
transform: translateY(-1px); transform: translateY(-1px);
filter: brightness(1.04);
text-decoration: none; text-decoration: none;
} }
button.secondary { button.secondary {
background: var(--soft); background: linear-gradient(180deg, rgba(50, 208, 179, 0.9), rgba(30, 150, 128, 0.88));
color: var(--ink); color: #071016;
border: 1px solid var(--line);
} }
.ghost { .ghost {
background: transparent; background: transparent;
color: var(--accent-2); color: var(--accent-2);
border: 1px solid rgba(36, 88, 79, 0.18); border: 1px solid rgba(50, 208, 179, 0.24);
} }
input[type="file"] { input[type="file"] {
width: 100%; width: 100%;
border: 1px dashed var(--line);
border-radius: 14px;
background: var(--soft);
padding: 1rem; padding: 1rem;
border-radius: 16px;
border: 1px dashed rgba(151, 175, 176, 0.34);
background: rgba(255, 255, 255, 0.04);
color: var(--muted);
} }
dt { dt {
color: var(--muted); color: var(--muted);
font-size: 0.85rem; font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.12em;
} }
dd { dd {
margin: 0.3rem 0 0; margin: 0.3rem 0 0;
font-size: 1.05rem;
} }
.detail-hero { .detail-hero {
background: background:
radial-gradient(circle at top right, rgba(31, 90, 82, 0.1), transparent 18rem), radial-gradient(circle at top right, rgba(50, 208, 179, 0.12), transparent 18rem),
linear-gradient(180deg, rgba(255, 251, 244, 0.98), rgba(242, 231, 209, 0.96)); linear-gradient(180deg, rgba(9, 19, 24, 0.94), rgba(15, 32, 40, 0.94));
} }
.detail-hero-actions { .detail-hero-actions {
@@ -347,12 +475,7 @@ dd {
.list-card, .list-card,
.highlight-card, .highlight-card,
.round-card { .round-card {
border: 1px solid rgba(31, 36, 33, 0.08);
border-radius: 18px;
background:
linear-gradient(180deg, rgba(255, 251, 244, 0.9), rgba(250, 243, 231, 0.78));
padding: 1rem; padding: 1rem;
box-shadow: var(--shadow-soft);
} }
.list-card-title-row, .list-card-title-row,
@@ -366,61 +489,71 @@ dd {
} }
.list-card-title { .list-card-title {
font-weight: 700; font-weight: 800;
font-size: 1.05rem; color: var(--ink);
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.06em;
} }
.empty-state { .empty-state {
border: 1px dashed var(--line); border: 1px dashed rgba(151, 175, 176, 0.28);
border-radius: 18px; border-radius: 20px;
padding: 1.25rem; padding: 1.25rem;
background: rgba(242, 231, 209, 0.4); background:
linear-gradient(180deg, rgba(255, 122, 61, 0.05), rgba(50, 208, 179, 0.03)),
var(--panel-2);
} }
.highlight-card h3, .highlight-card h3 {
.round-card h3, margin-bottom: 0.2rem;
.empty-state h3 { font-size: 1.15rem;
margin-bottom: 0.35rem; line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.04em;
} }
.highlight-score { .highlight-score {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-width: 5rem; min-width: 5.3rem;
padding: 0.38rem 0.7rem; margin-bottom: 0.6rem;
padding: 0.42rem 0.8rem;
border-radius: 999px; border-radius: 999px;
background: linear-gradient(90deg, rgba(181, 83, 47, 0.12), rgba(132, 103, 38, 0.12)); border: 1px solid rgba(255, 122, 61, 0.22);
background: linear-gradient(90deg, rgba(255, 122, 61, 0.16), rgba(255, 209, 102, 0.12));
color: var(--accent); color: var(--accent);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.16em; letter-spacing: 0.16em;
margin-bottom: 0.55rem; font-size: 0.68rem;
font-size: 0.78rem; font-weight: 800;
font-weight: 700;
} }
.highlight-meta { .highlight-meta {
display: grid; display: grid;
gap: 0.3rem; gap: 0.3rem;
justify-items: end; justify-items: end;
font-size: 0.86rem;
color: var(--muted); color: var(--muted);
font-size: 0.92rem;
} }
.tag-row { .tag-row {
margin: 0.85rem 0 1rem; margin: 0.95rem 0 1rem;
} }
.tag-chip { .tag-chip {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.3rem; padding: 0.34rem 0.72rem;
padding: 0.32rem 0.7rem;
border-radius: 999px; border-radius: 999px;
background: rgba(31, 90, 82, 0.08); border: 1px solid rgba(50, 208, 179, 0.16);
background: rgba(50, 208, 179, 0.08);
color: var(--accent-2); color: var(--accent-2);
font-size: 0.84rem; text-transform: uppercase;
border: 1px solid rgba(31, 90, 82, 0.12); letter-spacing: 0.08em;
font-size: 0.68rem;
font-weight: 700;
} }
.highlight-explainer, .highlight-explainer,
@@ -435,26 +568,29 @@ dd {
justify-content: space-between; justify-content: space-between;
align-items: start; align-items: start;
gap: 1rem; gap: 1rem;
padding: 0.65rem 0.8rem; padding: 0.78rem 0.85rem;
background: linear-gradient(180deg, rgba(247, 239, 223, 0.92), rgba(242, 231, 209, 0.82));
border-radius: 14px; border-radius: 14px;
border: 1px solid rgba(151, 175, 176, 0.1);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
var(--panel-3);
} }
.mini-label { .mini-label {
color: var(--muted); color: var(--muted);
font-size: 0.8rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.08em; letter-spacing: 0.11em;
font-size: 0.66rem;
} }
.clip-placeholder { .clip-placeholder {
display: grid; display: grid;
place-items: center; place-items: center;
min-height: 10rem; min-height: 10rem;
border: 1px dashed var(--line); border: 1px dashed rgba(151, 175, 176, 0.24);
border-radius: 14px; border-radius: 16px;
background: background:
linear-gradient(135deg, rgba(31, 90, 82, 0.04), rgba(181, 83, 47, 0.04)); linear-gradient(135deg, rgba(50, 208, 179, 0.05), rgba(255, 122, 61, 0.04));
} }
.compact-list .compact-card { .compact-list .compact-card {
@@ -467,12 +603,6 @@ dd {
gap: 0.9rem; gap: 0.9rem;
} }
.round-ticks {
margin-bottom: 0;
color: var(--accent-2);
font-weight: 600;
}
.round-card { .round-card {
min-height: 11rem; min-height: 11rem;
display: flex; display: flex;
@@ -480,6 +610,12 @@ dd {
justify-content: space-between; justify-content: space-between;
} }
.round-ticks {
margin-bottom: 0;
color: var(--accent-2);
font-weight: 700;
}
.compact-upload { .compact-upload {
margin-top: 0.35rem; margin-top: 0.35rem;
} }
@@ -487,7 +623,8 @@ dd {
.callout { .callout {
border-left: 4px solid var(--accent-2); border-left: 4px solid var(--accent-2);
background: background:
linear-gradient(180deg, rgba(255, 251, 244, 0.98), rgba(246, 238, 224, 0.94)); linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
var(--panel-2);
} }
.callout-success { .callout-success {
@@ -499,23 +636,25 @@ dd {
} }
.callout-inline { .callout-inline {
padding: 0.7rem 0.85rem; padding: 0.75rem 0.85rem;
border-radius: 14px; border-radius: 14px;
background: rgba(182, 72, 47, 0.08); border: 1px solid rgba(255, 122, 61, 0.18);
background: rgba(255, 122, 61, 0.08);
} }
@media (max-width: 900px) { @media (max-width: 980px) {
.hero, .hero,
.split, .split,
.stats-grid, .stats-grid,
.meta-grid, .meta-grid,
.highlight-body, .highlight-body,
.split-heavy { .split-heavy,
.workflow-strip {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.site-header { .site-header {
flex-direction: column; grid-template-columns: 1fr;
align-items: start; align-items: start;
} }
@@ -526,21 +665,22 @@ dd {
.highlight-meta { .highlight-meta {
justify-items: start; justify-items: start;
} }
.site-shell::before {
opacity: 0.14;
}
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.site-header, .site-header,
.page { .page {
width: min(100% - 1rem, 1180px); width: min(100% - 1rem, 1240px);
} }
.card { .card,
padding: 1.05rem; .site-branding {
border-radius: 18px; border-radius: 18px;
padding: 1rem;
}
.brand {
font-size: clamp(2.3rem, 11vw, 3.2rem);
} }
.nav { .nav {
@@ -549,6 +689,12 @@ dd {
.nav a { .nav a {
flex: 1 1 auto; flex: 1 1 auto;
justify-content: center;
text-align: center; text-align: center;
} }
.hero-copy h1,
.detail-hero h1 {
font-size: clamp(2.4rem, 14vw, 4rem);
}
} }