static/style.css

/* Estilos gerais */
:root {
    --background: 0 0% 80%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 10% 3.9%;
    --chart-1: 173 58% 39%;
    --chart-2: 12 76% 61%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
}
.dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-5: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-2: 340 75% 55%;
}

/* Estilos gerais */
body {
    font-family: 'Roboto', sans-serif;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
}

.stApp {
    padding: 4rem;
}

/* Estilo Neuromórfico para as métricas */
div[data-testid="stMetric"] {
    background: hsl(var(--card));
    border-radius: 15px;
    padding: 2em 1em; /* Aumenta o padding para sobressair */
    box-shadow: 8px 8px 15px hsl(var(--muted)), -8px -8px 15px hsl(var(--background));
    transition: all 0.3s ease;
}

div[data-testid="stMetric"]:hover {
    transform: translateY(-5px);
    box-shadow: 12px 12px 20px hsl(var(--muted)), -12px -12px 20px hsl(var(--background));
}

div[data-testid="stMetricLabel"] p {
    font-family: 'Quattrocento-Regular';
    color: hsl(var(--primary));
    font-size: 1.3em;
}

div[data-testid="stMetricValue"] {
    font-size: 1.3em;
    font-weight: 400;
    color: hsl(var(--primary-foreground));
}

/* Outros elementos neuromórficos */
.stButton button,
.stTextInput input,
.stSelectbox select {
    border-radius: 25px;
    padding: 1em 2em;
    background: hsl(var(--card));
    box-shadow: 8px 8px 15px hsl(var(--muted)), -8px -8px 15px hsl(var(--background));
    transition: all 0.3s ease;
    border: none;
    color: hsl(var(--foreground));
}

.stButton button:hover,
.stTextInput input:focus,
.stSelectbox select:focus {
    box-shadow: 12px 12px 20px hsl(var(--muted)), -12px -12px 20px hsl(var(--background));
}

.stButton button:active,
.stTextInput input:active,
.stSelectbox select:active {
    box-shadow: inset 5px 5px 10px hsl(var(--muted)), inset -5px -5px 10px hsl(var(--background));
}

/* Ajustes para títulos e subtítulos */
.title {
    font-family: 'Quattrocento-Bold';
    color: hsl(var(--primary));
    font-size: 4em;
    text-shadow: 2px 2px 4px hsl(var(--border));
}

h3 span {
    font-family: 'PoiretOne-Regular';
    font-size: 1.1em;
    font-weight: 600;
    margin-top: 1em;
    color: hsl(var(--foreground));
}