351 lines
7.3 KiB
CSS
351 lines
7.3 KiB
CSS
@import "tailwindcss";
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');
|
|
|
|
@theme {
|
|
--color-primary: oklch(0.08 0 0);
|
|
--color-primary-foreground: oklch(0.98 0 0);
|
|
--color-secondary: oklch(0.93 0.02 50);
|
|
--color-secondary-foreground: oklch(0.08 0 0);
|
|
--color-muted: oklch(0.91 0.01 50);
|
|
--color-muted-foreground: oklch(0.45 0.01 50);
|
|
--color-accent: oklch(0.93 0.8 100);
|
|
--color-accent-foreground: oklch(0.08 0 0);
|
|
--color-destructive: oklch(0.55 0.22 25);
|
|
--color-destructive-foreground: oklch(0.98 0 0);
|
|
--color-border: oklch(0.08 0 0);
|
|
--color-input: oklch(0.08 0 0);
|
|
--color-ring: oklch(0.93 0.8 100);
|
|
--radius: 0px;
|
|
--font-display: "Bebas Neue", sans-serif;
|
|
--font-body: "IBM Plex Mono", monospace;
|
|
}
|
|
|
|
:root {
|
|
--background: 35 20% 95%;
|
|
--foreground: 0 0% 4%;
|
|
--card: 35 20% 95%;
|
|
--card-foreground: 0 0% 4%;
|
|
--popover: 35 20% 95%;
|
|
--popover-foreground: 0 0% 4%;
|
|
--primary: 0 0% 4%;
|
|
--primary-foreground: 35 20% 95%;
|
|
--secondary: 35 15% 88%;
|
|
--secondary-foreground: 0 0% 4%;
|
|
--muted: 35 10% 90%;
|
|
--muted-foreground: 0 0% 40%;
|
|
--accent: 70 100% 50%;
|
|
--accent-foreground: 0 0% 4%;
|
|
--destructive: 0 80% 50%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--border: 0 0% 4%;
|
|
--input: 0 0% 4%;
|
|
--ring: 70 100% 50%;
|
|
--radius: 0px;
|
|
|
|
--shadow-brutal: 4px 4px 0px 0px oklch(0.08 0 0);
|
|
--shadow-brutal-sm: 2px 2px 0px 0px oklch(0.08 0 0);
|
|
--shadow-brutal-lg: 6px 6px 0px 0px oklch(0.08 0 0);
|
|
--shadow-brutal-accent: 4px 4px 0px 0px oklch(0.93 0.8 100);
|
|
}
|
|
|
|
.dark {
|
|
--background: 0 0% 8%;
|
|
--foreground: 35 20% 95%;
|
|
--card: 0 0% 12%;
|
|
--card-foreground: 35 20% 95%;
|
|
--popover: 0 0% 12%;
|
|
--popover-foreground: 35 20% 95%;
|
|
--primary: 35 20% 95%;
|
|
--primary-foreground: 0 0% 8%;
|
|
--secondary: 0 0% 15%;
|
|
--secondary-foreground: 35 20% 95%;
|
|
--muted: 0 0% 15%;
|
|
--muted-foreground: 0 0% 60%;
|
|
--accent: 70 100% 50%;
|
|
--accent-foreground: 0 0% 8%;
|
|
--destructive: 0 80% 50%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--border: 35 20% 95%;
|
|
--input: 35 20% 95%;
|
|
--ring: 70 100% 50%;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
background-color: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
font-family: var(--font-body);
|
|
position: relative;
|
|
}
|
|
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
opacity: 0.03;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
::selection {
|
|
background-color: hsl(var(--accent));
|
|
color: hsl(var(--accent-foreground));
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInLeft {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes scaleIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-border {
|
|
0%, 100% {
|
|
border-color: hsl(var(--border));
|
|
}
|
|
50% {
|
|
border-color: hsl(var(--accent));
|
|
}
|
|
}
|
|
|
|
@keyframes marquee {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
100% {
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
@keyframes glitch {
|
|
0% {
|
|
clip-path: inset(40% 0 61% 0);
|
|
transform: translate(-2px, 2px);
|
|
}
|
|
20% {
|
|
clip-path: inset(92% 0 1% 0);
|
|
transform: translate(1px, -1px);
|
|
}
|
|
40% {
|
|
clip-path: inset(43% 0 1% 0);
|
|
transform: translate(-1px, 2px);
|
|
}
|
|
60% {
|
|
clip-path: inset(25% 0 58% 0);
|
|
transform: translate(2px, 1px);
|
|
}
|
|
80% {
|
|
clip-path: inset(54% 0 7% 0);
|
|
transform: translate(-2px, -1px);
|
|
}
|
|
100% {
|
|
clip-path: inset(58% 0 43% 0);
|
|
transform: translate(2px, 2px);
|
|
}
|
|
}
|
|
|
|
.animate-fade-in-up {
|
|
animation: fadeInUp 0.5s ease-out forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
.animate-slide-in-left {
|
|
animation: slideInLeft 0.5s ease-out forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
.animate-slide-in-right {
|
|
animation: slideInRight 0.5s ease-out forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
.animate-scale-in {
|
|
animation: scaleIn 0.4s ease-out forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
.animate-marquee {
|
|
display: flex;
|
|
animation: marquee 25s linear infinite;
|
|
width: max-content;
|
|
}
|
|
|
|
.stagger-1 { animation-delay: 0.05s; }
|
|
.stagger-2 { animation-delay: 0.1s; }
|
|
.stagger-3 { animation-delay: 0.15s; }
|
|
.stagger-4 { animation-delay: 0.2s; }
|
|
.stagger-5 { animation-delay: 0.25s; }
|
|
.stagger-6 { animation-delay: 0.3s; }
|
|
.stagger-7 { animation-delay: 0.35s; }
|
|
.stagger-8 { animation-delay: 0.4s; }
|
|
.stagger-9 { animation-delay: 0.45s; }
|
|
.stagger-10 { animation-delay: 0.5s; }
|
|
.stagger-11 { animation-delay: 0.55s; }
|
|
.stagger-12 { animation-delay: 0.6s; }
|
|
|
|
.font-display {
|
|
font-family: var(--font-display);
|
|
letter-spacing: 0.02em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.font-body {
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.border-brutal {
|
|
border: 3px solid hsl(var(--border));
|
|
}
|
|
|
|
.border-brutal-sm {
|
|
border: 2px solid hsl(var(--border));
|
|
}
|
|
|
|
.border-brutal-accent {
|
|
border: 3px solid hsl(var(--accent));
|
|
border-left-width: 6px;
|
|
}
|
|
|
|
.shadow-brutal {
|
|
box-shadow: var(--shadow-brutal);
|
|
}
|
|
|
|
.shadow-brutal-sm {
|
|
box-shadow: var(--shadow-brutal-sm);
|
|
}
|
|
|
|
.shadow-brutal-lg {
|
|
box-shadow: var(--shadow-brutal-lg);
|
|
}
|
|
|
|
.shadow-brutal-accent {
|
|
box-shadow: var(--shadow-brutal-accent);
|
|
}
|
|
|
|
.hover\:shadow-brutal:hover {
|
|
box-shadow: var(--shadow-brutal);
|
|
transform: translate(-2px, -2px);
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.hover\:shadow-brutal-accent:hover {
|
|
box-shadow: var(--shadow-brutal-accent);
|
|
transform: translate(-2px, -2px);
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.bg-noise {
|
|
position: relative;
|
|
}
|
|
|
|
.bg-noise::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0.03;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
|
pointer-events: none;
|
|
}
|
|
|
|
.text-outline {
|
|
-webkit-text-stroke: 1px hsl(var(--foreground));
|
|
color: transparent;
|
|
}
|
|
|
|
.text-outline-hover:hover {
|
|
-webkit-text-stroke: 1px hsl(var(--foreground));
|
|
color: transparent;
|
|
}
|
|
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.line-clamp-3 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
border-color: hsl(var(--border));
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--font-display);
|
|
letter-spacing: 0.02em;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 12px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: hsl(var(--secondary));
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: hsl(var(--border));
|
|
border: 2px solid hsl(var(--secondary));
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: hsl(var(--accent));
|
|
}
|