update
This commit is contained in:
@@ -4,6 +4,15 @@
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
||||
|
||||
/* Monaco Font for Domain */
|
||||
@font-face {
|
||||
font-family: 'Monaco';
|
||||
src: url('https://fonts.gstatic.com/s/monaco/v1/Monaco-Regular.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #fafafa;
|
||||
@@ -83,6 +92,27 @@ body {
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Domain Text with Monaco Font */
|
||||
.domain-text {
|
||||
font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.1em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.domain-text {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.domain-text {
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.gradient-text-blue {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
||||
-webkit-background-clip: text;
|
||||
@@ -92,9 +122,64 @@ body {
|
||||
|
||||
/* Animated Background */
|
||||
.animated-bg {
|
||||
background: linear-gradient(-45deg, #0f0f0f, #1a1a1a, #0f0f0f, #1a1a1a);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientShift 15s ease infinite;
|
||||
background:
|
||||
radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, rgba(236, 72, 153, 0.04) 0%, transparent 50%),
|
||||
linear-gradient(-45deg, #0a0a0a, #111111, #0d0d0d, #151515);
|
||||
background-size: 400% 400%, 400% 400%, 400% 400%, 400% 400%;
|
||||
animation: gradientShift 25s ease infinite;
|
||||
}
|
||||
|
||||
/* Film Grain / TV Noise Effect */
|
||||
.animated-bg::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
radial-gradient(circle at 2px 2px, rgba(255,255,255,0.08) 2px, transparent 0),
|
||||
radial-gradient(circle at 4px 4px, rgba(0,0,0,0.04) 2px, transparent 0),
|
||||
radial-gradient(circle at 6px 6px, rgba(255,255,255,0.06) 2px, transparent 0),
|
||||
radial-gradient(circle at 8px 8px, rgba(0,0,0,0.03) 2px, transparent 0);
|
||||
background-size: 4px 4px, 6px 6px, 8px 8px, 10px 10px;
|
||||
pointer-events: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@keyframes filmGrain {
|
||||
0%, 100% {
|
||||
background-position: 0px 0px, 0px 0px, 0px 0px;
|
||||
}
|
||||
10% {
|
||||
background-position: -1px -1px, 1px 1px, -1px 1px;
|
||||
}
|
||||
20% {
|
||||
background-position: 1px -1px, -1px 1px, 1px -1px;
|
||||
}
|
||||
30% {
|
||||
background-position: -1px 1px, 1px -1px, -1px -1px;
|
||||
}
|
||||
40% {
|
||||
background-position: 1px 1px, -1px -1px, 1px 1px;
|
||||
}
|
||||
50% {
|
||||
background-position: -1px -1px, 1px 1px, -1px 1px;
|
||||
}
|
||||
60% {
|
||||
background-position: 1px -1px, -1px 1px, 1px -1px;
|
||||
}
|
||||
70% {
|
||||
background-position: -1px 1px, 1px -1px, -1px -1px;
|
||||
}
|
||||
80% {
|
||||
background-position: 1px 1px, -1px -1px, 1px 1px;
|
||||
}
|
||||
90% {
|
||||
background-position: -1px -1px, 1px 1px, -1px 1px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradientShift {
|
||||
|
||||
Reference in New Issue
Block a user