mirror of
https://github.com/System-End/My-website.git
synced 2026-04-19 20:55:06 +00:00
106 lines
No EOL
2.2 KiB
CSS
106 lines
No EOL
2.2 KiB
CSS
/* public/pages/style.css */
|
|
:root {
|
|
--background-primary: #1a0b2e;
|
|
--background-secondary: #2f1c54;
|
|
--accent-primary: #9d4edd;
|
|
--accent-neon: #b249f8;
|
|
--text-glow: #e0aaff;
|
|
--text-primary: #ffffff;
|
|
--dark-accent: #240046;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
background: linear-gradient(135deg, var(--background-primary), var(--background-secondary));
|
|
color: var(--text-primary);
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
}
|
|
|
|
/* Neon text effect */
|
|
.neon-text {
|
|
color: var(--text-primary);
|
|
text-shadow: 0 0 5px var(--text-glow),
|
|
0 0 10px var(--text-glow),
|
|
0 0 20px var(--accent-neon);
|
|
}
|
|
|
|
/* Interactive elements */
|
|
a, button {
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 8px;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
a:hover, button:hover {
|
|
color: var(--accent-neon);
|
|
text-shadow: 0 0 5px var(--text-glow);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Card styling */
|
|
.card {
|
|
background: rgba(47, 28, 84, 0.3);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(157, 78, 221, 0.2);
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.card:hover {
|
|
border-color: var(--accent-neon);
|
|
box-shadow: 0 0 20px rgba(178, 73, 248, 0.2);
|
|
}
|
|
|
|
/* Navigation styling */
|
|
nav {
|
|
background: rgba(36, 0, 70, 0.8);
|
|
backdrop-filter: blur(10px);
|
|
padding: 1rem;
|
|
}
|
|
|
|
nav ul {
|
|
display: flex;
|
|
gap: 2rem;
|
|
justify-content: center;
|
|
list-style: none;
|
|
}
|
|
|
|
nav a {
|
|
font-weight: 500;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
nav a:hover {
|
|
color: var(--accent-neon);
|
|
text-shadow: 0 0 10px var(--text-glow);
|
|
}
|
|
|
|
/* Content sections */
|
|
.content-section {
|
|
padding: 2rem;
|
|
margin: 2rem 0;
|
|
background: rgba(26, 11, 46, 0.5);
|
|
border-radius: 16px;
|
|
}
|
|
|
|
/* Animated gradient background */
|
|
@keyframes gradientAnimation {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
.animated-bg {
|
|
background: linear-gradient(135deg,
|
|
var(--background-primary),
|
|
var(--background-secondary),
|
|
var(--dark-accent));
|
|
background-size: 200% 200%;
|
|
animation: gradientAnimation 15s ease infinite;
|
|
} |