H
This commit is contained in:
336
src/index.css
Normal file
336
src/index.css
Normal file
@@ -0,0 +1,336 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* webklar Design System - Muradov Inspired Minimal Dark Theme */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;500;600;700&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap");
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* Ultra Minimal Deep Black Theme - Muradov Inspired */
|
||||
--background: 0 0% 3%;
|
||||
--foreground: 0 0% 92%;
|
||||
|
||||
--card: 0 0% 6%;
|
||||
--card-foreground: 0 0% 92%;
|
||||
|
||||
--popover: 0 0% 8%;
|
||||
--popover-foreground: 0 0% 92%;
|
||||
|
||||
/* Primary - Subtle cyan accent */
|
||||
--primary: 180 40% 50%;
|
||||
--primary-foreground: 0 0% 3%;
|
||||
|
||||
/* Secondary - Dark Gray */
|
||||
--secondary: 0 0% 12%;
|
||||
--secondary-foreground: 0 0% 92%;
|
||||
|
||||
/* Muted - Medium Gray */
|
||||
--muted: 0 0% 45%;
|
||||
--muted-foreground: 0 0% 65%;
|
||||
|
||||
/* Accent */
|
||||
--accent: 0 0% 10%;
|
||||
--accent-foreground: 0 0% 92%;
|
||||
|
||||
--destructive: 0 62% 50%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
|
||||
--border: 0 0% 15%;
|
||||
--input: 0 0% 15%;
|
||||
--ring: 180 40% 50%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
|
||||
|
||||
--sidebar-background: 0 0% 3%;
|
||||
--sidebar-foreground: 222 47% 11%;
|
||||
--sidebar-primary: 200 98% 39%;
|
||||
--sidebar-primary-foreground: 204 100% 97%;
|
||||
--sidebar-accent: 215 24% 26%;
|
||||
--sidebar-accent-foreground: 210 40% 98%;
|
||||
--sidebar-border: 212 26% 83%;
|
||||
--sidebar-ring: 200 98% 39%;
|
||||
--chart-1: 198 93% 59%;
|
||||
--chart-2: 213 93% 67%;
|
||||
--chart-3: 215 20% 65%;
|
||||
--chart-4: 215 16% 46%;
|
||||
--chart-5: 215 19% 34%;
|
||||
--sidebar: 210 40% 98%;
|
||||
--font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
|
||||
--font-display: 'Space Grotesk', system-ui, sans-serif;
|
||||
--spacing: 0.25rem;
|
||||
--font-serif: 'Lora', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
||||
--font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
||||
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
|
||||
--tracking-normal: 0em;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222 47% 11%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 217 32% 17%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--popover: 215 24% 26%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--primary: 198 93% 59%;
|
||||
--primary-foreground: 204 80% 15%;
|
||||
--secondary: 212 26% 83%;
|
||||
--secondary-foreground: 228 84% 4%;
|
||||
--muted: 215 16% 46%;
|
||||
--muted-foreground: 210 40% 98%;
|
||||
--accent: 228 84% 4%;
|
||||
--accent-foreground: 215 20% 65%;
|
||||
--destructive: 0 84% 60%;
|
||||
--destructive-foreground: 0 85% 97%;
|
||||
--border: 215 19% 34%;
|
||||
--input: 215 19% 34%;
|
||||
--ring: 198 93% 59%;
|
||||
--chart-1: 199 95% 73%;
|
||||
--chart-2: 211 96% 78%;
|
||||
--chart-3: 215 20% 65%;
|
||||
--chart-4: 215 16% 46%;
|
||||
--chart-5: 215 19% 34%;
|
||||
--sidebar: 217 32% 17%;
|
||||
--sidebar-foreground: 210 40% 98%;
|
||||
--sidebar-primary: 198 93% 59%;
|
||||
--sidebar-primary-foreground: 204 80% 15%;
|
||||
--sidebar-accent: 215 20% 65%;
|
||||
--sidebar-accent-foreground: 228 84% 4%;
|
||||
--sidebar-border: 215 19% 34%;
|
||||
--sidebar-ring: 198 93% 59%;
|
||||
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
|
||||
--radius: 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground antialiased;
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
|
||||
letter-spacing: -0.04em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Minimal glass nav */
|
||||
.glass-nav {
|
||||
@apply backdrop-blur-xl border-b;
|
||||
background: hsl(0 0% 3% / 0.9);
|
||||
border-color: hsl(0 0% 15% / 0.5);
|
||||
}
|
||||
|
||||
/* Card minimal */
|
||||
.card-minimal {
|
||||
@apply transition-all duration-500;
|
||||
background: hsl(var(--card));
|
||||
border: 1px solid hsl(var(--border));
|
||||
}
|
||||
.card-minimal:hover {
|
||||
border-color: hsl(0 0% 25%);
|
||||
}
|
||||
|
||||
/* Text gradient - subtle */
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, hsl(0 0% 100%) 0%, hsl(0 0% 70%) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Animated underline for links */
|
||||
.link-underline {
|
||||
@apply relative;
|
||||
}
|
||||
.link-underline::after {
|
||||
content: '';
|
||||
@apply absolute bottom-0 left-0 w-full h-px scale-x-0 origin-right transition-transform duration-300;
|
||||
background: hsl(0 0% 98%);
|
||||
}
|
||||
.link-underline:hover::after {
|
||||
@apply scale-x-100 origin-left;
|
||||
}
|
||||
|
||||
/* Fade up on scroll */
|
||||
.fade-up {
|
||||
@apply opacity-0 translate-y-8 transition-all duration-700 ease-out;
|
||||
}
|
||||
.fade-up.visible {
|
||||
@apply opacity-100 translate-y-0;
|
||||
}
|
||||
|
||||
/* Partner logo marquee */
|
||||
.marquee {
|
||||
@apply flex gap-16;
|
||||
animation: marquee 30s linear infinite;
|
||||
}
|
||||
|
||||
/* Minimal project card */
|
||||
.project-card {
|
||||
@apply transition-all duration-500 overflow-hidden;
|
||||
background: hsl(0 0% 6%);
|
||||
border: 1px solid hsl(0 0% 12%);
|
||||
}
|
||||
.project-card:hover {
|
||||
border-color: hsl(0 0% 25%);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
/* Minimal button */
|
||||
.btn-minimal {
|
||||
@apply relative transition-all duration-300;
|
||||
background: hsl(0 0% 98%);
|
||||
color: hsl(0 0% 3%);
|
||||
}
|
||||
.btn-minimal:hover {
|
||||
background: hsl(0 0% 85%);
|
||||
}
|
||||
|
||||
/* Outline button */
|
||||
.btn-outline {
|
||||
@apply relative transition-all duration-300 border;
|
||||
background: transparent;
|
||||
color: hsl(0 0% 98%);
|
||||
border-color: hsl(0 0% 25%);
|
||||
}
|
||||
.btn-outline:hover {
|
||||
border-color: hsl(0 0% 50%);
|
||||
background: hsl(0 0% 10%);
|
||||
}
|
||||
|
||||
/* Stats number */
|
||||
.stat-number {
|
||||
font-family: 'Space Grotesk', system-ui, sans-serif;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.05em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Grid line decoration */
|
||||
.grid-lines {
|
||||
background-image:
|
||||
linear-gradient(hsl(0 0% 12%) 1px, transparent 1px),
|
||||
linear-gradient(90deg, hsl(0 0% 12%) 1px, transparent 1px);
|
||||
background-size: 80px 80px;
|
||||
}
|
||||
|
||||
/* Horizontal divider */
|
||||
.divider {
|
||||
@apply w-full h-px;
|
||||
background: linear-gradient(90deg, transparent 0%, hsl(0 0% 20%) 50%, transparent 100%);
|
||||
}
|
||||
|
||||
/* Label/Tag */
|
||||
.label-tag {
|
||||
@apply text-xs uppercase tracking-widest font-medium;
|
||||
color: hsl(0 0% 50%);
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.shadow-soft {
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
.shadow-elevated {
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
.shadow-floating {
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Keyframes */
|
||||
@keyframes marquee {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(60px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fade-in 0.8s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
animation: slide-up 0.8s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fade-in-up 0.6s ease-out forwards;
|
||||
}
|
||||
Reference in New Issue
Block a user