@tailwind utilities;
@import "tailwindcss";
@theme {
--radius-ele: var(--radius);
--radius-card: var(--card-radius);
--color-background: hsl(var(--hu-background));
--color-foreground: hsl(var(--hu-foreground));
--color-card: hsl(var(--hu-card));
--color-card-foreground: hsl(var(--hu-card-foreground));
/* --color-primary: hsl(var(--hu-primary));
--color-primary-foreground: hsl(var(--hu-primary-foreground)); */
--color-accent: hsl(var(--hu-accent));
--color-accent-foreground: hsl(var(--hu-accent-foreground));
--color-secondary: hsl(var(--hu-secondary));
--color-secondary-foreground: hsl(var(--hu-secondary-foreground));
--color-muted: hsl(var(--hu-muted));
--color-muted-foreground: hsl(var(--hu-muted-foreground));
--color-destructive: hsl(var(--hu-destructive));
--color-destructive-foreground: hsl(var(--hu-destructive-foreground));
--color-border: hsl(var(--hu-border));
--color-input: hsl(var(--hu-input));
--color-ring: hsl(var(--hu-ring));
}
:root {
--hu-font-geist: var(--font-geist-mono);
--hu-font-jetbrains: var(--font-jetbrains-mono);
--hu-background: 0, 0%, 100%;
--hu-foreground: 0, 0%, 14%;
--hu-card: 0, 0%, 99%;
--hu-card-foreground: 0, 0%, 14%;
--hu-primary: 235, 100%, 60%;
--hu-primary-foreground: 0, 0%, 98%;
--hu-secondary: 0, 0%, 97%;
--hu-secondary-foreground: 0, 0%, 20%;
--hu-muted: 0, 0%, 97%;
--hu-muted-foreground: 0, 0%, 56%;
--hu-accent: 0, 0%, 96%;
--hu-accent-foreground: 0, 0%, 20%;
--hu-destructive: 9, 96%, 47%;
--hu-destructive-foreground: 0, 0%, 98%;
--hu-border: 0, 0%, 92%;
--hu-input: 0, 0%, 100%;
--hu-ring: 0, 0%, 71%;
--color-fd-background: hsl(var(--hu-background));
--color-fd-card: hsl(var(--hu-background));
}
.dark {
--hu-background: 0, 0%, 7%;
--hu-foreground: 0, 0%, 100%;
--hu-card: 0, 0%, 9%;
--hu-card-foreground: 0, 0%, 100%;
--hu-primary: 235, 100%, 60%;
--hu-primary-foreground: 0, 0%, 98%;
--hu-secondary: 0, 0%, 15%;
--hu-secondary-foreground: 0, 0%, 100%;
--hu-muted: 0, 0%, 15%;
--hu-muted-foreground: 0, 0%, 71%;
--hu-accent: 0, 0%, 15%;
--hu-accent-foreground: 0, 0%, 100%;
--hu-destructive: 0, 84%, 50%;
--hu-destructive-foreground: 0, 0%, 98%;
--hu-border: 0, 0%, 100%, 10%;
--hu-input: 0, 0%, 100%, 5%;
--hu-ring: 0, 0%, 56%;
--color-fd-background: hsl(var(--hu-background));
--color-fd-card: hsl(var(--hu-background));
}
:root {
/* App Theme Colors */
--app-bg: #0a0a0a;
--app-surface: #111111;
--app-border: #262626;
--app-hover: #1a1a1a;
--app-text: #f5f5f5;
--app-muted: #a3a3a3;
--app-accent: #10b981;
--app-accent-hover: #059669;
/* Terminal Theme Colors */
--terminal-bg: #000000;
--terminal-header: #0d1117;
--terminal-border: #21262d;
--terminal-hover: #161b22;
--terminal-text: #e6edf3;
--terminal-muted: #7d8590;
--terminal-accent: #00d563;
--terminal-error: #f85149;
/* Semantic Colors */
--success: #10b981;
--warning: #f59e0b;
--error: #ef4444;
--info: #3b82f6;
}
@media (prefers-color-scheme: dark) {
:root {
--app-bg: #0a0a0a;
--app-surface: #111111;
--app-border: #262626;
--app-hover: #1a1a1a;
--app-text: #f5f5f5;
--app-muted: #a3a3a3;
}
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
max-width: 100vw;
overflow-x: hidden;
font-family: var(--font-geist-sans); /* Apply Geist Sans as the default */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code,
pre {
font-family: var(--font-geist-mono);
}
body {
color: var(--app-text);
background: var(--app-bg);
}
a {
color: inherit;
text-decoration: none;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--app-surface);
}
::-webkit-scrollbar-thumb {
background: var(--app-border);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--app-muted);
}
/* Selection styles */
::selection {
background: var(--app-accent);
color: white;
}
/* Focus styles */
*:focus {
outline: 2px solid var(--app-accent);
outline-offset: 2px;
}
*:focus:not(:focus-visible) {
outline: none;
}
input::placeholder,
textarea::placeholder {
color: var(--app-muted);
}
/* Code and terminal styling */
code,
pre,
.font-mono {
font-family:
var(--font-geist-mono), "SF Mono", Monaco, Inconsolata, "Roboto Mono",
"Source Code Pro", monospace;
}
.font-jetbrains-mono {
font-family:
var(--font-jetbrains-mono), "JetBrains Mono", "SF Mono", Monaco,
monospace;
}
/* Animation utilities */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.animate-fade-in {
animation: fadeIn 0.2s ease-out;
}
.animate-slide-in {
animation: slideIn 0.3s ease-out;
}
.animate-pulse-slow {
animation: pulse 2s infinite;
}
/* Terminal cursor */
.terminal-cursor::after {
content: "▋";
color: var(--terminal-accent);
animation: pulse 1s infinite;
}
/* Glass effect */
.glass {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Glow effects */
.glow-green {
box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}
.glow-accent {
box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}
/* Status indicators */
.status-online {
color: var(--success);
}
.status-warning {
color: var(--warning);
}
.status-error {
color: var(--error);
}
.status-info {
color: var(--info);
}
/* Loading states */
.loading-spinner {
border: 2px solid var(--app-border);
border-top: 2px solid var(--app-accent);
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Responsive design helpers */
@media (max-width: 768px) {
.terminal-body {
font-size: 12px;
padding: 12px;
}
.card {
padding: 12px;
}
}
@layer utilities {
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite;
animation-delay: 2s;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite;
animation-delay: 4s;
}
.animate-float-particle {
animation: floatParticle 4s ease-in-out infinite;
}
.animate-fade-in-up {
animation: fadeInUp 0.8s ease-out forwards;
opacity: 0;
transform: translateY(30px);
}
.animation-delay-200 {
animation-delay: 0.2s;
}
.animation-delay-400 {
animation-delay: 0.4s;
}
.animation-delay-600 {
animation-delay: 0.6s;
}
.animation-delay-800 {
animation-delay: 0.8s;
}
.animation-delay-1000 {
animation-delay: 1s;
}
.animation-delay-1200 {
animation-delay: 1.2s;
}
.animate-gradient-x {
animation: gradientX 3s ease infinite;
background-size: 200% 200%;
}
.animate-glow {
animation: glow 2s ease-in-out infinite alternate;
}
.animate-glow-button {
animation: glowButton 2s ease-in-out infinite alternate;
}
.animate-pulse-subtle {
animation: pulseSubtle 3s ease-in-out infinite;
}
.animate-spin-slow {
animation: spin 3s linear infinite;
}
.animate-counter {
animation: counter 2s ease-out;
}
}
@keyframes float {
0%,
100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(180deg);
}
}
@keyframes floatParticle {
0%,
100% {
transform: translateY(0px) translateX(0px);
opacity: 0.6;
}
50% {
transform: translateY(-30px) translateX(10px);
opacity: 1;
}
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes gradientX {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
@keyframes glow {
from {
box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
}
to {
box-shadow: 0 0 30px rgba(6, 182, 212, 0.6);
}
}
@keyframes glowButton {
from {
box-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
}
to {
box-shadow: 0 0 40px rgba(6, 182, 212, 0.8);
}
}
@keyframes pulseSubtle {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.8;
}
}
@keyframes counter {
from {
transform: scale(0.5);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
