initial release testing
This commit is contained in:
255
app/globals.css
Normal file
255
app/globals.css
Normal file
@@ -0,0 +1,255 @@
|
||||
:root {
|
||||
--bg: #f4f1e8;
|
||||
--surface: rgba(255, 252, 246, 0.88);
|
||||
--text: #1e1b16;
|
||||
--muted: #6b6258;
|
||||
--line: rgba(45, 39, 31, 0.14);
|
||||
--accent: #a54b1a;
|
||||
--accent-strong: #7b2d12;
|
||||
--success: #265d3d;
|
||||
--warning: #9a6400;
|
||||
--danger: #8f2718;
|
||||
--shadow: 0 18px 45px rgba(64, 40, 18, 0.12);
|
||||
--radius-lg: 24px;
|
||||
--font-body: "Segoe UI", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(215, 116, 57, 0.24), transparent 30%),
|
||||
radial-gradient(circle at right 20%, rgba(100, 139, 120, 0.18), transparent 25%),
|
||||
linear-gradient(180deg, #fbf6ee 0%, #efe6d8 100%);
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: var(--text);
|
||||
font-family: var(--font-body);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.shell {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hero,
|
||||
.sidebar,
|
||||
.card,
|
||||
.panel {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 28px;
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.hero h1,
|
||||
.section-title {
|
||||
margin: 0;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.muted,
|
||||
.section-copy,
|
||||
.hero p {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-columns: 260px minmax(0, 1fr);
|
||||
gap: 24px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: sticky;
|
||||
top: 24px;
|
||||
align-self: start;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, var(--accent), #d0834d);
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
padding: 11px 14px;
|
||||
border-radius: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.nav a:hover,
|
||||
.nav a[data-active="true"] {
|
||||
color: var(--text);
|
||||
background: rgba(165, 75, 26, 0.1);
|
||||
}
|
||||
|
||||
.content,
|
||||
.grid,
|
||||
.form-grid {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.grid.cards {
|
||||
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
|
||||
}
|
||||
|
||||
.card,
|
||||
.panel {
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.stats-value {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.04em;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.two-up {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.form-row label {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.input,
|
||||
.select,
|
||||
.textarea {
|
||||
width: 100%;
|
||||
border: 1px solid rgba(59, 48, 39, 0.16);
|
||||
border-radius: 12px;
|
||||
padding: 11px 12px;
|
||||
background: rgba(255, 252, 247, 0.95);
|
||||
}
|
||||
|
||||
.textarea {
|
||||
min-height: 120px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
padding: 11px 18px;
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button.secondary {
|
||||
background: rgba(165, 75, 26, 0.12);
|
||||
color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
text-align: left;
|
||||
padding: 12px 10px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.table th {
|
||||
color: var(--muted);
|
||||
font-size: 0.82rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
background: rgba(38, 93, 61, 0.12);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.pill.warning {
|
||||
background: rgba(154, 100, 0, 0.12);
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.layout,
|
||||
.two-up {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user