Files
portfolio/src/app/globals.css
lerko96 b3fc7b2114 fix(layout): restore mx-auto centering by scoping CSS reset to @layer base
Unlayered CSS always wins over Tailwind's @layer utilities, so the
bare * { margin: 0 } reset was overriding mx-auto everywhere. Moving
it into @layer base restores correct cascade order.
2026-04-12 19:59:59 -04:00

63 lines
1.3 KiB
CSS

@import "tailwindcss";
@variant dark (&:where(.dark, .dark *));
@theme {
/* Terminal-Noir palette */
--color-bg: #0a0a0a;
--color-surface: #111111;
--color-surface-raised: #1a1a1a;
--color-border: #2a2a2a;
--color-border-bright: #444444;
--color-text: #e8e8e8;
--color-text-label: #666666;
--color-text-dim: #444444;
--color-accent-green: #00cc44;
--color-accent-red: #cc2200;
/* Typography */
--font-mono: "Source Code Pro", ui-monospace, monospace;
--font-sans: ui-sans-serif, system-ui, sans-serif;
/* Breakpoints */
--breakpoint-xs: 576px;
/* Animations */
--animate-fade-in: fadeIn 120ms linear forwards;
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
}
/* Base */
html {
scroll-behavior: smooth;
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-mono);
}
@layer base {
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
}
/* Default transitions — linear, fast */
a,
button {
transition: color 120ms linear, border-color 120ms linear,
background-color 120ms linear, opacity 120ms linear;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}