Import source: src/index
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
+150
@@ -0,0 +1,150 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;1,300&family=Space+Grotesk:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--gold: #c9a84c;
|
||||
--gold-light: #e8c547;
|
||||
--gold-dim: #8a6f2e;
|
||||
--gold-faint: #3d2f0e;
|
||||
--dark-base: #070709;
|
||||
--dark-card: #0f0f12;
|
||||
--dark-surface:#161619;
|
||||
--dark-border: #242428;
|
||||
--text-primary: #f0f0f2;
|
||||
--text-secondary: #7a7a85;
|
||||
--text-muted: #3a3a42;
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--dark-base);
|
||||
color: var(--text-primary);
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
overflow-x: hidden;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ─── Scrollbar ─────────────────────────────── */
|
||||
::-webkit-scrollbar { width: 3px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 2px; }
|
||||
|
||||
/* ─── Selection ─────────────────────────────── */
|
||||
::selection { background: rgba(201,168,76,0.25); color: #fff; }
|
||||
|
||||
/* ─── Glass utilities ───────────────────────── */
|
||||
.glass {
|
||||
background: rgba(255,255,255,0.035);
|
||||
backdrop-filter: blur(28px) saturate(120%);
|
||||
-webkit-backdrop-filter: blur(28px) saturate(120%);
|
||||
border: 1px solid rgba(255,255,255,0.065);
|
||||
}
|
||||
|
||||
.glass-gold {
|
||||
background: rgba(201,168,76,0.055);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(201,168,76,0.18);
|
||||
}
|
||||
|
||||
.glass-dark {
|
||||
background: rgba(7,7,9,0.75);
|
||||
backdrop-filter: blur(28px);
|
||||
-webkit-backdrop-filter: blur(28px);
|
||||
border: 1px solid rgba(255,255,255,0.055);
|
||||
}
|
||||
|
||||
/* ─── Text utilities ────────────────────────── */
|
||||
.gold-text { color: var(--gold); }
|
||||
.gold-gradient-text {
|
||||
background: linear-gradient(135deg, #c9a84c 0%, #e8c547 50%, #c9a84c 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.text-secondary { color: var(--text-secondary); }
|
||||
.text-muted { color: var(--text-muted); }
|
||||
|
||||
/* ─── Glow utilities ────────────────────────── */
|
||||
.gold-glow { box-shadow: 0 0 24px rgba(201,168,76,0.28), 0 0 64px rgba(201,168,76,0.08); }
|
||||
.gold-glow-sm { box-shadow: 0 0 12px rgba(201,168,76,0.22); }
|
||||
.gold-glow-lg { box-shadow: 0 0 40px rgba(201,168,76,0.35), 0 0 100px rgba(201,168,76,0.1); }
|
||||
|
||||
/* ─── Border utilities ──────────────────────── */
|
||||
.gold-border { border: 1px solid rgba(201,168,76,0.25); }
|
||||
.dim-border { border: 1px solid var(--dark-border); }
|
||||
|
||||
/* ─── Section dividers ──────────────────────── */
|
||||
.section-divider {
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,0.2) 50%, transparent 100%);
|
||||
}
|
||||
.section-divider-bright {
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,0.45) 50%, transparent 100%);
|
||||
}
|
||||
|
||||
/* ─── Font helpers ──────────────────────────── */
|
||||
.font-mono-num { font-family: 'Space Mono', monospace; font-variant-numeric: tabular-nums; }
|
||||
|
||||
/* ─── Input range ───────────────────────────── */
|
||||
input[type='range'] {
|
||||
-webkit-appearance: none;
|
||||
height: 3px;
|
||||
border-radius: 2px;
|
||||
background: var(--dark-border);
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type='range']::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 11px; height: 11px;
|
||||
border-radius: 50%;
|
||||
background: var(--gold);
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 6px rgba(201,168,76,0.5);
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
input[type='range']::-webkit-slider-thumb:hover { transform: scale(1.3); }
|
||||
|
||||
/* ─── Horizontal scroll no-bar ──────────────── */
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
|
||||
/* ─── Animations ────────────────────────────── */
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-8px); }
|
||||
}
|
||||
@keyframes pulse-gold {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
@keyframes spin-slow {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -200% center; }
|
||||
100% { background-position: 200% center; }
|
||||
}
|
||||
|
||||
.animate-float { animation: float 3.5s ease-in-out infinite; }
|
||||
.animate-pulse-gold{ animation: pulse-gold 2s ease-in-out infinite; }
|
||||
.animate-spin-slow { animation: spin-slow 12s linear infinite; }
|
||||
.shimmer {
|
||||
background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,0.15) 50%, transparent 100%);
|
||||
background-size: 200% auto;
|
||||
animation: shimmer 2.5s linear infinite;
|
||||
}
|
||||
|
||||
canvas { display: block; }
|
||||
Reference in New Issue
Block a user