172 lines
No EOL
3.4 KiB
CSS
172 lines
No EOL
3.4 KiB
CSS
/*
|
|
2. BASE STYLES & RESET
|
|
*/
|
|
|
|
/* Page Background Gradients */
|
|
.page-bg {
|
|
position: fixed;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(ellipse 80% 50% at 70% 0%, rgba(0, 229, 255, 0.04), transparent 50%),
|
|
radial-gradient(ellipse 60% 40% at 20% 100%, rgba(255, 0, 128, 0.03), transparent 50%);
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* SPA Section Handling */
|
|
section {
|
|
display: none;
|
|
animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
section.active-section {
|
|
display: block;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
font-size: 16px;
|
|
scroll-behavior: smooth;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-void-0);
|
|
color: var(--color-void-800);
|
|
font-family: var(--font-body);
|
|
line-height: var(--leading-base);
|
|
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
|
overflow-x: hidden;
|
|
transition: background-color var(--duration-base) var(--ease-in-out), color var(--duration-base) var(--ease-in-out);
|
|
}
|
|
|
|
/* NOISE TEXTURE OVERLAY */
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
opacity: 0.04;
|
|
mix-blend-mode: overlay;
|
|
}
|
|
|
|
::selection {
|
|
background-color: var(--color-cyan-500);
|
|
color: #fff;
|
|
}
|
|
|
|
/* SCANLINE EFFECT (TALAS) */
|
|
body::after {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
|
|
background: repeating-linear-gradient(0deg,
|
|
transparent,
|
|
transparent 2px,
|
|
rgba(0, 0, 0, 0.1) 2px,
|
|
rgba(0, 0, 0, 0.1) 4px);
|
|
pointer-events: none;
|
|
z-index: 9998;
|
|
opacity: 0.15;
|
|
}
|
|
|
|
/* Custom Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--color-void-100);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-void-300);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--color-cyan-500);
|
|
}
|
|
|
|
/* Global Spotlight Overlay */
|
|
html::after {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
background: radial-gradient(800px circle at var(--mouse-x, 50vw) var(--mouse-y, 50vh), rgba(0, 219, 245, 0.05), transparent 40%);
|
|
mix-blend-mode: screen;
|
|
}
|
|
|
|
/* TYPOGRAPHY DEFAULTS */
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
color: var(--color-void-900);
|
|
font-family: var(--font-head);
|
|
font-weight: 700;
|
|
line-height: var(--leading-tight);
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--text-5xl);
|
|
}
|
|
|
|
h2 {
|
|
font-size: var(--text-4xl);
|
|
}
|
|
|
|
h3 {
|
|
font-size: var(--text-3xl);
|
|
}
|
|
|
|
h4 {
|
|
font-size: var(--text-2xl);
|
|
}
|
|
|
|
h5 {
|
|
font-size: var(--text-xl);
|
|
}
|
|
|
|
h6 {
|
|
font-size: var(--text-lg);
|
|
}
|
|
|
|
p {
|
|
margin-bottom: var(--space-4);
|
|
color: var(--color-void-600);
|
|
}
|
|
|
|
a {
|
|
color: var(--color-cyan-400);
|
|
text-decoration: none;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--color-cyan-300);
|
|
text-shadow: 0 0 8px var(--color-cyan-glow);
|
|
}
|
|
|
|
code,
|
|
pre {
|
|
font-family: var(--font-mono);
|
|
} |