From 05179aa445be62441e1b4bfff94ed5346a916f66 Mon Sep 17 00:00:00 2001 From: AJ Isaacs Date: Sun, 2 Aug 2026 09:12:04 -0400 Subject: [PATCH] Redesign CutList workspace UI --- .../Components/Layout/MainLayout.razor | 6 +- CutList.Web/Components/Layout/NavMenu.razor | 19 ++- .../Components/Layout/NavMenu.razor.css | 138 +++--------------- CutList.Web/Components/Pages/Home.razor | 80 +++++----- CutList.Web/Components/Pages/Jobs/Index.razor | 8 +- .../Components/Pages/Tools/Index.razor | 6 +- CutList.Web/wwwroot/css/app.css | 74 ++++++++++ 7 files changed, 158 insertions(+), 173 deletions(-) diff --git a/CutList.Web/Components/Layout/MainLayout.razor b/CutList.Web/Components/Layout/MainLayout.razor index dd3a4a3..ec6880c 100644 --- a/CutList.Web/Components/Layout/MainLayout.razor +++ b/CutList.Web/Components/Layout/MainLayout.razor @@ -6,7 +6,11 @@
-
+
+
Cut planning workspace
+
Ready to plan
+
+
@Body
diff --git a/CutList.Web/Components/Layout/NavMenu.razor b/CutList.Web/Components/Layout/NavMenu.razor index 2c38276..0970499 100644 --- a/CutList.Web/Components/Layout/NavMenu.razor +++ b/CutList.Web/Components/Layout/NavMenu.razor @@ -1,6 +1,7 @@ -
-
- CutList +
+
+ + CutListSHOP FLOOR EDITION
@@ -8,29 +9,31 @@
diff --git a/CutList.Web/Components/Layout/NavMenu.razor.css b/CutList.Web/Components/Layout/NavMenu.razor.css index 1b40e76..7d9f3dd 100644 --- a/CutList.Web/Components/Layout/NavMenu.razor.css +++ b/CutList.Web/Components/Layout/NavMenu.razor.css @@ -1,119 +1,19 @@ -.navbar-toggler { - appearance: none; - cursor: pointer; - width: 3.5rem; - height: 2.5rem; - color: white; - position: absolute; - top: 0.5rem; - right: 1rem; - border: 1px solid rgba(255, 255, 255, 0.1); - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1); -} - -.navbar-toggler:checked { - background-color: rgba(255, 255, 255, 0.5); -} - -.top-row { - height: 3.5rem; - background-color: rgba(0,0,0,0.4); -} - -.navbar-brand { - font-size: 1.1rem; -} - -.bi { - display: inline-block; - position: relative; - width: 1.25rem; - height: 1.25rem; - margin-right: 0.75rem; - top: -1px; - background-size: cover; -} - -.bi-house-door-fill-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E"); -} - -.bi-list-check-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-check' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E"); -} - -.bi-box-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-box' viewBox='0 0 16 16'%3E%3Cpath d='M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5 8 5.961 14.154 3.5 8.186 1.113zM15 4.239l-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z'/%3E%3C/svg%3E"); -} - -.bi-boxes-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-boxes' viewBox='0 0 16 16'%3E%3Cpath d='M7.752.066a.5.5 0 0 1 .496 0l3.75 2.143a.5.5 0 0 1 .252.434v3.995l3.498 2A.5.5 0 0 1 16 9.07v4.286a.5.5 0 0 1-.252.434l-3.75 2.143a.5.5 0 0 1-.496 0l-3.502-2-3.502 2.001a.5.5 0 0 1-.496 0l-3.75-2.143A.5.5 0 0 1 0 13.357V9.071a.5.5 0 0 1 .252-.434L3.75 6.638V2.643a.5.5 0 0 1 .252-.434zM4.25 7.504 1.508 9.071l2.742 1.567 2.742-1.567zM7.5 9.933l-2.75 1.571v3.134l2.75-1.571zm1 3.134 2.75 1.571v-3.134L8.5 9.933zm.508-3.996 2.742 1.567 2.742-1.567-2.742-1.567zm2.242-2.433V3.504L8.5 5.076V8.21zM7.5 8.21V5.076L4.75 3.504v3.134zM5.258 2.643 8 4.21l2.742-1.567L8 1.076zM15 9.933l-2.75 1.571v3.134L15 13.067zM3.75 14.638v-3.134L1 9.933v3.134z'/%3E%3C/svg%3E"); -} - -.bi-cart-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-cart3' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E"); -} - -.bi-building-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-building' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1ZM4 5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM7.5 5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM4.5 8a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Z'/%3E%3Cpath d='M2 1a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V1Zm11 0H3v14h3v-2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V15h3V1Z'/%3E%3C/svg%3E"); -} - -.bi-tools-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-tools' viewBox='0 0 16 16'%3E%3Cpath d='M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.27 3.27a.997.997 0 0 0 1.414 0l1.586-1.586a.997.997 0 0 0 0-1.414l-3.27-3.27a1 1 0 0 0-1.023-.242l-.914.305-.968-.968 2.617-2.654A3.003 3.003 0 0 0 13 0a3 3 0 1 0-.851 5.878L9.495 8.53l-2.675-2.675a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L3.081 2.2 1 0ZM3 13a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm7.5-8.5a2 2 0 1 1 4 0 2 2 0 0 1-4 0Z'/%3E%3C/svg%3E"); -} - -.nav-item { - font-size: 0.9rem; - padding-bottom: 0.5rem; -} - -.nav-item:first-of-type { - padding-top: 1rem; -} - -.nav-item:last-of-type { - padding-bottom: 1rem; -} - -.nav-item ::deep .nav-link { - color: #d7d7d7; - background: none; - border: none; - border-radius: 4px; - height: 3rem; - display: flex; - align-items: center; - line-height: 3rem; - width: 100%; -} - -.nav-item ::deep a.active { - background-color: rgba(255,255,255,0.37); - color: white; -} - -.nav-item ::deep .nav-link:hover { - background-color: rgba(255,255,255,0.1); - color: white; -} - -.nav-scrollable { - display: none; -} - -.navbar-toggler:checked ~ .nav-scrollable { - display: block; -} - -@media (min-width: 641px) { - .navbar-toggler { - display: none; - } - - .nav-scrollable { - display: block; - position: relative; - overflow-y: auto; - flex-grow: 1; - } -} +.top-row { padding: 1.5rem 1.35rem 1.25rem; } +.brand-lockup { display: flex; align-items: center; gap: .75rem; } +.brand-mark { align-items: center; background: #f26b38; border-radius: .45rem; color: #161817; display: flex; font-size: 1rem; height: 2.25rem; justify-content: center; text-decoration: none; transform: rotate(-8deg); width: 2.25rem; } +.brand-mark i { transform: rotate(8deg); } +.navbar-brand { color: #f7f3eb; font-family: Georgia, 'Times New Roman', serif; font-size: 1.45rem; font-weight: 700; letter-spacing: -.06em; line-height: .9; text-decoration: none; } +.navbar-brand span { color: #f26b38; } +.navbar-brand small { color: #8f968d; display: block; font-family: Arial, sans-serif; font-size: .48rem; font-weight: 700; letter-spacing: .14em; margin-top: .45rem; } +.nav-section-label { color: #737a73; font-size: .62rem; font-weight: 700; letter-spacing: .13em; margin: 1.35rem 1.5rem .5rem; text-transform: uppercase; } +.nav-item { padding: .1rem .75rem; } +.nav-item ::deep .nav-link { align-items: center; border-radius: .4rem; color: #bbc0b8; display: flex; font-size: .9rem; font-weight: 600; gap: .8rem; min-height: 2.8rem; padding: .65rem .75rem; transition: background .18s ease, color .18s ease; } +.nav-item ::deep .nav-link i { color: #838b82; font-size: 1rem; width: 1.1rem; } +.nav-item ::deep .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; } +.nav-item ::deep a.active { background: #303531; color: #fff; } +.nav-item ::deep a.active i { color: #f26b38; } +.navbar-toggler { appearance: none; background: transparent; border: 1px solid #485048; border-radius: .35rem; color: white; cursor: pointer; height: 2.25rem; position: absolute; right: 1rem; top: 1rem; width: 2.75rem; } +.navbar-toggler::after { content: '☰'; } +.nav-scrollable { display: none; } +.navbar-toggler:checked ~ .nav-scrollable { display: block; } +@media (min-width: 641px) { .navbar-toggler { display: none; } .nav-scrollable { display: block; } } diff --git a/CutList.Web/Components/Pages/Home.razor b/CutList.Web/Components/Pages/Home.razor index 3182423..ca38ad0 100644 --- a/CutList.Web/Components/Pages/Home.razor +++ b/CutList.Web/Components/Pages/Home.razor @@ -2,48 +2,48 @@ CutList - Home -

CutList

- -

1D Bin Packing Optimization for Material Cutting

- -
-
-
-
-
Jobs
-

Create and manage cut list jobs. Add parts and stock bins, then optimize to minimize waste.

- Go to Jobs -
+
+
+

Production planning

+

Make every length count.

+

Build a cut plan, optimize the stock, and send a clear list to the shop floor.

+
+ New job + View all jobs
-
-
-
-
Materials
-

Manage material types (tube, bar, angle, etc.) with their shapes and sizes.

- Manage Materials -
-
+ -
-
-
-
Cutting Tools
-

Configure cutting tools with their kerf widths for accurate waste calculations.

- Manage Tools -
-
+
+ +
+
+

Start here

Set up your workspace

+ Three things to keep production moving
-
+
+ + 01

Plan a job

+

Add required cuts, choose stock, then optimize the layout.

Open jobs + + + 02

Material library

+

Keep profiles, grades, and dimensions ready to reuse.

Manage materials + + + 03

Cutting tools

+

Set kerf values so the numbers match the real cut.

Configure tools + +
+ -
- -

How It Works

-
    -
  1. Set up materials - Define the shapes and sizes of materials you work with
    2. -
  2. Add stock - Record which stock lengths you have on hand
    3. -
  3. Create a job - Add the parts you need to cut with their lengths and quantities
    4. -
  4. Add stock bins - Specify which stock lengths to cut from
    5. -
  5. Optimize - Run the optimizer to find the best cutting pattern
    6. -
  6. Print report - Generate a printable cut list to take to the shop
    7. -
+
+

From estimate to shop floor

A simple, reliable run of work.

+
    +
  1. 1
    Define materialProfile, size, and grade
    2. +
  2. 2
    Add stock & partsLengths, quantities, and kerf
    3. +
  3. 3
    Optimize & printEfficient cuts, ready to run
    4. +
+
diff --git a/CutList.Web/Components/Pages/Jobs/Index.razor b/CutList.Web/Components/Pages/Jobs/Index.razor index b7bbad8..6f76dbb 100644 --- a/CutList.Web/Components/Pages/Jobs/Index.razor +++ b/CutList.Web/Components/Pages/Jobs/Index.razor @@ -62,9 +62,11 @@ else @(job.CuttingTool?.Name ?? "-") @((job.UpdatedAt ?? job.CreatedAt).ToLocalTime().ToString("g")) - - - +
+ + + +
} diff --git a/CutList.Web/Components/Pages/Tools/Index.razor b/CutList.Web/Components/Pages/Tools/Index.razor index 94e4d85..978eb79 100644 --- a/CutList.Web/Components/Pages/Tools/Index.razor +++ b/CutList.Web/Components/Pages/Tools/Index.razor @@ -90,8 +90,10 @@ else } - - +
+ + +
} diff --git a/CutList.Web/wwwroot/css/app.css b/CutList.Web/wwwroot/css/app.css index 238583a..3760239 100644 --- a/CutList.Web/wwwroot/css/app.css +++ b/CutList.Web/wwwroot/css/app.css @@ -225,3 +225,77 @@ h1 { text-align: left; } } + +/* CutList visual system */ +:root { + --ink: #20231f; + --muted: #697168; + --paper: #f4f1e9; + --paper-bright: #fbfaf6; + --line: #d9d5ca; + --orange: #ed6b3b; + --orange-dark: #d95a2d; + --green: #28534a; + --rail: #1d211e; +} + +html, body { background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } +body { letter-spacing: -.01em; } +main { background: var(--paper); box-shadow: none; min-width: 0; } +.sidebar { background: var(--rail); border-right: 1px solid #30342f; } +.content { margin: 0 auto; max-width: 1440px; padding: 2.75rem clamp(1.5rem, 4vw, 4.5rem) 4rem; } +.workspace-header { align-items: center; background: rgba(244,241,233,.88); border-bottom: 1px solid var(--line); display: flex; height: 4.5rem; justify-content: space-between; padding: 0 clamp(1.5rem, 4vw, 4.5rem); position: sticky; top: 0; z-index: 5; } +.workspace-eyebrow, .eyebrow { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .14em; margin: 0; text-transform: uppercase; } +.workspace-status { align-items: center; color: var(--muted); display: flex; font-size: .78rem; font-weight: 650; gap: .45rem; } +.status-dot { background: #4d9d75; border-radius: 50%; box-shadow: 0 0 0 3px rgba(77,157,117,.14); height: .45rem; width: .45rem; } +h1, h2, h3, h4, h5, h6 { color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: -.045em; } +h1 { font-size: clamp(2.25rem, 4vw, 4.1rem); line-height: .98; } +h2 { font-size: clamp(1.6rem, 2.5vw, 2.25rem); } +a, .btn-link { color: var(--green); } +.btn { border-radius: .35rem; font-size: .85rem; font-weight: 750; letter-spacing: .01em; padding: .65rem 1rem; } +.btn-primary { background: var(--orange); border-color: var(--orange); color: #231c19; } +.btn-primary:hover, .btn-primary:focus { background: var(--orange-dark); border-color: var(--orange-dark); color: #fff; } +.btn-outline-primary { border-color: #8e968c; color: var(--green); } +.btn-outline-primary:hover { background: var(--green); border-color: var(--green); } +.btn-success { background: var(--green); border-color: var(--green); } +.btn-success:hover { background: #1f423a; border-color: #1f423a; } +.form-control, .form-select { background: var(--paper-bright); border-color: #c9c5b9; border-radius: .35rem; padding: .62rem .75rem; } +.form-control:focus, .form-select:focus { border-color: var(--orange); box-shadow: 0 0 0 .2rem rgba(237,107,59,.14); } +.card { background: var(--paper-bright); border: 1px solid var(--line); border-radius: .5rem; box-shadow: none; } +.card-header { background: #eeebe3; } +.table { --bs-table-striped-bg: rgba(32,35,31,.025); border-color: var(--line); font-size: .9rem; } +.table > :not(caption) > * > * { padding: .85rem .75rem; } +.table thead th { border-bottom-width: 1px; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } +.table a { font-weight: 700; text-decoration-color: rgba(40,83,74,.28); text-underline-offset: .15em; } +.table-actions { align-items: center; display: inline-flex; flex-wrap: nowrap; gap: .35rem; white-space: nowrap; } +.table-actions .btn { align-items: center; display: inline-flex; justify-content: center; min-height: 2rem; min-width: 2rem; padding: .35rem .45rem; } +.alert { border-radius: .4rem; border-width: 1px; } + +/* Dashboard */ +.dashboard-hero { background: var(--green); color: #f8f4ea; display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.2fr) minmax(190px, .8fr); min-height: 310px; overflow: hidden; padding: clamp(2rem, 5vw, 4.5rem); position: relative; } +.dashboard-hero h1 { color: #fffaf0; margin: .55rem 0 1rem; max-width: 8.5ch; } +.dashboard-hero .eyebrow { color: #b4c6b8; } +.hero-copy { color: #d7e0d8; font-size: 1.05rem; line-height: 1.6; margin: 0; max-width: 33rem; } +.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; } +.btn-quiet { align-items: center; color: #fffaf0; display: inline-flex; gap: .5rem; padding-left: .5rem; } +.btn-quiet:hover { color: var(--orange); } +.hero-graphic { align-self: stretch; min-height: 180px; position: relative; } +.hero-graphic b { bottom: -.35em; color: rgba(255,255,255,.09); font-family: Georgia, serif; font-size: clamp(8rem, 18vw, 15rem); line-height: .7; position: absolute; right: -.1em; } +.cut-line { background: var(--orange); display: block; height: 5px; position: absolute; transform: rotate(-28deg); transform-origin: left center; } +.line-one { left: 6%; top: 23%; width: 75%; }.line-two { background: #b8c9ba; left: 20%; top: 51%; width: 64%; }.line-three { left: 1%; top: 78%; width: 53%; } +.dashboard-section { margin-top: 4rem; } +.section-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 1.5rem; } +.section-heading h2 { margin: .35rem 0 0; }.section-note { color: var(--muted); font-size: .82rem; } +.action-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } +.action-card { background: var(--paper-bright); border: 1px solid var(--line); color: var(--ink); display: flex; flex-direction: column; min-height: 255px; padding: 1.5rem; position: relative; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; } +.action-card:hover { box-shadow: 5px 5px 0 var(--line); color: var(--ink); transform: translate(-2px, -2px); } +.action-card > .bi { color: var(--orange); font-size: 1.55rem; margin-top: 1.35rem; }.action-card h3 { font-size: 1.35rem; margin: 1rem 0 .4rem; } +.action-card p { color: var(--muted); font-size: .9rem; line-height: 1.55; margin: 0; }.card-number { color: #9a9f96; font-size: .7rem; font-weight: 800; letter-spacing: .12em; } +.action-card-featured { background: #e7e1d5; border-color: #c7bead; }.card-link { color: var(--green); font-size: .8rem; font-weight: 800; margin-top: auto; padding-top: 1.25rem; } +.workflow-panel { background: #e9e5da; display: grid; gap: 2rem; grid-template-columns: .75fr 1.25fr; margin-top: 4rem; padding: 2.25rem; } +.workflow-panel h2 { margin: .35rem 0 0; max-width: 14rem; }.workflow-list { counter-reset: item; display: grid; gap: .75rem; list-style: none; margin: 0; padding: 0; } +.workflow-list li { align-items: center; border-bottom: 1px solid #ccc5b7; display: flex; gap: 1rem; padding: .65rem 0; }.workflow-list li:last-child { border-bottom: 0; } +.workflow-list li > span { align-items: center; background: var(--orange); border-radius: 50%; display: inline-flex; font-size: .72rem; font-weight: 800; height: 1.6rem; justify-content: center; width: 1.6rem; } +.workflow-list strong, .workflow-list small { display: block; }.workflow-list strong { font-size: .9rem; }.workflow-list small { color: var(--muted); font-size: .78rem; margin-top: .1rem; } +@media (max-width: 800px) { .dashboard-hero, .workflow-panel { grid-template-columns: 1fr; }.hero-graphic { display: none; }.action-grid { grid-template-columns: 1fr; }.section-heading { align-items: start; flex-direction: column; gap: .5rem; } } +@media (max-width: 640.98px) { .content { padding-top: 2rem; }.workspace-header { height: 3.5rem; padding-left: 4.6rem; }.workspace-context { display: none; } .workspace-status { margin-left: auto; } }