feat: institutional site dark mode

This commit is contained in:
Erik Silva
2025-12-07 03:06:48 -03:00
parent bf6707e746
commit 0ab52bcfe4
8 changed files with 410 additions and 436 deletions

View File

@@ -1,57 +1,49 @@
@config "../tailwind.config.js";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Open+Sans:wght@400;600;700&family=Fira+Code:wght@400&display=swap');
@import url('https://cdn.jsdelivr.net/npm/remixicon@4.0.0/fonts/remixicon.css');
@import "tailwindcss";
:root {
--background: #ffffff;
--foreground: #171717;
/* Configuração global */
* {
@apply border-zinc-200 dark:border-zinc-800;
}
/* Design System Colors - Somente Gradientes */
--gradient: linear-gradient(90deg, #FF3A05, #FF0080);
--gradient-text: linear-gradient(to right, #FF3A05, #FF0080);
--gradient-hover: linear-gradient(135deg, #FF3A05, #FF0080);
/* Text Colors */
--text-primary: #171717;
--text-secondary: #7D7D7D;
--text-light: #A3A3A3;
/* UI Colors */
--border: #E5E5E5;
--surface: #FAFAFA;
/* Fonts */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
--font-heading: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'Fira Code', ui-monospace, SFMono-Regular, 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
html {
@apply antialiased;
}
body {
background: var(--background);
color: var(--foreground);
font-family: var(--font-sans);
@apply bg-white dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100;
font-family: 'Inter', system-ui, sans-serif;
scroll-behavior: smooth;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Gradient text utility */
.font-heading {
font-family: 'Open Sans', system-ui, sans-serif;
}
.font-mono {
font-family: 'Fira Code', ui-monospace, monospace;
}
/* Classes do design system - gradientes sempre visíveis */
.gradient-text {
background: var(--gradient-text);
background: linear-gradient(135deg, #FF3A05, #FF0080);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Gradient utilities */
.gradient-bg {
background: var(--gradient);
.bg-linear-to-r {
background: linear-gradient(to right, #FF3A05, #FF0080);
}
.gradient-hover-bg {
background: var(--gradient-hover);
.bg-linear-to-br {
background: linear-gradient(to bottom right, #FF3A05, #FF0080);
}
/* Focus states */
/* Estados de foco */
*:focus-visible {
outline: 2px solid #FF3A05;
outline-offset: 2px;
@apply outline-2 outline-offset-2 outline-orange-500;
}