115 lines
1.9 KiB
CSS
115 lines
1.9 KiB
CSS
/*
|
|
Palette:
|
|
- Base: #FFFFFF
|
|
- Panels: #F7F3ED
|
|
- Hovers: #E8E1D9
|
|
- Accent: #D4A373
|
|
- Text: #333333
|
|
*/
|
|
|
|
body {
|
|
background-color: #FFFFFF;
|
|
font-family: 'Inter', sans-serif;
|
|
color: #333333;
|
|
padding-top: 2rem;
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 700;
|
|
}
|
|
|
|
h1 { font-size: 32px; }
|
|
h2 { font-size: 24px; }
|
|
h3 { font-size: 20px; }
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
}
|
|
|
|
.card {
|
|
background-color: rgba(247, 243, 237, 0.8);
|
|
backdrop-filter: blur(4px);
|
|
border: 1px solid rgba(0,0,0,0.05);
|
|
border-radius: 14px;
|
|
box-shadow: 0 8px 16px rgba(0,0,0,0.04);
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.card-title {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.btn {
|
|
border-radius: 50px;
|
|
padding: 12px 24px;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #D4A373;
|
|
border-color: #D4A373;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #C39263;
|
|
border-color: #C39263;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: #fff;
|
|
border-color: #E8E1D9;
|
|
color: #333;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background-color: #E8E1D9;
|
|
border-color: #E8E1D9;
|
|
}
|
|
|
|
.form-control, .form-select {
|
|
border-radius: 10px;
|
|
background-color: #FFFFFF;
|
|
border: 1px solid #E8E1D9;
|
|
padding: 12px;
|
|
}
|
|
|
|
.form-control:focus, .form-select:focus {
|
|
border-color: #D4A373;
|
|
box-shadow: 0 0 0 4px rgba(212, 163, 115, 0.15);
|
|
}
|
|
|
|
.table {
|
|
border-color: #E8E1D9;
|
|
}
|
|
|
|
.table th {
|
|
font-weight: 500;
|
|
color: #777;
|
|
}
|
|
|
|
.table-hover tbody tr:hover {
|
|
background-color: rgba(232, 225, 217, 0.5);
|
|
}
|
|
|
|
.lead {
|
|
color: #666;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.divider {
|
|
border-top: 1px solid rgba(0,0,0,0.07);
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
/* Chart.js minimal styling */
|
|
.chart-container {
|
|
position: relative;
|
|
height: 40vh;
|
|
width: 100%;
|
|
} |