246 lines
8.6 KiB
CSS
246 lines
8.6 KiB
CSS
:root {
|
|
color-scheme: light;
|
|
--bg: #f3efe3;
|
|
--panel: rgba(255, 253, 247, .94);
|
|
--panel-strong: #fffaf0;
|
|
--ink: #17251d;
|
|
--muted: #667268;
|
|
--line: #e3d8c4;
|
|
--green: #236b4b;
|
|
--green-2: #39a36d;
|
|
--orange: #d5873a;
|
|
--blue: #5168bc;
|
|
--nav: #112018;
|
|
--nav-soft: #1c3427;
|
|
--danger: #a43434;
|
|
--shadow: 0 28px 80px rgba(41, 31, 17, .12);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
background:
|
|
radial-gradient(circle at 15% 10%, rgba(255, 226, 154, .65), transparent 28rem),
|
|
radial-gradient(circle at 80% 0%, rgba(79, 138, 104, .22), transparent 30rem),
|
|
var(--bg);
|
|
color: var(--ink);
|
|
}
|
|
|
|
button, input, textarea { font: inherit; }
|
|
|
|
button {
|
|
border: 0;
|
|
border-radius: 16px;
|
|
background: linear-gradient(135deg, var(--green), var(--green-2));
|
|
color: white;
|
|
cursor: pointer;
|
|
font-weight: 850;
|
|
padding: 13px 17px;
|
|
transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
|
|
}
|
|
|
|
button:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(35, 107, 75, .22); }
|
|
button:disabled { cursor: wait; opacity: .55; transform: none; box-shadow: none; }
|
|
button.secondary { background: #ebe1d0; color: var(--ink); }
|
|
button.ghost { width: 100%; background: rgba(255,255,255,.09); color: #f4ead6; box-shadow: none; }
|
|
|
|
input, textarea {
|
|
width: 100%;
|
|
border: 1px solid #d9ceb8;
|
|
border-radius: 16px;
|
|
background: #fffaf2;
|
|
color: var(--ink);
|
|
outline: none;
|
|
padding: 13px 14px;
|
|
}
|
|
|
|
input:focus, textarea:focus { border-color: var(--green-2); box-shadow: 0 0 0 4px rgba(57, 163, 109, .14); }
|
|
textarea { resize: vertical; }
|
|
label { display: grid; gap: 8px; color: var(--muted); font-weight: 800; }
|
|
h1, h2, p { margin-top: 0; }
|
|
h1 { max-width: 820px; margin-bottom: 0; font-size: clamp(2rem, 4vw, 4.2rem); line-height: .94; letter-spacing: -.06em; }
|
|
h2 { margin-bottom: 12px; font-size: clamp(1.35rem, 2vw, 2rem); letter-spacing: -.035em; }
|
|
p { color: var(--muted); line-height: 1.6; }
|
|
canvas { max-width: 100%; }
|
|
|
|
.app-frame { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }
|
|
.sidebar {
|
|
position: sticky;
|
|
top: 0;
|
|
height: 100vh;
|
|
padding: 22px;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
gap: 28px;
|
|
background: linear-gradient(180deg, var(--nav), #0b140f);
|
|
color: #f8ecd7;
|
|
}
|
|
|
|
.brand-block { display: flex; align-items: center; gap: 12px; }
|
|
.brand-block strong { display: block; font-size: 1.05rem; }
|
|
.brand-block small, .sidebar-footer small { color: rgba(248, 236, 215, .62); }
|
|
.brand-mark {
|
|
width: 48px;
|
|
height: 48px;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
border-radius: 17px;
|
|
background: linear-gradient(135deg, #e7a24e, #3fb473);
|
|
color: #102017;
|
|
font-weight: 950;
|
|
letter-spacing: -.04em;
|
|
}
|
|
|
|
.main-nav { display: grid; align-content: start; gap: 9px; }
|
|
.nav-item {
|
|
width: 100%;
|
|
padding: 13px 14px;
|
|
border-radius: 15px;
|
|
background: transparent;
|
|
color: rgba(248, 236, 215, .72);
|
|
text-align: left;
|
|
box-shadow: none;
|
|
}
|
|
.nav-item:hover, .nav-item.active { background: var(--nav-soft); color: #fff4df; box-shadow: none; }
|
|
.sidebar-footer { display: grid; gap: 12px; }
|
|
|
|
.content-shell { min-width: 0; }
|
|
.topbar {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 18px;
|
|
padding: 26px clamp(18px, 4vw, 48px);
|
|
border-bottom: 1px solid rgba(227, 216, 196, .7);
|
|
background: rgba(243, 239, 227, .82);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
.menu-toggle { display: none; background: #e9dfcc; color: var(--ink); box-shadow: none; }
|
|
.primary-action { white-space: nowrap; }
|
|
.content { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: 28px 0 44px; }
|
|
.section-page { display: grid; gap: 22px; }
|
|
|
|
.eyebrow {
|
|
margin: 0 0 8px;
|
|
color: var(--green);
|
|
font-size: .76rem;
|
|
font-weight: 950;
|
|
letter-spacing: .14em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.hero-grid { display: grid; grid-template-columns: minmax(300px, 1.4fr) repeat(3, minmax(150px, .62fr)); gap: 18px; }
|
|
.hero-card, .metric-card, .panel, .login-card, .login-brand {
|
|
border: 1px solid rgba(227, 216, 196, .9);
|
|
border-radius: 28px;
|
|
background: var(--panel);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.hero-card {
|
|
min-height: 220px;
|
|
padding: 28px;
|
|
display: grid;
|
|
align-content: end;
|
|
background:
|
|
linear-gradient(135deg, rgba(22, 42, 30, .9), rgba(35, 107, 75, .84)),
|
|
radial-gradient(circle at top right, rgba(235, 173, 79, .6), transparent 20rem);
|
|
color: white;
|
|
}
|
|
.hero-card .eyebrow, .hero-card span { color: rgba(255,255,255,.78); }
|
|
.hero-card strong { display: block; margin-bottom: 8px; font-size: clamp(3rem, 8vw, 5.6rem); line-height: .9; letter-spacing: -.07em; }
|
|
.hero-card span { display: block; margin-top: 6px; }
|
|
.metric-card { padding: 22px; display: grid; align-content: end; gap: 8px; background: linear-gradient(180deg, #fffdf8, #f7efde); }
|
|
.metric-card small { color: var(--muted); font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
|
|
.metric-card strong { font-size: 2.2rem; line-height: 1; letter-spacing: -.05em; }
|
|
.metric-card span { color: var(--muted); font-size: .92rem; }
|
|
.metric-card.warm strong { color: var(--orange); }
|
|
.metric-card.cool strong { color: var(--blue); }
|
|
|
|
.panel { padding: clamp(20px, 3vw, 32px); }
|
|
.split-panel { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(320px, 1fr); gap: 24px; align-items: center; }
|
|
.panel-heading { max-width: 760px; margin-bottom: 20px; }
|
|
.panel-heading.compact { margin-bottom: 8px; }
|
|
.grid { display: grid; gap: 20px; }
|
|
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
|
|
.span-2 { grid-column: span 2; }
|
|
.form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
|
|
.meal-panel { background: linear-gradient(135deg, rgba(255,253,247,.96), rgba(244, 233, 210, .94)); }
|
|
.preview { width: 100%; max-height: 360px; object-fit: cover; border: 1px solid var(--line); border-radius: 24px; margin-top: 18px; }
|
|
.status { min-height: 1.5em; margin: 0; font-weight: 800; }
|
|
.status.error { color: var(--danger); }
|
|
.status.ok { color: var(--green); }
|
|
.muted { color: var(--muted); font-size: .93rem; }
|
|
.chart-panel canvas, .split-panel canvas { width: 100%; height: auto; }
|
|
.row-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
|
|
.row-title h2 { margin-bottom: 0; }
|
|
.entries { display: grid; gap: 12px; }
|
|
.entry {
|
|
display: grid;
|
|
gap: 7px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 20px;
|
|
padding: 16px;
|
|
background: var(--panel-strong);
|
|
}
|
|
.entry strong { font-size: 1.02rem; }
|
|
.entry small { color: var(--muted); }
|
|
|
|
.login-body { display: grid; place-items: center; padding: 24px; }
|
|
.login-shell { width: min(980px, 100%); display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; align-items: stretch; }
|
|
.login-brand {
|
|
min-height: 560px;
|
|
padding: clamp(28px, 5vw, 54px);
|
|
display: grid;
|
|
align-content: end;
|
|
background:
|
|
linear-gradient(135deg, rgba(15, 29, 21, .94), rgba(29, 88, 61, .86)),
|
|
radial-gradient(circle at top right, rgba(218, 150, 72, .82), transparent 22rem);
|
|
color: #fff4df;
|
|
}
|
|
.login-brand h1 { color: white; }
|
|
.login-brand p, .login-brand .eyebrow { color: rgba(255,244,223,.78); }
|
|
.login-card { padding: clamp(24px, 4vw, 40px); align-self: center; display: grid; gap: 16px; }
|
|
.login-card h2 { margin-bottom: 0; }
|
|
|
|
@media (max-width: 1050px) {
|
|
.app-frame { grid-template-columns: 1fr; }
|
|
.sidebar {
|
|
position: fixed;
|
|
left: 14px;
|
|
top: 14px;
|
|
bottom: 14px;
|
|
z-index: 30;
|
|
width: min(320px, calc(100vw - 28px));
|
|
height: auto;
|
|
border-radius: 26px;
|
|
transform: translateX(calc(-100% - 18px));
|
|
transition: transform .2s ease;
|
|
box-shadow: 0 30px 90px rgba(0,0,0,.34);
|
|
}
|
|
body.menu-open .sidebar { transform: translateX(0); }
|
|
.menu-toggle { display: inline-flex; }
|
|
.hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.hero-card { grid-column: span 2; }
|
|
.split-panel, .grid.two, .login-shell { grid-template-columns: 1fr; }
|
|
.login-brand { min-height: 360px; }
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.topbar { align-items: flex-start; padding: 18px; }
|
|
.primary-action { display: none; }
|
|
.content { width: min(100% - 22px, 1180px); padding-top: 18px; }
|
|
.hero-grid, .form-grid { grid-template-columns: 1fr; }
|
|
.hero-card, .span-2 { grid-column: auto; }
|
|
.row-title, .form-actions { align-items: stretch; flex-direction: column; }
|
|
.row-title button, .form-actions button { width: 100%; }
|
|
.login-body { padding: 12px; }
|
|
.login-brand { min-height: 260px; }
|
|
}
|