197 lines
4.6 KiB
CSS
197 lines
4.6 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--background: 0 0% 0%;
|
|
--foreground: 0 0% 98%;
|
|
--card: 0 0% 3.9%;
|
|
--card-foreground: 0 0% 98%;
|
|
--popover: 0 0% 3.9%;
|
|
--popover-foreground: 0 0% 98%;
|
|
--primary: 188 100% 50%;
|
|
--primary-foreground: 0 0% 9%;
|
|
--secondary: 0 0% 14.9%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
--muted: 0 0% 14.9%;
|
|
--muted-foreground: 0 0% 63.9%;
|
|
--accent: 188 100% 50%;
|
|
--accent-foreground: 0 0% 9%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--border: 0 0% 14.9%;
|
|
--input: 0 0% 14.9%;
|
|
--ring: 188 100% 50%;
|
|
--chart-1: 220 70% 50%;
|
|
--chart-2: 160 60% 45%;
|
|
--chart-3: 30 80% 55%;
|
|
--chart-4: 280 65% 60%;
|
|
--chart-5: 340 75% 55%;
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
.dark {
|
|
--background: 0 0% 0%;
|
|
--foreground: 0 0% 98%;
|
|
--card: 0 0% 3.9%;
|
|
--card-foreground: 0 0% 98%;
|
|
--popover: 0 0% 3.9%;
|
|
--popover-foreground: 0 0% 98%;
|
|
--primary: 188 100% 50%;
|
|
--primary-foreground: 0 0% 9%;
|
|
--secondary: 0 0% 14.9%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
--muted: 0 0% 14.9%;
|
|
--muted-foreground: 0 0% 63.9%;
|
|
--accent: 188 100% 50%;
|
|
--accent-foreground: 0 0% 9%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--border: 0 0% 14.9%;
|
|
--input: 0 0% 14.9%;
|
|
--ring: 188 100% 50%;
|
|
--chart-1: 220 70% 50%;
|
|
--chart-2: 160 60% 45%;
|
|
--chart-3: 30 80% 55%;
|
|
--chart-4: 280 65% 60%;
|
|
--chart-5: 340 75% 55%;
|
|
}
|
|
|
|
@theme inline {
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
--font-brand: var(--font-bebas);
|
|
--font-orbitron: var(--font-orbitron);
|
|
--font-inter: var(--font-inter);
|
|
--font-jetbrains-mono: var(--font-jetbrains-mono);
|
|
--font-space-mono: var(--font-space-mono);
|
|
--font-rajdhani: var(--font-rajdhani);
|
|
--font-exo-2: var(--font-exo-2);
|
|
--color-background: hsl(var(--background));
|
|
--color-foreground: hsl(var(--foreground));
|
|
--color-border: hsl(var(--border));
|
|
}
|
|
|
|
body {
|
|
background: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
font-family: var(--font-jetbrains-mono), Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
.font-brand {
|
|
font-family: var(--font-brand), var(--font-sans), Arial, Helvetica, sans-serif;
|
|
font-weight: 900;
|
|
letter-spacing: 0.02em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.font-orbitron {
|
|
font-family: var(--font-orbitron), var(--font-sans), Arial, Helvetica, sans-serif;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.font-inter {
|
|
font-family: var(--font-inter), Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
.font-terminal {
|
|
font-family: var(--font-jetbrains-mono), monospace;
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.font-space-mono {
|
|
font-family: var(--font-space-mono), monospace;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.font-rajdhani {
|
|
font-family: var(--font-rajdhani), sans-serif;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.font-exo-2 {
|
|
font-family: var(--font-exo-2), sans-serif;
|
|
font-weight: 900;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* Dot effect for black text - simplified approach */
|
|
.text-dots {
|
|
position: relative;
|
|
color: #000000;
|
|
background-image:
|
|
radial-gradient(circle, #000000 1px, transparent 1px);
|
|
background-size: 3px 3px;
|
|
background-position: 0 0;
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
/* Custom dotted border with solid corner dots */
|
|
.dotted-border-corners {
|
|
position: relative;
|
|
}
|
|
|
|
.dotted-border-corners::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border: 2px dotted #f5f5f5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dotted-border-corners::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -3px;
|
|
left: -3px;
|
|
right: -3px;
|
|
bottom: -3px;
|
|
background:
|
|
/* Corner dots */
|
|
radial-gradient(circle, #f5f5f5 2px, transparent 2px) 0 0 / 6px 6px,
|
|
radial-gradient(circle, #f5f5f5 2px, transparent 2px) 100% 0 / 6px 6px,
|
|
radial-gradient(circle, #f5f5f5 2px, transparent 2px) 0 100% / 6px 6px,
|
|
radial-gradient(circle, #f5f5f5 2px, transparent 2px) 100% 100% / 6px 6px;
|
|
background-repeat: no-repeat;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Hide scrollbar for all elements */
|
|
* {
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
}
|
|
|
|
*::-webkit-scrollbar {
|
|
display: none; /* Chrome, Safari, Opera */
|
|
}
|
|
|
|
html {
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
}
|
|
|
|
html::-webkit-scrollbar {
|
|
display: none; /* Chrome, Safari, Opera */
|
|
}
|
|
|
|
body {
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
}
|
|
|
|
body::-webkit-scrollbar {
|
|
display: none; /* Chrome, Safari, Opera */
|
|
}
|