Kirubel-Kibru-Yaltopia
89440985f1
Some checks failed
Deploy to Cloudflare Workers / deploy (push) Has been cancelled
156 lines
4.1 KiB
CSS
156 lines
4.1 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
--color-neon: var(--neon);
|
|
--color-neon-muted: var(--neon-muted);
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
--font-sans: var(--font-barlow), ui-sans-serif, system-ui, sans-serif;
|
|
--font-display: var(--font-barlow-condensed), var(--font-barlow), sans-serif;
|
|
}
|
|
|
|
:root {
|
|
--radius: 0.75rem;
|
|
--background: #030303;
|
|
--foreground: #f4f4f5;
|
|
--card: #0a0a0c;
|
|
--card-foreground: #f4f4f5;
|
|
--popover: #0c0c0f;
|
|
--popover-foreground: #f4f4f5;
|
|
--primary: #c8ff4a;
|
|
--primary-foreground: #050505;
|
|
--secondary: #141416;
|
|
--secondary-foreground: #e4e4e7;
|
|
--muted: #18181b;
|
|
--muted-foreground: #8b8b96;
|
|
--accent: #1a1a1f;
|
|
--accent-foreground: #c8ff4a;
|
|
--destructive: #ff4d6d;
|
|
--border: #252528;
|
|
--input: #1c1c20;
|
|
--ring: #c8ff4a;
|
|
--neon: #c8ff4a;
|
|
--neon-muted: #7cb342;
|
|
--chart-1: #c8ff4a;
|
|
--chart-2: #a855f7;
|
|
--chart-3: #ff9124;
|
|
--chart-4: #22d3ee;
|
|
--chart-5: #f472b6;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
border-color: var(--border);
|
|
}
|
|
|
|
html {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
min-height: 100vh;
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.font-display {
|
|
font-family: var(--font-display);
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
/* Retro grid + scanline atmosphere */
|
|
.retro-grid {
|
|
position: relative;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.retro-grid::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -2;
|
|
background-image:
|
|
linear-gradient(color-mix(in oklab, var(--neon) 4%, transparent) 1px, transparent 1px),
|
|
linear-gradient(90deg, color-mix(in oklab, var(--neon) 4%, transparent) 1px, transparent 1px);
|
|
background-size: 40px 40px;
|
|
mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, black 20%, transparent 75%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.retro-grid::after {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -1;
|
|
background: radial-gradient(
|
|
ellipse 120% 80% at 50% -20%,
|
|
color-mix(in oklab, var(--neon) 8%, transparent),
|
|
transparent 55%
|
|
);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.retro-card {
|
|
background: color-mix(in oklab, var(--card) 92%, transparent);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-xl);
|
|
box-shadow:
|
|
0 0 0 1px color-mix(in oklab, var(--neon) 6%, transparent) inset,
|
|
0 8px 32px -12px rgba(0, 0, 0, 0.65);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.retro-card-glow {
|
|
border-color: color-mix(in oklab, var(--neon) 35%, var(--border));
|
|
box-shadow:
|
|
0 0 0 1px color-mix(in oklab, var(--neon) 12%, transparent) inset,
|
|
0 0 24px -6px color-mix(in oklab, var(--neon) 25%, transparent);
|
|
}
|
|
|
|
.neon-text {
|
|
color: var(--neon);
|
|
text-shadow: 0 0 20px color-mix(in oklab, var(--neon) 45%, transparent);
|
|
}
|
|
|
|
.neon-dot {
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 9999px;
|
|
background: var(--neon);
|
|
box-shadow: 0 0 8px var(--neon);
|
|
}
|
|
|
|
.glass-card {
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
.glass-card-highlight {
|
|
background: var(--card);
|
|
border: 1px solid color-mix(in oklab, var(--neon) 35%, var(--border));
|
|
border-radius: var(--radius-lg);
|
|
}
|