* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #16213e 100%);
color: #ffffff;
overflow-x: hidden;
min-height: 100vh;
}
/* Enhanced Loading Screen */
#loading-screen {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #16213e 100%);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.spinner {
border: 4px solid rgba(0, 245, 255, 0.1);
border-top: 4px solid #00f5ff;
border-radius: 50%;
width: 80px;
height: 80px;
animation: spin 1s linear infinite;
box-shadow: 0 0 20px rgba(0, 245, 255, 0.3);
}
@keyframes spin {
0% {
transform: rotate(0deg);
box-shadow: 0 0 20px rgba(0, 245, 255, 0.3);
}
50% {
box-shadow: 0 0 30px rgba(0, 245, 255, 0.5);
}
100% {
transform: rotate(360deg);
box-shadow: 0 0 20px rgba(0, 245, 255, 0.3);
}
}
/* Global text selection */
::selection {
background: rgba(0, 245, 255, 0.3);
color: #ffffff;
}
::-moz-selection {
background: rgba(0, 245, 255, 0.3);
color: #ffffff;
}
/* Scrollbar styling */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: rgba(26, 26, 46, 0.5);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #00f5ff, #b345ff);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #39ff14, #00f5ff);
}
/* Page content wrapper */
#page-container {
min-height: 100vh;
position: relative;
}
#content-wrap {
min-height: calc(100vh - 80px); /* Account for nav height */
}
/* Ensure proper z-index layering */
.z-neg {
z-index: -1;
}
/* Utility classes for the futuristic theme */
.text-neon-blue {
color: #00f5ff;
}
.text-neon-purple {
color: #b345ff;
}
.text-neon-green {
color: #39ff14;
}
.border-neon-blue {
border-color: #00f5ff;
}
.border-neon-purple {
border-color: #b345ff;
}
.border-neon-green {
border-color: #39ff14;
}
/* Enhanced focus states */
button:focus,
a:focus,
input:focus,
textarea:focus {
outline: 2px solid #00f5ff;
outline-offset: 2px;
}
/* Enhanced hover states for interactive elements */
.interactive-hover {
transition: all 0.3s ease;
}
.interactive-hover:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 245, 255, 0.2);
}
/* Loading states for dynamic content */
.loading-skeleton {
background: linear-gradient(90deg,
rgba(255, 255, 255, 0.1) 25%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.1) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
}
@keyframes skeleton-loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Responsive design helpers */
@media (max-width: 768px) {
.spinner {
width: 60px;
height: 60px;
border-width: 3px;
}
body {
font-size: 14px;
}
}
@media (max-width: 480px) {
.spinner {
width: 50px;
height: 50px;
border-width: 2px;
}
}
/* Custom AI-themed cursors */
body {
cursor: url('data:image/svg+xml;utf8,') 12 12, auto;
}
/* AI processing cursor for interactive elements */
a, button, .interactive {
cursor: url('data:image/svg+xml;utf8,') 12 12, pointer;
}
/* Error detection cursor for code/error related elements */
code, pre, .error-related, .ai-analysis {
cursor: url('data:image/svg+xml;utf8,') 12 12, auto;
}
/* Success/resolution cursor for CTA buttons */
.cyber-btn-primary, .btn-primary, .cta-button {
cursor: url('data:image/svg+xml;utf8,') 12 12, pointer;
}
/* Neural network cursor for AI-related content */
.neural-bg, .ai-analysis, .holo-text {
cursor: url('data:image/svg+xml;utf8,') 12 12, auto;
}
/* Loading/processing cursor for counters and animations */
.counter-display, .loading, .processing {
cursor: url('data:image/svg+xml;utf8,') 12 12, auto;
}
/* Terminal/code cursor for developer-focused content */
.font-mono, .terminal, .code-preview {
cursor: url('data:image/svg+xml;utf8,') 12 12, text;
}
/* Crosshair cursor for precise targeting (debugging) */
.pricing-card:hover, .feature-card:hover {
cursor: url('data:image/svg+xml;utf8,') 12 12, crosshair;
}
/* Text selection cursor for readable content */
p, span, h1, h2, h3, h4, h5, h6 {
cursor: url('data:image/svg+xml;utf8,') 12 12, text;
}
/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
.spinner {
animation: none;
border-top-color: #00f5ff;
}
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
/* Disable animated cursors for users who prefer reduced motion */
body, a, button, .interactive, code, pre, .cyber-btn-primary, .neural-bg, .counter-display {
cursor: auto !important;
}
}